@handled-ai/design-system 0.18.1 → 0.18.3

package/src/prototype/prototype-inbox-view.tsx

@@ -150,6 +150,16 @@ export interface DetailViewProps {
   onRequestApproval?: () => Promise<void>
   /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
   attentionCount?: number
+  /** Label for the system-events toggle button (e.g. "Score changes"). */
+  timelineSystemEventsToggleLabel?: string
+  /** localStorage key for persisting the system-events toggle state. */
+  timelineSystemEventsStorageKey?: string
+  /** Whether system-noise events are visible by default. @default false */
+  timelineSystemEventsDefaultVisible?: boolean
+  /** Hint text shown below the timeline when system events are hidden. */
+  timelineSystemEventsHiddenHint?: string
+  /** Hint text shown below the timeline when system events are visible. Uses {count} as placeholder. */
+  timelineSystemEventsVisibleHint?: string
 }
 
 export function DetailView({
@@ -184,10 +194,47 @@ export function DetailView({
   opportunityPreview,
   onRequestApproval,
   attentionCount,
+  timelineSystemEventsToggleLabel,
+  timelineSystemEventsStorageKey,
+  timelineSystemEventsDefaultVisible = false,
+  timelineSystemEventsHiddenHint,
+  timelineSystemEventsVisibleHint,
 }: DetailViewProps) {
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
 
+  // ---- System-noise toggle state ----
+  const [showSystemEvents, setShowSystemEvents] = React.useState(timelineSystemEventsDefaultVisible)
+  const initialReadDoneRef = React.useRef(false)
+
+  // Read persisted value from localStorage on mount
+  React.useEffect(() => {
+    if (!timelineSystemEventsStorageKey) {
+      initialReadDoneRef.current = true
+      return
+    }
+    try {
+      const stored = localStorage.getItem(timelineSystemEventsStorageKey)
+      if (stored !== null) {
+        setShowSystemEvents(stored === "true")
+      }
+    } catch {
+      // localStorage unavailable — ignore
+    }
+    initialReadDoneRef.current = true
+  }, [timelineSystemEventsStorageKey])
+
+  // Write to localStorage when the toggle changes (skip initial if matching default)
+  React.useEffect(() => {
+    if (!timelineSystemEventsStorageKey) return
+    if (!initialReadDoneRef.current) return
+    try {
+      localStorage.setItem(timelineSystemEventsStorageKey, String(showSystemEvents))
+    } catch {
+      // localStorage unavailable — ignore
+    }
+  }, [showSystemEvents, timelineSystemEventsStorageKey])
+
   React.useEffect(() => {
     setShowTimeline(false)
     setExtraActions([])
@@ -351,38 +398,92 @@ export function DetailView({
           {renderAfterScore?.(item)}
 
           {/* Activity Timeline */}
-          {sections.timeline && timelineEvents.length > 0 && (
-            <div className="mb-8">
-              <button
-                type="button"
-                onClick={() => setShowTimeline((prev) => !prev)}
-                className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer"
-              >
-                <div className="flex items-center gap-2">
-                  <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
-                  {!showTimeline && attentionCount != null && attentionCount > 0 && (
-                    <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
-                      {attentionCount} new
-                    </span>
-                  )}
-                  {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (
-                    <span className="text-[11px] text-muted-foreground/60">
-                      &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}
-                    </span>
+          {sections.timeline && timelineEvents.length > 0 && (() => {
+            const visibleEvents = timelineEvents.filter(
+              (e) => !e.isSystemNoise || showSystemEvents,
+            )
+            const hiddenCount = timelineEvents.filter((e) => e.isSystemNoise).length
+            const hasSystemNoise = hiddenCount > 0
+            const showToggle =
+              hasSystemNoise &&
+              !!(timelineSystemEventsToggleLabel || timelineSystemEventsStorageKey)
+            const firstVisibleTime =
+              lastActivityTime ?? (visibleEvents.length > 0 ? visibleEvents[0].time : "")
+            const visibleCount = visibleEvents.length
+            const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`
+
+            return (
+              <div className="mb-8">
+                {/* Header — outer non-interactive container */}
+                <div
+                  className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2"
+                  data-testid="timeline-header"
+                >
+                  {/* Left: collapse/expand button */}
+                  <button
+                    type="button"
+                    onClick={() => setShowTimeline((prev) => !prev)}
+                    className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
+                    data-testid="timeline-collapse-btn"
+                  >
+                    <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
+                    {!showTimeline && attentionCount != null && attentionCount > 0 && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
+                        {attentionCount} new
+                      </span>
+                    )}
+                    {!showTimeline && firstVisibleTime && (
+                      <span className="text-[11px] text-muted-foreground/60" data-testid="last-activity-hint">
+                        &middot; Last activity {firstVisibleTime}
+                      </span>
+                    )}
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[11px] font-medium text-muted-foreground" data-testid="event-count">{eventCountLabel}</span>
+                      <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
+                    </div>
+                  </button>
+
+                  {/* Right: system-events toggle */}
+                  {showToggle && (
+                    <button
+                      type="button"
+                      onClick={() => setShowSystemEvents((prev) => !prev)}
+                      className="flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer"
+                      aria-pressed={showSystemEvents}
+                      data-testid="system-events-toggle"
+                    >
+                      {timelineSystemEventsToggleLabel ?? "System events"}
+                      <span
+                        className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums"
+                        data-testid="hidden-count-badge"
+                      >
+                        {hiddenCount}
+                      </span>
+                    </button>
                   )}
                 </div>
-                <div className="flex items-center gap-1.5">
-                  <span className="text-[11px] font-medium text-muted-foreground">{timelineEvents.length} events</span>
-                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
-                </div>
-              </button>
-              {showTimeline && (
-                <div className="mt-3">
-                  <TimelineActivity events={timelineEvents} />
-                </div>
-              )}
-            </div>
-          )}
+
+                {/* Timeline body */}
+                {showTimeline && visibleEvents.length > 0 && (
+                  <div className="mt-3">
+                    <TimelineActivity events={visibleEvents} />
+                  </div>
+                )}
+
+                {/* Footer hint */}
+                {showTimeline && !showSystemEvents && timelineSystemEventsHiddenHint && hasSystemNoise && (
+                  <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
+                    {timelineSystemEventsHiddenHint}
+                  </p>
+                )}
+                {showTimeline && showSystemEvents && timelineSystemEventsVisibleHint && hasSystemNoise && (
+                  <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
+                    {timelineSystemEventsVisibleHint.replace("{count}", String(hiddenCount))}
+                  </p>
+                )}
+              </div>
+            )
+          })()}
         </div>
 
         {/* Suggested Actions */}

package/dist/charts/empty-chart-state.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface EmptyChartStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-}
-declare function EmptyChartState({ title, description, icon, action, className, ...props }: EmptyChartStateProps): React.JSX.Element;
-
-export { EmptyChartState, type EmptyChartStateProps };

package/dist/charts/empty-chart-state.js

@@ -1,70 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { jsx, jsxs } from "react/jsx-runtime";
-import { BarChart3 } from "lucide-react";
-import { cn } from "../lib/utils.js";
-function EmptyChartState(_a) {
-  var _b = _a, {
-    title = "No chart data",
-    description = "Try adjusting filters or selecting a different time range.",
-    icon,
-    action,
-    className
-  } = _b, props = __objRest(_b, [
-    "title",
-    "description",
-    "icon",
-    "action",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "empty-chart-state",
-      className: cn(
-        "flex min-h-[240px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/30 p-8 text-center",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx("div", { "data-slot": "empty-chart-state-icon", className: "mb-3 text-muted-foreground [&>svg]:h-10 [&>svg]:w-10", children: icon != null ? icon : /* @__PURE__ */ jsx(BarChart3, { "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx("div", { "data-slot": "empty-chart-state-title", className: "text-sm font-semibold text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx("div", { "data-slot": "empty-chart-state-description", className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ jsx("div", { "data-slot": "empty-chart-state-action", className: "mt-4", children: action }) : null
-      ]
-    })
-  );
-}
-export {
-  EmptyChartState
-};
-//# sourceMappingURL=empty-chart-state.js.map

package/dist/charts/empty-chart-state.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/charts/empty-chart-state.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { BarChart3 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface EmptyChartStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: React.ReactNode\n  description?: React.ReactNode\n  icon?: React.ReactNode\n  action?: React.ReactNode\n}\n\nexport function EmptyChartState({\n  title = \"No chart data\",\n  description = \"Try adjusting filters or selecting a different time range.\",\n  icon,\n  action,\n  className,\n  ...props\n}: EmptyChartStateProps) {\n  return (\n    <div\n      data-slot=\"empty-chart-state\"\n      className={cn(\n        \"flex min-h-[240px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/30 p-8 text-center\",\n        className\n      )}\n      {...props}\n    >\n      <div data-slot=\"empty-chart-state-icon\" className=\"mb-3 text-muted-foreground [&>svg]:h-10 [&>svg]:w-10\">\n        {icon ?? <BarChart3 aria-hidden=\"true\" />}\n      </div>\n      <div data-slot=\"empty-chart-state-title\" className=\"text-sm font-semibold text-foreground\">\n        {title}\n      </div>\n      {description ? (\n        <div data-slot=\"empty-chart-state-description\" className=\"mt-1 max-w-sm text-sm text-muted-foreground\">\n          {description}\n        </div>\n      ) : null}\n      {action ? <div data-slot=\"empty-chart-state-action\" className=\"mt-4\">{action}</div> : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBI,SASa,KATb;AApBJ,SAAS,iBAAiB;AAE1B,SAAS,UAAU;AASZ,SAAS,gBAAgB,IAOP;AAPO,eAC9B;AAAA,YAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EAjBF,IAYgC,IAM3B,kBAN2B,IAM3B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI,QANL;AAAA,MAQC;AAAA,4BAAC,SAAI,aAAU,0BAAyB,WAAU,wDAC/C,gCAAQ,oBAAC,aAAU,eAAY,QAAO,GACzC;AAAA,QACA,oBAAC,SAAI,aAAU,2BAA0B,WAAU,yCAChD,iBACH;AAAA,QACC,cACC,oBAAC,SAAI,aAAU,iCAAgC,WAAU,+CACtD,uBACH,IACE;AAAA,QACH,SAAS,oBAAC,SAAI,aAAU,4BAA2B,WAAU,QAAQ,kBAAO,IAAS;AAAA;AAAA;AAAA,EACxF;AAEJ;","names":[]}

package/dist/components/days-open-cell.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { PillStatus } from './pill.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-
-interface DaysOpenCellProps extends React.HTMLAttributes<HTMLDivElement> {
-    days: number | null | undefined;
-    warningAt?: number;
-    criticalAt?: number;
-    emptyLabel?: string;
-    suffix?: string;
-}
-declare function getDaysOpenIntent(days: number, warningAt: number, criticalAt: number): PillStatus;
-declare function DaysOpenCell({ days, warningAt, criticalAt, emptyLabel, suffix, className, ...props }: DaysOpenCellProps): React.JSX.Element;
-
-export { DaysOpenCell, type DaysOpenCellProps, getDaysOpenIntent };

package/dist/components/days-open-cell.js

@@ -1,73 +0,0 @@
-"use client"
-
-"use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-import { StatusPill } from "./pill.js";
-function getDaysOpenIntent(days, warningAt, criticalAt) {
-  if (days >= criticalAt) return "error";
-  if (days >= warningAt) return "warning";
-  return "success";
-}
-function DaysOpenCell(_a) {
-  var _b = _a, {
-    days,
-    warningAt = 7,
-    criticalAt = 30,
-    emptyLabel = "\u2014",
-    suffix = "d open",
-    className
-  } = _b, props = __objRest(_b, [
-    "days",
-    "warningAt",
-    "criticalAt",
-    "emptyLabel",
-    "suffix",
-    "className"
-  ]);
-  if (days === null || days === void 0) {
-    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ "data-slot": "days-open-cell", className: cn("text-sm text-muted-foreground", className) }, props), { children: emptyLabel }));
-  }
-  const intent = getDaysOpenIntent(days, warningAt, criticalAt);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ "data-slot": "days-open-cell", className: cn("inline-flex items-center", className) }, props), { children: /* @__PURE__ */ jsxs(StatusPill, { "data-testid": "days-open-pill", status: `${days} ${suffix}`, intent, children: [
-    days,
-    " ",
-    suffix
-  ] }) }));
-}
-export {
-  DaysOpenCell,
-  getDaysOpenIntent
-};
-//# sourceMappingURL=days-open-cell.js.map

package/dist/components/days-open-cell.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/days-open-cell.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\nimport { StatusPill, type PillStatus } from \"./pill\"\n\nexport interface DaysOpenCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  days: number | null | undefined\n  warningAt?: number\n  criticalAt?: number\n  emptyLabel?: string\n  suffix?: string\n}\n\nfunction getDaysOpenIntent(days: number, warningAt: number, criticalAt: number): PillStatus {\n  if (days >= criticalAt) return \"error\"\n  if (days >= warningAt) return \"warning\"\n  return \"success\"\n}\n\nexport function DaysOpenCell({\n  days,\n  warningAt = 7,\n  criticalAt = 30,\n  emptyLabel = \"—\",\n  suffix = \"d open\",\n  className,\n  ...props\n}: DaysOpenCellProps) {\n  if (days === null || days === undefined) {\n    return (\n      <div data-slot=\"days-open-cell\" className={cn(\"text-sm text-muted-foreground\", className)} {...props}>\n        {emptyLabel}\n      </div>\n    )\n  }\n\n  const intent = getDaysOpenIntent(days, warningAt, criticalAt)\n\n  return (\n    <div data-slot=\"days-open-cell\" className={cn(\"inline-flex items-center\", className)} {...props}>\n      <StatusPill data-testid=\"days-open-pill\" status={`${days} ${suffix}`} intent={intent}>\n        {days} {suffix}\n      </StatusPill>\n    </div>\n  )\n}\n\nexport { getDaysOpenIntent }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCM,cAUA,YAVA;AA5BN,SAAS,UAAU;AACnB,SAAS,kBAAmC;AAU5C,SAAS,kBAAkB,MAAc,WAAmB,YAAgC;AAC1F,MAAI,QAAQ,WAAY,QAAO;AAC/B,MAAI,QAAQ,UAAW,QAAO;AAC9B,SAAO;AACT;AAEO,SAAS,aAAa,IAQP;AARO,eAC3B;AAAA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,EA3BF,IAqB6B,IAOxB,kBAPwB,IAOxB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC,WACE,oBAAC,sCAAI,aAAU,kBAAiB,WAAW,GAAG,iCAAiC,SAAS,KAAO,QAA9F,EACE,uBACH;AAAA,EAEJ;AAEA,QAAM,SAAS,kBAAkB,MAAM,WAAW,UAAU;AAE5D,SACE,oBAAC,sCAAI,aAAU,kBAAiB,WAAW,GAAG,4BAA4B,SAAS,KAAO,QAAzF,EACC,+BAAC,cAAW,eAAY,kBAAiB,QAAQ,GAAG,IAAI,IAAI,MAAM,IAAI,QACnE;AAAA;AAAA,IAAK;AAAA,IAAE;AAAA,KACV,IACF;AAEJ;","names":[]}

package/dist/components/detail-drawer.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-interface DetailDrawerProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title: React.ReactNode;
-    description?: React.ReactNode;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    side?: "right" | "left";
-    className?: string;
-    contentClassName?: string;
-}
-declare function DetailDrawer({ open, onOpenChange, title, description, children, footer, side, className, contentClassName, }: DetailDrawerProps): React.JSX.Element;
-
-export { DetailDrawer, type DetailDrawerProps };

package/dist/components/detail-drawer.js

@@ -1,45 +0,0 @@
-"use client"
-
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle
-} from "./sheet.js";
-function DetailDrawer({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  side = "right",
-  className,
-  contentClassName
-}) {
-  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    SheetContent,
-    {
-      "data-slot": "detail-drawer",
-      side,
-      className: cn("w-full gap-0 p-0 sm:max-w-xl", className),
-      children: [
-        /* @__PURE__ */ jsxs(SheetHeader, { "data-slot": "detail-drawer-header", className: "border-b border-border p-5", children: [
-          /* @__PURE__ */ jsx(SheetTitle, { children: title }),
-          description ? /* @__PURE__ */ jsx(SheetDescription, { children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsx("div", { "data-slot": "detail-drawer-content", className: cn("flex-1 overflow-y-auto p-5", contentClassName), children }),
-        footer ? /* @__PURE__ */ jsx(SheetFooter, { "data-slot": "detail-drawer-footer", className: "border-t border-border p-5", children: footer }) : null
-      ]
-    }
-  ) });
-}
-export {
-  DetailDrawer
-};
-//# sourceMappingURL=detail-drawer.js.map

package/dist/components/detail-drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/detail-drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n} from \"./sheet\"\n\nexport interface DetailDrawerProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title: React.ReactNode\n  description?: React.ReactNode\n  children: React.ReactNode\n  footer?: React.ReactNode\n  side?: \"right\" | \"left\"\n  className?: string\n  contentClassName?: string\n}\n\nexport function DetailDrawer({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  side = \"right\",\n  className,\n  contentClassName,\n}: DetailDrawerProps) {\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        data-slot=\"detail-drawer\"\n        side={side}\n        className={cn(\"w-full gap-0 p-0 sm:max-w-xl\", className)}\n      >\n        <SheetHeader data-slot=\"detail-drawer-header\" className=\"border-b border-border p-5\">\n          <SheetTitle>{title}</SheetTitle>\n          {description ? <SheetDescription>{description}</SheetDescription> : null}\n        </SheetHeader>\n        <div data-slot=\"detail-drawer-content\" className={cn(\"flex-1 overflow-y-auto p-5\", contentClassName)}>\n          {children}\n        </div>\n        {footer ? (\n          <SheetFooter data-slot=\"detail-drawer-footer\" className=\"border-t border-border p-5\">\n            {footer}\n          </SheetFooter>\n        ) : null}\n      </SheetContent>\n    </Sheet>\n  )\n}\n"],"mappings":";AA4CQ,SACE,KADF;AAxCR,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcA,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAsB;AACpB,SACE,oBAAC,SAAM,MAAY,cACjB;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,MAEvD;AAAA,6BAAC,eAAY,aAAU,wBAAuB,WAAU,8BACtD;AAAA,8BAAC,cAAY,iBAAM;AAAA,UAClB,cAAc,oBAAC,oBAAkB,uBAAY,IAAsB;AAAA,WACtE;AAAA,QACA,oBAAC,SAAI,aAAU,yBAAwB,WAAW,GAAG,8BAA8B,gBAAgB,GAChG,UACH;AAAA,QACC,SACC,oBAAC,eAAY,aAAU,wBAAuB,WAAU,8BACrD,kBACH,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;","names":[]}

package/dist/components/linked-entity-cell.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
-    name: React.ReactNode;
-    href?: string;
-    subtitle?: React.ReactNode;
-    meta?: React.ReactNode;
-    icon?: React.ReactNode;
-    external?: boolean;
-    onNavigate?: () => void;
-}
-declare function LinkedEntityCell({ name, href, subtitle, meta, icon, external, onNavigate, className, ...props }: LinkedEntityCellProps): React.JSX.Element;
-
-export { LinkedEntityCell, type LinkedEntityCellProps };

package/dist/components/linked-entity-cell.js

@@ -1,96 +0,0 @@
-"use client"
-
-"use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ExternalLink } from "lucide-react";
-import { cn } from "../lib/utils.js";
-function LinkedEntityCell(_a) {
-  var _b = _a, {
-    name,
-    href,
-    subtitle,
-    meta,
-    icon,
-    external = false,
-    onNavigate,
-    className
-  } = _b, props = __objRest(_b, [
-    "name",
-    "href",
-    "subtitle",
-    "meta",
-    "icon",
-    "external",
-    "onNavigate",
-    "className"
-  ]);
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
-    external ? /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": "true" }) : null
-  ] });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-slot": "linked-entity-cell",
-      className: cn("flex min-w-0 items-center gap-2", className)
-    }, props), {
-      children: [
-        icon ? /* @__PURE__ */ jsx("span", { "data-slot": "linked-entity-cell-icon", className: "shrink-0 text-muted-foreground", children: icon }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          href ? /* @__PURE__ */ jsx(
-            "a",
-            {
-              "data-slot": "linked-entity-cell-link",
-              href,
-              target: external ? "_blank" : void 0,
-              rel: external ? "noreferrer" : void 0,
-              onClick: onNavigate,
-              className: "inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline",
-              children: content
-            }
-          ) : /* @__PURE__ */ jsx("span", { "data-slot": "linked-entity-cell-name", className: "block truncate font-medium text-foreground", children: name }),
-          subtitle || meta ? /* @__PURE__ */ jsxs("div", { "data-slot": "linked-entity-cell-meta", className: "mt-0.5 truncate text-xs text-muted-foreground", children: [
-            subtitle,
-            subtitle && meta ? /* @__PURE__ */ jsx("span", { className: "px-1", children: "\xB7" }) : null,
-            meta
-          ] }) : null
-        ] })
-      ]
-    })
-  );
-}
-export {
-  LinkedEntityCell
-};
-//# sourceMappingURL=linked-entity-cell.js.map

package/dist/components/linked-entity-cell.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/linked-entity-cell.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: React.ReactNode\n  href?: string\n  subtitle?: React.ReactNode\n  meta?: React.ReactNode\n  icon?: React.ReactNode\n  external?: boolean\n  onNavigate?: () => void\n}\n\nexport function LinkedEntityCell({\n  name,\n  href,\n  subtitle,\n  meta,\n  icon,\n  external = false,\n  onNavigate,\n  className,\n  ...props\n}: LinkedEntityCellProps) {\n  const content = (\n    <>\n      <span className=\"truncate\">{name}</span>\n      {external ? <ExternalLink className=\"h-3 w-3 shrink-0 opacity-60\" aria-hidden=\"true\" /> : null}\n    </>\n  )\n\n  return (\n    <div\n      data-slot=\"linked-entity-cell\"\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      {icon ? (\n        <span data-slot=\"linked-entity-cell-icon\" className=\"shrink-0 text-muted-foreground\">\n          {icon}\n        </span>\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {href ? (\n          <a\n            data-slot=\"linked-entity-cell-link\"\n            href={href}\n            target={external ? \"_blank\" : undefined}\n            rel={external ? \"noreferrer\" : undefined}\n            onClick={onNavigate}\n            className=\"inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline\"\n          >\n            {content}\n          </a>\n        ) : (\n          <span data-slot=\"linked-entity-cell-name\" className=\"block truncate font-medium text-foreground\">\n            {name}\n          </span>\n        )}\n        {subtitle || meta ? (\n          <div data-slot=\"linked-entity-cell-meta\" className=\"mt-0.5 truncate text-xs text-muted-foreground\">\n            {subtitle}\n            {subtitle && meta ? <span className=\"px-1\">·</span> : null}\n            {meta}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BI,mBACE,KADF;AA1BJ,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AAYZ,SAAS,iBAAiB,IAUP;AAVO,eAC/B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAzBF,IAiBiC,IAS5B,kBAT4B,IAS5B;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAK,WAAU,YAAY,gBAAK;AAAA,IAChC,WAAW,oBAAC,gBAAa,WAAU,+BAA8B,eAAY,QAAO,IAAK;AAAA,KAC5F;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,OACtD,QAHL;AAAA,MAKE;AAAA,eACC,oBAAC,UAAK,aAAU,2BAA0B,WAAU,kCACjD,gBACH,IACE;AAAA,QACJ,qBAAC,SAAI,WAAU,kBACZ;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV;AAAA,cACA,QAAQ,WAAW,WAAW;AAAA,cAC9B,KAAK,WAAW,eAAe;AAAA,cAC/B,SAAS;AAAA,cACT,WAAU;AAAA,cAET;AAAA;AAAA,UACH,IAEA,oBAAC,UAAK,aAAU,2BAA0B,WAAU,8CACjD,gBACH;AAAA,UAED,YAAY,OACX,qBAAC,SAAI,aAAU,2BAA0B,WAAU,iDAChD;AAAA;AAAA,YACA,YAAY,OAAO,oBAAC,UAAK,WAAU,QAAO,kBAAC,IAAU;AAAA,YACrD;AAAA,aACH,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/pill.d.ts

@@ -1,26 +0,0 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
-
-/**
- * Insights-friendly pill convenience wrappers.
- *
- * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces
- * such as tables, KPI strips, and filter summaries. They intentionally wrap the
- * existing Badge/StatusBadge visual language and are not a replacement for all
- * Badge usage across the design system.
- */
-type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
-declare const pillVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "warning" | "success" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
-}
-declare function Pill({ className, variant, ...props }: PillProps): React.JSX.Element;
-interface StatusPillProps extends Omit<PillProps, "variant"> {
-    status: React.ReactNode;
-    intent?: PillStatus;
-}
-declare function StatusPill({ status, intent, children, ...props }: StatusPillProps): React.JSX.Element;
-
-export { Pill, type PillProps, type PillStatus, StatusPill, type StatusPillProps, pillVariants };