@zylem/ui 0.8.8 → 0.8.11

package/src/components/FrameStrip/FrameStrip.tsx

@@ -0,0 +1,146 @@
+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';
+import Trash2 from 'lucide-solid/icons/trash-2';
+import { type JSX, Show, splitProps } from 'solid-js';
+import { Button } from '../Button/Button';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+
+export interface FrameStripProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Caption, e.g. `Timeline`. */
+  label?: string;
+  /** Name of the animation the frames belong to, shown after the caption. */
+  title?: string;
+  /** `FrameThumb`s followed by an `AddTile variant="tall"`. */
+  children: JSX.Element;
+}
+
+/** Captioned, horizontally scrolling row of animation frames. */
+export function FrameStrip(props: FrameStripProps) {
+  const [local, rest] = splitProps(props, ['label', 'title', 'children', 'class']);
+  return (
+    <div class={local.class ? `zylem-frame-strip ${local.class}` : 'zylem-frame-strip'} {...rest}>
+      <div class="zylem-frame-strip-header">
+        <span class="zylem-frame-strip-label">{local.label ?? 'Timeline'}</span>
+        <Show when={local.title}>
+          <span class="zylem-frame-strip-title">{local.title}</span>
+        </Show>
+      </div>
+      <div class="zylem-frame-strip-row zylem-scroll" role="listbox" aria-label={local.label ?? 'Frames'}>
+        {local.children}
+      </div>
+    </div>
+  );
+}
+
+export interface FrameThumbProps {
+  /** One-based frame number shown in the corner badge. */
+  index: number;
+  selected?: boolean;
+  onClick?: (event: MouseEvent) => void;
+  /** Thumbnail content (a canvas or img); empty frames show the checker. */
+  children?: JSX.Element;
+  label?: string;
+  class?: string;
+}
+
+/** Square frame thumbnail on the checker with a frame-number badge. */
+export function FrameThumb(props: FrameThumbProps) {
+  return (
+    <button
+      type="button"
+      role="option"
+      class={props.class ? `zylem-frame-thumb ${props.class}` : 'zylem-frame-thumb'}
+      data-selected={props.selected ? '' : undefined}
+      aria-selected={props.selected ? 'true' : 'false'}
+      aria-label={props.label ?? `Frame ${props.index}`}
+      onClick={props.onClick}
+    >
+      <span class="zylem-frame-thumb-surface">{props.children}</span>
+      <span class="zylem-frame-thumb-index" aria-hidden="true">
+        {props.index}
+      </span>
+    </button>
+  );
+}
+
+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, the optional reorder
+ * pair, then step arrows whose chevrons are centered in square toolbar buttons.
+ */
+export function FrameActions(props: FrameActionsProps) {
+  return (
+    <div class={props.class ? `zylem-frame-actions ${props.class}` : 'zylem-frame-actions'}>
+      <Button
+        variant="primary"
+        size="sm"
+        disabled={props.canDuplicate === false}
+        onClick={() => props.onDuplicate?.()}
+      >
+        <Copy class="zylem-icon" aria-hidden="true" />
+        Duplicate
+      </Button>
+      <Button size="sm" disabled={props.canDelete === false} onClick={() => props.onDelete?.()}>
+        <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"
+        disabled={props.canPrev === false}
+        onClick={() => props.onPrev?.()}
+        class="zylem-frame-actions-step"
+      >
+        <ChevronLeft class="zylem-icon" />
+      </ToolbarButton>
+      <ToolbarButton
+        label="Next frame"
+        disabled={props.canNext === false}
+        onClick={() => props.onNext?.()}
+        class="zylem-frame-actions-step"
+      >
+        <ChevronRight class="zylem-icon" />
+      </ToolbarButton>
+    </div>
+  );
+}

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>
+  );
+}