@almadar/ui 5.162.0 → 5.163.0

package/dist/components/index.cjs

@@ -34180,6 +34180,33 @@ var init_Lightbox = __esm({
     exports.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__ */ jsxRuntime.jsx(exports.Icon, { name: icon, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon, ...props });
 }
@@ -34497,6 +34524,7 @@ var init_TableView = __esm({
     "use client";
     init_cn();
     init_format();
+    init_relationLabel();
     init_getNestedValue();
     init_useEventBus();
     init_Box();
@@ -34510,7 +34538,13 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     tableViewLog = logger.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 = {
@@ -38125,6 +38159,13 @@ var init_RichTextEditor = __esm({
         document.execCommand("createLink", false, safe);
         afterEdit();
       }, [afterEdit, t, toolbar.link]);
+      const execImage = React77.useCallback(() => {
+        const url = window.prompt(t("richTextEditor.imagePrompt"));
+        if (!url) return;
+        const safe = safeUrl(url, ["http://", "https://", "data:image/"]) ?? `https://${url}`;
+        document.execCommand("insertImage", false, safe);
+        afterEdit();
+      }, [afterEdit, t]);
       const execRule = React77.useCallback(() => {
         document.execCommand("insertHorizontalRule", false);
         afterEdit();
@@ -38162,6 +38203,7 @@ var init_RichTextEditor = __esm({
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { icon: LucideIcons2.Quote, label: t("richTextEditor.quote"), active: toolbar.block === "blockquote", onExec: () => execBlock("blockquote") }),
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { icon: LucideIcons2.Code, label: t("richTextEditor.code"), active: toolbar.block === "pre", onExec: () => execBlock("pre") }),
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { icon: LucideIcons2.Link, label: toolbar.link ? t("richTextEditor.removeLink") : t("richTextEditor.link"), active: toolbar.link, onExec: execLink }),
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { icon: LucideIcons2.Image, label: t("richTextEditor.image"), onExec: execImage }),
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { icon: LucideIcons2.Minus, label: t("richTextEditor.divider"), onExec: execRule })
             ]
           }
@@ -38202,6 +38244,8 @@ function DocumentPanel({
   id,
   title,
   subtitle,
+  coverImage,
+  icon,
   value,
   actions,
   maxInlineActions,
@@ -38277,62 +38321,74 @@ function DocumentPanel({
   const emitWithId = (event) => () => {
     if (event) eventBus.emit(`UI:${event}`, { id: recordId });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.Card, { variant: "elevated", className: cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "sm", className: "p-6 sm:p-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-between items-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
-        titleNode,
-        subtitle ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: subtitle }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0 pt-1 items-center", children: editing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", className: "hidden sm:block", children: autosaveHint ?? (t("documentPanel.autosaveHint") || "") }),
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "primary", size: "sm", onClick: emitWithId(doneEvent), "data-testid": "document-done", children: doneLabel ?? (t("documentPanel.done") || "Done") })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        editEvent && /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { variant: "ghost", size: "sm", onClick: emitWithId(editEvent), "data-testid": "document-edit", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "edit", size: "xs", className: "mr-1" }),
-          editLabel ?? (t("documentPanel.edit") || "Edit")
-        ] }),
-        inlineActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-          exports.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__ */ jsxRuntime.jsx(
-          exports.Menu,
-          {
-            position: "bottom-end",
-            trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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__ */ jsxRuntime.jsx(exports.RichTextEditor, { value, changeEvent: contentChangeEvent, placeholder }) : /* @__PURE__ */ jsxRuntime.jsx(
-      exports.Box,
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Card, { variant: "elevated", className: cn("w-full overflow-hidden", className), children: [
+    coverImage ? /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "h-44 w-full sm:h-52", "data-testid": "document-cover", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(exports.RichTextEditor, { value, readOnly: true }) : /* @__PURE__ */ jsxRuntime.jsx(exports.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__ */ jsxRuntime.jsxs(exports.VStack, { gap: "sm", className: "p-6 sm:p-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-between items-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
+          icon ? /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-muted-foreground", "data-testid": "document-icon", children: renderIconInput4(icon, { size: "lg" }) }) : null,
+          titleNode,
+          subtitle ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: subtitle }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0 pt-1 items-center", children: editing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", className: "hidden sm:block", children: autosaveHint ?? (t("documentPanel.autosaveHint") || "") }),
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "primary", size: "sm", onClick: emitWithId(doneEvent), "data-testid": "document-done", children: doneLabel ?? (t("documentPanel.done") || "Done") })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          editEvent && /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { variant: "ghost", size: "sm", onClick: emitWithId(editEvent), "data-testid": "document-edit", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "edit", size: "xs", className: "mr-1" }),
+            editLabel ?? (t("documentPanel.edit") || "Edit")
+          ] }),
+          inlineActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+            exports.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__ */ jsxRuntime.jsx(
+            exports.Menu,
+            {
+              position: "bottom-end",
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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__ */ jsxRuntime.jsx(exports.RichTextEditor, { value, changeEvent: contentChangeEvent, placeholder }) : /* @__PURE__ */ jsxRuntime.jsx(
+        exports.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__ */ jsxRuntime.jsx(exports.RichTextEditor, { value, readOnly: true }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "muted", children: placeholder ?? (t("documentPanel.placeholder") || "") })
+        }
+      )
+    ] })
+  ] });
 }
 var init_DocumentPanel = __esm({
   "components/core/molecules/DocumentPanel.tsx"() {
@@ -38356,17 +38412,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";
@@ -38376,6 +38431,7 @@ function DocumentDetails({
   entity,
   fields,
   metaCommitEvent,
+  relationEvent,
   title,
   className
 }) {
@@ -38390,11 +38446,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__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", children: label }, key);
+    }
+    const emitClick = () => eventBus.emit(`UI:${relationEvent}`, { field: name, id: relationId(item), name: label });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      exports.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__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: "\u2014" });
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         exports.Switch,
@@ -38424,9 +38520,12 @@ function DocumentDetails({
         if (raw.length === 0) {
           return /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: "\u2014" });
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-wrap", children: raw.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", children: relationLabel(item) ?? humanizeEnumValue(String(item)) }, i)) });
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.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__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "break-words", children: shown2 });
     }
     if (fieldDraft?.name === name) {
@@ -38495,6 +38594,7 @@ var init_DocumentDetails = __esm({
     init_cn();
     init_format();
     init_getNestedValue();
+    init_relationLabel();
     init_useEventBus();
     init_Box();
     init_Stack();
@@ -43716,7 +43816,18 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
   if (value === void 0 || value === null) return "\u2014";
   const str2 = String(value);
   switch (fieldType) {
-    case "image":
+    case "image": {
+      if (!str2) return "\u2014";
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: str2,
+          alt: formatFieldLabel(fieldName2),
+          className: "max-w-full max-h-64 rounded-md object-contain",
+          loading: "lazy"
+        }
+      ) });
+    }
     case "url": {
       if (str2.match(/\.(png|jpe?g|gif|svg|webp|avif)(\?|$)/i) || str2.startsWith("data:image/")) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -43729,7 +43840,7 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
           }
         ) });
       }
