@designfever/web-review-kit 0.5.0 → 0.6.0

package/dist/{types-RvVa5ns-.d.cts → types-DFHHVRBc.d.cts}

@@ -176,6 +176,7 @@ interface WebReviewKitTarget {
     document: Document;
     getViewportRect?: () => Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
     getOverlayRect?: () => Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+    getComposerHost?: () => HTMLElement | null | undefined;
 }
 
 export type { DomAnchor as D, LocalAdapterOptions as L, NumberedReviewItem as N, ReviewWorkflowStatus as R, SupabaseReviewAdapterOptions as S, ViewportSize as V, WebReviewKitAdapter as W, ReviewItemStatus as a, WebReviewKitOptions as b, WebReviewKitController as c, ReviewViewportPreset as d, ReviewItem as e, ReviewItemScope as f, DomAnchorCandidate as g, DomAnchorStrategy as h, DomSourceHint as i, RelativeSelection as j, ReviewItemKind as k, ReviewItemQuery as l, ReviewMarker as m, ReviewMode as n, ReviewPoint as o, ReviewRulerConfig as p, ReviewSelection as q, ReviewSource as r, ReviewSubmitStatus as s, ReviewViewportScope as t, SupabaseReviewClient as u, WebReviewKitTarget as v };

package/dist/{types-RvVa5ns-.d.ts → types-DFHHVRBc.d.ts}

@@ -176,6 +176,7 @@ interface WebReviewKitTarget {
     document: Document;
     getViewportRect?: () => Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
     getOverlayRect?: () => Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+    getComposerHost?: () => HTMLElement | null | undefined;
 }
 
 export type { DomAnchor as D, LocalAdapterOptions as L, NumberedReviewItem as N, ReviewWorkflowStatus as R, SupabaseReviewAdapterOptions as S, ViewportSize as V, WebReviewKitAdapter as W, ReviewItemStatus as a, WebReviewKitOptions as b, WebReviewKitController as c, ReviewViewportPreset as d, ReviewItem as e, ReviewItemScope as f, DomAnchorCandidate as g, DomAnchorStrategy as h, DomSourceHint as i, RelativeSelection as j, ReviewItemKind as k, ReviewItemQuery as l, ReviewMarker as m, ReviewMode as n, ReviewPoint as o, ReviewRulerConfig as p, ReviewSelection as q, ReviewSource as r, ReviewSubmitStatus as s, ReviewViewportScope as t, SupabaseReviewClient as u, WebReviewKitTarget as v };

package/docs/README.md

@@ -10,6 +10,7 @@ Public docs are intentionally small. Keep implementation history, handoff notes,
 4. [Architecture and runtime logic](architecture.md)
 5. [Figma overlay](figma-overlay.md)
 6. [Grid overlay](grid-overlay.md)
+7. [Release notes 0.6.0](release-notes-0.6.0.md)
 
 ## Document Roles
 
@@ -19,6 +20,7 @@ Public docs are intentionally small. Keep implementation history, handoff notes,
 - `architecture.md`: core/runtime, React shell, coordinate, anchor, and feature boundary notes.
 - `figma-overlay.md`: host requirements for the Figma overlay toggle.
 - `grid-overlay.md`: host requirements for the grid/helper overlay toggle.
+- `release-notes-0.6.0.md`: latest release changes, host notes, and validation scope.
 
 ## Boundary
 

package/docs/architecture.md

