@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/dist/lib/browser/index.mjs

@@ -1,1636 +1,79 @@
-// src/config/tailwind.ts
-import tailwindcssContainerQueries from "@tailwindcss/container-queries";
-import tailwindcssForms from "@tailwindcss/forms";
-import merge from "lodash.merge";
-import tailwindScrollbar from "tailwind-scrollbar";
-import defaultConfig from "tailwindcss/stubs/config.full.js";
-import tailwindcssLogical from "tailwindcss-logical";
-import tailwindcssRadix from "tailwindcss-radix";
-
-// src/config/tokens/index.ts
-import adapter from "@ch-ui/tailwind-tokens";
-
-// src/config/tokens/physical-colors.ts
-var reflectiveRelation = {
-  initial: 1e3,
-  slope: -1e3,
-  method: "floor"
-};
-var gamuts = [
-  "srgb",
-  "p3",
-  "rec2020"
+// 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 DEG_RAD = Math.PI / 180;
-var hueKeyPoint = (hue) => {
-  const hueDeg = (360 * (hue / 17) + 26) % 360;
-  return {
-    keyPoint: [
-      0.5,
-      0.13 + 0.024 * Math.sin((hueDeg - 15) * DEG_RAD),
-      hueDeg
-    ],
-    lowerCp: 1,
-    upperCp: 1,
-    torsion: 0
-  };
-};
-var huePalettes = {
-  red: hueKeyPoint(0),
-  orange: hueKeyPoint(1),
-  amber: hueKeyPoint(2),
-  yellow: hueKeyPoint(3),
-  lime: hueKeyPoint(4),
-  green: hueKeyPoint(5),
-  emerald: hueKeyPoint(6),
-  teal: hueKeyPoint(7),
-  cyan: hueKeyPoint(8),
-  sky: hueKeyPoint(9),
-  blue: hueKeyPoint(10),
-  indigo: hueKeyPoint(11),
-  violet: hueKeyPoint(12),
-  purple: hueKeyPoint(13),
-  fuchsia: hueKeyPoint(14),
-  pink: hueKeyPoint(15),
-  rose: hueKeyPoint(16)
-};
-var systemPalettes = {
-  neutral: {
-    keyPoint: [
-      0.5,
-      1e-3,
-      260
-    ],
-    lowerCp: 0,
-    upperCp: 0,
-    torsion: 0,
-    // Values used directly.
-    // TODO(burdon): Audit.
-    values: [
-      25,
-      50,
-      75,
-      100,
-      150,
-      200,
-      250,
-      300,
-      400,
-      500,
-      600,
-      700,
-      750,
-      800,
-      850,
-      900
-    ]
-  },
-  // https://oklch.com/#0.5,0.2,260,100 (#0559d2)
-  primary: {
-    keyPoint: [
-      0.5,
-      0.2,
-      260
-    ],
-    lowerCp: 0.86,
-    upperCp: 1,
-    torsion: -30,
-    // Values used directly.
-    // TODO(burdon): Audit.
-    values: [
-      100,
-      150,
-      200,
-      350,
-      400,
-      450,
-      500,
-      750,
-      800,
-      850
-    ]
-  }
-};
-var physicalSeries = {
-  ...huePalettes,
-  ...systemPalettes
-};
-var physicalColors = {
-  namespace: "dx-",
-  definitions: {
-    // @ts-ignore
-    series: physicalSeries,
-    accompanyingSeries: {
-      reflectiveRelation
-    }
-  },
-  conditions: {
-    srgb: [
-      ":root, .dark"
-    ],
-    p3: [
-      "@media (color-gamut: p3)",
-      ":root, .dark"
-    ],
-    rec2020: [
-      "@media (color-gamut: rec2020)",
-      ":root, .dark"
-    ]
-  },
-  series: Object.entries(physicalSeries).reduce((acc, [id]) => {
-    acc[id] = gamuts.reduce((acc2, gamut) => {
-      acc2[gamut] = {
-        extends: id,
-        physicalValueRelation: {
-          extends: "reflectiveRelation"
-        }
-      };
-      return acc2;
-    }, {});
-    return acc;
-  }, {})
-};
-
-// src/config/tokens/sememes-hue.ts
-var hueSememes = [
-  ...Object.keys(huePalettes),
-  "neutral",
-  "primary"
-].reduce((acc, palette) => {
-  acc[`${palette}Cursor`] = {
-    light: [
-      palette,
-      400
-    ],
-    dark: [
-      palette,
-      300
-    ]
-  };
-  acc[`${palette}Text`] = {
-    light: [
-      palette,
-      550
-    ],
-    dark: [
-      palette,
-      300
-    ]
-  };
-  acc[`${palette}Fill`] = {
-    light: [
-      palette,
-      500
-    ],
-    dark: [
-      palette,
-      500
-    ]
-  };
-  acc[`${palette}Surface`] = {
-    light: [
-      palette,
-      200
-    ],
-    dark: [
-      palette,
-      700
-    ]
-  };
-  acc[`${palette}SurfaceText`] = {
-    light: [
-      palette,
-      700
-    ],
-    dark: [
-      palette,
-      200
-    ]
-  };
-  acc[`${palette}Screen`] = {
-    light: [
-      palette,
-      100
-    ],
-    dark: [
-      palette,
-      800
-    ]
-  };
-  return acc;
-}, {});
-var valenceAliasSememeStems = [
-  "Text",
-  "Surface",
-  "SurfaceText",
-  "Fill",
-  "Cursor"
-];
-var valenceMapping = {
-  emerald: [
-    "success"
-  ],
-  cyan: [
-    "info"
-  ],
-  amber: [
-    "warning"
-  ],
-  rose: [
-    "error"
-  ],
-  primary: [
-    "current"
-  ],
-  fuchsia: [
-    "internal"
-  ]
-};
-var valenceAliases = valenceAliasSememeStems.reduce((acc, stem) => {
-  return Object.entries(valenceMapping).reduce((acc2, [hue, valences]) => {
-    acc2[`${hue}${stem}`] = {
-      root: valences.map((valence) => `${valence}${stem}`)
-    };
-    return acc2;
-  }, acc);
-}, {});
-
-// src/config/tokens/sememes-sheet.ts
-var sheetSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  axisSurface: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      800
-    ]
-  },
-  axisText: {
-    light: [
-      "neutral",
-      800
-    ],
-    dark: [
-      "neutral",
-      200
-    ]
-  },
-  axisSelectedSurface: {
-    light: [
-      "neutral",
-      100
-    ],
-    dark: [
-      "neutral",
-      900
-    ]
-  },
-  axisSelectedText: {
-    light: [
-      "neutral",
-      100
-    ],
-    dark: [
-      "neutral",
-      900
-    ]
-  },
-  gridCell: {
-    // TODO(thure): Why override only dark?
-    light: [
-      "neutral",
-      "50/0"
-    ],
-    dark: [
-      "neutral",
-      850
-    ]
-  },
-  gridCellSelected: {
-    // TODO(thure): Can this not just use `attention`?
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      800
-    ]
-  },
-  gridOverlay: {
-    light: [
-      "primary",
-      "500/.5"
-    ],
-    dark: [
-      "primary",
-      "500/.5"
-    ]
-  },
-  gridSelectionOverlay: {
-    light: [
-      "primary",
-      "500/.2"
-    ],
-    dark: [
-      "primary",
-      "500/.2"
-    ]
-  },
-  gridHighlight: {
-    light: [
-      "emerald",
-      "500/.5"
-    ],
-    dark: [
-      "emerald",
-      "500/.5"
-    ]
-  },
-  // TODO(burdon): Factor out def (in common with editor).
-  gridCommented: {
-    light: [
-      "green",
-      200
-    ],
-    dark: [
-      "green",
-      600
-    ]
-  },
-  gridCommentedActive: {
-    light: [
-      "green",
-      "200/.5"
-    ],
-    dark: [
-      "green",
-      "600/.5"
-    ]
-  }
-};
-var sheetAliases = {
-  activeSurface: {
-    root: [
-      "gridLine"
-    ]
-  },
-  accentFocusIndicator: {
-    root: [
-      "gridFocusIndicatorColor"
-    ]
-  },
-  neutralFocusIndicator: {
-    gridFocusStack: [
-      "gridFocusIndicatorColor"
-    ]
-  }
-};
-
-// src/config/tokens/sememes-system.ts
-var getMapValue = (map, key, defaultValue) => {
-  let value = map[key];
-  if (!value) {
-    value = defaultValue();
-    map[key] = value;
-  }
-  return value;
-};
-var applyAlpha = (sememe, alpha) => {
-  if (alpha >= 1) {
-    return sememe;
-  } else {
-    return {
-      light: [
-        sememe.light[0],
-        `${sememe.light[1]}/${alpha}`
-      ],
-      dark: [
-        sememe.dark[0],
-        `${sememe.dark[1]}/${alpha}`
-      ]
-    };
-  }
-};
-var DARK_ELEVATION_MIN = 855;
-var DARK_ELEVATION_MAX = 731;
-var DARK_CONTRAST_MIN = 750;
-var DARK_CONTRAST_MAX = 665;
-var LIGHT_ELEVATION_MIN = 0;
-var LIGHT_ELEVATION_MAX = 0;
-var LIGHT_CONTRAST_MIN = 82;
-var LIGHT_CONTRAST_MAX = 24;
-var ELEVATION_SCALE = 2;
-var CONTRAST_SCALE = 3;
-var darkElevationCadence = (depth) => Math.round(DARK_ELEVATION_MAX + (DARK_ELEVATION_MIN - DARK_ELEVATION_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE));
-var darkContrastCadence = (depth) => Math.round(DARK_CONTRAST_MAX + (DARK_CONTRAST_MIN - DARK_CONTRAST_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE));
-var lightElevationCadence = (depth) => Math.round(LIGHT_ELEVATION_MIN + (LIGHT_ELEVATION_MAX - LIGHT_ELEVATION_MIN) * ((CONTRAST_SCALE - depth) / CONTRAST_SCALE));
-var lightContrastCadence = (depth) => Math.round(LIGHT_CONTRAST_MAX + (LIGHT_CONTRAST_MIN - LIGHT_CONTRAST_MAX) * (depth / CONTRAST_SCALE));
-var elevationCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAlpha({
-  light: [
-    "neutral",
-    lightElevationCadence(lightDepth)
-  ],
-  dark: [
-    "neutral",
-    darkElevationCadence(darkDepth)
-  ]
-}, alpha);
-var contrastCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAlpha({
-  light: [
-    "neutral",
-    lightContrastCadence(lightDepth)
-  ],
-  dark: [
-    "neutral",
-    darkContrastCadence(darkDepth)
-  ]
-}, alpha);
-var systemSememes = {
-  //
-  // Elevation cadence tokens
-  //
-  baseSurface: elevationCadence(0),
-  groupSurface: elevationCadence(1),
-  modalSurface: elevationCadence(2, 1.7),
-  //
-  // Contrast cadence tokens
-  //
-  textInputSurfaceBase: contrastCadence(0, 0),
-  textInputSurfaceGroup: contrastCadence(0, 0.5),
-  textInputSurfaceModal: contrastCadence(0, 1),
-  inputSurfaceBase: contrastCadence(0.8, 0.33),
-  inputSurfaceGroup: contrastCadence(0.8, 0.66),
-  inputSurfaceModal: contrastCadence(0.8, 1),
-  hoverSurfaceBase: contrastCadence(2, 1.5),
-  hoverSurfaceGroup: contrastCadence(2, 2),
-  hoverSurfaceModal: contrastCadence(2, 2.5),
-  separatorBase: contrastCadence(3, 2),
-  separatorGroup: contrastCadence(3, 2.5),
-  separatorModal: contrastCadence(3, 3),
-  subduedSeparator: contrastCadence(3, 1),
-  unAccent: {
-    light: [
-      "neutral",
-      400
-    ],
-    dark: [
-      "neutral",
-      400
-    ]
-  },
-  unAccentHover: {
-    light: [
-      "neutral",
-      450
-    ],
-    dark: [
-      "neutral",
-      450
-    ]
-  },
-  hoverOverlay: {
-    light: [
-      "neutral",
-      "450/.1"
-    ],
-    dark: [
-      "neutral",
-      "450/.1"
-    ]
-  },
-  //
-  // Special surfaces.
-  //
-  // Screen overlay for modal dialogs.
-  scrimSurface: applyAlpha({
-    light: [
-      "neutral",
-      LIGHT_CONTRAST_MAX
-    ],
-    dark: [
-      "neutral",
-      DARK_ELEVATION_MIN
-    ]
-  }, 0.65),
-  // High contrast for focused interactive elements. (Technically this is part of the surface cadence, but the contrast cadence is on the opposite side of the elevation cadence as this point.)
-  focusSurface: {
-    light: [
-      "neutral",
-      0
-    ],
-    dark: [
-      "neutral",
-      1e3
-    ]
-  },
-  deckSurface: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      950
-    ]
-  },
-  // For tooltips only; the highest elevation from the opposite theme
-  inverseSurface: {
-    light: [
-      "neutral",
-      DARK_ELEVATION_MIN
-    ],
-    dark: [
-      "neutral",
-      LIGHT_ELEVATION_MIN
-    ]
-  },
-  //
-  // Accent surfaces
-  //
-  accentSurfaceRelated: {
-    light: [
-      "primary",
-      "300/.1"
-    ],
-    dark: [
-      "primary",
-      "400/.1"
-    ]
-  },
-  accentSurfaceHover: {
-    light: [
-      "primary",
-      600
-    ],
-    dark: [
-      "primary",
-      475
-    ]
-  },
-  accentSurface: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      500
-    ]
-  },
-  //
-  // Text (text-) and other foregrounds
-  // TODO(thure): Establish contrast-order cadence for text.
-  //
-  baseText: {
-    light: [
-      "neutral",
-      1e3
-    ],
-    dark: [
-      "neutral",
-      50
-    ]
-  },
-  inverseSurfaceText: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      1e3
-    ]
-  },
-  description: {
-    light: [
-      "neutral",
-      550
-    ],
-    dark: [
-      "neutral",
-      350
-    ]
-  },
-  subdued: {
-    light: [
-      "neutral",
-      700
-    ],
-    dark: [
-      "neutral",
-      300
-    ]
-  },
-  placeholder: {
-    light: [
-      "neutral",
-      500
-    ],
-    dark: [
-      "neutral",
-      500
-    ]
-  },
-  accentText: {
-    light: [
-      "primary",
-      550
-    ],
-    dark: [
-      "primary",
-      400
-    ]
-  },
-  accentSurfaceText: {
-    light: [
-      "neutral",
-      0
-    ],
-    dark: [
-      "neutral",
-      0
-    ]
-  },
-  accentTextHover: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      350
-    ]
-  },
-  accentFocusIndicator: {
-    light: [
-      "primary",
-      300
-    ],
-    dark: [
-      "primary",
-      450
-    ]
-  },
-  neutralFocusIndicator: {
-    light: [
-      "neutral",
-      300
-    ],
-    dark: [
-      "neutral",
-      550
-    ]
-  }
-};
-var aliasDefs = {
-  // Selected items, current items, other surfaces needing special contrast against baseSurface.
-  activeSurface: {
-    root: "inputSurfaceBase"
-  },
-  // Main sidebar panel.
-  sidebarSurface: {
-    root: "groupSurface"
-  },
-  // Plank header.
-  headerSurface: {
-    root: "groupSurface"
-  },
-  // Toolbars, table/sheet headers, etc.
-  toolbarSurface: {
-    root: "groupSurface"
-  },
-  // Forms, cards, etc.
-  cardSurface: {
-    root: "groupSurface"
-  },
-  // Secondary aliases.
-  textInputSurface: {
-    root: "textInputSurfaceBase",
-    group: "textInputSurfaceGroup",
-    modal: "textInputSurfaceModal"
-  },
-  inputSurface: {
-    root: "inputSurfaceBase",
-    group: "inputSurfaceGroup",
-    modal: "inputSurfaceModal"
-  },
-  hoverSurface: {
-    root: "hoverSurfaceBase",
-    group: "hoverSurfaceGroup",
-    modal: "hoverSurfaceModal"
-  },
-  // TODO(thure): Rename uses of this token to `focusSurface` and remove this alias.
-  attention: {
-    root: "focusSurface"
-  },
-  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
-  // TODO(burdon): Review tokens.
-  currentRelated: {
-    root: "modalSurface"
-  },
-  // Borders and dividers.
-  separator: {
-    root: "separatorBase",
-    group: "separatorGroup",
-    modal: "separatorModal"
-  }
-};
-var systemAliases = Object.entries(aliasDefs).reduce((aliases, [alias, values]) => {
-  Object.entries(values).forEach(([key, sememe]) => {
-    const record = getMapValue(aliases, sememe, () => ({}));
-    const list = getMapValue(record, key, () => []);
-    list.push(alias);
-  });
-  return aliases;
-}, {});
-
-// src/config/tokens/alias-colors.ts
-var groupAliases = [
-  "groupSurface",
-  ...systemAliases.groupSurface?.root ?? []
+var hueShades = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
 ];
