@wipco/sdui 1.0.1 → 1.2.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";
 }
@@ -3035,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",
@@ -4099,6 +4119,20 @@ var ExcelUploadCardMeta = {
   icon: "cloud-upload",
   description: "\uC5D1\uC140 \uC77C\uAD04 \uC5C5\uB85C\uB4DC \uCE74\uB4DC. server\uB294 \uD30C\uC77C\uC744 \uADF8\uB300\uB85C \uC62C\uB824 \uCC98\uB9AC \uC694\uC57D\uC744 \uBC1B\uACE0, preview\uB294 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C \uD30C\uC2F1\xB7\uAC80\uC99D\uD558\uACE0 \uC624\uB958 \uC140\uC744 \uACE0\uCE5C \uB4A4 \uC720\uD6A8 \uD589\uB9CC \uBCF4\uB0B8\uB2E4.",
   props: [
+    {
+      name: "title",
+      kind: "string",
+      label: "\uC81C\uBAA9",
+      description: "\uC0DD\uB7B5 \uC2DC '\uC5D1\uC140 \uC77C\uAD04 \uC5C5\uB85C\uB4DC'. \uC5EC\uB7EC \uC5C5\uB85C\uB4DC\uAC00 \uD55C \uD654\uBA74\uC5D0 \uC124 \uB54C \uAC01\uC790\uC758 \uC774\uB984\uC744 \uB2E8\uB2E4.",
+      group: "content"
+    },
+    {
+      name: "subtitle",
+      kind: "string",
+      label: "\uBD80\uC81C",
+      description: "\uC0DD\uB7B5 \uC2DC \uBAA8\uB4DC\uBCC4 \uAE30\uBCF8 \uC548\uB0B4 \uBB38\uAD6C.",
+      group: "content"
+    },
     {
       name: "mode",
       kind: "enum",
@@ -4182,7 +4216,7 @@ var ExcelUploadCardMeta = {
     }
     // 실측 5/8 — 단일 toast×3, 액션 배열×2(close→toast)
   ],
-  children: { accepts: false },
+  children: { accepts: true, label: "\uC124\uBA85 \uC601\uC5ED \u2014 \uBA38\uB9AC\uAE00\uACFC \uD30C\uC77C \uC120\uD0DD \uD589 \uC0AC\uC774\uC5D0 \uC120\uB2E4(\uCC98\uB9AC \uADDC\uCE59 \uC548\uB0B4, \uD15C\uD50C\uB9BF \uD5E4\uB354 \uBAA9\uB85D \uB4F1)" },
   dom: { element: "div" },
   // 실측: 루트가 라이브러리 Card → <div class="wp-card">
   // 프리셋에 endpoint·templateEndpoint를 넣지 않는다. 이 조합이면 템플릿은 브라우저에서

package/dist/rich/ExcelUploadCard.d.ts

@@ -16,6 +16,13 @@ interface ExcelPreviewColumn {
     options?: string[];
 }
 interface ExcelUploadCardProps {
+    /**
+     * 카드 제목 — 생략 시 '엑셀 일괄 업로드'. 여러 업로드가 한 화면에 설 때 각자의
+     * 이름을 달 수 있게 연다(바깥 Card로 한 번 더 감싸면 카드 속 카드가 된다).
+     */
+    title?: string;
+    /** 카드 부제 — 생략 시 모드별 기본 안내 문구 */
+    subtitle?: string;
     /** server = 파일을 서버로 바로 업로드, preview = 클라이언트 파싱·검증 후 가져오기 */
     mode?: 'server' | 'preview';
     /** server: multipart POST 대상 / preview: 검증된 rows JSON POST 대상 */
@@ -37,6 +44,8 @@ interface ExcelUploadCardProps {
      * 업로드 버튼이 잠기면 안 된다.
      */
     demoModeOn503?: boolean;
+    /** 머리글과 파일 선택 행 사이의 설명 영역 — 처리 규칙 안내, 템플릿 헤더 목록 등 */
+    children?: React__default.ReactNode;
 }
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자기 축(폭·여백)이 닿게 하는 통로. */
 declare const ExcelUploadCard: React__default.FC<ExcelUploadCardProps & SduiBoxProps>;

package/dist/rich/ExcelUploadCard.js

@@ -43,6 +43,8 @@ function errorMessage(error, fallback) {
   return error instanceof Error && error.message ? error.message : fallback;
 }
 function ExcelUploadCardImpl({
+  title,
+  subtitle,
   mode = "server",
   endpoint,
   templateEndpoint,
@@ -50,7 +52,8 @@ function ExcelUploadCardImpl({
   columns,
   summaryLabels,
   onComplete,
-  demoModeOn503 = false
+  demoModeOn503 = false,
+  children
 }) {
   const adapter = useSduiAdapter();
   const sandbox = useSduiSandbox();
@@ -363,8 +366,8 @@ function ExcelUploadCardImpl({
   return /* @__PURE__ */ jsx(
     Card,
     {
-      title: "\uC5D1\uC140 \uC77C\uAD04 \uC5C5\uB85C\uB4DC",
-      subtitle: mode === "preview" ? "\uC5D1\uC140 \uD30C\uC77C\uC744 \uBD88\uB7EC\uC640 \uAC80\uC99D\uD55C \uB4A4 \uC815\uC0C1 \uD589\uB9CC \uAC00\uC838\uC635\uB2C8\uB2E4" : "\uC5D1\uC140 \uD30C\uC77C\uC744 \uC5C5\uB85C\uB4DC\uD558\uBA74 \uC11C\uBC84\uC5D0\uC11C \uC77C\uAD04 \uCC98\uB9AC\uD569\uB2C8\uB2E4",
+      title: title ?? "\uC5D1\uC140 \uC77C\uAD04 \uC5C5\uB85C\uB4DC",
+      subtitle: subtitle ?? (mode === "preview" ? "\uC5D1\uC140 \uD30C\uC77C\uC744 \uBD88\uB7EC\uC640 \uAC80\uC99D\uD55C \uB4A4 \uC815\uC0C1 \uD589\uB9CC \uAC00\uC838\uC635\uB2C8\uB2E4" : "\uC5D1\uC140 \uD30C\uC77C\uC744 \uC5C5\uB85C\uB4DC\uD558\uBA74 \uC11C\uBC84\uC5D0\uC11C \uC77C\uAD04 \uCC98\uB9AC\uD569\uB2C8\uB2E4"),
       actions: hasTemplate ? /* @__PURE__ */ jsx(
         Button,
         {
@@ -388,6 +391,7 @@ function ExcelUploadCardImpl({
           },
           inputKey
         ),
+        children,
         /* @__PURE__ */ jsxs(
           "div",
           {

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.1",
+  "version": "1.2.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",