@designbasekorea/ui-wc 0.13.0 → 0.15.0

package/docs/VUE-ANGULAR-INTEGRATION.md

@@ -0,0 +1,197 @@
+<!-- Generated from docs/VUE-ANGULAR-INTEGRATION.md by scripts/sync-package-docs.mjs. -->
+# Vue 3 / Angular Custom Elements 통합 가이드
+
+`@designbasekorea/ui-wc`를 Vue 3와 Angular에서 사용하는 상세 설정입니다. 향후 `@designbasekorea/ui-vue`가 추가되면 Vue 공개 API는 `Button`, `Input`, `Tabs` wrapper 이름을 사용하고, 내부 구현은 같은 `db-*` 원본을 감쌉니다.
+
+---
+
+## Vue 3
+
+### 설치
+
+```bash
+npm install @designbasekorea/ui-wc @designbasekorea/tokens @designbasekorea/theme
+```
+
+### main.ts
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import '@designbasekorea/tokens/dist/css/tokens.css';
+import '@designbasekorea/theme/dist/css/theme.css';
+import '@designbasekorea/ui-wc/dist/index.css';
+import '@designbasekorea/ui-wc';
+
+createApp(App).mount('#app');
+```
+
+### Custom Element 인식 (선택)
+
+Vue 3는 `db-*` 태그를 기본적으로 unknown element로 처리하지만 정상 동작합니다.  
+빌드 경고를 줄이려면 `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('db-'),
+        },
+      },
+    }),
+  ],
+});
+```
+
+### 컴포넌트 사용
+
+```vue
+<script setup lang="ts">
+function onSave() {
+  console.log('saved');
+}
+
+function onInput(e: Event) {
+  console.log((e as CustomEvent).detail);
+}
+</script>
+
+<template>
+  <db-button variant="primary" @db-click="onSave">저장</db-button>
+  <db-input label="이름" placeholder="입력하세요" @db-input="onInput" />
+  <db-tabs labels="홈,설정" :active-index="0">
+    <div slot="panel-0">홈</div>
+    <div slot="panel-1">설정</div>
+  </db-tabs>
+</template>
+```
+
+### v-model 패턴 (Input)
+
+WC는 네이티브 `v-model`을 지원하지 않습니다. thin wrapper 예:
+
+```vue
+<!-- DbInput.vue -->
+<script setup lang="ts">
+const model = defineModel<string>({ default: '' });
+
+function handleInput(e: Event) {
+  model.value = (e as CustomEvent<{ value: string }>).detail.value;
+}
+</script>
+
+<template>
+  <db-input
+    :value="model"
+    @db-input="handleInput"
+  />
+</template>
+```
+
+### TypeScript
+
+```ts
+// env.d.ts
+declare module 'vue' {
+  export interface GlobalComponents {
+    'db-button': typeof HTMLElement;
+  }
+}
+```
+
+---
+
+## Angular
+
+### 설치
+
+```bash
+npm install @designbasekorea/ui-wc @designbasekorea/tokens @designbasekorea/theme
+```
+
+### angular.json
+
+```json
+"styles": [
+  "node_modules/@designbasekorea/tokens/dist/css/tokens.css",
+  "node_modules/@designbasekorea/theme/dist/css/theme.css",
+  "node_modules/@designbasekorea/ui-wc/dist/index.css"
+]
+```
+
+### main.ts
+
+```ts
+import '@designbasekorea/ui-wc';
+```
+
+### 컴포넌트
+
+```ts
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <db-button variant="primary" (db-click)="onSave()">저장</db-button>
+    <db-badge variant="success">완료</db-badge>
+  `,
+})
+export class AppComponent {
+  onSave() {
+    console.log('saved');
+  }
+}
+```
+
+> Angular는 `(db-click)`으로 CustomEvent를 바인딩합니다.
+
+### NgModule 사용 시
+
+```ts
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  // ...
+})
+export class AppModule {}
+```
+
+---
+
+## 이벤트 목록
+
+| 이벤트 | 컴포넌트 | detail |
+|--------|----------|--------|
+| `db-click` | db-button | — |
+| `db-input` | db-input | `{ value: string }` |
+| `db-change` | db-checkbox, db-toggle, db-tabs, db-dropdown | 컴포넌트별 |
+| `db-close` | db-modal | — |
+
+---
+
+## Thin wrapper 검토 요약
+
+| 프레임워크 | wrapper 필요성 | 이유 |
+|------------|----------------|------|
+| Vue 3 | Input 등 **선택적** | `v-model` 편의 |
+| Angular | **낮음** | `CUSTOM_ELEMENTS_SCHEMA` + 템플릿 바인딩으로 충분 |
+| React | **권장** | 합성 이벤트·ref 패턴 |
+
+공식 thin wrapper 패키지(`@designbasekorea/ui-vue`)는 Phase 3 이후 demand에 따라 추가 검토합니다.  
+현재는 WC + 위 패턴으로 충분합니다.
+
+---
+
+## 관련 문서
+
+- [MULTI-PLATFORM-GUIDE.md](./MULTI-PLATFORM-GUIDE.md)
+- [CROSS_PLATFORM_COMPONENT_STRATEGY.md](./CROSS_PLATFORM_COMPONENT_STRATEGY.md)
+- [REACT-WC-INTEGRATION.md](./REACT-WC-INTEGRATION.md)

