hoomanjs 1.46.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 (340) hide show
  1. package/README.md +44 -18
  2. package/dist/acp/acp-agent.d.ts +42 -0
  3. package/dist/acp/acp-agent.js +336 -47
  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/session-config.d.ts +2 -2
  14. package/dist/acp/session-config.js +24 -20
  15. package/dist/acp/session-config.js.map +1 -1
  16. package/dist/acp/sessions/store.d.ts +3 -3
  17. package/dist/acp/utils/tool-kind.js +8 -6
  18. package/dist/acp/utils/tool-kind.js.map +1 -1
  19. package/dist/chat/app.js +91 -11
  20. package/dist/chat/app.js.map +1 -1
  21. package/dist/chat/approvals.js +3 -0
  22. package/dist/chat/approvals.js.map +1 -1
  23. package/dist/chat/components/ApprovalPrompt.js +15 -25
  24. package/dist/chat/components/ApprovalPrompt.js.map +1 -1
  25. package/dist/chat/components/BackgroundJobsPanel.d.ts +10 -0
  26. package/dist/chat/components/BackgroundJobsPanel.js +15 -0
  27. package/dist/chat/components/BackgroundJobsPanel.js.map +1 -0
  28. package/dist/chat/components/BottomChrome.d.ts +6 -1
  29. package/dist/chat/components/BottomChrome.js +3 -2
  30. package/dist/chat/components/BottomChrome.js.map +1 -1
  31. package/dist/chat/components/ChromePicker.d.ts +7 -2
  32. package/dist/chat/components/ChromePicker.js +18 -2
  33. package/dist/chat/components/ChromePicker.js.map +1 -1
  34. package/dist/chat/components/Composer.js +3 -2
  35. package/dist/chat/components/Composer.js.map +1 -1
  36. package/dist/chat/components/DownloadPanel.js +2 -1
  37. package/dist/chat/components/DownloadPanel.js.map +1 -1
  38. package/dist/chat/components/EmptyChatBanner.js +2 -1
  39. package/dist/chat/components/EmptyChatBanner.js.map +1 -1
  40. package/dist/chat/components/PromptInput.js +2 -1
  41. package/dist/chat/components/PromptInput.js.map +1 -1
  42. package/dist/chat/components/QuestionPrompt.js +5 -4
  43. package/dist/chat/components/QuestionPrompt.js.map +1 -1
  44. package/dist/chat/components/QueuedPrompts.js +3 -2
  45. package/dist/chat/components/QueuedPrompts.js.map +1 -1
  46. package/dist/chat/components/ReasoningStrip.js +2 -1
  47. package/dist/chat/components/ReasoningStrip.js.map +1 -1
  48. package/dist/chat/components/RetryEvent.js +2 -1
  49. package/dist/chat/components/RetryEvent.js.map +1 -1
  50. package/dist/chat/components/SelectPicker.js +2 -1
  51. package/dist/chat/components/SelectPicker.js.map +1 -1
  52. package/dist/chat/components/ShellToolEvent.d.ts +12 -0
  53. package/dist/chat/components/ShellToolEvent.js +94 -0
  54. package/dist/chat/components/ShellToolEvent.js.map +1 -0
  55. package/dist/chat/components/SlashCommands.js +2 -1
  56. package/dist/chat/components/SlashCommands.js.map +1 -1
  57. package/dist/chat/components/Spinner.js +2 -1
  58. package/dist/chat/components/Spinner.js.map +1 -1
  59. package/dist/chat/components/StatusBar.js +19 -15
  60. package/dist/chat/components/StatusBar.js.map +1 -1
  61. package/dist/chat/components/ThinkingStatus.js +2 -1
  62. package/dist/chat/components/ThinkingStatus.js.map +1 -1
  63. package/dist/chat/components/ThoughtEvent.js +2 -1
  64. package/dist/chat/components/ThoughtEvent.js.map +1 -1
  65. package/dist/chat/components/TodoPanel.js +2 -1
  66. package/dist/chat/components/TodoPanel.js.map +1 -1
  67. package/dist/chat/components/ToolEvent.d.ts +2 -1
  68. package/dist/chat/components/ToolEvent.js +9 -2
  69. package/dist/chat/components/ToolEvent.js.map +1 -1
  70. package/dist/chat/components/ToolEventFileResult.js +8 -7
  71. package/dist/chat/components/ToolEventFileResult.js.map +1 -1
  72. package/dist/chat/components/Transcript.d.ts +4 -2
  73. package/dist/chat/components/Transcript.js +4 -4
  74. package/dist/chat/components/Transcript.js.map +1 -1
  75. package/dist/chat/components/markdown/BlockRenderer.js +3 -2
  76. package/dist/chat/components/markdown/BlockRenderer.js.map +1 -1
  77. package/dist/chat/components/markdown/CodeBlock.js +3 -2
  78. package/dist/chat/components/markdown/CodeBlock.js.map +1 -1
  79. package/dist/chat/components/markdown/InlineRenderer.js +6 -5
  80. package/dist/chat/components/markdown/InlineRenderer.js.map +1 -1
  81. package/dist/chat/components/shared.js +7 -6
  82. package/dist/chat/components/shared.js.map +1 -1
  83. package/dist/chat/types.d.ts +7 -0
  84. package/dist/cli.js +162 -44
  85. package/dist/cli.js.map +1 -1
  86. package/dist/configure/app.js +46 -29
  87. package/dist/configure/app.js.map +1 -1
  88. package/dist/configure/components/BusyScreen.js +2 -1
  89. package/dist/configure/components/BusyScreen.js.map +1 -1
  90. package/dist/configure/components/MenuScreen.js +3 -2
  91. package/dist/configure/components/MenuScreen.js.map +1 -1
  92. package/dist/configure/components/PromptForm.js +2 -1
  93. package/dist/configure/components/PromptForm.js.map +1 -1
  94. package/dist/configure/components/SelectMenuItem.js +4 -3
  95. package/dist/configure/components/SelectMenuItem.js.map +1 -1
  96. package/dist/configure/utils.js +4 -3
  97. package/dist/configure/utils.js.map +1 -1
  98. package/dist/core/agent/default-retry-strategy.js +46 -12
  99. package/dist/core/agent/default-retry-strategy.js.map +1 -1
  100. package/dist/core/agent/gitignore-guard-plugin.js +17 -2
  101. package/dist/core/agent/gitignore-guard-plugin.js.map +1 -1
  102. package/dist/core/agent/index.js +38 -7
  103. package/dist/core/agent/index.js.map +1 -1
  104. package/dist/core/approvals/allowlist.js +1 -0
  105. package/dist/core/approvals/allowlist.js.map +1 -1
  106. package/dist/core/approvals/intervention.d.ts +10 -2
  107. package/dist/core/approvals/intervention.js +46 -8
  108. package/dist/core/approvals/intervention.js.map +1 -1
  109. package/dist/core/config.d.ts +9 -2
  110. package/dist/core/config.js +8 -4
  111. package/dist/core/config.js.map +1 -1
  112. package/dist/core/index.d.ts +2 -2
  113. package/dist/core/mcp/oauth/service.js +2 -2
  114. package/dist/core/mcp/oauth/service.js.map +1 -1
  115. package/dist/core/models/bedrock.js +6 -0
  116. package/dist/core/models/bedrock.js.map +1 -1
  117. package/dist/core/models/groq.js +34 -14
  118. package/dist/core/models/groq.js.map +1 -1
  119. package/dist/core/models/minimax.js +1 -1
  120. package/dist/core/models/minimax.js.map +1 -1
  121. package/dist/core/models/types.d.ts +10 -2
  122. package/dist/core/models/types.js +1 -0
  123. package/dist/core/models/types.js.map +1 -1
  124. package/dist/core/modes/definitions.d.ts +4 -2
  125. package/dist/core/modes/definitions.js +77 -9
  126. package/dist/core/modes/definitions.js.map +1 -1
  127. package/dist/core/modes/index.d.ts +1 -1
  128. package/dist/core/modes/index.js +1 -1
  129. package/dist/core/modes/index.js.map +1 -1
  130. package/dist/core/modes/registry.js +4 -9
  131. package/dist/core/modes/registry.js.map +1 -1
  132. package/dist/core/modes/schema.d.ts +1 -1
  133. package/dist/core/modes/schema.js +1 -1
  134. package/dist/core/modes/schema.js.map +1 -1
  135. package/dist/core/prompts/agents/{review.md → code-review.md} +2 -2
  136. package/dist/core/prompts/agents/design-review.md +35 -0
  137. package/dist/core/prompts/agents/{test-investigator.md → quality-analyst.md} +2 -2
  138. package/dist/core/prompts/modes/agent.md +2 -0
  139. package/dist/core/prompts/modes/ask.md +2 -2
  140. package/dist/core/prompts/modes/design.md +37 -0
  141. package/dist/core/prompts/modes/plan.md +5 -5
  142. package/dist/core/prompts/{runtime.js → runtime/agents.js} +2 -2
  143. package/dist/core/prompts/runtime/agents.js.map +1 -0
  144. package/dist/core/prompts/runtime/design.d.ts +11 -0
  145. package/dist/core/prompts/runtime/design.js +78 -0
  146. package/dist/core/prompts/runtime/design.js.map +1 -0
  147. package/dist/core/prompts/{session-mode-appendix.js → session-mode.js} +1 -1
  148. package/dist/core/prompts/session-mode.js.map +1 -0
  149. package/dist/core/prompts/static/ask-user.md +3 -2
  150. package/dist/core/prompts/static/fetch.md +2 -1
  151. package/dist/core/prompts/static/filesystem.md +2 -1
  152. package/dist/core/prompts/static/shell.md +21 -1
  153. package/dist/core/prompts/static/subagents.md +2 -1
  154. package/dist/core/prompts/static/switch-mode.md +10 -0
  155. package/dist/core/prompts/system.d.ts +1 -0
  156. package/dist/core/prompts/system.js +11 -3
  157. package/dist/core/prompts/system.js.map +1 -1
  158. package/dist/core/shell/index.d.ts +7 -0
  159. package/dist/core/shell/index.js +6 -0
  160. package/dist/core/shell/index.js.map +1 -0
  161. package/dist/core/shell/manager.d.ts +23 -0
  162. package/dist/core/shell/manager.js +604 -0
  163. package/dist/core/shell/manager.js.map +1 -0
  164. package/dist/core/shell/output-buffer.d.ts +30 -0
  165. package/dist/core/shell/output-buffer.js +116 -0
  166. package/dist/core/shell/output-buffer.js.map +1 -0
  167. package/dist/core/shell/registry.d.ts +5 -0
  168. package/dist/core/shell/registry.js +24 -0
  169. package/dist/core/shell/registry.js.map +1 -0
  170. package/dist/core/{tools/shell.d.ts → shell/terminal-backend.d.ts} +20 -18
  171. package/dist/core/shell/terminal-backend.js +18 -0
  172. package/dist/core/shell/terminal-backend.js.map +1 -0
  173. package/dist/core/shell/tools.d.ts +41 -0
  174. package/dist/core/{tools/shell.js → shell/tools.js} +186 -11
  175. package/dist/core/shell/tools.js.map +1 -0
  176. package/dist/core/shell/types.d.ts +95 -0
  177. package/dist/core/shell/types.js +2 -0
  178. package/dist/core/shell/types.js.map +1 -0
  179. package/dist/core/skills/built-in/hooman-config/SKILL.md +30 -35
  180. package/dist/core/skills/built-in/hooman-config/search.md +5 -3
  181. package/dist/core/skills/built-in/hooman-design/SKILL.md +97 -0
  182. package/dist/core/skills/built-in/hooman-design/assets/article-shell.html +87 -0
  183. package/dist/core/skills/built-in/hooman-design/assets/auth-shell.html +143 -0
  184. package/dist/core/skills/built-in/hooman-design/assets/business-card-shell.html +112 -0
  185. package/dist/core/skills/built-in/hooman-design/assets/contact-shell.html +181 -0
  186. package/dist/core/skills/built-in/hooman-design/assets/dashboard-shell.html +90 -0
  187. package/dist/core/skills/built-in/hooman-design/assets/data-table-shell.html +114 -0
  188. package/dist/core/skills/built-in/hooman-design/assets/deck-shell.html +187 -0
  189. package/dist/core/skills/built-in/hooman-design/assets/dialog-shell.html +98 -0
  190. package/dist/core/skills/built-in/hooman-design/assets/email-shell.html +101 -0
  191. package/dist/core/skills/built-in/hooman-design/assets/empty-state-shell.html +92 -0
  192. package/dist/core/skills/built-in/hooman-design/assets/flyer-shell.html +168 -0
  193. package/dist/core/skills/built-in/hooman-design/assets/invite-shell.html +167 -0
  194. package/dist/core/skills/built-in/hooman-design/assets/landing-shell.html +184 -0
  195. package/dist/core/skills/built-in/hooman-design/assets/mobile-frame-shell.html +109 -0
  196. package/dist/core/skills/built-in/hooman-design/assets/newsletter-shell.html +141 -0
  197. package/dist/core/skills/built-in/hooman-design/assets/onboarding-shell.html +131 -0
  198. package/dist/core/skills/built-in/hooman-design/assets/pricing-shell.html +160 -0
  199. package/dist/core/skills/built-in/hooman-design/assets/prototype-shell.html +83 -0
  200. package/dist/core/skills/built-in/hooman-design/assets/resume-shell.html +228 -0
  201. package/dist/core/skills/built-in/hooman-design/assets/settings-shell.html +196 -0
  202. package/dist/core/skills/built-in/hooman-design/assets/tokens/botanical-calm.css +34 -0
  203. package/dist/core/skills/built-in/hooman-design/assets/tokens/copper-ledger.css +34 -0
  204. package/dist/core/skills/built-in/hooman-design/assets/tokens/editorial-ink.css +34 -0
  205. package/dist/core/skills/built-in/hooman-design/assets/tokens/fintech-clear.css +34 -0
  206. package/dist/core/skills/built-in/hooman-design/assets/tokens/harbor-navy.css +35 -0
  207. package/dist/core/skills/built-in/hooman-design/assets/tokens/midnight-editorial.css +34 -0
  208. package/dist/core/skills/built-in/hooman-design/assets/tokens/night-console.css +34 -0
  209. package/dist/core/skills/built-in/hooman-design/assets/tokens/paper-mono.css +35 -0
  210. package/dist/core/skills/built-in/hooman-design/assets/tokens/signal-mono.css +34 -0
  211. package/dist/core/skills/built-in/hooman-design/assets/tokens/soft-product.css +34 -0
  212. package/dist/core/skills/built-in/hooman-design/assets/tokens/swiss-grid.css +34 -0
  213. package/dist/core/skills/built-in/hooman-design/assets/tokens/warm-atelier.css +34 -0
  214. package/dist/core/skills/built-in/hooman-design/assets/waitlist-shell.html +139 -0
  215. package/dist/core/skills/built-in/hooman-design/craft/accessibility-baseline.md +32 -0
  216. package/dist/core/skills/built-in/hooman-design/craft/anti-ai-slop.md +27 -0
  217. package/dist/core/skills/built-in/hooman-design/craft/color-surfaces.md +45 -0
  218. package/dist/core/skills/built-in/hooman-design/craft/data-viz.md +24 -0
  219. package/dist/core/skills/built-in/hooman-design/craft/deck-slides.md +46 -0
  220. package/dist/core/skills/built-in/hooman-design/craft/forms-validation.md +35 -0
  221. package/dist/core/skills/built-in/hooman-design/craft/iconography.md +19 -0
  222. package/dist/core/skills/built-in/hooman-design/craft/layout-overflow.md +31 -0
  223. package/dist/core/skills/built-in/hooman-design/craft/motion.md +41 -0
  224. package/dist/core/skills/built-in/hooman-design/craft/print.md +37 -0
  225. package/dist/core/skills/built-in/hooman-design/craft/responsive.md +30 -0
  226. package/dist/core/skills/built-in/hooman-design/craft/spacing-density.md +46 -0
  227. package/dist/core/skills/built-in/hooman-design/craft/state-coverage.md +21 -0
  228. package/dist/core/skills/built-in/hooman-design/craft/typography.md +73 -0
  229. package/dist/core/skills/built-in/hooman-design/directions.md +115 -0
  230. package/dist/core/skills/built-in/hooman-design/references/artifact-layout.md +15 -0
  231. package/dist/core/skills/built-in/hooman-design/references/export.md +47 -0
  232. package/dist/core/skills/built-in/hooman-design/references/workflow.md +80 -0
  233. package/dist/core/skills/built-in/hooman-mcp/SKILL.md +2 -2
  234. package/dist/core/state/llm-modality.d.ts +13 -0
  235. package/dist/core/state/llm-modality.js +19 -0
  236. package/dist/core/state/llm-modality.js.map +1 -0
  237. package/dist/core/state/plan.d.ts +1 -1
  238. package/dist/core/state/plan.js +1 -1
  239. package/dist/core/state/shell-jobs.d.ts +9 -0
  240. package/dist/core/state/shell-jobs.js +20 -0
  241. package/dist/core/state/shell-jobs.js.map +1 -0
  242. package/dist/core/state/tool-approvals.d.ts +12 -9
  243. package/dist/core/state/tool-approvals.js +94 -52
  244. package/dist/core/state/tool-approvals.js.map +1 -1
  245. package/dist/core/state/turn-boundaries.d.ts +33 -0
  246. package/dist/core/state/turn-boundaries.js +49 -0
  247. package/dist/core/state/turn-boundaries.js.map +1 -0
  248. package/dist/core/subagents/index.d.ts +1 -1
  249. package/dist/core/subagents/index.js +1 -1
  250. package/dist/core/subagents/registry.js +15 -6
  251. package/dist/core/subagents/registry.js.map +1 -1
  252. package/dist/core/subagents/tool.d.ts +8 -2
  253. package/dist/core/subagents/tool.js +93 -44
  254. package/dist/core/subagents/tool.js.map +1 -1
  255. package/dist/core/theme.d.ts +14 -0
  256. package/dist/core/theme.js +14 -0
  257. package/dist/core/theme.js.map +1 -0
  258. package/dist/core/tools/ask-user.d.ts +1 -1
  259. package/dist/core/tools/ask-user.js +1 -1
  260. package/dist/core/tools/export.d.ts +8 -0
  261. package/dist/core/tools/export.js +202 -0
  262. package/dist/core/tools/export.js.map +1 -0
  263. package/dist/core/tools/fetch.d.ts +2 -0
  264. package/dist/core/tools/fetch.js +92 -55
  265. package/dist/core/tools/fetch.js.map +1 -1
  266. package/dist/core/tools/filesystem.d.ts +2 -1
  267. package/dist/core/tools/filesystem.js +38 -4
  268. package/dist/core/tools/filesystem.js.map +1 -1
  269. package/dist/core/tools/index.d.ts +3 -2
  270. package/dist/core/tools/index.js +3 -2
  271. package/dist/core/tools/index.js.map +1 -1
  272. package/dist/core/tools/preview.d.ts +10 -0
  273. package/dist/core/tools/preview.js +147 -0
  274. package/dist/core/tools/preview.js.map +1 -0
  275. package/dist/core/tools/switch-mode.d.ts +6 -0
  276. package/dist/core/tools/switch-mode.js +188 -0
  277. package/dist/core/tools/switch-mode.js.map +1 -0
  278. package/dist/core/tools/web-search.js +176 -0
  279. package/dist/core/tools/web-search.js.map +1 -1
  280. package/dist/core/utils/browser.d.ts +8 -1
  281. package/dist/core/utils/browser.js +17 -1
  282. package/dist/core/utils/browser.js.map +1 -1
  283. package/dist/core/utils/export-design.d.ts +40 -0
  284. package/dist/core/utils/export-design.js +188 -0
  285. package/dist/core/utils/export-design.js.map +1 -0
  286. package/dist/core/utils/export-figma.d.ts +17 -0
  287. package/dist/core/utils/export-figma.js +189 -0
  288. package/dist/core/utils/export-figma.js.map +1 -0
  289. package/dist/core/utils/export-sketch.d.ts +11 -0
  290. package/dist/core/utils/export-sketch.js +456 -0
  291. package/dist/core/utils/export-sketch.js.map +1 -0
  292. package/dist/core/utils/fig-archive.d.ts +47 -0
  293. package/dist/core/utils/fig-archive.js +181 -0
  294. package/dist/core/utils/fig-archive.js.map +1 -0
  295. package/dist/core/utils/metadata.d.ts +30 -0
  296. package/dist/core/utils/metadata.js +122 -0
  297. package/dist/core/utils/metadata.js.map +1 -1
  298. package/dist/core/utils/models-prefetch.d.ts +53 -0
  299. package/dist/core/utils/models-prefetch.js +469 -0
  300. package/dist/core/utils/models-prefetch.js.map +1 -0
  301. package/dist/core/utils/onboarding-config.d.ts +48 -0
  302. package/dist/core/utils/onboarding-config.js +373 -0
  303. package/dist/core/utils/onboarding-config.js.map +1 -0
  304. package/dist/core/utils/paths.d.ts +9 -7
  305. package/dist/core/utils/paths.js +12 -10
  306. package/dist/core/utils/paths.js.map +1 -1
  307. package/dist/core/utils/preview-server.d.ts +20 -0
  308. package/dist/core/utils/preview-server.js +212 -0
  309. package/dist/core/utils/preview-server.js.map +1 -0
  310. package/dist/core/utils/search-probe.d.ts +19 -0
  311. package/dist/core/utils/search-probe.js +165 -0
  312. package/dist/core/utils/search-probe.js.map +1 -0
  313. package/dist/core/utils/seeds/empty-slides.deck +0 -0
  314. package/dist/core/utils/url-safety.d.ts +2 -0
  315. package/dist/core/utils/url-safety.js +47 -0
  316. package/dist/core/utils/url-safety.js.map +1 -0
  317. package/dist/core/utils/zstd.d.ts +6 -0
  318. package/dist/core/utils/zstd.js +39 -0
  319. package/dist/core/utils/zstd.js.map +1 -0
  320. package/dist/exec/approvals.js +5 -5
  321. package/dist/exec/approvals.js.map +1 -1
  322. package/dist/index.d.ts +11 -5
  323. package/dist/index.js +8 -5
  324. package/dist/index.js.map +1 -1
  325. package/dist/onboarding/app.d.ts +5 -0
  326. package/dist/onboarding/app.js +255 -0
  327. package/dist/onboarding/app.js.map +1 -0
  328. package/dist/onboarding/index.d.ts +5 -0
  329. package/dist/onboarding/index.js +27 -0
  330. package/dist/onboarding/index.js.map +1 -0
  331. package/package.json +16 -3
  332. package/dist/core/prompts/runtime.js.map +0 -1
  333. package/dist/core/prompts/session-mode-appendix.js.map +0 -1
  334. package/dist/core/prompts/static/planning.md +0 -3
  335. package/dist/core/tools/plan.d.ts +0 -5
  336. package/dist/core/tools/plan.js +0 -150
  337. package/dist/core/tools/plan.js.map +0 -1
  338. package/dist/core/tools/shell.js.map +0 -1
  339. /package/dist/core/prompts/{runtime.d.ts → runtime/agents.d.ts} +0 -0
  340. /package/dist/core/prompts/{session-mode-appendix.d.ts → session-mode.d.ts} +0 -0
