@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/react/controls-panel/__tests__/controls-panel.font-picker.test.tsx

@@ -0,0 +1,302 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+  waitFor,
+} from "../testing/controls-panel-test-utils";
+
+function renderFontPickerControl() {
+  const schema = defineToolcraft({
+    canvas: { enabled: true },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              font: {
+                defaultValue: {
+                  fontId: "inter",
+                  fontSize: 16,
+                  fontWeight: "400",
+                  letterSpacing: "normal",
+                  lineHeight: "normal",
+                  opacity: 100,
+                  textCase: "uppercase",
+                },
+                label: "Font",
+                target: "typography.font",
+                type: "fontPicker",
+              },
+            },
+            layout: "standalone",
+            title: "Typography",
+          },
+        ],
+        title: "Generation Controls",
+      },
+    },
+  });
+
+  return renderControlsPanelWithSchema(schema);
+}
+
+function openFontPicker() {
+  fireEvent.click(screen.getByRole("button", { name: "Select Font" }));
+}
+
+function getFontValue() {
+  return JSON.parse(screen.getByTestId("font-value").textContent ?? "{}");
+}
+
+function nextAnimationFrame() {
+  return new Promise<void>((resolve) => {
+    window.requestAnimationFrame(() => resolve());
+  });
+}
+
+describe("ControlsPanel font picker controls", () => {
+  it("renders font picker as one compound popup control shell", () => {
+    renderFontPickerControl();
+
+    expect(screen.getByText("Case")).toBeTruthy();
+    expect(screen.getByRole("combobox", { name: "Text case" }).textContent).toContain(
+      "Uppercase",
+    );
+    const fontControlItem = screen
+      .getByText("Weight")
+      .closest("[data-control-item-compound-context]");
+    expect(fontControlItem).toBeNull();
+
+    openFontPicker();
+
+    const triggerValue = document.querySelector<HTMLElement>(
+      '[data-slot="font-picker-trigger-value"]',
+    );
+    const trigger = triggerValue?.closest<HTMLElement>('[data-slot="select-trigger"]');
+    expect(trigger).toBeTruthy();
+    expect(trigger?.getAttribute("data-variant")).toBe("default");
+    expect(trigger?.getAttribute("data-size")).toBe("default");
+    expect(trigger?.className).toContain("h-7");
+    expect(trigger?.className).not.toContain("h-9");
+    expect(triggerValue?.style.fontFamily).toContain("Inter");
+    expect(triggerValue?.style.fontWeight).toBe("400");
+    expect(screen.getByText("Weight")).toBeTruthy();
+    const familyWeightRow = document.querySelector<HTMLElement>(
+      '[data-slot="font-picker-family-weight-row"]',
+    );
+    expect(familyWeightRow?.className).toContain("grid-cols-2");
+    expect(familyWeightRow?.className).not.toContain("max-content");
+    expect(screen.getByText("Size")).toBeTruthy();
+    expect((screen.getByLabelText("Font size") as HTMLInputElement).value).toBe("16");
+    expect(screen.getByText("Color")).toBeTruthy();
+    expect(screen.getByLabelText("Color opacity")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Find font")).toBeTruthy();
+    expect(screen.getByText("Sans").closest("button")?.getAttribute("data-state")).toBe(
+      "active",
+    );
+    expect(screen.getByLabelText("Letter spacing")).toBeTruthy();
+    expect(screen.getByLabelText("Line height")).toBeTruthy();
+    const footerLabels = document.querySelectorAll<HTMLElement>(
+      '[data-slot="font-picker-footer-label"]',
+    );
+    expect(footerLabels).toHaveLength(0);
+    const footerIcons = document.querySelectorAll<HTMLElement>(
+      '[data-slot="font-picker-footer-icon"]',
+    );
+    expect(footerIcons).toHaveLength(2);
+    expect(footerIcons[0]?.getAttribute("class")).toContain("size-4");
+    expect(footerIcons[1]?.getAttribute("class")).toContain("size-4");
+    const footerSliders = document.querySelectorAll<HTMLElement>(
+      '[data-slot="font-picker-footer-slider"] [data-slot="slider"]',
+    );
+    expect(footerSliders).toHaveLength(2);
+    expect(footerSliders[0]?.getAttribute("data-variant")).toBe("discrete");
+    expect(footerSliders[1]?.getAttribute("data-variant")).toBe("discrete");
+    expect(footerSliders[0]?.className).toContain("[&_[data-slot=slider-range]]:transition-none");
+    expect(footerSliders[0]?.className).toContain("[&_[data-slot=slider-thumb]]:transition-none");
+    expect(footerSliders[1]?.className).toContain("[&_[data-slot=slider-range]]:transition-none");
+    expect(footerSliders[1]?.className).toContain("[&_[data-slot=slider-thumb]]:transition-none");
+    expect(
+      footerSliders[0]?.querySelectorAll('[data-slot="slider-marker"]'),
+    ).toHaveLength(4);
+    expect(
+      footerSliders[1]?.querySelectorAll('[data-slot="slider-marker"]'),
+    ).toHaveLength(4);
+    const lineHeightMarkerOffsets = Array.from(
+      footerSliders[1]?.querySelectorAll<HTMLElement>('[data-slot="slider-marker"]') ??
+        [],
+    ).map((marker) => Number.parseFloat(marker.style.left));
+    expect(lineHeightMarkerOffsets).toHaveLength(4);
+    expect(lineHeightMarkerOffsets[0]).toBeCloseTo(20);
+    expect(lineHeightMarkerOffsets[1]).toBeCloseTo(40);
+    expect(lineHeightMarkerOffsets[2]).toBeCloseTo(60);
+    expect(lineHeightMarkerOffsets[3]).toBeCloseTo(80);
+  });
+
+  it("commits font family, spacing, line-height, and size values", async () => {
+    renderFontPickerControl();
+    openFontPicker();
+
+    const triggerValue = document.querySelector<HTMLElement>(
+      '[data-slot="font-picker-trigger-value"]',
+    );
+
+    fireEvent.click(screen.getByText("Roboto").closest("button") as HTMLButtonElement);
+    fireEvent.change(screen.getByLabelText("Letter spacing"), {
+      target: { value: "4" },
+    });
+    fireEvent.change(screen.getByLabelText("Line height"), {
+      target: { value: "5" },
+    });
+
+    await waitFor(() => {
+      expect(getFontValue()).toEqual({
+        color: "#FFFFFF",
+        fontId: "roboto",
+        fontSize: 16,
+        fontWeight: "400",
+        letterSpacing: "wider",
+        lineHeight: "loose",
+        opacity: 100,
+        textCase: "uppercase",
+      });
+    });
+    expect(triggerValue?.style.fontFamily).toContain("Roboto");
+
+    fireEvent.change(screen.getByLabelText("Line height"), {
+      target: { value: "4.4" },
+    });
+
+    await waitFor(() => {
+      expect(getFontValue()).toEqual({
+        color: "#FFFFFF",
+        fontId: "roboto",
+        fontSize: 16,
+        fontWeight: "400",
+        letterSpacing: "wider",
+        lineHeight: "relaxed",
+        opacity: 100,
+        textCase: "uppercase",
+      });
+    });
+
+    const fontSizeInput = screen.getByLabelText("Font size") as HTMLInputElement;
+
+    fireEvent.change(fontSizeInput, {
+      target: { value: "24" },
+    });
+    expect(getFontValue()).toEqual({
+      color: "#FFFFFF",
+      fontId: "roboto",
+      fontSize: 16,
+      fontWeight: "400",
+      letterSpacing: "wider",
+      lineHeight: "relaxed",
+      opacity: 100,
+      textCase: "uppercase",
+    });
+
+    fireEvent.blur(fontSizeInput);
+
+    await waitFor(() => {
+      expect(getFontValue()).toEqual({
+        color: "#FFFFFF",
+        fontId: "roboto",
+        fontSize: 24,
+        fontWeight: "400",
+        letterSpacing: "wider",
+        lineHeight: "relaxed",
+        opacity: 100,
+        textCase: "uppercase",
+      });
+    });
+
+    fireEvent.change(fontSizeInput, {
+      target: { value: "768" },
+    });
+    fireEvent.blur(fontSizeInput);
+
+    await waitFor(() => {
+      expect(getFontValue()).toEqual({
+        color: "#FFFFFF",
+        fontId: "roboto",
+        fontSize: 768,
+        fontWeight: "400",
+        letterSpacing: "wider",
+        lineHeight: "relaxed",
+        opacity: 100,
+        textCase: "uppercase",
+      });
+    });
+  });
+
+  it("commits color edits and resets empty font size to the default", async () => {
+    renderFontPickerControl();
+    openFontPicker();
+
+    const colorHexInput = screen.getByLabelText("Color hex") as HTMLInputElement;
+    fireEvent.change(colorHexInput, {
+      target: { value: "#C1FF00" },
+    });
+    fireEvent.blur(colorHexInput);
+    const colorOpacityInput = screen.getByLabelText("Color opacity") as HTMLInputElement;
+    fireEvent.change(colorOpacityInput, {
+      target: { value: "82" },
+    });
+    fireEvent.blur(colorOpacityInput);
+
+    await waitFor(() => {
+      expect(getFontValue()).toEqual({
+        color: "#C1FF00",
+        fontId: "inter",
+        fontSize: 16,
+        fontWeight: "400",
+        letterSpacing: "normal",
+        lineHeight: "normal",
+        opacity: 82,
+        textCase: "uppercase",
+      });
+    });
+
+    const fontSizeInput = screen.getByLabelText("Font size") as HTMLInputElement;
+
+    fireEvent.change(fontSizeInput, {
+      target: { value: "" },
+    });
+    expect(fontSizeInput.value).toBe("");
+
+    fireEvent.blur(fontSizeInput);
+    expect((screen.getByLabelText("Font size") as HTMLInputElement).value).toBe("16");
+  });
+
+  it("virtualizes the font list with the shared Toolcraft scrollbar", async () => {
+    renderFontPickerControl();
+    openFontPicker();
+
+    const listViewport = document.querySelector<HTMLElement>(
+      '[data-slot="font-picker-list-viewport"]',
+    );
+    expect(listViewport).toBeTruthy();
+    expect(listViewport?.className).toContain("toolcraft-scrollbar");
+    expect(listViewport?.className).not.toContain("no-scrollbar");
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+
+    Object.defineProperty(listViewport, "clientHeight", {
+      configurable: true,
+      value: 240,
+    });
+    listViewport!.scrollTop = 4800;
+    fireEvent.scroll(listViewport!);
+    await nextAnimationFrame();
+
+    await waitFor(() => {
+      const firstVirtualFont = document.querySelector<HTMLElement>(
+        '[data-slot="font-picker-list"] button span',
+      );
+      expect(firstVirtualFont?.textContent).not.toBe("Inter");
+    });
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.footer-actions.test.tsx

@@ -0,0 +1,401 @@
+import { describe, expect, it } from "vitest";
+import {
+  act,
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanel,
+  renderControlsPanelWithSchema,
+  screen,
+  vi,
+  waitFor
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel footer actions and settings transfer", () => {
+  it("routes footer panel actions through the command bus", () => {
+    renderControlsPanel();
+
+    fireEvent.change(screen.getByDisplayValue("Initial prompt"), {
+      target: { value: "Draft" },
+    });
+    fireEvent.blur(screen.getByDisplayValue("Draft"));
+    expect(screen.getByTestId("prompt-value").textContent).toBe("Draft");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+
+    expect(screen.getByTestId("prompt-value").textContent).toBe("Initial prompt");
+  });
+
+  it("routes app-specific footer panel actions through onPanelAction", () => {
+    const handledActions: string[] = [];
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      icon: "download",
+                      label: "Download image",
+                      value: "download",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, {
+      onPanelAction: ({ action, state }) => {
+        handledActions.push(`${action.value}:${state.schema.panels.controls?.title}`);
+      },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Download image" }));
+
+    expect(handledActions).toEqual(["download:Generation Controls"]);
+  });
+
+  it("renders runtime settings transfer as a headerless body section instead of sticky footer actions", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                prompt: {
+                  defaultValue: "Initial prompt",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Prompt",
+            },
+            {
+              actionGroup: "secondary",
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      label: "Export PNG",
+                      value: "export.png",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+      settingsTransfer: true,
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const scrollContent = container.querySelector(
+      '[data-slot="toolcraft-panel-content"]',
+    );
+    const stickyFooter = container.querySelector(
+      '[data-slot="toolcraft-panel-sticky-actions"]',
+    );
+    const firstSection = container.querySelector("section");
+    const firstInlineGroup = firstSection?.querySelector(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
+    );
+
+    const transferButtons = screen
+      .getAllByRole("button", { name: /Settings$/ })
+      .map((button) => button.textContent);
+
+    expect(transferButtons).toEqual(["Export Settings", "Import Settings"]);
+    expect(schema.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(
+      [...container.querySelectorAll('[data-slot="panel-title"]')].map(
+        (title) => title.textContent,
+      ),
+    ).not.toContain("Setup");
+    expect(firstSection?.querySelector('[data-slot="panel-title"]')).toBeNull();
+    expect(firstSection?.querySelector("[data-control-section-collapse-button]")).toBeNull();
+    expect(firstSection?.querySelector('[data-slot="control-section-header"]')).toBeNull();
+    expect(firstSection?.querySelector('[data-slot="panel-section-collapsible-body"]')).toBeNull();
+    expect(firstSection?.getAttribute("data-collapsed")).toBeNull();
+    expect(firstSection?.className).toContain("py-0");
+    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pt-2");
+    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pb-6");
+    expect(firstInlineGroup?.textContent).toContain("Canvas width");
+    expect(firstInlineGroup?.textContent).toContain("Canvas height");
+    expect(firstSection?.textContent).toContain("Aspect ratio");
+    expect(firstSection?.textContent).toContain("Canvas width");
+    expect(firstSection?.textContent).toContain("Canvas height");
+    expect(firstSection?.textContent).toContain("Export Settings");
+    expect(firstSection?.textContent).toContain("Import Settings");
+    expect((firstSection?.textContent ?? "").indexOf("Export Settings")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Import Settings"),
+    );
+    expect((firstSection?.textContent ?? "").indexOf("Import Settings")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Aspect ratio"),
+    );
+    expect((firstSection?.textContent ?? "").indexOf("Aspect ratio")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Canvas width"),
+    );
+    expect(scrollContent?.textContent).toContain("Import Settings");
+    expect(scrollContent?.textContent).toContain("Export Settings");
+    expect(stickyFooter?.textContent).toContain("Export PNG");
+    expect(stickyFooter?.textContent).not.toContain("Import Settings");
+  });
+
+  it("keeps panelActions in the sticky footer even when the schema omits actionGroup", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      command: "controls.reset",
+                      label: "Reset",
+                      value: "reset",
+                      variant: "outline",
+                    },
+                    {
+                      command: "controls.apply",
+                      label: "Apply",
+                      value: "apply",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+                prompt: {
+                  defaultValue: "Initial prompt",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const stickyFooter = container.querySelector(
+      '[data-slot="toolcraft-panel-sticky-actions"]',
+    );
+    const scrollContent = container.querySelector(
+      '[data-slot="toolcraft-panel-content"]',
+    );
+
+    expect(stickyFooter?.textContent).toContain("Reset");
+    expect(stickyFooter?.textContent).toContain("Apply");
+    expect(stickyFooter?.className).toContain("before:h-px");
+    expect(stickyFooter?.className).toContain("var(--accent)");
+    expect(stickyFooter?.className).toContain(
+      "before:scale-x-[var(--sticky-footer-progress,1)]",
+    );
+    expect(stickyFooter?.className).toContain("before:opacity-0");
+    expect(stickyFooter?.className).toContain("before:transition-[opacity,transform]");
+    expect(stickyFooter?.className).toContain(
+      "data-[sticky-footer-active=true]:before:opacity-100",
+    );
+    expect(stickyFooter?.getAttribute("data-sticky-footer-active")).toBeNull();
+    expect(stickyFooter?.querySelector('[data-toolcraft-section-actions]')).toBeTruthy();
+    expect(stickyFooter?.querySelector('[data-slot="panel-title"]')).toBeNull();
+    expect(stickyFooter?.querySelector("[data-control-section-collapse-button]")).toBeNull();
+    expect(stickyFooter?.textContent).not.toContain("Export");
+    expect(scrollContent?.textContent).toContain("Prompt");
+    expect(scrollContent?.textContent).not.toContain("ResetApply");
+  });
+
+  it("shows the sticky footer export indicator only while an async panel action is pending", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              actionGroup: "secondary",
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      icon: "download-simple",
+                      label: "Export PNG",
+                      value: "export-png",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+    let resolveAction: (() => void) | undefined;
+    const pendingAction = new Promise<void>((resolve) => {
+      resolveAction = resolve;
+    });
+    let reportActionProgress: ((progress: number) => void) | undefined;
+    const onPanelAction = vi.fn(({ reportProgress }) => {
+      reportActionProgress = reportProgress;
+
+      return pendingAction;
+    });
+    const { container } = renderControlsPanelWithSchema(schema, { onPanelAction });
+    const stickyFooter = container.querySelector(
+      '[data-slot="toolcraft-panel-sticky-actions"]',
+    );
+    const exportPngButton = screen.getByRole("button", { name: "Export PNG" });
+
+    expect(stickyFooter?.getAttribute("data-sticky-footer-active")).toBeNull();
+    expect(exportPngButton.querySelector('[data-icon-name="upload-simple"]')).toBeTruthy();
+
+    fireEvent.click(exportPngButton);
+
+    expect(onPanelAction).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(stickyFooter?.getAttribute("data-sticky-footer-active")).toBe("true");
+    });
+    expect(stickyFooter?.getAttribute("data-sticky-footer-progress")).toBeNull();
+
+    act(() => {
+      reportActionProgress?.(0.25);
+    });
+
+    await waitFor(() => {
+      expect(stickyFooter?.getAttribute("data-sticky-footer-progress")).toBe("0.25");
+      expect(
+        (stickyFooter as HTMLElement | null)?.style.getPropertyValue(
+          "--sticky-footer-progress",
+        ),
+      ).toBe("0.25");
+    });
+
+    act(() => {
+      reportActionProgress?.(2);
+    });
+
+    await waitFor(() => {
+      expect(stickyFooter?.getAttribute("data-sticky-footer-progress")).toBe("1");
+    });
+
+    await act(async () => {
+      resolveAction?.();
+      await pendingAction;
+    });
+
+    await waitFor(() => {
+      expect(stickyFooter?.getAttribute("data-sticky-footer-active")).toBeNull();
+    });
+  });
+
+  it("renders secondary footer actions as secondary buttons", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      label: "Copy PNG",
+                      value: "copy",
+                      variant: "secondary",
+                    },
+                    {
+                      label: "Export PNG",
+                      value: "export",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByRole("button", { name: "Copy PNG" }).getAttribute("data-variant")).toBe(
+      "secondary",
+    );
+    expect(screen.getByRole("button", { name: "Export PNG" }).getAttribute("data-variant")).toBe(
+      "default",
+    );
+  });
+
+  it("spans the final odd footer action across the full action row", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      label: "Copy PNG",
+                      value: "copy",
+                      variant: "secondary",
+                    },
+                    {
+                      label: "Export OG",
+                      value: "export-og",
+                      variant: "secondary",
+                    },
+                    {
+                      label: "Export PNG",
+                      value: "export",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    const exportPngButton = screen.getByRole("button", { name: "Export PNG" });
+
+    expect(exportPngButton.className).toContain("col-span-2");
+  });
+});