@linto-ai/transcript-ui-ui 0.9.0

package/src/molecules/TurnTextEditor.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from "vue"
+import { placeCaretAt } from "../utils/placeCaretAt"
+import { computeSelectionOffset } from "../utils/computeSelectionOffset"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+// Plain-text in-place editor for one turn. Strictly a single text node inside
+// a plaintext-only contenteditable — never any markup in editable content
+// (hard-learned rule from the ProseMirror era).
+const props = defineProps<{
+  text: string
+  caretOffset?: number
+}>()
+
+const emit = defineEmits<{
+  save: [text: string]
+  cancel: []
+  split: [text: string, offset: number]
+}>()
+
+const { t } = useI18n()
+const editableRef = useTemplateRef<HTMLElement>("editable")
+
+// Set once an explicit outcome (save/cancel/split) was emitted, so the blur
+// that follows it — or the one fired during unmount — can't emit a second one.
+let settled = false
+
+onMounted(() => {
+  const el = editableRef.value
+  if (!el) return
+  placeCaretAt(el, props.caretOffset ?? props.text.length)
+})
+
+function getText(): string {
+  return editableRef.value?.innerText ?? ""
+}
+
+defineExpose({ getText })
+
+function settle(emitOutcome: () => void): void {
+  if (settled) return
+  settled = true
+  emitOutcome()
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Enter") {
+    // A turn is a single paragraph: Enter splits it at the caret instead of
+    // inserting a line break.
+    event.preventDefault()
+    const el = editableRef.value
+    const text = getText()
+    const offset = (el && computeSelectionOffset(el)) ?? text.length
+    settle(() => emit("split", text, offset))
+  } else if (event.key === "Escape") {
+    event.preventDefault()
+    settle(() => emit("cancel"))
+  }
+}
+
+// Leaving the field commits (Notion-like inline editing). Escape is the only
+// way out without saving.
+function onBlur() {
+  settle(() => emit("save", getText()))
+}
+</script>
+
+<template>
+  <p
+    ref="editable"
+    class="turn-text-editor"
+    contenteditable="plaintext-only"
+    role="textbox"
+    aria-multiline="false"
+    :aria-label="t('transcription.turnEditor')"
+    spellcheck="true"
+    @keydown="onKeydown"
+    @blur="onBlur"
+    v-text="text" />
+</template>
+
+<style scoped>
+.turn-text-editor {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+  outline: 2px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-surface);
+  padding: 0;
+}
+</style>

package/src/styles/base.css

