@designfever/web-review-kit 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/.env.sample +29 -0
  2. package/README.md +35 -10
  3. package/dist/chunk-AB5B6O77.js +584 -0
  4. package/dist/chunk-AB5B6O77.js.map +1 -0
  5. package/dist/{chunk-IN36JHEU.js → chunk-RPVLRULC.js} +504 -143
  6. package/dist/chunk-RPVLRULC.js.map +1 -0
  7. package/dist/image.types-BmzkFSPX.d.cts +71 -0
  8. package/dist/image.types-BmzkFSPX.d.ts +71 -0
  9. package/dist/index.cjs +1019 -144
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.d.cts +27 -3
  12. package/dist/index.d.ts +27 -3
  13. package/dist/index.js +50 -3
  14. package/dist/index.js.map +1 -1
  15. package/dist/react-shell.cjs +10293 -5185
  16. package/dist/react-shell.cjs.map +1 -1
  17. package/dist/react-shell.d.cts +37 -4
  18. package/dist/react-shell.d.ts +37 -4
  19. package/dist/react-shell.js +9624 -4856
  20. package/dist/react-shell.js.map +1 -1
  21. package/dist/token-Dt-ZH-YO.d.cts +88 -0
  22. package/dist/token-nJXPPdYX.d.ts +88 -0
  23. package/dist/{types-DFHHVRBc.d.cts → types-DT9Z66mV.d.cts} +13 -1
  24. package/dist/{types-DFHHVRBc.d.ts → types-DT9Z66mV.d.ts} +13 -1
  25. package/dist/vite.cjs +1116 -5
  26. package/dist/vite.cjs.map +1 -1
  27. package/dist/vite.d.cts +45 -1
  28. package/dist/vite.d.ts +45 -1
  29. package/dist/vite.js +800 -5
  30. package/dist/vite.js.map +1 -1
  31. package/docs/README.md +11 -7
  32. package/docs/adapters.md +126 -0
  33. package/docs/adaptor.sample.ts +13 -1
  34. package/docs/architecture.md +2 -1
  35. package/docs/code-review-0.6.0.md +232 -0
  36. package/docs/db-setup.md +4 -2
  37. package/docs/figma-image-mvp-0.7.0.md +327 -0
  38. package/docs/installation.md +39 -7
  39. package/docs/release-notes-0.7.0.md +128 -0
  40. package/package.json +6 -2
  41. package/dist/chunk-IN36JHEU.js.map +0 -1
package/docs/db-setup.md CHANGED
@@ -4,9 +4,11 @@ Supabase is an optional backend adapter. A host project may use it for canonical
4
4
 
5
5
  ## Environment
6
6
 
