@wipco/sdui 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,12 +1,12 @@
-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';
-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 } from './chunk-ZUCI34QY.js';
-import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { DEV, HoistedStyle, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, DateRangePicker, DatePicker, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-27APKNEI.js';
+export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-27APKNEI.js';
+import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-WUTCZCQH.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-WUTCZCQH.js';
+import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, Dialog } from './chunk-6FADQ2SU.js';
+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 } from './chunk-6FADQ2SU.js';
+import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle } from './chunk-SAN4IX6N.js';
+import React, { createContext, useState, useMemo, useContext, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/asset-url.ts
@@ -151,14 +151,6 @@ var NodeErrorBoundary = class extends React.Component {
     return this.props.children;
   }
 };
-
-// src/warn-once.ts
-var warned = /* @__PURE__ */ new Set();
-function warnOnce(key, message) {
-  if (warned.has(key)) return;
-  warned.add(key);
-  console.error(message);
-}
 var ALLOW_ALL = () => true;
 var DENY_ALL = () => false;
 var MISSING = () => {
@@ -188,21 +180,42 @@ function Can({ entity, action = "read", scope, fallback = null, children }) {
   }
   return can({ entity, action: typeof action === "string" ? action : "read", scope }) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
 }
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-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 }) {
+function paddingStyle(padding) {
+  const value = padding === void 0 ? void 0 : PADDING_CSS[padding];
+  return value === void 0 ? {} : { padding: value };
+}
+var PADDING_CSS = {
+  "2": "2px",
+  "4": "4px",
+  "8": "8px",
+  "12": "12px",
+  "16": "16px",
+  "20": "20px",
+  "24": "24px",
+  "32": "32px"
+};
+function Grid({
+  columns = 3,
+  template,
+  gap,
+  align,
+  justify,
+  wrap,
+  padding,
+  className,
+  style,
+  children
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("wp-grid", !template && columnsClass(columns), className),
+      className: joinClass("wp-grid", !template && columnsClass(columns), className),
       style: mergeStyle(
-        template ? { gridTemplateColumns: template, ...containerLayoutStyle({ gap, align, justify, wrap }) } : containerLayoutStyle({ gap, align, justify, wrap }),
+        {
+          ...template ? { gridTemplateColumns: template } : null,
+          ...containerLayoutStyle({ gap, align, justify, wrap }),
+          ...paddingStyle(padding)
+        },
         style
       ),
       children
@@ -213,7 +226,7 @@ function Row({ justify, gap, align, wrap, className, style, children }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("wp-row", justify === "between" && "wp-row--between", className),
+      className: joinClass("wp-row", justify === "between" && "wp-row--between", className),
       style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
       children
     }
@@ -223,25 +236,31 @@ function Actions({ justify = "end", gap, align, wrap, className, style, children
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("wp-row", className),
+      className: joinClass("wp-row", className),
       style: mergeStyle({ flex: 1, ...containerLayoutStyle({ gap, align, justify, wrap }) }, 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 });
+  return /* @__PURE__ */ jsx("div", { className: joinClass("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 }) {
+function Spacer({ size, className, style }) {
   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}`) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClass("wp-spacer", step !== void 0 && `wp-spacer--${step}`, className),
+      style
+    }
+  );
 }
 function Section({ title, gap, align, justify, wrap, className, style, children }) {
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: cx("wp-col", className),
+      className: joinClass("wp-col", className),
       style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
       children: [
         title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
@@ -250,30 +269,43 @@ function Section({ title, gap, align, justify, wrap, className, style, children
     }
   );
 }
+var TEXT_WRAP_CSS = {
+  normal: {},
+  preserve: { whiteSpace: "pre-wrap" },
+  anywhere: { whiteSpace: "pre-wrap", wordBreak: "break-all" }
+};
 function Text({
   preset = "body",
   as: Tag2 = "p",
   weight,
   textAlign,
+  wrap,
   className,
   style,
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx(Tag2, { className: cx(`wp-${preset}`, className), style: mergeStyle(typographyStyle({ weight, textAlign }), style), children: value ?? children });
+  return /* @__PURE__ */ jsx(
+    Tag2,
+    {
+      className: joinClass(`wp-${preset}`, className),
+      style: mergeStyle({ ...typographyStyle({ weight, textAlign }), ...TEXT_WRAP_CSS[wrap ?? "normal"] }, 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) => {
+  return /* @__PURE__ */ jsx("div", { className: joinClass("wp-kv", className), style, children: (items ?? []).map((item, index) => {
     const raw = item.key ? source?.[item.key] : item.value;
     const content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
-      /* @__PURE__ */ jsx("span", { className: cx("wp-kv__v", item.mono && "wp-mono"), children: content })
+      /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", item.mono && "wp-mono"), children: content })
     ] }, index);
   }) });
 }
-function PageHead({ title, subtitle, actions }) {
-  return /* @__PURE__ */ jsxs("div", { className: "wp-page-head", children: [
+function PageHead({ title, subtitle, actions, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-page-head", className), style, children: [
     /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
       title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: title }) : null,
       subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: subtitle }) : null
@@ -284,8 +316,8 @@ function PageHead({ title, subtitle, actions }) {
 function Show({ when, children }) {
   return when ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
-function Divider({ style }) {
-  return /* @__PURE__ */ jsx("hr", { className: "wp-divider", style });
+function Divider({ style, className }) {
+  return /* @__PURE__ */ jsx("hr", { className: joinClass("wp-divider", className), style });
 }
 function toNumber(value) {
   if (typeof value === "number") return Number.isFinite(value) ? value : null;
@@ -600,6 +632,7 @@ function SearchResults({
   views,
   pageSizes,
   className,
+  style,
   searchParams,
   onParamsChange,
   actions = [],
@@ -788,7 +821,7 @@ function SearchResults({
     setSort((prev) => prev?.key === key ? prev.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" });
   };
   const empty = /* @__PURE__ */ jsx(ResultEmptyState, { title });
-  return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), "aria-label": title, children: [
+  return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), style, "aria-label": title, children: [
     !hideHeader ? /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", style: { flexWrap: "wrap" }, children: [
       /* @__PURE__ */ jsxs("span", { className: "wp-caption", children: [
         "\uCD1D ",
@@ -1110,7 +1143,7 @@ function mapActions(actions, dispatch) {
     }
   }));
 }
-function SduiSearchResults({
+function SduiSearchResultsImpl({
   title,
   data,
   columns,
@@ -1157,7 +1190,7 @@ function SduiSearchResults({
     }
   );
 }
-function RemoteSearchResults({
+function RemoteSearchResultsImpl({
   title,
   endpoint,
   columns,
@@ -1228,6 +1261,8 @@ function RemoteSearchResults({
     }
   );
 }
+var SduiSearchResults = boxed(SduiSearchResultsImpl, "SduiSearchResults");
+var RemoteSearchResults = boxed(RemoteSearchResultsImpl, "RemoteSearchResults");
 function SduiDialog(props) {
   const { onClose } = props;
   useEffect(() => {
@@ -1907,10 +1942,10 @@ function toIndex(v) {
 function inRange(index, length) {
   return index !== null && index >= 0 && index < length;
 }
-var warned2 = /* @__PURE__ */ new Set();
+var warned = /* @__PURE__ */ new Set();
 function warnOnce2(key, message) {
-  if (warned2.has(key)) return;
-  warned2.add(key);
+  if (warned.has(key)) return;
+  warned.add(key);
   console.error(message);
 }
 function validateForm(values, config, customValidators) {

package/dist/{layout-BnYUuWC2.d.ts → layout-B1QrIBm6.d.ts}

@@ -13,6 +13,7 @@ import React__default from 'react';
  *   1. 컨테이너 전용   `gap` `wrap` `columns`      — 자식에 그 개념이 없다
  *   2. 컨테이너+자식   `align` ↔ `selfAlign`       — CSS의 align-items/align-self 짝
  *   3. 자식 전용       `grow` `shrink` `span` `truncate`
+ *                      `width` `maxWidth` `minWidth` `marginTop` `marginBottom` `pushEnd`
  *   4. CSS가 상속함    `weight` `textAlign`        — **JS는 아무것도 하지 않는다**
  *
  * 4번이 핵심이다. `font-weight`·`text-align`은 브라우저가 이미 자손에게 상속시킨다.
@@ -50,6 +51,24 @@ type SduiColumnsScale = 1 | 2 | 3 | 4 | 5 | 6;
  */
 type SduiWeightScale = 'regular' | 'medium' | 'semibold' | 'bold';
 type SduiTextAlignScale = 'left' | 'center' | 'right';
+/**
+ * 치수 척도 — **32px 격자**다. `full`만 예외로 `100%`를 뜻한다.
+ *
+ * ── 왜 자유 길이(`width?: string`)가 아닌가
+ * 실측: 스펙 85개에 남은 `style` 우회 75선언 중 50선언(67%)이 폭이었고, 값이
+ * 96·100·110·120·140·160·170·180·220·230·252·260·264·280px으로 **열넷**이었다.
+ * 같은 자리(입력칸 최대폭)에 160·170·180이 섞여 있는 식이라, 자유 길이를 프롭으로
+ * 올려 봐야 "픽셀로 만지다 디자인 규칙이 깨진다"는 상태가 프롭 이름만 바꿔 유지된다.
+ *
+ * ── 왜 하필 32의 배수인가
+ * 캔버스 크기 손잡이가 이미 카드류를 32px 배수로 스냅한다(`canvas/resize.ts`).
+ * 손잡이로 끌 때와 패널에서 고를 때의 값 집합이 다르면 한쪽으로 맞춘 화면이
+ * 다른 쪽에서 어긋나므로 같은 격자를 쓴다.
+ *
+ * 96에서 시작하는 이유: 그보다 좁은 실측값이 없다(최소 96px). 480에서 끊는 이유:
+ * 그보다 넓은 자리는 폭을 세지 않고 `grow`/`full`로 부모에 맡기는 편이 맞다.
+ */
+type SduiSizeScale = '96' | '128' | '160' | '192' | '224' | '256' | '288' | '320' | '384' | '480' | 'full';
 /**
  * 자기 루트가 flex/grid인 컴포넌트만 받는 축.
  *
@@ -101,6 +120,24 @@ interface SduiChildLayoutProps {
     selfAlign?: SduiAlignScale;
     /** 한 줄로 잘라 말줄임(`.wp-truncate`). */
     truncate?: boolean;
+    /** 고정 폭(`width`). `full`이면 부모 폭을 채운다. */
+    width?: SduiSizeScale;
+    /** 최대 폭(`max-width`). 넓은 화면에서 입력칸이 늘어지는 것을 막는 가장 흔한 쓰임이다. */
+    maxWidth?: SduiSizeScale;
+    /** 최소 폭(`min-width`). 좁아져도 이보다 줄지 않는다. */
+    minWidth?: SduiSizeScale;
+    /** 위쪽 바깥여백(`margin-top`). 간격 척도. */
+    marginTop?: SduiGapScale;
+    /** 아래쪽 바깥여백(`margin-bottom`). 간격 척도. */
+    marginBottom?: SduiGapScale;
+    /**
+     * 남는 공간을 앞쪽에 몰아 **자기만 끝으로 민다**(`margin-inline-start: auto`).
+     *
+     * 부모의 `justify="end"`와 다르다 — 저쪽은 자식 전부를 끝으로 보내고, 이쪽은
+     * 한 자식만 떼어 보낸다("왼쪽에 제목, 오른쪽에 버튼 하나"가 이 모양이다).
+     * 부모를 고칠 수 없는 자리(슬롯 안 등)에서도 쓸 수 있다.
+     */
+    pushEnd?: boolean;
 }
 /** 렌더러가 가로채는 자식 축 프롭 이름. */
 declare const CHILD_LAYOUT_PROPS: ReadonlySet<string>;
@@ -118,6 +155,27 @@ interface ChildLayoutResult {
  * 하한을 푸는 표준 처방이고, 조상 시트를 건드리지 않으니 기존 화면이 움직이지 않는다.
  */
 declare function childLayoutFrom(props: SduiChildLayoutProps): ChildLayoutResult | undefined;
+/**
+ * 모든 어휘가 받아야 하는 두 프롭.
+ *
+ * ── 왜 이것이 따로 필요한가 (실측)
+ * 렌더러는 자식 축을 **모든 컴포넌트에서** 가로채 `props.style`·`props.className`으로 접는다.
+ * 그런데 컴포넌트가 그 둘을 자기 뿌리 DOM에 얹지 않으면 **아무 일도 일어나지 않는다.**
+ * 78종을 프리셋 그대로 그려 확인해 보니 38종이 그랬다 — `grow`·`selfAlign`을 줘도
+ * 조용히 무시되는 자리가 절반이었다. 편집기 속성 패널은 프롭을 보여 주므로,
+ * 사용자에게는 "설정했는데 안 먹는" 모양으로 보인다.
+ *
+ * `Show`·`Can`·`ForEach`는 예외다 — `dom.element: 'fragment'`라 얹을 DOM 박스가 없다.
+ * 그쪽은 프롭을 받지 않는 것이 옳고, 메타에서도 자식 축을 내보내지 않는다.
+ */
+interface SduiBoxProps {
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+/** 컴포넌트가 스스로 정한 style 위에 바깥에서 온 style을 덮는다(바깥이 이긴다). */
+declare function mergeStyle(own: React__default.CSSProperties | undefined, given: React__default.CSSProperties | undefined): React__default.CSSProperties | undefined;
+/** 클래스 이름을 합친다. `false`·`undefined`·빈 문자열은 조건부 클래스라 떨군다. */
+declare function joinClass(...parts: Array<string | false | null | undefined>): string | undefined;
 /**
  * `weight`/`textAlign` → 자기 요소의 style.
  *
@@ -147,4 +205,4 @@ declare function typographyStyle(props: {
  */
 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 };
+export { CHILD_LAYOUT_PROPS as C, LAYOUT_CSS as L, type SduiBoxProps as S, type SduiContainerLayoutProps as a, type SduiColumnsScale as b, type SduiGapScale as c, type SduiWeightScale as d, type SduiTextAlignScale as e, type SduiAlignScale as f, type SduiChildLayoutProps as g, type SduiSizeScale as h, type SduiSpanScale as i, childLayoutFrom as j, columnsClass as k, containerLayoutStyle as l, joinClass as m, mergeStyle as n, typographyStyle as t };

package/dist/meta.d.ts

@@ -214,6 +214,47 @@ interface SduiComponentMeta {
     hidden?: boolean;
 }
 
+/**
+ * 자기 축 프롭 — **모든 컴포넌트가 갖는다.**
+ *
+ * ## 왜 한곳에 모았나 (실측)
+ *
+ * 렌더러는 자식 축을 컴포넌트를 가리지 않고 가로챈다({@link ../layout.ts}). 그런데
+ * 메타데이터는 컴포넌트마다 손으로 적고 있어서, **71종 중 10종에만** 적혀 있었다.
+ * 나머지 61종(`StatCard`·`Table`·`Chart`·`Badge`·`Textarea`·`Alert` …)은 런타임이
+ * 값을 받아 주는데도 편집기 속성 패널에 자리가 없었다 — "라이브러리는 되는데 편집기로는
+ * 못 하는" 기능이 61곳 있었다는 뜻이다.
+ *
+ * 컴포넌트마다 적는 방식으로는 새 컴포넌트가 들어올 때마다 같은 누락이 생긴다.
+ * 그래서 목록을 여기 한 벌 두고 {@link withSelfAxis}가 얹는다.
+ *
+ * ## 얹지 않는 것
+ *
+ * `dom.element: 'fragment'`인 어휘(`Show`·`Can`·`ForEach`)는 자기 DOM 박스가 없다.
+ * 프롭을 줘도 붙일 곳이 없어 조용히 사라지므로, 패널에 내는 것 자체가 거짓말이 된다.
+ *
+ * 컴포넌트가 **같은 이름을 이미 자기 뜻으로 쓰고 있으면** 그쪽을 남긴다
+ * (`Timeline.maxHeight`·`TreeView.maxHeight`가 그렇다). 덮어쓰면 기존 스펙이 깨진다.
+ */
+
+/**
+ * 자기 축 전부. 순서가 속성 패널의 순서가 된다 — 자주 쓰는 폭을 위에 둔다.
+ *
+ * `advanced`를 어디에 붙일지는 실측으로 갈랐다. 스펙 85개가 `style` 우회로 쓰던 것
+ * (폭·최대폭·위아래 여백)은 **자주 쓰는 것**이므로 접지 않고, 나머지는 접는다.
+ * 접힌 그룹은 "없는 것"처럼 보인다는 지적을 이미 받았다.
+ */
+declare const SELF_AXIS_PROPS: readonly SduiPropMeta[];
+/**
+ * 컴포넌트 하나에 자기 축을 얹는다. 이미 같은 이름이 있으면 **원래 것을 남긴다.**
+ *
+ * 소비 앱이 자기 컴포넌트 메타를 만들 때도 이걸 통과시켜야 한다 — 안 그러면
+ * 그 컴포넌트만 편집기에서 폭·여백을 못 만지는 자리가 된다.
+ */
+declare function withSelfAxis(meta: SduiComponentMeta): SduiComponentMeta;
+/** 카탈로그 전체에 얹는다. */
+declare function withSelfAxisAll(catalog: Record<string, SduiComponentMeta>): Record<string, SduiComponentMeta>;
+
 /**
  * 기본 어휘(`defaultRegistry`) 41종의 빌더 메타데이터.
  *
@@ -541,4 +582,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-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, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, 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, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, 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 };