@wipco/sdui 0.5.0 → 0.6.0

package/dist/{chunk-IL2KS4WS.js → chunk-PJRXPMI3.js}

@@ -1,7 +1,7 @@
+import { containerLayoutStyle } from './chunk-QBIVW7E6.js';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/widgets/Strip.tsx
 var STRIP_CSS = `
 .erp-strip{display:flex;align-items:stretch;overflow-x:auto;min-width:0;padding-bottom:var(--wp-space-1);scrollbar-width:thin;scrollbar-color:var(--wp-border-default) transparent}
 .erp-strip::-webkit-scrollbar{height:6px}
@@ -14,12 +14,19 @@ var STRIP_CSS = `
 function StripStyles() {
   return /* @__PURE__ */ jsx("style", { href: "erp-strip", precedence: "medium", children: STRIP_CSS });
 }
-function Strip({ children, gap = "var(--wp-space-3)", snap = false }) {
+function Strip({ children, gap = "12", snap = false }) {
   const items = React.Children.toArray(children);
-  return /* @__PURE__ */ jsxs("div", { className: snap ? "erp-strip erp-strip--snap" : "erp-strip", style: { gap }, children: [
-    /* @__PURE__ */ jsx(StripStyles, {}),
-    items.map((child, index) => /* @__PURE__ */ jsx("div", { className: "erp-strip__item", children: child }, index))
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: snap ? "erp-strip erp-strip--snap" : "erp-strip",
+      style: containerLayoutStyle({ gap }) ?? { gap: "12px" },
+      children: [
+        /* @__PURE__ */ jsx(StripStyles, {}),
+        items.map((child, index) => /* @__PURE__ */ jsx("div", { className: "erp-strip__item", children: child }, index))
+      ]
+    }
+  );
 }
 
 export { Strip };

package/dist/chunk-QBIVW7E6.js

@@ -0,0 +1,90 @@
+// src/layout.ts
+var GAP_CSS = {
+  "2": "2px",
+  "4": "4px",
+  "8": "8px",
+  "12": "12px",
+  "16": "16px",
+  "20": "20px",
+  "24": "24px",
+  "32": "32px"
+};
+var ALIGN_CSS = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline",
+  stretch: "stretch"
+};
+var JUSTIFY_CSS = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+var WEIGHT_CSS = {
+  regular: "var(--wp-weight-regular, 400)",
+  medium: "var(--wp-weight-medium, 500)",
+  semibold: "var(--wp-weight-semibold, 600)",
+  bold: "var(--wp-weight-bold, 700)"
+};
+var TEXT_ALIGN_CSS = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+var COLUMNS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6]);
+function lookup(table, value) {
+  if (value === void 0 || value === null) return void 0;
+  return table[String(value)];
+}
+function containerLayoutStyle(props) {
+  const gap = lookup(GAP_CSS, props.gap);
+  const alignItems = lookup(ALIGN_CSS, props.align);
+  const justifyContent = lookup(JUSTIFY_CSS, props.justify);
+  const flexWrap = props.wrap === void 0 ? void 0 : props.wrap ? "wrap" : "nowrap";
+  if (gap === void 0 && alignItems === void 0 && justifyContent === void 0 && flexWrap === void 0) {
+    return void 0;
+  }
+  return { gap, alignItems, justifyContent, flexWrap };
+}
+function columnsClass(columns) {
+  const n = Number(columns);
+  return Number.isInteger(n) && COLUMNS.has(n) ? `wp-grid--${n}` : void 0;
+}
+var CHILD_LAYOUT_PROPS = /* @__PURE__ */ new Set([
+  "grow",
+  "shrink",
+  "span",
+  "selfAlign",
+  "truncate"
+]);
+function childLayoutFrom(props) {
+  const style = {};
+  if (props.grow !== void 0) style.flexGrow = props.grow ? 1 : 0;
+  if (props.shrink !== void 0) style.flexShrink = props.shrink ? 1 : 0;
+  const span = Number(props.span);
+  if (Number.isInteger(span) && COLUMNS.has(span)) style.gridColumn = `span ${span}`;
+  const alignSelf = lookup(ALIGN_CSS, props.selfAlign);
+  if (alignSelf !== void 0) style.alignSelf = alignSelf;
+  const className = props.truncate ? "wp-truncate" : void 0;
+  const hasStyle = Object.keys(style).length > 0;
+  if (!hasStyle && className === void 0) return void 0;
+  return { style: hasStyle ? style : void 0, className };
+}
+function typographyStyle(props) {
+  const fontWeight = lookup(WEIGHT_CSS, props.weight);
+  const textAlign = lookup(TEXT_ALIGN_CSS, props.textAlign);
+  if (fontWeight === void 0 && textAlign === void 0) return void 0;
+  return { fontWeight, textAlign };
+}
+var LAYOUT_CSS = `
+.wp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.wp-grid--1{grid-template-columns:minmax(0,1fr)}
+.wp-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
+.wp-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
+@media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}
+`;
+
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, childLayoutFrom, columnsClass, containerLayoutStyle, typographyStyle };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
 import { D as DatePicker, a as DateRangePicker } from './DatePicker-CTDcFR7V.js';
 export { b as DatePickerProps, c as DateRangePickerProps, d as DateRangeValue } from './DatePicker-CTDcFR7V.js';
+import { S as SduiContainerLayoutProps, a as SduiColumnsScale, b as SduiWeightScale, c as SduiTextAlignScale } from './layout-BnYUuWC2.js';
+export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, d as SduiAlignScale, e as SduiChildLayoutProps, f as SduiGapScale, g as SduiSpanScale, h as childLayoutFrom, i as columnsClass, j as containerLayoutStyle, t as typographyStyle } from './layout-BnYUuWC2.js';
 import { S as SduiAction, a as SduiPropValue, b as SduiRule, c as SduiPage } from './types-D5Tkrynd.js';
 export { d as SduiCalcRef, e as SduiChild, f as SduiIndexRef, g as SduiItemRef, h as SduiNode, i as SduiScalar, j as SduiStateRef } from './types-D5Tkrynd.js';
 
