@epicbagel/saas-kit 1.14.0 → 1.16.0

package/README.md

@@ -448,6 +448,11 @@ with stable `id`, accessible `label`, optional `imageSrc`/`fallback`, and
 visible. The item at the top of the scroll viewport is highlighted; the index
 scrolls independently for long lists. With insufficient left gutter, it uses
 a compact horizontal row above the content. Single-item lists have no index.
+Set `columns` for a responsive card grid (one column on mobile). The first card
+in the row at the reading edge is highlighted; changing columns preserves each
+card's local state.
+The available gutter stays within the outer main content landmark, so the
+index never counts an application's sidebar as free space.
 
 It detects the nearest scrolling ancestor, supports an explicit `scrollRoot`
 and `topOffset` for sticky headers, and offers `onNavigate` for custom scroll

package/dist/{chunk-34AS3OCC.cjs → chunk-6AMSRIQ4.cjs}

@@ -1,6 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
+var _chunkZ2H4LJVGcjs = require('./chunk-Z2H4LJVG.cjs');
+
+
 
 
 var _chunkWABCLRBRcjs = require('./chunk-WABCLRBR.cjs');
@@ -22,7 +25,7 @@ function findScrollRoot(element) {
   }
   return null;
 }
-function viewportBounds(root) {
+function viewportBounds(root, element) {
   const viewport = window.visualViewport;
   const top = _nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _ => _.offsetTop]), () => ( 0));
   const left = _nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _2 => _2.offsetLeft]), () => ( 0));
@@ -36,11 +39,21 @@ function viewportBounds(root) {
     bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
     bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
   }
+  let landmark = _optionalChain([element, 'optionalAccess', _5 => _5.closest, 'call', _6 => _6("main, [role='main']")]);
+  for (let parent = _optionalChain([landmark, 'optionalAccess', _7 => _7.parentElement, 'optionalAccess', _8 => _8.closest, 'call', _9 => _9("main, [role='main']")]); parent; parent = _optionalChain([parent, 'access', _10 => _10.parentElement, 'optionalAccess', _11 => _11.closest, 'call', _12 => _12("main, [role='main']")])) {
+    landmark = parent;
+  }
+  if (landmark) {
+    const rect = landmark.getBoundingClientRect();
+    bounds.left = Math.max(bounds.left, rect.left);
+    bounds.right = Math.min(bounds.right, rect.right);
+  }
   return bounds;
 }
 var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
   items,
   label = "Browse items",
+  columns = 1,
   topOffset = 0,
   scrollRoot,
   onNavigate,
@@ -70,14 +83,14 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       }
       const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
       scroller.current = scrollElement;
-      const view = viewportBounds(scrollElement);
+      const view = viewportBounds(scrollElement, element);
       const box = element.getBoundingClientRect();
       const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
       const top = Math.max(view.top + topOffset + GAP, box.top);
       const bottom = Math.min(view.bottom, box.bottom) - GAP;
       const visible = box.width > 0 && box.right > view.left && box.left < view.right && bottom - top >= ROW_HEIGHT;
       const readingEdge = view.top + topOffset + GAP + (mode === "row" ? ROW_HEIGHT : 0);
-      const active = visible ? Math.max(0, items.findIndex((item) => (_nullishCoalesce(_optionalChain([targets, 'access', _5 => _5.current, 'access', _6 => _6.get, 'call', _7 => _7(item.id), 'optionalAccess', _8 => _8.getBoundingClientRect, 'call', _9 => _9(), 'access', _10 => _10.bottom]), () => ( 0))) > readingEdge + 1)) : 0;
+      const active = visible ? Math.max(0, items.findIndex((item) => (_nullishCoalesce(_optionalChain([targets, 'access', _13 => _13.current, 'access', _14 => _14.get, 'call', _15 => _15(item.id), 'optionalAccess', _16 => _16.getBoundingClientRect, 'call', _17 => _17(), 'access', _18 => _18.bottom]), () => ( 0))) > readingEdge + 1)) : 0;
       const next = {
         mode,
         top,
@@ -93,33 +106,33 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       if (!frame) frame = requestAnimationFrame(measure);
     };
     const visibility = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
-      intersects = _nullishCoalesce(_optionalChain([entries, 'access', _11 => _11[entries.length - 1], 'optionalAccess', _12 => _12.isIntersecting]), () => ( intersects));
+      intersects = _nullishCoalesce(_optionalChain([entries, 'access', _19 => _19[entries.length - 1], 'optionalAccess', _20 => _20.isIntersecting]), () => ( intersects));
       schedule();
     });
-    _optionalChain([visibility, 'optionalAccess', _13 => _13.observe, 'call', _14 => _14(element)]);
+    _optionalChain([visibility, 'optionalAccess', _21 => _21.observe, 'call', _22 => _22(element)]);
     const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
     for (let parent = element; parent; parent = parent.parentElement) {
-      _optionalChain([resize, 'optionalAccess', _15 => _15.observe, 'call', _16 => _16(parent)]);
+      _optionalChain([resize, 'optionalAccess', _23 => _23.observe, 'call', _24 => _24(parent)]);
     }
