@almadar/ui 5.158.0 → 5.160.0

package/dist/components/index.cjs

@@ -6361,7 +6361,16 @@ function isPlainObject(value) {
   if (typeof value === "function") return false;
   return true;
 }
+function isEvaluatorResolvedData(value) {
+  return evaluatorResolvedData.has(value);
+}
+function brandResolved(value) {
+  if (value !== null && typeof value === "object" && !React77__namespace.default.isValidElement(value) && !(value instanceof Date)) {
+    resolvedMarkerFree.add(value);
+  }
+}
 function subtreeHasMarker(value) {
+  if (resolvedMarkerFree.has(value)) return false;
   const cached = markerPresenceCache.get(value);
   if (cached !== void 0) return cached;
   let found = false;
@@ -6383,10 +6392,23 @@ function subtreeHasMarker(value) {
 }
 function walkValue(value, scopeTrait, entity, config, state) {
   if (core.isRenderBindingMarker(value)) {
-    return { resolved: resolveMarkerExpression(value.expression, entity, config, state), changed: true };
+    const cached = markerResolutionCache.get(value);
+    if (cached !== void 0 && cached.entity === entity && cached.config === config && cached.state === state) {
+      return { resolved: cached.resolved, changed: false };
+    }
+    const resolved = resolveMarkerExpression(value.expression, entity, config, state);
+    markerResolutionCache.set(value, { entity, config, state, resolved });
+    if (resolved !== null && typeof resolved === "object" && !React77__namespace.default.isValidElement(resolved) && !(resolved instanceof Date)) {
+      resolvedMarkerFree.add(resolved);
+      evaluatorResolvedData.add(resolved);
+    }
+    return { resolved, changed: true };
   }
   if (Array.isArray(value)) {
-    if (!subtreeHasMarker(value)) return { resolved: value, changed: false };
+    if (!subtreeHasMarker(value)) {
+      brandResolved(value);
+      return { resolved: value, changed: false };
+    }
     const out = [];
     let changed = false;
     for (const item of value) {
@@ -6401,10 +6423,14 @@ function walkValue(value, scopeTrait, entity, config, state) {
       out.push(resolved);
       if (itemChanged) changed = true;
     }
+    brandResolved(out);
     return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
   }
   if (isPlainObject(value)) {
-    if (!subtreeHasMarker(value)) return { resolved: value, changed: false };
+    if (!subtreeHasMarker(value)) {
+      brandResolved(value);
+      return { resolved: value, changed: false };
+    }
     const sourceTrait = value._sourceTrait;
     if (typeof sourceTrait === "string" && sourceTrait !== scopeTrait) {
       return { resolved: value, changed: false };
@@ -6416,11 +6442,13 @@ function walkValue(value, scopeTrait, entity, config, state) {
       out[key] = resolved;
       if (itemChanged) changed = true;
     }
+    brandResolved(out);
     return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
   }
   return { resolved: value, changed: false };
 }
 function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
+  if (resolvedMarkerFree.has(props)) return props;
   const out = {};
   let changed = false;
   for (const [key, value] of Object.entries(props)) {
@@ -6428,13 +6456,17 @@ function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
     out[key] = resolved;
     if (propChanged) changed = true;
   }
+  brandResolved(out);
   return changed ? out : props;
 }
-var markerPresenceCache;
+var markerPresenceCache, markerResolutionCache, resolvedMarkerFree, evaluatorResolvedData;
 var init_resolve_render_bindings = __esm({
   "lib/resolve-render-bindings.ts"() {
     "use client";
     markerPresenceCache = /* @__PURE__ */ new WeakMap();
+    markerResolutionCache = /* @__PURE__ */ new WeakMap();
+    resolvedMarkerFree = /* @__PURE__ */ new WeakSet();
+    evaluatorResolvedData = /* @__PURE__ */ new WeakSet();
   }
 });
 var sizeClasses6, minWidthClasses, lookStyles2; exports.Modal = void 0;
@@ -8520,6 +8552,10 @@ var init_ComponentPatterns = __esm({
     AlertPattern.displayName = "AlertPattern";
   }
 });
+var init_perf = __esm({
+  "lib/perf.ts"() {
+  }
+});
 function themeBodyFont(el) {
   if (typeof getComputedStyle !== "function") return "system-ui, sans-serif";
   const v = getComputedStyle(el).getPropertyValue("--font-family-body").trim();
@@ -8868,6 +8904,7 @@ var init_LearningCanvas = __esm({
   "components/learning/atoms/LearningCanvas.tsx"() {
     "use client";
     init_cn();
+    init_perf();
     init_useEventBus();
     DASH_PATTERNS = { dashed: [6, 4], dotted: [2, 3] };
     TRACE_SERIES_COLORS = ["#2563eb", "#dc2626", "#16a34a", "#f59e0b"];
@@ -8911,6 +8948,7 @@ var init_LearningCanvas = __esm({
         return [...shapes, ...traceOut, ...readoutOut];
       }, [shapes, traces, readouts, width, height]);
       const draw = React77.useCallback(() => {
+        const _perfT = ui.perfStart("learningcanvas:paint");
         const canvas = canvasRef.current;
         if (!canvas) return;
         const ctx = canvas.getContext("2d");
@@ -8932,6 +8970,7 @@ var init_LearningCanvas = __esm({
         for (const shape of derivedShapes) {
           if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
+        ui.perfEnd("learningcanvas:paint", _perfT);
       }, [width, height, backgroundColor, derivedShapes]);
       React77.useEffect(() => {
         draw();
@@ -24262,8 +24301,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -24691,7 +24730,11 @@ function DataList({
           exports.Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -24722,11 +24765,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      exports.Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -24745,7 +24796,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -24755,7 +24806,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -31721,6 +31778,7 @@ var init_MathCanvas = __esm({
   "components/learning/molecules/MathCanvas.tsx"() {
     "use client";
     init_useEventBus();
+    init_perf();
     init_atoms();
     init_Stack();
     init_LearningCanvas();
@@ -31786,6 +31844,7 @@ var init_MathCanvas = __esm({
         };
       }, [stableKeyMap, stableKeyUpMap, eventBus]);
       const derivedShapes = React77.useMemo(() => {
+        const _perfT = ui.perfStart("mathcanvas:derive");
         const out = [];
         const margin = 24;
         const plotW = width - margin * 2;
@@ -32029,6 +32088,7 @@ var init_MathCanvas = __esm({
           }
         }
         out.push(...shapes);
+        ui.perfEnd("mathcanvas:derive", _perfT);
         return out;
       }, [
         width,
@@ -38382,7 +38442,7 @@ var init_RichBlockEditor = __esm({
         {
           variant: "bordered",
           padding: "none",
-          className: cn("flex flex-col", className),
+          className: cn("flex flex-col text-card-foreground", className),
           children: [
             enableBlocks && showToolbar && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
               exports.Box,
@@ -43835,6 +43895,7 @@ var init_DetailPanel = __esm({
     "use client";
     init_atoms();
     init_Box();
+    init_Input();
     init_Stack();
     init_SimpleGrid();
     init_Menu();
@@ -43850,6 +43911,7 @@ var init_DetailPanel = __esm({
     ReactMarkdown2 = React77.lazy(() => import('react-markdown'));
     exports.DetailPanel = ({
       title: propTitle,
+      onTitleCommit,
       subtitle,
       status,
       avatar,
@@ -43871,6 +43933,7 @@ var init_DetailPanel = __esm({
     }) => {
       const eventBus = useEventBus();
       const { t } = hooks.useTranslate();
+      const [titleDraft, setTitleDraft] = React77__namespace.default.useState(null);
       const isFieldDefArray = (arr) => {
         if (!arr || arr.length === 0) return false;
         const first = arr[0];
@@ -44091,6 +44154,50 @@ var init_DetailPanel = __esm({
         }),
         status && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: status.variant ?? "default", children: status.label })
       ] });
+      const commitTitle = () => {
+        if (!onTitleCommit) return;
+        const next = (titleDraft ?? "").trim();
+        setTitleDraft(null);
+        if (!next || next === title) return;
+        onTitleCommit(next, normalizedData?.id !== void 0 ? String(normalizedData.id) : "");
+      };
+      const titleNode = onTitleCommit && titleDraft !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Input,
+        {
+          value: titleDraft,
+          autoFocus: true,
+          "aria-label": t("common.title"),
+          className: "h-auto py-1 text-3xl font-bold tracking-tight",
+          onChange: (e) => setTitleDraft(e.target.value),
+          onBlur: commitTitle,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitTitle();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setTitleDraft(null);
+            }
+          },
+          "data-testid": "detail-title-input"
+        }
+      ) : onTitleCommit ? /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Box,
+        {
+          role: "button",
+          tabIndex: 0,
+          className: "cursor-text rounded px-1 -mx-1 transition-colors hover:bg-muted/40",
+          onClick: () => setTitleDraft(title ?? ""),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setTitleDraft(title ?? "");
+            }
+          },
+          "data-testid": "detail-title-editable",
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h2", weight: "bold", children: title || "Details" })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h2", weight: "bold", children: title || "Details" });
       const content = /* @__PURE__ */ jsxRuntime.jsx(exports.Card, { variant: "elevated", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "md", className: "p-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { justify: "between", align: "start", gap: "md", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { align: "start", gap: "sm", className: "min-w-0", children: [
@@ -44110,7 +44217,7 @@ var init_DetailPanel = __esm({
             avatar,
             /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", className: "min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { align: "center", gap: "sm", wrap: true, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
+                titleNode,
                 statusBadges
               ] }),
               subtitle && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "secondary", children: subtitle })
@@ -44210,16 +44317,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        exports.Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
     };
     exports.DetailPanel.displayName = "DetailPanel";
   }
@@ -44671,7 +44773,7 @@ var init_Form = __esm({
               });
               debug(
                 "forms",
-                `Calculation triggered: ${calc.variableName} = ${value}`
+                `Calculation triggered: ${calc.variableName} = ${String(value)}`
               );
             }
           });
@@ -51151,6 +51253,7 @@ function isPlainConfigObject(value) {
   return proto === Object.prototype || proto === null;
 }
 function subtreeHasTraitRef(value) {
+  if (isEvaluatorResolvedData(value)) return false;
   const cached = traitRefPresenceCache.get(value);
   if (cached !== void 0) return cached;
   let found = false;
@@ -51223,6 +51326,10 @@ function renderPatternProps(props, onDismiss, propsSchema) {
       };
       rendered[key] = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content: childContent, onDismiss });
     } else if (Array.isArray(value)) {
+      if (!isEvaluatorResolvedData(value) && value.some((el) => isPatternConfig(el))) ; else if (!subtreeHasTraitRef(value)) {
+        rendered[key] = value;
+        continue;
+      }
       const isDataArray = propsSchema?.[key]?.items?.types?.includes("object") ?? false;
       rendered[key] = value.map((item, i) => {
         const el = item;
@@ -52674,6 +52781,88 @@ function useDeepAgentGeneration() {
 
 // hooks/index.ts
 init_useEventBus();
+function expressionEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!expressionEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a !== null && b !== null && typeof a === "object" && typeof b === "object" && !Array.isArray(a) && !Array.isArray(b) && !(a instanceof Date) && !(b instanceof Date)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!expressionEqual(
+        a[key],
+        b[key]
+      )) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function isPlainSlotObject(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return false;
+  if (Array.isArray(value)) return false;
+  if (React77__namespace.default.isValidElement(value)) return false;
+  if (value instanceof Date) return false;
+  if (core.isRenderBindingMarker(value)) return false;
+  return true;
+}
+function shareValue(prev, next) {
+  if (Object.is(prev, next)) return { value: prev, equal: true };
+  const prevMarker = core.isRenderBindingMarker(prev) ? prev : void 0;
+  const nextMarker = core.isRenderBindingMarker(next) ? next : void 0;
+  if (prevMarker !== void 0 || nextMarker !== void 0) {
+    if (prevMarker !== void 0 && nextMarker !== void 0 && expressionEqual(prevMarker.expression, nextMarker.expression)) {
+      return { value: prev, equal: true };
+    }
+    return { value: next, equal: false };
+  }
+  if (prev instanceof Date || next instanceof Date) {
+    return prev instanceof Date && next instanceof Date && prev.getTime() === next.getTime() ? { value: prev, equal: true } : { value: next, equal: false };
+  }
+  if (typeof prev === "function" || typeof next === "function") return { value: next, equal: false };
+  if (React77__namespace.default.isValidElement(prev) || React77__namespace.default.isValidElement(next)) return { value: next, equal: false };
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    let equal = prev.length === next.length;
+    const out = new Array(next.length);
+    for (let i = 0; i < next.length; i++) {
+      const child = shareValue(prev[i], next[i]);
+      out[i] = child.value;
+      if (!child.equal) equal = false;
+    }
+    return equal ? { value: prev, equal: true } : { value: out, equal: false };
+  }
+  if (isPlainSlotObject(prev) && isPlainSlotObject(next)) {
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    let equal = prevKeys.length === nextKeys.length;
+    const out = {};
+    for (const key of nextKeys) {
+      if (!Object.prototype.hasOwnProperty.call(prev, key)) {
+        equal = false;
+        out[key] = next[key];
+        continue;
+      }
+      const child = shareValue(prev[key], next[key]);
+      out[key] = child.value;
+      if (!child.equal) equal = false;
+    }
+    return equal ? { value: prev, equal: true } : { value: out, equal: false };
+  }
+  return { value: next, equal: false };
+}
+function reconcileSlotProps(prev, next) {
+  const result = shareValue(prev, next);
+  return { value: result.value, equal: result.equal };
+}
+
+// hooks/useUISlots.ts
 var log17 = logger.createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
@@ -52828,6 +53017,14 @@ function useUISlotManager() {
           });
           return prev;
         }
+        if (existing && existing.priority === content.priority && existing.pattern === content.pattern && existing.animation === content.animation && existing.transitionEvent === content.transitionEvent && existing.fromState === content.fromState && existing.entity === content.entity && existing.nodeId === content.nodeId && existing.autoDismissAt === void 0 && content.autoDismissAt === void 0 && existing.onDismiss === void 0 === (content.onDismiss === void 0)) {
+          const reconciled = reconcileSlotProps(existing.props, content.props);
+          if (reconciled.equal) {
+            log17.debug("slot:flush-bail", { slot: config.target, sourceKey, pattern: content.pattern });
+            return prev;
+          }
+          content.props = reconciled.value;
+        }
         const nextSources = {
           ...slotSources,
           [sourceKey]: content
@@ -53175,6 +53372,7 @@ var en_default = {
   "common.confirm": "Are you sure?",
   "common.create": "Create",
   "common.edit": "Edit",
+  "common.title": "Title",
   "common.view": "View",
   "common.add": "Add",
   "common.remove": "Remove",

package/dist/components/index.d.cts

@@ -10814,6 +10814,14 @@ interface DetailPanelProps extends DisplayStateProps {
     /** RECORD-cardinality: renders ONE record (see body collapse below). */
     entity?: EntityRow;
     title?: string;
+    /**
+     * When bound, the title becomes editable in place: clicking it swaps the
+     * heading for an input, Enter or blur commits, Escape reverts. Receives the
+     * committed title and the record's id so the host can persist a partial
+     * update. Unbound, the title stays a plain heading.
+     * @offByDefault
+     */
+    onTitleCommit?: (title: string, id: string) => void;
     subtitle?: string;
     status?: DetailPanelStatus;
     avatar?: React__default.ReactNode;

package/dist/components/index.d.ts

@@ -10814,6 +10814,14 @@ interface DetailPanelProps extends DisplayStateProps {
     /** RECORD-cardinality: renders ONE record (see body collapse below). */
     entity?: EntityRow;
     title?: string;
+    /**
+     * When bound, the title becomes editable in place: clicking it swaps the
+     * heading for an input, Enter or blur commits, Escape reverts. Receives the
+     * committed title and the record's id so the host can persist a partial
+     * update. Unbound, the title stays a plain heading.
+     * @offByDefault
+     */
+    onTitleCommit?: (title: string, id: string) => void;
     subtitle?: string;
     status?: DetailPanelStatus;
     avatar?: React__default.ReactNode;