@wipco/sdui 1.4.2 → 1.6.0

package/dist/rich.js

@@ -1,10 +1,11 @@
-import { useOptionalModule, DependencyPlaceholder } from './chunk-YVTV4ZV6.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-RWSH2MBU.js';
+import { useOptionalModule, DependencyPlaceholder } from './chunk-NWYYNE3Q.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-X2NIRVLN.js';
+import './chunk-BITS7UJY.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import './chunk-XQPTSEJC.js';
-import { useSduiAssetResolver } from './chunk-KO6OEY3G.js';
-import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';
-import './chunk-5WW4MBRO.js';
+import { useSduiAssetResolver } from './chunk-YNEEJCSZ.js';
+import './chunk-GSM664TX.js';
+import { Spinner, EmptyState } from './chunk-BLFJMMBW.js';
+import './chunk-3JTBOABA.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -47,24 +48,140 @@ function useSeriesPalette(ref) {
   return palette;
 }
 var formatNumber = (v) => v.toLocaleString("ko-KR", { maximumFractionDigits: 1 });
+var eokText = (abs) => {
+  const eok = abs / 1e8;
+  return `${eok.toLocaleString("ko-KR", { maximumFractionDigits: eok >= 100 ? 0 : 1 })}\uC5B5`;
+};
+var manText = (abs) => {
+  const man = abs / 1e4;
+  return `${man.toLocaleString("ko-KR", { maximumFractionDigits: man >= 100 ? 0 : 1 })}\uB9CC`;
+};
 var formatCurrency = (v) => {
   const sign = v < 0 ? "-" : "";
   const abs = Math.abs(v);
-  if (abs >= 1e8) {
-    const eok = abs / 1e8;
-    return `${sign}${eok.toLocaleString("ko-KR", { maximumFractionDigits: eok >= 100 ? 0 : 1 })}\uC5B5`;
-  }
-  if (abs >= 1e4) {
-    return `${sign}${Math.round(abs / 1e4).toLocaleString("ko-KR")}\uB9CC`;
-  }
+  if (abs >= 1e8) return `${sign}${eokText(abs)}`;
+  if (abs >= 1e4) return `${sign}${manText(abs)}`;
   return `${sign}${abs.toLocaleString("ko-KR")}`;
 };
+var currencyAxisFormatter = (maxAbs) => {
+  if (!(maxAbs >= 1e5)) return (v) => v.toLocaleString("ko-KR", { maximumFractionDigits: 1 });
+  return (v) => {
+    const abs = Math.abs(v);
+    if (abs === 0) return "0";
+    const sign = v < 0 ? "-" : "";
+    return `${sign}${abs >= 1e8 ? eokText(abs) : manText(abs)}`;
+  };
+};
 var formatPercent = (v) => `${v.toLocaleString("ko-KR", { maximumFractionDigits: 1 })}%`;
 var getFormatter = (format) => {
   if (format === "currency") return formatCurrency;
   if (format === "percent") return formatPercent;
   return formatNumber;
 };
