@rathkit/rte-ui 0.0.0 → 0.1.0-alpha.3

package/README.md

@@ -1,11 +1,39 @@
 # @rathkit/rte-ui
 
-This version is an empty placeholder. It holds no code.
+> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
 
-@rathkit/rte-ui is in alpha. Install the alpha with the `next` tag:
+The styled interface: a toolbar, menus, dialogs, find bar, status line and tooltips on the headless layer, themeable by preset, tokens, icons, classes and messages.
+
+## Install
 
 ```sh
-npm install @rathkit/rte-ui@next
+npm install @rathkit/rte-ui@next @rathkit/rte-core@next @rathkit/rte-headless@next @rathkit/rte-themes@next @rathkit/rte-icons@next
+```
+
+This package has no dependencies of its own. It works with `@rathkit/rte-core`, `@rathkit/rte-headless`, `@rathkit/rte-themes`, `@rathkit/rte-icons` (peer dependencies, all optional so that npm installs nothing you did not ask for), so install the ones you use alongside it.
+
+## Example
+
+```js
+import { createEditor } from "@rathkit/rte-core/standard";
+import { createStandardUi } from "@rathkit/rte-ui/standard";
+import "@rathkit/rte-ui/base.css";
+import "@rathkit/rte-themes/light.css";
+
+const root = document.createElement("div");
+document.body.append(root);
+const surface = document.createElement("div");
+surface.setAttribute("aria-label", "Body");
+
+const editor = createEditor({ element: surface, html: "<p>Hello</p>" });
+editor.subscribe(() => console.log(editor.getHtml()));
+createStandardUi(editor, { root, style: { theme: "light" } });
 ```
 
-About the project: https://rathkit.com
+## More
+
+Documentation: <https://rathkit.com>. Source and issues: <https://github.com/rathkit/rte>. What is checked: [SUPPORT.md](https://github.com/rathkit/rte/blob/main/docs/SUPPORT.md). Changes: [CHANGELOG.md](https://github.com/rathkit/rte/blob/main/CHANGELOG.md). How a release is verified: [VERIFY.md](https://github.com/rathkit/rte/blob/main/docs/VERIFY.md).
+
+## License
+
+[Apache-2.0](LICENSE)

package/css/base.css

