@openleaf-editor/ui 0.1.0-beta.0

package/dist/skins.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Skins.
+ *
+ * ## What a skin is here, and why it is not what TinyMCE means
+ *
+ * TinyMCE ships skins as directories of compiled CSS that replace the editor's
+ * stylesheet wholesale. That is powerful and it is also why upgrading TinyMCE
+ * can break a custom skin: the skin knows the editor's internal class names, so
+ * every internal rename is a breaking change for anyone who wrote one.
+ *
+ * A skin here is **a block of custom properties and nothing else**. It cannot
+ * reference an internal class, so it cannot be broken by an internal rename --
+ * which is the whole reason the token API exists. The cost is that a skin cannot
+ * restructure the toolbar; it can only restyle it. That trade is deliberate: a
+ * theme that survives upgrades is worth more than one that can move a button.
+ *
+ * Anything a skin can do, an integrator can do inline by setting the same
+ * properties. Skins exist so a look can be *named, shared and switched*, not to
+ * unlock capability.
+ *
+ * ## The one thing a skin declares that is not a property
+ *
+ * `scheme`. Some of what an editor looks like is decided by the browser rather
+ * than by us -- the popup a native `select` opens, scrollbar chrome, the syntax
+ * palette in the opt-in highlighting bundle -- and none of it reads custom
+ * properties. Those follow the *colour scheme*, so a skin that replaces the
+ * surface has to say which scheme its palette belongs to or they keep following
+ * the visitor's system and contradict it. That is one declared word, not a
+ * selector, so the guarantee above is intact.
+ */
+export interface Skin {
+    /** Used in the `skin` attribute and `applySkin`. */
+    name: string;
+    /** Shown in a picker. */
+    label: string;
+    /** Custom-property declarations. No selectors -- they are scoped for you. */
+    tokens: string;
+    /**
+     * Which world this skin's palette lives in. Omit for a skin that does not
+     * set `--openleaf-color-surface` -- a density skin, or one that only brands
+     * the accent.
+     *
+     * A skin that sets the surface has taken the palette over: it looks the same
+     * whether the visitor's system is light or dark, which is the point, and it
+     * therefore also decides which world everything keyed off the *scheme* rather
+     * than off a token belongs to. That is not a small list -- syntax
+     * highlighting, native `select` popups, scrollbars, form control chrome --
+     * and none of it can be expressed as a custom property.
+     *
+     * Undeclared, those follow the system instead, which is how a light skin ends
+     * up with a dark code block on a machine set to dark: exactly the bug this
+     * field exists to make unrepresentable.
+     */
+    scheme?: 'light' | 'dark';
+}
+/**
+ * Built-in skins.
+ *
+ * Each sets the full palette rather than patching a few values, so a skin looks
+ * the same whether the visitor's system is in light or dark mode. A skin that
+ * only overrode two tokens would inherit the rest from whichever scheme happened
+ * to be active, which is how a carefully chosen palette ends up with one
+ * unreadable colour on somebody else's laptop.
+ */
+export declare const BUILT_IN_SKINS: readonly Skin[];
+/**
+ * Add a skin, or replace one by name.
+ *
+ * ```ts
+ * registerSkin({
+ *   name: 'acme',
+ *   label: 'Acme brand',
+ *   tokens: '--openleaf-color-accent: #c2185b; --openleaf-radius: 12px;',
+ * })
+ * ```
+ *
+ * A skin that replaces the surface must also say which world it is in, or the
+ * parts of the editor that cannot be reached by a custom property -- syntax
+ * colours, native widget chrome -- keep following the visitor's system and end
+ * up contradicting it:
+ *
+ * ```ts
+ * registerSkin({
+ *   name: 'acme-dark',
+ *   label: 'Acme dark',
+ *   scheme: 'dark',
+ *   tokens: '--openleaf-color-surface: #101418; --openleaf-color-text: #e8eef4;',
+ * })
+ * ```
+ */
+export declare function registerSkin(skin: Skin, doc?: Document): void;
+export declare function availableSkins(): readonly Skin[];
+/** Ensure the built-in skins are available. Idempotent. */
+export declare function ensureSkins(doc?: Document): void;
+/**
+ * Apply a skin to one editor, or clear it with null.
+ *
+ * Per element rather than per page: a CMS with an article body and a comment box
+ * may legitimately want them to look different, and there is no reason a global
+ * setting should prevent that.
+ */
+export declare function applySkin(host: HTMLElement, name: string | null): void;
+/**
+ * Force light or dark, or follow the visitor's system setting.
+ *
+ * A colour skin outranks this, and has to: its tokens set the palette outright,
+ * so `theme="dark"` under the paper skin cannot actually darken the surface. It
+ * would only darken the few things a token cannot reach -- which is how you get
+ * a dark code block in a cream editor. Better that the skin wins wholly than
+ * that it wins in part.
+ */
+export type ColourScheme = 'light' | 'dark' | 'auto';
+export declare function applyColourScheme(host: HTMLElement, scheme: ColourScheme): void;
+//# sourceMappingURL=skins.d.ts.map

