@zylem/ui 0.8.9 → 0.8.12

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,68 @@ 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';
+
+// Camera icons (Lucide-shaped originals; also `@zylem/ui/icons`)
+export {
+  CAMERA_ICONS,
+  FreePerspective,
+  GameCamera,
+  IsometricPerspective,
+  Perspective,
+  SideviewPerspective,
+  TopDownPerspective,
+  cameraIconNodes,
+  createZylemIcon,
+  type CameraIcon,
+  type CameraIconName,
+  type IconNode,
+  type ZylemIconProps,
+} from '../icons';

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/icons/create-icon.tsx

@@ -0,0 +1,71 @@
+import { For, splitProps, type Component, type JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import type { IconNode } from './icon-nodes';
+
+export interface ZylemIconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+  color?: string;
+  size?: string | number;
+  strokeWidth?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+const DEFAULTS = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
+} as const;
+
+function kebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Solid icon factory matching lucide-solid's size / color / strokeWidth
+ * props so these glyphs drop into the same toolbar buttons and CSS.
+ */
+export function createZylemIcon(
+  name: string,
+  iconNode: IconNode,
+): Component<ZylemIconProps> {
+  const Icon: Component<ZylemIconProps> = (props) => {
+    const [local, rest] = splitProps(props, [
+      'color',
+      'size',
+      'strokeWidth',
+      'class',
+      'absoluteStrokeWidth',
+    ]);
+    const size = () => local.size ?? 24;
+    const strokeWidth = () => {
+      const width = Number(local.strokeWidth ?? 2);
+      if (local.absoluteStrokeWidth) {
+        return (width * 24) / Number(size());
+      }
+      return width;
+    };
+    const classes = () =>
+      ['zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
+        .filter((value) => Boolean(value))
+        .join(' ');
+
+    return (
+      <svg
+        {...DEFAULTS}
+        width={size()}
+        height={size()}
+        stroke={local.color ?? 'currentColor'}
+        stroke-width={strokeWidth()}
+        class={classes()}
+        aria-hidden="true"
+        {...rest}
+      >
+        <For each={iconNode}>
+          {([element, attrs]) => <Dynamic component={element} {...attrs} />}
+        </For>
+      </svg>
+    );
+  };
+  return Icon;
+}

package/src/icons/icon-nodes.ts

@@ -0,0 +1,75 @@
+/**
+ * Original Zylem camera icons as Lucide-style SVG node lists.
+ * 24×24 viewBox, 2-unit stroke, no fill, rounded caps and joins.
+ */
+export type IconNode = [
+  elementName: 'rect' | 'path',
+  attributes: Record<string, string>,
+][];
+
+export const PerspectiveNode: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'm18 7 4-3m-4 13 4 3' }],
+];
+
+export const SideviewPerspectiveNode: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'M18 6h4v12h-4' }],
+];
+
+export const TopDownPerspectiveNode: IconNode = [
+  ['rect', { x: '8', y: '2', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10-2 4h8l-2-4' }],
+  ['path', { d: 'M6 18v4h12v-4' }],
+];
+
+export const FreePerspectiveNode: IconNode = [
+  ['rect', { x: '7', y: '9', width: '7', height: '6', rx: '1' }],
+  ['path', { d: 'm14 11 3-2v6l-3-2' }],
+  ['path', { d: 'M3 8a9 9 0 0 1 15-3' }],
+  ['path', { d: 'M18 2v3h-3' }],
+  ['path', { d: 'M21 16a9 9 0 0 1-15 3' }],
+  ['path', { d: 'M6 22v-3h3' }],
+];
+
+/** Source: `src/icons/svg/camera-isometric.svg` */
+export const IsometricPerspectiveNode: IconNode = [
+  ['path', { d: 'M11.549 11.368 2 5.855' }],
+  ['path', { d: 'M11.549 19.944 11.549 17.252' }],
+  ['path', { d: 'M11.549 14.06 11.549 11.368' }],
+  ['path', { d: 'M11.549 19.944 2 14.431' }],
+  ['path', { d: 'M2 14.431 2 5.855' }],
+  ['path', { d: 'M2 5.855 6.775 3.098' }],
+  ['path', { d: 'M6.775 3.098 16.324 8.611' }],
+  ['path', { d: 'M11.549 11.368 16.324 8.611' }],
+  ['path', { d: 'M16.324 8.611 16.324 11.151' }],
+  ['path', { d: 'M13.749 18.674 11.549 19.944' }],
+  ['path', { d: 'M15.887 10.899 21.192 13.962' }],
+  ['path', { d: 'M11.986 17.656 17.291 20.719' }],
+  ['path', { d: 'M15.887 10.899A3.901 2.252 -60 0 0 11.986 17.656' }],
+  [
+    'path',
+    {
+      d: 'M21.192 13.962A3.901 2.252 -60 1 1 17.291 20.719A3.901 2.252 -60 1 1 21.192 13.962Z',
+    },
+  ],
+];
+export const GameCameraNode: IconNode = [
+  ['rect', { x: '2', y: '6', width: '16', height: '12', rx: '2' }],
+  ['path', { d: 'm18 10 4-3v10l-4-3' }],
+  ['path', { d: 'M6 12h4m-2-2v4' }],
+  ['path', { d: 'M14 10h.01M14 14h.01' }],
+];
+
+export const cameraIconNodes = {
+  perspective: PerspectiveNode,
+  'sideview-perspective': SideviewPerspectiveNode,
+  'top-down-perspective': TopDownPerspectiveNode,
+  'isometric-perspective': IsometricPerspectiveNode,
+  'free-perspective': FreePerspectiveNode,
+  'game-camera': GameCameraNode,
+} as const;
+
+export type CameraIconName = keyof typeof cameraIconNodes;

package/src/icons/index.ts

@@ -0,0 +1,54 @@
+import type { Component } from 'solid-js';
+import { createZylemIcon, type ZylemIconProps } from './create-icon';
+import {
+  FreePerspectiveNode,
+  GameCameraNode,
+  IsometricPerspectiveNode,
+  PerspectiveNode,
+  SideviewPerspectiveNode,
+  TopDownPerspectiveNode,
+} from './icon-nodes';
+
+export type { IconNode, CameraIconName } from './icon-nodes';
+export {
+  cameraIconNodes,
+  FreePerspectiveNode,
+  GameCameraNode,
+  IsometricPerspectiveNode,
+  PerspectiveNode,
+  SideviewPerspectiveNode,
+  TopDownPerspectiveNode,
+} from './icon-nodes';
+export { createZylemIcon, type ZylemIconProps } from './create-icon';
+
+export type CameraIcon = Component<ZylemIconProps>;
+
+/** Recorder with diverging FOV rays. */
+export const Perspective = createZylemIcon('Perspective', PerspectiveNode);
+/** Recorder facing a vertical view plane (side / ortho). */
+export const SideviewPerspective = createZylemIcon(
+  'SideviewPerspective',
+  SideviewPerspectiveNode,
+);
+/** Downward recorder facing a horizontal plane (top-down). */
+export const TopDownPerspective = createZylemIcon(
+  'TopDownPerspective',
+  TopDownPerspectiveNode,
+);
+/** Isometric camera body with lens (from camera-isometric.svg). */
+export const IsometricPerspective = createZylemIcon(
+  'IsometricPerspective',
+  IsometricPerspectiveNode,
+);/** Recorder with two orbit arrows (free / orbit camera). */
+export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiveNode);
+/** Recorder with controller buttons (game camera). */
+export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
+
+export const CAMERA_ICONS = [
+  { name: 'perspective', label: 'Perspective', Icon: Perspective },
+  { name: 'sideview-perspective', label: 'Side view', Icon: SideviewPerspective },
+  { name: 'top-down-perspective', label: 'Top down', Icon: TopDownPerspective },
+  { name: 'isometric-perspective', label: 'Isometric', Icon: IsometricPerspective },
+  { name: 'free-perspective', label: 'Free / orbit', Icon: FreePerspective },
+  { name: 'game-camera', label: 'Game camera', Icon: GameCamera },
+] as const;

package/src/icons/svg/camera-isometric.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.549 11.368 2 5.855" />
+  <path d="M11.549 19.944 11.549 17.252" />
+  <path d="M11.549 14.06 11.549 11.368" />
+  <path d="M11.549 19.944 2 14.431" />
+  <path d="M2 14.431 2 5.855" />
+  <path d="M2 5.855 6.775 3.098" />
+  <path d="M6.775 3.098 16.324 8.611" />
+  <path d="M11.549 11.368 16.324 8.611" />
+  <path d="M16.324 8.611 16.324 11.151" />
+  <path d="M13.749 18.674 11.549 19.944" />
+  <path d="M15.887 10.899 21.192 13.962" />
+  <path d="M11.986 17.656 17.291 20.719" />
+  <path d="M15.887 10.899A3.901 2.252 -60 0 0 11.986 17.656" />
+  <path d="M21.192 13.962A3.901 2.252 -60 1 1 17.291 20.719A3.901 2.252 -60 1 1 21.192 13.962Z" />
+</svg>

package/src/icons/svg/free-perspective.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="7" y="9" width="7" height="6" rx="1" />
+  <path d="m14 11 3-2v6l-3-2" />
+  <path d="M3 8a9 9 0 0 1 15-3" />
+  <path d="M18 2v3h-3" />
+  <path d="M21 16a9 9 0 0 1-15 3" />
+  <path d="M6 22v-3h3" />
+</svg>

package/src/icons/svg/game-camera.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="6" width="16" height="12" rx="2" />
+  <path d="m18 10 4-3v10l-4-3" />
+  <path d="M6 12h4m-2-2v4" />
+  <path d="M14 10h.01M14 14h.01" />
+</svg>

package/src/icons/svg/perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="8" width="8" height="8" rx="2" />
+  <path d="m10 10 4-2v8l-4-2" />
+  <path d="m18 7 4-3m-4 13 4 3" />
+</svg>

package/src/icons/svg/sideview-perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="8" width="8" height="8" rx="2" />
+  <path d="m10 10 4-2v8l-4-2" />
+  <path d="M18 6h4v12h-4" />
+</svg>

package/src/icons/svg/top-down-perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="8" y="2" width="8" height="8" rx="2" />
+  <path d="m10 10-2 4h8l-2-4" />
+  <path d="M6 18v4h12v-4" />
+</svg>

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';