package/docs/WORDPRESS-INTEGRATION.md

@@ -0,0 +1,250 @@
+<!-- Generated from docs/WORDPRESS-INTEGRATION.md by scripts/sync-package-docs.mjs. -->
+# WordPress 관리자에서 @designbasekorea/ui-wc 사용하기
+
+WordPress **wp-admin** 플러그인·테마 설정 화면에서 `@designbasekorea/ui-wc` Web Components를 쓰는 방법입니다.
+
+> React wrapper(`@designbasekorea/ui-wc/react`)는 관리자 PHP 화면에서는 필요 없습니다. `<db-button>` 같은 Custom Elements + 순수 JS가 가장 단순합니다.
+
+## 설치할 패키지
+
+```bash
+npm install @designbasekorea/ui-wc @designbasekorea/tokens @designbasekorea/theme
+```
+
+| 패키지 | 역할 |
+|--------|------|
+| `@designbasekorea/tokens` | `--db-*` 디자인 토큰 CSS |
+| `@designbasekorea/theme` | 라이트/다크 테마 CSS |
+| `@designbasekorea/ui-wc` | Web Components JS + 컴포넌트 스타일 |
+
+## 플러그인 assets 구조
+
+빌드 결과물을 플러그인에 복사해 self-host 합니다.
+
+```
+wp-content/plugins/my-plugin/
+├── my-plugin.php
+├── includes/admin-page.php
+├── assets/
+│   ├── admin.js
+│   └── designbase/
+│       ├── tokens.css       ← tokens/dist/css/tokens.css
+│       ├── theme.css        ← theme/dist/css/theme.css
+│       └── ui-wc/
+│           ├── index.css
+│           ├── index.esm.js
+│           └── chunks/      ← lazy chunk (Lottie, Prism 등) — 필수
+└── package.json             ← (선택) vendor 복사 스크립트
+```
+
+`chunks/` 폴더를 빼면 `db-lottie`, `db-code-block` 사용 시 로드가 실패할 수 있습니다.
+
+### vendor 복사 스크립트 (선택)
+
+```json
+{
+  "scripts": {
+    "vendor:copy": "cp node_modules/@designbasekorea/tokens/dist/css/tokens.css assets/designbase/ && cp node_modules/@designbasekorea/theme/dist/css/theme.css assets/designbase/ && cp -R node_modules/@designbasekorea/ui-wc/dist assets/designbase/ui-wc"
+  }
+}
+```
+
+---
+
+## PHP: 관리자에서만 enqueue
+
+본인 플러그인 메뉴에서만 로드하세요. wp-admin 전역에 올리면 무겁고 스타일 충돌이 납니다.
+
+```php
+<?php
+function my_plugin_admin_assets( string $hook ): void {
+    if ( $hook !== 'toplevel_page_my-plugin-settings' ) {
+        return;
+    }
+
+    $base = plugins_url( 'assets/designbase/', __FILE__ );
+    $ver  = '0.1.0'; // npm 배포 버전과 맞출 것
+
+    wp_enqueue_style( 'db-tokens', $base . 'tokens.css', [], $ver );
+    wp_enqueue_style( 'db-theme', $base . 'theme.css', [ 'db-tokens' ], $ver );
+    wp_enqueue_style( 'db-ui-wc', $base . 'ui-wc/index.css', [ 'db-theme' ], $ver );
+
+    // WordPress 6.5+
+    wp_enqueue_script_module(
+        'db-ui-wc',
+        $base . 'ui-wc/index.esm.js',
+        [],
+        $ver
+    );
+
+    wp_enqueue_script_module(
+        'my-plugin-admin',
+        plugins_url( 'assets/admin.js', __FILE__ ),
+        [ 'db-ui-wc' ],
+        $ver
+    );
+
+    wp_localize_script( 'my-plugin-admin', 'MyPluginAdmin', [
+        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+        'nonce'   => wp_create_nonce( 'my_plugin_save' ),
+    ] );
+}
+add_action( 'admin_enqueue_scripts', 'my_plugin_admin_assets' );
+```
+
+### WordPress 6.5 미만
+
+`wp_enqueue_script_module`이 없으면 플러그인 `admin.js`를 Vite/Webpack으로 `ui-wc`까지 번들링하거나, 설정 페이지 footer에 `type="module"` 스크립트를 인라인합니다.
+
+---
+
+## PHP: 설정 화면 마크업
+
+```php
+<div class="wrap my-plugin-wrap" data-theme="light">
+    <h1><?php esc_html_e( '내 플러그인 설정', 'my-plugin' ); ?></h1>
+
+    <db-card variant="default" size="m">
+        <div class="designbase-wc-card__body">
+            <db-input
+                id="site-title"
+                label="사이트 제목"
+                value="<?php echo esc_attr( get_option( 'my_plugin_site_title', '' ) ); ?>"
+                placeholder="제목 입력"
+            ></db-input>
+
+            <db-toggle id="enable-feature">기능 활성화</db-toggle>
+
+            <div style="margin-top: 16px; display: flex; gap: 8px;">
+                <db-button id="save-btn" variant="primary">저장</db-button>
+                <db-button id="reset-btn" variant="secondary">초기화</db-button>
+            </div>
+        </div>
+    </db-card>
+
+    <db-alert
+        id="save-alert"
+        hidden
+        variant="success"
+        title="저장 완료"
+        message="설정이 저장되었습니다."
+    ></db-alert>
+</div>
+```
+
+`data-theme="light"` 또는 `dark`를 wrapper에 두면 theme CSS가 적용됩니다.
+
+---
+
+## JS: 이벤트 & AJAX (`assets/admin.js`)
+
+일반 DOM `click`이 아니라 **`db-*` 커스텀 이벤트**를 사용합니다.
+
+```js
+const saveBtn = document.getElementById('save-btn');
+const titleInput = document.getElementById('site-title');
+const featureToggle = document.getElementById('enable-feature');
+const alertEl = document.getElementById('save-alert');
+
+saveBtn?.addEventListener('db-click', async () => {
+    const body = new FormData();
+    body.append('action', 'my_plugin_save_settings');
+    body.append('nonce', MyPluginAdmin.nonce);
+    body.append('site_title', titleInput?.getAttribute('value') || '');
+    body.append(
+        'enable_feature',
+        featureToggle?.hasAttribute('checked') ? '1' : '0'
+    );
+
+    const res = await fetch(MyPluginAdmin.ajaxUrl, {
+        method: 'POST',
+        body,
+        credentials: 'same-origin',
+    });
+
+    if (res.ok && alertEl) {
+        alertEl.hidden = false;
+    }
+});
+
+titleInput?.addEventListener('db-input', (e) => {
+    titleInput.setAttribute('helper-text', `현재 값: ${e.detail.value || '-'}`);
+});
+```
+
+### AJAX 핸들러 (PHP)
+
+```php
+add_action( 'wp_ajax_my_plugin_save_settings', function () {
+    check_ajax_referer( 'my_plugin_save', 'nonce' );
+
+    update_option( 'my_plugin_site_title', sanitize_text_field( $_POST['site_title'] ?? '' ) );
+    update_option( 'my_plugin_enable_feature', ( $_POST['enable_feature'] ?? '' ) === '1' );
+
+    wp_send_json_success();
+} );
+```
+
+---
+
+## 이벤트 · 속성 치트시트
+
+| 컴포넌트 | 이벤트 | 값 |
+|----------|--------|-----|
+| `db-button` | `db-click` | — |
+| `db-input` | `db-input` | `event.detail.value` |
+| `db-textarea` | `db-input` | `event.detail.value` |
+| `db-toggle`, `db-checkbox` | `db-change` | `event.detail.checked` |
+| `db-select` | `db-change` | `event.detail.value` |
+| `db-tabs` | `db-change` | `event.detail` (인덱스 등) |
+| `db-modal` | `db-close` | — |
+
+값 읽기/쓰기는 대부분 **HTML attribute**입니다.
+
+```js
+el.getAttribute('value');
+el.setAttribute('value', '새 값');
+el.setAttribute('checked', '');
+el.removeAttribute('checked');
+modal.setAttribute('open', '');
+```
+
+JSON 속성(`options`, `items`, `columns` 등)은 PHP에서 `wp_json_encode()`로 출력하세요.
+
+---
+
+## CDN으로 빠른 테스트
+
+로컬 플러그인 전에 관리자 화면에서만 시험할 때:
+
+```php
+wp_enqueue_style( 'db-tokens', 'https://unpkg.com/@designbasekorea/tokens@0.2.5/dist/css/tokens.css' );
+wp_enqueue_style( 'db-theme', 'https://unpkg.com/@designbasekorea/theme@0.2.8/dist/css/theme.css' );
+wp_enqueue_style( 'db-ui-wc', 'https://unpkg.com/@designbasekorea/ui-wc@0.7.3/dist/index.css' );
+wp_enqueue_script_module(
+    'db-ui-wc',
+    'https://unpkg.com/@designbasekorea/ui-wc@0.7.3/dist/index.esm.js'
+);
+```
+
+운영 플러그인은 **assets 복사(self-host)** 를 권장합니다.
+
+---
+
+## wp-admin 주의사항
+
+1. **페이지 범위** — `admin_enqueue_scripts`의 `$hook`으로 본인 메뉴만 로드
+2. **스타일 충돌** — `.wrap` 안에 배치; 필요 시 `--db-*` 토큰만 덮어쓰기
+3. **다크 모드** — wrapper `data-theme`을 관리자 색상·`prefers-color-scheme`에 맞게 전환
+4. **보안** — AJAX는 `check_ajax_referer` + `sanitize_*` / `wp_kses_*` 적용
+5. **번들 크기** — ESM 메인 ~650KB; Lottie/CodeBlock 미사용 시 lazy chunk는 로드되지 않음
+
+---
+
+## 관련 문서
+
+- [멀티플랫폼 가이드](./MULTI-PLATFORM-GUIDE.md)
+- [Vue / Angular 통합](./VUE-ANGULAR-INTEGRATION.md)
+- [CDN 가이드](./CDN-GUIDE.md)
+- [ui-wc 패키지 README](../README.md)
+- [Vanilla 시작 예제](./CDN-GUIDE.md)

