twico-ui 1.7.0 → 1.8.0

package/dist/index.mjs

@@ -1,32 +1,36 @@
 "use client";
-import * as React36 from 'react';
-import React36__default from 'react';
+import * as React37 from 'react';
+import React37__default from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // components/TwicoProvider.jsx
-var SUPPORTS_STYLE_HOIST = parseInt(String(React36.version), 10) >= 19;
-var NonceContext = React36.createContext(void 0);
+var SUPPORTS_STYLE_HOIST = parseInt(String(React37.version), 10) >= 19;
+var NonceContext = React37.createContext(void 0);
 function useScopedStyles(id, css) {
-  const nonce = React36.useContext(NonceContext);
-  React36.useInsertionEffect(() => {
+  const nonce = React37.useContext(NonceContext);
+  React37.useInsertionEffect(() => {
     if (SUPPORTS_STYLE_HOIST) return;
-    if (typeof document === "undefined" || document.getElementById(id)) return;
-    const el = document.createElement("style");
-    el.id = id;
-    if (nonce) {
-      el.setAttribute("nonce", nonce);
-      el.nonce = nonce;
-    }
-    el.textContent = css;
-    document.head.appendChild(el);
+    if (typeof document === "undefined") return;
+    if (!css) return;
+    let el = document.getElementById(id);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = id;
+      if (nonce) {
+        el.setAttribute("nonce", nonce);
+        el.nonce = nonce;
+      }
+      document.head.appendChild(el);
+    }
+    if (el.textContent !== css) el.textContent = css;
   }, [id, css, nonce]);
-  return SUPPORTS_STYLE_HOIST ? React36.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+  return SUPPORTS_STYLE_HOIST && css ? React37.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
 }
 
 // components/TwicoProvider.jsx
 function TwicoProvider({ nonce, children }) {
-  return React36__default.createElement(NonceContext.Provider, { value: nonce }, children);
+  return React37__default.createElement(NonceContext.Provider, { value: nonce }, children);
 }
 var GROUPS = { colors: "color", space: "space", radius: "radius", font: "font", shadow: "shadow", motion: "" };
 function createTheme(partial = {}) {
@@ -46,8 +50,8 @@ function toVars(theme) {
   return Object.keys(theme).some((k) => k.startsWith("--")) ? theme : createTheme(theme);
 }
 function ThemeProvider({ theme, mode = "inline", className = "", style, children, ...rest }) {
-  const vars = React36__default.useMemo(() => toVars(theme), [theme]);
-  const uid = React36__default.useId();
+  const vars = React37__default.useMemo(() => toVars(theme), [theme]);
+  const uid = React37__default.useId();
   const scopeId = `twc-theme-${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
   const css = mode === "stylesheet" ? `[data-twc-theme="${scopeId}"] { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }` : "";
   const __twcStyles = useScopedStyles(mode === "stylesheet" ? scopeId : "twc-theme-noop", css);
@@ -69,7 +73,7 @@ var FORM_CSS = `
 .twc-form { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
 .twc-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
 `;
-var Form = React36__default.forwardRef(function Form2({
+var Form = React37__default.forwardRef(function Form2({
   onSubmit,
   preventDefault = true,
   loading = false,
@@ -104,7 +108,7 @@ Form.displayName = "Form";
 var VH_CSS = `
 .twc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
 `;
-var VisuallyHidden = React36__default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
+var VisuallyHidden = React37__default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
   const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
   return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-visually-hidden ${className}`.trim(), ...rest, children: [
     __twcStyles,
@@ -113,10 +117,10 @@ var VisuallyHidden = React36__default.forwardRef(function VisuallyHidden2({ as:
 });
 VisuallyHidden.displayName = "VisuallyHidden";
 var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsoLayoutEffect = canUseDOM ? React36__default.useLayoutEffect : React36__default.useEffect;
+var useIsoLayoutEffect = canUseDOM ? React37__default.useLayoutEffect : React37__default.useEffect;
 var FOCUSABLE = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
 function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus } = {}) {
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!active || !canUseDOM) return void 0;
     const node = ref.current;
     if (!node) return void 0;
@@ -127,7 +131,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
       if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
     };
   }, [active]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!active || !canUseDOM) return void 0;
     const node = ref.current;
     const onKey = (e) => {
@@ -154,7 +158,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
   }, [active]);
 }
 function usePortal() {
-  return React36__default.useCallback((node) => {
+  return React37__default.useCallback((node) => {
     if (typeof document === "undefined") return null;
     return typeof createPortal === "function" ? createPortal(node, document.body) : node;
   }, []);
@@ -182,7 +186,7 @@ function useScrollLock(locked = true) {
   }, [locked]);
 }
 function useInertBackground(ref, active) {
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!active || !canUseDOM) return void 0;
     const node = ref.current;
     if (!node) return void 0;
@@ -214,7 +218,7 @@ function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class",
   return `(function(){try{var k=${k},a=${a},d=${d},t=localStorage.getItem(k);if(t!=='light'){if(t!=='dark'){t=d?d:(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}if(a==='class'){document.documentElement.classList.toggle('dark',t==='dark');}else{document.documentElement.setAttribute(a,t);}}catch(e){}})();`;
 }
 function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
-  return React36__default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
+  return React37__default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
 }
 var KBD_CSS = `
 .twc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px;
@@ -222,7 +226,7 @@ var KBD_CSS = `
   background: var(--color-surface-sunken); border: var(--border-thin) solid var(--color-border);
   border-bottom-width: 2px; border-radius: var(--radius-sm); }
 `;
-var Kbd = React36__default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
+var Kbd = React37__default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
   const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
   return /* @__PURE__ */ jsxs("kbd", { ref, className: `twc-kbd ${className}`.trim(), ...rest, children: [
     __twcStyles,
@@ -237,7 +241,7 @@ var PRE_CSS = `
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
   white-space: pre; -webkit-overflow-scrolling: touch; }
 `;
-var Pre = React36__default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
+var Pre = React37__default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
   const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
   return /* @__PURE__ */ jsxs("pre", { ref, className: `twc-pre ${className}`.trim(), ...rest, children: [
     __twcStyles,
@@ -257,7 +261,7 @@ function safeHref(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Anchor = React36__default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
+var Anchor = React37__default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
   const __twcStyles = useScopedStyles("twc-anchor-styles", ANCHOR_CSS);
   const extra = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
   return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
@@ -273,7 +277,7 @@ var LABEL_CSS = `
 .twc-label[data-size="lg"] { font-size: var(--text-base); }
 .twc-label__req { color: var(--color-danger); }
 `;
-var Label = React36__default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
+var Label = React37__default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
   const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
   return /* @__PURE__ */ jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
     __twcStyles,
@@ -286,7 +290,7 @@ var IMAGE_CSS = `
 .twc-image { display: block; max-width: 100%; }
 .twc-image[data-fit] { width: 100%; height: 100%; }
 `;
-var Image = React36__default.forwardRef(function Image2({
+var Image = React37__default.forwardRef(function Image2({
   src,
   alt,
   fit,
@@ -300,7 +304,7 @@ var Image = React36__default.forwardRef(function Image2({
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
-  const [failed, setFailed] = React36__default.useState(false);
+  const [failed, setFailed] = React37__default.useState(false);
   const shownSrc = failed && fallback ? fallback : src;
   const s = {
     objectFit: fit,
@@ -369,10 +373,10 @@ function Accordion({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
-  const rootRef = React36__default.useRef(null);
-  const [internal, setInternal] = React36__default.useState(() => new Set(defaultOpen));
+  const rootRef = React37__default.useRef(null);
+  const [internal, setInternal] = React37__default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React36__default.useId();
+  const baseId = React37__default.useId();
   function toggle(val) {
     const item = items.find((x) => x.value === val);
     if (item?.disabled) return;
@@ -558,7 +562,7 @@ function Avatar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
-  const [errored, setErrored] = React36__default.useState(false);
+  const [errored, setErrored] = React37__default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
   const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
@@ -636,25 +640,25 @@ function Menu({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
-  const [openState, setOpenState] = React36__default.useState(defaultOpen);
-  const [render, setRender] = React36__default.useState(false);
-  const [pos, setPos] = React36__default.useState(null);
-  const [active, setActive] = React36__default.useState(-1);
-  const wrapRef = React36__default.useRef(null);
-  const menuRef = React36__default.useRef(null);
-  const typeBufRef = React36__default.useRef("");
-  const typeTimerRef = React36__default.useRef(null);
-  const menuId = React36__default.useId();
+  const [openState, setOpenState] = React37__default.useState(defaultOpen);
+  const [render, setRender] = React37__default.useState(false);
+  const [pos, setPos] = React37__default.useState(null);
+  const [active, setActive] = React37__default.useState(-1);
+  const wrapRef = React37__default.useRef(null);
+  const menuRef = React37__default.useRef(null);
+  const typeBufRef = React37__default.useRef("");
+  const typeTimerRef = React37__default.useRef(null);
+  const menuId = React37__default.useId();
   const headerId = `${menuId}-header`;
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React36__default.useRef(open);
+  const openRef = React37__default.useRef(open);
   openRef.current = open;
-  const controlledRef = React36__default.useRef(controlled);
+  const controlledRef = React37__default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React36__default.useRef(onOpenChange);
+  const onOpenChangeRef = React37__default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React36__default.useCallback((next) => {
+  const setOpen = React37__default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -662,7 +666,7 @@ function Menu({
   }, []);
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -677,7 +681,7 @@ function Menu({
     const avail = (flip ? r.top : vh - r.bottom) - gap - M;
     setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
   }, [align, width]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -695,7 +699,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -818,7 +822,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React36__default.isValidElement(trigger) ? React36__default.cloneElement(trigger, {
+  const triggerEl = React37__default.isValidElement(trigger) ? React37__default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -983,7 +987,7 @@ function Breadcrumb({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
-  const [expanded, setExpanded] = React36__default.useState(false);
+  const [expanded, setExpanded] = React37__default.useState(false);
   const sep = separator || /* @__PURE__ */ jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -996,7 +1000,7 @@ function Breadcrumb({
     __twcStyles,
     display.map((it, i) => {
       const last = i === display.length - 1;
-      return /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React37__default.Fragment, { children: [
         it.ellipsis ? /* @__PURE__ */ jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxs(
           "span",
           {
@@ -1138,7 +1142,7 @@ function Button({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React36__default.useState([]);
+  const [ripples, setRipples] = React37__default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -1193,6 +1197,122 @@ function Button({
     }
   );
 }
+var UNITLESS = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexPositive",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+  "scale"
+]);
+var isObject = (v) => v != null && typeof v === "object" && !Array.isArray(v);
+var isNestedKey = (k, v) => isObject(v) || k.charCodeAt(0) === 38 || k.charCodeAt(0) === 64 || k.charCodeAt(0) === 58;
+function kebab(prop) {
+  if (prop.startsWith("--")) return prop;
+  return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function cssValue(key, value) {
+  if (typeof value !== "number") return String(value);
+  if (value === 0 || key.startsWith("--") || UNITLESS.has(key)) return String(value);
+  return `${value}px`;
+}
+function resolveSelector(key, scope) {
+  if (key.includes("&")) return key.replace(/&/g, scope);
+  if (key.charCodeAt(0) === 58) return `${scope}${key}`;
+  return `${scope} ${key}`;
+}
+function compileSx(obj, selector) {
+  if (!isObject(obj)) return "";
+  let decls = "";
+  let rules = "";
+  for (const key of Object.keys(obj)) {
+    const value = obj[key];
+    if (isNestedKey(key, value)) {
+      if (!isObject(value)) continue;
+      if (key.charCodeAt(0) === 64) {
+        const inner = compileSx(value, selector);
+        if (inner) rules += `${key} { ${inner.trim()} }
+`;
+      } else {
+        rules += compileSx(value, resolveSelector(key, selector));
+      }
+    } else {
+      decls += `${kebab(key)}: ${cssValue(key, value)}; `;
+    }
+  }
+  let out = "";
+  if (decls) out += `${selector} { ${decls.trimEnd()} }
+`;
+  out += rules;
+  return out;
+}
+function buildSx(sx, uid) {
+  if (!isObject(sx)) return { flatStyle: void 0, css: "" };
+  const scope = `[data-twc-sx="${uid}"]`;
+  let flatStyle;
+  let css = "";
+  for (const key of Object.keys(sx)) {
+    const value = sx[key];
+    if (isNestedKey(key, value)) {
+      if (!isObject(value)) continue;
+      if (key.charCodeAt(0) === 64) {
+        const inner = compileSx(value, scope);
+        if (inner) css += `${key} { ${inner.trim()} }
+`;
+      } else {
+        css += compileSx(value, resolveSelector(key, scope));
+      }
+    } else {
+      (flatStyle || (flatStyle = {}))[key] = value;
+    }
+  }
+  return { flatStyle, css };
+}
+function useSx(sx) {
+  const rawId = React37__default.useId();
+  const uid = `sx${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+  const { flatStyle, css } = React37__default.useMemo(() => buildSx(sx, uid), [sx, uid]);
+  const styleNode = useScopedStyles(`twc-sx-${uid}`, css);
+  return { flatStyle, styleNode, sxAttr: css ? uid : void 0 };
+}
 var CARD_CSS = `
 .twc-card {
   display: flex; flex-direction: column;
@@ -1232,10 +1352,13 @@ function Card({
   padding = "md",
   interactive = false,
   fullHeight = false,
+  sx,
   className = "",
+  style,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-card-styles", CARD_CSS);
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1244,9 +1367,12 @@ function Card({
       "data-pad": padding,
       "data-interactive": interactive || void 0,
       "data-full": fullHeight || void 0,
+      "data-twc-sx": sxAttr,
+      style: style || flatStyle ? { ...style, ...flatStyle } : void 0,
       ...rest,
       children: [
         __twcStyles,
+        styleNode,
         title || subtitle || actions ? /* @__PURE__ */ jsxs("div", { className: "twc-card__header", children: [
           /* @__PURE__ */ jsxs("div", { className: "twc-card__heading", children: [
             title ? /* @__PURE__ */ jsx("div", { className: "twc-card__title", children: title }) : null,
@@ -1312,14 +1438,14 @@ function Carousel({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
-  const slides = React36__default.Children.toArray(children);
+  const slides = React37__default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React36__default.useState(defaultIndex);
+  const [internal, setInternal] = React37__default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React36__default.useState(false);
-  const [userPaused, setUserPaused] = React36__default.useState(false);
-  const [prefersReduced, setPrefersReduced] = React36__default.useState(false);
-  React36__default.useEffect(() => {
+  const [paused, setPaused] = React37__default.useState(false);
+  const [userPaused, setUserPaused] = React37__default.useState(false);
+  const [prefersReduced, setPrefersReduced] = React37__default.useState(false);
+  React37__default.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
     const on = () => setPrefersReduced(mql.matches);
@@ -1327,15 +1453,15 @@ function Carousel({
     mql.addEventListener("change", on);
     return () => mql.removeEventListener("change", on);
   }, []);
-  const setIndex = React36__default.useCallback((i) => {
+  const setIndex = React37__default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React36__default.useCallback((i) => {
+  const go = React37__default.useCallback((i) => {
     setIndex(loop ? (i + count) % count : Math.min(Math.max(i, 0), count - 1));
   }, [count, loop, setIndex]);
   const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!autoRotating) return void 0;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -1430,7 +1556,7 @@ function Chart({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
-  const uid = React36__default.useId();
+  const uid = React37__default.useId();
   const tableId = tableFallback ? `${uid}-table` : void 0;
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
@@ -1586,13 +1712,13 @@ function Checkbox({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React36__default.useRef(null);
+  const ref = React37__default.useRef(null);
   const mixed = indeterminate && !checked;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (ref.current) ref.current.indeterminate = mixed;
   }, [mixed]);
   if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
@@ -1665,6 +1791,10 @@ var COLORPICKER_CSS = `
 .twc-cp__hue { position: relative; height: 12px; margin-top: var(--space-3); border-radius: var(--radius-full); cursor: pointer; touch-action: none;
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
 .twc-cp__hue-knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-sm), inset 0 0 0 1px rgb(0 0 0 / 0.2); transform: translate(-50%, -50%); pointer-events: none; }