-    targets.current.forEach((target) => _optionalChain([resize, 'optionalAccess', _17 => _17.observe, 'call', _18 => _18(target)]));
+    targets.current.forEach((target) => _optionalChain([resize, 'optionalAccess', _25 => _25.observe, 'call', _26 => _26(target)]));
     document.addEventListener("scroll", schedule, { passive: true, capture: true });
     window.addEventListener("resize", schedule);
-    _optionalChain([window, 'access', _19 => _19.visualViewport, 'optionalAccess', _20 => _20.addEventListener, 'call', _21 => _21("resize", schedule)]);
-    _optionalChain([window, 'access', _22 => _22.visualViewport, 'optionalAccess', _23 => _23.addEventListener, 'call', _24 => _24("scroll", schedule)]);
+    _optionalChain([window, 'access', _27 => _27.visualViewport, 'optionalAccess', _28 => _28.addEventListener, 'call', _29 => _29("resize", schedule)]);
+    _optionalChain([window, 'access', _30 => _30.visualViewport, 'optionalAccess', _31 => _31.addEventListener, 'call', _32 => _32("scroll", schedule)]);
     measure();
     return () => {
       cancelAnimationFrame(frame);
-      _optionalChain([resize, 'optionalAccess', _25 => _25.disconnect, 'call', _26 => _26()]);
-      _optionalChain([visibility, 'optionalAccess', _27 => _27.disconnect, 'call', _28 => _28()]);
+      _optionalChain([resize, 'optionalAccess', _33 => _33.disconnect, 'call', _34 => _34()]);
+      _optionalChain([visibility, 'optionalAccess', _35 => _35.disconnect, 'call', _36 => _36()]);
       document.removeEventListener("scroll", schedule, true);
       window.removeEventListener("resize", schedule);
-      _optionalChain([window, 'access', _29 => _29.visualViewport, 'optionalAccess', _30 => _30.removeEventListener, 'call', _31 => _31("resize", schedule)]);
-      _optionalChain([window, 'access', _32 => _32.visualViewport, 'optionalAccess', _33 => _33.removeEventListener, 'call', _34 => _34("scroll", schedule)]);
+      _optionalChain([window, 'access', _37 => _37.visualViewport, 'optionalAccess', _38 => _38.removeEventListener, 'call', _39 => _39("resize", schedule)]);
+      _optionalChain([window, 'access', _40 => _40.visualViewport, 'optionalAccess', _41 => _41.removeEventListener, 'call', _42 => _42("scroll", schedule)]);
     };
-  }, [keys, navigable, topOffset, scrollRoot]);
+  }, [keys, navigable, columns, topOffset, scrollRoot]);
   _react.useEffect.call(void 0, () => {
     const index = indexRef.current;
-    const button = controls.current.get(_nullishCoalesce(_nullishCoalesce(focusId, () => ( _optionalChain([items, 'access', _35 => _35[placement.active], 'optionalAccess', _36 => _36.id]))), () => ( "")));
+    const button = controls.current.get(_nullishCoalesce(_nullishCoalesce(focusId, () => ( _optionalChain([items, 'access', _43 => _43[placement.active], 'optionalAccess', _44 => _44.id]))), () => ( "")));
     if (!index || !button || !placement.visible) return;
     const horizontal = placement.mode === "row";
     const start = horizontal ? button.offsetLeft : button.offsetTop;
@@ -137,14 +150,14 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       offset: topOffset + GAP + (placement.mode === "row" ? ROW_HEIGHT : 0),
       behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
     };
-    if (_optionalChain([onNavigate, 'optionalCall', _37 => _37(item.id, target, options)]) === true) return;
+    if (_optionalChain([onNavigate, 'optionalCall', _45 => _45(item.id, target, options)]) === true) return;
     const scrollElement = scroller.current;
-    const view = viewportBounds(scrollElement);
-    const top = (_nullishCoalesce(_optionalChain([scrollElement, 'optionalAccess', _38 => _38.scrollTop]), () => ( window.scrollY))) + target.getBoundingClientRect().top - view.top - options.offset;
+    const view = viewportBounds(scrollElement, rootRef.current);
+    const top = (_nullishCoalesce(_optionalChain([scrollElement, 'optionalAccess', _46 => _46.scrollTop]), () => ( window.scrollY))) + target.getBoundingClientRect().top - view.top - options.offset;
     if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
     else window.scrollTo({ top, behavior: options.behavior });
   }
