@neurocode-ai/session-ui 1.18.8

package/src/components/markdown-worker-transport.test.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "bun:test"
+import { createWorkerTransport } from "./markdown-worker-transport"
+
+test("posts one request and retains only the latest queued snapshot per key", () => {
+  const posted: number[] = []
+  const superseded: number[] = []
+  const transport = createWorkerTransport<{ id: number; key: string }>({
+    post: (request) => posted.push(request.id),
+    supersede: (request) => superseded.push(request.id),
+  })
+
+  transport.send({ id: 1, key: "code" })
+  transport.send({ id: 2, key: "code" })
+  transport.send({ id: 3, key: "code" })
+
+  expect(posted).toEqual([1])
+  expect(superseded).toEqual([2])
+  expect(transport.queued()).toBe(1)
+  transport.complete("code", 1)
+  expect(posted).toEqual([1, 3])
+  expect(transport.queued()).toBe(0)
+})
+
+test("ignores a disposed request response after the key is reused", () => {
+  const posted: number[] = []
+  const transport = createWorkerTransport<{ id: number; key: string }>({
+    post: (request) => posted.push(request.id),
+    supersede: () => {},
+  })
+
+  transport.send({ id: 1, key: "code" })
+  transport.dispose("code")
+  transport.send({ id: 2, key: "code" })
+  transport.send({ id: 3, key: "code" })
+  transport.complete("code", 1)
+
+  expect(posted).toEqual([1, 2])
+  expect(transport.queued()).toBe(1)
+  transport.complete("code", 2)
+  expect(posted).toEqual([1, 2, 3])
+})
+
+test("drops queued snapshots when a key is disposed", () => {
+  const superseded: number[] = []
+  const transport = createWorkerTransport<{ id: number; key: string }>({
+    post: () => {},
+    supersede: (request) => superseded.push(request.id),
+  })
+
+  transport.send({ id: 1, key: "code" })
+  transport.send({ id: 2, key: "code" })
+  transport.dispose("code")
+
+  expect(superseded).toEqual([2])
+  expect(transport.queued()).toBe(0)
+})

package/src/components/markdown-worker-transport.ts

@@ -0,0 +1,41 @@
+export function createWorkerTransport<T extends { id: number; key: string }>(input: {
+  post: (request: T) => void
+  supersede: (request: T) => void
+}) {
+  const active = new Map<string, T>()
+  const queued = new Map<string, T>()
+
+  return {
+    send(request: T) {
+      if (!active.has(request.key)) {
+        active.set(request.key, request)
+        input.post(request)
+        return
+      }
+      const previous = queued.get(request.key)
+      if (previous) input.supersede(previous)
+      queued.set(request.key, request)
+    },
+    complete(key: string, id: number) {
+      if (active.get(key)?.id !== id) return
+      active.delete(key)
+      const next = queued.get(key)
+      if (!next) return
+      queued.delete(key)
+      active.set(key, next)
+      input.post(next)
+    },
+    dispose(key: string) {
+      active.delete(key)
+      const request = queued.get(key)
+      if (request) input.supersede(request)
+      queued.delete(key)
+    },
+    reset() {
+      queued.forEach(input.supersede)
+      queued.clear()
+      active.clear()
+    },
+    queued: () => queued.size,
+  }
+}

package/src/components/markdown-worker.ts

