@inshorts/glint-ui 0.5.3 → 0.6.0

package/dist/side-drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/side-drawer.tsx","../src/button.tsx","../src/spinner.tsx","../src/utils.ts","../src/dialogLayer.ts","../src/modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { Button } from \"./button\";\nimport { useDialogLayer } from \"./dialogLayer\";\nimport { useHasMounted } from \"./modal\";\nimport { cn } from \"./utils\";\n\ninterface SideDrawerProps {\n  isOpen: boolean;\n  title: string;\n  onClose: () => void;\n  children: React.ReactNode;\n  /** Tailwind width class for the panel. Defaults to a reading-width column. */\n  panelClassName?: string;\n}\n\n/**\n * A panel that slides in from the right.\n *\n * For content that belongs beside the page rather than on top of it — a queue\n * you glance at and dismiss, not a decision you have to answer. Unlike\n * `Modal`, it does not centre or dim the whole page to a stop: the table\n * underneath stays readable, which is the point of looking at both.\n */\nexport function SideDrawer({\n  isOpen,\n  title,\n  onClose,\n  children,\n  panelClassName,\n}: SideDrawerProps) {\n  const mounted = useHasMounted();\n  const headingId = React.useId();\n  const panelRef = React.useRef<HTMLElement>(null);\n\n  useDialogLayer({\n    // Gated on `mounted` too: before that the panel is not rendered, so there\n    // would be nothing to move focus into.\n    active: isOpen && mounted,\n    containerRef: panelRef,\n    onEscape: onClose,\n  });\n\n  if (!mounted || !isOpen) return null;\n\n  return createPortal(\n    <>\n      <div\n        aria-hidden\n        onClick={onClose}\n        className=\"fixed inset-0 z-[90] bg-slate-950/30\"\n      />\n      <aside\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={headingId}\n        tabIndex={-1}\n        className={cn(\n          \"border-border bg-background fixed inset-y-0 right-0 z-[95] flex flex-col border-l shadow-2xl outline-none\",\n          panelClassName ?? \"w-full max-w-md\",\n        )}\n      >\n        <div className=\"border-border flex items-center justify-between gap-3 border-b px-4 py-3\">\n          <h2 id={headingId} className=\"truncate text-base font-semibold\">\n            {title}\n          </h2>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Close panel\"\n            onClick={onClose}\n          >\n            <X className=\"h-4 w-4\" aria-hidden />\n          </Button>\n        </div>\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto p-4\">{children}</div>\n      </aside>\n    </>,\n    document.body,\n  );\n}\n","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","import * as React from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one spinner.\n *\n * There were five spellings of `animate-spin` across twelve files — `h-4 w-4`,\n * `h-5 w-5`, `size-4`, bare, and a hand-drawn ring in `ProtectedRoute` — so the\n * same \"working\" signal came out a different size depending on which panel you\n * were on.\n *\n * It is `aria-hidden` on purpose. A spinner is decoration; what a screen reader\n * needs is the surrounding control's `aria-busy` or the panel's status text,\n * and announcing \"loading\" twice is worse than once. `Button` and `StatePanel`\n * both supply that.\n */\nconst SIZES = {\n  sm: \"size-3.5\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-10 border-2\",\n} as const;\n\nexport interface SpinnerProps extends React.SVGProps<SVGSVGElement> {\n  size?: keyof typeof SIZES;\n}\n\nexport function Spinner({ size = \"md\", className, ...props }: SpinnerProps) {\n  return (\n    <Loader2\n      aria-hidden\n      className={cn(\"animate-spin\", SIZES[size], className)}\n      {...props}\n    />\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * The keyboard and focus behaviour every dialog needs, in one place.\n *\n * `Modal` and `SideDrawer` each had a copy of the scroll lock and an Escape\n * handler, and neither did anything about focus: opening a dialog left focus\n * on the button behind it, Tab walked the page underneath — through the\n * full-screen backdrop button, among other things — and closing left focus\n * wherever it had wandered. That is the whole keyboard story for thirty\n * dialogs, so it is fixed once here rather than thirty times.\n */\n\n/**\n * Open dialogs, innermost last.\n *\n * Nesting is real here — \"Create audience group\" opens on top of \"Send\n * notification\" — and without an ordering both would answer the same Escape\n * and fight over the same Tab. Only the top layer acts.\n */\nconst layers: symbol[] = [];\n\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(\",\");\n\n/**\n * Deliberately not `offsetParent` or `getClientRects`: the first is null for\n * anything `position: fixed`, which a dialog panel usually is, and the second\n * is empty for *everything* under a test renderer that does no layout — which\n * would collapse the trap to \"no focusable elements\" in every test.\n */\nfunction isVisible(element: HTMLElement): boolean {\n  if (element.closest(\"[hidden]\")) return false;\n  if (element.getAttribute(\"aria-hidden\") === \"true\") return false;\n  return typeof element.checkVisibility === \"function\"\n    ? element.checkVisibility()\n    : true;\n}\n\nfunction focusableWithin(container: HTMLElement): HTMLElement[] {\n  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    isVisible,\n  );\n}\n\nexport function useDialogLayer({\n  active,\n  containerRef,\n  onEscape,\n}: {\n  active: boolean;\n  /** The panel. Focus is moved into it and kept inside it. */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Called on Escape, only while this is the top layer. Omit to ignore it. */\n  onEscape?: () => void;\n}): void {\n  // Read through a ref so a caller passing a fresh closure every render does\n  // not tear the listener down and rebuild it on every keystroke.\n  const escapeRef = React.useRef(onEscape);\n  React.useEffect(() => {\n    escapeRef.current = onEscape;\n  });\n\n  React.useEffect(() => {\n    if (!active) return;\n\n    const layer = Symbol(\"dialog-layer\");\n    layers.push(layer);\n    const isTopLayer = () => layers[layers.length - 1] === layer;\n\n    const previouslyFocused =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : null;\n\n    const container = containerRef.current;\n    // Something inside may have claimed focus already — an `autoFocus` input —\n    // and that choice is better than any this could make.\n    if (container && !container.contains(document.activeElement)) {\n      const [first] = focusableWithin(container);\n      // The panel itself, not its first control: the first control is a Delete\n      // button often enough that focusing it would put a destructive action\n      // one Enter away from an accidental keypress.\n      (container.hasAttribute(\"tabindex\") ? container : first)?.focus();\n    }\n\n    function handleKeyDown(event: KeyboardEvent) {\n      if (!isTopLayer()) return;\n\n      if (event.key === \"Escape\") {\n        escapeRef.current?.();\n        return;\n      }\n\n      if (event.key !== \"Tab\") return;\n      const panel = containerRef.current;\n      if (!panel) return;\n\n      const items = focusableWithin(panel);\n      if (items.length === 0) {\n        event.preventDefault();\n        panel.focus();\n        return;\n      }\n\n      const first = items[0]!;\n      const last = items[items.length - 1]!;\n      const active = document.activeElement;\n      const outside = !panel.contains(active);\n\n      if (event.shiftKey && (active === first || outside)) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && (active === last || outside)) {\n        event.preventDefault();\n        first.focus();\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = previousOverflow;\n      const index = layers.indexOf(layer);\n      if (index !== -1) layers.splice(index, 1);\n      // Back where it came from, so closing a dialog opened by keyboard does\n      // not drop the caret at the top of the document.\n      if (previouslyFocused?.isConnected) previouslyFocused.focus();\n    };\n  }, [active, containerRef]);\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useDialogLayer } from \"./dialogLayer\";\nimport { cn } from \"./utils\";\n\nconst emptySubscribe = () => () => {};\n\n/**\n * Returns false during SSR and the first client render, then true once mounted.\n * `useSyncExternalStore` is the React-recommended way to read client-only state\n * without a setState-in-effect (which triggers cascading renders).\n */\nexport function useHasMounted(): boolean {\n  return React.useSyncExternalStore(\n    emptySubscribe,\n    () => true,\n    () => false,\n  );\n}\n\ninterface ModalProps {\n  isOpen: boolean;\n  /** id of the element labelling the dialog; wired to aria-labelledby. */\n  labelledBy: string;\n  /**\n   * Optional id(s) of elements describing the dialog (APG alertdialog body).\n   * Space-separated when multiple.\n   */\n  describedBy?: string;\n  /** Accessible label for the backdrop dismiss button. */\n  closeLabel: string;\n  onClose: () => void;\n  children: React.ReactNode;\n  /**\n   * When false, Escape and backdrop clicks do not close the modal (e.g. while a\n   * save is in flight). Defaults to true.\n   */\n  dismissible?: boolean;\n  /** Use \"alertdialog\" for destructive confirmations. Defaults to \"dialog\". */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Tailwind max-width class for the panel. Defaults to \"max-w-md\". */\n  panelClassName?: string;\n}\n\n/**\n * Shared modal shell: renders a portal-backed, scroll-locked, Escape-dismissible\n * overlay with a centered panel. Callers provide the panel body (heading, form,\n * footer). Consolidates the boilerplate previously copied across every dialog.\n */\nexport function Modal({\n  isOpen,\n  labelledBy,\n  describedBy,\n  closeLabel,\n  onClose,\n  children,\n  dismissible = true,\n  role = \"dialog\",\n  panelClassName,\n}: ModalProps) {\n  const mounted = useHasMounted();\n  const panelRef = React.useRef<HTMLDivElement>(null);\n\n  useDialogLayer({\n    // Gated on `mounted` too: before that the panel is not rendered, so there\n    // would be nothing to move focus into.\n    active: isOpen && mounted,\n    containerRef: panelRef,\n    onEscape: dismissible ? onClose : undefined,\n  });\n\n  if (!mounted || !isOpen) return null;\n\n  return createPortal(\n    /*\n      `overflow-y-auto` on the overlay, `my-auto` on the panel — not\n      `items-center`. A flex item centred with `align-items` overflows equally\n      in both directions once it is taller than its container, and the half\n      above the top edge cannot be scrolled to: with the page behind it locked,\n      an over-tall dialog was simply unreachable at both ends. Auto margins\n      centre a short panel the same way and collapse to zero on a tall one,\n      which scrolls.\n    */\n    <div className=\"fixed inset-0 z-[100] flex justify-center overflow-y-auto p-4\">\n      {/* `fixed`, not `absolute`: inside a scrolling overlay an absolute\n          backdrop scrolls away with the content and leaves the rest of a tall\n          dialog sitting on an undimmed page. */}\n      <button\n        type=\"button\"\n        aria-label={closeLabel}\n        tabIndex={-1}\n        className=\"fixed inset-0 bg-slate-950/50\"\n        onClick={() => {\n          if (dismissible) onClose();\n        }}\n      />\n      <div\n        ref={panelRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        tabIndex={-1}\n        className={cn(\n          \"border-border bg-background relative z-10 my-auto w-full rounded-lg border shadow-2xl outline-none\",\n          panelClassName ?? \"max-w-md p-6\",\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["import_lucide_react","React","import_react_dom","import_jsx_runtime","React","active","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/side-drawer.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface SideDrawerProps {
+    isOpen: boolean;
+    title: string;
+    onClose: () => void;
+    children: React.ReactNode;
+    /** Tailwind width class for the panel. Defaults to a reading-width column. */
+    panelClassName?: string;
+}
+/**
+ * A panel that slides in from the right.
+ *
+ * For content that belongs beside the page rather than on top of it — a queue
+ * you glance at and dismiss, not a decision you have to answer. Unlike
+ * `Modal`, it does not centre or dim the whole page to a stop: the table
+ * underneath stays readable, which is the point of looking at both.
+ */
+declare function SideDrawer({ isOpen, title, onClose, children, panelClassName, }: SideDrawerProps): React.ReactPortal | null;
+
+export { SideDrawer };

