@weasel-js/labkit 1.5.0 → 1.5.2

package/src/primitives/Split.tsx

@@ -11,6 +11,8 @@ const STRATEGIES = { strip: stripStrategy as never };
 export interface SplitProps {
   /** The sidebar pane's contents. */
   sidebar: ReactNode;
+  /** The edge the sidebar sits on. Read once, when the strip mounts. Default `'start'`. */
+  side?: 'start' | 'end';
   /** The content pane's contents. */
   children: ReactNode;
   /** Names the sidebar pane, and through it the seam. Default `'Sidebar'`. */
@@ -51,6 +53,7 @@ export interface SplitProps {
 export function Split({
   sidebar,
   children,
+  side = 'start',
   label = 'Sidebar',
   className,
   sidebarClassName,
@@ -72,28 +75,37 @@ export function Split({
       createNode({
         kind: 'zone',
         id: ZONE_ID,
-        container: { strategyId: 'strip', config: { axis: 'x', resizable: true } },
-      }),
-    );
-    store.registerNode(
-      createNode({
-        kind: 'sidebar',
-        id: SIDEBAR_ID,
-        parentId: ZONE_ID,
-        meta: { title: label },
-        placement: { size: { w: width ?? defaultWidth } },
-        hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } },
-      }),
-    );
-    store.registerNode(
-      createNode({
-        kind: 'content',
-        id: CONTENT_ID,
-        parentId: ZONE_ID,
-        meta: { title: 'Content' },
-        hints: { minSize: { w: contentMinWidth, h: 0 } },
+        // A strip's seam resizes the pane before it, which on the end side is the
+        // content; 'neighbor' has the seam size the sidebar after it too.
+        container: {
+          strategyId: 'strip',
+          config: {
+            axis: 'x',
+            resizable: true,
+            ...(side === 'end' ? { resizeMode: 'neighbor' } : {}),
+          },
+        },
       }),
     );
+    const sidebarNode = createNode({
+      kind: 'sidebar',
+      id: SIDEBAR_ID,
+      parentId: ZONE_ID,
+      meta: { title: label },
+      placement: { size: { w: width ?? defaultWidth } },
+      hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } },
+    });
+    const contentNode = createNode({
+      kind: 'content',
+      id: CONTENT_ID,
+      parentId: ZONE_ID,
+      meta: { title: 'Content' },
+      hints: { minSize: { w: contentMinWidth, h: 0 } },
+    });
+    // A strip lays its children out in registration order.
+    for (const node of side === 'end' ? [contentNode, sidebarNode] : [sidebarNode, contentNode]) {
+      store.registerNode(node);
+    }
     store.showNode(SIDEBAR_ID);
     store.showNode(CONTENT_ID);
     storeRef.current = store;
@@ -127,6 +139,10 @@ export function Split({
   useEffect(
     () =>
       store.events.on('node.placementChanged', () => {
+        // A neighbor drag pins the content's width too; unpinned, it goes on filling the strip.
+        if ((store.getPlacement(CONTENT_ID)?.size as { w?: number } | undefined)?.w !== undefined) {
+          store.patchPlacement(CONTENT_ID, { size: {} });
+        }
         const next = (store.getPlacement(SIDEBAR_ID)?.size as { w?: number } | undefined)?.w;
         if (typeof next !== 'number' || next === widthRef.current) return;
         widthRef.current = next;

package/src/primitives/StatusBar.less

@@ -1,6 +1,10 @@
 .lk-status-bar {
   display: flex;
   align-items: center;
+  /* One line, always. A bar that grows a second line takes it from the canvas
+     above it, and a readout that changes width would do that on and off as it
+     ticks. Too narrow for its contents clips them instead. */
+  overflow: hidden;
   gap: var(--wzl-space-md);
   padding: var(--wzl-space-xs) var(--wzl-space-sm);
   background: var(--wzl-surface-raised);
@@ -13,6 +17,8 @@
 .lk-status-bar-section {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
+  min-width: 0;
   gap: var(--wzl-space-xs);
   padding: 0 var(--wzl-space-xs);
   border-right: 1px solid var(--wzl-line-subtle);

package/src/primitives/StatusBar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { StatusBar } from './StatusBar';
 
 const meta: Meta<typeof StatusBar> = {

package/src/primitives/Toolbar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { Toolbar } from './Toolbar';
 
 const meta: Meta<typeof Toolbar> = {

package/src/specimen/Specimen.less

@@ -0,0 +1,95 @@
+.lk-specimen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-lg);
+  padding: var(--wzl-space-lg);
+  background: var(--wzl-surface);
+  color: var(--wzl-fg);
+  font-family: var(--wzl-font-ui);
+  font-size: var(--wzl-font-size);
+}
+
+.lk-specimen__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-sm);
+}
+
+.lk-specimen__heading {
+  margin: 0;
+  padding-block-end: var(--wzl-space-xs);
+  border-bottom: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  color: var(--wzl-fg-muted);
+  font-family: var(--wzl-font-display);
+  font-size: var(--wzl-font-size-sm);
+  font-weight: var(--wzl-font-weight-normal);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.lk-specimen__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--wzl-space-md);
+  align-items: start;
+}
+
+.lk-specimen__cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-xs);
+  min-width: 0;
+}
+
+.lk-specimen__label {
+  color: var(--wzl-fg-subtle);
+  font-family: var(--wzl-font-mono);
+  font-size: var(--wzl-font-size-xs);
+}
+
+.lk-specimen__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wzl-space-sm);
+}
+
+.lk-specimen__cell--wide {
+  grid-column: 1 / -1;
+}
+
+.lk-specimen__box {
+  position: relative;
+  display: flex;
+  height: 160px;
+  overflow: hidden;
+  border: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  border-radius: var(--wzl-radius-sm);
+}
+
+.lk-specimen__box-main {
+  flex: 1;
+  min-width: 0;
+  padding: var(--wzl-space-sm);
+}
+
+.lk-specimen__pad {
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
+}
+
+.lk-specimen__pane {
+  flex: none;
+  width: var(--lk-specimen-pane-w);
+  padding: var(--wzl-space-sm);
+}
+
+.lk-specimen__timeline {
+  height: 180px;
+}
+
+.lk-specimen__floating-host {
+  position: relative;
+  height: 160px;
+  border: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  border-radius: var(--wzl-radius-sm);
+}

package/src/specimen/Specimen.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@weasel-js/forge';
+import { Specimen } from './Specimen';
+
+const meta: Meta<typeof Specimen> = {
+  title: 'labkit/Specimen',
+  component: Specimen,
+  parameters: { layout: 'fullscreen' },
+};
+export default meta;
+
+type Story = StoryObj<typeof Specimen>;
+
+export const Everything: Story = {};

package/src/specimen/Specimen.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { SPECIMEN_SECTIONS, Specimen } from './Specimen';
+
+describe('<Specimen>', () => {
+  it('renders every section as a named region', () => {
+    render(<Specimen />);
+    expect(SPECIMEN_SECTIONS.length).toBeGreaterThan(0);
+    for (const title of SPECIMEN_SECTIONS) {
+      expect(screen.getByRole('region', { name: title })).toBeInTheDocument();
+    }
+  });
+});