package/docs/WORKSPACE.md

@@ -0,0 +1,27 @@
+# 워크스페이스 표시·초대 모듈 (개발 소스)
+
+WorkspaceMembers / WorkspaceInviteModal은 실제 Avatar·Badge·Input·Select·Modal·Button을 조합한다. 메일/초대 토큰/수락/권한/DB를 구현하지 않으며 새 runtime dependency나 인증 공급자는 없다. 기존 exports 삭제/버전 발행·starter r2 snapshot 교체도 없다.
+
+## WorkspaceMembers
+
+HTML은 `.members`, React는 `members` 배열로 {id,name,email,roleLabel,state,canReinvite?}를 전달한다. state는 active/invited/expired다. 잘못된/중복 id를 제외하며 이름·이메일·역할은 텍스트다. 역할과 상태는 서버의 결과이며 클라이언트에서 추정하지 않는다. inviteLabel을 제공할 때만 초대 버튼이 나온다. pending/loading/disabled는 액션을 막는다. error는 기존 목록과 재시도를 표시한다.
+
+onDbInvite는 초대 모달을 여는 의도, onDbReinvite는 {detail:{id}}, onDbRetry는 목록 새로 읽기 의도다. active 항목은 다시 초대 액션이 없고, invited/expired 중 canReinvite가 명시된 항목만 표시한다. 서버는 UI 상태와 별개로 소유권·허용 역할·재발송 제한·기간을 검증해야 한다.
+
+## WorkspaceInviteModal
+
+roles: {id,label}[]와 선택 defaultRoleId/open/title/description/loading/disabled/error/resetKey를 제공한다. roles는 앱의 허용 목록이며 내장 소유자/관리자/무료 플랜 정책은 없다. 모달은 이메일과 선택 역할의 로컬 미저장 draft를 소유한다. draft getter는 복사본이다.
+
+onDbInvite는 {detail:{email,roleId}}다. 이메일은 공백 제거 후 1~254자와 실제 HTML email validity를 검사하고, roleId는 현재 제공 목록에 있어야 한다. placeholder는 name@company.com이다. blur/제출 오류·수정 후 해제·Enter 제출을 지원한다. 서버의 형식/도메인/중복/초대 정책을 대체하지 않는다.
+
+취소나 서버 오류에서는 draft를 보존한다. 서버 확인 후 앱이 open=false로 닫고 resetKey를 변경하면 다음 초대에서 초기화된다. loading 중에는 제출/닫기를 막는다. onDbDraftChange로 앱의 이전 서버 오류를 정리하고 onDbClose로 취소를 받는다. 제품은 중복 요청 키와 멤버십 트랜잭션을 서버에서 따로 검증한다.
+
+기존 Modal이 포커스 트랩·포털·스크롤 잠금을 소유한다. 목록이 재렌더링돼 초대 트리거가 교체되는 경우에는 소비 앱이 닫힌 뒤 새 트리거로 포커스를 복원해야 한다. 예제 WorkspaceExample에서 이를 보여준다.
+
+## 소비 예제와 검증
+
+credit-wallet.html#workspace-example은 example.com 계정·중복 입력·실패·초대 대기·만료 재초대를 메모리에서 시험한다. 실제 초대 메일을 보내지 않고 invited를 active로 바꾸지 않는다. 실패와 중복에서는 입력과 선택을 보존한다. 초대 수락·멤버 제거·역할 수정은 후속 범위다.
+
+`node scripts/test-workspace-ui.mjs`는 DB_UI_EXAMPLE_URL로 고정된 example 번들을 검증한다. development server 기본값5180과 production runtime 검사를 구분한다. 새 모듈은 source UI/예제에만 연결했고 설치 snapshot 전달·실제 제품 적용은 별도다.
+
+세부 간격 변수·모바일·포커스 보완은 [최근 모듈 품질 계약](./RECENT-COMPONENTS-QUALITY.md)을 따른다.