package/dist/skins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skins.d.ts","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,MAAM,WAAW,IAAI;IACnB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,IAAI,EAyEzC,CAAA;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAI7D;AAuBD,wBAAgB,cAAc,IAAI,SAAS,IAAI,EAAE,CAEhD;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAEhD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAuBtE;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAEpD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAQ/E"}

package/dist/skins.js

@@ -0,0 +1,226 @@
+/**
+ * Skins.
+ *
+ * ## What a skin is here, and why it is not what TinyMCE means
+ *
+ * TinyMCE ships skins as directories of compiled CSS that replace the editor's
+ * stylesheet wholesale. That is powerful and it is also why upgrading TinyMCE
+ * can break a custom skin: the skin knows the editor's internal class names, so
+ * every internal rename is a breaking change for anyone who wrote one.
+ *
+ * A skin here is **a block of custom properties and nothing else**. It cannot
+ * reference an internal class, so it cannot be broken by an internal rename --
+ * which is the whole reason the token API exists. The cost is that a skin cannot
+ * restructure the toolbar; it can only restyle it. That trade is deliberate: a
+ * theme that survives upgrades is worth more than one that can move a button.
+ *
+ * Anything a skin can do, an integrator can do inline by setting the same
+ * properties. Skins exist so a look can be *named, shared and switched*, not to
+ * unlock capability.
+ *
+ * ## The one thing a skin declares that is not a property
+ *
+ * `scheme`. Some of what an editor looks like is decided by the browser rather
+ * than by us -- the popup a native `select` opens, scrollbar chrome, the syntax
+ * palette in the opt-in highlighting bundle -- and none of it reads custom
+ * properties. Those follow the *colour scheme*, so a skin that replaces the
+ * surface has to say which scheme its palette belongs to or they keep following
+ * the visitor's system and contradict it. That is one declared word, not a
+ * selector, so the guarantee above is intact.
+ */
+import { registerStyles } from './styles.js';
+/**
+ * Built-in skins.
+ *
+ * Each sets the full palette rather than patching a few values, so a skin looks
+ * the same whether the visitor's system is in light or dark mode. A skin that
+ * only overrode two tokens would inherit the rest from whichever scheme happened
+ * to be active, which is how a carefully chosen palette ends up with one
+ * unreadable colour on somebody else's laptop.
+ */
+export const BUILT_IN_SKINS = [
+    {
+        name: 'midnight',
+        label: 'Midnight',
+        scheme: 'dark',
+        tokens: `
+      --openleaf-color-text: #e6edf3;
+      --openleaf-color-text-muted: #9198a1;
+      --openleaf-color-surface: #0d1117;
+      --openleaf-color-surface-hover: #21262d;
+      --openleaf-color-surface-active: #1f3a5f;
+      --openleaf-color-border: #3d444d;
+      --openleaf-color-accent: #79c0ff;
+      --openleaf-color-focus: #79c0ff;
+    `,
+    },
+    {
+        name: 'paper',
+        label: 'Paper',
+        scheme: 'light',
+        tokens: `
+      --openleaf-color-text: #2b2621;
+      --openleaf-color-text-muted: #6b6157;
+      --openleaf-color-surface: #fbf7f0;
+      --openleaf-color-surface-hover: #f0e9dd;
+      --openleaf-color-surface-active: #e6dcc8;
+      --openleaf-color-border: #d8cdb9;
+      --openleaf-color-accent: #8a5a20;
+      --openleaf-color-focus: #8a5a20;
+      --openleaf-radius: 2px;
+    `,
+    },
+    {
+        /*
+         * Not a style preference. Every pair here clears WCAG 1.4.3 for body text
+         * and 1.4.11 for the control boundaries, and the focus ring is thickened
+         * rather than merely recoloured -- colour alone is what fails first for
+         * someone who needs this skin.
+         */
+        name: 'contrast',
+        label: 'High contrast',
+        scheme: 'light',
+        tokens: `
+      --openleaf-color-text: #000000;
+      --openleaf-color-text-muted: #1a1a1a;
+      --openleaf-color-surface: #ffffff;
+      --openleaf-color-surface-hover: #e8e8e8;
+      --openleaf-color-surface-active: #d0d0d0;
+      --openleaf-color-border: #000000;
+      --openleaf-color-accent: #0000c0;
+      --openleaf-color-focus: #0000c0;
+      --openleaf-focus-width: 3px;
+      --openleaf-focus-offset: 2px;
+    `,
+    },
+    {
+        /*
+         * Density, not colour -- so it composes with any of the others, and so it
+         * declares no `scheme`: it has no opinion about the palette and must not
+         * override whichever one is already in force. The button stays at 28px
+         * because WCAG 2.2 SC 2.5.8 asks for 24 CSS px minimum and "compact" is not
+         * a licence to go under it.
+         */
+        name: 'compact',
+        label: 'Compact',
+        tokens: `
+      --openleaf-button-size: 28px;
+      --openleaf-icon-size: 14px;
+      --openleaf-gap: 1px;
+      --openleaf-font-size: 13px;
+      --openleaf-radius: 3px;
+    `,
+    },
+];
+const skins = new Map(BUILT_IN_SKINS.map((skin) => [skin.name, skin]));
+let installedSheet = '';
+function css() {
+    return [...skins.values()]
+        .map((skin) => `.ol-editor[data-ol-skin="${skin.name}"] {${skin.tokens}}`)
+        .join('\n');
+}
+/** Install the skin stylesheet. Re-run when a skin is added. */
+function sync(doc) {
+    const next = css();
+    if (next === installedSheet)
+        return;
+    installedSheet = next;
+    registerStyles(next, doc);
+}
+/**
+ * Add a skin, or replace one by name.
+ *
+ * ```ts
+ * registerSkin({
+ *   name: 'acme',
+ *   label: 'Acme brand',
+ *   tokens: '--openleaf-color-accent: #c2185b; --openleaf-radius: 12px;',
+ * })
+ * ```
+ *
+ * A skin that replaces the surface must also say which world it is in, or the
+ * parts of the editor that cannot be reached by a custom property -- syntax
+ * colours, native widget chrome -- keep following the visitor's system and end
+ * up contradicting it:
+ *
+ * ```ts
+ * registerSkin({
+ *   name: 'acme-dark',
+ *   label: 'Acme dark',
+ *   scheme: 'dark',
+ *   tokens: '--openleaf-color-surface: #101418; --openleaf-color-text: #e8eef4;',
+ * })
+ * ```
+ */
+export function registerSkin(skin, doc) {
+    warnIfSchemeMissing(skin);
+    skins.set(skin.name, skin);
+    sync(doc);
+}
+/*
+ * Setting the surface without declaring the scheme is silently half a skin, and
+ * the half that is missing only shows up on a machine set to the opposite mode
+ * -- which is rarely the machine the skin was written on. This is the one thing
+ * worth a console message, because nothing about the result looks like a
+ * mistake locally.
+ */
+const schemeWarned = new Set();
+function warnIfSchemeMissing(skin) {
+    if (skin.scheme || !skin.tokens.includes('--openleaf-color-surface:'))
+        return;
+    if (schemeWarned.has(skin.name))
+        return;
+    schemeWarned.add(skin.name);
+    console.warn(`@openleaf-editor/ui: skin "${skin.name}" sets --openleaf-color-surface but declares ` +
+        'no scheme, so syntax highlighting and native widgets inside it keep ' +
+        "following the visitor's system setting and can contradict the palette. " +
+        "Add scheme: 'light' or scheme: 'dark'.");
+}
+export function availableSkins() {
+    return [...skins.values()];
+}
+/** Ensure the built-in skins are available. Idempotent. */
+export function ensureSkins(doc) {
+    sync(doc);
+}
+/**
+ * Apply a skin to one editor, or clear it with null.
+ *
+ * Per element rather than per page: a CMS with an article body and a comment box
+ * may legitimately want them to look different, and there is no reason a global
+ * setting should prevent that.
+ */
+export function applySkin(host, name) {
+    ensureSkins(host.ownerDocument);
+    if (name === null || name === '' || name === 'default') {
+        host.removeAttribute('data-ol-skin');
+        host.removeAttribute('data-ol-scheme');
+        return;
+    }
+    const skin = skins.get(name);
+    if (!skin) {
+        console.warn(`@openleaf-editor/ui: no skin named "${name}". Available: ` +
+            `${[...skins.keys()].join(', ')}. The editor keeps its current appearance.`);
+        return;
+    }
+    host.setAttribute('data-ol-skin', name);
+    // A separate attribute from the skin's name because it is a separate
+    // question: stylesheets that must branch on the scheme -- the highlighting
+    // plugin's palette, the native-widget rules in the core sheet -- have no way
+    // to know what `midnight` means, and hard-coding a list of skin names into
+    // them is precisely the internal coupling skins exist to avoid.
+    if (skin.scheme)
+        host.setAttribute('data-ol-scheme', skin.scheme);
+    else
+        host.removeAttribute('data-ol-scheme');
+}
+export function applyColourScheme(host, scheme) {
+    if (scheme === 'auto') {
+        // Removing the attribute is what re-enables the prefers-color-scheme rules;
+        // there is no `data-ol-theme="auto"` for them to match.
+        host.removeAttribute('data-ol-theme');
+        return;
+    }
+    host.setAttribute('data-ol-theme', scheme);
+}
+//# sourceMappingURL=skins.js.map

