@designfever/web-review-kit 0.4.1 → 0.5.0

package/README.md

@@ -92,12 +92,15 @@ Browser env must use a Supabase `anon` key only. Do not put `service_role` or Op
 ```ts
 import { createWebReviewKit, localAdapter } from '@designfever/web-review-kit';
 import { mountReviewShell } from '@designfever/web-review-kit/react-shell';
-import { reviewSourceLocator } from '@designfever/web-review-kit/vite';
+import {
+  reviewDataLocator,
+  reviewSourceLocator,
+} from '@designfever/web-review-kit/vite';
 ```
 
 - `@designfever/web-review-kit`: core API, adapters, shared types.
 - `@designfever/web-review-kit/react-shell`: review shell UI, presence adapters, page glob helper.
-- `@designfever/web-review-kit/vite`: dev-only JSX source locator for source file hints.
+- `@designfever/web-review-kit/vite`: dev-only source/data locators for review hints.
 - `src/*` is not a public import path.
 
 ## Optional Source Locator
@@ -106,7 +109,10 @@ For local QA, add the Vite plugin to inject source hints into rendered DOM nodes
 
 ```ts
 import { defineConfig } from 'vite';
-import { reviewSourceLocator } from '@designfever/web-review-kit/vite';
+import {
+  reviewDataLocator,
+  reviewSourceLocator,
+} from '@designfever/web-review-kit/vite';
 
 export default defineConfig({
   plugins: [
@@ -115,11 +121,16 @@ export default defineConfig({
       include: ['src'],
       filePath: 'absolute',
     }),
+    reviewDataLocator({
+      enabled: true,
+      include: ['src/data'],
+      filePath: 'absolute',
+    }),
   ],
 });
 ```
 
-When source hints are available, hold `Option` over the review target to inspect source candidates from the DOM ancestry. Click the target to pin the candidate list, then choose a file to open. DOM QA cards also show a source action when the saved item has source hints. Keep this plugin disabled for production builds because it writes source paths into the DOM.
+When source hints are available, hold `Option` over the review target to inspect source candidates from the DOM ancestry. Click the target to pin the candidate list, then choose a file to open. The side rail can also open a Source Tree panel with section/source/data links. DOM QA cards show a source action when the saved item has source hints. Keep these plugins disabled for production builds because they write source paths into the DOM.
 
 ```tsx
 mountReviewShell({
@@ -129,6 +140,10 @@ mountReviewShell({
   sourceRoot: import.meta.env.VITE_REVIEW_SOURCE_ROOT,
   sourceInspector: {
     editor: 'cursor', // 'vscode' | 'cursor' | 'webstorm' | 'custom'
+    maxDepth: 9,
+    hoverOutline: true,
+    includePlacer: false,
+    ignore: ['core.section', 'control.render'],
     // urlTemplate: 'my-editor://open?file={encodedPath}&line={line}&column={column}',
   },
 });

package/dist/{chunk-6L2KJ7XL.js → chunk-TWCSIBMY.js}

@@ -400,6 +400,20 @@ function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", enviro
     source: getDomSourceHint(target)
   };
 }
+function getDomAnchorFromElement(target, configuredAttribute = "data-qa-id", environment) {
+  if (target.ownerDocument !== environment.document) return void 0;
+  const candidates = createAnchorCandidates(target, configuredAttribute);
+  const primary = candidates[0];
+  if (!primary) return void 0;
+  return {
+    ...primary,
+    candidates,
+    htmlSnippet: getElementHtmlSnippet(
+      getAnchorSourceElement(target, primary, configuredAttribute) ?? target
+    ),
+    source: getDomSourceHint(target)
+  };
+}
 function getElementViewportSelection(anchor, environment, preferredSelection) {
   const element = getAnchorElement(anchor, environment, preferredSelection);
   if (!element) return void 0;
@@ -1836,6 +1850,12 @@ function createStyleElement() {
       outline-offset: 1px;
     }
 
+    @media (hover: none) and (pointer: coarse) {
+      .dfwr-textarea {
+        font-size: 16px;
+      }
+    }
+
     .dfwr-adjust-panel {
       display: grid;
       gap: 4px;
@@ -3542,6 +3562,7 @@ function createWebReviewKit(options) {
     close: () => app.close(),
     toggle: () => app.toggle(),
     setMode: (mode) => app.setMode(mode),
+    startElementReview: (element, comment) => app.startElementReview(element, comment),
     getMode: () => app.getMode(),
     highlightItem: (itemId) => app.highlightItem(itemId),
     setHiddenItemIds: (itemIds) => app.setHiddenItemIds(itemIds),
@@ -3672,6 +3693,16 @@ var WebReviewKitApp = class {
     this.areaDraft = void 0;
     this.render();
   }
+  async startElementReview(element, comment) {
+    if (!this.isOpen) {
+      this.isOpen = true;
+    }
+    this.setModeState("element");
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    this.isSelectingArea = false;
+    await this.bindElementDraftToElement(element, comment);
+  }
   getMode() {
     return this.mode;
   }
@@ -3880,6 +3911,47 @@ var WebReviewKitApp = class {
     this.noteDraft = draft;
     this.render();
   }
+  async bindElementDraftToElement(element, comment) {
+    const environment = this.getEnvironment();
+    if (!environment || element.ownerDocument !== environment.document) return;
+    const viewport = getViewportSize(environment);
+    const draft = await this.withOverlayHidden(() => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return void 0;
+      const selection = {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height
+      };
+      const anchor = getDomAnchorFromElement(
+        element,
+        this.options.anchors?.attribute,
+        environment
+      );
+      const markerPoint = { x: selection.left, y: selection.top };
+      const marker = {
+        viewport: roundPoint(markerPoint),
+        relative: anchor ? getRelativePoint(markerPoint, anchor, environment) : void 0
+      };
+      const reviewSelection = {
+        viewport: toPublicSelection(selection),
+        relative: anchor ? getRelativeSelection(selection, anchor, environment) : void 0
+      };
+      const previewElement = "style" in element ? element : void 0;
+      return {
+        viewport,
+        anchor,
+        marker,
+        selection: reviewSelection,
+        comment,
+        previewElement
+      };
+    });
+    if (!draft) return;
+    this.noteDraft = draft;
+    this.render();
+  }
   async createAreaDraft(selection) {
     const environment = this.getEnvironment();
     if (!environment) return;
@@ -3984,6 +4056,8 @@ function createNoopController() {
     },
     setMode() {
     },
+    async startElementReview() {
+    },
     getMode() {
       return "idle";
     },
@@ -4006,12 +4080,14 @@ export {
   REVIEW_WORKFLOW_STATUS_OPTIONS,
   normalizeReviewItemStatus,
   localAdapter,
+  clamp,
   DEFAULT_REVIEW_VIEWPORTS,
   findReviewViewportPreset,
   getReviewViewportScope,
   getReviewItemScope,
   getReviewItemScopeLabel,
   getNumberedReviewItems,
+  runWithAutoScrollBehavior,
   createWebReviewKit
 };
-//# sourceMappingURL=chunk-6L2KJ7XL.js.map
+//# sourceMappingURL=chunk-TWCSIBMY.js.map