package/docs/quality/AXE-REPORT.md

@@ -0,0 +1,35 @@
+# ui-wc 런타임 접근성 리포트
+
+> ⚠️ **자동 생성 파일 — 직접 수정하지 마세요.**
+> `npm run audit:axe` 로 재생성됩니다. 규칙 정의는 [QUALITY-GUIDELINES.md](../QUALITY-GUIDELINES.md).
+
+생성일: 2026-11-06 · 픽스처 16개 · axe critical/serious **0건** · 키보드 시나리오 실패 **0건** · 토큰 레이어(색 대비) **0건**
+
+axe-core 는 라이트/다크 두 테마에서 각각 실행합니다. 키보드 시나리오는 axe 가 검증할 수 없는
+포커스 트랩·포커스 복원·roving tabindex·폼 참여를 실제 조작으로 확인합니다.
+
+## 요약
+
+| 픽스처 | axe (라이트) | axe (다크) | 키보드 시나리오 | 콘솔 오류 |
+|---|---|---|---|---|
+| `db-ai-elements` | ✓ | ✓ | — | ✓ |
+| `db-button` | ✓ | ✓ | — | ✓ |
+| `db-checkbox` | ✓ | ✓ | ✓ 통과 | ✓ |
+| `db-credit-ai` | ✓ | ✓ | — | ✓ |
+| `db-credit-ai-react` | ✓ | ✓ | — | ✓ |
+| `db-drawer` | ✓ | ✓ | ✓ 통과 | ✓ |
+| `db-input` | ✓ | ✓ | ✓ 통과 | ✓ |
+| `db-magicui-components` | ✓ | ✓ | — | ✓ |
+| `db-modal` | ✓ | ✓ | ✓ 통과 | ✓ |
+| `db-navigation-rail` | ✓ | ✓ | — | ✓ |
+| `db-recent-quality` | ✓ | ✓ | — | ✓ |
+| `db-section` | ✓ | ✓ | ✓ 통과 | ✓ |
+| `db-select` | ✓ | ✓ | — | ✓ |
+| `db-sidebar-accordion` | ✓ | ✓ | — | ✓ |
+| `db-tabs` | ✓ | ✓ | ✓ 통과 | ✓ |
+| `db-toast` | ✓ | ✓ | ✓ 통과 | ✓ |
+
+## 상세
+
+위반 없음.
+