-  const activeId = _optionalChain([items, 'access', _39 => _39[placement.active], 'optionalAccess', _40 => _40.id]);
+  const activeId = _optionalChain([items, 'access', _47 => _47[placement.active], 'optionalAccess', _48 => _48.id]);
   const tabId = focusId && items.some((item) => item.id === focusId) ? focusId : activeId;
   const row = placement.mode === "row";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -160,7 +173,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       },
       className: _chunkKWLSBTB2cjs.cn.call(void 0, "relative min-w-0", navigable && row && "pt-16", className),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ2H4LJVGcjs.Grid, { columns, gap: "md", responsive: true, className: "min-w-0", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
             id: `${id}-${index}`,
@@ -204,7 +217,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
                       else return;
                       event.preventDefault();
                       const button = controls.current.get(items[next].id);
-                      _optionalChain([button, 'optionalAccess', _41 => _41.focus, 'call', _42 => _42({ preventScroll: true })]);
+                      _optionalChain([button, 'optionalAccess', _49 => _49.focus, 'call', _50 => _50({ preventScroll: true })]);
                       const index = indexRef.current;
                       if (index && button) {
                         if (row) index.scrollLeft = button.offsetLeft - (index.clientWidth - button.offsetWidth) / 2;

package/dist/{chunk-UBTLWSKK.js → chunk-EXXJXOUO.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   ScrollNavigator
-} from "./chunk-VT2WDFSU.js";
+} from "./chunk-V3XA7SDK.js";
 import {
   Button
 } from "./chunk-W326GKML.js";

package/dist/chunk-GA5SX7FE.js

@@ -0,0 +1,48 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/grid.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var fixedColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var responsiveColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
+var Grid = forwardRef(function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
+        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
+        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
+        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
+        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
+        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
+        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        gaps[gap],
+        maxWidth === "xl" && "max-w-2xl",
+        centered && "mx-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Grid
+};

package/dist/{chunk-PD5UQEKY.cjs → chunk-HSSSNAVX.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunk34AS3OCCcjs = require('./chunk-34AS3OCC.cjs');
+var _chunk6AMSRIQ4cjs = require('./chunk-6AMSRIQ4.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -23,7 +23,7 @@ function MessageScrollerProvider(props) {
 }
 function MessageScrollerNavigator(props) {
   const { scrollToMessage } = _messagescroller.useMessageScroller.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34AS3OCCcjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6AMSRIQ4cjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
     if (_optionalChain([props, 'access', _ => _.onNavigate, 'optionalCall', _2 => _2(id, target, options)]) === true) return true;
     const message = target.closest("[data-message-id]");
     const messageId = _optionalChain([message, 'optionalAccess', _3 => _3.dataset, 'access', _4 => _4.messageId]);

package/dist/{chunk-VT2WDFSU.js → chunk-V3XA7SDK.js}

@@ -1,4 +1,7 @@
 "use client";
+import {
+  Grid
+} from "./chunk-GA5SX7FE.js";
 import {
   Avatar,
   AvatarFallback,
@@ -22,7 +25,7 @@ function findScrollRoot(element) {
   }
   return null;
 }
-function viewportBounds(root) {
+function viewportBounds(root, element) {
   const viewport = window.visualViewport;
   const top = viewport?.offsetTop ?? 0;
   const left = viewport?.offsetLeft ?? 0;
@@ -36,11 +39,21 @@ function viewportBounds(root) {
     bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
     bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
   }
+  let landmark = element?.closest("main, [role='main']");
+  for (let parent = landmark?.parentElement?.closest("main, [role='main']"); parent; parent = parent.parentElement?.closest("main, [role='main']")) {
+    landmark = parent;
+  }
+  if (landmark) {
+    const rect = landmark.getBoundingClientRect();
+    bounds.left = Math.max(bounds.left, rect.left);
+    bounds.right = Math.min(bounds.right, rect.right);
+  }
   return bounds;
 }
 var ScrollNavigator = forwardRef(function ScrollNavigator2({
   items,
   label = "Browse items",
+  columns = 1,
   topOffset = 0,
   scrollRoot,
   onNavigate,
@@ -70,7 +83,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
       }
       const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
       scroller.current = scrollElement;
-      const view = viewportBounds(scrollElement);
+      const view = viewportBounds(scrollElement, element);
       const box = element.getBoundingClientRect();
       const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
       const top = Math.max(view.top + topOffset + GAP, box.top);
@@ -116,7 +129,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
       window.visualViewport?.removeEventListener("resize", schedule);
       window.visualViewport?.removeEventListener("scroll", schedule);
     };
-  }, [keys, navigable, topOffset, scrollRoot]);
+  }, [keys, navigable, columns, topOffset, scrollRoot]);
   useEffect(() => {
     const index = indexRef.current;
     const button = controls.current.get(focusId ?? items[placement.active]?.id ?? "");
@@ -139,7 +152,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
     };
     if (onNavigate?.(item.id, target, options) === true) return;
     const scrollElement = scroller.current;
-    const view = viewportBounds(scrollElement);
+    const view = viewportBounds(scrollElement, rootRef.current);
     const top = (scrollElement?.scrollTop ?? window.scrollY) + target.getBoundingClientRect().top - view.top - options.offset;
     if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
     else window.scrollTo({ top, behavior: options.behavior });
@@ -160,7 +173,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
       },
       className: cn("relative min-w-0", navigable && row && "pt-16", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { columns, gap: "md", responsive: true, className: "min-w-0", children: items.map((item, index) => /* @__PURE__ */ jsx(
           "div",
           {
             id: `${id}-${index}`,

package/dist/chunk-WE3F6EUM.cjs

@@ -0,0 +1,81 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkW5I4FN7Gcjs = require('./chunk-W5I4FN7G.cjs');
+
+
+var _chunk373W6VADcjs = require('./chunk-373W6VAD.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/list.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var spacingStyles = { none: "", tight: "space-y-1.5", normal: "space-y-3" };
+var markerStyles = {
+  none: "list-none",
+  disc: "list-disc pl-5",
+  decimal: "list-decimal pl-5"
+};
+var List = _react.forwardRef.call(void 0, function List2({ ordered = false, spacing = "none", marker = "none", divided = false, inset = "none", guide = false, textSize = "inherit", tone = "inherit", marginTop = "none", surface = "none", radius = "none", className, ...props }, ref) {
+  const Component = ordered ? "ol" : "ul";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Component,
+    {
+      ref,
+      role: marker === "none" ? "list" : void 0,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        spacingStyles[spacing],
+        markerStyles[marker],
+        divided && "divide-y divide-border",
+        inset === "xs" && "pl-1",
+        inset === "md" && "pl-4",
+        guide && "border-l border-border",
+        textSize === "xs" && "text-xs",
+        textSize === "sm" && "text-sm",
+        tone === "muted" && "text-muted-foreground",
+        tone === "soft" && "text-foreground/80",
+        marginTop === "sm" && "mt-2",
+        marginTop === "md" && "mt-4",
+        surface === "bordered" && "border border-border bg-background",
+        radius === "md" && "rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ListItem = _react.forwardRef.call(void 0, function ListItem2({ className, layout = "plain", sentiment = "neutral", actions, children, surface = "none", padding = "none", textSize = "inherit", tone = "inherit", position = "static", justify = "start", align = "start", gap = "xs", interactiveGroup = false, radius = "none", accent = "none", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+    layout === "row" && "flex items-start",
+    surface === "bordered" && "rounded-md border",
+    padding === "sm" && "p-2",
+    padding === "md" && "px-3 py-2",
+    padding === "compact" && "py-2.5",
+    textSize === "xs" && "text-xs",
+    textSize === "sm" && "text-sm",
+    tone === "soft" && "text-foreground/80",
+    position === "relative" && "relative",
+    justify === "between" && "justify-between gap-3",
+    align === "center" && "items-center",
+    align === "baseline" && "items-baseline",
+    gap === "xs" && "gap-1.5",
+    gap === "sm" && "gap-2",
+    interactiveGroup && "group",
+    radius === "md" && "rounded-md",
+    accent === "success" && "border-l-2 border-emerald-500 bg-emerald-500/5",
+    accent === "destructive" && "border-l-2 border-red-500 bg-red-500/5",
+    layout === "bullet" && "group flex min-h-8 items-start gap-3 pointer-coarse:min-h-[max(44px,2.75rem)]",
+    className
+  ), ...props, children: layout === "bullet" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkW5I4FN7Gcjs.SentimentDot, { sentiment, className: "mt-[5px] shrink-0" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { as: "div", variant: "small", className: "min-w-0 flex-1 leading-snug [overflow-wrap:anywhere]", children }),
+    actions
+  ] }) : children });
+});
+
+
+
+
+exports.List = List; exports.ListItem = ListItem;

package/dist/chunk-YFXZWDA5.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  SentimentDot
+} from "./chunk-YWAQRAXP.js";
+import {
+  Text
+} from "./chunk-EIY5LLSP.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/list.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var spacingStyles = { none: "", tight: "space-y-1.5", normal: "space-y-3" };
+var markerStyles = {
+  none: "list-none",
+  disc: "list-disc pl-5",
+  decimal: "list-decimal pl-5"
+};
+var List = forwardRef(function List2({ ordered = false, spacing = "none", marker = "none", divided = false, inset = "none", guide = false, textSize = "inherit", tone = "inherit", marginTop = "none", surface = "none", radius = "none", className, ...props }, ref) {
+  const Component = ordered ? "ol" : "ul";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      role: marker === "none" ? "list" : void 0,
+      className: cn(
+        spacingStyles[spacing],
+        markerStyles[marker],
+        divided && "divide-y divide-border",
+        inset === "xs" && "pl-1",
+        inset === "md" && "pl-4",
+        guide && "border-l border-border",
+        textSize === "xs" && "text-xs",
+        textSize === "sm" && "text-sm",
+        tone === "muted" && "text-muted-foreground",
+        tone === "soft" && "text-foreground/80",
+        marginTop === "sm" && "mt-2",
+        marginTop === "md" && "mt-4",
+        surface === "bordered" && "border border-border bg-background",
+        radius === "md" && "rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ListItem = forwardRef(function ListItem2({ className, layout = "plain", sentiment = "neutral", actions, children, surface = "none", padding = "none", textSize = "inherit", tone = "inherit", position = "static", justify = "start", align = "start", gap = "xs", interactiveGroup = false, radius = "none", accent = "none", ...props }, ref) {
+  return /* @__PURE__ */ jsx("li", { ref, className: cn(
+    layout === "row" && "flex items-start",
+    surface === "bordered" && "rounded-md border",
+    padding === "sm" && "p-2",
+    padding === "md" && "px-3 py-2",
+    padding === "compact" && "py-2.5",
+    textSize === "xs" && "text-xs",
+    textSize === "sm" && "text-sm",
+    tone === "soft" && "text-foreground/80",
+    position === "relative" && "relative",
+    justify === "between" && "justify-between gap-3",
+    align === "center" && "items-center",
+    align === "baseline" && "items-baseline",
+    gap === "xs" && "gap-1.5",
+    gap === "sm" && "gap-2",
+    interactiveGroup && "group",
+    radius === "md" && "rounded-md",
+    accent === "success" && "border-l-2 border-emerald-500 bg-emerald-500/5",
+    accent === "destructive" && "border-l-2 border-red-500 bg-red-500/5",
+    layout === "bullet" && "group flex min-h-8 items-start gap-3 pointer-coarse:min-h-[max(44px,2.75rem)]",
+    className
+  ), ...props, children: layout === "bullet" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SentimentDot, { sentiment, className: "mt-[5px] shrink-0" }),
+    /* @__PURE__ */ jsx(Text, { as: "div", variant: "small", className: "min-w-0 flex-1 leading-snug [overflow-wrap:anywhere]", children }),
+    actions
+  ] }) : children });
+});
+
+export {
+  List,
+  ListItem
+};

