@ubermensch1218/hwpxeditor 0.1.0

package/dist/index.js

@@ -0,0 +1,2563 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/editor/Editor.tsx
+import { useEffect as useEffect3 } from "react";
+
+// src/lib/store.ts
+import { create } from "zustand";
+
+// src/lib/view-model.ts
+import { parseHeaderXml, serializeXml } from "@ubermensch1218/hwpxcore";
+
+// src/lib/hwp-units.ts
+var HWP_UNITS_PER_INCH = 7200;
+var PX_PER_INCH = 96;
+var MM_PER_INCH = 25.4;
+function hwpToPx(hwpUnit) {
+  return hwpUnit * PX_PER_INCH / HWP_UNITS_PER_INCH;
+}
+function pxToHwp(px) {
+  return Math.round(px * HWP_UNITS_PER_INCH / PX_PER_INCH);
+}
+function hwpToMm(hwpUnit) {
+  return hwpUnit * MM_PER_INCH / HWP_UNITS_PER_INCH;
+}
+function mmToHwp(mm) {
+  return Math.round(mm * HWP_UNITS_PER_INCH / MM_PER_INCH);
+}
+
+// src/lib/image-extractor.ts
+function extractImages(pkg) {
+  var _a, _b;
+  const images = /* @__PURE__ */ new Map();
+  const partNames = pkg.partNames();
+  for (const name of partNames) {
+    if (!name.startsWith("BinData/")) continue;
+    const ext = (_b = (_a = name.split(".").pop()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
+    let mediaType = "application/octet-stream";
+    if (ext === "png") mediaType = "image/png";
+    else if (ext === "jpg" || ext === "jpeg") mediaType = "image/jpeg";
+    else if (ext === "gif") mediaType = "image/gif";
+    else if (ext === "bmp") mediaType = "image/bmp";
+    else if (ext === "svg") mediaType = "image/svg+xml";
+    else if (ext === "webp") mediaType = "image/webp";
+    else if (ext === "tif" || ext === "tiff") mediaType = "image/tiff";
+    else if (ext === "emf") mediaType = "image/x-emf";
+    else if (ext === "wmf") mediaType = "image/x-wmf";
+    try {
+      const data = pkg.getPart(name);
+      const base64 = uint8ToBase64(data);
+      const dataUrl = `data:${mediaType};base64,${base64}`;
+      const fileName = name.replace("BinData/", "");
+      images.set(fileName, dataUrl);
+    } catch (e) {
+    }
+  }
+  return images;
+}
+function uint8ToBase64(bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+// src/lib/view-model.ts
+function extractRunStyle(style) {
+  var _a, _b, _c, _d;
+  if (!style) {
+    return {
+      bold: false,
+      italic: false,
+      underline: false,
+      strikethrough: false,
+      color: null,
+      fontFamily: null,
+      fontSize: null,
+      highlightColor: null,
+      letterSpacing: null
+    };
+  }
+  const bold = style.attributes["bold"] === "1";
+  const italic = style.attributes["italic"] === "1";
+  const underlineChild = style.childAttributes["underline"];
+  const underline = underlineChild != null && underlineChild["type"] != null && underlineChild["type"] !== "NONE";
+  const strikeChild = style.childAttributes["strikeout"];
+  const strikethrough = strikeChild != null && strikeChild["type"] != null && strikeChild["type"] !== "NONE";
+  const color = (_a = style.attributes["textColor"]) != null ? _a : null;
+  const highlightColor = (_b = style.attributes["shadeColor"]) != null ? _b : null;
+  let fontFamily = null;
+  const fontRef = style.childAttributes["fontRef"];
+  if (fontRef) {
+    fontFamily = (_d = (_c = fontRef["hangul"]) != null ? _c : fontRef["latin"]) != null ? _d : null;
+  }
+  let fontSize = null;
+  const sizeStr = style.attributes["height"];
+  if (sizeStr) {
+    const hwpVal = parseInt(sizeStr, 10);
+    if (!isNaN(hwpVal)) fontSize = hwpVal / 100;
+  }
+  let letterSpacing = null;
+  const spacingStr = style.attributes["spacing"];
+  if (spacingStr) {
+    const val = parseInt(spacingStr, 10);
+    if (!isNaN(val) && val !== 0) letterSpacing = val;
+  }
+  return { bold, italic, underline, strikethrough, color, fontFamily, fontSize, highlightColor, letterSpacing };
+}
+function findPictureRefs(runElement) {
+  var _a, _b;
+  const results = [];
+  const children = runElement.childNodes;
+  for (let i = 0; i < children.length; i++) {
+    const child = children.item(i);
+    if (!child || child.nodeType !== 1) continue;
+    const el = child;
+    const localName = el.localName || el.nodeName.split(":").pop() || "";
+    if (localName !== "pic") continue;
+    let width = 0;
+    let height = 0;
+    const picChildren = el.childNodes;
+    for (let j = 0; j < picChildren.length; j++) {
+      const pc = picChildren.item(j);
+      if (!pc || pc.nodeType !== 1) continue;
+      const pel = pc;
+      const pName = pel.localName || pel.nodeName.split(":").pop() || "";
+      if (pName === "curSz") {
+        width = parseInt((_a = pel.getAttribute("width")) != null ? _a : "0", 10);
+        height = parseInt((_b = pel.getAttribute("height")) != null ? _b : "0", 10);
+      }
+      if (pName === "img") {
+        const ref = pel.getAttribute("binaryItemIDRef");
+        if (ref) results.push({ binaryItemIdRef: ref, width, height });
+      }
+    }
+    const allDescendants = el.getElementsByTagName("*");
+    for (let k = 0; k < allDescendants.length; k++) {
+      const desc = allDescendants.item(k);
+      if (!desc) continue;
+      const dName = desc.localName || desc.nodeName.split(":").pop() || "";
+      if (dName === "img") {
+        const ref = desc.getAttribute("binaryItemIDRef");
+        if (ref && !results.some((r) => r.binaryItemIdRef === ref)) {
+          results.push({ binaryItemIdRef: ref, width, height });
+        }
+      }
+    }
+  }
+  return results;
+}
+function buildParaPrLookup(doc) {
+  var _a;
+  const lookup = /* @__PURE__ */ new Map();
+  try {
+    const headers = doc.headers;
+    if (headers.length === 0) return lookup;
+    const headerEl = headers[0].element;
+    const xml = serializeXml(headerEl);
+    const parsed = parseHeaderXml(xml);
+    if (!((_a = parsed.refList) == null ? void 0 : _a.paraProperties)) return lookup;
+    for (const prop of parsed.refList.paraProperties.properties) {
+      if (prop.rawId) lookup.set(prop.rawId, prop);
+      if (prop.id != null) lookup.set(String(prop.id), prop);
+    }
+  } catch (e) {
+  }
+  return lookup;
+}
+function buildViewModel(doc) {
+  var _a, _b, _c;
+  const imageMap = extractImages(doc.package);
+  const paraPrLookup = buildParaPrLookup(doc);
+  const sections = [];
+  let globalParaIndex = 0;
+  for (let sIdx = 0; sIdx < doc.sections.length; sIdx++) {
+    const section = doc.sections[sIdx];
+    const props = section.properties;
+    const pageSize = props.pageSize;
+    const pageMargins = props.pageMargins;
+    const sectionVM = {
+      pageWidthPx: hwpToPx(pageSize.width),
+      pageHeightPx: hwpToPx(pageSize.height),
+      marginTopPx: hwpToPx(pageMargins.top),
+      marginBottomPx: hwpToPx(pageMargins.bottom),
+      marginLeftPx: hwpToPx(pageMargins.left),
+      marginRightPx: hwpToPx(pageMargins.right),
+      paragraphs: [],
+      sectionIndex: sIdx
+    };
+    const paragraphs = section.paragraphs;
+    for (const para of paragraphs) {
+      const runs = [];
+      const images = [];
+      for (const run of para.runs) {
+        const style = run.style;
+        const {
+          bold,
+          italic,
+          underline,
+          strikethrough,
+          color,
+          fontFamily,
+          fontSize,
+          highlightColor,
+          letterSpacing
+        } = extractRunStyle(style);
+        const text = run.text;
+        if (text) {
+          runs.push({
+            text,
+            bold,
+            italic,
+            underline,
+            strikethrough,
+            color,
+            fontFamily,
+            fontSize,
+            highlightColor,
+            letterSpacing,
+            charPrIdRef: run.charPrIdRef
+          });
+        }
+        const picRefs = findPictureRefs(run.element);
+        for (const ref of picRefs) {
+          const dataUrl = imageMap.get(ref.binaryItemIdRef);
+          if (dataUrl) {
+            images.push({
+              dataUrl,
+              widthPx: hwpToPx(ref.width),
+              heightPx: hwpToPx(ref.height),
+              binaryItemIdRef: ref.binaryItemIdRef
+            });
+          }
+        }
+      }
+      const tables = [];
+      const paraTables = para.tables;
+      for (let tIdx = 0; tIdx < paraTables.length; tIdx++) {
+        const table = paraTables[tIdx];
+        const rowCount = table.rowCount;
+        const colCount = table.columnCount;
+        let cellGrid = [];
+        try {
+          cellGrid = table.getCellMap();
+        } catch (e) {
+          continue;
+        }
+        const cellsVM = [];
+        for (let r = 0; r < rowCount; r++) {
+          const row = [];
+          for (let c = 0; c < colCount; c++) {
+            const pos = (_a = cellGrid[r]) == null ? void 0 : _a[c];
+            if (!pos) {
+              row.push({
+                row: r,
+                col: c,
+                rowSpan: 1,
+                colSpan: 1,
+                widthPx: 0,
+                heightPx: 0,
+                text: "",
+                isAnchor: false
+              });
+              continue;
+            }
+            const isAnchor = pos.anchor[0] === r && pos.anchor[1] === c;
+            row.push({
+              row: r,
+              col: c,
+              rowSpan: pos.span[0],
+              colSpan: pos.span[1],
+              widthPx: hwpToPx(pos.cell.width),
+              heightPx: hwpToPx(pos.cell.height),
+              text: isAnchor ? pos.cell.text : "",
+              isAnchor
+            });
+          }
+          cellsVM.push(row);
+        }
+        tables.push({
+          rowCount,
+          colCount,
+          cells: cellsVM,
+          tableIndex: tIdx
+        });
+      }
+      let alignment = "LEFT";
+      let lineSpacing = 1.6;
+      let spacingBefore = 0;
+      let spacingAfter = 0;
+      let firstLineIndent = 0;
+      let marginLeftPx = 0;
+      let marginRightPx = 0;
+      const paraPrIdRef = para.paraPrIdRef;
+      if (paraPrIdRef) {
+        const paraPr = paraPrLookup.get(paraPrIdRef);
+        if (paraPr) {
+          if ((_b = paraPr.align) == null ? void 0 : _b.horizontal) {
+            alignment = paraPr.align.horizontal.toUpperCase();
+          }
+          if (((_c = paraPr.lineSpacing) == null ? void 0 : _c.value) != null) {
+            lineSpacing = paraPr.lineSpacing.value / 100;
+          }
+          if (paraPr.margin) {
+            if (paraPr.margin.left) {
+              marginLeftPx = hwpToPx(parseInt(paraPr.margin.left, 10) || 0);
+            }
+            if (paraPr.margin.right) {
+              marginRightPx = hwpToPx(parseInt(paraPr.margin.right, 10) || 0);
+            }
+            if (paraPr.margin.intent) {
+              firstLineIndent = hwpToPx(parseInt(paraPr.margin.intent, 10) || 0);
+            }
+            if (paraPr.margin.prev) {
+              spacingBefore = hwpToPx(parseInt(paraPr.margin.prev, 10) || 0);
+            }
+            if (paraPr.margin.next) {
+              spacingAfter = hwpToPx(parseInt(paraPr.margin.next, 10) || 0);
+            }
+          }
+        }
+      }
+      sectionVM.paragraphs.push({
+        runs,
+        tables,
+        images,
+        alignment,
+        lineSpacing,
+        spacingBefore,
+        spacingAfter,
+        firstLineIndent,
+        marginLeftPx,
+        marginRightPx,
+        paragraphIndex: globalParaIndex
+      });
+      globalParaIndex++;
+    }
+    sections.push(sectionVM);
+  }
+  return { sections };
+}
+
+// src/lib/format-bridge.ts
+import {
+  parseHeaderXml as parseHeaderXml2
+} from "@ubermensch1218/hwpxcore";
+import { serializeXml as serializeXml2 } from "@ubermensch1218/hwpxcore";
+function getParsedHeader(doc) {
+  const headers = doc.headers;
+  if (headers.length === 0) return null;
+  const headerEl = headers[0].element;
+  try {
+    const xml = serializeXml2(headerEl);
+    return parseHeaderXml2(xml);
+  } catch (e) {
+    return null;
+  }
+}
+function readCharFormat(style) {
+  var _a, _b, _c, _d;
+  const result = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    fontFamily: null,
+    fontSize: null,
+    textColor: null,
+    highlightColor: null,
+    letterSpacing: null
+  };
+  if (!style) return result;
+  result.bold = style.attributes["bold"] === "1";
+  result.italic = style.attributes["italic"] === "1";
+  const underlineChild = style.childAttributes["underline"];
+  result.underline = underlineChild != null && underlineChild["type"] != null && underlineChild["type"] !== "NONE";
+  const strikeChild = style.childAttributes["strikeout"];
+  result.strikethrough = strikeChild != null && strikeChild["type"] != null && strikeChild["type"] !== "NONE";
+  result.textColor = (_a = style.attributes["textColor"]) != null ? _a : null;
+  result.highlightColor = (_b = style.attributes["shadeColor"]) != null ? _b : null;
+  const spacing = style.attributes["spacing"];
+  if (spacing) {
+    const val = parseInt(spacing, 10);
+    if (!isNaN(val)) result.letterSpacing = val;
+  }
+  const fontRef = style.childAttributes["fontRef"];
+  if (fontRef) {
+    result.fontFamily = (_d = (_c = fontRef["hangul"]) != null ? _c : fontRef["latin"]) != null ? _d : null;
+  }
+  const sizeStr = style.attributes["height"];
+  if (sizeStr) {
+    const hwpVal = parseInt(sizeStr, 10);
+    if (!isNaN(hwpVal)) result.fontSize = hwpVal / 100;
+  }
+  return result;
+}
+function readParaFormat(doc, paragraph) {
+  var _a, _b, _c;
+  const result = {
+    alignment: "LEFT",
+    lineSpacing: 1.6,
+    spacingBefore: 0,
+    spacingAfter: 0,
+    indentLeft: 0,
+    indentRight: 0,
+    firstLineIndent: 0
+  };
+  const paraPrIdRef = paragraph.paraPrIdRef;
+  if (!paraPrIdRef) return result;
+  const header = getParsedHeader(doc);
+  if (!header) return result;
+  const paraPr = findParaPr(header, paraPrIdRef);
+  if (!paraPr) return result;
+  if ((_a = paraPr.align) == null ? void 0 : _a.horizontal) {
+    const h = paraPr.align.horizontal.toUpperCase();
+    if (h === "LEFT" || h === "CENTER" || h === "RIGHT" || h === "JUSTIFY" || h === "DISTRIBUTE") {
+      result.alignment = h;
+    }
+  }
+  if (((_b = paraPr.lineSpacing) == null ? void 0 : _b.value) != null) {
+    const spacingType = (_c = paraPr.lineSpacing.spacingType) == null ? void 0 : _c.toUpperCase();
+    if (spacingType === "PERCENT" || spacingType === "PROPORTIONAL") {
+      result.lineSpacing = paraPr.lineSpacing.value / 100;
+    } else {
+      result.lineSpacing = paraPr.lineSpacing.value / 100;
+    }
+  }
+  if (paraPr.margin) {
+    if (paraPr.margin.left) {
+      result.indentLeft = parseInt(paraPr.margin.left, 10) || 0;
+    }
+    if (paraPr.margin.right) {
+      result.indentRight = parseInt(paraPr.margin.right, 10) || 0;
+    }
+    if (paraPr.margin.intent) {
+      result.firstLineIndent = parseInt(paraPr.margin.intent, 10) || 0;
+    }
+    if (paraPr.margin.prev) {
+      result.spacingBefore = parseInt(paraPr.margin.prev, 10) || 0;
+    }
+    if (paraPr.margin.next) {
+      result.spacingAfter = parseInt(paraPr.margin.next, 10) || 0;
+    }
+  }
+  return result;
+}
+function findParaPr(header, paraPrIdRef) {
+  var _a;
+  if (!((_a = header.refList) == null ? void 0 : _a.paraProperties)) return null;
+  for (const prop of header.refList.paraProperties.properties) {
+    if (prop.rawId === paraPrIdRef) return prop;
+    if (prop.id != null && String(prop.id) === paraPrIdRef) return prop;
+  }
+  return null;
+}
+function readStyleInfo(doc, paragraph) {
+  var _a;
+  const styleIdRef = paragraph.styleIdRef;
+  if (!styleIdRef) return { styleName: null, styleId: null };
+  const header = getParsedHeader(doc);
+  if (!((_a = header == null ? void 0 : header.refList) == null ? void 0 : _a.styles)) return { styleName: null, styleId: null };
+  for (const style of header.refList.styles.styles) {
+    if (style.rawId === styleIdRef || style.id != null && String(style.id) === styleIdRef) {
+      return { styleName: style.name, styleId: styleIdRef };
+    }
+  }
+  return { styleName: null, styleId: styleIdRef };
+}
+function getDocumentStyles(doc) {
+  var _a;
+  const header = getParsedHeader(doc);
+  if (!((_a = header == null ? void 0 : header.refList) == null ? void 0 : _a.styles)) return [];
+  return header.refList.styles.styles;
+}
+function readFormatFromSelection(doc, sectionIndex, paragraphIndex) {
+  const section = doc.sections[sectionIndex];
+  if (!section) {
+    return {
+      char: readCharFormat(null),
+      para: {
+        alignment: "LEFT",
+        lineSpacing: 1.6,
+        spacingBefore: 0,
+        spacingAfter: 0,
+        indentLeft: 0,
+        indentRight: 0,
+        firstLineIndent: 0
+      }
+    };
+  }
+  const paras = section.paragraphs;
+  const para = paras[paragraphIndex];
+  if (!para) {
+    return {
+      char: readCharFormat(null),
+      para: {
+        alignment: "LEFT",
+        lineSpacing: 1.6,
+        spacingBefore: 0,
+        spacingAfter: 0,
+        indentLeft: 0,
+        indentRight: 0,
+        firstLineIndent: 0
+      }
+    };
+  }
+  const runs = para.runs;
+  let charStyle = null;
+  if (runs.length > 0) {
+    charStyle = runs[0].style;
+  } else {
+    const charPrIdRef = para.charPrIdRef;
+    if (charPrIdRef) {
+      charStyle = doc.charProperty(charPrIdRef);
+    }
+  }
+  return {
+    char: readCharFormat(charStyle),
+    para: readParaFormat(doc, para)
+  };
+}
+
+// src/lib/store.ts
+var defaultCharFormat = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strikethrough: false,
+  fontFamily: null,
+  fontSize: null,
+  textColor: null,
+  highlightColor: null,
+  letterSpacing: null
+};
+var defaultParaFormat = {
+  alignment: "LEFT",
+  lineSpacing: 1.6,
+  spacingBefore: 0,
+  spacingAfter: 0,
+  indentLeft: 0,
+  indentRight: 0,
+  firstLineIndent: 0
+};
+var useEditorStore = create((set, get) => ({
+  doc: null,
+  viewModel: null,
+  revision: 0,
+  selection: null,
+  activeFormat: { bold: false, italic: false, underline: false },
+  extendedFormat: { char: defaultCharFormat, para: defaultParaFormat },
+  uiState: { sidebarOpen: true, sidebarTab: "char" },
+  loading: false,
+  error: null,
+  setDocument: (doc) => {
+    const viewModel = buildViewModel(doc);
+    set({ doc, viewModel, revision: get().revision + 1, error: null });
+  },
+  rebuild: () => {
+    const { doc } = get();
+    if (!doc) return;
+    const viewModel = buildViewModel(doc);
+    set({ viewModel, revision: get().revision + 1 });
+  },
+  setSelection: (selection) => {
+    set({ selection });
+    if (selection) {
+      setTimeout(() => get().refreshExtendedFormat(), 0);
+    }
+  },
+  setActiveFormat: (fmt) => set((s) => ({ activeFormat: __spreadValues(__spreadValues({}, s.activeFormat), fmt) })),
+  refreshExtendedFormat: () => {
+    const { doc, selection } = get();
+    if (!doc || !selection) return;
+    try {
+      const fmt = readFormatFromSelection(
+        doc,
+        selection.sectionIndex,
+        selection.paragraphIndex
+      );
+      set({
+        extendedFormat: fmt,
+        activeFormat: {
+          bold: fmt.char.bold,
+          italic: fmt.char.italic,
+          underline: fmt.char.underline
+        }
+      });
+    } catch (e) {
+      console.error("refreshExtendedFormat failed:", e);
+    }
+  },
+  // UI actions
+  toggleSidebar: () => set((s) => ({
+    uiState: __spreadProps(__spreadValues({}, s.uiState), { sidebarOpen: !s.uiState.sidebarOpen })
+  })),
+  setSidebarTab: (tab) => set((s) => ({
+    uiState: __spreadProps(__spreadValues({}, s.uiState), { sidebarTab: tab })
+  })),
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error }),
+  updateParagraphText: (sectionIndex, paragraphIndex, text) => {
+    const { doc } = get();
+    if (!doc) return;
+    try {
+      const section = doc.sections[sectionIndex];
+      if (!section) return;
+      const paras = section.paragraphs;
+      const para = paras[paragraphIndex];
+      if (!para) return;
+      para.text = text;
+      get().rebuild();
+    } catch (e) {
+      console.error("updateParagraphText failed:", e);
+    }
+  },
+  updateCellText: (sectionIndex, paragraphIndex, tableIndex, row, col, text) => {
+    const { doc } = get();
+    if (!doc) return;
+    try {
+      const section = doc.sections[sectionIndex];
+      if (!section) return;
+      const paras = section.paragraphs;
+      const para = paras[paragraphIndex];
+      if (!para) return;
+      const table = para.tables[tableIndex];
+      if (!table) return;
+      table.setCellText(row, col, text);
+      get().rebuild();
+    } catch (e) {
+      console.error("updateCellText failed:", e);
+    }
+  },
+  toggleBold: () => {
+    const { doc, activeFormat, selection } = get();
+    if (!doc || !selection) return;
+    const newBold = !activeFormat.bold;
+    try {
+      const charPrIdRef = doc.ensureRunStyle({
+        bold: newBold,
+        italic: activeFormat.italic,
+        underline: activeFormat.underline
+      });
+      const section = doc.sections[selection.sectionIndex];
+      if (!section) return;
+      const para = section.paragraphs[selection.paragraphIndex];
+      if (!para) return;
+      para.charPrIdRef = charPrIdRef;
+      set({ activeFormat: __spreadProps(__spreadValues({}, activeFormat), { bold: newBold }) });
+      get().rebuild();
+    } catch (e) {
+      console.error("toggleBold failed:", e);
+    }
+  },
+  toggleItalic: () => {
+    const { doc, activeFormat, selection } = get();
+    if (!doc || !selection) return;
+    const newItalic = !activeFormat.italic;
+    try {
+      const charPrIdRef = doc.ensureRunStyle({
+        bold: activeFormat.bold,
+        italic: newItalic,
+        underline: activeFormat.underline
+      });
+      const section = doc.sections[selection.sectionIndex];
+      if (!section) return;
+      const para = section.paragraphs[selection.paragraphIndex];
+      if (!para) return;
+      para.charPrIdRef = charPrIdRef;
+      set({ activeFormat: __spreadProps(__spreadValues({}, activeFormat), { italic: newItalic }) });
+      get().rebuild();
+    } catch (e) {
+      console.error("toggleItalic failed:", e);
+    }
+  },
+  toggleUnderline: () => {
+    const { doc, activeFormat, selection } = get();
+    if (!doc || !selection) return;
+    const newUnderline = !activeFormat.underline;
+    try {
+      const charPrIdRef = doc.ensureRunStyle({
+        bold: activeFormat.bold,
+        italic: activeFormat.italic,
+        underline: newUnderline
+      });
+      const section = doc.sections[selection.sectionIndex];
+      if (!section) return;
+      const para = section.paragraphs[selection.paragraphIndex];
+      if (!para) return;
+      para.charPrIdRef = charPrIdRef;
+      set({ activeFormat: __spreadProps(__spreadValues({}, activeFormat), { underline: newUnderline }) });
+      get().rebuild();
+    } catch (e) {
+      console.error("toggleUnderline failed:", e);
+    }
+  },
+  addParagraph: (text = "") => {
+    const { doc } = get();
+    if (!doc) return;
+    try {
+      doc.addParagraph(text);
+      get().rebuild();
+    } catch (e) {
+      console.error("addParagraph failed:", e);
+    }
+  },
+  addTable: (sectionIndex, paragraphIndex, rows, cols) => {
+    const { doc } = get();
+    if (!doc) return;
+    try {
+      const section = doc.sections[sectionIndex];
+      if (!section) return;
+      const para = section.paragraphs[paragraphIndex];
+      if (!para) return;
+      para.addTable(rows, cols);
+      get().rebuild();
+    } catch (e) {
+      console.error("addTable failed:", e);
+    }
+  },
+  insertImage: (data, mediaType, widthMm, heightMm) => {
+    const { doc } = get();
+    if (!doc) return;
+    try {
+      doc.addImage(data, { mediaType, widthMm, heightMm });
+      get().rebuild();
+    } catch (e) {
+      console.error("insertImage failed:", e);
+    }
+  },
+  saveDocument: async () => {
+    const { doc } = get();
+    if (!doc) return;
+    try {
+      set({ loading: true });
+      const bytes = await doc.save();
+      const blob = new Blob([bytes], {
+        type: "application/vnd.hancom.hwpx"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "document.hwpx";
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      console.error("save failed:", e);
+      set({ error: "\uBB38\uC11C \uC800\uC7A5\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4." });
+    } finally {
+      set({ loading: false });
+    }
+  }
+}));
+
+// src/lib/skeleton-loader.ts
+import { setSkeletonHwpx, HwpxDocument } from "@ubermensch1218/hwpxcore";
+var loaded = false;
+async function ensureSkeletonLoaded() {
+  if (loaded) return;
+  const res = await fetch("/Skeleton.hwpx");
+  if (!res.ok) throw new Error(`Failed to fetch Skeleton.hwpx: ${res.status}`);
+  const buf = await res.arrayBuffer();
+  setSkeletonHwpx(new Uint8Array(buf));
+  loaded = true;
+}
+async function createNewDocument() {
+  await ensureSkeletonLoaded();
+  const res = await fetch("/Skeleton.hwpx");
+  const buf = await res.arrayBuffer();
+  return HwpxDocument.open(buf);
+}
+
+// src/components/toolbar/ClipboardGroup.tsx
+import { Clipboard, Copy, ClipboardPaste, Paintbrush } from "lucide-react";
+
+// src/components/toolbar/ToolbarButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToolbarButton({
+  icon,
+  label,
+  active,
+  disabled,
+  onClick,
+  title,
+  size = "sm",
+  className = ""
+}) {
+  const sizeClass = size === "md" ? "p-2" : "p-1.5";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      disabled,
+      onClick,
+      title,
+      className: `${sizeClass} rounded transition-colors flex items-center gap-1 ${active ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100"} disabled:opacity-40 disabled:cursor-not-allowed ${className}`,
+      children: [
+        icon,
+        label && /* @__PURE__ */ jsx("span", { className: "text-xs", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/toolbar/RibbonGroup.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RibbonGroup({ label, children }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center border-r border-gray-200 px-2 last:border-r-0", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-0.5 py-1", children }),
+    /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-gray-400 pb-0.5", children: label })
+  ] });
+}
+
+// src/components/toolbar/ClipboardGroup.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ClipboardGroup() {
+  return /* @__PURE__ */ jsxs3(RibbonGroup, { label: "\uD074\uB9BD\uBCF4\uB4DC", children: [
+    /* @__PURE__ */ jsx3(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx3(Clipboard, { className: "w-4 h-4" }),
+        title: "\uC624\uB824\uB450\uAE30 (Ctrl+X)",
+        onClick: () => document.execCommand("cut")
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx3(Copy, { className: "w-4 h-4" }),
+        title: "\uBCF5\uC0AC (Ctrl+C)",
+        onClick: () => document.execCommand("copy")
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx3(ClipboardPaste, { className: "w-4 h-4" }),
+        title: "\uBD99\uC774\uAE30 (Ctrl+V)",
+        onClick: () => document.execCommand("paste")
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx3(Paintbrush, { className: "w-4 h-4" }),
+        title: "\uBAA8\uC591 \uBCF5\uC0AC",
+        disabled: true
+      }
+    )
+  ] });
+}
+
+// src/components/toolbar/InsertGroup.tsx
+import { useCallback, useRef, useState } from "react";
+import { Table, BarChart3, Shapes, ImageIcon, Save } from "lucide-react";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function InsertGroup() {
+  const doc = useEditorStore((s) => s.doc);
+  const selection = useEditorStore((s) => s.selection);
+  const addTable = useEditorStore((s) => s.addTable);
+  const insertImage = useEditorStore((s) => s.insertImage);
+  const saveDocument = useEditorStore((s) => s.saveDocument);
+  const loading = useEditorStore((s) => s.loading);
+  const [showTableDialog, setShowTableDialog] = useState(false);
+  const [tableRows, setTableRows] = useState(3);
+  const [tableCols, setTableCols] = useState(3);
+  const imageInputRef = useRef(null);
+  const disabled = !doc;
+  const handleAddTable = useCallback(() => {
+    if (!selection) return;
+    addTable(selection.sectionIndex, selection.paragraphIndex, tableRows, tableCols);
+    setShowTableDialog(false);
+  }, [selection, tableRows, tableCols, addTable]);
+  const handleImageSelect = useCallback(
+    async (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (!file) return;
+      const buffer = await file.arrayBuffer();
+      const data = new Uint8Array(buffer);
+      const img = new window.Image();
+      const url = URL.createObjectURL(file);
+      img.onload = () => {
+        const widthMm = img.naturalWidth / 96 * 25.4;
+        const heightMm = img.naturalHeight / 96 * 25.4;
+        insertImage(data, file.type, widthMm, heightMm);
+        URL.revokeObjectURL(url);
+      };
+      img.src = url;
+      e.target.value = "";
+    },
+    [insertImage]
+  );
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4(RibbonGroup, { label: "\uC0BD\uC785", children: [
+      /* @__PURE__ */ jsx4(
+        ToolbarButton,
+        {
+          icon: /* @__PURE__ */ jsx4(Table, { className: "w-4 h-4" }),
+          title: "\uD45C \uC0BD\uC785",
+          disabled: disabled || !selection,
+          onClick: () => setShowTableDialog(true)
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        ToolbarButton,
+        {
+          icon: /* @__PURE__ */ jsx4(BarChart3, { className: "w-4 h-4" }),
+          title: "\uCC28\uD2B8 \uC0BD\uC785",
+          disabled: true
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        ToolbarButton,
+        {
+          icon: /* @__PURE__ */ jsx4(Shapes, { className: "w-4 h-4" }),
+          title: "\uB3C4\uD615 \uC0BD\uC785",
+          disabled: true
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        ToolbarButton,
+        {
+          icon: /* @__PURE__ */ jsx4(ImageIcon, { className: "w-4 h-4" }),
+          title: "\uADF8\uB9BC \uC0BD\uC785",
+          disabled,
+          onClick: () => {
+            var _a;
+            return (_a = imageInputRef.current) == null ? void 0 : _a.click();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          ref: imageInputRef,
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: handleImageSelect
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(RibbonGroup, { label: "\uD30C\uC77C", children: /* @__PURE__ */ jsx4(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx4(Save, { className: "w-4 h-4" }),
+        title: "\uC800\uC7A5 (Ctrl+S)",
+        disabled: disabled || loading,
+        onClick: () => saveDocument()
+      }
+    ) }),
+    showTableDialog && /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsxs4("div", { className: "bg-white rounded-lg shadow-xl p-6 min-w-[280px]", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "font-semibold mb-4", children: "\uD45C \uC0BD\uC785" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-sm text-gray-600", children: "\uD589" }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "number",
+              min: 1,
+              max: 50,
+              value: tableRows,
+              onChange: (e) => setTableRows(Number(e.target.value)),
+              className: "border rounded px-2 py-1 w-20"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-sm text-gray-600", children: "\uC5F4" }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "number",
+              min: 1,
+              max: 20,
+              value: tableCols,
+              onChange: (e) => setTableCols(Number(e.target.value)),
+              className: "border rounded px-2 py-1 w-20"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => setShowTableDialog(false),
+            className: "px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded",
+            children: "\uCDE8\uC18C"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: handleAddTable,
+            className: "px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",
+            children: "\uC0BD\uC785"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/toolbar/RibbonToolbar.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function RibbonToolbar() {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-stretch bg-white border-b border-gray-200 px-1 min-h-[52px]", children: [
+    /* @__PURE__ */ jsx5(ClipboardGroup, {}),
+    /* @__PURE__ */ jsx5(InsertGroup, {})
+  ] });
+}
+
+// src/lib/constants.ts
+var FONT_FAMILIES = [
+  "\uB9D1\uC740 \uACE0\uB515",
+  "\uD568\uCD08\uB86C\uB3CB\uC6C0",
+  "\uD568\uCD08\uB86C\uBC14\uD0D5",
+  "\uB098\uB214\uACE0\uB515",
+  "\uB098\uB214\uBA85\uC870",
+  "\uB098\uB214\uBC14\uB978\uACE0\uB515",
+  "\uBC14\uD0D5",
+  "\uB3CB\uC6C0",
+  "\uAD74\uB9BC",
+  "\uAD81\uC11C",
+  "Arial",
+  "Times New Roman",
+  "Courier New",
+  "Verdana",
+  "Georgia"
+];
+var FONT_SIZES = [
+  8,
+  9,
+  10,
+  10.5,
+  11,
+  12,
+  14,
+  16,
+  18,
+  20,
+  22,
+  24,
+  28,
+  32,
+  36,
+  48,
+  72
+];
+var STYLE_PRESETS = [
+  { id: "0", name: "\uBC14\uD0D5\uAE00", engName: "Normal" },
+  { id: "1", name: "\uBCF8\uBB38", engName: "Body" },
+  { id: "2", name: "\uAC1C\uC694 1", engName: "Outline 1" },
+  { id: "3", name: "\uAC1C\uC694 2", engName: "Outline 2" },
+  { id: "4", name: "\uAC1C\uC694 3", engName: "Outline 3" },
+  { id: "5", name: "\uCABD \uBC88\uD638", engName: "Page Number" },
+  { id: "6", name: "\uBA38\uB9AC\uB9D0", engName: "Header" },
+  { id: "7", name: "\uAF2C\uB9AC\uB9D0", engName: "Footer" },
+  { id: "8", name: "\uAC01\uC8FC", engName: "Footnote" },
+  { id: "9", name: "\uBBF8\uC8FC", engName: "Endnote" }
+];
+var ALIGNMENT_OPTIONS = [
+  { value: "LEFT", label: "\uC67C\uCABD \uC815\uB82C", shortcut: "Ctrl+L" },
+  { value: "CENTER", label: "\uAC00\uC6B4\uB370 \uC815\uB82C", shortcut: "Ctrl+E" },
+  { value: "RIGHT", label: "\uC624\uB978\uCABD \uC815\uB82C", shortcut: "Ctrl+R" },
+  { value: "JUSTIFY", label: "\uC591\uCABD \uC815\uB82C", shortcut: "Ctrl+J" },
+  { value: "DISTRIBUTE", label: "\uBC30\uBD84 \uC815\uB82C" }
+];
+var LINE_SPACING_OPTIONS = [
+  { value: 1, label: "1.0" },
+  { value: 1.15, label: "1.15" },
+  { value: 1.5, label: "1.5" },
+  { value: 1.6, label: "1.6" },
+  { value: 2, label: "2.0" },
+  { value: 2.5, label: "2.5" },
+  { value: 3, label: "3.0" }
+];
+var UNDERLINE_TYPES = [
+  "NONE",
+  "SOLID",
+  "DASH",
+  "DOT",
+  "DASH_DOT",
+  "DASH_DOT_DOT",
+  "LONG_DASH",
+  "DOUBLE",
+  "WAVE",
+  "HEAVY_WAVE",
+  "DOUBLE_WAVE"
+];
+var COLOR_PRESETS = [
+  // Row 1: Primary colors
+  "#000000",
+  "#333333",
+  "#555555",
+  "#777777",
+  "#999999",
+  "#BBBBBB",
+  "#DDDDDD",
+  "#FFFFFF",
+  // Row 2: Vivid colors
+  "#FF0000",
+  "#FF6600",
+  "#FFCC00",
+  "#33CC33",
+  "#0099FF",
+  "#3366FF",
+  "#6633CC",
+  "#CC33CC",
+  // Row 3: Pastel colors
+  "#FF9999",
+  "#FFCC99",
+  "#FFFF99",
+  "#CCFFCC",
+  "#99CCFF",
+  "#9999FF",
+  "#CC99FF",
+  "#FF99CC",
+  // Row 4: Dark colors
+  "#CC0000",
+  "#CC6600",
+  "#CC9900",
+  "#009900",
+  "#006699",
+  "#003399",
+  "#330099",
+  "#990066"
+];
+var HIGHLIGHT_COLORS = [
+  { value: "#FFFF00", label: "\uB178\uB791" },
+  { value: "#00FF00", label: "\uC5F0\uB450" },
+  { value: "#00FFFF", label: "\uD558\uB298" },
+  { value: "#FF00FF", label: "\uBD84\uD64D" },
+  { value: "#0000FF", label: "\uD30C\uB791" },
+  { value: "#FF0000", label: "\uBE68\uAC15" },
+  { value: "#008000", label: "\uCD08\uB85D" },
+  { value: "#800080", label: "\uBCF4\uB77C" },
+  { value: "#808080", label: "\uD68C\uC0C9" },
+  { value: "none", label: "\uC5C6\uC74C" }
+];
+
+// src/components/toolbar/ToolbarDropdown.tsx
+import { useState as useState2, useRef as useRef2, useEffect } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ToolbarDropdown({
+  value,
+  options,
+  onChange,
+  disabled,
+  title,
+  className = "",
+  width = "w-28",
+  icon
+}) {
+  var _a, _b;
+  const [open, setOpen] = useState2(false);
+  const ref = useRef2(null);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const selectedLabel = (_b = (_a = options.find((o) => o.value === value)) == null ? void 0 : _a.label) != null ? _b : value;
+  return /* @__PURE__ */ jsxs6("div", { ref, className: `relative ${className}`, title, children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        disabled,
+        onClick: () => setOpen(!open),
+        className: `flex items-center gap-1 ${width} h-7 px-2 text-xs border border-gray-300 rounded bg-white hover:bg-gray-50 text-left disabled:opacity-40 disabled:cursor-not-allowed`,
+        children: [
+          icon,
+          /* @__PURE__ */ jsx6("span", { className: "flex-1 truncate", children: selectedLabel }),
+          /* @__PURE__ */ jsx6("svg", { className: "w-3 h-3 text-gray-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx6("div", { className: "absolute top-full left-0 mt-1 z-50 bg-white border border-gray-200 rounded shadow-lg max-h-64 overflow-auto min-w-full", children: options.map((opt) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        onClick: () => {
+          onChange(opt.value);
+          setOpen(false);
+        },
+        className: `block w-full text-left px-3 py-1.5 text-xs hover:bg-blue-50 ${opt.value === value ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700"}`,
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+}
+
+// src/components/toolbar/StyleSelector.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function StyleSelector({ value, onChange, disabled }) {
+  const options = STYLE_PRESETS.map((s) => ({
+    value: s.id,
+    label: s.name
+  }));
+  return /* @__PURE__ */ jsx7(
+    ToolbarDropdown,
+    {
+      value,
+      options,
+      onChange,
+      disabled,
+      title: "\uC2A4\uD0C0\uC77C",
+      width: "w-24"
+    }
+  );
+}
+
+// src/components/toolbar/FontSelector.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function FontSelector({ value, onChange, disabled }) {
+  const options = FONT_FAMILIES.map((f) => ({
+    value: f,
+    label: f
+  }));
+  return /* @__PURE__ */ jsx8(
+    ToolbarDropdown,
+    {
+      value,
+      options,
+      onChange,
+      disabled,
+      title: "\uAE00\uAF34",
+      width: "w-32"
+    }
+  );
+}
+
+// src/components/toolbar/FontSizeInput.tsx
+import { useState as useState3, useCallback as useCallback2 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function FontSizeInput({ value, onChange, disabled }) {
+  const [editing, setEditing] = useState3(false);
+  const [inputValue, setInputValue] = useState3(String(value));
+  const handleBlur = useCallback2(() => {
+    setEditing(false);
+    const num = parseFloat(inputValue);
+    if (!isNaN(num) && num > 0 && num <= 200) {
+      onChange(num);
+    } else {
+      setInputValue(String(value));
+    }
+  }, [inputValue, value, onChange]);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Enter") {
+        e.target.blur();
+      } else if (e.key === "Escape") {
+        setInputValue(String(value));
+        setEditing(false);
+      }
+    },
+    [value]
+  );
+  if (editing) {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        type: "text",
+        value: inputValue,
+        onChange: (e) => setInputValue(e.target.value),
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        autoFocus: true,
+        className: "w-14 h-7 px-2 text-xs border border-blue-400 rounded text-center focus:outline-none"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx9("div", { className: "relative", children: /* @__PURE__ */ jsxs7(
+    "select",
+    {
+      value: String(value),
+      onChange: (e) => {
+        const num = parseFloat(e.target.value);
+        if (!isNaN(num)) onChange(num);
+      },
+      disabled,
+      className: "w-14 h-7 px-1 text-xs border border-gray-300 rounded bg-white text-center appearance-none cursor-pointer disabled:opacity-40",
+      title: "\uAE00\uC790 \uD06C\uAE30",
+      onDoubleClick: () => {
+        setInputValue(String(value));
+        setEditing(true);
+      },
+      children: [
+        FONT_SIZES.map((s) => /* @__PURE__ */ jsx9("option", { value: String(s), children: s }, s)),
+        !FONT_SIZES.includes(value) && /* @__PURE__ */ jsx9("option", { value: String(value), children: value })
+      ]
+    }
+  ) });
+}
+
+// src/components/toolbar/CharFormatButtons.tsx
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Highlighter,
+  Type
+} from "lucide-react";
+
+// src/components/toolbar/ColorPicker.tsx
+import { useState as useState4, useRef as useRef3, useEffect as useEffect2 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function ColorPicker({
+  color,
+  onChange,
+  icon,
+  title,
+  disabled
+}) {
+  const [open, setOpen] = useState4(false);
+  const ref = useRef3(null);
+  useEffect2(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  return /* @__PURE__ */ jsxs8("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        disabled,
+        onClick: () => setOpen(!open),
+        title,
+        className: "p-1.5 rounded transition-colors text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed flex flex-col items-center",
+        children: [
+          icon,
+          /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: "w-4 h-0.5 mt-0.5 rounded-sm",
+              style: { backgroundColor: color || "#000000" }
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs8("div", { className: "absolute top-full left-0 mt-1 z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-2", children: [
+      /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-8 gap-1", children: COLOR_PRESETS.map((c) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: () => {
+            onChange(c);
+            setOpen(false);
+          },
+          className: `w-5 h-5 rounded border ${c === color ? "border-blue-500 ring-1 ring-blue-300" : "border-gray-300"} hover:scale-110 transition-transform`,
+          style: { backgroundColor: c },
+          title: c
+        },
+        c
+      )) }),
+      /* @__PURE__ */ jsxs8("div", { className: "mt-2 pt-2 border-t border-gray-100 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx10("label", { className: "text-xs text-gray-500", children: "\uCEE4\uC2A4\uD140:" }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            type: "color",
+            value: color || "#000000",
+            onChange: (e) => {
+              onChange(e.target.value);
+              setOpen(false);
+            },
+            className: "w-6 h-6 cursor-pointer border-0"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/toolbar/CharFormatButtons.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function CharFormatButtons() {
+  const activeFormat = useEditorStore((s) => s.activeFormat);
+  const extendedFormat = useEditorStore((s) => s.extendedFormat);
+  const selection = useEditorStore((s) => s.selection);
+  const doc = useEditorStore((s) => s.doc);
+  const toggleBold = useEditorStore((s) => s.toggleBold);
+  const toggleItalic = useEditorStore((s) => s.toggleItalic);
+  const toggleUnderline = useEditorStore((s) => s.toggleUnderline);
+  const disabled = !doc || !selection;
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx11(
+      ColorPicker,
+      {
+        color: extendedFormat.char.textColor || "#000000",
+        onChange: () => {
+        },
+        icon: /* @__PURE__ */ jsx11(Type, { className: "w-3.5 h-3.5" }),
+        title: "\uAE00\uC790\uC0C9",
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ColorPicker,
+      {
+        color: extendedFormat.char.highlightColor || "#FFFF00",
+        onChange: () => {
+        },
+        icon: /* @__PURE__ */ jsx11(Highlighter, { className: "w-3.5 h-3.5" }),
+        title: "\uD615\uAD11\uD39C",
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx11(Bold, { className: "w-3.5 h-3.5" }),
+        active: activeFormat.bold,
+        disabled,
+        onClick: toggleBold,
+        title: "\uAD75\uAC8C (Ctrl+B)"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx11(Italic, { className: "w-3.5 h-3.5" }),
+        active: activeFormat.italic,
+        disabled,
+        onClick: toggleItalic,
+        title: "\uAE30\uC6B8\uC784 (Ctrl+I)"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx11(Underline, { className: "w-3.5 h-3.5" }),
+        active: activeFormat.underline,
+        disabled,
+        onClick: toggleUnderline,
+        title: "\uBC11\uC904 (Ctrl+U)"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ToolbarButton,
+      {
+        icon: /* @__PURE__ */ jsx11(Strikethrough, { className: "w-3.5 h-3.5" }),
+        active: extendedFormat.char.strikethrough,
+        disabled,
+        title: "\uCDE8\uC18C\uC120"
+      }
+    )
+  ] });
+}
+
+// src/components/toolbar/AlignmentButtons.tsx
+import {
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  Columns2
+} from "lucide-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ALIGNMENT_ICONS = {
+  LEFT: /* @__PURE__ */ jsx12(AlignLeft, { className: "w-3.5 h-3.5" }),
+  CENTER: /* @__PURE__ */ jsx12(AlignCenter, { className: "w-3.5 h-3.5" }),
+  RIGHT: /* @__PURE__ */ jsx12(AlignRight, { className: "w-3.5 h-3.5" }),
+  JUSTIFY: /* @__PURE__ */ jsx12(AlignJustify, { className: "w-3.5 h-3.5" }),
+  DISTRIBUTE: /* @__PURE__ */ jsx12(Columns2, { className: "w-3.5 h-3.5" })
+};
+var ALIGNMENT_LABELS = {
+  LEFT: "\uC67C\uCABD \uC815\uB82C (Ctrl+L)",
+  CENTER: "\uAC00\uC6B4\uB370 \uC815\uB82C (Ctrl+E)",
+  RIGHT: "\uC624\uB978\uCABD \uC815\uB82C (Ctrl+R)",
+  JUSTIFY: "\uC591\uCABD \uC815\uB82C (Ctrl+J)",
+  DISTRIBUTE: "\uBC30\uBD84 \uC815\uB82C"
+};
+function AlignmentButtons() {
+  const extendedFormat = useEditorStore((s) => s.extendedFormat);
+  const doc = useEditorStore((s) => s.doc);
+  const selection = useEditorStore((s) => s.selection);
+  const disabled = !doc || !selection;
+  const currentAlignment = extendedFormat.para.alignment;
+  return /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-0.5", children: Object.keys(ALIGNMENT_ICONS).map((align) => /* @__PURE__ */ jsx12(
+    ToolbarButton,
+    {
+      icon: ALIGNMENT_ICONS[align],
+      active: currentAlignment === align,
+      disabled,
+      title: ALIGNMENT_LABELS[align]
+    },
+    align
+  )) });
+}
+
+// src/components/toolbar/LineSpacingControl.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function LineSpacingControl() {
+  const extendedFormat = useEditorStore((s) => s.extendedFormat);
+  const doc = useEditorStore((s) => s.doc);
+  const selection = useEditorStore((s) => s.selection);
+  const disabled = !doc || !selection;
+  const currentSpacing = extendedFormat.para.lineSpacing;
+  const closestValue = LINE_SPACING_OPTIONS.reduce(
+    (prev, curr) => Math.abs(curr.value - currentSpacing) < Math.abs(prev.value - currentSpacing) ? curr : prev
+  ).value;
+  const options = LINE_SPACING_OPTIONS.map((o) => ({
+    value: String(o.value),
+    label: o.label
+  }));
+  return /* @__PURE__ */ jsx13(
+    ToolbarDropdown,
+    {
+      value: String(closestValue),
+      options,
+      onChange: () => {
+      },
+      disabled,
+      title: "\uC904 \uAC04\uACA9",
+      width: "w-14"
+    }
+  );
+}
+
+// src/components/toolbar/ToolbarDivider.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx14("div", { className: "h-6 w-px bg-gray-200 mx-1 self-center" });
+}
+
+// src/components/toolbar/SecondaryToolbar.tsx
+import { Plus } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function SecondaryToolbar() {
+  const doc = useEditorStore((s) => s.doc);
+  const extendedFormat = useEditorStore((s) => s.extendedFormat);
+  const addParagraph = useEditorStore((s) => s.addParagraph);
+  const disabled = !doc;
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 bg-gray-50 border-b border-gray-200 px-3 py-1 flex-wrap min-h-[36px]", children: [
+    /* @__PURE__ */ jsx15(
+      StyleSelector,
+      {
+        value: "0",
+        onChange: () => {
+        },
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx15(
+      FontSelector,
+      {
+        value: extendedFormat.char.fontFamily || "\uB9D1\uC740 \uACE0\uB515",
+        onChange: () => {
+        },
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      FontSizeInput,
+      {
+        value: extendedFormat.char.fontSize || 10,
+        onChange: () => {
+        },
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx15(CharFormatButtons, {}),
+    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx15(AlignmentButtons, {}),
+    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx15(LineSpacingControl, {}),
+    /* @__PURE__ */ jsx15("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        disabled,
+        onClick: () => addParagraph(""),
+        className: "flex items-center gap-1 px-2.5 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed",
+        children: [
+          /* @__PURE__ */ jsx15(Plus, { className: "w-3 h-3" }),
+          "\uBB38\uB2E8 \uCD94\uAC00"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ruler/HorizontalRuler.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+function HorizontalRuler() {
+  const viewModel = useEditorStore((s) => s.viewModel);
+  if (!viewModel || viewModel.sections.length === 0) return null;
+  const section = viewModel.sections[0];
+  const pageWidthPx = section.pageWidthPx;
+  const marginLeftPx = section.marginLeftPx;
+  const marginRightPx = section.marginRightPx;
+  const contentWidthPx = pageWidthPx - marginLeftPx - marginRightPx;
+  const cmPerPx = 25.4 / 96 / 10;
+  const totalCm = contentWidthPx * cmPerPx;
+  const ticks = [];
+  for (let cm = 0; cm <= totalCm + 0.5; cm += 0.5) {
+    const px = cm / cmPerPx;
+    const major = cm % 1 === 0;
+    ticks.push({
+      position: px,
+      label: major ? String(Math.round(cm)) : "",
+      major
+    });
+  }
+  return /* @__PURE__ */ jsx16("div", { className: "bg-white border-b border-gray-200 overflow-hidden flex-shrink-0", children: /* @__PURE__ */ jsx16("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "relative h-6",
+      style: { width: pageWidthPx },
+      children: [
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: "absolute top-0 left-0 h-full bg-gray-100",
+            style: { width: marginLeftPx }
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: "absolute top-0 right-0 h-full bg-gray-100",
+            style: { width: marginRightPx }
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: "absolute top-0 h-full",
+            style: { left: marginLeftPx, width: contentWidthPx },
+            children: ticks.map((tick, i) => /* @__PURE__ */ jsxs11(
+              "div",
+              {
+                className: "absolute bottom-0",
+                style: { left: tick.position },
+                children: [
+                  /* @__PURE__ */ jsx16(
+                    "div",
+                    {
+                      className: `w-px ${tick.major ? "h-3 bg-gray-500" : "h-1.5 bg-gray-300"}`
+                    }
+                  ),
+                  tick.label && /* @__PURE__ */ jsx16("span", { className: "absolute -top-0.5 left-1/2 -translate-x-1/2 text-[8px] text-gray-400 leading-none", children: tick.label })
+                ]
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/components/sidebar/SidebarSection.tsx
+import { useState as useState5 } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function SidebarSection({
+  title,
+  children,
+  defaultOpen = true
+}) {
+  const [open, setOpen] = useState5(defaultOpen);
+  return /* @__PURE__ */ jsxs12("div", { className: "border-b border-gray-100", children: [
+    /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        className: "flex items-center gap-1 w-full px-3 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50",
+        children: [
+          open ? /* @__PURE__ */ jsx17(ChevronDown, { className: "w-3.5 h-3.5 text-gray-400" }) : /* @__PURE__ */ jsx17(ChevronRight, { className: "w-3.5 h-3.5 text-gray-400" }),
+          title
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx17("div", { className: "px-3 pb-3", children })
+  ] });
+}
+
+// src/components/sidebar/SidebarField.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function SidebarField({ label, children }) {
+  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 mb-2", children: [
+    /* @__PURE__ */ jsx18("span", { className: "text-[11px] text-gray-500 w-14 flex-shrink-0", children: label }),
+    /* @__PURE__ */ jsx18("div", { className: "flex-1", children })
+  ] });
+}
+
+// src/components/sidebar/BorderSettings.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+function BorderSettings({ disabled }) {
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx19(SidebarField, { label: "\uC885\uB958", children: /* @__PURE__ */ jsxs14(
+      "select",
+      {
+        disabled,
+        className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+        children: [
+          /* @__PURE__ */ jsx19("option", { value: "none", children: "\uC5C6\uC74C" }),
+          /* @__PURE__ */ jsx19("option", { value: "solid", children: "\uC2E4\uC120" }),
+          /* @__PURE__ */ jsx19("option", { value: "dashed", children: "\uC810\uC120" }),
+          /* @__PURE__ */ jsx19("option", { value: "double", children: "\uC774\uC911\uC120" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(SidebarField, { label: "\uB450\uAED8", children: /* @__PURE__ */ jsxs14(
+      "select",
+      {
+        disabled,
+        className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+        children: [
+          /* @__PURE__ */ jsx19("option", { value: "0.1mm", children: "0.1mm" }),
+          /* @__PURE__ */ jsx19("option", { value: "0.12mm", children: "0.12mm" }),
+          /* @__PURE__ */ jsx19("option", { value: "0.3mm", children: "0.3mm" }),
+          /* @__PURE__ */ jsx19("option", { value: "0.4mm", children: "0.4mm" }),
+          /* @__PURE__ */ jsx19("option", { value: "0.5mm", children: "0.5mm" }),
+          /* @__PURE__ */ jsx19("option", { value: "1.0mm", children: "1.0mm" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(SidebarField, { label: "\uC0C9", children: /* @__PURE__ */ jsx19(
+      "input",
+      {
+        type: "color",
+        defaultValue: "#000000",
+        disabled,
+        className: "w-6 h-6 border border-gray-300 rounded cursor-pointer disabled:opacity-40"
+      }
+    ) })
+  ] });
+}
+
+// src/components/sidebar/BackgroundSettings.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function BackgroundSettings({ disabled }) {
+  return /* @__PURE__ */ jsxs15("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx20(SidebarField, { label: "\uCC44\uC6B0\uAE30", children: /* @__PURE__ */ jsxs15(
+      "select",
+      {
+        disabled,
+        className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+        children: [
+          /* @__PURE__ */ jsx20("option", { value: "none", children: "\uC5C6\uC74C" }),
+          /* @__PURE__ */ jsx20("option", { value: "color", children: "\uC0C9 \uCC44\uC6B0\uAE30" }),
+          /* @__PURE__ */ jsx20("option", { value: "gradient", children: "\uADF8\uB77C\uB370\uC774\uC158" }),
+          /* @__PURE__ */ jsx20("option", { value: "pattern", children: "\uBB34\uB2AC" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx20(SidebarField, { label: "\uBC30\uACBD\uC0C9", children: /* @__PURE__ */ jsx20(
+      "input",
+      {
+        type: "color",
+        defaultValue: "#ffffff",
+        disabled,
+        className: "w-6 h-6 border border-gray-300 rounded cursor-pointer disabled:opacity-40"
+      }
+    ) })
+  ] });
+}
+
+// src/components/sidebar/CharFormatPanel.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function CharFormatPanel() {
+  const extendedFormat = useEditorStore((s) => s.extendedFormat);
+  const activeFormat = useEditorStore((s) => s.activeFormat);
+  const doc = useEditorStore((s) => s.doc);
+  const selection = useEditorStore((s) => s.selection);
+  const disabled = !doc || !selection;
+  const cf = extendedFormat.char;
+  return /* @__PURE__ */ jsxs16("div", { className: "text-xs", children: [
+    /* @__PURE__ */ jsxs16(SidebarSection, { title: "\uAE30\uBCF8", children: [
+      /* @__PURE__ */ jsx21(SidebarField, { label: "\uC2A4\uD0C0\uC77C", children: /* @__PURE__ */ jsxs16(
+        "select",
+        {
+          disabled,
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+          defaultValue: "0",
+          children: [
+            /* @__PURE__ */ jsx21("option", { value: "0", children: "\uBC14\uD0D5\uAE00" }),
+            /* @__PURE__ */ jsx21("option", { value: "1", children: "\uBCF8\uBB38" }),
+            /* @__PURE__ */ jsx21("option", { value: "2", children: "\uAC1C\uC694 1" }),
+            /* @__PURE__ */ jsx21("option", { value: "3", children: "\uAC1C\uC694 2" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(SidebarField, { label: "\uAE00\uAF34", children: /* @__PURE__ */ jsx21(
+        "select",
+        {
+          disabled,
+          value: cf.fontFamily || "\uB9D1\uC740 \uACE0\uB515",
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+          children: FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx21("option", { value: f, children: f }, f))
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(SidebarField, { label: "\uD06C\uAE30", children: /* @__PURE__ */ jsx21(
+        "select",
+        {
+          disabled,
+          value: String(cf.fontSize || 10),
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+          children: FONT_SIZES.map((s) => /* @__PURE__ */ jsxs16("option", { value: String(s), children: [
+            s,
+            "pt"
+          ] }, s))
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(SidebarField, { label: "\uC0C9\uC0C1", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "color",
+            value: cf.textColor || "#000000",
+            onChange: () => {
+            },
+            disabled,
+            className: "w-6 h-6 border border-gray-300 rounded cursor-pointer disabled:opacity-40"
+          }
+        ),
+        /* @__PURE__ */ jsx21("span", { className: "text-[10px] text-gray-400", children: cf.textColor || "#000000" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx21(SidebarSection, { title: "\uAFB8\uBC08", children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap gap-1 mb-2", children: [
+      /* @__PURE__ */ jsx21(FormatTag, { label: "\uAD75\uAC8C", active: activeFormat.bold }),
+      /* @__PURE__ */ jsx21(FormatTag, { label: "\uAE30\uC6B8\uC784", active: activeFormat.italic }),
+      /* @__PURE__ */ jsx21(FormatTag, { label: "\uBC11\uC904", active: activeFormat.underline }),
+      /* @__PURE__ */ jsx21(FormatTag, { label: "\uCDE8\uC18C\uC120", active: cf.strikethrough })
+    ] }) }),
+    /* @__PURE__ */ jsx21(SidebarSection, { title: "\uD615\uAD11\uD39C", children: /* @__PURE__ */ jsx21(SidebarField, { label: "\uC0C9\uC0C1", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx21(
+        "input",
+        {
+          type: "color",
+          value: cf.highlightColor && cf.highlightColor !== "none" ? cf.highlightColor : "#FFFF00",
+          onChange: () => {
+          },
+          disabled,
+          className: "w-6 h-6 border border-gray-300 rounded cursor-pointer disabled:opacity-40"
+        }
+      ),
+      /* @__PURE__ */ jsx21("span", { className: "text-[10px] text-gray-400", children: cf.highlightColor || "\uC5C6\uC74C" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx21(SidebarSection, { title: "\uD14C\uB450\uB9AC", defaultOpen: false, children: /* @__PURE__ */ jsx21(BorderSettings, { disabled }) }),
+    /* @__PURE__ */ jsx21(SidebarSection, { title: "\uBC30\uACBD", defaultOpen: false, children: /* @__PURE__ */ jsx21(BackgroundSettings, { disabled }) })
+  ] });
+}
+function FormatTag({ label, active }) {
+  return /* @__PURE__ */ jsx21(
+    "span",
+    {
+      className: `px-2 py-0.5 rounded text-[10px] border ${active ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-400"}`,
+      children: label
+    }
+  );
+}
+
+// src/components/sidebar/ParaFormatPanel.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+function ParaFormatPanel() {
+  const extendedFormat = useEditorStore((s) => s.extendedFormat);
+  const doc = useEditorStore((s) => s.doc);
+  const selection = useEditorStore((s) => s.selection);
+  const disabled = !doc || !selection;
+  const pf = extendedFormat.para;
+  return /* @__PURE__ */ jsxs17("div", { className: "text-xs", children: [
+    /* @__PURE__ */ jsx22(SidebarSection, { title: "\uC815\uB82C", children: /* @__PURE__ */ jsx22("div", { className: "flex gap-1 mb-2", children: ALIGNMENT_OPTIONS.map((opt) => /* @__PURE__ */ jsxs17(
+      "button",
+      {
+        disabled,
+        className: `flex-1 py-1 rounded text-[10px] border transition-colors ${pf.alignment === opt.value ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-white border-gray-200 text-gray-500 hover:bg-gray-50"} disabled:opacity-40 disabled:cursor-not-allowed`,
+        title: opt.label,
+        children: [
+          opt.value === "LEFT" && "\uC67C",
+          opt.value === "CENTER" && "\uC911",
+          opt.value === "RIGHT" && "\uC624",
+          opt.value === "JUSTIFY" && "\uC591",
+          opt.value === "DISTRIBUTE" && "\uBC30"
+        ]
+      },
+      opt.value
+    )) }) }),
+    /* @__PURE__ */ jsxs17(SidebarSection, { title: "\uC5EC\uBC31", children: [
+      /* @__PURE__ */ jsx22(SidebarField, { label: "\uC67C\uCABD", children: /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "number",
+          value: pf.indentLeft,
+          disabled,
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40"
+        }
+      ) }),
+      /* @__PURE__ */ jsx22(SidebarField, { label: "\uC624\uB978\uCABD", children: /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "number",
+          value: pf.indentRight,
+          disabled,
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40"
+        }
+      ) }),
+      /* @__PURE__ */ jsx22(SidebarField, { label: "\uCCAB\uC904", children: /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "number",
+          value: pf.firstLineIndent,
+          disabled,
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs17(SidebarSection, { title: "\uAC04\uACA9", children: [
+      /* @__PURE__ */ jsx22(SidebarField, { label: "\uC904 \uAC04\uACA9", children: /* @__PURE__ */ jsx22(
+        "select",
+        {
+          disabled,
+          value: String(
+            LINE_SPACING_OPTIONS.reduce(
+              (prev, curr) => Math.abs(curr.value - pf.lineSpacing) < Math.abs(prev.value - pf.lineSpacing) ? curr : prev
+            ).value
+          ),
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40",
+          children: LINE_SPACING_OPTIONS.map((o) => /* @__PURE__ */ jsx22("option", { value: String(o.value), children: o.label }, o.value))
+        }
+      ) }),
+      /* @__PURE__ */ jsx22(SidebarField, { label: "\uBB38\uB2E8 \uC55E", children: /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "number",
+          value: pf.spacingBefore,
+          disabled,
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40"
+        }
+      ) }),
+      /* @__PURE__ */ jsx22(SidebarField, { label: "\uBB38\uB2E8 \uB4A4", children: /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "number",
+          value: pf.spacingAfter,
+          disabled,
+          onChange: () => {
+          },
+          className: "w-full h-6 px-1 text-[11px] border border-gray-300 rounded bg-white disabled:opacity-40"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx22(SidebarSection, { title: "\uC904 \uB098\uB214", defaultOpen: false, children: /* @__PURE__ */ jsxs17("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-[11px] text-gray-600", children: [
+        /* @__PURE__ */ jsx22("input", { type: "checkbox", disabled, className: "w-3 h-3" }),
+        "\uD55C\uAE00 \uB2E8\uC5B4 \uC798\uB9BC \uD5C8\uC6A9"
+      ] }),
+      /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-[11px] text-gray-600", children: [
+        /* @__PURE__ */ jsx22("input", { type: "checkbox", disabled, className: "w-3 h-3" }),
+        "\uC601\uC5B4 \uB2E8\uC5B4 \uC798\uB9BC \uD5C8\uC6A9"
+      ] }),
+      /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-[11px] text-gray-600", children: [
+        /* @__PURE__ */ jsx22("input", { type: "checkbox", disabled, className: "w-3 h-3" }),
+        "\uC678\uD1A8\uC774\uC904 \uBC29\uC9C0"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx22(SidebarSection, { title: "\uD14C\uB450\uB9AC", defaultOpen: false, children: /* @__PURE__ */ jsx22(BorderSettings, { disabled }) }),
+    /* @__PURE__ */ jsx22(SidebarSection, { title: "\uBC30\uACBD", defaultOpen: false, children: /* @__PURE__ */ jsx22(BackgroundSettings, { disabled }) })
+  ] });
+}
+
+// src/components/sidebar/FormatSidebar.tsx
+import { PanelRightClose } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+function FormatSidebar() {
+  const uiState = useEditorStore((s) => s.uiState);
+  const setSidebarTab = useEditorStore((s) => s.setSidebarTab);
+  const toggleSidebar = useEditorStore((s) => s.toggleSidebar);
+  if (!uiState.sidebarOpen) return null;
+  return /* @__PURE__ */ jsxs18("div", { className: "w-72 border-l border-gray-200 bg-white flex flex-col overflow-hidden flex-shrink-0", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex items-center border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx23(
+        "button",
+        {
+          onClick: () => setSidebarTab("char"),
+          className: `flex-1 py-2 text-xs font-medium text-center transition-colors ${uiState.sidebarTab === "char" ? "text-blue-600 border-b-2 border-blue-600 bg-blue-50/50" : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"}`,
+          children: "\uAE00\uC790 \uBAA8\uC591"
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        "button",
+        {
+          onClick: () => setSidebarTab("para"),
+          className: `flex-1 py-2 text-xs font-medium text-center transition-colors ${uiState.sidebarTab === "para" ? "text-blue-600 border-b-2 border-blue-600 bg-blue-50/50" : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"}`,
+          children: "\uBB38\uB2E8 \uBAA8\uC591"
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        "button",
+        {
+          onClick: toggleSidebar,
+          className: "p-1.5 mr-1 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+          title: "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
+          children: /* @__PURE__ */ jsx23(PanelRightClose, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-auto", children: uiState.sidebarTab === "char" ? /* @__PURE__ */ jsx23(CharFormatPanel, {}) : /* @__PURE__ */ jsx23(ParaFormatPanel, {}) })
+  ] });
+}
+
+// src/components/editor/ParagraphBlock.tsx
+import { useRef as useRef5, useCallback as useCallback4 } from "react";
+
+// src/components/editor/RunSpan.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function RunSpan({ run }) {
+  const style = {};
+  if (run.bold) style.fontWeight = "bold";
+  if (run.italic) style.fontStyle = "italic";
+  const decorations = [];
+  if (run.underline) decorations.push("underline");
+  if (run.strikethrough) decorations.push("line-through");
+  if (decorations.length > 0) style.textDecoration = decorations.join(" ");
+  if (run.color && run.color !== "#000000") style.color = run.color;
+  if (run.fontFamily) style.fontFamily = run.fontFamily;
+  if (run.fontSize) style.fontSize = `${run.fontSize}pt`;
+  if (run.highlightColor) style.backgroundColor = run.highlightColor;
+  if (run.letterSpacing) {
+    style.letterSpacing = `${run.letterSpacing / 100}px`;
+  }
+  return /* @__PURE__ */ jsx24("span", { style, children: run.text });
+}
+
+// src/components/editor/TableCell.tsx
+import { useRef as useRef4, useCallback as useCallback3 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function TableCell({
+  cell,
+  sectionIndex,
+  paragraphIndex,
+  tableIndex
+}) {
+  const updateCellText = useEditorStore((s) => s.updateCellText);
+  const setSelection = useEditorStore((s) => s.setSelection);
+  const ref = useRef4(null);
+  const handleBlur = useCallback3(() => {
+    var _a;
+    if (!ref.current) return;
+    const newText = (_a = ref.current.textContent) != null ? _a : "";
+    if (newText !== cell.text) {
+      updateCellText(
+        sectionIndex,
+        paragraphIndex,
+        tableIndex,
+        cell.row,
+        cell.col,
+        newText
+      );
+    }
+  }, [cell, sectionIndex, paragraphIndex, tableIndex, updateCellText]);
+  const handleFocus = useCallback3(() => {
+    setSelection({
+      sectionIndex,
+      paragraphIndex,
+      type: "cell",
+      tableIndex,
+      row: cell.row,
+      col: cell.col
+    });
+  }, [sectionIndex, paragraphIndex, tableIndex, cell.row, cell.col, setSelection]);
+  if (!cell.isAnchor) return null;
+  return /* @__PURE__ */ jsx25(
+    "td",
+    {
+      ref,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      colSpan: cell.colSpan > 1 ? cell.colSpan : void 0,
+      rowSpan: cell.rowSpan > 1 ? cell.rowSpan : void 0,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      className: "border border-gray-300 px-2 py-1 text-sm outline-none focus:bg-blue-50",
+      style: {
+        minWidth: cell.widthPx > 0 ? cell.widthPx : 40,
+        minHeight: cell.heightPx > 0 ? cell.heightPx : 24
+      },
+      children: cell.text
+    }
+  );
+}
+
+// src/components/editor/TableBlock.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function TableBlock({ table, sectionIndex, paragraphIndex }) {
+  return /* @__PURE__ */ jsx26("div", { className: "my-2 overflow-x-auto", children: /* @__PURE__ */ jsx26("table", { className: "border-collapse border border-gray-400", children: /* @__PURE__ */ jsx26("tbody", { children: table.cells.map((row, rIdx) => /* @__PURE__ */ jsx26("tr", { children: row.map(
+    (cell) => cell.isAnchor ? /* @__PURE__ */ jsx26(
+      TableCell,
+      {
+        cell,
+        sectionIndex,
+        paragraphIndex,
+        tableIndex: table.tableIndex
+      },
+      `${cell.row}-${cell.col}`
+    ) : null
+  ) }, rIdx)) }) }) });
+}
+
+// src/components/editor/ImageBlock.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function ImageBlock({ image }) {
+  return /* @__PURE__ */ jsx27("div", { className: "my-2 flex justify-center", children: /* @__PURE__ */ jsx27(
+    "img",
+    {
+      src: image.dataUrl,
+      alt: "",
+      style: {
+        width: image.widthPx > 0 ? image.widthPx : void 0,
+        height: image.heightPx > 0 ? image.heightPx : void 0,
+        maxWidth: "100%"
+      }
+    }
+  ) });
+}
+
+// src/components/editor/ParagraphBlock.tsx
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+function alignmentToCSS(alignment) {
+  switch (alignment.toUpperCase()) {
+    case "CENTER":
+      return "center";
+    case "RIGHT":
+      return "right";
+    case "JUSTIFY":
+    case "DISTRIBUTE":
+      return "justify";
+    default:
+      return "left";
+  }
+}
+function ParagraphBlock({
+  paragraph,
+  sectionIndex,
+  localIndex
+}) {
+  const updateParagraphText = useEditorStore((s) => s.updateParagraphText);
+  const setSelection = useEditorStore((s) => s.setSelection);
+  const ref = useRef5(null);
+  const hasTables = paragraph.tables.length > 0;
+  const hasImages = paragraph.images.length > 0;
+  const hasText = paragraph.runs.length > 0;
+  const handleBlur = useCallback4(() => {
+    var _a;
+    if (!ref.current) return;
+    const newText = (_a = ref.current.textContent) != null ? _a : "";
+    if (!hasTables && !hasImages) {
+      const oldText = paragraph.runs.map((r) => r.text).join("");
+      if (newText !== oldText) {
+        updateParagraphText(sectionIndex, localIndex, newText);
+      }
+    }
+  }, [paragraph, sectionIndex, localIndex, hasTables, hasImages, updateParagraphText]);
+  const handleFocus = useCallback4(() => {
+    setSelection({
+      sectionIndex,
+      paragraphIndex: localIndex,
+      type: "paragraph"
+    });
+  }, [sectionIndex, localIndex, setSelection]);
+  const paraStyle = {
+    textAlign: alignmentToCSS(paragraph.alignment),
+    lineHeight: paragraph.lineSpacing,
+    marginLeft: paragraph.marginLeftPx || void 0,
+    marginRight: paragraph.marginRightPx || void 0,
+    textIndent: paragraph.firstLineIndent || void 0,
+    paddingTop: paragraph.spacingBefore || void 0,
+    paddingBottom: paragraph.spacingAfter || void 0
+  };
+  if (hasTables) {
+    return /* @__PURE__ */ jsxs19("div", { className: "my-1", style: paraStyle, children: [
+      hasText && /* @__PURE__ */ jsx28(
+        "div",
+        {
+          ref,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          className: "outline-none leading-relaxed",
+          children: paragraph.runs.map((run, i) => /* @__PURE__ */ jsx28(RunSpan, { run }, i))
+        }
+      ),
+      paragraph.tables.map((table) => /* @__PURE__ */ jsx28(
+        TableBlock,
+        {
+          table,
+          sectionIndex,
+          paragraphIndex: localIndex
+        },
+        table.tableIndex
+      ))
+    ] });
+  }
+  if (hasImages) {
+    return /* @__PURE__ */ jsx28("div", { className: "my-1", style: paraStyle, children: paragraph.images.map((img, i) => /* @__PURE__ */ jsx28(ImageBlock, { image: img }, i)) });
+  }
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      ref,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      className: "outline-none min-h-[1.5em]",
+      style: paraStyle,
+      children: paragraph.runs.length > 0 ? paragraph.runs.map((run, i) => /* @__PURE__ */ jsx28(RunSpan, { run }, i)) : /* @__PURE__ */ jsx28("br", {})
+    }
+  );
+}
+
+// src/components/editor/Page.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+function Page({ section }) {
+  const addParagraph = useEditorStore((s) => s.addParagraph);
+  const revision = useEditorStore((s) => s.revision);
+  const handlePageClick = (e) => {
+    if (e.target !== e.currentTarget) return;
+    if (section.paragraphs.length === 0) {
+      addParagraph("");
+      return;
+    }
+    const container = e.currentTarget;
+    const editables = container.querySelectorAll("[contenteditable]");
+    const last = editables[editables.length - 1];
+    if (last) {
+      last.focus();
+      const sel = window.getSelection();
+      if (sel) {
+        sel.selectAllChildren(last);
+        sel.collapseToEnd();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: "bg-white shadow-lg mx-auto mb-8 cursor-text",
+      onClick: handlePageClick,
+      style: {
+        width: section.pageWidthPx,
+        minHeight: section.pageHeightPx,
+        paddingTop: section.marginTopPx,
+        paddingBottom: section.marginBottomPx,
+        paddingLeft: section.marginLeftPx,
+        paddingRight: section.marginRightPx
+      },
+      children: section.paragraphs.map((para, idx) => /* @__PURE__ */ jsx29(
+        ParagraphBlock,
+        {
+          paragraph: para,
+          sectionIndex: section.sectionIndex,
+          localIndex: idx
+        },
+        `${section.sectionIndex}-${idx}-r${revision}`
+      ))
+    }
+  );
+}
+
+// src/components/editor/PageView.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function PageView() {
+  const viewModel = useEditorStore((s) => s.viewModel);
+  useEditorStore((s) => s.revision);
+  if (!viewModel) {
+    return /* @__PURE__ */ jsx30("div", { className: "flex-1 flex items-center justify-center text-gray-400", children: "\uBB38\uC11C\uB97C \uC5F4\uAC70\uB098 \uC0C8 \uBB38\uC11C\uB97C \uB9CC\uB4DC\uC138\uC694." });
+  }
+  return /* @__PURE__ */ jsx30("div", { className: "flex-1 overflow-auto bg-gray-200 py-8", children: viewModel.sections.map((section) => /* @__PURE__ */ jsx30(Page, { section }, section.sectionIndex)) });
+}
+
+// src/components/upload/FileUpload.tsx
+import { useCallback as useCallback5, useState as useState6, useRef as useRef6 } from "react";
+import { Upload } from "lucide-react";
+import { HwpxDocument as HwpxDocument2 } from "@ubermensch1218/hwpxcore";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+function FileUpload() {
+  const setDocument = useEditorStore((s) => s.setDocument);
+  const setLoading = useEditorStore((s) => s.setLoading);
+  const setError = useEditorStore((s) => s.setError);
+  const [dragging, setDragging] = useState6(false);
+  const inputRef = useRef6(null);
+  const openFile = useCallback5(
+    async (file) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const buffer = await file.arrayBuffer();
+        const doc = await HwpxDocument2.open(buffer);
+        setDocument(doc);
+      } catch (e) {
+        console.error("Failed to open file:", e);
+        setError("\uD30C\uC77C\uC744 \uC5F4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. HWPX \uD30C\uC77C\uC778\uC9C0 \uD655\uC778\uD558\uC138\uC694.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [setDocument, setLoading, setError]
+  );
+  const handleDrop = useCallback5(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file) openFile(file);
+    },
+    [openFile]
+  );
+  const handleDragOver = useCallback5((e) => {
+    e.preventDefault();
+    setDragging(true);
+  }, []);
+  const handleDragLeave = useCallback5(() => {
+    setDragging(false);
+  }, []);
+  const handleChange = useCallback5(
+    (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file) openFile(file);
+      e.target.value = "";
+    },
+    [openFile]
+  );
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.click();
+      },
+      className: `cursor-pointer border-2 border-dashed rounded-lg p-8 text-center transition-colors ${dragging ? "border-blue-400 bg-blue-50" : "border-gray-300 hover:border-gray-400"}`,
+      children: [
+        /* @__PURE__ */ jsx31(Upload, { className: "w-10 h-10 mx-auto mb-3 text-gray-400" }),
+        /* @__PURE__ */ jsx31("p", { className: "text-gray-600 font-medium", children: "HWPX \uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC120\uD0DD" }),
+        /* @__PURE__ */ jsx31("p", { className: "text-sm text-gray-400 mt-1", children: ".hwpx \uD30C\uC77C\uB9CC \uC9C0\uC6D0" }),
+        /* @__PURE__ */ jsx31(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: ".hwpx",
+            className: "hidden",
+            onChange: handleChange
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/upload/NewDocumentButton.tsx
+import { useCallback as useCallback6 } from "react";
+import { FilePlus } from "lucide-react";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+function NewDocumentButton() {
+  const setDocument = useEditorStore((s) => s.setDocument);
+  const setLoading = useEditorStore((s) => s.setLoading);
+  const setError = useEditorStore((s) => s.setError);
+  const handleClick = useCallback6(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const doc = await createNewDocument();
+      setDocument(doc);
+    } catch (e) {
+      console.error("Failed to create new document:", e);
+      setError("\uC0C8 \uBB38\uC11C\uB97C \uB9CC\uB4E4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setLoading(false);
+    }
+  }, [setDocument, setLoading, setError]);
+  return /* @__PURE__ */ jsxs21(
+    "button",
+    {
+      onClick: handleClick,
+      className: "flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors",
+      children: [
+        /* @__PURE__ */ jsx32(FilePlus, { className: "w-5 h-5" }),
+        "\uC0C8 \uBB38\uC11C"
+      ]
+    }
+  );
+}
+
+// src/components/editor/Editor.tsx
+import { PanelRight } from "lucide-react";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+function Editor() {
+  const doc = useEditorStore((s) => s.doc);
+  const loading = useEditorStore((s) => s.loading);
+  const error = useEditorStore((s) => s.error);
+  const uiState = useEditorStore((s) => s.uiState);
+  const toggleSidebar = useEditorStore((s) => s.toggleSidebar);
+  useEffect3(() => {
+    ensureSkeletonLoaded().catch(console.error);
+  }, []);
+  useEffect3(() => {
+    const handler = (e) => {
+      const store = useEditorStore.getState();
+      if (!store.doc || !store.selection) return;
+      if ((e.ctrlKey || e.metaKey) && e.key === "b") {
+        e.preventDefault();
+        store.toggleBold();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "i") {
+        e.preventDefault();
+        store.toggleItalic();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "u") {
+        e.preventDefault();
+        store.toggleUnderline();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        store.saveDocument();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ jsx33("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx33("div", { className: "text-gray-500", children: "\uB85C\uB529 \uC911..." }) });
+  }
+  if (!doc) {
+    return /* @__PURE__ */ jsxs22("div", { className: "flex h-screen flex-col items-center justify-center gap-6 bg-gray-100 p-8", children: [
+      /* @__PURE__ */ jsx33("h1", { className: "text-2xl font-bold text-gray-800", children: "HWPX Editor" }),
+      /* @__PURE__ */ jsx33("p", { className: "text-gray-500 max-w-md text-center", children: "HWPX \uBB38\uC11C\uB97C \uC5F4\uAC70\uB098 \uC0C8 \uBB38\uC11C\uB97C \uB9CC\uB4E4\uC5B4 \uD3B8\uC9D1\uD558\uC138\uC694." }),
+      /* @__PURE__ */ jsx33("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx33(FileUpload, {}) }),
+      /* @__PURE__ */ jsx33("div", { className: "flex gap-3", children: /* @__PURE__ */ jsx33(NewDocumentButton, {}) }),
+      error && /* @__PURE__ */ jsx33("div", { className: "bg-red-50 text-red-600 px-4 py-2 rounded-lg text-sm", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs22("div", { className: "flex h-screen flex-col", children: [
+    /* @__PURE__ */ jsx33(RibbonToolbar, {}),
+    /* @__PURE__ */ jsx33(SecondaryToolbar, {}),
+    /* @__PURE__ */ jsx33(HorizontalRuler, {}),
+    error && /* @__PURE__ */ jsx33("div", { className: "bg-red-50 text-red-600 px-4 py-2 text-sm border-b border-red-200", children: error }),
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx33(PageView, {}),
+      /* @__PURE__ */ jsx33(FormatSidebar, {}),
+      !uiState.sidebarOpen && /* @__PURE__ */ jsx33(
+        "button",
+        {
+          onClick: toggleSidebar,
+          className: "absolute right-2 top-[140px] z-10 p-1.5 bg-white border border-gray-200 rounded shadow-sm text-gray-400 hover:text-gray-600 hover:bg-gray-50",
+          title: "\uC11C\uC2DD \uC0AC\uC774\uB4DC\uBC14 \uC5F4\uAE30",
+          children: /* @__PURE__ */ jsx33(PanelRight, { className: "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ALIGNMENT_OPTIONS,
+  AlignmentButtons,
+  BackgroundSettings,
+  BorderSettings,
+  COLOR_PRESETS,
+  CharFormatButtons,
+  CharFormatPanel,
+  ClipboardGroup,
+  ColorPicker,
+  Editor,
+  FONT_FAMILIES,
+  FONT_SIZES,
+  FileUpload,
+  FontSelector,
+  FontSizeInput,
+  FormatSidebar,
+  HIGHLIGHT_COLORS,
+  HorizontalRuler,
+  ImageBlock,
+  InsertGroup,
+  LINE_SPACING_OPTIONS,
+  LineSpacingControl,
+  NewDocumentButton,
+  Page,
+  PageView,
+  ParaFormatPanel,
+  ParagraphBlock,
+  RibbonGroup,
+  RibbonToolbar,
+  RunSpan,
+  STYLE_PRESETS,
+  SecondaryToolbar,
+  SidebarField,
+  SidebarSection,
+  StyleSelector,
+  TableBlock,
+  TableCell,
+  ToolbarButton,
+  ToolbarDivider,
+  ToolbarDropdown,
+  UNDERLINE_TYPES,
+  buildViewModel,
+  createNewDocument,
+  ensureSkeletonLoaded,
+  extractImages,
+  getDocumentStyles,
+  hwpToMm,
+  hwpToPx,
+  mmToHwp,
+  pxToHwp,
+  readCharFormat,
+  readFormatFromSelection,
+  readParaFormat,
+  readStyleInfo,
+  useEditorStore
+};
+//# sourceMappingURL=index.js.map