@weasel-js/labkit 1.2.0 → 1.3.0-pre.0

package/src/trial/TrialDragContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import type { NodeId } from 'windease';
+
+/** Supplied by `<Workspace>` when trials are reorderable, so a trial's title
+ *  bar can be the drag surface. Null when reordering is off. */
+export const TrialDragContext = createContext<{ nodeId: NodeId } | null>(null);
+
+export function useTrialDrag(): { nodeId: NodeId } | null {
+  return useContext(TrialDragContext);
+}

package/src/trial/TrialTitleBar.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { NodeId } from 'windease';
+import { useDragHandle } from 'windease/react';
+import { useTrialDrag } from './TrialDragContext';
+
+/** Props for `<TrialTitleBar>`. */
+export interface TrialTitleBarProps {
+  title: string;
+  children?: ReactNode;
+}
+
+// `useDragHandle` needs a node id and windease's DragProvider, so the draggable
+// form is a separate component rather than a conditional hook.
+function Draggable({ nodeId, title, children }: TrialTitleBarProps & { nodeId: NodeId }) {
+  const handlers = useDragHandle(nodeId);
+  return (
+    <div className="lk-trial__titlebar lk-trial__titlebar--draggable" {...handlers}>
+      <span className="lk-trial__title">{title}</span>
+      {children}
+    </div>
+  );
+}
+
+/** A trial's title bar. When the workspace allows reordering the whole bar is
+ *  the drag surface — there is no separate grip, because a window's title bar
+ *  is already the thing you expect to drag. */
+export function TrialTitleBar({ title, children }: TrialTitleBarProps) {
+  const drag = useTrialDrag();
+  if (drag)
+    return (
+      <Draggable nodeId={drag.nodeId} title={title}>
+        {children}
+      </Draggable>
+    );
+  return (
+    <div className="lk-trial__titlebar">
+      <span className="lk-trial__title">{title}</span>
+      {children}
+    </div>
+  );
+}

package/src/trial/index.ts

@@ -1,20 +1,6 @@
-export type { DefaultSidebarProps } from './DefaultSidebar';
-export { DefaultSidebar } from './DefaultSidebar';
-export type { DefaultStatusBarProps } from './DefaultStatusBar';
-export { DefaultStatusBar } from './DefaultStatusBar';
-export type { DefaultToolbarProps } from './DefaultToolbar';
-export { DefaultToolbar } from './DefaultToolbar';
-export type {
-  SidebarSlot,
-  StatusBarSlot,
-  ToolbarSlot,
-  TrialSidebarContext,
-  TrialStatusBarContext,
-  TrialToolbarContext,
-} from './slotTypes';
 export type { TrialProps } from './Trial';
 export { Trial } from './Trial';
-export type { TrialChromeProps } from './TrialChrome';
+export type { TrialChromeProps, UndoBindings } from './TrialChrome';
 export { TrialChrome } from './TrialChrome';
 export {
   addTrial,

package/src/trial/trialChrome.borders.test.ts

@@ -0,0 +1,38 @@
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const less = readFileSync(join(dirname(fileURLToPath(import.meta.url)), 'Trial.less'), 'utf8');
+
+/** The body of one rule, by selector. Resolves Less's `&__suffix` nesting and
+ *  matches braces, so a nested block cannot end the slice early. */
+function rule(selector: string): string {
+  const nested = selector.replace(/^\.[a-z-]+?(__|--)/, '&$1');
+  const start = [selector, nested].map((s) => less.indexOf(`${s} {`)).find((i) => i !== -1);
+  if (start === undefined) throw new Error(`no rule for ${selector}`);
+  const open = less.indexOf('{', start);
+  let depth = 0;
+  for (let i = open; i < less.length; i += 1) {
+    if (less[i] === '{') depth += 1;
+    else if (less[i] === '}') {
+      depth -= 1;
+      if (depth === 0) return less.slice(open + 1, i);
+    }
+  }
+  throw new Error(`unterminated rule for ${selector}`);
+}
+
+describe('trial chrome seams', () => {
+  // A `not.toMatch` passes on an empty string, so pin that `rule()` found the
+  // rule it was asked for.
+  it('isolates the rule it is asked for', () => {
+    expect(rule('.lk-trial__toolbar')).toMatch(/flex-shrink/);
+    expect(rule('.lk-trial__status')).toMatch(/flex-shrink/);
+  });
+
+  it('lets the component draw its own border, not the wrapper', () => {
+    expect(rule('.lk-trial__toolbar')).not.toMatch(/border-bottom:\s*[^;]*solid/);
+    expect(rule('.lk-trial__status')).not.toMatch(/border-top:\s*[^;]*solid/);
+  });
+});

package/src/ui/layers/LayerStack.less

@@ -14,7 +14,7 @@
   margin: 0;
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 1rem;
+  font-size: var(--wzl-font-size-lg);
   color: var(--wzl-fg);
 }
 