package/dist/chunk-Z2H4LJVG.cjs

@@ -0,0 +1,48 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/grid.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var fixedColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var responsiveColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
+var Grid = _react.forwardRef.call(void 0, function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
+  const Component = _nullishCoalesce(as, () => ( "div"));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Component,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
+        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
+        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
+        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
+        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
+        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
+        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        gaps[gap],
+        maxWidth === "xl" && "max-w-2xl",
+        centered && "mx-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+
+
+exports.Grid = Grid;

package/dist/primitives/chat.cjs

@@ -26,14 +26,15 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
-require('../chunk-34AS3OCC.cjs');
+var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
+require('../chunk-6AMSRIQ4.cjs');
 
 
 
 
 
 var _chunkNWDPH2Z7cjs = require('../chunk-NWDPH2Z7.cjs');
+require('../chunk-Z2H4LJVG.cjs');
 
 
 
@@ -178,15 +179,15 @@ var ChatThread = _react.forwardRef.call(void 0,
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
     const anchorId = useArrivingUserTurnId(messages);
     const workspace = appearance === "workspace";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkPD5UQEKYcjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkHSSSNAVXcjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkPD5UQEKYcjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkHSSSNAVXcjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
@@ -195,7 +196,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
                   if (m.status === "running") {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -208,7 +209,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                   const marker = markers[index];
                   const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                    _chunkPD5UQEKYcjs.MessageScrollerItem,
+                    _chunkHSSSNAVXcjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
@@ -264,15 +265,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { className: "h-4 w-4" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: scrollButtonLabel })
           ] })

