@wildwinter/app-shell 0.39.0 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist/about.css +5 -5
  2. package/dist/about.css.map +1 -1
  3. package/dist/anchored.css +5 -5
  4. package/dist/anchored.css.map +1 -1
  5. package/dist/chunk-DS4XXAZS.js +56 -0
  6. package/dist/chunk-DS4XXAZS.js.map +1 -0
  7. package/dist/{chunk-K2AOLQW4.js → chunk-EHR2KBZC.js} +3 -3
  8. package/dist/{chunk-K2AOLQW4.js.map → chunk-EHR2KBZC.js.map} +1 -1
  9. package/dist/{chunk-S4KWQLYN.js → chunk-OPZPFOPS.js} +4 -4
  10. package/dist/{chunk-S4KWQLYN.js.map → chunk-OPZPFOPS.js.map} +1 -1
  11. package/dist/{chunk-L5HOBEKL.js → chunk-R3NXPHRZ.js} +3 -3
  12. package/dist/{chunk-L5HOBEKL.js.map → chunk-R3NXPHRZ.js.map} +1 -1
  13. package/dist/{chunk-KGAMP5LW.js → chunk-SDOKZTAR.js} +3 -3
  14. package/dist/{chunk-KGAMP5LW.js.map → chunk-SDOKZTAR.js.map} +1 -1
  15. package/dist/{chunk-C6UVQYKI.js → chunk-SEWJLUOD.js} +3 -3
  16. package/dist/{chunk-C6UVQYKI.js.map → chunk-SEWJLUOD.js.map} +1 -1
  17. package/dist/{chunk-XZYZXY7I.js → chunk-UG2P777F.js} +36 -3
  18. package/dist/chunk-UG2P777F.js.map +1 -0
  19. package/dist/{chunk-2NMVIM54.js → chunk-YRFJLJUH.js} +3 -3
  20. package/dist/{chunk-2NMVIM54.js.map → chunk-YRFJLJUH.js.map} +1 -1
  21. package/dist/chunk-YWMSQFXX.js +146 -0
  22. package/dist/chunk-YWMSQFXX.js.map +1 -0
  23. package/dist/comments.css +11 -11
  24. package/dist/comments.css.map +1 -1
  25. package/dist/confirm.css +2 -2
  26. package/dist/confirm.css.map +1 -1
  27. package/dist/context-menu.cjs.map +1 -1
  28. package/dist/context-menu.css +1 -1
  29. package/dist/context-menu.css.map +1 -1
  30. package/dist/context-menu.js +2 -2
  31. package/dist/controls.css +70 -11
  32. package/dist/controls.css.map +1 -1
  33. package/dist/dialog.cjs.map +1 -1
  34. package/dist/dialog.css +3 -2
  35. package/dist/dialog.css.map +1 -1
  36. package/dist/dialog.js +2 -2
  37. package/dist/identity.css +2 -2
  38. package/dist/identity.css.map +1 -1
  39. package/dist/index.cjs +257 -13
  40. package/dist/index.cjs.map +1 -1
  41. package/dist/index.d.cts +39 -6
  42. package/dist/index.d.ts +39 -6
  43. package/dist/index.js +17 -13
  44. package/dist/index.js.map +1 -1
  45. package/dist/job.css +1 -1
  46. package/dist/job.css.map +1 -1
  47. package/dist/keys.cjs +155 -0
  48. package/dist/keys.cjs.map +1 -0
  49. package/dist/keys.css +41 -0
  50. package/dist/keys.css.map +1 -0
  51. package/dist/keys.d.cts +57 -0
  52. package/dist/keys.d.ts +57 -0
  53. package/dist/keys.js +3 -0
  54. package/dist/keys.js.map +1 -0
  55. package/dist/link-status.cjs.map +1 -1
  56. package/dist/link-status.css +8 -8
  57. package/dist/link-status.css.map +1 -1
  58. package/dist/link-status.js +2 -2
  59. package/dist/notes-editor.css +7 -7
  60. package/dist/notes-editor.css.map +1 -1
  61. package/dist/pane-shell.css +7 -2
  62. package/dist/pane-shell.css.map +1 -1
  63. package/dist/problems.cjs +61 -0
  64. package/dist/problems.cjs.map +1 -0
  65. package/dist/problems.d.cts +57 -0
  66. package/dist/problems.d.ts +57 -0
  67. package/dist/problems.js +3 -0
  68. package/dist/problems.js.map +1 -0
  69. package/dist/property-list.cjs.map +1 -1
  70. package/dist/property-list.js +2 -2
  71. package/dist/save.css +1 -1
  72. package/dist/save.css.map +1 -1
  73. package/dist/settings.css +13 -13
  74. package/dist/settings.css.map +1 -1
  75. package/dist/stale.css +1 -1
  76. package/dist/stale.css.map +1 -1
  77. package/dist/stepper.css +13 -4
  78. package/dist/stepper.css.map +1 -1
  79. package/dist/toast.css +5 -5
  80. package/dist/toast.css.map +1 -1
  81. package/dist/tokens.css +2 -1
  82. package/dist/tokens.css.map +1 -1
  83. package/dist/tool-window.css +3 -2
  84. package/dist/tool-window.css.map +1 -1
  85. package/dist/tooltip.css +3 -3
  86. package/dist/tooltip.css.map +1 -1
  87. package/dist/updater-view.cjs.map +1 -1
  88. package/dist/updater-view.js +3 -3
  89. package/dist/updater.css +5 -5
  90. package/dist/updater.css.map +1 -1
  91. package/dist/vc.css +1 -1
  92. package/dist/vc.css.map +1 -1
  93. package/dist/welcome.cjs.map +1 -1
  94. package/dist/welcome.css +21 -21
  95. package/dist/welcome.css.map +1 -1
  96. package/dist/welcome.js +2 -2
  97. package/package.json +15 -1
  98. package/dist/chunk-XZYZXY7I.js.map +0 -1
@@ -1,4 +1,4 @@
1
- export { PROPERTY_TYPES, defaultControl, mountPropertyList } from './chunk-L5HOBEKL.js';
2
- import './chunk-XZYZXY7I.js';
1
+ export { PROPERTY_TYPES, defaultControl, mountPropertyList } from './chunk-R3NXPHRZ.js';
2
+ import './chunk-UG2P777F.js';
3
3
  //# sourceMappingURL=property-list.js.map
4
4
  //# sourceMappingURL=property-list.js.map
package/dist/save.css CHANGED
@@ -3,7 +3,7 @@
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
  gap: 5px;
6
- font: 0.72rem var(--font-ui);
6
+ font: 11.5px var(--font-ui);
7
7
  color: var(--muted);
8
8
  -webkit-app-region: no-drag;
9
9
  }
package/dist/save.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/save.css"],"sourcesContent":["/* The save indicator (save-view.ts): a dot and a word in the topbar.\n\n The dot is `currentColor`, so the three states are one colour decision each\n and the shape never changes - the eye reads the tone before it reads the\n word. `--ok` for saved is why the semantic set needed completing (tokens.css):\n this state is the one place in the family where \"all is well\" has to be said\n in colour rather than by the absence of anything. */\n.savestat {\n display: inline-flex; align-items: center; gap: 5px;\n font: 0.72rem var(--font-ui); color: var(--muted);\n -webkit-app-region: no-drag; /* a draggable titlebar must not swallow it */\n}\n.savestat::before { content: \"\"; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }\n.savestat.saved { color: var(--ok); }\n/* Unsaved and saving are the same tone on purpose: both mean \"not on disk yet\".\n What separates them is the pulse, which says a write is actually running. */\n.savestat.unsaved, .savestat.saving { color: var(--warn); }\n.savestat.saving::before { animation: savepulse 1s ease-in-out infinite; }\n\n@keyframes savepulse { 50% { opacity: 0.35; } }\n@media (prefers-reduced-motion: reduce) { .savestat.saving::before { animation: none; } }\n"],"mappings":";AAOA,CAAC;AACC,WAAS;AAAa,eAAa;AAAQ,OAAK;AAChD,QAAM,QAAQ,IAAI;AAAY,SAAO,IAAI;AACzC,sBAAoB;AACtB;AACA,CALC,QAKQ;AAAW,WAAS;AAAI,SAAO;AAAK,UAAQ;AAAK,iBAAe,IAAI;AAAgB,cAAY;AAAc;AACvH,CANC,QAMQ,CAAC;AAAQ,SAAO,IAAI;AAAO;AAGpC,CATC,QASQ,CAAC;AAAS,CATlB,QAS2B,CAAC;AAAS,SAAO,IAAI;AAAS;AAC1D,CAVC,QAUQ,CADoB,MACb;AAAW,aAAW,UAAU,GAAG,YAAY;AAAU;AAEzE,WAFsC;AAEf;AAAM,aAAS;AAAM;AAAE;AAC9C,QAAO,wBAAyB;AAAU,GAbzC,QAakD,CAJtB,MAI6B;AAAW,eAAW;AAAM;AAAE;","names":[]}
1
+ {"version":3,"sources":["../src/save.css"],"sourcesContent":["/* The save indicator (save-view.ts): a dot and a word in the topbar.\n\n The dot is `currentColor`, so the three states are one colour decision each\n and the shape never changes - the eye reads the tone before it reads the\n word. `--ok` for saved is why the semantic set needed completing (tokens.css):\n this state is the one place in the family where \"all is well\" has to be said\n in colour rather than by the absence of anything. */\n.savestat {\n display: inline-flex; align-items: center; gap: 5px;\n font: 11.5px var(--font-ui); color: var(--muted);\n -webkit-app-region: no-drag; /* a draggable titlebar must not swallow it */\n}\n.savestat::before { content: \"\"; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }\n.savestat.saved { color: var(--ok); }\n/* Unsaved and saving are the same tone on purpose: both mean \"not on disk yet\".\n What separates them is the pulse, which says a write is actually running. */\n.savestat.unsaved, .savestat.saving { color: var(--warn); }\n.savestat.saving::before { animation: savepulse 1s ease-in-out infinite; }\n\n@keyframes savepulse { 50% { opacity: 0.35; } }\n@media (prefers-reduced-motion: reduce) { .savestat.saving::before { animation: none; } }\n"],"mappings":";AAOA,CAAC;AACC,WAAS;AAAa,eAAa;AAAQ,OAAK;AAChD,QAAM,OAAO,IAAI;AAAY,SAAO,IAAI;AACxC,sBAAoB;AACtB;AACA,CALC,QAKQ;AAAW,WAAS;AAAI,SAAO;AAAK,UAAQ;AAAK,iBAAe,IAAI;AAAgB,cAAY;AAAc;AACvH,CANC,QAMQ,CAAC;AAAQ,SAAO,IAAI;AAAO;AAGpC,CATC,QASQ,CAAC;AAAS,CATlB,QAS2B,CAAC;AAAS,SAAO,IAAI;AAAS;AAC1D,CAVC,QAUQ,CADoB,MACb;AAAW,aAAW,UAAU,GAAG,YAAY;AAAU;AAEzE,WAFsC;AAEf;AAAM,aAAS;AAAM;AAAE;AAC9C,QAAO,wBAAyB;AAAU,GAbzC,QAakD,CAJtB,MAI6B;AAAW,eAAW;AAAM;AAAE;","names":[]}
package/dist/settings.css CHANGED
@@ -27,7 +27,7 @@
27
27
  margin: 0;
