@almadar/ui 2.20.6 → 2.20.8

package/dist/runtime/index.cjs

@@ -32172,7 +32172,7 @@ function normalizeChild(child) {
     props: { ...rest, ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {} }
   };
 }
-function SlotBridge() {
+function SlotBridge({ mockData }) {
   const slots = useSlots();
   const { render, clear } = context.useUISlots();
   React112.useEffect(() => {
@@ -32182,7 +32182,10 @@ function SlotBridge() {
         continue;
       }
       const entry = slotState.patterns[slotState.patterns.length - 1];
-      const patternRecord = entry.pattern;
+      let patternRecord = entry.pattern;
+      if (mockData && Object.keys(mockData).length > 0) {
+        patternRecord = enrichFromResponse(patternRecord, mockData);
+      }
       const { type: patternType, children, ...inlineProps } = patternRecord;
       const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
       render({
@@ -32196,7 +32199,7 @@ function SlotBridge() {
         sourceTrait: slotState.source?.trait
       });
     }
-  }, [slots, render, clear]);
+  }, [slots, render, clear, mockData]);
   return null;
 }
 function TraitInitializer({ traits: traits2, orbitalNames }) {
@@ -32245,7 +32248,7 @@ function TraitInitializer({ traits: traits2, orbitalNames }) {
   }, [bridge.connected, orbitalNames, bridge.sendEvent, slotsActions]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl }) {
+function SchemaRunner({ schema, serverUrl, mockData }) {
   const { traits: traits2, allEntities, ir } = useResolvedSchema(schema);
   const allPageTraits = React112.useMemo(() => {
     if (!ir?.pages || ir.pages.size <= 1) return traits2;
@@ -32272,7 +32275,7 @@ function SchemaRunner({ schema, serverUrl }) {
   }, [schema]);
   const inner = /* @__PURE__ */ jsxRuntime.jsx(VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(SlotsProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(EntitySchemaProvider, { entities: Array.from(allEntities.values()), children: [
     /* @__PURE__ */ jsxRuntime.jsx(TraitInitializer, { traits: allPageTraits, orbitalNames: serverUrl ? orbitalNames : void 0 }),
-    /* @__PURE__ */ jsxRuntime.jsx(SlotBridge, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(SlotBridge, { mockData: !serverUrl ? mockData : void 0 }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "min-h-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
   ] }) }) });
   if (serverUrl) {
@@ -32308,7 +32311,7 @@ function OrbPreview({
     {
       className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
-      children: /* @__PURE__ */ jsxRuntime.jsx(OrbitalProvider, { initialData: mockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SchemaRunner, { schema: parsedSchema, serverUrl }) }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(OrbitalProvider, { initialData: mockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SchemaRunner, { schema: parsedSchema, serverUrl, mockData }) }) })
     }
   );
 }

package/dist/runtime/index.js

@@ -32142,7 +32142,7 @@ function normalizeChild(child) {
     props: { ...rest, ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {} }
   };
 }
