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

package/dist/lib/browser/index.mjs

@@ -56,7 +56,22 @@ var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSiz
 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 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/text.ts
+var descriptionTextPrimary = "text-sm font-normal text-base-surface-text";
+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,27 +104,6 @@ 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",
@@ -273,7 +267,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 +315,233 @@ var mx = extendTailwindMerge({
     }
   }
 });
-var composableProps = ({ className, classNames, ...props }, { className: defaultClassNames, ...defaults } = {}) => ({
+var composableProps = ({ className, classNames, ...props }, { classNames: defaultClassNames, ...defaults } = {}) => ({
+  // Default props.
   ...defaults,
+  // Spread supplied props.
   ...props,
+  // 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
+          }, {
+            F: __dxlog_file,
+            L: 118,
+            S: this,
+            C: (f, a) => f(...a)
+          });
+        }
+      } 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 +573,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,8 +608,8 @@ 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 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 cardHeading = ({ variant = "default" }, ...etc) => mx("dx-card__heading", variant === "default" && "py-1", variant === "subtitle" && "py-2 text-xs text-description font-medium uppercase", ...etc);
@@ -725,7 +621,7 @@ 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 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,
@@ -749,7 +645,7 @@ var staticDefaultButtonColors = "bg-input-surface text-input-surface-text";
 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);
@@ -760,7 +656,7 @@ var buttonTheme = {
 };
 
 // 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,10 +664,10 @@ 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 dialogBody = (_props, ...etc) => mx("dx-dialog__body", ...etc);
 var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse", ...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);
@@ -785,8 +681,17 @@ var dialogTheme = {
   description: dialogDescription
 };
 
+// src/theme/components/focus.ts
+var focusRing = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-neutral-focus-indicator", "data-[focus-state=active]:after:ring-neutral-focus-indicator", "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
 };
@@ -821,7 +726,7 @@ 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,
+  "dx-focus-subdued",
   props.disabled && staticDisabled
 ];
 var sharedDefaultInputStyles = (props) => [
@@ -839,23 +744,20 @@ var sharedStaticInputStyles = (props) => [
   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);
@@ -881,7 +783,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
 };
@@ -892,7 +794,7 @@ 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 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 +833,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", "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);
@@ -952,7 +854,7 @@ var messageHeader = (_, etc) => {
   return mx("col-span-2 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 gap-trim-sm [&>svg]:inline-block", etc);
 };
 var messageIcon = (_, etc) => {
   return mx("col-start-1", etc);
@@ -974,15 +876,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("flex flex-col 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 +886,63 @@ 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.
+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 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)]")
-  ],
   ...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, thin, autoHide }, ...etc) => {
+  return mx(
+    "h-full w-full",
+    orientation === "vertical" && "flex flex-col overflow-y-scroll",
+    orientation === "horizontal" && "flex overflow-x-scroll",
+    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 +958,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-surface-text 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 +994,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 +1016,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,18 +1035,11 @@ 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
 };
 
@@ -1189,44 +1100,42 @@ 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 columnRoot = (_, ...etc) => {
+  return mx("dx-column w-full min-w-0 grid", ...etc);
+};
+var columnContent = (_, ...etc) => {
+  return mx("col-span-full grid grid-cols-subgrid min-h-0 [&>:not(.dx-container)]:col-start-2", ...etc);
+};
+var columnViewport = (_, ...etc) => {
+  return mx(...etc);
+};
+var columnRow = ({ fullWidth, center }, ...etc) => {
+  return mx("col-span-3 grid grid-cols-subgrid", fullWidth ? "col-span-3" : center && "col-start-2 col-span-1", ...etc);
+};
 var columnTheme = {
   root: columnRoot,
-  row: columnRow,
-  segment: columnSegment
+  content: columnContent,
+  viewport: columnViewport,
+  row: columnRow
 };
 
 // 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]", "flex shrink-0", sizes[size], ...etc);
+var panelContent = (_, ...etc) => mx("[grid-area:content] overflow-hidden min-h-0", ...etc);
+var panelStatusbar = ({ size = "md" }, ...etc) => mx("[grid-area:statusbar]", "flex shrink-0", sizes[size], ...etc);
 var panelTheme = {
   root: panelRoot,
   toolbar: panelToolbar,
@@ -1235,6 +1144,7 @@ var panelTheme = {
 };
 
 // src/theme/theme.ts
+import { getDeep } from "@dxos/util";
 var defaultTheme = {
   themeName: () => "default",
   //
@@ -1250,6 +1160,7 @@ var defaultTheme = {
   button: buttonTheme,
   card: cardTheme,
   dialog: dialogTheme,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,
@@ -1307,8 +1218,9 @@ export {
   cardTheme,
   coarseBlockSize,
   coarseDimensions,
+  columnTheme,
+  composable,
   composableProps,
-  computeSize,
   dataDisabled,
   defaultButtonColors,
   defaultTheme,
@@ -1326,19 +1238,16 @@ export {
   dialogTitle,
   fineBlockSize,
   fineDimensions,
-  focusRing,
+  focusTheme,
   getHashHue,
   getHashStyles,
+  getHeight,
   getSize,
-  getSizeHeight,
-  getSizeWidth,
   getStyles,
+  getWidth,
   ghostButtonColors,
   ghostFocusWithin,
-  ghostHighlighted,
   ghostHover,
-  ghostSelected,
-  ghostSelectedContainerMd,
   groupHoverControlItemWithTransition,
   hoverableControlItem,
   hoverableControls,
@@ -1350,6 +1259,7 @@ export {
   iconButtonRoot,
   iconButtonTheme,
   iconRoot,
+  iconSize,
   iconTheme,
   inputTextLabel,
   inputTheme,
@@ -1387,6 +1297,7 @@ export {
   mx,
   osTranslations,
   palette,
+  panelTheme,
   popoverArrow,
   popoverContent,
   popoverTheme,
@@ -1396,6 +1307,7 @@ export {
   scrollAreaRoot,
   scrollAreaTheme,
   scrollAreaViewport,
+  scrollbar,
   selectArrow,
   selectContent,
   selectItem,
@@ -1406,23 +1318,23 @@ 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 +1343,6 @@ export {
   toastTheme,
   toastTitle,
   toastViewport,
-  toolbarInner,
   toolbarLayout,
   toolbarRoot,
   toolbarText,