@tcn/ui 0.9.0 → 0.10.0

package/src/stacks/box/top_resize_handle.tsx

@@ -7,8 +7,8 @@ import { clsx } from 'clsx';
 export interface TopResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onHeightResize?: (value: number) => void;
-  onHeightResizeEnd?: (value: number) => void;
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 export function TopResizeHandle({
   targetRef,
@@ -20,7 +20,8 @@ export function TopResizeHandle({
     targetRef,
     onHeightResize,
     onHeightResizeEnd,
-    true
+    true,
+    'top'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/collapsible_box.stories.tsx

@@ -1,13 +1,13 @@
+import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
+import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 import React from 'react';
 import { Button, SlimButton } from '../actions/index.js';
-import { HCollapsibleBox as HComponent } from './h_collapsible_box.js';
-import { VCollapsibleBox as VComponent } from './v_collapsible_box.js';
 import { Title } from '../typography/index.js';
-import { Spacer } from './spacer.js';
+import { HCollapsibleBox } from './h_collapsible_box.js';
 import { HStack } from './h_stack.js';
+import { Spacer } from './spacer.js';
+import { VCollapsibleBox } from './v_collapsible_box.js';
 import { VStack } from './v_stack.js';
-import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
-import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 
 export default {
   title: 'Stacks/Collapsible Box',
@@ -49,13 +49,13 @@ export function CollapsibleBox() {
           <Button onClick={() => setVHopen(c => !c)}>toggle vertical collapse</Button>
           <Button onClick={() => setHOpen(c => !c)}>toggle horizontal collapse</Button>
         </VStack>
-        <VComponent open={vOpen} enableResizeOnTop>
+        <VCollapsibleBox open={vOpen} enableResizeOnTop>
           <MyPanel />
-        </VComponent>
+        </VCollapsibleBox>
       </VStack>
-      <HComponent open={hOpen} enableResizeOnStart>
+      <HCollapsibleBox open={hOpen} enableResizeOnStart>
         <MyPanel />
-      </HComponent>
+      </HCollapsibleBox>
     </HStack>
   );
 }
@@ -67,9 +67,9 @@ export function VerticalCollapsibleBox() {
       <HStack height="flex" hAlign="end" gap="16px">
         <Button onClick={() => setOpen(c => !c)}>toggle collapse</Button>
       </HStack>
-      <VComponent open={open} enableResizeOnTop defaultHeight="300px">
+      <VCollapsibleBox open={open} enableResizeOnTop defaultHeight="300px">
         <MyPanel />
-      </VComponent>
+      </VCollapsibleBox>
     </VStack>
   );
 }

package/src/stacks/h_collapsible_box.tsx

@@ -1,6 +1,6 @@
+import { clsx } from 'clsx';
 import React, { useLayoutEffect } from 'react';
 import { useForkRef } from '../utils/index.js';
-import { clsx } from 'clsx';
 import { Box, BoxProps } from './box/box.js';
 import styles from './collapsible_box.module.css';
 import { useIsCollapsed } from './utils/use_is_collapsed.js';
@@ -32,13 +32,13 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="horizontal"
       data-is-resizing={resizing}
-      onWidthResize={width => {
+      onWidthResize={(width, origin, delta) => {
         setIsResizing(true);
-        props.onWidthResize?.(width);
+        props.onWidthResize?.(width, origin, delta);
       }}
-      onWidthResizeEnd={width => {
+      onWidthResizeEnd={(width, origin) => {
         setIsResizing(false);
-        props.onWidthResizeEnd?.(width);
+        props.onWidthResizeEnd?.(width, origin);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);
       }}
       className={clsx(

package/src/stacks/v_collapsible_box.tsx

@@ -32,14 +32,14 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="vertical"
       data-is-resizing={resizing}
-      onHeightResize={height => {
+      onHeightResize={(height, origin, delta) => {
         setIsResizing(true);
-        props.onHeightResize?.(height);
+        props.onHeightResize?.(height, origin, delta);
       }}
-      onHeightResizeEnd={height => {
+      onHeightResizeEnd={(height, origin) => {
         setIsResizing(false);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
-        props.onHeightResizeEnd?.(height);
+        props.onHeightResizeEnd?.(height, origin);
       }}
       className={clsx(
         props.className,

package/src/surfaces/index.ts

@@ -3,8 +3,7 @@ export * from './card/card.js';
 export * from './confirm/confirm.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
-export * from './panel/h_panel.js';
-export * from './panel/v_panel.js';
+export * from './panel/panel.js';
 export * from './popover/popover.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';

package/src/surfaces/panel/__stories__/panel.stories.tsx

@@ -6,7 +6,7 @@ import { Heading, Section, VBody } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
 import { Box, HStack, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
-import { VPanel } from '../v_panel.js';
+import { Panel } from '../panel.js';
 // Styles
 import styles from './panel_stories.module.css';
 import { TTable, TBody, TD, TH, THead, TR } from '../../../layouts/table/table.js';
@@ -23,7 +23,7 @@ import { BodyText } from '../../../typography/index.js';
 
 export default {
   title: 'Surfaces/Panel',
-  component: VPanel,
+  component: Panel,
   tags: ['autodocs'],
 };
 
@@ -71,8 +71,8 @@ const UtilGroupExample = () => {
 
 export const Default = () => {
   return (
-    <div className={styles['stories-container']}>
-      <VPanel maxHeight="600px">
+    <Box className={styles['stories-container']}>
+      <Panel maxHeight="600px">
         <Header>
           <Title emphasis="strong">Panel Primary Header</Title>
           <Spacer />
@@ -109,16 +109,16 @@ export const Default = () => {
           <Button hierarchy="secondary">Secondary</Button>
           <Button hierarchy="primary">Primary</Button>
         </Footer>
-      </VPanel>
-    </div>
+      </Panel>
+    </Box>
   );
 };
 
 export const WithTable = () => {
   return (
-    <div className={styles['stories-container']}>
+    <Box className={styles['stories-container']}>
       <HStack gap="16px" maxHeight="600px" height="100%" maxWidth="1440px">
-        <VPanel minWidth="300px">
+        <Panel minWidth="300px">
           <Header>
             <Title emphasis="strong">Table Title</Title>
             <Spacer />
@@ -190,8 +190,8 @@ export const WithTable = () => {
               </Button>
             </HStack>
           </Footer>
-        </VPanel>
-        <VPanel maxHeight="600px" width="300px" minWidth="300px">
+        </Panel>
+        <Panel maxHeight="600px" width="300px" minWidth="300px">
           <Header>
             <Title emphasis="strong">John Doe</Title>
             <Spacer />
@@ -210,8 +210,8 @@ export const WithTable = () => {
               <BodyText>Email: john.doe@example.com</BodyText>
             </Section>
           </VBody>
-        </VPanel>
+        </Panel>
       </HStack>
-    </div>
+    </Box>
   );
 };

package/src/surfaces/panel/__stories__/panel_stories.module.css

@@ -19,8 +19,8 @@
 
 .stories-container {
   width: 100%;
-  height: 100%;
-  padding: 16px;
+  height: 100vh;
+  min-height: 400px;
   background-color: #ccc;
-  overflow: auto;
+  padding: 16px;
 }

package/src/surfaces/panel/panel.module.css

@@ -1,10 +1,5 @@
 @layer tcn-system {
-  :where(.panel-stack) {
-    width: 100%;
+  .panel {
     height: 100%;
-    overflow: auto;
   }
-  /* .page-stack > :global(.stack) {
-  gap: var(--gap);
-} */
 }

package/src/surfaces/panel/panel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
+
+import styles from './panel.module.css';
+
+export type PanelProps = ScaffoldProps;
+
+export const Panel = React.forwardRef<HTMLElement, PanelProps>(function Panel(
+  { children, className, ...props }: PanelProps,
+  ref
+) {
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx(styles['panel'], 'tcn-surface', 'tcn-panel', className)}
+      {...props}
+    >
+      {children}
+    </Scaffold>
+  );
+});

package/src/themes/theme.tsx

@@ -10,9 +10,10 @@ import layers from '../css/layers.css?raw';
 export interface ThemeProps extends BoxProps {
   styleSheets: CSSStyleSheet[];
   children: React.ReactNode;
+  className?: string;
 }
 
-export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
+export function Theme({ styleSheets, children, className, ...boxProps }: ThemeProps) {
   useLayoutEffect(() => {
     document.adoptedStyleSheets = styleSheets;
   }, [styleSheets]);
@@ -33,7 +34,10 @@ export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
   }, []);
 
   return (
-    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>
+    <Box
+      className={clsx('tcn-theme-root', styles['tcn-theme-provider'], className)}
+      {...boxProps}
+    >
       {children}
     </Box>
   );

package/src/themes/themes/ergo/__stories__/material.stories.tsx

@@ -3,10 +3,9 @@ import { VStack } from '../../../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { Divider, Footer, Header, VBody } from '../../../../layouts/index.js';
-import { VPanel } from '../../../../surfaces/index.js';
+import { Panel } from '../../../../surfaces/index.js';
 import { Button } from '../../../../actions/button/button/button.js';
 import { Spacer } from '../../../../stacks/spacer.js';
-import { SlimButton } from '../../../../actions/button/slim_button/slim_button.js';
 import { SB_TonePicker } from './components/tone_picker/sb_tone_picker.js';
 import { formatHSLString, getContrastText, parseHSL } from './utils.js';
 import { SB_MaterialPicker } from './components/material_picker/sb_material_picker.js';
@@ -86,7 +85,7 @@ export const DynamicSurface = (args: {
         <Title>Ergo Theme: Materials and Surfaces</Title>
       </Header>
       <SB_MaterialPicker handleSurfaceClick={handleSurfaceClick} />
-      <VPanel
+      <Panel
         minHeight="200px"
         maxHeight="700px"
         height="100%"
@@ -95,30 +94,30 @@ export const DynamicSurface = (args: {
         <Header>
           Enabled Utilities
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <PlusIcon />
-          </SlimButton>
-          <SlimButton hierarchy="secondary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <PlusIcon />
-          </SlimButton>
+          </Button>
           <Divider vertical length="md" />
-          <SlimButton hierarchy="primary">
+          <Button utility hierarchy="primary">
             <PlusIcon />
-          </SlimButton>
+          </Button>
         </Header>
         <Header>
           Disabled Utilities
           <Spacer />
-          <SlimButton hierarchy="tertiary" disabled>
+          <Button utility hierarchy="tertiary" disabled>
             <PlusIcon />
-          </SlimButton>
-          <SlimButton hierarchy="secondary" disabled>
+          </Button>
+          <Button utility hierarchy="secondary" disabled>
             <PlusIcon />
-          </SlimButton>
+          </Button>
           <Divider vertical length="md" />
-          <SlimButton hierarchy="primary" disabled>
+          <Button utility hierarchy="primary" disabled>
             <PlusIcon />
-          </SlimButton>
+          </Button>
         </Header>
         <VBody>
           <SB_TonePicker />
@@ -143,7 +142,7 @@ export const DynamicSurface = (args: {
           <Button hierarchy="secondary">Secondary</Button>
           <Button hierarchy="primary">Primary</Button>
         </Footer>
-      </VPanel>
+      </Panel>
       <Header></Header>
     </VStack>
   );

package/src/themes/themes/ergo/ergo_theme.css

@@ -579,6 +579,18 @@
     color: var(--on-material);
   }
 
+  /* Divider: use material-line; emphasis variants for strong/faint */
+  .tcn-divider-line,
+  .tcn-divider-line[data-emphasis="normal"] {
+    background: var(--material-line);
+  }
+  .tcn-divider-line[data-emphasis="strong"] {
+    background: color-mix(in srgb, var(--material-line) 80%, black 20%);
+  }
+  .tcn-divider-line[data-emphasis="faint"] {
+    background: color-mix(in srgb, var(--material-line) 80%, white 20%);
+  }
+
   /* ===== SURFACES ===== */
   .tcn-draggable[data-is-draggable="true"] {
     .tcn-drag-handle {
@@ -606,7 +618,22 @@
       border-radius: var(--shape-radius-medium);
     }
   }
+  /* Rail: */
+  .tcn-utility-strip {
+    min-width: var(--bar-md);
+  }
+
+  .tcn-utility-strip,
+  .tcn-side {
+    padding-block: var(--padding-medium);
+    gap: var(--gap-medium);
+  }
 
+  .tcn-rail {
+    :where(.tcn-body) {
+      gap: var(--gap-medium);
+    }
+  }
   /* Scaffold: */
   .tcn-footer,
   .tcn-header,

package/dist/h_body.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._h-body_d56f4f1){min-width:0;flex-grow:1;height:100%}}

package/dist/h_panel.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._panel-stack_f1896f3){width:100%;height:100%;overflow:auto}}

package/dist/header.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._header_3155fa4){width:100%;min-height:0;padding:var(--padding) var(--padding-large);gap:var(--gap)}}

package/dist/layouts/rail/main/main.d.ts

@@ -1,6 +0,0 @@
-import { default as React } from 'react';
-import { HStackProps } from '../../../stacks/h_stack.js';
-export interface MainProps extends Omit<HStackProps, 'as'> {
-}
-export declare const Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=main.d.ts.map

package/dist/layouts/rail/main/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/layouts/rail/main/main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAKtE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAG7D,eAAO,MAAM,IAAI,+EAef,CAAC"}

package/dist/layouts/rail/main/main.js

@@ -1,21 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import i from "react";
-import { clsx as c } from "clsx";
-import { HStack as s } from "../../../stacks/h_stack.js";
-import '../../../main.css';const e = "_main_bc17de6", f = { main: e }, x = i.forwardRef(function({ children: t, className: o, overflowX: a = "auto", ...m }, n) {
-  return /* @__PURE__ */ r(
-    s,
-    {
-      ref: n,
-      as: "div",
-      overflowX: a,
-      className: c(f.main, o, "tcn-main"),
-      ...m,
-      children: t
-    }
-  );
-});
-export {
-  x as Main
-};
-//# sourceMappingURL=main.js.map

package/dist/layouts/rail/main/main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js","sources":["../../../../src/layouts/rail/main/main.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\n\n// Styles\nimport styles from './main.module.css';\n\nexport interface MainProps extends Omit<HStackProps, 'as'> {}\n\n// WIP: This component is not fully implemented.\nexport const Main = React.forwardRef<HTMLElement, MainProps>(function Main(\n  { children, className, overflowX = 'auto', ...props }: MainProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      overflowX={overflowX}\n      className={clsx(styles['main'], className, 'tcn-main')}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Main","React","children","className","overflowX","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;4CAUaA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,WAAAC,IAAY,QAAQ,GAAGC,EAAA,GAC9CC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAAF;AAAA,MACA,WAAWK,EAAKC,EAAO,MAASP,GAAW,UAAU;AAAA,MACpD,GAAGE;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/main.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._main_bc17de6){min-width:0;flex-grow:1;height:100%}}

package/dist/surfaces/panel/h_panel.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-export interface HPanelProps extends Omit<BoxProps, 'as'> {
-    vAlign?: Alignment;
-    hAlign?: Alignment;
-}
-export declare const HPanel: React.ForwardRefExoticComponent<HPanelProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=h_panel.d.ts.map

package/dist/surfaces/panel/h_panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/h_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,iFAmDjB,CAAC"}

package/dist/surfaces/panel/h_panel.js

@@ -1,60 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import u from "react";
-import { clsx as r } from "clsx";
-import { Box as x } from "../../stacks/box/box.js";
-import { HStack as i } from "../../stacks/h_stack.js";
-import '../../h_panel.css';const P = "_panel-stack_f1896f3", f = { "panel-stack": P }, B = u.forwardRef(function({
-  children: m,
-  width: k,
-  height: d,
-  minWidth: a,
-  maxWidth: t,
-  minHeight: n,
-  maxHeight: e,
-  hAlign: c,
-  vAlign: o = "start",
-  className: l,
-  ..._
-}, s) {
-  return /* @__PURE__ */ p(
-    x,
-    {
-      ref: s,
-      width: k,
-      height: d,
-      minWidth: a,
-      maxWidth: t,
-      minHeight: n,
-      maxHeight: e,
-      "data-h-alignment": c,
-      "data-v-alignment": o,
-      className: r(f.panel, l, "panel", "tcn-panel", "tcn-h-panel"),
-      ..._,
-      children: /* @__PURE__ */ p(
-        i,
-        {
-          as: "section",
-          minWidth: a,
-          maxWidth: t,
-          minHeight: n,
-          maxHeight: e,
-          hAlign: c,
-          vAlign: o,
-          ref: s,
-          className: r(
-            f["panel-stack"],
-            l,
-            "panel-stack",
-            "tcn-panel-stack"
-          ),
-          zIndex: 0,
-          children: m
-        }
-      )
-    }
-  );
-});
-export {
-  B as HPanel
-};
-//# sourceMappingURL=h_panel.js.map

package/dist/surfaces/panel/h_panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_panel.js","sources":["../../../src/surfaces/panel/h_panel.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\n// Styles\nimport styles from './panel.module.css';\n\nexport interface HPanelProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign,\n    vAlign = 'start',\n    className,\n    ...props\n  }: HPanelProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}\n      {...props}\n    >\n      <HStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['panel-stack'],\n          className,\n          'panel-stack',\n          'tcn-panel-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </HStack>\n    </Box>\n  );\n});\n"],"names":["HPanel","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","HStack"],"mappings":";;;;;4DAaaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM,EAAKC,EAAO,OAAUN,GAAW,SAAS,aAAa,aAAa;AAAA,MAC9E,GAAGC;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,aAAa;AAAA,YACpBN;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/surfaces/panel/v_panel.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-export type VPanelProps = ScaffoldProps;
-export declare const VPanel: React.ForwardRefExoticComponent<ScaffoldProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=v_panel.d.ts.map

package/dist/surfaces/panel/v_panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/v_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGlF,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC;AAExC,eAAO,MAAM,MAAM,mFAajB,CAAC"}

package/dist/surfaces/panel/v_panel.js

@@ -1,19 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import f from "react";
-import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
-import c from "clsx";
-const u = f.forwardRef(function({ children: r, className: o, ...t }, a) {
-  return /* @__PURE__ */ e(
-    n,
-    {
-      ref: a,
-      className: c("tcn-surface", "tcn-panel", "tcn-v-panel", o),
-      ...t,
-      children: r
-    }
-  );
-});
-export {
-  u as VPanel
-};
-//# sourceMappingURL=v_panel.js.map

package/dist/surfaces/panel/v_panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_panel.js","sources":["../../../src/surfaces/panel/v_panel.tsx"],"sourcesContent":["import React from 'react';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\nimport clsx from 'clsx';\n\nexport type VPanelProps = ScaffoldProps;\n\nexport const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel(\n  { children, className, ...props }: VPanelProps,\n  ref\n) {\n  return (\n    <Scaffold\n      ref={ref}\n      className={clsx('tcn-surface', 'tcn-panel', 'tcn-v-panel', className)}\n      {...props}\n    >\n      {children}\n    </Scaffold>\n  );\n});\n"],"names":["VPanel","React","children","className","props","ref","jsx","Scaffold","clsx"],"mappings":";;;;AAMO,MAAMA,IAASC,EAAM,WAAqC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAK,eAAe,aAAa,eAAeL,CAAS;AAAA,MACnE,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/utility_bar.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._utility-bar_3a92315){width:100%;min-height:0}}

package/dist/v_body.css

@@ -1 +0,0 @@
-@layer tcn-system{._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}}

package/src/layouts/header/header.module.css

@@ -1,8 +0,0 @@
-@layer tcn-system {
-  :where(.header) {
-    width: 100%;
-    min-height: 0;
-    padding: var(--padding) var(--padding-large);
-    gap: var(--gap);
-  }
-}

package/src/layouts/rail/__stories__/rail.stories.tsx

@@ -1,64 +0,0 @@
-import { Main } from '../main/main.js';
-import { Rail } from '../rail.js';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Side } from '../side/side.js';
-import { VStack } from '../../../stacks/v_stack.js';
-
-import styles from './rail_stories.module.css';
-
-const meta: Meta<typeof Rail> = {
-  title: 'Layouts/Rail',
-  component: Rail,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'A rail component that lays out content in a horizontal hierarchy.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Rail>;
-
-const Content = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <VStack hAlign="start" className={styles.content}>
-      {children}
-    </VStack>
-  );
-};
-
-export const Baseline: Story = {
-  args: {
-    height: '100vh',
-  },
-  render: () => (
-    <Rail height="100vh" className={styles.rail}>
-      <Side className={styles.side}>
-        <p>Side (Start)</p>
-        <p>Fills available space</p>
-        <p>Scrolls horizontally</p>
-      </Side>
-
-      <Main className={styles.main}>
-        <Content>
-          <p>Main</p>
-          <p>Fills available space</p>
-          <p>Scrolls horizontally</p>
-        </Content>
-        <Content />
-        <Content />
-        <Content />
-        <Content />
-      </Main>
-      <Side className={styles.side}>
-        <p>Side (End)</p>
-        <p>Fills available space</p>
-        <p>Scrolls horizontally</p>
-      </Side>
-    </Rail>
-  ),
-};