@xenosystem/components 0.9.1 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/catalog.json +87 -3
  2. package/dist/chrome/index.d.ts +45 -1
  3. package/dist/chrome/index.js +86 -0
  4. package/package.json +1 -1
package/dist/catalog.json CHANGED
@@ -730,7 +730,7 @@
730
730
  {
731
731
  "name": "PanelFrame",
732
732
  "file": "frame.tsx",
733
- "doc": "The canonical standalone panel frame — header bar + content well, separated by the panel gap.\r\n\n@example\r\n```tsx\r\n<PanelFrame title=\"Layers\" actions={<IconButton icon={<PlusIcon />} label=\"Add layer\" />}>\r\n <RowList>…</RowList>\r\n</PanelFrame>\r\n```",
733
+ "doc": "The canonical standalone panel frame — header bar + content well, separated by the panel gap.\n\n@example\n```tsx\n<PanelFrame title=\"Layers\" actions={<IconButton icon={<PlusIcon />} label=\"Add layer\" />}>\n <RowList>…</RowList>\n</PanelFrame>\n```",
734
734
  "props": "PanelFrameProps",
735
735
  "propList": [
736
736
  {
@@ -774,7 +774,7 @@
774
774
  {
775
775
  "name": "Toolbar",
776
776
  "file": "frame.tsx",
777
- "doc": "A dense horizontal control strip. Height matches the panel header so a toolbar stacked under a\r\nframe header reads as one continuous chrome band.\r\n\n@example\r\n```tsx\r\n<Toolbar left={<SearchField value={q} onChange={setQ} />} right={<IconButton … />} />\r\n```",
777
+ "doc": "A dense horizontal control strip. Height matches the panel header so a toolbar stacked under a\nframe header reads as one continuous chrome band.\n\n@example\n```tsx\n<Toolbar left={<SearchField value={q} onChange={setQ} />} right={<IconButton … />} />\n```",
778
778
  "props": "ToolbarProps",
779
779
  "propList": [
780
780
  {
@@ -858,7 +858,7 @@
858
858
  {
859
859
  "name": "ScrollArea",
860
860
  "file": "frame.tsx",
861
- "doc": "A flex-filling scroll container with the canonical thin rectangular thumb and an unbroken\r\nheight chain (`flex: 1 1 0; min-height: 0`) — the shape DESIGN_SYSTEM §3.1 requires so panels\r\nnever reach for `max-height: calc(100vh - N)`.",
861
+ "doc": "A flex-filling scroll container with the canonical thin rectangular thumb and an unbroken\nheight chain (`flex: 1 1 0; min-height: 0`) — the shape DESIGN_SYSTEM §3.1 requires so panels\nnever reach for `max-height: calc(100vh - N)`.",
862
862
  "props": "ScrollAreaProps",
863
863
  "propList": [
864
864
  {
@@ -875,6 +875,90 @@
875
875
  }
876
876
  ]
877
877
  },
878
+ {
879
+ "name": "Column",
880
+ "file": "frame.tsx",
881
+ "doc": "The panel's vertical stack — a toolbar, a flexing body, a status bar — filling the panel with an\nunbroken height chain (`height: 100%; min-height: 0`). Every block wrote `<div style={{ display:\n'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>` by hand; as a unit it is the root\na declaration can name.",
882
+ "props": "ColumnProps",
883
+ "propList": [
884
+ {
885
+ "name": "children",
886
+ "type": "ReactNode",
887
+ "optional": true,
888
+ "doc": ""
889
+ },
890
+ {
891
+ "name": "className",
892
+ "type": "string",
893
+ "optional": true,
894
+ "doc": ""
895
+ }
896
+ ]
897
+ },
898
+ {
899
+ "name": "Stack",
900
+ "file": "frame.tsx",
901
+ "doc": "A padded, gapped group of children — the `<div style={{ padding: 8, display: 'flex', gap }}>` that\nappeared in nine places in one block. As a unit its spacing is the family's, and a declaration can\nname it.",
902
+ "props": "StackProps",
903
+ "propList": [
904
+ {
905
+ "name": "children",
906
+ "type": "ReactNode",
907
+ "optional": true,
908
+ "doc": ""
909
+ },
910
+ {
911
+ "name": "direction",
912
+ "type": "'column' | 'row'",
913
+ "optional": true,
914
+ "doc": "`column` (default) or `row`."
915
+ },
916
+ {
917
+ "name": "gap",
918
+ "type": "number",
919
+ "optional": true,
920
+ "doc": "Gap between children, in px. Default 2 (column) / 6 (row)."
921
+ },
922
+ {
923
+ "name": "pad",
924
+ "type": "'none' | 'gutter' | 'inset'",
925
+ "optional": true,
926
+ "doc": "Inner padding: `none`, `gutter` (default, the panel gutter), or `inset` (gutter sides, none above)."
927
+ },
928
+ {
929
+ "name": "className",
930
+ "type": "string",
931
+ "optional": true,
932
+ "doc": ""
933
+ }
934
+ ]
935
+ },
936
+ {
937
+ "name": "Text",
938
+ "file": "frame.tsx",
939
+ "doc": "",
940
+ "props": "TextProps",
941
+ "propList": [
942
+ {
943
+ "name": "children",
944
+ "type": "ReactNode",
945
+ "optional": true,
946
+ "doc": ""
947
+ },
948
+ {
949
+ "name": "role",
950
+ "type": "'title' | 'body' | 'meta' | 'caption' | 'number'",
951
+ "optional": true,
952
+ "doc": "`title` — a heading line; `body` (default); `meta` — a secondary line (email under a name);\n`caption` — a standing note (the smallest reading size); `number` — tabular figures for amounts.\nThe quiet roles use the muted-text tone: reading text is never dimmed with opacity (3:1 or worse)."
953
+ },
954
+ {
955
+ "name": "className",
956
+ "type": "string",
957
+ "optional": true,
958
+ "doc": ""
959
+ }
960
+ ]
961
+ },
878
962
  {
879
963
  "name": "Badge",
880
964
  "file": "indicators.tsx",
package/dist/chrome/index.d.ts CHANGED
@@ -93,6 +93,47 @@ interface ScrollAreaProps {
93
93
  * never reach for `max-height: calc(100vh - N)`.
94
94
  */
95
95
  declare function ScrollArea({ children, className }: ScrollAreaProps): ReactNode;
96
+ /** Props for {@link Column}. */
97
+ interface ColumnProps {
98
+ children?: ReactNode;
99
+ className?: string;
100
+ }
101
+ /**
102
+ * The panel's vertical stack — a toolbar, a flexing body, a status bar — filling the panel with an
103
+ * unbroken height chain (`height: 100%; min-height: 0`). Every block wrote `<div style={{ display:
104
+ * 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>` by hand; as a unit it is the root
105
+ * a declaration can name.
106
+ */
107
+ declare function Column({ children, className }: ColumnProps): ReactNode;
108
+ /** Props for {@link Stack}. */
109
+ interface StackProps {
110
+ children?: ReactNode;
111
+ /** `column` (default) or `row`. */
112
+ direction?: 'column' | 'row';
113
+ /** Gap between children, in px. Default 2 (column) / 6 (row). */
114
+ gap?: number;
115
+ /** Inner padding: `none`, `gutter` (default, the panel gutter), or `inset` (gutter sides, none above). */
116
+ pad?: 'none' | 'gutter' | 'inset';
117
+ className?: string;
118
+ }
119
+ /**
120
+ * A padded, gapped group of children — the `<div style={{ padding: 8, display: 'flex', gap }}>` that
121
+ * appeared in nine places in one block. As a unit its spacing is the family's, and a declaration can
122
+ * name it.
123
+ */
124
+ declare function Stack({ children, direction, gap, pad, className }: StackProps): ReactNode;
125
+ /** Props for {@link Text}. */
126
+ interface TextProps {
127
+ children?: ReactNode;
128
+ /**
129
+ * `title` — a heading line; `body` (default); `meta` — a secondary line (email under a name);
130
+ * `caption` — a standing note (the smallest reading size); `number` — tabular figures for amounts.
131
+ * The quiet roles use the muted-text tone: reading text is never dimmed with opacity (3:1 or worse).
132
+ */
133
+ role?: 'title' | 'body' | 'meta' | 'caption' | 'number';
134
+ className?: string;
135
+ }
136
+ declare function Text({ children, role, className }: TextProps): ReactNode;
96
137
 
97
138
  /**
98
139
  * `Section` — the collapsible titled group.
@@ -1170,6 +1211,9 @@ declare const COMPONENTS: {
1170
1211
  readonly 'chrome/ToolbarGroup': typeof ToolbarGroup;
1171
1212
  readonly 'chrome/Divider': typeof Divider;
1172
1213
  readonly 'chrome/ScrollArea': typeof ScrollArea;
1214
+ readonly 'chrome/Column': typeof Column;
1215
+ readonly 'chrome/Stack': typeof Stack;
1216
+ readonly 'chrome/Text': typeof Text;
1173
1217
  readonly 'chrome/Badge': typeof Badge;
1174
1218
  readonly 'chrome/StatusDot': typeof StatusDot;
1175
1219
  readonly 'chrome/StatusBadge': typeof StatusBadge;
@@ -1205,4 +1249,4 @@ interface GalleryEntry {
1205
1249
  /** The entries, one per unit × state. Adding a unit to {@link COMPONENTS} without an entry here fails the family's test. */
1206
1250
  declare function gallery(): GalleryEntry[];
1207
1251
 
1208
- export { Badge, type BadgeProps, 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, Composer, type ComposerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldGroup, type FieldGroupProps, type FieldProps, type GalleryEntry, IconButton, type IconButtonProps, IconFrame, type IconFrameProps, LoadingState, type LoadingStateProps, PANEL_COLORS, PANEL_DISABLED_OPACITY, PANEL_METRICS, PANEL_PRIMITIVES_CSS, PANEL_PRIMITIVES_STYLE_ID, PANEL_TONES, type PanelColors, PanelFrame, type PanelFrameProps, type PanelMetrics, type PanelTone, type PrimitivesInjectTarget, ProportionBar, type ProportionBarProps, type ProportionSegment, Row, RowList, type RowListProps, type RowProps, type RowState, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, SearchGlyph, Section, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Sparkline, type SparklineProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, TextButton, type TextButtonProps, Toggle, type ToggleProps, Toolbar, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, badgeClass, composerWantsSubmit, cx, dotClass, ensurePanelPrimitivesInjected, gallery, iconButtonClass, nextSegmentValue, rowClass, sectionClass, usePanelPrimitives };
1252
+ export { Badge, type BadgeProps, 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, Column, type ColumnProps, Composer, type ComposerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldGroup, type FieldGroupProps, type FieldProps, type GalleryEntry, IconButton, type IconButtonProps, IconFrame, type IconFrameProps, LoadingState, type LoadingStateProps, PANEL_COLORS, PANEL_DISABLED_OPACITY, PANEL_METRICS, PANEL_PRIMITIVES_CSS, PANEL_PRIMITIVES_STYLE_ID, PANEL_TONES, type PanelColors, PanelFrame, type PanelFrameProps, type PanelMetrics, type PanelTone, type PrimitivesInjectTarget, ProportionBar, type ProportionBarProps, type ProportionSegment, Row, RowList, type RowListProps, type RowProps, type RowState, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, SearchGlyph, Section, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Sparkline, type SparklineProps, Stack, type StackProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, Text, TextButton, type TextButtonProps, type TextProps, Toggle, type ToggleProps, Toolbar, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, badgeClass, composerWantsSubmit, cx, dotClass, ensurePanelPrimitivesInjected, gallery, iconButtonClass, nextSegmentValue, rowClass, sectionClass, usePanelPrimitives };
package/dist/chrome/index.js CHANGED
@@ -53,6 +53,9 @@ var CLS_STAT_SUB = "xc-stat-sub";
53
53
  var CLS_BAR = "xc-bar";
54
54
  var CLS_BAR_SEGMENT = "xc-bar-segment";
55
55
  var CLS_SCROLL = "xc-scroll";
56
+ var CLS_COLUMN = "xc-column";
57
+ var CLS_STACK = "xc-stack";
58
+ var CLS_TEXT = "xc-text";
56
59
  var PANEL_TONES = Object.freeze([
57
60
  "neutral",
58
61
  "info",
@@ -655,6 +658,50 @@ div.xc-section-trigger {
655
658
  color: ${DIM};
656
659
  }
657
660
 
661
+ /* \u2500\u2500 Column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
662
+ .xc-column {
663
+ display: flex;
664
+ flex-direction: column;
665
+ height: 100%;
666
+ min-height: 0;
667
+ }
668
+
669
+ /* \u2500\u2500 Stack \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
670
+ .xc-stack {
671
+ display: flex;
672
+ min-width: 0;
673
+ }
674
+ .xc-stack--column { flex-direction: column; }
675
+ .xc-stack--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
676
+ .xc-stack--pad-gutter { padding: ${PANEL_METRICS.gutter}px; }
677
+ .xc-stack--pad-inset { padding: 0 ${PANEL_METRICS.gutter}px ${PANEL_METRICS.gutter}px; }
678
+ .xc-stack--pad-none { padding: 0; }
679
+
680
+ /* \u2500\u2500 Text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
681
+ .xc-text {
682
+ display: block;
683
+ min-width: 0;
684
+ color: ${FG};
685
+ font-size: ${PANEL_METRICS.fontBody}px;
686
+ line-height: 1.4;
687
+ }
688
+ .xc-text--title {
689
+ font-size: ${PANEL_METRICS.fontBody}px;
690
+ font-weight: 600;
691
+ }
692
+ .xc-text--meta {
693
+ font-size: ${PANEL_METRICS.fontMeta}px;
694
+ color: ${MUTED};
695
+ }
696
+ .xc-text--caption {
697
+ font-size: ${PANEL_METRICS.fontMeta}px;
698
+ color: ${MUTED};
699
+ }
700
+ .xc-text--number {
701
+ font-size: ${PANEL_METRICS.fontMeta}px;
702
+ font-variant-numeric: tabular-nums;
703
+ }
704
+
658
705
  /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
659
706
  .xc-composer {
660
707
  display: block;
@@ -1150,6 +1197,19 @@ function ScrollArea({ children, className }) {
1150
1197
  usePanelPrimitives();
1151
1198
  return /* @__PURE__ */ jsx("div", { className: cx(CLS_SCROLL, className), children });
1152
1199
  }
1200
+ function Column({ children, className }) {
1201
+ usePanelPrimitives();
1202
+ return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), children });
1203
+ }
1204
+ function Stack({ children, direction = "column", gap, pad = "gutter", className }) {
1205
+ usePanelPrimitives();
1206
+ const g = gap ?? (direction === "row" ? 6 : 2);
1207
+ return /* @__PURE__ */ jsx("div", { className: cx(CLS_STACK, `${CLS_STACK}--${direction}`, `${CLS_STACK}--pad-${pad}`, className), style: { gap: g }, children });
1208
+ }
1209
+ function Text({ children, role = "body", className }) {
1210
+ usePanelPrimitives();
1211
+ return /* @__PURE__ */ jsx("span", { className: cx(CLS_TEXT, `${CLS_TEXT}--${role}`, className), children });
1212
+ }
1153
1213
 
1154
1214
  // src/chrome/section.tsx
1155
1215
  import { useState as useState3 } from "react";
@@ -1792,6 +1852,9 @@ var COMPONENTS = {
1792
1852
  "chrome/ToolbarGroup": ToolbarGroup,
1793
1853
  "chrome/Divider": Divider,
1794
1854
  "chrome/ScrollArea": ScrollArea,
1855
+ "chrome/Column": Column,
1856
+ "chrome/Stack": Stack,
1857
+ "chrome/Text": Text,
1795
1858
  "chrome/Badge": Badge,
1796
1859
  "chrome/StatusDot": StatusDot,
1797
1860
  "chrome/StatusBadge": StatusBadge,
@@ -1857,6 +1920,26 @@ function gallery() {
1857
1920
  /* @__PURE__ */ jsx7(Divider, { vertical: true }),
1858
1921
  /* @__PURE__ */ jsx7("span", { children: "b" })
1859
1922
  ] }));
1923
+ door("Column", "default", () => /* @__PURE__ */ jsxs7(Column, { children: [
1924
+ /* @__PURE__ */ jsx7(Toolbar, { left: /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Action" }) }),
1925
+ /* @__PURE__ */ jsx7(ScrollArea, { children: /* @__PURE__ */ jsx7("p", { style: { margin: 8 }, children: "body" }) }),
1926
+ /* @__PURE__ */ jsx7(StatusBar, { left: "status" })
1927
+ ] }));
1928
+ form("Stack", "column", () => /* @__PURE__ */ jsxs7(Stack, { children: [
1929
+ /* @__PURE__ */ jsx7(Text, { role: "title", children: "Emilian" }),
1930
+ /* @__PURE__ */ jsx7(Text, { role: "meta", children: "emilian@bnkrsys.com" })
1931
+ ] }));
1932
+ form("Stack", "row", () => /* @__PURE__ */ jsxs7(Stack, { direction: "row", pad: "inset", children: [
1933
+ /* @__PURE__ */ jsx7(Badge, { children: "Pro" }),
1934
+ /* @__PURE__ */ jsx7(Badge, { tone: "success", children: "active" })
1935
+ ] }));
1936
+ form("Text", "roles", () => /* @__PURE__ */ jsxs7(Stack, { children: [
1937
+ /* @__PURE__ */ jsx7(Text, { role: "title", children: "Title line" }),
1938
+ /* @__PURE__ */ jsx7(Text, { children: "Body line" }),
1939
+ /* @__PURE__ */ jsx7(Text, { role: "meta", children: "Meta line" }),
1940
+ /* @__PURE__ */ jsx7(Text, { role: "caption", children: "A standing caption." }),
1941
+ /* @__PURE__ */ jsx7(Text, { role: "number", children: "1,204.00" })
1942
+ ] }));
1860
1943
  door("ScrollArea", "default", () => /* @__PURE__ */ jsx7(ScrollArea, { children: Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ jsxs7("p", { style: { margin: 4 }, children: [
1861
1944
  "line ",
1862
1945
  i + 1
@@ -1947,6 +2030,7 @@ export {
1947
2030
  COMPONENTS,
1948
2031
  ChevronGlyph,
1949
2032
  ClearGlyph,
2033
+ Column,
1950
2034
  Composer,
1951
2035
  Divider,
1952
2036
  EmptyState,
@@ -1972,10 +2056,12 @@ export {
1972
2056
  Section,
1973
2057
  SegmentedControl,
1974
2058
  Sparkline,
2059
+ Stack,
1975
2060
  StatTile,
1976
2061
  StatusBadge,
1977
2062
  StatusBar,
1978
2063
  StatusDot,
2064
+ Text,
1979
2065
  TextButton,
1980
2066
  Toggle,
1981
2067
  Toolbar,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xenosystem/components",
3
- "version": "0.9.1",
3
+ "version": "0.9.3",
4
4
  "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.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",