@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/index.cjs

@@ -0,0 +1,3008 @@
+"use client";
+"use strict";
+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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Alert: () => Alert,
+  Autocomplete: () => Autocomplete,
+  Badge: () => Badge,
+  Breadcrumb: () => Breadcrumb,
+  Button: () => Button,
+  CSV_DELIMITER: () => CSV_DELIMITER,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Checkbox: () => Checkbox,
+  CollapsibleSection: () => CollapsibleSection,
+  ConfirmDialog: () => ConfirmDialog,
+  CopyButton: () => CopyButton,
+  DataTable: () => DataTable,
+  DateRangePicker: () => DateRangePicker,
+  FeatureAccessGate: () => FeatureAccessGate,
+  Field: () => Field,
+  ImageUploader: () => ImageUploader,
+  Input: () => Input,
+  Label: () => Label,
+  Modal: () => Modal,
+  PageHeader: () => PageHeader,
+  Pagination: () => Pagination,
+  PanelBrandMark: () => PanelBrandMark,
+  PanelSignIn: () => PanelSignIn,
+  PanelSignInSkeleton: () => PanelSignInSkeleton,
+  SegmentedControl: () => SegmentedControl,
+  Select: () => Select,
+  Separator: () => Separator,
+  SideDrawer: () => SideDrawer,
+  Spinner: () => Spinner,
+  SpreadsheetGrid: () => SpreadsheetGrid,
+  StatePanel: () => StatePanel,
+  Switch: () => Switch,
+  TSV_DELIMITER: () => TSV_DELIMITER,
+  TabPanel: () => TabPanel,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
+  addDays: () => addDays,
+  addMonths: () => addMonths,
+  alertVariants: () => alertVariants,
+  badgeVariants: () => badgeVariants,
+  buildRangeText: () => buildRangeText,
+  checkboxClass: () => checkboxClass,
+  cn: () => cn,
+  countCells: () => countCells,
+  createdRangeMs: () => createdRangeMs,
+  describeRange: () => describeRange,
+  endAt2359Ms: () => endAt2359Ms,
+  endOfDayMs: () => endOfDayMs,
+  escapeCell: () => escapeCell,
+  formatDisplay: () => formatDisplay,
+  fromIsoDate: () => fromIsoDate,
+  fullRange: () => fullRange,
+  inputClass: () => inputClass,
+  isSameDay: () => isSameDay,
+  monthGrid: () => monthGrid,
+  monthLabel: () => monthLabel,
+  normalizeRange: () => normalizeRange,
+  startOfDayMs: () => startOfDayMs,
+  startOfMonth: () => startOfMonth,
+  textareaClass: () => textareaClass,
+  toIsoDate: () => toIsoDate,
+  useDialogLayer: () => useDialogLayer,
+  useHasMounted: () => useHasMounted,
+  writeToClipboard: () => writeToClipboard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/alert.tsx
+var React = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+
+// 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/alert.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var alertVariants = (0, import_class_variance_authority.cva)("rounded-lg border px-3 py-2 text-sm", {
+  variants: {
+    variant: {
+      danger: "border-destructive/30 bg-destructive/5 text-destructive",
+      warning: "border-warning/30 bg-warning/5 text-warning",
+      success: "border-success/30 bg-success/5 text-success",
+      info: "border-info/30 bg-info/5 text-info",
+      /**
+       * The quiet state of a banner that also has loud ones — "no default
+       * campaign set" next to "this is the default". Without it those callers
+       * keep a ternary of raw class strings and the shared component only
+       * covers half of what they draw.
+       */
+      neutral: "border-border bg-muted/40 text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    // Failure is what a banner almost always reports here, and defaulting to
+    // it means the noisy case cannot be forgotten.
+    variant: "danger"
+  }
+});
+var Alert = React.forwardRef(
+  ({ className, variant, action, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      role: variant === "danger" || variant == null ? "alert" : "status",
+      className: cn(
+        alertVariants({ variant }),
+        action && "flex flex-wrap items-center justify-between gap-3",
+        className
+      ),
+      ...props,
+      children: [
+        action ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }) : children,
+        action
+      ]
+    }
+  )
+);
+Alert.displayName = "Alert";
+
+// src/autocomplete.tsx
+var React4 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
+var import_lucide_react = require("lucide-react");
+
+// src/modal.tsx
+var React3 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// src/dialogLayer.ts
+var React2 = __toESM(require("react"), 1);
+var layers = [];
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(element) {
+  if (element.closest("[hidden]")) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  return typeof element.checkVisibility === "function" ? element.checkVisibility() : true;
+}
+function focusableWithin(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    isVisible
+  );
+}
+function useDialogLayer({
+  active,
+  containerRef,
+  onEscape
+}) {
+  const escapeRef = React2.useRef(onEscape);
+  React2.useEffect(() => {
+    escapeRef.current = onEscape;
+  });
+  React2.useEffect(() => {
+    if (!active) return;
+    const layer = /* @__PURE__ */ Symbol("dialog-layer");
+    layers.push(layer);
+    const isTopLayer = () => layers[layers.length - 1] === layer;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const container = containerRef.current;
+    if (container && !container.contains(document.activeElement)) {
+      const [first] = focusableWithin(container);
+      (container.hasAttribute("tabindex") ? container : first)?.focus();
+    }
+    function handleKeyDown(event) {
+      if (!isTopLayer()) return;
+      if (event.key === "Escape") {
+        escapeRef.current?.();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const panel = containerRef.current;
+      if (!panel) return;
+      const items = focusableWithin(panel);
+      if (items.length === 0) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active2 = document.activeElement;
+      const outside = !panel.contains(active2);
+      if (event.shiftKey && (active2 === first || outside)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (active2 === last || outside)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = previousOverflow;
+      const index = layers.indexOf(layer);
+      if (index !== -1) layers.splice(index, 1);
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
+  }, [active, containerRef]);
+}
+
+// src/modal.tsx
+var import_jsx_runtime2 = (
+  /*
+    `overflow-y-auto` on the overlay, `my-auto` on the panel — not
+    `items-center`. A flex item centred with `align-items` overflows equally
+    in both directions once it is taller than its container, and the half
+    above the top edge cannot be scrolled to: with the page behind it locked,
+    an over-tall dialog was simply unreachable at both ends. Auto margins
+    centre a short panel the same way and collapse to zero on a tall one,
+    which scrolls.
+  */
+  require("react/jsx-runtime")
+);
+var emptySubscribe = () => () => {
+};
+function useHasMounted() {
+  return React3.useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+function Modal({
+  isOpen,
+  labelledBy,
+  describedBy,
+  closeLabel,
+  onClose,
+  children,
+  dismissible = true,
+  role = "dialog",
+  panelClassName
+}) {
+  const mounted = useHasMounted();
+  const panelRef = React3.useRef(null);
+  useDialogLayer({
+    // Gated on `mounted` too: before that the panel is not rendered, so there
+    // would be nothing to move focus into.
+    active: isOpen && mounted,
+    containerRef: panelRef,
+    onEscape: dismissible ? onClose : void 0
+  });
+  if (!mounted || !isOpen) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fixed inset-0 z-[100] flex justify-center overflow-y-auto p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": closeLabel,
+          tabIndex: -1,
+          className: "fixed inset-0 bg-overlay/50",
+          onClick: () => {
+            if (dismissible) onClose();
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          ref: panelRef,
+          role,
+          "aria-modal": "true",
+          "aria-labelledby": labelledBy,
+          "aria-describedby": describedBy,
+          tabIndex: -1,
+          className: cn(
+            "border-border bg-background relative z-10 my-auto w-full rounded-lg border shadow-2xl outline-none",
+            panelClassName ?? "max-w-md p-6"
+          ),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+// src/autocomplete.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PREFERRED_LIST_HEIGHT = 224;
+var MIN_LIST_HEIGHT = 120;
+var VIEWPORT_MARGIN = 8;
+var ANCHOR_GAP = 4;
+function normalizeQuery(query) {
+  return query.trim().toLowerCase();
+}
+function filterOptions(options, query) {
+  const normalized = normalizeQuery(query);
+  if (!normalized) return options;
+  return options.filter(
+    (option) => option.label.toLowerCase().includes(normalized) || option.value.toLowerCase().includes(normalized)
+  );
+}
+function getOptionLabel(options, value) {
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+function parseTagTokens(raw) {
+  const seen = /* @__PURE__ */ new Set();
+  const tokens = [];
+  for (const part of raw.split(/[\s,]+/)) {
+    const token = part.trim();
+    if (!token || seen.has(token)) continue;
+    seen.add(token);
+    tokens.push(token);
+  }
+  return tokens;
+}
+function Autocomplete(props) {
+  const {
+    options,
+    placeholder = "Search\u2026",
+    disabled = false,
+    className,
+    emptyMessage = "No results found",
+    id,
+    ariaLabel,
+    size = "default",
+    creatable = false,
+    clearable = true
+  } = props;
+  const multiple = props.multiple ?? false;
+  const singleValue = multiple ? void 0 : props.value;
+  const multipleValue = multiple ? props.value : void 0;
+  const selectedValues = React4.useMemo(() => {
+    if (multiple) return multipleValue ?? [];
+    return singleValue ? [singleValue] : [];
+  }, [multiple, multipleValue, singleValue]);
+  const onSingleChange = !multiple ? props.onChange : void 0;
+  const onMultipleChange = multiple ? props.onChange : void 0;
+  const containerRef = React4.useRef(null);
+  const dropdownRef = React4.useRef(null);
+  const inputRef = React4.useRef(null);
+  const listRef = React4.useRef(null);
+  const ignoreBlurRef = React4.useRef(false);
+  const mounted = useHasMounted();
+  const [open, setOpen] = React4.useState(false);
+  const [position, setPosition] = React4.useState(null);
+  const [query, setQuery] = React4.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React4.useState(0);
+  const filteredOptions = React4.useMemo(
+    () => filterOptions(options, query),
+    [options, query]
+  );
+  const safeHighlightedIndex = highlightedIndex >= filteredOptions.length ? Math.max(filteredOptions.length - 1, 0) : highlightedIndex;
+  const close = React4.useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setHighlightedIndex(0);
+  }, []);
+  const openDropdown = React4.useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    setHighlightedIndex(0);
+  }, [disabled]);
+  const commitSingleValue = React4.useCallback(
+    (value) => {
+      if (!multiple) {
+        onSingleChange?.(value);
+        close();
+      }
+    },
+    [close, multiple, onSingleChange]
+  );
+  const toggleMultipleValue = React4.useCallback(
+    (value) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(
+        selectedValues.includes(value) ? selectedValues.filter((item) => item !== value) : [...selectedValues, value]
+      );
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [multiple, onMultipleChange, selectedValues]
+  );
+  const commitCustomValues = React4.useCallback(
+    (raw) => {
+      if (!creatable) return;
+      if (!multiple) {
+        const value = raw.trim();
+        if (!value) return;
+        commitSingleValue(value);
+        return;
+      }
+      if (!onMultipleChange) return;
+      const tokens = parseTagTokens(raw);
+      if (!tokens.length) return;
+      const next = [...selectedValues];
+      for (const token of tokens) {
+        if (!next.includes(token)) next.push(token);
+      }
+      onMultipleChange(next);
+      setQuery("");
+      setHighlightedIndex(0);
+    },
+    [commitSingleValue, creatable, multiple, onMultipleChange, selectedValues]
+  );
+  const removeValue = React4.useCallback(
+    (value) => {
+      if (!multiple || !onMultipleChange) return;
+      onMultipleChange(selectedValues.filter((item) => item !== value));
+      window.requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    [multiple, onMultipleChange, selectedValues]
+  );
+  const selectOption = React4.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      ignoreBlurRef.current = true;
+      window.setTimeout(() => {
+        ignoreBlurRef.current = false;
+      }, 0);
+      if (multiple) {
+        toggleMultipleValue(option.value);
+        window.requestAnimationFrame(() => inputRef.current?.focus());
+        return;
+      }
+      commitSingleValue(option.value);
+    },
+    [commitSingleValue, multiple, toggleMultipleValue]
+  );
+  const selectHighlighted = React4.useCallback(() => {
+    const option = filteredOptions[safeHighlightedIndex];
+    if (!option) return;
+    selectOption(option);
+  }, [filteredOptions, safeHighlightedIndex, selectOption]);
+  React4.useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(event) {
+      const target = event.target;
+      if (containerRef.current?.contains(target) || dropdownRef.current?.contains(target)) {
+        return;
+      }
+      close();
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [close, open]);
+  React4.useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const anchor = containerRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const below = window.innerHeight - rect.bottom - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const above = rect.top - ANCHOR_GAP - VIEWPORT_MARGIN;
+      const flip = below < Math.min(PREFERRED_LIST_HEIGHT, MIN_LIST_HEIGHT) && above > below;
+      const room = flip ? above : below;
+      const width = Math.max(rect.width, size === "compact" ? 220 : 0);
+      const left = Math.max(
+        VIEWPORT_MARGIN,
+        Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN)
+      );
+      setPosition({
+        left,
+        width,
+        maxHeight: Math.max(
+          MIN_LIST_HEIGHT,
+          Math.min(PREFERRED_LIST_HEIGHT, room)
+        ),
+        ...flip ? { bottom: window.innerHeight - rect.top + ANCHOR_GAP } : { top: rect.bottom + ANCHOR_GAP }
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, size]);
+  React4.useEffect(() => {
+    if (!open || !listRef.current) return;
+    const highlighted = listRef.current.children[safeHighlightedIndex];
+    highlighted?.scrollIntoView({ block: "nearest" });
+  }, [safeHighlightedIndex, open]);
+  function handleInputKeyDown(event) {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(
+          Math.min(safeHighlightedIndex + 1, filteredOptions.length - 1)
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        setHighlightedIndex(Math.max(safeHighlightedIndex - 1, 0));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (creatable && query.trim()) {
+          if (multiple || filteredOptions.length === 0) {
+            commitCustomValues(query);
+            return;
+          }
+        }
+        if (!open) {
+          openDropdown();
+          return;
+        }
+        selectHighlighted();
+        break;
+      case ",":
+        if (creatable && multiple && query.trim()) {
+          event.preventDefault();
+          commitCustomValues(query);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Backspace":
+        if (multiple && query.length === 0 && selectedValues.length > 0) {
+          event.preventDefault();
+          removeValue(selectedValues[selectedValues.length - 1]);
+        }
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        break;
+    }
+  }
+  const displayValue = !multiple && !open && !query && selectedValues[0] ? getOptionLabel(options, selectedValues[0]) : query;
+  const inputPlaceholder = multiple && selectedValues.length > 0 ? "" : placeholder;
+  const createLabel = query.trim();
+  const canCreate = creatable && Boolean(createLabel) && !selectedValues.includes(createLabel);
+  const listboxId = id ? `${id}-listbox` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative",
+        size === "compact" ? "w-auto min-w-24" : "w-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: cn(
+              "border-border bg-background flex w-full cursor-pointer items-center rounded-md border transition-colors",
+              "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-2",
+              size === "compact" ? "min-h-0 gap-0.5 border-transparent bg-transparent px-1 py-0.5 text-xs shadow-none" : "min-h-9 gap-1.5 px-2 py-1.5 text-sm shadow-sm",
+              disabled && "cursor-not-allowed opacity-50",
+              open && "border-ring ring-ring/30 ring-2"
+            ),
+            onPointerDown: (event) => {
+              if (disabled) return;
+              if (event.target.closest("[data-option]")) return;
+              if (event.target.closest("[data-chip-remove]"))
+                return;
+              if (!event.target.closest("input")) {
+                event.preventDefault();
+                inputRef.current?.focus();
+              }
+              openDropdown();
+            },
+            children: [
+              size === "compact" ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Search, { className: "text-muted-foreground size-4 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: [
+                multiple && selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "span",
+                  {
+                    className: "bg-primary/10 text-primary inline-flex max-w-full items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate", children: getOptionLabel(options, value) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          "data-chip-remove": true,
+                          className: "text-primary/70 hover:bg-primary/15 hover:text-primary rounded-sm transition",
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            removeValue(value);
+                          },
+                          "aria-label": `Remove ${getOptionLabel(options, value)}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.X, { className: "size-3" })
+                        }
+                      )
+                    ]
+                  },
+                  value
+                )),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    id,
+                    type: "text",
+                    role: "combobox",
+                    "aria-label": ariaLabel,
+                    "aria-expanded": open,
+                    "aria-controls": listboxId,
+                    "aria-autocomplete": "list",
+                    disabled,
+                    value: displayValue,
+                    placeholder: inputPlaceholder,
+                    className: cn(
+                      "placeholder:text-muted-foreground flex-1 bg-transparent outline-none",
+                      size === "compact" ? "min-w-0" : "min-w-[6rem]"
+                    ),
+                    onFocus: openDropdown,
+                    onBlur: () => {
+                      if (ignoreBlurRef.current) return;
+                      close();
+                    },
+                    onChange: (event) => {
+                      setQuery(event.target.value);
+                      setHighlightedIndex(0);
+                      if (!open) setOpen(true);
+                    },
+                    onKeyDown: handleInputKeyDown,
+                    onPaste: (event) => {
+                      if (!creatable || !multiple) return;
+                      const text = event.clipboardData.getData("text");
+                      if (!/[\s,]/.test(text)) return;
+                      event.preventDefault();
+                      commitCustomValues(text);
+                    }
+                  }
+                )
+              ] }),
+              clearable && !multiple && selectedValues[0] && !disabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "text-muted-foreground hover:bg-muted hover:text-foreground rounded-sm p-0.5 transition",
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onSingleChange?.("");
+                    setQuery("");
+                    inputRef.current?.focus();
+                  },
+                  "aria-label": "Clear selection",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.X, { className: "size-3.5" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_lucide_react.ChevronDown,
+                {
+                  className: cn(
+                    "text-muted-foreground shrink-0 transition-transform",
+                    size === "compact" ? "size-3" : "size-4",
+                    open && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && mounted && position ? (0, import_react_dom2.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              ref: dropdownRef,
+              "data-autocomplete-dropdown": true,
+              style: {
+                position: "fixed",
+                left: position.left,
+                width: position.width,
+                top: position.top,
+                bottom: position.bottom,
+                // Above the modal shell (z-100) it is usually opened inside.
+                zIndex: 200
+              },
+              className: "border-border bg-background overflow-hidden rounded-md border shadow-lg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "ul",
+                {
+                  ref: listRef,
+                  id: listboxId,
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  className: "overflow-y-auto p-1",
+                  style: { maxHeight: position.maxHeight },
+                  children: filteredOptions.length === 0 && !canCreate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "text-muted-foreground px-3 py-6 text-center text-sm", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    filteredOptions.map((option, index) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      const isHighlighted = index === safeHighlightedIndex;
+                      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "li",
+                        {
+                          "data-option": true,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          "aria-disabled": option.disabled || void 0,
+                          className: cn(
+                            "flex cursor-pointer items-center gap-2 rounded-sm transition-colors",
+                            size === "compact" ? "px-2 py-1 text-xs" : "px-2.5 py-2 text-sm",
+                            isHighlighted && "bg-muted",
+                            option.disabled && "cursor-not-allowed opacity-50"
+                          ),
+                          onMouseEnter: () => setHighlightedIndex(index),
+                          onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            selectOption(option);
+                          },
+                          children: [
+                            multiple ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              "span",
+                              {
+                                className: cn(
+                                  "border-border flex size-4 shrink-0 items-center justify-center rounded border",
+                                  isSelected && "border-primary bg-primary text-primary-foreground"
+                                ),
+                                children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { className: "size-3" }) : null
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_lucide_react.Check,
+                              {
+                                className: cn(
+                                  "text-primary size-4 shrink-0",
+                                  isSelected ? "opacity-100" : "opacity-0"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate", children: option.label })
+                          ]
+                        },
+                        option.value
+                      );
+                    }),
+                    canCreate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "li",
+                      {
+                        "data-option": true,
+                        role: "option",
+                        "aria-selected": false,
+                        className: "hover:bg-muted flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-sm transition-colors",
+                        onPointerDown: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          ignoreBlurRef.current = true;
+                          window.setTimeout(() => {
+                            ignoreBlurRef.current = false;
+                          }, 0);
+                          commitCustomValues(query);
+                          window.requestAnimationFrame(
+                            () => inputRef.current?.focus()
+                          );
+                        },
+                        children: [
+                          "Add \u201C",
+                          createLabel,
+                          "\u201D"
+                        ]
+                      }
+                    ) : null
+                  ] })
+                }
+              )
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/badge.tsx
+var React5 = __toESM(require("react"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center gap-1 rounded font-medium whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        neutral: "bg-muted text-muted-foreground",
+        success: "bg-success/15 text-success",
+        warning: "bg-warning/15 text-warning",
+        danger: "bg-destructive/15 text-destructive",
+        info: "bg-info/15 text-info"
+      },
+      size: {
+        /** Inline chips — a category, a tenant, a permission. */
+        sm: "px-1.5 py-0.5 text-xs",
+        /** A row's status. */
+        md: "px-2 py-0.5 text-xs"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "md"
+    }
+  }
+);
+var Badge = React5.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      ref,
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Badge.displayName = "Badge";
+
+// src/breadcrumb.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Breadcrumb({ items, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { "aria-label": "Breadcrumb", className: cn("text-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsxs)(
+      "li",
+      {
+        className: "flex items-center gap-1.5",
+        children: [
+          index > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_lucide_react2.ChevronRight,
+            {
+              className: "text-muted-foreground/70 size-3.5 shrink-0",
+              "aria-hidden": true
+            }
+          ),
+          isInteractive ? item.href ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "a",
+            {
+              href: item.href,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: item.onClick,
+              className: "text-muted-foreground hover:text-foreground transition",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              className: cn(
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
+              ),
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            }
+          )
+        ]
+      },
+      `${item.label}-${index}`
+    );
+  }) }) });
+}
+
+// src/button.tsx
+var React6 = __toESM(require("react"), 1);
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+
+// src/spinner.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime6 = 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_runtime6.jsx)(
+    import_lucide_react3.Loader2,
+    {
+      "aria-hidden": true,
+      className: cn("animate-spin", SIZES[size], className),
+      ...props
+    }
+  );
+}
+
+// src/button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority3.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 = React6.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Comp,
+        {
+          ref,
+          className: cn(buttonVariants({ variant, size }), className),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "button",
+      {
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "sm" }) : null,
+          loading && size != null && ICON_SIZES.has(size) ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/card.tsx
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Card = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "bg-card text-card-foreground rounded-xl border shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("leading-none font-semibold tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/checkbox.tsx
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var checkboxClass = "accent-primary border-border focus-visible:ring-ring size-4 shrink-0 cursor-pointer rounded border focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+var Checkbox = React8.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      className: cn(checkboxClass, className),
+      ...props
+    }
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+// src/clipboard.ts
+var TSV_DELIMITER = "	";
+var CSV_DELIMITER = ",";
+function normalizeRange(anchor, focus) {
+  if (!anchor || !focus) return null;
+  return {
+    r1: Math.min(anchor.r, focus.r),
+    r2: Math.max(anchor.r, focus.r),
+    c1: Math.min(anchor.c, focus.c),
+    c2: Math.max(anchor.c, focus.c)
+  };
+}
+function escapeCell(raw, delimiter) {
+  const value = raw == null ? "" : String(raw);
+  if (value.includes(delimiter) || value.includes("\n") || value.includes("\r") || value.includes('"')) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function buildRangeText(range, columns, rows, delimiter, includeHeaders) {
+  if (!range) return "";
+  const lines = [];
+  if (includeHeaders) {
+    const header = [];
+    for (let c = range.c1; c <= range.c2; c++) {
+      header.push(escapeCell(columns[c]?.title, delimiter));
+    }
+    lines.push(header.join(delimiter));
+  }
+  for (let r = range.r1; r <= range.r2; r++) {
+    const line = [];
+    const row = rows[r];
+    for (let c = range.c1; c <= range.c2; c++) {
+      const column = columns[c];
+      line.push(
+        escapeCell(
+          column && row !== void 0 ? column.value(row) : "",
+          delimiter
+        )
+      );
+    }
+    lines.push(line.join(delimiter));
+  }
+  return lines.join("\n");
+}
+function fullRange(columns, rows) {
+  if (!rows.length || !columns.length) return null;
+  return { r1: 0, r2: rows.length - 1, c1: 0, c2: columns.length - 1 };
+}
+function describeRange(range) {
+  if (!range) return "No selection";
+  const rowCount = range.r2 - range.r1 + 1;
+  const colCount = range.c2 - range.c1 + 1;
+  if (rowCount === 1 && colCount === 1) return "1 cell selected";
+  return `${rowCount} \xD7 ${colCount} selected`;
+}
+function countCells(range) {
+  return {
+    rows: range.r2 - range.r1 + 1,
+    columns: range.c2 - range.c1 + 1
+  };
+}
+async function writeToClipboard(text) {
+  if (navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.top = "-1000px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  try {
+    if (!document.execCommand("copy")) {
+      throw new Error("Could not write to the clipboard");
+    }
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+// src/collapsible.tsx
+var import_lucide_react4 = require("lucide-react");
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CollapsibleSection({
+  title,
+  icon,
+  defaultOpen = true,
+  right,
+  className,
+  children
+}) {
+  const [open, setOpen] = React9.useState(defaultOpen);
+  const bodyId = React9.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("border-border rounded-lg border", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        onClick: () => setOpen((current) => !current),
+        className: "hover:bg-muted/50 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-semibold transition",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_lucide_react4.ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": true,
+              className: cn(
+                "shrink-0 transition-transform",
+                open ? "" : "-rotate-90"
+              )
+            }
+          ),
+          icon,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1", children: title }),
+          right
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: bodyId, hidden: !open, className: "space-y-3 px-3 pt-1 pb-3", children })
+  ] });
+}
+
+// src/confirm-dialog.tsx
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ConfirmDialog({
+  isOpen,
+  title,
+  description,
+  confirmLabel = "Delete",
+  cancelLabel = "Cancel",
+  isConfirming,
+  error,
+  onConfirm,
+  onClose
+}) {
+  const titleId = React10.useId();
+  const descriptionId = React10.useId();
+  const errorId = React10.useId();
+  const describedBy = [
+    description ? descriptionId : null,
+    error ? errorId : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    Modal,
+    {
+      isOpen,
+      role: "alertdialog",
+      labelledBy: titleId,
+      describedBy: describedBy || void 0,
+      closeLabel: "Close dialog",
+      onClose,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { id: titleId, className: "text-lg font-semibold", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { id: descriptionId, className: "text-muted-foreground mt-2 text-sm", children: description }) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            id: errorId,
+            role: "alert",
+            className: "border-destructive/30 bg-destructive/5 text-destructive mt-4 rounded-lg border px-3 py-2 text-sm",
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-6 flex justify-end gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant: "outline", onClick: onClose, disabled: isConfirming, children: cancelLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Button,
+            {
+              variant: "destructive",
+              onClick: onConfirm,
+              loading: isConfirming,
+              children: confirmLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/copy-button.tsx
+var import_lucide_react5 = require("lucide-react");
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CopyButton({
+  value,
+  label,
+  className
+}) {
+  const [copied, setCopied] = React11.useState(false);
+  React11.useEffect(() => {
+    if (!copied) return;
+    const timer = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": copied ? `${label} copied` : `Copy ${label}`,
+      title: copied ? "Copied" : `Copy ${label}`,
+      className: cn(
+        "text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring shrink-0 cursor-pointer rounded p-1 transition focus-visible:ring-2 focus-visible:outline-none",
+        className
+      ),
+      onClick: () => {
+        void writeToClipboard(value).then(() => setCopied(true)).catch(() => void 0);
+      },
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Check, { className: "size-3.5 text-success", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Copy, { className: "size-3.5", "aria-hidden": true })
+    }
+  );
+}
+
+// src/data-table.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var HEADER_VARIANTS = {
+  uppercase: "border-border bg-muted/40 text-muted-foreground border-b text-xs tracking-wide uppercase",
+  plain: "text-muted-foreground border-border border-b text-left"
+};
+var DENSITY = {
+  comfortable: "px-4 py-3",
+  compact: "px-3 py-2"
+};
+var ALIGN = {
+  left: "text-left",
+  right: "text-right",
+  center: "text-center"
+};
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  variant = "uppercase",
+  density = "comfortable",
+  stickyHeader = false,
+  rowClassName,
+  emptyMessage,
+  footer,
+  ariaLabel,
+  className,
+  tableClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: cn(
+        "border-border bg-background/80 overflow-x-auto rounded-lg border",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "table",
+        {
+          "aria-label": ariaLabel,
+          className: cn("min-w-full text-left text-sm", tableClassName),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "thead",
+              {
+                className: cn(
+                  HEADER_VARIANTS[variant],
+                  stickyHeader && "bg-muted sticky top-0 z-10"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "th",
+                  {
+                    scope: "col",
+                    "aria-sort": column.ariaSort,
+                    className: cn(
+                      DENSITY[density],
+                      "font-medium",
+                      ALIGN[column.align ?? "left"],
+                      column.headerClassName
+                    ),
+                    children: column.title
+                  },
+                  column.key
+                )) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: rows.length === 0 && emptyMessage != null ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "td",
+              {
+                colSpan: columns.length,
+                className: "text-muted-foreground px-4 py-6 text-center text-sm",
+                children: emptyMessage
+              }
+            ) }) : rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "tr",
+              {
+                className: cn(
+                  "border-border/70 border-b last:border-0",
+                  rowClassName?.(row, index)
+                ),
+                children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "td",
+                  {
+                    className: cn(
+                      DENSITY[density],
+                      ALIGN[column.align ?? "left"],
+                      column.className
+                    ),
+                    children: column.cell(row, index)
+                  },
+                  column.key
+                ))
+              },
+              rowKey(row, index)
+            )) }),
+            footer != null ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tfoot", { children: footer }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/date-range-picker/index.tsx
+var import_lucide_react6 = require("lucide-react");
+var React12 = __toESM(require("react"), 1);
+
+// 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)
+  };
+}
+
+// src/date-range-picker/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PRESETS = [
+  {
+    label: "Today",
+    range: () => {
+      const today = toIsoDate(/* @__PURE__ */ new Date());
+      return { from: today, to: today };
+    }
+  },
+  {
+    label: "Yesterday",
+    range: () => {
+      const day = toIsoDate(addDays(/* @__PURE__ */ new Date(), -1));
+      return { from: day, to: day };
+    }
+  },
+  {
+    label: "Last 7 days",
+    range: () => ({
+      from: toIsoDate(addDays(/* @__PURE__ */ new Date(), -6)),
+      to: toIsoDate(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last 30 days",
+    range: () => ({
+      from: toIsoDate(addDays(/* @__PURE__ */ new Date(), -29)),
+      to: toIsoDate(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "This month",
+    range: () => ({
+      from: toIsoDate(startOfMonth(/* @__PURE__ */ new Date())),
+      to: toIsoDate(/* @__PURE__ */ new Date())
+    })
+  }
+];
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function DateRangePicker({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Any date",
+  className,
+  ariaLabel = "Date range"
+}) {
+  const [open, setOpen] = React12.useState(false);
+  const [hovered, setHovered] = React12.useState(null);
+  const [pendingFrom, setPendingFrom] = React12.useState(null);
+  const rootRef = React12.useRef(null);
+  const from = fromIsoDate(value.from);
+  const to = fromIsoDate(value.to);
+  const [viewMonth, setViewMonth] = React12.useState(
+    () => startOfMonth(from ?? /* @__PURE__ */ new Date())
+  );
+  React12.useEffect(() => {
+    if (!open) return void 0;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  function openPicker() {
+    setViewMonth(startOfMonth(fromIsoDate(value.from) ?? /* @__PURE__ */ new Date()));
+    setPendingFrom(null);
+    setHovered(null);
+    setOpen(true);
+  }
+  const anchor = pendingFrom ?? (to ? null : from);
+  const previewEnd = pendingFrom ? hovered : null;
+  function rangeBounds() {
+    if (pendingFrom) {
+      if (!previewEnd) return [pendingFrom, pendingFrom];
+      return previewEnd.getTime() < pendingFrom.getTime() ? [previewEnd, pendingFrom] : [pendingFrom, previewEnd];
+    }
+    return [from, to];
+  }
+  const [rangeStart, rangeEnd] = rangeBounds();
+  function selectDay(day) {
+    if (!anchor) {
+      setPendingFrom(day);
+      onChange({ from: toIsoDate(day), to: "" });
+      return;
+    }
+    const [start, end] = day.getTime() < anchor.getTime() ? [day, anchor] : [anchor, day];
+    onChange({ from: toIsoDate(start), to: toIsoDate(end) });
+    setPendingFrom(null);
+    setHovered(null);
+    setOpen(false);
+  }
+  function onGridKeyDown(event) {
+    const offsets = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    const offset = offsets[event.key];
+    if (offset === void 0) return;
+    const focused = document.activeElement;
+    const iso = focused?.dataset?.day;
+    const current = fromIsoDate(iso);
+    if (!current) return;
+    event.preventDefault();
+    const next = addDays(current, offset);
+    const nextIso = toIsoDate(next);
+    if (!rootRef.current?.querySelector(`[data-day="${nextIso}"]`)) {
+      setViewMonth(startOfMonth(offset < 0 ? next : addMonths(next, -1)));
+    }
+    window.requestAnimationFrame(() => {
+      rootRef.current?.querySelector(`[data-day="${nextIso}"]`)?.focus();
+    });
+  }
+  const label = value.from || value.to ? `${formatDisplay(value.from) || "Any"} \u2192 ${formatDisplay(value.to) || "Any"}` : placeholder;
+  const today = /* @__PURE__ */ new Date();
+  function renderMonth(month) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-[15.75rem] shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-foreground mb-2 text-center text-sm font-medium whitespace-nowrap", children: monthLabel(month) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-muted-foreground grid grid-cols-7 text-center text-[11px]", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid size-9 place-items-center", children: day }, day)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-cols-7", children: monthGrid(month).map((day) => {
+        const iso = toIsoDate(day);
+        const outside = day.getMonth() !== month.getMonth();
+        const isStart = isSameDay(day, rangeStart);
+        const isEnd = isSameDay(day, rangeEnd);
+        const inRange = rangeStart != null && rangeEnd != null && day.getTime() > rangeStart.getTime() && day.getTime() < rangeEnd.getTime();
+        const isToday = isSameDay(day, today);
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-day": iso,
+            onClick: () => selectDay(day),
+            onMouseEnter: () => setHovered(day),
+            "aria-label": day.toDateString(),
+            "aria-pressed": isStart || isEnd,
+            className: cn(
+              "focus-visible:ring-ring relative grid size-9 place-items-center rounded-md text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none",
+              outside ? "text-muted-foreground/50" : "text-foreground",
+              inRange && "bg-primary/10 rounded-none",
+              (isStart || isEnd) && "bg-primary text-primary-foreground font-medium",
+              // Square off the inner edge so a range reads as one bar
+              // rather than two pills with a gap.
+              isStart && rangeEnd && !isEnd && "rounded-r-none",
+              isEnd && rangeStart && !isStart && "rounded-l-none",
+              !isStart && !isEnd && "hover:bg-muted",
+              isToday && !isStart && !isEnd && "ring-border font-semibold ring-1"
+            ),
+            children: day.getDate()
+          },
+          iso
+        );
+      }) })
+    ] }, monthLabel(month));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: cn(
+          "border-border bg-background flex items-center rounded-md border",
+          "focus-within:ring-ring/50 focus-within:border-ring focus-within:ring-2",
+          disabled && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-label": ariaLabel,
+              onClick: () => open ? setOpen(false) : openPicker(),
+              className: "flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left text-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_lucide_react6.CalendarDays,
+                  {
+                    className: "text-muted-foreground size-4 shrink-0",
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "truncate",
+                      !value.from && !value.to && "text-muted-foreground"
+                    ),
+                    children: label
+                  }
+                )
+              ]
+            }
+          ),
+          (value.from || value.to) && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Clear date range",
+              onClick: () => {
+                onChange({ from: "", to: "" });
+                setPendingFrom(null);
+              },
+              className: "text-muted-foreground hover:text-foreground shrink-0 px-2",
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "size-3.5", "aria-hidden": true })
+            }
+          ) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": ariaLabel,
+        className: "border-border bg-background absolute top-full right-0 z-50 mt-1 flex w-max rounded-lg border p-3 shadow-lg",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "border-border mr-3 flex w-32 shrink-0 flex-col gap-0.5 border-r pr-3", children: PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "hover:bg-muted text-foreground rounded-md px-2 py-1.5 text-left text-xs",
+              onClick: () => {
+                onChange(preset.range());
+                setPendingFrom(null);
+                setOpen(false);
+              },
+              children: preset.label
+            },
+            preset.label
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { onKeyDown: onGridKeyDown, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Previous month",
+                  className: "hover:bg-muted text-muted-foreground hover:text-foreground rounded-md p-1.5",
+                  onClick: () => setViewMonth(addMonths(viewMonth, -1)),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.ChevronLeft, { className: "size-4", "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Next month",
+                  className: "hover:bg-muted text-muted-foreground hover:text-foreground rounded-md p-1.5",
+                  onClick: () => setViewMonth(addMonths(viewMonth, 1)),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.ChevronRight, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-5", onMouseLeave: () => setHovered(null), children: [
+              renderMonth(viewMonth),
+              renderMonth(addMonths(viewMonth, 1))
+            ] })
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/state-panel.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function StatePanel({
+  loading,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      role: loading ? "status" : void 0,
+      "aria-live": loading ? "polite" : void 0,
+      className: cn(
+        "border-border bg-background/80 text-muted-foreground rounded-lg border px-4 py-6 text-center text-sm",
+        loading && "flex items-center justify-center gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spinner, { size: "md" }) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/feature-access-gate.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function FeatureAccessGate({
+  isLoading,
+  allowed,
+  deniedMessage,
+  children
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatePanel, { loading: true, className: "p-6", children: "Checking permissions\u2026" });
+  }
+  if (!allowed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Alert, { children: deniedMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children });
+}
+
+// src/field.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Field({
+  label,
+  required,
+  htmlFor,
+  as = "div",
+  className,
+  children
+}) {
+  const Wrapper = as;
+  const labelNode = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    label,
+    required ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-destructive ml-0.5", "aria-hidden": "true", children: "*" }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Wrapper, { className: cn("space-y-1 text-sm", className), children: [
+    htmlFor && as === "div" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor, className: "text-muted-foreground", children: labelNode }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-muted-foreground", children: labelNode }),
+    children
+  ] });
+}
+
+// src/image-uploader.tsx
+var import_lucide_react7 = require("lucide-react");
+var React14 = __toESM(require("react"), 1);
+
+// src/input.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var inputClass = "h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var Input = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { ref, className: cn(inputClass, className), ...props })
+);
+Input.displayName = "Input";
+
+// src/image-uploader.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ImageUploader({
+  value = "",
+  onChange,
+  disabled,
+  label,
+  className,
+  allowUrlPaste = true,
+  accept = "image/*,.gif",
+  uploadFile,
+  uploadFromUrl
+}) {
+  const inputRef = React14.useRef(null);
+  const [uploading, setUploading] = React14.useState(false);
+  const [error, setError] = React14.useState(null);
+  const busy = Boolean(disabled || uploading);
+  const handleFile = async (file) => {
+    if (!uploadFile) {
+      setError("File upload is not configured for this panel.");
+      return;
+    }
+    setUploading(true);
+    setError(null);
+    try {
+      onChange(await uploadFile(file));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+  const handleUrl = async (imageUrl) => {
+    const trimmed = imageUrl.trim();
+    if (!trimmed) {
+      onChange("");
+      return;
+    }
+    if (trimmed === value) return;
+    if (!uploadFromUrl || /^https?:\/\//i.test(trimmed)) {
+      setError(null);
+      onChange(trimmed);
+      return;
+    }
+    setUploading(true);
+    setError(null);
+    try {
+      onChange(await uploadFromUrl(trimmed));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("space-y-2", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-muted-foreground text-xs font-medium", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          className: "hidden",
+          disabled: busy,
+          onChange: (e) => {
+            const file = e.target.files?.[0];
+            if (file) void handleFile(file);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: busy,
+          onClick: () => inputRef.current?.click(),
+          children: [
+            uploading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ImagePlus, { className: "h-4 w-4" }),
+            uploading ? "Uploading\u2026" : "Upload"
+          ]
+        }
+      ),
+      value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          disabled: busy,
+          onClick: () => onChange(""),
+          "aria-label": "Clear image",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
+            "Clear"
+          ]
+        }
+      ) : null
+    ] }),
+    allowUrlPaste ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Input,
+      {
+        defaultValue: value,
+        disabled: busy,
+        placeholder: "Or paste image URL\u2026",
+        onBlur: (e) => {
+          void handleUrl(e.target.value);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void handleUrl(e.target.value);
+          }
+        }
+      },
+      value || "empty"
+    ) : null,
+    value ? (
+      // eslint-disable-next-line @next/next/no-img-element -- CDN URLs vary
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "img",
+        {
+          src: value,
+          alt: "",
+          className: "border-border max-h-24 rounded border bg-white object-contain p-1"
+        }
+      )
+    ) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-destructive text-xs", role: "alert", children: error }) : null
+  ] });
+}
+
+// src/label.tsx
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Label = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "label",
+    {
+      ref,
+      className: cn(
+        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+
+// src/page-header.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function PageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  className
+}) {
+  const heading = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "min-w-0", children: [
+    eyebrow,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "h1",
+      {
+        className: cn(
+          "text-2xl font-semibold tracking-tight",
+          eyebrow != null && "mt-1"
+        ),
+        children: title
+      }
+    ),
+    description != null ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-muted-foreground mt-1 text-sm", children: description }) : null
+  ] });
+  if (!actions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, children: heading });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-3",
+        className
+      ),
+      children: [
+        heading,
+        actions
+      ]
+    }
+  );
+}
+
+// src/panel-brand-mark.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function PanelBrandMark({
+  children,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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
+    }
+  );
+}
+
+// src/panel-sign-in.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function PanelSignIn({
+  appName,
+  eyebrow = "Secure Google sign-in",
+  description = "Use your work Google account to continue.",
+  features,
+  brandIcon,
+  error,
+  refused = false,
+  refusedTitle = "Access denied",
+  refusedMessage = "This Google account is signed in, but it is not provisioned for this panel.",
+  isSessionLoading = false,
+  isSigningIn = false,
+  onSignIn,
+  signInLabel = "Continue with Google",
+  className
+}) {
+  const busy = isSessionLoading || isSigningIn;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "main",
+    {
+      className: cn(
+        "bg-background text-foreground grid min-h-screen place-items-center p-4 sm:p-8",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: "border-border bg-card w-full max-w-md space-y-6 rounded-lg border p-8 shadow-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PanelBrandMark, { children: brandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-semibold", "aria-hidden": true, children: appName.slice(0, 1).toUpperCase() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-title truncate font-semibold", children: appName }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-muted-foreground text-meta", children: eyebrow })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h1", { className: "text-display font-semibold tracking-tight", children: refused ? refusedTitle : "Sign in" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-muted-foreground text-body", children: refused ? refusedMessage : description })
+        ] }),
+        features && features.length > 0 && !refused ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "text-muted-foreground text-body space-y-1.5", children: features.slice(0, 3).map((feature) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-foreground mt-1.5 h-1 w-1 shrink-0 rounded-full bg-current" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: feature })
+        ] }, feature)) }) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "p",
+          {
+            role: "alert",
+            className: "border-destructive/30 bg-destructive/5 text-destructive rounded-md border px-3 py-2 text-sm",
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          Button,
+          {
+            className: "w-full",
+            disabled: busy,
+            onClick: onSignIn,
+            "aria-busy": busy,
+            children: [
+              busy ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react8.Loader2, { className: "mr-2 h-4 w-4 animate-spin", "aria-hidden": true }) : null,
+              isSigningIn ? "Redirecting\u2026" : signInLabel
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function PanelSignInSkeleton({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "main",
+    {
+      className: cn(
+        "bg-background grid min-h-screen place-items-center p-4 sm:p-8",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "border-border bg-card w-full max-w-md space-y-4 rounded-lg border p-8 shadow-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-muted h-3 w-24 animate-pulse rounded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-muted h-8 w-48 animate-pulse rounded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-muted mt-7 h-10 w-full animate-pulse rounded-md" })
+      ] })
+    }
+  );
+}
+
+// src/pagination.tsx
+var import_lucide_react9 = require("lucide-react");
+var React16 = __toESM(require("react"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  loading = false,
+  showPageInfo = true
+}) {
+  const visiblePages = React16.useMemo(() => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
+    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
+      range.push(i);
+    }
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, "...");
+    } else {
+      rangeWithDots.push(1);
+    }
+    rangeWithDots.push(...range);
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push("...", totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+    return rangeWithDots;
+  }, [currentPage, totalPages]);
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+    showPageInfo ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-muted-foreground order-2 text-sm sm:order-1", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "order-1 flex items-center space-x-1 sm:order-2 sm:space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: currentPage <= 1 || loading,
+          className: "h-8 min-w-8 px-2",
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex max-w-[200px] items-center space-x-1 overflow-x-auto sm:max-w-none", children: visiblePages.map(
+        (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "div",
+          {
+            className: "flex h-8 w-8 shrink-0 items-center justify-center",
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.MoreHorizontal, { className: "h-4 w-4" })
+          },
+          `dots-${index}`
+        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          Button,
+          {
+            variant: page === currentPage ? "default" : "outline",
+            size: "sm",
+            onClick: () => onPageChange(page),
+            disabled: loading,
+            className: "h-8 min-w-8 shrink-0 px-2",
+            "aria-current": page === currentPage ? "page" : void 0,
+            children: page
+          },
+          page
+        )
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: currentPage >= totalPages || loading,
+          className: "h-8 min-w-8 px-2",
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/segmented-control.tsx
+var React17 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("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 = React17.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__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      className: cn(TRACKS[variant], className),
+      children: options.map((option) => {
+        const checked = option.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime25.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
+        );
+      })
+    }
+  );
+}
+
+// src/select.tsx
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function optionText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(optionText).join("");
+  if (React18.isValidElement(node)) {
+    return optionText(node.props.children);
+  }
+  return "";
+}
+function optionsFromChildren(children) {
+  const options = [];
+  React18.Children.forEach(children, (child) => {
+    if (!React18.isValidElement(child)) return;
+    if (child.type === React18.Fragment) {
+      options.push(
+        ...optionsFromChildren(
+          child.props.children
+        )
+      );
+      return;
+    }
+    const props = child.props;
+    const value = props.value == null ? "" : String(props.value);
+    options.push({
+      value,
+      label: optionText(props.children).trim() || value,
+      disabled: Boolean(props.disabled)
+    });
+  });
+  return options;
+}
+function Select({
+  id,
+  className,
+  disabled,
+  value,
+  placeholder,
+  children,
+  onChange,
+  size = "default",
+  "aria-label": ariaLabel
+}) {
+  const options = optionsFromChildren(children);
+  const current = Array.isArray(value) ? String(value[0] ?? "") : value == null ? "" : String(value);
+  const blank = options.find((option) => option.value === "");
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    Autocomplete,
+    {
+      id,
+      className,
+      disabled: Boolean(disabled),
+      ariaLabel,
+      size,
+      options,
+      value: current,
+      clearable: false,
+      placeholder: placeholder ?? blank?.label ?? "Search\u2026",
+      onChange: (next) => onChange?.({
+        target: { value: next },
+        currentTarget: { value: next }
+      })
+    }
+  );
+}
+
+// src/separator.tsx
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Separator = React19.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+
+// src/side-drawer.tsx
+var import_lucide_react10 = require("lucide-react");
+var React20 = __toESM(require("react"), 1);
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function SideDrawer({
+  isOpen,
+  title,
+  onClose,
+  children,
+  panelClassName
+}) {
+  const mounted = useHasMounted();
+  const headingId = React20.useId();
+  const panelRef = React20.useRef(null);
+  useDialogLayer({
+    // Gated on `mounted` too: before that the panel is not rendered, so there
+    // would be nothing to move focus into.
+    active: isOpen && mounted,
+    containerRef: panelRef,
+    onEscape: onClose
+  });
+  if (!mounted || !isOpen) return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: onClose,
+          className: "fixed inset-0 z-[90] bg-overlay/30"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        "aside",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": headingId,
+          tabIndex: -1,
+          className: cn(
+            "border-border bg-background fixed inset-y-0 right-0 z-[95] flex flex-col border-l shadow-2xl outline-none",
+            panelClassName ?? "w-full max-w-md"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "border-border flex items-center justify-between gap-3 border-b px-4 py-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: headingId, className: "truncate text-base font-semibold", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": "Close panel",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react10.X, { className: "h-4 w-4", "aria-hidden": true })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+// src/spreadsheet-grid.tsx
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime29 = 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 = React21.useRef(null);
+  const anchorRef = React21.useRef(null);
+  const focusRef = React21.useRef(null);
+  const [dragging, setDragging] = React21.useState(false);
+  const setSelection = React21.useCallback(
+    (anchor, focus) => {
+      anchorRef.current = anchor;
+      focusRef.current = focus;
+      onRangeChange({ anchor, focus });
+    },
+    [onRangeChange]
+  );
+  const selectCell = React21.useCallback(
+    (r, c, extend) => {
+      if (extend && anchorRef.current)
+        setSelection(anchorRef.current, { r, c });
+      else setSelection({ r, c }, { r, c });
+    },
+    [setSelection]
+  );
+  const selectColumn = React21.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 = React21.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 = React21.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 = React21.useCallback((r, c) => {
+    const cell = gridRef.current?.querySelector(`[data-cell="${r}-${c}"]`);
+    cell?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, []);
+  const moveFocus = React21.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]
+  );
+  React21.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_runtime29.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_runtime29.jsxs)("table", { className: "w-full text-sm whitespace-nowrap select-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { className: "text-muted-foreground border-border border-b text-left", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.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_runtime29.jsx)("tbody", { children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsxs)(
+          "tr",
+          {
+            className: "border-border border-b",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.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)
+        )) })
+      ] })
+    }
+  );
+}
+
+// src/switch.tsx
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Switch = React22.forwardRef(
+  ({ checked, onCheckedChange, className, disabled, id, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "button",
+    {
+      ref,
+      id,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: () => onCheckedChange(!checked),
+      className: cn(
+        // 24×44px track meets DESIGN.md 24px minimum target size.
+        "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border transition-colors",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "border-primary bg-primary" : "border-border bg-muted",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "bg-background pointer-events-none block size-5 rounded-full shadow-sm transition-transform",
+            checked ? "translate-x-5" : "translate-x-0.5"
+          )
+        }
+      )
+    }
+  )
+);
+Switch.displayName = "Switch";
+
+// src/table.tsx
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Table = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "th",
+  {
+    ref,
+    className: cn(
+      "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "caption",
+  {
+    ref,
+    className: cn("text-muted-foreground mt-4 text-sm", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+// src/tabs.tsx
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function TabPanel({
+  id,
+  labelledBy,
+  active,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      id,
+      "aria-labelledby": labelledBy,
+      hidden: !active,
+      className,
+      children: active ? children : null
+    }
+  );
+}
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  ariaLabel,
+  className
+}) {
+  const refs = React24.useRef(/* @__PURE__ */ new Map());
+  const reactId = React24.useId();
+  const hasInlinePanels = tabs.some((tab) => tab.panel != null);
+  function tabDomId(key) {
+    return `${reactId}-tab-${key}`;
+  }
+  function panelDomId(tab) {
+    return tab.panelId ?? `${reactId}-panel-${tab.key}`;
+  }
+  function focusTab(key) {
+    onChange(key);
+    refs.current.get(key)?.focus();
+  }
+  function onKeyDown(event) {
+    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+    const selectable = tabs.filter((tab) => !tab.disabled);
+    if (selectable.length < 2) return;
+    const current = selectable.findIndex((tab) => tab.key === value);
+    const next = selectable[(current + step + selectable.length) % selectable.length];
+    event.preventDefault();
+    focusTab(next.key);
+  }
+  const tablist = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      className: cn(
+        "border-border flex flex-wrap gap-1 border-b",
+        !hasInlinePanels ? className : void 0
+      ),
+      children: tabs.map((tab) => {
+        const active = tab.key === value;
+        const id = tabDomId(tab.key);
+        const controls = tab.panel != null || tab.panelId ? panelDomId(tab) : void 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "button",
+          {
+            id,
+            ref: (node) => {
+              refs.current.set(tab.key, node);
+            },
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            "aria-controls": controls,
+            disabled: tab.disabled,
+            tabIndex: active ? 0 : -1,
+            onClick: () => onChange(tab.key),
+            className: cn(
+              "cursor-pointer rounded-t-md px-3 py-1.5 text-sm font-medium transition",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // The filled-pill active state the five hand-rolled strips
+              // already used. Adopting it keeps this a deduplication rather
+              // than a restyle of every panel that has tabs.
+              active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+            ),
+            children: [
+              tab.label,
+              tab.badge != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-muted-foreground ml-1.5 text-xs", children: tab.badge }) : null
+            ]
+          },
+          tab.key
+        );
+      })
+    }
+  );
+  if (!hasInlinePanels) return tablist;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("space-y-3", className), children: [
+    tablist,
+    tabs.map(
+      (tab) => tab.panel != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        TabPanel,
+        {
+          id: panelDomId(tab),
+          labelledBy: tabDomId(tab.key),
+          active: tab.key === value,
+          children: tab.panel
+        },
+        tab.key
+      ) : null
+    )
+  ] });
+}
+
+// src/textarea.tsx
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var textareaClass = "border-border bg-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+var Textarea = React25.forwardRef(
+  ({ className, rows = 3, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "textarea",
+    {
+      ref,
+      rows,
+      className: cn(textareaClass, className),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  Autocomplete,
+  Badge,
+  Breadcrumb,
+  Button,
+  CSV_DELIMITER,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CollapsibleSection,
+  ConfirmDialog,
+  CopyButton,
+  DataTable,
+  DateRangePicker,
+  FeatureAccessGate,
+  Field,
+  ImageUploader,
+  Input,
+  Label,
+  Modal,
+  PageHeader,
+  Pagination,
+  PanelBrandMark,
+  PanelSignIn,
+  PanelSignInSkeleton,
+  SegmentedControl,
+  Select,
+  Separator,
+  SideDrawer,
+  Spinner,
+  SpreadsheetGrid,
+  StatePanel,
+  Switch,
+  TSV_DELIMITER,
+  TabPanel,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Textarea,
+  addDays,
+  addMonths,
+  alertVariants,
+  badgeVariants,
+  buildRangeText,
+  checkboxClass,
+  cn,
+  countCells,
+  createdRangeMs,
+  describeRange,
+  endAt2359Ms,
+  endOfDayMs,
+  escapeCell,
+  formatDisplay,
+  fromIsoDate,
+  fullRange,
+  inputClass,
+  isSameDay,
+  monthGrid,
+  monthLabel,
+  normalizeRange,
+  startOfDayMs,
+  startOfMonth,
+  textareaClass,
+  toIsoDate,
+  useDialogLayer,
+  useHasMounted,
+  writeToClipboard
+});
+//# sourceMappingURL=index.cjs.map