-      if (fieldType === "url" && /^https?:\/\//i.test(str2)) {
+      if (/^https?:\/\//i.test(str2)) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           "a",
           {
@@ -43815,8 +43926,10 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
       return str2;
     }
     case "relation": {
-      const match = meta?.options?.find((opt) => opt.value === str2);
-      return match ? match.label : str2;
+      const labels = relationDisplayLabels(value, meta?.options);
+      if (labels.length === 0) return "\u2014";
+      if (labels.length === 1) return labels[0];
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", wrap: true, children: labels.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", children: label }, i)) });
     }
     case "file": {
       if (value !== null && typeof value === "object" && !Array.isArray(value)) {
@@ -43918,6 +44031,7 @@ var init_DetailPanel = __esm({
     init_cn();
     init_format();
     init_getNestedValue();
+    init_relationLabel();
     init_useEventBus();
     init_UploadDropZone();
     formatFieldLabel = humanizeFieldName;
@@ -44576,6 +44690,8 @@ function determineInputType(field) {
       return "url";
     case "file":
       return "file";
+    case "image":
+      return "image";
     case "money":
       return "currency";
     case "number":
@@ -45175,6 +45291,49 @@ var init_Form = __esm({
                 }
               }
             );
+          case "image": {
+            const imageUrl = typeof currentValue2 === "string" ? currentValue2 : "";
+            return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "sm", children: [
+              imageUrl ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                exports.Input,
+                {
+                  ...commonProps,
+                  type: "url",
+                  value: imageUrl,
+                  onChange: (e) => handleChange(fieldName2, e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.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);
+                  }
+                }
+              )
+            ] });
+          }
           case "date":
             return /* @__PURE__ */ jsxRuntime.jsx(
               exports.Input,
@@ -53941,6 +54100,8 @@ var en_default = {
   "richTextEditor.removeLink": "Remove link",
   "richTextEditor.divider": "Divider",
   "richTextEditor.linkPrompt": "Link address",
+  "richTextEditor.image": "Insert image",
+  "richTextEditor.imagePrompt": "Image URL",
   "richTextEditor.placeholder": "Start writing\u2026"
 };
 

package/dist/components/index.d.cts

@@ -8881,6 +8881,12 @@ interface DocumentPanelProps {
     title?: string;
     /** Muted byline under the title; hidden when empty */
     subtitle?: string;
+    /** Cover/hero image URL painted as a full-bleed banner above the header
+     *  row (Notion/article-hero shape); hidden when empty */
+    coverImage?: string;
+    /** Document icon rendered beside the title (a file glyph, a domain icon);
+     *  hidden when empty */
+    icon?: IconInput;
     /** The document body as rich-text HTML */
     value?: string;
     /** Header actions (settings, history, …). At most one explicit primary
@@ -8916,7 +8922,7 @@ interface DocumentPanelProps {
     placeholder?: string;
     className?: string;
 }
-declare function DocumentPanel({ id, title, subtitle, value, actions, maxInlineActions, editing, titleCommitEvent, contentChangeEvent, editEvent, doneEvent, editLabel, doneLabel, autosaveHint, placeholder, className, }: DocumentPanelProps): React__default.ReactElement;
+declare function DocumentPanel({ id, title, subtitle, coverImage, icon, value, actions, maxInlineActions, editing, titleCommitEvent, contentChangeEvent, editEvent, doneEvent, editLabel, doneLabel, autosaveHint, placeholder, className, }: DocumentPanelProps): React__default.ReactElement;
 
 /**
  * DocumentDetails Molecule
@@ -8945,19 +8951,24 @@ interface DocumentDetailsField {
     header?: string;
     /** Lucide icon name or component shown beside the label */
     icon?: IconInput;
-    /** How the property edits: text input, boolean switch, select, or display-only.
-     *  Inferred from the value when omitted (boolean → boolean, array → readonly, else text). */
-    kind?: 'text' | 'boolean' | 'select' | 'readonly';
+    /** How the property edits: text input, boolean switch, select, image
+     *  thumbnail, or display-only. Inferred from the value when omitted
+     *  (boolean → boolean, array → readonly, image-typed → image, else text). */
+    kind?: 'text' | 'boolean' | 'select' | 'readonly' | 'image';
     /** Options for kind: 'select' */
     options?: readonly string[];
     /** Display format for the read value */
     format?: 'date' | 'currency' | 'number' | 'boolean' | 'percent';
+    /** Entity-declared field type, injected by the display fields contract —
+     *  drives kind inference (e.g. `image` → thumbnail row). */
+    type?: string;
 }
 /**
  * DocumentDetails — the document's metadata as a compact settings card for
  * the rail beside a DocumentPanel, each property committing in place.
  *
  * @capabilities document settings, page details, post settings sidebar, metadata panel, document properties, publish settings
+ * @fieldsContract display
  */
 interface DocumentDetailsProps {
     /** The loaded record — supplies the id every commit carries and the
@@ -8971,11 +8982,19 @@ interface DocumentDetailsProps {
         id: string;
         patch: Record<string, FieldValue>;
     }>;
+    /** Makes relation chips clickable: emitted with { field, id, name } when a
+     *  hydrated relation value (or one row of a many-relation) is clicked —
+     *  the host routes it to the linked record's own surface. */
+    relationEvent?: EventEmit<{
+        field: string;
+        id: string;
+        name: string;
+    }>;
     /** Card heading (defaults to the localized "Details") */
     title?: string;
     className?: string;
 }
-declare function DocumentDetails({ entity, fields, metaCommitEvent, title, className, }: DocumentDetailsProps): React__default.ReactElement | null;
+declare function DocumentDetails({ entity, fields, metaCommitEvent, relationEvent, title, className, }: DocumentDetailsProps): React__default.ReactElement | null;
 
 /**
  * ReplyTree Organism Component

package/dist/components/index.d.ts

@@ -8881,6 +8881,12 @@ interface DocumentPanelProps {
     title?: string;
     /** Muted byline under the title; hidden when empty */
     subtitle?: string;
+    /** Cover/hero image URL painted as a full-bleed banner above the header
+     *  row (Notion/article-hero shape); hidden when empty */
+    coverImage?: string;
+    /** Document icon rendered beside the title (a file glyph, a domain icon);
+     *  hidden when empty */
+    icon?: IconInput;
     /** The document body as rich-text HTML */
     value?: string;
     /** Header actions (settings, history, …). At most one explicit primary
@@ -8916,7 +8922,7 @@ interface DocumentPanelProps {
     placeholder?: string;
     className?: string;
 }
-declare function DocumentPanel({ id, title, subtitle, value, actions, maxInlineActions, editing, titleCommitEvent, contentChangeEvent, editEvent, doneEvent, editLabel, doneLabel, autosaveHint, placeholder, className, }: DocumentPanelProps): React__default.ReactElement;
+declare function DocumentPanel({ id, title, subtitle, coverImage, icon, value, actions, maxInlineActions, editing, titleCommitEvent, contentChangeEvent, editEvent, doneEvent, editLabel, doneLabel, autosaveHint, placeholder, className, }: DocumentPanelProps): React__default.ReactElement;
 
 /**
  * DocumentDetails Molecule
@@ -8945,19 +8951,24 @@ interface DocumentDetailsField {
     header?: string;
     /** Lucide icon name or component shown beside the label */
     icon?: IconInput;
-    /** How the property edits: text input, boolean switch, select, or display-only.
-     *  Inferred from the value when omitted (boolean → boolean, array → readonly, else text). */
-    kind?: 'text' | 'boolean' | 'select' | 'readonly';
+    /** How the property edits: text input, boolean switch, select, image
+     *  thumbnail, or display-only. Inferred from the value when omitted
+     *  (boolean → boolean, array → readonly, image-typed → image, else text). */
+    kind?: 'text' | 'boolean' | 'select' | 'readonly' | 'image';
     /** Options for kind: 'select' */
     options?: readonly string[];
     /** Display format for the read value */
     format?: 'date' | 'currency' | 'number' | 'boolean' | 'percent';
+    /** Entity-declared field type, injected by the display fields contract —
+     *  drives kind inference (e.g. `image` → thumbnail row). */
+    type?: string;
 }
 /**
  * DocumentDetails — the document's metadata as a compact settings card for
  * the rail beside a DocumentPanel, each property committing in place.
  *
  * @capabilities document settings, page details, post settings sidebar, metadata panel, document properties, publish settings
+ * @fieldsContract display
  */
 interface DocumentDetailsProps {
     /** The loaded record — supplies the id every commit carries and the
@@ -8971,11 +8982,19 @@ interface DocumentDetailsProps {
         id: string;
         patch: Record<string, FieldValue>;
     }>;
+    /** Makes relation chips clickable: emitted with { field, id, name } when a
+     *  hydrated relation value (or one row of a many-relation) is clicked —
+     *  the host routes it to the linked record's own surface. */
+    relationEvent?: EventEmit<{
+        field: string;
+        id: string;
+        name: string;
+    }>;
     /** Card heading (defaults to the localized "Details") */
     title?: string;
     className?: string;
 }
-declare function DocumentDetails({ entity, fields, metaCommitEvent, title, className, }: DocumentDetailsProps): React__default.ReactElement | null;
+declare function DocumentDetails({ entity, fields, metaCommitEvent, relationEvent, title, className, }: DocumentDetailsProps): React__default.ReactElement | null;
 
 /**
  * ReplyTree Organism Component