@pixel-point/toolcraft 0.0.11 → 0.0.13

package/templates/starter/docs/toolcraft/performance.md

@@ -167,7 +167,7 @@ Animation checks should sample enough frames to catch jank. Interaction budgets
 
 Use `app-performance.ts` as the single budget and fixture source. Browser performance tests must call `getToolcraftPerformanceStressValue(appPerformance, scenarioId)` for workload values and `expectToolcraftScenarioPerformanceBudget(..., appPerformance, scenarioId)` for budgets.
 
-Run targeted performance scenarios for Tier 3 performance-sensitive edits when they directly exercise the touched workload, viewport, or export path. The full performance checkpoint prefers the current AI agent's controlled browser. `pnpm verify:perf` is the Playwright fallback suite; it runs `e2e/app-performance.spec.ts` and every `browser perf:` scenario with one worker so budget failures are not hidden or created by unrelated parallel browser tests.
+Run targeted performance scenarios for Tier 3 performance-sensitive edits when they directly exercise the touched workload, viewport, or export path. The default `pnpm test:browser` / `pnpm verify:ui` gate excludes every Playwright test whose name contains `browser perf:`, including the performance audit and budget scenarios. The full performance checkpoint prefers the current AI agent's controlled browser. `pnpm verify:perf` is the Playwright fallback suite; it runs every `browser perf:` scenario with one worker so budget failures are not hidden or created by unrelated parallel browser tests.
 
 Run a full performance checkpoint only when:
 

package/templates/starter/docs/toolcraft/schema-reference.md

@@ -201,7 +201,7 @@ For `slider` and `rangeSlider`, `unit` is a real measurement suffix, not the ent
 
 `slider` and `rangeSlider` are live controls. Dragging must update runtime state and product output while the drag is in progress, not only on pointer release, blur, Apply, or a final commit. Treat a non-live slider as a broken product mapping unless an extreme measured performance ceiling is documented; even then, keep immediate lightweight canvas feedback and refine the heavy output after coalescing/caching.
 
-For `vector`, the default/spatial variant uses `coordinateMode: "screen"` by default: dragging left/up lowers `x` and `y`, so canvas objects move left/up without renderer-side Y inversion. Use `coordinateMode: "cartesian"` only for intentional mathematical Y-up coordinates. Color variants keep their color-axis semantics by default. Vector pad value labels show compact rounded coordinates; raw floating-point tails must never appear in the controls panel. Double-clicking the pad resets both axes to the control default through the normal runtime value update, matching the section header reset; if no default is defined, the fallback is `0,0`. Holding Shift while dragging locks movement to the dominant axis and must not select text or page content.
+For `vector`, the default/spatial variant uses `coordinateMode: "screen"` by default: dragging left/up lowers `x` and `y`, so canvas objects move left/up without renderer-side Y inversion. Use it only for stable user-authored two-axis parameters. Do not expose Vector for current animation state, keyboard movement, pointer movement, physics state, timeline phase, velocity, target pose, current pose, or simulated position/direction just because the internal value has `x` and `y`. Use `coordinateMode: "cartesian"` only for intentional mathematical Y-up coordinates. Color variants keep their color-axis semantics by default. Vector pad value labels show compact rounded coordinates; raw floating-point tails must never appear in the controls panel. Double-clicking the pad resets both axes to the control default through the normal runtime value update, matching the section header reset; if no default is defined, the fallback is `0,0`. Holding Shift while dragging locks movement to the dominant axis and must not select text or page content.
 
 Use `collectionActions` when the product owns a growable/shrinkable item list. `minItems` protects the smallest valid output, `recommendedMaxItems` is only a design recommendation, and `hardMaxItems` is valid only for a real product or technical limit. Adding/removing items must update the runtime array and the renderer/export must consume that same array. Do not pair a count slider with hidden fixed item controls when the user needs to add or remove actual entities. The collection label is on the left and remove/add buttons stay on the right. Homogeneous repeated items do not show visible per-item labels when the collection label already names the group. `itemControl.type` supports normal item built-ins such as `color`, `colorOpacity`, `text`, `select`, `segmented`, `slider`, `switch`, `checkbox`, `rangeInput`, and `fontPicker`; item controls still follow normal density rules, so plain colors use equal 50% columns when they fit. Use `fontPicker` as the item control when each repeated item is a text style or typography entity; do not split its font, weight, size, case, color/opacity, letter spacing, or line height into sibling collection fields.
 

package/templates/starter/e2e/app-performance.spec.ts

