@akhil-saxena/design-system 1.2.0 → 1.4.2

package/dist/index.js

@@ -1,16 +1,18 @@
 import { X, Check, Minus, Plus, Copy, ChevronLeft, ChevronRight, ChevronDown, MoreHorizontal, Bold, Italic, Underline, Strikethrough, Code, Sun, Moon, Heading2, List, ListOrdered, Quote, Link2, XCircle, AlertTriangle, CheckCircle2, Info, Star, Clock } from './chunk-TG25XACB.js';
 export { Icon } from './chunk-TG25XACB.js';
-import { useComposedRefs, useReducedMotion, useClickOutside, useMatchMedia, useFocusTrap } from './chunk-FUXR6QZ3.js';
+import { useComposedRefs, useReducedMotion, useSortableTable, useResizableColumns, useTableSelection, useClickOutside, useMatchMedia, useFocusTrap } from './chunk-34YNJKI2.js';
 import React, { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, useId, useLayoutEffect, Children, isValidElement, cloneElement, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
-import Link from '@tiptap/extension-link';
+import HighlightExtension from '@tiptap/extension-highlight';
+import Link4 from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
 import UnderlineExtension from '@tiptap/extension-underline';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { createLowlight } from 'lowlight';
+import { Highlighter } from 'lucide-react';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
 import { useSortable, sortableKeyboardCoordinates, arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -38,12 +40,16 @@ var variantStyles = {
     borderColor: "var(--amber-d)",
     fontWeight: 600
   },
-  // Secondary = outlined cream surface. Use for second-priority actions.
+  // Secondary = clean white outlined surface. Use for second-priority actions.
+  // Previous translucent glass (var(--g-bg) + backdrop-filter) rendered as a
+  // muted grey over cream and looked disabled/greyed-out. Plain white + wire
+  // border reads crisply on any background. Dark-mode override in primitives.css
+  // flips background to translucent-white over dark surfaces.
   secondary: {
-    background: "var(--g-bg)",
-    backdropFilter: "blur(6px)",
-    WebkitBackdropFilter: "blur(6px)",
-    color: "var(--ink-2)"
+    background: "#fff",
+    color: "var(--ink-2)",
+    borderColor: "var(--wire, rgba(0, 0, 0, 0.18))",
+    fontWeight: 600
   },
   // Ghost = transparent, text-only. Use for tertiary / icon-only / cancel-in-modal.
   // Color flips via `:root.dark .ds-atom-btn[data-variant="ghost"]` in primitives.css.
@@ -65,7 +71,11 @@ var sizeStyles = {
   xs: { fontSize: 10, padding: "3px 8px", borderRadius: 5 },
   sm: { fontSize: 11, padding: "5px 10px" },
   md: {},
-  lg: { fontSize: 14, padding: "10px 20px", borderRadius: 9 }
+  // lg aligns with OAuthButton's shape so primary CTAs and OAuth buttons
+  // stack at the same height (44px) on auth/onboarding forms. fontSize: 13
+  // matches OAuthButton; padding swapped from 10px 20px (~40px implicit
+  // height) to explicit 0 20px + height 44px for a deterministic match.
+  lg: { fontSize: 13, height: 44, padding: "0 20px", borderRadius: 9, fontWeight: 700 }
 };
 var Button = forwardRef(function Button2({
   variant = "primary",
@@ -104,9 +114,95 @@ var Button = forwardRef(function Button2({
 function Spinner() {
   return /* @__PURE__ */ jsx("span", { className: "ds-atom-btn-spinner", "aria-hidden": "true" });
 }
+var labels = {
+  google: "Continue with Google",
+  github: "Continue with GitHub",
+  apple: "Continue with Apple"
+};
+var OAuthButton = forwardRef(function OAuthButton2({ provider = "google", label, dark = false, type = "button", className, style, ...rest }, ref) {
+  const composedStyle = {
+    background: dark ? "rgba(255,255,255,.06)" : "#fff",
+    color: dark ? "var(--cream)" : "var(--ink-2)",
+    border: dark ? "1.5px solid rgba(255,255,255,.2)" : "1.5px solid var(--wire)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: `ds-atom-oauthbtn${className ? ` ${className}` : ""}`,
+      "data-provider": provider,
+      "data-dark": dark ? "true" : void 0,
+      style: composedStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ProviderLogo, { provider }),
+        /* @__PURE__ */ jsx("span", { children: label ?? labels[provider] })
+      ]
+    }
+  );
+});
+function ProviderLogo({ provider }) {
+  if (provider === "google") return /* @__PURE__ */ jsx(GoogleLogo, {});
+  if (provider === "github") return /* @__PURE__ */ jsx(GitHubLogo, {});
+  if (provider === "apple") return /* @__PURE__ */ jsx(AppleLogo, {});
+  return null;
+}
+function GoogleLogo() {
+  return /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 48 48", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#FFC107",
+        d: "M43.6 20.5H42V20H24v8h11.3a12 12 0 0 1-11.3 8 12 12 0 1 1 7.9-21l5.7-5.7A20 20 0 1 0 24 44a20 20 0 0 0 19.6-23.5z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#FF3D00",
+        d: "M6.3 14.7l6.6 4.8A12 12 0 0 1 24 12a12 12 0 0 1 7.9 3l5.7-5.7A20 20 0 0 0 6.3 14.7z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#4CAF50",
+        d: "M24 44a20 20 0 0 0 13.5-5.2l-6.2-5.3A12 12 0 0 1 12.7 28.3l-6.5 5A20 20 0 0 0 24 44z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#1976D2",
+        d: "M43.6 20.5H42V20H24v8h11.3a12 12 0 0 1-4 5.5l6.2 5.3a20 20 0 0 0 6.1-18.3z"
+      }
+    )
+  ] });
+}
+function GitHubLogo() {
+  return /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.3-3.3-.1-.3-.6-1.6.1-3.3 0 0 1-.3 3.3 1.3a11 11 0 0 1 6 0c2.3-1.6 3.3-1.3 3.3-1.3.7 1.7.3 3 .1 3.3a4.8 4.8 0 0 1 1.3 3.3c0 4.7-2.9 5.7-5.6 6 .5.4.9 1.2.9 2.3v3.5c0 .3.2.7.8.6A12 12 0 0 0 12 .3"
+    }
+  ) });
+}
+function AppleLogo() {
+  return /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M17.6 12.5c0-2.2 1.8-3.2 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.4.8-.7 0-1.8-.8-3-.8-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.7 1.1 8.9.8 1.1 1.7 2.3 2.9 2.2 1.2 0 1.6-.8 3-.8 1.4 0 1.8.8 3 .7 1.3 0 2-1.1 2.8-2.2.9-1.3 1.2-2.5 1.3-2.6-.1 0-2.5-1-2.5-3.8zm-2.3-7c.6-.8 1.1-1.9 1-3a4 4 0 0 0-2.7 1.4c-.6.7-1.1 1.7-1 2.8 1.1.1 2.1-.5 2.7-1.2z"
+    }
+  ) });
+}
 var baseInputStyle = {
   fontSize: 13,
-  padding: "8px 10px",
+  height: 36,
+  padding: "0 10px",
   borderRadius: 8,
   border: "1px solid var(--rule)",
   background: "var(--cream)",
@@ -121,6 +217,7 @@ var wrapStyle = {
   display: "flex",
   alignItems: "center",
   gap: 8,
+  height: 36,
   padding: "0 10px",
   borderRadius: 8,
   border: "1px solid var(--rule)",
@@ -188,6 +285,58 @@ var TextInput = forwardRef(function TextInput2({ error, icon, prefix, suffix, kb
     }
   );
 });
+var STRENGTH_LABELS = ["", "Weak", "Fair", "Good", "Strong"];
+function segmentColor(index, score) {
+  if (score === 0 || index >= score) return "var(--ink-5)";
+  if (score === 1) return "var(--red)";
+  if (score === 4) return "var(--green-vivid)";
+  return "var(--amber)";
+}
+function labelColor(score) {
+  if (score <= 0) return "var(--ink-4)";
+  if (score === 1) return "var(--red)";
+  if (score <= 3) return "var(--amber-d)";
+  return "var(--green-vivid)";
+}
+function PasswordStrength({ score, className, style }) {
+  const label = STRENGTH_LABELS[score];
+  return /* @__PURE__ */ jsxs("div", { className: ["ds-atom-pwstrength", className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-atom-pwstrength-segs", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ds-atom-pwstrength-seg",
+        style: { background: segmentColor(i, score) }
+      },
+      i
+    )) }),
+    label && /* @__PURE__ */ jsx("span", { className: "ds-atom-pwstrength-label", style: { color: labelColor(score) }, children: label })
+  ] });
+}
+function FieldError({ message, className }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("span", { role: "alert", className: ["ds-atom-field-error", className].filter(Boolean).join(" "), children: message });
+}
+function FormErrorSummary({
+  errors,
+  title = "Please fix the following errors:",
+  className
+}) {
+  if (errors.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: ["ds-atom-form-error-summary", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("strong", { children: title }),
+        /* @__PURE__ */ jsx("ul", { children: errors.map((err, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: static error list - order is stable and no unique IDs available
+          /* @__PURE__ */ jsx("li", { children: err }, i)
+        )) })
+      ]
+    }
+  );
+}
 var baseTextareaStyle = {
   fontSize: 13,
   padding: "10px 12px",
@@ -248,7 +397,515 @@ var Textarea = forwardRef(function Textarea2({ error, className, style, maxLengt
     ) : null
   ] });
 });
