@zylem/ui 0.8.8 → 0.8.9

package/src/components/FrameStrip/FrameStrip.tsx

@@ -0,0 +1,118 @@
+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;
+  onPrev?: () => void;
+  onNext?: () => void;
+  canDuplicate?: boolean;
+  canDelete?: 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.
+ */
+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>
+      <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/PixelGrid/PixelGrid.css.ts

@@ -0,0 +1,30 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Checker pattern shared by every "transparent" surface in the art tools:
+ * the pixel grid, the transparent palette swatch, and empty frame thumbs.
+ * Cell size comes from `--zylem-pixel-grid-cell` so hosts can scale it.
+ */
+export const checkerBackground = `repeating-conic-gradient(${vars.art.checkerLight} 0 25%, ${vars.art.checkerDark} 0 50%) 0 0 / calc(var(--zylem-pixel-grid-cell, 8px) * 2) calc(var(--zylem-pixel-grid-cell, 8px) * 2)`;
+
+globalStyle('.zylem-pixel-grid', {
+  boxSizing: 'content-box',
+  position: 'relative',
+  flex: 'none',
+  background: checkerBackground,
+  border: `1px solid ${vars.art.canvasBorder}`,
+  imageRendering: 'pixelated',
+  overflow: 'hidden',
+});
+
+// Overlays fill the surface; a consumer canvas keeps its own pixel size and
+// stretches to the zoomed box without smoothing.
+globalStyle('.zylem-pixel-grid > canvas, .zylem-pixel-grid > img, .zylem-pixel-grid > svg', {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  imageRendering: 'pixelated',
+});

package/src/components/PixelGrid/PixelGrid.tsx

@@ -0,0 +1,48 @@
+import { type JSX, splitProps } from 'solid-js';
+
+export interface PixelGridProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Sprite width in source pixels. */
+  width: number;
+  /** Sprite height in source pixels. */
+  height: number;
+  /** Screen pixels per source pixel. */
+  zoom?: number;
+  /** Checker cell size in screen pixels. */
+  checkerCell?: number;
+  /** Overlay content (a canvas, selection chrome); fills the surface. */
+  children?: JSX.Element;
+}
+
+/**
+ * Transparent-pixel checkerboard for the sprite editor. Sized to the sprite
+ * at the given zoom with a thin blue edge, so a consumer's canvas can sit on
+ * top with a transparent background and read against the checker.
+ */
+export function PixelGrid(props: PixelGridProps) {
+  const [local, rest] = splitProps(props, [
+    'width',
+    'height',
+    'zoom',
+    'checkerCell',
+    'children',
+    'class',
+    'style',
+  ]);
+  const zoom = () => local.zoom ?? 1;
+  const inlineStyle = (): JSX.CSSProperties => ({
+    width: `${local.width * zoom()}px`,
+    height: `${local.height * zoom()}px`,
+    '--zylem-pixel-grid-cell': `${local.checkerCell ?? 8}px`,
+    ...(typeof local.style === 'object' ? local.style : {}),
+  });
+
+  return (
+    <div
+      class={local.class ? `zylem-pixel-grid ${local.class}` : 'zylem-pixel-grid'}
+      style={inlineStyle()}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}

package/src/components/PlaybackControls/PlaybackControls.css.ts

@@ -0,0 +1,53 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-playback', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.md,
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-playback-transport', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+});
+
+globalStyle('.zylem-playback-btn', {
+  width: '34px',
+  padding: 0,
+});
+
+// Play is the primary control: a touch wider so the strip reads as a
+// transport rather than three identical tool buttons.
+globalStyle('.zylem-playback-btn--play', {
+  width: '44px',
+});
+
+globalStyle('.zylem-playback-btn .zylem-icon', {
+  fill: 'currentColor',
+  fillOpacity: 0.85,
+});
+
+globalStyle('.zylem-playback-loop .zylem-icon', {
+  width: '14px',
+  height: '14px',
+  stroke: 'currentColor',
+});
+
+globalStyle('.zylem-playback-extra', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  minWidth: 0,
+  flex: '1 1 auto',
+  color: vars.colors.textSecondary,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+});
+
+// Compact fields inside the transport (FPS, duration).
+globalStyle('.zylem-playback-extra .zylem-field-root', {
+  width: '72px',
+});

