hwpkit-dev 0.0.1 → 0.0.2

package/src/encoders/hwpx/HwpxEncoder.ts

@@ -88,6 +88,7 @@ interface HwpxCtx {
   fonts: string[];
   fontMap: Map<string, number>;
   imgMap: WeakMap<ImgNode, string>; // ImgNode → binId (no mutation)
+  nextZOrder: number; // monotonically increasing z-order for images/objects
 }
 
 function charPrKey(p: TextProps): string {
@@ -229,7 +230,37 @@ function addBorderFill(
     fill = `<hc:fillBrush><hc:winBrush faceColor="${bc}" hatchColor="none" alpha="0"/></hc:fillBrush>`;
   }
 
-  const xml = `<hh:borderFill id="${id}" threeD="0" shadow="0" centerLine="NONE" breakCellSeparateLine="0"><hh:slash type="NONE" Crooked="0" isCounter="0"/><hh:backSlash type="NONE" Crooked="0" isCounter="0"/><hh:leftBorder type="${type}" width="${w}" color="${c}"/><hh:rightBorder type="${type}" width="${w}" color="${c}"/><hh:topBorder type="${type}" width="${w}" color="${c}"/><hh:bottomBorder type="${type}" width="${w}" color="${c}"/><hh:diagonal type="SOLID" width="0.1 mm" color="#000000"/>${fill}</hh:borderFill>`;
+  const xml = `<hh:borderFill id="${id}" threeD="0" shadow="0" centerLine="NONE" breakCellSeparateLine="0"><hh:slash type="NONE" Crooked="0" isCounter="0"/><hh:backSlash type="NONE" Crooked="0" isCounter="0"/><hh:leftBorder type="${type}" width="${w}" color="${c}"/><hh:rightBorder type="${type}" width="${w}" color="${c}"/><hh:topBorder type="${type}" width="${w}" color="${c}"/><hh:bottomBorder type="${type}" width="${w}" color="${c}"/><hh:diagonal type="NONE" width="0.12 mm" color="#000000"/>${fill}</hh:borderFill>`;
+  ctx.borderFills.push({ id, xml });
+  return id;
+}
+
+function addBorderFillPerSide(
+  ctx: HwpxCtx,
+  top?: Stroke,
+  right?: Stroke,
+  bottom?: Stroke,
+  left?: Stroke,
+  bgColor?: string,
+): number {
+  const id = ctx.borderFills.length + 1;
+  const kindMap: Record<string, string> = {
+    solid: "SOLID", dash: "DASH", dot: "DOT", double: "DOUBLE", none: "NONE",
+  };
+  function sideXml(tag: string, s?: Stroke): string {
+    const type = s ? (kindMap[s.kind] ?? "SOLID") : "NONE";
+    const w = s ? `${(s.pt * 0.3528).toFixed(2)} mm` : "0.12 mm";
+    const c = s ? (s.color.startsWith("#") ? s.color : `#${s.color}`) : "#000000";
+    return `<hh:${tag} type="${type}" width="${w}" color="${c}"/>`;
+  }
+
+  let fill = "";
+  if (bgColor) {
+    const bc = bgColor.startsWith("#") ? bgColor : `#${bgColor}`;
+    fill = `<hc:fillBrush><hc:winBrush faceColor="${bc}" hatchColor="none" alpha="0"/></hc:fillBrush>`;
+  }
+
+  const xml = `<hh:borderFill id="${id}" threeD="0" shadow="0" centerLine="NONE" breakCellSeparateLine="0"><hh:slash type="NONE" Crooked="0" isCounter="0"/><hh:backSlash type="NONE" Crooked="0" isCounter="0"/>${sideXml("leftBorder", left)}${sideXml("rightBorder", right)}${sideXml("topBorder", top)}${sideXml("bottomBorder", bottom)}<hh:diagonal type="NONE" width="0.12 mm" color="#000000"/>${fill}</hh:borderFill>`;
   ctx.borderFills.push({ id, xml });
   return id;
 }
@@ -263,6 +294,7 @@ export class HwpxEncoder implements Encoder {
         fonts: [],
         fontMap: new Map(),
         imgMap: new WeakMap(),
+        nextZOrder: 0,
       };
 
       // Default borderFill (id=1, no border)
