claude-dev-env 1.38.1 → 1.40.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 (282) 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 +199 -0
  7. package/_shared/pr-loop/scripts/config/reviews_disabled_constants.py +8 -0
  8. package/_shared/pr-loop/scripts/post_audit_thread.py +1242 -0
  9. package/_shared/pr-loop/scripts/preflight.py +129 -2
  10. package/_shared/pr-loop/scripts/reviews_disabled.py +59 -0
  11. package/_shared/pr-loop/scripts/tests/test_code_rules_gate.py +0 -19
  12. package/_shared/pr-loop/scripts/tests/test_post_audit_thread.py +1116 -0
  13. package/_shared/pr-loop/scripts/tests/test_post_audit_thread_constants.py +127 -0
  14. package/_shared/pr-loop/scripts/tests/test_preflight.py +41 -0
  15. package/_shared/pr-loop/scripts/tests/test_reviews_disabled.py +36 -0
  16. package/_shared/pr-loop/state-schema.md +1 -1
  17. package/agents/clean-coder.md +2 -2
  18. package/agents/pr-description-writer.md +150 -52
  19. package/bin/install.mjs +6 -7
  20. package/bin/install.test.mjs +8 -0
  21. package/commands/doc-gist.md +16 -0
  22. package/commands/plan.md +0 -2
  23. package/commands/review-plan.md +1 -1
  24. package/docs/CODE_RULES.md +122 -2
  25. package/docs/PR_DESCRIPTION_GUIDE.md +127 -64
  26. package/hooks/blocking/bot_mention_comment_blocker.py +75 -0
  27. package/hooks/blocking/code_rules_enforcer.py +1143 -129
  28. package/hooks/blocking/convergence_gate_blocker.py +130 -0
  29. package/hooks/blocking/destructive_command_blocker.py +74 -0
  30. package/hooks/blocking/gh_body_arg_blocker.py +30 -0
  31. package/hooks/blocking/md_to_html_blocker.py +119 -0
  32. package/hooks/blocking/pr_description_enforcer.py +57 -22
  33. package/hooks/blocking/test_bot_mention_comment_blocker.py +131 -0
  34. package/hooks/blocking/test_code_rules_enforcer.py +21 -0
  35. package/hooks/blocking/test_code_rules_enforcer_any_exempt_files.py +70 -0
  36. package/hooks/blocking/test_code_rules_enforcer_any_imports_and_cast.py +92 -0
  37. package/hooks/blocking/test_code_rules_enforcer_banned_import_alias.py +143 -0
  38. package/hooks/blocking/test_code_rules_enforcer_banned_prefixes.py +152 -0
  39. package/hooks/blocking/test_code_rules_enforcer_bare_except.py +120 -0
  40. package/hooks/blocking/test_code_rules_enforcer_boundary_types.py +175 -0
  41. package/hooks/blocking/test_code_rules_enforcer_cap_meta.py +0 -1
  42. package/hooks/blocking/test_code_rules_enforcer_collection_prefix.py +50 -0
  43. package/hooks/blocking/test_code_rules_enforcer_docstring_format.py +255 -0
  44. package/hooks/blocking/test_code_rules_enforcer_inline_tuple_string_magic.py +130 -0
  45. package/hooks/blocking/test_code_rules_enforcer_stub_implementations.py +141 -0
  46. package/hooks/blocking/test_code_rules_enforcer_test_branching.py +143 -0
  47. package/hooks/blocking/test_code_rules_enforcer_thin_wrapper_files.py +169 -0
  48. package/hooks/blocking/test_code_rules_enforcer_todo_markers.py +99 -0
  49. package/hooks/blocking/test_code_rules_enforcer_typed_dict_pairs.py +141 -0
  50. package/hooks/blocking/test_convergence_gate_blocker.py +63 -0
  51. package/hooks/blocking/test_destructive_command_blocker.py +146 -0
  52. package/hooks/blocking/test_destructive_command_blocker_no_verify.py +102 -0
  53. package/hooks/blocking/test_gh_body_arg_blocker.py +45 -0
  54. package/hooks/blocking/test_md_to_html_blocker.py +317 -0
  55. package/hooks/blocking/test_pr_description_enforcer.py +69 -8
  56. package/hooks/config/any_type_config.py +7 -0
  57. package/hooks/config/banned_identifiers_constants.py +11 -0
  58. package/hooks/config/blocking_check_limits.py +38 -0
  59. package/hooks/config/bot_mention_comment_blocker_constants.py +20 -0
  60. package/hooks/config/code_rules_enforcer_constants.py +53 -0
  61. package/hooks/config/convergence_branch_constants.py +9 -0
  62. package/hooks/config/doc_gist_auto_publish_constants.py +18 -0
  63. package/hooks/config/html_companion_constants.py +20 -0
  64. package/hooks/config/inline_tuple_string_magic_constants.py +22 -0
  65. package/hooks/config/pr_description_enforcer_constants.py +14 -0
  66. package/hooks/config/test_banned_identifiers_constants.py +17 -0
  67. package/hooks/hooks.json +28 -20
  68. package/hooks/pyproject.toml +69 -0
  69. package/hooks/validators/mypy_integration.py +47 -1
  70. package/hooks/validators/run_all_validators.py +3 -3
  71. package/hooks/validators/test_mypy_integration.py +50 -1
  72. package/hooks/workflow/doc_gist_auto_publish.py +144 -0
  73. package/hooks/workflow/md_to_html_companion.py +365 -0
  74. package/hooks/workflow/test_doc_gist_auto_publish.py +117 -0
  75. package/hooks/workflow/test_md_to_html_companion.py +452 -0
  76. package/package.json +1 -1
  77. package/rules/gh-body-file.md +2 -0
  78. package/scripts/Install-SweepEmptyDirs.ps1 +111 -0
  79. package/scripts/check.ps1 +106 -0
  80. package/scripts/config/timing.py +11 -0
  81. package/scripts/sweep_empty_dirs.py +138 -0
  82. package/scripts/sync_to_cursor/rules.py +1 -1
  83. package/scripts/test_sweep_empty_dirs.py +183 -0
  84. package/skills/_shared/pr-loop/prompts/pr-consistency-audit.xml +323 -0
  85. package/skills/_shared/pr-loop/scripts/_cli_utils.py +22 -0
  86. package/skills/_shared/pr-loop/scripts/_path_resolver.py +165 -0
  87. package/skills/_shared/pr-loop/scripts/_xml_utils.py +20 -0
  88. package/skills/_shared/pr-loop/scripts/build_audit_prompt.py +182 -0
  89. package/skills/_shared/pr-loop/scripts/build_fix_prompt.py +185 -0
  90. package/skills/_shared/pr-loop/scripts/config/__init__.py +0 -0
  91. package/skills/_shared/pr-loop/scripts/config/path_resolver_constants.py +78 -0
  92. package/skills/_shared/pr-loop/scripts/init_loop_state.py +135 -0
  93. package/skills/_shared/pr-loop/scripts/teardown_worktrees.py +175 -0
  94. package/skills/_shared/pr-loop/scripts/write_audit_outcomes.py +182 -0
  95. package/skills/_shared/pr-loop/scripts/write_fix_outcomes.py +206 -0
  96. package/skills/bugteam/CONSTRAINTS.md +21 -22
  97. package/skills/bugteam/EXAMPLES.md +3 -3
  98. package/skills/bugteam/PROMPTS.md +227 -67
  99. package/skills/bugteam/SKILL.md +132 -455
  100. package/skills/bugteam/reference/README.md +1 -1
  101. package/skills/bugteam/reference/audit-and-teammates.md +112 -39
  102. package/skills/bugteam/reference/audit-contract.md +4 -22
  103. package/skills/bugteam/reference/copilot-gap-analysis.md +8 -5
  104. package/skills/bugteam/reference/design-rationale.md +2 -2
  105. package/skills/bugteam/reference/github-pr-reviews.md +50 -57
  106. package/skills/bugteam/reference/obstacles/audit-assign-ids.md +13 -0
  107. package/skills/bugteam/reference/obstacles/audit-capture-excerpts.md +13 -0
  108. package/skills/bugteam/reference/obstacles/audit-walk-categories.md +13 -0
  109. package/skills/bugteam/reference/obstacles/audit-write-xml.md +13 -0
  110. package/skills/bugteam/reference/obstacles/fix-append-summary.md +13 -0
  111. package/skills/bugteam/reference/obstacles/fix-apply-fixes.md +13 -0
  112. package/skills/bugteam/reference/obstacles/fix-git-add-commit.md +13 -0
  113. package/skills/bugteam/reference/obstacles/fix-git-push.md +13 -0
  114. package/skills/bugteam/reference/obstacles/fix-post-reply.md +13 -0
  115. package/skills/bugteam/reference/obstacles/fix-publish-summary.md +13 -0
  116. package/skills/bugteam/reference/obstacles/fix-py-compile.md +13 -0
  117. package/skills/bugteam/reference/obstacles/fix-read-files.md +13 -0
  118. package/skills/bugteam/reference/obstacles/fix-resolve-thread.md +13 -0
  119. package/skills/bugteam/reference/obstacles/fix-test-suite.md +13 -0
  120. package/skills/bugteam/reference/obstacles/fix-violation-count.md +13 -0
  121. package/skills/bugteam/reference/obstacles/fix-write-xml.md +13 -0
  122. package/skills/bugteam/reference/team-setup.md +111 -9
  123. package/skills/bugteam/reference/teardown-publish-permissions.md +39 -8
  124. package/skills/bugteam/scripts/README.md +60 -0
  125. package/skills/bugteam/scripts/_claude_permissions_common.py +358 -0
  126. package/skills/bugteam/scripts/bugteam_code_rules_gate.py +976 -0
  127. package/skills/bugteam/scripts/bugteam_fix_hookspath.py +375 -0
  128. package/skills/bugteam/scripts/bugteam_preflight.py +328 -0
  129. package/skills/bugteam/scripts/config/bugteam_code_rules_gate_constants.py +25 -0
  130. package/skills/bugteam/scripts/config/bugteam_fix_hookspath_constants.py +26 -0
  131. package/skills/bugteam/scripts/config/bugteam_preflight_constants.py +35 -0
  132. package/skills/bugteam/scripts/config/claude_permissions_common_constants.py +20 -0
  133. package/skills/bugteam/scripts/config/probe_code_rules_enforcer_check_constants.py +12 -0
  134. package/skills/bugteam/scripts/config/windows_safe_rmtree_constants.py +7 -0
  135. package/skills/bugteam/scripts/grant_project_claude_permissions.py +175 -0
  136. package/skills/bugteam/scripts/probe_code_rules_enforcer_check.py +107 -0
  137. package/skills/bugteam/scripts/revoke_project_claude_permissions.py +220 -0
  138. package/skills/bugteam/scripts/test__claude_permissions_common.py +112 -0
  139. package/skills/bugteam/scripts/test_bugteam_code_rules_gate.py +400 -0
  140. package/skills/bugteam/scripts/test_bugteam_fix_hookspath.py +384 -0
  141. package/skills/bugteam/scripts/test_bugteam_preflight.py +309 -0
  142. package/skills/bugteam/scripts/test_claude_permissions_common.py +195 -0
  143. package/skills/bugteam/scripts/test_grant_project_claude_permissions.py +55 -0
  144. package/skills/bugteam/scripts/test_probe_code_rules_enforcer_check.py +76 -0
  145. package/skills/bugteam/scripts/test_revoke_project_claude_permissions.py +55 -0
  146. package/skills/bugteam/scripts/test_windows_safe_rmtree.py +108 -0
  147. package/skills/bugteam/scripts/windows_safe_rmtree.py +100 -0
  148. package/skills/bugteam/test_skill_additions.py +1 -11
  149. package/skills/code/SKILL.md +176 -0
  150. package/skills/copilot-review/SKILL.md +16 -0
  151. package/skills/doc-gist/SKILL.md +99 -0
  152. package/skills/doc-gist/references/examples/01-exploration-code-approaches.html +453 -0
  153. package/skills/doc-gist/references/examples/02-exploration-visual-designs.html +515 -0
  154. package/skills/doc-gist/references/examples/03-code-review-pr.html +638 -0
  155. package/skills/doc-gist/references/examples/04-code-understanding.html +491 -0
  156. package/skills/doc-gist/references/examples/05-design-system.html +629 -0
  157. package/skills/doc-gist/references/examples/06-component-variants.html +605 -0
  158. package/skills/doc-gist/references/examples/07-prototype-animation.html +455 -0
  159. package/skills/doc-gist/references/examples/08-prototype-interaction.html +396 -0
  160. package/skills/doc-gist/references/examples/09-slide-deck.html +592 -0
  161. package/skills/doc-gist/references/examples/10-svg-illustrations.html +492 -0
  162. package/skills/doc-gist/references/examples/11-status-report.html +528 -0
  163. package/skills/doc-gist/references/examples/12-incident-report.html +596 -0
  164. package/skills/doc-gist/references/examples/13-flowchart-diagram.html +395 -0
  165. package/skills/doc-gist/references/examples/14-research-feature-explainer.html +381 -0
  166. package/skills/doc-gist/references/examples/15-research-concept-explainer.html +368 -0
  167. package/skills/doc-gist/references/examples/16-implementation-plan.html +702 -0
  168. package/skills/doc-gist/references/examples/17-pr-writeup.html +595 -0
  169. package/skills/doc-gist/references/examples/18-editor-triage-board.html +573 -0
  170. package/skills/doc-gist/references/examples/19-editor-feature-flags.html +663 -0
  171. package/skills/doc-gist/references/examples/20-editor-prompt-tuner.html +722 -0
  172. package/skills/doc-gist/references/examples/README.md +5 -0
  173. package/skills/doc-gist/scripts/config/__init__.py +0 -0
  174. package/skills/doc-gist/scripts/config/gist_upload_constants.py +16 -0
  175. package/skills/doc-gist/scripts/gist_upload.py +177 -0
  176. package/skills/doc-gist/scripts/test_gist_upload.py +51 -0
  177. package/skills/findbugs/SKILL.md +96 -2
  178. package/skills/monitor-open-prs/SKILL.md +14 -32
  179. package/skills/monitor-open-prs/test_skill_contract.py +0 -11
  180. package/skills/pr-consistency-audit/SKILL.md +112 -0
  181. package/skills/pr-consistency-audit/reference/detection-rules.md +96 -0
  182. package/skills/pr-consistency-audit/reference/illustrations.md +78 -0
  183. package/skills/pr-converge/SKILL.md +229 -23
  184. package/skills/pr-converge/config/__init__.py +0 -0
  185. package/skills/pr-converge/config/constants.py +63 -0
  186. package/skills/pr-converge/reference/convergence-gates.md +138 -44
  187. package/skills/pr-converge/reference/examples.md +43 -11
  188. package/skills/pr-converge/reference/fix-protocol.md +6 -5
  189. package/skills/pr-converge/reference/ground-rules.md +5 -3
  190. package/skills/pr-converge/reference/multi-pr-orchestration.md +44 -19
  191. package/skills/pr-converge/reference/obstacles/fix-post-replies.md +13 -0
  192. package/skills/pr-converge/reference/obstacles/fix-publish-summary.md +13 -0
  193. package/skills/pr-converge/reference/obstacles/fix-push.md +13 -0
  194. package/skills/pr-converge/reference/obstacles/fix-read-filelines.md +13 -0
  195. package/skills/pr-converge/reference/obstacles/fix-reset-state.md +13 -0
  196. package/skills/pr-converge/reference/obstacles/fix-resolve-threads.md +13 -0
  197. package/skills/pr-converge/reference/obstacles/fix-spawn-clean-coder.md +13 -0
  198. package/skills/pr-converge/reference/obstacles/fix-stage-commit.md +13 -0
  199. package/skills/pr-converge/reference/obstacles/fix-trigger-bugbot.md +13 -0
  200. package/skills/pr-converge/reference/obstacles/fix-write-test.md +13 -0
  201. package/skills/pr-converge/reference/per-tick.md +107 -31
  202. package/skills/pr-converge/reference/state-schema.md +22 -1
  203. package/skills/pr-converge/reference/stop-conditions.md +9 -7
  204. package/skills/pr-converge/scripts/README.md +34 -46
  205. package/skills/pr-converge/scripts/check_bugbot_ci.py +279 -0
  206. package/skills/pr-converge/scripts/check_convergence.py +497 -0
  207. package/skills/pr-converge/scripts/check_pending_reviews.py +154 -0
  208. package/skills/pr-converge/scripts/config/pr_converge_constants.py +118 -0
  209. package/skills/pr-converge/scripts/fetch_copilot_reviews.py +134 -0
  210. package/skills/pr-converge/scripts/post_fix_reply.py +168 -0
  211. package/skills/pr-converge/scripts/test_check_bugbot_ci.py +312 -0
  212. package/skills/pr-converge/workflows/schedule-wakeup-loop.md +5 -12
  213. package/skills/qbug/SKILL.md +157 -27
  214. package/skills/session-log/SKILL.md +216 -114
  215. package/skills/session-tidy/SKILL.md +1 -1
  216. package/skills/skill-builder/SKILL.md +138 -56
  217. package/skills/skill-builder/references/delegation-map.md +72 -113
  218. package/skills/skill-builder/references/progressive-disclosure.md +122 -0
  219. package/skills/skill-builder/references/self-audit-checklist.md +92 -0
  220. package/skills/skill-builder/references/skill-types.md +228 -0
  221. package/skills/skill-builder/references/thariq-x-post-skills.json +33 -0
  222. package/skills/skill-builder/templates/gap-analysis.md +15 -8
  223. package/skills/skill-builder/workflows/improve-skill.md +86 -57
  224. package/skills/skill-builder/workflows/new-skill.md +80 -168
  225. package/skills/skill-builder/workflows/polish-skill.md +78 -54
  226. package/skills/structure-prompt/SKILL.md +50 -0
  227. package/skills/structure-prompt/reference/adversarial-tuning.md +62 -0
  228. package/skills/structure-prompt/reference/block-classification.md +27 -0
  229. package/skills/structure-prompt/reference/canonical-case.md +48 -0
  230. package/skills/structure-prompt/reference/citation-depth.md +70 -0
  231. package/skills/structure-prompt/reference/cleanup.md +33 -0
  232. package/skills/structure-prompt/reference/constraints.md +33 -0
  233. package/skills/structure-prompt/reference/directives.md +37 -0
  234. package/skills/structure-prompt/reference/examples.md +72 -0
  235. package/skills/structure-prompt/reference/instantiation.md +51 -0
  236. package/skills/structure-prompt/reference/output-contract.md +72 -0
  237. package/skills/structure-prompt/reference/per-category.md +23 -0
  238. package/skills/structure-prompt/reference/persona.md +38 -0
  239. package/skills/structure-prompt/reference/research.md +33 -0
  240. package/skills/structure-prompt/reference/structure.md +28 -0
  241. package/agents/code-standards-agent.md +0 -93
  242. package/agents/groq-coder.md +0 -113
  243. package/agents/plan-executor.md +0 -226
  244. package/agents/project-docs-analyzer.md +0 -53
  245. package/agents/project-structure-organizer-agent.md +0 -72
  246. package/agents/skill-to-agent-converter.md +0 -370
  247. package/agents/skill-writer-agent.md +0 -470
  248. package/agents/user-docs-writer.md +0 -67
  249. package/agents/workflow-visual-documenter.md +0 -82
  250. package/commands/readability-review.md +0 -20
  251. package/hooks/mypy.ini +0 -2
  252. package/hooks/notification/attention_needed_notify.py +0 -71
  253. package/hooks/notification/claude_notification_handler.py +0 -67
  254. package/hooks/notification/notification_utils.py +0 -267
  255. package/hooks/notification/subagent_complete_notify.py +0 -381
  256. package/hooks/notification/test_attention_needed_notify.py +0 -47
  257. package/hooks/notification/test_claude_notification_handler.py +0 -54
  258. package/hooks/notification/test_notification_utils.py +0 -91
  259. package/hooks/notification/test_subagent_complete_notify.py +0 -79
  260. package/scripts/config/groq_bugteam_config.py +0 -230
  261. package/scripts/config/test_groq_bugteam_config.py +0 -83
  262. package/scripts/config/test_spec_implementer_prompt.py +0 -32
  263. package/scripts/groq_bugteam.README.md +0 -131
  264. package/scripts/groq_bugteam.py +0 -647
  265. package/scripts/groq_bugteam_dotenv.py +0 -40
  266. package/scripts/groq_bugteam_spec.py +0 -226
  267. package/scripts/test_groq_bugteam.py +0 -529
  268. package/scripts/test_groq_bugteam_apply_fix_from_spec.py +0 -426
  269. package/scripts/test_groq_bugteam_dotenv.py +0 -66
  270. package/scripts/test_groq_bugteam_spec.py +0 -338
  271. package/skills/bugteam/SKILL_EVALS.md +0 -309
  272. package/skills/dream/SKILL.md +0 -118
  273. package/skills/ingest/SKILL.md +0 -40
  274. package/skills/npm-creator/SKILL.md +0 -187
  275. package/skills/readability-review/SKILL.md +0 -127
  276. package/skills/resume-review/SKILL.md +0 -261
  277. package/skills/rule-audit/SKILL.md +0 -307
  278. package/skills/rule-creator/SKILL.md +0 -150
  279. package/skills/searching-obsidian-vault/SKILL.md +0 -131
  280. package/skills/skill-writer/REFERENCE.md +0 -284
  281. package/skills/skill-writer/SKILL.md +0 -222
  282. package/skills/tdd-team/SKILL.md +0 -128
