@mrrocket/sdk 0.3.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +240 -5
  3. package/dist/api.d.ts +23 -3
  4. package/dist/api.js +7 -3
  5. package/dist/api.js.map +1 -1
  6. package/dist/batch.d.ts +33 -0
  7. package/dist/batch.js +50 -0
  8. package/dist/batch.js.map +1 -0
  9. package/dist/browser/mrrocket-flows.js +64 -0
  10. package/dist/browser/mrrocket-push.js +1 -0
  11. package/dist/browser/mrrocket-replay.js +78 -0
  12. package/dist/browser/mrrocket-sw.js +1 -0
  13. package/dist/browser/mrrocket.js +2 -0
  14. package/dist/browser.d.ts +1 -1
  15. package/dist/browser.js +3 -1
  16. package/dist/browser.js.map +1 -1
  17. package/dist/client.d.ts +36 -1
  18. package/dist/client.js +163 -83
  19. package/dist/client.js.map +1 -1
  20. package/dist/context.d.ts +10 -0
  21. package/dist/context.js.map +1 -1
  22. package/dist/core.d.ts +91 -4
  23. package/dist/core.js +83 -6
  24. package/dist/core.js.map +1 -1
  25. package/dist/feedback.d.ts +19 -4
  26. package/dist/feedback.js +652 -190
  27. package/dist/feedback.js.map +1 -1
  28. package/dist/flows-ui.d.ts +23 -0
  29. package/dist/flows-ui.js +384 -0
  30. package/dist/flows-ui.js.map +1 -0
  31. package/dist/flows-web.d.ts +19 -0
  32. package/dist/flows-web.js +42 -0
  33. package/dist/flows-web.js.map +1 -0
  34. package/dist/flows.d.ts +222 -0
  35. package/dist/flows.js +409 -0
  36. package/dist/flows.js.map +1 -0
  37. package/dist/index.d.ts +5 -2
  38. package/dist/index.js +9 -1
  39. package/dist/index.js.map +1 -1
  40. package/dist/proxy.d.ts +34 -1
  41. package/dist/proxy.js +14 -1
  42. package/dist/proxy.js.map +1 -1
  43. package/dist/push-web.d.ts +43 -0
  44. package/dist/push-web.js +81 -0
  45. package/dist/push-web.js.map +1 -0
  46. package/dist/react-native/index.d.cts +561 -0
  47. package/dist/react-native/index.d.ts +561 -0
  48. package/dist/react-native/index.js +1743 -0
  49. package/dist/react-native/index.js.map +1 -0
  50. package/dist/react-native/package.json +3 -0
  51. package/dist/referral.d.ts +6 -0
  52. package/dist/referral.js +7 -3
  53. package/dist/referral.js.map +1 -1
  54. package/dist/styles.d.ts +1 -1
  55. package/dist/styles.js +127 -24
  56. package/dist/styles.js.map +1 -1
  57. package/dist/ui.d.ts +3 -0
  58. package/dist/ui.js +12 -0
  59. package/dist/ui.js.map +1 -1
  60. package/dist/web-state.d.ts +36 -0
  61. package/dist/web-state.js +64 -0
  62. package/dist/web-state.js.map +1 -0
  63. package/package.json +64 -6
  64. package/react-native/package.json +7 -0
