@compilr-dev/sdk 0.18.11 → 0.20.0

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 (33) hide show
  1. package/dist/canvas/assets.d.ts +99 -0
  2. package/dist/canvas/assets.js +111 -0
  3. package/dist/canvas/index.d.ts +2 -0
  4. package/dist/canvas/index.js +6 -0
  5. package/dist/capabilities/packs.js +6 -0
  6. package/dist/index.d.ts +2 -2
  7. package/dist/index.js +1 -1
  8. package/dist/platform/context.d.ts +16 -2
  9. package/dist/platform/context.js +13 -1
  10. package/dist/platform/repositories.d.ts +4 -0
  11. package/dist/platform/sqlite/canvas-repository.d.ts +9 -0
  12. package/dist/platform/sqlite/canvas-repository.js +52 -0
  13. package/dist/platform/sqlite/db.js +29 -0
  14. package/dist/platform/sqlite/schema.d.ts +1 -1
  15. package/dist/platform/sqlite/schema.js +1 -1
  16. package/dist/platform/tools/canvas-tools.d.ts +9 -1
  17. package/dist/platform/tools/canvas-tools.js +208 -2
  18. package/dist/platform/tools/image-tools.d.ts +9 -2
  19. package/dist/platform/tools/image-tools.js +4 -2
  20. package/dist/platform/tools/index.js +10 -2
  21. package/dist/platform/tools/project-tools.js +3 -2
  22. package/dist/skills/canvas-exemplars.d.ts +2 -2
  23. package/dist/skills/canvas-exemplars.js +4 -4
  24. package/dist/skills/canvas-skills.js +47 -0
  25. package/dist/team/index.d.ts +2 -1
  26. package/dist/team/index.js +1 -1
  27. package/dist/team/team-agent.d.ts +90 -8
  28. package/dist/team/team-agent.js +117 -20
  29. package/dist/team/team.d.ts +15 -0
  30. package/dist/team/team.js +45 -0
  31. package/dist/team/tool-config.js +3 -0
  32. package/dist/team/types.d.ts +1 -1
  33. package/package.json +1 -1
package/dist/skills/canvas-exemplars.js CHANGED
@@ -15,22 +15,22 @@
15
15
  */
16
16
  import { defineSkill } from '@compilr-dev/agents';
17
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>';
18
+ export const THEME_FLAT_EXEMPLAR = '<div style="--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #63656D; --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
19
  /** The same markup in dark: only these nine values change. */
20
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
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>';
22
+ export const APP_SCREEN_EXEMPLAR = '<div style="--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #63656D; --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
23
  export const canvasExemplarInfographicSkill = defineSkill({
24
24
  name: 'canvas-exemplar-infographic',
25
25
  description: 'A worked theme-flat infographic to read before authoring one — sandbox-legal markup ' +
26
26
  'showing the hierarchy, grid and restraint the style calls for.',
27
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```',
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: #63656D; --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
29
  });
30
30
  export const canvasExemplarAppScreenSkill = defineSkill({
31
31
  name: 'canvas-exemplar-app-screen',
32
32
  description: 'A worked app-screen mock to read before drawing a UI — four surfaces, one active ' +
33
33
  'state, a finding rather than a page name.',
34
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```',
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: #63656D; --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
36
  });
package/dist/skills/canvas-skills.js CHANGED
@@ -54,11 +54,26 @@ never worked. Structure first, with the real content; skin it second, from a rec
54
54
  **Skip the round entirely** when they said "just make it / surprise me / your call" or
55
55
  already gave full detail. This round asks LESS than it used to, not more.
56
56
 