@@ -0,0 +1,122 @@
+import MarkdownShikiWorkerUrl from "./markdown-shiki.worker.ts?worker&url"
+import { OpenCodeTheme } from "@neurocode-ai/ui/context/marked"
+import {
+  applyMarkdownWorkerResponse,
+  shouldReleaseMarkdownWorkerState,
+  type MarkdownWorkerRequest,
+  type MarkdownWorkerResponse,
+  type MarkdownWorkerState,
+} from "./markdown-worker-protocol"
+import { createWorkerTransport } from "./markdown-worker-transport"
+
+type Pending = {
+  key: string
+  complete: boolean
+  resolve: (state: MarkdownWorkerState) => void
+  reject: (error: Error) => void
+}
+
+let worker: Worker | undefined
+let disabled: Error | undefined
+let nextID = 0
+const pending = new Map<number, Pending>()
+const states = new Map<string, MarkdownWorkerState>()
+const keys = new Set<string>()
+const latest = new Map<string, number>()
+const transport = createWorkerTransport<Extract<MarkdownWorkerRequest, { type: "highlight" }>>({
+  post: (request) => worker!.postMessage(request),
+  supersede: (request) => {
+    const result = pending.get(request.id)
+    if (!result) return
+    pending.delete(request.id)
+    result.reject(new MarkdownWorkerSupersededError())
+  },
+})
+
+export function highlightStreamingCode(key: string, text: string, language: string, complete = false) {
+  const instance = getWorker()
+  const id = ++nextID
+  latest.set(key, id)
+  keys.delete(key)
+  keys.add(key)
+  if (keys.size > 200) disposeStreamingCode(keys.values().next().value!)
+  return new Promise<MarkdownWorkerState>((resolve, reject) => {
+    pending.set(id, { key, complete, resolve, reject })
+    transport.send({ type: "highlight", id, key, text, language, complete })
+  })
+}
+
+export function disposeStreamingCode(key: string) {
+  keys.delete(key)
+  latest.delete(key)
+  states.delete(key)
+  transport.dispose(key)
+  pending.forEach((request, id) => {
+    if (request.key !== key) return
+    pending.delete(id)
+    request.reject(new MarkdownWorkerDisposedError())
+  })
+  worker?.postMessage({ type: "dispose", key } satisfies MarkdownWorkerRequest)
+}
+
+export class MarkdownWorkerDisposedError extends Error {}
+export class MarkdownWorkerSupersededError extends Error {}
+export class MarkdownWorkerUnavailableError extends Error {}
+
+function getWorker() {
+  if (worker) return worker
+  if (disabled) throw new MarkdownWorkerUnavailableError(disabled.message)
+  try {
+    worker = new Worker(MarkdownShikiWorkerUrl, { type: "module" })
+  } catch (error) {
+    disabled = error instanceof Error ? error : new Error(String(error))
+    throw new MarkdownWorkerUnavailableError(disabled.message)
+  }
+  worker.onmessage = (event: MessageEvent<MarkdownWorkerResponse>) => {
+    const result = pending.get(event.data.id)
+    if (!result) {
+      transport.complete(event.data.key, event.data.id)
+      return
+    }
+    pending.delete(event.data.id)
+    if (!keys.has(event.data.key)) {
+      result.reject(new MarkdownWorkerDisposedError())
+      transport.complete(event.data.key, event.data.id)
+      return
+    }
+    if (event.data.type === "superseded") {
+      result.reject(new MarkdownWorkerSupersededError())
+      transport.complete(event.data.key, event.data.id)
+      return
+    }
+    if (event.data.type === "error") {
+      result.reject(new Error(event.data.message))
+      transport.complete(event.data.key, event.data.id)
+      return
+    }
+    const state = applyMarkdownWorkerResponse(states.get(event.data.key), event.data)
+    if (shouldReleaseMarkdownWorkerState(result.complete, latest.get(event.data.key), event.data.id)) {
+      states.delete(event.data.key)
+      keys.delete(event.data.key)
+      latest.delete(event.data.key)
+    } else states.set(event.data.key, state)
+    result.resolve(state)
+    transport.complete(event.data.key, event.data.id)
+  }
+  const fail = (message: string) => {
+    const error = new Error(message)
+    disabled = error
+    transport.reset()
+    pending.forEach((request) => request.reject(error))
+    pending.clear()
+    states.clear()
+    keys.clear()
+    latest.clear()
+    worker?.terminate()
+    worker = undefined
+  }
+  worker.onerror = (event) => fail(event.message || "Markdown highlighting worker failed")
+  worker.onmessageerror = () => fail("Markdown worker response failed")
+  worker.postMessage({ type: "init", theme: OpenCodeTheme } satisfies MarkdownWorkerRequest)
+  return worker
+}

package/src/components/markdown.css