-var modalAliases = [
-  "modalSurface",
-  ...systemAliases.modalSurface?.root ?? []
+var roles = [
+  "fill",
+  "surface",
+  "surface-text",
+  "text",
+  "border"
 ];
-var aliasColors = {
-  conditions: {
-    root: [
-      ":root, .dark"
-    ],
-    group: [
-      [
-        ".sidebar-surface, .dark .sidebar-surface",
-        ...groupAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`)
-      ].join(", ")
-    ],
-    modal: [
-      [
-        ".modal-surface, .dark .modal-surface",
-        ...modalAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`)
-      ].join(", ")
-    ],
-    gridFocusStack: [
-      '[data-grid-focus-indicator-variant="stack"]'
-    ]
-  },
-  aliases: {
-    // TODO(thure): Aliases should be merged more elegantly, this causes overwrites.
-    ...sheetAliases,
-    ...systemAliases,
-    ...valenceAliases
-  },
-  namespace: "dx-"
-};
-
-// src/config/tokens/sizes.ts
 var cardMinInlineSize = 18;
 var cardDefaultInlineSize = 20;
 var cardMaxInlineSize = 22;
+var cardMinBlockSize = 18;
+var cardMaxBlockSize = 30;
 
-// src/config/tokens/lengths.ts
-var lengthsFacet = {
-  physical: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    series: {
-      line: {
-        root: {
-          unit: "px",
-          initial: 0,
-          slope: 1
-        }
-      },
-      // "gap"
-      lacuna: {
-        root: {
-          unit: "rem",
-          initial: 0,
-          slope: 0.125
-        }
-      }
-    }
-  },
-  semantic: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    sememes: {
-      noLine: {
-        root: [
-          "line",
-          0
-        ]
-      },
-      hairLine: {
-        root: [
-          "line",
-          1
-        ]
-      },
-      thickLine: {
-        root: [
-          "line",
-          2
-        ]
-      },
-      trimXs: {
-        root: [
-          "lacuna",
-          3
-        ]
-      },
-      trimSm: {
-        root: [
-          "lacuna",
-          4
-        ]
-      },
-      trimMd: {
-        root: [
-          "lacuna",
-          6
-        ]
-      },
-      trimLg: {
-        root: [
-          "lacuna",
-          12
-        ]
-      },
-      inputFine: {
-        root: [
-          "lacuna",
-          3
-        ]
-      },
-      inputCoarse: {
-        root: [
-          "lacuna",
-          4
-        ]
-      }
-    }
-  },
-  alias: {
-    namespace: "dx-",
-    conditions: {
-      fine: [
-        ":root, .density-fine"
-      ],
-      coarse: [
-        ".density-coarse"
-      ],
-      flush: [
-        ".density-flush"
-      ],
-      gridFocusStack: [
-        '[data-grid-focus-indicator-variant="stack"]'
-      ]
-    },
-    aliases: {
-      noLine: {
-        fine: [
-          "focusOffset"
-        ]
-      },
-      hairLine: {
-        fine: [
-          "modalLine",
-          "landmarkLine",
-          "positionedLine",
-          "gridGap",
-          "gridFocusIndicatorWidth"
-        ]
-      },
-      thickLine: {
-        fine: [
-          "focusLine"
-        ],
-        gridFocusStack: [
-          "gridFocusIndicatorWidth"
-        ]
-      },
-      trimXs: {
-        fine: [
-          "cardSpacingChrome",
-          "labelSpacingBlock",
-          "inputSpacingBlock"
-        ]
-      },
-      trimSm: {
-        fine: [
-          "cardSpacingInline",
-          "cardSpacingBlock",
-          "cardSpacingGap"
-        ]
-      },
-      trimMd: {
-        coarse: [
-          "cardSpacingInline",
-          "cardSpacingBlock",
-          "cardSpacingGap"
-        ]
-      },
-      inputFine: {
-        fine: [
-          "iconButtonPadding"
-        ]
-      },
-      inputCoarse: {
-        coarse: [
-          "iconButtonPadding"
-        ]
-      }
-    }
-  }
-};
-var maxSizesFacet = {
-  physical: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    series: {
-      size: {
-        root: {
-          unit: "rem",
-          initial: 0,
-          slope: 1
-        }
-      }
-    }
-  },
-  semantic: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    sememes: {
-      "prose-max-width": {
-        root: [
-          "size",
-          50
-        ]
-      },
-      "container-max-width": {
-        root: [
-          "size",
-          50
-        ]
-      },
-      "popover-max-width": {
-        root: [
-          "size",
-          cardDefaultInlineSize
-        ]
-      },
-      "card-default-width": {
-        root: [
-          "size",
-          cardDefaultInlineSize
-        ]
-      },
-      "card-min-width": {
-        root: [
-          "size",
-          cardMinInlineSize
-        ]
-      },
-      "card-max-width": {
-        root: [
-          "size",
-          cardMaxInlineSize
-        ]
-      }
-    }
-  }
-};
-
-// src/config/tokens/sememes-calls.ts
-var callsSememes = {
-  callActive: {
-    light: [
-      "green",
-      "500"
-    ],
-    dark: [
-      "green",
-      "500"
-    ]
-  },
-  callAlert: {
-    light: [
-      "rose",
-      "500"
-    ],
-    dark: [
-      "rose",
-      "500"
-    ]
-  }
-};
-
-// src/config/tokens/sememes-codemirror.ts
-var codemirrorSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  cmCodeblock: {
-    light: [
-      "neutral",
-      "500/.1"
-    ],
-    dark: [
-      "neutral",
-      "500/.1"
-    ]
-  },
-  cmActiveLine: {
-    light: [
-      "neutral",
-      "200/.5"
-    ],
-    dark: [
-      "neutral",
-      "800/.5"
-    ]
-  },
-  cmSeparator: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      500
-    ]
-  },
-  cmCursor: {
-    light: [
-      "neutral",
-      900
-    ],
-    dark: [
-      "neutral",
-      100
-    ]
-  },
-  cmSelection: {
-    light: [
-      "primary",
-      "400/.5"
-    ],
-    dark: [
-      "primary",
-      "600/.5"
-    ]
-  },
-  cmFocusedSelection: {
-    light: [
-      "primary",
-      400
-    ],
-    dark: [
-      "primary",
-      600
-    ]
-  },
-  cmHighlight: {
-    light: [
-      "neutral",
-      950
-    ],
-    dark: [
-      "neutral",
-      50
-    ]
-  },
-  cmHighlightSurface: {
-    light: [
-      "sky",
-      200
-    ],
-    dark: [
-      "cyan",
-      600
-    ]
-  },
-  // TODO(burdon): Factor out defs in common with sheet.
-  cmCommentText: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      950
-    ]
-  },
-  cmCommentSurface: {
-    light: [
-      "amber",
-      700
-    ],
-    dark: [
-      "amber",
-      200
-    ]
-  }
-};
-
-// src/config/tokens/semantic-colors.ts
-var semanticColors = {
-  conditions: {
-    light: [
-      ":root"
-    ],
-    dark: [
-      ".dark"
-    ]
-  },
-  sememes: {
-    // Define each set of sememes in its own file.
-    ...callsSememes,
-    ...codemirrorSememes,
-    ...hueSememes,
-    ...sheetSememes,
-    ...systemSememes
-  },
-  namespace: "dx-"
-};
-
-// src/config/tokens/index.ts
-var hues = Object.keys(huePalettes);
-var tokenSet = {
-  colors: {
-    physical: physicalColors,
-    semantic: semanticColors,
-    alias: aliasColors
-  },
-  lengths: lengthsFacet,
-  maxSizes: maxSizesFacet
-};
-var adapterConfig = {
-  colors: {
-    facet: "colors",
-    disposition: "overwrite",
-    tokenization: "recursive"
-  },
-  borderWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  ringWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  ringOffsetWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  outlineWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  spacing: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "keep-series"
-  }
-};
-var userDefaultTokenSet = {
-  colors: {
-    physical: {
-      definitions: {
-        series: {
-          neutral: physicalColors.definitions.series.neutral,
-          primary: physicalColors.definitions.series.primary
-        },
-        accompanyingSeries: physicalColors.definitions.accompanyingSeries
-      },
-      conditions: physicalColors.conditions,
-      series: {
-        neutral: physicalColors.series.neutral,
-        primary: physicalColors.series.primary
-      },
-      namespace: physicalColors.namespace
-    },
-    semantic: {
-      conditions: semanticColors.conditions,
-      sememes: systemSememes,
-      namespace: semanticColors.namespace
-    },
-    alias: {
-      conditions: aliasColors.conditions,
-      aliases: systemAliases,
-      namespace: aliasColors.namespace
-    }
-  }
-};
-var tokensTailwindConfig = adapter(tokenSet, adapterConfig);
-
-// src/config/tailwind.ts
-var { extend: extendTokens, ...overrideTokens } = tokensTailwindConfig;
-var tailwindConfig = ({ env = "production", content = [], extensions = [] }) => ({
-  darkMode: "class",
-  theme: {
-    // Configure fonts in theme.css and package.json.
-    fontFamily: {
-      body: [
-        "Inter Variable",
-        ...defaultConfig.theme.fontFamily.sans
-      ],
-      mono: [
-        "JetBrains Mono Variable",
-        ...defaultConfig.theme.fontFamily.mono
-      ]
-    },
-    extend: merge({
-      // Generates is-card-default-width, is-card-min-width, etc.
-      spacing: {
-        "card-default-width": "var(--dx-card-default-width)",
-        "card-min-width": "var(--dx-card-min-width)",
-        "card-max-width": "var(--dx-card-max-width)",
-        "container-max-width": "var(--dx-container-max-width)",
-        "popover-max-width": "var(--dx-popover-max-width)",
-        "prose-max-width": "var(--dx-prose-max-width)"
-      },
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))"
-      },
-      borderRadius: {
-        none: "0",
-        sm: "0.25rem",
-        DEFAULT: "0.5rem",
-        md: "0.75rem",
-        lg: "1rem"
-      },
-      screens: {
-        "pointer-fine": {
-          raw: "(pointer: fine)"
-        },
-        "hover-hover": {
-          raw: "(hover: hover)"
-        },
-        "md": "768px",
-        "lg": "1024px"
-      },
-      fontSize: {
-        // Base size 16px
-        // Scale 1.125
-        "xs": [
-          "0.790rem",
-          {
-            lineHeight: "1rem"
-          }
-        ],
-        "sm": [
-          "0.889rem",
-          {
-            lineHeight: "1.25rem"
-          }
-        ],
-        "base": [
-          "1rem",
-          {
-            lineHeight: "1.5rem"
-          }
-        ],
-        "lg": [
-          "1.125rem",
-          {
-            lineHeight: "1.75rem"
-          }
-        ],
-        "xl": [
-          "1.266rem",
-          {
-            lineHeight: "1.75rem"
-          }
-        ],
-        "2xl": [
-          "1.424rem",
-          {
-            lineHeight: "2rem"
-          }
-        ],
-        "3xl": [
-          "1.602rem",
-          {
-            lineHeight: "2.25rem"
-          }
-        ],
-        "4xl": [
-          "1.802rem",
-          {
-            lineHeight: "2.5rem"
-          }
-        ],
-        "5xl": [
-          "2.027rem",
-          {
-            lineHeight: "2.5rem"
-          }
-        ],
-        "6xl": [
-          "2.281rem",
-          {
-            lineHeight: "2.5rem"
-          }
-        ],
-        "7xl": [
-          "2.566rem",
-          {
-            lineHeight: "2.75rem"
-          }
-        ],
-        "8xl": [
-          "2.887rem",
-          {
-            lineHeight: "3rem"
-          }
-        ],
-        "9xl": [
-          "3.247rem",
-          {
-            lineHeight: "3.25rem"
-          }
-        ]
-      },
-      boxShadow: {
-        "slider": "0 0 0 5px rgba(0, 0, 0, 0.3)"
-      },
-      transitionProperty: {
-        "max-height": "max-height"
-      },
-      transitionTimingFunction: {
-        "in-out-symmetric": "cubic-bezier(0.5, 0, 0.5, 1)"
-      },
-      keyframes: {
-        // Fade
-        "fade-in": {
-          from: {
-            opacity: 0
-          },
-          to: {
-            opacity: 1
-          }
-        },
-        "fade-out": {
-          from: {
-            opacity: 1
-          },
-          to: {
-            opacity: 0
-          }
-        },
-        // Popper chrome
-        "slide-down-and-fade": {
-          from: {
-            opacity: 1,
-            transform: "translateY(0)"
-          },
-          to: {
-            opacity: 0,
-            transform: "translateY(16px)"
-          }
-        },
-        "slide-left-and-fade": {
-          from: {
-            opacity: 0,
-            transform: "translateX(-16px)"
-          },
-          to: {
-            opacity: 1,
-            transform: "translateX(0)"
-          }
-        },
-        "slide-up-and-fade": {
-          from: {
-            opacity: 0,
-            transform: "translateY(16px)"
-          },
-          to: {
-            opacity: 1,
-            transform: "translateY(0)"
-          }
-        },
-        "slide-right-and-fade": {
-          from: {
-            opacity: 0,
-            transform: "translateX(16px)"
-          },
-          to: {
-            opacity: 1,
-            transform: "translateX(0)"
-          }
-        },
-        // Toast
-        "toast-hide": {
-          "0%": {
-            opacity: "1"
-          },
-          "100%": {
-            opacity: "0"
-          }
-        },
-        "toast-slide-in-right": {
-          "0%": {
-            transform: "translateX(calc(100% + 1rem))"
-          },
-          "100%": {
-            transform: "translateX(0)"
-          }
-        },
-        "toast-slide-in-bottom": {
-          "0%": {
-            transform: "translateY(calc(100% + 1rem))"
-          },
-          "100%": {
-            transform: "translateY(0)"
-          }
-        },
-        "toast-swipe-out": {
-          "0%": {
-            transform: "translateX(var(--radix-toast-swipe-end-x))"
-          },
-          "100%": {
-            transform: "translateX(calc(100% + 1rem))"
-          }
-        },
-        // Accordion
-        "slide-down": {
-          from: {
-            height: "0px"
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)"
-          }
-        },
-        "slide-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)"
-          },
-          to: {
-            height: "0px"
-          }
-        },
-        // Shimmer
-        "shimmer-loop": {
-          "100%": {
-            transform: "translateX(100%)"
-          }
-        },
-        // HALO
-        "halo-pulse": {
-          "0%": {
-            opacity: 0.3
-          },
-          "5%": {
-            opacity: 1
-          },
-          "100%": {
-            opacity: 0.3
-          }
-        },
-        // Progress
-        "progress-indeterminate": {
-          "0%": {
-            left: 0,
-            width: "0%"
-          },
-          "25%": {
-            left: "25%",
-            width: "50%"
-          },
-          "75%": {
-            left: "50%",
-            width: "100%"
-          },
-          "100%": {
-            left: "100%",
-            width: "0%"
-          }
-        },
-        // Border trail effect
-        "trail": {
-          to: {
-            "offset-distance": "100%"
-          }
-        },
-        "trail-offset": {
-          "0%": {
-            "offset-distance": "50%"
-          },
-          "100%": {
-            "offset-distance": "150%"
-          }
-        }
-      },
-      animation: {
-        // Fade
-        "fade-in": "fade-in 200ms ease-out",
-        "fade-out": "fade-out 400ms ease-out",
-        // Popper chrome
-        "slide-down-and-fade": "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-left-and-fade": "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-up-and-fade": "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-right-and-fade": "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        // Toast
-        "toast-hide": "toast-hide 100ms ease-in forwards",
-        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
-        // Accordion
-        "slide-down": "slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        "slide-up": "slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        // Border trail effect
-        "trail": "trail 6s linear infinite",
-        "trail-offset": "trail-offset 6s linear infinite",
-        // Progress effects
-        "spin": "spin 1.5s linear infinite",
-        "spin-slow": "spin 3s linear infinite",
-        "shimmer": "shimmer-loop 2s infinite",
-        "halo-pulse": "halo-pulse 2s ease-out infinite",
-        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite",
-        "progress-linear": "progress-linear 2s ease-out infinite"
-      }
-    }, extendTokens, ...extensions),
-    ...overrideTokens,
-    colors: {
-      ...overrideTokens.colors,
-      inherit: "inherit",
-      current: "currentColor",
-      transparent: "transparent",
-      black: "black",
-      white: "white"
-    }
-  },
-  plugins: [
-    tailwindcssContainerQueries,
-    tailwindcssForms,
-    tailwindcssLogical,
-    tailwindcssRadix(),
-    // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar({
-      nocompatible: true,
-      preferredStrategy: "pseudoelements"
-    })
-  ],
-  ...env === "development" && {
-    mode: "jit"
-  },
-  content,
-  future: {
-    hoverOnlyWhenSupported: true
-  }
-});
-
-// src/styles/fragments/density.ts
-var coarseBlockSize = "min-bs-[2.5rem]";
-var coarseTextPadding = "pli-3";
-var coarseButtonPadding = "pli-4";
-var coarseDimensions = `${coarseBlockSize} ${coarseTextPadding}`;
-var coarseButtonDimensions = `${coarseBlockSize} ${coarseButtonPadding}`;
-var fineBlockSize = "min-bs-[2.5rem] pointer-fine:min-bs-[2rem]";
-var fineTextPadding = "pli-2";
-var fineButtonPadding = "pli-2.5";
-var fineDimensions = `${fineBlockSize} ${fineTextPadding}`;
-var fineButtonDimensions = `${fineBlockSize} ${fineButtonPadding}`;
+// 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 fineDimensions = `${fineBlockSize} px-2`;
 var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
 
