@pixel-point/toolcraft 0.0.3 → 0.0.6

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;
@@ -1458,14 +1561,33 @@ function getToolcraftControlDescriptionError({
   control,
   controlId,
   sectionLabel,
+  sectionTitle,
 }: {
   control: ToolcraftControlSchema;
   controlId: string;
   sectionLabel: string;
+  sectionTitle: string | undefined;
 }): string | undefined {
   const description = control.description?.trim();
 
-  if (!description || control.type !== "fontPicker") {
+  if (!description) {
+    return undefined;
+  }
+
+  const label = getControlLabelText(control).trim();
+
+  if (
+    isToolcraftObviousColorSectionControlDescription({
+      control,
+      description,
+      label,
+      sectionTitle,
+    })
+  ) {
+    return `${sectionLabel} / ${controlId} description adds a help icon to an obvious color-section control. Omit control.description when the section title and visible label already explain the setting.`;
+  }
+
+  if (control.type !== "fontPicker") {
     return undefined;
   }
 
@@ -1480,6 +1602,52 @@ function getToolcraftControlDescriptionError({
   return `${sectionLabel} / ${controlId} description repeats FontPicker-owned fields (${repeatedParts.join(", ")}). FontPicker help must explain only non-obvious product behavior; use section titles and visible field labels for font family, weight, size, case, color, opacity, letter spacing, and line height, or omit description.`;
 }
 
+function isToolcraftColorSectionTitle(sectionTitle: string | undefined): boolean {
+  return /\b(colou?rs?|palette|palettes)\b/i.test(sectionTitle ?? "");
+}
+
+function isToolcraftSequentialColorLabel(label: string): boolean {
+  return /^colou?r\s+\d+$/i.test(label.trim());
+}
+
+function isToolcraftSimplePaletteDistributionLabel(label: string): boolean {
+  return /^(spread|mix|distribution)$/i.test(label.trim());
+}
+
+function isToolcraftGenericControlHelpDescription(description: string): boolean {
+  return /^(adjusts?|changes?|chooses?|controls?|defines?|selects?|sets?|updates?)\b/i.test(
+    description.trim(),
+  );
+}
+
+function isToolcraftObviousColorSectionControlDescription({
+  control,
+  description,
+  label,
+  sectionTitle,
+}: {
+  control: ToolcraftControlSchema;
+  description: string;
+  label: string;
+  sectionTitle: string | undefined;
+}): boolean {
+  if (!isToolcraftColorSectionTitle(sectionTitle)) {
+    return false;
+  }
+
+  if (
+    (control.type === "color" || control.type === "colorOpacity") &&
+    isToolcraftSequentialColorLabel(label)
+  ) {
+    return true;
+  }
+
+  return (
+    isToolcraftSimplePaletteDistributionLabel(label) &&
+    isToolcraftGenericControlHelpDescription(description)
+  );
+}
+
 function getToolcraftControlSectionGroupingErrors(
   schema: ResolvedToolcraftAppSchema,
 ): string[] {
@@ -1588,6 +1756,7 @@ function getToolcraftControlSectionGroupingErrors(
         control,
         controlId,
         sectionLabel,
+        sectionTitle,
       });
 
       if (descriptionError) {
@@ -1823,7 +1992,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 +2030,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/file-drop/file-drop-control.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import * as React from "react";
-import { CloudArrowUpIcon, XIcon } from "@phosphor-icons/react";
+import { CloudArrowUpIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 
 import { cn } from "../../../lib/utils";
 import { Button, Field } from "../../primitives";
 
 export type FileDropPreview = {
   alt?: string;
+  id?: string;
   size?: {
     height: number;
     width: number;
@@ -17,9 +18,13 @@ export type FileDropPreview = {
 
 export type FileDropControlProps = {
   accept: string;
+  multiple?: boolean;
   onClear?: () => void;
   onFileSelect?: (file: File) => void;
+  onFilesSelect?: (files: File[]) => void;
+  onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
   preview?: FileDropPreview;
+  previews?: readonly FileDropPreview[];
 };
 
 function isDragLeavingCurrentTarget(event: React.DragEvent<HTMLElement>): boolean {
@@ -73,20 +78,38 @@ function getPreviewImageStyle(size: FileDropPreview["size"]): React.CSSPropertie
 
 export function FileDropControl({
   accept,
+  multiple = false,
   onClear,
   onFileSelect,
+  onFilesSelect,
+  onPreviewRemove,
   preview,
+  previews,
 }: FileDropControlProps): React.JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = React.useState(false);
-  const hasPreview = Boolean(preview?.src);
+  const previewItems = previews ?? (preview ? [preview] : []);
+  const hasPreview = previewItems.some((item) => Boolean(item.src));
+  const shouldRenderPreviewGrid = multiple && previewItems.length > 1;
 
-  function handleFile(file: File | undefined): void {
-    if (!file) {
+  function handleFiles(fileList: FileList | readonly File[] | undefined): void {
+    const files = Array.from(fileList ?? []);
+
+    if (files.length === 0) {
       return;
     }
 
-    onFileSelect?.(file);
+    if (multiple) {
+      if (onFilesSelect) {
+        onFilesSelect(files);
+        return;
+      }
+
+      files.forEach((file) => onFileSelect?.(file));
+      return;
+    }
+
+    onFileSelect?.(files[0]);
   }
 
   function openFileDialog(): void {
@@ -109,15 +132,24 @@ export function FileDropControl({
         aria-hidden="true"
         className="hidden"
         onChange={(event) => {
-          handleFile(event.currentTarget.files?.[0]);
+          handleFiles(event.currentTarget.files ?? undefined);
           event.currentTarget.value = "";
         }}
+        multiple={multiple}
         ref={inputRef}
         tabIndex={-1}
         type="file"
       />
       <div
-        aria-label={hasPreview ? "Replace image file" : "Browse image file"}
+        aria-label={
+          hasPreview
+            ? multiple
+              ? "Drop image files"
+              : "Replace image file"
+            : multiple
+              ? "Browse image files"
+              : "Browse image file"
+        }
         className={cn(
           "group/file-upload relative flex min-h-16 w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-[color:color-mix(in_oklab,var(--border)_18%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] text-center shadow-none transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)] data-[drag-over=true]:border-[color:color-mix(in_oklab,var(--link)_28%,transparent)] data-[drag-over=true]:bg-[color:color-mix(in_oklab,var(--link)_13%,transparent)] data-[drag-over=true]:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--background)]",
           hasPreview ? "overflow-hidden p-2" : "px-3 py-3",
@@ -140,23 +172,74 @@ export function FileDropControl({
         onDrop={(event) => {
           event.preventDefault();
           setDragOver(false);
-          handleFile(event.dataTransfer?.files?.[0]);
+          handleFiles(event.dataTransfer?.files ?? undefined);
         }}
         onKeyDown={handleDropTargetKeyDown}
         role="button"
         tabIndex={0}
       >
-        {hasPreview ? (
+        {shouldRenderPreviewGrid ? (
+          <div
+            className="grid w-full grid-cols-4 gap-2"
+            data-slot="file-upload-preview-grid"
+          >
+            {previewItems.map((item, index) => (
+              <div
+                className="relative aspect-square min-w-0 overflow-hidden rounded-[calc(var(--radius-lg)-4px)] bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)]"
+                data-slot="file-upload-preview-item"
+                key={item.id ?? `${item.src}-${index}`}
+              >
+                <img
+                  alt={item.alt ?? ""}
+                  className="size-full object-cover"
+                  draggable={false}
+                  height={item.size?.height}
+                  src={item.src}
+                  width={item.size?.width}
+                />
+                {onPreviewRemove ? (
+                  <Button
+                    aria-label={`Remove ${item.alt ?? "image"}`}
+                    className="absolute top-1 right-1"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onPreviewRemove(item, index);
+                    }}
+                    size="icon-sm"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <XIcon className="drop-shadow-[0_2px_1px_color-mix(in_oklab,var(--background)_80%,transparent)]" />
+                  </Button>
+                ) : null}
+              </div>
+            ))}
+            <button
+              aria-label="Add image files"
+              className="flex aspect-square min-w-0 items-center justify-center rounded-[calc(var(--radius-lg)-4px)] border border-[color:color-mix(in_oklab,var(--border)_5%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_4%,transparent)] text-[color:color-mix(in_oklab,var(--foreground)_65%,transparent)] transition-[background-color,border-color,color] duration-150 ease-out hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_7%,transparent)] hover:text-[color:var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
+              data-slot="file-upload-add-preview"
+              onClick={(event) => {
+                event.stopPropagation();
+                openFileDialog();
+              }}
+              type="button"
+            >
+              <PlusIcon className="size-4" weight="regular" />
+            </button>
+          </div>
+        ) : hasPreview ? (
           <>
-            <img
-              alt={preview?.alt ?? ""}
-              className="block h-auto max-h-[196px] max-w-full rounded-[calc(var(--radius-lg)-4px)] object-contain"
-              draggable={false}
-              height={preview?.size?.height}
-              src={preview?.src}
-              style={getPreviewImageStyle(preview?.size)}
-              width={preview?.size?.width}
-            />
+            {previewItems[0] ? (
+              <img
+                alt={previewItems[0].alt ?? ""}
+                className="block h-auto max-h-[196px] max-w-full rounded-[calc(var(--radius-lg)-4px)] object-contain"
+                draggable={false}
+                height={previewItems[0].size?.height}
+                src={previewItems[0].src}
+                style={getPreviewImageStyle(previewItems[0].size)}
+                width={previewItems[0].size?.width}
+              />
+            ) : null}
             {onClear ? (
               <Button
                 aria-label="Remove image"

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" },

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

@@ -1,8 +1,11 @@
+import { applySliderValueLabelUnit } from "../slider/slider-value";
+
 export function formatRangeSliderValue(
   value: readonly number[],
   unit?: string,
 ): string {
-  const formatValue = (item: number): string => `${Math.round(item)}${unit ?? ""}`;
+  const formatValue = (item: number): string =>
+    applySliderValueLabelUnit(String(Math.round(item)), unit);
 
   if (value.length >= 2 && value[0] === value[1]) {
     return formatValue(value[0] ?? 0);