@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/runtime/react/controls-panel/renderers/controls-panel-media-renderer.tsx

@@ -1,173 +1,247 @@
 import * as React from "react";
-import { FileDrop, type FileDropPreview } from "@repo/ui";
+import { FileDrop } from "@repo/ui";
 
 import type { ToolcraftCanvasSize, ToolcraftControlSchema } from "../../../schema/types";
-import type { ToolcraftCommand, ToolcraftMediaAsset } from "../../../state/types";
-import {
-  isToolcraftImageFile,
-  readImportedFile,
-  readImportedImageFile,
-} from "../../canvas/media-file";
+import type { ToolcraftSourceAssetCoordinator } from "../../../source-assets/source-asset-coordinator";
+import type {
+  ToolcraftCommand,
+  ToolcraftImageAsset,
+  ToolcraftMediaAsset,
+  ToolcraftMediaTransformOperation,
+} from "../../../state/types";
+import { useToolcraftMediaPresentationUrls } from "../../app-shell/toolcraft-source-asset-context";
+import { useToolcraftSelector } from "../../app-shell/use-toolcraft";
 
 export type FileDropControlRenderArgs = {
   canvasSize: ToolcraftCanvasSize;
   control: ToolcraftControlSchema;
   dispatchCommand: (command: ToolcraftCommand) => void;
   id: string;
+  layerSelectionEnabled?: boolean;
   mediaAssets: readonly ToolcraftMediaAsset[];
+  sourceAssetCoordinator: ToolcraftSourceAssetCoordinator;
 };
 
