@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/chunk-JDE5XYPT.js

@@ -0,0 +1,30 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/panel-brand-mark.tsx
+import { jsx } from "react/jsx-runtime";
+function PanelBrandMark({
+  children,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-primary text-primary-foreground grid shrink-0 place-items-center rounded-lg",
+        size === "sm" ? "h-9 w-9" : "h-10 w-10",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+export {
+  PanelBrandMark
+};
+//# sourceMappingURL=chunk-JDE5XYPT.js.map

package/dist/chunk-JDE5XYPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-brand-mark.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type PanelBrandMarkProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Icon inside the mark (lucide, etc.). */\n  children: React.ReactNode;\n  size?: \"sm\" | \"md\";\n};\n\n/**\n * Quiet brand tile for sidebar / sign-in — solid primary, no decorative gradients.\n */\nexport function PanelBrandMark({\n  children,\n  size = \"md\",\n  className,\n  ...props\n}: PanelBrandMarkProps) {\n  return (\n    <div\n      className={cn(\n        \"bg-primary text-primary-foreground grid shrink-0 place-items-center rounded-lg\",\n        size === \"sm\" ? \"h-9 w-9\" : \"h-10 w-10\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAoBI;AAPG,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,OAAO,YAAY;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-JSJEEKR3.js

@@ -0,0 +1,59 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/breadcrumb.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({ items, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("text-sm", className), children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isInteractive = !isLast && (item.href || item.onClick);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center gap-1.5",
+        children: [
+          index > 0 && /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: "text-muted-foreground/70 size-3.5 shrink-0",
+              "aria-hidden": true
+            }
+          ),
+          isInteractive ? item.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.href,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
+              ),
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            }
+          )
+        ]
+      },
+      `${item.label}-${index}`
+    );
+  }) }) });
+}
+
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=chunk-JSJEEKR3.js.map

