@almadar/ui 5.160.0 → 5.161.0

package/dist/avl/index.js

@@ -9,7 +9,7 @@ import { useTranslate } from '@almadar/ui/hooks';
 import { InMemoryPersistence, StateMachineManager, collectDeclaredConfigDefaults, resolveCallSitePayloadCaptures, createServerEffectHandlers, EffectExecutor, createContextFromBindings, createTickScheduler, isValidCronExpression, parseDurationString, normalizeCallSiteConfigToValues, interpolateValue } from '@almadar/runtime';
 import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, isFileValue, ANIMATION_NAMES } from '@almadar/core';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ArrowLeft, ZoomOut, ZoomIn, Download, DollarSign, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp } from 'lucide-react';
+import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ArrowLeft, ZoomOut, ZoomIn, Download, DollarSign, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, HelpCircle, PauseCircle, Search, Bold, Italic, Underline, Strikethrough, Heading1, Heading2, Heading3, ListOrdered, Quote, Link as Link$1, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { UISlotProvider, useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluateGuard, evaluateListenPayloadExpr, evaluate, createMinimalContext, executeEffects } from '@almadar/evaluator';
@@ -28536,8 +28536,9 @@ function DataGrid({
   const titleField = fieldDefs.find((f3) => f3.variant === "h3" || f3.variant === "h4") ?? fieldDefs[0];
   const badgeFields = fieldDefs.filter((f3) => f3.variant === "badge" && f3 !== titleField);
   const bodyFields = fieldDefs.filter((f3) => f3 !== titleField && !badgeFields.includes(f3));
-  const primaryActions = actionDefs.filter((a) => a.variant !== "danger");
-  const dangerActions = actionDefs.filter((a) => a.variant === "danger");
+  const inlineCap = Math.min(maxInlineActions ?? 1, 1);
+  const inlineCardActions = actionDefs.filter((a) => a.variant === "primary").slice(0, inlineCap);
+  const menuCardActions = actionDefs.filter((a) => !inlineCardActions.includes(a));
   const fireAction = (action, itemData) => {
     if (action.navigatesTo) {
       const url = action.navigatesTo.replace(
@@ -28557,6 +28558,9 @@ function DataGrid({
     e.stopPropagation();
     fireAction(action, itemData);
   };
+  const cardClickAction = actionDefs.find((a) => a.variant !== "danger");
+  const handleCardClick = cardClickAction ? (itemData) => () => fireAction(cardClickAction, itemData) : void 0;
+  const stopCardClick = handleCardClick ? (e) => e.stopPropagation() : void 0;
   const hasRenderProp = typeof children === "function";
   useEffect(() => {
     if (data.length > 0 && !hasRenderProp && fieldDefs.length === 0) {
@@ -28628,55 +28632,40 @@ function DataGrid({
                   {
                     "data-entity-row": true,
                     "data-entity-id": id,
-                    className: cn("relative group/rowactions", isSelected && "ring-2 ring-primary rounded-lg"),
+                    onClick: handleCardClick?.(itemData),
+                    className: cn("relative group/rowactions", handleCardClick && "cursor-pointer", isSelected && "ring-2 ring-primary rounded-lg"),
                     children: [
                       children(itemData, index),
-                      actionDefs.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: [
-                        /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5 [@media(pointer:coarse)]:hidden", children: [
-                          (maxInlineActions != null ? actionDefs.slice(0, maxInlineActions) : actionDefs).map((action, idx) => /* @__PURE__ */ jsxs(
-                            Button,
-                            {
-                              variant: action.variant === "primary" ? "primary" : "ghost",
-                              size: "sm",
-                              onClick: handleActionClick(action, itemData),
-                              "data-testid": `action-${action.event}`,
-                              "data-row-id": String(itemData.id),
-                              className: action.variant === "danger" ? "text-error hover:text-error hover:bg-error/10" : void 0,
-                              children: [
-                                action.icon && renderIconInput(action.icon, { size: "xs", className: "mr-1" }),
-                                action.label
-                              ]
-                            },
-                            idx
-                          )),
-                          maxInlineActions != null && actionDefs.length > maxInlineActions && /* @__PURE__ */ jsx(
-                            Menu,
-                            {
-                              position: "bottom-end",
-                              trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                              items: actionDefs.slice(maxInlineActions).map((action) => ({
-                                label: action.label,
-                                icon: action.icon,
-                                event: action.event,
-                                onClick: () => fireAction(action, itemData)
-                              }))
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx(Box, { className: "hidden [@media(pointer:coarse)]:block rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5", children: /* @__PURE__ */ jsx(
+                      actionDefs.length > 0 && /* @__PURE__ */ jsx(Box, { onClick: stopCardClick, className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5", children: [
+                        inlineCardActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "primary",
+                            size: "sm",
+                            onClick: handleActionClick(action, itemData),
+                            "data-testid": `action-${action.event}`,
+                            "data-row-id": String(itemData.id),
+                            children: [
+                              action.icon && renderIconInput(action.icon, { size: "xs", className: "mr-1" }),
+                              action.label
+                            ]
+                          },
+                          idx
+                        )),
+                        menuCardActions.length > 0 && /* @__PURE__ */ jsx(
                           Menu,
                           {
                             position: "bottom-end",
                             trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                            items: actionDefs.map((action) => ({
+                            items: menuCardActions.map((action) => ({
                               label: action.label,
                               icon: action.icon,
-                              event: action.event,
+                              variant: action.variant === "danger" ? "danger" : "default",
                               onClick: () => fireAction(action, itemData)
                             }))
                           }
-                        ) })
-                      ] })
+                        )
+                      ] }) })
                     ]
                   },
                   id
@@ -28690,12 +28679,14 @@ function DataGrid({
                 {
                   "data-entity-row": true,
                   "data-entity-id": id,
+                  onClick: handleCardClick?.(itemData),
                   className: cn(
                     "bg-card rounded-lg",
                     "border border-border",
                     "shadow-elevation-card hover:shadow-elevation-dialog",
                     "hover:border-primary transition-all",
                     "flex flex-col",
+                    handleCardClick && "cursor-pointer",
                     isSelected && "ring-2 ring-primary border-primary"
                   ),
                   children: [
@@ -28745,53 +28736,35 @@ function DataGrid({
                           ] }, field.name);
                         }) })
                       ] }),
-                      (primaryActions.length > 0 || dangerActions.length > 0) && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0", children: [
-                        (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsx(
+                      actionDefs.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", onClick: stopCardClick, className: "flex-shrink-0", children: [
+                        inlineCardActions.map((action, idx) => /* @__PURE__ */ jsx(
                           Button,
                           {
-                            variant: action.variant === "primary" ? "primary" : "ghost",
+                            variant: "primary",
                             size: "sm",
                             onClick: handleActionClick(action, itemData),
                             "data-testid": `action-${action.event}`,
                             "data-row-id": String(itemData.id),
                             "aria-label": action.label,
                             title: action.label,
-                            className: cn(
-                              action.variant === "primary" ? void 0 : "text-muted-foreground hover:text-foreground",
-                              action.icon && "px-2"
-                            ),
+                            className: cn(action.icon && "px-2"),
                             children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
                           },
                           idx
                         )),
-                        maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+                        menuCardActions.length > 0 && /* @__PURE__ */ jsx(
                           Menu,
                           {
                             position: "bottom-end",
                             trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                            items: primaryActions.slice(maxInlineActions).map((action) => ({
+                            items: menuCardActions.map((action) => ({
                               label: action.label,
                               icon: action.icon,
-                              event: action.event,
+                              variant: action.variant === "danger" ? "danger" : "default",
                               onClick: () => fireAction(action, itemData)
                             }))
                           }
-                        ),
-                        dangerActions.map((action, idx) => /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            onClick: handleActionClick(action, itemData),
-                            "data-testid": `action-${action.event}`,
-                            "data-row-id": String(itemData.id),
-                            "aria-label": action.label,
-                            title: action.label,
-                            className: "text-error hover:text-error hover:bg-error/10 px-2",
-                            children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
-                          },
-                          `danger-${idx}`
-                        ))
+                        )
                       ] })
                     ] }) }),
                     bodyFields.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 pt-2 pb-4 flex-1", children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
@@ -29033,54 +29006,59 @@ function DataList({
     if (!itemActions || itemActions.length === 0) return null;
     const inline = maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions;
     const overflow = maxInlineActions != null ? itemActions.slice(maxInlineActions) : [];
-    return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0", children: [
-      inline.map((action, idx) => /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: action.variant ?? "ghost",
-          size: "sm",
-          onClick: handleActionClick(action, itemData),
-          "data-testid": `action-${action.event}`,
-          "data-row-id": String(itemData.id),
-          className: cn(
-            action.variant === "danger" && "text-error hover:bg-error/10",
-            // Must sit on the Button itself: the variant's own text colour
-            // beats an inherited one from the row wrapper.
-            onPrimary && "!text-primary-foreground hover:bg-primary-foreground/15"
-          ),
-          children: [
-            action.icon && renderIconInput2(action.icon, { size: "xs", className: "mr-1" }),
-            action.label
-          ]
-        },
-        idx
-      )),
-      overflow.length > 0 && /* @__PURE__ */ jsx(
-        Menu,
-        {
-          position: "bottom-end",
-          trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-          items: overflow.map((action) => ({
-            label: action.label,
-            icon: action.icon,
-            event: action.event,
-            variant: action.variant === "danger" ? "danger" : "default",
-            onClick: () => eventBus.emit(`UI:${action.event}`, {
-              id: itemData.id,
-              row: itemData
-            })
-          }))
-        }
-      )
-    ] });
+    return (
+      // stopPropagation at the cluster: the "⋯" trigger opens the overflow
+      // menu without also firing the row's default click (inline buttons
+      // already stop it in handleActionClick; the Menu panel is portaled).
+      /* @__PURE__ */ jsxs(HStack, { gap: "xs", onClick: rowClickEvent ? (e) => e.stopPropagation() : void 0, className: "flex-shrink-0", children: [
+        inline.map((action, idx) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: action.variant ?? "ghost",
+            size: "sm",
+            onClick: handleActionClick(action, itemData),
+            "data-testid": `action-${action.event}`,
+            "data-row-id": String(itemData.id),
+            className: cn(
+              action.variant === "danger" && "text-error hover:bg-error/10",
+              // Must sit on the Button itself: the variant's own text colour
+              // beats an inherited one from the row wrapper.
+              onPrimary && "!text-primary-foreground hover:bg-primary-foreground/15"
+            ),
+            children: [
+              action.icon && renderIconInput2(action.icon, { size: "xs", className: "mr-1" }),
+              action.label
+            ]
+          },
+          idx
+        )),
+        overflow.length > 0 && /* @__PURE__ */ jsx(
+          Menu,
+          {
+            position: "bottom-end",
+            trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+            items: overflow.map((action) => ({
+              label: action.label,
+              icon: action.icon,
+              variant: action.variant === "danger" ? "danger" : "default",
+              onClick: () => eventBus.emit(`UI:${action.event}`, {
+                id: itemData.id,
+                row: itemData
+              })
+            }))
+          }
+        )
+      ] })
+    );
   };
