@dxos/ui-theme 0.8.4-main.6fa680abb7 → 0.8.4-main.765dc60934

package/dist/lib/browser/index.mjs

@@ -35,7 +35,7 @@ var hueShades = [
 var roles = [
   "fill",
   "surface",
-  "surface-text",
+  "foreground",
   "text",
   "border"
 ];
@@ -46,17 +46,31 @@ var cardMinBlockSize = 18;
 var cardMaxBlockSize = 30;
 
 // src/fragments/density.ts
-var coarseBlockSize = "min-h-[2.5rem]";
-var coarseDimensions = `${coarseBlockSize} px-3`;
 var fineBlockSize = "min-h-[2.5rem] pointer-fine:min-h-[2rem]";
+var coarseBlockSize = "min-h-[2.5rem]";
 var fineDimensions = `${fineBlockSize} px-2`;
-var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
+var coarseDimensions = `${coarseBlockSize} px-3`;
+var densityDimensions = (density = "fine") => density === "fine" ? fineDimensions : coarseDimensions;
+var densityBlockSize = (density = "fine") => density === "fine" ? fineBlockSize : coarseBlockSize;
 
 // src/fragments/disabled.ts
 var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
 var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
 
-// src/fragments/elevation.ts
+// src/fragments/hover.ts
+var ghostHover = "hover:bg-hover-surface";
+var ghostFocusWithin = "focus-within:bg-hover-surface";
+var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
+var groupHoverControlItemWithTransition = "transition-opacity duration-200 opacity-0 group-hover:opacity-100";
+var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
+var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
+var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
+var hoverableControlItem = "opacity-(--controls-opacity)";
+
+// src/fragments/text.ts
+var descriptionMessage = "text-description border border-dashed border-separator rounded-sm p-4";
+
+// src/util/elevation.ts
 var surfaceShadow = ({ elevation }) => [
   elevation === "positioned" ? "shadow-sm" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
 ];
@@ -89,33 +103,12 @@ var surfaceZIndex = ({ level, elevation }) => {
   }
 };
 
-// src/fragments/focus.ts
-var focusRing = "dx-focus-ring";
-var subduedFocus = "focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0";
-var staticFocusRing = "ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
-
-// src/fragments/hover.ts
-var subtleHover = "hover:bg-hover-overlay";
-var ghostHover = "hover:bg-hover-surface";
-var ghostFocusWithin = "focus-within:bg-hover-surface";
-var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
-var groupHoverControlItemWithTransition = "transition-opacity duration-200 opacity-0 group-hover:opacity-100";
-var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
-var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
-var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
-var hoverableControlItem = "opacity-(--controls-opacity)";
-
-// src/fragments/selected.ts
-var ghostHighlighted = "data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500";
-var ghostSelected = "aria-selected:bg-base-surface aria-selected:text-accent-text hover:aria-selected:text-accent-text-hover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
-var ghostSelectedContainerMd = "@md:aria-selected:bg-base-surface @md:aria-selected:text-accent-text @md:hover:aria-selected:text-accent-text-hover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]";
-
 // src/util/hash-styles.ts
 var neutral = {
   hue: "neutral",
   fill: "bg-neutral-fill",
   surface: "bg-neutral-surface",
-  surfaceText: "text-neutral-surface-text",
+  foreground: "text-neutral-foreground",
   text: "text-neutral-text",
   border: "border-neutral-border"
 };
@@ -124,7 +117,7 @@ var styles = [
     hue: "red",
     fill: "bg-red-fill",
     surface: "bg-red-surface",
-    surfaceText: "text-red-surface-text",
+    foreground: "text-red-foreground",
     text: "text-red-text",
     border: "border-red-border"
   },
@@ -132,7 +125,7 @@ var styles = [
     hue: "orange",
     fill: "bg-orange-fill",
     surface: "bg-orange-surface",
-    surfaceText: "text-orange-surface-text",
+    foreground: "text-orange-foreground",
     text: "text-orange-text",
     border: "border-orange-border"
   },
@@ -140,7 +133,7 @@ var styles = [
     hue: "amber",
     fill: "bg-amber-fill",
     surface: "bg-amber-surface",
-    surfaceText: "text-amber-surface-text",
+    foreground: "text-amber-foreground",
     text: "text-amber-text",
     border: "border-amber-border"
   },
@@ -148,7 +141,7 @@ var styles = [
     hue: "yellow",
     fill: "bg-yellow-fill",
     surface: "bg-yellow-surface",
-    surfaceText: "text-yellow-surface-text",
+    foreground: "text-yellow-foreground",
     text: "text-yellow-text",
     border: "border-yellow-border"
   },
@@ -156,7 +149,7 @@ var styles = [
     hue: "lime",
     fill: "bg-lime-fill",
     surface: "bg-lime-surface",
-    surfaceText: "text-lime-surface-text",
+    foreground: "text-lime-foreground",
     text: "text-lime-text",
     border: "border-lime-border"
   },
@@ -164,7 +157,7 @@ var styles = [
     hue: "green",
     fill: "bg-green-fill",
     surface: "bg-green-surface",
-    surfaceText: "text-green-surface-text",
+    foreground: "text-green-foreground",
     text: "text-green-text",
     border: "border-green-border"
   },
@@ -172,7 +165,7 @@ var styles = [
     hue: "emerald",
     fill: "bg-emerald-fill",
     surface: "bg-emerald-surface",
-    surfaceText: "text-emerald-surface-text",
+    foreground: "text-emerald-foreground",
     text: "text-emerald-text",
     border: "border-emerald-border"
   },
@@ -180,7 +173,7 @@ var styles = [
     hue: "teal",
     fill: "bg-teal-fill",
     surface: "bg-teal-surface",
-    surfaceText: "text-teal-surface-text",
+    foreground: "text-teal-foreground",
     text: "text-teal-text",
     border: "border-teal-border"
   },
@@ -188,7 +181,7 @@ var styles = [
     hue: "cyan",
     fill: "bg-cyan-fill",
     surface: "bg-cyan-surface",
-    surfaceText: "text-cyan-surface-text",
+    foreground: "text-cyan-foreground",
     text: "text-cyan-text",
     border: "border-cyan-border"
   },
@@ -196,7 +189,7 @@ var styles = [
     hue: "sky",
     fill: "bg-sky-fill",
     surface: "bg-sky-surface",
-    surfaceText: "text-sky-surface-text",
+    foreground: "text-sky-foreground",
     text: "text-sky-text",
     border: "border-sky-border"
   },
