@designfever/web-review-kit 0.1.0 → 0.2.0

package/docs/initial-plan.md

@@ -1,226 +0,0 @@
-# df-web-review-kit 초기 정리
-
-## 결정된 방향
-
-- Repository: `Designfever/df-web-review-kit`
-- NPM package: `@designfever/web-review-kit`
-- 목적: QA 전용 도구가 아니라 웹 페이지 위에 얹는 검수용 toolkit.
-- 1차 대상: Lexus, KIA, Toyota 같은 웹 프로젝트.
-- 설치 방식: 각 프로젝트에 npm package로 설치하고, 프로젝트별 설정만 넣는다.
-- 단축키: 기본은 `Shift + Q`로 QA mode 진입.
-- Chrome extension은 1차 대상이 아니다. 소스 접근 없는 사이트까지 다뤄야 할 때 adapter/wrapper로 나중에 검토한다.
-
-## 큰 구조
-
-패키지는 core와 module, adapter로 나눈다.
-
-- Core
-  - overlay root 생성
-  - keyboard shortcut 관리
-  - panel/modal/layer 공통 UI
-  - 현재 URL/viewport/scroll 상태 수집
-  - module lifecycle 관리
-- QA module
-  - 현재 페이지 기준 QA list 표시
-  - text-only QA 등록
-  - 화면 영역 드래그 캡처 QA 등록
-  - DOM anchor 계산
-- Grid module
-  - 기존 grid helper를 나중에 module로 이관
-  - 1차 MVP에는 인터페이스만 열어둔다
-- Figma module
-  - Figma overlay helper를 나중에 module로 이관
-  - 1차 MVP에는 인터페이스만 열어둔다
-- Adapter
-  - 저장소/외부 서비스 연동만 담당
-  - core와 QA module은 df-sheet, GitHub, localStorage 같은 저장소를 직접 알지 않는다
-
-## Adapter로 뺀다는 뜻
-
-Core는 "무엇을 수집하고 어떤 UI를 보여줄지"만 담당한다.
-Adapter는 "수집한 QA item을 어디에 저장하고 어떻게 읽어올지"만 담당한다.
-
-예시:
-
-- Lexus: `dfSheetAdapter`
-- 초기 개발/검증: `localAdapter`
-- 미래 확장: `githubIssueAdapter`, `jsonFileAdapter` 등
-
-이렇게 분리하면 df-sheet 연동 방식이 바뀌어도 overlay core를 건드리지 않아도 된다.
-
-## 1차 MVP
-
-우선 df-sheet 연동 없이 local adapter로 기능을 검증한다.
-
-1. npm package scaffold
-2. target project에서 초기화 가능한 API
-3. `Shift + Q`로 QA mode toggle
-4. 현재 URL 기준 QA list 표시
-5. text-only QA 생성
-6. drag capture QA 생성
-7. DOM anchor + relative coordinate 저장
-8. local adapter 저장/조회/삭제
-
-1차에서 Figma overlay와 grid helper를 완성하려고 하지 않는다.
-다만 나중에 붙일 수 있게 module 구조는 처음부터 열어둔다.
-
-## Local adapter 저장 방식
-
-이름은 local adapter지만 실제 저장은 둘로 나눈다.
-
-- Metadata: `localStorage`
-- Screenshot/blob: `IndexedDB`
-
-이유:
-
-- `localStorage`에 screenshot data URL을 계속 넣으면 용량이 빨리 찬다.
-- IndexedDB는 이미지 blob 저장에 더 적합하다.
-
-## QA item 기본 데이터
-
-```ts
-type ReviewItem = {
-  id: string;
-  projectId: string;
-  pageUrl: string;
-  normalizedPath: string;
-  kind: "text" | "capture";
-  title?: string;
-  comment: string;
-  status: "open" | "resolved";
-  viewport: {
-    width: number;
-    height: number;
-  };
-  scroll?: {
-    x: number;
-    y: number;
-  };
-  anchor?: DomAnchor;
-  selection?: RelativeSelection;
-  screenshotAssetId?: string;
-  externalIssueId?: string;
-  createdAt: string;
-  updatedAt: string;
-};
-```
-
-## DOM anchor 전략
-
-단순 viewport 좌표만 저장하면 반응형 화면에서 위치가 틀어진다.
-따라서 선택 영역과 가장 가까운 DOM element를 anchor로 잡고, 그 element 기준 상대 좌표를 저장한다.
-
-Anchor 우선순위:
-
-1. `data-qa-id` 또는 package 설정으로 지정한 attribute
-2. `id`가 안정적인 element
-3. 의미 있는 class/name/role 기반 selector
-4. 텍스트 fingerprint
-5. DOM path fallback
-
-Relative coordinate 예시:
-
-```ts
-type RelativeSelection = {
-  x: number; // (selection.left - anchor.left) / anchor.width
-  y: number; // (selection.top - anchor.top) / anchor.height
-  width: number; // selection.width / anchor.width
-  height: number; // selection.height / anchor.height
-};
-```
-
-나중에 다시 표시할 때는 현재 anchor rect를 찾고 위 비율로 위치를 복원한다.
-
-## QA 생성 흐름
-
-Text-only:
-
-1. 사용자가 QA mode에서 text 등록 선택
-2. 현재 URL, viewport width/height 저장
-3. 사용자가 comment 입력
-4. adapter에 저장
-
-Capture:
-
-1. 사용자가 capture 선택
-2. 깨진 영역을 drag로 선택
-3. 선택 영역 screenshot 생성
-4. 선택 영역과 가장 가까운 DOM anchor 계산
-5. anchor 기준 relative coordinate 저장
-6. comment 입력
-7. adapter에 저장
-
-Screenshot 구현은 처음에는 `html2canvas` 계열로 시작할 수 있다.
-단, cross-origin image/video/canvas는 깨질 수 있으니 정확도가 중요해지면 browser extension 또는 native capture 방식도 검토한다.
-
-## df-sheet 연동 방향
-
-df-sheet adapter는 QA item을 df-sheet issue로 매핑한다.
-
-- 생성: QA item 생성 시 df-sheet issue 생성
-- 조회: 현재 URL에 해당하는 unresolved issue만 QA list에 표시
-- 해결: df-sheet issue status가 `done`이면 QA list에서 제외
-- 첨부: capture screenshot은 issue attachment로 등록
-- Metadata: page URL, viewport, anchor, selection 정보를 issue에 저장
-
-df-sheet에 dedicated metadata field가 없으면 1차는 description이나 hidden JSON block으로 저장할 수 있다.
-다만 장기적으로는 issue metadata field를 추가하는 편이 낫다.
-
-## 예상 초기화 API
-
-```ts
-import { createWebReviewKit, localAdapter } from "@designfever/web-review-kit";
-
-createWebReviewKit({
-  projectId: "lexus-renewal",
-  adapter: localAdapter({
-    storageKey: "lexus-review-items",
-  }),
-  hotkeys: {
-    qa: "Shift+Q",
-  },
-  anchors: {
-    attribute: "data-qa-id",
-  },
-  modules: {
-    qa: true,
-    grid: false,
-    figma: false,
-  },
-});
-```
-
-## 나중에 붙일 모듈
-
-Grid helper:
-
-- breakpoint/grid overlay
-- column/gutter 표시
-- 프로젝트별 grid preset
-
-Figma helper:
-
-- Figma screenshot 또는 frame overlay
-- opacity/blend mode 조절
-- viewport별 기준 이미지 전환
-
-둘 다 core overlay와 단축키/패널 시스템은 공유하되, QA 저장소와는 강하게 묶지 않는다.
-
-## 열어둔 질문
-
-- package 배포를 public npm으로 할지 private npm으로 할지
-- target project가 Next/Vite/vanilla를 모두 포함하는지
-- React dependency를 peer로 둘지, framework-agnostic DOM package로 갈지
-- df-sheet 인증은 cookie 기반인지 token 기반인지
-- df-sheet에 QA metadata 전용 field를 추가할지
-- target site에 `data-qa-id`를 어느 정도 심을지
-- screenshot 정확도를 어디까지 요구할지
-
-## 다음 세션에서 할 일
-
-1. package scaffold 선택: Vite library, tsup, or rollup
-2. core API 타입 먼저 작성
-3. local adapter 인터페이스 작성
-4. QA overlay 최소 UI 구현
-5. Lexus/KIA/Toyota 중 하나에 playground로 붙여 검증
-

