@flanksource/clicky-ui 0.1.0 → 0.2.2

package/dist/index.js

@@ -0,0 +1,195 @@
+import { cn } from "./lib/utils.js";
+import { AVATAR_PALETTE, fnv1a32, paletteClass } from "./lib/palette.js";
+import { SIZE_TOKENS, resolveSize } from "./lib/size.js";
+import { ThemeProvider, useTheme } from "./hooks/use-theme.js";
+import { DensityProvider, useDensity, useDensityValue } from "./hooks/use-density.js";
+import { useSort } from "./hooks/use-sort.js";
+import { useHistoryRoute } from "./hooks/use-history-route.js";
+import { Button, buttonVariants } from "./components/button.js";
+import { DatePicker } from "./components/DatePicker.js";
+import { DateTimePicker } from "./components/DateTimePicker.js";
+import { RangeSlider } from "./components/RangeSlider.js";
+import { FilterBar } from "./components/FilterBar.js";
+import { MultiSelect } from "./components/MultiSelect.js";
+import { Select } from "./components/select.js";
+import { ThemeSwitcher } from "./components/theme-switcher.js";
+import { DensitySwitcher } from "./components/density-switcher.js";
+import { IconMenuPicker } from "./components/icon-menu-picker.js";
+import { SplitPane } from "./layout/SplitPane.js";
+import { DetailEmptyState, Section } from "./layout/Section.js";
+import { HoverCard } from "./overlay/HoverCard.js";
+import { Modal } from "./overlay/Modal.js";
+import { AnsiHtml } from "./data/AnsiHtml.js";
+import { Avatar } from "./data/Avatar.js";
+import { AvatarBadge } from "./data/AvatarBadge.js";
+import { Badge, badgeVariants } from "./data/Badge.js";
+import { DataTable, inferColumns } from "./data/DataTable.js";
+import { Timestamp, chooseTimestampFormat, formatTimestamp, modeToFormat, parseTimestamp } from "./data/cells/Timestamp.js";
+import { TagActionsProvider, TagList, normalizeTags, splitTagToken, tagActionsFromRecord, tagFilterTokens, useTagActions, useTagActionsValue } from "./data/cells/TagList.js";
+import { StatusDot } from "./data/cells/StatusDot.js";
+import { STATUS_TOKEN_GROUPS, normalizeStatus } from "./data/cells/status-mapping.js";
+import { FilterPill, FilterPillGroup, FilterSeparator } from "./data/FilterPill.js";
+import { Gauge } from "./data/Gauge.js";
+import { Icon, setFallbackIconProvider } from "./data/Icon.js";
+import { JsonView } from "./data/JsonView.js";
+import { KeyValueList } from "./data/KeyValueList.js";
+import { LogViewer } from "./data/LogViewer.js";
+import { LogsTable, normalizeLogsTableRows } from "./data/LogsTable.js";
+import { MatrixTable } from "./data/MatrixTable.js";
+import { Markdown } from "./data/Markdown.js";
+import { MethodBadge } from "./data/MethodBadge.js";
+import { ProgressBar } from "./data/ProgressBar.js";
+import { SortableHeader } from "./data/SortableHeader.js";
+import { TabButton } from "./data/TabButton.js";
+import { Tree } from "./data/Tree.js";
+import { TreeNode } from "./data/TreeNode.js";
+import { TreeGroupHeader } from "./data/TreeGroupHeader.js";
+import { DiagnosticsTree } from "./data/diagnostics/DiagnosticsTree.js";
+import { DiagnosticsDetailPanel } from "./data/diagnostics/DiagnosticsDetailPanel.js";
+import { countProcesses, findProcessByPID, processLabel, processStateColor, processStateIcon } from "./data/diagnostics/utils.js";
+import { countGoroutinesByState, countStackByState, detectDumpFormat, parseGoroutineDump, parseStackDump } from "./data/diagnostics/stacktrace.js";
+import { countThreadsByState, parseJvmThreadDump } from "./data/diagnostics/jvm-stacktrace.js";
+import { JvmStackFrameRow, JvmStackTrace } from "./data/diagnostics/JvmStackTrace.js";
+import { StackTrace } from "./data/diagnostics/RenderedStackTrace.js";
+import { parseJavaStackTrace } from "./data/diagnostics/stacktrace-parse.js";
+import { CopyBadge, ErrorDetails, PrettyStackTrace } from "./data/diagnostics/ErrorDetails.js";
+import { compactStackPath, isApplicationStackFrame, normalizeErrorDiagnostics, parseDiagnosticsStackTrace, parseInlineJsonContextValue } from "./data/diagnostics/error-diagnostics.js";
+import { HarPanel } from "./data/har/HarPanel.js";
+import { Clicky } from "./data/Clicky.js";
+import { OperationCatalog } from "./rpc/OperationCatalog.js";
+import { ACCEPT_OPTIONS, AcceptPicker, VIEW_OPTIONS } from "./rpc/AcceptPicker.js";
+import { CommandForm } from "./rpc/CommandForm.js";
+import { CommandOutput } from "./rpc/CommandOutput.js";
+import { FilterForm } from "./rpc/FilterForm.js";
+import { InlineError } from "./rpc/InlineError.js";
+import { OperationActionDialog } from "./rpc/OperationActionDialog.js";
+import { OperationEntityPage } from "./rpc/OperationEntityPage.js";
+import { OperationCommandPage } from "./rpc/OperationCommandPage.js";
+import { EndpointList } from "./rpc/EndpointList.js";
+import { useOpenAPI, useOperationById, useOperations } from "./rpc/useOperations.js";
+import { filterOperationsByDomain, findDetailEndpoint, findListEndpoint, normalizeRows, parseJsonBody } from "./rpc/classify.js";
+import { isPositionalParam } from "./rpc/types.js";
+export {
+  ACCEPT_OPTIONS,
+  AVATAR_PALETTE,
+  AcceptPicker,
+  AnsiHtml,
+  Avatar,
+  AvatarBadge,
+  Badge,
+  Button,
+  Clicky,
+  CommandForm,
+  CommandOutput,
+  CopyBadge,
+  DataTable,
+  DatePicker,
+  DateTimePicker,
+  DensityProvider,
+  DensitySwitcher,
+  DetailEmptyState,
+  DiagnosticsDetailPanel,
+  DiagnosticsTree,
+  EndpointList,
+  ErrorDetails,
+  FilterBar,
+  FilterForm,
+  FilterPill,
+  FilterPillGroup,
+  FilterSeparator,
+  Gauge,
+  HarPanel,
+  HoverCard,
+  Icon,
+  IconMenuPicker,
+  InlineError,
+  JsonView,
+  JvmStackFrameRow,
+  JvmStackTrace,
+  KeyValueList,
+  LogViewer,
+  LogsTable,
+  Markdown,
+  MatrixTable,
+  MethodBadge,
+  Modal,
+  MultiSelect,
+  OperationActionDialog,
+  OperationCatalog,
+  OperationCommandPage,
+  OperationEntityPage,
+  PrettyStackTrace,
+  ProgressBar,
+  RangeSlider,
+  SIZE_TOKENS,
+  STATUS_TOKEN_GROUPS,
+  Section,
+  Select,
+  SortableHeader,
+  SplitPane,
+  StackTrace,
+  StatusDot,
+  TabButton,
+  TagActionsProvider,
+  TagList,
+  ThemeProvider,
+  ThemeSwitcher,
+  Timestamp,
+  Tree,
+  TreeGroupHeader,
+  TreeNode,
+  VIEW_OPTIONS,
+  badgeVariants,
+  buttonVariants,
+  chooseTimestampFormat,
+  cn,
+  compactStackPath,
+  countGoroutinesByState,
+  countProcesses,
+  countStackByState,
+  countThreadsByState,
+  detectDumpFormat,
+  filterOperationsByDomain,
+  findDetailEndpoint,
+  findListEndpoint,
+  findProcessByPID,
+  fnv1a32,
+  formatTimestamp,
+  inferColumns,
+  isApplicationStackFrame,
+  isPositionalParam,
+  modeToFormat,
+  normalizeErrorDiagnostics,
+  normalizeLogsTableRows,
+  normalizeRows,
+  normalizeStatus,
+  normalizeTags,
+  paletteClass,
+  parseDiagnosticsStackTrace,
+  parseGoroutineDump,
+  parseInlineJsonContextValue,
+  parseJavaStackTrace,
+  parseJsonBody,
+  parseJvmThreadDump,
+  parseStackDump,
+  parseTimestamp,
+  processLabel,
+  processStateColor,
+  processStateIcon,
+  resolveSize,
+  setFallbackIconProvider,
+  splitTagToken,
+  tagActionsFromRecord,
+  tagFilterTokens,
+  useDensity,
+  useDensityValue,
+  useHistoryRoute,
+  useOpenAPI,
+  useOperationById,
+  useOperations,
+  useSort,
+  useTagActions,
+  useTagActionsValue,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/layout/Section.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type SectionProps = {
+    title: ReactNode;
+    summary?: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onToggle?: (open: boolean) => void;
+    icon?: string;
+    tone?: "default" | "danger" | "warning" | "success" | "info";
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    children: ReactNode;
+};
+export declare function Section({ title, summary, defaultOpen, open: openProp, onToggle, icon, tone, className, headerClassName, bodyClassName, children, }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export type DetailEmptyStateProps = {
+    icon?: string;
+    label: ReactNode;
+    description?: ReactNode;
+    className?: string;
+};
+export declare function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Section.d.ts.map

package/dist/layout/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/layout/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,YAAY,2CAsCd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAQ9F"}

package/dist/layout/Section.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-red-500",
+  warning: "border-l-2 border-yellow-500",
+  success: "border-l-2 border-green-500",
+  info: "border-l-2 border-blue-500"
+};
+function Section({
+  title,
+  summary,
+  defaultOpen = false,
+  open: openProp,
+  onToggle,
+  icon,
+  tone = "default",
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const isControlled = openProp !== void 0;
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const open = isControlled ? openProp : innerOpen;
+  function toggle() {
+    const next = !open;
+    if (!isControlled) setInnerOpen(next);
+    onToggle == null ? void 0 : onToggle(next);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md border border-border bg-background", toneRing[tone], className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": open,
+        className: cn(
+          "w-full flex items-center gap-2 px-density-3 py-density-2 text-left",
+          "hover:bg-accent/50 transition-colors",
+          headerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: open ? "codicon:chevron-down" : "codicon:chevron-right",
+              className: "text-muted-foreground text-xs"
+            }
+          ),
+          icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-base" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title }),
+          summary && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: summary })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: cn("px-density-3 py-density-2 border-t border-border", bodyClassName), children })
+  ] });
+}
+function DetailEmptyState({ icon, label, description, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-density-6 text-center text-muted-foreground", className), children: [
+    icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-3xl mb-density-2" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
+  ] });
+}
+export {
+  DetailEmptyState,
+  Section
+};
+//# sourceMappingURL=Section.js.map