@@ -35,6 +35,8 @@ createWebReviewKit({
 
 `ui.panel: false` means the React shell owns the side panel and toolbar. Core still owns target overlays such as note pins, area selection boxes, DOM hover outlines, saved item markers, and highlights.
 
+When the React shell provides a composer host, core docks DOM/area draft composer UI into the QA panel instead of rendering it as a floating target overlay. Core still owns draft creation, anchor capture, geometry, and adapter submission; React shell only provides the stable panel host.
+
 ## Core Modules
 
 - `web.review.kit.app.ts`: controller lifecycle, state transitions, adapter calls, item creation, restore flow.
@@ -95,6 +97,8 @@ The default local adapter is for draft/local review work. Supabase is optional h
 - ruler UI
 - presence UI
 - host overlay toggles such as grid and Figma
+- Source Tree UI, metadata toggles, and browser-local UI state persistence
+- QA panel composer host for shell-owned layout
 
 React shell should call the core controller instead of duplicating target overlay logic.
 

package/docs/installation.md

@@ -218,7 +218,7 @@ export default defineConfig({
 
 Captured DOM nodes will include `data-wrk-source-file`, `data-wrk-source-line`, and `data-wrk-source-column`. Data locator also injects `__wrkDataFile` and `__wrkDataLine` props into page data section objects so the shell can expose matching `data-wrk-data-*` hints when host components forward those props to section wrappers.
 
-In the review shell, hold `Option` over the target iframe to show source candidates from the DOM ancestry. Click the target to pin the candidate list, then choose which file to open. The side rail Source Tree panel lists section/source/data candidates and can scroll to a section or open its source/data file. If the file path is absolute, it opens directly. If the plugin stores relative paths, pass `sourceRoot` when mounting the shell.
+In the review shell, hold `Option` over the target iframe to show source candidates from the DOM ancestry. Click the target to pin the candidate list, then choose which file to open. The side rail Source Tree panel lists section/source/data candidates and can scroll to a section or open its source/data file. It can also show live box metrics, text/font metadata, media URLs, and class tags for each node. If the file path is absolute, it opens directly. If the plugin stores relative paths, pass `sourceRoot` when mounting the shell.
 
 ```tsx
 mountReviewShell({
@@ -242,6 +242,10 @@ Set `sourceInspector.enabled` to `false` when source code opening should be unav
 
 Use this only in dev/review builds. Source paths are written into the browser DOM and can be persisted with QA items.
 
+Source Tree filter/options, side panel state, and QA status filter are browser-local UI preferences. They are stored in localStorage and are not sent through the adapter.
+
+In React shell mode, DOM/area draft composers dock into the QA panel when the shell provides a composer host. This keeps mobile Safari keyboard/viewport resize from moving a floating composer layer over the target frame.
+
 ## Custom Adapter
 
 If a team or host project owns its own QA backend, keep that adapter in the host project or in a separate package. Start from [adaptor.sample.ts](adaptor.sample.ts) and map its `WebReviewKitAdapter` methods to your backend API.

package/docs/release-notes-0.6.0.md

@@ -0,0 +1,108 @@
+# 릴리즈 노트: 0.6.0
+
+0.5.0 release 이후 변경 사항 정리.
+
+비교 기준: `0.5.0`
+검토 기준: 0.6.0 dogfood working tree (`Source Tree` metadata, docked QA composer, Lexus mobile/WebKit flow 포함)
+
+## 주요 변경
+
+- DOM/area draft composer를 QA panel 하단 dock 방식으로 바꿔 mobile viewport/keyboard resize 영향을 줄였다.
+- Source Tree를 component inspection tool로 확장했다.
+- Source Tree box/text/font/media/class metadata 표시를 추가했다.
+- Source Tree, QA panel, QA status filter 상태를 browser localStorage에 유지한다.
+- QA list ID capsule click-to-copy, toolbar/header spacing, icon button density를 정리했다.
+- Lexus dogfood에서 local package 연결, 540x1080 mobile viewport, LAN preview 흐름을 확인했다.
+
+## 변경
+
+### Docked QA Composer
+
+React shell mode에서 DOM/area draft composer는 target 위 floating layer 대신 QA list 하단에 붙는다.
+
+- mobile Safari input focus/viewport resize에 덜 흔들리는 구조
+- DOM selection adjustment controls 유지
+- area selection draft도 같은 host 영역 사용
+- draft composer가 열리면 QA panel로 focus 이동
+
+Core standalone overlay mode는 기존처럼 target overlay 안에서 composer를 렌더링한다.
+
+### Source Tree Metadata
+
+Source Tree row에 inspection metadata를 표시할 수 있게 했다.
+
+- box: target iframe 기준 `top / left / width / height`
+- text: PlacerTextInline 등 text node 값
+- font: font size/weight summary
+- media: image/poster/video URL, desktop/mobile asset label
+- class: className tag list
+
+Box 값은 render 시점의 iframe element rect를 다시 읽어서 viewport/resolution 변경 후에도 최신 값에 맞춘다.
+
+### Source Tree Controls
+
+Source Tree header/filter layout을 QA sheet와 맞췄고, metadata option은 icon-only toggle로 정리했다.
+
+- filter input을 최상단에 배치
+- root count와 metadata toggles를 같은 header row에 배치
+- Source Tree를 켤 때 parent tree nodes는 기본 collapsed 상태로 시작
+- row hover 영역은 metadata block까지 포함
+- row의 DOM select action은 QA panel로 전환한 뒤 draft 작성 흐름을 시작
+
+### QA List
+
+- `DRAFT-1`, `#102` 같은 QA ID capsule을 누르면 ID가 copy된다.
+- Local QA title case/color와 list/header spacing을 정리했다.
+- QA status filter 선택값을 새로고침 후에도 유지한다.
+- side panel mode와 panel open/close 상태를 새로고침/페이지 이동 후에도 유지한다.
+
+## Persistence
+
+0.6.0에서 shell UI state는 browser-local localStorage에 저장된다.
+
+- `df-review-side-panel`
+- `df-review-side-panel-visible`
+- `df-review-source-tree-filter`
+- `df-review-source-tree-meta-visibility`
+- `df-review-qa-status-filter`
+
+이 값들은 QA item data가 아니며, adapter나 backend로 sync되지 않는다.
+
+## Host 적용 메모
+
+### Lexus dogfood integration
+
+- `lexus_official_v2026`에서 `@designfever/web-review-kit`을 `file:../df-web-review-kit`로 연결해 검증했다.
+- review dev server는 LAN 접근을 위해 `--host 0.0.0.0`로 띄워 mobile device에서 확인했다.
+- 540x1080 mobile preset에서 DOM QA composer 입력/저장/취소, Source Tree metadata toggles, QA status filter persistence를 확인했다.
+
+## 문서
+
+- README에 0.6.0 release note link와 Source Tree metadata/persistence 설명을 추가했다.
+- Installation docs에 docked composer, Source Tree metadata, localStorage persistence 설명을 추가했다.
+- Architecture docs에 React shell composer host boundary를 추가했다.
+- 오래된 internal handoff note를 삭제했다.
+
+## 검증
+
+아래 명령을 확인했다.
+
+- `pnpm typecheck`
+- `pnpm typecheck:dev`
+- `pnpm build`
+- `pnpm build:dev`
+- `git diff --check`
+- `npm pack --dry-run --json`
+
+수동 확인:
+
+- Lexus dogfood review page DOM QA create/cancel
+- Source Tree filter/meta toggle persistence
+- QA status filter persistence
+- mobile/LAN preview
+
+## 메모
+
+- `package.json` version은 `0.6.0`이다.
+- npm publish 전에는 registry login 상태를 확인해야 한다.
+- Lexus target app에서 React SVG prop warning(`fill-rule`, `clip-rule`)이 보일 수 있으나 review-kit package warning은 아니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designfever/web-review-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Designfever web page review overlay toolkit.",
   "license": "Apache-2.0",