@immense/vue-pom-generator 1.0.66 → 1.0.67

package/plugin/runtime/annotator/format.ts

@@ -0,0 +1,76 @@
+export type OutputDetail = "standard" | "forensic";
+
+export interface FormattedAnnotation {
+  comment: string;
+  targetLabel: string;
+  source?: string;
+  component?: string;
+  uiText?: string;
+  locator?: string;
+  domHint?: string;
+}
+
+function normalizeInlineText(value: string | undefined): string | undefined {
+  const normalized = value?.replace(/\s+/g, " ").trim();
+  return normalized || undefined;
+}
+
+export function formatAnnotations(
+  annotations: FormattedAnnotation[],
+  detail: OutputDetail,
+  pageUrl: string,
+): string {
+  const shortUrl = pageUrl.replace(/^https?:\/\//, "");
+  const lines: string[] = [];
+
+  lines.push(`## Feedback — ${shortUrl}`);
+  lines.push(`- **URL:** ${pageUrl}`);
+  if (detail === "forensic" && typeof window !== "undefined") {
+    lines.push(`- **Viewport:** ${window.innerWidth}x${window.innerHeight}`);
+  }
+  lines.push("");
+
+  for (let i = 0; i < annotations.length; i += 1) {
+    const annotation = annotations[i]!;
+    const title = normalizeInlineText(annotation.comment) || annotation.targetLabel;
+    lines.push(`### ${i + 1}. ${title}`);
+    lines.push(`- **Source:** ${annotation.source || "Unable to find component file path."}`);
+
+    if (annotation.component) {
+      lines.push(`- **Component:** ${annotation.component}`);
+    }
+
+    lines.push(`- **Target:** \`${annotation.targetLabel}\``);
+
+    const uiText = normalizeInlineText(annotation.uiText);
+    if (uiText) {
+      lines.push(`- **UI text:** \`${uiText}\``);
+    }
+
+    const locator = normalizeInlineText(annotation.locator);
+    if (locator) {
+      lines.push(`- **Locator:** ${locator}`);
+    }
+
+    if (detail === "forensic") {
+      const domHint = normalizeInlineText(annotation.domHint);
+      if (domHint) {
+        lines.push(`- **DOM hint:** \`${domHint}\``);
+      }
+    }
+
+    lines.push("");
+  }
+
+  return lines.join("\n");
+}
+
+export function formatSingleAnnotationPreview(
+  annotation: FormattedAnnotation,
+  detail: OutputDetail,
+  pageUrl: string,
+): string {
+  const formatted = formatAnnotations([annotation], detail, pageUrl);
+  const headingIndex = formatted.indexOf("### 1.");
+  return headingIndex >= 0 ? formatted.slice(headingIndex).trim() : formatted.trim();
+}

package/plugin/runtime/annotator/plugin.ts

@@ -0,0 +1,109 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import type { HtmlTagDescriptor, Plugin } from "vite";
+
+import type { OutputDetail } from "./format";
+
+export interface ResolvedAnnotatorUiOptions {
+  enabled: boolean;
+  sourceAttribute: string;
+  metadataAttributePrefix: string;
+  outputDetail: OutputDetail;
+  copyToClipboard: boolean;
+  showComponentTree: boolean;
+}
+
+const ANNOTATOR_CLIENT_VIRTUAL_ID = "virtual:vue-pom-generator/annotator-client";
+const ANNOTATOR_CLIENT_RESOLVED_ID = `\0${ANNOTATOR_CLIENT_VIRTUAL_ID}`;
+const DEFAULT_ENTRY_SUFFIXES = [
+  "/src/main.ts",
+  "/src/main.js",
+  "/src/main.mts",
+  "/src/main.tsx",
+  "/src/main.jsx",
+];
+
+function toFsImportPath(filePath: string): string {
+  return `/@fs/${filePath.replace(/\\/g, "/")}`;
+}
+
+function resolveAnnotatorClientPath(): string {
+  const candidates = [
+    fileURLToPath(new URL("./client.ts", import.meta.url)),
+    fileURLToPath(new URL("../plugin/runtime/annotator/client.ts", import.meta.url)),
+  ];
+
+  const resolved = candidates.find(candidate => fs.existsSync(candidate));
+  if (!resolved) {
+    throw new Error("[vue-pom-generator] Unable to locate annotator client source.");
+  }
+  return path.resolve(resolved);
+}
+
+export function createAnnotatorUiPlugin(options: ResolvedAnnotatorUiOptions): Plugin {
+  const clientPath = resolveAnnotatorClientPath();
+  const clientImportPath = toFsImportPath(clientPath);
+  const clientOptions = JSON.stringify({
+    sourceAttribute: options.sourceAttribute,
+    metadataAttributePrefix: options.metadataAttributePrefix,
+    outputDetail: options.outputDetail,
+    copyToClipboard: options.copyToClipboard,
+    showComponentTree: options.showComponentTree,
+  });
+
+  return {
+    name: "vue-pom-generator:annotator-ui",
+    apply: "serve",
+    resolveId(id) {
+      if (id === ANNOTATOR_CLIENT_VIRTUAL_ID) {
+        return ANNOTATOR_CLIENT_RESOLVED_ID;
+      }
+    },
+    load(id) {
+      if (id !== ANNOTATOR_CLIENT_RESOLVED_ID) {
+        return null;
+      }
+
+      return [
+        `import { mountAnnotatorClient } from ${JSON.stringify(clientImportPath)};`,
+        `mountAnnotatorClient(${clientOptions});`,
+        "",
+      ].join("\n");
+    },
+    transform(code, id) {
+      if (!options.enabled) {
+        return null;
+      }
+
+      const normalizedId = id.replace(/\\/g, "/");
+      if (!DEFAULT_ENTRY_SUFFIXES.some(suffix => normalizedId.endsWith(suffix))) {
+        return null;
+      }
+
+      if (code.includes(ANNOTATOR_CLIENT_VIRTUAL_ID)) {
+        return null;
+      }
+
+      return {
+        code: `import ${JSON.stringify(ANNOTATOR_CLIENT_VIRTUAL_ID)};\n${code}`,
+        map: null,
+      };
+    },
+    transformIndexHtml() {
+      if (!options.enabled) {
+        return undefined;
+      }
+
+      const tag: HtmlTagDescriptor = {
+        tag: "script",
+        attrs: { type: "module" },
+        children: `import ${JSON.stringify(ANNOTATOR_CLIENT_VIRTUAL_ID)};`,
+        injectTo: "body",
+      };
+
+      return [tag];
+    },
+  };
+}

package/plugin/runtime/annotator/styles.ts

@@ -0,0 +1,379 @@
+export const ANNOTATOR_ROOT_ATTR = "data-vpg-annotator-root";
+
+export const ANNOTATOR_STYLES = `
+[${ANNOTATOR_ROOT_ATTR}] {
+  --vpg-annotator-accent: #4f46e5;
+  --vpg-annotator-accent-strong: #4338ca;
+  --vpg-annotator-bg: rgba(15, 23, 42, 0.96);
+  --vpg-annotator-bg-soft: rgba(30, 41, 59, 0.96);
+  --vpg-annotator-border: rgba(148, 163, 184, 0.28);
+  --vpg-annotator-text: #e2e8f0;
+  --vpg-annotator-text-soft: #94a3b8;
+  --vpg-annotator-shadow: 0 16px 40px rgba(15, 23, 42, 0.26);
+  --vpg-annotator-radius: 0px;
+  --vpg-annotator-edge-offset: 20px;
+  color: var(--vpg-annotator-text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+[${ANNOTATOR_ROOT_ATTR}],
+[${ANNOTATOR_ROOT_ATTR}] *,
+[${ANNOTATOR_ROOT_ATTR}] *::before,
+[${ANNOTATOR_ROOT_ATTR}] *::after {
+  box-sizing: border-box;
+}
+
+.vpg-annotator-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.vpg-annotator-layer--markers {
+  z-index: 2147483646;
+}
+
+.vpg-annotator-layer--panels {
+  z-index: 2147483647;
+}
+
+.vpg-annotator-toolbar,
+.vpg-annotator-panel,
+.vpg-annotator-input,
+.vpg-annotator-settings,
+.vpg-annotator-toast {
+  background: var(--vpg-annotator-bg);
+  border: 1px solid var(--vpg-annotator-border);
+  box-shadow: var(--vpg-annotator-shadow);
+  backdrop-filter: blur(18px);
+}
+
+.vpg-annotator-toolbar {
+  position: fixed;
+  right: var(--vpg-annotator-edge-offset);
+  bottom: var(--vpg-annotator-edge-offset);
+  z-index: 2147483647;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px;
+  border-radius: var(--vpg-annotator-radius);
+  user-select: none;
+}
+
+.vpg-annotator-toolbar-handle,
+.vpg-annotator-btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 7px 10px;
+  border: 1px solid var(--vpg-annotator-border);
+  border-radius: var(--vpg-annotator-radius);
+  background: var(--vpg-annotator-bg-soft);
+  color: var(--vpg-annotator-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.vpg-annotator-toolbar-handle {
+  padding: 0;
+  cursor: grab;
+  touch-action: none;
+}
+
+.vpg-annotator-toolbar--dragging,
+.vpg-annotator-toolbar--dragging * {
+  cursor: grabbing !important;
+}
+
+.vpg-annotator-btn {
+  cursor: pointer;
+}
+
+.vpg-annotator-btn--icon {
+  width: 32px;
+  padding: 0;
+}
+
+.vpg-annotator-btn:hover,
+.vpg-annotator-toolbar-handle:hover {
+  border-color: rgba(99, 102, 241, 0.45);
+}
+
+.vpg-annotator-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.vpg-annotator-btn--primary,
+.vpg-annotator-btn[aria-pressed="true"] {
+  background: var(--vpg-annotator-accent);
+  border-color: var(--vpg-annotator-accent);
+  color: white;
+}
+
+.vpg-annotator-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vpg-annotator-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.vpg-annotator-count {
+  padding-left: 4px;
+  white-space: nowrap;
+}
+
+.vpg-annotator-panel,
+.vpg-annotator-input,
+.vpg-annotator-settings {
+  position: fixed;
+  z-index: 2147483647;
+  min-width: 300px;
+  max-width: min(560px, calc(100vw - 24px));
+  border-radius: var(--vpg-annotator-radius);
+  overflow: visible;
+  pointer-events: auto;
+  visibility: hidden;
+}
+
+.vpg-annotator-settings {
+  min-width: 260px;
+  max-width: min(320px, calc(100vw - 24px));
+}
+
+.vpg-annotator-arrow {
+  position: absolute;
+  z-index: 0;
+  width: 14px;
+  height: 14px;
+  background: var(--vpg-annotator-bg);
+  border: 1px solid var(--vpg-annotator-border);
+  transform: rotate(45deg);
+}
+
+.vpg-annotator-panel[data-placement^="top"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="top"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="top"] .vpg-annotator-arrow {
+  border-top: none;
+  border-left: none;
+}
+
+.vpg-annotator-panel[data-placement^="bottom"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="bottom"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="bottom"] .vpg-annotator-arrow {
+  border-right: none;
+  border-bottom: none;
+}
+
+.vpg-annotator-panel[data-placement^="left"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="left"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="left"] .vpg-annotator-arrow {
+  border-left: none;
+  border-bottom: none;
+}
+
+.vpg-annotator-panel[data-placement^="right"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="right"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="right"] .vpg-annotator-arrow {
+  border-top: none;
+  border-right: none;
+}
+
+.vpg-annotator-panel-body,
+.vpg-annotator-input-body,
+.vpg-annotator-settings-body {
+  position: relative;
+  z-index: 1;
+  padding: 14px;
+}
+
+.vpg-annotator-heading {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.vpg-annotator-subtle {
+  margin: 0;
+  font-size: 12px;
+  color: var(--vpg-annotator-text-soft);
+}
+
+.vpg-annotator-textarea,
+.vpg-annotator-comment,
+.vpg-annotator-select {
+  width: 100%;
+  border: 1px solid var(--vpg-annotator-border);
+  border-radius: var(--vpg-annotator-radius);
+  background: rgba(15, 23, 42, 0.72);
+  color: var(--vpg-annotator-text);
+}
+
+.vpg-annotator-textarea,
+.vpg-annotator-comment {
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.vpg-annotator-textarea {
+  min-height: 220px;
+  margin-top: 12px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.vpg-annotator-comment {
+  min-height: 92px;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.vpg-annotator-input-meta {
+  min-height: 160px;
+  margin-bottom: 10px;
+}
+
+.vpg-annotator-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.vpg-annotator-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.vpg-annotator-field {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.vpg-annotator-shortcuts {
+  display: grid;
+  gap: 8px;
+}
+
+.vpg-annotator-shortcut-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vpg-annotator-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vpg-annotator-text-soft);
+}
+
+.vpg-annotator-select,
+.vpg-annotator-checkbox {
+  accent-color: var(--vpg-annotator-accent);
+}
+
+.vpg-annotator-select {
+  padding: 8px 10px;
+}
+
+.vpg-annotator-kbd {
+  min-width: 32px;
+  padding: 4px 8px;
+  border: 1px solid var(--vpg-annotator-border);
+  border-radius: var(--vpg-annotator-radius);
+  background: rgba(15, 23, 42, 0.72);
+  color: var(--vpg-annotator-text);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+}
+
+.vpg-annotator-highlight {
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  border: 2px solid var(--vpg-annotator-accent);
+  border-radius: var(--vpg-annotator-radius);
+  background: rgba(79, 70, 229, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
+}
+
+.vpg-annotator-highlight-label {
+  position: absolute;
+  left: 0;
+  top: -30px;
+  max-width: min(520px, calc(100vw - 24px));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--vpg-annotator-radius);
+  background: var(--vpg-annotator-accent);
+  color: white;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.vpg-annotator-shield {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483645;
+  background: transparent;
+}
+
+.vpg-annotator-marker {
+  position: absolute;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  pointer-events: auto;
+  border: none;
+  border-radius: var(--vpg-annotator-radius);
+  background: var(--vpg-annotator-accent);
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
+}
+
+.vpg-annotator-toast {
+  position: fixed;
+  right: 24px;
+  bottom: 86px;
+  z-index: 2147483647;
+  padding: 8px 12px;
+  border-radius: var(--vpg-annotator-radius);
+  color: var(--vpg-annotator-text);
+  font-size: 12px;
+  font-weight: 600;
+}
+`;