hoomanjs 1.47.0 → 1.55.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 (246) hide show
  1. package/README.md +42 -18
  2. package/dist/acp/acp-agent.d.ts +3 -3
  3. package/dist/acp/acp-agent.js +16 -11
  4. package/dist/acp/acp-agent.js.map +1 -1
  5. package/dist/acp/approvals.js +11 -10
  6. package/dist/acp/approvals.js.map +1 -1
  7. package/dist/acp/browser.d.ts +9 -0
  8. package/dist/acp/browser.js +23 -0
  9. package/dist/acp/browser.js.map +1 -0
  10. package/dist/acp/meta/vscode.d.ts +8 -7
  11. package/dist/acp/meta/vscode.js +10 -11
  12. package/dist/acp/meta/vscode.js.map +1 -1
  13. package/dist/acp/sessions/store.d.ts +3 -3
  14. package/dist/acp/utils/tool-kind.js +6 -6
  15. package/dist/acp/utils/tool-kind.js.map +1 -1
  16. package/dist/chat/app.js +16 -9
  17. package/dist/chat/app.js.map +1 -1
  18. package/dist/chat/approvals.js +3 -0
  19. package/dist/chat/approvals.js.map +1 -1
  20. package/dist/chat/components/ApprovalPrompt.js +11 -22
  21. package/dist/chat/components/ApprovalPrompt.js.map +1 -1
  22. package/dist/chat/components/StatusBar.js +3 -0
  23. package/dist/chat/components/StatusBar.js.map +1 -1
  24. package/dist/chat/types.d.ts +3 -0
  25. package/dist/cli.js +162 -44
  26. package/dist/cli.js.map +1 -1
  27. package/dist/configure/app.js +46 -29
  28. package/dist/configure/app.js.map +1 -1
  29. package/dist/core/agent/default-retry-strategy.js +46 -12
  30. package/dist/core/agent/default-retry-strategy.js.map +1 -1
  31. package/dist/core/agent/gitignore-guard-plugin.js +17 -2
  32. package/dist/core/agent/gitignore-guard-plugin.js.map +1 -1
  33. package/dist/core/agent/index.js +37 -7
  34. package/dist/core/agent/index.js.map +1 -1
  35. package/dist/core/approvals/allowlist.js +1 -0
  36. package/dist/core/approvals/allowlist.js.map +1 -1
  37. package/dist/core/approvals/intervention.d.ts +10 -2
  38. package/dist/core/approvals/intervention.js +46 -8
  39. package/dist/core/approvals/intervention.js.map +1 -1
  40. package/dist/core/config.d.ts +9 -2
  41. package/dist/core/config.js +8 -4
  42. package/dist/core/config.js.map +1 -1
  43. package/dist/core/index.d.ts +2 -2
  44. package/dist/core/mcp/oauth/service.js +2 -2
  45. package/dist/core/mcp/oauth/service.js.map +1 -1
  46. package/dist/core/models/bedrock.js +6 -0
  47. package/dist/core/models/bedrock.js.map +1 -1
  48. package/dist/core/models/groq.js +34 -14
  49. package/dist/core/models/groq.js.map +1 -1
  50. package/dist/core/models/minimax.js +1 -1
  51. package/dist/core/models/minimax.js.map +1 -1
  52. package/dist/core/models/types.d.ts +10 -2
  53. package/dist/core/models/types.js +1 -0
  54. package/dist/core/models/types.js.map +1 -1
  55. package/dist/core/modes/definitions.d.ts +4 -2
  56. package/dist/core/modes/definitions.js +73 -9
  57. package/dist/core/modes/definitions.js.map +1 -1
  58. package/dist/core/modes/index.d.ts +1 -1
  59. package/dist/core/modes/index.js +1 -1
  60. package/dist/core/modes/index.js.map +1 -1
  61. package/dist/core/modes/registry.js +4 -9
  62. package/dist/core/modes/registry.js.map +1 -1
  63. package/dist/core/modes/schema.d.ts +1 -1
  64. package/dist/core/modes/schema.js +1 -1
  65. package/dist/core/modes/schema.js.map +1 -1
  66. package/dist/core/prompts/agents/{review.md → code-review.md} +2 -2
  67. package/dist/core/prompts/agents/design-review.md +35 -0
  68. package/dist/core/prompts/agents/{test-investigator.md → quality-analyst.md} +2 -2
  69. package/dist/core/prompts/modes/agent.md +2 -0
  70. package/dist/core/prompts/modes/ask.md +2 -2
  71. package/dist/core/prompts/modes/design.md +37 -0
  72. package/dist/core/prompts/modes/plan.md +5 -5
  73. package/dist/core/prompts/{runtime.js → runtime/agents.js} +2 -2
  74. package/dist/core/prompts/runtime/agents.js.map +1 -0
  75. package/dist/core/prompts/runtime/design.d.ts +11 -0
  76. package/dist/core/prompts/runtime/design.js +78 -0
  77. package/dist/core/prompts/runtime/design.js.map +1 -0
  78. package/dist/core/prompts/{session-mode-appendix.js → session-mode.js} +1 -1
  79. package/dist/core/prompts/session-mode.js.map +1 -0
  80. package/dist/core/prompts/static/ask-user.md +3 -2
  81. package/dist/core/prompts/static/fetch.md +2 -1
  82. package/dist/core/prompts/static/filesystem.md +2 -1
  83. package/dist/core/prompts/static/subagents.md +2 -1
  84. package/dist/core/prompts/static/switch-mode.md +10 -0
  85. package/dist/core/prompts/system.d.ts +1 -0
  86. package/dist/core/prompts/system.js +11 -3
  87. package/dist/core/prompts/system.js.map +1 -1
  88. package/dist/core/shell/index.d.ts +1 -1
  89. package/dist/core/shell/index.js +1 -1
  90. package/dist/core/shell/{shell.js → tools.js} +1 -1
  91. package/dist/core/shell/{shell.js.map → tools.js.map} +1 -1
  92. package/dist/core/skills/built-in/hooman-config/SKILL.md +30 -35
  93. package/dist/core/skills/built-in/hooman-config/search.md +5 -3
  94. package/dist/core/skills/built-in/hooman-design/SKILL.md +97 -0
  95. package/dist/core/skills/built-in/hooman-design/assets/article-shell.html +87 -0
  96. package/dist/core/skills/built-in/hooman-design/assets/auth-shell.html +143 -0
  97. package/dist/core/skills/built-in/hooman-design/assets/business-card-shell.html +112 -0
  98. package/dist/core/skills/built-in/hooman-design/assets/contact-shell.html +181 -0
  99. package/dist/core/skills/built-in/hooman-design/assets/dashboard-shell.html +90 -0
  100. package/dist/core/skills/built-in/hooman-design/assets/data-table-shell.html +114 -0
  101. package/dist/core/skills/built-in/hooman-design/assets/deck-shell.html +187 -0
  102. package/dist/core/skills/built-in/hooman-design/assets/dialog-shell.html +98 -0
  103. package/dist/core/skills/built-in/hooman-design/assets/email-shell.html +101 -0
  104. package/dist/core/skills/built-in/hooman-design/assets/empty-state-shell.html +92 -0
  105. package/dist/core/skills/built-in/hooman-design/assets/flyer-shell.html +168 -0
  106. package/dist/core/skills/built-in/hooman-design/assets/invite-shell.html +167 -0
  107. package/dist/core/skills/built-in/hooman-design/assets/landing-shell.html +184 -0
  108. package/dist/core/skills/built-in/hooman-design/assets/mobile-frame-shell.html +109 -0
  109. package/dist/core/skills/built-in/hooman-design/assets/newsletter-shell.html +141 -0
  110. package/dist/core/skills/built-in/hooman-design/assets/onboarding-shell.html +131 -0
  111. package/dist/core/skills/built-in/hooman-design/assets/pricing-shell.html +160 -0
  112. package/dist/core/skills/built-in/hooman-design/assets/prototype-shell.html +83 -0
  113. package/dist/core/skills/built-in/hooman-design/assets/resume-shell.html +228 -0
  114. package/dist/core/skills/built-in/hooman-design/assets/settings-shell.html +196 -0
  115. package/dist/core/skills/built-in/hooman-design/assets/tokens/botanical-calm.css +34 -0
  116. package/dist/core/skills/built-in/hooman-design/assets/tokens/copper-ledger.css +34 -0
  117. package/dist/core/skills/built-in/hooman-design/assets/tokens/editorial-ink.css +34 -0
  118. package/dist/core/skills/built-in/hooman-design/assets/tokens/fintech-clear.css +34 -0
  119. package/dist/core/skills/built-in/hooman-design/assets/tokens/harbor-navy.css +35 -0
  120. package/dist/core/skills/built-in/hooman-design/assets/tokens/midnight-editorial.css +34 -0
  121. package/dist/core/skills/built-in/hooman-design/assets/tokens/night-console.css +34 -0
  122. package/dist/core/skills/built-in/hooman-design/assets/tokens/paper-mono.css +35 -0
  123. package/dist/core/skills/built-in/hooman-design/assets/tokens/signal-mono.css +34 -0
  124. package/dist/core/skills/built-in/hooman-design/assets/tokens/soft-product.css +34 -0
  125. package/dist/core/skills/built-in/hooman-design/assets/tokens/swiss-grid.css +34 -0
  126. package/dist/core/skills/built-in/hooman-design/assets/tokens/warm-atelier.css +34 -0
  127. package/dist/core/skills/built-in/hooman-design/assets/waitlist-shell.html +139 -0
  128. package/dist/core/skills/built-in/hooman-design/craft/accessibility-baseline.md +32 -0
  129. package/dist/core/skills/built-in/hooman-design/craft/anti-ai-slop.md +27 -0
  130. package/dist/core/skills/built-in/hooman-design/craft/color-surfaces.md +45 -0
  131. package/dist/core/skills/built-in/hooman-design/craft/data-viz.md +24 -0
  132. package/dist/core/skills/built-in/hooman-design/craft/deck-slides.md +46 -0
  133. package/dist/core/skills/built-in/hooman-design/craft/forms-validation.md +35 -0
  134. package/dist/core/skills/built-in/hooman-design/craft/iconography.md +19 -0
  135. package/dist/core/skills/built-in/hooman-design/craft/layout-overflow.md +31 -0
  136. package/dist/core/skills/built-in/hooman-design/craft/motion.md +41 -0
  137. package/dist/core/skills/built-in/hooman-design/craft/print.md +37 -0
  138. package/dist/core/skills/built-in/hooman-design/craft/responsive.md +30 -0
  139. package/dist/core/skills/built-in/hooman-design/craft/spacing-density.md +46 -0
  140. package/dist/core/skills/built-in/hooman-design/craft/state-coverage.md +21 -0
  141. package/dist/core/skills/built-in/hooman-design/craft/typography.md +73 -0
  142. package/dist/core/skills/built-in/hooman-design/directions.md +115 -0
  143. package/dist/core/skills/built-in/hooman-design/references/artifact-layout.md +15 -0
  144. package/dist/core/skills/built-in/hooman-design/references/export.md +47 -0
  145. package/dist/core/skills/built-in/hooman-design/references/workflow.md +80 -0
  146. package/dist/core/skills/built-in/hooman-mcp/SKILL.md +2 -2
  147. package/dist/core/state/llm-modality.d.ts +13 -0
  148. package/dist/core/state/llm-modality.js +19 -0
  149. package/dist/core/state/llm-modality.js.map +1 -0
  150. package/dist/core/state/plan.d.ts +1 -1
  151. package/dist/core/state/plan.js +1 -1
  152. package/dist/core/state/tool-approvals.d.ts +12 -9
  153. package/dist/core/state/tool-approvals.js +91 -52
  154. package/dist/core/state/tool-approvals.js.map +1 -1
  155. package/dist/core/state/turn-boundaries.d.ts +1 -1
  156. package/dist/core/state/turn-boundaries.js +1 -1
  157. package/dist/core/subagents/index.d.ts +1 -1
  158. package/dist/core/subagents/index.js +1 -1
  159. package/dist/core/subagents/registry.js +15 -6
  160. package/dist/core/subagents/registry.js.map +1 -1
  161. package/dist/core/subagents/tool.d.ts +8 -2
  162. package/dist/core/subagents/tool.js +93 -44
  163. package/dist/core/subagents/tool.js.map +1 -1
  164. package/dist/core/tools/ask-user.d.ts +1 -1
  165. package/dist/core/tools/ask-user.js +1 -1
  166. package/dist/core/tools/export.d.ts +8 -0
  167. package/dist/core/tools/export.js +202 -0
  168. package/dist/core/tools/export.js.map +1 -0
  169. package/dist/core/tools/fetch.d.ts +2 -0
  170. package/dist/core/tools/fetch.js +92 -55
  171. package/dist/core/tools/fetch.js.map +1 -1
  172. package/dist/core/tools/filesystem.d.ts +2 -1
  173. package/dist/core/tools/filesystem.js +38 -4
  174. package/dist/core/tools/filesystem.js.map +1 -1
  175. package/dist/core/tools/index.d.ts +3 -1
  176. package/dist/core/tools/index.js +3 -1
  177. package/dist/core/tools/index.js.map +1 -1
  178. package/dist/core/tools/preview.d.ts +10 -0
  179. package/dist/core/tools/preview.js +147 -0
  180. package/dist/core/tools/preview.js.map +1 -0
  181. package/dist/core/tools/switch-mode.d.ts +6 -0
  182. package/dist/core/tools/switch-mode.js +188 -0
  183. package/dist/core/tools/switch-mode.js.map +1 -0
  184. package/dist/core/tools/web-search.js +176 -0
  185. package/dist/core/tools/web-search.js.map +1 -1
  186. package/dist/core/utils/browser.d.ts +8 -1
  187. package/dist/core/utils/browser.js +17 -1
  188. package/dist/core/utils/browser.js.map +1 -1
  189. package/dist/core/utils/export-design.d.ts +40 -0
  190. package/dist/core/utils/export-design.js +188 -0
  191. package/dist/core/utils/export-design.js.map +1 -0
  192. package/dist/core/utils/export-figma.d.ts +17 -0
  193. package/dist/core/utils/export-figma.js +189 -0
  194. package/dist/core/utils/export-figma.js.map +1 -0
  195. package/dist/core/utils/export-sketch.d.ts +11 -0
  196. package/dist/core/utils/export-sketch.js +456 -0
  197. package/dist/core/utils/export-sketch.js.map +1 -0
  198. package/dist/core/utils/fig-archive.d.ts +47 -0
  199. package/dist/core/utils/fig-archive.js +181 -0
  200. package/dist/core/utils/fig-archive.js.map +1 -0
  201. package/dist/core/utils/metadata.d.ts +30 -0
  202. package/dist/core/utils/metadata.js +122 -0
  203. package/dist/core/utils/metadata.js.map +1 -1
  204. package/dist/core/utils/models-prefetch.d.ts +53 -0
  205. package/dist/core/utils/models-prefetch.js +469 -0
  206. package/dist/core/utils/models-prefetch.js.map +1 -0
  207. package/dist/core/utils/onboarding-config.d.ts +48 -0
  208. package/dist/core/utils/onboarding-config.js +373 -0
  209. package/dist/core/utils/onboarding-config.js.map +1 -0
  210. package/dist/core/utils/paths.d.ts +9 -7
  211. package/dist/core/utils/paths.js +12 -10
  212. package/dist/core/utils/paths.js.map +1 -1
  213. package/dist/core/utils/preview-server.d.ts +20 -0
  214. package/dist/core/utils/preview-server.js +212 -0
  215. package/dist/core/utils/preview-server.js.map +1 -0
  216. package/dist/core/utils/search-probe.d.ts +19 -0
  217. package/dist/core/utils/search-probe.js +165 -0
  218. package/dist/core/utils/search-probe.js.map +1 -0
  219. package/dist/core/utils/seeds/empty-slides.deck +0 -0
  220. package/dist/core/utils/url-safety.d.ts +2 -0
  221. package/dist/core/utils/url-safety.js +47 -0
  222. package/dist/core/utils/url-safety.js.map +1 -0
  223. package/dist/core/utils/zstd.d.ts +6 -0
  224. package/dist/core/utils/zstd.js +39 -0
  225. package/dist/core/utils/zstd.js.map +1 -0
  226. package/dist/exec/approvals.js +5 -5
  227. package/dist/exec/approvals.js.map +1 -1
  228. package/dist/index.d.ts +9 -3
  229. package/dist/index.js +6 -3
  230. package/dist/index.js.map +1 -1
  231. package/dist/onboarding/app.d.ts +5 -0
  232. package/dist/onboarding/app.js +255 -0
  233. package/dist/onboarding/app.js.map +1 -0
  234. package/dist/onboarding/index.d.ts +5 -0
  235. package/dist/onboarding/index.js +27 -0
  236. package/dist/onboarding/index.js.map +1 -0
  237. package/package.json +16 -3
  238. package/dist/core/prompts/runtime.js.map +0 -1
  239. package/dist/core/prompts/session-mode-appendix.js.map +0 -1
  240. package/dist/core/prompts/static/planning.md +0 -3
  241. package/dist/core/tools/plan.d.ts +0 -5
  242. package/dist/core/tools/plan.js +0 -150
  243. package/dist/core/tools/plan.js.map +0 -1
  244. /package/dist/core/prompts/{runtime.d.ts → runtime/agents.d.ts} +0 -0
  245. /package/dist/core/prompts/{session-mode-appendix.d.ts → session-mode.d.ts} +0 -0
  246. /package/dist/core/shell/{shell.d.ts → tools.d.ts} +0 -0
