@dxos/ui-theme 0.0.0 → 0.8.4-main.16b68245aa

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,1374 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// src/defs.ts
+var osTranslations = "org.dxos.i18n.os";
+var hues = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var hueShades = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
+var roles = [
+  "fill",
+  "surface",
+  "surface-text",
+  "text",
+  "border"
+];
+var cardMinInlineSize = 18;
+var cardDefaultInlineSize = 20;
+var cardMaxInlineSize = 22;
+var cardMinBlockSize = 18;
+var cardMaxBlockSize = 30;
+
+// src/fragments/density.ts
+var fineBlockSize = "min-h-[2.5rem] pointer-fine:min-h-[2rem]";
+var coarseBlockSize = "min-h-[2.5rem]";
+var fineDimensions = `${fineBlockSize} px-2`;
+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/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 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"
+];
+var surfaceZIndex = ({ level, elevation }) => {
+  switch (level) {
+    case "tooltip":
+      return elevation === "dialog" ? [
+        "z-[53]"
+      ] : elevation === "toast" ? [
+        "z-[43]"
+      ] : [
+        "z-50"
+      ];
+    case "menu":
+      return elevation === "dialog" ? [
+        "z-[52]"
+      ] : elevation === "toast" ? [
+        "z-[42]"
+      ] : [
+        "z-20"
+      ];
+    default:
+      return elevation === "dialog" ? [
+        "z-[51]"
+      ] : elevation === "toast" ? [
+        "z-[41]"
+      ] : [
+        "z-[1]"
+      ];
+  }
+};
+
+// src/util/hash-styles.ts
+var neutral = {
+  hue: "neutral",
+  fill: "bg-neutral-fill",
+  surface: "bg-neutral-surface",
+  surfaceText: "text-neutral-surface-text",
+  text: "text-neutral-text",
+  border: "border-neutral-border"
+};
+var styles = [
+  {
+    hue: "red",
+    fill: "bg-red-fill",
+    surface: "bg-red-surface",
+    surfaceText: "text-red-surface-text",
+    text: "text-red-text",
+    border: "border-red-border"
+  },
+  {
+    hue: "orange",
+    fill: "bg-orange-fill",
+    surface: "bg-orange-surface",
+    surfaceText: "text-orange-surface-text",
+    text: "text-orange-text",
+    border: "border-orange-border"
+  },
+  {
+    hue: "amber",
+    fill: "bg-amber-fill",
+    surface: "bg-amber-surface",
+    surfaceText: "text-amber-surface-text",
+    text: "text-amber-text",
+    border: "border-amber-border"
+  },
+  {
+    hue: "yellow",
+    fill: "bg-yellow-fill",
+    surface: "bg-yellow-surface",
+    surfaceText: "text-yellow-surface-text",
+    text: "text-yellow-text",
+    border: "border-yellow-border"
+  },
+  {
+    hue: "lime",
+    fill: "bg-lime-fill",
+    surface: "bg-lime-surface",
+    surfaceText: "text-lime-surface-text",
+    text: "text-lime-text",
+    border: "border-lime-border"
+  },
+  {
+    hue: "green",
+    fill: "bg-green-fill",
+    surface: "bg-green-surface",
+    surfaceText: "text-green-surface-text",
+    text: "text-green-text",
+    border: "border-green-border"
+  },
+  {
+    hue: "emerald",
+    fill: "bg-emerald-fill",
+    surface: "bg-emerald-surface",
+    surfaceText: "text-emerald-surface-text",
+    text: "text-emerald-text",
+    border: "border-emerald-border"
+  },
+  {
+    hue: "teal",
+    fill: "bg-teal-fill",
+    surface: "bg-teal-surface",
+    surfaceText: "text-teal-surface-text",
+    text: "text-teal-text",
+    border: "border-teal-border"
+  },
+  {
+    hue: "cyan",
+    fill: "bg-cyan-fill",
+    surface: "bg-cyan-surface",
+    surfaceText: "text-cyan-surface-text",
+    text: "text-cyan-text",
+    border: "border-cyan-border"
+  },
+  {
+    hue: "sky",
+    fill: "bg-sky-fill",
+    surface: "bg-sky-surface",
+    surfaceText: "text-sky-surface-text",
+    text: "text-sky-text",
+    border: "border-sky-border"
+  },
+  {
+    hue: "blue",
+    fill: "bg-blue-fill",
+    surface: "bg-blue-surface",
+    surfaceText: "text-blue-surface-text",
+    text: "text-blue-text",
+    border: "border-blue-border"
+  },
+  {
+    hue: "indigo",
+    fill: "bg-indigo-fill",
+    surface: "bg-indigo-surface",
+    surfaceText: "text-indigo-surface-text",
+    text: "text-indigo-text",
+    border: "border-indigo-border"
+  },
+  {
+    hue: "violet",
+    fill: "bg-violet-fill",
+    surface: "bg-violet-surface",
+    surfaceText: "text-violet-surface-text",
+    text: "text-violet-text",
+    border: "border-violet-border"
+  },
+  {
+    hue: "purple",
+    fill: "bg-purple-fill",
+    surface: "bg-purple-surface",
+    surfaceText: "text-purple-surface-text",
+    text: "text-purple-text",
+    border: "border-purple-border"
+  },
+  {
+    hue: "fuchsia",
+    fill: "bg-fuchsia-fill",
+    surface: "bg-fuchsia-surface",
+    surfaceText: "text-fuchsia-surface-text",
+    text: "text-fuchsia-text",
+    border: "border-fuchsia-border"
+  },
+  {
+    hue: "pink",
+    fill: "bg-pink-fill",
+    surface: "bg-pink-surface",
+    surfaceText: "text-pink-surface-text",
+    text: "text-pink-text",
+    border: "border-pink-border"
+  },
+  {
+    hue: "rose",
+    fill: "bg-rose-fill",
+    surface: "bg-rose-surface",
+    surfaceText: "text-rose-surface-text",
+    text: "text-rose-text",
+    border: "border-rose-border"
+  }
+];
+var palette = {
+  neutral,
+  hues: styles
+};
+var getStyles = (hue) => {
+  return styles.find((color) => color.hue === hue) || neutral;
+};
+var getHashStyles = (id) => {
+  return getStyles(getHashHue(id));
+};
+var getHashHue = (id) => {
+  return id ? styles[getHash(id) % styles.length].hue : "neutral";
+};
+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: {
+      "font-family": [
+        "font-body",
+        "font-mono"
+      ],
+      "font-weight": [
+        // App weights
+        "font-thin",
+        "font-extralight",
+        "font-light",
+        "font-normal",
+        "font-medium",
+        "font-semibold",
+        "font-bold",
+        "font-extrabold",
+        "font-black",
+        // Arbitrary numbers
+        validators.isArbitraryNumber
+      ],
+      density: [
+        "dx-density-fine",
+        "dx-density-coarse"
+      ],
+      "dx-focus-ring": [
+        "dx-focus-ring",
+        "dx-focus-ring-inset",
+        "dx-focus-ring-always",
+        "dx-focus-ring-inset-always",
+        "dx-focus-ring-group",
+        "dx-focus-ring-group-x",
+        "dx-focus-ring-group-y",
+        "dx-focus-ring-group-always",
+        "dx-focus-ring-group-x-always",
+        "dx-focus-ring-group-y-always",
+        "dx-focus-ring-inset-over-all",
+        "dx-focus-ring-inset-over-all-always",
+        "dx-focus-ring-main",
+        "dx-focus-ring-main-always"
+      ]
+    }
+  }
+});
+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/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 < 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 (SIZE_VALUES.includes(halfSeries)) {
+      return halfSeries;
+    } else if (SIZE_VALUES.includes(wholeSeries)) {
+      return wholeSeries;
+    } else if (SIZE_VALUES.includes(doubleSeries)) {
+      return doubleSeries;
+    } else if (SIZE_VALUES.includes(quadrupleSeries)) {
+      return quadrupleSeries;
+    } else {
+      return defaultSize;
+    }
+  }
+};
+
+// src/util/valence.ts
+var textValence = (valence) => {
+  switch (valence) {
+    case "success":
+      return "font-medium text-success-text";
+    case "info":
+      return "font-medium text-info-text";
+    case "warning":
+      return "font-medium text-warning-text";
+    case "error":
+      return "font-medium text-error-text";
+  }
+};
+var messageValence = (valence) => {
+  switch (valence) {
+    case "success":
+      return "font-medium text-success-text border-success-text bg-success-surface";
+    case "info":
+      return "font-medium text-info-text border-info-text bg-info-surface";
+    case "warning":
+      return "font-medium text-warning-text border-warning-text bg-warning-surface";
+    case "error":
+      return "font-medium text-error-text border-error-text bg-error-surface";
+    default:
+      return "font-medium text-neutral-text border-neutral-text bg-neutral-surface";
+  }
+};
+
+// src/theme/components/avatar.ts
+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("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 && getHeight(size), ...etc);
+var avatarGroupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : "text-description", ...etc);
+var avatarTheme = {
+  root: avatarRoot,
+  label: avatarLabel,
+  description: avatarDescription,
+  statusIcon: avatarStatusIcon,
+  frame: avatarFrame,
+  ring: avatarRing,
+  fallbackText: avatarFallbackText,
+  group: avatarGroup,
+  groupLabel: avatarGroupLabel,
+  groupDescription: avatarGroupDescription
+};
+
+// src/theme/components/breadcrumb.ts
+var breadcrumbRoot = (_props, ...etc) => mx("shrink-0 flex items-center", ...etc);
+var breadcrumbList = (_props, ...etc) => mx("contents", ...etc);
+var breadcrumbListItem = (_props, ...etc) => mx("contents", ...etc);
+var breadcrumbCurrent = (_props, ...etc) => mx(...etc);
+var breadcrumbSeparator = (_props, ...etc) => mx("opacity-50", ...etc);
+var breadcrumbTheme = {
+  root: breadcrumbRoot,
+  list: breadcrumbList,
+  listItem: breadcrumbListItem,
+  current: breadcrumbCurrent,
+  separator: breadcrumbSeparator
+};
+
+// src/theme/components/card.ts
+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 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 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);
+var cardAction = (_props, ...etc) => mx("dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden", ...etc);
+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 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,
+  poster: cardPoster,
+  "poster-icon": cardPosterIcon,
+  action: cardAction,
+  "action-label": cardActionLabel,
+  link: cardLink,
+  "link-label": cardLinkLabel,
+  "icon-block": cardIconBlock
+};
+
+// 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 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 [&_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);
+};
+var buttonTheme = {
+  root: buttonRoot,
+  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 sizeMap2 = {
+  sm: "md:max-w-[24rem]",
+  md: "md:max-w-[32rem]!",
+  lg: "md:max-w-[40rem]!",
+  xl: "md:max-w-[60rem]!"
+};
+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%]", sizeMap2[size], ...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 = {
+  overlay: dialogOverlay,
+  content: dialogContent,
+  header: dialogHeader,
+  body: dialogBody,
+  actionbar: dialogActionBar,
+  title: dialogTitle,
+  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) => {
+  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, square }, ...etc) => {
+  return mx("px-1.5", !iconOnly && "gap-2", square && "aspect-square", ...etc);
+};
+var iconButtonTheme = {
+  root: iconButtonRoot
+};
+
+// src/theme/components/input.ts
+var inputTextLabel = "py-1 text-sm text-description";
+var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator";
+var textInputSurfaceHover = "hover:bg-focus-surface";
+var booleanInputSurface = "shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-surface aria-[checked=mixed]:bg-accent-surface";
+var booleanInputSurfaceHover = "hover:bg-un-accent-hover hover:aria-checked:bg-accent-surface-hover hover:aria-[checked=mixed]:bg-accent-surface-hover";
+var inputValence = (valence) => {
+  switch (valence) {
+    case "success":
+      return "shadow-emerald-500/50 dark:shadow-emerald-600/50";
+    case "info":
+      return "shadow-cyan-500/50 dark:shadow-cyan-600/50";
+    case "warning":
+      return "shadow-amber-500/50 dark:shadow-amber-600/50";
+    case "error":
+      return "shadow-rose-500/50 dark:shadow-rose-600/50";
+  }
+};
+var sharedSubduedInputStyles = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full bg-transparent text-current placeholder-placeholder",
+  "dx-focus-subdued",
+  densityDimensions(props.density),
+  props.disabled && staticDisabled
+];
+var sharedDefaultInputStyles = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
+  textInputSurfaceFocus,
+  densityDimensions(props.density),
+  props.disabled ? staticDisabled : textInputSurfaceHover
+];
+var sharedStaticInputStyles = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
+  textInputSurfaceFocus,
+  textInputSurfaceHover,
+  props.focused && "bg-attention-surface",
+  inputValence(props.validationValence),
+  props.disabled && staticDisabled,
+  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 && "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(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
+var inputSwitch = ({ size = 5, disabled }, ...etc) => mx(
+  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",
+  "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 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);
+var inputValidation = (props, ...etc) => mx(inputTextLabel, props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
+var inputTheme = {
+  input: inputInput,
+  textArea: inputTextArea,
+  inputWithSegments: inputWithSegmentsInput,
+  segment: inputSegment,
+  checkbox: inputCheckbox,
+  checkboxIndicator: inputCheckboxIndicator,
+  label: inputLabel,
+  description: inputDescription,
+  switch: inputSwitch,
+  switchThumb: inputSwitchThumb,
+  validation: inputValidation,
+  descriptionAndValidation: inputDescriptionAndValidation
+};
+
+// 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", "dx-focus-ring", ...etc);
+var linkTheme = {
+  root: linkRoot
+};
+
+// src/theme/components/list.ts
+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 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, "dx-focus-ring", ...etc);
+var listItemOpenTriggerIcon = (_props, ...etc) => {
+  return mx(getSize(5), ...etc);
+};
+var listTheme = {
+  root: listRoot,
+  item: {
+    root: listItem,
+    endcap: listItemEndcap,
+    heading: listItemHeading,
+    dragHandleIcon: listItemDragHandleIcon,
+    openTrigger: listItemOpenTrigger,
+    openTriggerIcon: listItemOpenTriggerIcon
+  }
+};
+
+// src/theme/components/main.ts
+var topbarBlockPaddingStart = "py-(--dx-topbar-size) dx-sticky-top-from-topbar-bottom";
+var bottombarBlockPaddingEnd = "pb-(--dx-statusbar-size) dx-sticky-bottom-from-statusbar-bottom";
+var mainPadding = "dx-main-content-padding";
+var mainPaddingTransitions = "dx-main-content-padding-transitions";
+var mainIntrinsicSize = "dx-main-intrinsic-size";
+var mainContent = ({ bounce }, ...etc) => mx(mainPadding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
+var mainSidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
+var mainOverlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
+var mainTheme = {
+  content: mainContent,
+  sidebar: mainSidebar,
+  overlay: mainOverlay
+};
+
+// src/theme/components/menu.ts
+var menuContent = ({ elevation }, ...etc) => mx("dx-modal-surface w-48 rounded-sm md:w-56 border border-separator", surfaceZIndex({
+  elevation,
+  level: "menu"
+}), surfaceShadow({
+  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", "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);
+var menuTheme = {
+  content: menuContent,
+  viewport: menuViewport,
+  item: menuItem,
+  separator: menuSeparator,
+  groupLabel: menuGroupLabel,
+  arrow: menuArrow
+};
+
+// src/theme/components/message.ts
+var messageRoot = ({ valence }, etc) => {
+  return mx("grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm", messageValence(valence), etc);
+};
+var messageHeader = (_, etc) => {
+  return mx("col-span-full grid grid-cols-subgrid items-center", etc);
+};
+var messageTitle = (_, etc) => {
+  return mx("col-start-2 truncate", etc);
+};
+var messageIcon = (_, etc) => {
+  return mx("col-start-1 grid place-items-center", etc);
+};
+var messageContent = (_, etc) => {
+  return mx("col-start-2 grid grid-cols-subgrid first:font-medium", etc);
+};
+var messageTheme = {
+  root: messageRoot,
+  header: messageHeader,
+  icon: messageIcon,
+  title: messageTitle,
+  content: messageContent
+};
+
+// src/theme/components/popover.ts
+var popoverContent = ({ elevation }, ...etc) => mx("dx-modal-surface border border-separator rounded-sm", surfaceShadow({
+  elevation: "positioned"
+}), surfaceZIndex({
+  elevation,
+  level: "menu"
+}), "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,
+  viewport: popoverViewport,
+  arrow: popoverArrow
+};
+
+// src/theme/components/scroll-area.ts
+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, 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
+};
+
+// src/theme/components/select.ts
+var selectContent = ({ elevation }, ...etc) => {
+  return mx("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow({
+    elevation: "positioned"
+  }), surfaceZIndex({
+    elevation,
+    level: "menu"
+  }), ...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", "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);
+var selectScrollButton = (_props, ...etc) => mx("dx-modal-surface flex items-center justify-center cursor-default h-6 w-full", ...etc);
+var selectTheme = {
+  content: selectContent,
+  viewport: selectViewport,
+  item: selectItem,
+  itemIndicator: selectItemIndicator,
+  arrow: selectArrow,
+  separator: selectSeparator,
+  scrollButton: selectScrollButton
+};
+
+// src/theme/components/splitter.ts
+var splitterRoot = (_props, ...etc) => mx("relative h-full overflow-hidden", ...etc);
+var splitterPanel = (_props, ...etc) => mx("absolute inset-x-0 flex flex-col overflow-hidden", ...etc);
+var splitterTheme = {
+  root: splitterRoot,
+  panel: splitterPanel
+};
+
+// src/theme/components/separator.ts
+var separatorRoot = ({ orientation, subdued }, ...etc) => mx("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
+var separatorTheme = {
+  root: separatorRoot
+};
+
+// src/theme/components/skeleton.ts
+var skeletonRoot = ({ variant = "default" }, ...etc) => mx("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
+var skeletonTheme = {
+  root: skeletonRoot
+};
+
+// src/theme/components/status.ts
+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
+};
+
+// src/theme/components/tag.ts
+var tagRoot = (_, ...etc) => mx("dx-tag", ...etc);
+var tagTheme = {
+  root: tagRoot
+};
+
+// src/theme/components/toast.ts
+var toastViewport = (_props, ...etc) => mx(
+  // TODO(burdon): block-end should take into account status bar.
+  "z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] w-auto md:end-[calc(env(safe-area-inset-right)+1rem)] md:left-auto md:w-full md:max-w-sm",
+  "rounded-md flex flex-col gap-2",
+  ...etc
+);
+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]", "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);
+var toastDescription = ({ srOnly }, ...etc) => mx("text-description", "shrink-0", srOnly && "sr-only", ...etc);
+var toastTheme = {
+  viewport: toastViewport,
+  root: toastRoot,
+  body: toastBody,
+  title: toastTitle,
+  description: toastDescription,
+  actions: toastActions
+};
+
+// src/theme/components/toolbar.ts
+var toolbarLayout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
+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 toolbarText = (_, ...etc) => {
+  return mx("px-2 grow truncate items-center", ...etc);
+};
+var toolbarTheme = {
+  root: toolbarRoot,
+  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({
+  elevation: "positioned"
+}), surfaceZIndex({
+  elevation,
+  level: "tooltip"
+}), ...etc);
+var tooltipArrow = (_props, ...etc) => mx("fill-inverse-surface", ...etc);
+var tooltipTheme = {
+  content: tooltipContent,
+  arrow: tooltipArrow
+};
+
+// src/theme/components/treegrid.ts
+var levelStyles = /* @__PURE__ */ new Map([
+  [
+    1,
+    "[&>.indent:first-of-type]:pl-0 font-medium"
+  ],
+  [
+    2,
+    "[&>.indent:first-of-type]:pl-0"
+  ],
+  [
+    3,
+    "[&>.indent:first-of-type]:pl-1"
+  ],
+  [
+    4,
+    "[&>.indent:first-of-type]:pl-2"
+  ],
+  [
+    5,
+    "[&>.indent:first-of-type]:pl-3"
+  ],
+  [
+    6,
+    "[&>.indent:first-of-type]:pl-4"
+  ],
+  [
+    7,
+    "[&>.indent:first-of-type]:pl-5"
+  ],
+  [
+    8,
+    "[&>.indent:first-of-type]:pl-6"
+  ]
+]);
+var treegridRoot = (_, ...etc) => mx("grid", ...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,
+  row: treegridRow,
+  cell: treegridCell
+};
+
+// 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
+  "dx-container grid grid-cols-[100%] overflow-hidden",
+  // Add uncategorized children to content slot.
+  "[&>*:not([data-slot])]:[grid-area:content]",
+  ...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,
+  content: panelContent,
+  statusbar: panelStatusbar
+};
+
+// src/theme/theme.ts
+import { getDeep } from "@dxos/util";
+var defaultTheme = {
+  themeName: () => "default",
+  //
+  // Primitives
+  //
+  column: columnTheme,
+  panel: panelTheme,
+  //
+  // Components
+  //
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  card: cardTheme,
+  dialog: dialogTheme,
+  focus: focusTheme,
+  icon: iconTheme,
+  iconButton: iconButtonTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  menu: menuTheme,
+  popover: popoverTheme,
+  scrollArea: scrollAreaTheme,
+  select: selectTheme,
+  separator: separatorTheme,
+  skeleton: skeletonTheme,
+  splitter: splitterTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme
+};
+var bindTheme = (theme) => {
+  return (path, styleProps, ...etc) => {
+    const result = getDeep(theme, path.split("."));
+    return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
+  };
+};
+var defaultTx = bindTheme(defaultTheme);
+export {
+  avatarDescription,
+  avatarFallbackText,
+  avatarFrame,
+  avatarGroup,
+  avatarGroupDescription,
+  avatarGroupLabel,
+  avatarLabel,
+  avatarRing,
+  avatarRoot,
+  avatarStatusIcon,
+  avatarTheme,
+  bindTheme,
+  bottombarBlockPaddingEnd,
+  breadcrumbCurrent,
+  breadcrumbList,
+  breadcrumbListItem,
+  breadcrumbRoot,
+  breadcrumbSeparator,
+  breadcrumbTheme,
+  buttonTheme,
+  cardDefaultInlineSize,
+  cardMaxBlockSize,
+  cardMaxInlineSize,
+  cardMinBlockSize,
+  cardMinInlineSize,
+  cardTheme,
+  columnTheme,
+  composable,
+  composableProps,
+  dataDisabled,
+  defaultButtonColors,
+  defaultTheme,
+  defaultTx,
+  densityBlockSize,
+  densityDimensions,
+  descriptionMessage,
+  dialogActionBar,
+  dialogBody,
+  dialogContent,
+  dialogDescription,
+  dialogHeader,
+  dialogOverlay,
+  dialogTheme,
+  dialogTitle,
+  focusTheme,
+  getHashHue,
+  getHashStyles,
+  getHeight,
+  getSize,
+  getStyles,
+  getWidth,
+  ghostButtonColors,
+  ghostFocusWithin,
+  ghostHover,
+  groupHoverControlItemWithTransition,
+  hoverableControlItem,
+  hoverableControls,
+  hoverableFocusedKeyboardControls,
+  hoverableFocusedWithinControls,
+  hoverableOpenControlItem,
+  hueShades,
+  hues,
+  iconButtonRoot,
+  iconButtonTheme,
+  iconRoot,
+  iconSize,
+  iconTheme,
+  inputTextLabel,
+  inputTheme,
+  linkRoot,
+  linkTheme,
+  listItem,
+  listItemDragHandleIcon,
+  listItemEndcap,
+  listItemHeading,
+  listItemOpenTrigger,
+  listItemOpenTriggerIcon,
+  listRoot,
+  listTheme,
+  mainContent,
+  mainIntrinsicSize,
+  mainOverlay,
+  mainPadding,
+  mainPaddingTransitions,
+  mainSidebar,
+  mainTheme,
+  menuArrow,
+  menuContent,
+  menuGroupLabel,
+  menuItem,
+  menuSeparator,
+  menuTheme,
+  menuViewport,
+  messageContent,
+  messageHeader,
+  messageIcon,
+  messageRoot,
+  messageTheme,
+  messageTitle,
+  messageValence,
+  mx,
+  osTranslations,
+  palette,
+  panelTheme,
+  popoverArrow,
+  popoverContent,
+  popoverTheme,
+  popoverViewport,
+  primaryButtonColors,
+  roles,
+  scrollAreaRoot,
+  scrollAreaTheme,
+  scrollAreaViewport,
+  scrollbar,
+  selectArrow,
+  selectContent,
+  selectItem,
+  selectItemIndicator,
+  selectScrollButton,
+  selectSeparator,
+  selectTheme,
+  selectViewport,
+  separatorRoot,
+  separatorTheme,
+  sizeToRem,
+  sizeValue,
+  skeletonRoot,
+  skeletonTheme,
+  slottable,
+  snapSize,
+  splitterTheme,
+  staticDefaultButtonColors,
+  staticDisabled,
+  statusBar,
+  statusRoot,
+  statusTheme,
+  subtleHover,
+  surfaceShadow,
+  surfaceZIndex,
+  tagRoot,
+  tagTheme,
+  textValence,
+  toastActions,
+  toastBody,
+  toastDescription,
+  toastRoot,
+  toastTheme,
+  toastTitle,
+  toastViewport,
+  toolbarLayout,
+  toolbarRoot,
+  toolbarText,
+  toolbarTheme,
+  tooltipArrow,
+  tooltipContent,
+  tooltipTheme,
+  topbarBlockPaddingStart,
+  treegridCell,
+  treegridRoot,
+  treegridRow,
+  treegridTheme,
+  withColumn
+};
+//# sourceMappingURL=index.mjs.map