@@ -184,7 +184,7 @@ function getFirstMatchIndex(source: string, pattern: RegExp): number {
   return match?.index ?? -1;
 }
 
-test("browser performance matrix points at real fallback browser tests", () => {
+test("browser perf: performance matrix points at real fallback browser tests", () => {
   const browserTestSources = readSiblingBrowserTestSources();
 
   for (const scenario of starterPerformance.scenarios) {
@@ -199,7 +199,7 @@ test("browser performance matrix points at real fallback browser tests", () => {
   }
 });
 
-test("browser performance tests use real Toolcraft interactions", () => {
+test("browser perf: performance tests use real Toolcraft interactions", () => {
   if (starterPerformance.scenarios.length === 0) {
     return;
   }
@@ -493,7 +493,7 @@ test("browser performance tests use real Toolcraft interactions", () => {
   }
 });
 
-test("declared renderer layer selectors are present", async ({ page }) => {
+test("browser perf: declared renderer layer selectors are present", async ({ page }) => {
   if (!starterPerformance.usesCustomRenderer) {
     return;
   }

package/templates/starter/package.json

@@ -12,8 +12,8 @@
     "preview:restart": "node scripts/run-vite-on-free-port.mjs preview --toolcraft-restart",
     "docs:check": "node scripts/check-toolcraft-docs.mjs",
     "test": "node scripts/check-toolcraft-docs.mjs && node scripts/check-toolcraft-integrity.mjs && node --test scripts/*.test.mjs && vitest run src --passWithNoTests",
-    "test:browser": "playwright install chromium && playwright test",
-    "test:browser:perf": "playwright install chromium && playwright test e2e/app-performance.spec.ts --workers=1 && playwright test --grep \"browser perf:\" --workers=1 --pass-with-no-tests",
+    "test:browser": "playwright install chromium && playwright test --grep-invert \"browser perf:\"",
+    "test:browser:perf": "playwright install chromium && playwright test --grep \"browser perf:\" --workers=1 --pass-with-no-tests",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "verify:quick": "pnpm ai:check && pnpm test",
     "verify:ui": "pnpm test:browser",
@@ -34,6 +34,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cross-spawn": "^7.0.6",
     "lucide-react": "^0.511.0",
     "motion": "^11.16.3",
     "react": "^19.2.0",

package/templates/starter/scripts/run-vite-on-free-port.mjs

@@ -1,6 +1,10 @@
 #!/usr/bin/env node
 
-import { spawn } from "node:child_process";
+import { access } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import spawn from "cross-spawn";
 
 import {
   findAvailablePort,
@@ -14,6 +18,8 @@ import {
 } from "./toolcraft-port.mjs";
 
 const viteCommand = process.argv[2] ?? "dev";
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const projectDir = join(scriptDir, "..");
 const restartArg = "--toolcraft-restart";
 const rawPassthroughArgs = process.argv.slice(3).filter((arg) => arg !== "--");
 const restartSamePort =
@@ -49,7 +55,7 @@ if (savedPort) {
       process.exit(0);
     } catch (error) {
       console.error(
-        `Saved Toolcraft port ${savedPort} is busy, but it is not serving this app. Use pnpm dev:restart or pnpm preview:restart to reclaim the saved port, or remove .toolcraft/server-port.json to assign a new port. ${error?.message ?? ""}`.trim(),
+        `Saved Toolcraft port ${savedPort} is busy, but it is not serving this app. Use the restart script to reclaim the saved port, or remove .toolcraft/server-port.json to assign a new port. ${error?.message ?? ""}`.trim(),
       );
       process.exit(1);
     }
@@ -66,12 +72,25 @@ if (!port) {
   }
 }
 
-const pnpmCommand = process.platform === "win32" ? "pnpm.cmd" : "pnpm";
+const viteBinPath = join(
+  projectDir,
+  "node_modules",
+  ".bin",
+  process.platform === "win32" ? "vite.cmd" : "vite",
+);
+
+try {
+  await access(viteBinPath);
+} catch {
+  console.error(
+    "Vite is not installed. Run this app's dependency installation command before starting the dev server.",
+  );
+  process.exit(1);
+}
+
 const child = spawn(
-  pnpmCommand,
+  viteBinPath,
   [
-    "exec",
-    "vite",
     viteCommand,
     "--host",
     "127.0.0.1",

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

@@ -554,8 +554,12 @@ function escapeRegExp(value: string): string {
 
 const incompleteRequiredCheckPattern =
   /\b(?:fail(?:ed|s|ing)?|not complete|not completed|incomplete|pending|blocked|planned|todo|to do|to run|will run|not run|not started|not yet|queued)\b/i;
+const packageScriptPrefixPattern = String.raw`(?:pnpm\s+|npm\s+run\s+)?`;
 const requiredCheckNamePattern =
-  /\b(?:(?:pnpm\s+)?(?:verify:final|verify:perf|test:browser:perf|test:browser|verify:quick|test|build)|browser performance checkpoint|agent-browser|playwright-fallback)\b/i;
+  new RegExp(
+    String.raw`\b(?:${packageScriptPrefixPattern}(?:verify:final|verify:perf|test:browser:perf|test:browser|verify:quick|test|build)|browser performance checkpoint|agent-browser|playwright-fallback)\b`,
+    "i",
+  );
 const browserPerformanceCheckpointPattern =
   /\b(?:agent-browser|browser performance checkpoint|performance checkpoint|verify:perf|test:browser:perf|playwright-fallback)\b/i;
 const fallbackPerfReasonPattern =
@@ -599,7 +603,7 @@ function isPassedAgentBrowserPerfRunLine(line: string): boolean {
 function isPassedPlaywrightFallbackPerfRunLine(line: string): boolean {
   return (
     isVerificationEvidenceLine(line) &&
-    (/\bpnpm\s+verify:perf\b/i.test(line) ||
+    (/\b(?:pnpm\s+verify:perf|npm\s+run\s+verify:perf|verify:perf)\b/i.test(line) ||
       (/\bplaywright-fallback\b/i.test(line) &&
         /\b(?:performance|perf|checkpoint)\b/i.test(line))) &&
     !isIncompleteOrSkippedLine(line)
@@ -643,7 +647,7 @@ function getAgentWorklogVerificationGateErrors(source: string): string[] {
 
   if (!hasPassedPerfRun && !hasAllowedPerfSkip) {
     errors.push(
-      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
+      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or this app's verify:perf script with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
     );
   }
 
@@ -721,7 +725,11 @@ function getAgentWorklogValidationErrors(source: string): string[] {
     );
   }
 
-  if (!/\bpnpm\s+(verify|test|build|typecheck)|browser|Playwright|perf/i.test(verificationBody)) {
+  if (
+    !/\b(?:pnpm\s+(?:verify|test|build|typecheck)|npm\s+run\s+(?:verify|test|build|typecheck)|browser|Playwright|perf)\b/i.test(
+      verificationBody,
+    )
+  ) {
     errors.push("agent-worklog.md Verification must list concrete test/build/browser/performance checks.");
   }
 
@@ -3689,7 +3697,7 @@ describe("Toolcraft template app acceptance coverage", () => {
       expect.arrayContaining([
         "agent-worklog.md required checks must be passed before final delivery; do not report failed, incomplete, pending, or blocked verification.",
         "agent-worklog.md must not list required checks as skipped unless they are explicitly not required for a post-first-working non-performance edit.",
-        "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
+        "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or this app's verify:perf script with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
       ]),
     );
   });
@@ -3775,7 +3783,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     `;
 
     expect(getAgentWorklogValidationErrors(missingPerfWorklog)).toContain(
-      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
+      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or this app's verify:perf script with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
     );
   });
 
@@ -3992,7 +4000,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     `;
 
     expect(getAgentWorklogValidationErrors(missingFallbackReasonWorklog)).toContain(
-      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or `pnpm verify:perf` with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
+      "agent-worklog.md Verification must record the browser performance checkpoint for first working product delivery: use agent-browser when available, or this app's verify:perf script with an explicit fallback reason when no agent browser or CI/non-agent automation is used.",
     );
   });
 

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

@@ -317,26 +317,54 @@ function sourceUsesDirectStorageApi(): boolean {
 }
 
 describe("Toolcraft template app performance coverage", () => {
-  it("publishes a sequential Playwright browser performance fallback", () => {
+  it("publishes separate browser acceptance and performance fallback gates", () => {
     const packageJson = JSON.parse(readFileSync(join(projectDir, "package.json"), "utf8")) as {
       scripts?: Record<string, string>;
     };
+    const runScriptPattern = (scriptName: string) =>
+      `(?:pnpm ${scriptName}|npm run ${scriptName})`;
 
+    expect(
+      packageJson.scripts?.["test:browser"],
+      "Generated apps must keep full performance scenarios out of the default browser acceptance gate.",
+    ).toBe('playwright install chromium && playwright test --grep-invert "browser perf:"');
     expect(
       packageJson.scripts?.["test:browser:perf"],
       "Generated apps must expose a sequential Playwright fallback so perf budgets can be measured when no agent browser is available.",
     ).toBe(
-      'playwright install chromium && playwright test e2e/app-performance.spec.ts --workers=1 && playwright test --grep "browser perf:" --workers=1 --pass-with-no-tests',
+      'playwright install chromium && playwright test --grep "browser perf:" --workers=1 --pass-with-no-tests',
+    );
+    expect(packageJson.scripts?.["verify:quick"]).toMatch(
+      new RegExp(`^${runScriptPattern("ai:check")} && ${runScriptPattern("test")}$`),
+    );
+    expect(packageJson.scripts?.["verify:ui"]).toMatch(
+      new RegExp(`^${runScriptPattern("test:browser")}$`),
+    );
+    expect(packageJson.scripts?.["verify:perf"]).toMatch(
+      new RegExp(`^${runScriptPattern("test:browser:perf")}$`),
+    );
+    expect(packageJson.scripts?.["verify:perf:playwright"]).toMatch(
+      new RegExp(`^${runScriptPattern("test:browser:perf")}$`),
     );
-    expect(packageJson.scripts?.["verify:quick"]).toBe("pnpm ai:check && pnpm test");
-    expect(packageJson.scripts?.["verify:ui"]).toBe("pnpm test:browser");
-    expect(packageJson.scripts?.["verify:perf"]).toBe("pnpm test:browser:perf");
-    expect(packageJson.scripts?.["verify:perf:playwright"]).toBe(
-      "pnpm test:browser:perf",
+    expect(packageJson.scripts?.["verify:final"]).toMatch(
+      new RegExp(
+        `^${runScriptPattern("ai:check")} && ${runScriptPattern("test")} && ${runScriptPattern("build")} && ${runScriptPattern("test:browser")}$`,
+      ),
     );
-    expect(packageJson.scripts?.["verify:final"]).toBe(
-      "pnpm ai:check && pnpm test && pnpm build && pnpm test:browser",
+  });
+
+  it("keeps the Playwright performance audit inside the browser perf tag", () => {
+    const source = readFileSync(join(e2eDir, "app-performance.spec.ts"), "utf8");
+    const testNames = [...source.matchAll(/test\(\s*(["'`])([^"'`]+)\1/g)].map(
+      (match) => match[2],
     );
+
+    expect(source).not.toContain("TOOLCRAFT_PERF_CHECK");
+    expect(testNames.length).toBeGreaterThan(0);
+    expect(
+      testNames.every((name) => name.includes("browser perf:")),
+      `app-performance.spec.ts tests must all be tagged for the dedicated perf checkpoint: ${testNames.join(", ")}`,
+    ).toBe(true);
   });
 
   it("declares agent browser as the preferred performance runner", () => {

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

@@ -1,6 +1,10 @@
 import { applySliderValueLabelUnit } from "../slider/slider-value";
 
-const rangeSeparatorPattern = /(\d)\s*[-‐‑‒–—−]\s*(?=\d)/g;
+const signedNumberPattern = "[-−]?\\d+(?:[.,]\\d+)?";
+const rangePairPattern = new RegExp(
+  `(${signedNumberPattern})(?:\\s*[\\p{L}%°]+)?\\s*(?:/|[-‐‑‒–—−])\\s*(${signedNumberPattern})`,
+  "u",
+);
 
 export function formatRangeSliderValue(
   value: readonly number[],
@@ -46,11 +50,15 @@ export function parseRangeSliderDraft(
     step: number;
   },
 ): [number, number] | null {
-  const normalizedDraftValue = draftValue.replace(rangeSeparatorPattern, "$1 ");
-  const values = Array.from(
-    normalizedDraftValue.matchAll(/-?\d+(?:[.,]\d+)?/g),
-    ([match]) => Number(match.replace(",", ".")),
-  ).filter(Number.isFinite);
+  const pairMatch = draftValue.match(rangePairPattern);
+  const values = pairMatch
+    ? [pairMatch[1], pairMatch[2]]
+        .map((match) => parseRangeSliderDraftNumber(match))
+        .filter(Number.isFinite)
+    : Array.from(
+        draftValue.matchAll(/[-−]?\d+(?:[.,]\d+)?/g),
+        ([match]) => parseRangeSliderDraftNumber(match),
+      ).filter(Number.isFinite);
 
   if (values.length === 0) {
     return null;
@@ -64,3 +72,7 @@ export function parseRangeSliderDraft(
 
   return sortedValues;
 }
+
+function parseRangeSliderDraftNumber(value: string | undefined): number {
+  return Number(value?.replace("−", "-").replace(",", "."));
+}