+var FONT_PRESETS = {
+  default: {
+    fontSize: 13,
+    fontFamily: "var(--font)",
+    fontWeight: 500,
+    background: "transparent",
+    border: "none",
+    borderBottom: "1px dashed var(--rule)",
+    padding: "2px 0"
+  },
+  mono: {
+    fontFamily: "var(--mono)",
+    fontSize: 10.5,
+    fontWeight: 700,
+    letterSpacing: ".12em",
+    textTransform: "uppercase",
+    background: "transparent",
+    border: "none",
+    borderBottom: "1px dashed var(--rule)",
+    padding: "4px 0"
+  },
+  serif: {
+    fontFamily: "'Newsreader', Georgia, serif",
+    fontSize: 14,
+    lineHeight: 1.55,
+    background: "var(--panel)",
+    border: "1px solid var(--rule)",
+    borderRadius: 6,
+    padding: "10px 12px",
+    resize: "vertical",
+    minHeight: 84
+  }
+};
+function InlineEditField({
+  value,
+  onSave,
+  multiline = false,
+  placeholder,
+  disabled = false,
+  maxLength,
+  ariaLabel,
+  font = "default",
+  className,
+  style
+}) {
+  const [state, setState] = useState("idle");
+  const [draft, setDraft] = useState(value);
+  const [errorMsg, setErrorMsg] = useState(null);
+  const inputRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (state === "idle") setDraft(value);
+  }, [value, state]);
+  useEffect(() => {
+    if (state === "editing" || state === "error") {
+      if (multiline) {
+        textareaRef.current?.focus();
+      } else {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }
+    }
+  }, [state, multiline]);
+  async function handleCommit() {
+    setState("saving");
+    setErrorMsg(null);
+    try {
+      await onSave(draft);
+      setState("idle");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : typeof err === "string" ? err : "Save failed";
+      setState("error");
+      setErrorMsg(msg);
+    }
+  }
+  function handleCancel() {
+    setDraft(value);
+    setState("idle");
+    setErrorMsg(null);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+      return;
+    }
+    if (e.key === "Enter") {
+      if (!multiline) {
+        e.preventDefault();
+        void handleCommit();
+        return;
+      }
+      if (e.metaKey || e.ctrlKey) {
+        e.preventDefault();
+        void handleCommit();
+        return;
+      }
+    }
+  }
+  function handleBlur() {
+    if (state === "editing" || state === "error") {
+      void handleCommit();
+    }
+  }
+  if (state !== "idle") {
+    const editStyle = { ...FONT_PRESETS[font], ...style };
+    const sharedProps = {
+      className: ["ds-atom-inlineeditfield-input", className].filter(Boolean).join(" "),
+      value: draft,
+      disabled: state === "saving",
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      "data-state": state,
+      error: state === "error",
+      "aria-label": ariaLabel,
+      maxLength,
+      style: editStyle
+    };
+    return /* @__PURE__ */ jsxs("span", { className: "ds-atom-inlineeditfield-wrap", children: [
+      multiline ? /* @__PURE__ */ jsx(Textarea, { ref: textareaRef, ...sharedProps }) : /* @__PURE__ */ jsx(TextInput, { ref: inputRef, ...sharedProps, type: "text" }),
+      /* @__PURE__ */ jsx(FieldError, { message: state === "error" ? errorMsg : null })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["ds-atom-inlineeditfield", className].filter(Boolean).join(" "),
+      "data-state": "idle",
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled,
+      onClick: disabled ? void 0 : () => setState("editing"),
+      onKeyDown: (e) => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled) {
+          e.preventDefault();
+          setState("editing");
+        }
+      },
+      style,
+      children: value || (placeholder ? /* @__PURE__ */ jsx("span", { style: { color: "var(--ink-4)", fontStyle: "italic" }, children: placeholder }) : null)
+    }
+  );
+}
 var baseStyle2 = {
+  display: "inline-block",
+  fontFamily: "var(--mono)",
+  fontWeight: "var(--weight-bold)",
+  letterSpacing: "var(--ls-wide)",
+  textTransform: "uppercase",
+  lineHeight: 1
+};
+var sizeStyles2 = {
+  xs: { fontSize: 8 },
+  sm: { fontSize: "var(--text-2xs)" },
+  md: { fontSize: "var(--text-xs)" }
+};
+var Eyebrow = forwardRef(function Eyebrow2({ size = "sm", color, tone, className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: `ds-atom-eyebrow${className ? ` ${className}` : ""}`,
+      "data-tone": tone,
+      style: {
+        ...baseStyle2,
+        ...sizeStyles2[size],
+        ...color ? { color } : tone ? null : { color: "var(--ink-3)" },
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var baseStyle3 = {
+  fontFamily: "var(--font)",
+  margin: 0
+};
+var variantStyles2 = {
+  body: { fontSize: "var(--text-base)", color: "var(--ink-2)" },
+  small: { fontSize: "var(--text-sm)", color: "var(--ink-3)" },
+  caption: { fontSize: "var(--text-sm)", color: "var(--ink-3)" },
+  legal: {
+    fontSize: "var(--text-xs)",
+    color: "var(--ink-4)",
+    lineHeight: "var(--lh-normal)"
+  }
+};
+var Text = forwardRef(function Text2({
+  variant = "body",
+  as = "p",
+  color,
+  maxWidth,
+  size,
+  weight,
+  tone,
+  mono,
+  leading,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const Tag = as;
+  const variantBase = variantStyles2[variant];
+  const variantPick = {
+    ...size ? null : { fontSize: variantBase.fontSize },
+    ...tone ? null : { color: variantBase.color },
+    ...variantBase.lineHeight !== void 0 ? { lineHeight: variantBase.lineHeight } : null
+  };
+  const composed = {
+    ...baseStyle3,
+    lineHeight: leading ? void 0 : "var(--lh-relaxed)",
+    ...variantPick,
+    ...color ? { color } : null,
+    ...maxWidth ? { maxWidth } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: `ds-atom-text${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      "data-size": size,
+      "data-weight": weight,
+      "data-tone": tone,
+      "data-mono": mono ? "true" : void 0,
+      "data-leading": leading,
+      style: composed,
+      ...rest,
+      children
+    }
+  );
+});
+var Heading = forwardRef(function Heading3({ level = 2, size = 28, weight = 900, color, tone, as, className, style, children, ...rest }, ref) {
+  const Tag = as ?? `h${level}`;
+  const isTokenSize = typeof size === "string";
+  const isTokenWeight = typeof weight === "string";
+  const dataSize = isTokenSize ? size : void 0;
+  const dataWeight = isTokenWeight ? weight : void 0;
+  const composed = {
+    fontFamily: "var(--display)",
+    color: color ?? (tone ? void 0 : "var(--ink)"),
+    margin: 0,
+    ...isTokenSize ? null : {
+      fontSize: size,
+      lineHeight: 1,
+      letterSpacing: size > 28 ? "var(--ls-tighter)" : size > 20 ? "var(--ls-tight)" : "var(--ls-base)"
+    },
+    ...isTokenWeight ? null : { fontWeight: weight },
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: `ds-atom-heading${className ? ` ${className}` : ""}`,
+      "data-size": dataSize,
+      "data-weight": dataWeight,
+      "data-tone": tone,
+      style: composed,
+      ...rest,
+      children
+    }
+  );
+});
+var Divider = forwardRef(function Divider2({ label, vertical = false, color, spacing, accent, className, style, ...rest }, ref) {
+  const ruleColor = color ?? "var(--rule)";
+  const orient = vertical ? "vertical" : "horizontal";
+  const inlineBg = accent ? void 0 : ruleColor;
+  if (vertical) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `ds-atom-divider${className ? ` ${className}` : ""}`,
+        "data-orient": orient,
+        "data-spacing": spacing,
+        "data-style": accent,
+        style: {
+          width: 1,
+          alignSelf: "stretch",
+          background: inlineBg,
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+  if (!label) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `ds-atom-divider${className ? ` ${className}` : ""}`,
+        "data-orient": orient,
+        "data-spacing": spacing,
+        "data-style": accent,
+        style: {
+          height: 1,
+          width: "100%",
+          background: inlineBg,
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+  const baseLabeled = {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    ...style
+  };
+  const lineStyle = {
+    flex: 1,
+    height: 1,
+    background: ruleColor
+  };
+  const labelStyle4 = {
+    fontFamily: "var(--mono)",
+    fontSize: 9.5,
+    fontWeight: 700,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: "var(--ink-4)"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `ds-atom-divider${className ? ` ${className}` : ""}`,
+      "data-orient": orient,
+      "data-spacing": spacing,
+      "data-labeled": "true",
+      style: baseLabeled,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { style: lineStyle }),
+        /* @__PURE__ */ jsx("span", { style: labelStyle4, children: label }),
+        /* @__PURE__ */ jsx("span", { style: lineStyle })
+      ]
+    }
+  );
+});
+var baseStyle4 = {
+  fontFamily: "var(--font)",
+  cursor: "pointer",
+  transition: "color .15s, text-decoration-color .15s"
+};
+var variantStyles3 = {
+  inline: {
+    color: "var(--amber-d)",
+    textDecoration: "underline",
+    textDecorationColor: "var(--amber-d)",
+    textUnderlineOffset: 2
+  },
+  footer: {
+    fontSize: 12.5,
+    fontWeight: 600,
+    color: "var(--ink)",
+    textDecoration: "underline",
+    textDecorationColor: "rgba(0, 0, 0, 0.25)",
+    textUnderlineOffset: 2
+  },
+  action: {
+    fontSize: 12.5,
+    fontWeight: 700,
+    color: "var(--ink)",
+    textDecoration: "underline",
+    textDecorationColor: "rgba(0, 0, 0, 0.25)",
+    textUnderlineOffset: 2
+  }
+};
+var Link = forwardRef(function Link3({ variant = "inline", color, as, className, style, children, ...rest }, ref) {
+  const Tag = as ?? "a";
+  const variantInline = variantStyles3[variant];
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: `ds-atom-link${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      style: {
+        ...baseStyle4,
+        ...variantInline ?? null,
+        ...color ? { color } : null,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var DotGrid = forwardRef(function DotGrid2({
+  color = "var(--cream)",
+  opacity = 0.055,
+  tile = 18,
+  dotRadius = 1.4,
+  style,
+  className,
+  ...rest
+}, ref) {
+  const composed = {
+    opacity,
+    backgroundImage: `radial-gradient(circle, ${color} ${dotRadius}px, transparent ${dotRadius + 0.2}px)`,
+    backgroundSize: `${tile}px ${tile}px`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: `ds-atom-dotgrid${className ? ` ${className}` : ""}`,
+      style: composed,
+      ...rest
+    }
+  );
+});
+var SplitHero = forwardRef(function SplitHero2({
+  aside,
+  main,
+  ratio = "1fr 1fr",
+  asideBackground = "var(--ink)",
+  mainBackground = "var(--cream)",
+  stackBelow = 900,
+  hideAsideBelow = 600,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const rootStyle = {
+    height: "100vh",
+    display: "grid",
+    gridTemplateColumns: ratio,
+    background: mainBackground,
+    overflow: "hidden",
+    ...style
+  };
+  const asideStyle = {
+    display: "flex",
+    height: "100%",
+    overflow: "hidden",
+    background: asideBackground
+  };
+  const mainStyle = {
+    background: mainBackground,
+    padding: "48px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: 20,
+    overflowY: "auto"
+  };
+  const id = `dssh-${stackBelow}-${hideAsideBelow}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+				@media (max-width: ${stackBelow}px) {
+					.${id} {
+						height: auto !important;
+						min-height: 100vh;
+						grid-template-columns: 1fr !important;
+						grid-template-rows: auto 1fr;
+						overflow: visible !important;
+					}
+					.${id} > [data-slot="aside"] {
+						height: auto;
+						min-height: auto;
+						overflow: visible;
+					}
+					.${id} > [data-slot="main"] {
+						padding: 40px 32px;
+						justify-content: flex-start;
+						overflow-y: visible;
+					}
+				}
+				@media (max-width: ${hideAsideBelow}px) {
+					.${id} {
+						grid-template-rows: 1fr;
+					}
+					.${id} > [data-slot="aside"] {
+						display: none;
+					}
+					.${id} > [data-slot="main"] {
+						padding: 24px;
+						gap: 16px;
+					}
+				}
+			` }),
+    /* @__PURE__ */ jsxs(
+      "main",
+      {
+        ref,
+        className: `ds-layout-splithero ${id}${className ? ` ${className}` : ""}`,
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "aside", style: asideStyle, children: aside }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "main", style: mainStyle, children: main })
+        ]
+      }
+    )
+  ] });
+});
+var baseStyle5 = {
   fontFamily: "var(--mono)",
   fontSize: 9.5,
   padding: "3px 8px",
@@ -278,7 +935,7 @@ var dotColors = {
   neutral: "var(--ink-3)"
 };
 var Badge = forwardRef(function Badge2({ tone = "neutral", dot, dotColor, children, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ref, style: { ...baseStyle2, ...toneStyles[tone], ...style }, ...rest, children: [
+  return /* @__PURE__ */ jsxs("span", { ref, style: { ...baseStyle5, ...toneStyles[tone], ...style }, ...rest, children: [
     dot ? /* @__PURE__ */ jsx(
       "span",
       {
@@ -295,7 +952,34 @@ var Badge = forwardRef(function Badge2({ tone = "neutral", dot, dotColor, childr
     children
   ] });
 });
-var baseStyle3 = {
+var baseStyle6 = {
+  fontFamily: "var(--mono)",
+  fontSize: 11,
+  lineHeight: 1,
+  padding: "2px 6px",
+  borderRadius: 4,
+  display: "inline-flex",
+  alignItems: "center",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+};
+var sizeStyles3 = {
+  sm: { fontSize: 9.5, padding: "1px 5px" },
+  md: {}
+};
+var Kbd = forwardRef(function Kbd2({ size = "md", children, style, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      className: `ds-atom-kbd${className ? ` ${className}` : ""}`,
+      style: { ...baseStyle6, ...sizeStyles3[size], ...style },
+      ...rest,
+      children
+    }
+  );
+});
+var baseStyle7 = {
   display: "inline-flex",
   alignItems: "center",
   gap: 5,
@@ -337,7 +1021,7 @@ var Chip = forwardRef(function Chip2({ tone = "default", onRemove, icon, childre
     {
       ref,
       className: "ds-atom-chip",
-      style: { ...baseStyle3, ...toneStyles2[tone], ...style },
+      style: { ...baseStyle7, ...toneStyles2[tone], ...style },
       ...rest,
       children: [
         icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: icon }) : null,
@@ -887,7 +1571,7 @@ var NumberStepper = forwardRef(
 var DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 function RollingNumber({
   value,
-  format,
+  format: format2,
   prefix,
   suffix,
   variant = "default",
@@ -895,7 +1579,7 @@ function RollingNumber({
   className,
   style
 }) {
-  const core = format ? format(value) : String(value);
+  const core = format2 ? format2(value) : String(value);
   const display = `${prefix ?? ""}${core}${suffix ?? ""}`;
   const firstRender = useRef(true);
   useEffect(() => {
@@ -921,31 +1605,272 @@ function RollingNumber({
               children: /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: "ds-atom-rolling-strip",
+                  className: "ds-atom-rolling-strip",
+                  style: {
+                    transform: `translateY(${-digit * 22}px)`,
+                    ...stripTransitionStyle
+                  },
+                  children: DIGITS.map((n) => /* @__PURE__ */ jsx("span", { children: n }, n))
+                }
+              )
+            },
+            `d-${i}`
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ds-atom-rolling-static",
+            "aria-hidden": "true",
+            children: char
+          },
+          `s-${i}`
+        );
+      })
+    }
+  );
+}
+function Sparkline({
+  data,
+  width = 100,
+  height = 28,
+  color = "var(--amber)",
+  fill = true,
+  ariaLabel = "Trend chart"
+}) {
+  if (data.length < 2) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Sparkline: data must have at least 2 points; received", data.length);
+    }
+    return null;
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const points = data.map((v, i) => {
+    const x = i / (data.length - 1) * width;
+    const y = height - (v - min) / range * (height - 4) - 2;
+    return `${x},${y}`;
+  }).join(" ");
+  const fillPath = `M0,${height} L${points} L${width},${height} Z`;
+  const last = data[data.length - 1];
+  const dotY = height - (last - min) / range * (height - 4) - 2;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      style: { display: "block" },
+      role: "img",
+      "aria-label": ariaLabel,
+      children: [
+        fill && /* @__PURE__ */ jsx("path", { d: fillPath, fill: color, opacity: ".1" }),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points,
+            fill: "none",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: width, cy: dotY, r: "2.5", fill: color })
+      ]
+    }
+  );
+}
+function StatCard({
+  label,
+  value,
+  change,
+  changeDir,
+  data,
+  className,
+  style
+}) {
+  const up = changeDir === "up";
+  const sentimentColor = changeDir === "up" ? "var(--green)" : changeDir === "down" ? "var(--red)" : "var(--amber)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["glass", className].filter(Boolean).join(" "),
+      style: { padding: 16, borderRadius: 12, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-part": "label",
+            style: {
+              fontFamily: "var(--mono)",
+              fontSize: 9,
+              color: "var(--ink-3)",
+              letterSpacing: ".08em",
+              textTransform: "uppercase",
+              fontWeight: 700
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
                   style: {
-                    transform: `translateY(${-digit * 22}px)`,
-                    ...stripTransitionStyle
+                    fontFamily: "var(--display)",
+                    fontWeight: 800,
+                    fontSize: 28,
+                    letterSpacing: "-.02em",
+                    marginTop: 4
                   },
-                  children: DIGITS.map((n) => /* @__PURE__ */ jsx("span", { children: n }, n))
+                  children: value
+                }
+              ),
+              change && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-part": "badge",
+                  style: {
+                    padding: "3px 7px",
+                    borderRadius: 4,
+                    background: up ? "rgba(34,197,94,.1)" : "rgba(239,68,68,.08)",
+                    fontFamily: "var(--mono)",
+                    fontSize: 10,
+                    fontWeight: 700,
+                    color: up ? "var(--green)" : "var(--red)"
+                  },
+                  children: change
                 }
               )
-            },
-            `d-${i}`
-          );
-        }
-        return /* @__PURE__ */ jsx(
-          "span",
+            ]
+          }
+        ),
+        data && data.length >= 2 && /* @__PURE__ */ jsx("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ jsx(Sparkline, { data, color: sentimentColor }) })
+      ]
+    }
+  );
+}
+function MiniDonut({
+  value,
+  max = 100,
+  size = 48,
+  strokeWidth = 5,
+  color = "var(--amber)",
+  ariaLabel
+}) {
+  const reducedMotion = useReducedMotion();
+  const r = (size - strokeWidth) / 2;
+  const circ = 2 * Math.PI * r;
+  const pct = Math.min(value / max, 1);
+  const arcStyle = reducedMotion ? void 0 : { transition: "stroke-dashoffset 0.6s ease-out" };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      style: { display: "block", transform: "rotate(-90deg)" },
+      role: "img",
+      "aria-label": ariaLabel ?? `${Math.round(pct * 100)}%`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
           {
-            className: "ds-atom-rolling-static",
-            "aria-hidden": "true",
-            children: char
-          },
-          `s-${i}`
-        );
-      })
+            cx: size / 2,
+            cy: size / 2,
+            r,
+            fill: "none",
+            stroke: "var(--cream-2)",
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeDasharray: circ,
+            strokeDashoffset: circ * (1 - pct),
+            strokeLinecap: "round",
+            style: arcStyle
+          }
+        )
+      ]
     }
   );
 }