+  const rowClickEvent = itemClickEvent || itemActions?.find((a) => a.variant !== "danger")?.event;
   const handleRowClick = (itemData) => () => {
-    if (!itemClickEvent) return;
+    if (!rowClickEvent) return;
     const payload = {
       id: itemData.id,
       row: itemData
     };
-    eventBus.emit(`UI:${itemClickEvent}`, payload);
+    eventBus.emit(`UI:${rowClickEvent}`, payload);
   };
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") }) });
@@ -29128,10 +29106,10 @@ function DataList({
             {
               "data-entity-row": true,
               "data-entity-id": id,
-              onClick: itemClickEvent ? handleRowClick(itemData) : void 0,
+              onClick: rowClickEvent ? handleRowClick(itemData) : void 0,
               className: cn(
                 "flex px-4 group/rowactions",
-                itemClickEvent && "cursor-pointer",
+                rowClickEvent && "cursor-pointer",
                 isSent ? "justify-end" : "justify-start"
               ),
               children: /* @__PURE__ */ jsxs(
@@ -29207,7 +29185,7 @@ function DataList({
       const id2 = itemData.id || String(index);
       const actions = renderItemActions(itemData);
       return wrapDnd(
-        /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn("relative group/rowactions", itemClickEvent && "cursor-pointer"), children: [
+        /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: rowClickEvent ? handleRowClick(itemData) : void 0, className: cn("relative group/rowactions", rowClickEvent && "cursor-pointer"), children: [
           children(itemData, index),
           actions && /* @__PURE__ */ jsxs(Box, { className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: [
             /* @__PURE__ */ jsx(Box, { className: "rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5 [@media(pointer:coarse)]:hidden", children: actions }),
@@ -29219,7 +29197,6 @@ function DataList({
                 items: (itemActions ?? []).map((action) => ({
                   label: action.label,
                   icon: action.icon,
-                  event: action.event,
                   variant: action.variant === "danger" ? "danger" : "default",
                   onClick: () => eventBus.emit(`UI:${action.event}`, {
                     id: itemData.id,
@@ -29236,7 +29213,7 @@ function DataList({
     const id = itemData.id || String(index);
     const titleValue = getNestedValue(itemData, titleField?.name ?? "");
     return wrapDnd(
-      /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
+      /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id, onClick: rowClickEvent ? handleRowClick(itemData) : void 0, className: cn(rowClickEvent && "cursor-pointer"), children: [
         /* @__PURE__ */ jsxs(
           Box,
           {
@@ -34512,7 +34489,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState100 } = React94__default;
+      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState102 } = React94__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -34557,7 +34534,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState100(null);
+        const [clickedPosition, setClickedPosition] = useState102(null);
         const handleMapClick = useCallback96((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -38919,741 +38896,775 @@ var init_PositionedCanvas = __esm({
     PositionedCanvas.displayName = "PositionedCanvas";
   }
 });
-function nextBlockId(prefix = "blk") {
-  _idSeq += 1;
-  const random = Math.random().toString(36).slice(2, 8);
-  return `${prefix}-${Date.now().toString(36)}-${_idSeq}-${random}`;
-}
-function normalizeBlocks(raw) {
-  if (!Array.isArray(raw) || raw.length === 0) return [createBlock("paragraph")];
-  return raw.map((row) => {
-    const entity = row;
-    const rawType = entity.type;
-    const type = typeof rawType === "string" && BLOCK_TYPES.has(rawType) ? rawType : "paragraph";
-    const id = typeof entity.id === "string" && entity.id ? entity.id : nextBlockId(type);
-    return { ...entity, id, type };
-  });
-}
-function createBlock(type) {
-  switch (type) {
-    case "bullet-list":
-    case "numbered-list":
-      return {
-        id: nextBlockId(type),
-        type,
-        children: [
-          { id: nextBlockId("li"), type: "paragraph", content: "" }
-        ]
-      };
-    case "image":
-      return {
-        id: nextBlockId(type),
-        type,
-        content: "",
-        metadata: { url: "", caption: "" }
-      };
-    case "code":
-      return {
-        id: nextBlockId(type),
-        type,
-        content: "",
-        metadata: { language: "plaintext" }
-      };
-    case "divider":
-      return { id: nextBlockId(type), type };
-    default:
-      return { id: nextBlockId(type), type, content: "" };
+function safeUrl(raw, kinds) {
+  const url = raw.trim();
+  if (url.startsWith("#") || url.startsWith("/")) return url;
+  const lower = url.toLowerCase();
+  for (const kind of kinds) {
+    if (lower.startsWith(kind)) return url;
   }
+  return null;
 }
-function replaceBlock(blocks, id, updater) {
-  return blocks.map((block) => block.id === id ? updater(block) : block);
-}
-function removeBlock(blocks, id) {
-  return blocks.filter((block) => block.id !== id);
-}
-function duplicateBlock(block) {
-  return {
-    ...block,
-    id: nextBlockId(block.type),
-    children: block.children?.map((child) => ({
-      ...child,
-      id: nextBlockId("li")
-    })),
-    metadata: block.metadata ? { ...block.metadata } : void 0
-  };
-}
-function insertAfter(blocks, targetId, inserted) {
-  const idx = blocks.findIndex((b) => b.id === targetId);
-  if (idx === -1) return [...blocks, inserted];
-  const next = blocks.slice();
-  next.splice(idx + 1, 0, inserted);
-  return next;
-}
-function changeBlockType(block, type) {
-  if (block.type === type) return block;
-  if (type === "bullet-list" || type === "numbered-list") {
-    if (block.children && block.children.length > 0) {
-      return { ...block, type };
+function sanitizeNode(el) {
+  const children = Array.from(el.children);
+  for (const child of children) {
+    const tag = child.tagName.toLowerCase();
+    if (DROP_TAGS.has(tag)) {
+      child.remove();
+      continue;
     }
-    const seed2 = block.content ?? "";
-    return {
-      id: block.id,
-      type,
-      children: [
-        { id: nextBlockId("li"), type: "paragraph", content: seed2 }
-      ]
-    };
-  }
-  if (type === "divider") {
-    return { id: block.id, type };
+    const allowed = ALLOWED_ATTRS[tag];
+    if (!allowed) {
+      sanitizeNode(child);
+      child.replaceWith(...Array.from(child.childNodes));
+      continue;
+    }
+    for (const attr of Array.from(child.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (!allowed.includes(name)) {
+        child.removeAttribute(attr.name);
+        continue;
+      }
+      if (name === "href") {
+        const url = safeUrl(attr.value, ["http://", "https://", "mailto:"]);
+        if (url === null) child.removeAttribute(attr.name);
+        else child.setAttribute("href", url);
+      }
+      if (name === "src") {
+        const url = safeUrl(attr.value, ["http://", "https://", "data:image/"]);
+        if (url === null) child.remove();
+        else child.setAttribute("src", url);
+      }
+    }
+    sanitizeNode(child);
   }
-  if (type === "image") {
-    return {
-      id: block.id,
-      type,
-      content: "",
-      metadata: { url: "", caption: block.content ?? "" }
-    };
+}
+function sanitizeRichHtml(html) {
+  if (!html || typeof html !== "string") return "";
+  if (typeof window === "undefined" || typeof DOMParser === "undefined") return "";
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  sanitizeNode(doc.body);
+  if (!doc.body.querySelector("img, hr") && (doc.body.textContent ?? "").trim().length === 0) {
+    return "";
   }
-  if (type === "code") {
-    return {
-      id: block.id,
-      type,
-      content: block.content ?? "",
-      metadata: { language: "plaintext" }
-    };
+  return doc.body.innerHTML.replace(/​/g, "");
+}
+function htmlIsEmpty(el) {
+  if (el.querySelector("img, hr")) return false;
+  return (el.textContent ?? "").trim().length === 0;
+}
+function closestBlock(node, root) {
+  let cur = node;
+  while (cur && cur !== root) {
+    if (cur instanceof Element && BLOCK_TAGS.has(cur.tagName)) return cur;
+    cur = cur.parentNode;
   }
-  const seed = block.children?.[0]?.content ?? block.content ?? "";
-  return { id: block.id, type, content: seed };
+  return null;
 }
-function BlockMenu({ block, readOnly, onDelete, onDuplicate, onChangeType }) {
-  const { t } = useTranslate();
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    function onDocClick(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
+function RichTextStyles() {
+  return /* @__PURE__ */ jsx("style", { children: RICH_TEXT_CSS });
+}
+function readToolbarState(root) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return IDLE_TOOLBAR;
+  const anchor = sel.anchorNode;
+  if (!anchor || !root.contains(anchor)) return IDLE_TOOLBAR;
+  let block = null;
+  let link = false;
+  let node = anchor;
+  while (node && node !== root) {
+    if (node instanceof Element) {
+      const tag = node.tagName.toLowerCase();
+      if (!block && (tag === "h1" || tag === "h2" || tag === "h3" || tag === "blockquote" || tag === "pre")) {
+        block = tag;
       }
+      if (tag === "a") link = true;
     }
-    document.addEventListener("mousedown", onDocClick);
-    return () => document.removeEventListener("mousedown", onDocClick);
-  }, [open]);
-  if (readOnly) return null;
-  return /* @__PURE__ */ jsxs(Box, { ref, className: "relative", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        "aria-label": t("richBlockEditor.blockActions"),
-        className: cn(
-          "inline-flex items-center justify-center",
-          "h-6 w-6 rounded-sm p-0 gap-0",
-          "text-muted-foreground hover:bg-muted hover:text-foreground",
-          "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-          "transition-opacity"
-        ),
-        onClick: () => setOpen((v) => !v),
-        children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", className: "w-3.5 h-3.5" })
-      }
-    ),
-    open && /* @__PURE__ */ jsxs(
-      Box,
-      {
-        role: "menu",
-        className: cn(
-          "absolute right-0 z-10 mt-1 w-44",
-          "rounded-container border border-border bg-popover shadow-elevation-popover",
-          "py-1 text-sm"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(Box, { className: "px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground", children: t(BLOCK_TYPE_LABEL_KEY[block.type]) }),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              role: "menuitem",
-              className: "flex w-full items-center gap-2 px-2 py-1.5 text-left justify-start rounded-none",
-              onClick: () => {
-                onDuplicate();
-                setOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsx(Icon, { name: "plus", className: "w-3.5 h-3.5" }),
-                " ",
-                t("richBlockEditor.duplicate")
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              role: "menuitem",
-              className: "flex w-full items-center gap-2 px-2 py-1.5 text-left text-destructive hover:bg-muted justify-start rounded-none",
-              onClick: () => {
-                onDelete();
-                setOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsx(Icon, { name: "trash", className: "w-3.5 h-3.5" }),
-                " ",
-                t("common.delete")
-              ]
-            }
-          ),
-          CHANGEABLE_TYPES.includes(block.type) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Box, { className: "my-1 border-t border-border" }),
-            /* @__PURE__ */ jsx(Box, { className: "px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground", children: t("richBlockEditor.turnInto") }),
-            CHANGEABLE_TYPES.filter((bt) => bt !== block.type).map((bt) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                role: "menuitem",
-                className: "flex w-full items-center gap-2 px-2 py-1.5 text-left justify-start rounded-none",
-                onClick: () => {
-                  onChangeType(bt);
-                  setOpen(false);
-                },
-                children: t(BLOCK_TYPE_LABEL_KEY[bt])
-              },
-              bt
-            ))
-          ] })
-        ]
-      }
-    )
-  ] });
+    node = node.parentNode;
+  }
+  return {
+    bold: document.queryCommandState("bold"),
+    italic: document.queryCommandState("italic"),
+    underline: document.queryCommandState("underline"),
+    strikeThrough: document.queryCommandState("strikeThrough"),
+    block,
+    bullets: document.queryCommandState("insertUnorderedList"),
+    numbers: document.queryCommandState("insertOrderedList"),
+    link
+  };
 }
-function Editable({
-  tag,
-  value,
-  readOnly,
-  placeholder,
-  className,
-  ariaLabel,
-  onValueChange
-}) {
-  const ref = useRef(null);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const isFocused = document.activeElement === el;
-    if (!isFocused && el.textContent !== value) {
-      el.textContent = value;
-    }
-  }, [value]);
-  const handleInput = useCallback(
-    (e) => {
-      onValueChange(e.currentTarget.textContent ?? "");
-    },
-    [onValueChange]
-  );
+function ToolbarButton({ icon: IconCmp, label, active, onExec }) {
   return /* @__PURE__ */ jsx(
-    Box,
+    Button,
     {
-      as: tag,
-      ref,
-      contentEditable: !readOnly,
-      suppressContentEditableWarning: true,
-      role: readOnly ? void 0 : "textbox",
-      "aria-label": ariaLabel,
-      "aria-multiline": "true",
-      "data-placeholder": placeholder,
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      "aria-label": label,
+      "aria-pressed": active,
+      title: label,
       className: cn(
-        "outline-none focus-visible:ring-1 focus-visible:ring-ring rounded-sm",
-        "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground/60",
-        className
+        "h-8 w-8 p-0 gap-0 justify-center",
+        active && "bg-muted text-foreground"
       ),
-      onInput: handleInput
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onExec();
+      },
+      children: /* @__PURE__ */ jsx(IconCmp, { size: 15 })
     }
   );
 }
-function BlockRow({
-  block,
-  readOnly,
-  showAffordances,
-  placeholder,
-  onUpdate,
-  onDelete,
-  onDuplicate,
-  onChangeType
-}) {
-  const { t } = useTranslate();
-  const setContent = useCallback(
-    (next) => onUpdate((b) => ({ ...b, content: next })),
-    [onUpdate]
-  );
-  const setMetadata = useCallback(
-    (key, value) => onUpdate((b) => ({
-      ...b,
-      metadata: { ...b.metadata ?? {}, [key]: value }
-    })),
-    [onUpdate]
-  );
-  const setChildContent = useCallback(
-    (childId, next) => onUpdate((b) => ({
-      ...b,
-      children: (b.children ?? []).map(
-        (c) => c.id === childId ? { ...c, content: next } : c
-      )
-    })),
-    [onUpdate]
-  );
-  const addListItem = useCallback(
-    () => onUpdate((b) => ({
-      ...b,
-      children: [
-        ...b.children ?? [],
-        { id: nextBlockId("li"), type: "paragraph", content: "" }
-      ]
-    })),
-    [onUpdate]
-  );
-  const removeListItem = useCallback(
-    (childId) => onUpdate((b) => {
-      const remaining = (b.children ?? []).filter((c) => c.id !== childId);
-      return {
-        ...b,
-        children: remaining.length === 0 ? [{ id: nextBlockId("li"), type: "paragraph", content: "" }] : remaining
-      };
-    }),
-    [onUpdate]
-  );
-  const renderBody = () => {
-    switch (block.type) {
-      case "heading-1":
-        return /* @__PURE__ */ jsx(
-          Editable,
-          {
-            tag: "h1",
-            value: block.content ?? "",
-            readOnly,
-            placeholder: placeholder ?? t("richBlockEditor.placeholder.heading1"),
-            ariaLabel: t("richBlockEditor.aria.heading1Block"),
-            className: "text-3xl font-bold leading-tight",
-            onValueChange: setContent
-          }
-        );
-      case "heading-2":
-        return /* @__PURE__ */ jsx(
-          Editable,
-          {
-            tag: "h2",
-            value: block.content ?? "",
-            readOnly,
-            placeholder: placeholder ?? t("richBlockEditor.placeholder.heading2"),
-            ariaLabel: t("richBlockEditor.aria.heading2Block"),
-            className: "text-2xl font-semibold leading-tight",
-            onValueChange: setContent
-          }
-        );
-      case "heading-3":
-        return /* @__PURE__ */ jsx(
-          Editable,
-          {
-            tag: "h3",
-            value: block.content ?? "",
-            readOnly,
-            placeholder: placeholder ?? t("richBlockEditor.placeholder.heading3"),
-            ariaLabel: t("richBlockEditor.aria.heading3Block"),
-            className: "text-xl font-semibold leading-tight",
-            onValueChange: setContent
-          }
-        );
-      case "quote":
-        return /* @__PURE__ */ jsx(
-          Editable,
-          {
-            tag: "blockquote",
-            value: block.content ?? "",
-            readOnly,
-            placeholder: placeholder ?? t("richBlockEditor.placeholder.quote"),
-            ariaLabel: t("richBlockEditor.aria.quoteBlock"),
-            className: "border-l-4 border-primary/60 pl-4 italic text-muted-foreground",
-            onValueChange: setContent
-          }
-        );
-      case "code":
-        return /* @__PURE__ */ jsxs(Box, { className: "rounded-md border border-border bg-muted/40", children: [
-          /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between border-b border-border px-3 py-1 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(Typography, { as: "span", variant: "caption", className: "uppercase tracking-wide", children: t("richBlockEditor.blockType.code") }),
-            !readOnly && /* @__PURE__ */ jsx(
-              Input,
-              {
-                inputType: "text",
-                value: String(block.metadata?.language ?? "plaintext"),
-                "aria-label": t("richBlockEditor.aria.codeLanguage"),
-                className: cn(
-                  "h-6 w-32 rounded-sm border border-border bg-background",
-                  "px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
-                ),
-                onChange: (e) => setMetadata("language", e.target.value)
-              }
-            ),
-            readOnly && /* @__PURE__ */ jsx(Typography, { as: "span", variant: "caption", className: "text-xs", children: String(block.metadata?.language ?? "plaintext") })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Editable,
-            {
-              tag: "pre",
-              value: block.content ?? "",
-              readOnly,
-              placeholder: placeholder ?? t("richBlockEditor.placeholder.code"),
-              ariaLabel: t("richBlockEditor.aria.codeBlock"),
-              className: "block whitespace-pre-wrap p-3 font-mono text-sm leading-relaxed",
-              onValueChange: setContent
-            }
-          )
-        ] });
-      case "divider":
-        return /* @__PURE__ */ jsx(Divider, { className: "my-2" });
-      case "image": {
-        const url = String(block.metadata?.url ?? "");
-        const caption = String(block.metadata?.caption ?? "");
-        const imgProps = {
-          src: url,
-          alt: caption || t("richBlockEditor.embeddedImage"),
-          className: "max-h-96 w-full rounded-md border border-border object-contain"
+var CHANGE_DEBOUNCE_MS, ALLOWED_ATTRS, DROP_TAGS, MD_BLOCK_PREFIXES, BLOCK_TAGS, MD_INLINE_RULES, RICH_TEXT_CSS, IDLE_TOOLBAR, RichTextEditor;
+var init_RichTextEditor = __esm({
+  "components/core/molecules/RichTextEditor.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_Button();
+    init_useEventBus();
+    CHANGE_DEBOUNCE_MS = 400;
+    ALLOWED_ATTRS = {
+      p: [],
+      h1: [],
+      h2: [],
+      h3: [],
+      h4: [],
+      ul: [],
+      ol: [],
+      li: [],
+      blockquote: [],
+      pre: [],
+      code: [],
+      b: [],
+      strong: [],
+      i: [],
+      em: [],
+      u: [],
+      s: [],
+      strike: [],
+      br: [],
+      hr: [],
+      div: [],
+      span: [],
+      a: ["href"],
+      img: ["src", "alt"]
+    };
+    DROP_TAGS = /* @__PURE__ */ new Set(["script", "style", "iframe", "object", "embed", "link", "meta", "form", "input", "button", "textarea", "select"]);
+    MD_BLOCK_PREFIXES = {
+      "#": { kind: "block", tag: "h1" },
+      "##": { kind: "block", tag: "h2" },
+      "###": { kind: "block", tag: "h3" },
+      ">": { kind: "block", tag: "blockquote" },
+      "```": { kind: "block", tag: "pre" },
+      "-": { kind: "list", command: "insertUnorderedList" },
+      "*": { kind: "list", command: "insertUnorderedList" },
+      "1.": { kind: "list", command: "insertOrderedList" }
+    };
+    BLOCK_TAGS = /* @__PURE__ */ new Set(["P", "DIV", "LI", "H1", "H2", "H3", "H4", "BLOCKQUOTE", "PRE"]);
+    MD_INLINE_RULES = [
+      { pattern: /\*\*([^*\n]+)\*\*$/, wrap: "strong" },
+      { pattern: /(^|[^*])\*([^*\n]+)\*$/, wrap: "em" },
+      { pattern: /`([^`\n]+)`$/, wrap: "code" }
+    ];
+    RICH_TEXT_CSS = `
+.almadar-rich-text { line-height: 1.7; color: var(--color-foreground); }
+.almadar-rich-text h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; margin: 1.25em 0 0.4em; }
+.almadar-rich-text h2 { font-size: 1.5rem; font-weight: 650; line-height: 1.3; margin: 1.1em 0 0.4em; }
+.almadar-rich-text h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: 1em 0 0.35em; }
+.almadar-rich-text h1:first-child, .almadar-rich-text h2:first-child, .almadar-rich-text h3:first-child { margin-top: 0; }
+.almadar-rich-text p { margin: 0.5em 0; }
+.almadar-rich-text ul { list-style: disc; padding-inline-start: 1.5rem; margin: 0.5em 0; }
+.almadar-rich-text ol { list-style: decimal; padding-inline-start: 1.5rem; margin: 0.5em 0; }
+.almadar-rich-text li { margin: 0.25em 0; }
+.almadar-rich-text blockquote { border-inline-start: 3px solid var(--color-primary); padding-inline-start: 1rem; font-style: italic; color: var(--color-muted-foreground); margin: 0.75em 0; }
+.almadar-rich-text pre { background: var(--color-muted); border: 1px solid var(--color-border); border-radius: 0.375rem; padding: 0.75rem 1rem; font-family: ui-monospace, monospace; font-size: 0.875em; white-space: pre-wrap; margin: 0.75em 0; }
+.almadar-rich-text code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--color-muted); border-radius: 0.25rem; padding: 0.1em 0.35em; }
+.almadar-rich-text pre code { background: transparent; padding: 0; }
+.almadar-rich-text a { color: var(--color-primary); text-decoration: underline; }
+.almadar-rich-text hr { border: none; border-top: 1px solid var(--color-border); margin: 1.25em 0; }
+.almadar-rich-text img { max-width: 100%; border-radius: 0.375rem; }
+`;
+    IDLE_TOOLBAR = {
+      bold: false,
+      italic: false,
+      underline: false,
+      strikeThrough: false,
+      block: null,
+      bullets: false,
+      numbers: false,
+      link: false
+    };
+    RichTextEditor = ({
+      value,
+      onChange,
+      changeEvent,
+      readOnly = false,
+      placeholder,
+      showToolbar = true,
+      className
+    }) => {
+      const { t } = useTranslate();
+      const ref = useRef(null);
+      const [toolbar, setToolbar] = useState(IDLE_TOOLBAR);
+      const [empty, setEmpty] = useState(() => !value || !sanitizeRichHtml(value).trim());
+      const eventBus = useEventBus();
+      const onChangeRef = useRef(onChange);
+      const changeEventRef = useRef(changeEvent);
+      useEffect(() => {
+        onChangeRef.current = onChange;
+        changeEventRef.current = changeEvent;
+      }, [onChange, changeEvent]);
+      const emitTimerRef = useRef(null);
+      const emitNow = useCallback(() => {
+        const el = ref.current;
+        if (!el) return;
+        const html = sanitizeRichHtml(el.innerHTML);
+        onChangeRef.current?.(html);
+        const evt = changeEventRef.current;
+        if (evt) eventBus.emit(`UI:${evt}`, { value: html });
+      }, [eventBus]);
+      const scheduleEmit = useCallback(() => {
+        if (emitTimerRef.current) clearTimeout(emitTimerRef.current);
+        emitTimerRef.current = setTimeout(() => {
+          emitTimerRef.current = null;
+          emitNow();
+        }, CHANGE_DEBOUNCE_MS);
+      }, [emitNow]);
+      const flushEmit = useCallback(() => {
+        if (!emitTimerRef.current) return;
+        clearTimeout(emitTimerRef.current);
+        emitTimerRef.current = null;
+        emitNow();
+      }, [emitNow]);
+      useEffect(() => () => {
+        if (emitTimerRef.current) {
+          clearTimeout(emitTimerRef.current);
+          emitTimerRef.current = null;
+          emitNow();
+        }
+      }, [emitNow]);
+      useEffect(() => {
+        if (readOnly) return;
+        const el = ref.current;
+        if (!el) return;
+        if (document.activeElement === el) return;
+        const next = sanitizeRichHtml(value ?? "") || "<p><br></p>";
+        if (el.innerHTML !== next) {
+          el.innerHTML = next;
+          setEmpty(htmlIsEmpty(el));
+        }
+      }, [readOnly, value]);
+      useEffect(() => {
+        if (readOnly) return;
+        document.execCommand("defaultParagraphSeparator", false, "p");
+      }, [readOnly]);
+      useEffect(() => {
+        if (readOnly || !showToolbar) return;
+        const onSelectionChange = () => {
+          const el = ref.current;
+          if (!el) return;
+          setToolbar(readToolbarState(el));
         };
-        return /* @__PURE__ */ jsxs(Box, { className: "space-y-2", children: [
-          url ? /* @__PURE__ */ jsx(Box, { as: "img", ...imgProps }) : /* @__PURE__ */ jsxs(
-            Box,
-            {
-              className: cn(
-                "flex h-32 items-center justify-center",
-                "rounded-md border border-dashed border-border",
-                "text-sm text-muted-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(Icon, { name: "image", className: "mr-2 w-4 h-4" }),
-                " ",
-                t("richBlockEditor.noImageUrl")
-              ]
-            }
-          ),
-          !readOnly && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-2 sm:flex-row", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                inputType: "url",
-                value: url,
-                placeholder: "https://example.com/image.png",
-                "aria-label": t("richBlockEditor.aria.imageUrl"),
-                className: cn(
-                  "h-8 flex-1 rounded-sm border border-border bg-background",
-                  "px-2 text-sm outline-none focus:ring-1 focus:ring-ring"
-                ),
-                onChange: (e) => setMetadata("url", e.target.value)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                inputType: "text",
-                value: caption,
-                placeholder: t("richBlockEditor.placeholder.caption"),
-                "aria-label": t("richBlockEditor.aria.imageCaption"),
-                className: cn(
-                  "h-8 flex-1 rounded-sm border border-border bg-background",
-                  "px-2 text-sm outline-none focus:ring-1 focus:ring-ring"
-                ),
-                onChange: (e) => setMetadata("caption", e.target.value)
-              }
-            )
-          ] }),
-          readOnly && caption && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-center text-muted-foreground", children: caption })
+        document.addEventListener("selectionchange", onSelectionChange);
+        return () => document.removeEventListener("selectionchange", onSelectionChange);
+      }, [readOnly, showToolbar]);
+      const tryInlineMarkdown = useCallback(() => {
+        const root = ref.current;
+        if (!root) return false;
+        const sel = window.getSelection();
+        if (!sel || !sel.isCollapsed || sel.rangeCount === 0) return false;
+        const node = sel.anchorNode;
+        if (!node || node.nodeType !== Node.TEXT_NODE || !root.contains(node)) return false;
+        if (node.parentElement?.closest("code, pre")) return false;
+        const text = (node.textContent ?? "").slice(0, sel.anchorOffset);
+        for (const rule of MD_INLINE_RULES) {
+          const m = rule.pattern.exec(text);
+          if (!m) continue;
+          const inner = rule.wrap === "em" ? m[2] : m[1];
+          if (!inner || !inner.trim()) continue;
+          const lead = rule.wrap === "em" ? m[1]?.length ?? 0 : 0;
+          const range = document.createRange();
+          range.setStart(node, m.index + lead);
+          range.setEnd(node, sel.anchorOffset);
+          const el = document.createElement(rule.wrap);
+          el.textContent = inner;
+          range.deleteContents();
+          range.insertNode(el);
+          const after = document.createTextNode("\u200B");
+          el.parentNode?.insertBefore(after, el.nextSibling);
+          const caret = document.createRange();
+          caret.setStart(after, 1);
+          caret.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(caret);
+          return true;
+        }
+        return false;
+      }, []);
+      const tryBlockMarkdown = useCallback(() => {
+        const root = ref.current;
+        if (!root) return false;
+        const sel = window.getSelection();
+        if (!sel || !sel.isCollapsed || sel.rangeCount === 0) return false;
+        const node = sel.anchorNode;
+        if (!node || node.nodeType !== Node.TEXT_NODE || !root.contains(node)) return false;
+        const block = closestBlock(node, root);
+        if (block ? block.firstChild !== node : root.firstChild !== node) return false;
+        const prefix = (node.textContent ?? "").slice(0, sel.anchorOffset);
+        const rule = MD_BLOCK_PREFIXES[prefix];
+        if (!rule) return false;
+        if (node.parentElement?.closest("pre, code")) return false;
+        if (rule.kind === "list" && node.parentElement?.closest("li")) return false;
+        node.deleteData(0, prefix.length);
+        const caret = document.createRange();
+        caret.setStart(node, 0);
+        caret.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(caret);
+        if (rule.kind === "list") {
+          const container = block ?? node.parentElement;
+          const list = document.createElement(rule.command === "insertOrderedList" ? "ol" : "ul");
+          const li = document.createElement("li");
+          if (block) {
+            while (block.firstChild) li.appendChild(block.firstChild);
+            list.appendChild(li);
+            block.replaceWith(list);
+          } else if (container) {
+            li.appendChild(node);
+            list.appendChild(li);
+            container.appendChild(list);
+          }
+          if (!li.firstChild) li.appendChild(document.createElement("br"));
+          const liCaret = document.createRange();
+          liCaret.selectNodeContents(li);
+          liCaret.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(liCaret);
+        } else {
+          document.execCommand("formatBlock", false, rule.tag);
+        }
+        return true;
+      }, []);
+      const afterEdit = useCallback(() => {
+        const el = ref.current;
+        if (!el) return;
+        tryInlineMarkdown();
+        setEmpty(htmlIsEmpty(el));
+        setToolbar(readToolbarState(el));
+        scheduleEmit();
+      }, [scheduleEmit, tryInlineMarkdown]);
+      const handleKeyDown = useCallback((e) => {
+        if (e.key === " " && tryBlockMarkdown()) {
+          e.preventDefault();
+          afterEdit();
+        }
+      }, [afterEdit, tryBlockMarkdown]);
+      const execInline = useCallback((command) => {
+        document.execCommand(command, false);
+        afterEdit();
+      }, [afterEdit]);
+      const execBlock = useCallback((tag) => {
+        const next = toolbar.block === tag ? "p" : tag;
+        document.execCommand("formatBlock", false, next);
+        afterEdit();
+      }, [afterEdit, toolbar.block]);
+      const execList = useCallback((command) => {
+        document.execCommand(command, false);
+        afterEdit();
+      }, [afterEdit]);
+      const execLink = useCallback(() => {
+        if (toolbar.link) {
+          document.execCommand("unlink", false);
+          afterEdit();
+          return;
+        }
+        const url = window.prompt(t("richTextEditor.linkPrompt"));
+        if (!url) return;
+        const safe = safeUrl(url, ["http://", "https://", "mailto:"]) ?? `https://${url}`;
+        document.execCommand("createLink", false, safe);
+        afterEdit();
+      }, [afterEdit, t, toolbar.link]);
+      const execRule = useCallback(() => {
+        document.execCommand("insertHorizontalRule", false);
+        afterEdit();
+      }, [afterEdit]);
+      if (readOnly) {
+        return /* @__PURE__ */ jsxs(Box, { className: cn("almadar-rich-text max-w-none", className), children: [
+          /* @__PURE__ */ jsx(RichTextStyles, {}),
+          /* @__PURE__ */ jsx(Box, { dangerouslySetInnerHTML: { __html: sanitizeRichHtml(value ?? "") } })
         ] });
       }
-      case "bullet-list":
-      case "numbered-list": {
-        const items = block.children ?? [];
-        return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col gap-2", className), children: [
+        /* @__PURE__ */ jsx(RichTextStyles, {}),
+        showToolbar && /* @__PURE__ */ jsxs(
           Box,
           {
-            as: block.type === "bullet-list" ? "ul" : "ol",
+            role: "toolbar",
+            "aria-label": t("richTextEditor.editorToolbar"),
             className: cn(
-              "space-y-1 pl-6",
-              block.type === "bullet-list" ? "list-disc" : "list-decimal"
+              "sticky top-0 z-10 flex flex-wrap items-center gap-0.5 self-start",
+              "rounded-md border border-border bg-background/95 px-1 py-0.5 shadow-sm"
             ),
             children: [
-              items.map((child) => /* @__PURE__ */ jsxs(Box, { as: "li", className: "group/item flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  Editable,
-                  {
-                    tag: "span",
-                    value: child.content ?? "",
-                    readOnly,
-                    placeholder: t("richBlockEditor.placeholder.listItem"),
-                    ariaLabel: t("richBlockEditor.aria.listItem"),
-                    className: "inline-block min-w-[1ch] flex-1",
-                    onValueChange: (next) => setChildContent(child.id, next)
-                  }
-                ),
-                !readOnly && showAffordances && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    "aria-label": t("richBlockEditor.aria.removeListItem"),
-                    className: cn(
-                      "h-5 w-5 shrink-0 rounded-sm text-muted-foreground p-0 gap-0",
-                      "opacity-0 group-hover/item:opacity-100 hover:bg-muted hover:text-foreground"
-                    ),
-                    onClick: () => removeListItem(child.id),
-                    children: /* @__PURE__ */ jsx(Icon, { name: "trash", className: "w-3 h-3" })
-                  }
-                )
-              ] }, child.id)),
-              !readOnly && showAffordances && /* @__PURE__ */ jsx(Box, { as: "li", className: "list-none pl-0", children: /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  className: cn(
-                    "inline-flex items-center gap-1 text-xs text-muted-foreground",
-                    "hover:text-foreground p-0 h-auto"
-                  ),
-                  onClick: addListItem,
-                  children: [
-                    /* @__PURE__ */ jsx(Icon, { name: "plus", className: "w-3 h-3" }),
-                    " ",
-                    t("richBlockEditor.addItem")
-                  ]
-                }
-              ) })
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Bold, label: t("richTextEditor.bold"), active: toolbar.bold, onExec: () => execInline("bold") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Italic, label: t("richTextEditor.italic"), active: toolbar.italic, onExec: () => execInline("italic") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Underline, label: t("richTextEditor.underline"), active: toolbar.underline, onExec: () => execInline("underline") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Strikethrough, label: t("richTextEditor.strikethrough"), active: toolbar.strikeThrough, onExec: () => execInline("strikeThrough") }),
+              /* @__PURE__ */ jsx(Box, { className: "mx-1 h-5 w-px bg-border" }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Heading1, label: t("richTextEditor.heading1"), active: toolbar.block === "h1", onExec: () => execBlock("h1") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Heading2, label: t("richTextEditor.heading2"), active: toolbar.block === "h2", onExec: () => execBlock("h2") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Heading3, label: t("richTextEditor.heading3"), active: toolbar.block === "h3", onExec: () => execBlock("h3") }),
+              /* @__PURE__ */ jsx(Box, { className: "mx-1 h-5 w-px bg-border" }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: List, label: t("richTextEditor.bulletList"), active: toolbar.bullets, onExec: () => execList("insertUnorderedList") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: ListOrdered, label: t("richTextEditor.numberedList"), active: toolbar.numbers, onExec: () => execList("insertOrderedList") }),
+              /* @__PURE__ */ jsx(Box, { className: "mx-1 h-5 w-px bg-border" }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Quote, label: t("richTextEditor.quote"), active: toolbar.block === "blockquote", onExec: () => execBlock("blockquote") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Code, label: t("richTextEditor.code"), active: toolbar.block === "pre", onExec: () => execBlock("pre") }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Link$1, label: toolbar.link ? t("richTextEditor.removeLink") : t("richTextEditor.link"), active: toolbar.link, onExec: execLink }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Minus, label: t("richTextEditor.divider"), onExec: execRule })
             ]
           }
-        );
-      }
-      case "paragraph":
-      default:
-        return /* @__PURE__ */ jsx(
-          Editable,
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
           {
-            tag: "p",
-            value: block.content ?? "",
-            readOnly,
-            placeholder: placeholder ?? t("richBlockEditor.placeholder.paragraph"),
-            ariaLabel: t("richBlockEditor.aria.paragraphBlock"),
-            className: "leading-7",
-            onValueChange: setContent
+            ref,
+            contentEditable: true,
+            suppressContentEditableWarning: true,
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-label": t("richTextEditor.editorSurface"),
+            "data-placeholder": placeholder ?? t("richTextEditor.placeholder"),
+            "data-empty": empty ? "true" : "false",
+            className: cn(
+              "almadar-rich-text max-w-none min-h-[8rem] outline-none",
+              "data-[empty=true]:before:content-[attr(data-placeholder)]",
+              "data-[empty=true]:before:text-muted-foreground/60",
+              "data-[empty=true]:before:pointer-events-none",
+              "data-[empty=true]:before:absolute",
+              "relative cursor-text"
+            ),
+            onInput: afterEdit,
+            onKeyDown: handleKeyDown,
+            onBlur: flushEmit
           }
-        );
-    }
+        )
+      ] });
+    };
+    RichTextEditor.displayName = "RichTextEditor";
+  }
+});
+function renderIconInput4(icon, props) {
+  return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsx(Icon, { icon, ...props });
+}
+function DocumentPanel({
+  entity,
+  title,
+  subtitle,
+  value,
+  actions,
+  maxInlineActions,
+  editing = false,
+  titleCommitEvent,
+  contentChangeEvent,
+  editEvent,
+  doneEvent,
+  editLabel,
+  doneLabel,
+  autosaveHint,
+  placeholder,
+  className
+}) {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [titleDraft, setTitleDraft] = useState(null);
+  const recordId = entity?.id !== void 0 && entity?.id !== null ? String(entity.id) : "";
+  const actionDefs = actions ?? [];
+  const inlineCap = Math.min(maxInlineActions ?? 1, 1);
+  const inlineActions = actionDefs.filter((a) => a.variant === "primary").slice(0, inlineCap);
+  const menuActions = actionDefs.filter((a) => !inlineActions.includes(a));
+  const fireAction = (action) => {
+    if (!action.event) return;
+    eventBus.emit(`UI:${action.event}`, { id: recordId, row: entity });
   };
-  return /* @__PURE__ */ jsxs(
+  const commitTitle = () => {
+    if (!titleCommitEvent) return;
+    const next = (titleDraft ?? "").trim();
+    setTitleDraft(null);
+    if (!next || next === title) return;
+    eventBus.emit(`UI:${titleCommitEvent}`, { title: next, id: recordId });
+  };
+  const untitled = t("documentPanel.untitled") || "Untitled";
+  const titleNode = titleCommitEvent && titleDraft !== null ? /* @__PURE__ */ jsx(
+    Input,
+    {
+      value: titleDraft,
+      autoFocus: true,
+      "aria-label": t("common.title"),
+      className: "h-auto py-1 text-3xl font-bold tracking-tight",
+      onFocus: (e) => e.currentTarget.select(),
+      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": "document-title-input"
+    }
+  ) : titleCommitEvent ? /* @__PURE__ */ jsx(
     Box,
     {
-      className: cn(
-        "group relative flex items-start gap-2 rounded-sm",
-        "px-2 py-1 hover:bg-muted/30"
-      ),
-      "data-block-id": block.id,
-      "data-block-type": block.type,
-      children: [
-        !readOnly && showAffordances && /* @__PURE__ */ jsx(Box, { className: "flex w-8 shrink-0 items-center pt-1", children: /* @__PURE__ */ jsx(
-          BlockMenu,
+      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": "document-title-editable",
+      children: /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", className: cn(!title && "text-muted-foreground"), children: title || untitled })
+    }
+  ) : /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || untitled });
+  const emitWithId = (event) => () => {
+    if (event) eventBus.emit(`UI:${event}`, { id: recordId });
+  };
+  return /* @__PURE__ */ jsx(Card, { variant: "elevated", className: cn("w-full", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-6 sm:p-8", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
+      /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
+        titleNode,
+        subtitle ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle }) : null
+      ] }),
+      /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 pt-1 items-center", children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "hidden sm:block", children: autosaveHint ?? (t("documentPanel.autosaveHint") || "") }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: emitWithId(doneEvent), "data-testid": "document-done", children: doneLabel ?? (t("documentPanel.done") || "Done") })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        editEvent && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: emitWithId(editEvent), "data-testid": "document-edit", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "edit", size: "xs", className: "mr-1" }),
+          editLabel ?? (t("documentPanel.edit") || "Edit")
+        ] }),
+        inlineActions.map((action, idx) => /* @__PURE__ */ jsxs(
+          Button,
           {
-            block,
-            readOnly,
-            onDelete,
-            onDuplicate,
-            onChangeType
+            variant: "primary",
+            size: "sm",
+            onClick: () => fireAction(action),
+            "data-testid": `action-${action.event}`,
+            children: [
+              action.icon && renderIconInput4(action.icon, { size: "xs", className: "mr-1" }),
+              action.label
+            ]
+          },
+          idx
+        )),
+        menuActions.length > 0 && /* @__PURE__ */ jsx(
+          Menu,
+          {
+            position: "bottom-end",
+            trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+            items: menuActions.map((action) => ({
+              label: action.label,
+              icon: action.icon,
+              variant: action.variant === "danger" ? "danger" : "default",
+              onClick: () => fireAction(action)
+            }))
           }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { className: "min-w-0 flex-1", children: renderBody() })
