@almadar/ui 5.156.0 → 5.158.0

package/dist/components/index.cjs

@@ -6361,11 +6361,32 @@ function isPlainObject(value) {
   if (typeof value === "function") return false;
   return true;
 }
+function subtreeHasMarker(value) {
+  const cached = markerPresenceCache.get(value);
+  if (cached !== void 0) return cached;
+  let found = false;
+  const children = Array.isArray(value) ? value : Object.values(value);
+  for (const child of children) {
+    if (core.isRenderBindingMarker(child)) {
+      found = true;
+      break;
+    }
+    if (Array.isArray(child) || isPlainObject(child)) {
+      if (subtreeHasMarker(child)) {
+        found = true;
+        break;
+      }
+    }
+  }
+  markerPresenceCache.set(value, found);
+  return found;
+}
 function walkValue(value, scopeTrait, entity, config, state) {
   if (core.isRenderBindingMarker(value)) {
     return { resolved: resolveMarkerExpression(value.expression, entity, config, state), changed: true };
   }
   if (Array.isArray(value)) {
+    if (!subtreeHasMarker(value)) return { resolved: value, changed: false };
     const out = [];
     let changed = false;
     for (const item of value) {
@@ -6383,6 +6404,7 @@ function walkValue(value, scopeTrait, entity, config, state) {
     return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
   }
   if (isPlainObject(value)) {
+    if (!subtreeHasMarker(value)) return { resolved: value, changed: false };
     const sourceTrait = value._sourceTrait;
     if (typeof sourceTrait === "string" && sourceTrait !== scopeTrait) {
       return { resolved: value, changed: false };
@@ -6408,9 +6430,11 @@ function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
   }
   return changed ? out : props;
 }
+var markerPresenceCache;
 var init_resolve_render_bindings = __esm({
   "lib/resolve-render-bindings.ts"() {
     "use client";
+    markerPresenceCache = /* @__PURE__ */ new WeakMap();
   }
 });
 var sizeClasses6, minWidthClasses, lookStyles2; exports.Modal = void 0;
@@ -8689,6 +8713,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -8897,7 +8923,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -25510,6 +25536,7 @@ function currentValue(decl, override) {
 function TextLikeControl({
   field,
   numeric,
+  secret,
   value,
   onCommit
 }) {
@@ -25527,7 +25554,7 @@ function TextLikeControl({
   return /* @__PURE__ */ jsxRuntime.jsx(
     exports.Input,
     {
-      inputType: numeric ? "number" : "text",
+      inputType: secret ? "password" : numeric ? "number" : "text",
       value: draft,
       onChange: (e) => setDraft(e.target.value),
       onBlur: commit,
@@ -25588,6 +25615,8 @@ function FieldControl({
     );
   } else if (decl.type === "number") {
     control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: true, value, onCommit: onChange });
+  } else if (core.isSecretConfigType(decl.type)) {
+    control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: false, secret: true, value, onCommit: onChange });
   } else if (decl.type === "string") {
     control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
   } else if (decl.type === "node") {
@@ -25627,7 +25656,7 @@ var init_PropertyInspector = __esm({
     init_JsonTreeEditor();
     init_NodeSlotEditor();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
-    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset", "Asset"]);
+    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset", "Asset", "secret"]);
     exports.PropertyInspector = ({
       config,
       values,
@@ -25785,7 +25814,7 @@ function fileIcon(name) {
       return "file";
   }
 }
-var TreeNodeItem; exports.FileTree = void 0;
+var TreeNodeItem, FlatTreeNodeItem; exports.FileTree = void 0;
 var init_FileTree = __esm({
   "components/core/molecules/FileTree.tsx"() {
     "use client";
@@ -25870,14 +25899,101 @@ var init_FileTree = __esm({
         )) })
       ] });
     };
+    FlatTreeNodeItem = ({
+      item,
+      depth,
+      indent,
+      childrenByParent,
+      onNodeSelect,
+      defaultExpanded = false
+    }) => {
+      const [expanded, setExpanded] = React77.useState(defaultExpanded || depth < 1);
+      const children = childrenByParent.get(item.id);
+      const hasChildren = !!children && children.length > 0;
+      const handleClick = React77.useCallback(() => {
+        if (hasChildren) setExpanded((prev) => !prev);
+        onNodeSelect?.(item.id);
+      }, [hasChildren, item.id, onNodeSelect]);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          exports.Box,
+          {
+            className: "flex items-center gap-1.5 py-0.5 px-2 cursor-pointer rounded-sm transition-colors hover:bg-muted",
+            style: { paddingLeft: depth * indent + 8 },
+            onClick: handleClick,
+            role: "treeitem",
+            "aria-expanded": hasChildren ? expanded : void 0,
+            children: [
+              hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Icon,
+                {
+                  name: expanded ? "chevron-down" : "chevron-right",
+                  size: "xs",
+                  className: "text-[var(--color-muted-foreground)] flex-shrink-0"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { style: { width: 12, flexShrink: 0 } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Icon,
+                {
+                  name: item.icon ?? (hasChildren ? expanded ? "folder-open" : "folder" : "file"),
+                  size: "xs",
+                  className: hasChildren ? "text-[var(--color-warning)]" : "text-[var(--color-muted-foreground)]"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "truncate font-mono text-xs", children: item.label })
+            ]
+          }
+        ),
+        hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "group", children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          FlatTreeNodeItem,
+          {
+            item: child,
+            depth: depth + 1,
+            indent,
+            childrenByParent,
+            onNodeSelect
+          },
+          child.id
+        )) })
+      ] });
+    };
     exports.FileTree = ({
       tree,
+      items,
       selectedPath,
       onFileSelect,
+      onNodeSelect,
       className,
       indent = 16
     }) => {
-      if (tree.length === 0) return null;
+      if (items) {
+        if (items.length === 0) return null;
+        const ids = new Set(items.map((node) => node.id));
+        const childrenByParent = /* @__PURE__ */ new Map();
+        const roots = [];
+        for (const item of items) {
+          if (item.parentId && ids.has(item.parentId)) {
+            const siblings = childrenByParent.get(item.parentId);
+            if (siblings) siblings.push(item);
+            else childrenByParent.set(item.parentId, [item]);
+          } else {
+            roots.push(item);
+          }
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          FlatTreeNodeItem,
+          {
+            item,
+            depth: 0,
+            indent,
+            childrenByParent,
+            onNodeSelect,
+            defaultExpanded: true
+          },
+          item.id
+        )) });
+      }
+      if (!tree || tree.length === 0) return null;
       return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
         TreeNodeItem,
         {
@@ -27530,7 +27646,7 @@ var init_debug = __esm({
     logger.createLogger("almadar:ui:debug:game-state");
   }
 });
