flux-md 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -4,6 +4,24 @@ Notable changes to flux-md. Format based on
 [Keep a Changelog](https://keepachangelog.com/); this project aims to follow
 [Semantic Versioning](https://semver.org/).
 
+## 0.11.0 — 2026-05-30
+
+### Added
+
+- **Opt-in live region + root attributes** on `<FluxMarkdown>` and
+  `mountFluxMarkdown`. The root accepts `className` (appended to `flux-md`),
+  `id`, `role`, and `aria-live` / `aria-atomic`. Set `aria-live="polite"` to
+  announce streamed content to screen readers — `polite` coalesces rapid updates
+  and does **not** read every token. Off by default; covers React and the DOM
+  mount (so the Web Component and the Vue/Svelte/Solid adapters too).
+
+### Docs
+
+- A repository root README, a "Structured block data" guide in the package
+  README, and a runnable **Data Studio** demo in the playground — a
+  sort/filter/CSV table and a live table of contents built entirely from
+  `block.data`, mid-stream.
+
 ## 0.10.0 — 2026-05-30
 
 Server-side rendering safety, plus an opt-in structured-data channel so consumers

package/README.md

@@ -412,6 +412,13 @@ Subscribes to a `FluxClient`, renders each block keyed by its stable parser-assi
 <FluxMarkdown client={client} />
 ```
 
+The root element accepts opt-in `className` (appended to `flux-md`), `id`,
+`role`, and `aria-live` / `aria-atomic`. Set `aria-live="polite"` to make the
+output a live region so screen readers announce streamed content as it settles —
+`polite` coalesces rapid updates and does **not** read every token. The same
+options exist on the DOM mount (`mountFluxMarkdown(client, el, { ariaLive: "polite" })`),
+covering the Web Component and the Vue/Svelte/Solid adapters.
+
 #### Custom components / overrides
 
 Pass a `components` map to replace how elements render. Keys come in **two

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flux-md",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Zero-dep streaming markdown for the browser. Rust→WASM core, Web Worker per stream, incremental parse with speculative closure.",
   "type": "module",
   "sideEffects": ["./src/worker.ts"],
@@ -30,12 +30,21 @@
     "solid-js": "^1.8.0"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true },
-    "vue": { "optional": true },
-    "svelte": { "optional": true },
-    "solid-js": { "optional": true }
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@types/bun": "^1.3.14",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "happy-dom": "^15.11.6",
@@ -49,6 +58,7 @@
   "scripts": {
     "test": "bun test",
     "test:ssr-cold": "bun test/ssr-cold.mjs",
+    "typecheck:test": "tsc --noEmit -p tsconfig.test.json",
     "prepublishOnly": "cd ../.. && bun run build:wasm"
   },
   "keywords": ["markdown", "streaming", "wasm", "rust", "react", "vue", "svelte", "solid", "web-component", "custom-element", "incremental", "llm", "ai", "math", "katex", "latex", "bidi", "rtl"],

package/src/dom.ts

@@ -61,6 +61,19 @@ export interface MountOptions {
   highlightCode?: boolean;
   /** Coalesce patches into one DOM write per animation frame. Default true. */
   batch?: boolean;
+  /** Appended to the root's `className` (the `flux-md` class is always present). */
+  className?: string;
+  /** Set on the root element. */
+  id?: string;
+  /** Set on the root element (e.g. `"article"`, `"log"`). */
+  role?: string;
+  /**
+   * Make the root a live region so screen readers announce streamed content.
+   * `"polite"` coalesces rapid updates (does not read every token). Off by default.
+   */
+  ariaLive?: "off" | "polite" | "assertive";
+  /** Live-region atomicity; pair with `ariaLive`. Off by default. */
+  ariaAtomic?: boolean;
 }
 
 // Per-kind off-screen size estimate for `contain-intrinsic-size`. Duplicated
@@ -99,7 +112,11 @@ export function mountFluxMarkdown(
   const batch = options.batch !== false && typeof requestAnimationFrame === "function";
 
   const root = document.createElement("div");
-  root.className = "flux-md";
+  root.className = options.className ? `flux-md ${options.className}` : "flux-md";
+  if (options.id) root.id = options.id;
+  if (options.role) root.setAttribute("role", options.role);
+  if (options.ariaLive) root.setAttribute("aria-live", options.ariaLive);
+  if (options.ariaAtomic !== undefined) root.setAttribute("aria-atomic", String(options.ariaAtomic));
   container.appendChild(root);
 
   // CSS-only stick-to-bottom: a permanent sentinel pinned as the last child.

package/src/react.tsx

@@ -101,6 +101,20 @@ interface FluxMarkdownProps {
    * run through it. When omitted, rendering is byte-identical and zero-cost.
    */
   sanitize?: (html: string) => string;
+  /** Appended to the root's `className` (the `flux-md` class is always present). */
+  className?: string;
+  /** Set on the root element. */
+  id?: string;
+  /** Set on the root element (e.g. `"article"`, `"log"`). */
+  role?: string;
+  /**
+   * Make the root a live region so screen readers announce streamed content.
+   * `"polite"` (recommended) coalesces rapid updates and announces when the
+   * reader is idle — it does **not** read every token. Off by default.
+   */
+  "aria-live"?: "off" | "polite" | "assertive";
+  /** Live-region atomicity; pair with `aria-live`. Off by default. */
+  "aria-atomic"?: boolean;
 }
 
 // The original render path: subscribe to a (required, caller- or hook-owned)
@@ -111,13 +125,24 @@ function FluxMarkdownFromClient({
   virtualize,
   stickToBottom,
   sanitize,
+  className,
+  id,
+  role,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
 }: FluxMarkdownProps & { client: FluxClient }) {
   const blocks = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot);
   // Normalize "no overrides" to a stable `undefined` so memo comparisons and
   // the fast path don't churn on an empty object identity.
   const comps = components && Object.keys(components).length > 0 ? components : undefined;
   return (
-    <div className="flux-md">
+    <div
+      className={className ? `flux-md ${className}` : "flux-md"}
+      id={id}
+      role={role}
+      aria-live={ariaLive}
+      aria-atomic={ariaAtomic}
+    >
       {blocks.map((b) => (
         <BlockView key={b.id} block={b} components={comps} virtualize={virtualize} sanitize={sanitize} />
       ))}

package/src/renderers/CodeBlock.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { highlight } from "../hi";
+import { extractLang } from "../block-props";
 
 /**
  * Deferred-highlighting code block. Open (streaming) blocks render plain;
@@ -19,10 +20,6 @@ function decodeText(html: string): string {
     .replace(/&/g, "&");
 }
 
-function extractLang(html: string): string {
-  const m = html.match(/data-lang="([^"]+)"/);
-  return m ? m[1] : "";
-}
 
 interface Props {
   html: string;

package/src/wasm/package.json

@@ -2,7 +2,7 @@
   "name": "flux-md-core",
   "type": "module",
   "description": "Incremental, streaming-aware markdown parser with speculative closure",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "files": [
     "flux_md_core_bg.wasm",