@zylem/ui 0.8.8 → 0.8.11

package/src/components/ToolboxButton/ToolboxButton.tsx

@@ -0,0 +1,88 @@
+import { Button as KButton } from '@kobalte/core';
+import { type JSX, Show, splitProps } from 'solid-js';
+
+/**
+ * Tile scale. `md` is the compact rail tile; `lg` and `xl` are the extra
+ * large tiles sized for three- and two-column toolboxes respectively.
+ */
+export type ToolboxSize = 'md' | 'lg' | 'xl';
+
+export interface ToolboxButtonProps {
+  label: string;
+  /** Icon rendered above the label. */
+  children: JSX.Element;
+  selected?: boolean;
+  disabled?: boolean;
+  /** Overrides the size inherited from the enclosing `ToolboxGrid`. */
+  size?: ToolboxSize;
+  onClick?: (event: MouseEvent) => void;
+  class?: string;
+}
+
+/**
+ * Large toolbox tile: the toolbar button's glass jewel scaled up, with the
+ * icon stacked over a bold label. Selected renders as the live-green state.
+ */
+export function ToolboxButton(props: ToolboxButtonProps) {
+  return (
+    <KButton.Root
+      class={props.class ? `zylem-toolbox-btn ${props.class}` : 'zylem-toolbox-btn'}
+      data-size={props.size}
+      data-selected={props.selected ? '' : undefined}
+      aria-pressed={props.selected ? 'true' : undefined}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    >
+      <span class="zylem-toolbox-btn-icon" aria-hidden="true">
+        {props.children}
+      </span>
+      <span class="zylem-toolbox-btn-label">{props.label}</span>
+    </KButton.Root>
+  );
+}
+
+export interface ToolboxGridProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Optional uppercase caption above the grid, e.g. `Current tools`. */
+  label?: string;
+  /** Columns in the grid. Defaults to 2. */
+  columns?: number;
+  /**
+   * Tile size for every button in the grid that doesn't set its own. `xl`
+   * pairs with two columns, `lg` with three; defaults to `md`.
+   */
+  size?: ToolboxSize;
+  children: JSX.Element;
+}
+
+/** Captioned grid of `ToolboxButton`s. */
+export function ToolboxGrid(props: ToolboxGridProps) {
+  const [local, rest] = splitProps(props, [
+    'label',
+    'columns',
+    'size',
+    'children',
+    'class',
+    'style',
+  ]);
+  const style = (): JSX.CSSProperties => ({
+    '--zylem-toolbox-columns': String(local.columns ?? 2),
+    ...(typeof local.style === 'object' ? local.style : {}),
+  });
+  return (
+    <div
+      class={local.class ? `zylem-toolbox-grid ${local.class}` : 'zylem-toolbox-grid'}
+      role="group"
+      aria-label={local.label}
+      data-size={local.size}
+      style={style()}
+      {...rest}
+    >
+      <Show when={local.label}>
+        <span class="zylem-toolbox-grid-label" aria-hidden="true">
+          {local.label}
+        </span>
+      </Show>
+      <div class="zylem-toolbox-grid-items">{local.children}</div>
+    </div>
+  );
+}

package/src/components/TrackHeader/TrackHeader.css.ts

