@north-light/crouter 0.3.198 → 0.3.200

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 (316) hide show
  1. package/dist/api/client.d.ts +18 -18
  2. package/dist/api/client.js +29 -37
  3. package/dist/api/dto/broker-ops.d.ts +3 -1
  4. package/dist/api/dto/broker.d.ts +13 -2
  5. package/dist/api/dto/broker.js +4 -4
  6. package/dist/api/dto/human.d.ts +6 -5
  7. package/dist/api/dto/inbox.d.ts +81 -34
  8. package/dist/api/dto/nodes.d.ts +8 -2
  9. package/dist/api/dto/profiles.d.ts +23 -0
  10. package/dist/api/dto/profiles.js +2 -2
  11. package/dist/api/dto/worktree.d.ts +3 -5
  12. package/dist/api/routes.d.ts +3 -5
  13. package/dist/api/routes.js +4 -6
  14. package/dist/builtin-memory/00-runtime-base.md +6 -6
  15. package/dist/builtin-memory/01-spine/01-no-manager.md +1 -1
  16. package/dist/builtin-memory/02-lifecycle/00-terminal.md +3 -3
  17. package/dist/builtin-memory/04-orchestration-kernel.md +6 -6
  18. package/dist/builtin-memory/05-kinds/design/00-base.md +1 -1
  19. package/dist/builtin-memory/05-kinds/plan/reviewers/security.md +2 -2
  20. package/dist/builtin-memory/05-kinds/review/00-base.md +2 -2
  21. package/dist/builtin-memory/05-kinds/review/01-orchestrator.md +1 -1
  22. package/dist/builtin-memory/05-kinds/spec/01-orchestrator.md +1 -1
  23. package/dist/builtin-memory/insights/capture.md +2 -2
  24. package/dist/builtin-memory/insights/init.md +3 -3
  25. package/dist/builtin-memory/internal/INDEX.md +1 -1
  26. package/dist/builtin-memory/internal/memory-loading.md +1 -1
  27. package/dist/builtin-memory/internal/nodes-and-canvas.md +2 -2
  28. package/dist/builtin-memory/internal/plugins.md +59 -2
  29. package/dist/builtin-memory/internal/storage-tiers.md +3 -1
  30. package/dist/builtin-memory/spec/roadmap.md +2 -2
  31. package/dist/builtin-memory/testing.md +1 -1
  32. package/dist/clients/attach/chrome/bash-jobs.js +3 -3
  33. package/dist/clients/attach/render/chat-view.d.ts +26 -1
  34. package/dist/clients/attach/render/chat-view.js +61 -11
  35. package/dist/clients/attach/render/page-block.d.ts +34 -0
  36. package/dist/clients/attach/render/page-block.js +226 -0
  37. package/dist/clients/attach/session/whip.d.ts +2 -0
  38. package/dist/clients/attach/session/whip.js +2 -0
  39. package/dist/clients/attach/viewer.js +1419 -993
  40. package/dist/clients/conversation/projection.js +18 -3
  41. package/dist/clients/inbox/__tests__/serial/inbox-controller.test.js +9 -6
  42. package/dist/clients/inbox/__tests__/serial/mount-panel.test.js +13 -21
  43. package/dist/clients/inbox/controller.js +10 -16
  44. package/dist/clients/inbox/page-adapter.d.ts +1 -3
  45. package/dist/clients/inbox/page-adapter.js +3 -4
  46. package/dist/clients/inbox/resolve.d.ts +1 -1
  47. package/dist/clients/inbox/resolve.js +3 -3
  48. package/dist/clients/inbox/review/document-surface.js +3 -1
  49. package/dist/clients/inbox/review/state.d.ts +2 -1
  50. package/dist/clients/inbox/review/state.js +5 -16
  51. package/dist/clients/inbox/tui/input.js +37 -19
  52. package/dist/clients/inbox/tui/panel.js +5 -31
  53. package/dist/clients/inbox/tui/render.d.ts +11 -0
  54. package/dist/clients/inbox/tui/render.js +71 -27
  55. package/dist/clients/inbox/tui/slots.d.ts +3 -1
  56. package/dist/clients/inbox/tui/slots.js +16 -12
  57. package/dist/clients/inbox/tui/types.d.ts +2 -7
  58. package/dist/clients/inbox/tui.js +2 -2
  59. package/dist/commands/__tests__/human.test.js +71 -114
  60. package/dist/commands/__tests__/node-message.test.js +14 -0
  61. package/dist/commands/attention.js +4 -4
  62. package/dist/commands/canvas-snapshot.js +1 -1
  63. package/dist/commands/canvas.js +1 -1
  64. package/dist/commands/dashboard.js +1 -1
  65. package/dist/commands/human/{html.d.ts → components.d.ts} +1 -1
  66. package/dist/commands/human/components.js +77 -0
  67. package/dist/commands/human/feedback.d.ts +2 -0
  68. package/dist/commands/human/feedback.js +108 -0
  69. package/dist/commands/human/prompts.d.ts +13 -5
  70. package/dist/commands/human/prompts.js +160 -97
  71. package/dist/commands/human/queue.js +57 -88
  72. package/dist/commands/human/shared.d.ts +2 -12
  73. package/dist/commands/human/shared.js +17 -11
  74. package/dist/commands/human.js +29 -21
  75. package/dist/commands/memory/origin.js +2 -2
  76. package/dist/commands/node/bash.js +4 -4
  77. package/dist/commands/node/inspect.js +3 -3
  78. package/dist/commands/node/lifecycle.js +1 -1
  79. package/dist/commands/node/message.js +2 -2
  80. package/dist/commands/node-worktree.js +8 -8
  81. package/dist/commands/pkg/browse.js +1 -1
  82. package/dist/commands/pkg/plugin-manage.js +129 -10
  83. package/dist/commands/profile/delete.js +41 -15
  84. package/dist/commands/profile.js +1 -1
  85. package/dist/commands/push.js +1 -1
  86. package/dist/commands/surface/node/focus.js +29 -14
  87. package/dist/commands/surface-edit.js +3 -3
  88. package/dist/commands/surface-inbox.d.ts +2 -0
  89. package/dist/commands/{human/inbox.js → surface-inbox.js} +14 -18
  90. package/dist/commands/surface.js +2 -1
  91. package/dist/commands/sys/doctor.js +60 -3
  92. package/dist/commands/sys/feedback.js +79 -25
  93. package/dist/commands/sys/settings.js +1 -1
  94. package/dist/core/__tests__/cron-broker-capacity.test.js +1 -1
  95. package/dist/core/__tests__/extension-abort.test.js +5 -2
  96. package/dist/core/__tests__/fixtures/fake-engine.d.ts +13 -2
  97. package/dist/core/__tests__/fixtures/fake-engine.js +47 -3
  98. package/dist/core/__tests__/helpers/harness.js +17 -55
  99. package/dist/core/__tests__/human-cancel-guard.test.js +31 -10
  100. package/dist/core/__tests__/human-deliver.test.js +31 -26
  101. package/dist/core/__tests__/human-node-not-supervised.test.js +1 -1
  102. package/dist/core/__tests__/plugin-page-components.test.js +157 -0
  103. package/dist/core/__tests__/seam/broker-crash-teardown.test.js +4 -5
  104. package/dist/core/__tests__/seam/dormancy-release.test.js +40 -0
  105. package/dist/core/__tests__/serial/flagship-lifecycle.test.js +2 -2
  106. package/dist/core/__tests__/serial/human-deliver-e2e.test.js +12 -6
  107. package/dist/core/__tests__/serial/live-mutation.test.js +1 -1
  108. package/dist/core/__tests__/serial/tmux-surface.test.js +4 -2
  109. package/dist/core/__tests__/serial/worktree.test.js +24 -198
  110. package/dist/core/__tests__/session-cycles.test.js +22 -0
  111. package/dist/core/__tests__/stop-guard.test.js +4 -4
  112. package/dist/core/__tests__/watchdog-abort-arms-retry.test.js +19 -4
  113. package/dist/core/bash-jobs.d.ts +6 -0
  114. package/dist/core/bash-jobs.js +10 -0
  115. package/dist/core/canvas/__tests__/attention.test.js +8 -5
  116. package/dist/core/canvas/__tests__/render-remote.test.js +5 -5
  117. package/dist/core/canvas/attention.js +8 -6
  118. package/dist/core/canvas/browse/model.d.ts +8 -2
  119. package/dist/core/canvas/browse/model.js +11 -4
  120. package/dist/core/canvas/canvas.d.ts +7 -0
  121. package/dist/core/canvas/canvas.js +37 -0
  122. package/dist/core/canvas/crons.d.ts +9 -0
  123. package/dist/core/canvas/crons.js +51 -0
  124. package/dist/core/canvas/node-order.d.ts +22 -1
  125. package/dist/core/canvas/node-order.js +26 -1
  126. package/dist/core/canvas/render-source.d.ts +5 -0
  127. package/dist/core/canvas/render-source.js +1 -0
  128. package/dist/core/canvas/types.d.ts +9 -3
  129. package/dist/core/command-plugins/bundle.d.ts +6 -1
  130. package/dist/core/command-plugins/bundle.js +26 -13
  131. package/dist/core/command.js +2 -1
  132. package/dist/core/config.d.ts +47 -1
  133. package/dist/core/config.js +137 -4
  134. package/dist/core/help.js +1 -1
  135. package/dist/core/human/__tests__/page-catalog.test.js +4 -0
  136. package/dist/core/human/__tests__/page-tickets.test.js +65 -52
  137. package/dist/core/human/__tests__/page.test.js +56 -98
  138. package/dist/core/human/__tests__/serial/inbox-core.test.js +6 -6
  139. package/dist/core/human/answer-text.js +3 -3
  140. package/dist/core/human/answer.d.ts +6 -4
  141. package/dist/core/human/answer.js +4 -10
  142. package/dist/core/human/component-docs.d.ts +11 -7
  143. package/dist/core/human/component-docs.js +361 -88
  144. package/dist/core/human/convention.d.ts +17 -3
  145. package/dist/core/human/convention.js +36 -5
  146. package/dist/core/human/feedback-companion.d.ts +20 -0
  147. package/dist/core/human/feedback-companion.js +98 -0
  148. package/dist/core/human/feedback.d.ts +65 -0
  149. package/dist/core/human/feedback.js +116 -0
  150. package/dist/core/human/page-catalog.d.ts +40 -5
  151. package/dist/core/human/page-catalog.js +102 -30
  152. package/dist/core/human/page-errors.d.ts +4 -0
  153. package/dist/core/human/page-errors.js +7 -0
  154. package/dist/core/human/page-eval.d.ts +20 -0
  155. package/dist/core/human/page-eval.js +123 -0
  156. package/dist/core/human/page-schema.d.ts +23 -191
  157. package/dist/core/human/page-schema.js +60 -89
  158. package/dist/core/human/page-synth.d.ts +1 -1
  159. package/dist/core/human/page-synth.js +15 -18
  160. package/dist/core/human/page.d.ts +12 -27
  161. package/dist/core/human/page.js +142 -474
  162. package/dist/core/human/root.d.ts +6 -2
  163. package/dist/core/human/root.js +12 -4
  164. package/dist/core/human/scan.d.ts +3 -4
  165. package/dist/core/human/scan.js +16 -15
  166. package/dist/core/human/summary.d.ts +1 -2
  167. package/dist/core/human/summary.js +2 -2
  168. package/dist/core/human/tickets.d.ts +20 -14
  169. package/dist/core/human/tickets.js +91 -31
  170. package/dist/core/human/types.d.ts +10 -2
  171. package/dist/core/preview-registry.js +8 -10
  172. package/dist/core/profiles/default-binding.d.ts +4 -0
  173. package/dist/core/profiles/default-binding.js +24 -0
  174. package/dist/core/profiles/deletion-reservation.d.ts +8 -0
  175. package/dist/core/profiles/deletion-reservation.js +38 -0
  176. package/dist/core/profiles/manifest.d.ts +3 -0
  177. package/dist/core/profiles/manifest.js +12 -0
  178. package/dist/core/profiles/select.js +2 -2
  179. package/dist/core/review/realize.js +3 -3
  180. package/dist/core/review/store.d.ts +6 -0
  181. package/dist/core/review/store.js +31 -0
  182. package/dist/core/runtime/bearings.d.ts +0 -4
  183. package/dist/core/runtime/bearings.js +4 -62
  184. package/dist/core/runtime/bin-contributions.d.ts +44 -0
  185. package/dist/core/runtime/bin-contributions.js +186 -0
  186. package/dist/core/runtime/broker/client-registry.d.ts +4 -0
  187. package/dist/core/runtime/broker/client-registry.js +13 -1
  188. package/dist/core/runtime/broker/extension-abort.d.ts +1 -1
  189. package/dist/core/runtime/broker/extension-abort.js +4 -2
  190. package/dist/core/runtime/broker/fault-retry.js +4 -0
  191. package/dist/core/runtime/broker/frame-dispatch.d.ts +3 -1
  192. package/dist/core/runtime/broker/frame-dispatch.js +5 -6
  193. package/dist/core/runtime/broker/read-ops.d.ts +1 -1
  194. package/dist/core/runtime/broker/read-ops.js +2 -2
  195. package/dist/core/runtime/broker/rebind.d.ts +1 -0
  196. package/dist/core/runtime/broker/rebind.js +6 -1
  197. package/dist/core/runtime/broker-extension-render.js +19 -0
  198. package/dist/core/runtime/broker-protocol.d.ts +14 -0
  199. package/dist/core/runtime/broker.d.ts +1 -1
  200. package/dist/core/runtime/broker.js +17 -6
  201. package/dist/core/runtime/front-door-env.d.ts +5 -0
  202. package/dist/core/runtime/front-door-env.js +16 -0
  203. package/dist/core/runtime/front-door.d.ts +1 -5
  204. package/dist/core/runtime/front-door.js +2 -5
  205. package/dist/core/runtime/host.d.ts +1 -1
  206. package/dist/core/runtime/invocation.d.ts +6 -0
  207. package/dist/core/runtime/invocation.js +10 -0
  208. package/dist/core/runtime/kickoff.js +34 -0
  209. package/dist/core/runtime/launch.d.ts +2 -6
  210. package/dist/core/runtime/node-read.js +4 -1
  211. package/dist/core/runtime/nodes.js +2 -0
  212. package/dist/core/runtime/promote.d.ts +1 -0
  213. package/dist/core/runtime/promote.js +3 -1
  214. package/dist/core/runtime/session-cycles.d.ts +6 -0
  215. package/dist/core/runtime/session-cycles.js +15 -1
  216. package/dist/core/runtime/session-visibility.d.ts +17 -8
  217. package/dist/core/runtime/session-visibility.js +19 -10
  218. package/dist/core/runtime/spawn-env.d.ts +9 -1
  219. package/dist/core/runtime/spawn-env.js +62 -2
  220. package/dist/core/runtime/stop-guard.d.ts +2 -2
  221. package/dist/core/runtime/stop-guard.js +2 -2
  222. package/dist/core/runtime/stop-signals.d.ts +1 -1
  223. package/dist/core/runtime/stop-signals.js +2 -2
  224. package/dist/core/runtime/tmux-bindings.js +1 -1
  225. package/dist/core/session-model/session-state.d.ts +4 -3
  226. package/dist/core/session-model/session-state.js +14 -1
  227. package/dist/core/user-settings.d.ts +21 -2
  228. package/dist/core/user-settings.js +32 -11
  229. package/dist/core/worktree.d.ts +15 -45
  230. package/dist/core/worktree.js +59 -261
  231. package/dist/daemon/api/__tests__/seam/profile-delete.test.d.ts +1 -0
  232. package/dist/daemon/api/__tests__/seam/profile-delete.test.js +386 -0
  233. package/dist/daemon/api/handlers/bash-jobs.js +1 -1
  234. package/dist/daemon/api/handlers/broker-ops.js +9 -5
  235. package/dist/daemon/api/handlers/feedback-comments.d.ts +2 -0
  236. package/dist/daemon/api/handlers/feedback-comments.js +207 -0
  237. package/dist/daemon/api/handlers/human.js +24 -20
  238. package/dist/daemon/api/handlers/inbox.d.ts +10 -0
  239. package/dist/daemon/api/handlers/inbox.js +39 -115
  240. package/dist/daemon/api/handlers/profiles.js +11 -29
  241. package/dist/daemon/api/map.d.ts +6 -1
  242. package/dist/daemon/api/map.js +23 -0
  243. package/dist/daemon/api/server.js +3 -1
  244. package/dist/daemon/companion-retire.d.ts +2 -0
  245. package/dist/daemon/companion-retire.js +33 -0
  246. package/dist/daemon/cron-run.js +14 -16
  247. package/dist/daemon/human/finish.d.ts +12 -7
  248. package/dist/daemon/human/finish.js +101 -38
  249. package/dist/daemon/human/sweep.js +5 -1
  250. package/dist/daemon/profile-delete.d.ts +7 -0
  251. package/dist/daemon/profile-delete.js +306 -0
  252. package/dist/daemon/reconcilers/broker-supervision.js +3 -1
  253. package/dist/daemon/review/deliver.js +3 -3
  254. package/dist/daemon/review/finish.d.ts +0 -2
  255. package/dist/daemon/review/finish.js +1 -29
  256. package/dist/pi-extensions/__tests__/canvas-bash-valve.test.js +56 -1
  257. package/dist/pi-extensions/__tests__/canvas-stophook-agentend.test.js +4 -4
  258. package/dist/pi-extensions/canvas-bash-valve.js +19 -5
  259. package/dist/pi-extensions/canvas-inbox-watcher.js +1 -1
  260. package/dist/pi-extensions/canvas-review-boundary.d.ts +4 -0
  261. package/dist/pi-extensions/canvas-review-boundary.js +18 -9
  262. package/dist/pi-extensions/canvas-stophook.js +4 -4
  263. package/dist/shared/generated-context.js +2 -2
  264. package/dist/types.d.ts +44 -2
  265. package/dist/types.js +7 -2
  266. package/package.json +6 -5
  267. package/runtime.lock.json +5 -33
  268. package/dist/builtin-memory/init.md +0 -38
  269. package/dist/builtin-memory/plan.md +0 -19
  270. package/dist/builtin-memory/spec.md +0 -19
  271. package/dist/commands/human/doc.d.ts +0 -2
  272. package/dist/commands/human/doc.js +0 -91
  273. package/dist/commands/human/html.js +0 -81
  274. package/dist/commands/human/inbox.d.ts +0 -2
  275. package/dist/core/human/__tests__/html-markdown.test.js +0 -52
  276. package/dist/core/human/__tests__/page-render.test.js +0 -66
  277. package/dist/core/human/html-markdown.d.ts +0 -3
  278. package/dist/core/human/html-markdown.js +0 -288
  279. package/dist/core/human/page-render.d.ts +0 -4
  280. package/dist/core/human/page-render.js +0 -105
  281. package/dist/pages/bundle.css +0 -1
  282. package/dist/pages/bundle.js +0 -1778
  283. package/dist/pages/comments.d.ts +0 -72
  284. package/dist/pages/comments.js +0 -176
  285. package/dist/pages/controls.d.ts +0 -98
  286. package/dist/pages/controls.js +0 -261
  287. package/dist/pages/elements/cards.d.ts +0 -28
  288. package/dist/pages/elements/cards.js +0 -915
  289. package/dist/pages/elements/chart.d.ts +0 -23
  290. package/dist/pages/elements/chart.js +0 -664
  291. package/dist/pages/elements/options.d.ts +0 -30
  292. package/dist/pages/elements/options.js +0 -742
  293. package/dist/pages/elements/pages.d.ts +0 -30
  294. package/dist/pages/elements/pages.js +0 -377
  295. package/dist/pages/elements/slot.d.ts +0 -26
  296. package/dist/pages/elements/slot.js +0 -112
  297. package/dist/pages/elements/table.d.ts +0 -36
  298. package/dist/pages/elements/table.js +0 -1043
  299. package/dist/pages/elements/text.d.ts +0 -31
  300. package/dist/pages/elements/text.js +0 -1175
  301. package/dist/pages/entry.d.ts +0 -8
  302. package/dist/pages/entry.js +0 -8
  303. package/dist/pages/host.d.ts +0 -134
  304. package/dist/pages/host.js +0 -165
  305. package/dist/pages/readonly.d.ts +0 -24
  306. package/dist/pages/readonly.js +0 -31
  307. package/dist/pages/register.d.ts +0 -2
  308. package/dist/pages/register.js +0 -3
  309. package/dist/pages/responses.d.ts +0 -37
  310. package/dist/pages/responses.js +0 -56
  311. package/dist/pages/slot-config.d.ts +0 -36
  312. package/dist/pages/slot-config.js +0 -50
  313. package/dist/pages/types.d.ts +0 -98
  314. package/dist/pages/types.js +0 -23
  315. /package/dist/{core/human/__tests__/html-markdown.test.d.ts → commands/__tests__/node-message.test.d.ts} +0 -0
  316. /package/dist/core/{human/__tests__/page-render.test.d.ts → __tests__/plugin-page-components.test.d.ts} +0 -0