@@ -0,0 +1,228 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Resume</title>
7
+ <style>
8
+ :root {
9
+ --bg: #f4f4f5;
10
+ --ink: #18181b;
11
+ --muted: #71717a;
12
+ --accent: #0f766e;
13
+ --surface: #ffffff;
14
+ --border: #e4e4e7;
15
+ --font-display:
16
+ "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
17
+ --font-body: system-ui, -apple-system, sans-serif;
18
+ --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
19
+ }
20
+ * {
21
+ box-sizing: border-box;
22
+ }
23
+ body {
24
+ margin: 0;
25
+ font-family: var(--font-body);
26
+ background: var(--bg);
27
+ color: var(--ink);
28
+ line-height: 1.45;
29
+ padding: 1.5rem;
30
+ }
31
+ .page {
32
+ width: min(100%, 52rem);
33
+ margin: 0 auto;
34
+ background: var(--surface);
35
+ border: 1px solid var(--border);
36
+ border-radius: 0.375rem;
37
+ padding: 2.5rem 2.25rem;
38
+ display: grid;
39
+ grid-template-columns: 11rem 1fr;
40
+ gap: 2rem;
41
+ }
42
+ @media (max-width: 640px) {
43
+ .page {
44
+ grid-template-columns: 1fr;
45
+ padding: 1.75rem 1.25rem;
46
+ }
47
+ }
48
+ .aside {
49
+ font-size: 0.8125rem;
50
+ color: var(--muted);
51
+ }
52
+ .name {
53
+ font-family: var(--font-display);
54
+ font-size: 1.75rem;
55
+ letter-spacing: -0.02em;
56
+ line-height: 1.15;
57
+ margin: 0 0 0.35rem;
58
+ color: var(--ink);
59
+ }
60
+ .role {
61
+ margin: 0 0 1.25rem;
62
+ font-size: 0.875rem;
63
+ color: var(--accent);
64
+ font-weight: 600;
65
+ }
66
+ .aside h2,
67
+ .main h2 {
68
+ margin: 0 0 0.5rem;
69
+ font-size: 0.6875rem;
70
+ letter-spacing: 0.1em;
71
+ text-transform: uppercase;
72
+ color: var(--muted);
73
+ font-weight: 600;
74
+ }
75
+ .aside section + section {
76
+ margin-top: 1.25rem;
77
+ }
78
+ .aside ul {
79
+ margin: 0;
80
+ padding: 0;
81
+ list-style: none;
82
+ }
83
+ .aside li + li {
84
+ margin-top: 0.35rem;
85
+ }
86
+ .aside a {
87
+ color: var(--ink);
88
+ text-decoration: none;
89
+ }
90
+ .aside a:hover {
91
+ color: var(--accent);
92
+ }
93
+ .main section + section {
94
+ margin-top: 1.5rem;
95
+ }
96
+ .job {
97
+ margin-bottom: 1.1rem;
98
+ }
99
+ .job-head {
100
+ display: flex;
101
+ flex-wrap: wrap;
102
+ justify-content: space-between;
103
+ gap: 0.35rem 1rem;
104
+ margin-bottom: 0.35rem;
105
+ }
106
+ .job-title {
107
+ margin: 0;
108
+ font-size: 0.9375rem;
109
+ font-weight: 600;
110
+ }
111
+ .job-meta {
112
+ margin: 0;
113
+ font-size: 0.8125rem;
114
+ color: var(--muted);
115
+ font-family: var(--font-mono);
116
+ }
117
+ .job p,
118
+ .job li {
119
+ margin: 0;
120
+ font-size: 0.875rem;
121
+ color: var(--ink);
122
+ }
123
+ .job ul {
124
+ margin: 0.35rem 0 0;
125
+ padding-left: 1.1rem;
126
+ }
127
+ .job li + li {
128
+ margin-top: 0.25rem;
129
+ }
130
+ @page {
131
+ size: A4;
132
+ margin: 14mm;
133
+ }
134
+ @media print {
135
+ body {
136
+ background: #fff;
137
+ padding: 0;
138
+ }
139
+ .page {
140
+ border: none;
141
+ border-radius: 0;
142
+ width: 100%;
143
+ max-width: none;
144
+ padding: 0;
145
+ }
146
+ }
147
+ </style>
148
+ </head>
149
+ <body>
150
+ <article class="page">
151
+ <aside class="aside">
152
+ <p class="name">Alex Rivera</p>
153
+ <p class="role">Product designer</p>
154
+ <section>
155
+ <h2>Contact</h2>
156
+ <ul>
157
+ <li><a href="mailto:alex@example.com">alex@example.com</a></li>
158
+ <li><a href="https://example.com">example.com</a></li>
159
+ <li>Lisbon · remote</li>
160
+ </ul>
161
+ </section>
162
+ <section>
163
+ <h2>Skills</h2>
164
+ <ul>
165
+ <li>Interface systems</li>
166
+ <li>Design ops</li>
167
+ <li>Prototyping</li>
168
+ <li>Research synthesis</li>
169
+ </ul>
170
+ </section>
171
+ <section>
172
+ <h2>Tools</h2>
173
+ <ul>
174
+ <li>Figma · HTML/CSS</li>
175
+ <li>Notion · Linear</li>
176
+ </ul>
177
+ </section>
178
+ </aside>
179
+ <div class="main">
180
+ <section>
181
+ <h2>Experience</h2>
182
+ <div class="job">
183
+ <div class="job-head">
184
+ <p class="job-title">Senior product designer · Northwind</p>
185
+ <p class="job-meta">2022 — present</p>
186
+ </div>
187
+ <ul>
188
+ <li>
189
+ Led the design system for billing and admin surfaces used by 40+
190
+ engineers.
191
+ </li>
192
+ <li>
193
+ Cut onboarding time 28% with a redesigned empty-state and
194
+ checklist flow.
195
+ </li>
196
+ </ul>
197
+ </div>
198
+ <div class="job">
199
+ <div class="job-head">
200
+ <p class="job-title">Product designer · Contoso Labs</p>
201
+ <p class="job-meta">2019 — 2022</p>
202
+ </div>
203
+ <ul>
204
+ <li>
205
+ Shipped the first mobile companion app; 4.7★ store rating in six
206
+ months.
207
+ </li>
208
+ <li>
209
+ Partnered with research on quarterly diary studies for power
210
+ users.
211
+ </li>
212
+ </ul>
213
+ </div>
214
+ </section>
215
+ <section>
216
+ <h2>Education</h2>
217
+ <div class="job">
218
+ <div class="job-head">
219
+ <p class="job-title">BFA Interaction design · RISD</p>
220
+ <p class="job-meta">2015 — 2019</p>
221
+ </div>
222
+ <p>Thesis on adaptive type systems for dense operational UIs.</p>
223
+ </div>
224
+ </section>
225
+ </div>
226
+ </article>
227
+ </body>
228
+ </html>
@@ -0,0 +1,196 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Settings</title>
7
+ <style>
8
+ :root {
9
+ --bg: #f8fafc;
10
+ --ink: #0f172a;
11
+ --muted: #64748b;
12
+ --accent: #0f766e;
13
+ --surface: #ffffff;
14
+ --border: #e2e8f0;
15
+ --font-body: system-ui, -apple-system, sans-serif;
16
+ --space-3: 0.75rem;
17
+ --space-4: 1rem;
18
+ --space-5: 1.5rem;
19
+ --space-6: 2rem;
20
+ }
21
+ * {
22
+ box-sizing: border-box;
23
+ }
24
+ body {
25
+ margin: 0;
26
+ font-family: var(--font-body);
27
+ background: var(--bg);
28
+ color: var(--ink);
29
+ font-size: 14px;
30
+ line-height: 1.5;
31
+ }
32
+ .shell {
33
+ display: grid;
34
+ grid-template-columns: 14rem 1fr;
35
+ min-height: 100vh;
36
+ }
37
+ @media (max-width: 720px) {
38
+ .shell {
39
+ grid-template-columns: 1fr;
40
+ }
41
+ }
42
+ aside {
43
+ border-right: 1px solid var(--border);
44
+ background: var(--surface);
45
+ padding: var(--space-5);
46
+ }
47
+ aside h1 {
48
+ margin: 0 0 var(--space-4);
49
+ font-size: 1rem;
50
+ }
51
+ aside nav {
52
+ display: flex;
53
+ flex-direction: column;
54
+ gap: 0.25rem;
55
+ }
56
+ aside a {
57
+ color: var(--muted);
58
+ text-decoration: none;
59
+ padding: 0.45rem 0.5rem;
60
+ border-radius: 0.375rem;
61
+ font-size: 0.875rem;
62
+ }
63
+ aside a[aria-current="page"] {
64
+ background: var(--bg);
65
+ color: var(--ink);
66
+ font-weight: 600;
67
+ }
68
+ aside a:focus-visible {
69
+ outline: 2px solid var(--accent);
70
+ outline-offset: 1px;
71
+ }
72
+ main {
73
+ padding: var(--space-6);
74
+ max-width: 40rem;
75
+ }
76
+ main h2 {
77
+ margin: 0 0 0.25rem;
78
+ font-size: 1.25rem;
79
+ letter-spacing: -0.02em;
80
+ }
81
+ .desc {
82
+ margin: 0 0 var(--space-5);
83
+ color: var(--muted);
84
+ }
85
+ .panel {
86
+ background: var(--surface);
87
+ border: 1px solid var(--border);
88
+ border-radius: 0.375rem;
89
+ padding: var(--space-5);
90
+ display: flex;
91
+ flex-direction: column;
92
+ gap: var(--space-4);
93
+ }
94
+ label {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 0.35rem;
98
+ font-weight: 600;
99
+ font-size: 0.8125rem;
100
+ }
101
+ input,
102
+ select {
103
+ font: inherit;
104
+ padding: 0.55rem 0.65rem;
105
+ border: 1px solid var(--border);
106
+ border-radius: 0.375rem;
107
+ }
108
+ input:focus-visible,
109
+ select:focus-visible {
110
+ outline: 2px solid var(--accent);
111
+ outline-offset: 1px;
112
+ }
113
+ .row {
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: space-between;
117
+ gap: var(--space-4);
118
+ }
119
+ .row p {
120
+ margin: 0;
121
+ color: var(--muted);
122
+ font-weight: 400;
123
+ font-size: 0.8125rem;
124
+ }
125
+ .actions {
126
+ display: flex;
127
+ gap: var(--space-3);
128
+ margin-top: var(--space-3);
129
+ }
130
+ .btn {
131
+ padding: 0.55rem 0.9rem;
132
+ border-radius: 0.375rem;
133
+ border: 0;
134
+ background: var(--accent);
135
+ color: #fff;
136
+ font: inherit;
137
+ font-weight: 600;
138
+ cursor: pointer;
139
+ }
140
+ .btn-secondary {
141
+ background: transparent;
142
+ color: var(--ink);
143
+ border: 1px solid var(--border);
144
+ }
145
+ .btn:focus-visible {
146
+ outline: 2px solid var(--ink);
147
+ outline-offset: 2px;
148
+ }
149
+ </style>
150
+ </head>
151
+ <body>
152
+ <div class="shell">
153
+ <aside>
154
+ <h1>Settings</h1>
155
+ <nav aria-label="Settings">
156
+ <a href="#" aria-current="page">General</a>
157
+ <a href="#">Team</a>
158
+ <a href="#">Billing</a>
159
+ </nav>
160
+ </aside>
161
+ <main>
162
+ <h2>General</h2>
163
+ <p class="desc">Workspace identity and defaults.</p>
164
+ <form class="panel">
165
+ <label>
166
+ Workspace name
167
+ <input name="name" value="Acme" />
168
+ </label>
169
+ <label>
170
+ Default timezone
171
+ <select name="tz">
172
+ <option>UTC</option>
173
+ <option>America/New_York</option>
174
+ </select>
175
+ </label>
176
+ <div class="row">
177
+ <div>
178
+ <strong style="font-size: 0.8125rem">Email notifications</strong>
179
+ <p>Product updates and digests.</p>
180
+ </div>
181
+ <input
182
+ type="checkbox"
183
+ name="email"
184
+ checked
185
+ aria-label="Email notifications"
186
+ />
187
+ </div>
188
+ <div class="actions">
189
+ <button class="btn" type="submit">Save</button>
190
+ <button class="btn btn-secondary" type="button">Cancel</button>
191
+ </div>
192
+ </form>
193
+ </main>
194
+ </div>
195
+ </body>
196
+ </html>
@@ -0,0 +1,34 @@
1
+ /* Direction tokens — botanical-calm (wellness / nature / quiet product). */
2
+ :root {
3
+ --bg: #f4f6f1;
4
+ --surface: #fbfcf8;
5
+ --surface-2: #e8ece2;
6
+ --ink: #1c2a1f;
7
+ --muted: #5f6f62;
8
+ --border: #d5ddd0;
9
+ --accent: #3f6b4e;
10
+ --accent-soft: #e3ece5;
11
+ --accent-ink: #fbfcf8;
12
+ --danger: #9f2d2d;
13
+ --success: #2f6b45;
14
+ --warning: #8a6a1f;
15
+ --focus: #3f6b4e;
16
+ --overlay: rgb(28 42 31 / 0.42);
17
+ --shadow: 0 1px 2px rgb(28 42 31 / 0.06);
18
+ --font-display: Georgia, "Times New Roman", ui-serif, serif;
19
+ --font-body: system-ui, -apple-system, sans-serif;
20
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ --radius: 0.5rem;
22
+ --leading-body: 1.6;
23
+ --tracking-caps: 0.07em;
24
+ --text-body: 1rem;
25
+ --text-small: 0.875rem;
26
+ --space-1: 0.25rem;
27
+ --space-2: 0.5rem;
28
+ --space-3: 0.75rem;
29
+ --space-4: 1rem;
30
+ --space-5: 1.5rem;
31
+ --space-6: 2rem;
32
+ --space-7: 3rem;
33
+ --space-8: 4rem;
34
+ }
@@ -0,0 +1,34 @@
1
+ /* Direction tokens — copper-ledger (docs / ops / warm utility). */
2
+ :root {
3
+ --bg: #f7f3ee;
4
+ --surface: #fffdf9;
5
+ --surface-2: #efe8df;
6
+ --ink: #1f1812;
7
+ --muted: #6e6258;
8
+ --border: #ddd3c7;
9
+ --accent: #8b4513;
10
+ --accent-soft: #f0e4d8;
11
+ --accent-ink: #fffdf9;
12
+ --danger: #9b1c1c;
13
+ --success: #3d6b4f;
14
+ --warning: #a16207;
15
+ --focus: #8b4513;
16
+ --overlay: rgb(31 24 18 / 0.45);
17
+ --shadow: 0 1px 2px rgb(31 24 18 / 0.07);
18
+ --font-display: system-ui, -apple-system, sans-serif;
19
+ --font-body: system-ui, -apple-system, sans-serif;
20
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ --radius: 0.25rem;
22
+ --leading-body: 1.5;
23
+ --tracking-caps: 0.07em;
24
+ --text-body: 0.9375rem;
25
+ --text-small: 0.8125rem;
26
+ --space-1: 0.25rem;
27
+ --space-2: 0.5rem;
28
+ --space-3: 0.75rem;
29
+ --space-4: 1rem;
30
+ --space-5: 1.5rem;
31
+ --space-6: 2rem;
32
+ --space-7: 3rem;
33
+ --space-8: 4rem;
34
+ }
@@ -0,0 +1,34 @@
1
+ /* Direction tokens — copy into :root of the artifact (editorial-ink). */
2
+ :root {
3
+ --bg: #f7f5f2;
4
+ --surface: #ffffff;
5
+ --surface-2: #f0ebe3;
6
+ --ink: #1a1a1a;
7
+ --muted: #5c5c5c;
8
+ --border: #e8e4dc;
9
+ --accent: #0f6b6b;
10
+ --accent-soft: #e4f0ef;
11
+ --accent-ink: #ffffff;
12
+ --danger: #b42318;
13
+ --success: #3f7d4e;
14
+ --warning: #a15c07;
15
+ --focus: #0f6b6b;
16
+ --overlay: rgb(26 26 26 / 0.45);
17
+ --shadow: 0 1px 2px rgb(26 26 26 / 0.06);
18
+ --font-display: Georgia, "Times New Roman", ui-serif, serif;
19
+ --font-body: system-ui, -apple-system, sans-serif;
20
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ --radius: 0.375rem;
22
+ --leading-body: 1.55;
23
+ --tracking-caps: 0.08em;
24
+ --text-body: 1rem;
25
+ --text-small: 0.875rem;
26
+ --space-1: 0.25rem;
27
+ --space-2: 0.5rem;
28
+ --space-3: 0.75rem;
29
+ --space-4: 1rem;
30
+ --space-5: 1.5rem;
31
+ --space-6: 2rem;
32
+ --space-7: 3rem;
33
+ --space-8: 4rem;
34
+ }
@@ -0,0 +1,34 @@
1
+ /* Direction tokens — fintech-clear */
2
+ :root {
3
+ --bg: #f8fafc;
4
+ --surface: #ffffff;
5
+ --surface-2: #f1f5f9;
6
+ --ink: #0f172a;
7
+ --muted: #64748b;
8
+ --border: #e2e8f0;
9
+ --accent: #0f766e;
10
+ --accent-soft: #e6f4f2;
11
+ --accent-ink: #ffffff;
12
+ --danger: #b91c1c;
13
+ --success: #15803d;
14
+ --warning: #b45309;
15
+ --focus: #0f766e;
16
+ --overlay: rgb(15 23 42 / 0.45);
17
+ --shadow: 0 1px 2px rgb(15 23 42 / 0.06);
18
+ --font-display: system-ui, -apple-system, sans-serif;
19
+ --font-body: system-ui, -apple-system, sans-serif;
20
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ --radius: 0.375rem;
22
+ --leading-body: 1.55;
23
+ --tracking-caps: 0.06em;
24
+ --text-body: 1rem;
25
+ --text-small: 0.875rem;
26
+ --space-1: 0.25rem;
27
+ --space-2: 0.5rem;
28
+ --space-3: 0.75rem;
29
+ --space-4: 1rem;
30
+ --space-5: 1.5rem;
31
+ --space-6: 2rem;
32
+ --space-7: 3rem;
33
+ --space-8: 4rem;
34
+ }
@@ -0,0 +1,35 @@
1
+ /* Direction tokens — harbor-navy (institutional / classic B2B). */
2
+ :root {
3
+ --bg: #f3f5f8;
4
+ --surface: #ffffff;
5
+ --surface-2: #e8ecf1;
6
+ --ink: #0b1f33;
7
+ --muted: #5b6b7c;
8
+ --border: #d5dde6;
9
+ --accent: #1e3a5f;
10
+ --accent-soft: #e4ebf3;
11
+ --accent-ink: #ffffff;
12
+ --danger: #9f1239;
13
+ --success: #1b6b4a;
14
+ --warning: #9a6700;
15
+ --focus: #1e3a5f;
16
+ --overlay: rgb(11 31 51 / 0.5);
17
+ --shadow: 0 1px 2px rgb(11 31 51 / 0.07);
18
+ --font-display:
19
+ "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
20
+ --font-body: system-ui, -apple-system, sans-serif;
21
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
22
+ --radius: 0.25rem;
23
+ --leading-body: 1.55;
24
+ --tracking-caps: 0.08em;
25
+ --text-body: 1rem;
26
+ --text-small: 0.875rem;
27
+ --space-1: 0.25rem;
28
+ --space-2: 0.5rem;
29
+ --space-3: 0.75rem;
30
+ --space-4: 1rem;
31
+ --space-5: 1.5rem;
32
+ --space-6: 2rem;
33
+ --space-7: 3rem;
34
+ --space-8: 4rem;
35
+ }
@@ -0,0 +1,34 @@
1
+ /* Direction tokens — midnight-editorial (dark magazine / portfolio). */
2
+ :root {
3
+ --bg: #121212;
4
+ --surface: #1c1c1c;
5
+ --surface-2: #262626;
6
+ --ink: #f3efe6;
7
+ --muted: #a8a29a;
8
+ --border: #33302c;
9
+ --accent: #d4a574;
10
+ --accent-soft: #2a241c;
11
+ --accent-ink: #121212;
12
+ --danger: #e07070;
13
+ --success: #8fbc8f;
14
+ --warning: #d4a574;
15
+ --focus: #d4a574;
16
+ --overlay: rgb(0 0 0 / 0.72);
17
+ --shadow: 0 1px 0 rgb(243 239 230 / 0.04);
18
+ --font-display: Georgia, "Times New Roman", ui-serif, serif;
19
+ --font-body: system-ui, -apple-system, sans-serif;
20
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ --radius: 0.25rem;
22
+ --leading-body: 1.55;
23
+ --tracking-caps: 0.08em;
24
+ --text-body: 1rem;
25
+ --text-small: 0.875rem;
26
+ --space-1: 0.25rem;
27
+ --space-2: 0.5rem;
28
+ --space-3: 0.75rem;
29
+ --space-4: 1rem;
30
+ --space-5: 1.5rem;
31
+ --space-6: 2rem;
32
+ --space-7: 3rem;
33
+ --space-8: 4rem;
34
+ }
@@ -0,0 +1,34 @@
1
+ /* Direction tokens — night-console */
2
+ :root {
3
+ --bg: #0d1117;
4
+ --surface: #161b22;
5
+ --surface-2: #1c2128;
6
+ --ink: #e6edf3;
7
+ --muted: #8b949e;
8
+ --border: #30363d;
9
+ --accent: #58a6ff;
10
+ --accent-soft: #1f2a3a;
11
+ --accent-ink: #0d1117;
12
+ --danger: #f85149;
13
+ --success: #3fb950;
14
+ --warning: #d29922;
15
+ --focus: #58a6ff;
16
+ --overlay: rgb(1 4 9 / 0.72);
17
+ --shadow: 0 1px 0 rgb(255 255 255 / 0.04);
18
+ --font-display: system-ui, -apple-system, sans-serif;
19
+ --font-body: system-ui, -apple-system, sans-serif;
20
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
21
+ --radius: 0.375rem;
22
+ --leading-body: 1.5;
23
+ --tracking-caps: 0.06em;
24
+ --text-body: 0.9375rem;
25
+ --text-small: 0.8125rem;
26
+ --space-1: 0.25rem;
27
+ --space-2: 0.5rem;
28
+ --space-3: 0.75rem;
29
+ --space-4: 1rem;
30
+ --space-5: 1.5rem;
31
+ --space-6: 2rem;
32
+ --space-7: 3rem;
33
+ --space-8: 4rem;
34
+ }
@@ -0,0 +1,35 @@
1
+ /* Direction tokens — paper-mono (print / resume / quiet docs). */
2
+ :root {
3
+ --bg: #f5f5f4;
4
+ --surface: #ffffff;
5
+ --surface-2: #ececeb;
6
+ --ink: #171717;
7
+ --muted: #737373;
8
+ --border: #d4d4d4;
9
+ --accent: #171717;
10
+ --accent-soft: #e7e7e7;
11
+ --accent-ink: #ffffff;
12
+ --danger: #991b1b;
13
+ --success: #166534;
14
+ --warning: #92400e;
15
+ --focus: #171717;
16
+ --overlay: rgb(23 23 23 / 0.4);
17
+ --shadow: none;
18
+ --font-display:
19
+ "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
20
+ --font-body: system-ui, -apple-system, sans-serif;
21
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
22
+ --radius: 0.25rem;
23
+ --leading-body: 1.5;
24
+ --tracking-caps: 0.09em;
25
+ --text-body: 0.9375rem;
26
+ --text-small: 0.8125rem;
27
+ --space-1: 0.25rem;
28
+ --space-2: 0.5rem;
29
+ --space-3: 0.75rem;
30
+ --space-4: 1rem;
31
+ --space-5: 1.5rem;
32
+ --space-6: 2rem;
33
+ --space-7: 3rem;
34
+ --space-8: 4rem;
35
+ }