-      ]
-    }
-  );
+        )
+      ] }) })
+    ] }),
+    editing ? /* @__PURE__ */ jsx(RichTextEditor, { value, changeEvent: contentChangeEvent, placeholder }) : /* @__PURE__ */ jsx(
+      Box,
+      {
+        onClick: emitWithId(editEvent),
+        className: cn(
+          "rounded-md px-1 -mx-1 min-h-[16rem]",
+          editEvent && "cursor-text transition-colors hover:bg-muted/30"
+        ),
+        "data-testid": "document-body",
+        children: value && value !== "" ? /* @__PURE__ */ jsx(RichTextEditor, { value, readOnly: true }) : /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", children: placeholder ?? (t("documentPanel.placeholder") || "") })
+      }
+    )
+  ] }) });
 }
-var TOOLBAR_ENTRIES, BLOCK_TYPE_LABEL_KEY, CHANGEABLE_TYPES, _idSeq, BLOCK_TYPES, RichBlockEditor;
-var init_RichBlockEditor = __esm({
-  "components/core/molecules/RichBlockEditor.tsx"() {
+var init_DocumentPanel = __esm({
+  "components/core/molecules/DocumentPanel.tsx"() {
     "use client";
     init_cn();
-    init_Card();
+    init_useEventBus();
+    init_Box();
+    init_Stack();
     init_Typography();
     init_Button();
-    init_Box();
-    init_Divider();
-    init_Input();
+    init_Card();
     init_Icon();
-    init_useEventBus();
-    TOOLBAR_ENTRIES = [
-      { type: "paragraph", labelKey: "richBlockEditor.toolbar.text", icon: Type },
-      { type: "heading-1", labelKey: "richBlockEditor.toolbar.h1", icon: Heading1 },
-      { type: "heading-2", labelKey: "richBlockEditor.toolbar.h2", icon: Heading2 },
-      { type: "heading-3", labelKey: "richBlockEditor.toolbar.h3", icon: Heading3 },
-      { type: "bullet-list", labelKey: "richBlockEditor.toolbar.bulletList", icon: List },
-      { type: "numbered-list", labelKey: "richBlockEditor.toolbar.numbered", icon: ListOrdered },
-      { type: "quote", labelKey: "richBlockEditor.toolbar.quote", icon: Quote },
-      { type: "code", labelKey: "richBlockEditor.toolbar.code", icon: Code },
-      { type: "divider", labelKey: "richBlockEditor.toolbar.divider", icon: Minus },
-      { type: "image", labelKey: "richBlockEditor.toolbar.image", icon: Image$1 }
-    ];
-    BLOCK_TYPE_LABEL_KEY = {
-      paragraph: "richBlockEditor.blockType.paragraph",
-      "heading-1": "richBlockEditor.blockType.heading1",
-      "heading-2": "richBlockEditor.blockType.heading2",
-      "heading-3": "richBlockEditor.blockType.heading3",
-      "bullet-list": "richBlockEditor.blockType.bulletList",
-      "numbered-list": "richBlockEditor.blockType.numberedList",
-      quote: "richBlockEditor.blockType.quote",
-      code: "richBlockEditor.blockType.code",
-      divider: "richBlockEditor.blockType.divider",
-      image: "richBlockEditor.blockType.image"
-    };
-    CHANGEABLE_TYPES = [
-      "paragraph",
-      "heading-1",
-      "heading-2",
-      "heading-3",
-      "bullet-list",
-      "numbered-list",
-      "quote",
-      "code"
-    ];
-    _idSeq = 0;
-    BLOCK_TYPES = /* @__PURE__ */ new Set([
-      "paragraph",
-      "heading-1",
-      "heading-2",
-      "heading-3",
-      "bullet-list",
-      "numbered-list",
-      "quote",
-      "code",
-      "divider",
-      "image"
-    ]);
-    RichBlockEditor = ({
-      initialBlocks,
-      onChange,
-      changeEvent,
-      readOnly = false,
-      placeholder,
-      enableBlocks = true,
-      showToolbar = true,
-      className
-    }) => {
-      const { t } = useTranslate();
-      const [blocks, setBlocks] = useState(
-        () => normalizeBlocks(initialBlocks)
-      );
-      const onChangeRef = useRef(onChange);
-      useEffect(() => {
-        onChangeRef.current = onChange;
-      }, [onChange]);
-      const eventBus = useEventBus();
-      const changeEventRef = useRef(changeEvent);
-      useEffect(() => {
-        changeEventRef.current = changeEvent;
-      }, [changeEvent]);
-      const commit = useCallback((next) => {
-        setBlocks(next);
-        onChangeRef.current?.(next);
-        const evt = changeEventRef.current;
-        if (evt) eventBus.emit(`UI:${evt}`, { blocks: next });
-      }, [eventBus]);
-      const handleAppend = useCallback(
-        (type) => {
-          if (readOnly) return;
-          commit([...blocks, createBlock(type)]);
-        },
-        [blocks, commit, readOnly]
-      );
-      const handleUpdate = useCallback(
-        (id, updater) => {
-          commit(replaceBlock(blocks, id, updater));
-        },
-        [blocks, commit]
-      );
-      const handleDelete = useCallback(
-        (id) => {
-          const next = removeBlock(blocks, id);
-          commit(next.length > 0 ? next : [createBlock("paragraph")]);
-        },
-        [blocks, commit]
-      );
-      const handleDuplicate = useCallback(
-        (id) => {
-          const target = blocks.find((b) => b.id === id);
-          if (!target) return;
-          commit(insertAfter(blocks, id, duplicateBlock(target)));
-        },
-        [blocks, commit]
+    init_Input();
+    init_Menu();
+    init_RichTextEditor();
+  }
+});
+function renderIconInput5(icon, props) {
+  return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsx(Icon, { icon, ...props });
+}
+function fieldName(field) {
+  return field.name ?? field.key ?? "";
+}
+function relationLabel(value) {
+  if (value === null || typeof value !== "object" || Array.isArray(value) || value instanceof Date) return null;
+  for (const key of ["name", "title", "label"]) {
+    const candidate = value[key];
+    if (typeof candidate === "string" && candidate !== "") return candidate;
+  }
+  const id = value.id;
+  return id !== void 0 && id !== null ? String(id) : null;
+}
+function fieldKind(field, value) {
+  if (field.kind) return field.kind;
+  if (field.options && field.options.length > 0) return "select";
+  if (typeof value === "boolean" || field.format === "boolean") return "boolean";
+  if (Array.isArray(value) || relationLabel(value ?? null) !== null) return "readonly";
+  return "text";
+}
+function DocumentDetails({
+  entity,
+  fields,
+  metaCommitEvent,
+  title,
+  className
+}) {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [fieldDraft, setFieldDraft] = useState(null);
+  const recordId = entity?.id !== void 0 && entity?.id !== null ? String(entity.id) : "";
+  const fieldDefs = (fields ?? []).filter((f3) => fieldName(f3) !== "");
+  if (fieldDefs.length === 0) return null;
+  const commitField = (name, next, current) => {
+    setFieldDraft(null);
+    if (!metaCommitEvent || next === current) return;
+    eventBus.emit(`UI:${metaCommitEvent}`, { id: recordId, patch: { id: recordId, [name]: next } });
+  };
+  const renderValue = (field) => {
+    const name = fieldName(field);
+    const raw = getNestedValue(entity ?? {}, name);
+    const kind = fieldKind(field, raw);
+    const label = field.label ?? field.header ?? humanizeFieldName(name);
+    if (kind === "boolean") {
+      return /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: Boolean(raw),
+          disabled: !metaCommitEvent,
+          "aria-label": label,
+          onChange: (checked) => commitField(name, checked, Boolean(raw))
+        }
       );
-      const handleChangeType = useCallback(
-        (id, type) => {
-          commit(
-            replaceBlock(blocks, id, (b) => changeBlockType(b, type))
-          );
-        },
-        [blocks, commit]
+    }
+    if (kind === "select") {
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: raw !== void 0 && raw !== null ? String(raw) : "",
+          disabled: !metaCommitEvent,
+          "aria-label": label,
+          className: "h-8 w-full",
+          options: (field.options ?? []).map((opt) => ({ value: opt, label: humanizeEnumValue(opt) })),
+          onChange: (e) => commitField(name, e.target.value, raw)
+        }
       );
-      return /* @__PURE__ */ jsxs(
-        Card,
+    }
+    if (kind === "readonly" || !metaCommitEvent) {
+      if (Array.isArray(raw)) {
+        if (raw.length === 0) {
+          return /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: "\u2014" });
+        }
+        return /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: raw.map((item, i) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: relationLabel(item) ?? humanizeEnumValue(String(item)) }, i)) });
+      }
+      const shown2 = raw === void 0 || raw === null || raw === "" ? "\u2014" : relationLabel(raw) ?? formatValue(raw, field.format);
+      return /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: shown2 });
+    }
+    if (fieldDraft?.name === name) {
+      return /* @__PURE__ */ jsx(
+        Input,
         {
-          variant: "bordered",
-          padding: "none",
-          className: cn("flex flex-col text-card-foreground", className),
-          children: [
-            enableBlocks && showToolbar && !readOnly && /* @__PURE__ */ jsx(
-              Box,
-              {
-                role: "toolbar",
-                "aria-label": t("richBlockEditor.editorToolbar"),
-                className: cn(
-                  "flex flex-wrap items-center gap-1",
-                  "border-b border-border bg-muted/30 px-2 py-2"
-                ),
-                children: TOOLBAR_ENTRIES.map((entry) => {
-                  const Icon2 = entry.icon;
-                  const entryLabel = t(entry.labelKey);
-                  return /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      "aria-label": t("richBlockEditor.insertEntry", { label: entryLabel }),
-                      title: entryLabel,
-                      onClick: () => handleAppend(entry.type),
-                      children: [
-                        /* @__PURE__ */ jsx(Icon2, { size: 14 }),
-                        /* @__PURE__ */ jsx(Typography, { as: "span", variant: "caption", className: "ml-1 hidden text-xs sm:inline", children: entryLabel })
-                      ]
-                    },
-                    entry.type
-                  );
-                })
-              }
-            ),
-            /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1 px-3 py-3", children: blocks.map((block) => /* @__PURE__ */ jsx(
-              BlockRow,
-              {
-                block,
-                readOnly,
-                showAffordances: enableBlocks,
-                placeholder,
-                onUpdate: (updater) => handleUpdate(block.id, updater),
-                onDelete: () => handleDelete(block.id),
-                onDuplicate: () => handleDuplicate(block.id),
-                onChangeType: (type) => handleChangeType(block.id, type)
-              },
-              block.id
-            )) })
-          ]
+          value: fieldDraft.value,
+          autoFocus: true,
+          "aria-label": label,
+          className: "h-8 w-full",
+          onChange: (e) => setFieldDraft({ name, value: e.target.value }),
+          onBlur: () => commitField(name, fieldDraft.value.trim(), raw),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitField(name, fieldDraft.value.trim(), raw);
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setFieldDraft(null);
+            }
+          },
+          "data-testid": `document-property-input-${name}`
         }
       );
