@tekyzinc/gsd-t 2.68.10 → 2.68.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/package.json +1 -1
  3. package/templates/widget-contract.md +55 -21
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  All notable changes to GSD-T are documented here. Updated with each release.
4
4
 
5
+ ## [2.68.11] - 2026-04-05
6
+
7
+ ### Changed (widget-contract template)
8
+ - **Alignment column in Card Chrome Slots** — every slot now requires explicit alignment (left/center/right) extracted from Figma. Incorrect legend alignment was the #2 cause of "looks off" results.
9
+ - **Internal Element Layout section (MANDATORY)** — new section replacing the flat layout table. Documents: body_layout (flex-row/column/grid), body_justify, body_align, body_gap, chart_width/height, legend_width, footer_legend_justify, header_to_body_gap, body_to_footer_gap. These are the exact values that control spacing and sizing of elements within a widget card.
10
+ - **Verification checklist expanded** — now checks: chrome alignment, internal layout, inter-element spacing, element sizing, legend alignment, card container values (6 new items).
11
+
12
+ ### Why
13
+ BDS Analytics comparison revealed consistent intra-widget layout errors: legends left-aligned instead of centered, inconsistent spacing between chart and legend, wrong element sizing within cards. The widget contract template had a Layout section but it specified only container-level properties (padding, border, gap) — not how elements were sized, spaced, and aligned WITHIN the card body. These new fields close that gap.
14
+
5
15
  ## [2.68.10] - 2026-04-05
6
16
 
7
17
  ### Changed (gsd-t-design-decompose)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekyzinc/gsd-t",
3
- "version": "2.68.10",
3
+ "version": "2.68.11",
4
4
  "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",
5
5
  "author": "Tekyz, Inc.",
6
6
  "license": "MIT",
package/templates/widget-contract.md CHANGED
@@ -19,18 +19,20 @@ Composition of elements + data binding + layout. Widgets SELECT and POSITION ele
19
19
 
20
20
  Every widget is a card with consistent chrome. Missing chrome is the #1 cause of "looks off" verification results. Document EVERY slot, even if empty.
21
21
 
22
- | Slot | Element Contract (or N/A) | Content / Behavior |
23
- |-------------------------|------------------------------------------|--------------------------------------------------|
24
- | `title` | heading-h3 | {exact title text from design} |
25
- | `subtitle` | text-caption or N/A | {exact subtitle text — "Which tools members interact with most."} |
26
- | `header_right_control` | select-dropdown, button-ghost, or N/A | {e.g., "Members ▼" filter dropdown in card header} |
27
- | `kpi_header` | stat-card-kpi-large or N/A | {e.g., "2.4" + "Avg tools per member" shown above chart} |
28
- | `body` | {primary element, e.g., chart-donut} | {main visual} |
29
- | `body_sidebar` | {e.g., legend-vertical-right or N/A} | {element positioned alongside body} |
30
- | `footer` | {e.g., text-caption or N/A} | {e.g., "Last updated: ..."} |
31
- | `footer_legend` | {e.g., legend-horizontal-bottom or N/A} | {legend below body} |
32
-
33
- **Rule**: If the design shows it, document it. If the design doesn't show it, write "N/A". Do NOT leave blank.
22
+ | Slot | Element Contract (or N/A) | Content / Behavior | Alignment |
23
+ |-------------------------|------------------------------------------|--------------------------------------------------|-----------------|
24
+ | `title` | heading-h3 | {exact title text from design} | {left / center} |
25
+ | `subtitle` | text-caption or N/A | {exact subtitle text — "Which tools members interact with most."} | {left / center} |
26
+ | `header_right_control` | select-dropdown, button-ghost, or N/A | {e.g., "Members ▼" filter dropdown in card header} | right |
27
+ | `kpi_header` | stat-card-kpi-large or N/A | {e.g., "2.4" + "Avg tools per member" shown above chart} | {left / center} |
28
+ | `body` | {primary element, e.g., chart-donut} | {main visual} | {center / left} |
29
+ | `body_sidebar` | {e.g., legend-vertical-right or N/A} | {element positioned alongside body} | {left / center} |
30
+ | `footer` | {e.g., text-caption or N/A} | {e.g., "Last updated: ..."} | {left / center} |
31
+ | `footer_legend` | {e.g., legend-horizontal-bottom or N/A} | {legend below body} | {center / left} |
32
+
33
+ **Rules**:
34
+ - If the design shows it, document it. If the design doesn't show it, write "N/A". Do NOT leave blank.
35
+ - The **Alignment** column is MANDATORY. Incorrect alignment (left vs center) is the #2 cause of "looks off" results after missing chrome. Extract alignment from the Figma node — do not default to left.
34
36
 