57
+ ⚠️ **IF THE QUESTION ROUND FAILS, SAY SO AND ASK AGAIN — do not author anyway.** An
58
+ \`ask_user\` call can die on the output limit, and the failure looks like nothing: no
59
+ answers arrive and authoring simply continues on invented content. That is how a canvas
60
+ ends up full of placeholder names nobody asked for. If the round did not come back, send
61
+ ONE short retry; if that fails too, tell the user what you need in one line and stop.
62
+ Inventing the brief wastes the whole pass.
63
+
57
64
  2. **Route the type and style from the content**, using the cheatsheet in
58
65
  \`canvas_guide("styles")\`. One screen of an app → \`infographic\` + the app-screen style.
59
66
  Several options compared → \`board\`. Slides → \`carousel\`. Data or a one-pager →
60
67
  \`infographic\` + theme-flat.
61
68
 
69
+ ⚠️ **REAL IMAGES GO IN AS ASSETS.** If the user supplied photos, logos or screenshots, put
70
+ each one in with \`canvas_asset_add\` (canvas_id, path, ref) and reference it as
71
+ \`<img src="asset:REF" alt="what it shows">\`. Do **not** paste base64 into the markup — it
72
+ would work, and it would bury the document under hundreds of KB that \`canvas_edit\` then has
73
+ to patch around. Do **not** draw a grey placeholder box when a real image was provided:
74
+ that is the single thing that makes a mock unreviewable. \`canvas_asset_list\` shows what is
75
+ stored and what the markup actually uses.
76
+
62
77
  3. **Pass one — structure, with the FINAL content.** No colour decisions, no type scale yet:
63
78
  get the real words and real numbers into the real layout. A structure that works with
64
79
  placeholder text is not a structure.
@@ -121,6 +136,13 @@ never worked. Structure first, with the real content; skin it second, from a rec
121
136
  ⚠️ **FAILING IS NORMAL** — most first drafts fail two of these. A failed check is
122
137
  something to EDIT, not something to argue with. Do not write a justification.
123
138
 
139
+ ⚠️ **A \`canvas_validate\` WARNING IS A FAILED CHECK, not an opinion to weigh.** If it
140
+ reported too many hues, 06 is a fail; if it reported a card on its ground, 02 is a fail.
141
+ Fix it and re-screenshot. Answering a warning with why the canvas is an exception — "the
142
+ tile colours are deliberately varied", "this is a committed aesthetic" — is the
143
+ justification this step exists to stop, and it is how a draft self-passes six out of six
144
+ while visibly breaking one of them.
145
+
124
146
  ⚠️ **The second screenshot is the one that matters**, because it catches a fix that broke
125
147
  something else. Cap at two rounds; if something still fails, hand off and say so in one
126
148
  clause.
@@ -240,6 +262,13 @@ export const boardSkill = defineSkill({
240
262
  ## SHOW, don't TELL (the #1 rule)
241
263
  A board is a VISUAL surface — its value is that it *depicts* things, not that it holds text. If your board is mostly paragraphs and bullet lists, you've built a text document on a grid and failed the medium. That is what the "propose alternatives" text tool is for — a board must EARN its place by being visual.
242
264
  - **Depict, don't describe.** Exploring website / UI options? DRAW each option as a **wireframe mock** — a browser/window frame with a nav bar, a hero block, and content sections as labeled BOXES — laid side by side so they can be compared at a glance. Do NOT write "Option A: terminal-first hero, CLI-style product list…" as prose; SKETCH it.
265
+ - ⚠️ **LOW FIDELITY MEANS NO COLOUR, NO IMAGERY AND NO TYPE HIERARCHY. IT DOES NOT MEAN
266
+ NO CONTENT.** Grey bars where headings, prices and product names belong are a
267
+ placeholder for THINKING, and they make every layout look equally plausible because
268
+ none of them has to survive real copy. Boxes stay grey **for images only**. Every line
269
+ of text is written out: real nav items, real product names, real prices, a real
270
+ headline. A wireframe with placeholder text has not been designed yet — and the user
271
+ cannot react to it, which is the whole point of showing them one.
243
272
  - ⚠️ **This is for COMPARING several options, at low fidelity.** For ONE screen at full
244
273
  fidelity — "mock up the admissions dashboard" — use \`infographic\` with the
245
274
  **app-screen** style instead (\`canvas_guide("styles")\`), and draw NO window chrome
@@ -314,6 +343,15 @@ export const canvasStylesSkill = defineSkill({
314
343
  - **EXPORT-SAFE background.** Always set an EXPLICIT background (never \`transparent\`) on the outer wrapper (and each \`<section data-sheet>\`). A look that leans on the page background breaks on the WHITE PDF export.
315
344
  - **\`backdrop-filter\` is fragile.** It renders on screen and in \`canvas_screenshot\`, but PDF export MAY drop it — so for glass, give every panel a semi-opaque SOLID fallback fill too, so it still reads without the blur.
316
345
  - **You MAY override the theme vars** for a committed aesthetic (declare your own palette in \`<style>\`), but keep text/background contrast strong. For "theme-matched", use \`var(--canvas-*)\` as-is. Either way, set the bg explicitly.
346
+ - ⚠️ **This licenses a PALETTE, not a free hand with hue.** Committing to an aesthetic
347
+ changes which colours you use; it does not raise the budget. One accent, three uses,
348
+ greys for everything else still applies — a canvas that answers the hue-count warning
349
+ with "the tile colours are deliberately varied" has used the permission to excuse the
350
+ exact thing the rule forbids. Colour encodes categories a reader must tell apart, or
351
+ it is decoration.
352
+ - ⚠️ **Check muted against the page GROUND, not the card.** A muted grey that passes on a
353
+ white card can fail on the ground two steps below it. Test every token against the
354
+ darkest surface it will actually sit on.
317
355
  - Keep Tweaks working: still expose 2–4 bound controls (accent, a size slider, a toggle) even inside a strong style.
318
356
 
319
357
  ## The six styles
@@ -340,6 +378,10 @@ depth.
340
378
 
341
379
  **Spacing — an 8px scale.** Gaps 16 · card padding 18–32 · outer padding 40.
342
380
 
381
+ **The canvas fills its frame.** The root takes \`width: 100%\` with an inner \`max-width\` for
382
+ the measure — never a fixed outer width. The viewer is not a fixed size, and a canvas that
383
+ leaves a dead strip down one side looks broken regardless of what is inside it.
384
+
343
385
  **Grid — asymmetric tracks**, e.g. \`grid-template-columns: 1.35fr 1fr\`. Equal columns make
344
386
  a canvas read as a form.
345
387
 
@@ -424,6 +466,11 @@ only when the point being made is about the window itself.
424
466
 
425
467
  Icons: use the set in \`canvas_guide("icons")\` — never an emoji, never a guessed path.
426
468
 
469
+ ⚠️ **No icon is better than a wrong icon.** When the set has no shape for a concept, set
470
+ the label alone. A drinking glass on a Ceramics tile or an up-arrow on a Candles tile costs
471
+ more credibility than empty space would, and improvising an SVG path to fill the slot costs
472
+ more still. The set is for UI affordances — nav, actions, status. It is not illustration.
473
+
427
474
  ## Pick-by-content cheatsheet
428
475
  - **One screen of an app / a UI mockup** → \`infographic\` + **app-screen**. Several options
429
476
  compared side by side → \`board\` + wireframe. (Asking for "a mockup" used to route to one
package/dist/team/index.d.ts CHANGED
@@ -6,7 +6,8 @@
6
6
  */
7
7
  export { AgentTeam } from './team.js';
8
8
  export type { AgentTeamConfig } from './team.js';
9
- export { TeamAgent } from './team-agent.js';
9
+ export { TeamAgent, isNarrowing } from './team-agent.js';
10
+ export type { TeamAgentUpdate, AgentUpdateResult } from './team-agent.js';
10
11
  export { SharedContextManager } from './shared-context.js';
11
12
  export type { SharedContext, SharedProjectInfo, SharedTeamInfo, TeamRosterEntry, TeamActivity, TeamActivityType, SharedDecision, TokenBudget, SerializedSharedContext, } from './shared-context.js';
12
13
  export { ArtifactStore } from './artifacts.js';
package/dist/team/index.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
  // Core classes
8
8
  export { AgentTeam } from './team.js';
9
- export { TeamAgent } from './team-agent.js';
9
+ export { TeamAgent, isNarrowing } from './team-agent.js';
10
10
  export { SharedContextManager } from './shared-context.js';
11
11
  export { ArtifactStore } from './artifacts.js';
12
12
  export { ROLE_METADATA, ROLE_EXPERTISE, ROLE_GROUPS, PREDEFINED_ROLE_IDS } from './types.js';