@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page/table/harvest.ts

@@ -0,0 +1,103 @@
+/**
+ * 캔버스에서 고친 칸 글자를 스펙으로 되받는다.
+ *
+ * 표의 칸은 평범한 ``text`` 자식이라 드릴인하면 그 자리에서 고쳐진다(Canva에서 하듯이).
+ * 그런데 다시 그리는 기준은 언제나 스펙이므로, 되받지 않으면 사용자가 **다음에 행 하나
+ * 늘리는 순간** 캔버스에서 친 글자가 스펙 값으로 덮인다. 눈에는 편집이 되는 것처럼
+ * 보이고 한참 뒤에 사라지는, 가장 나쁜 종류의 손실이다.
+ *
+ * 그래서 3-way 병합을 한다. 되받기와 패널 편집이 동시에 일어날 수 있기 때문이다 —
+ * 예를 들어 사용자가 캔버스에서 1행을 고치고, 우측 패널에서 2행을 고친 뒤 Enter를 치면
+ * 그 한 번의 재생성에 둘 다 살아야 한다.
+ *
+ *   base     = 그룹에 저장돼 있던 스펙(마지막으로 그린 그림의 근거)
+ *   canvas   = 지금 자식 ``text``에 들어 있는 글자
+ *   incoming = 이번에 적용하려는 스펙(패널·AI 편집이 만든 것)
+ *
+ * 칸마다: 캔버스가 base와 다르고 **incoming은 base 그대로**면 캔버스를 택한다. 둘 다
+ * 바뀌었으면 incoming이 이긴다 — 방금 명시적으로 지시한 쪽이라서다.
+ */
+
+import type { ElementLike } from "../spec-group/sync";
+
+import { TABLE_PART, type TableSpec } from "./types";
+
+/** ``cell:3:1`` / ``header:2`` → 어느 칸인가. 그 외 부품(바탕·선)은 ``null``. */
+export function parseCellKey(
+  key: string,
+): { kind: "cell"; row: number; column: number } | { kind: "header"; column: number } | null {
+  const cell = /^cell:(\d+):(\d+)$/.exec(key);
+  if (cell) return { kind: "cell", row: Number(cell[1]), column: Number(cell[2]) };
+  const header = /^header:(\d+)$/.exec(key);
+  if (header) return { kind: "header", column: Number(header[1]) };
+  return null;
+}
+
+/** 자식에서 (부품 키, 글자)를 뽑는다. ``text``가 아닌 부품은 글자를 들고 있지 않다. */
+function readCellTexts(children: ElementLike[]): Map<string, string> {
+  const out = new Map<string, string>();
+  for (const kid of children) {
+    if (kid.type !== "text") continue;
+    const key = (kid.custom as Record<string, unknown> | undefined)?.[TABLE_PART];
+    const value = (kid as unknown as { text?: unknown }).text;
+    if (typeof key === "string" && typeof value === "string") out.set(key, value);
+  }
+  return out;
+}
+
+/**
+ * 캔버스 편집을 ``incoming``에 얹은 스펙. 바뀐 게 없으면 ``incoming``을 그대로 돌려준다
+ * (참조가 같아야 호출부가 "달라졌는가"를 싸게 판단한다).
+ */
+export function mergeCanvasCells(
+  base: TableSpec,
+  incoming: TableSpec,
+  children: ElementLike[],
+): TableSpec {
+  const texts = readCellTexts(children);
+  if (texts.size === 0) return incoming;
+
+  let rows: string[][] | null = null;
+  let columns: string[] | null = null;
+
+  for (const [key, canvas] of texts) {
+    const at = parseCellKey(key);
+    if (!at) continue;
+
+    if (at.kind === "header") {
+      const baseValue = base.data.columns[at.column];
+      const incomingValue = incoming.data.columns[at.column];
+      if (canvas === baseValue || incomingValue !== baseValue) continue;
+      columns = columns ?? [...incoming.data.columns];
+      columns[at.column] = canvas;
+      continue;
+    }
+
+    const baseValue = base.data.rows[at.row]?.[at.column];
+    const incomingValue = incoming.data.rows[at.row]?.[at.column];
+    // 행이 아직 없는 자리(스펙보다 자식이 앞선 경우)는 건드리지 않는다.
+    if (baseValue === undefined || incomingValue === undefined) continue;
+    if (canvas === baseValue || incomingValue !== baseValue) continue;
+    rows = rows ?? incoming.data.rows.map((cells) => [...cells]);
+    rows[at.row][at.column] = canvas;
+  }
+
+  if (!rows && !columns) return incoming;
+  return {
+    ...incoming,
+    data: {
+      columns: columns ?? incoming.data.columns,
+      rows: rows ?? incoming.data.rows,
+    },
+  };
+}
+
+/**
+ * 캔버스 글자만 반영한 스펙(패널 쪽 변경 없이).
+ *
+ * 오버레이가 행·열을 건드리기 **직전**에 부른다. 행을 끼우면 인덱스가 밀려서 그 뒤로는
+ * 3-way 병합이 같은 칸을 못 알아보기 때문이다.
+ */
+export function harvestTableEdits(base: TableSpec, children: ElementLike[]): TableSpec {
+  return mergeCanvasCells(base, base, children);
+}