package/dist/skins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skins.js","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"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"}

package/dist/styles.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Toolbar styles, and the two ways they can reach the page.
+ *
+ * ## Why this is harder than it should be
+ *
+ * OpenLeaf deliberately does not use Shadow DOM: the *content* area must
+ * inherit the host site's typography for editing to be WYSIWYG against their
+ * theme. The price is that these rules share a cascade with a stylesheet we
+ * have never seen -- Bootstrap, Tailwind preflight, a 2009 WordPress theme, a
+ * Drupal admin theme. So every property a host `button {}` rule or reset might
+ * touch is set explicitly below, even where the browser default would do.
+ *
+ * `all: unset` is NOT used. It looks like the obvious answer and it is a trap:
+ * it destroys the inheritance we want (font, colour) and wipes the default
+ * focus behaviour we are obliged to keep.
+ *
+ * No `!important` either. It wins today and makes the toolbar unthemeable
+ * tomorrow, which defeats the point of the custom-property API.
+ *
+ * ## Delivery and CSP
+ *
+ * Government and enterprise integrators -- the users who most need a free
+ * editor -- commonly run `style-src 'self'` with no `'unsafe-inline'`, which
+ * blocks an injected `<style>` element. So there are exactly two paths:
+ *
+ *   1. A constructable `CSSStyleSheet` added to `document.adoptedStyleSheets`.
+ *      CSP gates resources *parsed as style*; a CSSOM object attached this way
+ *      never passes through that gate, by design rather than by loophole.
+ *   2. The integrator links `@openleaf-editor/ui/openleaf.css` themselves and calls
+ *      `markStylesExternal()`.
+ *
+ * There is deliberately NO `<style>` injection fallback. It reads as a safety
+ * net and is the opposite: it is blocked by exactly the strict-CSP setups that
+ * would need it, and it fails *silently* -- an unstyled toolbar with no signal
+ * an integrator can act on. A console warning naming the stylesheet is more
+ * useful than a mechanism that quietly does nothing.
+ */
+export declare const CSS = "\n.ol-editor {\n  /* Two families, named before either is public API. A singular\n     `--openleaf-font` implies \"the\" font, and source view already has a\n     monospace surface -- bolting a mono token on beside a singular name later\n     is the awkward outcome worth avoiding now. `--openleaf-font` is still\n     honoured as a fallback. */\n  --ol-font: var(--openleaf-font-ui, var(--openleaf-font, system-ui, -apple-system, \"Segoe UI\", sans-serif));\n  --ol-font-mono: var(--openleaf-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  --ol-font-size: var(--openleaf-font-size, 14px);\n  --ol-radius: var(--openleaf-radius, 4px);\n  --ol-text: var(--openleaf-color-text, #1f2328);\n  --ol-text-muted: var(--openleaf-color-text-muted, #59636e);\n  --ol-surface: var(--openleaf-color-surface, #ffffff);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #f0f1f3);\n  --ol-surface-active: var(--openleaf-color-surface-active, #dbe9ff);\n  --ol-border: var(--openleaf-color-border, #d1d9e0);\n  --ol-accent: var(--openleaf-color-accent, #0550ae);\n  --ol-focus: var(--openleaf-color-focus, #0969da);\n  --ol-button-size: var(--openleaf-button-size, 32px);\n  --ol-icon-size: var(--openleaf-icon-size, 16px);\n  --ol-gap: var(--openleaf-gap, 2px);\n  /* A 2009 WordPress admin bar sits at z-index 99999 and Drupal's toolbar plays\n     similar games. Without a sanctioned escape hatch integrators fix a toolbar\n     rendered behind a sticky host header with !important -- the exact thing the\n     token API exists to prevent. */\n  --ol-z: var(--openleaf-z-index, 1);\n  /* Thickness and offset, not just colour: \"you can change the colour but not\n     the thickness\" is a poor answer to a Section 508 team citing WCAG 2.2\n     Focus Appearance. */\n  --ol-focus-width: var(--openleaf-focus-width, 2px);\n  --ol-focus-offset: var(--openleaf-focus-offset, 1px);\n\n  display: block;\n  color: var(--ol-text);\n}\n\n/* Three ways into the dark palette, and one way out of it.\n   `data-ol-scheme` is set from the applied skin's declared scheme, and a skin\n   that declares one outranks both the attribute and the system -- it has to,\n   because its tokens have already replaced the palette outright. Without the\n   `:not()` guards a light skin on a dark machine would take these fallbacks for\n   every token it did not itself set, which is a light surface carrying dark-mode\n   muted text. */\n@media (prefers-color-scheme: dark) {\n  .ol-editor:not([data-ol-theme=\"light\"]):not([data-ol-scheme]) {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n}\n\n.ol-editor[data-ol-theme=\"dark\"]:not([data-ol-scheme]) {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n.ol-editor[data-ol-scheme=\"dark\"] {\n  --ol-text: var(--openleaf-color-text, #e6edf3);\n  --ol-text-muted: var(--openleaf-color-text-muted, #9198a1);\n  --ol-surface: var(--openleaf-color-surface, #0d1117);\n  --ol-surface-hover: var(--openleaf-color-surface-hover, #21262d);\n  --ol-surface-active: var(--openleaf-color-surface-active, #1f3a5f);\n  --ol-border: var(--openleaf-color-border, #3d444d);\n  --ol-accent: var(--openleaf-color-accent, #79c0ff);\n  --ol-focus: var(--openleaf-color-focus, #79c0ff);\n}\n\n/* Native widget chrome -- the popup a `select` opens, scrollbars, the caret,\n   form control backgrounds -- is painted by the browser from `color-scheme`,\n   not from any property we can hand an integrator. Left alone it follows the\n   page, which is right while the editor's own palette also follows the page and\n   wrong the moment either attribute pins the editor to one world. So it is set\n   exactly when the editor stops following along, and inherited from the host\n   otherwise. */\n.ol-editor[data-ol-theme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-theme=\"dark\"] { color-scheme: dark; }\n.ol-editor[data-ol-scheme=\"light\"] { color-scheme: light; }\n.ol-editor[data-ol-scheme=\"dark\"] { color-scheme: dark; }\n\n/* Wrapping, not scrolling and not an overflow menu. Both of those hide\n   controls -- one off-screen, one behind a click -- and a formatting control\n   the author cannot see is a control they do not have. */\n.ol-editor .ol-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ol-gap);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 4px;\n  border: 1px solid var(--ol-border);\n  border-bottom: 0;\n  border-radius: var(--ol-radius) var(--ol-radius) 0 0;\n  background: var(--ol-surface);\n  font: inherit;\n  position: relative;\n  z-index: var(--ol-z);\n}\n\n.ol-editor .ol-group {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ol-gap);\n}\n\n/* The divider is a BORDER on the group, not a standalone flex item.\n   As its own element it could wrap onto the trailing edge of a row with nothing\n   after it -- a stranded line floating at the end of a row. Wrapping begins\n   around 690-740px, well inside ordinary desktop widths (a CMS sidebar, a\n   half-width split pane), so this was not a 360px-only edge case.\n   border-inline-start rather than border-left, so it flips under RTL. */\n.ol-editor .ol-group + .ol-group {\n  border-inline-start: 1px solid var(--ol-border);\n  padding-inline-start: 5px;\n  margin-inline-start: 1px;\n}\n\n/* Every property a host reset or `button {}` rule is likely to touch is set\n   here explicitly. Specificity is (0,2,0) via the descendant selector, which\n   beats a bare element or single-class host rule without resorting to\n   !important. */\n.ol-editor .ol-btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--ol-button-size);\n  height: var(--ol-button-size);\n  min-width: var(--ol-button-size);\n  min-height: var(--ol-button-size);\n  max-width: none;\n  padding: 0;\n  margin: 0;\n  border: 1px solid transparent;\n  border-radius: var(--ol-radius);\n  background: transparent;\n  color: var(--ol-text);\n  font: inherit;\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  text-align: center;\n  text-decoration: none;\n  text-shadow: none;\n  box-shadow: none;\n  opacity: 1;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  outline-offset: var(--ol-focus-offset);\n  -webkit-tap-highlight-color: transparent;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.ol-editor .ol-btn:hover {\n  background: var(--ol-surface-hover);\n}\n\n/* :focus-visible only, so a mouse click does not leave a ring behind, but the\n   ring is never removed for keyboard users. */\n.ol-editor .ol-btn:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n\n/* Pressed state is distinguished from hover by THREE signals, not just colour:\n   a filled background, a visible border, and an inset shadow that reads as\n   physically depressed. Colour alone would fail for a colour-blind author and\n   would be invisible in forced-colours mode. */\n.ol-editor .ol-btn[aria-pressed=\"true\"] {\n  background: var(--ol-surface-active);\n  border-color: var(--ol-accent);\n  color: var(--ol-accent);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);\n}\n\n.ol-editor .ol-btn[aria-pressed=\"true\"]:hover {\n  background: var(--ol-surface-active);\n  border-color: var(--ol-accent);\n}\n\n/* aria-disabled rather than the disabled attribute: a disabled button is\n   removed from the roving tabindex and cannot be reached or announced, so an\n   author using a screen reader cannot discover that the control exists. */\n.ol-editor .ol-btn[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.ol-editor .ol-btn[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n.ol-editor .ol-icon {\n  width: var(--ol-icon-size);\n  height: var(--ol-icon-size);\n  display: block;\n  pointer-events: none;\n  flex: 0 0 auto;\n}\n\n/* Block-type select. Sized and coloured to sit level with the icon buttons so\n   it does not read as bolted on, but it stays a native <select> -- a custom\n   listbox is a large amount of ARIA that would then owe real screen reader\n   testing to be worth anything. */\n.ol-editor .ol-select {\n  box-sizing: border-box;\n  height: var(--ol-button-size);\n  max-width: 11em;\n  padding: 0 22px 0 6px;\n  margin: 0;\n  border: 1px solid var(--ol-border);\n  border-radius: var(--ol-radius);\n  background-color: transparent;\n  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position: right 10px center, right 6px center;\n  background-size: 4px 4px, 4px 4px;\n  background-repeat: no-repeat;\n  color: var(--ol-text);\n  font-family: var(--ol-font);\n  font-size: var(--ol-font-size);\n  font-weight: 400;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  box-shadow: none;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.ol-editor .ol-select:hover {\n  background-color: var(--ol-surface-hover);\n}\n\n.ol-editor .ol-select:focus-visible {\n  outline: var(--ol-focus-width) solid var(--ol-focus);\n  outline-offset: var(--ol-focus-offset);\n}\n\n/* The option list is painted by the OS, which does not inherit our tokens, so\n   give it explicit colours or dark mode shows black text on black. */\n.ol-editor .ol-select option {\n  background: var(--ol-surface);\n  color: var(--ol-text);\n}\n\n.ol-editor .ol-content {\n  box-sizing: border-box;\n  border: 1px solid var(--ol-border);\n  border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n  background: var(--ol-surface);\n}\n\n/* Deliberately minimal: the content area inherits the host's typography, which\n   is the entire reason this project does not use Shadow DOM. Only padding and\n   the focus ring are ours. */\n.ol-editor .ol-content .ProseMirror {\n  padding: 12px;\n  min-height: 8rem;\n  outline: none;\n}\n\n.ol-editor .ol-content:focus-within {\n  outline: 2px solid var(--ol-focus);\n  outline-offset: -1px;\n}\n\n/* Tables.\n   These styles live in core, not in the opt-in table plugin, because table\n   NODES live in core: every deployment reads and renders tables even where\n   editing them is switched off. Unstyled tables would render as runs of\n   undelimited text. */\n.ol-editor .ol-content .ProseMirror table {\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: 100%;\n  margin: 0 0 1em;\n  overflow: hidden;\n}\n\n.ol-editor .ol-content .ProseMirror td,\n.ol-editor .ol-content .ProseMirror th {\n  border: 1px solid var(--ol-border);\n  padding: 6px 8px;\n  vertical-align: top;\n  /* A zero-width cell cannot be clicked into, so it cannot be repaired. */\n  min-width: 2em;\n  position: relative;\n}\n\n.ol-editor .ol-content .ProseMirror th {\n  background: var(--ol-surface-hover);\n  font-weight: 600;\n  text-align: start;\n}\n\n/* prosemirror-tables marks cells in a rectangular selection with this class.\n   An ::after overlay rather than a background so it composes with a cell that\n   already has one, and so a header cell still reads as a header. */\n.ol-editor .ol-content .ProseMirror .selectedCell::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--ol-surface-active);\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n/* The column resize handle, drawn by prosemirror-tables' columnResizing. */\n.ol-editor .ol-content .ProseMirror .column-resize-handle {\n  position: absolute;\n  right: -2px;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n  background: var(--ol-accent);\n  pointer-events: none;\n  z-index: 20;\n}\n\n.ol-editor .ol-content .ProseMirror.resize-cursor {\n  cursor: col-resize;\n}\n\n/* Preserved-but-unrecognised markup, surfaced rather than hidden. */\n.ol-editor .ol-content .ProseMirror-selectednode {\n  outline: 2px solid var(--ol-focus);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.ol-editor .ol-source {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: 12rem;\n  padding: 12px;\n  border: 1px solid var(--ol-border);\n  border-radius: 0 0 var(--ol-radius) var(--ol-radius);\n  background: var(--ol-surface);\n  color: var(--ol-text);\n  font-family: var(--ol-font-mono);\n  font-size: 13px;\n  line-height: 1.5;\n  resize: vertical;\n  white-space: pre-wrap;\n}\n\n/* Directional icons under RTL.\n   Group order reverses for free with flexbox, but a curved undo arrow does not:\n   in an RTL document \"back\" points the other way. Only genuinely directional\n   icons are flipped -- bold and italic must not be mirrored. */\n.ol-editor[dir=\"rtl\"] .ol-icon--directional,\n[dir=\"rtl\"] .ol-editor .ol-icon--directional {\n  transform: scaleX(-1);\n}\n\n/* The announcement region. Visually hidden but not display:none, which would\n   remove it from the accessibility tree and silence it. */\n.ol-editor .ol-live {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Coarse pointers get a larger target. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px\n   minimum; 32 clears that on a mouse and 40 is comfortable on a thumb. */\n@media (pointer: coarse) {\n  .ol-editor {\n    --ol-button-size: var(--openleaf-button-size, 40px);\n    --ol-gap: var(--openleaf-gap, 4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ol-editor .ol-btn {\n    transition: none;\n  }\n}\n\n/* Forced colours (Windows high contrast) replaces our palette wholesale. The\n   pressed state must not depend on a background we no longer control, so it is\n   re-expressed as a border, which the mode preserves. */\n@media (forced-colors: active) {\n  .ol-editor .ol-btn {\n    border-color: ButtonBorder;\n    color: ButtonText;\n  }\n  .ol-editor .ol-btn[aria-pressed=\"true\"] {\n    border-color: Highlight;\n    color: Highlight;\n    box-shadow: none;\n  }\n  .ol-editor .ol-btn:focus-visible {\n    outline-color: Highlight;\n  }\n  .ol-editor .ol-btn[aria-disabled=\"true\"] {\n    color: GrayText;\n    opacity: 1;\n  }\n}\n";
+/**
+ * Declare that the integrator has linked `openleaf.css` themselves, so no
+ * injection is attempted. Call before the first editor is created.
+ */
+export declare function markStylesExternal(): void;
+/**
+ * Attach a stylesheet through the CSP-safe path.
+ *
+ * Public because plugins need it. The highlighting plugin previously
+ * hand-rolled this -- the same constructable-stylesheet dance, the same
+ * fallback, the same warning -- which meant the CSP reasoning lived in two
+ * places and only one of them would get fixed.
+ *
+ * Deduplicated per document by the CSS text itself, so calling it twice from a
+ * bundle loaded twice is harmless.
+ */
+export declare function registerStyles(css: string, target?: Document): 'adopted' | 'unavailable' | 'already';
+/**
+ * Ensure the editor's own stylesheet is present. Safe to call repeatedly.
+ *
+ * There is deliberately **no `<style>` injection fallback**. It looks like a
+ * safety net and is the opposite: it fails under exactly the strict-CSP
+ * configurations it would be needed for, and it fails *silently* -- a blocked
+ * injection leaves an unstyled toolbar and no signal an integrator can act on.
+ */
+export declare function ensureStyles(doc: Document): 'external' | 'adopted' | 'unavailable' | 'already';
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAqBH,eAAO,MAAM,GAAG,4xdAgZf,CAAA;AAID;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAoCpG;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAM9F"}