@almadar/ui 5.162.0 → 5.164.0

package/dist/avl/index.js

@@ -27152,6 +27152,7 @@ var init_DashboardLayout = __esm({
       onNotificationClick,
       showThemeToggle = true,
       sidebarFooter,
+      sidebarContent,
       onSignOut: onSignOutProp,
       currentPath,
       layoutMode = "sidebar",
@@ -27277,7 +27278,11 @@ var init_DashboardLayout = __esm({
                     {
                       as: "nav",
                       gap: "none",
-                      className: cn("flex-1 py-4 space-y-1 overflow-y-auto", isRail ? "px-2" : "px-3"),
+                      className: cn(
+                        "py-4 space-y-1 overflow-y-auto",
+                        sidebarContent && !isRail ? "shrink-0" : "flex-1",
+                        isRail ? "px-2" : "px-3"
+                      ),
                       children: navItems.map((item) => /* @__PURE__ */ jsx(
                         NavLink,
                         {
@@ -27289,6 +27294,7 @@ var init_DashboardLayout = __esm({
                       ))
                     }
                   ),
+                  sidebarContent && !isRail && /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto border-t border-border dark:border-border px-2 py-3", children: sidebarContent }),
                   sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
                 ]
               }
@@ -29698,7 +29704,17 @@ function fileIcon(name) {
       return "file";
   }
 }
-var TreeNodeItem, FlatTreeNodeItem, FileTree;
+function ancestorsOf(id, byId) {
+  const out = /* @__PURE__ */ new Set();
+  if (!id) return out;
+  let cur = byId.get(id)?.parentId;
+  while (cur && byId.has(cur) && !out.has(cur)) {
+    out.add(cur);
+    cur = byId.get(cur)?.parentId;
+  }
+  return out;
+}
+var TreeNodeItem, FlatTreeNodeItem, FlatFileTree, FileTree;
 var init_FileTree = __esm({
   "components/core/molecules/FileTree.tsx"() {
     "use client";
@@ -29789,42 +29805,77 @@ var init_FileTree = __esm({
       indent,
       childrenByParent,
       onNodeSelect,
-      defaultExpanded = false
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
+      selectedId,
+      look,
+      isExpanded,
+      onToggle
     }) => {
-      const [expanded, setExpanded] = useState(defaultExpanded || depth < 1);
       const children = childrenByParent.get(item.id);
       const hasChildren = !!children && children.length > 0;
+      const expanded = hasChildren && isExpanded(item.id, depth);
+      const isSelected = selectedId !== void 0 && selectedId !== "" && item.id === selectedId;
+      const nav = look === "nav";
       const handleClick = useCallback(() => {
-        if (hasChildren) setExpanded((prev) => !prev);
+        if (hasChildren && !onNodeSelect) onToggle(item.id, expanded);
         onNodeSelect?.(item.id);
-      }, [hasChildren, item.id, onNodeSelect]);
+      }, [hasChildren, expanded, item.id, onNodeSelect, onToggle]);
+      const handleChevron = useCallback((e) => {
+        e.stopPropagation();
+        onToggle(item.id, expanded);
+      }, [item.id, expanded, onToggle]);
+      const handleAction = useCallback((e) => {
+        e.stopPropagation();
+        onNodeAction?.(item.id);
+      }, [item.id, onNodeAction]);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           Box,
           {
-            className: "flex items-center gap-1.5 py-0.5 px-2 cursor-pointer rounded-sm transition-colors hover:bg-muted",
+            className: `group/treerow flex items-center gap-1.5 px-2 cursor-pointer rounded-sm transition-colors ${nav ? "py-1" : "py-0.5"} ${isSelected ? "bg-primary text-primary-foreground" : nav ? "text-foreground hover:bg-muted" : "hover:bg-muted"}`,
             style: { paddingLeft: depth * indent + 8 },
             onClick: handleClick,
             role: "treeitem",
+            "aria-selected": isSelected,
             "aria-expanded": hasChildren ? expanded : void 0,
             children: [
-              hasChildren ? /* @__PURE__ */ jsx(
+              hasChildren ? /* @__PURE__ */ jsx(Box, { onClick: handleChevron, className: "flex items-center flex-shrink-0", role: "button", "aria-label": expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
                 Icon,
                 {
                   name: expanded ? "chevron-down" : "chevron-right",
                   size: "xs",
-                  className: "text-[var(--color-muted-foreground)] flex-shrink-0"
+                  className: isSelected ? "text-inherit" : "text-[var(--color-muted-foreground)]"
                 }
-              ) : /* @__PURE__ */ jsx(Box, { style: { width: 12, flexShrink: 0 } }),
+              ) }) : /* @__PURE__ */ jsx(Box, { style: { width: 12, flexShrink: 0 } }),
               /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  name: item.icon ?? (hasChildren ? expanded ? "folder-open" : "folder" : "file"),
+                  name: item.icon || (nav ? "file-text" : hasChildren ? expanded ? "folder-open" : "folder" : "file"),
                   size: "xs",
-                  className: hasChildren ? "text-[var(--color-warning)]" : "text-[var(--color-muted-foreground)]"
+                  className: isSelected ? "text-inherit" : nav || !hasChildren ? "text-[var(--color-muted-foreground)]" : "text-[var(--color-warning)]"
                 }
               ),
-              /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "truncate font-mono text-xs", children: item.label })
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  className: `truncate ${nav ? "text-sm" : "font-mono text-xs"} !text-inherit ${isSelected ? "font-semibold" : ""}`,
+                  children: item.label
+                }
+              ),
+              onNodeAction && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  onClick: handleAction,
+                  role: "button",
+                  "aria-label": nodeActionLabel ?? "Node action",
+                  title: nodeActionLabel,
+                  className: `ml-auto flex-shrink-0 rounded-sm p-0.5 opacity-0 group-hover/treerow:opacity-100 transition-opacity ${isSelected ? "hover:bg-primary-foreground/20" : "hover:bg-border"}`,
+                  children: /* @__PURE__ */ jsx(Icon, { name: nodeActionIcon ?? "plus", size: "xs", className: "text-inherit" })
+                }
+              )
             ]
           }
         ),