+function MiniBar({ data, labels: labels2, height = 100, barColor = "var(--amber)" }) {
+  const max = Math.max(...data);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 6, height }, children: data.map((v, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        height: "100%",
+        justifyContent: "flex-end"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--mono)",
+              fontSize: 9,
+              color: "var(--ink-3)",
+              fontWeight: 600
+            },
+            children: v
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: 32,
+              borderRadius: "4px 4px 0 0",
+              height: `${v / max * 70}%`,
+              minHeight: 4,
+              background: barColor,
+              opacity: 0.8,
+              transition: "height 0.4s ease-out"
+            }
+          }
+        ),
+        labels2 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--mono)",
+              fontSize: 8,
+              color: "var(--ink-4)"
+            },
+            children: labels2[i]
+          }
+        )
+      ]
+    },
+    i
+  )) });
+}
 var RangeSlider = forwardRef(function RangeSlider2({
   value,
   onChange,
@@ -1064,7 +1989,43 @@ function StarRating({
     }
   );
 }
-var baseStyle4 = {
+var StatusPill = forwardRef(
+  function StatusPill2({ stage, withChevron, interactive = true, className, children, ...rest }, ref) {
+    const cls3 = `ds-atom-statuspill${className ? ` ${className}` : ""}`;
+    if (interactive) {
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: cls3,
+          "data-stage": stage,
+          "data-interactive": "true",
+          ...rest,
+          children: [
+            children,
+            withChevron && /* @__PURE__ */ jsx("span", { className: "ds-atom-statuspill-chev", "aria-hidden": "true", children: "\u25BE" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cls3,
+        "data-stage": stage,
+        "data-interactive": "false",
+        ...rest,
+        children: [
+          children,
+          withChevron && /* @__PURE__ */ jsx("span", { className: "ds-atom-statuspill-chev", "aria-hidden": "true", children: "\u25BE" })
+        ]
+      }
+    );
+  }
+);
+var baseStyle8 = {
   display: "block",
   boxSizing: "border-box",
   fontFamily: "var(--font)"
@@ -1076,25 +2037,30 @@ var StickyNote = forwardRef(function StickyNote2({ rotation = "right", className
       ref,
       className: `ds-atom-stickynote${className ? ` ${className}` : ""}`,
       "data-rotation": rotation,
-      style: { ...baseStyle4, ...style },
+      style: { ...baseStyle8, ...style },
       ...rest,
       children
     }
   );
 });
-var baseStyle5 = {
+var baseStyle9 = {
   display: "block",
   boxSizing: "border-box",
   fontFamily: "var(--font)"
 };
-var Card = forwardRef(function Card2({ variant = "glass", className, style, children, ...rest }, ref) {
+var Card = forwardRef(function Card2({ variant = "glass", padding, radius, tone, hover, as, className, style, children, ...rest }, ref) {
+  const Tag = as ?? "div";
   return /* @__PURE__ */ jsx(
-    "div",
+    Tag,
     {
       ref,
       className: `ds-atom-card${className ? ` ${className}` : ""}`,
       "data-variant": variant,
-      style: { ...baseStyle5, ...style },
+      "data-padding": padding,
+      "data-radius": radius,
+      "data-tone": tone,
+      "data-hover": hover,
+      style: { ...baseStyle9, ...style },
       ...rest,
       children
     }
@@ -1451,52 +2417,459 @@ function Modal({
           /* @__PURE__ */ jsx(
             Button,
             {
-              variant: "ghost",
-              size: "sm",
-              "aria-label": "Close",
-              onClick: onClose,
-              style: { marginLeft: "auto", flexShrink: 0 },
-              children: /* @__PURE__ */ jsx(X, { size: 16 })
+              variant: "ghost",
+              size: "sm",
+              "aria-label": "Close",
+              onClick: onClose,
+              style: { marginLeft: "auto", flexShrink: 0 },
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-atom-modal-body", children: [
+          description ? /* @__PURE__ */ jsx("div", { id: descId, children: description }) : null,
+          children
+        ] }),
+        footer ? /* @__PURE__ */ jsx("footer", { className: "ds-atom-modal-ft", children: footer }) : null
+      ]
+    }
+  ) }) });
+}
+var tones = {
+  danger: {
+    color: "var(--red)",
+    bg: "rgba(239,68,68,.1)",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+        ]
+      }
+    )
+  },
+  warn: {
+    color: "var(--amber-d)",
+    bg: "rgba(245,158,11,.12)",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+        ]
+      }
+    )
+  },
+  success: {
+    color: "var(--green)",
+    bg: "rgba(34,197,94,.1)",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+          /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+        ]
+      }
+    )
+  },
+  neutral: {
+    color: "var(--ink)",
+    bg: "rgba(0,0,0,.05)",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: "0 0 24 24",
+        width: "22",
+        height: "22",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+        ]
+      }
+    )
+  }
+};
+var toneButtonStyle = {
+  danger: { variant: "danger", style: { background: "var(--red)", borderColor: "var(--red)" } },
+  warn: { variant: "primary", style: void 0 },
+  success: {
+    variant: "primary",
+    style: { background: "var(--amber-d)", borderColor: "var(--amber-d)", color: "#fff" }
+  },
+  neutral: {
+    variant: "secondary",
+    style: { background: "var(--ink)", borderColor: "var(--ink)", color: "#fff" }
+  }
+};
+var panelStyle = {
+  width: 360,
+  background: "rgba(255,255,255,.97)",
+  // intentionally NOT the cream token — always-light (CONSTRAINT-010)
+  backdropFilter: "blur(14px)",
+  WebkitBackdropFilter: "blur(14px)",
+  borderRadius: 14,
+  border: "1px solid var(--rule)",
+  padding: 22,
+  boxShadow: "0 16px 48px rgba(0,0,0,.18)"
+};
+function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  tone = "danger",
+  title,
+  body,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel"
+}) {
+  const [panel, setPanel] = useState(null);
+  const generatedTitleId = useId();
+  const generatedDescId = useId();
+  const titleId = title ? generatedTitleId : void 0;
+  const descId = body ? generatedDescId : void 0;
+  useFocusTrap(panel, open);
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+      if (e.key === "Enter") onConfirm();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, onConfirm]);
+  if (!open) return null;
+  function handleBackdropClick(e) {
+    if (e.target !== e.currentTarget) return;
+  }
+  const t = tones[tone];
+  const btnConfig = toneButtonStyle[tone];
+  return /* @__PURE__ */ jsx(DSPortal, { children: /* @__PURE__ */ jsx("div", { className: "ds-atom-modal-backdrop", onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setPanel,
+      className: "ds-atom-confirm-panel",
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      tabIndex: -1,
+      style: panelStyle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 14, marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: 40,
+                height: 40,
+                borderRadius: 10,
+                background: t.bg,
+                color: t.color,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, paddingTop: 2 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: titleId,
+                style: {
+                  fontFamily: "var(--display)",
+                  fontWeight: 700,
+                  fontSize: 15,
+                  marginBottom: 5
+                },
+                children: title
+              }
+            ),
+            body ? /* @__PURE__ */ jsx("div", { id: descId, style: { fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5 }, children: body }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18 }, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { variant: btnConfig.variant, style: btnConfig.style, onClick: onConfirm, children: confirmLabel })
+        ] })
+      ]
+    }
+  ) }) });
+}
+function TypeToConfirm({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  body,
+  guardWord = "DELETE",
+  confirmLabel = "Delete forever",
+  cancelLabel = "Cancel"
+}) {
+  const [panel, setPanel] = useState(null);
+  const [v, setV] = useState("");
+  const ok = v === guardWord;
+  const generatedTitleId = useId();
+  const titleId = title ? generatedTitleId : void 0;
+  useFocusTrap(panel, open);
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+      if (e.key === "Enter" && ok) onConfirm();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, onConfirm, ok]);
+  useEffect(() => {
+    if (!open) setV("");
+  }, [open]);
+  if (!open) return null;
+  function handleBackdropClick(e) {
+    if (e.target !== e.currentTarget) return;
+  }
+  return /* @__PURE__ */ jsx(DSPortal, { children: /* @__PURE__ */ jsx("div", { className: "ds-atom-modal-backdrop", onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setPanel,
+      className: "ds-atom-confirm-panel",
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      style: panelStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: titleId,
+            style: { fontFamily: "var(--display)", fontWeight: 700, fontSize: 15, marginBottom: 5 },
+            children: title
+          }
+        ),
+        body ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 12 },
+            children: body
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "var(--ink-3)", marginBottom: 6 }, children: [
+          "Type ",
+          /* @__PURE__ */ jsx(Kbd, { size: "sm", children: guardWord }),
+          " to confirm"
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: v,
+            onChange: (e) => setV(e.target.value),
+            placeholder: `Type ${guardWord}`,
+            style: { width: "100%", marginBottom: 14 }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: cancelLabel }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "danger",
+              disabled: !ok,
+              style: !ok ? { background: "var(--ink-5)", opacity: 0.6, borderColor: "transparent" } : { background: "var(--red)", borderColor: "transparent" },
+              onClick: onConfirm,
+              children: confirmLabel
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ds-atom-modal-body", children: [
-          description ? /* @__PURE__ */ jsx("div", { id: descId, children: description }) : null,
-          children
-        ] }),
-        footer ? /* @__PURE__ */ jsx("footer", { className: "ds-atom-modal-ft", children: footer }) : null
+        ] })
       ]
     }
   ) }) });
 }
