@ascribed/review 0.4.1-next.28 → 0.4.2-next.29

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 (5) hide show
  1. package/dist/overlay/style.d.ts +1 -1
  2. package/dist/overlay/style.js +15 -14
  3. package/dist/overlay/style.js.map +1 -1
  4. package/package.json +14 -6
  5. package/src/marks/marks.css +54 -51
package/dist/overlay/style.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const OVERLAY_CSS = "\n:host {\n all: initial;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */\n --muted: var(--ascribe-review-muted, #676c75);\n --line: var(--ascribe-review-border, #e3e6ec);\n --thread: var(--ascribe-review-thread, #f7f9fd);\n --accent: var(--ascribe-review-focus, #5962e8);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --flash: var(--ascribe-review-flash, #fee9d0);\n --added: var(--ascribe-review-added, #057256);\n --changed: var(--ascribe-review-changed, #845502);\n --changed-background: var(--ascribe-review-changed-background, #fee9d0);\n --removed: var(--ascribe-review-removed, #ca3f02);\n --removed-background: var(--ascribe-review-removed-background, #fef4f1);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n /* End of generated host. */\n --text: var(--ascribe-review-text, CanvasText);\n --surface: var(--ascribe-review-surface, Canvas);\n --input: var(--ascribe-review-input, var(--surface));\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n color: var(--text);\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */\n box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);\n /* End of generated sheet. */\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */\n background: rgb(0 0 0 / 0.4);\n /* End of generated backdrop. */\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--accent);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--accent);\n }\n}\n";
1
+ export declare const OVERLAY_CSS = "\n:host {\n all: initial;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */\n --muted: var(--ascribe-review-muted, #47606f);\n --line: var(--ascribe-review-border, #ccdce4);\n --thread: var(--ascribe-review-thread, #e1ebf1);\n --accent: var(--ascribe-review-focus, #0b6f8e);\n --ring: var(--_review-ring, #b4530f);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --flash: var(--ascribe-review-flash, #ffe4cc);\n --added: var(--ascribe-review-added, #2f6b2b);\n --changed: var(--ascribe-review-changed, #0b6f8e);\n --changed-background: var(--ascribe-review-changed-background, #c5ecfa);\n --removed: var(--ascribe-review-removed, #ca223c);\n --removed-background: var(--ascribe-review-removed-background, #ffedec);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n /* End of generated host. */\n --text: var(--ascribe-review-text, CanvasText);\n --surface: var(--ascribe-review-surface, Canvas);\n --input: var(--ascribe-review-input, var(--surface));\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n color: var(--text);\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */\n box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);\n /* End of generated sheet. */\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */\n background: rgb(11 24 36 / 0.4);\n /* End of generated backdrop. */\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--ring);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--ring);\n }\n}\n";
package/dist/overlay/style.js CHANGED
@@ -7,17 +7,18 @@ export const OVERLAY_CSS = `
7
7
  :host {
8
8
  all: initial;
9
9
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */
10
- --muted: var(--ascribe-review-muted, #676c75);
11
- --line: var(--ascribe-review-border, #e3e6ec);
12
- --thread: var(--ascribe-review-thread, #f7f9fd);
13
- --accent: var(--ascribe-review-focus, #5962e8);
10
+ --muted: var(--ascribe-review-muted, #47606f);
11
+ --line: var(--ascribe-review-border, #ccdce4);
12
+ --thread: var(--ascribe-review-thread, #e1ebf1);
13
+ --accent: var(--ascribe-review-focus, #0b6f8e);
14
+ --ring: var(--_review-ring, #b4530f);
14
15
  --accent-text: var(--ascribe-review-accent-text, #ffffff);
15
- --flash: var(--ascribe-review-flash, #fee9d0);
16
- --added: var(--ascribe-review-added, #057256);
17
- --changed: var(--ascribe-review-changed, #845502);
18
- --changed-background: var(--ascribe-review-changed-background, #fee9d0);
19
- --removed: var(--ascribe-review-removed, #ca3f02);
20
- --removed-background: var(--ascribe-review-removed-background, #fef4f1);
16
+ --flash: var(--ascribe-review-flash, #ffe4cc);
17
+ --added: var(--ascribe-review-added, #2f6b2b);
18
+ --changed: var(--ascribe-review-changed, #0b6f8e);
19
+ --changed-background: var(--ascribe-review-changed-background, #c5ecfa);
20
+ --removed: var(--ascribe-review-removed, #ca223c);
21
+ --removed-background: var(--ascribe-review-removed-background, #ffedec);
21
22
  --mono: var(--ascribe-review-mono, ui-monospace, monospace);
22
23
  font-family: var(--ascribe-review-font, system-ui, -apple-system, "Segoe UI", sans-serif);
23
24
  /* End of generated host. */
@@ -52,7 +53,7 @@ button:focus-visible,
52
53
  textarea:focus-visible,
53
54
  input:focus-visible,
54
55
  .thread:focus-visible {
55
- outline: 2px solid var(--accent);
56
+ outline: 2px solid var(--ring);
56
57
  outline-offset: 1px;
57
58
  }
58
59
  .sr-only {
@@ -448,7 +449,7 @@ svg.connector path {
448
449
  position: fixed;
449
450
  inset: 0;
450
451
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */
451
- background: rgb(0 0 0 / 0.4);
452
+ background: rgb(11 24 36 / 0.4);
452
453
  /* End of generated backdrop. */
453
454
  z-index: 8;
454
455
  display: grid;
@@ -562,7 +563,7 @@ svg.connector path {
562
563
  }
563
564
  @keyframes flash {
564
565
  from {
565
- box-shadow: 0 0 0 3px var(--accent);
566
+ box-shadow: 0 0 0 3px var(--ring);
566
567
  }
567
568
  to {
568
569
  box-shadow: 0 0 0 0 transparent;
@@ -571,7 +572,7 @@ svg.connector path {
571
572
  @media (prefers-reduced-motion: reduce) {
572
573
  .flash {
573
574
  animation: none;
574
- outline: 2px solid var(--accent);
575
+ outline: 2px solid var(--ring);
575
576
  }
576
577
  }
577
578
  `;
