@wipco/sdui 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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-C7y9CpgF.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-C7y9CpgF.js';
+import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } from './types-COjGKgmd.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-COjGKgmd.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-C3nRXMwb.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-C3nRXMwb.js';
 import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-C_TT_SOw.js';

package/dist/index.js

@@ -2181,6 +2181,9 @@ function nearestArgsFrame(scope) {
   }
   return void 0;
 }
+function hasExplicitPageHead(body) {
+  return Array.isArray(body) && body.some((child) => isPlainObject(child) && child.component === "PageHead");
+}
 function isStateRef(v) {
   return isPlainObject(v) && typeof v.$state === "string";
 }
@@ -2503,6 +2506,11 @@ function SduiFragmentBody({
   }
   return /* @__PURE__ */ jsx(SduiFragmentChainContext.Provider, { value: nextChain, children: page.body.map((child, i) => renderChild(child, i, bodyScope, engine)) });
 }
+function urlSeedSettled(state, seeded, baseline) {
+  return Object.keys(seeded).every(
+    (key) => Object.is(state[key], seeded[key]) || !Object.is(state[key], baseline[key])
+  );
+}
 function SduiRenderer({
   page,
   registry = defaultRegistry,
@@ -2520,6 +2528,8 @@ function SduiRenderer({
   });
   const [state, setState] = useState(() => ({ ...initialState ?? {} }));
   const urlSeeded = useRef(false);
+  const urlSeedPending = useRef(null);
+  const urlHomePath = useRef(typeof window !== "undefined" ? window.location.pathname : "");
   const [toasts, setToasts] = useState([]);
   const toastSeq = useRef(0);
   const toastTimers = useRef([]);
@@ -2554,10 +2564,21 @@ function SduiRenderer({
         }
       }
     }
-    if (Object.keys(seeded).length > 0) setEntries(seeded);
+    if (Object.keys(seeded).length > 0) {
+      const baseline = {};
+      for (const key of Object.keys(seeded)) baseline[key] = stateRef.current[key];
+      urlSeedPending.current = { seeded, baseline };
+      setEntries(seeded);
+    }
   }, [page.urlState, setEntries, syncUrlState]);
   useEffect(() => {
     if (!syncUrlState || !page.urlState?.length || !urlSeeded.current || typeof window === "undefined") return;
+    if (window.location.pathname !== urlHomePath.current) return;
+    if (urlSeedPending.current) {
+      const { seeded, baseline } = urlSeedPending.current;
+      if (!urlSeedSettled(state, seeded, baseline)) return;
+      urlSeedPending.current = null;
+    }
     const params = new URLSearchParams(window.location.search);
     let changed = false;
     for (const key of page.urlState) {
@@ -3017,7 +3038,7 @@ function SduiRenderer({
     // 컴포넌트(목록 조회 등)도 호스트가 건 잠금 안에서 움직이게 하기 위해서다(adapter.ts 주석).
     /* @__PURE__ */ jsx(SduiAdapterContext.Provider, { value: host, children: /* @__PURE__ */ jsx(SduiDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ jsx(SduiRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx(SduiPermissionProvider, { can, children: /* @__PURE__ */ jsxs("div", { className: "sdui-root", children: [
       /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-sdui-layout", css: LAYOUT_CSS }),
-      page.title || page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+      !hasExplicitPageHead(page.body) && (page.title || page.subtitle) ? /* @__PURE__ */ jsx("div", { className: "wp-page-head", children: /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
         page.title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: page.title }) : null,
         page.subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: page.subtitle }) : null
       ] }) }) : null,

package/dist/meta.d.ts

@@ -1,4 +1,4 @@
-import { b as SduiPropValue, i as SduiNode } from './types-C7y9CpgF.js';
+import { b as SduiPropValue, i as SduiNode } from './types-COjGKgmd.js';
 
 /**
  * 시각 빌더용 컴포넌트 메타데이터 스키마.

package/dist/meta.js

@@ -3273,6 +3273,26 @@ var ChartMeta = {
       description: "\uB2E8\uC77C \uC2DC\uB9AC\uC988 \uCE74\uB974\uD14C\uC2DC\uC548 \uCC28\uD2B8\uB294 \uCF1C\uB3C4 \uC0DD\uB7B5\uB41C\uB2E4.",
       group: "appearance"
     },
+    {
+      name: "legendPlacement",
+      kind: "enum",
+      label: "\uBC94\uB840 \uC704\uCE58",
+      default: "bottom",
+      description: 'pie/donut \uC804\uC6A9. "\uC6B0\uCE21 \uC218\uCE58 \uD45C"\uB294 \uC810 \uBC94\uB840 \uB300\uC2E0 \uC804\uCCB4 \uD589 + \uC870\uAC01\uBCC4 \uAC12\xB7\uC810\uC720\uC728\uC744 \uCC28\uD2B8 \uC624\uB978\uCABD\uC5D0 \uC801\uB294\uB2E4.',
+      options: [
+        { value: "bottom", label: "\uC544\uB798 \uC810 \uBC94\uB840" },
+        { value: "right", label: "\uC6B0\uCE21 \uC218\uCE58 \uD45C" }
+      ],
+      group: "appearance"
+    },
+    {
+      name: "legendTotal",
+      kind: "number",
+      label: "\uC804\uCCB4 \uAC12 \uC7AC\uC815\uC758",
+      bindable: true,
+      description: '\uC6B0\uCE21 \uC218\uCE58 \uD45C\uC758 "\uC804\uCCB4" \uD589 \uAC12\uC774\uC790 \uC810\uC720\uC728 \uBD84\uBAA8. \uC0DD\uB7B5\uD558\uBA74 \uC870\uAC01 \uAC12\uC758 \uD569 \u2014 \uC870\uAC01\uC774 \uACB9\uCCD0 \uC138\uC5B4\uC9C0\uB294 \uC9D1\uACC4\uB294 \uC5EC\uAE30\uC5D0 \uC2E4\uC81C \uBAA8\uC218\uB97C \uBC14\uC778\uB529\uD55C\uB2E4.',
+      group: "appearance"
+    },
     {
       name: "donutCenter",
       kind: "object",

package/dist/rich.d.ts

@@ -39,6 +39,19 @@ interface ChartProps {
     valueFormat?: ChartValueFormat;
     /** 범례 표시 여부. 기본 true (단일 시리즈 카르테시안 차트는 생략). */
     legend?: boolean;
+    /**
+     * pie/donut 전용: 범례 위치. `'right'`는 아래쪽 점 범례 대신 차트 오른쪽에
+     * 전체 행 + 조각별 값·점유율 표를 붙인다({@link SliceLegendTable}).
+     * 카르테시안 차트에서는 무시된다. 기본 'bottom'.
+     */
+    legendPlacement?: 'bottom' | 'right';
+    /**
+     * 우측 수치 표의 "전체" 값(점유율 분모) 재정의. 생략하면 조각 값의 합.
+     *
+     * 조각이 겹치는 집계(수리 중인 장비가 대여 상태 어느 한쪽에도 이미 세어진 경우 등)는
+     * 합이 실제 모수보다 커진다 — 화면의 다른 총계와 어긋나 보이지 않게 모수를 직접 준다.
+     */
+    legendTotal?: number;
     /** donut 중앙 오버레이 텍스트. */
     donutCenter?: {
         label?: string;
@@ -47,7 +60,7 @@ interface ChartProps {
     /** 데이터가 없을 때 보여줄 문구. */
     emptyText?: string;
 }
-declare function Chart({ type, data, xKey, series, height, valueFormat, legend, donutCenter, emptyText, }: ChartProps): React__default.JSX.Element;
+declare function Chart({ type, data, xKey, series, height, valueFormat, legend, legendPlacement, legendTotal, donutCenter, emptyText, }: ChartProps): React__default.JSX.Element;
 
 /**
  * MapPreview — OpenLayers 기반 위치 미리보기 지도 (ERP `app/components/widgets/MapPreview.tsx` 이식).

package/dist/rich.js

@@ -149,6 +149,65 @@ function HtmlLegend({ items }) {
     }
   );
 }
+function SliceLegendTable({
+  rows,
+  format,
+  total
+}) {
+  const denom = total ?? rows.reduce((sum, r) => sum + r.value, 0);
+  const share = (v) => denom > 0 ? `${(v / denom * 100).toLocaleString("ko-KR", { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%` : "0.0%";
+  const valueStyle = {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "var(--wp-text-strong)",
+    fontVariantNumeric: "tabular-nums",
+    whiteSpace: "nowrap"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: "none",
+        minWidth: 148,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: "var(--wp-space-2)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              justifyContent: "space-between",
+              gap: "var(--wp-space-4)",
+              paddingBottom: "var(--wp-space-2)",
+              borderBottom: "1px solid var(--wp-divider)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uC804\uCCB4" }),
+              /* @__PURE__ */ jsx("span", { style: valueStyle, children: `${format(denom)} (${share(denom)})` })
+            ]
+          }
+        ),
+        rows.map((row, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { display: "flex", alignItems: "center", gap: "var(--wp-space-2)" },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: dotStyle(row.color) }),
+              /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { flex: 1, minWidth: 0, overflowWrap: "anywhere" }, children: row.label }),
+              /* @__PURE__ */ jsx("span", { style: valueStyle, children: `${format(row.value)} (${share(row.value)})` })
+            ]
+          },
+          `${row.label}-${i}`
+        ))
+      ]
+    }
+  );
+}
 var axisTick = { fill: "var(--wp-text-muted)", fontSize: 12 };
 function Chart({
   type,
@@ -158,6 +217,8 @@ function Chart({
   height = 300,
   valueFormat = "number",
   legend = true,
+  legendPlacement = "bottom",
+  legendTotal,
   donutCenter,
   emptyText
 }) {
@@ -218,9 +279,12 @@ function Chart({
       label: String(row[nameKey] ?? `\uD56D\uBAA9 ${i + 1}`),
       color: sliceColor(row, i)
     }));
-    return shell(
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height }, children: [
+    const sideLegend = legend && legendPlacement === "right";
+    const chartArea = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: sideLegend ? { position: "relative", flex: "1 1 0%", 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 }),
             /* @__PURE__ */ jsx(
@@ -259,7 +323,32 @@ function Chart({
               ]
             }
           )
-        ] }),
+        ]
+      }
+    );
+    if (sideLegend) {
+      const sliceValue = (row) => {
+        const n = Number(row[valueKey]);
+        return Number.isFinite(n) ? n : 0;
+      };
+      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
+            }
+          )
+        ] })
+      );
+    }
+    return shell(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        chartArea,
         legend && /* @__PURE__ */ jsx(HtmlLegend, { items: legendItems2 })
       ] })
     );

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

@@ -397,7 +397,13 @@ interface SduiPageQuery {
 }
 interface SduiPage {
     version: 1;
-    /** 문서 <title> 및 페이지 헤더에 쓰인다. */
+    /**
+     * 문서 <title> 및 페이지 헤더에 쓰인다.
+     *
+     * body **최상위**에 `PageHead` 노드가 있으면 자동 페이지 헤더는 접히고 그쪽이
+     * 시각 헤더가 된다 — 제목 줄 우측에 액션(필터·버튼)을 놓으려는 스펙이
+     * title(문서 제목)을 포기하지 않아도 되는 자리다.
+     */
     title?: string;
     subtitle?: string;
     /** 실시간 채널 구독 — 어댑터의 subscribe로 위임(이벤트 수신 시 조용한 재조회) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",
@@ -208,7 +208,7 @@
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "check:meta": "node scripts/check-meta.mjs",
-    "test": "tsx --test test/*.test.ts",
+    "test": "tsx --test test/*.test.ts test/*.test.tsx",
     "prepack": "pnpm run build"
   },
   "peerDependencies": {
@@ -232,6 +232,9 @@
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "tsup": "^8.5.0",
     "tsx": "^4.20.0",
     "typescript": "^5.7.0"