package/lib/detail-page/table/normalize.ts

@@ -0,0 +1,125 @@
+/**
+ * 스펙을 렌더 가능한 모양으로 맞춘다.
+ *
+ * **원본 ``spec.data``는 절대 자르지 않는다.** 종류를 ``grid`` → ``keyvalue``로 바꿨다가
+ * 되돌리면 3열이 그대로 돌아와야 한다. 줄어드는 건 그리는 부분뿐이다(차트와 같은 규칙).
+ */
+
+import type { CellAlign, TableSpec } from "./types";
+
+/** 붙여넣기·프롬프트 편집이 함께 지키는 상한. 넘으면 편집기가 아니라 스프레드시트 일이다. */
+export const MAX_ROWS = 40;
+export const MAX_COLUMNS = 8;
+
+/** ``keyvalue``는 이름/값 두 칸이다. */
+const KEYVALUE_COLUMNS = 2;
+
+export type ResolvedTable = {
+  /** 실제로 그릴 열 수. */
+  columnCount: number;
+  /** 머리글 행을 그리는가. */
+  showHeader: boolean;
+  /** 머리글 칸 글자(그릴 때만). */
+  header: string[];
+  /** 열 수에 맞춰 채우고 자른 행들(**렌더용 사본**). */
+  rows: string[][];
+  /** 열별 정렬(열 수만큼 채워짐). */
+  align: CellAlign[];
+};
+
+/** 열 인덱스의 기본 정렬. 첫 칸은 이름이라 왼쪽, 나머지도 왼쪽에서 시작한다. */
+function defaultAlign(): CellAlign {
+  return "left";
+}
+
+export function resolveTable(spec: TableSpec): ResolvedTable {
+  const declared = spec.data.columns.length;
+  const widest = spec.data.rows.reduce((max, row) => Math.max(max, row.length), 0);
+  const columnCount =
+    spec.kind === "keyvalue"
+      ? KEYVALUE_COLUMNS
+      : Math.min(MAX_COLUMNS, Math.max(1, declared || widest || 1));
+
+  const rows = spec.data.rows.slice(0, MAX_ROWS).map((row) => {
+    const cells = row.slice(0, columnCount).map((cell) => String(cell ?? ""));
+    while (cells.length < columnCount) cells.push("");
+    return cells;
+  });
+
+  const align: CellAlign[] = [];
+  for (let i = 0; i < columnCount; i += 1) {
+    align.push(spec.options.align[i] ?? defaultAlign());
+  }
+
+  // 머리글은 grid에서만. keyvalue는 이름 칸이 이미 각 행의 머리글 노릇을 한다.
+  const showHeader = spec.kind === "grid" && spec.options.headerRow;
+  const header: string[] = [];
+  if (showHeader) {
+    for (let i = 0; i < columnCount; i += 1) {
+      header.push(String(spec.data.columns[i] ?? ""));
+    }
+  }
+
+  return { columnCount, showHeader, header, rows, align };
+}
+
+/**
+ * 열 폭. 첫 칸만 고정폭을 가질 수 있고 나머지는 남는 폭을 똑같이 나눈다.
+ *
+ * 브랜드 두 곳이 첫 칸을 190px로 고정해 쓴다 — 이름 칸이 들쭉날쭉하면 값이 세로로 안 맞아
+ * 표가 무너져 보인다. 값 칸까지 폭을 스펙에 담지는 않는다(글자를 고칠 때마다 사용자가
+ * 폭을 다시 만져야 한다).
+ */
+/** 열 하나가 가질 수 있는 최소 폭. 이보다 좁으면 여백만 남아 글자가 안 보인다. */
+export const MIN_COLUMN_WIDTH = 40;
+
+/**
+ * 선언된 폭을 프레임 폭에 맞춰 비례 정규화한다.
+ *
+ * 비율만 지키므로 표를 리사이즈해도, 프레임이 바뀌어도 사용자가 잡아 둔 배분이 남는다.
+ * 최소 폭에 걸린 열은 그 값으로 고정하고 **남은 폭만** 나머지가 나눠 갖는다 — 안 그러면
+ * 정규화가 최소 폭을 다시 뭉개서 좁은 열이 사라진다.
+ */
+export function normalizeColumnWidths(declared: number[], total: number): number[] {
+  const count = declared.length;
+  if (count === 0) return [];
+  // 다 최소 폭을 줘도 넘치면 배분이 의미가 없다 — 균등하게 나눈다.
+  if (total < MIN_COLUMN_WIDTH * count) {
+    return Array.from({ length: count }, () => total / count);
+  }
+  const positive = declared.map((w) => (Number.isFinite(w) && w > 0 ? w : 0));
+  const sum = positive.reduce((a, b) => a + b, 0);
+  if (sum <= 0) return Array.from({ length: count }, () => total / count);
+
+  const scaled = positive.map((w) => (w / sum) * total);
+  const pinned = scaled.map((w) => w < MIN_COLUMN_WIDTH);
+  if (!pinned.some(Boolean)) return scaled;
+
+  const fixed = pinned.reduce((acc, isPinned) => acc + (isPinned ? MIN_COLUMN_WIDTH : 0), 0);
+  const rest = total - fixed;
+  const restSum = scaled.reduce((acc, w, i) => acc + (pinned[i] ? 0 : w), 0);
+  if (restSum <= 0) return Array.from({ length: count }, () => total / count);
+  return scaled.map((w, i) => (pinned[i] ? MIN_COLUMN_WIDTH : (w / restSum) * rest));
+}
+
+export function columnWidths(spec: TableSpec, resolved: ResolvedTable): number[] {
+  const total = Math.max(1, spec.frame.width);
+  const { columnCount } = resolved;
+
+  // 사용자가 잡아 둔 배분이 있으면 그게 우선이다. 열 수가 안 맞으면(종류를 바꿨을 때)
+  // 조용히 자동으로 돌아간다 — 엉뚱한 열에 폭이 남는 것보다 낫다.
+  const declared = spec.style.columnWidths;
+  if (declared && declared.length === columnCount) {
+    return normalizeColumnWidths(declared, total);
+  }
+
+  const first = spec.style.firstWidth;
+  if (first === null || columnCount <= 1) {
+    const even = total / columnCount;
+    return Array.from({ length: columnCount }, () => even);
+  }
+  // 첫 칸이 표를 다 먹지 않게 막는다(값 칸이 사라지면 표가 아니다).
+  const head = Math.max(40, Math.min(first, total - 60));
+  const rest = (total - head) / (columnCount - 1);
+  return [head, ...Array.from({ length: columnCount - 1 }, () => rest)];
+}

