@godxjp/ui 31.26.1 → 31.27.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.26.1.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.27.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -47,7 +47,7 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 50 KB, all 181 components as name + group +
+1. `components-index.json` — 50 KB, all 182 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2137 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2142 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1822 `component` entries are per-part knobs; reach for one only when a role is
+   1827 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -145,7 +145,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
 | `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1822 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 1827 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/BlockEditor.json

@@ -0,0 +1,83 @@
+{
+  "docPath": "docs/data-entry/block-editor.tsx",
+  "example": "import { BlockEditor } from \"@godxjp/block-editor\";\nimport { FormField } from \"@godxjp/ui/data-entry\";\n\n<FormField id=\"body\" label=\"本文\">\n  <BlockEditor\n    value={body}\n    onValueChange={setBody}\n    upload={async (file, { signal }) => ({ url: await media.put(file, { signal }), name: file.name })}\n    suggestWikilinks={(q) => pages.search(q)}\n  />\n</FormField>",
+  "group": "data-entry",
+  "importPath": "@godxjp/block-editor",
+  "name": "BlockEditor",
+  "props": [
+    {
+      "description": "Controlled Markdown body (with `onValueChange`).",
+      "name": "value",
+      "type": "string"
+    },
+    {
+      "description": "Uncontrolled initial body.",
+      "name": "defaultValue",
+      "type": "string"
+    },
+    {
+      "description": "Canonical Markdown after each edit — `serialize(editor.getJSON())`, identical to `normalize(body)` from `@godxjp/markdown/codec` (CODEC_ID kit-md@1).",
+      "name": "onValueChange",
+      "type": "(markdown: string) => void"
+    },
+    {
+      "description": "Stores a pasted / dropped / chosen file (return `asset:<id>` if you like). An inline placeholder shows progress; failure offers Retry / Remove; deleting the placeholder aborts `signal`. Images become `![name](url)`, other files a link.",
+      "name": "upload",
+      "type": "(file: File, options: { signal: AbortSignal }) => Promise<{ url: string; name?: string }>"
+    },
+    {
+      "description": "The host's media library; the `/` Image row opens it instead of a file picker.",
+      "name": "pickMedia",
+      "type": "() => Promise<{ url: string; name?: string } | null>"
+    },
+    {
+      "description": "Refuse files with this message.",
+      "name": "uploadBlockedReason",
+      "type": "string | null"
+    },
+    {
+      "description": "`[[` suggestions from the host's page index; picking inserts `[[target|label]]`.",
+      "name": "suggestWikilinks",
+      "type": "(query: string) => WikilinkSuggestion[] | Promise<WikilinkSuggestion[]>"
+    },
+    {
+      "description": "Renders a block embed `![[target]]`; default is a labelled placeholder.",
+      "name": "renderEmbed",
+      "type": "(target: string) => ReactNode"
+    },
+    {
+      "description": "Resolves a stored image URL (`asset:<id>`) for display; the body keeps the original.",
+      "name": "resolveUrl",
+      "type": "(url: string) => string | undefined"
+    },
+    {
+      "description": "Extra `/` rows ({ key, label, icon, keywords?, run(api) }) — `api.insertMarkdown` inserts through the codec.",
+      "name": "actions",
+      "type": "BlockEditorAction[]"
+    },
+    {
+      "description": "Override any string (defaults: kit ja / en / vi).",
+      "name": "labels",
+      "type": "Partial<BlockEditorLabels>"
+    },
+    {
+      "description": "Not editable; the body still renders as Prose.",
+      "name": "disabled / readOnly",
+      "type": "boolean"
+    }
+  ],
+  "related": [
+    "MarkdownEditor — a Textarea with Markdown tooling, for raw-Markdown editing.",
+    "Markdown — rendering a stored body (same grammar, renderer v4)."
+  ],
+  "rules": [],
+  "storyPath": "data-entry/block-editor.tsx",
+  "tagline": "Notion / note.com style block editor (sibling package `@godxjp/block-editor`, versioned with the kit) that reads and writes MARKDOWN through `@godxjp/markdown/codec`: what onValueChange returns is byte-for-byte normalize(body). `/` block menu at the caret, ⋮⋮ handle (drag, turn into, duplicate, move, delete), floating format toolbar, `[[` wikilink suggestions, paste / drop uploads through the host, IME-safe, ja / en / vi (gh#1156).",
+  "usage": [
+    "DO store the Markdown it emits — it is already canonical; compute `normalize()` server-side from the same codec to verify.",
+    "DO give it a name: wrap in `FormField` or pass `aria-label` / `aria-labelledby` (the editable is a named `textbox`).",
+    "DO pass `upload` (and `pickMedia` for a library) instead of handling paste yourself.",
+    "DON'T render Markdown into it via HTML — pass `value`; HTML paste from other apps is handled by the schema.",
+    "Keyboard: `/` menu (↑↓ Enter Esc), Alt+Shift+↑/↓ moves a block, Mod+/ opens the block menu, Markdown shortcuts (`# `, `- `, `> `, ```` ``` ````, `---`)."
+  ]
+}

package/agent/components/Markdown.json

@@ -52,6 +52,11 @@
       "name": "shortCellLength",
       "type": "number | false"
     },
+    {
+      "description": "Visible titles for GitHub-alert callouts (`> [!WARNING]`) that carry none of their own. English by default (the package has no i18n); pass localized strings. Grammar v1 (gh#1156): callouts, `:::toggle[summary]`, `::::columns`/`:::column{width=N}`, CJK-friendly emphasis — the same syntax the pure codec at `@godxjp/markdown/codec` (CODEC_ID kit-md@1, parse/serialize/normalize, DOM-free) and @godxjp/block-editor use.",
+      "name": "calloutTitles",
+      "type": "Partial<Record<'note' | 'tip' | 'important' | 'warning' | 'caution', string>>"
+    },
     {
       "defaultValue": "true",
       "description": "`false` keeps ```mermaid fences as code. Diagrams need the optional peer `mermaid`.",

package/agent/components-index.json

@@ -311,6 +311,11 @@
     "name": "MarkdownEditor",
     "tagline": "Markdown editor (sibling package `@godxjp/editor`, versioned with the kit): the kit's Textarea with a WAI-ARIA formatting toolbar, write / preview / side by side (preview via `@godxjp/markdown`), IME-safe ⌘/Ctrl+B·I·K, one undo step per toolbar edit, and paste / drop / attach through a host `upload` (gh#1109)."
   },
+  {
+    "group": "data-entry",
+    "name": "BlockEditor",
+    "tagline": "Notion / note.com style block editor (sibling package `@godxjp/block-editor`, versioned with the kit) that reads and writes MARKDOWN through `@godxjp/markdown/codec`: what onValueChange returns is byte-for-byte normalize(body). `/` block menu at the caret, ⋮⋮ handle (drag, turn into, duplicate, move, delete), floating format toolbar, `[[` wikilink suggestions, paste / drop uploads through the host, IME-safe, ja / en / vi (gh#1156)."
+  },
   {
     "group": "data-display",
     "name": "Prose",

package/agent/components.json

@@ -5061,6 +5061,11 @@
         "name": "shortCellLength",
         "type": "number | false"
       },
+      {
+        "description": "Visible titles for GitHub-alert callouts (`> [!WARNING]`) that carry none of their own. English by default (the package has no i18n); pass localized strings. Grammar v1 (gh#1156): callouts, `:::toggle[summary]`, `::::columns`/`:::column{width=N}`, CJK-friendly emphasis — the same syntax the pure codec at `@godxjp/markdown/codec` (CODEC_ID kit-md@1, parse/serialize/normalize, DOM-free) and @godxjp/block-editor use.",
+        "name": "calloutTitles",
+        "type": "Partial<Record<'note' | 'tip' | 'important' | 'warning' | 'caution', string>>"
+      },
       {
         "defaultValue": "true",
         "description": "`false` keeps ```mermaid fences as code. Diagrams need the optional peer `mermaid`.",
@@ -5148,6 +5153,89 @@
       "DON'T build a toolbar over a bare Textarea, or a rich-text surface — this is the shared editor."
     ]
   },
