@pixel-point/toolcraft 0.0.2

package/templates/runtime/state/timeline-readiness.ts

@@ -0,0 +1,43 @@
+import type { ResolvedToolcraftAppSchema } from "../schema/types";
+import type {
+  ToolcraftMediaAsset,
+  ToolcraftTimelineState,
+} from "./types";
+
+export function doesTimelineRequireMedia(
+  schema: ResolvedToolcraftAppSchema,
+): boolean {
+  return Boolean(
+    schema.panels.timeline?.enabled &&
+      schema.canvas.enabled &&
+      schema.canvas.upload &&
+      schema.canvas.sizing.mode === "intrinsic-media",
+  );
+}
+
+export function isTimelineReadyForPlayback(
+  schema: ResolvedToolcraftAppSchema,
+  mediaAssets: readonly ToolcraftMediaAsset[],
+): boolean {
+  return !doesTimelineRequireMedia(schema) || mediaAssets.length > 0;
+}
+
+export function getMediaReadyTimelineState(
+  schema: ResolvedToolcraftAppSchema,
+  timeline: ToolcraftTimelineState,
+  mediaAssets: readonly ToolcraftMediaAsset[],
+): ToolcraftTimelineState {
+  if (isTimelineReadyForPlayback(schema, mediaAssets)) {
+    return timeline;
+  }
+
+  if (!timeline.isPlaying && timeline.currentTimeSeconds === 0) {
+    return timeline;
+  }
+
+  return {
+    ...timeline,
+    currentTimeSeconds: 0,
+    isPlaying: false,
+  };
+}

package/templates/runtime/state/types.ts