package/dist/primitives/chat.js

@@ -26,14 +26,15 @@ import {
   MessageScrollerItem,
   MessageScrollerProvider,
   MessageScrollerViewport
-} from "../chunk-UBTLWSKK.js";
-import "../chunk-VT2WDFSU.js";
+} from "../chunk-EXXJXOUO.js";
+import "../chunk-V3XA7SDK.js";
 import {
   Message,
   MessageAction,
   MessageActions,
   MessageContent
 } from "../chunk-H4XH2PPU.js";
+import "../chunk-GA5SX7FE.js";
 import {
   InputGroup,
   InputGroupAddon,

package/dist/primitives/editable-list.cjs

@@ -1,7 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkW5I4FN7Gcjs = require('../chunk-W5I4FN7G.cjs');
+
+var _chunkWE3F6EUMcjs = require('../chunk-WE3F6EUM.cjs');
+require('../chunk-W5I4FN7G.cjs');
 
 
 var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
@@ -49,36 +51,29 @@ function EditableList({
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "border-t border-border pt-4", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { as: "span", variant: "caption", className: "text-xs font-medium uppercase tracking-wider", children: label }),
-    items.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "caption", className: "mt-3 italic", children: emptyText }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "mt-3 space-y-3", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "group flex items-start gap-3", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkW5I4FN7Gcjs.SentimentDot, { sentiment, className: "mt-[5px] shrink-0" }),
-      !readOnly && _optionalChain([editing, 'optionalAccess', _5 => _5.index]) === index ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkPQUSJEXLcjs.Input,
-          {
-            autoFocus: true,
-            value: editing.value,
-            "aria-label": `Edit ${itemName}`,
-            onChange: (event) => setEditing({ index, value: event.target.value }),
-            onKeyDown: (event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                commitEdit();
-              }
-              if (event.key === "Escape") setEditing(null);
-            },
-            grow: true
+    items.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "caption", className: "mt-3 italic", children: emptyText }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWE3F6EUMcjs.List, { spacing: "normal", className: "mt-3", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWE3F6EUMcjs.ListItem, { layout: "bullet", sentiment, actions: !readOnly && (_optionalChain([editing, 'optionalAccess', _5 => _5.index]) === index ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "icon-sm", shrink: true, className: "text-emerald-600", "aria-label": `Save ${itemName}`, onClick: commitEdit, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "quiet", size: "icon-sm", shrink: true, marginEnd: "negative-xs", "aria-label": `Cancel editing ${itemName}`, onClick: () => setEditing(null), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "h-4 w-4" }) })
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Edit ${itemName}`, onClick: () => setEditing({ index, value: item }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Pencil, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "icon", className: "-mr-1 h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Remove ${itemName}`, onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "h-4 w-4" }) })
+    ] })), children: !readOnly && _optionalChain([editing, 'optionalAccess', _6 => _6.index]) === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkPQUSJEXLcjs.Input,
+      {
+        autoFocus: true,
+        value: editing.value,
+        "aria-label": `Edit ${itemName}`,
+        onChange: (event) => setEditing({ index, value: event.target.value }),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitEdit();
           }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "icon-sm", shrink: true, className: "text-emerald-600", "aria-label": `Save ${itemName}`, onClick: commitEdit, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "quiet", size: "icon-sm", shrink: true, marginEnd: "negative-xs", "aria-label": `Cancel editing ${itemName}`, onClick: () => setEditing(null), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "h-4 w-4" }) })