-export function renderFileDropControl({
-  canvasSize,
+const IMAGE_TRANSFORM_OPERATIONS = new Set<ToolcraftMediaTransformOperation>([
+  "flip-horizontal",
+  "flip-vertical",
+  "rotate-left",
+  "rotate-right",
+]);
+
+const MODEL_REPAIR_ACTION = "model.fix";
+
+function isImageTransformOperation(
+  value: string,
+): value is ToolcraftMediaTransformOperation {
+  return IMAGE_TRANSFORM_OPERATIONS.has(value as ToolcraftMediaTransformOperation);
+}
+
+function FileDropControlRenderer({
   control,
   dispatchCommand,
   id,
+  layerSelectedImageAsset = null,
   mediaAssets,
-}: FileDropControlRenderArgs): React.ReactNode {
-  const assetKind = control.assetKind === "file" ? "file" : "image";
-  const previewMediaAssets = mediaAssets.filter(
-    (asset) =>
-      asset.sourceTarget === undefined || asset.sourceTarget === control.target,
+  sourceAssetCoordinator,
+  suppressMediaCollection = false,
+}: Omit<
+  FileDropControlRenderArgs,
+  "canvasSize" | "layerSelectionEnabled"
+> & {
+  layerSelectedImageAsset?: ToolcraftImageAsset | null;
+  suppressMediaCollection?: boolean;
+}): React.JSX.Element | null {
+  const assetKind = control.assetKind === "file"
+    ? "file"
+    : control.assetKind === "model"
+      ? "model"
+      : "image";
+  const getOperation = React.useCallback(
+    () => sourceAssetCoordinator.getOperation(control.target),
+    [control.target, sourceAssetCoordinator],
   );
-  const previewMediaAsset = previewMediaAssets[0];
-  const previews = previewMediaAssets.map((asset): FileDropPreview => ({
-    alt: asset.fileName,
-    assetKind: asset.assetKind ?? "image",
-    fileName: asset.fileName,
-    id: asset.id,
-    size: asset.size,
-    src: asset.dataUrl,
-    transform: asset.transform,
-  }));
-  const previewMediaIds = previewMediaAssets.map((asset) => asset.id);
-
-  const importFile = (file: File, replaceExisting: boolean): void => {
-    if (assetKind === "file") {
-      void readImportedFile(file).then((importedFile) => {
-        if (!importedFile) {
-          return;
+  const operation = React.useSyncExternalStore(
+    sourceAssetCoordinator.subscribe,
+    getOperation,
+    getOperation,
+  );
+  const previewUrls = useToolcraftMediaPresentationUrls(mediaAssets);
+  const [selectedMediaId, setSelectedMediaId] = React.useState<string | null>(null);
+  const unresolvedPresentation = sourceAssetCoordinator.getPresentation(
+    control,
+    mediaAssets,
+    operation,
+  );
+  const basePresentation = unresolvedPresentation
+    ? {
+        ...unresolvedPresentation,
+        items: unresolvedPresentation.items.map((item) => {
+          const previewSrc = previewUrls.get(item.id);
+
+          return previewSrc ? { ...item, previewSrc } : item;
+        }),
+      }
+    : null;
+  const selectedLayerPresentation = layerSelectedImageAsset
+    ? sourceAssetCoordinator.getPresentation(
+        control,
+        [layerSelectedImageAsset],
+        operation,
+      )
+    : null;
+  const previewMediaIds = basePresentation?.items.map((item) => item.id) ?? [];
+  const activeImageId = assetKind === "image"
+    ? suppressMediaCollection
+      ? layerSelectedImageAsset?.id ?? null
+      : basePresentation?.items.length === 1
+        ? basePresentation.items[0]?.id ?? null
+        : selectedMediaId
+    : null;
+  const activeModelId = assetKind === "model"
+    ? basePresentation?.items[0]?.id ?? null
+    : null;
+  const presentation = basePresentation
+    ? suppressMediaCollection
+      ? {
+          ...basePresentation,
+          items: [],
+          secondaryActions: selectedLayerPresentation?.secondaryActions ?? [],
         }
+      : assetKind === "image" && !activeImageId
+        ? { ...basePresentation, secondaryActions: [] }
+        : basePresentation
+    : null;
 
-        dispatchCommand({
-          asset: {
-            assetKind: "file",
-            dataUrl: importedFile.dataUrl,
-            fileName: file.name,
-            mimeType: file.type || "application/octet-stream",
-            position: { x: 0, y: 0 },
-            sourceTarget: control.target,
-          },
-          replaceExisting,
-          type: "media.import",
-        });
-      });
-      return;
+  React.useEffect(() => {
+    if (selectedMediaId && !previewMediaIds.includes(selectedMediaId)) {
+      setSelectedMediaId(null);
     }
+  }, [previewMediaIds, selectedMediaId]);
 
-    if (!isToolcraftImageFile(file)) {
+  if (!basePresentation || !presentation) {
+    return null;
+  }
+
+  const reorderItems = (orderedIds: readonly string[]): void => {
+    if (orderedIds.length !== previewMediaIds.length) {
       return;
     }
 
-    void readImportedImageFile(file, canvasSize).then((importedImage) => {
-      if (!importedImage) {
-        return;
+    const previewIdSet = new Set(previewMediaIds);
+    let orderedPreviewIndex = 0;
+    const mediaIds = mediaAssets.map((asset) => {
+      if (!previewIdSet.has(asset.id)) {
+        return asset.id;
       }
 
-      dispatchCommand({
-        asset: {
-          assetKind: "image",
-          dataUrl: importedImage.dataUrl,
-          fileName: file.name,
-          mimeType: file.type || "image/*",
-          position: { x: 0, y: 0 },
-          size: importedImage.size,
-          sourceTarget: control.target,
-        },
-        replaceExisting,
-        type: "media.import",
-      });
+      const nextId = orderedIds[orderedPreviewIndex];
+      orderedPreviewIndex += 1;
+      return nextId ?? asset.id;
     });
+
+    dispatchCommand({ mediaIds, type: "media.reorder" });
+  };
+
+  const importFiles = (files: File[]): void => {
+    void sourceAssetCoordinator.importBatch(
+      {
+        files,
+        origin: "panel",
+        target: control.target,
+      },
+      control,
+    );
   };
 
   return (
     <FileDrop
-      accept={control.accept ?? (assetKind === "file" ? "" : "PNG, JPEG, GIF, SVG, WebP")}
-      assetKind={assetKind}
       key={id}
-      multiple={control.multiple}
-      onClear={
-        previewMediaAsset
-          ? () => {
+      onAction={
+        activeImageId
+          ? (value) => {
+              if (!isImageTransformOperation(value)) {
+                return;
+              }
+
               dispatchCommand({
-                mediaId: previewMediaAsset.id,
-                type: "media.delete",
+                mediaId: activeImageId,
+                operation: value,
+                type: "media.transform",
               });
             }
+          : activeModelId
+            ? (value) => {
+                if (value !== MODEL_REPAIR_ACTION) return;
+                void sourceAssetCoordinator.repairModel(activeModelId);
+              }
           : undefined
       }
-      onFilesSelect={(files) => {
-        files.forEach((file) => importFile(file, false));
-      }}
-      onFileSelect={(file) => importFile(file, true)}
-      onPreviewRemove={(item) => {
-        if (!item.id) {
-          return;
-        }
-
-        dispatchCommand({
-          mediaId: item.id,
-          type: "media.delete",
-        });
+      onFilesSelect={importFiles}
+      onFolderSelect={
+        presentation.allowsFolderSelection ? importFiles : undefined
+      }
+      onItemRemove={(item) => {
+        dispatchCommand({ mediaId: item.id, type: "media.delete" });
       }}
-      onPreviewReorder={(orderedPreviews) => {
-        const orderedPreviewIds = orderedPreviews.flatMap((item) =>
-          item.id ? [item.id] : [],
-        );
+      onItemSelect={
+        assetKind === "image" && basePresentation.presenter === "image-grid"
+          ? (item) => setSelectedMediaId(item.id)
+          : undefined
+      }
+      onItemsReorder={
+        basePresentation.presenter === "file-list" ||
+        basePresentation.presenter === "image-grid"
+          ? (items) => reorderItems(items.map((item) => item.id))
+          : undefined
+      }
+      presentation={presentation}
+    />
+  );
+}
 
-        if (orderedPreviewIds.length !== previewMediaIds.length) {
-          return;
-        }
+function LayerSelectedFileDropControlRenderer(
+  props: Omit<
+    FileDropControlRenderArgs,
+    "canvasSize" | "layerSelectionEnabled"
+  >,
+): React.JSX.Element | null {
+  const { control } = props;
+  const selectedImageAsset = useToolcraftSelector(
+    React.useCallback(
+      (state) =>
+        state.mediaAssets.find(
+          (asset): asset is ToolcraftImageAsset =>
+            asset.assetKind === "image" &&
+            asset.layerId === state.selectedLayerId &&
+            (asset.sourceTarget === undefined ||
+              asset.sourceTarget === control.target),
+        ) ?? null,
+      [control.target],
+    ),
+  );
 
-        const previewIdSet = new Set(previewMediaIds);
-        let orderedPreviewIndex = 0;
-        const mediaIds = mediaAssets.map((asset) => {
-          if (!previewIdSet.has(asset.id)) {
-            return asset.id;
-          }
-
-          const nextId = orderedPreviewIds[orderedPreviewIndex];
-          orderedPreviewIndex += 1;
-          return nextId ?? asset.id;
-        });
-
-        dispatchCommand({
-          mediaIds,
-          type: "media.reorder",
-        });
-      }}
-      onPreviewTransform={(item, operation) => {
-        if (!item.id) {
-          return;
-        }
+  return (
+    <FileDropControlRenderer
+      {...props}
+      layerSelectedImageAsset={selectedImageAsset}
+      suppressMediaCollection
+    />
+  );
+}
 
-        dispatchCommand({
-          mediaId: item.id,
-          operation,
-          type: "media.transform",
-        });
-      }}
-      preview={
-        previewMediaAsset
-          ? {
-              alt: previewMediaAsset.fileName,
-              id: previewMediaAsset.id,
-              size: previewMediaAsset.size,
-              src: previewMediaAsset.dataUrl,
-              transform: previewMediaAsset.transform,
-            }
-          : undefined
-      }
-      previews={previews}
+export function renderFileDropControl({
+  canvasSize: _canvasSize,
+  control,
+  layerSelectionEnabled = false,
+  ...rendererProps
+}: FileDropControlRenderArgs): React.ReactNode {
+  return layerSelectionEnabled ? (
+    <LayerSelectedFileDropControlRenderer
+      control={control}
+      {...rendererProps}
     />
+  ) : (
+    <FileDropControlRenderer control={control} {...rendererProps} />
   );
 }

package/templates/runtime/react/controls-panel/renderers/controls-panel-renderer-registry.test.ts

@@ -3,7 +3,9 @@ import { describe, expect, it } from "vitest";
 import { TOOLCRAFT_BUILT_IN_CONTROL_TYPES } from "../../../contracts/component-contracts";
 import {
   getToolcraftControlRendererKind,
+  getToolcraftControlRendererStateDependencies,
   TOOLCRAFT_CONTROL_RENDERER_REGISTRY,
+  TOOLCRAFT_CONTROL_RENDERER_STATE_DEPENDENCIES,
 } from "./controls-panel-renderer-registry";
 
 describe("Toolcraft controls-panel renderer registry", () => {
@@ -20,4 +22,28 @@ describe("Toolcraft controls-panel renderer registry", () => {
   it("leaves product-specific control ids to custom renderers", () => {
     expect(getToolcraftControlRendererKind("productMaskEditor")).toBeNull();
   });
+
+  it("declares state dependencies for every built-in renderer family", () => {
+    const expectedDependencies = {
+      action: [],
+      basic: ["value"],
+      "canvas-handle": [],
+      collection: ["value"],
+      compound: ["value"],
+      media: ["canvas.size", "mediaAssets"],
+      settings: [],
+    } as const;
+
+    expect(TOOLCRAFT_CONTROL_RENDERER_STATE_DEPENDENCIES).toEqual(
+      expectedDependencies,
+    );
+
+    for (const controlType of TOOLCRAFT_BUILT_IN_CONTROL_TYPES) {
+      const rendererKind = TOOLCRAFT_CONTROL_RENDERER_REGISTRY[controlType];
+
+      expect(getToolcraftControlRendererStateDependencies(controlType)).toEqual(
+        expectedDependencies[rendererKind],
+      );
+    }
+  });
 });

package/templates/runtime/react/controls-panel/renderers/controls-panel-renderer-registry.ts

@@ -6,11 +6,30 @@ import {
 export type ToolcraftControlRendererKind =
   | "action"
   | "basic"
+  | "canvas-handle"
   | "collection"
   | "compound"
   | "media"
   | "settings";
 
+export type ToolcraftControlRendererStateDependency =
+  | "canvas.size"
+  | "mediaAssets"
+  | "value";
+
+export const TOOLCRAFT_CONTROL_RENDERER_STATE_DEPENDENCIES = {
+  action: [],
+  basic: ["value"],
+  "canvas-handle": [],
+  collection: ["value"],
+  compound: ["value"],
+  media: ["canvas.size", "mediaAssets"],
+  settings: [],
+} as const satisfies Record<
+  ToolcraftControlRendererKind,
+  readonly ToolcraftControlRendererStateDependency[]
+>;
+
 export const TOOLCRAFT_CONTROL_RENDERER_REGISTRY = {
   actions: "action",
   anchorGrid: "basic",
@@ -26,6 +45,7 @@ export const TOOLCRAFT_CONTROL_RENDERER_REGISTRY = {
   fontPicker: "compound",
   gradient: "compound",
   imagePicker: "compound",
+  orientationGizmo: "canvas-handle",
   palette: "compound",
   panelActions: "action",
   rangeInput: "basic",
@@ -35,6 +55,7 @@ export const TOOLCRAFT_CONTROL_RENDERER_REGISTRY = {
   settingsTransfer: "settings",
   slider: "basic",
   switch: "basic",
+  tabs: "basic",
   text: "basic",
   vector: "basic",
 } as const satisfies Record<
@@ -53,3 +74,11 @@ export function getToolcraftControlRendererKind(
       ]
     : null;
 }
+
+export function getToolcraftControlRendererStateDependencies(
+  controlType: string,
+): readonly ToolcraftControlRendererStateDependency[] {
+  const kind = getToolcraftControlRendererKind(controlType);
+
+  return kind ? TOOLCRAFT_CONTROL_RENDERER_STATE_DEPENDENCIES[kind] : ["value"];
+}

package/templates/runtime/react/controls-panel/renderers/controls-panel-settings-transfer-renderer.tsx

@@ -11,14 +11,14 @@ import {
 
 export type SettingsTransferControlRenderArgs = {
   dispatch: React.Dispatch<ToolcraftCommand>;
+  getState: () => ToolcraftState;
   id: string;
-  state: ToolcraftState;
 };
 
 export function renderSettingsTransferControl({
   dispatch,
+  getState,
   id,
-  state,
 }: SettingsTransferControlRenderArgs): React.ReactNode {
   return (
     <PanelActions
@@ -26,14 +26,14 @@ export function renderSettingsTransferControl({
         {
           icon: "upload-simple",
           name: "Export Settings",
-          onClick: () => downloadToolcraftSettings(state),
+          onClick: () => downloadToolcraftSettings(getState()),
           variant: "outline",
         },
         {
           icon: "download-simple",
           name: "Import Settings",
           onClick: () => {
-            void importToolcraftSettings({ dispatch, state });
+            void importToolcraftSettings({ dispatch, state: getState() });
           },
           variant: "outline",
         },

package/templates/runtime/react/controls-panel/testing/controls-panel-test-utils.tsx

@@ -261,12 +261,18 @@ export function StateProbe() {
       <span data-testid="media-sizes">
         {state.mediaAssets
           .map((asset) =>
-            asset.size ? `${asset.size.width}x${asset.size.height}` : "none",
+            asset.assetKind === "image" && asset.size
+              ? `${asset.size.width}x${asset.size.height}`
+              : "none",
           )
           .join(",")}
       </span>
       <span data-testid="media-transforms">
-        {JSON.stringify(state.mediaAssets.map((asset) => asset.transform ?? null))}
+        {JSON.stringify(
+          state.mediaAssets.map((asset) =>
+            asset.assetKind === "image" ? (asset.transform ?? null) : null,
+          ),
+        )}
       </span>
       <span data-testid="timeline-expanded">{String(state.timeline.expanded)}</span>
       <span data-testid="timeline-panel-extended">{String(state.panels.timeline.extended)}</span>

package/templates/runtime/react/controls-panel/values/controls-panel-value-labels.ts

@@ -72,6 +72,7 @@ export function formatControlValueLabel(
     }
     case "select":
     case "segmented":
+    case "tabs":
       return (
         control.options?.find((option) => option.value === value)?.label ??
         asString(value)

package/templates/runtime/react/index.ts

@@ -2,14 +2,45 @@
 
 export * from "./app-shell/toolcraft-root";
 export * from "./app-shell/toolcraft-app";
+export { useToolcraftMediaPresentationUrls } from "./app-shell/toolcraft-media-presentation";
+export * from "./app-shell/use-toolcraft-pipeline";
+export * from "./app-shell/use-toolcraft-pipeline-pass";
 export * from "./canvas/canvas-shell";
 export * from "./controls-panel/control-renderers";
 export * from "./controls-panel/controls-panel";
 export * from "./layers/layers-panel";
+export { isToolcraftLayerVisibleInTree } from "./layers/layer-tree";
+export * from "./model-rendering/model-display-fit";
+export * from "./model-rendering/model-export";
+export * from "./model-rendering/model-render-binding";
+export * from "./model-rendering/model-presentation-consumer";
+export * from "./model-rendering/model-presentation-mode";
+export * from "./model-rendering/model-render-registry";
+export * from "./model-rendering/model-render-provider";
+export * from "./model-rendering/lazy-three-model-render-binding";
+export * from "./model-rendering/model-canvas-layer";
+export {
+  DEFAULT_TOOLCRAFT_ORIENTATION_POSE,
+  readToolcraftOrientationPose,
+  type ToolcraftOrientationPose,
+} from "./orientation-gizmo/orientation-gizmo-math";
+export {
+  useToolcraftModelOrbitInteraction,
+  type ToolcraftModelOrbitHitTest,
+  type ToolcraftModelOrbitInteractionHandlers,
+  type ToolcraftModelOrbitInteractionOptions,
+} from "./orientation-gizmo/use-toolcraft-model-orbit-interaction";
 export * from "./panel-host/panel-host";
 export * from "./panel-host/panel-host-types";
 export * from "./app-shell/settings-transfer";
 export * from "./timeline/timeline-panel";
 export * from "./app-shell/theme-runtime";
 export * from "./app-shell/toolbar-panel";
-export * from "./app-shell/use-toolcraft";
+export {
+  useToolcraft,
+  useToolcraftDispatch,
+  useToolcraftEvaluatedValue,
+  useToolcraftEvaluatedValues,
+  useToolcraftSelector,
+  useToolcraftValue,
+} from "./app-shell/use-toolcraft";

package/templates/runtime/react/layers/layer-tree.ts

@@ -1,11 +1,10 @@
 import type { ToolcraftLayer } from "../../state/types";
+import {
+  getToolcraftLayerById,
+  isToolcraftLayerVisibleInTree,
+} from "../../state/layer-visibility";
 
-export function getToolcraftLayerById(
-  layers: readonly ToolcraftLayer[],
-  layerId: string | undefined,
-): ToolcraftLayer | undefined {
-  return layerId ? layers.find((layer) => layer.id === layerId) : undefined;
-}
+export { getToolcraftLayerById, isToolcraftLayerVisibleInTree };
 
 export function getToolcraftLayerDepth(
   layers: readonly ToolcraftLayer[],
@@ -63,32 +62,6 @@ export function isToolcraftLayerHiddenByCollapsedParent(
   return false;
 }
 
-export function isToolcraftLayerVisibleInTree(
-  layers: readonly ToolcraftLayer[],
-  layerOrId: ToolcraftLayer | string,
-): boolean {
-  const layer =
-    typeof layerOrId === "string" ? getToolcraftLayerById(layers, layerOrId) : layerOrId;
-
-  if (!layer?.visible) {
-    return false;
-  }
-
-  let parentLayer = getToolcraftLayerById(layers, layer.parentGroupId);
-  const visited = new Set<string>([layer.id]);
-
-  while (parentLayer && !visited.has(parentLayer.id)) {
-    if (!parentLayer.visible) {
-      return false;
-    }
-
-    visited.add(parentLayer.id);
-    parentLayer = getToolcraftLayerById(layers, parentLayer.parentGroupId);
-  }
-
-  return true;
-}
-
 export function getToolcraftVisibleLayerRows(
   layers: readonly ToolcraftLayer[],
 ): ToolcraftLayer[] {

package/templates/runtime/react/layers/layers-panel-test-utils.tsx

@@ -95,12 +95,14 @@ export function renderLayersPanel(
   layers = seededLayers,
   mediaAssets: ToolcraftMediaAsset[] = [
     {
-      dataUrl: "data:image/png;base64,test",
+      assetKind: "image",
       fileName: "layer-1.png",
       id: "media-1",
       layerId: "layer-1",
       mimeType: "image/png",
+      lifecycle: "ready",
       position: { x: 0, y: 0 },
+      resourceRef: "media:image:layer-1",
       size: { height: 768, unit: "px", width: 1024 },
     },
   ],