@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/styles/themes.css

@@ -0,0 +1,622 @@
+/* Obsidian theme bridge (`@ecsplico/editor/styles/themes.css`); import after `core.css` and the feature sheets.
+   Everything is scoped to `.obsidian-theme`, the class the themes feature puts on `<html>` (next to `theme-dark` /
+   `theme-light`). Without that class this file does nothing, so the Nuxt UI look stays untouched.
+
+   1. Obsidian's default variables (values copied from Obsidian's app.css), unlayered and lowest specificity so a
+      scoped theme stylesheet (injected unlayered, later) overrides them.
+   2. Token bridge: every `--sk-*` token the package styles read (and the `--ui-*` tokens Nuxt UI's own components read)
+      resolves to Obsidian variables.
+   3. Element mapping in `@layer components` that mirrors Obsidian's `.markdown-rendered` rules on `.tiptap`, plus the
+      root typography of the app chrome. */
+
+/* ---- 1. Obsidian default variables --------------------------------------------------------------------------- */
+.obsidian-theme {
+  --h1-weight: 700;
+  --h2-weight: 600;
+  --h3-weight: 600;
+  --h4-weight: 600;
+  --h5-weight: 600;
+  --h6-weight: 600;
+  --blockquote-border-thickness: 2px;
+  --blockquote-border-color: var(--interactive-accent);
+  --blockquote-font-style: normal;
+  --blockquote-color: inherit;
+  --blockquote-background-color: transparent;
+  --bold-modifier: 200;
+  --bold-color: inherit;
+  --bold-weight: calc(var(--font-weight) + var(--bold-modifier));
+  --border-width: 1px;
+  --callout-border-width: 0px;
+  --callout-border-opacity: 0.25;
+  --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
+  --callout-radius: var(--radius-s);
+  --callout-blend-mode: var(--highlight-mix-blend-mode);
+  --callout-title-color: inherit;
+  --callout-title-padding: 0;
+  --callout-title-size: inherit;
+  --callout-title-weight: calc(var(--font-weight) + var(--bold-modifier));
+  --callout-content-padding: 0;
+  --callout-content-background: transparent;
+  --callout-bug: var(--color-red-rgb);
+  --callout-default: var(--color-blue-rgb);
+  --callout-error: var(--color-red-rgb);
+  --callout-example: var(--color-purple-rgb);
+  --callout-fail: var(--color-red-rgb);
+  --callout-important: var(--color-cyan-rgb);
+  --callout-info: var(--color-blue-rgb);
+  --callout-question: var(--color-orange-rgb);
+  --callout-success: var(--color-green-rgb);
+  --callout-summary: var(--color-cyan-rgb);
+  --callout-tip: var(--color-cyan-rgb);
+  --callout-todo: var(--color-blue-rgb);
+  --callout-warning: var(--color-orange-rgb);
+  --callout-quote: 158, 158, 158;
+  --caret-color: var(--text-normal);
+  --code-white-space: pre-wrap;
+  --code-border-width: 0px;
+  --code-border-color: var(--background-modifier-border);
+  --code-bracket-background: var(--background-modifier-hover);
+  --code-radius: var(--radius-s);
+  --code-size: var(--font-smaller);
+  --code-background: var(--background-primary-alt);
+  --code-normal: var(--text-normal);
+  --code-comment: var(--text-faint);
+  --code-function: var(--color-yellow);
+  --code-important: var(--color-orange);
+  --code-keyword: var(--color-pink);
+  --code-operator: var(--color-red);
+  --code-property: var(--color-cyan);
+  --code-punctuation: var(--text-muted);
+  --code-string: var(--color-green);
+  --code-tag: var(--color-red);
+  --code-value: var(--color-purple);
+  --cursor: default;
+  --cursor-link: pointer;
+  --embed-max-height: 4000px;
+  --embed-canvas-max-height: 400px;
+  --embed-background: inherit;
+  --embed-border-start: 2px solid var(--interactive-accent);
+  --embed-border-end: none;
+  --embed-border-top: none;
+  --embed-border-bottom: none;
+  --embed-padding: 0 0 0 var(--size-4-6);
+  --embed-font-style: inherit;
+  --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), inset 0 0 0 1px var(--background-modifier-border);
+  --font-smallest: 0.8em;
+  --font-smaller: 0.875em;
+  --font-small: 0.933em;
+  --font-weight: var(--font-normal);
+  --font-thin: 100;
+  --font-extralight: 200;
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+  --font-black: 900;
+  --heading-formatting: var(--text-faint);
+  --heading-spacing: calc(var(--p-spacing) * 2.5);
+  --h1-color: inherit;
+  --h2-color: inherit;
+  --h3-color: inherit;
+  --h4-color: inherit;
+  --h5-color: inherit;
+  --h6-color: inherit;
+  --h1-font: inherit;
+  --h2-font: inherit;
+  --h3-font: inherit;
+  --h4-font: inherit;
+  --h5-font: inherit;
+  --h6-font: inherit;
+  --h1-letter-spacing: -0.015em;
+  --h2-letter-spacing: -0.011em;
+  --h3-letter-spacing: -0.008em;
+  --h4-letter-spacing: -0.005em;
+  --h5-letter-spacing: -0.002em;
+  --h6-letter-spacing: 0em;
+  --h1-line-height: 1.2;
+  --h2-line-height: 1.2;
+  --h3-line-height: 1.3;
+  --h4-line-height: 1.4;
+  --h5-line-height: var(--line-height-normal);
+  --h6-line-height: var(--line-height-normal);
+  --h1-size: 1.618em;
+  --h2-size: 1.462em;
+  --h3-size: 1.318em;
+  --h4-size: 1.188em;
+  --h5-size: 1.076em;
+  --h6-size: 1em;
+  --h1-style: normal;
+  --h2-style: normal;
+  --h3-style: normal;
+  --h4-style: normal;
+  --h5-style: normal;
+  --h6-style: normal;
+  --h1-variant: normal;
+  --h2-variant: normal;
+  --h3-variant: normal;
+  --h4-variant: normal;
+  --h5-variant: normal;
+  --h6-variant: normal;
+  --hr-color: var(--background-modifier-border);
+  --hr-thickness: 2px;
+  --indent-size: 4;
+  --indent-unit: 0.5625em;
+  --italic-color: inherit;
+  --italic-weight: inherit;
+  --line-height-normal: 1.5;
+  --line-height-tight: 1.3;
+  --link-color: var(--text-accent);
+  --link-color-hover: var(--text-accent-hover);
+  --link-decoration: underline;
+  --link-decoration-hover: underline;
+  --link-decoration-thickness: auto;
+  --link-weight: var(--font-weight);
+  --link-external-color: var(--text-accent);
+  --link-external-color-hover: var(--text-accent-hover);
+  --link-external-decoration: underline;
+  --link-external-decoration-hover: underline;
+  --link-external-filter: none;
+  --link-unresolved-color: var(--text-accent);
+  --link-unresolved-opacity: 0.7;
+  --link-unresolved-filter: none;
+  --link-unresolved-decoration-style: solid;
+  --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3);
+  --list-indent: calc(var(--indent-unit) * var(--indent-size));
+  --list-indent-editing: 0.75em;
+  --list-indent-source: 0;
+  --list-spacing: 0.075em;
+  --list-marker-color: var(--text-faint);
+  --list-marker-color-hover: var(--text-muted);
+  --list-marker-color-collapsed: var(--text-accent);
+  --list-bullet-border: none;
+  --list-bullet-radius: 50%;
+  --list-bullet-size: 0.3em;
+  --list-bullet-transform: none;
+  --list-numbered-style: decimal;
+  --list-bullet-end-padding: 1.3rem;
+  --p-spacing: 1rem;
+  --p-spacing-empty: 0rem;
+  --corner-shape: round;
+  --radius-s: 4px;
+  --radius-m: 8px;
+  --radius-l: 12px;
+  --radius-xl: 16px;
+  --size-2-1: 2px;
+  --size-2-2: 4px;
+  --size-2-3: 6px;
+  --size-4-1: 4px;
+  --size-4-2: 8px;
+  --size-4-3: 12px;
+  --size-4-4: 16px;
+  --size-4-5: 20px;
+  --size-4-6: 24px;
+  --size-4-8: 32px;
+  --size-4-9: 36px;
+  --size-4-10: 40px;
+  --size-4-12: 48px;
+  --size-4-16: 64px;
+  --size-4-18: 72px;
+  --table-background: transparent;
+  --table-border-width: 1px;
+  --table-border-color: var(--background-modifier-border);
+  --table-white-space: break-spaces;
+  --table-header-background: var(--table-background);
+  --table-header-background-hover: inherit;
+  --table-header-border-width: var(--table-border-width);
+  --table-header-border-color: var(--table-border-color);
+  --table-header-font: inherit;
+  --table-header-size: var(--table-text-size);
+  --table-header-weight: calc(var(--font-weight) + var(--bold-modifier));
+  --table-header-color: var(--text-normal);
+  --table-line-height: var(--line-height-tight);
+  --table-text-size: var(--font-text-size);
+  --table-text-color: inherit;
+  --table-column-min-width: 6ch;
+  --table-column-max-width: none;
+  --table-column-alt-background: var(--table-background);
+  --table-column-first-border-width: var(--table-border-width);
+  --table-column-last-border-width: var(--table-border-width);
+  --table-row-background-hover: var(--table-background);
+  --table-row-alt-background: var(--table-background);
+  --table-row-alt-background-hover: var(--table-background);
+  --table-row-last-border-width: var(--table-border-width);
+  --table-selection: hsla(var(--color-accent-hsl), 0.1);
+  --table-selection-blend-mode: var(--highlight-mix-blend-mode);
+  --tag-size: var(--font-smaller);
+  --tag-color: var(--text-accent);
+  --tag-color-hover: var(--text-accent);
+  --tag-decoration: none;
+  --tag-decoration-hover: none;
+  --tag-background: hsla(var(--interactive-accent-hsl), 0.1);
+  --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2);
+  --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15);
+  --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15);
+  --tag-border-width: 0px;
+  --tag-padding-x: 0.65em;
+  --tag-padding-y: 0.25em;
+  --tag-radius: 2em;
+  --tag-corner-shape: round;
+  --tag-weight: inherit;
+  --accent-h: 258;
+  --accent-s: 88%;
+  --accent-l: 66%;
+  --background-primary: var(--color-base-00);
+  --background-primary-alt: var(--color-base-10);
+  --background-secondary: var(--color-base-20);
+  --background-modifier-hover: rgba(var(--mono-rgb-100), 0.067);
+  --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.1);
+  --background-modifier-border: var(--color-base-30);
+  --background-modifier-border-hover: var(--color-base-35);
+  --background-modifier-border-focus: var(--color-base-40);
+  --background-modifier-error-rgb: var(--color-red-rgb);
+  --background-modifier-error: var(--color-red);
+  --background-modifier-error-hover: var(--color-red);
+  --background-modifier-success-rgb: var(--color-green-rgb);
+  --background-modifier-success: var(--color-green);
+  --background-modifier-form-field: var(--color-base-00);
+  --background-modifier-form-field-hover: var(--background-modifier-form-field);
+  --text-normal: var(--color-base-100);
+  --text-muted: var(--color-base-70);
+  --text-faint: var(--color-base-50);
+  --text-on-accent: white;
+  --text-on-accent-inverted: black;
+  --text-error: var(--color-red);
+  --text-warning: var(--color-orange);
+  --text-success: var(--color-green);
+  --text-selection: hsla(var(--color-accent-hsl), 0.2);
+  --text-highlight-bg-rgb: 255, 208, 0;
+  --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4);
+  --text-accent: var(--color-accent);
+  --text-accent-hover: var(--color-accent-2);
+  --interactive-normal: var(--color-base-00);
+  --interactive-hover: var(--color-base-10);
+  --interactive-accent-hsl: var(--color-accent-hsl);
+  --interactive-accent: var(--color-accent-1);
+  --interactive-accent-hover: var(--color-accent-2);
+  /* Fonts: Obsidian's chain; the '??' placeholders (an unknown family) keep each declaration valid when a theme sets nothing. */
+  --font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Google Sans Flex", Roboto, "Inter Variable", "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
+  --font-interface-override: '??';
+  --font-interface-theme: '??';
+  --font-interface: var(--font-interface-override), var(--font-interface-theme), var(--font-default);
+  --font-text-override: '??';
+  --font-text-theme: '??';
+  --font-text: var(--font-text-override), var(--font-text-theme), var(--font-default);
+  --font-monospace-override: '??';
+  --font-monospace-theme: '??';
+  --font-monospace: var(--font-monospace-override), var(--font-monospace-theme), var(--font-monospace-default);
+  --font-text-size: 16px;
+}
+
+.obsidian-theme.theme-light {
+  color-scheme: light;
+  --highlight-mix-blend-mode: darken;
+  --mono-rgb-0: 255, 255, 255;
+  --mono-rgb-100: 0, 0, 0;
+  --color-red-rgb: 233, 49, 71;
+  --color-red: #e93147;
+  --color-orange-rgb: 236, 117, 0;
+  --color-orange: #ec7500;
+  --color-yellow-rgb: 224, 172, 0;
+  --color-yellow: #e0ac00;
+  --color-green-rgb: 8, 185, 78;
+  --color-green: #08b94e;
+  --color-cyan-rgb: 0, 191, 188;
+  --color-cyan: #00bfbc;
+  --color-blue-rgb: 8, 109, 221;
+  --color-blue: #086ddd;
+  --color-purple-rgb: 120, 82, 238;
+  --color-purple: #7852ee;
+  --color-pink-rgb: 213, 57, 132;
+  --color-pink: #d53984;
+  --color-base-00: #ffffff;
+  --color-base-05: #fcfcfc;
+  --color-base-10: #fafafa;
+  --color-base-20: #f6f6f6;
+  --color-base-25: #e3e3e3;
+  --color-base-30: #e0e0e0;
+  --color-base-35: #d4d4d4;
+  --color-base-40: #bdbdbd;
+  --color-base-50: #ababab;
+  --color-base-60: #707070;
+  --color-base-70: #5c5c5c;
+  --color-base-100: #222222;
+  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
+  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+  --color-accent-1: hsl(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.01), calc(var(--accent-l) * 1.075));
+  --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15));
+  --background-secondary-alt: var(--color-base-05);
+  --shadow-edges: 0 0 transparent;
+  --shadow-xs: 0 1px 6px rgba(0, 0, 0, 0.015), 0 4px 24px rgba(0, 0, 0, 0.065), var(--shadow-edges);
+  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07);
+  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 15px 30px rgba(0, 0, 0, 0.1);
+}
+
+.obsidian-theme.theme-dark {
+  color-scheme: dark;
+  --highlight-mix-blend-mode: lighten;
+  --mono-rgb-0: 0, 0, 0;
+  --mono-rgb-100: 255, 255, 255;
+  --color-red-rgb: 251, 70, 76;
+  --color-red: #fb464c;
+  --color-orange-rgb: 233, 151, 63;
+  --color-orange: #e9973f;
+  --color-yellow-rgb: 224, 222, 113;
+  --color-yellow: #e0de71;
+  --color-green-rgb: 68, 207, 110;
+  --color-green: #44cf6e;
+  --color-cyan-rgb: 83, 223, 221;
+  --color-cyan: #53dfdd;
+  --color-blue-rgb: 2, 122, 255;
+  --color-blue: #027aff;
+  --color-purple-rgb: 168, 130, 255;
+  --color-purple: #a882ff;
+  --color-pink-rgb: 250, 153, 205;
+  --color-pink: #fa99cd;
+  --color-base-00: #1e1e1e;
+  --color-base-05: #212121;
+  --color-base-10: #242424;
+  --color-base-20: #262626;
+  --color-base-25: #2a2a2a;
+  --color-base-30: #363636;
+  --color-base-35: #3f3f3f;
+  --color-base-40: #555555;
+  --color-base-50: #666666;
+  --color-base-60: #999999;
+  --color-base-70: #b3b3b3;
+  --color-base-100: #dadada;
+  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
+  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+  --color-accent-1: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15));
+  --color-accent-2: hsl(calc(var(--accent-h) - 5), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29));
+  --background-modifier-form-field: var(--color-base-25);
+  --background-secondary-alt: var(--color-base-30);
+  --interactive-normal: var(--color-base-30);
+  --interactive-hover: var(--color-base-35);
+  --text-accent: var(--color-accent-1);
+  --interactive-accent: var(--color-accent);
+  --interactive-accent-hover: var(--color-accent-1);
+  --text-selection: hsla(var(--interactive-accent-hsl), 0.33);
+  --shadow-xs: 0 1px 6px rgba(0, 0, 0, 0.045), 0 4px 24px rgba(0, 0, 0, 0.195), var(--shadow-edges);
+  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 0px 15px 30px rgba(0, 0, 0, 0.3);
+  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2);
+}
+
+/* ---- 2. Token bridge-------------------------------------------------------------------------------- */
+.obsidian-theme {
+  /* The editor's own tokens (kit independent: PrimeVue and shadcn hosts read these, too). */
+  --sk-bg: var(--background-primary);
+  --sk-fg: var(--text-normal);
+  --sk-muted: var(--text-muted);
+  --sk-border: var(--background-modifier-border);
+  --sk-primary: var(--interactive-accent);
+  --sk-primary-fg: var(--text-on-accent);
+  --sk-success: var(--color-green);
+  --sk-warning: var(--color-orange);
+  --sk-danger: var(--color-red);
+  --sk-info: var(--color-blue);
+  --sk-radius: var(--radius-s);
+  --sk-bg-elevated: var(--background-secondary);
+  --sk-bg-accented: var(--background-modifier-hover);
+  --sk-fg-highlighted: var(--text-normal);
+  --sk-fg-toned: var(--text-muted);
+  --sk-fg-dimmed: var(--text-faint);
+  --sk-border-accented: var(--background-modifier-border-hover);
+  /* Nuxt UI's own components. */
+  --ui-text: var(--text-normal);
+  --ui-text-highlighted: var(--text-normal);
+  --ui-text-muted: var(--text-muted);
+  --ui-text-toned: var(--text-muted);
+  --ui-text-dimmed: var(--text-faint);
+  --ui-bg: var(--background-primary);
+  --ui-bg-elevated: var(--background-secondary);
+  --ui-border: var(--background-modifier-border);
+  --ui-border-accented: var(--background-modifier-border-hover);
+  --ui-primary: var(--interactive-accent);
+  --ui-info: var(--color-blue);
+  --ui-success: var(--color-green);
+  --ui-warning: var(--color-orange);
+  --ui-error: var(--color-red);
+  --ui-bg-muted: var(--background-secondary);
+  --ui-bg-accented: var(--background-modifier-hover);
+  --ui-bg-inverted: var(--text-normal);
+  --ui-text-inverted: var(--background-primary);
+  --ui-border-muted: var(--background-modifier-border);
+  --ui-border-inverted: var(--text-normal);
+  --ui-secondary: var(--color-purple);
+  --ui-neutral: var(--text-muted);
+  --ui-radius: var(--radius-s);
+  /* Obsidian's `--radius-xl` (16px) would otherwise replace Tailwind's `rounded-xl` scale step site-wide (nothing in section 3 reads it). */
+  --radius-xl: calc(var(--sk-radius) * 3);
+  --font-mono: var(--font-monospace);
+}
+
+/* ---- 3. Element mapping (editor content) and chrome ---------------------------------------------------------- */
+@layer components {
+  /* Root (`<html>`): the app chrome uses Obsidian's interface font and base colours. No `font-size` here: it would rescale every `rem`. */
+  .obsidian-theme {
+    background-color: var(--background-primary);
+    color: var(--text-normal);
+    font-family: var(--font-interface);
+  }
+  .obsidian-theme ::selection { background-color: var(--text-selection); }
+  /* `.tiptap` sets its own colour and line-height in core.css; the content uses Obsidian's text font and size. */
+  .obsidian-theme .tiptap {
+    color: var(--text-normal);
+    font-family: var(--font-text);
+    font-size: var(--font-text-size);
+    line-height: var(--line-height-normal);
+    caret-color: var(--caret-color);
+  }
+  .obsidian-theme .tiptap > :first-child { margin-top: 0; }
+
+  /* Block spacing follows Obsidian's `--p-spacing`; first/last children of nested blocks sit flush. */
+  .obsidian-theme .tiptap p { margin: 0 0 var(--p-spacing); }
+  .obsidian-theme .tiptap li > p { margin: 0; }
+
+  /* Headings: Obsidian sets the weight through `--font-weight` so `strong` inside a heading adds on top of it. */
+  .obsidian-theme .tiptap h1, .obsidian-theme .tiptap h2, .obsidian-theme .tiptap h3,
+  .obsidian-theme .tiptap h4, .obsidian-theme .tiptap h5, .obsidian-theme .tiptap h6 {
+    margin: var(--heading-spacing) 0 var(--p-spacing);
+    text-transform: none;
+  }
+  .obsidian-theme .tiptap h1 {
+    --font-weight: var(--h1-weight); --link-weight: var(--h1-weight);
+    font-variant: var(--h1-variant); letter-spacing: var(--h1-letter-spacing); line-height: var(--h1-line-height);
+    font-size: var(--h1-size); color: var(--h1-color); font-weight: var(--font-weight); font-style: var(--h1-style); font-family: var(--h1-font);
+  }
+  .obsidian-theme .tiptap h2 {
+    --font-weight: var(--h2-weight); --link-weight: var(--h2-weight);
+    font-variant: var(--h2-variant); letter-spacing: var(--h2-letter-spacing); line-height: var(--h2-line-height);
+    font-size: var(--h2-size); color: var(--h2-color); font-weight: var(--font-weight); font-style: var(--h2-style); font-family: var(--h2-font);
+  }
+  .obsidian-theme .tiptap h3 {
+    --font-weight: var(--h3-weight); --link-weight: var(--h3-weight);
+    font-variant: var(--h3-variant); letter-spacing: var(--h3-letter-spacing); line-height: var(--h3-line-height);
+    font-size: var(--h3-size); color: var(--h3-color); font-weight: var(--font-weight); font-style: var(--h3-style); font-family: var(--h3-font);
+  }
+  .obsidian-theme .tiptap h4 {
+    --font-weight: var(--h4-weight); --link-weight: var(--h4-weight);
+    font-variant: var(--h4-variant); letter-spacing: var(--h4-letter-spacing); line-height: var(--h4-line-height);
+    font-size: var(--h4-size); color: var(--h4-color); font-weight: var(--font-weight); font-style: var(--h4-style); font-family: var(--h4-font);
+  }
+  .obsidian-theme .tiptap h5 {
+    --font-weight: var(--h5-weight); --link-weight: var(--h5-weight);
+    font-variant: var(--h5-variant); letter-spacing: var(--h5-letter-spacing); line-height: var(--h5-line-height);
+    font-size: var(--h5-size); color: var(--h5-color); font-weight: var(--font-weight); font-style: var(--h5-style); font-family: var(--h5-font);
+  }
+  .obsidian-theme .tiptap h6 {
+    --font-weight: var(--h6-weight); --link-weight: var(--h6-weight);
+    font-variant: var(--h6-variant); letter-spacing: var(--h6-letter-spacing); line-height: var(--h6-line-height);
+    font-size: var(--h6-size); color: var(--h6-color); font-weight: var(--font-weight); font-style: var(--h6-style); font-family: var(--h6-font);
+  }
+  .obsidian-theme .tiptap li :is(h1, h2, h3, h4, h5) { margin-top: 0; margin-bottom: 0; }
+
+  /* Inline marks. Obsidian has no variables for strikethrough and underline, so those keep the browser look. */
+  .obsidian-theme .tiptap strong { font-weight: calc(var(--font-weight) + var(--bold-modifier)); color: var(--bold-color); }
+  .obsidian-theme .tiptap strong a { font-weight: calc(var(--link-weight) + var(--bold-modifier)); }
+  .obsidian-theme .tiptap em { font-style: italic; color: var(--italic-color); font-weight: var(--italic-weight); }
+
+  /* Links; `http(s)` targets take the external-link variables. */
+  .obsidian-theme .tiptap a {
+    --font-weight: var(--link-weight);
+    color: var(--link-color);
+    font-weight: var(--link-weight);
+    text-decoration-line: var(--link-decoration);
+    text-decoration-thickness: var(--link-decoration-thickness);
+    cursor: var(--cursor-link);
+  }
+  .obsidian-theme .tiptap a[href^="http"] {
+    color: var(--link-external-color);
+    text-decoration-line: var(--link-external-decoration);
+  }
+  @media (hover: hover) {
+    .obsidian-theme .tiptap a:hover { color: var(--link-color-hover); text-decoration-line: var(--link-decoration-hover); }
+    .obsidian-theme .tiptap a[href^="http"]:hover { color: var(--link-external-color-hover); text-decoration-line: var(--link-external-decoration-hover); }
+  }
+
+  /* Code */
+  .obsidian-theme .tiptap code {
+    color: var(--code-normal);
+    font-family: var(--font-monospace);
+    font-size: var(--code-size);
+    background-color: var(--code-background);
+    border-radius: var(--code-radius);
+    padding: 0.15em 0.3em;
+    border: var(--code-border-width) solid var(--code-border-color);
+    box-decoration-break: clone;
+  }
+  .obsidian-theme .tiptap pre {
+    font-family: var(--font-monospace);
+    font-size: inherit;
+    color: var(--code-normal);
+    background-color: var(--code-background);
+    border: var(--code-border-width) solid var(--code-border-color);
+    border-radius: var(--code-radius);
+    padding: var(--size-4-3) var(--size-4-4);
+    margin: 0 0 var(--p-spacing);
+    min-height: 38px;
+    white-space: var(--code-white-space);
+    overflow-x: auto;
+  }
+  .obsidian-theme .tiptap pre code {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    color: inherit;
+    font-size: var(--code-size);
+  }
+
+  /* Blockquote */
+  .obsidian-theme .tiptap blockquote {
+    color: var(--blockquote-color);
+    font-style: var(--blockquote-font-style);
+    background-color: var(--blockquote-background-color);
+    border-left: var(--blockquote-border-thickness) solid var(--blockquote-border-color);
+    padding: 0 0 0 var(--size-4-6);
+    margin: 0 0 var(--p-spacing);
+  }
+  .obsidian-theme .tiptap blockquote > :first-child { margin-top: 0; }
+  .obsidian-theme .tiptap blockquote > :last-child { margin-bottom: 0; }
+
+  /* Horizontal rule; keeps the accent while selected (core.css rule has the same specificity otherwise). */
+  .obsidian-theme .tiptap hr {
+    border: none;
+    border-top: var(--hr-thickness) solid var(--hr-color);
+    margin: 0 0 var(--p-spacing);
+  }
+  .obsidian-theme .tiptap hr.ProseMirror-selectednode { border-top-color: var(--interactive-accent); }
+
+  /* Lists */
+  .obsidian-theme .tiptap ul, .obsidian-theme .tiptap ol {
+    padding-inline-start: var(--list-indent);
+    margin: 0 0 var(--p-spacing);
+  }
+  .obsidian-theme .tiptap :is(ul, ol) :is(ul, ol) { margin-block: 0; }
+  .obsidian-theme .tiptap li { padding-block: var(--list-spacing); }
+  .obsidian-theme .tiptap li::marker { color: var(--list-marker-color); }
+
+  /* Placeholder (`is-empty` from the Placeholder extension) */
+  .obsidian-theme .tiptap .is-empty::before { color: var(--text-faint); }
+
+  /* #tag chip (mentions.css): Obsidian's `a.tag` */
+  .obsidian-theme .tiptap .tag {
+    background-color: var(--tag-background);
+    border: var(--tag-border-width) solid var(--tag-border-color);
+    border-radius: var(--tag-radius);
+    color: var(--tag-color);
+    font-size: var(--tag-size);
+    font-weight: var(--tag-weight);
+    text-decoration: var(--tag-decoration);
+    padding: var(--tag-padding-y) var(--tag-padding-x);
+    line-height: 1;
+  }
+  @media (hover: hover) {
+    .obsidian-theme .tiptap .tag:hover {
+      background-color: var(--tag-background-hover);
+      border: var(--tag-border-width) solid var(--tag-border-color-hover);
+      color: var(--tag-color-hover);
+      text-decoration: var(--tag-decoration-hover);
+    }
+  }
+
+  /* @mention chip: accent colour (a mentioned user's own `--mention-color` still tints it) */
+  .obsidian-theme .tiptap .mention {
+    color: var(--mention-color, var(--text-accent));
+    background: var(--background-modifier-hover);
+  }
+
+  /* Composite blocks and media blocks look like Obsidian embeds. Level three and deeper keep core.css's thin border. */
+  .obsidian-theme .tiptap .composite,
+  .obsidian-theme .tiptap .media-block {
+    border-left: var(--embed-border-start);
+    background: var(--embed-background);
+  }
+  .obsidian-theme .tiptap .media-block { padding: var(--embed-padding); }
+  .obsidian-theme .tiptap .composite .composite .composite { border-left-width: 1px; }
+
+  /* Images */
+  .obsidian-theme .tiptap img { border-radius: var(--radius-s); }
+}