28
28
  padding: 16px 20px;
29
29
  font-family: var(--font-read, inherit);
30
- font-size: 1.15rem;
30
+ font-size: 18.5px;
31
31
  font-weight: 600;
32
32
  border-bottom: 1px solid var(--line-soft, var(--line));
33
33
  }
@@ -38,7 +38,7 @@
38
38
  }
39
39
  .settings-tabs {
40
40
  flex: none;
41
- width: 12rem;
41
+ width: 192px;
42
42
  overflow-y: auto;
43
43
  padding: 10px 8px;
44
44
  border-right: 1px solid var(--line-soft, var(--line));
@@ -48,7 +48,7 @@
48
48
  }
49
49
  .settings-group {
50
50
  padding: 12px 8px 4px;
51
- font: 600 0.78rem/1.2 var(--font-ui);
51
+ font: 600 12.5px/1.2 var(--font-ui);
52
52
  color: var(--muted);
53
53
  }
54
54
  .settings-tab {
@@ -60,7 +60,7 @@
60
60
  background: none;
61
61
  color: var(--ink);
62
62
  font: inherit;
63
- font-size: 0.88rem;
63
+ font-size: 14px;
64
64
  cursor: pointer;
65
65
  }
66
66
  .settings-tab:hover {
@@ -104,7 +104,7 @@
104
104
  flex: 1;
105
105
  margin: 0;
106
106
  color: var(--danger);
107
- font-size: 0.82rem;
107
+ font-size: 13px;
108
108
  }
109
109
  .settings-actions button {
110
110
  font: inherit;
@@ -201,7 +201,7 @@
201
201
  .set-details input,
202
202
  .set-details select {
203
203
  font: inherit;
204
- font-size: 0.85rem;
204
+ font-size: 13.5px;
205
205
  background: var(--bg);
206
206
  color: var(--ink);
207
207
  border: 1px solid var(--line);
@@ -210,7 +210,7 @@
210
210
  }
211
211
  .set-rowline input.set-name {
212
212
  flex: 1;
213
- min-width: 6rem;
213
+ min-width: 96px;
214
214
  }
215
215
  .set-rowline input.invalid,
216
216
  .set-details input.invalid {
@@ -260,11 +260,11 @@
260
260
  display: flex;
261
261
  align-items: center;
262
262
  gap: 8px;
263
- font-size: 0.85rem;
263
+ font-size: 13.5px;
264
264
  }
265
265
  .shell-fieldcap {
266
266
  color: var(--muted);
267
- min-width: 5rem;
267
+ min-width: 80px;
268
268
  }
269
269
  .shell-tags {
270
270
  display: flex;
@@ -276,7 +276,7 @@
276
276
  display: inline-flex;
277
277
  align-items: center;
278
278
  gap: 4px;
279
- font-size: 0.76rem;
279
+ font-size: 12px;
280
280
  padding: 2px 4px 2px 9px;
281
281
  border: 1px solid var(--line);
282
282
  border-radius: var(--radius-pill);
@@ -303,7 +303,7 @@
303
303
  color: var(--accent);
304
304
  }
305
305
  .shell-tag-input {
306
- min-width: 8rem;
306
+ min-width: 128px;
307
307
  }
308
308
  .set-list {
309
309
  display: flex;
@@ -315,12 +315,12 @@
315
315
  }
316
316
  .set-rowline .set-default {
317
317
  flex: 1;
318
- min-width: 5rem;
318
+ min-width: 80px;
319
319
  }
320
320
  .set-flagnote {
321
321
  flex: 1;
322
322
  color: var(--muted);
323
- font-size: 0.82rem;
323
+ font-size: 13px;
324
324
  font-style: italic;
325
325
  }
326
326
  .set-details input.set-purpose {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/settings.css"],"sourcesContent":["/* ============================================================================\n The settings dialog + list-editor styling. Reads the shared token grammar\n (tokens.css) and the app's palette vars (--surface / --ink / --muted / --line\n / --accent / --danger / --bg, optional --line-soft / --accent-soft). Neutral\n class names; the app supplies section content.\n ============================================================================ */\n\n.settings-dialog {\n padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);\n background: var(--surface); color: var(--ink);\n width: min(760px, 92vw); max-height: 82vh;\n box-shadow: var(--shadow-3);\n font: 14px var(--font-ui, system-ui, sans-serif);\n}\n/* Its own frame (the tab rail makes the generic dialog frame a poor fit), on\n the same tokens as dialog.css: the one scrim, the one radius, the one panel\n motion. */\n.settings-dialog { animation: var(--anim-panel-in); }\n.settings-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); animation: var(--anim-backdrop-in); }\n.settings-form { display: flex; flex-direction: column; max-height: 82vh; }\n.settings-title { margin: 0; padding: 16px 20px; font-family: var(--font-read, inherit); font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--line-soft, var(--line)); }\n\n.settings-body { display: flex; min-height: 0; flex: 1; }\n.settings-tabs { flex: none; width: 12rem; overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--line-soft, var(--line)); display: flex; flex-direction: column; gap: 1px; }\n.settings-group { padding: 12px 8px 4px; font: 600 0.78rem/1.2 var(--font-ui); color: var(--muted); }\n.settings-tab { text-align: left; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 0.88rem; cursor: pointer; }\n.settings-tab:hover { background: var(--accent-soft, color-mix(in oklab, var(--accent) 12%, transparent)); }\n.settings-tab.active { background: var(--accent-soft, color-mix(in oklab, var(--accent) 16%, transparent)); color: var(--accent); font-weight: 500; }\n/* Dimmed and inert, with the reason on its rollover; it must not light up on\n hover like a live tab. */\n.settings-tab.is-disabled { color: var(--muted); opacity: 0.5; cursor: default; }\n.settings-tab.is-disabled:hover { background: none; }\n\n.settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px; }\n.settings-panel { display: flex; flex-direction: column; gap: 14px; }\n/* A `display` on the class beats the UA's `[hidden] { display: none }`, so the\n panels the tab switcher hides would all render at once. Opt back out. */\n.settings-panel[hidden] { display: none; }\n\n.settings-actions { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line-soft, var(--line)); }\n.settings-error { flex: 1; margin: 0; color: var(--danger); font-size: 0.82rem; }\n.settings-actions button { font: inherit; padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }\n.settings-actions button:hover { color: var(--accent); border-color: var(--accent); }\n.settings-actions .primary { background: var(--accent); color: var(--surface); border-color: transparent; font-weight: 500; }\n.settings-actions .primary:hover { color: var(--surface); filter: brightness(1.06); }\n\n/* --- list editor (rows + disclosure + inline field kit) --------------------- */\n/* A row is a WELL, not a ruled line: bordered, rounded, and sitting on `--card`\n rather than on the panel behind it. Patterpad's design, adopted as the family's\n (author's ruling, 2026-08-16), reversing the usual direction the way the bars\n did. A flat rule reads as a table of text; a well reads as a thing you can\n edit, which is what every one of these rows is. Rows are separated by the\n list's `gap`, so nothing here draws a divider. */\n.set-row { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }\n/* Where a jump landed (revealRow): lit for a moment, then left alone. A colour\n fade and not a movement, so it stays under reduced motion; the scroll before\n it is what goes instant there. */\n.set-row.landed { animation: set-landed 1.8s var(--ease-standard) both; }\n@keyframes set-landed {\n 0%, 35% { box-shadow: 0 0 0 2px var(--accent); }\n 100% { box-shadow: 0 0 0 2px transparent; }\n}\n.set-rowline { display: flex; align-items: center; gap: 8px; padding: 5px 7px; }\n/* Indented past the disclosure so the secondary fields hang under the row's\n content rather than under its triangle, and ruled off with a lighter line than\n the well's own border. */\n.set-details {\n display: flex; flex-direction: column; gap: 7px; align-items: stretch;\n padding: 6px 8px 8px 21px;\n border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);\n}\n.set-details[hidden] { display: none; } /* see .settings-panel[hidden] */\n/* The disclosure triangle is drawn, not typed: U+25B8/25BE are \"small\"\n triangles that stay hairline-thin at any font size. Rotates when open. */\n.set-expand { flex: none; width: 18px; height: 18px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }\n.set-expand::before {\n content: \"\"; width: 0; height: 0;\n border-left: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;\n transform-origin: 35% 50%; transition: transform var(--dur-quick) var(--ease-standard);\n}\n.set-expand { color: var(--muted); }\n.set-expand:hover, .set-expand.open { color: var(--accent); }\n.set-expand.open::before { transform: rotate(90deg); }\n\n.set-rowline input, .set-rowline select, .set-details input, .set-details select {\n font: inherit; font-size: 0.85rem; background: var(--bg); color: var(--ink);\n border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px;\n}\n.set-rowline input.set-name { flex: 1; min-width: 6rem; }\n.set-rowline input.invalid, .set-details input.invalid { border-color: var(--danger); }\n/* `.illegal`: a value that breaks a RULE, as opposed to `.invalid`, which the dup guard\n owns for a value that clashes with another. Both can be true of one field, so they are\n separate classes and draw the same. */\n.set-rowline input.illegal, .set-details input.illegal { border-color: var(--danger); }\n.set-rowline input:focus-visible, .set-rowline select:focus-visible,\n.set-details input:focus-visible, .set-details select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }\n\n/* The square icon button (`iconBtn`): a flex box centring a 14px drawing.\n (Until 0.39 it centred a typed glyph, which needed a workaround for the\n font's metrics; a drawn icon has none.) */\n.shell-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }\n.shell-icon:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }\n.shell-icon:disabled { opacity: 0.4; cursor: default; }\n.shell-icon.danger:hover:not(:disabled) { color: var(--surface); background: var(--danger); border-color: var(--danger); }\n\n.shell-labelled { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }\n.shell-fieldcap { color: var(--muted); min-width: 5rem; }\n\n.shell-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }\n.shell-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; padding: 2px 4px 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); }\n.shell-tag-x { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }\n.shell-tag-x:hover:not(:disabled) { color: var(--danger); }\n/* stageChips' move buttons at either end of the order. */\n.shell-tag-x:disabled { opacity: 0.35; cursor: default; }\n.shell-tag-move:hover:not(:disabled) { color: var(--accent); }\n.shell-tag-input { min-width: 8rem; }\n\n/* The property list (property-list.ts) on top of the row kit above. */\n.set-list { display: flex; flex-direction: column; gap: 6px; }\n.set-rowline select.set-type { flex: none; }\n.set-rowline .set-default { flex: 1; min-width: 5rem; }\n.set-flagnote { flex: 1; color: var(--muted); font-size: 0.82rem; font-style: italic; }\n.set-details input.set-purpose { flex: 1; }\n.set-add { align-self: flex-start; margin-top: 6px; }\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/settings.css"],"sourcesContent":["/* ============================================================================\n The settings dialog + list-editor styling. Reads the shared token grammar\n (tokens.css) and the app's palette vars (--surface / --ink / --muted / --line\n / --accent / --danger / --bg, optional --line-soft / --accent-soft). Neutral\n class names; the app supplies section content.\n ============================================================================ */\n\n.settings-dialog {\n padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);\n background: var(--surface); color: var(--ink);\n width: min(760px, 92vw); max-height: 82vh;\n box-shadow: var(--shadow-3);\n font: 14px var(--font-ui, system-ui, sans-serif);\n}\n/* Its own frame (the tab rail makes the generic dialog frame a poor fit), on\n the same tokens as dialog.css: the one scrim, the one radius, the one panel\n motion. */\n.settings-dialog { animation: var(--anim-panel-in); }\n.settings-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); animation: var(--anim-backdrop-in); }\n.settings-form { display: flex; flex-direction: column; max-height: 82vh; }\n.settings-title { margin: 0; padding: 16px 20px; font-family: var(--font-read, inherit); font-size: 18.5px; font-weight: 600; border-bottom: 1px solid var(--line-soft, var(--line)); }\n\n.settings-body { display: flex; min-height: 0; flex: 1; }\n.settings-tabs { flex: none; width: 192px; overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--line-soft, var(--line)); display: flex; flex-direction: column; gap: 1px; }\n.settings-group { padding: 12px 8px 4px; font: 600 12.5px/1.2 var(--font-ui); color: var(--muted); }\n.settings-tab { text-align: left; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }\n.settings-tab:hover { background: var(--accent-soft, color-mix(in oklab, var(--accent) 12%, transparent)); }\n.settings-tab.active { background: var(--accent-soft, color-mix(in oklab, var(--accent) 16%, transparent)); color: var(--accent); font-weight: 500; }\n/* Dimmed and inert, with the reason on its rollover; it must not light up on\n hover like a live tab. */\n.settings-tab.is-disabled { color: var(--muted); opacity: 0.5; cursor: default; }\n.settings-tab.is-disabled:hover { background: none; }\n\n.settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px; }\n.settings-panel { display: flex; flex-direction: column; gap: 14px; }\n/* A `display` on the class beats the UA's `[hidden] { display: none }`, so the\n panels the tab switcher hides would all render at once. Opt back out. */\n.settings-panel[hidden] { display: none; }\n\n.settings-actions { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line-soft, var(--line)); }\n.settings-error { flex: 1; margin: 0; color: var(--danger); font-size: 13px; }\n.settings-actions button { font: inherit; padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }\n.settings-actions button:hover { color: var(--accent); border-color: var(--accent); }\n.settings-actions .primary { background: var(--accent); color: var(--surface); border-color: transparent; font-weight: 500; }\n.settings-actions .primary:hover { color: var(--surface); filter: brightness(1.06); }\n\n/* --- list editor (rows + disclosure + inline field kit) --------------------- */\n/* A row is a WELL, not a ruled line: bordered, rounded, and sitting on `--card`\n rather than on the panel behind it. Patterpad's design, adopted as the family's\n (author's ruling, 2026-08-16), reversing the usual direction the way the bars\n did. A flat rule reads as a table of text; a well reads as a thing you can\n edit, which is what every one of these rows is. Rows are separated by the\n list's `gap`, so nothing here draws a divider. */\n.set-row { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }\n/* Where a jump landed (revealRow): lit for a moment, then left alone. A colour\n fade and not a movement, so it stays under reduced motion; the scroll before\n it is what goes instant there. */\n.set-row.landed { animation: set-landed 1.8s var(--ease-standard) both; }\n@keyframes set-landed {\n 0%, 35% { box-shadow: 0 0 0 2px var(--accent); }\n 100% { box-shadow: 0 0 0 2px transparent; }\n}\n.set-rowline { display: flex; align-items: center; gap: 8px; padding: 5px 7px; }\n/* Indented past the disclosure so the secondary fields hang under the row's\n content rather than under its triangle, and ruled off with a lighter line than\n the well's own border. */\n.set-details {\n display: flex; flex-direction: column; gap: 7px; align-items: stretch;\n padding: 6px 8px 8px 21px;\n border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);\n}\n.set-details[hidden] { display: none; } /* see .settings-panel[hidden] */\n/* The disclosure triangle is drawn, not typed: U+25B8/25BE are \"small\"\n triangles that stay hairline-thin at any font size. Rotates when open. */\n.set-expand { flex: none; width: 18px; height: 18px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }\n.set-expand::before {\n content: \"\"; width: 0; height: 0;\n border-left: 6px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;\n transform-origin: 35% 50%; transition: transform var(--dur-quick) var(--ease-standard);\n}\n.set-expand { color: var(--muted); }\n.set-expand:hover, .set-expand.open { color: var(--accent); }\n.set-expand.open::before { transform: rotate(90deg); }\n\n.set-rowline input, .set-rowline select, .set-details input, .set-details select {\n font: inherit; font-size: 13.5px; background: var(--bg); color: var(--ink);\n border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px;\n}\n.set-rowline input.set-name { flex: 1; min-width: 96px; }\n.set-rowline input.invalid, .set-details input.invalid { border-color: var(--danger); }\n/* `.illegal`: a value that breaks a RULE, as opposed to `.invalid`, which the dup guard\n owns for a value that clashes with another. Both can be true of one field, so they are\n separate classes and draw the same. */\n.set-rowline input.illegal, .set-details input.illegal { border-color: var(--danger); }\n.set-rowline input:focus-visible, .set-rowline select:focus-visible,\n.set-details input:focus-visible, .set-details select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }\n\n/* The square icon button (`iconBtn`): a flex box centring a 14px drawing.\n (Until 0.39 it centred a typed glyph, which needed a workaround for the\n font's metrics; a drawn icon has none.) */\n.shell-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }\n.shell-icon:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }\n.shell-icon:disabled { opacity: 0.4; cursor: default; }\n.shell-icon.danger:hover:not(:disabled) { color: var(--surface); background: var(--danger); border-color: var(--danger); }\n\n.shell-labelled { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }\n.shell-fieldcap { color: var(--muted); min-width: 80px; }\n\n.shell-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }\n.shell-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 4px 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); }\n.shell-tag-x { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }\n.shell-tag-x:hover:not(:disabled) { color: var(--danger); }\n/* stageChips' move buttons at either end of the order. */\n.shell-tag-x:disabled { opacity: 0.35; cursor: default; }\n.shell-tag-move:hover:not(:disabled) { color: var(--accent); }\n.shell-tag-input { min-width: 128px; }\n\n/* The property list (property-list.ts) on top of the row kit above. */\n.set-list { display: flex; flex-direction: column; gap: 6px; }\n.set-rowline select.set-type { flex: none; }\n.set-rowline .set-default { flex: 1; min-width: 80px; }\n.set-flagnote { flex: 1; color: var(--muted); font-size: 13px; font-style: italic; }\n.set-details input.set-purpose { flex: 1; }\n.set-add { align-self: flex-start; margin-top: 6px; }\n"],"mappings":"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","names":[]}
