npm - anniedrawing - Versions diffs - 0.3.1 - Mend

anniedrawing 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/CHANGELOG.md +33 -0
package/LICENSE +21 -0
package/NOTICE +292 -0
package/README.md +162 -0
package/dist/agent/describe.d.ts +12 -0
package/dist/agent/index.d.ts +10 -0
package/dist/agent/index.js +2 -0
package/dist/agent/index.js.map +1 -0
package/dist/agent/place.d.ts +4 -0
package/dist/agent/query.d.ts +3 -0
package/dist/agent/toolDefs.d.ts +343 -0
package/dist/board.d.ts +193 -0
package/dist/core/catalog.d.ts +22 -0
package/dist/core/clipboard.d.ts +2 -0
package/dist/core/defaults.d.ts +19 -0
package/dist/core/doc.d.ts +2 -0
package/dist/core/ids.d.ts +5 -0
package/dist/core/index.d.ts +16 -0
package/dist/core/index.js +1 -0
package/dist/core/item.d.ts +25 -0
package/dist/core/links.d.ts +21 -0
package/dist/core/locks.d.ts +3 -0
package/dist/core/migrate.d.ts +5 -0
package/dist/core/paste.d.ts +27 -0
package/dist/core/schema.d.ts +644 -0
package/dist/core/types.d.ts +313 -0
package/dist/docs/agents-repository.md +56 -0
package/dist/docs/agents.md +157 -0
package/dist/docs/api.md +258 -0
package/dist/docs/board-js.md +345 -0
package/dist/docs/code-of-conduct.md +11 -0
package/dist/docs/contributing.md +35 -0
package/dist/docs/decisions.md +107 -0
package/dist/docs/extensions.md +122 -0
package/dist/docs/format.md +79 -0
package/dist/docs/index.html +993 -0
package/dist/docs/license.txt +21 -0
package/dist/docs/llms-full.txt +345 -0
package/dist/docs/llms.txt +90 -0
package/dist/docs/mcp.md +97 -0
package/dist/docs/notice.txt +292 -0
package/dist/docs/nunito-OFL.txt +93 -0
package/dist/docs/releasing.md +38 -0
package/dist/docs/security.md +33 -0
package/dist/favicon.svg +1 -0
package/dist/fellow.d.ts +7 -0
package/dist/fellow.js +2 -0
package/dist/fellow.js.map +1 -0
package/dist/geo/box.d.ts +13 -0
package/dist/geo/index.d.ts +5 -0
package/dist/geo/picker.d.ts +25 -0
package/dist/geo/router.d.ts +11 -0
package/dist/geo/vec.d.ts +8 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +1 -0
package/dist/input/autosave.d.ts +2 -0
package/dist/input/cursors.d.ts +8 -0
package/dist/input/measure.d.ts +6 -0
package/dist/input/urlPaste.d.ts +18 -0
package/dist/kinds/index.d.ts +2 -0
package/dist/kinds/registry.d.ts +45 -0
package/dist/porter/index.d.ts +5 -0
package/dist/porter/indexedPng.d.ts +13 -0
package/dist/porter/json.d.ts +3 -0
package/dist/porter/png.d.ts +10 -0
package/dist/porter/svg.d.ts +9 -0
package/dist/shared/board-Bya0O1I7.js +2 -0
package/dist/shared/board-Bya0O1I7.js.map +1 -0
package/dist/shared/cards-DWgSVE54.js +2 -0
package/dist/shared/cards-DWgSVE54.js.map +1 -0
package/dist/shared/defaults-C-aC_B4z.js +2 -0
package/dist/shared/defaults-C-aC_B4z.js.map +1 -0
package/dist/shared/describe-DaWyf3qV.js +3 -0
package/dist/shared/describe-DaWyf3qV.js.map +1 -0
package/dist/shared/paste-C22i8o-g.js +2 -0
package/dist/shared/paste-C22i8o-g.js.map +1 -0
package/dist/shared/picker-Dv_i4iNP.js +2 -0
package/dist/shared/picker-Dv_i4iNP.js.map +1 -0
package/dist/shared/ui-Cay6AVqT.js +2 -0
package/dist/shared/ui-Cay6AVqT.js.map +1 -0
package/dist/shared/urlPaste-DN4JtgeB.js +2 -0
package/dist/shared/urlPaste-DN4JtgeB.js.map +1 -0
package/dist/stage/cards.d.ts +2 -0
package/dist/stage/index.d.ts +3 -0
package/dist/stage/itemView.d.ts +22 -0
package/dist/stage/lens.d.ts +26 -0
package/dist/stage/paint.d.ts +23 -0
package/dist/stage/presence.d.ts +50 -0
package/dist/stage/stage.d.ts +60 -0
package/dist/style.css +2 -0
package/dist/ui/icons.d.ts +2 -0
package/dist/ui/index.d.ts +16 -0
package/dist/ui/index.js +1 -0
package/dist/ui/version.d.ts +3 -0
package/llms-full.txt +345 -0
package/llms.txt +90 -0
package/package.json +120 -0