@@ -596,39 +598,45 @@ interface TooltipProps extends React__default.HTMLAttributes<HTMLSpanElement> {
 /** hover 힌트. 트리거를 감싸며 위치는 CSS가 잡는다 — 포털을 쓰지 않는다. */
 declare function Tooltip({ label, shortcut, placement, wrap, children, className, ...rest }: TooltipProps): React__default.JSX.Element;
 
-interface GridProps {
-    /** wp-grid--N 프리셋 */
-    columns?: 2 | 3 | 4;
+interface GridProps extends SduiContainerLayoutProps {
+    /** wp-grid--N 프리셋 (1~6) */
+    columns?: SduiColumnsScale;
     /** 커스텀 트랙 — grid-template-columns 값. columns보다 우선 */
     template?: string;
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
 }
-declare function Grid({ columns, template, className, style, children }: GridProps): React__default.JSX.Element;
+declare function Grid({ columns, template, gap, align, justify, wrap, className, style, children }: GridProps): React__default.JSX.Element;
 type Justify = 'start' | 'center' | 'end' | 'between';
-interface RowProps {
+interface RowProps extends SduiContainerLayoutProps {
     /** 가로 정렬 (기본 start) */
     justify?: Justify;
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
 }
-declare function Row({ justify, className, style, children }: RowProps): React__default.JSX.Element;
-interface ActionsProps {
+declare function Row({ justify, gap, align, wrap, className, style, children }: RowProps): React__default.JSX.Element;
+interface ActionsProps extends SduiContainerLayoutProps {
     /** 가로 정렬 — 기본 end(우측) */
     justify?: Justify;
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
 }
-/** 액션 버튼 묶음 — 슬롯 안에서 정렬을 제어한다(flex:1로 슬롯 폭 차지). */
-declare function Actions({ justify, className, style, children }: ActionsProps): React__default.JSX.Element;
-declare function Col({ className, style, children }: {
+/**
+ * 액션 버튼 묶음 — 슬롯 안에서 정렬을 제어한다(flex:1로 슬롯 폭 차지).
+ *
+ * `justify = 'end'`가 **2단(타입별 기본)의 실제 사례**다. 전역 기본은 `.wp-row`의
+ * `flex-start`인데 이 타입만 `end`로 시작하고, 스펙이 `justify`를 주면 그것이 이긴다.
+ */
+declare function Actions({ justify, gap, align, wrap, className, style, children }: ActionsProps): React__default.JSX.Element;
+interface ColProps extends SduiContainerLayoutProps {
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
-}): React__default.JSX.Element;
+}
+declare function Col({ gap, align, justify, wrap, className, style, children }: ColProps): React__default.JSX.Element;
 interface SpacerProps {
     /**
      * 간격 토큰 단계(`--wp-space-N`). 주면 "남는 공간 밀어내기"가 아니라
@@ -639,25 +647,37 @@ interface SpacerProps {
     size?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
 }
 declare function Spacer({ size }: SpacerProps): React__default.JSX.Element;
-interface SectionProps {
+interface SectionProps extends SduiContainerLayoutProps {
     title?: React__default.ReactNode;
     className?: string;
     style?: React__default.CSSProperties;
     children?: React__default.ReactNode;
 }
-declare function Section({ title, className, style, children }: SectionProps): React__default.JSX.Element;
+declare function Section({ title, gap, align, justify, wrap, className, style, children }: SectionProps): React__default.JSX.Element;
 type TextPreset = 'display-1' | 'display-2' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-lg' | 'body' | 'body-sm' | 'caption' | 'label' | 'overline' | 'micro' | 'metric' | 'metric-sm' | 'mono' | 'mono-xs';
 interface TextProps {
     /** styles.css의 .wp-* 타입 프리셋 이름 */
     preset?: TextPreset;
     as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * 글자 굵기 — `preset`이 정한 굵기를 이 자리에서만 뒤집는다.
+     * 프리셋 19종이 크기·굵기·정렬을 묶어 놔 "본문 크기인데 굵게"를 만들 수 없던 것을 푼다.
+     */
+    weight?: SduiWeightScale;
+    /** 글자 정렬. */
+    textAlign?: SduiTextAlignScale;
     className?: string;
     style?: React__default.CSSProperties;
     /** children 대신 쓸 수 있는 내용 — 상태 바인딩({ "$state": ... })에 유용 */
     value?: React__default.ReactNode;
     children?: React__default.ReactNode;
 }
-declare function Text({ preset, as: Tag, className, style, value, children }: TextProps): React__default.JSX.Element;
+/**
+ * `weight`·`textAlign`은 **이 요소에만** 붙는다. 자손에게 내려보내는 코드는 없다 —
+ * 그 일은 CSS 상속이 이미 하고 있고, JS로 다시 하면 `Show`/`Can` 같은 fragment 노드
+ * 때문에 스펙 트리의 부모와 실제 DOM 부모가 어긋나 조용히 틀린 값이 내려간다(layout.ts 주석).
+ */
+declare function Text({ preset, as: Tag, weight, textAlign, className, style, value, children, }: TextProps): React__default.JSX.Element;
 interface KeyValueItem {
     label: React__default.ReactNode;
     /** source에서 꺼낼 필드 키. 생략하면 value를 그대로 출력 */
@@ -1551,4 +1571,4 @@ declare class NodeErrorBoundary extends React__default.Component<Props, State> {
     render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 }
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type CustomActionHandler, type CustomValidator, DatePicker, DateRangePicker, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, type SduiTextCell, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, Toast, type ToastProps, Tooltip, type TooltipProps, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };
+export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePicker, DateRangePicker, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, Toast, type ToastProps, Tooltip, type TooltipProps, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };

package/dist/index.js

@@ -1,5 +1,7 @@
 import { DEV, DateRangePicker, DatePicker, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, HoistedStyle, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-FGRR3ROJ.js';
 export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-FGRR3ROJ.js';
+import { containerLayoutStyle, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-QBIVW7E6.js';
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, childLayoutFrom, columnsClass, containerLayoutStyle, typographyStyle } from './chunk-QBIVW7E6.js';
 import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-KADFN76X.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-KADFN76X.js';
 import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, Checkbox, Card, Button, Badge, Alert, SegmentedControl, Dialog } from './chunk-ZUCI34QY.js';
@@ -189,51 +191,76 @@ function Can({ entity, action = "read", scope, fallback = null, children }) {
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function Grid({ columns = 3, template, className, style, children }) {
+function mergeStyle(own, given) {
+  if (!own) return given;
+  if (!given) return own;
+  return { ...own, ...given };
+}
+function Grid({ columns = 3, template, gap, align, justify, wrap, className, style, children }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("wp-grid", !template && `wp-grid--${columns}`, className),
-      style: template ? { gridTemplateColumns: template, ...style } : style,
+      className: cx("wp-grid", !template && columnsClass(columns), className),
+      style: mergeStyle(
+        template ? { gridTemplateColumns: template, ...containerLayoutStyle({ gap, align, justify, wrap }) } : containerLayoutStyle({ gap, align, justify, wrap }),
+        style
+      ),
       children
     }
   );
 }
-var JUSTIFY_CSS = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  between: "space-between"
-};
-function Row({ justify, className, style, children }) {
+function Row({ justify, gap, align, wrap, className, style, children }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx("wp-row", justify === "between" && "wp-row--between", className),
-      style: justify && justify !== "between" ? { justifyContent: JUSTIFY_CSS[justify], ...style } : style,
+      style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
       children
     }
   );
 }
-function Actions({ justify = "end", className, style, children }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("wp-row", className), style: { flex: 1, justifyContent: JUSTIFY_CSS[justify], ...style }, children });
+function Actions({ justify = "end", gap, align, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("wp-row", className),
+      style: mergeStyle({ flex: 1, ...containerLayoutStyle({ gap, align, justify, wrap }) }, style),
+      children
+    }
+  );
 }
