@xenosystem/components 0.7.0 → 0.8.0

package/dist/chrome/index.js

@@ -0,0 +1,1917 @@
+// src/chrome/classes.ts
+var CLS_PANEL = "xeno-panel";
+var CLS_PANEL_HEADER = "xeno-panel-header";
+var CLS_PANEL_TITLE = "xeno-panel-title";
+var CLS_PANEL_CONTENT = "xeno-panel-content";
+var CLS_PANEL_CONTENT_NO_HEADER = "xeno-panel-content--no-header";
+var CLS_TOOLBAR = "xeno-toolbar";
+var CLS_TOOLBAR_GROUP = "xeno-toolbar-group";
+var CLS_STATUSBAR = "xeno-statusbar";
+var CLS_DIVIDER = "xeno-divider";
+var CLS_SECTION = "xeno-section";
+var CLS_SECTION_HEADER = "xeno-section-header";
+var CLS_SECTION_TRIGGER = "xeno-section-trigger";
+var CLS_SECTION_CHEVRON = "xeno-section-chevron";
+var CLS_SECTION_TITLE = "xeno-section-title";
+var CLS_SECTION_ACTIONS = "xeno-section-actions";
+var CLS_SECTION_BODY = "xeno-section-body";
+var CLS_ROWLIST = "xeno-rowlist";
+var CLS_ROW = "xeno-row";
+var CLS_ROW_ICON = "xeno-row-icon";
+var CLS_ROW_LABEL = "xeno-row-label";
+var CLS_ROW_META = "xeno-row-meta";
+var CLS_ROW_TRAILING = "xeno-row-trailing";
+var CLS_ICON_BUTTON = "xeno-iconbtn";
+var CLS_TEXT_BUTTON = "xeno-textbtn";
+var CLS_SEARCH = "xeno-search";
+var CLS_SEARCH_INPUT = "xeno-search-input";
+var CLS_SEGMENTED = "xeno-segmented";
+var CLS_SEGMENT = "xeno-segment";
+var CLS_TOGGLE = "xeno-toggle";
+var CLS_TOGGLE_KNOB = "xeno-toggle-knob";
+var CLS_FIELD_GROUP = "xeno-fieldgroup";
+var CLS_FIELD = "xeno-field";
+var CLS_FIELD_LABEL = "xeno-field-label";
+var CLS_FIELD_CONTROL = "xeno-field-control";
+var CLS_FIELD_HINT = "xeno-field-hint";
+var CLS_EMPTY = "xeno-empty";
+var CLS_LOADING = "xeno-loading";
+var CLS_ERROR = "xeno-error";
+var CLS_STATE = "xeno-state";
+var CLS_STATE_ICON = "xeno-state-icon";
+var CLS_STATE_TITLE = "xeno-state-title";
+var CLS_STATE_HINT = "xeno-state-hint";
+var CLS_STATE_PROGRESS = "xeno-state-progress";
+var CLS_BADGE = "xeno-badge";
+var CLS_DOT = "xeno-dot";
+var CLS_ICON_FRAME = "xeno-iconframe";
+var CLS_STAT = "xeno-stat";
+var CLS_STAT_LABEL = "xeno-stat-label";
+var CLS_STAT_VALUE = "xeno-stat-value";
+var CLS_STAT_SUB = "xeno-stat-sub";
+var CLS_BAR = "xeno-bar";
+var CLS_BAR_SEGMENT = "xeno-bar-segment";
+var CLS_SCROLL = "xeno-scroll";
+var PANEL_TONES = Object.freeze([
+  "neutral",
+  "info",
+  "success",
+  "warning",
+  "error"
+]);
+function cx(...parts) {
+  let out = "";
+  for (const p of parts) {
+    if (!p) continue;
+    out = out === "" ? p : `${out} ${p}`;
+  }
+  return out;
+}
+function rowClass(state = {}, extra) {
+  return cx(
+    CLS_ROW,
+    state.interactive !== false && `${CLS_ROW}--interactive`,
+    state.selected && `${CLS_ROW}--selected`,
+    state.active && `${CLS_ROW}--active`,
+    state.disabled && `${CLS_ROW}--disabled`,
+    extra
+  );
+}
+function badgeClass(tone = "neutral", extra) {
+  return cx(CLS_BADGE, tone !== "neutral" && `${CLS_BADGE}--${tone}`, extra);
+}
+function dotClass(tone = "neutral", extra) {
+  return cx(CLS_DOT, tone !== "neutral" && `${CLS_DOT}--${tone}`, extra);
+}
+function sectionClass(collapsed = false, extra) {
+  return cx(CLS_SECTION, collapsed && `${CLS_SECTION}--collapsed`, extra);
+}
+function iconButtonClass(state = {}, extra) {
+  return cx(
+    CLS_ICON_BUTTON,
+    state.active && `${CLS_ICON_BUTTON}--active`,
+    state.disabled && `${CLS_ICON_BUTTON}--disabled`,
+    extra
+  );
+}
+
+// src/chrome/useInject.ts
+import { useState } from "react";
+
+// src/chrome/tokens.ts
+var PANEL_METRICS = Object.freeze({
+  /**
+   * Dense list row height.
+   *
+   * Census: history 22, layers 24, inspector 20 (as `min-height`). 22 is the median and the value
+   * of the densest *scrolling* list. Override per-list with `--xeno-row-h` — layers can keep 24
+   * without forking the primitive.
+   */
+  rowHeight: 22,
+  /** Indent per tree depth level. Census: layers 10 (the only implementation). */
+  rowIndent: 10,
+  /** Gap between a row's slots. Census: layers 4, inspector 4, history 5. */
+  rowGap: 4,
+  /** Fixed width of a row's leading icon slot — this is what keeps labels in ONE column. */
+  rowIconSlot: 14,
+  /** Horizontal padding inside panel chrome. Census: `0 6px` / `4px 6px`, 6px in 5/5 packages. */
+  gutter: 6,
+  /** Vertical padding of a header/toolbar strip. Census: `4px 6px` in 4/5 packages. */
+  stripPadY: 4,
+  /**
+   * Minimum height of a toolbar strip. Not set by any panel today (all are content-sized); 26 is
+   * what `4 + 18 + 4` already produces, pinned so toolbars align across panels.
+   */
+  toolbarMinHeight: 26,
+  /** Footer / status strip padding-y. Census: `2px 6px`, identical in layers + history. */
+  footerPadY: 2,
+  /** Section header height. Census: inspector 20 (the only real section header in the catalog). */
+  sectionHeaderHeight: 20,
+  /**
+   * Dense control height (inputs, segmented control, toolbar buttons).
+   *
+   * Census: inspector 18, history 18, transport 18, layers 20. **This is BELOW `DESIGN_SYSTEM.md`
+   * §3.1's 24px "compact" floor** — see {@link PANEL_METRICS.controlHeight}. 20 is the largest value
+   * any shipped panel uses, so adopting the primitives never makes a panel denser than it is today.
+   */
+  controlHeightSm: 20,
+  /** Standard control height — the DESIGN_SYSTEM §3.1 "compact controls" value. Use in panel bodies. */
+  controlHeight: 24,
+  /** In-row icon button. Census: inspector 14, layers 14, history 16. 14 is below a usable hit target. */
+  iconButtonSm: 16,
+  /** Toolbar icon button. Census: transport 20×18, color 22. */
+  iconButton: 20,
+  /** Icon glyph inside a `sm` button. Census: 11 is the most common glyph size across four packages. */
+  iconGlyphSm: 11,
+  /** Icon glyph inside an `md` button. Census: layers + transport primary use 12. */
+  iconGlyph: 12,
+  /** Badge height. Census: inspector + history byte-identical at 12. */
+  badgeHeight: 12,
+  /** Standard badge height — the `DESIGN_SYSTEM.md` §7 "Status Badges / Pills" value. */
+  badgeHeightMd: 18,
+  /** Square status dot edge. Never a circle (DESIGN_SYSTEM §3). */
+  dotSize: 6,
+  /** Shared label-column width in a `FieldGroup`. Census: inspector's configurable default is 56. */
+  fieldLabelWidth: 56,
+  /** Base corner radius. Census: `border-radius: 2` appears 38 times across 5/5 packages. */
+  radius: 2,
+  /** Outer-container radius (frames, cards). DESIGN_SYSTEM §7 "small radius". */
+  radiusMd: 6,
+  /** Micro text — badges, units. */
+  fontMicro: 8,
+  /** Label text — uppercase section/panel labels, footers. */
+  fontLabel: 9,
+  /** Secondary text — metadata, empty-state titles. */
+  fontMeta: 10,
+  /** Body text — the default panel size. */
+  fontBody: 11
+});
+var PANEL_COLORS = Object.freeze({
+  /** Row hover fill. DESIGN_SYSTEM §2 `rowHover`. **No shipped panel has a hover state at all.** */
+  rowHover: "rgba(255,255,255,0.05)",
+  /** Row selected fill. Census: byte-identical in layers + history. */
+  rowSelected: "rgba(255,255,255,0.10)",
+  /** Active/focus ring. Census: byte-identical `inset 0 0 0 1px` in layers + history. */
+  ring: "rgba(255,255,255,0.15)",
+  /** Keyboard focus outline. DESIGN_SYSTEM §11. **No shipped panel has one.** */
+  focus: "rgba(255,255,255,0.25)",
+  /** Recessed well fill for inputs. Census: 4/5 packages. */
+  well: "rgba(0,0,0,0.3)",
+  /** Hairline border. */
+  border: "rgba(255,255,255,0.08)",
+  /** Soft raised fill — chips, ghost buttons. Census: 5/5 packages. */
+  soft: "rgba(255,255,255,0.06)",
+  /** Section-header wash. Census: inspector. */
+  wash: "rgba(255,255,255,0.03)",
+  /** Solid status red (indicators). DESIGN_SYSTEM §2 `error`. */
+  error: "#ef4444",
+  /** Status red for TEXT. DESIGN_SYSTEM §2 `error.text`. */
+  errorText: "rgba(239,68,68,0.65)",
+  /** Status amber for text. */
+  warningText: "rgba(245,158,11,0.65)",
+  /** Status green for text. */
+  successText: "#5a9a6a",
+  /** Info blue-gray for text (the dimmest permitted chroma). */
+  infoText: "#7aa2c4"
+});
+var PANEL_DISABLED_OPACITY = 0.35;
+
+// src/chrome/css.ts
+var FG = "var(--panel-fg, var(--xeno-text-body, #e5e5e9))";
+var MUTED = "var(--panel-muted, var(--xeno-text-muted, #79797f))";
+var DIM = "var(--panel-dim, var(--xeno-text-dim, #57575e))";
+var BG = "var(--panel-bg, var(--xeno-canvas-bg, #111111))";
+var HEADER = "var(--panel-header, var(--xeno-panel-header, #1a1a1a))";
+var BORDER = `var(--panel-border, var(--xeno-border, ${PANEL_COLORS.border}))`;
+var PAGE = "var(--xeno-page-bg, #08080a)";
+var GAP = "var(--xeno-panel-gap, 3px)";
+var RADIUS = `var(--xeno-panel-radius, ${PANEL_METRICS.radiusMd}px)`;
+var ROW_H = `var(--xeno-row-h, ${PANEL_METRICS.rowHeight}px)`;
+var CTRL_H = `var(--xeno-control-h, ${PANEL_METRICS.controlHeightSm}px)`;
+var LABEL_W = `var(--xeno-field-label-w, ${PANEL_METRICS.fieldLabelWidth}px)`;
+var PANEL_PRIMITIVES_CSS = `
+/* ================================================================== */
+/*  @xenosystem/workbench/primitives \u2014 canonical panel chrome                */
+/*  Lifted from xeno-workflow (frame contract) + xeno-post (kit).      */
+/*  Aligned to DESIGN_SYSTEM.md. Generated from PANEL_METRICS.         */
+/* ================================================================== */
+
+/* \u2500\u2500\u2500 1. Frame \u2014 xeno-workflow's contract, class names verbatim \u2500\u2500\u2500 */
+
+.xeno-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-radius: ${RADIUS};
+  overflow: hidden;
+  background: transparent;
+  isolation: isolate;
+  color: ${FG};
+  font-size: ${PANEL_METRICS.fontBody}px;
+}
+.xeno-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: ${PAGE};
+  z-index: 0;
+  border-radius: ${RADIUS};
+}
+.xeno-panel-header {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.gutter}px;
+  height: ${PANEL_METRICS.toolbarMinHeight - 2}px;
+  flex-shrink: 0;
+  padding: 0 ${PANEL_METRICS.gutter}px;
+  background: var(--xeno-tab-bar, #272727);
+  border-radius: calc(${RADIUS} - 2px) calc(${RADIUS} - 2px) 0 0;
+  margin: ${GAP} ${GAP} 0;
+  overflow: hidden;
+}
+.xeno-panel-title {
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: ${FG};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.xeno-panel-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  background: ${BG};
+  margin: 2px ${GAP} ${GAP};
+  border-radius: 0 0 calc(${RADIUS} - 2px) calc(${RADIUS} - 2px);
+  overflow: hidden;
+}
+.xeno-panel-content--no-header {
+  margin-top: ${GAP};
+  border-radius: calc(${RADIUS} - 2px);
+}
+
+/* \u2500\u2500\u2500 2. Strips: toolbar, status bar, divider, scroll \u2500\u2500\u2500 */
+
+.xeno-toolbar {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.gutter}px;
+  flex: 0 0 auto;
+  min-height: ${PANEL_METRICS.toolbarMinHeight}px;
+  padding: ${PANEL_METRICS.stripPadY}px ${PANEL_METRICS.gutter}px;
+  box-sizing: border-box;
+  background: ${HEADER};
+  border-bottom: 1px solid ${BORDER};
+  color: ${FG};
+  font-size: ${PANEL_METRICS.fontBody}px;
+  user-select: none;
+}
+.xeno-toolbar--flush {
+  border-bottom: none;
+}
+.xeno-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  min-width: 0;
+}
+.xeno-toolbar-group--end {
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.xeno-statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex: 0 0 auto;
+  padding: ${PANEL_METRICS.footerPadY}px ${PANEL_METRICS.gutter}px;
+  background: ${HEADER};
+  color: ${MUTED};
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+.xeno-divider {
+  flex: 0 0 auto;
+  background: ${BORDER};
+  height: 1px;
+  width: 100%;
+}
+.xeno-divider--vertical {
+  width: 1px;
+  height: 12px;
+  align-self: center;
+}
+
+.xeno-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: none;
+}
+.xeno-scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.xeno-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.xeno-scroll::-webkit-scrollbar-thumb {
+  background: #3a3a3d;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  border-radius: ${PANEL_METRICS.radius}px;
+}
+.xeno-scroll::-webkit-scrollbar-thumb:hover {
+  background: #555555;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+
+/* \u2500\u2500\u2500 3. Section \u2500\u2500\u2500 */
+
+.xeno-section {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+.xeno-section-header {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  height: ${PANEL_METRICS.sectionHeaderHeight}px;
+  flex: 0 0 auto;
+  padding: 0 ${PANEL_METRICS.gutter}px;
+  background: ${PANEL_COLORS.wash};
+  user-select: none;
+}
+.xeno-section-trigger {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+/* A non-collapsible header renders a <div> with this class, not a disabled button. */
+div.xeno-section-trigger {
+  cursor: default;
+}
+.xeno-section-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  flex: 0 0 auto;
+  color: ${MUTED};
+  transform: rotate(90deg);
+  transition: transform 80ms ease;
+}
+.xeno-section--collapsed .xeno-section-chevron {
+  transform: rotate(0deg);
+}
+.xeno-section-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${MUTED};
+}
+.xeno-section-actions {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  flex: 0 0 auto;
+}
+.xeno-section-body {
+  padding: 3px 0;
+  min-width: 0;
+}
+.xeno-section-body--off {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  pointer-events: none;
+}
+.xeno-section-body--flush {
+  padding: 0;
+}
+.xeno-section--collapsed .xeno-section-body {
+  display: none;
+}
+
+/* \u2500\u2500\u2500 4. Rows \u2500\u2500\u2500 */
+
+.xeno-rowlist {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.xeno-rowlist--divided .xeno-row {
+  border-bottom: 1px solid ${BORDER};
+}
+
+.xeno-row {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  height: ${ROW_H};
+  flex: 0 0 auto;
+  padding: 0 ${PANEL_METRICS.gutter}px;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+  color: ${FG};
+  font-size: ${PANEL_METRICS.fontBody}px;
+  background: transparent;
+  user-select: none;
+  transition: background-color 80ms ease;
+}
+.xeno-row--interactive {
+  cursor: pointer;
+}
+.xeno-row--interactive:hover {
+  background: ${PANEL_COLORS.rowHover};
+}
+.xeno-row--selected {
+  background: ${PANEL_COLORS.rowSelected};
+}
+.xeno-row--selected:hover {
+  background: ${PANEL_COLORS.rowSelected};
+}
+.xeno-row--active {
+  box-shadow: inset 0 0 0 1px ${PANEL_COLORS.ring};
+}
+.xeno-row--disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+}
+.xeno-row--disabled:hover {
+  background: transparent;
+}
+.xeno-row:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: -1px;
+}
+.xeno-row-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${PANEL_METRICS.rowIconSlot}px;
+  height: ${PANEL_METRICS.rowIconSlot}px;
+  flex: 0 0 auto;
+  opacity: 0.8;
+}
+.xeno-row-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.xeno-row-meta {
+  flex: 0 0 auto;
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  color: ${MUTED};
+  font-variant-numeric: tabular-nums;
+}
+.xeno-row-trailing {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+/* \u2500\u2500\u2500 5. Controls \u2500\u2500\u2500 */
+
+.xeno-iconbtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0;
+  border: none;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: background-color 80ms ease, opacity 80ms ease;
+}
+.xeno-iconbtn--sm {
+  width: ${PANEL_METRICS.iconButtonSm}px;
+  height: ${PANEL_METRICS.iconButtonSm}px;
+}
+.xeno-iconbtn--md {
+  width: ${PANEL_METRICS.iconButton}px;
+  height: ${PANEL_METRICS.iconButton}px;
+}
+.xeno-iconbtn--sm svg {
+  width: ${PANEL_METRICS.iconGlyphSm}px;
+  height: ${PANEL_METRICS.iconGlyphSm}px;
+}
+.xeno-iconbtn--md svg {
+  width: ${PANEL_METRICS.iconGlyph}px;
+  height: ${PANEL_METRICS.iconGlyph}px;
+}
+.xeno-iconbtn:hover {
+  background: ${PANEL_COLORS.soft};
+  opacity: 1;
+}
+.xeno-iconbtn--active {
+  background: ${PANEL_COLORS.rowSelected};
+  opacity: 1;
+}
+.xeno-iconbtn:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: 1px;
+}
+.xeno-iconbtn[disabled] {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.xeno-textbtn {
+  flex: 0 0 auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: ${MUTED};
+  font: inherit;
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  text-align: left;
+  cursor: pointer;
+  transition: color 80ms ease;
+}
+.xeno-textbtn:hover {
+  color: ${FG};
+}
+.xeno-textbtn--strong {
+  color: ${FG};
+}
+.xeno-textbtn:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: 1px;
+}
+.xeno-textbtn[disabled] {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+  color: ${MUTED};
+}
+
+.xeno-search {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: ${CTRL_H};
+  box-sizing: border-box;
+  padding: 0 ${PANEL_METRICS.gutter}px;
+  background: ${PANEL_COLORS.well};
+  border: 1px solid ${BORDER};
+  border-radius: ${PANEL_METRICS.radius}px;
+  color: ${FG};
+  transition: border-color 80ms ease;
+}
+.xeno-search:focus-within {
+  border-color: ${PANEL_COLORS.ring};
+}
+.xeno-search--disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+}
+.xeno-search-glyph {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: ${MUTED};
+}
+.xeno-search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: ${PANEL_METRICS.fontBody}px;
+  outline: none;
+  cursor: text;
+}
+.xeno-search-input::placeholder {
+  color: ${DIM};
+}
+.xeno-search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: transparent;
+  color: ${MUTED};
+  cursor: pointer;
+}
+.xeno-search-clear:hover {
+  color: ${FG};
+  background: ${PANEL_COLORS.soft};
+}
+
+.xeno-segmented {
+  display: inline-flex;
+  align-items: stretch;
+  flex: 0 0 auto;
+  gap: 1px;
+  padding: 1px;
+  background: ${PANEL_COLORS.soft};
+  border-radius: ${PANEL_METRICS.radius}px;
+  box-sizing: border-box;
+}
+.xeno-segmented--sm {
+  height: ${PANEL_METRICS.iconButtonSm + 2}px;
+}
+.xeno-segmented--md {
+  height: ${CTRL_H};
+}
+.xeno-segmented--stretch {
+  display: flex;
+  width: 100%;
+}
+.xeno-segmented--stretch .xeno-segment {
+  flex: 1 1 0;
+}
+.xeno-segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border: none;
+  border-radius: 1px;
+  background: transparent;
+  color: ${MUTED};
+  font: inherit;
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 80ms ease, color 80ms ease;
+  white-space: nowrap;
+}
+.xeno-segment:hover {
+  color: ${FG};
+}
+.xeno-segment--checked {
+  background: ${PANEL_COLORS.rowSelected};
+  color: ${FG};
+}
+.xeno-segment:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: -1px;
+}
+.xeno-segment[disabled] {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+}
+
+.xeno-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 0;
+  border: none;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: ${PANEL_COLORS.soft};
+  cursor: pointer;
+  transition: background-color 80ms ease;
+}
+.xeno-toggle--sm {
+  width: 16px;
+  height: 10px;
+}
+.xeno-toggle--md {
+  width: 22px;
+  height: 12px;
+}
+.xeno-toggle--on {
+  background: rgba(255, 255, 255, 0.25);
+}
+.xeno-toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background: ${MUTED};
+  border-radius: 1px;
+  transition: transform 80ms ease, border-radius 80ms ease, background-color 80ms ease;
+}
+.xeno-toggle--sm .xeno-toggle-knob {
+  width: 6px;
+  height: 6px;
+}
+.xeno-toggle--md .xeno-toggle-knob {
+  width: 8px;
+  height: 8px;
+}
+.xeno-toggle--on .xeno-toggle-knob {
+  background: ${FG};
+  border-radius: ${PANEL_METRICS.radius}px;
+}
+.xeno-toggle--sm.xeno-toggle--on .xeno-toggle-knob {
+  transform: translateX(6px);
+}
+.xeno-toggle--md.xeno-toggle--on .xeno-toggle-knob {
+  transform: translateX(10px);
+}
+.xeno-toggle:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: 1px;
+}
+/* Both layers, per DESIGN_SYSTEM \xA73.1 "Cursors \u2014 two layers, both required": the modifier class
+   for callers that style a wrapper, and the attribute selector for the real disabled control. */
+.xeno-toggle--disabled,
+.xeno-toggle[disabled] {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+}
+
+/* \u2500\u2500\u2500 6. Fields \u2500\u2500\u2500 */
+
+.xeno-fieldgroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.xeno-field {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  flex-wrap: wrap;
+  min-height: ${PANEL_METRICS.sectionHeaderHeight}px;
+  padding: 1px ${PANEL_METRICS.gutter}px;
+  box-sizing: border-box;
+  min-width: 0;
+}
+.xeno-field-label {
+  flex: 0 0 auto;
+  width: ${LABEL_W};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  color: ${MUTED};
+  user-select: none;
+  cursor: default;
+}
+.xeno-field-control {
+  display: flex;
+  align-items: center;
+  gap: ${PANEL_METRICS.rowGap}px;
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: flex-end;
+}
+.xeno-field-hint {
+  flex: 1 1 100%;
+  padding-left: ${LABEL_W};
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  color: ${DIM};
+}
+.xeno-field--stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+.xeno-field--stacked .xeno-field-label {
+  width: auto;
+}
+.xeno-field--stacked .xeno-field-control {
+  justify-content: flex-start;
+}
+.xeno-field--stacked .xeno-field-hint {
+  padding-left: 0;
+}
+
+/* \u2500\u2500\u2500 7. States \u2500\u2500\u2500 */
+
+.xeno-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px;
+  text-align: center;
+  min-width: 0;
+}
+.xeno-state-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid ${BORDER};
+  border-radius: ${PANEL_METRICS.radius}px;
+  color: ${MUTED};
+}
+.xeno-empty,
+.xeno-loading {
+  user-select: none;
+}
+.xeno-state-title {
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  opacity: 0.4;
+  color: ${FG};
+}
+.xeno-state-hint {
+  max-width: 28ch;
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  line-height: 1.45;
+  color: ${MUTED};
+}
+.xeno-error .xeno-state-title {
+  opacity: 1;
+  color: ${PANEL_COLORS.errorText};
+}
+.xeno-state-progress {
+  position: relative;
+  width: 64px;
+  height: 2px;
+  border-radius: 1px;
+  background: ${PANEL_COLORS.soft};
+  overflow: hidden;
+}
+.xeno-state-progress::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 1px;
+  animation: xeno-indeterminate 1100ms ease-in-out infinite;
+}
+@keyframes xeno-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+@keyframes xeno-spin {
+  to { transform: rotate(360deg); }
+}
+.xeno-spin {
+  animation: xeno-spin 900ms linear infinite;
+}
+
+/* \u2500\u2500\u2500 8. Indicators \u2500\u2500\u2500 */
+
+.xeno-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex: 0 0 auto;
+  height: ${PANEL_METRICS.badgeHeight}px;
+  line-height: ${PANEL_METRICS.badgeHeight}px;
+  padding: 0 3px;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: ${BORDER};
+  color: ${MUTED};
+  font-size: ${PANEL_METRICS.fontMicro}px;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  user-select: none;
+}
+.xeno-badge--md {
+  height: ${PANEL_METRICS.badgeHeightMd}px;
+  line-height: ${PANEL_METRICS.badgeHeightMd}px;
+  padding: 0 5px;
+  font-size: ${PANEL_METRICS.fontMeta}px;
+}
+.xeno-badge--info { color: ${PANEL_COLORS.infoText}; }
+.xeno-badge--success { color: ${PANEL_COLORS.successText}; }
+.xeno-badge--warning { color: ${PANEL_COLORS.warningText}; }
+.xeno-badge--error { color: ${PANEL_COLORS.errorText}; }
+
+.xeno-dot {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: ${PANEL_METRICS.dotSize}px;
+  height: ${PANEL_METRICS.dotSize}px;
+  border-radius: 1px;
+  background: ${MUTED};
+}
+.xeno-dot--info { background: ${PANEL_COLORS.infoText}; }
+.xeno-dot--success { background: ${PANEL_COLORS.successText}; }
+.xeno-dot--warning { background: ${PANEL_COLORS.warningText}; }
+.xeno-dot--error { background: ${PANEL_COLORS.error}; }
+
+.xeno-iconframe {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  border: 1px solid ${BORDER};
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: rgba(255, 255, 255, 0.02);
+  color: ${FG};
+}
+
+/* \u2500\u2500\u2500 9. Data tiles \u2500\u2500\u2500 */
+
+.xeno-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  padding: ${PANEL_METRICS.gutter}px;
+  border: 1px solid ${BORDER};
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: rgba(0, 0, 0, 0.2);
+}
+.xeno-stat-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${PANEL_METRICS.rowGap}px;
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: ${MUTED};
+}
+.xeno-stat-value {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.1;
+  color: ${FG};
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.xeno-stat-sub {
+  font-size: ${PANEL_METRICS.fontLabel}px;
+  color: ${DIM};
+  font-variant-numeric: tabular-nums;
+}
+
+.xeno-bar {
+  display: flex;
+  width: 100%;
+  height: 6px;
+  border-radius: 1px;
+  background: rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+}
+.xeno-bar-segment {
+  height: 100%;
+  min-width: 0;
+}
+
+/* \u2500\u2500\u2500 10. Reduced motion (DESIGN_SYSTEM \xA711) \u2500\u2500\u2500 */
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-row,
+  .xeno-iconbtn,
+  .xeno-segment,
+  .xeno-toggle,
+  .xeno-toggle-knob,
+  .xeno-search,
+  .xeno-section-chevron {
+    transition: none;
+  }
+  .xeno-state-progress::after,
+  .xeno-spin {
+    animation: none;
+  }
+}
+`;
+
+// src/chrome/inject.ts
+var PANEL_PRIMITIVES_STYLE_ID = "xeno-panel-primitives";
+function ensurePanelPrimitivesInjected(target) {
+  const doc = target ?? globalThis.document ?? void 0;
+  if (!doc || !doc.head) return false;
+  if (doc.getElementById(PANEL_PRIMITIVES_STYLE_ID)) return false;
+  const style = doc.createElement("style");
+  style.id = PANEL_PRIMITIVES_STYLE_ID;
+  style.textContent = PANEL_PRIMITIVES_CSS;
+  doc.head.appendChild(style);
+  return true;
+}
+
+// src/chrome/useInject.ts
+function usePanelPrimitives() {
+  useState(() => {
+    ensurePanelPrimitivesInjected();
+    return null;
+  });
+}
+
+// src/chrome/frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PanelFrame({
+  title,
+  actions,
+  showHeader,
+  children,
+  className,
+  contentClassName
+}) {
+  usePanelPrimitives();
+  const header = showHeader ?? (title != null || actions != null);
+  return /* @__PURE__ */ jsxs("div", { className: cx(CLS_PANEL, className), children: [
+    header ? /* @__PURE__ */ jsxs("div", { className: CLS_PANEL_HEADER, children: [
+      title != null ? /* @__PURE__ */ jsx("span", { className: CLS_PANEL_TITLE, children: title }) : null,
+      actions != null ? /* @__PURE__ */ jsx("div", { className: CLS_TOOLBAR_GROUP, children: actions }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(CLS_PANEL_CONTENT, !header && CLS_PANEL_CONTENT_NO_HEADER, contentClassName),
+        children
+      }
+    )
+  ] });
+}
+function Toolbar({
+  left,
+  right,
+  children,
+  divided = true,
+  className
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs("div", { className: cx(CLS_TOOLBAR, !divided && `${CLS_TOOLBAR}--flush`, className), children: [
+    left != null ? /* @__PURE__ */ jsx("div", { className: CLS_TOOLBAR_GROUP, children: left }) : null,
+    children,
+    right != null ? /* @__PURE__ */ jsx("div", { className: cx(CLS_TOOLBAR_GROUP, `${CLS_TOOLBAR_GROUP}--end`), children: right }) : null
+  ] });
+}
+function ToolbarGroup({ children, end, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(CLS_TOOLBAR_GROUP, end && `${CLS_TOOLBAR_GROUP}--end`, className), children });
+}
+function Divider({ vertical, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cx(CLS_DIVIDER, vertical && `${CLS_DIVIDER}--vertical`, className)
+    }
+  );
+}
+function ScrollArea({ children, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx("div", { className: cx(CLS_SCROLL, className), children });
+}
+
+// src/chrome/section.tsx
+import { useState as useState3 } from "react";
+
+// src/chrome/controls.tsx
+import { useId } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SearchGlyph() {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "m21 21-4.34-4.34" }),
+        /* @__PURE__ */ jsx2("path", { d: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" })
+      ]
+    }
+  );
+}
+function ClearGlyph() {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function ChevronGlyph() {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function IconButton({
+  icon,
+  label,
+  onClick,
+  active,
+  disabled,
+  size = "md",
+  className
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      "aria-pressed": active,
+      disabled,
+      onClick,
+      className: iconButtonClass({ active, disabled }, cx(`${"xeno-iconbtn"}--${size}`, className)),
+      children: icon
+    }
+  );
+}
+function TextButton({
+  children,
+  onClick,
+  disabled,
+  strong,
+  className
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick,
+      className: cx(CLS_TEXT_BUTTON, strong && `${CLS_TEXT_BUTTON}--strong`, className),
+      children
+    }
+  );
+}
+function SearchField({
+  value,
+  onChange,
+  placeholder = "Search\u2026",
+  label,
+  onClear,
+  disabled,
+  autoFocus,
+  className
+}) {
+  usePanelPrimitives();
+  const clear = () => onClear ? onClear() : onChange("");
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && value !== "") {
+      e.preventDefault();
+      e.stopPropagation();
+      clear();
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cx(CLS_SEARCH, disabled && `${CLS_SEARCH}--disabled`, className), children: [
+    /* @__PURE__ */ jsx2("span", { className: `${CLS_SEARCH}-glyph`, children: /* @__PURE__ */ jsx2(SearchGlyph, {}) }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        className: CLS_SEARCH_INPUT,
+        value,
+        placeholder,
+        "aria-label": label ?? placeholder,
+        disabled,
+        autoFocus,
+        spellCheck: false,
+        autoComplete: "off",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown
+      }
+    ),
+    value !== "" && !disabled ? /* @__PURE__ */ jsx2("button", { type: "button", className: `${CLS_SEARCH}-clear`, "aria-label": "Clear", onClick: clear, children: /* @__PURE__ */ jsx2(ClearGlyph, {}) }) : null
+  ] });
+}
+function nextSegmentValue(options, value, delta) {
+  const enabled = options.filter((o) => !o.disabled);
+  if (enabled.length === 0) return value;
+  const at = enabled.findIndex((o) => o.value === value);
+  const from = at < 0 ? 0 : at;
+  const index = ((from + delta) % enabled.length + enabled.length) % enabled.length;
+  return enabled[index]?.value ?? value;
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  label,
+  size = "md",
+  stretch,
+  className
+}) {
+  usePanelPrimitives();
+  const move = (delta) => {
+    const next = nextSegmentValue(options, value, delta);
+    if (next !== value) onChange(next);
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx(
+        CLS_SEGMENTED,
+        `${CLS_SEGMENTED}--${size}`,
+        stretch && `${CLS_SEGMENTED}--stretch`,
+        className
+      ),
+      onKeyDown: (e) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+          e.preventDefault();
+          move(1);
+        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+          e.preventDefault();
+          move(-1);
+        }
+      },
+      children: options.map((o) => {
+        const checked = o.value === value;
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            title: o.title,
+            "aria-label": o.title,
+            disabled: o.disabled,
+            tabIndex: checked ? 0 : -1,
+            className: cx(CLS_SEGMENT, checked && `${CLS_SEGMENT}--checked`),
+            onClick: () => {
+              if (!checked) onChange(o.value);
+            },
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+function Toggle({
+  checked,
+  onChange,
+  label,
+  disabled,
+  size = "md",
+  className
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      title: label,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: cx(
+        CLS_TOGGLE,
+        `${CLS_TOGGLE}--${size}`,
+        checked && `${CLS_TOGGLE}--on`,
+        disabled && `${CLS_TOGGLE}--disabled`,
+        className
+      ),
+      children: /* @__PURE__ */ jsx2("span", { className: CLS_TOGGLE_KNOB })
+    }
+  );
+}
+function FieldGroup({ children, labelWidth, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx(CLS_FIELD_GROUP, className),
+      style: labelWidth ? { "--xeno-field-label-w": `${labelWidth}px` } : void 0,
+      children
+    }
+  );
+}
+function Field({
+  label,
+  children,
+  hint,
+  htmlFor,
+  stacked,
+  className
+}) {
+  usePanelPrimitives();
+  const fallbackId = useId();
+  const hintId = hint != null ? `${fallbackId}-hint` : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: cx(CLS_FIELD, stacked && `${CLS_FIELD}--stacked`, className), children: [
+    /* @__PURE__ */ jsx2("label", { className: CLS_FIELD_LABEL, htmlFor, children: label }),
+    /* @__PURE__ */ jsx2("div", { className: CLS_FIELD_CONTROL, "aria-describedby": hintId, children }),
+    hint != null ? /* @__PURE__ */ jsx2("div", { className: CLS_FIELD_HINT, id: hintId, children: hint }) : null
+  ] });
+}
+
+// src/chrome/section.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Section({
+  title,
+  children,
+  badge,
+  actions,
+  collapsible = true,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  enabled,
+  onEnabledChange,
+  flush,
+  className,
+  bodyClassName
+}) {
+  usePanelPrimitives();
+  const [uncontrolled, setUncontrolled] = useState3(defaultCollapsed);
+  const isCollapsed = collapsible ? collapsed ?? uncontrolled : false;
+  const toggleCollapsed = () => {
+    if (!collapsible) return;
+    const next = !isCollapsed;
+    if (collapsed === void 0) setUncontrolled(next);
+    onCollapsedChange?.(next);
+  };
+  const off = enabled === false;
+  return /* @__PURE__ */ jsxs3("div", { className: sectionClass(isCollapsed, className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: CLS_SECTION_HEADER, children: [
+      collapsible ? /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          className: CLS_SECTION_TRIGGER,
+          "aria-expanded": !isCollapsed,
+          onClick: toggleCollapsed,
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: CLS_SECTION_CHEVRON, children: /* @__PURE__ */ jsx3(ChevronGlyph, {}) }),
+            /* @__PURE__ */ jsx3("span", { className: CLS_SECTION_TITLE, children: title })
+          ]
+        }
+      ) : (
+        // A non-collapsible header is not a DISABLED button — it is not a button at all. A
+        // disabled control in the header would advertise an affordance that does not exist.
+        /* @__PURE__ */ jsx3("div", { className: CLS_SECTION_TRIGGER, children: /* @__PURE__ */ jsx3("span", { className: CLS_SECTION_TITLE, children: title }) })
+      ),
+      badge != null || actions != null || enabled !== void 0 ? /* @__PURE__ */ jsxs3("div", { className: CLS_SECTION_ACTIONS, children: [
+        badge,
+        actions,
+        enabled !== void 0 ? /* @__PURE__ */ jsx3(
+          Toggle,
+          {
+            size: "sm",
+            checked: enabled,
+            onChange: (next) => onEnabledChange?.(next),
+            label: typeof title === "string" ? `Enable ${title}` : "Enable section"
+          }
+        ) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cx(
+          CLS_SECTION_BODY,
+          off && `${CLS_SECTION_BODY}--off`,
+          flush && `${CLS_SECTION_BODY}--flush`,
+          bodyClassName
+        ),
+        "aria-hidden": isCollapsed || void 0,
+        children
+      }
+    )
+  ] });
+}
+
+// src/chrome/rows.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function RowList({
+  children,
+  divided = false,
+  role = "list",
+  className,
+  ...rest
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role,
+      className: cx(CLS_ROWLIST, divided && `${CLS_ROWLIST}--divided`, className),
+      ...rest,
+      children
+    }
+  );
+}
+function Row({
+  icon,
+  label,
+  meta,
+  trailing,
+  children,
+  depth = 0,
+  selected,
+  active,
+  disabled,
+  noIcon,
+  role,
+  className,
+  style,
+  onClick,
+  onKeyDown,
+  ...rest
+}) {
+  usePanelPrimitives();
+  const interactive = onClick != null && !disabled;
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (!interactive || e.defaultPrevented) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick?.(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      role: role ?? (selected !== void 0 ? "option" : "listitem"),
+      "aria-selected": selected,
+      "aria-disabled": disabled || void 0,
+      tabIndex: interactive ? 0 : void 0,
+      className: rowClass({ selected, active, disabled, interactive }, className),
+      style: depth > 0 ? { paddingLeft: depth * PANEL_METRICS.rowIndent, ...style } : style,
+      onClick: disabled ? void 0 : onClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: [
+        noIcon ? null : /* @__PURE__ */ jsx4("span", { className: CLS_ROW_ICON, children: icon }),
+        children ?? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4("span", { className: CLS_ROW_LABEL, children: label }),
+          meta != null ? /* @__PURE__ */ jsx4("span", { className: CLS_ROW_META, children: meta }) : null
+        ] }),
+        trailing != null ? /* @__PURE__ */ jsx4("span", { className: CLS_ROW_TRAILING, children: trailing }) : null
+      ]
+    }
+  );
+}
+
+// src/chrome/states.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function EmptyState({ title, hint, icon, action, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs5("div", { className: cx(CLS_STATE, CLS_EMPTY, className), children: [
+    icon != null ? /* @__PURE__ */ jsx5("span", { className: CLS_STATE_ICON, children: icon }) : null,
+    /* @__PURE__ */ jsx5("div", { className: CLS_STATE_TITLE, children: title }),
+    hint != null ? /* @__PURE__ */ jsx5("div", { className: CLS_STATE_HINT, children: hint }) : null,
+    action
+  ] });
+}
+function LoadingState({ label = "Loading\u2026", className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs5("div", { className: cx(CLS_STATE, CLS_LOADING, className), role: "status", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx5("div", { className: CLS_STATE_PROGRESS }),
+    /* @__PURE__ */ jsx5("div", { className: CLS_STATE_TITLE, children: label })
+  ] });
+}
+function ErrorState({
+  title = "Something went wrong",
+  message,
+  onRetry,
+  retryLabel = "Retry",
+  className
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs5("div", { className: cx(CLS_STATE, CLS_ERROR, className), role: "alert", children: [
+    /* @__PURE__ */ jsx5("div", { className: CLS_STATE_TITLE, children: title }),
+    message != null ? /* @__PURE__ */ jsx5("div", { className: CLS_STATE_HINT, children: message }) : null,
+    onRetry ? /* @__PURE__ */ jsx5(TextButton, { onClick: onRetry, children: retryLabel }) : null
+  ] });
+}
+
+// src/chrome/indicators.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function Badge({
+  children,
+  tone = "neutral",
+  size = "sm",
+  title,
+  className
+}) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx6("span", { title, className: badgeClass(tone, cx(size === "md" && "xeno-badge--md", className)), children });
+}
+function StatusDot({ tone = "neutral", label, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: dotClass(tone, className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true
+    }
+  );
+}
+function StatusBadge({ children, tone = "neutral", className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs6("span", { className: badgeClass(tone, className), children: [
+    /* @__PURE__ */ jsx6(StatusDot, { tone }),
+    children
+  ] });
+}
+function IconFrame({ icon, size = 20, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx6("span", { className: cx(CLS_ICON_FRAME, className), style: { width: size, height: size }, children: icon });
+}
+function StatTile({ label, value, sub, icon, title, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs6("div", { className: cx(CLS_STAT, className), title, children: [
+    /* @__PURE__ */ jsxs6("div", { className: CLS_STAT_LABEL, children: [
+      /* @__PURE__ */ jsx6("span", { children: label }),
+      icon
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: CLS_STAT_VALUE, children: value }),
+    sub != null ? /* @__PURE__ */ jsx6("div", { className: CLS_STAT_SUB, children: sub }) : null
+  ] });
+}
+function ProportionBar({ segments, label, className }) {
+  usePanelPrimitives();
+  const usable = segments.filter((s) => s.value > 0);
+  const total = usable.reduce((sum, s) => sum + s.value, 0);
+  if (total <= 0) return /* @__PURE__ */ jsx6("div", { className: cx(CLS_BAR, className), role: "img", "aria-label": label });
+  const span = Math.max(1, usable.length - 1);
+  return /* @__PURE__ */ jsx6("div", { className: cx(CLS_BAR, className), role: "img", "aria-label": label, children: usable.map((s, i) => /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: CLS_BAR_SEGMENT,
+      title: s.label,
+      style: {
+        width: `${s.value / total * 100}%`,
+        background: `rgba(255,255,255,${s.opacity ?? 0.45 - i / span * 0.33})`
+      }
+    },
+    s.key ?? i
+  )) });
+}
+function StatusBar({ left, right, children, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx6("div", { className: cx(CLS_STATUSBAR, className), children: children ?? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx6("span", { children: left }),
+    /* @__PURE__ */ jsx6("span", { children: right })
+  ] }) });
+}
+function Sparkline({
+  data,
+  width = 56,
+  height = 14,
+  label,
+  title,
+  className
+}) {
+  usePanelPrimitives();
+  const points = data.filter((n) => Number.isFinite(n));
+  if (points.length < 2) {
+    return /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: cx(CLS_BAR, className),
+        style: { width, height, background: "rgba(255,255,255,0.04)" },
+        title,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  const max = Math.max(...points);
+  const min = Math.min(...points);
+  const range = max - min || 1;
+  const path = points.map((v, i) => {
+    const x = i / (points.length - 1) * width;
+    const y = height - (v - min) / range * (height - 2) - 1;
+    return `${x.toFixed(2)},${y.toFixed(2)}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      width,
+      height,
+      className,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      style: { flex: "0 0 auto", overflow: "visible" },
+      children: [
+        title ? /* @__PURE__ */ jsx6("title", { children: title }) : null,
+        /* @__PURE__ */ jsx6(
+          "polyline",
+          {
+            points: path,
+            fill: "none",
+            stroke: "rgba(255,255,255,0.5)",
+            strokeWidth: 1.5,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/chrome/components.ts
+var COMPONENTS = {
+  "chrome/IconButton": IconButton,
+  "chrome/TextButton": TextButton,
+  "chrome/SearchField": SearchField,
+  "chrome/SegmentedControl": SegmentedControl,
+  "chrome/Toggle": Toggle,
+  "chrome/FieldGroup": FieldGroup,
+  "chrome/Field": Field,
+  "chrome/SearchGlyph": SearchGlyph,
+  "chrome/ClearGlyph": ClearGlyph,
+  "chrome/ChevronGlyph": ChevronGlyph,
+  "chrome/PanelFrame": PanelFrame,
+  "chrome/Toolbar": Toolbar,
+  "chrome/ToolbarGroup": ToolbarGroup,
+  "chrome/Divider": Divider,
+  "chrome/ScrollArea": ScrollArea,
+  "chrome/Badge": Badge,
+  "chrome/StatusDot": StatusDot,
+  "chrome/StatusBadge": StatusBadge,
+  "chrome/IconFrame": IconFrame,
+  "chrome/StatTile": StatTile,
+  "chrome/ProportionBar": ProportionBar,
+  "chrome/StatusBar": StatusBar,
+  "chrome/Sparkline": Sparkline,
+  "chrome/RowList": RowList,
+  "chrome/Row": Row,
+  "chrome/Section": Section,
+  "chrome/EmptyState": EmptyState,
+  "chrome/LoadingState": LoadingState,
+  "chrome/ErrorState": ErrorState
+};
+
+// src/chrome/gallery.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var noop = () => void 0;
+var TONES = ["neutral", "info", "success", "warning", "error"];
+var SEGMENTS = [{ value: "all", label: "All" }, { value: "errors", label: "Errors" }, { value: "warnings", label: "Warnings" }];
+function gallery() {
+  const out = [];
+  const form = (unit, state, render) => {
+    out.push({ family: "chrome", unit, state, stage: "form", render });
+  };
+  const door = (unit, state, render) => {
+    out.push({ family: "chrome", unit, state, stage: "door", render });
+  };
+  form("IconButton", "default", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}), label: "Search", onClick: noop }));
+  form("IconButton", "active", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}), label: "Search", onClick: noop, active: true }));
+  form("TextButton", "default", () => /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Clear all" }));
+  form("TextButton", "disabled", () => /* @__PURE__ */ jsx7(TextButton, { onClick: noop, disabled: true, children: "Clear all" }));
+  form("SearchField", "empty", () => /* @__PURE__ */ jsx7(SearchField, { value: "", onChange: noop, placeholder: "Filter rows\u2026", label: "Filter" }));
+  form("SearchField", "filled", () => /* @__PURE__ */ jsx7(SearchField, { value: "render", onChange: noop, placeholder: "Filter rows\u2026", label: "Filter" }));
+  form("SegmentedControl", "first", () => /* @__PURE__ */ jsx7(SegmentedControl, { options: SEGMENTS, value: "all", onChange: noop, label: "Level" }));
+  form("SegmentedControl", "last", () => /* @__PURE__ */ jsx7(SegmentedControl, { options: SEGMENTS, value: "warnings", onChange: noop, label: "Level" }));
+  form("Toggle", "off", () => /* @__PURE__ */ jsx7(Toggle, { checked: false, onChange: noop, label: "Follow output" }));
+  form("Toggle", "on", () => /* @__PURE__ */ jsx7(Toggle, { checked: true, onChange: noop, label: "Follow output" }));
+  form("Toggle", "disabled-on", () => /* @__PURE__ */ jsx7(Toggle, { checked: true, onChange: noop, label: "Follow output", disabled: true }));
+  form("Field", "default", () => /* @__PURE__ */ jsx7(Field, { label: "Name", htmlFor: "chrome-field-name", children: /* @__PURE__ */ jsx7("input", { id: "chrome-field-name", defaultValue: "Untitled" }) }));
+  form("Field", "hint", () => /* @__PURE__ */ jsx7(Field, { label: "Timeout", hint: "Milliseconds; 0 never times out.", htmlFor: "chrome-field-timeout", children: /* @__PURE__ */ jsx7("input", { id: "chrome-field-timeout", defaultValue: "30000" }) }));
+  form("FieldGroup", "default", () => /* @__PURE__ */ jsxs7(FieldGroup, { labelWidth: 96, children: [
+    /* @__PURE__ */ jsx7(Field, { label: "Name", htmlFor: "chrome-fg-name", children: /* @__PURE__ */ jsx7("input", { id: "chrome-fg-name", defaultValue: "Untitled" }) }),
+    /* @__PURE__ */ jsx7(Field, { label: "Kind", htmlFor: "chrome-fg-kind", children: /* @__PURE__ */ jsx7("input", { id: "chrome-fg-kind", defaultValue: "frame" }) })
+  ] }));
+  form("SearchGlyph", "default", () => /* @__PURE__ */ jsx7(SearchGlyph, {}));
+  form("ClearGlyph", "default", () => /* @__PURE__ */ jsx7(ClearGlyph, {}));
+  form("ChevronGlyph", "default", () => /* @__PURE__ */ jsx7(ChevronGlyph, {}));
+  door("PanelFrame", "header", () => /* @__PURE__ */ jsx7(PanelFrame, { title: "Console", actions: /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ClearGlyph, {}), label: "Clear", onClick: noop }), children: /* @__PURE__ */ jsx7("p", { style: { padding: 8 }, children: "Body" }) }));
+  door("PanelFrame", "headless", () => /* @__PURE__ */ jsx7(PanelFrame, { showHeader: false, children: /* @__PURE__ */ jsx7("p", { style: { padding: 8 }, children: "Body" }) }));
+  form("Toolbar", "default", () => /* @__PURE__ */ jsx7(Toolbar, { left: /* @__PURE__ */ jsx7(SegmentedControl, { options: SEGMENTS, value: "all", onChange: noop, label: "Level" }), right: /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ClearGlyph, {}), label: "Clear", onClick: noop }) }));
+  form("ToolbarGroup", "end", () => /* @__PURE__ */ jsx7(Toolbar, { children: /* @__PURE__ */ jsxs7(ToolbarGroup, { end: true, children: [
+    /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Copy" }),
+    /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ClearGlyph, {}), label: "Clear", onClick: noop })
+  ] }) }));
+  form("Divider", "horizontal", () => /* @__PURE__ */ jsx7(Divider, {}));
+  form("Divider", "vertical", () => /* @__PURE__ */ jsxs7("div", { style: { height: 24, display: "flex" }, children: [
+    /* @__PURE__ */ jsx7("span", { children: "a" }),
+    /* @__PURE__ */ jsx7(Divider, { vertical: true }),
+    /* @__PURE__ */ jsx7("span", { children: "b" })
+  ] }));
+  door("ScrollArea", "default", () => /* @__PURE__ */ jsx7(ScrollArea, { children: Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ jsxs7("p", { style: { margin: 4 }, children: [
+    "line ",
+    i + 1
+  ] }, i)) }));
+  form("RowList", "divided", () => /* @__PURE__ */ jsxs7(RowList, { divided: true, children: [
+    /* @__PURE__ */ jsx7(Row, { label: "Background", meta: "raster" }),
+    /* @__PURE__ */ jsx7(Row, { label: "Title", meta: "text", selected: true }),
+    /* @__PURE__ */ jsx7(Row, { label: "Logo", meta: "vector" })
+  ] }));
+  form("Row", "default", () => /* @__PURE__ */ jsx7(Row, { icon: /* @__PURE__ */ jsx7(IconFrame, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}) }), label: "Layer", meta: "raster", trailing: /* @__PURE__ */ jsx7(Badge, { children: "3" }) }));
+  form("Row", "selected", () => /* @__PURE__ */ jsx7(Row, { label: "Layer", meta: "raster", selected: true }));
+  form("Row", "disabled", () => /* @__PURE__ */ jsx7(Row, { label: "Layer", meta: "raster", disabled: true }));
+  form("Section", "default", () => /* @__PURE__ */ jsx7(Section, { title: "Fill", children: /* @__PURE__ */ jsx7("p", { style: { margin: 0 }, children: "Solid \xB7 white" }) }));
+  form("Section", "badge-actions", () => /* @__PURE__ */ jsx7(Section, { title: "Effects", badge: /* @__PURE__ */ jsx7(Badge, { children: "2" }), actions: /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Add" }), children: /* @__PURE__ */ jsx7("p", { style: { margin: 0 }, children: "Drop shadow" }) }));
+  door("EmptyState", "default", () => /* @__PURE__ */ jsx7(EmptyState, { title: "No runs yet", hint: "Trigger a workflow and its runs appear here." }));
+  door("EmptyState", "title-only", () => /* @__PURE__ */ jsx7(EmptyState, { title: "Nothing selected" }));
+  door("LoadingState", "default", () => /* @__PURE__ */ jsx7(LoadingState, { label: "Loading rows\u2026" }));
+  door("ErrorState", "default", () => /* @__PURE__ */ jsx7(ErrorState, { title: "Couldn't load", message: "The source refused the request.", onRetry: noop }));
+  door("ErrorState", "no-retry", () => /* @__PURE__ */ jsx7(ErrorState, { message: "Read-only source." }));
+  for (const tone of TONES) form("Badge", tone, () => /* @__PURE__ */ jsx7(Badge, { tone, children: tone }));
+  form("Badge", "sm", () => /* @__PURE__ */ jsx7(Badge, { size: "sm", children: "12" }));
+  for (const tone of TONES) form("StatusDot", tone, () => /* @__PURE__ */ jsx7(StatusDot, { tone, label: tone }));
+  for (const tone of TONES) form("StatusBadge", tone, () => /* @__PURE__ */ jsx7(StatusBadge, { tone, children: tone }));
+  form("IconFrame", "default", () => /* @__PURE__ */ jsx7(IconFrame, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}) }));
+  form("IconFrame", "large", () => /* @__PURE__ */ jsx7(IconFrame, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}), size: 32 }));
+  form("StatTile", "default", () => /* @__PURE__ */ jsx7(StatTile, { label: "Requests", value: "1,204", sub: "last hour", icon: /* @__PURE__ */ jsx7(SearchGlyph, {}) }));
+  form("ProportionBar", "default", () => /* @__PURE__ */ jsx7(ProportionBar, { label: "Storage", segments: [{ value: 3, opacity: 0.9 }, { value: 2, opacity: 0.5 }, { value: 1, opacity: 0.25 }] }));
+  form("StatusBar", "default", () => /* @__PURE__ */ jsx7(StatusBar, { left: /* @__PURE__ */ jsx7(StatusDot, { tone: "success", label: "connected" }), right: /* @__PURE__ */ jsx7("span", { children: "12 rows" }) }));
+  form("Sparkline", "default", () => /* @__PURE__ */ jsx7(Sparkline, { data: [1, 3, 2, 5, 4, 6, 3, 7], label: "Throughput" }));
+  form("Sparkline", "flat", () => /* @__PURE__ */ jsx7(Sparkline, { data: [2, 2, 2, 2], label: "Idle" }));
+  return out;
+}
+export {
+  Badge,
+  CLS_BADGE,
+  CLS_BAR,
+  CLS_BAR_SEGMENT,
+  CLS_DIVIDER,
+  CLS_DOT,
+  CLS_EMPTY,
+  CLS_ERROR,
+  CLS_FIELD,
+  CLS_FIELD_CONTROL,
+  CLS_FIELD_GROUP,
+  CLS_FIELD_HINT,
+  CLS_FIELD_LABEL,
+  CLS_ICON_BUTTON,
+  CLS_ICON_FRAME,
+  CLS_LOADING,
+  CLS_PANEL,
+  CLS_PANEL_CONTENT,
+  CLS_PANEL_CONTENT_NO_HEADER,
+  CLS_PANEL_HEADER,
+  CLS_PANEL_TITLE,
+  CLS_ROW,
+  CLS_ROWLIST,
+  CLS_ROW_ICON,
+  CLS_ROW_LABEL,
+  CLS_ROW_META,
+  CLS_ROW_TRAILING,
+  CLS_SCROLL,
+  CLS_SEARCH,
+  CLS_SEARCH_INPUT,
+  CLS_SECTION,
+  CLS_SECTION_ACTIONS,
+  CLS_SECTION_BODY,
+  CLS_SECTION_CHEVRON,
+  CLS_SECTION_HEADER,
+  CLS_SECTION_TITLE,
+  CLS_SECTION_TRIGGER,
+  CLS_SEGMENT,
+  CLS_SEGMENTED,
+  CLS_STAT,
+  CLS_STATE,
+  CLS_STATE_HINT,
+  CLS_STATE_ICON,
+  CLS_STATE_PROGRESS,
+  CLS_STATE_TITLE,
+  CLS_STATUSBAR,
+  CLS_STAT_LABEL,
+  CLS_STAT_SUB,
+  CLS_STAT_VALUE,
+  CLS_TEXT_BUTTON,
+  CLS_TOGGLE,
+  CLS_TOGGLE_KNOB,
+  CLS_TOOLBAR,
+  CLS_TOOLBAR_GROUP,
+  COMPONENTS,
+  ChevronGlyph,
+  ClearGlyph,
+  Divider,
+  EmptyState,
+  ErrorState,
+  Field,
+  FieldGroup,
+  IconButton,
+  IconFrame,
+  LoadingState,
+  PANEL_COLORS,
+  PANEL_DISABLED_OPACITY,
+  PANEL_METRICS,
+  PANEL_PRIMITIVES_CSS,
+  PANEL_PRIMITIVES_STYLE_ID,
+  PANEL_TONES,
+  PanelFrame,
+  ProportionBar,
+  Row,
+  RowList,
+  ScrollArea,
+  SearchField,
+  SearchGlyph,
+  Section,
+  SegmentedControl,
+  Sparkline,
+  StatTile,
+  StatusBadge,
+  StatusBar,
+  StatusDot,
+  TextButton,
+  Toggle,
+  Toolbar,
+  ToolbarGroup,
+  badgeClass,
+  cx,
+  dotClass,
+  ensurePanelPrimitivesInjected,
+  gallery,
+  iconButtonClass,
+  nextSegmentValue,
+  rowClass,
+  sectionClass,
+  usePanelPrimitives
+};