@ai-matrx/detail 0.1.165 → 0.1.167

package/dist/react.cjs

@@ -584,14 +584,6 @@ var AlertCircleIcon = glyph(
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
   ] })
 );
-var ExternalLinkIcon = glyph(
-  "external-link",
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 14 21 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
-  ] })
-);
 var HistoryIcon = glyph(
   "history",
   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
@@ -608,15 +600,6 @@ var Link2Icon = glyph(
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", x2: "16", y1: "12", y2: "12" })
   ] })
 );
-var RefreshCwIcon = glyph(
-  "refresh-cw",
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 3v5h-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 16H3v5" })
-  ] })
-);
 var SHIELD = "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z";
 var ShieldAlertIcon = glyph(
   "shield-alert",
@@ -633,25 +616,6 @@ var ShieldCheckIcon = glyph(
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 12 2 2 4-4" })
   ] })
 );
-var AppWindowIcon = glyph(
-  "app-window",
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 4v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2 8h20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 4v4" })
-  ] })
-);
-var CheckIcon = glyph("check", /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6 9 17l-5-5" }));
-var ChevronLeftIcon = glyph("chevron-left", /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 18-6-6 6-6" }));
-var ChevronRightIcon = glyph("chevron-right", /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 18 6-6-6-6" }));
-var CopyIcon = glyph(
-  "copy",
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
-  ] })
-);
 var ExpandIcon = glyph(
   "expand",
   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
@@ -665,21 +629,6 @@ var ExpandIcon = glyph(
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 9 3 3" })
   ] })
 );
-var MoreHorizontalIcon = glyph(
-  "more-horizontal",
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
-  ] })
-);
-var PanelRightIcon = glyph(
-  "panel-right",
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3v18" })
-  ] })
-);
 var LoaderIcon = glyph("loader", /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
 var Settings2Icon = glyph(
   "settings-2",
@@ -692,40 +641,49 @@ var Settings2Icon = glyph(
 );
 
 // src/react/DetailHeader.tsx
+var import_icons2 = require("@ai-matrx/design-system/icons");
 var import_design_system = require("@ai-matrx/design-system");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ICON_BUTTON = "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 disabled:hover:bg-transparent pointer-coarse:h-10 pointer-coarse:w-10";
 var MENU_ITEM = "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:py-2.5";
 var TYPE_CHIP = "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide ring-1 ring-inset";
 var PRESENTATIONS = [
-  { value: "window", label: "Open as window", Icon: AppWindowIcon },
-  { value: "docked", label: "Open docked to the side", Icon: PanelRightIcon },
+  { value: "window", label: "Open as window", Icon: import_icons2.AppWindowIcon },
+  { value: "docked", label: "Open docked to the side", Icon: import_icons2.PanelRightIcon },
   { value: "page", label: "Open as page", Icon: ExpandIcon }
 ];
 function TypeChip({ core, className }) {
-  const accent = core.recordType?.accent ?? null;
+  const color = identityColor(core.recordType?.color);
+  const accent = color ? null : core.recordType?.accent ?? null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       className: (0, import_design_system.cn)(
         TYPE_CHIP,
-        accent?.bg ?? "bg-muted",
-        accent?.text ?? "text-muted-foreground",
-        accent?.ring ?? "ring-border",
+        color ? "text-foreground" : [accent?.bg ?? "bg-muted", accent?.text ?? "text-muted-foreground", accent?.ring ?? "ring-border"],
         className
       ),
+      style: color ? {
+        backgroundColor: `color-mix(in oklab, ${color} 14%, transparent)`,
+        ["--tw-ring-color"]: `color-mix(in oklab, ${color} 30%, transparent)`
+      } : void 0,
       "data-detail-type-chip": true,
       children: core.recordLabel
     }
   );
 }
+var IDENTITY_HEX = /^#[0-9a-f]{6}$/i;
+function identityColor(c) {
+  return c && IDENTITY_HEX.test(c) ? c : null;
+}
 function DetailTitle({ core }) {
   const host = useDetailHost();
   const Icon = core.recordType?.icon ?? null;
+  const color = identityColor(core.recordType?.color);
   const accent = core.recordType?.accent ?? null;
   const RecordDoors = host.doors.RecordDoors;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-    Icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: (0, import_design_system.cn)("h-4 w-4 shrink-0", accent?.text) }) : null,