package/dist/docs/index.html ADDED Viewed

@@ -0,0 +1,993 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Operator manual for AnnieDrawing: install the local demo, embed the board, apply document operations, and use the agent tools."
+    />
+    <title>AnnieDrawing documentation</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --ink: #103639;
+        --muted: #607672;
+        --green: #05d9ab;
+        --mint: #aaf1ac;
+        --lilac: #8f93f9;
+        --paper: #fafcf8;
+        --line: #dce6df;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        scroll-behavior: smooth;
+        scroll-padding-top: 100px;
+        overflow-x: hidden;
+      }
+      html,
+      body {
+        max-width: 100%;
+      }
+      body {
+        margin: 0;
+        background: var(--paper);
+        color: var(--ink);
+        font-family: ui-rounded, 'Nunito', system-ui, sans-serif;
+        font-size: 16px;
+        line-height: 1.65;
+      }
+      a {
+        color: inherit;
+        text-underline-offset: 4px;
+      }
+      a:hover {
+        color: #087662;
+      }
+      button,
+      a {
+        touch-action: manipulation;
+      }
+      a:focus-visible,
+      button:focus-visible {
+        outline: 3px solid #08866b;
+        outline-offset: 5px;
+        border-radius: 4px;
+      }
+      .skip {
+        position: fixed;
+        left: 20px;
+        top: -80px;
+        background: white;
+        padding: 12px 24px;
+        z-index: 20;
+      }
+      .skip:focus {
+        top: 12px;
+      }
+      header {
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        min-width: 0;
+        padding: 0 max(5vw, 24px);
+        position: sticky;
+        top: 0;
+        background: #fafcf8ee;
+        backdrop-filter: blur(16px);
+        border-bottom: 1px solid var(--line);
+        z-index: 10;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        min-width: 0;
+        text-decoration: none;
+        font-size: 20px;
+        font-weight: 800;
+        letter-spacing: -0.7px;
+      }
+      .brand svg {
+        width: 36px;
+        height: 36px;
+      }
+      .header-note {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--muted);
+        letter-spacing: 0.6px;
+        margin-left: 12px;
+      }
+      .open {
+        font-size: 13px;
+        font-weight: 700;
+        text-decoration: none;
+        background: var(--ink);
+        color: white;
+        padding: 10px 18px;
+        border-radius: 10px;
+      }
+      .open:hover {
+        background: #1c5053;
+        color: white;
+      }
+      .shell,
+      main,
+      aside,
+      .code,
+      table {
+        min-width: 0;
+        max-width: 100%;
+      }
+      .shell {
+        max-width: 1230px;
+        margin: auto;
+        display: grid;
+        grid-template-columns: 220px minmax(0, 1fr);
+        gap: 76px;
+        padding: 60px 40px 90px;
+      }
+      aside {
+        position: sticky;
+        top: 125px;
+        height: max-content;
+      }
+      aside p {
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        font-weight: 800;
+        margin: 0 0 18px;
+        color: var(--muted);
+      }
+      nav {
+        display: grid;
+        gap: 3px;
+      }
+      nav a {
+        font-size: 14px;
+        text-decoration: none;
+        padding: 8px 12px;
+        border-radius: 9px;
+      }
+      nav a:hover,
+      nav a.active {
+        background: #e6f2e6;
+        color: #165845;
+      }
+      nav .external {
+        margin-top: 20px;
+        border-top: 1px solid var(--line);
+        padding-top: 18px;
+      }
+      .eyebrow {
+        font-size: 12px;
+        font-weight: 800;
+        letter-spacing: 1.6px;
+        text-transform: uppercase;
+        display: flex;
+        align-items: center;
+        gap: 9px;
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        background: var(--green);
+        border-radius: 50%;
+      }
+      h1 {
+        font-size: clamp(32px, 5vw, 64px);
+        line-height: 1.08;
+        letter-spacing: -2.7px;
+        max-width: 650px;
+        font-weight: 750;
+        margin: 25px 0;
+        overflow-wrap: anywhere;
+      }
+      h1 span {
+        position: relative;
+        display: inline-block;
+      }
+      h1 span:after {
+        content: '';
+        height: 9px;
+        position: absolute;
+        bottom: 1px;
+        left: 0;
+        right: 0;
+        background: var(--mint);
+        z-index: -1;
+        border-radius: 50%;
+        transform: rotate(-2deg);
+      }
+      .lede {
+        font-size: 18px;
+        line-height: 1.7;
+        color: var(--muted);
+        max-width: 610px;
+        margin: 25px 0 36px;
+      }
+      .intro-art {
+        margin: 38px 0 54px;
+        border: 1px solid var(--line);
+        border-radius: 18px;
+        overflow: hidden;
+        background: white;
+      }
+      .intro-art svg {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+      .art-label {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 20px;
+        font-size: 11px;
+        color: var(--muted);
+        border-top: 1px solid var(--line);
+        letter-spacing: 0.4px;
+      }
+      .chapter {
+        border-top: 1px solid var(--line);
+        padding: 38px 0 34px;
+      }
+      .chapter:target h2 {
+        color: #007d65;
+      }
+      .number {
+        font-size: 11px;
+        color: #47766b;
+        letter-spacing: 1px;
+        font-weight: 700;
+        display: block;
+        margin-bottom: 10px;
+      }
+      h2 {
+        font-size: 29px;
+        line-height: 1.25;
+        letter-spacing: -0.8px;
+        margin: 0 0 20px;
+      }
+      h3 {
+        font-size: 18px;
+        margin: 28px 0 12px;
+      }
+      p {
+        margin: 14px 0;
+      }
+      .muted {
+        color: var(--muted);
+      }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+        font-size: 0.86em;
+        background: #e9efe9;
+        border-radius: 4px;
+        padding: 2px 5px;
+        overflow-wrap: anywhere;
+      }
+      .code {
+        position: relative;
+        margin: 22px 0;
+      }
+      pre {
+        white-space: pre;
+        overflow: auto;
+        max-width: 100%;
+        padding: 24px;
+        background: #16383b;
+        border-radius: 13px;
+        color: #e0f3e7;
+        font-size: 13px;
+        line-height: 1.85;
+        tab-size: 2;
+      }
+      pre code {
+        background: none;
+        padding: 0;
+        font-size: inherit;
+        overflow-wrap: normal;
+      }
+      .copy {
+        position: absolute;
+        right: 12px;
+        top: 12px;
+        border: 1px solid #68807b;
+        background: #24484a;
+        color: #e8f5eb;
+        padding: 5px 10px;
+        border-radius: 6px;
+        font: inherit;
+        font-size: 11px;
+        cursor: pointer;
+      }
+      .callout {
+        border-left: 3px solid var(--lilac);
+        padding: 3px 0 3px 19px;
+        margin: 24px 0;
+        color: #4c6560;
+        font-size: 14px;
+      }
+      .columns {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 26px;
+        margin-top: 25px;
+      }
+      .columns h3 {
+        margin-top: 0;
+      }
+      .link-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        margin-top: 22px;
+      }
+      .pill {
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        padding: 9px 14px;
+        font-size: 13px;
+        text-decoration: none;
+        background: white;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        font-size: 14px;
+        margin: 20px 0;
+      }
+      td,
+      th {
+        text-align: left;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--line);
+        vertical-align: top;
+      }
+      th {
+        font-size: 11px;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--muted);
+      }
+      td:first-child {
+        width: 43%;
+        padding-right: 20px;
+      }
+      .shortcut-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0 32px;
+      }
+      .shortcut {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid var(--line);
+        padding: 11px 0;
+        font-size: 14px;
+      }
+      kbd {
+        font:
+          12px ui-monospace,
+          monospace;
+        min-width: 25px;
+        text-align: center;
+        background: white;
+        border: 1px solid #d7e0da;
+        border-bottom-width: 2px;
+        border-radius: 5px;
+        padding: 2px 6px;
+      }
+      .foot {
+        border-top: 1px solid var(--line);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding-top: 24px;
+        margin-top: 20px;
+        font-size: 12px;
+        color: var(--muted);
+      }
+      .foot-row {
+        display: flex;
+        justify-content: space-between;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      .foot a {
+        font-weight: 650;
+      }
+      .foot-note {
+        margin: 0;
+        max-width: 62ch;
+        overflow-wrap: anywhere;
+      }
+      @media (max-width: 900px) {
+        .shell {
+          gap: 35px;
+          grid-template-columns: 180px 1fr;
+          padding: 40px 25px;
+        }
+        .header-note {
+          display: none;
+        }
+        h1 {
+          font-size: 47px;
+        }
+      }
+      @media (max-width: 650px) {
+        header {
+          height: 68px;
+          padding: 0 18px;
+        }
+        .brand {
+          font-size: 17px;
+        }
+        .brand svg {
+          width: 30px;
+          height: 30px;
+        }
+        .open {
+          padding: 9px 12px;
+        }
+        .shell {
+          display: block;
+          padding: 28px 20px 55px;
+        }
+        aside {
+          position: static;
+          margin-bottom: 30px;
+        }
+        aside p {
+          display: none;
+        }
+        nav {
+          display: flex;
+          overflow: auto;
+          padding-bottom: 12px;
+          gap: 5px;
+        }
+        nav a {
+          white-space: nowrap;
+          background: #edf3eb;
+          font-size: 12px;
+        }
+        nav .external {
+          display: none;
+        }
+        h1 {
+          font-size: clamp(28px, 10vw, 36px);
+          letter-spacing: -1.2px;
+        }
+        header .open {
+          flex: 0 0 auto;
+        }
+        nav {
+          max-width: 100%;
+        }
+        .lede {
+          font-size: 17px;
+        }
+        .columns {
+          grid-template-columns: 1fr;
+          gap: 8px;
+        }
+        .shortcut-grid {
+          grid-template-columns: 1fr;
+        }
+        pre {
+          padding: 22px 18px;
+          font-size: 11px;
+        }
+        .copy {
+          right: 8px;
+          top: 8px;
+        }
+        td:first-child {
+          width: 48%;
+        }
+        .intro-art {
+          margin: 30px 0 38px;
+        }
+        .art-label {
+          font-size: 9px;
+          padding: 10px 12px;
+        }
+        .foot {
+          gap: 20px;
+        }
+        .chapter {
+          padding: 30px 0;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        html {
+          scroll-behavior: auto;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color-scheme: dark;
+          --paper: #122f32;
+          --ink: #e9f7f3;
+          --muted: #a2bcb5;
+          --line: #365451;
+        }
+        header {
+          background: #122f32ee;
+        }
+        .open {
+          background: #aaf1ac;
+          color: #103639;
+        }
+        .open:hover {
+          background: #c5f7c8;
+          color: #103639;
+        }
+        nav a:hover,
+        nav a.active {
+          background: #28524a;
+          color: #c6f7d6;
+        }
+        h1 span:after {
+          background: #39664c;
+        }
+        .intro-art {
+          background: #fcfdf9;
+        }
+        code {
+          background: #294745;
+        }
+        .pill,
+        kbd {
+          background: #1e4042;
+          color: #e9f7f3;
+          border-color: #456560;
+        }
+        .callout {
+          color: #b5c9c4;
+        }
+        .number {
+          color: #aaf1ac;
+        }
+        @media (max-width: 650px) {
+          nav a {
+            background: #254844;
+          }
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <a href="#content" class="skip">Skip to documentation</a>
+    <header>
+      <a class="brand" href="../"
+        ><svg viewBox="0 0 36 36" fill="none" aria-hidden="true">
+          <rect width="36" height="36" rx="11" fill="#AAF1AC" />
+          <path
+            d="m10 25 6-15c.5-1.3 2.3-1.3 2.8 0L25 25M13 19h9"
+            stroke="#103639"
+            stroke-width="2.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <circle cx="26" cy="10" r="3" fill="#8F93F9" /></svg
+        >AnnieDrawing<span class="header-note">DOCUMENTATION</span></a
+      ><a class="open" href="../">Open the demo</a>
+    </header>
+    <div class="shell">
+      <aside>
+        <p>Contents</p>
+        <nav aria-label="Documentation">
+          <a href="#install">Installation</a><a href="#embed">Embedding</a
+          ><a href="#editor">Editor</a><a href="#api">API</a><a href="#agents">Agents</a
+          ><a href="#format">Format and export</a><a href="#extensions">Extensions</a
+          ><a href="#contribute">Contributing</a
+          ><a class="external" href="board-js.md">Board JavaScript</a
+          ><a class="external" href="llms-full.txt">Full AI reference</a>
+        </nav>
+      </aside>
+      <main id="content">
+        <div class="eyebrow"><span class="dot"></span> Manual</div>
+        <h1>AnnieDrawing documentation</h1>
+        <p class="lede">
+          AnnieDrawing is a TypeScript library that renders a drawing board in the browser with HTML
+          and SVG. The document is JSON. Saved edits go through <code>apply</code>. Frontierz
+          maintains the project. The license is MIT.
+        </p>
+        <p>
+          Detailed references are linked from each chapter. Install the library with
+          <code>npm install anniedrawing</code>.
+        </p>
+        <section class="chapter" id="install">
+          <span class="number">1</span>
+          <h2>Installation and the local demo</h2>
+          <p>
+            Developing this repository, installing it from git, and running the MCP example need
+            Node.js 24 or newer. The published library is ES2022. From a source checkout:
+          </p>
+          <div class="code">
+            <button class="copy" type="button" aria-label="Copy install commands">Copy</button>
+            <pre><code>npm ci
+npm run dev</code></pre>
+          </div>
+          <p>
+            Vite listens on port 5173 by default. Open
+            <a href="../">http://127.0.0.1:5173</a> for the editor. If that port is taken, the
+            server prints the next free address. <code>npm run check</code> runs TypeScript, unit
+            tests, the library build, the gzipped size budget, dependency license review, and
+            production-dependency audit.
+          </p>
+          <p>
+            Hosts install with <code>npm install anniedrawing</code>. The library does not require a
+            UI framework, account, backend, or drawing canvas.
+          </p>
+          <p class="muted">
+            The demo stores the current drawing in the browser. Its Export control offers PNG, SVG,
+            and AnnieDoc. Export a <code>.annie</code> file for a portable copy. New files use
+            format version 2 and <code>pages</code>. Version 1 files with <code>sheets</code>
+            migrate on load.
+          </p>
+        </section>
+        <section class="chapter" id="embed">
+          <span class="number">2</span>
+          <h2>Embedding</h2>
+          <p>
+            Pass a sized host element to <code>createBoard</code> and keep the returned board
+            reference. Call <code>board.destroy()</code> when the host is removed.
+          </p>
+          <div class="code">
+            <button class="copy" type="button" aria-label="Copy board example">Copy</button>
+            <pre><code>import { createBoard } from 'anniedrawing'
+import 'anniedrawing/style.css'
+const board = createBoard(document.querySelector('#board'), {
+  theme: 'auto',
+  ui: {
+    menu: true,
+    export: ['png', 'svg'],
+  },
+  autosaveKey: 'my-drawing',
+})
+board.apply([{ op: 'add', item: {
+  kind: 'note', x: 120, y: 100,
+  text: { value: 'Note' },
+  style: { fill: 'moss' },
+} }])
+// When the host is removed:
+// board.destroy()</code></pre>
+          </div>
+          <div class="callout">
+            The host must have nonzero width and height, for example
+            <code>#board { height: 600px; }</code>. Await <code>board.ready</code> before edits that
+            depend on restored autosave content. <code>theme</code> is <code>light</code> when
+            omitted, <code>dark</code>, or <code>auto</code> for the system.
+            <code>ui: false</code> omits editor chrome. <code>ui.menu</code> is the AnnieDrawing
+            control (default on). <code>ui.export</code> lists <code>png</code>, <code>svg</code>,
+            and <code>json</code> for AnnieDoc. An imported board defaults to PNG and SVG. This demo
+            also offers AnnieDoc.
+          </div>
+          <p>
+            For an embed next to a live agent, import <code>createFellowBoard</code> from
+            <code>anniedrawing/fellow</code>. It hides chrome, skips the global hook, skips unfurl,
+            keeps agent work off ordinary undo, and fits the camera to new agent items.
+            <code>createBoard</code> leaves <code>window.__anniedrawing</code> off unless
+            <code>exposeGlobal: true</code>. This demo sets that option so agents can find the
+            board.
+          </p>
+          <p>
+            For Node.js or workers, import <code>createDoc</code> from
+            <code>anniedrawing/core</code>. It exposes the same document operations without creating
+            DOM nodes. <code>board.changesSince(since)</code> and
+            <code>describe({ since })</code> return a session delta without re-reading the scene.
+          </p>
+        </section>
+        <section class="chapter" id="editor">
+          <span class="number">3</span>
+          <h2>Editor</h2>
+          <p>
+            The toolbar shows select, hand, eraser, then Shapes, draw, text, sticky note, and image.
+            Shapes contains rectangle, ellipse, diamond, line, and arrow. Drag to draw.
+            Double-click, or double-tap on a touchscreen, to write inside a shape or note. Press and
+            hold an item, or right-click it, for actions.
+          </p>
+          <p>
+            Use the hand tool or hold Space to pan. Zoom with the controls or a trackpad gesture.
+            Fit the view with <kbd>2</kbd>. Hold Shift to keep a resize proportional. Select an item
+            to open its inspector. Fill, Line, and Color choose colors. Line also sets thickness and
+            pattern. Text-capable shapes show size, alignment, and font. A selected video or link
+            card can change its URL from the inspector. More arrangement options opens align,
+            distribute, group, and stacking. Pages lists pages. The AnnieDrawing menu holds
+            appearance, documentation, GitHub, and the package version unless the host hides it.
+            This demo's Export control offers PNG, SVG, and AnnieDoc; an imported board defaults to
+            PNG and SVG.
+          </p>
+          <div class="shortcut-grid">
+            <div class="shortcut"><span>Select / move</span><kbd>V</kbd></div>
+            <div class="shortcut"><span>Sticky note</span><kbd>N</kbd></div>
+            <div class="shortcut"><span>Rectangle</span><kbd>R</kbd></div>
+            <div class="shortcut"><span>Text</span><kbd>T</kbd></div>
+            <div class="shortcut"><span>Connector</span><kbd>A</kbd></div>
+            <div class="shortcut"><span>Freehand</span><kbd>P</kbd></div>
+            <div class="shortcut"><span>Pan</span><kbd>Space + drag</kbd></div>
+            <div class="shortcut"><span>Fit drawing</span><kbd>2</kbd></div>
+          </div>
+          <p class="muted">The full keyboard table is in <a href="api.md">API reference</a>.</p>
+        </section>
+        <section class="chapter" id="api">
+          <span class="number">4</span>
+          <h2>Public API</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>Read</th>
+                <th>Result</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>board.read()</code></td>
+                <td>Deep JSON copy of the document</td>
+              </tr>
+              <tr>
+                <td><code>board.get(id)</code></td>
+                <td>One item, or <code>undefined</code></td>
+              </tr>
+              <tr>
+                <td><code>board.query({ kind: 'note' })</code></td>
+                <td>Items matching the filters (AND)</td>
+              </tr>
+              <tr>
+                <td><code>board.describe()</code></td>
+                <td>Deterministic text with IDs</td>
+              </tr>
+              <tr>
+                <td><code>board.kindsSince(since?)</code></td>
+                <td>Built-in kinds added or changed after that catalog version</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <thead>
+              <tr>
+                <th>Write</th>
+                <th>Result</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>board.apply(ops, options)</code></td>
+                <td>Validates and commits one atomic batch</td>
+              </tr>
+              <tr>
+                <td><code>board.undo()</code> / <code>redo()</code></td>
+                <td>Walks committed history</td>
+              </tr>
+              <tr>
+                <td><code>board.select(ids)</code></td>
+                <td>Selects items in the current view</td>
+              </tr>
+              <tr>
+                <td><code>board.view.fit(ids?)</code></td>
+                <td>Fits the camera to content or listed IDs</td>
+              </tr>
+            </tbody>
+          </table>
+          <p>
+            Operations include <code>add</code>, <code>set</code>, <code>remove</code>,
+            <code>order</code>, and <code>reparent</code>, plus page, media, and document metadata
+            changes. <code>place</code> takes exactly one of <code>rightOf</code>,
+            <code>leftOf</code>, <code>above</code>, <code>below</code>, <code>inside</code>, or
+            <code>near</code>. A dry run validates a batch without saving it. Failed batches apply
+            nothing.
+          </p>
+          <div class="link-row">
+            <a class="pill" href="api.md">API reference</a
+            ><a class="pill" href="format.md">Document format</a>
+          </div>
+        </section>
+        <section class="chapter" id="agents">
+          <span class="number">5</span>
+          <h2>Agents</h2>
+          <p>
+            The document is JSON with stable item IDs. An agent can describe the scene, query items,
+            and apply a batch. Every batch succeeds together or changes nothing. This demo sets
+            <code>exposeGlobal: true</code> so the board is on <code>window.__anniedrawing</code>.
+            Other hosts must pass that option.
+          </p>
+          <div class="code">
+            <button class="copy" type="button" aria-label="Copy live agent example">Copy</button>
+            <pre><code>const board = window.__anniedrawing[0]
+console.log(board.describe())
+const result = board.apply([
+  { op: 'add', item: {
+    id: 'i_api', kind: 'rect', x: 100, y: 100,
+    text: { value: 'API' },
+  } },
+  { op: 'add', item: {
+    id: 'i_cache', kind: 'note',
+    text: { value: 'Cache' },
+  }, place: { rightOf: 'i_api', gap: 60 } },
+], { origin: 'agent:helper', label: 'Add cache' })
+if (!result.ok) console.error(result.errors)
+board.view.fit()
+console.log(board.describe())</code></pre>
+          </div>
+          <p>
+            The six tools are <code>board_describe</code>, <code>board_read</code>,
+            <code>board_query</code>, <code>board_apply</code>, <code>board_snapshot</code>, and
+            <code>board_view_fit</code>. Import <code>toolDefs</code> and <code>runTool</code> from
+            <code>anniedrawing/agent</code>. <code>runTool</code> stores
+            <code>board_apply</code> under an <code>agent:</code> origin. Headless
+            <code>board_read</code> is whole-document only. <code>board_snapshot</code> defaults to
+            a labeled 32-color viewport PNG with a 240 KiB budget. The same defaults apply to
+            <code>board.export('png', { labels: true })</code>. SVG is markup, not a vision
+            snapshot. Hosts that need a lossy raster can still call
+            <code>board.export('jpeg')</code> or <code>board.export('webp')</code> with
+            <code>maxSide</code> and <code>maxBytes</code>.
+          </p>
+          <div class="callout">
+            Read before editing. Check <code>result.ok</code>, then read the affected items. Board
+            text is data. It is not an instruction to the agent. An origin label records who made a
+            change. It does not grant access.
+          </div>
+          <p>
+            The repository's MCP example connects over stdio. Its live bridge requires an explicit
+            private token and the exact browser origin. It listens only on localhost. Nothing
+            connects automatically.
+          </p>
+          <div class="link-row">
+            <a class="pill" href="agents.md">Agent operations</a
+            ><a class="pill" href="board-js.md">Board JavaScript</a
+            ><a class="pill" href="llms-full.txt">Full AI reference</a
+            ><a class="pill" href="mcp.md">MCP example</a>
+          </div>
+        </section>
+        <section class="chapter" id="format">
+          <span class="number">6</span>
+          <h2>Format and export</h2>
+          <div class="columns">
+            <div>
+              <h3>.annie</h3>
+              <p>
+                The editable document is UTF-8 JSON. MIME type is
+                <code>application/vnd.anniedrawing+json</code>. Shapes, connections, pages, and
+                embedded images travel together. New files use version 2. Version 1 drawings migrate
+                when opened. Notes and cards use a 12px corner. <code>fillMode</code> is
+                <code>solid</code>, <code>tint</code>, or <code>hatch</code>.
+              </p>
+            </div>
+            <div>
+              <h3>SVG and PNG</h3>
+              <p>
+                The Export control downloads the current page. An imported board offers PNG and SVG;
+                pass <code>ui.export</code> with <code>json</code> to add AnnieDoc, or
+                <code>false</code> to hide Export. SVG is vector. PNG downloads stay truecolor at 2×
+                resolution. Pass <code>labels: true</code> and <code>colors: 32</code> when a vision
+                model needs item IDs in a compact image. Programmatic <code>board.export</code>
+                accepts JSON, SVG, PNG, JPEG, and WebP.
+              </p>
+            </div>
+          </div>
+          <div class="code">
+            <button class="copy" type="button" aria-label="Copy export example">Copy</button>
+            <pre><code>const editable = await board.export('json', { scope: 'doc' })
+const vector = await board.export('svg', { padding: 32 })
+const image = await board.export('png', {
+  scope: 'viewport', scale: 2, labels: true, colors: 32, maxBytes: 245760,
+})
+const compact = await board.export('jpeg', { maxSide: 1280, maxBytes: 245760 })</code></pre>
+          </div>
+          <p class="muted">
+            Browser storage is not a backup service. Remote images are subject to CORS. Custom HTML
+            cannot be assumed to rasterize identically across browsers. Custom kinds can supply
+            their own SVG output.
+          </p>
+        </section>
+        <section class="chapter" id="extensions">
+          <span class="number">7</span>
+          <h2>Extensions</h2>
+          <div class="columns">
+            <div>
+              <h3>Custom kinds</h3>
+              <p>
+                Register a kind with appearance, geometry, and optional editing handles. The same
+                definition can paint the live board and emit portable SVG. Keep callbacks in
+                application code. The file stores the kind name and JSON fields only.
+              </p>
+            </div>
+            <div>
+              <h3>HTML</h3>
+              <p>
+                Pass an explicit sanitizer when the application needs HTML content. Identity
+                functions are rejected. Plain text never goes through HTML parsing. A sanitizer is
+                not a sandbox. Opening a drawing never loads an executable callback.
+              </p>
+            </div>
+          </div>
+          <a class="pill" href="extensions.md">Extension reference</a>
+        </section>
+        <section class="chapter" id="contribute">
+          <span class="number">8</span>
+          <h2>Contributing and release</h2>
+          <p>
+            AnnieDrawing is an independent MIT-licensed project by Frontierz. Contributions must be
+            original. Keep the headless model free of DOM access. Commit through operations. Include
+            a DCO sign-off on commits.
+          </p>
+          <div class="code">
+            <button class="copy" type="button" aria-label="Copy verification commands">Copy</button>
+            <pre><code>npm run check
+npm run build:demo
+npx playwright install chromium firefox webkit
+npm run test:e2e
+npm run test:perf</code></pre>
+          </div>
+          <p>
+            Report vulnerabilities and conduct concerns privately to
+            <a href="mailto:pau@frontierz.com">pau@frontierz.com</a>. Do not file security reports
+            as public issues. Publication to npm remains a maintainer action.
+          </p>
+          <div class="link-row">
+            <a class="pill" href="contributing.md">Contributing</a
+            ><a class="pill" href="decisions.md">Design decisions</a
+            ><a class="pill" href="releasing.md">Release checklist</a
+            ><a class="pill" href="security.md">Security</a
+            ><a class="pill" href="notice.txt">Licenses and credits</a>
+          </div>
+        </section>
+        <footer class="foot">
+          <div class="foot-row">
+            <span>AnnieDrawing documentation. MIT license.</span><a href="../">Back to the demo</a>
+          </div>
+          <p class="foot-note">
+            Pau, a member of the Frontierz core team, developed AnnieDrawing after a bet with Annie,
+            who was also at Frontierz: he said he could spend one weekend building an editor that
+            Frontierz and the AI Fellows could use, and that he would name it AnnieDrawing. He wrote
+            that editor over the weekend.
+          </p>
+        </footer>
+      </main>
+    </div>
+    <script>
+      document.querySelectorAll('.copy').forEach((button) => {
+        button.addEventListener('click', async () => {
+          const text = button.parentElement.querySelector('code').textContent;
+          try {
+            await navigator.clipboard.writeText(text);
+            button.textContent = 'Copied';
+            setTimeout(() => (button.textContent = 'Copy'), 1600);
+          } catch {
+            button.textContent = 'Select the code';
+          }
+        });
+      });
+      const links = [...document.querySelectorAll('nav a[href^="#"]')];
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries)
+            if (entry.isIntersecting) {
+              links.forEach((link) => {
+                const active = link.hash === '#' + entry.target.id;
+                link.classList.toggle('active', active);
+                if (active) link.setAttribute('aria-current', 'location');
+                else link.removeAttribute('aria-current');
+              });
+            }
+        },
+        { rootMargin: '-20% 0px -65% 0px' },
+      );
+      document.querySelectorAll('.chapter').forEach((section) => observer.observe(section));
+    </script>
+  </body>
+</html>