@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/runtime/react/timeline/timeline-keyframe-row.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import * as React from 'react';
+import { useRef, useState, type CSSProperties } from 'react';
+import { Eye, EyeOff, Trash2 } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+
+import type {
+  ToolcraftTimelineKeyframe,
+  ToolcraftTimelineKeyframeEasing,
+  ToolcraftTimelineKeyframeGroup,
+} from '../../state/types';
+import {
+  clampToolcraftTimelineTime,
+  getToolcraftTimelineKeyframeId,
+  roundToolcraftTimelineKeyframeTime,
+} from '../../state/timeline-values';
+import { TimelineIconButton } from './timeline-icon-button';
+import { TimelineKeyframeEasingPopover } from './timeline-easing-popover';
+import {
+  getTimelineCalcPositionStyle,
+  timelineKeyframePresenceTransition,
+  timelineKeyframeRowHeightPx,
+  timelineTrackEndInsetPx,
+  timelineTrackStartVisualOffsetPx,
+} from './timeline-panel-layout';
+
+type TimelineKeyframeDragState = {
+  controlId: string;
+  didMove: boolean;
+  initialTimeSeconds: number;
+  keyframeId: string;
+  latestTimeSeconds: number;
+  pointerId: number;
+  trackElement: HTMLElement;
+  wasSelectedOnPointerDown: boolean;
+};
+
+type TimelineKeyframeRowProps = {
+  durationSeconds: number;
+  group: ToolcraftTimelineKeyframeGroup;
+  isScrubbing: boolean;
+  onChangeKeyframeEasing: (keyframeId: string, easing: ToolcraftTimelineKeyframeEasing) => void;
+  onDeleteControlKeyframes: (controlId: string) => void;
+  onKeyframeDragStart: () => void;
+  onMoveKeyframe: (keyframeId: string, timeSeconds: number) => string | null;
+  onSelectedKeyframeChange: (keyframeId: string | null) => void;
+  selectedKeyframeId: string | null;
+};
+
+function cn(...classNames: Array<string | false | null | undefined>): string {
+  return classNames.filter(Boolean).join(' ');
+}
+
+function formatTimelineSeconds(value: number): string {
+  return value.toFixed(2);
+}
+
+function getTimelineKeyframePositionStyle(
+  timeSeconds: number,
+  durationSeconds: number,
+): CSSProperties {
+  const ratio = Math.max(0, Math.min(1, timeSeconds / durationSeconds));
+
+  return getTimelineCalcPositionStyle(ratio, timelineTrackStartVisualOffsetPx * (1 - ratio));
+}
+
+function getTimelineTrackTimeFromClientX({
+  clientX,
+  durationSeconds,
+  trackElement,
+}: {
+  clientX: number;
+  durationSeconds: number;
+  trackElement: HTMLElement;
+}): number {
+  const rect = trackElement.getBoundingClientRect();
+  const trackLeft = rect.left + timelineTrackStartVisualOffsetPx;
+  const trackWidth = Math.max(
+    1,
+    rect.width - timelineTrackStartVisualOffsetPx - timelineTrackEndInsetPx,
+  );
+  const ratio = Math.max(0, Math.min(1, (clientX - trackLeft) / trackWidth));
+
+  return roundToolcraftTimelineKeyframeTime(
+    clampToolcraftTimelineTime(durationSeconds * ratio, durationSeconds),
+  );
+}
+
+export function TimelineKeyframeRow({
+  durationSeconds,
+  group,
+  isScrubbing,
+  onChangeKeyframeEasing,
+  onDeleteControlKeyframes,
+  onKeyframeDragStart,
+  onMoveKeyframe,
+  onSelectedKeyframeChange,
+  selectedKeyframeId,
+}: TimelineKeyframeRowProps): React.JSX.Element {
+  const [isVisible, setIsVisible] = useState(true);
+  const [draftKeyframeTimes, setDraftKeyframeTimes] = useState<Record<string, number>>({});
+  const keyframeDragRef = useRef<TimelineKeyframeDragState | null>(null);
+  const keyframeClickIntentRef = useRef<{
+    didMove: boolean;
+    keyframeId: string;
+    wasSelectedOnPointerDown: boolean;
+  } | null>(null);
+  const selectedGroupKeyframe = group.keyframes.find(
+    (keyframe) => keyframe.id === selectedKeyframeId,
+  );
+  const getKeyframeTrackElement = (target: Element): HTMLElement | null =>
+    target.closest('[data-slot="timeline-keyframe-track"]');
+  const handleKeyframePointerDown = (
+    event: React.PointerEvent<HTMLButtonElement>,
+    keyframe: ToolcraftTimelineKeyframe,
+  ): void => {
+    const trackElement = getKeyframeTrackElement(event.currentTarget);
+
+    if (!trackElement) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    onSelectedKeyframeChange(keyframe.id);
+    onKeyframeDragStart();
+    const wasSelectedOnPointerDown = keyframe.id === selectedKeyframeId;
+
+    keyframeClickIntentRef.current = {
+      didMove: false,
+      keyframeId: keyframe.id,
+      wasSelectedOnPointerDown,
+    };
+    keyframeDragRef.current = {
+      controlId: keyframe.controlId,
+      didMove: false,
+      initialTimeSeconds: keyframe.timeSeconds,
+      keyframeId: keyframe.id,
+      latestTimeSeconds: keyframe.timeSeconds,
+      pointerId: event.pointerId,
+      trackElement,
+      wasSelectedOnPointerDown,
+    };
+  };
+  const handleKeyframePointerMove = (event: React.PointerEvent<HTMLButtonElement>): void => {
+    const dragState = keyframeDragRef.current;
+
+    if (!dragState || dragState.pointerId !== event.pointerId) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const nextTimeSeconds = getTimelineTrackTimeFromClientX({
+      clientX: event.clientX,
+      durationSeconds,
+      trackElement: dragState.trackElement,
+    });
+
+    dragState.latestTimeSeconds = nextTimeSeconds;
+    const didMove = nextTimeSeconds !== dragState.initialTimeSeconds;
+    dragState.didMove = didMove;
+
+    if (keyframeClickIntentRef.current?.keyframeId === dragState.keyframeId) {
+      keyframeClickIntentRef.current.didMove = didMove;
+    }
+
+    setDraftKeyframeTimes((currentDrafts) =>
+      currentDrafts[dragState.keyframeId] === nextTimeSeconds
+        ? currentDrafts
+        : { ...currentDrafts, [dragState.keyframeId]: nextTimeSeconds },
+    );
+  };
+  const endKeyframeDrag = (event: React.PointerEvent<HTMLButtonElement>): void => {
+    const dragState = keyframeDragRef.current;
+
+    if (!dragState || dragState.pointerId !== event.pointerId) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+
+    if (dragState.didMove) {
+      const nextSelectedKeyframeId = onMoveKeyframe(
+        dragState.keyframeId,
+        dragState.latestTimeSeconds,
+      );
+
+      onSelectedKeyframeChange(
+        nextSelectedKeyframeId ??
+          getToolcraftTimelineKeyframeId(dragState.controlId, dragState.latestTimeSeconds),
+      );
+    }
+
+    setDraftKeyframeTimes((currentDrafts) => {
+      const nextDrafts = { ...currentDrafts };
+
+      delete nextDrafts[dragState.keyframeId];
+      return nextDrafts;
+    });
+    keyframeDragRef.current = null;
+  };
+
+  return (
+    <motion.div
+      animate={{ height: timelineKeyframeRowHeightPx, opacity: 1 }}
+      className={cn(
+        'w-full shrink-0 overflow-hidden border-t border-[color:color-mix(in_oklab,var(--border)_6%,transparent)] transition-colors duration-150 ease-out select-none first:border-t-0',
+        selectedGroupKeyframe
+          ? 'bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)]'
+          : !isScrubbing && 'hover:bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)]',
+      )}
+      data-scrubbing={isScrubbing ? 'true' : 'false'}
+      data-slot="timeline-keyframe-row"
+      data-visible={isVisible ? 'true' : 'false'}
+      exit={{ height: 0, opacity: 0 }}
+      initial={{ height: 0, opacity: 0 }}
+      transition={timelineKeyframePresenceTransition}
+    >
+      <div className="grid h-9 w-full grid-cols-[164px_minmax(0,1fr)_36px] overflow-visible">
+        <div className="flex h-full min-w-0 items-center gap-1.5 border-r border-[color:color-mix(in_oklab,var(--border)_6%,transparent)] pr-1.5 pl-1 text-[11px] leading-4 text-[color:color-mix(in_oklab,var(--foreground)_75%,transparent)] select-none">
+          <TimelineIconButton
+            label={`Toggle ${group.label} visibility`}
+            onClick={() => setIsVisible((currentValue) => !currentValue)}
+            size="icon-sm"
+            tooltipSide="top"
+          >
+            {isVisible ? (
+              <Eye data-icon="visibility-visible" />
+            ) : (
+              <EyeOff data-icon="visibility-hidden" />
+            )}
+          </TimelineIconButton>
+          <span
+            className={cn(
+              'block min-w-0 flex-1 truncate pr-2 transition-[color,opacity] duration-150 ease-out',
+              !isVisible && 'text-[color:var(--foreground)] opacity-40',
+            )}
+            title={group.label}
+          >
+            {group.label}
+          </span>
+          {selectedGroupKeyframe ? (
+            <span className="ml-auto flex shrink-0" data-slot="timeline-keyframe-easing-control">
+              <TimelineKeyframeEasingPopover
+                easing={selectedGroupKeyframe.easing}
+                label={group.label}
+                onChange={(nextEasing) =>
+                  onChangeKeyframeEasing(selectedGroupKeyframe.id, nextEasing)
+                }
+              />
+            </span>
+          ) : null}
+        </div>
+        <div
+          className="relative h-full min-h-0 overflow-visible border-r border-[color:color-mix(in_oklab,var(--border)_6%,transparent)]"
+          data-slot="timeline-keyframe-track"
+        >
+          <div
+            className={cn(
+              'absolute inset-0 overflow-visible',
+              isVisible ? 'text-[color:var(--link)]' : 'text-[color:var(--foreground)]',
+            )}
+            data-slot="timeline-keyframe-track-content"
+            style={{ opacity: isVisible ? undefined : 0.15 }}
+          >
+            <span
+              className={cn(
+                'absolute top-1/2 right-0 h-px -translate-y-1/2',
+                isVisible
+                  ? 'bg-[color:color-mix(in_oklab,currentColor_40%,transparent)]'
+                  : 'bg-current',
+              )}
+              style={{ left: timelineTrackStartVisualOffsetPx }}
+            />
+            <AnimatePresence initial={false}>
+              {group.keyframes.map((keyframe) => {
+                const isSelected = keyframe.id === selectedKeyframeId;
+                const displayTimeSeconds = draftKeyframeTimes[keyframe.id] ?? keyframe.timeSeconds;
+
+                return (
+                  <motion.button
+                    animate={{ opacity: 1 }}
+                    aria-label={`${group.label} keyframe at ${formatTimelineSeconds(
+                      keyframe.timeSeconds,
+                    )}s`}
+                    aria-pressed={isSelected}
+                    className="absolute top-1/2 z-30 m-0 size-2 -translate-x-1/2 -translate-y-1/2 cursor-default appearance-none border-0 bg-transparent p-0 text-current outline-none"
+                    data-selected={isSelected ? 'true' : undefined}
+                    data-slot="timeline-keyframe"
+                    exit={{ opacity: 0 }}
+                    initial={{ opacity: 0 }}
+                    key={keyframe.id}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      const clickIntent = keyframeClickIntentRef.current;
+
+                      keyframeClickIntentRef.current = null;
+
+                      if (clickIntent?.didMove) {
+                        return;
+                      }
+
+                      if (clickIntent?.keyframeId === keyframe.id) {
+                        onSelectedKeyframeChange(
+                          clickIntent.wasSelectedOnPointerDown ? null : keyframe.id,
+                        );
+                        return;
+                      }
+
+                      onSelectedKeyframeChange(isSelected ? null : keyframe.id);
+                    }}
+                    onPointerCancel={endKeyframeDrag}
+                    onPointerDown={(event) => handleKeyframePointerDown(event, keyframe)}
+                    onPointerMove={handleKeyframePointerMove}
+                    onPointerUp={endKeyframeDrag}
+                    style={getTimelineKeyframePositionStyle(displayTimeSeconds, durationSeconds)}
+                    title={keyframe.valueLabel}
+                    transition={timelineKeyframePresenceTransition}
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        'absolute top-1/2 left-1/2 block size-[7px] -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[1px]',
+                        isSelected && isVisible ? 'bg-[color:var(--foreground)]' : 'bg-current',
+                      )}
+                    />
+                  </motion.button>
+                );
+              })}
+            </AnimatePresence>
+          </div>
+        </div>
+        <div className="flex h-full min-w-0 items-center justify-center">
+          <TimelineIconButton
+            label={`Delete ${group.label} keyframes`}
+            onClick={() => {
+              onSelectedKeyframeChange(null);
+              onDeleteControlKeyframes(group.controlId);
+            }}
+            size="icon-sm"
+            tooltipSide="top"
+          >
+            <Trash2 />
+          </TimelineIconButton>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/templates/runtime/react/timeline/timeline-keyframes.ts

