@hwp-editor/react 1.0.0-rc.0

package/dist/index.js

@@ -0,0 +1,1737 @@
+// src/HwpEditor.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useMemo as useMemo3,
+  useRef,
+  useState as useState5,
+  useSyncExternalStore
+} from "react";
+import { createStore, segmentAtRef as segmentAtRef4 } from "@hwp-editor/core";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var HwpEditorContext = createContext(
+  null
+);
+function useHwpEditorContext() {
+  const value = useContext(HwpEditorContext);
+  if (value === null) {
+    throw new Error("hwp-editor panels must be rendered inside <HwpEditor>");
+  }
+  return value;
+}
+
+// src/PageCanvas.tsx
+import { useMemo } from "react";
+import { base64, segmentAtRef, segmentRef, segmentText } from "@hwp-editor/core";
+
+// src/geometry.ts
+import { segmentAtOffset } from "@hwp-editor/core";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function nearestSegment(envelope, pageIndex, yFraction, pageCount) {
+  if (envelope.segments.length === 0) return void 0;
+  const offset = clickOffset(envelope, pageIndex, yFraction, pageCount);
+  const hit = segmentAtOffset(envelope, offset);
+  if (hit !== void 0) return hit;
+  let best;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (const segment of envelope.segments) {
+    const distance = Math.abs(segment.start - offset);
+    if (distance < bestDistance) {
+      best = segment;
+      bestDistance = distance;
+    }
+  }
+  return best;
+}
+function clickOffset(envelope, pageIndex, yFraction, pageCount) {
+  const total = Math.max(pageCount, 1);
+  const fraction = clamp(
+    (clamp(pageIndex, 0, total - 1) + clamp(yFraction, 0, 1)) / total,
+    0,
+    1
+  );
+  return Math.round(fraction * envelope.markdown.length);
+}
+function segmentBand(envelope, segment, pageCount) {
+  const length = envelope.markdown.length;
+  if (length === 0) return null;
+  const total = Math.max(pageCount, 1);
+  const center = (segment.start + segment.end) / 2;
+  const position = center / length * total;
+  const pageIndex = clamp(Math.floor(position), 0, total - 1);
+  const height = clamp((segment.end - segment.start) / length * total * 100, 2, 100);
+  const top = clamp((position - pageIndex) * 100 - height / 2, 0, 100 - height);
+  return { pageIndex, top, height };
+}
+
+// src/sanitize.ts
+function sanitizeSvg(svgText) {
+  const doc = new DOMParser().parseFromString(svgText, "image/svg+xml");
+  const root = doc.documentElement;
+  if (root === null || root.nodeName === "parsererror" || doc.getElementsByTagName("parsererror").length > 0) {
+    return "";
+  }
+  const dangerous = root.querySelectorAll("script, foreignObject");
+  for (const node of Array.from(dangerous)) node.remove();
+  scrubElement(root);
+  return root.outerHTML;
+}
+function scrubElement(el) {
+  for (const attr of Array.from(el.attributes)) {
+    const name = attr.name.toLowerCase();
+    const value = attr.value.trim().toLowerCase();
+    if (name.startsWith("on")) {
+      el.removeAttribute(attr.name);
+    } else if ((name === "href" || name === "xlink:href") && value.startsWith("javascript:")) {
+      el.removeAttribute(attr.name);
+    }
+  }
+  for (const child of Array.from(el.children)) scrubElement(child);
+}
+
+// src/text.ts
+function plainSegmentText(markdownSlice) {
+  return markdownSlice.split("\n").map(stripLine).join("\n").trim();
+}
+function stripLine(line) {
+  let out = line.trimEnd();
+  out = out.replace(/^#{1,6}\s+/, "");
+  out = out.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1");
+  out = out.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1");
+  out = out.replace(/(\*\*|__)(.*?)\1/g, "$2");
+  out = out.replace(/(\*|_)(.*?)\1/g, "$2");
+  out = out.replace(/`([^`]*)`/g, "$1");
+  return out;
+}
+
+// src/PageCanvas.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageCanvas() {
+  const { state, store, envelope, t } = useHwpEditorContext();
+  const { pages, selection, pendingOps } = state;
+  const pendingSegments = useMemo(() => {
+    if (envelope === null) return /* @__PURE__ */ new Set();
+    const keys = /* @__PURE__ */ new Set();
+    for (const op of pendingOps) {
+      const target = opSearchText(op);
+      if (target === null || target === "") continue;
+      for (const segment of envelope.segments) {
+        const plain = plainSegmentText(segmentText(envelope, segment));
+        if (plain.includes(target)) {
+          keys.add(`${segment.section}:${segment.para}`);
+        }
+      }
+    }
+    return keys;
+  }, [envelope, pendingOps]);
+  const selectedSegment = envelope !== null && selection !== null ? segmentAtRef(envelope, selection) : void 0;
+  if (pages.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "hwped-canvas", role: "main", "aria-label": t("canvas.aria"), children: /* @__PURE__ */ jsx("div", { className: "hwped-empty", children: t("canvas.emptyPages") }) });
+  }
+  const selectAt = (pageIndex, yFraction) => {
+    if (envelope === null) return;
+    const segment = nearestSegment(envelope, pageIndex, yFraction, pages.length);
+    if (segment !== void 0) {
+      store.dispatch({ type: "select", selection: segmentRef(segment) });
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "hwped-canvas", role: "main", "aria-label": t("canvas.aria"), children: pages.map((page, pageIndex) => /* @__PURE__ */ jsx(
+    PageView,
+    {
+      page,
+      onClick: (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        selectAt(
+          pageIndex,
+          rect.height > 0 ? (e.clientY - rect.top) / rect.height : 0.5
+        );
+      },
+      onActivate: () => selectAt(pageIndex, 0.5),
+      bands: bandsForPage(
+        envelope,
+        pageIndex,
+        pages.length,
+        selectedSegment,
+        pendingSegments
+      )
+    },
+    page.page
+  )) });
+}
+function bandsForPage(envelope, pageIndex, pageCount, selected, pendingKeys) {
+  if (envelope === null) return [];
+  const bands = [];
+  for (const segment of envelope.segments) {
+    const key = `${segment.section}:${segment.para}`;
+    const isSelected = selected === segment;
+    const isPending = !isSelected && pendingKeys.has(key);
+    if (!isSelected && !isPending) continue;
+    const band = segmentBand(envelope, segment, pageCount);
+    if (band === null || band.pageIndex !== pageIndex) continue;
+    bands.push({
+      key: `${isSelected ? "sel" : "pend"}-${key}`,
+      className: isSelected ? "hwped-band hwped-band-selected" : "hwped-band hwped-band-pending",
+      top: band.top,
+      height: band.height
+    });
+  }
+  return bands;
+}
+function PageView(props) {
+  const { page, onClick, onActivate, bands } = props;
+  const { t } = useHwpEditorContext();
+  const label = t("page.label", { page: page.page });
+  const svgHtml = useMemo(
+    () => page.format === "svg" ? sanitizeSvg(new TextDecoder().decode(page.data)) : null,
+    [page]
+  );
+  const imgSrc = useMemo(() => {
+    if (page.format === "svg") return null;
+    const mime = page.format === "jpeg" ? "image/jpeg" : `image/${page.format}`;
+    return `data:${mime};base64,${base64.encode(page.data)}`;
+  }, [page]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "hwped-page",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": label,
+      style: { aspectRatio: `${page.width} / ${page.height}` },
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onActivate();
+        }
+      },
+      children: [
+        svgHtml !== null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "hwped-page-svg",
+            dangerouslySetInnerHTML: { __html: svgHtml }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "hwped-page-img",
+            src: imgSrc ?? "",
+            alt: label,
+            width: page.width,
+            height: page.height
+          }
+        ),
+        bands.map((band) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: band.className,
+            style: { top: `${band.top}%`, height: `${band.height}%` }
+          },
+          band.key
+        ))
+      ]
+    }
+  );
+}
+function opSearchText(op) {
+  if ("find" in op && typeof op.find === "string") return op.find;
+  if ("anchor" in op && typeof op.anchor === "string") return op.anchor;
+  if (op.kind === "delete-para" && typeof op.text === "string") return op.text;
+  return null;
+}
+
+// src/SegmentInspector.tsx
+import { useEffect, useState } from "react";
+import { segmentAtRef as segmentAtRef2, segmentText as segmentText2 } from "@hwp-editor/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ALIGNMENTS = [
+  { value: "left", key: "segment.alignLeft" },
+  { value: "center", key: "segment.alignCenter" },
+  { value: "right", key: "segment.alignRight" },
+  { value: "justify", key: "segment.alignJustify" }
+];
+function SegmentInspector() {
+  const { state, store, envelope, editable, t } = useHwpEditorContext();
+  const { selection } = state;
+  const segment = envelope !== null && selection !== null ? segmentAtRef2(envelope, selection) : void 0;
+  const currentText = envelope !== null && segment !== void 0 ? plainSegmentText(segmentText2(envelope, segment)) : "";
+  const [replaceWith, setReplaceWith] = useState("");
+  const [insertText, setInsertText] = useState("");
+  const [bold, setBold] = useState(false);
+  const [fontSize, setFontSize] = useState("");
+  const [color, setColor] = useState("");
+  useEffect(() => {
+    setReplaceWith("");
+    setInsertText("");
+    setBold(false);
+    setFontSize("");
+    setColor("");
+  }, [selection]);
+  if (segment === void 0 || selection === null) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "hwped-panel",
+        role: "region",
+        "aria-label": t("segment.panelAria"),
+        children: /* @__PURE__ */ jsx2("p", { className: "hwped-hint", children: t("segment.hint") })
+      }
+    );
+  }
+  const find = currentText;
+  const disabled = !editable;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "hwped-panel",
+      role: "region",
+      "aria-label": t("segment.panelAria"),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx2("span", { className: "hwped-label", children: t("segment.selectedPara", {
+            section: selection.section,
+            para: selection.para
+          }) }),
+          /* @__PURE__ */ jsx2("div", { className: "hwped-quote", children: currentText || t("segment.emptyPara") })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx2("label", { className: "hwped-label", htmlFor: "hwped-replace", children: t("segment.replaceLabel") }),
+          /* @__PURE__ */ jsxs2("div", { className: "hwped-row", children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                id: "hwped-replace",
+                className: "hwped-input",
+                type: "text",
+                value: replaceWith,
+                disabled,
+                onChange: (e) => setReplaceWith(e.target.value),
+                placeholder: t("segment.replacePlaceholder")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "hwped-btn",
+                disabled: disabled || replaceWith === "" || find === "",
+                onClick: () => store.dispatch({
+                  type: "queueOp",
+                  op: { kind: "replace", find, replace: replaceWith }
+                }),
+                children: t("segment.replaceSubmit")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx2("label", { className: "hwped-label", htmlFor: "hwped-insert", children: t("segment.insertLabel") }),
+          /* @__PURE__ */ jsx2(
+            "textarea",
+            {
+              id: "hwped-insert",
+              className: "hwped-textarea",
+              value: insertText,
+              disabled,
+              onChange: (e) => setInsertText(e.target.value),
+              placeholder: t("segment.insertPlaceholder"),
+              rows: 2
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "hwped-row", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "hwped-btn",
+                disabled: disabled || insertText === "" || find === "",
+                onClick: () => store.dispatch({
+                  type: "queueOp",
+                  op: { kind: "insert-para-before", anchor: find, text: insertText }
+                }),
+                children: t("segment.insertBefore")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "hwped-btn",
+                disabled: disabled || insertText === "" || find === "",
+                onClick: () => store.dispatch({
+                  type: "queueOp",
+                  op: { kind: "insert-para", anchor: find, text: insertText }
+                }),
+                children: t("segment.insertAfter")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "hwped-btn hwped-btn-danger",
+                disabled: disabled || find === "",
+                onClick: () => store.dispatch({
+                  type: "queueOp",
+                  op: { kind: "delete-para", text: find }
+                }),
+                children: t("segment.deletePara")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx2("span", { className: "hwped-label", children: t("segment.alignLabel") }),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "hwped-row",
+              role: "group",
+              "aria-label": t("segment.alignGroupAria"),
+              children: ALIGNMENTS.map((align) => /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "hwped-btn",
+                  disabled: disabled || find === "",
+                  onClick: () => store.dispatch({
+                    type: "queueOp",
+                    op: { kind: "set-align", find, alignment: align.value }
+                  }),
+                  children: t(align.key)
+                },
+                align.value
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx2("span", { className: "hwped-label", children: t("segment.formatLabel") }),
+          /* @__PURE__ */ jsxs2("div", { className: "hwped-row", children: [
+            /* @__PURE__ */ jsxs2("label", { className: "hwped-check", children: [
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: bold,
+                  disabled,
+                  onChange: (e) => setBold(e.target.checked)
+                }
+              ),
+              t("segment.bold")
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                className: "hwped-input hwped-input-narrow",
+                type: "number",
+                min: 1,
+                value: fontSize,
+                disabled,
+                onChange: (e) => setFontSize(e.target.value),
+                placeholder: t("segment.sizePlaceholder"),
+                "aria-label": t("segment.sizeAria")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                className: "hwped-input hwped-input-narrow",
+                type: "text",
+                value: color,
+                disabled,
+                onChange: (e) => setColor(e.target.value),
+                placeholder: "#FF0000",
+                "aria-label": t("segment.colorAria")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "hwped-btn",
+                disabled: disabled || find === "" || !bold && fontSize === "" && color === "",
+                onClick: () => {
+                  const props = {};
+                  if (bold) props["bold"] = "on";
+                  if (fontSize !== "") props["size"] = fontSize;
+                  if (color !== "") props["color"] = color;
+                  store.dispatch({
+                    type: "queueOp",
+                    op: { kind: "set-format", find, props }
+                  });
+                },
+                children: t("segment.formatSubmit")
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/TableGrid.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/tables.ts
+import { segmentText as segmentText3 } from "@hwp-editor/core";
+function isTableSlice(slice) {
+  return parseMarkdownTable(slice) !== null;
+}
+function parseMarkdownTable(slice) {
+  const lines = slice.split("\n").map((line) => line.trim()).filter((line) => line.startsWith("|") && line.endsWith("|"));
+  if (lines.length < 2) return null;
+  const rows = [];
+  let sawSeparator = false;
+  for (const line of lines) {
+    const cells = line.slice(1, -1).split("|").map((cell) => cell.trim());
+    if (cells.every((cell) => /^:?-{2,}:?$/.test(cell))) {
+      sawSeparator = true;
+      continue;
+    }
+    rows.push(cells);
+  }
+  return sawSeparator && rows.length > 0 ? rows : null;
+}
+function findTables(envelope) {
+  const tables = [];
+  for (const segment of envelope.segments) {
+    const rows = parseMarkdownTable(segmentText3(envelope, segment));
+    if (rows !== null) {
+      tables.push({ tableIndex: tables.length, segment, rows });
+    }
+  }
+  return tables;
+}
+function tableAtRef(envelope, ref) {
+  return findTables(envelope).find(
+    (table) => table.segment.section === ref.section && table.segment.para === ref.para
+  );
+}
+
+// src/TableGrid.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableGrid() {
+  const { state, store, envelope, editable, t } = useHwpEditorContext();
+  const { selection } = state;
+  const table = envelope !== null && selection !== null ? tableAtRef(envelope, selection) : void 0;
+  const [cell, setCell] = useState2(null);
+  const [mergeAnchor, setMergeAnchor] = useState2(null);
+  const [cellValue, setCellValue] = useState2("");
+  useEffect2(() => {
+    setCell(null);
+    setMergeAnchor(null);
+    setCellValue("");
+  }, [selection]);
+  if (table === void 0) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "hwped-panel",
+        role: "region",
+        "aria-label": t("table.panelAria"),
+        children: /* @__PURE__ */ jsx3("p", { className: "hwped-hint", children: t("table.hint") })
+      }
+    );
+  }
+  const disabled = !editable;
+  const tableIndex = table.tableIndex;
+  const queue = store.dispatch.bind(store);
+  return /* @__PURE__ */ jsxs3("div", { className: "hwped-panel", role: "region", "aria-label": t("table.panelAria"), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "hwped-field", children: [
+      /* @__PURE__ */ jsx3("span", { className: "hwped-label", children: t("table.tableLabel", { index: tableIndex }) }),
+      /* @__PURE__ */ jsx3("table", { className: "hwped-grid", children: /* @__PURE__ */ jsx3("tbody", { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", { children: row.map((text, colIndex) => {
+        const active = cell !== null && cell.row === rowIndex && cell.col === colIndex;
+        const anchor = mergeAnchor !== null && mergeAnchor.row === rowIndex && mergeAnchor.col === colIndex;
+        return /* @__PURE__ */ jsx3("td", { children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-cell" + (active ? " hwped-cell-selected" : "") + (anchor ? " hwped-cell-anchor" : ""),
+            onClick: () => {
+              setCell({ row: rowIndex, col: colIndex });
+              setCellValue(plainSegmentText(text));
+            },
+            children: plainSegmentText(text) || " "
+          }
+        ) }, colIndex);
+      }) }, rowIndex)) }) })
+    ] }),
+    cell !== null && /* @__PURE__ */ jsxs3("div", { className: "hwped-field", children: [
+      /* @__PURE__ */ jsx3("label", { className: "hwped-label", htmlFor: "hwped-cell", children: t("table.cellLabel", { row: cell.row, col: cell.col }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "hwped-row", children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            id: "hwped-cell",
+            className: "hwped-input",
+            type: "text",
+            value: cellValue,
+            disabled,
+            onChange: (e) => setCellValue(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn",
+            disabled,
+            onClick: () => queue({
+              type: "queueOp",
+              op: {
+                kind: "set-cell",
+                table: tableIndex,
+                row: cell.row,
+                col: cell.col,
+                value: cellValue
+              }
+            }),
+            children: t("table.setCell")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "hwped-row", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn",
+            disabled,
+            onClick: () => setMergeAnchor({ ...cell }),
+            children: t("table.mergeAnchor")
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn",
+            disabled: disabled || mergeAnchor === null || mergeAnchor.row === cell.row && mergeAnchor.col === cell.col,
+            onClick: () => {
+              if (mergeAnchor === null) return;
+              queue({
+                type: "queueOp",
+                op: {
+                  kind: "merge-cells",
+                  table: tableIndex,
+                  r1: Math.min(mergeAnchor.row, cell.row),
+                  c1: Math.min(mergeAnchor.col, cell.col),
+                  r2: Math.max(mergeAnchor.row, cell.row),
+                  c2: Math.max(mergeAnchor.col, cell.col)
+                }
+              });
+              setMergeAnchor(null);
+            },
+            children: t("table.mergeWithAnchor")
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn",
+            disabled,
+            onClick: () => queue({
+              type: "queueOp",
+              op: {
+                kind: "split-cell",
+                table: tableIndex,
+                row: cell.row,
+                col: cell.col
+              }
+            }),
+            children: t("table.splitCell")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "hwped-field", children: [
+      /* @__PURE__ */ jsx3("span", { className: "hwped-label", children: t("table.rowsCols") }),
+      /* @__PURE__ */ jsxs3("div", { className: "hwped-row", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn",
+            disabled,
+            onClick: () => queue({
+              type: "queueOp",
+              op: cell === null ? { kind: "add-row", table: tableIndex } : { kind: "add-row", table: tableIndex, at: cell.row + 1 }
+            }),
+            children: t("table.addRow")
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn",
+            disabled,
+            onClick: () => queue({
+              type: "queueOp",
+              op: cell === null ? { kind: "add-col", table: tableIndex } : { kind: "add-col", table: tableIndex, at: cell.col + 1 }
+            }),
+            children: t("table.addCol")
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn hwped-btn-danger",
+            disabled: disabled || cell === null,
+            onClick: () => {
+              if (cell === null) return;
+              queue({
+                type: "queueOp",
+                op: { kind: "delete-row", table: tableIndex, row: cell.row }
+              });
+            },
+            children: t("table.deleteRow")
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "hwped-btn hwped-btn-danger",
+            disabled: disabled || cell === null,
+            onClick: () => {
+              if (cell === null) return;
+              queue({
+                type: "queueOp",
+                op: { kind: "delete-col", table: tableIndex, col: cell.col }
+              });
+            },
+            children: t("table.deleteCol")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "hwped-field", children: /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "hwped-btn hwped-btn-danger",
+        disabled,
+        onClick: () => queue({
+          type: "queueOp",
+          op: { kind: "delete-table", target: tableIndex }
+        }),
+        children: t("table.deleteTable")
+      }
+    ) })
+  ] });
+}
+
+// src/FieldsPanel.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+import { segmentAtRef as segmentAtRef3, segmentText as segmentText4 } from "@hwp-editor/core";
+
+// src/fields.ts
+import { segmentAtOffset as segmentAtOffset2 } from "@hwp-editor/core";
+var SLOT_PATTERN = /\{\{\s*([^{}]+?)\s*\}\}/g;
+function extractFieldSlots(envelope) {
+  const slots = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const match of envelope.markdown.matchAll(SLOT_PATTERN)) {
+    const name = match[1] ?? "";
+    const offset = match.index ?? 0;
+    const segment = segmentAtOffset2(envelope, offset);
+    if (segment === void 0 || seen.has(name)) continue;
+    seen.add(name);
+    slots.push({
+      name,
+      segment: { section: segment.section, para: segment.para }
+    });
+  }
+  return slots;
+}
+
+// src/FieldsPanel.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function FieldsPanel() {
+  const { store, envelope, editable, t } = useHwpEditorContext();
+  const [drafts, setDrafts] = useState3({});
+  const slots = useMemo2(
+    () => envelope === null ? [] : extractFieldSlots(envelope),
+    [envelope]
+  );
+  if (envelope === null || slots.length === 0) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "hwped-panel",
+        role: "region",
+        "aria-label": t("fields.panelAria"),
+        children: /* @__PURE__ */ jsx4("p", { className: "hwped-hint", children: t("fields.hint") })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "hwped-panel",
+      role: "region",
+      "aria-label": t("fields.panelAria"),
+      children: /* @__PURE__ */ jsx4("ul", { className: "hwped-fields", children: slots.map((slot) => {
+        const segment = segmentAtRef3(envelope, slot.segment);
+        const snippet = segment === void 0 ? "" : segmentText4(envelope, segment).trim().slice(0, 40);
+        const draft = drafts[slot.name] ?? "";
+        return /* @__PURE__ */ jsxs4("li", { className: "hwped-field-item", children: [
+          /* @__PURE__ */ jsx4("div", { className: "hwped-row", children: /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "hwped-btn hwped-btn-link",
+              title: snippet,
+              onClick: () => store.dispatch({ type: "select", selection: slot.segment }),
+              children: slot.name
+            }
+          ) }),
+          /* @__PURE__ */ jsxs4("div", { className: "hwped-row", children: [
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                className: "hwped-input",
+                type: "text",
+                value: draft,
+                disabled: !editable,
+                placeholder: t("fields.valuePlaceholder"),
+                "aria-label": t("fields.fieldValueAria", { name: slot.name }),
+                onChange: (e) => setDrafts((prev) => ({ ...prev, [slot.name]: e.target.value }))
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "hwped-btn",
+                disabled: !editable || draft === "",
+                onClick: () => store.dispatch({
+                  type: "queueOp",
+                  op: { kind: "set-field", name: slot.name, value: draft }
+                }),
+                children: t("fields.setValue")
+              }
+            )
+          ] })
+        ] }, slot.name);
+      }) })
+    }
+  );
+}
+
+// src/ComposePanel.tsx
+import { useState as useState4 } from "react";
+
+// src/errors.ts
+import { isHwpEngineError, isHwpErrorCode } from "@hwp-editor/core";
+function toEditorError(e) {
+  return isHwpEngineError(e) && isHwpErrorCode(e.code) ? { code: e.code, message: e.message } : { message: e instanceof Error ? e.message : String(e) };
+}
+var KIND_BY_CODE = {
+  timeout: "timeout",
+  unavailable: "unavailable",
+  version: "unavailable",
+  protected: "protected",
+  failed: "generic",
+  bad_request: "generic",
+  unsupported_format: "generic",
+  output_too_large: "generic",
+  cancelled: "generic",
+  method_not_allowed: "generic",
+  not_found: "generic",
+  session_not_found: "generic",
+  path_traversal: "generic",
+  forbidden: "generic",
+  internal: "generic"
+};
+function engineErrorKind(error) {
+  if (error.code !== void 0 && Object.hasOwn(KIND_BY_CODE, error.code)) {
+    return KIND_BY_CODE[error.code];
+  }
+  return classifyEngineError(error.message);
+}
+function classifyEngineError(message) {
+  const m = message.toLowerCase();
+  if (m.includes("timed out") || m.includes("hwp_timeout") || m.includes("http 504")) {
+    return "timeout";
+  }
+  if (m.includes("binary not found") || m.includes("cli_missing") || m.includes("not executable") || m.includes("http 503")) {
+    return "unavailable";
+  }
+  if (m.includes("distribution") || m.includes("encrypted") || m.includes("protected") || m.includes("\uBC30\uD3EC\uC6A9")) {
+    return "protected";
+  }
+  return "generic";
+}
+
+// src/ErrorLine.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var LABEL_KEY_BY_KIND = {
+  timeout: "error.kind.timeout",
+  unavailable: "error.kind.unavailable",
+  protected: "error.kind.protected",
+  generic: "error.kind.generic"
+};
+function ErrorLine(props) {
+  const { t } = useHwpEditorContext();
+  const kind = engineErrorKind({
+    // Conditional spread: exactOptionalPropertyTypes rejects an explicit
+    // `code: undefined` against the optional field.
+    ...props.code !== void 0 ? { code: props.code } : {},
+    message: props.message
+  });
+  return /* @__PURE__ */ jsxs5("p", { className: "hwped-error", role: "alert", "data-error-kind": kind, children: [
+    kind !== "generic" && /* @__PURE__ */ jsx5("span", { className: `hwped-error-kind hwped-error-${kind}`, children: t(LABEL_KEY_BY_KIND[kind]) }),
+    props.prefix,
+    ": ",
+    props.message
+  ] });
+}
+
+// src/presets.ts
+var COMPOSE_PRESETS = [
+  "official",
+  "report",
+  "plan",
+  "notice",
+  "minutes",
+  "gaejosik",
+  "press"
+];
+var MALGUN = "\uB9D1\uC740 \uACE0\uB515";
+var HCR_BATANG = "\uD568\uCD08\uB86C\uBC14\uD0D5";
+var PRESET_PROFILES = {
+  official: { fontFamily: MALGUN, bodySizePt: 12, lineHeightPercent: 160, pageNumber: false },
+  report: { fontFamily: HCR_BATANG, bodySizePt: 15, lineHeightPercent: 160, pageNumber: true },
+  plan: { fontFamily: HCR_BATANG, bodySizePt: 15, lineHeightPercent: 160, pageNumber: true },
+  notice: { fontFamily: MALGUN, bodySizePt: 15, lineHeightPercent: 160, pageNumber: true },
+  minutes: { fontFamily: HCR_BATANG, bodySizePt: 14, lineHeightPercent: 130, pageNumber: false },
+  gaejosik: { fontFamily: MALGUN, bodySizePt: 15, lineHeightPercent: 160, pageNumber: true },
+  press: { fontFamily: HCR_BATANG, bodySizePt: 14, lineHeightPercent: 160, pageNumber: true }
+};
+function bodyToBlocks(body) {
+  const blocks = [];
+  for (const chunk of body.split(/\n\s*\n/)) {
+    const text = chunk.trim();
+    if (text === "") continue;
+    if (text.startsWith("# ")) {
+      blocks.push({
+        type: "paragraph",
+        style: "heading",
+        runs: [{ type: "text", text: text.slice(2).trim() }]
+      });
+    } else {
+      blocks.push({
+        type: "paragraph",
+        style: "body",
+        runs: [{ type: "text", text }]
+      });
+    }
+  }
+  return blocks;
+}
+function buildDocumentSpec(preset, input) {
+  const profile = PRESET_PROFILES[preset];
+  const blocks = [];
+  if (input.title.trim() !== "") {
+    blocks.push({
+      type: "paragraph",
+      style: "title",
+      runs: [{ type: "text", text: input.title.trim() }]
+    });
+  }
+  blocks.push(...bodyToBlocks(input.body));
+  if (blocks.length === 0) {
+    blocks.push({
+      type: "paragraph",
+      style: "body",
+      runs: [{ type: "text", text: " " }]
+    });
+  }
+  const section = {
+    ...profile.pageNumber ? { page_number: { position: "bottom_center" } } : {},
+    blocks
+  };
+  return {
+    version: "2.0",
+    document: {
+      version: "1.0",
+      metadata: {
+        ...input.title.trim() !== "" ? { title: input.title.trim() } : {},
+        ...input.author.trim() !== "" ? { author: input.author.trim() } : {}
+      },
+      styles: {
+        body: {
+          font_family: profile.fontFamily,
+          font_size_pt: profile.bodySizePt,
+          line_height_percent: profile.lineHeightPercent,
+          align: "justify"
+        },
+        heading: {
+          font_family: profile.fontFamily,
+          font_size_pt: profile.bodySizePt + 3,
+          bold: true,
+          spacing_before_pt: 13,
+          spacing_after_pt: 6
+        },
+        title: {
+          font_family: profile.fontFamily,
+          font_size_pt: profile.bodySizePt + 6,
+          bold: true,
+          align: "center",
+          spacing_after_pt: 18
+        }
+      },
+      sections: [section]
+    }
+  };
+}
+
+// src/ComposePanel.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var PRESET_LABEL_KEYS = {
+  official: "presets.official",
+  report: "presets.report",
+  plan: "presets.plan",
+  notice: "presets.notice",
+  minutes: "presets.minutes",
+  gaejosik: "presets.gaejosik",
+  press: "presets.press"
+};
+function ComposePanel(props) {
+  const { engine, t, onError } = useHwpEditorContext();
+  const [preset, setPreset] = useState4("official");
+  const [title, setTitle] = useState4("");
+  const [author, setAuthor] = useState4("");
+  const [body, setBody] = useState4("");
+  const [busy, setBusy] = useState4(false);
+  const [error, setError] = useState4(null);
+  const compose = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const spec = buildDocumentSpec(preset, { title, author, body });
+      const stem = title.trim() === "" ? t("compose.defaultFileStem") : title.trim();
+      const result = await engine.compose(spec, `${stem}.hwpx`);
+      props.onComposed(result.document);
+    } catch (e) {
+      setError(toEditorError(e));
+      onError?.(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx6("div", { className: "hwped-overlay", role: "presentation", onClick: props.onClose, children: /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "hwped-dialog",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": t("compose.title"),
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx6("h2", { className: "hwped-dialog-title", children: t("compose.title") }),
+        /* @__PURE__ */ jsxs6("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx6("span", { className: "hwped-label", children: t("compose.docType") }),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: "hwped-presets",
+              role: "radiogroup",
+              "aria-label": t("compose.docTypeAria"),
+              children: COMPOSE_PRESETS.map((value) => /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": preset === value,
+                  className: "hwped-preset" + (preset === value ? " hwped-preset-active" : ""),
+                  onClick: () => setPreset(value),
+                  children: t(PRESET_LABEL_KEYS[value])
+                },
+                value
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx6("label", { className: "hwped-label", htmlFor: "hwped-compose-title", children: t("compose.titleLabel") }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              id: "hwped-compose-title",
+              className: "hwped-input",
+              type: "text",
+              value: title,
+              onChange: (e) => setTitle(e.target.value),
+              placeholder: t("compose.titlePlaceholder")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx6("label", { className: "hwped-label", htmlFor: "hwped-compose-author", children: t("compose.authorLabel") }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              id: "hwped-compose-author",
+              className: "hwped-input",
+              type: "text",
+              value: author,
+              onChange: (e) => setAuthor(e.target.value),
+              placeholder: t("compose.authorPlaceholder")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "hwped-field", children: [
+          /* @__PURE__ */ jsx6("label", { className: "hwped-label", htmlFor: "hwped-compose-body", children: t("compose.bodyLabel") }),
+          /* @__PURE__ */ jsx6(
+            "textarea",
+            {
+              id: "hwped-compose-body",
+              className: "hwped-textarea",
+              rows: 8,
+              value: body,
+              onChange: (e) => setBody(e.target.value),
+              placeholder: t("compose.bodyPlaceholder")
+            }
+          )
+        ] }),
+        error !== null && /* @__PURE__ */ jsx6(ErrorLine, { prefix: t("error.prefix.compose"), ...error }),
+        /* @__PURE__ */ jsxs6("div", { className: "hwped-row hwped-dialog-actions", children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "hwped-btn",
+              onClick: props.onClose,
+              disabled: busy,
+              children: t("compose.cancel")
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "hwped-btn hwped-btn-primary",
+              onClick: () => void compose(),
+              disabled: busy,
+              children: busy ? t("compose.submitting") : t("compose.submit")
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/messages.ts
+var en = {
+  // Toolbar
+  "toolbar.toolsAria": "Editing tools",
+  "toolbar.readOnly": "Read-only",
+  "toolbar.pendingEdits": (p) => p.count === 1 ? "1 pending edit" : `${p.count} pending edits`,
+  "toolbar.revert": "Undo edit",
+  "toolbar.apply": "Apply",
+  "toolbar.applyWithCount": (p) => `Apply (${p.count})`,
+  "toolbar.applying": "Applying\u2026",
+  "toolbar.newDocument": "New document",
+  // Validation badge
+  "validation.aria": "Validation result",
+  "validation.valid": "Valid",
+  "validation.errors": (p) => p.count === 1 ? "1 error" : `${p.count} errors`,
+  // Canvas
+  "canvas.aria": "Document pages",
+  "canvas.empty": "No document open.",
+  "canvas.createCta": "Create a new document",
+  "canvas.emptyPages": "No rendered pages.",
+  "page.label": (p) => `Page ${p.page}`,
+  // Side panel shell
+  "side.panelAria": "Editing panels",
+  "tabs.para": "Paragraph",
+  "tabs.table": "Table",
+  "tabs.fields": "Fields",
+  // Error line — the prefix names which operation failed. The `{message}`
+  // tail stays engine-authored and is never translated.
+  "error.prefix.load": "Failed to open document",
+  "error.prefix.apply": "Failed to apply edits",
+  "error.prefix.compose": "Failed to create document",
+  // Badge labels; "generic" renders no chip, hence the empty string.
+  "error.kind.timeout": "Engine timed out",
+  "error.kind.unavailable": "hwp binary unavailable",
+  "error.kind.protected": "Protected document",
+  "error.kind.generic": "",
+  // Compose dialog
+  "compose.title": "Create a new document",
+  "compose.docType": "Document type",
+  "compose.docTypeAria": "Document type",
+  "compose.titleLabel": "Title",
+  "compose.titlePlaceholder": "Document title",
+  "compose.authorLabel": "Author",
+  "compose.authorPlaceholder": "Author (optional)",
+  "compose.bodyLabel": "Body",
+  "compose.bodyPlaceholder": "Blank lines separate paragraphs. Lines starting with '# ' become subheadings.\n\nExample:\n# 1. Overview\nBody text...",
+  "compose.cancel": "Cancel",
+  "compose.submit": "Create document",
+  "compose.submitting": "Creating\u2026",
+  /** Filename stem used when the compose form has no title. */
+  "compose.defaultFileStem": "New document",
+  // Compose preset labels. The preset PROFILES (font names, sizes) are
+  // document data and stay in presets.ts, untranslated.
+  "presets.official": "Official document",
+  "presets.report": "Report",
+  "presets.plan": "Plan",
+  "presets.notice": "Notice",
+  "presets.minutes": "Minutes",
+  "presets.gaejosik": "Outline document",
+  "presets.press": "Press release",
+  // SegmentInspector
+  "segment.panelAria": "Paragraph editor",
+  "segment.hint": "Click the page to select a paragraph to edit.",
+  "segment.selectedPara": (p) => `Selected paragraph (section ${p.section}, paragraph ${p.para})`,
+  "segment.emptyPara": "(empty paragraph)",
+  "segment.replaceLabel": "Replace text",
+  "segment.replacePlaceholder": "New text",
+  "segment.replaceSubmit": "Replace",
+  "segment.insertLabel": "Insert paragraph",
+  "segment.insertPlaceholder": "Paragraph text to insert",
+  "segment.insertBefore": "Insert before",
+  "segment.insertAfter": "Insert after",
+  "segment.deletePara": "Delete paragraph",
+  "segment.alignLabel": "Alignment",
+  "segment.alignGroupAria": "Paragraph alignment",
+  "segment.alignLeft": "Left",
+  "segment.alignCenter": "Center",
+  "segment.alignRight": "Right",
+  "segment.alignJustify": "Justify",
+  "segment.formatLabel": "Character format",
+  "segment.bold": "Bold",
+  "segment.sizePlaceholder": "Size (pt)",
+  "segment.sizeAria": "Font size (pt)",
+  "segment.colorAria": "Font color",
+  "segment.formatSubmit": "Apply format",
+  // TableGrid
+  "table.panelAria": "Table editor",
+  "table.hint": "Select a region containing a table on the page. The current selection is not a table paragraph.",
+  "table.tableLabel": (p) => `Table #${p.index}`,
+  "table.cellLabel": (p) => `Cell (${p.row}, ${p.col})`,
+  "table.setCell": "Set cell",
+  "table.mergeAnchor": "Set merge anchor",
+  "table.mergeWithAnchor": "Merge with anchor",
+  "table.splitCell": "Split cell",
+  "table.rowsCols": "Rows / columns",
+  "table.addRow": "Add row",
+  "table.addCol": "Add column",
+  "table.deleteRow": "Delete row",
+  "table.deleteCol": "Delete column",
+  "table.deleteTable": "Delete table",
+  // FieldsPanel
+  "fields.panelAria": "Fields",
+  "fields.hint": "No {{name}} field placeholders were found in the document.",
+  "fields.valuePlaceholder": "New value",
+  "fields.fieldValueAria": (p) => `Value for field ${p.name}`,
+  "fields.setValue": "Set value"
+};
+var ko = {
+  "toolbar.toolsAria": "\uD3B8\uC9D1 \uB3C4\uAD6C",
+  "toolbar.readOnly": "\uC77D\uAE30 \uC804\uC6A9",
+  "toolbar.pendingEdits": (p) => `\uB300\uAE30 \uD3B8\uC9D1 ${p.count}`,
+  "toolbar.revert": "\uB418\uB3CC\uB9AC\uAE30",
+  "toolbar.apply": "\uC801\uC6A9",
+  "toolbar.applyWithCount": (p) => `\uC801\uC6A9 (${p.count})`,
+  "toolbar.applying": "\uC801\uC6A9 \uC911...",
+  "toolbar.newDocument": "\uC0C8 \uBB38\uC11C",
+  "validation.aria": "\uAC80\uC99D \uACB0\uACFC",
+  "validation.valid": "\uC720\uD6A8",
+  "validation.errors": (p) => `\uC624\uB958 ${p.count}\uAC74`,
+  "canvas.aria": "\uBB38\uC11C \uD398\uC774\uC9C0",
+  "canvas.empty": "\uC5F4\uB9B0 \uBB38\uC11C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  "canvas.createCta": "\uC0C8 \uBB38\uC11C \uB9CC\uB4E4\uAE30",
+  "canvas.emptyPages": "\uB80C\uB354\uB9C1\uB41C \uD398\uC774\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  "page.label": (p) => `\uD398\uC774\uC9C0 ${p.page}`,
+  "side.panelAria": "\uD3B8\uC9D1 \uD328\uB110",
+  "tabs.para": "\uBB38\uB2E8",
+  "tabs.table": "\uD45C",
+  "tabs.fields": "\uD544\uB4DC",
+  "error.prefix.load": "\uBB38\uC11C \uC5F4\uAE30 \uC2E4\uD328",
+  "error.prefix.apply": "\uD3B8\uC9D1 \uC801\uC6A9 \uC2E4\uD328",
+  "error.prefix.compose": "\uBB38\uC11C \uC0DD\uC131 \uC2E4\uD328",
+  "error.kind.timeout": "\uC5D4\uC9C4 \uC2DC\uAC04 \uCD08\uACFC",
+  "error.kind.unavailable": "hwp \uC2E4\uD589 \uD30C\uC77C \uC5C6\uC74C",
+  "error.kind.protected": "\uBCF4\uD638/\uBC30\uD3EC \uBB38\uC11C",
+  "error.kind.generic": "",
+  "compose.title": "\uC0C8 \uBB38\uC11C \uB9CC\uB4E4\uAE30",
+  "compose.docType": "\uBB38\uC11C \uC720\uD615",
+  "compose.docTypeAria": "\uBB38\uC11C \uC720\uD615",
+  "compose.titleLabel": "\uC81C\uBAA9",
+  "compose.titlePlaceholder": "\uBB38\uC11C \uC81C\uBAA9",
+  "compose.authorLabel": "\uC791\uC131\uC790",
+  "compose.authorPlaceholder": "\uC791\uC131\uC790 (\uC120\uD0DD)",
+  "compose.bodyLabel": "\uBCF8\uBB38",
+  "compose.bodyPlaceholder": "\uBE48 \uC904\uB85C \uBB38\uB2E8\uC744 \uAD6C\uBD84\uD569\uB2C8\uB2E4. '# '\uB85C \uC2DC\uC791\uD558\uB294 \uC904\uC740 \uC18C\uC81C\uBAA9\uC774 \uB429\uB2C8\uB2E4.\n\n\uC608)\n# 1. \uAC1C\uC694\n\uBCF8\uBB38 \uB0B4\uC6A9...",
+  "compose.cancel": "\uCDE8\uC18C",
+  "compose.submit": "\uBB38\uC11C \uC0DD\uC131",
+  "compose.submitting": "\uC0DD\uC131 \uC911...",
+  "compose.defaultFileStem": "\uC0C8 \uBB38\uC11C",
+  "presets.official": "\uACF5\uBB38",
+  "presets.report": "\uBCF4\uACE0\uC11C",
+  "presets.plan": "\uACC4\uD68D\uC11C",
+  "presets.notice": "\uC548\uB0B4\uBB38",
+  "presets.minutes": "\uD68C\uC758\uB85D",
+  "presets.gaejosik": "\uAC1C\uC870\uC2DD \uBB38\uC11C",
+  "presets.press": "\uBCF4\uB3C4\uC790\uB8CC",
+  "segment.panelAria": "\uBB38\uB2E8 \uD3B8\uC9D1",
+  "segment.hint": "\uD398\uC774\uC9C0\uB97C \uD074\uB9AD\uD574 \uD3B8\uC9D1\uD560 \uBB38\uB2E8\uC744 \uC120\uD0DD\uD558\uC138\uC694.",
+  "segment.selectedPara": (p) => `\uC120\uD0DD \uBB38\uB2E8 (\uAD6C\uC5ED ${p.section}, \uBB38\uB2E8 ${p.para})`,
+  "segment.emptyPara": "(\uBE48 \uBB38\uB2E8)",
+  "segment.replaceLabel": "\uD14D\uC2A4\uD2B8 \uAD50\uCCB4",
+  "segment.replacePlaceholder": "\uC0C8 \uD14D\uC2A4\uD2B8",
+  "segment.replaceSubmit": "\uAD50\uCCB4",
+  "segment.insertLabel": "\uBB38\uB2E8 \uC0BD\uC785",
+  "segment.insertPlaceholder": "\uC0BD\uC785\uD560 \uBB38\uB2E8 \uD14D\uC2A4\uD2B8",
+  "segment.insertBefore": "\uC55E\uC5D0 \uC0BD\uC785",
+  "segment.insertAfter": "\uB4A4\uC5D0 \uC0BD\uC785",
+  "segment.deletePara": "\uBB38\uB2E8 \uC0AD\uC81C",
+  "segment.alignLabel": "\uC815\uB82C",
+  "segment.alignGroupAria": "\uBB38\uB2E8 \uC815\uB82C",
+  "segment.alignLeft": "\uC67C\uCABD",
+  "segment.alignCenter": "\uAC00\uC6B4\uB370",
+  "segment.alignRight": "\uC624\uB978\uCABD",
+  "segment.alignJustify": "\uC591\uCABD",
+  "segment.formatLabel": "\uAE00\uC790 \uC11C\uC2DD",
+  "segment.bold": "\uAD75\uAC8C",
+  "segment.sizePlaceholder": "\uD06C\uAE30(pt)",
+  "segment.sizeAria": "\uAE00\uC790 \uD06C\uAE30(pt)",
+  "segment.colorAria": "\uAE00\uC790 \uC0C9\uC0C1",
+  "segment.formatSubmit": "\uC11C\uC2DD \uC801\uC6A9",
+  "table.panelAria": "\uD45C \uD3B8\uC9D1",
+  "table.hint": "\uD45C\uAC00 \uD3EC\uD568\uB41C \uC601\uC5ED\uC744 \uD398\uC774\uC9C0\uC5D0\uC11C \uC120\uD0DD\uD558\uC138\uC694. \uD45C\uAC00 \uC544\uB2CC \uBB38\uB2E8\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uC2B5\uB2C8\uB2E4.",
+  "table.tableLabel": (p) => `\uD45C #${p.index}`,
+  "table.cellLabel": (p) => `\uC140 (${p.row}, ${p.col})`,
+  "table.setCell": "\uC140 \uC124\uC815",
+  "table.mergeAnchor": "\uBCD1\uD569 \uAE30\uC900 \uC9C0\uC815",
+  "table.mergeWithAnchor": "\uAE30\uC900 \uC140\uACFC \uBCD1\uD569",
+  "table.splitCell": "\uC140 \uBD84\uD560",
+  "table.rowsCols": "\uD589/\uC5F4",
+  "table.addRow": "\uD589 \uCD94\uAC00",
+  "table.addCol": "\uC5F4 \uCD94\uAC00",
+  "table.deleteRow": "\uD589 \uC0AD\uC81C",
+  "table.deleteCol": "\uC5F4 \uC0AD\uC81C",
+  "table.deleteTable": "\uD45C \uC0AD\uC81C",
+  "fields.panelAria": "\uD544\uB4DC",
+  "fields.hint": "\uBB38\uC11C\uC5D0\uC11C {{\uC774\uB984}} \uD615\uD0DC\uC758 \uD544\uB4DC \uC790\uB9AC\uD45C\uC2DC\uC790\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.",
+  "fields.valuePlaceholder": "\uC0C8 \uAC12",
+  "fields.fieldValueAria": (p) => `\uD544\uB4DC ${p.name} \uAC12`,
+  "fields.setValue": "\uC124\uC815"
+};
+function createT(locale, messages) {
+  const table = {
+    ...en,
+    ...locale === "ko" ? ko : {},
+    ...messages
+  };
+  return ((key, params) => {
+    const value = table[key];
+    return typeof value === "function" ? value(params) : value;
+  });
+}
+
+// src/HwpEditor.tsx
+import { segmentText as segmentText5 } from "@hwp-editor/core";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var RENDER_SVG = { format: "svg" };
+var HwpEditor = forwardRef(
+  function HwpEditor2(props, ref) {
+    const {
+      engine,
+      file,
+      locale = "en",
+      messages,
+      readOnly = false,
+      onReady,
+      onError,
+      onChange,
+      onDirtyChange,
+      className,
+      style
+    } = props;
+    const cbRef = useRef({ onReady, onError, onChange, onDirtyChange });
+    useEffect3(() => {
+      cbRef.current = { onReady, onError, onChange, onDirtyChange };
+    });
+    const emitReady = useCallback((document) => {
+      cbRef.current.onReady?.(document);
+    }, []);
+    const emitError = useCallback((error) => {
+      cbRef.current.onError?.(error);
+    }, []);
+    const emitChange = useCallback((document) => {
+      cbRef.current.onChange?.(document);
+    }, []);
+    const emitDirty = useCallback((dirty2) => {
+      cbRef.current.onDirtyChange?.(dirty2);
+    }, []);
+    const t = useMemo3(() => createT(locale, messages), [locale, messages]);
+    const [store] = useState5(() => createStore());
+    const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+    const [envelope, setEnvelope] = useState5(null);
+    const [capabilities, setCapabilities] = useState5(null);
+    const [validation, setValidation] = useState5(null);
+    const [loadError, setLoadError] = useState5(null);
+    const [tab, setTab] = useState5("para");
+    const [composing, setComposing] = useState5(false);
+    useEffect3(() => {
+      let cancelled = false;
+      if (file === null) {
+        setEnvelope(null);
+        setValidation(null);
+        setLoadError(null);
+        return;
+      }
+      (async () => {
+        try {
+          const caps = await engine.capabilities();
+          const [nextEnvelope, pages, report] = await Promise.all([
+            engine.read(file),
+            engine.render(file, RENDER_SVG),
+            engine.validate(file).catch(() => null)
+          ]);
+          if (cancelled) return;
+          setCapabilities(caps);
+          setEnvelope(nextEnvelope);
+          setValidation(report);
+          setLoadError(null);
+          store.dispatch({ type: "load", document: file, pages });
+          emitReady(file);
+        } catch (e) {
+          if (cancelled) return;
+          setLoadError(toEditorError(e));
+          emitError(e);
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }, [engine, file, store]);
+    const editable = !readOnly && (capabilities?.editable ?? true);
+    useEffect3(() => {
+      if (envelope === null || state.selection === null) return;
+      const segment = segmentAtRef4(envelope, state.selection);
+      if (segment === void 0) return;
+      setTab(
+        isTableSlice(segmentText5(envelope, segment)) ? "table" : "para"
+      );
+    }, [envelope, state.selection]);
+    const dirty = state.pendingOps.length > 0;
+    useEffect3(() => {
+      emitDirty(dirty);
+    }, [dirty]);
+    const applyPendingOps = useCallback(() => {
+      const snapshot = store.getState();
+      if (snapshot.document === null || snapshot.pendingOps.length === 0 || snapshot.status === "applying" || !editable) {
+        return Promise.resolve();
+      }
+      store.dispatch({ type: "applyStarted" });
+      return (async () => {
+        try {
+          const next = await engine.edit(snapshot.document, snapshot.pendingOps, {
+            verify: true
+          });
+          const [nextEnvelope, pages, report] = await Promise.all([
+            engine.read(next),
+            engine.render(next, RENDER_SVG),
+            engine.validate(next).catch(() => null)
+          ]);
+          setEnvelope(nextEnvelope);
+          setValidation(report);
+          store.dispatch({ type: "applySucceeded", document: next, pages });
+          emitChange(next);
+        } catch (e) {
+          store.dispatch({ type: "applyFailed", error: toEditorError(e) });
+          emitError(e);
+        }
+      })();
+    }, [editable, engine, store]);
+    const revert = useCallback(() => {
+      const snapshot = store.getState();
+      const previous = snapshot.snapshots[snapshot.snapshots.length - 1];
+      if (previous === void 0) return Promise.resolve();
+      return (async () => {
+        try {
+          const [nextEnvelope, pages, report] = await Promise.all([
+            engine.read(previous),
+            engine.render(previous, RENDER_SVG),
+            engine.validate(previous).catch(() => null)
+          ]);
+          const now = store.getState();
+          if (now.snapshots[now.snapshots.length - 1] !== previous) return;
+          store.dispatch({ type: "undo" });
+          setEnvelope(nextEnvelope);
+          if (report !== null) setValidation(report);
+          store.dispatch({ type: "setPages", pages });
+          emitChange(previous);
+        } catch (e) {
+          setLoadError(toEditorError(e));
+          emitError(e);
+        }
+      })();
+    }, [engine, store]);
+    const refresh = useCallback(async () => {
+      const snapshot = store.getState();
+      if (snapshot.document === null) return;
+      try {
+        const [nextEnvelope, pages, report] = await Promise.all([
+          engine.read(snapshot.document),
+          engine.render(snapshot.document, RENDER_SVG),
+          engine.validate(snapshot.document).catch(() => null)
+        ]);
+        setEnvelope(nextEnvelope);
+        setValidation(report);
+        store.dispatch({ type: "setPages", pages });
+      } catch (e) {
+        setLoadError(toEditorError(e));
+        emitError(e);
+        throw e;
+      }
+    }, [engine, store]);
+    const openCompose = useCallback(() => setComposing(true), []);
+    useImperativeHandle(
+      ref,
+      () => ({ apply: applyPendingOps, revert, refresh, openCompose }),
+      [applyPendingOps, revert, refresh, openCompose]
+    );
+    const contextValue = useMemo3(
+      () => ({
+        engine,
+        store,
+        state,
+        envelope,
+        capabilities,
+        editable,
+        validation,
+        applyPendingOps,
+        refresh,
+        openCompose,
+        t,
+        // Always defined now, and stable: a widening, since every consumer
+        // already calls it as `onError?.(e)` and it no-ops when the host
+        // supplied no callback. The payload is unchanged.
+        onError: emitError
+      }),
+      [
+        engine,
+        store,
+        state,
+        envelope,
+        capabilities,
+        editable,
+        validation,
+        applyPendingOps,
+        refresh,
+        openCompose,
+        t
+      ]
+    );
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        store.dispatch({ type: "select", selection: null });
+      } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        void applyPendingOps();
+      }
+    };
+    const rootClass = "hwped hwped-root" + (className !== void 0 ? ` ${className}` : "");
+    return /* @__PURE__ */ jsx7(HwpEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: rootClass,
+        style,
+        onKeyDown,
+        "data-status": state.status,
+        lang: locale,
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "header",
+            {
+              className: "hwped-toolbar",
+              role: "toolbar",
+              "aria-label": t("toolbar.toolsAria"),
+              children: [
+                /* @__PURE__ */ jsx7("span", { className: "hwped-title", children: state.document?.name ?? "hwp-editor" }),
+                !editable && /* @__PURE__ */ jsxs7(
+                  "span",
+                  {
+                    className: "hwped-notice",
+                    role: "note",
+                    ...capabilities?.reason !== void 0 ? { title: capabilities.reason } : {},
+                    children: [
+                      t("toolbar.readOnly"),
+                      capabilities?.editable === false && (capabilities.reason !== void 0 ? `: ${capabilities.reason}` : ` (${t("error.kind.protected")})`)
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx7("span", { className: "hwped-spacer" }),
+                validation !== null && /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: validation.valid ? "hwped-badge hwped-badge-ok" : "hwped-badge hwped-badge-err",
+                    role: "status",
+                    "aria-label": t("validation.aria"),
+                    children: validation.valid ? t("validation.valid") : t("validation.errors", { count: validation.errors.length })
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: "hwped-count",
+                    "aria-label": t("toolbar.pendingEdits", {
+                      count: state.pendingOps.length
+                    }),
+                    children: t("toolbar.pendingEdits", { count: state.pendingOps.length })
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hwped-btn",
+                    onClick: () => void revert(),
+                    disabled: state.snapshots.length === 0 || state.status === "applying",
+                    children: t("toolbar.revert")
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hwped-btn hwped-btn-primary",
+                    onClick: () => void applyPendingOps(),
+                    disabled: !dirty || !editable || state.status === "applying",
+                    children: state.status === "applying" ? t("toolbar.applying") : t("toolbar.applyWithCount", {
+                      count: state.pendingOps.length
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hwped-btn",
+                    onClick: () => setComposing(true),
+                    children: t("toolbar.newDocument")
+                  }
+                )
+              ]
+            }
+          ),
+          state.status === "error" && state.error !== null && /* @__PURE__ */ jsx7(ErrorLine, { prefix: t("error.prefix.apply"), ...state.error }),
+          loadError !== null && /* @__PURE__ */ jsx7(ErrorLine, { prefix: t("error.prefix.load"), ...loadError }),
+          /* @__PURE__ */ jsxs7("div", { className: "hwped-main", children: [
+            state.document === null ? /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: "hwped-canvas",
+                role: "main",
+                "aria-label": t("canvas.aria"),
+                children: /* @__PURE__ */ jsxs7("div", { className: "hwped-empty", children: [
+                  /* @__PURE__ */ jsx7("p", { children: t("canvas.empty") }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "hwped-btn hwped-btn-primary",
+                      onClick: () => setComposing(true),
+                      children: t("canvas.createCta")
+                    }
+                  )
+                ] })
+              }
+            ) : /* @__PURE__ */ jsx7(PageCanvas, {}),
+            /* @__PURE__ */ jsxs7("aside", { className: "hwped-side", "aria-label": t("side.panelAria"), children: [
+              /* @__PURE__ */ jsx7("div", { className: "hwped-tabs", role: "tablist", children: [
+                ["para", t("tabs.para")],
+                ["table", t("tabs.table")],
+                ["fields", t("tabs.fields")]
+              ].map(([value, label]) => /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": tab === value,
+                  className: "hwped-tab" + (tab === value ? " hwped-tab-active" : ""),
+                  onClick: () => setTab(value),
+                  children: label
+                },
+                value
+              )) }),
+              tab === "para" && /* @__PURE__ */ jsx7(SegmentInspector, {}),
+              tab === "table" && /* @__PURE__ */ jsx7(TableGrid, {}),
+              tab === "fields" && /* @__PURE__ */ jsx7(FieldsPanel, {})
+            ] })
+          ] }),
+          composing && /* @__PURE__ */ jsx7(
+            ComposePanel,
+            {
+              onClose: () => setComposing(false),
+              onComposed: (document) => {
+                setComposing(false);
+                emitChange(document);
+                void (async () => {
+                  try {
+                    const [nextEnvelope, pages] = await Promise.all([
+                      engine.read(document),
+                      engine.render(document, RENDER_SVG)
+                    ]);
+                    setEnvelope(nextEnvelope);
+                    store.dispatch({ type: "load", document, pages });
+                  } catch (e) {
+                    setLoadError(toEditorError(e));
+                    emitError(e);
+                  }
+                })();
+              }
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+export {
+  COMPOSE_PRESETS,
+  ComposePanel,
+  FieldsPanel,
+  HwpEditor,
+  PageCanvas,
+  SegmentInspector,
+  TableGrid,
+  bodyToBlocks,
+  buildDocumentSpec,
+  classifyEngineError,
+  clickOffset,
+  createT,
+  en,
+  extractFieldSlots,
+  findTables,
+  isTableSlice,
+  ko,
+  nearestSegment,
+  parseMarkdownTable,
+  plainSegmentText,
+  sanitizeSvg,
+  segmentBand,
+  tableAtRef,
+  useHwpEditorContext
+};
+//# sourceMappingURL=index.js.map