package/dist/stale.css CHANGED
@@ -9,7 +9,7 @@
9
9
  border-radius: var(--radius-md);
10
10
  background: color-mix(in oklab, var(--warn) 12%, transparent);
11
11
  color: var(--ink);
12
- font: 0.85rem var(--font-ui);
12
+ font: 13.5px var(--font-ui);
13
13
  }
14
14
  .stale-bar-msg {
15
15
  flex: 1;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/stale.css"],"sourcesContent":["/* The stale-session bar (stale.ts). Warn-toned rather than danger: nothing has\n gone wrong, and nothing is lost - what is on screen is simply older than the\n project. It is a full-width banner at the top of the surface it applies to,\n so it reads as a condition on that surface rather than as a passing remark. */\n.stale-bar {\n display: flex; align-items: center; gap: 14px; flex-wrap: wrap;\n padding: 10px 14px;\n border: 1px solid var(--warn); border-radius: var(--radius-md);\n background: color-mix(in oklab, var(--warn) 12%, transparent);\n color: var(--ink); font: 0.85rem var(--font-ui);\n}\n/* The sentence takes the room; the way out stays its own size at the end. */\n.stale-bar-msg { flex: 1; }\n.stale-bar-go {\n flex: none; display: inline-flex; align-items: center; gap: 6px;\n font: inherit; padding: 4px 12px;\n border: 1px solid var(--accent); border-radius: var(--radius-sm);\n background: var(--accent); color: var(--surface); cursor: pointer;\n}\n.stale-bar-go:hover { background: color-mix(in oklab, var(--accent) 85%, var(--ink)); }\n"],"mappings":";AAIA,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AAAM,aAAW;AAC1D,WAAS,KAAK;AACd,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAClD,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AACjD,SAAO,IAAI;AAAQ,QAAM,QAAQ,IAAI;AACvC;AAEA,CAAC;AAAgB,QAAM;AAAG;AAC1B,CAAC;AACC,QAAM;AAAM,WAAS;AAAa,eAAa;AAAQ,OAAK;AAC5D,QAAM;AAAS,WAAS,IAAI;AAC5B,UAAQ,IAAI,MAAM,IAAI;AAAW,iBAAe,IAAI;AACpD,cAAY,IAAI;AAAW,SAAO,IAAI;AAAY,UAAQ;AAC5D;AACA,CANC,YAMY;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI;AAAS;","names":[]}
1
+ {"version":3,"sources":["../src/stale.css"],"sourcesContent":["/* The stale-session bar (stale.ts). Warn-toned rather than danger: nothing has\n gone wrong, and nothing is lost - what is on screen is simply older than the\n project. It is a full-width banner at the top of the surface it applies to,\n so it reads as a condition on that surface rather than as a passing remark. */\n.stale-bar {\n display: flex; align-items: center; gap: 14px; flex-wrap: wrap;\n padding: 10px 14px;\n border: 1px solid var(--warn); border-radius: var(--radius-md);\n background: color-mix(in oklab, var(--warn) 12%, transparent);\n color: var(--ink); font: 13.5px var(--font-ui);\n}\n/* The sentence takes the room; the way out stays its own size at the end. */\n.stale-bar-msg { flex: 1; }\n.stale-bar-go {\n flex: none; display: inline-flex; align-items: center; gap: 6px;\n font: inherit; padding: 4px 12px;\n border: 1px solid var(--accent); border-radius: var(--radius-sm);\n background: var(--accent); color: var(--surface); cursor: pointer;\n}\n.stale-bar-go:hover { background: color-mix(in oklab, var(--accent) 85%, var(--ink)); }\n"],"mappings":";AAIA,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AAAM,aAAW;AAC1D,WAAS,KAAK;AACd,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAClD,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AACjD,SAAO,IAAI;AAAQ,QAAM,OAAO,IAAI;AACtC;AAEA,CAAC;AAAgB,QAAM;AAAG;AAC1B,CAAC;AACC,QAAM;AAAM,WAAS;AAAa,eAAa;AAAQ,OAAK;AAC5D,QAAM;AAAS,WAAS,IAAI;AAC5B,UAAQ,IAAI,MAAM,IAAI;AAAW,iBAAe,IAAI;AACpD,cAAY,IAAI;AAAW,SAAO,IAAI;AAAY,UAAQ;AAC5D;AACA,CANC,YAMY;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI;AAAS;","names":[]}
package/dist/stepper.css CHANGED
@@ -5,7 +5,7 @@
5
5
  gap: 10px;
6
6
  border-top: 1px solid var(--line-soft);
7
7
  background: var(--surface);
8
- font: 0.8rem var(--font-ui);
8
+ font: 13px var(--font-ui);
9
9
  padding: 6px 16px;
10
10
  min-height: 34px;
11
11
  }
