@storkspear/post-editor-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 storkspear
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @storkspear/post-editor-react
+
+`@storkspear/post-editor-core` 의 React UI — 툴바·글자 버블·객체 도구·좌측 `+`.
+
+```tsx
+import { PostEditor } from '@storkspear/post-editor-react'
+import '@storkspear/post-editor-core/styles.css'
+import '@storkspear/post-editor-react/styles.css'
+```
+
+**공개 페이지는 이 패키지의 `index` 를 쓰면 안 된다.** 편집기 전체가 딸려 온다.
+읽기 전용은 `@storkspear/post-editor-react/content` 에서 `PostContent` 만 가져온다.

package/dist/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+export declare function ColorPicker({ value, onPick, onClear, onClose, label, recent, anchorRef, }: {
+    anchorRef?: RefObject<HTMLElement | null>;
+    value?: string;
+    onPick: (hex: string) => void;
+    onClear: () => void;
+    onClose: () => void;
+    label: string;
+    recent?: string[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAsB9C,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAW,EAAE,SAAS,GAC/D,EAAE;IACD,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB,+BA0CA"}

package/dist/ColorPicker.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useAnchoredPos } from './useAnchoredPos.js';
+import { useDismiss } from './useDismiss.js';
+import { Portal } from './Popover.js';
+/**
+ * 색 팔레트 — 네이버처럼 격자로 펼치되, 채도가 튀는 원색 대신 단계가 고른 색을 쓴다.
+ * 열 = 색상, 행 = 밝기. 맨 앞은 "색 없음".
+ */
+const HUES = [
+    ['회색', ['#f1f3f5', '#dee2e6', '#adb5bd', '#5c636a', '#16191d']],
+    ['빨강', ['#ffe3e3', '#ffa8a8', '#fa5252', '#c92a2a', '#801515']],
+    ['주황', ['#ffe8cc', '#ffc078', '#fd7e14', '#d9480f', '#8c2d04']],
+    ['노랑', ['#fff3bf', '#ffe066', '#fab005', '#e67700', '#8a4b00']],
+    ['초록', ['#d3f9d8', '#8ce99a', '#40c057', '#2b8a3e', '#14532d']],
+    ['청록', ['#c3fae8', '#63e6be', '#12b886', '#087f5b', '#0b3d2e']],
+    ['하늘', ['#d0ebff', '#74c0fc', '#228be6', '#1864ab', '#0b3c69']],
+    ['파랑', ['#dbe4ff', '#91a7ff', '#4c6ef5', '#3b5bdb', '#1e3a8a']],
+    ['보라', ['#e5dbff', '#b197fc', '#7950f2', '#5f3dc4', '#3b2380']],
+    ['분홍', ['#ffdeeb', '#faa2c1', '#e64980', '#a61e4d', '#6b1233']],
+];
+export function ColorPicker({ value, onPick, onClear, onClose, label, recent = [], anchorRef, }) {
+    const ref = useRef(null);
+    const pos = useAnchoredPos(anchorRef ?? { current: null }, !!anchorRef, 280, ref);
+    // 여는 버튼을 「바깥」으로 치면 다시 눌러도 안 닫힌다(mousedown 이 닫고 click 이 도로 연다).
+    // 그 함정을 이미 한 번 밟아서 useDismiss 가 anchor 를 받게 만들어 뒀다 — 팔레트도 같은 규약을 쓴다.
+    useDismiss(true, ref, onClose, anchorRef);
+    return (_jsx(Portal, { active: !!pos, children: _jsxs("div", { className: "cp", "data-editor-ui": "", ref: ref, role: "dialog", "aria-label": label, style: pos ? { position: 'fixed', left: pos.left, top: pos.top, maxHeight: pos.maxHeight, overflowY: 'auto' } : undefined, children: [_jsx("div", { className: "cp-head", children: label }), recent.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "cp-sub", children: "\uCD5C\uADFC \uC0AC\uC6A9\uD55C \uC0C9" }), _jsx("div", { className: "cp-recent", children: recent.map((hex) => (_jsx("button", { className: "cp-cell", style: { background: hex }, title: hex, onMouseDown: (e) => e.preventDefault(), onClick: () => { onPick(hex); onClose(); } }, hex))) })] })), _jsxs("div", { className: "cp-grid", children: [_jsx("button", { className: "cp-cell cp-none", title: "\uC0C9 \uC5C6\uC74C", onMouseDown: (e) => e.preventDefault(), onClick: () => { onClear(); onClose(); }, children: _jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("line", { x1: "3", y1: "17", x2: "17", y2: "3" }) }) }), HUES.map(([name, shades]) => (_jsx("div", { className: "cp-col", children: shades.map((hex) => (_jsx("button", { className: `cp-cell${value?.toLowerCase() === hex ? ' is-on' : ''}`, style: { background: hex }, title: `${name} ${hex}`, "aria-label": `${name} ${hex}`, onMouseDown: (e) => e.preventDefault(), onClick: () => { onPick(hex); onClose(); } }, hex))) }, name)))] })] }) }));
+}
+//# sourceMappingURL=ColorPicker.js.map