@@ -0,0 +1,110 @@
+/* Utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Overlay (shared by sidebar drawer + sheet select) */
+.editor-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-overlay);
+  animation: overlay-fade-in 200ms ease;
+}
+
+/* Drawer mobile (sidebar) */
+.sidebar-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(320px, 85vw);
+  z-index: var(--z-drawer);
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-md);
+  animation: drawer-slide-in 250ms ease;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-close {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.sidebar-close:hover {
+  background-color: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* Keyframes */
+@keyframes overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-slide-in {
+  from {
+    translate: 100% 0;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-overlay,
+  .sidebar-drawer {
+    animation: none;
+  }
+}
+
+/* Wavesurfer ::part (cannot work in scoped styles) */
+/* No backdrop-filter: there is one region per turn (hundreds on a long
+   transcript), and each backdrop-filter forces a separate WebRender backdrop
+   render target — on a multi-hour document this balloons GPU/GTT memory to
+   several GB and freezes weaker machines. The border/shadow alone read fine. */
+.waveform-container ::part(region) {
+  border-top: 2px solid var(--region-color, rgba(255, 255, 255, 0.4));
+  border-bottom: 1px solid var(--region-color, rgba(255, 255, 255, 0.4));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Turn nodes use `content-visibility: auto` for long-document perf, which
+   implies paint containment and clips any overflow to the turn's box. The
+   speaker popover floats out of the turn, so it gets cut off at the turn's
+   bottom edge. While its trigger is open (Reka sets data-state="open"), drop
+   the containment on that turn so the popover can overflow freely. The turn is
+   on-screen when open, so lifting content-visibility causes no layout shift.
+   Global (not scoped) because the open trigger is rendered by another
+   component, so a scoped :has() selector would not match it. */
+section.turn:has([data-state="open"]) {
+  content-visibility: visible;
+}

package/src/styles/fonts.css

@@ -0,0 +1,45 @@
+/* Atkinson Hyperlegible Next — main font */
+@font-face {
+  font-family: "Atkinson Hyperlegible Next";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Next";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/fonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Next";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Next";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
+}
+
+/* Atkinson Hyperlegible Mono — monospace font */
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/fonts/AtkinsonHyperlegibleMono-Medium.woff2") format("woff2");
+}

package/src/styles/popover-list.css

@@ -0,0 +1,67 @@
+/* Shared surface and row styles for PopoverList and similar anchored panels.
+   Kept global because Reka portals render outside the component's scoped
+   CSS boundary. */
+
+.popover-list {
+  min-width: 180px;
+  padding: var(--spacing-xs);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px
+    color-mix(in srgb, var(--color-text-primary) 15%, transparent);
+  z-index: 50;
+}
+
+.popover-list__items {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.popover-list__item {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  cursor: pointer;
+}
+
+.popover-list__item:hover,
+.popover-list__item[data-highlighted] {
+  background-color: var(--color-surface-hover);
+}
+
+.popover-list__item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.popover-list__item--current {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary) 10%,
+    transparent
+  );
+}
+
+.popover-list__divider {
+  height: 1px;
+  background-color: var(--color-border);
+  margin: var(--spacing-xs) 0;
+}
+
+.popover-list__footer {
+  padding: var(--spacing-xs);
+}

package/src/styles/variables.css

@@ -0,0 +1,131 @@
+/*
+ * Design tokens
+ *
+ * Public theming API — these CSS custom properties can be overridden from
+ * outside the web component by setting them on the <linto-editor> element:
+ *
+ *   linto-editor {
+ *     --color-primary: #e63946;
+ *     --color-background: #fafafa;
+ *   }
+ *
+ * Colors:
+ *   --color-primary          Accent / brand color
+ *   --color-primary-hover    Primary hover state
+ *   --color-background       Page background
+ *   --color-surface          Cards, panels, player
+ *   --color-surface-hover    Hover on surfaces
+ *   --color-text-primary     Main text
+ *   --color-text-secondary   Secondary text (timestamps…)
+ *   --color-text-muted       Muted text (labels)
+ *   --color-border           Borders
+ *   --color-border-light     Light borders
+ *
+ * Typography, spacing, radius, and shadows are also overridable.
+ */
+
+:root,
+:host {
+  /* Colors — light theme */
+  --color-background: #f8f9fa;
+  --color-surface: #ffffff;
+  --color-surface-hover: #f1f3f5;
+  --color-text-primary: #1a1d21;
+  --color-text-secondary: #495057;
+  --color-text-muted: #6c757d;
+  --color-primary: #4263eb;
+  --color-primary-hover: #3b5bdb;
+  --color-border: #dee2e6;
+  --color-border-light: #e9ecef;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-danger: #e53935;
+  --color-danger-hover: #c62828;
+  --color-danger-soft: #fdecea;
+
+  /* Typography */
+  --font-family:
+    "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
+  --font-family-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
+  --font-size-xs: 0.875rem;
+  --font-size-sm: 1rem;
+  --font-size-base: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.75rem;
+  --line-height: 1.6;
+
+  /* Spacing */
+  --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* Layout */
+  --sidebar-width: 300px;
+  --header-height: 56px;
+
+  /* Shadows */
+  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
+
+  /* Transitions */
+  --transition-duration: 150ms;
+
+  /* Z-index scale */
+  --z-sticky: 10;
+  --z-overlay: 50;
+  --z-drawer: 1000;
+  --z-dropdown: 1100;
+
+  /* Glass effect — backdrop blur intentionally removed: each backdrop-filter
+     forces a WebRender render target, which on long transcripts (one waveform
+     region per turn, tall scroll container) balloons GPU memory to several GB
+     and freezes weaker machines. Keep the semi-opaque background only. */
+  --glass-background: rgba(255, 255, 255, 0.8);
+  --glass-border: rgba(255, 255, 255, 0.3);
+}
+
+:host,
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height);
+  color: var(--color-text-primary);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:host {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Dev mode SPA (ignored in Shadow DOM — these elements don't exist) */
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  height: 100%;
+  overflow: hidden;
+}

package/src/turndown-plugin-gfm.d.ts

@@ -0,0 +1,10 @@
+declare module "turndown-plugin-gfm" {
+  import type TurndownService from "turndown"
+
+  type Plugin = (service: TurndownService) => void
+
+  export const gfm: Plugin
+  export const strikethrough: Plugin
+  export const tables: Plugin
+  export const taskListItems: Plugin
+}

package/src/utils/computeInitials.ts

@@ -0,0 +1,10 @@
+/** Initials shown in a user avatar: first letter of the first two words,
+ *  uppercased — "Marie Dupont" → "MD", "marie" → "M", "" → "?". */
+export function computeInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  if (words.length === 0) return "?"
+  return words
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join("")
+}

package/src/utils/computeSelectionOffset.ts

@@ -0,0 +1,10 @@
+import { computeTextOffsetInContainer } from "./computeTextOffsetInContainer"
+import { getSelectionFocus } from "./shadowAwareSelection"
+
+/** Character offset of the current selection focus inside `container`'s plain
+ *  text, or null when the selection lives elsewhere. */
+export function computeSelectionOffset(container: HTMLElement): number | null {
+  const focus = getSelectionFocus(container)
+  if (!focus || !container.contains(focus.node)) return null
+  return computeTextOffsetInContainer(container, focus.node, focus.offset)
+}

package/src/utils/computeTextOffsetInContainer.ts

@@ -0,0 +1,54 @@
+const TEXT_NODE = 3
+
+/**
+ * Absolute character offset of a caret position inside `container`'s plain
+ * text — the sum of every text node's length before the position, in document
+ * order, plus the local offset. Works whether the caret API resolved a text
+ * node (offset in characters) or an element (offset in child index).
+ */
+export function computeTextOffsetInContainer(
+  container: Node,
+  target: Node,
+  offsetInTarget: number,
+): number {
+  if (target.nodeType === TEXT_NODE) {
+    return textLengthBefore(container, target) + offsetInTarget
+  }
+  // Element position: the caret sits before target's Nth child.
+  const child = target.childNodes[offsetInTarget]
+  if (child) return textLengthBefore(container, child)
+  return textLengthUnder(target) + textLengthBefore(container, target)
+}
+
+/** Total length of the text nodes preceding `stop` in document order. */
+function textLengthBefore(container: Node, stop: Node): number {
+  let length = 0
+  let reached = false
+
+  function walk(node: Node): void {
+    if (reached || node === stop) {
+      reached = true
+      return
+    }
+    if (node.nodeType === TEXT_NODE) {
+      length += node.nodeValue?.length ?? 0
+      return
+    }
+    for (const child of Array.from(node.childNodes)) {
+      walk(child)
+      if (reached) return
+    }
+  }
+
+  walk(container)
+  return length
+}
+
+function textLengthUnder(node: Node): number {
+  if (node.nodeType === TEXT_NODE) return node.nodeValue?.length ?? 0
+  let length = 0
+  for (const child of Array.from(node.childNodes)) {
+    length += textLengthUnder(child)
+  }
+  return length
+}

package/src/utils/highlight.ts

@@ -0,0 +1,46 @@
+// Lazy-loaded syntax highlighter. Imported dynamically by CodeBlock so Prism
+// and its grammars land in a separate chunk, never the initial bundle.
+// The classic Prism theme CSS is injected separately (see webcomponent.ts for
+// the Shadow DOM, main.ts for dev) — this module only produces token markup.
+import Prism from "prismjs"
+import DOMPurify from "dompurify"
+
+// Grammars, in dependency order (javascript needs clike, typescript needs
+// javascript). Extend this list to support more languages.
+import "prismjs/components/prism-markup"
+import "prismjs/components/prism-css"
+import "prismjs/components/prism-clike"
+import "prismjs/components/prism-c"
+import "prismjs/components/prism-java"
+import "prismjs/components/prism-javascript"
+import "prismjs/components/prism-jsx"
+import "prismjs/components/prism-typescript"
+import "prismjs/components/prism-json"
+import "prismjs/components/prism-bash"
+import "prismjs/components/prism-python"
+import "prismjs/components/prism-yaml"
+import "prismjs/components/prism-sql"
+import "prismjs/components/prism-markdown"
+import "prismjs/components/prism-diff"
+
+// Markdown fence languages → Prism canonical names.
+const ALIASES: Record<string, string> = {
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  py: "python",
+  yml: "yaml",
+  html: "markup",
+  xml: "markup",
+  md: "markdown",
+}
+
+// Returns sanitized token HTML, or null when the language is unknown (caller
+// falls back to plain text).
+export function highlightCode(code: string, lang: string): string | null {
+  const name = ALIASES[lang] ?? lang
+  const grammar = Prism.languages[name]
+  if (!grammar) return null
+  return DOMPurify.sanitize(Prism.highlight(code, grammar, name))
+}

package/src/utils/markdown.ts

@@ -0,0 +1,56 @@
+import { marked } from "marked"
+import type { Token, TokensList } from "marked"
+import DOMPurify from "dompurify"
+
+// Shared markdown renderer for MarkdownView (v-html) and MarkdownEditor
+// (innerHTML / execCommand "insertHTML"). The source — LLM output,
+// collaboratively-edited content, pasted text — is untrusted, so marked's raw
+// HTML output MUST be sanitized before it reaches the DOM. marked removed its
+// built-in `sanitize` option in v8 and explicitly defers to a dedicated
+// sanitizer (DOMPurify), so without this every `<img onerror>` / `javascript:`
+// payload would execute in the host page (the editor ships as a Web Component).
+marked.setOptions({ gfm: true, breaks: false })
+
+export function renderMarkdown(md: string): string {
+  if (!md) return ""
+  const rawHtml = marked.parse(md, { async: false }) as string
+  return DOMPurify.sanitize(rawHtml)
+}
+
+// Code blocks are extracted as their own segments so the view can render them
+// with a real Vue component (copy button, etc.) instead of inert v-html. Every
+// other run of block tokens is parsed back to sanitized HTML as before.
+export type MarkdownSegment =
+  | { type: "html"; html: string }
+  | { type: "code"; code: string; lang: string }
+
+export function renderMarkdownSegments(md: string): MarkdownSegment[] {
+  if (!md) return []
+
+  const tokens = marked.lexer(md)
+  const segments: MarkdownSegment[] = []
+  let buffer: Token[] = []
+
+  // Reference-link definitions ([x][ref] … [ref]: url) live on tokens.links,
+  // not on individual tokens. Each sliced group must carry them over or
+  // reference links break when re-parsed in isolation.
+  const flush = () => {
+    if (buffer.length === 0) return
+    const group = buffer as TokensList
+    group.links = tokens.links
+    segments.push({ type: "html", html: DOMPurify.sanitize(marked.parser(group)) })
+    buffer = []
+  }
+
+  for (const token of tokens) {
+    if (token.type === "code") {
+      flush()
+      segments.push({ type: "code", code: token.text, lang: token.lang ?? "" })
+    } else {
+      buffer.push(token)
+    }
+  }
+  flush()
+
+  return segments
+}

package/src/utils/placeCaretAt.ts

@@ -0,0 +1,23 @@
+import { getShadowAwareSelection } from "./shadowAwareSelection"
+
+const TEXT_NODE = 3
+
+/**
+ * Focus an editable element holding a single text node and place the caret at
+ * `offset` (clamped). Falls back to a plain focus when the element is empty.
+ */
+export function placeCaretAt(element: HTMLElement, offset: number): void {
+  element.focus({ preventScroll: true })
+  const textNode = element.firstChild
+  if (!textNode || textNode.nodeType !== TEXT_NODE) return
+
+  const clamped = Math.max(0, Math.min(offset, textNode.nodeValue?.length ?? 0))
+  const range = element.ownerDocument.createRange()
+  range.setStart(textNode, clamped)
+  range.collapse(true)
+
+  const selection = getShadowAwareSelection(element)
+  if (!selection) return
+  selection.removeAllRanges()
+  selection.addRange(range)
+}