@inkbar/theme 0.3.0 → 0.5.0

package/README.md

@@ -20,7 +20,7 @@
 
 ---
 
-`@inkbar/theme` styles the viewer, toolbar controls, note threads and suggestion cards from `@inkbar/vue`, `@inkbar/react`, `@inkbar/svelte` and `createViewer` in `@inkbar/core`. Import it and ship, or override any part of it with your own CSS. If your app already defines shadcn tokens, the theme picks up your colours and radius.
+`@inkbar/theme` styles the viewer, toolbar controls and note threads from `@inkbar/vue`, `@inkbar/react`, `@inkbar/svelte` and `createViewer` in `@inkbar/core`. Import it and ship, or override any part of it with your own CSS. If your app already defines shadcn tokens, the theme picks up your colours and radius.
 
 ## Install
 
@@ -60,13 +60,12 @@ Colour tokens must hold complete CSS colour values. Tokens written as bare HSL c
 
 Set these variables on `[data-ink-root]` to change the default colour for new annotations:
 
-| Variable                                                                   | Used for                            |
-| -------------------------------------------------------------------------- | ----------------------------------- |
-| `--ink-highlight`, `--ink-underline`, `--ink-strikeout`, `--ink-squiggly`  | Text markup                         |
-| `--ink-note`, `--ink-free-text`                                            | Notes and text boxes                |
-| `--ink-shape`, `--ink-ink`                                                 | Shapes and freehand drawing         |
-| `--ink-redact`, `--ink-redact-fill`                                        | Redaction outline and fill          |
-| `--ink-suggestion-low`, `--ink-suggestion-medium`, `--ink-suggestion-high` | Suggested redactions, by confidence |
+| Variable                                                                  | Used for                    |
+| ------------------------------------------------------------------------- | --------------------------- |
+| `--ink-highlight`, `--ink-underline`, `--ink-strikeout`, `--ink-squiggly` | Text markup                 |
+| `--ink-note`, `--ink-free-text`                                           | Notes and text boxes        |
+| `--ink-shape`, `--ink-ink`                                                | Shapes and freehand drawing |
+| `--ink-redact`, `--ink-redact-fill`                                       | Redaction outline and fill  |
 
 Inkbar reads a colour when you create the annotation and stores it on the annotation, because the colour goes into the PDF. Changing a variable later affects new annotations only.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/theme",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Default stylesheet for Inkbar. Zero specificity, so your CSS wins.",
   "license": "MIT",
   "homepage": "https://inkbar.dev",

package/theme.css