package/dist/chunk-JSJEEKR3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type BreadcrumbItem = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\ninterface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn(\"text-sm\", className)}>\n      <ol className=\"flex flex-wrap items-center gap-1.5\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const isInteractive = !isLast && (item.href || item.onClick);\n\n          return (\n            <li\n              key={`${item.label}-${index}`}\n              className=\"flex items-center gap-1.5\"\n            >\n              {index > 0 && (\n                <ChevronRight\n                  className=\"text-muted-foreground/70 size-3.5 shrink-0\"\n                  aria-hidden\n                />\n              )}\n              {isInteractive ? (\n                item.href ? (\n                  <a\n                    href={item.href}\n                    className=\"text-muted-foreground hover:text-foreground transition\"\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={item.onClick}\n                    className=\"text-muted-foreground hover:text-foreground transition\"\n                  >\n                    {item.label}\n                  </button>\n                )\n              ) : (\n                <span\n                  className={cn(\n                    isLast\n                      ? \"text-foreground font-medium\"\n                      : \"text-muted-foreground\",\n                  )}\n                  aria-current={isLast ? \"page\" : undefined}\n                >\n                  {item.label}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,oBAAoB;AAyBjB,SAKI,KALJ;AATL,SAAS,WAAW,EAAE,OAAO,UAAU,GAAoB;AAChE,SACE,oBAAC,SAAI,cAAW,cAAa,WAAW,GAAG,WAAW,SAAS,GAC7D,8BAAC,QAAG,WAAU,uCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UAAM,gBAAgB,CAAC,WAAW,KAAK,QAAQ,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAET;AAAA,kBAAQ,KACP;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAW;AAAA;AAAA,UACb;AAAA,UAED,gBACC,KAAK,OACH;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,KAAK;AAAA,cACX,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,KAAK;AAAA,cACd,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR,IAGF;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,SACI,gCACA;AAAA,cACN;AAAA,cACA,gBAAc,SAAS,SAAS;AAAA,cAE/B,eAAK;AAAA;AAAA,UACR;AAAA;AAAA;AAAA,MApCG,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,IAsC7B;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}

package/dist/chunk-KR3BCFP7.js

@@ -0,0 +1,85 @@
+import {
+  Spinner
+} from "./chunk-UE7JY7VR.js";
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/button.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-sm font-medium transition duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-muted text-foreground hover:bg-muted/80",
+        ghost: "hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-border bg-background hover:bg-muted"
+      },
+      size: {
+        sm: "h-8 px-2.5",
+        md: "h-9 px-3",
+        lg: "h-10 px-4",
+        icon: "h-9 w-9 px-0",
+        // Square, matching `sm`'s height — for an icon-only control sitting in
+        // a table row or beside `sm` buttons, where `icon` is a row taller.
+        "icon-sm": "h-8 w-8 px-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var ICON_SIZES = /* @__PURE__ */ new Set(["icon", "icon-sm"]);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ref,
+          className: cn(buttonVariants({ variant, size }), className),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null,
+          loading && size != null && ICON_SIZES.has(size) ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-KR3BCFP7.js.map

package/dist/chunk-KR3BCFP7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nimport { Spinner } from \"./spinner\";\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-sm font-medium transition duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        secondary: \"bg-muted text-foreground hover:bg-muted/80\",\n        ghost: \"hover:bg-muted\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-border bg-background hover:bg-muted\",\n      },\n      size: {\n        sm: \"h-8 px-2.5\",\n        md: \"h-9 px-3\",\n        lg: \"h-10 px-4\",\n        icon: \"h-9 w-9 px-0\",\n        // Square, matching `sm`'s height — for an icon-only control sitting in\n        // a table row or beside `sm` buttons, where `icon` is a row taller.\n        \"icon-sm\": \"h-8 w-8 px-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  /**\n   * Work is in flight: shows a spinner, disables the button, and sets\n   * `aria-busy`.\n   *\n   * This exists because the panel had 272 disabled buttons and only 22 that\n   * said anything about why — the rest went dead on click with no spinner and\n   * no label change, which reads as a broken button rather than a busy one.\n   * Making the feedback part of `disabled` rather than something each caller\n   * remembers separately is the only way that ratio stays fixed.\n   *\n   * The label is kept rather than swapped. \"Saving…\" loses which button you\n   * pressed, and the spinner already says it is working. An icon-only button\n   * is the exception — there is no room beside the glyph, so the spinner takes\n   * its place; the `aria-label` is what names the button either way.\n   *\n   * \"Icon-only\" means an icon `size`. A square button that grew a spinner\n   * beside its glyph would not just look wrong, it would resize mid-request\n   * and shove whatever sits next to it sideways.\n   */\n  loading?: boolean;\n}\n\n/** Sizes with no room for a spinner beside the glyph. */\nconst ICON_SIZES = new Set<string>([\"icon\", \"icon-sm\"]);\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      loading,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    // `asChild` renders someone else's element, which may not take a spinner or\n    // a disabled attribute — so the busy treatment is only applied to a real\n    // button, and passing both is a mistake worth not papering over.\n    if (asChild) {\n      return (\n        <Comp\n          ref={ref}\n          className={cn(buttonVariants({ variant, size }), className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      );\n    }\n\n    return (\n      <button\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {loading ? <Spinner size=\"sm\" /> : null}\n        {loading && size != null && ICON_SIZES.has(size) ? null : children}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,YAAY;AAqFb,cAWF,YAXE;AAhFR,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,aACE;AAAA,QACF,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA;AAAA;AAAA,QAGN,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA8BA,IAAM,aAAa,oBAAI,IAAY,CAAC,QAAQ,SAAS,CAAC;AAE/C,IAAM,SAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAK9B,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,UACzD,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACtB,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA,QAEH;AAAA,oBAAU,oBAAC,WAAQ,MAAK,MAAK,IAAK;AAAA,UAClC,WAAW,QAAQ,QAAQ,WAAW,IAAI,IAAI,IAAI,OAAO;AAAA;AAAA;AAAA,IAC5D;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/chunk-MLRSOTFI.js

@@ -0,0 +1,81 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/segmented-control.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var TONE_ON = "bg-primary text-primary-foreground";
+var TONE_OFF = "text-muted-foreground hover:bg-muted";
+var TONES = {
+  emphasis: { on: TONE_ON, off: TONE_OFF },
+  primary: { on: TONE_ON, off: TONE_OFF }
+};
+var TRACKS = {
+  contained: "border-border inline-flex rounded-md border p-0.5",
+  loose: "flex flex-wrap gap-2"
+};
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  variant = "contained",
+  tone = "emphasis",
+  fill = false,
+  className
+}) {
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  function onKeyDown(event) {
+    const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+    if (step === 0) return;
+    const selectable = options.filter((option) => !option.disabled);
+    if (selectable.length < 2) return;
+    const current = selectable.findIndex((option) => option.value === value);
+    const next = selectable[(current + step + selectable.length) % selectable.length];
+    event.preventDefault();
+    onChange(next.value);
+    refs.current.get(next.value)?.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      className: cn(TRACKS[variant], className),
+      children: options.map((option) => {
+        const checked = option.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (node) => {
+              refs.current.set(option.value, node);
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            disabled: option.disabled,
+            title: option.title,
+            tabIndex: checked ? 0 : -1,
+            onClick: () => onChange(option.value),
+            className: cn(
+              "cursor-pointer rounded px-3 py-1 text-sm font-medium transition",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              fill && "flex-1",
+              checked ? TONES[tone].on : TONES[tone].off
+            ),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=chunk-MLRSOTFI.js.map

package/dist/chunk-MLRSOTFI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one-of-N picker seven panels were each drawing by hand.\n *\n * Not `Tabs`, which is a bottom-bordered strip sitting above the content it\n * switches. This is the inline version — a bordered track with the selected\n * option filled in — used for a filter or a setting that sits among other\n * controls rather than heading a panel.\n *\n * **Roles are the reason to use this.** The seven copies had three different\n * ideas about what they were: one said `tablist`/`tab`, one said\n * `group`/`aria-pressed`, and the other five said nothing at all — so on five\n * of seven a screen reader heard a row of unlabelled buttons with no\n * indication which one was active. None of the three was right. `tablist`\n * without a `tabpanel` is a promise the markup does not keep, and\n * `aria-pressed` describes independent toggles, not a choice of one. Picking a\n * value out of a fixed set is a radio group, so that is what this is, with the\n * roving tabindex and arrow keys that come with the role.\n *\n * `tone` is kept for call-site compatibility. Both `emphasis` and `primary`\n * resolve to `bg-primary text-primary-foreground` — neutral brand primary is\n * already the ink fill five panels used, and a raw `slate-950` utility would\n * escape brand recoloring. Prefer `primary` in new code.\n */\nexport interface SegmentedOption<Value extends string> {\n  value: Value;\n  label: React.ReactNode;\n  disabled?: boolean;\n  /**\n   * Hover text. Worth setting on a disabled option — \"Everyone\" going grey\n   * says nothing about which permission would bring it back.\n   */\n  title?: string;\n}\n\nexport interface SegmentedControlProps<Value extends string> {\n  options: ReadonlyArray<SegmentedOption<Value>>;\n  value: Value;\n  onChange: (value: Value) => void;\n  /**\n   * Required: the group never has a visible label — the options name the\n   * choice between them, which tells you nothing about what is being chosen.\n   */\n  ariaLabel: string;\n  /**\n   * `contained` — one bordered track around the options (five panels).\n   * `loose` — free-standing pills with a gap between them (two panels).\n   */\n  variant?: \"contained\" | \"loose\";\n  /** Prefer `primary`. `emphasis` is an alias kept for existing call sites. */\n  tone?: \"emphasis\" | \"primary\";\n  /** Options share the width equally, for a control that fills its column. */\n  fill?: boolean;\n  className?: string;\n}\n\nconst TONE_ON = \"bg-primary text-primary-foreground\";\nconst TONE_OFF = \"text-muted-foreground hover:bg-muted\";\n\nconst TONES = {\n  emphasis: { on: TONE_ON, off: TONE_OFF },\n  primary: { on: TONE_ON, off: TONE_OFF },\n} as const;\n\nconst TRACKS = {\n  contained: \"border-border inline-flex rounded-md border p-0.5\",\n  loose: \"flex flex-wrap gap-2\",\n} as const;\n\nexport function SegmentedControl<Value extends string>({\n  options,\n  value,\n  onChange,\n  ariaLabel,\n  variant = \"contained\",\n  tone = \"emphasis\",\n  fill = false,\n  className,\n}: SegmentedControlProps<Value>) {\n  const refs = React.useRef(new Map<Value, HTMLButtonElement | null>());\n\n  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    const step =\n      event.key === \"ArrowRight\" || event.key === \"ArrowDown\"\n        ? 1\n        : event.key === \"ArrowLeft\" || event.key === \"ArrowUp\"\n          ? -1\n          : 0;\n    if (step === 0) return;\n\n    const selectable = options.filter((option) => !option.disabled);\n    if (selectable.length < 2) return;\n\n    const current = selectable.findIndex((option) => option.value === value);\n    // Wraps, which is what a radio group is expected to do.\n    const next =\n      selectable[(current + step + selectable.length) % selectable.length];\n\n    event.preventDefault();\n    onChange(next.value);\n    // The newly checked option has to take focus, or the next arrow press is\n    // still measured from the old one.\n    refs.current.get(next.value)?.focus();\n  }\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      onKeyDown={onKeyDown}\n      className={cn(TRACKS[variant], className)}\n    >\n      {options.map((option) => {\n        const checked = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              refs.current.set(option.value, node);\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={checked}\n            disabled={option.disabled}\n            title={option.title}\n            // Only the checked option is reachable by Tab; arrows move within\n            // the group. Without this a keyboard user pages through every\n            // option to get past the control.\n            tabIndex={checked ? 0 : -1}\n            onClick={() => onChange(option.value)}\n            className={cn(\n              \"cursor-pointer rounded px-3 py-1 text-sm font-medium transition\",\n              \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              fill && \"flex-1\",\n              checked ? TONES[tone].on : TONES[tone].off,\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAEA,YAAY,WAAW;AAsHb;AA3DV,IAAM,UAAU;AAChB,IAAM,WAAW;AAEjB,IAAM,QAAQ;AAAA,EACZ,UAAU,EAAE,IAAI,SAAS,KAAK,SAAS;AAAA,EACvC,SAAS,EAAE,IAAI,SAAS,KAAK,SAAS;AACxC;AAEA,IAAM,SAAS;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AACT;AAEO,SAAS,iBAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AACF,GAAiC;AAC/B,QAAM,OAAa,aAAO,oBAAI,IAAqC,CAAC;AAEpE,WAAS,UAAU,OAA4C;AAC7D,UAAM,OACJ,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,cACxC,IACA,MAAM,QAAQ,eAAe,MAAM,QAAQ,YACzC,KACA;AACR,QAAI,SAAS,EAAG;AAEhB,UAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,CAAC,OAAO,QAAQ;AAC9D,QAAI,WAAW,SAAS,EAAG;AAE3B,UAAM,UAAU,WAAW,UAAU,CAAC,WAAW,OAAO,UAAU,KAAK;AAEvE,UAAM,OACJ,YAAY,UAAU,OAAO,WAAW,UAAU,WAAW,MAAM;AAErE,UAAM,eAAe;AACrB,aAAS,KAAK,KAAK;AAGnB,SAAK,QAAQ,IAAI,KAAK,KAAK,GAAG,MAAM;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA,WAAW,GAAG,OAAO,OAAO,GAAG,SAAS;AAAA,MAEvC,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,UAAU,OAAO,UAAU;AACjC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,mBAAK,QAAQ,IAAI,OAAO,OAAO,IAAI;AAAA,YACrC;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,OAAO,OAAO;AAAA,YAId,UAAU,UAAU,IAAI;AAAA,YACxB,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,UAAU,MAAM,IAAI,EAAE,KAAK,MAAM,IAAI,EAAE;AAAA,YACzC;AAAA,YAEC,iBAAO;AAAA;AAAA,UAtBH,OAAO;AAAA,QAuBd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-MQT5RAQV.js

@@ -0,0 +1,202 @@
+// src/spreadsheet-grid.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isInRange(range, r, c) {
+  if (!range) return false;
+  return r >= range.r1 && r <= range.r2 && c >= range.c1 && c <= range.c2;
+}
+function SpreadsheetGrid({
+  columns,
+  rows,
+  rowKey,
+  loading,
+  emptyMessage = "Nothing to show.",
+  loadingMessage = "Loading\u2026",
+  ariaLabel = "Data grid",
+  range,
+  onRangeChange,
+  onCopy
+}) {
+  const gridRef = React.useRef(null);
+  const anchorRef = React.useRef(null);
+  const focusRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const setSelection = React.useCallback(
+    (anchor, focus) => {
+      anchorRef.current = anchor;
+      focusRef.current = focus;
+      onRangeChange({ anchor, focus });
+    },
+    [onRangeChange]
+  );
+  const selectCell = React.useCallback(
+    (r, c, extend) => {
+      if (extend && anchorRef.current)
+        setSelection(anchorRef.current, { r, c });
+      else setSelection({ r, c }, { r, c });
+    },
+    [setSelection]
+  );
+  const selectColumn = React.useCallback(
+    (c, extend) => {
+      const lastRow = Math.max(rows.length - 1, 0);
+      const anchorCol = extend && anchorRef.current ? anchorRef.current.c : c;
+      setSelection({ r: 0, c: anchorCol }, { r: lastRow, c });
+    },
+    [rows.length, setSelection]
+  );
+  const selectRow = React.useCallback(
+    (r, extend) => {
+      const lastCol = columns.length - 1;
+      const anchorRow = extend && anchorRef.current ? anchorRef.current.r : r;
+      setSelection({ r: anchorRow, c: 0 }, { r, c: lastCol });
+    },
+    [columns.length, setSelection]
+  );
+  const selectAll = React.useCallback(() => {
+    if (!rows.length || !columns.length) return;
+    setSelection({ r: 0, c: 0 }, { r: rows.length - 1, c: columns.length - 1 });
+  }, [rows.length, columns.length, setSelection]);
+  const scrollCellIntoView = React.useCallback((r, c) => {
+    const cell = gridRef.current?.querySelector(`[data-cell="${r}-${c}"]`);
+    cell?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, []);
+  const moveFocus = React.useCallback(
+    (dr, dc, extend) => {
+      if (!rows.length || !columns.length) return;
+      const base = focusRef.current || { r: 0, c: 0 };
+      const r = Math.min(Math.max(base.r + dr, 0), rows.length - 1);
+      const c = Math.min(Math.max(base.c + dc, 0), columns.length - 1);
+      selectCell(r, c, extend);
+      scrollCellIntoView(r, c);
+    },
+    [rows.length, columns.length, selectCell, scrollCellIntoView]
+  );
+  React.useEffect(() => {
+    if (!dragging) return;
+    const stop = () => setDragging(false);
+    window.addEventListener("mouseup", stop);
+    return () => window.removeEventListener("mouseup", stop);
+  }, [dragging]);
+  const handleKeyDown = (event) => {
+    const meta = event.metaKey || event.ctrlKey;
+    if (meta && event.key.toLowerCase() === "c") {
+      event.preventDefault();
+      onCopy();
+      return;
+    }
+    if (meta && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      selectAll();
+      return;
+    }
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        moveFocus(-1, 0, event.shiftKey);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        moveFocus(1, 0, event.shiftKey);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        moveFocus(0, -1, event.shiftKey);
+        break;
+      case "ArrowRight":
+      case "Tab":
+        event.preventDefault();
+        moveFocus(0, 1, event.shiftKey && event.key !== "Tab");
+        break;
+      case "Escape":
+        setSelection(null, null);
+        break;
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: gridRef,
+      tabIndex: 0,
+      role: "grid",
+      "aria-label": ariaLabel,
+      onKeyDown: handleKeyDown,
+      className: "border-border bg-background/80 overflow-x-auto rounded-lg border outline-none",
+      children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm whitespace-nowrap select-none", children: [
+        /* @__PURE__ */ jsx("thead", { className: "text-muted-foreground border-border border-b text-left", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "w-10 cursor-pointer px-2 py-2 text-center font-medium",
+              title: "Select everything",
+              onMouseDown: () => selectAll(),
+              children: "#"
+            }
+          ),
+          columns.map((column, c) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "cursor-pointer px-3 py-2 font-medium",
+              title: `Select the ${column.title} column`,
+              onMouseDown: (event) => selectColumn(c, event.shiftKey),
+              children: column.title
+            },
+            column.key
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: columns.length + 1,
+            className: "text-muted-foreground px-3 py-6 text-center",
+            children: loading ? loadingMessage : emptyMessage
+          }
+        ) }) : rows.map((row, r) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: "border-border border-b",
+            children: [
+              /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "text-muted-foreground w-10 cursor-pointer px-2 py-2 text-center text-xs",
+                  title: "Select this row",
+                  onMouseDown: (event) => selectRow(r, event.shiftKey),
+                  children: r + 1
+                }
+              ),
+              columns.map((column, c) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  "data-cell": `${r}-${c}`,
+                  onMouseDown: (event) => {
+                    selectCell(r, c, event.shiftKey);
+                    setDragging(true);
+                    gridRef.current?.focus();
+                  },
+                  onMouseEnter: () => {
+                    if (dragging) setSelection(anchorRef.current, { r, c });
+                  },
+                  className: `px-3 py-2 ${column.className || ""} ${isInRange(range, r, c) ? "bg-primary/15" : ""}`,
+                  title: column.className?.includes("truncate") ? column.value(row) : void 0,
+                  children: column.render ? column.render(row) : column.value(row)
+                },
+                column.key
+              ))
+            ]
+          },
+          rowKey ? rowKey(row, r) : String(r)
+        )) })
+      ] })
+    }
+  );
+}
+
+export {
+  SpreadsheetGrid
+};
+//# sourceMappingURL=chunk-MQT5RAQV.js.map