package/dist/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"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"}

package/dist/DrawioModal.d.ts

@@ -0,0 +1,9 @@
+export declare function DrawioModal({ xml, onDone, onCancel, }: {
+    xml: string;
+    onDone: (next: {
+        xml: string;
+        svg: string;
+    }) => void;
+    onCancel: () => void;
+}): import("react").ReactPortal;
+//# sourceMappingURL=DrawioModal.d.ts.map

package/dist/DrawioModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawioModal.d.ts","sourceRoot":"","sources":["../src/DrawioModal.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,GACT,EAAE;IACD,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACpD,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,+BA6EA"}

package/dist/DrawioModal.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+/**
+ * draw.io 를 iframe 으로 띄운다.
+ *
+ * ## 왜 iframe 인가
+ *
+ * AWS·Azure·GCP 아이콘까지 포함해 도형이 1만 개다. 그걸 우리 번들에 넣을 방법은 없고,
+ * 넣을 이유도 없다 — 공식 임베드 모드가 `postMessage` 로 말을 주고받는 길을 열어 뒀다.
+ * **라이브러리를 하나도 안 싣는다.**
+ *
+ * ## 주고받는 말
+ *
+ *   iframe → 우리   init   준비됐다. `load` 를 달라
+ *                   save   사용자가 저장을 눌렀다 (xml 이 딸려 온다)
+ *                   export 내보내기가 끝났다 (data 가 딸려 온다)
+ *                   exit   나가겠다
+ *   우리 → iframe   load   이 도면을 열어라
+ *                   export 이 형식으로 내놔라
+ *
+ * 저장 흐름은 **save → export(xmlsvg) → 닫기** 다. `xmlsvg` 는 도면 XML 이 박힌 SVG 라
+ * 그림과 원본이 한 덩어리지만, 우리는 원본을 따로 들고 있으므로 **SVG 만 쓰고 XML 은
+ * `save` 가 준 것을 쓴다** — 속성에서 XML 을 다시 캐내는 일을 안 하려고.
+ *
+ * ## 밖으로 무엇이 나가나
+ *
+ * 도면 XML 이 iframe 안에서 돈다(embed.diagrams.net). 저장은 우리 서버로만 간다 —
+ * 그쪽에 파일이 남지 않는다. 그게 걸리면 draw.io 를 직접 띄우고 `EMBED_URL` 만 바꾸면 된다.
+ */
+const EMBED_URL = 'https://embed.diagrams.net/?embed=1&ui=min&spin=1&proto=json&noSaveBtn=0&saveAndExit=1&noExitBtn=0&libraries=1';
+export function DrawioModal({ xml, onDone, onCancel, }) {
+    const frameRef = useRef(null);
+    const xmlRef = useRef(xml);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const send = (msg) => frameRef.current?.contentWindow?.postMessage(JSON.stringify(msg), '*');
+        const onMsg = (e) => {
+            /* 우리 iframe 이 보낸 것만 듣는다 — 다른 창이 흉내 내지 못하게 */
+            if (e.source !== frameRef.current?.contentWindow)
+                return;
+            let m;
+            try {
+                m = JSON.parse(String(e.data));
+            }
+            catch {
+                return;
+            }
+            if (m.event === 'init') {
+                setReady(true);
+                send({ action: 'load', autosave: 0, xml: xmlRef.current || '' });
+                return;
+            }
+            if (m.event === 'save') {
+                /* 저장한 XML 을 들고, 그림은 따로 뽑는다 */
+                xmlRef.current = m.xml ?? xmlRef.current;
+                send({ action: 'export', format: 'xmlsvg', spin: '내보내는 중' });
+                return;
+            }
+            if (m.event === 'export') {
+                const data = String(m.data ?? '');
+                /* data:image/svg+xml;base64,… 로 온다 */
+                const svg = data.startsWith('data:')
+                    ? decodeURIComponent(escape(atob(data.slice(data.indexOf(',') + 1))))
+                    : data;
+                onDone({ xml: xmlRef.current, svg });
+                return;
+            }
+            if (m.event === 'exit')
+                onCancel();
+        };
+        window.addEventListener('message', onMsg);
+        return () => window.removeEventListener('message', onMsg);
+    }, [onDone, onCancel]);
+    /* Esc 로 닫기 — 편집기가 이 키를 먹지 않게 여기서 멈춘다 */
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                onCancel();
+            }
+        };
+        window.addEventListener('keydown', onKey, true);
+        return () => window.removeEventListener('keydown', onKey, true);
+    }, [onCancel]);
+    /**
+     * **`document.body` 로 내보낸다(포털).**
+     *
+     * 이 컴포넌트는 툴바 줄 안에서 그려지는데, 그 줄은 제 쌓임 맥락(sticky + z-index)을 만든다.
+     * 그 안에서는 `position: fixed; z-index: 200` 이 바깥의 머리줄을 못 이긴다 —
+     * 화면을 덮은 것처럼 보이지만 머리줄이 그 위에 남고 iframe 이 잘린다. 실제로 그랬다.
+     */
+    return createPortal(_jsxs("div", { className: "dio", "data-editor-ui": "", role: "dialog", "aria-modal": "true", "aria-label": "\uB2E4\uC774\uC5B4\uADF8\uB7A8 \uADF8\uB9AC\uAE30", children: [_jsxs("div", { className: "dio-bar", children: [_jsx("span", { className: "dio-t", children: "\uB2E4\uC774\uC5B4\uADF8\uB7A8 \uADF8\uB9AC\uAE30" }), _jsx("span", { className: "dio-hint", children: "\uC800\uC7A5 \uC2DC, \uC791\uC131\uD558\uB358 \uD654\uBA74\uC73C\uB85C \uB418\uB3CC\uC544\uAC11\uB2C8\uB2E4." }), _jsx("button", { type: "button", className: "dio-x", onClick: onCancel, "aria-label": "\uB2EB\uAE30", children: "\u2715" })] }), !ready && _jsx("p", { className: "dio-wait", children: "draw.io \uB97C \uBD88\uB7EC\uC624\uB294 \uC911\u2026" }), _jsx("iframe", { ref: frameRef, className: "dio-frame", src: EMBED_URL, title: "draw.io", 
+                /* 저장은 postMessage 로만 온다 — 이 창이 우리 쪽을 직접 만지지 못하게 */
+                sandbox: "allow-scripts allow-same-origin allow-popups allow-forms" })] }), document.body);
+}
+//# sourceMappingURL=DrawioModal.js.map

