@zylem/ui 0.8.9 → 0.8.11

package/src/components/Waveform/Waveform.tsx

@@ -0,0 +1,195 @@
+import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js';
+import { clamp } from '../TimelineLanes/lanes-math';
+import { computePeaks, peaksFromAudioBuffer } from './peaks';
+
+export type { PeakSource } from './peaks';
+
+export interface WaveformRegion {
+  /** Seconds. */
+  start: number;
+  end: number;
+}
+
+export interface WaveformProps {
+  /** Pre-computed peaks (0–1 per column); wins over `buffer`. */
+  peaks?: ArrayLike<number>;
+  /** Source audio; peaks are computed to match the drawn width. */
+  buffer?: { duration: number; numberOfChannels: number; getChannelData(channel: number): Float32Array };
+  /** Seconds the peaks span; defaults to `buffer.duration`. Needed for regions and the playhead. */
+  duration?: number;
+  /** Highlighted span with draggable edges. */
+  region?: WaveformRegion;
+  onRegionChange?: (region: WaveformRegion) => void;
+  onRegionCommit?: (region: WaveformRegion) => void;
+  /** Seconds. */
+  playhead?: number;
+  /** Any CSS color for the peaks. */
+  color?: string;
+  height?: number;
+  /** Click anywhere to seek. */
+  onSeek?: (seconds: number) => void;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Canvas waveform with an optional trim region and playhead. Peaks are
+ * redrawn on resize so the shape stays crisp at any width.
+ */
+export function Waveform(props: WaveformProps) {
+  let canvas: HTMLCanvasElement | undefined;
+  let host: HTMLDivElement | undefined;
+  const [width, setWidth] = createSignal(0);
+  const height = () => props.height ?? 64;
+  const duration = () => props.duration ?? props.buffer?.duration ?? 0;
+
+  const peaks = createMemo(() => {
+    const bins = Math.max(1, Math.floor(width()));
+    if (props.peaks) {
+      const source = Float32Array.from(props.peaks as ArrayLike<number>);
+      return source.length === bins ? source : resample(source, bins);
+    }
+    if (props.buffer) return peaksFromAudioBuffer(props.buffer, bins);
+    return new Float32Array(bins);
+  });
+
+  onMount(() => {
+    if (!host) return;
+    setWidth(host.clientWidth);
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setWidth(Math.floor(entry.contentRect.width));
+    });
+    observer.observe(host);
+    onCleanup(() => observer.disconnect());
+  });
+
+  createEffect(() => {
+    if (!canvas) return;
+    const w = width();
+    const h = height();
+    const data = peaks();
+    const color =
+      props.color ??
+      (getComputedStyle(canvas).getPropertyValue('--zylem-color-primary').trim() || '#61a6e8');
+    const ratio = typeof devicePixelRatio === 'number' ? devicePixelRatio : 1;
+    canvas.width = Math.max(1, Math.floor(w * ratio));
+    canvas.height = Math.max(1, Math.floor(h * ratio));
+    const context = canvas.getContext('2d');
+    if (!context) return;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.clearRect(0, 0, w, h);
+    const mid = h / 2;
+    context.strokeStyle = 'rgba(205, 232, 255, 0.18)';
+    context.beginPath();
+    context.moveTo(0, mid + 0.5);
+    context.lineTo(w, mid + 0.5);
+    context.stroke();
+    context.fillStyle = color;
+    for (let x = 0; x < data.length; x += 1) {
+      const amplitude = Math.max(1, (data[x] ?? 0) * (mid - 2));
+      context.fillRect(x, mid - amplitude, 1, amplitude * 2);
+    }
+  });
+
+  const secondsAt = (clientX: number) => {
+    if (!host || duration() <= 0) return 0;
+    const rect = host.getBoundingClientRect();
+    return clamp(((clientX - rect.left) / rect.width) * duration(), 0, duration());
+  };
+  const percent = (seconds: number) => (duration() > 0 ? (seconds / duration()) * 100 : 0);
+
+  const beginRegionDrag = (edge: 'start' | 'end') => (event: PointerEvent) => {
+    const region = props.region;
+    if (props.disabled || !region || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture?.(event.pointerId);
+    let last = region;
+    const move = (moveEvent: PointerEvent) => {
+      const seconds = secondsAt(moveEvent.clientX);
+      last =
+        edge === 'start'
+          ? { start: Math.min(seconds, region.end - 0.01), end: region.end }
+          : { start: region.start, end: Math.max(seconds, region.start + 0.01) };
+      props.onRegionChange?.(last);
+    };
+    const stop = () => {
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      props.onRegionCommit?.(last);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  return (
+    <div
+      ref={host}
+      class={props.class ? `zylem-waveform ${props.class}` : 'zylem-waveform'}
+      style={{ height: `${height()}px` }}
+      data-disabled={props.disabled ? '' : undefined}
+      onPointerDown={(event) => {
+        if (props.disabled || !props.onSeek || event.button !== 0) return;
+        props.onSeek(secondsAt(event.clientX));
+      }}
+    >
+      <canvas ref={canvas} class="zylem-waveform-canvas" aria-hidden="true" />
+      <Show when={props.region && duration() > 0}>
+        {(_) => {
+          const region = () => props.region!;
+          return (
+            <>
+              <div
+                class="zylem-waveform-shade"
+                style={{ left: 0, width: `${percent(region().start)}%` }}
+              />
+              <div
+                class="zylem-waveform-shade"
+                style={{ left: `${percent(region().end)}%`, right: 0 }}
+              />
+              <div
+                class="zylem-waveform-edge"
+                data-edge="start"
+                style={{ left: `${percent(region().start)}%` }}
+                onPointerDown={beginRegionDrag('start')}
+                role="slider"
+                aria-label="Trim start"
+                aria-valuenow={region().start}
+                aria-valuemin={0}
+                aria-valuemax={duration()}
+              />
+              <div
+                class="zylem-waveform-edge"
+                data-edge="end"
+                style={{ left: `${percent(region().end)}%` }}
+                onPointerDown={beginRegionDrag('end')}
+                role="slider"
+                aria-label="Trim end"
+                aria-valuenow={region().end}
+                aria-valuemin={0}
+                aria-valuemax={duration()}
+              />
+            </>
+          );
+        }}
+      </Show>
+      <Show when={props.playhead !== undefined && duration() > 0}>
+        <div
+          class="zylem-waveform-playhead"
+          style={{ left: `${percent(props.playhead ?? 0)}%` }}
+          aria-hidden="true"
+        />
+      </Show>
+    </div>
+  );
+}
+
+function resample(source: Float32Array, bins: number): Float32Array {
+  return computePeaks({ channels: [source] }, bins);
+}

package/src/components/Waveform/peaks.ts

@@ -0,0 +1,49 @@
+/**
+ * Peak extraction for waveform drawing: folds PCM samples into `bins`
+ * columns, each the largest absolute sample in its slice, normalised so the
+ * loudest bin is 1 (silence stays 0).
+ */
+
+export interface PeakSource {
+  /** One `Float32Array` per channel; channels are mixed by taking the max. */
+  channels: readonly Float32Array[];
+}
+
+export function computePeaks(source: PeakSource | Float32Array, bins: number): Float32Array {
+  const channels = source instanceof Float32Array ? [source] : source.channels;
+  const count = Math.max(1, Math.floor(bins));
+  const peaks = new Float32Array(count);
+  const length = channels[0]?.length ?? 0;
+  if (length === 0 || channels.length === 0) return peaks;
+  const perBin = length / count;
+  let loudest = 0;
+  for (let bin = 0; bin < count; bin += 1) {
+    const from = Math.floor(bin * perBin);
+    const to = Math.min(length, Math.max(from + 1, Math.floor((bin + 1) * perBin)));
+    let peak = 0;
+    for (const channel of channels) {
+      for (let i = from; i < to; i += 1) {
+        const value = Math.abs(channel[i] ?? 0);
+        if (value > peak) peak = value;
+      }
+    }
+    peaks[bin] = peak;
+    if (peak > loudest) loudest = peak;
+  }
+  if (loudest > 0 && loudest !== 1) {
+    for (let bin = 0; bin < count; bin += 1) peaks[bin] = peaks[bin]! / loudest;
+  }
+  return peaks;
+}
+
+/** Peaks from a Web Audio `AudioBuffer` without depending on its type here. */
+export function peaksFromAudioBuffer(
+  buffer: { numberOfChannels: number; getChannelData(channel: number): Float32Array },
+  bins: number,
+): Float32Array {
+  const channels: Float32Array[] = [];
+  for (let channel = 0; channel < buffer.numberOfChannels; channel += 1) {
+    channels.push(buffer.getChannelData(channel));
+  }
+  return computePeaks({ channels }, bins);
+}

package/src/components/index.ts

@@ -38,6 +38,7 @@ export {
   TabsTrigger,
   TabsContent,
   type TabsProps,
+  type TabsTriggerProps,
 } from './Tabs/Tabs';
 export {
   Accordion,
@@ -47,17 +48,22 @@ export {
 export { Tooltip, type TooltipProps } from './Tooltip/Tooltip';
 export {
   DropdownMenu,
+  MenuItems,
   type DropdownMenuProps,
   type DropdownMenuItemConfig,
 } from './DropdownMenu/DropdownMenu';
+export { Menubar, type MenubarProps, type MenubarMenuConfig } from './Menubar/Menubar';
 export {
   Dialog,
   ConfirmDialog,
   type DialogProps,
+  type DialogSize,
   type ConfirmDialogProps,
 } from './Dialog/Dialog';
 export { Progress, type ProgressProps } from './Progress/Progress';
 export { Badge, type BadgeProps, type BadgeTone } from './Badge/Badge';
+export { Callout, type CalloutProps, type CalloutTone } from './Callout/Callout';
+export { Toast, type ToastProps, type ToastTone } from './Toast/Toast';
 export { Separator, type SeparatorProps } from './Separator/Separator';
 
 // Composites
@@ -130,7 +136,7 @@ export {
   type ArtTool,
   type ToolButtonProps,
 } from './ToolButton/ToolButton';
-export { AddTile, type AddTileProps } from './AddTile/AddTile';
+export { AddTile, type AddTileProps, type AddTileVariant } from './AddTile/AddTile';
 export {
   ColorPalette,
   Swatch,
@@ -163,3 +169,51 @@ export {
   type ToolboxGridProps,
   type ToolboxSize,
 } from './ToolboxButton/ToolboxButton';
+
+// Timeline / Music (Creator director and music editors)
+export {
+  TimelineLanes,
+  TimelineLane,
+  TimelineLaneGroup,
+  TimelineClip,
+  KeyframeMarker,
+  useTimeline,
+  type TimelineLanesProps,
+  type TimelineLaneProps,
+  type TimelineLaneGroupProps,
+  type TimelineClipProps,
+  type TimelineClipChange,
+  type TimelineContextValue,
+  type TimelineRange,
+  type KeyframeMarkerProps,
+  type TimeScale,
+  type TimeUnit,
+  type RulerTick,
+  type ClipBounds,
+} from './TimelineLanes/TimelineLanes';
+export {
+  snapTime,
+  resolveClipDrag,
+  rulerTicks,
+  majorTickTimes,
+  formatClock,
+  formatBeats,
+} from './TimelineLanes/lanes-math';
+export { TrackHeader, type TrackHeaderProps } from './TrackHeader/TrackHeader';
+export { PianoRoll, type PianoRollProps, type PianoRollNote } from './PianoRoll/PianoRoll';
+export {
+  pitchName,
+  isBlackKey,
+  resolveNoteDrag,
+  cellStart,
+} from './PianoRoll/piano-roll-math';
+export { Knob, arcPath, type KnobProps } from './Mixer/Knob';
+export { MixerStrip, formatDb, formatPan, type MixerStripProps } from './Mixer/MixerStrip';
+export { Waveform, type WaveformProps, type WaveformRegion } from './Waveform/Waveform';
+export { computePeaks, peaksFromAudioBuffer, type PeakSource } from './Waveform/peaks';
+export {
+  TransportBar,
+  formatTransportTime,
+  type TransportBarProps,
+  type TransportTimeSignature,
+} from './TransportBar/TransportBar';

package/src/global/accordion.css.ts

@@ -81,6 +81,29 @@ globalStyle('.accordion-content', {
   transition: 'height 0.3s ease',
 });
 
+/**
+ * Stack layout: natural-height sections, no per-section scrolling. The
+ * accordion grows with its content and leaves scrolling to the parent.
+ */
+globalStyle('.zylem-accordion--stack', {
+  height: 'auto',
+  flex: 'none',
+});
+
+globalStyle('.zylem-accordion--stack .accordion-item[data-expanded]', {
+  flex: 'none',
+});
+
+// The parent scrolls, so headers must not pin over the sections above them.
+globalStyle('.zylem-accordion--stack .accordion-header', {
+  position: 'static',
+});
+
+globalStyle('.zylem-accordion--stack .accordion-content', {
+  flex: 'none',
+  overflow: 'visible',
+});
+
 globalStyle('.accordion-trigger::after', {
   content: "'\\25BC'",
   position: 'relative',

package/src/styles.ts

@@ -32,9 +32,12 @@ import './components/Slider/Slider.css';
 import './components/Tabs/Tabs.css';
 import './components/Tooltip/Tooltip.css';
 import './components/DropdownMenu/DropdownMenu.css';
+import './components/Menubar/Menubar.css';
 import './components/Dialog/Dialog.css';
 import './components/Progress/Progress.css';
 import './components/Badge/Badge.css';
+import './components/Callout/Callout.css';
+import './components/Toast/Toast.css';
 import './components/Separator/Separator.css';
 import './components/WindowControls/WindowControls.css';
 import './components/TitleBar/TitleBar.css';
@@ -61,3 +64,11 @@ import './components/FrameStrip/FrameStrip.css';
 import './components/PlaybackControls/PlaybackControls.css';
 import './components/TimelineTrack/TimelineTrack.css';
 import './components/ToolboxButton/ToolboxButton.css';
+
+// Timeline / Music surfaces (Creator director and music editors).
+import './components/TimelineLanes/TimelineLanes.css';
+import './components/TrackHeader/TrackHeader.css';
+import './components/PianoRoll/PianoRoll.css';
+import './components/Mixer/Mixer.css';
+import './components/Waveform/Waveform.css';
+import './components/TransportBar/TransportBar.css';