package/dist/styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /** The one stylesheet for every Cockpit widget. Everything is scoped under `.ckw-root` and prefixed `ckw-`. */
2
- export declare const CSS = "\n.ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);\nfont-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}\n.ckw-root[data-theme=dark]{--ckw-bg:#17181b;--ckw-bg2:#1f2024;--ckw-bg3:#292a30;--ckw-fg:#f1f2f4;--ckw-fg2:#b0b3ba;--ckw-fg3:#7e818a;--ckw-line:#2e2f35;--ckw-shadow:0 8px 30px rgba(0,0,0,.5)}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#17181b;--ckw-bg2:#1f2024;--ckw-bg3:#292a30;--ckw-fg:#f1f2f4;--ckw-fg2:#b0b3ba;--ckw-fg3:#7e818a;--ckw-line:#2e2f35;--ckw-shadow:0 8px 30px rgba(0,0,0,.5)}}\n.ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}\n.ckw-root button,.ckw-root input,.ckw-root select,.ckw-root textarea{font:inherit;color:inherit;margin:0}\n.ckw-root button{cursor:pointer}\n.ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}\n.ckw-board{width:100%;max-width:760px;margin:0 auto;background:var(--ckw-bg);min-width:0}\n.ckw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}\n.ckw-title{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}\n.ckw-sub{color:var(--ckw-fg2);margin:2px 0 0;font-size:13px}\n.ckw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-btn:hover{background:var(--ckw-bg2)}\n.ckw-btn[disabled]{opacity:.55;cursor:not-allowed}\n.ckw-btn-primary{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-btn-primary:hover{background:var(--ckw-accent);filter:brightness(1.08)}\n.ckw-btn-ghost{border-color:transparent;background:transparent;color:var(--ckw-fg2)}\n.ckw-icon{width:16px;height:16px;flex:none;display:block}\n.ckw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ckw-line);margin-bottom:12px;overflow-x:auto}\n.ckw-tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;margin-bottom:-1px;color:var(--ckw-fg2);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-tab[aria-selected=true]{color:var(--ckw-fg);border-bottom-color:var(--ckw-accent)}\n.ckw-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}\n.ckw-input,.ckw-select,.ckw-textarea{width:100%;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);padding:7px 10px;font-size:14px;min-height:34px}\n.ckw-input::placeholder,.ckw-textarea::placeholder{color:var(--ckw-fg3)}\n.ckw-textarea{resize:vertical;min-height:72px}\n.ckw-search{flex:1 1 160px;min-width:0}\n.ckw-seg{display:inline-flex;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-seg button{border:0;background:var(--ckw-bg);padding:0 10px;height:32px;font-size:13px;color:var(--ckw-fg2)}\n.ckw-seg button[aria-pressed=true]{background:var(--ckw-bg3);color:var(--ckw-fg);font-weight:500}\n.ckw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}\n.ckw-chip{border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ckw-fg2)}\n.ckw-chip[aria-pressed=true]{background:var(--ckw-fg);color:var(--ckw-bg);border-color:var(--ckw-fg)}\n.ckw-list{list-style:none;margin:0;padding:0;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-list>li+li{border-top:1px solid var(--ckw-line)}\n.ckw-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--ckw-bg)}\n.ckw-row:hover{background:var(--ckw-bg2)}\n.ckw-vote{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:44px;min-height:48px;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 0;color:var(--ckw-fg2)}\n.ckw-vote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}\n.ckw-vote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-vote-sm{width:auto;min-height:0;flex-direction:row;gap:4px;padding:2px 8px}\n.ckw-main{flex:1;min-width:0;text-align:left}\n.ckw-link{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-weight:600;font-size:14px;color:var(--ckw-fg);overflow-wrap:anywhere}\n.ckw-link:hover{color:var(--ckw-accent)}\n.ckw-excerpt{margin:2px 0 0;color:var(--ckw-fg2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}\n.ckw-meta{display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--ckw-fg3);font-size:12px;flex-wrap:wrap}\n.ckw-pill{display:inline-flex;align-items:center;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;background:var(--ckw-bg3);color:var(--ckw-fg2)}\n.ckw-pill[data-s=planned]{background:rgba(63,118,255,.14);color:#3f76ff}\n.ckw-pill[data-s=progress]{background:rgba(245,158,11,.16);color:#b45309}\n.ckw-pill[data-s=shipped]{background:rgba(22,163,74,.15);color:#15803d}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=progress]{color:#fbbf24}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=shipped]{color:#4ade80}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto] .ckw-pill[data-s=progress]{color:#fbbf24}.ckw-root[data-theme=auto] .ckw-pill[data-s=shipped]{color:#4ade80}}\n.ckw-stat{display:inline-flex;align-items:center;gap:4px}\n.ckw-empty{border:1px dashed var(--ckw-line);border-radius:8px;padding:28px 16px;text-align:center;color:var(--ckw-fg2)}\n.ckw-error{border:1px solid color-mix(in srgb,var(--ckw-danger) 40%,transparent);background:color-mix(in srgb,var(--ckw-danger) 8%,transparent);color:var(--ckw-danger);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}\n.ckw-skel{height:68px;border-radius:8px;background:var(--ckw-bg2);animation:ckw-sh 1.2s ease-in-out infinite;margin-bottom:6px}\n@keyframes ckw-sh{50%{opacity:.5}}\n@media (prefers-reduced-motion:reduce){.ckw-skel{animation:none}.ckw-root *{transition:none!important}}\n.ckw-form{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ckw-line);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--ckw-bg)}\n.ckw-field{display:flex;flex-direction:column;gap:4px}\n.ckw-label{font-size:12px;font-weight:600;color:var(--ckw-fg2)}\n.ckw-actions{display:flex;gap:8px;justify-content:flex-end}\n.ckw-dupes{border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg2);padding:8px 10px;font-size:13px}\n.ckw-dupes p{margin:0 0 4px;color:var(--ckw-fg2);font-size:12px}\n.ckw-dupe{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:3px 0}\n.ckw-dupe span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ckw-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}\n@media (max-width:640px){.ckw-cols{grid-template-columns:1fr}}\n.ckw-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ckw-fg2);margin:0 0 8px;display:flex;gap:6px;align-items:center}\n.ckw-card{border:1px solid var(--ckw-line);border-radius:8px;padding:10px;margin-bottom:8px;background:var(--ckw-bg)}\n.ckw-card .ckw-link{margin-bottom:6px}\n.ckw-entry{padding:12px 0;border-bottom:1px solid var(--ckw-line)}\n.ckw-entry time{font-size:12px;color:var(--ckw-fg3)}\n.ckw-entry h3{font-size:15px;margin:2px 0 4px}\n.ckw-entry p{margin:0;color:var(--ckw-fg2);white-space:pre-wrap;overflow-wrap:anywhere}\n.ckw-back{margin-bottom:8px;padding-left:4px}\n.ckw-detail-head{display:flex;gap:12px;align-items:flex-start}\n.ckw-detail-head h2{margin:0 0 4px;font-size:18px;overflow-wrap:anywhere}\n.ckw-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ckw-fg2);margin:12px 0}\n.ckw-h{font-size:13px;font-weight:600;margin:16px 0 8px}\n.ckw-comment{padding:8px 0;border-top:1px solid var(--ckw-line)}\n.ckw-comment b{font-size:13px}\n.ckw-comment p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}\n.ckw-team{margin-left:6px;background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:4px;padding:0 5px;font-size:10px;font-weight:700;text-transform:uppercase;vertical-align:1px}\n.ckw-time{color:var(--ckw-fg3);font-size:12px;margin-left:6px}\n.ckw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n/* Floating widget */\n.ckw-fab{position:fixed;z-index:2147483000;bottom:20px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-weight:600;font-size:14px;box-shadow:var(--ckw-shadow)}\n.ckw-fab[data-pos=bottom-right],.ckw-pop[data-pos=bottom-right]{right:20px}\n.ckw-fab[data-pos=bottom-left],.ckw-pop[data-pos=bottom-left]{left:20px}\n.ckw-pop{position:fixed;z-index:2147483001;bottom:70px;width:380px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);overflow:hidden}\n.ckw-pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--ckw-line);font-weight:600}\n.ckw-pop-body{padding:12px;overflow-y:auto;flex:1}\n.ckw-pop-foot{padding:8px 12px;border-top:1px solid var(--ckw-line);display:flex;justify-content:space-between;align-items:center;font-size:13px}\n.ckw-pop-foot a{color:var(--ckw-accent);text-decoration:none;font-weight:500}\n.ckw-pop .ckw-list{border:0;border-radius:0}\n.ckw-pop .ckw-row{padding:8px 0}\n.ckw-pop .ckw-form{border:0;padding:0;margin:12px 0 0}\n@media (max-width:520px){.ckw-pop{left:0!important;right:0!important;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;max-height:85vh}.ckw-fab{bottom:14px}.ckw-fab[data-pos=bottom-right]{right:14px}.ckw-fab[data-pos=bottom-left]{left:14px}}\n/* Survey */\n.ckw-survey{position:fixed;z-index:2147483000;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 24px);background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);padding:14px;animation:ckw-in .2s ease-out}\n@keyframes ckw-in{from{opacity:0;transform:translateY(8px)}}\n@media (max-width:520px){.ckw-survey{left:0;right:0;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0}}\n.ckw-sv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}\n.ckw-dots{display:flex;gap:4px}\n.ckw-dot{width:6px;height:6px;border-radius:50%;background:var(--ckw-bg3)}\n.ckw-dot[data-on=true]{background:var(--ckw-accent)}\n.ckw-q{font-weight:600;font-size:15px;margin:0 0 2px;border:0;padding:0}\n.ckw-root .ckw-q:focus-visible{outline:none}\n.ckw-qd{color:var(--ckw-fg2);font-size:13px;margin:0 0 10px}\n.ckw-scale{display:flex;gap:4px;flex-wrap:wrap}\n.ckw-num{flex:1 1 0;min-width:26px;height:34px;border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:8px;font-size:13px;font-weight:600;padding:0}\n.ckw-num:hover{border-color:var(--ckw-accent)}\n.ckw-num[aria-pressed=true]{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-color:var(--ckw-accent)}\n.ckw-root .ckw-star{background:none;border:0;padding:2px;color:var(--ckw-bg3)}\n.ckw-root .ckw-star[data-on=true]{color:#f5a524}\n.ckw-star svg{width:28px;height:28px}\n.ckw-lh{display:flex;justify-content:space-between;color:var(--ckw-fg3);font-size:11px;margin-top:4px}\n.ckw-opts{display:flex;flex-direction:column;gap:6px}\n.ckw-opt{display:flex;gap:8px;align-items:center;border:1px solid var(--ckw-line);border-radius:8px;padding:7px 10px;background:var(--ckw-bg);cursor:pointer}\n.ckw-opt:has(input:checked){border-color:var(--ckw-accent);background:color-mix(in srgb,var(--ckw-accent) 8%,transparent)}\n.ckw-opt input{accent-color:var(--ckw-accent)}\n.ckw-sv-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}\n.ckw-thanks{text-align:center;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:8px}\n.ckw-tick{width:32px;height:32px;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:flex;align-items:center;justify-content:center}\n";
2
+ export declare const CSS = "\n.ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);\nfont-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}\n.ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07)}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07)}}\n.ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}\n:where(.ckw-root) :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}\n.ckw-root button{cursor:pointer}\n.ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}\n.ckw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}\n.ckw-title{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}\n.ckw-sub{color:var(--ckw-fg2);margin:2px 0 0;font-size:13px}\n.ckw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-btn:hover{background:var(--ckw-bg2)}\n.ckw-btn[disabled]{opacity:.55;cursor:not-allowed}\n.ckw-btn-primary{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-btn-primary:hover{background:var(--ckw-accent);filter:brightness(1.08)}\n.ckw-btn-ghost{border-color:transparent;background:transparent;color:var(--ckw-fg2)}\n.ckw-icon{width:16px;height:16px;flex:none;display:block}\n.ckw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ckw-line);margin-bottom:12px;overflow-x:auto}\n.ckw-tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;margin-bottom:-1px;color:var(--ckw-fg2);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-tab[aria-selected=true]{color:var(--ckw-fg);border-bottom-color:var(--ckw-accent)}\n.ckw-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}\n.ckw-input,.ckw-select,.ckw-textarea{width:100%;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);padding:7px 10px;font-size:14px;min-height:34px}\n.ckw-input::placeholder,.ckw-textarea::placeholder{color:var(--ckw-fg3)}\n.ckw-textarea{resize:vertical;min-height:72px}\n.ckw-search{flex:1 1 160px;min-width:0}\n.ckw-seg{display:inline-flex;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-seg button{border:0;background:var(--ckw-bg);padding:0 10px;height:32px;font-size:13px;color:var(--ckw-fg2)}\n.ckw-seg button[aria-pressed=true]{background:var(--ckw-bg3);color:var(--ckw-fg);font-weight:500}\n.ckw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}\n.ckw-chip{border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ckw-fg2)}\n.ckw-chip[aria-pressed=true],.ckw-chip[aria-checked=true]{background:var(--ckw-fg);color:var(--ckw-bg);border-color:var(--ckw-fg)}\n.ckw-list{list-style:none;margin:0;padding:0;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-list>li+li{border-top:1px solid var(--ckw-line)}\n.ckw-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--ckw-bg)}\n.ckw-row:hover{background:var(--ckw-bg2)}\n.ckw-vote{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:44px;min-height:48px;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 0;color:var(--ckw-fg2)}\n.ckw-vote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}\n.ckw-vote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-vote-sm{width:auto;min-height:0;flex-direction:row;gap:4px;padding:2px 8px}\n.ckw-main{flex:1;min-width:0;text-align:left}\n.ckw-link{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-weight:600;font-size:14px;color:var(--ckw-fg);overflow-wrap:anywhere}\n.ckw-link:hover{color:var(--ckw-accent)}\n.ckw-excerpt{margin:2px 0 0;color:var(--ckw-fg2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}\n.ckw-meta{display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--ckw-fg3);font-size:12px;flex-wrap:wrap}\n.ckw-pill{display:inline-flex;align-items:center;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;background:var(--ckw-bg3);color:var(--ckw-fg2)}\n.ckw-pill[data-s=planned]{background:rgba(63,118,255,.14);color:#3f76ff}\n.ckw-pill[data-s=progress]{background:rgba(245,158,11,.16);color:#b45309}\n.ckw-pill[data-s=shipped]{background:rgba(22,163,74,.15);color:#15803d}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=progress]{color:#fbbf24}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=shipped]{color:#4ade80}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto] .ckw-pill[data-s=progress]{color:#fbbf24}.ckw-root[data-theme=auto] .ckw-pill[data-s=shipped]{color:#4ade80}}\n.ckw-stat{display:inline-flex;align-items:center;gap:4px}\n.ckw-empty{border:1px dashed var(--ckw-line);border-radius:8px;padding:28px 16px;text-align:center;color:var(--ckw-fg2)}\n.ckw-error{border:1px solid color-mix(in srgb,var(--ckw-danger) 40%,transparent);background:color-mix(in srgb,var(--ckw-danger) 8%,transparent);color:var(--ckw-danger);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}\n.ckw-skel{height:68px;border-radius:8px;background:var(--ckw-bg2);animation:ckw-sh 1.2s ease-in-out infinite;margin-bottom:6px}\n@keyframes ckw-sh{50%{opacity:.5}}\n@media (prefers-reduced-motion:reduce){.ckw-skel,.ckw-scrim,.ckw-modal{animation:none}.ckw-root *{transition:none!important}}\n.ckw-form{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ckw-line);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--ckw-bg)}\n.ckw-field{display:flex;flex-direction:column;gap:4px}\n.ckw-label{font-size:12px;font-weight:600;color:var(--ckw-fg2)}\n.ckw-actions{display:flex;gap:8px;justify-content:flex-end}\n.ckw-dupes{border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg2);padding:8px 10px;font-size:13px}\n.ckw-dupes p{margin:0 0 4px;color:var(--ckw-fg2);font-size:12px}\n.ckw-dupe{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:3px 0}\n.ckw-dupe span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ckw-team{margin-left:6px;background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:4px;padding:0 5px;font-size:10px;font-weight:700;text-transform:uppercase;vertical-align:1px}\n.ckw-time{color:var(--ckw-fg3);font-size:12px;margin-left:6px}\n.ckw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n/* Board */\n.ckw-board{width:100%;max-width:1160px;margin:0 auto;background:var(--ckw-bg);min-width:0}\n.ckw-board.ckw-full{max-width:none;min-height:100%;min-height:100dvh}\n.ckw-board.ckw-full>.ckw-body-wrap{max-width:1160px;margin:0 auto;padding:0 16px 56px}\n.ckw-top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--ckw-bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--ckw-line);margin-bottom:24px}\n.ckw-top-row{max-width:1160px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}\n.ckw-brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:15px;color:var(--ckw-fg);background:none;border:0;padding:4px 2px;border-radius:8px;min-width:0}\n.ckw-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}\n.ckw-brand img{width:28px;height:28px;border-radius:7px;object-fit:cover;outline:1px solid oklch(0 0 0/.1);outline-offset:-1px;flex:none}\n.ckw-root[data-theme=dark] .ckw-brand img{outline-color:oklch(1 0 0/.1)}\n.ckw-brand-mark{width:28px;height:28px;border-radius:7px;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}\n.ckw-nav{display:flex;gap:2px;flex:1;min-width:0}\n.ckw-nav-tab{background:none;border:0;border-radius:8px;padding:0 12px;height:34px;color:var(--ckw-fg2);font-weight:550;font-size:14px;white-space:nowrap;transition:background-color .1s linear,color .1s linear}\n.ckw-nav-tab:hover{color:var(--ckw-fg);background:var(--ckw-bg2)}\n.ckw-nav-tab[aria-selected=true]{color:var(--ckw-fg);background:var(--ckw-bg3)}\n.ckw-top-tools{display:flex;align-items:center;gap:6px;margin-left:auto}\n.ckw-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:0;background:none;color:var(--ckw-fg2);flex:none}\n.ckw-icon-btn:hover{background:var(--ckw-bg2);color:var(--ckw-fg)}\n.ckw-searchbox{display:flex;align-items:center;border-radius:8px;transition:background-color .1s linear}\n.ckw-search-input{width:0;padding:0;border:0;background:none;outline:none;font-size:14px;height:34px;transition:width .15s cubic-bezier(.2,0,0,1)}\n.ckw-searchbox[data-open]{background:var(--ckw-bg2)}\n.ckw-searchbox[data-open] .ckw-search-input{width:180px;padding-right:10px}\n.ckw-searchbox:focus-within{outline:2px solid var(--ckw-accent);outline-offset:0}\n.ckw-root .ckw-search-input:focus-visible{outline:none}\n.ckw-search-input::-webkit-search-cancel-button{display:none}\n.ckw-submit{height:34px}\n.ckw-btn,.ckw-vote,.ckw-upvote,.ckw-icon-btn{transition-property:background-color,border-color,color,scale;transition-duration:.1s;transition-timing-function:linear}\n.ckw-btn:active:not([disabled]),.ckw-vote:active,.ckw-upvote:active,.ckw-icon-btn:active{scale:.96}\n.ckw-intro{margin:0 0 20px}\n.ckw-intro h1{font-size:24px;font-weight:650;letter-spacing:-.02em;margin:0;text-wrap:balance}\n.ckw-intro p{margin:4px 0 0;color:var(--ckw-fg2);font-size:14px;text-wrap:pretty}\n.ckw-note{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;padding:6px 6px 6px 12px;margin-bottom:14px;background:color-mix(in srgb,var(--ckw-accent) 10%,transparent);color:var(--ckw-fg);font-size:13px;font-weight:500}\n.ckw-tools .ckw-chips-inline{margin:0}\n.ckw-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}\n.ckw-post{position:relative;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--ckw-card);box-shadow:var(--ckw-lift);transition:box-shadow .1s linear}\n.ckw-post:hover{box-shadow:var(--ckw-lift),0 4px 14px rgba(16,18,24,.06)}\n.ckw-post .ckw-vote,.ckw-card .ckw-vote{position:relative;z-index:1}\n.ckw-stretch::after{content:\"\";position:absolute;inset:0;border-radius:inherit}\n.ckw-post .ckw-link,.ckw-card .ckw-link{font-size:15px;font-weight:600;text-wrap:pretty}\n.ckw-dot-sep{color:var(--ckw-fg3)}\n.ckw-type{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600;color:var(--ckw-fg2);background:var(--ckw-bg2);white-space:nowrap;width:max-content}\n.ckw-type::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--ckw-fg3)}\n.ckw-type[data-tone=blue]::before{background:#3f76ff}\n.ckw-type[data-tone=red]::before{background:#ef4444}\n.ckw-type[data-tone=violet]::before{background:#8b5cf6}\n.ckw-type[data-tone=green]::before{background:#22c55e}\n.ckw-av{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;background:var(--ckw-bg3);color:var(--ckw-fg2)}\n.ckw-av[data-team]{background:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-count{font-weight:500;color:var(--ckw-fg3);font-variant-numeric:tabular-nums;margin-left:2px}\n.ckw-empty p{margin:0 0 12px}\n.ckw-empty p:only-child{margin:0}\n/* Roadmap */\n.ckw-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}\n.ckw-col{background:var(--ckw-col);border-radius:14px;padding:6px;min-width:0}\n.ckw-col-head{padding:8px 8px 10px}\n.ckw-col-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:650}\n.ckw-col-head p{margin:2px 0 0 16px;font-size:12px;color:var(--ckw-fg3)}\n.ckw-sdot{width:8px;height:8px;border-radius:50%;background:var(--ckw-fg3);flex:none}\n.ckw-sdot[data-s=planned]{background:#3f76ff}\n.ckw-sdot[data-s=progress]{background:#f59e0b}\n.ckw-sdot[data-s=shipped]{background:#22c55e}\n.ckw-col-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}\n.ckw-col-empty{margin:0;padding:24px 8px;text-align:center;font-size:12px;color:var(--ckw-fg3)}\n.ckw-col .ckw-skel{margin:0 0 6px;height:96px;background:var(--ckw-card)}\n.ckw-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;background:var(--ckw-card);box-shadow:var(--ckw-lift);transition:box-shadow .1s linear}\n.ckw-card:hover{box-shadow:var(--ckw-lift),0 4px 14px rgba(16,18,24,.07)}\n.ckw-card .ckw-link{font-size:14px}\n.ckw-card .ckw-excerpt{margin:0}\n.ckw-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}\n.ckw-who{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--ckw-fg2)}\n.ckw-who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ckw-vote-sm{height:28px;border-radius:7px;font-size:12px}\n@media (max-width:900px){.ckw-cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scroll-padding:0 16px}.ckw-col{flex:0 0 min(82%,300px);scroll-snap-align:start}}\n/* Post page */\n.ckw-back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:6px 8px 6px 4px;margin:0 0 12px -4px;border-radius:8px;color:var(--ckw-fg2);font-size:13px;font-weight:550}\n.ckw-back:hover{color:var(--ckw-fg);background:var(--ckw-bg2)}\n.ckw-back-icon{display:inline-block;transform:rotate(-90deg);line-height:0}\n.ckw-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}\n.ckw-detail-title{margin:0 0 8px;font-size:22px;font-weight:650;letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}\n.ckw-byline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ckw-fg2)}\n.ckw-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ckw-fg);margin:16px 0 0;font-size:14.5px;line-height:1.6;text-wrap:pretty}\n.ckw-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:650;margin:28px 0 10px;padding-top:20px;border-top:1px solid var(--ckw-line)}\n.ckw-composer{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}\n.ckw-composer .ckw-actions{align-items:center}\n.ckw-as{margin:0 auto 0 0}\n.ckw-comment{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--ckw-line)}\n.ckw-comment b{font-size:13px}\n.ckw-comment p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}\n.ckw-side{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;background:var(--ckw-card);box-shadow:var(--ckw-lift)}\n.ckw-upvote{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:600;font-size:14px;color:var(--ckw-fg)}\n.ckw-upvote b{margin-left:auto;font-variant-numeric:tabular-nums}\n.ckw-upvote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}\n.ckw-upvote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-facts{margin:0;display:flex;flex-direction:column;gap:10px;font-size:13px}\n.ckw-facts div{display:flex;justify-content:space-between;align-items:center;gap:8px}\n.ckw-facts dt{color:var(--ckw-fg3)}\n.ckw-facts dd{margin:0;color:var(--ckw-fg)}\n@media (max-width:760px){.ckw-detail-grid{grid-template-columns:1fr;gap:16px}.ckw-side{position:static;order:-1}}\n/* Changelog */\n.ckw-log{max-width:820px}\n.ckw-entry{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--ckw-line)}\n.ckw-entry:first-child{border-top:0;padding-top:4px}\n.ckw-entry time{font-size:13px;color:var(--ckw-fg3);padding-top:2px}\n.ckw-entry h3{font-size:17px;font-weight:650;margin:0 0 6px;text-wrap:balance}\n.ckw-entry p{margin:0;color:var(--ckw-fg2);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}\n@media (max-width:640px){.ckw-entry{grid-template-columns:1fr;gap:4px}}\n/* Dialog */\n.ckw-scrim{position:fixed;inset:0;z-index:2147483002;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;padding:16px;animation:ckw-fade .15s ease-out}\n.ckw-modal{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ckw-bg);color:var(--ckw-fg);border-radius:14px;box-shadow:var(--ckw-shadow),0 0 0 1px var(--ckw-line);animation:ckw-in .18s ease-out}\n.ckw-modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 4px 18px}\n.ckw-modal-head h2{margin:0;font-size:16px;font-weight:650}\n.ckw-modal-body{display:flex;flex-direction:column;gap:12px;padding:8px 18px 18px}\n@keyframes ckw-fade{from{opacity:0}}\n@media (max-width:520px){.ckw-scrim{align-items:flex-end;padding:0}.ckw-modal{max-width:none;border-radius:14px 14px 0 0;max-height:92dvh}}\n.ckw-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n@media (max-width:480px){.ckw-pair{grid-template-columns:1fr}}\n.ckw-fine{margin:-4px 0 0;font-size:12px;color:var(--ckw-fg3);text-wrap:pretty}\n.ckw-opt-l{font-weight:500;color:var(--ckw-fg3)}\n.ckw-foot{text-align:center;font-size:12px;color:var(--ckw-fg3);margin:0;padding:0 16px 24px}\n.ckw-linkish{background:none;border:0;padding:0;color:var(--ckw-fg2);text-decoration:underline;font-size:12px}\n@media (max-width:720px){.ckw-top-row{gap:8px;padding:8px 12px}.ckw-nav{order:3;flex-basis:100%;overflow-x:auto;margin:0 -4px}.ckw-submit span{display:none}.ckw-submit{width:34px;padding:0}.ckw-searchbox[data-open] .ckw-search-input{width:120px}.ckw-top{margin-bottom:16px}.ckw-board.ckw-full>.ckw-body-wrap{padding:0 12px 40px}.ckw-post{padding:12px}.ckw-intro h1{font-size:20px}}\n/* Floating widget */\n.ckw-fab{position:fixed;z-index:2147483000;bottom:20px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-weight:600;font-size:14px;box-shadow:var(--ckw-shadow)}\n.ckw-fab[data-pos=bottom-right],.ckw-pop[data-pos=bottom-right]{right:20px}\n.ckw-fab[data-pos=bottom-left],.ckw-pop[data-pos=bottom-left]{left:20px}\n.ckw-pop{position:fixed;z-index:2147483001;bottom:70px;width:380px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);overflow:hidden}\n.ckw-pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--ckw-line);font-weight:600}\n.ckw-pop-body{padding:12px;overflow-y:auto;flex:1}\n.ckw-pop-foot{padding:8px 12px;border-top:1px solid var(--ckw-line);display:flex;justify-content:space-between;align-items:center;font-size:13px}\n.ckw-pop-foot a{color:var(--ckw-accent);text-decoration:none;font-weight:500}\n.ckw-pop .ckw-list{border:0;border-radius:0}\n.ckw-pop .ckw-row{padding:8px 0}\n.ckw-pop .ckw-form{border:0;padding:0;margin:12px 0 0}\n@media (max-width:520px){.ckw-pop{left:0!important;right:0!important;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;max-height:85vh}.ckw-fab{bottom:14px}.ckw-fab[data-pos=bottom-right]{right:14px}.ckw-fab[data-pos=bottom-left]{left:14px}}\n/* Survey */\n.ckw-survey{position:fixed;z-index:2147483000;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 24px);background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);padding:14px;animation:ckw-in .2s ease-out}\n@keyframes ckw-in{from{opacity:0;transform:translateY(8px)}}\n@media (max-width:520px){.ckw-survey{left:0;right:0;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0}}\n.ckw-sv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}\n.ckw-dots{display:flex;gap:4px}\n.ckw-dot{width:6px;height:6px;border-radius:50%;background:var(--ckw-bg3)}\n.ckw-dot[data-on=true]{background:var(--ckw-accent)}\n.ckw-q{font-weight:600;font-size:15px;margin:0 0 2px;border:0;padding:0}\n.ckw-root .ckw-q:focus-visible{outline:none}\n.ckw-qd{color:var(--ckw-fg2);font-size:13px;margin:0 0 10px}\n.ckw-scale{display:flex;gap:4px;flex-wrap:wrap}\n.ckw-num{flex:1 1 0;min-width:26px;height:34px;border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:8px;font-size:13px;font-weight:600;padding:0}\n.ckw-num:hover{border-color:var(--ckw-accent)}\n.ckw-num[aria-pressed=true]{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-color:var(--ckw-accent)}\n.ckw-root .ckw-star{background:none;border:0;padding:2px;color:var(--ckw-bg3)}\n.ckw-root .ckw-star[data-on=true]{color:#f5a524}\n.ckw-star svg{width:28px;height:28px}\n.ckw-lh{display:flex;justify-content:space-between;color:var(--ckw-fg3);font-size:11px;margin-top:4px}\n.ckw-opts{display:flex;flex-direction:column;gap:6px}\n.ckw-opt{display:flex;gap:8px;align-items:center;border:1px solid var(--ckw-line);border-radius:8px;padding:7px 10px;background:var(--ckw-bg);cursor:pointer}\n.ckw-opt:has(input:checked){border-color:var(--ckw-accent);background:color-mix(in srgb,var(--ckw-accent) 8%,transparent)}\n.ckw-opt input{accent-color:var(--ckw-accent)}\n.ckw-sv-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}\n.ckw-thanks{text-align:center;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:8px}\n.ckw-tick{width:32px;height:32px;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:flex;align-items:center;justify-content:center}\n";
3
3
  /** Puts the stylesheet into the page once, however many widgets mount. */