-function ConfirmDialog({
+function CommandPalette({
   open,
   onClose,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  danger = false,
-  onConfirm
+  items,
+  placeholder = "Type a command or search\u2026",
+  emptyText,
+  className,
+  style
 }) {
-  const descriptionString = typeof description === "string" ? description : void 0;
-  const descriptionNode = typeof description !== "string" && description ? description : null;
-  return /* @__PURE__ */ jsx(
-    Modal,
+  const [panel, setPanel] = useState(null);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  useFocusTrap(panel, open);
+  const filtered = useMemo(() => {
+    if (!query.trim()) return items;
+    const q = query.toLowerCase();
+    return items.filter((i) => i.label.toLowerCase().includes(q));
+  }, [items, query]);
+  useEffect(() => {
+    setActiveIndex(-1);
+  }, [query]);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setActiveIndex(-1);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => i <= 0 ? i : i - 1);
+        return;
+      }
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          e.preventDefault();
+          const item = filtered[activeIndex];
+          if (item) {
+            item.onSelect();
+            onClose();
+          }
+        }
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, filtered, activeIndex, onClose]);
+  if (!open) return null;
+  function handleBackdropClick(e) {
+    if (e.target === e.currentTarget) onClose();
+  }
+  const groups = [];
+  for (const item of filtered) {
+    let g = groups.find((x) => x.name === item.group);
+    if (!g) {
+      g = { name: item.group, items: [] };
+      groups.push(g);
+    }
+    g.items.push(item);
+  }
+  let flatIdx = 0;
+  return /* @__PURE__ */ jsx(DSPortal, { children: /* @__PURE__ */ jsx(
+    "div",
     {
-      open,
-      onClose,
-      title,
-      description: descriptionString,
-      role: danger ? "alertdialog" : "dialog",
-      closeOnBackdropClick: !danger,
-      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: cancelLabel }),
-        /* @__PURE__ */ jsx(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
-      ] }),
-      children: descriptionNode
+      className: "ds-atom-modal-backdrop",
+      style: { alignItems: "flex-start", paddingTop: "15vh" },
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setPanel,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          className: `ds-atom-cmd-panel${className ? ` ${className}` : ""}`,
+          style,
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds-atom-cmd-search", children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  autoFocus: true,
+                  className: "ds-atom-cmd-input",
+                  placeholder,
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  "aria-label": "Search commands"
+                }
+              ),
+              /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "ESC" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ds-atom-cmd-list", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ds-atom-cmd-empty", children: emptyText ?? `No results for "${query}"` }) : groups.map((g) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "ds-atom-cmd-group", children: g.name }),
+              g.items.map((item) => {
+                const myIndex = flatIdx++;
+                const isActive = myIndex === activeIndex;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ds-atom-cmd-item",
+                    "data-active": isActive ? "true" : void 0,
+                    "aria-selected": isActive ? "true" : void 0,
+                    onClick: () => {
+                      item.onSelect();
+                      onClose();
+                    },
+                    onMouseEnter: () => setActiveIndex(myIndex),
+                    children: [
+                      item.icon ? /* @__PURE__ */ jsx("span", { className: "ds-atom-cmd-item-icon", children: item.icon }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "ds-atom-cmd-item-label", children: item.label }),
+                      item.shortcut ? /* @__PURE__ */ jsx("span", { className: "ds-atom-cmd-item-shortcut", children: /* @__PURE__ */ jsx(Kbd, { size: "sm", children: item.shortcut }) }) : null
+                    ]
+                  },
+                  item.id
+                );
+              })
+            ] }, g.name)) })
+          ]
+        }
+      )
     }
-  );
+  ) });
 }
 function Sheet({
   open,
@@ -1917,7 +3290,7 @@ function Lightbox({ open, onClose, items, activeIndex = 0, onIndexChange }) {
     }
   ) });
 }
-var baseStyle6 = {
+var baseStyle10 = {
   boxSizing: "border-box",
   display: "block",
   width: "100%",
@@ -1937,7 +3310,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value = 0, max = 100, loadi
         role: "status",
         "aria-live": "polite",
         "aria-label": typeof label === "string" ? label : "Loading",
-        style: { ...baseStyle6, ...style },
+        style: { ...baseStyle10, ...style },
         ...rest,
         children: /* @__PURE__ */ jsxs("span", { className: "ds-atom-progress-dots", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx("span", { className: "ds-atom-progress-dot" }),
@@ -1959,7 +3332,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value = 0, max = 100, loadi
         "aria-valuemin": 0,
         "aria-valuemax": safeMax,
         "aria-label": typeof label === "string" ? label : "Progress",
-        style: { ...baseStyle6, ...style },
+        style: { ...baseStyle10, ...style },
         ...rest,
         children: /* @__PURE__ */ jsx("div", { className: "ds-atom-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ds-atom-progress-fill", style: { width: `${pct}%` } }) })
       }
@@ -2112,7 +3485,7 @@ var TONE_ICON = {
   warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 16, "aria-hidden": "true" }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 16, "aria-hidden": "true" })
 };
