@pixel-point/toolcraft 0.0.2

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

@@ -0,0 +1,2327 @@
+"use client";
+
+import * as React from "react";
+import { DiamondIcon } from "@phosphor-icons/react";
+import {
+  Actions,
+  AnchorGrid,
+  Button,
+  ChannelMixer,
+  Checkbox,
+  CodeTextarea,
+  Color,
+  ColorOpacity,
+  ControlInlineGroup,
+  ControlFieldLabelActionProvider,
+  ControlFieldLabelHelpProvider,
+  Curves,
+  FileDrop,
+  FontPicker,
+  Gradient,
+  ImagePicker,
+  Palette,
+  Panel,
+  PanelActions,
+  PanelSection,
+  type PanelActionObjectOption,
+  RangeInput,
+  RangeSlider,
+  Segmented,
+  Select,
+  Slider,
+  Switch,
+  TextInput,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  Vector,
+  type ChannelMixerValues,
+  type ControlChangeMeta,
+  type ColorControlInput,
+  type ColorControlInputPair,
+  type ColorOpacityValue,
+  type CurveInterpolation,
+  type FontPickerValue,
+  type GradientStop,
+  type GradientType,
+  type ImagePickerItem,
+  type VectorPadVariant,
+} from "@repo/ui";
+
+import type {
+  ToolcraftActionCommand,
+  ToolcraftActionSchema,
+  ToolcraftControlConditionSchema,
+  ToolcraftControlLayoutGroupSchema,
+  ToolcraftControlSectionSchema,
+  ToolcraftControlSchema,
+  ResolvedToolcraftAppSchema,
+} from "../schema/types";
+import { getToolcraftControlKeyframeCapability } from "../schema/keyframe-capability";
+import { getToolcraftCanvasSizeTargetDimension } from "../schema/runtime-targets";
+import type {
+  ToolcraftCommand,
+  ToolcraftPanelState,
+  ToolcraftState,
+} from "../state/types";
+import { readImportedImageFile } from "./media-file";
+import { PanelContainer } from "./panel-host";
+import type { PanelPlacement, PanelStateChange } from "./panel-host-types";
+import type { ToolcraftControlRendererMap } from "./control-renderers";
+import {
+  downloadToolcraftSettings,
+  importToolcraftSettings,
+} from "./settings-transfer";
+import {
+  readToolcraftLocalStorageValue,
+  removeToolcraftLocalStorageValue,
+} from "./storage-key-migration";
+import { useToolcraft } from "./use-toolcraft";
+
+export type ControlsPanelProps = {
+  className?: string;
+  controlRenderers?: ToolcraftControlRendererMap;
+  framed?: boolean;
+  onPanelAction?: ToolcraftPanelActionHandler;
+  onPanelStateChange?: PanelStateChange;
+  panelPlacement?: PanelPlacement;
+  panelState?: ToolcraftPanelState;
+};
+
+export type ToolcraftPanelActionContext = {
+  action: ToolcraftActionSchema;
+  dispatch: React.Dispatch<ToolcraftCommand>;
+  reportProgress: (progress: number) => void;
+  state: ToolcraftState;
+};
+
+export type ToolcraftPanelActionHandler = (
+  context: ToolcraftPanelActionContext,
+) => PromiseLike<unknown> | void;
+
+type AnyRecord = Record<string, unknown>;
+type ControlEntry = [string, ToolcraftControlSchema];
+type ControlRenderGroup =
+  | { entries: readonly ControlEntry[]; kind: "colorGroup" }
+  | { entry: ControlEntry; kind: "control" };
+type RenderedControlRenderGroup = {
+  ids: readonly string[];
+  node: React.ReactNode;
+};
+type FooterActionProgressEntry = {
+  id: number;
+  progress: number | null;
+};
+
+const hiddenDiscreteMarkerCount = 2;
+const controlsPanelSectionCollapseStorageVersion = 1;
+
+const sectionedCompoundControlTypes = new Set([
+  "channelMixer",
+  "fontPicker",
+  "gradient",
+  "palette",
+]);
+
+const defaultGradientStops = [
+  { color: "#FFFFFF", position: "0%" },
+  { color: "#7CFF3A", position: "46%" },
+  { color: "#111111", position: "100%" },
+] as const satisfies readonly GradientStop[];
+
+const defaultChannelMixerValues = {
+  B: { B: 100, G: 0, R: 0 },
+  G: { B: 0, G: 100, R: 0 },
+  R: { B: 0, G: 0, R: 100 },
+} satisfies ChannelMixerValues;
+
+function cn(...classNames: Array<string | false | null | undefined>): string {
+  return classNames.filter(Boolean).join(" ");
+}
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "then" in value &&
+    typeof (value as { then?: unknown }).then === "function"
+  );
+}
+
+function noopReportProgress(): void {}
+
+function clampFooterActionProgress(progress: number): number {
+  if (!Number.isFinite(progress)) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(1, progress));
+}
+
+function canCreateControlKeyframe(control: ToolcraftControlSchema): boolean {
+  return getToolcraftControlKeyframeCapability(control).capable;
+}
+
+function shouldRenderCompoundControlSectionDivider(
+  control: ToolcraftControlSchema,
+): boolean {
+  if (control.type === "curves") {
+    return control.variant !== "single";
+  }
+
+  return sectionedCompoundControlTypes.has(control.type);
+}
+
+function withCompoundControlSectionDivider({
+  children,
+  control,
+}: {
+  children: React.ReactNode;
+  control: ToolcraftControlSchema;
+}): React.ReactNode {
+  if (!shouldRenderCompoundControlSectionDivider(control)) {
+    return children;
+  }
+
+  return (
+    <div className="contents" data-control-section-divider="compound">
+      {children}
+    </div>
+  );
+}
+
+function isRecord(value: unknown): value is AnyRecord {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function valuesEqual(first: unknown, second: unknown): boolean {
+  if (Object.is(first, second)) {
+    return true;
+  }
+
+  if (
+    (typeof first !== "object" || first === null) &&
+    (typeof second !== "object" || second === null)
+  ) {
+    return false;
+  }
+
+  try {
+    return JSON.stringify(first) === JSON.stringify(second);
+  } catch {
+    return false;
+  }
+}
+
+function valuesInclude(value: unknown, options: readonly unknown[]): boolean {
+  return options.some((option) => valuesEqual(value, option));
+}
+
+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 compareConditionNumbers(
+  value: unknown,
+  expected: number | undefined,
+  comparator: (value: number, expected: number) => boolean,
+): boolean | null {
+  if (typeof expected !== "number" || !Number.isFinite(expected)) {
+    return null;
+  }
+
+  const numberValue = readComparableNumber(value);
+
+  return numberValue === null ? false : comparator(numberValue, expected);
+}
+
+function asNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function asString(value: unknown, fallback = ""): string {
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return typeof value === "number" && Number.isFinite(value) ? String(value) : fallback;
+}
+
+function asBoolean(value: unknown, fallback = false): boolean {
+  return typeof value === "boolean" ? value : fallback;
+}
+
+function getPanelActionButtonVariant(
+  variant: ToolcraftActionSchema["variant"],
+): PanelActionObjectOption["variant"] {
+  switch (variant) {
+    case "destructive":
+    case "ghost":
+    case "link":
+    case "outline":
+    case "secondary":
+      return variant;
+    default:
+      return "default";
+  }
+}
+
+function asNumberArray(value: unknown, fallback: readonly number[]): readonly number[] {
+  return Array.isArray(value) && value.every((item) => typeof item === "number")
+    ? value
+    : fallback;
+}
+
+function asRangeInputValue(value: unknown): { end: string; start: string } {
+  if (isRecord(value)) {
+    return {
+      end: asString(value.end, "100%"),
+      start: asString(value.start, "0%"),
+    };
+  }
+
+  return { end: "100%", start: "0%" };
+}
+
+function asVectorValue(value: unknown): { x: string; y: string } {
+  if (isRecord(value)) {
+    return {
+      x: asString(value.x, "0.00"),
+      y: asString(value.y, "0.00"),
+    };
+  }
+
+  return { x: "0.00", y: "0.00" };
+}
+
+function asVectorPadVariant(value: string | undefined): VectorPadVariant {
+  if (
+    value === "whiteBalance" ||
+    value === "colorBalance" ||
+    value === "chromaOffset" ||
+    value === "toneBias"
+  ) {
+    return value;
+  }
+
+  return "default";
+}
+
+function asCurveInterpolation(value: string | undefined): CurveInterpolation | undefined {
+  return value === "monotone" || value === "smooth" ? value : undefined;
+}
+
+function formatControlValueLabel(
+  control: ToolcraftControlSchema,
+  value: unknown,
+): string {
+  if (typeof control.valueLabel === "string") {
+    return control.valueLabel;
+  }
+
+  switch (control.type) {
+    case "checkbox":
+    case "switch":
+      return asBoolean(value) ? "On" : "Off";
+    case "color":
+      return asColorValue(value).hex;
+    case "colorOpacity": {
+      const colorOpacityValue = asColorOpacityValue(value);
+
+      return `${colorOpacityValue.hex} ${colorOpacityValue.opacity}%`;
+    }
+    case "fontPicker":
+      return asFontPickerValue(value).fontId;
+    case "gradient":
+      return `${asGradientValue(value).stops.length} stops`;
+    case "imagePicker":
+      return (
+        control.items?.find((item) => item.value === value)?.alt ??
+        asString(value)
+      );
+    case "palette": {
+      if (isRecord(value)) {
+        const family = asString(value.family);
+        const shade = asString(value.shade);
+
+        return [family, shade].filter(Boolean).join(" ") || "Palette";
+      }
+
+      return "Palette";
+    }
+    case "rangeInput": {
+      const rangeValue = asRangeInputValue(value);
+
+      return `${rangeValue.start} – ${rangeValue.end}`;
+    }
+    case "rangeSlider": {
+      const rangeValue = asNumberArray(value, []);
+
+      return rangeValue.length > 0
+        ? rangeValue.map((item) => `${item}${control.unit ?? ""}`).join(" – ")
+        : "Range";
+    }
+    case "select":
+    case "segmented":
+      return (
+        control.options?.find((option) => option.value === value)?.label ??
+        asString(value)
+      );
+    case "slider":
+      return `${asNumber(value, asNumber(control.defaultValue, control.min ?? 0))}${
+        control.unit ?? ""
+      }`;
+    case "vector": {
+      const vectorValue = asVectorValue(value);
+
+      return `${vectorValue.x}, ${vectorValue.y}`;
+    }
+    default:
+      return typeof value === "string" || typeof value === "number"
+        ? String(value)
+        : control.type;
+  }
+}
+
+function asColorValue(value: unknown): { hex: string } {
+  if (isRecord(value)) {
+    return { hex: asString(value.hex, "#C1FF00") };
+  }
+
+  return { hex: "#C1FF00" };
+}
+
+function asColorOpacityValue(value: unknown): ColorOpacityValue {
+  if (isRecord(value)) {
+    return {
+      hex: asString(value.hex, "#C1FF00"),
+      opacity: Math.min(100, Math.max(0, Math.round(asNumber(value.opacity, 100)))),
+    };
+  }
+
+  return { hex: "#C1FF00", opacity: 100 };
+}
+
+function asGradientType(value: unknown): GradientType {
+  return value === "linear" ||
+    value === "radial" ||
+    value === "angular" ||
+    value === "diamond"
+    ? value
+    : "linear";
+}
+
+function asGradientValue(value: unknown): {
+  angle: number;
+  gradientType: GradientType;
+  stops: readonly GradientStop[];
+} {
+  if (isRecord(value)) {
+    return {
+      angle: asNumber(value.angle, 90),
+      gradientType: asGradientType(value.gradientType),
+      stops: Array.isArray(value.stops)
+        ? (value.stops as readonly GradientStop[])
+        : defaultGradientStops,
+    };
+  }
+
+  return {
+    angle: 90,
+    gradientType: "linear",
+    stops: defaultGradientStops,
+  };
+}
+
+function asFontPickerValue(value: unknown): FontPickerValue {
+  if (typeof value === "string") {
+    return {
+      color: "#FFFFFF",
+      fontId: value,
+      fontSize: 16,
+      fontWeight: "400",
+      letterSpacing: "normal",
+      lineHeight: "normal",
+      opacity: 100,
+      textCase: "original",
+    };
+  }
+
+  if (isRecord(value)) {
+    return {
+      color: asString(value.color, "#FFFFFF"),
+      fontId: asString(value.fontId, "inter"),
+      fontSize: asNumber(value.fontSize, 16),
+      fontWeight: asString(value.fontWeight, "400"),
+      letterSpacing:
+        value.letterSpacing === "tighter" ||
+        value.letterSpacing === "tight" ||
+        value.letterSpacing === "normal" ||
+        value.letterSpacing === "wide" ||
+        value.letterSpacing === "wider" ||
+        value.letterSpacing === "widest"
+          ? value.letterSpacing
+          : "normal",
+      lineHeight:
+        value.lineHeight === "none" ||
+        value.lineHeight === "tight" ||
+        value.lineHeight === "snug" ||
+        value.lineHeight === "normal" ||
+        value.lineHeight === "relaxed" ||
+        value.lineHeight === "loose"
+          ? value.lineHeight
+          : "normal",
+      opacity: Math.min(100, Math.max(0, Math.round(asNumber(value.opacity, 100)))),
+      textCase:
+        value.textCase === "original" ||
+        value.textCase === "uppercase" ||
+        value.textCase === "lowercase" ||
+        value.textCase === "capitalize" ||
+        value.textCase === "titleCase"
+          ? value.textCase
+          : "original",
+    };
+  }
+
+  return {
+    color: "#FFFFFF",
+    fontId: "inter",
+    fontSize: 16,
+    fontWeight: "400",
+    letterSpacing: "normal",
+    lineHeight: "normal",
+    opacity: 100,
+    textCase: "original",
+  };
+}
+
+function asActionSchemas(
+  actions: readonly (ToolcraftActionSchema | string)[] | undefined,
+): readonly ToolcraftActionSchema[] {
+  return (actions ?? []).map((action) =>
+    typeof action === "string"
+      ? {
+          label: action,
+          value: action,
+        }
+      : action,
+  );
+}
+
+function getActionCommand(action: ToolcraftActionSchema): ToolcraftActionCommand | null {
+  if (action.command) {
+    return action.command;
+  }
+
+  switch (action.value.toLowerCase()) {
+    case "apply":
+      return "controls.apply";
+    case "reset":
+      return "controls.reset";
+    default:
+      return null;
+  }
+}
+
+function getActionLabel(action: ToolcraftActionSchema): string {
+  return action.label ?? action.value;
+}
+
+function getControlName(id: string, label: boolean | string | undefined): string {
+  if (typeof label === "string") {
+    return label;
+  }
+
+  return id;
+}
+
+function ControlKeyframeButton({
+  active,
+  name,
+  onClick,
+}: {
+  active: boolean;
+  name: string;
+  onClick: () => void;
+}): React.JSX.Element {
+  const label = active ? `Disable ${name} keyframes` : `Add ${name} keyframe`;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label={label}
+            aria-pressed={active}
+            className={cn(
+              "size-4 opacity-100 transition-opacity duration-150 ease-out hover:!bg-transparent active:!bg-transparent aria-pressed:!bg-transparent data-popup-open:!bg-transparent [&_svg:not([class*='size-'])]:!size-2.5 [&_svg:not([class*='size-'])]:!opacity-70 data-[icon-active=true]:[&_svg:not([class*='size-'])]:!opacity-100",
+              active &&
+                "!text-[color:var(--link)] aria-pressed:!text-[color:var(--link)] data-popup-open:!text-[color:var(--link)] [&_svg]:!text-[color:var(--link)] [&_svg]:!fill-[color:var(--link)]",
+            )}
+            data-icon-active={active}
+            onClick={(event) => {
+              event.stopPropagation();
+              onClick();
+
+              if (typeof event.currentTarget.blur === "function") {
+                event.currentTarget.blur();
+              }
+            }}
+            size="icon-sm"
+            style={active ? { color: "var(--link)" } : undefined}
+            type="button"
+            variant="ghost-static"
+          />
+        }
+      >
+        <DiamondIcon weight={active ? "fill" : "regular"} />
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function getControlRenderGroups(entries: readonly ControlEntry[]): ControlRenderGroup[] {
+  const groups: ControlRenderGroup[] = [];
+  let index = 0;
+
+  while (index < entries.length) {
+    const entry = entries[index];
+
+    if (!entry) {
+      index += 1;
+      continue;
+    }
+
+    if (entry[1].type !== "color") {
+      groups.push({ entry, kind: "control" });
+      index += 1;
+      continue;
+    }
+
+    const colorEntries: ControlEntry[] = [];
+
+    while (entries[index]?.[1].type === "color") {
+      const colorEntry = entries[index];
+
+      if (colorEntry) {
+        colorEntries.push(colorEntry);
+      }
+
+      index += 1;
+    }
+
+    for (let colorIndex = 0; colorIndex < colorEntries.length; colorIndex += 2) {
+      const firstEntry = colorEntries[colorIndex];
+      const secondEntry = colorEntries[colorIndex + 1];
+
+      if (firstEntry && secondEntry) {
+        groups.push({ entries: [firstEntry, secondEntry], kind: "colorGroup" });
+      } else if (firstEntry) {
+        groups.push({ entry: firstEntry, kind: "control" });
+      }
+    }
+  }
+
+  return groups;
+}
+
+function getControlRenderGroupIds(group: ControlRenderGroup): readonly string[] {
+  return group.kind === "colorGroup"
+    ? group.entries.map(([id]) => id)
+    : [group.entry[0]];
+}
+
+function countControlsByType(
+  sections: readonly ToolcraftControlSectionSchema[],
+  type: string,
+): number {
+  return sections.reduce(
+    (count, section) =>
+      count +
+      Object.values(section.controls).filter((control) => control.type === type)
+        .length,
+    0,
+  );
+}
+
+function shouldCommitTextControlOnBlur(control: ToolcraftControlSchema): boolean {
+  return (
+    control.commitMode === "setting" ||
+    Boolean(getToolcraftCanvasSizeTargetDimension(control.target))
+  );
+}
+
+function isColorFieldControl(control: ToolcraftControlSchema | undefined): boolean {
+  return control?.type === "color" || control?.type === "colorOpacity";
+}
+
+function isColorOnlySection(entries: readonly ControlEntry[]): boolean {
+  return entries.length > 0 && entries.every(([, control]) => isColorFieldControl(control));
+}
+
+function getRenderedControlsSectionTitle(
+  section: ToolcraftControlSectionSchema,
+): ToolcraftControlSectionSchema["title"] {
+  return shouldHideRuntimeControlsSectionTitle(section) ? undefined : section.title;
+}
+
+function shouldHideRuntimeControlsSectionTitle(
+  section: ToolcraftControlSectionSchema,
+): boolean {
+  return isRuntimeSetupSection(section) || isStickyFooterActionSection(section);
+}
+
+function isRuntimeSetupSection(section: ToolcraftControlSectionSchema): boolean {
+  if (section.title !== "Setup") {
+    return false;
+  }
+
+  return Object.values(section.controls).some(
+    (control) =>
+      control.type === "settingsTransfer" ||
+      control.target === "canvas.size.width" ||
+      control.target === "canvas.size.height",
+  );
+}
+
+function isStickyFooterActionSection(section: ToolcraftControlSectionSchema): boolean {
+  return (
+    section.actionGroup !== undefined &&
+    Object.values(section.controls).some((control) => control.type === "panelActions")
+  );
+}
+
+function getControlsPanelSectionCollapseKey({
+  entries,
+  section,
+  sectionIndex,
+}: {
+  entries: readonly ControlEntry[];
+  section: ToolcraftControlSectionSchema;
+  sectionIndex: number;
+}): string {
+  const targets = entries.map(([id, control]) => `${id}:${control.target}`).join("|");
+
+  return `${section.title ?? "section"}:${sectionIndex}:${targets}`;
+}
+
+function hashStorageKeyPart(value: string): string {
+  let hash = 2166136261;
+
+  for (let index = 0; index < value.length; index += 1) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+
+  return (hash >>> 0).toString(36);
+}
+
+function getControlsPanelSectionCollapseStorageKey(
+  schema: ResolvedToolcraftAppSchema,
+): string | null {
+  const controlsPanel = schema.panels.controls;
+
+  if (!controlsPanel) {
+    return null;
+  }
+
+  const appIdentity =
+    schema.persistence.storage === "localStorage"
+      ? `persistence:${schema.persistence.key}:v${schema.persistence.version}`
+      : JSON.stringify({
+          sections: controlsPanel.sections.map((section) => ({
+            controls: Object.entries(section.controls).map(([id, control]) => ({
+              id,
+              label: control.label,
+              target: control.target,
+              type: control.type,
+            })),
+            title: section.title,
+          })),
+          title: controlsPanel.title,
+        });
+
+  return `toolcraft:ui:controls-panel-sections:${hashStorageKeyPart(appIdentity)}:v${controlsPanelSectionCollapseStorageVersion}`;
+}
+
+function readControlsPanelCollapsedSections(
+  storageKey: string | null,
+): Record<string, boolean> {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+
+  try {
+    const rawValue = readToolcraftLocalStorageValue(storageKey);
+
+    if (!rawValue) {
+      return {};
+    }
+
+    const payload: unknown = JSON.parse(rawValue);
+
+    if (
+      !payload ||
+      typeof payload !== "object" ||
+      !("version" in payload) ||
+      payload.version !== controlsPanelSectionCollapseStorageVersion ||
+      !("collapsed" in payload) ||
+      !Array.isArray(payload.collapsed)
+    ) {
+      return {};
+    }
+
+    return Object.fromEntries(
+      payload.collapsed
+        .filter((item): item is string => typeof item === "string" && item.length > 0)
+        .map((item) => [item, true]),
+    );
+  } catch {
+    return {};
+  }
+}
+
+function writeControlsPanelCollapsedSections(
+  storageKey: string | null,
+  collapsedSectionByKey: Record<string, boolean>,
+): void {
+  if (!storageKey || typeof window === "undefined") {
+    return;
+  }
+
+  const collapsed = Object.entries(collapsedSectionByKey)
+    .filter(([, collapsedValue]) => collapsedValue)
+    .map(([key]) => key);
+
+  try {
+    if (collapsed.length === 0) {
+      removeToolcraftLocalStorageValue(storageKey);
+      return;
+    }
+
+    window.localStorage.setItem(
+      storageKey,
+      JSON.stringify({
+        collapsed,
+        version: controlsPanelSectionCollapseStorageVersion,
+      }),
+    );
+  } catch {
+    // UI preferences are best-effort; panel interaction stays authoritative.
+  }
+}
+
+function shouldShowColorFieldLabel({
+  control,
+  sectionHasOnlyColorFields,
+}: {
+  control: ToolcraftControlSchema;
+  sectionHasOnlyColorFields: boolean;
+}): boolean {
+  return control.label !== false && !sectionHasOnlyColorFields;
+}
+
+function hasColorOpacityControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) => controlsById[controlId]?.type === "colorOpacity",
+  );
+}
+
+function hasSliderControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) =>
+      controlsById[controlId]?.type === "slider" ||
+      controlsById[controlId]?.type === "rangeSlider",
+  );
+}
+
+function hasSectionedCompoundControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some((controlId) => {
+    const control = controlsById[controlId];
+
+    return control ? shouldRenderCompoundControlSectionDivider(control) : false;
+  });
+}
+
+const maxInlineSwitchLabelLength = 16;
+const maxInlineSwitchLabelWordCount = 2;
+
+function isInlineSwitchLabelSafe(
+  controlId: string,
+  control: ToolcraftControlSchema,
+): boolean {
+  const label = getControlName(controlId, control.label).trim();
+  const wordCount = label.split(/\s+/u).filter(Boolean).length;
+
+  return label.length <= maxInlineSwitchLabelLength && wordCount <= maxInlineSwitchLabelWordCount;
+}
+
+function hasUnsafeInlineSwitchLabels(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  const switchEntries = layoutGroup.controls
+    .map((controlId) => [controlId, controlsById[controlId]] as const)
+    .filter(
+      (entry): entry is readonly [string, ToolcraftControlSchema] =>
+        Boolean(entry[1]) && entry[1].type === "switch",
+    );
+
+  return (
+    switchEntries.length > 1 &&
+    switchEntries.some(([controlId, control]) => !isInlineSwitchLabelSafe(controlId, control))
+  );
+}
+
+function isBooleanControl(control: ToolcraftControlSchema | undefined): boolean {
+  return control?.type === "checkbox" || control?.type === "switch";
+}
+
+function isToggleParameterLayoutGroup(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  if (layoutGroup.controls.length !== 2) {
+    return false;
+  }
+
+  const controls = layoutGroup.controls.map((controlId) => controlsById[controlId]);
+  const booleanControlCount = controls.filter((control) => isBooleanControl(control)).length;
+  const parameterControlCount = controls.filter((control) => !isBooleanControl(control)).length;
+
+  return booleanControlCount === 1 && parameterControlCount === 1;
+}
+
+function getControlTargetEntityKey(control: ToolcraftControlSchema): string | null {
+  const parts = control.target.split(".");
+
+  if (parts.length < 2) {
+    return null;
+  }
+
+  return parts.slice(0, -1).join(".");
+}
+
+function shouldAutoInlineBooleanPair(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  firstId: string,
+  secondId: string,
+): boolean {
+  const firstControl = controlsById[firstId];
+  const secondControl = controlsById[secondId];
+
+  if (!isBooleanControl(firstControl) || !isBooleanControl(secondControl)) {
+    return false;
+  }
+
+  if (
+    !isInlineSwitchLabelSafe(firstId, firstControl) ||
+    !isInlineSwitchLabelSafe(secondId, secondControl)
+  ) {
+    return false;
+  }
+
+  const firstEntityKey = getControlTargetEntityKey(firstControl);
+  const secondEntityKey = getControlTargetEntityKey(secondControl);
+
+  return firstEntityKey !== null && firstEntityKey === secondEntityKey;
+}
+
+function getAutoInlineBooleanLayoutGroups({
+  controlsById,
+  renderedGroups,
+  reservedControlIds,
+}: {
+  controlsById: Record<string, ToolcraftControlSchema>;
+  renderedGroups: readonly RenderedControlRenderGroup[];
+  reservedControlIds: ReadonlySet<string>;
+}): ToolcraftControlLayoutGroupSchema[] {
+  const layoutGroups: ToolcraftControlLayoutGroupSchema[] = [];
+  let index = 0;
+
+  while (index < renderedGroups.length) {
+    const firstIds = renderedGroups[index]?.ids;
+    const secondIds = renderedGroups[index + 1]?.ids;
+    const firstId = firstIds?.length === 1 ? firstIds[0] : undefined;
+    const secondId = secondIds?.length === 1 ? secondIds[0] : undefined;
+
+    if (
+      firstId &&
+      secondId &&
+      !reservedControlIds.has(firstId) &&
+      !reservedControlIds.has(secondId) &&
+      shouldAutoInlineBooleanPair(controlsById, firstId, secondId)
+    ) {
+      layoutGroups.push({
+        columns: 2,
+        controls: [firstId, secondId],
+        layout: "inline",
+      });
+      index += 2;
+      continue;
+    }
+
+    index += 1;
+  }
+
+  return layoutGroups;
+}
+
+function getControlMarkerCount(
+  control: ToolcraftControlSchema,
+  markerLimit?: number,
+): number | undefined {
+  const markerCount = control.markerCount;
+
+  if (
+    markerLimit &&
+    control.variant === "discrete" &&
+    typeof markerCount === "number" &&
+    markerCount > markerLimit
+  ) {
+    return hiddenDiscreteMarkerCount;
+  }
+
+  return markerCount;
+}
+
+function renderControlLayoutGroups({
+  controlsById,
+  layoutGroups,
+  renderedGroups,
+}: {
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroups?: readonly ToolcraftControlLayoutGroupSchema[];
+  renderedGroups: readonly RenderedControlRenderGroup[];
+}): React.ReactNode[] {
+  if (!layoutGroups?.length) {
+    const autoLayoutGroups = getAutoInlineBooleanLayoutGroups({
+      controlsById,
+      renderedGroups,
+      reservedControlIds: new Set(),
+    });
+
+    if (autoLayoutGroups.length === 0) {
+      return renderedGroups.map((group) => group.node);
+    }
+
+    return renderControlLayoutGroups({
+      controlsById,
+      layoutGroups: autoLayoutGroups,
+      renderedGroups,
+    });
+  }
+
+  const reservedControlIds = new Set(layoutGroups.flatMap((group) => group.controls));
+  const resolvedLayoutGroups = [
+    ...layoutGroups,
+    ...getAutoInlineBooleanLayoutGroups({
+      controlsById,
+      renderedGroups,
+      reservedControlIds,
+    }),
+  ];
+  const layoutGroupByControlId = getInlineLayoutGroupByControlId({
+    controlsById,
+    layoutGroups: resolvedLayoutGroups,
+  });
+
+  const nodes: React.ReactNode[] = [];
+
+  for (const renderedGroup of renderedGroups) {
+    const layoutGroup = renderedGroup.ids
+      .map((id) => layoutGroupByControlId.get(id))
+      .find((group): group is ToolcraftControlLayoutGroupSchema => Boolean(group));
+
+    if (!layoutGroup) {
+      nodes.push(renderedGroup.node);
+      continue;
+    }
+
+    const groupedRenderedControls = renderedGroups.filter((candidate) =>
+      candidate.ids.some((id) => layoutGroup.controls.includes(id)),
+    );
+    const firstGroupedControl = groupedRenderedControls[0];
+
+    if (firstGroupedControl !== renderedGroup) {
+      continue;
+    }
+
+    if (groupedRenderedControls.length < 2) {
+      nodes.push(renderedGroup.node);
+      continue;
+    }
+
+    nodes.push(
+      <ControlInlineGroup
+        columns={layoutGroup.columns ?? 2}
+        kind={
+          isToggleParameterLayoutGroup(controlsById, layoutGroup)
+            ? "toggleParameter"
+            : "default"
+        }
+        key={`layout-group-${layoutGroup.controls.join("-")}`}
+      >
+        {groupedRenderedControls.map((group) => group.node)}
+      </ControlInlineGroup>,
+    );
+  }
+
+  return nodes;
+}
+
+function getInlineLayoutGroupByControlId({
+  controlsById,
+  layoutGroups,
+}: {
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroups?: readonly ToolcraftControlLayoutGroupSchema[];
+}): Map<string, ToolcraftControlLayoutGroupSchema> {
+  const layoutGroupByControlId = new Map<string, ToolcraftControlLayoutGroupSchema>();
+
+  for (const layoutGroup of layoutGroups ?? []) {
+    if (layoutGroup.layout !== "inline") {
+      continue;
+    }
+
+    if (
+      hasColorOpacityControl(controlsById, layoutGroup) ||
+      hasSliderControl(controlsById, layoutGroup) ||
+      hasSectionedCompoundControl(controlsById, layoutGroup) ||
+      hasUnsafeInlineSwitchLabels(controlsById, layoutGroup)
+    ) {
+      continue;
+    }
+
+    for (const controlId of layoutGroup.controls) {
+      layoutGroupByControlId.set(controlId, layoutGroup);
+    }
+  }
+
+  return layoutGroupByControlId;
+}
+
+export function ControlsPanel({
+  className,
+  controlRenderers,
+  framed = true,
+  onPanelAction,
+  onPanelStateChange,
+  panelPlacement,
+  panelState,
+}: ControlsPanelProps): React.JSX.Element | null {
+  const { dispatch, state } = useToolcraft();
+  const nextFooterActionIdRef = React.useRef(0);
+  const [footerActionProgressEntries, setFooterActionProgressEntries] = React.useState<
+    readonly FooterActionProgressEntry[]
+  >([]);
+  const sectionCollapseStorageKey = React.useMemo(
+    () => getControlsPanelSectionCollapseStorageKey(state.schema),
+    [state.schema],
+  );
+  const [collapsedSectionByKey, setCollapsedSectionByKey] = React.useState<
+    Record<string, boolean>
+  >(() => readControlsPanelCollapsedSections(sectionCollapseStorageKey));
+  const stickyFooterProgress = React.useMemo(() => {
+    for (let index = footerActionProgressEntries.length - 1; index >= 0; index -= 1) {
+      const progress = footerActionProgressEntries[index]?.progress;
+
+      if (typeof progress === "number") {
+        return progress;
+      }
+    }
+
+    return null;
+  }, [footerActionProgressEntries]);
+  const controlsPanel = state.schema.panels.controls;
+  const keyframedControlIds = React.useMemo(
+    () => new Set(state.timeline.keyframeGroups.map((group) => group.controlId)),
+    [state.timeline.keyframeGroups],
+  );
+  const keyframeControlsEnabled = Boolean(
+    state.schema.assembly.capabilities.includes("timeline.keyframes") &&
+      state.timeline.expanded,
+  );
+
+  React.useEffect(() => {
+    setCollapsedSectionByKey(readControlsPanelCollapsedSections(sectionCollapseStorageKey));
+  }, [sectionCollapseStorageKey]);
+
+  if (!controlsPanel) {
+    return null;
+  }
+
+  const resolvedControlsPanel = controlsPanel;
+  const placement = panelPlacement ?? (framed ? "frame" : "surface");
+  const lastHistoryPatch = state.history.undo.at(-1);
+  const controlsResetKey =
+    lastHistoryPatch?.label === "Reset controls" ? state.history.undo.length : 0;
+
+  function dispatchCommand(command: ToolcraftCommand): void {
+    dispatch(command);
+  }
+
+  function setControlValue(
+    target: string,
+    value: unknown,
+    label?: string,
+    meta?: ControlChangeMeta,
+  ): void {
+    dispatchCommand({
+      history: meta?.history,
+      historyGroup: meta?.historyGroup,
+      label,
+      target,
+      type: "controls.setValue",
+      value,
+    });
+  }
+
+  function createFooterActionProgressTracker(): {
+    reportProgress: (progress: number) => void;
+    trackResult: (result: PromiseLike<unknown> | void) => void;
+  } {
+    const id = nextFooterActionIdRef.current;
+    nextFooterActionIdRef.current += 1;
+
+    let latestProgress: number | null = null;
+    let isTracked = false;
+
+    function reportProgress(progress: number): void {
+      latestProgress = clampFooterActionProgress(progress);
+
+      if (!isTracked) {
+        return;
+      }
+
+      setFooterActionProgressEntries((entries) =>
+        entries.map((entry) =>
+          entry.id === id ? { ...entry, progress: latestProgress } : entry,
+        ),
+      );
+    }
+
+    function trackResult(result: PromiseLike<unknown> | void): void {
+      if (!isPromiseLike(result)) {
+        return;
+      }
+
+      isTracked = true;
+      setFooterActionProgressEntries((entries) => [
+        ...entries,
+        { id, progress: latestProgress },
+      ]);
+
+      void Promise.resolve(result)
+        .catch((error: unknown) => {
+          console.error("Toolcraft panel action failed.", error);
+        })
+        .finally(() => {
+          setFooterActionProgressEntries((entries) =>
+            entries.filter((entry) => entry.id !== id),
+          );
+        });
+    }
+
+    return { reportProgress, trackResult };
+  }
+
+  function runAction(
+    action: ToolcraftActionSchema,
+    options: { trackFooterPending?: boolean } = {},
+  ): void {
+    const command = action.command ?? (onPanelAction ? null : getActionCommand(action));
+
+    if (command) {
+      dispatchCommand({ type: command });
+      return;
+    }
+
+    const footerActionProgressTracker = options.trackFooterPending
+      ? createFooterActionProgressTracker()
+      : null;
+    const result = onPanelAction?.({
+      action,
+      dispatch,
+      reportProgress:
+        footerActionProgressTracker?.reportProgress ?? noopReportProgress,
+      state,
+    });
+
+    footerActionProgressTracker?.trackResult(result);
+  }
+
+  function getControlValue(control: ToolcraftControlSchema): unknown {
+    const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(control.target);
+
+    return canvasSizeDimension
+      ? state.canvas.size[canvasSizeDimension]
+      : (state.values[control.target] ?? control.defaultValue);
+  }
+
+  function getControlDefaultValueByTarget(target: string): unknown {
+    for (const section of resolvedControlsPanel.sections) {
+      for (const control of Object.values(section.controls)) {
+        if (control.target === target) {
+          return control.defaultValue;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  function getTargetValue(target: string): unknown {
+    const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(target);
+
+    return canvasSizeDimension
+      ? state.canvas.size[canvasSizeDimension]
+      : (state.values[target] ?? getControlDefaultValueByTarget(target));
+  }
+
+  function conditionMatches(condition: ToolcraftControlConditionSchema): boolean {
+    const value = getTargetValue(condition.target);
+    const matches: boolean[] = [];
+
+    if ("equals" in condition) {
+      matches.push(valuesEqual(value, condition.equals));
+    }
+
+    if ("notEquals" in condition) {
+      matches.push(!valuesEqual(value, condition.notEquals));
+    }
+
+    if (Array.isArray(condition.oneOf)) {
+      matches.push(valuesInclude(value, condition.oneOf));
+    }
+
+    if (Array.isArray(condition.notOneOf)) {
+      matches.push(!valuesInclude(value, condition.notOneOf));
+    }
+
+    const greaterThan = compareConditionNumbers(
+      value,
+      condition.greaterThan,
+      (numberValue, expected) => numberValue > expected,
+    );
+    const greaterThanOrEqual = compareConditionNumbers(
+      value,
+      condition.greaterThanOrEqual,
+      (numberValue, expected) => numberValue >= expected,
+    );
+    const lessThan = compareConditionNumbers(
+      value,
+      condition.lessThan,
+      (numberValue, expected) => numberValue < expected,
+    );
+    const lessThanOrEqual = compareConditionNumbers(
+      value,
+      condition.lessThanOrEqual,
+      (numberValue, expected) => numberValue <= expected,
+    );
+
+    for (const match of [
+      greaterThan,
+      greaterThanOrEqual,
+      lessThan,
+      lessThanOrEqual,
+    ]) {
+      if (match !== null) {
+        matches.push(match);
+      }
+    }
+
+    return matches.length > 0 && matches.every(Boolean);
+  }
+
+  function isControlDisabled(control: ToolcraftControlSchema): boolean {
+    if (control.disabled) {
+      return true;
+    }
+
+    return control.disabledWhen ? conditionMatches(control.disabledWhen) : false;
+  }
+
+  function isControlVisible(control: ToolcraftControlSchema): boolean {
+    return control.visibleWhen ? conditionMatches(control.visibleWhen) : true;
+  }
+
+  function isSectionVisible(section: ToolcraftControlSectionSchema): boolean {
+    return section.visibleWhen ? conditionMatches(section.visibleWhen) : true;
+  }
+
+  function getVisibleSectionEntries(
+    section: ToolcraftControlSectionSchema,
+  ): ControlEntry[] {
+    return Object.entries(section.controls).filter(([, control]) =>
+      isControlVisible(control),
+    );
+  }
+
+  function getControlsRecord(
+    entries: readonly ControlEntry[],
+  ): Record<string, ToolcraftControlSchema> {
+    return Object.fromEntries(entries);
+  }
+
+  function getSelectedControlKeyframeTime(controlId: string): number | undefined {
+    const selectedKeyframeId = state.timeline.selectedKeyframeId;
+
+    if (!selectedKeyframeId) {
+      return undefined;
+    }
+
+    const selectedKeyframe = state.timeline.keyframeGroups
+      .find((group) => group.controlId === controlId)
+      ?.keyframes.find((keyframe) => keyframe.id === selectedKeyframeId);
+
+    return selectedKeyframe?.timeSeconds;
+  }
+
+  function maybeUpsertControlKeyframe(
+    control: ToolcraftControlSchema,
+    name: string,
+    value: unknown,
+  ): void {
+    if (
+      !keyframeControlsEnabled ||
+      !keyframedControlIds.has(control.target) ||
+      !canCreateControlKeyframe(control)
+    ) {
+      return;
+    }
+
+    dispatchCommand({
+      controlId: control.target,
+      controlLabel: name,
+      timeSeconds: getSelectedControlKeyframeTime(control.target),
+      type: "timeline.upsertControlKeyframe",
+      value,
+      valueLabel: formatControlValueLabel(control, value),
+    });
+  }
+
+  function getKeyframeLabelAction(
+    control: ToolcraftControlSchema,
+    name: string,
+    value: unknown,
+  ): React.ReactNode {
+    if (!keyframeControlsEnabled || !canCreateControlKeyframe(control)) {
+      return null;
+    }
+
+    return (
+      <ControlKeyframeButton
+        active={keyframedControlIds.has(control.target)}
+        name={name}
+        onClick={() => {
+          dispatchCommand({
+            controlId: control.target,
+            controlLabel: name,
+            type: "timeline.toggleControlKeyframes",
+            value,
+            valueLabel: formatControlValueLabel(control, value),
+          });
+        }}
+      />
+    );
+  }
+
+  function withKeyframeLabelAction({
+    children,
+    control,
+    disableAction = false,
+    labelActionName,
+    name,
+    providerKey,
+    value,
+  }: {
+    children: React.ReactNode;
+    control: ToolcraftControlSchema;
+    disableAction?: boolean;
+    labelActionName?: string;
+    name: string;
+    providerKey: string;
+    value: unknown;
+  }): React.ReactNode {
+    if (disableAction) {
+      return children;
+    }
+
+    const actionName = labelActionName ?? name;
+    const action = getKeyframeLabelAction(control, actionName, value);
+
+    if (!action) {
+      return children;
+    }
+
+    return (
+      <ControlFieldLabelActionProvider
+        action={action}
+        key={providerKey}
+        label={actionName}
+      >
+        {children}
+      </ControlFieldLabelActionProvider>
+    );
+  }
+
+  function getControlHelpText(
+    control: ToolcraftControlSchema,
+  ): string | null {
+    const description = control.description?.trim();
+
+    return description || null;
+  }
+
+  function withControlLabelHelp({
+    children,
+    control,
+    label,
+    providerKey,
+  }: {
+    children: React.ReactNode;
+    control: ToolcraftControlSchema;
+    label: string;
+    providerKey: string;
+  }): React.ReactNode {
+    const help = getControlHelpText(control);
+
+    if (!help) {
+      return children;
+    }
+
+    return (
+      <ControlFieldLabelHelpProvider
+        help={help}
+        key={`${providerKey}-help`}
+        label={label}
+      >
+        {children}
+      </ControlFieldLabelHelpProvider>
+    );
+  }
+
+  function getSectionHeaderKeyframeEntry(
+    entries: readonly ControlEntry[],
+    title: React.ReactNode,
+  ): ControlEntry | null {
+    if (typeof title !== "string") {
+      return null;
+    }
+
+    const matchingTitleEntry = entries.find(([id, control]) => {
+      if (control.type === "channelMixer" || control.type === "curves") {
+        return false;
+      }
+
+      const name = getControlName(id, control.label);
+
+      return name === title && canCreateControlKeyframe(control);
+    });
+
+    if (matchingTitleEntry) {
+      return matchingTitleEntry;
+    }
+
+    return null;
+  }
+
+  function getSectionHeaderKeyframeAction(entry: ControlEntry): React.ReactNode {
+    const [id, control] = entry;
+    const name = getControlName(id, control.label);
+
+    return getKeyframeLabelAction(control, name, getControlValue(control));
+  }
+
+  function renderColorGroup(
+    entries: readonly ControlEntry[],
+    headerKeyframeTarget: string | null,
+    sectionHasOnlyColorFields: boolean,
+  ): React.JSX.Element | null {
+    const colorInputs = entries.map(([id, control]) => {
+      const name = getControlName(id, control.label);
+      const value = getControlValue(control);
+      const colorValue = asColorValue(value);
+
+      return {
+        hex: colorValue.hex,
+        name,
+        onValueChange: (nextValue, meta) => {
+          setControlValue(control.target, nextValue, name, meta);
+          maybeUpsertControlKeyframe(control, name, nextValue);
+        },
+        showLabel: shouldShowColorFieldLabel({
+          control,
+          sectionHasOnlyColorFields,
+        }),
+      } satisfies ColorControlInput;
+    });
+    const [firstInput, secondInput] = colorInputs;
+
+    if (!firstInput) {
+      return null;
+    }
+
+    if (!secondInput) {
+      const firstEntry = entries[0];
+      const firstControl = firstEntry?.[1];
+      const firstValue = firstControl ? getControlValue(firstControl) : undefined;
+
+      return firstControl ? (
+        withKeyframeLabelAction({
+          children: (
+            <Color
+              hex={firstInput.hex}
+              key={firstInput.name}
+              name={firstInput.name}
+              onValueChange={firstInput.onValueChange}
+              showLabel={shouldShowColorFieldLabel({
+                control: firstControl,
+                sectionHasOnlyColorFields,
+              })}
+            />
+          ),
+          control: firstControl,
+          disableAction: firstControl.target === headerKeyframeTarget,
+          name: firstInput.name,
+          providerKey: firstInput.name,
+          value: firstValue,
+        }) as React.JSX.Element
+      ) : (
+        <Color
+          hex={firstInput.hex}
+          key={firstInput.name}
+          name={firstInput.name}
+          onValueChange={firstInput.onValueChange}
+          showLabel={firstInput.showLabel}
+        />
+      );
+    }
+
+    return (
+      <Color
+        inputs={[firstInput, secondInput] as ColorControlInputPair}
+        key={`${firstInput.name}-${secondInput.name}`}
+      />
+    );
+  }
+
+  const visibleSections = resolvedControlsPanel.sections
+    .map((section) => ({
+      entries: getVisibleSectionEntries(section),
+      section,
+    }))
+    .filter(({ entries, section }) => isSectionVisible(section) && entries.length > 0);
+  const visibleControlsPanelSections = visibleSections.map(({ entries, section }) => ({
+    ...section,
+    controls: getControlsRecord(entries),
+  }));
+  const vectorControlCount = countControlsByType(visibleControlsPanelSections, "vector");
+  const vectorPadShape = vectorControlCount === 1 ? "square" : "compact";
+
+  const panel = (
+    <Panel
+      className={cn(
+        "shrink-0",
+        placement === "frame" && "max-h-none",
+        className,
+      )}
+      collapsed={panelState?.collapsed}
+      contentTransitionSuppressionKey={
+        keyframeControlsEnabled ? "keyframes" : "plain"
+      }
+      key={controlsResetKey}
+      onCollapsedChange={(collapsed) => onPanelStateChange?.({ collapsed })}
+      onResetControls={() => dispatchCommand({ type: "controls.reset" })}
+      stickyFooterActive={footerActionProgressEntries.length > 0}
+      stickyFooterProgress={stickyFooterProgress}
+      title={resolvedControlsPanel.title}
+    >
+      {visibleSections.map(({ entries, section }, sectionIndex) => {
+        const visibleControls = getControlsRecord(entries);
+        const sectionHasOnlyColorFields = isColorOnlySection(entries);
+        const renderedSectionTitle = getRenderedControlsSectionTitle(section);
+        const sectionSpacing = isRuntimeSetupSection(section) ? "technical" : "default";
+        const sectionCollapseKey = getControlsPanelSectionCollapseKey({
+          entries,
+          section,
+          sectionIndex,
+        });
+        const isSectionCollapsible = renderedSectionTitle !== undefined;
+        const isSectionCollapsed =
+          isSectionCollapsible && collapsedSectionByKey[sectionCollapseKey] === true;
+        const headerKeyframeEntry = getSectionHeaderKeyframeEntry(entries, section.title);
+        const headerKeyframeTarget = headerKeyframeEntry?.[1].target ?? null;
+        const inlineLayoutGroupByControlId = getInlineLayoutGroupByControlId({
+          controlsById: visibleControls,
+          layoutGroups: section.layoutGroups,
+        });
+
+        return (
+          <PanelSection
+            action={
+              headerKeyframeEntry
+                ? getSectionHeaderKeyframeAction(headerKeyframeEntry)
+                : undefined
+            }
+            actionGroup={section.actionGroup}
+            allowCompoundDividers={entries.length > 1}
+            collapsed={isSectionCollapsed}
+            collapsible={isSectionCollapsible}
+            key={`${section.title ?? "section"}-${sectionIndex}`}
+            onCollapsedChange={(collapsed) => {
+              setCollapsedSectionByKey((current) => {
+                const next = {
+                  ...current,
+                  [sectionCollapseKey]: collapsed,
+                };
+
+                writeControlsPanelCollapsedSections(sectionCollapseStorageKey, next);
+
+                return next;
+              });
+            }}
+            spacing={sectionSpacing}
+            title={renderedSectionTitle}
+          >
+            {renderControlLayoutGroups({
+              controlsById: visibleControls,
+              layoutGroups: section.layoutGroups,
+              renderedGroups: getControlRenderGroups(entries).map((group) => {
+                const ids = getControlRenderGroupIds(group);
+
+                if (group.kind === "colorGroup") {
+                  return {
+                    ids,
+                    node: renderColorGroup(
+                      group.entries,
+                      headerKeyframeTarget,
+                      sectionHasOnlyColorFields,
+                    ),
+                  };
+                }
+
+                const [id, rawControl] = group.entry;
+                const isInInlineLayoutGroup = inlineLayoutGroupByControlId.has(id);
+                const disabled = isControlDisabled(rawControl);
+                const control =
+                  disabled === Boolean(rawControl.disabled)
+                    ? rawControl
+                    : { ...rawControl, disabled };
+                const name = getControlName(id, control.label);
+                const value = getControlValue(control);
+                const usesHeaderKeyframeAction = control.target === headerKeyframeTarget;
+                const commitWithLabel =
+                  (label: string) =>
+                  (nextValue: unknown, meta?: ControlChangeMeta): void => {
+                    setControlValue(control.target, nextValue, label, meta);
+                    maybeUpsertControlKeyframe(control, label, nextValue);
+                  };
+                const commit = commitWithLabel(name);
+                const node = (() => {
+                  switch (control.type) {
+              case "actions": {
+                const actions = asActionSchemas(control.actions);
+
+                return (
+                  <Actions
+                    actions={actions.map((action) => ({
+                      icon: action.icon,
+                      label: action.label,
+                      value: action.value,
+                    }))}
+                    key={id}
+                    name={name}
+                    onAction={(actionValue) => {
+                      const action = actions.find((item) => item.value === actionValue);
+
+                      if (action) {
+                        runAction(action);
+                      }
+                    }}
+                    showLabel={control.label !== false}
+                  />
+                );
+              }
+
+              case "anchorGrid":
+                return withKeyframeLabelAction({
+                  children: (
+                    <AnchorGrid
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      value={
+                        asString(value, "center") as React.ComponentProps<
+                          typeof AnchorGrid
+                        >["value"]
+                      }
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "channelMixer": {
+                const channelMixerName = name;
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <ChannelMixer
+                      key={id}
+                      name={channelMixerName}
+                      onValueChange={(nextValue) =>
+                        commitWithLabel(channelMixerName)(nextValue.values)
+                      }
+                      values={
+                        isRecord(value) ? (value as ChannelMixerValues) : defaultChannelMixerValues
+                      }
+                    />
+                  ),
+                  control,
+                  disableAction: false,
+                  labelActionName: channelMixerName,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+              }
+
+              case "checkbox":
+                return (
+                  <Checkbox
+                    checked={asBoolean(value)}
+                    key={id}
+                    name={name}
+                    onCheckedChange={commit}
+                    showLabel={control.label !== false}
+                  />
+                );
+
+              case "code":
+                return withKeyframeLabelAction({
+                  children: (
+                    <CodeTextarea
+                      defaultValue={asString(control.defaultValue, asString(value))}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      value={asString(value)}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "color": {
+                const colorValue = asColorValue(value);
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <Color
+                      hex={colorValue.hex}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      showLabel={shouldShowColorFieldLabel({
+                        control,
+                        sectionHasOnlyColorFields,
+                      })}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+              }
+
+              case "colorOpacity": {
+                const colorOpacityValue = asColorOpacityValue(value);
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <ColorOpacity
+                      hex={colorOpacityValue.hex}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      opacity={colorOpacityValue.opacity}
+                      showLabel={shouldShowColorFieldLabel({
+                        control,
+                        sectionHasOnlyColorFields,
+                      })}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value: colorOpacityValue,
+                });
+              }
+
+              case "curves": {
+                const curvesName = control.label === false ? "Curves" : name;
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <Curves
+                      interpolation={asCurveInterpolation(control.interpolation)}
+                      key={id}
+                      name={curvesName}
+                      onValueChange={commitWithLabel(curvesName)}
+                      variant={control.variant === "single" ? "single" : "rgb"}
+                      {...(isRecord(value) ? value : {})}
+                    />
+                  ),
+                  control,
+                  disableAction: false,
+                  labelActionName: curvesName,
+                  name: curvesName,
+                  providerKey: id,
+                  value,
+                });
+              }
+
+              case "fileDrop": {
+                const previewMediaAsset = state.schema.panels.layers
+                  ? undefined
+                  : state.mediaAssets[0];
+
+                return (
+                  <FileDrop
+                    accept={control.accept ?? "PNG, JPEG, GIF, SVG, WebP"}
+                    key={id}
+                    onClear={
+                      previewMediaAsset
+                        ? () => {
+                            dispatchCommand({
+                              mediaId: previewMediaAsset.id,
+                              type: "media.delete",
+                            });
+                          }
+                        : undefined
+                    }
+                    onFileSelect={(file) => {
+                      void readImportedImageFile(file, state.canvas.size).then((importedImage) => {
+                        if (!importedImage) {
+                          return;
+                        }
+
+                        dispatchCommand({
+                          asset: {
+                            dataUrl: importedImage.dataUrl,
+                            fileName: file.name,
+                            mimeType: file.type || "image/*",
+                            position: { x: 0, y: 0 },
+                            size: importedImage.size,
+                          },
+                          type: "media.import",
+                        });
+                      });
+                    }}
+                    preview={
+                      previewMediaAsset
+                        ? {
+                            alt: previewMediaAsset.fileName,
+                            size: previewMediaAsset.size,
+                            src: previewMediaAsset.dataUrl,
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              }
+
+              case "gradient": {
+                const gradientValue = asGradientValue(value);
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <Gradient
+                      angle={gradientValue.angle}
+                      gradientType={gradientValue.gradientType}
+                      key={id}
+                      onValueChange={commit}
+                      stops={gradientValue.stops}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+              }
+
+              case "fontPicker": {
+                const fontPickerValue = asFontPickerValue(value);
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <FontPicker
+                      defaultValue={asFontPickerValue(control.defaultValue)}
+                      disabled={control.disabled}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      value={fontPickerValue}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value: fontPickerValue,
+                });
+              }
+
+              case "imagePicker":
+                return (
+                  <ImagePicker
+                    items={control.items as readonly ImagePickerItem[] | undefined}
+                    key={id}
+                    name={name}
+                    onValueChange={commit}
+                    value={asString(value, control.items?.[0]?.value ?? "")}
+                  />
+                );
+
+              case "palette":
+                return withKeyframeLabelAction({
+                  children: (
+                    <Palette
+                      defaultValue={
+                        isRecord(control.defaultValue)
+                          ? (control.defaultValue as React.ComponentProps<
+                              typeof Palette
+                            >["defaultValue"])
+                          : undefined
+                      }
+                      key={id}
+                      onCommit={(nextValue) => commit(nextValue)}
+                      value={
+                        isRecord(value)
+                          ? (value as React.ComponentProps<typeof Palette>["value"])
+                          : undefined
+                      }
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "panelActions": {
+                const actions = asActionSchemas(control.actions);
+
+                return (
+                  <PanelActions
+                    actions={actions.map((action) => ({
+                      icon: action.icon,
+                      name: getActionLabel(action),
+                      value: action.value,
+                      variant: getPanelActionButtonVariant(action.variant),
+                    }))}
+                    key={id}
+                    onAction={(actionValue) => {
+                      const action = actions.find((item) => item.value === actionValue);
+
+                      if (action) {
+                        runAction(action, { trackFooterPending: true });
+                      }
+                    }}
+                  />
+                );
+              }
+
+              case "rangeInput": {
+                const rangeValue = asRangeInputValue(value);
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <RangeInput
+                      defaultValue={asRangeInputValue(control.defaultValue)}
+                      end={rangeValue.end}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      start={rangeValue.start}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+              }
+
+              case "rangeSlider":
+                return withKeyframeLabelAction({
+                  children: (
+                    <RangeSlider
+                      baseValue={asNumberArray(control.defaultValue, [])}
+                      disabled={control.disabled}
+                      markerCount={getControlMarkerCount(control)}
+                      max={control.max ?? 100}
+                      min={control.min ?? 0}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      step={control.step ?? 0.1}
+                      unit={control.unit}
+                      value={asNumberArray(value, [control.min ?? 0, control.max ?? 100])}
+                      valueLabel={control.valueLabel}
+                      variant={
+                        control.variant === "discrete" ? "discrete" : "continuous"
+                      }
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "segmented":
+                return withKeyframeLabelAction({
+                  children: (
+                    <Segmented
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      options={control.options ?? []}
+                      value={asString(value, control.options?.[0]?.value ?? "")}
+                      variant={control.variant === "dots" ? "dots" : "default"}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "select":
+                return (
+                  <Select
+                    key={id}
+                    layout={isInInlineLayoutGroup ? "stacked" : undefined}
+                    name={name}
+                    onValueChange={commit}
+                    options={control.options ?? []}
+                    value={asString(value, control.options?.[0]?.value ?? "")}
+                  />
+                );
+
+              case "settingsTransfer":
+                return (
+                  <PanelActions
+                    actions={[
+                      {
+                        icon: "upload-simple",
+                        name: "Export Settings",
+                        onClick: () => downloadToolcraftSettings(state),
+                        variant: "outline",
+                      },
+                      {
+                        icon: "download-simple",
+                        name: "Import Settings",
+                        onClick: () => {
+                          void importToolcraftSettings({ dispatch, state });
+                        },
+                        variant: "outline",
+                      },
+                    ]}
+                    key={id}
+                    columns={2}
+                  />
+                );
+
+              case "slider":
+                return withKeyframeLabelAction({
+                  children: (
+                    <Slider
+                      baseValue={asNumber(control.defaultValue, control.min ?? 0)}
+                      disabled={control.disabled}
+                      key={id}
+                      markerCount={getControlMarkerCount(control)}
+                      max={control.max ?? 100}
+                      min={control.min ?? 0}
+                      name={name}
+                      onValueChange={commit}
+                      step={control.step ?? 1}
+                      unit={control.unit}
+                      value={asNumber(
+                        value,
+                        asNumber(control.defaultValue, control.min ?? 0),
+                      )}
+                      valueLabel={control.valueLabel}
+                      variant={
+                        control.variant === "discrete" ? "discrete" : "continuous"
+                      }
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "switch":
+                return (
+                  <Switch
+                    checked={asBoolean(value)}
+                    key={id}
+                    name={name}
+                    onCheckedChange={commit}
+                    showLabel={control.label !== false}
+                  />
+                );
+
+              case "text":
+                return withKeyframeLabelAction({
+                  children: (
+                    <TextInput
+                      commitOnBlur={shouldCommitTextControlOnBlur(control)}
+                      defaultValue={asString(control.defaultValue, asString(value))}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      value={asString(value)}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+
+              case "vector": {
+                const vectorValue = asVectorValue(value);
+
+                return withKeyframeLabelAction({
+                  children: (
+                    <Vector
+                      defaultValue={asVectorValue(control.defaultValue)}
+                      key={id}
+                      name={name}
+                      onValueChange={commit}
+                      padShape={vectorPadShape}
+                      padVariant={asVectorPadVariant(control.variant)}
+                      x={vectorValue.x}
+                      xLabel={control.xLabel}
+                      y={vectorValue.y}
+                      yLabel={control.yLabel}
+                    />
+                  ),
+                  control,
+                  disableAction: usesHeaderKeyframeAction,
+                  name,
+                  providerKey: id,
+                  value,
+                });
+              }
+
+                  default: {
+                    const CustomControl = controlRenderers?.[control.type];
+
+                    if (!CustomControl) {
+                      return null;
+                    }
+
+                    return withKeyframeLabelAction({
+                      children: (
+                        <React.Fragment key={id}>
+                          {CustomControl({
+                            control,
+                            controlId: id,
+                            dispatch,
+                            keyframeAction: getKeyframeLabelAction(control, name, value),
+                            name,
+                            setValue: commit,
+                            state,
+                            value,
+                          })}
+                        </React.Fragment>
+                      ),
+                      control,
+                      disableAction: usesHeaderKeyframeAction,
+                      name,
+                      providerKey: id,
+                      value,
+                    });
+                  }
+                  }
+                })();
+
+                return {
+                  ids,
+                  node: withCompoundControlSectionDivider({
+                    children: withControlLabelHelp({
+                      children: node,
+                      control,
+                      label: name,
+                      providerKey: id,
+                    }),
+                    control,
+                  }),
+                };
+              }),
+            })}
+          </PanelSection>
+        );
+      })}
+    </Panel>
+  );
+
+  if (placement === "surface") {
+    return panel;
+  }
+
+  return (
+    <PanelContainer
+      onPanelStateChange={onPanelStateChange}
+      panelState={panelState}
+      panelType="controls"
+      placement={placement}
+    >
+      {panel}
+    </PanelContainer>
+  );
+}