package/dist/DrawioModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawioModal.js","sourceRoot":"","sources":["../src/DrawioModal.tsx"],"names":[],"mappings":"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"}

package/dist/FontMenu.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 글꼴 고르기 — 이름을 **그 글꼴로** 보여 준다(네이버 블로그와 같은 방식).
+ * 이름만 나열하면 「고운바탕」이 어떻게 생겼는지 모른 채 골라야 한다.
+ *
+ * 고르는 칸의 공통 부품(PickMenu)에 글꼴만 얹은 것이다 —
+ * 문단 스타일·글자 크기·언어가 전부 같은 메뉴를 쓴다.
+ */
+export declare function FontMenu({ value, onPick, onClose, anchorRef }: {
+    value: string;
+    onPick: (v: string) => void;
+    onClose: () => void;
+    anchorRef: React.RefObject<HTMLElement | null>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FontMenu.d.ts.map

package/dist/FontMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontMenu.d.ts","sourceRoot":"","sources":["../src/FontMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC/C,+BAKA"}

package/dist/FontMenu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PickMenu } from './PickMenu.js';
+import { fontItems } from './pickItems.js';
+/**
+ * 글꼴 고르기 — 이름을 **그 글꼴로** 보여 준다(네이버 블로그와 같은 방식).
+ * 이름만 나열하면 「고운바탕」이 어떻게 생겼는지 모른 채 골라야 한다.
+ *
+ * 고르는 칸의 공통 부품(PickMenu)에 글꼴만 얹은 것이다 —
+ * 문단 스타일·글자 크기·언어가 전부 같은 메뉴를 쓴다.
+ */
+export function FontMenu({ value, onPick, onClose, anchorRef }) {
+    return (_jsx(PickMenu, { ariaLabel: "\uAE00\uAF34", width: 200, items: fontItems(), value: value, onPick: onPick, onClose: onClose, anchorRef: anchorRef }));
+}
+//# sourceMappingURL=FontMenu.js.map

package/dist/FontMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontMenu.js","sourceRoot":"","sources":["../src/FontMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAK3D;IACC,OAAO,CACL,KAAC,QAAQ,IAAC,SAAS,EAAC,cAAI,EAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EACnE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAI,CAC7D,CAAA;AACH,CAAC"}

package/dist/Icon.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 툴바 아이콘 — lucide-react 를 쓴다.
+ *
+ * 직접 그리지 않는 이유: 손으로 그린 SVG 는 획 굵기·여백·시각 중심이 제각각이라
+ * 나란히 놓으면 티가 나고, 아이콘이 늘 때마다 그 부담이 커진다.
+ * template-react-admin 도 lucide-react 를 쓰므로 스택도 맞는다.
+ *
+ * 호출부는 이름만 알면 되게 얇게 감싼다 — 나중에 라이브러리를 바꿔도 여기만 고친다.
+ * (라이브러리 분리 시 이 파일은 react 패키지로 간다. core 는 아이콘을 모른다.)
+ */
+declare const MAP: {
+    readonly bold: import("lucide-react").LucideIcon;
+    readonly italic: import("lucide-react").LucideIcon;
+    readonly underline: import("lucide-react").LucideIcon;
+    readonly strike: import("lucide-react").LucideIcon;
+    readonly code: import("lucide-react").LucideIcon;
+    readonly highlight: import("lucide-react").LucideIcon;
+    readonly h2: import("lucide-react").LucideIcon;
+    readonly h3: import("lucide-react").LucideIcon;
+    readonly bullet: import("lucide-react").LucideIcon;
+    readonly ordered: import("lucide-react").LucideIcon;
+    readonly alignLeft: import("lucide-react").LucideIcon;
+    readonly alignCenter: import("lucide-react").LucideIcon;
+    readonly alignRight: import("lucide-react").LucideIcon;
+    readonly alignJustify: import("lucide-react").LucideIcon;
+    readonly lineHeight: import("lucide-react").LucideIcon;
+    readonly quote: import("lucide-react").LucideIcon;
+    readonly pullQuote: import("lucide-react").LucideIcon;
+    readonly divider: import("lucide-react").LucideIcon;
+    readonly codeBlock: import("lucide-react").LucideIcon;
+    readonly diagram: import("lucide-react").LucideIcon;
+    readonly info: import("lucide-react").LucideIcon;
+    readonly tip: import("lucide-react").LucideIcon;
+    readonly warn: import("lucide-react").LucideIcon;
+    readonly callout: import("lucide-react").LucideIcon;
+    readonly image: import("lucide-react").LucideIcon;
+    readonly table: import("lucide-react").LucideIcon;
+    readonly video: import("lucide-react").LucideIcon;
+    readonly link: import("lucide-react").LucideIcon;
+    readonly rowPlus: import("lucide-react").LucideIcon;
+    readonly colPlus: import("lucide-react").LucideIcon;
+    readonly trash: import("lucide-react").LucideIcon;
+    readonly plus: import("lucide-react").LucideIcon;
+    readonly pencil: import("lucide-react").LucideIcon;
+    readonly bucket: import("lucide-react").LucideIcon;
+    readonly text: import("lucide-react").LucideIcon;
+    readonly none: import("lucide-react").LucideIcon;
+    readonly move: import("lucide-react").LucideIcon;
+    readonly rowMerge: import("lucide-react").LucideIcon;
+    readonly rowSplit: import("lucide-react").LucideIcon;
+    readonly rowLift: import("lucide-react").LucideIcon;
+    readonly swap: import("lucide-react").LucideIcon;
+    readonly tableStyle: import("lucide-react").LucideIcon;
+    readonly tableBorder: import("lucide-react").LucideIcon;
+    readonly cellMerge: import("lucide-react").LucideIcon;
+    readonly cellSplit: import("lucide-react").LucideIcon;
+};
+export type IconName = keyof typeof MAP;
+/**
+ * `stroke` 는 획 굵기다. 기본 1.9 는 17px 아이콘 기준이고,
+ * 20px 짜리 넣기 타일에서는 같은 굵기가 뭉툭해 보여 더 가늘게 준다.
+ */
+export declare function Icon({ name, size, stroke }: {
+    name: IconName | string;
+    size?: number;
+    stroke?: number;
+}): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AACH,QAAA,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBC,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,GAAG,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,MAAY,EAAE,EAAE;IAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,sCAIlH"}

package/dist/Icon.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, AlignVerticalSpaceAround, ArrowLeftRight, BadgeInfo, Ban, BetweenHorizontalStart, BetweenVerticalStart, Bold, Braces, CircleCheck, CirclePlay, Code, Columns2, GitBranch, Heading2, Heading3, Highlighter, Image as ImageIcon, Info, Italic, Link as LinkIcon, List, ListOrdered, Minus, Move, PaintBucket, Pencil, Plus, Quote, Square, SquareSplitHorizontal, Strikethrough, Ungroup, Table as TableIcon, TableCellsMerge, TableCellsSplit, TableProperties, TextQuote, Trash2, TriangleAlert, Type, Underline, } from 'lucide-react';
+/**
+ * 툴바 아이콘 — lucide-react 를 쓴다.
+ *
+ * 직접 그리지 않는 이유: 손으로 그린 SVG 는 획 굵기·여백·시각 중심이 제각각이라
+ * 나란히 놓으면 티가 나고, 아이콘이 늘 때마다 그 부담이 커진다.
+ * template-react-admin 도 lucide-react 를 쓰므로 스택도 맞는다.
+ *
+ * 호출부는 이름만 알면 되게 얇게 감싼다 — 나중에 라이브러리를 바꿔도 여기만 고친다.
+ * (라이브러리 분리 시 이 파일은 react 패키지로 간다. core 는 아이콘을 모른다.)
+ */
+const MAP = {
+    bold: Bold, italic: Italic, underline: Underline, strike: Strikethrough,
+    code: Code, highlight: Highlighter,
+    h2: Heading2, h3: Heading3,
+    bullet: List, ordered: ListOrdered,
+    alignLeft: AlignLeft, alignCenter: AlignCenter, alignRight: AlignRight, alignJustify: AlignJustify,
+    // 줄 간격 — 위아래 선 사이의 덩어리. 「행간」을 글자 없이 말하는 가장 흔한 그림이다.
+    lineHeight: AlignVerticalSpaceAround,
+    // 인용은 따옴표 덩어리(Quote)가 아니라 **따옴표+글줄**. 큰 인용만 덩어리 쪽을 쓴다.
+    quote: TextQuote, pullQuote: Quote, divider: Minus,
+    /* 소스코드는 네모 상자가 아니라 **중괄호**다. 네이버도 `{ }` 를 쓴다 —
+       넣기 줄에 네모 상자가 셋이나 서면(사진·영상·코드) 서로 구별이 안 되고 줄이 둔해 보인다. */
+    codeBlock: Braces,
+    diagram: GitBranch,
+    info: Info, tip: CircleCheck, warn: TriangleAlert, callout: BadgeInfo,
+    // 영상은 **동그란 재생 표시**. 네모 무리 속에서 혼자 둥글어 한눈에 갈린다.
+    image: ImageIcon, table: TableIcon, video: CirclePlay, link: LinkIcon,
+    rowPlus: BetweenHorizontalStart, colPlus: BetweenVerticalStart,
+    trash: Trash2, plus: Plus, pencil: Pencil, bucket: PaintBucket, text: Type, none: Ban,
+    move: Move,
+    // 사진 행 — 합치기(두 칸)·풀기(가운데를 가름)·한 장 빼기·자리 바꿈
+    rowMerge: Columns2, rowSplit: SquareSplitHorizontal, rowLift: Ungroup, swap: ArrowLeftRight,
+    tableStyle: TableProperties, tableBorder: Square, cellMerge: TableCellsMerge, cellSplit: TableCellsSplit,
+};
+/**
+ * `stroke` 는 획 굵기다. 기본 1.9 는 17px 아이콘 기준이고,
+ * 20px 짜리 넣기 타일에서는 같은 굵기가 뭉툭해 보여 더 가늘게 준다.
+ */
+export function Icon({ name, size = 17, stroke = 1.9 }) {
+    const C = MAP[name];
+    if (!C)
+        return null;
+    return _jsx(C, { size: size, strokeWidth: stroke, "aria-hidden": "true" });
+}
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,wBAAwB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,sBAAsB,EAAE,oBAAoB,EACxJ,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAC3H,MAAM,EAAE,IAAI,IAAI,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EACnF,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,aAAa,EAAE,OAAO,EAC5D,KAAK,IAAI,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAChF,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,GACvC,MAAM,cAAc,CAAA;AAErB;;;;;;;;;GASG;AACH,MAAM,GAAG,GAAG;IACV,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa;IACvE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW;IAClC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ;IAC1B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW;IAClC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY;IAClG,oDAAoD;IACpD,UAAU,EAAE,wBAAwB;IACpC,uDAAuD;IACvD,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK;IAClD;8DAC0D;IAC1D,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS;IACrE,+CAA+C;IAC/C,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ;IACrE,OAAO,EAAE,sBAAsB,EAAE,OAAO,EAAE,oBAAoB;IAC9D,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG;IACrF,IAAI,EAAE,IAAI;IACV,2CAA2C;IAC3C,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc;IAC3F,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;CAChG,CAAA;AAIV;;;GAGG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,GAAG,EAA+D;IACjH,MAAM,CAAC,GAAG,GAAG,CAAC,IAAgB,CAAC,CAAA;IAC/B,IAAI,CAAC,CAAC;QAAE,OAAO,IAAI,CAAA;IACnB,OAAO,KAAC,CAAC,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAc,MAAM,GAAG,CAAA;AAClE,CAAC"}