7
+ Start from [.env.sample](../.env.sample), then fill Supabase values only in the host project that uses the Supabase adapter.
8
+
7
9
  ```env
8
- VITE_REVIEW_PROJECT_ID=df-web-review-kit
9
- VITE_REVIEW_SUPABASE_URL=https://your-project.supabase.co
10
+ VITE_REVIEW_PROJECT_ID=my-project
11
+ VITE_REVIEW_SUPABASE_URL=
10
12
  VITE_REVIEW_SUPABASE_ANON_KEY=
11
13
  VITE_REVIEW_SUPABASE_TABLE=review_items
12
14
  VITE_REVIEW_SUPABASE_PRESENCE_PRIVATE=false
@@ -0,0 +1,327 @@
1
+ # Figma Image MVP 0.7.0 Structure Note
2
+
3
+ This is the investigation note for Todo 802, `Figma 이미지 MVP 구조 조사`.
4
+ It records the minimum 0.7.0 scope before implementation.
5
+
6
+ ## Goal
7
+
8
+ 0.7.0 should add a dev/local Figma image management MVP without breaking the
9
+ current host-helper flow.
10
+
11
+ - If a Figma image store is configured, the review shell uses the new image
12
+ management flow.
13
+ - If no Figma image store is configured, the shell keeps the current Figma
14
+ helper fallback: dispatch the host keyboard shortcut and detect the host
15
+ overlay.
16
+ - `FIGMA_TOKEN` is required only by the Figma image server/dev endpoint when it
17
+ renders or adds an image. It must not become a package-wide or browser env
18
+ requirement.
19
+ - Rendered images should be downloaded into a local/dev asset cache. Prefer webp
20
+ when an image transformer is configured, but keep `png`/`jpg` fallback without
21
+ adding a package dependency. Always keep the original `figmaUrl`, `fileKey`,
22
+ and `nodeId` so the image can be regenerated later.
23
+ - Removing keyboard shortcut helpers from host projects belongs after the MVP
24
+ has stabilized.
25
+
26
+ ## Current State
27
+
28
+ ### Existing Review Adapters
29
+
30
+ `WebReviewKitAdapter` is a QA item persistence contract:
31
+
32
+ - `get`
33
+ - `list`
34
+ - `create`
35
+ - `update`
36
+ - `remove`
37
+
38
+ `ReviewShellAdapter` wraps that contract for shell sources, status handling,
39
+ submission sync, and write-mode checks. It is intentionally centered on
40
+ `ReviewItem`.
41
+
42
+ Do not overload this adapter for Figma image bindings in 0.7.0. Figma images
43
+ need their own small store contract so QA item source switching, status updates,
44
+ and submission sync do not become coupled to image management.
45
+
46
+ ### Current Figma Integration
47
+
48
+ The current Figma integration is only a host-helper toggle:
49
+
50
+ - `docs/figma-overlay.md` states that the package does not fetch Figma data or
51
+ own a server-side token.
52
+ - `src/react-shell/figma.ts` reads `window.__figma` and builds a Figma frame
53
+ link from `fileKey->nodeId`.
54
+ - `src/react-shell/hooks/use.review.target.overlay.ts` dispatches `KeyF` into
55
+ the iframe target when the Figma overlay is toggled.
56
+ - `src/react-shell/settings.ts` and `use.review.settings.ts` store the current
57
+ `figma-token` setting in browser `localStorage`.
58
+ - `dev/src/main.tsx` currently provides a dev `window.__figma` fixture.
59
+
60
+ This flow should remain as the fallback for projects that have no image store.
61
+
62
+ ### Dev Server Gap
63
+
64
+ `src/vite.ts` currently exports source/data locator plugins only. There is no
65
+ middleware endpoint yet.
66
+
67
+ A local `fileAdapter` cannot be browser-only, because browser code cannot write
68
+ a JSON file. The local MVP should add a Vite/dev-server endpoint and expose a
69
+ browser store client that calls that endpoint.
70
+
71
+ ## Proposed 0.7.0 Shape
72
+
73
+ ### Public/Shell Option
74
+
75
+ Add an optional shell-level Figma image config. Keep it absent by default.
76
+
77
+ ```ts
78
+ type ReviewShellFigmaImagesOptions = {
79
+ store?: ReviewFigmaImageStore;
80
+ enabled?: boolean;
81
+ };
82
+
83
+ interface ReviewShellProps {
84
+ // existing props...
85
+ figmaImages?: ReviewShellFigmaImagesOptions;
86
+ }
87
+ ```
88
+
89
+ Fallback rule:
90
+
91
+ - `figmaImages?.store` exists: show/use Figma image management UI.
92
+ - `figmaImages?.store` is missing: keep the current host-helper overlay button
93
+ and keyboard shortcut behavior.
94
+
95
+ ### Store Contract
96
+
97
+ The 0.7.0 contract should be separate from `WebReviewKitAdapter`.
98
+
99
+ ```ts
100
+ type ReviewFigmaImageTarget =
101
+ | { type: 'route'; projectId: string; pageUrl: string; slot?: string }
102
+ | { type: 'figma-node'; projectId: string; fileKey: string; nodeId: string };
103
+
104
+ type ReviewFigmaImage = {
105
+ id: string;
106
+ projectId: string;
107
+ target: ReviewFigmaImageTarget;
108
+ figmaUrl: string;
109
+ fileKey: string;
110
+ nodeId: string;
111
+ imageUrl: string;
112
+ imageFormat: 'webp' | 'png' | 'jpg';
113
+ mimeType: string;
114
+ label?: string;
115
+ order: number;
116
+ storageKey?: string;
117
+ width?: number;
118
+ height?: number;
119
+ byteSize?: number;
120
+ createdAt: string;
121
+ updatedAt: string;
122
+ };
123
+
124
+ type ReviewFigmaImageStore = {
125
+ listImages(target: ReviewFigmaImageTarget): Promise<ReviewFigmaImage[]>;
126
+ addImage(input: {
127
+ target: ReviewFigmaImageTarget;
128
+ figmaUrl: string;
129
+ imageFormat?: 'webp' | 'png' | 'jpg';
130
+ }): Promise<ReviewFigmaImage>;
131
+ deleteImage(id: string): Promise<void>;
132
+ reorderImages(input: {
133
+ target: ReviewFigmaImageTarget;
134
+ imageIds: string[];
135
+ }): Promise<ReviewFigmaImage[]>;
136
+ updateImage(
137
+ id: string,
138
+ patch: Partial<Pick<ReviewFigmaImage, 'label' | 'order'>>
139
+ ): Promise<ReviewFigmaImage>;
140
+ };
141
+ ```
142
+
143
+ `addImage` owns the internal image rendering/upload/cache step. The UI should
144
+ not know whether the returned `imageUrl` came from a local dev server,
145
+ OpenClaw-hosted upload, or a future Cloudflare-backed uploader.
146
+
147
+ Default target output is `image/webp` with a quality setting around 90-95 for
148
+ review/reference overlays, but the package should not force an image conversion
149
+ dependency for the dev MVP. Without a configured transformer, the local cache
150
+ stores the actual Figma render format (`png` or `jpg`) and records that real
151
+ `mimeType`/`imageFormat` in metadata.
152
+
153
+ ### Module Layout
154
+
155
+ Use the architecture doc's existing direction, but convert the current single
156
+ `src/react-shell/figma.ts` file into a small module when implementation begins.
157
+
158
+ ```txt
159
+ src/figma/
160
+ image.types.ts
161
+ parse.ts
162
+
163
+ src/react-shell/figma/
164
+ image.client.ts
165
+ image.panel.tsx
166
+ image.state.ts
167
+ frame.ts
168
+
169
+ src/vite.ts
170
+ reviewFigmaImageStore()
171
+ ```
172
+
173
+ Suggested responsibilities:
174
+
175
+ - `src/figma/parse.ts`: parse Figma node copy links into `fileKey` and `nodeId`.
176
+ - `src/react-shell/figma/image.client.ts`: browser client for the dev endpoint
177
+ or any host-provided store.
178
+ - `src/react-shell/figma/image.panel.tsx`: list/add/delete/reorder UI.
179
+ - `src/vite.ts`: dev middleware for local JSON metadata and Figma rendering.
180
+
181
+ ### Local MVP Endpoint
182
+
183
+ Add a dev plugin instead of trying to write files from browser code.
184
+
185
+ ```ts
186
+ reviewFigmaImageStore({
187
+ enabled: true,
188
+ projectId: 'df-web-review-kit',
189
+ dataFile: '.df-review/figma-images.json',
190
+ });
191
+ ```
192
+
193
+ Endpoint shape can stay internal for 0.7.0, but should map directly to the
194
+ store contract:
195
+
196
+ - `GET /__dfwr/figma-images`
197
+ - `POST /__dfwr/figma-images`
198
+ - `PATCH /__dfwr/figma-images/:id`
199
+ - `DELETE /__dfwr/figma-images/:id`
200
+
201
+ The dev endpoint reads `FIGMA_TOKEN` from server env only when it needs to call
202
+ Figma. Do not expose `VITE_FIGMA_TOKEN`.
203
+
204
+ Token validation is intentionally lazy:
205
+
206
+ - Store missing or disabled: no token check, keep the current host-helper
207
+ fallback.
208
+ - Store enabled but no image render/add request has happened: no token check.
209
+ - Image render/add request: require `FIGMA_TOKEN` from the dev/server
210
+ environment and return `DFWR_FIGMA_TOKEN_MISSING` when it is absent.
211
+
212
+ ## Impact Files
213
+
214
+ Expected package-side implementation files:
215
+
216
+ - `.env.sample`: document server-only `FIGMA_TOKEN` separately from browser
217
+ `VITE_*` values.
218
+ - `src/types.ts` or `src/figma/image.types.ts`: shared Figma image types.
219
+ - `src/index.ts`: export public Figma image types/parser only if needed by host
220
+ projects.
221
+ - `src/react-shell/types.ts`: add optional `figmaImages`.
222
+ - `src/react-shell/review/shell.tsx`: pass state/actions into the panel and
223
+ preserve existing fallback behavior.
224
+ - `src/react-shell/topbar.tsx`: keep the existing overlay toggle available when
225
+ no image store exists.
226
+ - `src/react-shell/review/settings.modal.tsx` and
227
+ `src/react-shell/hooks/use.review.settings.ts`: stop treating browser
228
+ `figma-token` as the new API token. Keep it only for legacy host helpers if
229
+ needed.
230
+ - `src/vite.ts`: add the dev local metadata endpoint.
231
+ - `dev/vite.config.ts` and `dev/src/main.tsx`: wire the local MVP for dogfood.
232
+
233
+ Token helpers already added for the implementation steps:
234
+
235
+ - `readReviewFigmaToken()` / `requireReviewFigmaToken()` validate an explicit
236
+ token/env object without reading browser globals.
237
+ - `readReviewFigmaServerToken()` / `requireReviewFigmaServerToken()` are
238
+ exported from `@designfever/web-review-kit/vite` for dev/server-only code.
239
+ - `ReviewFigmaTokenError` carries `DFWR_FIGMA_TOKEN_MISSING` so UI/API callers
240
+ can show a clear setup error.
241
+
242
+ Parser/render helpers already added for the implementation steps:
243
+
244
+ - `parseReviewFigmaNodeRef()` accepts either a Figma copy link or existing
245
+ `fileKey->nodeId` value.
246
+ - URL `node-id` values are normalized from Figma web form like `4-228` to API
247
+ form like `4:228`.
248
+ - `createReviewFigmaFrameUrl()` centralizes Figma frame link generation.
249
+ - `renderReviewFigmaServerImage()` is exported from
250
+ `@designfever/web-review-kit/vite` and calls Figma `/v1/images/:fileKey` with
251
+ a server-side token.
252
+ - The Figma API render URL is a temporary source URL. The local file adapter now
253
+ downloads it into the dev asset cache before writing JSON metadata.
254
+
255
+ Local metadata store helpers already added for the implementation steps:
256
+
257
+ - `createReviewFigmaImageStoreClient()` creates a browser-side
258
+ `ReviewFigmaImageStore` that calls the dev endpoint.
259
+ - `reviewFigmaImageStore()` is exported from
260
+ `@designfever/web-review-kit/vite` and adds the local dev middleware.
261
+ - The default endpoint is `/__dfwr/figma-images`.
262
+ - The dev fixture stores metadata at `.df-review/figma-images.json`; the
263
+ `.df-review` folder is gitignored.
264
+ - The local middleware downloads rendered image binaries into
265
+ `.df-review/figma-assets` by default and stores the served local asset URL as
266
+ `imageUrl`.
267
+ - The asset endpoint defaults to `/__dfwr/figma-images/assets`.
268
+ - `cacheAssets: false` keeps the old temporary render URL behavior for debugging.
269
+ - `transformAsset` can convert the downloaded data before it is written, which
270
+ is where a future sharp/Cloudflare webp conversion step should plug in.
271
+
272
+ Review page multi-image UI already added for the implementation steps:
273
+
274
+ - When `figmaImages.store` is configured, the shell shows a Figma Images side
275
+ panel.
276
+ - The panel supports list, add, delete, reorder, select, and overlay opacity
277
+ controls for the current route + viewport target.
278
+ - When no store is configured, the legacy host-helper Figma overlay fallback is
279
+ still used.
280
+
281
+ Release snapshot helpers already added for the implementation steps:
282
+
283
+ - `createReviewFigmaImagesSnapshot()` clones and sorts image metadata for JSON
284
+ persistence.
285
+ - `createReviewFigmaReleaseSnapshot()` returns a release-shaped JSON object
286
+ with `figmaImagesSnapshot`.
287
+ - `collectReviewFigmaReleaseSnapshot()` can collect images through any
288
+ `ReviewFigmaImageStore` for a set of targets.
289
+ - The local Vite middleware exposes
290
+ `GET/POST /__dfwr/figma-images/snapshot` for dev release JSON snapshots.
291
+
292
+ Expected host-project follow-up files after stabilization:
293
+
294
+ - `lexus_official_v2026/src/helper/helper.review-kit.ts`: remove per-project
295
+ helper wiring only after 0.7.0 fallback has been verified.
296
+ - Host review route files: pass the image store config only for projects that
297
+ opt into the new flow.
298
+
299
+ ## Release Boundary
300
+
301
+ There is no runtime "review release" model in the current package code. The
302
+ existing release files are package release notes.
303
+
304
+ For 0.7.0, do not introduce a release table or separate release image store.
305
+ Todo 808 can keep this simple by snapshotting the current image list as JSON on
306
+ whatever release object gets introduced:
307
+
308
+ ```ts
309
+ figmaImagesSnapshot: ReviewFigmaImage[];
310
+ ```
311
+
312
+ That is enough to ensure old review releases do not change when the current
313
+ project/page Figma bindings are edited later.
314
+
315
+ ## Verification Plan
316
+
317
+ For Todo 802, this document is the artifact.
318
+
319
+ For the following implementation todos:
320
+
321
+ - Adapter missing: `/review` still works with current keyboard shortcut/Figma
322
+ helper fallback.
323
+ - Adapter configured and `FIGMA_TOKEN` missing: adding/rendering a Figma image
324
+ returns a clear error without breaking the rest of the review shell.
325
+ - Adapter configured and `FIGMA_TOKEN` present: a Figma node copy link can be
326
+ added, listed, deleted, reordered, and survives dev server restart.
327
+ - Existing QA adapters still pass `pnpm typecheck` and `pnpm build`.
@@ -3,6 +3,7 @@
3
3
  Install `df-web-review-kit` in a host project and mount the review shell on a `/review` route.
4
4
 
5
5
  The default setup is local-only. Remote DB and presence are optional adapters.
6
+ For the QA adapter and Figma image store split, see [Adapter boundaries](adapters.md).
6
7
 
7
8
  ## Package Install
8
9
 
@@ -16,6 +17,22 @@ Supabase is optional. Install it only in host projects that use the Supabase ada
16
17
  pnpm add @supabase/supabase-js
17
18
  ```
