@xenosystem/components 0.9.1 → 0.9.2

package/dist/catalog.json

@@ -730,7 +730,7 @@
         {
           "name": "PanelFrame",
           "file": "frame.tsx",
-          "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```",
+          "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```",
           "props": "PanelFrameProps",
           "propList": [
             {
@@ -774,7 +774,7 @@
         {
           "name": "Toolbar",
           "file": "frame.tsx",
-          "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```",
+          "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```",
           "props": "ToolbarProps",
           "propList": [
             {
@@ -858,7 +858,7 @@
         {
           "name": "ScrollArea",
           "file": "frame.tsx",
-          "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)`.",
+          "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)`.",
           "props": "ScrollAreaProps",
           "propList": [
             {
@@ -875,6 +875,26 @@
             }
           ]
         },
+        {
+          "name": "Column",
+          "file": "frame.tsx",
+          "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.",
+          "props": "ColumnProps",
+          "propList": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
         {
           "name": "Badge",
           "file": "indicators.tsx",

package/dist/chrome/index.d.ts

@@ -93,6 +93,18 @@ interface ScrollAreaProps {
  * never reach for `max-height: calc(100vh - N)`.
  */
 declare function ScrollArea({ children, className }: ScrollAreaProps): ReactNode;
+/** Props for {@link Column}. */
+interface ColumnProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The panel's vertical stack — a toolbar, a flexing body, a status bar — filling the panel with an
+ * unbroken height chain (`height: 100%; min-height: 0`). Every block wrote `<div style={{ display:
+ * 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>` by hand; as a unit it is the root
+ * a declaration can name.
+ */
+declare function Column({ children, className }: ColumnProps): ReactNode;
 
 /**
  * `Section` — the collapsible titled group.
@@ -1170,6 +1182,7 @@ declare const COMPONENTS: {
     readonly 'chrome/ToolbarGroup': typeof ToolbarGroup;
     readonly 'chrome/Divider': typeof Divider;
     readonly 'chrome/ScrollArea': typeof ScrollArea;
+    readonly 'chrome/Column': typeof Column;
     readonly 'chrome/Badge': typeof Badge;
     readonly 'chrome/StatusDot': typeof StatusDot;
     readonly 'chrome/StatusBadge': typeof StatusBadge;
@@ -1205,4 +1218,4 @@ interface GalleryEntry {
 /** The entries, one per unit × state. Adding a unit to {@link COMPONENTS} without an entry here fails the family's test. */
 declare function gallery(): GalleryEntry[];
 
-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 };
+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, 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 };

package/dist/chrome/index.js

@@ -53,6 +53,7 @@ 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 CLS_COLUMN = "xc-column";
 var PANEL_TONES = Object.freeze([
   "neutral",
   "info",
@@ -655,6 +656,14 @@ div.xc-section-trigger {
   color: ${DIM};
 }
 
+/* \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 */
+.xc-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
 /* \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 */
 .xc-composer {
   display: block;
@@ -1150,6 +1159,10 @@ function ScrollArea({ children, className }) {
   usePanelPrimitives();
   return /* @__PURE__ */ jsx("div", { className: cx(CLS_SCROLL, className), children });
 }
+function Column({ children, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), children });
+}
 
 // src/chrome/section.tsx
 import { useState as useState3 } from "react";
@@ -1792,6 +1805,7 @@ var COMPONENTS = {
   "chrome/ToolbarGroup": ToolbarGroup,
   "chrome/Divider": Divider,
   "chrome/ScrollArea": ScrollArea,
+  "chrome/Column": Column,
   "chrome/Badge": Badge,
   "chrome/StatusDot": StatusDot,
   "chrome/StatusBadge": StatusBadge,
@@ -1857,6 +1871,11 @@ function gallery() {
     /* @__PURE__ */ jsx7(Divider, { vertical: true }),
     /* @__PURE__ */ jsx7("span", { children: "b" })
   ] }));
+  door("Column", "default", () => /* @__PURE__ */ jsxs7(Column, { children: [
+    /* @__PURE__ */ jsx7(Toolbar, { left: /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Action" }) }),
+    /* @__PURE__ */ jsx7(ScrollArea, { children: /* @__PURE__ */ jsx7("p", { style: { margin: 8 }, children: "body" }) }),
+    /* @__PURE__ */ jsx7(StatusBar, { left: "status" })
+  ] }));
   door("ScrollArea", "default", () => /* @__PURE__ */ jsx7(ScrollArea, { children: Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ jsxs7("p", { style: { margin: 4 }, children: [
     "line ",
     i + 1
@@ -1947,6 +1966,7 @@ export {
   COMPONENTS,
   ChevronGlyph,
   ClearGlyph,
+  Column,
   Composer,
   Divider,
   EmptyState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "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",