package/src/components/PlaybackControls/PlaybackControls.tsx

@@ -0,0 +1,80 @@
+import FastForward from 'lucide-solid/icons/fast-forward';
+import Pause from 'lucide-solid/icons/pause';
+import Play from 'lucide-solid/icons/play';
+import Repeat from 'lucide-solid/icons/repeat';
+import Rewind from 'lucide-solid/icons/rewind';
+import { type JSX, Show } from 'solid-js';
+import { Button } from '../Button/Button';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+
+export interface PlaybackControlsProps {
+  playing: boolean;
+  onTogglePlay: () => void;
+  onRewind?: () => void;
+  onFastForward?: () => void;
+  /** When defined, a Loop toggle follows the transport buttons. */
+  loop?: boolean;
+  onToggleLoop?: () => void;
+  disabled?: boolean;
+  /** Trailing controls: an FPS field, a time readout, a duration field. */
+  children?: JSX.Element;
+  class?: string;
+}
+
+/**
+ * Transport strip: rewind, play/pause, fast-forward as glass toolbar
+ * buttons, an optional Loop toggle, then whatever the host wants alongside.
+ */
+export function PlaybackControls(props: PlaybackControlsProps) {
+  return (
+    <div
+      class={props.class ? `zylem-playback ${props.class}` : 'zylem-playback'}
+      role="group"
+      aria-label="Playback"
+    >
+      <div class="zylem-playback-transport">
+        <ToolbarButton
+          label="Rewind"
+          disabled={props.disabled || !props.onRewind}
+          onClick={() => props.onRewind?.()}
+          class="zylem-playback-btn"
+        >
+          <Rewind class="zylem-icon" />
+        </ToolbarButton>
+        <ToolbarButton
+          label={props.playing ? 'Pause' : 'Play'}
+          selected={props.playing}
+          disabled={props.disabled}
+          onClick={() => props.onTogglePlay()}
+          class="zylem-playback-btn zylem-playback-btn--play"
+        >
+          {props.playing ? <Pause class="zylem-icon" /> : <Play class="zylem-icon" />}
+        </ToolbarButton>
+        <ToolbarButton
+          label="Fast forward"
+          disabled={props.disabled || !props.onFastForward}
+          onClick={() => props.onFastForward?.()}
+          class="zylem-playback-btn"
+        >
+          <FastForward class="zylem-icon" />
+        </ToolbarButton>
+      </div>
+      <Show when={props.loop !== undefined}>
+        <Button
+          size="sm"
+          variant={props.loop ? 'active' : 'default'}
+          aria-pressed={props.loop ? 'true' : 'false'}
+          disabled={props.disabled}
+          onClick={() => props.onToggleLoop?.()}
+          class="zylem-playback-loop"
+        >
+          <Repeat class="zylem-icon" aria-hidden="true" />
+          Loop
+        </Button>
+      </Show>
+      <Show when={props.children}>
+        <div class="zylem-playback-extra">{props.children}</div>
+      </Show>
+    </div>
+  );
+}

package/src/components/SpriteSizePicker/SpriteSizePicker.css.ts