package/dist/styles/tokens.css

@@ -0,0 +1,29 @@
+/* Shared SKAILE design tokens (`--sk-*`). The editor, the annotation inbox and the agent inbox read the same variables,
+   so a host maps its design system once (e.g. `--sk-primary: var(--ui-primary)` or `var(--p-primary-500)`). Declared
+   under `:where()` (specificity 0), so repeated declarations across packages are harmless and any host rule wins.
+   Dark mode is values only: the host sets `.dark`, nothing else changes. */
+:where(:root) {
+  --sk-bg: #ffffff;
+  --sk-fg: #18181b;
+  --sk-muted: #71717a;
+  --sk-border: #e4e4e7;
+  --sk-primary: #2563eb;
+  --sk-primary-fg: #ffffff;
+  --sk-success: #16a34a;
+  --sk-warning: #d97706;
+  --sk-danger: #dc2626;
+  --sk-radius: 0.5rem;
+  --sk-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+
+:where(.dark) {
+  --sk-bg: #18181b;
+  --sk-fg: #fafafa;
+  --sk-muted: #a1a1aa;
+  --sk-border: #3f3f46;
+  --sk-primary: #60a5fa;
+  --sk-primary-fg: #0b1220;
+  --sk-success: #4ade80;
+  --sk-warning: #fbbf24;
+  --sk-danger: #f87171;
+}

package/dist/styles/transcript.css

@@ -0,0 +1,13 @@
+/* Transcript feature styles: speaker segments (TranscriptSegmentView). Import after `tailwindcss` and the UI kit's stylesheet (`vue/kit/nuxt-ui.css`, `vue/kit/primevue.css`). */
+@layer components {
+  /* The text column may shrink below its longest word (grid `1fr` alone would overflow instead). */
+  .tiptap .transcript-segment__text { min-width: 0; overflow-wrap: anywhere; }
+}
+
+/* AI review preview: serialized speaker segments have no node view, show the speaker as the label. */
+@layer components {
+  .tiptap .ai-review-ins-block [data-type='transcript-segment'][data-speaker]::before {
+    content: attr(data-speaker) ': ';
+    font-weight: 600;
+  }
+}