@pixel-point/toolcraft 0.0.7 → 0.0.8

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

@@ -110,12 +110,49 @@ function getScenarioBudgetAssertionPattern(scenarioId: string): RegExp {
 
 function getScenarioStressFixturePattern(scenarioId: string): RegExp {
   return new RegExp(
-    `getToolcraftPerformanceStressValue(?:\\s*<[^>]+>)?\\s*\\(\\s*(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+    `(?:getToolcraftPerformanceStressValue(?:\\s*<[^>]+>)?\\s*\\(\\s*(?:starterPerformance|appPerformance)|dragToolcraftSliderToPerformanceStressValue\\s*\\([\\s\\S]*?(?:starterPerformance|appPerformance)|applyToolcraftPerformanceStressFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance))\\s*,\\s*(["'\`])${escapeRegExp(
       scenarioId,
     )}\\1`,
   );
 }
 
+function getScenarioWorkloadFixturePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `(?:getToolcraftPerformanceWorkloadValue(?:\\s*<[^>]+>)?\\s*\\(\\s*(?:starterPerformance|appPerformance)|applyToolcraftPerformanceWorkloadFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance))\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getScenarioCustomStressFixturePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `applyToolcraftPerformanceStressFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getScenarioCustomWorkloadFixturePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `applyToolcraftPerformanceWorkloadFixture\\s*\\(\\s*page\\s*,\\s*(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getScenarioSliderStressValuePattern(scenarioId: string): RegExp {
+  return new RegExp(
+    `dragToolcraftSliderToPerformanceStressValue\\s*\\([\\s\\S]*?(?:starterPerformance|appPerformance)\\s*,\\s*(["'\`])${escapeRegExp(
+      scenarioId,
+    )}\\1`,
+  );
+}
+
+function getFirstMatchIndex(source: string, pattern: RegExp): number {
+  const match = pattern.exec(source);
+  return match?.index ?? -1;
+}
+
 test("browser performance matrix points at real Playwright tests", () => {
   const browserTestSources = readSiblingBrowserTestSources();
 
@@ -154,15 +191,71 @@ test("browser performance tests use real Toolcraft interactions", () => {
       continue;
     }
 
-    if (scenario.workload) {
+    if (scenario.workload || scenario.stress === true || scenario.stressFixture) {
       expect(
         scenario.stressFixture,
-        `${scenario.id} workload scenario must declare stressFixture so browser tests cannot use toy inputs.`,
+        `${scenario.id} stress scenario must declare stressFixture so browser tests cannot use toy inputs.`,
       ).toBeDefined();
       expect(
         browserTestSource,
         `${scenario.id} must read the declared stress fixture with getToolcraftPerformanceStressValue(appPerformance, "${scenario.id}") before measuring performance.`,
       ).toMatch(getScenarioStressFixturePattern(scenario.id));
+
+      if (
+        scenario.stressFixture?.kind === "custom" &&
+        typeof scenario.stressFixture.value === "object" &&
+        scenario.stressFixture.value !== null &&
+        !Array.isArray(scenario.stressFixture.value)
+      ) {
+        expect(
+          browserTestSource,
+          `${scenario.id} custom stress fixture must be applied with applyToolcraftPerformanceStressFixture so every heavy-state key is mapped through the real UI before measurement.`,
+        ).toMatch(getScenarioCustomStressFixturePattern(scenario.id));
+      }
+    }
+
+    if (scenario.workloadFixture) {
+      const workloadFixtureIndex = getFirstMatchIndex(
+        browserTestSource,
+        getScenarioWorkloadFixturePattern(scenario.id),
+      );
+      const stressFixtureIndex = getFirstMatchIndex(
+        browserTestSource,
+        getScenarioStressFixturePattern(scenario.id),
+      );
+      const budgetAssertionIndex = getFirstMatchIndex(
+        browserTestSource,
+        getScenarioBudgetAssertionPattern(scenario.id),
+      );
+
+      expect(
+        browserTestSource,
+        `${scenario.id} must apply the declared workloadFixture with getToolcraftPerformanceWorkloadValue(appPerformance, "${scenario.id}") or applyToolcraftPerformanceWorkloadFixture before measuring performance.`,
+      ).toMatch(getScenarioWorkloadFixturePattern(scenario.id));
+      expect(
+        workloadFixtureIndex,
+        `${scenario.id} must apply workloadFixture before stressFixture so the measured control runs inside the heavy app baseline.`,
+      ).toBeGreaterThanOrEqual(0);
+      expect(
+        stressFixtureIndex,
+        `${scenario.id} must read/apply stressFixture after workloadFixture.`,
+      ).toBeGreaterThan(workloadFixtureIndex);
+      expect(
+        budgetAssertionIndex,
+        `${scenario.id} must assert budget only after workloadFixture is applied.`,
+      ).toBeGreaterThan(workloadFixtureIndex);
+
+      if (
+        scenario.workloadFixture.kind === "custom" &&
+        typeof scenario.workloadFixture.value === "object" &&
+        scenario.workloadFixture.value !== null &&
+        !Array.isArray(scenario.workloadFixture.value)
+      ) {
+        expect(
+          browserTestSource,
+          `${scenario.id} custom workload fixture must be applied with applyToolcraftPerformanceWorkloadFixture so every baseline-state key is mapped through the real UI before measurement.`,
+        ).toMatch(getScenarioCustomWorkloadFixturePattern(scenario.id));
+      }
     }
 
     if (scenario.interaction === "control-drag") {
@@ -190,6 +283,13 @@ test("browser performance tests use real Toolcraft interactions", () => {
           `${scenario.id} drags discrete slider "${scenario.controlLabel}" and must verify Toolcraft marker-budget behavior plus smooth drag.`,
         ).toMatch(/expectToolcraftDiscreteSliderDragSmoothness\s*\(/);
       }
+
+      if (scenario.workload && scenario.controlLabel) {
+        expect(
+          browserTestSource,
+          `${scenario.id} workload slider drags must apply the exact stressFixture.value with dragToolcraftSliderToPerformanceStressValue instead of hand-dividing by max or typing a ratio.`,
+        ).toMatch(getScenarioSliderStressValuePattern(scenario.id));
+      }
     }
 
     if (scenario.interaction === "control-change") {
@@ -284,6 +384,39 @@ test("browser performance tests use real Toolcraft interactions", () => {
       ).not.toMatch(/canvas\.setOffset|canvas\.panBy|canvas\.zoom|Zoom in|Zoom out|Center canvas/);
     }
 
+    if (scenario.interaction === "timeline-playback") {
+      expect(
+        browserTestSource,
+        `${scenario.id} must use the real timeline playback UI while measuring frames.`,
+      ).toMatch(/measureToolcraftInteraction\s*\([\s\S]*(Play playback|Pause playback|timeline-playback|data-slot=["']timeline-playback)/);
+      expect(
+        browserTestSource,
+        `${scenario.id} must not satisfy timeline playback performance by dispatching timeline state directly.`,
+      ).not.toMatch(/timeline\.setCurrentTime|timeline\.setPlaying|timeline\.play|timeline\.pause/);
+    }
+
+    if (scenario.interaction === "timeline-scrub") {
+      expect(
+        browserTestSource,
+        `${scenario.id} must scrub the real timeline UI while measuring interaction responsiveness.`,
+      ).toMatch(/measureToolcraftInteraction\s*\([\s\S]*(Playback position|timeline-playback-handle|data-slot=["']timeline-playback-handle|page\.mouse\.(?:down|move|up))/);
+      expect(
+        browserTestSource,
+        `${scenario.id} must not satisfy timeline scrub performance by setting timeline time directly.`,
+      ).not.toMatch(/timeline\.setCurrentTime|canvas\.setCurrentTime/);
+    }
+
+    if (scenario.interaction === "mask-drag") {
+      expect(
+        browserTestSource,
+        `${scenario.id} must measure a real canvas handle/mask drag.`,
+      ).toMatch(/measureToolcraftInteraction\s*\([\s\S]*dragCanvasHandle\s*\(/);
+      expect(
+        browserTestSource,
+        `${scenario.id} must not fake mask drag coverage with direct runtime state mutation.`,
+      ).not.toMatch(/mask\.(?:set|update|move)|canvas\.setOffset|canvas\.panBy/);
+    }
+
     if (scenario.interaction === "viewport-zoom-stress") {
       expect(
         browserTestSource,

package/templates/starter/e2e/performance-helpers.ts

@@ -21,6 +21,26 @@ export type ToolcraftInteractionOptions = {
   settleMs?: number;
 };
 
+export type ToolcraftStressFixtureApplyContext = {
+  config: ToolcraftPerformanceConfig;
+  fixture: Record<string, unknown>;
+  key: string;
+  page: Page;
+  scenarioId: string;
+};
+
+export type ToolcraftStressFixtureAppliers = Record<
+  string,
+  (
+    value: unknown,
+    context: ToolcraftStressFixtureApplyContext,
+  ) => Promise<void> | void
+>;
+
+function isToolcraftStressFixtureObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 export async function startToolcraftFrameProbe(
   page: Page,
 ): Promise<() => Promise<ToolcraftFrameProbeResult>> {
@@ -371,6 +391,161 @@ export async function dragToolcraftSliderByLabel(
   await page.mouse.up();
 }
 
+export async function dragToolcraftSliderToValue(
+  page: Page,
+  label: string,
+  value: number,
+): Promise<void> {
+  const field = await getToolcraftFieldByLabel(page, label);
+  const slider = field.locator('[data-slot="slider"], [role="slider"]').first();
+
+  await expect(slider, `Toolcraft slider "${label}" should be visible`).toBeVisible();
+
+  const range = await slider.evaluate((element) => {
+    const htmlElement = element as HTMLElement;
+    const min = Number(
+      htmlElement.getAttribute("aria-valuemin") ??
+        (htmlElement as HTMLInputElement).min ??
+        "0",
+    );
+    const max = Number(
+      htmlElement.getAttribute("aria-valuemax") ??
+        (htmlElement as HTMLInputElement).max ??
+        "100",
+    );
+
+    return {
+      max: Number.isFinite(max) ? max : 100,
+      min: Number.isFinite(min) ? min : 0,
+    };
+  });
+  const denominator = range.max - range.min;
+  const ratio = denominator === 0 ? 0 : (value - range.min) / denominator;
+
+  await dragToolcraftSliderByLabel(page, label, Math.min(1, Math.max(0, ratio)));
+}
+
+export async function dragToolcraftSliderToPerformanceStressValue(
+  page: Page,
+  label: string,
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+): Promise<void> {
+  const value = getToolcraftPerformanceStressValue(config, scenarioId);
+
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" must provide a numeric stressFixture.value for slider "${label}".`,
+    );
+  }
+
+  await dragToolcraftSliderToValue(page, label, value);
+}
+
+export async function applyToolcraftPerformanceStressFixture(
+  page: Page,
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+  appliers: ToolcraftStressFixtureAppliers,
+): Promise<Record<string, unknown>> {
+  const fixture = getToolcraftPerformanceStressValue(config, scenarioId);
+
+  if (!isToolcraftStressFixtureObject(fixture)) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" must provide an object stressFixture.value for combined fixture application.`,
+    );
+  }
+
+  const fixtureKeys = Object.keys(fixture);
+  if (fixtureKeys.length === 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" stressFixture.value must contain at least one key.`,
+    );
+  }
+
+  const missingKeys = fixtureKeys.filter((key) => !appliers[key]);
+  if (missingKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" is missing fixture appliers for: ${missingKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  const extraKeys = Object.keys(appliers).filter((key) => !fixtureKeys.includes(key));
+  if (extraKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" declares fixture appliers not present in stressFixture.value: ${extraKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  for (const key of fixtureKeys) {
+    await appliers[key]!(fixture[key], {
+      config,
+      fixture,
+      key,
+      page,
+      scenarioId,
+    });
+  }
+
+  return fixture;
+}
+
+export async function applyToolcraftPerformanceWorkloadFixture(
+  page: Page,
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+  appliers: ToolcraftStressFixtureAppliers,
+): Promise<Record<string, unknown>> {
+  const fixture = getToolcraftPerformanceWorkloadValue(config, scenarioId);
+
+  if (!isToolcraftStressFixtureObject(fixture)) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" must provide an object workloadFixture.value for baseline fixture application.`,
+    );
+  }
+
+  const fixtureKeys = Object.keys(fixture);
+  if (fixtureKeys.length === 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" workloadFixture.value must contain at least one key.`,
+    );
+  }
+
+  const missingKeys = fixtureKeys.filter((key) => !appliers[key]);
+  if (missingKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" is missing workload fixture appliers for: ${missingKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  const extraKeys = Object.keys(appliers).filter((key) => !fixtureKeys.includes(key));
+  if (extraKeys.length > 0) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" declares workload fixture appliers not present in workloadFixture.value: ${extraKeys.join(
+        ", ",
+      )}.`,
+    );
+  }
+
+  for (const key of fixtureKeys) {
+    await appliers[key]!(fixture[key], {
+      config,
+      fixture,
+      key,
+      page,
+      scenarioId,
+    });
+  }
+
+  return fixture;
+}
+
 export async function dragToolcraftCanvasViewport(
   page: Page,
   delta: { x: number; y: number } = { x: 96, y: -64 },
@@ -553,6 +728,28 @@ export function getToolcraftPerformanceStressValue<TValue = unknown>(
   return scenario.stressFixture.value as TValue;
 }
 
+export function getToolcraftPerformanceWorkloadValue<TValue = unknown>(
+  config: ToolcraftPerformanceConfig,
+  scenarioId: string,
+): TValue {
+  const scenario = config.scenarios.find((item) => item.id === scenarioId);
+
+  if (!scenario) {
+    throw new Error(`Toolcraft performance scenario "${scenarioId}" was not found.`);
+  }
+
+  if (
+    !scenario.workloadFixture ||
+    !Object.prototype.hasOwnProperty.call(scenario.workloadFixture, "value")
+  ) {
+    throw new Error(
+      `Toolcraft performance scenario "${scenarioId}" does not declare workloadFixture.value.`,
+    );
+  }
+
+  return scenario.workloadFixture.value as TValue;
+}
+
 export function expectToolcraftScenarioPerformanceBudget(
   result: ToolcraftPerformanceBudgetResult,
   config: ToolcraftPerformanceConfig,

package/templates/starter/package.json

@@ -20,6 +20,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.2.8",
     "@phosphor-icons/react": "^2.1.10",
     "@repo/toolcraft-runtime": "workspace:*",