+  {
+    "docPath": "docs/data-entry/block-editor.tsx",
+    "example": "import { BlockEditor } from \"@godxjp/block-editor\";\nimport { FormField } from \"@godxjp/ui/data-entry\";\n\n<FormField id=\"body\" label=\"本文\">\n  <BlockEditor\n    value={body}\n    onValueChange={setBody}\n    upload={async (file, { signal }) => ({ url: await media.put(file, { signal }), name: file.name })}\n    suggestWikilinks={(q) => pages.search(q)}\n  />\n</FormField>",
+    "group": "data-entry",
+    "importPath": "@godxjp/block-editor",
+    "name": "BlockEditor",
+    "props": [
+      {
+        "description": "Controlled Markdown body (with `onValueChange`).",
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "description": "Uncontrolled initial body.",
+        "name": "defaultValue",
+        "type": "string"
+      },
+      {
+        "description": "Canonical Markdown after each edit — `serialize(editor.getJSON())`, identical to `normalize(body)` from `@godxjp/markdown/codec` (CODEC_ID kit-md@1).",
+        "name": "onValueChange",
+        "type": "(markdown: string) => void"
+      },
+      {
+        "description": "Stores a pasted / dropped / chosen file (return `asset:<id>` if you like). An inline placeholder shows progress; failure offers Retry / Remove; deleting the placeholder aborts `signal`. Images become `![name](url)`, other files a link.",
+        "name": "upload",
+        "type": "(file: File, options: { signal: AbortSignal }) => Promise<{ url: string; name?: string }>"
+      },
+      {
+        "description": "The host's media library; the `/` Image row opens it instead of a file picker.",
+        "name": "pickMedia",
+        "type": "() => Promise<{ url: string; name?: string } | null>"
+      },
+      {
+        "description": "Refuse files with this message.",
+        "name": "uploadBlockedReason",
+        "type": "string | null"
+      },
+      {
+        "description": "`[[` suggestions from the host's page index; picking inserts `[[target|label]]`.",
+        "name": "suggestWikilinks",
+        "type": "(query: string) => WikilinkSuggestion[] | Promise<WikilinkSuggestion[]>"
+      },
+      {
+        "description": "Renders a block embed `![[target]]`; default is a labelled placeholder.",
+        "name": "renderEmbed",
+        "type": "(target: string) => ReactNode"
+      },
+      {
+        "description": "Resolves a stored image URL (`asset:<id>`) for display; the body keeps the original.",
+        "name": "resolveUrl",
+        "type": "(url: string) => string | undefined"
+      },
+      {
+        "description": "Extra `/` rows ({ key, label, icon, keywords?, run(api) }) — `api.insertMarkdown` inserts through the codec.",
+        "name": "actions",
+        "type": "BlockEditorAction[]"
+      },
+      {
+        "description": "Override any string (defaults: kit ja / en / vi).",
+        "name": "labels",
+        "type": "Partial<BlockEditorLabels>"
+      },
+      {
+        "description": "Not editable; the body still renders as Prose.",
+        "name": "disabled / readOnly",
+        "type": "boolean"
+      }
+    ],
+    "related": [
+      "MarkdownEditor — a Textarea with Markdown tooling, for raw-Markdown editing.",
+      "Markdown — rendering a stored body (same grammar, renderer v4)."
+    ],
+    "rules": [],
+    "storyPath": "data-entry/block-editor.tsx",
+    "tagline": "Notion / note.com style block editor (sibling package `@godxjp/block-editor`, versioned with the kit) that reads and writes MARKDOWN through `@godxjp/markdown/codec`: what onValueChange returns is byte-for-byte normalize(body). `/` block menu at the caret, ⋮⋮ handle (drag, turn into, duplicate, move, delete), floating format toolbar, `[[` wikilink suggestions, paste / drop uploads through the host, IME-safe, ja / en / vi (gh#1156).",
+    "usage": [
+      "DO store the Markdown it emits — it is already canonical; compute `normalize()` server-side from the same codec to verify.",
+      "DO give it a name: wrap in `FormField` or pass `aria-label` / `aria-labelledby` (the editable is a named `textbox`).",
+      "DO pass `upload` (and `pickMedia` for a library) instead of handling paste yourself.",
+      "DON'T render Markdown into it via HTML — pass `value`; HTML paste from other apps is handled by the schema.",
+      "Keyboard: `/` menu (↑↓ Enter Esc), Alt+Shift+↑/↓ moves a block, Mod+/ opens the block menu, Markdown shortcuts (`# `, `- `, `> `, ```` ``` ````, `---`)."
+    ]
+  },
   {
     "example": "import { Prose } from \"@godxjp/ui/data-display\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\n\n<Prose size=\"sm\">\n  <Markdown remarkPlugins={[remarkGfm]}>{issue.description}</Markdown>\n</Prose>",
     "group": "data-display",

package/agent/index.json

@@ -1,16 +1,16 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 181,
+    "components": 182,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2137,
+    "tokens": 2142,
     "vocabulary": 14
   },
   "files": [
     {
       "file": "components-index.json",
-      "note": "50 KB — name + group + tagline for all 181. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "50 KB — name + group + tagline for all 182. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.26.1/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.27.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1822,
+      "component": 1827,
       "foundation": 211,
       "semantic": 104
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.26.1"
+  "version": "31.27.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 181 components, 2137 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.26.1.
+> A Japanese-enterprise React design system: 182 components, 2142 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.27.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.26.1`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.27.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,10 +15,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 50 KB — all 181 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 50 KB — all 182 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1822 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1827 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.26.1/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.27.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -5231,6 +5231,36 @@
     "tier": "component",
     "value": "20rem"
   },
+  {
+    "description": "Grammar v1 blocks (gh#1156). Columns sit this far apart and stack below 40rem; a toggle's summary is the control that opens it. Callouts reuse the <Callout> geometry (--callout-*).",
+    "name": "--prose-columns-gap",
+    "tier": "component",
+    "value": "var(--space-6)"
+  },
+  {
+    "description": "@godxjp/block-editor (gh#1156): the start gutter the ⋮⋮ / + handle sits in, and the editing surface's minimum height (an empty body is still a target you can click into).",
+    "name": "--block-editor-gutter-inline-size",
+    "tier": "component",
+    "value": "calc(2 * var(--control-height-xs) + var(--space-2))"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--block-editor-min-height",
+    "tier": "component",
+    "value": "var(--band-height-3xl)"
+  },
+  {
+    "description": "The `/` and `[[` menus: wide enough for a label and its description, tall enough for ~8 rows before the list scrolls.",
+    "name": "--block-editor-menu-inline-size",
+    "tier": "component",
+    "value": "16rem"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--block-editor-menu-max-block-size",
+    "tier": "component",
+    "value": "20rem"
+  },
   {
     "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))",
     "name": "--prose-code-radius",

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.26.1",
+  "version": "31.27.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/data-display-layout.css

@@ -1142,7 +1142,7 @@
     background: hsl(var(--muted));
     padding: var(--code-block-space-inset);
     color: var(--code-block-foreground, hsl(var(--foreground)));
-    font-family: var(--font-mono);
+    font-family: var(--font-family-mono);
     font-size: var(--code-block-font-size);
     line-height: var(--code-block-line-height);
     white-space: pre-wrap;
@@ -1378,7 +1378,7 @@
   }
 
   .ui-prose :not(pre) > code {
-    font-family: var(--font-mono);
+    font-family: var(--font-family-mono);
     font-size: var(--prose-code-font-size);
     background: hsl(var(--muted));
     padding-inline: var(--prose-code-space-inline);
@@ -1425,6 +1425,229 @@
     max-inline-size: var(--prose-cell-image-max-inline-size);
   }
 
+  .ui-prose :is(th, td) img[width$="%"] {
+    inline-size: auto;
+  }
+
+  .ui-prose .ui-prose-callout {
+    margin-block: var(--callout-space-stack);
+    padding-block: var(--callout-space-inset-block);
+    padding-inline: var(--callout-space-inset-inline);
+    border-inline-start: var(--callout-rail-width) solid hsl(var(--info));
+    border-start-end-radius: var(--callout-radius, var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio)))));
+    border-end-end-radius: var(--callout-radius, var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio)))));
+    background-color: var(--surface-info, hsl(var(--info) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="tip"] {
+    border-inline-start-color: hsl(var(--success));
+    background-color: var(--surface-success, hsl(var(--success) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="important"] {
+    border-inline-start-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / var(--alert-bg-alpha));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="warning"] {
+    border-inline-start-color: hsl(var(--warning));
+    background-color: var(--surface-warning, hsl(var(--warning) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout[data-kind="caution"] {
+    border-inline-start-color: hsl(var(--destructive));
+    background-color: var(--surface-destructive, hsl(var(--destructive) / var(--alert-bg-alpha)));
+  }
+
+  .ui-prose .ui-prose-callout-title {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-prose :is(.ui-prose-callout, .ui-prose-column, .ui-prose-toggle) > :first-child {
+    margin-block-start: 0;
+  }
+
+  .ui-prose :is(.ui-prose-callout, .ui-prose-column, .ui-prose-toggle) > :last-child {
+    margin-block-end: 0;
+  }
+
+  .ui-prose .ui-prose-toggle {
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-prose .ui-prose-toggle-summary {
+    cursor: pointer;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-prose .ui-prose-toggle[open] > .ui-prose-toggle-summary {
+    margin-block-end: var(--prose-space-block);
+  }
+
+  .ui-prose .ui-prose-columns {
+    display: flex;
+    gap: var(--prose-columns-gap);
+    margin-block: var(--prose-space-block);
+  }
+
+  .ui-prose .ui-prose-column {
+    flex: var(--prose-column-grow, 1) 1 0;
+    min-inline-size: 0;
+  }
+
+  @media (width < 40rem) {
+    .ui-prose .ui-prose-columns {
+      flex-direction: column;
+    }
+  }
+
+  .ui-block-editor {
+    position: relative;
+    padding-inline-start: var(--block-editor-gutter-inline-size);
+  }
+
+  .ui-block-editor-content {
+    min-block-size: var(--block-editor-min-height);
+    outline: none;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .ui-block-editor-content .is-empty::before {
+    content: attr(data-placeholder);
+    float: inline-start;
+    block-size: 0;
+    color: hsl(var(--muted-foreground));
+    pointer-events: none;
+  }
+
+  .ui-block-editor-handle {
+    position: absolute;
+    inset-inline-start: 0;
+    z-index: 1;
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  @media (hover: hover) {
+    .ui-block-editor:not(:hover):not(:focus-within) .ui-block-editor-handle {
+      opacity: 0;
+    }
+  }
+
+  .ui-block-editor-content .ProseMirror-selectednode {
+    outline: var(--stroke-md) solid hsl(var(--ring));
+    outline-offset: var(--stroke-md);
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+  }
+
+  .ui-block-editor-menu {
+    --popover-surface-inline-size: var(--block-editor-menu-inline-size);
+  }
+
+  .ui-block-editor-menu [cmdk-list] {
+    max-block-size: var(--block-editor-menu-max-block-size);
+  }
+
+  .ui-block-editor-menu-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .ui-block-editor-menu-icon svg,
+  .ui-block-editor-toolbar svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+  }
+
+  .ui-block-editor-menu-text {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+  }
+
+  .ui-block-editor-menu-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs, var(--font-size-sm));
+  }
+
+  .ui-block-editor-toolbar {
+    z-index: var(--overlay-z-index);
+    padding: var(--space-1);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--popover-radius, var(--radius));
+    background-color: hsl(var(--popover) / var(--popover-alpha, 100%));
+    color: hsl(var(--popover-foreground));
+    box-shadow: var(--popover-shadow, var(--shadow-md));
+  }
+
+  .ui-block-editor-toolbar-row,
+  .ui-block-editor-toolbar-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .ui-block-editor-wikilink {
+    color: hsl(var(--prose-link-color, var(--text-link, var(--primary))));
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+  }
+
+  .ui-block-editor-embed-inline,
+  .ui-block-editor-raw-inline {
+    font-family: var(--font-family-mono);
+    font-size: var(--prose-code-font-size);
+  }
+
+  .ui-block-editor-embed,
+  .ui-block-editor-raw-block {
+    margin-block: var(--prose-space-block);
+    padding: var(--space-2) var(--space-3);
+    border: var(--stroke-hairline) dashed hsl(var(--border));
+    border-radius: calc(var(--radius) / var(--radius-ratio));
+  }
+
+  .ui-block-editor-raw-block-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .ui-block-editor-raw-block-source {
+    margin: 0;
+    white-space: pre-wrap;
+    font-family: var(--font-family-mono);
+    font-size: var(--prose-code-font-size);
+  }
+
+  .ui-block-editor-upload {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    vertical-align: middle;
+  }
+
+  .ui-block-editor-upload svg {
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+  }
+
+  .ui-block-editor-upload-spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-block-editor-upload-spinner {
+      animation: none;
+    }
+  }
+
+  .ui-block-editor-status {
+    margin-block-start: var(--space-2);
+  }
+
   .ui-prose img[data-prose-preview] {
     cursor: zoom-in;
   }

package/dist/styles/focus-ring.css

@@ -37,6 +37,7 @@
     .ui-carousel-dot,
     .ui-rating-star,
     .ui-prose img[data-prose-preview],
+    .ui-prose .ui-prose-toggle-summary,
     a.ui-list-row,
 
     a[data-slot="card"],
@@ -107,6 +108,7 @@
       .ui-carousel-dot,
       .ui-rating-star,
       .ui-prose img[data-prose-preview],
+      .ui-prose .ui-prose-toggle-summary,
       a.ui-list-row,
       a[data-slot="card"],
       button[data-slot="card"],

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.26.1",
+  "version": "31.27.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -215,6 +215,15 @@
         "chart-layout.css"
       ]
     },
+    "BlockEditor": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "text-layout.css",
+        "dialog-layout.css",
+        "navigation-layout.css"
+      ]
+    },
     "BranchScopePicker": {
       "layers": [
         "layout.css",

package/dist/tokens/components/data-display.css

@@ -57,6 +57,14 @@
   --prose-code-space-inline: var(--space-1);
 
   --prose-cell-image-max-inline-size: 20rem;
+
+  --prose-columns-gap: var(--space-6);
+
+  --block-editor-gutter-inline-size: calc(2 * var(--control-height-xs) + var(--space-2));
+  --block-editor-min-height: var(--band-height-3xl);
+
+  --block-editor-menu-inline-size: 16rem;
+  --block-editor-menu-max-block-size: 20rem;
   --prose-code-radius: initial;
 
   --prose-link-color: initial;

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **181**
-- With ≥1 frame: **157** · zero-frame: **24**
+- Public components: **182**
+- With ≥1 frame: **158** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -100,6 +100,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CodeBlock | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Markdown | ✓ | · | · | · | · | · | · | · | · | · |
 | MarkdownEditor | ✓ | · | · | · | · | · | · | · | · | · |
+| BlockEditor | ✓ | · | · | · | · | · | · | · | · | · |
 | Prose | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Timeline | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | TimelineGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-entry/block-editor.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { BlockEditor } from "@godxjp/block-editor";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+} from "@godxjp/ui/data-display";
+import { Form, FormField } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+import shot from "../assets/shot-landscape.svg";
+
+const initial = `# 議事録 2026-10-05
+
+> [!NOTE] 次回まで
+> 決済モジュールの再発行は **税率変更後** のケースを追加する
+
+- [ ] 仕様の確認
+- [x] [[Guide|設計ガイド]] の更新
+
+:::toggle[詳細]
+「/」でブロックを挿入、⋮⋮ でドラッグ。
+:::
+`;
+
+/** The host's page index — targets are ids, labels are localized like any other copy. */
+const PAGES = [
+  { target: "Guide", labelKey: "blockEditorDocs.pages.guide" },
+  { target: "Setup", labelKey: "blockEditorDocs.pages.setup" },
+  { target: "Release", labelKey: "blockEditorDocs.pages.release" },
+] as const;
+
+/** Stands in for the host's storage: a real app uploads the file and returns `asset:<id>`. */
+async function demoUpload(file: File) {
+  await new Promise((resolve) => setTimeout(resolve, 800));
+  return { url: shot, name: file.name };
+}
+
+/**
+ * @godxjp/block-editor — the block editor (gh#1156). A page form: the editor inside a FormField,
+ * the Markdown it saves shown beside it (exactly what `normalize()` returns), files through the
+ * host's `upload`, `[[` suggestions from the host's page index.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  const [body, setBody] = React.useState(initial);
+  return (
+    <PageContainer title="BlockEditor" subtitle={t("blockEditorDocs.subtitle")}>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("blockEditorDocs.edit.title")}</CardTitle>
+          <CardDescription>{t("blockEditorDocs.edit.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form onSubmit={(event) => event.preventDefault()}>
+            <Flex direction="col" gap="md">
+              <FormField id="block-body" label={t("blockEditorDocs.edit.label")}>
+                <BlockEditor
+                  value={body}
+                  onValueChange={setBody}
+                  upload={demoUpload}
+                  suggestWikilinks={(query) =>
+                    PAGES.map((p) => ({ target: p.target, label: t(p.labelKey) })).filter((p) =>
+                      `${p.target} ${p.label}`.toLowerCase().includes(query.toLowerCase()),
+                    )
+                  }
+                />
+              </FormField>
+              <Flex justify="end">
+                <Button type="submit">{t("blockEditorDocs.edit.save")}</Button>
+              </Flex>
+            </Flex>
+          </Form>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("blockEditorDocs.markdown.title")}</CardTitle>
+          <CardDescription>{t("blockEditorDocs.markdown.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <CodeBlock language="markdown">{body}</CodeBlock>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("blockEditorDocs.readOnly.title")}</CardTitle>
+          <CardDescription>{t("blockEditorDocs.readOnly.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <BlockEditor
+            defaultValue={initial}
+            readOnly
+            aria-label={t("blockEditorDocs.readOnly.label")}
+          />
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1598,5 +1598,29 @@
       "description": "The toolbar stays focusable, but its actions do nothing.",
       "label": "Body (view only)"
     }
+  },
+  "blockEditorDocs": {
+    "subtitle": "@godxjp/block-editor · / block menu · drag handle · format toolbar · saves Markdown",
+    "edit": {
+      "title": "Edit a page",
+      "description": "Type / for blocks, select text for formatting, drag ⋮⋮ to move a block (Alt+Shift+↑↓ from the keyboard).",
+      "label": "Body",
+      "save": "Save"
+    },
+    "markdown": {
+      "title": "What it saves",
+      "description": "The canonical Markdown — exactly what normalize() from @godxjp/markdown/codec returns.",
+      "label": "Markdown"
+    },
+    "readOnly": {
+      "title": "Read-only",
+      "description": "No handle, no menus; the body renders as Prose.",
+      "label": "Body (view only)"
+    },
+    "pages": {
+      "guide": "Design guide",
+      "setup": "Setup",
+      "release": "Release steps"
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1591,5 +1591,29 @@
       "description": "ツールバーはフォーカスできますが、操作は無効です。",
       "label": "本文（閲覧のみ）"
     }
+  },
+  "blockEditorDocs": {
+    "subtitle": "@godxjp/block-editor · 「/」でブロック · ドラッグハンドル · 書式ツールバー · Markdown で保存",
+    "edit": {
+      "title": "ページを編集",
+      "description": "「/」でブロックを挿入、文字を選ぶと書式、⋮⋮ でブロックを移動（キーボードは Alt+Shift+↑↓）。",
+      "label": "本文",
+      "save": "保存"
+    },
+    "markdown": {
+      "title": "保存される内容",
+      "description": "正規化された Markdown — @godxjp/markdown/codec の normalize() と同じ結果です。",
+      "label": "Markdown"
+    },
+    "readOnly": {
+      "title": "閲覧のみ",
+      "description": "ハンドルもメニューも出ません。本文は Prose で表示されます。",
+      "label": "本文（閲覧のみ）"
+    },
+    "pages": {
+      "guide": "設計ガイド",
+      "setup": "セットアップ",
+      "release": "リリース手順"
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1591,5 +1591,29 @@
       "description": "Thanh công cụ vẫn nhận focus nhưng thao tác bị vô hiệu.",
       "label": "Nội dung (chỉ xem)"
     }
+  },
+  "blockEditorDocs": {
+    "subtitle": "@godxjp/block-editor · menu khối / · tay nắm kéo · thanh định dạng · lưu Markdown",
+    "edit": {
+      "title": "Sửa trang",
+      "description": "Gõ / để chèn khối, chọn chữ để định dạng, kéo ⋮⋮ để di chuyển khối (bàn phím: Alt+Shift+↑↓).",
+      "label": "Nội dung",
+      "save": "Lưu"
+    },
+    "markdown": {
+      "title": "Nội dung được lưu",
+      "description": "Markdown chuẩn hoá — đúng kết quả normalize() của @godxjp/markdown/codec.",
+      "label": "Markdown"
+    },
+    "readOnly": {
+      "title": "Chỉ xem",
+      "description": "Không có tay nắm, không có menu; nội dung hiển thị bằng Prose.",
+      "label": "Nội dung (chỉ xem)"
+    },
+    "pages": {
+      "guide": "Hướng dẫn thiết kế",
+      "setup": "Cài đặt",
+      "release": "Các bước phát hành"
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.26.1",
-  "godxUiMcp": "31.26.1",
+  "version": "31.27.0",
+  "godxUiMcp": "31.27.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -315,7 +315,7 @@
     "audit:component-cases": "node scripts/check-component-case-evidence.mjs",
     "audit:examples": "node scripts/ui-audit.mjs docs",
     "build": "tsup && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs && node scripts/fix-esm-extensions.mjs && node scripts/add-use-client.mjs",
-    "build:packages": "cd packages/markdown && node ../../node_modules/tsup/dist/cli-default.js && cd ../editor && node ../../node_modules/tsup/dist/cli-default.js",
+    "build:packages": "cd packages/markdown && node ../../node_modules/tsup/dist/cli-default.js && cd ../editor && node ../../node_modules/tsup/dist/cli-default.js && cd ../block-editor && node ../../node_modules/tsup/dist/cli-default.js",
     "build:jis-level1-fonts": "node scripts/build-jis-level1-fonts.mjs",
     "capture:voiceover": "node scripts/capture-voiceover-evidence.mjs",
     "check:agent-catalog": "node scripts/gen-agent-catalog.mjs --check",
@@ -417,7 +417,7 @@
     "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
     "test:watch": "vitest",
     "typecheck": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.json && pnpm typecheck:packages",
-    "typecheck:packages": "node node_modules/typescript-7/bin/tsc --noEmit -p packages/markdown/tsconfig.json && node node_modules/typescript-7/bin/tsc --noEmit -p packages/editor/tsconfig.json",
+    "typecheck:packages": "node node_modules/typescript-7/bin/tsc --noEmit -p packages/markdown/tsconfig.json && node node_modules/typescript-7/bin/tsc --noEmit -p packages/editor/tsconfig.json && node node_modules/typescript-7/bin/tsc --noEmit -p packages/block-editor/tsconfig.json",
     "typecheck:docs": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.docs.json",
     "typecheck:mcp": "node node_modules/typescript-7/bin/tsc --noEmit -p mcp/tsconfig.json",
     "typecheck:ts6": "tsc --noEmit -p tsconfig.json",
@@ -500,6 +500,7 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
     "@eslint/js": "^10.0.1",
+    "@floating-ui/dom": "^1.8.0",
     "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-avatar": "^1.2.6",
@@ -515,6 +516,18 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
+    "@tiptap/core": "3.31.4",
+    "@tiptap/extension-bubble-menu": "3.31.4",
+    "@tiptap/extension-details": "3.31.4",
+    "@tiptap/extension-image": "3.31.4",
+    "@tiptap/extension-list": "3.31.4",
+    "@tiptap/extension-table": "3.31.4",
+    "@tiptap/extension-text-style": "3.31.4",
+    "@tiptap/extensions": "3.31.4",
+    "@tiptap/pm": "3.31.4",
+    "@tiptap/react": "3.31.4",
+    "@tiptap/starter-kit": "3.31.4",
+    "@tiptap/suggestion": "3.31.4",
     "@types/hast": "^3.0.5",
     "@types/mdast": "^4.0.4",
     "@types/node": "^26.4.0",
@@ -531,7 +544,15 @@
     "globals": "^17.11.0",
     "jsdom": "^30.0.1",
     "jsqr": "^1.4.0",
+    "mdast-util-directive": "^3.1.1",
+    "mdast-util-from-markdown": "^2.1.0",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-to-markdown": "^2.2.0",
     "mermaid": "^11.17.2",
+    "micromark-extension-cjk-friendly": "^2.0.2",
+    "micromark-extension-directive": "^4.0.0",
+    "micromark-extension-gfm": "^3.0.0",
+    "micromark-util-types": "^2.0.3",
     "playwright": "^1.62.1",
     "pngjs": "^7.0.0",
     "prettier": "^3.9.6",

package/scripts/prune-css.mjs

@@ -128,7 +128,7 @@ let sawNamespace = false;
 // `@godxjp/editor` / `@godxjp/markdown` too (gh#1114): their components render kit components, and
 // the manifest maps `MarkdownEditor` to the layers those need.
 const IMPORT =
-  /(?:import|export)\s+(type\s+)?([^;'"]*?)\s*from\s*["'](@godxjp\/(?:ui|editor|markdown)(?:\/[^"']*)?)["']/g;
+  /(?:import|export)\s+(type\s+)?([^;'"]*?)\s*from\s*["'](@godxjp\/(?:ui|editor|block-editor|markdown)(?:\/[^"']*)?)["']/g;
 for (const file of new Set(sources)) {
   const src = readFileSync(file, "utf8");
   for (const m of src.matchAll(IMPORT)) {