@growgroup/visual-editor 0.8.1 → 0.9.1

package/src/editor/components/ppt/PptChrome.tsx

@@ -28,7 +28,7 @@ import { applyShadowPreset, paintTarget } from '../../utils/element-effects';
 import {
   Undo2, Redo2, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight,
   Type, Square, Circle, Minus, MoveUpRight, Image as ImageIcon, LayoutGrid,
-  Boxes, Trash2, Copy, X, Save, PenTool, Loader2, ZoomIn, ZoomOut, Maximize,
+  Boxes, Blocks, Trash2, Copy, X, Save, PenTool, Loader2, ZoomIn, ZoomOut, Maximize,
   Search, Sun, Moon, ChevronDown, Plus, MousePointer2, Pencil, Play, Crosshair,
   Palette, Sparkles, EyeOff, ArrowUp, ArrowDown, Film,
   MoreHorizontal, MessageSquare, ChevronLeft, ChevronRight, Crop, Monitor, MonitorUp,
@@ -88,6 +88,8 @@ export type PptActions = {
   ungroupElements?: () => void;
   openFilePicker: () => void;
   openMediaLibrary: () => void;
+  /** 「台帳から挿入」。io.loadInserts が無ければ渡さない(ボタンを出さない) */
+  openCatalogInserts?: () => void;
   openComponents: () => void;
   openVariables: () => void;
   activeTool: EditorTool;
@@ -1739,6 +1741,9 @@ export function PptRibbon({
               pal={pal}
             />
             <BigButton icon={Boxes} label={'コンポー\nネント'} onClick={actions.openComponents} pal={pal} />
+            {actions.openCatalogInserts && (
+              <BigButton icon={Blocks} label={'台帳から\n挿入'} onClick={actions.openCatalogInserts} title="デザインシステムの台帳から挿入" pal={pal} />
+            )}
           </>
         )}
 

package/src/editor/components/ppt/PptComments.tsx

@@ -223,6 +223,26 @@ export function fitRect(rect: CommentRect, artboard: HTMLElement): CommentRect {
   return { x: rect.x * sx, y: rect.y, width: rect.width * sx, height: rect.height };
 }
 
+/**
+ * コメントの範囲。anchorRect が無くても、表示用の文言(「範囲 (x, y) w×h」「点 (x, y)」)から戻す。
+ *
+ * 【なぜ文言から戻すか】
+ * 範囲コメント(0.4.0)より前の提案書・構成ラフの殻は、コメントの保存で anchorRect と seq を捨て、
+ * anchorLabel だけを残す(殻の vite-plugin の許可リストに無いため)。そのままだと範囲を指定して投稿しても
+ * 紙面に枠が出ず、「範囲が表示されない」になる。文言はエディタが describeRect で書いた形なので、そこから戻せる。
+ * 要素に付けたコメント(anchorSrc)の anchorLabel は要素の文字なので読まない
+ */
+export function anchorRectOf(c: Pick<SlideComment, 'anchorRect' | 'anchorLabel' | 'anchorSrc'>): CommentRect | undefined {
+  if (c.anchorRect) return c.anchorRect;
+  if (c.anchorSrc || !c.anchorLabel) return undefined;
+  const num = '(-?\\d+(?:\\.\\d+)?)';
+  const range = c.anchorLabel.match(new RegExp(`^範囲 \\(${num}, ${num}\\) ${num}×${num}$`));
+  if (range) return { x: +range[1], y: +range[2], width: +range[3], height: +range[4] };
+  const point = c.anchorLabel.match(new RegExp(`^点 \\(${num}, ${num}\\)$`));
+  if (point) return { x: +point[1], y: +point[2], width: 0, height: 0 };
+  return undefined;
+}
+
 /** 矩形を人が読む形に(「範囲 (120, 840) 600×240」「点 (120, 840)」) */
 export function describeRect(r: CommentRect): string {
   const n = (v: number) => String(Math.round(v));
@@ -282,7 +302,7 @@ export function useCommentMarkers({
       const artboard = doc?.getElementById('artboard');
       if (!doc || !artboard) return;
       const layer = ensureCommentLayer(doc, artboard);
-      const shown = comments.filter((c) => (c.anchorRect || c.anchorSrc) && !c.resolved);
+      const shown = comments.filter((c) => (anchorRectOf(c) || c.anchorSrc) && !c.resolved);
       const wanted = new Set(shown.map((c) => c.id));
       layer.querySelectorAll<HTMLElement>('[data-comment-id]').forEach((el) => {
         if (!wanted.has(el.dataset.commentId!)) el.remove();
@@ -318,8 +338,9 @@ export function useCommentMarkers({
         const isActive = c.id === activeThreadId;
         let x = 0;
         let y = 0;
-        if (c.anchorRect) {
-          const r = fitRect(c.anchorRect, artboard);
+        const anchorRect = anchorRectOf(c);
+        if (anchorRect) {
+          const r = fitRect(anchorRect, artboard);
           if (isPointRect(r)) {
             layer.querySelector(`[data-comment-id="${CSS.escape(c.id)}"][data-comment-rect]`)?.remove();
             x = r.x - size / 2;
@@ -404,7 +425,7 @@ export function useCommentMarkers({
   }, [
     active, page, getIframeDoc, outerZoom, activeThreadId,
     JSON.stringify(draftRect),
-    JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.anchorRect, c.seq, c.resolved, c.author, c.text])),
+    JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.anchorRect, c.anchorLabel, c.seq, c.resolved, c.author, c.text])),
   ]);
 }
 
@@ -770,10 +791,10 @@ export function PptCommentsPanel({
         </button>
       </div>
 
-      {c.anchorRect ? (
+      {anchorRectOf(c) ? (
         <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }} data-comment-rect-label>
           <Crosshair className="h-3 w-3" />
-          {describeRect(c.anchorRect)}
+          {describeRect(anchorRectOf(c)!)}
         </div>
       ) : c.anchorSrc && (
         <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }}>

package/src/editor/hooks/index.ts

@@ -25,7 +25,7 @@ export { useContextMenuHandler } from './useContextMenuHandler';
 export { useIframeSetup } from './useIframeSetup';
 export { useFocusManagement } from './useFocusManagement';
 export { useInlineTextSelection } from './useInlineTextSelection';
-export { useLinkNavigation } from './useLinkNavigation';
+export { useLinkNavigation, useRevealElement } from './useLinkNavigation';
 export { useKeepArtboardInPlace } from './useKeepArtboardInPlace';
 export { useResizablePanel } from './useResizablePanel';
 

package/src/editor/hooks/useContextMenuHandler.ts

@@ -9,6 +9,7 @@ import { useCallback, useRef, useEffect, MutableRefObject } from 'react';
 import { useEditorContext } from '../EditorContext';
 import { updateSelectionBox } from '../utils/dom-utils';
 import { extractElementInfo } from '../utils/style-utils';
+import { passThroughSvg } from '../utils/svg-hit';
 
 interface UseContextMenuHandlerOptions {
   /** 編集可能要素を取得する関数 */
@@ -86,7 +87,8 @@ export function useContextMenuHandler(
         const y = iframeRect.top + e.clientY * outerScale;
 
         // 要素がクリックされた場合は選択
-        const element = getEditableElement(e.target, iframeDoc);
+        // SVG の箱の空きは素通りさせる(クリックの判別と同じ。utils/svg-hit.ts)
+        const element = getEditableElement(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc);
         if (element) {
           const elementId = element.getAttribute('data-element-id') || '';
           const currentIds = selectedElementIdsRef.current;

package/src/editor/hooks/useElementSelection.ts

@@ -26,6 +26,7 @@ import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
 import type { DragState, ResizeState, MarqueeState } from "../types";
 import { debugLog } from '../utils/debug';
+import { passThroughSvg } from '../utils/svg-hit';
 
 /**
  * mousedown で保留し、mouseup で意味を確定するクリック情報
@@ -1181,6 +1182,9 @@ export function useElementSelection(
                   ),
               ) ?? null;
         }
+        // SVG の箱の中で何も描かれていない所を押したら、SVG を素通りして下の要素を押したことにする。
+        // 装飾の SVG が文字やボタンに重なっていると、素のクリックも Cmd+クリックも SVG しか選べなかった(utils/svg-hit.ts)
+        hitSource = passThroughSvg(iframeDoc, hitSource, e.clientX, e.clientY);
         const hit = getEditableElement(hitSource, iframeDoc);
         // 空白＝押した点の祖先に編集可能要素がまったく無い状態。
         // #artboard / 紙面と同じ大きさの器 / #artboard-wrapper / #canvas-container は
@@ -1432,7 +1436,7 @@ export function useElementSelection(
 
 
         const isCtrlCmd = e.ctrlKey || e.metaKey;
-        const deepElement = getEditableElement(e.target, iframeDoc);
+        const deepElement = getEditableElement(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc);
 
         if (!deepElement) return;
 

package/src/editor/hooks/useIframeSetup.ts

@@ -12,6 +12,7 @@ import { buildDomTree, isInlineElement, isNonEditableTag } from '../utils/dom-ut
 import { EDITOR_IFRAME_STYLES } from '../constants';
 import { isLockedInsidePart } from '../parts';
 import { debugLog } from '../utils/debug';
+import { isInsideSvg, passThroughSvg } from '../utils/svg-hit';
 
 interface UseIframeSetupReturn {
   /**
@@ -107,7 +108,14 @@ export function useIframeSetup(): UseIframeSetupReturn {
         element.removeAttribute('data-inline');
         return;
       }
-      if (element.closest('script, style, svg path, svg g')) return;
+      if (element.closest('script, style')) return;
+      // SVG の中(path / circle / g など)は SVG ごと 1 つの図として扱う(utils/svg-hit.ts)。
+      // 以前は path と g だけを外していたので、circle や rect が単独で選ばれていた
+      if (isInsideSvg(element)) {
+        element.removeAttribute('data-editable');
+        element.removeAttribute('data-element-id');
+        return;
+      }
       if (element.classList.contains('material-icons')) return;
       if (element.classList.contains('material-icons-outlined')) return;
       // selection-box およびその子要素はスキップ
@@ -274,7 +282,8 @@ export function useIframeSetup(): UseIframeSetupReturn {
           clearPreview();
           return;
         }
-        const next = resolveHoverTarget(e.target, iframeDoc, {
+        // SVG の箱の空きは素通りさせる(クリックの判別と同じ。utils/svg-hit.ts)
+        const next = resolveHoverTarget(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc, {
           meta: e.metaKey || e.ctrlKey,
         });
         if (next === currentPreviewElement) return;

package/src/editor/hooks/useLinkNavigation.ts

@@ -27,18 +27,21 @@ const PENDING_ANCHOR_DELAY_MS = 500;
 const prefersReducedMotion = () =>
   typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 
-export function useLinkNavigation() {
-  const { contentList, currentContentId, onContentChange } = useEditorContext();
+/**
+ * 紙面の中の要素が見える位置へ視点を移す。
+ *
+ * キャンバスでは紙面(iframe)は伸びきっていてスクロールしないので、`scrollIntoView` では
+ * 何も動かない。キャンバスの位置を動かすか、1 ページ表示なら紙面の中の器をスクロールさせる。
+ * リンク移動(アンカー)と「台帳から挿入」のあとの移動で、同じ計算を使う。
+ */
+export function useRevealElement() {
   const canvas = useMultiPageCanvasOptional();
-  const stateRef = useRef({ contentList, currentContentId, onContentChange, canvas });
-  stateRef.current = { contentList, currentContentId, onContentChange, canvas };
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
 
-  /** 紙面の中の要素(`'top'` なら先頭)が見える位置へ紙面を移す。見つからなければ false */
-  const revealAnchor = useCallback((iframeDoc: Document, hash: string): boolean => {
-    const found = findAnchorTarget(iframeDoc, hash);
-    const el = found === 'top' ? iframeDoc.getElementById('artboard') : found;
+  return useCallback((iframeDoc: Document, el: Element | null): boolean => {
     if (!el) return false;
-    const c = stateRef.current.canvas;
+    const c = canvasRef.current;
 
     if (c?.isEnabled) {
       // キャンバス: 紙面(iframe)は伸びきっていてスクロールしない。キャンバスの位置を動かす
@@ -77,6 +80,23 @@ export function useLinkNavigation() {
     });
     return true;
   }, []);
+}
+
+export function useLinkNavigation() {
+  const { contentList, currentContentId, onContentChange } = useEditorContext();
+  const canvas = useMultiPageCanvasOptional();
+  const stateRef = useRef({ contentList, currentContentId, onContentChange, canvas });
+  stateRef.current = { contentList, currentContentId, onContentChange, canvas };
+  const revealElement = useRevealElement();
+
+  /** 紙面の中の要素(`'top'` なら先頭)が見える位置へ紙面を移す。見つからなければ false */
+  const revealAnchor = useCallback(
+    (iframeDoc: Document, hash: string): boolean => {
+      const found = findAnchorTarget(iframeDoc, hash);
+      return revealElement(iframeDoc, found === 'top' ? iframeDoc.getElementById('artboard') : found);
+    },
+    [revealElement],
+  );
 
   const navigate = useCallback(
     (target: LinkTarget, iframeDoc: Document): string | void => {

package/src/editor/parts.ts

@@ -17,6 +17,7 @@
 import type { EditorPartDef } from '../io';
 import { findFlowInsertion } from './utils/drop-target';
 import { isNonEditableTag } from './utils/dom-utils';
+import { isInsideSvg } from './utils/svg-hit';
 
 export const PART_ATTR = 'data-part';
 export const PART_VERSION_ATTR = 'data-part-v';
@@ -317,7 +318,7 @@ export function unlockPartDescendants(root: HTMLElement): number {
   let i = 0;
   const stamp = Date.now();
   for (const el of Array.from(root.querySelectorAll('*'))) {
-    if (el.closest('script, style, svg path, svg g')) continue;
+    if (el.closest('script, style') || isInsideSvg(el)) continue;
     if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') continue;
     if (isNonEditableTag(el)) continue;
     if (!el.getAttribute('data-element-id')) {

package/src/editor/utils/catalog-inserts.ts

@@ -0,0 +1,79 @@
+/**
+ * 「台帳から挿入」の DOM まわり。React に依存しない純粋なユーティリティ。
+ *
+ * 利用側(io.fetchInsert)は Tailwind のクラスが付いたままの静的 HTML を断片で返す。
+ * 色はトークン名なので、紙面の CSS が解決できるものだけが色になる(解決できなければ地の色)。
+ * エディタは中身を組み替えず、
+ *   1. `<script>` を落とす
+ *   2. 要素にする
+ *   3. どこに入れるかを決める
+ * の 3 つだけをやる。
+ */
+import { fallbackContainer, isContainer } from './drop-target';
+
+/**
+ * 紙面に `<script>` を持ち込まない。
+ *
+ * 【なぜ paste-sanitizer(DOMPurify)を通さないか】
+ * あちらは貼り付け用で、許可する属性を列挙する作り。`data-ds` / `data-ds-v` / `data-slot` の
+ * ような台帳側の目印が黙って消える。挿入元は利用側が自分で作った HTML(外部から来た文字列ではない)
+ * なので、ここでは「紙面で script を動かさない」という既存の方針だけを守る。
+ * 同じ理由で `on*` のイベント属性も落とす(紙面は sandbox で script を動かさないが、
+ * 保存 HTML に残ると公開物に混ざるため)。
+ */
+export function stripScripts(root: Element): void {
+  for (const el of Array.from(root.querySelectorAll('script'))) el.remove();
+  const all: Element[] = [root, ...Array.from(root.querySelectorAll('*'))];
+  for (const el of all) {
+    for (const attr of Array.from(el.attributes)) {
+      if (/^on/i.test(attr.name)) el.removeAttribute(attr.name);
+    }
+  }
+}
+
+/**
+ * HTML の断片を `doc` の要素にする。
+ * ルートが 2 つ以上あるときは `<div>` で束ねずに先頭だけを返す ── 利用側が
+ * `<section class="wf-ds">` で包む約束なので、束ねる器をエディタが勝手に足すと
+ * 保存 HTML に出どころ不明の `<div>` が増える。空なら null。
+ */
+export function insertHtmlToElement(doc: Document, html: string): HTMLElement | null {
+  const tpl = doc.createElement('template');
+  tpl.innerHTML = html.trim();
+  const root = tpl.content.firstElementChild;
+  if (!root) return null;
+  const el = doc.importNode(root, true) as HTMLElement;
+  stripScripts(el);
+  return el;
+}
+
+/** 挿入先。`before` が null なら `parent` の末尾 */
+export type InsertionPoint = { parent: Element; before: Element | null };
+
+/**
+ * 挿入位置の規則。
+ *
+ * - 選択中の要素があれば**その直後**。ただし選択が器(`<main>` など)の直下でなければ、
+ *   器の直下まで上がった祖先の直後に入れる(セクションの列に並ぶ)
+ * - 選択が無ければ器の末尾
+ * - 器 = `<main>` / `[data-wf-body]` / `#artboard` / body(drop-target.ts と同じ判定)
+ *
+ * ドラッグ&ドロップの `findFlowInsertion` と器の規則を共有しているので、
+ * 「ドロップしたときと挿入したときで入る場所が違う」が起きない。
+ */
+export function resolveInsertionPoint(doc: Document, selected: Element | null): InsertionPoint {
+  const container = fallbackContainer(doc);
+  if (!selected || !selected.isConnected) return { parent: container, before: null };
+
+  // 選択そのものが器なら、その中の末尾に入れる(器の「直後」に入れると紙面の外に出る)
+  if (isContainer(doc, selected)) return { parent: selected, before: null };
+
+  // 器の直下まで上がる
+  let node: Element = selected;
+  for (;;) {
+    const parent: Element | null = node.parentElement;
+    if (!parent) return { parent: container, before: null };
+    if (isContainer(doc, parent)) return { parent, before: node.nextElementSibling };
+    node = parent;
+  }
+}

package/src/editor/utils/drop-target.ts

@@ -36,7 +36,7 @@ export interface FlowInsertion {
  * 「セクションの器」か。この直下に部品を並べる。
  * 器 = body / #artboard / [data-wf-body] / main
  */
-function isContainer(doc: Document, node: Element | null): node is Element {
+export function isContainer(doc: Document, node: Element | null): node is Element {
   return (
     !!node &&
     (node === doc.body ||
@@ -46,8 +46,12 @@ function isContainer(doc: Document, node: Element | null): node is Element {
   );
 }
 
-/** 器が見つからないときの落とし先 */
-function fallbackContainer(doc: Document): Element {
+/**
+ * 器が見つからないときの落とし先。
+ * 「台帳から挿入」(選択が無いとき・選択の祖先が器の直下に無いとき)も同じ器を使うので export する。
+ * 器の規則をここ 1 箇所に残さないと、ドロップと挿入で入る場所が変わる
+ */
+export function fallbackContainer(doc: Document): Element {
   return (
     doc.querySelector('main') ??
     doc.querySelector('[data-wf-body]') ??

package/src/editor/utils/svg-hit.ts

@@ -0,0 +1,141 @@
+/**
+ * SVG をクリックしたときの当たり判定。
+ *
+ * 【なぜ要るか】
+ * HTML の中の `<svg>` は、描いた線や塗りが無い所も含めて**箱全体**でクリックを受ける。
+ * 装飾の SVG(斜めの線・背景の図形)が文字やボタンの上に重なっていると、その箱の中を
+ * どこを押しても SVG が選ばれ、下の要素を選べなかった。Cmd/Ctrl+クリック(最下層を選ぶ)も
+ * 押した点の最上面から探すので同じだった。
+ *
+ * 【どう直したか】
+ * Figma と同じく、見えている形(線・塗り・画像)の上を押したときだけ SVG を選び、
+ * 箱の中の何も描かれていない所は**素通り**して下の要素を選ぶ。
+ * 形の上かどうかは elementsFromPoint で見る。SVG の子(path / circle など)は
+ * 描かれている所でしか当たらない(pointer-events の既定 visiblePainted)ので、
+ * その点に子が返らなければ「箱の空き」と分かる。細い線は掴みにくいので、周り 3px も見る。
+ *
+ * SVG の中の要素(path / circle / g など)は、SVG ごと 1 つの図として扱う。
+ * 編集の印(data-editable)は付けない(isInsideSvg)。
+ */
+
+/** エディタが紙面に重ねる層(選択枠・マーキー・ガイド)。当たり判定から外す */
+const EDITOR_LAYERS =
+  '.selection-box,.marquee-selection-box,[data-editor-overlay],#gg-smart-guides,#gg-measure-layer,.gg-collab-layer';
+
+/** 細い線を掴めるようにする許容(px) */
+const STROKE_TOLERANCE = 3;
+
+/** SVG の中の要素か(`<svg>` 自身は含まない)。中身は SVG ごと 1 つの図として扱う */
+export function isInsideSvg(el: Element): boolean {
+  const parent = el.parentElement;
+  return !!parent && typeof parent.closest === 'function' && !!parent.closest('svg');
+}
+
+/** 入れ子の SVG なら一番外の `<svg>` */
+function outermostSvg(el: Element): Element | null {
+  let svg = typeof el.closest === 'function' ? el.closest('svg') : null;
+  while (svg) {
+    const up = svg.parentElement?.closest('svg') ?? null;
+    if (!up) return svg;
+    svg = up;
+  }
+  return null;
+}
+
+function isEditorLayer(el: Element): boolean {
+  return typeof el.closest === 'function' && !!el.closest(EDITOR_LAYERS);
+}
+
+/** SVG 自身に背景(CSS の background)が塗られていれば、箱全体が見えている */
+function hasOwnBackground(svg: Element, doc: Document): boolean {
+  const cs = doc.defaultView?.getComputedStyle(svg);
+  if (!cs) return false;
+  const bg = cs.backgroundColor;
+  const transparent = !bg || bg === 'transparent' || /rgba\([^)]*,\s*0\)$/.test(bg);
+  return !transparent || (cs.backgroundImage && cs.backgroundImage !== 'none') || false;
+}
+
+/**
+ * SVG を包んでいるだけの透明な器か(図形ツールで描いた線・矢印・ペンは
+ * `<div style="position:absolute;background-color:transparent"><svg …></div>` の形)。
+ * 子が全部「素通りさせた要素」で、自分の文字も背景・枠線・影も無ければ、器も素通りさせる。
+ * これが無いと、SVG を素通りした先で器の箱が当たり、線の周りの空きで結局同じことが起きる
+ */
+function isBareWrapper(el: Element, doc: Document, skipped: Set<Element>): boolean {
+  if (el.children.length === 0) return false;
+  if (!Array.from(el.children).every((c) => skipped.has(c))) return false;
+  if (Array.from(el.childNodes).some((n) => n.nodeType === 3 && (n.textContent ?? '').trim() !== '')) return false;
+  const cs = doc.defaultView?.getComputedStyle(el);
+  if (!cs) return false;
+  const paintsBox =
+    hasOwnBackground(el, doc) ||
+    ['Top', 'Right', 'Bottom', 'Left'].some(
+      (s) => parseFloat(cs.getPropertyValue(`border-${s.toLowerCase()}-width`)) > 0 && cs.getPropertyValue(`border-${s.toLowerCase()}-style`) !== 'none',
+    ) ||
+    (!!cs.boxShadow && cs.boxShadow !== 'none');
+  // outline は見ない。エディタが編集できる要素すべてに透明な outline(ホバー予告用)を付けているため
+  return !paintsBox;
+}
+
+/**
+ * 図形ツールの線・矢印・ペンは、位置と大きさを持つ透明な器の中に `position:absolute` の SVG が 1 つだけ入る。
+ * 動かす・大きさを変える対象は器なので、SVG を押したら器を選ぶ(SVG を選ぶと器の中で SVG だけが動く)
+ */
+function drawnShapeOf(svg: Element, doc: Document): Element {
+  const parent = svg.parentElement;
+  if (!parent || parent.children.length !== 1) return svg;
+  if (parent.hasAttribute('data-gg-fx-host')) return svg;
+  if (doc.defaultView?.getComputedStyle(svg).position !== 'absolute') return svg;
+  return isBareWrapper(parent, doc, new Set([svg])) ? parent : svg;
+}
+
+/** (x, y) の近くで、その SVG の形(子要素)が描かれているか */
+function paintedNear(doc: Document, svg: Element, x: number, y: number): boolean {
+  const t = STROKE_TOLERANCE;
+  const offsets = [[0, 0], [t, 0], [-t, 0], [0, t], [0, -t], [t, t], [t, -t], [-t, t], [-t, -t]];
+  for (const [dx, dy] of offsets) {
+    for (const el of doc.elementsFromPoint(x + dx, y + dy)) {
+      if (el !== svg && svg.contains(el)) return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * クリック(ホバー・右クリック・ダブルクリック)の対象を、SVG の空きを素通りさせて決める。
+ * SVG と関係の無い点では target をそのまま返す(elementsFromPoint も呼ばない)。
+ *
+ * @param target 生のイベント対象(e.target、または選択枠の下から拾った要素)
+ * @param x, y   紙面(iframe)の中の座標(e.clientX / e.clientY)
+ * @returns 選択の判別に使う要素。空白(body 等)になることもある
+ */
+export function passThroughSvg(
+  doc: Document,
+  target: EventTarget | null,
+  x: number,
+  y: number,
+): Element | null {
+  const el = target as Element | null;
+  if (!el || el.nodeType !== 1 || typeof el.closest !== 'function') return el;
+  if (!el.closest('svg')) return el;
+  if (typeof doc.elementsFromPoint !== 'function') return el;
+
+  const skipped = new Set<Element>();
+  for (const candidate of doc.elementsFromPoint(x, y)) {
+    if (isEditorLayer(candidate)) continue;
+    const svg = outermostSvg(candidate);
+    if (!svg) {
+      // 素通りさせた SVG を包むだけの透明な器なら、それも素通りする
+      if (skipped.size > 0 && isBareWrapper(candidate, doc, skipped)) {
+        skipped.add(candidate);
+        continue;
+      }
+      return candidate; // SVG の外の要素 = 下にあるもの
+    }
+    if (skipped.has(svg)) continue;
+    if (candidate !== svg) return drawnShapeOf(svg, doc); // 形の上を押した = その SVG
+    if (hasOwnBackground(svg, doc) || paintedNear(doc, svg, x, y)) return drawnShapeOf(svg, doc);
+    skipped.add(svg); // 箱の空き = 素通りして下を見る
+  }
+  return null;
+}

package/src/editor/utils/tailwind-utils.ts

@@ -627,8 +627,12 @@ export function applyTailwindStyles(
 /**
  * Tailwind Browserに再コンパイルをトリガー
  * iframe内のTailwind Browserインスタンスに変更を通知
+ *
+ * 紙面へ**新しいクラスを持つ要素を足した**ときにも呼ぶ(「台帳から挿入」)。
+ * 足しただけでは Tailwind ブラウザ版がその class を知らず、当たるまで地の姿で出る。
+ * 生成した CSS は紙面の `<head>` に入るので、#artboard の中身(= 保存 HTML・履歴)は変わらない。
  */
-function triggerTailwindRecompile(element: HTMLElement): void {
+export function triggerTailwindRecompile(element: HTMLElement): void {
   try {
     const doc = element.ownerDocument;
     const win = doc?.defaultView as Window & {

package/src/index.ts

@@ -60,6 +60,10 @@ export type {
   EditorPartDef,
   EditorPartCategory,
   EditorPartsLibrary,
+  EditorInsertCatalog,
+  EditorInsertGroup,
+  EditorInsertItem,
+  EditorInsertLevel,
   EditorCollab,
   EditorCollabUser,
 } from "./io";

package/src/io.ts

@@ -122,6 +122,53 @@ export type EditorPartsLibrary = {
   categories?: EditorPartCategory[];
 };
 
+/**
+ * 台帳から挿入(「台帳から挿入」パネル)。
+ *
+ * 【役割分担】
+ * - 利用側 … 何が挿せるかの目録(loadInserts)と、1 件の HTML(fetchInsert)を作る。
+ *            HTML は断片(`<section class="wf-ds" data-ds="…" data-ds-v="…">…</section>` の形で
+ *            利用側が包んでおく)。エディタは包み直さない
+ * - エディタ … 紙面のどこに入れるかを決め、編集の印を付け、履歴に 1 段で載せる
+ *
+ * 目録・HTML の中身(何が台帳にあるか・どう整形するか)はエディタの関心事ではない。
+ * `loadInserts` を渡さなければ「台帳から挿入」の入口ごと出さない。
+ */
+export type EditorInsertLevel =
+  /** セクション(紙面に 1 段として入る) */
+  | 'SEC'
+  /** パーツ(セクションより小さい部品) */
+  | 'MOL'
+  /** ページの雛形(挿入ではなく「新しいページを作る」) */
+  | 'TPL'
+  /** ページ(同上) */
+  | 'PAG'
+  // 利用側が独自の階層を足せるように文字列も受ける(補完は上の 4 つが出る)
+  | (string & {});
+
+export type EditorInsertItem = {
+  /** 一意な識別子。`fetchInsert` / `createContent` にそのまま渡す */
+  id: string;
+  /** 表示名 */
+  name: string;
+  /** 系統(絞り込みの単位。ヘッダー・ヒーロー・フォーム など) */
+  family?: string;
+  description?: string;
+  /**
+   * 階層。`TPL` / `PAG` は紙面に挿さず「ページを作る」に回る。
+   * 省略時は挿入(セクション扱い)
+   */
+  level?: EditorInsertLevel;
+  /** 見本の URL(あればカードと右の大きいプレビューに iframe で出す) */
+  previewUrl?: string;
+  /** 出どころ。表示の区別だけに使う */
+  source?: 'ledger' | 'local';
+};
+
+export type EditorInsertGroup = { id: string; label: string; items: EditorInsertItem[] };
+
+export type EditorInsertCatalog = { groups: EditorInsertGroup[] };
+
 export type EditorIO = {
   /** 一覧とコメントを取る。無ければ空の一覧として振る舞う */
   loadDeck?: () => Promise<EditorDeck>;
@@ -192,6 +239,30 @@ export type EditorIO = {
   /** 部品を消す。無ければ削除を出さない */
   deletePart?: (id: string) => Promise<void>;
 
+  /**
+   * 台帳の目録(利用側が束ねる)。無ければ「台帳から挿入」は出さない。
+   * パネルを開くたびに呼ぶ(利用側で束ねたものを返すだけでよい)
+   */
+  loadInserts?: () => Promise<EditorInsertCatalog>;
+  /**
+   * 1 件の HTML(断片)。`dummy` は見出し・リード文を赤字ダミーにする利用側の整形で、
+   * パネルのチェック(既定 ON)がそのまま渡る。整形しない利用側は無視してよい。
+   * `name` はいまのエディタでは使っていない(目録の name を出している)。
+   * 目録と実体が食い違いうる利用側のために受け口だけ空けてある
+   */
+  fetchInsert?: (id: string, opts: { dummy: boolean }) => Promise<{ html: string; name?: string }>;
+  /**
+   * 新しいページを作る(TPL / PAG の挿入)。戻り値の id で利用側が `contentList` を
+   * 読み直し、エディタはその id が一覧に現れたらそのページを編集中にする。
+   * 無ければページの雛形は挿入できない(グループを出しても「ページを作る」は押せない)
+   */
+  createContent?: (input: {
+    title: string;
+    path: string;
+    templateId?: string;
+    parentId?: string;
+  }) => Promise<{ id: string }>;
+
   /** CSS 変数(デザイントークン)の読み込み。無ければブラウザ内(localStorage)に持つ */
   loadVariables?: () => Promise<CSSVariableDefinition[]>;
   /** CSS 変数の保存。無ければブラウザ内(localStorage)に持つ */

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.8.1';
+export const EDITOR_VERSION = '0.9.1';