@wipco/sdui 0.5.0 → 0.7.0

package/dist/{chunk-4SU2KYPU.js → chunk-2ARNY7WZ.js}

@@ -1,4 +1,4 @@
-import { Badge, Tag } from './chunk-ZUCI34QY.js';
+import { Badge, Tag } from './chunk-CRSY67TZ.js';
 import { useState, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-APCXOCAO.js → chunk-562QK2G3.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-ZUCI34QY.js';
+import { Icon } from './chunk-CRSY67TZ.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-MOIU7MUA.js → chunk-57LLG32F.js}

@@ -1,5 +1,5 @@
-import { includesLooseSearch } from './chunk-KADFN76X.js';
-import { Icon, Button, Input, Spinner } from './chunk-ZUCI34QY.js';
+import { includesLooseSearch } from './chunk-TKB7H5DB.js';
+import { Icon, Button, Input, Spinner } from './chunk-CRSY67TZ.js';
 import { useId, useRef, useState, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-KBHI3IUR.js → chunk-5O6PFLFJ.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-ZUCI34QY.js';
+import { Button } from './chunk-CRSY67TZ.js';
 import { useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ZNITJ4KK.js → chunk-63U54JAG.js}

@@ -1,4 +1,4 @@
-import { IconButton, Badge } from './chunk-ZUCI34QY.js';
+import { IconButton, Badge } from './chunk-CRSY67TZ.js';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WVRCIVAD.js → chunk-73ZMMJRX.js}

@@ -1,4 +1,4 @@
-import { Icon, Badge } from './chunk-ZUCI34QY.js';
+import { Icon, Badge } from './chunk-CRSY67TZ.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-OOHHW4K4.js → chunk-B4A4KY4K.js}

@@ -1,4 +1,4 @@
-import { IconButton, Input } from './chunk-ZUCI34QY.js';
+import { IconButton, Input } from './chunk-CRSY67TZ.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ZUCI34QY.js → chunk-CRSY67TZ.js}

@@ -688,6 +688,15 @@ var ICON_NODES = {
     { t: "line", x1: "8", x2: "14", y1: "11", y2: "11" }
   ]
 };
+
+// src/warn-once.ts
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message, level = "error") {
+  if (warned.has(key)) return;
+  warned.add(key);
+  if (level === "warn") console.warn(message);
+  else console.error(message);
+}
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
@@ -811,15 +820,49 @@ function Textarea({ invalid = false, rows = 3, className = "", ...rest }) {
     }
   );
 }
-function Select({ options = [], size = "md", invalid = false, placeholder, className = "", ...rest }) {
+function pickOptionText(option, key) {
+  const raw = option[key];
+  if (raw === null || raw === void 0) return void 0;
+  return String(raw);
+}
+function Select({
+  options,
+  valueKey = "value",
+  labelKey = "label",
+  size = "md",
+  invalid = false,
+  placeholder,
+  className = "",
+  ...rest
+}) {
   const classes = ["wp-select"];
   if (size !== "md") classes.push(`wp-select--${size}`);
   if (invalid) classes.push("wp-select--invalid");
   if (className) classes.push(className);
+  const list = Array.isArray(options) ? options : [];
   return /* @__PURE__ */ jsxs("div", { className: "wp-selectwrap", children: [
     /* @__PURE__ */ jsxs("select", { className: classes.join(" "), "aria-invalid": invalid || void 0, ...rest, children: [
       placeholder ? /* @__PURE__ */ jsx("option", { value: "", children: placeholder }) : null,
-      options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+      list.map((option, index) => {
+        const value = pickOptionText(option, valueKey);
+        const label = pickOptionText(option, labelKey) || value || "";
+        if (label === "") {
+          warnOnce(
+            `select:blank-option:${valueKey}/${labelKey}`,
+            `[sdui] <Select> \uC635\uC158\uC774 \uAC12\xB7\uB77C\uBCA8 \uB458 \uB2E4 \uBE44\uC5C8\uC2B5\uB2C8\uB2E4 (valueKey="${valueKey}", labelKey="${labelKey}") \u2014 \uB3C4\uBA54\uC778 \uAC1D\uCCB4\uB97C \uADF8\uB300\uB85C \uB118\uACBC\uB2E4\uBA74 \uB450 \uD504\uB86D\uC73C\uB85C \uC77D\uC744 \uD0A4\uB97C \uC9C0\uC815\uD558\uC138\uC694`,
+            "warn"
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "option",
+          {
+            value,
+            disabled: Boolean(option.disabled),
+            children: label
+          },
+          `${value ?? ""}-${index}`
+        );
+      })
     ] }),
     /* @__PURE__ */ jsx("span", { className: "wp-selectwrap__caret", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 15 }) })
   ] });
@@ -1287,4 +1330,4 @@ function Tooltip({ label, shortcut, placement = "top", wrap = false, children, c
   );
 }
 
-export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip };
+export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip, warnOnce };