package/dist/side-drawer.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface SideDrawerProps {
+    isOpen: boolean;
+    title: string;
+    onClose: () => void;
+    children: React.ReactNode;
+    /** Tailwind width class for the panel. Defaults to a reading-width column. */
+    panelClassName?: string;
+}
+/**
+ * A panel that slides in from the right.
+ *
+ * For content that belongs beside the page rather than on top of it — a queue
+ * you glance at and dismiss, not a decision you have to answer. Unlike
+ * `Modal`, it does not centre or dim the whole page to a stop: the table
+ * underneath stays readable, which is the point of looking at both.
+ */
+declare function SideDrawer({ isOpen, title, onClose, children, panelClassName, }: SideDrawerProps): React.ReactPortal | null;
+
+export { SideDrawer };

package/dist/side-drawer.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  SideDrawer
+} from "./chunk-43ZUFY63.js";
+import "./chunk-YSU4VWRD.js";
+import "./chunk-HBBOR43A.js";
+import "./chunk-KR3BCFP7.js";
+import "./chunk-UE7JY7VR.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  SideDrawer
+};
+//# sourceMappingURL=side-drawer.js.map

package/dist/side-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/spinner.cjs

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/spinner.tsx
+var spinner_exports = {};
+__export(spinner_exports, {
+  Spinner: () => Spinner
+});
+module.exports = __toCommonJS(spinner_exports);
+var import_lucide_react = require("lucide-react");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIZES = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5",
+  xl: "size-10 border-2"
+};
+function Spinner({ size = "md", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_lucide_react.Loader2,
+    {
+      "aria-hidden": true,
+      className: cn("animate-spin", SIZES[size], className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spinner
+});
+//# sourceMappingURL=spinner.cjs.map

package/dist/spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner.tsx","../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one spinner.\n *\n * There were five spellings of `animate-spin` across twelve files — `h-4 w-4`,\n * `h-5 w-5`, `size-4`, bare, and a hand-drawn ring in `ProtectedRoute` — so the\n * same \"working\" signal came out a different size depending on which panel you\n * were on.\n *\n * It is `aria-hidden` on purpose. A spinner is decoration; what a screen reader\n * needs is the surrounding control's `aria-busy` or the panel's status text,\n * and announcing \"loading\" twice is worse than once. `Button` and `StatePanel`\n * both supply that.\n */\nconst SIZES = {\n  sm: \"size-3.5\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-10 border-2\",\n} as const;\n\nexport interface SpinnerProps extends React.SVGProps<SVGSVGElement> {\n  size?: keyof typeof SIZES;\n}\n\nexport function Spinner({ size = \"md\", className, ...props }: SpinnerProps) {\n  return (\n    <Loader2\n      aria-hidden\n      className={cn(\"animate-spin\", SIZES[size], className)}\n      {...props}\n    />\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAwB;;;ACDxB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD0BI;AAbJ,IAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,MAAM,IAAI,GAAG,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/{src/spinner.tsx → dist/spinner.d.cts}

@@ -1,7 +1,4 @@
-import * as React from "react";
-import { Loader2 } from "lucide-react";
-
-import { cn } from "./utils";
+import * as React from 'react';
 
 /**
  * The one spinner.
@@ -16,23 +13,15 @@ import { cn } from "./utils";
  * and announcing "loading" twice is worse than once. `Button` and `StatePanel`
  * both supply that.
  */
-const SIZES = {
-  sm: "size-3.5",
-  md: "size-4",
-  lg: "size-5",
-  xl: "size-10 border-2",
-} as const;
-
-export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
-  size?: keyof typeof SIZES;
+declare const SIZES: {
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+    readonly xl: "size-10 border-2";
+};
+interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+    size?: keyof typeof SIZES;
 }
+declare function Spinner({ size, className, ...props }: SpinnerProps): React.JSX.Element;
 
-export function Spinner({ size = "md", className, ...props }: SpinnerProps) {
-  return (
-    <Loader2
-      aria-hidden
-      className={cn("animate-spin", SIZES[size], className)}
-      {...props}
-    />
-  );
-}
+export { Spinner, type SpinnerProps };

package/dist/spinner.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * The one spinner.
+ *
+ * There were five spellings of `animate-spin` across twelve files — `h-4 w-4`,
+ * `h-5 w-5`, `size-4`, bare, and a hand-drawn ring in `ProtectedRoute` — so the
+ * same "working" signal came out a different size depending on which panel you
+ * were on.
+ *
+ * It is `aria-hidden` on purpose. A spinner is decoration; what a screen reader
+ * needs is the surrounding control's `aria-busy` or the panel's status text,
+ * and announcing "loading" twice is worse than once. `Button` and `StatePanel`
+ * both supply that.
+ */
+declare const SIZES: {
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+    readonly xl: "size-10 border-2";
+};
+interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+    size?: keyof typeof SIZES;
+}
+declare function Spinner({ size, className, ...props }: SpinnerProps): React.JSX.Element;
+
+export { Spinner, type SpinnerProps };