@@ -55,7 +55,7 @@
55
55
  .stepbar-of {
56
56
  flex: none;
57
57
  color: var(--muted);
58
- font-size: 0.72rem;
58
+ font-size: 11.5px;
59
59
  font-variant-numeric: tabular-nums;
60
60
  }
61
61
  .stepbar-cur {
@@ -83,9 +83,18 @@
83
83
  .stepbar-where {
84
84
  flex: none;
85
85
  font-family: var(--font-mono);
86
- font-size: 0.72rem;
86
+ font-size: 11.5px;
87
87
  color: var(--muted);
88
88
  }
89
+ .stepbar-where:has(.shell-crumbs) {
90
+ flex: 0 1 auto;
91
+ min-width: 0;
92
+ max-width: 50%;
93
+ }
94
+ .stepbar-where .shell-crumbs {
95
+ font-size: inherit;
96
+ max-width: 100%;
97
+ }
89
98
  .stepbar-msg {
90
99
  flex: 1;
91
100
  min-width: 0;
@@ -107,7 +116,7 @@
107
116
  border-radius: var(--radius-sm);
108
117
  background: color-mix(in oklab, var(--accent) 14%, transparent);
109
118
  color: var(--accent);
110
- font: 600 0.7rem var(--font-ui);
119
+ font: 600 11px var(--font-ui);
111
120
  transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
112
121
  }
113
122
  .stepbar-action:hover:not(:disabled) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/stepper.css"],"sourcesContent":["/* The stepper bar (stepper.ts): one row, one entry at a time.\n\n A host puts `.stepbar` where it wants the bar - both apps stack theirs at the\n bottom of the window - and adds a modifier class when it runs two of them, as\n Storyletter's review walk does over its problems bar. One grammar with one\n modifier, rather than a parallel class set per bar. */\n.stepbar {\n display: flex; align-items: center; gap: 10px;\n border-top: 1px solid var(--line-soft); background: var(--surface);\n font: 0.8rem var(--font-ui); padding: 6px 16px; min-height: 34px;\n}\n.stepbar[hidden] { display: none; }\n\n/* How many there are, in the tone the app chose. Tabular so the number does not\n shuffle the row as it counts down. */\n.stepbar-count { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }\n.stepbar-count.danger { color: var(--danger); }\n.stepbar-count.warn { color: var(--warn); }\n.stepbar-count.accent { color: var(--accent); }\n.stepbar-count.muted { color: var(--muted); }\n\n.stepbar-nav {\n flex: none; display: inline-flex; align-items: center; justify-content: center;\n width: 20px; height: 20px; padding: 0; line-height: 1;\n border: none; background: none; color: var(--muted);\n border-radius: var(--radius-sm); font: inherit; cursor: pointer;\n}\n.stepbar-nav:hover { background: var(--accent-soft); color: var(--accent); }\n/* The way out sits hard right, past whatever the app put in the action slot. */\n.stepbar-close { margin-left: auto; }\n\n/* Where you are in the walk. Quiet: it answers a question rather than asking one. */\n.stepbar-of { flex: none; color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }\n\n/* The entry is the way TO the entry, so it looks like a control at rest rather\n than only on hover. */\n.stepbar-cur {\n flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;\n text-align: left; padding: 3px 8px; border: none; background: none;\n border-radius: var(--radius-sm); font: inherit; color: inherit; cursor: pointer;\n}\n.stepbar-cur:hover { background: var(--accent-soft); }\n.stepbar-cat { flex: none; font-weight: 600; }\n.stepbar-where { flex: none; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }\n/* One line, always: the bar's height must not depend on how wordy an entry is. */\n.stepbar-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }\n\n/* An empty MODE still shows its bar, and this is what it says. */\n.stepbar-empty { flex: 1; color: var(--muted); }\n\n/* The quick-fix chip (`.stepbar-action`, passed through `actions`): a small\n accent-edged button at the right-hand end, before the close. Patterpad's\n `.problem-fix` and Storyletter's `.problembar-fix` were this rule twice. */\n.stepbar-action {\n flex: none; margin-left: auto; cursor: pointer;\n padding: 2px 9px; border: 1px solid var(--accent); border-radius: var(--radius-sm);\n background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent);\n font: 600 0.7rem var(--font-ui);\n transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);\n}\n.stepbar-action:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }\n.stepbar-action:disabled { opacity: 0.45; cursor: default; }\n/* Amber when what you are standing on is advisory, matching the warn count. */\n.stepbar:has(.stepbar-count.warn) .stepbar-action { color: var(--warn); border-color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }\n.stepbar:has(.stepbar-count.warn) .stepbar-action:hover:not(:disabled) { background: var(--warn); color: var(--on-accent); }\n/* The action already pushed everything right; the close sits at its normal gap. */\n.stepbar-action ~ .stepbar-close { margin-left: 0; }\n"],"mappings":";AAMA,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AACzC,cAAY,IAAI,MAAM,IAAI;AAAc,cAAY,IAAI;AACxD,QAAM,OAAO,IAAI;AAAY,WAAS,IAAI;AAAM,cAAY;AAC9D;AACA,CALC,OAKO,CAAC;AAAU,WAAS;AAAM;AAIlC,CAAC;AAAgB,QAAM;AAAM,eAAa;AAAK,wBAAsB;AAAc;AACnF,CADC,aACa,CAAC;AAAS,SAAO,IAAI;AAAW;AAC9C,CAFC,aAEa,CAAC;AAAO,SAAO,IAAI;AAAS;AAC1C,CAHC,aAGa,CAAC;AAAS,SAAO,IAAI;AAAW;AAC9C,CAJC,aAIa,CAAC;AAAQ,SAAO,IAAI;AAAU;AAE5C,CAAC;AACC,QAAM;AAAM,WAAS;AAAa,eAAa;AAAQ,mBAAiB;AACxE,SAAO;AAAM,UAAQ;AAAM,WAAS;AAAG,eAAa;AACpD,UAAQ;AAAM,cAAY;AAAM,SAAO,IAAI;AAC3C,iBAAe,IAAI;AAAc,QAAM;AAAS,UAAQ;AAC1D;AACA,CANC,WAMW;AAAS,cAAY,IAAI;AAAgB,SAAO,IAAI;AAAW;AAE3E,CAAC;AAAgB,eAAa;AAAM;AAGpC,CAAC;AAAa,QAAM;AAAM,SAAO,IAAI;AAAU,aAAW;AAAS,wBAAsB;AAAc;AAIvG,CAAC;AACC,QAAM;AAAG,aAAW;AAAG,WAAS;AAAM,eAAa;AAAU,OAAK;AAClE,cAAY;AAAM,WAAS,IAAI;AAAK,UAAQ;AAAM,cAAY;AAC9D,iBAAe,IAAI;AAAc,QAAM;AAAS,SAAO;AAAS,UAAQ;AAC1E;AACA,CALC,WAKW;AAAS,cAAY,IAAI;AAAgB;AACrD,CAAC;AAAc,QAAM;AAAM,eAAa;AAAK;AAC7C,CAAC;AAAgB,QAAM;AAAM,eAAa,IAAI;AAAc,aAAW;AAAS,SAAO,IAAI;AAAU;AAErG,CAAC;AAAc,QAAM;AAAG,aAAW;AAAG,YAAU;AAAQ,iBAAe;AAAU,eAAa;AAAQ,SAAO,IAAI;AAAQ;AAGzH,CAAC;AAAgB,QAAM;AAAG,SAAO,IAAI;AAAU;AAK/C,CAAC;AACC,QAAM;AAAM,eAAa;AAAM,UAAQ;AACvC,WAAS,IAAI;AAAK,UAAQ,IAAI,MAAM,IAAI;AAAW,iBAAe,IAAI;AACtE,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AAAc,SAAO,IAAI;AAC5E,QAAM,IAAI,OAAO,IAAI;AACrB,cAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB,EAAE,MAAM,IAAI,aAAa,IAAI;AAC3F;AACA,CAPC,cAOc,MAAM,KAAK;AAAa,cAAY,IAAI;AAAW,SAAO,IAAI;AAAc;AAC3F,CARC,cAQc;AAAY,WAAS;AAAM,UAAQ;AAAS;AAE3D,CAzDC,OAyDO,KAAK,CAhDZ,aAgD0B,CA9CZ,MA8CmB,CAVjC;AAUmD,SAAO,IAAI;AAAS,gBAAc,IAAI;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AAAc;AAClK,CA1DC,OA0DO,KAAK,CAjDZ,aAiD0B,CA/CZ,MA+CmB,CAXjC,cAWgD,MAAM,KAAK;AAAa,cAAY,IAAI;AAAS,SAAO,IAAI;AAAc;AAE3H,CAbC,eAae,EAAE,CArCjB;AAqCkC,eAAa;AAAG;","names":[]}
