@compilr-dev/sdk 0.18.9 → 0.18.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 (30) hide show
  1. package/dist/canvas/color.d.ts +85 -0
  2. package/dist/canvas/color.js +216 -0
  3. package/dist/canvas/index.d.ts +6 -0
  4. package/dist/canvas/index.js +10 -0
  5. package/dist/canvas/quality-checks.d.ts +75 -0
  6. package/dist/canvas/quality-checks.js +217 -0
  7. package/dist/canvas/ramp.d.ts +45 -0
  8. package/dist/canvas/ramp.js +98 -0
  9. package/dist/capabilities/packs.js +10 -2
  10. package/dist/config.d.ts +1 -1
  11. package/dist/index.d.ts +1 -1
  12. package/dist/index.js +1 -1
  13. package/dist/models/index.d.ts +1 -0
  14. package/dist/models/index.js +2 -0
  15. package/dist/models/model-registry.js +1 -0
  16. package/dist/models/ollama-discovery.d.ts +63 -0
  17. package/dist/models/ollama-discovery.js +172 -0
  18. package/dist/models/providers.js +10 -0
  19. package/dist/platform/tools/canvas-tools.d.ts +3 -1
  20. package/dist/platform/tools/canvas-tools.js +108 -4
  21. package/dist/provider.js +16 -0
  22. package/dist/skills/canvas-exemplars.d.ts +8 -0
  23. package/dist/skills/canvas-exemplars.js +36 -0
  24. package/dist/skills/canvas-icons.d.ts +6 -0
  25. package/dist/skills/canvas-icons.js +84 -0
  26. package/dist/skills/canvas-skills.js +160 -20
  27. package/dist/skills/platform-skills.d.ts +2 -0
  28. package/dist/skills/platform-skills.js +8 -0
  29. package/dist/team/tool-config.js +1 -0
  30. package/package.json +1 -1