package/dist/overlay/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,6EAA6E;AAC7E,6EAA6E;AAC7E,+EAA+E;AAC/E,kDAAkD;AAElD,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2jB1B,CAAC","sourcesContent":["// The overlay's stylesheet. It applies inside the overlay's shadow roots only,\n// so the page's styles don't reach the overlay and the overlay's don't reach\n// the page. Colors come from the page's --ascribe-review-* custom properties\n// (`marks.css` sets them, with light and dark values; a host can set its own),\n// which reach inside shadow roots by inheritance.\n\nexport const OVERLAY_CSS = `\n:host {\n all: initial;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */\n --muted: var(--ascribe-review-muted, #676c75);\n --line: var(--ascribe-review-border, #e3e6ec);\n --thread: var(--ascribe-review-thread, #f7f9fd);\n --accent: var(--ascribe-review-focus, #5962e8);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --flash: var(--ascribe-review-flash, #fee9d0);\n --added: var(--ascribe-review-added, #057256);\n --changed: var(--ascribe-review-changed, #845502);\n --changed-background: var(--ascribe-review-changed-background, #fee9d0);\n --removed: var(--ascribe-review-removed, #ca3f02);\n --removed-background: var(--ascribe-review-removed-background, #fef4f1);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n /* End of generated host. */\n --text: var(--ascribe-review-text, CanvasText);\n --surface: var(--ascribe-review-surface, Canvas);\n --input: var(--ascribe-review-input, var(--surface));\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n color: var(--text);\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */\n box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);\n /* End of generated sheet. */\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */\n background: rgb(0 0 0 / 0.4);\n /* End of generated backdrop. */\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--accent);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--accent);\n }\n}\n`;\n"]}
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,6EAA6E;AAC7E,6EAA6E;AAC7E,+EAA+E;AAC/E,kDAAkD;AAElD,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4jB1B,CAAC","sourcesContent":["// The overlay's stylesheet. It applies inside the overlay's shadow roots only,\n// so the page's styles don't reach the overlay and the overlay's don't reach\n// the page. Colors come from the page's --ascribe-review-* custom properties\n// (`marks.css` sets them, with light and dark values; a host can set its own),\n// which reach inside shadow roots by inheritance.\n\nexport const OVERLAY_CSS = `\n:host {\n all: initial;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */\n --muted: var(--ascribe-review-muted, #47606f);\n --line: var(--ascribe-review-border, #ccdce4);\n --thread: var(--ascribe-review-thread, #e1ebf1);\n --accent: var(--ascribe-review-focus, #0b6f8e);\n --ring: var(--_review-ring, #b4530f);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --flash: var(--ascribe-review-flash, #ffe4cc);\n --added: var(--ascribe-review-added, #2f6b2b);\n --changed: var(--ascribe-review-changed, #0b6f8e);\n --changed-background: var(--ascribe-review-changed-background, #c5ecfa);\n --removed: var(--ascribe-review-removed, #ca223c);\n --removed-background: var(--ascribe-review-removed-background, #ffedec);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n /* End of generated host. */\n --text: var(--ascribe-review-text, CanvasText);\n --surface: var(--ascribe-review-surface, Canvas);\n --input: var(--ascribe-review-input, var(--surface));\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n color: var(--text);\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */\n box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);\n /* End of generated sheet. */\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */\n background: rgb(11 24 36 / 0.4);\n /* End of generated backdrop. */\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--ring);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--ring);\n }\n}\n`;\n"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ascribed/review",
3
- "version": "0.4.1-next.28",
4
- "description": "Reviewing Ascribe pages as readers see them: changed blocks marked on the rendered page, and a pull request's review threads beside them.",
3
+ "version": "0.4.2-next.29",
4
+ "description": "A toolchain for documentation written as code. This package reviews pages as readers see them: changed blocks marked on the rendered page, and a pull request's review threads beside them.",
5
5
  "type": "module",