@@ -0,0 +1,264 @@
+/* @rathkit/rte-ui base styles. Everything is in cascade layers, so any CSS you write outside a layer wins without a specificity fight.
+   Parts are addressed by data-rk-part, never by class; the only class is .rk-root, which scopes everything to one editor.
+   Colors, sizes and fonts come from the --rk-* tokens (see @rathkit/rte-themes). Nothing here reaches outside .rk-root. */
+@layer rathkit.defaults, rathkit.base;
+
+/* Light values, used only when no theme is chosen, so the editor is never unstyled. A theme's tokens replace them. */
+@layer rathkit.defaults {
+  .rk-root:where(:not([data-rk-theme])) {
+    --rk-bg: #ffffff; --rk-surface: #f4f6f9; --rk-surface-raised: #ffffff; --rk-fg: #14181f; --rk-fg-muted: #505b6b;
+    --rk-border: #78849a; --rk-border-subtle: #d4dae3; --rk-accent: #17408b; --rk-accent-fg: #ffffff; --rk-accent-subtle: #e3ecfa;
+    --rk-danger: #b3261e; --rk-selection-bg: #cddffa; --rk-control-hover: #e6ebf3; --rk-control-active: #d3dcec;
+    --rk-brand: #b9812a; --rk-brand-text: #86590f; --rk-focus-color: #17408b;
+    --rk-space-1: 4px; --rk-space-2: 8px; --rk-space-3: 12px; --rk-space-4: 16px; --rk-control-size: 32px;
+    --rk-radius-s: 4px; --rk-radius-m: 8px; --rk-border-width: 1px; --rk-focus-width: 2px; --rk-focus-offset: 2px;
+    --rk-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rk-font-content: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --rk-font-heading: system-ui, sans-serif; --rk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --rk-font-size: 16px; --rk-line-height: 1.55; --rk-motion-duration: 120ms;
+    --rk-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
+    color-scheme: light;
+  }
+}
+
+@layer rathkit.base {
+  .rk-root {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    font: var(--rk-font-size) / var(--rk-line-height) var(--rk-font-ui);
+    color: var(--rk-fg);
+    background: var(--rk-bg);
+    border: var(--rk-border-width) solid var(--rk-border);
+    border-radius: var(--rk-radius-m);
+  }
+  .rk-root *, .rk-root *::before, .rk-root *::after { box-sizing: inherit; }
+
+  /* ---- toolbar ---- */
+  [data-rk-part="toolbar"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--rk-space-1);
+    padding: var(--rk-space-2);
+    background: var(--rk-surface);
+    border-bottom: var(--rk-border-width) solid var(--rk-border);
+    border-radius: calc(var(--rk-radius-m) - var(--rk-border-width)) calc(var(--rk-radius-m) - var(--rk-border-width)) 0 0;
+  }
+  [data-rk-part="separator"] {
+    align-self: stretch;
+    width: var(--rk-border-width);
+    margin-inline: var(--rk-space-1);
+    background: var(--rk-border-subtle);
+  }
+  [data-rk-part="button"],
+  [data-rk-part="select"] {
+    min-width: var(--rk-control-size);
+    height: var(--rk-control-size);
+    margin: 0;
+    padding: 0 var(--rk-space-2);
+    font: inherit;
+    color: var(--rk-fg);
+    background: transparent;
+    border: var(--rk-border-width) solid transparent;
+    border-radius: var(--rk-radius-s);
+    cursor: pointer;
+    transition: background-color calc(var(--rk-motion-duration) * var(--rk-motion-scale, 1)) ease;
+  }
+  [data-rk-part="button"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--rk-space-1); }
+  [data-rk-part="select"] { background: var(--rk-surface-raised); border-color: var(--rk-border); }
+  [data-rk-part="button"]:hover:not([aria-disabled="true"]),
+  [data-rk-part="select"]:hover:not([aria-disabled="true"]) { background: var(--rk-control-hover); }
+  [data-rk-part="button"]:active:not([aria-disabled="true"]) { background: var(--rk-control-active); }
+  /* On: a tint, an accent border all round, and a thicker bar underneath, so it never depends on color alone. */
+  [data-rk-part="button"][aria-pressed="true"] {
+    color: var(--rk-accent);
+    background: var(--rk-accent-subtle);
+    border-color: var(--rk-accent);
+    border-bottom-width: 3px;
+  }
+  [data-rk-part="button"][aria-disabled="true"],
+  [data-rk-part="select"][aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+  [data-rk-part="icon"] { display: inline-flex; width: 20px; height: 20px; }
+  [data-rk-part="icon"] svg { width: 100%; height: 100%; }
+
+  /* ---- menus: a button that opens a list of commands ---- */
+  [data-rk-part="menu-host"] { position: relative; display: inline-flex; }
+  [data-rk-part="menu"] {
+    position: absolute; z-index: 10; inset-block-start: calc(100% + var(--rk-space-1)); inset-inline-start: 0;
+    min-width: 14rem; padding: var(--rk-space-1);
+    background: var(--rk-surface-raised); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-m);
+    box-shadow: var(--rk-shadow-popover); max-height: min(22rem, 60vh); overflow-y: auto;
+  }
+  [data-rk-part="menu"][hidden] { display: none; }
+  [data-rk-part="menu-item"] {
+    display: flex; align-items: center; justify-content: space-between; gap: var(--rk-space-4); width: 100%; min-height: var(--rk-control-size);
+    margin: 0; padding: 0 var(--rk-space-2) 0 calc(var(--rk-space-2) + 1.4em); font: inherit; text-align: start; color: var(--rk-fg);
+    background: transparent; border: 0; border-radius: var(--rk-radius-s); cursor: pointer; position: relative;
+  }
+  [data-rk-part="menu-item"]:hover:not([aria-disabled="true"]), [data-rk-part="menu-item"]:focus-visible { background: var(--rk-control-hover); }
+  [data-rk-part="menu-item"][aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+  /* A switched-on entry has a check mark in front of it, so it never depends on color alone. */
+  [data-rk-part="menu-item"][aria-checked="true"]::before { content: "\2713"; position: absolute; inset-inline-start: var(--rk-space-2); font-weight: 700; color: var(--rk-accent); }
+  /* A sample of a color, with a border so it shows on any background (a white swatch on white, say). */
+  [data-rk-part="swatch"] { flex: none; width: 1em; height: 1em; margin-inline-end: var(--rk-space-2); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-s); }
+  [data-rk-part="menu-item"]:has([data-rk-part="swatch"]) { justify-content: flex-start; }
+  [data-rk-part="menu-item"]:has([data-rk-part="swatch"]) [data-rk-part="menu-keys"] { margin-inline-start: auto; }
+  [data-rk-part="menu-keys"] { color: var(--rk-fg-muted); font-size: 0.85em; }
+  [data-rk-part="menu-separator"] { height: var(--rk-border-width); margin: var(--rk-space-1) var(--rk-space-2); background: var(--rk-border-subtle); }
+
+  /* ---- tooltip: the control's name and key, shown near it on hover and keyboard focus ---- */
+  [data-rk-part="tooltip"] {
+    position: absolute; z-index: 20; max-width: 20rem; padding: var(--rk-space-1) var(--rk-space-2); font-size: 0.85em; line-height: 1.35;
+    color: var(--rk-bg); background: var(--rk-fg); border-radius: var(--rk-radius-s); box-shadow: var(--rk-shadow-popover);
+    white-space: nowrap; pointer-events: auto;
+  }
+  [data-rk-part="tooltip"][hidden] { display: none; }
+
+  .rk-root :focus-visible {
+    outline: var(--rk-focus-width) solid var(--rk-focus-color);
+    outline-offset: var(--rk-focus-offset);
+  }
+
+  /* ---- the writing area ---- */
+  [data-rk-part="content"] {
+    padding: var(--rk-space-3) var(--rk-space-4);
+    background: var(--rk-bg);
+    border-radius: 0 0 var(--rk-radius-m) var(--rk-radius-m);
+    font-family: var(--rk-font-content);
+  }
+  [data-rk-part="content"] > :first-child { outline: none; min-height: 8em; }
+  [data-rk-part="content"] ::selection { background: var(--rk-selection-bg); color: var(--rk-fg); }
+  /* The hint shown while the document is empty (the editor sets data-rk-empty and --rk-placeholder). */
+  [data-rk-part="content"] > [data-rk-empty] > :first-child::before { content: var(--rk-placeholder, none); color: var(--rk-fg-muted); pointer-events: none; }
+  [data-rk-part="content"] > :first-child > :first-child { margin-top: 0; }
+  [data-rk-part="content"] > :first-child > :last-child { margin-bottom: 0; }
+  [data-rk-part="content"] p { margin: 0 0 0.75em; }
+  [data-rk-part="content"] :is(h1, h2, h3, h4, h5, h6) { margin: 1.1em 0 0.4em; font-family: var(--rk-font-heading); line-height: 1.25; font-weight: 700; }
+  [data-rk-part="content"] h1 { font-size: 1.9em; }
+  [data-rk-part="content"] h2 { font-size: 1.5em; }
+  [data-rk-part="content"] h3 { font-size: 1.25em; }
+  [data-rk-part="content"] h4 { font-size: 1.1em; }
+  [data-rk-part="content"] :is(h5, h6) { font-size: 1em; }
+  [data-rk-part="content"] :is(ul, ol) { margin: 0 0 0.75em; padding-inline-start: 1.6em; }
+  [data-rk-part="content"] :is(ul, ol) :is(ul, ol) { margin-bottom: 0; }
+  /* A task's checkbox is a glyph in front of its text; clicking it ticks the task. */
+  [data-rk-part="content"] li[data-rk-task] { list-style: none; }
+  [data-rk-part="content"] [data-rte-check] { display: inline-block; margin-inline-end: 0.4em; cursor: pointer; user-select: none; font-size: 1.1em; line-height: 1; color: var(--rk-accent); }
+  [data-rk-part="content"] li[data-rk-task="open"] > [data-rte-check] { color: var(--rk-fg-muted); }
+  [data-rk-part="content"] dt { font-weight: 700; }
+  [data-rk-part="content"] dd { margin-inline-start: 1.6em; }
+  [data-rk-part="content"] blockquote { margin: 0 0 0.75em; padding-inline-start: var(--rk-space-3); border-inline-start: 3px solid var(--rk-brand); color: var(--rk-fg-muted); }
+  [data-rk-part="content"] pre { margin: 0 0 0.75em; padding: var(--rk-space-2) var(--rk-space-3); font-family: var(--rk-font-mono); font-size: 0.9em; background: var(--rk-surface); border: var(--rk-border-width) solid var(--rk-border-subtle); border-radius: var(--rk-radius-s); overflow-x: auto; }
+  [data-rk-part="content"] code { font-family: var(--rk-font-mono); font-size: 0.9em; padding: 0.1em 0.3em; background: var(--rk-surface); border-radius: var(--rk-radius-s); }
+  [data-rk-part="content"] pre code { padding: 0; background: none; }
+  [data-rk-part="content"] a { color: var(--rk-accent); text-decoration: underline; text-underline-offset: 0.15em; }
+  [data-rk-part="content"] hr { border: 0; border-top: var(--rk-border-width) solid var(--rk-border); margin: 1em 0; }
+  [data-rk-part="content"] img { max-width: 100%; height: auto; }
+  /* An image from another site that the host has not allowed to load: a dashed box in its place, so it is plain that something is there. */
+  [data-rk-part="content"] img[data-rte-remote-src] { display: inline-block; min-width: 6em; min-height: 3em; vertical-align: middle; border: 2px dashed var(--rk-border); border-radius: var(--rk-radius-s); background: var(--rk-surface); }
+  [data-rk-part="content"] table { border-collapse: collapse; margin: 0 0 0.75em; }
+  [data-rk-part="content"] :is(td, th) { padding: var(--rk-space-1) var(--rk-space-2); border: var(--rk-border-width) solid var(--rk-border); vertical-align: top; min-width: 2em; }
+  [data-rk-part="content"] :is(td, th) > p { margin: 0; }
+  [data-rk-part="content"] :is(td, th) > p + p { margin-top: 0.5em; }
+  [data-rk-part="content"] th { background: var(--rk-surface); text-align: start; }
+  /* Cells a selection runs across (the view marks them): a tint and an outline, so it is not color alone. */
+  [data-rk-part="content"] [data-rk-cell-selected] { background: var(--rk-selection-bg); outline: 2px solid var(--rk-accent); outline-offset: -2px; }
+  [data-rk-part="content"] img[data-rk-image-selected] { outline: 2px solid var(--rk-accent); outline-offset: 2px; }
+  /* Focus inside the writing area shows on the whole editor, not as a box around the text. */
+  .rk-root:focus-within { outline: var(--rk-focus-width) solid var(--rk-focus-color); outline-offset: var(--rk-focus-offset); }
+  .rk-root:focus-within [data-rk-part="content"] :focus-visible,
+  .rk-root [data-rk-part="content"] :focus-visible { outline: none; }
+
+  /* ---- HTML source view: the text box takes the place of the writing area ---- */
+  [data-rk-part="content"][data-rk-source] > :not([data-rk-part="source"]) { display: none; }
+  [data-rk-part="source"] {
+    display: block; width: 100%; min-height: 14em; margin: 0; padding: 0; font: 0.9em / 1.5 var(--rk-font-mono); color: var(--rk-fg);
+    background: var(--rk-bg); border: 0; outline: none; resize: vertical; tab-size: 2;
+  }
+  [data-rk-part="source"][hidden] { display: none; }
+
+  /* ---- keyboard shortcuts list ---- */
+  [data-rk-part="shortcuts"] { width: 100%; border-collapse: collapse; margin-bottom: var(--rk-space-2); }
+  [data-rk-part="shortcuts"] :is(th, td) { padding: var(--rk-space-1) var(--rk-space-2); text-align: start; border-bottom: var(--rk-border-width) solid var(--rk-border-subtle); }
+  [data-rk-part="shortcuts"] kbd { font: 0.9em var(--rk-font-mono); padding: 0.1em 0.4em; background: var(--rk-surface); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-s); }
+
+  /* ---- find and replace ---- */
+  [data-rk-part="findbar"] { padding: var(--rk-space-2); background: var(--rk-surface); border-bottom: var(--rk-border-width) solid var(--rk-border); }
+  [data-rk-part="findbar"][hidden] { display: none; }
+  [data-rk-part="find-line"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-space-1); }
+  [data-rk-part="find-line"] + [data-rk-part="find-line"] { margin-top: var(--rk-space-1); }
+  [data-rk-part="find-row"] { display: flex; align-items: center; gap: var(--rk-space-2); flex: 1 1 14rem; }
+  [data-rk-part="find-label"] { min-width: 6.5em; font-weight: 600; }
+  [data-rk-part="find-field"] {
+    flex: 1; min-width: 6em; height: var(--rk-control-size); padding: 0 var(--rk-space-2); font: inherit; color: var(--rk-fg);
+    background: var(--rk-bg); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-s);
+  }
+  [data-rk-part="find-count"] { min-width: 5.5em; color: var(--rk-fg-muted); font-size: 0.9em; }
+  [data-rk-part="findbar"] [aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+
+  /* ---- status line ---- */
+  [data-rk-part="status"] {
+    padding: var(--rk-space-1) var(--rk-space-3); font-size: 0.85em; color: var(--rk-fg-muted); background: var(--rk-surface);
+    border-top: var(--rk-border-width) solid var(--rk-border-subtle); border-radius: 0 0 calc(var(--rk-radius-m) - var(--rk-border-width)) calc(var(--rk-radius-m) - var(--rk-border-width));
+  }
+  [data-rk-part="content"]:has(+ [data-rk-part="status"]) { border-radius: 0; }
+
+  /* ---- dialog ---- */
+  [data-rk-part="dialog"] {
+    width: min(26rem, calc(100vw - 2 * var(--rk-space-4)));
+    padding: var(--rk-space-4);
+    color: var(--rk-fg);
+    background: var(--rk-surface-raised);
+    border: var(--rk-border-width) solid var(--rk-border);
+    border-radius: var(--rk-radius-m);
+    box-shadow: var(--rk-shadow-popover);
+    font: var(--rk-font-size) / var(--rk-line-height) var(--rk-font-ui);
+  }
+  [data-rk-part="dialog"]::backdrop { background: rgb(0 0 0 / 0.45); }
+  [data-rk-part="dialog-title"] { margin: 0 0 var(--rk-space-3); font: 700 1.15em / 1.3 var(--rk-font-heading); }
+  [data-rk-part="field-label"] { display: block; margin-bottom: var(--rk-space-1); font-weight: 600; }
+  [data-rk-part="field"] {
+    display: block; width: 100%; height: var(--rk-control-size); padding: 0 var(--rk-space-2); font: inherit; color: var(--rk-fg);
+    background: var(--rk-bg); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-s);
+  }
+  [data-rk-part="field"][aria-invalid="true"] { border-color: var(--rk-danger); border-width: 2px; }
+  [data-rk-part="field-check"] { display: flex; align-items: center; gap: var(--rk-space-2); margin-top: var(--rk-space-2); }
+  [data-rk-part="field-check"] [data-rk-part="field"] { width: 1.1em; height: 1.1em; padding: 0; accent-color: var(--rk-accent); }
+  [data-rk-part="field-check"] [data-rk-part="field-label"] { display: inline; margin: 0; font-weight: 400; }
+  [data-rk-part="field-error"] { display: block; min-height: 1.4em; margin-top: var(--rk-space-1); color: var(--rk-danger); font-size: 0.9em; }
+  [data-rk-part="actions"] { display: flex; justify-content: flex-end; gap: var(--rk-space-2); margin-top: var(--rk-space-3); }
+  [data-rk-part="action"] {
+    min-width: 5rem; height: var(--rk-control-size); padding: 0 var(--rk-space-3); font: inherit; font-weight: 600; color: var(--rk-fg);
+    background: var(--rk-surface-raised); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-s); cursor: pointer;
+  }
+  [data-rk-part="action"][data-primary] { color: var(--rk-accent-fg); background: var(--rk-accent); border-color: var(--rk-accent); }
+
+  /* Matches painted by the page's highlight registry (nothing in the document changes). Dark text on a strong tint reads on any theme. */
+  ::highlight(rk-find) { background-color: #ffe08a; color: #14181f; }
+  ::highlight(rk-find-current) { background-color: #ff9632; color: #14181f; }
+
+  @media (prefers-reduced-motion: reduce) { .rk-root { --rk-motion-scale: 0; } }
+
+  /* Forced colors (Windows high contrast): use the user's colors, and real borders and outlines, which survive where shadows and tints do not. */
+  @media (forced-colors: active) {
+    .rk-root { border-color: CanvasText; }
+    [data-rk-part="toolbar"] { border-bottom-color: CanvasText; }
+    [data-rk-part="button"], [data-rk-part="select"], [data-rk-part="field"], [data-rk-part="action"] { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
+    [data-rk-part="button"][aria-pressed="true"] { border-color: Highlight; color: HighlightText; background: Highlight; border-bottom-width: 4px; }
+    [data-rk-part="button"][aria-disabled="true"], [data-rk-part="select"][aria-disabled="true"] { color: GrayText; border-color: GrayText; opacity: 1; }
+    [data-rk-part="content"] a { color: LinkText; }
+    [data-rk-part="content"] [data-rk-cell-selected] { outline-color: Highlight; background: Canvas; }
+    [data-rk-part="content"] img[data-rk-image-selected] { outline-color: Highlight; }
+    .rk-root :focus-visible, .rk-root:focus-within { outline-color: Highlight; }
+    [data-rk-part="separator"], [data-rk-part="menu-separator"] { background: CanvasText; }
+    [data-rk-part="menu"] { border-color: CanvasText; background: Canvas; }
+    ::highlight(rk-find) { background-color: Mark; color: MarkText; }
+    ::highlight(rk-find-current) { background-color: Highlight; color: HighlightText; }
+    [data-rk-part="find-field"] { border-color: ButtonText; }
+    [data-rk-part="tooltip"] { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
+    [data-rk-part="menu-item"] { color: ButtonText; }
+    [data-rk-part="menu-item"]:hover:not([aria-disabled="true"]), [data-rk-part="menu-item"]:focus-visible { background: Highlight; color: HighlightText; }
+    [data-rk-part="menu-item"][aria-disabled="true"] { color: GrayText; opacity: 1; }
+  }
+}

package/dist/findbar.d.ts

@@ -0,0 +1,24 @@
+import type { UiEditor } from "./types.ts";
+export interface FindBarOptions {
+    readonly editor: UiEditor & {
+        rangeFor?(from: {
+            path: number[];
+            offset: number;
+        }, to: {
+            path: number[];
+            offset: number;
+        }): Range | null;
+    };
+    /** Makes an element a named part of the interface. */
+    readonly part: <E extends HTMLElement>(el: E, name: string) => E;
+    readonly message: (key: string, fallback?: string, values?: Record<string, string>) => string;
+    readonly icon: (name: string) => string | (() => Node) | undefined;
+    readonly announce: (message: string) => void;
+}
+export interface FindBar {
+    readonly element: HTMLElement;
+    /** Words may have changed (a different language, say): write them again. */
+    refresh(): void;
+    destroy(): void;
+}
+export declare function createFindBar(options: FindBarOptions): FindBar;

package/dist/findbar.js

@@ -0,0 +1,187 @@
+import { setIcon } from "./icon.js";
+const registry = () => globalThis.CSS?.highlights;
+const HighlightCtor = () => globalThis.Highlight;
+const MOST_PAINTED = 2000;
+export function createFindBar(options) {
+    const { editor, part, message } = options;
+    let counter = 0;
+    const bar = part(document.createElement("div"), "findbar");
+    bar.setAttribute("role", "search");
+    bar.hidden = true;
+    const field = (label, name) => {
+        const id = `rk-find-${++counter}`;
+        const wrap = part(document.createElement("div"), "find-row");
+        const text = part(document.createElement("label"), "find-label");
+        text.htmlFor = id;
+        text.textContent = label;
+        const input = part(document.createElement("input"), "find-field");
+        input.id = id;
+        input.type = "text";
+        input.name = name;
+        input.autocomplete = "off";
+        input.spellcheck = false;
+        wrap.append(text, input);
+        return { wrap, input, text };
+    };
+    const iconButton = (name, label) => {
+        const b = part(document.createElement("button"), "button");
+        b.type = "button";
+        const i = part(document.createElement("span"), "icon");
+        i.setAttribute("aria-hidden", "true");
+        if (setIcon(i, options.icon(name)))
+            b.appendChild(i);
+        else
+            b.textContent = label;
+        b.setAttribute("aria-label", label);
+        b.setAttribute("data-rk-tip", label);
+        return b;
+    };
+    const textButton = (label) => {
+        const b = part(document.createElement("button"), "action");
+        b.type = "button";
+        b.textContent = label;
+        return b;
+    };
+    const find = field("", "find");
+    const replace = field("", "replace");
+    const count = part(document.createElement("span"), "find-count");
+    const previous = iconButton("chevron-up", "");
+    const next = iconButton("chevron-down", "");
+    const matchCase = part(document.createElement("button"), "button");
+    matchCase.type = "button";
+    matchCase.textContent = "Aa";
+    const wholeWord = part(document.createElement("button"), "button");
+    wholeWord.type = "button";
+    wholeWord.textContent = "ab";
+    const replaceOne = textButton("");
+    const replaceAll = textButton("");
+    const close = iconButton("close", "");
+    const first = part(document.createElement("div"), "find-line");
+    first.append(find.wrap, previous, next, matchCase, wholeWord, count, close);
+    const second = part(document.createElement("div"), "find-line");
+    second.append(replace.wrap, replaceOne, replaceAll);
+    bar.append(first, second);
+    const words = () => {
+        find.text.textContent = message("find.find");
+        replace.text.textContent = message("find.replaceWith");
+        for (const [el, key] of [[previous, "find.previous"], [next, "find.next"], [close, "find.close"], [matchCase, "find.matchCase"], [wholeWord, "find.wholeWord"]]) {
+            el.setAttribute("aria-label", message(key));
+            el.setAttribute("data-rk-tip", message(key));
+        }
+        replaceOne.textContent = message("find.replace");
+        replaceAll.textContent = message("find.replaceAll");
+    };
+    words();
+    const info = () => editor.commands.state("find.set").value;
+    let lastOpens = -1;
+    let lastCount = "";
+    let announceTimer;
+    const paint = (state) => {
+        const highlights = registry();
+        const Highlight = HighlightCtor();
+        if (!highlights || !Highlight || !editor.rangeFor)
+            return;
+        if (!state.open || state.matches.length === 0) {
+            highlights.delete("rk-find");
+            highlights.delete("rk-find-current");
+            return;
+        }
+        const ranges = [];
+        let current;
+        state.matches.slice(0, MOST_PAINTED).forEach((m, i) => {
+            const range = editor.rangeFor?.({ path: [...m.path], offset: m.from }, { path: [...m.path], offset: m.to });
+            if (!range)
+                return;
+            if (i === state.index)
+                current = range;
+            else
+                ranges.push(range);
+        });
+        highlights.set("rk-find", new Highlight(...ranges));
+        if (current)
+            highlights.set("rk-find-current", new Highlight(current));
+        else
+            highlights.delete("rk-find-current");
+    };
+    const render = () => {
+        const state = info();
+        bar.hidden = !state.open;
+        if (!state.open) {
+            paint(state);
+            lastOpens = state.opens;
+            return;
+        }
+        if (state.query !== find.input.value)
+            find.input.value = state.query;
+        matchCase.setAttribute("aria-pressed", String(state.matchCase));
+        wholeWord.setAttribute("aria-pressed", String(state.wholeWord));
+        const text = state.query === "" ? "" : state.matches.length === 0 ? message("find.none")
+            : state.index >= 0 ? message("find.count", "", { current: String(state.index + 1), total: String(state.matches.length) })
+                : message("find.total", "", { total: String(state.matches.length) });
+        count.textContent = text;
+        if (text !== lastCount) {
+            lastCount = text;
+            if (announceTimer)
+                clearTimeout(announceTimer);
+            if (text !== "")
+                announceTimer = setTimeout(() => options.announce(text), 500);
+        }
+        for (const b of [previous, next, replaceOne, replaceAll])
+            b.setAttribute("aria-disabled", String(state.matches.length === 0));
+        paint(state);
+        if (state.opens !== lastOpens) {
+            lastOpens = state.opens;
+            find.input.focus();
+            find.input.select();
+        }
+        if (state.index >= 0 && editor.rangeFor) {
+            const m = state.matches[state.index];
+            const at = m && editor.rangeFor({ path: [...m.path], offset: m.from }, { path: [...m.path], offset: m.to });
+            (at?.startContainer instanceof Element ? at.startContainer : at?.startContainer.parentElement)?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+        }
+    };
+    const run = (name, arg) => { editor.commands.run(name, arg); };
+    const onFind = () => run("find.set", { query: find.input.value });
+    find.input.addEventListener("input", onFind);
+    find.input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            run(e.shiftKey ? "find.previous" : "find.next");
+        }
+    });
+    replace.input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            run("find.replace", { with: replace.input.value });
+        }
+    });
+    bar.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            run("find.close");
+        }
+    });
+    previous.addEventListener("click", () => run("find.previous"));
+    next.addEventListener("click", () => run("find.next"));
+    matchCase.addEventListener("click", () => run("find.set", { matchCase: matchCase.getAttribute("aria-pressed") !== "true" }));
+    wholeWord.addEventListener("click", () => run("find.set", { wholeWord: wholeWord.getAttribute("aria-pressed") !== "true" }));
+    replaceOne.addEventListener("click", () => run("find.replace", { with: replace.input.value }));
+    replaceAll.addEventListener("click", () => run("find.replaceAll", { with: replace.input.value }));
+    close.addEventListener("click", () => run("find.close"));
+    const stop = editor.commands.subscribe("find.set", render);
+    render();
+    return {
+        element: bar,
+        refresh() { words(); render(); },
+        destroy() {
+            stop();
+            if (announceTimer)
+                clearTimeout(announceTimer);
+            const highlights = registry();
+            highlights?.delete("rk-find");
+            highlights?.delete("rk-find-current");
+            bar.remove();
+        },
+    };
+}

