@damiro/stylo 0.5.0 → 0.9.0

package/README.md

@@ -26,7 +26,11 @@ built in.
 - **First-class math** — `$…$` and `$$…$$` rendered with KaTeX, live in the
   canvas and in preview.
 - **`[[wikilinks]]`** — recognised, styled, and clickable, with an
-  `onWikiLinkClick` callback.
+  `onWikiLinkClick` callback and opt-in `[[` autocomplete from an index you
+  supply (`wikiLinkSource`).
+- **`![[embed]]` transclusion** — opt-in on every rendered surface (`preview`,
+  `split`, and the in-place canvas): pass `embedSource` and Stylo hands you the
+  reference, you return the node to render in its place.
 - **Interactive tables** — edit a rendered table cell by cell in the in-place
   canvas, with row / column controls; or keep plain source pipes.
 - **Callouts** — `> [!note]` blockquotes render as tinted admonition blocks
@@ -70,7 +74,11 @@ npm install @codemirror/state @codemirror/view @codemirror/commands \
   @codemirror/language @codemirror/lang-markdown @lezer/common @lezer/highlight
 ```
 
-React 18+ is also a peer dependency. Import lines are in [Usage](#usage).
+React 18 or 19 is also a peer dependency (`react` + `react-dom`). Stylo ships
+**ES modules only** — there is no CommonJS build — so it needs a bundler (Vite,
+Next.js, …) or a native-ESM runtime. Stylesheet imports are in [Usage](#usage);
+the full setup checklist is in the
+[integration guide](./docs/wiki/guides/integration.md#requirements).
 
 The optional `@damiro/stylo/toolbar-settings` component (an end-user toolbar
 customizer) additionally needs `@dnd-kit/core @dnd-kit/sortable
@@ -102,15 +110,16 @@ truth.** The editor is a thin, composable surface over it.
 
 ## Stack
 
-| Concern          | Library                                                                     |
-| ---------------- | --------------------------------------------------------------------------- |
-| Editing surface  | CodeMirror 6 (`@codemirror/lang-markdown`)                                  |
-| Find / replace   | `@codemirror/search` — `Mod-f` on every editing surface                     |
-| Render / preview | `react-markdown` + `remark-gfm` + `remark-math` + `rehype-katex` + `katex`  |
-| `[[wikilinks]]`  | small custom `remark` plugin                                                |
-| Frontmatter      | `remark-frontmatter` — fences recognised; key/value parsing deferred        |
-| Styling          | CSS Modules + `--stylo-*` CSS custom properties — no Tailwind, no CSS-in-JS |
-| Icons            | inline SVG, swappable via the `icons` prop — no icon-package dependency     |
+| Concern          | Library                                                                                      |
+| ---------------- | -------------------------------------------------------------------------------------------- |
+| Editing surface  | CodeMirror 6 (`@codemirror/lang-markdown`)                                                   |
+| Find / replace   | `@codemirror/search` — `Mod-f` on every editing surface                                      |
+| Render / preview | `react-markdown` + `remark-gfm` + `remark-math` + `rehype-katex` + `katex`                   |
+| `[[wikilinks]]`  | small custom `remark` plugin                                                                 |
+| `![[embeds]]`    | `remark` plugin (preview) + `EmbedWidget` portal registry (in-place), one host `embedSource` |
+| Frontmatter      | `remark-frontmatter` — fences recognised; key/value parsing deferred                         |
+| Styling          | CSS Modules + `--stylo-*` CSS custom properties — no Tailwind, no CSS-in-JS                  |
+| Icons            | inline SVG, swappable via the `icons` prop — no icon-package dependency                      |
 
 Styling and icon decisions are recorded in
 [ADR-002](./docs/journal/2026-09/2026-09-01_adr-002-editor-ux-and-customization.md);
@@ -149,11 +158,21 @@ function Editor() {
 your own `ToolbarCustomItem` buttons, and a `render` slot to wrap it. See the
 [toolbar reference](./docs/wiki/reference/toolbar.md).
 
-`inPlace` and `codeLanguages` are read once, when the editing surface mounts —
-give `<Stylo>` a `key` derived from the config to apply a change. Every other
-prop is fully reactive. See
+`inPlace`, `codeLanguages`, and `wikiLinkSource` are read once, when the editing
+surface mounts — give `<Stylo>` a `key` derived from the config to apply a
+change. Every other prop is fully reactive. See
 [props · applied at mount](./docs/wiki/reference/props.md#config-applied-at-mount).
 
+Pass `wikiLinkSource` — `(query) => { target, label? }[]`, sync or async — to
+turn on `[[wikilink]]` autocomplete backed by your own index. See
+[Wikilink autocomplete](./docs/wiki/reference/props.md#wikilink-autocomplete).
+
+Pass `embedSource` — `(ref) => ReactNode`, sync or async — to resolve
+`![[embed]]` transclusion on every rendered surface, the in-place canvas
+included. Stylo detects the `![[…]]` (when it is alone on its line) and renders
+whatever you return; on the canvas the caret reveals the raw source. See
+[Embeds](./docs/wiki/reference/props.md#embeds).
+
 Fenced code blocks render in plain monospace — no token colours — until you pass
 `codeLanguages` with the grammars you want. Stylo bundles none by design (the
 full grammar set is ~110 lazy chunks). See
@@ -164,8 +183,9 @@ full grammar set is ~110 lazy chunks). See
 Every colour is a `--stylo-*` custom property; override any of them on `.stylo`
 or an ancestor. A dark palette ships built in and activates under a `.dark` or
 `[data-theme="dark"]` ancestor — the `next-themes` / shadcn convention.
-`--stylo-font-size` (default `0.9375rem`) sets the base editor size; everything
-inside scales from it.
+`--stylo-font-size` (default `0.9375rem`) sets the base editor size and
+everything inside scales from it; `--stylo-font-family` and
+`--stylo-font-family-mono` set the prose and code fonts.
 
 ---
 
@@ -208,12 +228,15 @@ Engineering journal and Architectural Decision Records:
 
 ```bash
 npm install
-npm run dev        # playground
+npm run dev            # playground
 npm run typecheck
-npm run test
-npm run build      # library bundle
+npm run test           # unit suite (Vitest + jsdom)
+npm run test:browser   # in-place canvas in real Chromium (Playwright)
+npm run build          # library bundle
 ```
 
+`npm run test:browser` needs the browser once: `npx playwright install chromium`.
+
 ## License
 
 MIT © damiro