package/dist/skills/canvas-exemplars.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /** The light theme-flat exemplar, ready to adapt. */
2
+ export declare const THEME_FLAT_EXEMPLAR = "<div style=\"--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #6B6D75; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #D5D7DE; width: 1000px; background: var(--canvas-bg); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--canvas-fg); padding: 40px;\">\n\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px;\">\n <div style=\"font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: var(--canvas-muted);\">Q3 DELIVERY REVIEW &nbsp;&middot;&nbsp; PLATFORM</div>\n <div style=\"font-size: 11px; letter-spacing: 0.08em; color: var(--canvas-muted);\">as of 6 Sep 2026</div>\n </div>\n\n <div style=\"display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px;\">\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 30px 32px;\">\n <div style=\"font-size: 11px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent); margin-bottom: 16px;\">THE QUARTER IN ONE NUMBER</div>\n <div style=\"font-size: 84px; line-height: 0.94; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-bottom: 12px;\">41<span style=\"font-size: 40px; font-weight: 600; color: var(--canvas-muted);\"> of 47</span></div>\n <div style=\"font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 22em;\">commitments shipped, and the six that slipped share one cause.</div>\n <p style=\"font-size: 14px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0;\">Every delayed item was blocked on the migration, not on capacity. Team throughput rose 12% over Q2 while the queue behind a single dependency grew, which is why headcount is the wrong lever here.</p>\n </div>\n\n <div style=\"display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px;\">\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n <div>\n <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;\">CYCLE TIME</div>\n <div style=\"font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;\">6.2<span style=\"font-size: 15px; font-weight: 500; color: var(--canvas-muted);\"> days</span></div>\n </div>\n <div style=\"font-size: 13px; font-weight: 600; color: var(--canvas-accent); flex: none;\">&#9660; 1.8</div>\n </div>\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n <div>\n <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;\">ESCAPED DEFECTS</div>\n <div style=\"font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;\">3</div>\n </div>\n <div style=\"font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;\">&#9660; 5</div>\n </div>\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n <div>\n <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;\">BLOCKED, NOW</div>\n <div style=\"font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;\">6</div>\n </div>\n <div style=\"font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;\">&#9650; 4</div>\n </div>\n </div>\n </div>\n\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\">\n\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;\">\n <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 18px;\">SHIPPED PER SPRINT</div>\n <svg width=\"100%\" height=\"150\" viewBox=\"0 0 420 150\" style=\"display: block; overflow: visible;\">\n <line x1=\"0\" y1=\"126\" x2=\"420\" y2=\"126\" style=\"stroke: var(--canvas-hairline, var(--canvas-border));\" stroke-width=\"1\"></line>\n <rect x=\"10\" y=\"72\" width=\"46\" height=\"54\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n <text x=\"33\" y=\"62\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">6</text>\n <text x=\"33\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S1</text>\n <rect x=\"76\" y=\"45\" width=\"46\" height=\"81\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n <text x=\"99\" y=\"35\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">9</text>\n <text x=\"99\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S2</text>\n <rect x=\"142\" y=\"54\" width=\"46\" height=\"72\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n <text x=\"165\" y=\"44\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">8</text>\n <text x=\"165\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S3</text>\n <rect x=\"208\" y=\"27\" width=\"46\" height=\"99\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n <text x=\"231\" y=\"17\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">11</text>\n <text x=\"231\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S4</text>\n <rect x=\"274\" y=\"99\" width=\"46\" height=\"27\" style=\"fill: var(--canvas-accent);\"></rect>\n <text x=\"297\" y=\"89\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-accent); font-family: system-ui, sans-serif;\">3</text>\n <text x=\"297\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S5</text>\n <rect x=\"340\" y=\"90\" width=\"46\" height=\"36\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n <text x=\"363\" y=\"80\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">4</text>\n <text x=\"363\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S6</text>\n </svg>\n <div style=\"font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 20px; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding-top: 12px;\">Sprint 5 is when the migration landed in the critical path.</div>\n </div>\n\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;\">\n <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 14px;\">THE SIX THAT SLIPPED</div>\n <div style=\"background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border));\">\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);\"><span>COMMITMENT</span><span>BLOCKED BY</span><span style=\"text-align: right;\">DAYS</span></div>\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Billing export</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">21</span></div>\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Audit trail</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">18</span></div>\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">SSO for teams</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">14</span></div>\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Usage alerts</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">11</span></div>\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Retention job</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">9</span></div>\n <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Region failover</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">6</span></div>\n </div>\n <div style=\"font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 16px;\">One dependency, 79 days of accumulated delay.</div>\n </div>\n </div>\n\n <div style=\"border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); margin-top: 26px; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted);\">\n <span>PLATFORM &nbsp;&middot;&nbsp; QUARTERLY REVIEW</span>\n <span>Source: delivery board, sprints 1&ndash;6</span>\n </div>\n </div>";
3
+ /** The same markup in dark: only these nine values change. */
4
+ export declare const THEME_FLAT_DARK_TOKENS = "--canvas-bg: #17181C; --canvas-fg: #ECEDF1; --canvas-muted: #9A9CA6; --canvas-accent: #FB7B4B; --canvas-card: #22242A; --canvas-border: #31333B; --canvas-surface-1: #22242A; --canvas-surface-2: #1B1D22; --canvas-hairline: #31333B";
5
+ /** The app-screen exemplar — a single UI screen, four surfaces. */
6
+ export declare const APP_SCREEN_EXEMPLAR = "<div style=\"--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #6B6D75; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #DCDEE4; width: 1000px; background: var(--canvas-surface-1, var(--canvas-card)); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--canvas-fg); display: grid; grid-template-columns: 232px 1fr;\">\n\n <div style=\"border-right: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; flex-direction: column; min-height: 640px;\">\n <div style=\"padding: 18px 18px 16px; display: flex; align-items: center; gap: 10px;\">\n <span style=\"width: 28px; height: 28px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; flex: none;\">CO</span>\n <span style=\"font-size: 15px; font-weight: 700; letter-spacing: -0.01em;\">Cohort</span>\n </div>\n\n <div style=\"padding: 6px 10px 0; display: flex; flex-direction: column; gap: 1px;\">\n <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--canvas-accent) 10%, var(--canvas-surface-1, var(--canvas-card))); box-shadow: inset 2px 0 0 var(--canvas-accent); font-size: 13.5px; font-weight: 600;\">\n <span style=\"font-size: 13px; flex: none; color: var(--canvas-accent);\">&#9632;</span>Overview\n </div>\n <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><circle cx=\"6\" cy=\"6\" r=\"2.5\"></circle><path d=\"M2 13.5c.8-2.2 2.2-3.3 4-3.3s3.2 1.1 4 3.3\"></path><path d=\"M11 4.2a2.5 2.5 0 0 1 0 4.6\"></path></svg>Applicants\n <span style=\"margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;\">248</span>\n </div>\n <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"10\" rx=\"1\"></rect><path d=\"M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5\"></path></svg>Interviews\n <span style=\"margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;\">67</span>\n </div>\n <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><path d=\"M9.5 2H4.5A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V5.5z\"></path><path d=\"M9.5 2v3.5H13\"></path></svg>Documents\n </div>\n <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><path d=\"M2 14h12\"></path><path d=\"M4.5 14V9M8 14V4.5M11.5 14V7\"></path></svg>Reports\n </div>\n <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><path d=\"M2 5.5A1.5 1.5 0 0 1 3.5 4h2.2l1.3 1.6h5.5A1.5 1.5 0 0 1 14 7.1v5.4A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5z\"></path></svg>Programmes\n <span style=\"margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;\">12</span>\n </div>\n </div>\n\n <div style=\"margin-top: auto; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 12px 22px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Settings</div>\n <div style=\"border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 14px 18px; display: flex; align-items: center; gap: 10px;\">\n <span style=\"width: 30px; height: 30px; background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 11px; font-weight: 600; color: var(--canvas-muted); display: flex; align-items: center; justify-content: center; flex: none;\">RM</span>\n <span>\n <span style=\"display: block; font-size: 13px; font-weight: 600;\">Rita Marchetti</span>\n <span style=\"display: block; font-size: 11px; color: var(--canvas-muted);\">Admissions lead</span>\n </span>\n </div>\n </div>\n\n <div style=\"display: flex; flex-direction: column;\">\n <div style=\"padding: 20px 28px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;\">\n <div>\n <div style=\"font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted); margin-bottom: 6px;\">Autumn 2027 &nbsp;/&nbsp; Admissions</div>\n <div style=\"font-size: 26px; font-weight: 700; letter-spacing: -0.022em;\">Overview</div>\n </div>\n <div style=\"display: flex; align-items: center; gap: 8px; flex: none;\">\n <span style=\"font-size: 13px; padding: 8px 14px; border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Export</span>\n <span style=\"font-size: 13px; font-weight: 600; padding: 9px 15px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card));\">New applicant</span>\n </div>\n </div>\n <div style=\"background: var(--canvas-surface-2, var(--canvas-bg)); padding: 20px 28px 26px; flex: 1; display: flex; flex-direction: column; gap: 16px;\">\n\n <div style=\"display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px;\">\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px;\">\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px;\">\n <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent);\">THIS WEEK</div>\n <div style=\"font-size: 11px; color: var(--canvas-muted);\">updated 4 min ago</div>\n </div>\n <div style=\"font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 10px; max-width: 20em;\">Interviews are keeping pace. Document review is not.</div>\n <p style=\"font-size: 13.5px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0 0 16px;\">248 applicants across 12 programmes, and 67 have reached interview. The queue sits at document review, where 41 files have waited more than five days &mdash; two programmes account for 30 of them.</p>\n <span style=\"display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--canvas-accent); border-bottom: 1px solid var(--canvas-accent); padding-bottom: 1px;\">Review the 41 waiting files</span>\n </div>\n\n <div style=\"background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;\">\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 12px;\">\n <span style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600;\">PIPELINE</span>\n <span style=\"font-size: 10px; letter-spacing: 0.06em; opacity: 0.62;\">stage by stage</span>\n </div>\n <div style=\"display: flex; flex-direction: column; gap: 11px;\">\n <div>\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Applied</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">248</span></div>\n <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 100%; background: rgba(255,255,255,0.62);\"></div></div>\n </div>\n <div>\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Documents in</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">193</span></div>\n <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 78%; background: rgba(255,255,255,0.62);\"></div></div>\n </div>\n <div>\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Reviewed</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">152</span></div>\n <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 61%; background: var(--canvas-accent);\"></div></div>\n </div>\n <div>\n <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Interviewed</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">67</span></div>\n <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 27%; background: rgba(255,255,255,0.62);\"></div></div>\n </div>\n </div>\n <div style=\"margin-top: auto; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 11px; font-size: 12px; opacity: 0.82;\">41 files stalled at review</div>\n </div>\n </div>\n\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <span style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-right: 4px;\">FACULTY</span>\n <span style=\"font-size: 12.5px; font-weight: 600; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-fg);\">All <span style=\"color: var(--canvas-muted); font-weight: 400;\">12</span></span>\n <span style=\"font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Design <span style=\"color: var(--canvas-muted);\">4</span></span>\n <span style=\"font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Business <span style=\"color: var(--canvas-muted);\">5</span></span>\n <span style=\"font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Engineering <span style=\"color: var(--canvas-muted);\">3</span></span>\n </div>\n\n <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border));\">\n <div style=\"padding: 13px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n <span style=\"font-size: 14px; font-weight: 600;\">Programmes needing attention</span>\n <span style=\"font-size: 12px; color: var(--canvas-muted);\">4 of 12</span>\n </div>\n <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 9px 18px; background: var(--canvas-surface-2, var(--canvas-bg)); border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);\">\n <span>PROGRAMME</span><span>REVIEW</span><span style=\"text-align: right;\">APPLIED</span><span style=\"text-align: right;\">OFFERS</span><span style=\"text-align: right;\">WAITING</span>\n </div>\n <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;\">\n <span style=\"font-weight: 600;\">MSc Product Design</span>\n <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 38%; background: var(--canvas-accent);\"></span></span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">31</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">4</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);\">17</span>\n </div>\n <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;\">\n <span style=\"font-weight: 600;\">MBA Sustainable Business</span>\n <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 46%; background: var(--canvas-accent);\"></span></span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">28</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">6</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);\">13</span>\n </div>\n <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;\">\n <span style=\"font-weight: 600;\">MA Curation</span>\n <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 71%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));\"></span></span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">19</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">5</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">7</span>\n </div>\n <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; font-size: 13px; align-items: center;\">\n <span style=\"font-weight: 600;\">MEng Robotics</span>\n <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 83%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));\"></span></span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">24</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">9</span>\n <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">4</span>\n </div>\n </div>\n </div>\n </div>\n </div>";
7
+ export declare const canvasExemplarInfographicSkill: import("@compilr-dev/agents").Skill;
8
+ export declare const canvasExemplarAppScreenSkill: import("@compilr-dev/agents").Skill;
package/dist/skills/canvas-exemplars.js ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Worked exemplars — the samples an agent reads before authoring.
3
+ *
4
+ * ⚠️ GENERATED by scripts/build-canvas-exemplars.mjs from the design handoff. Do not
5
+ * edit by hand; re-run the script.
6
+ *
7
+ * ⚠️ WHY EXEMPLARS AND NOT MORE ADJECTIVES. The previous guidance described quality in
8
+ * words — "clean, minimal, generous whitespace" — so every session re-derived taste from
9
+ * scratch. Shown a real screenshot the model produces good work immediately, so what was
10
+ * missing was never capability; it was a reference.
11
+ *
12
+ * ⚠️ TWO SKILLS, NOT ONE. Together they are ~7.7K tokens and an agent authoring an
13
+ * infographic has no use for the app-screen markup, so canvas_guide serves them
14
+ * separately and each costs only what it is worth.
15
+ */
16
+ import { defineSkill } from '@compilr-dev/agents';
17
+ /** The light theme-flat exemplar, ready to adapt. */
18
+ export const THEME_FLAT_EXEMPLAR = '<div style="--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #6B6D75; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #D5D7DE; width: 1000px; background: var(--canvas-bg); font-family: system-ui, -apple-system, \'Segoe UI\', Roboto, sans-serif; color: var(--canvas-fg); padding: 40px;">\n\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px;">\n <div style="font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: var(--canvas-muted);">Q3 DELIVERY REVIEW &nbsp;&middot;&nbsp; PLATFORM</div>\n <div style="font-size: 11px; letter-spacing: 0.08em; color: var(--canvas-muted);">as of 6 Sep 2026</div>\n </div>\n\n <div style="display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px;">\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 30px 32px;">\n <div style="font-size: 11px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent); margin-bottom: 16px;">THE QUARTER IN ONE NUMBER</div>\n <div style="font-size: 84px; line-height: 0.94; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-bottom: 12px;">41<span style="font-size: 40px; font-weight: 600; color: var(--canvas-muted);"> of 47</span></div>\n <div style="font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 22em;">commitments shipped, and the six that slipped share one cause.</div>\n <p style="font-size: 14px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0;">Every delayed item was blocked on the migration, not on capacity. Team throughput rose 12% over Q2 while the queue behind a single dependency grew, which is why headcount is the wrong lever here.</p>\n </div>\n\n <div style="display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px;">\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <div>\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;">CYCLE TIME</div>\n <div style="font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">6.2<span style="font-size: 15px; font-weight: 500; color: var(--canvas-muted);"> days</span></div>\n </div>\n <div style="font-size: 13px; font-weight: 600; color: var(--canvas-accent); flex: none;">&#9660; 1.8</div>\n </div>\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <div>\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;">ESCAPED DEFECTS</div>\n <div style="font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">3</div>\n </div>\n <div style="font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;">&#9660; 5</div>\n </div>\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <div>\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;">BLOCKED, NOW</div>\n <div style="font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">6</div>\n </div>\n <div style="font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;">&#9650; 4</div>\n </div>\n </div>\n </div>\n\n <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">\n\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;">\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 18px;">SHIPPED PER SPRINT</div>\n <svg width="100%" height="150" viewBox="0 0 420 150" style="display: block; overflow: visible;">\n <line x1="0" y1="126" x2="420" y2="126" style="stroke: var(--canvas-hairline, var(--canvas-border));" stroke-width="1"></line>\n <rect x="10" y="72" width="46" height="54" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="33" y="62" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">6</text>\n <text x="33" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S1</text>\n <rect x="76" y="45" width="46" height="81" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="99" y="35" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">9</text>\n <text x="99" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S2</text>\n <rect x="142" y="54" width="46" height="72" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="165" y="44" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">8</text>\n <text x="165" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S3</text>\n <rect x="208" y="27" width="46" height="99" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="231" y="17" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">11</text>\n <text x="231" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S4</text>\n <rect x="274" y="99" width="46" height="27" style="fill: var(--canvas-accent);"></rect>\n <text x="297" y="89" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-accent); font-family: system-ui, sans-serif;">3</text>\n <text x="297" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S5</text>\n <rect x="340" y="90" width="46" height="36" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="363" y="80" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">4</text>\n <text x="363" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S6</text>\n </svg>\n <div style="font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 20px; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding-top: 12px;">Sprint 5 is when the migration landed in the critical path.</div>\n </div>\n\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;">\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 14px;">THE SIX THAT SLIPPED</div>\n <div style="background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border));">\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);"><span>COMMITMENT</span><span>BLOCKED BY</span><span style="text-align: right;">DAYS</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Billing export</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">21</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Audit trail</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">18</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">SSO for teams</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">14</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Usage alerts</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">11</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Retention job</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">9</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Region failover</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">6</span></div>\n </div>\n <div style="font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 16px;">One dependency, 79 days of accumulated delay.</div>\n </div>\n </div>\n\n <div style="border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); margin-top: 26px; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted);">\n <span>PLATFORM &nbsp;&middot;&nbsp; QUARTERLY REVIEW</span>\n <span>Source: delivery board, sprints 1&ndash;6</span>\n </div>\n </div>';
19
+ /** The same markup in dark: only these nine values change. */
20
+ export const THEME_FLAT_DARK_TOKENS = '--canvas-bg: #17181C; --canvas-fg: #ECEDF1; --canvas-muted: #9A9CA6; --canvas-accent: #FB7B4B; --canvas-card: #22242A; --canvas-border: #31333B; --canvas-surface-1: #22242A; --canvas-surface-2: #1B1D22; --canvas-hairline: #31333B';
21
+ /** The app-screen exemplar — a single UI screen, four surfaces. */
22
+ export const APP_SCREEN_EXEMPLAR = '<div style="--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #6B6D75; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #DCDEE4; width: 1000px; background: var(--canvas-surface-1, var(--canvas-card)); font-family: system-ui, -apple-system, \'Segoe UI\', Roboto, sans-serif; color: var(--canvas-fg); display: grid; grid-template-columns: 232px 1fr;">\n\n <div style="border-right: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; flex-direction: column; min-height: 640px;">\n <div style="padding: 18px 18px 16px; display: flex; align-items: center; gap: 10px;">\n <span style="width: 28px; height: 28px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; flex: none;">CO</span>\n <span style="font-size: 15px; font-weight: 700; letter-spacing: -0.01em;">Cohort</span>\n </div>\n\n <div style="padding: 6px 10px 0; display: flex; flex-direction: column; gap: 1px;">\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--canvas-accent) 10%, var(--canvas-surface-1, var(--canvas-card))); box-shadow: inset 2px 0 0 var(--canvas-accent); font-size: 13.5px; font-weight: 600;">\n <span style="font-size: 13px; flex: none; color: var(--canvas-accent);">&#9632;</span>Overview\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><circle cx="6" cy="6" r="2.5"></circle><path d="M2 13.5c.8-2.2 2.2-3.3 4-3.3s3.2 1.1 4 3.3"></path><path d="M11 4.2a2.5 2.5 0 0 1 0 4.6"></path></svg>Applicants\n <span style="margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;">248</span>\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><rect x="2.5" y="3.5" width="11" height="10" rx="1"></rect><path d="M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5"></path></svg>Interviews\n <span style="margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;">67</span>\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><path d="M9.5 2H4.5A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V5.5z"></path><path d="M9.5 2v3.5H13"></path></svg>Documents\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><path d="M2 14h12"></path><path d="M4.5 14V9M8 14V4.5M11.5 14V7"></path></svg>Reports\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><path d="M2 5.5A1.5 1.5 0 0 1 3.5 4h2.2l1.3 1.6h5.5A1.5 1.5 0 0 1 14 7.1v5.4A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5z"></path></svg>Programmes\n <span style="margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;">12</span>\n </div>\n </div>\n\n <div style="margin-top: auto; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 12px 22px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Settings</div>\n <div style="border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 14px 18px; display: flex; align-items: center; gap: 10px;">\n <span style="width: 30px; height: 30px; background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 11px; font-weight: 600; color: var(--canvas-muted); display: flex; align-items: center; justify-content: center; flex: none;">RM</span>\n <span>\n <span style="display: block; font-size: 13px; font-weight: 600;">Rita Marchetti</span>\n <span style="display: block; font-size: 11px; color: var(--canvas-muted);">Admissions lead</span>\n </span>\n </div>\n </div>\n\n <div style="display: flex; flex-direction: column;">\n <div style="padding: 20px 28px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;">\n <div>\n <div style="font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted); margin-bottom: 6px;">Autumn 2027 &nbsp;/&nbsp; Admissions</div>\n <div style="font-size: 26px; font-weight: 700; letter-spacing: -0.022em;">Overview</div>\n </div>\n <div style="display: flex; align-items: center; gap: 8px; flex: none;">\n <span style="font-size: 13px; padding: 8px 14px; border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Export</span>\n <span style="font-size: 13px; font-weight: 600; padding: 9px 15px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card));">New applicant</span>\n </div>\n </div>\n <div style="background: var(--canvas-surface-2, var(--canvas-bg)); padding: 20px 28px 26px; flex: 1; display: flex; flex-direction: column; gap: 16px;">\n\n <div style="display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px;">\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px;">\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px;">\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent);">THIS WEEK</div>\n <div style="font-size: 11px; color: var(--canvas-muted);">updated 4 min ago</div>\n </div>\n <div style="font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 10px; max-width: 20em;">Interviews are keeping pace. Document review is not.</div>\n <p style="font-size: 13.5px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0 0 16px;">248 applicants across 12 programmes, and 67 have reached interview. The queue sits at document review, where 41 files have waited more than five days &mdash; two programmes account for 30 of them.</p>\n <span style="display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--canvas-accent); border-bottom: 1px solid var(--canvas-accent); padding-bottom: 1px;">Review the 41 waiting files</span>\n </div>\n\n <div style="background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;">\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 12px;">\n <span style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600;">PIPELINE</span>\n <span style="font-size: 10px; letter-spacing: 0.06em; opacity: 0.62;">stage by stage</span>\n </div>\n <div style="display: flex; flex-direction: column; gap: 11px;">\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Applied</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">248</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 100%; background: rgba(255,255,255,0.62);"></div></div>\n </div>\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Documents in</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">193</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 78%; background: rgba(255,255,255,0.62);"></div></div>\n </div>\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Reviewed</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">152</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 61%; background: var(--canvas-accent);"></div></div>\n </div>\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Interviewed</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">67</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 27%; background: rgba(255,255,255,0.62);"></div></div>\n </div>\n </div>\n <div style="margin-top: auto; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 11px; font-size: 12px; opacity: 0.82;">41 files stalled at review</div>\n </div>\n </div>\n\n <div style="display: flex; align-items: center; gap: 8px;">\n <span style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-right: 4px;">FACULTY</span>\n <span style="font-size: 12.5px; font-weight: 600; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-fg);">All <span style="color: var(--canvas-muted); font-weight: 400;">12</span></span>\n <span style="font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Design <span style="color: var(--canvas-muted);">4</span></span>\n <span style="font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Business <span style="color: var(--canvas-muted);">5</span></span>\n <span style="font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Engineering <span style="color: var(--canvas-muted);">3</span></span>\n </div>\n\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border));">\n <div style="padding: 13px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <span style="font-size: 14px; font-weight: 600;">Programmes needing attention</span>\n <span style="font-size: 12px; color: var(--canvas-muted);">4 of 12</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 9px 18px; background: var(--canvas-surface-2, var(--canvas-bg)); border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);">\n <span>PROGRAMME</span><span>REVIEW</span><span style="text-align: right;">APPLIED</span><span style="text-align: right;">OFFERS</span><span style="text-align: right;">WAITING</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MSc Product Design</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 38%; background: var(--canvas-accent);"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">31</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">4</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);">17</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MBA Sustainable Business</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 46%; background: var(--canvas-accent);"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">28</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">6</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);">13</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MA Curation</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 71%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">19</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">5</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">7</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MEng Robotics</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 83%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">24</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">9</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">4</span>\n </div>\n </div>\n </div>\n </div>\n </div>';
23
+ export const canvasExemplarInfographicSkill = defineSkill({
24
+ name: 'canvas-exemplar-infographic',
25
+ description: 'A worked theme-flat infographic to read before authoring one — sandbox-legal markup ' +
26
+ 'showing the hierarchy, grid and restraint the style calls for.',
27
+ tags: ['visual', 'canvas', 'design', 'exemplar'],
28
+ prompt: 'A worked **theme-flat infographic**. Read it, then build yours to the same shape.\n\n⚠️ This is a reference to ADAPT, not a template to fill in. Copying the words produces\na canvas about someone else\'s quarter. What to carry over is the SHAPE: one dominant\nelement, a claim rather than a label as the headline, the accent used once, figures that\nreconcile, density that varies.\n\n⚠️ It is already sandbox-legal — system fonts, inline styles, theme tokens, an explicit\nbackground, no network. Keep the outer div that declares the tokens: it is what lets the\ncanvas render on any theme, and the var(--canvas-surface-1, var(--canvas-card)) fallbacks\nkeep it working on a host that has not shipped the elevation ramp.\n\n```html\n<div style="--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #6B6D75; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #D5D7DE; width: 1000px; background: var(--canvas-bg); font-family: system-ui, -apple-system, \'Segoe UI\', Roboto, sans-serif; color: var(--canvas-fg); padding: 40px;">\n\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px;">\n <div style="font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: var(--canvas-muted);">Q3 DELIVERY REVIEW &nbsp;&middot;&nbsp; PLATFORM</div>\n <div style="font-size: 11px; letter-spacing: 0.08em; color: var(--canvas-muted);">as of 6 Sep 2026</div>\n </div>\n\n <div style="display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px;">\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 30px 32px;">\n <div style="font-size: 11px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent); margin-bottom: 16px;">THE QUARTER IN ONE NUMBER</div>\n <div style="font-size: 84px; line-height: 0.94; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-bottom: 12px;">41<span style="font-size: 40px; font-weight: 600; color: var(--canvas-muted);"> of 47</span></div>\n <div style="font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 22em;">commitments shipped, and the six that slipped share one cause.</div>\n <p style="font-size: 14px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0;">Every delayed item was blocked on the migration, not on capacity. Team throughput rose 12% over Q2 while the queue behind a single dependency grew, which is why headcount is the wrong lever here.</p>\n </div>\n\n <div style="display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px;">\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <div>\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;">CYCLE TIME</div>\n <div style="font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">6.2<span style="font-size: 15px; font-weight: 500; color: var(--canvas-muted);"> days</span></div>\n </div>\n <div style="font-size: 13px; font-weight: 600; color: var(--canvas-accent); flex: none;">&#9660; 1.8</div>\n </div>\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <div>\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;">ESCAPED DEFECTS</div>\n <div style="font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">3</div>\n </div>\n <div style="font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;">&#9660; 5</div>\n </div>\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <div>\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;">BLOCKED, NOW</div>\n <div style="font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;">6</div>\n </div>\n <div style="font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;">&#9650; 4</div>\n </div>\n </div>\n </div>\n\n <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">\n\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;">\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 18px;">SHIPPED PER SPRINT</div>\n <svg width="100%" height="150" viewBox="0 0 420 150" style="display: block; overflow: visible;">\n <line x1="0" y1="126" x2="420" y2="126" style="stroke: var(--canvas-hairline, var(--canvas-border));" stroke-width="1"></line>\n <rect x="10" y="72" width="46" height="54" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="33" y="62" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">6</text>\n <text x="33" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S1</text>\n <rect x="76" y="45" width="46" height="81" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="99" y="35" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">9</text>\n <text x="99" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S2</text>\n <rect x="142" y="54" width="46" height="72" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="165" y="44" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">8</text>\n <text x="165" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S3</text>\n <rect x="208" y="27" width="46" height="99" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="231" y="17" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">11</text>\n <text x="231" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S4</text>\n <rect x="274" y="99" width="46" height="27" style="fill: var(--canvas-accent);"></rect>\n <text x="297" y="89" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-accent); font-family: system-ui, sans-serif;">3</text>\n <text x="297" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S5</text>\n <rect x="340" y="90" width="46" height="36" style="fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));"></rect>\n <text x="363" y="80" text-anchor="middle" font-size="13" font-weight="700" style="fill: var(--canvas-fg); font-family: system-ui, sans-serif;">4</text>\n <text x="363" y="142" text-anchor="middle" font-size="11" style="fill: var(--canvas-muted); font-family: system-ui, sans-serif;">S6</text>\n </svg>\n <div style="font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 20px; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding-top: 12px;">Sprint 5 is when the migration landed in the critical path.</div>\n </div>\n\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;">\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 14px;">THE SIX THAT SLIPPED</div>\n <div style="background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border));">\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);"><span>COMMITMENT</span><span>BLOCKED BY</span><span style="text-align: right;">DAYS</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Billing export</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">21</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Audit trail</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">18</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">SSO for teams</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">14</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Usage alerts</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">11</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Retention job</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">9</span></div>\n <div style="display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; font-size: 13px; align-items: baseline;"><span style="font-weight: 600;">Region failover</span><span style="color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));">migration</span><span style="text-align: right; font-variant-numeric: tabular-nums;">6</span></div>\n </div>\n <div style="font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 16px;">One dependency, 79 days of accumulated delay.</div>\n </div>\n </div>\n\n <div style="border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); margin-top: 26px; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted);">\n <span>PLATFORM &nbsp;&middot;&nbsp; QUARTERLY REVIEW</span>\n <span>Source: delivery board, sprints 1&ndash;6</span>\n </div>\n </div>\n```\n\n## The same design, dark\n\nNothing about the markup changes — only these nine values on the wrapper. A palette swap\nis not a different design, and if you find yourself restructuring for dark, something in\nthe structure was carrying the colour\'s weight.\n\n```\n--canvas-bg: #17181C; --canvas-fg: #ECEDF1; --canvas-muted: #9A9CA6; --canvas-accent: #FB7B4B; --canvas-card: #22242A; --canvas-border: #31333B; --canvas-surface-1: #22242A; --canvas-surface-2: #1B1D22; --canvas-hairline: #31333B\n```',
29
+ });
30
+ export const canvasExemplarAppScreenSkill = defineSkill({
31
+ name: 'canvas-exemplar-app-screen',
32
+ description: 'A worked app-screen mock to read before drawing a UI — four surfaces, one active ' +
33
+ 'state, a finding rather than a page name.',
34
+ tags: ['visual', 'canvas', 'design', 'exemplar'],
35
+ prompt: 'A worked **app-screen mock** — one screen of an application, not a wireframe.\n\n⚠️ This is a reference to ADAPT, not a template to fill in. Copying the words produces\na canvas about someone else\'s quarter. What to carry over is the SHAPE: one dominant\nelement, a claim rather than a label as the headline, the accent used once, figures that\nreconcile, density that varies.\n\n⚠️ It is already sandbox-legal — system fonts, inline styles, theme tokens, an explicit\nbackground, no network. Keep the outer div that declares the tokens: it is what lets the\ncanvas render on any theme, and the var(--canvas-surface-1, var(--canvas-card)) fallbacks\nkeep it working on a host that has not shipped the elevation ramp.\n\n⚠️ Note what it does NOT draw: no traffic lights, no browser tab bar, no URL field.\nWindow chrome costs vertical space and dates the mock; the app\'s own header is the frame.\n\n```html\n<div style="--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #6B6D75; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #DCDEE4; width: 1000px; background: var(--canvas-surface-1, var(--canvas-card)); font-family: system-ui, -apple-system, \'Segoe UI\', Roboto, sans-serif; color: var(--canvas-fg); display: grid; grid-template-columns: 232px 1fr;">\n\n <div style="border-right: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; flex-direction: column; min-height: 640px;">\n <div style="padding: 18px 18px 16px; display: flex; align-items: center; gap: 10px;">\n <span style="width: 28px; height: 28px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; flex: none;">CO</span>\n <span style="font-size: 15px; font-weight: 700; letter-spacing: -0.01em;">Cohort</span>\n </div>\n\n <div style="padding: 6px 10px 0; display: flex; flex-direction: column; gap: 1px;">\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--canvas-accent) 10%, var(--canvas-surface-1, var(--canvas-card))); box-shadow: inset 2px 0 0 var(--canvas-accent); font-size: 13.5px; font-weight: 600;">\n <span style="font-size: 13px; flex: none; color: var(--canvas-accent);">&#9632;</span>Overview\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><circle cx="6" cy="6" r="2.5"></circle><path d="M2 13.5c.8-2.2 2.2-3.3 4-3.3s3.2 1.1 4 3.3"></path><path d="M11 4.2a2.5 2.5 0 0 1 0 4.6"></path></svg>Applicants\n <span style="margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;">248</span>\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><rect x="2.5" y="3.5" width="11" height="10" rx="1"></rect><path d="M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5"></path></svg>Interviews\n <span style="margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;">67</span>\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><path d="M9.5 2H4.5A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V5.5z"></path><path d="M9.5 2v3.5H13"></path></svg>Documents\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><path d="M2 14h12"></path><path d="M4.5 14V9M8 14V4.5M11.5 14V7"></path></svg>Reports\n </div>\n <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex: none; color: var(--canvas-muted);"><path d="M2 5.5A1.5 1.5 0 0 1 3.5 4h2.2l1.3 1.6h5.5A1.5 1.5 0 0 1 14 7.1v5.4A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5z"></path></svg>Programmes\n <span style="margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;">12</span>\n </div>\n </div>\n\n <div style="margin-top: auto; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 12px 22px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Settings</div>\n <div style="border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 14px 18px; display: flex; align-items: center; gap: 10px;">\n <span style="width: 30px; height: 30px; background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 11px; font-weight: 600; color: var(--canvas-muted); display: flex; align-items: center; justify-content: center; flex: none;">RM</span>\n <span>\n <span style="display: block; font-size: 13px; font-weight: 600;">Rita Marchetti</span>\n <span style="display: block; font-size: 11px; color: var(--canvas-muted);">Admissions lead</span>\n </span>\n </div>\n </div>\n\n <div style="display: flex; flex-direction: column;">\n <div style="padding: 20px 28px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;">\n <div>\n <div style="font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted); margin-bottom: 6px;">Autumn 2027 &nbsp;/&nbsp; Admissions</div>\n <div style="font-size: 26px; font-weight: 700; letter-spacing: -0.022em;">Overview</div>\n </div>\n <div style="display: flex; align-items: center; gap: 8px; flex: none;">\n <span style="font-size: 13px; padding: 8px 14px; border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Export</span>\n <span style="font-size: 13px; font-weight: 600; padding: 9px 15px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card));">New applicant</span>\n </div>\n </div>\n <div style="background: var(--canvas-surface-2, var(--canvas-bg)); padding: 20px 28px 26px; flex: 1; display: flex; flex-direction: column; gap: 16px;">\n\n <div style="display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px;">\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px;">\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px;">\n <div style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent);">THIS WEEK</div>\n <div style="font-size: 11px; color: var(--canvas-muted);">updated 4 min ago</div>\n </div>\n <div style="font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 10px; max-width: 20em;">Interviews are keeping pace. Document review is not.</div>\n <p style="font-size: 13.5px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0 0 16px;">248 applicants across 12 programmes, and 67 have reached interview. The queue sits at document review, where 41 files have waited more than five days &mdash; two programmes account for 30 of them.</p>\n <span style="display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--canvas-accent); border-bottom: 1px solid var(--canvas-accent); padding-bottom: 1px;">Review the 41 waiting files</span>\n </div>\n\n <div style="background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;">\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 12px;">\n <span style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600;">PIPELINE</span>\n <span style="font-size: 10px; letter-spacing: 0.06em; opacity: 0.62;">stage by stage</span>\n </div>\n <div style="display: flex; flex-direction: column; gap: 11px;">\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Applied</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">248</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 100%; background: rgba(255,255,255,0.62);"></div></div>\n </div>\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Documents in</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">193</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 78%; background: rgba(255,255,255,0.62);"></div></div>\n </div>\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Reviewed</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">152</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 61%; background: var(--canvas-accent);"></div></div>\n </div>\n <div>\n <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;"><span style="opacity: 0.75;">Interviewed</span><span style="font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;">67</span></div>\n <div style="height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;"><div style="height: 4px; width: 27%; background: rgba(255,255,255,0.62);"></div></div>\n </div>\n </div>\n <div style="margin-top: auto; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 11px; font-size: 12px; opacity: 0.82;">41 files stalled at review</div>\n </div>\n </div>\n\n <div style="display: flex; align-items: center; gap: 8px;">\n <span style="font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-right: 4px;">FACULTY</span>\n <span style="font-size: 12.5px; font-weight: 600; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-fg);">All <span style="color: var(--canvas-muted); font-weight: 400;">12</span></span>\n <span style="font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Design <span style="color: var(--canvas-muted);">4</span></span>\n <span style="font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Business <span style="color: var(--canvas-muted);">5</span></span>\n <span style="font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));">Engineering <span style="color: var(--canvas-muted);">3</span></span>\n </div>\n\n <div style="background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border));">\n <div style="padding: 13px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: baseline; justify-content: space-between; gap: 16px;">\n <span style="font-size: 14px; font-weight: 600;">Programmes needing attention</span>\n <span style="font-size: 12px; color: var(--canvas-muted);">4 of 12</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 9px 18px; background: var(--canvas-surface-2, var(--canvas-bg)); border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);">\n <span>PROGRAMME</span><span>REVIEW</span><span style="text-align: right;">APPLIED</span><span style="text-align: right;">OFFERS</span><span style="text-align: right;">WAITING</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MSc Product Design</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 38%; background: var(--canvas-accent);"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">31</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">4</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);">17</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MBA Sustainable Business</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 46%; background: var(--canvas-accent);"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">28</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">6</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);">13</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MA Curation</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 71%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">19</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">5</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">7</span>\n </div>\n <div style="display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; font-size: 13px; align-items: center;">\n <span style="font-weight: 600;">MEng Robotics</span>\n <span style="height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));"><span style="display: block; height: 5px; width: 83%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));"></span></span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">24</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">9</span>\n <span style="text-align: right; font-variant-numeric: tabular-nums;">4</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n```',
36
+ });
package/dist/skills/canvas-icons.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /** Identical for every icon; the agent emits this and drops one body inside. */
2
+ export declare const ICON_WRAPPER: string;
3
+ export declare const ICON_BODIES: Record<string, string>;
4
+ /** The one deliberate exception to stroke-only. */
5
+ export declare const ACTIVE_MARKER = "<rect x=\"4\" y=\"4\" width=\"8\" height=\"8\" fill=\"currentColor\" stroke=\"none\"/>";
6
+ export declare const canvasIconsSkill: import("@compilr-dev/agents").Skill;
package/dist/skills/canvas-icons.js ADDED
@@ -0,0 +1,84 @@
1
+ /**
2
+ * The twenty-shape icon set a canvas may use.
3
+ *
4
+ * ⚠️ WHY A FIXED SET. `infographic`'s "icons & shapes" section said "inline SVG,
5
+ * consistent stroke width" and gave the agent nothing to be consistent WITH, so every
6
+ * canvas invented its own paths — and where invention felt too hard, emoji arrived
7
+ * instead. The counter-example in the design handoff has a bar chart, a clock, a snake
8
+ * and an hourglass as its stat-tile icons.
9
+ *
10
+ * ⚠️ SMALL ON PURPOSE. One wrapper plus twenty bodies is a few hundred tokens; twenty
11
+ * complete SVG elements would be several thousand, which is the difference between a set
12
+ * an agent reads and one it skips.
13
+ */
14
+ import { defineSkill } from '@compilr-dev/agents';
15
+ /** Identical for every icon; the agent emits this and drops one body inside. */
16
+ export const ICON_WRAPPER = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" ' +
17
+ 'stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">BODY</svg>';
18
+ export const ICON_BODIES = {
19
+ grid: '<rect x="2" y="2" width="12" height="12"/><path d="M8 2v12M2 8h12"/>',
20
+ list: '<path d="M5.5 4H14M5.5 8H14M5.5 12H14M2.5 4h.01M2.5 8h.01M2.5 12h.01"/>',
21
+ users: '<circle cx="6" cy="6" r="2.5"/><path d="M2 13.5c.8-2.2 2.2-3.3 4-3.3s3.2 1.1 4 3.3"/><path d="M11 4.2a2.5 2.5 0 0 1 0 4.6"/>',
22
+ document: '<path d="M9.5 2H4.5A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V5.5z"/><path d="M9.5 2v3.5H13"/>',
23
+ folder: '<path d="M2 5.5A1.5 1.5 0 0 1 3.5 4h2.2l1.3 1.6h5.5A1.5 1.5 0 0 1 14 7.1v5.4A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5z"/>',
24
+ chart: '<path d="M2 14h12"/><path d="M4.5 14V9M8 14V4.5M11.5 14V7"/>',
25
+ calendar: '<rect x="2.5" y="3.5" width="11" height="10" rx="1"/><path d="M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5"/>',
26
+ clock: '<circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/>',
27
+ search: '<circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/>',
28
+ settings: '<path d="M2 5h6.5M13 5h1M2 11h1M7.5 11H14"/><circle cx="10.5" cy="5" r="1.6"/><circle cx="5" cy="11" r="1.6"/>',
29
+ tag: '<path d="M8.6 2H13a1 1 0 0 1 1 1v4.4l-6.3 6.3a1 1 0 0 1-1.4 0L2.3 9.7a1 1 0 0 1 0-1.4z"/><path d="M11 5h.01"/>',
30
+ 'add-card': '<rect x="2" y="2.5" width="12" height="11" rx="1"/><path d="M8 6v5M5.5 8.5h5"/>',
31
+ plus: '<path d="M8 3v10M3 8h10"/>',
32
+ check: '<path d="M3 8.5 6.5 12 13 4.5"/>',
33
+ close: '<path d="M4 4l8 8M12 4l-8 8"/>',
34
+ alert: '<path d="M8 2.5 14.5 13.5h-13z"/><path d="M8 6.5v3M8 11.6h.01"/>',
35
+ chevron: '<path d="M6 3.5 10.5 8 6 12.5"/>',
36
+ external: '<path d="M6.5 9.5 14 2M14 2H9.5M14 2v4.5"/><path d="M12 10v2.5A1.5 1.5 0 0 1 10.5 14h-7A1.5 1.5 0 0 1 2 12.5v-7A1.5 1.5 0 0 1 3.5 4H6"/>',
37
+ 'arrow-up': '<path d="M8 13V3M4 7l4-4 4 4"/>',
38
+ 'arrow-down': '<path d="M8 3v10M4 9l4 4 4-4"/>',
39
+ };
40
+ /** The one deliberate exception to stroke-only. */
41
+ export const ACTIVE_MARKER = '<rect x="4" y="4" width="8" height="8" fill="currentColor" stroke="none"/>';
42
+ const table = Object.entries(ICON_BODIES)
43
+ .map(([name, body]) => `| \`${name}\` | \`${body}\` |`)
44
+ .join('\n');
45
+ export const canvasIconsSkill = defineSkill({
46
+ name: 'canvas-icons',
47
+ description: 'The twenty-shape icon set for canvases — one SVG wrapper, twenty bodies, plus the ' +
48
+ 'rules that keep a set of icons from becoming decoration.',
49
+ tags: ['visual', 'canvas', 'design', 'icons'],
50
+ prompt: `Twenty shapes, one stroke weight. Use these rather than inventing a path — and
51
+ rather than an emoji, which is what a canvas reaches for when drawing feels hard.
52
+
53
+ ## The wrapper — identical for every icon
54
+
55
+ \`\`\`html
56
+ ${ICON_WRAPPER}
57
+ \`\`\`
58
+
59
+ ## The bodies
60
+
61
+ | name | body |
62
+ |---|---|
63
+ ${table}
64
+
65
+ ## Rules
66
+
67
+ 1. **\`currentColor\`, never a token.** Colour the parent; the icon inherits.
68
+ \`stroke="var(--canvas-accent)"\` on an icon is how a cluster drifts out of the palette.
69
+ 2. **16 grid, not 24.** Stroke 1.5 on a 16 grid holds detail down to 14px, where nav rows
70
+ and table cells live. A 24 grid scaled to 14 puts hairlines below one device pixel.
71
+ 3. **14px is the floor.** Below it, drop the icon — do not shrink it.
72
+ 4. **Scale with the \`width\`/\`height\` attributes only.** Never edit the geometry.
73
+ 5. **Stroke only, \`fill="none"\`.** One exception, the active-nav marker, deliberately the
74
+ only solid mark on a screen: \`${ACTIVE_MARKER}\`
75
+ 6. **Twenty is a budget, not a start.** If a canvas needs a twenty-first, use a word. A
76
+ text label always beats a guessed glyph.
77
+ 7. **One icon per row at most** — leading, or none. Icons on both sides of a row, or one
78
+ per stat tile, is decoration; that is the slot emoji creep into.
79
+
80
+ ## Deltas
81
+
82
+ \`arrow-up\` and \`arrow-down\` carry direction beside a figure. Both inherit
83
+ \`currentColor\`, so the arrow can never disagree with its number.`,
84
+ });