@@ -0,0 +1,162 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-track-header', {
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: vars.spacing.xs,
+  width: '100%',
+  minWidth: 0,
+  boxSizing: 'border-box',
+  padding: `0 ${vars.spacing.xs} 0 0`,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.colors.text,
+  cursor: 'default',
+});
+
+globalStyle('.zylem-track-header[data-disabled]', {
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-track-header-swatch', {
+  flex: 'none',
+  width: '4px',
+  background: 'var(--zylem-track-color)',
+  boxShadow: '0 0 6px color-mix(in srgb, var(--zylem-track-color) 60%, transparent)',
+});
+
+globalStyle('.zylem-track-header-main', {
+  flex: '1 1 auto',
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: '1px',
+  padding: `0 ${vars.spacing.xs}`,
+});
+
+globalStyle('.zylem-track-header-title', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+  minWidth: 0,
+});
+
+globalStyle('.zylem-track-header-icon', {
+  display: 'inline-flex',
+  flex: 'none',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-track-header-icon > svg', {
+  width: '13px',
+  height: '13px',
+});
+
+globalStyle('.zylem-track-header-name', {
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+globalStyle('.zylem-track-header[data-muted] .zylem-track-header-name', {
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-track-header-input', {
+  width: '100%',
+  minWidth: 0,
+  boxSizing: 'border-box',
+  padding: '1px 4px',
+  font: 'inherit',
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  color: vars.colors.text,
+  background: vars.material.fieldGlass,
+  border: '1px solid rgba(97, 166, 232, 0.5)',
+  borderRadius: '4px',
+  outline: 'none',
+});
+
+globalStyle('.zylem-track-header-input:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-track-header-detail', {
+  fontSize: '10px',
+  color: vars.colors.textSecondary,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+globalStyle('.zylem-track-header-toggles', {
+  flex: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '3px',
+});
+
+globalStyle('.zylem-track-toggle', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '18px',
+  height: '18px',
+  padding: 0,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: '10px',
+  fontWeight: 700,
+  lineHeight: 1,
+  color: vars.colors.textSecondary,
+  background: 'rgba(8, 19, 31, 0.6)',
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  borderRadius: '4px',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08)',
+  cursor: 'pointer',
+  outline: 'none',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-track-toggle > svg', {
+  width: '11px',
+  height: '11px',
+});
+
+globalStyle('.zylem-track-toggle:hover:not(:disabled)', {
+  color: vars.colors.text,
+  background: 'rgba(97, 166, 232, 0.22)',
+});
+
+globalStyle('.zylem-track-toggle:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-track-toggle:disabled', {
+  cursor: 'default',
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-track-toggle[data-kind="mute"][aria-pressed="true"]', {
+  color: '#2b1a08',
+  background: 'linear-gradient(180deg, rgba(255, 220, 130, 0.95), rgba(230, 150, 40, 0.95))',
+  borderColor: 'rgba(255, 230, 170, 0.8)',
+});
+
+globalStyle('.zylem-track-toggle[data-kind="solo"][aria-pressed="true"]', {
+  color: '#062010',
+  background: 'linear-gradient(180deg, rgba(170, 255, 190, 0.95), rgba(28, 174, 63, 0.95))',
+  borderColor: 'rgba(190, 255, 203, 0.8)',
+});
+
+globalStyle('.zylem-track-toggle[data-kind="lock"][aria-pressed="true"]', {
+  color: vars.colors.text,
+  background: 'rgba(97, 166, 232, 0.35)',
+  borderColor: 'rgba(178, 219, 255, 0.7)',
+});
+
+globalStyle('.zylem-track-header-actions', {
+  display: 'inline-flex',
+  alignItems: 'center',
+});

package/src/components/TrackHeader/TrackHeader.tsx

@@ -0,0 +1,145 @@
+import Lock from 'lucide-solid/icons/lock';
+import LockOpen from 'lucide-solid/icons/lock-open';
+import { createSignal, type JSX, Show } from 'solid-js';
+
+export interface TrackHeaderProps {
+  name: string;
+  /** Swatch color shown as a bar on the left edge. */
+  color?: string;
+  /** Small glyph before the name (an instrument or camera icon). */
+  icon?: JSX.Element;
+  /** Secondary line under the name (instrument preset, camera kind). */
+  detail?: string;
+  selected?: boolean;
+  onSelect?: () => void;
+  /** Double-click the name to rename; the new name arrives here on Enter/blur. */
+  onRename?: (name: string) => void;
+  /** Mute / solo / lock toggles render only when their handler is given. */
+  muted?: boolean;
+  onToggleMute?: () => void;
+  solo?: boolean;
+  onToggleSolo?: () => void;
+  locked?: boolean;
+  onToggleLock?: () => void;
+  /** Trailing controls (a menu button, an add button). */
+  actions?: JSX.Element;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Header cell for a timeline lane: color bar, name (rename on double-click),
+ * an optional detail line, and M / S / lock toggles.
+ */
+export function TrackHeader(props: TrackHeaderProps) {
+  const [editing, setEditing] = createSignal(false);
+  const [draft, setDraft] = createSignal('');
+
+  const startRename = () => {
+    if (!props.onRename || props.disabled) return;
+    setDraft(props.name);
+    setEditing(true);
+  };
+  const commitRename = () => {
+    if (!editing()) return;
+    setEditing(false);
+    const next = draft().trim();
+    if (next && next !== props.name) props.onRename?.(next);
+  };
+
+  return (
+    <div
+      class={props.class ? `zylem-track-header ${props.class}` : 'zylem-track-header'}
+      style={{ '--zylem-track-color': props.color ?? 'var(--zylem-color-primary)' }}
+      data-selected={props.selected ? '' : undefined}
+      data-muted={props.muted ? '' : undefined}
+      data-disabled={props.disabled ? '' : undefined}
+      onPointerDown={() => props.onSelect?.()}
+    >
+      <span class="zylem-track-header-swatch" aria-hidden="true" />
+      <div class="zylem-track-header-main">
+        <div class="zylem-track-header-title">
+          <Show when={props.icon}>
+            <span class="zylem-track-header-icon">{props.icon}</span>
+          </Show>
+          <Show
+            when={editing()}
+            fallback={
+              <span class="zylem-track-header-name" onDblClick={startRename} title={props.name}>
+                {props.name}
+              </span>
+            }
+          >
+            <input
+              class="zylem-track-header-input"
+              value={draft()}
+              aria-label="Track name"
+              ref={(element) => queueMicrotask(() => element.select())}
+              onInput={(event) => setDraft(event.currentTarget.value)}
+              onBlur={commitRename}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') commitRename();
+                if (event.key === 'Escape') setEditing(false);
+              }}
+            />
+          </Show>
+        </div>
+        <Show when={props.detail}>
+          <span class="zylem-track-header-detail">{props.detail}</span>
+        </Show>
+      </div>
+      <div class="zylem-track-header-toggles">
+        <Show when={props.onToggleMute}>
+          <button
+            type="button"
+            class="zylem-track-toggle"
+            data-kind="mute"
+            aria-pressed={props.muted ? 'true' : 'false'}
+            aria-label={props.muted ? 'Unmute' : 'Mute'}
+            title={props.muted ? 'Unmute' : 'Mute'}
+            disabled={props.disabled}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => props.onToggleMute?.()}
+          >
+            M
+          </button>
+        </Show>
+        <Show when={props.onToggleSolo}>
+          <button
+            type="button"
+            class="zylem-track-toggle"
+            data-kind="solo"
+            aria-pressed={props.solo ? 'true' : 'false'}
+            aria-label={props.solo ? 'Unsolo' : 'Solo'}
+            title={props.solo ? 'Unsolo' : 'Solo'}
+            disabled={props.disabled}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => props.onToggleSolo?.()}
+          >
+            S
+          </button>
+        </Show>
+        <Show when={props.onToggleLock}>
+          <button
+            type="button"
+            class="zylem-track-toggle"
+            data-kind="lock"
+            aria-pressed={props.locked ? 'true' : 'false'}
+            aria-label={props.locked ? 'Unlock' : 'Lock'}
+            title={props.locked ? 'Unlock' : 'Lock'}
+            disabled={props.disabled}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => props.onToggleLock?.()}
+          >
+            {props.locked ? <Lock class="zylem-icon" /> : <LockOpen class="zylem-icon" />}
+          </button>
+        </Show>
+        <Show when={props.actions}>
+          <span class="zylem-track-header-actions" onPointerDown={(event) => event.stopPropagation()}>
+            {props.actions}
+          </span>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/components/TransportBar/TransportBar.css.ts

