@designbasekorea/wordpress-ui 0.1.4 → 0.1.5

package/README.md

@@ -6,10 +6,10 @@ WordPress 전체 관리자 프레임을 대체하지 않고, 플러그인 내부
 
 ## 사용
 
-현재 배포 기준 버전은 `0.1.4`입니다. Node 프로젝트에 다음처럼 설치합니다.
+현재 배포 기준 버전은 `0.1.5`입니다. Node 프로젝트에 다음처럼 설치합니다.
 
 ```bash
-npm install @designbasekorea/wordpress-ui@0.1.4
+npm install @designbasekorea/wordpress-ui@0.1.5
 ```
 
 Vanilla/PHP 플러그인은 필요한 화면에서만 다음 자산을 enqueue합니다.
@@ -35,9 +35,12 @@ import {
 } from '@designbasekorea/wordpress-ui/react';
 ```
 
-`AdminShell`은 레이아웃(shell·사이드바 토글)만 담당합니다. Vanilla/PHP 화면에서
-`admin-shell.js` adapter를 사용하면 `config.title`이 사이드바 상단의 플러그인명으로
-표시되고, `db-page-header`를 제외한 페이지 내용은 `db-container`로 자동 감쌉니다.
+`AdminShell`은 React 화면용 wrapper이고, Vanilla/PHP 화면의 정본은
+`<db-admin-shell>` Web Component입니다. `db-admin-shell`은 사이드바, 플러그인명
+브랜드, `db-page-header`, 콘텐츠용 `db-container`, 모바일 메뉴 토글을 하나의 패턴으로
+묶습니다. 직접 자식인 `db-page-header`는 header로 유지하고 나머지 내용은 자동으로
+`db-container`에 넣습니다. 기존 화면을 자동 mounting하는 `admin-shell.js` adapter가
+필요한 경우에도 내부적으로 이 Web Component를 사용합니다.
 `AdminPageHeader`는 ui-wc
 `PageHeader`를 감싸 shell 메뉴 버튼과 actions 슬롯을 연결합니다. 탭, 검색, 테이블,
 empty state, 모달 등 나머지 UI는 primitives(`Section`, `SearchBar`, `Table`,
@@ -47,19 +50,24 @@ empty state, 모달 등 나머지 UI는 primitives(`Section`, `SearchBar`, `Tabl
 Vanilla/PHP 화면에서는 등록된 ui-wc element를 직접 사용할 수도 있습니다.
 
 ```html
-<div class="designbase-wp-admin">
-    <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 class="wrap designbase-wp-admin">
+    <db-admin-shell
+        title="My Plugin"
+        sections='[{"id":"main","title":"My Plugin","items":[{"id":"dashboard","label":"대시보드","href":"?page=my-plugin","icon":"dashboard","active":true},{"id":"settings","label":"설정","href":"?page=my-plugin-settings","icon":"settings"}]}]'
+    >
+        <db-page-header title="페이지 목록" description="페이지를 관리하세요." variant="minimal">
+            <a slot="actions" class="button button-primary" href="?page=my-pages">새 페이지</a>
+        </db-page-header>
+        <db-section title="최근 페이지">
+            <!-- 페이지 콘텐츠 -->
+        </db-section>
+    </db-admin-shell>
 </div>
 ```
 
 ## 엔트리포인트
 
-- `browser`: React 없이 필요한 ui-wc primitives만 등록하고 모바일 sidebar toggle을 보강합니다.
+- `browser`: React 없이 ui-wc primitives와 `db-admin-shell`을 등록합니다.
 - `components`: `ui-wc` Web Component 클래스와 등록 allowlist를 `wordpress-ui`의 public API로 제공합니다.
 - `primitives`: `components`와 같은 vanilla API의 별칭입니다.
 - `react`: ui-wc primitives의 React façade와 native-first 관리자 패턴을 제공합니다.
@@ -92,6 +100,7 @@ import {
     DbSelect,
     DbModal,
     DbContainer,
+    DbAdminShell,
 } from '@designbasekorea/wordpress-ui/components';
 
 // PHP/HTML에서는 <db-button>, <db-input>, <db-select>, <db-modal>로 사용합니다.
@@ -100,6 +109,7 @@ void DbInput;
 void DbSelect;
 void DbModal;
 void DbContainer;
+void DbAdminShell;
 ```
 
 동일한 named export는 패키지 루트에서도 사용할 수 있습니다. 기존 `figma-ui`처럼