4
4
  export declare const useStyles: () => void;
package/dist/styles.js CHANGED
@@ -4,15 +4,14 @@
4
4
  import { useEffect } from "react";
5
5
  var STYLE_ID = "ckw-styles";
6
6
  var CSS = `
7
- .ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);
7
+ .ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);
8
8
  font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}
9
- .ckw-root[data-theme=dark]{--ckw-bg:#17181b;--ckw-bg2:#1f2024;--ckw-bg3:#292a30;--ckw-fg:#f1f2f4;--ckw-fg2:#b0b3ba;--ckw-fg3:#7e818a;--ckw-line:#2e2f35;--ckw-shadow:0 8px 30px rgba(0,0,0,.5)}
10
- @media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#17181b;--ckw-bg2:#1f2024;--ckw-bg3:#292a30;--ckw-fg:#f1f2f4;--ckw-fg2:#b0b3ba;--ckw-fg3:#7e818a;--ckw-line:#2e2f35;--ckw-shadow:0 8px 30px rgba(0,0,0,.5)}}
9
+ .ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07)}
10
+ @media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07)}}
11
11
  .ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}
12
- .ckw-root button,.ckw-root input,.ckw-root select,.ckw-root textarea{font:inherit;color:inherit;margin:0}
12
+ :where(.ckw-root) :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}
13
13
  .ckw-root button{cursor:pointer}
14
14
  .ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}
15
- .ckw-board{width:100%;max-width:760px;margin:0 auto;background:var(--ckw-bg);min-width:0}
16
15
  .ckw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
17
16
  .ckw-title{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}
18
17
  .ckw-sub{color:var(--ckw-fg2);margin:2px 0 0;font-size:13px}
@@ -36,7 +35,7 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
36
35
  .ckw-seg button[aria-pressed=true]{background:var(--ckw-bg3);color:var(--ckw-fg);font-weight:500}
37
36
  .ckw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
38
37
  .ckw-chip{border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ckw-fg2)}
39
- .ckw-chip[aria-pressed=true]{background:var(--ckw-fg);color:var(--ckw-bg);border-color:var(--ckw-fg)}
38
+ .ckw-chip[aria-pressed=true],.ckw-chip[aria-checked=true]{background:var(--ckw-fg);color:var(--ckw-bg);border-color:var(--ckw-fg)}
40
39
  .ckw-list{list-style:none;margin:0;padding:0;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}
41
40
  .ckw-list>li+li{border-top:1px solid var(--ckw-line)}
42
41
  .ckw-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--ckw-bg)}
@@ -62,7 +61,7 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
62
61
  .ckw-error{border:1px solid color-mix(in srgb,var(--ckw-danger) 40%,transparent);background:color-mix(in srgb,var(--ckw-danger) 8%,transparent);color:var(--ckw-danger);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
63
62
  .ckw-skel{height:68px;border-radius:8px;background:var(--ckw-bg2);animation:ckw-sh 1.2s ease-in-out infinite;margin-bottom:6px}
64
63
  @keyframes ckw-sh{50%{opacity:.5}}
65
- @media (prefers-reduced-motion:reduce){.ckw-skel{animation:none}.ckw-root *{transition:none!important}}
64
+ @media (prefers-reduced-motion:reduce){.ckw-skel,.ckw-scrim,.ckw-modal{animation:none}.ckw-root *{transition:none!important}}
66
65
  .ckw-form{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ckw-line);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--ckw-bg)}
67
66
  .ckw-field{display:flex;flex-direction:column;gap:4px}
68
67
  .ckw-label{font-size:12px;font-weight:600;color:var(--ckw-fg2)}
@@ -71,26 +70,130 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
71
70
  .ckw-dupes p{margin:0 0 4px;color:var(--ckw-fg2);font-size:12px}
72
71
  .ckw-dupe{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:3px 0}
73
72
  .ckw-dupe span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
74
- .ckw-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
75
- @media (max-width:640px){.ckw-cols{grid-template-columns:1fr}}
76
- .ckw-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ckw-fg2);margin:0 0 8px;display:flex;gap:6px;align-items:center}
77
- .ckw-card{border:1px solid var(--ckw-line);border-radius:8px;padding:10px;margin-bottom:8px;background:var(--ckw-bg)}
78
- .ckw-card .ckw-link{margin-bottom:6px}
79
- .ckw-entry{padding:12px 0;border-bottom:1px solid var(--ckw-line)}
80
- .ckw-entry time{font-size:12px;color:var(--ckw-fg3)}
81
- .ckw-entry h3{font-size:15px;margin:2px 0 4px}
82
- .ckw-entry p{margin:0;color:var(--ckw-fg2);white-space:pre-wrap;overflow-wrap:anywhere}
83
- .ckw-back{margin-bottom:8px;padding-left:4px}
84
- .ckw-detail-head{display:flex;gap:12px;align-items:flex-start}
85
- .ckw-detail-head h2{margin:0 0 4px;font-size:18px;overflow-wrap:anywhere}
86
- .ckw-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ckw-fg2);margin:12px 0}
87
- .ckw-h{font-size:13px;font-weight:600;margin:16px 0 8px}
88
- .ckw-comment{padding:8px 0;border-top:1px solid var(--ckw-line)}
89
- .ckw-comment b{font-size:13px}
90
- .ckw-comment p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
91
73
  .ckw-team{margin-left:6px;background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:4px;padding:0 5px;font-size:10px;font-weight:700;text-transform:uppercase;vertical-align:1px}
92
74
  .ckw-time{color:var(--ckw-fg3);font-size:12px;margin-left:6px}
93
75
  .ckw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
76
+ /* Board */
77
+ .ckw-board{width:100%;max-width:1160px;margin:0 auto;background:var(--ckw-bg);min-width:0}
78
+ .ckw-board.ckw-full{max-width:none;min-height:100%;min-height:100dvh}
79
+ .ckw-board.ckw-full>.ckw-body-wrap{max-width:1160px;margin:0 auto;padding:0 16px 56px}
80
+ .ckw-top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--ckw-bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--ckw-line);margin-bottom:24px}
81
+ .ckw-top-row{max-width:1160px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
82
+ .ckw-brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:15px;color:var(--ckw-fg);background:none;border:0;padding:4px 2px;border-radius:8px;min-width:0}
83
+ .ckw-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
84
+ .ckw-brand img{width:28px;height:28px;border-radius:7px;object-fit:cover;outline:1px solid oklch(0 0 0/.1);outline-offset:-1px;flex:none}
85
+ .ckw-root[data-theme=dark] .ckw-brand img{outline-color:oklch(1 0 0/.1)}
86
+ .ckw-brand-mark{width:28px;height:28px;border-radius:7px;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
87
+ .ckw-nav{display:flex;gap:2px;flex:1;min-width:0}
88
+ .ckw-nav-tab{background:none;border:0;border-radius:8px;padding:0 12px;height:34px;color:var(--ckw-fg2);font-weight:550;font-size:14px;white-space:nowrap;transition:background-color .1s linear,color .1s linear}
89
+ .ckw-nav-tab:hover{color:var(--ckw-fg);background:var(--ckw-bg2)}
90
+ .ckw-nav-tab[aria-selected=true]{color:var(--ckw-fg);background:var(--ckw-bg3)}
91
+ .ckw-top-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
92
+ .ckw-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:0;background:none;color:var(--ckw-fg2);flex:none}
93
+ .ckw-icon-btn:hover{background:var(--ckw-bg2);color:var(--ckw-fg)}
94
+ .ckw-searchbox{display:flex;align-items:center;border-radius:8px;transition:background-color .1s linear}
95
+ .ckw-search-input{width:0;padding:0;border:0;background:none;outline:none;font-size:14px;height:34px;transition:width .15s cubic-bezier(.2,0,0,1)}
96
+ .ckw-searchbox[data-open]{background:var(--ckw-bg2)}
97
+ .ckw-searchbox[data-open] .ckw-search-input{width:180px;padding-right:10px}
98
+ .ckw-searchbox:focus-within{outline:2px solid var(--ckw-accent);outline-offset:0}
99
+ .ckw-root .ckw-search-input:focus-visible{outline:none}
100
+ .ckw-search-input::-webkit-search-cancel-button{display:none}
101
+ .ckw-submit{height:34px}
102
+ .ckw-btn,.ckw-vote,.ckw-upvote,.ckw-icon-btn{transition-property:background-color,border-color,color,scale;transition-duration:.1s;transition-timing-function:linear}
103
+ .ckw-btn:active:not([disabled]),.ckw-vote:active,.ckw-upvote:active,.ckw-icon-btn:active{scale:.96}
104
+ .ckw-intro{margin:0 0 20px}
105
+ .ckw-intro h1{font-size:24px;font-weight:650;letter-spacing:-.02em;margin:0;text-wrap:balance}
106
+ .ckw-intro p{margin:4px 0 0;color:var(--ckw-fg2);font-size:14px;text-wrap:pretty}
107
+ .ckw-note{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;padding:6px 6px 6px 12px;margin-bottom:14px;background:color-mix(in srgb,var(--ckw-accent) 10%,transparent);color:var(--ckw-fg);font-size:13px;font-weight:500}
108
+ .ckw-tools .ckw-chips-inline{margin:0}
109
+ .ckw-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
110
+ .ckw-post{position:relative;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--ckw-card);box-shadow:var(--ckw-lift);transition:box-shadow .1s linear}
111
+ .ckw-post:hover{box-shadow:var(--ckw-lift),0 4px 14px rgba(16,18,24,.06)}
112
+ .ckw-post .ckw-vote,.ckw-card .ckw-vote{position:relative;z-index:1}
113
+ .ckw-stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
114
+ .ckw-post .ckw-link,.ckw-card .ckw-link{font-size:15px;font-weight:600;text-wrap:pretty}
115
+ .ckw-dot-sep{color:var(--ckw-fg3)}
116
+ .ckw-type{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600;color:var(--ckw-fg2);background:var(--ckw-bg2);white-space:nowrap;width:max-content}
117
+ .ckw-type::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ckw-fg3)}
118
+ .ckw-type[data-tone=blue]::before{background:#3f76ff}
119
+ .ckw-type[data-tone=red]::before{background:#ef4444}
120
+ .ckw-type[data-tone=violet]::before{background:#8b5cf6}
121
+ .ckw-type[data-tone=green]::before{background:#22c55e}
122
+ .ckw-av{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;background:var(--ckw-bg3);color:var(--ckw-fg2)}
123
+ .ckw-av[data-team]{background:var(--ckw-accent);color:var(--ckw-accent-ink)}
124
+ .ckw-count{font-weight:500;color:var(--ckw-fg3);font-variant-numeric:tabular-nums;margin-left:2px}
125
+ .ckw-empty p{margin:0 0 12px}
126
+ .ckw-empty p:only-child{margin:0}
127
+ /* Roadmap */
128
+ .ckw-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
129
+ .ckw-col{background:var(--ckw-col);border-radius:14px;padding:6px;min-width:0}
130
+ .ckw-col-head{padding:8px 8px 10px}
131
+ .ckw-col-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:650}
132
+ .ckw-col-head p{margin:2px 0 0 16px;font-size:12px;color:var(--ckw-fg3)}
133
+ .ckw-sdot{width:8px;height:8px;border-radius:50%;background:var(--ckw-fg3);flex:none}
134
+ .ckw-sdot[data-s=planned]{background:#3f76ff}
135
+ .ckw-sdot[data-s=progress]{background:#f59e0b}
136
+ .ckw-sdot[data-s=shipped]{background:#22c55e}
137
+ .ckw-col-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
138
+ .ckw-col-empty{margin:0;padding:24px 8px;text-align:center;font-size:12px;color:var(--ckw-fg3)}
139
+ .ckw-col .ckw-skel{margin:0 0 6px;height:96px;background:var(--ckw-card)}
140
+ .ckw-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;background:var(--ckw-card);box-shadow:var(--ckw-lift);transition:box-shadow .1s linear}
141
+ .ckw-card:hover{box-shadow:var(--ckw-lift),0 4px 14px rgba(16,18,24,.07)}
142
+ .ckw-card .ckw-link{font-size:14px}
143
+ .ckw-card .ckw-excerpt{margin:0}
144
+ .ckw-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
145
+ .ckw-who{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--ckw-fg2)}
146
+ .ckw-who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
147
+ .ckw-vote-sm{height:28px;border-radius:7px;font-size:12px}
148
+ @media (max-width:900px){.ckw-cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scroll-padding:0 16px}.ckw-col{flex:0 0 min(82%,300px);scroll-snap-align:start}}
149
+ /* Post page */
150
+ .ckw-back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:6px 8px 6px 4px;margin:0 0 12px -4px;border-radius:8px;color:var(--ckw-fg2);font-size:13px;font-weight:550}
151
+ .ckw-back:hover{color:var(--ckw-fg);background:var(--ckw-bg2)}
152
+ .ckw-back-icon{display:inline-block;transform:rotate(-90deg);line-height:0}
153
+ .ckw-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
154
+ .ckw-detail-title{margin:0 0 8px;font-size:22px;font-weight:650;letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}
155
+ .ckw-byline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ckw-fg2)}
156
+ .ckw-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ckw-fg);margin:16px 0 0;font-size:14.5px;line-height:1.6;text-wrap:pretty}
157
+ .ckw-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:650;margin:28px 0 10px;padding-top:20px;border-top:1px solid var(--ckw-line)}
158
+ .ckw-composer{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
159
+ .ckw-composer .ckw-actions{align-items:center}
160
+ .ckw-as{margin:0 auto 0 0}
161
+ .ckw-comment{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--ckw-line)}
162
+ .ckw-comment b{font-size:13px}
163
+ .ckw-comment p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
164
+ .ckw-side{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;background:var(--ckw-card);box-shadow:var(--ckw-lift)}
165
+ .ckw-upvote{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:600;font-size:14px;color:var(--ckw-fg)}
166
+ .ckw-upvote b{margin-left:auto;font-variant-numeric:tabular-nums}
167
+ .ckw-upvote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}
168
+ .ckw-upvote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}
169
+ .ckw-facts{margin:0;display:flex;flex-direction:column;gap:10px;font-size:13px}
170
+ .ckw-facts div{display:flex;justify-content:space-between;align-items:center;gap:8px}
171
+ .ckw-facts dt{color:var(--ckw-fg3)}
172
+ .ckw-facts dd{margin:0;color:var(--ckw-fg)}
173
+ @media (max-width:760px){.ckw-detail-grid{grid-template-columns:1fr;gap:16px}.ckw-side{position:static;order:-1}}
174
+ /* Changelog */
175
+ .ckw-log{max-width:820px}
176
+ .ckw-entry{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--ckw-line)}
177
+ .ckw-entry:first-child{border-top:0;padding-top:4px}
178
+ .ckw-entry time{font-size:13px;color:var(--ckw-fg3);padding-top:2px}
179
+ .ckw-entry h3{font-size:17px;font-weight:650;margin:0 0 6px;text-wrap:balance}
180
+ .ckw-entry p{margin:0;color:var(--ckw-fg2);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
181
+ @media (max-width:640px){.ckw-entry{grid-template-columns:1fr;gap:4px}}
182
+ /* Dialog */
183
+ .ckw-scrim{position:fixed;inset:0;z-index:2147483002;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;padding:16px;animation:ckw-fade .15s ease-out}
184
+ .ckw-modal{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ckw-bg);color:var(--ckw-fg);border-radius:14px;box-shadow:var(--ckw-shadow),0 0 0 1px var(--ckw-line);animation:ckw-in .18s ease-out}
185
+ .ckw-modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 4px 18px}
186
+ .ckw-modal-head h2{margin:0;font-size:16px;font-weight:650}
187
+ .ckw-modal-body{display:flex;flex-direction:column;gap:12px;padding:8px 18px 18px}
188
+ @keyframes ckw-fade{from{opacity:0}}
189
+ @media (max-width:520px){.ckw-scrim{align-items:flex-end;padding:0}.ckw-modal{max-width:none;border-radius:14px 14px 0 0;max-height:92dvh}}
190
+ .ckw-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
191
+ @media (max-width:480px){.ckw-pair{grid-template-columns:1fr}}
192
+ .ckw-fine{margin:-4px 0 0;font-size:12px;color:var(--ckw-fg3);text-wrap:pretty}
193
+ .ckw-opt-l{font-weight:500;color:var(--ckw-fg3)}
194
+ .ckw-foot{text-align:center;font-size:12px;color:var(--ckw-fg3);margin:0;padding:0 16px 24px}
195
+ .ckw-linkish{background:none;border:0;padding:0;color:var(--ckw-fg2);text-decoration:underline;font-size:12px}
196
+ @media (max-width:720px){.ckw-top-row{gap:8px;padding:8px 12px}.ckw-nav{order:3;flex-basis:100%;overflow-x:auto;margin:0 -4px}.ckw-submit span{display:none}.ckw-submit{width:34px;padding:0}.ckw-searchbox[data-open] .ckw-search-input{width:120px}.ckw-top{margin-bottom:16px}.ckw-board.ckw-full>.ckw-body-wrap{padding:0 12px 40px}.ckw-post{padding:12px}.ckw-intro h1{font-size:20px}}
94
197
  /* Floating widget */
95
198
  .ckw-fab{position:fixed;z-index:2147483000;bottom:20px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-weight:600;font-size:14px;box-shadow:var(--ckw-shadow)}
96
199
  .ckw-fab[data-pos=bottom-right],.ckw-pop[data-pos=bottom-right]{right:20px}
package/dist/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/styles.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nconst STYLE_ID = \"ckw-styles\";\n\n/** The one stylesheet for every Cockpit widget. Everything is scoped under `.ckw-root` and prefixed `ckw-`. */\nexport const CSS = `\n.ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);\nfont-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}\n.ckw-root[data-theme=dark]{--ckw-bg:#17181b;--ckw-bg2:#1f2024;--ckw-bg3:#292a30;--ckw-fg:#f1f2f4;--ckw-fg2:#b0b3ba;--ckw-fg3:#7e818a;--ckw-line:#2e2f35;--ckw-shadow:0 8px 30px rgba(0,0,0,.5)}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#17181b;--ckw-bg2:#1f2024;--ckw-bg3:#292a30;--ckw-fg:#f1f2f4;--ckw-fg2:#b0b3ba;--ckw-fg3:#7e818a;--ckw-line:#2e2f35;--ckw-shadow:0 8px 30px rgba(0,0,0,.5)}}\n.ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}\n.ckw-root button,.ckw-root input,.ckw-root select,.ckw-root textarea{font:inherit;color:inherit;margin:0}\n.ckw-root button{cursor:pointer}\n.ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}\n.ckw-board{width:100%;max-width:760px;margin:0 auto;background:var(--ckw-bg);min-width:0}\n.ckw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}\n.ckw-title{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}\n.ckw-sub{color:var(--ckw-fg2);margin:2px 0 0;font-size:13px}\n.ckw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-btn:hover{background:var(--ckw-bg2)}\n.ckw-btn[disabled]{opacity:.55;cursor:not-allowed}\n.ckw-btn-primary{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-btn-primary:hover{background:var(--ckw-accent);filter:brightness(1.08)}\n.ckw-btn-ghost{border-color:transparent;background:transparent;color:var(--ckw-fg2)}\n.ckw-icon{width:16px;height:16px;flex:none;display:block}\n.ckw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ckw-line);margin-bottom:12px;overflow-x:auto}\n.ckw-tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;margin-bottom:-1px;color:var(--ckw-fg2);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-tab[aria-selected=true]{color:var(--ckw-fg);border-bottom-color:var(--ckw-accent)}\n.ckw-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}\n.ckw-input,.ckw-select,.ckw-textarea{width:100%;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);padding:7px 10px;font-size:14px;min-height:34px}\n.ckw-input::placeholder,.ckw-textarea::placeholder{color:var(--ckw-fg3)}\n.ckw-textarea{resize:vertical;min-height:72px}\n.ckw-search{flex:1 1 160px;min-width:0}\n.ckw-seg{display:inline-flex;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-seg button{border:0;background:var(--ckw-bg);padding:0 10px;height:32px;font-size:13px;color:var(--ckw-fg2)}\n.ckw-seg button[aria-pressed=true]{background:var(--ckw-bg3);color:var(--ckw-fg);font-weight:500}\n.ckw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}\n.ckw-chip{border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ckw-fg2)}\n.ckw-chip[aria-pressed=true]{background:var(--ckw-fg);color:var(--ckw-bg);border-color:var(--ckw-fg)}\n.ckw-list{list-style:none;margin:0;padding:0;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-list>li+li{border-top:1px solid var(--ckw-line)}\n.ckw-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--ckw-bg)}\n.ckw-row:hover{background:var(--ckw-bg2)}\n.ckw-vote{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:44px;min-height:48px;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 0;color:var(--ckw-fg2)}\n.ckw-vote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}\n.ckw-vote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-vote-sm{width:auto;min-height:0;flex-direction:row;gap:4px;padding:2px 8px}\n.ckw-main{flex:1;min-width:0;text-align:left}\n.ckw-link{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-weight:600;font-size:14px;color:var(--ckw-fg);overflow-wrap:anywhere}\n.ckw-link:hover{color:var(--ckw-accent)}\n.ckw-excerpt{margin:2px 0 0;color:var(--ckw-fg2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}\n.ckw-meta{display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--ckw-fg3);font-size:12px;flex-wrap:wrap}\n.ckw-pill{display:inline-flex;align-items:center;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;background:var(--ckw-bg3);color:var(--ckw-fg2)}\n.ckw-pill[data-s=planned]{background:rgba(63,118,255,.14);color:#3f76ff}\n.ckw-pill[data-s=progress]{background:rgba(245,158,11,.16);color:#b45309}\n.ckw-pill[data-s=shipped]{background:rgba(22,163,74,.15);color:#15803d}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=progress]{color:#fbbf24}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=shipped]{color:#4ade80}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto] .ckw-pill[data-s=progress]{color:#fbbf24}.ckw-root[data-theme=auto] .ckw-pill[data-s=shipped]{color:#4ade80}}\n.ckw-stat{display:inline-flex;align-items:center;gap:4px}\n.ckw-empty{border:1px dashed var(--ckw-line);border-radius:8px;padding:28px 16px;text-align:center;color:var(--ckw-fg2)}\n.ckw-error{border:1px solid color-mix(in srgb,var(--ckw-danger) 40%,transparent);background:color-mix(in srgb,var(--ckw-danger) 8%,transparent);color:var(--ckw-danger);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}\n.ckw-skel{height:68px;border-radius:8px;background:var(--ckw-bg2);animation:ckw-sh 1.2s ease-in-out infinite;margin-bottom:6px}\n@keyframes ckw-sh{50%{opacity:.5}}\n@media (prefers-reduced-motion:reduce){.ckw-skel{animation:none}.ckw-root *{transition:none!important}}\n.ckw-form{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ckw-line);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--ckw-bg)}\n.ckw-field{display:flex;flex-direction:column;gap:4px}\n.ckw-label{font-size:12px;font-weight:600;color:var(--ckw-fg2)}\n.ckw-actions{display:flex;gap:8px;justify-content:flex-end}\n.ckw-dupes{border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg2);padding:8px 10px;font-size:13px}\n.ckw-dupes p{margin:0 0 4px;color:var(--ckw-fg2);font-size:12px}\n.ckw-dupe{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:3px 0}\n.ckw-dupe span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ckw-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}\n@media (max-width:640px){.ckw-cols{grid-template-columns:1fr}}\n.ckw-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ckw-fg2);margin:0 0 8px;display:flex;gap:6px;align-items:center}\n.ckw-card{border:1px solid var(--ckw-line);border-radius:8px;padding:10px;margin-bottom:8px;background:var(--ckw-bg)}\n.ckw-card .ckw-link{margin-bottom:6px}\n.ckw-entry{padding:12px 0;border-bottom:1px solid var(--ckw-line)}\n.ckw-entry time{font-size:12px;color:var(--ckw-fg3)}\n.ckw-entry h3{font-size:15px;margin:2px 0 4px}\n.ckw-entry p{margin:0;color:var(--ckw-fg2);white-space:pre-wrap;overflow-wrap:anywhere}\n.ckw-back{margin-bottom:8px;padding-left:4px}\n.ckw-detail-head{display:flex;gap:12px;align-items:flex-start}\n.ckw-detail-head h2{margin:0 0 4px;font-size:18px;overflow-wrap:anywhere}\n.ckw-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ckw-fg2);margin:12px 0}\n.ckw-h{font-size:13px;font-weight:600;margin:16px 0 8px}\n.ckw-comment{padding:8px 0;border-top:1px solid var(--ckw-line)}\n.ckw-comment b{font-size:13px}\n.ckw-comment p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}\n.ckw-team{margin-left:6px;background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:4px;padding:0 5px;font-size:10px;font-weight:700;text-transform:uppercase;vertical-align:1px}\n.ckw-time{color:var(--ckw-fg3);font-size:12px;margin-left:6px}\n.ckw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n/* Floating widget */\n.ckw-fab{position:fixed;z-index:2147483000;bottom:20px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-weight:600;font-size:14px;box-shadow:var(--ckw-shadow)}\n.ckw-fab[data-pos=bottom-right],.ckw-pop[data-pos=bottom-right]{right:20px}\n.ckw-fab[data-pos=bottom-left],.ckw-pop[data-pos=bottom-left]{left:20px}\n.ckw-pop{position:fixed;z-index:2147483001;bottom:70px;width:380px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);overflow:hidden}\n.ckw-pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--ckw-line);font-weight:600}\n.ckw-pop-body{padding:12px;overflow-y:auto;flex:1}\n.ckw-pop-foot{padding:8px 12px;border-top:1px solid var(--ckw-line);display:flex;justify-content:space-between;align-items:center;font-size:13px}\n.ckw-pop-foot a{color:var(--ckw-accent);text-decoration:none;font-weight:500}\n.ckw-pop .ckw-list{border:0;border-radius:0}\n.ckw-pop .ckw-row{padding:8px 0}\n.ckw-pop .ckw-form{border:0;padding:0;margin:12px 0 0}\n@media (max-width:520px){.ckw-pop{left:0!important;right:0!important;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;max-height:85vh}.ckw-fab{bottom:14px}.ckw-fab[data-pos=bottom-right]{right:14px}.ckw-fab[data-pos=bottom-left]{left:14px}}\n/* Survey */\n.ckw-survey{position:fixed;z-index:2147483000;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 24px);background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);padding:14px;animation:ckw-in .2s ease-out}\n@keyframes ckw-in{from{opacity:0;transform:translateY(8px)}}\n@media (max-width:520px){.ckw-survey{left:0;right:0;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0}}\n.ckw-sv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}\n.ckw-dots{display:flex;gap:4px}\n.ckw-dot{width:6px;height:6px;border-radius:50%;background:var(--ckw-bg3)}\n.ckw-dot[data-on=true]{background:var(--ckw-accent)}\n.ckw-q{font-weight:600;font-size:15px;margin:0 0 2px;border:0;padding:0}\n.ckw-root .ckw-q:focus-visible{outline:none}\n.ckw-qd{color:var(--ckw-fg2);font-size:13px;margin:0 0 10px}\n.ckw-scale{display:flex;gap:4px;flex-wrap:wrap}\n.ckw-num{flex:1 1 0;min-width:26px;height:34px;border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:8px;font-size:13px;font-weight:600;padding:0}\n.ckw-num:hover{border-color:var(--ckw-accent)}\n.ckw-num[aria-pressed=true]{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-color:var(--ckw-accent)}\n.ckw-root .ckw-star{background:none;border:0;padding:2px;color:var(--ckw-bg3)}\n.ckw-root .ckw-star[data-on=true]{color:#f5a524}\n.ckw-star svg{width:28px;height:28px}\n.ckw-lh{display:flex;justify-content:space-between;color:var(--ckw-fg3);font-size:11px;margin-top:4px}\n.ckw-opts{display:flex;flex-direction:column;gap:6px}\n.ckw-opt{display:flex;gap:8px;align-items:center;border:1px solid var(--ckw-line);border-radius:8px;padding:7px 10px;background:var(--ckw-bg);cursor:pointer}\n.ckw-opt:has(input:checked){border-color:var(--ckw-accent);background:color-mix(in srgb,var(--ckw-accent) 8%,transparent)}\n.ckw-opt input{accent-color:var(--ckw-accent)}\n.ckw-sv-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}\n.ckw-thanks{text-align:center;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:8px}\n.ckw-tick{width:32px;height:32px;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:flex;align-items:center;justify-content:center}\n`;\n\n/** Puts the stylesheet into the page once, however many widgets mount. */\nexport const useStyles = () => {\n useEffect(() => {\n if (document.getElementById(STYLE_ID)) return;\n const el = document.createElement(\"style\");\n el.id = STYLE_ID;\n el.textContent = CSS;\n document.head.appendChild(el);\n }, []);\n};\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAE1B,IAAM,WAAW;AAGV,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkIZ,IAAM,YAAY,MAAM;AAC3B,YAAU,MAAM;AACZ,QAAI,SAAS,eAAe,QAAQ,EAAG;AACvC,UAAM,KAAK,SAAS,cAAc,OAAO;AACzC,OAAG,KAAK;AACR,OAAG,cAAc;AACjB,aAAS,KAAK,YAAY,EAAE;AAAA,EAChC,GAAG,CAAC,CAAC;AACT;","names":[]}
1
+ {"version":3,"sources":["../src/styles.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nconst STYLE_ID = \"ckw-styles\";\n\n/** The one stylesheet for every Cockpit widget. Everything is scoped under `.ckw-root` and prefixed `ckw-`. */\nexport const CSS = `\n.ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);\nfont-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}\n.ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07)}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07)}}\n.ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}\n:where(.ckw-root) :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}\n.ckw-root button{cursor:pointer}\n.ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}\n.ckw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}\n.ckw-title{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}\n.ckw-sub{color:var(--ckw-fg2);margin:2px 0 0;font-size:13px}\n.ckw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-btn:hover{background:var(--ckw-bg2)}\n.ckw-btn[disabled]{opacity:.55;cursor:not-allowed}\n.ckw-btn-primary{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-btn-primary:hover{background:var(--ckw-accent);filter:brightness(1.08)}\n.ckw-btn-ghost{border-color:transparent;background:transparent;color:var(--ckw-fg2)}\n.ckw-icon{width:16px;height:16px;flex:none;display:block}\n.ckw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ckw-line);margin-bottom:12px;overflow-x:auto}\n.ckw-tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;margin-bottom:-1px;color:var(--ckw-fg2);font-weight:500;font-size:13px;white-space:nowrap}\n.ckw-tab[aria-selected=true]{color:var(--ckw-fg);border-bottom-color:var(--ckw-accent)}\n.ckw-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}\n.ckw-input,.ckw-select,.ckw-textarea{width:100%;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);padding:7px 10px;font-size:14px;min-height:34px}\n.ckw-input::placeholder,.ckw-textarea::placeholder{color:var(--ckw-fg3)}\n.ckw-textarea{resize:vertical;min-height:72px}\n.ckw-search{flex:1 1 160px;min-width:0}\n.ckw-seg{display:inline-flex;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-seg button{border:0;background:var(--ckw-bg);padding:0 10px;height:32px;font-size:13px;color:var(--ckw-fg2)}\n.ckw-seg button[aria-pressed=true]{background:var(--ckw-bg3);color:var(--ckw-fg);font-weight:500}\n.ckw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}\n.ckw-chip{border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ckw-fg2)}\n.ckw-chip[aria-pressed=true],.ckw-chip[aria-checked=true]{background:var(--ckw-fg);color:var(--ckw-bg);border-color:var(--ckw-fg)}\n.ckw-list{list-style:none;margin:0;padding:0;border:1px solid var(--ckw-line);border-radius:8px;overflow:hidden}\n.ckw-list>li+li{border-top:1px solid var(--ckw-line)}\n.ckw-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--ckw-bg)}\n.ckw-row:hover{background:var(--ckw-bg2)}\n.ckw-vote{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:44px;min-height:48px;border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 0;color:var(--ckw-fg2)}\n.ckw-vote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}\n.ckw-vote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-vote-sm{width:auto;min-height:0;flex-direction:row;gap:4px;padding:2px 8px}\n.ckw-main{flex:1;min-width:0;text-align:left}\n.ckw-link{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-weight:600;font-size:14px;color:var(--ckw-fg);overflow-wrap:anywhere}\n.ckw-link:hover{color:var(--ckw-accent)}\n.ckw-excerpt{margin:2px 0 0;color:var(--ckw-fg2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}\n.ckw-meta{display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--ckw-fg3);font-size:12px;flex-wrap:wrap}\n.ckw-pill{display:inline-flex;align-items:center;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;background:var(--ckw-bg3);color:var(--ckw-fg2)}\n.ckw-pill[data-s=planned]{background:rgba(63,118,255,.14);color:#3f76ff}\n.ckw-pill[data-s=progress]{background:rgba(245,158,11,.16);color:#b45309}\n.ckw-pill[data-s=shipped]{background:rgba(22,163,74,.15);color:#15803d}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=progress]{color:#fbbf24}\n.ckw-root[data-theme=dark] .ckw-pill[data-s=shipped]{color:#4ade80}\n@media (prefers-color-scheme:dark){.ckw-root[data-theme=auto] .ckw-pill[data-s=progress]{color:#fbbf24}.ckw-root[data-theme=auto] .ckw-pill[data-s=shipped]{color:#4ade80}}\n.ckw-stat{display:inline-flex;align-items:center;gap:4px}\n.ckw-empty{border:1px dashed var(--ckw-line);border-radius:8px;padding:28px 16px;text-align:center;color:var(--ckw-fg2)}\n.ckw-error{border:1px solid color-mix(in srgb,var(--ckw-danger) 40%,transparent);background:color-mix(in srgb,var(--ckw-danger) 8%,transparent);color:var(--ckw-danger);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}\n.ckw-skel{height:68px;border-radius:8px;background:var(--ckw-bg2);animation:ckw-sh 1.2s ease-in-out infinite;margin-bottom:6px}\n@keyframes ckw-sh{50%{opacity:.5}}\n@media (prefers-reduced-motion:reduce){.ckw-skel,.ckw-scrim,.ckw-modal{animation:none}.ckw-root *{transition:none!important}}\n.ckw-form{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ckw-line);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--ckw-bg)}\n.ckw-field{display:flex;flex-direction:column;gap:4px}\n.ckw-label{font-size:12px;font-weight:600;color:var(--ckw-fg2)}\n.ckw-actions{display:flex;gap:8px;justify-content:flex-end}\n.ckw-dupes{border:1px solid var(--ckw-line);border-radius:8px;background:var(--ckw-bg2);padding:8px 10px;font-size:13px}\n.ckw-dupes p{margin:0 0 4px;color:var(--ckw-fg2);font-size:12px}\n.ckw-dupe{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:3px 0}\n.ckw-dupe span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ckw-team{margin-left:6px;background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:4px;padding:0 5px;font-size:10px;font-weight:700;text-transform:uppercase;vertical-align:1px}\n.ckw-time{color:var(--ckw-fg3);font-size:12px;margin-left:6px}\n.ckw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n/* Board */\n.ckw-board{width:100%;max-width:1160px;margin:0 auto;background:var(--ckw-bg);min-width:0}\n.ckw-board.ckw-full{max-width:none;min-height:100%;min-height:100dvh}\n.ckw-board.ckw-full>.ckw-body-wrap{max-width:1160px;margin:0 auto;padding:0 16px 56px}\n.ckw-top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--ckw-bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--ckw-line);margin-bottom:24px}\n.ckw-top-row{max-width:1160px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}\n.ckw-brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:15px;color:var(--ckw-fg);background:none;border:0;padding:4px 2px;border-radius:8px;min-width:0}\n.ckw-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}\n.ckw-brand img{width:28px;height:28px;border-radius:7px;object-fit:cover;outline:1px solid oklch(0 0 0/.1);outline-offset:-1px;flex:none}\n.ckw-root[data-theme=dark] .ckw-brand img{outline-color:oklch(1 0 0/.1)}\n.ckw-brand-mark{width:28px;height:28px;border-radius:7px;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}\n.ckw-nav{display:flex;gap:2px;flex:1;min-width:0}\n.ckw-nav-tab{background:none;border:0;border-radius:8px;padding:0 12px;height:34px;color:var(--ckw-fg2);font-weight:550;font-size:14px;white-space:nowrap;transition:background-color .1s linear,color .1s linear}\n.ckw-nav-tab:hover{color:var(--ckw-fg);background:var(--ckw-bg2)}\n.ckw-nav-tab[aria-selected=true]{color:var(--ckw-fg);background:var(--ckw-bg3)}\n.ckw-top-tools{display:flex;align-items:center;gap:6px;margin-left:auto}\n.ckw-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:0;background:none;color:var(--ckw-fg2);flex:none}\n.ckw-icon-btn:hover{background:var(--ckw-bg2);color:var(--ckw-fg)}\n.ckw-searchbox{display:flex;align-items:center;border-radius:8px;transition:background-color .1s linear}\n.ckw-search-input{width:0;padding:0;border:0;background:none;outline:none;font-size:14px;height:34px;transition:width .15s cubic-bezier(.2,0,0,1)}\n.ckw-searchbox[data-open]{background:var(--ckw-bg2)}\n.ckw-searchbox[data-open] .ckw-search-input{width:180px;padding-right:10px}\n.ckw-searchbox:focus-within{outline:2px solid var(--ckw-accent);outline-offset:0}\n.ckw-root .ckw-search-input:focus-visible{outline:none}\n.ckw-search-input::-webkit-search-cancel-button{display:none}\n.ckw-submit{height:34px}\n.ckw-btn,.ckw-vote,.ckw-upvote,.ckw-icon-btn{transition-property:background-color,border-color,color,scale;transition-duration:.1s;transition-timing-function:linear}\n.ckw-btn:active:not([disabled]),.ckw-vote:active,.ckw-upvote:active,.ckw-icon-btn:active{scale:.96}\n.ckw-intro{margin:0 0 20px}\n.ckw-intro h1{font-size:24px;font-weight:650;letter-spacing:-.02em;margin:0;text-wrap:balance}\n.ckw-intro p{margin:4px 0 0;color:var(--ckw-fg2);font-size:14px;text-wrap:pretty}\n.ckw-note{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;padding:6px 6px 6px 12px;margin-bottom:14px;background:color-mix(in srgb,var(--ckw-accent) 10%,transparent);color:var(--ckw-fg);font-size:13px;font-weight:500}\n.ckw-tools .ckw-chips-inline{margin:0}\n.ckw-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}\n.ckw-post{position:relative;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--ckw-card);box-shadow:var(--ckw-lift);transition:box-shadow .1s linear}\n.ckw-post:hover{box-shadow:var(--ckw-lift),0 4px 14px rgba(16,18,24,.06)}\n.ckw-post .ckw-vote,.ckw-card .ckw-vote{position:relative;z-index:1}\n.ckw-stretch::after{content:\"\";position:absolute;inset:0;border-radius:inherit}\n.ckw-post .ckw-link,.ckw-card .ckw-link{font-size:15px;font-weight:600;text-wrap:pretty}\n.ckw-dot-sep{color:var(--ckw-fg3)}\n.ckw-type{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600;color:var(--ckw-fg2);background:var(--ckw-bg2);white-space:nowrap;width:max-content}\n.ckw-type::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--ckw-fg3)}\n.ckw-type[data-tone=blue]::before{background:#3f76ff}\n.ckw-type[data-tone=red]::before{background:#ef4444}\n.ckw-type[data-tone=violet]::before{background:#8b5cf6}\n.ckw-type[data-tone=green]::before{background:#22c55e}\n.ckw-av{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;background:var(--ckw-bg3);color:var(--ckw-fg2)}\n.ckw-av[data-team]{background:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-count{font-weight:500;color:var(--ckw-fg3);font-variant-numeric:tabular-nums;margin-left:2px}\n.ckw-empty p{margin:0 0 12px}\n.ckw-empty p:only-child{margin:0}\n/* Roadmap */\n.ckw-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}\n.ckw-col{background:var(--ckw-col);border-radius:14px;padding:6px;min-width:0}\n.ckw-col-head{padding:8px 8px 10px}\n.ckw-col-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:650}\n.ckw-col-head p{margin:2px 0 0 16px;font-size:12px;color:var(--ckw-fg3)}\n.ckw-sdot{width:8px;height:8px;border-radius:50%;background:var(--ckw-fg3);flex:none}\n.ckw-sdot[data-s=planned]{background:#3f76ff}\n.ckw-sdot[data-s=progress]{background:#f59e0b}\n.ckw-sdot[data-s=shipped]{background:#22c55e}\n.ckw-col-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}\n.ckw-col-empty{margin:0;padding:24px 8px;text-align:center;font-size:12px;color:var(--ckw-fg3)}\n.ckw-col .ckw-skel{margin:0 0 6px;height:96px;background:var(--ckw-card)}\n.ckw-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;background:var(--ckw-card);box-shadow:var(--ckw-lift);transition:box-shadow .1s linear}\n.ckw-card:hover{box-shadow:var(--ckw-lift),0 4px 14px rgba(16,18,24,.07)}\n.ckw-card .ckw-link{font-size:14px}\n.ckw-card .ckw-excerpt{margin:0}\n.ckw-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}\n.ckw-who{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--ckw-fg2)}\n.ckw-who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ckw-vote-sm{height:28px;border-radius:7px;font-size:12px}\n@media (max-width:900px){.ckw-cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scroll-padding:0 16px}.ckw-col{flex:0 0 min(82%,300px);scroll-snap-align:start}}\n/* Post page */\n.ckw-back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:6px 8px 6px 4px;margin:0 0 12px -4px;border-radius:8px;color:var(--ckw-fg2);font-size:13px;font-weight:550}\n.ckw-back:hover{color:var(--ckw-fg);background:var(--ckw-bg2)}\n.ckw-back-icon{display:inline-block;transform:rotate(-90deg);line-height:0}\n.ckw-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}\n.ckw-detail-title{margin:0 0 8px;font-size:22px;font-weight:650;letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}\n.ckw-byline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ckw-fg2)}\n.ckw-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ckw-fg);margin:16px 0 0;font-size:14.5px;line-height:1.6;text-wrap:pretty}\n.ckw-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:650;margin:28px 0 10px;padding-top:20px;border-top:1px solid var(--ckw-line)}\n.ckw-composer{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}\n.ckw-composer .ckw-actions{align-items:center}\n.ckw-as{margin:0 auto 0 0}\n.ckw-comment{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--ckw-line)}\n.ckw-comment b{font-size:13px}\n.ckw-comment p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}\n.ckw-side{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;background:var(--ckw-card);box-shadow:var(--ckw-lift)}\n.ckw-upvote{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--ckw-line);background:var(--ckw-bg);font-weight:600;font-size:14px;color:var(--ckw-fg)}\n.ckw-upvote b{margin-left:auto;font-variant-numeric:tabular-nums}\n.ckw-upvote:hover{border-color:var(--ckw-accent);color:var(--ckw-accent)}\n.ckw-upvote[aria-pressed=true]{background:var(--ckw-accent);border-color:var(--ckw-accent);color:var(--ckw-accent-ink)}\n.ckw-facts{margin:0;display:flex;flex-direction:column;gap:10px;font-size:13px}\n.ckw-facts div{display:flex;justify-content:space-between;align-items:center;gap:8px}\n.ckw-facts dt{color:var(--ckw-fg3)}\n.ckw-facts dd{margin:0;color:var(--ckw-fg)}\n@media (max-width:760px){.ckw-detail-grid{grid-template-columns:1fr;gap:16px}.ckw-side{position:static;order:-1}}\n/* Changelog */\n.ckw-log{max-width:820px}\n.ckw-entry{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--ckw-line)}\n.ckw-entry:first-child{border-top:0;padding-top:4px}\n.ckw-entry time{font-size:13px;color:var(--ckw-fg3);padding-top:2px}\n.ckw-entry h3{font-size:17px;font-weight:650;margin:0 0 6px;text-wrap:balance}\n.ckw-entry p{margin:0;color:var(--ckw-fg2);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}\n@media (max-width:640px){.ckw-entry{grid-template-columns:1fr;gap:4px}}\n/* Dialog */\n.ckw-scrim{position:fixed;inset:0;z-index:2147483002;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;padding:16px;animation:ckw-fade .15s ease-out}\n.ckw-modal{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ckw-bg);color:var(--ckw-fg);border-radius:14px;box-shadow:var(--ckw-shadow),0 0 0 1px var(--ckw-line);animation:ckw-in .18s ease-out}\n.ckw-modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 4px 18px}\n.ckw-modal-head h2{margin:0;font-size:16px;font-weight:650}\n.ckw-modal-body{display:flex;flex-direction:column;gap:12px;padding:8px 18px 18px}\n@keyframes ckw-fade{from{opacity:0}}\n@media (max-width:520px){.ckw-scrim{align-items:flex-end;padding:0}.ckw-modal{max-width:none;border-radius:14px 14px 0 0;max-height:92dvh}}\n.ckw-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n@media (max-width:480px){.ckw-pair{grid-template-columns:1fr}}\n.ckw-fine{margin:-4px 0 0;font-size:12px;color:var(--ckw-fg3);text-wrap:pretty}\n.ckw-opt-l{font-weight:500;color:var(--ckw-fg3)}\n.ckw-foot{text-align:center;font-size:12px;color:var(--ckw-fg3);margin:0;padding:0 16px 24px}\n.ckw-linkish{background:none;border:0;padding:0;color:var(--ckw-fg2);text-decoration:underline;font-size:12px}\n@media (max-width:720px){.ckw-top-row{gap:8px;padding:8px 12px}.ckw-nav{order:3;flex-basis:100%;overflow-x:auto;margin:0 -4px}.ckw-submit span{display:none}.ckw-submit{width:34px;padding:0}.ckw-searchbox[data-open] .ckw-search-input{width:120px}.ckw-top{margin-bottom:16px}.ckw-board.ckw-full>.ckw-body-wrap{padding:0 12px 40px}.ckw-post{padding:12px}.ckw-intro h1{font-size:20px}}\n/* Floating widget */\n.ckw-fab{position:fixed;z-index:2147483000;bottom:20px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-weight:600;font-size:14px;box-shadow:var(--ckw-shadow)}\n.ckw-fab[data-pos=bottom-right],.ckw-pop[data-pos=bottom-right]{right:20px}\n.ckw-fab[data-pos=bottom-left],.ckw-pop[data-pos=bottom-left]{left:20px}\n.ckw-pop{position:fixed;z-index:2147483001;bottom:70px;width:380px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);overflow:hidden}\n.ckw-pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--ckw-line);font-weight:600}\n.ckw-pop-body{padding:12px;overflow-y:auto;flex:1}\n.ckw-pop-foot{padding:8px 12px;border-top:1px solid var(--ckw-line);display:flex;justify-content:space-between;align-items:center;font-size:13px}\n.ckw-pop-foot a{color:var(--ckw-accent);text-decoration:none;font-weight:500}\n.ckw-pop .ckw-list{border:0;border-radius:0}\n.ckw-pop .ckw-row{padding:8px 0}\n.ckw-pop .ckw-form{border:0;padding:0;margin:12px 0 0}\n@media (max-width:520px){.ckw-pop{left:0!important;right:0!important;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;max-height:85vh}.ckw-fab{bottom:14px}.ckw-fab[data-pos=bottom-right]{right:14px}.ckw-fab[data-pos=bottom-left]{left:14px}}\n/* Survey */\n.ckw-survey{position:fixed;z-index:2147483000;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 24px);background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);padding:14px;animation:ckw-in .2s ease-out}\n@keyframes ckw-in{from{opacity:0;transform:translateY(8px)}}\n@media (max-width:520px){.ckw-survey{left:0;right:0;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0}}\n.ckw-sv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}\n.ckw-dots{display:flex;gap:4px}\n.ckw-dot{width:6px;height:6px;border-radius:50%;background:var(--ckw-bg3)}\n.ckw-dot[data-on=true]{background:var(--ckw-accent)}\n.ckw-q{font-weight:600;font-size:15px;margin:0 0 2px;border:0;padding:0}\n.ckw-root .ckw-q:focus-visible{outline:none}\n.ckw-qd{color:var(--ckw-fg2);font-size:13px;margin:0 0 10px}\n.ckw-scale{display:flex;gap:4px;flex-wrap:wrap}\n.ckw-num{flex:1 1 0;min-width:26px;height:34px;border:1px solid var(--ckw-line);background:var(--ckw-bg);border-radius:8px;font-size:13px;font-weight:600;padding:0}\n.ckw-num:hover{border-color:var(--ckw-accent)}\n.ckw-num[aria-pressed=true]{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-color:var(--ckw-accent)}\n.ckw-root .ckw-star{background:none;border:0;padding:2px;color:var(--ckw-bg3)}\n.ckw-root .ckw-star[data-on=true]{color:#f5a524}\n.ckw-star svg{width:28px;height:28px}\n.ckw-lh{display:flex;justify-content:space-between;color:var(--ckw-fg3);font-size:11px;margin-top:4px}\n.ckw-opts{display:flex;flex-direction:column;gap:6px}\n.ckw-opt{display:flex;gap:8px;align-items:center;border:1px solid var(--ckw-line);border-radius:8px;padding:7px 10px;background:var(--ckw-bg);cursor:pointer}\n.ckw-opt:has(input:checked){border-color:var(--ckw-accent);background:color-mix(in srgb,var(--ckw-accent) 8%,transparent)}\n.ckw-opt input{accent-color:var(--ckw-accent)}\n.ckw-sv-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}\n.ckw-thanks{text-align:center;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:8px}\n.ckw-tick{width:32px;height:32px;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);display:flex;align-items:center;justify-content:center}\n`;\n\n/** Puts the stylesheet into the page once, however many widgets mount. */\nexport const useStyles = () => {\n useEffect(() => {\n if (document.getElementById(STYLE_ID)) return;\n const el = document.createElement(\"style\");\n el.id = STYLE_ID;\n el.textContent = CSS;\n document.head.appendChild(el);\n }, []);\n};\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAE1B,IAAM,WAAW;AAGV,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyOZ,IAAM,YAAY,MAAM;AAC3B,YAAU,MAAM;AACZ,QAAI,SAAS,eAAe,QAAQ,EAAG;AACvC,UAAM,KAAK,SAAS,cAAc,OAAO;AACzC,OAAG,KAAK;AACR,OAAG,cAAc;AACjB,aAAS,KAAK,YAAY,EAAE;AAAA,EAChC,GAAG,CAAC,CAAC;AACT;","names":[]}
package/dist/ui.d.ts CHANGED
@@ -13,6 +13,9 @@ export declare const Plus: () => import("react").JSX.Element;
13
13
  export declare const Cross: () => import("react").JSX.Element;
14
14
  export declare const Check: () => import("react").JSX.Element;
15
15
  export declare const Chat: () => import("react").JSX.Element;
16
+ export declare const Search: () => import("react").JSX.Element;
17
+ export declare const Sun: () => import("react").JSX.Element;
18
+ export declare const Moon: () => import("react").JSX.Element;
16
19
  export declare const Star: () => import("react").JSX.Element;
17
20
  export declare const StatusPill: ({ status }: {
18
21
  status: PostStatus;
package/dist/ui.js CHANGED
@@ -15,6 +15,15 @@ var Plus = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path"
15
15
  var Cross = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" }) });
16
16
  var Check = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "m3 8.5 3.2 3.2L13 4.8" }) });