package/lib/detail-page/table/paste.ts

@@ -0,0 +1,49 @@
+/**
+ * 붙여넣은 텍스트를 표 데이터로.
+ *
+ * 표는 값을 숫자로 읽을 필요가 없다 — 칸에 들어간 글자를 그대로 쓴다("18mm · 310g",
+ * "사철 양장 · 180° 평면 펼침" 같은 값이 실제로 많다).
+ *
+ * 머리글 판정은 차트와 같은 규칙이다: 첫 행의 값 칸에서 숫자를 하나도 못 읽으면 머리글.
+ * 스펙표처럼 첫 행부터 데이터인 경우가 흔해서, 머리글이 아니라고 보면 **행을 안 버린다**.
+ */
+
+import { parseGrid } from "../spec-group/clipboard";
+import { parseChartNumber } from "../chart/format";
+
+import { MAX_COLUMNS, MAX_ROWS } from "./normalize";
+import type { TableData } from "./types";
+
+export function parseTableGrid(text: string): TableData | null {
+  const grid = parseGrid(text ?? "");
+  if (grid.length === 0) return null;
+
+  const columnCount = Math.min(
+    MAX_COLUMNS,
+    grid.reduce((most, row) => Math.max(most, row.length), 0),
+  );
+  if (columnCount === 0) return null;
+
+  const pad = (row: string[]): string[] => {
+    const cells = row.slice(0, columnCount);
+    while (cells.length < columnCount) cells.push("");
+    return cells;
+  };
+
+  const head = pad(grid[0]);
+  // 값 칸(1열 이후)에 숫자가 하나도 없고 아래에 행이 더 있으면 머리글로 본다.
+  const headLooksLikeHeader =
+    grid.length > 1 &&
+    head.slice(1).every((cell) => cell === "" || parseChartNumber(cell) === null);
+
+  const body = (headLooksLikeHeader ? grid.slice(1) : grid)
+    .slice(0, MAX_ROWS)
+    .map(pad);
+  if (body.length === 0) return null;
+
+  const columns = headLooksLikeHeader
+    ? head
+    : Array.from({ length: columnCount }, (_, i) => (i === 0 ? "항목" : `값 ${i}`));
+
+  return { columns, rows: body };
+}

