@ship-it-ui/shipit 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -26,6 +26,7 @@ __export(index_exports, {
   CTAStrip: () => CTAStrip,
   Citation: () => Citation,
   ConfidenceIndicator: () => ConfidenceIndicator,
+  ConnectorCard: () => ConnectorCard,
   CopilotMessage: () => CopilotMessage,
   ENTITY_GLYPH: () => ENTITY_GLYPH,
   ENTITY_LABEL: () => ENTITY_LABEL,
@@ -45,6 +46,7 @@ __export(index_exports, {
   GraphMinimap: () => GraphMinimap,
   GraphNode: () => GraphNode,
   Hero: () => Hero,
+  NotifRow: () => NotifRow,
   PathOverlay: () => PathOverlay,
   PricingCard: () => PricingCard,
   ReasoningBlock: () => ReasoningBlock,
@@ -52,17 +54,22 @@ __export(index_exports, {
   SuggestionChip: () => SuggestionChip,
   Testimonial: () => Testimonial,
   ToolCallCard: () => ToolCallCard,
-  cn: () => import_ui28.cn,
+  cn: () => import_ui30.cn,
   entityColumn: () => entityColumn,
-  entityTypeColumn: () => entityTypeColumn
+  entityTypeColumn: () => entityTypeColumn,
+  getEntityTypeMeta: () => getEntityTypeMeta,
+  listEntityTypes: () => listEntityTypes,
+  registerEntityType: () => registerEntityType,
+  registerEntityTypes: () => registerEntityTypes,
+  resetEntityTypeRegistry: () => resetEntityTypeRegistry
 });
 module.exports = __toCommonJS(index_exports);
-var import_ui28 = require("@ship-it-ui/ui");
+var import_ui30 = require("@ship-it-ui/ui");
 
 // src/ai/AskBar.tsx
 var import_ui = require("@ship-it-ui/ui");
-var import_react = require("react");
 var import_ui2 = require("@ship-it-ui/ui");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var AskBar = (0, import_react.forwardRef)(function AskBar2({
   value: valueProp,
@@ -74,10 +81,12 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
   submitLabel = "Ask",
   disabled,
   maxWidth = 620,
+  density = "comfortable",
   className,
   children,
   ...props
 }, ref) {
+  const isTouch = density === "touch";
   const [value, setValue] = (0, import_ui.useControllableState)({
     value: valueProp,
     defaultValue: defaultValue ?? "",
@@ -105,16 +114,17 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
       ref,
       role: "search",
       onSubmit: handleSubmit,
-      style: { maxWidth },
+      style: { maxWidth: isTouch ? void 0 : maxWidth },
       className: (0, import_ui2.cn)(
-        "border-border-strong bg-panel w-full rounded-xl border p-[14px] shadow",
+        "border-border-strong bg-panel w-full border",
+        isTouch ? "rounded-m-card p-3" : "rounded-xl p-[14px] shadow",
         "focus-within:border-accent focus-within:ring-accent-dim focus-within:ring-[3px]",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-[10px] flex items-start gap-[10px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "text-accent text-[16px]", children: "\u2726" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_ui2.cn)("flex items-start gap-[10px]", isTouch ? "mb-2" : "mb-[10px]"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: (0, import_ui2.cn)("text-accent", isTouch ? "text-[18px]" : "text-[16px]"), children: "\u2726" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "textarea",
             {
@@ -126,8 +136,9 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
               "aria-label": placeholder,
               rows: 1,
               className: (0, import_ui2.cn)(
-                "text-text flex-1 resize-none border-0 bg-transparent text-[14px] leading-[1.5] outline-none",
-                "placeholder:text-text-dim"
+                "text-text flex-1 resize-none border-0 bg-transparent leading-[1.5] outline-none",
+                "placeholder:text-text-dim",
+                isTouch ? "text-m-body" : "text-[14px]"
               )
             }
           ),
@@ -135,19 +146,23 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
             "span",
             {
               "aria-hidden": true,
-              className: "bg-accent mt-[3px] inline-block h-4 w-px animate-[ship-pulse_1s_infinite]"
+              className: (0, import_ui2.cn)(
+                "bg-accent mt-[3px] inline-block w-px animate-[ship-pulse_1s_infinite]",
+                isTouch ? "h-5" : "h-4"
+              )
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-[6px]", children: [
           children,
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "text-text-dim font-mono text-[11px]", children: "\u2318\u21B5" }),
+            !isTouch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "text-text-dim font-mono text-[11px]", children: "\u2318\u21B5" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_ui.Button,
               {
                 type: "submit",
-                size: "sm",
+                size: isTouch ? "md" : "sm",
+                density: isTouch ? "touch" : void 0,
                 variant: "primary",
                 disabled: disabled || !(value ?? "").trim(),
                 children: submitLabel
@@ -162,8 +177,8 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
 AskBar.displayName = "AskBar";
 
 // src/ai/Citation.tsx
-var import_react2 = require("react");
 var import_ui3 = require("@ship-it-ui/ui");
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SUPERSCRIPTS = ["\u2070", "\xB9", "\xB2", "\xB3", "\u2074", "\u2075", "\u2076", "\u2077", "\u2078", "\u2079"];
 function toSuperscript(n) {
@@ -204,8 +219,8 @@ var Citation = (0, import_react2.forwardRef)(function Citation2({ index, source,
 Citation.displayName = "Citation";
 
 // src/ai/ConfidenceIndicator.tsx
-var import_react3 = require("react");
 var import_ui4 = require("@ship-it-ui/ui");
+var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var tierLabel = {
   high: "High",
@@ -273,12 +288,53 @@ ConfidenceIndicator.displayName = "ConfidenceIndicator";
 
 // src/ai/CopilotMessage.tsx
 var import_ui5 = require("@ship-it-ui/ui");
-var import_react4 = require("react");
 var import_ui6 = require("@ship-it-ui/ui");
+var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CopilotMessage = (0, import_react4.forwardRef)(
-  function CopilotMessage2({ role, avatar, streaming, className, children, ...props }, ref) {
+  function CopilotMessage2({ role, avatar, streaming, density = "comfortable", className, children, ...props }, ref) {
     const isAssistant = role === "assistant";
+    const isTouch = density === "touch";
+    if (isTouch) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          ref,
+          className: (0, import_ui6.cn)(
+            "flex flex-col gap-[6px]",
+            isAssistant ? "items-start" : "items-end",
+            className
+          ),
+          "data-role": role,
+          ...props,
+          children: [
+            isAssistant && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-m-eyebrow text-accent inline-flex items-center gap-[6px] font-mono tracking-wide uppercase", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, children: "\u2726" }),
+              streaming ? "thinking" : "ShipIt"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: (0, import_ui6.cn)(
+                  "rounded-m-card text-m-body max-w-[85%] px-[14px] py-3 leading-normal",
+                  isAssistant ? "bg-panel border-border border" : "bg-accent text-on-accent"
+                ),
+                children: [
+                  children,
+                  streaming && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "bg-accent ml-[2px] inline-block h-4 w-px animate-[ship-pulse_1s_infinite] align-middle"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -323,8 +379,8 @@ CopilotMessage.displayName = "CopilotMessage";
 
 // src/ai/ReasoningBlock.tsx
 var import_ui7 = require("@ship-it-ui/ui");
-var import_react5 = require("react");
 var import_ui8 = require("@ship-it-ui/ui");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ReasoningBlock = (0, import_react5.forwardRef)(
   function ReasoningBlock2({
@@ -385,8 +441,8 @@ var ReasoningStep = (0, import_react5.forwardRef)(function ReasoningStep2({ step
 ReasoningStep.displayName = "ReasoningStep";
 
 // src/ai/SuggestionChip.tsx
-var import_react6 = require("react");
 var import_ui9 = require("@ship-it-ui/ui");
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SuggestionChip = (0, import_react6.forwardRef)(
   function SuggestionChip2({ glyph = "\u2726", className, children, type, ...props }, ref) {
@@ -415,8 +471,8 @@ SuggestionChip.displayName = "SuggestionChip";
 
 // src/ai/ToolCallCard.tsx
 var import_ui10 = require("@ship-it-ui/ui");
-var import_react7 = require("react");
 var import_ui11 = require("@ship-it-ui/ui");
+var import_react7 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ToolCallCard = (0, import_react7.forwardRef)(function ToolCallCard2({ name, status, running, className, children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -449,64 +505,140 @@ ToolCallCard.displayName = "ToolCallCard";
 
 // src/entity/EntityBadge.tsx
 var import_ui12 = require("@ship-it-ui/ui");
-var import_react8 = require("react");
 var import_ui13 = require("@ship-it-ui/ui");
+var import_react8 = require("react");
 
 // src/entity/types.ts
+var BUILTIN_META = {
+  service: {
+    glyph: "\u25C7",
+    label: "Service",
+    toneClass: "text-accent",
+    toneBg: "bg-accent-dim",
+    colorVar: "var(--color-accent)",
+    badgeVariant: "accent"
+  },
+  person: {
+    glyph: "\u25CB",
+    label: "Person",
+    toneClass: "text-text-muted",
+    toneBg: "bg-panel-2",
+    colorVar: "var(--color-purple)",
+    badgeVariant: "neutral"
+  },
+  document: {
+    glyph: "\u25A4",
+    label: "Document",
+    toneClass: "text-purple",
+    toneBg: "bg-[color-mix(in_oklab,var(--color-purple),transparent_85%)]",
+    colorVar: "var(--color-pink)",
+    badgeVariant: "purple"
+  },
+  deployment: {
+    glyph: "\u2191",
+    label: "Deployment",
+    toneClass: "text-ok",
+    toneBg: "bg-[color-mix(in_oklab,var(--color-ok),transparent_85%)]",
+    colorVar: "var(--color-ok)",
+    badgeVariant: "ok"
+  },
+  incident: {
+    glyph: "\u25CE",
+    label: "Incident",
+    toneClass: "text-err",
+    toneBg: "bg-[color-mix(in_oklab,var(--color-err),transparent_85%)]",
+    colorVar: "var(--color-warn)",
+    badgeVariant: "err"
+  },
+  ticket: {
+    glyph: "\u25A2",
+    label: "Ticket",
+    toneClass: "text-warn",
+    toneBg: "bg-[color-mix(in_oklab,var(--color-warn),transparent_85%)]",
+    colorVar: "var(--color-text-muted)",
+    badgeVariant: "warn"
+  }
+};
+var FALLBACK = BUILTIN_META.service;
+var registry = new Map(Object.entries(BUILTIN_META));
+function registerEntityType(type, meta) {
+  registry.set(type, meta);
+  return meta;
+}
+function registerEntityTypes(map) {
+  for (const [key, meta] of Object.entries(map)) {
+    registry.set(key, meta);
+  }
+}
+function getEntityTypeMeta(type) {
+  return registry.get(type) ?? FALLBACK;
+}
+function listEntityTypes() {
+  return Array.from(registry.entries());
+}
+function resetEntityTypeRegistry() {
+  registry.clear();
+  for (const key of Object.keys(BUILTIN_META)) {
+    registry.set(key, BUILTIN_META[key]);
+  }
+}
 var ENTITY_GLYPH = {
-  service: "\u25C7",
-  person: "\u25CB",
-  document: "\u25A4",
-  deployment: "\u2191",
-  incident: "\u25CE",
-  ticket: "\u25A2"
+  service: BUILTIN_META.service.glyph,
+  person: BUILTIN_META.person.glyph,
+  document: BUILTIN_META.document.glyph,
+  deployment: BUILTIN_META.deployment.glyph,
+  incident: BUILTIN_META.incident.glyph,
+  ticket: BUILTIN_META.ticket.glyph
 };
 var ENTITY_LABEL = {
-  service: "Service",
-  person: "Person",
-  document: "Document",
-  deployment: "Deployment",
-  incident: "Incident",
-  ticket: "Ticket"
+  service: BUILTIN_META.service.label,
+  person: BUILTIN_META.person.label,
+  document: BUILTIN_META.document.label,
+  deployment: BUILTIN_META.deployment.label,
+  incident: BUILTIN_META.incident.label,
+  ticket: BUILTIN_META.ticket.label
 };
 var ENTITY_TONE_CLASS = {
-  service: "text-accent",
-  person: "text-text-muted",
-  document: "text-purple",
-  deployment: "text-ok",
-  incident: "text-err",
-  ticket: "text-warn"
+  service: BUILTIN_META.service.toneClass,
+  person: BUILTIN_META.person.toneClass,
+  document: BUILTIN_META.document.toneClass,
+  deployment: BUILTIN_META.deployment.toneClass,
+  incident: BUILTIN_META.incident.toneClass,
+  ticket: BUILTIN_META.ticket.toneClass
 };
 var ENTITY_TONE_BG = {
-  service: "bg-accent-dim",
-  person: "bg-panel-2",
-  document: "bg-[color-mix(in_oklab,var(--color-purple),transparent_85%)]",
-  deployment: "bg-[color-mix(in_oklab,var(--color-ok),transparent_85%)]",
-  incident: "bg-[color-mix(in_oklab,var(--color-err),transparent_85%)]",
-  ticket: "bg-[color-mix(in_oklab,var(--color-warn),transparent_85%)]"
+  service: BUILTIN_META.service.toneBg,
+  person: BUILTIN_META.person.toneBg,
+  document: BUILTIN_META.document.toneBg,
+  deployment: BUILTIN_META.deployment.toneBg,
+  incident: BUILTIN_META.incident.toneBg,
+  ticket: BUILTIN_META.ticket.toneBg
 };
 
 // src/entity/EntityBadge.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var typeVariant = {
-  service: "accent",
-  person: "neutral",
-  document: "purple",
-  deployment: "ok",
-  incident: "err",
-  ticket: "warn"
-};
 var EntityBadge = (0, import_react8.forwardRef)(function EntityBadge2({ type, label, hideGlyph, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ui12.Badge, { ref, variant: typeVariant[type], className: (0, import_ui13.cn)(className), ...props, children: [
-    !hideGlyph && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "font-mono", children: ENTITY_GLYPH[type] }),
-    children ?? label ?? ENTITY_LABEL[type]
-  ] });
+  const meta = getEntityTypeMeta(type);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_ui12.Badge,
+    {
+      ref,
+      variant: meta.badgeVariant,
+      "data-entity-type": type,
+      className: (0, import_ui13.cn)(className),
+      ...props,
+      children: [
+        !hideGlyph && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "font-mono", children: meta.glyph }),
+        children ?? label ?? meta.label
+      ]
+    }
+  );
 });
 EntityBadge.displayName = "EntityBadge";
 
 // src/entity/EntityCard.tsx
-var import_react9 = require("react");
 var import_ui14 = require("@ship-it-ui/ui");
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var statToneClass = {
   accent: "text-accent",
@@ -516,10 +648,12 @@ var statToneClass = {
   muted: "text-text-muted"
 };
 var EntityCard = (0, import_react9.forwardRef)(function EntityCard2({ type, title, subtitle, description, stats, actions, glyph, className, ...props }, ref) {
+  const meta = getEntityTypeMeta(type);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref,
+      "data-entity-type": type,
       className: (0, import_ui14.cn)(
         "rounded-base border-border bg-panel flex flex-col gap-3 border p-5",
         className
@@ -533,10 +667,10 @@ var EntityCard = (0, import_react9.forwardRef)(function EntityCard2({ type, titl
               "aria-hidden": true,
               className: (0, import_ui14.cn)(
                 "rounded-base grid h-12 w-12 shrink-0 place-items-center text-[20px]",
-                ENTITY_TONE_BG[type],
-                ENTITY_TONE_CLASS[type]
+                meta.toneBg,
+                meta.toneClass
               ),
-              children: glyph ?? ENTITY_GLYPH[type]
+              children: glyph ?? meta.glyph
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "min-w-0 flex-1", children: [
@@ -576,8 +710,8 @@ var EntityCard = (0, import_react9.forwardRef)(function EntityCard2({ type, titl
 EntityCard.displayName = "EntityCard";
 
 // src/entity/EntityListRow.tsx
-var import_react10 = require("react");
 var import_ui15 = require("@ship-it-ui/ui");
+var import_react10 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var baseClassNames = (interactive, className) => (0, import_ui15.cn)(
   "flex w-full items-center gap-3 border-0 bg-transparent px-2 py-2 text-left",
@@ -592,15 +726,9 @@ function RowInner({
   meta,
   hideGlyph
 }) {
+  const typeMeta = getEntityTypeMeta(type);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    !hideGlyph && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "span",
-      {
-        "aria-hidden": true,
-        className: (0, import_ui15.cn)("font-mono text-[14px] leading-none", ENTITY_TONE_CLASS[type]),
-        children: ENTITY_GLYPH[type]
-      }
-    ),
+    !hideGlyph && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": true, className: (0, import_ui15.cn)("font-mono text-[14px] leading-none", typeMeta.toneClass), children: typeMeta.glyph }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-text min-w-0 flex-1 truncate font-mono text-[12px]", children: name }),
     relation && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "border-border bg-panel-2 text-text-muted rounded-full border px-2 py-[2px] font-mono text-[10px]", children: relation }),
     meta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: meta })
@@ -608,7 +736,16 @@ function RowInner({
 }
 var EntityListRowDiv = (0, import_react10.forwardRef)(
   function EntityListRowDiv2({ type, name, relation, meta, hideGlyph, className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: baseClassNames(false, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RowInner, { type, name, relation, meta, hideGlyph }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref,
+        "data-entity-type": type,
+        className: baseClassNames(false, className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RowInner, { type, name, relation, meta, hideGlyph })
+      }
+    );
   }
 );
 EntityListRowDiv.displayName = "EntityListRowDiv";
@@ -619,6 +756,7 @@ var EntityListRowButton = (0, import_react10.forwardRef)(
       {
         ref,
         type: "button",
+        "data-entity-type": type,
         onClick,
         className: baseClassNames(true, className),
         ...props,
@@ -704,8 +842,8 @@ var GraphEdge = (0, import_react11.forwardRef)(function GraphEdge2({ x1, y1, x2,
 GraphEdge.displayName = "GraphEdge";
 
 // src/graph/GraphInspector.tsx
-var import_react12 = require("react");
 var import_ui16 = require("@ship-it-ui/ui");
+var import_react12 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var GraphInspector = (0, import_react12.forwardRef)(
   function GraphInspector2({
@@ -771,21 +909,13 @@ var GraphInspector = (0, import_react12.forwardRef)(
 GraphInspector.displayName = "GraphInspector";
 
 // src/graph/GraphLegend.tsx
-var import_react13 = require("react");
 var import_ui17 = require("@ship-it-ui/ui");
+var import_react13 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var typeColorVar = {
-  service: "var(--color-accent)",
-  person: "var(--color-purple)",
-  document: "var(--color-pink)",
-  deployment: "var(--color-ok)",
-  incident: "var(--color-warn)",
-  ticket: "var(--color-text-muted)"
-};
 var DEFAULT_ENTRIES = [
-  { type: "service", label: ENTITY_LABEL.service },
-  { type: "person", label: ENTITY_LABEL.person },
-  { type: "document", label: ENTITY_LABEL.document }
+  { type: "service" },
+  { type: "person" },
+  { type: "document" }
 ];
 var GraphLegend = (0, import_react13.forwardRef)(function GraphLegend2({ entries = DEFAULT_ENTRIES, heading = "Legend", className, children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -800,10 +930,12 @@ var GraphLegend = (0, import_react13.forwardRef)(function GraphLegend2({ entries
       children: [
         heading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-text-dim font-mono text-[9px] tracking-[1.4px] uppercase", children: heading }),
         children ?? entries.map((entry, i) => {
-          const color = entry.color ?? (entry.type ? typeColorVar[entry.type] : "currentColor");
+          const meta = entry.type ? getEntityTypeMeta(entry.type) : void 0;
+          const color = entry.color ?? meta?.colorVar ?? "currentColor";
+          const label = entry.label ?? meta?.label ?? "";
           return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-[6px]", children: [
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, className: "h-2 w-2 rounded-full", style: { background: color } }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: entry.label })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: label })
           ] }, i);
         })
       ]
@@ -813,8 +945,8 @@ var GraphLegend = (0, import_react13.forwardRef)(function GraphLegend2({ entries
 GraphLegend.displayName = "GraphLegend";
 
 // src/graph/GraphMinimap.tsx
-var import_react14 = require("react");
 var import_ui18 = require("@ship-it-ui/ui");
+var import_react14 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var GraphMinimap = (0, import_react14.forwardRef)(function GraphMinimap2({ points, viewport, width = 120, height = 72, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -865,19 +997,12 @@ var GraphMinimap = (0, import_react14.forwardRef)(function GraphMinimap2({ point
 GraphMinimap.displayName = "GraphMinimap";
 
 // src/graph/GraphNode.tsx
-var import_react15 = require("react");
 var import_ui19 = require("@ship-it-ui/ui");
+var import_react15 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var typeColorVar2 = {
-  service: "var(--color-accent)",
-  person: "var(--color-purple)",
-  document: "var(--color-pink)",
-  deployment: "var(--color-ok)",
-  incident: "var(--color-warn)",
-  ticket: "var(--color-text-muted)"
-};
 var GraphNode = (0, import_react15.forwardRef)(function GraphNode2({ type, state = "default", glyph, label, size = 52, pathColor, className, style, ...props }, ref) {
-  const color = state === "path" ? pathColor ?? "var(--color-purple)" : typeColorVar2[type];
+  const meta = getEntityTypeMeta(type);
+  const color = state === "path" ? pathColor ?? "var(--color-purple)" : meta.colorVar;
   const glowPct = state === "hover" ? 50 : 25;
   const opacity = state === "dim" ? 0.35 : 1;
   const showRing = state === "selected" || state === "path";
@@ -908,7 +1033,7 @@ var GraphNode = (0, import_react15.forwardRef)(function GraphNode2({ type, state
               outlineOffset: showRing ? 4 : void 0,
               opacity
             },
-            children: glyph ?? ENTITY_GLYPH[type]
+            children: glyph ?? meta.glyph
           }
         ),
         label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: label })
@@ -953,8 +1078,8 @@ var PathOverlay = (0, import_react16.forwardRef)(function PathOverlay2({ points,
 PathOverlay.displayName = "PathOverlay";
 
 // src/marketing/CTAStrip.tsx
-var import_react17 = require("react");
 var import_ui20 = require("@ship-it-ui/ui");
+var import_react17 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var CTAStrip = (0, import_react17.forwardRef)(function CTAStrip2({ title, description, actions, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -978,8 +1103,8 @@ var CTAStrip = (0, import_react17.forwardRef)(function CTAStrip2({ title, descri
 CTAStrip.displayName = "CTAStrip";
 
 // src/marketing/FeatureGrid.tsx
-var import_react18 = require("react");
 var import_ui21 = require("@ship-it-ui/ui");
+var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var colsClass = {
   2: "md:grid-cols-2",
@@ -1004,8 +1129,8 @@ var FeatureGrid = (0, import_react18.forwardRef)(function FeatureGrid2({ feature
 FeatureGrid.displayName = "FeatureGrid";
 
 // src/marketing/Footer.tsx
-var import_react19 = require("react");
 var import_ui22 = require("@ship-it-ui/ui");
+var import_react19 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Footer = (0, import_react19.forwardRef)(function Footer2({ brand, columns, copyright, closing, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("footer", { ref, className: (0, import_ui22.cn)("px-7 py-7", className), ...props, children: [
@@ -1033,8 +1158,8 @@ var Footer = (0, import_react19.forwardRef)(function Footer2({ brand, columns, c
 Footer.displayName = "Footer";
 
 // src/marketing/Hero.tsx
-var import_react20 = require("react");
 var import_ui23 = require("@ship-it-ui/ui");
+var import_react20 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Hero = (0, import_react20.forwardRef)(function Hero2({ eyebrow, title, description, actions, visual, className, ...props }, ref) {
   const hasVisual = visual != null;
@@ -1072,8 +1197,8 @@ var Hero = (0, import_react20.forwardRef)(function Hero2({ eyebrow, title, descr
 Hero.displayName = "Hero";
 
 // src/marketing/PricingCard.tsx
-var import_react21 = require("react");
 var import_ui24 = require("@ship-it-ui/ui");
+var import_react21 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var PricingCard = (0, import_react21.forwardRef)(function PricingCard2({ tier, price, priceUnit, description, features, action, featured, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -1111,8 +1236,8 @@ PricingCard.displayName = "PricingCard";
 
 // src/marketing/Testimonial.tsx
 var import_ui25 = require("@ship-it-ui/ui");
-var import_react22 = require("react");
 var import_ui26 = require("@ship-it-ui/ui");
+var import_react22 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var Testimonial = (0, import_react22.forwardRef)(function Testimonial2({ quote, author, role, avatar, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -1137,23 +1262,121 @@ var Testimonial = (0, import_react22.forwardRef)(function Testimonial2({ quote,
 });
 Testimonial.displayName = "Testimonial";
 
-// src/data/EntityTable.tsx
+// src/data/ConnectorCard.tsx
+var import_icons = require("@ship-it-ui/icons");
 var import_ui27 = require("@ship-it-ui/ui");
 var import_react23 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var statusDot = {
+  connected: "ok",
+  syncing: "sync",
+  error: "err",
+  disconnected: "off"
+};
+var statusLabel = {
+  connected: "Connected",
+  syncing: "Syncing",
+  error: "Error",
+  disconnected: "Disconnected"
+};
+var ConnectorCard = (0, import_react23.forwardRef)(function ConnectorCard2({
+  connector,
+  name,
+  status,
+  lastSyncedAt,
+  relativeNow,
+  summary,
+  actions,
+  onClick,
+  accessibleName,
+  className,
+  ...props
+}, ref) {
+  const interactive = typeof onClick === "function";
+  const time = lastSyncedAt ? (0, import_ui27.formatRelative)(lastSyncedAt, relativeNow ?? /* @__PURE__ */ new Date()) : "";
+  const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "bg-panel-2 grid h-10 w-10 shrink-0 place-items-center rounded-md font-mono text-[16px]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons.IconGlyph, { name: connector, kind: "connector" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-[14px] font-medium", children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_ui27.StatusDot,
+          {
+            state: statusDot[status],
+            pulse: status === "syncing",
+            label: statusLabel[status]
+          }
+        )
+      ] }),
+      (summary || time) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "text-text-muted mt-[2px] flex items-center gap-2 text-[12px]", children: [
+        summary && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: summary }),
+        summary && time && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: "\xB7" }),
+        time && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("time", { className: "text-text-dim font-mono text-[11px]", children: [
+          "last synced ",
+          time
+        ] })
+      ] })
+    ] })
+  ] });
+  const labelRegionClass = (0, import_ui27.cn)(
+    "flex flex-1 items-start gap-3 rounded-md p-1 text-left transition-colors duration-(--duration-micro)",
+    interactive && "hover:bg-panel-2 focus-visible:ring-accent-dim cursor-pointer outline-none focus-visible:ring-[3px]"
+  );
+  const labelRegion = interactive ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": accessibleName ?? (typeof name === "string" ? `${name} connector` : statusLabel[status]),
+      className: labelRegionClass,
+      children: labelBlock
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: labelRegionClass, children: labelBlock });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_ui27.cn)(
+        "rounded-base border-border bg-panel flex items-start gap-2 border p-3",
+        className
+      ),
+      ...props,
+      children: [
+        labelRegion,
+        actions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "shrink-0 self-center pr-1", children: actions })
+      ]
+    }
+  );
+});
+ConnectorCard.displayName = "ConnectorCard";
+
+// src/data/EntityTable.tsx
+var import_ui28 = require("@ship-it-ui/ui");
+var import_react24 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function EntityTable(props) {
   const { rowKey, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui27.DataTable, { ...rest, rowKey: rowKey ?? ((row) => row.id) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui28.DataTable, { ...rest, rowKey: rowKey ?? ((row) => row.id) });
 }
 function entityColumn(options = {}) {
   return {
     key: options.key ?? "name",
     header: options.header ?? "Name",
     accessor: (row) => row.name,
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex items-center gap-2 font-mono", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: ENTITY_TONE_CLASS[row.type], children: ENTITY_GLYPH[row.type] }),
-      row.name
-    ] })
+    cell: (row) => {
+      const meta = getEntityTypeMeta(row.type);
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex items-center gap-2 font-mono", "data-entity-type": row.type, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": true, className: meta.toneClass, children: meta.glyph }),
+        row.name
+      ] });
+    }
   };
 }
 function entityTypeColumn(options = {}) {
@@ -1161,15 +1384,98 @@ function entityTypeColumn(options = {}) {
     key: options.key ?? "type",
     header: options.header ?? "Type",
     accessor: (row) => row.type,
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EntityBadge, { type: row.type, size: "sm" })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EntityBadge, { type: row.type, size: "sm" })
   };
 }
+
+// src/notifications/NotifRow.tsx
+var import_ui29 = require("@ship-it-ui/ui");
+var import_react25 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var toneClass = {
+  ok: "bg-ok",
+  warn: "bg-warn",
+  err: "bg-err",
+  neutral: "bg-accent-text"
+};
+var NotifRow = (0, import_react25.forwardRef)(function NotifRow2({
+  title,
+  body,
+  time,
+  tone = "neutral",
+  unread,
+  isFirst,
+  isLast,
+  href,
+  className,
+  onClick,
+  ...props
+}, ref) {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pt-1", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        className: (0, import_ui29.cn)("h-2 w-2 rounded-full", unread ? toneClass[tone] : "bg-border-strong")
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-[14px] font-medium tracking-tight", children: title }),
+        time != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-text-muted shrink-0 font-mono text-[11px] whitespace-nowrap", children: time })
+      ] }),
+      body && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-text-muted mt-[3px] text-[13px] leading-tight", children: body })
+    ] })
+  ] });
+  const baseClass = (0, import_ui29.cn)(
+    "flex gap-3 p-[14px] bg-panel border-border border-l border-r",
+    isFirst ? "border-t rounded-t-m-card" : "",
+    "border-b",
+    isLast ? "rounded-b-m-card" : "",
+    href || onClick ? "cursor-pointer hover:bg-panel-2" : "",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "a",
+      {
+        ref,
+        href,
+        onClick,
+        className: (0, import_ui29.cn)(
+          baseClass,
+          "text-text focus-visible:ring-accent-dim no-underline outline-none focus-visible:ring-[3px]"
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "button",
+      {
+        type: "button",
+        ref,
+        onClick,
+        className: (0, import_ui29.cn)(
+          baseClass,
+          "focus-visible:ring-accent-dim text-left outline-none focus-visible:ring-[3px]"
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: baseClass, ...props, children: content });
+});
+NotifRow.displayName = "NotifRow";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AskBar,
   CTAStrip,
   Citation,
   ConfidenceIndicator,
+  ConnectorCard,
   CopilotMessage,
   ENTITY_GLYPH,
   ENTITY_LABEL,
@@ -1189,6 +1495,7 @@ function entityTypeColumn(options = {}) {
   GraphMinimap,
   GraphNode,
   Hero,
+  NotifRow,
   PathOverlay,
   PricingCard,
   ReasoningBlock,
@@ -1198,6 +1505,11 @@ function entityTypeColumn(options = {}) {
   ToolCallCard,
   cn,
   entityColumn,
-  entityTypeColumn
+  entityTypeColumn,
+  getEntityTypeMeta,
+  listEntityTypes,
+  registerEntityType,
+  registerEntityTypes,
+  resetEntityTypeRegistry
 });
 //# sourceMappingURL=index.cjs.map