@@ -28,7 +28,7 @@
   border: 1px dashed var(--wzl-border);
   border-radius: var(--wzl-radius-sm);
   padding: 2px 8px;
-  font-size: 0.78rem;
+  font-size: var(--wzl-font-size-sm);
   color: var(--wzl-fg-subtle);
   cursor: pointer;
 }
@@ -46,12 +46,12 @@
 .lk-layer-stack__drop-hint {
   height: 2px;
   background: var(--wzl-accent);
-  border-radius: 1px;
+  border-radius: var(--wzl-radius-sm);
 }
 
 .lk-layer-stack__empty {
   color: var(--wzl-fg-subtle);
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   padding: 8px;
   text-align: center;
 }
@@ -96,8 +96,8 @@
   min-width: 22px;
   height: 22px;
   border-radius: var(--wzl-radius-sm);
-  font-weight: 600;
-  font-size: 0.85rem;
+  font-weight: var(--wzl-font-weight-bold);
+  font-size: var(--wzl-font-size);
 }
 
 .lk-layer-card.has-accent .lk-layer-card__handle {
@@ -112,7 +112,7 @@
 .lk-layer-card__kind,
 .lk-layer-card__primary {
   flex: 1;
-  font-size: 0.9rem;
+  font-size: var(--wzl-font-size);
 }
 
 .lk-layer-card__primary {
@@ -121,14 +121,14 @@
   color: var(--wzl-fg);
   font: inherit;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: var(--wzl-tracking-wide);
 }
 
 .lk-root .lk-layer-card__remove {
   background: transparent;
   border: 0;
   color: var(--wzl-fg-subtle);
-  font-size: 1rem;
+  font-size: var(--wzl-font-size-lg);
   cursor: pointer;
   padding: 2px 6px;
 }

package/src/ui/layers/LayerStack.tsx

@@ -1,5 +1,6 @@
 import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';
 import { dlog, useReorderDragList } from '../../passthrough/weasel-ui';
+import { DragHandleGlyph } from '../../primitives/DragHandleGlyph';
 
 /** One card in a layer stack: its identity, the label shown when collapsed,
  *  and the optional select hoisted into its header. */
@@ -205,16 +206,3 @@ export function LayerStack({
     </div>
   );
 }
-
-function DragHandleGlyph() {
-  return (
-    <svg width="12" height="16" viewBox="0 0 8 16" fill="currentColor" aria-hidden="true">
-      <circle cx="2" cy="3" r="1.1" />
-      <circle cx="6" cy="3" r="1.1" />
-      <circle cx="2" cy="8" r="1.1" />
-      <circle cx="6" cy="8" r="1.1" />
-      <circle cx="2" cy="13" r="1.1" />
-      <circle cx="6" cy="13" r="1.1" />
-    </svg>
-  );
-}

package/src/ui/properties/CurveField.less

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: space-between;
   font-variant-numeric: tabular-nums;
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   color: var(--wzl-fg-subtle);
 }
 
@@ -39,7 +39,7 @@
   border-radius: var(--wzl-radius-sm);
   color: var(--wzl-fg);
   padding: 4px 10px;
-  font-size: 0.78rem;
+  font-size: var(--wzl-font-size-sm);
   cursor: pointer;
 }
 

package/src/ui/properties/CurveField.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { assert, describe, expect, it, vi } from 'vitest';
 
 // CurveEditor uses weasel's own bundled React and fails in jsdom.
 // Mock it out — these tests only assert on readouts and the flip button.
@@ -81,13 +81,13 @@ describe('CurveField', () => {
       />,
     );
     const overlay = container.querySelector('.lk-curve-field__marks');
-    expect(overlay).not.toBeNull();
-    const rect = overlay!.querySelector('rect');
-    expect(rect).not.toBeNull();
+    assert(overlay);
+    const rect = overlay.querySelector('rect');
+    assert(rect);
     // x = 0.2 * 200 = 40; width = (0.4 - 0.2) * 200 = 40.
-    expect(rect!.getAttribute('x')).toBe('40');
-    expect(rect!.getAttribute('width')).toBe('40');
-    expect(rect!.getAttribute('fill')).toBe('#ffcc00');
+    expect(rect.getAttribute('x')).toBe('40');
+    expect(rect.getAttribute('width')).toBe('40');
+    expect(rect.getAttribute('fill')).toBe('#ffcc00');
   });
 
   it('renders a line mark as a positioned line', () => {
@@ -104,10 +104,10 @@ describe('CurveField', () => {
       />,
     );
     const line = container.querySelector('.lk-curve-field__marks line');
-    expect(line).not.toBeNull();
-    expect(line!.getAttribute('x1')).toBe('140');
-    expect(line!.getAttribute('x2')).toBe('140');
-    expect(line!.getAttribute('stroke')).toBe('#ffcc00');
+    assert(line);
+    expect(line.getAttribute('x1')).toBe('140');
+    expect(line.getAttribute('x2')).toBe('140');
+    expect(line.getAttribute('stroke')).toBe('#ffcc00');
   });
 
   it('omits the marks overlay when marks is undefined', () => {

package/src/ui/properties/PropertyGroup.less

@@ -13,8 +13,8 @@
   margin: 0 0 8px;
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 0.78rem;
-  letter-spacing: 0.08em;
+  font-size: var(--wzl-font-size-sm);
+  letter-spacing: var(--wzl-tracking-wider);
   text-transform: uppercase;
   color: var(--wzl-fg-subtle);
 }

package/src/ui/properties/PropertyPanel.less

@@ -15,8 +15,8 @@
 .lk-property-panel__title {
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 1.05rem;
-  line-height: 1.2;
+  font-size: var(--wzl-font-size-lg);
+  line-height: var(--wzl-leading-snug);
   letter-spacing: 0.01em;
   color: var(--wzl-fg);
   margin: 0 0 12px;
@@ -85,8 +85,8 @@
 .lk-property-row__label {
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 0.78rem;
-  line-height: 1.2;
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-snug);
   color: var(--wzl-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -108,14 +108,13 @@
 .lk-property-row__readout-input {
   font: inherit;
   font-weight: var(--wzl-font-weight-medium);
-  // Force line-height 1 (the label parent inherits 1.2, which would make
-  // the input box ~3px taller than the SB reference). Matches SB
-  // styles.css:385 `font: 500 0.78rem/1`.
-  line-height: 1;
+  // Force leading-tight — the label parent inherits 1.2, which would make the
+  // input box ~3px taller than the speech-balloons reference.
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-accent);
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--wzl-radius-sm);
   padding: 1px 0;
   margin: 0;
   width: calc(5em - 24px);
@@ -126,10 +125,10 @@
   -moz-appearance: textfield;
 }
 .lk-property-row__readout-input:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: color-mix(in srgb, currentColor 8%, transparent);
 }
 .lk-property-row__readout-input:focus {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--wzl-surface-sunken);
   border-color: var(--wzl-accent);
 }
 .lk-property-row__readout-input::-webkit-inner-spin-button,
@@ -148,8 +147,8 @@
 // Word-style units (e.g. "px") read as a small dim suffix next to the digits.
 .lk-property-row__readout-unit {
   color: var(--wzl-fg-muted);
-  font-size: 0.78em;
-  line-height: 1;
+  font-size: var(--wzl-font-size-2xs);
+  line-height: var(--wzl-leading-tight);
   pointer-events: none;
 }
 // Symbol units (e.g. `<sup>°</sup>`) lean on the browser's native super
@@ -157,7 +156,7 @@
 // would re-collapse the glyph onto the baseline.
 .lk-property-row__readout-group sup {
   color: var(--wzl-fg-muted);
-  font-size: 0.7em;
+  font-size: var(--wzl-font-size-2xs);
   pointer-events: none;
 }
 
@@ -174,12 +173,12 @@
 }
 .lk-property-row input[type='range']::-webkit-slider-runnable-track {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--wzl-radius-sm);
   background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);
 }
 .lk-property-row input[type='range']::-moz-range-track {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--wzl-radius-sm);
   background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);
 }
 .lk-property-row input[type='range']::-webkit-slider-thumb {
@@ -225,12 +224,15 @@
 
 .lk-property-row input[type='text']:not(.lk-property-row__readout-input),
 .lk-property-row input[type='number'] {
-  background: rgba(0, 0, 0, 0.35);
+  background: var(--wzl-surface-sunken);
   color: var(--wzl-fg);
   border: 1px solid var(--wzl-border);
   border-radius: var(--wzl-radius-sm);
   padding: 6px 8px;
-  font: 400 0.85rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size);
+  line-height: var(--wzl-leading-tight);
 }
 
 .lk-property-row input[type='text']:not(.lk-property-row__readout-input):focus,
@@ -248,7 +250,10 @@
   border: 0;
   border-radius: 0;
   padding: 2px 0;
-  font: 400 0.85rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size);
+  line-height: var(--wzl-leading-tight);
   cursor: pointer;
 }
 .lk-property-row select:focus {
@@ -344,7 +349,7 @@
 .lk-property-row--checkbox .lk-property-row__label {
   text-transform: none;
   letter-spacing: normal;
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   color: var(--wzl-fg);
   // Place the label after the checkbox visually.
   order: 1;
@@ -374,7 +379,10 @@
   color: var(--wzl-fg-muted);
   border: 0;
   border-radius: 0;
-  font: 400 0.78rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-tight);
   cursor: pointer;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
@@ -391,12 +399,12 @@
 
 .lk-property-row__toggle-button--selected {
   background: var(--wzl-accent);
-  color: #0a0a14;
+  color: var(--wzl-fg-on-accent);
   font-weight: var(--wzl-font-weight-medium);
 }
 
 .lk-property-row__toggle-button--selected:hover {
-  color: #0a0a14;
+  color: var(--wzl-fg-on-accent);
 }
 
 // ── Subpanel ────────────────────────────────────────────────────────
@@ -420,12 +428,12 @@
 }
 .lk-subpanel__title {
   font-family: var(--wzl-font-display);
-  font-weight: 400;
-  font-size: 0.72rem;
-  line-height: 1;
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-fg);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: var(--wzl-tracking-wider);
   margin: 0;
   padding: 6px 0 4px;
   display: flex;
@@ -508,24 +516,27 @@
   min-width: 14px;
   padding: 0 2px;
   color: var(--lk-panel-accent, var(--wzl-fg-muted));
-  font-size: 14px;
-  font-weight: 700;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--wzl-font-size);
+  font-weight: var(--wzl-font-weight-bold);
+  font-family: var(--wzl-font-mono);
   line-height: 1;
 }
 
 .lk-effect-card__title {
   font-family: var(--wzl-font-display);
-  font-weight: 500;
-  font-size: 0.9rem;
-  line-height: 1;
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size);
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-fg);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
 .lk-effect-card__primary {
-  font: 400 0.75rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-fg);
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--wzl-border);
@@ -547,19 +558,19 @@
   background: transparent;
   color: var(--wzl-fg-muted);
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--wzl-radius-sm);
   width: 22px;
   height: 22px;
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 .lk-effect-card__remove:hover {
-  color: #ffb3a8;
-  border-color: rgba(240, 68, 56, 0.4);
-  background: rgba(240, 68, 56, 0.08);
+  color: var(--wzl-danger-fg, var(--wzl-danger));
+  border-color: color-mix(in srgb, var(--wzl-danger) 40%, transparent);
+  background: color-mix(in srgb, var(--wzl-danger) 8%, transparent);
 }
 
 .lk-effect-card__body {
@@ -578,12 +589,15 @@
 .lk-effect-card-list__drop-hint {
   height: 0;
   border-top: 2px solid var(--wzl-accent);
-  border-radius: 2px;
+  border-radius: var(--wzl-radius-sm);
   margin: 2px 0;
   box-shadow: 0 0 6px color-mix(in srgb, var(--wzl-accent) 60%, transparent);
 }
 .lk-effect-card-list__empty {
-  font: var(--wzl-font-weight-light) 0.78rem/1.4 var(--wzl-font-display);
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading);
   color: var(--wzl-fg-muted);
   text-align: center;
   padding: 16px 12px;

package/src/ui/properties/SpeechBalloonPanels.stories.tsx

@@ -299,7 +299,8 @@ export const RightSidebarTails: Story = {
           const next = prev.filter((t) => t.id !== sourceId);
           const idx = next.findIndex((t) => t.id === targetId);
           const insertAt = position === 'before' ? idx : idx + 1;
-          const src = prev.find((t) => t.id === sourceId)!;
+          const src = prev.find((t) => t.id === sourceId);
+          if (!src) return prev;
           next.splice(insertAt, 0, src);
           return next;
         });
@@ -348,7 +349,8 @@ export const LayerStack: Story = {
           const next = prev.filter((t) => t.id !== sourceId);
           const idx = next.findIndex((t) => t.id === targetId);
           const insertAt = position === 'before' ? idx : idx + 1;
-          const src = prev.find((t) => t.id === sourceId)!;
+          const src = prev.find((t) => t.id === sourceId);
+          if (!src) return prev;
           next.splice(insertAt, 0, src);
           return next;
         });

package/src/ui/properties/storyLayouts.tsx

@@ -7,10 +7,10 @@ import type { ReactNode } from 'react';
  */
 export function SideBySide({ block, inline }: { block: ReactNode; inline: ReactNode }) {
   const labelStyle = {
-    font: '300 0.72rem/1 Oswald, system-ui',
+    font: 'var(--wzl-font-weight-normal) var(--wzl-font-size-sm)/var(--wzl-leading-tight) var(--wzl-font-ui)',
     color: 'var(--wzl-fg-muted)',
     textTransform: 'uppercase' as const,
-    letterSpacing: '0.08em',
+    letterSpacing: 'var(--wzl-tracking-wider)',
     margin: '0 0 8px',
   };
   return (