package/dist/icon.d.ts

@@ -0,0 +1,2 @@
+/** True when something was drawn. */
+export declare function setIcon(target: HTMLElement, source: string | (() => Node) | undefined): boolean;

package/dist/icon.js

@@ -0,0 +1,25 @@
+const cache = new Map();
+function parse(svg) {
+    const hit = cache.get(svg);
+    if (hit !== undefined)
+        return hit;
+    const template = document.createElement("template");
+    template.innerHTML = svg;
+    const ok = template.content.childElementCount === 1 && template.content.firstElementChild?.localName === "svg" && !template.content.querySelector("script, foreignObject, [onload], [onclick], [onerror]");
+    const fragment = ok ? template.content : null;
+    cache.set(svg, fragment);
+    return fragment;
+}
+export function setIcon(target, source) {
+    if (source === undefined) {
+        target.replaceChildren();
+        return false;
+    }
+    const node = typeof source === "function" ? source() : parse(source)?.cloneNode(true);
+    if (!node) {
+        target.replaceChildren();
+        return false;
+    }
+    target.replaceChildren(node);
+    return true;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createUi } from "./ui.ts";
+export { DEFAULT_MESSAGES } from "./messages.ts";
+export type { MessageKey, PartContext, PartName, StyleProvider, Ui, UiEditor, UiOptions } from "./types.ts";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createUi } from "./ui.js";
+export { DEFAULT_MESSAGES } from "./messages.js";