package/docs/package-split-checkpoint.md

@@ -1,79 +0,0 @@
-# Package split checkpoint
-
-Date: 2026-06-20
-Branch: `uforgot/feat/review-kit-stabilize-ui`
-
-## Goal
-
-Prepare `packages/df-web-review-kit` to behave like an independent package before moving Figma overlay or editing proposal work into it.
-
-This checkpoint is not the actual repo split and does not publish the package.
-
-## Public entrypoints
-
-Only these imports are public:
-
-```ts
-import { createWebReviewKit, localAdapter } from '@designfever/web-review-kit';
-import { mountReviewShell } from '@designfever/web-review-kit/react-shell';
-```
-
-The package export map exposes:
-
-- `.` → core API, adapters, shared types.
-- `./react-shell` → review shell UI, presence adapters, page glob helper.
-- `./package.json` → package metadata for tooling.
-
-`src/*` paths are not public API.
-
-## Publish/file policy
-
-`package.json#files` intentionally includes only:
-
-- `dist`
-- `docs`
-- `README.md`
-
-`src` is kept in the repo for development but excluded from the package file list so consumers rely on the exported API and generated declarations.
-
-## Dependency policy
-
-- `react` and `react-dom` stay peer dependencies.
-- `lucide-react` stays bundled into the built `react-shell` output for now. It is a dev/build dependency, not a host peer dependency.
-- Figma token/API/fetch logic must not enter package core in this branch.
-
-## Host consumption policy
-
-The Lexus host imports the package through the same public package entrypoints it would use after a repo split:
-
-- `@designfever/web-review-kit`
-- `@designfever/web-review-kit/react-shell`
-
-Vite no longer aliases those package imports to `packages/df-web-review-kit/src` in dev. The host resolves the installed file dependency under `node_modules`, so `pnpm review-kit:build` must be run after package source changes to refresh `dist` and sync the installed package.
-
-## Review/test page policy
-
-The Lexus `/review` page remains the integration smoke page. It is a consumer of the package, not part of the package surface.
-
-If this package is moved to a separate repo later, keep a small playground/example app outside the package publish files so review-shell behavior can still be manually verified.
-
-## Verification gate
-
-Before moving this item to review, run:
-
-```bash
-pnpm review-kit:typecheck
-pnpm review-kit:build
-pnpm exec tsc --noEmit
-pnpm exec vite build --mode seo
-pnpm --dir packages/df-web-review-kit pack --pack-destination /tmp/df-web-review-kit-pack
-```
-
-Manual smoke:
-
-- Open `/review`.
-- Confirm empty QA state.
-- Inject or create a local QA item.
-- Confirm card and prompt modal still render.
-- Confirm settings and sitemap modals still open.
-- Confirm browser console has no errors/warnings.