package/dist/chunk-MQT5RAQV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spreadsheet-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { type CellRange, type CellRef } from \"./clipboard\";\n\n/**\n * A column knows three things: its heading, the text it contributes to a copy\n * or CSV export, and optionally how to draw itself.\n *\n * Keeping `value` and `render` together is what stops an exported sheet from\n * drifting from the visible grid.\n */\nexport type GridColumn<Row> = {\n  key: string;\n  title: string;\n  /** Text used for clipboard and CSV. Never JSX. */\n  value: (row: Row) => string;\n  /** Defaults to `value`. Use for links, tiles, truncation. */\n  render?: (row: Row) => React.ReactNode;\n  /** Extra classes for the <td>. */\n  className?: string;\n};\n\nexport interface SpreadsheetGridProps<Row> {\n  columns: GridColumn<Row>[];\n  rows: Row[];\n  /** Stable React key per row. Defaults to the row index. */\n  rowKey?: (row: Row, index: number) => string;\n  loading?: boolean;\n  emptyMessage?: string;\n  loadingMessage?: string;\n  ariaLabel?: string;\n  /** Lifted so a toolbar can copy and describe the current selection. */\n  range: CellRange | null;\n  onRangeChange: (selection: {\n    anchor: CellRef | null;\n    focus: CellRef | null;\n  }) => void;\n  onCopy: () => void;\n}\n\nfunction isInRange(range: CellRange | null, r: number, c: number): boolean {\n  if (!range) return false;\n  return r >= range.r1 && r <= range.r2 && c >= range.c1 && c <= range.c2;\n}\n\n/**\n * Spreadsheet-like grid: click-drag a range, shift+click to extend, arrows to\n * move, click a heading to take the column, click the row number to take the\n * row, Cmd/Ctrl+A for everything, Escape to clear, Cmd/Ctrl+C to copy.\n *\n * Ported from video-shorts-panel's ExcelTable, which several panels share for\n * exactly this reason — a table people paste into a sheet.\n */\nexport function SpreadsheetGrid<Row>({\n  columns,\n  rows,\n  rowKey,\n  loading,\n  emptyMessage = \"Nothing to show.\",\n  loadingMessage = \"Loading…\",\n  ariaLabel = \"Data grid\",\n  range,\n  onRangeChange,\n  onCopy,\n}: SpreadsheetGridProps<Row>) {\n  const gridRef = React.useRef<HTMLDivElement>(null);\n  const anchorRef = React.useRef<CellRef | null>(null);\n  const focusRef = React.useRef<CellRef | null>(null);\n  const [dragging, setDragging] = React.useState(false);\n\n  const setSelection = React.useCallback(\n    (anchor: CellRef | null, focus: CellRef | null) => {\n      anchorRef.current = anchor;\n      focusRef.current = focus;\n      onRangeChange({ anchor, focus });\n    },\n    [onRangeChange],\n  );\n\n  const selectCell = React.useCallback(\n    (r: number, c: number, extend?: boolean) => {\n      if (extend && anchorRef.current)\n        setSelection(anchorRef.current, { r, c });\n      else setSelection({ r, c }, { r, c });\n    },\n    [setSelection],\n  );\n\n  const selectColumn = React.useCallback(\n    (c: number, extend?: boolean) => {\n      const lastRow = Math.max(rows.length - 1, 0);\n      const anchorCol = extend && anchorRef.current ? anchorRef.current.c : c;\n      setSelection({ r: 0, c: anchorCol }, { r: lastRow, c });\n    },\n    [rows.length, setSelection],\n  );\n\n  const selectRow = React.useCallback(\n    (r: number, extend?: boolean) => {\n      const lastCol = columns.length - 1;\n      const anchorRow = extend && anchorRef.current ? anchorRef.current.r : r;\n      setSelection({ r: anchorRow, c: 0 }, { r, c: lastCol });\n    },\n    [columns.length, setSelection],\n  );\n\n  const selectAll = React.useCallback(() => {\n    if (!rows.length || !columns.length) return;\n    setSelection({ r: 0, c: 0 }, { r: rows.length - 1, c: columns.length - 1 });\n  }, [rows.length, columns.length, setSelection]);\n\n  const scrollCellIntoView = React.useCallback((r: number, c: number) => {\n    const cell = gridRef.current?.querySelector(`[data-cell=\"${r}-${c}\"]`);\n    cell?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n  }, []);\n\n  const moveFocus = React.useCallback(\n    (dr: number, dc: number, extend?: boolean) => {\n      if (!rows.length || !columns.length) return;\n      const base = focusRef.current || { r: 0, c: 0 };\n      const r = Math.min(Math.max(base.r + dr, 0), rows.length - 1);\n      const c = Math.min(Math.max(base.c + dc, 0), columns.length - 1);\n      selectCell(r, c, extend);\n      scrollCellIntoView(r, c);\n    },\n    [rows.length, columns.length, selectCell, scrollCellIntoView],\n  );\n\n  // Dragging must end even if the pointer is released outside the grid.\n  React.useEffect(() => {\n    if (!dragging) return;\n    const stop = () => setDragging(false);\n    window.addEventListener(\"mouseup\", stop);\n    return () => window.removeEventListener(\"mouseup\", stop);\n  }, [dragging]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const meta = event.metaKey || event.ctrlKey;\n    if (meta && event.key.toLowerCase() === \"c\") {\n      event.preventDefault();\n      onCopy();\n      return;\n    }\n    if (meta && event.key.toLowerCase() === \"a\") {\n      event.preventDefault();\n      selectAll();\n      return;\n    }\n    switch (event.key) {\n      case \"ArrowUp\":\n        event.preventDefault();\n        moveFocus(-1, 0, event.shiftKey);\n        break;\n      case \"ArrowDown\":\n        event.preventDefault();\n        moveFocus(1, 0, event.shiftKey);\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        moveFocus(0, -1, event.shiftKey);\n        break;\n      case \"ArrowRight\":\n      case \"Tab\":\n        event.preventDefault();\n        moveFocus(0, 1, event.shiftKey && event.key !== \"Tab\");\n        break;\n      case \"Escape\":\n        setSelection(null, null);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      ref={gridRef}\n      tabIndex={0}\n      role=\"grid\"\n      aria-label={ariaLabel}\n      onKeyDown={handleKeyDown}\n      className=\"border-border bg-background/80 overflow-x-auto rounded-lg border outline-none\"\n    >\n      <table className=\"w-full text-sm whitespace-nowrap select-none\">\n        <thead className=\"text-muted-foreground border-border border-b text-left\">\n          <tr>\n            <th\n              scope=\"col\"\n              className=\"w-10 cursor-pointer px-2 py-2 text-center font-medium\"\n              title=\"Select everything\"\n              onMouseDown={() => selectAll()}\n            >\n              #\n            </th>\n            {columns.map((column, c) => (\n              <th\n                key={column.key}\n                scope=\"col\"\n                className=\"cursor-pointer px-3 py-2 font-medium\"\n                title={`Select the ${column.title} column`}\n                onMouseDown={(event) => selectColumn(c, event.shiftKey)}\n              >\n                {column.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.length === 0 ? (\n            <tr>\n              <td\n                colSpan={columns.length + 1}\n                className=\"text-muted-foreground px-3 py-6 text-center\"\n              >\n                {loading ? loadingMessage : emptyMessage}\n              </td>\n            </tr>\n          ) : (\n            rows.map((row, r) => (\n              <tr\n                key={rowKey ? rowKey(row, r) : String(r)}\n                className=\"border-border border-b\"\n              >\n                <td\n                  className=\"text-muted-foreground w-10 cursor-pointer px-2 py-2 text-center text-xs\"\n                  title=\"Select this row\"\n                  onMouseDown={(event) => selectRow(r, event.shiftKey)}\n                >\n                  {r + 1}\n                </td>\n                {columns.map((column, c) => (\n                  <td\n                    key={column.key}\n                    data-cell={`${r}-${c}`}\n                    onMouseDown={(event) => {\n                      selectCell(r, c, event.shiftKey);\n                      setDragging(true);\n                      gridRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      if (dragging) setSelection(anchorRef.current, { r, c });\n                    }}\n                    className={`px-3 py-2 ${column.className || \"\"} ${\n                      isInRange(range, r, c) ? \"bg-primary/15\" : \"\"\n                    }`}\n                    title={\n                      column.className?.includes(\"truncate\")\n                        ? column.value(row)\n                        : undefined\n                    }\n                  >\n                    {column.render ? column.render(row) : column.value(row)}\n                  </td>\n                ))}\n              </tr>\n            ))\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-MUPW2TFJ.js

@@ -0,0 +1,102 @@
+// src/date-range-picker/dateRange.ts
+var pad = (n) => String(n).padStart(2, "0");
+function toIsoDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function fromIsoDate(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+  if (!match) return null;
+  const date = new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3])
+  );
+  return toIsoDate(date) === trimmed ? date : null;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addMonths(date, count) {
+  return new Date(date.getFullYear(), date.getMonth() + count, 1);
+}
+function addDays(date, count) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + count);
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return toIsoDate(a) === toIsoDate(b);
+}
+function monthGrid(month) {
+  const first = startOfMonth(month);
+  const start = addDays(first, -first.getDay());
+  return Array.from({ length: 42 }, (_, index) => addDays(start, index));
+}
+function monthLabel(month, locale = "en-IN") {
+  return month.toLocaleDateString(locale, { month: "long", year: "numeric" });
+}
+function formatDisplay(value, locale = "en-IN") {
+  const date = fromIsoDate(value);
+  if (!date) return "";
+  return date.toLocaleDateString(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  });
+}
+function startOfDayMs(value) {
+  const date = fromIsoDate(value);
+  return date ? date.getTime() : 0;
+}
+function endOfDayMs(value) {
+  const date = fromIsoDate(value);
+  if (!date) return 0;
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    23,
+    59,
+    59,
+    999
+  ).getTime();
+}
+function endAt2359Ms(value) {
+  const date = fromIsoDate(value);
+  if (!date) return 0;
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    23,
+    59,
+    59,
+    0
+  ).getTime();
+}
+function createdRangeMs(from, to) {
+  const startDate = from.trim() || to.trim();
+  const endDate = to.trim() || from.trim();
+  return {
+    start_time: startOfDayMs(startDate),
+    end_time: endAt2359Ms(endDate)
+  };
+}
+
+export {
+  toIsoDate,
+  fromIsoDate,
+  startOfMonth,
+  addMonths,
+  addDays,
+  isSameDay,
+  monthGrid,
+  monthLabel,
+  formatDisplay,
+  startOfDayMs,
+  endOfDayMs,
+  endAt2359Ms,
+  createdRangeMs
+};
+//# sourceMappingURL=chunk-MUPW2TFJ.js.map