-function SlotBridge() {
+function SlotBridge({ mockData }) {
   const slots = useSlots();
   const { render, clear } = useUISlots();
   useEffect(() => {
@@ -32152,7 +32152,10 @@ function SlotBridge() {
         continue;
       }
       const entry = slotState.patterns[slotState.patterns.length - 1];
-      const patternRecord = entry.pattern;
+      let patternRecord = entry.pattern;
+      if (mockData && Object.keys(mockData).length > 0) {
+        patternRecord = enrichFromResponse(patternRecord, mockData);
+      }
       const { type: patternType, children, ...inlineProps } = patternRecord;
       const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
       render({
@@ -32166,7 +32169,7 @@ function SlotBridge() {
         sourceTrait: slotState.source?.trait
       });
     }
-  }, [slots, render, clear]);
+  }, [slots, render, clear, mockData]);
   return null;
 }
 function TraitInitializer({ traits: traits2, orbitalNames }) {
@@ -32215,7 +32218,7 @@ function TraitInitializer({ traits: traits2, orbitalNames }) {
   }, [bridge.connected, orbitalNames, bridge.sendEvent, slotsActions]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl }) {
+function SchemaRunner({ schema, serverUrl, mockData }) {
   const { traits: traits2, allEntities, ir } = useResolvedSchema(schema);
   const allPageTraits = useMemo(() => {
     if (!ir?.pages || ir.pages.size <= 1) return traits2;
@@ -32242,7 +32245,7 @@ function SchemaRunner({ schema, serverUrl }) {
   }, [schema]);
   const inner = /* @__PURE__ */ jsx(VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsx(SlotsProvider, { children: /* @__PURE__ */ jsxs(EntitySchemaProvider, { entities: Array.from(allEntities.values()), children: [
     /* @__PURE__ */ jsx(TraitInitializer, { traits: allPageTraits, orbitalNames: serverUrl ? orbitalNames : void 0 }),
-    /* @__PURE__ */ jsx(SlotBridge, {}),
+    /* @__PURE__ */ jsx(SlotBridge, { mockData: !serverUrl ? mockData : void 0 }),
     /* @__PURE__ */ jsx(Box, { className: "min-h-full p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
   ] }) }) });
   if (serverUrl) {
@@ -32278,7 +32281,7 @@ function OrbPreview({
     {
       className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
-      children: /* @__PURE__ */ jsx(OrbitalProvider, { initialData: mockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(SchemaRunner, { schema: parsedSchema, serverUrl }) }) })
+      children: /* @__PURE__ */ jsx(OrbitalProvider, { initialData: mockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(SchemaRunner, { schema: parsedSchema, serverUrl, mockData }) }) })
     }
   );
 }

package/index.css

@@ -0,0 +1,156 @@
+/**
+ * Design System Styles
+ */
+
+/* Load Plus Jakarta Sans from Google Fonts (Track A: preferred UI font) */
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/**
+ * Default fallback theme (minimalist-light — UI/UX improved per Track A eval)
+ * Applied when no data-theme attribute is set.
+ */
+:root:not([data-theme]) {
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    /* Track A: more pronounced hover lift for interactive cards */
+    --shadow-hover: 0 8px 30px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    /* Track A: bump radii from 8/12 → 10/14 for a more modern feel */
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    --color-primary: #18181b;
+    --color-primary-hover: #27272a;
+    --color-primary-foreground: #fafafa;
+    --color-secondary: #fafafa;
+    --color-secondary-hover: #f4f4f5;
+    --color-secondary-foreground: #18181b;
+    --color-accent: #18181b;
+    --color-accent-foreground: #fafafa;
+    --color-muted: #f1f5f9;
+    /* Track A: slightly darker muted-foreground for legibility */
+    --color-muted-foreground: #64748b;
+    /* Track A: background ≠ card → natural surface elevation */
+    --color-background: #f8fafc;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f1f5f9;
+    /* Track A: soften border — semi-transparent instead of solid gray */
+    --color-border: rgba(0, 0, 0, 0.08);
+    --color-input: #e2e8f0;
+    --color-ring: #18181b;
+
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Track A: Plus Jakarta Sans as first preference, Inter as fallback */
+    --font-family:
+        "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.015em;
+    --line-height: 1.6;
+
+    --icon-stroke-width: 1.5;
+    --icon-color: currentColor;
+
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --hover-scale: 1.01;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #18181b;
+}
+
+html {
+    font-family: var(--font-family);
+    line-height: var(--line-height);
+    letter-spacing: var(--letter-spacing);
+    font-weight: var(--font-weight-normal);
+    color-scheme: light dark;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+#root {
+    min-height: 100vh;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-muted);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-muted-foreground);
+    border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-foreground);
+}
+
+@layer utilities {
+    .shadow-theme { box-shadow: var(--shadow-main); }
+    .shadow-theme-sm { box-shadow: var(--shadow-sm); }
+    .shadow-theme-lg { box-shadow: var(--shadow-lg); }
+    .rounded-theme { border-radius: var(--radius-md); }
+    .rounded-theme-sm { border-radius: var(--radius-sm); }
+    .rounded-theme-lg { border-radius: var(--radius-lg); }
+    .border-theme { border-width: var(--border-width); border-color: var(--color-border); }
+    .bg-theme-primary { background-color: var(--color-primary); }
+    .bg-theme-secondary { background-color: var(--color-secondary); }
+    .bg-theme-background { background-color: var(--color-background); }
+    .bg-theme-card { background-color: var(--color-card); }
+    .text-theme-foreground { color: var(--color-foreground); }
+    .text-theme-muted { color: var(--color-muted-foreground); }
+    .text-theme-primary { color: var(--color-primary); }
+    .font-theme-normal { font-weight: var(--font-weight-normal); }
+    .font-theme-medium { font-weight: var(--font-weight-medium); }
+    .font-theme-bold { font-weight: var(--font-weight-bold); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.20.6",
+  "version": "2.20.8",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -103,6 +103,7 @@
   },
   "files": [
     "dist",
+    "index.css",
     "themes",
     "locales",
     "tailwind-preset.cjs"
@@ -112,9 +113,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": ">=2.1.0",
-    "@almadar/evaluator": ">=2.0.0",
-    "@almadar/patterns": ">=2.0.0",
+    "@almadar/core": ">=2.6.3",
+    "@almadar/evaluator": ">=2.5.4",
+    "@almadar/patterns": ">=2.8.7",
     "@almadar/runtime": ">=2.0.0",
     "clsx": "^2.1.0",
     "elkjs": "0.11.1",