@wipco/sdui 1.6.0 → 1.7.0

package/dist/chunk-VR4DQTWR.js

@@ -0,0 +1,391 @@
+import { useIsMobile } from './chunk-TAVKGYH5.js';
+import { boxed } from './chunk-3JTBOABA.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RECORD_SHEET_CSS = `
+.erp-recsheet__scroll{overflow-x:auto;min-width:0}
+.erp-recsheet{width:100%;min-width:clamp(40rem,100%,44rem);border-collapse:collapse;table-layout:fixed;font-size:var(--wp-size-sm)}
+.erp-recsheet td{height:var(--wp-row-h-dense);border:var(--wp-border-w) solid var(--wp-border-default);padding:var(--wp-space-1) var(--wp-space-2);color:var(--wp-text-default);vertical-align:middle;line-height:var(--wp-leading-snug);overflow-wrap:anywhere}
+.erp-recsheet td.erp-recsheet__title{background:var(--wp-surface-inverse);color:var(--wp-text-inverse);text-align:center;font-size:var(--wp-size-lg);font-weight:var(--wp-weight-semibold);letter-spacing:var(--wp-tracking-heading);padding:var(--wp-space-3) var(--wp-space-2)}
+.erp-recsheet td.erp-recsheet__label{background:var(--wp-surface-sunken);color:var(--wp-text-subtle);font-size:var(--wp-size-xs);font-weight:var(--wp-weight-semibold);text-align:center;white-space:nowrap}
+.erp-recsheet td.erp-recsheet__section{background:var(--wp-surface-brand-tint);border-top:var(--wp-border-w-strong) solid var(--wp-border-brand);color:var(--wp-text-brand);font-size:var(--wp-size-xs);font-weight:var(--wp-weight-semibold);letter-spacing:var(--wp-tracking-heading)}
+.erp-recsheet tr.erp-recsheet__gap td{border:0;padding:0;height:var(--wp-space-3)}
+.erp-recsheet td.erp-recsheet__mono{font-family:var(--wp-font-mono);font-size:var(--wp-size-xs)}
+.erp-recsheet td.erp-recsheet__photo{background:var(--wp-surface-sunken);padding:var(--wp-space-2);text-align:center}
+.erp-recsheet__img{display:block;width:100%;height:11rem;object-fit:cover;border-radius:var(--wp-radius-sm)}
+.erp-recsheet__noimg{display:flex;align-items:center;justify-content:center;width:100%;height:11rem;border:var(--wp-border-w) dashed var(--wp-border-default);border-radius:var(--wp-radius-sm);color:var(--wp-text-disabled);font-size:var(--wp-size-xs)}
+.erp-recsheet__note{margin:var(--wp-space-2) 0 0;text-align:right;color:var(--wp-text-subtle);font-size:var(--wp-size-xs)}
+.erp-recsheet__frame{position:relative;min-width:0}
+.erp-recsheet__frame::before,.erp-recsheet__frame::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:var(--wp-space-4);pointer-events:none;opacity:0;transition:opacity var(--wp-duration-fast)}
+.erp-recsheet__frame::before{left:0;background:linear-gradient(to right,color-mix(in srgb,var(--wp-text-strong) 16%,transparent),transparent)}
+.erp-recsheet__frame::after{right:0;background:linear-gradient(to left,color-mix(in srgb,var(--wp-text-strong) 16%,transparent),transparent)}
+.erp-recsheet__frame[data-more-left]::before,.erp-recsheet__frame[data-more-right]::after{opacity:1}
+.erp-recsheet-stack{display:flex;flex-direction:column;gap:var(--wp-space-3);min-width:0;font-size:var(--wp-size-sm);color:var(--wp-text-default)}
+.erp-recsheet-stack__title{padding:var(--wp-space-2) var(--wp-space-3);background:var(--wp-surface-inverse);color:var(--wp-text-inverse);font-size:var(--wp-size-lg);font-weight:var(--wp-weight-semibold);letter-spacing:var(--wp-tracking-heading);line-height:var(--wp-leading-snug);text-align:left}
+.erp-recsheet-stack__block{display:flex;flex-direction:column;min-width:0}
+.erp-recsheet-stack__head{padding:var(--wp-space-2);background:var(--wp-surface-brand-tint);border-top:var(--wp-border-w-strong) solid var(--wp-border-brand);color:var(--wp-text-brand);font-size:var(--wp-size-xs);font-weight:var(--wp-weight-semibold);letter-spacing:var(--wp-tracking-heading)}
+.erp-recsheet-stack__pairs{width:100%;border-collapse:collapse;table-layout:fixed}
+.erp-recsheet-stack__pairs :is(th,td){height:var(--wp-row-h-dense);border:var(--wp-border-w) solid var(--wp-border-default);padding:var(--wp-space-1) var(--wp-space-2);vertical-align:middle;line-height:var(--wp-leading-snug);text-align:left;overflow-wrap:anywhere}
+.erp-recsheet-stack__pairs th{width:6.5rem;background:var(--wp-surface-sunken);color:var(--wp-text-subtle);font-size:var(--wp-size-xs);font-weight:var(--wp-weight-semibold);word-break:keep-all;overflow-wrap:break-word}
+.erp-recsheet-stack__pairs td.erp-recsheet__mono{font-family:var(--wp-font-mono);font-size:var(--wp-size-xs)}
+.erp-recsheet-stack__scroll{overflow-x:auto;min-width:0;overscroll-behavior-x:contain}
+.erp-recsheet.erp-recsheet-stack__grid{min-width:0;width:100%;table-layout:auto}
+.erp-recsheet.erp-recsheet-stack__grid td{word-break:keep-all;overflow-wrap:break-word}
+.erp-recsheet.erp-recsheet-stack__grid td.erp-recsheet__label{white-space:normal;min-width:3.5rem}
+.erp-recsheet.erp-recsheet-stack__grid td.erp-recsheet__mono{white-space:nowrap}
+.erp-recsheet-stack__photo{align-self:center;width:6.5rem}
+.erp-recsheet-stack__photo :is(.erp-recsheet__img,.erp-recsheet__noimg){height:8.5rem}
+.erp-recsheet-stack .erp-recsheet__note{margin:0}
+@media print{
+  .erp-recsheet__frame::before,.erp-recsheet__frame::after{display:none}
+  .erp-recsheet__scroll{overflow-x:visible}
+  .erp-recsheet{min-width:0}
+  .erp-recsheet tr{break-inside:avoid}
+}
+`;
+function RecordSheetStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-recsheet", precedence: "medium", children: RECORD_SHEET_CSS });
+}
+function gridColumns(columns) {
+  if (typeof columns !== "number" || !Number.isFinite(columns)) return 24;
+  return Math.min(60, Math.max(1, Math.floor(columns)));
+}
+function cellClass(cell) {
+  const classes = [];
+  if (cell.kind === "label") classes.push("erp-recsheet__label");
+  else if (cell.kind === "section") classes.push("erp-recsheet__section");
+  else if (cell.kind === "photo") classes.push("erp-recsheet__photo");
+  if (cell.mono) classes.push("erp-recsheet__mono");
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+function isBlank(value) {
+  return value === null || value === void 0 || value === "";
+}
+function pickValue(cell, item) {
+  if (!item || typeof item !== "object") return void 0;
+  const row = item;
+  if (cell.fields && cell.fields.length > 0) {
+    const parts = cell.fields.map((name) => isBlank(row[name]) ? "" : String(row[name]));
+    if (parts.every((part) => part === "")) return void 0;
+    return parts.join(cell.separator ?? " ~ ");
+  }
+  if (cell.field) return row[cell.field];
+  return void 0;
+}
+function PhotoCell({ src, alt }) {
+  const [failed, setFailed] = useState(false);
+  const label = alt ?? "\uC0AC\uC9C4";
+  if (!src || failed) return /* @__PURE__ */ jsx("span", { className: "erp-recsheet__noimg", children: label });
+  return /* @__PURE__ */ jsx("img", { className: "erp-recsheet__img", src, alt: label, onError: () => setFailed(true) });
+}
+function cellContent(cell, item, repeated) {
+  if (cell.kind === "photo") return /* @__PURE__ */ jsx(PhotoCell, { src: cell.src, alt: cell.alt });
+  if (!repeated) {
+    if (!isBlank(cell.text)) return cell.text;
+    if (cell.kind === "label" || cell.kind === "section") return null;
+    return cell.placeholder ?? "-";
+  }
+  const value = pickValue(cell, item);
+  if (!isBlank(value)) return value;
+  return item ? cell.placeholder ?? "-" : null;
+}
+function renderCells(cells, items, keyPrefix) {
+  return cells.map((cell, index) => {
+    const item = items ? items[cell.source ?? 0] ?? null : null;
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: cellClass(cell),
+        colSpan: cell.span && cell.span > 1 ? cell.span : void 0,
+        rowSpan: cell.rowSpan && cell.rowSpan > 1 ? cell.rowSpan : void 0,
+        style: cell.align && cell.align !== "left" ? { textAlign: cell.align } : void 0,
+        children: cellContent(cell, item, items !== null)
+      },
+      `${keyPrefix}-${index}`
+    );
+  });
+}
+function repeatLength(sources, minRows) {
+  const longest = sources.reduce((max, source) => Math.max(max, source.length), 0);
+  return Math.max(longest, Math.max(0, Math.floor(minRows ?? 0)));
+}
+function spanOf(value, fallback = 1) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 1 ? Math.floor(value) : fallback;
+}
+function placeRecordSheetCells(rows, width) {
+  const carry = new Array(width).fill(0);
+  return rows.map((row) => {
+    const cells = row && !row.gap && Array.isArray(row.cells) ? row.cells : [];
+    const placed = [];
+    let col = 0;
+    for (const cell of cells) {
+      while (col < width && carry[col] > 0) col += 1;
+      const start = Math.min(col, width);
+      const end = Math.min(width, start + spanOf(cell?.span));
+      placed.push({ cell: cell ?? {}, start, end });
+      const rowSpan = spanOf(cell?.rowSpan);
+      if (rowSpan > 1) for (let c = start; c < end; c += 1) carry[c] = rowSpan;
+      col = end;
+    }
+    for (let c = 0; c < width; c += 1) if (carry[c] > 0) carry[c] -= 1;
+    return placed;
+  });
+}
+var isLabelLike = (cell) => cell.kind === "label" || cell.kind === "section";
+function pairsOf(cells) {
+  const pairs = [];
+  for (const cell of cells) {
+    if (isLabelLike(cell)) pairs.push({ label: cell, values: [] });
+    else if (pairs.length > 0) pairs[pairs.length - 1].values.push(cell);
+    else pairs.push({ label: null, values: [cell] });
+  }
+  return pairs;
+}
+function stackRecordSheet(rows, width) {
+  const list = Array.isArray(rows) ? rows : [];
+  const placedRows = placeRecordSheetCells(list, width);
+  const blocks = [];
+  let open = [];
+  const push = (block, part) => {
+    const last = block.parts[block.parts.length - 1];
+    if (last && last.kind === "pairs" && part.kind === "pairs") last.pairs.push(...part.pairs);
+    else if (last && last.kind === "grid" && part.kind === "grid") last.rows.push(...part.rows);
+    else block.parts.push(part);
+  };
+  list.forEach((row, index) => {
+    if (row?.gap) {
+      open = [];
+      return;
+    }
+    const placed = placedRows[index];
+    if (placed.length === 0) return;
+    if (placed.every((p) => p.cell.kind === "section")) {
+      open = placed.map((p) => ({ block: { section: p.cell, parts: [] }, start: p.start, end: p.end }));
+      blocks.push(...open.map((o) => o.block));
+      return;
+    }
+    if (open.length === 0) {
+      const block = { section: null, parts: [] };
+      blocks.push(block);
+      open = [{ block, start: 0, end: width }];
+    }
+    for (const target of open) {
+      const mine = placed.filter((p) => {
+        const owner = open.find((o) => p.start >= o.start && p.start < o.end) ?? open[0];
+        return owner === target;
+      });
+      if (mine.length === 0) continue;
+      const rest = [];
+      for (const p of mine) {
+        if (p.cell.kind === "photo") push(target.block, { kind: "photo", cell: p.cell });
+        else rest.push(p);
+      }
+      if (rest.length === 0) continue;
+      const repeated = Array.isArray(row.repeat);
+      const hasLabel = rest.some((p) => isLabelLike(p.cell));
+      const hasValue = rest.some((p) => !isLabelLike(p.cell));
+      if (!repeated && hasLabel && hasValue) {
+        push(target.block, { kind: "pairs", pairs: pairsOf(rest.map((p) => p.cell)) });
+        continue;
+      }
+      const cells = rest.map((p) => ({ ...p, start: p.start - target.start, end: p.end - target.start }));
+      push(target.block, {
+        kind: "grid",
+        rows: [
+          repeated ? {
+            cells,
+            repeat: row.repeat.map((source) => Array.isArray(source) ? source : []),
+            minRows: row.minRows
+          } : { cells }
+        ]
+      });
+    }
+  });
+  return blocks;
+}
+function gridBoundaries(rows) {
+  const set = /* @__PURE__ */ new Set();
+  for (const row of rows) for (const p of row.cells) set.add(p.start).add(p.end);
+  return [...set].sort((a, b) => a - b);
+}
+function StackGrid({ rows, keyPrefix }) {
+  const scrollRef = useRef(null);
+  const edges = useScrollEdges(scrollRef);
+  const bounds = gridBoundaries(rows);
+  const spanIn = (p) => {
+    const n = bounds.filter((b) => b >= p.start && b < p.end).length;
+    return n > 1 ? n : void 0;
+  };
+  const lines = [];
+  const cellsOf = (row, items, key) => row.cells.map((p, index) => {
+    const item = items ? items[p.cell.source ?? 0] ?? null : null;
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: cellClass(p.cell),
+        colSpan: spanIn(p),
+        style: p.cell.align && p.cell.align !== "left" ? { textAlign: p.cell.align } : void 0,
+        children: cellContent(p.cell, item, items !== null)
+      },
+      `${key}-${index}`
+    );
+  });
+  rows.forEach((row, rowIndex) => {
+    if (!row.repeat) {
+      lines.push(/* @__PURE__ */ jsx("tr", { children: cellsOf(row, null, `${keyPrefix}-r${rowIndex}`) }, `${keyPrefix}-r${rowIndex}`));
+      return;
+    }
+    const sources = row.repeat;
+    const used = new Set(row.cells.map((p) => p.cell.source ?? 0));
+    const longest = [...used].reduce((max, i) => Math.max(max, sources[i]?.length ?? 0), 0);
+    const count = longest > 0 ? longest : Math.min(1, Math.max(0, Math.floor(row.minRows ?? 0)));
+    for (let line = 0; line < count; line += 1) {
+      const key = `${keyPrefix}-r${rowIndex}-${line}`;
+      lines.push(/* @__PURE__ */ jsx("tr", { children: cellsOf(row, sources.map((source) => source[line] ?? null), key) }, key));
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "erp-recsheet__frame",
+      "data-more-left": edges.left ? "" : void 0,
+      "data-more-right": edges.right ? "" : void 0,
+      children: /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "erp-recsheet-stack__scroll", children: /* @__PURE__ */ jsx("table", { className: "erp-recsheet erp-recsheet-stack__grid", children: /* @__PURE__ */ jsx("tbody", { children: lines }) }) })
+    }
+  );
+}
+function StackPairs({ pairs, keyPrefix }) {
+  return /* @__PURE__ */ jsx("table", { className: "erp-recsheet-stack__pairs", children: /* @__PURE__ */ jsx("tbody", { children: pairs.map((pair, index) => {
+    const values = pair.values.map((cell, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      i > 0 ? " " : null,
+      cellContent(cell, null, false)
+    ] }, i));
+    const mono = pair.values.length > 0 && pair.values.every((cell) => cell.mono);
+    return /* @__PURE__ */ jsx("tr", { className: "erp-recsheet-stack__pair", children: pair.label ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("th", { scope: "row", children: pair.label.text }),
+      /* @__PURE__ */ jsx("td", { className: mono ? "erp-recsheet__mono" : void 0, children: values })
+    ] }) : /* @__PURE__ */ jsx("td", { colSpan: 2, className: mono ? "erp-recsheet__mono" : void 0, children: values }) }, `${keyPrefix}-${index}`);
+  }) }) });
+}
+function RecordSheetStack({
+  width,
+  title,
+  rows,
+  note,
+  className,
+  style
+}) {
+  const blocks = stackRecordSheet(rows, width);
+  return /* @__PURE__ */ jsxs("div", { className: className ? `erp-recsheet__frame ${className}` : "erp-recsheet__frame", style, children: [
+    /* @__PURE__ */ jsx(RecordSheetStyles, {}),
+    /* @__PURE__ */ jsxs("div", { className: "erp-recsheet-stack", children: [
+      title ? /* @__PURE__ */ jsx("div", { className: "erp-recsheet-stack__title", children: title }) : null,
+      blocks.map((block, blockIndex) => /* @__PURE__ */ jsxs("section", { className: "erp-recsheet-stack__block", children: [
+        block.section ? /* @__PURE__ */ jsx("div", { className: "erp-recsheet-stack__head", children: block.section.text }) : null,
+        block.parts.map((part, partIndex) => {
+          const key = `b${blockIndex}-p${partIndex}`;
+          if (part.kind === "photo") {
+            return /* @__PURE__ */ jsx("div", { className: "erp-recsheet-stack__photo", children: /* @__PURE__ */ jsx(PhotoCell, { src: part.cell.src, alt: part.cell.alt }) }, key);
+          }
+          if (part.kind === "pairs") return /* @__PURE__ */ jsx(StackPairs, { pairs: part.pairs, keyPrefix: key }, key);
+          return /* @__PURE__ */ jsx(StackGrid, { rows: part.rows, keyPrefix: key }, key);
+        })
+      ] }, blockIndex)),
+      note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
+    ] })
+  ] });
+}
+function RecordSheetImpl(props) {
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(
+      RecordSheetStack,
+      {
+        width: gridColumns(props.columns),
+        title: props.title,
+        rows: Array.isArray(props.rows) ? props.rows : [],
+        note: props.note
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(RecordSheetGrid, { ...props });
+}
+function RecordSheetGrid({ columns, title, rows, note, className, style }) {
+  const scrollRef = useRef(null);
+  const edges = useScrollEdges(scrollRef);
+  const width = gridColumns(columns);
+  const list = Array.isArray(rows) ? rows : [];
+  const body = [];
+  list.forEach((row, rowIndex) => {
+    if (row?.gap) {
+      body.push(
+        /* @__PURE__ */ jsx("tr", { className: "erp-recsheet__gap", children: /* @__PURE__ */ jsx("td", { colSpan: width }) }, `gap-${rowIndex}`)
+      );
+      return;
+    }
+    const cells = Array.isArray(row?.cells) ? row.cells : [];
+    if (cells.length === 0) return;
+    if (Array.isArray(row.repeat)) {
+      const sources = row.repeat.map((source) => Array.isArray(source) ? source : []);
+      const count = repeatLength(sources, row.minRows);
+      for (let line = 0; line < count; line += 1) {
+        body.push(
+          /* @__PURE__ */ jsx("tr", { children: renderCells(
+            cells,
+            sources.map((source) => source[line] ?? null),
+            `rep-${rowIndex}-${line}`
+          ) }, `rep-${rowIndex}-${line}`)
+        );
+      }
+      return;
+    }
+    body.push(/* @__PURE__ */ jsx("tr", { children: renderCells(cells, null, `row-${rowIndex}`) }, `row-${rowIndex}`));
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: className ? `erp-recsheet__frame ${className}` : "erp-recsheet__frame",
+      style,
+      "data-more-left": edges.left ? "" : void 0,
+      "data-more-right": edges.right ? "" : void 0,
+      children: /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "erp-recsheet__scroll", children: [
+        /* @__PURE__ */ jsx(RecordSheetStyles, {}),
+        /* @__PURE__ */ jsxs("table", { className: "erp-recsheet", children: [
+          /* @__PURE__ */ jsx("colgroup", { children: Array.from({ length: width }, (_, index) => /* @__PURE__ */ jsx("col", { style: { width: `${100 / width}%` } }, index)) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            title ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-recsheet__title", colSpan: width, children: title }) }) : null,
+            body
+          ] })
+        ] }),
+        note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
+      ] })
+    }
+  );
+}
+function useScrollEdges(ref) {
+  const [edges, setEdges] = useState({ left: false, right: false });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      const left = el.scrollLeft > 1;
+      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+      setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    const table = el.querySelector("table");
+    if (table) observer?.observe(table);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [ref]);
+  return edges;
+}
+var RecordSheet = boxed(RecordSheetImpl, "RecordSheet");
+
+export { RecordSheet, placeRecordSheetCells, stackRecordSheet };

package/dist/{chunk-M6H3SHIS.js → chunk-WPAZBAUW.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-BLFJMMBW.js';
+import { Button } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useEffect, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-NWYYNE3Q.js → chunk-WTQH2NI2.js}

@@ -1,4 +1,4 @@
-import { Spinner, EmptyState } from './chunk-BLFJMMBW.js';
+import { Spinner, EmptyState } from './chunk-OWM7E55U.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-HRHKQOOF.js → chunk-X7RSKFWF.js}

@@ -1,4 +1,4 @@
-import { Icon, Badge } from './chunk-BLFJMMBW.js';
+import { Icon, Badge } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-CSZCWBOE.js → chunk-XDR6HC4U.js}

@@ -6,21 +6,25 @@ var MAX_ZOOM = 1.8;
 var PINCH_CLICK_GRACE_MS = 400;
 var PAN_SLOP_PX = 6;
 var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
-function applyZoom(current, nextScale, focal) {
-  const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
+function applyZoom(current, nextScale, focal, minScale = MIN_ZOOM) {
+  const scale = clamp(nextScale, Math.min(MIN_ZOOM, minScale), MAX_ZOOM);
   return {
     scale,
     x: focal.x - (focal.x - current.x) / current.scale * scale,
     y: focal.y - (focal.y - current.y) / current.scale * scale
   };
 }
-function applyPinch(start, startDistance, startMid, distance, mid) {
+function applyPinch(start, startDistance, startMid, distance, mid, minScale = MIN_ZOOM) {
   const ratio = startDistance > 0 ? distance / startDistance : 1;
-  const zoomed = applyZoom(start, start.scale * ratio, startMid);
+  const zoomed = applyZoom(start, start.scale * ratio, startMid, minScale);
   return { ...zoomed, x: zoomed.x + mid.x - startMid.x, y: zoomed.y + mid.y - startMid.y };
 }
 function usePanZoomCanvas(options) {
   const { stopSelector, initialView } = options;
+  const minScaleRef = useRef(options.minScale ?? MIN_ZOOM);
+  minScaleRef.current = options.minScale ?? MIN_ZOOM;
+  const wheelNeedsCtrlRef = useRef(Boolean(options.wheelNeedsCtrl));
+  wheelNeedsCtrlRef.current = Boolean(options.wheelNeedsCtrl);
   const viewportRef = useRef(null);
   const dragRef = useRef(null);
   const interactedRef = useRef(false);
@@ -42,6 +46,8 @@ function usePanZoomCanvas(options) {
   const [nativeFullscreen, setNativeFullscreen] = useState(false);
   const [pseudoFullscreen, setPseudoFullscreen] = useState(false);
   const isFullscreen = nativeFullscreen || pseudoFullscreen;
+  const isFullscreenRef = useRef(isFullscreen);
+  isFullscreenRef.current = isFullscreen;
   useEffect(() => {
     const handleFullscreenChange = () => {
       setNativeFullscreen(document.fullscreenElement === viewportRef.current);
@@ -70,12 +76,13 @@ function usePanZoomCanvas(options) {
     const viewport = viewportRef.current;
     if (!viewport) return;
     const onWheel = (event) => {
+      if (wheelNeedsCtrlRef.current && !isFullscreenRef.current && !event.ctrlKey) return;
       event.preventDefault();
       interactedRef.current = true;
       const rect = viewport.getBoundingClientRect();
       const focal = { x: event.clientX - rect.left, y: event.clientY - rect.top };
       setView(
-        (current) => applyZoom(current, current.scale * (event.deltaY > 0 ? 0.9 : 1.1), focal)
+        (current) => applyZoom(current, current.scale * (event.deltaY > 0 ? 0.9 : 1.1), focal, minScaleRef.current)
       );
     };
     viewport.addEventListener("wheel", onWheel, { passive: false });
@@ -88,7 +95,7 @@ function usePanZoomCanvas(options) {
   }, []);
   const zoomAt = useCallback((nextScale, focal) => {
     interactedRef.current = true;
-    setView((current) => applyZoom(current, nextScale, focal));
+    setView((current) => applyZoom(current, nextScale, focal, minScaleRef.current));
   }, []);
   const localPoint = (event) => {
     const rect = event.currentTarget.getBoundingClientRect();
@@ -165,7 +172,7 @@ function usePanZoomCanvas(options) {
     const pinch = pinchRef.current;
     if (pinch && pointersRef.current.size >= 2) {
       const { distance, mid } = pinchGeometry();
-      setView(applyPinch(pinch.start, pinch.distance, pinch.mid, distance, mid));
+      setView(applyPinch(pinch.start, pinch.distance, pinch.mid, distance, mid, minScaleRef.current));
       return;
     }
     const pending = pendingRef.current;

package/dist/{chunk-RU5U2YMT.js → chunk-Z4JZUIKE.js}

@@ -1,6 +1,6 @@
-import { ImageLightbox } from './chunk-KZ6U6FKB.js';
-import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-YNEEJCSZ.js';
-import { Spinner, Icon, IconButton } from './chunk-BLFJMMBW.js';
+import { ImageLightbox } from './chunk-L6ODTHTX.js';
+import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-ZBX2CAOO.js';
+import { Spinner, Icon, IconButton } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-V7BWMOHO.js → chunk-Z4LFZWHH.js}

@@ -1,5 +1,5 @@
-import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-CSZCWBOE.js';
-import { IconButton, Badge } from './chunk-BLFJMMBW.js';
+import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-XDR6HC4U.js';
+import { IconButton, Badge } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-YNEEJCSZ.js → chunk-ZBX2CAOO.js}

@@ -1,5 +1,5 @@
-import { DEV } from './chunk-GSM664TX.js';
-import { warnOnce } from './chunk-BLFJMMBW.js';
+import { DEV } from './chunk-TAVKGYH5.js';
+import { warnOnce } from './chunk-OWM7E55U.js';
 import { createContext, useContext } from 'react';
 
 function isSafeNavigationTarget(to) {

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
-import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-CYfIthux.js';
-export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-CYfIthux.js';
+import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-CMikpoN5.js';
+export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-CMikpoN5.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-DmRikwZb.js';
 export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-DmRikwZb.js';
-import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-DX9juElE.js';
-export { b as DatePicker, c as DateRangePicker, d as DateRangeValue, e as TimePicker } from './DatePicker-DX9juElE.js';
+import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-BOOKdd5x.js';
+export { b as DatePicker, c as DateRangePicker, d as DateRangeValue, e as TimePicker } from './DatePicker-BOOKdd5x.js';
+import './calendar-nav-BSGsgJc4.js';
 
 /**
  * 호스트 앱 연결점 — ERP에서는 라우터·erpFetch·SSE가 하던 일을
@@ -461,9 +462,14 @@ interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     /** 선행 5px 점 — 라이브/진행 상태 */
     dot?: boolean;
     size?: 'md' | 'lg';
+    /**
+     * 긴 문구를 칸 폭 안에서 여러 줄로 감싼다(`wp-badge--wrap`, 1.6.1). 기본은 한 줄 고정 높이다.
+     * 예전에는 스펙이 style 로 height:auto·white-space:normal 등을 박아 흉내 냈다.
+     */
+    wrap?: boolean;
     children?: React__default.ReactNode;
 }
-declare function Badge({ tone, dot, size, children, className, ...rest }: BadgeProps): React__default.JSX.Element;
+declare function Badge({ tone, dot, size, wrap, children, className, ...rest }: BadgeProps): React__default.JSX.Element;
 interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     /** 선행 점의 CSS 색상 */
     color?: string;
@@ -768,6 +774,8 @@ interface ResultTableColumn<T> {
     strong?: boolean;
     /** CSS width — "180px", "22%" */
     width?: string;
+    /** 한 줄로 둔다 — `wp-table__nowrap`(white-space:nowrap). 날짜·번호처럼 갈라지면 읽기 어려운 짧은 값. */
+    nowrap?: boolean;
     /**
      * 칸 이름(문자열) — 각 `<td data-label>` 로 나간다. 좁은 화면에서 표를 행 카드로 쌓을 때
      * 칸마다 "무슨 값인지"를 CSS(`attr(data-label)`)가 붙인다. 생략하면 `header` 가 문자열일
@@ -779,6 +787,12 @@ interface ResultTableColumn<T> {
      * `title`: 카드 머리(라벨 없이 굵게), `hide`: 모바일 카드에서 숨김.
      */
     mobile?: 'title' | 'hide';
+    /**
+     * 태블릿(768–1023.98px) 표에서의 역할 — `data-tablet` 속성으로 th·td 둘 다에 나간다(모양은 소비자 CSS).
+     * `hide`: 태블릿 폭의 표에서 이 열을 뺀다. 모바일 행 카드(`mobile`)와는 따로다 — 태블릿에서 빼고 싶은 긴
+     * 목록 열이 폰 카드에서는 값이 있어야 하는 경우가 있다(예전에는 `mobile:'hide'` 를 태블릿에도 빌려 썼다).
+     */
+    tablet?: 'hide';
     render?: (row: T, index: number) => React__default.ReactNode;
 }
 type SortDir = 'asc' | 'desc';
@@ -793,7 +807,16 @@ interface ResultTableProps<T extends {
     };
     onSort?: (key: string) => void;
     onRowClick?: (row: T) => void;
+    /** 체크박스로 고른 행 — `aria-selected="true"`(선택 바탕)만 붙는다. SearchResults 의 일괄 선택이 여기로 온다. */
     selectedIds?: string[];
+    /**
+     * 표시 전용 강조 행(1.6.1) — `aria-current="true"` + `wp-row--selected` 클래스. 체크박스 선택과 별개다:
+     * 옆 창에 열어 둔 행처럼 "지금 보고 있는 것"을 가리킬 뿐, 일괄 액션의 대상이 되지 않는다.
+     * 그래서 체크 선택의 `aria-selected` 를 빌리지 않는다 — 같은 속성이면 스크린리더가 둘을 "선택됨"으로
+     * 똑같이 읽는다. 바탕·막대는 클래스가 칠한다(aria-selected 규칙에 기대지 않는다).
+     * SearchResults 의 `selectedIds` 가 이리로 온다. id 비교는 문자열로 한다(행 id 가 숫자인 JSON 도 맞게).
+     */
+    pickedIds?: readonly string[];
     /** rows가 비었을 때 표 대신 렌더 */
     empty?: React__default.ReactNode;
     /** true면 스크롤 창 안에서 보이는 행만 렌더한다 */
@@ -811,7 +834,7 @@ interface ResultTableProps<T extends {
 }
 declare function ResultTable<T extends {
     id: string;
-}>({ columns, rows, sort, onSort, onRowClick, selectedIds, empty, virtual, height, rowHeight, stackable, }: ResultTableProps<T>): React__default.JSX.Element;
+}>({ columns, rows, sort, onSort, onRowClick, selectedIds, pickedIds, empty, virtual, height, rowHeight, stackable, }: ResultTableProps<T>): React__default.JSX.Element;
 interface ResultEmptyStateProps {
     /** 목록 이름 — 기본 문구에 들어간다("대여 이력이 없습니다") */
     title: string;
@@ -1139,6 +1162,10 @@ interface SearchColumn<T> {
      * 아무 열도 `title` 이 아니면 `primaryKey` 열, 그다음 첫 `strong` 열이 머리가 된다.
      */
     mobile?: 'title' | 'hide';
+    /** 태블릿(768–1023.98px) 표에서 이 열을 뺀다(`hide`) — 모바일 카드의 `mobile` 과 따로 정한다. */
+    tablet?: 'hide';
+    /** 표 칸을 한 줄로 둔다(`wp-table__nowrap`). */
+    nowrap?: boolean;
     accessor?: (item: T) => string | number | Date | null | undefined;
     render?: (item: T) => React__default.ReactNode;
 }
@@ -1277,6 +1304,17 @@ interface SearchResultsProps<T> {
      * (asset-18). endpoint 목록(RemoteSearchResults)은 이 값을 켠다.
      */
     serverFiltered?: boolean;
+    /**
+     * 표시 전용 강조(1.6.1) — 이 id 의 행(목록 보기)·카드(카드 보기)를 강조한다. 체크박스 선택(`actions`)과
+     * **별개**다: 일괄 액션의 대상이 되지 않고, 선택 바도 세우지 않는다. 옆 창·상세에 열어 둔 행을 목록에서
+     * 가리키는 자리다 — 스펙은 `"selectedIds": [{"$state":"rt.$picked.id"}]` 처럼 준다.
+     *
+     * 행은 `aria-current="true"` + `wp-row--selected`, 카드는 `wp-card--selected` + `is-selected` +
+     * `aria-current="true"` 다. 체크 선택의 `aria-selected` 는 쓰지 않는다 — 스크린리더가 강조와 체크 선택을
+     * 똑같이 "선택됨"으로 읽게 되고, 카드(버튼·일반 상자 역할)는 aria-selected 를 가질 수도 없다. 비교는
+     * 문자열로 하고, 바인딩이 아직 비어 `null`·`undefined` 인 원소는 버린다.
+     */
+    selectedIds?: string[];
 }
 /**
  * 스펙이 준 페이지 크기 목록을 다듬는다 — 양의 정수만, 중복 제거, 오름차순.
@@ -1285,7 +1323,7 @@ interface SearchResultsProps<T> {
 declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
 declare function SearchResults<T extends {
     id: string;
-}>({ item, columns, gridConfig, leftFilters, rightFilters, tabs, summary, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, serverUnsortable, primaryKey, emptyTitle, emptyText, serverFiltered, }: SearchResultsProps<T>): React__default.JSX.Element;
+}>({ item, columns, gridConfig, leftFilters, rightFilters, tabs, summary, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, serverUnsortable, primaryKey, emptyTitle, emptyText, serverFiltered, selectedIds, }: SearchResultsProps<T>): React__default.JSX.Element;
 
 /**
  * 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.
@@ -1473,6 +1511,13 @@ interface SduiSearchColumn {
      * `hide`: 모바일에서 숨김(식별자·보조 열). 생략하면 보통 칸(라벨 + 값).
      */
     mobile?: 'title' | 'hide';
+    /**
+     * 태블릿(768–1023.98px) 표에서의 역할 — `hide`: 이 폭의 표에서 열을 뺀다. 모바일 카드(`mobile`)와 따로다:
+     * 태블릿 표에서는 넘치는 긴 목록 열이라도 폰 카드에서는 보여 줄 수 있다. 생략하면 태블릿에서도 보인다.
+     */
+    tablet?: 'hide';
+    /** 표 칸을 한 줄로 둔다(white-space:nowrap) — 날짜·번호처럼 두 줄로 갈라지면 읽기 어려운 짧은 값. */
+    nowrap?: boolean;
     /** 셀 표현. 생략하면 row[key]를 그대로 출력한다 — 어휘는 `cells.tsx` 참고 */
     cell?: SduiCell;
 }
@@ -1577,6 +1622,11 @@ interface SduiSearchCommonProps {
      * 조건이 없으면 빈 문자열. 생략하면 아무것도 적지 않는다.
      */
     queryStateKey?: string;
+    /**
+     * 표시 전용 강조 — 이 id 의 행·카드를 강조한다(체크박스 선택과 별개, 일괄 액션 대상 아님).
+     * 옆 창에 열어 둔 행을 가리키는 자리: `"selectedIds": [{"$state":"rt.$picked.id"}]`. 계약은 SearchResultsProps.selectedIds.
+     */
+    selectedIds?: string[];
 }
 interface SduiSearchResultsProps extends SduiSearchCommonProps {
     data: SearchRow[];