@pixel-point/toolcraft 0.0.17 → 0.0.18

package/templates/starter/src/app/starter-acceptance.video-export-settings.test.ts

@@ -0,0 +1,336 @@
+import { describe, expect, it } from "vitest";
+
+import type { ToolcraftComponentAcceptance } from "./acceptance/types";
+import { getToolcraftOutputExportErrors } from "./acceptance/output-export";
+import { buildToolcraftOutputExportFacts } from "./acceptance/output-export-model";
+import { getToolcraftVideoExportErrors } from "./acceptance/output-video-export-rules";
+import { collectToolcraftVisibleAcceptanceControls } from "./acceptance/validate-coverage";
+import { defineContractSchemaFixture, validateContractAcceptance } from "./starter-acceptance.contract-fixtures";
+import {
+  makeBackgroundSection,
+  makeExportSettingsProductReadiness,
+} from "./starter-acceptance.export-test-utils";
+import { makeControlAcceptance } from "./starter-acceptance.test-utils";
+
+describe("Toolcraft video export settings acceptance contract", () => {
+  it("accepts a Segmented video format paired with a Select resolution", () => {
+    const schemaWithSegmentedVideoFormat = defineContractSchemaFixture({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            {
+              controls: {
+                videoFormat: {
+                  defaultValue: "mp4",
+                  label: "Format",
+                  options: [
+                    { label: "MP4", value: "mp4" },
+                    { label: "WebM", value: "webm" },
+                  ],
+                  target: "export.video.format",
+                  type: "segmented",
+                },
+                videoResolution: {
+                  defaultValue: "current",
+                  label: "Resolution",
+                  options: [
+                    { label: "Current", value: "current" },
+                    { label: "4K", value: "4k" },
+                  ],
+                  target: "export.video.resolution",
+                  type: "select",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["videoFormat", "videoResolution"],
+                  layout: "inline",
+                },
+              ],
+              title: "Video Export",
+            },
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "upload-simple",
+                      label: "Export Video",
+                      role: "export-video",
+                      value: "export.video",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const segmentedProductReadiness = makeExportSettingsProductReadiness({
+      image: {
+        evidence: "The user explicitly removed image delivery.",
+        mode: "user-removed",
+      },
+      video: {
+        evidence: "The user explicitly requested video delivery.",
+        mode: "user-requested",
+      },
+    });
+    const videoFormatAcceptance = makeControlAcceptance(
+      "export.video.format",
+      "segmented",
+    );
+    videoFormatAcceptance.optionCoverage = ["mp4", "webm"];
+    const videoResolutionAcceptance = makeControlAcceptance(
+      "export.video.resolution",
+      "select",
+    );
+    videoResolutionAcceptance.optionCoverage = ["current", "4k"];
+    const acceptance: readonly ToolcraftComponentAcceptance[] = [
+      makeControlAcceptance("appearance.background", "color"),
+      makeControlAcceptance("export.includeBackground", "switch"),
+      videoFormatAcceptance,
+      videoResolutionAcceptance,
+      {
+        actionCoverage: ["export.video"],
+        automated: true,
+        automatedTestName: "exports segmented-format video output",
+        browser: true,
+        browserTestName: "browser: exports segmented-format video output",
+        componentType: "panelActions",
+        evidence: "exported-bytes",
+        expectedObservable: "Export Video creates validated video bytes.",
+        exportArtifactCoverage: "all-required-video-export-behavior",
+        fixture: "segmented video export fixture",
+        id: "actions.output",
+        kind: "control",
+        target: "actions.output",
+        userAction: "Choose MP4 or WebM, then export and inspect the video artifact.",
+      },
+    ];
+
+    expect(
+      getToolcraftOutputExportErrors({
+        acceptance,
+        controls: collectToolcraftVisibleAcceptanceControls(
+          schemaWithSegmentedVideoFormat,
+        ),
+        productReadiness: segmentedProductReadiness,
+        schema: schemaWithSegmentedVideoFormat,
+      }),
+    ).toEqual([]);
+
+    expect(
+      validateContractAcceptance({
+        acceptance,
+        productReadiness: segmentedProductReadiness,
+        schema: schemaWithSegmentedVideoFormat,
+      }),
+    ).not.toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("includes segmented control videoFormat"),
+      ]),
+    );
+  });
+
+  it.each([
+    {
+      expected:
+        'Video Export format options must be exactly "mp4" and "webm".',
+      formatOptions: ["mp4", "webm", "mov"],
+      name: "extra video format",
+      resolutionOptions: ["current", "4k"],
+    },
+    {
+      expected:
+        'Video Export format options must be exactly "mp4" and "webm".',
+      formatOptions: ["mp4", "webm", "webm"],
+      name: "duplicate video format",
+      resolutionOptions: ["current", "4k"],
+    },
+    {
+      expected:
+        'Video Export resolution options must be exactly "current" and "4k".',
+      formatOptions: ["mp4", "webm"],
+      name: "extra video resolution",
+      resolutionOptions: ["current", "4k", "8k"],
+    },
+    {
+      expected:
+        'Video Export resolution options must be exactly "current" and "4k".',
+      formatOptions: ["mp4", "webm"],
+      name: "duplicate video resolution",
+      resolutionOptions: ["current", "4k", "4k"],
+    },
+  ])("rejects an $name option", ({
+    expected,
+    formatOptions,
+    resolutionOptions,
+  }) => {
+    const schema = defineContractSchemaFixture({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                videoFormat: {
+                  defaultValue: "mp4",
+                  label: "Format",
+                  options: formatOptions.map((value) => ({
+                    label: value.toUpperCase(),
+                    value,
+                  })),
+                  target: "export.video.format",
+                  type: "select",
+                },
+                videoResolution: {
+                  defaultValue: "current",
+                  label: "Resolution",
+                  options: resolutionOptions.map((value) => ({
+                    label: value.toUpperCase(),
+                    value,
+                  })),
+                  target: "export.video.resolution",
+                  type: "select",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["videoFormat", "videoResolution"],
+                  layout: "inline",
+                },
+              ],
+              title: "Video Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      getToolcraftVideoExportErrors(
+        buildToolcraftOutputExportFacts({ schema }),
+      ),
+    ).toContain(expected);
+  });
+
+  it("validates the complete video format, resolution, defaults, and layout contract", () => {
+    const malformedVideoSchema = defineContractSchemaFixture({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            {
+              controls: {
+                videoFormat: {
+                  defaultValue: "mov",
+                  label: "Format",
+                  target: "export.video.format",
+                  textValueKind: "single-line",
+                  type: "text",
+                },
+                videoResolution: {
+                  defaultValue: "8k",
+                  label: "Resolution",
+                  options: [
+                    { label: "Current", value: "current" },
+                    { label: "8K", value: "8k" },
+                  ],
+                  target: "export.video.resolution",
+                  type: "segmented",
+                },
+              },
+              title: "Video Export",
+            },
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "upload-simple",
+                      label: "Export Video",
+                      role: "export-video",
+                      value: "export.video",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateContractAcceptance({
+        acceptance: [
+          makeControlAcceptance("appearance.background", "color"),
+          makeControlAcceptance("export.includeBackground", "switch"),
+          makeControlAcceptance("export.video.format", "text"),
+          makeControlAcceptance("export.video.resolution", "segmented"),
+          {
+            actionCoverage: ["export.video"],
+            automated: true,
+            automatedTestName: "exports video output",
+            browser: true,
+            browserTestName: "browser: exports video output",
+            componentType: "panelActions",
+            evidence: "exported-bytes",
+            expectedObservable: "Export Video creates validated video bytes.",
+            exportArtifactCoverage: "all-required-video-export-behavior",
+            fixture: "video-only export fixture",
+            id: "actions.output",
+            kind: "control",
+            target: "actions.output",
+            userAction: "Export and inspect the video artifact.",
+          },
+        ],
+        productReadiness: makeExportSettingsProductReadiness({
+          image: {
+            evidence: "The user explicitly removed image delivery.",
+            mode: "user-removed",
+          },
+          video: {
+            evidence: "The user explicitly requested video delivery.",
+            mode: "user-requested",
+          },
+        }),
+        schema: malformedVideoSchema,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "Video Export format must be a Select or Segmented control.",
+        'Video Export format options must be exactly "mp4" and "webm".',
+        'Video Export format must default to "mp4".',
+        "Video Export resolution must be a Select control.",
+        'Video Export resolution options must be exactly "current" and "4k".',
+        'Video Export resolution must default to "current".',
+        "Video Export format and resolution must render as one exact two-column inline row.",
+      ]),
+    );
+  });
+});