package/docs/quality/CREDIT-AI-RELEASE-2026-10-18.md

@@ -0,0 +1,34 @@
+<!-- Generated from docs/evidence/CREDIT_AI_UI_2026-10-18.md by scripts/sync-package-docs.mjs. -->
+# 크레딧·AI 공통 UI 실행 기록 — 2026-10-18
+
+변경 대상은 Designbase Library의 `packages/ui-wc`이며 기존 스타터킷 소비 tarball/lockfile은 교체하지 않았다. 새 export는 로컬 빌드 산출물에서 사용할 수 있다. 기존 ui-wc 0.8.13 기반의 호환 추가이며 다음 minor 대상으로 CHANGELOG와 ADR-CREDIT-AI-UI에 기록했다. 신규 런타임 의존성은 없다.
+
+## 구현
+
+- `src/components/db-credit-balance.{ts,scss,css,stories.ts}`: 가용 잔액/예약/누적 사용, 부족·로딩·오류·compact·충전 이벤트.
+- `db-credit-recharge.*`: 상품 런타임 검증, native radio controlled 선택, 키보드/포커스, 결제 진입 이벤트, 로딩/오류·빈 상태.
+- `db-ai-task-status.*`: idle/queued/running/succeeded/failed/cancelled/needs_attention, 서버 진행률 또는 스피너, 예약·차감·취소/재시도/확인 이벤트.
+- define/index/react/styles 등록, i18n, 기존 버튼·진행바·스피너 조합, Storybook 및 design-examples 갤러리/검색/사용 API 등록.
+- 상세 소비 계약: `packages/ui-wc/docs/CREDIT-AI.md`.
+
+## 실행
+
+| 실제 명령 | 결과와 범위 |
+| --- | --- |
+| `npm run typecheck --prefix packages/ui-wc` | 통과. 실제 전체 UI 라이브러리 TypeScript 검사. |
+| `npm run build --prefix packages/ui-wc` | 통과. 기본/React ESM+CJS, d.ts, 개별 ESM, CSS. 최초 SCSS @use 위치 오류를 수정한 후 재실행 통과. |
+| `npm run build:check --prefix examples/design-examples` | 통과. 갤러리 전체 TypeScript + Vite production build. 기존 대형 번들 경고는 유지. |
+| `node scripts/verify-wc-examples.mjs` | 통과. 126개 활성 예제의 데모 연결. |
+| `npm run verify:docs --prefix packages/ui-wc` | 통과. 갤러리/속성/가이드 정합성 검사. |
+| `node scripts/audit-wc-quality.mjs --only db-credit-balance,db-credit-recharge,db-ai-task-status` | 스크립트가 전체 133개를 감사했고 P0 위반 0개. 정적 검사이며 접근성 실사용 판정은 아니다. |
+| `node scripts/test-credit-ai.mjs` | **56개 통과**. 결과는 `credit-ai-2026-10-18/checks.json`과 browser.log. Chromium 실제 DOM·클릭/키보드/선택/이벤트/재연결/유효하지 않은 입력/테마/너비/React wrapper를 검사. |
+
+브라우저 실행은 최초 sandbox의 localhost listen EPERM 이후 localhost 권한으로 실행했다. 검증 코드의 db-button 네이티브 button 가정, 숨긴 spinner와 중복 status 선택자, React 시험 번들의 NODE_ENV 설정과 React 비동기 상태 반영 대기를 수정했다. 컴포넌트에 가짜 성공을 추가해 검사를 우회하지 않았다.
+
+밝은/어두운 테마 1100px·390px 캡처를 저장하고 화면을 확인했다. 넘침과 신규 스타일에서 사용하는 토큰의 실제 해석을 검사한다. 표시 문자열은 HTML로 해석되지 않으며 진행률 없는 작업은 %를 만들지 않는다. 확인 대기에서는 재시도 버튼이 없다.
+
+## 검증 경계
+
+실제 결제·크레딧 충전/지급·외부 AI 호출·실제 Supabase·운영 DB·원격 배포·공개 npm publish는 실행하지 않았다. 선택/작업/결제 이벤트는 의도 전달이며 서버 최종 인가/정산을 대신하지 않는다. 스타터 앱의 기존 설치본은 그대로여서 신규 UI 자동 적용 완료로 계산하지 않는다.
+
+스타터킷에서는 `pnpm verify` 24단계를 통과했다. `pnpm release:check`는 live-supabase/live-notices의 현재 소스 증거 및 P1-009/P2-006 때문에 차단된다. UI 단독 완료와 전체 제품 운영 수용을 구분한다. 스타터 기록은 `docs/evidence/UI_CREDIT_LIBRARY_2026-10-18.md`다.