package/dist/spinner.js

@@ -0,0 +1,8 @@
+import {
+  Spinner
+} from "./chunk-UE7JY7VR.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/spreadsheet-grid.cjs

@@ -0,0 +1,238 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/spreadsheet-grid.tsx
+var spreadsheet_grid_exports = {};
+__export(spreadsheet_grid_exports, {
+  SpreadsheetGrid: () => SpreadsheetGrid
+});
+module.exports = __toCommonJS(spreadsheet_grid_exports);
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("table", { className: "w-full text-sm whitespace-nowrap select-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "text-muted-foreground border-border border-b text-left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("tbody", { children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+          "tr",
+          {
+            className: "border-border border-b",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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)
+        )) })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SpreadsheetGrid
+});
+//# sourceMappingURL=spreadsheet-grid.cjs.map

package/dist/spreadsheet-grid.cjs.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/spreadsheet-grid.d.cts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { CellRange, CellRef } from './clipboard.cjs';
+
+/**
+ * A column knows three things: its heading, the text it contributes to a copy
+ * or CSV export, and optionally how to draw itself.
+ *
+ * Keeping `value` and `render` together is what stops an exported sheet from
+ * drifting from the visible grid.
+ */
+type GridColumn<Row> = {
+    key: string;
+    title: string;
+    /** Text used for clipboard and CSV. Never JSX. */
+    value: (row: Row) => string;
+    /** Defaults to `value`. Use for links, tiles, truncation. */
+    render?: (row: Row) => React.ReactNode;
+    /** Extra classes for the <td>. */
+    className?: string;
+};
+interface SpreadsheetGridProps<Row> {
+    columns: GridColumn<Row>[];
+    rows: Row[];
+    /** Stable React key per row. Defaults to the row index. */
+    rowKey?: (row: Row, index: number) => string;
+    loading?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    ariaLabel?: string;
+    /** Lifted so a toolbar can copy and describe the current selection. */
+    range: CellRange | null;
+    onRangeChange: (selection: {
+        anchor: CellRef | null;
+        focus: CellRef | null;
+    }) => void;
+    onCopy: () => void;
+}
+/**
+ * Spreadsheet-like grid: click-drag a range, shift+click to extend, arrows to
+ * move, click a heading to take the column, click the row number to take the
+ * row, Cmd/Ctrl+A for everything, Escape to clear, Cmd/Ctrl+C to copy.
+ *
+ * Ported from video-shorts-panel's ExcelTable, which several panels share for
+ * exactly this reason — a table people paste into a sheet.
+ */
+declare function SpreadsheetGrid<Row>({ columns, rows, rowKey, loading, emptyMessage, loadingMessage, ariaLabel, range, onRangeChange, onCopy, }: SpreadsheetGridProps<Row>): React.JSX.Element;
+
+export { type GridColumn, SpreadsheetGrid, type SpreadsheetGridProps };

