@designbasekorea/wordpress-ui 0.1.2 → 0.1.4

package/README.md

@@ -6,6 +6,12 @@ WordPress 전체 관리자 프레임을 대체하지 않고, 플러그인 내부
 
 ## 사용
 
+현재 배포 기준 버전은 `0.1.4`입니다. Node 프로젝트에 다음처럼 설치합니다.
+
+```bash
+npm install @designbasekorea/wordpress-ui@0.1.4
+```
+
 Vanilla/PHP 플러그인은 필요한 화면에서만 다음 자산을 enqueue합니다.
 
 ```ts
@@ -29,7 +35,10 @@ import {
 } from '@designbasekorea/wordpress-ui/react';
 ```
 
-`AdminShell`은 레이아웃(shell·사이드바 토글)만 담당합니다. `AdminPageHeader`는 ui-wc
+`AdminShell`은 레이아웃(shell·사이드바 토글)만 담당합니다. Vanilla/PHP 화면에서
+`admin-shell.js` adapter를 사용하면 `config.title`이 사이드바 상단의 플러그인명으로
+표시되고, `db-page-header`를 제외한 페이지 내용은 `db-container`로 자동 감쌉니다.
+`AdminPageHeader`는 ui-wc
 `PageHeader`를 감싸 shell 메뉴 버튼과 actions 슬롯을 연결합니다. 탭, 검색, 테이블,
 empty state, 모달 등 나머지 UI는 primitives(`Section`, `SearchBar`, `Table`,
 `EmptyState`, `Modal` 등)를 직접 조합합니다.
@@ -42,12 +51,17 @@ Vanilla/PHP 화면에서는 등록된 ui-wc element를 직접 사용할 수도
     <db-page-header title="페이지 목록" description="페이지를 관리하세요." variant="minimal">
         <a slot="actions" class="button button-primary" href="?page=my-pages">새 페이지</a>
     </db-page-header>
+    <db-container size="full" padding="l" full-width>
+        <!-- 페이지 콘텐츠 -->
+    </db-container>
 </div>
 ```
 
 ## 엔트리포인트
 
 - `browser`: React 없이 필요한 ui-wc primitives만 등록하고 모바일 sidebar toggle을 보강합니다.
+- `components`: `ui-wc` Web Component 클래스와 등록 allowlist를 `wordpress-ui`의 public API로 제공합니다.
+- `primitives`: `components`와 같은 vanilla API의 별칭입니다.
 - `react`: ui-wc primitives의 React façade와 native-first 관리자 패턴을 제공합니다.
 - `styles.css`: `@designbasekorea/theme`의 전체 토큰/시맨틱 변수, ui-wc controls,
   shell, overlays, `icons-webfont`를 scoped로 포함한 기본 스타일입니다. 소비자는 별도의
@@ -63,6 +77,48 @@ Vanilla/PHP 화면에서는 등록된 ui-wc element를 직접 사용할 수도
 <i class="icon-settings" aria-hidden="true"></i>
 ```
 
+### ui-wc primitives
+
+PHP/vanilla 화면은 `browser` 자산을 enqueue한 뒤 `db-*` element를 사용합니다.
+TypeScript로 Web Component 클래스를 직접 조합하는 경우에도 `ui-wc`를 직접 import하지
+말고 `wordpress-ui`의 `components` entry를 사용합니다.
+
+```ts
+import '@designbasekorea/wordpress-ui/browser';
+import '@designbasekorea/wordpress-ui/styles.css';
+import {
+    DbButton,
+    DbInput,
+    DbSelect,
+    DbModal,
+    DbContainer,
+} from '@designbasekorea/wordpress-ui/components';
+
+// PHP/HTML에서는 <db-button>, <db-input>, <db-select>, <db-modal>로 사용합니다.
+void DbButton;
+void DbInput;
+void DbSelect;
+void DbModal;
+void DbContainer;
+```
+
+동일한 named export는 패키지 루트에서도 사용할 수 있습니다. 기존 `figma-ui`처럼
+짧은 import를 선호하는 TypeScript 소비자는 다음 형태를 사용해도 됩니다.
+
+```ts
+import { DbButton, DbInput, DbSelect, DbModal } from '@designbasekorea/wordpress-ui';
+```
+
+두 경로 모두 같은 `ui-wc` 클래스와 등록 계약을 가리킵니다. HTML/PHP 소비자는
+`browser`를 enqueue한 뒤 `<db-button>`, `<db-input>`, `<db-select>`, `<db-modal>`처럼
+태그를 사용합니다.
+
+React 화면은 같은 ui-wc element를 React façade로 사용합니다.
+
+```tsx
+import { Button, Input, Select, Modal } from '@designbasekorea/wordpress-ui/react';
+```
+
 로컬 검증은 `npm run build`, `npm run verify`, `npm run audit:axe` 순서로 실행합니다.
 `audit:axe`는 Chromium이 설치된 환경에서 vanilla 예제의 실제 DOM을 검사합니다.
 
@@ -76,7 +132,7 @@ npm run storybook
 기본 포트는 `http://localhost:6008` 입니다. (`figma-ui` Storybook은 `:6007`)
 
 모든 관리자 패턴과 runtime surface는 `.designbase-wp-admin` 아래에서 동작합니다. 신규
-플러그인과 테마는 `ui-wc` 또는 이 패키지의 public API만 사용하세요. 기존 UI
+플러그인과 테마는 이 패키지의 public API만 사용하세요. 기존 UI
 라이브러리의 전역 객체나 호환 계층은 제공하지 않습니다.
 
 ## WordPress 플러그인·테마 enqueue