@@ -29835,47 +29886,116 @@ var init_FileTree = __esm({
             depth: depth + 1,
             indent,
             childrenByParent,
-            onNodeSelect
+            onNodeSelect,
+            onNodeAction,
+            nodeActionIcon,
+            nodeActionLabel,
+            selectedId,
+            look,
+            isExpanded,
+            onToggle
           },
           child.id
         )) })
       ] });
     };
+    FlatFileTree = ({
+      items,
+      selectedId,
+      look = "files",
+      onNodeSelect,
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
+      className,
+      indent = 16
+    }) => {
+      const [overrides, setOverrides] = useState(() => /* @__PURE__ */ new Map());
+      const byId = React94__default.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
+      const selectedAncestors = React94__default.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
+      const lastSelectedRef = React94__default.useRef(selectedId);
+      React94__default.useEffect(() => {
+        if (selectedId === lastSelectedRef.current) return;
+        lastSelectedRef.current = selectedId;
+        setOverrides((prev) => {
+          if (![...selectedAncestors].some((a) => prev.get(a) === false)) return prev;
+          const next = new Map(prev);
+          for (const a of selectedAncestors) if (next.get(a) === false) next.delete(a);
+          return next;
+        });
+      }, [selectedId, selectedAncestors]);
+      const isExpanded = useCallback(
+        (id, depth) => overrides.get(id) ?? (depth < 1 || selectedAncestors.has(id)),
+        [overrides, selectedAncestors]
+      );
+      const onToggle = useCallback((id, effective) => {
+        setOverrides((prev) => {
+          const next = new Map(prev);
+          next.set(id, !effective);
+          return next;
+        });
+      }, []);
+      if (items.length === 0) return null;
+      const ids = new Set(items.map((node) => node.id));
+      const childrenByParent = /* @__PURE__ */ new Map();
+      const roots = [];
+      for (const item of items) {
+        if (item.parentId && ids.has(item.parentId)) {
+          const siblings = childrenByParent.get(item.parentId);
+          if (siblings) siblings.push(item);
+          else childrenByParent.set(item.parentId, [item]);
+        } else {
+          roots.push(item);
+        }
+      }
+      return /* @__PURE__ */ jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsx(
+        FlatTreeNodeItem,
+        {
+          item,
+          depth: 0,
+          indent,
+          childrenByParent,
+          onNodeSelect,
+          onNodeAction,
+          nodeActionIcon,
+          nodeActionLabel,
+          selectedId,
+          look,
+          isExpanded,
+          onToggle
+        },
+        item.id
+      )) });
+    };
     FileTree = ({
       tree,
       items,
       selectedPath,
+      selectedId,
+      look = "files",
       onFileSelect,
       onNodeSelect,
+      onNodeAction,
+      nodeActionIcon,
+      nodeActionLabel,
       className,
       indent = 16
     }) => {
       if (items) {
-        if (items.length === 0) return null;
-        const ids = new Set(items.map((node) => node.id));
-        const childrenByParent = /* @__PURE__ */ new Map();
-        const roots = [];
-        for (const item of items) {
-          if (item.parentId && ids.has(item.parentId)) {
-            const siblings = childrenByParent.get(item.parentId);
-            if (siblings) siblings.push(item);
-            else childrenByParent.set(item.parentId, [item]);
-          } else {
-            roots.push(item);
-          }
-        }
-        return /* @__PURE__ */ jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: roots.map((item) => /* @__PURE__ */ jsx(
-          FlatTreeNodeItem,
+        return /* @__PURE__ */ jsx(
+          FlatFileTree,
           {
-            item,
-            depth: 0,
-            indent,
-            childrenByParent,
+            items,
+            selectedId,
+            look,
             onNodeSelect,
-            defaultExpanded: true
-          },
-          item.id
-        )) });
+            onNodeAction,
+            nodeActionIcon,
+            nodeActionLabel,
+            className,
+            indent
+          }
+        );
       }
       if (!tree || tree.length === 0) return null;
       return /* @__PURE__ */ jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsx(
@@ -35340,6 +35460,33 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
+
+// lib/relationLabel.ts
+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 relationDisplayLabels(value, options) {
+  if (value === void 0 || value === null || value === "") return [];
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => relationDisplayLabels(item, options));
+  }
+  const hydrated = relationLabel(value);
+  if (hydrated !== null) return [hydrated];
+  const raw = String(value);
+  const match = options?.find((opt) => opt.value === raw);
+  return [match ? match.label : raw];
+}
+var init_relationLabel = __esm({
+  "lib/relationLabel.ts"() {
+  }
+});
 function renderIconInput3(icon, props) {
   return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsx(Icon, { icon, ...props });
 }