package/skills/doc-gist/references/examples/08-prototype-interaction.html ADDED
@@ -0,0 +1,396 @@
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 — Sidebar drag-to-reorder</title>
7
+ <style>
8
+ :root {
9
+ --ivory: #FAF9F5;
10
+ --slate: #141413;
11
+ --clay: #D97757;
12
+ --oat: #E3DACC;
13
+ --olive: #788C5D;
14
+ --gray-50: #F0EEE6;
15
+ --gray-200: #D1CFC5;
16
+ --gray-500: #87867F;
17
+ --gray-800: #3D3D3A;
18
+ --white: #ffffff;
19
+ --serif: ui-serif, Georgia, "Times New Roman", serif;
20
+ --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
21
+ --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
22
+ }
23
+ * { box-sizing: border-box; }
24
+ html, body {
25
+ margin: 0;
26
+ background: var(--ivory);
27
+ color: var(--slate);
28
+ font-family: var(--sans);
29
+ font-size: 14px;
30
+ line-height: 1.55;
31
+ }
32
+ .wrap {
33
+ max-width: 1040px;
34
+ margin: 0 auto;
35
+ padding: 48px 32px 64px;
36
+ }
37
+ header { margin-bottom: 28px; }
38
+ .eyebrow {
39
+ font-family: var(--mono);
40
+ font-size: 11px;
41
+ letter-spacing: 0.08em;
42
+ text-transform: uppercase;
43
+ color: var(--gray-500);
44
+ }
45
+ h1 {
46
+ font-family: var(--serif);
47
+ font-weight: 500;
48
+ font-size: 30px;
49
+ letter-spacing: -0.01em;
50
+ margin: 6px 0 4px;
51
+ }
52
+ .sub {
53
+ color: var(--gray-500);
54
+ max-width: 600px;
55
+ }
56
+ code.inline {
57
+ font-family: var(--mono);
58
+ font-size: 12px;
59
+ background: var(--gray-50);
60
+ border: 1.5px solid var(--gray-200);
61
+ padding: 1px 5px;
62
+ border-radius: 4px;
63
+ }
64
+
65
+ /* ---------- layout ---------- */
66
+ .bench {
67
+ display: grid;
68
+ grid-template-columns: 300px 1fr;
69
+ gap: 28px;
70
+ align-items: start;
71
+ }
72
+
73
+ /* ---------- sidebar mock ---------- */
74
+ .sidebar {
75
+ width: 260px;
76
+ background: var(--white);
77
+ border: 1.5px solid var(--gray-200);
78
+ border-radius: 12px;
79
+ padding: 14px 10px;
80
+ }
81
+ .sidebar-title {
82
+ font-family: var(--mono);
83
+ font-size: 10px;
84
+ letter-spacing: 0.1em;
85
+ text-transform: uppercase;
86
+ color: var(--gray-500);
87
+ padding: 4px 10px 10px;
88
+ }
89
+ .list {
90
+ position: relative;
91
+ list-style: none;
92
+ margin: 0;
93
+ padding: 0;
94
+ }
95
+ .item {
96
+ display: flex;
97
+ align-items: center;
98
+ gap: 10px;
99
+ padding: 9px 10px;
100
+ margin: 2px 0;
101
+ border-radius: 8px;
102
+ background: var(--white);
103
+ cursor: grab;
104
+ user-select: none;
105
+ transition: background 120ms linear, transform 120ms ease-out, opacity 120ms linear;
106
+ }
107
+ .item:hover { background: var(--gray-50); }
108
+ .item:hover .grip i { background: var(--gray-800); }
109
+ .item.dragging {
110
+ opacity: 0.35;
111
+ transform: rotate(2deg);
112
+ background: var(--gray-50);
113
+ cursor: grabbing;
114
+ }
115
+ .item .label { font-size: 14px; color: var(--slate); }
116
+ .item .count {
117
+ margin-left: auto;
118
+ font-family: var(--mono);
119
+ font-size: 11px;
120
+ color: var(--gray-500);
121
+ }
122
+
123
+ /* grip: 2 × 3 dot grid, pure css */
124
+ .grip {
125
+ flex: none;
126
+ width: 10px;
127
+ height: 16px;
128
+ display: grid;
129
+ grid-template-columns: repeat(2, 3px);
130
+ grid-template-rows: repeat(3, 3px);
131
+ gap: 3px;
132
+ align-content: center;
133
+ }
134
+ .grip i {
135
+ width: 3px;
136
+ height: 3px;
137
+ border-radius: 50%;
138
+ background: var(--gray-200);
139
+ transition: background 120ms linear;
140
+ }
141
+
142
+ /* drop indicator line */
143
+ .indicator {
144
+ position: absolute;
145
+ left: 6px;
146
+ right: 6px;
147
+ height: 2px;
148
+ background: var(--clay);
149
+ border-radius: 2px;
150
+ pointer-events: none;
151
+ display: none;
152
+ }
153
+ .indicator::before {
154
+ content: "";
155
+ position: absolute;
156
+ left: -5px;
157
+ top: -3px;
158
+ width: 8px;
159
+ height: 8px;
160
+ border-radius: 50%;
161
+ background: var(--clay);
162
+ }
163
+ .indicator.on { display: block; }
164
+
165
+ /* ---------- annotation panel ---------- */
166
+ .notes {
167
+ background: var(--white);
168
+ border: 1.5px solid var(--gray-200);
169
+ border-radius: 12px;
170
+ padding: 22px 24px;
171
+ }
172
+ .notes h2 {
173
+ font-family: var(--serif);
174
+ font-weight: 500;
175
+ font-size: 18px;
176
+ margin: 0 0 6px;
177
+ }
178
+ .notes .lede {
179
+ color: var(--gray-500);
180
+ font-size: 13px;
181
+ margin: 0 0 16px;
182
+ }
183
+ .notes ul {
184
+ list-style: none;
185
+ margin: 0;
186
+ padding: 0;
187
+ }
188
+ .notes li {
189
+ position: relative;
190
+ padding: 10px 0 10px 22px;
191
+ border-top: 1.5px solid var(--gray-50);
192
+ font-size: 13px;
193
+ color: var(--gray-800);
194
+ }
195
+ .notes li:first-child { border-top: none; }
196
+ .notes li::before {
197
+ content: "";
198
+ position: absolute;
199
+ left: 4px;
200
+ top: 16px;
201
+ width: 7px;
202
+ height: 7px;
203
+ border-radius: 2px;
204
+ background: var(--clay);
205
+ }
206
+ .notes li b { color: var(--slate); font-weight: 600; }
207
+
208
+ /* ---------- open questions ---------- */
209
+ .questions {
210
+ margin-top: 28px;
211
+ background: var(--oat);
212
+ border: 1.5px solid var(--gray-200);
213
+ border-radius: 12px;
214
+ padding: 20px 24px;
215
+ }
216
+ .questions h2 {
217
+ font-family: var(--serif);
218
+ font-weight: 500;
219
+ font-size: 17px;
220
+ margin: 0 0 12px;
221
+ }
222
+ .questions ol {
223
+ margin: 0;
224
+ padding-left: 20px;
225
+ }
226
+ .questions li {
227
+ font-size: 13px;
228
+ color: var(--gray-800);
229
+ padding: 4px 0;
230
+ }
231
+ .questions li::marker {
232
+ font-family: var(--mono);
233
+ color: var(--olive);
234
+ font-weight: 600;
235
+ }
236
+
237
+ .footnote {
238
+ margin-top: 18px;
239
+ font-family: var(--mono);
240
+ font-size: 11px;
241
+ color: var(--gray-500);
242
+ }
243
+ </style>
244
+ </head>
245
+ <body>
246
+ <div class="wrap">
247
+
248
+ <header>
249
+ <div class="eyebrow">Birchline / prototype / interaction</div>
250
+ <h1>Sidebar drag-to-reorder</h1>
251
+ <p class="sub">
252
+ Throwaway HTML so we can <em>feel</em> the reorder before porting it to
253
+ React. Native <code class="inline">dragstart / dragover / drop</code>,
254
+ ~40 lines of JS, no libraries. Grab a row by the dots and move it.
255
+ </p>
256
+ </header>
257
+
258
+ <div class="bench">
259
+
260
+ <div>
261
+ <nav class="sidebar">
262
+ <div class="sidebar-title">Views</div>
263
+ <ul class="list" id="list">
264
+ <li class="item" draggable="true">
265
+ <span class="grip"><i></i><i></i><i></i><i></i><i></i><i></i></span>
266
+ <span class="label">Inbox</span>
267
+ <span class="count">14</span>
268
+ </li>
269
+ <li class="item" draggable="true">
270
+ <span class="grip"><i></i><i></i><i></i><i></i><i></i><i></i></span>
271
+ <span class="label">Today</span>
272
+ <span class="count">3</span>
273
+ </li>
274
+ <li class="item" draggable="true">
275
+ <span class="grip"><i></i><i></i><i></i><i></i><i></i><i></i></span>
276
+ <span class="label">Upcoming</span>
277
+ <span class="count">21</span>
278
+ </li>
279
+ <li class="item" draggable="true">
280
+ <span class="grip"><i></i><i></i><i></i><i></i><i></i><i></i></span>
281
+ <span class="label">Projects</span>
282
+ <span class="count">8</span>
283
+ </li>
284
+ <li class="item" draggable="true">
285
+ <span class="grip"><i></i><i></i><i></i><i></i><i></i><i></i></span>
286
+ <span class="label">Archive</span>
287
+ <span class="count"></span>
288
+ </li>
289
+ <li class="item" draggable="true">
290
+ <span class="grip"><i></i><i></i><i></i><i></i><i></i><i></i></span>
291
+ <span class="label">Trash</span>
292
+ <span class="count"></span>
293
+ </li>
294
+ <div class="indicator" id="indicator"></div>
295
+ </ul>
296
+ </nav>
297
+ <p class="footnote">Order persists in the DOM only — refresh to reset.</p>
298
+ </div>
299
+
300
+ <div>
301
+ <section class="notes">
302
+ <h2>What you're feeling</h2>
303
+ <p class="lede">Design decisions baked into this prototype, so you can push back on them.</p>
304
+ <ul>
305
+ <li>
306
+ <b>Drop indicator snaps to the nearest gap</b>, not the raw cursor Y.
307
+ It only moves when you cross a row's midpoint — feels more decisive,
308
+ less jittery.
309
+ </li>
310
+ <li>
311
+ <b>Dragged row stays in place at 35% opacity</b> with a 2&deg; tilt.
312
+ Keeping the ghost in the list preserves your sense of where you
313
+ started; the tilt reads as "lifted."
314
+ </li>
315
+ <li>
316
+ <b>Grip dots are the affordance, but the whole row is draggable.</b>
317
+ Dots darken on hover to teach the gesture without forcing a
318
+ tiny hit target.
319
+ </li>
320
+ <li>
321
+ <b>No auto-scroll, no drop animation.</b> Left out on purpose so the
322
+ core feel is easy to judge — say the word and we add them next.
323
+ </li>
324
+ </ul>
325
+ </section>
326
+
327
+ <section class="questions">
328
+ <h2>Open questions</h2>
329
+ <ol>
330
+ <li>Should <b>Trash</b> (and maybe <b>Archive</b>) be pinned to the bottom and excluded from reordering?</li>
331
+ <li>Do we want rows to <b>slide</b> to their new slot on drop, or is the instant snap acceptable?</li>
332
+ <li>Keyboard path: is <code class="inline">Alt + Arrow</code> to move the focused row enough for the first ship?</li>
333
+ </ol>
334
+ </section>
335
+ </div>
336
+
337
+ </div>
338
+ </div>
339
+
340
+ <script>
341
+ var list = document.getElementById('list');
342
+ var indicator = document.getElementById('indicator');
343
+ var dragging = null;
344
+ var dropBefore = null; // node to insert before, or null = append
345
+
346
+ list.addEventListener('dragstart', function (e) {
347
+ var item = e.target.closest('.item');
348
+ if (!item) return;
349
+ dragging = item;
350
+ item.classList.add('dragging');
351
+ e.dataTransfer.effectAllowed = 'move';
352
+ e.dataTransfer.setData('text/plain', '');
353
+ });
354
+
355
+ list.addEventListener('dragover', function (e) {
356
+ if (!dragging) return;
357
+ e.preventDefault();
358
+ var siblings = Array.prototype.filter.call(
359
+ list.children,
360
+ function (el) { return el.classList && el.classList.contains('item'); }
361
+ );
362
+ dropBefore = null;
363
+ for (var i = 0; i < siblings.length; i++) {
364
+ var r = siblings[i].getBoundingClientRect();
365
+ if (e.clientY < r.top + r.height / 2) { dropBefore = siblings[i]; break; }
366
+ }
367
+ var listRect = list.getBoundingClientRect();
368
+ var edge = dropBefore
369
+ ? dropBefore.getBoundingClientRect().top
370
+ : siblings[siblings.length - 1].getBoundingClientRect().bottom;
371
+ indicator.style.top = (edge - listRect.top - 1) + 'px';
372
+ indicator.classList.add('on');
373
+ });
374
+
375
+ list.addEventListener('drop', function (e) {
376
+ e.preventDefault();
377
+ if (!dragging) return;
378
+ if (dropBefore) list.insertBefore(dragging, dropBefore);
379
+ else list.insertBefore(dragging, indicator);
380
+ cleanup();
381
+ });
382
+
383
+ list.addEventListener('dragleave', function (e) {
384
+ if (!list.contains(e.relatedTarget)) indicator.classList.remove('on');
385
+ });
386
+ document.addEventListener('dragend', cleanup);
387
+
388
+ function cleanup() {
389
+ if (dragging) dragging.classList.remove('dragging');
390
+ dragging = null;
391
+ dropBefore = null;
392
+ indicator.classList.remove('on');
393
+ }
394
+ </script>
395
+ </body>
396
+ </html>