gridsmith-ui 0.3.4 → 0.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { cn, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
-import { Icon } from './chunk-WVB3SRXW.js';
+import { Icon } from './chunk-6TMNEBBJ.js';
 import { __commonJS, __toESM } from './chunk-5WRI5ZAA.js';
 import * as React6 from 'react';
 import React6__default, { createContext, forwardRef, useState, useCallback, useRef, useContext, useId, useMemo, useEffect, useLayoutEffect, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
@@ -1909,7 +1909,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
                   "flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer",
                   "transition-colors rounded-[var(--ds-radius-sm)]",
                   "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                  item.disabled ? "opacity-disabled cursor-not-allowed" : item.variant === "destructive" ? "text-[var(--ds-status-error)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)] focus-visible:bg-[var(--ds-bg-muted)]"
+                  item.disabled ? "opacity-disabled cursor-not-allowed" : item.variant === "destructive" ? "text-[var(--ds-status-error)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]"
                 ),
                 children: [
                   item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
@@ -1925,8 +1925,46 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     )
   ] });
 }
+var DEFAULT_BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+var BreakpointWidthCtx = createContext(null);
+function BreakpointWidthProvider({ width, children }) {
+  return createElement(BreakpointWidthCtx, { value: width }, children);
+}
+function readBpFromCSS(key2) {
+  if (typeof window === "undefined") return DEFAULT_BREAKPOINTS[key2];
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(`--ds-bp-${key2}`).trim();
+  const px = parseInt(raw, 10);
+  return isNaN(px) ? DEFAULT_BREAKPOINTS[key2] : px;
+}
+function useBreakpoint(key2) {
+  const overrideWidth = useContext(BreakpointWidthCtx);
+  const px = useMemo(() => readBpFromCSS(key2), [key2]);
+  const [matches2, setMatches] = useState(() => {
+    if (overrideWidth !== null) return overrideWidth <= px;
+    return typeof window !== "undefined" ? window.matchMedia(`(max-width: ${px}px)`).matches : false;
+  });
+  useEffect(() => {
+    if (overrideWidth !== null) {
+      setMatches(overrideWidth <= px);
+      return;
+    }
+    const mql = window.matchMedia(`(max-width: ${px}px)`);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    setMatches(mql.matches);
+    return () => mql.removeEventListener("change", handler);
+  }, [px, overrideWidth]);
+  return matches2;
+}
 function BulkActionBar({ selectedCount, actions, onClearSelection, className }) {
+  const isMobile = useBreakpoint("sm");
   if (selectedCount === 0) return null;
+  const dropdownItems = actions.map((action) => ({
+    label: action.label,
+    icon: action.icon,
+    onClick: action.onClick,
+    variant: action.variant
+  }));
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1946,7 +1984,14 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
           " selected"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--ds-border-subtle)]" }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2", children: actions.map((action, i) => /* @__PURE__ */ jsx(
+        isMobile ? /* @__PURE__ */ jsx(
+          DropdownMenu,
+          {
+            trigger: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), children: "Actions" }),
+            items: dropdownItems,
+            align: "start"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2", children: actions.map((action, i) => /* @__PURE__ */ jsx(
           Button,
           {
             variant: action.variant === "destructive" ? "destructive" : "secondary",
@@ -2368,7 +2413,7 @@ function OptionButton({
         "w-full text-left cursor-pointer rounded-[var(--ds-radius-sm)]",
         "transition-colors flex items-center gap-ds-2",
         size === "sm" ? "px-ds-2 py-ds-1 text-xs" : "px-ds-2 py-ds-1.5 text-sm",
-        isSelected && !multiple ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+        isSelected && !multiple ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)]"
       ),
       children: [
         multiple && /* @__PURE__ */ jsx(
@@ -2868,7 +2913,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                       "w-full aspect-square flex items-center justify-center text-xs rounded-[var(--ds-radius-sm)]",
                       "transition-colors cursor-pointer",
                       "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                      isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold" : isToday2 ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]"
+                      isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold" : isToday2 ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                     ),
                     children: day
                   },
@@ -3325,7 +3370,7 @@ function TimePicker({
                 className: cn(
                   "w-full text-center text-sm py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
                   "transition-colors",
-                  (use24Hour ? h2 === parseInt(value) : h2 === parsed.hour) ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]"
+                  (use24Hour ? h2 === parseInt(value) : h2 === parsed.hour) ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                 ),
                 children: pad(h2)
               },
@@ -3339,7 +3384,7 @@ function TimePicker({
                 className: cn(
                   "w-full text-center text-sm py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
                   "transition-colors",
-                  m === parsed.minute ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]"
+                  m === parsed.minute ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                 ),
                 children: pad(m)
               },
@@ -3354,7 +3399,7 @@ function TimePicker({
                   className: cn(
                     "text-xs font-medium py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
                     "transition-colors text-center",
-                    p === parsed.period ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]"
+                    p === parsed.period ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                   ),
                   children: p
                 },
@@ -4033,24 +4078,24 @@ function ColorPicker({
     },
     [hsl, emitChange]
   );
-  const handleMouseDown2 = useCallback(
+  const handlePointerDown = useCallback(
     (e) => {
       if (disabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
       draggingRef.current = true;
       handleSatLightInteraction(e.clientX, e.clientY);
-      const onMove = (ev) => {
-        if (draggingRef.current) handleSatLightInteraction(ev.clientX, ev.clientY);
-      };
-      const onUp = () => {
-        draggingRef.current = false;
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-      };
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onUp);
     },
     [disabled, handleSatLightInteraction]
   );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (draggingRef.current) handleSatLightInteraction(e.clientX, e.clientY);
+    },
+    [handleSatLightInteraction]
+  );
+  const handlePointerUp = useCallback(() => {
+    draggingRef.current = false;
+  }, []);
   const handleHexChange = useCallback(
     (raw) => {
       setHexInput(raw);
@@ -4067,7 +4112,7 @@ function ColorPicker({
     {
       "aria-invalid": error || void 0,
       className: cn(
-        "w-64 p-ds-3 space-y-3",
+        "w-full max-w-64 p-ds-3 space-y-3",
         "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
         "border-[length:var(--ds-border-width)]",
         error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)]",
@@ -4081,8 +4126,10 @@ function ColorPicker({
           "div",
           {
             ref: satLightRef,
-            onMouseDown: handleMouseDown2,
-            className: "relative h-36 rounded-[var(--ds-radius-md)] cursor-crosshair overflow-hidden",
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            className: "relative h-40 rounded-[var(--ds-radius-md)] cursor-crosshair overflow-hidden touch-none",
             style: {
               background: `
             linear-gradient(to top, #000, transparent),
@@ -4092,7 +4139,7 @@ function ColorPicker({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: "absolute w-4 h-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md pointer-events-none",
+                className: "absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md pointer-events-none",
                 style: {
                   left: `${hsl.s}%`,
                   top: `${100 - hsl.l}%`,
@@ -4110,7 +4157,7 @@ function ColorPicker({
             max: 360,
             value: hsl.h,
             onChange: (e) => emitChange({ ...hsl, h: Number(e.target.value) }),
-            className: "w-full h-3 rounded-full cursor-pointer appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer",
+            className: "w-full h-3.5 rounded-full cursor-pointer appearance-none touch-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none",
             style: {
               background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
             }
@@ -4124,7 +4171,7 @@ function ColorPicker({
             max: 100,
             value: Math.round(hsl.a * 100),
             onChange: (e) => emitChange({ ...hsl, a: Number(e.target.value) / 100 }),
-            className: "w-full h-3 rounded-full cursor-pointer appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer",
+            className: "w-full h-3.5 rounded-full cursor-pointer appearance-none touch-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none",
             style: {
               background: `linear-gradient(to right, transparent, ${hslToHex({ ...hsl, a: 1 })})`
             }
@@ -4155,7 +4202,7 @@ function ColorPicker({
             }
           )
         ] }),
-        swatches.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-1.5", children: swatches.map((swatch) => /* @__PURE__ */ jsx(
+        swatches.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-2", children: swatches.map((swatch) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -4164,7 +4211,7 @@ function ColorPicker({
               emitChange(parsed);
             },
             className: cn(
-              "w-6 h-6 rounded-[var(--ds-radius-sm)] cursor-pointer",
+              "w-7 h-7 rounded-[var(--ds-radius-sm)] cursor-pointer",
               "border-[length:var(--ds-border-width)]",
               "hover:scale-110 transition-transform",
               "focus-visible:shadow-[var(--ds-shadow-focus)] outline-none",
@@ -4302,7 +4349,8 @@ function TransferList({
     const allChecked = enabledIds.every((id) => checkedSelected.has(id));
     setCheckedSelected(allChecked ? /* @__PURE__ */ new Set() : new Set(enabledIds));
   }, [filteredSelected, checkedSelected]);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-stretch gap-ds-3", className), children: [
+  const isStacked = useBreakpoint("sm");
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(isStacked ? "flex flex-col gap-ds-2" : "flex items-stretch gap-ds-3", className), children: [
     /* @__PURE__ */ jsx(
       Panel,
       {
@@ -4313,21 +4361,22 @@ function TransferList({
         onToggle: (id) => toggleCheck(id, checkedAvailable, setCheckedAvailable),
         onToggleAll: toggleAllAvailable,
         search: searchLeft,
-        onSearchChange: searchable ? setSearchLeft : void 0
+        onSearchChange: searchable ? setSearchLeft : void 0,
+        stacked: isStacked
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-ds-2 shrink-0", children: [
-      /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center justify-center gap-ds-2 shrink-0",
+      isStacked ? "flex-row py-ds-1" : "flex-col"
+    ), children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
           onClick: moveAllRight,
           disabled: !available.filter((i) => !i.disabled).length,
-          "aria-label": "Move all right",
+          "aria-label": isStacked ? "Move all down" : "Move all right",
           className: cn(actionButtonClass),
-          children: [
-            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }),
-            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "-ml-ds-2.5" })
-          ]
+          children: /* @__PURE__ */ jsx(Icon, { name: isStacked ? "chevrons-down" : "chevrons-right", size: 14 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -4335,9 +4384,9 @@ function TransferList({
         {
           onClick: moveRight,
           disabled: !checkedAvailable.size,
-          "aria-label": "Move selected right",
+          "aria-label": isStacked ? "Move selected down" : "Move selected right",
           className: cn(actionButtonClass),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 })
+          children: /* @__PURE__ */ jsx(Icon, { name: isStacked ? "chevron-down" : "chevron-right", size: 14 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -4345,22 +4394,19 @@ function TransferList({
         {
           onClick: moveLeft,
           disabled: !checkedSelected.size,
-          "aria-label": "Move selected left",
+          "aria-label": isStacked ? "Move selected up" : "Move selected left",
           className: cn(actionButtonClass),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" })
+          children: /* @__PURE__ */ jsx(Icon, { name: isStacked ? "chevron-up" : "chevron-left", size: 14 })
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         "button",
         {
           onClick: moveAllLeft,
           disabled: !selected.filter((i) => !i.disabled).length,
-          "aria-label": "Move all left",
+          "aria-label": isStacked ? "Move all up" : "Move all left",
           className: cn(actionButtonClass),
-          children: [
-            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }),
-            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180 -ml-ds-2.5" })
-          ]
+          children: /* @__PURE__ */ jsx(Icon, { name: isStacked ? "chevrons-up" : "chevrons-left", size: 14 })
         }
       )
     ] }),
@@ -4374,7 +4420,8 @@ function TransferList({
         onToggle: (id) => toggleCheck(id, checkedSelected, setCheckedSelected),
         onToggleAll: toggleAllSelected,
         search: searchRight,
-        onSearchChange: searchable ? setSearchRight : void 0
+        onSearchChange: searchable ? setSearchRight : void 0,
+        stacked: isStacked
       }
     )
   ] });
@@ -4389,7 +4436,7 @@ var actionButtonClass = [
   "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
   "disabled:opacity-disabled disabled:pointer-events-none"
 ].join(" ");
-function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, search, onSearchChange }) {
+function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, search, onSearchChange, stacked }) {
   const enabledItems = items.filter((i) => !i.disabled);
   const allChecked = enabledItems.length > 0 && enabledItems.every((i) => checked.has(i.id));
   const someChecked = enabledItems.some((i) => checked.has(i.id));
@@ -4397,10 +4444,11 @@ function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, searc
     "div",
     {
       className: cn(
-        "flex-1 min-w-[180px] flex flex-col",
+        "flex flex-col",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         "rounded-[var(--ds-radius-md)] overflow-hidden",
-        "bg-[var(--ds-bg-surface)]"
+        "bg-[var(--ds-bg-surface)]",
+        stacked ? "w-full" : "flex-1 min-w-[180px]"
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2.5 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: [
@@ -4425,7 +4473,7 @@ function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, searc
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto max-h-[240px]", style: { padding: "var(--ds-space-1)" }, children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto", stacked ? "max-h-[160px]" : "max-h-[240px]"), style: { padding: "var(--ds-space-1)" }, children: [
           items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] text-center py-ds-6", children: "No items" }),
           items.map((item) => /* @__PURE__ */ jsxs(
             "label",
@@ -81229,14 +81277,35 @@ var HastEmitter = class {
   }
 };
 var lowlight = createLowlight(grammars2);
+var DEFAULT_TOOLBAR = [
+  "blockType",
+  "fontFamily",
+  "textSize",
+  "formatting",
+  "colors",
+  "alignment",
+  "lists",
+  "blocks",
+  "insert",
+  "extras",
+  "history"
+];
+var MINIMAL_TOOLBAR = [
+  "formatting",
+  "lists",
+  "insert",
+  "history"
+];
 function RichTextEditor({
   content = "",
   placeholder = "Start writing...",
   onChange,
   editable = true,
+  toolbar = "full",
   className,
   ref
 }) {
+  const resolvedToolbar = toolbar === "full" ? DEFAULT_TOOLBAR : toolbar === "minimal" ? MINIMAL_TOOLBAR : toolbar;
   const editor = useEditor({
     extensions: [
       index_default3.configure({ codeBlock: false }),
@@ -81276,7 +81345,7 @@ function RichTextEditor({
         className
       ),
       children: [
-        editable && /* @__PURE__ */ jsx(Toolbar, { editor }),
+        editable && /* @__PURE__ */ jsx(Toolbar, { editor, groups: resolvedToolbar }),
         /* @__PURE__ */ jsx(
           EditorContent,
           {
@@ -81325,8 +81394,9 @@ var TEXT_SIZES = [
   { label: "Large", value: "1.2em" },
   { label: "Huge", value: "1.5em" }
 ];
-function Toolbar({ editor }) {
+function Toolbar({ editor, groups }) {
   const [, forceUpdate] = useState(0);
+  const isMobile = useBreakpoint("sm");
   useEffect(() => {
     const handler = () => forceUpdate((n) => n + 1);
     editor.on("selectionUpdate", handler);
@@ -81337,19 +81407,23 @@ function Toolbar({ editor }) {
     };
   }, [editor]);
   const inTable = editor.isActive("table");
-  return /* @__PURE__ */ jsxs("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-ds-0.5 px-ds-2 py-ds-1", children: [
-      /* @__PURE__ */ jsx(BlockTypeSelect, { editor }),
-      /* @__PURE__ */ jsx(FontFamilySelect, { editor }),
-      /* @__PURE__ */ jsx(TextSizeControls, { editor }),
-      /* @__PURE__ */ jsx(Divider, {}),
+  const has = (g) => groups.includes(g);
+  const groupElements = [];
+  if (has("blockType")) groupElements.push(/* @__PURE__ */ jsx(BlockTypeSelect, { editor }, "blockType"));
+  if (has("fontFamily")) groupElements.push(/* @__PURE__ */ jsx(FontFamilySelect, { editor }, "fontFamily"));
+  if (has("textSize")) groupElements.push(/* @__PURE__ */ jsx(TextSizeControls, { editor }, "textSize"));
+  if (has("formatting")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold (Ctrl+B)", children: /* @__PURE__ */ jsx(Icon, { name: "bold", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic (Ctrl+I)", children: /* @__PURE__ */ jsx(Icon, { name: "italic", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("underline"), onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline (Ctrl+U)", children: /* @__PURE__ */ jsx(Icon, { name: "underline", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run(), title: "Strikethrough", children: /* @__PURE__ */ jsx(Icon, { name: "strikethrough", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "formatting")
+    );
+  }
+  if (has("colors")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(
           ColorPicker2,
@@ -81371,45 +81445,83 @@ function Toolbar({ editor }) {
             icon: /* @__PURE__ */ jsx(Icon, { name: "highlight", size: 16 })
           }
         )
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "colors")
+    );
+  }
+  if (has("alignment")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive({ textAlign: "left" }), onClick: () => editor.chain().focus().setTextAlign("left").run(), title: "Align left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive({ textAlign: "center" }), onClick: () => editor.chain().focus().setTextAlign("center").run(), title: "Align center", children: /* @__PURE__ */ jsx(Icon, { name: "align-center", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive({ textAlign: "right" }), onClick: () => editor.chain().focus().setTextAlign("right").run(), title: "Align right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "alignment")
+    );
+  }
+  if (has("lists")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), title: "Bullet list", children: /* @__PURE__ */ jsx(Icon, { name: "list", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), title: "Ordered list", children: /* @__PURE__ */ jsx(Icon, { name: "list-ordered", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("taskList"), onClick: () => editor.chain().focus().toggleTaskList().run(), title: "Task list", children: /* @__PURE__ */ jsx(Icon, { name: "list-checks", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "lists")
+    );
+  }
+  if (has("blocks")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("blockquote"), onClick: () => editor.chain().focus().toggleBlockquote().run(), title: "Blockquote", children: /* @__PURE__ */ jsx(Icon, { name: "quote", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("codeBlock"), onClick: () => editor.chain().focus().toggleCodeBlock().run(), title: "Code block", children: /* @__PURE__ */ jsx(Icon, { name: "code", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "blocks")
+    );
+  }
+  if (has("insert")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(LinkPopover, { editor }),
         /* @__PURE__ */ jsx(ImagePopover, { editor }),
         /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), disabled: inTable, title: "Insert table", children: /* @__PURE__ */ jsx(Icon, { name: "table", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "insert")
+    );
+  }
+  if (has("extras")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("code"), onClick: () => editor.chain().focus().toggleCode().run(), title: "Inline code", children: /* @__PURE__ */ jsx(Icon, { name: "code", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("superscript"), onClick: () => editor.chain().focus().toggleSuperscript().run(), title: "Superscript", children: /* @__PURE__ */ jsx(Icon, { name: "superscript", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("subscript"), onClick: () => editor.chain().focus().toggleSubscript().run(), title: "Subscript", children: /* @__PURE__ */ jsx(Icon, { name: "subscript", size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
+      ] }, "extras")
+    );
+  }
+  if (has("history")) {
+    groupElements.push(
       /* @__PURE__ */ jsxs(ToolGroup, { children: [
         /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo (Ctrl+Z)", children: /* @__PURE__ */ jsx(Icon, { name: "undo", size: 16 }) }),
         /* @__PURE__ */ jsx(ToolBtn, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo (Ctrl+Shift+Z)", children: /* @__PURE__ */ jsx(Icon, { name: "redo", size: 16 }) })
-      ] })
-    ] }),
-    inTable && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-0.5 px-ds-2 py-ds-1 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-2xs text-[var(--ds-text-muted)] uppercase tracking-wider mr-ds-1", children: "Table" }),
+      ] }, "history")
+    );
+  }
+  const withDividers = groupElements.reduce((acc, el, i) => {
+    if (i > 0) acc.push(/* @__PURE__ */ jsx(Divider, {}, `d-${i}`));
+    acc.push(el);
+    return acc;
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-ds-0.5 px-ds-2 py-ds-1",
+          isMobile ? "overflow-x-auto flex-nowrap scrollbar-none" : "flex-wrap"
+        ),
+        children: withDividers
+      }
+    ),
+    inTable && /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center gap-ds-0.5 px-ds-2 py-ds-1 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+      isMobile && "overflow-x-auto flex-nowrap scrollbar-none"
+    ), children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xs text-[var(--ds-text-muted)] uppercase tracking-wider mr-ds-1 shrink-0", children: "Table" }),
       /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().addRowAfter().run(), label: "+ Row" }),
       /* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().addColumnAfter().run(), label: "+ Col" }),
       /* @__PURE__ */ jsx(Divider, {}),
@@ -81468,7 +81580,7 @@ function TextSizeControls({ editor }) {
   };
   return /* @__PURE__ */ jsxs(ToolGroup, { children: [
     /* @__PURE__ */ jsx(ToolBtn, { onClick: decrease, disabled: currentIdx <= 0, title: `Decrease text size (${TEXT_SIZES[Math.max(0, currentIdx - 1)]?.label})`, children: /* @__PURE__ */ jsx("span", { className: "text-2xs font-bold leading-none select-none", children: "A" }) }),
-    /* @__PURE__ */ jsx(ToolBtn, { onClick: increase, disabled: currentIdx >= TEXT_SIZES.length - 1, title: `Increase text size (${TEXT_SIZES[Math.min(TEXT_SIZES.length - 1, currentIdx + 1)]?.label})`, children: /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold leading-none select-none", children: "A" }) })
+    /* @__PURE__ */ jsx(ToolBtn, { onClick: increase, disabled: currentIdx >= TEXT_SIZES.length - 1, title: `Increase text size (${TEXT_SIZES[Math.min(TEXT_SIZES.length - 1, currentIdx + 1)]?.label})`, children: /* @__PURE__ */ jsx("span", { className: "text-base font-bold leading-none select-none", children: "A" }) })
   ] });
 }
 function ColorPicker2({
@@ -81985,7 +82097,7 @@ function MentionInput({
               className: cn(
                 "flex items-center gap-ds-2.5 w-full px-ds-3 py-ds-1.5 text-left text-sm cursor-pointer",
                 "transition-colors duration-[var(--ds-transition-speed)]",
-                i === activeIndex ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+                i === activeIndex ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
               ),
               onMouseDown: (e) => {
                 e.preventDefault();
@@ -82154,7 +82266,7 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
     {
       "data-card": "",
       className: cn(
-        "flex flex-col p-ds-5 min-w-0",
+        "flex flex-col p-ds-3 sm:p-ds-5 min-w-0",
         "bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)]",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         isInteractive ? [
@@ -82324,37 +82436,6 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
     ] }, i);
   }) });
 }
-var DEFAULT_BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-var BreakpointWidthCtx = createContext(null);
-function BreakpointWidthProvider({ width, children }) {
-  return createElement(BreakpointWidthCtx, { value: width }, children);
-}
-function readBpFromCSS(key2) {
-  if (typeof window === "undefined") return DEFAULT_BREAKPOINTS[key2];
-  const raw = getComputedStyle(document.documentElement).getPropertyValue(`--ds-bp-${key2}`).trim();
-  const px = parseInt(raw, 10);
-  return isNaN(px) ? DEFAULT_BREAKPOINTS[key2] : px;
-}
-function useBreakpoint(key2) {
-  const overrideWidth = useContext(BreakpointWidthCtx);
-  const px = useMemo(() => readBpFromCSS(key2), [key2]);
-  const [matches2, setMatches] = useState(() => {
-    if (overrideWidth !== null) return overrideWidth <= px;
-    return typeof window !== "undefined" ? window.matchMedia(`(max-width: ${px}px)`).matches : false;
-  });
-  useEffect(() => {
-    if (overrideWidth !== null) {
-      setMatches(overrideWidth <= px);
-      return;
-    }
-    const mql = window.matchMedia(`(max-width: ${px}px)`);
-    const handler = (e) => setMatches(e.matches);
-    mql.addEventListener("change", handler);
-    setMatches(mql.matches);
-    return () => mql.removeEventListener("change", handler);
-  }, [px, overrideWidth]);
-  return matches2;
-}
 function Table2({
   columns,
   data,
@@ -82442,7 +82523,7 @@ function Table2({
     if (data.length === 0 && emptyState) {
       return /* @__PURE__ */ jsx("div", { ref, className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-ds-3", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
       return /* @__PURE__ */ jsxs(
         "div",
@@ -82473,7 +82554,7 @@ function Table2({
     {
       ref,
       className: cn(
-        "w-full overflow-auto",
+        "w-full overflow-x-auto",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         "rounded-[var(--ds-radius-md)]",
         GLASS_SURFACE,
@@ -83071,7 +83152,7 @@ function OverflowPopover({
         {
           ref: floatingRef,
           className: cn(
-            "fixed z-[9999] w-56 max-h-48 overflow-y-auto",
+            "fixed z-[var(--ds-z-popover)] w-56 max-h-48 overflow-y-auto",
             "bg-[var(--ds-bg-surface-elevated)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -83293,31 +83374,48 @@ function WeekView({
   selectedDate,
   onDayClick,
   onEventClick,
-  weekStartsOn,
-  visibleDays = 7
+  weekStartsOn
 }) {
-  const days = useMemo(() => {
-    const allDays = getWeekDays(date, weekStartsOn);
-    if (visibleDays === 7) return allDays;
-    const dayOfWeek = date.getDay();
-    const startIdx = Math.max(0, Math.min(allDays.findIndex((d2) => d2.getDay() === dayOfWeek), allDays.length - visibleDays));
-    return allDays.slice(startIdx, startIdx + visibleDays);
-  }, [date, weekStartsOn, visibleDays]);
+  const days = useMemo(() => getWeekDays(date, weekStartsOn), [date, weekStartsOn]);
   const allDayEvents = useMemo(() => {
     return days.map(
       (day) => getEventsForDay(events2, day).filter((e) => e.allDay)
     );
   }, [days, events2]);
   const hasAllDay = allDayEvents.some((d2) => d2.length > 0);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "grid border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
-        style: { gridTemplateColumns: `56px repeat(${days.length}, 1fr)` },
-        children: [
-          /* @__PURE__ */ jsx("div", {}),
-          days.map((day, i) => {
+  const containerRef = useRef(null);
+  const syncingScroll = useRef(false);
+  const handleScroll = useCallback((e) => {
+    if (syncingScroll.current) return;
+    syncingScroll.current = true;
+    const source3 = e.target;
+    const scrollLeft = source3.scrollLeft;
+    const panels = containerRef.current?.querySelectorAll("[data-week-scroll]");
+    panels?.forEach((panel) => {
+      if (panel !== source3) panel.scrollLeft = scrollLeft;
+    });
+    syncingScroll.current = false;
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const panels = container.querySelectorAll("[data-week-scroll]");
+    panels.forEach((panel) => panel.addEventListener("scroll", handleScroll));
+    return () => {
+      panels.forEach((panel) => panel.removeEventListener("scroll", handleScroll));
+    };
+  }, [handleScroll, hasAllDay]);
+  const MIN_DAY_WIDTH = 100;
+  const dayGridColumns = `repeat(${days.length}, minmax(${MIN_DAY_WIDTH}px, 1fr))`;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid",
+          style: { gridTemplateColumns: dayGridColumns, minWidth: MIN_DAY_WIDTH * days.length },
+          children: days.map((day, i) => {
             const today = isToday(day);
             const selected = selectedDate && isSameDay2(day, selectedDate);
             return /* @__PURE__ */ jsxs(
@@ -83325,8 +83423,8 @@ function WeekView({
               {
                 className: cn(
                   "text-center py-ds-2 cursor-pointer transition-colors",
-                  "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
                   "hover:bg-[var(--ds-bg-muted)]",
+                  i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
                   selected && "bg-[var(--ds-accent-primary)]/5"
                 ),
                 onClick: () => onDayClick?.(day),
@@ -83347,20 +83445,23 @@ function WeekView({
               i
             );
           })
-        ]
-      }
-    ),
-    hasAllDay && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "grid border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30",
-        style: { gridTemplateColumns: `56px repeat(${days.length}, 1fr)` },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
-          allDayEvents.map((dayEvts, i) => /* @__PURE__ */ jsx(
+        }
+      ) })
+    ] }),
+    hasAllDay && /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid",
+          style: { gridTemplateColumns: dayGridColumns, minWidth: MIN_DAY_WIDTH * days.length },
+          children: allDayEvents.map((dayEvts, i) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] p-ds-0.5 space-y-ds-0.5 min-h-[28px]",
+              className: cn(
+                "p-ds-0.5 space-y-ds-0.5 min-h-[28px]",
+                i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
+              ),
               children: dayEvts.map((event) => /* @__PURE__ */ jsx(
                 EventBar,
                 {
@@ -83373,65 +83474,72 @@ function WeekView({
             },
             i
           ))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "grid relative",
-        style: {
-          gridTemplateColumns: `56px repeat(${days.length}, 1fr)`,
-          height: GRID_HEIGHT
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 relative border-r-[length:var(--ds-divider-width)] border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", style: { height: GRID_HEIGHT }, children: HOURS.map((h2) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute right-0 pr-ds-2 text-2xs text-[var(--ds-text-muted)] -translate-y-1/2",
+          style: { top: h2 * HOUR_HEIGHT },
+          children: h2 > 0 && formatHour(h2)
         },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "relative", children: HOURS.map((h2) => /* @__PURE__ */ jsx(
+        h2
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "relative",
+          style: { height: GRID_HEIGHT, minWidth: MIN_DAY_WIDTH * days.length },
+          children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute right-0 pr-ds-2 text-2xs text-[var(--ds-text-muted)] -translate-y-1/2",
-              style: { top: h2 * HOUR_HEIGHT },
-              children: h2 > 0 && formatHour(h2)
-            },
-            h2
-          )) }),
-          days.map((day, i) => {
-            const dayEvents = getEventsForDay(events2, day).filter((e) => !e.allDay);
-            const layout = getOverlappingGroups(dayEvents);
-            const today = isToday(day);
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "relative border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
-                onClick: () => onDayClick?.(day),
-                children: [
-                  HOURS.map((h2) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "absolute left-0 right-0 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
-                      style: { top: h2 * HOUR_HEIGHT }
-                    },
-                    h2
-                  )),
-                  today && /* @__PURE__ */ jsx(CurrentTimeLine, {}),
-                  layout.map(({ event, column, totalColumns }) => /* @__PURE__ */ jsx(
-                    TimedEvent,
-                    {
-                      event,
-                      category: categories[event.category ?? ""],
-                      column,
-                      totalColumns,
-                      onEventClick
-                    },
-                    event.id
-                  ))
-                ]
-              },
-              i
-            );
-          })
-        ]
-      }
-    ) })
+              className: "grid h-full",
+              style: { gridTemplateColumns: dayGridColumns },
+              children: days.map((day, i) => {
+                const dayEvents = getEventsForDay(events2, day).filter((e) => !e.allDay);
+                const layout = getOverlappingGroups(dayEvents);
+                const today = isToday(day);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "relative",
+                      i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
+                    ),
+                    onClick: () => onDayClick?.(day),
+                    children: [
+                      HOURS.map((h2) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute left-0 right-0 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
+                          style: { top: h2 * HOUR_HEIGHT }
+                        },
+                        h2
+                      )),
+                      today && /* @__PURE__ */ jsx(CurrentTimeLine, {}),
+                      layout.map(({ event, column, totalColumns }) => /* @__PURE__ */ jsx(
+                        TimedEvent,
+                        {
+                          event,
+                          category: categories[event.category ?? ""],
+                          column,
+                          totalColumns,
+                          onEventClick
+                        },
+                        event.id
+                      ))
+                    ]
+                  },
+                  i
+                );
+              })
+            }
+          )
+        }
+      ) })
+    ] })
   ] });
 }
 var WEEKS_SHOWN = 6;
@@ -83503,7 +83611,7 @@ function DayCellWithPopover({
             {
               ref: floatingRef,
               className: cn(
-                "fixed z-[9999] w-52 max-h-40 overflow-y-auto pointer-events-none",
+                "fixed z-[var(--ds-z-popover)] w-52 max-h-40 overflow-y-auto pointer-events-none",
                 "bg-[var(--ds-bg-surface-elevated)]",
                 "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
                 "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -83636,6 +83744,176 @@ function YearView({
     }
   ) });
 }
+function CompactDayCell({
+  day,
+  isCurrentMonth,
+  events: events2,
+  categories,
+  selectedDate,
+  onDayClick,
+  onEventClick
+}) {
+  const [open, setOpen] = useState(false);
+  const cellRef = useRef(null);
+  const floatingRef = useRef(null);
+  const pos = usePosition(cellRef, floatingRef, open, {
+    side: "bottom",
+    align: "center",
+    offset: 4,
+    flip: true
+  });
+  const hoverTimeout = useRef(void 0);
+  const dayEvents = isCurrentMonth ? getEventsForDay(events2, day) : [];
+  const today = isCurrentMonth && isToday(day);
+  const selected = isCurrentMonth && selectedDate && isSameDay2(day, selectedDate);
+  const hasEvents = dayEvents.length > 0;
+  const eventColors = dayEvents.slice(0, 3).map((e) => categories[e.category ?? ""]?.color ?? "var(--ds-accent-primary)");
+  const handleMouseEnter = () => {
+    if (!hasEvents) return;
+    hoverTimeout.current = setTimeout(() => setOpen(true), 250);
+  };
+  const handleMouseLeave2 = () => {
+    clearTimeout(hoverTimeout.current);
+    setOpen(false);
+  };
+  const handleClick2 = () => {
+    onDayClick?.(day);
+    if (hasEvents) {
+      setOpen((prev) => !prev);
+    }
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    const onClick = (e) => {
+      const t = e.target;
+      if (cellRef.current?.contains(t) || floatingRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onClick);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: cellRef,
+        type: "button",
+        onClick: handleClick2,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave2,
+        className: cn(
+          "flex flex-col items-center justify-center py-ds-1.5 rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
+          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+          !isCurrentMonth && "opacity-30",
+          selected && "bg-[var(--ds-accent-primary)]/10",
+          !selected && "hover:bg-[var(--ds-bg-muted)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-sm w-7 h-7 flex items-center justify-center rounded-full",
+                today ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-primary)]"
+              ),
+              children: day.getDate()
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-ds-0.5 mt-ds-0.5 h-[6px] items-center", children: eventColors.map((color, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-1.5 h-1.5 rounded-full",
+              style: { backgroundColor: color }
+            },
+            i
+          )) })
+        ]
+      }
+    ),
+    open && hasEvents && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: floatingRef,
+          onMouseEnter: () => clearTimeout(hoverTimeout.current),
+          onMouseLeave: () => setOpen(false),
+          className: cn(
+            "fixed z-[var(--ds-z-popover)] w-52 max-h-40 overflow-y-auto",
+            "bg-[var(--ds-bg-surface-elevated)]",
+            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "rounded-[var(--ds-radius-md)]",
+            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
+            "p-ds-2 space-y-ds-1"
+          ),
+          style: { top: pos.top, left: pos.left },
+          role: "tooltip",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+            dayEvents.map((event) => /* @__PURE__ */ jsx(
+              EventBar,
+              {
+                event,
+                category: categories[event.category ?? ""],
+                onClick: onEventClick
+              },
+              event.id
+            ))
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function CompactMonthView({
+  date,
+  events: events2,
+  categories,
+  selectedDate,
+  onDayClick,
+  onEventClick,
+  weekStartsOn
+}) {
+  const weeks = useMemo(
+    () => getMonthGrid(date.getFullYear(), date.getMonth(), weekStartsOn),
+    [date, weekStartsOn]
+  );
+  const dayNames = useMemo(() => getOrderedDayNames(weekStartsOn), [weekStartsOn]);
+  const currentMonth = date.getMonth();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { padding: "var(--ds-space-3) var(--ds-space-2.5)" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-ds-1.5", children: dayNames.map((name) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-center text-xs font-medium text-[var(--ds-text-muted)] py-ds-1.5",
+        children: name[0]
+      },
+      name
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-y-ds-0.5", children: weeks.map(
+      (week, wi) => week.map((day, di) => /* @__PURE__ */ jsx(
+        CompactDayCell,
+        {
+          day,
+          isCurrentMonth: day.getMonth() === currentMonth,
+          events: events2,
+          categories,
+          selectedDate,
+          onDayClick,
+          onEventClick
+        },
+        `${wi}-${di}`
+      ))
+    ) })
+  ] });
+}
 
 // ../../showcase/src/components/Calendar/types.ts
 var DEFAULT_CATEGORIES = {
@@ -83643,8 +83921,8 @@ var DEFAULT_CATEGORIES = {
   personal: { color: "var(--ds-status-success)", label: "Personal" },
   meeting: { color: "var(--ds-status-warning)", label: "Meeting" },
   deadline: { color: "var(--ds-status-error)", label: "Deadline" },
-  travel: { color: "oklch(0.65 0.15 280)", label: "Travel" },
-  social: { color: "oklch(0.65 0.15 180)", label: "Social" }
+  travel: { color: "var(--ds-status-info)", label: "Travel" },
+  social: { color: "var(--ds-hue-secondary)", label: "Social" }
 };
 function useControllableState(controlled, defaultValue2, onChange) {
   const [internal, setInternal] = useState(defaultValue2);
@@ -83716,21 +83994,7 @@ function MonthDropdown({
           MONTH_NAMES[currentMonth],
           " ",
           currentYear,
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "12",
-              height: "12",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              className: cn("transition-transform", open && "rotate-180"),
-              children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-            }
-          )
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 12, className: cn("transition-transform", open && "rotate-180") })
         ]
       }
     ),
@@ -83740,7 +84004,7 @@ function MonthDropdown({
         {
           ref: floatingRef,
           className: cn(
-            "fixed z-[9999] w-[240px]",
+            "fixed z-[var(--ds-z-popover)] w-[240px]",
             "bg-[var(--ds-bg-surface-elevated)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -83754,7 +84018,7 @@ function MonthDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-muted)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
                   onClick: () => setBrowseYear(browseYear - 1),
                   "aria-label": "Previous year",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" })
@@ -83764,7 +84028,7 @@ function MonthDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-muted)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
                   onClick: () => setBrowseYear(browseYear + 1),
                   "aria-label": "Next year",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 })
@@ -83779,7 +84043,7 @@ function MonthDropdown({
                   className: cn(
                     "px-ds-2 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
                     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                    isActive2 ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+                    isActive2 ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
                   ),
                   onClick: () => {
                     onSelect(new Date(browseYear, i, 1));
@@ -83847,21 +84111,7 @@ function YearDropdown({
         ),
         children: [
           currentYear,
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "12",
-              height: "12",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              className: cn("transition-transform", open && "rotate-180"),
-              children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-            }
-          )
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 12, className: cn("transition-transform", open && "rotate-180") })
         ]
       }
     ),
@@ -83871,7 +84121,7 @@ function YearDropdown({
         {
           ref: floatingRef,
           className: cn(
-            "fixed z-[9999] w-[200px]",
+            "fixed z-[var(--ds-z-popover)] w-[200px]",
             "bg-[var(--ds-bg-surface-elevated)]",
             "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -83885,7 +84135,7 @@ function YearDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-muted)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
                   onClick: () => setRangeStart(rangeStart - 9),
                   "aria-label": "Previous years",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" })
@@ -83899,7 +84149,7 @@ function YearDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-muted)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
                   onClick: () => setRangeStart(rangeStart + 9),
                   "aria-label": "Next years",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 })
@@ -83912,7 +84162,7 @@ function YearDropdown({
                 className: cn(
                   "px-ds-2 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
                   "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                  y === currentYear ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+                  y === currentYear ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
                 ),
                 onClick: () => {
                   onSelect(new Date(y, currentDate.getMonth(), 1));
@@ -83942,6 +84192,7 @@ function Calendar({
   onDayClick,
   categories = DEFAULT_CATEGORIES,
   weekStartsOn = 1,
+  size = "default",
   className
 }) {
   const [currentView, setCurrentView] = useControllableState(
@@ -83955,14 +84206,12 @@ function Calendar({
     onDateChange
   );
   const [selectedDate, setSelectedDate] = useState(null);
-  const [weekVisibleDays, setWeekVisibleDays] = useState(7);
+  const [isNarrow, setIsNarrow] = useState(false);
   const containerRef = useCallback((node) => {
     if (!node) return;
     const ro = new ResizeObserver((entries) => {
       const width = entries[0]?.contentRect.width ?? 0;
-      if (width < 500) setWeekVisibleDays(1);
-      else if (width < 768) setWeekVisibleDays(3);
-      else setWeekVisibleDays(7);
+      setIsNarrow(width < 500);
     });
     ro.observe(node);
     return () => ro.disconnect();
@@ -84020,6 +84269,79 @@ function Calendar({
     if (currentView === "week") return formatWeekRange(currentDate, weekStartsOn);
     return void 0;
   }, [currentView, currentDate, weekStartsOn]);
+  if (size === "compact") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col",
+          "bg-[var(--ds-bg-surface)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-sm)]",
+          "overflow-hidden",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between",
+                "bg-[var(--ds-bg-muted)]",
+                "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
+              ),
+              style: { padding: "var(--ds-space-1) var(--ds-space-1)" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => navigate(-1),
+                    className: "flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                    "aria-label": "Previous month",
+                    children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: goToToday,
+                    className: "text-sm font-medium text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-primary)] transition-colors cursor-pointer px-ds-2",
+                    children: [
+                      MONTH_NAMES[currentDate.getMonth()],
+                      " ",
+                      currentDate.getFullYear()
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => navigate(1),
+                    className: "flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                    "aria-label": "Next month",
+                    children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CompactMonthView,
+            {
+              date: currentDate,
+              events: stableEvents,
+              categories,
+              selectedDate,
+              onDayClick: handleDayClick,
+              onEventClick,
+              weekStartsOn
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -84034,20 +84356,49 @@ function Calendar({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs(
+        isNarrow ? /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "grid grid-cols-[auto_1fr_auto] items-center gap-ds-2",
+              "flex flex-col gap-ds-2",
+              "bg-[var(--ds-bg-muted)]",
+              "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
+            ),
+            style: { padding: "var(--ds-space-3)" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-ds-2", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(-1), "aria-label": "Previous", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+                currentView === "week" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)] whitespace-nowrap px-ds-1", children: headerLabel }) : currentView === "year" ? /* @__PURE__ */ jsx(YearDropdown, { currentDate, onSelect: setCurrentDate }) : /* @__PURE__ */ jsx(MonthDropdown, { currentDate, onSelect: setCurrentDate }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(1), "aria-label": "Next", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToToday, children: "Today" }),
+                /* @__PURE__ */ jsx(
+                  SegmentedControl,
+                  {
+                    value: currentView,
+                    onChange: (v) => setCurrentView(v),
+                    options: VIEWS.map((v) => ({ value: v, label: viewLabels[v] })),
+                    size: "sm"
+                  }
+                )
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-ds-3",
               "bg-[var(--ds-bg-muted)]",
               "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
             ),
             style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
             children: [
               /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToToday, children: "Today" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-ds-1", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(-1), "aria-label": "Previous", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
-                currentView === "week" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] whitespace-nowrap px-ds-2 ml-ds-1", children: headerLabel }) : currentView === "year" ? /* @__PURE__ */ jsx(YearDropdown, { currentDate, onSelect: setCurrentDate }) : /* @__PURE__ */ jsx(MonthDropdown, { currentDate, onSelect: setCurrentDate }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(-1), "aria-label": "Previous", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+                currentView === "week" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)] whitespace-nowrap px-ds-2", children: headerLabel }) : currentView === "year" ? /* @__PURE__ */ jsx(YearDropdown, { currentDate, onSelect: setCurrentDate }) : /* @__PURE__ */ jsx(MonthDropdown, { currentDate, onSelect: setCurrentDate }),
                 /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(1), "aria-label": "Next", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
               ] }),
               /* @__PURE__ */ jsx(
@@ -84056,14 +84407,13 @@ function Calendar({
                   value: currentView,
                   onChange: (v) => setCurrentView(v),
                   options: VIEWS.map((v) => ({ value: v, label: viewLabels[v] })),
-                  size: "sm",
-                  variant: "ghost"
+                  size: "sm"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0", style: { minHeight: currentView === "week" ? 420 : currentView === "month" ? 500 : void 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0", style: { minHeight: currentView === "week" ? 420 : currentView === "month" ? isNarrow ? 360 : 500 : void 0 }, children: [
           currentView === "month" && /* @__PURE__ */ jsx(
             MonthView,
             {
@@ -84085,8 +84435,7 @@ function Calendar({
               selectedDate,
               onDayClick: handleDayClick,
               onEventClick,
-              weekStartsOn,
-              visibleDays: weekVisibleDays
+              weekStartsOn
             }
           ),
           currentView === "year" && /* @__PURE__ */ jsx(
@@ -84137,7 +84486,7 @@ var dotVariant = {
   warning: "bg-[var(--ds-status-warning)] shadow-[0_0_0_3px_var(--ds-status-warning)]/20",
   error: "bg-[var(--ds-status-error)] shadow-[0_0_0_3px_var(--ds-status-error)]/20"
 };
-function TimelineHorizontal({ items, className }) {
+function HorizontalLayout({ items, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-start", className), children: items.map((item, i) => {
     const isFirst = i === 0;
     const isLast = i === items.length - 1;
@@ -84179,7 +84528,7 @@ function TimelineHorizontal({ items, className }) {
     ] }, i);
   }) });
 }
-function TimelineVertical({ items, className }) {
+function VerticalLayout({ items, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
       /* @__PURE__ */ jsx(
@@ -84202,15 +84551,15 @@ function TimelineVertical({ items, className }) {
 }
 function Timeline({ items, orientation = "vertical", className, ref }) {
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(TimelineHorizontal, { items }) });
+    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(HorizontalLayout, { items }) });
   }
   if (orientation === "responsive") {
     return /* @__PURE__ */ jsxs("div", { ref, className, children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(TimelineHorizontal, { items }) }),
-      /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(TimelineVertical, { items }) })
+      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(HorizontalLayout, { items }) }),
+      /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(VerticalLayout, { items }) })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(TimelineVertical, { items }) });
+  return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(VerticalLayout, { items }) });
 }
 function CodeBlock2({
   code,
@@ -84706,13 +85055,13 @@ function Carousel({
           "div",
           {
             ref: trackRef,
-            className: cn("flex", !dragging && "transition-transform duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]"),
+            className: cn("flex items-stretch", !dragging && "transition-transform duration-400 ease-[var(--ds-transition-ease)]"),
             style: { transform: `translateX(calc(-${current * 100}% + ${dragOffset}px))` },
             onPointerDown: handlePointerDown,
             onPointerMove: handlePointerMove,
             onPointerUp: handlePointerUp,
             onPointerCancel: handlePointerUp,
-            children: children.map((child, i) => /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 select-none", "aria-roledescription": "slide", "aria-label": `Slide ${i + 1} of ${count2}`, children: child }, i))
+            children: children.map((child, i) => /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 select-none flex flex-col [&>*]:flex-1", "aria-roledescription": "slide", "aria-label": `Slide ${i + 1} of ${count2}`, children: child }, i))
           }
         ),
         showArrows && count2 > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -84723,7 +85072,7 @@ function Carousel({
               disabled: !canPrev,
               "aria-label": "Previous slide",
               className: cn(
-                "absolute left-4 top-1/2 -translate-y-1/2 z-10",
+                "absolute left-ds-4 top-1/2 -translate-y-1/2 z-10",
                 "flex items-center justify-center w-8 h-8",
                 "rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -84742,7 +85091,7 @@ function Carousel({
               disabled: !canNext,
               "aria-label": "Next slide",
               className: cn(
-                "absolute right-4 top-1/2 -translate-y-1/2 z-10",
+                "absolute right-ds-4 top-1/2 -translate-y-1/2 z-10",
                 "flex items-center justify-center w-8 h-8",
                 "rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -84755,7 +85104,7 @@ function Carousel({
             }
           )
         ] }),
-        showIndicators && count2 > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-ds-1.5 z-10", children: children.map((_, i) => /* @__PURE__ */ jsx(
+        showIndicators && count2 > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-ds-3 left-1/2 -translate-x-1/2 flex gap-ds-1.5 z-10", children: children.map((_, i) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => goTo(i),
@@ -92151,7 +92500,7 @@ function SortableCard({
       ...attributes,
       ...listeners,
       className: cn(
-        "rounded-[var(--ds-radius-md)] border border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         "bg-[var(--ds-bg-surface)] p-ds-3 cursor-grab active:cursor-grabbing",
         "shadow-[var(--ds-shadow-button)]",
         "transition-shadow duration-[var(--ds-transition-speed)]",
@@ -92163,7 +92512,7 @@ function SortableCard({
   );
 }
 function DefaultCard({ card }) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-ds-2", children: [
     /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: card.title }),
     card.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-secondary)] line-clamp-2", children: card.description }),
     card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-1", children: card.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "subtle", size: "sm", children: tag }, tag)) })
@@ -92177,7 +92526,7 @@ function OverlayCard({
     "div",
     {
       className: cn(
-        "rounded-[var(--ds-radius-md)] border border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         "bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]",
         "rotate-2"
       ),
@@ -92277,13 +92626,13 @@ function KanbanBoard({
       onDragOver: handleDragOver,
       onDragEnd: handleDragEnd,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex gap-ds-4 overflow-x-auto pb-ds-2", className), children: columns.map((col) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: cn("flex gap-ds-4 overflow-x-auto pb-ds-2 snap-x snap-mandatory sm:snap-none", className), children: columns.map((col) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex flex-col shrink-0 w-[280px]",
+              "flex flex-col shrink-0 w-[calc(100vw-4rem)] sm:w-[280px] snap-center",
               "bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
-              "border border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+              "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-ds-3 py-ds-2.5", children: [
@@ -92338,7 +92687,7 @@ function TypingIndicator({ name }) {
       "div",
       {
         className: cn(
-          "flex items-center gap-ds-1 px-ds-3 py-ds-2.5 rounded-2xl rounded-bl-sm",
+          "flex items-center gap-ds-1 px-ds-3 py-ds-2.5 rounded-[var(--ds-radius-xl)] rounded-bl-[var(--ds-radius-sm)]",
           "bg-[var(--ds-bg-muted)]"
         ),
         children: [
@@ -92356,70 +92705,97 @@ function TypingIndicator({ name }) {
 }
 function ChatInputBar({ onSend }) {
   const [text2, setText] = useState("");
+  const isMobile = useBreakpoint("sm");
   const handleSend = () => {
     if (!text2.trim()) return;
     onSend?.(text2.trim());
     setText("");
   };
-  return /* @__PURE__ */ jsxs(
+  const handleKeyDown3 = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 px-ds-3 pb-ds-3 pt-ds-1", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex items-center gap-ds-2 px-ds-4 py-ds-3",
-        "border-t border-[var(--ds-border-default)] bg-[var(--ds-bg-surface)]",
-        "shrink-0"
+        "flex flex-col",
+        "rounded-[var(--ds-radius-lg)]",
+        "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        "bg-[var(--ds-input-bg)]",
+        "shadow-[var(--ds-input-shadow)]",
+        "focus-within:ring-2 focus-within:ring-[var(--ds-input-focus-ring)] focus-within:border-[var(--ds-input-focus-ring)]",
+        "transition-colors duration-[var(--ds-transition-speed)]"
       ),
       children: [
         /* @__PURE__ */ jsx(
-          Button,
+          "textarea",
           {
-            variant: "ghost",
-            size: "icon",
-            "aria-label": "Add attachment",
-            className: "shrink-0 h-ds-8 w-ds-8",
-            children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value: text2,
-            onChange: (e) => setText(e.target.value),
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                handleSend();
+            ref: (el) => {
+              if (el) {
+                el.style.height = "auto";
+                el.style.height = Math.min(el.scrollHeight, 120) + "px";
               }
             },
+            value: text2,
+            onChange: (e) => {
+              setText(e.target.value);
+              const el = e.target;
+              el.style.height = "auto";
+              el.style.height = Math.min(el.scrollHeight, 120) + "px";
+            },
+            onKeyDown: handleKeyDown3,
             placeholder: "Type a message\u2026",
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            "aria-label": "Voice message",
-            className: "shrink-0 h-ds-8 w-ds-8",
-            children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: 16 })
+            rows: 1,
+            className: cn(
+              "w-full resize-none bg-transparent px-ds-3 pt-ds-3 pb-ds-2",
+              "text-sm text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
+              "outline-none overflow-y-auto"
+            ),
+            style: { maxHeight: 120 }
           }
         ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: text2.trim() ? "default" : "ghost",
-            size: "icon",
-            "aria-label": "Send message",
-            onClick: handleSend,
-            disabled: !text2.trim(),
-            className: "shrink-0 h-ds-8 w-ds-8",
-            children: /* @__PURE__ */ jsx(Icon, { name: "send", size: 16 })
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-ds-2 pb-ds-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-0.5", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": "Add attachment",
+                className: isMobile ? "!h-6 !w-6" : void 0,
+                children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: isMobile ? 13 : 15 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": "Voice message",
+                className: isMobile ? "!h-6 !w-6" : void 0,
+                children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: isMobile ? 13 : 15 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: text2.trim() ? "default" : "ghost",
+              size: "icon-sm",
+              "aria-label": "Send message",
+              onClick: handleSend,
+              disabled: !text2.trim(),
+              className: isMobile ? "!h-6 !w-6" : void 0,
+              children: /* @__PURE__ */ jsx(Icon, { name: "send", size: isMobile ? 13 : 15 })
+            }
+          )
+        ] })
       ]
     }
-  );
+  ) });
 }
 function ChatMessageList({
   messages,
@@ -92465,8 +92841,8 @@ function ChatMessageList({
                       "div",
                       {
                         className: cn(
-                          "px-ds-3 py-ds-2 text-sm leading-relaxed rounded-2xl",
-                          msg.isOwn ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] rounded-br-sm" : "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] rounded-bl-sm"
+                          "px-ds-3 py-ds-2 text-sm leading-relaxed rounded-[var(--ds-radius-xl)]",
+                          msg.isOwn ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] rounded-br-[var(--ds-radius-sm)]" : "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] rounded-bl-[var(--ds-radius-sm)]"
                         ),
                         children: msg.content
                       }
@@ -94314,40 +94690,43 @@ function CompactFlyout({
       onMouseLeave,
       className: "fixed z-50",
       style: { top: pos.top, left: pos.left, paddingLeft: FLYOUT_BRIDGE_PX, pointerEvents: "auto" },
-      children: /* @__PURE__ */ jsxs("div", {
-        role: "menu",
-        className: cn(
-          "min-w-[160px] py-ds-1",
-          "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-shadow-dropdown)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("p", { className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: child.href ?? "#",
-              role: "menuitem",
-              onClick: (e) => {
-                e.preventDefault();
-                onItemClick?.(child, i);
-                onClose();
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "menu",
+          className: cn(
+            "min-w-[160px] py-ds-1",
+            "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
+            "shadow-[var(--ds-shadow-dropdown)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: child.href ?? "#",
+                role: "menuitem",
+                onClick: (e) => {
+                  e.preventDefault();
+                  onItemClick?.(child, i);
+                  onClose();
+                },
+                className: cn(
+                  "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
+                  child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+                ),
+                children: [
+                  child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: child.label }),
+                  child.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: child.badge })
+                ]
               },
-              className: cn(
-                "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
-                child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
-              ),
-              children: [
-                child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: child.label }),
-                child.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: child.badge })
-              ]
-            },
-            child.label
-          )) })
-        ]
-      })
+              child.label
+            )) })
+          ]
+        }
+      )
     }
   );
   return createPortal(content, portalContainer ?? document.body);
@@ -94542,7 +94921,7 @@ function SidebarNav({
         "div",
         {
           className: cn(
-            isMinimal ? "ml-5 pl-2" : "ml-5 pl-3 border-l-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+            isMinimal ? "ml-ds-5 pl-ds-2" : "ml-ds-5 pl-ds-3 border-l-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
           ),
           style: { marginTop: "var(--ds-space-1)", marginBottom: "var(--ds-space-1)" },
           children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: "var(--ds-space-0\\.5)" }, children: item.children.map((child, i) => renderItem(child, depth + 1, i, key2)) })
@@ -94668,7 +95047,7 @@ function CompactNavItem({
     onCancelClose();
     if (hasChildren && !isOpen) onOpen(flyoutKey);
   }, [hasChildren, isOpen, onOpen, onCancelClose, flyoutKey]);
-  const handleMouseLeave = useCallback(() => {
+  const handleMouseLeave2 = useCallback(() => {
     onScheduleClose(flyoutKey);
   }, [onScheduleClose, flyoutKey]);
   const handleClick2 = () => {
@@ -94684,7 +95063,7 @@ function CompactNavItem({
       {
         ref: triggerRef,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
-        onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
+        onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave2 : void 0,
         onClick: handleClick2,
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
         className: cn(
@@ -94726,7 +95105,7 @@ function CompactNavItem({
         onItemClick,
         onClose,
         onMouseEnter: onCancelClose,
-        onMouseLeave: handleMouseLeave
+        onMouseLeave: handleMouseLeave2
       }
     ),
     mobile && expanded && hasChildren && item.children && /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-ds-1 pb-ds-1", children: item.children.map((child, ci) => /* @__PURE__ */ jsxs(
@@ -95036,7 +95415,7 @@ function Dock({
                 className: cn(
                   "relative flex items-center justify-center rounded-[var(--ds-radius-lg)]",
                   "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                  "border border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                  "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
                   "shadow-[var(--ds-shadow-button)]",
                   "cursor-pointer origin-bottom",
                   "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
@@ -95733,10 +96112,13 @@ var sizeClasses = {
 var FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit }) {
   const titleId = useId();
+  const descriptionId = useId();
   const isMobile = useBreakpoint("sm");
   const overlayRef = useRef(null);
   const dialogRef = useRef(null);
   const triggerRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
   const trapFocus = useCallback((e) => {
     if (e.key !== "Tab" || !dialogRef.current) return;
     const focusable = dialogRef.current.querySelectorAll(FOCUSABLE);
@@ -95758,12 +96140,6 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
   useEffect(() => {
     if (!open) return;
     triggerRef.current = document.activeElement;
-    const handler = (e) => {
-      if (e.key === "Escape") onClose();
-      trapFocus(e);
-    };
-    document.addEventListener("keydown", handler);
-    lockBodyScroll();
     requestAnimationFrame(() => {
       const focusable = dialogRef.current?.querySelectorAll(FOCUSABLE);
       if (focusable?.length) {
@@ -95774,12 +96150,26 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
         }
       }
     });
+  }, [open, variant]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+      trapFocus(e);
+    };
+    document.addEventListener("keydown", handler);
     return () => {
       document.removeEventListener("keydown", handler);
+    };
+  }, [open, trapFocus]);
+  useEffect(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return () => {
       unlockBodyScroll();
       triggerRef.current?.focus();
     };
-  }, [open, onClose, trapFocus, variant]);
+  }, [open]);
   if (!open) return null;
   return createPortal(
     /* @__PURE__ */ jsxs(
@@ -95811,6 +96201,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
                   role: alert ? "alertdialog" : "dialog",
                   "aria-modal": "true",
                   "aria-labelledby": titleId,
+                  "aria-describedby": description ? descriptionId : void 0,
                   className: cn(
                     "relative z-10 w-full",
                     isMobile ? "max-w-none h-full" : sizeClasses[size],
@@ -95843,7 +96234,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
                             children: title
                           }
                         ),
-                        description && /* @__PURE__ */ jsx("p", { className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
+                        description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
                         children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children })
                       ] })
                     ] }) }),
@@ -95983,7 +96374,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
   if (!open) return null;
   let flatIdx = 0;
   return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999] flex items-start justify-center pt-[15vh]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999] flex items-start justify-center pt-[15vh] px-ds-4", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -96634,7 +97025,7 @@ function NotificationCenter({
                   {
                     className: cn(
                       "flex gap-ds-3 px-ds-4 py-ds-3 transition-colors",
-                      "hover:bg-[var(--ds-bg-muted)]",
+                      "hover:bg-[var(--ds-bg-emphasis)]",
                       !n.read && "bg-[color-mix(in_srgb,var(--ds-accent-primary)_5%,transparent)]"
                     ),
                     children: [
@@ -96834,7 +97225,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                     onClick: handlePrev,
                     className: cn(
                       "px-ds-3 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)]",
-                      "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]",
+                      "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]",
                       "transition-colors cursor-pointer",
                       "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
                     ),
@@ -99159,23 +99550,28 @@ function Qt({
 }
 Qt.displayName = "Separator";
 var DirectionCtx = createContext("horizontal");
+var MobileCtx = createContext(false);
 function ResizablePanelGroup({
   className,
   direction = "horizontal",
+  stackOnMobile = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DirectionCtx.Provider, { value: direction, children: /* @__PURE__ */ jsx(
+  const isMobile = useBreakpoint("sm");
+  const shouldStack = stackOnMobile && isMobile && direction === "horizontal";
+  const effectiveDirection = shouldStack ? "vertical" : direction;
+  return /* @__PURE__ */ jsx(DirectionCtx.Provider, { value: effectiveDirection, children: /* @__PURE__ */ jsx(MobileCtx.Provider, { value: isMobile, children: /* @__PURE__ */ jsx(
     Ut,
     {
       className: cn(
         "flex h-full w-full",
-        direction === "vertical" && "flex-col",
+        effectiveDirection === "vertical" && "flex-col",
         className
       ),
-      orientation: direction,
+      orientation: effectiveDirection,
       ...props
     }
-  ) });
+  ) }) });
 }
 function ResizablePanel({ className, ...props }) {
   return /* @__PURE__ */ jsx(Yt, { className: cn("", className), ...props });
@@ -99186,13 +99582,20 @@ function ResizableHandle({
   ...props
 }) {
   const direction = useContext(DirectionCtx);
+  const isMobile = useContext(MobileCtx);
   const isVertical = direction === "vertical";
   return /* @__PURE__ */ jsx(
     Qt,
     {
       className: cn(
         "relative flex items-center justify-center bg-[var(--ds-border-default)]",
-        isVertical ? "h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:-top-1 after:-bottom-1 after:content-['']" : "w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:-left-1 after:-right-1 after:content-['']",
+        isVertical ? cn(
+          "h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']",
+          isMobile ? "after:-top-3 after:-bottom-3" : "after:-top-1 after:-bottom-1"
+        ) : cn(
+          "w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']",
+          isMobile ? "after:-left-3 after:-right-3" : "after:-left-1 after:-right-1"
+        ),
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
         "[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]",
         "[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]",
@@ -99203,16 +99606,16 @@ function ResizableHandle({
         "div",
         {
           className: cn(
-            "z-10 flex items-center justify-center rounded-sm",
-            "border border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "z-10 flex items-center justify-center rounded-[var(--ds-radius-sm)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
             "bg-[var(--ds-bg-surface)]",
-            isVertical ? "h-3 w-4" : "h-4 w-3"
+            isVertical ? isMobile ? "h-4 w-8" : "h-3 w-4" : isMobile ? "h-8 w-4" : "h-4 w-3"
           ),
           children: /* @__PURE__ */ jsx(
             Icon,
             {
               name: "grip-vertical",
-              size: 10,
+              size: isMobile ? 12 : 10,
               className: cn(
                 "text-[var(--ds-text-muted)]",
                 isVertical && "rotate-90"