@pixel-point/toolcraft 0.0.3 → 0.0.4

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

@@ -766,7 +766,7 @@ function getToggleControlLabelError(
     normalizeToolcraftSemanticText(label) ===
       normalizeToolcraftSemanticText(sectionTitle)
   ) {
-    return `toggle label "${label}" duplicates section title "${sectionTitle}". Use label false for a visual-only toggle or rename the toggle to a more specific setting.`;
+    return `toggle label "${label}" duplicates section title "${sectionTitle}". Use a shorter contextual label such as "Include" or rename the toggle to a more specific setting.`;
   }
 
   return undefined;
@@ -893,6 +893,15 @@ function actionLooksLikePngExport(action: ToolcraftActionSchema | string): boole
   );
 }
 
+function actionLooksLikeVideoExport(action: ToolcraftActionSchema | string): boolean {
+  const text = getActionSearchText(action).replace(/([a-z])([A-Z])/g, "$1 $2");
+
+  return (
+    (/\b(export|download)\b/i.test(text) && /\b(video|mp4|webm|mov)\b/i.test(text)) ||
+    /\bexport\.video\b/i.test(text)
+  );
+}
+
 function schemaHasPngExportPanelAction(schema: ResolvedToolcraftAppSchema): boolean {
   return (schema.panels.controls?.sections ?? []).some((section) =>
     Object.values(section.controls).some(
@@ -903,6 +912,57 @@ function schemaHasPngExportPanelAction(schema: ResolvedToolcraftAppSchema): bool
   );
 }
 
+function schemaHasVideoExportPanelAction(schema: ResolvedToolcraftAppSchema): boolean {
+  return (schema.panels.controls?.sections ?? []).some((section) =>
+    Object.values(section.controls).some(
+      (control) =>
+        control.type === "panelActions" &&
+        getControlActions(control).some(actionLooksLikeVideoExport),
+    ),
+  );
+}
+
+function getFirstPanelActionsSectionIndex(schema: ResolvedToolcraftAppSchema): number {
+  return (schema.panels.controls?.sections ?? []).findIndex((section) =>
+    Object.values(section.controls).some((control) => control.type === "panelActions"),
+  );
+}
+
+function getSchemaControlsSectionByTitle(
+  schema: ResolvedToolcraftAppSchema,
+  title: string,
+): NonNullable<ResolvedToolcraftAppSchema["panels"]["controls"]>["sections"][number] | undefined {
+  const normalizedTitle = normalizeToolcraftSemanticText(title);
+
+  return (schema.panels.controls?.sections ?? []).find(
+    (section) => normalizeToolcraftSemanticText(section.title) === normalizedTitle,
+  );
+}
+
+function getSchemaControlsSectionIndexByTitle(
+  schema: ResolvedToolcraftAppSchema,
+  title: string,
+): number {
+  const normalizedTitle = normalizeToolcraftSemanticText(title);
+
+  return (schema.panels.controls?.sections ?? []).findIndex(
+    (section) => normalizeToolcraftSemanticText(section.title) === normalizedTitle,
+  );
+}
+
+function getSectionControlEntryByTarget(
+  section:
+    | NonNullable<ResolvedToolcraftAppSchema["panels"]["controls"]>["sections"][number]
+    | undefined,
+  target: string,
+): readonly [string, ToolcraftControlSchema] | undefined {
+  if (!section) {
+    return undefined;
+  }
+
+  return Object.entries(section.controls).find(([, control]) => control.target === target);
+}
+
 function schemaHasOutputBackgroundColorControl(
   controls: readonly ToolcraftVisibleControl[],
 ): boolean {
@@ -942,6 +1002,49 @@ function isOutputBackgroundToggleControl(visibleControl: ToolcraftVisibleControl
   );
 }
 
+function getOutputBackgroundColorEntry(
+  section:
+    | NonNullable<ResolvedToolcraftAppSchema["panels"]["controls"]>["sections"][number]
+    | undefined,
+): readonly [string, ToolcraftControlSchema] | undefined {
+  if (!section) {
+    return undefined;
+  }
+
+  return Object.entries(section.controls).find(([controlId, control]) => {
+    if (control.type !== "color") {
+      return false;
+    }
+
+    return /\b(background|backdrop|scene|canvas)\b/i.test(
+      [section.title, controlId, control.target, getControlLabelText(control)]
+        .join(" ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2"),
+    );
+  });
+}
+
+function sectionHasEqualWidthOutputBackgroundRow(
+  section:
+    | NonNullable<ResolvedToolcraftAppSchema["panels"]["controls"]>["sections"][number]
+    | undefined,
+  toggleControlId: string | undefined,
+  colorControlId: string | undefined,
+): boolean {
+  if (!section || !toggleControlId || !colorControlId) {
+    return false;
+  }
+
+  return (section.layoutGroups ?? []).some(
+    (layoutGroup) =>
+      layoutGroup.layout === "inline" &&
+      layoutGroup.columns === 2 &&
+      layoutGroup.controls.length === 2 &&
+      layoutGroup.controls[0] === toggleControlId &&
+      layoutGroup.controls[1] === colorControlId,
+  );
+}
+
 const SEGMENTED_CONTROL_MAX_OPTIONS = 4;
 const SEGMENTED_CONTROL_MAX_OPTION_LABEL_LENGTH = 9;
 const SEGMENTED_CONTROL_MAX_TOTAL_LABEL_LENGTH = 24;
@@ -1823,7 +1926,7 @@ export function validateToolcraftAcceptanceCoverage(
 
         if (unsafeBooleanLabels.length > 0) {
           errors.push(
-            `${sectionLabel} layoutGroups inline row "${layoutGroup.controls.join(", ")}" includes toggle label ${unsafeBooleanLabels.map(([controlId, control]) => `${controlId} "${getInlineSwitchLabelText(controlId, control)}"`).join(", ")} that is too long for a compact toggle-plus-parameter row. Keep the toggle label short, hide it when the section title supplies the context, or stack the controls.`,
+            `${sectionLabel} layoutGroups inline row "${layoutGroup.controls.join(", ")}" includes toggle label ${unsafeBooleanLabels.map(([controlId, control]) => `${controlId} "${getInlineSwitchLabelText(controlId, control)}"`).join(", ")} that is too long for a compact toggle-plus-parameter row. Keep the toggle label short, such as "Include" inside Background, or stack the controls.`,
           );
         }
       }
@@ -1861,15 +1964,199 @@ export function validateToolcraftAcceptanceCoverage(
   }
 
   if (schemaHasPngExportPanelAction(schema)) {
+    const backgroundSection = getSchemaControlsSectionByTitle(schema, "Background");
+    const backgroundSectionIndex = getSchemaControlsSectionIndexByTitle(schema, "Background");
+    const panelActionsSectionIndex = getFirstPanelActionsSectionIndex(schema);
+    const imageExportSectionIndex = getSchemaControlsSectionIndexByTitle(schema, "Image Export");
+    const videoExportSectionIndex = getSchemaControlsSectionIndexByTitle(schema, "Video Export");
+    const hasVideoExportAction = schemaHasVideoExportPanelAction(schema);
+    const expectedOutputSettingsIndex =
+      imageExportSectionIndex >= 0 ? imageExportSectionIndex : videoExportSectionIndex;
+    const finalExportSettingsIndex = hasVideoExportAction
+      ? videoExportSectionIndex
+      : imageExportSectionIndex;
+    const includeBackgroundEntry = getSectionControlEntryByTarget(
+      backgroundSection,
+      "export.includeBackground",
+    );
+    const backgroundColorEntry = getOutputBackgroundColorEntry(backgroundSection);
+    const imageExportSection = getSchemaControlsSectionByTitle(schema, "Image Export");
+    const imageFormatEntry = getSectionControlEntryByTarget(
+      imageExportSection,
+      "export.image.format",
+    );
+    const imageResolutionEntry = getSectionControlEntryByTarget(
+      imageExportSection,
+      "export.image.resolution",
+    );
+    const imageFormatControl = imageFormatEntry?.[1];
+    const imageResolutionControl = imageResolutionEntry?.[1];
+    const imageFormatOptionValues =
+      imageFormatControl?.options?.map((option) => option.value.toLowerCase()) ?? [];
+    const imageResolutionOptionValues =
+      imageResolutionControl?.options?.map((option) => option.value.toLowerCase()) ?? [];
+
+    if (!backgroundSection) {
+      errors.push(
+        'Product apps with Export PNG must expose a separate controls section titled "Background" directly before the first export settings section.',
+      );
+    }
+
+    if (
+      backgroundSectionIndex >= 0 &&
+      expectedOutputSettingsIndex >= 0 &&
+      backgroundSectionIndex !== expectedOutputSettingsIndex - 1
+    ) {
+      errors.push(
+        'The "Background" controls section must sit directly before the first export settings section: Image Export when PNG export exists, otherwise Video Export.',
+      );
+    }
+
+    if (
+      finalExportSettingsIndex >= 0 &&
+      panelActionsSectionIndex >= 0 &&
+      finalExportSettingsIndex !== panelActionsSectionIndex - 1
+    ) {
+      errors.push(
+        'Export settings must sit directly above sticky footer actions: Image Export for still apps, or Video Export after Image Export for animated apps.',
+      );
+    }
+
+    if (
+      hasVideoExportAction &&
+      imageExportSectionIndex >= 0 &&
+      videoExportSectionIndex >= 0 &&
+      imageExportSectionIndex !== videoExportSectionIndex - 1
+    ) {
+      errors.push(
+        'Animated apps with both Export PNG and Export Video must place Image Export immediately before Video Export.',
+      );
+    }
+
     if (!schemaHasOutputBackgroundColorControl(controls)) {
       errors.push(
         "Product apps with Export PNG must expose a user-facing background color control such as appearance.background or scene.background. Preview, PNG export, and video export must read that runtime value instead of hardcoding the product background.",
       );
     }
 
+    if (!backgroundColorEntry) {
+      errors.push(
+        'The "Background" section must contain the renderer-owned background color control, such as appearance.background or scene.background.',
+      );
+    } else {
+      const [, backgroundColorControl] = backgroundColorEntry;
+
+      if (backgroundColorControl.label !== false) {
+        errors.push(
+          'The background color control inside the required "Background" section must use label false; the section title already supplies the visible context.',
+        );
+      }
+    }
+
     if (!schemaHasOutputBackgroundToggleControl(controls)) {
       errors.push(
-        "Product apps with Export PNG must expose a user-facing Include background / Transparent background control such as export.includeBackground. PNG export must pass that runtime value to createToolcraftPngExportCanvas includeBackground; video export keeps the background.",
+        'Product apps with Export PNG must expose export.includeBackground inside the required "Background" section as a Switch labeled "Include". PNG export must pass that runtime value to createToolcraftPngExportCanvas includeBackground; video export keeps the background.',
+      );
+    }
+
+    if (!includeBackgroundEntry) {
+      errors.push(
+        'The "Background" section must contain export.includeBackground as the Include switch.',
+      );
+    } else {
+      const [, includeBackgroundControl] = includeBackgroundEntry;
+
+      if (includeBackgroundControl.type !== "switch") {
+        errors.push('export.includeBackground must be a Switch control labeled "Include".');
+      }
+
+      if (getControlLabelText(includeBackgroundControl) !== "Include") {
+        errors.push(
+          'export.includeBackground must use the short visible label "Include"; the Background section title already supplies the rest of the context.',
+        );
+      }
+    }
+
+    if (
+      !sectionHasEqualWidthOutputBackgroundRow(
+        backgroundSection,
+        includeBackgroundEntry?.[0],
+        backgroundColorEntry?.[0],
+      )
+    ) {
+      errors.push(
+        'The "Background" section must render export.includeBackground and the background color in one two-column inline layoutGroup, with Include on the left and the unlabeled background color on the right.',
+      );
+    }
+
+    if (!imageExportSection) {
+      errors.push(
+        'Apps with Export PNG must expose image export settings in a separate controls section titled "Image Export" directly above sticky footer export actions or directly before "Video Export" when video export also exists.',
+      );
+    }
+
+    if (!imageFormatControl) {
+      errors.push(
+        'The separate "Image Export" section must include a format control with target "export.image.format".',
+      );
+    } else {
+      if (imageFormatControl.type !== "select") {
+        errors.push(
+          'Image Export format must be a Select control so it matches the Video Export settings structure.',
+        );
+      }
+
+      if (!imageFormatOptionValues.includes("png") || !imageFormatOptionValues.includes("jpg")) {
+        errors.push('Image Export format options must include "png" and "jpg".');
+      }
+
+      if (imageFormatControl.defaultValue !== "png") {
+        errors.push('Image Export format must default to "png".');
+      }
+    }
+
+    if (!imageResolutionControl) {
+      errors.push(
+        'The separate "Image Export" section must include a resolution control with target "export.image.resolution".',
+      );
+    } else {
+      if (imageResolutionControl.type !== "select") {
+        errors.push(
+          'Image Export resolution must be a Select control so it matches the Video Export settings structure.',
+        );
+      }
+
+      if (
+        !imageResolutionOptionValues.includes("2k") ||
+        !imageResolutionOptionValues.includes("4k") ||
+        !imageResolutionOptionValues.includes("8k")
+      ) {
+        errors.push(
+          'Image Export resolution options must include "2k", "4k", and "8k".',
+        );
+      }
+
+      if (imageResolutionControl.defaultValue !== "4k") {
+        errors.push('Image Export resolution must default to "4k".');
+      }
+    }
+
+    const imageFormatControlId = imageFormatEntry?.[0];
+    const imageResolutionControlId = imageResolutionEntry?.[0];
+    const imageExportHasInlinePair =
+      imageExportSection === undefined ||
+      imageFormatControlId === undefined ||
+      imageResolutionControlId === undefined
+        ? false
+        : sectionHasInlineLayoutGroupForPair(
+            imageExportSection,
+            imageFormatControlId,
+            imageResolutionControlId,
+          );
+
+    if (!imageExportHasInlinePair) {
+      errors.push(
+        "Image Export format and resolution must render as one compact two-column inline row, matching Video Export settings.",
       );
     }
   }

package/templates/ui/components/control-layout/index.tsx

@@ -80,10 +80,10 @@ export function ControlInlineGroup({
   columns?: number;
   kind?: "default" | "slider" | "toggleParameter";
 }): React.JSX.Element {
-  const gridTemplateColumns =
-    kind === "toggleParameter"
-      ? "auto minmax(0, 1fr)"
-      : `repeat(${Math.max(1, Math.floor(columns))}, minmax(0, 1fr))`;
+  const gridTemplateColumns = `repeat(${Math.max(
+    1,
+    Math.floor(columns),
+  )}, minmax(0, 1fr))`;
 
   return (
     <div

package/templates/ui/components/controls/font-picker/font-picker-control.tsx

@@ -127,7 +127,7 @@ const textCaseOptions: Array<{
   label: string;
   value: FontPickerTextCasePreset;
 }> = [
-  { label: "Original", value: "original" },
+  { label: "As typed", value: "original" },
   { label: "Uppercase", value: "uppercase" },
   { label: "Lowercase", value: "lowercase" },
   { label: "Capitalize", value: "capitalize" },