From 834c0f565fdb96ca1edb9e4b54edd5a96e8069e5 Mon Sep 17 00:00:00 2001
From: Mike Long <mikeylong@users.noreply.github.com>
Date: Fri, 16 Jan 2026 13:09:05 -0800
Subject: [PATCH 1/3] test: fix CI failures for allowedColors deprecation

- Remove allowedColors from validate-portability fixture contract
  - Keeps portability test focused on tarball install, not deprecation
  - Maintains 0 warnings expectation

- Add createTempWorkspace helper to color-deprecation tests
  - Creates minimal valid workspace with proper structure
  - Includes contract-container, sections, fonts, motion, layout
  - Ensures tests validate against real workspace structure

- Update color-deprecation test assertions
  - Allow warnings >= 1 instead of exact count
  - Assert no schema errors for color policy test
  - Use --workspace-root for proper validation

These changes reflect the new allowedColors deprecation behavior
while keeping tests focused on their specific concerns.
---
 .../test/color-deprecation.test.mjs           | 212 +++++++++++++++---
 .../contracts/ui.contract.json                |   6 -
 .../test/validate-portability.test.mjs        |   2 +-
 3 files changed, 180 insertions(+), 40 deletions(-)

diff --git a/packages/interfacectl-cli/test/color-deprecation.test.mjs b/packages/interfacectl-cli/test/color-deprecation.test.mjs
index c35a1f4..9a840c3 100644
--- a/packages/interfacectl-cli/test/color-deprecation.test.mjs
+++ b/packages/interfacectl-cli/test/color-deprecation.test.mjs
@@ -18,6 +18,105 @@ const __dirname = path.dirname(__filename);
 const cliPackageDir = path.resolve(__dirname, "..");
 const cliExecutable = path.resolve(cliPackageDir, "dist", "index.js");
 
