@pixel-point/toolcraft 0.0.7 → 0.0.9

package/templates/starter/src/app/starter-performance.test.ts

@@ -138,6 +138,18 @@ function projectDocsIncludeRendererLayerInventory(): boolean {
   );
 }
 
+function projectDocsIncludeRendererPipelineInventory(): boolean {
+  const decisionSources = readProjectDecisionSources();
+
+  return (
+    /Render Pipeline Inventory|rendererPipeline|render pipeline/i.test(decisionSources) &&
+    /pass|passes|cacheKey|cache key|invalidat/i.test(decisionSources) &&
+    /control-drag|viewport-zoom|viewport-drag|media-import|animation-frame|timeline-playback|interaction/i.test(
+      decisionSources,
+    )
+  );
+}
+
 function projectDocsExplainRendererAlternatives(): boolean {
   const decisionSources = readProjectDecisionSources();
 
@@ -198,12 +210,24 @@ function projectDocsIncludeFixedBackgroundDecision(): boolean {
 
 function sourceUsesCpuPixelLoop(): boolean {
   const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+  const cpuPixelMethodCallPattern =
+    /(?:\.(?:createImageData|getImageData|putImageData)|\[\s*["'](?:createImageData|getImageData|putImageData)["']\s*\])\s*\(/;
 
   return (
     /new\s+ImageData\s*\(/.test(appSources) ||
-    /\.createImageData\s*\(/.test(appSources) ||
-    /\.getImageData\s*\(/.test(appSources) ||
-    /\.putImageData\s*\(/.test(appSources)
+    cpuPixelMethodCallPattern.test(appSources)
+  );
+}
+
+function appPerformanceHasRenderPipelinePass(kind: string): boolean {
+  return (starterPerformance.rendererPipeline?.passes ?? []).some(
+    (pass) => pass.kind === kind,
+  );
+}
+
+function appPerformanceHasInteractionInvalidation(interaction: string): boolean {
+  return (starterPerformance.rendererPipeline?.interactionInvalidation ?? []).some(
+    (entry) => entry.interaction === interaction,
   );
 }
 
@@ -345,6 +369,17 @@ describe("Toolcraft template app performance coverage", () => {
     ).toBe(true);
   });
 
+  it("requires custom renderer apps to document the render pipeline inventory", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      projectDocsIncludeRendererPipelineInventory(),
+      "Custom renderer apps must write a Render Pipeline Inventory in their app spec/plan docs before implementation so expensive passes, cache keys, and invalidation rules are deliberate.",
+    ).toBe(true);
+  });
+
   it("requires custom renderer apps to mirror the renderer decision in typed performance config", () => {
     if (!starterPerformance.usesCustomRenderer) {
       return;
@@ -356,6 +391,17 @@ describe("Toolcraft template app performance coverage", () => {
     ).toBeDefined();
   });
 
+  it("requires custom renderer apps to mirror the render pipeline in typed performance config", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      starterPerformance.rendererPipeline,
+      "Custom renderer apps must declare rendererPipeline in app-performance.ts; prose specs and plans are not enough.",
+    ).toBeDefined();
+  });
+
   it("requires custom renderer apps to mirror layer inventory in typed performance config", () => {
     if (!starterPerformance.usesCustomRenderer) {
       return;
@@ -453,7 +499,7 @@ describe("Toolcraft template app performance coverage", () => {
     );
   });
 
-  it("requires pixel-output renderers to use WebGL or WebGPU", () => {
+  it("requires pixel-output renderers to use GPU or measured CPU evidence", () => {
     expect(
       validateToolcraftPerformanceCoverage(starterSchema, {
         rendererStrategy: "canvas-2d",
@@ -464,7 +510,7 @@ describe("Toolcraft template app performance coverage", () => {
       }),
     ).toEqual(
       expect.arrayContaining([
-        'rendererWorkload "pixel-output" must use rendererStrategy "webgl" or "webgpu", received "canvas-2d".',
+        'rendererWorkload "pixel-output" should use rendererStrategy "webgl" or "webgpu", received "canvas-2d". Keeping a CPU renderer requires measured WebGL/WebGPU evidence in rendererTechnique.whyNotAlternativeStrategies or performanceRisks.',
       ]),
     );
   });
@@ -681,6 +727,21 @@ describe("Toolcraft template app performance coverage", () => {
       sourceUsesGpuRenderer(),
       "Procedural pixel renderers must contain an actual WebGL/WebGPU code path, not only declare a GPU strategy.",
     ).toBe(true);
+    expect(
+      appPerformanceHasRenderPipelinePass("pixel-transform"),
+      "Procedural pixel renderers must declare a rendererPipeline pixel-transform pass so caching and invalidation are machine-checkable.",
+    ).toBe(true);
+  });
+
+  it("requires custom renderers to declare high-frequency viewport invalidation", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      appPerformanceHasInteractionInvalidation("viewport-zoom"),
+      "Custom renderer apps must declare rendererPipeline interactionInvalidation for viewport-zoom so zoom can stay responsive without recomputing expensive passes.",
+    ).toBe(true);
   });
 
   it("requires WebGL/WebGPU renderers to keep their pipeline lifecycle outside React render", () => {

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

@@ -90,7 +90,7 @@ export function ControlInlineGroup({
       {...props}
       className={cn(
         "grid min-w-0",
-        kind === "slider" ? "gap-4" : "gap-2",
+        kind === "slider" ? "gap-4" : "gap-x-2.5 gap-y-2",
         kind === "toggleParameter" && "items-end",
         className,
       )}
@@ -229,10 +229,13 @@ export function ControlItem({
 }: {
   allowCompoundDividers?: boolean;
   children: React.ReactNode;
-  compoundDividerPlacement?: "both" | "bottom";
+  compoundDividerPlacement?: "both" | "bottom" | "top";
   flush?: boolean;
 }): React.JSX.Element {
-  const showCompoundTopDivider = compoundDividerPlacement === "both";
+  const showCompoundTopDivider =
+    compoundDividerPlacement === "both" || compoundDividerPlacement === "top";
+  const showCompoundBottomDivider =
+    compoundDividerPlacement === "both" || compoundDividerPlacement === "bottom";
 
   return (
     <div
@@ -240,11 +243,13 @@ export function ControlItem({
         "min-w-0",
         !flush && "px-3",
         allowCompoundDividers &&
+          showCompoundBottomDivider &&
           "has-data-[control-section-divider=compound]:relative has-data-[control-section-divider=compound]:pb-[18px] has-data-[control-section-divider=compound]:after:absolute has-data-[control-section-divider=compound]:after:bottom-0 has-data-[control-section-divider=compound]:after:h-px has-data-[control-section-divider=compound]:after:bg-[color:color-mix(in_oklab,var(--border)_8%,transparent)]",
         allowCompoundDividers &&
           showCompoundTopDivider &&
           "has-data-[control-section-divider=compound]:pt-[18px] has-data-[control-section-divider=compound]:before:absolute has-data-[control-section-divider=compound]:before:top-0 has-data-[control-section-divider=compound]:before:h-px has-data-[control-section-divider=compound]:before:bg-[color:color-mix(in_oklab,var(--border)_8%,transparent)]",
         allowCompoundDividers &&
+          showCompoundBottomDivider &&
           (flush
             ? "has-data-[control-section-divider=compound]:after:inset-x-0"
             : "has-data-[control-section-divider=compound]:after:inset-x-3"),

package/templates/ui/components/controls/actions/actions-control.tsx

@@ -98,11 +98,14 @@ export function ActionsControl({
   onAction,
   showLabel = true,
 }: ActionsControlProps): React.JSX.Element {
+  const hasSingleAction = actions.length === 1;
+
   return (
     <Field
       aria-label={showLabel ? undefined : name}
-      className="h-fit min-w-0 flex-wrap items-center justify-between gap-y-2!"
-      orientation="horizontal"
+      className="h-fit min-w-0 gap-2"
+      data-slot="actions-control"
+      orientation="vertical"
     >
       {showLabel ? (
         <ControlFieldLabel className="min-w-0" textClassName="min-w-0 truncate">
@@ -111,9 +114,11 @@ export function ActionsControl({
       ) : null}
       <div
         className={cn(
-          "flex max-w-full shrink-0 flex-wrap items-center justify-start gap-1.5",
-          showLabel && "ml-auto",
+          "grid max-w-full gap-1.5",
+          hasSingleAction ? "w-1/2 grid-cols-1" : "w-full grid-cols-2",
         )}
+        data-actions-count={actions.length}
+        data-slot="actions-control-buttons"
       >
         {actions.map((action) => {
           const actionContent = getActionContent(action);
@@ -124,6 +129,7 @@ export function ActionsControl({
               aria-label={getActionAriaLabel(action, actionContent)}
               key={actionValue}
               onClick={() => onAction?.(actionValue)}
+              className="w-full"
               size="sm"
               type="button"
               variant="outline"

package/templates/ui/components/controls/code-textarea/code-textarea-control.tsx

@@ -14,12 +14,14 @@ export type CodeTextareaControlProps = {
   defaultValue?: string;
   name: string;
   onValueChange?: ControlValueChangeHandler<string>;
+  showLabel?: boolean;
   value: string;
 };
 
 export function CodeTextareaControl({
   name,
   onValueChange,
+  showLabel = true,
   value,
 }: CodeTextareaControlProps): React.JSX.Element {
   const [currentValue, setCurrentValue] = React.useState(value);
@@ -61,9 +63,11 @@ export function CodeTextareaControl({
 
   return (
     <Field className="min-w-0 gap-2">
-      <div className="flex items-center">
-        <ControlFieldLabel>{name}</ControlFieldLabel>
-      </div>
+      {showLabel ? (
+        <div className="flex items-center">
+          <ControlFieldLabel>{name}</ControlFieldLabel>
+        </div>
+      ) : null}
       <Textarea
         aria-label={name}
         className="max-h-[calc(12lh+12px)] min-h-[84px] overflow-y-auto font-mono"

package/templates/ui/components/controls/color/index.ts

@@ -18,7 +18,10 @@ export {
   type ColorFormatMode,
   type ColorSurfaceModel,
 } from "./style-guide-color-picker-channel-utils";
-export { DEFAULT_COLOR_FORMAT_MODE } from "./style-guide-color-picker";
+export {
+  DEFAULT_COLOR_FORMAT_MODE,
+  StyleGuideColorPicker,
+} from "./style-guide-color-picker";
 export {
   getColorSurfaceSliderConfig,
   getColorSurfaceStyle,

package/templates/ui/components/controls/color/style-guide-color-picker-logic.ts

@@ -459,9 +459,14 @@ export function useHueHandlers({
 
   const handleHuePreviewChange = useCallback(
     (nextHue: number) => {
-      applyOptimisticColor({ h: nextHue, s: latestHsvRef.current.s, v: latestHsvRef.current.v });
+      const nextHex = applyOptimisticColor({
+        h: nextHue,
+        s: latestHsvRef.current.s,
+        v: latestHsvRef.current.v,
+      });
+      emitChange(nextHex);
     },
-    [applyOptimisticColor, latestHsvRef],
+    [applyOptimisticColor, emitChange, latestHsvRef],
   );
 
   const handleHueCommit = useCallback(

package/templates/ui/components/controls/color/style-guide-color-picker.tsx

@@ -170,9 +170,9 @@ function useRgbBlueHandlers({
 
   const handleSliderPreviewChange = useCallback(
     (nextValue: number) => {
-      applyBlueChannel(nextValue);
+      emitChange(applyBlueChannel(nextValue));
     },
-    [applyBlueChannel],
+    [applyBlueChannel, emitChange],
   );
 
   const handleSliderCommit = useCallback(