@godxjp/ui 31.26.2 → 31.28.0

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/data-entry/emoji-picker.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { EmojiPicker, FormField } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * EmojiPicker (gh#1164) — a page icon chosen from the active language's emoji keywords, with
+ * recents and "remove icon".
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  const [icon, setIcon] = React.useState<string | null>(null);
+  return (
+    <PageContainer title="EmojiPicker" subtitle={t("emojiPickerDocs.subtitle")}>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("emojiPickerDocs.title")}</CardTitle>
+          <CardDescription>{t("emojiPickerDocs.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction="col" gap="sm">
+            <FormField id="page-icon" label={t("emojiPickerDocs.label")}>
+              <EmojiPicker value={icon} onValueChange={setIcon} />
+            </FormField>
+            <Text size="sm" tone="muted">
+              {icon ? t("emojiPickerDocs.chosen", { icon }) : t("emojiPickerDocs.none")}
+            </Text>
+          </Flex>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1598,5 +1598,45 @@
       "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"
+    }
+  },
+  "pageCoverDocs": {
+    "title": "Quarterly planning notes",
+    "icon": "Page icon",
+    "reposition": "Reposition",
+    "done": "Done",
+    "body": "Drag the cover while repositioning, or use the arrow keys; the icon opens the emoji picker.",
+    "position": "Focal point: {value}% from the top"
+  },
+  "emojiPickerDocs": {
+    "subtitle": "Search in your language · categories · recents · keyboard grid",
+    "title": "Choose a page icon",
+    "description": "Type a keyword in the current language, or browse the categories. Arrow keys move through the grid; Enter picks.",
+    "label": "Icon",
+    "chosen": "Chosen: {icon}",
+    "none": "No icon"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1591,5 +1591,45 @@
       "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": "リリース手順"
+    }
+  },
+  "pageCoverDocs": {
+    "title": "四半期計画メモ",
+    "icon": "ページアイコン",
+    "reposition": "位置を調整",
+    "done": "完了",
+    "body": "位置を調整中はカバー画像をドラッグするか矢印キーで動かせます。アイコンを押すと絵文字ピッカーが開きます。",
+    "position": "焦点: 上から {value}%"
+  },
+  "emojiPickerDocs": {
+    "subtitle": "言語に合わせた検索 · カテゴリ · 最近使った絵文字 · キーボード操作",
+    "title": "ページアイコンを選ぶ",
+    "description": "表示中の言語でキーワードを入力するか、カテゴリから選びます。矢印キーで移動し、Enter で決定します。",
+    "label": "アイコン",
+    "chosen": "選択中: {icon}",
+    "none": "アイコンなし"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1591,5 +1591,45 @@
       "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"
+    }
+  },
+  "pageCoverDocs": {
+    "title": "Ghi chú kế hoạch quý",
+    "icon": "Biểu tượng trang",
+    "reposition": "Chỉnh vị trí",
+    "done": "Xong",
+    "body": "Khi đang chỉnh vị trí, kéo ảnh bìa hoặc dùng phím mũi tên; bấm biểu tượng để mở bộ chọn emoji.",
+    "position": "Tiêu điểm: {value}% tính từ trên"
+  },
+  "emojiPickerDocs": {
+    "subtitle": "Tìm theo ngôn ngữ · danh mục · dùng gần đây · điều khiển bằng bàn phím",
+    "title": "Chọn biểu tượng trang",
+    "description": "Gõ từ khoá theo ngôn ngữ hiện tại hoặc duyệt danh mục. Phím mũi tên để di chuyển, Enter để chọn.",
+    "label": "Biểu tượng",
+    "chosen": "Đã chọn: {icon}",
+    "none": "Không có biểu tượng"
   }
 }

package/docs/layout/page-cover.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Prose } from "@godxjp/ui/data-display";
+import { EmojiPicker } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { PageContainer, PageCover } from "@godxjp/ui/layout";
+
+import shot from "../assets/shot-landscape.svg";
+
+/**
+ * PageCover + PageContainer `icon` / headerScale="display" (gh#1160) — a Notion / note.com page:
+ * a banner cover you can reposition (drag, or the arrow keys while repositioning), the page icon
+ * over its edge (chosen with EmojiPicker), and the article's display-size title.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  const [y, setY] = React.useState(40);
+  const [moving, setMoving] = React.useState(false);
+  const [icon, setIcon] = React.useState<string | null>("📘");
+  return (
+    <PageContainer
+      title={t("pageCoverDocs.title")}
+      headerScale="display"
+      icon={
+        <EmojiPicker
+          value={icon}
+          onValueChange={setIcon}
+          size="lg"
+          aria-label={t("pageCoverDocs.icon")}
+        />
+      }
+      cover={
+        <PageCover
+          src={shot}
+          alt=""
+          positionY={y}
+          onPositionChange={setY}
+          repositioning={moving}
+          onRepositioningChange={setMoving}
+          actions={
+            <Button size="sm" variant="secondary" onClick={() => setMoving((m) => !m)}>
+              {moving ? t("pageCoverDocs.done") : t("pageCoverDocs.reposition")}
+            </Button>
+          }
+        />
+      }
+    >
+      <Prose measure="medium">
+        <p>{t("pageCoverDocs.body")}</p>
+      </Prose>
+      <Text size="sm" tone="muted">
+        {t("pageCoverDocs.position", { value: y })}
+      </Text>
+    </PageContainer>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.26.2",
-  "godxUiMcp": "31.26.2",
+  "version": "31.28.0",
+  "godxUiMcp": "31.28.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",
@@ -483,6 +483,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "emojibase-data": "^17.0.0",
     "input-otp": "^1.5.0",
     "lucide-react": "^1.37.0",
     "qrcode.react": "4.2.0",
@@ -500,6 +501,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 +517,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 +545,17 @@
     "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-frontmatter": "^2.0.1",
+    "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-frontmatter": "^2.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)) {