@@ -14,9 +14,10 @@
   /* Tokens. Popovers are portalled out of the root, so they carry the tokens too. */
   :where(
     [data-ink-root],
-    [data-ink-note-popover],
-    [data-ink-suggestion-card],
-    [data-ink-select-content]
+    [data-ink-thread-popover],
+    [data-ink-popover],
+    [data-ink-select-content],
+    [data-ink-signature-dialog]
   ) {
     --ink-highlight: #f2c230;
     --ink-underline: #2b5a9e;
@@ -28,9 +29,6 @@
     --ink-ink: #151820;
     --ink-redact: #c0392b;
     --ink-redact-fill: #000000;
-    --ink-suggestion-low: #d4a017;
-    --ink-suggestion-medium: #e67e22;
-    --ink-suggestion-high: #c0392b;
 
     --ink-bg: var(--muted, #f1f2f5);
     --ink-fg: var(--foreground, #151820);
@@ -50,9 +48,10 @@
   @media (prefers-color-scheme: dark) {
     :where(
       [data-ink-root]:not(.light, .light *),
-      [data-ink-note-popover]:not(.light *),
-      [data-ink-suggestion-card]:not(.light *),
-      [data-ink-select-content]:not(.light *)
+      [data-ink-thread-popover]:not(.light *),
+      [data-ink-popover]:not(.light *),
+      [data-ink-select-content]:not(.light *),
+      [data-ink-signature-dialog]:not(.light *)
     ) {
       --ink-bg: var(--muted, #0f1217);
       --ink-fg: var(--foreground, #e6e9ef);
@@ -70,9 +69,10 @@
   :where(
     .dark [data-ink-root]:not(.light, .dark .light *),
     [data-ink-root].dark,
-    .dark [data-ink-note-popover]:not(.dark .light *),
-    .dark [data-ink-suggestion-card]:not(.dark .light *),
-    .dark [data-ink-select-content]:not(.dark .light *)
+    .dark [data-ink-thread-popover]:not(.dark .light *),
+    .dark [data-ink-popover]:not(.dark .light *),
+    .dark [data-ink-select-content]:not(.dark .light *),
+    .dark [data-ink-signature-dialog]:not(.dark .light *)
   ) {
     --ink-bg: var(--muted, #0f1217);
     --ink-fg: var(--foreground, #e6e9ef);
@@ -241,10 +241,11 @@
     background: transparent;
   }
 
-  /* Tools: the active tool's cursor is set on the root; text spans follow it unless text is the target. */
+  /* Tools: the active tool's cursor is set on the root; page text follows it, except under
+     select text, where text is the target. */
   :where(
-    [data-ink-tool='redact-area'] .ink-text-layer span,
-    [data-ink-tool='note'] .ink-text-layer span
+    [data-ink-tool]:not([data-ink-tool='select-text']) .ink-text-layer span,
+    [data-ink-tool]:not([data-ink-tool='select-text']) .ink-text-layer br
   ) {
     cursor: inherit;
   }
@@ -259,7 +260,26 @@
     background: color-mix(in srgb, var(--ink-redact) 15%, transparent);
   }
 
-  /* Resize handles on a selected area mark, text box or shape: shown with the select tool only. */
+  /* The shape draft's box is only its bounds; the outline is the SVG inside it. */
+  :where(.ink-draft[data-ink-draft='shape']) {
+    border: 0;
+    background: none;
+  }
+
+  :where(.ink-draft[data-ink-draft='shape'] svg) {
+    display: block;
+    stroke: var(--ink-accent);
+    stroke-width: 1.5;
+    stroke-dasharray: 4 3;
+    fill: color-mix(in srgb, var(--ink-accent) 10%, transparent);
+  }
+
+  :where(.ink-draft[data-ink-draft='shape'] polyline) {
+    fill: none;
+  }
+
+  /* Edit handles on a selected annotation: shown with the select tools, and on what a creation
+     tool just made (`data-ink-made`). */
   :where(.ink-handle) {
     box-sizing: border-box;
     border: 1px solid var(--ink-accent);
@@ -267,7 +287,14 @@
     background: var(--ink-surface);
   }
 
-  :where([data-ink-tool]:not([data-ink-tool='select']) .ink-handle) {
+  :where(
+    [data-ink-tool]:not(
+        [data-ink-tool='select'],
+        [data-ink-tool='select-text'],
+        [data-ink-made]
+      )
+      .ink-handle
+  ) {
     display: none;
   }
 
@@ -279,6 +306,18 @@
     cursor: nesw-resize;
   }
 
+  :where(
+    .ink-handle[data-handle='start'],
+    .ink-handle[data-handle='end'],
+    .ink-handle[data-handle='callout']
+  ) {
+    cursor: crosshair;
+  }
+
+  :where(.ink-handle[data-handle='start'], .ink-handle[data-handle='end']) {
+    border-radius: 50%;
+  }
+
   /* Annotations */
   :where(.ink-overlay) {
     z-index: 1;
@@ -290,17 +329,56 @@
     outline-offset: 1px;
   }
 
+  /* An annotation's SVGs (its shape, and a text box's edge band over the text) cover its box. */
   :where(.ink-annotation:not([data-custom]) > svg) {
     position: absolute;
     left: 0;
     top: 0;
   }
 
+  /* Cursors say what a press will do: move an annotation, edit a text box's text, or (text
+     markup under select text) select text. Under rectangle select a press on text markup
+     selects and drags it, so it shows move there. The creation tools' cursor shows through
+     elsewhere. */
   :where(
     [data-ink-tool='select'] .ink-annotation,
-    [data-ink-tool='view'] .ink-annotation
+    [data-ink-tool='select-text'] .ink-annotation,
+    [data-ink-made] .ink-annotation[data-state='selected']
   ) {
-    cursor: pointer;
+    cursor: move;
+  }
+
+  :where(
+    [data-ink-tool='select-text']
+      .ink-annotation:is(
+        [data-type='highlight'],
+        [data-type='underline'],
+        [data-type='strikeout'],
+        [data-type='squiggly']
+      )
+  ) {
+    cursor: text;
+  }
+
+  :where(
+    [data-ink-tool='select'] .ink-annotation:not([data-locked]) .ink-free-text,
+    [data-ink-tool='select-text'] .ink-annotation:not([data-locked]) .ink-free-text,
+    [data-ink-made]
+      .ink-annotation[data-state='selected']:not([data-locked])
+      .ink-free-text
+  ) {
+    cursor: text;
+  }
+
+  /* The band along a text box's edge presses to move it, not to edit. */
+  :where(
+    [data-ink-tool='select'] .ink-annotation:not([data-locked]) [data-ink-edge],
+    [data-ink-tool='select-text'] .ink-annotation:not([data-locked]) [data-ink-edge],
+    [data-ink-made]
+      .ink-annotation[data-state='selected']:not([data-locked])
+      [data-ink-edge]
+  ) {
+    cursor: move;
   }
 
   :where(.ink-annotation[data-state='hover']) {
@@ -316,12 +394,45 @@
     cursor: default;
   }
 
+  /* While an annotation is moved the whole viewport shows it, over any element's own cursor.
+     The one rule here that is not zero specificity: it has to beat them. */
+  [data-ink-dragging],
+  [data-ink-dragging] * {
+    cursor: move !important;
+  }
+
   :where(.ink-annotation[data-locked][data-state='selected']) {
     outline-style: dotted;
   }
 
-  :where(.ink-annotation[data-origin='suggested'] .ink-annotation-shape > *) {
-    stroke-dasharray: 4 3;
+  /* A free text inset by a fringe outlines its text box, where its corner handles sit, not
+     the whole rect with its callout. */
+  :where(.ink-annotation[data-framed]) {
+    outline-color: transparent;
+  }
+
+  :where(.ink-selection-frame) {
+    border-radius: 2px;
+    outline: 1px solid transparent;
+    outline-offset: 1px;
+  }
+
+  :where(.ink-annotation[data-framed][data-state='hover'] > .ink-selection-frame) {
+    outline-color: color-mix(in srgb, var(--ink-ring) 50%, transparent);
+  }
+
+  :where(
+    .ink-annotation[data-framed][data-state='selected'] > .ink-selection-frame,
+    .ink-annotation[data-framed]:focus-visible > .ink-selection-frame
+  ) {
+    outline: 2px solid var(--ink-ring);
+  }
+
+  :where(
+    .ink-annotation[data-framed][data-locked][data-state='selected']
+      > .ink-selection-frame
+  ) {
+    outline-style: dotted;
   }
 
   :where(.ink-note-icon) {
@@ -337,19 +448,58 @@
     pointer-events: none;
   }
 
+  /* Commented text markup: a comment glyph at the markup's end. */
+  :where(.ink-comment-marker) {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    width: 14px;
+    height: 14px;
+    translate: -25% -75%;
+    border-radius: 4px;
+    background: var(--ink-surface);
+    color: var(--ink-accent);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
+    pointer-events: none;
+  }
+
+  :where(.ink-comment-marker > svg) {
+    width: 10px;
+    height: 10px;
+  }
+
   :where(.ink-free-text) {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     overflow: hidden;
     font-family: var(--ink-font-family, Helvetica), Helvetica, Arial, sans-serif;
     font-size: var(--ink-font-size);
+    font-weight: var(--ink-font-weight, normal);
+    font-style: var(--ink-font-style, normal);
+    text-decoration: var(--ink-text-decoration, none);
     line-height: 1.2;
     color: var(--ink-text-color, var(--ink-free-text));
+    background: var(--ink-fill, transparent);
+    border-radius: var(--ink-corner-radius, 0);
     opacity: var(--ink-opacity, 1);
     overflow-wrap: break-word;
     white-space: pre-wrap;
   }
 
+  :where(.ink-free-text[data-border]) {
+    border: var(--ink-border-width, 1px) solid var(--ink-box-border, var(--ink-free-text));
+  }
+
+  :where(.ink-free-text[data-border='dashed']) {
+    border-style: dashed;
+  }
+
+  /* A speech bubble's outline is the path beside the text, so the text only needs room inside it. */
+  :where(.ink-free-text[data-bubble]) {
+    padding: 0.4em 0.6em;
+  }
+
   :where(.ink-free-text[data-align='left']) {
     text-align: left;
   }
@@ -362,6 +512,19 @@
     text-align: right;
   }
 
+  :where(.ink-free-text[data-align='justify']) {
+    text-align: justify;
+  }
+
+  /* The in-place editor grows with its text, and shows where the box is while it is empty. */
+  :where(.ink-free-text[data-ink-editor]) {
+    height: auto;
+    overflow: visible;
+    outline: 1px dashed var(--ink-free-text);
+    outline-offset: 1px;
+    cursor: text;
+  }
+
   /*
    * Toolbar. The theme styles the bar's surface and the controls in it; where a bar sits, how
    * its controls are grouped and what separates it from the document are up to the app.
@@ -572,8 +735,558 @@
     display: inline-flex;
   }
 
-  /* Note threads and suggestion cards */
-  :where(.ink-note-popover, .ink-suggestion-card) {
+  /*
+   * Style menus (line style and the other style controls). The panel takes the select
+   * panel's box through `.ink-select-content`; its items are buttons.
+   */
+  :where(.ink-menu-content) {
+    min-width: 11rem;
+  }
+
+  :where(.ink-menu-group + .ink-menu-group) {
+    margin-top: 0.25rem;
+    padding-top: 0.25rem;
+    border-top: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-menu-label) {
+    padding: 0.25rem 0.5rem;
+    color: var(--ink-muted-fg);
+    font-size: 0.75rem;
+  }
+
+  :where(.ink-menu-item) {
+    box-sizing: border-box;
+    width: 100%;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+  }
+
+  :where(.ink-menu-item:hover:not(:disabled), .ink-menu-item:focus-visible) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-menu-item:disabled) {
+    opacity: 0.5;
+  }
+
+  /*
+   * Colour menus. The trigger shows the current colour as a swatch; `data-kind` is `color`,
+   * `none` (slashed), `mixed` (split) or `empty`. A border swatch is a ring, a fill swatch a
+   * disc.
+   */
+  :where(.ink-swatch) {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 1.125rem;
+    height: 1.125rem;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--ink-fg) 35%, transparent);
+    border-radius: 50%;
+    background: var(--ink-swatch, transparent);
+  }
+
+  :where(.ink-swatch[data-property='border'][data-kind='color']) {
+    border: 3px solid var(--ink-swatch);
+    background: transparent;
+  }
+
+  :where(.ink-swatch[data-kind='none'])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top right,
+      transparent calc(50% - 1px),
+      #e5484d calc(50% - 1px),
+      #e5484d calc(50% + 1px),
+      transparent calc(50% + 1px)
+    );
+  }
+
+  :where(.ink-swatch[data-kind='mixed']) {
+    background: linear-gradient(135deg, #e5484d 50%, #3b82f6 50%);
+  }
+
+  :where(.ink-color-grid) {
+    display: grid;
+    grid-template-columns: repeat(12, 1.25rem);
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-swatch-item) {
+    box-sizing: border-box;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--ink-fg) 20%, transparent);
+    border-radius: 3px;
+    background: var(--ink-swatch);
+    cursor: default;
+  }
+
+  :where(.ink-swatch-item[data-state='checked']) {
+    outline: 2px solid var(--ink-fg);
+    outline-offset: 1px;
+  }
+
+  :where(.ink-swatch-item:hover, .ink-swatch-item:focus-visible) {
+    outline: 2px solid var(--ink-ring, var(--ink-fg));
+    outline-offset: 1px;
+  }
+
+  /* The native input stays in the page so its picker opens; only the picker is seen. */
+  :where(.ink-color-input) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /*
+   * Text style menu: a popover panel of mixed widgets (font select, text colour, size stepper,
+   * emphasis toggles, alignment radios).
+   */
+  :where(.ink-text-style-content) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  :where(.ink-text-style-row, .ink-text-style-size) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :where(.ink-text-style-font, .ink-text-style-input) {
+    box-sizing: border-box;
+    height: 2rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+  }
+
+  :where(.ink-text-style-input) {
+    width: 3.5rem;
+    text-align: center;
+    appearance: textfield;
+  }
+
+  :where(.ink-text-style-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: none;
+    color: inherit;
+    cursor: default;
+  }
+
+  :where(.ink-text-style-button:hover, .ink-text-style-button:focus-visible) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-text-style-button[data-state='on']) {
+    border-color: var(--ink-border);
+    background: color-mix(in srgb, var(--ink-fg) 14%, transparent);
+  }
+
+  :where(.ink-text-style-button[data-mixed]) {
+    border-style: dashed;
+    border-color: var(--ink-border);
+  }
+
+  /* A style menu's trigger when the selection disagrees (the colour menus' swatch shows it too). */
+  :where(.ink-menu-trigger[data-mixed]) {
+    border-style: dashed;
+    border-color: var(--ink-border);
+  }
+
+  /*
+   * Split buttons (shape, highlight, signature): one control with two parts, the tool button
+   * beside a narrow chevron. Hovering either part tints the whole control and the part under
+   * the pointer a shade more; with the tool on, both parts take the accent. Plain sibling
+ * selectors, not :has(), which costs frames on long documents.
+   */
+  :where(.ink-split-button) {
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: calc(var(--ink-radius) - 2px);
+  }
+
+  :where(.ink-split-button > .ink-tool-button) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where(.ink-split-button > .ink-menu-trigger) {
+    min-width: 0;
+    width: 1.25rem;
+    padding-inline: 0.125rem;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where(.ink-split-button:hover) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  /* The tool button's on state already takes the accent; the chevron beside it follows. */
+  :where(.ink-split-button > .ink-tool-button[data-state='on'] + .ink-menu-trigger) {
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+    /* The line between the parts, only while the accent fills both. */
+    box-shadow: inset 1px 0 color-mix(in srgb, var(--ink-accent-fg) 35%, transparent);
+  }
+
+  :where(
+    .ink-split-button > .ink-tool-button[data-state='on']:hover,
+    .ink-split-button > .ink-tool-button[data-state='on'] + .ink-menu-trigger:hover
+  ) {
+    background: color-mix(in srgb, var(--ink-accent-fg) 16%, var(--ink-accent));
+  }
+
+  :where(.ink-shape-grid) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-shape-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  /* Highlight menu: the markup kinds, then the markup colour. */
+  :where(.ink-highlight-kinds) {
+    display: grid;
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-highlight-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  /*
+   * The colour row reads as one more item: the swatch sits in the icon column and "Colour" in
+   * the label column. The colour menu's trigger covers the whole row, so the row is the target;
+   * the label shows through it.
+   */
+  :where(.ink-highlight-colour) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-highlight-colour-label) {
+    padding: 0.375rem 0.5rem 0.375rem 2rem;
+  }
+
+  :where(.ink-highlight-colour > .ink-menu-trigger) {
+    position: absolute;
+    inset: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto;
+    min-width: 0;
+    height: auto;
+    padding: 0 0.5rem;
+    border: 0;
+    border-radius: calc(var(--ink-radius) - 4px);
+    background: transparent;
+  }
+
+  :where(
+    .ink-highlight-colour > .ink-menu-trigger:hover,
+    .ink-highlight-colour > .ink-menu-trigger:focus-visible,
+    .ink-highlight-colour > .ink-menu-trigger[data-state='open']
+  ) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  /* A markup colour is a fill, so its swatch is a disc, not the border ring. */
+  :where(.ink-highlight-colour .ink-swatch) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :where(.ink-highlight-colour .ink-swatch[data-kind='color']) {
+    border: 1px solid color-mix(in srgb, var(--ink-fg) 20%, transparent);
+    background: var(--ink-swatch);
+  }
+
+  /* Stamps: an image filling its box; the overlay sets its geometry and opacity. */
+  :where(.ink-stamp) {
+    display: block;
+    max-width: none;
+    opacity: var(--ink-opacity, 1);
+    user-select: none;
+  }
+
+  /* Signature menu: saved signatures as previews, each with a remove button. */
+  :where(.ink-signature-list) {
+    display: grid;
+    grid-template-columns: minmax(10rem, 1fr) auto;
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-signature-item) {
+    padding-right: 0.5rem;
+    color: var(--ink-ink);
+  }
+
+  :where(.ink-signature-item[data-state='checked']) {
+    background: color-mix(in srgb, var(--ink-accent) 10%, transparent);
+  }
+
+  /* Signatures are dark ink in both themes, so they sit on paper. */
+  :where(.ink-signature-preview) {
+    display: inline-flex;
+    align-items: center;
+    height: 2rem;
+    border-radius: calc(var(--ink-radius) - 4px);
+    background: #fff;
+  }
+
+  :where(.ink-signature-preview svg, .ink-signature-preview img) {
+    height: 100%;
+    max-width: 10rem;
+    object-fit: contain;
+  }
+
+  :where(.ink-signature-remove) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    padding: 0;
+    border-radius: calc(var(--ink-radius) - 4px);
+    color: var(--ink-muted-fg);
+  }
+
+  :where(.ink-signature-create) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  /* Dialogs (Create signature): a modal over an overlay. */
+  :where(.ink-dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background: rgb(0 0 0 / 0.4);
+  }
+
+  :where(.ink-dialog) {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 51;
+    box-sizing: border-box;
+    width: min(32rem, calc(100vw - 2rem));
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+    padding: 1rem;
+    border: 1px solid var(--ink-border);
+    border-radius: var(--ink-radius);
+    background: var(--ink-surface);
+    color: var(--ink-fg);
+    box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
+    font-size: 0.875rem;
+    transform: translate(-50%, -50%);
+  }
+
+  :where(.ink-dialog:focus) {
+    outline: none;
+  }
+
+  :where(.ink-dialog-title) {
+    margin: 0 0 0.75rem;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  :where(.ink-tabs) {
+    display: flex;
+    gap: 0.25rem;
+    margin-bottom: 0.75rem;
+    border-bottom: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-tab) {
+    margin-bottom: -1px;
+    padding: 0.375rem 0.75rem;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--ink-muted-fg);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  :where(.ink-tab[data-state='active']) {
+    border-bottom-color: var(--ink-accent);
+    color: var(--ink-fg);
+  }
+
+  :where(.ink-tab-panel) {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  :where(.ink-tab-panel[hidden]) {
+    display: none;
+  }
+
+  :where(.ink-signature-pad-host) {
+    box-sizing: border-box;
+    height: 10rem;
+    border: 1px dashed var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: #fff;
+    color: var(--ink-ink);
+    cursor: crosshair;
+  }
+
+  :where(.ink-signature-pad .ink-stroke) {
+    fill: currentColor;
+  }
+
+  :where(.ink-dialog-row) {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :where(.ink-field) {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  :where(.ink-input) {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.375rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+  }
+
+  :where(.ink-field-error) {
+    margin: 0;
+    color: var(--ink-strikeout);
+  }
+
+  :where(.ink-signature-fonts) {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  :where(.ink-signature-font) {
+    overflow: hidden;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: #fff;
+    color: var(--ink-ink);
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  :where(.ink-signature-font-sample) {
+    font-size: 1.75rem;
+    line-height: 1.4;
+  }
+
+  :where(.ink-signature-font[data-state='checked']) {
+    border-color: var(--ink-accent);
+    box-shadow: inset 0 0 0 1px var(--ink-accent);
+  }
+
+  :where(.ink-signature-image) {
+    max-width: 100%;
+    max-height: 8rem;
+    object-fit: contain;
+  }
+
+  :where(.ink-dialog-actions) {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.375rem;
+    margin-top: 1rem;
+  }
+
+  :where(.ink-button) {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  :where(.ink-button[data-variant='primary']) {
+    border-color: var(--ink-accent);
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-button:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  :where(
+    .ink-tab:focus-visible,
+    .ink-button:focus-visible,
+    .ink-input:focus-visible,
+    .ink-signature-font:focus-visible,
+    .ink-text-style-font:focus-visible,
+    .ink-text-style-input:focus-visible,
+    .ink-text-style-button:focus-visible
+  ) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
+  }
+
+  /* Comment threads */
+  :where(.ink-thread-popover) {
     z-index: 50;
     width: 20rem;
     max-width: calc(100vw - 1rem);
@@ -629,13 +1342,13 @@
     resize: vertical;
   }
 
-  :where(.ink-thread-actions, .ink-suggestion-actions) {
+  :where(.ink-thread-actions) {
     display: flex;
     gap: 0.375rem;
     margin-top: 0.5rem;
   }
 
-  :where(.ink-thread-actions button, .ink-suggestion-actions button) {
+  :where(.ink-thread-actions button) {
     padding: 0.375rem 0.75rem;
     border: 1px solid var(--ink-border);
     border-radius: calc(var(--ink-radius) - 2px);
@@ -645,10 +1358,7 @@
     cursor: pointer;
   }
 
-  :where(
-    .ink-thread-actions button[type='submit'],
-    .ink-suggestion-actions button:first-child
-  ) {
+  :where(.ink-thread-actions button[type='submit']) {
     border-color: var(--ink-accent);
     background: var(--ink-accent);
     color: var(--ink-accent-fg);
@@ -669,53 +1379,12 @@
     .ink-select-trigger:focus-visible,
     .ink-toolbar input:focus-visible,
     .ink-thread-actions button:focus-visible,
-    .ink-suggestion-actions button:focus-visible,
     .ink-thread-reply textarea:focus-visible
   ) {
     outline: 2px solid var(--ink-ring);
     outline-offset: 2px;
   }
 
-  :where(.ink-suggestion-reason, .ink-suggestion-explanation) {
-    margin: 0;
-  }
-
-  :where(.ink-suggestion-explanation) {
-    margin-top: 0.25rem;
-    color: var(--ink-muted-fg);
-  }
-
-  /* The label text keeps the body colour for contrast; the confidence colour is a swatch. */
-  :where(.ink-suggestion-confidence) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    margin-left: 0.5rem;
-    color: var(--ink-fg);
-    font-size: 0.75rem;
-    text-transform: capitalize;
-  }
-
-  :where(.ink-suggestion-confidence)::before {
-    content: '';
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    background: currentColor;
-  }
-
-  :where(.ink-suggestion-confidence[data-confidence='low'])::before {
-    background: var(--ink-suggestion-low);
-  }
-
-  :where(.ink-suggestion-confidence[data-confidence='medium'])::before {
-    background: var(--ink-suggestion-medium);
-  }
-
-  :where(.ink-suggestion-confidence[data-confidence='high'])::before {
-    background: var(--ink-suggestion-high);
-  }
-
   @media (prefers-reduced-motion: no-preference) {
     :where(.ink-annotation) {
       transition: outline-color 120ms ease;