feat(ui): expose app theme contract and public components

packages/ui/ui.css

@@ -1050,9 +1050,10 @@
   --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Tailwind v4 color bridge. Existing utility-authored components inherit the
- * configured semantic palette without requiring generated per-palette markup. */
-[data-component] {
+/* Tailwind v4 color bridge. Define the aliases at the document root so both
+ * packaged components and application-authored pages/components inherit the
+ * palette selected in wrnexus.config.ts. */
+:root {
   --color-violet-50: color-mix(in srgb, var(--wire-color-primary) 7%, white);
   --color-violet-100: color-mix(in srgb, var(--wire-color-primary) 14%, white);
   --color-violet-200: color-mix(in srgb, var(--wire-color-primary) 25%, white);
@@ -1096,6 +1097,47 @@
   --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black);
 }
 
+/* Stable semantic helpers for application-authored markup. These deliberately
+ * avoid spacing so applications remain in control of their own layout. */
+.wire-bg-page {
+  background-color: var(--wire-color-bg);
+}
+.wire-bg-surface {
+  background-color: var(--wire-color-surface);
+}
+.wire-bg-surface-2 {
+  background-color: var(--wire-color-surface-2);
+}
+.wire-bg-primary {
+  background-color: var(--wire-color-primary);
+  color: var(--wire-color-primary-contrast);
+}
+.wire-bg-secondary {
+  background-color: var(--wire-color-secondary);
+  color: var(--wire-color-secondary-contrast);
+}
+.wire-text {
+  color: var(--wire-color-text);
+}
+.wire-text-muted {
+  color: var(--wire-color-muted);
+}
+.wire-text-primary {
+  color: var(--wire-color-primary);
+}
+.wire-text-success {
+  color: var(--wire-color-success);
+}
+.wire-text-warning {
+  color: var(--wire-color-warning);
+}
+.wire-text-danger {
+  color: var(--wire-color-danger);
+}
+.wire-border {
+  border-color: var(--wire-color-border);
+}
+
 [data-component] {
   animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both;
 }