@@ -0,0 +1,377 @@
+[data-component="markdown"] {
+  --markdown-inline-code-path-color: var(--v2-text-text-code-accent);
+  --markdown-inline-code-color: var(--v2-text-text-code-accent);
+  --markdown-inline-code-bg-mix: 8%;
+  --markdown-shell-code-background: var(--v2-background-bg-layer-02);
+  --markdown-shell-code-border: var(--v2-border-border-muted);
+  --markdown-shell-code-color: var(--v2-text-text-base);
+  --markdown-shell-code-token-color: currentColor;
+
+  /* Reset & Base Typography */
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  color: var(--v2-text-text-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base); /* 14px */
+  line-height: 160%;
+
+  /* Spacing for flow */
+  > *:first-child {
+    margin-top: 0;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
+  > [data-markdown-block]:first-child > *:first-child {
+    margin-top: 0;
+  }
+  > [data-markdown-block]:last-child > *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Headings: Sized by level, distinguished by color and spacing */
+  h1 {
+    font-size: 17px;
+    color: var(--v2-text-text-base);
+    font-weight: 600;
+    margin-top: 28px;
+    margin-bottom: 12px;
+    line-height: var(--line-height-large);
+  }
+
+  h2 {
+    font-size: 15px;
+    color: var(--v2-text-text-base);
+    font-weight: 600;
+    margin-top: 24px;
+    margin-bottom: 10px;
+    line-height: var(--line-height-large);
+  }
+
+  h3 {
+    font-size: 13px;
+    color: var(--v2-text-text-base);
+    font-weight: var(--font-weight-medium);
+    margin-top: 20px;
+    margin-bottom: 8px;
+    line-height: var(--line-height-large);
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 13px;
+    color: var(--v2-text-text-muted);
+    font-weight: var(--font-weight-medium);
+    margin-top: 20px;
+    margin-bottom: 8px;
+    line-height: var(--line-height-large);
+  }
+
+  /* Emphasis & Strong: Neutral strong color */
+  strong,
+  b {
+    color: var(--v2-text-text-base);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Paragraphs */
+  p {
+    margin-bottom: 12px;
+  }
+
+  /* Links */
+  a {
+    color: var(--text-interactive-base);
+    text-decoration: none;
+    font-weight: inherit;
+  }
+
+  a:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    margin-top: 8px;
+    margin-bottom: 12px;
+    margin-left: 0;
+    padding-left: 32px;
+    list-style-position: outside;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+    padding-left: 2.25rem;
+  }
+
+  li {
+    margin-bottom: 8px;
+  }
+
+  li > p:first-child {
+    display: inline;
+    margin: 0;
+  }
+
+  li:has(> input[type="checkbox"]),
+  li:has(> p > input[type="checkbox"]) {
+    position: relative;
+    list-style-type: none;
+  }
+
+  li > input[type="checkbox"],
+  li > p > input[type="checkbox"] {
+    position: absolute;
+    top: 4px;
+    left: -20px;
+    margin: 0;
+  }
+
+  li > p + p {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  li::marker {
+    color: var(--v2-text-text-muted);
+  }
+
+  /* Nested lists spacing */
+  li > ul,
+  li > ol {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding-left: 1rem; /* Minimal indent for nesting only */
+  }
+
+  li > ol {
+    padding-left: 1.75rem;
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-left: 0.5px solid var(--v2-border-border-base);
+    margin: 1rem 0;
+    padding-left: 0.5rem;
+    color: var(--v2-text-text-muted);
+    font-style: normal;
+  }
+
+  /* Horizontal Rule - Invisible spacing only */
+  hr {
+    border: none;
+    height: 0;
+    margin: 32px 0;
+  }
+
+  .shiki {
+    background: var(--color-background-stronger);
+    color: var(--text-base);
+    font-size: 13px;
+    padding: 12px;
+    border-radius: 6px;
+    border: 0.5px solid var(--v2-border-border-base);
+  }
+
+  [data-component="markdown-code"] {
+    position: relative;
+  }
+
+  [data-component="markdown-code"][data-code-kind="shell"] .shiki {
+    background: var(--markdown-shell-code-background);
+    border-color: var(--markdown-shell-code-border);
+    color: var(--markdown-shell-code-color);
+  }
+
+  [data-component="markdown-code"][data-code-kind="shell"] code {
+    color: var(--markdown-shell-code-color);
+  }
+
+  [data-component="markdown-code"][data-code-kind="shell"] code span {
+    color: var(--markdown-shell-code-token-color) !important;
+  }
+
+  [data-slot="markdown-copy-button"] {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 1;
+  }
+
+  [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"],
+  [data-slot="markdown-copy-button"]:focus-within {
+    opacity: 1;
+  }
+
+  [data-slot="markdown-copy-button"] [data-check-icon] {
+    display: none;
+  }
+
+  [data-slot="markdown-copy-button"][data-copied="true"] [data-copy-icon] {
+    display: none;
+  }
+
+  [data-slot="markdown-copy-button"][data-copied="true"] [data-check-icon] {
+    display: inline-flex;
+  }
+
+  pre {
+    margin-top: 12px;
+    margin-bottom: 24px;
+    overflow: auto;
+
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  :not(pre) > code {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    color: var(--v2-text-text-base);
+    font-weight: var(--font-weight-medium);
+    padding: 2px 4px;
+    border-radius: 4px;
+    background: color-mix(in oklch, var(--v2-text-text-base) var(--markdown-inline-code-bg-mix), transparent);
+  }
+
+  :not(pre) > code[data-inline-code-kind="path"] {
+    color: var(--markdown-inline-code-path-color);
+    background: color-mix(
+      in oklch,
+      var(--markdown-inline-code-path-color) var(--markdown-inline-code-bg-mix),
+      transparent
+    );
+  }
+
+  a.external-link > code[data-inline-code-kind="url"] {
+    color: var(--markdown-inline-code-color);
+    background: none;
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklch, var(--markdown-inline-code-color) 25%, transparent);
+    text-underline-offset: 2px;
+  }
+
+  /* Tables */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+    font-size: var(--font-size-base);
+    display: block;
+    overflow-x: auto;
+  }
+
+  th,
+  td {
+    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
+    border-bottom: 0.5px solid var(--v2-border-border-muted);
+    padding: 12px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    color: var(--v2-text-text-base);
+    font-weight: var(--font-weight-medium);
+    border-bottom: 0.5px solid var(--v2-border-border-base);
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 1.5rem 0;
+    display: block;
+  }
+}
+
+body[data-new-layout] [data-component="markdown"] {
+  [data-slot="markdown-copy-button"]::after {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 6px;
+    border: 0;
+    border-radius: 4px;
+    background: var(--v2-background-bg-layer-01);
+    box-shadow: var(--v2-elevation-floating);
+    color: var(--v2-text-text-base);
+    user-select: none;
+    font-size: 11px;
+    font-weight: 530;
+    line-height: 12px;
+    letter-spacing: 0.05px;
+    font-variant-numeric: tabular-nums;
+    font-variation-settings: "slnt" 0;
+  }
+}
+
+body:not([data-new-layout]) [data-component="markdown"] {
+  color: var(--text-strong);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: 14px;
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+  }
+
+  strong,
+  b {
+    color: var(--text-strong);
+  }
+
+  li::marker {
+    color: var(--text-weak);
+  }
+
+  blockquote {
+    border-left: 2px solid var(--border-weak-base);
+    color: var(--text-weak);
+  }
+
+  .shiki {
+    border-color: var(--border-weak-base);
+  }
+
+  :not(pre) > code {
+    color: var(--syntax-string);
+    padding: 0;
+    border-radius: 0;
+    background: none;
+  }
+
+  th,
+  td {
+    border-bottom: 1px solid var(--border-weaker-base);
+  }
+
+  th {
+    color: var(--text-strong);
+    border-bottom-color: var(--border-weak-base);
+  }
+}
+
+[data-component="markdown"] a.external-link:hover > code {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}

package/src/components/markdown.stories.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import * as mod from "./markdown"
+import { create } from "@neurocode-ai/ui/storybook/scaffold"
+import { markdown } from "@neurocode-ai/ui/storybook/fixtures"
+
+const docs = `### Overview
+Render sanitized Markdown with code blocks, inline code, and safe links.
+
+Pair with \`Code\` for standalone code views.
+
+### API
+- Required: \`text\` Markdown string.
+- Uses the Marked context provider for parsing and sanitization.
+
+### Variants and states
+- Code blocks include copy buttons when rendered.
+
+### Behavior
+- Sanitizes HTML and auto-converts inline URL code to links.
+- Adds copy buttons to code blocks.
+
+### Accessibility
+- Copy buttons include aria-labels from i18n.
+- TODO: confirm link target behavior in sanitized output.
+
+### Theming/tokens
+- Uses \`data-component="markdown"\` and related slots for styling.
+
+`
+
+const story = create({
+  title: "UI/Markdown",
+  mod,
+  args: {
+    text: markdown,
+  },
+})
+
+export default {
+  title: "UI/Markdown",
+  id: "components-markdown",
+  component: story.meta.component,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+}
+
+export const Basic = story.Basic