@jaimevalasek/aioson 1.4.0 → 1.6.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 (301) hide show
  1. package/CHANGELOG.md +31 -1
  2. package/LICENSE +661 -21
  3. package/README.md +9 -1
  4. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  5. package/docs/design-previews/aurora-command-ui.html +682 -0
  6. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  7. package/docs/design-previews/bold-editorial-ui.html +717 -0
  8. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  9. package/docs/design-previews/clean-saas-ui.html +549 -0
  10. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  11. package/docs/design-previews/cognitive-core-ui.html +463 -0
  12. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  13. package/docs/design-previews/glassmorphism-ui.html +886 -0
  14. package/docs/design-previews/index.html +699 -0
  15. package/docs/design-previews/interface-design-website.html +1187 -0
  16. package/docs/design-previews/interface-design.html +513 -0
  17. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  18. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  19. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  20. package/docs/design-previews/premium-command-center-ui.html +552 -0
  21. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  22. package/docs/design-previews/warm-craft-ui.html +739 -0
  23. package/docs/en/cli-reference.md +20 -9
  24. package/docs/en/squad-dashboard.md +372 -0
  25. package/docs/openclaw-bridge.md +308 -0
  26. package/docs/pt/README.md +7 -0
  27. package/docs/pt/agent-sharding.md +132 -0
  28. package/docs/pt/agentes.md +131 -11
  29. package/docs/pt/busca-de-contexto.md +129 -0
  30. package/docs/pt/cache-de-contexto.md +156 -0
  31. package/docs/pt/cenarios.md +46 -2
  32. package/docs/pt/comandos-cli.md +88 -1
  33. package/docs/pt/design-hybrid-forge.md +107 -0
  34. package/docs/pt/inicio-rapido.md +72 -5
  35. package/docs/pt/inteligencia-adaptativa.md +324 -0
  36. package/docs/pt/monitor-de-contexto.md +104 -0
  37. package/docs/pt/recuperacao-de-sessao.md +125 -0
  38. package/docs/pt/sandbox.md +125 -0
  39. package/docs/pt/skills.md +98 -6
  40. package/docs/pt/squad-dashboard.md +373 -0
  41. package/docs/testing/genome-2.0-matrix.md +5 -5
  42. package/docs/testing/genome-2.0-rollout.md +9 -9
  43. package/package.json +2 -2
  44. package/src/agent-loader.js +280 -0
  45. package/src/backup-local.js +74 -0
  46. package/src/cli.js +192 -0
  47. package/src/commands/agent-loader.js +85 -0
  48. package/src/commands/backup-local-cmd.js +25 -0
  49. package/src/commands/context-cache.js +90 -0
  50. package/src/commands/context-monitor.js +92 -0
  51. package/src/commands/context-search.js +66 -0
  52. package/src/commands/design-hybrid-options.js +385 -0
  53. package/src/commands/health.js +214 -0
  54. package/src/commands/init.js +54 -13
  55. package/src/commands/install.js +52 -13
  56. package/src/commands/learning-evolve.js +355 -0
  57. package/src/commands/live.js +34 -0
  58. package/src/commands/recovery.js +43 -0
  59. package/src/commands/runtime.js +242 -0
  60. package/src/commands/sandbox.js +37 -0
  61. package/src/commands/setup-context.js +29 -4
  62. package/src/commands/setup.js +178 -0
  63. package/src/commands/skill.js +79 -32
  64. package/src/commands/squad-daemon.js +209 -0
  65. package/src/commands/squad-dashboard.js +39 -0
  66. package/src/commands/squad-deploy.js +64 -0
  67. package/src/commands/squad-doctor.js +52 -0
  68. package/src/commands/squad-mcp.js +270 -0
  69. package/src/commands/squad-processes.js +56 -0
  70. package/src/commands/squad-recovery.js +42 -0
  71. package/src/commands/squad-roi.js +291 -0
  72. package/src/commands/squad-score.js +250 -0
  73. package/src/commands/squad-status.js +37 -1
  74. package/src/commands/squad-validate.js +62 -1
  75. package/src/commands/squad-webhook.js +160 -0
  76. package/src/commands/squad-worker.js +191 -0
  77. package/src/commands/squad-worktrees.js +75 -0
  78. package/src/commands/tool-registry-cmd.js +232 -0
  79. package/src/commands/update.js +7 -0
  80. package/src/commands/web-map.js +70 -0
  81. package/src/commands/web-scrape.js +71 -0
  82. package/src/constants.js +17 -0
  83. package/src/context-cache.js +159 -0
  84. package/src/context-search.js +326 -0
  85. package/src/context-writer.js +45 -1
  86. package/src/design-variation-catalog.js +503 -0
  87. package/src/i18n/messages/en.js +159 -3
  88. package/src/i18n/messages/es.js +147 -2
  89. package/src/i18n/messages/fr.js +147 -2
  90. package/src/i18n/messages/pt-BR.js +158 -3
  91. package/src/install-animation.js +260 -0
  92. package/src/install-profile.js +143 -0
  93. package/src/install-wizard.js +474 -0
  94. package/src/installer.js +38 -10
  95. package/src/lib/webhook-server.js +328 -0
  96. package/src/mcp-connectors/registry.js +602 -0
  97. package/src/parser.js +7 -1
  98. package/src/recovery-context-session.js +154 -0
  99. package/src/runtime-store.js +355 -2
  100. package/src/sandbox.js +177 -0
  101. package/src/squad/external-session.js +180 -0
  102. package/src/squad/inter-squad.js +74 -0
  103. package/src/squad/recovery-context.js +201 -0
  104. package/src/squad/worktree-manager.js +114 -0
  105. package/src/squad-daemon.js +490 -0
  106. package/src/squad-dashboard/api.js +223 -0
  107. package/src/squad-dashboard/attachment-handler.js +93 -0
  108. package/src/squad-dashboard/context-monitor.js +157 -0
  109. package/src/squad-dashboard/execution-logs.js +115 -0
  110. package/src/squad-dashboard/hunk-review.js +209 -0
  111. package/src/squad-dashboard/metrics.js +133 -0
  112. package/src/squad-dashboard/process-monitor.js +125 -0
  113. package/src/squad-dashboard/renderer.js +858 -0
  114. package/src/squad-dashboard/server.js +232 -0
  115. package/src/squad-dashboard/styles.js +525 -0
  116. package/src/squad-dashboard/token-tracker.js +99 -0
  117. package/src/tool-executor.js +94 -0
  118. package/src/updater.js +11 -3
  119. package/src/web.js +284 -0
  120. package/src/worker-runner.js +339 -0
  121. package/template/.aioson/agents/analyst.md +62 -3
  122. package/template/.aioson/agents/architect.md +42 -0
  123. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  124. package/template/.aioson/agents/dev.md +223 -11
  125. package/template/.aioson/agents/deyvin.md +65 -0
  126. package/template/.aioson/agents/neo.md +152 -0
  127. package/template/.aioson/agents/orache.md +17 -0
  128. package/template/.aioson/agents/orchestrator.md +26 -0
  129. package/template/.aioson/agents/pm.md +58 -0
  130. package/template/.aioson/agents/product.md +88 -12
  131. package/template/.aioson/agents/qa.md +80 -0
  132. package/template/.aioson/agents/setup.md +128 -22
  133. package/template/.aioson/agents/sheldon.md +704 -0
  134. package/template/.aioson/agents/squad.md +191 -0
  135. package/template/.aioson/agents/tester.md +410 -0
  136. package/template/.aioson/agents/ux-ui.md +12 -0
  137. package/template/.aioson/config.md +21 -0
  138. package/template/.aioson/context/forensics/.gitkeep +0 -0
  139. package/template/.aioson/context/seeds/seed-example.md +27 -0
  140. package/template/.aioson/context/user-profile.md +42 -0
  141. package/template/.aioson/locales/en/agents/analyst.md +8 -0
  142. package/template/.aioson/locales/en/agents/architect.md +8 -0
  143. package/template/.aioson/locales/en/agents/dev.md +66 -7
  144. package/template/.aioson/locales/en/agents/deyvin.md +8 -0
  145. package/template/.aioson/locales/en/agents/neo.md +8 -0
  146. package/template/.aioson/locales/en/agents/orchestrator.md +26 -0
  147. package/template/.aioson/locales/en/agents/qa.md +49 -0
  148. package/template/.aioson/locales/en/agents/setup.md +35 -2
  149. package/template/.aioson/locales/en/agents/sheldon.md +340 -0
  150. package/template/.aioson/locales/en/agents/ux-ui.md +8 -0
  151. package/template/.aioson/locales/es/agents/analyst.md +8 -0
  152. package/template/.aioson/locales/es/agents/architect.md +8 -0
  153. package/template/.aioson/locales/es/agents/dev.md +66 -7
  154. package/template/.aioson/locales/es/agents/deyvin.md +8 -0
  155. package/template/.aioson/locales/es/agents/neo.md +48 -0
  156. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  157. package/template/.aioson/locales/es/agents/qa.md +26 -0
  158. package/template/.aioson/locales/es/agents/setup.md +35 -2
  159. package/template/.aioson/locales/es/agents/sheldon.md +192 -0
  160. package/template/.aioson/locales/es/agents/squad.md +63 -0
  161. package/template/.aioson/locales/es/agents/ux-ui.md +8 -0
  162. package/template/.aioson/locales/fr/agents/analyst.md +8 -0
  163. package/template/.aioson/locales/fr/agents/architect.md +8 -0
  164. package/template/.aioson/locales/fr/agents/dev.md +66 -7
  165. package/template/.aioson/locales/fr/agents/deyvin.md +8 -0
  166. package/template/.aioson/locales/fr/agents/neo.md +48 -0
  167. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  168. package/template/.aioson/locales/fr/agents/qa.md +26 -0
  169. package/template/.aioson/locales/fr/agents/setup.md +35 -2
  170. package/template/.aioson/locales/fr/agents/sheldon.md +192 -0
  171. package/template/.aioson/locales/fr/agents/squad.md +63 -0
  172. package/template/.aioson/locales/fr/agents/ux-ui.md +8 -0
  173. package/template/.aioson/locales/pt-BR/agents/analyst.md +19 -0
  174. package/template/.aioson/locales/pt-BR/agents/architect.md +19 -0
  175. package/template/.aioson/locales/pt-BR/agents/dev.md +75 -12
  176. package/template/.aioson/locales/pt-BR/agents/deyvin.md +8 -0
  177. package/template/.aioson/locales/pt-BR/agents/neo.md +147 -0
  178. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +26 -0
  179. package/template/.aioson/locales/pt-BR/agents/product.md +8 -3
  180. package/template/.aioson/locales/pt-BR/agents/qa.md +60 -0
  181. package/template/.aioson/locales/pt-BR/agents/setup.md +35 -2
  182. package/template/.aioson/locales/pt-BR/agents/sheldon.md +192 -0
  183. package/template/.aioson/locales/pt-BR/agents/squad.md +105 -0
  184. package/template/.aioson/locales/pt-BR/agents/ux-ui.md +8 -0
  185. package/template/.aioson/schemas/squad-blueprint.schema.json +21 -0
  186. package/template/.aioson/schemas/squad-manifest.schema.json +178 -1
  187. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  188. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  189. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  190. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  191. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  192. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  193. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  194. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  195. package/template/.aioson/skills/design/bold-editorial-ui/SKILL.md +205 -0
  196. package/template/.aioson/skills/design/bold-editorial-ui/references/art-direction.md +338 -0
  197. package/template/.aioson/skills/design/bold-editorial-ui/references/components.md +977 -0
  198. package/template/.aioson/skills/design/bold-editorial-ui/references/dashboards.md +218 -0
  199. package/template/.aioson/skills/design/bold-editorial-ui/references/design-tokens.md +326 -0
  200. package/template/.aioson/skills/design/bold-editorial-ui/references/motion.md +461 -0
  201. package/template/.aioson/skills/design/bold-editorial-ui/references/patterns.md +293 -0
  202. package/template/.aioson/skills/design/bold-editorial-ui/references/websites.md +352 -0
  203. package/template/.aioson/skills/design/clean-saas-ui/SKILL.md +210 -0
  204. package/template/.aioson/skills/design/clean-saas-ui/references/art-direction.md +319 -0
  205. package/template/.aioson/skills/design/clean-saas-ui/references/components.md +365 -0
  206. package/template/.aioson/skills/design/clean-saas-ui/references/dashboards.md +196 -0
  207. package/template/.aioson/skills/design/clean-saas-ui/references/design-tokens.md +244 -0
  208. package/template/.aioson/skills/design/clean-saas-ui/references/motion.md +235 -0
  209. package/template/.aioson/skills/design/clean-saas-ui/references/patterns.md +215 -0
  210. package/template/.aioson/skills/design/clean-saas-ui/references/websites.md +295 -0
  211. package/template/.aioson/skills/design/cognitive-core-ui/SKILL.md +55 -9
  212. package/template/.aioson/skills/design/cognitive-core-ui/references/art-direction.md +339 -0
  213. package/template/.aioson/skills/design/cognitive-core-ui/references/components.md +1 -1
  214. package/template/.aioson/skills/design/cognitive-core-ui/references/dashboards.md +100 -0
  215. package/template/.aioson/skills/design/cognitive-core-ui/references/design-tokens.md +43 -9
  216. package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +40 -0
  217. package/template/.aioson/skills/design/cognitive-core-ui/references/patterns.md +1 -1
  218. package/template/.aioson/skills/design/cognitive-core-ui/references/websites.md +99 -12
  219. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  220. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  221. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  222. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  223. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  224. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  225. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  226. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  227. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  228. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  229. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  230. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  231. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  232. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  233. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  234. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  235. package/template/.aioson/skills/design/warm-craft-ui/SKILL.md +209 -0
  236. package/template/.aioson/skills/design/warm-craft-ui/references/art-direction.md +324 -0
  237. package/template/.aioson/skills/design/warm-craft-ui/references/components.md +508 -0
  238. package/template/.aioson/skills/design/warm-craft-ui/references/dashboards.md +223 -0
  239. package/template/.aioson/skills/design/warm-craft-ui/references/design-tokens.md +374 -0
  240. package/template/.aioson/skills/design/warm-craft-ui/references/motion.md +356 -0
  241. package/template/.aioson/skills/design/warm-craft-ui/references/patterns.md +288 -0
  242. package/template/.aioson/skills/design/warm-craft-ui/references/websites.md +289 -0
  243. package/template/.aioson/skills/premium-visual-design/SKILL.md +83 -0
  244. package/template/.aioson/skills/premium-visual-design/components/agent-badge.md +92 -0
  245. package/template/.aioson/skills/premium-visual-design/components/dependency-node.md +102 -0
  246. package/template/.aioson/skills/premium-visual-design/components/mention-autocomplete.md +136 -0
  247. package/template/.aioson/skills/premium-visual-design/components/notification-center.md +136 -0
  248. package/template/.aioson/skills/premium-visual-design/components/review-action-bar.md +188 -0
  249. package/template/.aioson/skills/premium-visual-design/components/team-switcher.md +131 -0
  250. package/template/.aioson/skills/premium-visual-design/patterns/agent-message-thread.md +198 -0
  251. package/template/.aioson/skills/premium-visual-design/patterns/notification-panel.md +275 -0
  252. package/template/.aioson/skills/premium-visual-design/patterns/review-workflow-ui.md +234 -0
  253. package/template/.aioson/skills/premium-visual-design/patterns/task-dependency-graph.md +147 -0
  254. package/template/.aioson/skills/premium-visual-design/tokens/status-extended.md +142 -0
  255. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  256. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  257. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  258. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  259. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  260. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  261. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  262. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  263. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  264. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  265. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  266. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  267. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  268. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  269. package/template/.aioson/skills/squad/formats/catalog.json +15 -0
  270. package/template/.aioson/skills/squad/formats/content/blog-post.md +47 -0
  271. package/template/.aioson/skills/squad/formats/content/newsletter.md +47 -0
  272. package/template/.aioson/skills/squad/formats/creative/podcast-script.md +43 -0
  273. package/template/.aioson/skills/squad/formats/creative/video-script.md +41 -0
  274. package/template/.aioson/skills/squad/formats/social/instagram-feed.md +42 -0
  275. package/template/.aioson/skills/squad/formats/social/linkedin-post.md +42 -0
  276. package/template/.aioson/skills/squad/formats/social/tiktok.md +39 -0
  277. package/template/.aioson/skills/squad/formats/social/twitter-thread.md +39 -0
  278. package/template/.aioson/skills/squad/formats/social/youtube-long.md +47 -0
  279. package/template/.aioson/skills/squad/formats/social/youtube-shorts.md +39 -0
  280. package/template/.aioson/skills/squad/patterns/multi-platform-pattern.md +108 -0
  281. package/template/.aioson/skills/squad/patterns/persona-based-pattern.md +98 -0
  282. package/template/.aioson/skills/squad/patterns/pipeline-pattern.md +106 -0
  283. package/template/.aioson/skills/squad/patterns/review-loop-pattern.md +81 -0
  284. package/template/.aioson/skills/squad/references/checklist-templates.md +122 -0
  285. package/template/.aioson/skills/squad/references/executor-archetypes.md +123 -0
  286. package/template/.aioson/skills/squad/references/workflow-templates.md +169 -0
  287. package/template/.aioson/skills/static/debugging-protocol.md +42 -0
  288. package/template/.aioson/skills/static/git-worktrees.md +36 -0
  289. package/template/.aioson/tasks/implementation-plan.md +19 -0
  290. package/template/.aioson/tasks/squad-design.md +28 -0
  291. package/template/.aioson/tasks/squad-profile.md +48 -0
  292. package/template/.aioson/tasks/squad-review.md +61 -0
  293. package/template/.aioson/tasks/squad-task-decompose.md +66 -0
  294. package/template/.claude/commands/aioson/agent/neo.md +5 -0
  295. package/template/.claude/commands/aioson/agent/tester.md +5 -0
  296. package/template/.gemini/GEMINI.md +1 -0
  297. package/template/.gemini/commands/aios-neo.toml +4 -0
  298. package/template/.gemini/commands/aios-tester.toml +6 -0
  299. package/template/AGENTS.md +26 -1
  300. package/template/CLAUDE.md +6 -2
  301. package/template/OPENCODE.md +2 -0