package/dist/layout/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\n\nexport type SectionProps = {\n  title: ReactNode;\n  summary?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onToggle?: (open: boolean) => void;\n  icon?: string;\n  tone?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  children: ReactNode;\n};\n\nconst toneRing: Record<NonNullable<SectionProps[\"tone\"]>, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-red-500\",\n  warning: \"border-l-2 border-yellow-500\",\n  success: \"border-l-2 border-green-500\",\n  info: \"border-l-2 border-blue-500\",\n};\n\nexport function Section({\n  title,\n  summary,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = isControlled ? openProp : innerOpen;\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  return (\n    <div className={cn(\"rounded-md border border-border bg-background\", toneRing[tone], className)}>\n      <button\n        type=\"button\"\n        onClick={toggle}\n        aria-expanded={open}\n        className={cn(\n          \"w-full flex items-center gap-2 px-density-3 py-density-2 text-left\",\n          \"hover:bg-accent/50 transition-colors\",\n          headerClassName,\n        )}\n      >\n        <Icon\n          name={open ? \"codicon:chevron-down\" : \"codicon:chevron-right\"}\n          className=\"text-muted-foreground text-xs\"\n        />\n        {icon && <Icon name={icon} className=\"text-base\" />}\n        <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n        {summary && <span className=\"text-xs text-muted-foreground\">{summary}</span>}\n      </button>\n      {open && (\n        <div className={cn(\"px-density-3 py-density-2 border-t border-border\", bodyClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  icon?: string;\n  label: ReactNode;\n  description?: ReactNode;\n  className?: string;\n};\n\nexport function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps) {\n  return (\n    <div className={cn(\"p-density-6 text-center text-muted-foreground\", className)}>\n      {icon && <Icon name={icon} className=\"text-3xl mb-density-2\" />}\n      <p className=\"text-sm\">{label}</p>\n      {description && <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,WAA8D;AAAA,EAClE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AACtD,QAAM,OAAO,eAAe,WAAW;AAEvC,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,iDAAiD,SAAS,IAAI,GAAG,SAAS,GAC3F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,yBAAyB;AAAA,cACtC,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEX,QAAQ,oBAAC,MAAA,EAAK,MAAM,MAAM,WAAU,aAAY;AAAA,UACjD,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,OAAM;AAAA,UAC5D,WAAW,oBAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtE,4BACE,OAAA,EAAI,WAAW,GAAG,oDAAoD,aAAa,GACjF,SAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AASO,SAAS,iBAAiB,EAAE,MAAM,OAAO,aAAa,aAAoC;AAC/F,8BACG,OAAA,EAAI,WAAW,GAAG,iDAAiD,SAAS,GAC1E,UAAA;AAAA,IAAA,QAAQ,oBAAC,MAAA,EAAK,MAAM,MAAM,WAAU,yBAAwB;AAAA,IAC7D,oBAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,IAC7B,eAAe,oBAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,EAAA,GAC9E;AAEJ;"}