-// src/styles/fragments/disabled.ts
+// 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/styles/fragments/dimension.ts
-var textBlockWidth = "is-full mli-auto max-is-[--text-content]";
+// 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/styles/fragments/elevation.ts
-var contentShadow = (_) => [
-  "shadow-none"
-];
+// 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" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
+  elevation === "positioned" ? "shadow-sm" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
 ];
 var surfaceZIndex = ({ level, elevation }) => {
   switch (level) {
@@ -1640,7 +83,7 @@ var surfaceZIndex = ({ level, elevation }) => {
       ] : elevation === "toast" ? [
         "z-[43]"
       ] : [
-        "z-30"
+        "z-50"
       ];
     case "menu":
       return elevation === "dialog" ? [
@@ -1661,634 +104,173 @@ var surfaceZIndex = ({ level, elevation }) => {
   }
 };
 
-// src/styles/fragments/focus.ts
-var focusRing = "dx-focus-ring";
-var dropRing = "ring-1 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
-var dropRingInner = "before:z-[1] before:absolute before:inset-0 before:ring-1 before:ring-inset before:ring-primary-350 before:dark:ring-primary-450";
-var subduedFocus = "focus:outline-none focus-visible:outline-none 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/styles/fragments/group.ts
-var group = (props) => [
-  props.elevation === "base" ? "bg-transparent border border-separator" : "bg-modalSurface",
-  surfaceShadow(props)
-];
-
-// src/styles/fragments/hover.ts
-var hoverColors = "transition-colors duration-100 linear hover:bg-hoverSurface";
-var ghostHover = "hover:bg-hoverSurface";
-var ghostFocusWithin = "focus-within:bg-hoverSurface";
-var subtleHover = "hover:bg-hoverOverlay";
-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 hoverableFocusedControls = "focus:[--controls-opacity:1]";
-var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
-var hoverableControlItem = "opacity-[--controls-opacity]";
-var hoverableControlItemTransition = "transition-opacity duration-200";
-var staticHoverableControls = "hover-hover:[--controls-opacity:1]";
-
-// src/styles/fragments/layout.ts
-var bounceLayout = "fixed inset-0 z-0 overflow-auto overscroll-auto";
-var fixedInsetFlexLayout = "flex flex-col fixed inset-0 overflow-hidden overscroll-none";
-
-// src/styles/fragments/motion.ts
-var popperMotion = "will-change-[opacity,transform] data-[side=top]:animate-slide-down-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade";
-
-// src/styles/fragments/ornament.ts
-var separatorBorderColor = "border-separator";
-var subduedSeparatorBorderColor = "border-subduedSeparator";
-var inlineSeparator = "self-stretch border-ie mli-1";
-var blockSeparator = "self-stretch border-be mlb-1";
-
-// src/styles/fragments/selected.ts
-var ghostSelectedCurrent = [
-  ghostHover,
-  "aria-[current]:bg-inputSurface hover:aria-[current]:bg-hoverSurface",
-  "aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800",
-  "aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750"
-];
-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 ghostSelectedTrackingInterFromNormal = "tracking-[0.0092em]";
-var ghostSelected = "aria-selected:bg-baseSurface aria-selected:text-accentText hover:aria-selected:text-accentTextHover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
-var ghostSelectedContainerMd = "@md:aria-selected:bg-baseSurface @md:aria-selected:text-accentText @md:hover:aria-selected:text-accentTextHover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]";
-var staticGhostSelectedCurrent = ({ current, selected }) => [
-  current && selected ? "bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750" : current ? "bg-inputSurface hover:bg-hoverSurface" : selected ? "bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800" : ghostHover
-];
-var staticGhostSelected = ({ selected }) => selected ? [
-  "bg-primary-200 dark:bg-primary-750"
-] : [];
-
-// src/styles/fragments/shimmer.ts
-var shimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
-var strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
-
-// src/styles/fragments/surface.ts
-var baseSurface = "base-surface";
-var sidebarSurface = "sidebar-surface backdrop-blur-md dark:backdrop-blur-lg";
-var sidebarBorder = "border-separator";
-var activeSurface = "base-surface";
-var groupBorder = "border-separator";
-var modalSurface = "modal-surface backdrop-blur-md";
-var attentionSurface = "attention-surface";
-var accentSurface = "bg-accentSurface text-accentSurfaceText";
-
 // src/util/hash-styles.ts
-var neutralColor = {
+var neutral = {
   hue: "neutral",
-  text: "text-neutralFill",
-  icon: "text-neutralSurfaceText",
-  bg: "bg-neutralFill",
-  surface: "bg-neutralSurface",
-  border: "border-neutralFill"
+  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",
-    text: "text-orangeFill",
-    icon: "text-orangeSurfaceText",
-    bg: "bg-orangeFill",
-    surface: "bg-orangeSurface",
-    border: "border-orangeFill"
+    fill: "bg-orange-fill",
+    surface: "bg-orange-surface",
+    surfaceText: "text-orange-surface-text",
+    text: "text-orange-text",
+    border: "border-orange-border"
   },
   {
     hue: "amber",
-    text: "text-amberFill",
-    icon: "text-amberSurfaceText",
-    bg: "bg-amberFill",
-    surface: "bg-amberSurface",
-    border: "border-amberFill"
+    fill: "bg-amber-fill",
+    surface: "bg-amber-surface",
+    surfaceText: "text-amber-surface-text",
+    text: "text-amber-text",
+    border: "border-amber-border"
   },
   {
     hue: "yellow",
-    text: "text-yellowFill",
-    icon: "text-yellowSurfaceText",
-    bg: "bg-yellowFill",
-    surface: "bg-yellowSurface",
-    border: "border-yellowFill"
+    fill: "bg-yellow-fill",
+    surface: "bg-yellow-surface",
+    surfaceText: "text-yellow-surface-text",
+    text: "text-yellow-text",
+    border: "border-yellow-border"
   },
   {
     hue: "lime",
-    text: "text-limeFill",
-    icon: "text-limeSurfaceText",
-    bg: "bg-limeFill",
-    surface: "bg-limeSurface",
-    border: "border-limeFill"
+    fill: "bg-lime-fill",
+    surface: "bg-lime-surface",
+    surfaceText: "text-lime-surface-text",
+    text: "text-lime-text",
+    border: "border-lime-border"
   },
   {
     hue: "green",
-    text: "text-greenFill",
-    icon: "text-greenSurfaceText",
-    bg: "bg-greenFill",
-    surface: "bg-greenSurface",
-    border: "border-greenFill"
+    fill: "bg-green-fill",
+    surface: "bg-green-surface",
+    surfaceText: "text-green-surface-text",
+    text: "text-green-text",
+    border: "border-green-border"
   },
   {
     hue: "emerald",
-    text: "text-emeraldFill",
-    icon: "text-emeraldSurfaceText",
-    bg: "bg-emeraldFill",
-    surface: "bg-emeraldSurface",
-    border: "border-emeraldFill"
+    fill: "bg-emerald-fill",
+    surface: "bg-emerald-surface",
+    surfaceText: "text-emerald-surface-text",
+    text: "text-emerald-text",
+    border: "border-emerald-border"
   },
   {
     hue: "teal",
-    text: "text-tealFill",
-    icon: "text-tealSurfaceText",
-    bg: "bg-tealFill",
-    surface: "bg-tealSurface",
-    border: "border-tealFill"
+    fill: "bg-teal-fill",
+    surface: "bg-teal-surface",
+    surfaceText: "text-teal-surface-text",
+    text: "text-teal-text",
+    border: "border-teal-border"
   },
   {
     hue: "cyan",
-    text: "text-cyanFill",
-    icon: "text-cyanSurfaceText",
-    bg: "bg-cyanFill",
-    surface: "bg-cyanSurface",
-    border: "border-cyanFill"
+    fill: "bg-cyan-fill",
+    surface: "bg-cyan-surface",
+    surfaceText: "text-cyan-surface-text",
+    text: "text-cyan-text",
+    border: "border-cyan-border"
   },
   {
     hue: "sky",
-    text: "text-skyFill",
-    icon: "text-skySurfaceText",
-    bg: "bg-skyFill",
-    surface: "bg-skySurface",
-    border: "border-skyFill"
+    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",
-    text: "text-indigoFill",
-    icon: "text-indigoSurfaceText",
-    bg: "bg-indigoFill",
-    surface: "bg-indigoSurface",
-    border: "border-indigoFill"
+    fill: "bg-indigo-fill",
+    surface: "bg-indigo-surface",
+    surfaceText: "text-indigo-surface-text",
+    text: "text-indigo-text",
+    border: "border-indigo-border"
   },
   {
     hue: "violet",
-    text: "text-violetFill",
-    icon: "text-violetSurfaceText",
-    bg: "bg-violetFill",
-    surface: "bg-violetSurface",
-    border: "border-violetFill"
+    fill: "bg-violet-fill",
+    surface: "bg-violet-surface",
+    surfaceText: "text-violet-surface-text",
+    text: "text-violet-text",
+    border: "border-violet-border"
   },
   {
     hue: "purple",
-    text: "text-purpleFill",
-    icon: "text-purpleSurfaceText",
-    bg: "bg-purpleFill",
-    surface: "bg-purpleSurface",
-    border: "border-purpleFill"
+    fill: "bg-purple-fill",
+    surface: "bg-purple-surface",
+    surfaceText: "text-purple-surface-text",
+    text: "text-purple-text",
+    border: "border-purple-border"
   },
   {
     hue: "fuchsia",
-    text: "text-fuchsiaFill",
-    icon: "text-fuchsiaSurfaceText",
-    bg: "bg-fuchsiaFill",
-    surface: "bg-fuchsiaSurface",
-    border: "border-fuchsiaFill"
+    fill: "bg-fuchsia-fill",
+    surface: "bg-fuchsia-surface",
+    surfaceText: "text-fuchsia-surface-text",
+    text: "text-fuchsia-text",
+    border: "border-fuchsia-border"
   },
   {
-    hue: "rose",
-    text: "text-roseFill",
-    icon: "text-roseSurfaceText",
-    bg: "bg-roseFill",
-    surface: "bg-roseSurface",
-    border: "border-roseFill"
+    hue: "pink",
+    fill: "bg-pink-fill",
+    surface: "bg-pink-surface",
+    surfaceText: "text-pink-surface-text",
+    text: "text-pink-text",
+    border: "border-pink-border"
   },
   {
-    hue: "pink",
-    text: "text-pinkFill",
-    icon: "text-pinkSurfaceText",
-    bg: "bg-pinkFill",
-    surface: "bg-pinkSurface",
-    border: "border-pinkFill"
+    hue: "rose",
+    fill: "bg-rose-fill",
+    surface: "bg-rose-surface",
+    surfaceText: "text-rose-surface-text",
+    text: "text-rose-text",
+    border: "border-rose-border"
   }
 ];
-var getStyles = (hue) => {
-  return styles.find((color) => color.hue === hue) || neutralColor;
-};
-var getHashHue = (id) => {
-  return id ? styles[getHash(id) % styles.length].hue : "neutral";
+var palette = {
+  neutral,
+  hues: styles
 };
-var getHashStyles = (id) => {
-  const hue = getHashHue(id);
-  return getStyles(hue);
-};
-var getHash = (id) => id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
-
-// src/util/mx.ts
-import { extendTailwindMerge, validators as validators2 } from "tailwind-merge";
-
-// src/util/withLogical.ts
-import { mergeConfigs, validators } from "tailwind-merge";
-var getLength = () => [
-  validators.isLength,
-  validators.isArbitraryLength
-];
-var getLengthWithAuto = () => [
-  "auto",
-  validators.isLength,
-  validators.isArbitraryLength
-];
-var getLengthWithEmpty = () => [
-  "",
-  validators.isLength,
-  validators.isArbitraryLength
-];
-var getAny = () => [
-  validators.isAny
-];
-var getRounded = () => [
-  "none",
-  "",
-  validators.isTshirtSize,
-  "full",
-  validators.isArbitraryLength
-];
-var classGroupsConfig = {
-  float: [
-    {
-      float: [
-        "start",
-        "end"
-      ]
-    }
-  ],
-  clear: [
-    {
-      clear: [
-        "start",
-        "end"
-      ]
-    }
-  ],
-  resize: [
-    {
-      resize: [
-        "block ",
-        "inline"
-      ]
-    }
-  ],
-  "text-alignment": [
-    {
-      text: [
-        "start",
-        "end"
-      ]
-    }
-  ],
-  "logical.overscroll-b": [
-    {
-      "overscroll-b": [
-        "auto ",
-        "contain",
-        "auto"
-      ]
-    }
-  ],
-  "logical.overscroll-i": [
-    {
-      "overscroll-b": [
-        "auto ",
-        "contain",
-        "auto"
-      ]
-    }
-  ],
-  "logical.bs": [
-    {
-      bs: getLength()
-    }
-  ],
-  "logical.min-bs": [
-    {
-      "min-bs": getAny()
-    }
-  ],
-  "logical.max-bs": [
-    {
-      "max-bs": getAny()
-    }
-  ],
-  "logical.is": [
-    {
-      is: getLength()
-    }
-  ],
-  "logical.min-is": [
-    {
-      "min-is": getAny()
-    }
-  ],
-  "logical.max-is": [
-    {
-      "max-is": getAny()
-    }
-  ],
-  "logical.mlb": [
-    {
-      mlb: getAny()
-    }
-  ],
-  "logical.mli": [
-    {
-      mli: getAny()
-    }
-  ],
-  "logical.mbs": [
-    {
-      mbs: getAny()
-    }
-  ],
-  "logical.mbe": [
-    {
-      mbe: getAny()
-    }
-  ],
-  "logical.mis": [
-    {
-      mis: getAny()
-    }
-  ],
-  "logical.mie": [
-    {
-      mie: getAny()
-    }
-  ],
-  "logical.plb": [
-    {
-      plb: getAny()
-    }
-  ],
-  "logical.pli": [
-    {
-      pli: getAny()
-    }
-  ],
-  "logical.pbs": [
-    {
-      pbs: getAny()
-    }
-  ],
-  "logical.pbe": [
-    {
-      pbe: getAny()
-    }
-  ],
-  "logical.pis": [
-    {
-      pis: getAny()
-    }
-  ],
-  "logical.pie": [
-    {
-      pie: getAny()
-    }
-  ],
-  "logical.space-b": [
-    {
-      "space-b": getLength()
-    }
-  ],
-  "logical.space-i": [
-    {
-      "space-i": getLength()
-    }
-  ],
-  "logical.inset-block": [
-    {
-      "inset-block": getLengthWithAuto()
-    }
-  ],
-  "logical.inset-inline": [
-    {
-      "inset-inline": getLengthWithAuto()
-    }
-  ],
-  "logical.block-start": [
-    {
-      "block-start": getLengthWithAuto()
-    }
-  ],
-  "logical.block-end": [
-    {
-      "block-end": getLengthWithAuto()
-    }
-  ],
-  "logical.inline-start": [
-    {
-      "inline-start": getLengthWithAuto()
-    }
-  ],
-  "logical.inline-end": [
-    {
-      "inline-end": getLengthWithAuto()
-    }
-  ],
-  "logical.border-li": [
-    {
-      "border-li": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-lb": [
-    {
-      "border-lb": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-bs": [
-    {
-      "border-bs": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-be": [
-    {
-      "border-be": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-is": [
-    {
-      "border-is": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-ie": [
-    {
-      "border-ie": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-color-bs": [
-    {
-      "border-bs": getAny()
-    }
-  ],
-  "logical.border-color-be": [
-    {
-      "border-be": getAny()
-    }
-  ],
-  "logical.border-color-is": [
-    {
-      "border-is": getAny()
-    }
-  ],
-  "logical.border-color-ie": [
-    {
-      "border-ie": getAny()
-    }
-  ],
-  "logical.rounded-bs": [
-    {
-      "rounded-bs": getRounded()
-    }
-  ],
-  "logical.rounded-be": [
-    {
-      "rounded-be": getRounded()
-    }
-  ],
-  "logical.rounded-is": [
-    {
-      "rounded-is": getRounded()
-    }
-  ],
-  "logical.rounded-ie": [
-    {
-      "rounded-ie": getRounded()
-    }
-  ],
-  "logical.rounded-ss": [
-    {
-      "rounded-ss": getRounded()
-    }
-  ],
-  "logical.rounded-se": [
-    {
-      "rounded-se": getRounded()
-    }
-  ],
-  "logical.rounded-es": [
-    {
-      "rounded-es": getRounded()
-    }
-  ],
-  "logical.rounded-ee": [
-    {
-      "rounded-ee": getRounded()
-    }
-  ],
-  "logical.divide-b": [
-    {
-      "divide-b": getLengthWithEmpty()
-    }
-  ],
-  "logical.divide-i": [
-    {
-      "divide-i": getLengthWithEmpty()
-    }
-  ]
+var getStyles = (hue) => {
+  return styles.find((color) => color.hue === hue) || neutral;
 };
-var withLogical = (prevConfig) => {
-  return mergeConfigs(prevConfig, {
-    extend: {
-      classGroups: classGroupsConfig,
-      conflictingClassGroups: {
-        "inset-block": [
-          "logical.block-start",
-          "logical.block-end"
-        ],
-        "inset-inline": [
-          "logical.inline-start",
-          "logical.inline-end"
-        ],
-        p: [
-          "logical.plb",
-          "logical.pli",
-          "logical.pbs",
-          "logical.pbe",
-          "logical.pis",
-          "logical.pie"
-        ],
-        pli: [
-          "logical.pis",
-          "logical.pie"
-        ],
-        plb: [
-          "logical.pbs",
-          "logical.pbe"
-        ],
-        m: [
-          "logical.mlb",
-          "logical.mli",
-          "logical.mbs",
-          "logical.mbe",
-          "logical.mis",
-          "logical.mie"
-        ],
-        mli: [
-          "logical.mis",
-          "logical.mie"
-        ],
-        mlb: [
-          "logical.mbs",
-          "logical.mbe"
-        ],
-        overscroll: [
-          "overscroll-i",
-          "overscroll-b"
-        ],
-        rounded: [
-          "logical.rounded-bs",
-          "logical.rounded-be",
-          "logical.rounded-is",
-          "logical.rounded-ie",
-          "logical.rounded-ss",
-          "logical.rounded-se",
-          "logical.rounded-es",
-          "logical.rounded-ee"
-        ],
-        "logical.rounded-bs": [
-          "logical.rounded-ss",
-          "logical.rounded-se"
-        ],
-        "logical.rounded-be": [
-          "logical.rounded-es",
-          "logical.rounded-ee"
-        ],
-        "logical.rounded-is": [
-          "logical.rounded-ss",
-          "logical.rounded-es"
-        ],
-        "logical.rounded-ie": [
-          "logical.rounded-ee",
-          "logical.rounded-se"
-        ],
-        "logical.border-li": [
-          "logical.border-is",
-          "logical.border-ie"
-        ],
-        "logical.border-lb": [
-          "logical.border-bs",
-          "logical.border-be"
-        ],
-        "border-color": [
-          "logical.border-color-bs",
-          "logical.border-color-be",
-          "logical.border-color-is",
-          "logical.border-color-ie"
-        ],
-        border: [
-          "logical.border-bs",
-          "logical.border-be",
-          "logical.border-is",
-          "logical.border-ie"
-        ]
-      }
-    }
-  });
+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: {
@@ -2308,11 +290,11 @@ var mx = extendTailwindMerge({
         "font-extrabold",
         "font-black",
         // Arbitrary numbers
-        validators2.isArbitraryNumber
+        validators.isArbitraryNumber
       ],
       density: [
-        "density-fine",
-        "density-coarse"
+        "dx-density-fine",
+        "dx-density-coarse"
       ],
       "dx-focus-ring": [
         "dx-focus-ring",
@@ -2332,393 +314,273 @@ var mx = extendTailwindMerge({
       ]
     }
   }
-}, withLogical);
+});
+var composableProps = ({ className, classNames, role, ...props }, { classNames: defaultClassNames, ...defaults } = {}) => ({
+  // Default props.
+  ...defaults,
+  // Spread supplied props; prefer explicit role, then defaults role, then 'none'.
+  role: role ?? defaults.role ?? "none",
+  ...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: 119,
+            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/styles/fragments/size.ts
-var sizeWidthMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "is-0"
-  ],
-  [
-    "px",
-    "is-px"
-  ],
-  [
-    0.5,
-    "is-0.5"
-  ],
-  [
-    1,
-    "is-1"
-  ],
-  [
-    1.5,
-    "is-1.5"
-  ],
-  [
-    2,
-    "is-2"
-  ],
-  [
-    2.5,
-    "is-2.5"
-  ],
-  [
-    3,
-    "is-3"
-  ],
-  [
-    3.5,
-    "is-3.5"
-  ],
-  [
-    4,
-    "is-4"
-  ],
-  [
-    5,
-    "is-5"
-  ],
-  [
-    6,
-    "is-6"
-  ],
-  [
-    7,
-    "is-7"
-  ],
-  [
-    8,
-    "is-8"
-  ],
-  [
-    9,
-    "is-9"
-  ],
-  [
-    10,
-    "is-10"
-  ],
-  [
-    11,
-    "is-11"
-  ],
-  [
-    12,
-    "is-12"
-  ],
-  [
-    14,
-    "is-14"
-  ],
-  [
-    16,
-    "is-16"
-  ],
-  [
-    20,
-    "is-20"
-  ],
-  [
-    24,
-    "is-24"
-  ],
-  [
-    28,
-    "is-28"
-  ],
-  [
-    32,
-    "is-32"
-  ],
-  [
-    36,
-    "is-36"
-  ],
-  [
-    40,
-    "is-40"
-  ],
-  [
-    44,
-    "is-44"
-  ],
-  [
-    48,
-    "is-48"
-  ],
-  [
-    52,
-    "is-52"
-  ],
-  [
-    56,
-    "is-56"
-  ],
-  [
-    60,
-    "is-60"
-  ],
-  [
-    64,
-    "is-64"
-  ],
-  [
-    72,
-    "is-72"
-  ],
-  [
-    80,
-    "is-80"
-  ],
-  [
-    96,
-    "is-96"
-  ]
-]);
-var sizeHeightMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "bs-0"
-  ],
-  [
-    "px",
-    "bs-px"
-  ],
-  [
-    0.5,
-    "bs-0.5"
-  ],
-  [
-    1,
-    "bs-1"
-  ],
-  [
-    1.5,
-    "bs-1.5"
-  ],
-  [
-    2,
-    "bs-2"
-  ],
-  [
-    2.5,
-    "bs-2.5"
-  ],
-  [
-    3,
-    "bs-3"
-  ],
-  [
-    3.5,
-    "bs-3.5"
-  ],
-  [
-    4,
-    "bs-4"
-  ],
-  [
-    5,
-    "bs-5"
-  ],
-  [
-    6,
-    "bs-6"
-  ],
-  [
-    7,
-    "bs-7"
-  ],
-  [
-    8,
-    "bs-8"
-  ],
-  [
-    9,
-    "bs-9"
-  ],
-  [
-    10,
-    "bs-10"
-  ],
-  [
-    11,
-    "bs-11"
-  ],
-  [
-    12,
-    "bs-12"
-  ],
-  [
-    14,
-    "bs-14"
-  ],
-  [
-    16,
-    "bs-16"
-  ],
-  [
-    20,
-    "bs-20"
-  ],
-  [
-    24,
-    "bs-24"
-  ],
-  [
-    28,
-    "bs-28"
-  ],
-  [
-    32,
-    "bs-32"
-  ],
-  [
-    36,
-    "bs-36"
-  ],
-  [
-    40,
-    "bs-40"
-  ],
-  [
-    44,
-    "bs-44"
-  ],
-  [
-    48,
-    "bs-48"
-  ],
-  [
-    52,
-    "bs-52"
-  ],
-  [
-    56,
-    "bs-56"
-  ],
-  [
-    60,
-    "bs-60"
-  ],
-  [
-    64,
-    "bs-64"
-  ],
-  [
-    72,
-    "bs-72"
-  ],
-  [
-    80,
-    "bs-80"
-  ],
-  [
-    96,
-    "bs-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/styles/fragments/text.ts
-var placeholderText = "placeholder-neutral-300 dark:placeholder-neutral-500";
-var staticPlaceholderText = "text-neutral-300 dark:text-neutral-500";
-var descriptionText = "text-sm font-normal text-description";
-var descriptionTextPrimary = "text-sm font-normal text-baseText";
-var descriptionMessage = [
-  descriptionText,
-  "border border-dashed border-separator rounded p-4"
-];
-var chromeText = "text-sm font-normal";
 
-// src/styles/fragments/valence.ts
-var successText = "text-xs font-medium text-successText";
-var infoText = "text-xs font-medium text-infoText";
-var warningText = "text-xs font-medium text-warningText";
-var errorText = "text-xs font-medium text-errorText";
-var valenceColorText = (valence) => {
+// src/util/valence.ts
+var textValence = (valence) => {
   switch (valence) {
     case "success":
-      return successText;
+      return "font-medium text-success-text";
     case "info":
-      return infoText;
+      return "font-medium text-info-text";
     case "warning":
-      return warningText;
+      return "font-medium text-warning-text";
     case "error":
-      return errorText;
-    default:
-      return void 0;
+      return "font-medium text-error-text";
   }
 };
-var neutralMessageColors = "border border-dashed border-separator text-subdued";
-var successMessageColors = "text-successSurfaceText bg-successSurface";
-var infoMessageColors = "text-infoSurfaceText bg-infoSurface";
-var warningMessageColors = "text-warningSurfaceText bg-warningSurface";
-var errorMessageColors = "text-errorSurfaceText bg-errorSurface";
 var messageValence = (valence) => {
   switch (valence) {
     case "success":
-      return successMessageColors;
+      return "font-medium text-success-text border-success-text bg-success-surface";
     case "info":
-      return infoMessageColors;
+      return "font-medium text-info-text border-info-text bg-info-surface";
     case "warning":
-      return warningMessageColors;
+      return "font-medium text-warning-text border-warning-text bg-warning-surface";
     case "error":
-      return errorMessageColors;
+      return "font-medium text-error-text border-error-text bg-error-surface";
     default:
-      return neutralMessageColors;
+      return "font-medium text-neutral-text border-neutral-text bg-neutral-surface";
   }
 };
 
-// src/styles/components/anchored-overflow.ts
-var anchoredOverflowRoot = (_props, ...etc) => mx("overflow-anchored overflow-auto", ...etc);
-var anchoredOverflowAnchor = (_props, ...etc) => mx("overflow-anchor is-px bs-px", ...etc);
-var anchoredOverflowTheme = {
-  root: anchoredOverflowRoot,
-  anchor: anchoredOverflowAnchor
-};
-
-// src/styles/components/avatar.ts
-var avatarRoot = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mie-1" : "-mie-2"), ...etc);
+// 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(descriptionText, srOnly && "sr-only", ...etc);
-var avatarFrame = ({ variant }, ...etc) => mx("is-full bs-full bg-[--surface-bg]", variant === "circle" ? "rounded-full" : "rounded", ...etc);
-var avatarStatusIcon = ({ status, size = 3 }, ...etc) => mx("absolute block-end-0 inline-end-0", getSize(size), status === "inactive" ? "text-amber-350 dark:text-amber-250" : status === "active" ? "text-emerald-350 dark:text-emerald-250" : "text-neutral-350 dark:text-neutral-250", ...etc);
-var avatarRing = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded", 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 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 plb-1 pli-2 relative z-[1] flex items-center justify-center", size && getSizeHeight(size), ...etc);
-var avatarGroupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : descriptionText, ...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,
@@ -2732,7 +594,7 @@ var avatarTheme = {
   groupDescription: avatarGroupDescription
 };
 
-// src/styles/components/breadcrumb.ts
+// 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);
@@ -2746,152 +608,194 @@ var breadcrumbTheme = {
   separator: breadcrumbSeparator
 };
 
-// src/styles/components/button.ts
-var primaryButtonColors = "text-accentSurfaceText bg-accentSurface hover:bg-accentSurfaceHover 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-inputSurface";
-var defaultButtonColors = mx(staticDefaultButtonColors, "data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface");
-var ghostButtonColors = mx(ghostHover, "hover:text-inherit data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface");
+// src/theme/components/card.ts
+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);
+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 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,
+  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 max-is-full [&_span]:truncate", ...etc);
+  return mx("dx-button dx-focus-ring group [&_span]:truncate", ...etc);
 };
 var buttonGroup = (_props, ...etc) => {
-  return mx("inline-flex rounded-sm [&>:first-child]:rounded-is-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...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/styles/components/dialog.ts
-var sizeMap = {
-  sm: "md:!max-is-[24rem]",
-  md: "md:!max-is-[32rem]",
-  lg: "md:!max-is-[40rem]",
-  xl: "md:!max-is-[60rem]"
+// 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 }, ...etc) => {
-  return mx("@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-2", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", size && sizeMap[size], ...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 items-center justify-between", ...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", ...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", descriptionText, 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/styles/components/icon.ts
-var iconRoot = ({ size }, etc) => mx("shrink-0 bs-[1em] is-[1em] text-[var(--icons-color,currentColor)]", size && getSize(size), etc);
+// 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/styles/components/icon-button.ts
+// src/theme/components/icon-button.ts
 var iconButtonRoot = ({ iconOnly }, ...etc) => {
-  return mx("gap-2", iconOnly && "p-iconButtonPadding min-bs-0", ...etc);
+  return mx("px-1.5", !iconOnly && "gap-2", ...etc);
 };
 var iconButtonTheme = {
   root: iconButtonRoot
 };
 
-// src/styles/components/input.ts
-var neutralInputValence = "";
-var successInputValence = "shadow-emerald-500/50 dark:shadow-emerald-600/50";
-var infoInputValence = "shadow-cyan-500/50 dark:shadow-cyan-600/50";
-var warningInputValence = "shadow-amber-500/50 dark:shadow-amber-600/50";
-var errorInputValence = "shadow-rose-500/50 dark:shadow-rose-600/50";
-var textInputSurfaceFocus = "transition-colors bg-textInputSurface focus:bg-focusSurface border border-separator focus:border-separator";
-var textInputSurfaceHover = "hover:bg-textInputSurface focus:hover:bg-focusSurface";
-var booleanInputSurface = "shadow-inner transition-colors bg-unAccent aria-checked:bg-accentSurface aria-[checked=mixed]:bg-accentSurface";
-var booleanInputSurfaceHover = "hover:bg-unAccentHover hover:aria-checked:bg-accentSurfaceHover hover:aria-[checked=mixed]:bg-accentSurfaceHover";
-var inputTextLabel = "text-description text-xs font-medium mbs-inputSpacingBlock mbe-labelSpacingBlock first:mbs-0";
+// 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 successInputValence;
+      return "shadow-emerald-500/50 dark:shadow-emerald-600/50";
     case "info":
-      return infoInputValence;
+      return "shadow-cyan-500/50 dark:shadow-cyan-600/50";
     case "warning":
-      return warningInputValence;
+      return "shadow-amber-500/50 dark:shadow-amber-600/50";
     case "error":
-      return errorInputValence;
-    default:
-      return null;
+      return "shadow-rose-500/50 dark:shadow-rose-600/50";
   }
 };
 var sharedSubduedInputStyles = (props) => [
-  'plb-0 is-full bg-transparent text-current [[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full bg-transparent text-current placeholder-placeholder",
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
   props.density === "fine" ? fineBlockSize : coarseBlockSize,
-  placeholderText,
-  subduedFocus,
+  "dx-focus-subdued",
   props.disabled && staticDisabled
 ];
 var sharedDefaultInputStyles = (props) => [
-  'plb-0 is-full text-baseText rounded-sm text-[color:var(--surface-text)] [[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
   textInputSurfaceFocus,
-  placeholderText,
   props.density === "fine" ? fineDimensions : coarseDimensions,
   props.disabled ? staticDisabled : textInputSurfaceHover
 ];
 var sharedStaticInputStyles = (props) => [
-  'plb-0 is-full text-baseText rounded-sm text-[color:var(--surface-text)] [[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
   textInputSurfaceFocus,
   textInputSurfaceHover,
-  props.focused && "bg-attention",
-  placeholderText,
+  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) || neutralInputValence, ...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 pli-1 mx-1 relative",
-  focusRing,
+  "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 mli-auto", props.disabled && "cursor-not-allowed", ...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(descriptionText, props.srOnly && "sr-only", ...etc);
-var inputDescriptionAndValidation = (props, ...etc) => mx("leading-none mlb-labelSpacingBlock", props.srOnly && "sr-only", ...etc);
-var inputValidation = (props, ...etc) => mx(descriptionText, props.srOnly ? "sr-only" : valenceColorText(props.validationValence), ...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,
-  validation: inputValidation,
   switch: inputSwitch,
   switchThumb: inputSwitchThumb,
+  validation: inputValidation,
   descriptionAndValidation: inputDescriptionAndValidation
 };
 
-// src/styles/components/link.ts
-var linkRoot = ({ variant }, ...etc) => mx("underline decoration-1 underline-offset-2 transition-color rounded-sm", variant === "neutral" ? "text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90" : "text-accentText hover:text-accentTextHover visited:text-accentText visited:hover:text-accentTextHover", focusRing, ...etc);
+// 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/styles/components/list.ts
+// 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", ...etc);
-var listItemDragHandleIcon = (_props, ...etc) => mx(getSize(5), "mbs-2.5", ...etc);
-var listItemOpenTrigger = ({ density }, ...etc) => mx("is-5 rounded flex justify-center items-center", densityBlockSize(density), ghostHover, focusRing, ...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);
 };
@@ -2907,34 +811,32 @@ var listTheme = {
   }
 };
 
-// src/styles/components/main.ts
-var topbarBlockPaddingStart = "pbs-[--topbar-size] sticky-top-from-topbar-bottom";
-var bottombarBlockPaddingEnd = "pbe-[--statusbar-size] sticky-bottom-from-statusbar-bottom";
+// 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 mainDrawer = (_, ...etc) => mx("dx-main-drawer", "dx-focus-ring-inset-over-all", ...etc);
 var mainOverlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
 var mainTheme = {
   content: mainContent,
   sidebar: mainSidebar,
-  drawer: mainDrawer,
   overlay: mainOverlay
 };
 
-// src/styles/components/menu.ts
-var menuViewport = (_props, ...etc) => mx("rounded p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto", ...etc);
-var menuContent = ({ elevation }, ...etc) => mx("is-48 rounded md:is-56 border border-separator", surfaceZIndex({
+// 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"
-}), modalSurface, popperMotion, ...etc);
-var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-sm pli-2 plb-2 text-sm", "data-[highlighted]:bg-hoverSurface", subduedFocus, dataDisabled, ...etc);
-var menuSeparator = (_props, ...etc) => mx("mlb-1 mli-2 bs-px bg-separator", ...etc);
-var menuGroupLabel = (_props, ...etc) => mx(descriptionText, "select-none pli-2 plb-2", ...etc);
+}), ...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,
@@ -2945,34 +847,38 @@ var menuTheme = {
   arrow: menuArrow
 };
 
-// src/styles/components/message.ts
+// src/theme/components/message.ts
 var messageRoot = ({ valence }, etc) => {
-  return mx("p-trimSm rounded-md", messageValence(valence), etc);
+  return mx("grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm", messageValence(valence), etc);
+};
+var messageHeader = (_, etc) => {
+  return mx("col-span-2 grid grid-cols-subgrid items-center", etc);
 };
 var messageTitle = (_, etc) => {
-  return mx("font-medium flex gap-trimSm", etc);
+  return mx("col-start-2 gap-trim-sm [&>svg]:inline-block", etc);
 };
 var messageIcon = (_, etc) => {
-  return mx("flex bs-[1lh] items-center", etc);
+  return mx("col-start-1", etc);
 };
 var messageContent = (_, etc) => {
-  return mx("first:font-medium", etc);
+  return mx("grid grid-cols-subgrid col-start-2 first:font-medium", etc);
 };
 var messageTheme = {
   root: messageRoot,
-  content: messageContent,
+  header: messageHeader,
   icon: messageIcon,
-  title: messageTitle
+  title: messageTitle,
+  content: messageContent
 };
 
-// src/styles/components/popover.ts
-var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("rounded-md", constrainBlock && "max-bs-[--radix-popover-content-available-height] overflow-y-auto", constrainInline && "max-is-[--radix-popover-content-available-width] overflow-x-auto", ...etc);
-var popoverContent = ({ elevation }, ...etc) => mx("border border-separator rounded-md", modalSurface, surfaceShadow({
+// 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"
-}), focusRing, ...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,
@@ -2980,26 +886,72 @@ var popoverTheme = {
   arrow: popoverArrow
 };
 
-// src/styles/components/scroll-area.ts
-var scrollAreaRoot = (_props, ...etc) => mx("__bs-full __is-full overflow-hidden", ...etc);
-var scrollAreaViewport = (_props, ...etc) => (
-  // mx('bs-full is-full [&>div]:is-full [&>div]:bs-auto', ...etc);
-  mx("bs-full is-full [&>div]:table-fixed [&>div]:is-full", ...etc)
+// 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 marker).
+  "[.dx-column_&]:col-span-full",
+  ...etc
 );
-var scrollAreaScrollbar = (_props, ...etc) => mx("flex select-none touch-none p-0.5 ease-out", "data-[orientation=vertical]:is-1.5 sm:data-[orientation=vertical]:data-[variant=coarse]:is-3", "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:bs-1.5 sm:data-[orientation=horizontal]:data-[variant=coarse]:bs-3", "sm:data-[variant=coarse]:bg-separator rounded-full", "[&>div]:bg-unAccent sm:[&[data-variant=coarse]>div]:bg-attention", ...etc);
-var scrollAreaThumb = (_props, ...etc) => mx("flex-1 rounded-full relative", "before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:is-full before:bs-full before:min-w-[6px] before:min-h-[6px]", ...etc);
-var scrollAreaCorner = (_props, ...etc) => mx(...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 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,
-  scrollbar: scrollAreaScrollbar,
-  thumb: scrollAreaThumb,
-  corner: scrollAreaCorner
+  viewport: scrollAreaViewport
 };
 
-// src/styles/components/select.ts
+// src/theme/components/select.ts
 var selectContent = ({ elevation }, ...etc) => {
-  return mx("min-w-[--radix-select-trigger-width] rounded max-bs-[--radix-select-content-available-height] border border-separator", modalSurface, surfaceShadow({
+  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,
@@ -3007,11 +959,11 @@ var selectContent = ({ elevation }, ...etc) => {
   }), ...etc);
 };
 var selectViewport = (_props, ...etc) => mx(...etc);
-var selectItem = (_props, ...etc) => mx("flex items-center min-bs-[2rem] pli-3 plb-1 gap-2", "text-baseText leading-none select-none outline-none", "[&>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(blockSeparator, separatorBorderColor, ...etc);
-var selectScrollButton = (_props, ...etc) => mx(modalSurface, "flex items-center justify-center cursor-default bs-6 is-full", ...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,
@@ -3022,40 +974,54 @@ var selectTheme = {
   scrollButton: selectScrollButton
 };
 
-// src/styles/components/separator.ts
-var separatorRoot = ({ orientation, subdued }, ...etc) => mx(orientation === "vertical" ? inlineSeparator : blockSeparator, subdued ? subduedSeparatorBorderColor : separatorBorderColor, ...etc);
+// 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/styles/components/status.ts
-var statusRoot = ({ variant = "default" }, ...etc) => mx("bs-1 relative bg-hoverOverlay rounded-full overflow-hidden", variant === "main-bottom" ? "is-full block" : "is-20 inline-block", ...etc);
-var statusBar = ({ indeterminate, variant = "default" }, ...etc) => mx("absolute inset-block-0 block rounded-full", variant === "main-bottom" ? "bg-accentSurface" : "bg-unAccent", indeterminate ? "animate-progress-indeterminate" : "inline-start-0", ...etc);
+// 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/styles/components/tag.ts
-var tagRoot = ({ palette = "neutral" }, ...etc) => mx("dx-tag", ...etc);
+// src/theme/components/tag.ts
+var tagRoot = (_, ...etc) => mx("dx-tag", ...etc);
 var tagTheme = {
   root: tagRoot
 };
 
-// src/styles/components/toast.ts
+// src/theme/components/toast.ts
 var toastViewport = (_props, ...etc) => mx(
   // TODO(burdon): block-end should take into account status bar.
-  "z-40 fixed block-end-[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)] is-auto md:inline-end-[calc(env(safe-area-inset-right)+1rem)] md:inline-start-auto md:is-full md:max-is-sm",
+  "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("rounded-md flex p-2 gap-2", modalSurface, surfaceShadow({
+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);
-var toastBody = (_props, ...etc) => mx("grow flex flex-col gap-1 justify-center pis-2", ...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);
-var toastDescription = ({ srOnly }, ...etc) => mx(descriptionText, "shrink-0", srOnly && "sr-only", ...etc);
+var toastDescription = ({ srOnly }, ...etc) => mx("text-description", "shrink-0", srOnly && "sr-only", ...etc);
 var toastTheme = {
   viewport: toastViewport,
   root: toastRoot,
@@ -3065,73 +1031,69 @@ var toastTheme = {
   actions: toastActions
 };
 
-// src/styles/components/toolbar.ts
-var toolbarLayout = "is-full shrink-0 flex flex-nowrap items-center gap-1 p-1 overflow-x-auto scrollbar-none contain-layout";
-var toolbarInactive = "*:opacity-20";
-var toolbarRoot = ({ layoutManaged, disabled }, ...etc) => {
-  return mx("bg-toolbarSurface dx-toolbar", !layoutManaged && toolbarLayout, disabled && toolbarInactive, ...etc);
-};
-var toolbarInner = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && [
-    "flex gap-1",
-    textBlockWidth
-  ], ...etc);
+// 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,
-  inner: toolbarInner
+  text: toolbarText
 };
 
-// src/styles/components/tooltip.ts
-var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText", popperMotion, surfaceShadow({
+// 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"
-}), chromeText, ...etc);
-var tooltipArrow = (_props, ...etc) => mx("fill-inverseSurface", ...etc);
+}), ...etc);
+var tooltipArrow = (_props, ...etc) => mx("fill-inverse-surface", ...etc);
 var tooltipTheme = {
   content: tooltipContent,
   arrow: tooltipArrow
 };
 
-// src/styles/components/treegrid.ts
+// src/theme/components/treegrid.ts
 var levelStyles = /* @__PURE__ */ new Map([
   [
     1,
-    "[&>.indent:first-of-type]:pis-0 font-medium"
+    "[&>.indent:first-of-type]:pl-0 font-medium"
   ],
   [
     2,
-    "[&>.indent:first-of-type]:pis-0"
+    "[&>.indent:first-of-type]:pl-0"
   ],
   [
     3,
-    "[&>.indent:first-of-type]:pis-1"
+    "[&>.indent:first-of-type]:pl-1"
   ],
   [
     4,
-    "[&>.indent:first-of-type]:pis-2"
+    "[&>.indent:first-of-type]:pl-2"
   ],
   [
     5,
-    "[&>.indent:first-of-type]:pis-3"
+    "[&>.indent:first-of-type]:pl-3"
   ],
   [
     6,
-    "[&>.indent:first-of-type]:pis-4"
+    "[&>.indent:first-of-type]:pl-4"
   ],
   [
     7,
-    "[&>.indent:first-of-type]:pis-5"
+    "[&>.indent:first-of-type]:pl-5"
   ],
   [
     8,
-    "[&>.indent:first-of-type]:pis-6"
+    "[&>.indent:first-of-type]:pl-6"
   ]
 ]);
 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,
@@ -3139,15 +1101,67 @@ var treegridTheme = {
   cell: treegridCell
 };
 
-// src/styles/theme.ts
-import { get } from "@dxos/util";
+// src/theme/primitives/column.ts
+var columnRoot = (_, ...etc) => {
+  return mx("dx-column 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,
+  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
+  "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]", "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,
+  content: panelContent,
+  statusbar: panelStatusbar
+};
+
+// src/theme/theme.ts
+import { getDeep } from "@dxos/util";
 var defaultTheme = {
   themeName: () => "default",
-  anchoredOverflow: anchoredOverflowTheme,
+  //
+  // Primitives
+  //
+  column: columnTheme,
+  panel: panelTheme,
+  //
+  // Components
+  //
   avatar: avatarTheme,
   breadcrumb: breadcrumbTheme,
   button: buttonTheme,
+  card: cardTheme,
   dialog: dialogTheme,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,
@@ -3157,9 +1171,11 @@ var defaultTheme = {
   message: messageTheme,
   menu: menuTheme,
   popover: popoverTheme,
-  select: selectTheme,
   scrollArea: scrollAreaTheme,
+  select: selectTheme,
   separator: separatorTheme,
+  skeleton: skeletonTheme,
+  splitter: splitterTheme,
   status: statusTheme,
   tag: tagTheme,
   toast: toastTheme,
@@ -3168,23 +1184,13 @@ var defaultTheme = {
   treegrid: treegridTheme
 };
 var bindTheme = (theme) => {
-  return (path, defaultClassName, styleProps, ...options) => {
-    const result = get(theme, path);
-    return typeof result === "function" ? result(styleProps, ...options) : defaultClassName;
+  return (path, styleProps, ...etc) => {
+    const result = getDeep(theme, path.split("."));
+    return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
   };
 };
 var defaultTx = bindTheme(defaultTheme);
-
-// src/index.ts
-var tokens = tailwindConfig({}).theme;
-var osTranslations = "dxos.org/i18n/os";
 export {
-  accentSurface,
-  activeSurface,
-  anchoredOverflowAnchor,
-  anchoredOverflowRoot,
-  anchoredOverflowTheme,
-  attentionSurface,
   avatarDescription,
   avatarFallbackText,
   avatarFrame,
@@ -3196,104 +1202,68 @@ export {
   avatarRoot,
   avatarStatusIcon,
   avatarTheme,
-  baseSurface,
   bindTheme,
-  blockSeparator,
   bottombarBlockPaddingEnd,
-  bounceLayout,
   breadcrumbCurrent,
   breadcrumbList,
   breadcrumbListItem,
   breadcrumbRoot,
   breadcrumbSeparator,
   breadcrumbTheme,
-  buttonGroup,
-  buttonRoot,
   buttonTheme,
   cardDefaultInlineSize,
+  cardMaxBlockSize,
   cardMaxInlineSize,
+  cardMinBlockSize,
   cardMinInlineSize,
-  chromeText,
+  cardTheme,
   coarseBlockSize,
-  coarseButtonDimensions,
-  coarseButtonPadding,
   coarseDimensions,
-  coarseTextPadding,
-  computeSize,
-  contentShadow,
+  columnTheme,
+  composable,
+  composableProps,
   dataDisabled,
   defaultButtonColors,
   defaultTheme,
   defaultTx,
   densityBlockSize,
   descriptionMessage,
-  descriptionText,
   descriptionTextPrimary,
+  dialogActionBar,
+  dialogBody,
   dialogContent,
   dialogDescription,
   dialogHeader,
   dialogOverlay,
   dialogTheme,
   dialogTitle,
-  dropRing,
-  dropRingInner,
-  errorInputValence,
-  errorMessageColors,
-  errorText,
   fineBlockSize,
-  fineButtonDimensions,
-  fineButtonPadding,
   fineDimensions,
-  fineTextPadding,
-  fixedInsetFlexLayout,
-  focusRing,
+  focusTheme,
   getHashHue,
   getHashStyles,
+  getHeight,
   getSize,
-  getSizeHeight,
-  getSizeWidth,
   getStyles,
+  getWidth,
   ghostButtonColors,
   ghostFocusWithin,
-  ghostHighlighted,
   ghostHover,
-  ghostSelected,
-  ghostSelectedContainerMd,
-  ghostSelectedCurrent,
-  ghostSelectedTrackingInterFromNormal,
-  group,
-  groupBorder,
   groupHoverControlItemWithTransition,
-  hoverColors,
   hoverableControlItem,
-  hoverableControlItemTransition,
   hoverableControls,
-  hoverableFocusedControls,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
   hoverableOpenControlItem,
+  hueShades,
   hues,
   iconButtonRoot,
   iconButtonTheme,
   iconRoot,
+  iconSize,
   iconTheme,
-  infoInputValence,
-  infoMessageColors,
-  infoText,
-  inlineSeparator,
-  inputCheckbox,
-  inputCheckboxIndicator,
-  inputDescription,
-  inputDescriptionAndValidation,
-  inputInput,
-  inputLabel,
-  inputSwitch,
-  inputSwitchThumb,
   inputTextLabel,
   inputTheme,
-  inputValence,
-  inputValidation,
-  inputWithSegmentsInput,
   linkRoot,
   linkTheme,
   listItem,
@@ -3305,7 +1275,6 @@ export {
   listRoot,
   listTheme,
   mainContent,
-  mainDrawer,
   mainIntrinsicSize,
   mainOverlay,
   mainPadding,
@@ -3320,29 +1289,26 @@ export {
   menuTheme,
   menuViewport,
   messageContent,
+  messageHeader,
   messageIcon,
   messageRoot,
   messageTheme,
   messageTitle,
   messageValence,
-  modalSurface,
   mx,
-  neutralInputValence,
-  neutralMessageColors,
   osTranslations,
-  placeholderText,
+  palette,
+  panelTheme,
   popoverArrow,
   popoverContent,
   popoverTheme,
   popoverViewport,
-  popperMotion,
   primaryButtonColors,
-  scrollAreaCorner,
+  roles,
   scrollAreaRoot,
-  scrollAreaScrollbar,
   scrollAreaTheme,
-  scrollAreaThumb,
   scrollAreaViewport,
+  scrollbar,
   selectArrow,
   selectContent,
   selectItem,
@@ -3351,38 +1317,26 @@ export {
   selectSeparator,
   selectTheme,
   selectViewport,
-  separatorBorderColor,
   separatorRoot,
   separatorTheme,
-  shimmer,
-  sidebarBorder,
-  sidebarSurface,
-  sizeHeightMap,
+  sizeToRem,
   sizeValue,
-  sizeWidthMap,
+  skeletonRoot,
+  skeletonTheme,
+  slottable,
+  snapSize,
+  splitterTheme,
   staticDefaultButtonColors,
   staticDisabled,
-  staticFocusRing,
-  staticGhostSelected,
-  staticGhostSelectedCurrent,
-  staticHoverableControls,
-  staticPlaceholderText,
   statusBar,
   statusRoot,
   statusTheme,
-  strongShimmer,
-  styles,
-  subduedFocus,
-  subduedSeparatorBorderColor,
   subtleHover,
-  successInputValence,
-  successMessageColors,
-  successText,
   surfaceShadow,
   surfaceZIndex,
   tagRoot,
   tagTheme,
-  textBlockWidth,
+  textValence,
   toastActions,
   toastBody,
   toastDescription,
@@ -3390,11 +1344,9 @@ export {
   toastTheme,
   toastTitle,
   toastViewport,
-  tokens,
-  toolbarInactive,
-  toolbarInner,
   toolbarLayout,
   toolbarRoot,
+  toolbarText,
   toolbarTheme,
   tooltipArrow,
   tooltipContent,
@@ -3403,11 +1355,6 @@ export {
   treegridCell,
   treegridRoot,
   treegridRow,
-  treegridTheme,
-  userDefaultTokenSet,
-  valenceColorText,
-  warningInputValence,
-  warningMessageColors,
-  warningText
+  treegridTheme
 };
 //# sourceMappingURL=index.mjs.map