package/docs/presence-handoff.md

@@ -1,138 +0,0 @@
-# review-kit presence handoff
-
-## 목적
-
-QA 작업 중 "누가 어떤 review page를 보고 있는지"를 보여주기 위한 presence 기능 handoff 문서다.
-
-Presence는 저장소가 아니다. `local`, `df-sheet`, `supabase` 같은 review item adapter는 영속 데이터 CRUD를 맡고, presence adapter는 현재 접속 세션 상태만 공유한다.
-
-## 현재 구현
-
-추가된 파일:
-
-- `src/react-shell/presence.ts`
-- `src/react-shell/types.ts`
-- `src/react-shell.tsx`
-- Lexus mount: `page/review/index.tsx`
-
-현재 `page/review/index.tsx`는 local 개발용 presence adapter를 붙인다.
-
-```ts
-import { createLocalPresenceAdapter } from '@designfever/web-review-kit/react-shell';
-
-const REVIEW_PRESENCE_ADAPTER = createLocalPresenceAdapter({
-  channelName: `${REVIEW_PROJECT_ID}:review-presence`,
-});
-
-mountReviewShell({
-  projectId: REVIEW_PROJECT_ID,
-  pages,
-  adapters: REVIEW_ADAPTERS,
-  presence: REVIEW_PRESENCE_ADAPTER,
-});
-```
-
-현재 Lexus pilot은 `VITE_REVIEW_SUPABASE_ANON_KEY`가 있으면 Supabase Presence를 쓰고, 없으면 `createLocalPresenceAdapter()`로 fallback한다.
-
-`createLocalPresenceAdapter()`는 `BroadcastChannel` 기반이다. 같은 origin의 여러 review 탭에서만 동작한다. 실제 팀 공유용 구현은 Supabase adapter를 사용한다.
-
-```env
-VITE_REVIEW_SUPABASE_URL=https://vhqnvfkamnpgyqclohso.supabase.co
-VITE_REVIEW_SUPABASE_ANON_KEY=
-VITE_REVIEW_SUPABASE_PRESENCE_PRIVATE=false
-```
-
-## Public contract
-
-```ts
-type ReviewPresenceAdapter = {
-  label: string;
-  connect: (
-    context: ReviewPresenceContext
-  ) => Promise<ReviewPresenceSession> | ReviewPresenceSession;
-};
-
-type ReviewPresenceSession = {
-  update: (state: Partial<ReviewPresenceState>) => void | Promise<void>;
-  subscribe: (
-    callback: (users: ReviewPresenceUser[]) => void
-  ) => () => void;
-  disconnect: () => void | Promise<void>;
-};
-```
-
-`ReviewPresenceState`는 현재 이 shape을 사용한다.
-
-```ts
-type ReviewPresenceState = {
-  projectId: string;
-  sessionId: string;
-  userId: string;
-  displayName: string;
-  color: string;
-  routeKey: string;
-  target: string;
-  source: 'local' | 'df-sheet';
-  viewport: {
-    label: string;
-    width: number;
-    height: number;
-    kind: 'mobile' | 'tablet' | 'desktop' | 'wide';
-  };
-  mode: 'idle' | 'note' | 'element' | 'area';
-  selectedItemId?: string | null;
-  selectedReviewNumber?: number | null;
-  status: 'idle' | 'reviewing' | 'editing';
-  updatedAt: string;
-};
-```
-
-## Shell behavior
-
-- Settings의 `User ID`가 비어 있으면 presence는 연결하지 않는다.
-- `User ID`가 있으면 우측 QA list header 아래에 `online N`과 user chip을 보여준다.
-- user chip에는 `displayName`, `target`, `viewport.label`을 표시한다.
-- 현재 탭은 `is-self` class로 표시된다.
-- 업데이트는 느린 상태만 보낸다:
-  - route/target
-  - source
-  - viewport
-  - review mode
-  - selected item/review number
-  - status
-- scroll, mousemove, cursor 위치는 보내지 않는다.
-
-## 왜 storage adapter와 분리했나
-
-storage adapter:
-
-- `get`
-- `list`
-- `create`
-- `updateStatus`
-- `remove`
-- remote promote/move
-
-presence adapter:
-
-- `connect`
-- `update`
-- `subscribe`
-- `disconnect`
-
-수명주기가 다르다. storage는 item의 영속 상태이고, presence는 websocket session 상태다. 같은 adapter array에 넣으면 API가 어색해지고, remote item source를 바꾸는 일과 협업 session을 바꾸는 일이 섞인다.
-
-## 다음 작업
-
-1. `supabasePresenceAdapter` 추가
-2. `@supabase/supabase-js`를 peer/dev dependency로 둘지 별도 package adapter로 분리할지 결정
-3. Supabase project/env 연결
-4. private channel + Realtime Authorization 적용
-5. 두 브라우저 또는 두 기기에서 같은 project presence 확인
-
-## 주의점
-
-- Presence payload는 작게 유지한다.
-- high-frequency state는 Presence에 넣지 않는다.
-- 현재 `ReviewSource`가 `'local' | 'df-sheet'`로 고정되어 있어서 source generalization 작업과 Supabase storage adapter 작업이 만나면 타입을 먼저 풀어야 한다.
-- `User ID`는 현재 localStorage 기반이다. 실제 remote presence에서는 auth user id나 project member id로 바꾸는 편이 맞다.