-function Col({ className, style, children }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("wp-col", className), style, children });
+function Col({ gap, align, justify, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("wp-col", className), style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style), children });
 }
 var SPACER_STEPS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6, 8]);
 function Spacer({ size }) {
   const step = size !== void 0 && SPACER_STEPS.has(Number(size)) ? Number(size) : void 0;
   return /* @__PURE__ */ jsx("div", { className: cx("wp-spacer", step !== void 0 && `wp-spacer--${step}`) });
 }
-function Section({ title, className, style, children }) {
-  return /* @__PURE__ */ jsxs("section", { className: cx("wp-col", className), style, children: [
-    title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
-    children
-  ] });
+function Section({ title, gap, align, justify, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cx("wp-col", className),
+      style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
+      children: [
+        title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
+        children
+      ]
+    }
+  );
 }
-function Text({ preset = "body", as: Tag2 = "p", className, style, value, children }) {
-  return /* @__PURE__ */ jsx(Tag2, { className: cx(`wp-${preset}`, className), style, children: value ?? children });
+function Text({
+  preset = "body",
+  as: Tag2 = "p",
+  weight,
+  textAlign,
+  className,
+  style,
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Tag2, { className: cx(`wp-${preset}`, className), style: mergeStyle(typographyStyle({ weight, textAlign }), style), children: value ?? children });
 }
 function KeyValueList({ source, items, className, style }) {
   return /* @__PURE__ */ jsx("div", { className: cx("wp-kv", className), style, children: (items ?? []).map((item, index) => {
@@ -2043,6 +2070,16 @@ function SduiNodeRenderer({
       props[name] = resolved;
     }
   }
+  const childLayout = childLayoutFrom(props);
+  if (childLayout) {
+    for (const name of CHILD_LAYOUT_PROPS) delete props[name];
+    if (childLayout.style) {
+      props.style = isPlainObject2(props.style) ? { ...childLayout.style, ...props.style } : childLayout.style;
+    }
+    if (childLayout.className) {
+      props.className = typeof props.className === "string" && props.className ? `${childLayout.className} ${props.className}` : childLayout.className;
+    }
+  }
   for (const [name, slotChildren] of Object.entries(slots ?? {})) {
     if (!Array.isArray(slotChildren)) {
       warnOnce2(
@@ -2448,6 +2485,7 @@ function SduiRenderer({
     // 해석된 어댑터를 트리에 흘려보낸다 — dispatch를 거치지 않고 스스로 요청을 내는
     // 컴포넌트(목록 조회 등)도 호스트가 건 잠금 안에서 움직이게 하기 위해서다(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: [
         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

package/dist/layout-BnYUuWC2.d.ts

@@ -0,0 +1,150 @@
+import React__default from 'react';
+
+/**
+ * 레이아웃 어휘 — 공통 프롭의 값 척도와, 그 값을 CSS로 바꾸는 자리.
+ *
+ * ── 왜 이 모듈이 생겼나
+ * 스펙 85개에서 `style` 우회가 187선언 있었고, 그중 73선언(39%)이 "프롭이 없어서"
+ * 손으로 쓴 CSS였다(`gap` 33 · `align` 17 · `wrap` 7 · `weight` 7 · `justify` 4 ·
+ * `textAlign` 3 · `grow` 1 · `selfAlign` 1). `Col`에는 레이아웃 프롭이 0개였고,
+ * v2 원본 88화면이 368회 쓰던 `items-center`에 대응하는 프롭이 어휘 어디에도 없었다.
+ *
+ * ── 축을 네 갈래로 가른다 (이 갈래가 구현 방식을 결정한다)
+ *   1. 컨테이너 전용   `gap` `wrap` `columns`      — 자식에 그 개념이 없다
+ *   2. 컨테이너+자식   `align` ↔ `selfAlign`       — CSS의 align-items/align-self 짝
+ *   3. 자식 전용       `grow` `shrink` `span` `truncate`
+ *   4. CSS가 상속함    `weight` `textAlign`        — **JS는 아무것도 하지 않는다**
+ *
+ * 4번이 핵심이다. `font-weight`·`text-align`은 브라우저가 이미 자손에게 상속시킨다.
+ * 렌더러가 부모를 훑어 값을 내려보내면 중복이고, 게다가 **반드시 틀린다** —
+ * `Show`·`Can`·`ForEach`는 `dom.element: 'fragment'`라 자기 DOM 박스가 없어서
+ * 스펙 트리의 부모와 실제 DOM 부모가 다르고(`Row > Show > Text`의 DOM 부모는 Row다),
+ * `Alert`·`Card`는 자식이 `__body`/`__text` 안으로 들어가 한 겹 더 어긋난다.
+ * 그래서 `weight`/`textAlign`은 **자기 요소에만 값을 붙이고 끝낸다.** 부모를 보지 않는다.
+ */
+/**
+ * 간격 척도 — **px 숫자 문자열**이다. 토큰 단계 번호(`1..8`)도 t-shirt(`sm/md/lg`)도 쓰지 않는다.
+ *
+ * 단계 번호를 버린 이유: DS 토큰 번호와 v2가 쓰던 Tailwind 번호가 위에서 어긋난다.
+ * `--wp-space-7`=32px인데 `gap-7`=28px, `--wp-space-8`=40px인데 `gap-8`=32px이다.
+ * 88화면을 옮기는 사람이 `gap-4`를 보고 `gap="4"`를 쓰면 4px이 아니라 16px을 원한 것이다.
+ *
+ * t-shirt를 버린 이유: `size` 프롭이 이미 12종에서 `sm/md/lg`를 **컨트롤 높이**로 쓴다
+ * (`Button.size` 131회, `Dialog.size` 87회). 한 속성 패널에 `size:"md"`(높이 32px)와
+ * `gap:"md"`(간격 12px)가 나란히 놓이면 같은 낱말이 두 척도를 가리키게 된다.
+ *
+ * 6px은 뺐다 — v2가 `gap-1.5`로 38회 쓰지만 DS 척도에 없는 값이라, 여기 넣으면
+ * "편집기가 DS 척도를 강제한다"는 이 작업의 목적 자체가 무너진다. `--wp-space-1half`를
+ * DS에 더할지는 DS 쪽 결정이고, 그때까지 그 자리는 8px로 붙거나 `style`에 남는다.
+ */
+type SduiGapScale = '2' | '4' | '8' | '12' | '16' | '20' | '24' | '32';
+/** `align-items` / `align-self`의 DS 낱말. 값 이름을 CSS 낱말(`flex-start`)로 두지 않는 것은 기존 `Justify`와 짝을 맞추기 위해서다. */
+type SduiAlignScale = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+/** 그리드 자식이 먹는 트랙 수(`grid-column: span N`). */
+type SduiSpanScale = 1 | 2 | 3 | 4 | 5 | 6;
+/** `Grid`의 트랙 수. 기존 2·3·4에 1·5·6을 더했다 — v2가 22회 쓴다(1열 11 · 5열 5 · 6열 3). */
+type SduiColumnsScale = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * 글자 굵기. `Text.preset` 19종이 크기·굵기·정렬을 한 덩어리로 묶어 놔서
+ * "본문 크기인데 굵게"(v2 `font-medium` 282회)를 만들 수단이 없었다.
+ */
+type SduiWeightScale = 'regular' | 'medium' | 'semibold' | 'bold';
+type SduiTextAlignScale = 'left' | 'center' | 'right';
+/**
+ * 자기 루트가 flex/grid인 컴포넌트만 받는 축.
+ *
+ * 이 프롭들을 렌더러가 아무 노드에나 꽂지 않고 **컴포넌트가 직접 받게** 한 이유:
+ * 렌더러는 컴포넌트의 루트가 flex인지 알 수 없어서, `Timeline`에 `gap`을 준 스펙이
+ * 아무 일도 일어나지 않은 채 조용히 넘어간다. 프롭으로 두면 타입이 그 자리에서 막는다.
+ */
+interface SduiContainerLayoutProps {
+    /** 자식 사이 간격(px 척도). 생략하면 컴포넌트의 CSS 기본값. */
+    gap?: SduiGapScale;
+    /** 교차축 정렬(`align-items`). 자식이 `selfAlign`으로 자기 몫만 뒤집을 수 있다. */
+    align?: SduiAlignScale;
+    /** 주축 정렬(`justify-content`). */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    /** 넘치면 다음 줄로(`flex-wrap`). */
+    wrap?: boolean;
+}
+/**
+ * 컨테이너 축 → 인라인 style.
+ *
+ * ── 유틸 클래스(`wp-gap--8` 등)를 만들지 않고 인라인 style로 가는 이유
+ * 실측: 같은 클래스의 기본값이 두 시트에서 다르다(`.wp-col` gap 라이브러리 16px / ERP 8px,
+ * `.wp-grid` 16px / 20px). 유틸 클래스는 `.wp-col`과 **명시도가 같아서**(둘 다 클래스 1개)
+ * 어느 쪽이 이길지 소스 순서로 결정되는데, 이 시트는 React가 런타임에 꽂는 hoisted
+ * `<style>`이고 저쪽은 번들러가 낸 `<link>`라 순서를 보장할 수 없다. 인라인 style은
+ * 명시도에서 항상 이기므로 `gap="16"`이 두 소비자에서 똑같이 16px이 된다.
+ *
+ * 캐스케이드를 잃는 대가는 없다. 4단 해소에서 인라인이 맡는 것은 1단(자식 지정)뿐이고,
+ * 2단(타입별 기본)은 컴포넌트 기본 인자가, 3·4단(상속·전역)은 `.wp-row`/`.wp-col` 같은
+ * 기존 클래스가 그대로 맡는다. 프롭을 안 주면 인라인 선언 자체가 없어 아래 단이 그대로 보인다.
+ */
+declare function containerLayoutStyle(props: SduiContainerLayoutProps): React__default.CSSProperties | undefined;
+/** `Grid.columns` → `wp-grid--N`. 표에 없는 값은 undefined로 떨어뜨려 클래스 주입을 막는다. */
+declare function columnsClass(columns: unknown): string | undefined;
+/**
+ * 부모가 아니라 **자기 박스**에 거는 축. 부모 쪽 형태가 없다.
+ *
+ * 컨테이너 축과 달리 이쪽은 렌더러가 가로채 아무 노드에나 붙인다. 어떤 컴포넌트든
+ * flex/grid 부모의 자식이 될 수 있어서 대상을 좁힐 근거가 없기 때문이다.
+ */
+interface SduiChildLayoutProps {
+    /** 남는 공간을 먹는다(`flex-grow`). */
+    grow?: boolean;
+    /** 좁아질 때 줄어든다(`flex-shrink`). `false`면 원래 크기를 지킨다. */
+    shrink?: boolean;
+    /** 그리드에서 먹는 트랙 수(`grid-column: span N`). */
+    span?: SduiSpanScale;
+    /** 부모의 `align`을 이 노드에서만 뒤집는다(`align-self`). */
+    selfAlign?: SduiAlignScale;
+    /** 한 줄로 잘라 말줄임(`.wp-truncate`). */
+    truncate?: boolean;
+}
+/** 렌더러가 가로채는 자식 축 프롭 이름. */
+declare const CHILD_LAYOUT_PROPS: ReadonlySet<string>;
+interface ChildLayoutResult {
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+/**
+ * 자식 축 → style/className.
+ *
+ * `truncate`만 클래스인 이유: 선언이 넷이고(`overflow`·`text-overflow`·`white-space`·
+ * `min-width`) 그중 `min-width:0`이 flex 자식의 축소 하한을 푸는 필수 조건인데,
+ * ERP 시트의 `.wp-row`/`.wp-col`/`.wp-grid`에는 `min-width:0`이 아예 없다(라이브러리에는 있다).
+ * 그래서 조상을 고치는 대신 **잘리는 요소 자신에게** `min-width:0`을 건다 — flex 자식의
+ * 하한을 푸는 표준 처방이고, 조상 시트를 건드리지 않으니 기존 화면이 움직이지 않는다.
+ */
+declare function childLayoutFrom(props: SduiChildLayoutProps): ChildLayoutResult | undefined;
+/**
+ * `weight`/`textAlign` → 자기 요소의 style.
+ *
+ * **부모를 훑지 않는다.** 이 둘은 CSS가 이미 자손에게 상속시키는 속성이라, 값을 자기
+ * 요소에 한 번 붙이면 3단(부모 상속)이 공짜로 성립한다. 인라인으로 붙여도 상속은
+ * 똑같이 일어난다 — 상속은 명시도가 아니라 계산값을 따라가기 때문이다.
+ */
+declare function typographyStyle(props: {
+    weight?: SduiWeightScale;
+    textAlign?: SduiTextAlignScale;
+}): React__default.CSSProperties | undefined;
+/**
+ * 새 어휘가 필요로 하는 **최소한의** CSS.
+ *
+ * 여기 들어온 것은 인라인 style로 표현할 수 없는 둘뿐이다:
+ *   · `.wp-truncate` — 선언이 여럿이라 묶는 편이 낫다
+ *   · `.wp-grid--1/5/6` — 미디어 쿼리가 필요하다. 인라인 `grid-template-columns`로 내면
+ *     좁은 화면에서 열이 접히는 기존 동작(`.wp-grid--3/4` → 2열 → 1열)을 잃는다.
+ *
+ * 나머지(gap·align·justify·wrap·grow·shrink·span·selfAlign·weight·textAlign)는 전부
+ * 인라인이라 CSS가 없다. 규칙을 적게 낼수록 두 시트와 충돌할 자리도 줄어든다 —
+ * 실제로 이 세 선택자는 라이브러리 시트에도 ERP 시트에도 없어서 겹칠 상대가 없다.
+ *
+ * `styles.css`가 아니라 `HoistedStyle`로 내보내는 이유: ERP는 `@wipco/sdui/styles.css`를
+ * **한 번도 로드하지 않는다**(`main.tsx`가 자기 `styles/index.css`만 import한다).
+ * 시트에 넣으면 ERP에서 규칙이 도달하지 못해 `truncate`·5열/6열이 죽는다.
+ */
+declare const LAYOUT_CSS = "\n.wp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.wp-grid--1{grid-template-columns:minmax(0,1fr)}\n.wp-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}\n.wp-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}\n@media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}\n";
+
+export { CHILD_LAYOUT_PROPS as C, LAYOUT_CSS as L, type SduiContainerLayoutProps as S, type SduiColumnsScale as a, type SduiWeightScale as b, type SduiTextAlignScale as c, type SduiAlignScale as d, type SduiChildLayoutProps as e, type SduiGapScale as f, type SduiSpanScale as g, childLayoutFrom as h, columnsClass as i, containerLayoutStyle as j, typographyStyle as t };

package/dist/meta.js

@@ -62,6 +62,149 @@ var classNameProp = {
   group: "layout",
   advanced: true
 };
+var gapProp = {
+  name: "gap",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAC04\uACA9",
+  default: "8",
+  description: "DS \uAC04\uACA9 \uCC99\uB3C4(px). \uCC99\uB3C4 \uBC16 \uAC12\uC740 style\uC5D0 \uB0A8\uAE34\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"
+};
+var gridGapProp = {
+  name: "gap",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAC04\uACA9",
+  default: "20",
+  description: "DS \uAC04\uACA9 \uCC99\uB3C4(px). \uADF8\uB9AC\uB4DC \uAE30\uBCF8\uC740 20px(--wp-gutter)\uC774\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"
+};
+var rowAlignProp = {
+  name: "align",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAD50\uCC28\uCD95 \uC815\uB82C",
+  default: "center",
+  description: "\uC790\uC2DD\uB4E4\uC744 \uC138\uB85C\uB85C \uC5B4\uB514\uC5D0 \uB9DE\uCD9C\uC9C0(align-items). \uC790\uC2DD\uC774 selfAlign\uC73C\uB85C \uC790\uAE30 \uAC83\uB9CC \uB4A4\uC9D1\uC744 \uC218 \uC788\uB2E4.",
+  options: [
+    { value: "start", label: "\uC704" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uC544\uB798" },
+    { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
+    { value: "stretch", label: "\uB298\uB9AC\uAE30" }
+  ],
+  group: "layout"
+};
+var stretchAlignProp = {
+  name: "align",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uAD50\uCC28\uCD95 \uC815\uB82C",
+  default: "stretch",
+  description: "\uC790\uC2DD\uB4E4\uC744 \uAC00\uB85C\uB85C \uC5B4\uB514\uC5D0 \uB9DE\uCD9C\uC9C0(align-items). \uC790\uC2DD\uC774 selfAlign\uC73C\uB85C \uC790\uAE30 \uAC83\uB9CC \uB4A4\uC9D1\uC744 \uC218 \uC788\uB2E4.",
+  options: [
+    { value: "start", label: "\uC67C\uCABD" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uC624\uB978\uCABD" },
+    { value: "baseline", label: "\uAE00\uC790 \uAE30\uC900\uC120" },
+    { value: "stretch", label: "\uB298\uB9AC\uAE30" }
+  ],
+  group: "layout"
+};
+var wrapProp = {
+  name: "wrap",
+  kind: "boolean",
+  label: "\uB118\uCE58\uBA74 \uC904\uBC14\uAFC8",
+  default: false,
+  description: "flex-wrap. \uB044\uBA74 \uD55C \uC904\uC5D0 \uBC00\uC5B4 \uB123\uB294\uB2E4.",
+  group: "layout"
+};
+var columnJustifyProp = {
+  name: "justify",
+  kind: "enum",
+  label: "\uC774 \uC548\uC758 \uC8FC\uCD95 \uC815\uB82C",
+  description: "justify-content. \uC138\uB85C \uBB36\uC74C\uC774\uB77C \uC138\uB85C \uBC29\uD5A5\uC774\uACE0, \uB192\uC774\uAC00 \uC815\uD574\uC9C4 \uC790\uB9AC\uC5D0\uC11C\uB9CC \uD45C\uAC00 \uB09C\uB2E4.",
+  options: [
+    { value: "start", label: "\uC704" },
+    { value: "center", label: "\uAC00\uC6B4\uB370" },
+    { value: "end", label: "\uC544\uB798" },
+    { value: "between", label: "\uC591\uB05D" }
+  ],
+  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 ActionsMeta = {
   name: "Actions",
   label: "\uC561\uC158 \uBB36\uC74C",
@@ -83,8 +226,15 @@ var ActionsMeta = {
       ],
       group: "layout"
     },
+    gapProp,
+    rowAlignProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: false, label: "\uC815\uB82C\uD560 \uBC84\uD2BC\uB4E4" },
   dom: { element: "div" },
@@ -137,7 +287,12 @@ var CardMeta = {
     { name: "selected", kind: "boolean", label: "\uC120\uD0DD\uB428", default: false, bindable: true, group: "appearance" },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   slots: [
     { name: "actions", label: "\uD5E4\uB354 \uC6B0\uCE21 \uC561\uC158", description: "\uBC84\uD2BC\xB7Select \uB4F1", allow: ["Actions", "Button", "IconButton", "Select", "Badge", "Tag", "Row", "Show", "Can"] },
@@ -158,12 +313,28 @@ var ColMeta = {
   category: "layout",
   icon: "chevrons-up-down",
   description: "\uC790\uC2DD\uC744 \uC138\uB85C\uB85C \uC313\uB294\uB2E4(.wp-col).",
-  props: [styleProp, classNameProp],
+  props: [
+    gapProp,
+    stretchAlignProp,
+    columnJustifyProp,
+    wrapProp,
+    styleProp,
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
+  ],
   children: { accepts: true, text: true },
   dom: { element: "div" },
+  // 자식이 둘이다 — gap·align은 자식이 하나면 값을 바꿔도 화면이 그대로라
+  // 사용자가 프롭이 고장 났다고 판단한다. 레이아웃 컨테이너 preset의 규칙으로 잡는다.
   preset: {
     component: "Col",
-    children: [{ component: "Text", props: { preset: "body" }, children: ["\uCCAB \uC904"] }]
+    children: [
+      { component: "Text", props: { preset: "body" }, children: ["\uCCAB \uC904"] },
+      { component: "Text", props: { preset: "body" }, children: ["\uB458\uC9F8 \uC904"] }
+    ]
   },
   resize: { kind: "style", axis: "both" }
 };
@@ -192,10 +363,15 @@ var GridMeta = {
       label: "\uC5F4 \uC218",
       default: 3,
       description: "wp-grid--N \uD504\uB9AC\uC14B. \uC2A4\uD399\uC5D0\uB294 \uBB38\uC790\uC5F4\uC774 \uC544\uB2C8\uB77C \uC22B\uC790\uB85C \uB4E4\uC5B4\uAC04\uB2E4.",
+      // 1·5·6은 새로 열었다 — v2 원본 88화면이 22회 쓴다(1열 11 · 5열 5 · 6열 3).
+      // 규칙은 어휘가 들고 다니는 시트(LAYOUT_CSS)에 있다. 2·3·4는 기존 시트 그대로.
       options: [
+        { value: 1, label: "1\uC5F4" },
         { value: 2, label: "2\uC5F4" },
         { value: 3, label: "3\uC5F4" },
-        { value: 4, label: "4\uC5F4" }
+        { value: 4, label: "4\uC5F4" },
+        { value: 5, label: "5\uC5F4" },
+        { value: 6, label: "6\uC5F4" }
       ],
       group: "layout"
     },
@@ -206,8 +382,15 @@ var GridMeta = {
       description: 'grid-template-columns \uAC12. \uC608: "minmax(0,1.6fr) minmax(0,1fr)". columns\uB97C \uBB34\uC2DC\uD55C\uB2E4.',
       group: "layout"
     },
+    gridGapProp,
+    stretchAlignProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: false, label: "\uADF8\uB9AC\uB4DC \uCE78" },
   dom: { element: "div" },
@@ -219,7 +402,7 @@ var GridMeta = {
       { component: "Card", props: { title: "\uC624\uB978\uCABD" }, children: [] }
     ]
   },
-  resize: { kind: "enum", prop: "columns", values: ["2", "3", "4"], axis: "x" }
+  resize: { kind: "enum", prop: "columns", values: ["1", "2", "3", "4", "5", "6"], axis: "x" }
 };
 var PageHeadMeta = {
   name: "PageHead",
@@ -260,8 +443,15 @@ var RowMeta = {
       ],
       group: "layout"
     },
+    gapProp,
+    rowAlignProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: true },
   dom: { element: "div" },
@@ -283,15 +473,26 @@ var SectionMeta = {
   description: "\uC81C\uBAA9(h4)\uC774 \uBD99\uC740 \uC138\uB85C \uAD6C\uD68D.",
   props: [
     { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
+    gapProp,
+    stretchAlignProp,
+    columnJustifyProp,
+    wrapProp,
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp
   ],
   children: { accepts: true, text: true },
   dom: { element: "section", slotElement: { title: "h2" } },
   preset: {
     component: "Section",
     props: { title: "\uC139\uC158 \uC81C\uBAA9" },
-    children: [{ component: "Text", props: { preset: "body" }, children: ["\uB0B4\uC6A9"] }]
+    children: [
+      { component: "Text", props: { preset: "body" }, children: ["\uB0B4\uC6A9"] },
+      { component: "Text", props: { preset: "body" }, children: ["\uB458\uC9F8 \uC904"] }
+    ]
   },
   resize: { kind: "style", axis: "both" }
 };
@@ -478,7 +679,12 @@ var ButtonMeta = {
     },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   children: { accepts: true, text: true, label: "\uBC84\uD2BC \uB77C\uBCA8" },
   dom: { element: "button", elementProp: "as" },
@@ -877,7 +1083,12 @@ var InputMeta = {
       group: "content"
     },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   children: { accepts: false },
   dom: { element: "input" },
@@ -930,7 +1141,12 @@ var SelectMeta = {
     { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
     { name: "aria-label", kind: "string", label: "\uC811\uADFC\uC131 \uB77C\uBCA8", description: "Field \uB77C\uBCA8\uC774 \uC5C6\uC744 \uB54C \uC4F4\uB2E4.", group: "content", advanced: true },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    truncateProp
   ],
   children: { accepts: false },
   dom: { element: "div" },
@@ -1242,6 +1458,39 @@ var TextMeta = {
       ],
       group: "appearance"
     },
+    /*
+     * weight·textAlign은 `preset`이 묶어 놓은 축을 푸는 자리다.
+     * 프리셋 19종이 크기·굵기·정렬을 한 덩어리로 갖고 있어서 "본문 크기인데 굵게"
+     * (v2 원본의 font-medium 282회)를 만들 수단이 없었다.
+     *
+     * `default`를 적지 않은 것은 의도다 — 기본 굵기가 preset마다 다르다(.wp-body 400,
+     * .wp-label 600, .wp-h1 700). 하나를 적으면 편집기가 다른 preset에서 값을 잘못 지운다.
+     */
+    {
+      name: "weight",
+      kind: "enum",
+      label: "\uAE00\uC790 \uAD75\uAE30",
+      description: "preset\uC774 \uC815\uD55C \uAD75\uAE30\uB97C \uC774 \uC790\uB9AC\uC5D0\uC11C\uB9CC \uB4A4\uC9D1\uB294\uB2E4. \uC0DD\uB7B5\uD558\uBA74 preset\uC758 \uAD75\uAE30.",
+      options: [
+        { value: "regular", label: "\uBCF4\uD1B5(400)" },
+        { value: "medium", label: "\uC911\uAC04(500)" },
+        { value: "semibold", label: "\uC57D\uAC04 \uAD75\uAC8C(600)" },
+        { value: "bold", label: "\uAD75\uAC8C(700)" }
+      ],
+      group: "appearance"
+    },
+    {
+      name: "textAlign",
+      kind: "enum",
+      label: "\uAE00\uC790 \uC815\uB82C",
+      description: "\uC0DD\uB7B5\uD558\uBA74 \uC0C1\uC18D\uBC1B\uC740 \uC815\uB82C\uC744 \uADF8\uB300\uB85C \uC4F4\uB2E4.",
+      options: [
+        { value: "left", label: "\uC67C\uCABD" },
+        { value: "center", label: "\uAC00\uC6B4\uB370" },
+        { value: "right", label: "\uC624\uB978\uCABD" }
+      ],
+      group: "appearance"
+    },
     {
       name: "value",
       kind: "node",
@@ -1251,7 +1500,14 @@ var TextMeta = {
       group: "content"
     },
     styleProp,
-    classNameProp
+    classNameProp,
+    growProp,
+    shrinkProp,
+    spanProp,
+    selfAlignProp,
+    // Text는 truncate의 주 대상이다 — v2 원본이 truncate 45회 + whitespace-nowrap 15회를
+    // 거의 전부 글자에 걸었다. 폭이 좁아지는 자리(표 셀·목록 행)에서 줄바꿈 대신 …로 자른다.
+    truncateProp
   ],
   children: { accepts: true, text: true, label: "\uD14D\uC2A4\uD2B8" },
   dom: { element: "p", elementProp: "as" },
@@ -3899,12 +4155,33 @@ var StripMeta = {
   icon: "arrow-right",
   description: "\uC790\uC2DD\uC744 \uC904\uBC14\uAFC8 \uC5C6\uC774 \uD55C \uC904\uB85C \uB298\uC5B4\uB193\uACE0 \uAC00\uB85C\uB85C \uC2A4\uD06C\uB864\uD55C\uB2E4. \uCE74\uB4DC \uCE90\uB7EC\uC140 \uAC19\uC740 \uC790\uB9AC\uC5D0 \uC4F4\uB2E4.",
   props: [
+    /*
+     * 자유 CSS 길이에서 DS 간격 척도로 좁혔다.
+     *
+     * `gap`이 공통 어휘로 올라오면서 한 이름이 두 타입을 갖게 됐다 — 다른 컨테이너는
+     * px 척도 문자열("12")인데 여기만 자유 길이("var(--wp-space-3)")라, 속성 패널에서
+     * 같은 이름이 자리마다 다른 입력을 그리게 된다.
+     *
+     * 실사용 4건이 전부 `"var(--wp-space-3)"`(=12px)이고 새 기본값도 12px이라
+     * 값이 무시돼도 화면이 그대로다. 그래도 편집기가 옛 값을 지우지 않도록 legacy 후보로 남긴다.
+     */
     {
       name: "gap",
-      kind: "string",
+      kind: "enum",
       label: "\uD56D\uBAA9 \uAC04\uACA9",
-      default: "var(--wp-space-3)",
-      description: "CSS \uAE38\uC774. \uAC04\uACA9 \uD1A0\uD070(var(--wp-space-N))\uC744 \uC4F0\uB294 \uD3B8\uC774 \uB0AB\uB2E4.",
+      default: "12",
+      description: "DS \uAC04\uACA9 \uCC99\uB3C4(px).",
+      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" },
+        { value: "var(--wp-space-3)", label: "12px (\uC61B \uD45C\uAE30)", legacy: true }
+      ],
       group: "layout"
     },
     {
@@ -3920,7 +4197,7 @@ var StripMeta = {
   dom: { element: "div" },
   preset: {
     component: "Strip",
-    props: { gap: "var(--wp-space-3)" },
+    props: { gap: "12" },
     children: [
       { component: "Card", props: { title: "\uCE74\uB4DC 1" } },
       { component: "Card", props: { title: "\uCE74\uB4DC 2" } },

package/dist/styles.css

@@ -306,10 +306,20 @@
 .wp-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--wp-text-muted); }
 
 /* ---------- 레이아웃 프리미티브 ---------- */
-.wp-col { display: flex; flex-direction: column; gap: var(--wp-space-4); min-width: 0; }
+/*
+ * gap 기본값은 **ERP의 styles/css/layout.css를 정본으로 삼아** 맞춘 값이다.
+ * 실측상 두 시트가 같은 클래스에 다른 값을 갖고 있었다 — .wp-col은 여기 16px / ERP 8px,
+ * .wp-grid는 여기 16px / ERP 20px(--wp-gutter). ERP가 이 시트를 로드하지 않아서
+ * (main.tsx가 자기 styles/index.css만 import한다) 지금까지 사고가 나지 않았을 뿐이다.
+ *
+ * 어긋난 채로는 메타데이터의 `default`를 적을 수가 없다. 편집기는 프롭 값이 default와
+ * 같으면 스펙에서 지우는데, 두 소비자의 실제 기본이 다르면 지운 순간 한쪽 화면이 바뀐다.
+ * 화면 85개가 이미 ERP 값으로 그려져 있으므로 그쪽을 정본으로 잡고 이 시트를 옮겼다.
+ */
+.wp-col { display: flex; flex-direction: column; gap: var(--wp-space-2); min-width: 0; }
 .wp-row { display: flex; align-items: center; gap: var(--wp-space-2); min-width: 0; }
 .wp-row--between { justify-content: space-between; }
-.wp-grid { display: grid; gap: var(--wp-space-4); min-width: 0; }
+.wp-grid { display: grid; gap: var(--wp-space-5); min-width: 0; }
 .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)); }

package/dist/widgets/Strip.d.ts

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { f as SduiGapScale } from '../layout-BnYUuWC2.js';
 
 /**
  * Strip — 가로 스크롤 스트립.
@@ -10,8 +11,14 @@ import React__default from 'react';
 
 interface StripProps {
     children: React__default.ReactNode;
-    /** 항목 간격(CSS 길이). 기본 var(--wp-space-3) */
-    gap?: string;
+    /**
+     * 항목 간격 — 간격 척도(px 문자열). 기본 12px.
+     *
+     * 예전에는 자유 CSS 길이(`'var(--wp-space-3)'`)를 받았다. `gap`이 공통 어휘로 올라오면서
+     * 한 이름이 두 타입을 갖게 되어 좁혔다 — 실사용 4건이 전부 `"var(--wp-space-3)"`라
+     * `"12"`로 무손실 이관된다. 척도 밖 값은 무시되고 기본값이 남는다.
+     */
+    gap?: SduiGapScale;
     /** 항목 시작점에 스크롤 스냅 */
     snap?: boolean;
 }

package/dist/widgets/Strip.js

@@ -1 +1,2 @@
-export { Strip } from '../chunk-IL2KS4WS.js';
+export { Strip } from '../chunk-PJRXPMI3.js';
+import '../chunk-QBIVW7E6.js';

package/dist/widgets/index.d.ts

@@ -40,6 +40,7 @@ export { TreePickerProps } from './TreePicker.js';
 import { TreeView } from './TreeView.js';
 export { TreeNode, TreeViewProps } from './TreeView.js';
 export { AutocompleteField, AutocompleteFieldProps, AutocompleteOption, AutocompleteSearchFn, AutocompleteSearchResult, toAutocompleteOptions } from './AutocompleteField.js';
+import '../layout-BnYUuWC2.js';
 
 /**
  * `createRegistry(widgetComponents)`로 어휘에 얹는 묶음.

package/dist/widgets/index.js

@@ -4,8 +4,8 @@ import { SecureScreen } from '../chunk-APCXOCAO.js';
 export { SecureScreen } from '../chunk-APCXOCAO.js';
 import { StackedMeter } from '../chunk-7Y4J7EOK.js';
 export { StackedMeter } from '../chunk-7Y4J7EOK.js';
-import { Strip } from '../chunk-IL2KS4WS.js';
-export { Strip } from '../chunk-IL2KS4WS.js';
+import { Strip } from '../chunk-PJRXPMI3.js';
+export { Strip } from '../chunk-PJRXPMI3.js';
 import { SummaryTable } from '../chunk-USKRM22W.js';
 export { SummaryTable } from '../chunk-USKRM22W.js';
 import { TagMultiSelect } from '../chunk-4SU2KYPU.js';
@@ -32,6 +32,7 @@ import { PeriodFilter } from '../chunk-DGPRX4MU.js';
 export { PeriodFilter } from '../chunk-DGPRX4MU.js';
 import { PrintSheet } from '../chunk-KBHI3IUR.js';
 export { PrintSheet } from '../chunk-KBHI3IUR.js';
+import '../chunk-QBIVW7E6.js';
 export { AutocompleteField, toAutocompleteOptions } from '../chunk-MOIU7MUA.js';
 import '../chunk-KADFN76X.js';
 import { ColumnBoard } from '../chunk-Q6SBH63R.js';

package/package.json

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