1
+ {"version":3,"sources":["../src/stepper.css"],"sourcesContent":["/* The stepper bar (stepper.ts): one row, one entry at a time.\n\n A host puts `.stepbar` where it wants the bar - both apps stack theirs at the\n bottom of the window - and adds a modifier class when it runs two of them, as\n Storyletter's review walk does over its problems bar. One grammar with one\n modifier, rather than a parallel class set per bar. */\n.stepbar {\n display: flex; align-items: center; gap: 10px;\n border-top: 1px solid var(--line-soft); background: var(--surface);\n font: 13px var(--font-ui); padding: 6px 16px; min-height: 34px;\n}\n.stepbar[hidden] { display: none; }\n\n/* How many there are, in the tone the app chose. Tabular so the number does not\n shuffle the row as it counts down. */\n.stepbar-count { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }\n.stepbar-count.danger { color: var(--danger); }\n.stepbar-count.warn { color: var(--warn); }\n.stepbar-count.accent { color: var(--accent); }\n.stepbar-count.muted { color: var(--muted); }\n\n.stepbar-nav {\n flex: none; display: inline-flex; align-items: center; justify-content: center;\n width: 20px; height: 20px; padding: 0; line-height: 1;\n border: none; background: none; color: var(--muted);\n border-radius: var(--radius-sm); font: inherit; cursor: pointer;\n}\n.stepbar-nav:hover { background: var(--accent-soft); color: var(--accent); }\n/* The way out sits hard right, past whatever the app put in the action slot. */\n.stepbar-close { margin-left: auto; }\n\n/* Where you are in the walk. Quiet: it answers a question rather than asking one. */\n.stepbar-of { flex: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }\n\n/* The entry is the way TO the entry, so it looks like a control at rest rather\n than only on hover. */\n.stepbar-cur {\n flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;\n text-align: left; padding: 3px 8px; border: none; background: none;\n border-radius: var(--radius-sm); font: inherit; color: inherit; cursor: pointer;\n}\n.stepbar-cur:hover { background: var(--accent-soft); }\n.stepbar-cat { flex: none; font-weight: 600; }\n.stepbar-where { flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }\n/* A breadcrumb in the where slot keeps its own face (names, not an address) at\n the slot's size, and may give way so the entry's text keeps at least half. */\n.stepbar-where:has(.shell-crumbs) { flex: 0 1 auto; min-width: 0; max-width: 50%; }\n.stepbar-where .shell-crumbs { font-size: inherit; max-width: 100%; }\n/* One line, always: the bar's height must not depend on how wordy an entry is. */\n.stepbar-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }\n\n/* An empty MODE still shows its bar, and this is what it says. */\n.stepbar-empty { flex: 1; color: var(--muted); }\n\n/* The quick-fix chip (`.stepbar-action`, passed through `actions`): a small\n accent-edged button at the right-hand end, before the close. Patterpad's\n `.problem-fix` and Storyletter's `.problembar-fix` were this rule twice. */\n.stepbar-action {\n flex: none; margin-left: auto; cursor: pointer;\n padding: 2px 9px; border: 1px solid var(--accent); border-radius: var(--radius-sm);\n background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent);\n font: 600 11px var(--font-ui);\n transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);\n}\n.stepbar-action:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }\n.stepbar-action:disabled { opacity: 0.45; cursor: default; }\n/* Amber when what you are standing on is advisory, matching the warn count. */\n.stepbar:has(.stepbar-count.warn) .stepbar-action { color: var(--warn); border-color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }\n.stepbar:has(.stepbar-count.warn) .stepbar-action:hover:not(:disabled) { background: var(--warn); color: var(--on-accent); }\n/* The action already pushed everything right; the close sits at its normal gap. */\n.stepbar-action ~ .stepbar-close { margin-left: 0; }\n"],"mappings":";AAMA,CAAC;AACC,WAAS;AAAM,eAAa;AAAQ,OAAK;AACzC,cAAY,IAAI,MAAM,IAAI;AAAc,cAAY,IAAI;AACxD,QAAM,KAAK,IAAI;AAAY,WAAS,IAAI;AAAM,cAAY;AAC5D;AACA,CALC,OAKO,CAAC;AAAU,WAAS;AAAM;AAIlC,CAAC;AAAgB,QAAM;AAAM,eAAa;AAAK,wBAAsB;AAAc;AACnF,CADC,aACa,CAAC;AAAS,SAAO,IAAI;AAAW;AAC9C,CAFC,aAEa,CAAC;AAAO,SAAO,IAAI;AAAS;AAC1C,CAHC,aAGa,CAAC;AAAS,SAAO,IAAI;AAAW;AAC9C,CAJC,aAIa,CAAC;AAAQ,SAAO,IAAI;AAAU;AAE5C,CAAC;AACC,QAAM;AAAM,WAAS;AAAa,eAAa;AAAQ,mBAAiB;AACxE,SAAO;AAAM,UAAQ;AAAM,WAAS;AAAG,eAAa;AACpD,UAAQ;AAAM,cAAY;AAAM,SAAO,IAAI;AAC3C,iBAAe,IAAI;AAAc,QAAM;AAAS,UAAQ;AAC1D;AACA,CANC,WAMW;AAAS,cAAY,IAAI;AAAgB,SAAO,IAAI;AAAW;AAE3E,CAAC;AAAgB,eAAa;AAAM;AAGpC,CAAC;AAAa,QAAM;AAAM,SAAO,IAAI;AAAU,aAAW;AAAQ,wBAAsB;AAAc;AAItG,CAAC;AACC,QAAM;AAAG,aAAW;AAAG,WAAS;AAAM,eAAa;AAAU,OAAK;AAClE,cAAY;AAAM,WAAS,IAAI;AAAK,UAAQ;AAAM,cAAY;AAC9D,iBAAe,IAAI;AAAc,QAAM;AAAS,SAAO;AAAS,UAAQ;AAC1E;AACA,CALC,WAKW;AAAS,cAAY,IAAI;AAAgB;AACrD,CAAC;AAAc,QAAM;AAAM,eAAa;AAAK;AAC7C,CAAC;AAAgB,QAAM;AAAM,eAAa,IAAI;AAAc,aAAW;AAAQ,SAAO,IAAI;AAAU;AAGpG,CAHC,aAGa,KAAK,CAAC;AAAgB,QAAM,EAAE,EAAE;AAAM,aAAW;AAAG,aAAW;AAAK;AAClF,CAJC,cAIc,CADK;AACW,aAAW;AAAS,aAAW;AAAM;AAEpE,CAAC;AAAc,QAAM;AAAG,aAAW;AAAG,YAAU;AAAQ,iBAAe;AAAU,eAAa;AAAQ,SAAO,IAAI;AAAQ;AAGzH,CAAC;AAAgB,QAAM;AAAG,SAAO,IAAI;AAAU;AAK/C,CAAC;AACC,QAAM;AAAM,eAAa;AAAM,UAAQ;AACvC,WAAS,IAAI;AAAK,UAAQ,IAAI,MAAM,IAAI;AAAW,iBAAe,IAAI;AACtE,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AAAc,SAAO,IAAI;AAC5E,QAAM,IAAI,KAAK,IAAI;AACnB,cAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB,EAAE,MAAM,IAAI,aAAa,IAAI;AAC3F;AACA,CAPC,cAOc,MAAM,KAAK;AAAa,cAAY,IAAI;AAAW,SAAO,IAAI;AAAc;AAC3F,CARC,cAQc;AAAY,WAAS;AAAM,UAAQ;AAAS;AAE3D,CA7DC,OA6DO,KAAK,CApDZ,aAoD0B,CAlDZ,MAkDmB,CAVjC;AAUmD,SAAO,IAAI;AAAS,gBAAc,IAAI;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AAAc;AAClK,CA9DC,OA8DO,KAAK,CArDZ,aAqD0B,CAnDZ,MAmDmB,CAXjC,cAWgD,MAAM,KAAK;AAAa,cAAY,IAAI;AAAS,SAAO,IAAI;AAAc;AAE3H,CAbC,eAae,EAAE,CAzCjB;AAyCkC,eAAa;AAAG;","names":[]}
package/dist/toast.css CHANGED
@@ -1,16 +1,16 @@
1
1
  /* src/toast.css */
2
2
  .shell-toast {
3
3
  position: fixed;
4
- right: 1rem;
5
- bottom: 2.2rem;
4
+ right: 16px;
5
+ bottom: 35px;
6
6
  z-index: 40;
7
- max-width: 26rem;
7
+ max-width: 416px;
8
8
  background: var(--surface);
9
9
  border: 1px solid var(--line);
10
10
  border-radius: var(--radius-md);
11
- padding: 0.55rem 0.8rem;
11
+ padding: 9px 13px;
12
12
  color: var(--ink);
13
- font: 0.8rem/1.4 var(--font-ui);
13
+ font: 13px/1.4 var(--font-ui);
14
14
  overflow-wrap: anywhere;
15
15
  white-space: pre-line;
16
16
  box-shadow: var(--shadow-2);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/toast.css"],"sourcesContent":["/* The toast (toast.ts): a transient remark, bottom-right, an outlined card on the\n surface colour. The KIND is carried by the border and the text, never by a\n solid fill: a remark should not shout, and --ink on --surface reads on every\n palette without a tuned contrast pair. Tokens only, so it lands in any palette\n and any window (multi-window-rules.md). */\n.shell-toast {\n position: fixed; right: 1rem; bottom: 2.2rem; z-index: 40; max-width: 26rem;\n background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);\n padding: 0.55rem 0.8rem; color: var(--ink); font: 0.8rem/1.4 var(--font-ui);\n /* A long unbroken token (a file path) wraps INSIDE the card; a newline in the\n message is a line break. */\n overflow-wrap: anywhere; white-space: pre-line;\n box-shadow: var(--shadow-2);\n animation: var(--anim-panel-in, none);\n}\n.shell-toast.ok { border-color: var(--ok); color: var(--ok); }\n.shell-toast.error { border-color: var(--danger); color: var(--danger); }\n/* The eased dismiss (closeWithExit), mirroring the enter. */\n.shell-toast.closing { animation: var(--anim-panel-out); }\n.shell-toast[hidden] { display: none; }\n"],"mappings":";AAKA,CAAC;AACC,YAAU;AAAO,SAAO;AAAM,UAAQ;AAAQ,WAAS;AAAI,aAAW;AACtE,cAAY,IAAI;AAAY,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAC9E,WAAS,QAAQ;AAAQ,SAAO,IAAI;AAAQ,QAAM,MAAM,CAAC,IAAI,IAAI;AAGjE,iBAAe;AAAU,eAAa;AACtC,cAAY,IAAI;AAChB,aAAW,IAAI,eAAe,EAAE;AAClC;AACA,CAVC,WAUW,CAAC;AAAQ,gBAAc,IAAI;AAAW,SAAO,IAAI;AAAO;AACpE,CAXC,WAWW,CAAC;AAAQ,gBAAc,IAAI;AAAW,SAAO,IAAI;AAAW;AAExE,CAbC,WAaW,CAAC;AAAU,aAAW,IAAI;AAAmB;AACzD,CAdC,WAcW,CAAC;AAAU,WAAS;AAAM;","names":[]}
