@crewlethq/ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,4518 +1,91 @@
-import './Accordion-NIMJQIOI.css';
-import React, { createContext, forwardRef, useId, useRef, useImperativeHandle, useEffect, useState, useCallback, useMemo, useContext, Children, isValidElement, cloneElement, useLayoutEffect, Fragment as Fragment$1 } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import './AppShell-ZW3NSFBP.css';
-import './Avatar-V6NG6Q45.css';
-import './Button-XGCTXXYP.css';
-import './Callout-LEGDIMAM.css';
-import './Card-BOZGBML7.css';
-import './CodeBlock-IEMBNIQC.css';
-import './Copyable-IB57OTHZ.css';
-import './Container-LTKBA2FW.css';
-import './DataTable-3GALZUW2.css';
-import { createPortal } from 'react-dom';
-import './DateTimePicker-NMSSGVPK.css';
-import './Eyebrow-AVBORAS2.css';
-import './IconButton-GB4PJDG2.css';
-import './ImageUpload-3HQDF2KC.css';
-import './Checkbox-OCUICIIZ.css';
-import './Input-ZHUTN7CU.css';
-import './Kbd-Q77CDZY7.css';
-import './Modal-FJVG66S4.css';
-import './Popover-FUFULUE2.css';
-import './PricingCard-NKYV3JHA.css';
-import './Section-665ZIPG6.css';
-import './Select-GPRF7PRB.css';
-import './Skeleton-3WEFLRDN.css';
-import './StatCard-RTJIVTRB.css';
-import './Table-AR3TRY2E.css';
-import './Tabs-XZ4JIH3E.css';
-import './TimeWindowPicker-L3G5Q7UT.css';
-import './Tag-R5QDJLYJ.css';
-import './Toaster-2O65VOR4.css';
-
-// src/Accordion/index.ts
-var AccordionContext = createContext(null);
-var toArray = (input) => {
-  if (input === void 0) return [];
-  return Array.isArray(input) ? input : [input];
-};
-var AccordionRoot = ({
-  type = "single",
-  collapsible = true,
-  defaultValue,
-  value,
-  onValueChange,
-  className = "",
-  children,
-  ...rest
-}) => {
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = useState(() => toArray(defaultValue));
-  const open = isControlled ? toArray(value) : internal;
-  const commit = useCallback(
-    (next) => {
-      if (!isControlled) setInternal(next);
-      if (onValueChange) onValueChange(type === "single" ? next[0] ?? "" : next);
-    },
-    [isControlled, onValueChange, type]
-  );
-  const isOpen = useCallback((item) => open.includes(item), [open]);
-  const toggle = useCallback(
-    (item) => {
-      const currentlyOpen = open.includes(item);
-      if (type === "single") {
-        if (currentlyOpen) commit(collapsible ? [] : [item]);
-        else commit([item]);
-        return;
-      }
-      commit(currentlyOpen ? open.filter((entry) => entry !== item) : [...open, item]);
-    },
-    [open, type, collapsible, commit]
-  );
-  const ctx = useMemo(() => ({ isOpen, toggle }), [isOpen, toggle]);
-  const classes = ["crewlet-accordion", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ...rest, className: classes, children }) });
-};
-var moveFocus = (current, direction) => {
-  const root = current.closest(".crewlet-accordion");
-  if (!root) return;
-  const triggers = Array.from(
-    root.querySelectorAll(".crewlet-accordion__trigger:not([disabled])")
-  );
-  if (triggers.length === 0) return;
-  const index = triggers.indexOf(current);
-  const target = direction === "next" ? triggers[(index + 1) % triggers.length] : direction === "prev" ? triggers[(index - 1 + triggers.length) % triggers.length] : direction === "first" ? triggers[0] : triggers[triggers.length - 1];
-  target?.focus();
-};
-var AccordionItem = ({
-  value,
-  title,
-  disabled = false,
-  className = "",
-  children,
-  ...rest
-}) => {
-  const ctx = useContext(AccordionContext);
-  if (!ctx) {
-    throw new Error("AccordionItem must be rendered inside an Accordion.");
-  }
-  const open = ctx.isOpen(value);
-  const rid = useId();
-  const triggerId = `${rid}-trigger`;
-  const panelId = `${rid}-panel`;
-  const onKeyDown = (event) => {
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        moveFocus(event.currentTarget, "next");
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        moveFocus(event.currentTarget, "prev");
-        break;
-      case "Home":
-        event.preventDefault();
-        moveFocus(event.currentTarget, "first");
-        break;
-      case "End":
-        event.preventDefault();
-        moveFocus(event.currentTarget, "last");
-        break;
-    }
-  };
-  const classes = [
-    "crewlet-accordion__item",
-    open ? "is-open" : "",
-    disabled ? "is-disabled" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, "data-state": open ? "open" : "closed", children: [
-    /* @__PURE__ */ jsx("h3", { className: "crewlet-accordion__heading", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        id: triggerId,
-        className: "crewlet-accordion__trigger",
-        "aria-expanded": open,
-        "aria-controls": panelId,
-        disabled,
-        onClick: () => ctx.toggle(value),
-        onKeyDown,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "crewlet-accordion__title", children: title }),
-          /* @__PURE__ */ jsx("span", { className: "crewlet-accordion__icon material-symbols-outlined", "aria-hidden": true, children: "expand_more" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: panelId,
-        role: "region",
-        "aria-labelledby": triggerId,
-        className: "crewlet-accordion__panel",
-        hidden: !open,
-        children: /* @__PURE__ */ jsx("div", { className: "crewlet-accordion__panel-inner", children })
-      }
-    )
-  ] });
-};
-var Accordion = Object.assign(AccordionRoot, { Item: AccordionItem });
-var AppShell = ({
-  sidebar,
-  topbar,
-  footer,
-  children,
-  sidebarWidth = 280,
-  topbarHeight = 64,
-  className = "",
-  style,
-  ...rest
-}) => {
-  const composedStyle = {
-    ...style,
-    ["--crewlet-app-shell-sidebar-width"]: `${sidebarWidth}px`,
-    ["--crewlet-app-shell-topbar-height"]: `${topbarHeight}px`
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `crewlet-app-shell ${className}`.trim(), style: composedStyle, ...rest, children: [
-    sidebar,
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__column", children: [
-      topbar,
-      /* @__PURE__ */ jsx("main", { className: "crewlet-app-shell__main", children }),
-      footer
-    ] })
-  ] });
-};
-var getInitials = (name) => {
-  if (!name) {
-    return "?";
-  }
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (words.length === 0) {
-    return "?";
-  }
-  return words.slice(0, 2).map((word) => (Array.from(word)[0] ?? "").toUpperCase()).join("");
-};
-var TINT_COUNT = 10;
-var avatarTint = (seed) => {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
-  }
-  return hash % TINT_COUNT;
-};
-var Avatar = ({
-  src,
-  name,
-  size = 64,
-  shape = "circle",
-  colorSeed,
-  className = "",
-  style,
-  ...rest
-}) => {
-  const [imageFailed, setImageFailed] = useState(false);
-  useEffect(() => {
-    setImageFailed(false);
-  }, [src]);
-  const dimensions = { width: size, height: size };
-  const shapeClass = `crewlet-avatar--${shape}`;
-  const classes = (...extra) => ["crewlet-avatar", ...extra, shapeClass, className].filter(Boolean).join(" ");
-  if (src && !imageFailed) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        ...rest,
-        className: classes("crewlet-avatar--image"),
-        style: { ...dimensions, ...style },
-        src,
-        alt: name ?? "",
-        onError: () => setImageFailed(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...rest,
-      className: classes(
-        "crewlet-avatar--fallback",
-        ...colorSeed ? ["crewlet-avatar--tint", `crewlet-avatar--tint-${avatarTint(colorSeed)}`] : []
-      ),
-      style: { ...dimensions, fontSize: Math.max(12, Math.round(size / 3)), ...style },
-      role: "img",
-      "aria-label": name ? `${name} avatar` : "Avatar",
-      children: getInitials(name)
-    }
-  );
-};
-var renderInner = (leadingIcon, children, loading = false) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  loading ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__spinner", "aria-hidden": true }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__icon", children: leadingIcon }) : null,
-  /* @__PURE__ */ jsx("span", { className: "crewlet-btn__label", children })
-] });
-var Button = ({
-  variant = "primary",
-  size = "medium",
-  shape = "square",
-  leadingIcon,
-  className = "",
-  type = "button",
-  asChild = false,
-  loading = false,
-  disabled,
-  children,
-  ...rest
-}) => {
-  const classes = [
-    "crewlet-btn",
-    `crewlet-btn--${variant}`,
-    `crewlet-btn--${size}`,
-    `crewlet-btn--${shape}`,
-    loading ? "crewlet-btn--loading" : "",
-    className
-  ].filter(Boolean).join(" ");
-  if (asChild) {
-    const child = Children.only(children);
-    if (!isValidElement(child)) {
-      throw new Error("Button with asChild expects exactly one valid React element child.");
-    }
-    const childEl = child;
-    const mergedClassName = [childEl.props.className, classes].filter(Boolean).join(" ");
-    return cloneElement(childEl, { ...rest, className: mergedClassName }, renderInner(
-      leadingIcon,
-      childEl.props.children
-    ));
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type,
-      className: classes,
-      disabled: disabled || loading,
-      "aria-busy": loading || void 0,
-      ...rest,
-      children: renderInner(leadingIcon, children, loading)
-    }
-  );
-};
-var Callout = ({
-  variant = "info",
-  title,
-  icon,
-  className = "",
-  children,
-  ...rest
-}) => {
-  const classes = ["crewlet-callout", `crewlet-callout--${variant}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { role: "status", ...rest, className: classes, children: [
-    icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-callout__icon", "aria-hidden": true, children: icon }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-callout__content", children: [
-      title ? /* @__PURE__ */ jsx("span", { className: "crewlet-callout__title", children: title }) : null,
-      children
-    ] })
-  ] });
-};
-var CardRoot = ({
-  variant = "default",
-  padding = "md",
-  interactive = false,
-  className = "",
-  children,
-  ...rest
-}) => {
-  const classes = [
-    "crewlet-card",
-    `crewlet-card--${variant}`,
-    `crewlet-card--p-${padding}`,
-    interactive ? "is-interactive" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
-};
-var CardHeader = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-card__header ${className}`.trim(), children });
-var CardBody = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-card__body ${className}`.trim(), children });
-var CardFooter = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-card__footer ${className}`.trim(), children });
-var CardTitle = ({ as: As = "h3", className = "", children, ...rest }) => /* @__PURE__ */ jsx(As, { ...rest, className: `crewlet-card__title ${className}`.trim(), children });
-var CardDescription = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("p", { ...rest, className: `crewlet-card__description ${className}`.trim(), children });
-var Card = Object.assign(CardRoot, {
-  Header: CardHeader,
-  Body: CardBody,
-  Footer: CardFooter,
-  Title: CardTitle,
-  Description: CardDescription
-});
-var COPIED_DURATION_MS = 1500;
-var truncateValue = (text, length, variant) => {
-  if (text.length <= length) return text;
-  if (variant === "chip") {
-    const head = Math.max(4, length - 5);
-    const tail = Math.min(4, Math.max(2, length - head - 1));
-    return `${text.slice(0, head)}\u2026${text.slice(-tail)}`;
-  }
-  return `${text.slice(0, length)}\u2026`;
-};
-var writeToClipboard = async (text) => {
-  if (typeof navigator !== "undefined" && navigator.clipboard && window.isSecureContext) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-  const ta = document.createElement("textarea");
-  ta.value = text;
-  ta.style.position = "fixed";
-  ta.style.opacity = "0";
-  document.body.appendChild(ta);
-  ta.focus();
-  ta.select();
-  document.execCommand("copy");
-  document.body.removeChild(ta);
-};
-var Copyable = ({
-  value,
-  display,
-  variant = "chip",
-  monospace = false,
-  truncate = false,
-  truncateLength,
-  ariaLabel,
-  className = ""
-}) => {
-  const text = value === void 0 || value === null ? "" : String(value);
-  const [copied, setCopied] = useState(false);
-  const timerRef = useRef(null);
-  useEffect(() => () => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-  }, []);
-  if (!text) return null;
-  const resolvedLength = truncateLength ?? (variant === "chip" ? 14 : 24);
-  const shouldTruncate = truncate || variant === "chip" && text.length > resolvedLength;
-  const rendered = display ?? (shouldTruncate ? truncateValue(text, resolvedLength, variant) : text);
-  const onCopy = async (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    try {
-      await writeToClipboard(text);
-      setCopied(true);
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setCopied(false), COPIED_DURATION_MS);
-    } catch {
-    }
-  };
-  const classes = [
-    "crewlet-copyable",
-    `crewlet-copyable--${variant}`,
-    monospace ? "crewlet-copyable--monospace" : "",
-    copied ? "is-copied" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("span", { className: classes, children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "crewlet-copyable__value",
-        title: text,
-        role: "button",
-        tabIndex: 0,
-        onClick: onCopy,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") onCopy(e);
-        },
-        children: rendered
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "crewlet-copyable__button",
-        onClick: onCopy,
-        "aria-label": ariaLabel || "Copy to clipboard",
-        title: "Copy",
-        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: copied ? "check" : "content_copy" })
-      }
-    )
-  ] });
-};
-var CodeBlock = ({
-  code,
-  language,
-  filename,
-  showLineNumbers = false,
-  copyable = true,
-  prompt,
-  className = ""
-}) => {
-  const lines = code.replace(/\n+$/, "").split("\n");
-  const showHeader = Boolean(filename) || Boolean(language) || copyable;
-  const classes = [
-    "crewlet-codeblock",
-    showLineNumbers ? "crewlet-codeblock--numbered" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    showHeader ? /* @__PURE__ */ jsxs("div", { className: "crewlet-codeblock__header", children: [
-      /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__meta", children: [
-        filename ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__filename", children: filename }) : null,
-        language && !filename ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__lang", children: language }) : null
-      ] }),
-      copyable ? /* @__PURE__ */ jsx(
-        Copyable,
-        {
-          value: code,
-          display: "Copy",
-          variant: "inline",
-          ariaLabel: "Copy code to clipboard",
-          className: "crewlet-codeblock__copy"
-        }
-      ) : null
-    ] }) : null,
-    /* @__PURE__ */ jsx("pre", { className: "crewlet-codeblock__pre", "data-language": language, children: /* @__PURE__ */ jsx("code", { className: "crewlet-codeblock__code", children: lines.map((line2, index) => /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__line", children: [
-      showLineNumbers ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__ln", "aria-hidden": true, children: index + 1 }) : null,
-      prompt ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__prompt", "aria-hidden": true, children: prompt }) : null,
-      /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__linecontent", children: line2 || "\xA0" })
-    ] }, `${index}-${line2}`)) }) })
-  ] });
-};
-var Container = ({
-  size = "lg",
-  className = "",
-  children,
-  ...rest
-}) => {
-  const classes = ["crewlet-container", `crewlet-container--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
-};
-var Modal = ({
-  open,
-  onClose,
-  title,
-  subtitle,
-  footer,
-  children,
-  size = "sm",
-  closeOnBackdrop = true,
-  showCloseButton = true,
-  className = "",
-  labelledBy,
-  describedBy
-}) => {
-  const dialogRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  });
-  useEffect(() => {
-    if (!open) return void 0;
-    const onKey = (event) => {
-      if (event.key === "Escape") onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKey);
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const previouslyFocused = document.activeElement;
-    requestAnimationFrame(() => {
-      dialogRef.current?.focus();
-    });
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prevOverflow;
-      previouslyFocused?.focus?.();
-    };
-  }, [open]);
-  if (!open || typeof document === "undefined") return null;
-  const onBackdropMouseDown = () => {
-    if (closeOnBackdrop) onClose();
-  };
-  const stopPropagation = (event) => event.stopPropagation();
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "crewlet-modal-overlay",
-        role: "presentation",
-        onMouseDown: onBackdropMouseDown,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: dialogRef,
-            className: `crewlet-modal crewlet-modal--${size} ${className}`.trim(),
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": labelledBy,
-            "aria-describedby": describedBy,
-            tabIndex: -1,
-            onMouseDown: stopPropagation,
-            children: [
-              (title || subtitle || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__header", children: [
-                /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
-                  title ? /* @__PURE__ */ jsx("h2", { className: "crewlet-modal__title", id: labelledBy, children: title }) : null,
-                  subtitle ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__subtitle", children: subtitle }) : null
-                ] }),
-                showCloseButton ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "crewlet-modal__close",
-                    onClick: onClose,
-                    "aria-label": "Close",
-                    children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "close" })
-                  }
-                ) : null
-              ] }),
-              children !== void 0 ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__body", children }) : null,
-              footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__footer", children: footer }) : null
-            ]
-          }
-        )
-      }
-    ),
-    document.body
-  );
-};
-var COPIED_DURATION_MS2 = 1500;
-var writeToClipboard2 = async (text) => {
-  if (typeof navigator !== "undefined" && navigator.clipboard && window.isSecureContext) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-  const ta = document.createElement("textarea");
-  ta.value = text;
-  ta.style.position = "fixed";
-  ta.style.opacity = "0";
-  document.body.appendChild(ta);
-  ta.focus();
-  ta.select();
-  document.execCommand("copy");
-  document.body.removeChild(ta);
-};
-var CopyableCell = ({ value, children, ariaLabel }) => {
-  const text = value === void 0 || value === null ? "" : String(value);
-  const [copied, setCopied] = useState(false);
-  const timer = useRef(null);
-  useEffect(() => () => {
-    if (timer.current) clearTimeout(timer.current);
-  }, []);
-  const onCopy = async (event) => {
-    event.stopPropagation();
-    if (!text) return;
-    try {
-      await writeToClipboard2(text);
-      setCopied(true);
-      if (timer.current) clearTimeout(timer.current);
-      timer.current = setTimeout(() => setCopied(false), COPIED_DURATION_MS2);
-    } catch {
-    }
-  };
-  return /* @__PURE__ */ jsxs("span", { className: "crewlet-data-table__copy-cell", children: [
-    /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__copy-cell-value", children }),
-    text && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: `crewlet-data-table__copy-cell-button${copied ? " is-copied" : ""}`,
-        onClick: onCopy,
-        "aria-label": ariaLabel || "Copy to clipboard",
-        title: "Copy",
-        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: copied ? "check" : "content_copy" })
-      }
-    )
-  ] });
-};
-function Popover({
-  trigger,
-  children,
-  align = "start",
-  side = "bottom",
-  width = "auto",
-  className = "",
-  defaultOpen = false,
-  onOpenChange
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-  useEffect(() => {
-    onOpenChange?.(open);
-  }, [open, onOpenChange]);
-  const [coords, setCoords] = useState(
-    { top: 0, left: 0, width: 0, side }
-  );
-  const triggerRef = useRef(null);
-  const panelRef = useRef(null);
-  const close = () => setOpen(false);
-  const toggle = () => setOpen((o) => !o);
-  const reposition = () => {
-    const trig = triggerRef.current;
-    if (!trig) return;
-    const rect = trig.getBoundingClientRect();
-    const panelHeight = panelRef.current?.offsetHeight ?? 200;
-    const viewportH = window.innerHeight;
-    let chosenSide = side;
-    if (side === "bottom" && rect.bottom + panelHeight + 12 > viewportH) {
-      chosenSide = "top";
-    }
-    const top = chosenSide === "bottom" ? rect.bottom + window.scrollY + 6 : rect.top + window.scrollY - panelHeight - 6;
-    const left = align === "end" ? rect.right + window.scrollX : rect.left + window.scrollX;
-    setCoords({ top, left, width: rect.width, side: chosenSide });
-  };
-  useEffect(() => {
-    if (!open) return void 0;
-    reposition();
-    const onClick = (event) => {
-      const target = event.target;
-      if (target && panelRef.current?.contains(target)) return;
-      if (target && triggerRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    const onKey = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    };
-    const onLayout = () => reposition();
-    document.addEventListener("mousedown", onClick);
-    document.addEventListener("keydown", onKey);
-    window.addEventListener("resize", onLayout);
-    window.addEventListener("scroll", onLayout, true);
-    return () => {
-      document.removeEventListener("mousedown", onClick);
-      document.removeEventListener("keydown", onKey);
-      window.removeEventListener("resize", onLayout);
-      window.removeEventListener("scroll", onLayout, true);
-    };
-  }, [open, align, side]);
-  const triggerEl = trigger(open, toggle);
-  const triggerWithRef = React.cloneElement(triggerEl, {
-    ref: triggerRef,
-    "aria-expanded": open,
-    "aria-haspopup": "menu"
-  });
-  const panelStyle = {
-    top: coords.top,
-    [align === "end" ? "right" : "left"]: align === "end" ? typeof document !== "undefined" ? document.documentElement.clientWidth - coords.left : 0 : coords.left
-  };
-  if (width === "match") panelStyle.width = coords.width;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    triggerWithRef,
-    open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: panelRef,
-          className: `crewlet-popover crewlet-popover--${coords.side} ${className}`,
-          style: panelStyle,
-          role: "menu",
-          tabIndex: -1,
-          onMouseDown: (e) => e.stopPropagation(),
-          children: typeof children === "function" ? children(close) : children
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-var RowActionsMenu = ({ actions, ariaLabel = "Row actions" }) => {
-  const items = (actions || []).filter(
-    (a) => !!a && a.visible !== false
-  );
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      align: "end",
-      side: "bottom",
-      width: "auto",
-      className: "crewlet-data-table__row-actions-popover",
-      trigger: (open, toggle) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `crewlet-data-table__row-actions-trigger${open ? " is-open" : ""}`,
-          onClick: (e) => {
-            e.stopPropagation();
-            toggle();
-          },
-          "aria-label": ariaLabel,
-          "aria-haspopup": "menu",
-          "aria-expanded": open,
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "more_vert" })
-        }
-      ),
-      children: (close) => /* @__PURE__ */ jsx("ul", { className: "crewlet-data-table__row-actions-list", role: "menu", children: items.map((action, i) => {
-        const cls = [
-          "crewlet-data-table__row-actions-item",
-          action.variant && `crewlet-data-table__row-actions-item--${action.variant}`,
-          action.disabled && "is-disabled"
-        ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          action.divider === "before" && /* @__PURE__ */ jsx("li", { className: "crewlet-data-table__row-actions-divider", role: "separator" }),
-          /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              className: cls,
-              disabled: action.disabled,
-              onClick: (e) => {
-                e.stopPropagation();
-                if (action.disabled) return;
-                action.onClick?.();
-                close();
-              },
-              children: [
-                action.icon && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "material-symbols-outlined crewlet-data-table__row-actions-item-icon",
-                    "aria-hidden": true,
-                    children: action.icon
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "crewlet-data-table__row-actions-item-text", children: [
-                  /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__row-actions-item-label", children: action.label }),
-                  action.description && /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__row-actions-item-description", children: action.description })
-                ] })
-              ]
-            }
-          ) }),
-          action.divider === "after" && /* @__PURE__ */ jsx("li", { className: "crewlet-data-table__row-actions-divider", role: "separator" })
-        ] }, i);
-      }) })
-    }
-  );
-};
-var DataTable = ({
-  data = [],
-  columns = {},
-  storageKey,
-  defaultColumnOrder = null,
-  defaultItemsPerPage = 10,
-  minColumnWidth = 80,
-  resizable = true,
-  itemsPerPageOptions = [5, 10, 20, 50, 100],
-  onRowAction = null,
-  actionLabel = "Delete",
-  actionIcon = "delete",
-  getRowKey,
-  rowKey,
-  emptyMessage = "No data available",
-  showActions = true,
-  className = "",
-  variant = "default",
-  density = "compact",
-  sort: sortProp,
-  onSortChange,
-  rowActions,
-  archivedPredicate,
-  archivedLabel = "archived",
-  loading = false,
-  skeletonRows = 5,
-  error = null,
-  paginated = true,
-  showSettings = true,
-  onRowClick,
-  renderAccessoryRow,
-  renderToolbar,
-  onClearFilters,
-  filtersActive = false,
-  clearFiltersLabel = "Clear filters",
-  renderExpandedRow,
-  defaultExpandedKey = null,
-  hasMore = false,
-  onLoadMore,
-  loadingMore = false,
-  loadMoreLabel = "Load more",
-  title,
-  description,
-  icon,
-  settingsVariant,
-  defaultWrapLines
-}) => {
-  const headerVisibleFlag = title != null || description != null || icon != null;
-  const effectiveSettingsVariant = settingsVariant ?? (headerVisibleFlag ? "compact" : "rich");
-  const effectiveDefaultWrapLines = defaultWrapLines ?? true;
-  const resolveRowKey = (row) => {
-    if (getRowKey) return getRowKey(row);
-    if (rowKey) return row?.[rowKey];
-    return row?.id;
-  };
-  const isCompact = variant === "compact";
-  const settingsEnabled = showSettings;
-  const paginationEnabled = paginated;
-  const settingsInHeader = settingsEnabled && !isCompact;
-  const generateDefaultColumnWidths = () => {
-    const widths = {};
-    Object.keys(columns).forEach((key) => {
-      const col = columns[key];
-      const rawExplicit = col?.width ?? col?.defaultWidth;
-      let px = null;
-      if (rawExplicit != null) {
-        const parsed = typeof rawExplicit === "number" ? rawExplicit : parseInt(String(rawExplicit), 10);
-        if (Number.isFinite(parsed)) px = parsed;
-      }
-      if (px == null) {
-        const labelStr = typeof col?.label === "string" ? col.label : key;
-        const estimated = Math.ceil(labelStr.length * 7.5) + 56;
-        px = Math.max(120, estimated);
-      }
-      widths[key] = Math.max(minColumnWidth, px);
-    });
-    if (showActions) {
-      widths.__actions = 60;
-    }
-    return widths;
-  };
-  const generateDefaultVisibleColumns = () => {
-    const visible = {};
-    Object.keys(columns).forEach((key) => {
-      visible[key] = columns[key]?.defaultVisible !== false;
-    });
-    return visible;
-  };
-  const generateDefaultColumnOrder = () => {
-    return defaultColumnOrder || Object.keys(columns);
-  };
-  const defaultColumnWidths = generateDefaultColumnWidths();
-  const defaultVisibleColumns = generateDefaultVisibleColumns();
-  const defaultOrder = generateDefaultColumnOrder();
-  const [columnWidths, setColumnWidths] = useState(() => {
-    if (!storageKey) return defaultColumnWidths;
-    const saved = localStorage.getItem(`${storageKey}_columnWidths`);
-    if (!saved) return defaultColumnWidths;
-    try {
-      const parsed = JSON.parse(saved);
-      const merged = { ...defaultColumnWidths };
-      Object.entries(parsed).forEach(([key, value]) => {
-        const px = typeof value === "number" ? value : parseInt(String(value), 10);
-        if (!Number.isFinite(px)) return;
-        const col = columns[key];
-        if (col?.width != null) return;
-        merged[key] = key.startsWith("__") ? px : Math.max(minColumnWidth, px);
-      });
-      return merged;
-    } catch {
-      return defaultColumnWidths;
-    }
-  });
-  const [itemsPerPage, setItemsPerPage] = useState(() => {
-    if (!storageKey) return defaultItemsPerPage;
-    const saved = localStorage.getItem(`${storageKey}_itemsPerPage`);
-    return saved ? parseInt(saved, 10) : defaultItemsPerPage;
-  });
-  const [visibleColumns, setVisibleColumns] = useState(() => {
-    if (!storageKey) return defaultVisibleColumns;
-    const saved = localStorage.getItem(`${storageKey}_visibleColumns`);
-    if (saved) {
-      const savedVisible = JSON.parse(saved);
-      const validVisible = {};
-      Object.keys(columns).forEach((key) => {
-        validVisible[key] = Object.prototype.hasOwnProperty.call(savedVisible, key) ? savedVisible[key] : columns[key]?.defaultVisible !== false;
-      });
-      return validVisible;
-    }
-    return defaultVisibleColumns;
-  });
-  const [columnOrder, setColumnOrder] = useState(() => {
-    if (!storageKey) return defaultOrder;
-    const saved = localStorage.getItem(`${storageKey}_columnOrder`);
-    if (saved) {
-      const savedOrder = JSON.parse(saved);
-      const validOrder = savedOrder.filter((key) => Object.prototype.hasOwnProperty.call(columns, key));
-      const newColumns = defaultOrder.filter((key) => !validOrder.includes(key));
-      return validOrder.length > 0 ? [...validOrder, ...newColumns] : defaultOrder;
-    }
-    return defaultOrder;
-  });
-  const [sortConfig, setSortConfig] = useState(
-    { key: null, direction: null }
-  );
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [wrapLines, setWrapLines] = useState(() => {
-    if (!storageKey) return effectiveDefaultWrapLines;
-    const saved = localStorage.getItem(`${storageKey}_wrapLines`);
-    return saved == null ? effectiveDefaultWrapLines : saved === "true";
-  });
-  const [draftItemsPerPage, setDraftItemsPerPage] = useState(0);
-  const [draftWrapLines, setDraftWrapLines] = useState(effectiveDefaultWrapLines);
-  const [draftColumnWidths, setDraftColumnWidths] = useState({});
-  const [draftVisibleColumns, setDraftVisibleColumns] = useState({});
-  const [draftColumnOrder, setDraftColumnOrder] = useState([]);
-  const [draftSortConfig, setDraftSortConfig] = useState(
-    { key: null, direction: null }
-  );
-  const [resetConfirmed, setResetConfirmed] = useState(false);
-  const resetConfirmTimer = useRef(null);
-  const pendingFitOnApplyRef = useRef(false);
-  const [expandedKeys, setExpandedKeys] = useState(
-    () => defaultExpandedKey != null ? /* @__PURE__ */ new Set([defaultExpandedKey]) : /* @__PURE__ */ new Set()
-  );
-  const toggleExpanded = (key) => {
-    setExpandedKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  };
-  const [draggedColumn, setDraggedColumn] = useState(null);
-  const [resizingColumn, setResizingColumn] = useState(null);
-  const [startX, setStartX] = useState(0);
-  const [startWidth, setStartWidth] = useState(0);
-  const dragTimeoutRef = useRef(null);
-  const settingsButtonRef = useRef(null);
-  const scrollRef = useRef(null);
-  const [needsFit, setNeedsFit] = useState(true);
-  const resetToDefault = () => {
-    const newDefaultWidths = generateDefaultColumnWidths();
-    const newDefaultVisible = generateDefaultVisibleColumns();
-    const newDefaultOrder = generateDefaultColumnOrder();
-    setColumnWidths(newDefaultWidths);
-    setVisibleColumns(newDefaultVisible);
-    setColumnOrder(newDefaultOrder);
-    setItemsPerPage(defaultItemsPerPage);
-    setSortConfig({ key: null, direction: null });
-    setNeedsFit(true);
-    if (storageKey) {
-      localStorage.removeItem(`${storageKey}_columnWidths`);
-      localStorage.removeItem(`${storageKey}_visibleColumns`);
-      localStorage.removeItem(`${storageKey}_columnOrder`);
-      localStorage.removeItem(`${storageKey}_itemsPerPage`);
-    }
-  };
-  useLayoutEffect(() => {
-    if (!needsFit) return;
-    const stickyColumnPresent = columnOrder.some(
-      (k) => columns[k]?.sticky === "right" && visibleColumns[k] !== false
-    );
-    if (!stickyColumnPresent && storageKey && localStorage.getItem(`${storageKey}_columnWidths`)) {
-      setNeedsFit(false);
-      return;
-    }
-    const el = scrollRef.current;
-    if (!el) return;
-    const containerWidth = el.clientWidth;
-    if (containerWidth <= 0) return;
-    const visibleAllKeys = columnOrder.filter((key) => visibleColumns[key] !== false);
-    const isFixedWidthColumn = (key) => {
-      const col = columns[key];
-      if (!col) return false;
-      if (col.sticky === "right") return false;
-      return col.width != null;
-    };
-    const visibleStickyKeys = visibleAllKeys.filter((key) => columns[key]?.sticky === "right");
-    const visibleFixedKeys = visibleAllKeys.filter((key) => isFixedWidthColumn(key));
-    const visibleDataKeys = visibleAllKeys.filter(
-      (key) => columns[key]?.sticky !== "right" && !isFixedWidthColumn(key)
-    );
-    if (visibleDataKeys.length === 0) {
-      setNeedsFit(false);
-      return;
-    }
-    let chromeWidth = 0;
-    if (expandable) chromeWidth += 32;
-    if (hasActionColumn) chromeWidth += isCompact ? 48 : columnWidths.__actions ?? 60;
-    chromeWidth += visibleStickyKeys.reduce(
-      (sum, key) => sum + (columnWidths[key] ?? minColumnWidth),
-      0
-    );
-    chromeWidth += visibleFixedKeys.reduce(
-      (sum, key) => sum + (columnWidths[key] ?? minColumnWidth),
-      0
-    );
-    if (visibleStickyKeys.length > 0) {
-      chromeWidth += 24;
-    }
-    const dataTotal = visibleDataKeys.reduce(
-      (sum, key) => sum + (columnWidths[key] ?? minColumnWidth),
-      0
-    );
-    const available = containerWidth - chromeWidth;
-    const leftover = available - dataTotal;
-    setNeedsFit(false);
-    if (Math.abs(leftover) <= 1) return;
-    const next = { ...columnWidths };
-    let distributed = 0;
-    visibleDataKeys.forEach((key, idx) => {
-      const current = columnWidths[key] ?? minColumnWidth;
-      const rawShare = idx === visibleDataKeys.length - 1 ? leftover - distributed : Math.round(leftover * (current / dataTotal));
-      const proposed = current + rawShare;
-      const clamped = Math.max(minColumnWidth, proposed);
-      const realShare = clamped - current;
-      next[key] = clamped;
-      distributed += realShare;
-    });
-    setColumnWidths(next);
-  }, [needsFit]);
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    let lastWidth = el.clientWidth;
-    const observer = new ResizeObserver(() => {
-      const w = el.clientWidth;
-      if (w > 0 && w !== lastWidth) {
-        lastWidth = w;
-        setNeedsFit(true);
-      }
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  useEffect(() => {
-    if (storageKey) {
-      localStorage.setItem(`${storageKey}_columnWidths`, JSON.stringify(columnWidths));
-    }
-  }, [columnWidths, storageKey]);
-  useEffect(() => {
-    if (storageKey) {
-      localStorage.setItem(`${storageKey}_itemsPerPage`, itemsPerPage.toString());
-    }
-  }, [itemsPerPage, storageKey]);
-  useEffect(() => {
-    if (storageKey) {
-      localStorage.setItem(`${storageKey}_visibleColumns`, JSON.stringify(visibleColumns));
-    }
-  }, [visibleColumns, storageKey]);
-  useEffect(() => {
-    if (storageKey) {
-      localStorage.setItem(`${storageKey}_columnOrder`, JSON.stringify(columnOrder));
-    }
-  }, [columnOrder, storageKey]);
-  useEffect(() => {
-    if (storageKey) {
-      localStorage.setItem(`${storageKey}_wrapLines`, String(wrapLines));
-    }
-  }, [wrapLines, storageKey]);
-  const handleMouseDownResize = (e, columnKey) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setResizingColumn(columnKey);
-    setStartX(e.clientX);
-    setStartWidth(columnWidths[columnKey] ?? minColumnWidth);
-  };
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (resizingColumn) {
-        const diff = e.clientX - startX;
-        const newWidth = Math.max(minColumnWidth, startWidth + diff);
-        setColumnWidths((prev) => ({
-          ...prev,
-          [resizingColumn]: newWidth
-        }));
-      }
-    };
-    const handleMouseUp = () => {
-      if (resizingColumn) {
-        setResizingColumn(null);
-      }
-    };
-    if (resizingColumn) {
-      document.body.classList.add("crewlet-data-table-resizing");
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-      return () => {
-        document.body.classList.remove("crewlet-data-table-resizing");
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-    }
-    return void 0;
-  }, [resizingColumn, startX, startWidth]);
-  const controlledSort = sortProp !== void 0;
-  const effectiveSort = controlledSort ? sortProp ? { key: sortProp.key, direction: sortProp.direction } : { key: null, direction: null } : sortConfig;
-  const handleSort = (columnKey) => {
-    if (!columns[columnKey]?.sortable && columns[columnKey]?.sortable !== void 0) {
-      return;
-    }
-    let direction = "asc";
-    if (effectiveSort.key === columnKey) {
-      if (effectiveSort.direction === "asc") {
-        direction = "desc";
-      } else if (effectiveSort.direction === "desc") {
-        direction = null;
-      }
-    }
-    const next = direction ? { key: columnKey, direction } : null;
-    if (controlledSort) {
-      onSortChange?.(next);
-    } else {
-      setSortConfig({ key: next?.key ?? null, direction: next?.direction ?? null });
-    }
-  };
-  const getSortedData = () => {
-    const sortKey = effectiveSort.key;
-    if (!sortKey || !effectiveSort.direction) {
-      return [...data];
-    }
-    const column = columns[sortKey];
-    const accessor = column?.sortValue ?? ((row) => row[sortKey]);
-    return [...data].sort((a, b) => {
-      const aValue = accessor(a);
-      const bValue = accessor(b);
-      if (aValue === null || aValue === void 0) return 1;
-      if (bValue === null || bValue === void 0) return -1;
-      let comparison = 0;
-      if (typeof aValue === "string" && typeof bValue === "string") {
-        comparison = aValue.localeCompare(bValue, void 0, { numeric: true, sensitivity: "base" });
-      } else if (typeof aValue === "number" && typeof bValue === "number") {
-        comparison = aValue - bValue;
-      } else if (aValue instanceof Date && bValue instanceof Date) {
-        comparison = aValue.getTime() - bValue.getTime();
-      } else {
-        comparison = String(aValue).localeCompare(String(bValue), void 0, { numeric: true, sensitivity: "base" });
-      }
-      return effectiveSort.direction === "asc" ? comparison : -comparison;
-    });
-  };
-  const [currentPage, setCurrentPage] = useState(1);
-  const sortedDataMemo = getSortedData();
-  const totalPages = paginationEnabled ? Math.max(1, Math.ceil(sortedDataMemo.length / Math.max(1, itemsPerPage))) : 1;
-  useEffect(() => {
-    if (currentPage > totalPages) setCurrentPage(totalPages);
-    if (currentPage < 1) setCurrentPage(1);
-  }, [totalPages, currentPage]);
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [effectiveSort.key, effectiveSort.direction, sortedDataMemo.length]);
-  const getDisplayedData = () => {
-    if (!paginationEnabled) return sortedDataMemo;
-    const start = (currentPage - 1) * itemsPerPage;
-    return sortedDataMemo.slice(start, start + itemsPerPage);
-  };
-  const handleToggleColumn = (columnKey) => {
-    setDraftVisibleColumns((prev) => ({ ...prev, [columnKey]: !prev[columnKey] }));
-  };
-  const handleItemsPerPageChange = (value) => {
-    setDraftItemsPerPage(value);
-  };
-  const handleResetTableSettings = () => {
-    setDraftColumnWidths(generateDefaultColumnWidths());
-    setDraftItemsPerPage(defaultItemsPerPage);
-    setDraftVisibleColumns(generateDefaultVisibleColumns());
-    setDraftColumnOrder(generateDefaultColumnOrder());
-    setDraftWrapLines(effectiveDefaultWrapLines);
-    setDraftSortConfig({ key: null, direction: null });
-    pendingFitOnApplyRef.current = true;
-    setResetConfirmed(true);
-    if (resetConfirmTimer.current) clearTimeout(resetConfirmTimer.current);
-    resetConfirmTimer.current = setTimeout(() => setResetConfirmed(false), 1500);
-  };
-  const openTableSettings = () => {
-    setDraftColumnWidths({ ...columnWidths });
-    setDraftItemsPerPage(itemsPerPage);
-    setDraftVisibleColumns({ ...visibleColumns });
-    setDraftColumnOrder([...columnOrder]);
-    setDraftWrapLines(wrapLines);
-    setDraftSortConfig({ key: effectiveSort.key, direction: effectiveSort.direction });
-    setResetConfirmed(false);
-    pendingFitOnApplyRef.current = false;
-    if (resetConfirmTimer.current) {
-      clearTimeout(resetConfirmTimer.current);
-      resetConfirmTimer.current = null;
-    }
-    setTableSettingsOpen(true);
-  };
-  const applyTableSettings = () => {
-    setColumnWidths(draftColumnWidths);
-    setItemsPerPage(draftItemsPerPage);
-    setVisibleColumns(draftVisibleColumns);
-    setColumnOrder(draftColumnOrder);
-    setWrapLines(draftWrapLines);
-    if (controlledSort) {
-      onSortChange?.(
-        draftSortConfig.key && draftSortConfig.direction ? { key: draftSortConfig.key, direction: draftSortConfig.direction } : null
-      );
-    } else {
-      setSortConfig(draftSortConfig);
-    }
-    if (pendingFitOnApplyRef.current) {
-      pendingFitOnApplyRef.current = false;
-      if (storageKey) {
-        localStorage.removeItem(`${storageKey}_columnWidths`);
-      }
-      setNeedsFit(true);
-    }
-    setTableSettingsOpen(false);
-  };
-  const cancelTableSettings = () => {
-    pendingFitOnApplyRef.current = false;
-    setTableSettingsOpen(false);
-  };
-  const handleDragStart = (e, columnKey) => {
-    setDraggedColumn(columnKey);
-    e.dataTransfer.effectAllowed = "move";
-  };
-  const handleDragOver = (e, columnKey) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    if (columnKey && draggedColumn && draggedColumn !== columnKey) {
-      if (dragTimeoutRef.current) {
-        clearTimeout(dragTimeoutRef.current);
-      }
-      dragTimeoutRef.current = setTimeout(() => {
-        setDraftColumnOrder((prev) => {
-          const newOrder = [...prev];
-          const draggedIndex = newOrder.indexOf(draggedColumn);
-          const targetIndex = newOrder.indexOf(columnKey);
-          if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
-            return prev;
-          }
-          newOrder.splice(draggedIndex, 1);
-          newOrder.splice(targetIndex, 0, draggedColumn);
-          return newOrder;
-        });
-      }, 5);
-    }
-  };
-  const handleDrop = (e, _targetColumnKey) => {
-    e.preventDefault();
-    setDraggedColumn(null);
-  };
-  const handleDragEnd = () => {
-    if (dragTimeoutRef.current) {
-      clearTimeout(dragTimeoutRef.current);
-    }
-    setDraggedColumn(null);
-  };
-  useEffect(() => {
-    const handleEscKey = (event) => {
-      if (event.key === "Escape" && tableSettingsOpen) {
-        setTableSettingsOpen(false);
-      }
-    };
-    document.addEventListener("keydown", handleEscKey);
-    return () => {
-      document.removeEventListener("keydown", handleEscKey);
-    };
-  }, [tableSettingsOpen]);
-  const renderCellContent = (row, columnKey) => {
-    const column = columns[columnKey];
-    const value = row[columnKey];
-    if (column?.render) {
-      return column.render(row, value);
-    }
-    return value !== null && value !== void 0 ? value : "\u2013";
-  };
-  const renderBodyCell = (row, columnKey) => {
-    const column = columns[columnKey];
-    if (!column) return null;
-    const style = {};
-    if (isCompact) {
-      if (columnWidths[columnKey] != null) {
-        style.width = `${columnWidths[columnKey]}px`;
-      }
-      if (column.mono) {
-        style.fontFamily = "var(--font-family-mono)";
-        style.fontSize = 11;
-      }
-    } else {
-      style.width = `${columnWidths[columnKey]}px`;
-    }
-    const rendered = renderCellContent(row, columnKey);
-    let content = rendered;
-    if (isCompact && column.copyable) {
-      const raw = column.copyValue ? column.copyValue(row) : row[columnKey];
-      const copyText = raw !== void 0 && raw !== null ? String(raw) : "";
-      content = /* @__PURE__ */ jsx(CopyableCell, { value: copyText, ariaLabel: `Copy ${typeof column.label === "string" ? column.label : columnKey}`, children: rendered });
-    }
-    const tdClassName = isCompact && column.sticky === "right" ? "crewlet-data-table__td--sticky-right" : void 0;
-    return /* @__PURE__ */ jsx("td", { style, className: tdClassName, children: content }, columnKey);
-  };
-  const renderHeaderCell = (columnKey) => {
-    if (!visibleColumns[columnKey]) return null;
-    const column = columns[columnKey];
-    if (!column) return null;
-    const isSortable = column.sortable !== false;
-    const isActive = effectiveSort.key === columnKey;
-    const arrow = !isSortable ? null : isActive ? effectiveSort.direction === "asc" ? "arrow_upward" : "arrow_downward" : "unfold_more";
-    if (isCompact) {
-      const style = {};
-      if (columnWidths[columnKey] != null) {
-        style.width = `${columnWidths[columnKey]}px`;
-      }
-      const isSticky = column.sticky === "right";
-      const visibleStickyExists = columnOrder.some(
-        (k) => columns[k]?.sticky === "right" && visibleColumns[k] !== false
-      );
-      const suppressResizer = !resizable || isSticky || visibleStickyExists;
-      const resizer = suppressResizer ? null : /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "crewlet-data-table__resizer",
-          onMouseDown: (e) => {
-            e.stopPropagation();
-            handleMouseDownResize(e, columnKey);
-          },
-          onClick: (e) => e.stopPropagation(),
-          "aria-hidden": true
-        }
-      );
-      const stickyClass = isSticky ? " crewlet-data-table__th--sticky-right" : "";
-      if (!isSortable) {
-        return /* @__PURE__ */ jsxs("th", { style, className: stickyClass.trim() || void 0, children: [
-          column.label,
-          resizer
-        ] }, columnKey);
-      }
-      const thClass = `crewlet-data-table__th--sortable${isActive ? " is-active" : ""}${stickyClass}`;
-      return /* @__PURE__ */ jsxs("th", { style, className: thClass, children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-data-table__sort-button",
-            onClick: () => handleSort(columnKey),
-            children: [
-              /* @__PURE__ */ jsx("span", { children: column.label }),
-              arrow && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: arrow })
-            ]
-          }
-        ),
-        resizer
-      ] }, columnKey);
-    }
-    return /* @__PURE__ */ jsxs(
-      "th",
-      {
-        style: { width: `${columnWidths[columnKey]}px` },
-        className: isSortable ? "crewlet-data-table__th--sortable" : void 0,
-        onClick: isSortable ? () => handleSort(columnKey) : void 0,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__header-content", children: [
-            /* @__PURE__ */ jsx("span", { children: column.label }),
-            isSortable && /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined crewlet-data-table__sort-icon${isActive ? " is-active" : ""}`, children: arrow })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "crewlet-data-table__column-resizer",
-              onMouseDown: (e) => handleMouseDownResize(e, columnKey),
-              onClick: (e) => e.stopPropagation()
-            }
-          )
-        ]
-      },
-      columnKey
-    );
-  };
-  const hasActionColumn = !!rowActions || showActions && !!onRowAction;
-  const renderActionsHeader = () => {
-    if (!hasActionColumn) return null;
-    if (!settingsInHeader) {
-      return /* @__PURE__ */ jsx(
-        "th",
-        {
-          className: "crewlet-data-table__th--chrome crewlet-data-table__th--actions",
-          style: { width: 1 }
-        },
-        "__actions"
-      );
-    }
-    return /* @__PURE__ */ jsxs("th", { style: { width: `${columnWidths.__actions}px`, position: "relative" }, children: [
-      "Actions",
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-data-table__header-btn crewlet-data-table__header-btn--reset",
-          onClick: (e) => {
-            e.stopPropagation();
-            resetToDefault();
-          },
-          title: "Reset to Default",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "settings_backup_restore" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          ref: settingsButtonRef,
-          className: "crewlet-data-table__header-btn crewlet-data-table__header-btn--settings",
-          onClick: (e) => {
-            e.stopPropagation();
-            openTableSettings();
-          },
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "settings" })
-        }
-      )
-    ] }, "__actions");
-  };
-  const renderActionsCell = (row) => {
-    if (!hasActionColumn) return null;
-    if (rowActions) {
-      const actions = rowActions(row);
-      return /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: "crewlet-data-table__td--actions",
-          style: { textAlign: "right", width: 1 },
-          children: /* @__PURE__ */ jsx(RowActionsMenu, { actions })
-        },
-        "__actions"
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "td",
-      {
-        className: "crewlet-data-table__td--actions",
-        style: { width: `${columnWidths.__actions}px`, textAlign: "center" },
-        children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-data-table__action-btn",
-            onClick: () => onRowAction(row),
-            title: actionLabel,
-            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: actionIcon })
-          }
-        )
-      },
-      "__actions"
-    );
-  };
-  const displayedData = getDisplayedData();
-  const visibleColumnKeys = columnOrder.filter((key) => visibleColumns[key]);
-  const spacerCols = isCompact ? 1 : 0;
-  const colSpan = visibleColumnKeys.length + (hasActionColumn ? 1 : 0) + spacerCols;
-  const wrapLinesClass = wrapLines ? " crewlet-data-table--wrap-lines" : "";
-  const rootClass = isCompact ? `crewlet-data-table crewlet-data-table--compact crewlet-data-table--density-${density}${wrapLinesClass} ${className}`.trim() : `crewlet-data-table crewlet-data-table--default${wrapLinesClass} ${className}`.trim();
-  const expandable = !!renderExpandedRow;
-  const expandColSpan = colSpan + (expandable ? 1 : 0);
-  const visibleRowKeys = displayedData.map((row) => resolveRowKey(row));
-  const allExpanded = expandable && visibleRowKeys.length > 0 && visibleRowKeys.every((k) => expandedKeys.has(k));
-  const toggleExpandAll = () => {
-    setExpandedKeys(() => allExpanded ? /* @__PURE__ */ new Set() : new Set(visibleRowKeys));
-  };
-  const renderExpandHeader = () => {
-    if (!expandable) return null;
-    return /* @__PURE__ */ jsx(
-      "th",
-      {
-        className: "crewlet-data-table__expand-header",
-        style: { width: 32 },
-        children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-data-table__expand-all-btn",
-            onClick: toggleExpandAll,
-            "aria-label": allExpanded ? "Collapse all rows" : "Expand all rows",
-            "aria-expanded": allExpanded,
-            title: allExpanded ? "Collapse all" : "Expand all",
-            children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `material-symbols-outlined crewlet-data-table__chevron${allExpanded ? " is-open" : ""}`,
-                "aria-hidden": true,
-                children: "chevron_right"
-              }
-            )
-          }
-        )
-      },
-      "__expand"
-    );
-  };
-  const renderExpandCell = (_row, isOpen, canExpand) => {
-    if (!expandable) return null;
-    return /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__expand-cell", "aria-hidden": true, style: { width: 32 }, children: canExpand && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `material-symbols-outlined crewlet-data-table__chevron${isOpen ? " is-open" : ""}`,
-        children: "chevron_right"
-      }
-    ) }, "__expand");
-  };
-  const topControlsVisible = isCompact;
-  const headerVisible = title != null || description != null || icon != null;
-  const renderTopControls = topControlsVisible ? /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__toolbar-end", children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__pagination", "aria-label": "Pagination", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-data-table__page-btn",
-          onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
-          disabled: currentPage <= 1,
-          "aria-label": "Previous page",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__page-number", "aria-live": "polite", children: currentPage }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-data-table__page-btn",
-          onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
-          disabled: currentPage >= totalPages,
-          "aria-label": "Next page",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "chevron_right" })
-        }
-      )
-    ] }),
-    settingsEnabled && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        ref: settingsButtonRef,
-        className: "crewlet-data-table__settings-btn",
-        onClick: openTableSettings,
-        "aria-label": "Table settings",
-        title: "Table settings",
-        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "settings" })
-      }
-    )
-  ] }) : null;
-  const toolbarVisible = renderToolbar != null || topControlsVisible && !headerVisible;
-  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
-    headerVisible && /* @__PURE__ */ jsxs("header", { className: "crewlet-data-table__header", children: [
-      icon != null && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-data-table__header-icon", "aria-hidden": true, children: icon }),
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__header-text", children: [
-        title != null && /* @__PURE__ */ jsx("h3", { className: "crewlet-data-table__title", children: title }),
-        description != null && /* @__PURE__ */ jsx("p", { className: "crewlet-data-table__description", children: description })
-      ] }),
-      renderTopControls
-    ] }),
-    toolbarVisible && /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__toolbar", children: [
-      renderToolbar != null && /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__toolbar-start", children: renderToolbar }),
-      onClearFilters != null && filtersActive && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-data-table__clear-filters",
-          onClick: onClearFilters,
-          children: clearFiltersLabel
-        }
-      ),
-      topControlsVisible && !headerVisible && renderTopControls
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: [
-          "crewlet-data-table__rail",
-          /*
-           * When the table carries a sticky-right action column the
-           * row is treated as a frozen, screen-fitting surface: the
-           * fit pass redistributes regular columns to consume only
-           * the room left after the sticky pane and the gutter, the
-           * resize handles are suppressed, and the scroll container
-           * locks horizontal overflow. The modifier class flips that
-           * behaviour on so the CSS can also drop the scrollbar mask
-           * that would otherwise float over rows when no scrollbar
-           * is present.
-           */
-          isCompact && columnOrder.some(
-            (k) => columns[k]?.sticky === "right" && visibleColumns[k] !== false
-          ) ? "crewlet-data-table__rail--frozen" : void 0
-        ].filter(Boolean).join(" "),
-        style: isCompact ? {
-          "--crewlet-data-table-sticky-pane-width": `${columnOrder.filter((key) => columns[key]?.sticky === "right" && visibleColumns[key] !== false).reduce((sum, key) => sum + (columnWidths[key] ?? minColumnWidth), 0)}px`
-        } : void 0,
-        children: /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs("table", { className: "crewlet-data-table__table", children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            renderExpandHeader(),
-            columnOrder.filter((key) => columns[key]?.sticky !== "right").map((columnKey) => renderHeaderCell(columnKey)),
-            isCompact && /* @__PURE__ */ jsx(
-              "th",
-              {
-                className: "crewlet-data-table__th--chrome crewlet-data-table__th--spacer",
-                "aria-hidden": true
-              },
-              "__spacer"
-            ),
-            columnOrder.filter((key) => columns[key]?.sticky === "right").map((columnKey) => renderHeaderCell(columnKey)),
-            renderActionsHeader()
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: loading && displayedData.length === 0 ? (
-            /*
-             * Skeleton rows live inside the real <tbody> and reuse the
-             * live column set + widths, so the shimmer lines up exactly
-             * with the data that replaces it. Bar widths cycle a fixed
-             * pattern (not Math.random) so re-renders never reshuffle
-             * the shimmer.
-             */
-            Array.from({ length: Math.max(1, skeletonRows) }, (_, rowIdx) => {
-              const widths = [72, 46, 84, 58, 64];
-              const visibleKeys = columnOrder.filter(
-                (key) => columns[key]?.sticky !== "right" && visibleColumns[key] !== false
-              );
-              return /* @__PURE__ */ jsxs("tr", { className: "crewlet-data-table__skeleton-row", "aria-hidden": true, children: [
-                expandable && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__expand-cell", style: { width: 32 } }, "__expand"),
-                visibleKeys.map((columnKey, colIdx) => /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    style: columnWidths[columnKey] != null ? { width: `${columnWidths[columnKey]}px` } : void 0,
-                    children: /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "crewlet-data-table__skeleton-bar",
-                        style: {
-                          width: `${widths[(rowIdx + colIdx) % widths.length]}%`,
-                          animationDelay: `${rowIdx * 0.1}s`
-                        }
-                      }
-                    )
-                  },
-                  columnKey
-                )),
-                isCompact && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--spacer", "aria-hidden": true }, "__spacer"),
-                columnOrder.filter((key) => columns[key]?.sticky === "right" && visibleColumns[key] !== false).map((columnKey) => /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--sticky-right" }, columnKey)),
-                hasActionColumn && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--actions" }, "__actions")
-              ] }, `__skeleton_${rowIdx}`);
-            })
-          ) : error ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-            "td",
-            {
-              colSpan: expandColSpan,
-              className: "crewlet-data-table__empty",
-              children: error
-            }
-          ) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-            "td",
-            {
-              colSpan: expandColSpan,
-              className: "crewlet-data-table__empty",
-              children: emptyMessage
-            }
-          ) }) : displayedData.map((row) => {
-            const trKey = resolveRowKey(row);
-            const isArchived = archivedPredicate ? archivedPredicate(row) : false;
-            const expanded = expandable ? expandedKeys.has(trKey) : false;
-            const expandedContent = expandable ? renderExpandedRow(row) : null;
-            const canExpand = expandable && expandedContent != null;
-            const isClickable = !!onRowClick || canExpand;
-            const trClass = [
-              isArchived ? "crewlet-data-table__row--archived" : void 0,
-              isClickable ? "crewlet-data-table__row--clickable" : void 0,
-              canExpand ? "crewlet-data-table__row--expandable" : void 0,
-              expanded ? "is-expanded" : void 0
-            ].filter(Boolean).join(" ");
-            const accessory = renderAccessoryRow ? renderAccessoryRow(row) : null;
-            const onRowSurfaceClick = canExpand ? () => toggleExpanded(trKey) : onRowClick ? () => onRowClick(row) : void 0;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "tr",
-                {
-                  className: trClass || void 0,
-                  title: isArchived ? `This row is ${archivedLabel}` : void 0,
-                  onClick: onRowSurfaceClick,
-                  tabIndex: canExpand ? 0 : void 0,
-                  "aria-expanded": canExpand ? expanded : void 0,
-                  onKeyDown: canExpand ? (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      toggleExpanded(trKey);
-                    }
-                  } : void 0,
-                  children: [
-                    renderExpandCell(row, expanded, canExpand),
-                    columnOrder.filter((columnKey) => columns[columnKey]?.sticky !== "right").map((columnKey) => {
-                      if (!visibleColumns[columnKey]) return null;
-                      return renderBodyCell(row, columnKey);
-                    }),
-                    isCompact && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--spacer", "aria-hidden": true }, "__spacer"),
-                    columnOrder.filter((columnKey) => columns[columnKey]?.sticky === "right").map((columnKey) => {
-                      if (!visibleColumns[columnKey]) return null;
-                      return renderBodyCell(row, columnKey);
-                    }),
-                    renderActionsCell(row)
-                  ]
-                }
-              ),
-              expanded && expandedContent != null && /* @__PURE__ */ jsx(
-                "tr",
-                {
-                  className: [
-                    "crewlet-data-table__expanded-row",
-                    isArchived ? "crewlet-data-table__row--archived" : void 0
-                  ].filter(Boolean).join(" "),
-                  children: /* @__PURE__ */ jsx("td", { colSpan: expandColSpan, className: "crewlet-data-table__expanded-cell", children: expandedContent })
-                }
-              ),
-              accessory != null && /* @__PURE__ */ jsx(
-                "tr",
-                {
-                  className: [
-                    "crewlet-data-table__accessory-row",
-                    isArchived ? "crewlet-data-table__row--archived" : void 0
-                  ].filter(Boolean).join(" "),
-                  children: /* @__PURE__ */ jsx("td", { colSpan, className: "crewlet-data-table__accessory-cell", children: accessory })
-                }
-              )
-            ] }, trKey ?? JSON.stringify(row));
-          }) })
-        ] }) })
-      }
-    ),
-    hasMore && onLoadMore && /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__load-more", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outline",
-        size: "small",
-        onClick: onLoadMore,
-        disabled: loadingMore,
-        children: loadingMore ? "Loading\u2026" : loadMoreLabel
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      Modal,
-      {
-        open: tableSettingsOpen,
-        onClose: cancelTableSettings,
-        title: "Table Settings",
-        size: effectiveSettingsVariant === "compact" ? "sm" : "lg",
-        footer: /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__settings-footer", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "secondary",
-              onClick: handleResetTableSettings,
-              leadingIcon: resetConfirmed ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "material-symbols-outlined crewlet-data-table__reset-confirm-icon",
-                  "aria-hidden": true,
-                  children: "check"
-                }
-              ) : void 0,
-              "aria-live": "polite",
-              children: "Reset to Default"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__settings-footer-right", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: cancelTableSettings, children: "Cancel" }),
-            /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: applyTableSettings, children: "Apply" })
-          ] })
-        ] }),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__settings-section", children: [
-            /* @__PURE__ */ jsx("h3", { className: "crewlet-data-table__settings-section-title", children: effectiveSettingsVariant === "compact" ? "Page size" : "Items per page" }),
-            /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__items-per-page-options", children: [
-              itemsPerPageOptions.map((value) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: `crewlet-data-table__items-per-page-btn${draftItemsPerPage === value ? " is-active" : ""}`,
-                  onClick: () => handleItemsPerPageChange(value),
-                  children: value
-                },
-                value
-              )),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: `crewlet-data-table__items-per-page-btn${draftItemsPerPage === data.length ? " is-active" : ""}`,
-                  onClick: () => handleItemsPerPageChange(data.length),
-                  children: "All"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__settings-section", children: /* @__PURE__ */ jsxs("label", { className: "crewlet-data-table__toggle-row", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                className: "crewlet-data-table__toggle-checkbox",
-                checked: draftWrapLines,
-                onChange: (e) => setDraftWrapLines(e.target.checked)
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "crewlet-data-table__toggle-text", children: [
-              /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__toggle-label", children: "Wrap lines" }),
-              /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__toggle-hint", children: "Enable to wrap table cell content, disable to truncate text." })
-            ] })
-          ] }) }),
-          effectiveSettingsVariant === "rich" && /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__settings-section", children: [
-            /* @__PURE__ */ jsx("h3", { className: "crewlet-data-table__settings-section-title", children: "Column Order & Visibility" }),
-            /* @__PURE__ */ jsx("p", { className: "crewlet-data-table__settings-section-hint", children: "Drag to reorder, check/uncheck to show/hide" }),
-            /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__column-toggles", children: draftColumnOrder.map((key) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: `crewlet-data-table__column-toggle-item${draggedColumn === key ? " is-dragging" : ""}`,
-                draggable: true,
-                onDragStart: (e) => handleDragStart(e, key),
-                onDragOver: (e) => handleDragOver(e, key),
-                onDrop: (e) => handleDrop(e),
-                onDragEnd: handleDragEnd,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-data-table__column-drag-handle", children: "drag_indicator" }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: !!draftVisibleColumns[key],
-                      onChange: () => handleToggleColumn(key),
-                      className: "crewlet-data-table__column-toggle-checkbox"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__column-toggle-label", children: columns[key]?.label && String(columns[key]?.label).trim() !== "" ? columns[key]?.label : key })
-                ]
-              },
-              key
-            )) })
-          ] })
-        ]
-      }
-    )
-  ] });
-};
-var pad = (n) => String(n).padStart(2, "0");
-var formatValue = (p) => {
-  return `${p.year}-${pad(p.month + 1)}-${pad(p.day)}T${pad(p.hour)}:${pad(p.minute)}:${pad(p.second)}`;
-};
-var parseValue = (s) => {
-  if (!s) return null;
-  const tIndex = s.indexOf("T");
-  const datePart = tIndex >= 0 ? s.slice(0, tIndex) : s;
-  const timePart = tIndex >= 0 ? s.slice(tIndex + 1) : "00:00:00";
-  const dateBits = datePart.split("-");
-  if (dateBits.length < 3) return null;
-  const y = parseInt(dateBits[0], 10);
-  const m = parseInt(dateBits[1], 10);
-  const d = parseInt(dateBits[2], 10);
-  if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null;
-  const timeBits = timePart.split(":");
-  const h = parseInt(timeBits[0] || "0", 10);
-  const mn = parseInt(timeBits[1] || "0", 10);
-  const sec = parseInt(timeBits[2] || "0", 10);
-  return {
-    year: y,
-    month: m - 1,
-    day: d,
-    hour: Number.isFinite(h) ? h : 0,
-    minute: Number.isFinite(mn) ? mn : 0,
-    second: Number.isFinite(sec) ? sec : 0
-  };
-};
-var daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
-var startWeekday = (year, month, firstDay) => {
-  const d = new Date(year, month, 1).getDay();
-  return (d - firstDay + 7) % 7;
-};
-var MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var WEEKDAY_LABELS_SUN = ["S", "M", "T", "W", "T", "F", "S"];
-var WEEKDAY_LABELS_MON = ["M", "T", "W", "T", "F", "S", "S"];
-var formatLabel = (s, showTime) => {
-  const parsed = parseValue(s);
-  if (!parsed) return "";
-  const date = new Date(parsed.year, parsed.month, parsed.day, parsed.hour, parsed.minute, parsed.second);
-  if (showTime) {
-    return date.toLocaleString(void 0, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hour12: false
-    });
-  }
-  return date.toLocaleDateString(void 0, {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
-};
-var compareDates = (a, b) => {
-  if (a.year !== b.year) return a.year - b.year;
-  if (a.month !== b.month) return a.month - b.month;
-  return a.day - b.day;
-};
-var parseBoundDate = (s) => {
-  const p = parseValue(s);
-  if (!p) return null;
-  return { year: p.year, month: p.month, day: p.day };
-};
-function DateTimePicker({
-  value,
-  onChange,
-  placeholder = "Pick a date",
-  showTime = true,
-  minDate,
-  maxDate,
-  firstDayOfWeek = 0,
-  ariaLabel,
-  className = "",
-  disabled = false,
-  size = "md"
-}) {
-  const parsed = useMemo(() => parseValue(value), [value]);
-  const minBound = useMemo(() => parseBoundDate(minDate), [minDate]);
-  const maxBound = useMemo(() => parseBoundDate(maxDate), [maxDate]);
-  const today = useMemo(() => {
-    const now = /* @__PURE__ */ new Date();
-    return { year: now.getFullYear(), month: now.getMonth(), day: now.getDate() };
-  }, []);
-  const [viewMonth, setViewMonth] = useState(() => {
-    if (parsed) return { year: parsed.year, month: parsed.month };
-    return { year: today.year, month: today.month };
-  });
-  useEffect(() => {
-    if (parsed) setViewMonth({ year: parsed.year, month: parsed.month });
-  }, [parsed?.year, parsed?.month]);
-  const weekdayLabels = firstDayOfWeek === 1 ? WEEKDAY_LABELS_MON : WEEKDAY_LABELS_SUN;
-  const totalDays = daysInMonth(viewMonth.year, viewMonth.month);
-  const leading = startWeekday(viewMonth.year, viewMonth.month, firstDayOfWeek);
-  const cells = useMemo(() => {
-    const out = [];
-    const prevTotal = daysInMonth(
-      viewMonth.month === 0 ? viewMonth.year - 1 : viewMonth.year,
-      viewMonth.month === 0 ? 11 : viewMonth.month - 1
-    );
-    for (let i = 0; i < leading; i += 1) {
-      out.push({ day: prevTotal - leading + 1 + i, inMonth: false });
-    }
-    for (let d = 1; d <= totalDays; d += 1) {
-      out.push({ day: d, inMonth: true });
-    }
-    while (out.length < 42) {
-      out.push({ day: out.length - leading - totalDays + 1, inMonth: false });
-    }
-    return out;
-  }, [viewMonth.year, viewMonth.month, leading, totalDays]);
-  const stepMonth = (delta) => {
-    setViewMonth((prev) => {
-      const next = prev.month + delta;
-      const carry = Math.floor(next / 12);
-      const normalised = (next % 12 + 12) % 12;
-      return { year: prev.year + carry, month: normalised };
-    });
-  };
-  const stepYear = (delta) => {
-    setViewMonth((prev) => ({ year: prev.year + delta, month: prev.month }));
-  };
-  const pickDay = (day, inMonth) => {
-    let targetYear = viewMonth.year;
-    let targetMonth = viewMonth.month;
-    if (!inMonth) {
-      if (day > 20) {
-        targetMonth -= 1;
-        if (targetMonth < 0) {
-          targetMonth = 11;
-          targetYear -= 1;
-        }
-      } else {
-        targetMonth += 1;
-        if (targetMonth > 11) {
-          targetMonth = 0;
-          targetYear += 1;
-        }
-      }
-      setViewMonth({ year: targetYear, month: targetMonth });
-    }
-    onChange(formatValue({
-      year: targetYear,
-      month: targetMonth,
-      day,
-      hour: parsed?.hour ?? 0,
-      minute: parsed?.minute ?? 0,
-      second: parsed?.second ?? 0
-    }));
-  };
-  const setTime = (hour, minute, second) => {
-    const base = parsed ?? {
-      year: today.year,
-      month: today.month,
-      day: today.day,
-      hour: 0,
-      minute: 0,
-      second: 0
-    };
-    onChange(formatValue({ ...base, hour, minute, second }));
-  };
-  const isOutOfBounds = (cellDate) => {
-    if (minBound && compareDates(cellDate, minBound) < 0) return true;
-    if (maxBound && compareDates(cellDate, maxBound) > 0) return true;
-    return false;
-  };
-  const isToday = (cellYear, cellMonth, cellDay) => cellYear === today.year && cellMonth === today.month && cellDay === today.day;
-  const isSelected = (cellYear, cellMonth, cellDay) => {
-    if (!parsed) return false;
-    return cellYear === parsed.year && cellMonth === parsed.month && cellDay === parsed.day;
-  };
-  const triggerLabel = formatLabel(value, showTime);
-  const wrapClass = [
-    "crewlet-datetime",
-    `crewlet-datetime--${size}`,
-    value ? "is-set" : "",
-    disabled ? "is-disabled" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      align: "start",
-      side: "bottom",
-      width: "match",
-      className: "crewlet-datetime__popover",
-      trigger: (open, toggle) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: `${wrapClass}${open ? " is-open" : ""}`,
-          onClick: () => {
-            if (!disabled) toggle();
-          },
-          disabled,
-          "aria-haspopup": "dialog",
-          "aria-expanded": open,
-          "aria-label": ariaLabel || "Date",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-datetime__icon", "aria-hidden": true, children: "calendar_today" }),
-            /* @__PURE__ */ jsx("span", { className: `crewlet-datetime__label${value ? "" : " is-placeholder"}`, children: value ? triggerLabel : placeholder }),
-            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-datetime__chevron", "aria-hidden": true, children: open ? "expand_less" : "expand_more" })
-          ]
-        }
-      ),
-      children: (close) => /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__panel", role: "dialog", "aria-label": "Date picker", children: [
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__nav", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "crewlet-datetime__nav-btn",
-              onClick: () => stepYear(-1),
-              "aria-label": "Previous year",
-              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "keyboard_double_arrow_left" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "crewlet-datetime__nav-btn",
-              onClick: () => stepMonth(-1),
-              "aria-label": "Previous month",
-              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "chevron_left" })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__title", "aria-live": "polite", children: [
-            MONTH_NAMES[viewMonth.month],
-            " ",
-            viewMonth.year
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "crewlet-datetime__nav-btn",
-              onClick: () => stepMonth(1),
-              "aria-label": "Next month",
-              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "chevron_right" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "crewlet-datetime__nav-btn",
-              onClick: () => stepYear(1),
-              "aria-label": "Next year",
-              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "keyboard_double_arrow_right" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "crewlet-datetime__weekdays", "aria-hidden": true, children: weekdayLabels.map((label, i) => /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__weekday", children: label }, i)) }),
-        /* @__PURE__ */ jsx("div", { className: "crewlet-datetime__grid", role: "grid", children: cells.map((cell, i) => {
-          let cellYear = viewMonth.year;
-          let cellMonth = viewMonth.month;
-          if (!cell.inMonth) {
-            if (cell.day > 20) {
-              cellMonth -= 1;
-              if (cellMonth < 0) {
-                cellMonth = 11;
-                cellYear -= 1;
-              }
-            } else {
-              cellMonth += 1;
-              if (cellMonth > 11) {
-                cellMonth = 0;
-                cellYear += 1;
-              }
-            }
-          }
-          const outOfBounds = isOutOfBounds({ year: cellYear, month: cellMonth, day: cell.day });
-          const todayCell = isToday(cellYear, cellMonth, cell.day);
-          const selected = isSelected(cellYear, cellMonth, cell.day);
-          const cls = [
-            "crewlet-datetime__cell",
-            cell.inMonth ? "" : "is-outside",
-            outOfBounds ? "is-disabled" : "",
-            todayCell ? "is-today" : "",
-            selected ? "is-selected" : ""
-          ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "gridcell",
-              className: cls,
-              disabled: outOfBounds,
-              onClick: () => {
-                if (outOfBounds) return;
-                pickDay(cell.day, cell.inMonth);
-                if (!showTime) close();
-              },
-              children: cell.day
-            },
-            i
-          );
-        }) }),
-        showTime && /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__time", children: [
-          /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-label", children: "Time" }),
-          /* @__PURE__ */ jsx(
-            TimeUnitInput,
-            {
-              value: parsed?.hour ?? 0,
-              max: 23,
-              ariaLabel: "Hour",
-              onCommit: (n) => setTime(n, parsed?.minute ?? 0, parsed?.second ?? 0)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-sep", children: ":" }),
-          /* @__PURE__ */ jsx(
-            TimeUnitInput,
-            {
-              value: parsed?.minute ?? 0,
-              max: 59,
-              ariaLabel: "Minute",
-              onCommit: (n) => setTime(parsed?.hour ?? 0, n, parsed?.second ?? 0)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-sep", children: ":" }),
-          /* @__PURE__ */ jsx(
-            TimeUnitInput,
-            {
-              value: parsed?.second ?? 0,
-              max: 59,
-              ariaLabel: "Second",
-              onCommit: (n) => setTime(parsed?.hour ?? 0, parsed?.minute ?? 0, n)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__footer", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "crewlet-datetime__footer-btn",
-              onClick: () => {
-                onChange("");
-              },
-              children: "Clear"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__footer-spacer" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "crewlet-datetime__footer-btn is-primary",
-              onClick: () => close(),
-              children: "Done"
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function TimeUnitInput({ value, max, ariaLabel, onCommit }) {
-  const [display, setDisplay] = useState(() => pad(value));
-  useEffect(() => {
-    setDisplay(pad(value));
-  }, [value]);
-  const commit = () => {
-    const n = Math.max(0, Math.min(max, parseInt(display, 10) || 0));
-    setDisplay(pad(n));
-    if (n !== value) onCommit(n);
-  };
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      inputMode: "numeric",
-      pattern: "[0-9]*",
-      maxLength: 2,
-      className: "crewlet-datetime__time-input",
-      value: display,
-      onChange: (e) => setDisplay(e.target.value.replace(/[^0-9]/g, "").slice(0, 2)),
-      onBlur: commit,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          e.currentTarget.blur();
-        }
-      },
-      onFocus: (e) => e.currentTarget.select(),
-      "aria-label": ariaLabel
-    }
-  );
-}
-var Eyebrow = ({
-  as: As = "span",
-  variant = "muted",
-  className = "",
-  children,
-  ...rest
-}) => {
-  const classes = ["crewlet-eyebrow", `crewlet-eyebrow--${variant}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(As, { ...rest, className: classes, children });
-};
-var IconButton = ({
-  size = "sm",
-  variant = "ghost",
-  className = "",
-  type = "button",
-  asChild = false,
-  children,
-  ...rest
-}) => {
-  const classes = [
-    "crewlet-icon-btn",
-    `crewlet-icon-btn--${size}`,
-    `crewlet-icon-btn--${variant}`,
-    className
-  ].filter(Boolean).join(" ");
-  if (asChild) {
-    const child = Children.only(children);
-    if (!isValidElement(child)) {
-      throw new Error("IconButton with asChild expects exactly one valid React element child.");
-    }
-    const childEl = child;
-    const merged = [childEl.props.className, classes].filter(Boolean).join(" ");
-    return cloneElement(childEl, { ...rest, className: merged });
-  }
-  return /* @__PURE__ */ jsx("button", { type, className: classes, ...rest, children });
-};
-var ImageUpload = ({
-  src,
-  name,
-  size = 64,
-  shape = "circle",
-  readOnly = false,
-  uploading = false,
-  accept = "image/*",
-  onSelect,
-  onRemove,
-  className = "",
-  style,
-  ...rest
-}) => {
-  const inputRef = useRef(null);
-  const interactive = !readOnly && !uploading;
-  const canRemove = Boolean(src) && !readOnly && Boolean(onRemove);
-  const openPicker = () => {
-    if (!interactive) {
-      return;
-    }
-    inputRef.current?.click();
-  };
-  const handleChange = (event) => {
-    const file = event.target.files?.[0];
-    event.target.value = "";
-    if (file) {
-      onSelect(file);
-    }
-  };
-  const handleRemove = (event) => {
-    event.stopPropagation();
-    onRemove?.();
-  };
-  const empty = !src && !readOnly;
-  const wrapperClasses = [
-    "crewlet-image-upload",
-    `crewlet-image-upload--${shape}`,
-    uploading ? "is-uploading" : "",
-    empty ? "is-empty" : "",
-    className
-  ].filter(Boolean).join(" ");
-  const sizeStyle = {
-    "--crewlet-image-upload-size": `${size}px`,
-    ...style
-  };
-  const triggerLabel = uploading ? "Uploading image" : src ? "Change image" : "Upload image";
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: wrapperClasses, style: sizeStyle, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "crewlet-image-upload__trigger",
-        onClick: openPicker,
-        disabled: !interactive,
-        "aria-label": triggerLabel,
-        "aria-busy": uploading,
-        children: [
-          /* @__PURE__ */ jsx(Avatar, { src, name, size, shape }),
-          !readOnly ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay", "aria-hidden": true, children: uploading ? /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__spinner" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "photo_camera" }),
-            /* @__PURE__ */ jsx("span", { className: "crewlet-image-upload__overlay-text", children: src ? "Change" : "Upload" })
-          ] }) }) : null
-        ]
-      }
-    ),
-    canRemove ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "crewlet-image-upload__remove",
-        onClick: handleRemove,
-        disabled: uploading,
-        "aria-label": "Remove image",
-        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "close" })
-      }
-    ) : null,
-    !readOnly ? /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept,
-        className: "crewlet-image-upload__input",
-        onChange: handleChange,
-        tabIndex: -1
-      }
-    ) : null
-  ] });
-};
-var Checkbox = forwardRef(function Checkbox2({
-  label,
-  description,
-  tone = "default",
-  className = "",
-  disabled,
-  id,
-  ...rest
-}, ref) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const describedBy = description ? `${inputId}-description` : void 0;
-  const classes = [
-    "crewlet-checkbox",
-    tone === "danger" ? "crewlet-checkbox--danger" : "",
-    disabled ? "is-disabled" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        id: inputId,
-        type: "checkbox",
-        className: "crewlet-checkbox__control",
-        disabled,
-        "aria-describedby": describedBy,
-        ...rest
-      }
-    ),
-    /* @__PURE__ */ jsxs("label", { className: "crewlet-checkbox__text", htmlFor: inputId, children: [
-      /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__label", children: label }),
-      description && /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__description", id: describedBy, children: description })
-    ] })
-  ] });
-});
-var Input = forwardRef(function Input2({
-  inputSize = "md",
-  error = false,
-  className = "",
-  containerClassName = "",
-  trailing,
-  disabled,
-  ...rest
-}, ref) {
-  const containerClasses = [
-    "crewlet-input",
-    `crewlet-input--${inputSize}`,
-    error ? "is-error" : "",
-    disabled ? "is-disabled" : "",
-    containerClassName
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        className: `crewlet-input__control ${className}`.trim(),
-        disabled,
-        ...rest
-      }
-    ),
-    trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__trailing", children: trailing }) : null
-  ] });
-});
-var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false, trailing, className = "", value, disabled, ...rest }, ref) {
-  const localRef = useRef(null);
-  useImperativeHandle(ref, () => localRef.current);
-  useEffect(() => {
-    if (!autoResize) return;
-    const el = localRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, [autoResize, value]);
-  const classes = [
-    "crewlet-textarea",
-    error ? "is-error" : "",
-    disabled ? "is-disabled" : "",
-    autoResize ? "is-auto-resize" : "",
-    className
-  ].filter(Boolean).join(" ");
-  const control = /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      ref: localRef,
-      className: classes,
-      value,
-      disabled,
-      ...rest
-    }
-  );
-  if (!trailing) return control;
-  return /* @__PURE__ */ jsxs("span", { className: "crewlet-textarea-shell", children: [
-    control,
-    /* @__PURE__ */ jsx("span", { className: "crewlet-input__trailing", children: trailing })
-  ] });
-});
-var Label = ({ required, action, className = "", children, ...rest }) => {
-  const classes = ["crewlet-label", action ? "crewlet-label--with-action" : "", className].filter(Boolean).join(" ");
-  if (action) {
-    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-      /* @__PURE__ */ jsxs("label", { ...rest, className: "crewlet-label__text", children: [
-        children,
-        required ? /* @__PURE__ */ jsx("span", { className: "crewlet-label__required", "aria-hidden": true, children: "*" }) : null
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "crewlet-label__action", children: action })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("label", { ...rest, className: classes, children: [
-    children,
-    required ? /* @__PURE__ */ jsx("span", { className: "crewlet-label__required", "aria-hidden": true, children: "*" }) : null
-  ] });
-};
-var FormField = ({
-  label,
-  required,
-  helper,
-  error,
-  labelAction,
-  htmlFor,
-  className = "",
-  children,
-  ...rest
-}) => {
-  const autoId = useId();
-  const id = htmlFor ?? autoId;
-  const helperId = helper ? `${id}-helper` : void 0;
-  const errorId = error ? `${id}-error` : void 0;
-  const describedBy = errorId ?? helperId;
-  const classes = ["crewlet-form-field", error ? "is-error" : "", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, children: [
-    label !== void 0 ? /* @__PURE__ */ jsx(Label, { htmlFor: id, required, action: labelAction, children: label }) : null,
-    typeof children === "function" ? children({ id, describedBy }) : children,
-    error ? /* @__PURE__ */ jsx("div", { id: errorId, className: "crewlet-form-field__error", role: "alert", children: error }) : helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null
-  ] });
-};
-var FormRow = ({ columns = 2, className = "", children, ...rest }) => {
-  const classes = ["crewlet-form-row", `crewlet-form-row--${columns}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
-};
-var Kbd = ({ subtle = false, className = "", children, ...rest }) => /* @__PURE__ */ jsx("kbd", { ...rest, className: ["crewlet-kbd", subtle ? "crewlet-kbd--subtle" : "", className].filter(Boolean).join(" "), children });
-var ConfirmModal = ({
-  open,
-  onClose,
-  onConfirm,
-  title,
-  message,
-  children,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  destructive = false,
-  confirmVariant,
-  confirmDisabled = false,
-  submitting = false,
-  size = "sm"
-}) => {
-  const resolvedVariant = confirmVariant ?? (destructive ? "danger" : "primary");
-  return /* @__PURE__ */ jsxs(
-    Modal,
-    {
-      open,
-      onClose,
-      title,
-      size,
-      closeOnBackdrop: !submitting,
-      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, disabled: submitting, children: cancelLabel }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: resolvedVariant,
-            onClick: () => {
-              void onConfirm();
-            },
-            disabled: confirmDisabled || submitting,
-            children: submitting ? "Working\u2026" : confirmLabel
-          }
-        )
-      ] }),
-      children: [
-        message ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__message", children: message }) : null,
-        children
-      ]
-    }
-  );
-};
-var PricingCardRoot = forwardRef(function PricingCardRoot2({
-  selected = false,
-  pending = false,
-  unavailable = false,
-  disabled = false,
-  interactive = true,
-  className = "",
-  type,
-  children,
-  onClick,
-  ...rest
-}, ref) {
-  const classes = [
-    "crewlet-pricing-card",
-    selected ? "is-selected" : "",
-    pending ? "is-pending" : "",
-    unavailable ? "is-unavailable" : "",
-    disabled ? "is-disabled" : "",
-    interactive ? "is-interactive" : "",
-    className
-  ].filter(Boolean).join(" ");
-  if (!interactive) {
-    const { "aria-pressed": _ignored, ...divRest } = rest;
-    return /* @__PURE__ */ jsx("div", { className: classes, ...divRest, children });
-  }
-  const onClickGuarded = disabled || unavailable ? void 0 : onClick;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: type ?? "button",
-      className: classes,
-      disabled: disabled || void 0,
-      "aria-pressed": selected || void 0,
-      "aria-disabled": unavailable && !disabled ? true : void 0,
-      onClick: onClickGuarded,
-      ...rest,
-      children
-    }
-  );
-});
-var Header = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__header ${className}`.trim(), children });
-var Name = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("span", { ...rest, className: `crewlet-pricing-card__name ${className}`.trim(), children });
-var Tag = ({ variant = "neutral", className = "", children, ...rest }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    ...rest,
-    className: `crewlet-pricing-card__tag crewlet-pricing-card__tag--${variant} ${className}`.trim(),
-    children
-  }
-);
-var Price = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__price ${className}`.trim(), children });
-var Amount = ({ strike = false, discounted = false, className = "", children, ...rest }) => {
-  const classes = [
-    "crewlet-pricing-card__amount",
-    strike ? "crewlet-pricing-card__amount--strike" : "",
-    discounted ? "crewlet-pricing-card__amount--discounted" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("span", { ...rest, className: classes, children });
-};
-var Cadence = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("span", { ...rest, className: `crewlet-pricing-card__cadence ${className}`.trim(), children });
-var PriceNote = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("span", { ...rest, className: `crewlet-pricing-card__price-note ${className}`.trim(), children });
-var Body = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__body ${className}`.trim(), children });
-var Footer = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__footer ${className}`.trim(), children });
-var Grid = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card-grid ${className}`.trim(), children });
-var PricingCard = Object.assign(PricingCardRoot, {
-  Header,
-  Name,
-  Tag,
-  Price,
-  Amount,
-  Cadence,
-  PriceNote,
-  Body,
-  Footer,
-  Grid
-});
-var Section = ({
-  as: As = "section",
-  spacing = "md",
-  className = "",
-  children,
-  ...rest
-}) => {
-  const classes = ["crewlet-section", `crewlet-section--${spacing}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(As, { ...rest, className: classes, children });
-};
-function Select({
-  id,
-  value,
-  onChange,
-  options,
-  placeholder = "Select an option",
-  disabled = false,
-  className = "",
-  menuClassName = "",
-  size = "md",
-  align = "left",
-  renderTrigger,
-  renderOption,
-  ariaLabel,
-  name,
-  searchable = false,
-  searchPlaceholder = "Search\u2026",
-  multiple = false,
-  renderMultiLabel
-}) {
-  const selectedValues = useMemo(() => {
-    if (multiple) {
-      return Array.isArray(value) ? value : [];
-    }
-    if (value === void 0 || value === null) return [];
-    return Array.isArray(value) ? value : [value];
-  }, [value, multiple]);
-  const isValueSelected = useCallback(
-    (v) => selectedValues.some((sv) => String(sv) === String(v)),
-    [selectedValues]
-  );
-  const [open, setOpen] = useState(false);
-  const [highlight, setHighlight] = useState(-1);
-  const [menuRect, setMenuRect] = useState(
-    { top: 0, left: 0, width: 0, side: "bottom" }
-  );
-  const [search, setSearch] = useState("");
-  const wrapRef = useRef(null);
-  const triggerRef = useRef(null);
-  const panelRef = useRef(null);
-  const searchRef = useRef(null);
-  const reposition = useCallback(() => {
-    const trig = triggerRef.current;
-    if (!trig) return;
-    const rect = trig.getBoundingClientRect();
-    const panelHeight = panelRef.current?.offsetHeight ?? 240;
-    const viewportH = window.innerHeight;
-    let chosenSide = "bottom";
-    if (rect.bottom + panelHeight + 12 > viewportH && rect.top > panelHeight + 12) {
-      chosenSide = "top";
-    }
-    setMenuRect({
-      top: chosenSide === "bottom" ? rect.bottom + window.scrollY + 6 : rect.top + window.scrollY - panelHeight - 6,
-      left: rect.left + window.scrollX,
-      width: rect.width,
-      side: chosenSide
-    });
-  }, []);
-  const selectedIndex = useMemo(() => {
-    if (multiple) return -1;
-    if (selectedValues.length === 0) return -1;
-    return options.findIndex((o) => String(o.value) === String(selectedValues[0]));
-  }, [options, selectedValues, multiple]);
-  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] ?? null : null;
-  const selectedOptions = useMemo(
-    () => options.filter((o) => isValueSelected(o.value)),
-    [options, isValueSelected]
-  );
-  const visibleOptions = useMemo(() => {
-    if (!searchable) return options;
-    const needle = search.trim().toLowerCase();
-    if (needle === "") return options;
-    return options.filter((opt) => {
-      const label = String(opt.label ?? "").toLowerCase();
-      if (label.includes(needle)) return true;
-      const desc = String(opt.description ?? "").toLowerCase();
-      return desc.length > 0 && desc.includes(needle);
-    });
-  }, [options, searchable, search]);
-  useEffect(() => {
-    if (!open) return;
-    if (searchable && search.trim() !== "") {
-      setHighlight(0);
-      return;
-    }
-    setHighlight(selectedIndex >= 0 ? selectedIndex : 0);
-  }, [open, selectedIndex, searchable, search]);
-  useEffect(() => {
-    if (!searchable) return;
-    if (open) {
-      setSearch("");
-      requestAnimationFrame(() => {
-        searchRef.current?.focus();
-      });
-    }
-  }, [open, searchable]);
-  useEffect(() => {
-    if (!open) return void 0;
-    const onDocMouseDown = (e) => {
-      const target = e.target;
-      if (target && wrapRef.current?.contains(target)) return;
-      if (target && panelRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", onDocMouseDown);
-    return () => document.removeEventListener("mousedown", onDocMouseDown);
-  }, [open]);
-  useLayoutEffect(() => {
-    if (!open) return void 0;
-    reposition();
-    const onLayout = () => reposition();
-    window.addEventListener("resize", onLayout);
-    window.addEventListener("scroll", onLayout, true);
-    return () => {
-      window.removeEventListener("resize", onLayout);
-      window.removeEventListener("scroll", onLayout, true);
-    };
-  }, [open, reposition]);
-  const choose = useCallback(
-    (option) => {
-      if (option?.disabled) return;
-      if (multiple) {
-        const next = isValueSelected(option.value) ? selectedValues.filter((v) => String(v) !== String(option.value)) : [...selectedValues, option.value];
-        onChange?.(next, option);
-        return;
-      }
-      onChange?.(option.value, option);
-      setOpen(false);
-      triggerRef.current?.focus();
-    },
-    [onChange, multiple, isValueSelected, selectedValues]
-  );
-  const onTriggerKeyDown = (e) => {
-    if (disabled) return;
-    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      setOpen(true);
-    }
-  };
-  const onPanelKeyDown = (e) => {
-    const list = visibleOptions;
-    if (e.key === "Escape") {
-      e.preventDefault();
-      setOpen(false);
-      triggerRef.current?.focus();
-      return;
-    }
-    if (list.length === 0) return;
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHighlight((h) => {
-        const next = h < 0 ? 0 : (h + 1) % list.length;
-        let probe = next;
-        for (let i = 0; i < list.length; i += 1) {
-          if (!list[probe]?.disabled) return probe;
-          probe = (probe + 1) % list.length;
-        }
-        return h;
-      });
-      return;
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHighlight((h) => {
-        const len = list.length;
-        const next = h < 0 ? len - 1 : (h - 1 + len) % len;
-        let probe = next;
-        for (let i = 0; i < len; i += 1) {
-          if (!list[probe]?.disabled) return probe;
-          probe = (probe - 1 + len) % len;
-        }
-        return h;
-      });
-      return;
-    }
-    if (e.key === "Enter") {
-      e.preventDefault();
-      const target = list[highlight];
-      if (target && !target.disabled) choose(target);
-      return;
-    }
-    if (e.key === "Home") {
-      e.preventDefault();
-      setHighlight(0);
-      return;
-    }
-    if (e.key === "End") {
-      e.preventDefault();
-      setHighlight(list.length - 1);
-    }
-  };
-  let defaultMultiLabel = placeholder;
-  if (multiple && selectedOptions.length === 1) {
-    defaultMultiLabel = selectedOptions[0].label;
-  } else if (multiple && selectedOptions.length > 1) {
-    defaultMultiLabel = `${selectedOptions.length} selected`;
-  }
-  const hasMultiSelection = multiple && selectedOptions.length > 0;
-  const triggerContent = renderTrigger ? renderTrigger(selectedOption, { open }) : multiple ? /* @__PURE__ */ jsx("span", { className: `crewlet-select__label${hasMultiSelection ? "" : " is-placeholder"}`, children: renderMultiLabel ? renderMultiLabel(selectedOptions) : defaultMultiLabel }) : /* @__PURE__ */ jsx("span", { className: `crewlet-select__label${selectedOption ? "" : " is-placeholder"}`, children: selectedOption ? selectedOption.label : placeholder });
-  const wrapClass = [
-    "crewlet-select",
-    `crewlet-select--${size}`,
-    open ? "is-open" : "",
-    disabled ? "is-disabled" : "",
-    className
-  ].filter(Boolean).join(" ");
-  const menuClass = [
-    "crewlet-select__menu",
-    `crewlet-select__menu--${align}`,
-    // Propagate the size onto the menu too. The wrapper class lives
-    // outside the portaled menu, so without this the sm trigger
-    // would still open a default-padded menu.
-    `crewlet-select__menu--${size}`,
-    menuClassName
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: wrapClass, ref: wrapRef, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        id,
-        name,
-        className: "crewlet-select__trigger",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-controls": id ? `${id}-listbox` : void 0,
-        "aria-label": ariaLabel,
-        disabled,
-        onClick: () => setOpen((o) => !o),
-        onKeyDown: onTriggerKeyDown,
-        children: [
-          triggerContent,
-          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-select__chevron", "aria-hidden": true, children: open ? "expand_less" : "expand_more" })
-        ]
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: (el) => {
-            panelRef.current = el;
-            if (!searchable) el?.focus();
-          },
-          className: `${menuClass} crewlet-select__menu--${menuRect.side}`,
-          style: {
-            position: "absolute",
-            top: menuRect.top,
-            left: menuRect.left,
-            width: menuRect.width
-          },
-          tabIndex: -1,
-          onKeyDown: onPanelKeyDown,
-          onMouseLeave: () => setHighlight(-1),
-          onMouseDown: (e) => e.stopPropagation(),
-          children: [
-            searchable && /* @__PURE__ */ jsxs("div", { className: "crewlet-select__search", children: [
-              /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "search" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: searchRef,
-                  type: "text",
-                  className: "crewlet-select__search-input",
-                  placeholder: searchPlaceholder,
-                  value: search,
-                  onChange: (e) => setSearch(e.target.value),
-                  onKeyDown: onPanelKeyDown,
-                  "aria-label": "Search options"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "ul",
-              {
-                id: id ? `${id}-listbox` : void 0,
-                className: "crewlet-select__list",
-                role: "listbox",
-                children: [
-                  visibleOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "crewlet-select__empty", "aria-hidden": true, children: "No matches" }),
-                  visibleOptions.map((opt, i) => {
-                    const isSelected = isValueSelected(opt.value);
-                    const isHighlight = i === highlight;
-                    const itemClass = [
-                      "crewlet-select__option",
-                      multiple ? "crewlet-select__option--multi" : "",
-                      isSelected ? "is-selected" : "",
-                      isHighlight ? "is-highlight" : "",
-                      opt.disabled ? "is-disabled" : ""
-                    ].filter(Boolean).join(" ");
-                    return /* @__PURE__ */ jsx(
-                      "li",
-                      {
-                        role: "option",
-                        "aria-selected": isSelected,
-                        "aria-disabled": opt.disabled || void 0,
-                        className: itemClass,
-                        onMouseEnter: () => !opt.disabled && setHighlight(i),
-                        onMouseDown: (e) => {
-                          e.preventDefault();
-                          choose(opt);
-                        },
-                        children: renderOption ? renderOption(opt, { active: isHighlight, selected: isSelected }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("div", { className: "crewlet-select__option-row", children: [
-                            multiple && /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: `crewlet-select__option-checkbox${isSelected ? " is-checked" : ""}`,
-                                "aria-hidden": true,
-                                children: isSelected && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "check" })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-label", children: opt.label }),
-                            !multiple && isSelected && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-select__option-check", "aria-hidden": true, children: "check" })
-                          ] }),
-                          opt.description && /* @__PURE__ */ jsx("div", { className: "crewlet-select__option-desc", children: opt.description })
-                        ] })
-                      },
-                      opt.value
-                    );
-                  })
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-var range = (n) => Array.from({ length: Math.max(0, n) }, (_, i) => i);
-var clampColumns = (n) => Math.min(4, Math.max(1, Math.round(n)));
-var cx = (...classes) => classes.filter(Boolean).join(" ");
-var line = (...modifiers) => cx("crewlet-skeleton__line", ...modifiers.map((modifier) => `crewlet-skeleton__line--${modifier}`));
-var Skeleton = ({
-  variant = "card",
-  rows = 1,
-  columns = 1,
-  count = 4,
-  className = "",
-  style,
-  width = "100%",
-  height = 400,
-  borderRadius = 12,
-  marginTop = 32,
-  marginBottom = 0,
-  glowColor = "blue",
-  animationDuration = 2
-}) => {
-  const rootClass = (...modifiers) => cx("crewlet-skeleton", `crewlet-skeleton--${variant}`, ...modifiers, className);
-  switch (variant) {
-    case "box":
-      return /* @__PURE__ */ jsx("div", { className: rootClass(), style: { marginTop, marginBottom, ...style }, "aria-hidden": true, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "crewlet-skeleton__glow-box",
-          style: {
-            height: typeof height === "number" ? `${height}px` : height,
-            width: typeof width === "number" ? `${width}px` : width,
-            borderRadius: `${borderRadius}px`
-          },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `crewlet-skeleton__glow-wave crewlet-skeleton__glow-wave--${glowColor}`,
-              style: { animationDuration: `${animationDuration}s` }
-            }
-          )
-        }
-      ) });
-    case "text":
-      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(rows).map((i) => /* @__PURE__ */ jsx("div", { className: line(i === 0 ? "title" : "text", ...i === rows - 1 ? ["short"] : []) }, i)) });
-    case "card":
-      return /* @__PURE__ */ jsxs("div", { className: rootClass(), style, "aria-hidden": true, children: [
-        /* @__PURE__ */ jsx("div", { className: line("title") }),
-        /* @__PURE__ */ jsx("div", { className: line("text") }),
-        /* @__PURE__ */ jsx("div", { className: line("text", "short") })
-      ] });
-    case "grid": {
-      const cols = clampColumns(columns);
-      return /* @__PURE__ */ jsx("div", { className: rootClass(`crewlet-skeleton--cols-${cols}`), style, "aria-hidden": true, children: range(rows * cols).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__card", children: [
-        /* @__PURE__ */ jsx("div", { className: line("title") }),
-        /* @__PURE__ */ jsx("div", { className: line("text") }),
-        /* @__PURE__ */ jsx("div", { className: line("text", "short") })
-      ] }, i)) });
-    }
-    case "list":
-      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(rows).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__list-item", children: [
-        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__avatar" }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__list-content", children: [
-          /* @__PURE__ */ jsx("div", { className: line("title") }),
-          /* @__PURE__ */ jsx("div", { className: line("text", "short") })
-        ] })
-      ] }, i)) });
-    case "table":
-      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: /* @__PURE__ */ jsxs("table", { className: "crewlet-skeleton__table", children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: range(columns).map((i) => /* @__PURE__ */ jsx("th", { className: "crewlet-skeleton__th", children: /* @__PURE__ */ jsx("div", { className: line("title") }) }, i)) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: range(rows).map((rowIndex) => /* @__PURE__ */ jsx("tr", { className: "crewlet-skeleton__tr", children: range(columns).map((colIndex) => /* @__PURE__ */ jsx("td", { className: "crewlet-skeleton__td", children: /* @__PURE__ */ jsx("div", { className: line("text") }) }, colIndex)) }, rowIndex)) })
-      ] }) });
-    case "info-grid": {
-      const cols = clampColumns(columns);
-      return /* @__PURE__ */ jsx("div", { className: rootClass(`crewlet-skeleton--cols-${cols}`), style, "aria-hidden": true, children: range(rows * cols).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__info-item", children: [
-        /* @__PURE__ */ jsx("div", { className: line("label") }),
-        /* @__PURE__ */ jsx("div", { className: line("value") })
-      ] }, i)) });
-    }
-    case "pricing-card":
-      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(count).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card", children: [
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-header", children: [
-          /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__circle" }),
-          /* @__PURE__ */ jsx("div", { className: line("heading") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-description", children: [
-          /* @__PURE__ */ jsx("div", { className: line("text") }),
-          /* @__PURE__ */ jsx("div", { className: line("text", "wide") }),
-          /* @__PURE__ */ jsx("div", { className: line("text", "three-quarter") })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__pricing-card-features", children: range(5).map((f) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-feature", children: [
-          /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__circle crewlet-skeleton__circle--small" }),
-          /* @__PURE__ */ jsx("div", { className: line("feature") })
-        ] }, f)) }),
-        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__button" })
-      ] }, i)) });
-    default:
-      return /* @__PURE__ */ jsx("div", { className: cx("crewlet-skeleton", className), style, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__line" }) });
-  }
-};
-var StatCard = ({
-  label,
-  value,
-  sub,
-  icon,
-  tone = "neutral",
-  loading = false,
-  className = "",
-  ...rest
-}) => {
-  const classes = ["crewlet-statcard", `crewlet-statcard--${tone}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, children: [
-    icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__body", children: [
-      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", children: "--" }) : value }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__label", children: label }),
-      sub ? /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__sub", children: sub }) : null
-    ] })
-  ] });
-};
-var Table = ({
-  headers,
-  data,
-  emptyMessage = "No data available",
-  actionButton,
-  className = ""
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: `crewlet-table ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-table__container", children: [
-      /* @__PURE__ */ jsx("div", { className: "crewlet-table__header", style: { gridTemplateColumns: `repeat(${headers.length}, 1fr)` }, children: headers.map((header, index) => /* @__PURE__ */ jsx("span", { children: header }, index)) }),
-      data && data.length > 0 ? /* @__PURE__ */ jsx("div", { className: "crewlet-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "crewlet-table__row",
-          style: { gridTemplateColumns: `repeat(${headers.length}, 1fr)` },
-          children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("span", { children: cell }, cellIndex))
-        },
-        rowIndex
-      )) }) : /* @__PURE__ */ jsx("div", { className: "crewlet-table__empty", children: /* @__PURE__ */ jsx("span", { children: emptyMessage }) })
-    ] }),
-    actionButton && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "crewlet-table__action-btn",
-        onClick: actionButton.onClick,
-        children: /* @__PURE__ */ jsx("span", { className: "crewlet-table__action-text", children: actionButton.label })
-      }
-    )
-  ] });
-};
-function Tabs({
-  items,
-  variant = "pill",
-  size = "md",
-  ariaLabel,
-  className = "",
-  value,
-  onValueChange,
-  renderItem
-}) {
-  const navRef = useRef(null);
-  useLayoutEffect(() => {
-    if (variant !== "underline") return;
-    const nav = navRef.current;
-    if (!nav) return;
-    const update = () => {
-      const active = nav.querySelector(".crewlet-tabs__tab.is-active");
-      if (!active) {
-        nav.style.setProperty("--crewlet-tabs-slider-width", "0px");
-        return;
-      }
-      const navRect = nav.getBoundingClientRect();
-      const activeRect = active.getBoundingClientRect();
-      const left = activeRect.left - navRect.left;
-      const width = activeRect.width;
-      nav.style.setProperty("--crewlet-tabs-slider-left", `${left}px`);
-      nav.style.setProperty("--crewlet-tabs-slider-width", `${width}px`);
-    };
-    update();
-    const mutation = new MutationObserver(update);
-    nav.querySelectorAll(".crewlet-tabs__tab").forEach((tab) => {
-      mutation.observe(tab, {
-        attributes: true,
-        attributeFilter: ["class"]
-      });
-    });
-    const resize = new ResizeObserver(update);
-    resize.observe(nav);
-    return () => {
-      mutation.disconnect();
-      resize.disconnect();
-    };
-  }, [variant, value, items]);
-  const rootClass = [
-    "crewlet-tabs",
-    `crewlet-tabs--${variant}`,
-    `crewlet-tabs--${size}`,
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      ref: navRef,
-      className: rootClass,
-      "aria-label": ariaLabel,
-      role: "tablist",
-      children: items.map((item) => {
-        const isActive = value !== void 0 && value === item.value;
-        const tabClassName = [
-          "crewlet-tabs__tab",
-          isActive ? "is-active" : void 0,
-          item.disabled ? "is-disabled" : void 0
-        ].filter(Boolean).join(" ");
-        const children = /* @__PURE__ */ jsxs(Fragment, { children: [
-          item.icon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-tabs__icon", "aria-hidden": true, children: item.icon }) : null,
-          /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: item.label })
-        ] });
-        const onSelect = () => {
-          if (item.disabled) return;
-          onValueChange?.(item.value);
-        };
-        if (renderItem) {
-          return /* @__PURE__ */ jsx(React.Fragment, { children: renderItem({ item, className: tabClassName, isActive, onSelect, children }) }, item.value);
-        }
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": isActive,
-            "aria-current": isActive ? "page" : void 0,
-            disabled: item.disabled,
-            className: tabClassName,
-            onClick: onSelect,
-            children
-          },
-          item.value
-        );
-      })
-    }
-  );
-}
-var DURATION_RX = /^\s*(\d+)\s*(m|h|d|w)\s*$/i;
-function parseTimeWindowDuration(s) {
-  const m = DURATION_RX.exec(s);
-  if (!m) return 0;
-  const n = parseInt(m[1], 10);
-  if (!Number.isFinite(n)) return 0;
-  const unit = m[2].toLowerCase();
-  const factor = unit === "m" ? 6e4 : unit === "h" ? 36e5 : unit === "d" ? 864e5 : 6048e5;
-  return n * factor;
-}
-function resolveTimeWindow(value) {
-  if (!value) return { from: void 0, to: void 0 };
-  if (value.kind === "relative" && value.duration) {
-    const ms = parseTimeWindowDuration(value.duration);
-    if (ms <= 0) return { from: void 0, to: void 0 };
-    return {
-      from: new Date(Date.now() - ms).toISOString(),
-      to: void 0
-    };
-  }
-  if (value.kind === "absolute") {
-    const suffix = value.timezone === "utc" ? "Z" : "";
-    return {
-      from: value.from ? new Date(value.from + suffix).toISOString() : void 0,
-      to: value.to ? new Date(value.to + suffix).toISOString() : void 0
-    };
-  }
-  return { from: void 0, to: void 0 };
-}
-var CHIP_GROUPS = [
-  { label: "Minutes", unit: "m", values: [5, 10, 15, 30, 45] },
-  { label: "Hours", unit: "h", values: [1, 2, 3, 6, 8, 12] },
-  { label: "Days", unit: "d", values: [1, 2, 3, 4, 5, 6] },
-  { label: "Weeks", unit: "w", values: [1, 2, 3, 4] }
-];
-var UNIT_LABELS = {
-  m: "Minutes",
-  h: "Hours",
-  d: "Days",
-  w: "Weeks"
-};
-var pad2 = (n) => String(n).padStart(2, "0");
-var parseDateTime = (s) => {
-  if (!s) return null;
-  const tIndex = s.indexOf("T");
-  const datePart = tIndex >= 0 ? s.slice(0, tIndex) : s;
-  const timePart = tIndex >= 0 ? s.slice(tIndex + 1) : "00:00:00";
-  const dateBits = datePart.split("-");
-  if (dateBits.length < 3) return null;
-  const y = parseInt(dateBits[0], 10);
-  const m = parseInt(dateBits[1], 10);
-  const d = parseInt(dateBits[2], 10);
-  if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null;
-  const timeBits = timePart.split(":");
-  const h = parseInt(timeBits[0] || "0", 10);
-  const mn = parseInt(timeBits[1] || "0", 10);
-  const sec = parseInt(timeBits[2] || "0", 10);
-  return {
-    year: y,
-    month: m - 1,
-    day: d,
-    hour: Number.isFinite(h) ? h : 0,
-    minute: Number.isFinite(mn) ? mn : 0,
-    second: Number.isFinite(sec) ? sec : 0
-  };
-};
-var formatDateTime = (p) => `${p.year}-${pad2(p.month + 1)}-${pad2(p.day)}T${pad2(p.hour)}:${pad2(p.minute)}:${pad2(p.second)}`;
-var formatDateOnly = (p) => `${p.year}/${pad2(p.month + 1)}/${pad2(p.day)}`;
-var formatTimeOnly = (p) => `${pad2(p.hour)}:${pad2(p.minute)}:${pad2(p.second)}`;
-var parseDateOnly = (s) => {
-  const m = /^(\d{4})[/-](\d{1,2})[/-](\d{1,2})$/.exec(s.trim());
-  if (!m) return null;
-  return {
-    year: parseInt(m[1], 10),
-    month: parseInt(m[2], 10) - 1,
-    day: parseInt(m[3], 10)
-  };
-};
-var parseTimeOnly = (s) => {
-  const m = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/.exec(s.trim());
-  if (!m) return null;
-  return {
-    hour: parseInt(m[1], 10),
-    minute: parseInt(m[2], 10),
-    second: m[3] ? parseInt(m[3], 10) : 0
-  };
-};
-var dateDigitFilter = (digit, pos, display) => {
-  switch (pos) {
-    // YYYY: 2000-2030
-    case 0:
-      return digit === "2";
-    // must start with 2
-    case 1:
-      return digit === "0";
-    // 20xx
-    case 2:
-      return /[0-3]/.test(digit);
-    // 2000/2010/2020/2030
-    case 3:
-      return display[2] === "3" ? digit === "0" : /[0-9]/.test(digit);
-    // MM (month): 01-12
-    case 5:
-      return /[01]/.test(digit);
-    // 0x or 1x
-    case 6:
-      if (display[5] === "0") return /[1-9]/.test(digit);
-      if (display[5] === "1") return /[0-2]/.test(digit);
-      return true;
-    // DD: 01-31
-    case 8:
-      return /[0-3]/.test(digit);
-    case 9:
-      if (display[8] === "0") return /[1-9]/.test(digit);
-      if (display[8] === "3") return /[01]/.test(digit);
-      return /[0-9]/.test(digit);
-    default:
-      return true;
-  }
-};
-var timeDigitFilter = (digit, pos, display) => {
-  switch (pos) {
-    // HH: 00-24
-    case 0:
-      return /[0-2]/.test(digit);
-    case 1:
-      return display[0] === "2" ? /[0-4]/.test(digit) : /[0-9]/.test(digit);
-    // MM (minute): 00-60
-    case 3:
-      return /[0-6]/.test(digit);
-    case 4:
-      return display[3] === "6" ? digit === "0" : /[0-9]/.test(digit);
-    // SS: 00-60
-    case 6:
-      return /[0-6]/.test(digit);
-    case 7:
-      return display[6] === "6" ? digit === "0" : /[0-9]/.test(digit);
-    default:
-      return true;
-  }
-};
-var isValidDateInput = (s) => {
-  const m = /^(\d{4})\/(\d{2})\/(\d{2})$/.exec(s);
-  if (!m) return false;
-  const y = parseInt(m[1], 10);
-  const mo = parseInt(m[2], 10);
-  const d = parseInt(m[3], 10);
-  return y >= 2e3 && y <= 2030 && mo >= 1 && mo <= 12 && d >= 1 && d <= 31;
-};
-var isValidTimeInput = (s) => {
-  const m = /^(\d{2}):(\d{2}):(\d{2})$/.exec(s);
-  if (!m) return false;
-  const h = parseInt(m[1], 10);
-  const mi = parseInt(m[2], 10);
-  const se = parseInt(m[3], 10);
-  return h >= 0 && h <= 24 && mi >= 0 && mi <= 60 && se >= 0 && se <= 60;
-};
-var DATE_SEGMENTS = [
-  { start: 0, end: 3, min: 2e3, max: 2030 },
-  // YYYY
-  { start: 5, end: 6, min: 1, max: 12 },
-  // MM
-  { start: 8, end: 9, min: 1, max: 31 }
-  // DD
-];
-var TIME_SEGMENTS = [
-  { start: 0, end: 1, min: 0, max: 24 },
-  // HH
-  { start: 3, end: 4, min: 0, max: 60 },
-  // MM
-  { start: 6, end: 7, min: 0, max: 60 }
-  // SS
-];
-var MONTH_NAMES2 = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var WEEKDAY_LABELS_SUN2 = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-var WEEKDAY_LABELS_MON2 = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
-var daysInMonth2 = (year, month) => new Date(year, month + 1, 0).getDate();
-var startWeekday2 = (year, month, firstDay) => {
-  const d = new Date(year, month, 1).getDay();
-  return (d - firstDay + 7) % 7;
-};
-var compareDates2 = (a, b) => {
-  if (a.year !== b.year) return a.year - b.year;
-  if (a.month !== b.month) return a.month - b.month;
-  return a.day - b.day;
-};
-var isBetween = (cell, lo, hi) => compareDates2(cell, lo) >= 0 && compareDates2(cell, hi) <= 0;
-function Calendar({
-  year,
-  month,
-  rangeStart,
-  rangeEnd,
-  onSelectDate,
-  onHoverDate,
-  firstDayOfWeek = 0,
-  onPrev,
-  onNext
-}) {
-  const totalDays = daysInMonth2(year, month);
-  const leading = startWeekday2(year, month, firstDayOfWeek);
-  const weekdayLabels = firstDayOfWeek === 1 ? WEEKDAY_LABELS_MON2 : WEEKDAY_LABELS_SUN2;
-  const today = useMemo(() => {
-    const now = /* @__PURE__ */ new Date();
-    return { year: now.getFullYear(), month: now.getMonth(), day: now.getDate() };
-  }, []);
-  const cells = useMemo(() => {
-    const out = [];
-    const prevTotal = daysInMonth2(
-      month === 0 ? year - 1 : year,
-      month === 0 ? 11 : month - 1
-    );
-    for (let i = 0; i < leading; i += 1) {
-      out.push({ day: prevTotal - leading + 1 + i, inMonth: false });
-    }
-    for (let d = 1; d <= totalDays; d += 1) {
-      out.push({ day: d, inMonth: true });
-    }
-    while (out.length < 42) {
-      out.push({ day: out.length - leading - totalDays + 1, inMonth: false });
-    }
-    return out;
-  }, [year, month, leading, totalDays]);
-  const titleClass = [
-    "crewlet-time-window__calendar-title",
-    onPrev ? "has-prev" : "",
-    onNext ? "has-next" : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__calendar", children: [
-    /* @__PURE__ */ jsxs("div", { className: titleClass, children: [
-      onPrev && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-time-window__calendar-nav crewlet-time-window__calendar-nav--prev",
-          onClick: onPrev,
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "crewlet-time-window__calendar-title-text", children: [
-        MONTH_NAMES2[month],
-        " ",
-        year
-      ] }),
-      onNext && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-time-window__calendar-nav crewlet-time-window__calendar-nav--next",
-          onClick: onNext,
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "chevron_right" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "crewlet-time-window__weekdays", "aria-hidden": true, children: weekdayLabels.map((label, i) => /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__weekday", children: label }, i)) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "crewlet-time-window__grid",
-        role: "grid",
-        onMouseLeave: onHoverDate ? () => onHoverDate(null) : void 0,
-        children: cells.map((cell, i) => {
-          let cellYear = year;
-          let cellMonth = month;
-          if (!cell.inMonth) {
-            if (cell.day > 20) {
-              cellMonth -= 1;
-              if (cellMonth < 0) {
-                cellMonth = 11;
-                cellYear -= 1;
-              }
-            } else {
-              cellMonth += 1;
-              if (cellMonth > 11) {
-                cellMonth = 0;
-                cellYear += 1;
-              }
-            }
-          }
-          const cellCoord = { year: cellYear, month: cellMonth, day: cell.day };
-          const isFuture = compareDates2(cellCoord, today) > 0;
-          const isStart = !isFuture && !!rangeStart && compareDates2(cellCoord, rangeStart) === 0;
-          const isEnd = !isFuture && !!rangeEnd && compareDates2(cellCoord, rangeEnd) === 0;
-          const isSel = isStart || isEnd;
-          let inRange = false;
-          if (!isFuture && rangeStart && rangeEnd && !isSel) {
-            const lo = compareDates2(rangeStart, rangeEnd) <= 0 ? rangeStart : rangeEnd;
-            const hi = compareDates2(rangeStart, rangeEnd) <= 0 ? rangeEnd : rangeStart;
-            inRange = isBetween(cellCoord, lo, hi);
-          }
-          const isToday = today.year === cellYear && today.month === cellMonth && today.day === cell.day;
-          const cls = [
-            "crewlet-time-window__cell",
-            cell.inMonth ? "" : "is-outside",
-            isFuture ? "is-future" : "",
-            isToday ? "is-today" : "",
-            isSel ? "is-selected" : "",
-            inRange ? "is-in-range" : ""
-          ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "gridcell",
-              className: cls,
-              disabled: isFuture,
-              onClick: () => !isFuture && onSelectDate(cellCoord),
-              onMouseEnter: onHoverDate && !isFuture ? () => onHoverDate(cellCoord) : void 0,
-              children: cell.day
-            },
-            i
-          );
-        })
-      }
-    )
-  ] });
-}
-var formatLocalDateLabel = (s) => {
-  if (!s) return "";
-  const d = new Date(s);
-  if (Number.isNaN(d.getTime())) return s;
-  const pad22 = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}/${pad22(d.getMonth() + 1)}/${pad22(d.getDate())} ${pad22(d.getHours())}:${pad22(d.getMinutes())}:${pad22(d.getSeconds())}`;
-};
-var triggerLabelFor = (value, placeholder) => {
-  if (value?.kind === "relative" && value.duration) {
-    const m = DURATION_RX.exec(value.duration);
-    if (m) {
-      const n = parseInt(m[1], 10);
-      const unit = m[2].toLowerCase();
-      return `Last ${n} ${UNIT_LABELS[unit]?.toLowerCase() || unit}`;
-    }
-    return `Last ${value.duration}`;
-  }
-  if (value?.kind === "absolute") {
-    if (!value.from && !value.to) return placeholder;
-    const from = value.from ? formatLocalDateLabel(value.from) : "earliest";
-    const to = value.to ? formatLocalDateLabel(value.to) : "now";
-    return `${from} \u2192 ${to}`;
-  }
-  return placeholder;
-};
-function TimeWindowPicker({
-  value,
-  onChange,
-  allowRelative = true,
-  allowAbsolute = true,
-  placeholder = "Pick a time window",
-  ariaLabel,
-  className = "",
-  disabled = false,
-  size = "md"
-}) {
-  const triggerLabel = triggerLabelFor(value, placeholder);
-  const isSet = !!(value?.kind === "relative" && value.duration || value?.kind === "absolute" && (value.from || value.to));
-  const wrapClass = [
-    "crewlet-time-window",
-    `crewlet-time-window--${size}`,
-    isSet ? "is-set" : "",
-    disabled ? "is-disabled" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      align: "start",
-      side: "bottom",
-      width: "auto",
-      className: "crewlet-time-window__popover",
-      trigger: (open, toggle) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: `${wrapClass}${open ? " is-open" : ""}`,
-          onClick: () => {
-            if (!disabled) toggle();
-          },
-          disabled,
-          "aria-haspopup": "dialog",
-          "aria-expanded": open,
-          "aria-label": ariaLabel || "Time window",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-time-window__icon", "aria-hidden": true, children: "schedule" }),
-            /* @__PURE__ */ jsx("span", { className: `crewlet-time-window__label${isSet ? "" : " is-placeholder"}`, children: triggerLabel }),
-            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined crewlet-time-window__chevron", "aria-hidden": true, children: open ? "expand_less" : "expand_more" })
-          ]
-        }
-      ),
-      children: (close) => /* @__PURE__ */ jsx(
-        PanelContent,
-        {
-          value,
-          onChange,
-          close,
-          allowRelative,
-          allowAbsolute
-        }
-      )
-    }
-  );
-}
-function PanelContent({ value, onChange, close, allowRelative, allowAbsolute }) {
-  const initialMode = (() => {
-    if (value?.kind === "absolute" && allowAbsolute) return "absolute";
-    if (allowRelative) return "relative";
-    return "absolute";
-  })();
-  const [mode, setMode] = useState(initialMode);
-  const [draft, setDraft] = useState(value || { kind: initialMode });
-  const handleApply = () => {
-    onChange(draft);
-    close();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__panel", children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__tabs", role: "tablist", "aria-label": "Time window mode", children: [
-        allowAbsolute && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": mode === "absolute",
-            className: `crewlet-time-window__tab${mode === "absolute" ? " is-active" : ""}`,
-            onClick: () => setMode("absolute"),
-            children: "Absolute"
-          }
-        ),
-        allowRelative && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": mode === "relative",
-            className: `crewlet-time-window__tab${mode === "relative" ? " is-active" : ""}`,
-            onClick: () => setMode("relative"),
-            children: "Relative"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-time-window__tz", children: /* @__PURE__ */ jsx(
-        Select,
-        {
-          value: draft.timezone || "local",
-          onChange: (v) => setDraft({ ...draft, timezone: v }),
-          options: [
-            { value: "local", label: "Local time zone" },
-            { value: "utc", label: "UTC" }
-          ],
-          size: "sm",
-          align: "right",
-          ariaLabel: "Time zone"
-        }
-      ) })
-    ] }),
-    mode === "absolute" && allowAbsolute && /* @__PURE__ */ jsx(AbsolutePane, { draft, setDraft }),
-    mode === "relative" && allowRelative && /* @__PURE__ */ jsx(RelativePane, { draft, setDraft }),
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__footer", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-time-window__footer-btn",
-          onClick: close,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "crewlet-time-window__footer-btn is-primary",
-          onClick: handleApply,
-          children: "Apply"
-        }
-      )
-    ] })
-  ] });
-}
-function AbsolutePane({ draft, setDraft }) {
-  const fromParsed = parseDateTime(draft.from);
-  const toParsed = parseDateTime(draft.to);
-  const [leftMonth, setLeftMonth] = useState(() => {
-    if (fromParsed) return { year: fromParsed.year, month: fromParsed.month };
-    const now = /* @__PURE__ */ new Date();
-    return { year: now.getFullYear(), month: now.getMonth() };
-  });
-  const rightMonth = useMemo(() => {
-    let m = leftMonth.month + 1;
-    let y = leftMonth.year;
-    if (m > 11) {
-      m = 0;
-      y += 1;
-    }
-    return { year: y, month: m };
-  }, [leftMonth]);
-  const stepLeft = (delta) => {
-    let m = leftMonth.month + delta;
-    let y = leftMonth.year;
-    while (m < 0) {
-      m += 12;
-      y -= 1;
-    }
-    while (m > 11) {
-      m -= 12;
-      y += 1;
-    }
-    setLeftMonth({ year: y, month: m });
-  };
-  const commitFromDate = (s) => {
-    const date = parseDateOnly(s);
-    if (!date) return;
-    const time = fromParsed ? { hour: fromParsed.hour, minute: fromParsed.minute, second: fromParsed.second } : { hour: 0, minute: 0, second: 0 };
-    setDraft({
-      ...draft,
-      kind: "absolute",
-      from: formatDateTime({ ...date, ...time }),
-      to: draft.to || ""
-    });
-  };
-  const commitFromTime = (s) => {
-    const time = parseTimeOnly(s);
-    if (!time) return;
-    const date = fromParsed ? { year: fromParsed.year, month: fromParsed.month, day: fromParsed.day } : null;
-    if (!date) return;
-    setDraft({
-      ...draft,
-      kind: "absolute",
-      from: formatDateTime({ ...date, ...time }),
-      to: draft.to || ""
-    });
-  };
-  const commitToDate = (s) => {
-    const date = parseDateOnly(s);
-    if (!date) return;
-    const time = toParsed ? { hour: toParsed.hour, minute: toParsed.minute, second: toParsed.second } : { hour: 23, minute: 59, second: 59 };
-    setDraft({
-      ...draft,
-      kind: "absolute",
-      from: draft.from || "",
-      to: formatDateTime({ ...date, ...time })
-    });
-  };
-  const commitToTime = (s) => {
-    const time = parseTimeOnly(s);
-    if (!time) return;
-    const date = toParsed ? { year: toParsed.year, month: toParsed.month, day: toParsed.day } : null;
-    if (!date) return;
-    setDraft({
-      ...draft,
-      kind: "absolute",
-      from: draft.from || "",
-      to: formatDateTime({ ...date, ...time })
-    });
-  };
-  const fromCoord = fromParsed ? { year: fromParsed.year, month: fromParsed.month, day: fromParsed.day } : null;
-  const toCoord = toParsed ? { year: toParsed.year, month: toParsed.month, day: toParsed.day } : null;
-  const [phase, setPhase] = useState(
-    fromCoord && !toCoord ? "end" : "start"
-  );
-  const [hoverCoord, setHoverCoord] = useState(null);
-  const pickDay = (date) => {
-    if (phase === "start") {
-      const time = fromParsed ?? { hour: 0, minute: 0, second: 0 };
-      setDraft({
-        ...draft,
-        kind: "absolute",
-        from: formatDateTime({ ...date, hour: time.hour, minute: time.minute, second: time.second }),
-        to: ""
-      });
-      setPhase("end");
-      return;
-    }
-    const fromCmp = fromCoord ? compareDates2(date, fromCoord) : 0;
-    if (fromCoord && fromCmp < 0) {
-      const toTime = { hour: 23, minute: 59, second: 59 };
-      setDraft({
-        ...draft,
-        kind: "absolute",
-        from: formatDateTime({ ...date, hour: 0, minute: 0, second: 0 }),
-        to: formatDateTime({ ...fromCoord, hour: toTime.hour, minute: toTime.minute, second: toTime.second })
-      });
-    } else {
-      const time = toParsed ?? { hour: 23, minute: 59, second: 59 };
-      setDraft({
-        ...draft,
-        kind: "absolute",
-        from: draft.from || "",
-        to: formatDateTime({ ...date, hour: time.hour, minute: time.minute, second: time.second })
-      });
-    }
-    setPhase("start");
-    setHoverCoord(null);
-  };
-  const previewEnd = toCoord ?? (phase === "end" ? hoverCoord : null);
-  return /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__absolute", children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__cal-row", children: [
-      /* @__PURE__ */ jsx(
-        Calendar,
-        {
-          year: leftMonth.year,
-          month: leftMonth.month,
-          rangeStart: fromCoord,
-          rangeEnd: previewEnd,
-          onSelectDate: pickDay,
-          onHoverDate: setHoverCoord,
-          onPrev: () => stepLeft(-1)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Calendar,
-        {
-          year: rightMonth.year,
-          month: rightMonth.month,
-          rangeStart: fromCoord,
-          rangeEnd: previewEnd,
-          onSelectDate: pickDay,
-          onHoverDate: setHoverCoord,
-          onNext: () => stepLeft(1)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__inputs", children: [
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field", children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__field-label", children: "Start date and time" }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field-row", children: [
-          /* @__PURE__ */ jsx(
-            MaskedInput,
-            {
-              mask: "YYYY/MM/DD",
-              value: fromParsed ? formatDateOnly(fromParsed) : "",
-              onCommit: commitFromDate,
-              digitFilter: dateDigitFilter,
-              validate: isValidDateInput,
-              segments: DATE_SEGMENTS,
-              className: "is-date",
-              ariaLabel: "Start date"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MaskedInput,
-            {
-              mask: "HH:MM:SS",
-              value: fromParsed ? formatTimeOnly(fromParsed) : "",
-              onCommit: commitFromTime,
-              digitFilter: timeDigitFilter,
-              validate: isValidTimeInput,
-              segments: TIME_SEGMENTS,
-              className: "is-time",
-              ariaLabel: "Start time"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field", children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__field-label", children: "End date and time" }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field-row", children: [
-          /* @__PURE__ */ jsx(
-            MaskedInput,
-            {
-              mask: "YYYY/MM/DD",
-              value: toParsed ? formatDateOnly(toParsed) : "",
-              onCommit: commitToDate,
-              digitFilter: dateDigitFilter,
-              validate: isValidDateInput,
-              segments: DATE_SEGMENTS,
-              className: "is-date",
-              ariaLabel: "End date"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MaskedInput,
-            {
-              mask: "HH:MM:SS",
-              value: toParsed ? formatTimeOnly(toParsed) : "",
-              onCommit: commitToTime,
-              digitFilter: timeDigitFilter,
-              validate: isValidTimeInput,
-              segments: TIME_SEGMENTS,
-              className: "is-time",
-              ariaLabel: "End time"
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function RelativePane({ draft, setDraft }) {
-  const m = draft.kind === "relative" && draft.duration ? DURATION_RX.exec(draft.duration) : null;
-  const draftN = m ? parseInt(m[1], 10) : 60;
-  const draftUnit = m ? m[2].toLowerCase() : "m";
-  const draftDuration = draft.kind === "relative" ? draft.duration : "";
-  const [customN, setCustomN] = useState(String(draftN));
-  const [customUnit, setCustomUnit] = useState(draftUnit);
-  useEffect(() => {
-    if (m) {
-      setCustomN(String(parseInt(m[1], 10)));
-      setCustomUnit(m[2].toLowerCase());
-    }
-  }, [draftDuration]);
-  const pickChip = (n, unit) => {
-    setDraft({ kind: "relative", duration: `${n}${unit}` });
-  };
-  const commitCustom = (n, unit) => {
-    const parsedN = parseInt(n, 10);
-    if (!Number.isFinite(parsedN) || parsedN <= 0) return;
-    setDraft({ kind: "relative", duration: `${parsedN}${unit}` });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__relative", children: [
-    CHIP_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__chip-row", children: [
-      /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__chip-label", children: group.label }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-time-window__chips", children: group.values.map((n) => {
-        const dur = `${n}${group.unit}`;
-        const active = draftDuration === dur;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: `crewlet-time-window__chip${active ? " is-active" : ""}`,
-            onClick: () => pickChip(n, group.unit),
-            children: n
-          },
-          n
-        );
-      }) })
-    ] }, group.unit)),
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__custom-row", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          inputMode: "numeric",
-          pattern: "[0-9]*",
-          className: "crewlet-time-window__custom-input",
-          value: customN,
-          onChange: (e) => {
-            const next = e.target.value.replace(/[^0-9]/g, "");
-            setCustomN(next);
-            commitCustom(next, customUnit);
-          },
-          "aria-label": "Custom amount"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          value: customUnit,
-          onChange: (v) => {
-            const unit = String(v);
-            setCustomUnit(unit);
-            commitCustom(customN, unit);
-          },
-          options: [
-            { value: "m", label: "Minutes" },
-            { value: "h", label: "Hours" },
-            { value: "d", label: "Days" },
-            { value: "w", label: "Weeks" }
-          ],
-          size: "sm",
-          ariaLabel: "Custom unit"
-        }
-      )
-    ] })
-  ] });
-}
-function MaskedInput({
-  mask,
-  value,
-  onCommit,
-  digitFilter,
-  validate,
-  segments,
-  className,
-  ariaLabel
-}) {
-  const inputRef = useRef(null);
-  const isSepAt = (pos) => {
-    const c = mask[pos];
-    return !!c && !/[A-Za-z]/.test(c);
-  };
-  const projectValueToDisplay = (v) => {
-    let out = "";
-    let vi = 0;
-    for (let i = 0; i < mask.length; i += 1) {
-      if (isSepAt(i)) {
-        out += mask[i];
-        if (vi < v.length && v[vi] === mask[i]) vi += 1;
-        continue;
-      }
-      while (vi < v.length && !/\d/.test(v[vi])) vi += 1;
-      if (vi < v.length) {
-        out += v[vi];
-        vi += 1;
-      } else {
-        out += mask[i];
-      }
-    }
-    return out;
-  };
-  const [display, setDisplay] = useState(() => projectValueToDisplay(value));
-  useEffect(() => {
-    setDisplay(projectValueToDisplay(value));
-  }, [value]);
-  const hasAnyDigit = /\d/.test(display);
-  const nextDigitSlot = (from) => {
-    let p = from;
-    while (p < mask.length && isSepAt(p)) p += 1;
-    return p < mask.length ? p : -1;
-  };
-  const prevDigitSlot = (from) => {
-    let p = from - 1;
-    while (p >= 0 && isSepAt(p)) p -= 1;
-    return p;
-  };
-  const setCursor = (pos) => {
-    requestAnimationFrame(() => {
-      const el = inputRef.current;
-      if (el) el.setSelectionRange(pos, pos);
-    });
-  };
-  const handleKeyDown = (e) => {
-    const el = e.currentTarget;
-    const pos = el.selectionStart ?? 0;
-    if (/^\d$/.test(e.key)) {
-      e.preventDefault();
-      const target = nextDigitSlot(pos);
-      if (target < 0) return;
-      if (digitFilter && !digitFilter(e.key, target, display)) {
-        return;
-      }
-      const next = display.substring(0, target) + e.key + display.substring(target + 1);
-      setDisplay(next);
-      let cursor = target + 1;
-      while (cursor < mask.length && isSepAt(cursor)) cursor += 1;
-      setCursor(cursor);
-      return;
-    }
-    if (e.key === "Backspace") {
-      e.preventDefault();
-      const target = prevDigitSlot(pos);
-      if (target < 0) return;
-      const next = display.substring(0, target) + mask[target] + display.substring(target + 1);
-      setDisplay(next);
-      setCursor(target);
-      return;
-    }
-    if (e.key === "Delete") {
-      e.preventDefault();
-      if (pos < mask.length && !isSepAt(pos)) {
-        const next = display.substring(0, pos) + mask[pos] + display.substring(pos + 1);
-        setDisplay(next);
-      }
-      return;
-    }
-    if ((e.key === "ArrowUp" || e.key === "ArrowDown") && segments && segments.length > 0) {
-      const seg = segments.find((s) => pos >= s.start && pos <= s.end + 1);
-      if (!seg) return;
-      e.preventDefault();
-      const segText = display.substring(seg.start, seg.end + 1);
-      const hasDigits = /\d/.test(segText);
-      const width = seg.end - seg.start + 1;
-      let nextVal;
-      if (!hasDigits) {
-        nextVal = seg.min;
-      } else {
-        const numeric = segText.replace(/[^0-9]/g, "0");
-        const current = parseInt(numeric, 10);
-        nextVal = e.key === "ArrowUp" ? current + 1 : current - 1;
-        if (nextVal > seg.max) nextVal = seg.max;
-        if (nextVal < seg.min) nextVal = seg.min;
-      }
-      const padded = String(nextVal).padStart(width, "0");
-      const next = display.substring(0, seg.start) + padded + display.substring(seg.end + 1);
-      setDisplay(next);
-      setCursor(seg.end + 1);
-      return;
-    }
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      const target = prevDigitSlot(pos);
-      setCursor(target < 0 ? 0 : target);
-      return;
-    }
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      const target = nextDigitSlot(pos + 1);
-      setCursor(target < 0 ? mask.length : target);
-      return;
-    }
-    if (e.key === "Home") {
-      e.preventDefault();
-      const target = nextDigitSlot(0);
-      setCursor(target < 0 ? 0 : target);
-      return;
-    }
-    if (e.key === "End") {
-      e.preventDefault();
-      let target = mask.length;
-      while (target > 0 && isSepAt(target - 1)) target -= 1;
-      setCursor(target);
-      return;
-    }
-    if (e.key === "Tab" || e.key === "Enter" || e.key === "Escape") return;
-    e.preventDefault();
-  };
-  const snapToLeftmost = (el) => {
-    const target = nextDigitSlot(0);
-    const pos = target < 0 ? 0 : target;
-    el.setSelectionRange(pos, pos);
-  };
-  const handleFocus = (e) => {
-    const el = e.currentTarget;
-    if (!hasAnyDigit) {
-      requestAnimationFrame(() => snapToLeftmost(el));
-    }
-  };
-  const handleClick = (e) => {
-    const el = e.currentTarget;
-    requestAnimationFrame(() => {
-      if (!hasAnyDigit) {
-        snapToLeftmost(el);
-        return;
-      }
-      const pos = el.selectionStart ?? 0;
-      if (isSepAt(pos)) {
-        const target = nextDigitSlot(pos);
-        if (target >= 0) el.setSelectionRange(target, target);
-      }
-    });
-  };
-  const handlePaste = (e) => {
-    e.preventDefault();
-    const pasted = e.clipboardData.getData("text");
-    const digits = pasted.replace(/\D/g, "");
-    if (!digits) return;
-    const el = e.currentTarget;
-    const startPos = nextDigitSlot(el.selectionStart ?? 0);
-    if (startPos < 0) return;
-    let out = display;
-    let cursor = startPos;
-    let di = 0;
-    while (cursor < mask.length && di < digits.length) {
-      if (!isSepAt(cursor)) {
-        out = out.substring(0, cursor) + digits[di] + out.substring(cursor + 1);
-        di += 1;
-      }
-      cursor += 1;
-    }
-    setDisplay(out);
-    setCursor(cursor);
-  };
-  const handleBlur = () => {
-    if (validate && !validate(display)) {
-      setDisplay(projectValueToDisplay(value));
-      return;
-    }
-    onCommit(display);
-  };
-  const isPrecedingSegmentFilled = (sepPos) => {
-    for (let p = sepPos - 1; p >= 0; p -= 1) {
-      if (isSepAt(p)) break;
-      if (!/\d/.test(display[p] || "")) return false;
-    }
-    return true;
-  };
-  const overlay = display.split("").map((ch, i) => {
-    const sep = isSepAt(i);
-    const bright = sep ? isPrecedingSegmentFilled(i) : /\d/.test(ch);
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `crewlet-time-window__masked-char ${bright ? "is-digit" : "is-mask"}`,
-        children: ch
-      },
-      i
-    );
-  });
-  const wrapClass = [
-    "crewlet-time-window__masked-wrap",
-    className || "",
-    hasAnyDigit ? "" : "is-empty"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: wrapClass, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        className: "crewlet-time-window__text-input",
-        value: display,
-        onKeyDown: handleKeyDown,
-        onFocus: handleFocus,
-        onClick: handleClick,
-        onPaste: handlePaste,
-        onChange: () => {
-        },
-        onBlur: handleBlur,
-        "aria-label": ariaLabel
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "crewlet-time-window__masked-overlay", "aria-hidden": true, children: overlay })
-  ] });
-}
-var Tag2 = ({
-  variant = "neutral",
-  size = "md",
-  leadingIcon,
-  onRemove,
-  removeAriaLabel = "Remove tag",
-  monospace = false,
-  className = "",
-  children,
-  ...rest
-}) => {
-  const classes = [
-    "crewlet-tag",
-    `crewlet-tag--${variant}`,
-    `crewlet-tag--${size}`,
-    monospace ? "crewlet-tag--monospace" : "",
-    onRemove ? "is-removable" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("span", { ...rest, className: classes, children: [
-    leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tag__icon", "aria-hidden": true, children: leadingIcon }) : null,
-    /* @__PURE__ */ jsx("span", { className: "crewlet-tag__label", children }),
-    onRemove ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "crewlet-tag__remove",
-        onClick: (event) => {
-          event.stopPropagation();
-          onRemove();
-        },
-        "aria-label": removeAriaLabel,
-        children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xD7" })
-      }
-    ) : null
-  ] });
-};
-var TagsInput = forwardRef(function TagsInput2({
-  value,
-  onChange,
-  placeholder = "Add a tag, press Enter or comma",
-  tagVariant = "neutral",
-  monospace = false,
-  submitKeys = ["Enter", ","],
-  disabled = false,
-  className = "",
-  id,
-  dedupe = true
-}, ref) {
-  const [draft, setDraft] = useState("");
-  const inputRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus()
-  }));
-  const commit = (raw) => {
-    const next = raw.trim();
-    if (!next) return;
-    if (dedupe && value.some((v) => v.toLowerCase() === next.toLowerCase())) {
-      setDraft("");
-      return;
-    }
-    onChange([...value, next]);
-    setDraft("");
-  };
-  const onKeyDown = (event) => {
-    if (submitKeys.includes(event.key)) {
-      event.preventDefault();
-      commit(draft);
-      return;
-    }
-    if (event.key === "Backspace" && draft === "" && value.length > 0) {
-      event.preventDefault();
-      onChange(value.slice(0, -1));
-    }
-  };
-  const onPaste = (event) => {
-    const text = event.clipboardData.getData("text");
-    if (!text.includes(",") && !text.includes("\n")) return;
-    event.preventDefault();
-    const parts = text.split(/[,\n]+/).map((p) => p.trim()).filter(Boolean);
-    if (!parts.length) return;
-    const set = dedupe ? new Set(value.map((v) => v.toLowerCase())) : null;
-    const added = [];
-    for (const p of parts) {
-      if (set && set.has(p.toLowerCase())) continue;
-      added.push(p);
-      set?.add(p.toLowerCase());
-    }
-    if (added.length) onChange([...value, ...added]);
-  };
-  const onInputChange = (event) => {
-    setDraft(event.target.value);
-  };
-  const onContainerClick = () => {
-    inputRef.current?.focus();
-  };
-  const removeAt = (index) => {
-    onChange(value.filter((_, i) => i !== index));
-  };
-  const classes = ["crewlet-tags-input", disabled ? "is-disabled" : "", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, onClick: onContainerClick, children: [
-    value.map((tag, index) => /* @__PURE__ */ jsx(
-      Tag2,
-      {
-        variant: tagVariant,
-        monospace,
-        onRemove: disabled ? void 0 : () => removeAt(index),
-        removeAriaLabel: `Remove ${tag}`,
-        children: tag
-      },
-      `${index}-${tag}`
-    )),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        id,
-        className: "crewlet-tags-input__field",
-        type: "text",
-        value: draft,
-        placeholder,
-        disabled,
-        onChange: onInputChange,
-        onKeyDown,
-        onPaste,
-        onBlur: () => commit(draft)
-      }
-    )
-  ] });
-});
-var ICONS = {
-  info: "info",
-  success: "check_circle",
-  warn: "warning",
-  error: "error"
-};
-var TITLES = {
-  info: null,
-  success: "Success",
-  warn: "Heads up",
-  error: "Something went wrong"
-};
-var isToastAction = (value) => {
-  if (!value || typeof value !== "object") return false;
-  const v = value;
-  return "label" in v && ("onClick" in v || "href" in v);
-};
-var ToastItem = ({ toast, onDismiss, renderAction }) => {
-  const variant = toast.variant || "info";
-  const knownVariant = ["info", "success", "warn", "error"].includes(variant);
-  const classes = [
-    "crewlet-toast",
-    `crewlet-toast--${toast.variant ?? "info"}`
-  ].filter(Boolean).join(" ");
-  const role = variant === "error" || toast.variant === "quota" ? "alert" : "status";
-  const icon = toast.icon ?? (knownVariant ? /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: ICONS[variant] }) : null);
-  const fallbackTitle = knownVariant ? TITLES[variant] : null;
-  const renderStandardAction = () => {
-    if (toast.action === void 0 || toast.action === null) return null;
-    if (!isToastAction(toast.action)) {
-      return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: toast.action });
-    }
-    const action = toast.action;
-    if (renderAction) {
-      const node = renderAction(action, { onDismiss });
-      return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: node });
-    }
-    if (action.href) {
-      const isExternal = action.external ?? /^https?:\/\//.test(action.href);
-      return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          className: "crewlet-toast__action-link",
-          href: action.href,
-          target: isExternal ? "_blank" : void 0,
-          rel: isExternal ? "noreferrer" : void 0,
-          onClick: onDismiss,
-          children: action.label
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsx("div", { className: "crewlet-toast__actions", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "crewlet-toast__action-btn",
-        onClick: () => {
-          action.onClick?.();
-          onDismiss();
-        },
-        children: action.label
-      }
-    ) });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes, role, children: [
-    toast.renderBody ? toast.renderBody({ onDismiss, toast }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-toast__icon", children: icon }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-toast__body", children: [
-        toast.title || fallbackTitle ? /* @__PURE__ */ jsx("div", { className: "crewlet-toast__title", children: toast.title || fallbackTitle }) : null,
-        toast.message ? /* @__PURE__ */ jsx("div", { className: "crewlet-toast__message", children: toast.message }) : null,
-        renderStandardAction()
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "crewlet-toast__dismiss",
-        onClick: onDismiss,
-        "aria-label": "Dismiss notification",
-        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: "close" })
-      }
-    ),
-    toast.duration && toast.duration > 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "crewlet-toast__progress",
-        style: { animationDuration: `${toast.duration}ms` },
-        onAnimationEnd: onDismiss,
-        "aria-hidden": true
-      },
-      toast.version ?? 0
-    ) : null
-  ] });
-};
-var Toaster = ({
-  toasts,
-  onDismiss,
-  renderAction,
-  position = "bottom-right",
-  className = ""
-}) => {
-  if (!toasts?.length) return null;
-  const style = void 0;
-  const classes = ["crewlet-toaster", `crewlet-toaster--${position}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classes,
-      role: "region",
-      "aria-live": "polite",
-      "aria-label": "Notifications",
-      style,
-      children: toasts.map((toast) => /* @__PURE__ */ jsx(
-        ToastItem,
-        {
-          toast,
-          onDismiss: () => onDismiss(toast.id),
-          renderAction
-        },
-        toast.id
-      ))
-    }
-  );
-};
-
-export { Accordion, AccordionItem, AppShell, Avatar, Button, Callout, Card, Checkbox, CodeBlock, ConfirmModal, Container, Copyable, CopyableCell, DataTable, DateTimePicker, Eyebrow, FormField, FormRow, IconButton, ImageUpload, Input, Kbd, Label, Modal, Popover, PricingCard, Section, Select, Skeleton, StatCard, Table, Tabs, Tag2 as Tag, TagsInput, Textarea, TimeWindowPicker, Toaster, getInitials, parseTimeWindowDuration, resolveTimeWindow };
+import './chunk-ZCR6YGQ4.js';
+export { TreeCanvas } from './chunk-7HPRF5XN.js';
+import './chunk-IJ7QXNIJ.js';
+export { Text } from './chunk-23DHIMJA.js';
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from './chunk-2HQR4U4D.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-WOYYD2YR.js';
+export { Timeline, TimelineItem } from './chunk-O67VF5MS.js';
+export { ToastProvider, Toaster, useToast } from './chunk-NPZY6YYL.js';
+export { Tooltip } from './chunk-XV6WRMBC.js';
+export { StatCard } from './chunk-22O7LAW2.js';
+export { Switch } from './chunk-EV6IMYJ6.js';
+export { Table } from './chunk-FEFTGVMF.js';
+export { TagGroup } from './chunk-V2XMNLMS.js';
+export { TagsInput } from './chunk-RDGD7Z7I.js';
+export { SearchTrigger } from './chunk-Q4ZPPART.js';
+export { Section } from './chunk-A2UXBCLO.js';
+export { SegmentedControl } from './chunk-6ZFVFA56.js';
+export { TabPanel, Tabs, tabId } from './chunk-QEUY3A5P.js';
+export { Select } from './chunk-OFHBK7RI.js';
+export { matchesShortcut, useShortcut } from './chunk-F6OE5FH3.js';
+export { NavGroup, NavItem, SidebarNav } from './chunk-3EYF6HKB.js';
+export { Skeleton } from './chunk-W5J7R5EB.js';
+export { StatGroup } from './chunk-QNCVHRZL.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-IAJLHVUA.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-H4FBTAYS.js';
+export { TreeGrid } from './chunk-5SDBMKUO.js';
+export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-NTRZGNEX.js';
+export { OrgLabel } from './chunk-5C5YMZQU.js';
+export { PricingCard } from './chunk-KLJCCMF3.js';
+export { Tag } from './chunk-S2XHHEW4.js';
+export { StatusDot } from './chunk-PZSWF74H.js';
+export { Prose } from './chunk-JCSA3XVH.js';
+export { Link } from './chunk-2ZQMA2WB.js';
+export { List, ListItem } from './chunk-HZ5XZNPS.js';
+export { ListInput } from './chunk-EN6K2IFA.js';
+export { Meter, meterTone, progressTone } from './chunk-YODNNSZL.js';
+export { NewItemsNotice } from './chunk-YLYOWZ4V.js';
+export { useFullscreen } from './chunk-XDTYBF2F.js';
+export { ImageUpload } from './chunk-5WS6L6FA.js';
+export { InlineCode } from './chunk-NN62JQLR.js';
+export { AutoGrid, Inline, Spacer, Stack } from './chunk-W4ENKCXJ.js';
+export { DIFF_LIST_LABELS, DiffList } from './chunk-HQNHV7D6.js';
+export { Disclosure } from './chunk-LWKJQTOM.js';
+export { EmptyState } from './chunk-RA2ULG6H.js';
+export { EntityChip } from './chunk-QYOFACSP.js';
+export { ErrorBoundary } from './chunk-7EM5T4ME.js';
+export { Eyebrow } from './chunk-RK4XPHVG.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-ZFATEERP.js';
+export { CommandPalette } from './chunk-ESCO4XYW.js';
+export { Container } from './chunk-QVE4GJAT.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from './chunk-34VGEDVV.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-5EKIWVOR.js';
+export { PageHeader } from './chunk-HOXGBLEY.js';
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
+export { Kbd, isApplePlatform, keyGlyph } from './chunk-SFZOKW2G.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-WQX73TWF.js';
+export { Menu } from './chunk-FBZAKNSX.js';
+export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
+export { ConfirmModal, Modal } from './chunk-2EOKFKHX.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-UG46QBLT.js';
+export { Popover } from './chunk-DD5BBGBE.js';
+export { DescriptionList, DescriptionListItem } from './chunk-XN4JBAN3.js';
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
+export { Callout } from './chunk-3ZP55QZE.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-CMEE37QJ.js';
+import './chunk-53DVJCVW.js';
+export { Card } from './chunk-NDCATSW7.js';
+export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor } from './chunk-F4PJZ4ED.js';
+export { Checkbox } from './chunk-2PRH365R.js';
+export { CodeBlock } from './chunk-D35VTV2Z.js';
+export { CopyButton, Copyable } from './chunk-3QRYCPXQ.js';
+export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
+export { Combobox } from './chunk-UOGSZKLT.js';
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-O6232G37.js';
+export { Accordion, AccordionItem } from './chunk-7FZ53WDJ.js';
+export { DisclosureAnatomy } from './chunk-5KPQ6D7N.js';
+export { Count } from './chunk-BHHIIK3M.js';
+export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
+export { ADD_PILL_MS, AddPill } from './chunk-S4GZWSKR.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-MNAXYY3R.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-7RPGY3JE.js';
+export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-ITHXJHBB.js';
+export { IconButton } from './chunk-F27EPQ7D.js';
+export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
+export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials } from './chunk-PNFASD6F.js';
+export { BrandLockup } from './chunk-WNI2WSJF.js';
+export { Button, ButtonLink } from './chunk-BZYDZBAN.js';
+export { VisuallyHidden } from './chunk-BZFWDIV6.js';
+export { cx } from './chunk-ODEQTPFM.js';