package/templates/starter/src/app/starter-acceptance.view-interaction.test.ts

@@ -38,6 +38,10 @@ function createProductReadiness(
   viewInteraction: ToolcraftViewInteractionIntent,
 ): ToolcraftProductReadiness {
   return {
+    exportIntent: {
+      image: { mode: "toolcraft-default" },
+      video: { mode: "not-requested" },
+    },
     interactionOwnership: [],
     mode: "product",
     productName: "Spatial fixture",
@@ -111,6 +115,10 @@ function createSchema({
 describe("Toolcraft spatial view interaction intent", () => {
   it("rejects stale product readiness that omits the typed intent", () => {
     const productReadiness = {
+      exportIntent: {
+        image: { mode: "toolcraft-default" },
+        video: { mode: "not-requested" },
+      },
       mode: "product",
       productName: "Legacy fixture",
       productSummary: "An old product declaration.",

package/templates/starter/src/app/test-evidence/browser-runtime-contract.ts

@@ -20,8 +20,8 @@ export const TOOLCRAFT_BROWSER_RUNTIME_EVIDENCE_TYPES = [
   "canvas-render-scale-backing",
   "command-side-effect",
   "compound-control-part",
-  "conditional-control-hidden",
-  "conditional-control-visible",
+  "control-applicability-hidden",
+  "control-applicability-visible",
   "discrete-slider-layout",
   "exported-artifact",
   "infinity-mode-restoration",

package/templates/starter/src/routes/index.tsx

@@ -9,6 +9,7 @@ export function StarterHome(): React.JSX.Element {
       className="h-dvh min-h-dvh"
       controlRenderers={starterComposition.controlRenderers}
       exportRenderer={starterComposition.exportRenderer}
+      infiniteCanvasContent={starterComposition.infiniteCanvasContent}
       modelPresentation={starterComposition.modelPresentation}
       onPanelAction={starterComposition.onPanelAction}
       renderDefaultCanvasMedia={starterComposition.renderDefaultCanvasMedia}

package/templates/ui/components/composites/tabs.tsx

@@ -26,7 +26,7 @@ const tabsListVariants = cva(
       },
       variant: {
         control:
-          "w-full rounded-md border border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] p-0 text-[color:color-mix(in_oklab,var(--foreground)_72%,transparent)] [&>[data-slot=tabs-trigger]]:relative [&>[data-slot=tabs-trigger]:has(+[data-slot=tabs-trigger])]:border-r-0 [&>[data-slot=tabs-trigger][data-active]+[data-slot=tabs-trigger]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)]",
+          "w-full rounded-md p-0 text-[color:color-mix(in_oklab,var(--foreground)_72%,transparent)] [&>[data-slot=tabs-trigger]]:relative [&>[data-slot=tabs-trigger]:has(+[data-slot=tabs-trigger])]:border-r-0 [&>[data-slot=tabs-trigger][data-active]+[data-slot=tabs-trigger]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)]",
         default: "bg-transparent",
         line: "gap-1 bg-transparent pl-0",
       },
@@ -69,7 +69,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
       className={cn(
         "relative inline-flex h-[var(--tabs-trigger-height,calc(100%-1px))] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] transition-none group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-[color:var(--foreground)] focus-visible:border-[color:var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[color:color-mix(in_oklab,var(--ring)_50%,transparent)] focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-[color:var(--muted-foreground)] dark:hover:text-[color:var(--foreground)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[size=header-lg]/tabs-list:px-2.5 group-data-[size=header-lg]/tabs-list:text-xs-plus",
-        "group-data-[variant=control]/tabs-list:min-w-0 group-data-[variant=control]/tabs-list:rounded-none group-data-[variant=control]/tabs-list:border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] group-data-[variant=control]/tabs-list:bg-transparent group-data-[variant=control]/tabs-list:px-2 group-data-[variant=control]/tabs-list:transition-all group-data-[variant=control]/tabs-list:first:rounded-l-md group-data-[variant=control]/tabs-list:last:rounded-r-md group-data-[variant=control]/tabs-list:hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)] group-data-[variant=control]/tabs-list:hover:text-[color:var(--foreground)] group-data-[variant=control]/tabs-list:data-active:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] group-data-[variant=control]/tabs-list:data-active:hover:text-[color:var(--foreground)]",
+        "group-data-[variant=control]/tabs-list:h-full group-data-[variant=control]/tabs-list:min-w-0 group-data-[variant=control]/tabs-list:rounded-none group-data-[variant=control]/tabs-list:border-[color:color-mix(in_oklab,var(--border)_12%,transparent)] group-data-[variant=control]/tabs-list:bg-[color:color-mix(in_oklab,var(--input)_5%,transparent)] group-data-[variant=control]/tabs-list:px-2 group-data-[variant=control]/tabs-list:transition-all group-data-[variant=control]/tabs-list:first:rounded-l-md group-data-[variant=control]/tabs-list:last:rounded-r-md group-data-[variant=control]/tabs-list:hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)] group-data-[variant=control]/tabs-list:hover:text-[color:var(--foreground)] group-data-[variant=control]/tabs-list:data-active:border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] group-data-[variant=control]/tabs-list:data-active:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] group-data-[variant=control]/tabs-list:data-active:text-[color:var(--foreground)] group-data-[variant=control]/tabs-list:data-active:hover:bg-[color:color-mix(in_oklab,var(--link)_12%,transparent)] group-data-[variant=control]/tabs-list:data-active:hover:text-[color:var(--foreground)]",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         `${activeSelectedItemClassName} dark:data-active:text-[color:var(--foreground)]`,
         "after:absolute after:bg-[color:var(--foreground)] after:opacity-0 after:transition-none group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[var(--tabs-indicator-bottom,-5px)] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",

package/templates/ui/components/controls/collection-actions/collection-item-groups.test.tsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CollectionItemGroups } from "./collection-item-groups";
+
+describe("CollectionItemGroups", () => {
+  it("renders a line only before adjacent logical groups", () => {
+    const { container } = render(
+      <CollectionItemGroups>
+        <div>Strength A</div>
+        <div>Strength B</div>
+      </CollectionItemGroups>,
+    );
+    const groups = container.querySelectorAll(
+      '[data-slot="collection-item-group"]',
+    );
+
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.className).not.toContain("border-t");
+    expect(groups[1]?.className).toContain("border-t");
+    expect(container.textContent).not.toMatch(/Item 1|Item 2/u);
+  });
+
+  it("renders no line for one logical group", () => {
+    const { container } = render(
+      <CollectionItemGroups>
+        <div>Only group</div>
+      </CollectionItemGroups>,
+    );
+
+    expect(
+      container.querySelector('[data-slot="collection-item-group"]')
+        ?.className,
+    ).not.toContain("border-t");
+  });
+});

package/templates/ui/components/controls/collection-actions/collection-item-groups.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+
+export type CollectionItemGroupsProps = {
+  children: React.ReactNode;
+};
+
+export function CollectionItemGroups({
+  children,
+}: CollectionItemGroupsProps): React.JSX.Element {
+  const groups = React.Children.toArray(children);
+
+  return (
+    <div className="min-w-0" data-slot="collection-item-groups">
+      {groups.map((group, index) => {
+        const key =
+          React.isValidElement(group) && group.key !== null ? group.key : index;
+
+        return (
+          <div
+            className={
+              index === 0
+                ? "min-w-0"
+                : "mt-[18px] min-w-0 border-t border-[color:color-mix(in_oklab,var(--border)_5%,transparent)] pt-[18px]"
+            }
+            data-slot="collection-item-group"
+            key={key}
+          >
+            {group}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/ui/components/controls/collection-actions/index.ts

@@ -2,3 +2,5 @@
 
 export { CollectionActionsControl } from "./collection-actions-control";
 export type { CollectionActionsControlProps } from "./collection-actions-control";
+export { CollectionItemGroups } from "./collection-item-groups";
+export type { CollectionItemGroupsProps } from "./collection-item-groups";

package/templates/ui/components/controls/file-drop/file-drop-collection-control.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+import {
+  CollectionActionsControl,
+  CollectionItemGroups,
+} from "../collection-actions";
+import { Field } from "../../primitives";
+import { FileDropPresentationMessages } from "./file-drop-presentation-messages";
+import type {
+  FileDropCollectionActions,
+  FileDropPresentation,
+  FileDropPresentationEntry,
+  FileDropPresentationItem,
+} from "./file-drop-types";
+
+type FileDropCollectionSlotControl = (
+  props: Readonly<{
+    collectionSlot: true;
+    onFilesSelect: (files: File[]) => void;
+    presentation: FileDropPresentation<string, unknown, unknown>;
+  }>,
+) => React.JSX.Element;
+
+type FileDropCollectionControlProps = {
+  actions: FileDropCollectionActions;
+  canRemoveAttachedItem: boolean;
+  entries: readonly FileDropPresentationEntry[];
+  onFilesSelect?: (files: File[]) => void;
+  onRemoveAttachedItem: (item: FileDropPresentationItem, index: number) => void;
+  presentation: FileDropPresentation<string, unknown, unknown>;
+  SlotControl: FileDropCollectionSlotControl;
+};
+
+export function FileDropCollectionControl({
+  actions,
+  canRemoveAttachedItem,
+  entries,
+  onFilesSelect,
+  onRemoveAttachedItem,
+  presentation,
+  SlotControl,
+}: FileDropCollectionControlProps): React.JSX.Element {
+  const pendingBaseCountRef = React.useRef(entries.length);
+  const [hasPendingSlot, setHasPendingSlot] = React.useState(
+    () => entries.length === 0,
+  );
+  const itemLabel = actions.itemLabel ?? "file";
+
+  React.useEffect(() => {
+    if (entries.length === 0 && !hasPendingSlot) {
+      pendingBaseCountRef.current = 0;
+      setHasPendingSlot(true);
+    } else if (hasPendingSlot && entries.length > pendingBaseCountRef.current) {
+      setHasPendingSlot(false);
+    }
+  }, [entries.length, hasPendingSlot]);
+
+  const canAddSlot = actions.canAdd !== false && !hasPendingSlot;
+  const canRemoveSlot = hasPendingSlot
+    ? entries.length > 0
+    : entries.length > 0 && canRemoveAttachedItem;
+
+  function renderSlot(
+    item: FileDropPresentationItem | null,
+    index: number,
+    key: React.Key,
+  ): React.JSX.Element {
+    const itemContent = item ? actions.renderItemContent?.(item, index) : null;
+
+    return (
+      <div
+        className={cn("min-w-0", itemContent && "space-y-4")}
+        data-slot="file-drop-collection-slot"
+        key={key}
+      >
+        <SlotControl
+          collectionSlot
+          onFilesSelect={(files) => onFilesSelect?.(files.slice(0, 1))}
+          presentation={{
+            ...presentation,
+            allowsFileBatch: false,
+            allowsFolderSelection: false,
+            emptyTitle: `Upload ${itemLabel} ${index + 1}`,
+            feedback: undefined,
+            items: item ? [item] : [],
+            secondaryActions: [],
+            status: undefined,
+          }}
+        />
+        {itemContent}
+      </div>
+    );
+  }
+
+  return (
+    <Field className="min-w-0" style={{ gap: "6px" }}>
+      <CollectionActionsControl
+        addLabel={actions.addLabel}
+        canAdd={canAddSlot}
+        canRemove={canRemoveSlot}
+        name={actions.name}
+        onAdd={() => {
+          pendingBaseCountRef.current = entries.length;
+          setHasPendingSlot(true);
+        }}
+        onRemove={() => {
+          if (hasPendingSlot) {
+            setHasPendingSlot(false);
+            return;
+          }
+
+          const entry = entries[entries.length - 1];
+
+          if (entry) {
+            onRemoveAttachedItem(entry.item, entry.sourceIndex);
+          }
+        }}
+        removeLabel={actions.removeLabel}
+      />
+      <CollectionItemGroups>
+        {entries.map((entry, index) =>
+          renderSlot(entry.item, index, entry.key),
+        )}
+        {hasPendingSlot
+          ? renderSlot(null, entries.length, `pending-${entries.length}`)
+          : null}
+      </CollectionItemGroups>
+      <FileDropPresentationMessages
+        feedback={presentation.feedback}
+        status={presentation.status}
+      />
+    </Field>
+  );
+}