@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/layout/AppShell.nav.js

@@ -5,6 +5,7 @@ import { useRouter } from "../rpc/router.js";
 function NavSections({
   sections,
   collapsed,
+  groupState,
   onNavigate
 }) {
   const { renderLink } = useRouter();
@@ -15,28 +16,152 @@ function NavSections({
         "flex flex-col gap-0.5",
         collapsed ? "px-2" : "px-density-2"
       ),
-      children: sections.map((section, index) => /* @__PURE__ */ jsxs(
-        "div",
+      children: sections.map((section, index) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col",
+            children: [
+              section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
+              (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+                NavItemRow,
+                {
+                  item,
+                  collapsed,
+                  renderLink,
+                  ...onNavigate ? { onNavigate } : {}
+                },
+                item.key
+              )),
+              (_b = section.groups) == null ? void 0 : _b.map(
+                (group) => (
+                  // A collapsed rail has no room for group headings, so the whole
+                  // subtree flattens into the icon strip rather than hiding behind
+                  // toggles the user cannot see.
+                  collapsed ? flattenGroup(group).map((item) => /* @__PURE__ */ jsx(
+                    NavItemRow,
+                    {
+                      item,
+                      collapsed: true,
+                      renderLink,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    item.key
+                  )) : /* @__PURE__ */ jsx(
+                    NavGroupRows,
+                    {
+                      group,
+                      variant: section.variant ?? "list",
+                      renderLink,
+                      groupState,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    group.key
+                  )
+                )
+              )
+            ]
+          },
+          section.label ?? `section-${index}`
+        );
+      })
+    }
+  );
+}
+function flattenGroup(group) {
+  return [
+    ...group.item ? [group.item] : [],
+    ...group.items,
+    ...(group.groups ?? []).flatMap(flattenGroup)
+  ];
+}
+function NavGroupRows({
+  group,
+  variant,
+  renderLink,
+  groupState,
+  onNavigate
+}) {
+  var _a;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
+  const toggle = () => groupState.toggle(group.key, fallback);
+  const chevron = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" });
+  const groupIcon = group.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      ...typeof group.icon === "string" ? { name: group.icon } : { icon: group.icon }
+    }
+  ) });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    group.item ? (
+      // Folder AND leaf: the link and the disclosure are siblings. Nesting a
+      // button inside the anchor would be invalid DOM and would make the
+      // click target ambiguous.
+      /* @__PURE__ */ jsxs("div", { className: "group/nav flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+          NavItemRow,
+          {
+            item: group.item,
+            collapsed: false,
+            renderLink,
+            ...onNavigate ? { onNavigate } : {}
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": !collapsed,
+            "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group.label}`,
+            className: "shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            children: chevron
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": !collapsed,
+        className: cn(
+          "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
+        ),
+        children: [
+          groupIcon,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          chevron
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2", children: [
+      group.items.map((item) => /* @__PURE__ */ jsx(
+        NavItemRow,
+        {
+          item,
+          collapsed: false,
+          renderLink,
+          ...onNavigate ? { onNavigate } : {}
+        },
+        item.key
+      )),
+      (_a = group.groups) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsx(
+        NavGroupRows,
         {
-          className: "flex flex-col",
-          children: [
-            section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
-            section.items.map((item) => /* @__PURE__ */ jsx(
-              NavItemRow,
-              {
-                item,
-                collapsed,
-                renderLink,
-                ...onNavigate ? { onNavigate } : {}
-              },
-              item.key
-            ))
-          ]
+          group: child,
+          variant,
+          renderLink,
+          groupState,
+          ...onNavigate ? { onNavigate } : {}
         },
-        section.label ?? `section-${index}`
+        child.key
       ))
-    }
-  );
+    ] })
+  ] });
 }
 function NavItemRow({
   item,

package/dist/layout/AppShell.nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.js","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type { AppShellNavItem, AppShellNavSection } from \"./AppShell\";\n\nexport function NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":[],"mappings":";;;;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,WAAA,IAAe,UAAA;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA,SAAS,IAAI,CAAC,SAAS,UACtB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,QAAQ,UACN,YACC,oBAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,IAE1E,oBAAC,OAAA,EAAI,WAAU,wHACZ,UAAA,QAAQ,MAAA,CACX;AAAA,YAEH,QAAQ,MAAM,IAAI,CAAC,SAClB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,cAAC;AAAA,cAJ/B,KAAK;AAAA,YAAA,CAMb;AAAA,UAAA;AAAA,QAAA;AAAA,QAnBI,QAAQ,SAAS,WAAW,KAAK;AAAA,MAAA,CAqBzC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,IACb,KAAK,UAAU;AAAA,EAAA;AAEjB,QAAM,WACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,KAAK,QACJ,oBAAC,QAAA,EAAK,WAAU,qDACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK;AAAA,IAAA,GAE1B;AAAA,IAED,CAAC,aAAa,oBAAC,UAAK,WAAU,mBAAmB,eAAK,OAAM;AAAA,IAC5D,CAAC,aAAa,KAAK;AAAA,EAAA,GACtB;AAEF,QAAM,QACJ,aAAa,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;AAE7D,MAAI,KAAK,UAAU;AACjB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,SAAS;AAAA,QAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,QAAM,OAAO,WAAW;AAAA,IACtB,KAAK,KAAK;AAAA,IACV,IAAI,KAAK;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAI,QAAQ,EAAE,UAAU,CAAA;AAAA,EAAC,CAC1B;AAED,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,oBAAC,OAAA,EAAI,SAAS,YAAa,UAAA,MAAK;AACzC;"}
+{"version":3,"file":"AppShell.nav.js","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items?.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {section.groups?.map((group) =>\n            // A collapsed rail has no room for group headings, so the whole\n            // subtree flattens into the icon strip rather than hiding behind\n            // toggles the user cannot see.\n            collapsed\n              ? flattenGroup(group).map((item) => (\n                  <NavItemRow\n                    key={item.key}\n                    item={item}\n                    collapsed\n                    renderLink={renderLink}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ))\n              : (\n                  <NavGroupRows\n                    key={group.key}\n                    group={group}\n                    variant={section.variant ?? \"list\"}\n                    renderLink={renderLink}\n                    groupState={groupState}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ),\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  variant,\n  renderLink,\n  groupState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  variant: \"list\" | \"tree\";\n  renderLink: RenderLink;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div className=\"group/nav flex items-center gap-1\">\n          <div className=\"min-w-0 flex-1\">\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={!collapsed}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            variant === \"tree\"\n              ? \"text-[13px] text-sidebar-foreground\"\n              : \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n          )}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {chevron}\n        </button>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              variant={variant}\n              renderLink={renderLink}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":[],"mappings":"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"}

package/dist/layout/SplitPane.cjs

@@ -11,7 +11,8 @@ function SplitPane({
   minRight = 20,
   leftClass,
   rightClass,
-  className
+  className,
+  stackOnMobile = false
 }) {
   const [split, setSplit] = react.useState(defaultSplit);
   const dragging = react.useRef(false);
@@ -44,13 +45,21 @@ function SplitPane({
     "div",
     {
       ref: container,
-      className: utils.cn("flex flex-1 overflow-hidden h-full", className),
+      className: utils.cn(
+        "flex h-full flex-1 overflow-hidden",
+        stackOnMobile && "flex-col md:flex-row",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: { width: `${split}%` },
-            className: utils.cn("overflow-y-auto bg-background min-h-0", leftClass),
+            style: stackOnMobile ? { "--split-pane-width": `${split}%` } : { width: `${split}%` },
+            className: utils.cn(
+              "min-h-0 overflow-y-auto bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              leftClass
+            ),
             children: left
           }
         ),
@@ -59,15 +68,22 @@ function SplitPane({
           {
             role: "separator",
             "aria-orientation": "vertical",
-            className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+            className: utils.cn(
+              "w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary",
+              stackOnMobile && "hidden md:block"
+            ),
             onMouseDown
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: { width: `${100 - split}%` },
-            className: utils.cn("overflow-hidden bg-background min-h-0", rightClass),
+            style: stackOnMobile ? { "--split-pane-width": `${100 - split}%` } : { width: `${100 - split}%` },
+            className: utils.cn(
+              "min-h-0 overflow-hidden bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              rightClass
+            ),
             children: right
           }
         )

package/dist/layout/SplitPane.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\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\n      ref={container}\n      className={cn(\"flex flex-1 overflow-hidden h-full\", className)}\n    >\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":["useState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;AAsBO,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,IAAIA,MAAAA,SAAS,YAAY;AAC/C,QAAM,WAAWC,MAAAA,OAAO,KAAK;AAC7B,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAE7C,QAAM,cAAcC,MAAAA;AAAAA,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,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,sCAAsC,SAAS;AAAA,MAE7D,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YACxB,WAAWD,MAAAA,GAAG,yCAAyC,SAAS;AAAA,YAE/D,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEHC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAU;AAAA,YACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAC9B,WAAWD,MAAAA,GAAG,yCAAyC,UAAU;AAAA,YAEhE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /** Stack the panes and hide the resize handle below the `md` breakpoint. */\n  stackOnMobile?: boolean;\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  stackOnMobile = false,\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\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile && \"flex-col md:flex-row\",\n        className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          leftClass,\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden md:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          rightClass,\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;AA8BO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,YAAY;AAC/C,QAAM,WAAWC,MAAAA,OAAO,KAAK;AAC7B,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAE7C,QAAM,cAAcC,MAAAA;AAAAA,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,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OACE,gBACK,EAAE,sBAAsB,GAAG,KAAK,IAAA,IACjC,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YAEvB,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEHC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,YAAA;AAAA,YAEnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,KAAK,IAAA,IACvC,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAE7B,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/layout/SplitPane.d.ts

@@ -16,6 +16,8 @@ export type SplitPaneProps = {
     rightClass?: string;
     /** Classes applied to the root split container. */
     className?: string;
+    /** Stack the panes and hide the resize handle below the `md` breakpoint. */
+    stackOnMobile?: boolean;
 };
-export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, stackOnMobile, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SplitPane.d.ts.map

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

@@ -1 +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,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,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,2CA0DhB"}
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAqB,GACtB,EAAE,cAAc,2CAiFhB"}

package/dist/layout/SplitPane.js

@@ -9,7 +9,8 @@ function SplitPane({
   minRight = 20,
   leftClass,
   rightClass,
-  className
+  className,
+  stackOnMobile = false
 }) {
   const [split, setSplit] = useState(defaultSplit);
   const dragging = useRef(false);
@@ -42,13 +43,21 @@ function SplitPane({
     "div",
     {
       ref: container,
-      className: cn("flex flex-1 overflow-hidden h-full", className),
+      className: cn(
+        "flex h-full flex-1 overflow-hidden",
+        stackOnMobile && "flex-col md:flex-row",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: { width: `${split}%` },
-            className: cn("overflow-y-auto bg-background min-h-0", leftClass),
+            style: stackOnMobile ? { "--split-pane-width": `${split}%` } : { width: `${split}%` },
+            className: cn(
+              "min-h-0 overflow-y-auto bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              leftClass
+            ),
             children: left
           }
         ),
@@ -57,15 +66,22 @@ function SplitPane({
           {
             role: "separator",
             "aria-orientation": "vertical",
-            className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+            className: cn(
+              "w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary",
+              stackOnMobile && "hidden md:block"
+            ),
             onMouseDown
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: { width: `${100 - split}%` },
-            className: cn("overflow-hidden bg-background min-h-0", rightClass),
+            style: stackOnMobile ? { "--split-pane-width": `${100 - split}%` } : { width: `${100 - split}%` },
+            className: cn(
+              "min-h-0 overflow-hidden bg-background",
+              stackOnMobile && "w-full md:w-[var(--split-pane-width)]",
+              rightClass
+            ),
             children: right
           }
         )

package/dist/layout/SplitPane.js.map

@@ -1 +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  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\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\n      ref={container}\n      className={cn(\"flex flex-1 overflow-hidden h-full\", className)}\n    >\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":";;;AAsBO,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;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAE7D,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YACxB,WAAW,GAAG,yCAAyC,SAAS;AAAA,YAE/D,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAU;AAAA,YACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAC9B,WAAW,GAAG,yCAAyC,UAAU;AAAA,YAEhE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SplitPane.js","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n  /** Stack the panes and hide the resize handle below the `md` breakpoint. */\n  stackOnMobile?: boolean;\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  stackOnMobile = false,\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\n      ref={container}\n      className={cn(\n        \"flex h-full flex-1 overflow-hidden\",\n        stackOnMobile && \"flex-col md:flex-row\",\n        className,\n      )}\n    >\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${split}%` } as CSSProperties)\n            : { width: `${split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-y-auto bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          leftClass,\n        )}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary\",\n          stackOnMobile && \"hidden md:block\",\n        )}\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={\n          stackOnMobile\n            ? ({ \"--split-pane-width\": `${100 - split}%` } as CSSProperties)\n            : { width: `${100 - split}%` }\n        }\n        className={cn(\n          \"min-h-0 overflow-hidden bg-background\",\n          stackOnMobile && \"w-full md:w-[var(--split-pane-width)]\",\n          rightClass,\n        )}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA8BO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,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;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OACE,gBACK,EAAE,sBAAsB,GAAG,KAAK,IAAA,IACjC,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,YAEvB,WAAW;AAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,oBAAiB;AAAA,YACjB,WAAW;AAAA,cACT;AAAA,cACA,iBAAiB;AAAA,YAAA;AAAA,YAEnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OACE,gBACK,EAAE,sBAAsB,GAAG,MAAM,KAAK,IAAA,IACvC,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,YAE7B,WAAW;AAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/lib/format.cjs

@@ -1,10 +1,89 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const LOCALE = "en-US";
+const CLICKY_COLUMN_FORMAT_OPTIONS = [
+  {
+    value: "date",
+    label: "Date/time",
+    description: "Render a date or timestamp."
+  },
+  {
+    value: "float",
+    label: "Number",
+    description: "Render a number with decimal precision."
+  },
+  {
+    value: "duration",
+    label: "Duration",
+    description: "Render a Go duration value."
+  },
+  {
+    value: "bytes",
+    label: "Bytes",
+    description: "Render a byte count with binary scaling."
+  },
+  {
+    value: "currency",
+    label: "Currency",
+    description: "Render a monetary amount."
+  }
+];
+const CLICKY_COLUMN_UNIT_OPTIONS = [
+  {
+    value: "none",
+    label: "Compact count",
+    description: "Use short SI count notation without a unit."
+  },
+  {
+    value: "short",
+    label: "Short number",
+    description: "Use short SI count notation such as 1.2K."
+  },
+  {
+    value: "percent",
+    label: "Percent (0-100)",
+    description: "Treat the source value as an existing percentage."
+  },
+  {
+    value: "percentunit",
+    label: "Percent (0-1)",
+    description: "Convert a fractional source value to a percentage."
+  },
+  {
+    value: "bytes",
+    label: "Bytes (IEC)",
+    description: "Scale byte values in powers of 1024."
+  },
+  {
+    value: "decbytes",
+    label: "Bytes (SI)",
+    description: "Scale byte values in powers of 1000."
+  },
+  {
+    value: "Bps",
+    label: "Bytes/sec",
+    description: "Render a byte rate in powers of 1024."
+  },
+  {
+    value: "binBps",
+    label: "Binary bytes/sec",
+    description: "Render a binary byte rate in powers of 1024."
+  },
+  {
+    value: "ms",
+    label: "Milliseconds",
+    description: "Treat the source duration as milliseconds."
+  },
+  {
+    value: "s",
+    label: "Seconds",
+    description: "Treat the source duration as seconds."
+  }
+];
 function intl(value, maxFractionDigits = 1) {
-  return new Intl.NumberFormat(LOCALE, { maximumFractionDigits: maxFractionDigits }).format(
-    Number.isFinite(value) ? value : 0
-  );
+  return new Intl.NumberFormat(LOCALE, {
+    maximumFractionDigits: maxFractionDigits
+  }).format(Number.isFinite(value) ? value : 0);
 }
 function trimZero(s) {
   return s.endsWith(".0") ? s.slice(0, -2) : s;
@@ -12,7 +91,8 @@ function trimZero(s) {
 const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB", "PB"];
 function formatBytes(bytes, opts) {
   const suffix = (opts == null ? void 0 : opts.suffix) ?? "";
-  if (bytes === void 0 || !Number.isFinite(bytes) || bytes <= 0) return `0 B${suffix}`;
+  if (bytes === void 0 || !Number.isFinite(bytes) || bytes <= 0)
+    return `0 B${suffix}`;
   const base = (opts == null ? void 0 : opts.base) ?? 1024;
   let size = bytes;
   let unit = 0;
@@ -69,6 +149,8 @@ function formatUnit(value, unit) {
   if (fmt) return fmt(v);
   return `${intl(v)}${unit}`;
 }
+exports.CLICKY_COLUMN_FORMAT_OPTIONS = CLICKY_COLUMN_FORMAT_OPTIONS;
+exports.CLICKY_COLUMN_UNIT_OPTIONS = CLICKY_COLUMN_UNIT_OPTIONS;
 exports.formatBytes = formatBytes;
 exports.formatBytesPerSecond = formatBytesPerSecond;
 exports.formatDuration = formatDuration;

package/dist/lib/format.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"format.cjs","sources":["../../src/lib/format.ts"],"sourcesContent":["// Value formatters and a Grafana-style unit registry, shared by TimeseriesPanel\n// (and any other metric display). Pure — no React — so it is trivially testable.\n//\n// `formatUnit(value, unit)` dispatches on a Grafana unit identifier (e.g.\n// \"bytes\", \"Bps\", \"percent\", \"ms\", \"short\"). Unknown unit strings are treated as\n// a raw suffix appended to the formatted number, preserving callers that pass a\n// literal like \"%\" or \"req\".\n\nconst LOCALE = \"en-US\";\n\nfunction intl(value: number, maxFractionDigits = 1): string {\n  return new Intl.NumberFormat(LOCALE, { maximumFractionDigits: maxFractionDigits }).format(\n    Number.isFinite(value) ? value : 0,\n  );\n}\n\n/** Drops a trailing \".0\" so whole values read \"1 KB\" rather than \"1.0 KB\". */\nfunction trimZero(s: string): string {\n  return s.endsWith(\".0\") ? s.slice(0, -2) : s;\n}\n\nexport interface FormatBytesOptions {\n  /** 1024 (IEC, the default) or 1000 (SI/decimal). */\n  base?: 1000 | 1024;\n  /** Appended after the unit label, e.g. \"/s\" for a rate. */\n  suffix?: string;\n}\n\nconst BYTE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\"] as const;\n\n/**\n * Human-readable byte size. 1024-based by default with B/KB/MB/GB/TB/PB labels,\n * matching the prior diagnostics formatter. Whole numbers and values >= 10 drop\n * the fraction; smaller fractional values keep one decimal.\n */\nexport function formatBytes(bytes?: number, opts?: FormatBytesOptions): string {\n  const suffix = opts?.suffix ?? \"\";\n  if (bytes === undefined || !Number.isFinite(bytes) || bytes <= 0) return `0 B${suffix}`;\n  const base = opts?.base ?? 1024;\n  let size = bytes;\n  let unit = 0;\n  while (size >= base && unit < BYTE_UNITS.length - 1) {\n    size /= base;\n    unit++;\n  }\n  const rendered = size >= 10 || unit === 0 ? size.toFixed(0) : trimZero(size.toFixed(1));\n  return `${rendered} ${BYTE_UNITS[unit]}${suffix}`;\n}\n\n/** Byte rate, e.g. \"1.5 MB/s\". 1024-based. */\nexport function formatBytesPerSecond(bytes?: number): string {\n  return formatBytes(bytes, { suffix: \"/s\" });\n}\n\nconst SHORT_UNITS = [\"\", \"K\", \"M\", \"B\", \"T\"] as const;\n\n/** SI abbreviation: 999 -> \"999\", 1200 -> \"1.2K\", 3_400_000 -> \"3.4M\". */\nexport function formatShort(value?: number): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0\";\n  const sign = value < 0 ? \"-\" : \"\";\n  let n = Math.abs(value);\n  if (n < 1000) return `${sign}${intl(n)}`;\n  let unit = 0;\n  while (n >= 1000 && unit < SHORT_UNITS.length - 1) {\n    n /= 1000;\n    unit++;\n  }\n  const rendered = n >= 10 ? n.toFixed(0) : trimZero(n.toFixed(1));\n  return `${sign}${rendered}${SHORT_UNITS[unit]}`;\n}\n\n/**\n * Duration rendered from a millisecond (default) or second input. Picks ms / s /\n * min / h by magnitude: 850 -> \"850 ms\", 1500 -> \"1.5 s\", 90_000 -> \"1.5 min\".\n */\nexport function formatDuration(value?: number, opts?: { from?: \"ms\" | \"s\" }): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0 ms\";\n  const ms = opts?.from === \"s\" ? value * 1000 : value;\n  const abs = Math.abs(ms);\n  if (abs < 1000) return `${intl(ms, 0)} ms`;\n  if (abs < 60_000) return `${intl(ms / 1000)} s`;\n  if (abs < 3_600_000) return `${intl(ms / 60_000)} min`;\n  return `${intl(ms / 3_600_000)} h`;\n}\n\n// formatters keyed by Grafana unit identifier. Keys not present here fall through\n// to the raw-suffix path in formatUnit.\nconst UNIT_FORMATTERS: Record<string, (v: number) => string> = {\n  none: (v) => formatShort(v),\n  short: (v) => formatShort(v),\n  percent: (v) => `${intl(v)}%`,\n  percentunit: (v) => `${intl(v * 100)}%`,\n  \"%\": (v) => `${intl(v)}%`,\n  bytes: (v) => formatBytes(v, { base: 1024 }),\n  decbytes: (v) => formatBytes(v, { base: 1000 }),\n  Bps: (v) => formatBytesPerSecond(v),\n  binBps: (v) => formatBytesPerSecond(v),\n  ms: (v) => formatDuration(v, { from: \"ms\" }),\n  s: (v) => formatDuration(v, { from: \"s\" }),\n};\n\n/**\n * Formats a value for display per a Grafana-style unit key. Unknown units are\n * appended as a literal suffix (back-compat for callers passing \"%\", \"req\",\n * etc.); an absent unit yields the plain localized number.\n */\nexport function formatUnit(value: number, unit?: string): string {\n  const v = Number.isFinite(value) ? value : 0;\n  if (!unit) return intl(v);\n  const fmt = UNIT_FORMATTERS[unit];\n  if (fmt) return fmt(v);\n  return `${intl(v)}${unit}`;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"format.cjs","sources":["../../src/lib/format.ts"],"sourcesContent":["// Value formatters and a Grafana-style unit registry, shared by TimeseriesPanel\n// (and any other metric display). Pure — no React — so it is trivially testable.\n//\n// `formatUnit(value, unit)` dispatches on a Grafana unit identifier (e.g.\n// \"bytes\", \"Bps\", \"percent\", \"ms\", \"short\"). Unknown unit strings are treated as\n// a raw suffix appended to the formatted number, preserving callers that pass a\n// literal like \"%\" or \"req\".\n\nconst LOCALE = \"en-US\";\n\nexport type ClickyColumnOption = {\n  value: string;\n  label: string;\n  description: string;\n};\n\nexport const CLICKY_COLUMN_FORMAT_OPTIONS = [\n  {\n    value: \"date\",\n    label: \"Date/time\",\n    description: \"Render a date or timestamp.\",\n  },\n  {\n    value: \"float\",\n    label: \"Number\",\n    description: \"Render a number with decimal precision.\",\n  },\n  {\n    value: \"duration\",\n    label: \"Duration\",\n    description: \"Render a Go duration value.\",\n  },\n  {\n    value: \"bytes\",\n    label: \"Bytes\",\n    description: \"Render a byte count with binary scaling.\",\n  },\n  {\n    value: \"currency\",\n    label: \"Currency\",\n    description: \"Render a monetary amount.\",\n  },\n] as const satisfies readonly ClickyColumnOption[];\n\nexport const CLICKY_COLUMN_UNIT_OPTIONS = [\n  {\n    value: \"none\",\n    label: \"Compact count\",\n    description: \"Use short SI count notation without a unit.\",\n  },\n  {\n    value: \"short\",\n    label: \"Short number\",\n    description: \"Use short SI count notation such as 1.2K.\",\n  },\n  {\n    value: \"percent\",\n    label: \"Percent (0-100)\",\n    description: \"Treat the source value as an existing percentage.\",\n  },\n  {\n    value: \"percentunit\",\n    label: \"Percent (0-1)\",\n    description: \"Convert a fractional source value to a percentage.\",\n  },\n  {\n    value: \"bytes\",\n    label: \"Bytes (IEC)\",\n    description: \"Scale byte values in powers of 1024.\",\n  },\n  {\n    value: \"decbytes\",\n    label: \"Bytes (SI)\",\n    description: \"Scale byte values in powers of 1000.\",\n  },\n  {\n    value: \"Bps\",\n    label: \"Bytes/sec\",\n    description: \"Render a byte rate in powers of 1024.\",\n  },\n  {\n    value: \"binBps\",\n    label: \"Binary bytes/sec\",\n    description: \"Render a binary byte rate in powers of 1024.\",\n  },\n  {\n    value: \"ms\",\n    label: \"Milliseconds\",\n    description: \"Treat the source duration as milliseconds.\",\n  },\n  {\n    value: \"s\",\n    label: \"Seconds\",\n    description: \"Treat the source duration as seconds.\",\n  },\n] as const satisfies readonly ClickyColumnOption[];\n\nexport type ClickyColumnFormat =\n  (typeof CLICKY_COLUMN_FORMAT_OPTIONS)[number][\"value\"];\nexport type ClickyColumnUnit =\n  (typeof CLICKY_COLUMN_UNIT_OPTIONS)[number][\"value\"];\n\nfunction intl(value: number, maxFractionDigits = 1): string {\n  return new Intl.NumberFormat(LOCALE, {\n    maximumFractionDigits: maxFractionDigits,\n  }).format(Number.isFinite(value) ? value : 0);\n}\n\n/** Drops a trailing \".0\" so whole values read \"1 KB\" rather than \"1.0 KB\". */\nfunction trimZero(s: string): string {\n  return s.endsWith(\".0\") ? s.slice(0, -2) : s;\n}\n\nexport interface FormatBytesOptions {\n  /** 1024 (IEC, the default) or 1000 (SI/decimal). */\n  base?: 1000 | 1024;\n  /** Appended after the unit label, e.g. \"/s\" for a rate. */\n  suffix?: string;\n}\n\nconst BYTE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\"] as const;\n\n/**\n * Human-readable byte size. 1024-based by default with B/KB/MB/GB/TB/PB labels,\n * matching the prior diagnostics formatter. Whole numbers and values >= 10 drop\n * the fraction; smaller fractional values keep one decimal.\n */\nexport function formatBytes(bytes?: number, opts?: FormatBytesOptions): string {\n  const suffix = opts?.suffix ?? \"\";\n  if (bytes === undefined || !Number.isFinite(bytes) || bytes <= 0)\n    return `0 B${suffix}`;\n  const base = opts?.base ?? 1024;\n  let size = bytes;\n  let unit = 0;\n  while (size >= base && unit < BYTE_UNITS.length - 1) {\n    size /= base;\n    unit++;\n  }\n  const rendered =\n    size >= 10 || unit === 0 ? size.toFixed(0) : trimZero(size.toFixed(1));\n  return `${rendered} ${BYTE_UNITS[unit]}${suffix}`;\n}\n\n/** Byte rate, e.g. \"1.5 MB/s\". 1024-based. */\nexport function formatBytesPerSecond(bytes?: number): string {\n  return formatBytes(bytes, { suffix: \"/s\" });\n}\n\nconst SHORT_UNITS = [\"\", \"K\", \"M\", \"B\", \"T\"] as const;\n\n/** SI abbreviation: 999 -> \"999\", 1200 -> \"1.2K\", 3_400_000 -> \"3.4M\". */\nexport function formatShort(value?: number): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0\";\n  const sign = value < 0 ? \"-\" : \"\";\n  let n = Math.abs(value);\n  if (n < 1000) return `${sign}${intl(n)}`;\n  let unit = 0;\n  while (n >= 1000 && unit < SHORT_UNITS.length - 1) {\n    n /= 1000;\n    unit++;\n  }\n  const rendered = n >= 10 ? n.toFixed(0) : trimZero(n.toFixed(1));\n  return `${sign}${rendered}${SHORT_UNITS[unit]}`;\n}\n\n/**\n * Duration rendered from a millisecond (default) or second input. Picks ms / s /\n * min / h by magnitude: 850 -> \"850 ms\", 1500 -> \"1.5 s\", 90_000 -> \"1.5 min\".\n */\nexport function formatDuration(\n  value?: number,\n  opts?: { from?: \"ms\" | \"s\" },\n): string {\n  if (value === undefined || !Number.isFinite(value)) return \"0 ms\";\n  const ms = opts?.from === \"s\" ? value * 1000 : value;\n  const abs = Math.abs(ms);\n  if (abs < 1000) return `${intl(ms, 0)} ms`;\n  if (abs < 60_000) return `${intl(ms / 1000)} s`;\n  if (abs < 3_600_000) return `${intl(ms / 60_000)} min`;\n  return `${intl(ms / 3_600_000)} h`;\n}\n\n// formatters keyed by Grafana unit identifier. Keys not present here fall through\n// to the raw-suffix path in formatUnit.\nconst UNIT_FORMATTERS: Record<string, (v: number) => string> = {\n  none: (v) => formatShort(v),\n  short: (v) => formatShort(v),\n  percent: (v) => `${intl(v)}%`,\n  percentunit: (v) => `${intl(v * 100)}%`,\n  \"%\": (v) => `${intl(v)}%`,\n  bytes: (v) => formatBytes(v, { base: 1024 }),\n  decbytes: (v) => formatBytes(v, { base: 1000 }),\n  Bps: (v) => formatBytesPerSecond(v),\n  binBps: (v) => formatBytesPerSecond(v),\n  ms: (v) => formatDuration(v, { from: \"ms\" }),\n  s: (v) => formatDuration(v, { from: \"s\" }),\n};\n\n/**\n * Formats a value for display per a Grafana-style unit key. Unknown units are\n * appended as a literal suffix (back-compat for callers passing \"%\", \"req\",\n * etc.); an absent unit yields the plain localized number.\n */\nexport function formatUnit(value: number, unit?: string): string {\n  const v = Number.isFinite(value) ? value : 0;\n  if (!unit) return intl(v);\n  const fmt = UNIT_FORMATTERS[unit];\n  if (fmt) return fmt(v);\n  return `${intl(v)}${unit}`;\n}\n"],"names":[],"mappings":"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"}

package/dist/lib/format.d.ts

@@ -1,3 +1,72 @@
+export type ClickyColumnOption = {
+    value: string;
+    label: string;
+    description: string;
+};
+export declare const CLICKY_COLUMN_FORMAT_OPTIONS: readonly [{
+    readonly value: "date";
+    readonly label: "Date/time";
+    readonly description: "Render a date or timestamp.";
+}, {
+    readonly value: "float";
+    readonly label: "Number";
+    readonly description: "Render a number with decimal precision.";
+}, {
+    readonly value: "duration";
+    readonly label: "Duration";
+    readonly description: "Render a Go duration value.";
+}, {
+    readonly value: "bytes";
+    readonly label: "Bytes";
+    readonly description: "Render a byte count with binary scaling.";
+}, {
+    readonly value: "currency";
+    readonly label: "Currency";
+    readonly description: "Render a monetary amount.";
+}];
+export declare const CLICKY_COLUMN_UNIT_OPTIONS: readonly [{
+    readonly value: "none";
+    readonly label: "Compact count";
+    readonly description: "Use short SI count notation without a unit.";
+}, {
+    readonly value: "short";
+    readonly label: "Short number";
+    readonly description: "Use short SI count notation such as 1.2K.";
+}, {
+    readonly value: "percent";
+    readonly label: "Percent (0-100)";
+    readonly description: "Treat the source value as an existing percentage.";
+}, {
+    readonly value: "percentunit";
+    readonly label: "Percent (0-1)";
+    readonly description: "Convert a fractional source value to a percentage.";
+}, {
+    readonly value: "bytes";
+    readonly label: "Bytes (IEC)";
+    readonly description: "Scale byte values in powers of 1024.";
+}, {
+    readonly value: "decbytes";
+    readonly label: "Bytes (SI)";
+    readonly description: "Scale byte values in powers of 1000.";
+}, {
+    readonly value: "Bps";
+    readonly label: "Bytes/sec";
+    readonly description: "Render a byte rate in powers of 1024.";
+}, {
+    readonly value: "binBps";
+    readonly label: "Binary bytes/sec";
+    readonly description: "Render a binary byte rate in powers of 1024.";
+}, {
+    readonly value: "ms";
+    readonly label: "Milliseconds";
+    readonly description: "Treat the source duration as milliseconds.";
+}, {
+    readonly value: "s";
+    readonly label: "Seconds";
+    readonly description: "Treat the source duration as seconds.";
+}];
+export type ClickyColumnFormat = (typeof CLICKY_COLUMN_FORMAT_OPTIONS)[number]["value"];
+export type ClickyColumnUnit = (typeof CLICKY_COLUMN_UNIT_OPTIONS)[number]["value"];
 export interface FormatBytesOptions {
     /** 1024 (IEC, the default) or 1000 (SI/decimal). */
     base?: 1000 | 1024;