6
6
  "license": "MPL-2.0",
7
7
  "author": "Bryo Studio <hello@bryostudio.com> (https://bryostudio.com)",
@@ -10,7 +10,15 @@
10
10
  "url": "git+https://github.com/ascribed-dev/ascribe.git",
11
11
  "directory": "packages/review"
12
12
  },
13
- "homepage": "https://github.com/ascribed-dev/ascribe/tree/main/packages/review#readme",
13
+ "keywords": [
14
+ "ascribe",
15
+ "documentation",
16
+ "markdown",
17
+ "docs-as-code",
18
+ "review",
19
+ "pull-request"
20
+ ],
21
+ "homepage": "https://ascribed-dev.com/go/review-guide/",
14
22
  "bugs": "https://github.com/ascribed-dev/ascribe/issues",
15
23
  "sideEffects": false,
16
24
  "files": [
@@ -45,10 +53,10 @@
45
53
  "node": ">=24"
46
54
  },
47
55
  "devDependencies": {
48
- "@ascribed/elements": "0.4.1-next.28",
56
+ "@ascribed/elements": "0.4.2-next.29",
49
57
  "@types/node": "^24.19.2",
50
58
  "esbuild": "^0.28.2",
51
- "jsdom": "^30.1.2"
59
+ "jsdom": "^30.1.3"
52
60
  },