package/dist/layout/SplitPane.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type SplitPaneProps = {
+    left: ReactNode;
+    right: ReactNode;
+    defaultSplit?: number;
+    minLeft?: number;
+    minRight?: number;
+    leftClass?: string;
+    rightClass?: string;
+    className?: string;
+};
+export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SplitPane.d.ts.map

package/dist/layout/SplitPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,cAAc,2CAuDhB"}

package/dist/layout/SplitPane.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { cn } from "../lib/utils.js";
+function SplitPane({
+  left,
+  right,
+  defaultSplit = 50,
+  minLeft = 20,
+  minRight = 20,
+  leftClass,
+  rightClass,
+  className
+}) {
+  const [split, setSplit] = useState(defaultSplit);
+  const dragging = useRef(false);
+  const container = useRef(null);
+  const onMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      dragging.current = true;
+      const onMove = (ev) => {
+        if (!dragging.current || !container.current) return;
+        const rect = container.current.getBoundingClientRect();
+        const pct = (ev.clientX - rect.left) / rect.width * 100;
+        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));
+      };
+      const onUp = () => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [minLeft, minRight]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: container, className: cn("flex flex-1 overflow-hidden min-h-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { width: `${split}%` },
+        className: cn("overflow-y-auto bg-background min-h-0", leftClass),
+        children: left
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+        onMouseDown
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { width: `${100 - split}%` },
+        className: cn("overflow-hidden bg-background min-h-0", rightClass),
+        children: right
+      }
+    )
+  ] });
+}
+export {
+  SplitPane
+};
+//# sourceMappingURL=SplitPane.js.map

