@terreno/mcp 57.19.2 → 57.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/CHANGELOG.md +393 -0
  2. package/README.md +32 -269
  3. package/dist/bootstrap.d.ts +12 -0
  4. package/dist/bootstrap.d.ts.map +1 -1
  5. package/dist/bootstrap.js +77 -122
  6. package/dist/bootstrap.js.map +1 -1
  7. package/dist/docs/guidelines/ui/guidelines/core.md +1 -1
  8. package/dist/docs/resources/overview.md +4 -2
  9. package/dist/docs/resources/patterns.md +237 -176
  10. package/dist/docs/resources/ui.md +48 -17
  11. package/dist/docs/templates/bootstrap/frontend/app/(tabs)/profile.template.tsx +0 -26
  12. package/dist/docs/templates/bootstrap/frontend/app/_layout.template.tsx +3 -2
  13. package/dist/docs/templates/bootstrap/frontend/app/login.template.tsx +1 -1
  14. package/dist/docs/upgrades/57.20.0.md +238 -0
  15. package/dist/docs/versioned/next/approval-rubric.md +30 -12
  16. package/dist/docs/versioned/next/explanation/README.md +5 -0
  17. package/dist/docs/versioned/next/explanation/account-linking.md +169 -0
  18. package/dist/docs/versioned/next/explanation/admin-interface.md +1 -1
  19. package/dist/docs/versioned/next/explanation/agent-guidelines.md +173 -0
  20. package/dist/docs/versioned/next/explanation/ai-development-loop.md +196 -0
  21. package/dist/docs/versioned/next/explanation/authentication.md +45 -1
  22. package/dist/docs/versioned/next/explanation/consent-forms.md +105 -0
  23. package/dist/docs/versioned/next/explanation/example-coverage.md +1 -0
  24. package/dist/docs/versioned/next/explanation/local-first-data.md +1 -1
  25. package/dist/docs/versioned/next/explanation/organizations.md +37 -0
  26. package/dist/docs/versioned/next/explanation/planning-plugins.md +4 -0
  27. package/dist/docs/versioned/next/explanation/responsive-design.md +143 -0
  28. package/dist/docs/versioned/next/explanation/roadmap-seed-issues.md +11 -0
  29. package/dist/docs/versioned/next/explanation/schema-metadata.md +5 -0
  30. package/dist/docs/versioned/next/how-to/README.md +7 -2
  31. package/dist/docs/versioned/next/how-to/audit-log.md +22 -3
  32. package/dist/docs/versioned/next/how-to/automate-terreno-upgrades.md +169 -0
  33. package/dist/docs/versioned/next/how-to/build-list-detail-screens.md +160 -0
  34. package/dist/docs/versioned/next/how-to/circleci.md +15 -5
  35. package/dist/docs/versioned/next/how-to/configure-better-auth.md +673 -53
  36. package/dist/docs/versioned/next/how-to/create-a-terreno-app.md +8 -5
  37. package/dist/docs/versioned/next/how-to/debug-with-mcp.md +393 -23
  38. package/dist/docs/versioned/next/how-to/enable-mcp-oauth.md +54 -3
  39. package/dist/docs/versioned/next/how-to/migrate-rtk-to-syncdb.md +9 -0
  40. package/dist/docs/versioned/next/how-to/password-reset.md +1 -1
  41. package/dist/docs/versioned/next/how-to/recover-locked-out-user.md +112 -0
  42. package/dist/docs/versioned/next/how-to/run-tests-locally.md +37 -8
  43. package/dist/docs/versioned/next/how-to/set-up-social-login.md +424 -0
  44. package/dist/docs/versioned/next/how-to/set-up-terreno-mcp.md +241 -36
  45. package/dist/docs/versioned/next/how-to/sign-consent-on-behalf.md +139 -0
  46. package/dist/docs/versioned/next/how-to/upgrade-terreno.md +4 -0
  47. package/dist/docs/versioned/next/implementationPlans/ai-dev-loop-boost.md +47 -32
  48. package/dist/docs/versioned/next/implementationPlans/auth-experience.md +952 -0
  49. package/dist/docs/versioned/next/implementationPlans/consent-forms.md +8 -0
  50. package/dist/docs/versioned/next/implementationPlans/list-detail-layout.md +297 -0
  51. package/dist/docs/versioned/next/implementationPlans/login-redesign/HANDOFF.md +211 -0
  52. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/AnotherWay.html +121 -0
  53. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/BackupCode.html +72 -0
  54. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/Cancelled.html +87 -0
  55. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/ContinueEmail.html +64 -0
  56. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/FirstVisit.html +81 -0
  57. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/Main.html +88 -0
  58. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/ManageAccounts.html +77 -0
  59. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/NotLinked.html +92 -0
  60. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/SigningIn.html +60 -0
  61. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/TwoFactor.html +76 -0
  62. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/TwoFactorError.html +81 -0
  63. package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/WrongPassword.html +69 -0
  64. package/dist/docs/versioned/next/implementationPlans/mcp-boost-parity.md +1 -1
  65. package/dist/docs/versioned/next/plans/2026-10-23-provisional-consent.md +297 -0
  66. package/dist/docs/versioned/next/plans/2026-10-29-fix-mcp-oauth-native-and-machine.md +68 -0
  67. package/dist/docs/versioned/next/reference/README.md +1 -0
  68. package/dist/docs/versioned/next/reference/account-security.md +700 -0
  69. package/dist/docs/versioned/next/reference/admin-backend.md +3 -1
  70. package/dist/docs/versioned/next/reference/admin-frontend.md +225 -1
  71. package/dist/docs/versioned/next/reference/api.md +461 -35
  72. package/dist/docs/versioned/next/reference/cli.md +1 -1
  73. package/dist/docs/versioned/next/reference/comms.md +8 -0
  74. package/dist/docs/versioned/next/reference/create-terreno-app.md +3 -1
  75. package/dist/docs/versioned/next/reference/environment-variables.md +9 -3
  76. package/dist/docs/versioned/next/reference/legacy/rtk.md +19 -3
  77. package/dist/docs/versioned/next/reference/lifecycle-plugin.md +6 -0
  78. package/dist/docs/versioned/next/reference/mcp-server.md +1158 -441
  79. package/dist/docs/versioned/next/reference/syncdb.md +8 -1
  80. package/dist/docs/versioned/next/reference/ui.md +1271 -27
  81. package/dist/docs/versioned/next/tasks/ai-dev-loop-boost.md +28 -16
  82. package/dist/docs/versioned/next/tutorials/README.md +4 -0
  83. package/dist/httpApp.d.ts +14 -0
  84. package/dist/httpApp.d.ts.map +1 -0
  85. package/dist/httpApp.js +99 -0
  86. package/dist/httpApp.js.map +1 -0
  87. package/dist/index.js +8 -90
  88. package/dist/index.js.map +1 -1
  89. package/dist/local/localTools.d.ts.map +1 -1
  90. package/dist/local/localTools.js +44 -14
  91. package/dist/local/localTools.js.map +1 -1
  92. package/dist/local/metro/metroDevSession.d.ts +18 -0
  93. package/dist/local/metro/metroDevSession.d.ts.map +1 -1
  94. package/dist/local/metro/metroDevSession.js +42 -3
  95. package/dist/local/metro/metroDevSession.js.map +1 -1
  96. package/dist/local/tools/databaseQuery.d.ts.map +1 -1
  97. package/dist/local/tools/databaseQuery.js +3 -13
  98. package/dist/local/tools/databaseQuery.js.map +1 -1
  99. package/dist/local/tools/databaseSchema.d.ts.map +1 -1
  100. package/dist/local/tools/databaseSchema.js +3 -13
  101. package/dist/local/tools/databaseSchema.js.map +1 -1
  102. package/dist/local/tools/localMongo.d.ts +10 -0
  103. package/dist/local/tools/localMongo.d.ts.map +1 -0
  104. package/dist/local/tools/localMongo.js +30 -0
  105. package/dist/local/tools/localMongo.js.map +1 -0
  106. package/dist/local/tools/runtime.d.ts +18 -2
  107. package/dist/local/tools/runtime.d.ts.map +1 -1
  108. package/dist/local/tools/runtime.js +75 -20
  109. package/dist/local/tools/runtime.js.map +1 -1
  110. package/dist/local/tools/syncDb.d.ts +11 -0
  111. package/dist/local/tools/syncDb.d.ts.map +1 -1
  112. package/dist/local/tools/syncDb.js +15 -3
  113. package/dist/local/tools/syncDb.js.map +1 -1
  114. package/dist/rateLimit.d.ts +35 -0
  115. package/dist/rateLimit.d.ts.map +1 -0
  116. package/dist/rateLimit.js +112 -0
  117. package/dist/rateLimit.js.map +1 -0
  118. package/dist/tools.d.ts.map +1 -1
  119. package/dist/tools.js +42 -60
  120. package/dist/tools.js.map +1 -1
  121. package/package.json +4 -3
  122. package/src/docs/guidelines/ui/guidelines/core.md +1 -1
  123. package/src/docs/resources/overview.md +4 -2
  124. package/src/docs/resources/patterns.md +237 -176
  125. package/src/docs/resources/ui.md +48 -17
  126. package/src/docs/templates/bootstrap/frontend/app/(tabs)/profile.template.tsx +0 -26
  127. package/src/docs/templates/bootstrap/frontend/app/_layout.template.tsx +3 -2
  128. package/src/docs/templates/bootstrap/frontend/app/login.template.tsx +1 -1
  129. package/src/docs/upgrades/57.20.0.md +238 -0
  130. package/src/docs/versioned/next/approval-rubric.md +30 -12
  131. package/src/docs/versioned/next/explanation/README.md +5 -0
  132. package/src/docs/versioned/next/explanation/account-linking.md +169 -0
  133. package/src/docs/versioned/next/explanation/admin-interface.md +1 -1
  134. package/src/docs/versioned/next/explanation/agent-guidelines.md +173 -0
  135. package/src/docs/versioned/next/explanation/ai-development-loop.md +196 -0
  136. package/src/docs/versioned/next/explanation/authentication.md +45 -1
  137. package/src/docs/versioned/next/explanation/consent-forms.md +105 -0
  138. package/src/docs/versioned/next/explanation/example-coverage.md +1 -0
  139. package/src/docs/versioned/next/explanation/local-first-data.md +1 -1
  140. package/src/docs/versioned/next/explanation/organizations.md +37 -0
  141. package/src/docs/versioned/next/explanation/planning-plugins.md +4 -0
  142. package/src/docs/versioned/next/explanation/responsive-design.md +143 -0
  143. package/src/docs/versioned/next/explanation/roadmap-seed-issues.md +11 -0
  144. package/src/docs/versioned/next/explanation/schema-metadata.md +5 -0
  145. package/src/docs/versioned/next/how-to/README.md +7 -2
  146. package/src/docs/versioned/next/how-to/audit-log.md +22 -3
  147. package/src/docs/versioned/next/how-to/automate-terreno-upgrades.md +169 -0
  148. package/src/docs/versioned/next/how-to/build-list-detail-screens.md +160 -0
  149. package/src/docs/versioned/next/how-to/circleci.md +15 -5
  150. package/src/docs/versioned/next/how-to/configure-better-auth.md +673 -53
  151. package/src/docs/versioned/next/how-to/create-a-terreno-app.md +8 -5
  152. package/src/docs/versioned/next/how-to/debug-with-mcp.md +393 -23
  153. package/src/docs/versioned/next/how-to/enable-mcp-oauth.md +54 -3
  154. package/src/docs/versioned/next/how-to/migrate-rtk-to-syncdb.md +9 -0
  155. package/src/docs/versioned/next/how-to/password-reset.md +1 -1
  156. package/src/docs/versioned/next/how-to/recover-locked-out-user.md +112 -0
  157. package/src/docs/versioned/next/how-to/run-tests-locally.md +37 -8
  158. package/src/docs/versioned/next/how-to/set-up-social-login.md +424 -0
  159. package/src/docs/versioned/next/how-to/set-up-terreno-mcp.md +241 -36
  160. package/src/docs/versioned/next/how-to/sign-consent-on-behalf.md +139 -0
  161. package/src/docs/versioned/next/how-to/upgrade-terreno.md +4 -0
  162. package/src/docs/versioned/next/implementationPlans/ai-dev-loop-boost.md +47 -32
  163. package/src/docs/versioned/next/implementationPlans/auth-experience.md +952 -0
  164. package/src/docs/versioned/next/implementationPlans/consent-forms.md +8 -0
  165. package/src/docs/versioned/next/implementationPlans/list-detail-layout.md +297 -0
  166. package/src/docs/versioned/next/implementationPlans/login-redesign/HANDOFF.md +211 -0
  167. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/AnotherWay.html +121 -0
  168. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/BackupCode.html +72 -0
  169. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/Cancelled.html +87 -0
  170. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/ContinueEmail.html +64 -0
  171. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/FirstVisit.html +81 -0
  172. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/Main.html +88 -0
  173. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/ManageAccounts.html +77 -0
  174. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/NotLinked.html +92 -0
  175. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/SigningIn.html +60 -0
  176. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/TwoFactor.html +76 -0
  177. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/TwoFactorError.html +81 -0
  178. package/src/docs/versioned/next/implementationPlans/login-redesign/boards/WrongPassword.html +69 -0
  179. package/src/docs/versioned/next/implementationPlans/mcp-boost-parity.md +1 -1
  180. package/src/docs/versioned/next/plans/2026-10-23-provisional-consent.md +297 -0
  181. package/src/docs/versioned/next/plans/2026-10-29-fix-mcp-oauth-native-and-machine.md +68 -0
  182. package/src/docs/versioned/next/reference/README.md +1 -0
  183. package/src/docs/versioned/next/reference/account-security.md +700 -0
  184. package/src/docs/versioned/next/reference/admin-backend.md +3 -1
  185. package/src/docs/versioned/next/reference/admin-frontend.md +225 -1
  186. package/src/docs/versioned/next/reference/api.md +461 -35
  187. package/src/docs/versioned/next/reference/cli.md +1 -1
  188. package/src/docs/versioned/next/reference/comms.md +8 -0
  189. package/src/docs/versioned/next/reference/create-terreno-app.md +3 -1
  190. package/src/docs/versioned/next/reference/environment-variables.md +9 -3
  191. package/src/docs/versioned/next/reference/legacy/rtk.md +19 -3
  192. package/src/docs/versioned/next/reference/lifecycle-plugin.md +6 -0
  193. package/src/docs/versioned/next/reference/mcp-server.md +1158 -441
  194. package/src/docs/versioned/next/reference/syncdb.md +8 -1
  195. package/src/docs/versioned/next/reference/ui.md +1271 -27
  196. package/src/docs/versioned/next/tasks/ai-dev-loop-boost.md +28 -16
  197. package/src/docs/versioned/next/tutorials/README.md +4 -0
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/AnotherWay.html ADDED
@@ -0,0 +1,121 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Sign in: another way</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-alt:#f2f2f2;--surface-primary:#0e9dcd;--surface-sec-xl:#f2f9fa;--surface-sec-l:#b6cdd5;--surface-sec-xd:#092e3a;--surface-errorLight:#fdd7d7;--surface-warningLight:#ffe3c6;--text-primary:#1c1c1c;--text-secondary:#686868;--text-extraLight:#949494;--text-link:#0a7092;--text-error:#bd1111;--text-warning:#b14202;--text-sec-d:#092e3a;--border-default:#cdcdcd;--border-hover:#d9d9d9;--border-focus:#73cae8;--border-error:#d33232;--border-warning:#f36719;box-sizing:border-box;width:390px;min-height:100%;padding:56px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .logo{width:48px;height:48px;border-radius:16px;background:var(--surface-sec-xd);color:#fff;display:grid;place-items:center;font:700 12px/1 Nunito,sans-serif}
14
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
15
+ .sub{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--text-secondary)}
16
+ .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
17
+ .sec-title{margin:0;font:700 16px/24px "Titillium Web",sans-serif}
18
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
19
+ .list{border:1px solid var(--border-default);border-radius:16px;overflow:hidden}
20
+ .acct{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;box-sizing:border-box;background:var(--surface-base);border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
21
+ .acct+.acct{border-top:1px solid var(--border-hover)}
22
+ .avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 18px/1 "Titillium Web",sans-serif}
23
+ .acct-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
24
+ .acct-name{font-weight:700;font-size:16px;line-height:22px;display:flex;align-items:center;gap:8px}
25
+ .acct-meta{font-size:12px;line-height:16px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
26
+ .chev{flex:none;width:20px;height:20px;color:var(--text-secondary)}
27
+ .pill{flex:none;font:700 12px/16px Nunito,sans-serif;padding:2px 8px;border-radius:360px;background:var(--surface-sec-xl);color:var(--text-sec-d);border:1px solid var(--surface-sec-l)}
28
+ .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;box-sizing:border-box;padding:0 20px;border-radius:360px;border:1px solid var(--border-default);background:var(--surface-base);color:var(--text-primary);font:700 16px/1 Nunito,sans-serif;cursor:pointer;text-decoration:none}
29
+ .btn .ico{position:absolute;left:20px;width:18px;height:18px}
30
+ .btn-primary{background:var(--surface-primary);border-color:var(--surface-primary);color:#fff;font-size:19px}
31
+ .stack{display:flex;flex-direction:column;gap:12px}
32
+ .divider{display:flex;align-items:center;gap:12px;font-size:12px;line-height:16px;color:var(--text-secondary)}
33
+ .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border-default)}
34
+ .form{display:flex;flex-direction:column;gap:16px}
35
+ .field{display:flex;flex-direction:column;gap:6px}
36
+ .lbl-row{display:flex;justify-content:space-between;align-items:baseline}
37
+ .lbl{font:600 16px/24px Nunito,sans-serif}
38
+ .input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--border-default);border-radius:4px;background:var(--surface-base);font:16px Nunito,sans-serif;color:var(--text-primary)}
39
+ .input::placeholder{color:var(--text-extraLight)}
40
+ .foot{margin-top:auto;text-align:center;font-size:16px;line-height:24px;color:var(--text-secondary)}
41
+ </style>
42
+ <main class="screen">
43
+ <div class="logo" aria-label="Your app logo">LOGO</div>
44
+ <div>
45
+ <h1 class="h1">Welcome back</h1>
46
+ <p class="sub">Pick up where you left off.</p>
47
+ </div>
48
+
49
+ <section aria-labelledby="aw-acc">
50
+ <div class="sec-head">
51
+ <h2 id="aw-acc" class="sec-title">Continue as</h2>
52
+ <button class="link" type="button">Edit</button>
53
+ </div>
54
+ <div class="list">
55
+ <button class="acct" type="button">
56
+ <span class="avatar" style="background: #2b6072" aria-hidden="true">J</span>
57
+ <span class="acct-body">
58
+ <span class="acct-name">Josh Gachnang <span class="pill">Last used</span></span>
59
+ <span class="acct-meta">
60
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
61
+ Apple · j***@n***.io
62
+ </span>
63
+ </span>
64
+ <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg>
65
+ </button>
66
+ <button class="acct" type="button">
67
+ <span class="avatar" style="background: #b14202" aria-hidden="true">J</span>
68
+ <span class="acct-body">
69
+ <span class="acct-name">Josh Gachnang</span>
70
+ <span class="acct-meta">
71
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
72
+ Google · j***@g***.com
73
+ </span>
74
+ </span>
75
+ <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg>
76
+ </button>
77
+ </div>
78
+ </section>
79
+
80
+ <div class="divider">or sign in another way</div>
81
+
82
+ <div class="stack">
83
+ <button class="btn" type="button">
84
+ <svg class="ico" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
85
+ Continue with Apple
86
+ </button>
87
+ <button class="btn" type="button">
88
+ <svg class="ico" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
89
+ Continue with Google
90
+ </button>
91
+ <button class="btn" type="button">
92
+ <svg class="ico" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
93
+ Continue with GitHub
94
+ </button>
95
+ <button class="btn" type="button">
96
+ <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.5" cy="15.5" r="4.5"></circle><path d="M10.7 12.3 21 2M17 6l3 3M14.5 8.5l2.5 2.5"></path></svg>
97
+ Sign in with a passkey
98
+ </button>
99
+ </div>
100
+
101
+ <div class="divider">or use your email</div>
102
+
103
+ <form class="form">
104
+ <div class="field">
105
+ <label class="lbl" for="aw-email">Email</label>
106
+ <input class="input" id="aw-email" type="email" placeholder="you@example.com" autocomplete="username webauthn">
107
+ </div>
108
+ <div class="field">
109
+ <div class="lbl-row">
110
+ <label class="lbl" for="aw-pw">Password</label>
111
+ <a class="link" href="#" style="font-size: 14px">Forgot password?</a>
112
+ </div>
113
+ <input class="input" id="aw-pw" type="password" autocomplete="current-password">
114
+ </div>
115
+ <button class="btn btn-primary" type="submit">Sign in</button>
116
+ </form>
117
+
118
+ <p class="foot">New here? <a href="#">Create an account</a></p>
119
+ </main>
120
+ </body>
121
+ </html>
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/BackupCode.html ADDED
@@ -0,0 +1,72 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Two-factor: backup code</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-primary:#0e9dcd;--surface-sec-xl:#f2f9fa;--text-primary:#1c1c1c;--text-secondary:#686868;--text-extraLight:#949494;--text-link:#0a7092;--text-sec-d:#092e3a;--border-default:#cdcdcd;--border-focus:#73cae8;box-sizing:border-box;width:390px;min-height:100%;padding:24px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .back{display:inline-flex;align-items:center;gap:4px;height:44px;align-self:flex-start;margin-left:-8px;padding:0 8px;border:0;background:none;font:700 16px/1 Nunito,sans-serif;color:var(--text-link);cursor:pointer}
14
+ .back svg{width:20px;height:20px}
15
+ .badge{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--surface-sec-xl);color:var(--text-sec-d)}
16
+ .badge svg{width:28px;height:28px}
17
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
18
+ .sub{margin:8px 0 0;font-size:16px;line-height:24px;color:var(--text-secondary)}
19
+ .field{display:flex;flex-direction:column;gap:6px}
20
+ .lbl{font:600 16px/24px Nunito,sans-serif}
21
+ .input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--surface-primary);box-shadow:0 0 0 3px var(--border-focus);border-radius:4px;background:var(--surface-base);font:600 18px "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:2px;color:var(--text-primary)}
22
+ .input::placeholder{color:var(--text-extraLight);font-weight:400}
23
+ .help{margin:0;font-size:12px;line-height:16px;color:var(--text-secondary)}
24
+ .check{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:22px;cursor:pointer}
25
+ .check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#0e9dcd}
26
+ .check small{display:block;font-size:12px;line-height:16px;color:var(--text-secondary)}
27
+ .btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;box-sizing:border-box;border-radius:360px;border:1px solid var(--border-default);background:var(--surface-base);color:var(--text-primary);font:700 16px/1 Nunito,sans-serif;cursor:pointer}
28
+ .btn-primary{background:var(--surface-primary);border-color:var(--surface-primary);color:#fff;font-size:19px}
29
+ .alt{display:flex;flex-direction:column;align-items:center}
30
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:10px 0;cursor:pointer}
31
+ .foot{margin-top:auto;text-align:center}
32
+ </style>
33
+ <main class="screen">
34
+ <button class="back" type="button">
35
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"></path></svg>
36
+ Back
37
+ </button>
38
+
39
+ <div class="badge" aria-hidden="true">
40
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path><path d="M12 14.5v2.5"></path></svg>
41
+ </div>
42
+
43
+ <div>
44
+ <h1 class="h1">Use a backup code</h1>
45
+ <p class="sub">Enter one of the backup codes you saved when you turned on two-factor sign-in. Each code works once.</p>
46
+ </div>
47
+
48
+ <form style="display: flex; flex-direction: column; gap: 24px">
49
+ <div class="field">
50
+ <label class="lbl" for="bc-code">Backup code</label>
51
+ <input class="input" id="bc-code" type="text" placeholder="xxxxx-xxxxx" autocomplete="one-time-code" spellcheck="false">
52
+ <p class="help">Dashes and spaces are optional.</p>
53
+ </div>
54
+
55
+ <label class="check">
56
+ <input type="checkbox">
57
+ <span>Trust this device<small>We won't ask for a code here for 30 days.</small></span>
58
+ </label>
59
+
60
+ <button class="btn btn-primary" type="submit">Verify</button>
61
+ </form>
62
+
63
+ <div class="alt">
64
+ <button class="link" type="button">Use your authenticator app</button>
65
+ </div>
66
+
67
+ <div class="foot">
68
+ <button class="link" type="button" style="color: #686868">Sign in a different way</button>
69
+ </div>
70
+ </main>
71
+ </body>
72
+ </html>
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/Cancelled.html ADDED
@@ -0,0 +1,87 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Sign in: cancelled</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-alt:#f2f2f2;--surface-sec-xl:#f2f9fa;--surface-sec-l:#b6cdd5;--surface-sec-xd:#092e3a;--text-primary:#1c1c1c;--text-secondary:#686868;--text-link:#0a7092;--text-sec-d:#092e3a;--border-default:#cdcdcd;--border-hover:#d9d9d9;box-sizing:border-box;width:390px;min-height:100%;padding:56px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .logo{width:48px;height:48px;border-radius:16px;background:var(--surface-sec-xd);color:#fff;display:grid;place-items:center;font:700 12px/1 Nunito,sans-serif}
14
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
15
+ .sub{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--text-secondary)}
16
+ .banner{display:flex;gap:12px;align-items:flex-start;padding:12px 8px 12px 16px;border-radius:16px;background:var(--surface-sec-xl);border:1px solid var(--surface-sec-l);color:var(--text-sec-d);font-size:16px;line-height:22px}
17
+ .banner .ico{flex:none;width:20px;height:20px;margin-top:1px}
18
+ .banner p{flex:1;margin:0}
19
+ .x{flex:none;width:32px;height:32px;margin:-5px 0;display:grid;place-items:center;border:0;border-radius:360px;background:none;color:var(--text-sec-d);cursor:pointer}
20
+ .x svg{width:16px;height:16px}
21
+ .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
22
+ .sec-title{margin:0;font:700 16px/24px "Titillium Web",sans-serif}
23
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
24
+ .list{border:1px solid var(--border-default);border-radius:16px;overflow:hidden}
25
+ .acct{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;box-sizing:border-box;background:var(--surface-base);border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
26
+ .acct+.acct{border-top:1px solid var(--border-hover)}
27
+ .avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 18px/1 "Titillium Web",sans-serif}
28
+ .acct-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
29
+ .acct-name{font-weight:700;font-size:16px;line-height:22px;display:flex;align-items:center;gap:8px}
30
+ .acct-meta{font-size:12px;line-height:16px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
31
+ .chev{flex:none;width:20px;height:20px;color:var(--text-secondary)}
32
+ .pill{flex:none;font:700 12px/16px Nunito,sans-serif;padding:2px 8px;border-radius:360px;background:var(--surface-sec-xl);color:var(--text-sec-d);border:1px solid var(--surface-sec-l)}
33
+ .btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:48px;box-sizing:border-box;padding:0 20px;border-radius:360px;border:1px solid var(--surface-alt);background:var(--surface-alt);color:var(--text-primary);font:700 16px/1 Nunito,sans-serif;cursor:pointer}
34
+ .foot{margin-top:auto;text-align:center;font-size:16px;line-height:24px;color:var(--text-secondary)}
35
+ </style>
36
+ <main class="screen">
37
+ <div class="logo" aria-label="Your app logo">LOGO</div>
38
+ <div>
39
+ <h1 class="h1">Welcome back</h1>
40
+ <p class="sub">Pick up where you left off.</p>
41
+ </div>
42
+
43
+ <div class="banner" role="status">
44
+ <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v5M12 8h.01"></path></svg>
45
+ <p>Apple sign-in was cancelled. Tap an account to try again.</p>
46
+ <button class="x" type="button" aria-label="Dismiss">
47
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"></path></svg>
48
+ </button>
49
+ </div>
50
+
51
+ <section aria-labelledby="ca-acc">
52
+ <div class="sec-head">
53
+ <h2 id="ca-acc" class="sec-title">Continue as</h2>
54
+ <button class="link" type="button">Edit</button>
55
+ </div>
56
+ <div class="list">
57
+ <button class="acct" type="button">
58
+ <span class="avatar" style="background: #2b6072" aria-hidden="true">J</span>
59
+ <span class="acct-body">
60
+ <span class="acct-name">Josh Gachnang <span class="pill">Last used</span></span>
61
+ <span class="acct-meta">
62
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
63
+ Apple · j***@n***.io
64
+ </span>
65
+ </span>
66
+ <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg>
67
+ </button>
68
+ <button class="acct" type="button">
69
+ <span class="avatar" style="background: #b14202" aria-hidden="true">J</span>
70
+ <span class="acct-body">
71
+ <span class="acct-name">Josh Gachnang</span>
72
+ <span class="acct-meta">
73
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
74
+ Google · j***@g***.com
75
+ </span>
76
+ </span>
77
+ <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg>
78
+ </button>
79
+ </div>
80
+ </section>
81
+
82
+ <button class="btn" type="button">Sign in another way</button>
83
+
84
+ <p class="foot">New here? <a href="#">Create an account</a></p>
85
+ </main>
86
+ </body>
87
+ </html>
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/ContinueEmail.html ADDED
@@ -0,0 +1,64 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Sign in: continue with email</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-alt:#f2f2f2;--surface-primary:#0e9dcd;--surface-sec-xl:#f2f9fa;--surface-sec-l:#b6cdd5;--surface-errorLight:#fdd7d7;--text-primary:#1c1c1c;--text-secondary:#686868;--text-extraLight:#949494;--text-link:#0a7092;--text-error:#bd1111;--border-default:#cdcdcd;--border-focus:#73cae8;--border-error:#d33232;box-sizing:border-box;width:390px;min-height:100%;padding:24px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .back{display:inline-flex;align-items:center;gap:4px;height:44px;align-self:flex-start;margin-left:-8px;padding:0 8px;border:0;background:none;font:700 16px/1 Nunito,sans-serif;color:var(--text-link);cursor:pointer}
14
+ .back svg{width:20px;height:20px}
15
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
16
+ .who{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--surface-sec-xl);border:1px solid var(--surface-sec-l)}
17
+ .avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 18px/1 "Titillium Web",sans-serif}
18
+ .who-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
19
+ .who-name{font-weight:700;font-size:16px;line-height:22px}
20
+ .who-meta{font-size:12px;line-height:16px;color:var(--text-secondary)}
21
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
22
+ .form{display:flex;flex-direction:column;gap:16px}
23
+ .field{display:flex;flex-direction:column;gap:6px}
24
+ .lbl-row{display:flex;justify-content:space-between;align-items:baseline}
25
+ .lbl{font:600 16px/24px Nunito,sans-serif}
26
+ .input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--border-default);border-radius:4px;background:var(--surface-base);font:16px Nunito,sans-serif;color:var(--text-primary)}
27
+ .focus{border-color:var(--surface-primary);box-shadow:0 0 0 3px var(--border-focus)}
28
+ .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;box-sizing:border-box;padding:0 20px;border-radius:360px;border:1px solid var(--border-default);background:var(--surface-base);color:var(--text-primary);font:700 16px/1 Nunito,sans-serif;cursor:pointer}
29
+ .btn-primary{background:var(--surface-primary);border-color:var(--surface-primary);color:#fff;font-size:19px}
30
+ .foot{margin-top:auto;text-align:center;font-size:16px;line-height:24px;color:var(--text-secondary)}
31
+ </style>
32
+ <main class="screen">
33
+ <button class="back" type="button">
34
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"></path></svg>
35
+ All sign-in options
36
+ </button>
37
+
38
+ <h1 class="h1">Enter your password</h1>
39
+
40
+ <div class="who">
41
+ <span class="avatar" style="background: #0a7092" aria-hidden="true">J</span>
42
+ <span class="who-body">
43
+ <span class="who-name">Josh Gachnang</span>
44
+ <span class="who-meta">josh@example.com</span>
45
+ </span>
46
+ <button class="link" type="button" style="font-size: 14px">Not you?</button>
47
+ </div>
48
+
49
+ <form class="form">
50
+ <input type="hidden" name="email" value="josh@example.com" autocomplete="username">
51
+ <div class="field">
52
+ <div class="lbl-row">
53
+ <label class="lbl" for="ce-pw">Password</label>
54
+ <a class="link" href="#" style="font-size: 14px">Forgot password?</a>
55
+ </div>
56
+ <input class="input focus" id="ce-pw" type="password" autocomplete="current-password">
57
+ </div>
58
+ <button class="btn btn-primary" type="submit">Sign in</button>
59
+ </form>
60
+
61
+ <p class="foot">New here? <a href="#">Create an account</a></p>
62
+ </main>
63
+ </body>
64
+ </html>
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/FirstVisit.html ADDED
@@ -0,0 +1,81 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Sign in: first visit</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-alt:#f2f2f2;--surface-primary:#0e9dcd;--surface-sec-xl:#f2f9fa;--surface-sec-l:#b6cdd5;--surface-sec-xd:#092e3a;--surface-errorLight:#fdd7d7;--surface-warningLight:#ffe3c6;--text-primary:#1c1c1c;--text-secondary:#686868;--text-extraLight:#949494;--text-link:#0a7092;--text-error:#bd1111;--text-warning:#b14202;--text-sec-d:#092e3a;--border-default:#cdcdcd;--border-hover:#d9d9d9;--border-focus:#73cae8;--border-error:#d33232;--border-warning:#f36719;box-sizing:border-box;width:390px;min-height:100%;padding:56px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .logo{width:48px;height:48px;border-radius:16px;background:var(--surface-sec-xd);color:#fff;display:grid;place-items:center;font:700 12px/1 Nunito,sans-serif}
14
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
15
+ .sub{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--text-secondary)}
16
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
17
+ .pill{flex:none;font:700 12px/16px Nunito,sans-serif;padding:2px 8px;border-radius:360px;background:var(--surface-sec-xl);color:var(--text-sec-d);border:1px solid var(--surface-sec-l)}
18
+ .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;box-sizing:border-box;padding:0 20px;border-radius:360px;border:1px solid var(--border-default);background:var(--surface-base);color:var(--text-primary);font:700 16px/1 Nunito,sans-serif;cursor:pointer;text-decoration:none}
19
+ .btn .ico{position:absolute;left:20px;width:18px;height:18px}
20
+ .btn .pill{position:absolute;right:12px}
21
+ .btn-last{border:2px solid var(--surface-sec-l);background:var(--surface-sec-xl)}
22
+ .btn-primary{background:var(--surface-primary);border-color:var(--surface-primary);color:#fff;font-size:19px}
23
+ .stack{display:flex;flex-direction:column;gap:12px}
24
+ .divider{display:flex;align-items:center;gap:12px;font-size:12px;line-height:16px;color:var(--text-secondary)}
25
+ .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border-default)}
26
+ .form{display:flex;flex-direction:column;gap:16px}
27
+ .field{display:flex;flex-direction:column;gap:6px}
28
+ .lbl-row{display:flex;justify-content:space-between;align-items:baseline}
29
+ .lbl{font:600 16px/24px Nunito,sans-serif}
30
+ .input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--border-default);border-radius:4px;background:var(--surface-base);font:16px Nunito,sans-serif;color:var(--text-primary)}
31
+ .input::placeholder{color:var(--text-extraLight)}
32
+ .foot{margin-top:auto;text-align:center;font-size:16px;line-height:24px;color:var(--text-secondary)}
33
+ </style>
34
+ <main class="screen">
35
+ <div class="logo" aria-label="Your app logo">LOGO</div>
36
+ <div>
37
+ <h1 class="h1">Sign in</h1>
38
+ <p class="sub">Choose how you want to sign in.</p>
39
+ </div>
40
+
41
+ <div class="stack">
42
+ <button class="btn btn-last" type="button">
43
+ <svg class="ico" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
44
+ Continue with Google
45
+ <span class="pill">Last used</span>
46
+ </button>
47
+ <button class="btn" type="button">
48
+ <svg class="ico" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
49
+ Continue with Apple
50
+ </button>
51
+ <button class="btn" type="button">
52
+ <svg class="ico" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
53
+ Continue with GitHub
54
+ </button>
55
+ <button class="btn" type="button">
56
+ <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.5" cy="15.5" r="4.5"></circle><path d="M10.7 12.3 21 2M17 6l3 3M14.5 8.5l2.5 2.5"></path></svg>
57
+ Sign in with a passkey
58
+ </button>
59
+ </div>
60
+
61
+ <div class="divider">or use your email</div>
62
+
63
+ <form class="form">
64
+ <div class="field">
65
+ <label class="lbl" for="fv-email">Email</label>
66
+ <input class="input" id="fv-email" type="email" placeholder="you@example.com" autocomplete="username webauthn">
67
+ </div>
68
+ <div class="field">
69
+ <div class="lbl-row">
70
+ <label class="lbl" for="fv-pw">Password</label>
71
+ <a class="link" href="#" style="font-size: 14px">Forgot password?</a>
72
+ </div>
73
+ <input class="input" id="fv-pw" type="password" autocomplete="current-password">
74
+ </div>
75
+ <button class="btn btn-primary" type="submit">Sign in</button>
76
+ </form>
77
+
78
+ <p class="foot">New here? <a href="#">Create an account</a></p>
79
+ </main>
80
+ </body>
81
+ </html>
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/Main.html ADDED
@@ -0,0 +1,88 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Sign in: continue as</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-alt:#f2f2f2;--surface-primary:#0e9dcd;--surface-sec-xl:#f2f9fa;--surface-sec-l:#b6cdd5;--surface-sec-xd:#092e3a;--surface-errorLight:#fdd7d7;--surface-warningLight:#ffe3c6;--text-primary:#1c1c1c;--text-secondary:#686868;--text-extraLight:#949494;--text-link:#0a7092;--text-error:#bd1111;--text-warning:#b14202;--text-sec-d:#092e3a;--border-default:#cdcdcd;--border-hover:#d9d9d9;--border-focus:#73cae8;--border-error:#d33232;--border-warning:#f36719;box-sizing:border-box;width:390px;min-height:100%;padding:56px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .logo{width:48px;height:48px;border-radius:16px;background:var(--surface-sec-xd);color:#fff;display:grid;place-items:center;font:700 12px/1 Nunito,sans-serif}
14
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
15
+ .sub{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--text-secondary)}
16
+ .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
17
+ .sec-title{margin:0;font:700 16px/24px "Titillium Web",sans-serif}
18
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
19
+ .list{border:1px solid var(--border-default);border-radius:16px;overflow:hidden}
20
+ .acct{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;box-sizing:border-box;background:var(--surface-base);border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
21
+ .acct+.acct{border-top:1px solid var(--border-hover)}
22
+ .avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 18px/1 "Titillium Web",sans-serif}
23
+ .acct-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
24
+ .acct-name{font-weight:700;font-size:16px;line-height:22px;display:flex;align-items:center;gap:8px}
25
+ .acct-meta{font-size:12px;line-height:16px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
26
+ .chev{flex:none;width:20px;height:20px;color:var(--text-secondary)}
27
+ .pill{flex:none;font:700 12px/16px Nunito,sans-serif;padding:2px 8px;border-radius:360px;background:var(--surface-sec-xl);color:var(--text-sec-d);border:1px solid var(--surface-sec-l)}
28
+ .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;box-sizing:border-box;padding:0 20px;border-radius:360px;border:1px solid var(--border-default);background:var(--surface-base);color:var(--text-primary);font:700 16px/1 Nunito,sans-serif;cursor:pointer;text-decoration:none}
29
+ .btn .ico{position:absolute;left:20px;width:18px;height:18px}
30
+ .btn .pill{position:absolute;right:12px}
31
+ .btn-primary{background:var(--surface-primary);border-color:var(--surface-primary);color:#fff;font-size:19px}
32
+ .btn-quiet{background:var(--surface-alt);border-color:var(--surface-alt)}
33
+ .stack{display:flex;flex-direction:column;gap:12px}
34
+ .divider{display:flex;align-items:center;gap:12px;font-size:12px;line-height:16px;color:var(--text-secondary)}
35
+ .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border-default)}
36
+ .field{display:flex;flex-direction:column;gap:6px}
37
+ .lbl-row{display:flex;justify-content:space-between;align-items:baseline}
38
+ .lbl{font:600 16px/24px Nunito,sans-serif}
39
+ .input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--border-default);border-radius:4px;background:var(--surface-base);font:16px Nunito,sans-serif;color:var(--text-primary)}
40
+ .input::placeholder{color:var(--text-extraLight)}
41
+ .foot{margin-top:auto;text-align:center;font-size:16px;line-height:24px;color:var(--text-secondary)}
42
+ .banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:16px;font-size:16px;line-height:22px}
43
+ .banner svg{flex:none;width:20px;height:20px;margin-top:1px}
44
+ </style>
45
+ <main class="screen">
46
+ <div class="logo" aria-label="Your app logo">LOGO</div>
47
+ <div>
48
+ <h1 class="h1">Welcome back</h1>
49
+ <p class="sub">Pick up where you left off.</p>
50
+ </div>
51
+
52
+ <section aria-labelledby="acc-title">
53
+ <div class="sec-head">
54
+ <h2 id="acc-title" class="sec-title">Continue as</h2>
55
+ <button class="link" type="button">Edit</button>
56
+ </div>
57
+ <div class="list">
58
+ <button class="acct" type="button">
59
+ <span class="avatar" style="background: #2b6072" aria-hidden="true">J</span>
60
+ <span class="acct-body">
61
+ <span class="acct-name">Josh Gachnang <span class="pill">Last used</span></span>
62
+ <span class="acct-meta">
63
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
64
+ Apple · j***@n***.io
65
+ </span>
66
+ </span>
67
+ <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg>
68
+ </button>
69
+ <button class="acct" type="button">
70
+ <span class="avatar" style="background: #b14202" aria-hidden="true">J</span>
71
+ <span class="acct-body">
72
+ <span class="acct-name">Josh Gachnang</span>
73
+ <span class="acct-meta">
74
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path></svg>
75
+ Google · j***@g***.com
76
+ </span>
77
+ </span>
78
+ <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg>
79
+ </button>
80
+ </div>
81
+ </section>
82
+
83
+ <button class="btn btn-quiet" type="button">Sign in another way</button>
84
+
85
+ <p class="foot">New here? <a href="#">Create an account</a></p>
86
+ </main>
87
+ </body>
88
+ </html>
package/dist/docs/versioned/next/implementationPlans/login-redesign/boards/ManageAccounts.html ADDED
@@ -0,0 +1,77 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Sign in: manage accounts</title>
6
+ </head>
7
+ <body>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;family=Titillium+Web:wght@600;700&amp;display=swap">
9
+ <style>
10
+ body{margin:0;background:#e9eef0;display:flex;justify-content:center;padding:24px 0}
11
+ a{color:#0a7092}a:hover{color:#095a75}
12
+ .screen{--surface-base:#ffffff;--surface-alt:#f2f2f2;--surface-primary:#0e9dcd;--surface-sec-xl:#f2f9fa;--surface-sec-l:#b6cdd5;--surface-sec-xd:#092e3a;--text-primary:#1c1c1c;--text-secondary:#686868;--text-extraLight:#949494;--text-link:#0a7092;--text-error:#bd1111;--text-success:#1a7f36;--text-sec-d:#092e3a;--border-default:#cdcdcd;--border-hover:#d9d9d9;--status-active:#3ea45c;box-sizing:border-box;width:390px;min-height:100%;padding:56px 24px 32px;background:var(--surface-base);color:var(--text-primary);font-family:Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:24px}
13
+ .logo{width:48px;height:48px;border-radius:16px;background:var(--surface-sec-xd);color:#fff;display:grid;place-items:center;font:700 12px/1 Nunito,sans-serif}
14
+ .h1{margin:0;font:700 32px/38px "Titillium Web",sans-serif}
15
+ .sub{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--text-secondary)}
16
+ .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
17
+ .sec-title{margin:0;font:700 16px/24px "Titillium Web",sans-serif}
18
+ .link{font:700 16px/24px Nunito,sans-serif;color:var(--text-link);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
19
+ .list{border:1px solid var(--border-default);border-radius:16px;overflow:hidden}
20
+ .acct{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 8px 12px 16px;box-sizing:border-box;background:var(--surface-base)}
21
+ .acct+.acct{border-top:1px solid var(--border-hover)}
22
+ .avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 18px/1 "Titillium Web",sans-serif}
23
+ .acct-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
24
+ .acct-name{font-weight:700;font-size:16px;line-height:22px}
25
+ .acct-meta{font-size:12px;line-height:16px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
26
+ .remove{flex:none;height:44px;padding:0 12px;border:0;border-radius:360px;background:none;font:700 16px/1 Nunito,sans-serif;color:var(--text-error);cursor:pointer}
27
+ .dot{width:8px;height:8px;border-radius:50%;background:var(--status-active)}
28
+ .signed{flex:none;padding:0 12px;font-size:12px;line-height:16px;color:var(--text-secondary)}
29
+ .note{margin:0;font-size:12px;line-height:16px;color:var(--text-secondary)}
30
+ .foot{margin-top:auto;text-align:center;font-size:16px;line-height:24px;color:var(--text-secondary)}
31
+ </style>
32
+ <main class="screen">
33
+ <div class="logo" aria-label="Your app logo">LOGO</div>
34
+ <div>
35
+ <h1 class="h1">Welcome back</h1>
36
+ <p class="sub">Pick up where you left off.</p>
37
+ </div>
38
+
39
+ <section aria-labelledby="ma-acc">
40
+ <div class="sec-head">
41
+ <h2 id="ma-acc" class="sec-title">Accounts on this device</h2>
42
+ <button class="link" type="button">Done</button>
43
+ </div>
44
+ <div class="list">
45
+ <div class="acct">
46
+ <span class="avatar" style="background: #0a7092" aria-hidden="true">J</span>
47
+ <span class="acct-body">
48
+ <span class="acct-name">Josh Gachnang</span>
49
+ <span class="acct-meta"><span class="dot" aria-hidden="true"></span>Signed in · j***@n***.io</span>
50
+ </span>
51
+ <span class="signed">Can't remove</span>
52
+ </div>
53
+ <div class="acct">
54
+ <span class="avatar" style="background: #2b6072" aria-hidden="true">J</span>
55
+ <span class="acct-body">
56
+ <span class="acct-name">Josh Gachnang</span>
57
+ <span class="acct-meta">Apple · j***@n***.io</span>
58
+ </span>
59
+ <button class="remove" type="button" aria-label="Remove Josh Gachnang, Apple, from this device">Remove</button>
60
+ </div>
61
+ <div class="acct">
62
+ <span class="avatar" style="background: #b14202" aria-hidden="true">J</span>
63
+ <span class="acct-body">
64
+ <span class="acct-name">Josh Gachnang</span>
65
+ <span class="acct-meta">Google · j***@g***.com</span>
66
+ </span>
67
+ <button class="remove" type="button" aria-label="Remove Josh Gachnang, Google, from this device">Remove</button>
68
+ </div>
69
+ </div>
70
+ </section>
71
+
72
+ <p class="note">Removing an account only forgets it on this device. It doesn't sign you out anywhere else or delete the account.</p>
73
+
74
+ <p class="foot">New here? <a href="#">Create an account</a></p>
75
+ </main>
76
+ </body>
77
+ </html>