package/dist/InsertHandle.d.ts

@@ -0,0 +1,14 @@
+import { type Editor } from '@tiptap/react';
+/**
+ * 현재 줄 왼쪽 여백에 뜨는 `+`.
+ *
+ * FloatingMenu 를 안 쓰는 이유: 그건 빈 텍스트블록에서만 뜨고 기준이 커서다.
+ * 여기서는 커서가 있는 **최상위 블록**이 기준이라 표 오버레이와 같은 방식(fixed 좌표)으로 그린다.
+ *
+ * 편집면에 패딩을 더해 여백을 만들지 않는다 — 발행면과 기하가 어긋난다.
+ * 여백이 없으면 왼쪽 끝에 붙여 클램프한다.
+ */
+export declare function InsertHandle({ editor }: {
+    editor: Editor;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=InsertHandle.d.ts.map

package/dist/InsertHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsertHandle.d.ts","sourceRoot":"","sources":["../src/InsertHandle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,MAAM,EAAE,MAAM,eAAe,CAAA;AAO3D;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,sCAsE1D"}

package/dist/InsertHandle.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { useDismiss } from './useDismiss.js';
+import { insertImageFiles, pickImageFiles } from '@storkspear/post-editor-core/image';
+import { useEditorState } from '@tiptap/react';
+import { Icon } from './Icon.js';
+import { VariantMenu } from './VariantMenu.js';
+import { dividerItems } from './objects/divider.js';
+import { quoteItems } from './objects/quote.js';
+import { DIVIDER_KINDS, QUOTE_VARIANTS } from '@storkspear/post-editor-core/vocab';
+/**
+ * 현재 줄 왼쪽 여백에 뜨는 `+`.
+ *
+ * FloatingMenu 를 안 쓰는 이유: 그건 빈 텍스트블록에서만 뜨고 기준이 커서다.
+ * 여기서는 커서가 있는 **최상위 블록**이 기준이라 표 오버레이와 같은 방식(fixed 좌표)으로 그린다.
+ *
+ * 편집면에 패딩을 더해 여백을 만들지 않는다 — 발행면과 기하가 어긋난다.
+ * 여백이 없으면 왼쪽 끝에 붙여 클램프한다.
+ */
+export function InsertHandle({ editor }) {
+    const [menu, setMenu] = useState(null);
+    const anchor = useRef(null);
+    const spot = useEditorState({
+        editor,
+        selector: ({ editor: e }) => {
+            if (!e.isEditable)
+                return null;
+            const { $from } = e.state.selection;
+            if ($from.depth < 1)
+                return null;
+            try {
+                const pos = $from.before(1);
+                const dom = e.view.nodeDOM(pos);
+                const el = dom instanceof HTMLElement ? dom : dom?.parentElement;
+                if (!el)
+                    return null;
+                const r = el.getBoundingClientRect();
+                return { pos, left: r.left, top: r.top, lineH: parseFloat(getComputedStyle(el).lineHeight) || 24 };
+            }
+            catch {
+                return null;
+            }
+        },
+    });
+    useDismiss(menu !== null, anchor, useCallback(() => setMenu(null), []));
+    if (!spot)
+        return null;
+    // 폰에서는 붙일 여백이 없다 — 아랫줄의 넣기 버튼이 같은 일을 한다.
+    // 터치 여부만 보면 좁은 데스크톱 창에서 여백을 뚫고 나오므로 폭도 같이 본다.
+    if (window.innerWidth <= 640 || window.matchMedia('(pointer: coarse)').matches)
+        return null;
+    const left = Math.max(4, spot.left - 36);
+    const top = spot.top + Math.max(0, (spot.lineH - 28) / 2);
+    return (_jsxs("div", { className: "ins-anchor", "data-editor-ui": "", style: { left, top }, ref: anchor, children: [_jsx("button", { type: "button", className: "ins-btn", title: "\uC5EC\uAE30\uC5D0 \uB123\uAE30", "aria-label": "\uC5EC\uAE30\uC5D0 \uB123\uAE30", "aria-haspopup": "menu", "aria-expanded": menu !== null, onMouseDown: (e) => e.preventDefault(), onClick: () => setMenu(menu ? null : 'root'), children: _jsx(Icon, { name: "plus", size: 16 }) }), menu === 'root' && (_jsxs("div", { className: "tb-menu ins-menu", role: "menu", children: [_jsxs("button", { onClick: () => { editor.chain().focus().toggleCodeBlock().run(); setMenu(null); }, children: [_jsx(Icon, { name: "codeBlock" }), _jsxs("span", { children: [_jsx("b", { children: "\uCF54\uB4DC" }), _jsx("i", { children: "\uBB38\uBC95 \uC0C9\u00B7\uC904 \uBC88\uD638" })] })] }), _jsxs("button", { onClick: () => {
+                            setMenu(null);
+                            void pickImageFiles().then((files) => { if (files.length)
+                                void insertImageFiles(editor, files); });
+                        }, children: [_jsx(Icon, { name: "image" }), _jsxs("span", { children: [_jsx("b", { children: "\uC0AC\uC9C4" }), _jsx("i", { children: "\uACE0\uB974\uAE30 \u00B7 \uB04C\uC5B4\uB193\uAE30 \u00B7 \uBD99\uC5EC\uB123\uAE30" })] })] }), _jsxs("button", { onClick: () => setMenu('divider'), children: [_jsx(Icon, { name: "divider" }), _jsxs("span", { children: [_jsx("b", { children: "\uAD6C\uBD84\uC120" }), _jsxs("i", { children: [DIVIDER_KINDS.length, "\uAC00\uC9C0 \uBAA8\uC591"] })] })] }), _jsxs("button", { onClick: () => setMenu('quote'), children: [_jsx(Icon, { name: "quote" }), _jsxs("span", { children: [_jsx("b", { children: "\uC778\uC6A9\uAD6C" }), _jsxs("i", { children: [QUOTE_VARIANTS.length, "\uAC00\uC9C0 \uBAA8\uC591"] })] })] }), _jsxs("button", { onClick: () => { editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); setMenu(null); }, children: [_jsx(Icon, { name: "table" }), _jsx("span", { children: _jsx("b", { children: "\uD45C" }) })] })] })), menu === 'divider' && (_jsx(VariantMenu, { ariaLabel: "\uAD6C\uBD84\uC120 \uBAA8\uC591", columns: 4, anchorRef: anchor, items: dividerItems, onPick: (k) => editor.chain().focus().setDivider({ kind: k, align: 'center' }).run(), onClose: () => setMenu(null) })), menu === 'quote' && (_jsx(VariantMenu, { ariaLabel: "\uC778\uC6A9 \uBAA8\uC591", columns: 3, anchorRef: anchor, items: quoteItems, onPick: (v) => editor.chain().focus().setQuoteVariant(v).run(), onClose: () => setMenu(null) }))] }));
+}
+//# sourceMappingURL=InsertHandle.js.map

package/dist/InsertHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsertHandle.js","sourceRoot":"","sources":["../src/InsertHandle.tsx"],"names":[],"mappings":"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"}

package/dist/PickMenu.d.ts

@@ -0,0 +1,61 @@
+import { type CSSProperties, type ReactNode, type RefObject } from 'react';
+import { type IconName } from './Icon.js';
+export type PickOption<T extends string> = {
+    value: T;
+    label: string;
+    /** 이름을 그 글꼴로 보여 줄 때만 (글꼴 고르기) */
+    font?: string;
+};
+/**
+ * 이름을 늘어놓고 하나 고르는 메뉴 — `<select>` 를 대신한다.
+ *
+ * `<select>` 를 안 쓰는 이유: macOS·윈도는 option 을 **OS 메뉴**로 그려서
+ * 우리 CSS 가 하나도 안 먹는다. 그래서 문단 스타일·글자 크기만 시커먼 시스템 메뉴로 떠서
+ * 나머지 편집 UI 와 따로 놀았다.
+ * 글꼴 메뉴는 같은 이유로 진작에 직접 만들어 뒀고 — 이제 셋이 한 부품을 쓴다.
+ */
+export declare function PickMenu<T extends string>({ items, value, onPick, onClose, anchorRef, width, ariaLabel, align, }: {
+    items: readonly PickOption<T>[];
+    value: T;
+    onPick: (v: T) => void;
+    onClose: () => void;
+    anchorRef: RefObject<HTMLElement | null>;
+    width?: number;
+    ariaLabel: string;
+    align?: 'left' | 'center';
+}): import("react").JSX.Element;
+/**
+ * 고르는 칸 한 벌 — 버튼 + 메뉴.
+ * 툴바에 넷(글꼴·문단·크기·언어)이 같은 모양으로 서므로 여는 상태까지 여기서 갖는다.
+ */
+export declare function Picker<T extends string>({ items, value, onPick, title, width, className, style, align, children, }: {
+    items: readonly PickOption<T>[];
+    value: T;
+    onPick: (v: T) => void;
+    title: string;
+    width?: number;
+    className?: string;
+    style?: CSSProperties;
+    align?: 'left' | 'center';
+    /** 버튼에 보일 것 — 없으면 고른 항목의 이름 */
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 아이콘만 세로로 늘어놓는 메뉴 — 목록·정렬이 쓴다(네이버 블로그와 같은 모양).
+ * 글자 설명이 없어도 아이콘 넷이면 무엇인지 다 말한다.
+ */
+export declare function IconMenu<T extends string>({ items, value, onPick, onClose, anchorRef, ariaLabel, footer, }: {
+    items: readonly {
+        value: T;
+        icon: IconName;
+        label: string;
+    }[];
+    value: T | null;
+    onPick: (v: T) => void;
+    onClose: () => void;
+    anchorRef: RefObject<HTMLElement | null>;
+    ariaLabel: string;
+    /** 목록 아래에 덧붙이는 줄 (예: 목록의 마커 모양) */
+    footer?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PickMenu.d.ts.map

package/dist/PickMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickMenu.d.ts","sourceRoot":"","sources":["../src/PickMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI7G,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAE5C,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI;IACzC,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAW,EAAE,SAAS,EAAE,KAAc,GACjF,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/B,KAAK,EAAE,CAAC,CAAA;IACR,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC1B,+BAsCA;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAW,EAAE,SAAc,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,GACjF,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/B,KAAK,EAAE,CAAC,CAAA;IACR,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACzB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,+BAiBA;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,GAC5D,EAAE;IACD,KAAK,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7D,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,mCAAmC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,+BAoBA"}

package/dist/PickMenu.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useDismiss } from './useDismiss.js';
+import { useAnchoredPos } from './useAnchoredPos.js';
+import { Portal } from './Popover.js';
+import { Icon } from './Icon.js';
+/**
+ * 이름을 늘어놓고 하나 고르는 메뉴 — `<select>` 를 대신한다.
+ *
+ * `<select>` 를 안 쓰는 이유: macOS·윈도는 option 을 **OS 메뉴**로 그려서
+ * 우리 CSS 가 하나도 안 먹는다. 그래서 문단 스타일·글자 크기만 시커먼 시스템 메뉴로 떠서
+ * 나머지 편집 UI 와 따로 놀았다.
+ * 글꼴 메뉴는 같은 이유로 진작에 직접 만들어 뒀고 — 이제 셋이 한 부품을 쓴다.
+ */
+export function PickMenu({ items, value, onPick, onClose, anchorRef, width = 150, ariaLabel, align = 'left', }) {
+    const ref = useRef(null);
+    const pos = useAnchoredPos(anchorRef, true, width, ref);
+    useDismiss(true, ref, onClose, anchorRef);
+    // 크기 16줄·언어 27줄은 화면을 넘는다 — 열자마자 지금 값이 보이게 끌어온다.
+    // **딱 한 번만**: useAnchoredPos 는 스크롤마다 새 좌표 객체를 만들어 이 효과를 다시 돌리는데,
+    // 그러면 메뉴를 굴릴 때마다 고른 줄로 도로 튄다. 자리를 잡은 뒤(pos) 한 번이면 된다.
+    const pulled = useRef(false);
+    useLayoutEffect(() => {
+        if (!pos || pulled.current)
+            return;
+        pulled.current = true;
+        ref.current?.querySelector('.is-on')?.scrollIntoView({ block: 'nearest' });
+    }, [pos]);
+    return (_jsx(Portal, { active: !!pos, children: _jsx("div", { "data-editor-ui": "", ref: ref, role: "menu", "aria-label": ariaLabel, className: `pm${align === 'center' ? ' pm-center' : ''}${
+            // 글꼴 메뉴는 이름을 **그 글꼴로** 그린다 — 손글씨는 획이 가늘고 작게 앉아
+            // 본문과 같은 크기로는 읽히지 않는다. 이 메뉴만 키운다.
+            items.some((i) => i.font !== undefined) ? ' pm-fonts' : ''}${pos ? ' is-fixed' : ''}`, style: {
+                width,
+                ...(pos ? { position: 'fixed', left: pos.left, top: pos.top, maxHeight: Math.min(pos.maxHeight, 430) } : null),
+            }, children: items.map((it) => (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": value === it.value, className: `pm-item${value === it.value ? ' is-on' : ''}`, style: it.font !== undefined ? { fontFamily: it.font || 'var(--font-body)' } : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => { onPick(it.value); onClose(); }, children: it.label }, it.value))) }) }));
+}
+/**
+ * 고르는 칸 한 벌 — 버튼 + 메뉴.
+ * 툴바에 넷(글꼴·문단·크기·언어)이 같은 모양으로 서므로 여는 상태까지 여기서 갖는다.
+ */
+export function Picker({ items, value, onPick, title, width = 150, className = '', style, align, children, }) {
+    const anchor = useRef(null);
+    const [open, setOpen] = useState(false);
+    const label = children ?? items.find((i) => i.value === value)?.label ?? '';
+    return (_jsxs("div", { className: "tb-anchor", ref: anchor, children: [_jsx("button", { type: "button", className: `tb-select ${className}${open ? ' is-open' : ''}`, title: title, "aria-haspopup": "menu", "aria-expanded": open, style: style, onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen((v) => !v), children: label }), open && (_jsx(PickMenu, { ariaLabel: title, items: items, value: value, width: width, align: align, anchorRef: anchor, onPick: onPick, onClose: () => setOpen(false) }))] }));
+}
+/**
+ * 아이콘만 세로로 늘어놓는 메뉴 — 목록·정렬이 쓴다(네이버 블로그와 같은 모양).
+ * 글자 설명이 없어도 아이콘 넷이면 무엇인지 다 말한다.
+ */
+export function IconMenu({ items, value, onPick, onClose, anchorRef, ariaLabel, footer, }) {
+    const ref = useRef(null);
+    const pos = useAnchoredPos(anchorRef, true, 46, ref);
+    useDismiss(true, ref, onClose, anchorRef);
+    return (_jsx(Portal, { active: !!pos, children: _jsxs("div", { "data-editor-ui": "", ref: ref, role: "menu", "aria-label": ariaLabel, className: `tb-listmenu${pos ? ' is-fixed' : ''}`, style: pos ? { position: 'fixed', left: pos.left, top: pos.top, maxHeight: pos.maxHeight, overflowY: 'auto' } : undefined, children: [items.map((it) => (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": value === it.value, className: value === it.value ? 'is-on' : '', title: it.label, "aria-label": it.label, onMouseDown: (e) => e.preventDefault(), onClick: () => { onPick(it.value); onClose(); }, children: _jsx(Icon, { name: it.icon, size: 18 }) }, it.value))), footer] }) }));
+}
+//# sourceMappingURL=PickMenu.js.map

package/dist/PickMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickMenu.js","sourceRoot":"","sources":["../src/PickMenu.tsx"],"names":[],"mappings":"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"}