-      ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { as: "span", variant: "small", className: "flex-1 leading-snug", children: item }),
-        !readOnly && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Edit ${itemName}`, onClick: () => setEditing({ index, value: item }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Pencil, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "icon", className: "-mr-1 h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Remove ${itemName}`, onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "h-4 w-4" }) })
-        ] })
-      ] })
-    ] }, `${item}-${index}`)) }),
+          if (event.key === "Escape") setEditing(null);
+        },
+        grow: true
+      }
+    ) : item }, `${item}-${index}`)) }),
     !readOnly && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-3 flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _chunkPQUSJEXLcjs.Input,

package/dist/primitives/editable-list.js

@@ -1,7 +1,9 @@
 "use client";
 import {
-  SentimentDot
-} from "../chunk-YWAQRAXP.js";
+  List,
+  ListItem
+} from "../chunk-YFXZWDA5.js";
+import "../chunk-YWAQRAXP.js";
 import {
   Text
 } from "../chunk-EIY5LLSP.js";
@@ -49,36 +51,29 @@ function EditableList({
   };
   return /* @__PURE__ */ jsxs("section", { className: cn("border-t border-border pt-4", className), children: [
     /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", className: "text-xs font-medium uppercase tracking-wider", children: label }),
-    items.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "caption", className: "mt-3 italic", children: emptyText }) : /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "group flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(SentimentDot, { sentiment, className: "mt-[5px] shrink-0" }),
-      !readOnly && editing?.index === index ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            autoFocus: true,
-            value: editing.value,
-            "aria-label": `Edit ${itemName}`,
-            onChange: (event) => setEditing({ index, value: event.target.value }),
-            onKeyDown: (event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                commitEdit();
-              }
-              if (event.key === "Escape") setEditing(null);
-            },
-            grow: true
+    items.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "caption", className: "mt-3 italic", children: emptyText }) : /* @__PURE__ */ jsx(List, { spacing: "normal", className: "mt-3", children: items.map((item, index) => /* @__PURE__ */ jsx(ListItem, { layout: "bullet", sentiment, actions: !readOnly && (editing?.index === index ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", shrink: true, className: "text-emerald-600", "aria-label": `Save ${itemName}`, onClick: commitEdit, children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "quiet", size: "icon-sm", shrink: true, marginEnd: "negative-xs", "aria-label": `Cancel editing ${itemName}`, onClick: () => setEditing(null), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Edit ${itemName}`, onClick: () => setEditing({ index, value: item }), children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "-mr-1 h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Remove ${itemName}`, onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+    ] })), children: !readOnly && editing?.index === index ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        value: editing.value,
+        "aria-label": `Edit ${itemName}`,
+        onChange: (event) => setEditing({ index, value: event.target.value }),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitEdit();
           }
-        ),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", shrink: true, className: "text-emerald-600", "aria-label": `Save ${itemName}`, onClick: commitEdit, children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "quiet", size: "icon-sm", shrink: true, marginEnd: "negative-xs", "aria-label": `Cancel editing ${itemName}`, onClick: () => setEditing(null), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { as: "span", variant: "small", className: "flex-1 leading-snug", children: item }),
-        !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Edit ${itemName}`, onClick: () => setEditing({ index, value: item }), children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "-mr-1 h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Remove ${itemName}`, onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
-        ] })
-      ] })
-    ] }, `${item}-${index}`)) }),
+          if (event.key === "Escape") setEditing(null);
+        },
+        grow: true
+      }
+    ) : item }, `${item}-${index}`)) }),
     !readOnly && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(
         Input,

package/dist/primitives/grid.cjs

@@ -1,47 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+var _chunkZ2H4LJVGcjs = require('../chunk-Z2H4LJVG.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/grid.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var fixedColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4"
-};
-var responsiveColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-};
-var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
-var Grid = _react.forwardRef.call(void 0, function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
-  const Component = _nullishCoalesce(as, () => ( "div"));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Component,
-    {
-      ref,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
-        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
-        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
-        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
-        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
-        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
-        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-        gaps[gap],
-        maxWidth === "xl" && "max-w-2xl",
-        centered && "mx-auto",
-        className
-      ),
-      ...props
-    }
-  );
-});
 
-
-exports.Grid = Grid;
+exports.Grid = _chunkZ2H4LJVGcjs.Grid;

package/dist/primitives/grid.js

@@ -1,47 +1,8 @@
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/grid.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var fixedColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4"
-};
-var responsiveColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-};
-var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
-var Grid = forwardRef(function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
-  const Component = as ?? "div";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className: cn(
-        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
-        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
-        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
-        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
-        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
-        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
-        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-        gaps[gap],
-        maxWidth === "xl" && "max-w-2xl",
-        centered && "mx-auto",
-        className
-      ),
-      ...props
-    }
-  );
-});
+  Grid
+} from "../chunk-GA5SX7FE.js";
+import "../chunk-G6SRSWXB.js";
 export {
   Grid
 };