package/dist/spreadsheet-grid.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { CellRange, CellRef } from './clipboard.js';
+
+/**
+ * A column knows three things: its heading, the text it contributes to a copy
+ * or CSV export, and optionally how to draw itself.
+ *
+ * Keeping `value` and `render` together is what stops an exported sheet from
+ * drifting from the visible grid.
+ */
+type GridColumn<Row> = {
+    key: string;
+    title: string;
+    /** Text used for clipboard and CSV. Never JSX. */
+    value: (row: Row) => string;
+    /** Defaults to `value`. Use for links, tiles, truncation. */
+    render?: (row: Row) => React.ReactNode;
+    /** Extra classes for the <td>. */
+    className?: string;
+};
+interface SpreadsheetGridProps<Row> {
+    columns: GridColumn<Row>[];
+    rows: Row[];
+    /** Stable React key per row. Defaults to the row index. */
+    rowKey?: (row: Row, index: number) => string;
+    loading?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    ariaLabel?: string;
+    /** Lifted so a toolbar can copy and describe the current selection. */
+    range: CellRange | null;
+    onRangeChange: (selection: {
+        anchor: CellRef | null;
+        focus: CellRef | null;
+    }) => void;
+    onCopy: () => void;
+}
+/**
+ * Spreadsheet-like grid: click-drag a range, shift+click to extend, arrows to
+ * move, click a heading to take the column, click the row number to take the
+ * row, Cmd/Ctrl+A for everything, Escape to clear, Cmd/Ctrl+C to copy.
+ *
+ * Ported from video-shorts-panel's ExcelTable, which several panels share for
+ * exactly this reason — a table people paste into a sheet.
+ */
+declare function SpreadsheetGrid<Row>({ columns, rows, rowKey, loading, emptyMessage, loadingMessage, ariaLabel, range, onRangeChange, onCopy, }: SpreadsheetGridProps<Row>): React.JSX.Element;
+
+export { type GridColumn, SpreadsheetGrid, type SpreadsheetGridProps };

package/dist/spreadsheet-grid.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  SpreadsheetGrid
+} from "./chunk-MQT5RAQV.js";
+export {
+  SpreadsheetGrid
+};
+//# sourceMappingURL=spreadsheet-grid.js.map

package/dist/spreadsheet-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}