18
19
 
20
+ ## Environment
21
+
22
+ Copy the repository [.env.sample](../.env.sample) into the host project as `.env.local`.
23
+
24
+ ```bash
25
+ cp node_modules/@designfever/web-review-kit/.env.sample .env.local
26
+ ```
27
+
28
+ For a local-only setup, set only the project id:
29
+
30
+ ```env
31
+ VITE_REVIEW_PROJECT_ID=my-project
32
+ ```
33
+
34
+ Supabase and source-opening values are optional. Leave Supabase URL/key empty when the review shell should use local browser storage only.
35
+
19
36
  ## Vite Route
20
37
 
21
38
  Create a review entry such as:
@@ -44,7 +61,7 @@ import {
44
61
  localAdapter,
45
62
  } from '@designfever/web-review-kit';
46
63
 
47
- const REVIEW_PROJECT_ID = 'my-project';
64
+ const REVIEW_PROJECT_ID = import.meta.env.VITE_REVIEW_PROJECT_ID || 'my-project';
48
65
  const REVIEW_PATH_PREFIX = '/review';
49
66
 
50
67
  const local = localAdapter({
@@ -111,7 +128,7 @@ import {
111
128
  } from '@designfever/web-review-kit';
112
129
  import { createClient } from '@supabase/supabase-js';
113
130
 
114
- const REVIEW_PROJECT_ID = 'my-project';
131
+ const REVIEW_PROJECT_ID = import.meta.env.VITE_REVIEW_PROJECT_ID || 'my-project';
115
132
  const REVIEW_PATH_PREFIX = '/review';
116
133
 
117
134
  const local = localAdapter({
@@ -220,15 +237,25 @@ Captured DOM nodes will include `data-wrk-source-file`, `data-wrk-source-line`,
220
237
 
221
238
  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.
222
239
 
240
+ Source opening reads these optional host env values from `.env.local`:
241
+
242
+ ```env
243
+ VITE_REVIEW_SOURCE_ROOT=/absolute/path/to/project
244
+ VITE_REVIEW_SOURCE_EDITOR=cursor
245
+ VITE_REVIEW_SOURCE_URL_TEMPLATE=
246
+ ```
247
+
248
+ `VITE_REVIEW_SOURCE_ROOT` is needed when the locator stores relative paths. Absolute source paths can open without it. `VITE_REVIEW_SOURCE_EDITOR` supports `vscode`, `cursor`, `webstorm`, and `custom`. Use `VITE_REVIEW_SOURCE_URL_TEMPLATE` only with `custom`; the template supports `{path}`, `{encodedPath}`, `{line}`, and `{column}`.
249
+
250
+ In Vite/ESM hosts, env values override matching `sourceRoot`, `sourceInspector.editor`, and `sourceInspector.urlTemplate` init values. Init values still work as a fallback for existing projects and CommonJS consumers.
251
+
223
252
  ```tsx
224
253
  mountReviewShell({
225
254
  projectId: REVIEW_PROJECT_ID,
226
255
  pages,
227
256
  adapters,
228
257
  reviewPathPrefix: REVIEW_PATH_PREFIX,
229
- sourceRoot: import.meta.env.VITE_REVIEW_SOURCE_ROOT,
230
258
  sourceInspector: {
231
- editor: 'vscode', // 'vscode' | 'cursor' | 'webstorm' | 'custom'
232
259
  maxDepth: 9,
233
260
  hoverOutline: true,
234
261
  includePlacer: false,
@@ -248,7 +275,7 @@ In React shell mode, DOM/area draft composers dock into the QA panel when the sh
248
275
 
249
276
  ## Custom Adapter
250
277
 
251
- 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.
278
+ 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. Do not put Figma image storage into the QA adapter; use a separate `ReviewFigmaImageStore`.
252
279
 
253
280
  The sample explains the main interfaces:
254
281
 
@@ -261,12 +288,17 @@ Private keys, admin credentials, canonical numbering, and permission checks shou
261
288
 
262
289
  ## Environment
263
290
 
291
+ The full copyable template is [.env.sample](../.env.sample).
292
+
264
293
  ```env
265
- VITE_REVIEW_PROJECT_ID=df-web-review-kit
266
- VITE_REVIEW_SUPABASE_URL=https://your-project.supabase.co
294
+ VITE_REVIEW_PROJECT_ID=my-project
295
+ VITE_REVIEW_SUPABASE_URL=
267
296
  VITE_REVIEW_SUPABASE_ANON_KEY=
268
297
  VITE_REVIEW_SUPABASE_TABLE=review_items
269
298
  VITE_REVIEW_SUPABASE_PRESENCE_PRIVATE=false
299
+ VITE_REVIEW_SOURCE_ROOT=/absolute/path/to/project
300
+ VITE_REVIEW_SOURCE_EDITOR=cursor
301
+ VITE_REVIEW_SOURCE_URL_TEMPLATE=
270
302
  ```
271
303
 
272
304
  Rules:
@@ -0,0 +1,128 @@
1
+ # 릴리즈 노트: 0.7.0
2
+
3
+ 0.6.0 release 이후 변경 사항 정리.
4
+
5
+ 비교 기준: `0.6.0`
6
+ 검토 기준: `main` release candidate
7
+
8
+ ## 주요 변경
9
+
10
+ - Figma reference image workflow를 review shell 안으로 옮겼다.
11
+ - Figma image local cache와 Vite plugin helper를 추가했다.
12
+ - QA 작성 필드를 `fields` option으로 확장해 title을 선택적으로 받을 수 있게 했다.
13
+ - QA item에 optional assignee 표시/변경 flow를 추가했다.
14
+ - 느린 remote adapter, 특히 df-sheet 연동에서 list/create/update/delete pending 상태를 UI로 표시한다.
15
+ - deep link item restore와 QA list focus 위치 보정을 개선했다.
16
+ - right rail Figma icon stroke를 다른 rail icon과 분리해 맞췄다.
17
+ - 릴리즈 직전 QA mutation failure feedback과 Figma image target key 보정을 반영했다.
18
+ - Sitemap modal에 페이지 검색 필터를 추가했다.
19
+ - Sitemap tree row를 ASCII prefix 대신 접기/펼치기 가능한 folder explorer 형태로 바꿨다.
20
+ - Sitemap tree depth를 더 빨리 읽을 수 있게 indent 영역에 subtle guide line을 추가했다.
21
+ - Sitemap tree guide line을 folder caret 중앙축에 맞추고 body row divider 대신 hover/active block highlight를 사용하도록 정리했다.
22
+ - Sitemap body row 높이를 줄이고 상태 컬럼을 Todo/Review/Hold count 중심으로 정리했다.
23
+
24
+ ## 변경
25
+
26
+ ### Figma Image Workflow
27
+
28
+ review shell에서 Figma reference image를 등록하고 target page 위에 overlay로 올릴 수 있게 했다.
29
+
30
+ - dev server plugin이 Figma API 호출과 local asset cache를 담당한다.
31
+ - Figma token은 server env의 `FIGMA_TOKEN`을 사용하고 browser bundle로 노출하지 않는다.
32
+ - metadata는 `.df-review/figma-images.json`, asset은 `.df-review/figma-assets/`에 저장한다.
33
+ - review shell에서는 image manager panel과 layer controls를 제공한다.
34
+ - 일반 route에서는 host가 연결한 overlay control만 사용할 수 있게 boundary를 분리했다.
35
+
36
+ ### QA Fields
37
+
38
+ adapter option에 `fields`를 추가했다.
39
+
40
+ - `fields.title`이 true일 때만 QA 작성/수정 화면에 title input을 표시한다.
41
+ - title은 optional field이며 없으면 기존 comment-only 작성 흐름을 유지한다.
42
+ - local fallback에는 assignee sample을 넣지 않고 host adapter가 필요한 field만 선언한다.
43
+
44
+ ### Assignee
45
+
46
+ status와 분리된 optional assignee flow를 추가했다.
47
+
48
+ - `assigneeTitle`로 select label을 host가 지정할 수 있다.
49
+ - `assigneeOptions`로 담당자 목록을 넣는다.
50
+ - `updateAssignee`가 있는 adapter에서만 list item assignee 변경을 허용한다.
51
+ - edit modal에서는 assignee를 수정하지 않는다.
52
+
53
+ ### Remote Adapter Pending UI
54
+
55
+ remote adapter가 느릴 때 빈 상태처럼 보이지 않도록 loading/pending feedback을 추가했다.
56
+
57
+ - QA list 로딩 중 spinner와 loading text를 표시한다.
58
+ - refresh 중에는 refresh button을 disabled + spinner 상태로 둔다.
59
+ - QA 등록/수정/삭제/status/assignee 변경 중에는 item/form 단위 pending 상태를 표시한다.
60
+ - create 실패 시 작성 form에 error message를 표시한다.
61
+
62
+ ### Deep Link Restore
63
+
64
+ remote list가 늦게 도착하는 경우에도 URL의 `item` query를 복원할 수 있게 보정했다.
65
+
66
+ - initial item restore를 list loading 이후 한 번 더 시도한다.
67
+ - focus scroll 후 layout/animation 때문에 위치가 틀어지는 케이스를 다시 보정한다.
68
+ - df-sheet처럼 list 응답이 느린 adapter에서 deep link item focus 실패를 줄였다.
69
+
70
+ ### Release Candidate Fixes
71
+
72
+ - QA status/assignee/submit/delete 실패 시 unhandled rejection으로 남기지 않고 toast로 feedback을 표시한다.
73
+ - QA edit 실패는 toast와 edit modal inline error를 함께 유지한다.
74
+ - Figma image target key가 review shell과 dev overlay에서 query/hash를 포함한 normalized target을 사용하도록 보정했다.
75
+ - Sitemap modal에서 페이지 이름/경로를 검색할 수 있고, 일치하는 하위 page의 상위 folder context를 유지한다.
76
+ - Sitemap folder row는 caret으로 접고 펼칠 수 있으며, 검색 중에는 일치 항목의 상위 folder를 자동으로 펼친다.
77
+ - Sitemap folder depth는 세로 guide line으로 보강해 깊은 경로도 한눈에 구분되게 했다.
78
+ - Sitemap body row divider를 제거하고 hover/active block highlight로 행 구분을 처리한다.
79
+ - Sitemap list는 Total 대신 Todo/Review/Hold state count를 직접 보여준다.
80
+
81
+ ## Host 적용 메모
82
+
83
+ ### Lexus dogfood integration
84
+
85
+ - Lexus host에서 df-sheet adapter로 title/assignee/status update flow를 확인했다.
86
+ - df-sheet list loading 동안 empty state 대신 loading state가 뜨는지 확인했다.
87
+ - direct URL item restore가 list load 이후 active item을 잡는지 확인했다.
88
+ - Lexus 배포 전에는 `link:../df-web-review-kit`를 published package version으로 바꿔야 한다.
89
+
90
+ ### Vite plugin
91
+
92
+ Figma image local cache를 쓰는 host는 Vite config에 review-kit plugin helper를 연결해야 한다.
93
+
94
+ - `reviewFigmaImageStore()`는 dev/local cache endpoint를 제공한다.
95
+ - `FIGMA_TOKEN`은 server env로만 둔다.
96
+ - image format 변환이 필요하면 host가 `sharp` 같은 변환기를 plugin option으로 연결한다.
97
+
98
+ ## 문서
99
+
100
+ - README quick start에 `fields`, `assigneeTitle`, `assigneeOptions`, `updateAssignee` 예시를 추가했다.
101
+ - custom adapter sample에 optional title/assignee field와 update flow를 추가했다.
102
+ - QA adapter와 Figma image store boundary 문서를 추가했다.
103
+ - Figma image MVP 구조 note를 추가했다.
104
+
105
+ ## 검증
106
+
107
+ 아래 명령을 확인했다.
108
+
109
+ - `pnpm run typecheck`
110
+ - `pnpm run typecheck:dev`
111
+ - `pnpm run lint:dead-code`
112
+ - `pnpm run build`
113
+ - `pnpm run build:dev`
114
+ - `npm pack --dry-run --json`
115
+
116
+ 수동 확인:
117
+
118
+ - Lexus dogfood review page에서 df-sheet QA list loading state
119
+ - df-sheet QA create form title field
120
+ - QA list item status/assignee pending state
121
+ - direct URL item restore and focus
122
+ - Figma rail/menu icon stroke
123
+
124
+ ## 메모
125
+
126
+ - `package.json` version은 `0.7.0`이다.
127
+ - npm publish 전에는 registry login 상태와 latest published version을 확인해야 한다.
128
+ - Lexus target app의 React SVG prop warning(`fill-rule`, `clip-rule`)은 review-kit package warning이 아니다.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@designfever/web-review-kit",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "type": "module",
5
5
  "description": "Designfever web page review overlay toolkit.",
6
6
  "license": "Apache-2.0",
@@ -41,13 +41,15 @@
41
41
  "files": [
42
42
  "dist",
43
43
  "docs",
44
- "README.md"
44
+ "README.md",
45
+ ".env.sample"
45
46
  ],
46
47
  "scripts": {
47
48
  "build": "tsup src/index.ts src/react-shell.tsx src/vite.ts --format esm,cjs --dts --sourcemap --clean --external react --external react-dom --external react/jsx-runtime",
48
49
  "dev": "tsup src/index.ts src/react-shell.tsx src/vite.ts --format esm,cjs --dts --sourcemap --watch --external react --external react-dom --external react/jsx-runtime",
49
50
  "dev:review": "vite --config dev/vite.config.ts",
50
51
  "build:dev": "vite build --config dev/vite.config.ts",
52
+ "lint:dead-code": "knip",
51
53
  "prepare": "pnpm build",
52
54
  "typecheck": "tsc --noEmit",
53
55
  "typecheck:dev": "tsc --noEmit -p tsconfig.dev.json"
@@ -64,8 +66,10 @@
64
66
  },
65
67
  "devDependencies": {
66
68
  "@supabase/supabase-js": "^2.108.2",
69
+ "@types/node": "^26.0.1",
67
70
  "@types/react": "^19.2.17",
68
71
  "@types/react-dom": "^19.2.3",
72
+ "knip": "^6.20.0",
69
73
  "lucide-react": "^1.20.0",
70
74
  "react": "^19.2.7",
71
75
  "react-dom": "^19.2.7",