@@ -35657,6 +35804,7 @@ var init_TableView = __esm({
     "use client";
     init_cn();
     init_format();
+    init_relationLabel();
     init_getNestedValue();
     init_useEventBus();
     init_Box();
@@ -35670,7 +35818,13 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     tableViewLog = createLogger("almadar:ui:table-view");
-    formatCell = (value, format) => formatValue(value, format);
+    formatCell = (value, format) => {
+      if (value !== null && value !== void 0 && typeof value === "object" && !(value instanceof Date)) {
+        const labels = relationDisplayLabels(value);
+        if (labels.length > 0) return labels.join(", ");
+      }
+      return formatValue(value, format);
+    };
     MAX_MEASURED_COL_CH = 32;
     BADGE_CHROME_CH = 4;
     alignClass = {
@@ -39285,6 +39439,35 @@ var init_RichTextEditor = __esm({
         document.execCommand("createLink", false, safe);
         afterEdit();
       }, [afterEdit, t, toolbar.link]);
+      const imageInputRef = useRef(null);
+      const savedRangeRef = useRef(null);
+      const execImage = useCallback(() => {
+        const root = ref.current;
+        const sel = window.getSelection();
+        savedRangeRef.current = root && sel && sel.rangeCount > 0 && root.contains(sel.anchorNode) ? sel.getRangeAt(0).cloneRange() : null;
+        imageInputRef.current?.click();
+      }, []);
+      const handleImageFile = useCallback((e) => {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = () => {
+          const url = typeof reader.result === "string" ? reader.result : "";
+          if (!url.startsWith("data:image/")) return;
+          const root = ref.current;
+          if (!root) return;
+          root.focus();
+          const sel = window.getSelection();
+          if (sel && savedRangeRef.current && root.contains(savedRangeRef.current.startContainer)) {
+            sel.removeAllRanges();
+            sel.addRange(savedRangeRef.current);
+          }
+          document.execCommand("insertImage", false, url);
+          afterEdit();
+        };
+        reader.readAsDataURL(file);
+      }, [afterEdit]);
       const execRule = useCallback(() => {
         document.execCommand("insertHorizontalRule", false);
         afterEdit();
@@ -39297,6 +39480,18 @@ var init_RichTextEditor = __esm({
       }
       return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col gap-2", className), children: [
         /* @__PURE__ */ jsx(RichTextStyles, {}),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: imageInputRef,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            "aria-hidden": "true",
+            tabIndex: -1,
+            onChange: handleImageFile
+          }
+        ),
         showToolbar && /* @__PURE__ */ jsxs(
           Box,
           {
@@ -39322,6 +39517,7 @@ var init_RichTextEditor = __esm({
               /* @__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: Image$1, label: t("richTextEditor.image"), onExec: execImage }),
               /* @__PURE__ */ jsx(ToolbarButton, { icon: Minus, label: t("richTextEditor.divider"), onExec: execRule })
             ]
           }
@@ -39362,6 +39558,8 @@ function DocumentPanel({
   id,
   title,
   subtitle,
+  coverImage,
+  icon,
   value,
   actions,
   maxInlineActions,
@@ -39437,62 +39635,74 @@ function DocumentPanel({
   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,
-          {
-            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)
-            }))
-          }
-        )
-      ] }) })
-    ] }),
-    editing ? /* @__PURE__ */ jsx(RichTextEditor, { value, changeEvent: contentChangeEvent, placeholder }) : /* @__PURE__ */ jsx(
-      Box,
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: cn("w-full overflow-hidden", className), children: [
+    coverImage ? /* @__PURE__ */ jsx(Box, { className: "h-44 w-full sm:h-52", "data-testid": "document-cover", children: /* @__PURE__ */ jsx(
+      "img",
       {
-        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") || "") })
-      }
-    )
-  ] }) });
+        src: coverImage,
+        alt: "",
+        "aria-hidden": "true",
+        className: "h-full w-full object-cover"
+      }
+    ) }) : null,
+    /* @__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: [
+          icon ? /* @__PURE__ */ jsx(Box, { className: "text-muted-foreground", "data-testid": "document-icon", children: renderIconInput4(icon, { size: "lg" }) }) : null,
+          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,
+            {
+              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)
+              }))
+            }
+          )
+        ] }) })
+      ] }),
+      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 init_DocumentPanel = __esm({
   "components/core/molecules/DocumentPanel.tsx"() {
@@ -39516,17 +39726,16 @@ function renderIconInput5(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;
+function relationId(value) {
+  if (value !== null && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date)) {
+    const id = value.id;
+    if (id !== void 0 && id !== null) return String(id);
   }
-  const id = value.id;
-  return id !== void 0 && id !== null ? String(id) : null;
+  return String(value);
 }
 function fieldKind(field, value) {
   if (field.kind) return field.kind;
+  if (field.type === "image") return "image";
   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";
@@ -39536,6 +39745,7 @@ function DocumentDetails({
   entity,
   fields,
   metaCommitEvent,
+  relationEvent,
   title,
   className
 }) {
@@ -39550,11 +39760,51 @@ function DocumentDetails({
     if (!metaCommitEvent || next === current) return;
     eventBus.emit(`UI:${metaCommitEvent}`, { id: recordId, patch: { id: recordId, [name]: next } });
   };
+  const relationChip = (item, name, key) => {
+    const label = relationLabel(item) ?? humanizeEnumValue(String(item));
+    if (!relationEvent) {
+      return /* @__PURE__ */ jsx(Badge, { variant: "default", children: label }, key);
+    }
+    const emitClick = () => eventBus.emit(`UI:${relationEvent}`, { field: name, id: relationId(item), name: label });
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "default",
+        role: "button",
+        tabIndex: 0,
+        className: "cursor-pointer transition-colors hover:bg-accent",
+        onClick: emitClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            emitClick();
+          }
+        },
+        "data-testid": `relation-chip-${name}`,
+        children: label
+      },
+      key
+    );
+  };
   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 === "image") {
+      const url = typeof raw === "string" ? raw : "";
+      if (!url) return /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: "\u2014" });
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: label,
+          loading: "lazy",
+          className: "max-h-32 w-full rounded-md border border-border object-cover",
+          "data-testid": `document-property-image-${name}`
+        }
+      );
+    }
     if (kind === "boolean") {
       return /* @__PURE__ */ jsx(
         Switch,
@@ -39584,9 +39834,12 @@ function DocumentDetails({
         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)) });
