@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/runtime/react/timeline/timeline-easing-model.ts

@@ -0,0 +1,271 @@
+import type {
+  ToolcraftTimelineBezierControlPoints,
+  ToolcraftTimelineKeyframeEasing,
+} from '../../state/types';
+
+export type TimelineBezierControlPoints = ToolcraftTimelineBezierControlPoints;
+
+const defaultTimelineBezierControlPoints = [
+  0.65, 0, 0.35, 1,
+] satisfies TimelineBezierControlPoints;
+
+const defaultTimelineKeyframeEasing: ToolcraftTimelineKeyframeEasing = {
+  controlPoints: defaultTimelineBezierControlPoints,
+  type: 'bezier',
+};
+
+export type TimelineEasingPresetCategory = 'basic' | 'expressive' | 'in' | 'inOut' | 'out';
+
+export type TimelineEasingPreset = {
+  category: TimelineEasingPresetCategory;
+  controlPoints: TimelineBezierControlPoints;
+  label: string;
+  name: string;
+};
+
+export const timelineEasingPresetCategories = [
+  ['basic', 'Foundation'],
+  ['out', 'Out'],
+  ['in', 'In'],
+  ['inOut', 'In Out'],
+  ['expressive', 'Expressive'],
+] as const satisfies ReadonlyArray<readonly [TimelineEasingPresetCategory, string]>;
+
+export const timelineEasingPresets = [
+  { category: 'basic', controlPoints: [0, 0, 1, 1], label: 'Linear', name: 'linear' },
+  { category: 'basic', controlPoints: [0.65, 0, 0.35, 1], label: 'Smooth', name: 'smooth' },
+  {
+    category: 'expressive',
+    controlPoints: [1, -0.4, 0.35, 0.95],
+    label: 'Anticipate',
+    name: 'anticipate',
+  },
+  {
+    category: 'expressive',
+    controlPoints: [0.36, 0, 0.66, -0.56],
+    label: 'Back In',
+    name: 'backIn',
+  },
+  {
+    category: 'expressive',
+    controlPoints: [0.34, 1.56, 0.64, 1],
+    label: 'Back Out',
+    name: 'backOut',
+  },
+  { category: 'out', controlPoints: [0, 0, 0.2, 1], label: 'Quick Out', name: 'quickOut' },
+  {
+    category: 'out',
+    controlPoints: [0.175, 0.885, 0.32, 1.1],
+    label: 'Swift Out',
+    name: 'swiftOut',
+  },
+  { category: 'out', controlPoints: [0.19, 1, 0.22, 1], label: 'Snappy Out', name: 'snappyOut' },
+  {
+    category: 'out',
+    controlPoints: [0.215, 0.61, 0.355, 1],
+    label: 'Out Cubic',
+    name: 'outCubic',
+  },
+  { category: 'out', controlPoints: [0, 0, 0.58, 1], label: 'Ease Out', name: 'easeOut' },
+  { category: 'in', controlPoints: [0.42, 0, 1, 1], label: 'Ease In', name: 'easeIn' },
+  { category: 'in', controlPoints: [0.6, 0.04, 0.98, 0.335], label: 'In Circ', name: 'inCirc' },
+  { category: 'in', controlPoints: [0.755, 0.05, 0.855, 0.06], label: 'In Quint', name: 'inQuint' },
+  {
+    category: 'inOut',
+    controlPoints: [0.42, 0, 0.58, 1],
+    label: 'Ease In Out',
+    name: 'easeInOut',
+  },
+  {
+    category: 'inOut',
+    controlPoints: [0.77, 0, 0.175, 1],
+    label: 'In Out Quart',
+    name: 'inOutQuart',
+  },
+  {
+    category: 'inOut',
+    controlPoints: [0.86, 0, 0.07, 1],
+    label: 'In Out Quint',
+    name: 'inOutQuint',
+  },
+  { category: 'inOut', controlPoints: [1, 0, 0, 1], label: 'In Out Expo', name: 'inOutExpo' },
+  {
+    category: 'inOut',
+    controlPoints: [0.785, 0.135, 0.15, 0.86],
+    label: 'In Out Circ',
+    name: 'inOutCirc',
+  },
+] as const satisfies readonly TimelineEasingPreset[];
+
+const easingNumberTokenPattern = /[+-]?(?:\d+(?:[.,]\d+)?|[.,]\d+)/g;
+
+function clampEasingValue(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function cloneToolcraftTimelineKeyframeEasing(
+  easing: ToolcraftTimelineKeyframeEasing,
+): ToolcraftTimelineKeyframeEasing {
+  return easing.type === 'step'
+    ? { type: 'step' }
+    : { controlPoints: [...easing.controlPoints], type: 'bezier' };
+}
+
+export function getToolcraftTimelineKeyframeEasing(
+  easing: ToolcraftTimelineKeyframeEasing | undefined,
+): ToolcraftTimelineKeyframeEasing {
+  return cloneToolcraftTimelineKeyframeEasing(easing ?? defaultTimelineKeyframeEasing);
+}
+
+export function normalizeToolcraftTimelineKeyframeEasing(
+  easing: unknown,
+): ToolcraftTimelineKeyframeEasing | undefined {
+  if (typeof easing !== 'object' || easing === null || Array.isArray(easing)) {
+    return undefined;
+  }
+
+  const easingRecord = easing as Record<string, unknown>;
+
+  if (easingRecord.type === 'step') {
+    return { type: 'step' };
+  }
+
+  if (easingRecord.type !== 'bezier' || !Array.isArray(easingRecord.controlPoints)) {
+    return undefined;
+  }
+
+  const [x1, y1, x2, y2] = easingRecord.controlPoints;
+
+  if (
+    typeof x1 !== 'number' ||
+    typeof y1 !== 'number' ||
+    typeof x2 !== 'number' ||
+    typeof y2 !== 'number' ||
+    !Number.isFinite(x1) ||
+    !Number.isFinite(y1) ||
+    !Number.isFinite(x2) ||
+    !Number.isFinite(y2)
+  ) {
+    return undefined;
+  }
+
+  return {
+    controlPoints: [
+      clampEasingValue(x1, 0, 1),
+      clampEasingValue(y1, -1, 2),
+      clampEasingValue(x2, 0, 1),
+      clampEasingValue(y2, -1, 2),
+    ],
+    type: 'bezier',
+  };
+}
+
+function parseTimelineEasingNumberTokens(value: string): number[] {
+  return Array.from(value.matchAll(easingNumberTokenPattern), ([token]) =>
+    Number.parseFloat(token.replace(',', '.')),
+  ).filter(Number.isFinite);
+}
+
+export function parseToolcraftTimelineKeyframeEasing(
+  value: string,
+  baseEasing?: ToolcraftTimelineKeyframeEasing,
+): ToolcraftTimelineKeyframeEasing | null {
+  const trimmedValue = value.trim();
+
+  if (!trimmedValue) {
+    return null;
+  }
+
+  if (/^step(?:\s+hold)?$/i.test(trimmedValue)) {
+    return { type: 'step' };
+  }
+
+  const cubicBezierMatch = trimmedValue.match(/^cubic-bezier\((.+)\)$/i);
+  const rawControlPoints = parseTimelineEasingNumberTokens(
+    cubicBezierMatch?.[1] ?? trimmedValue,
+  );
+
+  if (rawControlPoints.length === 0) {
+    return null;
+  }
+
+  const fallbackControlPoints =
+    baseEasing?.type === 'bezier' ? baseEasing.controlPoints : defaultTimelineBezierControlPoints;
+  const controlPoints = [
+    rawControlPoints[0] ?? fallbackControlPoints[0],
+    rawControlPoints[1] ?? fallbackControlPoints[1],
+    rawControlPoints[2] ?? fallbackControlPoints[2],
+    rawControlPoints[3] ?? fallbackControlPoints[3],
+  ] satisfies TimelineBezierControlPoints;
+
+  return (
+    normalizeToolcraftTimelineKeyframeEasing({
+      controlPoints,
+      type: 'bezier',
+    }) ?? null
+  );
+}
+
+function formatTimelineBezierControlPoints(
+  controlPoints: TimelineBezierControlPoints,
+): string {
+  return controlPoints.map((point) => Number(point.toFixed(3))).join(', ');
+}
+
+export function findTimelineEasingPresetName(
+  easing: ToolcraftTimelineKeyframeEasing,
+): string | null {
+  if (easing.type === 'step') {
+    return null;
+  }
+
+  const [x1, y1, x2, y2] = easing.controlPoints;
+
+  return (
+    timelineEasingPresets.find((preset) => {
+      const [presetX1, presetY1, presetX2, presetY2] = preset.controlPoints;
+
+      return (
+        Math.abs(x1 - presetX1) < 0.005 &&
+        Math.abs(y1 - presetY1) < 0.005 &&
+        Math.abs(x2 - presetX2) < 0.005 &&
+        Math.abs(y2 - presetY2) < 0.005
+      );
+    })?.name ?? null
+  );
+}
+
+export function getEasingEditorControlPoints(
+  easing: ToolcraftTimelineKeyframeEasing,
+): TimelineBezierControlPoints {
+  return easing.type === 'step' ? [0, 0, 1, 1] : easing.controlPoints;
+}
+
+export function areEasingControlPointsEqual(
+  first: TimelineBezierControlPoints,
+  second: TimelineBezierControlPoints,
+): boolean {
+  return first.every((point, index) => Math.abs(point - second[index]) < 0.0001);
+}
+
+function getTimelineEasingAnimationProgress(progress: number): number {
+  return 1 - (1 - progress) ** 3;
+}
+
+export function interpolateTimelineEasingControlPoints(
+  from: TimelineBezierControlPoints,
+  to: TimelineBezierControlPoints,
+  progress: number,
+): TimelineBezierControlPoints {
+  const easedProgress = getTimelineEasingAnimationProgress(Math.max(0, Math.min(1, progress)));
+
+  return from.map(
+    (point, index) => point + (to[index] - point) * easedProgress,
+  ) as TimelineBezierControlPoints;
+}
+
+export function getEasingInputValue(easing: ToolcraftTimelineKeyframeEasing): string {
+  return easing.type === 'step'
+    ? 'step'
+    : formatTimelineBezierControlPoints(easing.controlPoints);
+}

package/templates/runtime/react/timeline/timeline-easing-popover-content.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { ScrollFade } from '@repo/ui';
+
+import type { ToolcraftTimelineKeyframeEasing } from '../../state/types';
+import {
+  findTimelineEasingPresetName,
+  getEasingInputValue,
+  parseToolcraftTimelineKeyframeEasing,
+  timelineEasingPresetCategories,
+  timelineEasingPresets,
+} from './timeline-easing-model';
+import { TimelineEasingEditor } from './timeline-easing-editor';
+import { TimelineEasingPresetIcon, TimelineEasingStepPresetIcon } from './timeline-easing-icons';
+import { useTimelineEasingPopoverWidth } from './timeline-easing-popover-layout';
+
+function cn(...classNames: Array<string | false | null | undefined>): string {
+  return classNames.filter(Boolean).join(' ');
+}
+
+const selectedItemSurfaceClassName = 'bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)]';
+const selectedItemBorderClassName =
+  'border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]';
+
+const timelineEasingPresetButtonBaseClassName =
+  'inline-flex items-center gap-2 rounded-lg border p-1 text-left font-mono text-[11px] leading-[14px] transition-[background-color,border-color,color,transform] duration-150 ease-out hover:bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)] hover:border-[color:color-mix(in_oklab,var(--border)_14%,transparent)] active:scale-[0.985]';
+
+function getTimelineEasingPresetButtonClassName(isActive: boolean): string {
+  return cn(
+    timelineEasingPresetButtonBaseClassName,
+    isActive && selectedItemBorderClassName,
+    isActive && selectedItemSurfaceClassName,
+    isActive
+      ? 'text-[color:var(--foreground)]'
+      : 'border-[color:color-mix(in_oklab,var(--border)_8%,transparent)] text-[color:var(--muted-foreground)]',
+  );
+}
+export function TimelineEasingPopoverContent({
+  easing,
+  onChange,
+}: {
+  easing: ToolcraftTimelineKeyframeEasing;
+  onChange: (easing: ToolcraftTimelineKeyframeEasing) => void;
+}): React.JSX.Element {
+  const [inputValue, setInputValue] = useState(getEasingInputValue(easing));
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [inputEditing, setInputEditing] = useState(false);
+  const activePresetName = findTimelineEasingPresetName(easing);
+  const committedInputValue = getEasingInputValue(easing);
+  const isStep = easing.type === 'step';
+  const popoverWidth = useTimelineEasingPopoverWidth();
+
+  useEffect(() => {
+    if (inputEditing) {
+      return;
+    }
+
+    setInputValue(committedInputValue);
+    setInputError(null);
+  }, [committedInputValue, inputEditing]);
+
+  const commitInputValue = (
+    value = inputValue,
+    { revertOnInvalid = false }: { revertOnInvalid?: boolean } = {},
+  ): void => {
+    const nextEasing = parseToolcraftTimelineKeyframeEasing(value, easing);
+
+    if (!nextEasing) {
+      if (revertOnInvalid) {
+        setInputValue(committedInputValue);
+        setInputError(null);
+        return;
+      }
+
+      setInputError('Use cubic-bezier(x1, y1, x2, y2) or step.');
+      return;
+    }
+
+    setInputError(null);
+    setInputValue(getEasingInputValue(nextEasing));
+
+    if (getEasingInputValue(nextEasing) === committedInputValue) {
+      return;
+    }
+
+    onChange(nextEasing);
+  };
+
+  return (
+    <div className="flex flex-row items-stretch" style={{ width: popoverWidth }}>
+      <TimelineEasingEditor easing={easing} onChange={onChange} />
+      <span
+        aria-hidden="true"
+        className="w-px shrink-0 self-stretch bg-[color:color-mix(in_oklab,var(--border)_10%,transparent)]"
+        data-slot="timeline-easing-divider"
+      />
+      <ScrollFade
+        className="max-h-[240px] min-w-0 flex-1 py-3 pr-3 pl-3"
+        containerClassName="min-w-0 flex-1"
+        data-slot="timeline-easing-presets"
+        height={36}
+        preset="default"
+        showOppositeSide
+        side="bottom"
+        visibilityMode="terminal"
+      >
+        <div className="flex flex-col gap-4">
+          {timelineEasingPresetCategories.map(([category, categoryLabel]) => {
+            const presets = timelineEasingPresets.filter(
+              (preset) => preset.category === category,
+            );
+            const showStepPreset = category === 'basic';
+
+            if (presets.length === 0 && !showStepPreset) {
+              return null;
+            }
+
+            return (
+              <div className="flex flex-col gap-1.5" key={category}>
+                <span
+                  className="text-[11px] leading-4 opacity-60"
+                  data-slot="timeline-easing-section-label"
+                >
+                  {categoryLabel}
+                </span>
+                <div className="grid grid-cols-2 gap-1.5">
+                  {showStepPreset ? (
+                    <button
+                      className={getTimelineEasingPresetButtonClassName(isStep)}
+                      onClick={() => onChange({ type: 'step' })}
+                      type="button"
+                    >
+                      <TimelineEasingStepPresetIcon />
+                      <span>Step Hold</span>
+                    </button>
+                  ) : null}
+                  {presets.map((preset) => {
+                    const isActive = activePresetName === preset.name;
+
+                    return (
+                      <button
+                        className={getTimelineEasingPresetButtonClassName(isActive)}
+                        key={preset.name}
+                        onClick={() =>
+                          onChange({
+                            controlPoints: [...preset.controlPoints],
+                            type: 'bezier',
+                          })
+                        }
+                        type="button"
+                      >
+                        <TimelineEasingPresetIcon controlPoints={preset.controlPoints} />
+                        <span>{preset.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-2">
+              <span
+                className="text-[11px] leading-4 opacity-60"
+                data-slot="timeline-easing-section-label"
+              >
+                Curve Values
+              </span>
+            </div>
+            <input
+              className="h-8 cursor-text rounded-lg border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] bg-[color:color-mix(in_oklab,var(--background)_20%,transparent)] px-2.5 font-mono text-[12px] text-[color:var(--foreground)] transition-[background-color,border-color] duration-150 ease-out outline-none placeholder:text-[color:var(--muted-foreground)] in-data-[focus-visible-mode=keyboard]:focus-visible:border-[color:color-mix(in_oklab,var(--border)_22%,transparent)] in-data-[focus-visible-mode=keyboard]:focus-visible:bg-[color:color-mix(in_oklab,var(--foreground)_4%,transparent)]"
+              onBlur={(event) => {
+                commitInputValue(event.currentTarget.value, { revertOnInvalid: true });
+                setInputEditing(false);
+              }}
+              onChange={(event) => {
+                setInputValue(event.currentTarget.value);
+                if (inputError) {
+                  setInputError(null);
+                }
+              }}
+              onFocus={(event) => {
+                setInputEditing(true);
+                event.currentTarget.select();
+              }}
+              onKeyDown={(event) => {
+                if (
+                  event.key === 'Backspace' ||
+                  event.key === 'Delete' ||
+                  event.key === 'ArrowLeft' ||
+                  event.key === 'ArrowRight' ||
+                  event.key === 'ArrowUp' ||
+                  event.key === 'ArrowDown'
+                ) {
+                  event.stopPropagation();
+                }
+
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  commitInputValue(event.currentTarget.value);
+                }
+                if (event.key === 'Escape') {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  setInputValue(committedInputValue);
+                  setInputError(null);
+                  event.currentTarget.blur();
+                }
+              }}
+              placeholder="0.19, 1, 0.22, 1 or step"
+              type="text"
+              value={inputValue}
+            />
+            {inputError ? (
+              <p className="font-mono text-[10px] leading-3 text-[color:var(--destructive)]">
+                {inputError}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </ScrollFade>
+    </div>
+  );
+}

package/templates/runtime/react/timeline/timeline-easing-popover-layout.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import type * as React from 'react';
+import { useEffect, useState } from 'react';
+
+const timelineEasingPopoverWidthPx = 688;
+
+export function stopTimelineEasingEvent(
+  event: React.MouseEvent<HTMLElement> | React.PointerEvent<HTMLElement>,
+): void {
+  event.stopPropagation();
+}
+
+export function getTimelineEasingPopoverAnchor(): HTMLElement | null {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  return (
+    document.querySelector<HTMLElement>('[data-slot="timeline-panel"][data-expanded-height]') ??
+    document.querySelector<HTMLElement>('[data-slot="timeline-panel"]')
+  );
+}
+
+function getTimelineEasingPopoverWidthElement(): HTMLElement | null {
+  const panel = getTimelineEasingPopoverAnchor();
+
+  return panel?.querySelector<HTMLElement>('[data-slot="timeline-panel-header"]') ?? panel;
+}
+
+export function useTimelineEasingPopoverWidth(): number {
+  const [popoverWidth, setPopoverWidth] = useState(timelineEasingPopoverWidthPx);
+
+  useEffect(() => {
+    const widthElement = getTimelineEasingPopoverWidthElement();
+
+    if (!widthElement) {
+      return;
+    }
+
+    const updatePopoverWidth = (): void => {
+      const nextWidth = widthElement.getBoundingClientRect().width;
+
+      if (nextWidth > 0) {
+        setPopoverWidth(nextWidth);
+      }
+    };
+
+    updatePopoverWidth();
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updatePopoverWidth);
+
+      return () => {
+        window.removeEventListener('resize', updatePopoverWidth);
+      };
+    }
+
+    const observer = new ResizeObserver(updatePopoverWidth);
+
+    observer.observe(widthElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return popoverWidth;
+}

package/templates/runtime/react/timeline/timeline-easing-popover.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@repo/ui';
+
+import type { ToolcraftTimelineKeyframeEasing } from '../../state/types';
+import { getToolcraftTimelineKeyframeEasing } from './timeline-easing-model';
+import { TimelineEasingCurveIcon } from './timeline-easing-icons';
+import { TimelineEasingPopoverContent } from './timeline-easing-popover-content';
+import {
+  getTimelineEasingPopoverAnchor,
+  stopTimelineEasingEvent,
+} from './timeline-easing-popover-layout';
+
+export function TimelineKeyframeEasingPopover({
+  easing,
+  label,
+  onChange,
+}: {
+  easing?: ToolcraftTimelineKeyframeEasing;
+  label: string;
+  onChange?: (easing: ToolcraftTimelineKeyframeEasing) => void;
+}): React.JSX.Element {
+  const resolvedEasing = getToolcraftTimelineKeyframeEasing(easing);
+
+  return (
+    <Popover modal={false}>
+      <PopoverTrigger
+        render={
+          <Button
+            aria-label={`Edit ${label} keyframe curve`}
+            className="text-[color:color-mix(in_oklab,var(--foreground)_75%,transparent)] hover:text-[color:var(--foreground)] data-popup-open:text-[color:var(--foreground)]"
+            onClick={stopTimelineEasingEvent}
+            onPointerDown={stopTimelineEasingEvent}
+            size="icon-sm"
+            type="button"
+            variant="ghost"
+          />
+        }
+      >
+        <TimelineEasingCurveIcon easing={resolvedEasing} size={16} />
+      </PopoverTrigger>
+      <PopoverContent
+        align="center"
+        anchor={getTimelineEasingPopoverAnchor}
+        className="toolcraft-panel-surface isolate w-auto gap-0 overflow-hidden rounded-lg border p-0 supports-backdrop-filter:backdrop-blur-2xl supports-backdrop-filter:backdrop-saturate-150"
+        data-timeline-keyframe-easing-popover=""
+        onClick={stopTimelineEasingEvent}
+        onPointerDown={stopTimelineEasingEvent}
+        side="bottom"
+        sideOffset={6}
+      >
+        <TimelineEasingPopoverContent
+          easing={resolvedEasing}
+          onChange={(nextEasing) => onChange?.(nextEasing)}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/templates/runtime/react/timeline/timeline-event-targets.ts

@@ -0,0 +1,19 @@
+export function getTimelineEventTargetElement(target: EventTarget | null): Element | null {
+  return target instanceof Element ? target : null;
+}
+
+export function isTimelineInteractiveElement(target: EventTarget | null): boolean {
+  return Boolean(
+    getTimelineEventTargetElement(target)?.closest(
+      "button, input, textarea, select, [contenteditable='true'], [role='button']",
+    ),
+  );
+}
+
+export function isEditableTimelineEventTarget(target: EventTarget | null): boolean {
+  return Boolean(
+    getTimelineEventTargetElement(target)?.closest(
+      "input, textarea, select, [contenteditable='true']",
+    ),
+  );
+}