@@ -0,0 +1,103 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Sprite size picker: preset row, a 1:1 stage showing the real pixel
+ * footprint with edge/corner drag handles, and the optional W/H fields.
+ */
+globalStyle('.zylem-size-picker', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.md,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-size-picker-presets', {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-size-picker-presets .zylem-button', {
+  minWidth: '40px',
+  fontVariantNumeric: 'tabular-nums',
+});
+
+globalStyle('.zylem-size-picker-stage', {
+  boxSizing: 'border-box',
+  position: 'relative',
+  flex: 'none',
+  padding: '8px',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  overflow: 'hidden',
+});
+
+// Sized to the sprite at 1:1; the grid's own 1px border sits just outside.
+globalStyle('.zylem-size-picker-frame', {
+  position: 'relative',
+  boxSizing: 'content-box',
+});
+
+// Handles: slim glass bars along the right and bottom edges plus a corner
+// jewel. Hit areas straddle the edge so small sprites are still grabbable.
+globalStyle('.zylem-size-picker-handle', {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  borderRadius: '999px',
+  border: '1px solid rgba(178, 219, 255, 0.85)',
+  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), 0 1px 4px rgba(0,0,0,0.5), ${vars.effects.glowPrimary}`,
+  touchAction: 'none',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-size-picker-handle:hover, .zylem-size-picker-handle[data-dragging]', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 4px rgba(0,0,0,0.5), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-size-picker-handle[data-edge="right"]', {
+  top: '50%',
+  right: '-6px',
+  width: '8px',
+  height: 'min(28px, 60%)',
+  transform: 'translateY(-50%)',
+  cursor: 'ew-resize',
+});
+
+globalStyle('.zylem-size-picker-handle[data-edge="bottom"]', {
+  left: '50%',
+  bottom: '-6px',
+  width: 'min(28px, 60%)',
+  height: '8px',
+  transform: 'translateX(-50%)',
+  cursor: 'ns-resize',
+});
+
+globalStyle('.zylem-size-picker-handle[data-edge="corner"]', {
+  right: '-7px',
+  bottom: '-7px',
+  width: '14px',
+  height: '14px',
+  cursor: 'nwse-resize',
+});
+
+globalStyle('.zylem-size-picker-readout', {
+  position: 'absolute',
+  right: vars.spacing.sm,
+  bottom: vars.spacing.xs,
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  fontVariantNumeric: 'tabular-nums',
+  color: vars.colors.primary,
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-size-picker-fields', {
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: vars.spacing.md,
+});

package/src/components/SpriteSizePicker/SpriteSizePicker.tsx

@@ -0,0 +1,161 @@
+import { For, Show, onCleanup } from 'solid-js';
+import { Button } from '../Button/Button';
+import { NumberField } from '../NumberField/NumberField';
+import { PixelGrid } from '../PixelGrid/PixelGrid';
+import { SPRITE_SIZE_PRESETS, type SpriteSize, snapSize } from './snap-size';
+
+export interface SpriteSizePickerProps {
+  width: number;
+  height: number;
+  onChange: (size: SpriteSize) => void;
+  /** Square presets; each sets both dimensions. */
+  presets?: readonly number[];
+  /** Smallest dimension reachable by dragging or typing. */
+  min?: number;
+  /** Largest dimension; also sets the size of the 1:1 preview stage. */
+  max?: number;
+  /** Drag increment in source pixels. */
+  step?: number;
+  /** Render Width / Height number fields under the preview. */
+  showFields?: boolean;
+  class?: string;
+}
+
+type Edge = 'right' | 'bottom' | 'corner';
+
+/** Extra room around the stage so the largest size still shows its handles. */
+const STAGE_GUTTER = 24;
+
+/**
+ * Sprite canvas size chooser: power-of-two presets, a 1:1 preview of the
+ * actual pixel footprint with drag handles that grow it in `step` increments,
+ * and optional numeric fields for exact values.
+ */
+export function SpriteSizePicker(props: SpriteSizePickerProps) {
+  const min = () => props.min ?? 2;
+  const max = () => props.max ?? 256;
+  const step = () => props.step ?? 2;
+  const presets = () => props.presets ?? SPRITE_SIZE_PRESETS;
+  const snap = (value: number) => snapSize(value, { min: min(), max: max(), step: step() });
+
+  const emit = (width: number, height: number) => {
+    if (width !== props.width || height !== props.height) {
+      props.onChange({ width, height });
+    }
+  };
+
+  let release: (() => void) | undefined;
+  onCleanup(() => release?.());
+
+  const startDrag = (edge: Edge) => (event: PointerEvent) => {
+    if (event.button !== 0) return;
+    const handle = event.currentTarget as HTMLElement;
+    const originX = event.clientX;
+    const originY = event.clientY;
+    const startWidth = props.width;
+    const startHeight = props.height;
+    // Capture keeps the drag alive when the pointer outruns the handle; a
+    // synthetic event has no active pointer to capture, so tolerate that.
+    try {
+      handle.setPointerCapture(event.pointerId);
+    } catch {
+      /* no active pointer */
+    }
+    handle.dataset.dragging = '';
+
+    const onMove = (move: PointerEvent) => {
+      const dx = move.clientX - originX;
+      const dy = move.clientY - originY;
+      const width = edge === 'bottom' ? props.width : snap(startWidth + dx);
+      const height = edge === 'right' ? props.height : snap(startHeight + dy);
+      emit(width, height);
+    };
+    const onUp = () => release?.();
+    release = () => {
+      handle.removeEventListener('pointermove', onMove);
+      handle.removeEventListener('pointerup', onUp);
+      handle.removeEventListener('pointercancel', onUp);
+      delete handle.dataset.dragging;
+      if (handle.hasPointerCapture(event.pointerId)) {
+        handle.releasePointerCapture(event.pointerId);
+      }
+      release = undefined;
+    };
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', onUp);
+    handle.addEventListener('pointercancel', onUp);
+    event.preventDefault();
+  };
+
+  const stageSize = () => `${max() + STAGE_GUTTER}px`;
+
+  return (
+    <div class={props.class ? `zylem-size-picker ${props.class}` : 'zylem-size-picker'}>
+      <div class="zylem-size-picker-presets" role="group" aria-label="Size presets">
+        <For each={presets()}>
+          {(preset) => (
+            <Button
+              size="sm"
+              variant={props.width === preset && props.height === preset ? 'primary' : 'default'}
+              aria-pressed={props.width === preset && props.height === preset}
+              onClick={() => emit(preset, preset)}
+            >
+              {preset}
+            </Button>
+          )}
+        </For>
+      </div>
+
+      <div class="zylem-size-picker-stage" style={{ width: stageSize(), height: stageSize() }}>
+        <div
+          class="zylem-size-picker-frame"
+          style={{ width: `${props.width}px`, height: `${props.height}px` }}
+        >
+          <PixelGrid width={props.width} height={props.height} checkerCell={4} />
+          <div
+            class="zylem-size-picker-handle"
+            data-edge="right"
+            aria-hidden="true"
+            onPointerDown={startDrag('right')}
+          />
+          <div
+            class="zylem-size-picker-handle"
+            data-edge="bottom"
+            aria-hidden="true"
+            onPointerDown={startDrag('bottom')}
+          />
+          <div
+            class="zylem-size-picker-handle"
+            data-edge="corner"
+            aria-hidden="true"
+            onPointerDown={startDrag('corner')}
+          />
+        </div>
+        <output class="zylem-size-picker-readout" aria-live="polite">
+          {props.width} × {props.height} px
+        </output>
+      </div>
+
+      <Show when={props.showFields ?? true}>
+        <div class="zylem-size-picker-fields">
+          <NumberField
+            label="Width"
+            value={props.width}
+            minValue={min()}
+            maxValue={max()}
+            step={step()}
+            onChange={(width) => emit(snap(width), props.height)}
+          />
+          <NumberField
+            label="Height"
+            value={props.height}
+            minValue={min()}
+            maxValue={max()}
+            step={step()}
+            onChange={(height) => emit(props.width, snap(height))}
+          />
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/components/SpriteSizePicker/snap-size.ts

@@ -0,0 +1,28 @@
+export interface SnapOptions {
+  min: number;
+  max: number;
+  step: number;
+}
+
+/** Sprite dimensions in source pixels. */
+export interface SpriteSize {
+  width: number;
+  height: number;
+}
+
+/** Powers of two from 8 through 256; the default preset row. */
+export const SPRITE_SIZE_PRESETS: readonly number[] = [8, 16, 32, 64, 128, 256];
+
+/**
+ * Round a dragged dimension to the nearest step and keep it inside the
+ * allowed range. Non-finite input (a NaN from an empty field) lands on `min`.
+ */
+export function snapSize(value: number, options: SnapOptions): number {
+  const { min, max, step } = options;
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  const unit = step > 0 ? step : 1;
+  const snapped = Math.round(value / unit) * unit;
+  return Math.min(max, Math.max(min, snapped));
+}