package/docs/design-previews/interface-design.html ADDED
@@ -0,0 +1,513 @@
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.0" />
6
+ <title>Interface Design — AIOSON Design Skill</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg: #F5F5F5;
15
+ --surface: #FFFFFF;
16
+ --border: #E2E2E2;
17
+ --border-focus: #6366F1;
18
+ --heading: #0F172A;
19
+ --body: #334155;
20
+ --secondary: #475569;
21
+ --muted: #94A3B8;
22
+ --accent: #6366F1;
23
+ --accent-light: #EEF2FF;
24
+ --accent-text: #4338CA;
25
+ --danger: #EF4444;
26
+ --danger-light: #FEF2F2;
27
+ --success: #10B981;
28
+ --success-light: #ECFDF5;
29
+ --sidebar: 240px;
30
+ --topbar: 60px;
31
+ --shadow-card: 0 2px 6px rgba(0,0,0,0.05);
32
+ }
33
+
34
+ html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--body); font-size: 14px; line-height: 1.6; }
35
+
36
+ /* AIOSON badge */
37
+ .aioson-badge {
38
+ position: fixed; top: 12px; right: 12px; z-index: 9999;
39
+ background: var(--accent); color: #fff;
40
+ font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
41
+ letter-spacing: 0.05em; padding: 4px 10px; border-radius: 9999px;
42
+ box-shadow: 0 2px 8px rgba(99,102,241,0.3);
43
+ pointer-events: none;
44
+ }
45
+
46
+ /* Shell */
47
+ .shell { display: flex; height: 100vh; overflow: hidden; }
48
+
49
+ /* Sidebar */
50
+ .sidebar {
51
+ width: var(--sidebar); flex-shrink: 0;
52
+ background: var(--surface); border-right: 1px solid var(--border);
53
+ display: flex; flex-direction: column;
54
+ padding-top: var(--topbar);
55
+ }
56
+
57
+ /* Logo area (absolute to overlap topbar border) */
58
+ .sidebar-top {
59
+ position: absolute; top: 0; left: 0; width: var(--sidebar);
60
+ height: var(--topbar);
61
+ background: var(--surface); border-right: 1px solid var(--border);
62
+ border-bottom: 1px solid var(--border);
63
+ display: flex; align-items: center; padding: 0 20px; gap: 10px;
64
+ }
65
+ .logo-block {
66
+ width: 30px; height: 30px; border-radius: 8px;
67
+ background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
68
+ }
69
+ .logo-block svg { width: 15px; height: 15px; }
70
+ .logo-name { font-size: 15px; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; }
71
+
72
+ /* Sidebar nav */
73
+ .sidebar-nav { padding: 16px 0; flex: 1; overflow-y: auto; }
74
+ .nav-group { margin-bottom: 24px; }
75
+ .nav-group-label {
76
+ padding: 0 20px; margin-bottom: 6px;
77
+ font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
78
+ color: var(--muted); text-transform: uppercase;
79
+ }
80
+ .nav-item {
81
+ display: flex; align-items: center; gap: 10px;
82
+ padding: 0 20px; height: 38px; cursor: pointer;
83
+ font-size: 13.5px; font-weight: 500; color: var(--secondary);
84
+ border-radius: 0; position: relative;
85
+ transition: background 0.12s, color 0.12s;
86
+ }
87
+ .nav-item:hover { background: var(--bg); color: var(--heading); }
88
+ .nav-item.active {
89
+ color: var(--accent); background: var(--accent-light);
90
+ font-weight: 600;
91
+ }
92
+ .nav-item.active::before {
93
+ content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
94
+ width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
95
+ }
96
+ .nav-icon {
97
+ width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
98
+ }
99
+ .nav-icon-box { width: 14px; height: 14px; border-radius: 3px; background: currentColor; opacity: 0.3; }
100
+ .nav-item.active .nav-icon-box { opacity: 0.65; }
101
+ .sidebar-footer {
102
+ padding: 12px 16px; border-top: 1px solid var(--border);
103
+ }
104
+ .user-block {
105
+ display: flex; align-items: center; gap: 10px;
106
+ padding: 10px; border-radius: 8px; cursor: pointer;
107
+ }
108
+ .user-block:hover { background: var(--bg); }
109
+ .user-av {
110
+ width: 32px; height: 32px; border-radius: 9999px;
111
+ background: var(--accent-light); border: 2px solid var(--border);
112
+ display: flex; align-items: center; justify-content: center;
113
+ font-size: 12px; font-weight: 700; color: var(--accent); flex-shrink: 0;
114
+ }
115
+ .user-name { font-size: 13px; font-weight: 600; color: var(--heading); }
116
+ .user-email { font-size: 11.5px; color: var(--muted); }
117
+
118
+ /* Main */
119
+ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
120
+
121
+ /* Topbar */
122
+ .topbar {
123
+ height: var(--topbar); flex-shrink: 0;
124
+ background: var(--surface); border-bottom: 1px solid var(--border);
125
+ display: flex; align-items: center; justify-content: space-between;
126
+ padding: 0 32px;
127
+ }
128
+ .page-title { font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; }
129
+ .page-title-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 1px; }
130
+ .topbar-right { display: flex; align-items: center; gap: 10px; }
131
+ .btn {
132
+ display: inline-flex; align-items: center; gap: 7px;
133
+ height: 36px; padding: 0 16px; border-radius: 8px; border: none;
134
+ font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
135
+ cursor: pointer; transition: opacity 0.12s, background 0.12s;
136
+ }
137
+ .btn-primary { background: var(--accent); color: #fff; }
138
+ .btn-primary:hover { opacity: 0.9; }
139
+ .btn-ghost { background: none; color: var(--secondary); border: 1px solid var(--border); }
140
+ .btn-ghost:hover { background: var(--bg); }
141
+ .btn-danger { background: none; color: var(--danger); border: 1px solid #FCA5A5; }
142
+ .btn-danger:hover { background: var(--danger-light); }
143
+
144
+ /* Page content */
145
+ .page { flex: 1; overflow-y: auto; }
146
+
147
+ /* Settings layout */
148
+ .settings-layout { display: flex; min-height: 100%; }
149
+ .settings-nav { width: 200px; flex-shrink: 0; padding: 28px 0; border-right: 1px solid var(--border); }
150
+ .settings-nav-item {
151
+ display: flex; align-items: center; gap: 8px;
152
+ padding: 0 20px; height: 36px; cursor: pointer;
153
+ font-size: 13px; font-weight: 500; color: var(--secondary);
154
+ border-radius: 0; border-left: 2px solid transparent;
155
+ transition: background 0.1s, color 0.1s;
156
+ }
157
+ .settings-nav-item:hover { background: var(--bg); color: var(--heading); }
158
+ .settings-nav-item.active {
159
+ border-left-color: var(--accent);
160
+ background: var(--accent-light); color: var(--accent-text);
161
+ }
162
+ .settings-nav-label {
163
+ padding: 0 20px; margin-top: 20px; margin-bottom: 6px;
164
+ font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
165
+ color: var(--muted); text-transform: uppercase;
166
+ }
167
+ .settings-nav-label:first-child { margin-top: 0; }
168
+
169
+ /* Settings content */
170
+ .settings-content { flex: 1; padding: 32px 40px; max-width: 680px; }
171
+
172
+ /* Form sections */
173
+ .form-section {
174
+ background: var(--surface); border: 1px solid var(--border);
175
+ border-radius: 10px; box-shadow: var(--shadow-card); margin-bottom: 24px;
176
+ overflow: hidden;
177
+ }
178
+ .form-section-header {
179
+ padding: 20px 24px 16px;
180
+ border-bottom: 1px solid var(--border);
181
+ }
182
+ .form-section-title { font-size: 15px; font-weight: 600; color: var(--heading); letter-spacing: -0.01em; }
183
+ .form-section-desc { font-size: 13px; color: var(--muted); margin-top: 3px; }
184
+ .form-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
185
+ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
186
+ .form-field { display: flex; flex-direction: column; gap: 6px; }
187
+ .form-field.full { grid-column: 1 / -1; }
188
+ .field-label { font-size: 13px; font-weight: 600; color: var(--heading); }
189
+ .field-hint { font-size: 11.5px; color: var(--muted); }
190
+ .field-input {
191
+ height: 38px; padding: 0 12px;
192
+ border: 1px solid var(--border); border-radius: 8px;
193
+ background: var(--surface);
194
+ font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--body);
195
+ outline: none; transition: border-color 0.15s, box-shadow 0.15s;
196
+ width: 100%;
197
+ }
198
+ .field-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
199
+ .field-input::placeholder { color: var(--muted); }
200
+ .field-input.danger { border-color: var(--danger); }
201
+ .field-textarea {
202
+ padding: 10px 12px; height: 80px; resize: none;
203
+ border: 1px solid var(--border); border-radius: 8px;
204
+ background: var(--surface);
205
+ font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--body);
206
+ outline: none; transition: border-color 0.15s, box-shadow 0.15s;
207
+ width: 100%; line-height: 1.5;
208
+ }
209
+ .field-textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
210
+ .field-select {
211
+ height: 38px; padding: 0 12px;
212
+ border: 1px solid var(--border); border-radius: 8px;
213
+ background: var(--surface);
214
+ font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--body);
215
+ outline: none; cursor: pointer; appearance: none; width: 100%;
216
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
217
+ background-repeat: no-repeat; background-position: right 12px center;
218
+ }
219
+ .form-footer { padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; justify-content: space-between; }
220
+ .save-row { display: flex; align-items: center; gap: 10px; }
221
+ .save-hint { font-size: 12px; color: var(--muted); }
222
+
223
+ /* Toggle */
224
+ .toggle-row {
225
+ display: flex; align-items: center; justify-content: space-between;
226
+ padding: 14px 24px; border-bottom: 1px solid var(--border);
227
+ }
228
+ .toggle-row:last-child { border-bottom: none; }
229
+ .toggle-info { flex: 1; }
230
+ .toggle-title { font-size: 13.5px; font-weight: 600; color: var(--heading); }
231
+ .toggle-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
232
+ .toggle {
233
+ width: 40px; height: 22px; border-radius: 9999px;
234
+ border: none; cursor: pointer; flex-shrink: 0; position: relative;
235
+ transition: background 0.2s;
236
+ }
237
+ .toggle.on { background: var(--accent); }
238
+ .toggle.off { background: var(--border); }
239
+ .toggle::after {
240
+ content: ''; position: absolute; top: 3px;
241
+ width: 16px; height: 16px; border-radius: 9999px; background: #fff;
242
+ box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: left 0.2s;
243
+ }
244
+ .toggle.on::after { left: 21px; }
245
+ .toggle.off::after { left: 3px; }
246
+
247
+ /* Danger zone */
248
+ .danger-section {
249
+ border: 1px solid #FCA5A5; border-radius: 10px;
250
+ background: var(--surface); overflow: hidden; margin-bottom: 24px;
251
+ }
252
+ .danger-header { padding: 16px 24px; border-bottom: 1px solid #FCA5A5; background: var(--danger-light); }
253
+ .danger-header-title { font-size: 13.5px; font-weight: 700; color: var(--danger); }
254
+ .danger-header-desc { font-size: 12.5px; color: #B91C1C; margin-top: 2px; }
255
+ .danger-row {
256
+ display: flex; align-items: center; justify-content: space-between;
257
+ padding: 14px 24px; border-bottom: 1px solid #FEE2E2;
258
+ }
259
+ .danger-row:last-child { border-bottom: none; }
260
+ .danger-row-title { font-size: 13.5px; font-weight: 600; color: var(--heading); }
261
+ .danger-row-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
262
+ </style>
263
+ </head>
264
+ <body>
265
+
266
+ <div class="aioson-badge">AIOSON Design Skill</div>
267
+
268
+ <div class="shell">
269
+
270
+ <!-- Sidebar top (logo) -->
271
+ <div class="sidebar-top">
272
+ <div class="logo-block">
273
+ <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
274
+ <rect x="2" y="2" width="4.5" height="4.5" rx="1" fill="white"/>
275
+ <rect x="8.5" y="2" width="4.5" height="4.5" rx="1" fill="white" opacity="0.6"/>
276
+ <rect x="2" y="8.5" width="4.5" height="4.5" rx="1" fill="white" opacity="0.6"/>
277
+ <rect x="8.5" y="8.5" width="4.5" height="4.5" rx="1" fill="white"/>
278
+ </svg>
279
+ </div>
280
+ <span class="logo-name">Workspace</span>
281
+ </div>
282
+
283
+ <!-- Sidebar -->
284
+ <aside class="sidebar">
285
+ <nav class="sidebar-nav">
286
+ <div class="nav-group">
287
+ <div class="nav-group-label">Main</div>
288
+ <div class="nav-item">
289
+ <div class="nav-icon"><div class="nav-icon-box"></div></div>
290
+ Dashboard
291
+ </div>
292
+ <div class="nav-item">
293
+ <div class="nav-icon"><div class="nav-icon-box"></div></div>
294
+ Projects
295
+ </div>
296
+ <div class="nav-item">
297
+ <div class="nav-icon"><div class="nav-icon-box"></div></div>
298
+ Team
299
+ </div>
300
+ </div>
301
+ <div class="nav-group">
302
+ <div class="nav-group-label">Account</div>
303
+ <div class="nav-item active">
304
+ <div class="nav-icon"><div class="nav-icon-box"></div></div>
305
+ Settings
306
+ </div>
307
+ <div class="nav-item">
308
+ <div class="nav-icon"><div class="nav-icon-box"></div></div>
309
+ Billing
310
+ </div>
311
+ <div class="nav-item">
312
+ <div class="nav-icon"><div class="nav-icon-box"></div></div>
313
+ Integrations
314
+ </div>
315
+ </div>
316
+ </nav>
317
+ <div class="sidebar-footer">
318
+ <div class="user-block">
319
+ <div class="user-av">JD</div>
320
+ <div>
321
+ <div class="user-name">Jordan Davies</div>
322
+ <div class="user-email">jordan@workspace.io</div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </aside>
327
+
328
+ <!-- Main -->
329
+ <div class="main">
330
+
331
+ <!-- Topbar -->
332
+ <header class="topbar">
333
+ <div>
334
+ <div class="page-title">Settings</div>
335
+ <div class="page-title-sub">Interface Design — AIOSON Design Skill Preview</div>
336
+ </div>
337
+ <div class="topbar-right">
338
+ <button class="btn btn-ghost">Discard</button>
339
+ <button class="btn btn-primary">Save Changes</button>
340
+ </div>
341
+ </header>
342
+
343
+ <!-- Page -->
344
+ <div class="page">
345
+ <div class="settings-layout">
346
+
347
+ <!-- Settings nav -->
348
+ <div class="settings-nav">
349
+ <div class="settings-nav-label">General</div>
350
+ <div class="settings-nav-item active">Profile</div>
351
+ <div class="settings-nav-item">Workspace</div>
352
+ <div class="settings-nav-item">Appearance</div>
353
+ <div class="settings-nav-label">Access</div>
354
+ <div class="settings-nav-item">Security</div>
355
+ <div class="settings-nav-item">Notifications</div>
356
+ <div class="settings-nav-item">API Keys</div>
357
+ <div class="settings-nav-label">Billing</div>
358
+ <div class="settings-nav-item">Plan</div>
359
+ <div class="settings-nav-item">Invoices</div>
360
+ </div>
361
+
362
+ <!-- Settings content -->
363
+ <div class="settings-content">
364
+
365
+ <!-- Profile section -->
366
+ <div class="form-section">
367
+ <div class="form-section-header">
368
+ <div class="form-section-title">Profile Information</div>
369
+ <div class="form-section-desc">Update your personal details and public profile.</div>
370
+ </div>
371
+ <div class="form-body">
372
+ <div class="form-row">
373
+ <div class="form-field">
374
+ <label class="field-label">First Name</label>
375
+ <input class="field-input" type="text" value="Jordan" />
376
+ </div>
377
+ <div class="form-field">
378
+ <label class="field-label">Last Name</label>
379
+ <input class="field-input" type="text" value="Davies" />
380
+ </div>
381
+ </div>
382
+ <div class="form-field full">
383
+ <label class="field-label">Email Address</label>
384
+ <input class="field-input" type="email" value="jordan@workspace.io" />
385
+ <span class="field-hint">Used for login and notifications. Changes require email verification.</span>
386
+ </div>
387
+ <div class="form-field full">
388
+ <label class="field-label">Bio</label>
389
+ <textarea class="field-textarea" placeholder="A short description about yourself...">Product designer and engineer. Building tools that make teams move faster.</textarea>
390
+ </div>
391
+ </div>
392
+ <div class="form-footer">
393
+ <span class="save-hint">Last saved 2 hours ago</span>
394
+ <div class="save-row">
395
+ <button class="btn btn-ghost" style="height:32px;font-size:13px;">Cancel</button>
396
+ <button class="btn btn-primary" style="height:32px;font-size:13px;">Save Profile</button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Workspace section -->
402
+ <div class="form-section">
403
+ <div class="form-section-header">
404
+ <div class="form-section-title">Workspace</div>
405
+ <div class="form-section-desc">Manage your workspace name, timezone, and language settings.</div>
406
+ </div>
407
+ <div class="form-body">
408
+ <div class="form-row">
409
+ <div class="form-field">
410
+ <label class="field-label">Workspace Name</label>
411
+ <input class="field-input" type="text" value="Acme Corp" />
412
+ </div>
413
+ <div class="form-field">
414
+ <label class="field-label">Workspace URL</label>
415
+ <input class="field-input" type="text" value="acme-corp" />
416
+ <span class="field-hint">workspace.io/acme-corp</span>
417
+ </div>
418
+ </div>
419
+ <div class="form-row">
420
+ <div class="form-field">
421
+ <label class="field-label">Timezone</label>
422
+ <select class="field-select">
423
+ <option selected>UTC+00:00 — London</option>
424
+ <option>UTC-05:00 — New York</option>
425
+ <option>UTC-08:00 — Los Angeles</option>
426
+ <option>UTC+01:00 — Berlin</option>
427
+ </select>
428
+ </div>
429
+ <div class="form-field">
430
+ <label class="field-label">Language</label>
431
+ <select class="field-select">
432
+ <option selected>English (US)</option>
433
+ <option>English (UK)</option>
434
+ <option>Português (BR)</option>
435
+ <option>Español</option>
436
+ </select>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div class="form-footer">
441
+ <span class="save-hint">Affects all members in this workspace</span>
442
+ <div class="save-row">
443
+ <button class="btn btn-primary" style="height:32px;font-size:13px;">Save Workspace</button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Notifications section -->
449
+ <div class="form-section">
450
+ <div class="form-section-header">
451
+ <div class="form-section-title">Notifications</div>
452
+ <div class="form-section-desc">Choose what you want to be notified about.</div>
453
+ </div>
454
+ <div class="toggle-row">
455
+ <div class="toggle-info">
456
+ <div class="toggle-title">Email Digest</div>
457
+ <div class="toggle-desc">Receive a weekly summary of workspace activity.</div>
458
+ </div>
459
+ <button class="toggle on"></button>
460
+ </div>
461
+ <div class="toggle-row">
462
+ <div class="toggle-info">
463
+ <div class="toggle-title">Task Assignments</div>
464
+ <div class="toggle-desc">Get notified when a task is assigned to you.</div>
465
+ </div>
466
+ <button class="toggle on"></button>
467
+ </div>
468
+ <div class="toggle-row">
469
+ <div class="toggle-info">
470
+ <div class="toggle-title">Project Updates</div>
471
+ <div class="toggle-desc">Notify when project status or milestones change.</div>
472
+ </div>
473
+ <button class="toggle off"></button>
474
+ </div>
475
+ <div class="toggle-row">
476
+ <div class="toggle-info">
477
+ <div class="toggle-title">Marketing & Announcements</div>
478
+ <div class="toggle-desc">Product news, feature releases, and tips.</div>
479
+ </div>
480
+ <button class="toggle off"></button>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Danger zone -->
485
+ <div class="danger-section">
486
+ <div class="danger-header">
487
+ <div class="danger-header-title">Danger Zone</div>
488
+ <div class="danger-header-desc">These actions are irreversible. Please proceed with care.</div>
489
+ </div>
490
+ <div class="danger-row">
491
+ <div>
492
+ <div class="danger-row-title">Transfer Workspace</div>
493
+ <div class="danger-row-desc">Transfer ownership to another member of this workspace.</div>
494
+ </div>
495
+ <button class="btn btn-danger" style="height:32px;font-size:12.5px;white-space:nowrap;flex-shrink:0;margin-left:24px;">Transfer</button>
496
+ </div>
497
+ <div class="danger-row">
498
+ <div>
499
+ <div class="danger-row-title">Delete Workspace</div>
500
+ <div class="danger-row-desc">Permanently delete this workspace and all its data. No recovery.</div>
501
+ </div>
502
+ <button class="btn btn-danger" style="height:32px;font-size:12.5px;white-space:nowrap;flex-shrink:0;margin-left:24px;">Delete</button>
503
+ </div>
504
+ </div>
505
+
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ </body>
513
+ </html>