@@ -0,0 +1,65 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-transport', {
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  minWidth: 0,
+  boxSizing: 'border-box',
+  fontFamily: vars.typography.fontFamily,
+  color: vars.colors.text,
+});
+
+globalStyle('.zylem-transport > .zylem-playback', {
+  width: '100%',
+});
+
+globalStyle('.zylem-transport .zylem-playback-extra', {
+  flex: '1 1 auto',
+  minWidth: 0,
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-transport-track', {
+  flex: '1 1 auto',
+  minWidth: '120px',
+});
+
+globalStyle('.zylem-transport-time', {
+  flex: 'none',
+  minWidth: '9ch',
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  fontVariantNumeric: 'tabular-nums',
+  whiteSpace: 'nowrap',
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+});
+
+globalStyle('.zylem-transport-time-total', {
+  fontWeight: 400,
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-transport-field', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+  flex: 'none',
+});
+
+globalStyle('.zylem-transport-field-label', {
+  fontSize: '10px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-transport-bpm', {
+  width: '84px',
+});
+
+globalStyle('.zylem-transport-signature', {
+  width: '84px',
+  flex: 'none',
+});

package/src/components/TransportBar/TransportBar.tsx

@@ -0,0 +1,154 @@
+import Square from 'lucide-solid/icons/square';
+import { type JSX, Show } from 'solid-js';
+import { NumberField } from '../NumberField/NumberField';
+import { PlaybackControls } from '../PlaybackControls/PlaybackControls';
+import { Select } from '../Select/Select';
+import { formatBeats, formatClock, type TimeUnit } from '../TimelineLanes/lanes-math';
+import { TimelineTrack } from '../TimelineTrack/TimelineTrack';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+
+export interface TransportTimeSignature {
+  numerator: number;
+  denominator: number;
+}
+
+export interface TransportBarProps {
+  playing: boolean;
+  onTogglePlay: () => void;
+  /** Adds a Stop button (pause and return to the start). */
+  onStop?: () => void;
+  onRewind?: () => void;
+  onFastForward?: () => void;
+  loop?: boolean;
+  onToggleLoop?: () => void;
+  /** Playhead, in `unit`s. */
+  time: number;
+  /** Timeline length, in `unit`s. */
+  length: number;
+  onSeek?: (time: number) => void;
+  unit?: TimeUnit;
+  /** Beats per bar, for the beat readout. */
+  beatsPerBar?: number;
+  /** Shows a BPM field when set. */
+  bpm?: number;
+  onBpmChange?: (bpm: number) => void;
+  /** Shows a time-signature select when set. */
+  timeSignature?: TransportTimeSignature;
+  onTimeSignatureChange?: (signature: TransportTimeSignature) => void;
+  /** Extra controls after the built-in ones. */
+  children?: JSX.Element;
+  disabled?: boolean;
+  class?: string;
+}
+
+const SIGNATURES: TransportTimeSignature[] = [
+  { numerator: 2, denominator: 4 },
+  { numerator: 3, denominator: 4 },
+  { numerator: 4, denominator: 4 },
+  { numerator: 5, denominator: 4 },
+  { numerator: 6, denominator: 8 },
+  { numerator: 7, denominator: 8 },
+  { numerator: 12, denominator: 8 },
+];
+
+const signatureKey = (signature: TransportTimeSignature) =>
+  `${signature.numerator}/${signature.denominator}`;
+
+/** Readout for the current position: `m:ss.ff` for seconds, `bar.beat` for beats. */
+export function formatTransportTime(time: number, unit: TimeUnit, beatsPerBar = 4): string {
+  return unit === 'beats' ? formatBeats(time, beatsPerBar) : formatClock(time);
+}
+
+/**
+ * Transport strip for the Director and Music editors: playback controls, a
+ * scrub track with a position readout, and optional BPM / time signature.
+ */
+export function TransportBar(props: TransportBarProps) {
+  const unit = () => props.unit ?? 'seconds';
+  const bpb = () => props.beatsPerBar ?? props.timeSignature?.numerator ?? 4;
+  const signatureOptions = () => {
+    const options = SIGNATURES.map((signature) => ({
+      value: signatureKey(signature),
+      label: signatureKey(signature),
+    }));
+    const current = props.timeSignature ? signatureKey(props.timeSignature) : null;
+    if (current && !options.some((option) => option.value === current)) {
+      options.push({ value: current, label: current });
+    }
+    return options;
+  };
+
+  return (
+    <div
+      class={props.class ? `zylem-transport ${props.class}` : 'zylem-transport'}
+      data-unit={unit()}
+    >
+      <PlaybackControls
+        playing={props.playing}
+        onTogglePlay={props.onTogglePlay}
+        onRewind={props.onRewind}
+        onFastForward={props.onFastForward}
+        loop={props.loop}
+        onToggleLoop={props.onToggleLoop}
+        disabled={props.disabled}
+      >
+        <Show when={props.onStop}>
+          <ToolbarButton
+            label="Stop"
+            disabled={props.disabled}
+            onClick={() => props.onStop?.()}
+            class="zylem-transport-stop"
+          >
+            <Square class="zylem-icon" />
+          </ToolbarButton>
+        </Show>
+        <TimelineTrack
+          value={props.time}
+          max={props.length}
+          onChange={(value) => props.onSeek?.(value)}
+          disabled={props.disabled || !props.onSeek}
+          class="zylem-transport-track"
+        />
+        <span class="zylem-transport-time" aria-live="off">
+          {formatTransportTime(props.time, unit(), bpb())}
+          <span class="zylem-transport-time-total">
+            {' / '}
+            {formatTransportTime(props.length, unit(), bpb())}
+          </span>
+        </span>
+        <Show when={props.bpm !== undefined}>
+          <label class="zylem-transport-field">
+            <span class="zylem-transport-field-label">BPM</span>
+            <NumberField
+              value={props.bpm}
+              minValue={20}
+              maxValue={300}
+              step={1}
+              disabled={props.disabled || !props.onBpmChange}
+              onChange={(value) => props.onBpmChange?.(value)}
+              class="zylem-transport-bpm"
+            />
+          </label>
+        </Show>
+        <Show when={props.timeSignature}>
+          {(signature) => (
+            <Select
+              options={signatureOptions()}
+              value={signatureKey(signature())}
+              disabled={props.disabled || !props.onTimeSignatureChange}
+              onChange={(value) => {
+                if (!value) return;
+                const [numerator, denominator] = value.split('/').map(Number);
+                if (numerator && denominator) {
+                  props.onTimeSignatureChange?.({ numerator, denominator });
+                }
+              }}
+              class="zylem-transport-signature"
+            />
+          )}
+        </Show>
+        {props.children}
+      </PlaybackControls>
+    </div>
+  );
+}

package/src/components/Waveform/Waveform.css.ts

@@ -0,0 +1,77 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-waveform', {
+  position: 'relative',
+  width: '100%',
+  minWidth: 0,
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.22)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-waveform[data-disabled]', {
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-waveform-canvas', {
+  display: 'block',
+  width: '100%',
+  height: '100%',
+});
+
+globalStyle('.zylem-waveform-shade', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  background: 'rgba(0, 0, 0, 0.45)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-waveform-edge', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: '10px',
+  marginLeft: '-5px',
+  cursor: 'ew-resize',
+});
+
+globalStyle('.zylem-waveform-edge::before', {
+  content: '""',
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '4px',
+  width: '2px',
+  background: 'rgba(255, 244, 200, 0.95)',
+  boxShadow: '0 0 6px rgba(240, 180, 60, 0.7)',
+});
+
+globalStyle('.zylem-waveform-edge::after', {
+  content: '""',
+  position: 'absolute',
+  top: '50%',
+  left: '1px',
+  width: '8px',
+  height: '16px',
+  marginTop: '-8px',
+  borderRadius: '3px',
+  background: 'linear-gradient(180deg, rgba(255, 244, 200, 0.98), rgba(240, 180, 60, 0.95))',
+  border: '1px solid rgba(255,255,255,0.7)',
+  boxSizing: 'border-box',
+});
+
+globalStyle('.zylem-waveform-playhead', {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: '1px',
+  background: 'rgba(255, 236, 170, 0.9)',
+  boxShadow: '0 0 6px rgba(240, 180, 60, 0.7)',
+  pointerEvents: 'none',
+});