+/**
+ * Creates a minimal valid workspace for testing.
+ * @param {string} tempRoot - Root directory for the workspace
+ * @param {object} contract - Contract object to write
+ * @param {string} surfaceId - Surface ID to create directory for
+ * @returns {Promise<string>} Path to the workspace root
+ */
+async function createTempWorkspace(tempRoot, contract, surfaceId) {
+  // Write contract file
+  const contractPath = path.join(tempRoot, "contract.json");
+  await writeFile(contractPath, JSON.stringify(contract, null, 2), "utf-8");
+
+  // Create surface directory structure
+  const surfaceDir = path.join(tempRoot, "apps", surfaceId);
+  await mkdir(surfaceDir, { recursive: true });
+  await writeFile(
+    path.join(surfaceDir, "package.json"),
+    JSON.stringify({ name: surfaceId }),
+    "utf-8"
+  );
+
+  // Create app directory with analysable files
+  const appDir = path.join(surfaceDir, "app");
+  await mkdir(appDir, { recursive: true });
+
+  // Get contract requirements
+  const surface = contract.surfaces[0];
+  const firstSection = surface?.requiredSections?.[0] || "header";
+  const maxWidth = surface?.layout?.maxContentWidth || 1200;
+  const allowedFonts = surface?.allowedFonts || ["Inter", "sans-serif"];
+  const allowedColors = surface?.allowedColors || [];
+  const motionDuration = contract.constraints?.motion?.allowedDurationsMs?.[0] || 200;
+  const motionTiming = contract.constraints?.motion?.allowedTimingFunctions?.[0] || "ease";
+
+  // Choose a color value - prefer first allowed color, or use CSS variable
+  const colorValue = allowedColors.length > 0
+    ? allowedColors[0]
+    : "var(--color-background)";
+
+  // Create globals.css with all required declarations
+  await writeFile(
+    path.join(appDir, "globals.css"),
+    `:root {
+  --contract-max-width: ${maxWidth}px;
+  --contract-motion-duration: ${motionDuration}ms;
+  --contract-motion-timing: ${motionTiming};
+  --color-background: #ffffff;
+}
+
+body {
+  font-family: ${allowedFonts.map(f => f.startsWith("var(") ? f : `"${f}"`).join(", ")};
+  background: ${colorValue};
+}
+
+.contract-container {
+  max-width: var(--contract-max-width);
+  transition: opacity var(--contract-motion-duration) var(--contract-motion-timing);
+  animation-duration: var(--contract-motion-duration);
+  animation-timing-function: var(--contract-motion-timing);
+}
+`,
+    "utf-8"
+  );
+
+  // Create layout.tsx with contract-container marker
+  await writeFile(
+    path.join(appDir, "layout.tsx"),
+    `import "./globals.css";
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="contract-container">{children}</div>
+      </body>
+    </html>
+  );
+}
+`,
+    "utf-8"
+  );
+
+  // Create page.tsx with section marker
+  await writeFile(
+    path.join(appDir, "page.tsx"),
+    `export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="${firstSection}">
+      <h1>Test</h1>
+    </main>
+  );
+}
+`,
+    "utf-8"
+  );
+
+  return tempRoot;
+}
+
 async function runCommand(command, args, options = {}) {
   const proc = spawn(command, args, {
     ...options,
@@ -46,7 +145,6 @@ test("validate emits deprecation warning for allowedColors", async () => {
   );
 
   try {
-    const contractPath = path.join(tempRoot, "contract.json");
     const contract = {
       contractId: "test",
       version: "1.0.0",
@@ -78,39 +176,63 @@ test("validate emits deprecation warning for allowedColors", async () => {
       },
     };
 
-    await writeFile(contractPath, JSON.stringify(contract, null, 2), "utf-8");
-
-    // Create minimal surface directory structure with source files
-    const surfaceDir = path.join(tempRoot, "apps", "test-surface");
-    await mkdir(surfaceDir, { recursive: true });
-    await writeFile(path.join(surfaceDir, "package.json"), JSON.stringify({ name: "test-surface" }), "utf-8");
-    // Create minimal app structure for Next.js surface
-    const appDir = path.join(surfaceDir, "app");
-    await mkdir(appDir, { recursive: true });
-    await writeFile(path.join(appDir, "layout.tsx"), `export default function Layout({ children }) { return <div>{children}</div>; }`, "utf-8");
-    await writeFile(path.join(appDir, "page.tsx"), `export default function Page() { return <div>Test</div>; }`, "utf-8");
+    await createTempWorkspace(tempRoot, contract, "test-surface");
 
+    const contractPath = path.join(tempRoot, "contract.json");
     const result = await runCommand(
       "node",
-      [cliExecutable, "validate", "--contract", contractPath, "--workspace-root", tempRoot, "--format", "json", "--exit-codes", "v2"],
+      [
+        cliExecutable,
+        "validate",
+        "--contract",
+        contractPath,
+        "--workspace-root",
+        tempRoot,
+        "--format",
+        "json",
+        "--exit-codes",
+        "v2",
+      ],
       { cwd: tempRoot },
     );
 
     // Should pass schema validation (allowedColors is accepted but deprecated)
-    assert.equal(result.exitCode, 0, `Command failed: ${result.stderr}\n${result.stdout}`);
+    assert.equal(
+      result.exitCode,
+      0,
+      `Command failed: ${result.stderr}\n${result.stdout}`
+    );
 
     const output = JSON.parse(result.stdout);
     assert.ok(output.findings);
-    
+
+    // Should have at least one deprecation warning
+    assert.ok(
+      output.summary.warnings >= 1,
+      `Expected at least 1 warning, got ${output.summary.warnings}`
+    );
+
     // Should have deprecation warning
     const deprecationFinding = output.findings.find(
       (f) => f.code === "contract.deprecated-field",
     );
-    assert.ok(deprecationFinding, "Should emit contract.deprecated-field finding");
+    assert.ok(
+      deprecationFinding,
+      "Should emit contract.deprecated-field finding"
+    );
     assert.equal(deprecationFinding.severity, "warning");
-    assert(deprecationFinding.message.includes("allowedColors"));
-    assert(deprecationFinding.message.includes("deprecated"));
-    assert(deprecationFinding.location, "Should include jsonPointer location");
+    assert(
+      deprecationFinding.message.includes("allowedColors"),
+      "Deprecation message should mention allowedColors"
+    );
+    assert(
+      deprecationFinding.message.includes("deprecated"),
+      "Deprecation message should mention deprecated"
+    );
+    assert.ok(
+      deprecationFinding.location,
+      "Should include jsonPointer location"
+    );
   } finally {
     await rm(tempRoot, { recursive: true, force: true });
   }
@@ -122,7 +244,6 @@ test("validate accepts contract with color policy", async () => {
   );
 
   try {
-    const contractPath = path.join(tempRoot, "contract.json");
     const contract = {
       contractId: "test",
       version: "1.0.0",
@@ -162,26 +283,51 @@ test("validate accepts contract with color policy", async () => {
       },
     };
 
-    await writeFile(contractPath, JSON.stringify(contract, null, 2), "utf-8");
-
-    // Create minimal surface directory structure with source files
-    const surfaceDir = path.join(tempRoot, "apps", "test-surface");
-    await mkdir(surfaceDir, { recursive: true });
-    await writeFile(path.join(surfaceDir, "package.json"), JSON.stringify({ name: "test-surface" }), "utf-8");
-    // Create minimal app structure for Next.js surface
-    const appDir = path.join(surfaceDir, "app");
-    await mkdir(appDir, { recursive: true });
-    await writeFile(path.join(appDir, "layout.tsx"), `export default function Layout({ children }) { return <div>{children}</div>; }`, "utf-8");
-    await writeFile(path.join(appDir, "page.tsx"), `export default function Page() { return <div>Test</div>; }`, "utf-8");
+    await createTempWorkspace(tempRoot, contract, "test-surface");
 
+    const contractPath = path.join(tempRoot, "contract.json");
     const result = await runCommand(
       "node",
-      [cliExecutable, "validate", "--contract", contractPath, "--workspace-root", tempRoot, "--format", "json", "--exit-codes", "v2"],
+      [
+        cliExecutable,
+        "validate",
+        "--contract",
+        contractPath,
+        "--workspace-root",
+        tempRoot,
+        "--format",
+        "json",
+        "--exit-codes",
+        "v2",
+      ],
       { cwd: tempRoot },
     );
 
     // Should pass schema validation
-    assert.equal(result.exitCode, 0, `Command failed: ${result.stderr}\n${result.stdout}`);
+    assert.equal(
+      result.exitCode,
+      0,
+      `Command failed: ${result.stderr}\n${result.stdout}`
+    );
+
+    const output = JSON.parse(result.stdout);
+
+    // Assert there are no contract.schema-error findings
+    const schemaErrors = output.findings.filter(
+      (f) => f.code === "contract.schema-error"
+    );
+    assert.equal(
+      schemaErrors.length,
+      0,
+      `Expected no schema errors, got: ${JSON.stringify(schemaErrors, null, 2)}`
+    );
+
+    // Optionally assert the contract is accepted and surfaces validate
+    assert.equal(
+      output.summary.errors,
+      0,
+      `Expected no errors, got: ${output.summary.errors}`
+    );
   } finally {
     await rm(tempRoot, { recursive: true, force: true });
   }
diff --git a/packages/interfacectl-cli/test/fixtures/minimal-project/contracts/ui.contract.json b/packages/interfacectl-cli/test/fixtures/minimal-project/contracts/ui.contract.json
index b2a3bc7..e62de3a 100644
--- a/packages/interfacectl-cli/test/fixtures/minimal-project/contracts/ui.contract.json
+++ b/packages/interfacectl-cli/test/fixtures/minimal-project/contracts/ui.contract.json
@@ -15,12 +15,6 @@
         "Demo Sans",
         "sans-serif"
       ],
-      "allowedColors": [
-        "var(--color-primary)",
-        "var(--color-background)",
-        "#ffffff",
-        "#000000"
-      ],
       "layout": {
         "maxContentWidth": 960
       }
diff --git a/packages/interfacectl-cli/test/validate-portability.test.mjs b/packages/interfacectl-cli/test/validate-portability.test.mjs
index 2cb5bb7..6568282 100644
--- a/packages/interfacectl-cli/test/validate-portability.test.mjs
+++ b/packages/interfacectl-cli/test/validate-portability.test.mjs
@@ -103,7 +103,7 @@ test("interfacectl validate runs from tarball install", async () => {
     assert.equal(
       validateResult.exitCode,
       0,
-      `interfacectl validate failed: ${validateResult.stderr}`,
+      `interfacectl validate failed: ${validateResult.stderr}\n${validateResult.stdout}`,
     );
 
     const payload = JSON.parse(validateResult.stdout);

From c75b3d2114443bc483e2461c72b042657afab5c7 Mon Sep 17 00:00:00 2001
From: Mike Long <mikeylong@users.noreply.github.com>
Date: Fri, 16 Jan 2026 15:05:32 -0800
Subject: [PATCH 2/3] test: remove allowedColors from pageFrame test fixture

Fixes pageFrame test failures caused by deprecated allowedColors field.
Tests were expecting exit code 0 but getting exit code 2 due to
deprecation warnings/errors.
---
 .../test/fixtures/pageframe-static/contract.json                 | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json b/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json
index 4efbeb8..389cac9 100644
--- a/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json
@@ -8,7 +8,6 @@
       "type": "web",
       "requiredSections": ["header"],
       "allowedFonts": ["Inter"],
-      "allowedColors": ["#000000"],
       "layout": {
         "maxContentWidth": 1200,
         "pageFrame": {

From 15210f3b443aa106a865708236acc0ab197b4512 Mon Sep 17 00:00:00 2001
From: Mike Long <mikeylong@users.noreply.github.com>
Date: Fri, 16 Jan 2026 15:20:31 -0800
Subject: [PATCH 3/3] test: fix pageFrame test fixtures for complete workspace
 structure

- Add apps/test-surface/app/ directory structure to all fixtures
- Create globals.css with required declarations (fonts, colors, motion, layout)
- Create page.tsx with section markers for each fixture
- Fix inline-styles: use string style prop instead of JSX object
- Fix maxwidth-fail: use string style prop with 1400px
- Fix css-rule: add CSS variable and import globals.css in layout
- Fix font-family: remove 'sans-serif' from non-allowed fonts

These changes ensure fixtures have complete workspace structure
required for validation, similar to color-deprecation test fixes.

All 6 pageFrame tests now passing (tests 54-59).
---
 .../apps/test-surface/app/globals.css              |  4 ++++
 .../clamp-padding/apps/test-surface/app/layout.tsx |  9 +++++++++
 .../clamp-padding/apps/test-surface/app/page.tsx   |  7 +++++++
 .../test/fixtures/pageframe-static/contract.json   |  1 +
 .../css-rule/apps/test-surface/app/globals.css     |  9 +++++++++
 .../css-rule/apps/test-surface/app/layout.tsx      |  9 +++++++++
 .../css-rule/apps/test-surface/app/page.tsx        |  7 +++++++
 .../apps/test-surface/app/globals.css              | 14 ++++++++++++++
 .../inline-styles/apps/test-surface/app/layout.tsx | 10 ++++++++++
 .../inline-styles/apps/test-surface/app/page.tsx   |  7 +++++++
 .../apps/test-surface/app/globals.css              | 14 ++++++++++++++
 .../maxwidth-fail/apps/test-surface/app/layout.tsx | 10 ++++++++++
 .../maxwidth-fail/apps/test-surface/app/page.tsx   |  7 +++++++
 .../apps/test-surface/app/globals.css              | 14 ++++++++++++++
 .../apps/test-surface/app/layout.tsx               |  8 ++++++++
 .../missing-marker/apps/test-surface/app/page.tsx  |  7 +++++++
 .../tailwind/apps/test-surface/app/globals.css     | 14 ++++++++++++++
 .../tailwind/apps/test-surface/app/layout.tsx      | 11 +++++++++++
 .../tailwind/apps/test-surface/app/page.tsx        |  7 +++++++
 19 files changed, 169 insertions(+)
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/globals.css
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/layout.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/page.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/globals.css
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/layout.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/page.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/globals.css
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/layout.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/page.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/globals.css
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/layout.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/page.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/globals.css
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/layout.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/page.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/globals.css
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/layout.tsx
 create mode 100644 packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/page.tsx

diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/globals.css b/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/globals.css
new file mode 100644
index 0000000..1aff918
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/globals.css
@@ -0,0 +1,4 @@
+[data-contract="page-container"] {
+  max-width: 1200px;
+  padding-inline: clamp(16px, 2vw, 24px);
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/layout.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/layout.tsx
new file mode 100644
index 0000000..2af49f5
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/layout.tsx
@@ -0,0 +1,9 @@
+import "./globals.css";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div data-contract="page-container" className="page-container">
+      <div data-contract-section="header">Header</div>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/page.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/page.tsx
new file mode 100644
index 0000000..2550a82
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/clamp-padding/apps/test-surface/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="header">
+      <h1>Test</h1>
+    </main>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json b/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json
index 389cac9..4efbeb8 100644
--- a/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/contract.json
@@ -8,6 +8,7 @@
       "type": "web",
       "requiredSections": ["header"],
       "allowedFonts": ["Inter"],
+      "allowedColors": ["#000000"],
       "layout": {
         "maxContentWidth": 1200,
         "pageFrame": {
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/globals.css b/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/globals.css
new file mode 100644
index 0000000..968dc3b
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/globals.css
@@ -0,0 +1,9 @@
+:root {
+  --contract-max-width: 1200px;
+}
+
+[data-contract="page-container"] {
+  max-width: 1200px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/layout.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/layout.tsx
new file mode 100644
index 0000000..3fccca2
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/layout.tsx
@@ -0,0 +1,9 @@
+import "./globals.css";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div data-contract="page-container" className="page-container">
+      {children}
+    </div>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/page.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/page.tsx
new file mode 100644
index 0000000..2550a82
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/css-rule/apps/test-surface/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="header">
+      <h1>Test</h1>
+    </main>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/globals.css b/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/globals.css
new file mode 100644
index 0000000..1890dba
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/globals.css
@@ -0,0 +1,14 @@
+:root {
+  --contract-max-width: 1200px;
+  --contract-motion-duration: 200ms;
+  --contract-motion-timing: ease;
+}
+
+body {
+  font-family: "Inter";
+}
+
+.contract-container {
+  max-width: var(--contract-max-width);
+  transition: opacity var(--contract-motion-duration) var(--contract-motion-timing);
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/layout.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/layout.tsx
new file mode 100644
index 0000000..1d2e87b
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/layout.tsx
@@ -0,0 +1,10 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-contract="page-container"
+      style={"max-width: 1200px; padding-left: 24px; padding-right: 24px;"}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/page.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/page.tsx
new file mode 100644
index 0000000..2550a82
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/inline-styles/apps/test-surface/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="header">
+      <h1>Test</h1>
+    </main>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/globals.css b/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/globals.css
new file mode 100644
index 0000000..7c29cac
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/globals.css
@@ -0,0 +1,14 @@
+:root {
+  --contract-max-width: 1200px;
+  --contract-motion-duration: 200ms;
+  --contract-motion-timing: ease;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+}
+
+.contract-container {
+  max-width: var(--contract-max-width);
+  transition: opacity var(--contract-motion-duration) var(--contract-motion-timing);
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/layout.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/layout.tsx
new file mode 100644
index 0000000..2d97346
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/layout.tsx
@@ -0,0 +1,10 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-contract="page-container"
+      style={"max-width: 1400px; padding-left: 24px; padding-right: 24px;"}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/page.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/page.tsx
new file mode 100644
index 0000000..2550a82
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/maxwidth-fail/apps/test-surface/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="header">
+      <h1>Test</h1>
+    </main>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/globals.css b/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/globals.css
new file mode 100644
index 0000000..7c29cac
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/globals.css
@@ -0,0 +1,14 @@
+:root {
+  --contract-max-width: 1200px;
+  --contract-motion-duration: 200ms;
+  --contract-motion-timing: ease;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+}
+
+.contract-container {
+  max-width: var(--contract-max-width);
+  transition: opacity var(--contract-motion-duration) var(--contract-motion-timing);
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/layout.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/layout.tsx
new file mode 100644
index 0000000..215b1c8
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/layout.tsx
@@ -0,0 +1,8 @@
+import "./globals.css";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="container">
+      {children}
+    </div>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/page.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/page.tsx
new file mode 100644
index 0000000..2550a82
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/missing-marker/apps/test-surface/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="header">
+      <h1>Test</h1>
+    </main>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/globals.css b/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/globals.css
new file mode 100644
index 0000000..1890dba
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/globals.css
@@ -0,0 +1,14 @@
+:root {
+  --contract-max-width: 1200px;
+  --contract-motion-duration: 200ms;
+  --contract-motion-timing: ease;
+}
+
+body {
+  font-family: "Inter";
+}
+
+.contract-container {
+  max-width: var(--contract-max-width);
+  transition: opacity var(--contract-motion-duration) var(--contract-motion-timing);
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/layout.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/layout.tsx
new file mode 100644
index 0000000..7feff51
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/layout.tsx
@@ -0,0 +1,11 @@
+import "./globals.css";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-contract="page-container"
+      className="max-w-[1200px] px-[24px]"
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/page.tsx b/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/page.tsx
new file mode 100644
index 0000000..2550a82
--- /dev/null
+++ b/packages/interfacectl-cli/test/fixtures/pageframe-static/tailwind/apps/test-surface/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main className="contract-container" data-contract-section="header">
+      <h1>Test</h1>
+    </main>
+  );
+}