@crewlethq/ui 0.2.0

package/dist/index.js

@@ -0,0 +1,4518 @@
+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 };