package/dist/layout/SplitPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.js","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  left: ReactNode;\n  right: ReactNode;\n  defaultSplit?: number;\n  minLeft?: number;\n  minRight?: number;\n  leftClass?: string;\n  rightClass?: string;\n  className?: string;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div ref={container} className={cn(\"flex flex-1 overflow-hidden min-h-0\", className)}>\n      <div\n        style={{ width: `${split}%` }}\n        className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={{ width: `${100 - split}%` }}\n        className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACE,qBAAC,SAAI,KAAK,WAAW,WAAW,GAAG,uCAAuC,SAAS,GACjF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,QACxB,WAAW,GAAG,yCAAyC,SAAS;AAAA,QAE/D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,QAC9B,WAAW,GAAG,yCAAyC,UAAU;AAAA,QAEhE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/lib/palette.d.ts

@@ -0,0 +1,4 @@
+export declare const AVATAR_PALETTE: readonly string[];
+export declare function fnv1a32(s: string): number;
+export declare function paletteClass(key: string): string;
+//# sourceMappingURL=palette.d.ts.map

package/dist/lib/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/lib/palette.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAiB3C,CAAC;AAGF,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAOzC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEhD"}

package/dist/lib/palette.js

@@ -0,0 +1,35 @@
+const AVATAR_PALETTE = [
+  "bg-rose-100 text-rose-700",
+  "bg-pink-100 text-pink-700",
+  "bg-fuchsia-100 text-fuchsia-700",
+  "bg-purple-100 text-purple-700",
+  "bg-violet-100 text-violet-700",
+  "bg-indigo-100 text-indigo-700",
+  "bg-blue-100 text-blue-700",
+  "bg-sky-100 text-sky-700",
+  "bg-cyan-100 text-cyan-700",
+  "bg-teal-100 text-teal-700",
+  "bg-emerald-100 text-emerald-700",
+  "bg-green-100 text-green-700",
+  "bg-lime-100 text-lime-800",
+  "bg-amber-100 text-amber-800",
+  "bg-orange-100 text-orange-700",
+  "bg-red-100 text-red-700"
+];
+function fnv1a32(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function paletteClass(key) {
+  return AVATAR_PALETTE[fnv1a32(key) % AVATAR_PALETTE.length];
+}
+export {
+  AVATAR_PALETTE,
+  fnv1a32,
+  paletteClass
+};
+//# sourceMappingURL=palette.js.map

package/dist/lib/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","sources":["../../src/lib/palette.ts"],"sourcesContent":["// 16 Tailwind bg/text pairs chosen for WCAG AA contrast at small avatar sizes.\n// Add/remove entries carefully — the index is hash-derived and must stay stable.\nexport const AVATAR_PALETTE: readonly string[] = [\n  \"bg-rose-100 text-rose-700\",\n  \"bg-pink-100 text-pink-700\",\n  \"bg-fuchsia-100 text-fuchsia-700\",\n  \"bg-purple-100 text-purple-700\",\n  \"bg-violet-100 text-violet-700\",\n  \"bg-indigo-100 text-indigo-700\",\n  \"bg-blue-100 text-blue-700\",\n  \"bg-sky-100 text-sky-700\",\n  \"bg-cyan-100 text-cyan-700\",\n  \"bg-teal-100 text-teal-700\",\n  \"bg-emerald-100 text-emerald-700\",\n  \"bg-green-100 text-green-700\",\n  \"bg-lime-100 text-lime-800\",\n  \"bg-amber-100 text-amber-800\",\n  \"bg-orange-100 text-orange-700\",\n  \"bg-red-100 text-red-700\",\n];\n\n// Deterministic 32-bit FNV-1a hash. Same input → same output across sessions.\nexport function fnv1a32(s: string): number {\n  let h = 0x811c9dc5;\n  for (let i = 0; i < s.length; i++) {\n    h ^= s.charCodeAt(i);\n    h = Math.imul(h, 0x01000193);\n  }\n  return h >>> 0;\n}\n\nexport function paletteClass(key: string): string {\n  return AVATAR_PALETTE[fnv1a32(key) % AVATAR_PALETTE.length]!;\n}\n"],"names":[],"mappings":"AAEO,MAAM,iBAAoC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,SAAS,QAAQ,GAAmB;AACzC,MAAI,IAAI;AACR,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AACjC,SAAK,EAAE,WAAW,CAAC;AACnB,QAAI,KAAK,KAAK,GAAG,QAAU;AAAA,EAC7B;AACA,SAAO,MAAM;AACf;AAEO,SAAS,aAAa,KAAqB;AAChD,SAAO,eAAe,QAAQ,GAAG,IAAI,eAAe,MAAM;AAC5D;"}

package/dist/lib/size.d.ts

@@ -0,0 +1,6 @@
+import { Density } from '../hooks/use-density';
+export type SizeToken = "xs" | "sm" | "md" | "lg" | "xl";
+export declare const SIZE_TOKENS: SizeToken[];
+export declare function resolveSize(size: SizeToken, density?: Density): number;
+export declare function readDensityFromDom(): Density;
+//# sourceMappingURL=size.d.ts.map

package/dist/lib/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/lib/size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD,eAAO,MAAM,WAAW,EAAE,SAAS,EAAmC,CAAC;AAQvE,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,OAAuB,GAAG,MAAM,CAErF;AAED,wBAAgB,kBAAkB,IAAI,OAAO,CAI5C"}

package/dist/lib/size.js

@@ -0,0 +1,14 @@
+const SIZE_TOKENS = ["xs", "sm", "md", "lg", "xl"];
+const SIZE_SCALE = {
+  compact: { xs: 14, sm: 18, md: 24, lg: 36, xl: 48 },
+  comfortable: { xs: 16, sm: 20, md: 28, lg: 40, xl: 56 },
+  spacious: { xs: 20, sm: 24, md: 32, lg: 48, xl: 64 }
+};
+function resolveSize(size, density = "comfortable") {
+  return SIZE_SCALE[density][size];
+}
+export {
+  SIZE_TOKENS,
+  resolveSize
+};
+//# sourceMappingURL=size.js.map

package/dist/lib/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sources":["../../src/lib/size.ts"],"sourcesContent":["import type { Density } from \"../hooks/use-density\";\n\nexport type SizeToken = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport const SIZE_TOKENS: SizeToken[] = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SIZE_SCALE: Record<Density, Record<SizeToken, number>> = {\n  compact: { xs: 14, sm: 18, md: 24, lg: 36, xl: 48 },\n  comfortable: { xs: 16, sm: 20, md: 28, lg: 40, xl: 56 },\n  spacious: { xs: 20, sm: 24, md: 32, lg: 48, xl: 64 },\n};\n\nexport function resolveSize(size: SizeToken, density: Density = \"comfortable\"): number {\n  return SIZE_SCALE[density][size];\n}\n\nexport function readDensityFromDom(): Density {\n  if (typeof document === \"undefined\") return \"comfortable\";\n  const raw = document.documentElement.getAttribute(\"data-density\");\n  return raw === \"compact\" || raw === \"spacious\" ? raw : \"comfortable\";\n}\n"],"names":[],"mappings":"AAIO,MAAM,cAA2B,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAErE,MAAM,aAAyD;AAAA,EAC7D,SAAS,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAAA,EAC/C,aAAa,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAAA,EACnD,UAAU,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAClD;AAEO,SAAS,YAAY,MAAiB,UAAmB,eAAuB;AACrF,SAAO,WAAW,OAAO,EAAE,IAAI;AACjC;"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/lib/utils.js

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"names":[],"mappings":";;AAGO,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;"}

package/dist/overlay/HoverCard.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type HoverCardPlacement = "top" | "bottom" | "left" | "right";
+export type HoverCardProps = {
+    trigger: ReactNode;
+    children: ReactNode;
+    placement?: HoverCardPlacement;
+    delay?: number;
+    arrow?: boolean;
+    className?: string;
+    cardClassName?: string;
+};
+export declare function HoverCard({ trigger, children, placement, delay, arrow, className, cardClassName, }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HoverCard.d.ts.map

package/dist/overlay/HoverCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/overlay/HoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAS,EACT,KAAY,EACZ,SAAS,EACT,aAAa,GACd,EAAE,cAAc,2CA8HhB"}