+        return /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: raw.map((item, i) => relationChip(item, name, i)) });
       }
-      const shown2 = raw === void 0 || raw === null || raw === "" ? "\u2014" : relationLabel(raw) ?? formatValue(raw, field.format);
+      if (raw !== void 0 && raw !== null && raw !== "" && relationLabel(raw) !== null) {
+        return relationChip(raw, name);
+      }
+      const shown2 = raw === void 0 || raw === null || raw === "" ? "\u2014" : formatValue(raw, field.format);
       return /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: shown2 });
     }
     if (fieldDraft?.name === name) {
@@ -39655,6 +39908,7 @@ var init_DocumentDetails = __esm({
     init_cn();
     init_format();
     init_getNestedValue();
+    init_relationLabel();
     init_useEventBus();
     init_Box();
     init_Stack();
@@ -44240,7 +44494,18 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
   if (value === void 0 || value === null) return "\u2014";
   const str = String(value);
   switch (fieldType) {
-    case "image":
+    case "image": {
+      if (!str) return "\u2014";
+      return /* @__PURE__ */ jsx(Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: str,
+          alt: formatFieldLabel(fieldName2),
+          className: "max-w-full max-h-64 rounded-md object-contain",
+          loading: "lazy"
+        }
+      ) });
+    }
     case "url": {
       if (str.match(/\.(png|jpe?g|gif|svg|webp|avif)(\?|$)/i) || str.startsWith("data:image/")) {
         return /* @__PURE__ */ jsx(Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsx(
@@ -44253,7 +44518,7 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
           }
         ) });
       }