@@ -0,0 +1,23 @@
+import type {
+  ToolcraftTimelineKeyframe,
+  ToolcraftTimelineKeyframeGroup,
+} from '../../state/types';
+
+export function findTimelineKeyframe(
+  keyframeGroups: readonly ToolcraftTimelineKeyframeGroup[],
+  keyframeId: string | null,
+): ToolcraftTimelineKeyframe | undefined {
+  if (!keyframeId) {
+    return undefined;
+  }
+
+  for (const group of keyframeGroups) {
+    const keyframe = group.keyframes.find((currentKeyframe) => currentKeyframe.id === keyframeId);
+
+    if (keyframe) {
+      return keyframe;
+    }
+  }
+
+  return undefined;
+}

package/templates/runtime/react/timeline/timeline-panel-floating-layout.test.tsx

@@ -0,0 +1,328 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ToolcraftRoot } from "../app-shell/toolcraft-root";
+import {
+  createTimelineSchema,
+  installTimelinePanelTestEnvironment,
+  renderTimelinePanel,
+} from "./timeline-panel-test-utils";
+import { TimelinePanel } from "./timeline-panel";
+
+installTimelinePanelTestEnvironment();
+
+type RectFixture = {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+  x?: number;
+  y?: number;
+};
+
+function makeRect({ bottom, height, left, right, top, width, x = left, y = top }: RectFixture) {
+  return {
+    bottom,
+    height,
+    left,
+    right,
+    toJSON: () => ({}),
+    top,
+    width,
+    x,
+    y,
+  } as DOMRect;
+}
+
+const emptyRect = makeRect({
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+});
+
+describe("TimelinePanel floating layout", () => {
+  it("delegates the whole timeline window size to motion during expand and collapse", () => {
+    const { container } = renderTimelinePanel({ panelPlacement: "floating" });
+    const timelinePanel = container.querySelector<HTMLElement>('[data-slot="timeline-panel"]');
+
+    expect(timelinePanel?.style.width).toBe("256px");
+    expect(timelinePanel?.style.height).toBe("36px");
+
+    fireEvent.click(screen.getByRole("button", { name: "Expand timeline panel" }));
+
+    expect(timelinePanel?.getAttribute("data-expanded-height")).toBe("110");
+
+    fireEvent.click(screen.getByRole("button", { name: "Collapse timeline panel" }));
+
+    expect(timelinePanel?.getAttribute("data-expanded-height")).toBeNull();
+  });
+
+  it("uses the shared panel host when floating", () => {
+    const { container } = renderTimelinePanel({ panelPlacement: "floating" });
+
+    expect(container.querySelector('[data-panel-type="timeline"]')).toBeTruthy();
+    expect(container.querySelector('[data-snap-edges="top bottom"]')).toBeTruthy();
+  });
+
+  it("moves the expanded floating timeline from the stable host position before narrowing", async () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      if (this.matches('[data-slot="toolcraft-runtime-app"]')) {
+        return makeRect({
+          bottom: 720,
+          height: 720,
+          left: 0,
+          right: 960,
+          top: 0,
+          width: 960,
+        });
+      }
+
+      if (this.matches('[data-panel-type="controls"]')) {
+        return makeRect({
+          bottom: 560,
+          height: 560,
+          left: 10,
+          right: 40,
+          top: 10,
+          width: 30,
+        });
+      }
+
+      if (this.matches('[data-panel-type="layers"]')) {
+        return makeRect({
+          bottom: 560,
+          height: 560,
+          left: 760,
+          right: 950,
+          top: 10,
+          width: 190,
+        });
+      }
+
+      if (
+        this.matches('[data-slot="toolcraft-runtime-panel-host"]') &&
+        this.matches('[data-panel-type="timeline"]')
+      ) {
+        return makeRect({
+          bottom: 128,
+          height: 118,
+          left: 136,
+          right: 824,
+          top: 10,
+          width: 688,
+        });
+      }
+
+      if (this.matches('[data-slot="timeline-panel"]')) {
+        return makeRect({
+          bottom: 128,
+          height: 118,
+          left: 99,
+          right: 787,
+          top: 10,
+          width: 688,
+        });
+      }
+
+      return emptyRect;
+    });
+
+    const { container } = render(
+      <ToolcraftRoot
+        initialState={{ timeline: { expanded: true } }}
+        schema={createTimelineSchema()}
+      >
+        <div data-slot="toolcraft-runtime-app">
+          <div data-panel-type="controls" />
+          <div data-panel-type="layers" />
+          <TimelinePanel framed={false} panelPlacement="floating" />
+        </div>
+      </ToolcraftRoot>,
+    );
+
+    const timelinePanel = container.querySelector<HTMLElement>('[data-slot="timeline-panel"]');
+
+    await waitFor(() => {
+      expect(timelinePanel?.getAttribute("data-responsive-offset-x")).toBe("-74");
+      expect(timelinePanel?.getAttribute("data-responsive-width")).toBeNull();
+    });
+  });
+
+  it("narrows expanded floating timeline after it reaches both side panels", async () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      if (this.matches('[data-slot="toolcraft-runtime-app"]')) {
+        return makeRect({
+          bottom: 720,
+          height: 720,
+          left: 0,
+          right: 960,
+          top: 0,
+          width: 960,
+        });
+      }
+
+      if (this.matches('[data-panel-type="layers"]')) {
+        return makeRect({
+          bottom: 560,
+          height: 560,
+          left: 10,
+          right: 250,
+          top: 10,
+          width: 240,
+        });
+      }
+
+      if (this.matches('[data-panel-type="controls"]')) {
+        return makeRect({
+          bottom: 560,
+          height: 560,
+          left: 650,
+          right: 950,
+          top: 10,
+          width: 300,
+        });
+      }
+
+      if (this.matches('[data-slot="timeline-panel"]')) {
+        return makeRect({
+          bottom: 128,
+          height: 118,
+          left: 136,
+          right: 824,
+          top: 10,
+          width: 688,
+        });
+      }
+
+      return emptyRect;
+    });
+
+    const { container } = render(
+      <ToolcraftRoot
+        initialState={{ timeline: { expanded: true } }}
+        schema={createTimelineSchema()}
+      >
+        <div data-slot="toolcraft-runtime-app">
+          <div data-panel-type="layers" />
+          <div data-panel-type="controls" />
+          <TimelinePanel framed={false} panelPlacement="floating" />
+        </div>
+      </ToolcraftRoot>,
+    );
+
+    const timelinePanel = container.querySelector<HTMLElement>('[data-slot="timeline-panel"]');
+
+    await waitFor(() => {
+      expect(timelinePanel?.getAttribute("data-responsive-offset-x")).toBe("-30");
+      expect(timelinePanel?.getAttribute("data-responsive-width")).toBe("380");
+    });
+  });
+
+  it("keeps the expanded floating timeline inside the side-panel corridor immediately after resize", async () => {
+    let isNarrow = false;
+
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      if (this.matches('[data-slot="toolcraft-runtime-app"]')) {
+        return makeRect({
+          bottom: 720,
+          height: 720,
+          left: 0,
+          right: isNarrow ? 1024 : 1440,
+          top: 0,
+          width: isNarrow ? 1024 : 1440,
+        });
+      }
+
+      if (this.matches('[data-panel-type="layers"]')) {
+        return makeRect({
+          bottom: 560,
+          height: 560,
+          left: 10,
+          right: 250,
+          top: 10,
+          width: 240,
+        });
+      }
+
+      if (this.matches('[data-panel-type="controls"]')) {
+        return makeRect({
+          bottom: 560,
+          height: 560,
+          left: isNarrow ? 714 : 1130,
+          right: isNarrow ? 1014 : 1430,
+          top: 10,
+          width: 300,
+          x: isNarrow ? 714 : 1130,
+        });
+      }
+
+      if (
+        this.matches('[data-slot="toolcraft-runtime-panel-host"]') &&
+        this.matches('[data-panel-type="timeline"]')
+      ) {
+        return makeRect({
+          bottom: 128,
+          height: 118,
+          left: isNarrow ? 384 : 592,
+          right: isNarrow ? 640 : 848,
+          top: 10,
+          width: 256,
+          x: isNarrow ? 384 : 592,
+        });
+      }
+
+      if (this.matches('[data-slot="timeline-panel"]')) {
+        return makeRect({
+          bottom: 128,
+          height: 118,
+          left: isNarrow ? 384 : 592,
+          right: isNarrow ? 640 : 848,
+          top: 10,
+          width: 256,
+          x: isNarrow ? 384 : 592,
+        });
+      }
+
+      return emptyRect;
+    });
+
+    const { container } = render(
+      <ToolcraftRoot
+        initialState={{ timeline: { expanded: true } }}
+        schema={createTimelineSchema()}
+      >
+        <div data-slot="toolcraft-runtime-app">
+          <div data-panel-type="layers" />
+          <div data-panel-type="controls" />
+          <TimelinePanel framed={false} panelPlacement="floating" />
+        </div>
+      </ToolcraftRoot>,
+    );
+
+    const timelinePanel = container.querySelector<HTMLElement>('[data-slot="timeline-panel"]');
+
+    await waitFor(() => {
+      expect(timelinePanel?.getAttribute("data-responsive-width")).toBeNull();
+      expect(timelinePanel?.getAttribute("data-responsive-offset-x")).toBeNull();
+    });
+
+    isNarrow = true;
+    fireEvent(window, new Event("resize"));
+
+    await waitFor(() => {
+      expect(timelinePanel?.getAttribute("data-responsive-width")).toBe("444");
+      expect(timelinePanel?.getAttribute("data-responsive-offset-x")).toBe("-30");
+    });
+  });
+});