package/dist/primitives/list.cjs

@@ -1,68 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/list.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var spacingStyles = { none: "", tight: "space-y-1.5", normal: "space-y-3" };
-var markerStyles = {
-  none: "list-none",
-  disc: "list-disc pl-5",
-  decimal: "list-decimal pl-5"
-};
-var List = _react.forwardRef.call(void 0, function List2({ ordered = false, spacing = "none", marker = "none", divided = false, inset = "none", guide = false, textSize = "inherit", tone = "inherit", marginTop = "none", surface = "none", radius = "none", className, ...props }, ref) {
-  const Component = ordered ? "ol" : "ul";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Component,
-    {
-      ref,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        spacingStyles[spacing],
-        markerStyles[marker],
-        divided && "divide-y divide-border",
-        inset === "xs" && "pl-1",
-        inset === "md" && "pl-4",
-        guide && "border-l border-border",
-        textSize === "xs" && "text-xs",
-        textSize === "sm" && "text-sm",
-        tone === "muted" && "text-muted-foreground",
-        tone === "soft" && "text-foreground/80",
-        marginTop === "sm" && "mt-2",
-        marginTop === "md" && "mt-4",
-        surface === "bordered" && "border border-border bg-background",
-        radius === "md" && "rounded-md",
-        className
-      ),
-      ...props
-    }
-  );
-});
-var ListItem = _react.forwardRef.call(void 0, function ListItem2({ className, layout = "plain", surface = "none", padding = "none", textSize = "inherit", tone = "inherit", position = "static", justify = "start", align = "start", gap = "xs", interactiveGroup = false, radius = "none", accent = "none", ...props }, ref) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-    layout === "row" && "flex items-start",
-    surface === "bordered" && "rounded-md border",
-    padding === "sm" && "p-2",
-    padding === "md" && "px-3 py-2",
-    padding === "compact" && "py-2.5",
-    textSize === "xs" && "text-xs",
-    textSize === "sm" && "text-sm",
-    tone === "soft" && "text-foreground/80",
-    position === "relative" && "relative",
-    justify === "between" && "justify-between gap-3",
-    align === "center" && "items-center",
-    align === "baseline" && "items-baseline",
-    gap === "xs" && "gap-1.5",
-    gap === "sm" && "gap-2",
-    interactiveGroup && "group",
-    radius === "md" && "rounded-md",
-    accent === "success" && "border-l-2 border-emerald-500 bg-emerald-500/5",
-    accent === "destructive" && "border-l-2 border-red-500 bg-red-500/5",
-    className
-  ), ...props });
-});
+var _chunkWE3F6EUMcjs = require('../chunk-WE3F6EUM.cjs');
+require('../chunk-W5I4FN7G.cjs');
+require('../chunk-373W6VAD.cjs');
+require('../chunk-EJP2L5QV.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.List = List; exports.ListItem = ListItem;
+exports.List = _chunkWE3F6EUMcjs.List; exports.ListItem = _chunkWE3F6EUMcjs.ListItem;

package/dist/primitives/list.d.cts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { Sentiment } from './sentiment-dot.cjs';
+import 'react/jsx-runtime';
+import '../lib/status-colors.cjs';
 
 interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement> {
     ordered?: boolean;
@@ -17,7 +20,11 @@ interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement>
 /** Semantic ordered or unordered list with controlled rhythm and markers. */
 declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLOListElement | HTMLUListElement>>;
 interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
-    layout?: "plain" | "row";
+    layout?: "plain" | "row" | "bullet";
+    /** A semantic dot with consistent spacing and wrapping in the bullet layout. */
+    sentiment?: Sentiment;
+    /** Trailing controls for a bullet row; the content keeps the same alignment without them. */
+    actions?: ReactNode;
     surface?: "none" | "bordered";
     padding?: "none" | "sm" | "compact" | "md";
     textSize?: "inherit" | "xs" | "sm";

package/dist/primitives/list.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { Sentiment } from './sentiment-dot.js';
+import 'react/jsx-runtime';
+import '../lib/status-colors.js';
 
 interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement> {
     ordered?: boolean;
@@ -17,7 +20,11 @@ interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement>
 /** Semantic ordered or unordered list with controlled rhythm and markers. */
 declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLOListElement | HTMLUListElement>>;
 interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
-    layout?: "plain" | "row";
+    layout?: "plain" | "row" | "bullet";
+    /** A semantic dot with consistent spacing and wrapping in the bullet layout. */
+    sentiment?: Sentiment;
+    /** Trailing controls for a bullet row; the content keeps the same alignment without them. */
+    actions?: ReactNode;
     surface?: "none" | "bordered";
     padding?: "none" | "sm" | "compact" | "md";
     textSize?: "inherit" | "xs" | "sm";

package/dist/primitives/list.js

@@ -1,67 +1,12 @@
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/list.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var spacingStyles = { none: "", tight: "space-y-1.5", normal: "space-y-3" };
-var markerStyles = {
-  none: "list-none",
-  disc: "list-disc pl-5",
-  decimal: "list-decimal pl-5"
-};
-var List = forwardRef(function List2({ ordered = false, spacing = "none", marker = "none", divided = false, inset = "none", guide = false, textSize = "inherit", tone = "inherit", marginTop = "none", surface = "none", radius = "none", className, ...props }, ref) {
-  const Component = ordered ? "ol" : "ul";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className: cn(
-        spacingStyles[spacing],
-        markerStyles[marker],
-        divided && "divide-y divide-border",
-        inset === "xs" && "pl-1",
-        inset === "md" && "pl-4",
-        guide && "border-l border-border",
-        textSize === "xs" && "text-xs",
-        textSize === "sm" && "text-sm",
-        tone === "muted" && "text-muted-foreground",
-        tone === "soft" && "text-foreground/80",
-        marginTop === "sm" && "mt-2",
-        marginTop === "md" && "mt-4",
-        surface === "bordered" && "border border-border bg-background",
-        radius === "md" && "rounded-md",
-        className
-      ),
-      ...props
-    }
-  );
-});
-var ListItem = forwardRef(function ListItem2({ className, layout = "plain", surface = "none", padding = "none", textSize = "inherit", tone = "inherit", position = "static", justify = "start", align = "start", gap = "xs", interactiveGroup = false, radius = "none", accent = "none", ...props }, ref) {
-  return /* @__PURE__ */ jsx("li", { ref, className: cn(
-    layout === "row" && "flex items-start",
-    surface === "bordered" && "rounded-md border",
-    padding === "sm" && "p-2",
-    padding === "md" && "px-3 py-2",
-    padding === "compact" && "py-2.5",
-    textSize === "xs" && "text-xs",
-    textSize === "sm" && "text-sm",
-    tone === "soft" && "text-foreground/80",
-    position === "relative" && "relative",
-    justify === "between" && "justify-between gap-3",
-    align === "center" && "items-center",
-    align === "baseline" && "items-baseline",
-    gap === "xs" && "gap-1.5",
-    gap === "sm" && "gap-2",
-    interactiveGroup && "group",
-    radius === "md" && "rounded-md",
-    accent === "success" && "border-l-2 border-emerald-500 bg-emerald-500/5",
-    accent === "destructive" && "border-l-2 border-red-500 bg-red-500/5",
-    className
-  ), ...props });
-});
+  List,
+  ListItem
+} from "../chunk-YFXZWDA5.js";
+import "../chunk-YWAQRAXP.js";
+import "../chunk-EIY5LLSP.js";
+import "../chunk-F7JHSZNT.js";
+import "../chunk-G6SRSWXB.js";
 export {
   List,
   ListItem

package/dist/primitives/message-scroller.cjs

@@ -11,8 +11,9 @@
 
 
 
-var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
-require('../chunk-34AS3OCC.cjs');
+var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
+require('../chunk-6AMSRIQ4.cjs');
+require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
@@ -27,4 +28,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunkPD5UQEKYcjs.MessageScroller; exports.MessageScrollerButton = _chunkPD5UQEKYcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkPD5UQEKYcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkPD5UQEKYcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkPD5UQEKYcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkPD5UQEKYcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkPD5UQEKYcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkPD5UQEKYcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkPD5UQEKYcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkPD5UQEKYcjs.useMessageScrollerVisibility;
+exports.MessageScroller = _chunkHSSSNAVXcjs.MessageScroller; exports.MessageScrollerButton = _chunkHSSSNAVXcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkHSSSNAVXcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkHSSSNAVXcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkHSSSNAVXcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkHSSSNAVXcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkHSSSNAVXcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkHSSSNAVXcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkHSSSNAVXcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkHSSSNAVXcjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.js

@@ -11,8 +11,9 @@ import {
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-UBTLWSKK.js";
-import "../chunk-VT2WDFSU.js";
+} from "../chunk-EXXJXOUO.js";
+import "../chunk-V3XA7SDK.js";
+import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/dist/primitives/scroll-navigator.cjs

@@ -2,9 +2,10 @@
 "use client";
 
 
-var _chunk34AS3OCCcjs = require('../chunk-34AS3OCC.cjs');
+var _chunk6AMSRIQ4cjs = require('../chunk-6AMSRIQ4.cjs');
+require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.ScrollNavigator = _chunk34AS3OCCcjs.ScrollNavigator;
+exports.ScrollNavigator = _chunk6AMSRIQ4cjs.ScrollNavigator;

package/dist/primitives/scroll-navigator.d.cts

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Card columns above the small breakpoint; always one column on mobile. */
+    columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */
     topOffset?: number;
     /** The nearest vertically scrolling ancestor is detected by default. */

package/dist/primitives/scroll-navigator.d.ts

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Card columns above the small breakpoint; always one column on mobile. */
+    columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */
     topOffset?: number;
     /** The nearest vertically scrolling ancestor is detected by default. */

package/dist/primitives/scroll-navigator.js

@@ -2,7 +2,8 @@
 "use client";
 import {
   ScrollNavigator
-} from "../chunk-VT2WDFSU.js";
+} from "../chunk-V3XA7SDK.js";
+import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-G6SRSWXB.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [