@zylem/ui 0.8.8 → 0.8.11

package/src/components/PianoRoll/PianoRoll.tsx

@@ -0,0 +1,353 @@
+import { createMemo, createSignal, For, Index, Show } from 'solid-js';
+import { clamp } from '../TimelineLanes/lanes-math';
+import {
+  cellStart,
+  isBlackKey,
+  type PianoRollNote,
+  pitchName,
+  pitchToRow,
+  resolveNoteDrag,
+  rowToPitch,
+} from './piano-roll-math';
+
+export type { PianoRollNote } from './piano-roll-math';
+
+const DEFAULT_PPB = 36;
+const DEFAULT_ROW = 14;
+const KEYS_WIDTH = 56;
+const END_PADDING = 24;
+const VELOCITY_HEIGHT = 48;
+
+export interface PianoRollProps {
+  notes: readonly PianoRollNote[];
+  /** Clip length in beats. */
+  length: number;
+  beatsPerBar?: number;
+  pixelsPerBeat?: number;
+  rowHeight?: number;
+  /** Lowest visible pitch (default C2 = 36). */
+  minPitch?: number;
+  /** Highest visible pitch (default C7 = 96). */
+  maxPitch?: number;
+  /** Grid snap in beats (default a sixteenth). */
+  snap?: number;
+  /** Duration of notes added by double-click, in beats (default one beat). */
+  newNoteDuration?: number;
+  playhead?: number;
+  selectedIds?: readonly string[];
+  onSelect?: (ids: string[]) => void;
+  /** Double-click on an empty cell. */
+  onAddNote?: (note: { pitch: number; start: number; duration: number }) => void;
+  /** Fires continuously while notes are dragged, with the changed notes. */
+  onChangeNotes?: (notes: PianoRollNote[]) => void;
+  /** Fires once when a drag or a keyboard edit ends, with the changed notes. */
+  onCommitNotes?: (notes: PianoRollNote[]) => void;
+  /** Delete / Backspace with a selection. */
+  onDeleteNotes?: (ids: string[]) => void;
+  /** Clicking a key on the left, for auditioning. */
+  onPreviewPitch?: (pitch: number) => void;
+  /** Show the velocity lane under the grid. */
+  showVelocity?: boolean;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Piano roll: pitch rows against a beat grid. Double-click adds a note, drag
+ * moves (pitch and time), the right edge trims, Delete removes, arrows nudge
+ * and transpose, and the optional velocity lane edits loudness per note.
+ */
+export function PianoRoll(props: PianoRollProps) {
+  const ppb = () => props.pixelsPerBeat ?? DEFAULT_PPB;
+  const rowHeight = () => props.rowHeight ?? DEFAULT_ROW;
+  const minPitch = () => props.minPitch ?? 36;
+  const maxPitch = () => props.maxPitch ?? 96;
+  const snap = () => props.snap ?? 0.25;
+  const bpb = () => props.beatsPerBar ?? 4;
+  const rows = () => Math.max(1, maxPitch() - minPitch() + 1);
+  const gridWidth = () => props.length * ppb() + END_PADDING;
+  const gridHeight = () => rows() * rowHeight();
+  const selected = createMemo(() => new Set(props.selectedIds ?? []));
+  const [dragging, setDragging] = createSignal(false);
+  let grid: HTMLDivElement | undefined;
+  let root: HTMLDivElement | undefined;
+
+  const pointerCell = (event: PointerEvent | MouseEvent) => {
+    if (!grid) return null;
+    const rect = grid.getBoundingClientRect();
+    const beats = (event.clientX - rect.left) / ppb();
+    const row = Math.floor((event.clientY - rect.top) / rowHeight());
+    return {
+      start: cellStart(beats, snap(), props.length),
+      pitch: clamp(rowToPitch(row, maxPitch()), minPitch(), maxPitch()),
+    };
+  };
+
+  const select = (ids: string[]) => props.onSelect?.(ids);
+
+  const beginNoteDrag = (note: PianoRollNote, mode: 'move' | 'resize') => (event: PointerEvent) => {
+    if (event.button !== 0) return;
+    event.stopPropagation();
+    root?.focus({ preventScroll: true });
+    let ids: string[];
+    if (event.shiftKey) {
+      ids = selected().has(note.id)
+        ? [...selected()].filter((id) => id !== note.id)
+        : [...selected(), note.id];
+    } else {
+      ids = selected().has(note.id) ? [...selected()] : [note.id];
+    }
+    select(ids);
+    if (props.disabled) return;
+    event.preventDefault();
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture?.(event.pointerId);
+    const idSet = new Set(ids);
+    const origin = props.notes.filter((candidate) => idSet.has(candidate.id));
+    const originX = event.clientX;
+    const originY = event.clientY;
+    let last: PianoRollNote[] = origin;
+    let moved = false;
+    setDragging(true);
+    const move = (moveEvent: PointerEvent) => {
+      moved = true;
+      last = resolveNoteDrag({
+        mode,
+        deltaBeats: (moveEvent.clientX - originX) / ppb(),
+        deltaRows: (moveEvent.clientY - originY) / rowHeight(),
+        origin,
+        length: props.length,
+        minPitch: minPitch(),
+        maxPitch: maxPitch(),
+        snap: snap(),
+      });
+      props.onChangeNotes?.(last);
+    };
+    const stop = () => {
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      setDragging(false);
+      if (moved) props.onCommitNotes?.(last);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  const beginVelocityDrag = (note: PianoRollNote) => (event: PointerEvent) => {
+    if (event.button !== 0 || props.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!selected().has(note.id)) select([note.id]);
+    const target = event.currentTarget as HTMLElement;
+    const lane = target.parentElement!;
+    target.setPointerCapture?.(event.pointerId);
+    let last = note;
+    const apply = (moveEvent: PointerEvent) => {
+      const rect = lane.getBoundingClientRect();
+      const velocity = clamp(1 - (moveEvent.clientY - rect.top) / rect.height, 0.05, 1);
+      last = { ...note, velocity: Math.round(velocity * 100) / 100 };
+      props.onChangeNotes?.([last]);
+    };
+    apply(event);
+    const stop = () => {
+      target.removeEventListener('pointermove', apply);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      props.onCommitNotes?.([last]);
+    };
+    target.addEventListener('pointermove', apply);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  const handleGridDoubleClick = (event: MouseEvent) => {
+    if (props.disabled || event.target !== grid) return;
+    const cell = pointerCell(event);
+    if (!cell) return;
+    const duration = Math.min(props.newNoteDuration ?? 1, Math.max(snap(), props.length - cell.start));
+    props.onAddNote?.({ pitch: cell.pitch, start: cell.start, duration });
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (props.disabled) return;
+    const ids = [...selected()];
+    if (event.key === 'Escape') {
+      select([]);
+      return;
+    }
+    if (ids.length === 0) return;
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      event.preventDefault();
+      props.onDeleteNotes?.(ids);
+      return;
+    }
+    const arrows: Record<string, { beats: number; rows: number }> = {
+      ArrowLeft: { beats: -snap(), rows: 0 },
+      ArrowRight: { beats: snap(), rows: 0 },
+      ArrowUp: { beats: 0, rows: event.shiftKey ? -12 : -1 },
+      ArrowDown: { beats: 0, rows: event.shiftKey ? 12 : 1 },
+    };
+    const arrow = arrows[event.key];
+    if (!arrow) return;
+    event.preventDefault();
+    const idSet = new Set(ids);
+    const origin = props.notes.filter((note) => idSet.has(note.id));
+    props.onCommitNotes?.(
+      resolveNoteDrag({
+        mode: 'move',
+        deltaBeats: arrow.beats,
+        deltaRows: arrow.rows,
+        origin,
+        length: props.length,
+        minPitch: minPitch(),
+        maxPitch: maxPitch(),
+        snap: snap(),
+      }),
+    );
+  };
+
+  const rowIndexes = createMemo(() => Array.from({ length: rows() }, (_, index) => index));
+
+  return (
+    <div
+      ref={root}
+      class={props.class ? `zylem-piano-roll ${props.class}` : 'zylem-piano-roll'}
+      tabIndex={0}
+      role="application"
+      aria-label="Piano roll"
+      data-disabled={props.disabled ? '' : undefined}
+      data-dragging={dragging() ? '' : undefined}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        class="zylem-piano-roll-scroll"
+        style={{
+          '--zylem-pr-ppb': `${ppb()}px`,
+          '--zylem-pr-bar': `${ppb() * bpb()}px`,
+          '--zylem-pr-snap': `${ppb() * snap()}px`,
+          '--zylem-pr-row': `${rowHeight()}px`,
+        }}
+      >
+        <div
+          class="zylem-piano-roll-content"
+          style={{ width: `${KEYS_WIDTH + gridWidth()}px`, height: `${gridHeight()}px` }}
+        >
+          <div class="zylem-piano-roll-keys" style={{ width: `${KEYS_WIDTH}px` }}>
+            <Index each={rowIndexes()}>
+              {(row) => {
+                const pitch = () => rowToPitch(row(), maxPitch());
+                return (
+                  <button
+                    type="button"
+                    class="zylem-piano-roll-key"
+                    style={{ height: `${rowHeight()}px` }}
+                    data-black={isBlackKey(pitch()) ? '' : undefined}
+                    data-c={pitch() % 12 === 0 ? '' : undefined}
+                    aria-label={pitchName(pitch())}
+                    tabIndex={-1}
+                    disabled={props.disabled}
+                    onPointerDown={(event) => {
+                      event.preventDefault();
+                      props.onPreviewPitch?.(pitch());
+                    }}
+                  >
+                    <Show when={pitch() % 12 === 0}>
+                      <span>{pitchName(pitch())}</span>
+                    </Show>
+                  </button>
+                );
+              }}
+            </Index>
+          </div>
+          <div
+            ref={grid}
+            class="zylem-piano-roll-grid"
+            style={{ width: `${gridWidth()}px`, height: `${gridHeight()}px` }}
+            onPointerDown={(event) => {
+              if (event.target === grid && !event.shiftKey) select([]);
+              root?.focus({ preventScroll: true });
+            }}
+            onDblClick={handleGridDoubleClick}
+          >
+            <Index each={rowIndexes()}>
+              {(row) => (
+                <div
+                  class="zylem-piano-roll-row"
+                  style={{ top: `${row() * rowHeight()}px`, height: `${rowHeight()}px` }}
+                  data-black={isBlackKey(rowToPitch(row(), maxPitch())) ? '' : undefined}
+                  data-c={rowToPitch(row(), maxPitch()) % 12 === 0 ? '' : undefined}
+                />
+              )}
+            </Index>
+            <div class="zylem-piano-roll-end" style={{ left: `${props.length * ppb()}px` }} />
+            <For each={props.notes}>
+              {(note) => (
+                <div
+                  class="zylem-piano-roll-note"
+                  role="button"
+                  tabIndex={-1}
+                  aria-label={`${pitchName(note.pitch)} at beat ${note.start + 1}`}
+                  aria-pressed={selected().has(note.id) ? 'true' : 'false'}
+                  data-selected={selected().has(note.id) ? '' : undefined}
+                  style={{
+                    left: `${note.start * ppb()}px`,
+                    top: `${pitchToRow(note.pitch, maxPitch()) * rowHeight()}px`,
+                    width: `${Math.max(3, note.duration * ppb() - 1)}px`,
+                    height: `${rowHeight() - 1}px`,
+                    '--zylem-pr-velocity': String(note.velocity ?? 0.8),
+                  }}
+                  onPointerDown={beginNoteDrag(note, 'move')}
+                >
+                  <Show when={note.duration * ppb() > 28}>
+                    <span class="zylem-piano-roll-note-label">{pitchName(note.pitch)}</span>
+                  </Show>
+                  <div
+                    class="zylem-piano-roll-note-handle"
+                    onPointerDown={beginNoteDrag(note, 'resize')}
+                  />
+                </div>
+              )}
+            </For>
+            <Show when={props.playhead !== undefined}>
+              <div
+                class="zylem-piano-roll-playhead"
+                style={{ left: `${(props.playhead ?? 0) * ppb()}px` }}
+                aria-hidden="true"
+              />
+            </Show>
+          </div>
+        </div>
+        <Show when={props.showVelocity}>
+          <div
+            class="zylem-piano-roll-velocity"
+            style={{ width: `${KEYS_WIDTH + gridWidth()}px`, height: `${VELOCITY_HEIGHT}px` }}
+          >
+            <div class="zylem-piano-roll-velocity-label" style={{ width: `${KEYS_WIDTH}px` }}>
+              Vel
+            </div>
+            <div class="zylem-piano-roll-velocity-lane" style={{ width: `${gridWidth()}px` }}>
+              <For each={props.notes}>
+                {(note) => (
+                  <div
+                    class="zylem-piano-roll-velocity-bar"
+                    data-selected={selected().has(note.id) ? '' : undefined}
+                    style={{
+                      left: `${note.start * ppb()}px`,
+                      height: `${Math.round((note.velocity ?? 0.8) * 100)}%`,
+                    }}
+                    title={`Velocity ${Math.round((note.velocity ?? 0.8) * 100)}`}
+                    onPointerDown={beginVelocityDrag(note)}
+                  />
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/components/PianoRoll/piano-roll-math.ts

@@ -0,0 +1,89 @@
+import { clamp, snapTime } from '../TimelineLanes/lanes-math';
+
+export interface PianoRollNote {
+  id: string;
+  /** MIDI pitch, 0–127. */
+  pitch: number;
+  /** Beats from the clip start. */
+  start: number;
+  /** Beats. */
+  duration: number;
+  /** 0–1; defaults to 0.8 when absent. */
+  velocity?: number;
+}
+
+const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'] as const;
+
+/** `60` → `C4`. */
+export function pitchName(pitch: number): string {
+  const index = ((Math.round(pitch) % 12) + 12) % 12;
+  return `${NOTE_NAMES[index]}${Math.floor(Math.round(pitch) / 12) - 1}`;
+}
+
+export function isBlackKey(pitch: number): boolean {
+  const index = ((Math.round(pitch) % 12) + 12) % 12;
+  return index === 1 || index === 3 || index === 6 || index === 8 || index === 10;
+}
+
+/** Highest pitch is the top row. */
+export function pitchToRow(pitch: number, maxPitch: number): number {
+  return maxPitch - pitch;
+}
+
+export function rowToPitch(row: number, maxPitch: number): number {
+  return maxPitch - row;
+}
+
+export interface NoteDragOptions {
+  mode: 'move' | 'resize';
+  /** Pointer travel in beats. */
+  deltaBeats: number;
+  /** Pointer travel in rows (positive = down = lower pitch). */
+  deltaRows: number;
+  /** The notes being dragged, as they were when the drag began. */
+  origin: readonly PianoRollNote[];
+  /** Clip length in beats. */
+  length: number;
+  minPitch: number;
+  maxPitch: number;
+  snap?: number;
+  minDuration?: number;
+}
+
+/**
+ * Where a set of notes lands after a drag. Moves shift every note by the same
+ * snapped amount, clamped so the group stays inside the clip and the pitch
+ * range; resizes change every note's duration by the same snapped amount.
+ */
+export function resolveNoteDrag(options: NoteDragOptions): PianoRollNote[] {
+  const { origin, length, minPitch, maxPitch } = options;
+  if (origin.length === 0) return [];
+  const snap = options.snap;
+  if (options.mode === 'resize') {
+    const minDuration = Math.max(options.minDuration ?? snap ?? 0.0625, 0.0001);
+    const delta = snapTime(options.deltaBeats, snap);
+    return origin.map((note) => ({
+      ...note,
+      duration: clamp(note.duration + delta, minDuration, Math.max(minDuration, length - note.start)),
+    }));
+  }
+  const first = origin.reduce((min, note) => Math.min(min, note.start), Number.POSITIVE_INFINITY);
+  const last = origin.reduce((max, note) => Math.max(max, note.start + note.duration), 0);
+  const lowest = origin.reduce((min, note) => Math.min(min, note.pitch), Number.POSITIVE_INFINITY);
+  const highest = origin.reduce((max, note) => Math.max(max, note.pitch), Number.NEGATIVE_INFINITY);
+  const rawShift = snapTime(first + options.deltaBeats, snap) - first;
+  const shift = clamp(rawShift, -first, Math.max(-first, length - last));
+  const rawTranspose = -Math.round(options.deltaRows);
+  const transpose = clamp(rawTranspose, minPitch - lowest, maxPitch - highest);
+  return origin.map((note) => ({
+    ...note,
+    start: note.start + shift,
+    pitch: note.pitch + transpose,
+  }));
+}
+
+/** Snaps a beat position down to the grid so a new note starts on the cell under the pointer. */
+export function cellStart(beats: number, snap: number | undefined, length: number): number {
+  const grid = snap && snap > 0 ? snap : 0.25;
+  return clamp(Math.floor(beats / grid + 1e-9) * grid, 0, Math.max(0, length - grid));
+}

package/src/components/PixelGrid/PixelGrid.css.ts

@@ -0,0 +1,30 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Checker pattern shared by every "transparent" surface in the art tools:
+ * the pixel grid, the transparent palette swatch, and empty frame thumbs.
+ * Cell size comes from `--zylem-pixel-grid-cell` so hosts can scale it.
+ */
+export const checkerBackground = `repeating-conic-gradient(${vars.art.checkerLight} 0 25%, ${vars.art.checkerDark} 0 50%) 0 0 / calc(var(--zylem-pixel-grid-cell, 8px) * 2) calc(var(--zylem-pixel-grid-cell, 8px) * 2)`;
+
+globalStyle('.zylem-pixel-grid', {
+  boxSizing: 'content-box',
+  position: 'relative',
+  flex: 'none',
+  background: checkerBackground,
+  border: `1px solid ${vars.art.canvasBorder}`,
+  imageRendering: 'pixelated',
+  overflow: 'hidden',
+});
+
+// Overlays fill the surface; a consumer canvas keeps its own pixel size and
+// stretches to the zoomed box without smoothing.
+globalStyle('.zylem-pixel-grid > canvas, .zylem-pixel-grid > img, .zylem-pixel-grid > svg', {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  imageRendering: 'pixelated',
+});

package/src/components/PixelGrid/PixelGrid.tsx

@@ -0,0 +1,48 @@
+import { type JSX, splitProps } from 'solid-js';
+
+export interface PixelGridProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Sprite width in source pixels. */
+  width: number;
+  /** Sprite height in source pixels. */
+  height: number;
+  /** Screen pixels per source pixel. */
+  zoom?: number;
+  /** Checker cell size in screen pixels. */
+  checkerCell?: number;
+  /** Overlay content (a canvas, selection chrome); fills the surface. */
+  children?: JSX.Element;
+}
+
+/**
+ * Transparent-pixel checkerboard for the sprite editor. Sized to the sprite
+ * at the given zoom with a thin blue edge, so a consumer's canvas can sit on
+ * top with a transparent background and read against the checker.
+ */
+export function PixelGrid(props: PixelGridProps) {
+  const [local, rest] = splitProps(props, [
+    'width',
+    'height',
+    'zoom',
+    'checkerCell',
+    'children',
+    'class',
+    'style',
+  ]);
+  const zoom = () => local.zoom ?? 1;
+  const inlineStyle = (): JSX.CSSProperties => ({
+    width: `${local.width * zoom()}px`,
+    height: `${local.height * zoom()}px`,
+    '--zylem-pixel-grid-cell': `${local.checkerCell ?? 8}px`,
+    ...(typeof local.style === 'object' ? local.style : {}),
+  });
+
+  return (
+    <div
+      class={local.class ? `zylem-pixel-grid ${local.class}` : 'zylem-pixel-grid'}
+      style={inlineStyle()}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}

package/src/components/PlaybackControls/PlaybackControls.css.ts

@@ -0,0 +1,53 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-playback', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.md,
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-playback-transport', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+});
+
+globalStyle('.zylem-playback-btn', {
+  width: '34px',
+  padding: 0,
+});
+
+// Play is the primary control: a touch wider so the strip reads as a
+// transport rather than three identical tool buttons.
+globalStyle('.zylem-playback-btn--play', {
+  width: '44px',
+});
+
+globalStyle('.zylem-playback-btn .zylem-icon', {
+  fill: 'currentColor',
+  fillOpacity: 0.85,
+});
+
+globalStyle('.zylem-playback-loop .zylem-icon', {
+  width: '14px',
+  height: '14px',
+  stroke: 'currentColor',
+});
+
+globalStyle('.zylem-playback-extra', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  minWidth: 0,
+  flex: '1 1 auto',
+  color: vars.colors.textSecondary,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+});
+
+// Compact fields inside the transport (FPS, duration).
+globalStyle('.zylem-playback-extra .zylem-field-root', {
+  width: '72px',
+});

package/src/components/PlaybackControls/PlaybackControls.tsx

@@ -0,0 +1,80 @@
+import FastForward from 'lucide-solid/icons/fast-forward';
+import Pause from 'lucide-solid/icons/pause';
+import Play from 'lucide-solid/icons/play';
+import Repeat from 'lucide-solid/icons/repeat';
+import Rewind from 'lucide-solid/icons/rewind';
+import { type JSX, Show } from 'solid-js';
+import { Button } from '../Button/Button';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+
+export interface PlaybackControlsProps {
+  playing: boolean;
+  onTogglePlay: () => void;
+  onRewind?: () => void;
+  onFastForward?: () => void;
+  /** When defined, a Loop toggle follows the transport buttons. */
+  loop?: boolean;
+  onToggleLoop?: () => void;
+  disabled?: boolean;
+  /** Trailing controls: an FPS field, a time readout, a duration field. */
+  children?: JSX.Element;
+  class?: string;
+}
+
+/**
+ * Transport strip: rewind, play/pause, fast-forward as glass toolbar
+ * buttons, an optional Loop toggle, then whatever the host wants alongside.
+ */
+export function PlaybackControls(props: PlaybackControlsProps) {
+  return (
+    <div
+      class={props.class ? `zylem-playback ${props.class}` : 'zylem-playback'}
+      role="group"
+      aria-label="Playback"
+    >
+      <div class="zylem-playback-transport">
+        <ToolbarButton
+          label="Rewind"
+          disabled={props.disabled || !props.onRewind}
+          onClick={() => props.onRewind?.()}
+          class="zylem-playback-btn"
+        >
+          <Rewind class="zylem-icon" />
+        </ToolbarButton>
+        <ToolbarButton
+          label={props.playing ? 'Pause' : 'Play'}
+          selected={props.playing}
+          disabled={props.disabled}
+          onClick={() => props.onTogglePlay()}
+          class="zylem-playback-btn zylem-playback-btn--play"
+        >
+          {props.playing ? <Pause class="zylem-icon" /> : <Play class="zylem-icon" />}
+        </ToolbarButton>
+        <ToolbarButton
+          label="Fast forward"
+          disabled={props.disabled || !props.onFastForward}
+          onClick={() => props.onFastForward?.()}
+          class="zylem-playback-btn"
+        >
+          <FastForward class="zylem-icon" />
+        </ToolbarButton>
+      </div>
+      <Show when={props.loop !== undefined}>
+        <Button
+          size="sm"
+          variant={props.loop ? 'active' : 'default'}
+          aria-pressed={props.loop ? 'true' : 'false'}
+          disabled={props.disabled}
+          onClick={() => props.onToggleLoop?.()}
+          class="zylem-playback-loop"
+        >
+          <Repeat class="zylem-icon" aria-hidden="true" />
+          Loop
+        </Button>
+      </Show>
+      <Show when={props.children}>
+        <div class="zylem-playback-extra">{props.children}</div>
+      </Show>
+    </div>
+  );
+}

package/src/components/Property/Property.css.ts

@@ -17,7 +17,7 @@ globalStyle('.zylem-property-list', {
 globalStyle('.zylem-property-row', {
   minHeight: '30px',
   display: 'grid',
-  gridTemplateColumns: '112px 1fr',
+  gridTemplateColumns: 'var(--zylem-property-label-width, 112px) minmax(0, 1fr)',
   alignItems: 'center',
   gap: vars.spacing.sm,
   padding: `${vars.spacing.xs} ${vars.spacing.sm}`,

package/src/components/Property/Property.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'solid-js';
 export interface PropertyListProps {
   children: JSX.Element;
   class?: string;
+  /** Width of the label column (default `112px`); narrow it for slim inspectors. */
+  labelWidth?: string;
 }
 
 /**
@@ -17,6 +19,7 @@ export function PropertyList(props: PropertyListProps) {
           ? `zylem-property-list ${props.class}`
           : 'zylem-property-list'
       }
+      style={props.labelWidth ? { '--zylem-property-label-width': props.labelWidth } : undefined}
     >
       {props.children}
     </div>