@@ -204,7 +197,7 @@ var styles = [
     hue: "blue",
     fill: "bg-blue-fill",
     surface: "bg-blue-surface",
-    surfaceText: "text-blue-surface-text",
+    foreground: "text-blue-foreground",
     text: "text-blue-text",
     border: "border-blue-border"
   },
@@ -212,7 +205,7 @@ var styles = [
     hue: "indigo",
     fill: "bg-indigo-fill",
     surface: "bg-indigo-surface",
-    surfaceText: "text-indigo-surface-text",
+    foreground: "text-indigo-foreground",
     text: "text-indigo-text",
     border: "border-indigo-border"
   },
@@ -220,7 +213,7 @@ var styles = [
     hue: "violet",
     fill: "bg-violet-fill",
     surface: "bg-violet-surface",
-    surfaceText: "text-violet-surface-text",
+    foreground: "text-violet-foreground",
     text: "text-violet-text",
     border: "border-violet-border"
   },
@@ -228,7 +221,7 @@ var styles = [
     hue: "purple",
     fill: "bg-purple-fill",
     surface: "bg-purple-surface",
-    surfaceText: "text-purple-surface-text",
+    foreground: "text-purple-foreground",
     text: "text-purple-text",
     border: "border-purple-border"
   },
@@ -236,7 +229,7 @@ var styles = [
     hue: "fuchsia",
     fill: "bg-fuchsia-fill",
     surface: "bg-fuchsia-surface",
-    surfaceText: "text-fuchsia-surface-text",
+    foreground: "text-fuchsia-foreground",
     text: "text-fuchsia-text",
     border: "border-fuchsia-border"
   },
@@ -244,7 +237,7 @@ var styles = [
     hue: "pink",
     fill: "bg-pink-fill",
     surface: "bg-pink-surface",
-    surfaceText: "text-pink-surface-text",
+    foreground: "text-pink-foreground",
     text: "text-pink-text",
     border: "border-pink-border"
   },
@@ -252,7 +245,7 @@ var styles = [
     hue: "rose",
     fill: "bg-rose-fill",
     surface: "bg-rose-surface",
-    surfaceText: "text-rose-surface-text",
+    foreground: "text-rose-foreground",
     text: "text-rose-text",
     border: "border-rose-border"
   }