-    };
-    RichBlockEditor.displayName = "RichBlockEditor";
+    }
+    const shown = raw === void 0 || raw === null || raw === "" ? "\u2014" : relationLabel(raw) ?? formatValue(raw, field.format);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        role: "button",
+        tabIndex: 0,
+        className: cn(
+          "cursor-text rounded px-1 -mx-1 transition-colors hover:bg-muted/40",
+          (raw === void 0 || raw === null || raw === "") && "text-muted-foreground"
+        ),
+        onClick: () => setFieldDraft({ name, value: raw !== void 0 && raw !== null ? String(raw) : "" }),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setFieldDraft({ name, value: raw !== void 0 && raw !== null ? String(raw) : "" });
+          }
+        },
+        "data-testid": `document-property-${name}`,
+        children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: shown })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(Card, { variant: "bordered", className: cn("w-full", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", weight: "medium", className: "uppercase tracking-wide", children: title ?? (t("documentDetails.title") || "Details") }),
+    /* @__PURE__ */ jsx(VStack, { gap: "sm", children: fieldDefs.map((field) => {
+      const name = fieldName(field);
+      const label = field.label ?? field.header ?? humanizeFieldName(name);
+      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+          field.icon && renderIconInput5(field.icon, { size: "xs", className: "text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: label })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "min-w-0", children: renderValue(field) })
+      ] }, name);
+    }) })
+  ] }) });
+}
+var init_DocumentDetails = __esm({
+  "components/core/molecules/DocumentDetails.tsx"() {
+    "use client";
+    init_cn();
+    init_format();
+    init_getNestedValue();
+    init_useEventBus();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    init_Badge();
+    init_Card();
+    init_Icon();
+    init_Input();
+    init_Select();
+    init_Switch();
   }
 });
 function collectInitiallyCollapsed(nodes, acc) {
@@ -44193,8 +44204,8 @@ var init_DataTable = __esm({
     DataTable.displayName = "DataTable";
   }
 });