@@ -0,0 +1,242 @@
+import type { ToolcraftCanvasSize, ResolvedToolcraftAppSchema } from "../schema/types";
+
+export type ToolcraftCommand =
+  | {
+      history?: ToolcraftHistoryMode;
+      historyGroup?: string;
+      label?: string;
+      target: string;
+      type: "controls.setValue";
+      value: unknown;
+    }
+  | { type: "controls.apply" }
+  | { type: "controls.reset" }
+  | { insertIndex?: number; layer?: ToolcraftLayerDraft; type: "layers.add" }
+  | { layerId: string; type: "layers.delete" }
+  | { layerIds: string[]; parentGroupId: string | null; type: "layers.moveToGroup" }
+  | { layerId: string; type: "layers.select" }
+  | { layerId: string; name: string; type: "layers.rename" }
+  | { layerId: string; type: "layers.toggleCollapsed" }
+  | { layerId: string; type: "layers.toggleVisibility" }
+  | { layers: ToolcraftLayer[]; selectedLayerId?: string | null; type: "layers.reorder" }
+  | { delta: ToolcraftPoint; type: "canvas.panBy" }
+  | { offset: ToolcraftPoint; type: "canvas.setOffset" }
+  | { size: ToolcraftCanvasSize; type: "canvas.setSize" }
+  | { type: "canvas.center" }
+  | { type: "canvas.zoomIn" }
+  | { type: "canvas.zoomOut" }
+  | { type: "canvas.zoomReset" }
+  | { offset: ToolcraftPoint; type: "canvas.setViewport"; zoom: number }
+  | {
+      offset: ToolcraftPanelState["offset"];
+      panelId: ToolcraftPanelId;
+      type: "panels.setOffset";
+    }
+  | { panelId: ToolcraftPanelId; type: "panels.resetOffset" }
+  | {
+      asset: Omit<ToolcraftMediaAsset, "id" | "layerId"> & {
+        id?: string;
+        layerId?: string;
+        layerName?: string;
+      };
+      type: "media.import";
+    }
+  | { mediaId: string; type: "media.delete" }
+  | { currentTimeSeconds: number; type: "timeline.setCurrentTime" }
+  | { durationSeconds: number; type: "timeline.setDuration" }
+  | { expanded: boolean; type: "timeline.setExpanded" }
+  | { isPlaying: boolean; type: "timeline.setPlaying" }
+  | { type: "timeline.toggleExpanded" }
+  | { type: "timeline.togglePlayback" }
+  | { type: "timeline.toggleLoop" }
+  | { keyframeId: string | null; type: "timeline.selectKeyframe" }
+  | { keyframeId: string; type: "timeline.deleteKeyframe" }
+  | { controlId: string; type: "timeline.deleteControlKeyframes" }
+  | {
+      controlId: string;
+      controlLabel: string;
+      timeSeconds?: number;
+      type: "timeline.toggleControlKeyframes";
+      value: unknown;
+      valueLabel: string;
+    }
+  | {
+      controlId: string;
+      controlLabel: string;
+      timeSeconds?: number;
+      type: "timeline.upsertControlKeyframe";
+      value: unknown;
+      valueLabel: string;
+    }
+  | { keyframeId: string; timeSeconds: number; type: "timeline.moveKeyframe" }
+  | {
+      easing: ToolcraftTimelineKeyframeEasing;
+      keyframeId: string;
+      type: "timeline.changeKeyframeEasing";
+    }
+  | { type: "history.undo" }
+  | { type: "history.redo" };
+
+export const toolcraftRuntimeCommandTypes = [
+  "controls.setValue",
+  "controls.apply",
+  "controls.reset",
+  "layers.add",
+  "layers.delete",
+  "layers.moveToGroup",
+  "layers.select",
+  "layers.rename",
+  "layers.toggleCollapsed",
+  "layers.toggleVisibility",
+  "layers.reorder",
+  "canvas.panBy",
+  "canvas.setOffset",
+  "canvas.setSize",
+  "canvas.center",
+  "canvas.zoomIn",
+  "canvas.zoomOut",
+  "canvas.zoomReset",
+  "canvas.setViewport",
+  "panels.setOffset",
+  "panels.resetOffset",
+  "media.import",
+  "media.delete",
+  "timeline.setCurrentTime",
+  "timeline.setDuration",
+  "timeline.setExpanded",
+  "timeline.setPlaying",
+  "timeline.toggleExpanded",
+  "timeline.togglePlayback",
+  "timeline.toggleLoop",
+  "timeline.selectKeyframe",
+  "timeline.deleteKeyframe",
+  "timeline.deleteControlKeyframes",
+  "timeline.toggleControlKeyframes",
+  "timeline.upsertControlKeyframe",
+  "timeline.moveKeyframe",
+  "timeline.changeKeyframeEasing",
+  "history.undo",
+  "history.redo",
+] as const satisfies readonly ToolcraftCommand["type"][];
+
+export type ToolcraftPoint = {
+  x: number;
+  y: number;
+};
+
+export type ToolcraftCanvasState = {
+  offset: ToolcraftPoint;
+  size: ToolcraftCanvasSize;
+  zoom: number;
+};
+
+export type ToolcraftLayerKind = "group" | "layer";
+
+export type ToolcraftLayer = {
+  collapsed?: boolean;
+  displayName?: string;
+  id: string;
+  kind?: ToolcraftLayerKind;
+  name: string;
+  parentGroupId?: string;
+  visible: boolean;
+};
+
+export type ToolcraftLayerDraft = {
+  collapsed?: boolean;
+  displayName?: string;
+  id?: string;
+  kind?: ToolcraftLayerKind;
+  name?: string;
+  parentGroupId?: string;
+  visible?: boolean;
+};
+
+export type ToolcraftMediaAsset = {
+  dataUrl: string;
+  fileName: string;
+  id: string;
+  layerId: string;
+  mimeType: string;
+  position: ToolcraftPoint;
+  size: ToolcraftCanvasSize;
+};
+
+export type ToolcraftHistoryPatch = {
+  after: Record<string, unknown>;
+  before: Record<string, unknown>;
+  group?: string;
+  label: string;
+};
+
+export type ToolcraftHistoryMode = "merge" | "record" | "skip";
+
+export type ToolcraftTimelineBezierControlPoints = [number, number, number, number];
+
+export type ToolcraftTimelineKeyframeEasing =
+  | {
+      controlPoints: ToolcraftTimelineBezierControlPoints;
+      type: "bezier";
+    }
+  | {
+      type: "step";
+    };
+
+export type ToolcraftTimelineKeyframe = {
+  controlId: string;
+  controlLabel: string;
+  easing?: ToolcraftTimelineKeyframeEasing;
+  id: string;
+  timeSeconds: number;
+  value?: unknown;
+  valueLabel: string;
+};
+
+export type ToolcraftTimelineKeyframeGroup = {
+  controlId: string;
+  keyframes: ToolcraftTimelineKeyframe[];
+  label: string;
+};
+
+export type ToolcraftTimelineState = {
+  currentTimeSeconds: number;
+  durationSeconds: number;
+  expanded: boolean;
+  isLooping: boolean;
+  isPlaying: boolean;
+  keyframeGroups: ToolcraftTimelineKeyframeGroup[];
+  selectedKeyframeId: string | null;
+};
+
+export type ToolcraftPanelId = "controls" | "layers" | "timeline" | "toolbar";
+
+export type ToolcraftPanelState = {
+  collapsed?: boolean;
+  offset: { x: number; y: number };
+};
+
+export type ToolcraftState = {
+  canvas: ToolcraftCanvasState;
+  defaults: Record<string, unknown>;
+  history: {
+    redo: ToolcraftHistoryPatch[];
+    undo: ToolcraftHistoryPatch[];
+  };
+  layers: ToolcraftLayer[];
+  mediaAssets: ToolcraftMediaAsset[];
+  panels: Record<ToolcraftPanelId, ToolcraftPanelState>;
+  schema: ResolvedToolcraftAppSchema;
+  selectedLayerId: string | null;
+  timeline: ToolcraftTimelineState;
+  values: Record<string, unknown>;
+};
+
+export type ToolcraftInitialState = {
+  canvas?: Partial<ToolcraftCanvasState>;
+  layers?: ToolcraftLayer[];
+  mediaAssets?: ToolcraftMediaAsset[];
+  panels?: Partial<Record<ToolcraftPanelId, Partial<ToolcraftPanelState>>>;
+  selectedLayerId?: string | null;
+  timeline?: Partial<ToolcraftTimelineState>;
+  values?: Record<string, unknown>;
+};