@@ -273,7 +266,10 @@ var getHashHue = (id) => {
 var getHash = (id) => id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
 
 // src/util/mx.ts
+import { Children, createElement, forwardRef, isValidElement } from "react";
 import { extendTailwindMerge, validators } from "tailwind-merge";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/ui-theme/src/util/mx.ts";
 var mx = extendTailwindMerge({
   extend: {
     classGroups: {
@@ -318,334 +314,235 @@ var mx = extendTailwindMerge({
     }
   }
 });
-var composableProps = ({ className, classNames, ...props }, { className: defaultClassNames, ...defaults } = {}) => ({
+var composableProps = ({ className, classNames, role, style, ...props }, { classNames: defaultClassNames, ...defaults } = {}) => ({
+  // Default props.
   ...defaults,
+  // Spread supplied props.
   ...props,
+  // Prefer explicit role, then defaults role, then 'none'.
+  role: role ?? defaults.role ?? "none",
+  // Merge styles.
+  style: {
+    ...defaults.style,
+    ...style
+  },
+  // Compose classnames.
   className: mx(defaultClassNames, className, classNames)
 });
+var COMPOSABLE = /* @__PURE__ */ Symbol.for("dxos.composable");
+function slottable(render) {
+  const wrapped = (props, forwardedRef) => {
+    let warn = false;
+    if (props.asChild) {
+      try {
+        const child = Children.only(props.children);
+        if (isValidElement(child) && typeof child.type !== "string" && !child.type[COMPOSABLE]) {
+          warn = true;
+          log.warn("slot child is not composable; create it with composable() or slottable()", {
+            child: child.type.displayName ?? child.type.name
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 100, S: this });
+        }
+      } catch {
+      }
+    }
+    const result = render(props, forwardedRef);
+    if (warn) {
+      return createElement("div", {
+        role: "none",
+        className: "dx-slot-warning"
+      }, result);
+    }
+    return result;
+  };
+  const component = forwardRef(wrapped);
+  component[COMPOSABLE] = true;
+  return component;
+}
+function composable(render) {
+  const component = forwardRef(render);
+  component[COMPOSABLE] = true;
+  return component;
+}
 
-// src/fragments/size.ts
-var sizeWidthMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "w-0"
-  ],
-  [
-    "px",
-    "w-px"
-  ],
-  [
-    0.5,
-    "w-0.5"
-  ],
-  [
-    1,
-    "w-1"
-  ],
-  [
-    1.5,
-    "w-1.5"
-  ],
-  [
-    2,
-    "w-2"
-  ],
-  [
-    2.5,
-    "w-2.5"
-  ],
-  [
-    3,
-    "w-3"
-  ],
-  [
-    3.5,
-    "w-3.5"
-  ],
-  [
-    4,
-    "w-4"
-  ],
-  [
-    5,
-    "w-5"
-  ],
-  [
-    6,
-    "w-6"
-  ],
-  [
-    7,
-    "w-7"
-  ],
-  [
-    8,
-    "w-8"
-  ],
-  [
-    9,
-    "w-9"
-  ],
-  [
-    10,
-    "w-10"
-  ],
-  [
-    11,
-    "w-11"
-  ],
-  [
-    12,
-    "w-12"
-  ],
-  [
-    14,
-    "w-14"
-  ],
-  [
-    16,
-    "w-16"
-  ],
-  [
-    20,
-    "w-20"
-  ],
-  [
-    24,
-    "w-24"
-  ],
-  [
-    28,
-    "w-28"
-  ],
-  [
-    32,
-    "w-32"
-  ],
-  [
-    36,
-    "w-36"
-  ],
-  [
-    40,
-    "w-40"
-  ],
-  [
-    44,
-    "w-44"
-  ],
-  [
-    48,
-    "w-48"
-  ],
-  [
-    52,
-    "w-52"
-  ],
-  [
-    56,
-    "w-56"
-  ],
-  [
-    60,
-    "w-60"
-  ],
-  [
-    64,
-    "w-64"
-  ],
-  [
-    72,
-    "w-72"
-  ],
-  [
-    80,
-    "w-80"
-  ],
-  [
-    96,
-    "w-96"
-  ]
-]);
-var sizeHeightMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "h-0"
-  ],
-  [
-    "px",
-    "h-px"
-  ],
-  [
-    0.5,
-    "h-0.5"
-  ],
-  [
-    1,
-    "h-1"
-  ],
-  [
-    1.5,
-    "h-1.5"
-  ],
-  [
-    2,
-    "h-2"
-  ],
-  [
-    2.5,
-    "h-2.5"
-  ],
-  [
-    3,
-    "h-3"
-  ],
-  [
-    3.5,
-    "h-3.5"
-  ],
-  [
-    4,
-    "h-4"
-  ],
-  [
-    5,
-    "h-5"
-  ],
-  [
-    6,
-    "h-6"
-  ],
-  [
-    7,
-    "h-7"
-  ],
-  [
-    8,
-    "h-8"
-  ],
-  [
-    9,
-    "h-9"
-  ],
-  [
-    10,
-    "h-10"
-  ],
-  [
-    11,
-    "h-11"
-  ],
-  [
-    12,
-    "h-12"
-  ],
-  [
-    14,
-    "h-14"
-  ],
-  [
-    16,
-    "h-16"
-  ],
-  [
-    20,
-    "h-20"
-  ],
-  [
-    24,
-    "h-24"
-  ],
-  [
-    28,
-    "h-28"
-  ],
-  [
-    32,
-    "h-32"
-  ],
-  [
-    36,
-    "h-36"
-  ],
-  [
-    40,
-    "h-40"
-  ],
-  [
-    44,
-    "h-44"
-  ],
-  [
-    48,
-    "h-48"
-  ],
-  [
-    52,
-    "h-52"
-  ],
-  [
-    56,
-    "h-56"
-  ],
-  [
-    60,
-    "h-60"
-  ],
-  [
-    64,
-    "h-64"
-  ],
-  [
-    72,
-    "h-72"
-  ],
-  [
-    80,
-    "h-80"
-  ],
-  [
-    96,
-    "h-96"
-  ]
-]);
-var sizes = new Set(sizeWidthMap.keys());
-var getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
-var getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
-var getSize = (size) => mx(getSizeHeight(size), getSizeWidth(size));
-var computeSize = (value, defaultSize) => {
-  if (sizes.has(value)) {
+// src/util/size.ts
+var sizeMap = {
+  0: {
+    w: "w-0",
+    h: "h-0"
+  },
+  px: {
+    w: "w-px",
+    h: "h-px"
+  },
+  0.5: {
+    w: "w-0.5",
+    h: "h-0.5"
+  },
+  1: {
+    w: "w-1",
+    h: "h-1"
+  },
+  1.5: {
+    w: "w-1.5",
+    h: "h-1.5"
+  },
+  2: {
+    w: "w-2",
+    h: "h-2"
+  },
+  2.5: {
+    w: "w-2.5",
+    h: "h-2.5"
+  },
+  3: {
+    w: "w-3",
+    h: "h-3"
+  },
+  3.5: {
+    w: "w-3.5",
+    h: "h-3.5"
+  },
+  4: {
+    w: "w-4",
+    h: "h-4"
+  },
+  5: {
+    w: "w-5",
+    h: "h-5"
+  },
+  6: {
+    w: "w-6",
+    h: "h-6"
+  },
+  7: {
+    w: "w-7",
+    h: "h-7"
+  },
+  8: {
+    w: "w-8",
+    h: "h-8"
+  },
+  9: {
+    w: "w-9",
+    h: "h-9"
+  },
+  10: {
+    w: "w-10",
+    h: "h-10"
+  },
+  11: {
+    w: "w-11",
+    h: "h-11"
+  },
+  12: {
+    w: "w-12",
+    h: "h-12"
+  },
+  14: {
+    w: "w-14",
+    h: "h-14"
+  },
+  16: {
+    w: "w-16",
+    h: "h-16"
+  },
+  20: {
+    w: "w-20",
+    h: "h-20"
+  },
+  24: {
+    w: "w-24",
+    h: "h-24"
+  },
+  28: {
+    w: "w-28",
+    h: "h-28"
+  },
+  32: {
+    w: "w-32",
+    h: "h-32"
+  },
+  36: {
+    w: "w-36",
+    h: "h-36"
+  },
+  40: {
+    w: "w-40",
+    h: "h-40"
+  },
+  44: {
+    w: "w-44",
+    h: "h-44"
+  },
+  48: {
+    w: "w-48",
+    h: "h-48"
+  },
+  52: {
+    w: "w-52",
+    h: "h-52"
+  },
+  56: {
+    w: "w-56",
+    h: "h-56"
+  },
+  60: {
+    w: "w-60",
+    h: "h-60"
+  },
+  64: {
+    w: "w-64",
+    h: "h-64"
+  },
+  72: {
+    w: "w-72",
+    h: "h-72"
+  },
+  80: {
+    w: "w-80",
+    h: "h-80"
+  },
+  96: {
+    w: "w-96",
+    h: "h-96"
+  }
+};
+var SIZE_VALUES = Object.keys(sizeMap).map((key) => key === "px" ? "px" : Number(key));
+var getHeight = (size) => sizeMap[size]?.h;
+var getWidth = (size) => sizeMap[size]?.w;
+var getSize = (size) => mx(getHeight(size), getWidth(size));
+var sizeValue = (size) => size === "px" ? 1 : size;
+var sizeToRem = (size) => size === "px" ? "1px" : `${size * 0.25}rem`;
+var iconSize = (size) => ({
+  "--icon-size": size ? sizeToRem(size) : "initial"
+});
+var snapSize = (value, defaultSize) => {
+  if (SIZE_VALUES.includes(value)) {
     return value;
   } else if (value <= 0) {
     return 0;
-  } else if (value === 1) {
+  } else if (value < 0.5) {
     return "px";
   } else {
     const wholeSeries = Math.floor(value);
     const halfSeries = Math.floor(value * 2) / 2;
     const doubleSeries = Math.floor(value / 2) * 2;
     const quadrupleSeries = Math.floor(value / 4) * 4;
-    if (sizes.has(halfSeries)) {
+    if (SIZE_VALUES.includes(halfSeries)) {
       return halfSeries;
-    } else if (sizes.has(wholeSeries)) {
+    } else if (SIZE_VALUES.includes(wholeSeries)) {
       return wholeSeries;
-    } else if (sizes.has(doubleSeries)) {
+    } else if (SIZE_VALUES.includes(doubleSeries)) {
       return doubleSeries;
-    } else if (sizes.has(quadrupleSeries)) {
+    } else if (SIZE_VALUES.includes(quadrupleSeries)) {
       return quadrupleSeries;
     } else {
       return defaultSize;
     }
   }
 };
-var sizeValue = (size) => size === "px" ? 1 : size;
-
-// src/fragments/text.ts
-var textBlockWidth = "w-full max-w-text-content mx-auto";
-var descriptionTextPrimary = "text-sm font-normal text-base-surface-text";
-var descriptionMessage = "text-description border border-dashed border-separator rounded-sm p-4";
 
-// src/fragments/valence.ts
+// src/util/valence.ts
 var textValence = (valence) => {
   switch (valence) {
     case "success":
@@ -677,12 +574,12 @@ var messageValence = (valence) => {
 var avatarRoot = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mr-1" : "-mr-2"), ...etc);
 var avatarLabel = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
 var avatarDescription = ({ srOnly }, ...etc) => mx("text-description", srOnly && "sr-only", ...etc);
-var avatarFrame = ({ variant }, ...etc) => mx("w-full h-full bg-(--surface-bg)", variant === "circle" ? "rounded-full" : "rounded-sm", ...etc);
+var avatarFrame = ({ variant }, ...etc) => mx("h-full w-full bg-(--surface-bg)", variant === "circle" ? "rounded-full" : "rounded-sm", ...etc);
 var avatarStatusIcon = ({ status, size = 3 }, ...etc) => mx("absolute bottom-0 end-0", getSize(size), status === "inactive" ? "text-amber-400 dark:text-amber-300" : status === "active" ? "text-emerald-400 dark:text-emerald-300" : "text-neutral-400 dark:text-neutral-300", ...etc);
 var avatarRing = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded-sm", status === "current" ? "border-primary-400 dark:border-primary-500" : status === "active" ? "border-emerald-400 dark:border-emerald-400" : status === "error" ? "border-rose-400 dark:border-rose-500" : status === "warning" ? "border-amber-400 dark:border-amber-500" : status === "inactive" ? "border-separator" : status === "internal" ? "border-fuchsia-600" : "border-[color:var(--surface-bg)]", animation === "pulse" ? "animate-halo-pulse" : "", ...etc);
 var avatarFallbackText = (_props, ...etc) => mx("fill-white", ...etc);
 var avatarGroup = (_props, ...etc) => mx("inline-flex items-center", ...etc);
-var avatarGroupLabel = ({ size, srOnly }, ...etc) => mx(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center", size && getSizeHeight(size), ...etc);
+var avatarGroupLabel = ({ size, srOnly }, ...etc) => mx(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center", size && getHeight(size), ...etc);
 var avatarGroupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : "text-description", ...etc);
 var avatarTheme = {
   root: avatarRoot,
@@ -712,12 +609,12 @@ var breadcrumbTheme = {
 };
 
 // src/theme/components/card.ts
-var cardRoot = ({ border, fullWidth }, ...etc) => mx("dx-card group/card relative flex flex-col w-full min-h-(--dx-rail-item) dx-card-min-width overflow-hidden", border && "bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
-var cardToolbar = ({ coarse }, ...etc) => mx("dx-card__toolbar dx-density-fine bg-transparent col-span-3 !grid grid-cols-subgrid [contain:none]", coarse && "grid-cols-[var(--dx-l0-avatar-size)_minmax(0,1fr)_var(--dx-rail-item)]", ...etc);
+var cardRoot = ({ border, fullWidth }, ...etc) => mx("dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", border && "bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
+var cardToolbar = (_, ...etc) => mx("dx-card__toolbar dx-density-fine bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]", ...etc);
 var cardTitle = (_props, ...etc) => mx("dx-card__title grow truncate", ...etc);
-var cardContent = (_props, ...etc) => mx("dx-card__content contents [&>:last-child]:pb-1", ...etc);
+var cardContent = (_props, ...etc) => mx("dx-card__content contents pb-1 last:pb-0", ...etc);
 var cardHeading = ({ variant = "default" }, ...etc) => mx("dx-card__heading", variant === "default" && "py-1", variant === "subtitle" && "py-2 text-xs text-description font-medium uppercase", ...etc);
-var cardText = ({ variant = "default", truncate: _truncate }, ...etc) => mx("dx-card__text flex overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5", ...etc);
+var cardText = ({ variant = "default", truncate: _truncate }, ...etc) => mx("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
 var cardTextSpan = ({ variant = "default", truncate }, ...etc) => mx(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
 var cardPoster = (_props, ...etc) => mx("dx-card__poster col-span-3 max-h-[200px]", ...etc);
 var cardPosterIcon = (_props, ...etc) => mx("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
@@ -725,12 +622,14 @@ var cardAction = (_props, ...etc) => mx("dx-card__acztion col-span-3 !grid grid-
 var cardActionLabel = (_props, ...etc) => mx("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
 var cardLink = (_props, ...etc) => mx("dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
 var cardLinkLabel = (_props, ...etc) => mx("dx-card__link-label min-w-0 flex-1 truncate", ...etc);
-var cardIconBlock = (_props, ...etc) => mx("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center", ...etc);
+var cardRow = (_, ...etc) => mx("dx-card__row col-span-3 grid grid-cols-subgrid", ...etc);
+var cardIconBlock = ({ padding }, ...etc) => mx("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center", padding && "[&>*]:p-1", ...etc);
 var cardTheme = {
   root: cardRoot,
   toolbar: cardToolbar,
   title: cardTitle,
   content: cardContent,
+  row: cardRow,
   heading: cardHeading,
   text: cardText,
   "text-span": cardTextSpan,
@@ -744,12 +643,12 @@ var cardTheme = {
 };
 
 // src/theme/components/button.ts
-var primaryButtonColors = "text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
-var staticDefaultButtonColors = "bg-input-surface text-input-surface-text";
+var primaryButtonColors = "text-accent-foreground bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
+var staticDefaultButtonColors = "bg-input-surface text-input-foreground";
 var defaultButtonColors = mx(staticDefaultButtonColors, "data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface");
 var ghostButtonColors = mx(ghostHover, "hover:text-inherit data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface");
 var buttonRoot = (_props, ...etc) => {
-  return mx("dx-button dx-focus-ring group max-w-full [&_span]:truncate", ...etc);
+  return mx("dx-button dx-focus-ring group [&_span]:truncate", ...etc);
 };
 var buttonGroup = (_props, ...etc) => {
   return mx("inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
@@ -759,8 +658,37 @@ var buttonTheme = {
   group: buttonGroup
 };
 
+// src/theme/primitives/column.ts
+var withColumn = {
+  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
+  center: () => "[grid-column:var(--dx-col,auto)]",
+  /** Propagates the Column grid to children via subgrid. No-op outside Column.
+  *  Direct children default to center column unless they are a dx-container (ScrollArea). */
+  propagate: () => "[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]",
+  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
+  consumed: () => "[--dx-col:auto]"
+};
+var columnRoot = (_, ...etc) => {
+  return mx("dx-column-root grid", ...etc);
+};
+var columnRow = (_, ...etc) => {
+  return mx("col-span-3 grid grid-cols-subgrid", ...etc);
+};
+var columnBleed = (_, ...etc) => {
+  return mx("col-span-full grid grid-cols-subgrid min-h-0", ...etc);
+};
+var columnCenter = (_, ...etc) => {
+  return mx(withColumn.center(), "min-h-0", ...etc);
+};
+var columnTheme = {
+  root: columnRoot,
+  row: columnRow,
+  bleed: columnBleed,
+  center: columnCenter
+};
+
 // src/theme/components/dialog.ts
-var sizeMap = {
+var sizeMap2 = {
   sm: "md:max-w-[24rem]",
   md: "md:max-w-[32rem]!",
   lg: "md:max-w-[40rem]!",
@@ -768,11 +696,11 @@ var sizeMap = {
 };
 var dialogOverlay = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
 var dialogContent = ({ inOverlayLayout, size = "md" }, ...etc) => {
-  return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface dx-density-coarse py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap[size], ...etc);
+  return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface dx-density-coarse py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap2[size], ...etc);
 };
-var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", ...etc);
-var dialogBody = (_props, ...etc) => mx("dx-dialog__body flex flex-col h-full py-2 gap-2", ...etc);
-var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse", ...etc);
+var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
+var dialogBody = (_props, ...etc) => mx("dx-dialog__body dx-expander", withColumn.propagate(), ...etc);
+var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse", withColumn.center(), ...etc);
 var dialogTitle = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
 var dialogDescription = ({ srOnly }, ...etc) => mx("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
 var dialogTheme = {
@@ -785,15 +713,24 @@ var dialogTheme = {
   description: dialogDescription
 };
 
+// src/theme/components/focus.ts
+var focusRing = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-focus-ring-subtle", "data-[focus-state=active]:after:ring-focus-ring-subtle", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
+var focusTheme = {
+  group: focusRing,
+  item: focusRing
+};
+
 // src/theme/components/icon.ts
-var iconRoot = ({ size }, etc) => mx("shrink-0 h-[1em] w-[1em] text-[var(--icons-color,currentColor)]", size && getSize(size), etc);
+var iconRoot = ({ size }, etc) => {
+  return mx("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
+};
 var iconTheme = {
   root: iconRoot
 };
 
 // src/theme/components/icon-button.ts
-var iconButtonRoot = ({ iconOnly }, ...etc) => {
-  return mx("gap-2", iconOnly && "p-icon-button-padding min-h-0", ...etc);
+var iconButtonRoot = ({ iconOnly, square }, ...etc) => {
+  return mx("px-1.5", !iconOnly && "gap-1.5", square && "aspect-square", ...etc);
 };
 var iconButtonTheme = {
   root: iconButtonRoot
@@ -818,49 +755,46 @@ var inputValence = (valence) => {
   }
 };
 var sharedSubduedInputStyles = (props) => [
-  "py-0 w-full bg-transparent text-current placeholder-placeholder",
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  props.density === "fine" ? fineBlockSize : coarseBlockSize,
-  subduedFocus,
+  "py-0 w-full bg-transparent text-current placeholder-placeholder",
+  "dx-focus-subdued",
+  densityDimensions(props.density),
   props.disabled && staticDisabled
 ];
 var sharedDefaultInputStyles = (props) => [
-  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-foreground rounded-xs placeholder-placeholder",
   textInputSurfaceFocus,
-  props.density === "fine" ? fineDimensions : coarseDimensions,
+  densityDimensions(props.density),
   props.disabled ? staticDisabled : textInputSurfaceHover
 ];
 var sharedStaticInputStyles = (props) => [
-  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-foreground rounded-xs placeholder-placeholder",
   textInputSurfaceFocus,
   textInputSurfaceHover,
   props.focused && "bg-attention-surface",
   inputValence(props.validationValence),
   props.disabled && staticDisabled,
-  props.focused && staticFocusRing
+  props.focused && "dx-focus-static"
 ];
-var inputInput = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), !props.disabled && focusRing, inputValence(props.validationValence), ...etc);
-var inputTextArea = (props, ...etc) => inputInput(props, ...[
-  "-mb-1.5",
-  ...etc
-]);
+var inputInput = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), !props.disabled && "dx-focus-ring", inputValence(props.validationValence), ...etc);
+var inputTextArea = (props, ...etc) => inputInput(props, ...etc);
 var inputCheckbox = ({ size = 5 }, ...etc) => mx("dx-checkbox dx-focus-ring", getSize(size), ...etc);
-var inputCheckboxIndicator = ({ size = 5, checked }, ...etc) => mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
+var inputCheckboxIndicator = ({ size = 5, checked }, ...etc) => mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
 var inputSwitch = ({ size = 5, disabled }, ...etc) => mx(
-  getSizeHeight(size),
-  getSizeWidth(computeSize(sizeValue(size) * 1.75, 9)),
+  getHeight(size),
+  getWidth(snapSize(sizeValue(size) * 1.75, 9)),
   booleanInputSurface,
   !disabled && booleanInputSurfaceHover,
   // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
   "cursor-pointer shrink-0 rounded-full px-1 mx-1 relative",
-  focusRing,
+  "dx-focus-ring",
   ...etc
 );
 var inputSwitchThumb = ({ size = 5 }, ...etc) => mx(getSize(size === "px" ? "px" : size - 2), "block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]", ...etc);
 var inputWithSegmentsInput = (props, ...etc) => mx("font-mono selection:bg-transparent mx-auto", props.density === "fine" ? "text-base pointer-fine:text-sm" : "text-lg", props.disabled && "cursor-not-allowed", ...etc);
-var inputSegment = (props, ...etc) => mx("flex items-center justify-center font-mono", props.density === "fine" ? "size-10 pointer-fine:size-8 rounded-xs" : "size-12 rounded-xs", "bg-input-surface text-base-surface-text transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-neutral-focus-indicator", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-neutral-focus-indicator", inputValence(props.validationValence), props.disabled && staticDisabled, ...etc);
+var inputSegment = (props, ...etc) => mx("flex items-center justify-center font-mono", props.density === "fine" ? "size-10 pointer-fine:size-8 rounded-xs" : "size-12 rounded-xs", "bg-input-surface text-base-foreground transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", inputValence(props.validationValence), props.disabled && staticDisabled, ...etc);
 var inputLabel = (props, ...etc) => mx("block", inputTextLabel, props.srOnly && "sr-only", ...etc);
 var inputDescription = (props, ...etc) => mx("text-description", props.srOnly && "sr-only", ...etc);
 var inputDescriptionAndValidation = (props, ...etc) => mx("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
@@ -881,7 +815,7 @@ var inputTheme = {
 };
 
 // src/theme/components/link.ts
-var linkRoot = ({ variant }, ...etc) => mx("underline decoration-1 underline-offset-2 transition-color rounded-xs", variant === "neutral" ? "text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90" : "text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover", focusRing, ...etc);
+var linkRoot = ({ variant }, ...etc) => mx("underline decoration-1 underline-offset-2 transition-color rounded-xs", variant === "neutral" ? "text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90" : "text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover", "dx-focus-ring", ...etc);
 var linkTheme = {
   root: linkRoot
 };
@@ -890,9 +824,9 @@ var linkTheme = {
 var listRoot = (_, ...etc) => mx(...etc);
 var listItem = ({ collapsible }, ...etc) => mx(!collapsible && "flex", ...etc);
 var listItemEndcap = ({ density }, ...etc) => mx(density === "fine" ? getSize(8) : getSize(10), "shrink-0 flex items-center justify-center", ...etc);
-var listItemHeading = ({ density }, ...etc) => mx(densityBlockSize(density), "flex items-center", ...etc);
+var listItemHeading = ({ density }, ...etc) => mx(densityBlockSize(density), "flex items-center overflow-hidden [&>span]:truncate", ...etc);
 var listItemDragHandleIcon = (_props, ...etc) => mx(getSize(5), "mt-2.5", ...etc);
-var listItemOpenTrigger = ({ density }, ...etc) => mx("w-5 rounded-sm flex justify-center items-center", densityBlockSize(density), ghostHover, focusRing, ...etc);
+var listItemOpenTrigger = ({ density }, ...etc) => mx("w-5 rounded-sm flex justify-center items-center", densityBlockSize(density), ghostHover, "dx-focus-ring", ...etc);
 var listItemOpenTriggerIcon = (_props, ...etc) => {
   return mx(getSize(5), ...etc);
 };
@@ -931,7 +865,7 @@ var menuContent = ({ elevation }, ...etc) => mx("dx-modal-surface w-48 rounded-s
   elevation: "positioned"
 }), ...etc);
 var menuViewport = (_props, ...etc) => mx("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
-var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm", "data-[highlighted]:bg-hover-surface", subduedFocus, dataDisabled, ...etc);
+var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm", "hover:bg-hover-surface data-[highlighted]:bg-hover-surface", "dx-focus-subdued", dataDisabled, ...etc);
 var menuSeparator = (_props, ...etc) => mx("my-1 mx-2 h-px bg-separator", ...etc);
 var menuGroupLabel = (_props, ...etc) => mx("text-description", "select-none px-2 py-2", ...etc);
 var menuArrow = (_props, ...etc) => mx("fill-separator", ...etc);
@@ -946,19 +880,19 @@ var menuTheme = {
 
 // src/theme/components/message.ts
 var messageRoot = ({ valence }, etc) => {
-  return mx("grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm", messageValence(valence), etc);
+  return mx("grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm", messageValence(valence), etc);
 };
 var messageHeader = (_, etc) => {
-  return mx("col-span-2 grid grid-cols-subgrid items-center", etc);
+  return mx("col-span-full grid grid-cols-subgrid items-center", etc);
 };
 var messageTitle = (_, etc) => {
-  return mx("col-start-2 text-lg gap-trim-sm [&>svg]:inline-block", etc);
+  return mx("col-start-2 truncate", etc);
 };
 var messageIcon = (_, etc) => {
-  return mx("col-start-1", etc);
+  return mx("col-start-1 grid place-items-center", etc);
 };
 var messageContent = (_, etc) => {
-  return mx("grid grid-cols-subgrid col-start-2 first:font-medium", etc);
+  return mx("col-start-2 grid grid-cols-subgrid inline first:font-medium", etc);
 };
 var messageTheme = {
   root: messageRoot,
@@ -974,15 +908,8 @@ var popoverContent = ({ elevation }, ...etc) => mx("dx-modal-surface border bord
 }), surfaceZIndex({
   elevation,
   level: "menu"
-}), focusRing, ...etc);
-var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx(
-  "flex flex-col min-h-0 min-w-popover-min-width",
-  (constrainBlock || constrainInline) && "overflow-hidden",
-  // Ensures it respects available height from Radix (or 100dvh).
-  constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]",
-  constrainInline && "max-w-(--radix-popover-content-available-width)",
-  ...etc
-);
+}), "dx-focus-ring", ...etc);
+var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
 var popoverArrow = (_props, ...etc) => mx("fill-separator", ...etc);
 var popoverTheme = {
   content: popoverContent,
@@ -991,40 +918,66 @@ var popoverTheme = {
 };
 
 // src/theme/components/scroll-area.ts
-var scrollAreaRoot = ({ orientation, margin, thin }, ...etc) => mx(
-  "overflow-hidden",
-  orientation === "vertical" && "group/scroll-v dx-container",
-  orientation === "horizontal" && "group/scroll-h dx-container",
-  orientation === "all" && "group/scroll-all dx-container",
-  // TODO(burdon): Audit composition.
-  // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
-  "[.dx-column_&]:col-span-full",
-  // NOTE: Uses --gutter CSS variable
-  // If contained within Column.Root grid, the gutter is set by that component.
-  margin && [
-    orientation === "vertical" && (thin ? "pl-[var(--gutter,4px)] pr-[calc(var(--gutter,4px)-4px)]" : "pl-[var(--gutter,8px)] pr-[calc(var(--gutter,8px)-8px)]"),
-    orientation === "horizontal" && (thin ? "py-[var(--gutter,4px)]" : "py-[var(--gutter,8px)]"),
-    orientation === "all" && (thin ? "pl-[var(--gutter,4px)] py-[var(--gutter,8px)]" : "pl-[var(--gutter,8px)] py-[var(--gutter,8px)]")
-  ],
+var scrollbar = {
+  thin: {
+    size: 4,
+    padding: 4
+  },
+  coarse: {
+    size: 8,
+    padding: 8
+  }
+};
+var scrollAreaRoot = ({ orientation }, ...etc) => mx(
+  // Expand
+  "dx-container",
+  orientation === "vertical" && "group/scroll-v flex flex-col",
+  orientation === "horizontal" && "group/scroll-h flex",
+  orientation === "all" && "group/scroll-all",
+  // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+  "[.dx-column-root_&]:col-span-full",
   ...etc
 );
-var scrollAreaViewport = ({ orientation, autoHide, padding, snap, thin }, ...etc) => mx("h-full w-full", orientation === "vertical" && "flex flex-col overflow-y-scroll", orientation === "horizontal" && "flex overflow-x-scroll", orientation === "all" && "overflow-scroll", thin ? "[&::-webkit-scrollbar]:w-[4px] [&::-webkit-scrollbar]:h-[4px]" : "[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:h-[8px]", "[&::-webkit-scrollbar-corner]:bg-transparent", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-none", autoHide ? [
-  orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-  orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-  orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-] : [
-  orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-  orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-  orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-], padding && [
-  orientation === "vertical" && "px-[4px]",
-  orientation === "horizontal" && "pb-[4px]",
-  orientation === "all" && "pl-[4px] pb-[4px]"
-], snap && [
-  orientation === "vertical" && "snap-y snap-mandatory",
-  orientation === "horizontal" && "snap-x snap-mandatory",
-  orientation === "all" && "snap-both snap-mandatory"
-], ...etc);
+var scrollAreaViewport = ({ orientation, centered, padding, snap, autoHide }, ...etc) => {
+  return mx(
+    "flex-1 min-h-0 w-full",
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
+    orientation === "vertical" && "overflow-y-scroll",
+    orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain",
+    orientation === "all" && "overflow-scroll",
+    "[&::-webkit-scrollbar-corner]:bg-transparent",
+    "[&::-webkit-scrollbar-track]:bg-transparent",
+    "[&::-webkit-scrollbar-thumb]:rounded-none",
+    "[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]",
+    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
+    // If centered, left padding compensates for scrollbar width so content is visually centered.
+    (orientation === "vertical" || orientation === "all") && (padding ? [
+      centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]",
+      "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"
+    ] : centered && "pl-[var(--scroll-width)]"),
+    (orientation === "horizontal" || orientation === "all") && (padding ? [
+      centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]",
+      "pb-[var(--scroll-padding)]"
+    ] : centered && "pt-[var(--scroll-width)]"),
+    snap && [
+      orientation === "vertical" && "snap-y snap-mandatory",
+      orientation === "horizontal" && "snap-x snap-mandatory",
+      orientation === "all" && "snap-both snap-mandatory"
+    ],
+    autoHide ? [
+      orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
+      orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
+      orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
+    ] : [
+      orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
+      orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
+      orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
+    ],
+    ...etc
+  );
+};
 var scrollAreaTheme = {
   root: scrollAreaRoot,
   viewport: scrollAreaViewport
@@ -1040,7 +993,7 @@ var selectContent = ({ elevation }, ...etc) => {
   }), ...etc);
 };
 var selectViewport = (_props, ...etc) => mx(...etc);
-var selectItem = (_props, ...etc) => mx("flex items-center min-h-[2rem] px-3 py-1 gap-2", "text-base-surface-text leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", ghostHighlighted, ...etc);
+var selectItem = (_props, ...etc) => mx("flex items-center min-h-[2rem] px-3 py-1 gap-2", "text-base-foreground leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
 var selectItemIndicator = (_props, ...etc) => mx("items-center", ...etc);
 var selectArrow = (_props, ...etc) => mx("fill-separator", ...etc);
 var selectSeparator = (_props, ...etc) => mx("self-stretch border-b my-1 border-separator", ...etc);
@@ -1076,8 +1029,8 @@ var skeletonTheme = {
 };
 
 // src/theme/components/status.ts
-var statusRoot = ({ variant = "default" }, ...etc) => mx("h-1 relative bg-hover-overlay rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-20 inline-block", ...etc);
-var statusBar = ({ indeterminate, variant = "default" }, ...etc) => mx("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-accent-surface" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
+var statusRoot = ({ variant = "default" }, ...etc) => mx("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-20 inline-block bg-base-surface", ...etc);
+var statusBar = ({ variant = "default", indeterminate }, ...etc) => mx("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
 var statusTheme = {
   root: statusRoot,
   bar: statusBar
@@ -1098,7 +1051,7 @@ var toastViewport = (_props, ...etc) => mx(
 );
 var toastRoot = (_props, ...etc) => mx("dx-modal-surface rounded-md flex p-2 gap-2", surfaceShadow({
   elevation: "toast"
-}), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", focusRing, ...etc);
+}), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
 var toastBody = (_props, ...etc) => mx("grow flex flex-col gap-1 justify-center pl-2", ...etc);
 var toastActions = (_props, ...etc) => mx("shrink-0 flex flex-col gap-1 justify-center", ...etc);
 var toastTitle = ({ srOnly }, ...etc) => mx("shrink-0 font-medium", srOnly && "sr-only", ...etc);
@@ -1117,23 +1070,16 @@ var toolbarLayout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center ove
 var toolbarRoot = ({ density, disabled, layoutManaged }, ...etc) => {
   return mx("bg-toolbar-surface dx-toolbar", density === "coarse" && "h-(--dx-rail-size) px-3!", disabled && "*:opacity-20", !layoutManaged && toolbarLayout, ...etc);
 };
-var toolbarInner = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && [
-    "flex gap-1",
-    textBlockWidth
-  ], ...etc);
-};
 var toolbarText = (_, ...etc) => {
-  return mx("grow truncate items-center", textBlockWidth, ...etc);
+  return mx("px-2 grow truncate items-center", ...etc);
 };
 var toolbarTheme = {
   root: toolbarRoot,
-  inner: toolbarInner,
   text: toolbarText
 };
 
 // src/theme/components/tooltip.ts
-var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-surface-text rounded-sm", surfaceShadow({
+var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-foreground rounded-sm", surfaceShadow({
   elevation: "positioned"
 }), surfaceZIndex({
   elevation,
@@ -1181,7 +1127,7 @@ var levelStyles = /* @__PURE__ */ new Map([
   ]
 ]);
 var treegridRoot = (_, ...etc) => mx("grid", ...etc);
-var treegridRow = ({ level = 1 }, ...etc) => mx("contents", levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+var treegridRow = ({ level = 1 }, ...etc) => mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
 var treegridCell = ({ indent }, ...etc) => mx(indent && "indent", ...etc);
 var treegridTheme = {
   root: treegridRoot,
@@ -1189,44 +1135,22 @@ var treegridTheme = {
   cell: treegridCell
 };
 
-// src/theme/theme.ts
-import { getDeep } from "@dxos/util";
-
-// src/theme/primitives/column.ts
-var columnRoot = (_, ...etc) => mx("dx-column w-full min-w-0 grid", ...etc);
-var columnRow = (_, ...etc) => mx("col-span-3 grid grid-cols-subgrid", ...etc);
-var columnSegment = (_, ...etc) => mx("col-start-2 col-span-1 min-w-0", ...etc);
-var columnTheme = {
-  root: columnRoot,
-  row: columnRow,
-  segment: columnSegment
-};
-
 // src/theme/primitives/panel.ts
+var sizes = {
+  lg: "h-(--dx-topbar-size)",
+  md: "h-(--dx-toolbar-size)",
+  sm: "h-(--dx-statusbar-size)"
+};
 var panelRoot = (_, ...etc) => mx(
   // prettier-ignore
-  "h-full w-full grid grid-cols-[100%] overflow-hidden",
+  "dx-container grid grid-cols-[100%] overflow-hidden",
   // Add uncategorized children to content slot.
   "[&>*:not([data-slot])]:[grid-area:content]",
   ...etc
 );
-var panelToolbar = (_, ...etc) => mx(
-  // prettier-ignore
-  "[grid-area:toolbar]",
-  "border-b border-subdued-separator relative",
-  "[.dx-main-mobile-layout_&]:px-3",
-  ...etc
-);
-var panelContent = (_, ...etc) => mx(
-  // prettier-ignore
-  "[grid-area:content] overflow-hidden min-h-0",
-  ...etc
-);
-var panelStatusbar = (_, ...etc) => mx(
-  // prettier-ignore
-  "[grid-area:statusbar]",
-  ...etc
-);
+var panelToolbar = ({ size = "md" }, ...etc) => mx("[grid-area:toolbar]", "shrink-0", sizes[size], ...etc);
+var panelContent = (_, ...etc) => mx("[grid-area:content] min-h-0", ...etc);
+var panelStatusbar = ({ size = "md" }, ...etc) => mx("[grid-area:statusbar]", "shrink-0", sizes[size], ...etc);
 var panelTheme = {
   root: panelRoot,
   toolbar: panelToolbar,
@@ -1235,6 +1159,7 @@ var panelTheme = {
 };
 
 // src/theme/theme.ts
+import { getDeep } from "@dxos/util";
 var defaultTheme = {
   themeName: () => "default",
   //
@@ -1250,6 +1175,7 @@ var defaultTheme = {
   button: buttonTheme,
   card: cardTheme,
   dialog: dialogTheme,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,
@@ -1305,17 +1231,16 @@ export {
   cardMinBlockSize,
   cardMinInlineSize,
   cardTheme,
-  coarseBlockSize,
-  coarseDimensions,
+  columnTheme,
+  composable,
   composableProps,
-  computeSize,
   dataDisabled,
   defaultButtonColors,
   defaultTheme,
   defaultTx,
   densityBlockSize,
+  densityDimensions,
   descriptionMessage,
-  descriptionTextPrimary,
   dialogActionBar,
   dialogBody,
   dialogContent,
@@ -1324,21 +1249,16 @@ export {
   dialogOverlay,
   dialogTheme,
   dialogTitle,
-  fineBlockSize,
-  fineDimensions,
-  focusRing,
+  focusTheme,
   getHashHue,
   getHashStyles,
+  getHeight,
   getSize,
-  getSizeHeight,
-  getSizeWidth,
   getStyles,
+  getWidth,
   ghostButtonColors,
   ghostFocusWithin,
-  ghostHighlighted,
   ghostHover,
-  ghostSelected,
-  ghostSelectedContainerMd,
   groupHoverControlItemWithTransition,
   hoverableControlItem,
   hoverableControls,
@@ -1350,6 +1270,7 @@ export {
   iconButtonRoot,
   iconButtonTheme,
   iconRoot,
+  iconSize,
   iconTheme,
   inputTextLabel,
   inputTheme,
@@ -1387,6 +1308,7 @@ export {
   mx,
   osTranslations,
   palette,
+  panelTheme,
   popoverArrow,
   popoverContent,
   popoverTheme,
@@ -1396,6 +1318,7 @@ export {
   scrollAreaRoot,
   scrollAreaTheme,
   scrollAreaViewport,
+  scrollbar,
   selectArrow,
   selectContent,
   selectItem,
@@ -1406,23 +1329,22 @@ export {
   selectViewport,
   separatorRoot,
   separatorTheme,
+  sizeToRem,
   sizeValue,
   skeletonRoot,
   skeletonTheme,
+  slottable,
+  snapSize,
   splitterTheme,
   staticDefaultButtonColors,
   staticDisabled,
-  staticFocusRing,
   statusBar,
   statusRoot,
   statusTheme,
-  subduedFocus,
-  subtleHover,
   surfaceShadow,
   surfaceZIndex,
   tagRoot,
   tagTheme,
-  textBlockWidth,
   textValence,
   toastActions,
   toastBody,
@@ -1431,7 +1353,6 @@ export {
   toastTheme,
   toastTitle,
   toastViewport,
-  toolbarInner,
   toolbarLayout,
   toolbarRoot,
   toolbarText,
@@ -1443,6 +1364,7 @@ export {
   treegridCell,
   treegridRoot,
   treegridRow,
-  treegridTheme
+  treegridTheme,
+  withColumn
 };
 //# sourceMappingURL=index.mjs.map