+.twc-cp__alpha { position: relative; height: 12px; margin-top: var(--space-2); border-radius: var(--radius-full); cursor: pointer; touch-action: none;
+  background-image: linear-gradient(to right, transparent, var(--_solid, #000)), conic-gradient(#c8c8c8 0 25%, #fff 0 50%, #c8c8c8 0 75%, #fff 0);
+  background-size: 100% 100%, 10px 10px; }
+.twc-cp__alpha:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-cp__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
 .twc-cp__hex { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
   color: var(--color-text); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); outline: none; }
@@ -1702,11 +1832,17 @@ function rgbToHex(r, g, b) {
 function hsvToHex(h, s, v) {
   return rgbToHex(...hsvToRgb(h, s, v));
 }
+function hsvaToHex8(h, s, v, a) {
+  return rgbToHex(...hsvToRgb(h, s, v)) + Math.round(Math.min(1, Math.max(0, a)) * 255).toString(16).padStart(2, "0");
+}
 function hexToHsv(hex) {
-  const m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+  let str = String(hex || "").replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(str)) str = str.split("").map((c) => c + c).join("");
+  const m = /^([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(str);
   if (!m) return null;
   const int = parseInt(m[1], 16);
   const r = (int >> 16) / 255, g = (int >> 8 & 255) / 255, b = (int & 255) / 255;
+  const a = m[2] != null ? parseInt(m[2], 16) / 255 : 1;
   const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
   let h = 0;
   if (d) {
@@ -1716,7 +1852,7 @@ function hexToHsv(hex) {
     h *= 60;
     if (h < 0) h += 360;
   }
-  return { h, s: max ? d / max * 100 : 0, v: max * 100 };
+  return { h, s: max ? d / max * 100 : 0, v: max * 100, a };
 }
 var DEFAULT_PRESETS = ["#6366F1", "#0EA5E9", "#14B8A6", "#22C55E", "#F59E0B", "#F43F5E", "#8B5CF6", "#0F172A"];
 function ColorPicker({
@@ -1728,6 +1864,7 @@ function ColorPicker({
   defaultValue = "#6366F1",
   presets = DEFAULT_PRESETS,
   disabled = false,
+  alpha = false,
   tone = "primary",
   onChange,
   className = "",
@@ -1735,20 +1872,22 @@ function ColorPicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React36__default.useRef(hex);
-  if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React36__default.useState(false);
-  const [hsv, setHsv] = React36__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React36__default.useState(null);
-  const wrapRef = React36__default.useRef(null);
-  const triggerRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const areaRef = React36__default.useRef(null);
-  const hueRef = React36__default.useRef(null);
+  const hexRe = alpha ? /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i : /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+  const lastValidRef = React37__default.useRef(hex);
+  if (hexRe.test(hex)) lastValidRef.current = hex;
+  const [open, setOpen] = React37__default.useState(false);
+  const [hsv, setHsv] = React37__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
+  const [coords, setCoords] = React37__default.useState(null);
+  const wrapRef = React37__default.useRef(null);
+  const triggerRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const areaRef = React37__default.useRef(null);
+  const hueRef = React37__default.useRef(null);
+  const alphaRef = React37__default.useRef(null);
   const POP_W = 240;
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1759,7 +1898,7 @@ function ColorPicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1770,17 +1909,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React36__default.useId();
+  const labelId = React37__default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     const v = hexToHsv(hex);
     if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
   }, [hex]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1799,10 +1938,10 @@ function ColorPicker({
   }, [open]);
   useFocusTrap(popRef, open && !!coords, { initialFocus: areaRef });
   const commit = (next) => {
-    const h = hsvToHex(next.h, next.s, next.v);
+    const out = alpha ? hsvaToHex8(next.h, next.s, next.v, next.a ?? 1) : hsvToHex(next.h, next.s, next.v);
     setHsv(next);
-    if (value === void 0) setInternal(h);
-    onChange?.(h);
+    if (value === void 0) setInternal(out);
+    onChange?.(out);
   };
   const dragArea = (e) => {
     const r = areaRef.current.getBoundingClientRect();
@@ -1846,6 +1985,21 @@ function ColorPicker({
     e.preventDefault();
     commit({ ...hsv, h });
   };
+  const dragAlpha = (e) => {
+    const r = alphaRef.current.getBoundingClientRect();
+    const a = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
+    commit({ ...hsv, a });
+  };
+  const onAlphaKeyDown = (e) => {
+    let a = hsv.a ?? 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") a = Math.min(1, a + 0.01);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") a = Math.max(0, a - 0.01);
+    else if (e.key === "Home") a = 0;
+    else if (e.key === "End") a = 1;
+    else return;
+    e.preventDefault();
+    commit({ ...hsv, a: Math.round(a * 100) / 100 });
+  };
   return /* @__PURE__ */ jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, children: [
     __twcStyles0,
     __twcStyles1,
@@ -1932,6 +2086,23 @@ function ColorPicker({
                 children: /* @__PURE__ */ jsx("span", { className: "twc-cp__hue-knob", style: { left: `${hsv.h / 360 * 100}%` } })
               }
             ),
+            alpha ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "twc-cp__alpha",
+                ref: alphaRef,
+                onPointerDown: startDrag(dragAlpha),
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": "Alpha",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round((hsv.a ?? 1) * 100),
+                onKeyDown: onAlphaKeyDown,
+                style: { "--_solid": hsvToHex(hsv.h, hsv.s, hsv.v) },
+                children: /* @__PURE__ */ jsx("span", { className: "twc-cp__hue-knob", style: { left: `${(hsv.a ?? 1) * 100}%` } })
+              }
+            ) : null,
             /* @__PURE__ */ jsxs("div", { className: "twc-cp__foot", children: [
               /* @__PURE__ */ jsx("span", { className: "twc-cp__swatch", style: { background: hex } }),
               /* @__PURE__ */ jsx(
@@ -1940,10 +2111,10 @@ function ColorPicker({
                   className: "twc-cp__hex",
                   "data-tone": tone,
                   value: hex,
-                  maxLength: 7,
+                  maxLength: alpha ? 9 : 7,
                   "aria-label": "Hex color",
-                  "aria-invalid": !/^#[0-9a-f]{6}$/i.test(hex) || void 0,
-                  "data-invalid": !/^#[0-9a-f]{6}$/i.test(hex) || void 0,
+                  "aria-invalid": !hexRe.test(hex) || void 0,
+                  "data-invalid": !hexRe.test(hex) || void 0,
                   onChange: (e) => {
                     let v = e.target.value;
                     if (!v.startsWith("#")) v = "#" + v;
@@ -1953,7 +2124,7 @@ function ColorPicker({
                     if (p) setHsv(p);
                   },
                   onBlur: () => {
-                    if (/^#[0-9a-f]{6}$/i.test(hex)) return;
+                    if (hexRe.test(hex)) return;
                     const revert = lastValidRef.current;
                     if (revert === hex) return;
                     if (value === void 0) setInternal(revert);
@@ -2111,6 +2282,8 @@ function Combobox({
   loading = false,
   emptyText = "No results found",
   name,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onFocus,
@@ -2118,29 +2291,51 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  const groups = React36__default.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React36__default.useId();
+  const groups = React37__default.useMemo(() => normalizeGroups(options), [options]);
+  const flat = React37__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React36__default.useState(false);
-  const [query, setQuery] = React36__default.useState("");
-  const [active, setActive] = React36__default.useState(0);
-  const [coords, setCoords] = React36__default.useState(null);
-  const wrapRef = React36__default.useRef(null);
-  const controlRef = React36__default.useRef(null);
-  const inputRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const listRef = React36__default.useRef(null);
-  const activeRef = React36__default.useRef(null);
-  const fGroups = React36__default.useMemo(() => {
+  const [open, setOpen] = React37__default.useState(false);
+  const [query, setQuery] = React37__default.useState("");
+  const [active, setActive] = React37__default.useState(0);
+  const [coords, setCoords] = React37__default.useState(null);
+  const [scrollTop, setScrollTop] = React37__default.useState(0);
+  const [listH, setListH] = React37__default.useState(260);
+  const wrapRef = React37__default.useRef(null);
+  const controlRef = React37__default.useRef(null);
+  const inputRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const listRef = React37__default.useRef(null);
+  const activeRef = React37__default.useRef(null);
+  const fGroups = React37__default.useMemo(() => {
     const q = query.trim();
     const fn = filter === false ? null : typeof filter === "function" ? filter : matches;
     return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
   }, [groups, query, filter]);
-  const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React37__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React37__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React37__default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
     while (i >= 0 && i < visible.length) {
@@ -2149,7 +2344,7 @@ function Combobox({
     }
     return from;
   };
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2164,7 +2359,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2175,7 +2370,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -2185,17 +2380,36 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
   }, [open]);
-  React36__default.useEffect(() => {
-    if (open) ensureVisible(listRef.current, activeRef.current);
-  }, [active, open]);
+  React37__default.useEffect(() => {
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized]);
+  React37__default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   function openMenu() {
     if (disabled) return;
     setQuery("");
@@ -2240,45 +2454,60 @@ function Combobox({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
+  const renderOption = (o, idx) => {
+    const isSel = o.value === current;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: o.disabled || void 0,
+        "aria-disabled": o.disabled || void 0,
+        "data-disabled": o.disabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(idx);
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => commit(o.value),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] }),
+          isSel ? /* @__PURE__ */ jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
   let counter = -1;
-  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0, children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+    vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+    vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+  ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React37__default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
       const idx = counter;
-      const isSel = o.value === current;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          id: optionId(idx),
-          type: "button",
-          className: "twc-opt",
-          role: "option",
-          "aria-selected": isSel,
-          ref: idx === active ? activeRef : null,
-          disabled: o.disabled || void 0,
-          "aria-disabled": o.disabled || void 0,
-          "data-disabled": o.disabled || void 0,
-          "data-selected": isSel || void 0,
-          "data-active": idx === active || void 0,
-          onMouseEnter: () => {
-            if (!o.disabled) setActive(idx);
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => commit(o.value),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
-              /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
-              o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-            ] }),
-            isSel ? /* @__PURE__ */ jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
-          ]
-        },
-        o.value
-      );
+      return renderOption(o, idx);
     })
   ] }, gi)) });
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
@@ -2436,14 +2665,14 @@ function CommandPalette({
 }) {
   const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
   const renderPortal = usePortal();
-  const [query, setQuery] = React36__default.useState("");
-  const [active, setActive] = React36__default.useState(0);
-  const inputRef = React36__default.useRef(null);
-  const listRef = React36__default.useRef(null);
-  const paletteRef = React36__default.useRef(null);
-  const baseId = React36__default.useId();
-  const [mounted, setMounted] = React36__default.useState(open);
-  React36__default.useEffect(() => {
+  const [query, setQuery] = React37__default.useState("");
+  const [active, setActive] = React37__default.useState(0);
+  const inputRef = React37__default.useRef(null);
+  const listRef = React37__default.useRef(null);
+  const paletteRef = React37__default.useRef(null);
+  const baseId = React37__default.useId();
+  const [mounted, setMounted] = React37__default.useState(open);
+  React37__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -2452,14 +2681,14 @@ function CommandPalette({
     return () => clearTimeout(t);
   }, [open]);
   useScrollLock(open);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
     }
   }, [open]);
   useFocusTrap(paletteRef, open && mounted);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2471,7 +2700,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React36__default.useMemo(() => commands.filter(
+  const filtered = React37__default.useMemo(() => commands.filter(
     (c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
   ), [commands, q]);
   const groups = [];
@@ -2486,7 +2715,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2506,7 +2735,7 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
@@ -2682,13 +2911,13 @@ function Currency({
   const prec = precision != null ? precision : meta.precision;
   const sym = symbol != null ? symbol : meta.symbol;
   const cur = code != null ? code : meta.code;
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React36__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React37__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!controlled) return;
     const raw = String(value ?? "");
     if (shown !== raw) {
@@ -2875,6 +3104,8 @@ function Select({
   loading = false,
   emptyText = "No results found",
   name,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onClick,
@@ -2882,32 +3113,54 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
-  const bufferRef = React36__default.useRef("");
-  const bufferTimerRef = React36__default.useRef(null);
-  const groups = React36__default.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React36__default.useId();
+  const bufferRef = React37__default.useRef("");
+  const bufferTimerRef = React37__default.useRef(null);
+  const groups = React37__default.useMemo(() => normalizeGroups2(options), [options]);
+  const flat = React37__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React36__default.useState(false);
-  const [render, setRender] = React36__default.useState(false);
-  const [active, setActive] = React36__default.useState(0);
-  const [coords, setCoords] = React36__default.useState(null);
-  const [query, setQuery] = React36__default.useState("");
-  const wrapRef = React36__default.useRef(null);
-  const triggerRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const listRef = React36__default.useRef(null);
-  const activeRef = React36__default.useRef(null);
-  const searchRef = React36__default.useRef(null);
+  const [open, setOpen] = React37__default.useState(false);
+  const [render, setRender] = React37__default.useState(false);
+  const [active, setActive] = React37__default.useState(0);
+  const [coords, setCoords] = React37__default.useState(null);
+  const [query, setQuery] = React37__default.useState("");
+  const [scrollTop, setScrollTop] = React37__default.useState(0);
+  const [listH, setListH] = React37__default.useState(260);
+  const wrapRef = React37__default.useRef(null);
+  const triggerRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const listRef = React37__default.useRef(null);
+  const activeRef = React37__default.useRef(null);
+  const searchRef = React37__default.useRef(null);
   const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React36__default.useMemo(() => {
+  const fGroups = React37__default.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return groups;
     return groups.map((g) => ({ group: g.group, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q)) })).filter((g) => g.options.length);
   }, [groups, query]);
-  const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React37__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React37__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React37__default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const selected = flat.find((o) => o.value === current);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
@@ -2917,7 +3170,7 @@ function Select({
     }
     return from;
   };
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2933,7 +3186,7 @@ function Select({
       flip
     });
   }, [placement, minWidth, matchTriggerWidth]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2944,7 +3197,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2960,13 +3213,32 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React36__default.useEffect(() => {
-    if (open) ensureVisible2(listRef.current, activeRef.current);
-  }, [active, open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized, render]);
+  React37__default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible2(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
+  React37__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2974,8 +3246,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React36__default.useRef(false);
-  React36__default.useEffect(() => {
+  const prevOpen = React37__default.useRef(false);
+  React37__default.useEffect(() => {
     if (prevOpen.current && !open) {
       const ae = typeof document !== "undefined" ? document.activeElement : null;
       if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
@@ -3039,6 +3311,45 @@ function Select({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
+  const renderOption = (o, idx) => {
+    const isSel = o.value === current;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: o.disabled || void 0,
+        "aria-disabled": o.disabled || void 0,
+        "data-disabled": o.disabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(idx);
+        },
+        onClick: () => commit(o.value),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] }),
+          isSel ? /* @__PURE__ */ jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
   let counter = -1;
   const popInner = /* @__PURE__ */ jsxs(Fragment, { children: [
     showSearch ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__search", children: [
@@ -3066,43 +3377,19 @@ function Select({
         searchRef.current?.focus();
       }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+    /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0, children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
       /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
       "Loading\u2026"
-    ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
+    ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+      vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+      vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+    ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React37__default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
         const idx = counter;
-        const isSel = o.value === current;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            id: optionId(idx),
-            type: "button",
-            className: "twc-opt",
-            role: "option",
-            "aria-selected": isSel,
-            ref: idx === active ? activeRef : null,
-            disabled: o.disabled || void 0,
-            "aria-disabled": o.disabled || void 0,
-            "data-disabled": o.disabled || void 0,
-            "data-selected": isSel || void 0,
-            "data-active": idx === active || void 0,
-            onMouseEnter: () => {
-              if (!o.disabled) setActive(idx);
-            },
-            onClick: () => commit(o.value),
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
-                /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
-                o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-              ] }),
-              isSel ? /* @__PURE__ */ jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
-            ]
-          },
-          o.value
-        );
+        return renderOption(o, idx);
       })
     ] }, gi)) }),
     /* @__PURE__ */ jsx("div", { className: "twc-sel__sr", role: "status", "aria-live": "polite", children: loading ? "Loading\u2026" : visible.length === 0 ? emptyText : `${visible.length} result${visible.length === 1 ? "" : "s"}` })
@@ -3252,21 +3539,21 @@ function CurrencyField({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React36__default.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React37__default.useState(defaultCurrency);
   const cur = curControlled ? currency : curInternal;
   const meta = CURRENCIES[cur] || CURRENCIES.USD;
   const prec = meta.precision;
   const valControlled = value !== void 0;
-  const [valInternal, setValInternal] = React36__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React37__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
   const descId = `${fieldId}-desc`;
   const describedBy = [error || hint ? descId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!valControlled) {
       const clamped = clampPrecision(valInternal, prec);
       if (clamped !== valInternal) {
@@ -3282,7 +3569,7 @@ function CurrencyField({
       }
     }
   }, [prec, cur, shown, value, valControlled, valInternal]);
-  const options = React36__default.useMemo(() => {
+  const options = React37__default.useMemo(() => {
     if (!currencies) return CURRENCY_OPTIONS;
     return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
   }, [currencies]);
@@ -3436,13 +3723,13 @@ function Input({
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
   const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
   const countControlled = rest.value !== void 0;
-  const [len2, setLen] = React36__default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React37__default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -3454,7 +3741,7 @@ function Input({
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const isPassword = type === "password";
-  const [revealed, setRevealed] = React36__default.useState(false);
+  const [revealed, setRevealed] = React37__default.useState(false);
   const effectiveType = isPassword && revealed ? "text" : type;
   const suffix = rightIcon ? /* @__PURE__ */ jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsx(
     "button",
@@ -3648,6 +3935,8 @@ function MultiSelect({
   name,
   max,
   maxTagCount,
+  virtualized = false,
+  overscan = 8,
   id,
   className = "",
   onFocus,
@@ -3655,27 +3944,49 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
-  const groups = React36__default.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React36__default.useId();
+  const groups = React37__default.useMemo(() => normalizeGroups3(options), [options]);
+  const flat = React37__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React36__default.useState(false);
-  const [query, setQuery] = React36__default.useState("");
-  const [active, setActive] = React36__default.useState(0);
-  const [coords, setCoords] = React36__default.useState(null);
-  const wrapRef = React36__default.useRef(null);
-  const controlRef = React36__default.useRef(null);
-  const inputRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const listRef = React36__default.useRef(null);
-  const activeRef = React36__default.useRef(null);
-  const fGroups = React36__default.useMemo(
+  const [open, setOpen] = React37__default.useState(false);
+  const [query, setQuery] = React37__default.useState("");
+  const [active, setActive] = React37__default.useState(0);
+  const [coords, setCoords] = React37__default.useState(null);
+  const [scrollTop, setScrollTop] = React37__default.useState(0);
+  const [listH, setListH] = React37__default.useState(260);
+  const wrapRef = React37__default.useRef(null);
+  const controlRef = React37__default.useRef(null);
+  const inputRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const listRef = React37__default.useRef(null);
+  const activeRef = React37__default.useRef(null);
+  const fGroups = React37__default.useMemo(
     () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches2(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React37__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const rowH = React37__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
+  const GROUP_H = 30;
+  const { rows, totalH } = React37__default.useMemo(() => {
+    if (!virtualized) return { rows: [], totalH: 0 };
+    const rows2 = [];
+    let off = 0;
+    let optIdx = -1;
+    fGroups.forEach((g, gi) => {
+      if (g.group) {
+        rows2.push({ kind: "group", gi, label: g.group, top: off, h: GROUP_H });
+        off += GROUP_H;
+      }
+      g.options.forEach((o) => {
+        optIdx += 1;
+        rows2.push({ kind: "option", o, idx: optIdx, top: off, h: rowH });
+        off += rowH;
+      });
+    });
+    return { rows: rows2, totalH: off };
+  }, [virtualized, fGroups, rowH]);
   const capReached = max != null && (value !== void 0 ? value : internal).length >= max;
   const isOptDisabled = (o) => o.disabled || capReached && !(value !== void 0 ? value : internal).includes(o.value);
   const nextEnabled = (from, dir) => {
@@ -3686,7 +3997,7 @@ function MultiSelect({
     }
     return from;
   };
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3701,7 +4012,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3712,7 +4023,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3723,12 +4034,31 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React36__default.useEffect(() => {
-    if (open) ensureVisible3(listRef.current, activeRef.current);
-  }, [active, open]);
+  React37__default.useEffect(() => {
+    if (!open || !virtualized) return;
+    const el = listRef.current;
+    if (el && el.clientHeight) setListH(el.clientHeight);
+  }, [open, virtualized]);
+  React37__default.useEffect(() => {
+    if (!open) return;
+    if (!virtualized) {
+      ensureVisible3(listRef.current, activeRef.current);
+      return;
+    }
+    const el = listRef.current;
+    if (!el) return;
+    const row = rows.find((r) => r.kind === "option" && r.idx === active);
+    if (!row) return;
+    const vh = el.clientHeight || listH;
+    let next = el.scrollTop;
+    if (row.top < el.scrollTop) next = row.top;
+    else if (row.top + row.h > el.scrollTop + vh) next = row.top + row.h - vh;
+    if (next !== el.scrollTop) el.scrollTop = next;
+    setScrollTop(next);
+  }, [active, open, virtualized, rows, listH]);
   function commit(next) {
     if (value === void 0) setInternal(next);
     onChange?.(next);
@@ -3765,48 +4095,74 @@ function MultiSelect({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  let counter = -1;
-  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
-    /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
-    "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
-    g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
-    g.options.map((o) => {
-      counter += 1;
-      const idx = counter;
-      const isSel = selected.includes(o.value);
-      const optDisabled = isOptDisabled(o);
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          id: optionId(idx),
-          type: "button",
-          className: "twc-opt",
-          role: "option",
-          "aria-selected": isSel,
-          ref: idx === active ? activeRef : null,
-          disabled: optDisabled || void 0,
-          "aria-disabled": optDisabled || void 0,
-          "data-disabled": optDisabled || void 0,
-          "data-selected": isSel || void 0,
-          "data-active": idx === active || void 0,
-          onMouseEnter: () => {
-            if (!optDisabled) setActive(idx);
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => toggle(o.value),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-            /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
-              /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
-              o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
-            ] })
-          ]
+  const renderOption = (o, idx) => {
+    const isSel = selected.includes(o.value);
+    const optDisabled = isOptDisabled(o);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: optionId(idx),
+        type: "button",
+        className: "twc-opt",
+        role: "option",
+        "aria-selected": isSel,
+        ref: idx === active ? activeRef : null,
+        disabled: optDisabled || void 0,
+        "aria-disabled": optDisabled || void 0,
+        "data-disabled": optDisabled || void 0,
+        "data-selected": isSel || void 0,
+        "data-active": idx === active || void 0,
+        onMouseEnter: () => {
+          if (!optDisabled) setActive(idx);
         },
-        o.value
-      );
-    })
-  ] }, gi)) });
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => toggle(o.value),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+          /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
+            /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
+            o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          ] })
+        ]
+      },
+      o.value
+    );
+  };
+  let vTop = 0, vBottom = 0, vShown = rows;
+  if (virtualized && rows.length) {
+    const winTop = scrollTop - overscan * rowH;
+    const winBottom = scrollTop + listH + overscan * rowH;
+    vShown = rows.filter((r) => r.top + r.h > winTop && r.top < winBottom);
+    vTop = vShown.length ? vShown[0].top : 0;
+    vBottom = vShown.length ? totalH - (vShown[vShown.length - 1].top + vShown[vShown.length - 1].h) : totalH;
+  }
+  let counter = -1;
+  const popInner = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "twc-pop__list",
+      id: listboxId,
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": "true",
+      onScroll: virtualized ? (e) => setScrollTop(e.currentTarget.scrollTop) : void 0,
+      children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
+        /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
+        "Loading\u2026"
+      ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
+        vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
+        vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
+      ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React37__default.Fragment, { children: [
+        g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
+        g.options.map((o) => {
+          counter += 1;
+          const idx = counter;
+          return renderOption(o, idx);
+        })
+      ] }, gi))
+    }
+  );
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const canPortal = portal && RD && RD.createPortal;
   let popEl = null;
@@ -3999,7 +4355,7 @@ function Pagination({
   }
   const jumperEnabled = showPageJumper ?? showJumper;
   const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
-  const [internal, setInternal] = React36__default.useState(defaultPage);
+  const [internal, setInternal] = React37__default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -4007,7 +4363,7 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React36__default.useState("");
+  const [jump, setJump] = React37__default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -4090,13 +4446,13 @@ function Tooltip({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React36__default.useId();
-  const [show, setShow] = React36__default.useState(false);
-  const [coords, setCoords] = React36__default.useState(null);
-  const timer = React36__default.useRef(null);
-  const closeTimer = React36__default.useRef(null);
-  const wrapRef = React36__default.useRef(null);
-  const tipRef = React36__default.useRef(null);
+  const id = React37__default.useId();
+  const [show, setShow] = React37__default.useState(false);
+  const [coords, setCoords] = React37__default.useState(null);
+  const timer = React37__default.useRef(null);
+  const closeTimer = React37__default.useRef(null);
+  const wrapRef = React37__default.useRef(null);
+  const tipRef = React37__default.useRef(null);
   const open = () => {
     clearTimeout(closeTimer.current);
     clearTimeout(timer.current);
@@ -4110,11 +4466,11 @@ function Tooltip({
   const cancelClose = () => {
     clearTimeout(closeTimer.current);
   };
-  React36__default.useEffect(() => () => {
+  React37__default.useEffect(() => () => {
     clearTimeout(timer.current);
     clearTimeout(closeTimer.current);
   }, []);
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = wrapRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -4137,10 +4493,10 @@ function Tooltip({
     else if (side === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
     else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
   }, [placement]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     place();
   }, [place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!show) return void 0;
     place();
     const onMove = () => place();
@@ -4151,7 +4507,7 @@ function Tooltip({
       window.removeEventListener("resize", onMove);
     };
   }, [show, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!show) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -4163,7 +4519,7 @@ function Tooltip({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [show]);
   const describedBy = show ? id : void 0;
-  const trigger = React36__default.isValidElement(children) && children.type !== React36__default.Fragment ? React36__default.cloneElement(children, {
+  const trigger = React37__default.isValidElement(children) && children.type !== React37__default.Fragment ? React37__default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
   return /* @__PURE__ */ jsxs(
@@ -4767,9 +5123,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React36__default.useState(null);
-  const cfg = React36__default.useRef(null);
-  const place = React36__default.useCallback(() => {
+  const [pos, setPos] = React37__default.useState(null);
+  const cfg = React37__default.useRef(null);
+  const place = React37__default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4780,17 +5136,17 @@ function useFloating() {
     const top = r.bottom + 6;
     return { top, left, width: c.width, anchorX: r.left + r.width / 2, maxHeight: Math.max(180, vh - top - M) };
   }, []);
-  const open = React36__default.useCallback((el, align = "left", width = 220) => {
+  const open = React37__default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React36__default.useCallback(() => {
+  const close = React37__default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4814,9 +5170,9 @@ function Caret({ pos }) {
   return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
 }
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
-  const ref = React36__default.useRef(null);
+  const ref = React37__default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4980,6 +5336,9 @@ function Datatable({
   density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
+  page,
+  onPageChange,
+  onPageSizeChange,
   height = 440,
   serverMode = false,
   rowCount,
@@ -5021,7 +5380,7 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
-  const cols = React36__default.useMemo(() => {
+  const cols = React37__default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -5056,7 +5415,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React36__default.useRef();
+  const _autoKey = React37__default.useRef();
   if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
   const keyOf = rowKey || ((r, i) => {
     if (r != null && r.id != null) return r.id;
@@ -5071,17 +5430,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React36__default.useState(null);
-  const [filters, setFilters] = React36__default.useState([]);
-  const [hidden, setHidden] = React36__default.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React36__default.useState(rowNumbers);
-  const [wrapped, setWrapped] = React36__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  const [sort, setSort] = React37__default.useState(null);
+  const [filters, setFilters] = React37__default.useState([]);
+  const [hidden, setHidden] = React37__default.useState(() => /* @__PURE__ */ new Set());
+  const [showRowNum, setShowRowNum] = React37__default.useState(rowNumbers);
+  const [wrapped, setWrapped] = React37__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
   const toggleWrap = (field) => setWrapped((w) => {
     const n = new Set(w);
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
-  const [pins, setPins] = React36__default.useState(() => {
+  const [pins, setPins] = React37__default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -5089,34 +5448,47 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React36__default.useState(densityProp);
-  const [quick, setQuick] = React36__default.useState("");
-  const [selected, setSelected] = React36__default.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React36__default.useState(null);
-  const [activeCell, setActiveCell] = React36__default.useState(null);
-  const [page, setPage] = React36__default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React36__default.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React36__default.useState("");
-  const [widths, setWidths] = React36__default.useState({});
-  const [order, setOrder] = React36__default.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React36__default.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React36__default.useState(showAggregation);
-  const [focus, setFocus] = React36__default.useState({ r: 0, c: 0 });
-  const gridRef = React36__default.useRef(null);
-  const [groupBy, setGroupBy] = React36__default.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React36__default.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React36__default.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React36__default.useState(41);
-  const theadRef = React36__default.useRef(null);
-  const [rowOrder, setRowOrder] = React36__default.useState(null);
-  const [rowHeights, setRowHeights] = React36__default.useState({});
-  const [rowDrag, setRowDrag] = React36__default.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React36__default.useState(null);
-  const [reorderMsg, setReorderMsg] = React36__default.useState("");
-  const rowFocusRef = React36__default.useRef(null);
-  const rootRef = React36__default.useRef(null);
-  const [compact, setCompact] = React36__default.useState(false);
-  React36__default.useEffect(() => {
+  const [density, setDensity] = React37__default.useState(densityProp);
+  const [quick, setQuick] = React37__default.useState("");
+  const [selected, setSelected] = React37__default.useState(() => /* @__PURE__ */ new Set());
+  const [activeRow, setActiveRow] = React37__default.useState(null);
+  const [activeCell, setActiveCell] = React37__default.useState(null);
+  const [internalPage, setInternalPage] = React37__default.useState(0);
+  const [internalRpp, setInternalRpp] = React37__default.useState(pageSize > 0 ? pageSize : 10);
+  const pageControlled = page !== void 0;
+  const pageSizeControlled = onPageSizeChange !== void 0;
+  const pageVal = pageControlled ? page : internalPage;
+  const sizeVal = pageSizeControlled ? pageSize > 0 ? pageSize : 10 : internalRpp;
+  const commitPage = (next) => {
+    onPageChange?.(next);
+    if (!pageControlled) setInternalPage(next);
+  };
+  const commitPageSize = (next) => {
+    onPageSizeChange?.(next);
+    if (!pageSizeControlled) setInternalRpp(next);
+    commitPage(0);
+  };
+  const [colQuery, setColQuery] = React37__default.useState("");
+  const [widths, setWidths] = React37__default.useState({});
+  const [order, setOrder] = React37__default.useState(() => columns.map((c) => c.field));
+  const [drag, setDrag] = React37__default.useState({ from: null, over: null, after: false });
+  const [aggOn, setAggOn] = React37__default.useState(showAggregation);
+  const [focus, setFocus] = React37__default.useState({ r: 0, c: 0 });
+  const gridRef = React37__default.useRef(null);
+  const [groupBy, setGroupBy] = React37__default.useState(rowGrouping || []);
+  const [collapsed, setCollapsed] = React37__default.useState(() => /* @__PURE__ */ new Set());
+  const [pinnedRows, setPinnedRows] = React37__default.useState({ top: [], bottom: [] });
+  const [headH, setHeadH] = React37__default.useState(41);
+  const theadRef = React37__default.useRef(null);
+  const [rowOrder, setRowOrder] = React37__default.useState(null);
+  const [rowHeights, setRowHeights] = React37__default.useState({});
+  const [rowDrag, setRowDrag] = React37__default.useState({ from: null, over: null, after: false });
+  const [rowGrab, setRowGrab] = React37__default.useState(null);
+  const [reorderMsg, setReorderMsg] = React37__default.useState("");
+  const rowFocusRef = React37__default.useRef(null);
+  const rootRef = React37__default.useRef(null);
+  const [compact, setCompact] = React37__default.useState(false);
+  React37__default.useEffect(() => {
     const el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -5129,11 +5501,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React36__default.useRef(null);
-  const [scrollTop, setScrollTop] = React36__default.useState(0);
-  const [viewportH, setViewportH] = React36__default.useState(0);
-  const [pivotOn, setPivotOn] = React36__default.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React36__default.useState(() => {
+  const scrollRef = React37__default.useRef(null);
+  const [scrollTop, setScrollTop] = React37__default.useState(0);
+  const [viewportH, setViewportH] = React37__default.useState(0);
+  const [pivotOn, setPivotOn] = React37__default.useState(pivotMode);
+  const [aggConfig, setAggConfig] = React37__default.useState(() => {
     const m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -5141,13 +5513,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React36__default.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React37__default.useState(() => ({
     rows: pivot && pivot.rows || [],
     columns: pivot && pivot.columns || [],
     values: pivot && pivot.values || []
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -5155,32 +5527,37 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
+  React37__default.useEffect(() => {
+    if (pageSizeControlled) return;
+    setInternalRpp(pageSize > 0 ? pageSize : 10);
+    setInternalPage(0);
+  }, [pageSize]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React36__default.useRef(rowGroupingKey);
-  React36__default.useEffect(() => {
+  const rowGroupingKeyRef = React37__default.useRef(rowGroupingKey);
+  React37__default.useEffect(() => {
     if (rowGroupingKeyRef.current === rowGroupingKey) return;
     rowGroupingKeyRef.current = rowGroupingKey;
     setGroupBy(rowGrouping || []);
   }, [rowGroupingKey]);
   const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
-  const [colMenu, setColMenu] = React36__default.useState(null);
+  const [colMenu, setColMenu] = React37__default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React36__default.useState(null);
+  const [panel, setPanel] = React37__default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React36__default.useState(null);
+  const [rowMenu, setRowMenu] = React37__default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React36__default.useState(false);
+  const [exportOpen, setExportOpen] = React37__default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React36__default.useRef(null);
-  const colMenuRef = React36__default.useRef(null);
-  const rowMenuRef = React36__default.useRef(null);
-  const exportMenuRef = React36__default.useRef(null);
+  const menuTriggerRef = React37__default.useRef(null);
+  const colMenuRef = React37__default.useRef(null);
+  const rowMenuRef = React37__default.useRef(null);
+  const exportMenuRef = React37__default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -5219,16 +5596,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -5251,7 +5628,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -5270,9 +5647,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React36__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React37__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React36__default.useMemo(() => {
+  const ordered = React37__default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -5307,7 +5684,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React36__default.useMemo(() => {
+  const processed = React37__default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -5344,12 +5721,12 @@ function Datatable({
   const paginated = pageSize > 0;
   const serverTotal = rowCount == null ? processed.length : rowCount;
   const totalRows = serverMode ? serverTotal : processed.length;
-  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / rowsPerPage)) : 1;
-  const paged = !paginated || serverMode ? processed : processed.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-  React36__default.useEffect(() => {
-    if (page > totalPages - 1) setPage(0);
+  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / sizeVal)) : 1;
+  const paged = !paginated || serverMode ? processed : processed.slice(pageVal * sizeVal, pageVal * sizeVal + sizeVal);
+  React37__default.useEffect(() => {
+    if (pageVal > totalPages - 1) commitPage(0);
   }, [totalPages]);
-  const activeGroupBy = React36__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React37__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -5376,7 +5753,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React36__default.useMemo(() => {
+  const displayItems = React37__default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -5418,7 +5795,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -5432,12 +5809,12 @@ function Datatable({
   const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const middleRows = canPinRows ? leafRows.filter((r, i) => !pinSideOf(keyOf(r, i))) : leafRows;
-  const keyIndex = React36__default.useMemo(() => {
+  const keyIndex = React37__default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React36__default.useMemo(() => {
+  const keyIndexMid = React37__default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -5522,7 +5899,7 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
@@ -5534,7 +5911,7 @@ function Datatable({
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5544,13 +5921,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React36__default.useCallback((e) => {
+  const onScrollVirtual = React37__default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React36__default.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React36__default.useState(0);
-  const offsets = React36__default.useMemo(() => {
+  const rowHRef = React37__default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React37__default.useState(0);
+  const offsets = React37__default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -5560,7 +5937,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React36__default.useMemo(() => {
+  const vWindow = React37__default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -5589,7 +5966,7 @@ function Datatable({
     if (start > end) start = end;
     return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
   }, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
-  React36__default.useLayoutEffect(() => {
+  React37__default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5604,21 +5981,21 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React36__default.useRef(onServerChange);
+  const onServerChangeRef = React37__default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
-        page,
-        pageSize: rowsPerPage,
+        page: pageVal,
+        pageSize: sizeVal,
         sort,
         filters: filters.map(({ id, ...f }) => f),
         quickFilter: quick.trim()
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, page, rowsPerPage, sort, filters, quick]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, quick]);
   function cycleSort(field) {
     setSort((s) => !s || s.field !== field ? { field, dir: "asc" } : s.dir === "asc" ? { field, dir: "desc" } : null);
   }
@@ -5641,7 +6018,7 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React36__default.useMemo(
+  const movableMidFields = React37__default.useMemo(
     () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
     [ordered, pins]
   );
@@ -5672,7 +6049,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React36__default.useState(false);
+  const [resizing, setResizing] = React37__default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -5779,7 +6156,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React36__default.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React37__default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5897,14 +6274,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
-  }, [leafRows.length, ordered.length, page]);
-  const selectedRows = React36__default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  }, [leafRows.length, ordered.length, pageVal]);
+  const selectedRows = React37__default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React36__default.useState(null);
+  const [editing, setEditing] = React37__default.useState(null);
   const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
@@ -5939,17 +6316,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React36__default.useMemo(
+  const batchEditableCols = React37__default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React36__default.useState(null);
+  const [batchEdit, setBatchEdit] = React37__default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5968,7 +6345,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -6005,7 +6382,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -6144,7 +6521,7 @@ function Datatable({
       {
         className: "twc-dt__row",
         role: "row",
-        "aria-rowindex": (paginated && !serverMode ? page * rowsPerPage : 0) + ri + 2,
+        "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
         "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
         "data-selected": sel || void 0,
         "data-active": rowActive || void 0,
@@ -6202,7 +6579,7 @@ function Datatable({
             ] }),
             rowResize && !pinSide ? /* @__PURE__ */ jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
           ] }) : null,
-          showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? page * rowsPerPage : 0) + ri + 1 : "" }) : null,
+          showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
           ordered.map((c, ci) => {
             const st = stickyOf(c.field);
             const val = row[c.field];
@@ -6530,7 +6907,7 @@ function Datatable({
         /* @__PURE__ */ jsx(Svg, { d: I.search }),
         /* @__PURE__ */ jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => {
           setQuick(e.target.value);
-          setPage(0);
+          commitPage(0);
         } })
       ] })
     ] }),
@@ -6732,7 +7109,7 @@ function Datatable({
               );
             })
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(rowsPerPage, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxs("tr", { className: "twc-dt__row", role: "row", children: [
+          /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxs("tr", { className: "twc-dt__row", role: "row", children: [
             checkboxSelection ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
             showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
             ordered.map((c, ci) => {
@@ -6776,7 +7153,7 @@ function Datatable({
           const nf = (n) => n.toLocaleString();
           if (totalRows === 0) return "No rows";
           const shown = paged.length;
-          const start = paginated ? page * rowsPerPage + 1 : 1;
+          const start = paginated ? pageVal * sizeVal + 1 : 1;
           const end = paginated ? start + shown - 1 : shown;
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             paginated ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6804,13 +7181,10 @@ function Datatable({
         })() }),
         paginated ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__rpp", children: [
           /* @__PURE__ */ jsx("span", { className: "twc-dt__rpp-label", children: "Rows per page" }),
-          /* @__PURE__ */ jsx("div", { style: { width: 78 }, children: /* @__PURE__ */ jsx(Select, { size: "sm", portal: true, searchable: false, value: String(rowsPerPage), options: rppOptions, placement: "top", onChange: (v) => {
-            setRowsPerPage(Number(v));
-            setPage(0);
-          } }) })
+          /* @__PURE__ */ jsx("div", { style: { width: 78 }, children: /* @__PURE__ */ jsx(Select, { size: "sm", portal: true, searchable: false, value: String(sizeVal), options: rppOptions, placement: "top", onChange: (v) => commitPageSize(Number(v)) }) })
         ] }) : null
       ] }),
-      paginated ? /* @__PURE__ */ jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsx(Pagination, { size: "sm", page: page + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => setPage(p - 1) }) }) : null
+      paginated ? /* @__PURE__ */ jsx("div", { className: "twc-dt__footer-row", "data-pager": "true", children: /* @__PURE__ */ jsx(Pagination, { size: "sm", page: pageVal + 1, total: totalPages, boundaries: 3, showPageJumper: showPageJumper && totalPages > 5, onChange: (p) => commitPage(p - 1) }) }) : null
     ] }) : null,
     exportOpen && exportPos ? /* @__PURE__ */ jsxs(
       "div",
@@ -7459,6 +7833,18 @@ var DATEPICKER_CSS = `
 .twc-dp__clear { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-full); }
 .twc-dp__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-dp__clear svg { width: 14px; height: 14px; }
+/* #105: editable (typed entry) variant \u2014 the control wraps a real text input + a trailing toggle. */
+.twc-dp__control--editable { cursor: text; gap: 0; padding-inline-end: var(--space-1); }
+.twc-dp__input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0;
+  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); }
+.twc-dp__input::placeholder { color: var(--color-text-subtle); }
+.twc-dp__input:disabled { cursor: not-allowed; }
+.twc-dp__clear--inline { position: static; transform: none; flex: none; }
+.twc-dp__toggle { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: transparent;
+  color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-dp__toggle:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-dp__toggle:disabled { cursor: not-allowed; }
+.twc-dp__toggle svg { width: 17px; height: 17px; }
 
 .twc-dp__pop {
   position: fixed; z-index: var(--z-popover); width: 280px;
@@ -7518,6 +7904,8 @@ function DatePicker({
   disabled = false,
   tone = "primary",
   clearable = true,
+  editable = false,
+  parse,
   format,
   locale,
   weekStartsOn = 0,
@@ -7528,24 +7916,25 @@ function DatePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
   const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React36__default.useState(false);
-  const [view, setView] = React36__default.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React36__default.useState("days");
-  const [focusDate, setFocusDate] = React36__default.useState(null);
-  const [focusMonth, setFocusMonth] = React36__default.useState(null);
-  const [coords, setCoords] = React36__default.useState(null);
-  const wrapRef = React36__default.useRef(null);
-  const triggerRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const gridRef = React36__default.useRef(null);
+  const [open, setOpen] = React37__default.useState(false);
+  const [view, setView] = React37__default.useState(selected || /* @__PURE__ */ new Date());
+  const [mode, setMode] = React37__default.useState("days");
+  const [focusDate, setFocusDate] = React37__default.useState(null);
+  const [focusMonth, setFocusMonth] = React37__default.useState(null);
+  const [editText, setEditText] = React37__default.useState(null);
+  const [coords, setCoords] = React37__default.useState(null);
+  const wrapRef = React37__default.useRef(null);
+  const triggerRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const gridRef = React37__default.useRef(null);
   const POP_W = 280;
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7556,7 +7945,7 @@ function DatePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7567,7 +7956,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -7588,9 +7977,9 @@ function DatePicker({
     };
   }, [open]);
   useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
-  const months = React36__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React36__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React36__default.useMemo(
+  const months = React37__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
+  const monthsShort = React37__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
+  const dows = React37__default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7602,8 +7991,33 @@ function DatePicker({
   const pick = (d) => {
     if (value === void 0) setInternal(d);
     onChange?.(d);
+    setEditText(null);
     setOpen(false);
   };
+  const parseTyped = (s) => {
+    const str = s.trim();
+    if (str === "") return null;
+    if (parse) {
+      const d = parse(str);
+      return d instanceof Date && !Number.isNaN(d.getTime()) ? d : void 0;
+    }
+    const t = Date.parse(str);
+    return Number.isNaN(t) ? void 0 : new Date(t);
+  };
+  const commitText = () => {
+    if (editText == null) return;
+    const parsed = parseTyped(editText);
+    if (parsed === null) {
+      setEditText(null);
+      if (selected) pick(null);
+      return;
+    }
+    if (parsed === void 0 || outOfRange(parsed)) {
+      setEditText(null);
+      return;
+    }
+    pick(parsed);
+  };
   const y = view.getFullYear(), m = view.getMonth();
   const first = new Date(y, m, 1);
   const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
@@ -7618,11 +8032,11 @@ function DatePicker({
   };
   const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
   const tabbableDate = (focusDate && cells.some((c) => sameDay(c, focusDate)) ? focusDate : null) || (selected && cells.some((c) => sameDay(c, selected)) ? selected : null) || (cells.some((c) => sameDay(c, today)) ? today : null) || new Date(y, m, 1);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open || mode !== "months" || focusMonth == null) return;
     gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
   }, [focusMonth, open, mode]);
@@ -7679,7 +8093,82 @@ function DatePicker({
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "twc-dp__field", children: [
+    /* @__PURE__ */ jsx("div", { className: "twc-dp__field", children: editable ? (
+      // #105: typed entry — the trigger is a real text input with a trailing
+      // calendar toggle button; typing commits via `parse` on Enter/blur.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "twc-dp__control twc-dp__control--editable",
+          "data-open": open || void 0,
+          "data-disabled": disabled || void 0,
+          "data-tone": tone,
+          "data-invalid": invalid || void 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: triggerRef,
+                className: "twc-dp__input",
+                id: fieldId,
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "off",
+                disabled,
+                placeholder,
+                value: editText != null ? editText : selected ? fmt(selected) : "",
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                "aria-labelledby": label ? `${fieldId}-label` : void 0,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": error || hint ? descId : void 0,
+                onChange: (e) => setEditText(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitText();
+                  } else if (e.key === "ArrowDown" && (e.altKey || !open)) {
+                    e.preventDefault();
+                    setOpen(true);
+                  } else if (e.key === "Escape" && open) setOpen(false);
+                },
+                onBlur: (e) => {
+                  if (popRef.current && popRef.current.contains(e.relatedTarget)) return;
+                  commitText();
+                }
+              }
+            ),
+            clearable && selected && !disabled ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "twc-dp__clear twc-dp__clear--inline",
+                "aria-label": "Clear",
+                tabIndex: -1,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => pick(null),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "twc-dp__toggle",
+                "aria-label": "Open calendar",
+                tabIndex: -1,
+                disabled,
+                onClick: () => !disabled && setOpen((o) => !o),
+                children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -7718,7 +8207,7 @@ function DatePicker({
         e.stopPropagation();
         pick(null);
       }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
-    ] }),
+    ] }) }),
     open && coords ? createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -7817,6 +8306,17 @@ var RANGE_CSS = `
 .twc-drp__ic svg { width: 17px; height: 17px; }
 .twc-drp__text { flex: 1; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
 .twc-drp__text[data-placeholder="true"] { color: var(--color-text-subtle); }
+/* #105: editable (typed entry) variant. */
+.twc-drp__control--editable { cursor: text; gap: 0; padding-inline-end: var(--space-1); }
+.twc-drp__input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0;
+  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); }
+.twc-drp__input::placeholder { color: var(--color-text-subtle); }
+.twc-drp__input:disabled { cursor: not-allowed; }
+.twc-drp__toggle { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: transparent;
+  color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-drp__toggle:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-drp__toggle:disabled { cursor: not-allowed; }
+.twc-drp__toggle svg { width: 17px; height: 17px; }
 .twc-drp__pop { position: fixed; z-index: var(--z-popover); display: flex;
   background: var(--color-surface-raised); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg); animation: twico-scale-in var(--duration-fast) var(--ease-spring); transform-origin: top; }
@@ -7871,31 +8371,34 @@ function DateRangePicker({
   disabledDate,
   disabled = false,
   tone = "primary",
+  editable = false,
+  parse,
   onChange,
   className = "",
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
   const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React36__default.useState(false);
-  const [view, setView] = React36__default.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React36__default.useState(null);
-  const [focusDate, setFocusDate] = React36__default.useState(null);
-  const [coords, setCoords] = React36__default.useState(null);
-  const wrapRef = React36__default.useRef(null);
-  const triggerRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const gridRef = React36__default.useRef(null);
-  const labelId = React36__default.useId();
+  const [open, setOpen] = React37__default.useState(false);
+  const [view, setView] = React37__default.useState(range.start || /* @__PURE__ */ new Date());
+  const [hover, setHover] = React37__default.useState(null);
+  const [focusDate, setFocusDate] = React37__default.useState(null);
+  const [editText, setEditText] = React37__default.useState(null);
+  const [coords, setCoords] = React37__default.useState(null);
+  const wrapRef = React37__default.useRef(null);
+  const triggerRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const gridRef = React37__default.useRef(null);
+  const labelId = React37__default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7906,7 +8409,7 @@ function DateRangePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7917,7 +8420,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7938,6 +8441,40 @@ function DateRangePicker({
     if (value === void 0) setInternal(r);
     onChange?.(r);
   };
+  const parseOne = (s) => {
+    const str = s.trim();
+    if (str === "") return null;
+    if (parse) {
+      const d = parse(str);
+      return d instanceof Date && !Number.isNaN(d.getTime()) ? d : void 0;
+    }
+    const t = Date.parse(str);
+    return Number.isNaN(t) ? void 0 : new Date(t);
+  };
+  const commitText = () => {
+    if (editText == null) return;
+    const raw = editText.trim();
+    if (raw === "") {
+      setEditText(null);
+      if (range.start || range.end) set({ start: null, end: null });
+      return;
+    }
+    const parts = raw.split(/\s*(?:–|—|\bto\b|\.\.+)\s*/i).map((p) => p.trim());
+    let a = parseOne(parts[0] || "");
+    let b = parts.length > 1 ? parseOne(parts[1] || "") : null;
+    if (a === void 0 || b === void 0 || a && outOfRange(a) || b && outOfRange(b)) {
+      setEditText(null);
+      return;
+    }
+    if (a && b && ymd(b) < ymd(a)) {
+      const t = a;
+      a = b;
+      b = t;
+    }
+    set({ start: a || null, end: b || null });
+    setEditText(null);
+    setOpen(false);
+  };
   useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
   const outOfRange = (d) => min && ymd(d) < ymd(min) || max && ymd(d) > ymd(max) || Boolean(disabledDate && disabledDate(d));
   const sameDay2 = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -7947,13 +8484,13 @@ function DateRangePicker({
     const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0);
     return new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate()));
   };
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) {
       setFocusDate(null);
       setHover(null);
     }
   }, [open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open]);
@@ -8002,8 +8539,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React36__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React36__default.useMemo(
+  const months = React37__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React37__default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -8033,7 +8570,57 @@ function DateRangePicker({
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs(
+    editable ? (
+      // #105: typed entry — a text input accepting "start – end"; commits via `parse` on Enter/blur.
+      /* @__PURE__ */ jsxs("div", { className: "twc-drp__control twc-drp__control--editable", "data-open": open || void 0, "data-disabled": disabled || void 0, "data-invalid": invalid || void 0, "data-tone": tone, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: triggerRef,
+            className: "twc-drp__input",
+            type: "text",
+            autoComplete: "off",
+            disabled,
+            placeholder,
+            value: editText != null ? editText : text,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-labelledby": label ? labelId : void 0,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": error || hint ? descId : void 0,
+            onChange: (e) => setEditText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitText();
+              } else if (e.key === "ArrowDown" && (e.altKey || !open)) {
+                e.preventDefault();
+                setOpen(true);
+              } else if (e.key === "Escape" && open) setOpen(false);
+            },
+            onBlur: (e) => {
+              if (popRef.current && popRef.current.contains(e.relatedTarget)) return;
+              commitText();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "twc-drp__toggle",
+            "aria-label": "Open calendar",
+            tabIndex: -1,
+            disabled,
+            onClick: () => !disabled && setOpen((o) => !o),
+            children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+            ] })
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxs(
       "div",
       {
         ref: triggerRef,
@@ -8193,14 +8780,14 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React36__default.useRef(null);
+  const dialogRef = React37__default.useRef(null);
   const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React36__default.useState(open);
-  React36__default.useEffect(() => {
+  const [mounted, setMounted] = React37__default.useState(open);
+  React37__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -8211,7 +8798,7 @@ function Dialog({
   useScrollLock(open);
   useInertBackground(dialogRef, open && mounted);
   useFocusTrap(dialogRef, open && mounted);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8358,14 +8945,14 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React36__default.useRef(null);
+  const panelRef = React37__default.useRef(null);
   const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React36__default.useState(open);
-  React36__default.useEffect(() => {
+  const [mounted, setMounted] = React37__default.useState(open);
+  React37__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -8376,7 +8963,7 @@ function Drawer({
   useScrollLock(open);
   useInertBackground(panelRef, open && mounted);
   useFocusTrap(panelRef, open && mounted);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8465,11 +9052,11 @@ function Field({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const hasMsg = Boolean(error || hint);
-  const control = React36__default.isValidElement(children) ? React36__default.cloneElement(children, {
+  const control = React37__default.isValidElement(children) ? React37__default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
     "aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
   }) : children;
@@ -8561,11 +9148,11 @@ function FileUpload({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React36__default.useState(false);
-  const inputRef = React36__default.useRef(null);
-  const autoId = React36__default.useId();
+  const [drag, setDrag] = React37__default.useState(false);
+  const inputRef = React37__default.useRef(null);
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -8788,15 +9375,15 @@ function Kanban({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
-  const [internal, setInternal] = React36__default.useState(cards ?? defaultCards ?? []);
+  const [internal, setInternal] = React37__default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React36__default.useState(null);
-  const [overCol, setOverCol] = React36__default.useState(null);
-  const [grab, setGrab] = React36__default.useState(null);
-  const [announce, setAnnounce] = React36__default.useState("");
-  const rootRef = React36__default.useRef(null);
-  const focusIdRef = React36__default.useRef(null);
-  React36__default.useEffect(() => {
+  const [drag, setDrag] = React37__default.useState(null);
+  const [overCol, setOverCol] = React37__default.useState(null);
+  const [grab, setGrab] = React37__default.useState(null);
+  const [announce, setAnnounce] = React37__default.useState("");
+  const rootRef = React37__default.useRef(null);
+  const focusIdRef = React37__default.useRef(null);
+  React37__default.useEffect(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -9106,21 +9693,21 @@ function Popover({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
-  const [openState, setOpenState] = React36__default.useState(defaultOpen);
-  const [render, setRender] = React36__default.useState(false);
-  const [pos, setPos] = React36__default.useState(null);
-  const wrapRef = React36__default.useRef(null);
-  const popRef = React36__default.useRef(null);
-  const popId = React36__default.useId();
+  const [openState, setOpenState] = React37__default.useState(defaultOpen);
+  const [render, setRender] = React37__default.useState(false);
+  const [pos, setPos] = React37__default.useState(null);
+  const wrapRef = React37__default.useRef(null);
+  const popRef = React37__default.useRef(null);
+  const popId = React37__default.useId();
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React36__default.useRef(open);
+  const openRef = React37__default.useRef(open);
   openRef.current = open;
-  const controlledRef = React36__default.useRef(controlled);
+  const controlledRef = React37__default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React36__default.useRef(onOpenChange);
+  const onOpenChangeRef = React37__default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React36__default.useCallback((next) => {
+  const setOpen = React37__default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -9128,7 +9715,7 @@ function Popover({
   }, []);
   const toggle = () => setOpen((o) => !o);
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
-  const place = React36__default.useCallback(() => {
+  const place = React37__default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -9165,7 +9752,7 @@ function Popover({
     arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
     setPos({ top, left, width: w, flip: false, arrow });
   }, [placement, align, width]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -9188,7 +9775,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -9196,12 +9783,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React36__default.useRef(null);
-  const needFocusRef = React36__default.useRef(false);
-  React36__default.useEffect(() => {
+  const restoreRef = React37__default.useRef(null);
+  const needFocusRef = React37__default.useRef(false);
+  React37__default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -9236,7 +9823,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React36__default.isValidElement(trigger) ? React36__default.cloneElement(trigger, {
+  const triggerEl = React37__default.isValidElement(trigger) ? React37__default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -9279,7 +9866,7 @@ function Progress({
   className = "",
   ...rest
 }) {
-  const labelId = React36__default.useId();
+  const labelId = React37__default.useId();
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = rest;
   const __twcStyles = useScopedStyles("twc-progress-styles", `
 .twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -9402,7 +9989,7 @@ function Radio({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -9472,13 +10059,13 @@ function RadioGroup({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const labelId = `${fieldId}-label`;
   const descId = `${fieldId}-desc`;
   const groupName = name || `${fieldId}-name`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const select = (v) => {
     if (value === void 0) setInternal(v);
@@ -9499,10 +10086,10 @@ function RadioGroup({
       tone
     },
     o.value
-  )) : React36__default.Children.map(children, (child) => {
-    if (!React36__default.isValidElement(child)) return child;
+  )) : React37__default.Children.map(children, (child) => {
+    if (!React37__default.isValidElement(child)) return child;
     const v = child.props.value;
-    return React36__default.cloneElement(child, {
+    return React37__default.cloneElement(child, {
       name: child.props.name ?? groupName,
       checked: child.props.checked ?? current === v,
       onChange: child.props.onChange ?? (() => select(v)),
@@ -9582,12 +10169,12 @@ function Rating({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
-  const [internal, setInternal] = React36__default.useState(defaultValue);
-  const [hover, setHover] = React36__default.useState(0);
+  const [internal, setInternal] = React37__default.useState(defaultValue);
+  const [hover, setHover] = React37__default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React36__default.useRef([]);
+  const btnRefs = React37__default.useRef([]);
   const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
   const fmt = (v) => format ? format(v) : Number.isInteger(v) ? String(v) : v.toFixed(1);
   if (process.env.NODE_ENV !== "production" && interactive && !Number.isInteger(val)) {
@@ -9774,24 +10361,24 @@ function Sidebar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
-  const navId = React36__default.useId();
-  const panelRef = React36__default.useRef(null);
+  const navId = React37__default.useId();
+  const panelRef = React37__default.useRef(null);
   const renderPortal = usePortal();
-  const [internal, setInternal] = React36__default.useState(defaultCollapsed);
+  const [internal, setInternal] = React37__default.useState(defaultCollapsed);
   const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
   const toggle = () => {
     const next = !collapsed;
     if (collapsedProp === void 0) setInternal(next);
     onCollapsedChange?.(next);
   };
-  const [openInternal, setOpenInternal] = React36__default.useState(defaultOpen);
+  const [openInternal, setOpenInternal] = React37__default.useState(defaultOpen);
   const open = openProp !== void 0 ? openProp : openInternal;
   const setOpen = (next) => {
     if (openProp === void 0) setOpenInternal(next);
     onOpenChange?.(next);
   };
-  const [mounted, setMounted] = React36__default.useState(open);
-  React36__default.useEffect(() => {
+  const [mounted, setMounted] = React37__default.useState(open);
+  React37__default.useEffect(() => {
     if (!overlay) return void 0;
     if (open) {
       setMounted(true);
@@ -9800,7 +10387,7 @@ function Sidebar({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [overlay, open]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -9809,7 +10396,7 @@ function Sidebar({
     };
   }, [overlay, open]);
   useFocusTrap(panelRef, overlay && open && mounted);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -9861,7 +10448,7 @@ function Sidebar({
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     __twcStyles,
     brand ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
-    /* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
+    /* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React37__default.Fragment, { children: [
       g.section != null ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
       /* @__PURE__ */ jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsx("li", { children: renderItem(it) }, i)) })
     ] }, gi)) }),
@@ -10030,10 +10617,10 @@ function Slider({
     return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
   };
   const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const isRange = range || Array.isArray(value) || Array.isArray(defaultValue);
-  const [internal, setInternal] = React36__default.useState(() => {
+  const [internal, setInternal] = React37__default.useState(() => {
     if (isRange) {
       const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
       return [clampSnap(dv[0]), clampSnap(dv[1])];
@@ -10043,8 +10630,8 @@ function Slider({
   const rawVal = value !== void 0 ? value : internal;
   const clampedVals = (isRange ? [Number(rawVal[0]), Number(rawVal[1])] : [Number(rawVal)]).map((v) => Math.min(max, Math.max(min, Number.isFinite(v) ? v : min)));
   const indices = isRange ? [0, 1] : [0];
-  const trackRef = React36__default.useRef(null);
-  const [dragging, setDragging] = React36__default.useState(false);
+  const trackRef = React37__default.useRef(null);
+  const [dragging, setDragging] = React37__default.useState(false);
   const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
   const valueTextFor = (v) => {
     if (getAriaValueText) return getAriaValueText(v);
@@ -10075,8 +10662,8 @@ function Slider({
     const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
     return clampSnap(min + ratio * (max - min));
   };
-  const dragCleanupRef = React36__default.useRef(null);
-  React36__default.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React37__default.useRef(null);
+  React37__default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
@@ -10307,7 +10894,7 @@ function Stepper({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
-  const [activeInternal, setActiveInternal] = React36__default.useState(defaultActive);
+  const [activeInternal, setActiveInternal] = React37__default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -10439,7 +11026,7 @@ function Switch({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -10542,14 +11129,14 @@ function Table({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
-  const cols = React36__default.useMemo(
+  const cols = React37__default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React36__default.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React37__default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React36__default.useMemo(() => {
+  const rows = React37__default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -10696,15 +11283,15 @@ function Tabs({
 }) {
   const vertical = orientation === "vertical";
   const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
-  const [internal, setInternal] = React36__default.useState(defaultValue ?? items[0]?.value);
+  const [internal, setInternal] = React37__default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React36__default.useRef(null);
-  const [ind, setInd] = React36__default.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React36__default.useId();
+  const listRef = React37__default.useRef(null);
+  const [ind, setInd] = React37__default.useState({ left: 0, width: 0, top: 0, height: 0 });
+  const baseId = React37__default.useId();
   const tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React36__default.useCallback(() => {
+  const updateIndicator = React37__default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
@@ -10713,10 +11300,10 @@ function Tabs({
       if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
     }
   }, [vertical]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -10861,7 +11448,7 @@ function Tag({
     }, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var useIso = typeof document !== "undefined" ? React36__default.useLayoutEffect : React36__default.useEffect;
+var useIso = typeof document !== "undefined" ? React37__default.useLayoutEffect : React37__default.useEffect;
 var TEXTAREA_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -10897,7 +11484,7 @@ var TEXTAREA_CSS = `
 .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
 .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
 `;
-var Textarea = React36__default.forwardRef(function Textarea2({
+var Textarea = React37__default.forwardRef(function Textarea2({
   label,
   hint,
   error,
@@ -10915,19 +11502,19 @@ var Textarea = React36__default.forwardRef(function Textarea2({
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
-  const autoId = React36__default.useId();
+  const autoId = React37__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
-  const innerRef = React36__default.useRef(null);
+  const innerRef = React37__default.useRef(null);
   const setRef = (el) => {
     innerRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
   };
   const countControlled = rest.value !== void 0;
-  const [len2, setLen] = React36__default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React37__default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -11105,19 +11692,19 @@ function Toast({
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const onCloseRef = React36__default.useRef(onClose);
-  React36__default.useEffect(() => {
+  const onCloseRef = React37__default.useRef(onClose);
+  React37__default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React36__default.useRef();
-  const stop = React36__default.useCallback(() => clearTimeout(timer.current), []);
-  const start = React36__default.useCallback(() => {
+  const timer = React37__default.useRef();
+  const stop = React37__default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React37__default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
@@ -11162,30 +11749,30 @@ function Toast({
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const shown = limit && limit > 0 ? React36__default.Children.toArray(children).slice(-limit) : children;
+  const shown = limit && limit > 0 ? React37__default.Children.toArray(children).slice(-limit) : children;
   return /* @__PURE__ */ jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
     __twcStyles,
     shown
   ] });
 }
-var ToastContext = React36__default.createContext(null);
+var ToastContext = React37__default.createContext(null);
 function useToast() {
-  const ctx = React36__default.useContext(ToastContext);
+  const ctx = React37__default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
   return ctx;
 }
 function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
-  const [toasts, setToasts] = React36__default.useState([]);
-  const idRef = React36__default.useRef(0);
-  const limitRef = React36__default.useRef(limit);
-  React36__default.useEffect(() => {
+  const [toasts, setToasts] = React37__default.useState([]);
+  const idRef = React37__default.useRef(0);
+  const limitRef = React37__default.useRef(limit);
+  React37__default.useEffect(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React36__default.useCallback((id) => {
+  const dismiss = React37__default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React36__default.useCallback(() => setToasts([]), []);
-  const api = React36__default.useMemo(() => {
+  const clear = React37__default.useCallback(() => setToasts([]), []);
+  const api = React37__default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -11206,7 +11793,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React36__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React37__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsx(ToastViewport, { limit, ...viewportProps, children: toasts.map((t) => /* @__PURE__ */ jsx(
@@ -11314,13 +11901,13 @@ function TreeView({
 }) {
   const nodes = items;
   const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
-  const [expInternal, setExpInternal] = React36__default.useState(() => new Set(defaultExpanded));
+  const [expInternal, setExpInternal] = React37__default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React36__default.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React37__default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React36__default.useState(null);
-  const rowRefs = React36__default.useRef(/* @__PURE__ */ new Map());
-  const taRef = React36__default.useRef({ str: "", t: 0 });
+  const [focusId, setFocusId] = React37__default.useState(null);
+  const rowRefs = React37__default.useRef(/* @__PURE__ */ new Map());
+  const taRef = React37__default.useRef({ str: "", t: 0 });
   const toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -11452,7 +12039,7 @@ function AppShell({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
-  const wiredSidebar = React36__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React36__default.cloneElement(sidebar, {
+  const wiredSidebar = React37__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React37__default.cloneElement(sidebar, {
     overlay: sidebar.props.overlay !== void 0 ? sidebar.props.overlay : true,
     open: sidebar.props.open !== void 0 ? sidebar.props.open : sidebarOpen,
     onOpenChange: sidebar.props.onOpenChange !== void 0 ? sidebar.props.onOpenChange : onSidebarOpenChange
@@ -11487,7 +12074,7 @@ function safeHref6(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Box = React36__default.forwardRef(function Box2({
+var Box = React37__default.forwardRef(function Box2({
   as: Tag2 = "div",
   p,
   px,
@@ -11507,11 +12094,13 @@ var Box = React36__default.forwardRef(function Box2({
   border = false,
   radius,
   shadow,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const s = {
     paddingTop: sp(pt ?? py ?? p),
     paddingRight: sp(pr ?? px ?? p),
@@ -11525,10 +12114,14 @@ var Box = React36__default.forwardRef(function Box2({
     border: border ? "var(--border-thin, 1px) solid var(--color-border)" : void 0,
     borderRadius: radius ? `var(--radius-${radius})` : void 0,
     boxShadow: shadow ? `var(--shadow-${shadow})` : void 0,
-    ...style
+    ...style,
+    ...flatStyle
   };
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
-  return /* @__PURE__ */ jsx(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, ...rest, children });
+  return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, "data-twc-sx": sxAttr, ...rest, children: [
+    styleNode,
+    children
+  ] });
 });
 Box.displayName = "Box";
 var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
@@ -11537,31 +12130,38 @@ function safeHref7(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Container = React36__default.forwardRef(function Container2({
+var Container = React37__default.forwardRef(function Container2({
   as: Tag2 = "div",
   size = "lg",
   padded = true,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const max = SIZES[size] ?? size;
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Tag2,
     {
       ref,
       className: `twc-container ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         width: "100%",
         maxWidth: typeof max === "number" ? `${max}px` : max,
         marginInline: "auto",
         paddingInline: padded ? "var(--space-5)" : void 0,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
 });
@@ -11580,7 +12180,7 @@ function safeHref8(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Grid = React36__default.forwardRef(function Grid2({
+var Grid = React37__default.forwardRef(function Grid2({
   as: Tag2 = "div",
   columns,
   minChildWidth,
@@ -11591,13 +12191,15 @@ var Grid = React36__default.forwardRef(function Grid2({
   justify,
   alignContent,
   justifyContent,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const responsive = columns != null && typeof columns === "object";
-  const uid = React36__default.useId();
+  const uid = React37__default.useId();
   const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
   let css = "";
   if (responsive) {
@@ -11618,6 +12220,7 @@ var Grid = React36__default.forwardRef(function Grid2({
       ref,
       className: `twc-grid ${className}`.trim(),
       "data-twc-grid-id": gridId || void 0,
+      "data-twc-sx": sxAttr,
       style: {
         display: "grid",
         gridTemplateColumns: templateColumns,
@@ -11627,11 +12230,13 @@ var Grid = React36__default.forwardRef(function Grid2({
         justifyItems: justify,
         alignContent,
         justifyContent,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
       children: [
         responsive ? __twcStyles : null,
+        styleNode,
         children
       ]
     }
@@ -11648,7 +12253,7 @@ function safeHref9(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Stack = React36__default.forwardRef(function Stack2({
+var Stack = React37__default.forwardRef(function Stack2({
   as: Tag2 = "div",
   direction = "column",
   gap = 4,
@@ -11664,18 +12269,21 @@ var Stack = React36__default.forwardRef(function Stack2({
   pb,
   pl,
   divider,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
-  const kids = divider != null ? React36__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React36__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
-  return /* @__PURE__ */ jsx(
+  const kids = divider != null ? React37__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React37__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
+  return /* @__PURE__ */ jsxs(
     Tag2,
     {
       ref,
       className: `twc-stack ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         display: inline ? "inline-flex" : "flex",
         flexDirection: direction,
@@ -11688,10 +12296,14 @@ var Stack = React36__default.forwardRef(function Stack2({
         paddingBottom: space2(pb ?? py ?? p),
         paddingLeft: space2(pl ?? px ?? p),
         minWidth: 0,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children: kids
+      children: [
+        styleNode,
+        kids
+      ]
     }
   );
 });
@@ -11737,10 +12349,10 @@ function Code({
   const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
   const Tag2 = as ?? (block ? "pre" : "code");
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
-  const rootRef = React36__default.useRef(null);
-  const [copied, setCopied] = React36__default.useState(false);
-  const timerRef = React36__default.useRef(null);
-  React36__default.useEffect(() => () => clearTimeout(timerRef.current), []);
+  const rootRef = React37__default.useRef(null);
+  const [copied, setCopied] = React37__default.useState(false);
+  const timerRef = React37__default.useRef(null);
+  React37__default.useEffect(() => () => clearTimeout(timerRef.current), []);
   const doCopy = () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
@@ -11766,7 +12378,7 @@ function safeHref11(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Heading = React36__default.forwardRef(function Heading2({
+var Heading = React37__default.forwardRef(function Heading2({
   as,
   level = 2,
   size,
@@ -11774,19 +12386,22 @@ var Heading = React36__default.forwardRef(function Heading2({
   align,
   truncate,
   lineClamp,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   const Tag2 = as || `h${level}`;
   const sz = size || (display ? "display" : LEVEL_SIZE[level]) || "2xl";
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Tag2,
     {
       ref,
       className: `twc-heading ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         margin: 0,
         fontFamily: "var(--font-sans)",
@@ -11797,10 +12412,14 @@ var Heading = React36__default.forwardRef(function Heading2({
         fontSize: `var(--text-${sz})`,
         textAlign: align,
         ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
 });
@@ -11825,7 +12444,7 @@ function safeHref12(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-var Text = React36__default.forwardRef(function Text2({
+var Text = React37__default.forwardRef(function Text2({
   as: Tag2 = "p",
   size = "base",
   tone = "default",
@@ -11833,18 +12452,21 @@ var Text = React36__default.forwardRef(function Text2({
   align,
   truncate,
   lineClamp,
+  sx,
   className = "",
   style,
   children,
   ...rest
 }, ref) {
+  const { flatStyle, styleNode, sxAttr } = useSx(sx);
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
   const toneToken = TONE[tone] || TONE.default;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Tag2,
     {
       ref,
       className: `twc-text ${className}`.trim(),
+      "data-twc-sx": sxAttr,
       style: {
         margin: 0,
         fontFamily: "var(--font-sans)",
@@ -11854,54 +12476,58 @@ var Text = React36__default.forwardRef(function Text2({
         fontWeight: weight ? `var(--font-${weight})` : void 0,
         textAlign: align,
         ...lineClamp != null ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lineClamp, overflow: "hidden" } : truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 } : null,
-        ...style
+        ...style,
+        ...flatStyle
       },
       ...rest,
-      children
+      children: [
+        styleNode,
+        children
+      ]
     }
   );
 });
 Text.displayName = "Text";
 var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM2 ? React36__default.useLayoutEffect : React36__default.useEffect;
+var useIsomorphicLayoutEffect = canUseDOM2 ? React37__default.useLayoutEffect : React37__default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React36__default.useState(false);
-  React36__default.useEffect(() => {
+  const [mounted, setMounted] = React37__default.useState(false);
+  React37__default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React36__default.useRef(void 0);
-  React36__default.useEffect(() => {
+  const ref = React37__default.useRef(void 0);
+  React37__default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React36__default.useState(initial);
-  const toggle = React36__default.useCallback((next) => {
+  const [on, setOn] = React37__default.useState(initial);
+  const toggle = React37__default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React36__default.useState(initial);
-  const onOpen = React36__default.useCallback(() => setOpen(true), []);
-  const onClose = React36__default.useCallback(() => setOpen(false), []);
-  const onToggle = React36__default.useCallback(() => setOpen((p) => !p), []);
+  const [open, setOpen] = React37__default.useState(initial);
+  const onOpen = React37__default.useCallback(() => setOpen(true), []);
+  const onClose = React37__default.useCallback(() => setOpen(false), []);
+  const onToggle = React37__default.useCallback(() => setOpen((p) => !p), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 function useControllableState({ value, defaultValue, onChange } = {}) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React36__default.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React37__default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React36__default.useRef({ current, isControlled, onChange });
+  const ref = React37__default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const wasControlled = React36__default.useRef(isControlled);
-  React36__default.useEffect(() => {
+  const wasControlled = React37__default.useRef(isControlled);
+  React37__default.useEffect(() => {
     if (wasControlled.current !== isControlled) {
       warnOnce(
         "useControllableState:switch",
@@ -11910,7 +12536,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
       wasControlled.current = isControlled;
     }
   });
-  const setValue = React36__default.useCallback((next) => {
+  const setValue = React37__default.useCallback((next) => {
     const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
     const resolved = typeof next === "function" ? next(cur) : next;
     if (resolved === cur) return;
@@ -11921,7 +12547,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
 }
 function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
   const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
-  const [matches3, setMatches] = React36__default.useState(initializeWithValue ? get : defaultValue);
+  const [matches3, setMatches] = React37__default.useState(initializeWithValue ? get : defaultValue);
   useIsomorphicLayoutEffect(() => {
     if (!canUseDOM2) return void 0;
     const mql = window.matchMedia(query);
@@ -11937,7 +12563,7 @@ function usePrefersReducedMotion() {
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
   const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
-  const firstApply = React36__default.useRef(true);
+  const firstApply = React37__default.useRef(true);
   const read = () => {
     if (!canUseDOM2) return "light";
     try {
@@ -11947,8 +12573,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React36__default.useState(read);
-  const apply = React36__default.useCallback(
+  const [theme, setThemeState] = React37__default.useState(read);
+  const apply = React37__default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
@@ -11974,11 +12600,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React36__default.useRef(theme);
+  const themeRef = React37__default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React36__default.useCallback(
+  const setTheme = React37__default.useCallback(
     (t) => {
       setThemeState(t);
       try {
@@ -11989,10 +12615,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     },
     [storageKey]
   );
-  const toggle = React36__default.useCallback(() => {
+  const toggle = React37__default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
@@ -12008,14 +12634,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   return { theme, setTheme, toggle, isDark: theme === "dark" };
 }
 function useEventListener(eventName, handler, element, options) {
-  const saved = React36__default.useRef(handler);
+  const saved = React37__default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
   const capture = typeof options === "boolean" ? options : options && options.capture;
   const passive = typeof options === "object" && options ? options.passive : void 0;
   const once = typeof options === "object" && options ? options.once : void 0;
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     const target = element && element.current || element || (canUseDOM2 ? window : null);
     if (!target || !target.addEventListener) return void 0;
     const opts = typeof options === "boolean" ? options : { capture, passive, once };
@@ -12025,11 +12651,11 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React36__default.useRef(handler);
+  const saved = React37__default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
@@ -12064,8 +12690,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React36__default.useState(read);
-  const setValue = React36__default.useCallback(
+  const [stored, setStored] = React37__default.useState(read);
+  const setValue = React37__default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -12081,8 +12707,8 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React36__default.useState(false);
-  const copy = React36__default.useCallback(async (text) => {
+  const [copied, setCopied] = React37__default.useState(false);
+  const copy = React37__default.useCallback(async (text) => {
     if (!canUseDOM2 || !navigator.clipboard) {
       setCopied(false);
       return false;
@@ -12096,7 +12722,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -12104,23 +12730,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React36__default.useState(value);
-  React36__default.useEffect(() => {
+  const [debounced, setDebounced] = React37__default.useState(value);
+  React37__default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React36__default.useRef(callback);
-  const timer = React36__default.useRef(null);
+  const saved = React37__default.useRef(callback);
+  const timer = React37__default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React36__default.useEffect(() => () => {
+  React37__default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React36__default.useCallback(
+  return React37__default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -12129,33 +12755,33 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React36__default.useRef(callback);
+  const saved = React37__default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setInterval(() => saved.current(), delay);
     return () => clearInterval(id);
   }, [delay]);
 }
 function useTimeout(callback, delay) {
-  const saved = React36__default.useRef(callback);
+  const saved = React37__default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React36__default.useState(() => ({
+  const [size, setSize] = React37__default.useState(() => ({
     width: canUseDOM2 ? window.innerWidth : 0,
     height: canUseDOM2 ? window.innerHeight : 0
   }));
-  React36__default.useEffect(() => {
+  React37__default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
@@ -12165,8 +12791,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React36__default.useState(false);
-  React36__default.useEffect(() => {
+  const [hovered, setHovered] = React37__default.useState(false);
+  React37__default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -12182,8 +12808,8 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React36__default.useState(null);
-  React36__default.useEffect(() => {
+  const [entry, setEntry] = React37__default.useState(null);
+  React37__default.useEffect(() => {
     const el = ref && ref.current;
     if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
     const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
@@ -12193,7 +12819,7 @@ function useIntersectionObserver(ref, options = {}) {
   return entry;
 }
 function useId(prefix = "twc") {
-  const raw = React36__default.useId();
+  const raw = React37__default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
 var useFocusTrap2 = useFocusTrap;