package/lib/detail-page/table/preview.ts

@@ -0,0 +1,66 @@
+/**
+ * 좌측 패널 썸네일용 SVG.
+ *
+ * 별도 이미지 자산을 만들지 않고 **같은 렌더러 출력**을 SVG로 옮긴다. 그래서 프리셋을
+ * 고치면 썸네일이 저절로 따라오고, 카탈로그와 실제 결과가 어긋날 일이 없다(차트와 같다).
+ */
+
+import { renderTable } from "./render";
+import type { TableSpec } from "./types";
+
+function escapeXml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function num(value: unknown, fallback = 0): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function str(value: unknown, fallback = ""): string {
+  return typeof value === "string" ? value : fallback;
+}
+
+function nodeMarkup(props: Record<string, unknown>): string {
+  const x = num(props.x);
+  const y = num(props.y);
+  if (props.type === "figure") {
+    const radius = num(props.cornerRadius);
+    const strokeWidth = num(props.strokeWidth);
+    const stroke =
+      strokeWidth > 0 && typeof props.stroke === "string"
+        ? ` stroke="${escapeXml(props.stroke)}" stroke-width="${strokeWidth}"`
+        : "";
+    return `<rect x="${x}" y="${y}" width="${num(props.width)}" height="${num(
+      props.height,
+    )}" rx="${radius}" ry="${radius}" fill="${escapeXml(
+      str(props.fill, "#000"),
+    )}"${stroke}/>`;
+  }
+  if (props.type === "text") {
+    const value = str(props.text);
+    if (!value) return "";
+    const width = num(props.width);
+    const size = num(props.fontSize, 12);
+    const align = str(props.align, "left");
+    const anchor = align === "right" ? "end" : align === "center" ? "middle" : "start";
+    const anchorX = align === "right" ? x + width : align === "center" ? x + width / 2 : x;
+    // SVG는 baseline 기준이라 한 줄 높이의 약 0.85를 내려 앉힌다(썸네일 근사치).
+    // 썸네일은 한 줄만 보여 준다 — 접힌 줄까지 그리면 칸 높이 계산을 두 벌 갖게 된다.
+    const firstLine = value.split("\n")[0];
+    return `<text x="${anchorX}" y="${y + size * 0.85}" font-size="${size}" text-anchor="${anchor}" font-weight="${escapeXml(
+      str(props.fontWeight, "400"),
+    )}" fill="${escapeXml(str(props.fill, "#000"))}">${escapeXml(firstLine)}</text>`;
+  }
+  return "";
+}
+
+/** 스펙을 그대로 그린 미리보기 SVG 마크업. */
+export function tablePreviewSvg(spec: TableSpec): string {
+  const { nodes, size } = renderTable(spec);
+  const body = nodes.map((node) => nodeMarkup(node.props)).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size.width} ${size.height}" width="${size.width}" height="${size.height}"><g font-family="sans-serif">${body}</g></svg>`;
+}