@pixel-point/toolcraft 0.0.7 → 0.0.9

package/templates/runtime/react/controls-panel.tsx

@@ -47,6 +47,7 @@ import {
   type GradientStop,
   type GradientType,
   type ImagePickerItem,
+  type VectorPadCoordinateMode,
   type VectorPadVariant,
 } from "@repo/ui";
 
@@ -70,7 +71,11 @@ import type {
   ToolcraftPanelState,
   ToolcraftState,
 } from "../state/types";
-import { readImportedImageFile } from "./media-file";
+import {
+  isToolcraftImageFile,
+  readImportedFile,
+  readImportedImageFile,
+} from "./media-file";
 import { PanelContainer } from "./panel-host";
 import type { PanelPlacement, PanelStateChange } from "./panel-host-types";
 import type { ToolcraftControlRendererMap } from "./control-renderers";
@@ -417,6 +422,17 @@ function asVectorPadVariant(value: string | undefined): VectorPadVariant {
   return "default";
 }
 
+function asVectorPadCoordinateMode(
+  value: string | undefined,
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  if (value === "cartesian" || value === "screen") {
+    return value;
+  }
+
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
 function asCurveInterpolation(value: string | undefined): CurveInterpolation | undefined {
   return value === "monotone" || value === "smooth" ? value : undefined;
 }
@@ -585,6 +601,8 @@ function getCollectionItemDefaultValue(control: ToolcraftControlSchema): unknown
       return { hex: "#C1FF00" };
     case "colorOpacity":
       return { hex: "#C1FF00", opacity: 100 };
+    case "fontPicker":
+      return asFontPickerValue(control.itemControl?.defaultValue);
     case "checkbox":
     case "switch":
       return false;
@@ -1148,6 +1166,15 @@ function hasSliderControl(
   );
 }
 