-      if (fieldType === "url" && /^https?:\/\//i.test(str)) {
+      if (/^https?:\/\//i.test(str)) {
         return /* @__PURE__ */ jsx(
           "a",
           {
@@ -44339,8 +44604,10 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
       return str;
     }
     case "relation": {
-      const match = meta?.options?.find((opt) => opt.value === str);
-      return match ? match.label : str;
+      const labels = relationDisplayLabels(value, meta?.options);
+      if (labels.length === 0) return "\u2014";
+      if (labels.length === 1) return labels[0];
+      return /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, children: labels.map((label, i) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: label }, i)) });
     }
     case "file": {
       if (value !== null && typeof value === "object" && !Array.isArray(value)) {
@@ -44442,6 +44709,7 @@ var init_DetailPanel = __esm({
     init_cn();
     init_format();
     init_getNestedValue();
+    init_relationLabel();
     init_useEventBus();
     init_UploadDropZone();
     formatFieldLabel = humanizeFieldName;
@@ -45100,6 +45368,8 @@ function determineInputType(field) {
       return "url";
     case "file":
       return "file";
+    case "image":
+      return "image";
     case "money":
       return "currency";
     case "number":
@@ -45699,6 +45969,50 @@ var init_Form = __esm({
                 }
               }
             );
+          case "image": {
+            const imageUrl = typeof currentValue === "string" ? currentValue : "";
+            return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+              imageUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: "",
+                  "aria-hidden": "true",
+                  className: "h-24 w-full max-w-xs rounded-md border border-border object-cover",
+                  "data-testid": `image-preview-${fieldName2}`
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                UploadDropZone,
+                {
+                  accept: "image/*",
+                  maxFiles: 1,
+                  maxSize: 2 * 1024 * 1024,
+                  disabled: isLoading,
+                  onFiles: (files) => {
+                    const f3 = files[0];
+                    if (!f3) return;
+                    const reader = new FileReader();
+                    reader.onload = () => handleChange(
+                      fieldName2,
+                      typeof reader.result === "string" ? reader.result : ""
+                    );
+                    reader.readAsDataURL(f3);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...commonProps,
+                  type: "url",
+                  placeholder: t("form.imageUrlFallback"),
+                  value: imageUrl,
+                  onChange: (e) => handleChange(fieldName2, e.target.value)
+                }
+              )
+            ] });
+          }
           case "date":
             return /* @__PURE__ */ jsx(
               Input,