package/dist/messages.d.ts

@@ -0,0 +1,3 @@
+import type { MessageKey } from "./types.ts";
+export declare const DEFAULT_MESSAGES: Readonly<Record<string, string>>;
+export declare function text(table: Partial<Record<MessageKey, string>> | undefined, key: MessageKey, fallback?: string, values?: Record<string, string>): string;

package/dist/messages.js

@@ -0,0 +1,34 @@
+export const DEFAULT_MESSAGES = {
+    "toolbar.label": "Formatting",
+    "dialog.ok": "OK",
+    "dialog.cancel": "Cancel",
+    "field.required": "{label} is required.",
+    "field.url": "{label} must be a web, mail or phone address.",
+    "toggle.on": "{label} on",
+    "toggle.off": "{label} off",
+    "status.word": "{count} word",
+    "status.words": "{count} words",
+    "status.characters": "{count} characters",
+    "status.selection": "{selected} of {total} words",
+    "source.label": "HTML source",
+    "shortcuts.title": "Keyboard shortcuts",
+    "shortcuts.action": "Action",
+    "shortcuts.keys": "Keys",
+    "shortcuts.close": "Close",
+    "find.find": "Find",
+    "find.replaceWith": "Replace with",
+    "find.previous": "Previous match",
+    "find.next": "Next match",
+    "find.close": "Close find and replace",
+    "find.matchCase": "Match case",
+    "find.wholeWord": "Whole word",
+    "find.replace": "Replace",
+    "find.replaceAll": "Replace all",
+    "find.none": "No matches",
+    "find.count": "{current} of {total}",
+    "find.total": "{total} matches",
+};
+export function text(table, key, fallback = "", values = {}) {
+    const raw = table?.[key] ?? DEFAULT_MESSAGES[key] ?? fallback;
+    return raw.replace(/\{(\w+)\}/g, (_, name) => values[name] ?? "");
+}

package/dist/shortcuts.d.ts

@@ -0,0 +1,14 @@
+import type { UiEditor } from "./types.ts";
+export interface ShortcutsOptions {
+    readonly editor: UiEditor;
+    readonly root: HTMLElement;
+    readonly part: <E extends HTMLElement>(el: E, name: string) => E;
+    readonly message: (key: string) => string;
+}
+export interface Shortcuts {
+    open(opener: HTMLElement): void;
+    /** Words may have changed: write them again. */
+    refresh(): void;
+    destroy(): void;
+}
+export declare function createShortcuts(options: ShortcutsOptions): Shortcuts;