-var isRelationsDebugEnabled; exports.RelationSelect = void 0;
+var isRelationsDebugEnabled, MANY_CARDINALITIES; exports.RelationSelect = void 0;
 var init_RelationSelect = __esm({
   "components/core/molecules/RelationSelect.tsx"() {
     "use client";
@@ -27544,6 +27660,11 @@ var init_RelationSelect = __esm({
     init_Typography();
     init_debug();
     isRelationsDebugEnabled = () => isDebugEnabled();
+    MANY_CARDINALITIES = [
+      "many",
+      "one-to-many",
+      "many-to-many"
+    ];
     exports.RelationSelect = ({
       value,
       onChange,
@@ -31615,6 +31736,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -31637,17 +31761,21 @@ var init_MathCanvas = __esm({
       error
     }) => {
       const eventBus = useEventBus();
+      const keyMapKey = keyMap ? JSON.stringify(keyMap) : null;
+      const keyUpMapKey = keyUpMap ? JSON.stringify(keyUpMap) : null;
+      const stableKeyMap = React77.useMemo(() => keyMap, [keyMapKey]);
+      const stableKeyUpMap = React77.useMemo(() => keyUpMap, [keyUpMapKey]);
       React77.useEffect(() => {
-        if (!keyMap && !keyUpMap) return;
+        if (!stableKeyMap && !stableKeyUpMap) return;
         const onDown = (e) => {
-          const ev = keyMap?.[e.code];
+          const ev = stableKeyMap?.[e.code];
           if (ev) {
             eventBus.emit(`UI:${ev}`, {});
             e.preventDefault();
           }
         };
         const onUp = (e) => {
-          const ev = keyUpMap?.[e.code];
+          const ev = stableKeyUpMap?.[e.code];
           if (ev) eventBus.emit(`UI:${ev}`, {});
         };
         window.addEventListener("keydown", onDown);
@@ -31656,7 +31784,7 @@ var init_MathCanvas = __esm({
           window.removeEventListener("keydown", onDown);
           window.removeEventListener("keyup", onUp);
         };
-      }, [keyMap, keyUpMap, eventBus]);
+      }, [stableKeyMap, stableKeyUpMap, eventBus]);
       const derivedShapes = React77.useMemo(() => {
         const out = [];
         const margin = 24;
@@ -31669,11 +31797,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -31744,8 +31872,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -31768,23 +31896,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -31899,6 +32040,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -31918,6 +32061,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,
@@ -44302,6 +44446,9 @@ function determineInputType(field) {
   if (field.type === "relation" || field.relation) {
     return "relation";
   }
+  if (field.type === "array") {
+    return "array";
+  }
   if (field.type === "enum" || field.values || getEnumOptions(field).length > 0) {
     return "select";
   }
@@ -44377,6 +44524,7 @@ var init_Form = __esm({
     init_Typography();
     init_Icon();
     init_RelationSelect();
+    init_TagInput();
     init_UploadDropZone();
     init_Alert();
     init_useEventBus();
@@ -44456,7 +44604,7 @@ var init_Form = __esm({
             values: "values" in f3 ? f3.values : void 0,
             min: f3.min,
             max: f3.max,
-            relation: "relation" in f3 ? { entity: f3.relation.entity } : void 0
+            relation: "relation" in f3 ? { entity: f3.relation.entity, cardinality: f3.relation.cardinality } : void 0
           })
         );
       }, [entity, fields]);
@@ -44691,7 +44839,7 @@ var init_Form = __esm({
                 values: "values" in entityField ? entityField.values : void 0,
                 min: entityField.min,
                 max: entityField.max,
-                relation: "relation" in entityField ? { entity: entityField.relation.entity } : void 0
+                relation: "relation" in entityField ? { entity: entityField.relation.entity, cardinality: entityField.relation.cardinality } : void 0
               };
             }
             return { name: field, type: "string" };
@@ -44803,6 +44951,22 @@ var init_Form = __esm({
           case "relation": {
             const relationOptions = relationsData[fieldName] || [];
             const relationLoading = relationsLoading[fieldName] || false;
+            if (field.relation?.cardinality !== void 0 && MANY_CARDINALITIES.includes(field.relation.cardinality)) {
+              const selectedValues = Array.isArray(currentValue2) ? currentValue2.map((v) => String(v)) : [];
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Select,
+                {
+                  ...commonProps,
+                  multiple: true,
+                  searchable: true,
+                  clearable: true,
+                  options: [...relationOptions],
+                  value: selectedValues,
+                  onValueChange: (value) => handleChange(fieldName, Array.isArray(value) ? value : [value]),
+                  placeholder: field.placeholder || `Select ${label}...`
+                }
+              );
+            }
             return /* @__PURE__ */ jsxRuntime.jsx(
               exports.RelationSelect,
               {
@@ -44817,6 +44981,18 @@ var init_Form = __esm({
               }
             );
           }
+          case "array": {
+            const arrayValue = Array.isArray(currentValue2) ? currentValue2.map((v) => String(v)) : currentValue2 != null && currentValue2 !== "" ? [String(currentValue2)] : [];
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              exports.TagInput,
+              {
+                placeholder: field.placeholder,
+                disabled: isLoading,
+                value: arrayValue,
+                onChange: (next) => handleChange(fieldName, [...next])
+              }
+            );
+          }
           case "number":
             return /* @__PURE__ */ jsxRuntime.jsx(
               exports.Input,
@@ -50366,7 +50542,10 @@ function enrichFormFields(fields, entityDef) {
           enriched.values = entityField.enumValues;
         }
         if (entityField.relation) {
-          enriched.relation = entityField.relation.entity;
+          enriched.relation = {
+            entity: entityField.relation.entity,
+            cardinality: entityField.relation.cardinality
+          };
         }
         return enriched;
       }
@@ -50394,7 +50573,10 @@ function enrichFormFields(fields, entityDef) {
         }
       }
       if (!obj.relation && entityField.relation) {
-        enriched.relation = entityField.relation.entity;
+        enriched.relation = {
+          entity: entityField.relation.entity,
+          cardinality: entityField.relation.cardinality
+        };
       }
       return enriched;
     }
@@ -50409,7 +50591,12 @@ function enrichDetailFields(fields, entityDef) {
     const meta = { type: entityField.type };
     const values = entityField.values ?? entityField.enumValues;
     if (values && values.length > 0) meta.values = values;
-    if (entityField.relation) meta.relation = entityField.relation.entity;
+    if (entityField.relation) {
+      meta.relation = {
+        entity: entityField.relation.entity,
+        cardinality: entityField.relation.cardinality
+      };
+    }
     return meta;
   };
   return fields.map((field) => {
@@ -50963,6 +51150,32 @@ function isPlainConfigObject(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+function subtreeHasTraitRef(value) {
+  const cached = traitRefPresenceCache.get(value);
+  if (cached !== void 0) return cached;
+  let found = false;
+  const children = Array.isArray(value) ? value : Object.values(value);
+  for (const child of children) {
+    if (typeof child === "string" && TRAIT_BINDING_RE.test(child)) {
+      found = true;
+      break;
+    }
+    if (core.isRenderBindingMarker(child)) continue;
+    if (Array.isArray(child)) {
+      if (subtreeHasTraitRef(child)) {
+        found = true;
+        break;
+      }
+    } else if (child !== null && typeof child === "object" && isPlainConfigObject(child)) {
+      if (subtreeHasTraitRef(child)) {
+        found = true;
+        break;
+      }
+    }
+  }
+  traitRefPresenceCache.set(value, found);
+  return found;
+}
 function substituteTraitRefsDeep(value, pathKey) {
   if (core.isRenderBindingMarker(value)) return value;
   if (typeof value === "string") {
@@ -50977,11 +51190,13 @@ function substituteTraitRefsDeep(value, pathKey) {
     return value;
   }
   if (Array.isArray(value)) {
+    if (!subtreeHasTraitRef(value)) return value;
     return value.map(
       (item, i) => substituteTraitRefsDeep(item, `${pathKey}[${i}]`)
     );
   }
   if (typeof value === "object" && isPlainConfigObject(value)) {
+    if (!subtreeHasTraitRef(value)) return value;
     const out = {};
     for (const [k, v] of Object.entries(value)) {
       out[k] = substituteTraitRefsDeep(v, `${pathKey}.${k}`);
@@ -51270,7 +51485,7 @@ function UISlotRenderer({
   }
   return wrapped;
 }
-var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext, SLOT_SKELETON_MAP, SELF_OVERLAY_PATTERNS, CONTENT_NODE_SLOTS, PATTERNS_WITH_CHILDREN;
+var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext, SLOT_SKELETON_MAP, SELF_OVERLAY_PATTERNS, CONTENT_NODE_SLOTS, PATTERNS_WITH_CHILDREN, traitRefPresenceCache;
 var init_UISlotRenderer = __esm({
   "components/core/organisms/UISlotRenderer.tsx"() {
     "use client";
@@ -51344,6 +51559,7 @@ var init_UISlotRenderer = __esm({
       "alert",
       "dialog"
     ]);
+    traitRefPresenceCache = /* @__PURE__ */ new WeakMap();
     UISlotRenderer.displayName = "UISlotRenderer";
   }
 });

package/dist/components/index.d.cts

@@ -3735,13 +3735,33 @@ interface FileTreeNode {
     /** Detected language for syntax highlighting */
     language?: string;
 }
+/** Flat tree row for `items` mode — nested at render time by `parentId`. */
+interface FileTreeItem {
+    /** Unique node id */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Id of this node's parent; empty/absent marks a root */
+    parentId?: string;
+    /** Icon name override (falls back to folder/file by presence of children) */
+    icon?: string;
+}
 interface FileTreeProps {
-    /** The tree data */
-    tree: FileTreeNode[];
+    /** The tree data (pre-nested). Ignored when `items` is provided. */
+    tree?: FileTreeNode[];
+    /** Flat node list, nested by `parentId` at render time — takes precedence
+     *  over `tree` when provided. A `parentId` with no matching row renders
+     *  that node as a root rather than dropping it. */
+    items?: FileTreeItem[];
     /** Currently selected file path */
     selectedPath?: string;
     /** Called when a file is clicked */
     onFileSelect?: (path: string) => void;
+    /** Called when a node is clicked, in flat `items` mode; carries the
+     *  selected node's id. Presence-gated: binding this prop is what turns on
+     *  the click-to-select affordance, mirroring Badge's `onRemove`.
+     *  @offByDefault */
+    onNodeSelect?: (id: string) => void;
     /** CSS class */
     className?: string;
     /** Indent size per level in px (default: 16) */
@@ -4789,6 +4809,11 @@ declare const OnboardingSpotlight: React__default.FC<OnboardingSpotlightProps>;
  * Composed from: Box, HStack, VStack, Input, Button, Spinner, Typography atoms
  */
 
+/** Relation cardinality vocabulary — mirrors `@almadar/core`'s
+ *  `RelationCardinality` (spelled inline: the pattern extractor resolves
+ *  components-tree aliases to `enumValues`, but treats core imports as
+ *  opaque). `many`/`one-to-many`/`many-to-many` drive multi-value pickers. */
+type RelationFieldCardinality = "one" | "many" | "one-to-many" | "many-to-one" | "many-to-many";
 interface RelationOption {
     /** The value to store (typically the ID) */
     value: string;
@@ -6118,6 +6143,12 @@ interface MathCanvasProps {
     showAxes?: boolean;
     showGrid?: boolean;
     gridStep?: number;
+    /** Canvas fill color; `var(--token, fallback)` strings resolve against the active theme. Default transparent. */
+    backgroundColor?: string;
+    /** Grid line color; resolves theme tokens (default `var(--color-border, #9ca3af)`). */
+    gridColor?: string;
+    /** Axis line color; resolves theme tokens (default `var(--color-muted-foreground, #374151)`). */
+    axisColor?: string;
     /** Draw numeric labels on grid lines (default false). */
     showTickLabels?: boolean;
     /** Draw each curve's `label` at its last in-range sample (default false). */
@@ -10721,6 +10752,13 @@ declare const StatCard: React__default.FC<StatCardProps>;
  * Extends DisplayStateProps (see ./types.ts) and declares `entity?: EntityRow`.
  */
 
+/** Relation descriptor injected onto a display field — target entity +
+ *  cardinality, mirroring the `.lolo` `{type:"relation", relation:{...}}`
+ *  descriptor. */
+interface DetailRelationMeta {
+    entity: string;
+    cardinality?: RelationFieldCardinality;
+}
 interface DetailField {
     label: string;
     value: React__default.ReactNode;
@@ -10756,12 +10794,12 @@ type FieldDef$2 = string | {
     header?: string;
     type?: string;
     values?: readonly string[];
-    relation?: string;
+    relation?: DetailRelationMeta;
 } | {
     name: string;
     type: string;
     values?: readonly string[];
-    relation?: string;
+    relation?: DetailRelationMeta;
 };
 interface DetailPanelStatus {
     label: string;
@@ -10889,8 +10927,10 @@ interface RelationConfig {
     entity: string;
     /** Field on target entity to display (defaults to 'name') */
     displayField?: string;
-    /** Cardinality: one-to-one or one-to-many */
-    cardinality?: "one" | "many";
+    /** Cardinality of the relation — many-valued spellings drive the
+     *  multi-select picker below; anything else (including absent) stays
+     *  single-select. */
+    cardinality?: RelationFieldCardinality;
 }
 /**
  * Validation-rule bundle for a schema field. Only `enum` is actually read