1
+ {"version":3,"sources":["../src/toast.css"],"sourcesContent":["/* The toast (toast.ts): a transient remark, bottom-right, an outlined card on the\n surface colour. The KIND is carried by the border and the text, never by a\n solid fill: a remark should not shout, and --ink on --surface reads on every\n palette without a tuned contrast pair. Tokens only, so it lands in any palette\n and any window (multi-window-rules.md). */\n.shell-toast {\n position: fixed; right: 16px; bottom: 35px; z-index: 40; max-width: 416px;\n background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);\n padding: 9px 13px; color: var(--ink); font: 13px/1.4 var(--font-ui);\n /* A long unbroken token (a file path) wraps INSIDE the card; a newline in the\n message is a line break. */\n overflow-wrap: anywhere; white-space: pre-line;\n box-shadow: var(--shadow-2);\n animation: var(--anim-panel-in, none);\n}\n.shell-toast.ok { border-color: var(--ok); color: var(--ok); }\n.shell-toast.error { border-color: var(--danger); color: var(--danger); }\n/* The eased dismiss (closeWithExit), mirroring the enter. */\n.shell-toast.closing { animation: var(--anim-panel-out); }\n.shell-toast[hidden] { display: none; }\n"],"mappings":";AAKA,CAAC;AACC,YAAU;AAAO,SAAO;AAAM,UAAQ;AAAM,WAAS;AAAI,aAAW;AACpE,cAAY,IAAI;AAAY,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAC9E,WAAS,IAAI;AAAM,SAAO,IAAI;AAAQ,QAAM,IAAI,CAAC,IAAI,IAAI;AAGzD,iBAAe;AAAU,eAAa;AACtC,cAAY,IAAI;AAChB,aAAW,IAAI,eAAe,EAAE;AAClC;AACA,CAVC,WAUW,CAAC;AAAQ,gBAAc,IAAI;AAAW,SAAO,IAAI;AAAO;AACpE,CAXC,WAWW,CAAC;AAAQ,gBAAc,IAAI;AAAW,SAAO,IAAI;AAAW;AAExE,CAbC,WAaW,CAAC;AAAU,aAAW,IAAI;AAAmB;AACzD,CAdC,WAcW,CAAC;AAAU,WAAS;AAAM;","names":[]}
package/dist/tokens.css CHANGED
@@ -3,6 +3,7 @@
3
3
  color-scheme: light dark;
4
4
  --ok: light-dark(#3f7d49, #79bd80);
5
5
  --on-accent: light-dark(#ffffff, #1b1916);
6
+ --chrome-size: 14px;
6
7
  --scrim: color-mix(in oklab, var(--ink) 28%, transparent);
7
8
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
8
9
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);
@@ -37,7 +38,7 @@
37
38
  outline-offset: 1px;
38
39
  }
