claude-dev-env 1.38.0 → 1.39.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 (271) hide show
  1. package/CLAUDE.md +10 -36
  2. package/_shared/pr-loop/audit-reply-template.md +147 -0
  3. package/_shared/pr-loop/fix-protocol.md +25 -4
  4. package/_shared/pr-loop/gh-payloads.md +37 -50
  5. package/_shared/pr-loop/scripts/code_rules_gate.py +0 -60
  6. package/_shared/pr-loop/scripts/config/post_audit_thread_constants.py +189 -0
  7. package/_shared/pr-loop/scripts/post_audit_thread.py +947 -0
  8. package/_shared/pr-loop/scripts/tests/test_code_rules_gate.py +0 -19
  9. package/_shared/pr-loop/scripts/tests/test_post_audit_thread.py +923 -0
  10. package/_shared/pr-loop/scripts/tests/test_post_audit_thread_constants.py +127 -0
  11. package/_shared/pr-loop/state-schema.md +1 -1
  12. package/agents/clean-coder.md +2 -2
  13. package/bin/install.mjs +6 -7
  14. package/bin/install.test.mjs +8 -0
  15. package/commands/doc-gist.md +16 -0
  16. package/commands/plan.md +0 -2
  17. package/commands/review-plan.md +1 -1
  18. package/docs/CODE_RULES.md +122 -2
  19. package/hooks/blocking/bot_mention_comment_blocker.py +75 -0
  20. package/hooks/blocking/code_rules_enforcer.py +1236 -161
  21. package/hooks/blocking/convergence_gate_blocker.py +130 -0
  22. package/hooks/blocking/destructive_command_blocker.py +74 -0
  23. package/hooks/blocking/gh_body_arg_blocker.py +30 -0
  24. package/hooks/blocking/md_to_html_blocker.py +119 -0
  25. package/hooks/blocking/test_bot_mention_comment_blocker.py +131 -0
  26. package/hooks/blocking/test_code_rules_enforcer.py +21 -0
  27. package/hooks/blocking/test_code_rules_enforcer_any_exempt_files.py +70 -0
  28. package/hooks/blocking/test_code_rules_enforcer_any_imports_and_cast.py +92 -0
  29. package/hooks/blocking/test_code_rules_enforcer_banned_import_alias.py +143 -0
  30. package/hooks/blocking/test_code_rules_enforcer_banned_prefixes.py +152 -0
  31. package/hooks/blocking/test_code_rules_enforcer_bare_except.py +120 -0
  32. package/hooks/blocking/test_code_rules_enforcer_boundary_types.py +175 -0
  33. package/hooks/blocking/test_code_rules_enforcer_cap_meta.py +0 -1
  34. package/hooks/blocking/test_code_rules_enforcer_collection_prefix.py +50 -0
  35. package/hooks/blocking/test_code_rules_enforcer_docstring_format.py +255 -0
  36. package/hooks/blocking/test_code_rules_enforcer_inline_tuple_string_magic.py +130 -0
  37. package/hooks/blocking/test_code_rules_enforcer_stub_implementations.py +141 -0
  38. package/hooks/blocking/test_code_rules_enforcer_test_branching.py +143 -0
  39. package/hooks/blocking/test_code_rules_enforcer_thin_wrapper_files.py +169 -0
  40. package/hooks/blocking/test_code_rules_enforcer_todo_markers.py +99 -0
  41. package/hooks/blocking/test_code_rules_enforcer_typed_dict_pairs.py +141 -0
  42. package/hooks/blocking/test_code_rules_enforcer_unused_imports.py +158 -0
  43. package/hooks/blocking/test_convergence_gate_blocker.py +63 -0
  44. package/hooks/blocking/test_destructive_command_blocker.py +146 -0
  45. package/hooks/blocking/test_destructive_command_blocker_no_verify.py +102 -0
  46. package/hooks/blocking/test_gh_body_arg_blocker.py +45 -0
  47. package/hooks/blocking/test_md_to_html_blocker.py +317 -0
  48. package/hooks/config/any_type_config.py +7 -0
  49. package/hooks/config/banned_identifiers_constants.py +11 -0
  50. package/hooks/config/blocking_check_limits.py +38 -0
  51. package/hooks/config/bot_mention_comment_blocker_constants.py +20 -0
  52. package/hooks/config/code_rules_enforcer_constants.py +53 -0
  53. package/hooks/config/convergence_branch_constants.py +9 -0
  54. package/hooks/config/doc_gist_auto_publish_constants.py +18 -0
  55. package/hooks/config/html_companion_constants.py +20 -0
  56. package/hooks/config/inline_tuple_string_magic_constants.py +22 -0
  57. package/hooks/config/test_banned_identifiers_constants.py +17 -0
  58. package/hooks/hooks.json +28 -20
  59. package/hooks/pyproject.toml +69 -0
  60. package/hooks/validators/mypy_integration.py +47 -1
  61. package/hooks/validators/run_all_validators.py +3 -3
  62. package/hooks/validators/test_mypy_integration.py +50 -1
  63. package/hooks/workflow/doc_gist_auto_publish.py +144 -0
  64. package/hooks/workflow/md_to_html_companion.py +365 -0
  65. package/hooks/workflow/test_doc_gist_auto_publish.py +117 -0
  66. package/hooks/workflow/test_md_to_html_companion.py +452 -0
  67. package/package.json +1 -1
  68. package/rules/gh-body-file.md +2 -0
  69. package/scripts/Install-SweepEmptyDirs.ps1 +111 -0
  70. package/scripts/check.ps1 +106 -0
  71. package/scripts/config/timing.py +11 -0
  72. package/scripts/sweep_empty_dirs.py +138 -0
  73. package/scripts/sync_to_cursor/rules.py +1 -1
  74. package/scripts/test_sweep_empty_dirs.py +183 -0
  75. package/skills/_shared/pr-loop/prompts/pr-consistency-audit.xml +323 -0
  76. package/skills/_shared/pr-loop/scripts/_cli_utils.py +22 -0
  77. package/skills/_shared/pr-loop/scripts/_path_resolver.py +165 -0
  78. package/skills/_shared/pr-loop/scripts/_xml_utils.py +20 -0
  79. package/skills/_shared/pr-loop/scripts/build_audit_prompt.py +182 -0
  80. package/skills/_shared/pr-loop/scripts/build_fix_prompt.py +185 -0
  81. package/skills/_shared/pr-loop/scripts/config/__init__.py +0 -0
  82. package/skills/_shared/pr-loop/scripts/config/path_resolver_constants.py +78 -0
  83. package/skills/_shared/pr-loop/scripts/init_loop_state.py +135 -0
  84. package/skills/_shared/pr-loop/scripts/teardown_worktrees.py +175 -0
  85. package/skills/_shared/pr-loop/scripts/write_audit_outcomes.py +182 -0
  86. package/skills/_shared/pr-loop/scripts/write_fix_outcomes.py +206 -0
  87. package/skills/bugteam/CONSTRAINTS.md +21 -22
  88. package/skills/bugteam/EXAMPLES.md +3 -3
  89. package/skills/bugteam/PROMPTS.md +227 -67
  90. package/skills/bugteam/SKILL.md +114 -455
  91. package/skills/bugteam/reference/README.md +1 -1
  92. package/skills/bugteam/reference/audit-and-teammates.md +112 -39
  93. package/skills/bugteam/reference/audit-contract.md +4 -22
  94. package/skills/bugteam/reference/copilot-gap-analysis.md +8 -5
  95. package/skills/bugteam/reference/design-rationale.md +2 -2
  96. package/skills/bugteam/reference/github-pr-reviews.md +50 -57
  97. package/skills/bugteam/reference/obstacles/audit-assign-ids.md +13 -0
  98. package/skills/bugteam/reference/obstacles/audit-capture-excerpts.md +13 -0
  99. package/skills/bugteam/reference/obstacles/audit-walk-categories.md +13 -0
  100. package/skills/bugteam/reference/obstacles/audit-write-xml.md +13 -0
  101. package/skills/bugteam/reference/obstacles/fix-append-summary.md +13 -0
  102. package/skills/bugteam/reference/obstacles/fix-apply-fixes.md +13 -0
  103. package/skills/bugteam/reference/obstacles/fix-git-add-commit.md +13 -0
  104. package/skills/bugteam/reference/obstacles/fix-git-push.md +13 -0
  105. package/skills/bugteam/reference/obstacles/fix-post-reply.md +13 -0
  106. package/skills/bugteam/reference/obstacles/fix-publish-summary.md +13 -0
  107. package/skills/bugteam/reference/obstacles/fix-py-compile.md +13 -0
  108. package/skills/bugteam/reference/obstacles/fix-read-files.md +13 -0
  109. package/skills/bugteam/reference/obstacles/fix-resolve-thread.md +13 -0
  110. package/skills/bugteam/reference/obstacles/fix-test-suite.md +13 -0
  111. package/skills/bugteam/reference/obstacles/fix-violation-count.md +13 -0
  112. package/skills/bugteam/reference/obstacles/fix-write-xml.md +13 -0
  113. package/skills/bugteam/reference/team-setup.md +106 -9
  114. package/skills/bugteam/reference/teardown-publish-permissions.md +39 -8
  115. package/skills/bugteam/scripts/README.md +60 -0
  116. package/skills/bugteam/scripts/_claude_permissions_common.py +358 -0
  117. package/skills/bugteam/scripts/bugteam_code_rules_gate.py +976 -0
  118. package/skills/bugteam/scripts/bugteam_fix_hookspath.py +375 -0
  119. package/skills/bugteam/scripts/bugteam_preflight.py +294 -0
  120. package/skills/bugteam/scripts/config/bugteam_code_rules_gate_constants.py +25 -0
  121. package/skills/bugteam/scripts/config/bugteam_fix_hookspath_constants.py +26 -0
  122. package/skills/bugteam/scripts/config/bugteam_preflight_constants.py +35 -0
  123. package/skills/bugteam/scripts/config/claude_permissions_common_constants.py +20 -0
  124. package/skills/bugteam/scripts/config/probe_code_rules_enforcer_check_constants.py +12 -0
  125. package/skills/bugteam/scripts/config/windows_safe_rmtree_constants.py +7 -0
  126. package/skills/bugteam/scripts/grant_project_claude_permissions.py +175 -0
  127. package/skills/bugteam/scripts/probe_code_rules_enforcer_check.py +107 -0
  128. package/skills/bugteam/scripts/revoke_project_claude_permissions.py +220 -0
  129. package/skills/bugteam/scripts/test__claude_permissions_common.py +112 -0
  130. package/skills/bugteam/scripts/test_bugteam_code_rules_gate.py +400 -0
  131. package/skills/bugteam/scripts/test_bugteam_fix_hookspath.py +384 -0
  132. package/skills/bugteam/scripts/test_bugteam_preflight.py +268 -0
  133. package/skills/bugteam/scripts/test_claude_permissions_common.py +195 -0
  134. package/skills/bugteam/scripts/test_grant_project_claude_permissions.py +55 -0
  135. package/skills/bugteam/scripts/test_probe_code_rules_enforcer_check.py +76 -0
  136. package/skills/bugteam/scripts/test_revoke_project_claude_permissions.py +55 -0
  137. package/skills/bugteam/scripts/test_windows_safe_rmtree.py +108 -0
  138. package/skills/bugteam/scripts/windows_safe_rmtree.py +100 -0
  139. package/skills/bugteam/test_skill_additions.py +1 -11
  140. package/skills/code/SKILL.md +176 -0
  141. package/skills/doc-gist/SKILL.md +99 -0
  142. package/skills/doc-gist/references/examples/01-exploration-code-approaches.html +453 -0
  143. package/skills/doc-gist/references/examples/02-exploration-visual-designs.html +515 -0
  144. package/skills/doc-gist/references/examples/03-code-review-pr.html +638 -0
  145. package/skills/doc-gist/references/examples/04-code-understanding.html +491 -0
  146. package/skills/doc-gist/references/examples/05-design-system.html +629 -0
  147. package/skills/doc-gist/references/examples/06-component-variants.html +605 -0
  148. package/skills/doc-gist/references/examples/07-prototype-animation.html +455 -0
  149. package/skills/doc-gist/references/examples/08-prototype-interaction.html +396 -0
  150. package/skills/doc-gist/references/examples/09-slide-deck.html +592 -0
  151. package/skills/doc-gist/references/examples/10-svg-illustrations.html +492 -0
  152. package/skills/doc-gist/references/examples/11-status-report.html +528 -0
  153. package/skills/doc-gist/references/examples/12-incident-report.html +596 -0
  154. package/skills/doc-gist/references/examples/13-flowchart-diagram.html +395 -0
  155. package/skills/doc-gist/references/examples/14-research-feature-explainer.html +381 -0
  156. package/skills/doc-gist/references/examples/15-research-concept-explainer.html +368 -0
  157. package/skills/doc-gist/references/examples/16-implementation-plan.html +702 -0
  158. package/skills/doc-gist/references/examples/17-pr-writeup.html +595 -0
  159. package/skills/doc-gist/references/examples/18-editor-triage-board.html +573 -0
  160. package/skills/doc-gist/references/examples/19-editor-feature-flags.html +663 -0
  161. package/skills/doc-gist/references/examples/20-editor-prompt-tuner.html +722 -0
  162. package/skills/doc-gist/references/examples/README.md +5 -0
  163. package/skills/doc-gist/scripts/config/__init__.py +0 -0
  164. package/skills/doc-gist/scripts/config/gist_upload_constants.py +16 -0
  165. package/skills/doc-gist/scripts/gist_upload.py +177 -0
  166. package/skills/doc-gist/scripts/test_gist_upload.py +51 -0
  167. package/skills/findbugs/SKILL.md +68 -2
  168. package/skills/monitor-open-prs/SKILL.md +13 -32
  169. package/skills/monitor-open-prs/test_skill_contract.py +0 -11
  170. package/skills/pr-consistency-audit/SKILL.md +112 -0
  171. package/skills/pr-consistency-audit/reference/detection-rules.md +96 -0
  172. package/skills/pr-consistency-audit/reference/illustrations.md +78 -0
  173. package/skills/pr-converge/SKILL.md +227 -23
  174. package/skills/pr-converge/config/__init__.py +0 -0
  175. package/skills/pr-converge/config/constants.py +62 -0
  176. package/skills/pr-converge/reference/convergence-gates.md +138 -44
  177. package/skills/pr-converge/reference/examples.md +43 -11
  178. package/skills/pr-converge/reference/fix-protocol.md +6 -5
  179. package/skills/pr-converge/reference/ground-rules.md +5 -3
  180. package/skills/pr-converge/reference/multi-pr-orchestration.md +44 -19
  181. package/skills/pr-converge/reference/obstacles/fix-post-replies.md +13 -0
  182. package/skills/pr-converge/reference/obstacles/fix-publish-summary.md +13 -0
  183. package/skills/pr-converge/reference/obstacles/fix-push.md +13 -0
  184. package/skills/pr-converge/reference/obstacles/fix-read-filelines.md +13 -0
  185. package/skills/pr-converge/reference/obstacles/fix-reset-state.md +13 -0
  186. package/skills/pr-converge/reference/obstacles/fix-resolve-threads.md +13 -0
  187. package/skills/pr-converge/reference/obstacles/fix-spawn-clean-coder.md +13 -0
  188. package/skills/pr-converge/reference/obstacles/fix-stage-commit.md +13 -0
  189. package/skills/pr-converge/reference/obstacles/fix-trigger-bugbot.md +13 -0
  190. package/skills/pr-converge/reference/obstacles/fix-write-test.md +13 -0
  191. package/skills/pr-converge/reference/per-tick.md +90 -31
  192. package/skills/pr-converge/reference/state-schema.md +22 -1
  193. package/skills/pr-converge/reference/stop-conditions.md +9 -7
  194. package/skills/pr-converge/scripts/README.md +34 -46
  195. package/skills/pr-converge/scripts/check_bugbot_ci.py +174 -0
  196. package/skills/pr-converge/scripts/check_convergence.py +497 -0
  197. package/skills/pr-converge/scripts/check_pending_reviews.py +154 -0
  198. package/skills/pr-converge/scripts/config/pr_converge_constants.py +118 -0
  199. package/skills/pr-converge/scripts/fetch_copilot_reviews.py +134 -0
  200. package/skills/pr-converge/scripts/post_fix_reply.py +168 -0
  201. package/skills/pr-converge/workflows/schedule-wakeup-loop.md +5 -12
  202. package/skills/qbug/SKILL.md +132 -27
  203. package/skills/session-log/SKILL.md +216 -114
  204. package/skills/session-tidy/SKILL.md +1 -1
  205. package/skills/skill-builder/SKILL.md +138 -56
  206. package/skills/skill-builder/references/delegation-map.md +72 -113
  207. package/skills/skill-builder/references/progressive-disclosure.md +122 -0
  208. package/skills/skill-builder/references/self-audit-checklist.md +92 -0
  209. package/skills/skill-builder/references/skill-types.md +228 -0
  210. package/skills/skill-builder/references/thariq-x-post-skills.json +33 -0
  211. package/skills/skill-builder/templates/gap-analysis.md +15 -8
  212. package/skills/skill-builder/workflows/improve-skill.md +86 -57
  213. package/skills/skill-builder/workflows/new-skill.md +80 -168
  214. package/skills/skill-builder/workflows/polish-skill.md +78 -54
  215. package/skills/structure-prompt/SKILL.md +50 -0
  216. package/skills/structure-prompt/reference/adversarial-tuning.md +62 -0
  217. package/skills/structure-prompt/reference/block-classification.md +27 -0
  218. package/skills/structure-prompt/reference/canonical-case.md +48 -0
  219. package/skills/structure-prompt/reference/citation-depth.md +70 -0
  220. package/skills/structure-prompt/reference/cleanup.md +33 -0
  221. package/skills/structure-prompt/reference/constraints.md +33 -0
  222. package/skills/structure-prompt/reference/directives.md +37 -0
  223. package/skills/structure-prompt/reference/examples.md +72 -0
  224. package/skills/structure-prompt/reference/instantiation.md +51 -0
  225. package/skills/structure-prompt/reference/output-contract.md +72 -0
  226. package/skills/structure-prompt/reference/per-category.md +23 -0
  227. package/skills/structure-prompt/reference/persona.md +38 -0
  228. package/skills/structure-prompt/reference/research.md +33 -0
  229. package/skills/structure-prompt/reference/structure.md +28 -0
  230. package/agents/code-standards-agent.md +0 -93
  231. package/agents/groq-coder.md +0 -113
  232. package/agents/plan-executor.md +0 -226
  233. package/agents/project-docs-analyzer.md +0 -53
  234. package/agents/project-structure-organizer-agent.md +0 -72
  235. package/agents/skill-to-agent-converter.md +0 -370
  236. package/agents/skill-writer-agent.md +0 -470
  237. package/agents/user-docs-writer.md +0 -67
  238. package/agents/workflow-visual-documenter.md +0 -82
  239. package/commands/readability-review.md +0 -20
  240. package/hooks/mypy.ini +0 -2
  241. package/hooks/notification/attention_needed_notify.py +0 -71
  242. package/hooks/notification/claude_notification_handler.py +0 -67
  243. package/hooks/notification/notification_utils.py +0 -267
  244. package/hooks/notification/subagent_complete_notify.py +0 -381
  245. package/hooks/notification/test_attention_needed_notify.py +0 -47
  246. package/hooks/notification/test_claude_notification_handler.py +0 -54
  247. package/hooks/notification/test_notification_utils.py +0 -91
  248. package/hooks/notification/test_subagent_complete_notify.py +0 -79
  249. package/scripts/config/groq_bugteam_config.py +0 -230
  250. package/scripts/config/test_groq_bugteam_config.py +0 -83
  251. package/scripts/config/test_spec_implementer_prompt.py +0 -32
  252. package/scripts/groq_bugteam.README.md +0 -131
  253. package/scripts/groq_bugteam.py +0 -647
  254. package/scripts/groq_bugteam_dotenv.py +0 -40
  255. package/scripts/groq_bugteam_spec.py +0 -226
  256. package/scripts/test_groq_bugteam.py +0 -529
  257. package/scripts/test_groq_bugteam_apply_fix_from_spec.py +0 -426
  258. package/scripts/test_groq_bugteam_dotenv.py +0 -66
  259. package/scripts/test_groq_bugteam_spec.py +0 -338
  260. package/skills/bugteam/SKILL_EVALS.md +0 -309
  261. package/skills/dream/SKILL.md +0 -118
  262. package/skills/ingest/SKILL.md +0 -40
  263. package/skills/npm-creator/SKILL.md +0 -187
  264. package/skills/readability-review/SKILL.md +0 -127
  265. package/skills/resume-review/SKILL.md +0 -261
  266. package/skills/rule-audit/SKILL.md +0 -307
  267. package/skills/rule-creator/SKILL.md +0 -150
  268. package/skills/searching-obsidian-vault/SKILL.md +0 -131
  269. package/skills/skill-writer/REFERENCE.md +0 -284
  270. package/skills/skill-writer/SKILL.md +0 -222
  271. package/skills/tdd-team/SKILL.md +0 -128