35
37
  ## Elements Used (body composition)
36
38
 
@@ -46,25 +48,52 @@ Every widget is a card with consistent chrome. Missing chrome is the #1 cause of
46
48
  ```
47
49
  ┌──────────────────────────────────────────────┐
48
50
  │ {title} [{filter}] │
51
+ │ {subtitle} │
49
52
  ├──────────────────────────────────────────────┤
50
53
  │ │ │
51
54
  │ {chart} │ {legend} │
52
55
  │ │ │
56
+ ├──────────────────────────────────────────────┤
57
+ │ {footer_legend} │
53
58
  └──────────────────────────────────────────────┘
54
59
  ```
55
60
 
61
+ ### Card Container
62
+
56
63
  | Property | Value |
57
64
  |--------------------|-----------------------------------------------------|
58
65
  | container_width | {100% of parent / fixed 480px} |
59
66
  | container_height | {auto / fixed 320px} |
60
- | padding | {tokens.spacing.6} |
61
- | gap | {tokens.spacing.4} |
62
- | background | {tokens.color.surface.card} |
63
- | border | {1px solid tokens.color.border.subtle} |
64
- | border_radius | {tokens.radius.lg} |
65
- | shadow | {tokens.shadow.sm} |
66
- | chart_area_ratio | {60% of widget width} |
67
- | legend_area_ratio | {40% of widget width} |
67
+ | padding | {16px — extract exact value from Figma} |
68
+ | background | {#ffffff} |
69
+ | border | {1px solid #e2e8f0} |
70
+ | border_radius | {8px} |
71
+ | shadow | {none / 0 2px 8px rgba(0,0,0,0.1)} |
72
+
73
+ ### Internal Element Layout (MANDATORY — the "looks off" killer)
74
+
75
+ This section specifies how elements are sized, spaced, and aligned WITHIN the card body. Missing or wrong values here produce the "spacing inside widgets" and "legends incorrectly aligned" class of errors.
76
+
77
+ | Property | Value |
78
+ |-----------------------------|------------------------------------------------------------|
79
+ | header_to_body_gap | {16px — gap between title/subtitle row and body content} |
80
+ | body_layout | {flex-row / flex-column / grid} |
81
+ | body_justify | {center / flex-start / space-between} |
82
+ | body_align | {center / flex-start / stretch} |
83
+ | body_gap | {24px — gap between body element and sidebar element} |
84
+ | chart_width | {180px / 60% of body / auto} |
85
+ | chart_height | {180px / auto} |
86
+ | chart_align_self | {center / flex-start} |
87
+ | legend_width | {auto / 40% of body} |
88
+ | legend_align_self | {center / flex-start} |
89
+ | body_to_footer_gap | {16px — gap between body and footer/footer_legend} |
90
+ | footer_legend_justify | {center / flex-start — EXTRACT FROM FIGMA, do not default} |
91
+
92
+ **Rules**:
93
+ - Extract EVERY value from the Figma node — do not approximate.
94
+ - `footer_legend_justify` is critical: center-aligned legends look completely different from left-aligned. Check the Figma.
95
+ - `body_layout` + `body_justify` + `body_align` together define whether the chart is centered in its card, left-aligned, or stretched. Get this wrong and every widget "looks off."
96
+ - These values are WIDGET-OWNED — they describe how the widget positions its elements, not the elements' internal specs (which live in element contracts).
68
97
 
69
98
  ## Data Binding
70
99
 
@@ -154,7 +183,12 @@ The widget harness page (`/design-system/{widget-name}`) renders ONE widget inst
154
183
  Widget-level verification runs AFTER all referenced elements pass their own verification. Widget verification only checks composition — element internals are out of scope.
155
184
 
156
185
  - [ ] All referenced elements present and correctly slotted
157
- - [ ] Layout dimensions (width, height, padding, gap) match design
186
+ - [ ] Card chrome alignment matches design (title left/center, legend center/left, etc.)
187
+ - [ ] Internal element layout matches design (body_layout, body_justify, body_align)
188
+ - [ ] Inter-element spacing matches design (header_to_body_gap, body_gap, body_to_footer_gap)
189
+ - [ ] Element sizing matches design (chart_width, chart_height, legend_width)
190
+ - [ ] Legend alignment matches design (footer_legend_justify: center vs left)
191
+ - [ ] Card container values match design (padding, border, radius, shadow)
158
192
  - [ ] Responsive breakpoints adapt as specified
159
193
  - [ ] Data binding produces correct element inputs (spot-check with sample data)
160
194
  - [ ] Inter-element interactions fire (hover sync, click propagation)