39
40
  .overline {
40
- font: 600 0.66rem/1 var(--font-ui);
41
+ font: 600 10.5px/1 var(--font-ui);
41
42
  text-transform: uppercase;
42
43
  letter-spacing: 0.06em;
43
44
  color: var(--muted);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n across the editor family - elevation, motion, radius, scrollbar chrome. Each\n app supplies its own colour + font VALUES (its palette) over this grammar in\n its own theme.css. Do not add app-specific colours here.\n ============================================================================ */\n\n:root {\n color-scheme: light dark;\n\n /* The semantic set's third member, and the only COLOUR in this file.\n\n It is here because it kept not being anywhere. An app's palette owns\n --danger and --warn; neither owned \"all is well\", so a real need - the live\n debug link, an in-sync shard, a saved document - was met with a raw green\n literal that could not theme-shift (surface-audit-shell.md F2). A default\n in the grammar layer means the shell's own widgets may say it, and an app\n that has not thought about green yet still gets a green that works on both\n grounds. Every palette should override it in its theme.css, as it does the\n other two: this is a floor, not a decision. */\n --ok: light-dark(#3f7d49, #79bd80);\n\n /* The ink that sits ON the accent: a primary button's label, a selected\n row's text. Every palette overrides it (a light tan accent on a dark\n palette wants dark ink, not white); this floor only stops the shell's own\n primary buttons from falling back to a raw #fff literal, which is what\n they did until 0.39.0 and which read white-on-tan on Night and Slate. */\n --on-accent: light-dark(#ffffff, #1b1916);\n\n /* The one scrim behind every modal in the family (confirm, settings,\n identity, about, notes). Four recipes had grown across five files. */\n --scrim: color-mix(in oklab, var(--ink) 28%, transparent);\n\n /* Elevation: three tiers by how far a surface floats (resting cards,\n floating menus/popovers, full overlays). Theme-agnostic black so it\n deepens naturally on the dark palettes. */\n --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n /* Motion: one easing curve + a small duration scale, plus the shared\n panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --dur-quick: 120ms;\n --dur-base: 150ms;\n --dur-settle: 200ms;\n --dur-slow: 1s;\n --dur-panel: 260ms;\n --dur-exit: 170ms;\n --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n /* The long-job strip's indeterminate band (job.css draws the keyframes). */\n --anim-job-band: job-band 1.4s var(--ease-standard) infinite;\n\n /* Corner radius: four steps cover every surface. */\n --radius-sm: 6px;\n --radius-md: 10px;\n --radius-lg: 14px;\n --radius-pill: 999px;\n\n /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n/* A drawn icon (`iconNode` / `iconHtml` in icons.ts stamp `data-icon`). A\n block, so it never sits on a text baseline with descender space under it;\n no flex shrink, so a crowded row squeezes the text and not the picture; and\n no pointer events, so a click lands on the button and never on the drawing\n (a handler comparing `event.target` to its button would otherwise miss).\n Colour is inherited: every drawing is currentColor. */\n[data-icon] { display: block; flex: none; pointer-events: none; }\n\n/* The family's keyboard focus ring: one rule, zero specificity (:where), so a\n component may draw its own and win without !important. Until 0.39.0\n Patterpad's main window had no ring at all and Storyletter carried five\n copies of this line. Mouse focus stays quiet; only :focus-visible draws. */\n:where(button, [role=\"button\"], input, select, textarea, summary, a[href], [tabindex]):focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n\n/* The tracked uppercase caption, kept for exactly two jobs: table column heads\n and screenplay character cues, where uppercase is the domain's own\n convention (design-language.md, \"Captions are words, not overlines\"). A\n section caption anywhere else is sentence-case text at label size, weight\n 600, in the UI face, which is what the shell's own captions now are. */\n.overline { font: 600 0.66rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-sm); border: 3px solid transparent; background-clip: padding-box; }\n::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }\n\n@keyframes panel-in { from { opacity: 0; transform: translateY(-9px) scale(0.965); } to { opacity: 1; transform: none; } }\n@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }\n@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n :root {\n --anim-panel-in: none; --anim-backdrop-in: none; --anim-screen-in: none;\n --anim-panel-out: none; --anim-backdrop-out: none; --anim-job-band: none;\n }\n}\n"],"mappings":";AASA;AACE,gBAAc,MAAM;AAYpB,QAAM,WAAW,OAAO,EAAE;AAO1B,eAAa,WAAW,OAAO,EAAE;AAIjC,WAAS,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAK7C,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAItC,mBAAiB,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzC,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,mBAAiB,SAAS,IAAI,aAAa,IAAI;AAC/C,sBAAoB,YAAY,IAAI,cAAc,IAAI;AACtD,oBAAkB,UAAU,IAAI,aAAa,IAAI;AACjD,oBAAkB,UAAU,IAAI,YAAY,IAAI,iBAAiB;AACjE,uBAAqB,aAAa,IAAI,YAAY,IAAI,iBAAiB;AAEvE,mBAAiB,SAAS,KAAK,IAAI,iBAAiB;AAGpD,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAGf,kBAAgB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AACpD,wBAAsB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC5D;AAQA,CAAC;AAAa,WAAS;AAAO,QAAM;AAAM,kBAAgB;AAAM;AAMhE,OAAO,QAAQ,CAAC,cAAgB,OAAO,QAAQ,UAAU,SAAS,CAAC,CAAC,OAAO,CAAC,UAAU;AACpF,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAOA,CAAC;AAAW,QAAM,IAAI,OAAO,CAAC,EAAE,IAAI;AAAY,kBAAgB;AAAW,kBAAgB;AAAQ,SAAO,IAAI;AAAU;AAExH;AAAI,mBAAiB;AAAM,mBAAiB,IAAI,gBAAgB;AAAa;AAC7E;AAAsB,SAAO;AAAM,UAAQ;AAAM;AACjD;AAA4B,cAAY;AAAa;AACrD;AAA6B,cAAY;AAAa;AACtD;AAA4B,cAAY,IAAI;AAAiB,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM;AAAa,mBAAiB;AAAa;AAC3J,yBAAyB;AAAS,cAAY,IAAI;AAAuB,mBAAiB;AAAa;AAEvG,WAAW;AAAW;AAAO,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAQ;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AACzH,WAAW;AAAc;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AACjE,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW,WAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AAC5G,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAO;AAAE;AACzH,WAAW;AAAe;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AAElE,QAAO,wBAAyB;AAC9B;AACE,qBAAiB;AAAM,wBAAoB;AAAM,sBAAkB;AACnE,sBAAkB;AAAM,yBAAqB;AAAM,qBAAiB;AACtE;AACF;","names":[]}
1
+ {"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n across the editor family - elevation, motion, radius, scrollbar chrome. Each\n app supplies its own colour + font VALUES (its palette) over this grammar in\n its own theme.css. Do not add app-specific colours here.\n\n SCALE. Chrome is sized in px off a 14px base; the reading surface alone\n scales with the root (\"Chrome has its own scale\", design-language.md\n section 4, 2026-09-16). Every size in the shell's stylesheets (font-size,\n padding, gap, margin, width, height) is a pixel value: the navigator, the\n inspector, the bars, the dialogs and the controls in them read the same in\n every app of the family whatever the reading size is. `em` survives only\n where a rule deliberately scales with its own font; line-heights stay\n unitless. The values are what Storyletter rendered at 0.39.0 (rem x 16, to\n the nearest half pixel), so the conversion moved nothing there and brought\n Patterpad, whose chrome had grown 7 to 10 percent with its reading root,\n back to the same size. No `rem` in a chrome rule; the test suite greps.\n ============================================================================ */\n\n:root {\n color-scheme: light dark;\n\n /* The semantic set's third member, and the only COLOUR in this file.\n\n It is here because it kept not being anywhere. An app's palette owns\n --danger and --warn; neither owned \"all is well\", so a real need - the live\n debug link, an in-sync shard, a saved document - was met with a raw green\n literal that could not theme-shift (surface-audit-shell.md F2). A default\n in the grammar layer means the shell's own widgets may say it, and an app\n that has not thought about green yet still gets a green that works on both\n grounds. Every palette should override it in its theme.css, as it does the\n other two: this is a floor, not a decision. */\n --ok: light-dark(#3f7d49, #79bd80);\n\n /* The ink that sits ON the accent: a primary button's label, a selected\n row's text. Every palette overrides it (a light tan accent on a dark\n palette wants dark ink, not white); this floor only stops the shell's own\n primary buttons from falling back to a raw #fff literal, which is what\n they did until 0.39.0 and which read white-on-tan on Night and Slate. */\n --on-accent: light-dark(#ffffff, #1b1916);\n\n /* The chrome base. `.shell-dialog`, `.pane-shell` and `.swin-head` set it as\n their font-size, so unstyled text inside them lands at 14px regardless of\n the app's root; a rule that wants the base by name reads it here. Not a\n scale factor: the sizes below it are literal px, on purpose. */\n --chrome-size: 14px;\n\n /* The one scrim behind every modal in the family (confirm, settings,\n identity, about, notes). Four recipes had grown across five files. */\n --scrim: color-mix(in oklab, var(--ink) 28%, transparent);\n\n /* Elevation: three tiers by how far a surface floats (resting cards,\n floating menus/popovers, full overlays). Theme-agnostic black so it\n deepens naturally on the dark palettes. */\n --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n /* Motion: one easing curve + a small duration scale, plus the shared\n panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --dur-quick: 120ms;\n --dur-base: 150ms;\n --dur-settle: 200ms;\n --dur-slow: 1s;\n --dur-panel: 260ms;\n --dur-exit: 170ms;\n --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n /* The long-job strip's indeterminate band (job.css draws the keyframes). */\n --anim-job-band: job-band 1.4s var(--ease-standard) infinite;\n\n /* Corner radius: four steps cover every surface. */\n --radius-sm: 6px;\n --radius-md: 10px;\n --radius-lg: 14px;\n --radius-pill: 999px;\n\n /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n/* A drawn icon (`iconNode` / `iconHtml` in icons.ts stamp `data-icon`). A\n block, so it never sits on a text baseline with descender space under it;\n no flex shrink, so a crowded row squeezes the text and not the picture; and\n no pointer events, so a click lands on the button and never on the drawing\n (a handler comparing `event.target` to its button would otherwise miss).\n Colour is inherited: every drawing is currentColor. */\n[data-icon] { display: block; flex: none; pointer-events: none; }\n\n/* The family's keyboard focus ring: one rule, zero specificity (:where), so a\n component may draw its own and win without !important. Until 0.39.0\n Patterpad's main window had no ring at all and Storyletter carried five\n copies of this line. Mouse focus stays quiet; only :focus-visible draws. */\n:where(button, [role=\"button\"], input, select, textarea, summary, a[href], [tabindex]):focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n\n/* The tracked uppercase caption, kept for exactly two jobs: table column heads\n and screenplay character cues, where uppercase is the domain's own\n convention (design-language.md, \"Captions are words, not overlines\"). A\n section caption anywhere else is sentence-case text at label size, weight\n 600, in the UI face, which is what the shell's own captions now are. */\n.overline { font: 600 10.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-sm); border: 3px solid transparent; background-clip: padding-box; }\n::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }\n\n@keyframes panel-in { from { opacity: 0; transform: translateY(-9px) scale(0.965); } to { opacity: 1; transform: none; } }\n@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }\n@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n :root {\n --anim-panel-in: none; --anim-backdrop-in: none; --anim-screen-in: none;\n --anim-panel-out: none; --anim-backdrop-out: none; --anim-job-band: none;\n }\n}\n"],"mappings":";AAqBA;AACE,gBAAc,MAAM;AAYpB,QAAM,WAAW,OAAO,EAAE;AAO1B,eAAa,WAAW,OAAO,EAAE;AAMjC,iBAAe;AAIf,WAAS,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAK7C,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAItC,mBAAiB,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzC,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,mBAAiB,SAAS,IAAI,aAAa,IAAI;AAC/C,sBAAoB,YAAY,IAAI,cAAc,IAAI;AACtD,oBAAkB,UAAU,IAAI,aAAa,IAAI;AACjD,oBAAkB,UAAU,IAAI,YAAY,IAAI,iBAAiB;AACjE,uBAAqB,aAAa,IAAI,YAAY,IAAI,iBAAiB;AAEvE,mBAAiB,SAAS,KAAK,IAAI,iBAAiB;AAGpD,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAGf,kBAAgB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AACpD,wBAAsB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC5D;AAQA,CAAC;AAAa,WAAS;AAAO,QAAM;AAAM,kBAAgB;AAAM;AAMhE,OAAO,QAAQ,CAAC,cAAgB,OAAO,QAAQ,UAAU,SAAS,CAAC,CAAC,OAAO,CAAC,UAAU;AACpF,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAOA,CAAC;AAAW,QAAM,IAAI,MAAM,CAAC,EAAE,IAAI;AAAY,kBAAgB;AAAW,kBAAgB;AAAQ,SAAO,IAAI;AAAU;AAEvH;AAAI,mBAAiB;AAAM,mBAAiB,IAAI,gBAAgB;AAAa;AAC7E;AAAsB,SAAO;AAAM,UAAQ;AAAM;AACjD;AAA4B,cAAY;AAAa;AACrD;AAA6B,cAAY;AAAa;AACtD;AAA4B,cAAY,IAAI;AAAiB,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM;AAAa,mBAAiB;AAAa;AAC3J,yBAAyB;AAAS,cAAY,IAAI;AAAuB,mBAAiB;AAAa;AAEvG,WAAW;AAAW;AAAO,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAQ;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AACzH,WAAW;AAAc;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AACjE,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW,WAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AAC5G,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAO;AAAE;AACzH,WAAW;AAAe;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AAElE,QAAO,wBAAyB;AAC9B;AACE,qBAAiB;AAAM,wBAAoB;AAAM,sBAAkB;AACnE,sBAAkB;AAAM,yBAAqB;AAAM,qBAAiB;AACtE;AACF;","names":[]}
@@ -6,6 +6,7 @@
6
6
  gap: 6px;
7
7
  padding: 7px 10px;
8
8
  background: var(--surface);
9
+ font-size: var(--chrome-size);
9
10
  border-bottom: 1px solid var(--line-soft, var(--line));
10
11
  }
11
12
  .swin-head button,
@@ -14,7 +15,7 @@
14
15
  -webkit-app-region: no-drag;
15
16
  }
16
17
  .swin-title {
17
- font: 600 0.82rem/1.2 var(--font-ui);
18
+ font: 600 13px/1.2 var(--font-ui);
18
19
  color: var(--muted);
19
20
  }
20
21
  .swin-spacer {
@@ -52,7 +53,7 @@
52
53
  background: color-mix(in oklab, var(--accent) 12%, transparent);
53
54
  }
54
55
  .swin-close {
55
- font: 0.8rem var(--font-ui);
56
+ font: 13px var(--font-ui);
56
57
  padding: 2px 7px;
57
58
  }