+var axisFormatter = (format, extent) => format === "currency" ? currencyAxisFormatter(extent.maxAbs) : getFormatter(format);
+function axisExtent(rows, series) {
+  let maxAbs = 0;
+  let allInteger = true;
+  for (const row of rows) {
+    if (row === null || typeof row !== "object") continue;
+    const positive = /* @__PURE__ */ new Map();
+    const negative = /* @__PURE__ */ new Map();
+    for (const s of series) {
+      const raw = row[s.key];
+      if (raw === null || raw === void 0 || raw === "" || typeof raw === "boolean") continue;
+      const n = Number(raw);
+      if (!Number.isFinite(n)) continue;
+      if (!Number.isInteger(n)) allInteger = false;
+      if (s.stack) {
+        const bucket = n >= 0 ? positive : negative;
+        bucket.set(s.stack, (bucket.get(s.stack) ?? 0) + n);
+      } else {
+        maxAbs = Math.max(maxAbs, Math.abs(n));
+      }
+    }
+    for (const total of [...positive.values(), ...negative.values()]) {
+      maxAbs = Math.max(maxAbs, Math.abs(total));
+    }
+  }
+  return { maxAbs, allInteger };
+}
+function estimateTextWidth(text, fontSize = 12) {
+  let w = 0;
+  for (const ch of text) {
+    if (/\s/.test(ch)) w += fontSize * 0.3;
+    else if (/[\u1100-\u11ff\u3000-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/.test(ch)) w += fontSize;
+    else w += fontSize * 0.6;
+  }
+  return w;
+}
+function wrapLabel(label, maxWidth, measure) {
+  const text = label.trim();
+  if (!text) return [""];
+  if (!(maxWidth > 0) || measure(text) <= maxWidth) return [text];
+  const lines = [];
+  let line = "";
+  const push = () => {
+    if (line.trim()) lines.push(line.trim());
+    line = "";
+  };
+  for (const word of text.split(/(\s+)/)) {
+    if (!word) continue;
+    const candidate = line + word;
+    if (measure(candidate.trim()) <= maxWidth) {
+      line = candidate;
+      continue;
+    }
+    if (/^\s+$/.test(word)) {
+      push();
+      continue;
+    }
+    push();
+    if (measure(word) <= maxWidth) {
+      line = word;
+      continue;
+    }
+    const chars = [...word];
+    const total = measure(word);
+    const parts = Math.ceil(total / maxWidth);
+    let acc = 0;
+    let boundary = total / parts;
+    for (const ch of chars) {
+      const w = measure(ch);
+      if (line && acc + w / 2 > boundary + 0.01) {
+        push();
+        boundary += total / parts;
+      }
+      line += ch;
+      acc += w;
+    }
+  }
+  push();
+  return lines.length > 0 ? lines : [text];
+}
+var TICK_FONT = 12;
+var TICK_LINE_H = 14;
+var MAX_TICK_LINES = 3;
+function planXTicks(labels, bandWidth, measure) {
+  if (!(bandWidth > 0) || labels.length === 0) return { mode: "skip" };
+  const room = Math.max(0, bandWidth - 6);
+  const lines = /* @__PURE__ */ new Map();
+  let maxLines = 1;
+  let fits = room >= TICK_FONT;
+  for (const label of labels) {
+    const wrapped = wrapLabel(label, room, measure);
+    lines.set(label.trim(), wrapped);
+    maxLines = Math.max(maxLines, wrapped.length);
+    if (wrapped.some((line) => measure(line) > room + TICK_FONT / 2)) fits = false;
+  }
+  if (fits && maxLines <= MAX_TICK_LINES) {
+    return { mode: "wrap", lines, height: Math.ceil(8 + maxLines * TICK_LINE_H + 4) };
+  }
+  if (bandWidth * Math.SQRT1_2 >= TICK_FONT * 1.25) {
+    const longest = Math.max(...labels.map((label) => measure(label)));
+    return { mode: "rotate", height: Math.ceil(8 + (longest + TICK_FONT) * Math.SQRT1_2 + 4) };
+  }
+  return { mode: "skip" };
+}
 var tooltipBoxStyle = {
   background: "var(--wp-surface-card)",
   border: "1px solid var(--wp-border-subtle)",
@@ -80,7 +197,7 @@ var dotStyle = (color) => ({
   background: color,
   flexShrink: 0
 });
-function renderTooltipContent(props, format) {
+function renderTooltipContent(props, formatOf) {
   const { active, payload, label } = props;
   if (!active || !payload || payload.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { style: tooltipBoxStyle, children: [
@@ -88,7 +205,7 @@ function renderTooltipContent(props, format) {
     /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 2 }, children: payload.filter((entry) => entry.type !== "none").map((entry, i) => {
       const fillFromDatum = entry.payload !== null && typeof entry.payload === "object" ? entry.payload.fill : void 0;
       const color = entry.color ?? fillFromDatum ?? "var(--wp-text-muted)";
-      const value = typeof entry.value === "number" ? format(entry.value) : String(entry.value ?? "");
+      const value = typeof entry.value === "number" ? formatOf(entry)(entry.value) : String(entry.value ?? "");
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -169,6 +286,9 @@ function SliceLegendTable({
       style: {
         flex: "none",
         minWidth: 148,
+        // 차트 옆 한 줄에서는 차트가 남는 폭을 다 먹어 여백이 0이다. 좁아서 아래 줄로
+        // 내려가면(wp-chart__split 이 wrap) 혼자 남은 줄에서 가운데에 선다.
+        marginInline: "auto",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
@@ -208,7 +328,60 @@ function SliceLegendTable({
     }
   );
 }
+var measureCanvas;
+function makeMeasure(fontFamily) {
+  if (measureCanvas === void 0) {
+    try {
+      measureCanvas = typeof document !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+    } catch {
+      measureCanvas = null;
+    }
+  }
+  const ctx = measureCanvas;
+  if (!ctx || !fontFamily) return (text) => estimateTextWidth(text, TICK_FONT);
+  const font = `${TICK_FONT}px ${fontFamily}`;
+  return (text) => {
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  };
+}
+function useHostBox(ref, enabled) {
+  const [box, setBox] = useState({
+    width: 0,
+    fontFamily: null
+  });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || el === null) return;
+    const read = () => {
+      const width = Math.round(el.getBoundingClientRect().width);
+      const fontFamily = getComputedStyle(el).fontFamily || null;
+      setBox((prev) => prev.width === width && prev.fontFamily === fontFamily ? prev : { width, fontFamily });
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+  return box;
+}
 var axisTick = { fill: "var(--wp-text-muted)", fontSize: 12 };
+var SIDE_LEGEND_CHART_MIN = 96;
+function renderCategoryTick(plan) {
+  const CategoryTick = (props) => {
+    const x = Number(props.x) || 0;
+    const y = Number(props.y) || 0;
+    const label = String(props.payload?.value ?? "");
+    const textStyle = { fill: axisTick.fill, fontSize: axisTick.fontSize };
+    if (plan.mode === "rotate") {
+      return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx("text", { x: 0, y: 0, dy: "0.71em", textAnchor: "end", transform: "rotate(-45)", style: textStyle, children: label }) });
+    }
+    const lines = plan.lines.get(label.trim()) ?? [label];
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx("text", { x: 0, y: 0, textAnchor: "middle", style: textStyle, children: lines.map((line, i) => /* @__PURE__ */ jsx("tspan", { x: 0, dy: i === 0 ? "0.71em" : TICK_LINE_H, children: line }, i)) }) });
+  };
+  return CategoryTick;
+}
 function Chart({
   type,
   data,
@@ -220,11 +393,16 @@ function Chart({
   legendPlacement = "bottom",
   legendTotal,
   donutCenter,
-  emptyText
+  emptyText,
+  rightValueFormat = "number",
+  integer,
+  xTickWrap = false
 }) {
   const hostRef = useRef(null);
   const palette = useSeriesPalette(hostRef);
   const recharts = useOptionalModule(loadRecharts);
+  const cartesianType = type === "bar" || type === "line" || type === "composed";
+  const hostBox = useHostBox(hostRef, xTickWrap === true && cartesianType);
   const resolveColor = useCallback(
     (color, index) => {
       if (!color) return palette[index % palette.length];
@@ -270,7 +448,7 @@ function Chart({
     XAxis,
     YAxis
   } = recharts.module;
-  const tooltipContent = (props) => renderTooltipContent(props, format);
+  const tooltipContent = (props) => renderTooltipContent(props, () => format);
   if (type === "donut" || type === "pie") {
     const nameKey = xKey ?? "name";
     const valueKey = seriesList[0].key;
@@ -283,7 +461,7 @@ function Chart({
     const chartArea = /* @__PURE__ */ jsxs(
       "div",
       {
-        style: sideLegend ? { position: "relative", flex: "1 1 0%", minWidth: 0, height } : { position: "relative", width: "100%", height },
+        style: sideLegend ? { position: "relative", flex: `1 1 ${SIDE_LEGEND_CHART_MIN}px`, minWidth: 0, height } : { position: "relative", width: "100%", height },
         children: [
           /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
             /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent }),
@@ -333,17 +511,24 @@ function Chart({
       };
       const denomOverride = Number(legendTotal);
       return shell(
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--wp-space-6)" }, children: [
-          chartArea,
-          /* @__PURE__ */ jsx(
-            SliceLegendTable,
-            {
-              rows: rows.map((row, i) => ({ ...legendItems2[i], value: sliceValue(row) })),
-              format,
-              total: legendTotal !== void 0 && Number.isFinite(denomOverride) ? denomOverride : void 0
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "wp-chart__split",
+            style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--wp-space-6)" },
+            children: [
+              chartArea,
+              /* @__PURE__ */ jsx(
+                SliceLegendTable,
+                {
+                  rows: rows.map((row, i) => ({ ...legendItems2[i], value: sliceValue(row) })),
+                  format,
+                  total: legendTotal !== void 0 && Number.isFinite(denomOverride) ? denomOverride : void 0
+                }
+              )
+            ]
+          }
+        )
       );
     }
     return shell(
@@ -369,6 +554,25 @@ function Chart({
     color: resolveColor(s.color, i),
     dashed: kindOf(s) === "dashed-line"
   }));
+  const onRight = (s) => s.axis === "right";
+  const dual = seriesList.some(onRight) && seriesList.some((s) => !onRight(s));
+  const axisIdOf = (s) => dual ? onRight(s) ? "right" : "left" : void 0;
+  const extentOf = (list) => axisExtent(
+    rows,
+    list.map((s) => ({ key: s.key, stack: kindOf(s) === "bar" ? s.stack : void 0 }))
+  );
+  const leftExtent = extentOf(dual ? seriesList.filter((s) => !onRight(s)) : seriesList);
+  const rightExtent = dual ? extentOf(seriesList.filter(onRight)) : null;
+  const allowDecimals = (extent) => typeof integer === "boolean" ? !integer : !extent.allInteger;
+  const tickCountFor = (extent) => !allowDecimals(extent) && extent.maxAbs < 4 ? Math.max(2, Math.ceil(extent.maxAbs) + 1) : void 0;
+  const leftTickFormat = axisFormatter(valueFormat, leftExtent);
+  const rightFormat = getFormatter(rightValueFormat);
+  const rightTickFormat = rightExtent ? axisFormatter(rightValueFormat, rightExtent) : rightFormat;
+  const rightKeys = new Set(dual ? seriesList.filter(onRight).map((s) => s.key) : []);
+  const cartesianTooltip = (props) => renderTooltipContent(
+    props,
+    (entry) => typeof entry.dataKey === "string" && rightKeys.has(entry.dataKey) ? rightFormat : format
+  );
   const marks = seriesList.map((s, i) => {
     const color = resolveColor(s.color, i);
     const name = s.label ?? s.key;
@@ -380,6 +584,7 @@ function Chart({
           name,
           fill: color,
           stackId: s.stack,
+          yAxisId: axisIdOf(s),
           maxBarSize: 48,
           radius: barRadius(s, i),
           isAnimationActive: false
@@ -396,6 +601,7 @@ function Chart({
         stroke: color,
         strokeWidth: 2,
         strokeDasharray: kindOf(s) === "dashed-line" ? "6 4" : void 0,
+        yAxisId: axisIdOf(s),
         dot: false,
         activeDot: { r: 4, strokeWidth: 2, stroke: "var(--wp-surface-card)" },
         isAnimationActive: false
@@ -403,8 +609,27 @@ function Chart({
       s.key
     );
   });
+  const margin = { top: 8, right: 8, bottom: 0, left: 0 };
+  const Y_AXIS_WIDTH = 52;
+  let xTick = {};
+  if (xTickWrap && hostBox.width > 0) {
+    const labels = rows.map((row) => String((xKey ? row[xKey] : void 0) ?? ""));
+    const plotWidth = hostBox.width - margin.left - margin.right - Y_AXIS_WIDTH * (dual ? 2 : 1);
+    const plan = planXTicks(labels, plotWidth / Math.max(1, labels.length), makeMeasure(hostBox.fontFamily));
+    if (plan.mode !== "skip") {
+      xTick = { interval: 0, height: plan.height, tick: renderCategoryTick(plan) };
+    }
+  }
   const axes = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--wp-divider)", vertical: false }),
+    /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: "var(--wp-divider)",
+        vertical: false,
+        yAxisId: dual ? "left" : void 0
+      }
+    ),
     /* @__PURE__ */ jsx(
       XAxis,
       {
@@ -412,28 +637,45 @@ function Chart({
         tickLine: false,
         axisLine: { stroke: "var(--wp-border-subtle)" },
         tick: axisTick,
-        tickMargin: 6
+        tickMargin: 6,
+        ...xTick
       }
     ),
     /* @__PURE__ */ jsx(
       YAxis,
       {
+        yAxisId: dual ? "left" : void 0,
         tickLine: false,
         axisLine: false,
         tick: axisTick,
-        tickFormatter: (v) => format(v),
-        width: 52
+        tickFormatter: (v) => leftTickFormat(v),
+        allowDecimals: allowDecimals(leftExtent),
+        tickCount: tickCountFor(leftExtent),
+        width: Y_AXIS_WIDTH
       }
     ),
+    dual && rightExtent ? /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        yAxisId: "right",
+        orientation: "right",
+        tickLine: false,
+        axisLine: false,
+        tick: axisTick,
+        tickFormatter: (v) => rightTickFormat(v),
+        allowDecimals: allowDecimals(rightExtent),
+        tickCount: tickCountFor(rightExtent),
+        width: Y_AXIS_WIDTH
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       Tooltip,
       {
         cursor: hasBar ? { fill: "var(--wp-surface-sunken)", fillOpacity: 0.5 } : { stroke: "var(--wp-border-subtle)", strokeDasharray: "3 3" },
-        content: tooltipContent
+        content: cartesianTooltip
       }
     )
   ] });
-  const margin = { top: 8, right: 8, bottom: 0, left: 0 };
   const cartesian = type === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: rows, margin, children: [
     axes,
     marks

package/dist/styles.css

@@ -326,11 +326,20 @@
 .wp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .wp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .wp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-@media (max-width: 900px) {
-  .wp-grid--3, .wp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+/* 반응형 경계는 LAYOUT_CSS(layout.ts)·env.ts 와 같은 계약 — mobile ≤767.98 · tablet ≤1023.98.
+   `screen and` 는 인쇄 용지 폭이 max-width 에 걸리지 않게 한다. 예전 900/600 은 이 계약 이전 값. */
+/* `.wp-grid--nocollapse`(Grid collapse:false) 는 어느 폭에서도 열을 지킨다 — 접힘 규칙 전부가 비켜선다(LAYOUT_CSS·ERP §1 과 같은 계약). */
+@media screen and (max-width: 1023.98px) {
+  .wp-grid--3:where(:not(.wp-grid--nocollapse)), .wp-grid--4:where(:not(.wp-grid--nocollapse)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
-@media (max-width: 600px) {
-  .wp-grid--2, .wp-grid--3, .wp-grid--4 { grid-template-columns: minmax(0, 1fr); }
+@media screen and (max-width: 767.98px) {
+  .wp-grid--2:where(:not(.wp-grid--nocollapse)), .wp-grid--3:where(:not(.wp-grid--nocollapse)), .wp-grid--4:where(:not(.wp-grid--nocollapse)) { grid-template-columns: minmax(0, 1fr); }
+}
+/* Grid template(.wp-grid--custom)·nocollapse·5/6열·KV 블록·카드 포커스 링은 렌더러가 LAYOUT_CSS 로 들고
+   다닌다(SduiRenderer 가 hoist). 여기 사본은 렌더러 없이 컴포넌트를 직접 쓰는 소비자용이다. */
+.wp-grid--custom { grid-template-columns: var(--wp-grid-template); }
+@media screen and (max-width: 767.98px) {
+  .wp-grid--custom:where(:not(.wp-grid--nocollapse)) { grid-template-columns: minmax(0, 1fr); }
 }
 .wp-spacer { flex: 1; }
 /*
@@ -361,6 +370,7 @@
 .wp-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 7px var(--wp-space-4); align-items: baseline; }
 .wp-kv__k { font-size: 12px; font-weight: 600; color: var(--wp-text-muted); }
 .wp-kv__v { font-size: 13px; color: var(--wp-text-default); min-width: 0; overflow-wrap: anywhere; }
+.wp-kv > .wp-kv__v--block { grid-column: 1 / -1; text-align: left; white-space: pre-wrap; }
 .wp-kv__tags, .wp-cell-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
 
 /* ---------- 버튼 ---------- */
@@ -572,6 +582,7 @@
 .wp-card--selected { border-color: var(--wp-navy-600); }
 .wp-card--interactive { cursor: pointer; transition: box-shadow 0.12s, transform 0.12s; }
 .wp-card--interactive:hover { box-shadow: var(--wp-shadow-md); transform: translateY(-1px); }
+.wp-card--interactive[role=button]:focus-visible { outline: none; box-shadow: var(--wp-ring-focus); }
 /* 표지 — 머리 위에 꽉 차게 깔린다. 카드가 overflow를 자르지 않으므로 위 두 모서리는
    여기서 직접 깎는다(카드 곡률에서 테두리 1px을 뺀 값). */
 .wp-card__cover {
@@ -722,6 +733,30 @@
 .wp-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 .wp-table__mono { font-family: var(--wp-font-mono); font-size: 12px; }
 .wp-table__strong { font-weight: 600; color: var(--wp-text-strong); }
+/*
+ * 좁은 폭의 목록 표(1.6) — ResultTable 이 비가상 표를 .wp-table-scroll 로 감싸고
+ * table.wp-table--stackable + td[data-label]·[data-mobile] 을 낸다. 데스크톱에서는 규칙이 없어
+ * 예전과 같다(상자가 overflow 가 되면 칸 안의 떠 있는 메뉴가 잘린다 — 넘칠 수 있는 폭에서만 켠다).
+ * ERP 는 이 시트를 읽지 않고 responsive.css 에 같은 규칙을 둔다 — 편집기 미리보기를 맞추는 사본이다.
+ */
+@media screen and (max-width: 1023.98px) {
+  .wp-table-scroll { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; }
+}
+@media screen and (max-width: 767.98px) {
+  .wp-table.wp-table--stackable { display: block; }
+  .wp-table--stackable thead { display: none; }
+  .wp-table--stackable tbody { display: flex; flex-direction: column; gap: 8px; }
+  .wp-table--stackable tbody tr { position: relative; display: flex; flex-direction: column; padding: 10px 14px; background: var(--wp-surface-card); border: var(--wp-border-w) solid var(--wp-border-subtle); border-radius: var(--wp-radius-card); }
+  .wp-table--stackable.wp-table--hover tbody tr:hover { background: var(--wp-surface-card); }
+  .wp-table--stackable tbody tr[aria-selected='true'] { border-color: var(--wp-navy-600); background: var(--wp-surface-selected); }
+  .wp-table--stackable tbody td { display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 3px 0; border: 0; white-space: normal; text-align: left; min-width: 0; }
+  .wp-table--stackable tbody td::before { content: attr(data-label); flex: none; width: 6em; font-size: 12px; color: var(--wp-text-subtle); }
+  .wp-table--stackable tbody td[data-label='']::before { display: none; }
+  .wp-table--stackable tbody td[data-label='']:has(.wp-check) { position: absolute; top: 6px; right: 6px; min-height: 0; padding: 0; }
+  .wp-table--stackable tbody td[data-mobile='title'] { order: -1; padding-right: 28px; font-weight: 600; color: var(--wp-text-strong); }
+  .wp-table--stackable tbody td[data-mobile='title']::before { display: none; }
+  .wp-table--stackable tbody td[data-mobile='hide'] { display: none; }
+}
 
 /* ---------- 스탯 ---------- */
 .wp-stat { display: flex; flex-direction: column; gap: 4px; }
@@ -999,3 +1034,66 @@
   display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-2);
   padding: var(--wp-space-3); border-top: var(--wp-border-w) solid var(--wp-divider);
 }
+/*
+ * 검색 팝오버의 딤(1.6) — Popover 가 열린 패널의 형제로 .wp-popover-backdrop 을 그린다.
+ * 데스크톱에서는 없는 것처럼 두고(바깥 클릭은 문서 pointerdown 이 닫는다), 모바일에서만 화면을 덮는
+ * 딤 + 하단 시트가 된다. 딤을 누르면 Popover 가 닫고 같은 탭의 click 을 삼킨다(밑의 행으로 새지 않게).
+ */
+.wp-popover-backdrop { display: none; }
+@media screen and (max-width: 767.98px) {
+  .wp-popover-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--wp-z-dialog) - 1); background: var(--wp-surface-overlay); touch-action: none; }
+  .wp-popover-backdrop + .wp-popover {
+    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
+    width: auto; min-width: 0; max-height: 85dvh;
+    display: flex; flex-direction: column;
+    border-radius: var(--wp-radius-lg) var(--wp-radius-lg) 0 0;
+    z-index: var(--wp-z-dialog);
+  }
+  .wp-popover-backdrop + .wp-popover > .wp-popover__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+  .wp-popover-backdrop + .wp-popover > .wp-popover__foot { flex: none; padding-bottom: calc(var(--wp-space-3) + env(safe-area-inset-bottom)); }
+}
+
+/* ---------- 반응형 — ERP responsive.css §1·§2 사본 (편집기 미리보기용) ----------
+ * ERP 는 이 시트를 읽지 않고 app/src/styles/css/responsive.css 를 정본으로 쓴다. 여기 규칙은 그 §1(태블릿+모바일)·
+ * §2(태블릿 터치)를 렌더러 없이 컴포넌트를 쓰는 소비자와 편집기 미리보기에 맞추는 사본이다 — 컨테이너(.wp-content·
+ * #wp-overlay-root) 한정만 뺐다. 브레이크포인트 계약: mobile ≤767.98 · tablet 768–1023.98 · desktop ≥1024, `screen and`.
+ * 목록 표 상자(.wp-table-scroll)·행 카드·팝오버 딤은 위 절에 이미 있다.
+ * 탭 인디케이터는 ERP(::after)와 달리 이 시트가 border-bottom 이라 overflow 상자 안에 들어오도록 margin-bottom 을 0 으로.
+ */
+@media screen and (max-width: 1023.98px) {
+  /* Grid 프리셋 3·4열 → 2열 — 통계 카드 줄(StatCard 만 든 그리드)은 원래 열을 지킨다. 정확히 셋일 때만 셋째를 전폭으로.
+     `.wp-grid--nocollapse`(collapse:false) 는 어느 폭에서도 열을 지킨다 — ERP responsive.css §1 과 같은 가드. */
+  .wp-grid.wp-grid--3:not(.wp-grid--nocollapse),
+  .wp-grid.wp-grid--4:not(.wp-grid--nocollapse) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .wp-grid.wp-grid--3:has(> .wp-card > .wp-card__body > .wp-stat) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .wp-grid.wp-grid--4:has(> .wp-card > .wp-card__body > .wp-stat) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .wp-grid.wp-grid--3:not(.wp-grid--nocollapse):not(:has(> .wp-card > .wp-card__body > .wp-stat)) > :nth-child(3):last-child { grid-column: 1 / -1; }
+  .wp-grid.wp-grid--4 > .wp-card > .wp-card__body > .wp-stat > .wp-stat__value { font-size: var(--wp-size-2xl); }
+  /* PageHead: 제목이 180px 아래로 밀리면 액션이 다음 줄로 */
+  .wp-page-head { flex-wrap: wrap; row-gap: 12px; }
+  .wp-page-head__text { flex: 1 1 180px; }
+  .wp-page-head__actions { flex: 0 1 auto; max-width: 100%; min-width: 0; flex-wrap: wrap; }
+  /* Card 머리: 제목이 160px 아래로 줄면 액션이 다음 줄로 */
+  .wp-card__head { flex-wrap: wrap; row-gap: 8px; }
+  .wp-card__head > :has(> .wp-card__title) { flex: 1 1 160px; }
+  /* Tabs: 넘치면 탭 줄만 가로 스크롤(페이지 전체가 옆으로 밀리던 것). 경계선은 inset 그림자로, 포커스 링은 안쪽으로. */
+  .wp-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--wp-border-subtle); }
+  .wp-tabs::-webkit-scrollbar { display: none; }
+  .wp-tab { flex: none; margin-bottom: 0; }
+  .wp-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); }
+  /* 페이지 범위 "1–10 / 68" 이 좁은 칸에서 네 줄로 꺾이던 것 */
+  .wp-pager .wp-num { white-space: nowrap; }
+}
+/* 태블릿 + 터치 — 손가락 기기만. 시각 크기보다 누름 영역이 목적이다. */
+@media screen and (min-width: 768px) and (max-width: 1023.98px) and (pointer: coarse) {
+  .wp-pager__page { min-width: 36px; height: 36px; }
+  .wp-seg__item { height: 32px; }
+  .wp-table__sort { min-height: 32px; }
+  .wp-iconbtn { min-width: 36px; min-height: 36px; }
+  /* 글자 없는 체크박스(표 선택 칸)는 16px 상자뿐 — 음수 여백으로 배치는 그대로 두고 누를 자리만 넓힌다 */
+  .wp-check:not(:has(.wp-check__text)) { padding: 8px; margin: -8px; }
+}
+/* 모바일 행 카드의 빈 칸 — 라벨만 덩그러니 남지 않게 '—'(플레인 Table 은 데스크톱 표기를 바꾸지 않아 CSS 로만) */
+@media screen and (max-width: 767.98px) {
+  .wp-table--stackable tbody td:empty::after { content: '—'; color: var(--wp-text-subtle); }
+}

package/dist/{types-COjGKgmd.d.ts → types-CYfIthux.d.ts}

@@ -95,8 +95,16 @@ interface SduiCalcRef {
          * - `join`    `sep`(기본 ',')으로 잇는다
          * - `split`   `sep`(기본 ',')으로 가른다. `take`를 주면 그 조각 하나(음수는 뒤에서)
          * - `sortBy`  `field` 기준 정렬(`desc: true`면 내림차순). 원본은 건드리지 않는다
+         * - `map`     객체 배열의 각 행을 `field` 값으로 바꾼다
          */
-         | 'get' | 'pluck' | 'filter' | 'some' | 'every' | 'includes' | 'distinct' | 'except' | 'groupBy' | 'groupCount' | 'entries' | 'fromEntries' | 'length' | 'join' | 'split' | 'sortBy';
+         | 'get' | 'pluck' | 'filter' | 'some' | 'every' | 'includes' | 'distinct' | 'except' | 'groupBy' | 'groupCount' | 'entries' | 'fromEntries' | 'length' | 'join' | 'split' | 'sortBy' | 'map'
+        /**
+         * 서식 — 원시 값을 사람이 읽는 글자로(KST 고정, 브라우저 시간대와 무관).
+         * - `formatDate`   `[값, 'date'|'datetime'|'time']`(기본 datetime). 빈 값은 '', 못 읽는 글은 원문
+         * - `formatNumber` `[값, 소수자리?]` ko-KR 천 단위. 자리를 주면 0~6 으로 고정
+         * - `today`        `['date'|'datetime'|'time']`(기본 date) 지금의 한국 시각 — 출력일 같은 자리
+         */
+         | 'formatDate' | 'formatNumber' | 'today';
         args: SduiPropValue[];
         /** sum/count·목록 연산에서 객체 배열의 필드를 지정 */
         field?: string;
@@ -305,6 +313,30 @@ type SduiAction = {
     pendingKey?: string;
     /** 성공 시 무효화할 조회 prefix — onSuccess의 invalidate 액션 단축 */
     invalidate?: string;
+    /**
+     * 배열을 주면 **원소마다** 같은 요청을 낸다 — 선택한 N건 삭제가 이것이다.
+     * `endpoint`·`body` 안에서 원소는 `$item`(원소 전체 또는 `{"$item":"id"}`), 번호는
+     * `$index` 로 읽는다(바깥 ForEach 행보다 이 프레임이 가깝다). 그 둘은 디스패치
+     * 시점에도 원본으로 남아 원소마다 풀린다.
+     *
+     * ```json
+     * { "action": "request", "method": "DELETE",
+     *   "endpoint": { "$calc": { "op": "concat", "args": ["/clients/", { "$item": true }] } },
+     *   "each": { "$state": "deleteIds" }, "invalidate": "/clients", "pendingKey": "deleting",
+     *   "onSuccess": [{ "action": "toast", "tone": "success", "title": "삭제되었습니다" },
+     *                 { "action": "close", "key": "deleteOpen" }],
+     *   "onError": [{ "action": "toast", "tone": "danger",
+     *                 "message": { "$event": "message" } }] }
+     * ```
+     *
+     * - 동시에 3건까지 낸다. 전부 성공하면 `onSuccess` **한 번**(이벤트 값 = 응답 배열,
+     *   원소 순서). 하나라도 실패하면 `onError` 한 번 — 이벤트 값은
+     *   `{ failed, succeeded, total, message, errors[] }` 라 `{"$event":"failed"}` 로 수를
+     *   읽는다(`errorKey` 에도 같은 값). 생략하면 'N건 중 M건 실패' 토스트.
+     * - `invalidate` 는 성공한 것이 하나라도 있으면 건다 — 서버는 그만큼 바뀌었다.
+     * - 빈 배열·배열 아님은 요청도 체인도 없이 끝난다. 버튼은 선택 수로 잠근다.
+     */
+    each?: SduiPropValue;
 }
 /** 클라이언트 조회 캐시 무효화 — 어댑터의 invalidate로 위임 */
  | {
@@ -405,7 +437,31 @@ interface SduiPage {
      * title(문서 제목)을 포기하지 않아도 되는 자리다.
      */
     title?: string;
+    /**
+     * 레코드 이름을 제목으로 — `title` 대신 **상태에서 푼** 값을 쓴다.
+     *
+     * 상세 화면의 `title`("장비 상세")은 모든 레코드에서 같아 여러 탭·방문 기록에서 구별이
+     * 안 된다. 여기에 `{"$state":"rt.asset.name"}` 이나 `$calc` 를 주면, 값이 비어 있지 않은
+     * 문자열(숫자면 문자열로)일 때 자동 페이지 헤더의 제목이 그 값이 되고 호스트에도
+     * `adapter.setTitle(제목)` 으로 알린다(문서 <title>·브레드크럼은 호스트 몫). 비어
+     * 있으면(조회 전) `title` 로 돌아간다. `title` 은 그대로 둔다 — 호스트가 스펙 JSON 만 보고
+     * 메뉴·크럼을 세우는 자리라 문자열이어야 한다.
+     */
+    titleFrom?: SduiPropValue;
     subtitle?: string;
+    /**
+     * 이탈 가드 — 참이면 새로고침·창 닫기(beforeunload)와 앱 안 이동 전에 확인한다.
+     *
+     * `{"$state":"notifDirty"}` 처럼 상태 식을 준다. 문자열이면 그 문구로 묻고, 그 밖의
+     * 참값은 기본 문구다. Form 을 쓰는 화면은 이것 없이 `Form.guard: true` 로 같은 통로를
+     * 탄다(작성 중일 때만, 저장 직후 이동은 묻지 않는다). 상태로 입력을 모으는 화면
+     * (알림 설정 등)이 이 자리를 쓴다.
+     *
+     * 앱 안 이동은 두 갈래다: 호스트 어댑터가 `setLeaveGuard` 를 받으면 라우터 차단은
+     * 호스트가 하고(셸 메뉴·브라우저 뒤로 가기까지), 안 받으면 렌더러가 자기 `navigate`
+     * 액션 앞에서만 확인 창을 띄운다.
+     */
+    leaveGuard?: SduiPropValue;
     /** 실시간 채널 구독 — 어댑터의 subscribe로 위임(이벤트 수신 시 조용한 재조회) */
     subscribe?: string[];
     /** URL 쿼리파라미터와 동기화할 상태 키 — 딥링크/새로고침 보존용 */

package/dist/widgets/ApprovalLineEditor.d.ts

@@ -1,4 +1,4 @@
-import { S as SduiBoxProps } from '../layout-C3nRXMwb.js';
+import { S as SduiBoxProps } from '../layout-DmRikwZb.js';
 import React__default from 'react';
 
 /** 저장 JSON 계약(approval-line) — 키 이름 변경 금지. */