package/skills/doc-gist/references/examples/06-component-variants.html ADDED
@@ -0,0 +1,605 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Birchline — Card Variant Matrix</title>
7
+ <style>
8
+ :root {
9
+ --ivory: #FAF9F5;
10
+ --slate: #141413;
11
+ --clay: #D97757;
12
+ --oat: #E3DACC;
13
+ --olive: #788C5D;
14
+ --gray-100: #F0EEE6;
15
+ --gray-300: #D1CFC5;
16
+ --gray-500: #87867F;
17
+ --gray-700: #3D3D3A;
18
+ --white: #FFFFFF;
19
+
20
+ --serif: ui-serif, Georgia, serif;
21
+ --sans: system-ui, -apple-system, sans-serif;
22
+ --mono: ui-monospace, 'SF Mono', Menlo, monospace;
23
+
24
+ /* live-controlled tokens */
25
+ --card-pad: 20px;
26
+ --card-border: 1.5px solid var(--gray-300);
27
+ --card-shadow: 0 4px 14px rgba(20, 20, 19, 0.08);
28
+ }
29
+
30
+ * { box-sizing: border-box; }
31
+
32
+ body {
33
+ margin: 0;
34
+ background: var(--ivory);
35
+ color: var(--slate);
36
+ font-family: var(--sans);
37
+ font-size: 15px;
38
+ line-height: 1.5;
39
+ -webkit-font-smoothing: antialiased;
40
+ }
41
+
42
+ .page {
43
+ max-width: 1100px;
44
+ margin: 0 auto;
45
+ padding: 0 28px 80px;
46
+ }
47
+
48
+ header {
49
+ padding: 48px 0 20px;
50
+ }
51
+ header h1 {
52
+ font-family: var(--serif);
53
+ font-weight: 500;
54
+ font-size: 36px;
55
+ letter-spacing: -0.01em;
56
+ margin: 0 0 6px;
57
+ }
58
+ header p {
59
+ color: var(--gray-500);
60
+ font-size: 14px;
61
+ margin: 0;
62
+ max-width: 640px;
63
+ }
64
+
65
+ /* ---------- Toolbar ---------- */
66
+ .toolbar {
67
+ position: sticky;
68
+ top: 0;
69
+ z-index: 10;
70
+ display: flex;
71
+ flex-wrap: wrap;
72
+ align-items: center;
73
+ gap: 28px;
74
+ padding: 16px 20px;
75
+ margin: 24px 0 36px;
76
+ background: var(--white);
77
+ border: 1.5px solid var(--gray-300);
78
+ border-radius: 12px;
79
+ }
80
+ .control {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 10px;
84
+ }
85
+ .control-label {
86
+ font-family: var(--mono);
87
+ font-size: 12px;
88
+ color: var(--gray-700);
89
+ }
90
+ .control-value {
91
+ font-family: var(--mono);
92
+ font-size: 12px;
93
+ color: var(--gray-500);
94
+ min-width: 36px;
95
+ }
96
+
97
+ input[type="range"] {
98
+ appearance: none;
99
+ width: 140px;
100
+ height: 4px;
101
+ background: var(--gray-300);
102
+ border-radius: 2px;
103
+ outline: none;
104
+ }
105
+ input[type="range"]::-webkit-slider-thumb {
106
+ appearance: none;
107
+ width: 16px; height: 16px;
108
+ background: var(--clay);
109
+ border-radius: 50%;
110
+ cursor: pointer;
111
+ }
112
+ input[type="range"]::-moz-range-thumb {
113
+ width: 16px; height: 16px;
114
+ background: var(--clay);
115
+ border: none;
116
+ border-radius: 50%;
117
+ cursor: pointer;
118
+ }
119
+
120
+ .radio-group {
121
+ display: inline-flex;
122
+ border: 1.5px solid var(--gray-300);
123
+ border-radius: 8px;
124
+ overflow: hidden;
125
+ }
126
+ .radio-group label {
127
+ padding: 6px 12px;
128
+ font-size: 13px;
129
+ cursor: pointer;
130
+ user-select: none;
131
+ color: var(--gray-700);
132
+ border-right: 1px solid var(--gray-300);
133
+ }
134
+ .radio-group label:last-child { border-right: none; }
135
+ .radio-group input { display: none; }
136
+ .radio-group input:checked + span {
137
+ color: var(--slate);
138
+ }
139
+ .radio-group label:has(input:checked) {
140
+ background: var(--gray-100);
141
+ }
142
+
143
+ .check {
144
+ display: inline-flex;
145
+ align-items: center;
146
+ gap: 8px;
147
+ font-size: 13px;
148
+ cursor: pointer;
149
+ user-select: none;
150
+ }
151
+ .check input {
152
+ appearance: none;
153
+ width: 16px; height: 16px;
154
+ border: 1.5px solid var(--gray-300);
155
+ border-radius: 4px;
156
+ margin: 0;
157
+ cursor: pointer;
158
+ position: relative;
159
+ }
160
+ .check input:checked {
161
+ background: var(--clay);
162
+ border-color: var(--clay);
163
+ }
164
+ .check input:checked::after {
165
+ content: "";
166
+ position: absolute;
167
+ left: 4px; top: 0;
168
+ width: 4px; height: 9px;
169
+ border: solid var(--white);
170
+ border-width: 0 2px 2px 0;
171
+ transform: rotate(45deg);
172
+ }
173
+
174
+ /* ---------- Grid ---------- */
175
+ .grid {
176
+ display: grid;
177
+ grid-template-columns: repeat(3, 1fr);
178
+ gap: 28px;
179
+ }
180
+ @media (max-width: 960px) {
181
+ .grid { grid-template-columns: repeat(2, 1fr); }
182
+ }
183
+ @media (max-width: 640px) {
184
+ .grid { grid-template-columns: 1fr; }
185
+ }
186
+
187
+ .cell {}
188
+ .variant-label {
189
+ display: inline-flex;
190
+ align-items: center;
191
+ height: 22px;
192
+ padding: 0 9px;
193
+ font-family: var(--mono);
194
+ font-size: 11px;
195
+ font-weight: 500;
196
+ color: var(--gray-700);
197
+ background: var(--gray-100);
198
+ border-radius: 999px;
199
+ margin-bottom: 10px;
200
+ }
201
+ .variant-note {
202
+ font-size: 12px;
203
+ color: var(--gray-500);
204
+ margin-top: 10px;
205
+ }
206
+
207
+ /* ---------- Card base ---------- */
208
+ .card {
209
+ border-radius: 12px;
210
+ padding: var(--card-pad);
211
+ transition: padding 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
212
+ cursor: pointer;
213
+ }
214
+ .card:hover { outline: 2px solid var(--clay); outline-offset: 2px; }
215
+
216
+ .card-head {
217
+ display: flex;
218
+ align-items: center;
219
+ gap: 12px;
220
+ margin-bottom: 12px;
221
+ }
222
+ .avatar {
223
+ width: 36px; height: 36px;
224
+ border-radius: 50%;
225
+ background: var(--oat);
226
+ flex-shrink: 0;
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ font-size: 13px;
231
+ font-weight: 600;
232
+ color: var(--gray-700);
233
+ }
234
+ .card-titles { min-width: 0; }
235
+ .card-title {
236
+ font-family: var(--serif);
237
+ font-size: 17px;
238
+ font-weight: 500;
239
+ margin: 0 0 2px;
240
+ line-height: 1.3;
241
+ }
242
+ .card-sub {
243
+ font-size: 13px;
244
+ color: var(--gray-500);
245
+ margin: 0;
246
+ white-space: nowrap;
247
+ overflow: hidden;
248
+ text-overflow: ellipsis;
249
+ }
250
+ .chips {
251
+ display: flex;
252
+ gap: 6px;
253
+ margin-bottom: 14px;
254
+ }
255
+ .chip {
256
+ display: inline-flex;
257
+ align-items: center;
258
+ height: 20px;
259
+ padding: 0 8px;
260
+ font-size: 11px;
261
+ font-weight: 500;
262
+ border-radius: 999px;
263
+ background: var(--gray-100);
264
+ color: var(--gray-700);
265
+ }
266
+ .chip.olive { background: rgba(120,140,93,0.16); color: var(--olive); }
267
+ .ghost-btn {
268
+ display: inline-flex;
269
+ align-items: center;
270
+ height: 30px;
271
+ padding: 0 12px;
272
+ font-size: 13px;
273
+ font-weight: 500;
274
+ color: var(--gray-700);
275
+ background: transparent;
276
+ border: 1.5px solid var(--gray-300);
277
+ border-radius: 8px;
278
+ cursor: pointer;
279
+ }
280
+ .ghost-btn:hover { background: var(--gray-100); }
281
+
282
+ /* ---------- Variant treatments ---------- */
283
+ .v-flat {
284
+ background: var(--white);
285
+ border: none;
286
+ box-shadow: none;
287
+ }
288
+ .v-outlined {
289
+ background: var(--white);
290
+ border: var(--card-border);
291
+ box-shadow: none;
292
+ }
293
+ .v-elevated {
294
+ background: var(--white);
295
+ border: none;
296
+ box-shadow: var(--card-shadow);
297
+ }
298
+ .v-stripe {
299
+ background: var(--white);
300
+ border: var(--card-border);
301
+ box-shadow: none;
302
+ position: relative;
303
+ overflow: hidden;
304
+ }
305
+ .v-stripe::before {
306
+ content: "";
307
+ position: absolute;
308
+ left: 0; right: 0; top: 0;
309
+ height: 4px;
310
+ background: var(--clay);
311
+ }
312
+ .v-inset {
313
+ background: var(--oat);
314
+ border: none;
315
+ box-shadow: none;
316
+ }
317
+ .v-inset .chip { background: rgba(255,255,255,0.6); }
318
+ .v-inset .ghost-btn { border-color: rgba(20,20,19,0.15); }
319
+ .v-inset .avatar { background: var(--white); }
320
+
321
+ .v-horizontal {
322
+ background: var(--white);
323
+ border: var(--card-border);
324
+ box-shadow: none;
325
+ display: flex;
326
+ align-items: center;
327
+ gap: 14px;
328
+ }
329
+ .v-horizontal .card-head { margin: 0; flex: 1; min-width: 0; }
330
+ .v-horizontal .chips { margin: 0; }
331
+ .v-horizontal .card-sub { display: none; }
332
+ .v-horizontal .ghost-btn { flex-shrink: 0; }
333
+
334
+ /* ---------- Snippet panel ---------- */
335
+ .snippet-panel {
336
+ margin-top: 40px;
337
+ border: 1.5px solid var(--gray-300);
338
+ border-radius: 12px;
339
+ overflow: hidden;
340
+ }
341
+ .snippet-head {
342
+ padding: 10px 16px;
343
+ font-family: var(--mono);
344
+ font-size: 12px;
345
+ color: var(--gray-500);
346
+ background: var(--gray-100);
347
+ border-bottom: 1px solid var(--gray-300);
348
+ }
349
+ pre#snippet {
350
+ margin: 0;
351
+ padding: 20px;
352
+ background: var(--slate);
353
+ color: var(--ivory);
354
+ font-family: var(--mono);
355
+ font-size: 13px;
356
+ line-height: 1.6;
357
+ overflow-x: auto;
358
+ min-height: 120px;
359
+ }
360
+ </style>
361
+ </head>
362
+ <body>
363
+ <div class="page">
364
+
365
+ <header>
366
+ <h1>Card variant matrix</h1>
367
+ <p>Six structural treatments of the Birchline <code style="font-family:var(--mono);font-size:13px">&lt;Card /&gt;</code> component. Adjust density and emphasis with the controls, hover a variant to see its prop combo.</p>
368
+ </header>
369
+
370
+ <!-- ---------- Toolbar ---------- -->
371
+ <div class="toolbar">
372
+ <div class="control">
373
+ <span class="control-label">Padding</span>
374
+ <input id="ctl-pad" type="range" min="12" max="32" value="20" step="2">
375
+ <span class="control-value" id="pad-out">20px</span>
376
+ </div>
377
+
378
+ <div class="control">
379
+ <span class="control-label">Border</span>
380
+ <div class="radio-group">
381
+ <label><input type="radio" name="border" value="none"><span>none</span></label>
382
+ <label><input type="radio" name="border" value="hairline" checked><span>hairline</span></label>
383
+ <label><input type="radio" name="border" value="solid"><span>solid</span></label>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="control">
388
+ <label class="check">
389
+ <input id="ctl-shadow" type="checkbox" checked>
390
+ Show shadow
391
+ </label>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- ---------- Grid ---------- -->
396
+ <div class="grid" id="grid">
397
+
398
+ <!-- A: Flat -->
399
+ <div class="cell">
400
+ <span class="variant-label">A &middot; Flat</span>
401
+ <div class="card v-flat"
402
+ data-snippet='<Card variant="flat" padding={PAD}>
403
+ <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
404
+ <Card.Meta tags={["Q2", "Roadmap"]} />
405
+ <Button variant="ghost">Open</Button>
406
+ </Card>'>
407
+ <div class="card-head">
408
+ <div class="avatar">WP</div>
409
+ <div class="card-titles">
410
+ <p class="card-title">Weekly planning</p>
411
+ <p class="card-sub">12 tasks &middot; due Friday</p>
412
+ </div>
413
+ </div>
414
+ <div class="chips">
415
+ <span class="chip">Q2</span>
416
+ <span class="chip olive">Roadmap</span>
417
+ </div>
418
+ <button class="ghost-btn">Open</button>
419
+ </div>
420
+ <p class="variant-note">best for: dense lists on tinted backgrounds</p>
421
+ </div>
422
+
423
+ <!-- B: Outlined -->
424
+ <div class="cell">
425
+ <span class="variant-label">B &middot; Outlined</span>
426
+ <div class="card v-outlined"
427
+ data-snippet='<Card variant="outlined" padding={PAD} border="BORDER">
428
+ <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
429
+ <Card.Meta tags={["Q2", "Roadmap"]} />
430
+ <Button variant="ghost">Open</Button>
431
+ </Card>'>
432
+ <div class="card-head">
433
+ <div class="avatar">WP</div>
434
+ <div class="card-titles">
435
+ <p class="card-title">Weekly planning</p>
436
+ <p class="card-sub">12 tasks &middot; due Friday</p>
437
+ </div>
438
+ </div>
439
+ <div class="chips">
440
+ <span class="chip">Q2</span>
441
+ <span class="chip olive">Roadmap</span>
442
+ </div>
443
+ <button class="ghost-btn">Open</button>
444
+ </div>
445
+ <p class="variant-note">best for: default content cards on ivory</p>
446
+ </div>
447
+
448
+ <!-- C: Elevated -->
449
+ <div class="cell">
450
+ <span class="variant-label">C &middot; Elevated</span>
451
+ <div class="card v-elevated"
452
+ data-snippet='<Card variant="elevated" padding={PAD} shadow="md">
453
+ <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
454
+ <Card.Meta tags={["Q2", "Roadmap"]} />
455
+ <Button variant="ghost">Open</Button>
456
+ </Card>'>
457
+ <div class="card-head">
458
+ <div class="avatar">WP</div>
459
+ <div class="card-titles">
460
+ <p class="card-title">Weekly planning</p>
461
+ <p class="card-sub">12 tasks &middot; due Friday</p>
462
+ </div>
463
+ </div>
464
+ <div class="chips">
465
+ <span class="chip">Q2</span>
466
+ <span class="chip olive">Roadmap</span>
467
+ </div>
468
+ <button class="ghost-btn">Open</button>
469
+ </div>
470
+ <p class="variant-note">best for: draggable items, popovers</p>
471
+ </div>
472
+
473
+ <!-- D: Accent stripe -->
474
+ <div class="cell">
475
+ <span class="variant-label">D &middot; Accent stripe</span>
476
+ <div class="card v-stripe"
477
+ data-snippet='<Card variant="outlined" accent="clay" padding={PAD} border="BORDER">
478
+ <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
479
+ <Card.Meta tags={["Q2", "Roadmap"]} />
480
+ <Button variant="ghost">Open</Button>
481
+ </Card>'>
482
+ <div class="card-head">
483
+ <div class="avatar">WP</div>
484
+ <div class="card-titles">
485
+ <p class="card-title">Weekly planning</p>
486
+ <p class="card-sub">12 tasks &middot; due Friday</p>
487
+ </div>
488
+ </div>
489
+ <div class="chips">
490
+ <span class="chip">Q2</span>
491
+ <span class="chip olive">Roadmap</span>
492
+ </div>
493
+ <button class="ghost-btn">Open</button>
494
+ </div>
495
+ <p class="variant-note">best for: pinned or priority items</p>
496
+ </div>
497
+
498
+ <!-- E: Inset / filled -->
499
+ <div class="cell">
500
+ <span class="variant-label">E &middot; Inset</span>
501
+ <div class="card v-inset"
502
+ data-snippet='<Card variant="filled" tone="oat" padding={PAD}>
503
+ <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
504
+ <Card.Meta tags={["Q2", "Roadmap"]} />
505
+ <Button variant="ghost">Open</Button>
506
+ </Card>'>
507
+ <div class="card-head">
508
+ <div class="avatar">WP</div>
509
+ <div class="card-titles">
510
+ <p class="card-title">Weekly planning</p>
511
+ <p class="card-sub">12 tasks &middot; due Friday</p>
512
+ </div>
513
+ </div>
514
+ <div class="chips">
515
+ <span class="chip">Q2</span>
516
+ <span class="chip olive">Roadmap</span>
517
+ </div>
518
+ <button class="ghost-btn">Open</button>
519
+ </div>
520
+ <p class="variant-note">best for: nested cards inside white panels</p>
521
+ </div>
522
+
523
+ <!-- F: Horizontal / compact -->
524
+ <div class="cell">
525
+ <span class="variant-label">F &middot; Horizontal</span>
526
+ <div class="card v-horizontal"
527
+ data-snippet='<Card variant="outlined" layout="row" padding={PAD} border="BORDER">
528
+ <Card.Header avatar title="Weekly planning" />
529
+ <Card.Meta tags={["Q2", "Roadmap"]} />
530
+ <Button variant="ghost">Open</Button>
531
+ </Card>'>
532
+ <div class="card-head">
533
+ <div class="avatar">WP</div>
534
+ <div class="card-titles">
535
+ <p class="card-title">Weekly planning</p>
536
+ <p class="card-sub">12 tasks &middot; due Friday</p>
537
+ </div>
538
+ </div>
539
+ <div class="chips">
540
+ <span class="chip">Q2</span>
541
+ <span class="chip olive">Roadmap</span>
542
+ </div>
543
+ <button class="ghost-btn">Open</button>
544
+ </div>
545
+ <p class="variant-note">best for: compact row lists, sidebars</p>
546
+ </div>
547
+
548
+ </div>
549
+
550
+ <!-- ---------- Snippet ---------- -->
551
+ <div class="snippet-panel">
552
+ <div class="snippet-head">JSX &mdash; hover a variant above</div>
553
+ <pre id="snippet">// hover a card to preview its props</pre>
554
+ </div>
555
+
556
+ </div>
557
+
558
+ <script>
559
+ (function () {
560
+ var root = document.documentElement;
561
+ var pad = document.getElementById('ctl-pad');
562
+ var padOut = document.getElementById('pad-out');
563
+ var shadow = document.getElementById('ctl-shadow');
564
+ var snippet = document.getElementById('snippet');
565
+ var currentBorder = 'hairline';
566
+
567
+ var borderMap = {
568
+ none: 'none',
569
+ hairline: '1px solid var(--gray-300)',
570
+ solid: '1.5px solid var(--gray-300)'
571
+ };
572
+
573
+ function applyPad() {
574
+ root.style.setProperty('--card-pad', pad.value + 'px');
575
+ padOut.textContent = pad.value + 'px';
576
+ }
577
+ function applyBorder(v) {
578
+ currentBorder = v;
579
+ root.style.setProperty('--card-border', borderMap[v]);
580
+ }
581
+ function applyShadow() {
582
+ root.style.setProperty('--card-shadow',
583
+ shadow.checked ? '0 4px 14px rgba(20,20,19,0.08)' : 'none');
584
+ }
585
+
586
+ pad.addEventListener('input', applyPad);
587
+ shadow.addEventListener('change', applyShadow);
588
+ document.querySelectorAll('input[name="border"]').forEach(function (r) {
589
+ r.addEventListener('change', function () { applyBorder(r.value); });
590
+ });
591
+
592
+ document.querySelectorAll('.card').forEach(function (card) {
593
+ card.addEventListener('mouseenter', function () {
594
+ var raw = card.getAttribute('data-snippet') || '';
595
+ snippet.textContent = raw
596
+ .replace(/PAD/g, pad.value)
597
+ .replace(/BORDER/g, currentBorder);
598
+ });
599
+ });
600
+
601
+ applyPad(); applyBorder('hairline'); applyShadow();
602
+ })();
603
+ </script>
604
+ </body>
605
+ </html>