-var baseStyle7 = {
+var baseStyle11 = {
   boxSizing: "border-box",
   display: "flex"
 };
@@ -2124,6 +3497,7 @@ var AlertBanner = forwardRef(function AlertBanner2({
   description,
   children,
   dismissible,
+  boldTitle = true,
   className,
   style,
   ...rest
@@ -2137,7 +3511,8 @@ var AlertBanner = forwardRef(function AlertBanner2({
       ref,
       className: `ds-atom-banner${className ? ` ${className}` : ""}`,
       "data-variant": tone,
-      style: { ...baseStyle7, ...style },
+      "data-bold-title": boldTitle ? void 0 : "false",
+      style: { ...baseStyle11, ...style },
       ...rest,
       children: [
         /* @__PURE__ */ jsx("span", { className: "ds-atom-banner-icon", "aria-hidden": "true", children: TONE_ICON[tone] }),
@@ -2159,7 +3534,7 @@ var AlertBanner = forwardRef(function AlertBanner2({
     }
   );
 });
-var baseStyle8 = {
+var baseStyle12 = {
   boxSizing: "border-box"
 };
 var EmptyState = forwardRef(function EmptyState2({ icon, title, description, children, className, style, ...rest }, ref) {
@@ -2168,7 +3543,7 @@ var EmptyState = forwardRef(function EmptyState2({ icon, title, description, chi
     {
       ref,
       className: ["ds-atom-empty", className].filter(Boolean).join(" "),
-      style: { ...baseStyle8, ...style },
+      style: { ...baseStyle12, ...style },
       ...rest,
       children: [
         icon ? /* @__PURE__ */ jsx("div", { className: "ds-atom-empty-icon", "aria-hidden": "true", children: icon }) : null,
@@ -2305,6 +3680,123 @@ function ToastNode({ entry, onDismiss }) {
     }
   );
 }
+var SnackbarContext = createContext(null);
+var DEFAULT_DURATION2 = 5e3;
+var SLIDE_OUT_MS2 = 200;
+function useSnackbar() {
+  const ctx = useContext(SnackbarContext);
+  if (!ctx) {
+    throw new Error("useSnackbar must be used within a <SnackbarProvider>");
+  }
+  return ctx;
+}
+var nextSnackbarId = 0;
+function SnackbarProvider({ children }) {
+  const [entry, setEntry] = useState(null);
+  const dismissTimer = useRef(null);
+  const clearTimer = () => {
+    if (dismissTimer.current !== null) {
+      window.clearTimeout(dismissTimer.current);
+      dismissTimer.current = null;
+    }
+  };
+  const scheduleRemoval = useCallback(() => {
+    window.setTimeout(() => {
+      setEntry((prev) => prev?.dismissing ? null : prev);
+    }, SLIDE_OUT_MS2);
+  }, []);
+  const startDismiss = useCallback(
+    (id) => {
+      clearTimer();
+      setEntry((prev) => {
+        if (!prev || prev.id !== id || prev.dismissing) return prev;
+        return { ...prev, dismissing: true };
+      });
+      scheduleRemoval();
+    },
+    [scheduleRemoval]
+  );
+  const show = useCallback(
+    (message, opts) => {
+      const id = ++nextSnackbarId;
+      const duration = opts?.duration ?? DEFAULT_DURATION2;
+      const action = opts?.action ?? null;
+      const dismissible = opts?.dismissible ?? action === null;
+      clearTimer();
+      setEntry({
+        id,
+        tone: opts?.tone ?? "neutral",
+        message,
+        action,
+        duration,
+        dismissible,
+        dismissing: false
+      });
+      if (Number.isFinite(duration)) {
+        dismissTimer.current = window.setTimeout(() => startDismiss(id), duration);
+      }
+      return id;
+    },
+    [startDismiss]
+  );
+  const api = useMemo(
+    () => ({
+      show,
+      dismiss: (id) => startDismiss(id)
+    }),
+    [show, startDismiss]
+  );
+  useEffect(
+    () => () => {
+      clearTimer();
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: api, children: [
+    children,
+    entry ? /* @__PURE__ */ jsx(DSPortal, { children: /* @__PURE__ */ jsx("div", { className: "ds-atom-snackbar-region", "aria-label": "Action confirmations", children: /* @__PURE__ */ jsx(
+      SnackbarNode,
+      {
+        entry,
+        onAction: () => {
+          if (entry.action) {
+            entry.action.onClick();
+            startDismiss(entry.id);
+          }
+        },
+        onDismiss: () => startDismiss(entry.id)
+      }
+    ) }) }) : null
+  ] });
+}
+function SnackbarNode({ entry, onAction, onDismiss }) {
+  const role = entry.tone === "error" ? "alert" : "status";
+  const ariaLive = role === "alert" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ds-atom-snackbar",
+      "data-tone": entry.tone,
+      "data-dismissing": entry.dismissing ? "true" : void 0,
+      role,
+      "aria-live": ariaLive,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-atom-snackbar-msg", children: entry.message }),
+        entry.action ? /* @__PURE__ */ jsx("button", { type: "button", className: "ds-atom-snackbar-action", onClick: onAction, children: entry.action.label }) : null,
+        entry.dismissible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-atom-snackbar-close",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
 var CopyToClipboard = forwardRef(
   function CopyToClipboard2({ value, label, copiedLabel, onCopy, onError, className, style, ...rest }, ref) {
     const [copied, setCopied] = useState(false);
@@ -2317,19 +3809,28 @@ var CopyToClipboard = forwardRef(
         }
       };
     }, []);
-    const handleClick = useCallback(async () => {
-      const showCopied = () => {
-        setCopied(true);
-        onCopy?.();
-        if (timerRef.current !== null) globalThis.clearTimeout(timerRef.current);
-        timerRef.current = globalThis.setTimeout(() => {
-          setCopied(false);
+    const revertOptimistic = useCallback(
+      (err) => {
+        if (timerRef.current !== null) {
+          globalThis.clearTimeout(timerRef.current);
           timerRef.current = null;
-        }, 2e3);
-      };
+        }
+        setCopied(false);
+        console.warn("CopyToClipboard: copy failed", err);
+        onError?.(err);
+      },
+      [onError]
+    );
+    const handleClick = useCallback(async () => {
+      setCopied(true);
+      onCopy?.();
+      if (timerRef.current !== null) globalThis.clearTimeout(timerRef.current);
+      timerRef.current = globalThis.setTimeout(() => {
+        setCopied(false);
+        timerRef.current = null;
+      }, 2e3);
       try {
         await navigator.clipboard.writeText(value);
-        showCopied();
         return;
       } catch {
       }
@@ -2340,27 +3841,23 @@ var CopyToClipboard = forwardRef(
         document.body.appendChild(ta);
         ta.focus();
         ta.select();
-        const ok = document.execCommand("copy");
+        const execCommand = document.execCommand.bind(document);
+        const ok = execCommand("copy");
         ta.remove();
-        if (ok) {
-          showCopied();
-        } else {
-          const error = new Error("Copy command unavailable");
-          console.warn("[CopyToClipboard]", error.message);
-          onError?.(error);
+        if (!ok) {
+          revertOptimistic(new Error("Copy command unavailable"));
         }
       } catch (fallbackErr) {
         const error = fallbackErr instanceof Error ? fallbackErr : new Error(String(fallbackErr));
-        console.warn("[CopyToClipboard] clipboard unavailable:", error.message);
-        onError?.(error);
+        revertOptimistic(error);
       }
-    }, [value, onCopy, onError]);
+    }, [value, onCopy, revertOptimistic]);
     return /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
         type: "button",
-        className: `ds-atom-copy${className ? ` ${className}` : ""}`,
+        className: ["ds-atom-copy", className].filter(Boolean).join(" "),
         "data-state": copied ? "copied" : "idle",
         "aria-label": `Copy ${label ?? value}`,
         style,
@@ -2381,6 +3878,46 @@ var CopyToClipboard = forwardRef(
     );
   }
 );
+function format(d) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  const diffH = Math.floor(diffMin / 60);
+  const diffD = Math.floor(diffH / 24);
+  if (diffMin < 0) return `in ${Math.abs(diffMin)}m`;
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffH < 24) return `${diffH}h ago`;
+  if (diffD < 30) return `${diffD}d ago`;
+  return d.toLocaleDateString();
+}
+var RelativeTime = forwardRef(function RelativeTime2({ date, prefix, updateInterval = 6e4, className, style, ...rest }, ref) {
+  const d = new Date(date);
+  const [rel, setRel] = useState(() => format(d));
+  useEffect(() => {
+    setRel(format(new Date(date)));
+    if (updateInterval === 0) return;
+    const id = globalThis.setInterval(() => setRel(format(new Date(date))), updateInterval);
+    return () => globalThis.clearInterval(id);
+  }, [date, updateInterval]);
+  return /* @__PURE__ */ jsxs(
+    "time",
+    {
+      ref,
+      dateTime: d.toISOString(),
+      title: d.toLocaleString(),
+      className: `ds-atom-relative-time${className ? ` ${className}` : ""}`,
+      style,
+      ...rest,
+      children: [
+        prefix ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--ink-4)" }, children: [
+          prefix,
+          " "
+        ] }) : null,
+        rel
+      ]
+    }
+  );
+});
 
 // src/_internals/dateUtils.ts
 function startOfMonth(d) {
@@ -2452,7 +3989,9 @@ function buildMonthGrid(year, month, weekStart = 0) {
   }
   const weeks = [];
   for (let w = 0; w < 6; w++) {
-    weeks.push(cells.slice(w * 7, (w + 1) * 7));
+    const week = cells.slice(w * 7, (w + 1) * 7);
+    if (week.every((c) => !c.inMonth)) break;
+    weeks.push(week);
   }
   return { weeks, cells, weekStart, monthStart };
 }
@@ -2460,9 +3999,23 @@ var NARROW_SUN = ["S", "M", "T", "W", "T", "F", "S"];
 var NARROW_MON = ["M", "T", "W", "T", "F", "S", "S"];
 var SHORT_SUN = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var SHORT_MON = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-function getWeekDayLabels(weekStart, format = "narrow") {
-  if (weekStart === 0) return format === "short" ? [...SHORT_SUN] : [...NARROW_SUN];
-  return format === "short" ? [...SHORT_MON] : [...NARROW_MON];
+function getWeekDayLabels(weekStart, format2 = "narrow") {
+  if (weekStart === 0) return format2 === "short" ? [...SHORT_SUN] : [...NARROW_SUN];
+  return format2 === "short" ? [...SHORT_MON] : [...NARROW_MON];
+}
+function defaultFormatLabel(d, showTime) {
+  const datePart = d.toLocaleDateString(void 0, {
+    weekday: "short",
+    day: "numeric",
+    month: "short"
+  });
+  if (!showTime) return datePart;
+  const timePart = d.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+  return `${datePart} \xB7 ${timePart}`;
 }
 var WEEKDAY_HEADERS = ["S", "M", "T", "W", "T", "F", "S"];
 var MONTH_NAMES = [
@@ -2496,10 +4049,19 @@ var DatePicker = forwardRef(function DatePicker2({
   isCellSelected,
   isRangeStart,
   isRangeEnd,
+  variant = "inline",
+  placeholder = "Pick a date",
+  formatLabel,
   className,
   style,
   ...rest
 }, ref) {
+  const triggerRef = useRef(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [valueAtOpen, setValueAtOpen] = useState(null);
+  useEffect(() => {
+    if (popoverOpen) setValueAtOpen(value);
+  }, [popoverOpen, value]);
   const [viewMonth, setViewMonth] = useState(
     () => startOfMonth(value ?? defaultMonth ?? /* @__PURE__ */ new Date())
   );
@@ -2572,127 +4134,190 @@ var DatePicker = forwardRef(function DatePicker2({
     out.setHours(targetIsPm ? currentHours + 12 : currentHours - 12);
     onChange(out);
   }
-  const displayHour24 = value?.getHours() ?? 0;
-  const displayHour12 = displayHour24 % 12 === 0 ? 12 : displayHour24 % 12;
-  const displayPeriod = displayHour24 >= 12 ? "PM" : "AM";
-  const eventSet = useMemo(() => new Set((events ?? []).map((e) => dayKey(e))), [events]);
-  return /* @__PURE__ */ jsxs(
+  const displayHour24 = value?.getHours() ?? 0;
+  const displayHour12 = displayHour24 % 12 === 0 ? 12 : displayHour24 % 12;
+  const displayPeriod = displayHour24 >= 12 ? "PM" : "AM";
+  const eventSet = useMemo(() => new Set((events ?? []).map((e) => dayKey(e))), [events]);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-header", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous month",
+          onClick: () => step(-1),
+          className: "ds-atom-datepicker-nav",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-label", children: [
+        MONTH_NAMES[viewMonth.getMonth()],
+        " ",
+        viewMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next month",
+          onClick: () => step(1),
+          className: "ds-atom-datepicker-nav",
+          children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ds-atom-datepicker-weekdays", children: WEEKDAY_HEADERS.map((w, i) => /* @__PURE__ */ jsx("div", { className: "ds-atom-datepicker-weekday", children: w }, `wd-${i}-${w}`)) }),
+    /* @__PURE__ */ jsx("div", { className: "ds-atom-datepicker-grid", role: "grid", children: cells.map(({ date, inMonth }) => {
+      const selected = isCellSelected ? isCellSelected(date) : !!(value && isSameDay(date, value));
+      const todayCell = isToday(date);
+      const isDisabled = !!disabled?.(date) || isPastDisabled(date) || isFutureDisabled(date);
+      const inRangeMatch = !!inRange?.(date);
+      const isRangeStartCell = !!isRangeStart?.(date);
+      const isRangeEndCell = !!isRangeEnd?.(date);
+      const hasEvent = eventSet.has(dayKey(date));
+      const cls3 = [
+        "ds-atom-datepicker-cell",
+        !inMonth && "is-out",
+        selected && "is-selected",
+        isRangeStartCell && "is-range-start",
+        isRangeEndCell && "is-range-end",
+        todayCell && "is-today",
+        isDisabled && "is-disabled",
+        inRangeMatch && "is-in-range"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          "aria-selected": selected ? true : void 0,
+          "aria-current": todayCell ? "date" : void 0,
+          "aria-disabled": isDisabled || void 0,
+          className: cls3,
+          disabled: isDisabled,
+          onClick: () => handleSelect(date),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-atom-datepicker-cell-num", children: date.getDate() }),
+            hasEvent ? /* @__PURE__ */ jsx("span", { className: "ds-atom-datepicker-event-dot", "aria-hidden": "true" }) : null
+          ]
+        },
+        dayKey(date)
+      );
+    }) }),
+    showTime ? /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-time", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          "aria-label": "Hours",
+          min: 1,
+          max: 12,
+          value: displayHour12,
+          onChange: (e) => updateHour12(Number(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ds-atom-datepicker-time-sep", children: ":" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          "aria-label": "Minutes",
+          min: 0,
+          max: 59,
+          value: value?.getMinutes() ?? 0,
+          onChange: (e) => updateMinute(Number(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: displayPeriod === "PM" ? "primary" : "secondary",
+          "aria-label": `Currently ${displayPeriod} - click to switch`,
+          "aria-pressed": displayPeriod === "PM",
+          onClick: () => togglePeriod(displayPeriod === "AM" ? "PM" : "AM"),
+          style: {
+            fontFamily: "var(--mono)",
+            fontWeight: 700,
+            letterSpacing: "0.04em",
+            flexShrink: 0,
+            width: 48
+          },
+          children: displayPeriod
+        }
+      )
+    ] }) : null
+  ] });
+  if (variant === "popover") {
+    const fmt = formatLabel ?? defaultFormatLabel;
+    const triggerLabel = value ? fmt(value, showTime) : placeholder;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          className: `ds-atom-datepicker-trigger${popoverOpen ? " is-open" : ""}${className ? ` ${className}` : ""}`,
+          "aria-haspopup": "dialog",
+          "aria-expanded": popoverOpen,
+          onClick: () => setPopoverOpen((o) => !o),
+          style,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `ds-atom-datepicker-trigger-label${value ? "" : " is-placeholder"}`, children: triggerLabel }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds-atom-datepicker-trigger-caret", children: "\u25BE" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          anchorRef: triggerRef,
+          open: popoverOpen,
+          onOpenChange: setPopoverOpen,
+          placement: "bottom-start",
+          offset: 6,
+          className: "ds-atom-datepicker-popover",
+          children: /* @__PURE__ */ jsxs("div", { ref, className: "ds-atom-datepicker is-popover", ...rest, children: [
+            body,
+            /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-popover-actions", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  variant: "secondary",
+                  onClick: () => {
+                    if (valueAtOpen !== value) {
+                      if (valueAtOpen) onChange(valueAtOpen);
+                    }
+                    setPopoverOpen(false);
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  variant: "primary",
+                  onClick: () => setPopoverOpen(false),
+                  disabled: !value,
+                  children: "Apply"
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: `ds-atom-datepicker${className ? ` ${className}` : ""}`,
       style,
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-header", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Previous month",
-              onClick: () => step(-1),
-              className: "ds-atom-datepicker-nav",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-label", children: [
-            MONTH_NAMES[viewMonth.getMonth()],
-            " ",
-            viewMonth.getFullYear()
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Next month",
-              onClick: () => step(1),
-              className: "ds-atom-datepicker-nav",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ds-atom-datepicker-weekdays", children: WEEKDAY_HEADERS.map((w, i) => /* @__PURE__ */ jsx("div", { className: "ds-atom-datepicker-weekday", children: w }, `wd-${i}-${w}`)) }),
-        /* @__PURE__ */ jsx("div", { className: "ds-atom-datepicker-grid", role: "grid", children: cells.map(({ date, inMonth }) => {
-          const selected = isCellSelected ? isCellSelected(date) : !!(value && isSameDay(date, value));
-          const todayCell = isToday(date);
-          const isDisabled = !!disabled?.(date) || isPastDisabled(date) || isFutureDisabled(date);
-          const inRangeMatch = !!inRange?.(date);
-          const isRangeStartCell = !!isRangeStart?.(date);
-          const isRangeEndCell = !!isRangeEnd?.(date);
-          const hasEvent = eventSet.has(dayKey(date));
-          const cls2 = [
-            "ds-atom-datepicker-cell",
-            !inMonth && "is-out",
-            selected && "is-selected",
-            isRangeStartCell && "is-range-start",
-            isRangeEndCell && "is-range-end",
-            todayCell && "is-today",
-            isDisabled && "is-disabled",
-            inRangeMatch && "is-in-range"
-          ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "gridcell",
-              "aria-selected": selected ? true : void 0,
-              "aria-current": todayCell ? "date" : void 0,
-              "aria-disabled": isDisabled || void 0,
-              className: cls2,
-              disabled: isDisabled,
-              onClick: () => handleSelect(date),
-              children: [
-                /* @__PURE__ */ jsx("span", { children: date.getDate() }),
-                hasEvent ? /* @__PURE__ */ jsx("span", { className: "ds-atom-datepicker-event-dot", "aria-hidden": "true" }) : null
-              ]
-            },
-            dayKey(date)
-          );
-        }) }),
-        showTime ? /* @__PURE__ */ jsxs("div", { className: "ds-atom-datepicker-time", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              "aria-label": "Hours",
-              min: 1,
-              max: 12,
-              value: displayHour12,
-              onChange: (e) => updateHour12(Number(e.target.value))
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "ds-atom-datepicker-time-sep", children: ":" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              "aria-label": "Minutes",
-              min: 0,
-              max: 59,
-              value: value?.getMinutes() ?? 0,
-              onChange: (e) => updateMinute(Number(e.target.value))
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "sm",
-              variant: displayPeriod === "PM" ? "primary" : "secondary",
-              "aria-label": `Currently ${displayPeriod} - click to switch`,
-              "aria-pressed": displayPeriod === "PM",
-              onClick: () => togglePeriod(displayPeriod === "AM" ? "PM" : "AM"),
-              style: {
-                fontFamily: "var(--mono)",
-                fontWeight: 700,
-                letterSpacing: "0.04em",
-                flexShrink: 0,
-                width: 48
-              },
-              children: displayPeriod
-            }
-          )
-        ] }) : null
-      ]
+      children: body
     }
   );
 });
@@ -2914,7 +4539,19 @@ function DSDropdown({
   );
   return /* @__PURE__ */ jsx(DSPortal, { children: isDarkCtx ? /* @__PURE__ */ jsx("div", { className: "dark", children: dropdownEl }) : dropdownEl });
 }
-var MultiSelect = forwardRef(function MultiSelect2({ value, onChange, options, placeholder = "Select\u2026", disabled = false, className, style }, ref) {
+var MultiSelect = forwardRef(function MultiSelect2({
+  value,
+  onChange,
+  options,
+  placeholder = "Select\u2026",
+  compact = false,
+  allSelectedLabel = "All",
+  tone = "default",
+  size = "md",
+  disabled = false,
+  className,
+  style
+}, ref) {
   const triggerRef = useRef(null);
   const moreChipRef = useRef(null);
   const [open, setOpen] = useState(false);
@@ -2951,7 +4588,7 @@ var MultiSelect = forwardRef(function MultiSelect2({ value, onChange, options, p
       {
         ref: combineRefs,
         type: "button",
-        className: `ds-atom-multiselect${className ? ` ${className}` : ""}`,
+        className: `ds-atom-multiselect${compact ? " ds-atom-multiselect-compact" : ""}${className ? ` ${className}` : ""}`,
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "listbox",
@@ -2959,10 +4596,17 @@ var MultiSelect = forwardRef(function MultiSelect2({ value, onChange, options, p
         "aria-activedescendant": open ? optionId(activeIndex) : void 0,
         disabled,
         "data-state": open ? "open" : "closed",
+        "data-tone": tone,
+        "data-size": size,
         onClick: () => !disabled && setOpen((o) => !o),
         style,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "ds-atom-multiselect-chips", children: selectedOpts.length === 0 ? /* @__PURE__ */ jsx("span", { className: "ds-atom-multiselect-placeholder", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-atom-multiselect-chips", children: compact ? (
+            // Single-line trigger: never render chips. Show placeholder when
+            // nothing selected, allSelectedLabel when every option is selected,
+            // or `${placeholder} (${count})` for any partial selection.
+            /* @__PURE__ */ jsx("span", { className: "ds-atom-multiselect-placeholder", children: selectedOpts.length === 0 ? placeholder : selectedOpts.length === options.length ? allSelectedLabel : `${placeholder} (${selectedOpts.length})` })
+          ) : selectedOpts.length === 0 ? /* @__PURE__ */ jsx("span", { className: "ds-atom-multiselect-placeholder", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             visibleChips.map((o) => /* @__PURE__ */ jsxs("span", { className: "ds-atom-multiselect-chip", children: [
               /* @__PURE__ */ jsx("span", { children: o.label }),
               /* @__PURE__ */ jsx(
@@ -3079,6 +4723,8 @@ var Select = forwardRef(function Select2({
   options,
   placeholder = "Select\u2026",
   searchable = true,
+  tone = "default",
+  size = "md",
   disabled = false,
   className,
   style
@@ -3126,6 +4772,8 @@ var Select = forwardRef(function Select2({
         "aria-activedescendant": open && filtered.length > 0 ? optionId(activeIndex) : void 0,
         disabled,
         "data-state": open ? "open" : "closed",
+        "data-tone": tone,
+        "data-size": size,
         onClick: () => !disabled && setOpen((o) => !o),
         style,
         children: [
@@ -3413,6 +5061,686 @@ function Autocomplete({
     )
   ] });
 }
+function FileInput({
+  onSelect,
+  accept,
+  multiple = false,
+  maxSizeBytes,
+  onError,
+  disabled = false,
+  variant = "dropzone",
+  ariaLabel = "Upload file",
+  children,
+  className,
+  style
+}) {
+  const inputRef = useRef(null);
+  const [dragOver, setDragOver] = useState(false);
+  function validateFiles(files) {
+    const arr = Array.from(files);
+    if (arr.length === 0) return null;
+    const subset = multiple ? arr : arr.slice(0, 1);
+    for (const f of subset) {
+      if (accept) {
+        const tokens = accept.split(",").map((t) => t.trim()).filter(Boolean);
+        const matches = tokens.some(
+          (t) => t.startsWith(".") ? f.name.toLowerCase().endsWith(t.toLowerCase()) : f.type === t
+        );
+        if (!matches) {
+          onError?.(`Only ${accept} files are accepted.`);
+          return null;
+        }
+      }
+      if (typeof maxSizeBytes === "number" && f.size > maxSizeBytes) {
+        const mb = Math.round(maxSizeBytes / (1024 * 1024));
+        onError?.(`File must be under ${mb} MB.`);
+        return null;
+      }
+    }
+    return subset;
+  }
+  function handlePickedFiles(files) {
+    if (!files) return;
+    const valid = validateFiles(files);
+    if (valid) onSelect(valid);
+  }
+  function handleTriggerClick() {
+    if (disabled) return;
+    inputRef.current?.click();
+  }
+  const hiddenInput = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      accept,
+      multiple,
+      style: { display: "none" },
+      onChange: (e) => handlePickedFiles(e.target.files)
+    }
+  );
+  if (variant === "button") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: ["ds-atom-fileinput-button", className].filter(Boolean).join(" "),
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: handleTriggerClick,
+              disabled,
+              "aria-label": ariaLabel,
+              children: children ?? "Upload file"
+            }
+          ),
+          hiddenInput
+        ]
+      }
+    );
+  }
+  const triggerStyle = {
+    width: "100%",
+    padding: 18,
+    background: dragOver ? "var(--paper-deep)" : "var(--paper-warm)",
+    border: `2px dashed ${dragOver ? "var(--amber)" : "#E8D9AC"}`,
+    borderRadius: 10,
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    cursor: disabled ? "not-allowed" : "pointer",
+    textAlign: "left",
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: disabled ? "none" : "auto",
+    transition: "background-color .15s, border-color .15s",
+    ...style
+  };
+  const dropzoneClasses = [
+    "ds-atom-fileinput",
+    dragOver ? "ds-atom-fileinput--dragover" : null,
+    disabled ? "ds-atom-fileinput--disabled" : null,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: dropzoneClasses,
+        "data-state": dragOver ? "dragover" : "idle",
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled,
+        disabled,
+        onClick: handleTriggerClick,
+        onDragOver: (e) => {
+          e.preventDefault();
+          if (!disabled) setDragOver(true);
+        },
+        onDragLeave: () => setDragOver(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragOver(false);
+          if (disabled) return;
+          handlePickedFiles(e.dataTransfer.files);
+        },
+        style: triggerStyle,
+        children: children ?? /* @__PURE__ */ jsx(DefaultDropzoneContent, {})
+      }
+    ),
+    hiddenInput
+  ] });
+}
+function DefaultDropzoneContent() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: 36,
+          height: 36,
+          borderRadius: 8,
+          background: "var(--panel)",
+          border: "1px solid var(--rule)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--amber)",
+          fontSize: 18,
+          flexShrink: 0
+        },
+        children: "\u2913"
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "b",
+        {
+          style: {
+            fontFamily: "var(--font)",
+            fontSize: 13.5,
+            fontWeight: 600,
+            color: "var(--ink)",
+            lineHeight: 1.4,
+            marginBottom: 3
+          },
+          children: "Drop a file here, or click to upload"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontFamily: "var(--mono)",
+            fontSize: 10,
+            color: "var(--ink-3)",
+            letterSpacing: ".04em",
+            lineHeight: 1.4
+          },
+          children: "File picker"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/inputs/ColorPicker/colorUtils.ts
+function hexToHsv(hex) {
+  const r = Number.parseInt(hex.slice(1, 3), 16) / 255;
+  const g = Number.parseInt(hex.slice(3, 5), 16) / 255;
+  const b = Number.parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : d / max;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return [h * 360, s, v];
+}
+function hsvToHex(h, s, v) {
+  const i = Math.floor(h / 60) % 6;
+  const f = h / 60 - Math.floor(h / 60);
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const table = [
+    [v, t, p],
+    [q, v, p],
+    [p, v, t],
+    [p, q, v],
+    [t, p, v],
+    [v, p, q]
+  ];
+  const triplet = table[i];
+  if (!triplet) {
+    return "#000000";
+  }
+  const [r, g, b] = triplet;
+  return `#${[r, g, b].map(
+    (x) => Math.round(x * 255).toString(16).padStart(2, "0")
+  ).join("")}`;
+}
+var PRESETS_DEFAULT = [
+  "#f59e0b",
+  "#ef4444",
+  "#3b82f6",
+  "#8b5cf6",
+  "#22c55e",
+  "#ec4899",
+  "#06b6d4",
+  "#f97316",
+  "#14b8a6",
+  "#6366f1"
+];
+var TONAL_STRIPS = [
+  {
+    label: "Amber",
+    colors: [
+      "#fef3c7",
+      "#fde68a",
+      "#fcd34d",
+      "#fbbf24",
+      "#f59e0b",
+      "#d97706",
+      "#b45309",
+      "#92400e"
+    ]
+  },
+  {
+    label: "Blue",
+    colors: [
+      "#dbeafe",
+      "#bfdbfe",
+      "#93c5fd",
+      "#60a5fa",
+      "#3b82f6",
+      "#2563eb",
+      "#1d4ed8",
+      "#1e40af"
+    ]
+  },
+  {
+    label: "Neutral",
+    colors: [
+      "#f5f3f0",
+      "#ece8e3",
+      "#e7e2dc",
+      "#d6d3d1",
+      "#a8a29e",
+      "#6b6560",
+      "#44403c",
+      "#292524"
+    ]
+  }
+];
+var HEX_RE = /^#[0-9a-fA-F]{6}$/;
+function ColorPicker({
+  value,
+  onChange,
+  defaultValue = "#f59e0b",
+  presets = PRESETS_DEFAULT,
+  className,
+  style
+}) {
+  const initial = value ?? defaultValue;
+  const [color, setColor] = useState(initial);
+  const [hex, setHex] = useState(initial);
+  const [hue, setHue] = useState(() => hexToHsv(initial)[0]);
+  const [opacity, setOpacity] = useState(100);
+  useEffect(() => {
+    if (value !== void 0 && value !== color) {
+      setColor(value);
+      setHex(value);
+    }
+  }, [value]);
+  function emit(next) {
+    setColor(next);
+    setHex(next);
+    onChange?.(next);
+  }
+  function startDrag(target, el, initialEvent) {
+    try {
+      el.setPointerCapture(initialEvent.pointerId);
+    } catch {
+    }
+    const rect = el.getBoundingClientRect();
+    function update(e) {
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+      if (target === "canvas") {
+        const newHex = hsvToHex(hue, x, 1 - y);
+        emit(newHex);
+      } else if (target === "hue") {
+        const newHue = x * 360;
+        setHue(newHue);
+        const [, s, v] = hexToHsv(color);
+        emit(hsvToHex(newHue, s || 1, v || 1));
+      } else {
+        setOpacity(Math.round(x * 100));
+      }
+    }
+    update(initialEvent);
+    function onMove(e) {
+      update(e);
+    }
+    function onUp() {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+    }
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+  }
+  function handleHexChange(e) {
+    const next = e.target.value;
+    setHex(next);
+    if (HEX_RE.test(next)) {
+      setColor(next);
+      setHue(hexToHsv(next)[0]);
+      onChange?.(next);
+    }
+  }
+  const [, sat, val] = hexToHsv(color);
+  const labelStyle4 = {
+    fontFamily: "var(--mono)",
+    fontSize: 9,
+    color: "var(--ink-4)",
+    marginBottom: 4,
+    fontWeight: 700
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ds-atom-colorpicker", className].filter(Boolean).join(" "),
+      style: { width: 260, padding: 16, borderRadius: 14, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "slider",
+            "aria-label": "Saturation and brightness",
+            "aria-valuenow": Math.round(sat * 100),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            tabIndex: 0,
+            className: "ds-atom-colorpicker-canvas",
+            onPointerDown: (e) => startDrag("canvas", e.currentTarget, e),
+            style: {
+              width: "100%",
+              height: 150,
+              borderRadius: 10,
+              marginBottom: 12,
+              position: "relative",
+              cursor: "crosshair",
+              background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hsvToHex(hue, 1, 1)})`
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ds-atom-colorpicker-thumb",
+                style: {
+                  left: `${sat * 100}%`,
+                  top: `${(1 - val) * 100}%`,
+                  width: 16,
+                  height: 16,
+                  borderRadius: "50%",
+                  border: "2.5px solid #fff",
+                  boxShadow: "0 1px 4px rgba(0,0,0,.35)"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: "HUE" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "slider",
+            "aria-label": "Hue",
+            "aria-valuenow": Math.round(hue),
+            "aria-valuemin": 0,
+            "aria-valuemax": 360,
+            tabIndex: 0,
+            className: "ds-atom-colorpicker-huebar",
+            onPointerDown: (e) => startDrag("hue", e.currentTarget, e),
+            style: {
+              width: "100%",
+              height: 12,
+              borderRadius: 6,
+              marginBottom: 12,
+              background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
+              position: "relative",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ds-atom-colorpicker-thumb",
+                style: {
+                  left: `${hue / 360 * 100}%`,
+                  top: "50%",
+                  width: 14,
+                  height: 14,
+                  borderRadius: "50%",
+                  border: "2px solid #fff",
+                  boxShadow: "0 1px 3px rgba(0,0,0,.3)",
+                  background: hsvToHex(hue, 1, 1)
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: "OPACITY" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "slider",
+            "aria-label": "Opacity",
+            "aria-valuenow": opacity,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            tabIndex: 0,
+            className: "ds-atom-colorpicker-opacitybar",
+            onPointerDown: (e) => startDrag("opacity", e.currentTarget, e),
+            style: {
+              width: "100%",
+              height: 12,
+              borderRadius: 6,
+              marginBottom: 14,
+              background: `linear-gradient(to right, transparent, ${color}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50%/8px 8px`,
+              position: "relative",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ds-atom-colorpicker-thumb",
+                style: {
+                  left: `${opacity}%`,
+                  top: "50%",
+                  width: 14,
+                  height: 14,
+                  borderRadius: "50%",
+                  border: "2px solid #fff",
+                  boxShadow: "0 1px 3px rgba(0,0,0,.3)",
+                  background: color
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              marginBottom: 14
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 8,
+                    background: color,
+                    border: "1px solid var(--rule)",
+                    flexShrink: 0,
+                    boxShadow: "0 1px 4px rgba(0,0,0,.08)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    style: {
+                      fontFamily: "var(--mono)",
+                      fontSize: 9,
+                      color: "var(--ink-4)",
+                      fontWeight: 700,
+                      display: "block",
+                      marginBottom: 2
+                    },
+                    children: "HEX"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "ds-input",
+                    value: hex,
+                    onChange: handleHexChange,
+                    "aria-label": "Hex color",
+                    style: { fontFamily: "var(--mono)", fontSize: 12, width: "100%" }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { width: 56 }, children: [
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    style: {
+                      fontFamily: "var(--mono)",
+                      fontSize: 9,
+                      color: "var(--ink-4)",
+                      fontWeight: 700,
+                      display: "block",
+                      marginBottom: 2
+                    },
+                    children: "ALPHA"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "ds-input",
+                    value: `${opacity}%`,
+                    readOnly: true,
+                    "aria-label": "Alpha opacity",
+                    style: {
+                      fontFamily: "var(--mono)",
+                      fontSize: 12,
+                      textAlign: "center",
+                      width: "100%"
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { ...labelStyle4, marginBottom: 6 }, children: "PRESETS" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 5,
+              flexWrap: "wrap",
+              marginBottom: 14
+            },
+            children: presets.map((c) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-atom-colorpicker-swatch",
+                "aria-label": `Color ${c}`,
+                "aria-pressed": color === c,
+                onClick: () => {
+                  emit(c);
+                  setHue(hexToHsv(c)[0]);
+                },
+                style: {
+                  width: 24,
+                  height: 24,
+                  borderRadius: 6,
+                  background: c,
+                  border: color === c ? "2.5px solid var(--ink)" : "1px solid var(--rule)"
+                }
+              },
+              c
+            ))
+          }
+        ),
+        TONAL_STRIPS.map((strip) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx("div", { style: labelStyle4, children: strip.label.toUpperCase() }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: 2,
+                borderRadius: 4,
+                overflow: "hidden"
+              },
+              children: strip.colors.map((c) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ds-atom-colorpicker-cell",
+                  "aria-label": `${strip.label} ${c}`,
+                  "aria-pressed": color === c,
+                  onClick: () => {
+                    emit(c);
+                    setHue(hexToHsv(c)[0]);
+                  },
+                  style: { flex: 1, height: 18, background: c }
+                },
+                c
+              ))
+            }
+          )
+        ] }, strip.label))
+      ]
+    }
+  );
+}
+var HEX_RE2 = /^#[0-9a-fA-F]{6}$/;
+function ColorInput({
+  value,
+  onChange,
+  defaultValue = "#f59e0b",
+  label,
+  className,
+  style
+}) {
+  const initial = value ?? defaultValue;
+  const [color, setColor] = useState(initial);
+  const [hex, setHex] = useState(initial);
+  useEffect(() => {
+    if (value !== void 0 && value !== color) {
+      setColor(value);
+      setHex(value);
+    }
+  }, [value]);
+  function handleChange(e) {
+    const next = e.target.value;
+    setHex(next);
+    if (HEX_RE2.test(next)) {
+      setColor(next);
+      onChange?.(next);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: ["ds-atom-colorinput", className].filter(Boolean).join(" "), style, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "ds-label", style: { display: "block", marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-input-wrap", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: {
+            width: 28,
+            height: 28,
+            borderRadius: 6,
+            background: color,
+            border: "1px solid var(--rule)",
+            flexShrink: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ds-input",
+          value: hex,
+          onChange: handleChange,
+          "aria-label": label ?? "Color hex",
+          style: { fontFamily: "var(--mono)", fontSize: 12, flex: 1 }
+        }
+      )
+    ] })
+  ] });
+}
 function SegmentedControlInner({
   options,
   value,
@@ -3784,9 +6112,9 @@ function AccordionItem({
   const generatedId = useId();
   const headerId = `${generatedId}-h`;
   const panelId = `${generatedId}-p`;
-  const Heading = HEADING_TAGS[headingLevel];
+  const Heading4 = HEADING_TAGS[headingLevel];
   return /* @__PURE__ */ jsxs("div", { className: "ds-atom-accordion-item", "data-open": open || void 0, children: [
-    /* @__PURE__ */ jsx(Heading, { className: "ds-atom-accordion-heading", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Heading4, { className: "ds-atom-accordion-heading", children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -4927,6 +7255,366 @@ function AgendaList({
 }
 var CalendarRootForward = forwardRef(CalendarRoot);
 var Calendar = Object.assign(CalendarRootForward, { Agenda: AgendaList });
+function getPageRange(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const items = [1];
+  if (current > 3) items.push("\u2026");
+  for (let p = Math.max(2, current - 1); p <= Math.min(total - 1, current + 1); p++) {
+    items.push(p);
+  }
+  if (current < total - 2) items.push("\u2026");
+  items.push(total);
+  return items;
+}
+var Pagination = forwardRef(function Pagination2({
+  totalPages,
+  currentPage,
+  onPageChange,
+  variant = "full",
+  ariaLabel = "Pagination",
+  className,
+  style
+}, ref) {
+  const listRef = useRef(null);
+  function handleListKeyDown(e) {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const buttons = Array.from(
+      listRef.current?.querySelectorAll(
+        "button.ds-atom-pagination-btn:not(:disabled)"
+      ) ?? []
+    );
+    const focused = document.activeElement;
+    const idx = buttons.indexOf(focused);
+    if (idx === -1) return;
+    if (e.key === "ArrowLeft" && idx > 0) {
+      e.preventDefault();
+      buttons[idx - 1].focus();
+    } else if (e.key === "ArrowRight" && idx < buttons.length - 1) {
+      e.preventDefault();
+      buttons[idx + 1].focus();
+    }
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: `ds-atom-pagination${className ? ` ${className}` : ""}`,
+        style,
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-atom-pagination-icbtn",
+              "aria-label": "Previous page",
+              disabled: currentPage <= 1,
+              onClick: () => onPageChange(currentPage - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 11, "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "ds-atom-pagination-count", children: [
+            currentPage,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-atom-pagination-icbtn",
+              "aria-label": "Next page",
+              disabled: currentPage >= totalPages,
+              onClick: () => onPageChange(currentPage + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 11, "aria-hidden": true })
+            }
+          )
+        ] })
+      }
+    );
+  }
+  const pages = getPageRange(currentPage, totalPages);
+  let ellipsisCount = 0;
+  const pageItems = pages.map((p) => {
+    if (p === "\u2026") {
+      ellipsisCount += 1;
+      return { kind: "ellipsis", key: `ellipsis-${ellipsisCount}` };
+    }
+    return { kind: "page", page: p, key: `page-${p}` };
+  });
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: `ds-atom-pagination${className ? ` ${className}` : ""}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("ol", { ref: listRef, className: "ds-atom-pagination-list", onKeyDown: handleListKeyDown, children: [
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-atom-pagination-icbtn",
+              "aria-label": "Previous page",
+              disabled: currentPage <= 1,
+              onClick: () => onPageChange(currentPage - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, "aria-hidden": true })
+            }
+          ) }),
+          pageItems.map(
+            (item) => item.kind === "ellipsis" ? /* @__PURE__ */ jsx("li", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "ds-atom-pagination-ellipsis", "aria-hidden": "true", children: "\u2026" }) }, item.key) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-atom-pagination-btn",
+                "aria-label": `Page ${item.page}`,
+                "aria-current": item.page === currentPage ? "page" : void 0,
+                onClick: () => item.page !== currentPage && onPageChange(item.page),
+                children: item.page
+              }
+            ) }, item.key)
+          ),
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-atom-pagination-icbtn",
+              "aria-label": "Next page",
+              disabled: currentPage >= totalPages,
+              onClick: () => onPageChange(currentPage + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, "aria-hidden": true })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "ds-atom-pagination-label", children: [
+          "Page ",
+          currentPage,
+          " of ",
+          totalPages
+        ] })
+      ]
+    }
+  );
+});
+function cls2(base, extra) {
+  return extra ? `${base} ${extra}` : base;
+}
+var STATUS_BADGE = {
+  applied: { label: "Applied", tone: "upcoming" },
+  interviewing: { label: "Interview", tone: "done" },
+  offer: { label: "Offer", tone: "passed" },
+  rejected: { label: "Rejected", tone: "pending" }
+};
+var PRIORITY_COLOR = {
+  high: "var(--red-vivid)",
+  medium: "var(--amber-vivid)",
+  low: "var(--green-vivid)"
+};
+var DataGrid = forwardRef(function DataGrid2({
+  columns,
+  rows,
+  page = 1,
+  totalPages = 1,
+  onPageChange,
+  onSelectionChange,
+  className,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const rowIds = rows.map((r) => r.id);
+  const { sorted, sortCol, sortDir, toggleSort } = useSortableTable(rows);
+  const initialWidths = Object.fromEntries(columns.map((c) => [c.key, c.width]));
+  const { widths, startResize } = useResizableColumns(initialWidths, { minWidth: 60 });
+  const { selectedIds, isAllSelected, isIndeterminate, isSelected, toggle, toggleAll, clear } = useTableSelection(rowIds, { onSelectionChange });
+  const [focusedCell, setFocusedCell] = useState([0, 1]);
+  const tableRef = useRef(null);
+  const handleGridKeyDown = useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const totalRows = sorted.length;
+      const totalCols = columns.length + 1;
+      let [r, c] = focusedCell;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        r = Math.min(r + 1, totalRows - 1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        r = Math.max(r - 1, 0);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        c = Math.min(c + 1, totalCols - 1);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        c = Math.max(c - 1, 0);
+      } else if (e.key === " ") {
+        e.preventDefault();
+        const target = e.target;
+        const tr = target.closest("tr");
+        let rowIdx = r;
+        if (tr) {
+          const tbody = tr.parentElement;
+          if (tbody) {
+            const idx = Array.from(tbody.children).indexOf(tr);
+            if (idx >= 0) rowIdx = idx;
+          }
+        }
+        const row = sorted[rowIdx];
+        if (row) toggle(row.id);
+        return;
+      } else {
+        return;
+      }
+      setFocusedCell([r, c]);
+      const trs = tableRef.current?.querySelectorAll("tbody tr");
+      trs?.[r]?.querySelectorAll("td")?.[c]?.focus();
+    },
+    [focusedCell, sorted, columns.length, toggle, onKeyDown]
+  );
+  const selectionCount = selectedIds.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cls2("ds-atom-datagrid glass", className),
+      onKeyDown: handleGridKeyDown,
+      ...rest,
+      children: [
+        selectionCount > 0 && /* @__PURE__ */ jsxs("div", { className: "ds-atom-datagrid-bulkbar", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ds-atom-datagrid-bulkbar-count", children: [
+            selectionCount,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "xs", children: "Export" }),
+          /* @__PURE__ */ jsx(Button, { variant: "danger", size: "xs", children: "Archive" }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", style: { marginLeft: "auto" }, onClick: clear, children: "Clear" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ds-atom-datagrid-scroll", children: /* @__PURE__ */ jsxs(
+          Table.Root,
+          {
+            ref: tableRef,
+            role: "grid",
+            multiSelectable: true,
+            ariaLabel: "Job applications",
+            density: "comfortable",
+            style: { tableLayout: "fixed", width: "100%" },
+            children: [
+              /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                /* @__PURE__ */ jsx(
+                  Table.SelectAllCell,
+                  {
+                    isAllSelected,
+                    isIndeterminate,
+                    onToggleAll: toggleAll
+                  }
+                ),
+                columns.map((col) => /* @__PURE__ */ jsx(
+                  Table.HeaderCell,
+                  {
+                    sortable: col.sortable,
+                    sortDir: sortCol === col.key ? sortDir : null,
+                    onToggleSort: () => col.sortable && toggleSort(col.key),
+                    resizable: true,
+                    width: widths[col.key],
+                    onResizeStart: (e) => startResize(col.key, e),
+                    style: { textAlign: col.align ?? "left" },
+                    children: col.label
+                  },
+                  col.key
+                ))
+              ] }) }),
+              /* @__PURE__ */ jsx(Table.Body, { children: sorted.map((row, rowIdx) => /* @__PURE__ */ jsxs(Table.Row, { selected: isSelected(row.id), children: [
+                /* @__PURE__ */ jsx(
+                  Table.SelectCell,
+                  {
+                    selected: isSelected(row.id),
+                    onToggle: () => toggle(row.id),
+                    tabIndex: focusedCell[0] === rowIdx && focusedCell[1] === 0 ? 0 : -1
+                  }
+                ),
+                columns.map((col, colIdx) => {
+                  const cellTabIndex = focusedCell[0] === rowIdx && focusedCell[1] === colIdx + 1 ? 0 : -1;
+                  if (col.key === "status") {
+                    const entry = STATUS_BADGE[row[col.key]];
+                    return /* @__PURE__ */ jsx(Table.Cell, { tabIndex: cellTabIndex, children: /* @__PURE__ */ jsx(Badge, { tone: entry?.tone ?? "neutral", children: entry?.label ?? String(row[col.key]) }) }, col.key);
+                  }
+                  if (col.key === "priority") {
+                    const color = PRIORITY_COLOR[row[col.key]] ?? "var(--ink-4)";
+                    return /* @__PURE__ */ jsx(Table.Cell, { tabIndex: cellTabIndex, children: /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-part": "priority-dot",
+                              style: {
+                                width: 6,
+                                height: 6,
+                                borderRadius: "50%",
+                                background: color,
+                                flexShrink: 0,
+                                display: "inline-block"
+                              },
+                              "aria-hidden": "true"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 12,
+                                textTransform: "capitalize"
+                              },
+                              children: String(row[col.key])
+                            }
+                          )
+                        ]
+                      }
+                    ) }, col.key);
+                  }
+                  return /* @__PURE__ */ jsx(
+                    Table.Cell,
+                    {
+                      tabIndex: cellTabIndex,
+                      style: { textAlign: col.align ?? "left" },
+                      children: String(row[col.key] ?? "")
+                    },
+                    col.key
+                  );
+                })
+              ] }, String(row.id))) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-atom-datagrid-footer", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ds-atom-datagrid-footer-count", children: [
+            rows.length,
+            " rows"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              totalPages,
+              currentPage: page,
+              onPageChange: onPageChange ?? (() => {
+              }),
+              variant: "full",
+              ariaLabel: "DataGrid pagination"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
 
 // node_modules/highlight.js/es/languages/css.js
 var MODES = (hljs) => {
@@ -8109,10 +10797,12 @@ var RichText = forwardRef(function RichText2({
       // then we add our own configured versions below (avoids "Duplicate extension" warning).
       StarterKit.configure({ link: false, underline: false, codeBlock: false }),
       CodeBlockLowlight.configure({ lowlight, defaultLanguage: "plaintext" }),
-      Link.configure({ openOnClick: false, autolink: true }),
+      Link4.configure({ openOnClick: false, autolink: true }),
       Placeholder.configure({ placeholder: placeholder ?? "" }),
       // NOTE: UnderlineExtension - renamed import to avoid collision with Underline icon
-      UnderlineExtension
+      UnderlineExtension,
+      // NOTE: HighlightExtension - multicolor:false keeps output as plain <mark>
+      HighlightExtension.configure({ multicolor: false })
     ],
     content: value,
     editable: !readOnly,
@@ -8184,6 +10874,18 @@ var RichText = forwardRef(function RichText2({
         children: /* @__PURE__ */ jsx(Underline, { size: 16 })
       }
     ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        "aria-label": "Highlight",
+        "aria-pressed": isActive("highlight"),
+        "data-active": isActive("highlight") || void 0,
+        onClick: () => editor?.chain().focus().toggleHighlight().run(),
+        children: /* @__PURE__ */ jsx(Highlighter, { size: 16 })
+      }
+    ),
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -8715,58 +11417,6 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "Footer";
-var STRENGTH_LABELS = ["", "Weak", "Fair", "Good", "Strong"];
-function segmentColor(index, score) {
-  if (score === 0 || index >= score) return "var(--ink-5)";
-  if (score === 1) return "var(--red)";
-  if (score === 4) return "var(--green-vivid)";
-  return "var(--amber)";
-}
-function labelColor(score) {
-  if (score <= 0) return "var(--ink-4)";
-  if (score === 1) return "var(--red)";
-  if (score <= 3) return "var(--amber-d)";
-  return "var(--green-vivid)";
-}
-function PasswordStrength({ score, className, style }) {
-  const label = STRENGTH_LABELS[score];
-  return /* @__PURE__ */ jsxs("div", { className: ["ds-atom-pwstrength", className].filter(Boolean).join(" "), style, children: [
-    /* @__PURE__ */ jsx("div", { className: "ds-atom-pwstrength-segs", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "ds-atom-pwstrength-seg",
-        style: { background: segmentColor(i, score) }
-      },
-      i
-    )) }),
-    label && /* @__PURE__ */ jsx("span", { className: "ds-atom-pwstrength-label", style: { color: labelColor(score) }, children: label })
-  ] });
-}
-function FieldError({ message, className }) {
-  if (!message) return null;
-  return /* @__PURE__ */ jsx("span", { role: "alert", className: ["ds-atom-field-error", className].filter(Boolean).join(" "), children: message });
-}
-function FormErrorSummary({
-  errors,
-  title = "Please fix the following errors:",
-  className
-}) {
-  if (errors.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "alert",
-      className: ["ds-atom-form-error-summary", className].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsx("strong", { children: title }),
-        /* @__PURE__ */ jsx("ul", { children: errors.map((err, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: static error list - order is stable and no unique IDs available
-          /* @__PURE__ */ jsx("li", { children: err }, i)
-        )) })
-      ]
-    }
-  );
-}
 function readDismissed(storageKey) {
   if (typeof window === "undefined") return false;
   if (!storageKey) return false;
@@ -9195,6 +11845,6 @@ function Sortable({ items, onReorder, renderItem, id, className, style }) {
   );
 }
 