53
61
  "publishConfig": {
54
62
  "access": "public"
@@ -56,7 +64,7 @@
56
64
  "dependencies": {
57
65
  "smol-toml": "^1.9.1"
58
66
  },
59
- "gitHead": "f3adada5e86ae0828ac2610d5f812e402fa1425d",
67
+ "gitHead": "dbe916f4a1448d9587e1185c32399b422da94607",
60
68
  "scripts": {
61
69
  "build": "tsc -p tsconfig.build.json",
62
70
  "typecheck": "tsc --noEmit",
package/src/marks/marks.css CHANGED
@@ -13,24 +13,25 @@
13
13
 
14
14
  :root {
15
15
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: root, light. */
16
- --ascribe-review-added: #057256;
17
- --ascribe-review-added-background: #c7fae5;
18
- --ascribe-review-changed: #845502;
19
- --ascribe-review-changed-background: #fee9d0;
20
- --ascribe-review-removed: #ca3f02;
21
- --ascribe-review-removed-background: #fef4f1;
22
- --ascribe-review-moved: #932f8e;
23
- --ascribe-review-moved-background: #fff2fd;
24
- --ascribe-review-muted: #676c75;
25
- --ascribe-review-surface: #ffffff;
26
- --ascribe-review-flash: #fee9d0;
27
- --ascribe-review-focus: #5962e8;
16
+ --ascribe-review-added: #2f6b2b;
17
+ --ascribe-review-added-background: #cfefcb;
18
+ --ascribe-review-changed: #0b6f8e;
19
+ --ascribe-review-changed-background: #c5ecfa;
20
+ --ascribe-review-removed: #ca223c;
21
+ --ascribe-review-removed-background: #ffedec;
22
+ --ascribe-review-moved: #6b2094;
23
+ --ascribe-review-moved-background: #f6eefc;
24
+ --ascribe-review-muted: #47606f;
25
+ --ascribe-review-surface: #f2f7f9;
26
+ --ascribe-review-flash: #ffe4cc;
27
+ --ascribe-review-focus: #0b6f8e;
28
28
  --ascribe-review-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
29
- --ascribe-review-text: #22272e;
30
- --ascribe-review-border: #e3e6ec;
31
- --ascribe-review-thread: #f7f9fd;
32
- --ascribe-review-input: #ffffff;
29
+ --ascribe-review-text: #0b1824;
30
+ --ascribe-review-border: #ccdce4;
31
+ --ascribe-review-thread: #e1ebf1;
32
+ --ascribe-review-input: #f2f7f9;
33
33
  --ascribe-review-accent-text: #ffffff;
34
+ --_review-ring: #b4530f;
34
35
  /* End of generated root. */
35
36
  --ascribe-review-blend: multiply;
36
37
  }
@@ -38,23 +39,24 @@
38
39
  @media (prefers-color-scheme: dark) {
39
40
  :root:not([data-ascribe-scheme="light"]) {
40
41
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: root, dark. */
41
- --ascribe-review-added: #22c598;
42
- --ascribe-review-added-background: #003929;
43
- --ascribe-review-changed: #e0992e;
44
- --ascribe-review-changed-background: #432900;
45
- --ascribe-review-removed: #fe7f57;
46
- --ascribe-review-removed-background: #511b0a;
47
- --ascribe-review-moved: #ffc8f9;
48
- --ascribe-review-moved-background: #461c43;
49
- --ascribe-review-muted: #a5a9b2;
50
- --ascribe-review-surface: #0c0f16;
51
- --ascribe-review-flash: #432900;
52
- --ascribe-review-focus: #b3c0ff;
53
- --ascribe-review-text: #f0f3f7;
54
- --ascribe-review-border: #393d46;
55
- --ascribe-review-thread: #13171f;
56
- --ascribe-review-input: #0c0f16;
57
- --ascribe-review-accent-text: #0c0f16;
42
+ --ascribe-review-added: #9fdc7c;
43
+ --ascribe-review-added-background: #1b3f1d;
44
+ --ascribe-review-changed: #56d0f0;
45
+ --ascribe-review-changed-background: #0b3a4f;
46
+ --ascribe-review-removed: #ed7477;
47
+ --ascribe-review-removed-background: #481b1c;
48
+ --ascribe-review-moved: #b180d4;
49
+ --ascribe-review-moved-background: #362045;
50
+ --ascribe-review-muted: #8aa6b8;
51
+ --ascribe-review-surface: #0b1824;
52
+ --ascribe-review-flash: #4d2c15;
53
+ --ascribe-review-focus: #56d0f0;
54
+ --ascribe-review-text: #e3f1f7;
55
+ --ascribe-review-border: #263a4b;
56
+ --ascribe-review-thread: #1f303e;
57
+ --ascribe-review-input: #0b1824;
58
+ --ascribe-review-accent-text: #0b1824;
59
+ --_review-ring: #f0a35e;
58
60
  /* End of generated root. */
59
61
  --ascribe-review-blend: screen;
60
62
  }
@@ -62,23 +64,24 @@
62
64
 
63
65
  :root[data-ascribe-scheme="dark"] {
64
66
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: root, dark. */
65
- --ascribe-review-added: #22c598;
66
- --ascribe-review-added-background: #003929;
67
- --ascribe-review-changed: #e0992e;
68
- --ascribe-review-changed-background: #432900;
69
- --ascribe-review-removed: #fe7f57;
70
- --ascribe-review-removed-background: #511b0a;
71
- --ascribe-review-moved: #ffc8f9;
72
- --ascribe-review-moved-background: #461c43;
73
- --ascribe-review-muted: #a5a9b2;
74
- --ascribe-review-surface: #0c0f16;
75
- --ascribe-review-flash: #432900;
76
- --ascribe-review-focus: #b3c0ff;
77
- --ascribe-review-text: #f0f3f7;
78
- --ascribe-review-border: #393d46;
79
- --ascribe-review-thread: #13171f;
80
- --ascribe-review-input: #0c0f16;
81
- --ascribe-review-accent-text: #0c0f16;
67
+ --ascribe-review-added: #9fdc7c;
68
+ --ascribe-review-added-background: #1b3f1d;
69
+ --ascribe-review-changed: #56d0f0;
70
+ --ascribe-review-changed-background: #0b3a4f;
71
+ --ascribe-review-removed: #ed7477;
72
+ --ascribe-review-removed-background: #481b1c;
73
+ --ascribe-review-moved: #b180d4;
74
+ --ascribe-review-moved-background: #362045;
75
+ --ascribe-review-muted: #8aa6b8;
76
+ --ascribe-review-surface: #0b1824;
77
+ --ascribe-review-flash: #4d2c15;
78
+ --ascribe-review-focus: #56d0f0;
79
+ --ascribe-review-text: #e3f1f7;
80
+ --ascribe-review-border: #263a4b;
81
+ --ascribe-review-thread: #1f303e;
82
+ --ascribe-review-input: #0b1824;
83
+ --ascribe-review-accent-text: #0b1824;
84
+ --_review-ring: #f0a35e;
82
85
  /* End of generated root. */
83
86
  --ascribe-review-blend: screen;
84
87
  }
@@ -361,6 +364,6 @@
361
364
  @media (prefers-reduced-motion: reduce) {
362
365
  .ascribe-flash {
363
366
  animation: none;
364
- outline: 2px solid var(--ascribe-review-focus);
367
+ outline: 2px solid var(--_review-ring);
365
368
  }
366
369
  }