+function hasSegmentedControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) => controlsById[controlId]?.type === "segmented",
+  );
+}
+
 function hasSectionedCompoundControl(
   controlsById: Record<string, ToolcraftControlSchema>,
   layoutGroup: ToolcraftControlLayoutGroupSchema,
@@ -1208,6 +1235,22 @@ function isToggleParameterLayoutGroup(
   return booleanControlCount === 1 && parameterControlCount === 1;
 }
 
+function shouldHideToggleParameterControlLabel({
+  control,
+  controlsById,
+  layoutGroup,
+}: {
+  control: ToolcraftControlSchema;
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroup: ToolcraftControlLayoutGroupSchema | undefined;
+}): boolean {
+  return Boolean(
+    layoutGroup &&
+      isToggleParameterLayoutGroup(controlsById, layoutGroup) &&
+      !isBooleanControl(control),
+  );
+}
+
 function getControlTargetEntityKey(control: ToolcraftControlSchema): string | null {
   const parts = control.target.split(".");
 
@@ -1403,6 +1446,7 @@ function getInlineLayoutGroupByControlId({
     if (
       hasColorOpacityControl(controlsById, layoutGroup) ||
       hasSliderControl(controlsById, layoutGroup) ||
+      hasSegmentedControl(controlsById, layoutGroup) ||
       hasSectionedCompoundControl(controlsById, layoutGroup) ||
       hasUnsafeInlineSwitchLabels(controlsById, layoutGroup)
     ) {
@@ -1790,7 +1834,9 @@ export function ControlsPanel({
   }
 
   function isColorSectionTitle(sectionTitle: string | undefined): boolean {
-    return /\b(colou?rs?|palette|palettes)\b/i.test(sectionTitle ?? "");
+    return /\b(colou?rs?|palette|palettes|shades?|accents?)\b/i.test(
+      sectionTitle ?? "",
+    );
   }
 
   function isSequentialColorLabel(label: string): boolean {
@@ -1885,6 +1931,10 @@ export function ControlsPanel({
     providerKey: string;
     sectionTitle: string | undefined;
   }): React.ReactNode {
+    if (control.label === false) {
+      return children;
+    }
+
     const help = getControlHelpText({ control, label, sectionTitle });
 
     if (!help) {
@@ -2221,6 +2271,16 @@ export function ControlsPanel({
               showLabel={itemControl?.label !== false}
             />
           );
+        case "fontPicker":
+          return (
+            <FontPicker
+              defaultValue={asFontPickerValue(itemControl?.defaultValue)}
+              key={key}
+              name={itemName || "Font"}
+              onValueChange={update}
+              value={asFontPickerValue(item)}
+            />
+          );
         case "text":
           return (
             <TextInput
@@ -2386,13 +2446,23 @@ export function ControlsPanel({
                 }
 
                 const [id, rawControl] = group.entry;
-                const isInInlineLayoutGroup = inlineLayoutGroupByControlId.has(id);
+                const inlineLayoutGroup = inlineLayoutGroupByControlId.get(id);
+                const isInInlineLayoutGroup = Boolean(inlineLayoutGroup);
                 const disabled = isControlDisabled(rawControl);
-                const control =
+                const resolvedControl =
                   disabled === Boolean(rawControl.disabled)
                     ? rawControl
                     : { ...rawControl, disabled };
-                const name = getControlName(id, control.label);
+                const shouldHideLabel = shouldHideToggleParameterControlLabel({
+                  control: resolvedControl,
+                  controlsById: visibleControls,
+                  layoutGroup: inlineLayoutGroup,
+                });
+                const control =
+                  shouldHideLabel && resolvedControl.label !== false
+                    ? { ...resolvedControl, label: false }
+                    : resolvedControl;
+                const name = getControlName(id, resolvedControl.label);
                 const value = getControlValue(control);
                 const usesHeaderKeyframeAction = control.target === headerKeyframeTarget;
                 const commitWithLabel =
@@ -2504,6 +2574,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       value={asString(value)}
                     />
                   ),
@@ -2590,15 +2661,51 @@ export function ControlsPanel({
               }
 
               case "fileDrop": {
-                const previewMediaAssets = state.schema.panels.layers ? [] : state.mediaAssets;
+                const assetKind = control.assetKind === "file" ? "file" : "image";
+                const previewMediaAssets = state.schema.panels.layers
+                  ? []
+                  : state.mediaAssets.filter(
+                      (asset) =>
+                        asset.sourceTarget === undefined ||
+                        asset.sourceTarget === control.target,
+                    );
                 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,
                 }));
+                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;
+                      }
+
+                      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;
+                  }
+
+                  if (!isToolcraftImageFile(file)) {
+                    return;
+                  }
+
                   void readImportedImageFile(file, state.canvas.size).then((importedImage) => {
                     if (!importedImage) {
                       return;
@@ -2606,11 +2713,13 @@ export function ControlsPanel({
 
                     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",
@@ -2620,7 +2729,11 @@ export function ControlsPanel({
 
                 return (
                   <FileDrop
-                    accept={control.accept ?? "PNG, JPEG, GIF, SVG, WebP"}
+                    accept={
+                      control.accept ??
+                      (assetKind === "file" ? "" : "PNG, JPEG, GIF, SVG, WebP")
+                    }
+                    assetKind={assetKind}
                     multiple={control.multiple}
                     key={id}
                     onClear={
@@ -2647,6 +2760,32 @@ export function ControlsPanel({
                         type: "media.delete",
                       });
                     }}
+                    onPreviewReorder={(orderedPreviews) => {
+                      const orderedPreviewIds = orderedPreviews.flatMap((item) =>
+                        item.id ? [item.id] : [],
+                      );
+
+                      if (orderedPreviewIds.length !== previewMediaIds.length) {
+                        return;
+                      }
+
+                      const previewIdSet = new Set(previewMediaIds);
+                      let orderedPreviewIndex = 0;
+                      const mediaIds = state.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",
+                      });
+                    }}
                     preview={
                       previewMediaAsset
                         ? {
@@ -2777,6 +2916,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       start={rangeValue.start}
                     />
                   ),
@@ -2843,6 +2983,7 @@ export function ControlsPanel({
                     name={name}
                     onValueChange={commit}
                     options={control.options ?? []}
+                    showLabel={control.label !== false}
                     value={asString(value, control.options?.[0]?.value ?? "")}
                   />
                 );
@@ -2922,6 +3063,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       value={asString(value)}
                     />
                   ),
@@ -2934,6 +3076,7 @@ export function ControlsPanel({
 
               case "vector": {
                 const vectorValue = asVectorValue(value);
+                const padVariant = asVectorPadVariant(control.variant);
 
                 return withKeyframeLabelAction({
                   children: (
@@ -2942,8 +3085,12 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      padCoordinateMode={asVectorPadCoordinateMode(
+                        control.coordinateMode,
+                        padVariant,
+                      )}
                       padShape={vectorPadShape}
-                      padVariant={asVectorPadVariant(control.variant)}
+                      padVariant={padVariant}
                       x={vectorValue.x}
                       xLabel={control.xLabel}
                       y={vectorValue.y}

package/templates/runtime/react/media-file.ts

@@ -5,6 +5,10 @@ export type ToolcraftImportedImageFile = {
   size: ToolcraftCanvasSize;
 };
 
+export type ToolcraftImportedFile = {
+  dataUrl: string;
+};
+
 function readFileDataUrl(file: File): Promise<string | null> {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -65,6 +69,21 @@ function readImageDataUrlSize(dataUrl: string): Promise<ToolcraftCanvasSize | nu
   });
 }
 
+export function isToolcraftImageFile(file: File): boolean {
+  return (
+    file.type.startsWith("image/") ||
+    /\.(avif|gif|heic|heif|jpe?g|png|svg|tiff?|webp)$/i.test(file.name)
+  );
+}
+
+export async function readImportedFile(
+  file: File,
+): Promise<ToolcraftImportedFile | null> {
+  const dataUrl = await readFileDataUrl(file);
+
+  return dataUrl ? { dataUrl } : null;
+}
+
 export async function readImportedImageFile(
   file: File,
   fallbackSize: ToolcraftCanvasSize,

package/templates/runtime/schema/define-toolcraft.test.ts

@@ -539,6 +539,7 @@ describe("defineToolcraft", () => {
         "history.undo",
         "media.delete",
         "media.import",
+        "media.reorder",
         "layers.reorder",
         "timeline.setCurrentTime",
         "canvas.center",
@@ -836,7 +837,6 @@ describe("defineToolcraft", () => {
       step: 0.25,
       target: "canvas.renderScale",
       type: "slider",
-      unit: "x",
       variant: "discrete",
     });
   });
@@ -1396,6 +1396,51 @@ describe("defineToolcraft", () => {
     ]);
   });
 
+  it("keeps mode-gated standalone controls inside their semantic section", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sourceMode: {
+                  defaultValue: "preset",
+                  label: "Source",
+                  options: [
+                    { label: "Preset", value: "preset" },
+                    { label: "Image", value: "image" },
+                  ],
+                  target: "source.mode",
+                  type: "segmented",
+                },
+                sourceUpload: {
+                  accept: "image/*",
+                  assetKind: "image",
+                  defaultValue: null,
+                  label: "Image",
+                  target: "source.upload",
+                  type: "fileDrop",
+                  visibleWhen: { equals: "image", target: "source.mode" },
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(app.panels.controls?.sections).toHaveLength(1);
+    expect(app.panels.controls?.sections[0]?.title).toBe("Source");
+    expect(app.panels.controls?.sections[0]?.layout).toBeUndefined();
+    expect(Object.keys(app.panels.controls?.sections[0]?.controls ?? {})).toEqual([
+      "sourceMode",
+      "sourceUpload",
+    ]);
+  });
+
   it("preserves controls panel action sections and render metadata", () => {
     const app = defineToolcraft({
       canvas: { enabled: true },

package/templates/runtime/schema/define-toolcraft.ts

@@ -332,7 +332,7 @@ function createToolcraftAssembly({
 
     if (canvas.upload) {
       capabilities.push("canvas.upload");
-      commands.push("media.delete", "media.import");
+      commands.push("media.delete", "media.import", "media.reorder");
     }
   }
 
@@ -478,7 +478,9 @@ function createToolcraftAssembly({
               ...(canvas.draggable
                 ? (["canvas.panBy", "canvas.setOffset", "canvas.setViewport"] as const)
                 : []),
-              ...(canvas.upload ? (["media.delete", "media.import"] as const) : []),
+              ...(canvas.upload
+                ? (["media.delete", "media.import", "media.reorder"] as const)
+                : []),
             ])
           : [],
         enabled: canvas.enabled,
@@ -522,6 +524,10 @@ function getControlSectionLayout(
   control: ToolcraftControlSchema,
   entries: readonly [string, ToolcraftControlSchema][],
 ): "grouped" | "standalone" {
+  if (isControlGatedBySameSectionControl(control, entries)) {
+    return "grouped";
+  }
+
   if (
     (control.type === "color" || control.type === "colorOpacity") &&
     entries.some(
@@ -537,6 +543,24 @@ function getControlSectionLayout(
   return getControlDefaultSectionLayout(control);
 }
 
+function isControlGatedBySameSectionControl(
+  control: ToolcraftControlSchema,
+  entries: readonly [string, ToolcraftControlSchema][],
+): boolean {
+  const gateTargets = [control.visibleWhen?.target, control.disabledWhen?.target].filter(
+    (target): target is string => Boolean(target),
+  );
+
+  if (gateTargets.length === 0) {
+    return false;
+  }
+
+  return entries.some(([, entryControl]) =>
+    gateTargets.includes(entryControl.target) &&
+    getControlDefaultSectionLayout(entryControl) === "grouped",
+  );
+}
+
 function createControlsRecord(
   entries: readonly [string, ToolcraftControlSchema][],
 ): Record<string, ToolcraftControlSchema> {
@@ -1426,7 +1450,6 @@ function normalizePanels({
           step: canvas.renderScale.step,
           target: canvasRenderScaleTarget,
           type: "slider",
-          unit: "x",
           variant: "discrete",
         }
       : undefined;
@@ -1458,6 +1481,7 @@ function normalizePanels({
   const aspectRatioControl: ToolcraftControlSchema = {
     defaultValue: getCanvasAspectRatioDefaultValue(canvas.size),
     label: "Aspect ratio",
+    orderRole: "input",
     performanceReason: "Aspect ratio changes output dimensions and renderer workload.",
     performanceRole: "workload",
     target: canvasAspectRatioTarget,
@@ -1468,6 +1492,7 @@ function normalizePanels({
     sizeControls.canvasWidth = {
       defaultValue: canvas.size.width,
       label: "Canvas width",
+      orderRole: "input",
       performanceReason: "Canvas width changes output dimensions and renderer workload.",
       performanceRole: "workload",
       target: canvasSizeControlTargets.width,
@@ -1480,6 +1505,7 @@ function normalizePanels({
     sizeControls.canvasHeight = {
       defaultValue: canvas.size.height,
       label: "Canvas height",
+      orderRole: "input",
       performanceReason: "Canvas height changes output dimensions and renderer workload.",
       performanceRole: "workload",
       target: canvasSizeControlTargets.height,

package/templates/runtime/schema/types.ts

@@ -109,6 +109,7 @@ export type ToolcraftAssemblyCommand =
   | "layers.toggleVisibility"
   | "media.delete"
   | "media.import"
+  | "media.reorder"
   | "panels.resetOffset"
   | "panels.setOffset"
   | "timeline.changeKeyframeEasing"
@@ -273,6 +274,8 @@ export type ToolcraftControlPerformanceRole =
   | "responsiveness"
   | "workload";
 
+export type ToolcraftFileDropAssetKind = "file" | "image";
+
 export type ToolcraftControlConditionSchema = {
   equals?: unknown;
   greaterThan?: number;
@@ -320,11 +323,15 @@ export type ToolcraftFontPickerValueSchema = {
 
 export type ToolcraftCurveInterpolation = "monotone" | "smooth";
 
+export type ToolcraftVectorCoordinateMode = "cartesian" | "screen";
+
 export type ToolcraftControlSchema = {
   accept?: string;
   actions?: readonly (ToolcraftActionSchema | string)[];
+  assetKind?: ToolcraftFileDropAssetKind;
   addLabel?: string;
   commitMode?: "content" | "setting";
+  coordinateMode?: ToolcraftVectorCoordinateMode;
   defaultValue?: unknown;
   description?: string;
   disabled?: boolean;