-export { Accordion2 as Accordion, AlertBanner, AppBar, AppShell, Autocomplete, Avatar, AvatarStack, Badge, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, Coachmark, ConfirmDialog, ContextMenu, CopyToClipboard, DSPortal, DatePicker, DateRangePicker, EmptyState, FieldError, Footer, FormErrorSummary, HoverCard, InfiniteList, InlineConfirm, InlineEdit, Lightbox, Modal, MultiSelect, NumberStepper, PasswordStrength, Popover, ProgressBar, Radio, RadioGroup, RangeSlider, RichText, RollingNumber, SearchAndFilters, SegmentedControl, Select, Sheet, Skeleton, Sortable, SortableDndContext, SortableItem, SplitButton, StarRating, StickyNote, Table, Tabs, TextInput, Textarea, Timeline, ToastProvider, Toggle, Tooltip, Wizard, deriveGradient, deriveInitials, useToast };
+export { Accordion2 as Accordion, AlertBanner, AppBar, AppShell, Autocomplete, Avatar, AvatarStack, Badge, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, Coachmark, ColorInput, ColorPicker, CommandPalette, ConfirmDialog, ContextMenu, CopyToClipboard, DSPortal, DataGrid, DatePicker, DateRangePicker, Divider, DotGrid, EmptyState, Eyebrow, FieldError, FileInput, Footer, FormErrorSummary, Heading, HoverCard, InfiniteList, InlineConfirm, InlineEdit, InlineEditField, Kbd, Lightbox, Link, MiniBar, MiniDonut, Modal, MultiSelect, NumberStepper, OAuthButton, Pagination, PasswordStrength, Popover, ProgressBar, Radio, RadioGroup, RangeSlider, RelativeTime, RichText, RollingNumber, SearchAndFilters, SegmentedControl, Select, Sheet, Skeleton, SnackbarProvider, Sortable, SortableDndContext, SortableItem, Sparkline, SplitButton, SplitHero, StarRating, StatCard, StatusPill, StickyNote, Table, Tabs, Text, TextInput, Textarea, Timeline, ToastProvider, Toggle, Tooltip, TypeToConfirm, Wizard, deriveGradient, deriveInitials, useSnackbar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map