@tekyzinc/gsd-t 2.63.10 → 2.64.10

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to GSD-T are documented here. Updated with each release.
 
+## [2.64.10] - 2026-04-05
+
+### Added (page-contract template)
+- **Page Fixture (OPTIONAL)** section — formalizes the composition chain (element → widget → page) by referencing each widget's fixture via `$ref:{widget-name}#/fixture`. Closes gap P2 from page-tier convergence run 1.
+- **Boundary Rules (MANDATORY)** section — explicit rules on what a page may vs may not do (pass data through widget props = OK; declare CSS for widget internal classes = VIOLATION). Adds a grep-based enforcement check. Closes gap P3.
+- **Grid position format** clarification — use `grid[row=N, col=M]` OR named CSS grid areas, consistently within one page. Closes gap P4.
+
+### Changed
+- **Widgets Used** table: renamed "Notes" column → "Layout Notes" with positioning-only guidance (spans/stacking/sticky — NOT widget configuration). Closes gap P1.
+
 ## [2.63.10] - 2026-04-05
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "2.63.10",
+  "version": "2.64.10",
   "description": "GSD-T: Contract-Driven Development for Claude Code — 51 slash commands with headless CI/CD mode, graph-powered code analysis, real-time agent dashboard, execution intelligence, task telemetry, doc-ripple enforcement, backlog management, impact analysis, test sync, milestone archival, and PRD generation",
   "author": "Tekyz, Inc.",
   "license": "MIT",

package/templates/page-contract.md

@@ -18,14 +18,31 @@ Top-level assembly of widgets + global layout + routing + data loading. Pages PO
 
 ## Widgets Used
 
-| Position in Grid                 | Widget Contract                 | Notes                        |
+| Position in Grid                 | Widget Contract                 | Layout Notes                 |
 |----------------------------------|---------------------------------|------------------------------|
-| header                           | page-header-widget              | {sticky}                     |
-| sidebar                          | nav-sidebar-widget              | {collapsible at <1024px}     |
-| grid[row=1, cols=1-4]            | stat-strip-widget               | {4 KPI tiles}                |
-| grid[row=2, col=1-2]             | revenue-breakdown-widget        | {spans 2 columns}            |
-| grid[row=2, col=3-4]             | user-growth-widget              | {spans 2 columns}            |
-| grid[row=3, col=1-4]             | recent-activity-table-widget    | {full width}                 |
+| header                           | page-header-widget              | sticky                       |
+| sidebar                          | nav-sidebar-widget              | collapsible at <1024px       |
+| grid[row=1, cols=1-4]            | stat-strip-widget               | full-width row               |
+| grid[row=2, col=1-2]             | revenue-breakdown-widget        | spans 2 columns              |
+| grid[row=2, col=3-4]             | user-growth-widget              | spans 2 columns              |
+| grid[row=3, col=1-4]             | recent-activity-table-widget    | full width                   |
+
+**Grid position format**: use EITHER `grid[row=N, col=M]` / `grid[row=N, cols=M-K]` OR named CSS grid areas (`grid-area: strip`). Be consistent within one page. The **Layout Notes** column documents positioning metadata only (spans, stacking, sticky/fixed) — NOT widget configuration (widget props live in the widget contract).
+
+## Page Fixture (OPTIONAL)
+
+If you want to formalize the composition chain (element → widget → page), declare a page-level fixture that references each widget's fixture by `$ref`:
+
+```json
+{
+  "__fixture_source__": "composed-from-widgets",
+  "strip":  "$ref:stat-strip-widget#/fixture",
+  "donut":  "$ref:revenue-breakdown-widget#/fixture",
+  "bar":    "$ref:user-growth-widget#/fixture"
+}
+```
+
+Skip this section for pages that are pure assembly with no storybook / harness target. Include it when the page has a dedicated demo route or when multiple pages share widget fixtures and you want to document which instance each page references.
 
 ## Layout
 
@@ -123,6 +140,20 @@ Top-level assembly of widgets + global layout + routing + data loading. Pages PO
 - **Router integration**: {vue-router / react-router / next.js app dir}
 - **Data fetching**: {composable / hook / server component}
 
+## Boundary Rules (MANDATORY)
+
+A page is allowed to:
+- Pass DATA through a widget's documented `defineProps` / public API (titles, subtitles, fixture data — these are the widget's legitimate inputs)
+- Declare page-level layout CSS (grid template, gaps, padding, max-width, background, landmark regions)
+- Manage route-level state and data fetching
+
+A page is **FORBIDDEN** from:
+- Declaring CSS selectors that target a widget's internal classes (`.card-title`, `.donut-segment`, `.legend-dot`) — this is a boundary violation
+- Overriding widget visual spec via `:deep()` selectors or `!important` on widget-owned properties
+- Re-specifying element visual spec (colors, font sizes, radii, paddings owned by elements)
+
+**Enforcement check**: `grep` the page file for any CSS selector matching a widget's internal class names — if found, move the styling into the widget contract or create a widget variant.
+
 ## Verification Checklist
 
 Page-level verification runs AFTER all widgets pass their own verification. Page verification only checks assembly — widget and element internals are out of scope.