package/dist/chunk-MUPW2TFJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date-range-picker/dateRange.ts"],"sourcesContent":["/**\n * Date helpers for the range picker, all in local time.\n *\n * Deliberately not `toISOString()`: that converts to UTC first, so on any\n * negative-offset day it returns yesterday's date and the picker highlights the\n * wrong cell. Every value here is built and read as the local calendar day the\n * user is actually looking at.\n */\n\n/** `YYYY-MM-DD`, the value shape the filters store. */\nexport type IsoDate = string;\n\nconst pad = (n: number) => String(n).padStart(2, \"0\");\n\nexport function toIsoDate(date: Date): IsoDate {\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n}\n\n/** Parses `YYYY-MM-DD` into a local midnight Date; null for anything else. */\nexport function fromIsoDate(value: string | null | undefined): Date | null {\n  if (!value) return null;\n  const trimmed = value.trim();\n  const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(trimmed);\n  if (!match) return null;\n  const date = new Date(\n    Number(match[1]),\n    Number(match[2]) - 1,\n    Number(match[3]),\n  );\n  // Rejects 2026-02-31, which would otherwise roll silently into March.\n  return toIsoDate(date) === trimmed ? date : null;\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nexport function addMonths(date: Date, count: number): Date {\n  return new Date(date.getFullYear(), date.getMonth() + count, 1);\n}\n\nexport function addDays(date: Date, count: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + count);\n}\n\nexport function isSameDay(a: Date | null, b: Date | null): boolean {\n  if (!a || !b) return false;\n  return toIsoDate(a) === toIsoDate(b);\n}\n\n/**\n * The six-week grid for a month, Sunday-first, padded with the neighbouring\n * months so every row has seven cells.\n *\n * Always six rows, never five: a grid that changes height as you page through\n * months makes everything below it jump.\n */\nexport function monthGrid(month: Date): Date[] {\n  const first = startOfMonth(month);\n  const start = addDays(first, -first.getDay());\n  return Array.from({ length: 42 }, (_, index) => addDays(start, index));\n}\n\nexport function monthLabel(month: Date, locale = \"en-IN\"): string {\n  return month.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" });\n}\n\n/** Human form for the trigger — \"22 Aug 2026\". */\nexport function formatDisplay(value: string, locale = \"en-IN\"): string {\n  const date = fromIsoDate(value);\n  if (!date) return \"\";\n  return date.toLocaleDateString(locale, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  });\n}\n\nexport function startOfDayMs(value: string): number {\n  const date = fromIsoDate(value);\n  return date ? date.getTime() : 0;\n}\n\n/**\n * The end of a day as milliseconds.\n *\n * A range picked as whole days has to include everything created on the last\n * day, so \"to\" means 23:59:59.999 rather than that morning's midnight — which\n * would drop a whole day of cards without saying so.\n */\nexport function endOfDayMs(value: string): number {\n  const date = fromIsoDate(value);\n  if (!date) return 0;\n  return new Date(\n    date.getFullYear(),\n    date.getMonth(),\n    date.getDate(),\n    23,\n    59,\n    59,\n    999,\n  ).getTime();\n}\n\n/**\n * 11:59 PM on that local day, as 23:59:59.\n *\n * The next midnight is already the following date, and the feed includes that\n * whole day — so the 28th through the 28th came back with the 29th. Stopping\n * at 11:59 PM keeps the end on the day that was picked.\n */\nexport function endAt2359Ms(value: string): number {\n  const date = fromIsoDate(value);\n  if (!date) return 0;\n  return new Date(\n    date.getFullYear(),\n    date.getMonth(),\n    date.getDate(),\n    23,\n    59,\n    59,\n    0,\n  ).getTime();\n}\n\n/**\n * Created-date window for the feed.\n *\n * A blank end means the start day, so one selected date is that whole day.\n * `end_time` is 11:59 PM on the end date.\n */\nexport function createdRangeMs(\n  from: string,\n  to: string,\n): { start_time: number; end_time: number } {\n  const startDate = from.trim() || to.trim();\n  const endDate = to.trim() || from.trim();\n  return {\n    start_time: startOfDayMs(startDate),\n    end_time: endAt2359Ms(endDate),\n  };\n}\n"],"mappings":"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","names":[]}