@@ -615,112 +647,131 @@ function encodeImage(img: ImgNode, ctx: HwpxCtx): string {
   const vertOffset = layout?.yPt != null ? Metric.ptToHwp(layout.yPt) : 0;
 
   // hp:pic children must follow the exact HWPX spec order.
-  return `<hp:run charPrIDRef="${charPrId}"><hp:pic id="${ctx.nextElementId++}" zOrder="0" numberingType="PICTURE" textWrap="${textWrap}" textFlow="${textFlow}" lock="0" dropcapstyle="None" href="" groupLevel="0" instid="0" reverse="0"><hp:offset x="0" y="0"/><hp:orgSz width="${w}" height="${h}"/><hp:curSz width="${w}" height="${h}"/><hp:flip horizontal="0" vertical="0"/><hp:rotationInfo angle="0" centerX="${cx}" centerY="${cy}" rotateimage="1"/><hp:renderingInfo><hc:transMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/><hc:scaMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/><hc:rotMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/></hp:renderingInfo><hp:imgRect><hc:pt0 x="0" y="0"/><hc:pt1 x="${w}" y="0"/><hc:pt2 x="${w}" y="${h}"/><hc:pt3 x="0" y="${h}"/></hp:imgRect><hp:imgClip left="0" right="0" top="0" bottom="0"/><hp:inMargin left="0" right="0" top="0" bottom="0"/><hp:imgDim dimwidth="${w}" dimheight="${h}"/><hc:img binaryItemIDRef="${binId}" bright="0" contrast="0" effect="REAL_PIC" alpha="0"/><hp:effects/><hp:sz width="${w}" widthRelTo="ABSOLUTE" height="${h}" heightRelTo="ABSOLUTE" protect="0"/><hp:pos treatAsChar="${treatAsChar}" affectLSpacing="0" flowWithText="${flowWithText}" allowOverlap="${allowOverlap}" holdAnchorAndSO="0" vertRelTo="${vertRelTo}" horzRelTo="${horzRelTo}" vertAlign="${vertAlign}" horzAlign="${horzAlign}" vertOffset="${vertOffset}" horzOffset="${horzOffset}"/><hp:outMargin left="0" right="0" top="0" bottom="0"/></hp:pic><hp:t></hp:t></hp:run>`;
+  const zOrder = ctx.nextZOrder++;
+  return `<hp:run charPrIDRef="${charPrId}"><hp:pic id="${ctx.nextElementId++}" zOrder="${zOrder}" numberingType="PICTURE" textWrap="${textWrap}" textFlow="${textFlow}" lock="0" dropcapstyle="None" href="" groupLevel="0" instid="0" reverse="0"><hp:offset x="0" y="0"/><hp:orgSz width="${w}" height="${h}"/><hp:curSz width="${w}" height="${h}"/><hp:flip horizontal="0" vertical="0"/><hp:rotationInfo angle="0" centerX="${cx}" centerY="${cy}" rotateimage="1"/><hp:renderingInfo><hc:transMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/><hc:scaMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/><hc:rotMatrix e1="1" e2="0" e3="0" e4="0" e5="1" e6="0"/></hp:renderingInfo><hp:imgRect><hc:pt0 x="0" y="0"/><hc:pt1 x="${w}" y="0"/><hc:pt2 x="${w}" y="${h}"/><hc:pt3 x="0" y="${h}"/></hp:imgRect><hp:imgClip left="0" right="0" top="0" bottom="0"/><hp:inMargin left="0" right="0" top="0" bottom="0"/><hp:imgDim dimwidth="${w}" dimheight="${h}"/><hc:img binaryItemIDRef="${binId}" bright="0" contrast="0" effect="REAL_PIC" alpha="0"/><hp:effects/><hp:sz width="${w}" widthRelTo="ABSOLUTE" height="${h}" heightRelTo="ABSOLUTE" protect="0"/><hp:pos treatAsChar="${treatAsChar}" affectLSpacing="0" flowWithText="${flowWithText}" allowOverlap="${allowOverlap}" holdAnchorAndSO="0" vertRelTo="${vertRelTo}" horzRelTo="${horzRelTo}" vertAlign="${vertAlign}" horzAlign="${horzAlign}" vertOffset="${vertOffset}" horzOffset="${horzOffset}"/><hp:outMargin left="0" right="0" top="0" bottom="0"/></hp:pic><hp:t></hp:t></hp:run>`;
 }
 
 function encodeGrid(grid: GridNode, ctx: HwpxCtx): string {
   const rowCount = grid.kids.length;
 
-  // Compute true column count: max total colSpan across all rows
+  // 1단계: 가상 2D 맵핑 (Virtual Table Map) 생성
+  interface CellMap {
+    type: 'real' | 'absorbed';
+    cell?: CellNode;
+  }
+  const tableMap: CellMap[][] = Array.from({ length: rowCount }, () => []);
+
+  for (let ri = 0; ri < rowCount; ri++) {
+    let ci = 0;
+    for (const cell of grid.kids[ri].kids) {
+      while (tableMap[ri][ci]) ci++; // 이미 점유된 자리 건너뜀
+
+      tableMap[ri][ci] = { type: 'real', cell };
+
+      // 병합 영역 예약
+      for (let rr = 0; rr < cell.rs; rr++) {
+        const targetRi = ri + rr;
+        if (targetRi >= rowCount) break;
+        if (!tableMap[targetRi]) tableMap[targetRi] = [];
+        for (let cc = 0; cc < cell.cs; cc++) {
+          if (rr === 0 && cc === 0) continue;
+          tableMap[targetRi][ci + cc] = { type: 'absorbed' };
+        }
+      }
+      ci += cell.cs;
+    }
+  }
+
+  // 정확한 전체 열 개수 계산
   let colCount = 0;
-  for (const row of grid.kids) {
-    let rowCols = 0;
-    for (const cell of row.kids) rowCols += cell.cs;
-    if (rowCols > colCount) colCount = rowCols;
+  for (let ri = 0; ri < rowCount; ri++) {
+    colCount = Math.max(colCount, tableMap[ri].length);
   }
-  if (colCount === 0) colCount = grid.kids[0]?.kids.length ?? 1;
+  if (colCount === 0) colCount = 1;
 
-  // Calculate column widths in HWPUNIT
+  // 2단계: 컬럼 너비 계산
   const totalWidth = ctx.availableWidth;
-  const defaultColW = Math.round(totalWidth / (colCount || 1));
+  const defaultColW = Math.round(totalWidth / colCount);
   const colWidths: number[] = [];
   if (grid.props.colWidths && grid.props.colWidths.length === colCount) {
-    // Fill zero-width columns by distributing remaining space
     const srcPt = [...grid.props.colWidths];
     const knownTotal = srcPt.filter((w) => w > 0).reduce((s, w) => s + w, 0);
     const zeroCount = srcPt.filter((w) => w <= 0).length;
-    const remaining = Math.max(0, Metric.hwpToPt(totalWidth) - knownTotal);
+    const availPt = Metric.hwpToPt(totalWidth);
+    const remaining = Math.max(0, availPt - knownTotal);
     const zeroFill = zeroCount > 0 ? remaining / zeroCount : 0;
     for (let i = 0; i < srcPt.length; i++) {
-      if (srcPt[i] <= 0)
-        srcPt[i] = zeroFill > 0 ? zeroFill : Metric.hwpToPt(defaultColW);
+      if (srcPt[i] <= 0) srcPt[i] = zeroFill > 0 ? zeroFill : Metric.hwpToPt(defaultColW);
     }
     for (const wPt of srcPt) colWidths.push(Metric.ptToHwp(wPt));
   } else {
     for (let c = 0; c < colCount; c++) colWidths.push(defaultColW);
   }
-  // Scale to fit available width
+
   const rawTotal = colWidths.reduce((s, w) => s + w, 0);
   if (rawTotal > totalWidth * 1.05) {
     const scale = totalWidth / rawTotal;
-    for (let i = 0; i < colWidths.length; i++)
-      colWidths[i] = Math.round(colWidths[i] * scale);
+    for (let i = 0; i < colWidths.length; i++) colWidths[i] = Math.round(colWidths[i] * scale);
   }
   const actualTotal = colWidths.reduce((s, w) => s + w, 0);
 
-  // Table borderFillIDRef
-  const tblBfId = grid.props.defaultStroke
-    ? addBorderFill(ctx, grid.props.defaultStroke)
-    : 2; // default table border
-
-  // Pre-calculate row heights (max cell height per row)
+  // 3단계: 행 높이 계산
   const rowHeights: number[] = [];
-  for (const row of grid.kids) {
-    let maxH = 0;
-    for (const cell of row.kids) {
-      const h = estimateCellHeight(cell, ctx);
-      if (h > maxH) maxH = h;
+  for (let ri = 0; ri < rowCount; ri++) {
+    const row = grid.kids[ri];
+    if (row.heightPt != null && row.heightPt > 0) {
+      rowHeights.push(Metric.ptToHwp(row.heightPt));
+    } else {
+      let maxH = 0;
+      for (let ci = 0; ci < colCount; ci++) {
+        const entry = tableMap[ri][ci];
+        if (entry?.type === 'real') {
+          const h = estimateCellHeight(entry.cell!, ctx);
+          if (h > maxH) maxH = h;
+        }
+      }
+      rowHeights.push(maxH || Math.round(1000 * 1.6));
     }
-    rowHeights.push(maxH);
   }
   const totalTableHeight = rowHeights.reduce((s, h) => s + h, 0);
 
-  // Rows
+  // 4단계: XML 조립
+  const tblBfId = grid.props.defaultStroke ? addBorderFill(ctx, grid.props.defaultStroke) : 2;
   let rowsXml = "";
-  for (let ri = 0; ri < grid.kids.length; ri++) {
-    const row = grid.kids[ri];
-    const rowH = rowHeights[ri];
+
+  for (let ri = 0; ri < rowCount; ri++) {
     let cellsXml = "";
-    let colIdx = 0;
-    for (let ci = 0; ci < row.kids.length; ci++) {
-      const cell = row.kids[ci];
+    for (let ci = 0; ci < colCount; ci++) {
+      const entry = tableMap[ri][ci];
+      if (!entry || entry.type === 'absorbed') continue;
 
-      // Cell borderFill
+      const cell = entry.cell!;
+      const cp = cell.props;
       let cellBfId = tblBfId;
-      if (cell.props.bg) {
-        cellBfId = addBorderFill(
-          ctx,
-          grid.props.defaultStroke ?? DEFAULT_STROKE,
-          cell.props.bg,
-        );
+
+      const hasPerSideBorder = cp.top || cp.bot || cp.left || cp.right;
+      if (hasPerSideBorder || cp.bg) {
+        const defStroke = grid.props.defaultStroke ?? DEFAULT_STROKE;
+        cellBfId = hasPerSideBorder 
+          ? addBorderFillPerSide(ctx, cp.top ?? defStroke, cp.right ?? defStroke, cp.bot ?? defStroke, cp.left ?? defStroke, cp.bg)
+          : addBorderFill(ctx, defStroke, cp.bg);
       }
 
-      // Calculate cell width from column widths
       let cellW = 0;
-      for (
-        let sc = colIdx;
-        sc < colIdx + cell.cs && sc < colWidths.length;
-        sc++
-      )
-        cellW += colWidths[sc];
+      for (let sc = ci; sc < ci + cell.cs && sc < colWidths.length; sc++) cellW += colWidths[sc];
       if (cellW === 0) cellW = defaultColW * cell.cs;
 
-      // Cell inner width for lineseg (subtract left + right cell margins)
       const cellInnerW = Math.max(cellW - 282, 100);
+      const parasXml = cell.kids.map((p) => encodePara(p, ctx, "", cellInnerW)).join("");
 
-      // Encode cell paragraphs with correct inner width
-      const parasXml = cell.kids
-        .map((p) => encodePara(p, ctx, "", cellInnerW))
-        .join("");
-
-      cellsXml += `<hp:tc name="" header="0" hasMargin="1" protect="0" editable="0" dirty="0" borderFillIDRef="${cellBfId}"><hp:subList id="" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="${cell.props.va === "mid" ? "CENTER" : cell.props.va === "bot" ? "BOTTOM" : "TOP"}" linkListIDRef="0" linkListNextIDRef="0" textWidth="0" textHeight="0" hasTextRef="0" hasNumRef="0">${parasXml}</hp:subList><hp:cellAddr colAddr="${colIdx}" rowAddr="${ri}"/><hp:cellSpan colSpan="${cell.cs}" rowSpan="${cell.rs}"/><hp:cellSz width="${cellW}" height="${rowH}"/><hp:cellMargin left="141" right="141" top="141" bottom="141"/></hp:tc>`;
-      colIdx += cell.cs;
+      cellsXml += `<hp:tc name="" header="0" hasMargin="1" protect="0" editable="0" dirty="0" borderFillIDRef="${cellBfId}">` +
+                  `<hp:subList id="" textDirection="HORIZONTAL" lineWrap="BREAK" vertAlign="${cp.va === "mid" ? "CENTER" : cp.va === "bot" ? "BOTTOM" : "TOP"}" linkListIDRef="0" linkListNextIDRef="0" textWidth="0" textHeight="0" hasTextRef="0" hasNumRef="0">${parasXml}</hp:subList>` +
+                  `<hp:cellAddr colAddr="${ci}" rowAddr="${ri}"/><hp:cellSpan colSpan="${cell.cs}" rowSpan="${cell.rs}"/><hp:cellSz width="${cellW}" height="${rowHeights[ri]}"/><hp:cellMargin left="141" right="141" top="141" bottom="141"/></hp:tc>`;
     }
     rowsXml += `<hp:tr>${cellsXml}</hp:tr>`;
   }
 
   const headerRow = grid.props.headerRow ? ' repeatHeader="1"' : "";
-
   return `<hp:tbl id="${ctx.nextElementId++}" zOrder="0" numberingType="TABLE" textWrap="TOP_AND_BOTTOM" textFlow="BOTH_SIDES" lock="0" dropcapstyle="None" pageBreak="NONE"${headerRow} rowCnt="${rowCount}" colCnt="${colCount}" cellSpacing="0" borderFillIDRef="${tblBfId}" noAdjust="0"><hp:sz width="${actualTotal}" widthRelTo="ABSOLUTE" height="${totalTableHeight}" heightRelTo="ABSOLUTE" protect="0"/><hp:pos treatAsChar="1" affectLSpacing="0" flowWithText="1" allowOverlap="0" holdAnchorAndSO="0" vertRelTo="PARA" horzRelTo="PARA" vertAlign="TOP" horzAlign="LEFT" vertOffset="0" horzOffset="0"/><hp:outMargin left="138" right="138" top="138" bottom="138"/><hp:inMargin left="138" right="138" top="138" bottom="138"/>${rowsXml}</hp:tbl>`;
 }
 
@@ -764,6 +815,15 @@ function extractPreviewText(sheet?: SheetNode): string {
 }
 
 function esc(s: string): string {
+  if (!s) return "";
+  // 1. 내부 처리용 플레이스홀더(__EXT_0__ 등) 제거
+  s = s.replace(/__EXT_\d+__/g, "");
+  // 2. 글자 깨짐을 유발하는 쓰레기값 및 BOM 기호 명시적 제거
+  s = s.replace(/湰灧/g, "");
+  s = s.replace(/\uFEFF/g, "");
+  // 3. XML 1.0에서 허용하지 않는 보이지 않는 제어문자 모두 제거
+  s = s.replace(/[^\x09\x0A\x0D\x20-\uD7FF\uE000-\uFFFD]/g, "");
+
   return TextKit.escapeXml(s);
 }
 

package/src/encoders/md/MdEncoder.ts

@@ -1,6 +1,7 @@
 import type { Encoder } from '../../contract/encoder';
 import type { DocRoot, ParaNode, SpanNode, GridNode, ContentNode, ImgNode } from '../../model/doc-tree';
 import type { Outcome } from '../../contract/result';
+import type { Stroke } from '../../model/doc-props';
 import { succeed, fail } from '../../contract/result';
 import { TextKit } from '../../toolkit/TextKit';
 import { registry } from '../../pipeline/registry';
@@ -53,12 +54,6 @@ function encodePara(para: ParaNode, warns: string[]): string {
 }
 
 function encodeSpan(span: SpanNode, warns: string[]): string {
-  // Warn about properties that can't be represented in MD
-  if (span.props.font) warns.push(`[SHIELD] MD: 글꼴(${span.props.font}) 표현 불가 — 손실됨`);
-  if (span.props.pt) warns.push(`[SHIELD] MD: 글자 크기(${span.props.pt}pt) 표현 불가 — 손실됨`);
-  if (span.props.color) warns.push(`[SHIELD] MD: 글자 색상(#${span.props.color}) 표현 불가 — 손실됨`);
-  if (span.props.bg) warns.push(`[SHIELD] MD: 배경 색상(#${span.props.bg}) 표현 불가 — 손실됨`);
-
   let hasPageNum = false;
   const textParts: string[] = [];
   for (const kid of span.kids) {
@@ -72,6 +67,40 @@ function encodeSpan(span: SpanNode, warns: string[]): string {
   let r = textParts.join('');
   if (hasPageNum && r === '') r = '[페이지 번호]';
 
+  // Collect CSS styles for font/color/size/bg — use HTML span so fonts can be
+  // loaded externally via the page's stylesheet or @font-face rules.
+  const cssStyles: string[] = [];
+  if (span.props.font) cssStyles.push(`font-family: ${span.props.font}`);
+  if (span.props.pt) cssStyles.push(`font-size: ${span.props.pt}pt`);
+  if (span.props.color) cssStyles.push(`color: #${span.props.color}`);
+  if (span.props.bg) cssStyles.push(`background-color: #${span.props.bg}`);
+
+  const hasHtmlStyle = cssStyles.length > 0;
+
+  if (hasHtmlStyle) {
+    // When style properties are present, use HTML for all formatting so that
+    // markdown markers inside an HTML element don't break parsers.
+    if (span.props.b) cssStyles.push('font-weight: bold');
+    if (span.props.i) cssStyles.push('font-style: italic');
+    if (span.props.s) cssStyles.push('text-decoration: line-through');
+    if (span.props.u) {
+      // combine underline with possible line-through
+      const existing = cssStyles.find(s => s.startsWith('text-decoration:'));
+      if (existing) {
+        const idx = cssStyles.indexOf(existing);
+        cssStyles[idx] = existing.replace('line-through', 'underline line-through');
+        if (!existing.includes('line-through')) cssStyles[idx] = existing + ' underline';
+      } else {
+        cssStyles.push('text-decoration: underline');
+      }
+    }
+    const styleAttr = cssStyles.join('; ');
+    if (span.props.sup) return `<sup style="${styleAttr}">${r}</sup>`;
+    if (span.props.sub) return `<sub style="${styleAttr}">${r}</sub>`;
+    return `<span style="${styleAttr}">${r}</span>`;
+  }
+
+  // No CSS styles needed — use plain Markdown formatting
   if (span.props.b && span.props.i) r = `***${r}***`;
   else if (span.props.b) r = `**${r}**`;
   else if (span.props.i) r = `*${r}*`;
@@ -87,22 +116,75 @@ function encodeImage(img: ImgNode): string {
   return `![${img.alt ?? ''}](data:${img.mime};base64,${img.b64})`;
 }
 
+/** pt → CSS border shorthand (only if stroke is visible) */
+function strokeToCss(s?: Stroke): string | undefined {
+  if (!s || s.kind === 'none' || s.pt <= 0) return undefined;
+  const kindMap: Record<string, string> = { solid: 'solid', dash: 'dashed', dot: 'dotted', double: 'double', none: 'none' };
+  const style = kindMap[s.kind] ?? 'solid';
+  const px = Math.max(1, Math.round(s.pt * 96 / 72));
+  const color = s.color.startsWith('#') ? s.color : `#${s.color}`;
+  return `${px}px ${style} ${color}`;
+}
+
 function encodeGrid(grid: GridNode, warns: string[]): string {
   if (grid.kids.length === 0) return '';
 
-  // Warn about table style loss
-  if (grid.props.look) warns.push('[SHIELD] MD: 표 스타일(색상, 테두리, 머리행 강조) 표현 불가 — 손실됨');
-
-  const rows = grid.kids.map(row =>
-    `| ${row.kids.map(cell => cell.kids.map(p => encodePara(p, warns)).join(' ')).join(' | ')} |`,
-  );
+  // HTML 테이블로 출력 — 테두리/배경색을 인라인 스타일로 유지
+  const rowCount = grid.kids.length;
+
+  // Build occupancy map for rowspan
+  const occupancy: Set<number>[] = Array.from({ length: rowCount }, () => new Set());
+  let colCount = 0;
+  for (let ri = 0; ri < rowCount; ri++) {
+    const row = grid.kids[ri];
+    let ci = 0;
+    for (const cell of row.kids) {
+      while (occupancy[ri].has(ci)) ci++;
+      if (cell.rs > 1) {
+        for (let r = ri + 1; r < ri + cell.rs && r < rowCount; r++) {
+          for (let c = ci; c < ci + cell.cs; c++) occupancy[r].add(c);
+        }
+      }
+      ci += cell.cs;
+    }
+    while (occupancy[ri].has(ci)) ci++;
+    if (ci > colCount) colCount = ci;
+  }
 
-  if (rows.length > 0) {
-    const cols = grid.kids[0].kids.length;
-    rows.splice(1, 0, `| ${Array(cols).fill('---').join(' | ')} |`);
+  let rows = '';
+  for (let ri = 0; ri < rowCount; ri++) {
+    const row = grid.kids[ri];
+    let cells = '';
+    let colIdx = 0;
+
+    for (const cell of row.kids) {
+      while (occupancy[ri].has(colIdx)) colIdx++;
+
+      const cs = cell.cs > 1 ? ` colspan="${cell.cs}"` : '';
+      const rs = cell.rs > 1 ? ` rowspan="${cell.rs}"` : '';
+
+      const styles: string[] = ['padding:4px 6px', 'vertical-align:top'];
+      const top    = strokeToCss(cell.props.top);
+      const bot    = strokeToCss(cell.props.bot);
+      const left   = strokeToCss(cell.props.left);
+      const right  = strokeToCss(cell.props.right);
+      if (top)   styles.push(`border-top:${top}`);
+      if (bot)   styles.push(`border-bottom:${bot}`);
+      if (left)  styles.push(`border-left:${left}`);
+      if (right) styles.push(`border-right:${right}`);
+      if (cell.props.bg) styles.push(`background-color:#${cell.props.bg}`);
+      if (cell.props.va === 'mid') styles[1] = 'vertical-align:middle';
+      else if (cell.props.va === 'bot') styles[1] = 'vertical-align:bottom';
+
+      const tag = (grid.props.headerRow && ri === 0) || cell.props.isHeader ? 'th' : 'td';
+      const content = cell.kids.map(p => encodePara(p, warns)).join('\n');
+      cells += `<${tag}${cs}${rs} style="${styles.join(';')}">${content}</${tag}>`;
+      colIdx += cell.cs;
+    }
+    rows += `<tr>${cells}</tr>\n`;
   }
 
-  return rows.join('\n');
+  return `<table style="border-collapse:collapse;width:100%">\n<tbody>\n${rows}</tbody>\n</table>\n`;
 }
 
 registry.registerEncoder(new MdEncoder());

package/src/index.ts

@@ -10,6 +10,7 @@ import './decoders/hwpx/HwpxDecoder';
 import './decoders/docx/DocxDecoder';
 import './decoders/hwp/HwpScanner';
 import './encoders/md/MdEncoder';
+import './encoders/html/HtmlEncoder';
 import './encoders/hwpx/HwpxEncoder';
 import './encoders/docx/DocxEncoder';
 import './encoders/hwp/HwpEncoder';

package/src/model/builders.ts

@@ -54,8 +54,10 @@ export function buildGrid(kids: RowNode[], props: GridProps = {}): GridNode {
   return { tag: 'grid', props, kids };
 }
 
-export function buildRow(kids: CellNode[]): RowNode {
-  return { tag: 'row', kids };
+export function buildRow(kids: CellNode[], heightPt?: number): RowNode {
+  const node: RowNode = { tag: 'row', kids };
+  if (heightPt != null) node.heightPt = heightPt;
+  return node;
 }
 
 export function buildCell(

package/src/model/doc-tree.ts

@@ -56,7 +56,7 @@ export interface CellNode {
   kids: ParaNode[];
 }
 
-export interface RowNode  { tag: 'row'; kids: CellNode[] }
+export interface RowNode  { tag: 'row'; kids: CellNode[]; heightPt?: number }
 
 export interface GridNode {
   tag: 'grid';

package/src/pipeline/Pipeline.ts

@@ -60,8 +60,21 @@ export class Pipeline {
 }
 
 function detectFormat(data: Uint8Array): string {
-  if (data[0] === 0x50 && data[1] === 0x4B) return 'zip';
+  // HWP 파일 (OLE Compound Document)
   if (data[0] === 0xD0 && data[1] === 0xCF && data[2] === 0x11 && data[3] === 0xE0) return 'hwp';
+
+  // ZIP 기반 파일 (DOCX, HWPX)
+  if (data[0] === 0x50 && data[1] === 0x4B) {
+    // DOCX 는 [Content_Types].xml 에 application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml 이 있음
+    // HWPX 는 application/ha-xml-core-document
+    const str = new TextDecoder('utf-8', { fatal: false }).decode(data.slice(0, 4096));
+    if (str.includes('wordprocessingml')) return 'docx';
+    if (str.includes('ha-xml')) return 'hwpx';
+    if (str.includes('hwpml/')) return 'hwpx';
+    if (str.includes('word/')) return 'docx';
+    return 'hwpx'; // 기본값
+  }
+
   return 'md';
 }
 

package/src/safety/StyleBridge.ts

@@ -50,7 +50,7 @@ const ALIGN_MAP: Record<string, Align> = {
   start: 'left', end: 'right',
 };
 export function safeAlign(raw?: string): Align {
-  return ALIGN_MAP[raw ?? ''] ?? 'justify';
+  return ALIGN_MAP[raw ?? ''] ?? 'left';
 }
 
 // ─── 테두리 정규화 ─────────────────────────────────────────

package/test-docx-to-hwp.ts

@@ -0,0 +1,45 @@
+import { Pipeline } from './src/index';
+import * as fs from 'fs';
+
+async function testDocxToHwp() {
+  const inputPath = './data/sample/sample4_input.docx';
+  console.log(`\n📄 Testing DOCX → HWP conversion from: ${inputPath}`);
+  const data = fs.readFileSync(inputPath);
+
+  try {
+    const pipeline = Pipeline.open(data, 'docx');
+
+    console.log('Attempting to convert to HWP...');
+    const result = await pipeline.to('hwp');
+
+    if (result.ok) {
+      console.log(`✅ Success! HWP output: ${result.data.length} bytes`);
+
+      // Save to file for verification
+      fs.writeFileSync('./output_test.hwp', result.data);
+      console.log('Saved to: ./output_test.hwp');
+
+      // Verify by converting back to MD
+      console.log('\n--- Verifying by converting back to MD ---');
+      const verifyPipeline = Pipeline.open(result.data, 'hwp');
+      const mdResult = await verifyPipeline.to('md');
+      if (mdResult.ok) {
+        const mdText = new TextDecoder().decode(mdResult.data);
+        console.log(`Verification MD output: ${mdText.length} bytes`);
+        console.log('First 500 chars:', mdText.substring(0, 500));
+      } else {
+        console.log(`Verification failed: ${mdResult.error}`);
+      }
+    } else {
+      console.log(`❌ Failed: ${result.error}`);
+    }
+
+    return result.ok;
+  } catch (e: any) {
+    console.error(`❌ EXCEPTION: ${e.message}`);
+    console.error(e.stack);
+    return false;
+  }
+}
+
+testDocxToHwp().catch(console.error);