@pixel-point/toolcraft 0.0.16 → 0.0.18

package/templates/ui/components/controls/file-drop/file-drop-types.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 
 import type {
   ActionControlIconName,
@@ -75,7 +75,20 @@ export type FileDropPresentation<
   status?: Status;
 };
 
+export type FileDropCollectionActions = {
+  addLabel?: string;
+  canAdd?: boolean;
+  itemLabel?: string;
+  name: string;
+  removeLabel?: string;
+  renderItemContent?: (
+    item: FileDropPresentationItem,
+    index: number,
+  ) => ReactNode;
+};
+
 type FileDropControlSharedProps<AssetKind extends string> = {
+  collectionActions?: FileDropCollectionActions;
   onClear?: () => void;
   onItemRemove?: (
     item: FileDropPresentationItem<AssetKind>,
@@ -108,27 +121,28 @@ type FileDropPresentationControlProps<
   previews?: never;
 };
 
-type FileDropLegacyControlProps = FileDropControlSharedProps<FileDropAssetKind> & {
-  accept?: string;
-  assetKind?: FileDropAssetKind;
-  multiple?: boolean;
-  onFileSelect?: (file: File) => void;
-  onFilesSelect?: (files: File[]) => void;
-  onFolderSelect?: never;
-  onAction?: never;
-  onItemRemove?: never;
-  onItemSelect?: never;
-  onItemsReorder?: never;
-  onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
-  onPreviewReorder?: (orderedPreviews: FileDropPreview[]) => void;
-  onPreviewTransform?: (
-    preview: FileDropPreview,
-    operation: FileDropImageTransformOperation,
-  ) => void;
-  presentation?: undefined;
-  preview?: FileDropPreview;
-  previews?: readonly FileDropPreview[];
-};
+type FileDropLegacyControlProps =
+  FileDropControlSharedProps<FileDropAssetKind> & {
+    accept?: string;
+    assetKind?: FileDropAssetKind;
+    multiple?: boolean;
+    onFileSelect?: (file: File) => void;
+    onFilesSelect?: (files: File[]) => void;
+    onFolderSelect?: never;
+    onAction?: never;
+    onItemRemove?: never;
+    onItemSelect?: never;
+    onItemsReorder?: never;
+    onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
+    onPreviewReorder?: (orderedPreviews: FileDropPreview[]) => void;
+    onPreviewTransform?: (
+      preview: FileDropPreview,
+      operation: FileDropImageTransformOperation,
+    ) => void;
+    presentation?: undefined;
+    preview?: FileDropPreview;
+    previews?: readonly FileDropPreview[];
+  };
 
 export type FileDropControlProps<
   AssetKind extends string = FileDropAssetKind,

package/templates/ui/components/controls/file-drop/index.ts

@@ -3,6 +3,7 @@
 export { FileDropControl } from "./file-drop-control";
 export type {
   FileDropAssetKind,
+  FileDropCollectionActions,
   FileDropControlProps,
   FileDropImageSize,
   FileDropImageTransform,

package/templates/ui/components/controls/index.ts

@@ -89,10 +89,12 @@ export type {
 export {
   CollectionActionsControl,
   CollectionActionsControl as CollectionActions,
+  CollectionItemGroups,
 } from "./collection-actions";
 export type {
   CollectionActionsControlProps,
   CollectionActionsControlProps as CollectionActionsProps,
+  CollectionItemGroupsProps,
 } from "./collection-actions";
 export { createControlHistoryGroupId } from "./control-types";
 export type {
@@ -118,6 +120,7 @@ export type {
 export { FileDropControl, FileDropControl as FileDrop } from "./file-drop";
 export type {
   FileDropAssetKind,
+  FileDropCollectionActions,
   FileDropControlProps,
   FileDropControlProps as FileDropProps,
   FileDropImageSize,

package/templates/ui/components/controls/range-slider/range-slider-control.tsx

@@ -52,7 +52,7 @@ export function RangeSliderControl({
   const liveHistoryGroupRef = React.useRef<string | null>(null);
   const resolvedValueLabel = valueLabel
     ? applySliderValueLabelUnit(valueLabel, unit)
-    : formatRangeSliderValue(rangeValue, unit);
+    : formatRangeSliderValue(rangeValue, step, unit);
 
   React.useEffect(() => {
     setRangeValue(value);

package/templates/ui/components/controls/range-slider/range-slider-value.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { formatRangeSliderValue } from "./range-slider-value";
+
+describe("formatRangeSliderValue", () => {
+  it("preserves the precision declared by the slider step", () => {
+    expect(formatRangeSliderValue([0.25, 0.77], 0.01)).toBe("0.25 – 0.77");
+    expect(formatRangeSliderValue([2.5, 7.5], 0.1, "%")).toBe("2.5% – 7.5%");
+  });
+
+  it("keeps integer ranges compact", () => {
+    expect(formatRangeSliderValue([20, 80], 1)).toBe("20 – 80");
+  });
+});

package/templates/ui/components/controls/range-slider/range-slider-value.ts

@@ -1,4 +1,4 @@
-import { applySliderValueLabelUnit } from "../slider/slider-value";
+import { formatSliderValueWithUnit } from "../slider/slider-value";
 
 const signedNumberPattern = "[-−]?\\d+(?:[.,]\\d+)?";
 const rangePairPattern = new RegExp(
@@ -8,10 +8,11 @@ const rangePairPattern = new RegExp(
 
 export function formatRangeSliderValue(
   value: readonly number[],
+  step: number,
   unit?: string,
 ): string {
   const formatValue = (item: number): string =>
-    applySliderValueLabelUnit(String(Math.round(item)), unit);
+    formatSliderValueWithUnit(item, step, unit);
 
   if (value.length >= 2 && value[0] === value[1]) {
     return formatValue(value[0] ?? 0);

package/templates/runtime/export/export.ts

@@ -1,166 +0,0 @@
-import type { ResolvedToolcraftAppSchema } from "../schema/types";
-import type { ToolcraftState } from "../state/types";
-import {
-  resolveToolcraftExportFrame,
-  ToolcraftSceneExportError,
-  validateToolcraftArtifactSize,
-  type ToolcraftExportFrame,
-} from "./export-frame";
-import {
-  getToolcraftImageExportSize,
-  type ToolcraftImageExportResolution,
-} from "./export-sizing";
-
-export * from "./export-sizing";
-
-export type ToolcraftExportFormat = "png" | "video";
-
-export type ToolcraftExportBackgroundOptions = {
-  format: ToolcraftExportFormat;
-  schema: ResolvedToolcraftAppSchema;
-};
-
-export type ToolcraftPreviewBackgroundOptions = {
-  includeBackgroundTarget?: string;
-  state: ToolcraftState;
-};
-
-export type ToolcraftPngRenderContext = {
-  canvas: HTMLCanvasElement;
-  context: CanvasRenderingContext2D;
-  cssHeight: number;
-  cssWidth: number;
-  frame: ToolcraftExportFrame;
-  includeBackground: boolean;
-  pixelHeight: number;
-  pixelRatio: number;
-  pixelWidth: number;
-};
-
-export type ToolcraftPngExportCanvasOptions = {
-  background?: string;
-  canvasFactory?: () => HTMLCanvasElement;
-  devicePixelRatio?: number;
-  frame?: ToolcraftExportFrame;
-  includeBackground?: boolean;
-  render: (context: ToolcraftPngRenderContext) => void;
-  resolution?: ToolcraftImageExportResolution | string;
-  state: ToolcraftState;
-};
-
-export function shouldIncludeToolcraftExportBackground({
-  format,
-  schema,
-}: ToolcraftExportBackgroundOptions): boolean {
-  if (format === "video") {
-    return true;
-  }
-
-  return schema.export.png.background !== "transparent";
-}
-
-export function shouldIncludeToolcraftPreviewBackground({
-  includeBackgroundTarget = "export.includeBackground",
-  state,
-}: ToolcraftPreviewBackgroundOptions): boolean {
-  if (state.canvas.mode === "infinite") {
-    return false;
-  }
-
-  const includeBackgroundValue = state.values[includeBackgroundTarget];
-
-  if (typeof includeBackgroundValue === "boolean") {
-    return includeBackgroundValue;
-  }
-
-  if (typeof includeBackgroundValue === "string") {
-    const normalizedValue = includeBackgroundValue.trim().toLowerCase();
-
-    if (
-      normalizedValue === "false" ||
-      normalizedValue === "off" ||
-      normalizedValue === "no" ||
-      normalizedValue === "transparent" ||
-      normalizedValue === "exclude"
-    ) {
-      return false;
-    }
-
-    if (
-      normalizedValue === "true" ||
-      normalizedValue === "on" ||
-      normalizedValue === "yes" ||
-      normalizedValue === "include"
-    ) {
-      return true;
-    }
-  }
-
-  return true;
-}
-
-export function createToolcraftPngExportCanvas({
-  background = "#000000",
-  canvasFactory = () => document.createElement("canvas"),
-  devicePixelRatio,
-  frame,
-  includeBackground: includeBackgroundOverride,
-  render,
-  resolution,
-  state,
-}: ToolcraftPngExportCanvasOptions): HTMLCanvasElement {
-  const canvas = canvasFactory();
-  const frameResult = frame
-    ? { frame, ok: true as const }
-    : resolveToolcraftExportFrame(state, null);
-  if (!frameResult.ok) throw new ToolcraftSceneExportError(frameResult);
-  const resolvedFrame = frameResult.frame;
-  const { height, pixelRatio, width } = getToolcraftImageExportSize({
-    devicePixelRatio,
-    frame: resolvedFrame,
-    resolution,
-    state,
-  });
-  const artifactSize = validateToolcraftArtifactSize({ height, width });
-  if (!artifactSize.ok) throw new ToolcraftSceneExportError(artifactSize);
-  const includeBackground =
-    includeBackgroundOverride ??
-    shouldIncludeToolcraftExportBackground({
-      format: "png",
-      schema: state.schema,
-    });
-
-  canvas.width = width;
-  canvas.height = height;
-
-  const context = canvas.getContext("2d");
-
-  if (!context) {
-    throw new Error("Toolcraft PNG export requires a 2D canvas context.");
-  }
-
-  context.save();
-  context.clearRect(0, 0, width, height);
-
-  if (includeBackground) {
-    context.fillStyle = background;
-    context.fillRect(0, 0, width, height);
-  }
-
-  context.scale(pixelRatio, pixelRatio);
-  context.translate(-resolvedFrame.x, -resolvedFrame.y);
-  render({
-    canvas,
-    context,
-    cssHeight: resolvedFrame.height,
-    cssWidth: resolvedFrame.width,
-    frame: resolvedFrame,
-    includeBackground,
-    pixelHeight: height,
-    pixelRatio,
-    pixelWidth: width,
-  });
-  context.restore();
-
-  return canvas;
-}

package/templates/starter/src/app/acceptance/condition-exclusivity.test.ts

@@ -1,60 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { areToolcraftConditionsProvablyExclusive } from "./condition-exclusivity";
-
-describe("Toolcraft condition exclusivity", () => {
-  it("proves disjoint finite value gates", () => {
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        { equals: "first", target: "model.active" },
-        { equals: "second", target: "model.active" },
-      ),
-    ).toBe(true);
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        { oneOf: ["first", "second"], target: "model.active" },
-        { equals: "second", target: "model.active" },
-      ),
-    ).toBe(false);
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        { notEquals: "hidden", target: "model.active" },
-        { equals: "second", target: "model.active" },
-      ),
-    ).toBe(false);
-  });
-
-  it("proves non-overlapping numeric intervals without guessing across targets", () => {
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        { lessThan: 0, target: "model.index" },
-        { greaterThanOrEqual: 0, target: "model.index" },
-      ),
-    ).toBe(true);
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        { equals: "first", target: "first.mode" },
-        { equals: "second", target: "second.mode" },
-      ),
-    ).toBe(false);
-  });
-
-  it("stays conservative for primitive JSON collisions and invalid numeric bounds", () => {
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        { equals: Number.NaN, target: "model.mode" },
-        { notEquals: null, target: "model.mode" },
-      ),
-    ).toBe(false);
-    expect(
-      areToolcraftConditionsProvablyExclusive(
-        {
-          equals: 1,
-          greaterThan: Number.NaN,
-          target: "model.mode",
-        },
-        { equals: 1, target: "model.mode" },
-      ),
-    ).toBe(false);
-  });
-});

package/templates/starter/src/app/acceptance/condition-exclusivity.ts

@@ -1,221 +0,0 @@
-import type { ToolcraftControlConditionSchema } from "@repo/toolcraft-runtime";
-
-function valuesEqual(left: unknown, right: unknown): boolean {
-  if (Object.is(left, right)) {
-    return true;
-  }
-
-  if (
-    (typeof left !== "object" || left === null) &&
-    (typeof right !== "object" || right === null)
-  ) {
-    return false;
-  }
-
-  try {
-    return JSON.stringify(left) === JSON.stringify(right);
-  } catch {
-    return false;
-  }
-}
-
-function readComparableNumber(value: unknown): number | null {
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return value;
-  }
-
-  if (typeof value === "string") {
-    const numberValue = Number(value.trim());
-
-    return Number.isFinite(numberValue) ? numberValue : null;
-  }
-
-  return null;
-}
-
-function conditionMatchesValue(
-  condition: ToolcraftControlConditionSchema,
-  value: unknown,
-): boolean {
-  const matches: boolean[] = [];
-
-  if ("equals" in condition) {
-    matches.push(valuesEqual(value, condition.equals));
-  }
-  if ("notEquals" in condition) {
-    matches.push(!valuesEqual(value, condition.notEquals));
-  }
-  if (condition.oneOf) {
-    matches.push(condition.oneOf.some((item) => valuesEqual(value, item)));
-  }
-  if (condition.notOneOf) {
-    matches.push(!condition.notOneOf.some((item) => valuesEqual(value, item)));
-  }
-
-  const numberValue = readComparableNumber(value);
-  for (const [expected, compare] of [
-    [condition.greaterThan, (left: number, right: number) => left > right],
-    [
-      condition.greaterThanOrEqual,
-      (left: number, right: number) => left >= right,
-    ],
-    [condition.lessThan, (left: number, right: number) => left < right],
-    [
-      condition.lessThanOrEqual,
-      (left: number, right: number) => left <= right,
-    ],
-  ] as const) {
-    if (typeof expected === "number" && Number.isFinite(expected)) {
-      matches.push(numberValue !== null && compare(numberValue, expected));
-    }
-  }
-
-  return matches.length > 0 && matches.every(Boolean);
-}
-
-function getFiniteConditionValues(
-  condition: ToolcraftControlConditionSchema,
-): readonly unknown[] | null {
-  const candidates =
-    "equals" in condition
-      ? [condition.equals]
-      : condition.oneOf
-        ? [...condition.oneOf]
-        : null;
-
-  return candidates?.filter((value) => conditionMatchesValue(condition, value)) ?? null;
-}
-
-type NumericBoundary = {
-  inclusive: boolean;
-  value: number;
-};
-
-type NumericInterval = {
-  lower: NumericBoundary | null;
-  upper: NumericBoundary | null;
-};
-
-function stricterLowerBoundary(
-  current: NumericBoundary | null,
-  candidate: NumericBoundary,
-): NumericBoundary {
-  if (
-    !current ||
-    candidate.value > current.value ||
-    (candidate.value === current.value && !candidate.inclusive)
-  ) {
-    return candidate;
-  }
-
-  return current;
-}
-
-function stricterUpperBoundary(
-  current: NumericBoundary | null,
-  candidate: NumericBoundary,
-): NumericBoundary {
-  if (
-    !current ||
-    candidate.value < current.value ||
-    (candidate.value === current.value && !candidate.inclusive)
-  ) {
-    return candidate;
-  }
-
-  return current;
-}
-
-function getNumericInterval(
-  condition: ToolcraftControlConditionSchema,
-): NumericInterval | null {
-  let lower: NumericBoundary | null = null;
-  let upper: NumericBoundary | null = null;
-
-  if (condition.greaterThan !== undefined) {
-    lower = stricterLowerBoundary(lower, {
-      inclusive: false,
-      value: condition.greaterThan,
-    });
-  }
-  if (condition.greaterThanOrEqual !== undefined) {
-    lower = stricterLowerBoundary(lower, {
-      inclusive: true,
-      value: condition.greaterThanOrEqual,
-    });
-  }
-  if (condition.lessThan !== undefined) {
-    upper = stricterUpperBoundary(upper, {
-      inclusive: false,
-      value: condition.lessThan,
-    });
-  }
-  if (condition.lessThanOrEqual !== undefined) {
-    upper = stricterUpperBoundary(upper, {
-      inclusive: true,
-      value: condition.lessThanOrEqual,
-    });
-  }
-
-  return lower || upper ? { lower, upper } : null;
-}
-
-function intervalEndsBefore(
-  upper: NumericBoundary | null,
-  lower: NumericBoundary | null,
-): boolean {
-  if (!upper || !lower) {
-    return false;
-  }
-
-  return (
-    upper.value < lower.value ||
-    (upper.value === lower.value && (!upper.inclusive || !lower.inclusive))
-  );
-}
-
-export function areToolcraftConditionsProvablyExclusive(
-  left: ToolcraftControlConditionSchema,
-  right: ToolcraftControlConditionSchema,
-): boolean {
-  if (left.target !== right.target) {
-    return false;
-  }
-
-  const leftValues = getFiniteConditionValues(left);
-  if (
-    leftValues &&
-    leftValues.every((value) => !conditionMatchesValue(right, value))
-  ) {
-    return true;
-  }
-
-  const rightValues = getFiniteConditionValues(right);
-  if (
-    rightValues &&
-    rightValues.every((value) => !conditionMatchesValue(left, value))
-  ) {
-    return true;
-  }
-
-  const leftInterval = getNumericInterval(left);
-  const rightInterval = getNumericInterval(right);
-
-  return Boolean(
-    leftInterval &&
-      rightInterval &&
-      (intervalEndsBefore(leftInterval.upper, rightInterval.lower) ||
-        intervalEndsBefore(rightInterval.upper, leftInterval.lower)),
-  );
-}
-
-export function areToolcraftConditionSetsProvablyExclusive(
-  left: readonly ToolcraftControlConditionSchema[],
-  right: readonly ToolcraftControlConditionSchema[],
-): boolean {
-  return left.some((leftCondition) =>
-    right.some((rightCondition) =>
-      areToolcraftConditionsProvablyExclusive(leftCondition, rightCondition),
-    ),
-  );
-}