@wipco/sdui 0.7.0 → 0.8.0

package/dist/meta.js

@@ -45,6 +45,150 @@ var builtinComponentMeta = {
   ForEach: ForEachMeta
 };
 
+// src/meta/self-axis.ts
+var SIZE_OPTIONS = [
+  { value: "96", label: "96px" },
+  { value: "128", label: "128px" },
+  { value: "160", label: "160px" },
+  { value: "192", label: "192px" },
+  { value: "224", label: "224px" },
+  { value: "256", label: "256px" },
+  { value: "288", label: "288px" },
+  { value: "320", label: "320px" },
+  { value: "384", label: "384px" },
+  { value: "480", label: "480px" },
+  { value: "full", label: "\uBD80\uBAA8 \uD3ED \uAC00\uB4DD" }
+];
+var SPACE_OPTIONS = [
+  { value: "2", label: "2px" },
+  { value: "4", label: "4px" },
+  { value: "8", label: "8px" },
+  { value: "12", label: "12px" },
+  { value: "16", label: "16px" },
+  { value: "20", label: "20px" },
+  { value: "24", label: "24px" },
+  { value: "32", label: "32px" }
+];
+var ALIGN_OPTIONS = [
+  { value: "start", label: "\uC2DC\uC791" },
+  { value: "center", label: "\uAC00\uC6B4\uB370" },
+  { value: "end", label: "\uB05D" },
+  { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
+  { value: "stretch", label: "\uB298\uB9AC\uAE30" }
+];
+var SELF_AXIS_PROPS = [
+  {
+    name: "width",
+    kind: "enum",
+    label: "\uC790\uAE30: \uD3ED",
+    description: '\uACE0\uC815 \uD3ED. 32px \uACA9\uC790\uC5D0 \uB9DE\uCD98 \uAC12\uB9CC \uACE0\uB97C \uC218 \uC788\uB2E4. "\uBD80\uBAA8 \uD3ED \uAC00\uB4DD"\uC740 100%.',
+    options: SIZE_OPTIONS,
+    group: "layout"
+  },
+  {
+    name: "maxWidth",
+    kind: "enum",
+    label: "\uC790\uAE30: \uCD5C\uB300 \uD3ED",
+    description: "\uC774\uBCF4\uB2E4 \uB113\uC5B4\uC9C0\uC9C0 \uC54A\uB294\uB2E4. \uB113\uC740 \uD654\uBA74\uC5D0\uC11C \uC785\uB825\uCE78\uC774 \uB298\uC5B4\uC9C0\uB294 \uAC83\uC744 \uB9C9\uB294\uB2E4.",
+    options: SIZE_OPTIONS,
+    group: "layout"
+  },
+  {
+    name: "marginTop",
+    kind: "enum",
+    label: "\uC790\uAE30: \uC704 \uC5EC\uBC31",
+    description: "\uBC14\uAE65 \uC704\uCABD \uC5EC\uBC31. \uBB36\uC74C\uC758 gap\uC73C\uB85C \uC548 \uB418\uB294 \uC790\uB9AC\uC5D0\uC11C\uB9CC \uC4F4\uB2E4.",
+    options: SPACE_OPTIONS,
+    group: "layout"
+  },
+  {
+    name: "marginBottom",
+    kind: "enum",
+    label: "\uC790\uAE30: \uC544\uB798 \uC5EC\uBC31",
+    description: "\uBC14\uAE65 \uC544\uB798\uCABD \uC5EC\uBC31. \uBB36\uC74C\uC758 gap\uC73C\uB85C \uC548 \uB418\uB294 \uC790\uB9AC\uC5D0\uC11C\uB9CC \uC4F4\uB2E4.",
+    options: SPACE_OPTIONS,
+    group: "layout"
+  },
+  {
+    name: "grow",
+    kind: "boolean",
+    label: "\uC790\uAE30: \uB0A8\uB294 \uACF5\uAC04 \uCC28\uC9C0",
+    description: "flex-grow. \uBD80\uBAA8\uC758 \uB0A8\uB294 \uD3ED(\uC138\uB85C \uBB36\uC74C\uC774\uBA74 \uB192\uC774)\uC744 \uC774 \uB178\uB4DC\uAC00 \uBA39\uB294\uB2E4.",
+    group: "layout",
+    advanced: true
+  },
+  {
+    name: "shrink",
+    kind: "boolean",
+    label: "\uC790\uAE30: \uC881\uC544\uC9C0\uBA74 \uC904\uC5B4\uB4E6",
+    description: "flex-shrink. \uB044\uBA74 \uC881\uC544\uC838\uB3C4 \uC6D0\uB798 \uD06C\uAE30\uB97C \uC9C0\uD0A8\uB2E4(\uBC84\uD2BC\xB7\uBC30\uC9C0\uCC98\uB7FC \uCC0C\uADF8\uB7EC\uC9C0\uBA74 \uC548 \uB418\uB294 \uAC83).",
+    group: "layout",
+    advanced: true
+  },
+  {
+    name: "minWidth",
+    kind: "enum",
+    label: "\uC790\uAE30: \uCD5C\uC18C \uD3ED",
+    description: "\uC774\uBCF4\uB2E4 \uC881\uC544\uC9C0\uC9C0 \uC54A\uB294\uB2E4.",
+    options: SIZE_OPTIONS,
+    group: "layout",
+    advanced: true
+  },
+  {
+    name: "pushEnd",
+    kind: "boolean",
+    label: "\uC790\uAE30: \uB05D\uC73C\uB85C \uBC00\uAE30",
+    description: '\uC55E\uCABD \uC5EC\uBC31\uC744 \uC790\uB3D9\uC73C\uB85C \uCC44\uC6CC \uC774\uAC83\uB9CC \uC904 \uB05D\uC73C\uB85C \uBCF4\uB0B8\uB2E4. \uBD80\uBAA8\uC758 "\uC8FC\uCD95 \uC815\uB82C=\uB05D"\uC740 \uC790\uC2DD \uC804\uBD80\uB97C \uC62E\uAE30\uC9C0\uB9CC \uC774\uCABD\uC740 \uD558\uB098\uB9CC \uC62E\uAE34\uB2E4.',
+    group: "layout",
+    advanced: true
+  },
+  {
+    name: "span",
+    kind: "enum",
+    label: "\uC790\uAE30: \uC5F4 \uBCD1\uD569",
+    description: "grid-column: span N. \uBD80\uBAA8\uAC00 Grid\uC77C \uB54C\uB9CC \uB73B\uC774 \uC788\uB2E4.",
+    options: [
+      { value: 1, label: "1\uCE78" },
+      { value: 2, label: "2\uCE78" },
+      { value: 3, label: "3\uCE78" },
+      { value: 4, label: "4\uCE78" },
+      { value: 5, label: "5\uCE78" },
+      { value: 6, label: "6\uCE78" }
+    ],
+    group: "layout",
+    advanced: true
+  },
+  {
+    name: "selfAlign",
+    kind: "enum",
+    label: "\uC790\uAE30: \uAD50\uCC28\uCD95 \uC815\uB82C",
+    description: "align-self. \uBD80\uBAA8\uC758 align\uC744 \uC774 \uB178\uB4DC\uC5D0\uC11C\uB9CC \uB4A4\uC9D1\uB294\uB2E4.",
+    options: ALIGN_OPTIONS,
+    group: "layout",
+    advanced: true
+  },
+  {
+    name: "truncate",
+    kind: "boolean",
+    label: "\uC790\uAE30: \uD55C \uC904 \uB9D0\uC904\uC784",
+    description: "\uB118\uCE58\uB294 \uAE00\uC790\uB97C \u2026\uB85C \uC790\uB978\uB2E4. \uC790\uAE30 min-width\uB97C 0\uC73C\uB85C \uD480\uC5B4 \uBB36\uC74C \uC548\uC5D0\uC11C\uB3C4 \uB3D9\uC791\uD55C\uB2E4.",
+    group: "layout",
+    advanced: true
+  }
+];
+function withSelfAxis(meta) {
+  if (meta.dom?.element === "fragment") return meta;
+  const taken = new Set(meta.props.map((prop) => prop.name));
+  const added = SELF_AXIS_PROPS.filter((prop) => !taken.has(prop.name));
+  if (added.length === 0) return meta;
+  return { ...meta, props: [...meta.props, ...added] };
+}
+function withSelfAxisAll(catalog) {
+  const out = {};
+  for (const [name, meta] of Object.entries(catalog)) out[name] = withSelfAxis(meta);
+  return out;
+}
+
 // src/meta/core.ts
 var styleProp = {
   name: "style",
@@ -150,61 +294,16 @@ var columnJustifyProp = {
   group: "layout",
   advanced: true
 };
-var growProp = {
-  name: "grow",
-  kind: "boolean",
-  label: "\uC790\uAE30: \uB0A8\uB294 \uACF5\uAC04 \uCC28\uC9C0",
-  description: "flex-grow. \uBD80\uBAA8\uC758 \uB0A8\uB294 \uD3ED(\uC138\uB85C \uBB36\uC74C\uC774\uBA74 \uB192\uC774)\uC744 \uC774 \uB178\uB4DC\uAC00 \uBA39\uB294\uB2E4.",
-  group: "layout",
-  advanced: true
-};
-var shrinkProp = {
-  name: "shrink",
-  kind: "boolean",
-  label: "\uC790\uAE30: \uC881\uC544\uC9C0\uBA74 \uC904\uC5B4\uB4E6",
-  description: "flex-shrink. \uB044\uBA74 \uC881\uC544\uC838\uB3C4 \uC6D0\uB798 \uD06C\uAE30\uB97C \uC9C0\uD0A8\uB2E4(\uBC84\uD2BC\xB7\uBC30\uC9C0\uCC98\uB7FC \uCC0C\uADF8\uB7EC\uC9C0\uBA74 \uC548 \uB418\uB294 \uAC83).",
-  group: "layout",
-  advanced: true
-};
-var spanProp = {
-  name: "span",
-  kind: "enum",
-  label: "\uC790\uAE30: \uC5F4 \uBCD1\uD569",
-  description: "grid-column: span N. \uBD80\uBAA8\uAC00 Grid\uC77C \uB54C\uB9CC \uB73B\uC774 \uC788\uB2E4.",
-  options: [
-    { value: 1, label: "1\uCE78" },
-    { value: 2, label: "2\uCE78" },
-    { value: 3, label: "3\uCE78" },
-    { value: 4, label: "4\uCE78" },
-    { value: 5, label: "5\uCE78" },
-    { value: 6, label: "6\uCE78" }
-  ],
-  group: "layout",
-  advanced: true
-};
-var selfAlignProp = {
-  name: "selfAlign",
-  kind: "enum",
-  label: "\uC790\uAE30: \uAD50\uCC28\uCD95 \uC815\uB82C",
-  description: "align-self. \uBD80\uBAA8\uC758 align\uC744 \uC774 \uB178\uB4DC\uC5D0\uC11C\uB9CC \uB4A4\uC9D1\uB294\uB2E4.",
-  options: [
-    { value: "start", label: "\uC2DC\uC791" },
-    { value: "center", label: "\uAC00\uC6B4\uB370" },
-    { value: "end", label: "\uB05D" },
-    { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
-    { value: "stretch", label: "\uB298\uB9AC\uAE30" }
-  ],
-  group: "layout",
-  advanced: true
-};
-var truncateProp = {
-  name: "truncate",
-  kind: "boolean",
-  label: "\uC790\uAE30: \uD55C \uC904 \uB9D0\uC904\uC784",
-  description: "\uB118\uCE58\uB294 \uAE00\uC790\uB97C \u2026\uB85C \uC790\uB978\uB2E4. \uC790\uAE30 min-width\uB97C 0\uC73C\uB85C \uD480\uC5B4 \uBB36\uC74C \uC548\uC5D0\uC11C\uB3C4 \uB3D9\uC791\uD55C\uB2E4.",
-  group: "layout",
-  advanced: true
+var pick = (name) => {
+  const found = SELF_AXIS_PROPS.find((prop) => prop.name === name);
+  if (!found) throw new Error(`self-axis\uC5D0 ${name}\uC774 \uC5C6\uC2B5\uB2C8\uB2E4`);
+  return found;
 };
+var growProp = pick("grow");
+var shrinkProp = pick("shrink");
+var spanProp = pick("span");
+var selfAlignProp = pick("selfAlign");
+var truncateProp = pick("truncate");
 var ActionsMeta = {
   name: "Actions",
   label: "\uC561\uC158 \uBB36\uC74C",
@@ -382,6 +481,23 @@ var GridMeta = {
       description: 'grid-template-columns \uAC12. \uC608: "minmax(0,1.6fr) minmax(0,1fr)". columns\uB97C \uBB34\uC2DC\uD55C\uB2E4.',
       group: "layout"
     },
+    {
+      name: "padding",
+      kind: "enum",
+      label: "\uC548\uCABD \uC5EC\uBC31",
+      description: "\uADF8\uB9AC\uB4DC \uC790\uCCB4\uC758 \uC548\uCABD \uC5EC\uBC31. gap\uC740 \uC790\uC2DD \uC0AC\uC774\uB77C \uC774 \uC790\uB9AC\uB97C \uB300\uC2E0\uD558\uC9C0 \uBABB\uD55C\uB2E4.",
+      options: [
+        { value: "2", label: "2px" },
+        { value: "4", label: "4px" },
+        { value: "8", label: "8px" },
+        { value: "12", label: "12px" },
+        { value: "16", label: "16px" },
+        { value: "20", label: "20px" },
+        { value: "24", label: "24px" },
+        { value: "32", label: "32px" }
+      ],
+      group: "layout"
+    },
     gridGapProp,
     stretchAlignProp,
     wrapProp,
@@ -648,6 +764,19 @@ var ButtonMeta = {
       description: '\uB77C\uBCA8\uC744 \uC2A4\uD53C\uB108\uB85C \uBC14\uAFB8\uACE0 \uC785\uB825\uC744 \uB9C9\uB294\uB2E4. { "$state": "form.$submitting" }\uB97C \uC790\uC8FC \uAC74\uB2E4.',
       group: "behavior"
     },
+    {
+      name: "justify",
+      kind: "enum",
+      label: "\uC548\uCABD \uC815\uB82C",
+      description: '\uBC84\uD2BC \uC548 \uC544\uC774\uCF58\xB7\uAE00\uC790\uC758 \uAC00\uB85C \uC815\uB82C. \uAE30\uBCF8\uC740 \uAC00\uC6B4\uB370. \uD3ED\uC744 \uB298\uB9B0 \uBC84\uD2BC("\uAC00\uB85C \uAF49 \uCC44\uC6B0\uAE30"\uB098 \uD3ED \uC9C0\uC815)\uC5D0\uC11C\uB9CC \uD45C\uAC00 \uB09C\uB2E4.',
+      options: [
+        { value: "start", label: "\uC67C\uCABD" },
+        { value: "center", label: "\uAC00\uC6B4\uB370" },
+        { value: "end", label: "\uC624\uB978\uCABD" },
+        { value: "between", label: "\uC591\uB05D" }
+      ],
+      group: "layout"
+    },
     { name: "block", kind: "boolean", label: "\uAC00\uB85C \uAF49 \uCC44\uC6C0", default: false, group: "layout" },
     { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
     {
@@ -1508,6 +1637,18 @@ var TextMeta = {
       ],
       group: "appearance"
     },
+    {
+      name: "wrap",
+      kind: "enum",
+      label: "\uC904\uBC14\uAFC8",
+      description: "\uC6D0\uBB38 \uC904\uBC14\uAFC8\uC744 \uC0B4\uB9B4\uC9C0, \uACF5\uBC31 \uC5C6\uB294 \uAE34 \uD1A0\uD070(ID\xB7URL\xB7\uD574\uC2DC)\uC744 \uAC15\uC81C\uB85C \uB04A\uC744\uC9C0. \uAE30\uBCF8\uC740 \uBE0C\uB77C\uC6B0\uC800 \uAE30\uBCF8\uC774\uB2E4.",
+      options: [
+        { value: "normal", label: "\uAE30\uBCF8" },
+        { value: "preserve", label: "\uC6D0\uBB38 \uC904\uBC14\uAFC8 \uC720\uC9C0" },
+        { value: "anywhere", label: "\uC720\uC9C0 + \uAE34 \uD1A0\uD070 \uB04A\uAE30" }
+      ],
+      group: "appearance"
+    },
     {
       name: "value",
       kind: "node",
@@ -4256,13 +4397,13 @@ var SDUI_CATEGORIES = [
   { id: "feedback", label: "\uD53C\uB4DC\uBC31" },
   { id: "logic", label: "\uB85C\uC9C1" }
 ];
-var allComponentMeta = {
+var allComponentMeta = withSelfAxisAll({
   ...coreComponentMeta,
   ...richComponentMeta,
   ...widgetComponentMeta,
   ...dsComponentMeta,
   ...builtinComponentMeta
-};
+});
 function getComponentMeta(name, catalog = allComponentMeta) {
   return Object.hasOwn(catalog, name) ? catalog[name] : void 0;
 }
@@ -4280,4 +4421,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta };
+export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/rich.d.ts

@@ -1,5 +1,6 @@
 import React__default from 'react';
-export { D as DatePicker, b as DatePickerProps, a as DateRangePicker, c as DateRangePickerProps, d as DateRangeValue } from './DatePicker-CTDcFR7V.js';
+export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue } from './DatePicker-BndreCPl.js';
+import './layout-B1QrIBm6.js';
 
 /**
  * Chart — 선언형 recharts 래퍼 (ERP `app/components/widgets/Chart.tsx` 이식).

package/dist/rich.js

@@ -1,6 +1,7 @@
-import { useSduiAssetResolver, HoistedStyle } from './chunk-KAXPN6KT.js';
-export { DatePicker, DateRangePicker } from './chunk-KAXPN6KT.js';
-import { Spinner, EmptyState } from './chunk-CRSY67TZ.js';
+import { useSduiAssetResolver, HoistedStyle } from './chunk-27APKNEI.js';
+export { DatePicker, DateRangePicker } from './chunk-27APKNEI.js';
+import { Spinner, EmptyState } from './chunk-6FADQ2SU.js';
+import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/widgets/AutocompleteField.d.ts

@@ -1,44 +1,6 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import React__default from 'react';
 
-/**
- * AutocompleteField — 디바운스 원격/정적 자동완성 검색 필드.
- *
- * - `search`가 주어지면 그 함수로 원격 검색하고, 없으면 options 배열을
- *   includesLooseSearch로 로컬 필터링한다(데모/폴백).
- * - 입력만으로는 절대 값이 확정되지 않는다 — 목록에서 선택해야 onChange(value, option),
- *   선택 해제 시에만 onChange(null)이 호출된다.
- * - 선택되면 입력창 대신 "선택됨 카드"(circle-check + 라벨 + 부가정보 + 변경 버튼)를 보여준다.
- *
- * ## 조회를 왜 주입으로 받나
- *
- * ERP판은 `endpoint` 프롭을 받아 `erpFetch(endpoint?q=…)`를 직접 부르고, 503을
- * `ErpApiError`로 알아보아 "백엔드 미연동" 안내로 떨어뜨렸다. 그 셋(API_BASE 규약,
- * 웹 쿠키/데스크톱 Bearer 이중 세션, 503=데모 모드 강등)은 전부 **호스트 앱의 계약**이라
- * 라이브러리가 알 수 없다. 그래서 여기는 "키워드를 주면 옵션 목록을 돌려주는 함수"
- * 하나만 요구하고, `endpoint`를 그 함수로 바꾸는 어댑터는 소비 앱에 남는다:
- *
- * ```tsx
- * <AutocompleteField
- *   search={async (keyword, signal) => {
- *     const sep = endpoint.includes('?') ? '&' : '?';
- *     try {
- *       return toAutocompleteOptions(
- *         await erpFetch(`${endpoint}${sep}q=${encodeURIComponent(keyword)}`, { signal }),
- *       );
- *     } catch (error) {
- *       if (error instanceof ErpApiError && error.status === 503) {
- *         return { options: [], status: 'offline' };
- *       }
- *       throw error;
- *     }
- *   }}
- * />
- * ```
- *
- * 응답 모양 정규화(`toAutocompleteOptions`)는 여기서 함께 내보낸다 — 배열/`items`/`data`/
- * `results`/`rows` 래핑을 푸는 규칙까지 앱마다 다시 짜게 할 이유가 없다.
- */
-
 type AutocompleteOption = Record<string, unknown>;
 /**
  * 원격 검색 결과.
@@ -91,6 +53,10 @@ interface AutocompleteFieldProps {
  * 조회를 앱이 맡게 됐으므로 이 정규화도 함께 내보낸다 — 앱마다 다시 짤 규칙이 아니다.
  */
 declare function toAutocompleteOptions(payload: unknown): AutocompleteOption[];
-declare function AutocompleteField({ search, options, labelKey, valueKey, subKey, value, selectedLabel, onChange, placeholder, minChars, debounceMs, invalid, disabled, }: AutocompleteFieldProps): React__default.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const AutocompleteField: React__default.FC<AutocompleteFieldProps & SduiBoxProps>;
 
 export { AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type AutocompleteSearchFn, type AutocompleteSearchResult, toAutocompleteOptions };

package/dist/widgets/AutocompleteField.js

@@ -1,3 +1,4 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-57LLG32F.js';
-import '../chunk-TKB7H5DB.js';
-import '../chunk-CRSY67TZ.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-OM63D4UH.js';
+import '../chunk-WUTCZCQH.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/ColumnBoard.d.ts

@@ -1,18 +1,6 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import React__default from 'react';
 
-/**
- * ColumnBoard — 칸반식 분류 보드 (버튼 이동, 드래그 없음).
- *
- * - 컬럼 헤더: 라벨 + 건수 Badge, tone에 따라 상태 틴트(--wp-status-*-bg/border/fg).
- * - 항목 카드: 제목/부제/뱃지, onItemClick이 있으면 본문이 버튼이 된다.
- * - 이동: 카드 우측 chevron 메뉴(erp-popover)에서 다른 컬럼을 골라 onMove({ id, toColumn }).
- *   (SDUI 액션은 첫 콜백 인자만 이벤트 값으로 받으므로 단일 객체로 전달한다)
- *   onMove 미연결 시 버튼은 비활성 + 사유 title.
- * - 선택: selectable이면 카드마다 Checkbox. selectedIds가 주어지면 제어 모드,
- *   아니면 내부 상태로 동작하며 변경 시 onSelectChange(ids).
- * - 정의되지 않은 컬럼 키를 가진 항목은 보드 아래 미분류 안내로 집계한다.
- */
-
 type ColumnBoardTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 interface ColumnBoardColumn {
     key: string;
@@ -42,6 +30,10 @@ interface ColumnBoardProps {
     selectedIds?: string[];
     onSelectChange?: (ids: string[]) => void;
 }
-declare function ColumnBoard({ columns, items, onMove, onItemClick, selectable, selectedIds, onSelectChange, }: ColumnBoardProps): React__default.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const ColumnBoard: React__default.FC<ColumnBoardProps & SduiBoxProps>;
 
 export { ColumnBoard, type ColumnBoardColumn, type ColumnBoardItem, type ColumnBoardProps, type ColumnBoardTone };

package/dist/widgets/ColumnBoard.js

@@ -1,2 +1,3 @@
-export { ColumnBoard } from '../chunk-HGFYXY7F.js';
-import '../chunk-CRSY67TZ.js';
+export { ColumnBoard } from '../chunk-QTNIUMSM.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/DiffView.d.ts

@@ -1,15 +1,6 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import React__default from 'react';
 
-/**
- * DiffView — 변경 전/후 비교 뷰.
- *
- * - fields: 스칼라 값 비교. 라벨(wp-kv 스타일) + 이전 값(취소선, subtle)
- *   + arrow-right 아이콘 + 이후 값(strong, success 틴트 배경).
- * - lists: 목록 비교. 추가 항목 success Badge '+', 제거 danger Badge '−',
- *   유지 neutral Badge.
- * - 값이 없는 쪽은 '—'로 표시한다(취소선/틴트 없음).
- */
-
 interface DiffField {
     label: string;
     before?: React__default.ReactNode;
@@ -25,6 +16,10 @@ interface DiffViewProps {
     fields?: DiffField[];
     lists?: DiffList[];
 }
-declare function DiffView({ fields, lists }: DiffViewProps): React__default.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const DiffView: React__default.FC<DiffViewProps & SduiBoxProps>;
 
 export { type DiffField, type DiffList, DiffView, type DiffViewProps };

package/dist/widgets/DiffView.js

@@ -1,2 +1,3 @@
-export { DiffView } from '../chunk-73ZMMJRX.js';
-import '../chunk-CRSY67TZ.js';
+export { DiffView } from '../chunk-RQ2FWV24.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/Disclosure.d.ts

@@ -1,13 +1,6 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import React__default from 'react';
 
-/**
- * Disclosure — 접기/펼치기 행.
- *
- * - chevron-right 아이콘이 펼침 상태에서 90도 회전(var(--wp-transition-transform))한다.
- * - controlled-with-fallback: open이 주어지면 그대로 따르고, 없으면 내부 상태로 동작한다.
- * - aria-expanded / aria-controls 연결, 내용 영역은 hidden 토글로 상태를 보존한다.
- */
-
 interface DisclosureProps {
     summary: React__default.ReactNode;
     children?: React__default.ReactNode;
@@ -15,6 +8,10 @@ interface DisclosureProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-declare function Disclosure({ summary, children, defaultOpen, open, onOpenChange, }: DisclosureProps): React__default.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const Disclosure: React__default.FC<DisclosureProps & SduiBoxProps>;
 
 export { Disclosure, type DisclosureProps };

package/dist/widgets/Disclosure.js

@@ -1,2 +1,3 @@
-export { Disclosure } from '../chunk-TAFUDHIX.js';
-import '../chunk-CRSY67TZ.js';
+export { Disclosure } from '../chunk-CEFOZOOM.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/EventCalendar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 
 /**
  * EventCalendar — 일정 캘린더 위젯 (월 / 주 / 일 / 일정 뷰).
@@ -54,6 +55,10 @@ interface EventCalendarProps {
     onEventClick?: (event: EventCalendarEvent) => void;
     selectedId?: string;
 }
-declare const EventCalendar: ({ events, view, onViewChange, views, date, onDateChange, types, onEventClick, selectedId, }: EventCalendarProps) => React.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const EventCalendar: React.FC<EventCalendarProps & SduiBoxProps>;
 
 export { EventCalendar, type EventCalendarEvent, type EventCalendarProps, type EventCalendarTypeOption, type EventCalendarView, type EventCalendarViewItem };

package/dist/widgets/EventCalendar.js

@@ -1,2 +1,3 @@
-export { EventCalendar } from '../chunk-XMMYJSRV.js';
-import '../chunk-CRSY67TZ.js';
+export { EventCalendar } from '../chunk-KL554MEM.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/ImageLightbox.d.ts

@@ -1,14 +1,6 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import React__default from 'react';
 
-/**
- * ImageLightbox — 이미지 라이트박스 뷰어.
- * 썸네일(또는 커스텀 트리거) 클릭 → 전체 화면 오버레이:
- * - 휠 줌 1x–8x (커서 위치 기준 앵커)
- * - 확대 상태에서 드래그 패닝 (pointer capture, 경계 클램프)
- * - 툴바: 축소 / 확대 / 원래 크기 / 닫기 + 배율 % 표시
- * - Escape·배경 클릭으로 닫힘, 트리거 클릭은 stopPropagation (행 클릭과 공존)
- */
-
 interface ImageLightboxProps {
     /** 원본 이미지 URL */
     src: string;
@@ -20,6 +12,10 @@ interface ImageLightboxProps {
     /** 커스텀 트리거 — 주면 기본 썸네일 대신 렌더된다 */
     children?: React__default.ReactNode;
 }
-declare function ImageLightbox({ src, alt, thumbClassName, thumbStyle, children }: ImageLightboxProps): React__default.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const ImageLightbox: React__default.FC<ImageLightboxProps & SduiBoxProps>;
 
 export { ImageLightbox, type ImageLightboxProps };

package/dist/widgets/ImageLightbox.js

@@ -1,2 +1,3 @@
-export { ImageLightbox } from '../chunk-XY2JKFAV.js';
-import '../chunk-CRSY67TZ.js';
+export { ImageLightbox } from '../chunk-7MRAY6UD.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/InlineEdit.d.ts

@@ -1,14 +1,6 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import React__default from 'react';
 
-/**
- * InlineEdit — 텍스트를 제자리에서 수정하는 위젯.
- *
- * - 보기 모드: 값 + 연필 IconButton(hover/focus 시 표시, 터치 기기에서는 항상 표시).
- * - 편집 모드: DS Input(autoFocus, Enter=저장, Escape=취소) + 확인/취소 IconButton.
- * - 비동기 onSave 동안 확인 버튼이 로딩(회전 아이콘) 상태가 되고, 실패하면
- *   편집 모드를 유지한 채 danger 캡션을 보여준다(503은 데모 모드 안내).
- */
-
 interface InlineEditProps {
     value: string;
     onSave: (value: string) => void | Promise<void>;
@@ -18,6 +10,10 @@ interface InlineEditProps {
     /** 값이 비었을 때 표시할 텍스트. 기본 '—' */
     emptyText?: string;
 }
-declare function InlineEdit({ value, onSave, type, mono, disabled, emptyText, }: InlineEditProps): React__default.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const InlineEdit: React__default.FC<InlineEditProps & SduiBoxProps>;
 
 export { InlineEdit, type InlineEditProps };

package/dist/widgets/InlineEdit.js

@@ -1,2 +1,3 @@
-export { InlineEdit } from '../chunk-B4A4KY4K.js';
-import '../chunk-CRSY67TZ.js';
+export { InlineEdit } from '../chunk-VPVCVSFH.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/JsonField.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 
 /**
  * JsonField — JSON 편집용 텍스트 영역.
@@ -19,6 +20,10 @@ interface JsonFieldProps {
     disabled?: boolean;
     placeholder?: string;
 }
-declare function JsonField({ value, onChange, rows, invalid, disabled, placeholder, }: JsonFieldProps): React.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const JsonField: React.FC<JsonFieldProps & SduiBoxProps>;
 
 export { JsonField, type JsonFieldProps };

package/dist/widgets/JsonField.js

@@ -1,2 +1,3 @@
-export { JsonField } from '../chunk-L4ORCIVN.js';
-import '../chunk-CRSY67TZ.js';
+export { JsonField } from '../chunk-VCX2XEF6.js';
+import '../chunk-6FADQ2SU.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/LiveClock.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 
 /**
  * LiveClock — 1초 간격 실시간 시계 / 경과 시간 표시.
@@ -16,6 +17,10 @@ interface LiveClockProps {
     /** 날짜(시계 모드) 또는 시작 시각(경과 모드) 함께 표시 */
     showDate?: boolean;
 }
-declare function LiveClock({ startedAt, showDate }: LiveClockProps): React.JSX.Element;
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const LiveClock: React.FC<LiveClockProps & SduiBoxProps>;
 
 export { LiveClock, type LiveClockProps };

package/dist/widgets/LiveClock.js

@@ -1 +1,2 @@
-export { LiveClock } from '../chunk-QZQDHSMD.js';
+export { LiveClock } from '../chunk-Z3WGIFJP.js';
+import '../chunk-SAN4IX6N.js';