@@ -1,1778 +0,0 @@
1
- "use strict";(()=>{function L(n){return n!==void 0}function W(n){switch(n.kind){case"whole":return"whole";case"option":return`option:${n.optionId}`;case"row":return`row:${n.rowId}`;case"column":return`column:${n.columnId}`;case"card":return`card:${n.cardId}`;case"range":return`range:${n.start}:${n.end}`}}function y(n,t){let e=W(t);return n.find(r=>W(r.anchor)===e)}function z(n,t,e){let r=W(t),o=n.filter(s=>W(s.anchor)!==r),a=e.trim();if(a==="")return o;let i=n.find(s=>W(s.anchor)===r);return[...o,{id:i?.id??se(),anchor:t,text:a}]}var et=0;function ie(n){if(typeof n!="object"||n===null)return!1;let t=n;switch(t.kind){case"whole":return!0;case"option":return typeof t.optionId=="string";case"row":return typeof t.rowId=="string";case"column":return typeof t.columnId=="string";case"card":return typeof t.cardId=="string";case"range":return typeof t.start=="number"&&typeof t.end=="number"&&typeof t.quote=="string";default:return!1}}function O(n){if(!Array.isArray(n))return[];let t=[];for(let e of n){if(typeof e!="object"||e===null)continue;let{id:r,anchor:o,text:a}=e;if(typeof r!="string"||r===""||typeof a!="string"||a.trim()===""||!ie(o)||y(t,o)!==void 0)continue;t.push({id:r,anchor:{...o},text:a});let i=/^c(\d+)$/.exec(r);i!==null&&(et=Math.max(et,Number(i[1])))}return t}function se(){return et+=1,`c${et}`}var ce=84,le=48,de=30;function he(n){let t=n.lastIndexOf(" ");return(t>0&&t>=n.length-12?n.slice(0,t):n).trimEnd()}function me(n){let t=n.indexOf(" ");return(t!==-1&&t<12?n.slice(t+1):n).trimStart()}function Ht(n){let t=n.replace(/\s+/gu," ").trim();return t.length<=ce?t:`${he(t.slice(0,le))} \u2026 ${me(t.slice(-de))}`}function st(n){switch(n.kind){case"whole":return"this";case"range":return`\u201C${n.quote}\u201D`;default:return W(n)}}var zt=`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")`,Ot=`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")`;function x(n,t=""){return n.map(e=>`${e}${t}`).join(`,
2
- `)}function ct(n){let t=n[0];return typeof t=="object"?[t.scope,n.slice(1)]:[null,n]}function I(n,t,e){return(r,o)=>{let a=`var(--crtr-${t}-${r}, ${o})`;return n===null?a:`var(--crtr-${e===""?`${n}-${r}`:`${n}-${e}-${r}`}, ${a})`}}function lt(n){let t=I(n,"control-focus","focus"),e=t("ring-width","0.1875rem"),r=t("ring-color","color-mix(in srgb, var(--crtr-color-focus, CanvasText) 25%, transparent)");return`
3
- outline: ${t("outline","none")};
4
- border-color: ${t("border-color","color-mix(in srgb, var(--crtr-color-focus, CanvasText) 60%, transparent)")};
5
- box-shadow: ${t("ring",`0 0 0 ${e}
6
- ${r}`)};`}function u(...n){let[t,e]=ct(n);return`
7
- ${x(e,":focus-visible")} {${lt(t)}
8
- }
9
- `}function S(...n){let[t,e]=ct(n),r=I(t,"control-writing",""),a=I(t,"control","")("transition","120ms ease");return`
10
- ${x(e)} {
11
- /* Block, not the UA's inline-block: a full-width field on its own line would otherwise sit
12
- in a line box and carry a descender's worth of dead space under it. */
13
- display: block;
14
- box-sizing: border-box;
15
- width: 100%;
16
- padding: ${r("padding","var(--crtr-space-2) var(--crtr-space-3)")};
17
- color: ${r("text-color","var(--crtr-color-text, CanvasText)")};
18
- font: ${r("font","inherit")};
19
- line-height: ${r("line-height","var(--crtr-line-height, 1.5)")};
20
- background: ${r("fill","color-mix(in srgb, var(--crtr-color-text, CanvasText) 2%, var(--crtr-color-background, Canvas))")};
21
- border: ${r("border-width","1px")} ${r("border-style","solid")} ${r("border-color","var(--crtr-color-border, CanvasText)")};
22
- border-radius: ${r("radius","var(--crtr-radius-small)")};
23
- box-shadow: ${r("shadow","var(--crtr-shadow)")};
24
- transition: border-color ${a}, box-shadow ${a};
25
- }
26
-
27
- ${x(e,"::placeholder")} {
28
- color: ${r("placeholder-color","var(--crtr-color-text-muted, GrayText)")};
29
- }
30
-
31
- ${x(e,":focus-visible")} {${lt(t)}
32
- }
33
-
34
- /* A page that can no longer take an answer keeps its text selectable and copyable, and drops
35
- the affordances that say it could still be rewritten. */
36
- ${x(e,":read-only")} {
37
- background: ${r("readonly-fill","var(--crtr-color-surface, Canvas)")};
38
- box-shadow: ${r("readonly-shadow","none")};
39
- resize: none;
40
- }
41
- `}function F(...n){let[t,e]=ct(n),r=I(t,"control-box",""),o=I(t,"control-mark","mark"),a=I(t,"control-radio","radio"),i=I(t,"control-checkbox","checkbox"),s=I(t,"control",""),c=s("transition","120ms ease");return`
42
- ${x(e)} {
43
- /* The box tracks the host's font token like every other size in the bundle. The kit's
44
- control is 16px against 14px text; these ratios are that pair, kept proportional. */
45
- --control-box: ${r("size","1.125em")};
46
- appearance: none;
47
- -webkit-appearance: none;
48
- box-sizing: border-box;
49
- display: inline-grid;
50
- place-content: center;
51
- flex: none;
52
- width: var(--control-box);
53
- height: var(--control-box);
54
- margin: 0;
55
- padding: 0;
56
- vertical-align: middle;
57
- /* Transparent rather than the background token, so an empty control on a selected row
58
- carries that row's tint the way the kit's does. */
59
- background: ${r("fill","transparent")};
60
- border: ${r("border-width","1px")} ${r("border-style","solid")} ${r("border-color","var(--crtr-color-border, CanvasText)")};
61
- border-radius: ${r("radius","calc(var(--control-box) * 0.25)")};
62
- box-shadow: ${r("shadow","var(--crtr-shadow)")};
63
- cursor: pointer;
64
- transition: background-color ${c}, border-color ${c}, box-shadow ${c};
65
- }
66
-
67
- ${x(e,'[type="radio"]')} {
68
- border-radius: ${a("radius","50%")};
69
- }
70
-
71
- /* The mark. It is always present and always centred; selecting scales it in, which is the
72
- state change the kit animates too. */
73
- ${x(e,"::before")} {
74
- content: "";
75
- background: ${o("fill","currentColor")};
76
- transform: scale(0);
77
- transition: transform ${c};
78
- }
79
-
80
- ${x(e,":checked::before")},
81
- ${x(e,":indeterminate::before")} {
82
- transform: scale(1);
83
- }
84
-
85
- /* A radio keeps its own surface and marks itself with a dot in the accent; a checkbox fills
86
- with the accent and carries the tick in the accent's contrast colour. */
87
- ${x(e,'[type="radio"]::before')} {
88
- width: ${a("mark-size","calc(var(--control-box) * 0.5)")};
89
- height: ${a("mark-size","calc(var(--control-box) * 0.5)")};
90
- border-radius: ${a("mark-radius","50%")};
91
- color: ${a("mark-color","var(--crtr-color-accent, CanvasText)")};
92
- }
93
-
94
- ${x(e,'[type="radio"]:checked')} {
95
- border-color: ${a("checked-border-color","var(--crtr-color-accent, CanvasText)")};
96
- }
97
-
98
- ${x(e,'[type="checkbox"]::before')} {
99
- width: ${i("mark-size","calc(var(--control-box) * 0.875)")};
100
- height: ${i("mark-size","calc(var(--control-box) * 0.875)")};
101
- color: ${i("mark-color","var(--crtr-color-accent-contrast, Canvas)")};
102
- -webkit-mask: ${i("mark-image",zt)} ${i("mark-layout","center / contain no-repeat")};
103
- mask: ${i("mark-image",zt)} ${i("mark-layout","center / contain no-repeat")};
104
- }
105
-
106
- ${x(e,'[type="checkbox"]:indeterminate::before')} {
107
- -webkit-mask-image: ${i("indeterminate-mark-image",Ot)};
108
- mask-image: ${i("indeterminate-mark-image",Ot)};
109
- }
110
-
111
- ${x(e,'[type="checkbox"]:checked')},
112
- ${x(e,'[type="checkbox"]:indeterminate')} {
113
- background: ${i("checked-fill","var(--crtr-color-accent, CanvasText)")};
114
- border-color: ${i("checked-border-color","var(--crtr-color-accent, CanvasText)")};
115
- }
116
-
117
- /* The bundle's one focus treatment. The box scales with the font token, but the ring does
118
- not: the kit's is a flat three pixels on a checkbox and on the field beside it alike. */
119
- ${x(e,"[type]:focus-visible")} {${lt(t)}
120
- }
121
-
122
- /* A page that can no longer take an answer keeps its selection legible \u2014 the mark stays the
123
- accent, only dimmed \u2014 and drops every affordance that says it could still be changed. */
124
- ${x(e,":disabled")} {
125
- opacity: ${s("disabled-opacity","0.5")};
126
- box-shadow: ${s("disabled-shadow","none")};
127
- cursor: default;
128
- }
129
- `}function dt(){return typeof window>"u"?void 0:window.crtr}function pe(n){if(n instanceof Error&&n.message!=="")return n.message;let t=String(n);return t===""?"unknown error":t}function ue(n){return{status:"unavailable",reason:`host bridge does not provide ${n}()`}}function M(n,t){let e=dt();if(typeof e?.respond!="function")return ue("respond");try{return e.respond(n,t),{status:"ok"}}catch(r){return{status:"failed",reason:pe(r)}}}function N(n){let t=dt();if(typeof t?.savedResponse=="function")try{let e=t.savedResponse(n);return typeof e=="object"&&e!==null&&!Array.isArray(e)?e:void 0}catch{return}}function q(n){return Array.isArray(n)?n.filter(t=>typeof t=="string"):[]}async function It(n,t,e){let r=dt();if(typeof r?.mountWorkspaceComponent!="function")return"unavailable";try{return await r.mountWorkspaceComponent(n,t,e)}catch{return"unavailable"}}function f(n){return n.closest("[inert], crtr-pages[disabled]")!==null}function j(n,t){for(let e of n.querySelectorAll("input"))e.disabled=t;for(let e of n.querySelectorAll("textarea"))e.readOnly=t}function w(n,t){customElements.define(n,t)}var ht=new Map;function B(n,t,e){ht.set(t,{element:n,read:e})}function Nt(){for(let[n,t]of[...ht]){if(!t.element.isConnected){ht.delete(n);continue}let e;try{e=t.read()}catch{continue}M(n,e)}}function T(n){let t=n.querySelector('script[type="application/json"]');if(t===null)return{status:"invalid",reason:"slot has no application/json config"};let e=t.textContent??"";if(e.trim()==="")return{status:"invalid",reason:"slot config is empty"};let r;try{r=JSON.parse(e)}catch(o){return{status:"invalid",reason:`slot config is not valid JSON: ${o instanceof Error&&o.message!==""?o.message:"invalid JSON"}`}}return typeof r!="object"||r===null||Array.isArray(r)?{status:"invalid",reason:"slot config must be a JSON object"}:{status:"ok",config:r}}function D(n){let t=n.getAttribute("slot-id")?.trim();return t===void 0||t===""?void 0:t}var ve='<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z"/><path d="M8 5.5v3M6.5 7h3"/></svg>',fe='<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z"/><path d="M5 6.25h6M5 8.25h4"/></svg>',jt=`
130
- :host {
131
- display: block;
132
- }
133
-
134
- [part="container"] {
135
- display: grid;
136
- gap: var(--crtr-options-container-gap, var(--crtr-space-3));
137
- }
138
-
139
- /* The question reads as the agent's own prose above its control, matching the table's
140
- caption rather than shouting over the options it introduces. */
141
- [part="label"] {
142
- margin: var(--crtr-options-label-margin, 0);
143
- color: var(--crtr-options-label-text-color, var(--crtr-color-text-muted));
144
- }
145
-
146
- [part="list"] {
147
- display: grid;
148
- gap: var(--crtr-options-list-gap, var(--crtr-space-2));
149
- }
150
-
151
- [part="option"] {
152
- position: relative;
153
- display: flex;
154
- align-items: flex-start;
155
- gap: var(--crtr-options-option-gap, var(--crtr-space-3));
156
- padding: var(--crtr-options-option-padding, var(--crtr-space-2) var(--crtr-space-3));
157
- background: var(--crtr-options-option-fill, var(--crtr-color-surface));
158
- border: var(--crtr-options-option-border-width, 1px)
159
- var(--crtr-options-option-border-style, solid)
160
- var(--crtr-options-option-border-color, var(--crtr-color-border));
161
- border-radius: var(--crtr-options-option-radius, var(--crtr-radius-medium));
162
- transition: background-color var(--crtr-options-option-transition, 120ms ease),
163
- border-color var(--crtr-options-option-transition, 120ms ease);
164
- }
165
-
166
- [part="option"]:hover,
167
- [part="option"][data-active="true"] {
168
- background: var(--crtr-options-option-hover-fill, var(--crtr-color-surface-hover));
169
- }
170
-
171
- [part="option"][data-selected="true"] {
172
- border-color: var(
173
- --crtr-options-option-selected-border-color,
174
- color-mix(in srgb, var(--crtr-color-accent) 45%, transparent)
175
- );
176
- background: var(
177
- --crtr-options-option-selected-fill,
178
- color-mix(in srgb, var(--crtr-color-accent) 10%, transparent)
179
- );
180
- }
181
-
182
- [part="option"][data-selected="true"]:hover,
183
- [part="option"][data-selected="true"][data-active="true"] {
184
- background: var(
185
- --crtr-options-option-selected-hover-fill,
186
- color-mix(in srgb, var(--crtr-color-accent) 14%, transparent)
187
- );
188
- }
189
-
190
- /* A page that can no longer take an answer keeps its selection legible and drops every
191
- affordance that says it could still be changed. */
192
- [part="option"]:has([part="option-control"]:disabled) [part="option-label"] {
193
- cursor: default;
194
- }
195
-
196
- [part="option-label"] {
197
- display: flex;
198
- flex: 1;
199
- align-items: flex-start;
200
- gap: var(--crtr-options-option-label-gap, var(--crtr-space-3));
201
- cursor: pointer;
202
- }
203
-
204
- ${F({scope:"options-option-control"},'[part="option-control"]')}
205
-
206
- /* Centred on the first line of the label rather than on its box, so a two-line option keeps
207
- the control beside the title. Half the difference between a 1.5 line box and the control. */
208
- [part="option-control"] {
209
- margin-top: var(--crtr-options-option-control-offset, 0.1875em);
210
- }
211
-
212
- [part="option-text"] {
213
- display: grid;
214
- gap: var(--crtr-options-option-text-gap, var(--crtr-space-1));
215
- }
216
-
217
- [part="option-title"] {
218
- font-weight: var(--crtr-options-option-title-font-weight, 500);
219
- }
220
-
221
- [part="option-description"] {
222
- color: var(--crtr-options-option-description-text-color, var(--crtr-color-text-muted));
223
- font-size: var(--crtr-options-option-description-font-size, 0.875em);
224
- }
225
-
226
- /* The trigger stays in the row's anatomy while quiet, then its state rule below reveals it.
227
- A host can choose how quiet and how bright those states are independently; the transition
228
- remains one knob because all three properties are one reveal. */
229
- [part="comment"] {
230
- display: inline-flex;
231
- align-items: center;
232
- justify-content: center;
233
- flex: none;
234
- width: var(--crtr-options-comment-size, 1.5em);
235
- height: var(--crtr-options-comment-size, 1.5em);
236
- padding: var(--crtr-options-comment-padding, 0);
237
- color: var(--crtr-options-comment-text-color, var(--crtr-color-text-muted));
238
- background: var(--crtr-options-comment-fill, transparent);
239
- border: var(--crtr-options-comment-border-width, 1px)
240
- var(--crtr-options-comment-border-style, solid)
241
- var(--crtr-options-comment-border-color, transparent);
242
- border-radius: var(--crtr-options-comment-radius, var(--crtr-radius-small));
243
- opacity: var(--crtr-options-comment-opacity, 0);
244
- cursor: pointer;
245
- transition: opacity var(--crtr-options-comment-transition, var(--crtr-control-transition, 120ms ease)),
246
- color var(--crtr-options-comment-transition, var(--crtr-control-transition, 120ms ease)),
247
- background-color var(--crtr-options-comment-transition, var(--crtr-control-transition, 120ms ease));
248
- }
249
-
250
- [part="option"]:hover [part="comment"],
251
- [part="option"][data-active="true"] [part="comment"],
252
- [part="option"]:focus-within [part="comment"],
253
- [part="comment"][data-state="commented"],
254
- [part="comment"][aria-expanded="true"] {
255
- opacity: var(--crtr-options-comment-visible-opacity, 1);
256
- }
257
-
258
- [part="comment"]:hover {
259
- background: var(--crtr-options-comment-hover-fill, var(--crtr-color-surface-hover));
260
- border-color: var(--crtr-options-comment-hover-border-color, var(--crtr-color-border));
261
- }
262
-
263
- ${u({scope:"options-comment"},'[part="comment"]')}
264
- [part="comment"][data-state="commented"] {
265
- color: var(--crtr-options-comment-commented-text-color, var(--crtr-color-accent));
266
- }
267
-
268
- [part="comment"] svg {
269
- width: var(--crtr-options-comment-icon-size, 0.875em);
270
- height: var(--crtr-options-comment-icon-size, 0.875em);
271
- fill: var(--crtr-options-comment-icon-fill, none);
272
- stroke: var(--crtr-options-comment-icon-stroke-color, currentColor);
273
- stroke-width: var(--crtr-options-comment-icon-stroke-width, 1.25);
274
- stroke-linecap: var(--crtr-options-comment-icon-stroke-cap, round);
275
- stroke-linejoin: var(--crtr-options-comment-icon-stroke-join, round);
276
- }
277
-
278
- [part="comment-popover"] {
279
- position: absolute;
280
- top: calc(100% + var(--crtr-options-comment-popover-offset, var(--crtr-space-1)));
281
- right: 0;
282
- z-index: 2;
283
- display: grid;
284
- gap: var(--crtr-options-comment-popover-gap, var(--crtr-space-2));
285
- width: var(--crtr-options-comment-popover-width, min(20em, 100%));
286
- padding: var(--crtr-options-comment-popover-padding, var(--crtr-space-3));
287
- background: var(--crtr-options-comment-popover-fill, var(--crtr-color-background));
288
- border: var(--crtr-options-comment-popover-border-width, 1px)
289
- var(--crtr-options-comment-popover-border-style, solid)
290
- var(--crtr-options-comment-popover-border-color, var(--crtr-color-border));
291
- border-radius: var(--crtr-options-comment-popover-radius, var(--crtr-radius-medium));
292
- box-shadow: var(--crtr-options-comment-popover-shadow, var(--crtr-shadow));
293
- }
294
-
295
- [part="comment-popover"][hidden] {
296
- display: none;
297
- }
298
-
299
- /* The popover's own prose, in the page's voice \u2014 not a caps-mono field label shouting an
300
- option id at someone who just clicked that option. */
301
- [part="comment-subject"] {
302
- margin: var(--crtr-options-comment-subject-margin, 0);
303
- color: var(--crtr-options-comment-subject-text-color, var(--crtr-color-text-muted));
304
- font-size: var(--crtr-options-comment-subject-font-size, 0.875em);
305
- }
306
-
307
- /* Two calls rather than one selector list: a comment box and the freetext box are two things
308
- a person can point at, so each takes its own scope. They still share the family layer
309
- underneath, so they cannot drift apart unless a host parts them on purpose. */
310
- ${S({scope:"options-comment-input"},'[part="comment-input"]')}
311
- ${S({scope:"options-freetext-input"},'[part="freetext-input"]')}
312
- [part="comment-input"] {
313
- min-height: var(--crtr-options-comment-input-min-height, 4.5em);
314
- resize: vertical;
315
- }
316
-
317
- [part="freetext-input"] {
318
- min-height: var(--crtr-options-freetext-input-min-height, 4em);
319
- resize: vertical;
320
- }
321
-
322
- [part="comment-actions"] {
323
- display: flex;
324
- align-items: center;
325
- justify-content: space-between;
326
- gap: var(--crtr-options-comment-actions-gap, var(--crtr-space-2));
327
- }
328
-
329
- [part="comment-hint"] {
330
- color: var(--crtr-options-comment-hint-text-color, var(--crtr-color-text-muted));
331
- font-size: var(--crtr-options-comment-hint-font-size, 0.875em);
332
- }
333
-
334
- /* The two buttons are one shape drawn twice rather than one rule serving two parts, because
335
- a scope that named both would make "the cancel button's fill" unsayable. */
336
- [part="comment-cancel"] {
337
- padding: var(--crtr-options-comment-cancel-padding, var(--crtr-space-1) var(--crtr-space-2));
338
- font: var(--crtr-options-comment-cancel-font, inherit);
339
- font-size: var(--crtr-options-comment-cancel-font-size, 0.875em);
340
- color: var(--crtr-options-comment-cancel-text-color, var(--crtr-color-text-muted));
341
- background: var(--crtr-options-comment-cancel-fill, transparent);
342
- border: var(--crtr-options-comment-cancel-border-width, 1px)
343
- var(--crtr-options-comment-cancel-border-style, solid)
344
- var(--crtr-options-comment-cancel-border-color, transparent);
345
- border-radius: var(--crtr-options-comment-cancel-radius, var(--crtr-radius-small));
346
- cursor: pointer;
347
- transition: color var(--crtr-options-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
348
- background-color var(--crtr-options-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
349
- border-color var(--crtr-options-comment-cancel-transition, var(--crtr-control-transition, 120ms ease));
350
- }
351
-
352
- [part="comment-cancel"]:hover {
353
- color: var(--crtr-options-comment-cancel-hover-text-color, var(--crtr-color-text));
354
- background: var(--crtr-options-comment-cancel-hover-fill, var(--crtr-color-surface-hover));
355
- }
356
-
357
- [part="comment-save"] {
358
- padding: var(--crtr-options-comment-save-padding, var(--crtr-space-1) var(--crtr-space-2));
359
- font: var(--crtr-options-comment-save-font, inherit);
360
- font-size: var(--crtr-options-comment-save-font-size, 0.875em);
361
- color: var(--crtr-options-comment-save-text-color, var(--crtr-color-accent-contrast));
362
- background: var(--crtr-options-comment-save-fill, var(--crtr-color-accent));
363
- border: var(--crtr-options-comment-save-border-width, 1px)
364
- var(--crtr-options-comment-save-border-style, solid)
365
- var(--crtr-options-comment-save-border-color, var(--crtr-color-accent));
366
- border-radius: var(--crtr-options-comment-save-radius, var(--crtr-radius-small));
367
- cursor: pointer;
368
- transition: color var(--crtr-options-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
369
- background-color var(--crtr-options-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
370
- border-color var(--crtr-options-comment-save-transition, var(--crtr-control-transition, 120ms ease));
371
- }
372
-
373
- /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
374
- dark one \u2014 a brightness filter moves the wrong way on one of them. */
375
- [part="comment-save"]:hover {
376
- background: var(
377
- --crtr-options-comment-save-hover-fill,
378
- color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text))
379
- );
380
- border-color: var(
381
- --crtr-options-comment-save-hover-border-color,
382
- color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text))
383
- );
384
- }
385
-
386
- ${u({scope:"options-comment-cancel"},'[part="comment-cancel"]')}
387
- ${u({scope:"options-comment-save"},'[part="comment-save"]')}
388
- [part="freetext"] {
389
- display: grid;
390
- gap: var(--crtr-options-freetext-gap, var(--crtr-space-1));
391
- }
392
-
393
- [part="freetext-label"] {
394
- color: var(--crtr-options-freetext-label-text-color, var(--crtr-color-text-muted));
395
- font-size: var(--crtr-options-freetext-label-font-size, 0.875em);
396
- }
397
-
398
- [part="unavailable"] {
399
- padding: var(--crtr-options-unavailable-padding, var(--crtr-space-3));
400
- color: var(--crtr-options-unavailable-text-color, var(--crtr-color-text-muted));
401
- background: var(--crtr-options-unavailable-fill, var(--crtr-color-surface));
402
- border: var(--crtr-options-unavailable-border-width, 1px)
403
- var(--crtr-options-unavailable-border-style, solid)
404
- var(--crtr-options-unavailable-border-color, var(--crtr-color-border));
405
- border-radius: var(--crtr-options-unavailable-radius, var(--crtr-radius-medium));
406
- }
407
-
408
- [part="reason"] {
409
- color: var(--crtr-options-reason-text-color, var(--crtr-color-text));
410
- font-family: var(--crtr-options-reason-font-family, var(--crtr-font-mono));
411
- }
412
- `,Bt="prompt-label",Dt=0;function ge(n){return n instanceof HTMLTextAreaElement||n instanceof HTMLElement&&n.isContentEditable?!0:n instanceof HTMLInputElement?n.type!=="checkbox"&&n.type!=="radio":!1}var pt=class extends HTMLElement{static observedAttributes=["inert"];#o;#i;#a;#n=new Map;#e=[];#r=[];#t=[];#h;#c;#s;#l=!1;constructor(){super(),this.#o=this.attachShadow({mode:"open"})}connectedCallback(){if(this.#l)return;this.#l=!0,this.#a=D(this);let t=T(this);if(t.status!=="ok"){this.#m(t.reason);return}let e=t.config;if(!Array.isArray(e.options)||e.options.length===0){this.#m("options config lists no options");return}this.#i=e,this.#e=e.options.map(r=>r.id),this.#u(e),this.#a!==void 0&&B(this,this.#a,()=>this.#x()),this.#E(e),this.#v()}disconnectedCallback(){document.removeEventListener("pointerdown",this.#f,!0)}attributeChangedCallback(){this.isConnected&&this.#d()}#d(){let t=f(this);j(this.#o,t),t&&this.#s!==void 0&&this.#w(!1)}#u(t){if(this.#a===void 0)return;let e=N(this.#a);if(e===void 0)return;let r=q(e.selectedOptionIds);this.#r=this.#e.filter(o=>r.includes(o)),t.mode==="single"&&(this.#r=this.#r.slice(0,1)),this.#t=O(e.comments).filter(o=>o.anchor.kind!=="option"||this.#e.includes(o.anchor.optionId)),t.allowFreetext===!0&&typeof e.freetext=="string"&&e.freetext!==""&&(this.#h=e.freetext)}#m(t){let e=document.createElement("style");e.textContent=jt;let r=document.createElement("div");r.part.add("unavailable"),r.setAttribute("role","status");let o=document.createElement("span");o.part.add("reason"),o.textContent=t,r.append("Options unavailable: ",o),this.#o.replaceChildren(e,r)}#E(t){let e=document.createElement("style");e.textContent=jt;let r=document.createElement("div");r.part.add("container");let o=t.label!==void 0&&t.label!=="";if(o){let s=document.createElement("p");s.part.add("label"),s.id=Bt,s.textContent=t.label??"",r.append(s)}let a=document.createElement("div");a.part.add("list"),t.mode==="single"?a.setAttribute("role","radiogroup"):o&&a.setAttribute("role","group"),o&&a.setAttribute("aria-labelledby",Bt),Dt+=1;let i=`crtr-options-${Dt}`;for(let s of t.options)a.append(this.#L(t,s,i));r.append(a),t.allowFreetext===!0&&r.append(this.#p(t)),r.addEventListener("keydown",s=>this.#T(s)),this.#o.replaceChildren(e,r)}#L(t,e,r){let o=document.createElement("div");o.part.add("option"),o.dataset.optionId=e.id;let a=document.createElement("label");a.part.add("option-label");let i=document.createElement("input");i.part.add("option-control"),i.type=t.mode==="single"?"radio":"checkbox",i.name=r,i.value=e.id,i.addEventListener("change",()=>this.#S(e.id,i.checked)),i.addEventListener("focus",()=>this.#b(e.id));let s=document.createElement("span");s.part.add("option-text");let c=document.createElement("span");if(c.part.add("option-title"),c.textContent=e.label,s.append(c),e.description!==void 0&&e.description!==""){let h=document.createElement("span");h.part.add("option-description"),h.textContent=e.description,s.append(h)}a.append(i,s);let l=L(this.#a)?this.#g(e):void 0;return o.append(a),l!==void 0&&o.append(l.trigger,l.popover),o.addEventListener("mouseenter",()=>this.#b(e.id)),o.addEventListener("mouseleave",()=>this.#y(e.id)),this.#n.set(e.id,{id:e.id,label:e.label,root:o,control:i,...l===void 0?{}:{comment:l}}),o}#g(t){let e=document.createElement("button");e.part.add("comment"),e.type="button",e.setAttribute("aria-haspopup","dialog"),e.addEventListener("click",()=>{this.#s===t.id?this.#w():this.#A(t.id)});let r=document.createElement("div");r.part.add("comment-popover"),r.setAttribute("role","dialog"),r.hidden=!0;let o=document.createElement("p");o.part.add("comment-subject"),o.textContent=`Comment on ${t.label}`,r.setAttribute("aria-label",o.textContent);let a=document.createElement("textarea");a.part.add("comment-input"),a.placeholder="What should the agent know about this?",a.addEventListener("keydown",g=>{if(g.key==="Enter"&&(g.metaKey||g.ctrlKey)){g.preventDefault(),this.#C(t.id);return}g.key==="Escape"&&(g.preventDefault(),this.#w())});let i=document.createElement("div");i.part.add("comment-actions");let s=document.createElement("span");s.part.add("comment-hint");let c=document.createElement("span"),l=document.createElement("button");l.part.add("comment-cancel"),l.type="button",l.textContent="Cancel",l.addEventListener("click",()=>this.#w());let h=document.createElement("button");return h.part.add("comment-save"),h.type="button",h.textContent="Save",h.addEventListener("click",()=>this.#C(t.id)),c.append(l,h),i.append(s,c),r.append(o,a,i),{trigger:e,popover:r,input:a,hint:s}}#p(t){let e=document.createElement("label");e.part.add("freetext");let r=document.createElement("span");r.part.add("freetext-label"),r.textContent=t.freetextLabel??"Something else";let o=document.createElement("textarea");return o.part.add("freetext-input"),o.placeholder=t.freetextPlaceholder??"Answer in your own words\u2026",this.#h!==void 0&&(o.value=this.#h),o.addEventListener("input",()=>{this.#h=o.value===""?void 0:o.value,this.#k()}),e.append(r,o),e}#T(t){if(t.metaKey||t.ctrlKey||t.altKey||ge(t.target))return;let e=t.key.toLowerCase(),r=this.#c??this.#r.at(-1)??this.#e[0];if(r!==void 0){if(e==="j"||e==="k"){t.preventDefault();let o=Math.max(0,this.#e.indexOf(r)),a=e==="j"?1:-1,i=this.#e[(o+a+this.#e.length)%this.#e.length];this.#b(i),this.#n.get(i)?.control.focus();return}if(e==="x"){t.preventDefault();let o=this.#r.includes(r);this.#S(r,this.#i?.mode==="single"?!0:!o);return}e==="c"&&(t.preventDefault(),this.#A(r))}}#b(t){this.#c!==t&&(this.#c=t,this.#v())}#y(t){this.#c===t&&(this.#c=void 0,this.#v())}#S(t,e){if(!(this.#i===void 0||f(this))){if(this.#i.mode==="single")this.#r=[t];else{let r=e?[...this.#r,t]:this.#r.filter(o=>o!==t);this.#r=this.#e.filter(o=>r.includes(o))}this.#b(t),this.#v(),this.#k()}}#f=t=>{if(this.#s===void 0)return;let e=this.#n.get(this.#s)?.comment;if(e===void 0)return;let r=t.composedPath();r.includes(e.popover)||r.includes(e.trigger)||this.#w(!1)};#A(t){let e=this.#n.get(t)?.comment;e===void 0||f(this)||(this.#s===void 0&&document.addEventListener("pointerdown",this.#f,!0),this.#s=t,this.#c=t,e.input.value=y(this.#t,mt(t))?.text??"",this.#v(),e.input.focus())}#w(t=!0){if(this.#s===void 0)return;let e=this.#n.get(this.#s)?.comment;this.#s=void 0,document.removeEventListener("pointerdown",this.#f,!0),this.#v(),t&&e?.trigger.focus()}#C(t){let e=this.#n.get(t)?.comment;e===void 0||f(this)||(this.#t=z(this.#t,mt(t),e.input.value),this.#w(),this.#k())}#v(){for(let t of this.#n.values()){let e=this.#r.includes(t.id);t.control.checked=e,t.root.dataset.selected=String(e),t.root.dataset.active=String(this.#c===t.id);let r=t.comment;if(r===void 0)continue;let o=y(this.#t,mt(t.id));r.trigger.dataset.state=o===void 0?"empty":"commented",r.trigger.innerHTML=o===void 0?ve:fe,r.trigger.setAttribute("aria-label",o===void 0?`Comment on ${t.label}`:`Edit comment on ${t.label}`);let a=this.#s===t.id;r.trigger.setAttribute("aria-expanded",String(a)),r.popover.hidden=!a,r.hint.textContent=o===void 0?"\u2318\u21B5 to save":"empty to delete"}this.#d()}#x(){let t={selectedOptionIds:[...this.#r],comments:this.#t.map(e=>({...e}))};return this.#i?.allowFreetext===!0&&this.#h!==void 0&&(t.freetext=this.#h),t}#k(){this.#a!==void 0&&M(this.#a,this.#x())}};function mt(n){return{kind:"option",optionId:n}}w("crtr-options",pt);var ut={kind:"whole"},U="the whole passage",J="the selected text",rt=6,Ft="comment-popover",Pt="prompt-label",be=`
413
- :host {
414
- display: block;
415
- }
416
-
417
- [part="container"] {
418
- position: relative;
419
- display: grid;
420
- gap: var(--crtr-text-container-gap, var(--crtr-space-2));
421
- }
422
-
423
- /* The prompt reads as the agent's own prose above the passage, matching the table's
424
- caption rather than shouting over the text it introduces. */
425
- [part="label"] {
426
- margin: var(--crtr-text-label-margin, 0);
427
- color: var(--crtr-text-label-text-color, var(--crtr-color-text-muted));
428
- }
429
-
430
- [part="toolbar"] {
431
- display: flex;
432
- flex-wrap: wrap;
433
- align-items: center;
434
- justify-content: flex-end;
435
- gap: var(--crtr-text-toolbar-gap, var(--crtr-space-2));
436
- }
437
-
438
- [part="edited"] {
439
- padding: var(--crtr-text-edited-padding, 0 var(--crtr-space-2));
440
- color: var(--crtr-text-edited-text-color, var(--crtr-color-accent));
441
- background: var(--crtr-text-edited-fill, color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
442
- border-radius: var(--crtr-text-edited-radius, var(--crtr-radius-small));
443
- font-family: var(--crtr-text-edited-font-family, var(--crtr-font-mono));
444
- font-size: var(--crtr-text-edited-font-size, 0.75em);
445
- letter-spacing: var(--crtr-text-edited-letter-spacing, 0.06em);
446
- line-height: var(--crtr-text-edited-line-height, 1.7);
447
- text-transform: var(--crtr-text-edited-text-transform, uppercase);
448
- }
449
-
450
- button {
451
- display: inline-flex;
452
- align-items: center;
453
- gap: var(--crtr-text-button-gap, var(--crtr-space-1));
454
- max-width: var(--crtr-text-button-max-width, 100%);
455
- padding: var(--crtr-text-button-padding, var(--crtr-space-1) var(--crtr-space-2));
456
- color: var(--crtr-text-button-text-color, var(--crtr-color-text-muted));
457
- font: var(--crtr-text-button-font, inherit);
458
- background: var(--crtr-text-button-fill, transparent);
459
- border: var(--crtr-text-button-border-width, 1px)
460
- var(--crtr-text-button-border-style, solid)
461
- var(--crtr-text-button-border-color, transparent);
462
- border-radius: var(--crtr-text-button-radius, var(--crtr-radius-small));
463
- cursor: pointer;
464
- /* One motion knob for all three properties, over the family's, because a button that
465
- settles at a different speed than the field beside it is the drift controls.ts exists
466
- to remove. */
467
- transition: color var(--crtr-text-button-transition, var(--crtr-control-transition, 120ms ease)),
468
- background-color var(--crtr-text-button-transition, var(--crtr-control-transition, 120ms ease)),
469
- border-color var(--crtr-text-button-transition, var(--crtr-control-transition, 120ms ease));
470
- }
471
-
472
- button:hover {
473
- color: var(--crtr-text-button-hover-text-color, var(--crtr-color-text));
474
- background: var(--crtr-text-button-hover-fill, var(--crtr-color-surface-hover));
475
- }
476
-
477
- ${u({scope:"text-whole-comment"},'[part~="whole-comment"]')}
478
- ${u({scope:"text-edit-toggle"},'[part="edit-toggle"]')}
479
- ${u({scope:"text-selection-comment"},'[part~="selection-comment"]')}
480
- ${u({scope:"text-comment-chip"},'[part~="comment-chip"]')}
481
- ${u({scope:"text-popover-save"},'[part="popover-save"]')}
482
- ${u({scope:"text-popover-cancel"},'[part="popover-cancel"]')}
483
- button[data-state="on"] {
484
- color: var(--crtr-text-button-on-text-color, var(--crtr-color-accent));
485
- }
486
-
487
- /* Editing a prefilled draft is a primary path, not an icon to discover. Keep the control
488
- beside the text but give it the bordered, labelled shape that reads as an action. */
489
- [part="edit-toggle"] {
490
- color: var(--crtr-text-edit-toggle-text-color, var(--crtr-color-text));
491
- background: var(--crtr-text-edit-toggle-fill, var(--crtr-color-background));
492
- border-color: var(--crtr-text-edit-toggle-border-color, var(--crtr-color-border));
493
- }
494
-
495
- /* Reached for and engaged are one treatment here, so they are one knob: active. */
496
- [part="edit-toggle"]:hover,
497
- [part="edit-toggle"][data-state="on"] {
498
- color: var(--crtr-text-edit-toggle-active-text-color, var(--crtr-color-accent));
499
- border-color: var(--crtr-text-edit-toggle-active-border-color,
500
- color-mix(in srgb, var(--crtr-color-accent) 45%, var(--crtr-color-border)));
501
- }
502
-
503
- /* Width and height are one visual knob \u2014 the icon is square. */
504
- svg {
505
- width: var(--crtr-text-icon-size, 0.875em);
506
- height: var(--crtr-text-icon-size, 0.875em);
507
- flex: none;
508
- }
509
-
510
- /* Both writing boxes in one call, because in the kit they are one control at two heights:
511
- input.tsx and textarea.tsx carry the same border, radius, padding, fill, elevation and
512
- focus ring, and differ only in how tall they start. Writing them separately is what let
513
- them drift into two visibly different fields \u2014 different padding, different radius,
514
- different fill, and an inset outline on one against the kit's outset ring on the other.
515
-
516
- Each selector still gets its own scope: the field and editor are distinct anatomy even
517
- though this recipe keeps their default paint identical. */
518
- ${S({scope:"text-input"},'[part="input"]')}
519
- ${S({scope:"text-editor"},'[part="editor"]')}
520
- /* The one thing the textarea does not share: it starts tall and may be dragged taller. */
521
- [part="editor"] {
522
- min-height: var(--crtr-text-editor-min-height, 10em);
523
- resize: vertical;
524
- }
525
-
526
- /* The kit ring is outset paint, so a writing box needs a three-pixel gutter inside its grid
527
- track. Without it the box fills the track exactly and the ring is shaved off by a tight
528
- host frame. Prose is the other face of this surface and keeps its own inset ring, so it
529
- stays full-bleed. */
530
- [part="surface"]:has([part="input"]),
531
- [part="surface"]:has([part="editor"]) {
532
- padding: var(--crtr-text-surface-padding, 0.1875rem);
533
- }
534
-
535
- [part="body"] {
536
- position: relative;
537
- padding: var(--crtr-text-body-padding, var(--crtr-space-3) var(--crtr-space-4));
538
- background: var(--crtr-text-body-fill, var(--crtr-color-surface));
539
- border: var(--crtr-text-body-border-width, 1px)
540
- var(--crtr-text-body-border-style, solid)
541
- var(--crtr-text-body-border-color, var(--crtr-color-border));
542
- border-radius: var(--crtr-text-body-radius, var(--crtr-radius-medium));
543
- }
544
-
545
- /* The ring sits inside the border rather than outside it. The body is full-bleed \u2014 it runs
546
- the whole width of the frame the host gives the page \u2014 so an outset ring has nowhere to be
547
- drawn and gets clipped at the frame's edges, showing three sides of a rectangle. */
548
- [part="body"]:focus-visible {
549
- outline: var(--crtr-text-body-focus-ring-width, 2px)
550
- var(--crtr-text-body-focus-ring-style, solid)
551
- var(--crtr-text-body-focus-ring-color, var(--crtr-color-focus));
552
- outline-offset: var(--crtr-text-body-focus-ring-offset, -2px);
553
- }
554
-
555
- [part="prose"] {
556
- display: grid;
557
- gap: var(--crtr-text-prose-gap, var(--crtr-space-3));
558
- }
559
-
560
- [part="prose"] p {
561
- margin: var(--crtr-text-prose-paragraph-margin, 0);
562
- /* The agent's own line breaks are the passage; preserving them is behavior. */
563
- white-space: pre-wrap;
564
- }
565
-
566
- [part="placeholder"] {
567
- color: var(--crtr-text-placeholder-text-color, var(--crtr-color-text-muted));
568
- }
569
-
570
- [part~="commented"] {
571
- position: relative;
572
- border-radius: var(--crtr-text-commented-radius, var(--crtr-radius-small));
573
- background: var(--crtr-text-commented-fill, color-mix(in srgb, var(--crtr-color-accent) 18%, transparent));
574
- text-decoration: var(--crtr-text-commented-text-decoration, underline dotted);
575
- text-decoration-color: var(--crtr-text-commented-text-decoration-color, var(--crtr-color-accent));
576
- text-underline-offset: var(--crtr-text-commented-text-underline-offset, 0.25em);
577
- cursor: help;
578
- outline: var(--crtr-text-commented-outline, none);
579
- }
580
-
581
- [part~="commented"]:focus-visible {
582
- outline: var(--crtr-text-commented-focus-ring-width, 2px)
583
- var(--crtr-text-commented-focus-ring-style, solid)
584
- var(--crtr-text-commented-focus-ring-color, var(--crtr-color-focus));
585
- outline-offset: var(--crtr-text-commented-focus-ring-offset, 2px);
586
- }
587
-
588
- /* The staged delays here and on the hover rule below are the bubble's show/hide
589
- choreography \u2014 behavior rather than a styling value, so they stay literal. */
590
- [part="comment-bubble"] {
591
- position: absolute;
592
- bottom: calc(100% + var(--crtr-text-comment-bubble-offset, var(--crtr-space-1)));
593
- left: 0;
594
- z-index: 2;
595
- display: grid;
596
- gap: var(--crtr-text-comment-bubble-gap, var(--crtr-space-1));
597
- width: var(--crtr-text-comment-bubble-width, max-content);
598
- max-width: var(--crtr-text-comment-bubble-max-width, 18em);
599
- padding: var(--crtr-text-comment-bubble-padding, var(--crtr-space-2) var(--crtr-space-3));
600
- color: var(--crtr-text-comment-bubble-text-color, var(--crtr-color-text));
601
- background: var(--crtr-text-comment-bubble-fill, var(--crtr-color-background));
602
- border: var(--crtr-text-comment-bubble-border-width, 1px)
603
- var(--crtr-text-comment-bubble-border-style, solid)
604
- var(--crtr-text-comment-bubble-border-color, var(--crtr-color-border));
605
- border-radius: var(--crtr-text-comment-bubble-radius, var(--crtr-radius-medium));
606
- box-shadow: var(--crtr-text-comment-bubble-shadow, var(--crtr-shadow));
607
- text-decoration: none;
608
- white-space: normal;
609
- user-select: none;
610
- opacity: 0;
611
- visibility: hidden;
612
- transition: opacity 120ms ease 120ms, visibility 0s linear 240ms;
613
- }
614
-
615
- [part~="commented"]:hover > [part="comment-bubble"],
616
- [part~="commented"]:focus > [part="comment-bubble"] {
617
- opacity: 1;
618
- visibility: visible;
619
- transition: opacity 120ms ease 220ms, visibility 0s linear 220ms;
620
- }
621
-
622
- /* The comment layer's micro-labels are the page's own prose, one step down and muted \u2014 not
623
- caps-mono. Mono set in capitals reads as machine output, and what these say ("Comment on
624
- this passage", "2 comments") is the interface talking to a person. */
625
- [part="bubble-label"],
626
- [part="comment-count"],
627
- [part="popover-subject"],
628
- [part="popover-hint"] {
629
- color: var(--crtr-text-comment-label-text-color, var(--crtr-color-text-muted));
630
- font-size: var(--crtr-text-comment-label-font-size, 0.875em);
631
- }
632
-
633
- [part="bubble-label"] {
634
- color: var(--crtr-text-bubble-label-text-color, var(--crtr-color-accent));
635
- }
636
-
637
- [part~="selection-comment"] {
638
- position: absolute;
639
- z-index: 3;
640
- color: var(--crtr-text-selection-comment-text-color, var(--crtr-color-accent));
641
- background: var(--crtr-text-selection-comment-fill, var(--crtr-color-background));
642
- border-color: var(--crtr-text-selection-comment-border-color,
643
- color-mix(in srgb, var(--crtr-color-accent) 40%, transparent));
644
- box-shadow: var(--crtr-text-selection-comment-shadow, var(--crtr-shadow));
645
- }
646
-
647
- [part="comment-rail"] {
648
- display: grid;
649
- gap: var(--crtr-text-comment-rail-gap, var(--crtr-space-1));
650
- }
651
-
652
- [part="comment-chips"] {
653
- display: flex;
654
- flex-wrap: wrap;
655
- gap: var(--crtr-text-comment-chips-gap, var(--crtr-space-2));
656
- }
657
-
658
- [part~="comment-chip"] {
659
- color: var(--crtr-text-comment-chip-text-color, var(--crtr-color-text));
660
- border-color: var(--crtr-text-comment-chip-border-color, var(--crtr-color-border));
661
- text-align: var(--crtr-text-comment-chip-text-align, left);
662
- }
663
-
664
- [part~="comment-chip"] > span {
665
- overflow: hidden;
666
- white-space: nowrap;
667
- text-overflow: ellipsis;
668
- }
669
-
670
- [part="popover"] {
671
- position: absolute;
672
- z-index: 5;
673
- box-sizing: border-box;
674
- display: grid;
675
- gap: var(--crtr-text-popover-gap, var(--crtr-space-2));
676
- width: var(--crtr-text-popover-width, 20em);
677
- max-width: var(--crtr-text-popover-max-width, 100%);
678
- padding: var(--crtr-text-popover-padding, var(--crtr-space-3));
679
- background: var(--crtr-text-popover-fill, var(--crtr-color-background));
680
- border: var(--crtr-text-popover-border-width, 1px)
681
- var(--crtr-text-popover-border-style, solid)
682
- var(--crtr-text-popover-border-color, var(--crtr-color-border));
683
- border-radius: var(--crtr-text-popover-radius, var(--crtr-radius-medium));
684
- box-shadow: var(--crtr-text-popover-shadow, var(--crtr-shadow));
685
- }
686
-
687
- [part="popover"][hidden],
688
- [part="toolbar"][hidden],
689
- [part~="whole-comment"][hidden],
690
- [part="edited"][hidden],
691
- [part="comment-rail"][hidden],
692
- [part~="selection-comment"][hidden],
693
- [part="popover-quote"][hidden],
694
- [part="edit-toggle"][hidden] {
695
- display: none;
696
- }
697
-
698
- [part="popover-subject"] {
699
- margin: var(--crtr-text-popover-subject-margin, 0);
700
- }
701
-
702
- /* Smaller than the comment being written, because it is the context and not the subject.
703
- The text arrives already elided to about two lines by quotePreview, so it wraps normally
704
- rather than keeping the source's line breaks. */
705
- [part="popover-quote"] {
706
- margin: var(--crtr-text-popover-quote-margin, 0);
707
- padding: var(--crtr-text-popover-quote-padding, var(--crtr-space-1) var(--crtr-space-2));
708
- color: var(--crtr-text-popover-quote-text-color, var(--crtr-color-text-muted));
709
- font-size: var(--crtr-text-popover-quote-font-size, 0.8125em);
710
- background: var(--crtr-text-popover-quote-fill, color-mix(in srgb, var(--crtr-color-accent) 8%, transparent));
711
- border-left: var(--crtr-text-popover-quote-border-width, 2px)
712
- var(--crtr-text-popover-quote-border-style, solid)
713
- var(--crtr-text-popover-quote-border-color, color-mix(in srgb, var(--crtr-color-accent) 40%, transparent));
714
- overflow-wrap: anywhere;
715
- }
716
-
717
- /* The composer is its own scope: it is the one writing box a person can meet beside the
718
- passage's own, so the two are separately restylable. */
719
- ${S({scope:"text-popover-input"},'[part="popover-input"]')}
720
- [part="popover-input"] {
721
- min-height: var(--crtr-text-popover-input-min-height, 5em);
722
- resize: vertical;
723
- }
724
-
725
- [part="popover-actions"] {
726
- display: flex;
727
- align-items: center;
728
- justify-content: space-between;
729
- gap: var(--crtr-text-popover-actions-gap, var(--crtr-space-2));
730
- }
731
-
732
- [part="popover-buttons"] {
733
- display: flex;
734
- gap: var(--crtr-text-popover-buttons-gap, var(--crtr-space-2));
735
- }
736
-
737
- [part="popover-save"] {
738
- color: var(--crtr-text-popover-save-text-color, var(--crtr-color-accent-contrast));
739
- background: var(--crtr-text-popover-save-fill, var(--crtr-color-accent));
740
- }
741
-
742
- /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
743
- dark one \u2014 an opacity or brightness step moves the wrong way on one of them. */
744
- [part="popover-save"]:hover {
745
- color: var(--crtr-text-popover-save-hover-text-color, var(--crtr-color-accent-contrast));
746
- background: var(--crtr-text-popover-save-hover-fill,
747
- color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
748
- }
749
-
750
- /* Cancel is the quiet half of every editor in this bundle: no border until you reach for it. */
751
- [part="popover-cancel"] {
752
- border-color: var(--crtr-text-popover-cancel-border-color, transparent);
753
- }
754
-
755
- /* Flat: this sits in the flow of the page. A shadow in this bundle means floating \u2014 the
756
- comment bubble, the selection button, the popover, and nothing else. */
757
- [part="unavailable"] {
758
- padding: var(--crtr-text-unavailable-padding, var(--crtr-space-3));
759
- color: var(--crtr-text-unavailable-text-color, var(--crtr-color-text-muted));
760
- background: var(--crtr-text-unavailable-fill, var(--crtr-color-surface));
761
- border: var(--crtr-text-unavailable-border-width, 1px)
762
- var(--crtr-text-unavailable-border-style, solid)
763
- var(--crtr-text-unavailable-border-color, var(--crtr-color-border));
764
- border-radius: var(--crtr-text-unavailable-radius, var(--crtr-radius-medium));
765
- }
766
-
767
- [part="reason"] {
768
- color: var(--crtr-text-reason-text-color, var(--crtr-color-text));
769
- font-family: var(--crtr-text-reason-font-family, var(--crtr-font-mono));
770
- }
771
- `,_t="http://www.w3.org/2000/svg",Ut="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",Kt=[Ut,"M12 7v6","M9 10h6"],qt=[Ut,"M13 8H7","M17 12H7"],xe=["M12 20h9","M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z","m15 5 3 3"],ye=["M20 6 9 17l-5-5"];function ot(n){let t=document.createElementNS(_t,"svg");t.setAttribute("viewBox","0 0 24 24"),t.setAttribute("fill","none"),t.setAttribute("stroke","currentColor"),t.setAttribute("stroke-width","2"),t.setAttribute("stroke-linecap","round"),t.setAttribute("stroke-linejoin","round"),t.setAttribute("aria-hidden","true");for(let e of n){let r=document.createElementNS(_t,"path");r.setAttribute("d",e),t.append(r)}return t}function we(n){let t=[],e=/\n{2,}/g,r=0,o;for(;(o=e.exec(n))!==null;)t.push({start:r,text:n.slice(r,o.index)}),r=o.index+o[0].length;return t.push({start:r,text:n.slice(r)}),t.filter(a=>a.text.trim().length>0)}function ke(n,t){let e=t.filter(a=>a.anchor.kind==="range").filter(a=>a.anchor.end>n.start&&a.anchor.start<n.start+n.text.length).sort((a,i)=>a.anchor.start-i.anchor.start),r=[],o=0;for(let a of e){let i=Math.max(o,a.anchor.start-n.start),s=Math.min(n.text.length,a.anchor.end-n.start);s<=i||(i>o&&r.push({text:n.text.slice(o,i)}),r.push({text:n.text.slice(i,s),comment:a}),o=s)}return o<n.text.length&&r.push({text:n.text.slice(o)}),r}function Ee(n){return(n.nodeType===Node.ELEMENT_NODE?n:n.parentElement)?.closest("[data-paragraph]")??null}function Ce(n,t,e){let r=document.createRange();r.selectNodeContents(n),r.setEnd(t,e);let o=r.cloneContents();for(let a of o.querySelectorAll('[part="comment-bubble"]'))a.remove();return o.textContent?.length??0}function Gt(n){let t=n.cloneNode(!0);for(let e of t.querySelectorAll('[part="comment-bubble"]'))e.remove();return t.textContent?.length??0}function Wt(n,t,e,r){let o=Array.from(n.querySelectorAll("[data-paragraph]")),a=Ee(t);if(a){if(r==="end"&&e===0){let c=o.indexOf(a),l=o[c-1];if(l)return{paragraph:l,offset:Gt(l)}}return{paragraph:a,offset:Ce(a,t,e)}}let i=document.createRange();i.setStart(t,e),i.collapse(!0);let s=r==="start"?o:[...o].reverse();for(let c of s){let l=document.createRange();l.selectNodeContents(c);let h=i.compareBoundaryPoints(r==="start"?Range.START_TO_START:Range.START_TO_END,l);if(r==="start"&&h<=0||r==="end"&&h>=0)return{paragraph:c,offset:r==="start"?0:Gt(c)}}return null}function Te(n,t){let e=n,r=[typeof e.getSelection=="function"?e.getSelection():null,document.getSelection()];for(let o of r){if(!o||o.isCollapsed||o.rangeCount===0)continue;let a=o.getRangeAt(0);if(t.contains(a.startContainer)&&t.contains(a.endContainer))return a}return null}function nt(n){n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-controls",Ft),n.setAttribute("aria-expanded","false")}var vt=class extends HTMLElement{static observedAttributes=["inert"];#o;#i=document.createElement("div");#a=document.createElement("p");#n=document.createElement("div");#e=document.createElement("span");#r=document.createElement("button");#t=document.createElement("button");#h=document.createElement("span");#c=document.createElement("div");#s=document.createElement("textarea");#l=document.createElement("input");#d=document.createElement("div");#u=document.createElement("div");#m=document.createElement("button");#E=document.createElement("div");#L=document.createElement("span");#g=document.createElement("div");#p=document.createElement("div");#T=document.createElement("p");#b=document.createElement("blockquote");#y=document.createElement("textarea");#S=document.createElement("span");#f=document.createElement("button");#A=document.createElement("button");#w={initialText:""};#C;#v=!1;#x="";#k=[];#M=!1;#G=!1;#O=null;#$=null;#j=new ResizeObserver(()=>{let t=this.#$;t!==null&&this.#Z(t.trigger,t.align)});constructor(){super(),this.#o=this.attachShadow({mode:"open"});let t=document.createElement("style");t.textContent=be,this.#i.part.add("container"),this.#a.part.add("label"),this.#a.id=Pt,this.#a.hidden=!0,this.#n.part.add("toolbar"),this.#e.part.add("edited"),this.#e.textContent="edited",this.#e.hidden=!0,this.#r.type="button",this.#r.part.add("comment-trigger"),this.#r.part.add("whole-comment"),nt(this.#r),this.#r.addEventListener("click",()=>{this.#P(ut,U,this.#r,"end")}),this.#t.type="button",this.#t.part.add("edit-toggle"),this.#t.hidden=!0,this.#t.append(this.#h),this.#t.addEventListener("click",()=>{this.#M=!this.#M,this.#R(),this.#q(),this.#H(),this.#M?this.#s.focus():this.#d.focus()}),this.#n.append(this.#e,this.#r,this.#t),this.#c.part.add("surface"),this.#s.part.add("editor"),this.#s.addEventListener("input",()=>{this.#x=this.#s.value,this.#H(),this.#K()}),this.#l.type="text",this.#l.part.add("input"),this.#l.addEventListener("input",()=>{this.#x=this.#l.value,this.#H(),this.#K()}),this.#l.addEventListener("keydown",o=>{o.key==="Enter"&&!o.metaKey&&!o.ctrlKey&&!o.altKey&&o.preventDefault()}),this.#d.part.add("body"),this.#d.tabIndex=0,this.#u.part.add("prose"),this.#m.type="button",this.#m.part.add("comment-trigger"),this.#m.part.add("selection-comment"),this.#m.hidden=!0,nt(this.#m),this.#m.append(ot(Kt),document.createTextNode("Comment")),this.#m.addEventListener("mousedown",o=>o.preventDefault()),this.#m.addEventListener("click",()=>{let o=this.#O;o!==null&&this.#P(o.anchor,J,this.#m,"start",o.anchor.quote)}),this.#d.append(this.#u,this.#m),this.#d.addEventListener("mouseup",()=>this.#J()),this.#E.part.add("comment-rail"),this.#E.hidden=!0,this.#L.part.add("comment-count"),this.#g.part.add("comment-chips"),this.#E.append(this.#L,this.#g),this.#p.part.add("popover"),this.#p.hidden=!0,this.#p.id=Ft,this.#p.setAttribute("role","dialog"),this.#T.part.add("popover-subject"),this.#b.part.add("popover-quote"),this.#b.hidden=!0,this.#y.part.add("popover-input"),this.#y.placeholder="What should the agent know about this?",this.#y.addEventListener("keydown",o=>{o.key==="Enter"&&(o.metaKey||o.ctrlKey)&&(o.preventDefault(),this.#tt())}),this.#S.part.add("popover-hint"),this.#A.type="button",this.#A.part.add("popover-cancel"),this.#A.textContent="Cancel",this.#A.addEventListener("click",()=>this.#_()),this.#f.type="button",this.#f.part.add("popover-save"),this.#f.textContent="Save",this.#f.addEventListener("click",()=>this.#tt());let e=document.createElement("div");e.part.add("popover-actions");let r=document.createElement("div");r.part.add("popover-buttons"),r.append(this.#A,this.#f),e.append(this.#S,r),this.#p.append(this.#T,this.#b,this.#y,e),this.#i.append(this.#a,this.#n,this.#c,this.#E,this.#p),this.#o.append(t,this.#i),this.addEventListener("keydown",this.#rt)}connectedCallback(){if(this.#G)return;let t=T(this);if(t.status!=="ok"){this.#U(t.reason);return}if(typeof t.config.initialText!="string"){this.#U("text config has no initialText string");return}this.#G=!0,this.#w=t.config,this.#v=t.config.singleLine===!0,this.#c.toggleAttribute("data-single-line",this.#v),this.#C=D(this),this.#x=t.config.initialText,this.#I(),this.#W(),this.#C!==void 0&&B(this,this.#C,()=>this.#F()),this.#M=this.#N&&this.#x.length===0,this.#H(),this.#q(),this.#Y()}attributeChangedCallback(){this.isConnected&&this.#V()}disconnectedCallback(){document.removeEventListener("pointerdown",this.#Q,!0),this.#j.disconnect()}#W(){if(this.#C===void 0)return;let t=N(this.#C);t!==void 0&&((this.#N||this.#v)&&typeof t.text=="string"&&(this.#x=t.text),this.#k=O(t.comments))}#F(){return{text:this.#x,edited:this.#x!==this.#w.initialText,comments:this.#k}}#K(){this.#C!==void 0&&M(this.#C,this.#F())}#U(t){let e=document.createElement("div");e.part.add("unavailable"),e.setAttribute("role","status");let r=document.createElement("span");r.part.add("reason"),r.textContent=t,e.append("Text unavailable: ",r),this.#i.replaceChildren(e)}#I(){let t=this.#w.label,e=t!==void 0&&t!=="";this.#a.hidden=!e,this.#a.textContent=e?t:"";for(let r of[this.#s,this.#l,this.#d])e?r.setAttribute("aria-labelledby",Pt):r.removeAttribute("aria-labelledby")}#H(){this.#e.hidden=this.#x===this.#w.initialText||this.#v&&this.#w.initialText==="";let t=y(this.#k,ut);this.#r.replaceChildren(ot(t?qt:Kt)),this.#r.dataset.state=t?"on":"off",this.#r.setAttribute("aria-label",`${t?"Edit comment on":"Comment on"} ${U}`),this.#r.hidden=this.#v||!this.#z,this.#t.hidden=!this.#N,this.#n.hidden=this.#v&&this.#e.hidden,this.#t.dataset.state=this.#M?"on":"off",this.#h.textContent=this.#M?"Done editing":"Edit text",this.#t.replaceChildren(ot(this.#M?ye:xe),this.#h),this.#V()}#V(){let t=f(this);j(this.#o,t),this.#s.readOnly=t,this.#l.disabled=!1,this.#l.readOnly=t,this.#t.disabled=t,t&&this.#$!==null&&this.#_(!1)}get#N(){return!this.#v&&this.#w.editable!==!1}get#z(){return L(this.#C)}#q(){if(this.#v){this.#l.value!==this.#x&&(this.#l.value=this.#x),this.#l.placeholder=this.#w.placeholder??"",this.#c.firstChild!==this.#l&&this.#c.replaceChildren(this.#l);return}if(this.#M){this.#s.value!==this.#x&&(this.#s.value=this.#x),this.#s.placeholder=this.#w.placeholder??"Write your answer\u2026",this.#c.firstChild!==this.#s&&this.#c.replaceChildren(this.#s);return}this.#c.firstChild!==this.#d&&this.#c.replaceChildren(this.#d),this.#B()}#B(){let t=we(this.#x);if(t.length===0){let r=document.createElement("p");r.part.add("placeholder"),r.textContent=this.#w.placeholder??"Nothing yet.",this.#u.replaceChildren(r);return}let e=t.map(r=>{let o=document.createElement("p");o.dataset.paragraph="",o.dataset.start=String(r.start);for(let a of ke(r,this.#k))o.append(a.comment?this.#X(a.text,a.comment):a.text);return o});this.#u.replaceChildren(...e)}#X(t,e){let r=document.createElement("span");r.part.add("commented"),r.tabIndex=0,r.dataset.commentId=e.id,nt(r);let o=document.createElement("span");o.part.add("comment-bubble"),o.setAttribute("role","note");let a=document.createElement("span");a.part.add("bubble-label"),a.textContent="Comment";let i=document.createElement("span");return i.textContent=e.text,o.append(a,i),r.append(t,o),r}#Y(){let t=this.#k.length;if(this.#E.hidden=t===0,t===0){this.#g.replaceChildren();return}this.#L.textContent=`${t} comment${t===1?"":"s"}`;let e=this.#k.map(r=>{let o=document.createElement("button");o.type="button",o.part.add("comment-trigger"),o.part.add("comment-chip"),o.dataset.commentId=r.id,nt(o);let a=document.createElement("span");a.textContent=r.text,o.append(ot(qt),a);let i=r.anchor.kind==="range"?r.anchor:void 0;return o.setAttribute("aria-label",`Edit comment on ${i?J:U}`),o.addEventListener("click",()=>{this.#P(r.anchor,i?J:U,o,"start",i?.quote)}),o});this.#g.replaceChildren(...e)}#D(){let t=Te(this.#o,this.#d);if(t===null)return null;let e=Wt(this.#d,t.startContainer,t.startOffset,"start"),r=Wt(this.#d,t.endContainer,t.endOffset,"end");if(e===null||r===null||e.paragraph!==r.paragraph)return null;let o=Number(e.paragraph.dataset.start??"0"),a=o+e.offset,i=o+r.offset;if(i<=a)return null;let s=t.getBoundingClientRect(),c=this.#d.getBoundingClientRect();return{anchor:{kind:"range",start:a,end:i,quote:this.#x.slice(a,i)},left:s.left-c.left,top:s.bottom-c.top+4}}#J(){if(this.#M||this.#$!==null||!this.#z)return;let t=this.#D();if(t===null){this.#R();return}this.#O=t,this.#m.hidden=!1,this.#m.style.left=`${t.left}px`,this.#m.style.top=`${t.top}px`}#R(){this.#O=null,this.#m.hidden=!0}#P(t,e,r,o,a){if(!this.#z||f(this))return;let i=this.#$;if(i!==null){if(i.trigger===r){this.#_();return}i.trigger.setAttribute("aria-expanded","false")}let s=y(this.#k,t);this.#$={anchor:t,trigger:r,align:o},r.setAttribute("aria-expanded","true"),this.#T.textContent=`Comment on ${e}`,this.#p.setAttribute("aria-label",`Comment on ${e}`);let c=Ht(a??"");this.#b.hidden=c==="",this.#b.textContent=c,this.#y.value=s?.text??"",this.#S.textContent=s?"empty to delete":"\u2318\u21B5 to save",this.#p.hidden=!1,this.#Z(r,o),this.#j.observe(this.#p),this.#y.focus(),document.addEventListener("pointerdown",this.#Q,!0)}#Z(t,e){this.#i.style.paddingBottom="";let r=this.#i.getBoundingClientRect(),o=t.getBoundingClientRect(),a=this.#p.offsetWidth,i=this.#p.offsetHeight,s=e==="end"?o.right-r.left-a:o.left-r.left,c=Math.min(Math.max(s,0),Math.max(0,r.width-a)),l=o.bottom+rt+i<=window.innerHeight,h=o.top-rt-i>=0,g=!l&&h?o.top-r.top-rt-i:o.bottom-r.top+rt;this.#p.style.left=`${c}px`,this.#p.style.top=`${g}px`;let p=this.#p.getBoundingClientRect().bottom-document.body.getBoundingClientRect().bottom;p>0&&(this.#i.style.paddingBottom=`${p}px`)}#_(t=!0){let e=this.#$;this.#$=null,this.#p.hidden=!0,this.#j.disconnect(),this.#i.style.paddingBottom="",e?.trigger.setAttribute("aria-expanded","false"),document.removeEventListener("pointerdown",this.#Q,!0);let r=e!==null&&e.trigger!==this.#m?e.trigger:this.#d;this.#R(),t&&this.#o.contains(r)&&r.focus()}#tt(){let t=this.#$;if(t===null||f(this))return;let e=this.#u.contains(t.trigger)||this.#g.contains(t.trigger);this.#k=z(this.#k,t.anchor,this.#y.value),this.#_(!e),this.#H(),!this.#M&&!this.#v&&this.#B(),this.#Y(),e&&this.#et(t.anchor),this.#K()}#et(t){let e=y(this.#k,t)?.id,r=e===void 0?null:`[data-comment-id="${CSS.escape(e)}"]`,a=(r===null?null:this.#u.querySelector(r)??this.#g.querySelector(r))??this.#d;this.#o.contains(a)&&a.focus()}#Q=t=>{if(this.#$===null)return;let e=t.composedPath();e.includes(this.#p)||e.includes(this.#$.trigger)||this.#_()};#rt=t=>{if(t.defaultPrevented)return;if(t.key==="Escape"&&this.#$!==null){t.preventDefault(),this.#_();return}if(this.#$!==null||this.#M)return;let e=t.composedPath()[0];if(!(e instanceof HTMLElement&&(e.tagName==="TEXTAREA"||e.tagName==="INPUT"))&&!(t.metaKey||t.ctrlKey||t.altKey)){if(t.key==="j"||t.key==="k"){t.preventDefault(),this.#nt(t.key==="j"?1:-1);return}t.key==="c"&&(t.preventDefault(),this.#at())}};#ot(){return Array.from(this.#u.querySelectorAll('[part~="commented"]'))}#nt(t){let e=this.#ot();if(e.length===0)return;let r=this.#o.activeElement,o=r instanceof HTMLElement?e.indexOf(r):-1,a=o===-1?t>0?0:e.length-1:o+t;e[Math.min(Math.max(a,0),e.length-1)]?.focus()}#at(){if(this.#v||!this.#z)return;let t=this.#O??this.#D();if(t!==null){this.#O=t,this.#m.hidden=!1,this.#m.style.left=`${t.left}px`,this.#m.style.top=`${t.top}px`,this.#P(t.anchor,J,this.#m,"start",t.anchor.quote);return}let e=this.#o.activeElement;if(e instanceof HTMLElement&&e.dataset.commentId!==void 0){let r=this.#k.find(o=>o.id===e.dataset.commentId);if(r!==void 0){let o=r.anchor.kind==="range"?r.anchor:void 0,a=o===void 0?U:J;this.#P(r.anchor,a,e,"start",o?.quote);return}}this.#P(ut,U,this.#r,"end")}};w("crtr-text",vt);var at=4,ft="var(--crtr-table-column-toggle-transition, var(--crtr-control-transition, 120ms ease))",Se="var(--crtr-table-row-transition, 120ms ease)",gt="var(--crtr-table-comment-trigger-transition, var(--crtr-control-transition, 120ms ease))",bt="var(--crtr-table-comment-button-transition, var(--crtr-control-transition, 120ms ease))",Ae="M3.25 3.5h9.5A1.75 1.75 0 0 1 14.5 5.25v5A1.75 1.75 0 0 1 12.75 12H7.4l-3.15 2.36A.5.5 0 0 1 3.5 14v-2H3.25A1.75 1.75 0 0 1 1.5 10.25v-5A1.75 1.75 0 0 1 3.25 3.5Z",Me=`
772
- :host {
773
- display: block;
774
- }
775
-
776
- /* The positioning context for the comment editor, and the ONLY one. The editor cannot live
777
- inside the container: that box clips to its own rounded corners, so a popover anchored to
778
- a row was cut off at the table's edge instead of floating over it. The frame has no paint
779
- and no clipping, so the editor overlays whatever the table sits on. */
780
- [part="frame"] {
781
- position: relative;
782
- }
783
-
784
- /* Flat: the table sits in the flow of the page. A shadow in this bundle means floating \u2014
785
- the comment editor, and nothing else here. */
786
- [part="container"] {
787
- background: var(--crtr-table-container-fill, var(--crtr-color-background));
788
- border: var(--crtr-table-container-border-width, 1px)
789
- var(--crtr-table-container-border-style, solid)
790
- var(--crtr-table-container-border-color, var(--crtr-color-border));
791
- border-radius: var(--crtr-table-container-radius, var(--crtr-radius-medium));
792
- overflow: hidden;
793
- }
794
-
795
- /* Inside the border, not outside it: the container is full-bleed, so an outset ring is
796
- clipped at the edges of the frame the host gives the page and draws only three sides.
797
- That is why this is NOT the shared control focus family \u2014 it is a focusable region rather
798
- than a control, and it says so with its own inset outline. */
799
- [part="container"]:focus-visible {
800
- outline: var(--crtr-table-container-focus-outline, 2px solid var(--crtr-color-focus));
801
- outline-offset: var(--crtr-table-container-focus-outline-offset, -2px);
802
- }
803
-
804
- /* Typography here is the element's host typography, not a second set of knobs: font stays
805
- literal inherit so --crtr-table-font-family, --crtr-table-font-size and
806
- --crtr-table-line-height reach the table, and the colour reads the host's own
807
- --crtr-table-color, whose fallback is the colour this rule used to hard-code. */
808
- [part="table"] {
809
- width: 100%;
810
- border-collapse: collapse;
811
- font: inherit;
812
- color: var(--crtr-table-color, var(--crtr-color-text));
813
- }
814
-
815
- [part="caption"] {
816
- caption-side: top;
817
- padding: var(--crtr-table-caption-padding, var(--crtr-space-3) var(--crtr-space-3) var(--crtr-space-2));
818
- text-align: left;
819
- color: var(--crtr-table-caption-text-color, var(--crtr-color-text-muted));
820
- }
821
-
822
- th {
823
- padding: var(--crtr-table-header-padding, var(--crtr-space-2) var(--crtr-space-3));
824
- text-align: left;
825
- font-weight: var(--crtr-table-header-font-weight, 600);
826
- color: var(--crtr-table-header-text-color, var(--crtr-color-text-muted));
827
- /* A tinted header reads as the table's own chrome; the column-selected tint still wins,
828
- on specificity (0-1-0 against this 0-0-1). */
829
- background: var(--crtr-table-header-fill, var(--crtr-color-surface));
830
- border-bottom: var(--crtr-table-header-border-width, 1px)
831
- var(--crtr-table-header-border-style, solid)
832
- var(--crtr-table-header-border-color, var(--crtr-color-border));
833
- white-space: nowrap;
834
- }
835
-
836
- th[data-align="right"] {
837
- text-align: right;
838
- }
839
-
840
- [part="header-cell-inner"] {
841
- display: inline-flex;
842
- align-items: center;
843
- gap: var(--crtr-table-header-gap, var(--crtr-space-1));
844
- }
845
-
846
- th[data-align="right"] [part="header-cell-inner"] {
847
- flex-direction: row-reverse;
848
- }
849
-
850
- [part="column-toggle"] {
851
- font: var(--crtr-table-column-toggle-font, inherit);
852
- font-weight: var(--crtr-table-column-toggle-font-weight, 600);
853
- color: var(--crtr-table-column-toggle-text-color, inherit);
854
- background: var(--crtr-table-column-toggle-fill, transparent);
855
- border: var(--crtr-table-column-toggle-border-width, 1px)
856
- var(--crtr-table-column-toggle-border-style, solid)
857
- var(--crtr-table-column-toggle-border-color, transparent);
858
- border-radius: var(--crtr-table-column-toggle-radius, var(--crtr-radius-small));
859
- padding: var(--crtr-table-column-toggle-padding, var(--crtr-space-1) var(--crtr-space-2));
860
- /* The toggle is pulled back out of its own padding so the header label sits where an
861
- unselectable one does; a host that repads the toggle repays this too. */
862
- margin: var(--crtr-table-column-toggle-margin, calc(var(--crtr-space-1) * -1) calc(var(--crtr-space-2) * -1));
863
- cursor: pointer;
864
- transition: color ${ft}, background-color ${ft}, border-color ${ft};
865
- }
866
-
867
- [part="column-toggle"]:hover {
868
- background: var(--crtr-table-column-toggle-hover-fill, var(--crtr-color-surface-hover));
869
- }
870
-
871
- [part="column-toggle"][aria-pressed="true"] {
872
- color: var(--crtr-table-column-toggle-selected-text-color, var(--crtr-color-text));
873
- background: var(--crtr-table-column-toggle-selected-fill,
874
- color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
875
- border-color: var(--crtr-table-column-toggle-selected-border-color,
876
- color-mix(in srgb, var(--crtr-color-accent) 45%, transparent));
877
- }
878
-
879
- [part="column-toggle"][aria-pressed="true"]:hover {
880
- background: var(--crtr-table-column-toggle-selected-hover-fill,
881
- color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
882
- }
883
-
884
- ${u({scope:"table-column-toggle"},'[part="column-toggle"]')}
885
- ${u({scope:"table-comment-trigger"},'[part="comment-trigger"]')}
886
-
887
- [part="row"] {
888
- border-bottom: var(--crtr-table-row-border-width, 1px)
889
- var(--crtr-table-row-border-style, solid)
890
- var(--crtr-table-row-border-color, color-mix(in srgb, var(--crtr-color-border) 60%, transparent));
891
- transition: background-color ${Se};
892
- }
893
-
894
- [part="row"]:last-child {
895
- border-bottom: var(--crtr-table-row-last-border, none);
896
- }
897
-
898
- [part="row"]:hover,
899
- [part="row"][data-active="true"] {
900
- background: var(--crtr-table-row-hover-fill, var(--crtr-color-surface-hover));
901
- }
902
-
903
- [part="row"][data-state="selected"] {
904
- background: var(--crtr-table-row-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
905
- }
906
-
907
- [part="row"][data-state="selected"]:hover,
908
- [part="row"][data-state="selected"][data-active="true"] {
909
- background: var(--crtr-table-row-selected-hover-fill,
910
- color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
911
- }
912
-
913
- /* Inset for the same reason the container's is: a row runs the full width of the table. */
914
- [part="row"]:focus-visible {
915
- outline: var(--crtr-table-row-focus-outline, 2px solid var(--crtr-color-focus));
916
- outline-offset: var(--crtr-table-row-focus-outline-offset, -2px);
917
- }
918
-
919
- td {
920
- padding: var(--crtr-table-cell-padding, var(--crtr-space-2) var(--crtr-space-3));
921
- vertical-align: middle;
922
- }
923
-
924
- td[data-align="right"] {
925
- text-align: right;
926
- font-variant-numeric: var(--crtr-table-cell-numeric-font-variant, tabular-nums);
927
- }
928
-
929
- td[data-mono="true"] {
930
- font-family: var(--crtr-table-cell-mono-font-family, var(--crtr-font-mono));
931
- font-size: var(--crtr-table-cell-mono-font-size, 0.8125em);
932
- }
933
-
934
- [data-column-selected="true"] {
935
- background: var(--crtr-table-column-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 6%, transparent));
936
- }
937
-
938
- [part="select-cell"],
939
- [part="select-head"] {
940
- width: 1px;
941
- padding-right: var(--crtr-table-select-cell-padding-right, 0);
942
- }
943
-
944
- [part="comment-cell"],
945
- [part="comment-head"] {
946
- width: 1px;
947
- text-align: right;
948
- padding-left: var(--crtr-table-comment-cell-padding-left, 0);
949
- }
950
-
951
- /* One scope over both selectors: the header's select-all IS the row control, drawn once in
952
- the head, and they are meant to be indistinguishable. */
953
- ${F({scope:"table-selection"},'[part="row-control"]','[part="select-all"]')}
954
-
955
- /* A page that can no longer take an answer keeps its selection legible and drops every
956
- affordance that says it could still be changed. */
957
- [part="column-toggle"]:disabled {
958
- cursor: default;
959
- }
960
-
961
- [part="column-toggle"]:disabled:hover {
962
- color: var(--crtr-table-column-toggle-disabled-text-color, var(--crtr-color-text-muted));
963
- background: var(--crtr-table-column-toggle-disabled-fill, none);
964
- }
965
-
966
- /* One size knob for a square button, and one for the glyph in it \u2014 width and height are one
967
- visual decision each. The opacity is the reveal-on-hover mechanic, which is behaviour. */
968
- [part="comment-trigger"] {
969
- display: inline-flex;
970
- align-items: center;
971
- justify-content: center;
972
- width: var(--crtr-table-comment-trigger-size, 1.5em);
973
- height: var(--crtr-table-comment-trigger-size, 1.5em);
974
- padding: var(--crtr-table-comment-trigger-padding, 0);
975
- color: var(--crtr-table-comment-trigger-text-color, var(--crtr-color-text-muted));
976
- background: var(--crtr-table-comment-trigger-fill, transparent);
977
- border: var(--crtr-table-comment-trigger-border-width, 0)
978
- var(--crtr-table-comment-trigger-border-style, none)
979
- var(--crtr-table-comment-trigger-border-color, currentColor);
980
- border-radius: var(--crtr-table-comment-trigger-radius, var(--crtr-radius-small));
981
- cursor: pointer;
982
- opacity: 0;
983
- transition: opacity ${gt}, color ${gt}, background-color ${gt};
984
- }
985
-
986
- [part="comment-trigger"] svg {
987
- width: var(--crtr-table-comment-trigger-icon-size, 0.875em);
988
- height: var(--crtr-table-comment-trigger-icon-size, 0.875em);
989
- }
990
-
991
- /* The path geometry stays the icon's anatomy; its paint is component styling. Attribute
992
- selectors preserve the filled-comment state that syncState writes while allowing both
993
- appearances to inherit document-root overrides through this shadow root. */
994
- [part="comment-trigger"] path {
995
- stroke: var(--crtr-table-comment-trigger-icon-stroke, currentColor);
996
- stroke-width: var(--crtr-table-comment-trigger-icon-stroke-width, 1.25);
997
- stroke-linejoin: var(--crtr-table-comment-trigger-icon-stroke-linejoin, round);
998
- }
999
-
1000
- [part="comment-trigger"] path[fill="none"] {
1001
- fill: var(--crtr-table-comment-trigger-icon-fill, none);
1002
- }
1003
-
1004
- [part="comment-trigger"] path[fill="currentColor"] {
1005
- fill: var(--crtr-table-comment-trigger-commented-icon-fill, currentColor);
1006
- }
1007
-
1008
- [part="comment-trigger"][data-has-comment="true"] {
1009
- color: var(--crtr-table-comment-trigger-commented-text-color, var(--crtr-color-accent));
1010
- opacity: 1;
1011
- }
1012
-
1013
- [part="comment-trigger"]:hover {
1014
- background: var(--crtr-table-comment-trigger-hover-fill, var(--crtr-color-surface-hover));
1015
- }
1016
-
1017
- tr:hover [part="comment-trigger"],
1018
- tr:focus-within [part="comment-trigger"],
1019
- tr[data-active="true"] [part="comment-trigger"],
1020
- [part="comment-trigger"]:focus-visible,
1021
- [part="comment-trigger"][data-open="true"] {
1022
- opacity: 1;
1023
- }
1024
-
1025
- /* A floating panel over the page, not a box in the table's layout: the background token
1026
- rather than the surface tint, so it reads as lifted off whatever it covers. */
1027
- [part="comment-editor"] {
1028
- position: absolute;
1029
- z-index: 5;
1030
- box-sizing: border-box;
1031
- width: var(--crtr-table-comment-editor-width, min(20em, 100%));
1032
- display: grid;
1033
- gap: var(--crtr-table-comment-editor-gap, var(--crtr-space-2));
1034
- padding: var(--crtr-table-comment-editor-padding, var(--crtr-space-3));
1035
- background: var(--crtr-table-comment-editor-fill, var(--crtr-color-background));
1036
- border: var(--crtr-table-comment-editor-border-width, 1px)
1037
- var(--crtr-table-comment-editor-border-style, solid)
1038
- var(--crtr-table-comment-editor-border-color, var(--crtr-color-border));
1039
- border-radius: var(--crtr-table-comment-editor-radius, var(--crtr-radius-medium));
1040
- box-shadow: var(--crtr-table-comment-editor-shadow, var(--crtr-shadow));
1041
- }
1042
-
1043
- [part="comment-editor"][hidden] {
1044
- display: none;
1045
- }
1046
-
1047
- /* The editor's own prose, in the page's voice. It was set in caps mono, which shouted a
1048
- row id at someone who had just clicked that row. */
1049
- [part="comment-target"] {
1050
- margin: var(--crtr-table-comment-target-margin, 0);
1051
- font-size: var(--crtr-table-comment-target-font-size, 0.875em);
1052
- color: var(--crtr-table-comment-target-text-color, var(--crtr-color-text-muted));
1053
- }
1054
-
1055
- ${S({scope:"table-comment-input"},'[part="comment-input"]')}
1056
- [part="comment-input"] {
1057
- min-height: var(--crtr-table-comment-input-min-height, 4.5em);
1058
- resize: vertical;
1059
- }
1060
-
1061
- [part="comment-actions"] {
1062
- display: flex;
1063
- align-items: center;
1064
- justify-content: space-between;
1065
- gap: var(--crtr-table-comment-actions-gap, var(--crtr-space-2));
1066
- }
1067
-
1068
- [part="comment-hint"] {
1069
- font-size: var(--crtr-table-comment-hint-font-size, 0.875em);
1070
- color: var(--crtr-table-comment-hint-text-color, var(--crtr-color-text-muted));
1071
- }
1072
-
1073
- /* The chrome both editor buttons share reads one scope \u2014 a person sees one pair of buttons \u2014
1074
- and each button's own paint carries its own. */
1075
- [part="comment-cancel"],
1076
- [part="comment-save"] {
1077
- font: var(--crtr-table-comment-button-font, inherit);
1078
- font-size: var(--crtr-table-comment-button-font-size, 0.875em);
1079
- padding: var(--crtr-table-comment-button-padding, var(--crtr-space-1) var(--crtr-space-2));
1080
- border-radius: var(--crtr-table-comment-button-radius, var(--crtr-radius-small));
1081
- border: var(--crtr-table-comment-button-border-width, 1px)
1082
- var(--crtr-table-comment-button-border-style, solid)
1083
- var(--crtr-table-comment-button-border-color, var(--crtr-color-border));
1084
- cursor: pointer;
1085
- transition: color ${bt}, background-color ${bt},
1086
- border-color ${bt};
1087
- }
1088
-
1089
- [part="comment-cancel"] {
1090
- color: var(--crtr-table-comment-cancel-text-color, var(--crtr-color-text-muted));
1091
- background: var(--crtr-table-comment-cancel-fill, transparent);
1092
- border-color: var(--crtr-table-comment-cancel-border-color,
1093
- var(--crtr-table-comment-button-border-color, transparent));
1094
- }
1095
-
1096
- [part="comment-cancel"]:hover {
1097
- color: var(--crtr-table-comment-cancel-hover-text-color, var(--crtr-color-text));
1098
- background: var(--crtr-table-comment-cancel-hover-fill, var(--crtr-color-surface-hover));
1099
- }
1100
-
1101
- [part="comment-save"] {
1102
- color: var(--crtr-table-comment-save-text-color, var(--crtr-color-accent-contrast));
1103
- background: var(--crtr-table-comment-save-fill, var(--crtr-color-accent));
1104
- border-color: var(--crtr-table-comment-save-border-color,
1105
- var(--crtr-table-comment-button-border-color, var(--crtr-color-accent)));
1106
- }
1107
-
1108
- /* Mixing toward the text colour darkens on a light token set and lightens on a dark one \u2014
1109
- a brightness filter moves the wrong way on one of them. */
1110
- [part="comment-save"]:hover {
1111
- background: var(--crtr-table-comment-save-hover-fill,
1112
- color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
1113
- border-color: var(--crtr-table-comment-save-hover-border-color,
1114
- color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
1115
- }
1116
-
1117
- ${u({scope:"table-comment-cancel"},'[part="comment-cancel"]')}
1118
- ${u({scope:"table-comment-save"},'[part="comment-save"]')}
1119
-
1120
- /* One scope over both: a loading line and an unavailable notice are the same box, saying
1121
- the table has nothing to show yet or ever. */
1122
- [part="status"],
1123
- [part="unavailable"] {
1124
- padding: var(--crtr-table-notice-padding, var(--crtr-space-3));
1125
- color: var(--crtr-table-notice-text-color, var(--crtr-color-text-muted));
1126
- background: var(--crtr-table-notice-fill, var(--crtr-color-surface));
1127
- border: var(--crtr-table-notice-border-width, 1px)
1128
- var(--crtr-table-notice-border-style, solid)
1129
- var(--crtr-table-notice-border-color, var(--crtr-color-border));
1130
- border-radius: var(--crtr-table-notice-radius, var(--crtr-radius-medium));
1131
- }
1132
-
1133
- [part="reason"] {
1134
- color: var(--crtr-table-reason-text-color, var(--crtr-color-text));
1135
- font-family: var(--crtr-table-reason-font-family, var(--crtr-font-mono));
1136
- }
1137
-
1138
- [part="empty"] {
1139
- padding: var(--crtr-table-empty-padding, var(--crtr-space-3));
1140
- color: var(--crtr-table-empty-text-color, var(--crtr-color-text-muted));
1141
- text-align: center;
1142
- }
1143
- `;function Le(n){return n==null?"":typeof n=="string"?n:String(n)}function $e(){let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("viewBox","0 0 16 16"),n.setAttribute("aria-hidden","true"),n.setAttribute("focusable","false");let t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("d",Ae),t.setAttribute("fill","none"),t.setAttribute("stroke","currentColor"),t.setAttribute("stroke-width","1.25"),t.setAttribute("stroke-linejoin","round"),n.append(t),n}function Re(n){return n instanceof HTMLElement?n.closest('input[type="text"], textarea, [contenteditable="true"]')!==null:!1}var xt=class extends HTMLElement{static observedAttributes=["inert"];#o;#i;#a;#n=[];#e=[];#r=[];#t=[];#h=null;#c=null;#s;#l;#d;#u;#m;#E;#L;#g;#p=new Map;#T=new Map;#b;constructor(){super(),this.#o=this.attachShadow({mode:"open"})}connectedCallback(){let t=T(this);if(t.status!=="ok"){this.#W(t.reason);return}let e=t.config;if(!Array.isArray(e.columns)||e.columns.length===0){this.#W("table config has no columns");return}this.#a=e,this.#i=D(this),this.#i!==void 0&&(this.#f!=="none"||this.#A!=="none")&&B(this,this.#i,()=>this.#w()),this.#n=e.rows??[],this.#S(),this.#F()}attributeChangedCallback(){this.isConnected&&this.#y()}#y(){let t=f(this);j(this.#o,t);for(let e of this.#T.values())e.toggle!==void 0&&(e.toggle.disabled=t);t&&this.#c!==null&&this.#z()}#S(){if(this.#i===void 0)return;let t=N(this.#i);if(t===void 0)return;let e=this.#v(q(t.selectedRowIds)),r=this.#x(q(t.selectedColumnIds));this.#e=this.#f==="none"?[]:this.#f==="single"?e.slice(0,1):e,this.#r=this.#A==="none"?[]:this.#A==="single"?r.slice(0,1):r;let o=new Set(this.#n.map(i=>i.id)),a=new Set((this.#a?.columns??[]).map(i=>i.id));this.#t=O(t.comments).filter(i=>i.anchor.kind==="row"?o.has(i.anchor.rowId):i.anchor.kind==="column"?a.has(i.anchor.columnId):!0)}get#f(){return this.#a?.rowSelect??"none"}get#A(){return this.#a?.columnSelect??"none"}#w(){return{selectedRowIds:[...this.#e],selectedColumnIds:[...this.#r],comments:[...this.#t]}}#C(){this.#R(),this.#i!==void 0&&M(this.#i,this.#w())}#v(t){return this.#n.map(e=>e.id).filter(e=>t.includes(e))}#x(t){return(this.#a?.columns??[]).map(e=>e.id).filter(e=>t.includes(e))}#k(t,e){let r=this.#f;r==="none"||f(this)||(r==="single"?this.#e=e?[t]:[]:this.#e=this.#v(e?[...this.#e,t]:this.#e.filter(o=>o!==t)),this.#C())}#M(t){if(this.#f==="single"){this.#k(t,!0);return}this.#k(t,!this.#e.includes(t))}#G(t,e){let r=this.#A;r==="none"||f(this)||(r==="single"?this.#r=e?[t]:[]:this.#r=this.#x(e?[...this.#r,t]:this.#r.filter(o=>o!==t)),this.#C())}#O(t){this.#G(t,!this.#r.includes(t))}#$(t){this.#f!=="multi"||f(this)||(this.#e=t?this.#n.map(e=>e.id):[],this.#C())}#j(){this.#o.replaceChildren(),this.#p.clear(),this.#T.clear(),this.#l=void 0,this.#d=void 0,this.#u=void 0,this.#s=void 0,this.#c=null,this.#g=void 0,this.#b=void 0;let t=document.createElement("style");t.textContent=Me,this.#o.append(t)}#W(t){this.#j();let e=document.createElement("div");e.part.add("unavailable"),e.setAttribute("role","status");let r=document.createElement("span");r.part.add("reason"),r.textContent=t,e.append("Table unavailable: ",r),this.#o.append(e)}#F(){let t=this.#a;if(t===void 0)return;this.#j();let e=document.createElement("div");e.part.add("container"),e.tabIndex=0,e.addEventListener("keydown",a=>this.#Y(a)),e.addEventListener("focus",()=>{this.#h===null&&this.#n.length>0&&(this.#h=this.#n[0].id,this.#R())}),this.#l=e;let r=document.createElement("table");if(r.part.add("table"),t.label!==void 0&&t.label!==""){let a=document.createElement("caption");a.part.add("caption"),a.textContent=t.label,r.append(a)}if(r.append(this.#K(t),this.#U(t)),e.append(r),this.#n.length===0){let a=document.createElement("div");a.part.add("empty"),a.textContent="No rows.",e.append(a)}let o=document.createElement("div");o.part.add("frame"),o.append(e),this.#I&&o.append(this.#V()),this.#d=o,this.#o.append(o),this.#R()}#K(t){let e=document.createElement("thead"),r=document.createElement("tr");if(r.part.add("header-row"),this.#f!=="none"){let o=document.createElement("th");if(o.part.add("select-head"),o.setAttribute("scope","col"),this.#f==="multi"){let a=document.createElement("input");a.type="checkbox",a.part.add("select-all"),a.setAttribute("aria-label","Select every row"),a.addEventListener("change",()=>this.#$(a.checked)),this.#g=a,o.append(a)}r.append(o)}for(let o of t.columns){let a=document.createElement("th");a.part.add("column-header"),a.setAttribute("scope","col"),a.dataset.columnHeader=o.id,o.align==="right"&&(a.dataset.align="right");let i=document.createElement("span");i.part.add("header-cell-inner");let s;if(this.#A==="none"){let l=document.createElement("span");l.textContent=o.label,i.append(l)}else s=document.createElement("button"),s.type="button",s.part.add("column-toggle"),s.dataset.columnToggle=o.id,s.setAttribute("aria-pressed","false"),s.setAttribute("aria-label",`Select the ${o.label} column`),s.textContent=o.label,s.addEventListener("click",()=>this.#O(o.id)),i.append(s);let c=this.#I?this.#H({kind:"column",columnId:o.id},`the ${o.label} column`):void 0;c!==void 0&&i.append(c),a.append(i),r.append(a),this.#T.set(o.id,{toggle:s,...c===void 0?{}:{comment:c},cells:[],head:a})}if(this.#I){let o=document.createElement("th");o.part.add("comment-head"),o.setAttribute("scope","col"),this.#b=this.#H({kind:"whole"},"this table"),o.append(this.#b),r.append(o)}return e.append(r),e}#U(t){let e=document.createElement("tbody");for(let r of this.#n){let o=document.createElement("tr");o.part.add("row"),o.dataset.rowId=r.id,o.tabIndex=-1,o.addEventListener("mouseenter",()=>this.#B(r.id)),o.addEventListener("focusin",()=>this.#B(r.id));let a;if(this.#f!=="none"){let s=document.createElement("td");s.part.add("select-cell");let c=document.createElement("input");c.type=this.#f==="single"?"radio":"checkbox",c.part.add("row-control"),this.#f==="single"&&(c.name=`${this.#i??"crtr-table"}-row`),c.value=r.id,c.setAttribute("aria-label",`Select row ${r.id}`),c.addEventListener("change",()=>this.#k(r.id,c.checked)),a=c,s.append(c),o.append(s)}for(let s of t.columns){let c=document.createElement("td");c.part.add("cell"),c.dataset.columnId=s.id,s.align==="right"&&(c.dataset.align="right"),s.mono===!0&&(c.dataset.mono="true"),c.textContent=Le(r.cells[s.id]),o.append(c),this.#T.get(s.id)?.cells.push(c)}let i;if(this.#I){let s=document.createElement("td");s.part.add("comment-cell"),i=this.#H({kind:"row",rowId:r.id},`row ${r.id}`),s.append(i),o.append(s)}e.append(o),this.#p.set(r.id,{tr:o,...a===void 0?{}:{control:a},...i===void 0?{}:{comment:i}})}return e}get#I(){return L(this.#i)}#H(t,e){let r=document.createElement("button");return r.type="button",r.part.add("comment-trigger"),r.setAttribute("aria-label",`Comment on ${e}`),r.dataset.commentTarget=e,r.append($e()),r.addEventListener("click",()=>this.#N(t,r)),r}#V(){let t=document.createElement("div");t.part.add("comment-editor"),t.hidden=!0,t.setAttribute("role","dialog"),t.setAttribute("aria-label","Comment");let e=document.createElement("p");e.part.add("comment-target"),t.append(e);let r=document.createElement("textarea");r.part.add("comment-input"),r.placeholder="What should the agent know about this?",r.addEventListener("keydown",l=>{l.key==="Enter"&&(l.metaKey||l.ctrlKey)?(l.preventDefault(),this.#q()):l.key==="Escape"&&(l.preventDefault(),this.#z())}),t.append(r);let o=document.createElement("div");o.part.add("comment-actions");let a=document.createElement("span");a.part.add("comment-hint"),o.append(a);let i=document.createElement("span"),s=document.createElement("button");s.type="button",s.part.add("comment-cancel"),s.textContent="Cancel",s.addEventListener("click",()=>this.#z());let c=document.createElement("button");return c.type="button",c.part.add("comment-save"),c.textContent="Save",c.addEventListener("click",()=>this.#q()),i.append(s," ",c),o.append(i),t.append(o),this.#u=t,this.#m=e,this.#E=r,this.#L=a,t}#N(t,e){let r=this.#u,o=this.#d;if(r===void 0||o===void 0||!this.#I||f(this))return;this.#c=t,this.#s=e;let a=y(this.#t,t);this.#E!==void 0&&(this.#E.value=a?.text??""),this.#m!==void 0&&(this.#m.textContent=`Comment on ${e.dataset.commentTarget??st(t)}`),this.#L!==void 0&&(this.#L.textContent=a===void 0?"\u2318\u21B5 to save":"empty to delete");let i=o.getBoundingClientRect(),s=e.getBoundingClientRect();r.hidden=!1,r.style.right=`${Math.max(0,i.right-s.right)}px`,r.style.top="0px";let c=r.getBoundingClientRect().height,l=s.bottom+at+c<=window.innerHeight,h=s.top-at-c>=0;r.style.top=!l&&h?`${s.top-at-c-i.top}px`:`${s.bottom+at-i.top}px`,this.#R(),this.#E?.focus()}#z(){let t=this.#s;this.#c=null,this.#s=void 0,this.#u!==void 0&&(this.#u.hidden=!0),this.#R(),t?.focus()}#q(){let t=this.#c;t===null||f(this)||(this.#t=z(this.#t,t,this.#E?.value??""),this.#z(),this.#C())}#B(t){this.#h!==t&&(this.#h=t,this.#R())}#X(t){let e=this.#p.get(t);(e?.control??e?.tr)?.focus()}#Y(t){if(t.metaKey||t.ctrlKey||t.altKey)return;let e=t.composedPath()[0]??t.target;if(Re(e))return;let r=t.key.toLowerCase();if(r!=="j"&&r!=="k"&&r!=="x"&&r!=="c")return;let o=e instanceof HTMLElement?e.closest("[data-column-header]")?.dataset.columnHeader:void 0;if(o!==void 0&&(r==="x"||r==="c")){if(t.preventDefault(),r==="x")this.#O(o);else{let c=this.#T.get(o)?.comment;c!==void 0&&this.#N({kind:"column",columnId:o},c)}return}let a=this.#n.map(c=>c.id);if(a.length===0)return;let i=this.#h??this.#e[this.#e.length-1]??a[0];if(r==="j"||r==="k"){t.preventDefault();let c=Math.max(0,a.indexOf(i)),l=a[(c+(r==="j"?1:-1)+a.length)%a.length];this.#B(l),this.#X(l);return}if(t.preventDefault(),r==="x"){this.#M(i);return}let s=this.#p.get(i)?.comment;s!==void 0&&this.#N({kind:"row",rowId:i},s)}#D(t,e){let r=y(this.#t,e),o=t.dataset.commentTarget??st(e);t.dataset.hasComment=r===void 0?"false":"true",t.setAttribute("aria-label",r===void 0?`Comment on ${o}`:`Edit comment on ${o}`),t.title=r?.text??"",t.querySelector("path")?.setAttribute("fill",r===void 0?"none":"currentColor"),t.dataset.open=this.#J(e)?"true":"false"}#J(t){let e=this.#c;return e===null||e.kind!==t.kind?!1:e.kind==="row"&&t.kind==="row"?e.rowId===t.rowId:e.kind==="column"&&t.kind==="column"?e.columnId===t.columnId:e.kind==="whole"}#R(){for(let[t,e]of this.#p){let r=this.#e.includes(t);r?e.tr.dataset.state="selected":delete e.tr.dataset.state,e.tr.dataset.active=this.#h===t?"true":"false",e.tr.setAttribute("aria-selected",r?"true":"false"),e.control!==void 0&&(e.control.checked=r),e.comment!==void 0&&this.#D(e.comment,{kind:"row",rowId:t})}for(let[t,e]of this.#T){let r=this.#r.includes(t);e.toggle?.setAttribute("aria-pressed",r?"true":"false"),e.head.dataset.columnSelected=r?"true":"false";for(let o of e.cells)o.dataset.columnSelected=r?"true":"false";e.comment!==void 0&&this.#D(e.comment,{kind:"column",columnId:t})}if(this.#b!==void 0&&this.#D(this.#b,{kind:"whole"}),this.#g!==void 0){let t=this.#n.length>0&&this.#e.length===this.#n.length;this.#g.checked=t,this.#g.indeterminate=this.#e.length>0&&!t}this.#y()}};w("crtr-table",xt);var He=`
1144
- :host {
1145
- display: block;
1146
- /* Column count answers the element's own width, not the viewport: a slot can sit in
1147
- a narrow rail on a wide screen. */
1148
- container-type: inline-size;
1149
- }
1150
-
1151
- [part~="container"] {
1152
- display: flex;
1153
- flex-direction: column;
1154
- gap: var(--crtr-cards-container-gap, var(--crtr-space-1));
1155
- }
1156
-
1157
- /* The question reads as the agent's own prose above its control, matching the table's
1158
- caption rather than shouting over the cards it introduces. The container's gap is a
1159
- hairline, so the breathing room under the prompt is the prompt's own. */
1160
- [part~="label"] {
1161
- margin: 0 0 var(--crtr-cards-label-gap, var(--crtr-space-2));
1162
- color: var(--crtr-cards-label-text-color, var(--crtr-color-text-muted));
1163
- }
1164
-
1165
- /* The column count is anatomy rather than paint \u2014 a container query cannot read a custom
1166
- property, so the breakpoint below stays a literal. */
1167
- [part~="grid"] {
1168
- display: grid;
1169
- grid-template-columns: minmax(0, 1fr);
1170
- gap: var(--crtr-cards-grid-gap, var(--crtr-space-3));
1171
- }
1172
-
1173
- @container (min-width: 30rem) {
1174
- [part~="grid"] {
1175
- grid-template-columns: repeat(2, minmax(0, 1fr));
1176
- }
1177
-
1178
- [part~="grid"][data-columns="3"] {
1179
- grid-template-columns: repeat(3, minmax(0, 1fr));
1180
- }
1181
- }
1182
-
1183
- [part~="card"] {
1184
- display: flex;
1185
- flex-direction: column;
1186
- gap: var(--crtr-cards-card-gap, var(--crtr-space-2));
1187
- padding: var(--crtr-cards-card-padding, var(--crtr-space-3));
1188
- color: var(--crtr-cards-card-text-color, var(--crtr-color-text));
1189
- background: var(--crtr-cards-card-fill, var(--crtr-color-surface));
1190
- border: var(--crtr-cards-card-border-width, 1px)
1191
- var(--crtr-cards-card-border-style, solid)
1192
- var(--crtr-cards-card-border-color, color-mix(in srgb, var(--crtr-color-border) 60%, transparent));
1193
- border-radius: var(--crtr-cards-card-radius, var(--crtr-radius-medium));
1194
- /* The whole card is the target, not just its heading \u2014 see the click handler. */
1195
- cursor: pointer;
1196
- transition: background-color var(--crtr-cards-card-transition, 120ms ease),
1197
- border-color var(--crtr-cards-card-transition, 120ms ease);
1198
- }
1199
-
1200
- [part~="card"]:has([part~="control"]:disabled) {
1201
- cursor: default;
1202
- }
1203
-
1204
- [part~="card"]:hover,
1205
- [part~="card"][part~="active"] {
1206
- background: var(--crtr-cards-card-hover-fill, var(--crtr-color-surface-hover));
1207
- border-color: var(--crtr-cards-card-hover-border-color, var(--crtr-color-border));
1208
- }
1209
-
1210
- [part~="card"][part~="selected"] {
1211
- background: var(--crtr-cards-card-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
1212
- border-color: var(--crtr-cards-card-selected-border-color, color-mix(in srgb, var(--crtr-color-accent) 45%, transparent));
1213
- }
1214
-
1215
- [part~="card"][part~="selected"]:hover,
1216
- [part~="card"][part~="selected"][part~="active"] {
1217
- background: var(--crtr-cards-card-selected-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
1218
- }
1219
-
1220
- [part~="card-header"] {
1221
- display: flex;
1222
- align-items: flex-start;
1223
- gap: var(--crtr-cards-card-header-gap, var(--crtr-space-2));
1224
- }
1225
-
1226
- /* The label carries the click target, so the whole heading toggles the native control
1227
- the way the kit's Label does \u2014 and the comment button stays its own control. */
1228
- [part~="card-label"] {
1229
- display: flex;
1230
- flex: 1;
1231
- align-items: flex-start;
1232
- gap: var(--crtr-cards-card-label-gap, var(--crtr-space-2));
1233
- min-width: 0;
1234
- font: var(--crtr-cards-card-label-font, inherit);
1235
- cursor: pointer;
1236
- }
1237
-
1238
- ${F({scope:"cards-control"},'[part~="control"]')}
1239
-
1240
- /* Centred on the card's title line, which sets its own tighter line-height. The box size
1241
- is read back through --control-box, the local the recipe above resolves it into, so a
1242
- host that resizes the control keeps it centred without touching this offset. */
1243
- [part~="control"] {
1244
- margin-top: var(--crtr-cards-control-offset, calc((1.35em - var(--control-box)) / 2));
1245
- }
1246
-
1247
- [part~="card-heading"] {
1248
- display: grid;
1249
- flex: 1;
1250
- gap: var(--crtr-cards-card-heading-gap, calc(var(--crtr-space-1) / 2));
1251
- min-width: 0;
1252
- }
1253
-
1254
- [part~="card-title"] {
1255
- font-weight: var(--crtr-cards-card-title-font-weight, 500);
1256
- line-height: var(--crtr-cards-card-title-line-height, 1.35);
1257
- }
1258
-
1259
- [part~="card-subtitle"] {
1260
- color: var(--crtr-cards-card-subtitle-text-color, var(--crtr-color-text-muted));
1261
- font-size: var(--crtr-cards-card-subtitle-font-size, 0.875em);
1262
- }
1263
-
1264
- [part~="card-body"] {
1265
- margin: var(--crtr-cards-card-body-margin, 0);
1266
- color: var(--crtr-cards-card-body-text-color, var(--crtr-color-text-muted));
1267
- font-size: var(--crtr-cards-card-body-font-size, 0.875em);
1268
- line-height: var(--crtr-cards-card-body-line-height, 1.6);
1269
- }
1270
-
1271
- [part~="tag"] {
1272
- align-self: flex-start;
1273
- padding: var(--crtr-cards-tag-padding, 0 var(--crtr-space-1));
1274
- color: var(--crtr-cards-tag-text-color, var(--crtr-color-text-muted));
1275
- font-size: var(--crtr-cards-tag-font-size, 0.75em);
1276
- line-height: var(--crtr-cards-tag-line-height, 1.7);
1277
- border: var(--crtr-cards-tag-border-width, 1px)
1278
- var(--crtr-cards-tag-border-style, solid)
1279
- var(--crtr-cards-tag-border-color, var(--crtr-color-border));
1280
- border-radius: var(--crtr-cards-tag-radius, var(--crtr-radius-small));
1281
- }
1282
-
1283
- [part~="card"][part~="selected"] [part~="tag"] {
1284
- color: var(--crtr-cards-tag-selected-text-color, var(--crtr-color-accent));
1285
- background: var(--crtr-cards-tag-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
1286
- border-color: var(--crtr-cards-tag-selected-border-color, color-mix(in srgb, var(--crtr-color-accent) 45%, transparent));
1287
- }
1288
-
1289
- /* The affordance is quiet until you reach for it, and stays visible once a note lives
1290
- there \u2014 that presence is the whole "there is a comment here" signal. */
1291
- [part~="comment-button"] {
1292
- flex: none;
1293
- display: flex;
1294
- align-items: center;
1295
- justify-content: center;
1296
- /* One knob: the affordance is a square, so its width and height are the same value. */
1297
- width: var(--crtr-cards-comment-button-size, 1.5em);
1298
- height: var(--crtr-cards-comment-button-size, 1.5em);
1299
- padding: var(--crtr-cards-comment-button-padding, 0);
1300
- color: var(--crtr-cards-comment-button-text-color, var(--crtr-color-text-muted));
1301
- background: var(--crtr-cards-comment-button-fill, none);
1302
- border: var(--crtr-cards-comment-button-border-width, 1px)
1303
- var(--crtr-cards-comment-button-border-style, solid)
1304
- var(--crtr-cards-comment-button-border-color, transparent);
1305
- border-radius: var(--crtr-cards-comment-button-radius, var(--crtr-radius-small));
1306
- cursor: pointer;
1307
- opacity: var(--crtr-cards-comment-button-resting-opacity, 0);
1308
- transition: opacity var(--crtr-cards-comment-button-transition, var(--crtr-control-transition, 120ms ease)),
1309
- color var(--crtr-cards-comment-button-transition, var(--crtr-control-transition, 120ms ease)),
1310
- background-color var(--crtr-cards-comment-button-transition, var(--crtr-control-transition, 120ms ease));
1311
- }
1312
-
1313
- [part~="comment-button"] svg {
1314
- width: var(--crtr-cards-comment-button-icon-size, 0.875em);
1315
- height: var(--crtr-cards-comment-button-icon-size, 0.875em);
1316
- fill: var(--crtr-cards-comment-button-icon-fill, none);
1317
- stroke: var(--crtr-cards-comment-button-icon-stroke-color, currentColor);
1318
- stroke-width: var(--crtr-cards-comment-button-icon-stroke-width, 2);
1319
- stroke-linecap: var(--crtr-cards-comment-button-icon-line-cap, round);
1320
- stroke-linejoin: var(--crtr-cards-comment-button-icon-line-join, round);
1321
- /* The glyph is never the event target: a repaint that swaps it mid-press would
1322
- otherwise leave mousedown and mouseup on different nodes and eat the click. */
1323
- pointer-events: none;
1324
- }
1325
-
1326
- [part~="comment-button"]:hover {
1327
- color: var(--crtr-cards-comment-button-hover-text-color, var(--crtr-color-text));
1328
- background: var(--crtr-cards-comment-button-hover-fill, var(--crtr-color-surface-hover));
1329
- }
1330
-
1331
- [part~="comment-button"][part~="has-comment"] {
1332
- color: var(--crtr-cards-comment-button-noted-text-color, var(--crtr-color-accent));
1333
- }
1334
-
1335
- ${u({scope:"cards-comment-button"},'[part~="comment-button"]')}
1336
- [part~="card"]:hover [part~="comment-button"],
1337
- [part~="card"]:focus-within [part~="comment-button"],
1338
- [part~="comment-button"]:focus-visible,
1339
- [part~="comment-button"][part~="has-comment"] {
1340
- opacity: var(--crtr-cards-comment-button-revealed-opacity, 1);
1341
- }
1342
-
1343
- [part~="comment-editor"] {
1344
- display: grid;
1345
- gap: var(--crtr-cards-comment-editor-gap, var(--crtr-space-2));
1346
- width: 100%;
1347
- padding: var(--crtr-cards-comment-editor-padding, var(--crtr-space-2));
1348
- text-align: var(--crtr-cards-comment-editor-text-align, left);
1349
- background: var(--crtr-cards-comment-editor-fill, var(--crtr-color-background));
1350
- border: var(--crtr-cards-comment-editor-border-width, 1px)
1351
- var(--crtr-cards-comment-editor-border-style, solid)
1352
- var(--crtr-cards-comment-editor-border-color, var(--crtr-color-border));
1353
- border-radius: var(--crtr-cards-comment-editor-radius, var(--crtr-radius-small));
1354
- cursor: auto;
1355
- }
1356
-
1357
- /* The editor's own prose, in the page's voice \u2014 not a caps-mono field label shouting a
1358
- card id at someone who just clicked that card. */
1359
- [part~="comment-subject"] {
1360
- color: var(--crtr-cards-comment-subject-text-color, var(--crtr-color-text-muted));
1361
- font-size: var(--crtr-cards-comment-subject-font-size, 0.875em);
1362
- }
1363
-
1364
- [part~="comment-hint"] {
1365
- color: var(--crtr-cards-comment-hint-text-color, var(--crtr-color-text-muted));
1366
- font-size: var(--crtr-cards-comment-hint-font-size, 0.875em);
1367
- }
1368
-
1369
- ${S({scope:"cards-comment-input"},'[part~="comment-input"]')}
1370
- [part~="comment-input"] {
1371
- min-height: var(--crtr-cards-comment-input-min-height, 4.5em);
1372
- resize: vertical;
1373
- }
1374
-
1375
- [part~="comment-actions"] {
1376
- display: flex;
1377
- align-items: center;
1378
- justify-content: space-between;
1379
- gap: var(--crtr-cards-comment-actions-gap, var(--crtr-space-2));
1380
- }
1381
-
1382
- [part~="comment-buttons"] {
1383
- display: flex;
1384
- gap: var(--crtr-cards-comment-buttons-gap, var(--crtr-space-1));
1385
- }
1386
-
1387
- [part~="comment-cancel"] {
1388
- padding: var(--crtr-cards-comment-cancel-padding, var(--crtr-space-1) var(--crtr-space-2));
1389
- color: var(--crtr-cards-comment-cancel-text-color, var(--crtr-color-text-muted));
1390
- font: var(--crtr-cards-comment-cancel-font, inherit);
1391
- font-size: var(--crtr-cards-comment-cancel-font-size, 0.875em);
1392
- background: var(--crtr-cards-comment-cancel-fill, none);
1393
- border: var(--crtr-cards-comment-cancel-border-width, 1px)
1394
- var(--crtr-cards-comment-cancel-border-style, solid)
1395
- var(--crtr-cards-comment-cancel-border-color, transparent);
1396
- border-radius: var(--crtr-cards-comment-cancel-radius, var(--crtr-radius-small));
1397
- cursor: pointer;
1398
- transition: color var(--crtr-cards-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
1399
- background-color var(--crtr-cards-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
1400
- border-color var(--crtr-cards-comment-cancel-transition, var(--crtr-control-transition, 120ms ease));
1401
- }
1402
-
1403
- [part~="comment-cancel"]:hover {
1404
- color: var(--crtr-cards-comment-cancel-hover-text-color, var(--crtr-color-text));
1405
- background: var(--crtr-cards-comment-cancel-hover-fill, var(--crtr-color-surface-hover));
1406
- }
1407
-
1408
- [part~="comment-save"] {
1409
- padding: var(--crtr-cards-comment-save-padding, var(--crtr-space-1) var(--crtr-space-2));
1410
- color: var(--crtr-cards-comment-save-text-color, var(--crtr-color-accent-contrast));
1411
- font: var(--crtr-cards-comment-save-font, inherit);
1412
- font-size: var(--crtr-cards-comment-save-font-size, 0.875em);
1413
- background: var(--crtr-cards-comment-save-fill, var(--crtr-color-accent));
1414
- border: var(--crtr-cards-comment-save-border-width, 1px)
1415
- var(--crtr-cards-comment-save-border-style, solid)
1416
- var(--crtr-cards-comment-save-border-color, var(--crtr-color-accent));
1417
- border-radius: var(--crtr-cards-comment-save-radius, var(--crtr-radius-small));
1418
- cursor: pointer;
1419
- transition: color var(--crtr-cards-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
1420
- background-color var(--crtr-cards-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
1421
- border-color var(--crtr-cards-comment-save-transition, var(--crtr-control-transition, 120ms ease));
1422
- }
1423
-
1424
- /* Mixing toward the text colour darkens on a light token set and lightens on a dark one \u2014
1425
- a brightness filter moves the wrong way on one of them. */
1426
- [part~="comment-save"]:hover {
1427
- background: var(--crtr-cards-comment-save-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
1428
- border-color: var(--crtr-cards-comment-save-hover-border-color, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
1429
- }
1430
-
1431
- ${u({scope:"cards-comment-cancel"},'[part~="comment-cancel"]')}
1432
- ${u({scope:"cards-comment-save"},'[part~="comment-save"]')}
1433
- /* These sit in the flow of the page rather than above it, so they carry no elevation \u2014
1434
- a shadow in this bundle means floating (a popover, an editor). Each state keeps its own
1435
- scope even though their kit defaults match: one scope never names two different parts. */
1436
- [part~="unavailable"] {
1437
- padding: var(--crtr-cards-unavailable-padding, var(--crtr-space-3));
1438
- color: var(--crtr-cards-unavailable-text-color, var(--crtr-color-text-muted));
1439
- background: var(--crtr-cards-unavailable-fill, var(--crtr-color-surface));
1440
- border: var(--crtr-cards-unavailable-border-width, 1px)
1441
- var(--crtr-cards-unavailable-border-style, solid)
1442
- var(--crtr-cards-unavailable-border-color, var(--crtr-color-border));
1443
- border-radius: var(--crtr-cards-unavailable-radius, var(--crtr-radius-medium));
1444
- }
1445
-
1446
- [part~="empty"] {
1447
- padding: var(--crtr-cards-empty-padding, var(--crtr-space-3));
1448
- color: var(--crtr-cards-empty-text-color, var(--crtr-color-text-muted));
1449
- background: var(--crtr-cards-empty-fill, var(--crtr-color-surface));
1450
- border: var(--crtr-cards-empty-border-width, 1px)
1451
- var(--crtr-cards-empty-border-style, solid)
1452
- var(--crtr-cards-empty-border-color, var(--crtr-color-border));
1453
- border-radius: var(--crtr-cards-empty-radius, var(--crtr-radius-medium));
1454
- }
1455
-
1456
- [part~="loading"] {
1457
- padding: var(--crtr-cards-loading-padding, var(--crtr-space-3));
1458
- color: var(--crtr-cards-loading-text-color, var(--crtr-color-text-muted));
1459
- background: var(--crtr-cards-loading-fill, var(--crtr-color-surface));
1460
- border: var(--crtr-cards-loading-border-width, 1px)
1461
- var(--crtr-cards-loading-border-style, solid)
1462
- var(--crtr-cards-loading-border-color, var(--crtr-color-border));
1463
- border-radius: var(--crtr-cards-loading-radius, var(--crtr-radius-medium));
1464
- }
1465
-
1466
- [part~="kind"] {
1467
- color: var(--crtr-cards-kind-text-color, var(--crtr-color-text));
1468
- font-family: var(--crtr-cards-kind-font-family, var(--crtr-font-mono));
1469
- }
1470
-
1471
- [part~="reason"] {
1472
- display: block;
1473
- margin-top: var(--crtr-cards-reason-gap, var(--crtr-space-1));
1474
- font-size: var(--crtr-cards-reason-font-size, 0.875em);
1475
- }
1476
- `,ze=new Set(["id","title","subtitle","body","tag"]);function Oe(n){if(n===null||typeof n!="object"||Array.isArray(n))return null;let t=n;if(typeof t.id!="string"||t.id===""||typeof t.title!="string"||t.title==="")return null;for(let e of["subtitle","body","tag"])if(t[e]!==void 0&&typeof t[e]!="string")return null;for(let e of Object.keys(t))if(!ze.has(e))return null;return{id:t.id,title:t.title,subtitle:t.subtitle,body:t.body,tag:t.tag}}function Ie(n){if(!Array.isArray(n))return null;let t=[],e=new Set;for(let r of n){let o=Oe(r);if(o===null||e.has(o.id))return null;e.add(o.id),t.push(o)}return t}var Ne=new Set(["label","cards","mode","columns"]),Yt="prompt-label";function je(n){for(let a of Object.keys(n))if(!Ne.has(a))return{status:"invalid",reason:`unknown config property "${a}"`};let t=n.label;if(t!==void 0&&typeof t!="string")return{status:"invalid",reason:"label must be a string"};let e=n.mode;if(e!=="single"&&e!=="multi")return{status:"invalid",reason:'mode must be "single" or "multi"'};let r=n.columns;if(r!==void 0&&r!==2&&r!==3)return{status:"invalid",reason:"columns must be 2 or 3"};let o;if(n.cards!==void 0){let a=Ie(n.cards);if(a===null)return{status:"invalid",reason:"cards must be a list of uniquely identified cards"};o=a}return{status:"ok",config:{label:t,cards:o,mode:e,columns:r}}}function Be(n){return n instanceof HTMLTextAreaElement||n instanceof HTMLElement&&n.isContentEditable?!0:n instanceof HTMLInputElement?n.type!=="checkbox"&&n.type!=="radio":!1}var yt="http://www.w3.org/2000/svg";function De(n){let t=document.createElementNS(yt,"svg");t.setAttribute("viewBox","0 0 24 24"),t.setAttribute("aria-hidden","true");let e=document.createElementNS(yt,"path");e.setAttribute("d","M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"),t.append(e);let r=n?[["7","9","17","9"],["7","13","13","13"]]:[["12","7","12","13"],["9","10","15","10"]];for(let[o,a,i,s]of r){let c=document.createElementNS(yt,"line");c.setAttribute("x1",o??"0"),c.setAttribute("y1",a??"0"),c.setAttribute("x2",i??"0"),c.setAttribute("y2",s??"0"),t.append(c)}return t}function Pe(n){if(n===void 0||n==="")return null;let t=document.createElement("p");return t.part.add("label"),t.id=Yt,t.textContent=n,t}var Vt=0,wt=class extends HTMLElement{static observedAttributes=["inert"];#o=document.createElement("div");#i;#a=null;#n=null;#e=[];#r;#t=[];#h=[];#c=null;#s=new Map;#l=null;#d=null;constructor(){super(),Vt+=1,this.#i=`crtr-cards-${Vt}`;let t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent=He,this.#o.part.add("container"),this.#o.addEventListener("keydown",r=>this.#A(r)),t.append(e,this.#o)}connectedCallback(){let t=T(this);if(t.status!=="ok"){this.#E(t.reason);return}let e=je(t.config);if(e.status!=="ok"){this.#E(e.reason);return}this.#a=e.config,this.#r=D(this),this.#r!==void 0&&B(this,this.#r,()=>this.#k()),this.#n=Pe(e.config.label),this.#e=e.config.cards??[],this.#m(),this.#p()}attributeChangedCallback(){this.isConnected&&this.#u()}#u(){let t=f(this);j(this.#o,t),t&&this.#l!==null&&this.#v(!1)}#m(){if(this.#r===void 0)return;let t=N(this.#r);if(t===void 0)return;let e=this.#e.map(r=>r.id).filter(r=>q(t.selectedCardIds).includes(r));this.#t=this.#a?.mode==="single"?e.slice(0,1):e,this.#h=O(t.comments)}#E(t){this.#s.clear(),this.#l=null,this.#d=null;let e=document.createElement("div");e.part.add("unavailable"),e.setAttribute("role","status");let r=document.createElement("span");r.part.add("kind"),r.textContent="cards";let o=document.createElement("span");o.part.add("reason"),o.textContent=t,e.append("Component unavailable: ",r,o),this.#g(e)}#L(t,e){let r=document.createElement("div");r.part.add(t),r.setAttribute("role","status"),r.textContent=e,this.#g(r)}#g(t){this.#n===null?this.#o.replaceChildren(t):this.#o.replaceChildren(this.#n,t)}#p(){let t=this.#a;if(t===null)return;this.#s.clear(),this.#l=null,this.#d=null;let e=new Set(this.#e.map(o=>o.id));if(this.#t=this.#t.filter(o=>e.has(o)),this.#h=this.#h.filter(o=>o.anchor.kind!=="card"||e.has(o.anchor.cardId)),this.#e.length===0){this.#L("empty","No cards to choose from.");return}let r=document.createElement("div");r.part.add("grid"),t.columns===3&&(r.dataset.columns="3"),this.#n!==null&&(r.setAttribute("role",t.mode==="single"?"radiogroup":"group"),r.setAttribute("aria-labelledby",Yt)),r.append(...this.#e.map(o=>this.#T(o,t.mode,this.#i))),this.#g(r),this.#b()}#T(t,e,r){let o=document.createElement("div");o.part.add("card"),o.dataset.cardId=t.id;let a=document.createElement("div");a.part.add("card-header");let i=document.createElement("label");i.part.add("card-label");let s=document.createElement("input");s.part.add("control"),s.type=e==="single"?"radio":"checkbox",s.name=r,s.value=t.id,s.addEventListener("change",()=>this.#f(t.id,s.checked)),s.addEventListener("focus",()=>this.#S(t.id,!1));let c=document.createElement("span");c.part.add("card-heading");let l=document.createElement("span");if(l.part.add("card-title"),l.textContent=t.title,c.append(l),t.subtitle!==void 0&&t.subtitle!==""){let p=document.createElement("span");p.part.add("card-subtitle"),p.textContent=t.subtitle,c.append(p)}let h;if(L(this.#r)&&(h=document.createElement("button"),h.type="button",h.part.add("comment-button"),h.addEventListener("click",p=>{p.stopPropagation(),this.#S(t.id,!1),this.#w({kind:"card",cardId:t.id},t.title,o,null)})),i.append(s,c),a.append(i),h!==void 0&&a.append(h),o.append(a),t.body!==void 0&&t.body!==""){let p=document.createElement("p");p.part.add("card-body"),p.textContent=t.body,o.append(p)}let g=null;return t.tag!==void 0&&t.tag!==""&&(g=document.createElement("span"),g.part.add("tag"),g.textContent=t.tag,o.append(g)),o.addEventListener("mouseenter",()=>this.#S(t.id,!1)),o.addEventListener("mouseleave",()=>{this.#c===t.id&&this.#S(null,!1)}),o.addEventListener("focusin",()=>this.#S(t.id,!1)),o.addEventListener("click",p=>{s.disabled||p.composedPath().includes(i)||document.getSelection()?.isCollapsed!==!1&&(this.#S(t.id,!1),this.#f(t.id,!this.#t.includes(t.id)))}),this.#s.set(t.id,{root:o,control:s,...h===void 0?{}:{commentButton:h},tag:g}),o}#b(){let t=this.#a?.mode??"multi",e=t==="single"?this.#t[0]??this.#e[0]?.id:void 0;for(let r of this.#e){let o=this.#s.get(r.id);if(o===void 0)continue;let a=this.#t.includes(r.id);o.root.part.toggle("selected",a),o.root.part.toggle("active",this.#c===r.id),o.control.checked=a,o.control.tabIndex=t==="single"&&r.id!==e?-1:0;let i=y(this.#h,{kind:"card",cardId:r.id});o.commentButton!==void 0&&this.#y(o.commentButton,i,r.title)}this.#u()}#y(t,e,r){let o=e!==void 0,a=t.part.contains("has-comment")!==o;t.part.toggle("has-comment",o),t.setAttribute("aria-label",o?`Edit comment on ${r}`:`Comment on ${r}`),o?t.title=e.text:t.removeAttribute("title"),(a||t.childElementCount===0)&&t.replaceChildren(De(o))}#S(t,e){this.#c===t&&!e||(this.#c=t,this.#b(),e&&t!==null&&this.#s.get(t)?.control.focus())}#f(t,e){if(!(this.#a===null||f(this))){if(this.#a.mode==="single")this.#t=[t];else{let r=e?[...this.#t,t]:this.#t.filter(o=>o!==t);this.#t=this.#e.map(o=>o.id).filter(o=>r.includes(o))}this.#b(),this.#M()}}#A(t){if(t.metaKey||t.ctrlKey||t.altKey||Be(t.target))return;let e=this.#e.map(a=>a.id);if(e.length===0)return;let r=t.key.toLowerCase(),o=this.#c??this.#t[this.#t.length-1]??e[0]??"";if(r==="j"||r==="k"){t.preventDefault();let a=Math.max(0,e.indexOf(o)),s=e[(a+(r==="j"?1:-1)+e.length)%e.length];s!==void 0&&this.#S(s,!0);return}if(r==="x"){t.preventDefault(),this.#f(o,this.#a?.mode==="single"?!0:!this.#t.includes(o));return}if(r==="c"){t.preventDefault();let a=this.#e.find(s=>s.id===o),i=this.#s.get(o);if(a===void 0||i?.commentButton===void 0)return;this.#S(o,!1),this.#w({kind:"card",cardId:a.id},a.title,i.root,null)}}#w(t,e,r,o){if(r===null||!L(this.#r)||f(this))return;let a=this.#l?.anchor,i=a!==void 0&&a.kind===t.kind&&(t.kind!=="card"||a.kind==="card"&&a.cardId===t.cardId);this.#v(!1),!i&&this.#C({anchor:t,target:e,mount:r,after:o})}#C(t){let e=document.createElement("div");e.part.add("comment-editor"),e.addEventListener("click",h=>h.stopPropagation());let r=document.createElement("p");r.part.add("comment-subject"),r.textContent=`Comment on ${t.target}`;let o=document.createElement("textarea");o.part.add("comment-input"),o.placeholder="What should the agent know about this?",o.value=y(this.#h,t.anchor)?.text??"";let a=document.createElement("div");a.part.add("comment-actions");let i=document.createElement("span");i.part.add("comment-hint"),i.textContent=y(this.#h,t.anchor)!==void 0?"empty to delete":"\u2318\u21B5 to save";let s=document.createElement("div");s.part.add("comment-buttons");let c=document.createElement("button");c.type="button",c.part.add("comment-cancel"),c.textContent="Cancel",c.addEventListener("click",()=>this.#v(!0));let l=document.createElement("button");l.type="button",l.part.add("comment-save"),l.textContent="Save",l.addEventListener("click",()=>this.#x(o.value)),s.append(c,l),a.append(i,s),o.addEventListener("keydown",h=>{if(h.key==="Enter"&&(h.metaKey||h.ctrlKey)){h.preventDefault(),this.#x(o.value);return}h.key==="Escape"&&(h.preventDefault(),this.#v(!0))}),e.append(r,o,a),t.after!==null?t.after.after(e):t.mount.append(e),this.#l=t,this.#d=e,o.focus()}#v(t){let e=this.#l;this.#d?.remove(),this.#d=null,this.#l=null,!(!t||e===null)&&e.anchor.kind==="card"&&this.#s.get(e.anchor.cardId)?.control.focus()}#x(t){let e=this.#l;e===null||f(this)||(this.#h=z(this.#h,e.anchor,t),this.#v(!0),this.#b(),this.#M())}#k(){return{selectedCardIds:[...this.#t],comments:this.#h.map(t=>({...t}))}}#M(){this.#r!==void 0&&M(this.#r,this.#k())}};w("crtr-cards",wt);var V=["var(--crtr-chart-1)","var(--crtr-chart-2)","var(--crtr-chart-3)","var(--crtr-chart-4)","var(--crtr-chart-5)"],_e="http://www.w3.org/2000/svg",kt=260,Xt=12,Ke=12,qe=28,Ge=5,Jt=88,We=5.8,Qt=14,Fe=/^\d{4}-\d{2}-\d{2}(?:[T ]|$)/,Ue=/^\d{4}-\d{2}-\d{2}$/,Ve=`
1477
- :host {
1478
- display: block;
1479
- }
1480
-
1481
- [part="container"] {
1482
- display: flex;
1483
- flex-direction: column;
1484
- gap: var(--crtr-chart-container-gap, var(--crtr-space-2));
1485
- width: 100%;
1486
- }
1487
-
1488
- [part="title"] {
1489
- color: var(--crtr-chart-title-text-color, var(--crtr-color-text));
1490
- font-weight: var(--crtr-chart-title-font-weight, 500);
1491
- }
1492
-
1493
- [part="legend"] {
1494
- display: flex;
1495
- flex-wrap: wrap;
1496
- align-items: center;
1497
- gap: var(--crtr-chart-legend-gap, var(--crtr-space-1) var(--crtr-space-4));
1498
- color: var(--crtr-chart-legend-text-color, var(--crtr-color-text-muted));
1499
- font-size: var(--crtr-chart-legend-font-size, 0.875em);
1500
- }
1501
-
1502
- [part="legend-item"] {
1503
- display: flex;
1504
- align-items: center;
1505
- gap: var(--crtr-chart-legend-item-gap, var(--crtr-space-1));
1506
- min-width: 0;
1507
- }
1508
-
1509
- /* Sized against the legend's own text, not a spacing token doing a sizing job. One knob:
1510
- the swatch is a square, so its width and height are the same value. */
1511
- [part="legend-swatch"] {
1512
- flex: none;
1513
- width: var(--crtr-chart-legend-swatch-size, 0.75em);
1514
- height: var(--crtr-chart-legend-swatch-size, 0.75em);
1515
- border-radius: var(--crtr-chart-legend-swatch-radius, calc(var(--crtr-radius-small) * 0.5));
1516
- }
1517
-
1518
- [part="legend-label"] {
1519
- overflow: hidden;
1520
- text-overflow: ellipsis;
1521
- white-space: nowrap;
1522
- }
1523
-
1524
- [part="plot"] {
1525
- width: 100%;
1526
- }
1527
-
1528
- [part="chart"] {
1529
- display: block;
1530
- height: var(--crtr-chart-plot-height, 260px);
1531
- overflow: visible;
1532
- }
1533
-
1534
- /* Waiting for data and having none hold the same space, but each stays in its own scope:
1535
- one scope never names two different parts. */
1536
- [part="empty"] {
1537
- display: flex;
1538
- align-items: center;
1539
- justify-content: center;
1540
- padding: var(--crtr-chart-empty-padding, 0 var(--crtr-space-4));
1541
- color: var(--crtr-chart-empty-text-color, var(--crtr-color-text-muted));
1542
- font-size: var(--crtr-chart-empty-font-size, 0.875em);
1543
- border: var(--crtr-chart-empty-border-width, 1px)
1544
- var(--crtr-chart-empty-border-style, dashed)
1545
- var(--crtr-chart-empty-border-color, var(--crtr-color-border));
1546
- border-radius: var(--crtr-chart-empty-radius, var(--crtr-radius-medium));
1547
- }
1548
-
1549
- [part="status"] {
1550
- display: flex;
1551
- align-items: center;
1552
- justify-content: center;
1553
- padding: var(--crtr-chart-status-padding, 0 var(--crtr-space-4));
1554
- color: var(--crtr-chart-status-text-color, var(--crtr-color-text-muted));
1555
- font-size: var(--crtr-chart-status-font-size, 0.875em);
1556
- border: var(--crtr-chart-status-border-width, 1px)
1557
- var(--crtr-chart-status-border-style, dashed)
1558
- var(--crtr-chart-status-border-color, var(--crtr-color-border));
1559
- border-radius: var(--crtr-chart-status-radius, var(--crtr-radius-medium));
1560
- }
1561
-
1562
- /* Flat: this sits in the flow of the page. A shadow in this bundle means floating. */
1563
- [part="unavailable"] {
1564
- padding: var(--crtr-chart-unavailable-padding, var(--crtr-space-3));
1565
- color: var(--crtr-chart-unavailable-text-color, var(--crtr-color-text-muted));
1566
- background: var(--crtr-chart-unavailable-fill, var(--crtr-color-surface));
1567
- border: var(--crtr-chart-unavailable-border-width, 1px)
1568
- var(--crtr-chart-unavailable-border-style, solid)
1569
- var(--crtr-chart-unavailable-border-color, var(--crtr-color-border));
1570
- border-radius: var(--crtr-chart-unavailable-radius, var(--crtr-radius-medium));
1571
- }
1572
-
1573
- [part="reason"] {
1574
- color: var(--crtr-chart-reason-text-color, var(--crtr-color-text));
1575
- font-family: var(--crtr-chart-reason-font-family, var(--crtr-font-mono));
1576
- }
1577
-
1578
- .grid {
1579
- stroke: var(--crtr-chart-grid-stroke-color, var(--crtr-color-border));
1580
- stroke-width: var(--crtr-chart-grid-stroke-width, 1);
1581
- opacity: var(--crtr-chart-grid-opacity, 0.45);
1582
- }
1583
-
1584
- /* The gridline the marks are read against carries more weight than the rest. */
1585
- .grid.baseline {
1586
- opacity: var(--crtr-chart-grid-baseline-opacity, 0.9);
1587
- }
1588
-
1589
- .tick {
1590
- fill: var(--crtr-chart-tick-text-color, var(--crtr-color-text-muted));
1591
- font-size: var(--crtr-chart-tick-font-size, 0.75em);
1592
- }
1593
-
1594
- /* Mark paint. Series colour arrives per node from the theme's chart ramp; everything
1595
- these marks are drawn WITH is a knob, which is why none of it is an SVG attribute. */
1596
- [part="line"] {
1597
- stroke-width: var(--crtr-chart-line-stroke-width, 2);
1598
- stroke-linecap: var(--crtr-chart-line-line-cap, round);
1599
- stroke-linejoin: var(--crtr-chart-line-line-join, round);
1600
- }
1601
-
1602
- [part="area"] {
1603
- fill-opacity: var(--crtr-chart-area-fill-opacity, 0.18);
1604
- }
1605
-
1606
- [part="point"] {
1607
- r: var(--crtr-chart-point-radius, 2.5);
1608
- }
1609
-
1610
- /* A bar never rounds away more than a third of its own width, and --bar-max-radius is
1611
- that width \u2014 the one number here the stylesheet cannot know, so the plot writes it onto
1612
- the SVG and the knob is clamped against it. */
1613
- [part="bar"] {
1614
- rx: min(var(--crtr-chart-bar-radius, 2px), var(--bar-max-radius));
1615
- }
1616
- `;function Ye(n){let t=n.kind;if(t!=="line"&&t!=="bar"&&t!=="area")return{status:"invalid",reason:"chart kind must be line, bar or area"};let e=n.x;if(typeof e!="string"||e==="")return{status:"invalid",reason:"chart config has no x field"};if(!Array.isArray(n.y)||n.y.length===0)return{status:"invalid",reason:"chart config has no y series"};let r=[];for(let[o,a]of n.y.entries()){if(a===null||typeof a!="object"||Array.isArray(a))return{status:"invalid",reason:`chart series #${o} is not { field, label? }`};let i=a;if(typeof i.field!="string"||i.field==="")return{status:"invalid",reason:`chart series #${o} has no field`};if(i.label!==void 0&&typeof i.label!="string")return{status:"invalid",reason:`chart series "${i.field}" label is not a string`};r.push({field:i.field,label:i.label})}return n.title!==void 0&&typeof n.title!="string"?{status:"invalid",reason:"chart title is not a string"}:{status:"ok",config:{kind:t,x:e,y:r,title:n.title,data:n.data}}}function Xe(n){return Array.isArray(n)&&n.every(t=>t!==null&&typeof t=="object"&&!Array.isArray(t))}function Zt(n,t){return t.split(".").reduce((e,r)=>{if(!(e==null||typeof e!="object"))return e[r]},n)}function Et(n){return n.includes(" ")?n:(n.includes(".")?n.split(".").pop()??n:n).replace(/[_-]+/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").split(/\s+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")}function Je(n){if(typeof n=="number")return Number.isFinite(n)?n:null;if(typeof n=="boolean")return n?1:0;if(typeof n=="bigint")return Number(n);if(typeof n=="string"){let t=n.replace(/[\s,_]/g,"").replace(/^[$£€¥]/,"").replace(/%$/,"");if(t===""||t==="-")return null;let e=Number(t);return Number.isFinite(e)?e:null}return null}function Qe(n){if(n==null)return"";if(n instanceof Date)return Number.isNaN(n.getTime())?"":n.toLocaleDateString(void 0,{month:"short",day:"numeric"});if(typeof n=="string"){let t=n.trim();if(Fe.test(t)){let e=new Date(t);if(!Number.isNaN(e.getTime()))return e.toLocaleDateString(void 0,Ue.test(t)?{month:"short",day:"numeric",timeZone:"UTC"}:{month:"short",day:"numeric"})}return n}return typeof n=="object"?"":String(n)}function Ze(n){return n.length>Qt?`${n.slice(0,Qt-1)}\u2026`:n}function tr(n,t,e){let r=t>=1?0:Math.min(4,Math.ceil(-Math.log10(t)));return new Intl.NumberFormat(void 0,{maximumFractionDigits:r,notation:e?"compact":"standard"}).format(n)}function te(n){return new Intl.NumberFormat(void 0,{maximumFractionDigits:4}).format(n)}function er(n,t,e){let r=n,o=t;if((!Number.isFinite(r)||!Number.isFinite(o))&&(r=0,o=1),r===o){let p=Math.abs(r)>0?Math.abs(r)*.1:1;r-=p,o+=p}let a=(o-r)/Math.max(1,e),i=10**Math.floor(Math.log10(a)),s=a/i,c=(s<=1?1:s<=2?2:s<=5?5:10)*i,l=Math.floor(r/c)*c,h=Math.ceil(o/c)*c,g=[];for(let p=l;p<=h+c/2;p+=c)g.push(Number(p.toFixed(10)));return{ticks:g,domainMin:l,domainMax:h,step:c}}function rr(n){let t=[],e=[];for(let r of n){let o=e[e.length-1];if(o===void 0||r.index===o.index+1){e.push(r);continue}t.push(e),e=[r]}return e.length>0&&t.push(e),t}function A(n,t){let e=document.createElementNS(_e,n);return t!==void 0&&e.setAttribute("part",t),e}function P(n,t){for(let[e,r]of Object.entries(t))n.setAttribute(e,String(r))}function ee(n){let t=A("title");return t.textContent=n,t}var Ct=class extends HTMLElement{#o=document.createElement("div");#i=document.createElement("div");#a=document.createElement("div");#n=document.createElement("div");#e=null;#r=null;#t=null;#h=0;#c=0;constructor(){super();let t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent=Ve,this.#o.part.add("container"),this.#i.part.add("title"),this.#a.part.add("legend"),this.#n.part.add("plot"),t.append(e,this.#o)}connectedCallback(){++this.#c,this.#e=null,this.#r=null;let t=T(this);if(t.status!=="ok"){this.#l(t.reason);return}let e=Ye(t.config);if(e.status!=="ok"){this.#l(e.reason);return}this.#e=e.config,this.#d(),this.#s();let{data:r}=e.config;if(r!==void 0&&!Xe(r)){this.#l("chart data is not a list of rows");return}this.#r=r??[],this.#u()}disconnectedCallback(){this.#c+=1,this.#t?.disconnect(),this.#t=null}#s(){this.#t?.disconnect(),this.#h=this.#n.getBoundingClientRect().width;let t=new ResizeObserver(e=>{let r=e[0]?.contentRect.width??0;Math.abs(this.#h-r)<.5||(this.#h=r,this.#u())});t.observe(this.#n),this.#t=t}#l(t){this.#t?.disconnect(),this.#t=null;let e=document.createElement("div");e.part.add("unavailable"),e.setAttribute("role","status");let r=document.createElement("span");r.part.add("reason"),r.textContent=t,e.append("Chart unavailable: ",r),this.#o.replaceChildren(e)}#d(){let t=this.#e;if(t===null)return;let e=[],r=t.title?.trim();r!==void 0&&r.length>0&&(this.#i.textContent=r,e.push(this.#i)),t.y.length>1&&(this.#a.replaceChildren(...t.y.map((o,a)=>{let i=document.createElement("div");i.part.add("legend-item");let s=document.createElement("span");s.part.add("legend-swatch"),s.setAttribute("aria-hidden","true"),s.style.background=V[a%V.length]??V[0];let c=document.createElement("span");return c.part.add("legend-label"),c.textContent=o.label??Et(o.field),i.append(s,c),i})),e.push(this.#a)),e.push(this.#n),this.#o.replaceChildren(...e)}#u(){let t=this.#e,e=this.#r;if(t===null||e===null)return;let r=e.map(d=>Qe(Zt(d,t.x))),o=t.y.map((d,m)=>{let v=[];return e.forEach((b,k)=>{let E=Je(Zt(b,d.field));E!==null&&v.push({index:k,value:E})}),{label:d.label??Et(d.field),color:V[m%V.length]??V[0],points:v}}),a=0,i=0,s=0;for(let d of o)for(let m of d.points)a===0?(i=m.value,s=m.value):(m.value<i&&(i=m.value),m.value>s&&(s=m.value)),a+=1;if(t.kind!=="line"&&(i=Math.min(i,0),s=Math.max(s,0)),a===0||e.length===0){let d=document.createElement("div");d.part.add("empty"),d.style.height="var(--crtr-chart-plot-height, 260px)",d.textContent="No data to chart",this.#n.replaceChildren(d);return}let c=this.#h;if(c<=0){let d=document.createElement("div");d.style.height="var(--crtr-chart-plot-height, 260px)",this.#n.replaceChildren(d);return}let{ticks:l,domainMin:h,domainMax:g,step:p}=er(i,s,Ge),ne=Math.max(...l.map(d=>Math.abs(d)))>=1e4,Mt=l.map(d=>tr(d,p,ne)),Y=Math.min(88,Math.max(36,Math.max(...Mt.map(d=>d.length))*6.4+12)),Q=Math.max(0,c-Y-Ke),Lt=Math.max(0,kt-Xt-qe),$t=Xt+Lt,it=r.length>0?Q/r.length:Q,G=d=>Y+it*(d+.5),ae=g-h||1,_=d=>$t-(d-h)/ae*Lt,Rt=Math.min(Math.max(0,h),g),Z=_(Rt),$=A("svg","chart");P($,{role:"img",width:c,height:kt,viewBox:`0 0 ${c} ${kt}`}),$.setAttribute("aria-label",`${t.kind} chart of ${o.map(d=>d.label).join(", ")} by ${Et(t.x)}`),l.forEach((d,m)=>{let v=A("line");v.setAttribute("class",d===Rt?"grid baseline":"grid"),P(v,{x1:Y,x2:Y+Q,y1:_(d),y2:_(d)});let b=A("text");b.setAttribute("class","tick"),P(b,{x:Y-8,y:_(d),"text-anchor":"end","dominant-baseline":"central"}),b.textContent=Mt[m]??"",$.append(v,b)});let K=[];if(r.length>0){let d=Math.max(2,Math.min(r.length,Math.floor(Q/Jt)||1)),m=Math.max(1,Math.ceil((r.length-1)/(d-1)));for(let b=0;b<r.length;b+=m)K.push(b);let v=K[K.length-1]??0;v!==r.length-1&&((r.length-1-v)*it>=Jt?K.push(r.length-1):K[K.length-1]=r.length-1)}for(let d of K){let m=Ze(r[d]??""),v=G(d),b=m.length*We/2,k=v-b<0?"start":v+b>c?"end":"middle",E=A("text");E.setAttribute("class","tick"),P(E,{x:k==="start"?0:k==="end"?c:v,y:$t+16,"text-anchor":k,"dominant-baseline":"hanging"}),E.textContent=m,$.append(E)}if(t.kind==="bar"){let d=it*.72,m=d/o.length,v=Math.max(1,m-(m>4?1:0));$.style.setProperty("--bar-max-radius",`${v/3}px`),o.forEach((b,k)=>{let E=A("g");for(let R of b.points){let X=_(R.value),H=A("rect","bar");P(H,{x:G(R.index)-d/2+k*m,y:Math.min(X,Z),width:v,height:Math.max(1,Math.abs(Z-X))}),H.style.fill=b.color,H.append(ee(`${b.label} \xB7 ${r[R.index]??R.index}: ${te(R.value)}`)),E.append(H)}$.append(E)})}else{let d=r.length<=40;for(let m of o){let v=A("g"),b=rr(m.points);for(let k of b){let E=k.map(C=>`${G(C.index)},${_(C.value)}`).join(" L "),R=k[0],X=k[k.length-1];if(t.kind==="area"&&R!==void 0&&X!==void 0){let C=A("path","area");P(C,{d:`M ${G(R.index)},${Z} L ${E} L ${G(X.index)},${Z} Z`}),C.style.fill=m.color,v.append(C)}let H=A("path","line");if(P(H,{d:`M ${E}`,fill:"none"}),H.style.stroke=m.color,v.append(H),!(!d&&k.length>1))for(let C of k){let tt=A("circle","point");P(tt,{cx:G(C.index),cy:_(C.value)}),tt.style.fill=m.color,tt.append(ee(`${m.label} \xB7 ${r[C.index]??C.index}: ${te(C.value)}`)),v.append(tt)}}$.append(v)}}this.#n.replaceChildren($)}};w("crtr-chart",Ct);function re(){return window.crtr}var oe="Submit is unavailable \u2014 this page is not connected to a host.",or=`
1617
- :host {
1618
- display: block;
1619
- }
1620
-
1621
- :host([hidden]) {
1622
- display: none;
1623
- }
1624
-
1625
- [part="page"] {
1626
- display: grid;
1627
- gap: var(--crtr-page-step-gap, var(--crtr-space-3));
1628
- }
1629
-
1630
- /* A step takes focus programmatically when the pager flips to it, so it wears no ring by
1631
- default \u2014 a host that wants one sets the outline rather than patching around it. The
1632
- pager focuses the element itself, not the inner div, so the rule has to sit on the host:
1633
- on [part="page"] it would never match and every step change would paint a UA ring. */
1634
- :host(:focus) {
1635
- outline: var(--crtr-page-step-focus-outline, none);
1636
- }
1637
- `,nr=`
1638
- :host {
1639
- display: block;
1640
- }
1641
-
1642
- [part="container"] {
1643
- display: grid;
1644
- gap: var(--crtr-page-container-gap, var(--crtr-space-4));
1645
- }
1646
-
1647
- [part="chrome"] {
1648
- display: flex;
1649
- flex-wrap: wrap;
1650
- align-items: center;
1651
- justify-content: space-between;
1652
- gap: var(--crtr-page-chrome-gap, var(--crtr-space-3));
1653
- padding-top: var(--crtr-page-chrome-padding-top, var(--crtr-space-3));
1654
- border-top: var(--crtr-page-chrome-border-width, 1px)
1655
- var(--crtr-page-chrome-border-style, solid)
1656
- var(--crtr-page-chrome-border-color, var(--crtr-color-border));
1657
- }
1658
-
1659
- [part="container"][data-steps="1"] [part="chrome"] {
1660
- justify-content: flex-end;
1661
- }
1662
-
1663
- [part="progress"] {
1664
- display: flex;
1665
- align-items: center;
1666
- gap: var(--crtr-page-progress-gap, var(--crtr-space-2));
1667
- color: var(--crtr-page-progress-text-color, var(--crtr-color-text-muted));
1668
- }
1669
-
1670
- [part="progress-track"] {
1671
- display: flex;
1672
- align-items: center;
1673
- gap: var(--crtr-page-progress-track-gap, var(--crtr-space-1));
1674
- }
1675
-
1676
- [part="progress-step"] {
1677
- width: var(--crtr-page-progress-step-width, var(--crtr-space-2));
1678
- height: var(--crtr-page-progress-step-height, var(--crtr-space-1));
1679
- border-radius: var(--crtr-page-progress-step-radius, var(--crtr-radius-small));
1680
- background: var(--crtr-page-progress-step-fill, var(--crtr-color-border));
1681
- }
1682
-
1683
- [part="progress-step"][data-state="complete"] {
1684
- background: var(--crtr-page-progress-step-complete-fill, var(--crtr-color-text-muted));
1685
- }
1686
-
1687
- [part="progress-step"][data-state="current"] {
1688
- width: var(--crtr-page-progress-step-current-width, var(--crtr-space-4));
1689
- background: var(--crtr-page-progress-step-current-fill, var(--crtr-color-accent));
1690
- }
1691
-
1692
- [part="actions"] {
1693
- display: flex;
1694
- align-items: center;
1695
- gap: var(--crtr-page-actions-gap, var(--crtr-space-2));
1696
- }
1697
-
1698
- button {
1699
- font: var(--crtr-page-button-font, inherit);
1700
- color: var(--crtr-page-button-text-color, var(--crtr-color-text));
1701
- background: var(--crtr-page-button-fill, var(--crtr-color-surface));
1702
- border: var(--crtr-page-button-border-width, 1px)
1703
- var(--crtr-page-button-border-style, solid)
1704
- var(--crtr-page-button-border-color, var(--crtr-color-border));
1705
- border-radius: var(--crtr-page-button-radius, var(--crtr-radius-small));
1706
- padding: var(--crtr-page-button-padding, var(--crtr-space-2) var(--crtr-space-3));
1707
- cursor: pointer;
1708
- transition: color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease)),
1709
- background-color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease)),
1710
- border-color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease));
1711
- }
1712
-
1713
- button:hover:not(:disabled) {
1714
- background: var(--crtr-page-button-hover-fill, var(--crtr-color-surface-hover));
1715
- }
1716
-
1717
- ${u({scope:"page-button"},"button")}
1718
- button:disabled {
1719
- cursor: not-allowed;
1720
- opacity: var(--crtr-page-button-disabled-opacity, var(--crtr-control-disabled-opacity, 0.5));
1721
- }
1722
-
1723
- [part="submit"] {
1724
- color: var(--crtr-page-submit-text-color, var(--crtr-color-accent-contrast));
1725
- background: var(--crtr-page-submit-fill, var(--crtr-color-accent));
1726
- border-color: var(--crtr-page-submit-border-color, var(--crtr-color-accent));
1727
- }
1728
-
1729
- /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
1730
- dark one \u2014 a brightness filter moves the wrong way on one of them. */
1731
- [part="submit"]:hover:not(:disabled) {
1732
- background: var(--crtr-page-submit-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
1733
- border-color: var(--crtr-page-submit-hover-border-color, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
1734
- }
1735
-
1736
- [part="notice"] {
1737
- color: var(--crtr-page-notice-text-color, var(--crtr-color-text-muted));
1738
- font-size: var(--crtr-page-notice-font-size, 0.875em);
1739
- }
1740
-
1741
- [part="notice"][data-state="error"] {
1742
- color: var(--crtr-page-notice-error-text-color, var(--crtr-color-danger));
1743
- }
1744
-
1745
- [hidden] {
1746
- display: none !important;
1747
- }
1748
- `,Tt=class extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent=or;let r=document.createElement("div");r.part.add("page"),r.append(document.createElement("slot")),t.append(e,r)}},St=class extends HTMLElement{static observedAttributes=["disabled","submit-label"];#o=[];#i=0;#a="idle";#n=null;#e=document.createElement("div");#r=document.createElement("div");#t=document.createElement("div");#h=document.createElement("span");#c=document.createElement("span");#s=document.createElement("div");#l=document.createElement("span");#d=document.createElement("button");#u=document.createElement("button");#m=document.createElement("button");#E=new MutationObserver(()=>{this.#L(),this.#y()});constructor(){super();let t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent=nr;let r=document.createElement("div");r.part.add("steps"),r.append(document.createElement("slot")),this.#e.part.add("container"),this.#r.part.add("chrome"),this.#t.part.add("progress"),this.#t.setAttribute("role","status"),this.#t.setAttribute("aria-live","polite"),this.#h.part.add("progress-label"),this.#c.part.add("progress-track"),this.#c.setAttribute("aria-hidden","true"),this.#t.append(this.#h,this.#c),this.#d.part.add("prev"),this.#d.type="button",this.#d.textContent="Back",this.#d.addEventListener("click",()=>this.#p(-1)),this.#u.part.add("next"),this.#u.type="button",this.#u.textContent="Next",this.#u.addEventListener("click",()=>this.#p(1)),this.#m.part.add("submit"),this.#m.type="button",this.#m.addEventListener("click",()=>{this.#T()}),this.#l.part.add("notice"),this.#s.part.add("actions"),this.#s.append(this.#l,this.#d,this.#u,this.#m),this.#r.append(this.#t,this.#s),this.#e.append(r,this.#r),t.append(e,this.#e)}connectedCallback(){this.#L(),this.#E.observe(this,{childList:!0}),this.ownerDocument.addEventListener("keydown",this.#b),this.#y()}disconnectedCallback(){this.#E.disconnect(),this.ownerDocument.removeEventListener("keydown",this.#b)}attributeChangedCallback(){this.isConnected&&this.#y()}#L(){this.#o=[...this.children].filter(t=>t instanceof HTMLElement&&t.tagName==="CRTR-PAGE");for(let t of this.#o)t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1");this.#i=Math.min(this.#i,Math.max(0,this.#o.length-1))}get#g(){return this.#i>=this.#o.length-1}#p(t,e=!0){let r=this.#i+t;r<0||r>=this.#o.length||r===this.#i||(this.#i=r,this.#n=null,this.#y(),e&&this.#o[this.#i]?.focus())}async#T(){if(this.#a!=="idle"||this.hasAttribute("disabled")||!this.#g)return;let t=re();if(typeof t?.submit!="function"){this.#n=oe,this.#y();return}this.#a="submitting",this.#n=null,this.#y();try{Nt(),await t.submit(),this.#a="submitted"}catch(e){this.#a="idle",this.#n=e instanceof Error?e.message:"Submit failed."}this.#y()}#b=t=>{if(t.defaultPrevented)return;let e=t.composedPath();if(e.some(o=>o instanceof HTMLElement&&o.tagName==="CRTR-PAGES"&&o!==this))return;if((t.metaKey||t.ctrlKey)&&t.key==="Enter"){if(!this.#g)return;t.preventDefault(),this.#T();return}if(t.metaKey||t.ctrlKey||t.altKey||ar(e))return;let r=t.key.toLowerCase();r!=="n"&&r!=="p"||(t.preventDefault(),this.#p(r==="n"?1:-1))};#y(){let t=this.#o.length,e=t>1,r=Math.min(this.#i,Math.max(0,t-1));for(let[i,s]of this.#o.entries())s.toggleAttribute("hidden",i!==r);if(this.#e.dataset.steps=String(Math.max(1,t)),this.#e.dataset.step=String(r+1),this.#t.hidden=!e,e){let i=this.#o[r]?.getAttribute("label")?.trim();this.#h.textContent=i?`Step ${r+1} of ${t} \xB7 ${i}`:`Step ${r+1} of ${t}`,this.#c.replaceChildren(...this.#o.map((s,c)=>{let l=document.createElement("span");return l.part.add("progress-step"),l.dataset.state=c===r?"current":c<r?"complete":"upcoming",l}))}this.#d.hidden=!e,this.#d.disabled=r===0,this.#u.hidden=!e||this.#g,this.#u.disabled=!1,this.#m.hidden=!this.#g;let o=typeof re()?.submit=="function";this.#m.disabled=!o||this.#a!=="idle"||this.hasAttribute("disabled"),this.#m.textContent=this.#a==="submitting"?"Submitting\u2026":this.#a==="submitted"?"Submitted":this.getAttribute("submit-label")?.trim()||"Submit";let a=this.#n??(this.#a==="submitted"?"Your response was submitted.":!o&&this.#g?oe:null);this.#l.hidden=a===null,this.#l.textContent=a??"",this.#l.dataset.state=this.#n===null?"info":"error"}};function ar(n){return n.some(t=>t instanceof HTMLElement&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t.isContentEditable))}w("crtr-page",Tt);w("crtr-pages",St);var ir=`
1749
- :host {
1750
- display: block;
1751
- }
1752
-
1753
- /* Flat: this sits in the flow of the page. A shadow in this bundle means floating. */
1754
- [part="unavailable"] {
1755
- padding: var(--crtr-slot-unavailable-padding, var(--crtr-space-3));
1756
- color: var(--crtr-slot-unavailable-text-color, var(--crtr-color-text-muted));
1757
- background: var(--crtr-slot-unavailable-fill, var(--crtr-color-surface));
1758
- border: var(--crtr-slot-unavailable-border-width, 1px)
1759
- var(--crtr-slot-unavailable-border-style, solid)
1760
- var(--crtr-slot-unavailable-border-color, var(--crtr-color-border));
1761
- border-radius: var(--crtr-slot-unavailable-radius, var(--crtr-radius-medium));
1762
- }
1763
-
1764
- [part="unavailable"][hidden] {
1765
- display: none;
1766
- }
1767
-
1768
- [part="kind"] {
1769
- color: var(--crtr-slot-kind-text-color, var(--crtr-color-text));
1770
- font-family: var(--crtr-slot-kind-font-family, var(--crtr-font-mono));
1771
- }
1772
-
1773
- [part="reason"] {
1774
- display: block;
1775
- margin-top: var(--crtr-slot-reason-gap, var(--crtr-space-1));
1776
- font-size: var(--crtr-slot-reason-font-size, 0.875em);
1777
- }
1778
- `,At=class extends HTMLElement{#o=document.createElement("div");#i=document.createElement("span");#a=document.createElement("span");#n=document.createElement("div");#e=!1;constructor(){super();let t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent=ir,this.#o.part.add("unavailable"),this.#o.setAttribute("role","status"),this.#i.part.add("kind"),this.#a.part.add("reason"),this.#o.append("Component unavailable: ",this.#i,this.#a),this.#o.hidden=!0,this.#n.part.add("mount"),t.append(e,document.createElement("slot"),this.#o)}connectedCallback(){if(this.#e)return;this.#e=!0;let t=this.getAttribute("kind")?.trim()??"";if(this.#i.textContent=t===""?"unknown":t,t===""){this.#t("This slot names no component kind.");return}let e=T(this);if(e.status!=="ok"){this.#t(e.reason);return}this.append(this.#n),this.#r(t,e.config)}async#r(t,e){await It(this.#n,t,e)!=="mounted"&&(this.#n.remove(),this.#t("This page is open somewhere that cannot render it."))}#t(t){this.#a.textContent=t,this.#o.hidden=!1}};w("crtr-slot",At);})();