+    Icon ? color ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex shrink-0", style: { color }, "data-detail-identity-color": color, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-4 w-4 shrink-0" }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: (0, import_design_system.cn)("h-4 w-4 shrink-0", accent?.text) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
@@ -823,7 +781,7 @@ function DetailActions({ core, optional = "inline" }) {
           disabled: !list.hasPrev,
           "aria-label": "Previous record (Up arrow, or left bracket)",
           title: "Previous record  \u2191 or [",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronLeftIcon, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ChevronLeftIcon, { className: "h-4 w-4" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "px-1 text-[11px] tabular-nums text-muted-foreground", children: [
@@ -840,7 +798,7 @@ function DetailActions({ core, optional = "inline" }) {
           disabled: !list.hasNext,
           "aria-label": "Next record (Down arrow, or right bracket)",
           title: "Next record  \u2193 or ]",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ChevronRightIcon, { className: "h-4 w-4" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true })
@@ -873,7 +831,7 @@ function DetailActions({ core, optional = "inline" }) {
                 "aria-label": "Copy record id",
                 title: "Copy record id",
                 "data-detail-copy-id": true,
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, { className: "h-3.5 w-3.5" })
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.CheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.CopyIcon, { className: "h-3.5 w-3.5" })
               }
             )
           ]
@@ -891,7 +849,7 @@ function DetailActions({ core, optional = "inline" }) {
             "aria-haspopup": "menu",
             "aria-expanded": menuOpen,
             "data-detail-actions-overflow": true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreHorizontalIcon, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.MoreHorizontalIcon, { className: "h-4 w-4" })
           }
         ),
         menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -930,7 +888,7 @@ function DetailActions({ core, optional = "inline" }) {
                     void copyId();
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.CopyIcon, { className: "h-3.5 w-3.5 shrink-0" }),
                     "Copy record id"
                   ]
                 }
@@ -961,6 +919,7 @@ function formatWhen(iso) {
 // src/react/DetailPresentationPane.tsx
 var import_react8 = require("react");
 var import_design_system2 = require("@ai-matrx/design-system");
+var import_icons4 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var WORD = {
   window: "a window",
@@ -1123,7 +1082,7 @@ function DetailPresentationPane({ core }) {
               disabled: state.status === "saving",
               className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60 pointer-coarse:py-2",
               children: [
-                state.status === "saving" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderIcon, { className: "h-3 w-3 animate-spin" }) : state.status === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, { className: "h-3 w-3" }) : null,
+                state.status === "saving" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderIcon, { className: "h-3 w-3 animate-spin" }) : state.status === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons4.CheckIcon, { className: "h-3 w-3" }) : null,
                 "Save"
               ]
             }
@@ -1155,6 +1114,7 @@ function DetailPresentationPane({ core }) {
 }
 
 // src/react/DetailBody.tsx
+var import_icons6 = require("@ai-matrx/design-system/icons");
 var import_outbound_react = require("@ai-matrx/kit/outbound-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SLOW_LOAD_NOTICE_MS = 6e3;
@@ -1262,7 +1222,7 @@ function HealthStrip({ health }) {
               disabled: refreshing,
               className: "inline-flex h-6 items-center gap-1 rounded px-1.5 hover:bg-accent hover:text-foreground disabled:opacity-50 pointer-coarse:h-10",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefreshCwIcon, { className: (0, import_design_system3.cn)("h-3 w-3", refreshing && "animate-spin") }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons6.RefreshCwIcon, { className: (0, import_design_system3.cn)("h-3 w-3", refreshing && "animate-spin") }),
                 "Refresh"
               ]
             }
@@ -1282,7 +1242,7 @@ function HealthStrip({ health }) {
               href: health.openAtSourceHref,
               className: "inline-flex h-6 items-center gap-1 rounded px-1.5 hover:bg-accent hover:text-foreground pointer-coarse:h-10",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExternalLinkIcon, { className: "h-3 w-3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons6.ExternalLinkIcon, { className: "h-3 w-3" }),
                 health.openAtSourceLabel ?? deriveOpenAtSourceLabel(health.source)
               ]
             }