@@ -0,0 +1,109 @@
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>Mobile frame</title>
7
+ <style>
8
+ :root {
9
+ --bg: #e4e4e7;
10
+ --ink: #18181b;
11
+ --muted: #71717a;
12
+ --accent: #0f766e;
13
+ --surface: #ffffff;
14
+ --border: #e4e4e7;
15
+ --font-body: system-ui, -apple-system, sans-serif;
16
+ }
17
+ * {
18
+ box-sizing: border-box;
19
+ }
20
+ body {
21
+ margin: 0;
22
+ min-height: 100vh;
23
+ display: grid;
24
+ place-items: center;
25
+ background: var(--bg);
26
+ font-family: var(--font-body);
27
+ padding: 1.5rem;
28
+ }
29
+ .device {
30
+ width: 390px;
31
+ max-width: 100%;
32
+ height: 760px;
33
+ max-height: 90vh;
34
+ background: var(--surface);
35
+ border: 1px solid #a1a1aa;
36
+ border-radius: 1.75rem;
37
+ overflow: hidden;
38
+ display: flex;
39
+ flex-direction: column;
40
+ box-shadow: 0 20px 50px #00000022;
41
+ }
42
+ .status {
43
+ flex: 0 0 auto;
44
+ padding: 0.75rem 1.25rem 0.35rem;
45
+ font-size: 0.75rem;
46
+ font-weight: 600;
47
+ display: flex;
48
+ justify-content: space-between;
49
+ }
50
+ .content {
51
+ flex: 1 1 auto;
52
+ min-height: 0;
53
+ overflow: auto;
54
+ padding: 0.5rem 1.25rem 1rem;
55
+ }
56
+ h1 {
57
+ margin: 0 0 0.35rem;
58
+ font-size: 1.35rem;
59
+ letter-spacing: -0.02em;
60
+ }
61
+ p {
62
+ margin: 0 0 1rem;
63
+ color: var(--muted);
64
+ font-size: 0.9375rem;
65
+ line-height: 1.45;
66
+ }
67
+ .card {
68
+ border: 1px solid var(--border);
69
+ border-radius: 0.75rem;
70
+ padding: 1rem;
71
+ margin-bottom: 0.75rem;
72
+ }
73
+ .tabbar {
74
+ flex: 0 0 auto;
75
+ display: grid;
76
+ grid-template-columns: repeat(3, 1fr);
77
+ border-top: 1px solid var(--border);
78
+ padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0));
79
+ }
80
+ .tabbar a {
81
+ text-align: center;
82
+ text-decoration: none;
83
+ color: var(--muted);
84
+ font-size: 0.6875rem;
85
+ padding: 0.35rem;
86
+ }
87
+ .tabbar a[aria-current="page"] {
88
+ color: var(--accent);
89
+ font-weight: 600;
90
+ }
91
+ </style>
92
+ </head>
93
+ <body>
94
+ <div class="device" aria-label="Mobile preview frame">
95
+ <div class="status"><span>9:41</span><span>●●●</span></div>
96
+ <div class="content">
97
+ <h1>Home</h1>
98
+ <p>Design at phone width inside the frame — not the desktop canvas.</p>
99
+ <div class="card">Primary card content</div>
100
+ <div class="card">Secondary card content</div>
101
+ </div>
102
+ <nav class="tabbar" aria-label="Tabs">
103
+ <a href="#" aria-current="page">Home</a>
104
+ <a href="#">Search</a>
105
+ <a href="#">You</a>
106
+ </nav>
107
+ </div>
108
+ </body>
109
+ </html>
@@ -0,0 +1,141 @@
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>Newsletter</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0f172a;
10
+ --ink: #f8fafc;
11
+ --muted: #94a3b8;
12
+ --accent: #0f766e;
13
+ --surface: #1e293b;
14
+ --border: #334155;
15
+ --danger: #f87171;
16
+ --font-body: system-ui, -apple-system, sans-serif;
17
+ }
18
+ * {
19
+ box-sizing: border-box;
20
+ }
21
+ body {
22
+ margin: 0;
23
+ min-height: 100vh;
24
+ display: grid;
25
+ place-items: center;
26
+ font-family: var(--font-body);
27
+ background: var(--bg);
28
+ color: var(--ink);
29
+ padding: 1.5rem;
30
+ }
31
+ .card {
32
+ width: min(100%, 28rem);
33
+ background: var(--surface);
34
+ border: 1px solid var(--border);
35
+ border-radius: 0.375rem;
36
+ padding: 1.75rem;
37
+ }
38
+ h1 {
39
+ margin: 0 0 0.35rem;
40
+ font-size: 1.35rem;
41
+ letter-spacing: -0.02em;
42
+ }
43
+ .lede {
44
+ margin: 0 0 1.25rem;
45
+ color: var(--muted);
46
+ font-size: 0.9375rem;
47
+ line-height: 1.5;
48
+ }
49
+ form {
50
+ display: flex;
51
+ flex-direction: column;
52
+ gap: 0.75rem;
53
+ }
54
+ label {
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: 0.35rem;
58
+ font-size: 0.8125rem;
59
+ font-weight: 600;
60
+ }
61
+ .inline {
62
+ display: flex;
63
+ gap: 0.5rem;
64
+ align-items: stretch;
65
+ }
66
+ .inline input {
67
+ flex: 1;
68
+ min-width: 0;
69
+ }
70
+ input {
71
+ font: inherit;
72
+ padding: 0.65rem 0.75rem;
73
+ border: 1px solid var(--border);
74
+ border-radius: 0.375rem;
75
+ background: #0f172a;
76
+ color: var(--ink);
77
+ }
78
+ input:focus-visible {
79
+ outline: 2px solid var(--accent);
80
+ outline-offset: 1px;
81
+ }
82
+ .btn {
83
+ padding: 0.65rem 1rem;
84
+ border: 0;
85
+ border-radius: 0.375rem;
86
+ background: var(--accent);
87
+ color: #fff;
88
+ font: inherit;
89
+ font-weight: 600;
90
+ cursor: pointer;
91
+ white-space: nowrap;
92
+ }
93
+ .btn:focus-visible {
94
+ outline: 2px solid var(--ink);
95
+ outline-offset: 2px;
96
+ }
97
+ .error {
98
+ color: var(--danger);
99
+ font-size: 0.8125rem;
100
+ font-weight: 400;
101
+ }
102
+ .fine {
103
+ margin: 0.75rem 0 0;
104
+ font-size: 0.75rem;
105
+ color: var(--muted);
106
+ line-height: 1.4;
107
+ }
108
+ [hidden] {
109
+ display: none !important;
110
+ }
111
+ </style>
112
+ </head>
113
+ <body>
114
+ <main class="card">
115
+ <h1>Stay in the loop</h1>
116
+ <p class="lede">
117
+ Product updates only — say how often and what you send. No fake urgency.
118
+ </p>
119
+ <form>
120
+ <label>
121
+ Email
122
+ <div class="inline">
123
+ <input
124
+ type="email"
125
+ name="email"
126
+ autocomplete="email"
127
+ placeholder="you@company.com"
128
+ required
129
+ aria-describedby="email-error"
130
+ />
131
+ <button class="btn" type="submit">Subscribe</button>
132
+ </div>
133
+ <span class="error" id="email-error" hidden
134
+ >Enter a valid email.</span
135
+ >
136
+ </label>
137
+ </form>
138
+ <p class="fine">Unsubscribe anytime. Replace with real privacy link.</p>
139
+ </main>
140
+ </body>
141
+ </html>
@@ -0,0 +1,131 @@
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>Onboarding</title>
7
+ <style>
8
+ :root {
9
+ --bg: #f7f5f2;
10
+ --ink: #1a1a1a;
11
+ --muted: #5c5c5c;
12
+ --accent: #0f6b6b;
13
+ --surface: #ffffff;
14
+ --border: #e8e4dc;
15
+ --font-body: system-ui, -apple-system, sans-serif;
16
+ }
17
+ * {
18
+ box-sizing: border-box;
19
+ }
20
+ body {
21
+ margin: 0;
22
+ min-height: 100vh;
23
+ font-family: var(--font-body);
24
+ background: var(--bg);
25
+ color: var(--ink);
26
+ display: grid;
27
+ place-items: center;
28
+ padding: 1.5rem;
29
+ }
30
+ .card {
31
+ width: min(100%, 32rem);
32
+ background: var(--surface);
33
+ border: 1px solid var(--border);
34
+ border-radius: 0.375rem;
35
+ padding: 1.75rem;
36
+ }
37
+ .steps {
38
+ display: flex;
39
+ gap: 0.5rem;
40
+ margin-bottom: 1.25rem;
41
+ }
42
+ .steps span {
43
+ flex: 1;
44
+ height: 4px;
45
+ border-radius: 999px;
46
+ background: var(--border);
47
+ }
48
+ .steps span[aria-current="step"] {
49
+ background: var(--accent);
50
+ }
51
+ .steps span[data-done="true"] {
52
+ background: var(--accent);
53
+ opacity: 0.45;
54
+ }
55
+ h1 {
56
+ margin: 0 0 0.35rem;
57
+ font-size: 1.35rem;
58
+ letter-spacing: -0.02em;
59
+ }
60
+ .lede {
61
+ margin: 0 0 1.25rem;
62
+ color: var(--muted);
63
+ font-size: 0.9375rem;
64
+ }
65
+ label {
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: 0.35rem;
69
+ font-size: 0.8125rem;
70
+ font-weight: 600;
71
+ margin-bottom: 1rem;
72
+ }
73
+ input {
74
+ font: inherit;
75
+ padding: 0.6rem 0.75rem;
76
+ border: 1px solid var(--border);
77
+ border-radius: 0.375rem;
78
+ }
79
+ input:focus-visible {
80
+ outline: 2px solid var(--accent);
81
+ outline-offset: 1px;
82
+ }
83
+ .actions {
84
+ display: flex;
85
+ justify-content: space-between;
86
+ gap: 0.75rem;
87
+ margin-top: 0.5rem;
88
+ }
89
+ .btn {
90
+ padding: 0.6rem 1rem;
91
+ border-radius: 0.375rem;
92
+ border: 0;
93
+ background: var(--accent);
94
+ color: #fff;
95
+ font: inherit;
96
+ font-weight: 600;
97
+ cursor: pointer;
98
+ }
99
+ .btn-ghost {
100
+ background: transparent;
101
+ color: var(--ink);
102
+ border: 1px solid var(--border);
103
+ }
104
+ .btn:focus-visible {
105
+ outline: 2px solid var(--ink);
106
+ outline-offset: 2px;
107
+ }
108
+ </style>
109
+ </head>
110
+ <body>
111
+ <main class="card">
112
+ <div class="steps" aria-label="Progress">
113
+ <span data-done="true"></span>
114
+ <span aria-current="step"></span>
115
+ <span></span>
116
+ </div>
117
+ <h1>Name your workspace</h1>
118
+ <p class="lede">Step 2 of 3 — keep copy concrete.</p>
119
+ <form>
120
+ <label>
121
+ Workspace name
122
+ <input name="name" placeholder="Acme" required />
123
+ </label>
124
+ <div class="actions">
125
+ <button class="btn btn-ghost" type="button">Back</button>
126
+ <button class="btn" type="submit">Continue</button>
127
+ </div>
128
+ </form>
129
+ </main>
130
+ </body>
131
+ </html>
@@ -0,0 +1,160 @@
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>Pricing</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-4: 1rem;
17
+ --space-5: 1.5rem;
18
+ --space-6: 2rem;
19
+ --space-7: 3rem;
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
+ line-height: 1.55;
30
+ }
31
+ .wrap {
32
+ max-width: 64rem;
33
+ margin: 0 auto;
34
+ padding: var(--space-7) var(--space-5);
35
+ }
36
+ header {
37
+ text-align: center;
38
+ margin-bottom: var(--space-7);
39
+ }
40
+ h1 {
41
+ font-size: clamp(1.75rem, 3vw, 2.25rem);
42
+ letter-spacing: -0.02em;
43
+ margin: 0 0 0.5rem;
44
+ }
45
+ .lede {
46
+ color: var(--muted);
47
+ margin: 0 auto;
48
+ max-width: 32rem;
49
+ }
50
+ .plans {
51
+ display: grid;
52
+ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
53
+ gap: var(--space-5);
54
+ align-items: stretch;
55
+ }
56
+ .plan {
57
+ background: var(--surface);
58
+ border: 1px solid var(--border);
59
+ border-radius: 0.375rem;
60
+ padding: var(--space-5);
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: var(--space-4);
64
+ min-width: 0;
65
+ }
66
+ .plan[data-featured="true"] {
67
+ border-color: var(--accent);
68
+ }
69
+ .plan h2 {
70
+ margin: 0;
71
+ font-size: 1.125rem;
72
+ }
73
+ .price {
74
+ font-size: 2rem;
75
+ letter-spacing: -0.03em;
76
+ font-weight: 600;
77
+ }
78
+ .price span {
79
+ font-size: 0.875rem;
80
+ color: var(--muted);
81
+ font-weight: 400;
82
+ }
83
+ ul {
84
+ margin: 0;
85
+ padding: 0;
86
+ list-style: none;
87
+ flex: 1;
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 0.5rem;
91
+ font-size: 0.9375rem;
92
+ color: var(--muted);
93
+ }
94
+ .btn {
95
+ display: block;
96
+ text-align: center;
97
+ padding: 0.65rem 1rem;
98
+ border-radius: 0.375rem;
99
+ background: var(--accent);
100
+ color: #fff;
101
+ text-decoration: none;
102
+ font-size: 0.9375rem;
103
+ }
104
+ .btn:focus-visible {
105
+ outline: 2px solid var(--ink);
106
+ outline-offset: 2px;
107
+ }
108
+ .plan:not([data-featured="true"]) .btn {
109
+ background: transparent;
110
+ color: var(--ink);
111
+ border: 1px solid var(--border);
112
+ }
113
+ .footnote {
114
+ margin-top: var(--space-6);
115
+ text-align: center;
116
+ color: var(--muted);
117
+ font-size: 0.8125rem;
118
+ }
119
+ </style>
120
+ </head>
121
+ <body>
122
+ <div class="wrap">
123
+ <header>
124
+ <h1>Simple pricing</h1>
125
+ <p class="lede">Real plan names and limits — no invented ROI.</p>
126
+ </header>
127
+ <div class="plans">
128
+ <article class="plan">
129
+ <h2>Starter</h2>
130
+ <div class="price">$0 <span>/ mo</span></div>
131
+ <ul>
132
+ <li>Limit A</li>
133
+ <li>Limit B</li>
134
+ </ul>
135
+ <a class="btn" href="#">Get started</a>
136
+ </article>
137
+ <article class="plan" data-featured="true">
138
+ <h2>Team</h2>
139
+ <div class="price">$— <span>/ mo</span></div>
140
+ <ul>
141
+ <li>Limit A</li>
142
+ <li>Limit B</li>
143
+ <li>Limit C</li>
144
+ </ul>
145
+ <a class="btn" href="#">Start trial</a>
146
+ </article>
147
+ <article class="plan">
148
+ <h2>Enterprise</h2>
149
+ <div class="price">Custom</div>
150
+ <ul>
151
+ <li>SSO</li>
152
+ <li>Support</li>
153
+ </ul>
154
+ <a class="btn" href="#">Talk to us</a>
155
+ </article>
156
+ </div>
157
+ <p class="footnote">Taxes extra. Replace with real terms.</p>
158
+ </div>
159
+ </body>
160
+ </html>
@@ -0,0 +1,83 @@
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>Prototype</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link
10
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <style>
14
+ :root {
15
+ --bg: #f7f5f2;
16
+ --ink: #1a1a1a;
17
+ --muted: #5c5c5c;
18
+ --accent: #0f6b6b;
19
+ --surface: #ffffff;
20
+ --font-display:
21
+ "Source Serif 4", Georgia, "Times New Roman", ui-serif, serif;
22
+ --font-body: Inter, system-ui, -apple-system, sans-serif;
23
+ }
24
+ * {
25
+ box-sizing: border-box;
26
+ }
27
+ body {
28
+ margin: 0;
29
+ font-family: var(--font-body);
30
+ font-size: 16px;
31
+ line-height: 1.55;
32
+ color: var(--ink);
33
+ background: var(--bg);
34
+ }
35
+ header,
36
+ main,
37
+ footer {
38
+ max-width: 72rem;
39
+ margin: 0 auto;
40
+ padding: 1.5rem;
41
+ }
42
+ h1 {
43
+ font-family: var(--font-display);
44
+ font-size: clamp(2rem, 4vw, 3rem);
45
+ line-height: 1.1;
46
+ letter-spacing: -0.02em;
47
+ margin: 0 0 0.75rem;
48
+ }
49
+ .lede {
50
+ color: var(--muted);
51
+ font-size: 1.125rem;
52
+ max-width: 40rem;
53
+ }
54
+ .btn {
55
+ display: inline-block;
56
+ margin-top: 1.25rem;
57
+ padding: 0.65rem 1.1rem;
58
+ border-radius: 0.375rem;
59
+ background: var(--accent);
60
+ color: #fff;
61
+ text-decoration: none;
62
+ letter-spacing: 0.02em;
63
+ }
64
+ .btn:focus-visible {
65
+ outline: 2px solid var(--ink);
66
+ outline-offset: 2px;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <header>
72
+ <h1>Headline that states the offer</h1>
73
+ <p class="lede">
74
+ One short supporting sentence. Replace with real product copy — no
75
+ lorem.
76
+ </p>
77
+ <a class="btn" href="#">Primary action</a>
78
+ </header>
79
+ <main>
80
+ <!-- Add sections with clear hierarchy. Prefer flat surfaces over gradients. -->
81
+ </main>
82
+ </body>
83
+ </html>