58
59
  .swin-follow.on {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tool-window.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n The tool-window kit, CHROME grammar: the slim drag bar a frameless helper\n window draws in place of the OS title bar, and the pin / close buttons any\n helper (framed or not) carries. Consumes the host palette (--surface /\n --ink / --muted / --line / --line-soft / --accent / --font-ui) over the\n shared tokens. Content styles stay app-side; this is the chrome only.\n --------------------------------------------------------------------------- */\n\n/* The drag bar standing in for the OS title bar (frame: false). Buttons and\n other controls inside it opt out so they stay clickable. */\n.swin-head {\n -webkit-app-region: drag;\n display: flex; align-items: center; gap: 6px;\n padding: 7px 10px;\n background: var(--surface);\n /* --line-soft is an optional host token (Storyletter defines it; Patterpad\n falls back to --line). */\n border-bottom: 1px solid var(--line-soft, var(--line));\n}\n.swin-head button, .swin-head select, .swin-head input { -webkit-app-region: no-drag; }\n.swin-title {\n font: 600 0.82rem/1.2 var(--font-ui);\n color: var(--muted);\n}\n.swin-spacer { flex: 1; }\n\n/* The pin + close pair; motion is interpolation, never a jump. */\n.swin-pin, .swin-close {\n flex: none; display: inline-flex; align-items: center; justify-content: center;\n background: none; border: 1px solid transparent; border-radius: var(--radius-sm);\n cursor: pointer; color: var(--muted); line-height: 0; padding: 4px;\n transition: background var(--dur-quick) var(--ease-standard),\n border-color var(--dur-quick) var(--ease-standard),\n color var(--dur-quick) var(--ease-standard);\n}\n.swin-pin:hover, .swin-close:hover { border-color: var(--line); color: var(--ink); }\n.swin-pin svg { display: block; }\n.swin-pin.on {\n color: var(--accent); border-color: var(--accent);\n background: color-mix(in oklab, var(--accent) 12%, transparent);\n}\n.swin-close { font: 0.8rem var(--font-ui); padding: 2px 7px; }\n\n/* \"Follow in the editor\" (followButton): a `.btn` that lights like the pin\n while it is on, so the two controls that say how the window sits beside the\n editor read as one pair. */\n.swin-follow.on {\n color: var(--accent); border-color: var(--accent);\n background: color-mix(in oklab, var(--accent) 12%, transparent);\n}\n"],"mappings":";AAUA,CAAC;AACC,sBAAoB;AACpB,WAAS;AAAM,eAAa;AAAQ,OAAK;AACzC,WAAS,IAAI;AACb,cAAY,IAAI;AAGhB,iBAAe,IAAI,MAAM,IAAI,WAAW,EAAE,IAAI;AAChD;AACA,CATC,UASU;AAAQ,CATlB,UAS6B;AAAQ,CATrC,UASgD;AAAQ,sBAAoB;AAAS;AACtF,CAAC;AACC,QAAM,IAAI,OAAO,CAAC,IAAI,IAAI;AAC1B,SAAO,IAAI;AACb;AACA,CAAC;AAAc,QAAM;AAAG;AAGxB,CAAC;AAAU,CAAC;AACV,QAAM;AAAM,WAAS;AAAa,eAAa;AAAQ,mBAAiB;AACxE,cAAY;AAAM,UAAQ,IAAI,MAAM;AAAa,iBAAe,IAAI;AACpE,UAAQ;AAAS,SAAO,IAAI;AAAU,eAAa;AAAG,WAAS;AAC/D;AAAA,IAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB;AAAA,IAC1D,aAAa,IAAI,aAAa,IAAI,gBAAgB;AAAA,IAClD,MAAM,IAAI,aAAa,IAAI;AAC/B;AACA,CARC,QAQQ;AAAQ,CARL,UAQgB;AAAS,gBAAc,IAAI;AAAS,SAAO,IAAI;AAAQ;AACnF,CATC,SASS;AAAM,WAAS;AAAO;AAChC,CAVC,QAUQ,CAAC;AACR,SAAO,IAAI;AAAW,gBAAc,IAAI;AACxC,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AACrD;AACA,CAdY;AAcE,QAAM,OAAO,IAAI;AAAY,WAAS,IAAI;AAAK;AAK7D,CAAC,WAAW,CATF;AAUR,SAAO,IAAI;AAAW,gBAAc,IAAI;AACxC,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AACrD;","names":[]}
1
+ {"version":3,"sources":["../src/tool-window.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n The tool-window kit, CHROME grammar: the slim drag bar a frameless helper\n window draws in place of the OS title bar, and the pin / close buttons any\n helper (framed or not) carries. Consumes the host palette (--surface /\n --ink / --muted / --line / --line-soft / --accent / --font-ui) over the\n shared tokens. Content styles stay app-side; this is the chrome only.\n --------------------------------------------------------------------------- */\n\n/* The drag bar standing in for the OS title bar (frame: false). Buttons and\n other controls inside it opt out so they stay clickable. */\n.swin-head {\n -webkit-app-region: drag;\n display: flex; align-items: center; gap: 6px;\n padding: 7px 10px;\n background: var(--surface);\n font-size: var(--chrome-size); /* the chrome base (tokens.css) */\n /* --line-soft is an optional host token (Storyletter defines it; Patterpad\n falls back to --line). */\n border-bottom: 1px solid var(--line-soft, var(--line));\n}\n.swin-head button, .swin-head select, .swin-head input { -webkit-app-region: no-drag; }\n.swin-title {\n font: 600 13px/1.2 var(--font-ui);\n color: var(--muted);\n}\n.swin-spacer { flex: 1; }\n\n/* The pin + close pair; motion is interpolation, never a jump. */\n.swin-pin, .swin-close {\n flex: none; display: inline-flex; align-items: center; justify-content: center;\n background: none; border: 1px solid transparent; border-radius: var(--radius-sm);\n cursor: pointer; color: var(--muted); line-height: 0; padding: 4px;\n transition: background var(--dur-quick) var(--ease-standard),\n border-color var(--dur-quick) var(--ease-standard),\n color var(--dur-quick) var(--ease-standard);\n}\n.swin-pin:hover, .swin-close:hover { border-color: var(--line); color: var(--ink); }\n.swin-pin svg { display: block; }\n.swin-pin.on {\n color: var(--accent); border-color: var(--accent);\n background: color-mix(in oklab, var(--accent) 12%, transparent);\n}\n.swin-close { font: 13px var(--font-ui); padding: 2px 7px; }\n\n/* \"Follow in the editor\" (followButton): a `.btn` that lights like the pin\n while it is on, so the two controls that say how the window sits beside the\n editor read as one pair. */\n.swin-follow.on {\n color: var(--accent); border-color: var(--accent);\n background: color-mix(in oklab, var(--accent) 12%, transparent);\n}\n"],"mappings":";AAUA,CAAC;AACC,sBAAoB;AACpB,WAAS;AAAM,eAAa;AAAQ,OAAK;AACzC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,aAAW,IAAI;AAGf,iBAAe,IAAI,MAAM,IAAI,WAAW,EAAE,IAAI;AAChD;AACA,CAVC,UAUU;AAAQ,CAVlB,UAU6B;AAAQ,CAVrC,UAUgD;AAAQ,sBAAoB;AAAS;AACtF,CAAC;AACC,QAAM,IAAI,IAAI,CAAC,IAAI,IAAI;AACvB,SAAO,IAAI;AACb;AACA,CAAC;AAAc,QAAM;AAAG;AAGxB,CAAC;AAAU,CAAC;AACV,QAAM;AAAM,WAAS;AAAa,eAAa;AAAQ,mBAAiB;AACxE,cAAY;AAAM,UAAQ,IAAI,MAAM;AAAa,iBAAe,IAAI;AACpE,UAAQ;AAAS,SAAO,IAAI;AAAU,eAAa;AAAG,WAAS;AAC/D;AAAA,IAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB;AAAA,IAC1D,aAAa,IAAI,aAAa,IAAI,gBAAgB;AAAA,IAClD,MAAM,IAAI,aAAa,IAAI;AAC/B;AACA,CARC,QAQQ;AAAQ,CARL,UAQgB;AAAS,gBAAc,IAAI;AAAS,SAAO,IAAI;AAAQ;AACnF,CATC,SASS;AAAM,WAAS;AAAO;AAChC,CAVC,QAUQ,CAAC;AACR,SAAO,IAAI;AAAW,gBAAc,IAAI;AACxC,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AACrD;AACA,CAdY;AAcE,QAAM,KAAK,IAAI;AAAY,WAAS,IAAI;AAAK;AAK3D,CAAC,WAAW,CATF;AAUR,SAAO,IAAI;AAAW,gBAAc,IAAI;AACxC,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AACrD;","names":[]}
package/dist/tooltip.css CHANGED
@@ -3,13 +3,13 @@
3
3
  position: fixed;
4
4
  z-index: 100;
5
5
  pointer-events: none;
6
- max-width: 22rem;
6
+ max-width: 352px;
7
7
  white-space: pre-line;
8
8
  background: var(--ink);
9
9
  color: var(--surface);
10
- font: 0.72rem/1.4 var(--font-ui);
10
+ font: 11.5px/1.4 var(--font-ui);
11
11
  letter-spacing: 0.01em;
12
- padding: 0.3rem 0.5rem;
12
+ padding: 5px 8px;
13
13
  border-radius: var(--radius-sm);
14
14
  box-shadow: 0 4px 14px color-mix(in oklab, var(--ink) 35%, transparent);
15
15
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tooltip.css"],"sourcesContent":["/* The themed tooltip bubble (see tooltip.ts). ONE element for the whole\n document, moved and refilled per anchor, so this is the entire stylesheet.\n\n Inverted (ink ground, surface ink) on purpose: a rollover is a passing\n annotation rather than a panel, and the family's panels are all light-on-dark\n the other way round, so inverting is what marks it as temporary. */\n.tooltip {\n position: fixed; z-index: 100; pointer-events: none;\n max-width: 22rem; white-space: pre-line; /* tips may carry newlines */\n background: var(--ink); color: var(--surface);\n font: 0.72rem/1.4 var(--font-ui); letter-spacing: 0.01em;\n padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);\n box-shadow: 0 4px 14px color-mix(in oklab, var(--ink) 35%, transparent);\n}\n.tooltip[hidden] { display: none; }\n.tooltip.show { animation: var(--anim-panel-in); }\n"],"mappings":";AAMA,CAAC;AACC,YAAU;AAAO,WAAS;AAAK,kBAAgB;AAC/C,aAAW;AAAO,eAAa;AAC/B,cAAY,IAAI;AAAQ,SAAO,IAAI;AACnC,QAAM,OAAO,CAAC,IAAI,IAAI;AAAY,kBAAgB;AAClD,WAAS,OAAO;AAAQ,iBAAe,IAAI;AAC3C,cAAY,EAAE,IAAI,KAAK,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC7D;AACA,CARC,OAQO,CAAC;AAAU,WAAS;AAAM;AAClC,CATC,OASO,CAAC;AAAO,aAAW,IAAI;AAAkB;","names":[]}
1
+ {"version":3,"sources":["../src/tooltip.css"],"sourcesContent":["/* The themed tooltip bubble (see tooltip.ts). ONE element for the whole\n document, moved and refilled per anchor, so this is the entire stylesheet.\n\n Inverted (ink ground, surface ink) on purpose: a rollover is a passing\n annotation rather than a panel, and the family's panels are all light-on-dark\n the other way round, so inverting is what marks it as temporary. */\n.tooltip {\n position: fixed; z-index: 100; pointer-events: none;\n max-width: 352px; white-space: pre-line; /* tips may carry newlines */\n background: var(--ink); color: var(--surface);\n font: 11.5px/1.4 var(--font-ui); letter-spacing: 0.01em;\n padding: 5px 8px; border-radius: var(--radius-sm);\n box-shadow: 0 4px 14px color-mix(in oklab, var(--ink) 35%, transparent);\n}\n.tooltip[hidden] { display: none; }\n.tooltip.show { animation: var(--anim-panel-in); }\n"],"mappings":";AAMA,CAAC;AACC,YAAU;AAAO,WAAS;AAAK,kBAAgB;AAC/C,aAAW;AAAO,eAAa;AAC/B,cAAY,IAAI;AAAQ,SAAO,IAAI;AACnC,QAAM,MAAM,CAAC,IAAI,IAAI;AAAY,kBAAgB;AACjD,WAAS,IAAI;AAAK,iBAAe,IAAI;AACrC,cAAY,EAAE,IAAI,KAAK,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC7D;AACA,CARC,OAQO,CAAC;AAAU,WAAS;AAAM;AAClC,CATC,OASO,CAAC;AAAO,aAAW,IAAI;AAAkB;","names":[]}