package/docs/review-feedback-2026-06-20.md

@@ -1,267 +0,0 @@
-# Review feedback 2026-06-20
-
-`packages/df-web-review-kit`를 독립 package로 분리하기 전에 확인할 리뷰 메모다.
-
-검토자:
-
-- 빵빵: package source와 host wiring typecheck 확인
-- 팡팡: 기능 버그와 adapter edge case 리뷰
-- 오빵: package 경계, 구조, concept 방향 리뷰
-
-## 결론
-
-컨셉은 유지할 만하다. 차별점은 browser extension이나 외부 SaaS가 아니라 host project 안에 `/review` shell을 심어서 route, viewport, DOM anchor, style context를 그대로 쓰는 점이다.
-
-다만 0.1 안정성은 `anchor restore` 신뢰도에 걸려 있다. DOM anchor가 흔들리면 이 package는 좌표 메모장 수준으로 내려간다.
-
-## High priority
-
-### 1. DOM anchor restore 조건 수정
-
-파일:
-
-```txt
-src/react-shell/anchor-restore.ts
-```
-
-현재 문제:
-
-```ts
-if (!anchor || item.scope !== 'dom') return undefined;
-```
-
-element mode로 만든 item은 `anchor`와 `selection`을 가지지만, `scope`는 `mobile`, `tablet`, `desktop`, `wide` 같은 viewport preset으로 저장된다. 그래서 restore 시 anchor 기반 scroll 복원이 early return으로 막힐 수 있다.
-
-판정 기준은 shell의 `isDomReviewItem`과 맞춰야 한다.
-
-권장 방향:
-
-```ts
-const isAnchorRestorable =
-  item.scope === 'dom' ||
-  (item.kind === 'note' && Boolean(item.anchor && item.selection));
-
-if (!anchor || !isAnchorRestorable) return undefined;
-```
-
-검증:
-
-- element mode로 QA 생성
-- scroll 이동 후 item 클릭
-- 원래 DOM element 기준으로 scroll restore 되는지 확인
-- viewport를 바꿔도 selector candidate가 같은 element를 찾는지 확인
-
-### 2. Supabase review number fallback 정책 정리
-
-파일:
-
-```txt
-src/adapters/supabase.ts
-```
-
-현재 fallback:
-
-```ts
-const reviewNumber = await getNextReviewNumber(...);
-await fromTable().insert(row).select('*').single();
-```
-
-`SELECT max(review_number)`와 `INSERT` 사이에 gap이 있어서 동시 생성 시 unique conflict가 날 수 있다. retry는 있지만 fallback 이름이 `unsafeClientReviewNumberFallback`이라 운영 경로가 아니란 뜻은 전달된다.
-
-권장 방향:
-
-- default는 지금처럼 RPC 유지
-- client fallback은 문서상 dev/test only로 못 박기
-- 이름은 유지해도 되지만, "optimistic retry fallback" 성격을 docs에 명시
-- package 외부 공개 시 fallback option을 숨기거나 experimental로 내리기
-
-검증:
-
-- concurrent create 2개 이상이 서로 다른 remote `reviewNumber`를 받는지 확인
-- 삭제 후 다음 번호가 재사용되지 않는지 확인
-
-### 3. Shell adapter update 분기 단순화
-
-파일:
-
-```txt
-src/react-shell/adapters.ts
-```
-
-현재 문제:
-
-- `patch.status`가 있고 `updateStatus`가 있으면 status 전용 path를 탄다.
-- `updateStatus`가 없으면 `syncSubmission`으로 generic patch를 보내는 구조다.
-- status patch와 submission patch가 같은 `update` method 안에서 섞여 있어, adapter capability가 늘어날수록 디버깅이 어려워진다.
-
-권장 방향:
-
-- shell UI에서 status 변경은 `activeAdapterEntry.updateStatus`만 직접 호출한다.
-- `adapter.update` wrapper는 submission sync 같은 generic patch만 담당한다.
-- remote adapter가 generic update를 지원해야 하면 `syncSubmission`보다 `updateItem` 같은 명시적 이름을 검토한다.
-
-검증:
-
-- local status dropdown 변경
-- remote status dropdown 변경
-- local item remote 등록 실패 후 `submitStatus: failed` 저장
-
-### 4. Submit success 후 UI refresh 흐름 확인
-
-파일:
-
-```txt
-src/react-shell.tsx
-```
-
-현재 flow:
-
-```ts
-await remoteAdapterEntry.adapter.create(...);
-await localAdapterEntry.adapter.remove(item.id);
-await refreshReviewData();
-```
-
-성공 후 local draft를 바로 삭제하므로, remote list 반영 타이밍이 늦으면 UI에서 item이 잠깐 사라질 수 있다.
-
-권장 방향:
-
-- `remote.create`의 반환 item을 받아서 remote source로 즉시 이동하거나
-- 성공 직후 selected item을 clear하면서 "remote 등록됨" state를 명확히 보여주거나
-- refresh 순서를 local remove와 분리해 깜빡임을 줄인다.
-
-검증:
-
-- local item 생성
-- remote 등록 클릭
-- 등록 직후 list/sitemap count가 어색하게 튀지 않는지 확인
-- network delay가 있을 때도 local item이 실패/성공 상태를 분명히 보여주는지 확인
-
-## Medium priority
-
-### 5. `getItemSelection` normalize 책임 정리
-
-파일:
-
-```txt
-src/core/web-review-kit-app.ts
-```
-
-현재는 legacy `RelativeSelection`과 현재 `ReviewSelection`을 core에서 즉석 판정한다. local adapter에도 migration/normalize가 있어 책임이 분산돼 있다.
-
-권장 방향:
-
-- `normalizeReviewSelection(value)` helper를 core 또는 shared module로 분리
-- adapter migration과 render/restore path가 같은 helper를 쓰게 정리
-
-### 6. Local presence fallback 문서화
-
-파일:
-
-```txt
-src/react-shell/presence.ts
-```
-
-`BroadcastChannel`이 없으면 local presence는 현재 tab 내부 상태만 가진다. 이건 큰 버그는 아니지만, fallback 동작으로 문서화해야 한다.
-
-권장 문구:
-
-- `BroadcastChannel` available: same-origin tab/window 간 공유
-- unavailable: current tab only
-- Supabase presence 실패 시 local fallback으로 degrade
-
-## Package split
-
-현재 package 경계는 나쁘지 않다.
-
-- host hardcoding은 거의 없다.
-- `core/adapters`는 React에 의존하지 않는다.
-- Supabase adapter는 `@supabase/supabase-js`를 직접 import하지 않고 client interface를 주입받는다.
-- host project wiring은 `/review` route에서만 담당한다.
-
-분리 전 체크:
-
-- `private: true` 제거 여부 결정
-- package name/scope 확정
-- `files`에 `src`, `dist`, `docs`를 모두 넣을지 결정
-- `react`, `react-dom`은 peerDependency 유지
-- `lucide-react`는 peer로 둘지 bundle할지 결정
-- export map에서 `.`와 `./react-shell` 유지
-- root project에서 `pnpm install --frozen-lockfile --ignore-scripts` 후 typecheck 통과 확인
-
-확인된 사항:
-
-```txt
-pnpm --dir packages/df-web-review-kit typecheck
-pnpm exec tsc --noEmit
-```
-
-둘 다 통과한다. 단, pull 직후 stale `node_modules` 상태에서는 새 export를 못 볼 수 있으므로 install이 필요했다.
-
-## Structure debt
-
-독립 package로 공개하기 전에 가장 큰 구조 문제는 파일 크기다.
-
-- `src/react-shell.tsx`: shell UI가 한 파일에 몰려 있다.
-- `src/core/web-review-kit-app.ts`: overlay core가 한 파일에 크다.
-- `src/react-shell/style.ts`: CSS string이 크다.
-- `src/core/overlay-style.ts`: overlay CSS string이 크다.
-
-우선 분리 후보:
-
-- `react-shell/Topbar`
-- `react-shell/SitemapModal`
-- `react-shell/SettingsModal`
-- `react-shell/PromptModal`
-- `react-shell/ItemList`
-- `react-shell/ViewportStage`
-- `react-shell/RulerOverlay`
-
-목표는 추상화가 아니라 리뷰 가능한 단위로 쪼개는 것이다.
-
-## Product direction
-
-### 0.1 focus
-
-0.1은 "QA issue capture and restore"에 집중한다.
-
-필수:
-
-- local draft 생성
-- remote source 등록
-- canonical remote number
-- page/viewport/source deep link
-- DOM anchor restore
-- prompt copy
-
-보류 또는 optional:
-
-- screenshot upload
-- full collaboration presence
-- source code edit automation
-
-Presence는 있으면 좋지만, 0.1의 핵심 가치는 아니다. anchor restore 안정화가 우선이다.
-
-### Visual editing idea
-
-마진, 폰트, spacing 같은 값을 review shell에서 임시 조정하고 저장하는 방향은 가능하다. 다만 이건 두 층으로 나눠야 한다.
-
-1층: override and proposal
-
-- 브라우저에서 element style을 임시 조정한다.
-- 저장하면 review item에 before/after value가 구조화 데이터로 붙는다.
-- AI 없이도 review-kit scope 안에서 자연스럽다.
-
-2층: source patch suggestion
-
-- 실제 source 수정은 별도 AI/codegen adapter가 맡는다.
-- review-kit은 `anchor`, `DOM path`, `source hint`, `before/after`를 넘긴다.
-- AI는 "어느 컴포넌트의 어느 token/style을 바꿀지" diff나 PR 제안을 만든다.
-- 사람이 확인하고 merge한다.
-
-중요한 경계:
-
-- review-kit core는 "제안 생산"까지 담당한다.
-- 실제 source 반영은 package core 밖 adapter 또는 별도 package로 둔다.
-
-이 경계를 지키면 review-kit이 issue editor나 visual builder로 비대해지는 걸 막을 수 있다.