-function getBadgeVariant(fieldName, value) {
-  const name = fieldName.toLowerCase();
+function getBadgeVariant(fieldName2, value) {
+  const name = fieldName2.toLowerCase();
   const val = String(value).toLowerCase();
   if (name.includes("status")) {
     if (val.includes("complete") || val.includes("done") || val.includes("active"))
@@ -44210,12 +44221,12 @@ function getBadgeVariant(fieldName, value) {
   }
   return "default";
 }
-function formatFieldValue2(value, fieldName) {
+function formatFieldValue2(value, fieldName2) {
   if (typeof value === "number") {
-    if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
+    if (fieldName2.toLowerCase().includes("progress") || fieldName2.toLowerCase().includes("percent")) {
       return `${value}%`;
     }
-    if (fieldName.toLowerCase().includes("budget") || fieldName.toLowerCase().includes("cost")) {
+    if (fieldName2.toLowerCase().includes("budget") || fieldName2.toLowerCase().includes("cost")) {
       return `$${value.toLocaleString()}`;
     }
     return value.toLocaleString();
@@ -44225,7 +44236,7 @@ function formatFieldValue2(value, fieldName) {
   }
   return String(value);
 }
-function renderRichFieldValue(value, fieldName, fieldType, meta) {
+function renderRichFieldValue(value, fieldName2, fieldType, meta) {
   if (value === void 0 || value === null) return "\u2014";
   const str = String(value);
   switch (fieldType) {
@@ -44236,7 +44247,7 @@ function renderRichFieldValue(value, fieldName, fieldType, meta) {
           "img",
           {
             src: str,
-            alt: formatFieldLabel(fieldName),
+            alt: formatFieldLabel(fieldName2),
             className: "max-w-full max-h-64 rounded-md object-contain",
             loading: "lazy"
           }
@@ -44371,9 +44382,9 @@ function renderRichFieldValue(value, fieldName, fieldType, meta) {
       return /* @__PURE__ */ jsx("a", { href: `tel:${str}`, className: "text-primary hover:underline", children: str });
     default:
       if (meta?.values && meta.values.length > 0 && meta.values.includes(str)) {
-        return /* @__PURE__ */ jsx(Badge, { variant: getBadgeVariant(fieldName, str), children: humanizeEnumValue(str) });
+        return /* @__PURE__ */ jsx(Badge, { variant: getBadgeVariant(fieldName2, str), children: humanizeEnumValue(str) });
       }
-      return formatFieldValue2(value, fieldName);
+      return formatFieldValue2(value, fieldName2);
   }
 }
 function normalizeFieldDefs(fields) {
@@ -45216,7 +45227,21 @@ var init_Form = __esm({
       const normalizedInitialData = React94__default.useMemo(() => {
         const entityRowAsInitial = isPlainEntityRow(entity) ? entity : void 0;
         const callerInitial = initialData !== null && typeof initialData === "object" && !Array.isArray(initialData) ? initialData : {};
-        return entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
+        const merged = entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
+        const toId = (value) => {
+          if (value === null || value === void 0 || typeof value !== "object" || value instanceof Date) return value;
+          if (Array.isArray(value)) {
+            return value.map(
+              (item) => item !== null && typeof item === "object" && !Array.isArray(item) && !(item instanceof Date) && item.id !== void 0 && item.id !== null ? String(item.id) : item
+            );
+          }
+          return value.id !== void 0 && value.id !== null ? String(value.id) : value;
+        };
+        const normalized = {};
+        for (const [key, value] of Object.entries(merged)) {
+          normalized[key] = key === "id" ? value : toId(value);
+        }
+        return normalized;
       }, [entity, initialData]);
       const entityDerivedFields = React94__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
@@ -45345,8 +45370,8 @@ var init_Form = __esm({
         checkViolations(name, newFormData);
       };
       const isFieldVisible = React94__default.useCallback(
-        (fieldName) => {
-          const condition = conditionalFields[fieldName];
+        (fieldName2) => {
+          const condition = conditionalFields[fieldName2];
           if (!condition) return true;
           return Boolean(evaluateFormExpression(condition, evalContext));
         },
@@ -45392,9 +45417,9 @@ var init_Form = __esm({
       };
       const handleInvalid = (e) => {
         const target = e.target;
-        const fieldName = target.getAttribute("data-field-name") ?? target.name ?? "";
+        const fieldName2 = target.getAttribute("data-field-name") ?? target.name ?? "";
         const fieldMessage = target.validationMessage || "Invalid value";
-        debug("forms", "invalid", { mode: formMode, fieldName, fieldMessage });
+        debug("forms", "invalid", { mode: formMode, fieldName: fieldName2, fieldMessage });
         queueMicrotask(() => {
           const form = formRef.current;
           if (!form) return;
@@ -45430,22 +45455,22 @@ var init_Form = __esm({
       };
       const renderField = React94__default.useCallback(
         (field) => {
-          const fieldName = field.name || field.field;
-          if (!fieldName) return null;
-          if (!isFieldVisible(fieldName)) {
+          const fieldName2 = field.name || field.field;
+          if (!fieldName2) return null;
+          if (!isFieldVisible(fieldName2)) {
             return null;
           }
           const inputType = determineInputType(field);
-          const label = field.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/([A-Z])/g, " $1");
-          const currentValue = formData[fieldName] ?? field.defaultValue ?? "";
-          return /* @__PURE__ */ jsxs(VStack, { gap: "xs", "data-field": fieldName, children: [
+          const label = field.label || fieldName2.charAt(0).toUpperCase() + fieldName2.slice(1).replace(/([A-Z])/g, " $1");
+          const currentValue = formData[fieldName2] ?? field.defaultValue ?? "";
+          return /* @__PURE__ */ jsxs(VStack, { gap: "xs", "data-field": fieldName2, children: [
             inputType !== "checkbox" && /* @__PURE__ */ jsxs(Typography, { as: "label", variant: "label", weight: "bold", children: [
               label,
               field.required && /* @__PURE__ */ jsx(Typography, { as: "span", color: "error", className: "ml-1", children: "*" })
             ] }),
-            renderFieldInput(field, fieldName, inputType, currentValue, label),
+            renderFieldInput(field, fieldName2, inputType, currentValue, label),
             field.hint && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: field.hint })
-          ] }, fieldName);
+          ] }, fieldName2);
         },
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
@@ -45474,8 +45499,8 @@ var init_Form = __esm({
           }
           return field;
         }).map((field) => {
-          const fieldName = field.name || field.field;
-          const override = fieldOverrides?.find((o) => o.name === fieldName);
+          const fieldName2 = field.name || field.field;
+          const override = fieldOverrides?.find((o) => o.name === fieldName2);
           if (!override) return field;
           return {
             ...field,
@@ -45531,11 +45556,11 @@ var init_Form = __esm({
           ] }, section.id);
         }).filter(Boolean);
       }, [sections, isSectionVisible, collapsedSections, renderField, gap]);
-      function renderFieldInput(field, fieldName, inputType, currentValue, label) {
+      function renderFieldInput(field, fieldName2, inputType, currentValue, label) {
         const commonProps = {
-          id: fieldName,
-          name: fieldName,
-          "data-field-name": fieldName,
+          id: fieldName2,
+          name: fieldName2,
+          "data-field-name": fieldName2,
           required: field.required,
           disabled: isLoading,
           placeholder: field.placeholder,
@@ -45549,7 +45574,7 @@ var init_Form = __esm({
                 ...commonProps,
                 label: label + (field.required ? " *" : ""),
                 checked: Boolean(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.checked)
+                onChange: (e) => handleChange(fieldName2, e.target.checked)
               }
             );
           case "textarea":
@@ -45558,7 +45583,7 @@ var init_Form = __esm({
               {
                 ...commonProps,
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (e) => handleChange(fieldName2, e.target.value),
                 minLength: field.min,
                 maxLength: field.max
               }
@@ -45571,14 +45596,14 @@ var init_Form = __esm({
                 ...commonProps,
                 options,
                 value: String(currentValue),
-                onValueChange: (v) => handleChange(fieldName, v),
+                onValueChange: (v) => handleChange(fieldName2, v),
                 placeholder: field.placeholder || `Select ${label}...`
               }
             );
           }
           case "relation": {
-            const relationOptions = relationsData[fieldName] || [];
-            const relationLoading = relationsLoading[fieldName] || false;
+            const relationOptions = relationsData[fieldName2] || [];
+            const relationLoading = relationsLoading[fieldName2] || false;
             if (field.relation?.cardinality !== void 0 && MANY_CARDINALITIES.includes(field.relation.cardinality)) {
               const selectedValues = Array.isArray(currentValue) ? currentValue.map((v) => String(v)) : [];
               return /* @__PURE__ */ jsx(
@@ -45590,7 +45615,7 @@ var init_Form = __esm({
                   clearable: true,
                   options: [...relationOptions],
                   value: selectedValues,
-                  onValueChange: (value) => handleChange(fieldName, Array.isArray(value) ? value : [value]),
+                  onValueChange: (value) => handleChange(fieldName2, Array.isArray(value) ? value : [value]),
                   placeholder: field.placeholder || `Select ${label}...`
                 }
               );
@@ -45600,7 +45625,7 @@ var init_Form = __esm({
               {
                 ...commonProps,
                 value: currentValue ? String(currentValue) : void 0,
-                onChange: (value) => handleChange(fieldName, value),
+                onChange: (value) => handleChange(fieldName2, value),
                 options: relationOptions,
                 isLoading: relationLoading,
                 placeholder: field.placeholder || `Select ${label}...`,
@@ -45617,7 +45642,7 @@ var init_Form = __esm({
                 placeholder: field.placeholder,
                 disabled: isLoading,
                 value: arrayValue,
-                onChange: (next) => handleChange(fieldName, [...next])
+                onChange: (next) => handleChange(fieldName2, [...next])
               }
             );
           }
@@ -45629,7 +45654,7 @@ var init_Form = __esm({
                 type: "number",
                 value: currentValue !== void 0 && currentValue !== "" ? String(currentValue) : "",
                 onChange: (e) => handleChange(
-                  fieldName,
+                  fieldName2,
                   e.target.value ? Number(e.target.value) : void 0
                 ),
                 min: field.min,
@@ -45646,7 +45671,7 @@ var init_Form = __esm({
                 icon: DollarSign,
                 value: currentValue !== void 0 && currentValue !== "" ? String(currentValue) : "",
                 onChange: (e) => handleChange(
-                  fieldName,
+                  fieldName2,
                   e.target.value ? Number(e.target.value) : void 0
                 ),
                 min: field.min,
@@ -45664,7 +45689,7 @@ var init_Form = __esm({
                   const f3 = files[0];
                   if (!f3) return;
                   const reader = new FileReader();
-                  reader.onload = () => handleChange(fieldName, {
+                  reader.onload = () => handleChange(fieldName2, {
                     name: f3.name,
                     mimeType: f3.type,
                     sizeBytes: f3.size,
@@ -45681,7 +45706,7 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "date",
                 value: formatDateValue(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName2, e.target.value)
               }
             );
           case "datetime-local":
@@ -45691,7 +45716,7 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "datetime-local",
                 value: formatDateTimeValue(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName2, e.target.value)
               }
             );
           case "email":
@@ -45701,7 +45726,7 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "email",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (e) => handleChange(fieldName2, e.target.value),
                 minLength: field.min,
                 maxLength: field.max
               }
@@ -45713,7 +45738,7 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "url",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (e) => handleChange(fieldName2, e.target.value),
                 minLength: field.min,
                 maxLength: field.max
               }
@@ -45725,7 +45750,7 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "password",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (e) => handleChange(fieldName2, e.target.value),
                 minLength: field.min,
                 maxLength: field.max
               }
@@ -45738,7 +45763,7 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "text",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value),
+                onChange: (e) => handleChange(fieldName2, e.target.value),
                 minLength: field.min,
                 maxLength: field.max
               }
@@ -46095,7 +46120,7 @@ function entityFieldsFromListItem(item) {
   }
   return result;
 }
-function getStatusStyle(fieldName, value) {
+function getStatusStyle(fieldName2, value) {
   const val = String(value).toLowerCase();
   if (val.includes("complete") || val.includes("done"))
     return STATUS_STYLES.complete;
@@ -46111,12 +46136,12 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES.low;
   return STATUS_STYLES.default;
 }
-function formatValue3(value, fieldName) {
+function formatValue3(value, fieldName2) {
   if (typeof value === "number") {
-    if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
+    if (fieldName2.toLowerCase().includes("progress") || fieldName2.toLowerCase().includes("percent")) {
       return `${value}%`;
     }
-    if (fieldName.toLowerCase().includes("budget") || fieldName.toLowerCase().includes("cost")) {
+    if (fieldName2.toLowerCase().includes("budget") || fieldName2.toLowerCase().includes("cost")) {
       return new Intl.NumberFormat("en-US", {
         style: "currency",
         currency: "USD",
@@ -46139,8 +46164,8 @@ function formatValue3(value, fieldName) {
   }
   return String(value);
 }
-function formatFieldLabel2(fieldName) {
-  return humanizeFieldName(fieldName).replace(/\sId$/, "").trim();
+function formatFieldLabel2(fieldName2) {
+  return humanizeFieldName(fieldName2).replace(/\sId$/, "").trim();
 }
 var STATUS_STYLES, StatusBadge, ProgressIndicator, List3;
 var init_List = __esm({
@@ -46208,9 +46233,9 @@ var init_List = __esm({
     };
     StatusBadge = ({
       value,
-      fieldName
+      fieldName: fieldName2
     }) => {
-      const style = getStatusStyle(fieldName, value);
+      const style = getStatusStyle(fieldName2, value);
       return /* @__PURE__ */ jsxs(
         Typography,
         {
@@ -49142,8 +49167,8 @@ var init_StatCard = __esm({
             return items.length;
           }
           if (field.includes(":")) {
-            const [fieldName, fieldValue] = field.split(":");
-            return items.filter((item) => item[fieldName] === fieldValue).length;
+            const [fieldName2, fieldValue] = field.split(":");
+            return items.filter((item) => item[fieldName2] === fieldValue).length;
           }
           const fieldExistsOnItems = items.some((item) => field in item);
           if (fieldExistsOnItems) {
@@ -50663,6 +50688,8 @@ var init_component_registry_generated = __esm({
     init_DocSearch();
     init_DocSidebar();
     init_DocTOC();
+    init_DocumentDetails();
+    init_DocumentPanel();
     init_DocumentViewer();
     init_DrawFxLayer();
     init_DrawGroup();
@@ -50772,7 +50799,7 @@ var init_component_registry_generated = __esm({
     init_RelationSelect();
     init_RepeatableFormSection();
     init_ReplyTree();
-    init_RichBlockEditor();
+    init_RichTextEditor();
     init_RuntimeDebugger2();
     init_ScaledDiagram();
     init_ScoreDisplay();
@@ -50935,6 +50962,8 @@ var init_component_registry_generated = __esm({
       "DocSearch": DocSearch,
       "DocSidebar": DocSidebar,
       "DocTOC": DocTOC,
+      "DocumentDetails": DocumentDetails,
+      "DocumentPanel": DocumentPanel,
       "DocumentViewer": DocumentViewer,
       "DrawFxLayer": DrawFxLayer,
       "DrawGroup": DrawGroup,
@@ -51046,7 +51075,7 @@ var init_component_registry_generated = __esm({
       "RelationSelect": RelationSelect,
       "RepeatableFormSection": RepeatableFormSection,
       "ReplyTree": ReplyTree,
-      "RichBlockEditor": RichBlockEditor,
+      "RichTextEditor": RichTextEditor,
       "RuntimeDebugger": RuntimeDebugger,
       "ScaledDiagram": ScaledDiagram,
       "ScoreDisplay": ScoreDisplay,
@@ -51200,10 +51229,10 @@ function enrichFormFields(fields, entityDef) {
     }
     if (field && typeof field === "object" && !Array.isArray(field) && !React94__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
-      const fieldName = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
-      if (!fieldName) return field;
+      const fieldName2 = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
+      if (!fieldName2) return field;
       if (obj.type || obj.inputType) return field;
-      const entityField = fieldMap.get(fieldName);
+      const entityField = fieldMap.get(fieldName2);
       if (!entityField) return field;
       const enriched = { ...obj, type: entityField.type };
       if (entityField.required && !("required" in obj)) {
@@ -51253,9 +51282,9 @@ function enrichDetailFields(fields, entityDef) {
     }
     if (field && typeof field === "object" && !Array.isArray(field) && !React94__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
-      const fieldName = typeof obj.key === "string" ? obj.key : typeof obj.name === "string" ? obj.name : void 0;
-      if (!fieldName || obj.type) return field;
-      const meta = metaFor(fieldName);
+      const fieldName2 = typeof obj.key === "string" ? obj.key : typeof obj.name === "string" ? obj.name : void 0;
+      if (!fieldName2 || obj.type) return field;
+      const meta = metaFor(fieldName2);
       return meta ? { ...obj, ...meta } : field;
     }
     return field;
@@ -52094,9 +52123,9 @@ function UISlotRenderer({
     "ui-slot-renderer relative min-h-full",
     className
   ), children: [
-    /* @__PURE__ */ jsxs(Box, { className: "flex min-h-full", children: [
-      /* @__PURE__ */ jsx(UISlotComponent, { slot: "sidebar", className: "ui-slot-sidebar min-w-0 shrink-0" }),
-      /* @__PURE__ */ jsx(UISlotComponent, { slot: "main", className: "ui-slot-main flex-1 min-h-[200px]" })
+    /* @__PURE__ */ jsxs(Box, { className: "flex min-h-full flex-col lg:flex-row", children: [
+      /* @__PURE__ */ jsx(UISlotComponent, { slot: "sidebar", className: "ui-slot-sidebar min-w-0 lg:shrink-0" }),
+      /* @__PURE__ */ jsx(UISlotComponent, { slot: "main", className: "ui-slot-main flex-1 min-w-0 min-h-[200px]" })
     ] }),
     /* @__PURE__ */ jsx(UISlotComponent, { slot: "modal", portal: true }),
     /* @__PURE__ */ jsx(UISlotComponent, { slot: "drawer", portal: true }),
@@ -55993,7 +56022,7 @@ function buildTraitRenderConfig(binding, traitConfigsByName, payload) {
   }
   return void 0;
 }
-function createSharedEntityWriter(binding, tick, traitStatesRef, emit) {
+function createSharedEntityWriter(binding, tick, traitStatesRef, emit, traitConfigsByName) {
   return (scratch) => {
     const traitName = binding.trait.name;
     const currentState = traitStatesRef.current.get(traitName)?.currentState ?? "";
@@ -56002,9 +56031,13 @@ function createSharedEntityWriter(binding, tick, traitStatesRef, emit) {
     const writes = [];
     const ctx = createMinimalContext(scratchEntity, {}, currentState);
     const declaredDefaults = collectDeclaredConfigDefaults(binding.trait);
-    const callSiteConfig = getBindingConfig(binding);
-    if (declaredDefaults || callSiteConfig) {
-      ctx.config = { ...declaredDefaults ?? {}, ...callSiteConfig ?? {} };
+    const resolvedByName = traitConfigsByName?.[traitName];
+    const callSiteRaw = getBindingConfig(binding);
+    const callSiteConfig = callSiteRaw ? Object.fromEntries(
+      Object.entries(callSiteRaw).filter(([, v]) => !containsConfigForward(v))
+    ) : void 0;
+    if (declaredDefaults || resolvedByName || callSiteConfig) {
+      ctx.config = { ...declaredDefaults ?? {}, ...resolvedByName ?? {}, ...callSiteConfig ?? {} };
     }
     ctx.mutateEntity = (changes) => {
       for (const [field, value] of Object.entries(changes)) {
@@ -56607,7 +56640,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         const interval = entries[0].tick.interval;
         const onDue = timedTick(`tick:shared:${group.storeKey}@${String(interval)}`, () => {
           const writers = entries.map(
-            ({ binding, tick }) => createSharedEntityWriter(binding, tick, traitStatesRef, emitFromSharedWriter)
+            ({ binding, tick }) => createSharedEntityWriter(binding, tick, traitStatesRef, emitFromSharedWriter, traitConfigsByName)
           );
           runTickFrame(group.storeKey, writers, sharedEntityStore);
         });
@@ -59120,11 +59153,11 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
   const handleAddField = useCallback(() => {
     eventBus.emit("UI:ADD_FIELD", {});
   }, [eventBus]);
-  const handleUpdateField = useCallback((fieldName, updates) => {
-    eventBus.emit("UI:UPDATE_FIELD", { fieldName, updates });
+  const handleUpdateField = useCallback((fieldName2, updates) => {
+    eventBus.emit("UI:UPDATE_FIELD", { fieldName: fieldName2, updates });
   }, [eventBus]);
-  const handleRemoveField = useCallback((fieldName) => {
-    eventBus.emit("UI:REMOVE_FIELD", { fieldName });
+  const handleRemoveField = useCallback((fieldName2) => {
+    eventBus.emit("UI:REMOVE_FIELD", { fieldName: fieldName2 });
   }, [eventBus]);
   const handleGuardChange = useCallback((guardExpr) => {
     if (!editable) return;