@tcn/ui 0.15.0 → 0.17.0

package/src/stacks/box/detect_resize_bounds.ts

@@ -11,6 +11,7 @@ export type DetectResizeBoundsResult = {
   hitMin: boolean;
   hitMax: boolean;
   clamped: boolean;
+  clampedSize: number | null;
 };
 
 const styleKeys = {
@@ -36,10 +37,12 @@ function detectByPixelValue(nextSize: number, min: string, max: string) {
   const maxPx = parsePx(max);
   const hitMin = minPx !== null && nextSize < minPx;
   const hitMax = maxPx !== null && nextSize > maxPx;
+  const clamped = hitMin || hitMax;
   return {
     hitMin,
     hitMax,
-    clamped: hitMin || hitMax,
+    clamped,
+    clampedSize: clamped ? (hitMin ? minPx : maxPx) : null,
   };
 }
 
@@ -76,6 +79,7 @@ export function detectResizeBounds({
       hitMin,
       hitMax,
       clamped,
+      clampedSize: clamped ? renderedSize : null,
     };
   } finally {
     // revert the style change

package/src/surfaces/card/card.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  .card {
+    height: auto;
+  }
+}

package/src/surfaces/card/card.stories.tsx

@@ -6,7 +6,10 @@ import { Box, Spacer } from '../../stacks/index.js';
 import { Title } from '../../typography/title/title.js';
 import { Button } from '../../actions/index.js';
 import { Card } from './card.js';
-import { Scaffold } from '../../layouts/index.js';
+import { Detail, Row, Rows, Scaffold } from '../../layouts/index.js';
+import { Key } from '../../tokens/key/key.js';
+import { Term } from '../../tokens/term/term.js';
+import { Value } from '../../tokens/value/value.js';
 
 // Styles
 import styles from './card_stories.module.css';
@@ -52,13 +55,68 @@ export const Default = () => {
           <Box className={styles['content-box']} />
           <Box className={styles['content-box']} />
         </Scaffold>
-        {/* Cards typically do not have a footer */}
-        {/* <Footer>
-          <Title>Footer</Title>
-          <Spacer />
-          <Button hierarchy="secondary">Secondary</Button>
-          <Button hierarchy="primary">Primary</Button>
-        </Footer> */}
+      </Card>
+    </div>
+  );
+};
+
+/**
+ * Rows inside a Card body. Fixed-height rows stack vertically with a
+ * fill row consuming remaining space — mirrors the Login Information
+ * card pattern from the app.
+ */
+export const CardWithRows = () => {
+  return (
+    <div className={styles['stories-container']}>
+      <Card maxHeight="500px" maxWidth="400px">
+        <Header>
+          <Title>Login Information</Title>
+        </Header>
+        <Scaffold>
+          <Rows>
+            <Row>
+              <Detail>
+                <Term>
+                  <Key>Username:</Key>
+                  <Value>1026223MinhtestCreateAgent1</Value>
+                </Term>
+                <Term>
+                  <Key>Email:</Key>
+                  <Value severity="encouraged">jsmith@example.com</Value>
+                </Term>
+              </Detail>
+            </Row>
+
+            <Row>
+              <Detail>
+                <Term>
+                  <Key>Force Password Reset:</Key>
+                  <Value>No</Value>
+                </Term>
+                <Term>
+                  <Key>Two-Factor Status:</Key>
+                  <Value severity="encouraged">Enabled</Value>
+                </Term>
+                <Term>
+                  <Key>Two-Factor Type:</Key>
+                  <Value>Email</Value>
+                </Term>
+              </Detail>
+            </Row>
+            <Row>
+              <Detail>
+                <Term>
+                  <Key>Access Token:</Key>
+                  <Value>••••••••••••</Value>
+                </Term>
+                <Term>
+                  <Key>Expiration Date:</Key>
+                  <Value>02/27/2024</Value>
+                </Term>
+              </Detail>
+            </Row>
+          </Rows>
+        </Scaffold>
       </Card>
     </div>
   );

package/src/surfaces/card/card.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import React from 'react';
 import { Scaffold, type ScaffoldProps } from '../../layouts/containers/scaffold.js';
-
+import styles from './card.module.css';
 export interface CardProps extends Omit<ScaffoldProps, 'as' | 'children'> {
   children?: React.ReactNode;
 }
@@ -11,7 +11,11 @@ export const Card = React.forwardRef<HTMLElement, CardProps>(function Card(
   ref
 ) {
   return (
-    <Scaffold ref={ref} className={clsx(className, 'tcn-surface', 'tcn-card')} {...props}>
+    <Scaffold
+      ref={ref}
+      className={clsx(className, styles.card, 'tcn-surface', 'tcn-card')}
+      {...props}
+    >
       {children}
     </Scaffold>
   );

package/src/surfaces/page/page.stories.tsx

@@ -1,11 +1,17 @@
+import { useState } from 'react';
 import { Header } from '../../layouts/header/header.js';
-import { Footer, Rail, Scaffold } from '../../layouts/index.js';
+import { Detail, Footer, Scaffold } from '../../layouts/index.js';
+import { Column } from '../../layouts/containers/columns/column.js';
+import { Columns } from '../../layouts/containers/columns/columns.js';
 import { BodyText } from '../../typography/body_text/body_text.js';
-import { Section } from '../../layouts/section/section.js';
 import { Title } from '../../typography/title/title.js';
 import { Page } from './page.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { Panel } from '../panel/panel.js';
+import { Card } from '../card/card.js';
+import { SBContent } from '../../layouts/__stories__/utils.js';
+import { Resizable } from '../../utils/resize/resizable.js';
+import { ResizeHandle } from '../../utils/resize/resize_handle.js';
 
 export default {
   title: 'Surfaces/Page',
@@ -21,9 +27,9 @@ export const Baseline = () => {
           <Title>Page Header</Title>
         </Header>
         <Scaffold>
-          <Section>
+          <Detail>
             <BodyText>Page Content</BodyText>
-          </Section>
+          </Detail>
         </Scaffold>
 
         <Footer>
@@ -34,33 +40,111 @@ export const Baseline = () => {
   );
 };
 
-export const WithPanelBody = () => {
+export const WithColumns = () => {
   return (
     <ZStack height="100%" width="100%" minHeight="600px" minWidth="600px">
       <Page>
-        <Rail>
-          <Panel>
-            <Header>
-              <Title>Primary</Title>
-            </Header>
+        <Columns>
+          <Column minWidth="400px">
             <Scaffold>
-              <Section>
-                <BodyText>Page Content</BodyText>
-              </Section>
-            </Scaffold>
-          </Panel>
+              <Header>
+                <Title>Tooling Header</Title>
+              </Header>
+              <Scaffold>
+                <Detail>
+                  <Card>
+                    <Header>Tooling 1</Header>
+                    <Scaffold>
+                      <SBContent />
+                    </Scaffold>
+                  </Card>
 
-          <Panel width="300px">
-            <Header>
-              <Title>Secondary</Title>
-            </Header>
-            <Scaffold>
-              <Section>
-                <BodyText>Supporting Content</BodyText>
-              </Section>
+                  <Card>
+                    <Header>Tooling 2</Header>
+                    <Scaffold>
+                      <SBContent />
+                    </Scaffold>
+                  </Card>
+                </Detail>
+              </Scaffold>
             </Scaffold>
-          </Panel>
-        </Rail>
+          </Column>
+          <Column minWidth="400px" width="fill">
+            <Panel>
+              <Header>
+                <Title>Primary</Title>
+              </Header>
+              <Scaffold>
+                <Detail>
+                  <BodyText>Content</BodyText>
+                </Detail>
+              </Scaffold>
+            </Panel>
+          </Column>
+          <Column minWidth="400px">
+            <Panel>
+              <Header>
+                <Title>Secondary</Title>
+              </Header>
+              <Scaffold>
+                <Detail>
+                  <BodyText>Content</BodyText>
+                </Detail>
+              </Scaffold>
+            </Panel>
+          </Column>
+        </Columns>
+      </Page>
+    </ZStack>
+  );
+};
+
+/** WIP: Testing Resizable + ResizeHandle with a two-column layout */
+export const ResizableSecondaryColumn = () => {
+  const MIN_WIDTH = 200;
+  const MAX_WIDTH = 600;
+  const [secondaryWidth, setSecondaryWidth] = useState(350);
+
+  const atMin = secondaryWidth <= MIN_WIDTH;
+  const atMax = secondaryWidth >= MAX_WIDTH;
+  const constraint = atMin ? ' (At Min)' : atMax ? ' (At Max)' : '';
+
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px" minWidth="600px">
+      <Page>
+        <Columns>
+          <Column width="fill">
+            <Panel>
+              <Header>
+                <Title>Primary</Title>
+              </Header>
+              <Scaffold>
+                <Detail>
+                  <BodyText>Primary content fills remaining space.</BodyText>
+                </Detail>
+              </Scaffold>
+            </Panel>
+          </Column>
+          <Resizable onWidthResize={({ width }) => setSecondaryWidth(Math.round(width))}>
+            <Column
+              width={`${secondaryWidth}px`}
+              minWidth={`${MIN_WIDTH}px`}
+              maxWidth={`${MAX_WIDTH}px`}
+            >
+              <Panel>
+                <Header>
+                  <Title>{`Secondary (${secondaryWidth}px)${constraint}`}</Title>
+                </Header>
+                <Scaffold>
+                  <Detail>
+                    <BodyText>Drag the left edge to resize this column.</BodyText>
+                  </Detail>
+                </Scaffold>
+              </Panel>
+            </Column>
+            <ResizeHandle position="left" />
+          </Resizable>
+        </Columns>
       </Page>
     </ZStack>
   );

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

@@ -2,7 +2,9 @@ import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
 import { Button } from '../../../actions/button/button/button.js';
 import { Footer } from '../../../layouts/footer/footer.js';
 import { Header } from '../../../layouts/header/header.js';
-import { Detail, Heading, Scaffold, Section } from '../../../layouts/index.js';
+import { Column } from '../../../layouts/containers/columns/column.js';
+import { Columns } from '../../../layouts/containers/columns/columns.js';
+import { Detail, Heading, Row, Rows, Scaffold, Section } 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';
@@ -327,6 +329,142 @@ export const WithCards = () => {
   );
 };
 
+export const WithColumns = () => {
+  return (
+    <Box className={styles['stories-container']}>
+      <Panel maxHeight="600px">
+        <Header>
+          <Title emphasis="strong">Panel With Columns</Title>
+          <Spacer />
+          <UtilGroupExample />
+        </Header>
+        <Scaffold>
+          <Columns>
+            <Column minWidth="300px">
+              <Section>
+                <Heading>General</Heading>
+                <Detail>
+                  <Term>
+                    <Key>Email</Key>
+                    <Value>john.doe@example.com</Value>
+                  </Term>
+                  <Term>
+                    <Key>Phone</Key>
+                    <Value>+1 555 000 1234</Value>
+                  </Term>
+                  <Term>
+                    <Key>Start Date</Key>
+                    <Value>05/27/2023</Value>
+                  </Term>
+                </Detail>
+              </Section>
+              <Section>
+                <Heading>Contact</Heading>
+                <Detail>
+                  <Term>
+                    <Key>Email</Key>
+                    <Value>john.doe@example.com</Value>
+                  </Term>
+                  <Term>
+                    <Key>Phone</Key>
+                    <Value>+1 555 000 1234</Value>
+                  </Term>
+                  <Term>
+                    <Key>Start Date</Key>
+                    <Value>05/27/2023</Value>
+                  </Term>
+                </Detail>
+              </Section>
+            </Column>
+            <Column minWidth="300px">
+              <Rows>
+                <Row>
+                  <Detail>
+                    <Term>
+                      <Key>Email</Key>
+                      <Value>john.doe@example.com</Value>
+                    </Term>
+                    <Term>
+                      <Key>Phone</Key>
+                      <Value>+1 555 000 1234</Value>
+                    </Term>
+                    <Term>
+                      <Key>Start Date</Key>
+                      <Value>05/27/2023</Value>
+                    </Term>
+                  </Detail>
+                </Row>
+                <Row>
+                  <Detail>
+                    <Term>
+                      <Key>Email</Key>
+                      <Value>john.doe@example.com</Value>
+                    </Term>
+                    <Term>
+                      <Key>Phone</Key>
+                      <Value>+1 555 000 1234</Value>
+                    </Term>
+                    <Term>
+                      <Key>Start Date</Key>
+                      <Value>05/27/2023</Value>
+                    </Term>
+                  </Detail>
+                </Row>
+              </Rows>
+            </Column>
+            <Column minWidth="300px">
+              <Card>
+                <Header>General</Header>
+                <Scaffold>
+                  <Detail>
+                    <Term>
+                      <Key>Email</Key>
+                      <Value>john.doe@example.com</Value>
+                    </Term>
+                    <Term>
+                      <Key>Phone</Key>
+                      <Value>+1 555 000 1234</Value>
+                    </Term>
+                    <Term>
+                      <Key>Start Date</Key>
+                      <Value>05/27/2023</Value>
+                    </Term>
+                  </Detail>
+                </Scaffold>
+              </Card>
+
+              <Card>
+                <Header>Contact</Header>
+                <Scaffold>
+                  <Detail>
+                    <Term>
+                      <Key>Email</Key>
+                      <Value>john.doe@example.com</Value>
+                    </Term>
+                    <Term>
+                      <Key>Phone</Key>
+                      <Value>+1 555 000 1234</Value>
+                    </Term>
+                    <Term>
+                      <Key>Start Date</Key>
+                      <Value>05/27/2023</Value>
+                    </Term>
+                  </Detail>
+                </Scaffold>
+              </Card>
+            </Column>
+          </Columns>
+        </Scaffold>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Panel>
+    </Box>
+  );
+};
+
 export const WithDetailOnly = () => {
   return (
     <Box className={styles['stories-container']}>

package/src/test-setup.ts

@@ -0,0 +1,11 @@
+// ResizeObserver is not available in vitest's jsdom environment.
+// `use_resize_observer.ts` instantiates a registry singleton at module load
+// time, so this stub must be in place before any imports run.
+globalThis.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// Required for React's act() to work correctly in jsdom tests.
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;

package/src/themes/theme.tsx

@@ -5,7 +5,6 @@ import { clsx } from 'clsx';
 // Styles
 import './stylesheets/reset.css';
 import styles from './theme_provider.module.css';
-import layers from '../css/layers.css?raw';
 
 export interface ThemeProps extends BoxProps {
   styleSheets: CSSStyleSheet[];
@@ -14,27 +13,18 @@ export interface ThemeProps extends BoxProps {
 }
 
 export function Theme({ styleSheets, children, className, ...boxProps }: ThemeProps) {
-  useLayoutEffect(() => {
-    document.adoptedStyleSheets = styleSheets;
-  }, [styleSheets]);
+  const ref = React.useRef<HTMLElement>(null);
 
-  // I used this approach instead to guarantee the order of the stylesheets
   useLayoutEffect(() => {
-    if (document.getElementById('critical-css')) return;
-
-    const style = document.createElement('style');
-    style.id = 'critical-css';
-    style.textContent = layers;
+    const root = ref.current?.getRootNode();
+    if (!root || !('adoptedStyleSheets' in root)) return;
 
-    document.head.prepend(style);
-
-    return () => {
-      document.getElementById('critical-css')?.remove();
-    };
-  }, []);
+    (root as Document | ShadowRoot).adoptedStyleSheets = styleSheets;
+  }, [styleSheets]);
 
   return (
     <Box
+      ref={ref}
       className={clsx('tcn-theme-root', styles['tcn-theme-provider'], className)}
       {...boxProps}
     >