@wipco/sdui 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,9 +1,11 @@
-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 { 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 { DEV, DateRangePicker, DatePicker, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, HoistedStyle, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-KAXPN6KT.js';
+export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-KAXPN6KT.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-TKB7H5DB.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-TKB7H5DB.js';
+import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, Checkbox, Card, Button, Badge, Alert, warnOnce, SegmentedControl, Dialog } from './chunk-CRSY67TZ.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-CRSY67TZ.js';
 import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -149,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 = () => {
@@ -189,51 +183,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) => {
@@ -1880,10 +1899,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) {
@@ -2043,6 +2062,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 +2477,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 };