package/dist/{chunk-MSAV4J4I.js → chunk-DN5YNPJS.js}

@@ -1,5 +1,5 @@
-import { Disclosure } from './chunk-WNYWTFGW.js';
-import { Icon } from './chunk-ZUCI34QY.js';
+import { Disclosure } from './chunk-TAFUDHIX.js';
+import { Icon } from './chunk-CRSY67TZ.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var TYPE_META = {

package/dist/{chunk-ZQR3ULVH.js → chunk-GWVK3BHB.js}

@@ -1,5 +1,5 @@
-import { TreeView } from './chunk-SEBPBUZR.js';
-import { Field, Dialog, Icon, Button, Input } from './chunk-ZUCI34QY.js';
+import { TreeView } from './chunk-Y3HYEWSY.js';
+import { Field, Dialog, Icon, Button, Input } from './chunk-CRSY67TZ.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-56KKWLNI.js → chunk-H32WQHB7.js}

@@ -1,5 +1,5 @@
-import { includesLooseSearch } from './chunk-KADFN76X.js';
-import { Button, Dialog, Input, Tag, Checkbox } from './chunk-ZUCI34QY.js';
+import { includesLooseSearch } from './chunk-TKB7H5DB.js';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-CRSY67TZ.js';
 import React, { useMemo, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-Q6SBH63R.js → chunk-HGFYXY7F.js}

@@ -1,4 +1,4 @@
-import { Badge, Checkbox, IconButton, Icon } from './chunk-ZUCI34QY.js';
+import { Badge, Checkbox, IconButton, Icon } from './chunk-CRSY67TZ.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-DGPRX4MU.js → chunk-J2DSDERS.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl, Select, Input } from './chunk-ZUCI34QY.js';
+import { SegmentedControl, Select, Input } from './chunk-CRSY67TZ.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-FGRR3ROJ.js → chunk-KAXPN6KT.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-ZUCI34QY.js';
+import { Icon } from './chunk-CRSY67TZ.js';
 import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-AROOQ5W6.js → chunk-L4ORCIVN.js}

@@ -1,4 +1,4 @@
-import { Textarea, Icon } from './chunk-ZUCI34QY.js';
+import { Textarea, Icon } from './chunk-CRSY67TZ.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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/{chunk-WNYWTFGW.js → chunk-TAFUDHIX.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-ZUCI34QY.js';
+import { Icon } from './chunk-CRSY67TZ.js';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-KADFN76X.js → chunk-TKB7H5DB.js}

@@ -1,4 +1,4 @@
-import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-ZUCI34QY.js';
+import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-CRSY67TZ.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-LZJTKVMO.js → chunk-XMMYJSRV.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-ZUCI34QY.js';
+import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-CRSY67TZ.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-RH7ESUE6.js → chunk-XY2JKFAV.js}

@@ -1,4 +1,4 @@
-import { IconButton } from './chunk-ZUCI34QY.js';
+import { IconButton } from './chunk-CRSY67TZ.js';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-SEBPBUZR.js → chunk-Y3HYEWSY.js}

@@ -1,4 +1,4 @@
-import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-ZUCI34QY.js';
+import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-CRSY67TZ.js';
 import React, { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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';
 
@@ -270,14 +272,30 @@ interface SelectOption {
     label: string;
     disabled?: boolean;
 }
+/**
+ * 자유 형식 옵션 — `valueKey`/`labelKey`가 가리키는 키로 읽는다.
+ *
+ * `AutocompleteOption`과 같은 모양(`Record<string, unknown>`)으로 맞췄다. 두 어휘가
+ * 같은 자리에서 같은 프롭 이름을 쓰는데 옵션 타입만 다르면 스펙 작성자가 둘 사이를
+ * 옮길 때마다 다시 배워야 한다.
+ */
+type SelectOptionRecord = Record<string, unknown>;
 interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    options: SelectOption[];
+    /**
+     * 옵션 목록. 기본은 `{value, label}`이고, 도메인 객체(`{id, title, …}`)를 그대로
+     * 넘길 거면 `valueKey`/`labelKey`로 읽을 키를 알려 준다.
+     */
+    options: (SelectOption | SelectOptionRecord)[];
+    /** 옵션에서 값을 읽을 키. 기본 'value'. */
+    valueKey?: string;
+    /** 옵션에서 표시 라벨을 읽을 키. 기본 'label'. */
+    labelKey?: string;
     size?: 'sm' | 'md' | 'lg';
     invalid?: boolean;
     /** 비어 있는 첫 옵션 */
     placeholder?: string;
 }
-declare function Select({ options, size, invalid, placeholder, className, ...rest }: SelectProps): React__default.JSX.Element;
+declare function Select({ options, valueKey, labelKey, size, invalid, placeholder, className, ...rest }: SelectProps): React__default.JSX.Element;
 interface CheckboxProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
@@ -596,39 +614,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 +663,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 +1587,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 SelectOptionRecord, 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 };