stunning-md 0.1.0 → 0.2.0

package/README.md

@@ -2,8 +2,14 @@
 
 Markdown in. A beautifully designed website out.
 
+[![A markdown file about a coffee roastery, rendered by stunning-md: a full-width photograph behind the title, and the contents pinned on the right](docs/roastery.jpg)](https://serrynaimo.github.io/stunning-md/?sample=roastery)
+
+*[This markdown file](public/samples/roastery.md), rendered. [Open it live.](https://serrynaimo.github.io/stunning-md/?sample=roastery)*
+
 `stunning-md` is a React component. Give it a markdown string and it lays the document out section by section — from its structure, the size of its images and the shape of its tables — then themes it to suit what it says. A small classifier model can be consulted for the judgement calls structure cannot settle; without one, rules decide everything.
 
+The markdown can be a file, or a model's answer [as it streams in](#streaming-a-models-answer) — and with a chat model attached, the page itself [takes requests](#adding-chat-optional) and lays each answer out as it is written.
+
 **[Try the live demo](https://serrynaimo.github.io/stunning-md/)** with your own file or one of the samples.
 
 ## Install
@@ -86,20 +92,96 @@ export function Document({ markdown }: { markdown: string }) {
 
 Any endpoint that accepts `{ state, questions }` with `choice`, `noul` and `score` question types and returns `{ answers }` will work, and `classifier` can be any function of the `Classify` type if you would rather call something else.
 
-What is sent: the title, section headings and the first 400 characters of prose; up to eight tables (header and first twelve rows each); and the leading image's alt text, file name and dimensions. The full document is never sent.
+What is sent: the title, section headings and the first 400 characters of prose; up to eight tables (header and first twelve rows each); and the leading image's alt text, file name and dimensions. The full document is never sent. With chat (below), the reader's message and single paragraphs of the model's reply are sent as well — up to a few hundred characters each — to tell conversation from content.
+
+### Streaming a model's answer
+
+In an AI interface the markdown arrives a little at a time. Pass what you have so far on every update and say that more is coming:
+
+```tsx
+"use client"
+import { StunningMarkdown } from "stunning-md"
+
+export function Answer({ text, done }: { text: string; done: boolean }) {
+  return <StunningMarkdown markdown={text} streaming={!done} classifier={classifier} />
+}
+```
+
+`text` is whatever your stream has produced so far — from the AI SDK's `useChat`, a `fetch` reader, anything. While `streaming` is set:
+
+- the page is laid out as the text arrives, **a section at a time**: a section appears when the next one starts, so its layout is decided once and never shifts under the reader. The opening — title and first paragraphs — appears block by block;
+- nothing half-written is shown: not the line in progress, not an open code fence or table, not unfinished frontmatter. A line under the page says which section is being written;
+- the theme is chosen **once**, from the first few hundred characters, and kept. That is less to go on than a whole document, so the choice can differ from the one the finished file would get — set `theme` (or `theme:` in frontmatter) if the look should be fixed;
+- there is no full-page loader, and updates do not reset the page. A text that starts over — a new answer in the same component — does.
+
+When `streaming` goes back to `false`, the rest of the text is laid out and the page is final.
+
+To do the same outside the component, `settledMarkdown(text)` returns the part of a growing text that is ready, and the heading being written. If your model wraps its answer in remarks ("Sure, here is…"), `sortReply` separates those from the content as it streams — that is what the chat below is built on.
+
+It helps to tell the model what it is writing for. `CHAT_INSTRUCTIONS` is a short system prompt that does: answer in markdown with a title and sections, keep remarks to the reader apart from the content, and — since the page draws charts itself — write data as a plain markdown table rather than describing or drawing a chart.
+
+### Adding chat (optional)
+
+Give the component a chat function and the page takes requests. A floating input at the bottom sends them to any OpenAI-compatible chat model; each answer is laid out below as its own designed section of the page, in a theme chosen for it, while the conversation itself lives in the sidebar.
+
+```ts
+// app/api/chat/route.ts
+import { createChatHandler } from "stunning-md/server"
+
+export const POST = createChatHandler({
+  url: process.env.STUNNING_MD_CHAT_URL, // …/v1, or the full …/chat/completions address
+  model: process.env.STUNNING_MD_CHAT_MODEL,
+  apiKey: process.env.STUNNING_MD_CHAT_KEY, // optional — a local model needs none
+})
+```
+
+```tsx
+"use client"
+import { StunningMarkdown, createChat, createClassifier } from "stunning-md"
+
+const chat = createChat({ endpoint: "/api/chat" })
+const classifier = createClassifier({ endpoint: "/api/classify" })
+
+export function Document({ markdown }: { markdown: string }) {
+  return <StunningMarkdown markdown={markdown} chat={chat} classifier={classifier} />
+}
+```
+
+`markdown` may be an empty string: the page then starts blank and fills as you ask.
+
+A model's reply is sorted as it streams, block by block, into two kinds of text:
+
+- **Content** — the thing that was asked for — is rendered on the page by the usual rules. It appears a section at a time, as each section is completed, so a section's layout is decided once and does not shift. Turns are set apart by a band of bare page, black or white with the mode.
+- **Commentary** — the model talking about its answer ("Sure, here is…", "Let me know if…") — is shown briefly above the input, then fades. It stays in the sidebar, where the whole conversation is kept in order: your messages, the model's remarks, and, in place of each answer, a short list of the headings it put on the page, which jump to them.
+
+Not every message asks for a page. Before the reply arrives, the message itself is judged (`wantsContent`): a greeting, thanks or small talk gets its reply in the conversation and the page makes no room for it — unless the reply turns out to carry content after all. The classifier is asked this; without one, only messages that are plainly small talk count.
+
+Likewise, a reply that is not an answer — the model does not know, cannot help, or asks a question back — puts nothing on the page: all of it is commentary, the place made for the turn is taken away again, and the reader is returned to where they were. The classifier is asked this of a reply's first paragraph, with the request beside it; without a classifier, the paragraph's opening words decide.
+
+The conversation sits beside the page on a wide screen and in a sheet on a narrower one. It stays shut until the first reply starts to arrive, then opens by itself where there is room for it; after that the reader's own choice stands. The input is centred on the whole window and floats above the conversation, sheet included, so you can keep writing with the conversation in view — and while it is in view, remarks are not shown a second time above the input.
+
+Each answer chooses its theme once, from its opening and the request, and keeps it; a new answer starts with a full window to itself, so it can be brought to the top before it is written. Until that choice is made the page keeps the chat's own plain, neutral look — the one its sidebar and input wear whatever the turns are wearing. While nothing has come back yet, the new turn shows the request itself beside a spinner; it fades as the answer starts, and the spinner stays until the turn is done. On a page with nothing on it yet, the request is shown this way at once, whatever kind of message it turns out to be.
+
+Headings, lists, tables, code and images are always content. A plain paragraph is judged by where it sits and how it reads: remarks come at the start or the end of a reply and usually announce themselves. The classifier is asked about the unclear ones — on its own it is not a reliable judge of this, so it never overrules both position and wording. Without a classifier, the first paragraph of a reply is taken as commentary, and so is the last.
+
+The open document and the conversation so far are sent to the chat model with each request, after `CHAT_INSTRUCTIONS` as the system prompt.
 
 ### Props
 
 | Prop | Type | Default | |
 | --- | --- | --- | --- |
 | `markdown` | `string` | — | The document. |
+| `streaming` | `boolean` | `false` | The text is still being written; lay it out as it grows. |
 | `classifier` | `Classify` | — | Answers judgement calls; omit for rules only. |
+| `chat` | `Chat` | — | Lets the reader ask for content; answers are laid out on the page. |
 | `theme` | `Partial<ThemeChoice>` | — | Fix `palette`, `fonts` or `formality` (corner style). |
+| `autoTheme` | `boolean` | `true` | Choose a theme to suit each document and answer. `false` stays on one theme. |
 | `appearance` | `"auto" \| "light" \| "dark"` | `"auto"` | `auto` follows the system setting. |
 | `resolveUrl` | `(url: string) => string` | identity | Map URLs in the markdown to loadable ones. |
 | `controls` | `boolean` | `true` | Show the view switch and the theme, layout and chart pickers. |
 | `editable` | `boolean` | `false` | Let the reader edit the text in the markdown view. |
 | `onMarkdownChange` | `(markdown: string) => void` | — | Called when the reader's edits are applied. |
+| `chatAccessory` | `ReactNode` | — | A button or link of your own, shown as a round button left of the chat input. |
 | `loadFonts` | `boolean` | `true` | Load the theme's typefaces from Google Fonts. |
 | `settleMs` | `number` | `2500` | Longest wait for an image to report its size. |
 | `maxWaitMs` | `number` | `8000` | Longest the loader waits for the classifier and fonts. |
@@ -108,13 +190,15 @@ What is sent: the title, section headings and the first 400 characters of prose;
 
 A theme can also be set per document, in frontmatter: `theme: midnight`.
 
+To keep your own look throughout, switch the choosing off: `<StunningMarkdown markdown={text} autoTheme={false} theme={{ palette: "ocean" }} />` wears that one theme for the document and for everything a chat or a stream adds to it, and asks the classifier nothing about themes. Without a `palette` it stays on `paper`. Readers have the same switch — "Match the content", at the top of the theme menu: with it off, the theme they are looking at stays, and any theme they pick applies to the whole page.
+
 ### Entry points
 
 | Import | Contents | Runs |
 | --- | --- | --- |
-| `stunning-md` | `StunningMarkdown`, `createClassifier`, themes, and everything in `core` | In the browser |
-| `stunning-md/core` | `parseMarkdown`, `planDocument`, table inference, `judgeDocument`, theme data | Anywhere — no React |
-| `stunning-md/server` | `createClassifierHandler` | On the server |
+| `stunning-md` | `StunningMarkdown`, `createClassifier`, `createChat`, themes, and everything in `core` | In the browser |
+| `stunning-md/core` | `parseMarkdown`, `planDocument`, table inference, `judgeDocument`, `settledMarkdown`, `sortReply`, `wantsContent`, `CHAT_INSTRUCTIONS`, theme data | Anywhere — no React |
+| `stunning-md/server` | `createClassifierHandler`, `createChatHandler` | On the server |
 | `stunning-md/styles.css` | All styles for the component | — |
 
 The analysis is plain TypeScript and useful on its own:
@@ -130,7 +214,7 @@ plan.sections.map((s) => [s.titleText, s.layout, s.reason])
 
 | Content | Becomes |
 | --- | --- |
-| Leading `# Title`, short opening paragraphs | Hero with title and lead |
+| Leading `# Title`, short opening paragraphs | Hero with title and lead — on the page, or as a cover in the theme's colour |
 | Leading image, ≥ 1200 px wide and landscape | Full-bleed banner behind the title |
 | Leading image that is small, square or an SVG | Logo above a centred title |
 | Badge images (shields.io and similar) | A badge row in the hero |
@@ -145,7 +229,8 @@ plan.sections.map((s) => [s.titleText, s.layout, s.reason])
 | `> [!NOTE]` and friends | Callouts |
 | Table: periods × measures | Line, area or bar chart |
 | Table: categories × one measure | Bar chart, donut (parts of a whole) or stat tiles |
-| Table: dates × descriptions | Timeline |
+| Table: categories with long names × one measure | Ranked bars, each name on its own line above its bar |
+| Table: dates × descriptions — or descriptions beside a column of years in order | Timeline |
 | Table: short key–value pairs | Fact sheet |
 | Any other table | A table, with horizontal scroll on small screens |
 | Three or more titled sections | Sticky bar with reading progress and a contents list — pinned beside the page when it is at least 1400 px wide, in a slide-over menu otherwise |
@@ -156,7 +241,7 @@ The rest of markdown works as you would expect: GFM tables, task lists, striketh
 
 A hero is only built when there is something to build it from: a title, or a leading image large or logo-like enough to carry one. A document that opens with plain paragraphs simply starts with its text.
 
-Readers stay in control. A three-position switch in the top bar moves between the markdown text, a plain conventional rendering, and the designed page; with `editable`, the text can be changed there and is laid out afresh on switching back. A theme picker and light/dark switch sit beside it, each section has a `⋯` menu offering only the layouts its content can fill, and each chart can be switched between the forms its data supports. `controls={false}` hides all of these.
+Readers stay in control. A three-position switch in the top bar moves between the markdown text, a plain conventional rendering, and the designed page; with `editable`, the text can be changed there and is laid out afresh on switching back. A theme picker — arranged by subject, with a switch for whether themes should match the content at all — and a light/dark switch sit beside it, each section has a `⋯` menu offering only the layouts its content can fill, and each chart can be switched between the forms its data supports. `controls={false}` hides all of these.
 
 ## How decisions are made
 
@@ -164,7 +249,7 @@ Readers stay in control. A three-position switch in the top bar moves between th
 2. **Measure** — each image is loaded in the browser to learn its natural size. An image that cannot be measured is never promoted to a hero or full-screen layout.
 3. **Plan** — `planDocument` turns tree + image sizes into a `DocumentPlan`. It is a pure function: the same input always gives the same plan, and every section records the `reason` for its layout.
 4. **Judge** *(optional)* — `judgeDocument` asks the classifier a handful of questions and each answer is fed back into the plan as it lands:
-   - which theme suits the content — each option tells the classifier what the theme is for, its key colours and its typeface;
+   - which theme suits the content — each option tells the classifier the subjects the theme is for;
    - whether a table's numbers are measurements to compare or reference values to look up;
    - whether rows are parts of a whole (donut) or independent (bar);
    - whether the leading image is fit to be the hero.
@@ -181,14 +266,18 @@ There are 21 themes, each a complete look — light and dark colours, a typeface
 
 `paper` · `ink` · `ocean` · `forest` · `sunset` · `violet` · `terminal` · `chambers` · `academia` · `blueprint` · `midnight` · `rose` · `sand` · `citrus` · `crimson` · `slate` · `lagoon` · `plum` · `poster` · `espresso` · `console`
 
-and 14 typeface pairings (`editorial`, `modern`, `technical`, `elegant`, `friendly`, `classic`, `scholarly`, `geometric`, `luxe`, `rounded`, `gazette`, `slab`, `poster`, `mono`), loaded from Google Fonts.
+The themes are meant to look unlike one another. Pages are coloured rather than tinted — a sunny yellow, an aqua, a blueprint blue, a wine red at night — with cards a clear step lighter or darker than the page. And a hero led by its text opens one of three ways, set per theme as `hero`: `wash` (a soft glow of the accent on the page), `block` (a cover in the accent colour) or `ink` (a cover in the theme's darkest tone, the page's colours reversed). A hero with a photograph or a logo keeps the page as it is.
+
+About half the themes also carry a second colour (`highlight`) — amber beside corporate blue, lime beside purple, coral beside teal. It runs through the page in small things, so that it never turns up just once: a stripe under the cover, a short rule over every section heading, the reading progress in the bar. Quotations are set in it — a band across the page for one that is a section of its own, a block for one inside an article. Themes without a second colour reverse into ink for those instead.
+
+There are also 14 typeface pairings (`editorial`, `modern`, `technical`, `elegant`, `friendly`, `classic`, `scholarly`, `geometric`, `luxe`, `rounded`, `gazette`, `slab`, `poster`, `mono`), loaded from Google Fonts.
 
 Charts follow the theme too:
 
 - **Colours** — each theme's series colours are grown from its accent. The accent leads; every further colour is the candidate that stays furthest from those before it, at the accent's own intensity, so a muted theme gets muted charts and a vivid one vivid charts. Every palette must keep neighbouring series apart for readers with red-green colour-vision deficiency as well as full colour vision, sit inside a legible lightness band, and hold 3:1 contrast against the page — a unit test enforces this for all 21 themes in both modes.
 - **Drawing style** — each theme names one of four chart styles: `linework` (monochrome ink with dashes and hatching, monospaced labels), `instrument` (rounded, saturated marks on a dotted grid), `soft` (gradients and depth) or `flat` (plain solid colour).
 
-Themes are defined in `src/stunning-md/theme/themes.ts`. Each theme's `description` (what it is for) and `look` (its key colours), together with its typeface, are what the classifier reads when choosing, so adding a theme means adding one entry there. Keep those strings short: classifier latency grows with their total length.
+Themes are defined in `src/stunning-md/theme/themes.ts`, and fall into six families by subject — writing, business and official, technology, places and lifestyle, nature and health, culture and play — which is how the picker arranges them. A theme's `description`, the subjects it suits, is all the classifier reads when choosing, so adding a theme means adding one entry there. Name subjects, not moods or colours, and keep it short: on a set of documents of known subject, subjects alone picked a fitting theme more often than subjects with colours and typefaces beside them, in half the time — classifier latency grows with the total length of these strings.
 
 Themes are applied as CSS variables scoped to the component, so the page around it is unaffected.
 
@@ -204,9 +293,11 @@ cp .env.example .env.local   # optional: add a classifier address and key
 npm run dev
 ```
 
-Samples live in `public/samples/` and open directly with `?sample=annual-report`, `kyoto`, `readme`, `essay`, `after-dark` or `roastery`.
+Samples live in `public/samples/` and open directly with `?sample=annual-report`, `kyoto`, `readme`, `essay`, `after-dark` or `roastery`. Add `&stream` — `?sample=roastery&stream` — to have the sample played out a little at a time, as a model would write it, and see the `streaming` prop at work.
+
+To try the chat, add `STUNNING_MD_CHAT_URL` and `STUNNING_MD_CHAT_MODEL` (and `STUNNING_MD_CHAT_KEY` if the provider needs one) to `.env.local`. Without a model to hand, `node scripts/mock-chat.mjs` runs a stand-in that streams canned answers at `http://localhost:3490/v1/chat/completions`. With chat available, the landing page also offers to start from a blank page.
 
-If the server has no classifier configured, the landing page offers a form for the visitor's own endpoint and key. Those are checked with one test question, kept only in that browser's `localStorage`, and sent straight from the browser to the endpoint — never through this site's server. The endpoint therefore has to allow cross-origin requests.
+If the server has no classifier or chat model configured, the landing page offers a form for the visitor's own — an endpoint and key for the classifier; an address, model name and optional key for chat. Those are checked with one test question, kept only in that browser's `localStorage`, and sent straight from the browser to the endpoint — never through this site's server. The endpoint therefore has to allow cross-origin requests.
 
 ### Hosting it on GitHub Pages
 
@@ -225,6 +316,7 @@ src/stunning-md/          the library
   parse.ts                markdown → mdast, HTML clean-up, frontmatter
   analyze/                layout planning, table inference, image probing
   classifier.ts           questions, client, applying answers
+  chat.ts                 chat client, and sorting a reply into commentary and content
   theme/                  palettes, typefaces, chart colours and styles
   components/             React rendering
   stunning.css            typography and layouts, scoped to .smd
@@ -236,7 +328,7 @@ scripts/                  browser checks used during development
 ```
 
 ```bash
-npm test              # parsing, planning, table inference, classifier logic, theme and chart colours
+npm test              # parsing, planning, table inference, classifier logic, chat and streaming, theme and chart colours
 npm run typecheck
 npm run lint
 npm run build         # the demo site
@@ -256,7 +348,7 @@ npm publish                    # runs typecheck, tests and build:lib first
 git push --follow-tags
 ```
 
-`npm pack --dry-run` shows exactly what would be published: `dist/`, this README, the licence and `package.json`.
+`npm pack --dry-run` shows exactly what would be published: `dist/`, this README, the licence and `package.json`. What changed in each version is in [CHANGELOG.md](CHANGELOG.md).
 
 ## Built with
 

package/dist/chunk-MKH2VK55.mjs

@@ -0,0 +1,377 @@
+// src/stunning-md/chat.ts
+function createChat(options) {
+  return async function* (messages, signal) {
+    const response = await fetch(options.endpoint, {
+      method: "POST",
+      headers: { "content-type": "application/json", accept: "text/event-stream", ...options.headers },
+      body: JSON.stringify({ ...options.model ? { model: options.model } : {}, messages, stream: true }),
+      signal
+    });
+    if (!response.ok || !response.body) {
+      const detail = await response.text().catch(() => "");
+      throw new Error(`chat responded ${response.status}${detail ? `: ${detail.slice(0, 200)}` : ""}`);
+    }
+    if ((response.headers.get("content-type") ?? "").includes("application/json")) {
+      const data = await response.json();
+      const failure = errorIn(data);
+      if (failure) throw new Error(failure);
+      const whole = data?.choices?.[0]?.message?.content;
+      if (typeof whole === "string") yield whole;
+      return;
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let stray = "";
+    let yielded = false;
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      buffer += done ? decoder.decode() : decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = done ? "" : lines.pop() ?? "";
+      for (const raw of lines) {
+        const line = raw.trim();
+        if (!line.startsWith("data:")) {
+          if (line && !line.startsWith(":") && stray.length < 4e3) stray += raw;
+          continue;
+        }
+        const payload = line.slice(5).trim();
+        if (payload === "[DONE]") return;
+        let event;
+        try {
+          event = JSON.parse(payload);
+        } catch {
+          continue;
+        }
+        const failure = errorIn(event);
+        if (failure) throw new Error(failure);
+        const delta = event?.choices?.[0]?.delta?.content;
+        if (typeof delta === "string" && delta) {
+          yielded = true;
+          yield delta;
+        }
+      }
+      if (done) break;
+    }
+    if (!yielded && stray.trim()) {
+      let failure = null;
+      try {
+        failure = errorIn(JSON.parse(stray));
+      } catch {
+      }
+      throw new Error(failure ?? "the chat model returned nothing");
+    }
+  };
+}
+function errorIn(body) {
+  const first = Array.isArray(body) ? body[0] : body;
+  const error = first?.error;
+  if (!error) return null;
+  if (typeof error === "string") return error;
+  const message = error.message;
+  return typeof message === "string" && message ? message : "the chat model reported an error";
+}
+function chatCompletionsUrl(url) {
+  const trimmed = url.trim().replace(/\/+$/, "");
+  return /\/chat\/completions$/.test(trimmed) ? trimmed : `${trimmed}/chat/completions`;
+}
+var HEADING = /^(#{1,6})\s+\S/;
+var FENCE = /^\s{0,3}(```+|~~~+)/;
+var NOT_PROSE = /^(\s{0,3}([-*+]|\d+[.)])\s|\s{0,3}>|\s{0,3}\||\s{0,3}(-{3,}|\*{3,}|_{3,})\s*$|\s{0,3}<|\s{2,}\S|!\[[^\]]*\]\([^)]*\)\s*$|\[!\[)/;
+function describe(text) {
+  const first = text.split("\n")[0];
+  const heading = HEADING.exec(first);
+  if (heading) return { text, kind: "heading", depth: heading[1].length };
+  const table = /^\s{0,3}\|?\s*:?-{3,}/.test(text.split("\n")[1] ?? "");
+  const boldLine = /^\*\*[^*\n]+\*\*:?$/.test(text);
+  if (FENCE.test(first) || first.startsWith("$$") || NOT_PROSE.test(first) || table || boldLine) return { text, kind: "other" };
+  return { text, kind: "paragraph" };
+}
+var BlockSplitter = class {
+  constructor() {
+    this.pending = "";
+    this.lines = [];
+    this.fence = null;
+    this.math = false;
+  }
+  flush(out) {
+    const text = this.lines.join("\n").trim();
+    this.lines = [];
+    if (text) out.push(describe(text));
+  }
+  take(line, out) {
+    const fence = FENCE.exec(line);
+    if (this.fence) {
+      this.lines.push(line);
+      if (fence && fence[1].startsWith(this.fence[0]) && fence[1].length >= this.fence.length && !line.trim().slice(fence[1].length).trim()) {
+        this.fence = null;
+      }
+      return;
+    }
+    if (this.math) {
+      this.lines.push(line);
+      if (line.trim().endsWith("$$")) this.math = false;
+      return;
+    }
+    if (fence) {
+      this.lines.push(line);
+      this.fence = fence[1];
+      return;
+    }
+    if (line.trim().startsWith("$$") && this.lines.length === 0) {
+      this.lines.push(line);
+      this.math = !(line.trim().length > 2 && line.trim().endsWith("$$"));
+      return;
+    }
+    if (!line.trim()) return this.flush(out);
+    if (HEADING.test(line)) {
+      this.flush(out);
+      this.lines.push(line);
+      return this.flush(out);
+    }
+    this.lines.push(line);
+  }
+  /** Feed more text; returns the blocks that are now complete. */
+  push(text) {
+    const out = [];
+    this.pending += text;
+    const lines = this.pending.split("\n");
+    this.pending = lines.pop() ?? "";
+    for (const line of lines) this.take(line.replace(/\r$/, ""), out);
+    return out;
+  }
+  /** The stream is over; returns whatever was still open. */
+  end() {
+    const out = [];
+    if (this.pending) this.take(this.pending, out);
+    this.pending = "";
+    this.fence = null;
+    this.math = false;
+    this.flush(out);
+    return out;
+  }
+};
+var FRONTMATTER_OPEN = /^---[ \t]*\r?\n/;
+function settledMarkdown(text) {
+  let start = 0;
+  if (FRONTMATTER_OPEN.test(text)) {
+    const opening = FRONTMATTER_OPEN.exec(text)[0].length;
+    if (text.length === opening) return { markdown: "", writing: null };
+    if (/\S/.test(text[opening])) {
+      const close = /\n(---|\.\.\.)[ \t]*\r?\n/.exec(text.slice(opening - 1));
+      if (!close) return { markdown: "", writing: null };
+      start = opening - 1 + close.index + close[0].length;
+    }
+  }
+  let settled = start;
+  let writing = null;
+  let open = null;
+  let fence = null;
+  let math = false;
+  let inBlock = false;
+  for (let at = start; ; ) {
+    const end = text.indexOf("\n", at);
+    if (end < 0) break;
+    const line = text.slice(at, end).replace(/\r$/, "");
+    const lineStart = at;
+    at = end + 1;
+    const marker = FENCE.exec(line);
+    if (fence) {
+      if (marker && marker[1].startsWith(fence[0]) && marker[1].length >= fence.length && !line.trim().slice(marker[1].length).trim()) fence = null;
+      continue;
+    }
+    if (math) {
+      if (line.trim().endsWith("$$")) math = false;
+      continue;
+    }
+    if (marker) {
+      fence = marker[1];
+      inBlock = true;
+      continue;
+    }
+    if (line.trim().startsWith("$$") && !inBlock) {
+      math = !(line.trim().length > 2 && line.trim().endsWith("$$"));
+      inBlock = true;
+      continue;
+    }
+    if (!line.trim()) {
+      if (open === null) settled = at;
+      else if (open === 1 && inBlock) {
+        settled = at;
+        open = null;
+      }
+      inBlock = false;
+      continue;
+    }
+    const heading = HEADING.exec(line);
+    if (heading) {
+      const depth = heading[1].length;
+      writing = line.replace(/^#{1,6}\s+/, "").replace(/\s+#+\s*$/, "");
+      if (!(open !== null && open !== 1 && depth > open)) {
+        settled = lineStart;
+        open = depth;
+      }
+      inBlock = false;
+      continue;
+    }
+    inBlock = true;
+  }
+  return { markdown: text.slice(0, settled), writing };
+}
+var COMMENTARY_QUESTION = {
+  type: "noul",
+  criteria: {
+    true: "the assistant is addressing the user directly about its answer (for example 'Here is\u2026', 'Sure', 'Let me know\u2026', 'I have\u2026', 'Want me to\u2026')",
+    false: "a passage of the document itself, giving information to its readers"
+  }
+};
+var ADDRESSES_USER = /^(sure|certainly|of course|absolutely|great|okay|ok|alright|got it|no problem|here[’']?s|here (is|are)|below (is|are|you)|i[’'](ve|ll|d)\b|i (have|will|can|kept|made|added|drafted|wrote|put|used|assumed|left)\b|let me\b|hope (this|that)|want me to|would you like|do you want|should i\b|feel free|happy to|if you[’']?d like|if you would like|is there anything|anything else)|\blet me know\b|\bwant me to\b|\bwould you like me to\b/i;
+var ANSWERS_QUESTION = {
+  type: "noul",
+  criteria: {
+    true: "the assistant knows the answer and is providing it",
+    false: "the assistant does not know the answer, cannot help, or asks a question back"
+  }
+};
+var NO_ANSWER = /^(sorry|apologies|unfortunately|i[’']?m (not sure|sorry|afraid|unable|not able)|i (don[’']?t|do not|can[’']?t|cannot|couldn[’']?t|am not able|am unable)\b|(could|can|would) you (please )?(clarify|tell|share|provide|say|explain|rephrase|give)|what (do you mean|would you like|exactly))/i;
+var WANTS_CONTENT_QUESTION = {
+  type: "noul",
+  criteria: {
+    true: "the user asks for something to be written, explained, listed, compared or added to the page",
+    false: "the user is only making conversation: a greeting, thanks, small talk, feedback, or a question about the assistant itself"
+  }
+};
+var CONVERSATION_BELOW = 0.42;
+var SMALL_TALK = /^(h+i+|he+y+|hello+|hiya|howdy|yo|good (morning|afternoon|evening|night)|thanks?( you)?|thx|ty|cheers|ok(ay)?|cool|nice( (work|one|job))?|great( (work|job))?|good (work|job)|well done|awesome|perfect|lovely|love it|(that |this |it )?looks? (good|nice|great)|lol|ha(ha)+|bye|goodbye|see you|never ?mind|how are you|how('?s| is) it going|what'?s up|who are you|what are you|what can you do|what (model|llm) are you|are you (there|real|a bot|an ai|ok)|can you hear me|(are )?you there|test(ing)?)\b(?:[\s,!.?]+(there|again|everyone|all|you|so much|a lot|very much|today|then|cool|nice|great|thanks?( you)?))*[\s!.?…]*$/i;
+function wantsContent(request, classify, signal) {
+  const text = request.trim();
+  const byWording = !SMALL_TALK.test(text);
+  if (!classify) return Promise.resolve(byWording);
+  return classify({ state: `User: ${text.replace(/\s+/g, " ").slice(0, 400)}`, questions: { wants: WANTS_CONTENT_QUESTION } }, signal).then(
+    (result) => result.wants?.type === "noul" ? result.wants.noul >= CONVERSATION_BELOW : byWording,
+    () => byWording
+  );
+}
+var headingText = (block) => block.text.replace(/^#{1,6}\s+/, "").replace(/\s+#+\s*$/, "");
+async function sortReply(options) {
+  const { stream, request, smallTalk, classify, signal, onEvent } = options;
+  const splitter = new BlockSplitter();
+  const released = [];
+  let raw = "";
+  let index = 0;
+  let lastHeading = null;
+  let structured = false;
+  let open = null;
+  let chain = Promise.resolve();
+  let settlePosition = null;
+  let unanswered = false;
+  const answers = async (text) => {
+    if (await smallTalk) return false;
+    if (!classify) return !NO_ANSWER.test(text);
+    const state = `${request ? `User: ${request.replace(/\s+/g, " ").slice(0, 400)}
+` : ""}Assistant: ${text.slice(0, 700)}`;
+    return classify({ state, questions: { answers: ANSWERS_QUESTION } }, signal).then(
+      (result) => result.answers?.type === "noul" ? result.answers.noul >= 0.5 : !NO_ANSWER.test(text),
+      () => !NO_ANSWER.test(text)
+    );
+  };
+  const emitContent = () => onEvent({ type: "content", markdown: released.join("\n\n") });
+  const flush = () => {
+    if (!open) return;
+    released.push(...open.blocks);
+    open = null;
+    emitContent();
+  };
+  const ask = (text) => classify({ state: text.slice(0, 700), questions: { commentary: COMMENTARY_QUESTION } }, signal).then(
+    (answers2) => answers2.commentary?.type === "noul" ? answers2.commentary.noul : null,
+    () => null
+  );
+  const judge = async (text, first, position) => {
+    if (!classify) return first || position === "closing";
+    const cue = ADDRESSES_USER.test(text);
+    if (position === "inside") return cue ? (await ask(text) ?? 0) >= 0.5 : false;
+    if (cue) return true;
+    const score = await ask(text);
+    return score === null ? first || position === "closing" : score >= 0.3;
+  };
+  const isCommentary = (block, first) => {
+    if (block.kind !== "paragraph") return Promise.resolve(false);
+    if (first || classify && !structured) return judge(block.text, first, "opening");
+    return new Promise((resolve) => {
+      settlePosition = resolve;
+    }).then((position) => judge(block.text, first, position));
+  };
+  const handle = (block, commentary) => {
+    if (unanswered) {
+      if (block.kind === "paragraph") return onEvent({ type: "commentary", text: block.text });
+      unanswered = false;
+      onEvent({ type: "answer", answered: true });
+    }
+    if (commentary) return onEvent({ type: "commentary", text: block.text });
+    if (block.kind === "heading") {
+      const depth = block.depth ?? 2;
+      if (open && open.depth !== 1 && depth > open.depth) {
+        open.blocks.push(block.text);
+        return;
+      }
+      flush();
+      open = { depth, blocks: [block.text] };
+      return;
+    }
+    if (open) {
+      open.blocks.push(block.text);
+      if (open.depth === 1) flush();
+    } else {
+      released.push(block.text);
+      emitContent();
+    }
+  };
+  const accept = (blocks) => {
+    for (const block of blocks) {
+      settlePosition?.("inside");
+      settlePosition = null;
+      const first = index++ === 0;
+      const verdict = isCommentary(block, first);
+      const answered = first && block.kind === "paragraph" ? answers(block.text) : null;
+      if (block.kind === "heading") lastHeading = headingText(block);
+      if (block.kind !== "paragraph") structured = true;
+      chain = chain.then(async () => {
+        if (answered && !await answered) {
+          unanswered = true;
+          onEvent({ type: "answer", answered: false });
+        }
+        handle(block, unanswered && block.kind === "paragraph" ? true : await verdict);
+      });
+    }
+  };
+  let writing;
+  for await (const delta of stream) {
+    if (signal?.aborted) break;
+    raw += delta;
+    accept(splitter.push(delta));
+    if (lastHeading !== writing) onEvent({ type: "writing", heading: writing = lastHeading });
+  }
+  accept(splitter.end());
+  settlePosition?.("closing");
+  await chain;
+  flush();
+  return { raw, content: released.join("\n\n") };
+}
+var CHAT_INSTRUCTIONS = [
+  "You are writing for a page that turns markdown into a designed website.",
+  "Answer in markdown. When asked for a document, start with a `# Title`, add a short opening paragraph, and use `##` sections; use `###` for short sub-points.",
+  "Use tables for figures, schedules and comparisons, lists for short points, and blockquotes for quotations.",
+  "The page draws charts by itself: a markdown table of numbers becomes a bar, line or area chart, shares of a whole become a donut, a row of key figures becomes stat tiles, and dated events become a timeline. So when a chart or graph is wanted, just write the data as a plain markdown table \u2014 one row per category or period, a header row, units in the header or the cells \u2014 and never draw one in text, link an image of one, or write chart code.",
+  "Keep any remarks to the user \u2014 acknowledgements, caveats, questions, offers of more help \u2014 in their own short paragraphs, separate from the content."
+].join(" ");
+
+export {
+  createChat,
+  chatCompletionsUrl,
+  BlockSplitter,
+  settledMarkdown,
+  wantsContent,
+  sortReply,
+  CHAT_INSTRUCTIONS
+};
+//# sourceMappingURL=chunk-MKH2VK55.mjs.map