package/templates/runtime/styles.css

@@ -0,0 +1,125 @@
+[data-toolcraft-theme][data-toolcraft-theme] {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --bg-foreground: var(--foreground);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --link: #70b0fa;
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: var(--foreground);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: #f8f8f8;
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: #0c8ce9;
+  --accent-foreground: oklch(0.205 0 0);
+  --inspect: #cbaaf9;
+  --attention: #ea733a;
+  --attention-foreground: oklch(0.145 0 0);
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: var(--foreground);
+  --border: var(--foreground);
+  --input: var(--foreground);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-link: var(--link);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  color: var(--foreground);
+  color-scheme: light;
+}
+
+[data-toolcraft-theme][data-toolcraft-theme],
+[data-toolcraft-theme][data-toolcraft-theme] *,
+[data-toolcraft-theme][data-toolcraft-theme] *::before,
+[data-toolcraft-theme][data-toolcraft-theme] *::after {
+  cursor: default !important;
+}
+
+[data-toolcraft-theme='dark'][data-toolcraft-theme] {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --bg-foreground: var(--foreground);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --link: #70b0fa;
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: var(--foreground);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: #262626;
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: #0c8ce9;
+  --accent-foreground: oklch(0.985 0 0);
+  --inspect: #9149f5;
+  --attention: #ea733a;
+  --attention-foreground: oklch(0.145 0 0);
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: var(--foreground);
+  --border: var(--foreground);
+  --input: var(--foreground);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.985 0 0);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  color-scheme: dark;
+}
+
+[data-toolcraft-canvas-content] {
+  color-scheme: normal;
+}
+
+[data-toolcraft-generated-output] {
+  color-scheme: normal;
+}