@zylem/ui 0.8.9 → 0.8.12

package/src/components/FrameStrip/FrameStrip.css.ts

@@ -126,6 +126,12 @@ globalStyle('.zylem-frame-actions-spacer', {
   flex: '1 1 auto',
 });
 
+globalStyle('.zylem-frame-actions-group', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+});
+
 globalStyle('.zylem-frame-actions-step', {
   width: '34px',
   padding: 0,

package/src/components/FrameStrip/FrameStrip.tsx

@@ -1,3 +1,5 @@
+import ArrowLeftToLine from 'lucide-solid/icons/arrow-left-to-line';
+import ArrowRightToLine from 'lucide-solid/icons/arrow-right-to-line';
 import ChevronLeft from 'lucide-solid/icons/chevron-left';
 import ChevronRight from 'lucide-solid/icons/chevron-right';
 import Copy from 'lucide-solid/icons/copy';
@@ -67,18 +69,24 @@ export function FrameThumb(props: FrameThumbProps) {
 export interface FrameActionsProps {
   onDuplicate?: () => void;
   onDelete?: () => void;
+  /** Reorder: swap the selected frame with its left neighbour. Shown when set. */
+  onMoveLeft?: () => void;
+  /** Reorder: swap the selected frame with its right neighbour. Shown when set. */
+  onMoveRight?: () => void;
   onPrev?: () => void;
   onNext?: () => void;
   canDuplicate?: boolean;
   canDelete?: boolean;
+  canMoveLeft?: boolean;
+  canMoveRight?: boolean;
   canPrev?: boolean;
   canNext?: boolean;
   class?: string;
 }
 
 /**
- * Frame commands under the strip: Duplicate and Delete, then step arrows
- * whose chevrons are centered in square toolbar buttons.
+ * Frame commands under the strip: Duplicate and Delete, the optional reorder
+ * pair, then step arrows whose chevrons are centered in square toolbar buttons.
  */
 export function FrameActions(props: FrameActionsProps) {
   return (
@@ -96,6 +104,26 @@ export function FrameActions(props: FrameActionsProps) {
         <Trash2 class="zylem-icon" aria-hidden="true" />
         Delete
       </Button>
+      <Show when={props.onMoveLeft || props.onMoveRight}>
+        <span class="zylem-frame-actions-group" role="group" aria-label="Reorder frame">
+          <ToolbarButton
+            label="Move frame left"
+            disabled={props.canMoveLeft === false}
+            onClick={() => props.onMoveLeft?.()}
+            class="zylem-frame-actions-step"
+          >
+            <ArrowLeftToLine class="zylem-icon" />
+          </ToolbarButton>
+          <ToolbarButton
+            label="Move frame right"
+            disabled={props.canMoveRight === false}
+            onClick={() => props.onMoveRight?.()}
+            class="zylem-frame-actions-step"
+          >
+            <ArrowRightToLine class="zylem-icon" />
+          </ToolbarButton>
+        </span>
+      </Show>
       <span class="zylem-frame-actions-spacer" />
       <ToolbarButton
         label="Previous frame"

package/src/components/Menubar/Menubar.css.ts

@@ -0,0 +1,52 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-menubar', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '2px',
+  minWidth: 0,
+});
+
+// Flat chrome (see DESIGN.md): transparent at rest, a tint on hover and a
+// stronger tint while the menu is open. No gloss, so the bar's glossy title
+// surfaces and primary buttons stay the focal points.
+globalStyle('.zylem-menubar-trigger', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+  padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
+  border: '1px solid transparent',
+  borderRadius: vars.radii.button,
+  background: 'transparent',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  letterSpacing: '0.02em',
+  lineHeight: 1.2,
+  cursor: 'pointer',
+  userSelect: 'none',
+  outline: 'none',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-menubar-trigger:hover', {
+  background: 'rgba(97, 166, 232, 0.12)',
+  color: vars.colors.text,
+});
+
+globalStyle('.zylem-menubar-trigger[data-expanded]', {
+  background: 'rgba(97, 166, 232, 0.22)',
+  borderColor: 'rgba(97, 166, 232, 0.35)',
+  color: '#F4FAFF',
+});
+
+globalStyle('.zylem-menubar-trigger:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-menubar-trigger[data-disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});

package/src/components/Menubar/Menubar.tsx

@@ -0,0 +1,77 @@
+import { Menubar as KMenubar } from '@kobalte/core';
+import { For, Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { createDismissGuard, useLayer } from '../../layers';
+import { MenuItems, type DropdownMenuItemConfig } from '../DropdownMenu/DropdownMenu';
+
+export interface MenubarMenuConfig {
+  id: string;
+  label: JSX.Element;
+  /**
+   * Rows of the menu. A function is read each time the menu renders, so a
+   * menu whose rows depend on app state (the open stages, the dirty flag) can
+   * hand over its accessor instead of rebuilding the whole bar on every change.
+   */
+  items: DropdownMenuItemConfig[] | (() => DropdownMenuItemConfig[]);
+  disabled?: boolean;
+}
+
+export interface MenubarProps {
+  menus: MenubarMenuConfig[];
+  class?: string;
+  'aria-label'?: string;
+  /** Class applied to every trigger button. */
+  triggerClass?: string;
+}
+
+/**
+ * Desktop-style menu bar: a row of flat text triggers, one open at a time.
+ * Moving the pointer onto a sibling trigger while a menu is open swaps menus,
+ * and the arrow keys walk the bar — behaviour that comes from Kobalte's
+ * Menubar. Each menu is a `DropdownMenu` sheet, portaled at the `menu` tier.
+ */
+export function Menubar(props: MenubarProps) {
+  const layer = useLayer('menu');
+
+  return (
+    <KMenubar.Root
+      ref={layer.anchorRef}
+      class={props.class ? `zylem-menubar ${props.class}` : 'zylem-menubar'}
+      aria-label={props['aria-label']}
+    >
+      <For each={props.menus}>
+        {(menu) => {
+          const dismiss = createDismissGuard();
+          const items = () => (typeof menu.items === 'function' ? menu.items() : menu.items);
+          return (
+            <KMenubar.Menu>
+              <KMenubar.Trigger
+                class={
+                  props.triggerClass
+                    ? `zylem-menubar-trigger ${props.triggerClass}`
+                    : 'zylem-menubar-trigger'
+                }
+                disabled={menu.disabled}
+              >
+                {menu.label}
+              </KMenubar.Trigger>
+              <Show when={layer.mount()} keyed>
+                {(mount) => (
+                  <KMenubar.Portal mount={mount}>
+                    <KMenubar.Content
+                      ref={dismiss.ref}
+                      class="zylem-dropdown-content zylem-menubar-content"
+                      onInteractOutside={dismiss.onInteractOutside}
+                    >
+                      <MenuItems items={items()} />
+                    </KMenubar.Content>
+                  </KMenubar.Portal>
+                )}
+              </Show>
+            </KMenubar.Menu>
+          );
+        }}
+      </For>
+    </KMenubar.Root>
+  );
+}

package/src/components/Mixer/Knob.tsx

@@ -0,0 +1,188 @@
+import { createSignal, Show } from 'solid-js';
+import { clamp } from '../TimelineLanes/lanes-math';
+
+export interface KnobProps {
+  value: number;
+  onChange?: (value: number) => void;
+  /** Fires once when a drag ends or a key edit lands. */
+  onCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Double-click resets to this. */
+  defaultValue?: number;
+  label?: string;
+  /** Readout under the knob; defaults to the value with `step` precision. */
+  format?: (value: number) => string;
+  /** Draw the arc from the centre (for pan and other ±ranges). */
+  bipolar?: boolean;
+  size?: number;
+  disabled?: boolean;
+  class?: string;
+}
+
+const SWEEP = 270;
+const START_ANGLE = -135;
+
+function polar(cx: number, cy: number, radius: number, degrees: number) {
+  const radians = ((degrees - 90) * Math.PI) / 180;
+  return { x: cx + radius * Math.cos(radians), y: cy + radius * Math.sin(radians) };
+}
+
+/** SVG arc path from `from` to `to` degrees (clockwise, 12 o'clock = 0). */
+export function arcPath(cx: number, cy: number, radius: number, from: number, to: number): string {
+  const [a, b] = from <= to ? [from, to] : [to, from];
+  const start = polar(cx, cy, radius, a);
+  const end = polar(cx, cy, radius, b);
+  const large = b - a > 180 ? 1 : 0;
+  return `M ${start.x.toFixed(3)} ${start.y.toFixed(3)} A ${radius} ${radius} 0 ${large} 1 ${end.x.toFixed(3)} ${end.y.toFixed(3)}`;
+}
+
+/**
+ * Rotary control: drag vertically (Shift for fine steps), arrow keys to
+ * step, double-click to reset. The arc fills from the minimum, or from the
+ * centre when `bipolar`.
+ */
+export function Knob(props: KnobProps) {
+  const min = () => props.min ?? 0;
+  const max = () => props.max ?? 1;
+  const step = () => props.step ?? (max() - min()) / 100;
+  const size = () => props.size ?? 36;
+  const ratio = () => (max() > min() ? clamp((props.value - min()) / (max() - min()), 0, 1) : 0);
+  const angle = () => START_ANGLE + ratio() * SWEEP;
+  const zeroAngle = () =>
+    START_ANGLE + clamp((0 - min()) / (max() - min() || 1), 0, 1) * SWEEP;
+  const [dragging, setDragging] = createSignal(false);
+
+  const quantize = (value: number) => {
+    const s = step();
+    const snapped = s > 0 ? Math.round((value - min()) / s) * s + min() : value;
+    return clamp(Number(snapped.toFixed(6)), min(), max());
+  };
+  const readout = () => {
+    if (props.format) return props.format(props.value);
+    const decimals = Math.max(0, Math.min(3, -Math.floor(Math.log10(step() || 1))));
+    return props.value.toFixed(decimals);
+  };
+
+  const beginDrag = (event: PointerEvent) => {
+    if (props.disabled || event.button !== 0) return;
+    event.preventDefault();
+    const target = event.currentTarget as HTMLElement;
+    target.focus({ preventScroll: true });
+    target.setPointerCapture?.(event.pointerId);
+    const originY = event.clientY;
+    const originValue = props.value;
+    let last = originValue;
+    setDragging(true);
+    const move = (moveEvent: PointerEvent) => {
+      const pixels = moveEvent.shiftKey ? 600 : 150;
+      const delta = ((originY - moveEvent.clientY) / pixels) * (max() - min());
+      last = quantize(originValue + delta);
+      props.onChange?.(last);
+    };
+    const stop = () => {
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      setDragging(false);
+      props.onCommit?.(last);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  const nudge = (direction: number, big: boolean) => {
+    const next = quantize(props.value + direction * step() * (big ? 10 : 1));
+    props.onChange?.(next);
+    props.onCommit?.(next);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (props.disabled) return;
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowRight':
+        event.preventDefault();
+        nudge(1, event.shiftKey);
+        break;
+      case 'ArrowDown':
+      case 'ArrowLeft':
+        event.preventDefault();
+        nudge(-1, event.shiftKey);
+        break;
+      case 'Home':
+        event.preventDefault();
+        props.onChange?.(min());
+        props.onCommit?.(min());
+        break;
+      case 'End':
+        event.preventDefault();
+        props.onChange?.(max());
+        props.onCommit?.(max());
+        break;
+      default:
+    }
+  };
+
+  const reset = () => {
+    if (props.disabled || props.defaultValue === undefined) return;
+    const next = quantize(props.defaultValue);
+    props.onChange?.(next);
+    props.onCommit?.(next);
+  };
+
+  const radius = () => size() / 2 - 3;
+  const center = () => size() / 2;
+
+  return (
+    <div
+      class={props.class ? `zylem-knob ${props.class}` : 'zylem-knob'}
+      data-disabled={props.disabled ? '' : undefined}
+      data-dragging={dragging() ? '' : undefined}
+    >
+      <div
+        class="zylem-knob-dial"
+        role="slider"
+        tabIndex={props.disabled ? -1 : 0}
+        aria-label={props.label}
+        aria-valuemin={min()}
+        aria-valuemax={max()}
+        aria-valuenow={props.value}
+        aria-valuetext={readout()}
+        aria-disabled={props.disabled ? 'true' : undefined}
+        style={{ width: `${size()}px`, height: `${size()}px` }}
+        onPointerDown={beginDrag}
+        onKeyDown={handleKeyDown}
+        onDblClick={reset}
+      >
+        <svg viewBox={`0 0 ${size()} ${size()}`} width={size()} height={size()} aria-hidden="true">
+          <path
+            class="zylem-knob-track"
+            d={arcPath(center(), center(), radius(), START_ANGLE, START_ANGLE + SWEEP)}
+          />
+          <path
+            class="zylem-knob-fill"
+            d={arcPath(center(), center(), radius(), props.bipolar ? zeroAngle() : START_ANGLE, angle())}
+          />
+          <g transform={`rotate(${angle()} ${center()} ${center()})`}>
+            <circle class="zylem-knob-cap" cx={center()} cy={center()} r={radius() - 4} />
+            <line
+              class="zylem-knob-pointer"
+              x1={center()}
+              y1={center() - radius() + 6}
+              x2={center()}
+              y2={center() - radius() / 2}
+            />
+          </g>
+        </svg>
+      </div>
+      <Show when={props.label}>
+        <span class="zylem-knob-label">{props.label}</span>
+      </Show>
+      <span class="zylem-knob-value">{readout()}</span>
+    </div>
+  );
+}

package/src/components/Mixer/Mixer.css.ts

@@ -0,0 +1,246 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+// Knob -----------------------------------------------------------------------
+
+globalStyle('.zylem-knob', {
+  display: 'inline-flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '2px',
+  fontFamily: vars.typography.fontFamily,
+  color: vars.colors.text,
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-knob[data-disabled]', {
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-knob-dial', {
+  display: 'block',
+  borderRadius: '999px',
+  cursor: 'ns-resize',
+  outline: 'none',
+  touchAction: 'none',
+});
+
+globalStyle('.zylem-knob[data-dragging] .zylem-knob-dial', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-knob-dial:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-knob-dial svg', {
+  display: 'block',
+  overflow: 'visible',
+});
+
+globalStyle('.zylem-knob-track', {
+  fill: 'none',
+  stroke: 'rgba(8, 19, 31, 0.9)',
+  strokeWidth: 3,
+  strokeLinecap: 'round',
+});
+
+globalStyle('.zylem-knob-fill', {
+  fill: 'none',
+  stroke: 'rgba(120, 190, 255, 0.95)',
+  strokeWidth: 3,
+  strokeLinecap: 'round',
+  filter: 'drop-shadow(0 0 3px rgba(97, 166, 232, 0.7))',
+});
+
+globalStyle('.zylem-knob-cap', {
+  fill: 'rgba(40, 70, 105, 1)',
+  stroke: 'rgba(178, 219, 255, 0.5)',
+  strokeWidth: 1,
+});
+
+globalStyle('.zylem-knob-pointer', {
+  stroke: 'rgba(240, 250, 255, 0.98)',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+});
+
+globalStyle('.zylem-knob-label', {
+  fontSize: '9px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-knob-value', {
+  fontSize: '10px',
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.text,
+});
+
+// Mixer strip ----------------------------------------------------------------
+
+globalStyle('.zylem-mixer-strip', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+  width: '64px',
+  padding: `${vars.spacing.sm} ${vars.spacing.xs}`,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.colors.text,
+  background: vars.material.glassPanelDark,
+  border: '1px solid rgba(97, 166, 232, 0.2)',
+  borderTop: '3px solid var(--zylem-track-color)',
+  borderRadius: vars.radii.control,
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06)',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-mixer-strip[data-master]', {
+  width: '76px',
+  background: vars.material.glassPanel,
+});
+
+globalStyle('.zylem-mixer-strip[data-selected]', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(178, 219, 255, 0.6), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-mixer-strip[data-disabled]', {
+  opacity: 0.6,
+});
+
+globalStyle('.zylem-mixer-fader-row', {
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: '4px',
+  height: '132px',
+});
+
+globalStyle('.zylem-fader', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '24px',
+  height: '100%',
+  touchAction: 'none',
+});
+
+globalStyle('.zylem-fader[data-disabled]', {
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-fader-sr', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
+globalStyle('.zylem-fader-track', {
+  position: 'relative',
+  flex: '1 1 auto',
+  width: '8px',
+  margin: '0 auto',
+  borderRadius: '999px',
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  cursor: 'pointer',
+});
+
+globalStyle('.zylem-fader-fill', {
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  borderRadius: '999px',
+  background:
+    'linear-gradient(0deg, rgba(48, 137, 220, 0.8), rgba(178, 219, 255, 0.55))',
+});
+
+globalStyle('.zylem-fader-zero', {
+  position: 'absolute',
+  left: '-6px',
+  right: '-6px',
+  bottom: 'calc(100% * 60 / 66)',
+  height: '1px',
+  background: 'rgba(205, 232, 255, 0.4)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-fader-thumb', {
+  display: 'block',
+  left: '-7px',
+  width: '22px',
+  height: '12px',
+  borderRadius: '4px',
+  border: '1px solid rgba(255,255,255,0.55)',
+  background:
+    'linear-gradient(180deg, rgba(240,250,255,0.96), rgba(140,190,235,0.92))',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -3px 0 rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.5)`,
+  cursor: 'grab',
+  outline: 'none',
+});
+
+globalStyle('.zylem-fader-thumb:active', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-fader-thumb:focus-visible', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-mixer-meter', {
+  position: 'relative',
+  width: '6px',
+  borderRadius: '3px',
+  background: 'rgba(8, 19, 31, 0.9)',
+  border: '1px solid rgba(97, 166, 232, 0.2)',
+  overflow: 'hidden',
+});
+
+globalStyle('.zylem-mixer-meter-fill', {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  background:
+    'linear-gradient(0deg, rgba(28, 174, 63, 0.95) 0%, rgba(170, 255, 190, 0.95) 65%, rgba(255, 220, 130, 0.95) 85%, rgba(230, 69, 52, 0.95) 100%)',
+  transition: `height 60ms linear`,
+});
+
+globalStyle('.zylem-mixer-readout', {
+  fontSize: '10px',
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.textSecondary,
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-mixer-toggles', {
+  display: 'flex',
+  gap: '3px',
+});
+
+globalStyle('.zylem-mixer-name', {
+  maxWidth: '100%',
+  fontSize: '11px',
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+globalStyle('.zylem-mixer-strip[data-muted] .zylem-mixer-name', {
+  color: vars.colors.textSecondary,
+});
+
+globalStyle('.zylem-mixer-strip[data-master] .zylem-mixer-name', {
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+});