@xenosystem/components 0.8.1 → 0.9.0

package/dist/catalog.json

@@ -360,7 +360,7 @@
         {
           "name": "IconButton",
           "file": "controls.tsx",
-          "doc": "A square icon-only button — the toolbar/row workhorse.\r\n\n@example\r\n```tsx\r\n<IconButton icon={<TrashGlyph />} label=\"Delete layer\" onClick={remove} disabled={!selection} />\r\n```",
+          "doc": "A square icon-only button — the toolbar/row workhorse.\n\n@example\n```tsx\n<IconButton icon={<TrashGlyph />} label=\"Delete layer\" onClick={remove} disabled={!selection} />\n```",
           "props": "IconButtonProps",
           "propList": [
             {
@@ -410,7 +410,7 @@
         {
           "name": "TextButton",
           "file": "controls.tsx",
-          "doc": "A borderless text action — the inline `+ Add` / `Clear` / `Unbind` affordance. Muted by default so\r\nit reads as secondary; `strong` promotes it. Never a filled button: `DESIGN_SYSTEM.md` §7 allows\r\nexactly one primary action on screen and a panel is rarely the place for it.",
+          "doc": "A borderless text action — the inline `+ Add` / `Clear` / `Unbind` affordance. Muted by default so\nit reads as secondary; `strong` promotes it. Never a filled button: `DESIGN_SYSTEM.md` §7 allows\nexactly one primary action on screen and a panel is rarely the place for it.",
           "props": "TextButtonProps",
           "propList": [
             {
@@ -448,7 +448,7 @@
         {
           "name": "SearchField",
           "file": "controls.tsx",
-          "doc": "The canonical filter input: recessed well, leading glyph, Escape-to-clear, and a clear button\r\nthat only appears when there is something to clear.\r\n\n@example\r\n```tsx\r\n<SearchField value={query} onChange={setQuery} placeholder=\"Filter layers…\" />\r\n```",
+          "doc": "The canonical filter input: recessed well, leading glyph, Escape-to-clear, and a clear button\nthat only appears when there is something to clear.\n\n@example\n```tsx\n<SearchField value={query} onChange={setQuery} placeholder=\"Filter layers…\" />\n```",
           "props": "SearchFieldProps",
           "propList": [
             {
@@ -554,7 +554,7 @@
         {
           "name": "Toggle",
           "file": "controls.tsx",
-          "doc": "The signature XENO toggle: a rectangular track with a SQUARE knob whose corner radius softens\r\nwhen it moves to the ON position (DESIGN_SYSTEM §3 \"The Toggle Switch\"). Never a pill.",
+          "doc": "The signature XENO toggle: a rectangular track with a SQUARE knob whose corner radius softens\nwhen it moves to the ON position (DESIGN_SYSTEM §3 \"The Toggle Switch\"). Never a pill.",
           "props": "ToggleProps",
           "propList": [
             {
@@ -598,7 +598,7 @@
         {
           "name": "FieldGroup",
           "file": "controls.tsx",
-          "doc": "A label-column layout: every {@link Field} inside shares ONE label width, so labels start at the\r\nsame x and controls end at the same x — the column alignment DESIGN_SYSTEM §5 requires and the\r\nthing hand-rolled property grids always get wrong.\r\n\n@example\r\n```tsx\r\n<FieldGroup labelWidth={64}>\r\n  <Field label=\"Opacity\"><Slider … /></Field>\r\n  <Field label=\"Blend\"><Select … /></Field>\r\n</FieldGroup>\r\n```",
+          "doc": "A label-column layout: every {@link Field} inside shares ONE label width, so labels start at the\nsame x and controls end at the same x — the column alignment DESIGN_SYSTEM §5 requires and the\nthing hand-rolled property grids always get wrong.\n\n@example\n```tsx\n<FieldGroup labelWidth={64}>\n  <Field label=\"Opacity\"><Slider … /></Field>\n  <Field label=\"Blend\"><Select … /></Field>\n</FieldGroup>\n```",
           "props": "FieldGroupProps",
           "propList": [
             {
@@ -816,7 +816,7 @@
         {
           "name": "Badge",
           "file": "indicators.tsx",
-          "doc": "A small rectangular chip. Never interactive — `DESIGN_SYSTEM.md` §7: \"If a badge needs to be\r\nclickable, it's a ghost button, not a badge.\"",
+          "doc": "A small rectangular chip. Never interactive — `DESIGN_SYSTEM.md` §7: \"If a badge needs to be\nclickable, it's a ghost button, not a badge.\"",
           "props": "BadgeProps",
           "propList": [
             {
@@ -880,7 +880,7 @@
         {
           "name": "StatusBadge",
           "file": "indicators.tsx",
-          "doc": "Dot + label. Color is never the sole indicator (`DESIGN_SYSTEM.md` §11) — the word carries the\r\nstate and the dot reinforces it.",
+          "doc": "Dot + label. Color is never the sole indicator (`DESIGN_SYSTEM.md` §11) — the word carries the\nstate and the dot reinforces it.",
           "props": "StatusBadgeProps",
           "propList": [
             {
@@ -932,7 +932,7 @@
         {
           "name": "StatTile",
           "file": "indicators.tsx",
-          "doc": "Label + big value tile — the KPI unit of the future `metrics` panel.\r\n\n@example\r\n```tsx\r\n<StatTile label=\"p95 frame\" value=\"14.2 ms\" sub=\"last 60 s\" />\r\n```",
+          "doc": "Label + big value tile — the KPI unit of the future `metrics` panel.\n\n@example\n```tsx\n<StatTile label=\"p95 frame\" value=\"14.2 ms\" sub=\"last 60 s\" />\n```",
           "props": "StatTileProps",
           "propList": [
             {
@@ -976,7 +976,7 @@
         {
           "name": "ProportionBar",
           "file": "indicators.tsx",
-          "doc": "A horizontal stacked bar — the monochromatic replacement for a pie/donut chart.\r\n\nSlices are separated by white ALPHA, not hue: `DESIGN_SYSTEM.md` §13 forbids chromatic color\r\noutside status contexts, and a categorical palette is exactly that. When no `opacity` is supplied\r\nthe bar ramps evenly from bright to dim across the slices.",
+          "doc": "A horizontal stacked bar — the monochromatic replacement for a pie/donut chart.\n\nSlices are separated by white ALPHA, not hue: `DESIGN_SYSTEM.md` §13 forbids chromatic color\noutside status contexts, and a categorical palette is exactly that. When no `opacity` is supplied\nthe bar ramps evenly from bright to dim across the slices.",
           "props": "ProportionBarProps",
           "propList": [
             {
@@ -1002,7 +1002,7 @@
         {
           "name": "StatusBar",
           "file": "indicators.tsx",
-          "doc": "The panel footer strip. Census: layers and history already ship a byte-identical one\r\n(`2px 6px`, 9px, muted, header surface, space-between) — this is that, once.",
+          "doc": "The panel footer strip. Census: layers and history already ship a byte-identical one\n(`2px 6px`, 9px, muted, header surface, space-between) — this is that, once.",
           "props": "StatusBarProps",
           "propList": [
             {
@@ -1034,7 +1034,7 @@
         {
           "name": "Sparkline",
           "file": "indicators.tsx",
-          "doc": "A monochrome trend line.\r\n\nLifted from `xeno-post`'s `ui/kit.tsx`, which is the only sparkline implementation in the\r\necosystem. It lives here rather than in a panel because three consumers want it — `metrics` (which\r\nshipped a local copy first), `chart`, and the future `runs` panel — and three copies of a mark is\r\nhow a design system stops being one.\r\n\nDistinct from {@link ProportionBar}: a line is a different MARK, not a variant. The two are not\r\ninterchangeable and neither is a special case of the other.\r\n\nDegenerate inputs render an empty well rather than throwing: a series of one point has no slope,\r\nand a flat series has no range to normalize against (it draws a centred straight line).",
+          "doc": "A monochrome trend line.\n\nLifted from `xeno-post`'s `ui/kit.tsx`, which is the only sparkline implementation in the\necosystem. It lives here rather than in a panel because three consumers want it — `metrics` (which\nshipped a local copy first), `chart`, and the future `runs` panel — and three copies of a mark is\nhow a design system stops being one.\n\nDistinct from {@link ProportionBar}: a line is a different MARK, not a variant. The two are not\ninterchangeable and neither is a special case of the other.\n\nDegenerate inputs render an empty well rather than throwing: a series of one point has no slope,\nand a flat series has no range to normalize against (it draws a centred straight line).",
           "props": "SparklineProps",
           "propList": [
             {

package/dist/chrome/index.d.ts

@@ -182,7 +182,7 @@ declare function Section({ title, children, badge, actions, collapsible, collaps
  *    (Section, RowList/Row, Toolbar, StatTile, ProportionBar, EmptyState, LoadingState, ErrorState,
  *    StatusBadge, IconFrame …), re-cut for dense in-panel density rather than dashboard-page density.
  *
- * Modifiers use BEM's double dash (`xeno-row--selected`), matching workflow's existing
+ * Modifiers use BEM's double dash (`xc-row--selected`), matching workflow's existing
  * `xeno-panel-content--no-header`.
  *
  * @module
@@ -198,101 +198,101 @@ declare const CLS_PANEL_CONTENT = "xeno-panel-content";
 /** Applied to the content well when the frame renders no header. */
 declare const CLS_PANEL_CONTENT_NO_HEADER = "xeno-panel-content--no-header";
 /** Horizontal control strip (`left` / `right` clusters). */
-declare const CLS_TOOLBAR = "xeno-toolbar";
+declare const CLS_TOOLBAR = "xc-toolbar";
 /** A cluster of controls inside a toolbar. */
-declare const CLS_TOOLBAR_GROUP = "xeno-toolbar-group";
+declare const CLS_TOOLBAR_GROUP = "xc-toolbar-group";
 /** Footer strip: counts on the left, state on the right. */
-declare const CLS_STATUSBAR = "xeno-statusbar";
+declare const CLS_STATUSBAR = "xc-statusbar";
 /** 1px hairline; `--vertical` for an inline separator inside a toolbar. */
-declare const CLS_DIVIDER = "xeno-divider";
+declare const CLS_DIVIDER = "xc-divider";
 /** Collapsible titled group. */
-declare const CLS_SECTION = "xeno-section";
+declare const CLS_SECTION = "xc-section";
 /** The section's header row. */
-declare const CLS_SECTION_HEADER = "xeno-section-header";
+declare const CLS_SECTION_HEADER = "xc-section-header";
 /** The `<button>` inside the header that toggles collapse (siblings stay outside it — see `Section`). */
-declare const CLS_SECTION_TRIGGER = "xeno-section-trigger";
+declare const CLS_SECTION_TRIGGER = "xc-section-trigger";
 /** Disclosure chevron wrapper (rotates via the `--collapsed` modifier). */
-declare const CLS_SECTION_CHEVRON = "xeno-section-chevron";
+declare const CLS_SECTION_CHEVRON = "xc-section-chevron";
 /** Uppercase section label. */
-declare const CLS_SECTION_TITLE = "xeno-section-title";
+declare const CLS_SECTION_TITLE = "xc-section-title";
 /** Trailing cluster in the section header (badge + actions + toggle). */
-declare const CLS_SECTION_ACTIONS = "xeno-section-actions";
+declare const CLS_SECTION_ACTIONS = "xc-section-actions";
 /** The section's body. */
-declare const CLS_SECTION_BODY = "xeno-section-body";
+declare const CLS_SECTION_BODY = "xc-section-body";
 /** Hairline-divided vertical list container. */
-declare const CLS_ROWLIST = "xeno-rowlist";
+declare const CLS_ROWLIST = "xc-rowlist";
 /** A single dense row. */
-declare const CLS_ROW = "xeno-row";
+declare const CLS_ROW = "xc-row";
 /** Fixed-width leading icon slot (keeps labels in one column — DESIGN_SYSTEM §5). */
-declare const CLS_ROW_ICON = "xeno-row-icon";
+declare const CLS_ROW_ICON = "xc-row-icon";
 /** The row's flexible label column. */
-declare const CLS_ROW_LABEL = "xeno-row-label";
+declare const CLS_ROW_LABEL = "xc-row-label";
 /** Secondary text after the label. */
-declare const CLS_ROW_META = "xeno-row-meta";
+declare const CLS_ROW_META = "xc-row-meta";
 /** Right-aligned trailing slot. */
-declare const CLS_ROW_TRAILING = "xeno-row-trailing";
+declare const CLS_ROW_TRAILING = "xc-row-trailing";
 /** Square icon-only button. */
-declare const CLS_ICON_BUTTON = "xeno-iconbtn";
+declare const CLS_ICON_BUTTON = "xc-iconbtn";
 /** Borderless inline text action (`+ Add`, `Clear`, `Unbind`). */
-declare const CLS_TEXT_BUTTON = "xeno-textbtn";
+declare const CLS_TEXT_BUTTON = "xc-textbtn";
 /** Search / filter input wrapper. */
-declare const CLS_SEARCH = "xeno-search";
+declare const CLS_SEARCH = "xc-search";
 /** The `<input>` inside a search field. */
-declare const CLS_SEARCH_INPUT = "xeno-search-input";
+declare const CLS_SEARCH_INPUT = "xc-search-input";
 /** Segmented (radio-group) control. */
-declare const CLS_SEGMENTED = "xeno-segmented";
+declare const CLS_SEGMENTED = "xc-segmented";
 /** One segment button. */
-declare const CLS_SEGMENT = "xeno-segment";
+declare const CLS_SEGMENT = "xc-segment";
 /** The signature XENO toggle (rectangular track, square knob). */
-declare const CLS_TOGGLE = "xeno-toggle";
+declare const CLS_TOGGLE = "xc-toggle";
 /** The toggle's knob. */
-declare const CLS_TOGGLE_KNOB = "xeno-toggle-knob";
+declare const CLS_TOGGLE_KNOB = "xc-toggle-knob";
 /** Label-column field group (all labels share one width). */
-declare const CLS_FIELD_GROUP = "xeno-fieldgroup";
+declare const CLS_FIELD_GROUP = "xc-fieldgroup";
 /** One label + control row. */
-declare const CLS_FIELD = "xeno-field";
+declare const CLS_FIELD = "xc-field";
 /** The field's label cell. */
-declare const CLS_FIELD_LABEL = "xeno-field-label";
+declare const CLS_FIELD_LABEL = "xc-field-label";
 /** The field's control cell. */
-declare const CLS_FIELD_CONTROL = "xeno-field-control";
+declare const CLS_FIELD_CONTROL = "xc-field-control";
 /** Muted hint under a field. */
-declare const CLS_FIELD_HINT = "xeno-field-hint";
+declare const CLS_FIELD_HINT = "xc-field-hint";
 /** Centered zero-content state. */
-declare const CLS_EMPTY = "xeno-empty";
+declare const CLS_EMPTY = "xc-empty";
 /** Centered busy state. */
-declare const CLS_LOADING = "xeno-loading";
+declare const CLS_LOADING = "xc-loading";
 /** Centered failure state. */
-declare const CLS_ERROR = "xeno-error";
+declare const CLS_ERROR = "xc-error";
 /** Shared container for the three states above. */
-declare const CLS_STATE = "xeno-state";
+declare const CLS_STATE = "xc-state";
 /** The state's icon chip. */
-declare const CLS_STATE_ICON = "xeno-state-icon";
+declare const CLS_STATE_ICON = "xc-state-icon";
 /** The state's headline. */
-declare const CLS_STATE_TITLE = "xeno-state-title";
+declare const CLS_STATE_TITLE = "xc-state-title";
 /** The state's supporting line — the ACTIONABLE hint. */
-declare const CLS_STATE_HINT = "xeno-state-hint";
+declare const CLS_STATE_HINT = "xc-state-hint";
 /** Indeterminate progress bar used by the loading state (no spinner — no circles). */
-declare const CLS_STATE_PROGRESS = "xeno-state-progress";
+declare const CLS_STATE_PROGRESS = "xc-state-progress";
 /** Small rectangular status/metadata chip. */
-declare const CLS_BADGE = "xeno-badge";
+declare const CLS_BADGE = "xc-badge";
 /** 2px-radius square status dot (never a circle). */
-declare const CLS_DOT = "xeno-dot";
+declare const CLS_DOT = "xc-dot";
 /** Flat outlined icon container. */
-declare const CLS_ICON_FRAME = "xeno-iconframe";
+declare const CLS_ICON_FRAME = "xc-iconframe";
 /** Label + big value tile. */
-declare const CLS_STAT = "xeno-stat";
+declare const CLS_STAT = "xc-stat";
 /** The stat's uppercase label row. */
-declare const CLS_STAT_LABEL = "xeno-stat-label";
+declare const CLS_STAT_LABEL = "xc-stat-label";
 /** The stat's value. */
-declare const CLS_STAT_VALUE = "xeno-stat-value";
+declare const CLS_STAT_VALUE = "xc-stat-value";
 /** The stat's sub-line. */
-declare const CLS_STAT_SUB = "xeno-stat-sub";
+declare const CLS_STAT_SUB = "xc-stat-sub";
 /** Horizontal stacked proportion bar (replaces a pie/donut — no circles). */
-declare const CLS_BAR = "xeno-bar";
+declare const CLS_BAR = "xc-bar";
 /** One segment of a proportion bar. */
-declare const CLS_BAR_SEGMENT = "xeno-bar-segment";
+declare const CLS_BAR_SEGMENT = "xc-bar-segment";
 /** Scroll container with the canonical thin rectangular thumb. */
-declare const CLS_SCROLL = "xeno-scroll";
+declare const CLS_SCROLL = "xc-scroll";
 /**
  * Semantic tone for badges, dots and states. `neutral` is the default and the only tone that is
  * purely monochromatic; the other four are the ONLY places DESIGN_SYSTEM permits chromatic color

package/dist/chrome/index.js

@@ -4,54 +4,54 @@ 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 CLS_TOOLBAR = "xc-toolbar";
+var CLS_TOOLBAR_GROUP = "xc-toolbar-group";
+var CLS_STATUSBAR = "xc-statusbar";
+var CLS_DIVIDER = "xc-divider";
+var CLS_SECTION = "xc-section";
+var CLS_SECTION_HEADER = "xc-section-header";
+var CLS_SECTION_TRIGGER = "xc-section-trigger";
+var CLS_SECTION_CHEVRON = "xc-section-chevron";
+var CLS_SECTION_TITLE = "xc-section-title";
+var CLS_SECTION_ACTIONS = "xc-section-actions";
+var CLS_SECTION_BODY = "xc-section-body";
+var CLS_ROWLIST = "xc-rowlist";
+var CLS_ROW = "xc-row";
+var CLS_ROW_ICON = "xc-row-icon";
+var CLS_ROW_LABEL = "xc-row-label";
+var CLS_ROW_META = "xc-row-meta";
+var CLS_ROW_TRAILING = "xc-row-trailing";
+var CLS_ICON_BUTTON = "xc-iconbtn";
+var CLS_TEXT_BUTTON = "xc-textbtn";
+var CLS_SEARCH = "xc-search";
+var CLS_SEARCH_INPUT = "xc-search-input";
+var CLS_SEGMENTED = "xc-segmented";
+var CLS_SEGMENT = "xc-segment";
+var CLS_TOGGLE = "xc-toggle";
+var CLS_TOGGLE_KNOB = "xc-toggle-knob";
+var CLS_FIELD_GROUP = "xc-fieldgroup";
+var CLS_FIELD = "xc-field";
+var CLS_FIELD_LABEL = "xc-field-label";
+var CLS_FIELD_CONTROL = "xc-field-control";
+var CLS_FIELD_HINT = "xc-field-hint";
+var CLS_EMPTY = "xc-empty";
+var CLS_LOADING = "xc-loading";
+var CLS_ERROR = "xc-error";
+var CLS_STATE = "xc-state";
+var CLS_STATE_ICON = "xc-state-icon";
+var CLS_STATE_TITLE = "xc-state-title";
+var CLS_STATE_HINT = "xc-state-hint";
+var CLS_STATE_PROGRESS = "xc-state-progress";
+var CLS_BADGE = "xc-badge";
+var CLS_DOT = "xc-dot";
+var CLS_ICON_FRAME = "xc-iconframe";
+var CLS_STAT = "xc-stat";
+var CLS_STAT_LABEL = "xc-stat-label";
+var CLS_STAT_VALUE = "xc-stat-value";
+var CLS_STAT_SUB = "xc-stat-sub";
+var CLS_BAR = "xc-bar";
+var CLS_BAR_SEGMENT = "xc-bar-segment";
+var CLS_SCROLL = "xc-scroll";
 var PANEL_TONES = Object.freeze([
   "neutral",
   "info",
@@ -284,7 +284,7 @@ var PANEL_PRIMITIVES_CSS = `
 
 /* \u2500\u2500\u2500 2. Strips: toolbar, status bar, divider, scroll \u2500\u2500\u2500 */
 
-.xeno-toolbar {
+.xc-toolbar {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.gutter}px;
@@ -298,21 +298,21 @@ var PANEL_PRIMITIVES_CSS = `
   font-size: ${PANEL_METRICS.fontBody}px;
   user-select: none;
 }
-.xeno-toolbar--flush {
+.xc-toolbar--flush {
   border-bottom: none;
 }
-.xeno-toolbar-group {
+.xc-toolbar-group {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
   min-width: 0;
 }
-.xeno-toolbar-group--end {
+.xc-toolbar-group--end {
   margin-left: auto;
   flex: 0 0 auto;
 }
 
-.xeno-statusbar {
+.xc-statusbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -326,39 +326,39 @@ var PANEL_PRIMITIVES_CSS = `
   user-select: none;
 }
 
-.xeno-divider {
+.xc-divider {
   flex: 0 0 auto;
   background: ${BORDER};
   height: 1px;
   width: 100%;
 }
-.xeno-divider--vertical {
+.xc-divider--vertical {
   width: 1px;
   height: 12px;
   align-self: center;
 }
 
-.xeno-scroll {
+.xc-scroll {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   outline: none;
 }
-.xeno-scroll::-webkit-scrollbar {
+.xc-scroll::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
-.xeno-scroll::-webkit-scrollbar-track {
+.xc-scroll::-webkit-scrollbar-track {
   background: transparent;
 }
-.xeno-scroll::-webkit-scrollbar-thumb {
+.xc-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 {
+.xc-scroll::-webkit-scrollbar-thumb:hover {
   background: #555555;
   border: 3px solid transparent;
   background-clip: padding-box;
@@ -366,13 +366,13 @@ var PANEL_PRIMITIVES_CSS = `
 
 /* \u2500\u2500\u2500 3. Section \u2500\u2500\u2500 */
 
-.xeno-section {
+.xc-section {
   display: flex;
   flex-direction: column;
   flex: 0 0 auto;
   min-width: 0;
 }
-.xeno-section-header {
+.xc-section-header {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -382,7 +382,7 @@ var PANEL_PRIMITIVES_CSS = `
   background: ${PANEL_COLORS.wash};
   user-select: none;
 }
-.xeno-section-trigger {
+.xc-section-trigger {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -398,10 +398,10 @@ var PANEL_PRIMITIVES_CSS = `
   cursor: pointer;
 }
 /* A non-collapsible header renders a <div> with this class, not a disabled button. */
-div.xeno-section-trigger {
+div.xc-section-trigger {
   cursor: default;
 }
-.xeno-section-chevron {
+.xc-section-chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -412,10 +412,10 @@ div.xeno-section-trigger {
   transform: rotate(90deg);
   transition: transform 80ms ease;
 }
-.xeno-section--collapsed .xeno-section-chevron {
+.xc-section--collapsed .xc-section-chevron {
   transform: rotate(0deg);
 }
-.xeno-section-title {
+.xc-section-title {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -427,39 +427,39 @@ div.xeno-section-trigger {
   text-transform: uppercase;
   color: ${MUTED};
 }
-.xeno-section-actions {
+.xc-section-actions {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
   flex: 0 0 auto;
 }
-.xeno-section-body {
+.xc-section-body {
   padding: 3px 0;
   min-width: 0;
 }
-.xeno-section-body--off {
+.xc-section-body--off {
   opacity: ${PANEL_DISABLED_OPACITY};
   pointer-events: none;
 }
-.xeno-section-body--flush {
+.xc-section-body--flush {
   padding: 0;
 }
-.xeno-section--collapsed .xeno-section-body {
+.xc-section--collapsed .xc-section-body {
   display: none;
 }
 
 /* \u2500\u2500\u2500 4. Rows \u2500\u2500\u2500 */
 
-.xeno-rowlist {
+.xc-rowlist {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
-.xeno-rowlist--divided .xeno-row {
+.xc-rowlist--divided .xc-row {
   border-bottom: 1px solid ${BORDER};
 }
 
-.xeno-row {
+.xc-row {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -475,33 +475,33 @@ div.xeno-section-trigger {
   user-select: none;
   transition: background-color 80ms ease;
 }
-.xeno-row--interactive {
+.xc-row--interactive {
   cursor: pointer;
 }
-.xeno-row--interactive:hover {
+.xc-row--interactive:hover {
   background: ${PANEL_COLORS.rowHover};
 }
-.xeno-row--selected {
+.xc-row--selected {
   background: ${PANEL_COLORS.rowSelected};
 }
-.xeno-row--selected:hover {
+.xc-row--selected:hover {
   background: ${PANEL_COLORS.rowSelected};
 }
-.xeno-row--active {
+.xc-row--active {
   box-shadow: inset 0 0 0 1px ${PANEL_COLORS.ring};
 }
-.xeno-row--disabled {
+.xc-row--disabled {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
 }
-.xeno-row--disabled:hover {
+.xc-row--disabled:hover {
   background: transparent;
 }
-.xeno-row:focus-visible {
+.xc-row:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: -1px;
 }
-.xeno-row-icon {
+.xc-row-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -510,20 +510,20 @@ div.xeno-section-trigger {
   flex: 0 0 auto;
   opacity: 0.8;
 }
-.xeno-row-label {
+.xc-row-label {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.xeno-row-meta {
+.xc-row-meta {
   flex: 0 0 auto;
   font-size: ${PANEL_METRICS.fontLabel}px;
   color: ${MUTED};
   font-variant-numeric: tabular-nums;
 }
-.xeno-row-trailing {
+.xc-row-trailing {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -533,7 +533,7 @@ div.xeno-section-trigger {
 
 /* \u2500\u2500\u2500 5. Controls \u2500\u2500\u2500 */
 
-.xeno-iconbtn {
+.xc-iconbtn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,41 +547,41 @@ div.xeno-section-trigger {
   opacity: 0.8;
   transition: background-color 80ms ease, opacity 80ms ease;
 }
-.xeno-iconbtn--sm {
+.xc-iconbtn--sm {
   width: ${PANEL_METRICS.iconButtonSm}px;
   height: ${PANEL_METRICS.iconButtonSm}px;
 }
-.xeno-iconbtn--md {
+.xc-iconbtn--md {
   width: ${PANEL_METRICS.iconButton}px;
   height: ${PANEL_METRICS.iconButton}px;
 }
-.xeno-iconbtn--sm svg {
+.xc-iconbtn--sm svg {
   width: ${PANEL_METRICS.iconGlyphSm}px;
   height: ${PANEL_METRICS.iconGlyphSm}px;
 }
-.xeno-iconbtn--md svg {
+.xc-iconbtn--md svg {
   width: ${PANEL_METRICS.iconGlyph}px;
   height: ${PANEL_METRICS.iconGlyph}px;
 }
-.xeno-iconbtn:hover {
+.xc-iconbtn:hover {
   background: ${PANEL_COLORS.soft};
   opacity: 1;
 }
-.xeno-iconbtn--active {
+.xc-iconbtn--active {
   background: ${PANEL_COLORS.rowSelected};
   opacity: 1;
 }
-.xeno-iconbtn:focus-visible {
+.xc-iconbtn:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: 1px;
 }
-.xeno-iconbtn[disabled] {
+.xc-iconbtn[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
   background: transparent;
 }
 
-.xeno-textbtn {
+.xc-textbtn {
   flex: 0 0 auto;
   padding: 0;
   border: none;
@@ -593,23 +593,23 @@ div.xeno-section-trigger {
   cursor: pointer;
   transition: color 80ms ease;
 }
-.xeno-textbtn:hover {
+.xc-textbtn:hover {
   color: ${FG};
 }
-.xeno-textbtn--strong {
+.xc-textbtn--strong {
   color: ${FG};
 }
-.xeno-textbtn:focus-visible {
+.xc-textbtn:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: 1px;
 }
-.xeno-textbtn[disabled] {
+.xc-textbtn[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
   color: ${MUTED};
 }
 
-.xeno-search {
+.xc-search {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -624,20 +624,20 @@ div.xeno-section-trigger {
   color: ${FG};
   transition: border-color 80ms ease;
 }
-.xeno-search:focus-within {
+.xc-search:focus-within {
   border-color: ${PANEL_COLORS.ring};
 }
-.xeno-search--disabled {
+.xc-search--disabled {
   opacity: ${PANEL_DISABLED_OPACITY};
 }
-.xeno-search-glyph {
+.xc-search-glyph {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   color: ${MUTED};
 }
-.xeno-search-input {
+.xc-search-input {
   flex: 1 1 auto;
   min-width: 0;
   height: 100%;
@@ -650,10 +650,10 @@ div.xeno-section-trigger {
   outline: none;
   cursor: text;
 }
-.xeno-search-input::placeholder {
+.xc-search-input::placeholder {
   color: ${DIM};
 }
-.xeno-search-clear {
+.xc-search-clear {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -667,12 +667,12 @@ div.xeno-section-trigger {
   color: ${MUTED};
   cursor: pointer;
 }
-.xeno-search-clear:hover {
+.xc-search-clear:hover {
   color: ${FG};
   background: ${PANEL_COLORS.soft};
 }
 
-.xeno-segmented {
+.xc-segmented {
   display: inline-flex;
   align-items: stretch;
   flex: 0 0 auto;
@@ -682,20 +682,20 @@ div.xeno-section-trigger {
   border-radius: ${PANEL_METRICS.radius}px;
   box-sizing: border-box;
 }
-.xeno-segmented--sm {
+.xc-segmented--sm {
   height: ${PANEL_METRICS.iconButtonSm + 2}px;
 }
-.xeno-segmented--md {
+.xc-segmented--md {
   height: ${CTRL_H};
 }
-.xeno-segmented--stretch {
+.xc-segmented--stretch {
   display: flex;
   width: 100%;
 }
-.xeno-segmented--stretch .xeno-segment {
+.xc-segmented--stretch .xc-segment {
   flex: 1 1 0;
 }
-.xeno-segment {
+.xc-segment {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -712,23 +712,23 @@ div.xeno-section-trigger {
   transition: background-color 80ms ease, color 80ms ease;
   white-space: nowrap;
 }
-.xeno-segment:hover {
+.xc-segment:hover {
   color: ${FG};
 }
-.xeno-segment--checked {
+.xc-segment--checked {
   background: ${PANEL_COLORS.rowSelected};
   color: ${FG};
 }
-.xeno-segment:focus-visible {
+.xc-segment:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: -1px;
 }
-.xeno-segment[disabled] {
+.xc-segment[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
 }
 
-.xeno-toggle {
+.xc-toggle {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -740,18 +740,18 @@ div.xeno-section-trigger {
   cursor: pointer;
   transition: background-color 80ms ease;
 }
-.xeno-toggle--sm {
+.xc-toggle--sm {
   width: 16px;
   height: 10px;
 }
-.xeno-toggle--md {
+.xc-toggle--md {
   width: 22px;
   height: 12px;
 }
-.xeno-toggle--on {
+.xc-toggle--on {
   background: rgba(255, 255, 255, 0.25);
 }
-.xeno-toggle-knob {
+.xc-toggle-knob {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -759,45 +759,45 @@ div.xeno-section-trigger {
   border-radius: 1px;
   transition: transform 80ms ease, border-radius 80ms ease, background-color 80ms ease;
 }
-.xeno-toggle--sm .xeno-toggle-knob {
+.xc-toggle--sm .xc-toggle-knob {
   width: 6px;
   height: 6px;
 }
-.xeno-toggle--md .xeno-toggle-knob {
+.xc-toggle--md .xc-toggle-knob {
   width: 8px;
   height: 8px;
 }
-.xeno-toggle--on .xeno-toggle-knob {
+.xc-toggle--on .xc-toggle-knob {
   background: ${FG};
   border-radius: ${PANEL_METRICS.radius}px;
 }
-.xeno-toggle--sm.xeno-toggle--on .xeno-toggle-knob {
+.xc-toggle--sm.xc-toggle--on .xc-toggle-knob {
   transform: translateX(6px);
 }
-.xeno-toggle--md.xeno-toggle--on .xeno-toggle-knob {
+.xc-toggle--md.xc-toggle--on .xc-toggle-knob {
   transform: translateX(10px);
 }
-.xeno-toggle:focus-visible {
+.xc-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] {
+.xc-toggle--disabled,
+.xc-toggle[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
 }
 
 /* \u2500\u2500\u2500 6. Fields \u2500\u2500\u2500 */
 
-.xeno-fieldgroup {
+.xc-fieldgroup {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
-.xeno-field {
+.xc-field {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -807,7 +807,7 @@ div.xeno-section-trigger {
   box-sizing: border-box;
   min-width: 0;
 }
-.xeno-field-label {
+.xc-field-label {
   flex: 0 0 auto;
   width: ${LABEL_W};
   overflow: hidden;
@@ -818,7 +818,7 @@ div.xeno-section-trigger {
   user-select: none;
   cursor: default;
 }
-.xeno-field-control {
+.xc-field-control {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -826,29 +826,29 @@ div.xeno-section-trigger {
   min-width: 0;
   justify-content: flex-end;
 }
-.xeno-field-hint {
+.xc-field-hint {
   flex: 1 1 100%;
   padding-left: ${LABEL_W};
   font-size: ${PANEL_METRICS.fontLabel}px;
   color: ${DIM};
 }
-.xeno-field--stacked {
+.xc-field--stacked {
   flex-direction: column;
   align-items: stretch;
 }
-.xeno-field--stacked .xeno-field-label {
+.xc-field--stacked .xc-field-label {
   width: auto;
 }
-.xeno-field--stacked .xeno-field-control {
+.xc-field--stacked .xc-field-control {
   justify-content: flex-start;
 }
-.xeno-field--stacked .xeno-field-hint {
+.xc-field--stacked .xc-field-hint {
   padding-left: 0;
 }
 
 /* \u2500\u2500\u2500 7. States \u2500\u2500\u2500 */
 
-.xeno-state {
+.xc-state {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -858,7 +858,7 @@ div.xeno-section-trigger {
   text-align: center;
   min-width: 0;
 }
-.xeno-state-icon {
+.xc-state-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -868,28 +868,28 @@ div.xeno-section-trigger {
   border-radius: ${PANEL_METRICS.radius}px;
   color: ${MUTED};
 }
-.xeno-empty,
-.xeno-loading {
+.xc-empty,
+.xc-loading {
   user-select: none;
 }
-.xeno-state-title {
+.xc-state-title {
   font-size: ${PANEL_METRICS.fontMeta}px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   opacity: 0.4;
   color: ${FG};
 }
-.xeno-state-hint {
+.xc-state-hint {
   max-width: 28ch;
   font-size: ${PANEL_METRICS.fontMeta}px;
   line-height: 1.45;
   color: ${MUTED};
 }
-.xeno-error .xeno-state-title {
+.xc-error .xc-state-title {
   opacity: 1;
   color: ${PANEL_COLORS.errorText};
 }
-.xeno-state-progress {
+.xc-state-progress {
   position: relative;
   width: 64px;
   height: 2px;
@@ -897,7 +897,7 @@ div.xeno-section-trigger {
   background: ${PANEL_COLORS.soft};
   overflow: hidden;
 }
-.xeno-state-progress::after {
+.xc-state-progress::after {
   content: '';
   position: absolute;
   top: 0;
@@ -921,7 +921,7 @@ div.xeno-section-trigger {
 
 /* \u2500\u2500\u2500 8. Indicators \u2500\u2500\u2500 */
 
-.xeno-badge {
+.xc-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
@@ -937,18 +937,18 @@ div.xeno-section-trigger {
   white-space: nowrap;
   user-select: none;
 }
-.xeno-badge--md {
+.xc-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}; }
+.xc-badge--info { color: ${PANEL_COLORS.infoText}; }
+.xc-badge--success { color: ${PANEL_COLORS.successText}; }
+.xc-badge--warning { color: ${PANEL_COLORS.warningText}; }
+.xc-badge--error { color: ${PANEL_COLORS.errorText}; }
 
-.xeno-dot {
+.xc-dot {
   display: inline-block;
   flex: 0 0 auto;
   width: ${PANEL_METRICS.dotSize}px;
@@ -956,12 +956,12 @@ div.xeno-section-trigger {
   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}; }
+.xc-dot--info { background: ${PANEL_COLORS.infoText}; }
+.xc-dot--success { background: ${PANEL_COLORS.successText}; }
+.xc-dot--warning { background: ${PANEL_COLORS.warningText}; }
+.xc-dot--error { background: ${PANEL_COLORS.error}; }
 
-.xeno-iconframe {
+.xc-iconframe {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -974,7 +974,7 @@ div.xeno-section-trigger {
 
 /* \u2500\u2500\u2500 9. Data tiles \u2500\u2500\u2500 */
 
-.xeno-stat {
+.xc-stat {
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -984,7 +984,7 @@ div.xeno-section-trigger {
   border-radius: ${PANEL_METRICS.radius}px;
   background: rgba(0, 0, 0, 0.2);
 }
-.xeno-stat-label {
+.xc-stat-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -994,7 +994,7 @@ div.xeno-section-trigger {
   letter-spacing: 0.06em;
   color: ${MUTED};
 }
-.xeno-stat-value {
+.xc-stat-value {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.1;
@@ -1004,13 +1004,13 @@ div.xeno-section-trigger {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.xeno-stat-sub {
+.xc-stat-sub {
   font-size: ${PANEL_METRICS.fontLabel}px;
   color: ${DIM};
   font-variant-numeric: tabular-nums;
 }
 
-.xeno-bar {
+.xc-bar {
   display: flex;
   width: 100%;
   height: 6px;
@@ -1018,7 +1018,7 @@ div.xeno-section-trigger {
   background: rgba(255, 255, 255, 0.04);
   overflow: hidden;
 }
-.xeno-bar-segment {
+.xc-bar-segment {
   height: 100%;
   min-width: 0;
 }
@@ -1026,16 +1026,16 @@ div.xeno-section-trigger {
 /* \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 {
+  .xc-row,
+  .xc-iconbtn,
+  .xc-segment,
+  .xc-toggle,
+  .xc-toggle-knob,
+  .xc-search,
+  .xc-section-chevron {
     transition: none;
   }
-  .xeno-state-progress::after,
+  .xc-state-progress::after,
   .xeno-spin {
     animation: none;
   }
@@ -1204,7 +1204,7 @@ function IconButton({
       "aria-pressed": active,
       disabled,
       onClick,
-      className: iconButtonClass({ active, disabled }, cx(`${"xeno-iconbtn"}--${size}`, className)),
+      className: iconButtonClass({ active, disabled }, cx(`${"xc-iconbtn"}--${size}`, className)),
       children: icon
     }
   );
@@ -1590,7 +1590,7 @@ function Badge({
   className
 }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsx6("span", { title, className: badgeClass(tone, cx(size === "md" && "xeno-badge--md", className)), children });
+  return /* @__PURE__ */ jsx6("span", { title, className: badgeClass(tone, cx(size === "md" && "xc-badge--md", className)), children });
 }
 function StatusDot({ tone = "neutral", label, className }) {
   usePanelPrimitives();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "XENO Components \u2014 rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",