17
17
  var Chat = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z" }) });
18
+ var Search = () => /* @__PURE__ */ jsxs(Svg, { children: [
19
+ /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.5" }),
20
+ /* @__PURE__ */ jsx("path", { d: "m10.5 10.5 3 3" })
21
+ ] });
22
+ var Sun = () => /* @__PURE__ */ jsxs(Svg, { children: [
23
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3" }),
24
+ /* @__PURE__ */ jsx("path", { d: "M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1" })
25
+ ] });
26
+ var Moon = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7z" }) });
18
27
  var Star = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m12 2.8 2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.2l-5.7 3.1 1.1-6.3L2.8 9.5l6.4-.9z" }) });
19
28
  var StatusPill = ({ status }) => /* @__PURE__ */ jsx("span", { className: "ckw-pill", "data-s": status, children: STATUS_LABEL[status] ?? status });
20
29
  var VoteButton = ({ post, onVote, small }) => /* @__PURE__ */ jsxs(
@@ -65,10 +74,13 @@ export {
65
74
  Check,
66
75
  ChevronUp,
67
76
  Cross,
77
+ Moon,
68
78
  Plus,
69
79
  Root,
80
+ Search,
70
81
  Star,
71
82
  StatusPill,
83
+ Sun,
72
84
  VoteButton,
73
85
  similarPosts,
74
86
  timeAgo,
package/dist/ui.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ui.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useEffect, useRef } from \"react\";\nimport { type FeedbackPost, type PostStatus, STATUS_LABEL } from \"./api\";\nimport { useStyles } from \"./styles\";\n\nexport type Theme = \"light\" | \"dark\" | \"auto\";\n\n/** The scoped wrapper every widget renders inside. Carries the accent and the theme. */\nexport const Root = ({ theme = \"auto\", accent = \"#3f76ff\", className, children }: { theme?: Theme; accent?: string; className?: string; children: ReactNode }) => {\n useStyles();\n return (\n <div className={`ckw-root${className ? ` ${className}` : \"\"}`} data-theme={theme} style={{ [\"--ckw-accent\" as string]: accent }}>\n {children}\n </div>\n );\n};\n\nconst Svg = ({ children, size = 16 }: { children: ReactNode; size?: number }) => (\n <svg className=\"ckw-icon\" width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {children}\n </svg>\n);\n\nexport const ChevronUp = () => (\n <Svg>\n <path d=\"M3.5 10 8 5.5 12.5 10\" />\n </Svg>\n);\nexport const Plus = () => (\n <Svg>\n <path d=\"M8 3v10M3 8h10\" />\n </Svg>\n);\nexport const Cross = () => (\n <Svg>\n <path d=\"m4 4 8 8M12 4l-8 8\" />\n </Svg>\n);\nexport const Check = () => (\n <Svg>\n <path d=\"m3 8.5 3.2 3.2L13 4.8\" />\n </Svg>\n);\nexport const Chat = () => (\n <Svg>\n <path d=\"M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z\" />\n </Svg>\n);\nexport const Star = () => (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"m12 2.8 2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.2l-5.7 3.1 1.1-6.3L2.8 9.5l6.4-.9z\" />\n </svg>\n);\n\nexport const StatusPill = ({ status }: { status: PostStatus }) => (\n <span className=\"ckw-pill\" data-s={status}>\n {STATUS_LABEL[status] ?? status}\n </span>\n);\n\nexport const VoteButton = ({ post, onVote, small }: { post: FeedbackPost; onVote: (p: FeedbackPost) => void; small?: boolean }) => (\n <button\n type=\"button\"\n className={`ckw-vote${small ? \" ckw-vote-sm\" : \"\"}`}\n aria-pressed={post.voted}\n aria-label={`${post.voted ? \"Remove your vote from\" : \"Upvote\"} ${post.title}. ${post.votes} votes`}\n onClick={() => onVote(post)}\n >\n <ChevronUp />\n <span>{post.votes}</span>\n </button>\n);\n\nexport const timeAgo = (iso: string) => {\n const t = new Date(iso).getTime();\n if (Number.isNaN(t)) return \"\";\n const d = Math.max(0, Date.now() - t) / 1000;\n if (d < 60) return \"just now\";\n if (d < 3600) return `${Math.floor(d / 60)}m ago`;\n if (d < 86400) return `${Math.floor(d / 3600)}h ago`;\n if (d < 86400 * 30) return `${Math.floor(d / 86400)}d ago`;\n return new Date(iso).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\", year: \"numeric\" });\n};\n\n/** Calls `onClose` on Esc while mounted. */\nexport const useEscape = (onClose: () => void) => {\n const ref = useRef(onClose);\n ref.current = onClose;\n useEffect(() => {\n const h = (e: KeyboardEvent) => e.key === \"Escape\" && ref.current();\n document.addEventListener(\"keydown\", h);\n return () => document.removeEventListener(\"keydown\", h);\n }, []);\n};\n\n/** Words of a title, lowercased, without filler. */\nconst words = (s: string) =>\n s\n .toLowerCase()\n .split(/[^a-z0-9]+/)\n .filter((w) => w.length > 2 && ![\"the\", \"and\", \"for\", \"with\", \"add\", \"can\", \"please\", \"want\", \"would\", \"our\", \"you\", \"have\"].includes(w));\n\n/** Up to three existing posts that share words with what the visitor is typing. */\nexport const similarPosts = (title: string, posts: FeedbackPost[]) => {\n const mine = words(title);\n if (mine.length === 0 || title.trim().length < 4) return [];\n return posts\n .map((p) => {\n const theirs = new Set(words(`${p.title} ${p.body}`.slice(0, 300)));\n const hit = mine.filter((w) => theirs.has(w) || [...theirs].some((t) => t.startsWith(w) || w.startsWith(t))).length;\n return { p, score: hit / mine.length };\n })\n .filter((x) => x.score >= 0.5)\n .sort((a, b) => b.score - a.score || b.p.votes - a.p.votes)\n .slice(0, 3)\n .map((x) => x.p);\n};\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/ui.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useEffect, useRef } from \"react\";\nimport { type FeedbackPost, type PostStatus, STATUS_LABEL } from \"./api\";\nimport { useStyles } from \"./styles\";\n\nexport type Theme = \"light\" | \"dark\" | \"auto\";\n\n/** The scoped wrapper every widget renders inside. Carries the accent and the theme. */\nexport const Root = ({ theme = \"auto\", accent = \"#3f76ff\", className, children }: { theme?: Theme; accent?: string; className?: string; children: ReactNode }) => {\n useStyles();\n return (\n <div className={`ckw-root${className ? ` ${className}` : \"\"}`} data-theme={theme} style={{ [\"--ckw-accent\" as string]: accent }}>\n {children}\n </div>\n );\n};\n\nconst Svg = ({ children, size = 16 }: { children: ReactNode; size?: number }) => (\n <svg className=\"ckw-icon\" width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {children}\n </svg>\n);\n\nexport const ChevronUp = () => (\n <Svg>\n <path d=\"M3.5 10 8 5.5 12.5 10\" />\n </Svg>\n);\nexport const Plus = () => (\n <Svg>\n <path d=\"M8 3v10M3 8h10\" />\n </Svg>\n);\nexport const Cross = () => (\n <Svg>\n <path d=\"m4 4 8 8M12 4l-8 8\" />\n </Svg>\n);\nexport const Check = () => (\n <Svg>\n <path d=\"m3 8.5 3.2 3.2L13 4.8\" />\n </Svg>\n);\nexport const Chat = () => (\n <Svg>\n <path d=\"M2.5 4.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7l-3 2.5V11a2 2 0 0 1-1.5-2z\" />\n </Svg>\n);\nexport const Search = () => (\n <Svg>\n <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n <path d=\"m10.5 10.5 3 3\" />\n </Svg>\n);\nexport const Sun = () => (\n <Svg>\n <circle cx=\"8\" cy=\"8\" r=\"3\" />\n <path d=\"M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1\" />\n </Svg>\n);\nexport const Moon = () => (\n <Svg>\n <path d=\"M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7z\" />\n </Svg>\n);\nexport const Star = () => (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"m12 2.8 2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.2l-5.7 3.1 1.1-6.3L2.8 9.5l6.4-.9z\" />\n </svg>\n);\n\nexport const StatusPill = ({ status }: { status: PostStatus }) => (\n <span className=\"ckw-pill\" data-s={status}>\n {STATUS_LABEL[status] ?? status}\n </span>\n);\n\nexport const VoteButton = ({ post, onVote, small }: { post: FeedbackPost; onVote: (p: FeedbackPost) => void; small?: boolean }) => (\n <button\n type=\"button\"\n className={`ckw-vote${small ? \" ckw-vote-sm\" : \"\"}`}\n aria-pressed={post.voted}\n aria-label={`${post.voted ? \"Remove your vote from\" : \"Upvote\"} ${post.title}. ${post.votes} votes`}\n onClick={() => onVote(post)}\n >\n <ChevronUp />\n <span>{post.votes}</span>\n </button>\n);\n\nexport const timeAgo = (iso: string) => {\n const t = new Date(iso).getTime();\n if (Number.isNaN(t)) return \"\";\n const d = Math.max(0, Date.now() - t) / 1000;\n if (d < 60) return \"just now\";\n if (d < 3600) return `${Math.floor(d / 60)}m ago`;\n if (d < 86400) return `${Math.floor(d / 3600)}h ago`;\n if (d < 86400 * 30) return `${Math.floor(d / 86400)}d ago`;\n return new Date(iso).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\", year: \"numeric\" });\n};\n\n/** Calls `onClose` on Esc while mounted. */\nexport const useEscape = (onClose: () => void) => {\n const ref = useRef(onClose);\n ref.current = onClose;\n useEffect(() => {\n const h = (e: KeyboardEvent) => e.key === \"Escape\" && ref.current();\n document.addEventListener(\"keydown\", h);\n return () => document.removeEventListener(\"keydown\", h);\n }, []);\n};\n\n/** Words of a title, lowercased, without filler. */\nconst words = (s: string) =>\n s\n .toLowerCase()\n .split(/[^a-z0-9]+/)\n .filter((w) => w.length > 2 && ![\"the\", \"and\", \"for\", \"with\", \"add\", \"can\", \"please\", \"want\", \"would\", \"our\", \"you\", \"have\"].includes(w));\n\n/** Up to three existing posts that share words with what the visitor is typing. */\nexport const similarPosts = (title: string, posts: FeedbackPost[]) => {\n const mine = words(title);\n if (mine.length === 0 || title.trim().length < 4) return [];\n return posts\n .map((p) => {\n const theirs = new Set(words(`${p.title} ${p.body}`.slice(0, 300)));\n const hit = mine.filter((w) => theirs.has(w) || [...theirs].some((t) => t.startsWith(w) || w.startsWith(t))).length;\n return { p, score: hit / mine.length };\n })\n .filter((x) => x.score >= 0.5)\n .sort((a, b) => b.score - a.score || b.p.votes - a.p.votes)\n .slice(0, 3)\n .map((x) => x.p);\n};\n"],"mappings":"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","names":[]}
package/dist/web-state.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * The browser state both web runtimes share, the Next.js provider (client.tsx) and the script tag (script/index.ts):
3
+ * the visitor and session cookies, the in-memory id of this page load, the current page's URL, referrer and campaign,
4
+ * and the browser's privacy signal. Plain functions, no React; only called in the browser (effects, event handlers).
5
+ */
6
+ import { type ConsentMode, type UtmKey } from "./core.js";
7
+ export declare const YEAR_S: number;
8
+ export declare const readCookie: (name: string) => string | undefined;
9
+ export declare const writeCookie: (name: string, value: string, maxAge: number) => void;
10
+ export declare const deleteCookie: (name: string) => void;
11
+ /**
12
+ * What lives for one page load, outside React so it survives a provider that remounts on navigation: the in-memory
13
+ * visitor id, the session, the current page's URL and referrer, and the campaign (UTM) parameters.
14
+ */
15
+ export declare const page: {
16
+ id?: string;
17
+ session?: {
18
+ id: string;
19
+ last: number;
20
+ };
21
+ url?: string;
22
+ referrer?: string;
23
+ utm: Partial<Record<UtmKey, string>>;
24
+ };
25
+ export declare const memoryId: () => string;
26
+ /**
27
+ * The visitor id for experiments, surveys and feedback. Only "cookies" reads or writes `ck_id`; the other modes keep a
28
+ * random id in memory for this page load. The page id follows the cookie, so leaving "cookies" keeps the same variants.
29
+ */
30
+ export declare const visitorId: (mode: ConsentMode, write: boolean) => string;
31
+ /** The session id for an event. Every event renews it; after 30 minutes without one a new session starts. */
32
+ export declare const touchSession: (persist: boolean) => string;
33
+ /** On every route change: the previous in-app URL becomes the referrer, and a URL with UTM parameters replaces the old ones. */
34
+ export declare const enterPage: () => void;
35
+ /** Do Not Track or Global Privacy Control. */
36
+ export declare const privacySignal: () => boolean;
package/dist/web-state.js ADDED
@@ -0,0 +1,64 @@
1
+ // src/web-state.ts
2
+ import { ID_COOKIE, SESSION_COOKIE, SESSION_TIMEOUT_MS, newDistinctId, readUtm } from "./core.js";
3
+ var YEAR_S = 60 * 60 * 24 * 365;
4
+ var readCookie = (name) => {
5
+ if (typeof document === "undefined") return void 0;
6
+ const raw = document.cookie.split("; ").find((c) => c.startsWith(`${name}=`))?.slice(name.length + 1);
7
+ if (!raw) return void 0;
8
+ try {
9
+ return decodeURIComponent(raw);
10
+ } catch {
11
+ return raw;
12
+ }
13
+ };
14
+ var writeCookie = (name, value, maxAge) => {
15
+ const secure = window.location.protocol === "https:" ? "; secure" : "";
16
+ document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}; samesite=lax${secure}`;
17
+ };
18
+ var deleteCookie = (name) => {
19
+ document.cookie = `${name}=; path=/; max-age=0; samesite=lax`;
20
+ };
21
+ var page = { utm: {} };
22
+ var memoryId = () => page.id ??= newDistinctId();
23
+ var visitorId = (mode, write) => {
24
+ if (mode !== "cookies") return memoryId();
25
+ const stored = readCookie(ID_COOKIE);
26
+ if (stored) return page.id = stored;
27
+ const id = memoryId();
28
+ if (write) writeCookie(ID_COOKIE, id, YEAR_S);
29
+ return id;
30
+ };
31
+ var touchSession = (persist) => {
32
+ const now = Date.now();
33
+ const s = page.session;
34
+ const id = (persist ? readCookie(SESSION_COOKIE) : void 0) ?? (s && now - s.last < SESSION_TIMEOUT_MS ? s.id : newDistinctId());
35
+ page.session = { id, last: now };
36
+ if (persist) writeCookie(SESSION_COOKIE, id, SESSION_TIMEOUT_MS / 1e3);
37
+ return id;
38
+ };
39
+ var enterPage = () => {
40
+ const href = window.location.href;
41
+ if (page.url === href) return;
42
+ page.referrer = page.url ?? (document.referrer || void 0);
43
+ page.url = href;
44
+ const utm = readUtm(window.location.search);
45
+ if (Object.keys(utm).length) page.utm = utm;
46
+ };
47
+ var privacySignal = () => {
48
+ const nav = navigator;
49
+ const win = window;
50
+ return nav.doNotTrack === "1" || win.doNotTrack === "1" || nav.globalPrivacyControl === true;
51
+ };
52
+ export {
53
+ YEAR_S,
54
+ deleteCookie,
55
+ enterPage,
56
+ memoryId,
57
+ page,
58
+ privacySignal,
59
+ readCookie,
60
+ touchSession,
61
+ visitorId,
62
+ writeCookie
63
+ };
64
+ //# sourceMappingURL=web-state.js.map
package/dist/web-state.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/web-state.ts"],"sourcesContent":["/**\n * The browser state both web runtimes share, the Next.js provider (client.tsx) and the script tag (script/index.ts):\n * the visitor and session cookies, the in-memory id of this page load, the current page's URL, referrer and campaign,\n * and the browser's privacy signal. Plain functions, no React; only called in the browser (effects, event handlers).\n */\nimport { type ConsentMode, ID_COOKIE, SESSION_COOKIE, SESSION_TIMEOUT_MS, type UtmKey, newDistinctId, readUtm } from \"./core\";\n\nexport const YEAR_S = 60 * 60 * 24 * 365;\n\nexport const readCookie = (name: string) => {\n if (typeof document === \"undefined\") return undefined;\n const raw = document.cookie\n .split(\"; \")\n .find((c) => c.startsWith(`${name}=`))\n ?.slice(name.length + 1);\n if (!raw) return undefined;\n try {\n return decodeURIComponent(raw);\n } catch {\n return raw;\n }\n};\n\nexport const writeCookie = (name: string, value: string, maxAge: number) => {\n const secure = window.location.protocol === \"https:\" ? \"; secure\" : \"\";\n document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}; samesite=lax${secure}`;\n};\n\nexport const deleteCookie = (name: string) => {\n document.cookie = `${name}=; path=/; max-age=0; samesite=lax`;\n};\n\n/**\n * What lives for one page load, outside React so it survives a provider that remounts on navigation: the in-memory\n * visitor id, the session, the current page's URL and referrer, and the campaign (UTM) parameters.\n */\nexport const page: {\n id?: string;\n session?: { id: string; last: number };\n url?: string;\n referrer?: string;\n utm: Partial<Record<UtmKey, string>>;\n} = { utm: {} };\n\nexport const memoryId = () => (page.id ??= newDistinctId());\n\n/**\n * The visitor id for experiments, surveys and feedback. Only \"cookies\" reads or writes `ck_id`; the other modes keep a\n * random id in memory for this page load. The page id follows the cookie, so leaving \"cookies\" keeps the same variants.\n */\nexport const visitorId = (mode: ConsentMode, write: boolean) => {\n if (mode !== \"cookies\") return memoryId();\n const stored = readCookie(ID_COOKIE);\n if (stored) return (page.id = stored);\n const id = memoryId();\n if (write) writeCookie(ID_COOKIE, id, YEAR_S);\n return id;\n};\n\n/** The session id for an event. Every event renews it; after 30 minutes without one a new session starts. */\nexport const touchSession = (persist: boolean) => {\n const now = Date.now();\n const s = page.session;\n // In \"cookies\" mode the cookie wins, so tabs share a session.\n const id = (persist ? readCookie(SESSION_COOKIE) : undefined) ?? (s && now - s.last < SESSION_TIMEOUT_MS ? s.id : newDistinctId());\n page.session = { id, last: now };\n if (persist) writeCookie(SESSION_COOKIE, id, SESSION_TIMEOUT_MS / 1000);\n return id;\n};\n\n/** On every route change: the previous in-app URL becomes the referrer, and a URL with UTM parameters replaces the old ones. */\nexport const enterPage = () => {\n const href = window.location.href;\n if (page.url === href) return;\n page.referrer = page.url ?? (document.referrer || undefined);\n page.url = href;\n const utm = readUtm(window.location.search);\n if (Object.keys(utm).length) page.utm = utm;\n};\n\n/** Do Not Track or Global Privacy Control. */\nexport const privacySignal = () => {\n const nav = navigator as Navigator & { doNotTrack?: string | null; globalPrivacyControl?: boolean };\n const win = window as unknown as { doNotTrack?: string | null };\n return nav.doNotTrack === \"1\" || win.doNotTrack === \"1\" || nav.globalPrivacyControl === true;\n};\n"],"mappings":";AAKA,SAA2B,WAAW,gBAAgB,oBAAiC,eAAe,eAAe;AAE9G,IAAM,SAAS,KAAK,KAAK,KAAK;AAE9B,IAAM,aAAa,CAAC,SAAiB;AACxC,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,MAAM,SAAS,OAChB,MAAM,IAAI,EACV,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,CAAC,GACnC,MAAM,KAAK,SAAS,CAAC;AAC3B,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI;AACA,WAAO,mBAAmB,GAAG;AAAA,EACjC,QAAQ;AACJ,WAAO;AAAA,EACX;AACJ;AAEO,IAAM,cAAc,CAAC,MAAc,OAAe,WAAmB;AACxE,QAAM,SAAS,OAAO,SAAS,aAAa,WAAW,aAAa;AACpE,WAAS,SAAS,GAAG,IAAI,IAAI,mBAAmB,KAAK,CAAC,qBAAqB,MAAM,iBAAiB,MAAM;AAC5G;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC1C,WAAS,SAAS,GAAG,IAAI;AAC7B;AAMO,IAAM,OAMT,EAAE,KAAK,CAAC,EAAE;AAEP,IAAM,WAAW,MAAO,KAAK,OAAO,cAAc;AAMlD,IAAM,YAAY,CAAC,MAAmB,UAAmB;AAC5D,MAAI,SAAS,UAAW,QAAO,SAAS;AACxC,QAAM,SAAS,WAAW,SAAS;AACnC,MAAI,OAAQ,QAAQ,KAAK,KAAK;AAC9B,QAAM,KAAK,SAAS;AACpB,MAAI,MAAO,aAAY,WAAW,IAAI,MAAM;AAC5C,SAAO;AACX;AAGO,IAAM,eAAe,CAAC,YAAqB;AAC9C,QAAM,MAAM,KAAK,IAAI;AACrB,QAAM,IAAI,KAAK;AAEf,QAAM,MAAM,UAAU,WAAW,cAAc,IAAI,YAAe,KAAK,MAAM,EAAE,OAAO,qBAAqB,EAAE,KAAK,cAAc;AAChI,OAAK,UAAU,EAAE,IAAI,MAAM,IAAI;AAC/B,MAAI,QAAS,aAAY,gBAAgB,IAAI,qBAAqB,GAAI;AACtE,SAAO;AACX;AAGO,IAAM,YAAY,MAAM;AAC3B,QAAM,OAAO,OAAO,SAAS;AAC7B,MAAI,KAAK,QAAQ,KAAM;AACvB,OAAK,WAAW,KAAK,QAAQ,SAAS,YAAY;AAClD,OAAK,MAAM;AACX,QAAM,MAAM,QAAQ,OAAO,SAAS,MAAM;AAC1C,MAAI,OAAO,KAAK,GAAG,EAAE,OAAQ,MAAK,MAAM;AAC5C;AAGO,IAAM,gBAAgB,MAAM;AAC/B,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,SAAO,IAAI,eAAe,OAAO,IAAI,eAAe,OAAO,IAAI,yBAAyB;AAC5F;","names":[]}