@dcoder-x/plugin-shared 0.1.4 → 0.1.6

package/dist/injection/IdStrategy.js

@@ -3,8 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GENERIC_COMPONENT_NAMES = void 0;
 exports.deriveComponentName = deriveComponentName;
+exports.inferRouteFromFilePath = inferRouteFromFilePath;
+exports.deriveRouteComponentName = deriveRouteComponentName;
+exports.hashRoutePath = hashRoutePath;
+exports.sanitizeLabelForId = sanitizeLabelForId;
 exports.deriveClippyId = deriveClippyId;
+exports.findEnclosingComponentName = findEnclosingComponentName;
 const path_1 = __importDefault(require("path"));
 function deriveComponentName(filePath, fallback) {
     if (fallback)
@@ -15,11 +21,115 @@ function deriveComponentName(filePath, fallback) {
     }
     return normalizeComponentName(base);
 }
-function deriveClippyId(componentName, tagName, lineNumber) {
+/**
+ * Generic Next.js component names that should be replaced by a route-derived name.
+ */
+exports.GENERIC_COMPONENT_NAMES = new Set([
+    'Page', 'Layout', 'App', 'Index', 'Component', 'Default',
+    'Loading', 'Error', 'NotFound', 'Template', 'Root',
+]);
+/**
+ * Infer the route path from an absolute file path.
+ * Handles both App Router (app/…/page.tsx) and Pages Router (pages/….tsx).
+ * Returns null if the file is not a route file.
+ */
+function inferRouteFromFilePath(filePath) {
+    const normalized = filePath.replace(/\\/g, '/');
+    const appMatch = normalized.match(/\/app(\/.*?)\/page\.[jt]sx?$/);
+    if (appMatch) {
+        const segment = appMatch[1]
+            .replace(/\/\([^)]+\)/g, ''); // strip route groups like (auth)
+        return segment || '/';
+    }
+    const pagesMatch = normalized.match(/\/pages(\/.*?)\.[jt]sx?$/);
+    if (pagesMatch) {
+        const segment = pagesMatch[1].replace(/\/index$/, '') || '/';
+        return segment;
+    }
+    return null;
+}
+/**
+ * Convert a route path to a PascalCase component name.
+ * /admin/transactions      → AdminTransactions
+ * /dashboard/forms/[id]   → DashboardForms
+ * /auth/forgot-password   → AuthForgotPassword
+ */
+function deriveRouteComponentName(routePath) {
+    const name = routePath
+        .split('/')
+        .filter(Boolean)
+        .filter(s => !s.startsWith('[') && !s.startsWith(':') && !s.startsWith('$'))
+        .map(s => s
+        .split('-')
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(''))
+        .join('');
+    return name || 'Page';
+}
+/**
+ * Compute a short route hash for use in stable IDs.
+ * Takes a route path (e.g., "/admin/transactions") and produces a 4-char hash.
+ */
+function hashRoutePath(routePath) {
+    let hash = 0;
+    for (let i = 0; i < routePath.length; i++) {
+        hash = (hash << 5) - hash + routePath.charCodeAt(i);
+        hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36).slice(0, 4);
+}
+/**
+ * Sanitize a label string for embedding in a CSS/HTML attribute ID.
+ * TitleCase, max 2 words, alphanumeric only, minimum 2 chars.
+ * Returns null if no usable text can be extracted.
+ */
+function sanitizeLabelForId(label) {
+    const words = label
+        .replace(/[^A-Za-z0-9\s]/g, ' ')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());
+    const result = words.join('');
+    return result.length >= 2 ? result : null;
+}
+function deriveClippyId(componentName, tagName, lineNumber, routePath, labelText) {
     const sanitizedComponent = normalizeComponentName(componentName);
     const normalizedTag = tagName.replace(/[^a-z0-9]/gi, '') || 'element';
+    const sanitizedLabel = labelText ? sanitizeLabelForId(labelText) : null;
     const stableLine = lineNumber > 0 ? lineNumber : 0;
-    return `${sanitizedComponent}-${normalizedTag}-${stableLine}`;
+    const parts = [sanitizedComponent];
+    if (sanitizedLabel)
+        parts.push(sanitizedLabel);
+    parts.push(normalizedTag);
+    parts.push(String(stableLine));
+    return parts.join('-');
+}
+/**
+ * Walk the AST upward to find the enclosing React component name.
+ * Exported here so both the injector and the extractor use the same logic.
+ */
+function findEnclosingComponentName(path) {
+    let current = path;
+    while (current) {
+        if (current.isFunctionDeclaration() && current.node.id?.name) {
+            return current.node.id.name;
+        }
+        if (current.isClassDeclaration() && current.node.id?.name) {
+            return current.node.id.name;
+        }
+        if (current.isVariableDeclarator() && current.node.id?.type === 'Identifier') {
+            return current.node.id.name;
+        }
+        if ((current.isArrowFunctionExpression() || current.isFunctionExpression()) &&
+            current.parentPath?.isVariableDeclarator() &&
+            current.parentPath.node.id?.type === 'Identifier') {
+            return current.parentPath.node.id.name;
+        }
+        current = current.parentPath;
+    }
+    return null;
 }
 function normalizeComponentName(value) {
     const sanitized = value

package/dist/types.d.ts

@@ -38,6 +38,9 @@ export interface DiscoveredElement {
     nearbyText: string[];
     semanticRole: string;
     interactions: string[];
+    label?: string;
+    component?: string;
+    isNavigationLink?: boolean;
     loc?: {
         line: number;
     };
@@ -62,6 +65,7 @@ export interface InferredFlow {
     page: string;
     steps: string[];
     edges: FlowEdge[];
+    intentPatterns?: string[];
 }
 export interface ArtifactMetadata {
     version: string;
@@ -91,6 +95,7 @@ export interface PolicySelectorEntry {
     selector: string;
     tag: string;
     component: string;
+    label?: string;
     route: string;
     filePath: string;
     attributes: Array<{
@@ -136,7 +141,8 @@ export interface SelectorManifestEntry {
     selector: string;
     component: string;
     tag: string;
-    route: string;
+    label?: string;
+    routes: string[];
 }
 export interface SelectorManifest {
     version: string;

package/dist/upload/PackageBuilder.d.ts

@@ -3,6 +3,7 @@ export declare class PackageBuilder {
     private version;
     buildPackage(data: Omit<KnowledgePackage, 'generatedAt'>): KnowledgePackage;
     buildArtifacts(data: {
+        projectRoot?: string;
         buildId: string;
         bundler: 'webpack' | 'vite';
         routes: DiscoveredRoute[];
@@ -11,6 +12,7 @@ export declare class PackageBuilder {
         components?: PolicyComponent[];
     }): PolicyArtifacts;
     buildPolicyDocument(data: {
+        projectRoot?: string;
         buildId: string;
         generatedAt: string;
         bundler: 'webpack' | 'vite';
@@ -26,11 +28,21 @@ export declare class PackageBuilder {
     }): SelectorManifest;
     build(data: Omit<KnowledgePackage, 'generatedAt'>): Buffer;
     buildArtifactsBuffer(artifacts: PolicyArtifacts): Buffer;
+    /**
+     * Compute a fallback project root from the common ancestor of route file paths.
+     * Used only when the adapter does not provide an explicit projectRoot.
+     */
+    private inferProjectRoot;
+    private normalizePath;
+    /**
+     * Remove design-system primitives and other shared components that carry no
+     * state or interaction data. Normalises filePaths against the project root.
+     */
+    private filterMeaningfulComponents;
     private toPolicySelectors;
     private toPolicyComponents;
     private toPolicyFlows;
     private deriveComponentName;
     private deriveStableId;
     private extractClippyIdFromSelector;
-    private simpleHash;
 }

package/dist/upload/PackageBuilder.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PackageBuilder = void 0;
 const zlib_1 = __importDefault(require("zlib"));
+const path_1 = __importDefault(require("path"));
 const IdStrategy_1 = require("../injection/IdStrategy");
 class PackageBuilder {
     constructor() {
@@ -39,31 +40,58 @@ class PackageBuilder {
         };
     }
     buildPolicyDocument(data) {
-        const policySelectors = this.toPolicySelectors(data.selectors);
+        // Use the adapter-provided project root (most reliable).
+        // Fall back to computing the common ancestor of route paths only when unavailable.
+        const projectRoot = data.projectRoot || this.inferProjectRoot(data.routes);
+        const normalizedRoutes = data.routes.map((r) => ({
+            ...r,
+            filePath: this.normalizePath(r.filePath, projectRoot),
+            layout: r.layout ? this.normalizePath(r.layout, projectRoot) : null,
+        }));
+        const policySelectors = this.toPolicySelectors(data.selectors, projectRoot);
+        // Fix 2: only keep components that carry meaningful data (state or interactions).
+        // Pure design-system primitives (Button, Card, Input, etc.) with empty arrays
+        // are excluded — they bloat the policy without adding actionable information.
+        const rawComponents = data.components ?? this.toPolicyComponents(data.selectors, projectRoot);
+        const meaningfulComponents = this.filterMeaningfulComponents(rawComponents, projectRoot);
         return {
             version: this.version,
             buildId: data.buildId,
             generatedAt: data.generatedAt,
             bundler: data.bundler,
-            routes: data.routes,
+            routes: normalizedRoutes,
             selectors: policySelectors,
-            components: data.components ?? this.toPolicyComponents(data.selectors),
-            flows: this.toPolicyFlows(data.flows, data.routes, policySelectors),
+            components: meaningfulComponents,
+            flows: this.toPolicyFlows(data.flows, normalizedRoutes, policySelectors),
         };
     }
     buildSelectorManifest(data) {
-        const selectors = data.selectors.map((entry) => ({
-            id: entry.clippyId,
-            selector: entry.selector,
-            component: entry.component,
-            tag: entry.tag,
-            route: entry.route,
-        }));
+        // Deduplicate by clippyId — shared components used on multiple routes appear once
+        // with a routes[] array listing every route where they appear.
+        const byId = new Map();
+        for (const entry of data.selectors) {
+            if (byId.has(entry.clippyId)) {
+                const existing = byId.get(entry.clippyId);
+                if (!existing.routes.includes(entry.route)) {
+                    existing.routes.push(entry.route);
+                }
+            }
+            else {
+                byId.set(entry.clippyId, {
+                    id: entry.clippyId,
+                    selector: entry.selector,
+                    component: entry.component,
+                    tag: entry.tag,
+                    label: entry.label,
+                    routes: [entry.route],
+                });
+            }
+        }
         return {
             version: this.version,
             buildId: data.buildId,
             generatedAt: data.generatedAt,
-            selectors,
+            selectors: Array.from(byId.values()),
         };
     }
     build(data) {
@@ -73,9 +101,71 @@ class PackageBuilder {
     buildArtifactsBuffer(artifacts) {
         return zlib_1.default.gzipSync(JSON.stringify(artifacts));
     }
-    toPolicySelectors(selectors) {
-        return selectors.map((element, index) => {
-            const component = (0, IdStrategy_1.deriveComponentName)(element.filePath);
+    // ---------------------------------------------------------------------------
+    // Path helpers
+    // ---------------------------------------------------------------------------
+    /**
+     * Compute a fallback project root from the common ancestor of route file paths.
+     * Used only when the adapter does not provide an explicit projectRoot.
+     */
+    inferProjectRoot(routes) {
+        const filePaths = routes.map((r) => r.filePath).filter(Boolean);
+        if (filePaths.length === 0)
+            return process.cwd();
+        const parts = filePaths[0].replace(/\\/g, '/').split('/');
+        let commonParts = parts;
+        for (const fp of filePaths.slice(1)) {
+            const fpParts = fp.replace(/\\/g, '/').split('/');
+            const len = Math.min(commonParts.length, fpParts.length);
+            let i = 0;
+            while (i < len && commonParts[i] === fpParts[i])
+                i++;
+            commonParts = commonParts.slice(0, i);
+        }
+        // Common ancestor of route files is typically the `app/` dir.
+        // Go one level up to reach the actual project root.
+        if (commonParts.length > 0) {
+            const candidate = commonParts.join('/');
+            const parent = candidate.includes('/') ? candidate.replace(/\/[^/]+$/, '') : candidate;
+            if (parent)
+                return parent;
+        }
+        return process.cwd();
+    }
+    normalizePath(filePath, projectRoot) {
+        try {
+            const rel = path_1.default.relative(projectRoot, filePath).replace(/\\/g, '/');
+            // Only use the relative path if it doesn't escape above the project root
+            return rel.startsWith('..') ? filePath.replace(/\\/g, '/') : rel;
+        }
+        catch {
+            return filePath.replace(/\\/g, '/');
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Component filtering (Fix 2)
+    // ---------------------------------------------------------------------------
+    /**
+     * Remove design-system primitives and other shared components that carry no
+     * state or interaction data. Normalises filePaths against the project root.
+     */
+    filterMeaningfulComponents(components, projectRoot) {
+        return components
+            .filter((c) => (c.stateVariables && c.stateVariables.length > 0) ||
+            (c.interactions && c.interactions.length > 0))
+            .map((c) => ({
+            ...c,
+            filePath: this.normalizePath(c.filePath, projectRoot),
+        }));
+    }
+    // ---------------------------------------------------------------------------
+    // Selector conversion
+    // ---------------------------------------------------------------------------
+    toPolicySelectors(selectors, projectRoot) {
+        return selectors
+            .filter((element) => !element.isNavigationLink)
+            .map((element, index) => {
+            const component = element.component || (0, IdStrategy_1.deriveComponentName)(element.filePath);
             const preferred = element.selectors.find((candidate) => candidate.type === 'clippy_id') ||
                 element.selectors[0];
             const stableLine = element.loc?.line ?? index;
@@ -83,65 +173,90 @@ class PackageBuilder {
                 ? this.extractClippyIdFromSelector(preferred.value) ||
                     this.deriveStableId(component, element.tag, stableLine)
                 : this.deriveStableId(component, element.tag, stableLine);
-            const selector = preferred?.value ||
-                `[data-clippy-id='${clippyId}']`;
+            const selector = preferred?.value || `[data-clippy-id='${clippyId}']`;
             return {
                 clippyId,
                 selector,
                 tag: element.tag,
                 component,
+                label: element.label,
                 route: element.route,
-                filePath: element.filePath,
+                filePath: projectRoot
+                    ? this.normalizePath(element.filePath, projectRoot)
+                    : element.filePath.replace(/\\/g, '/'),
                 attributes: Object.entries(element.staticProps).map(([name, value]) => ({ name, value })),
                 candidates: element.selectors,
             };
         });
     }
-    toPolicyComponents(selectors) {
+    toPolicyComponents(selectors, projectRoot) {
         const byFile = new Map();
         for (const element of selectors) {
+            if (element.isNavigationLink)
+                continue;
             if (!byFile.has(element.filePath))
                 byFile.set(element.filePath, []);
             byFile.get(element.filePath).push(element);
         }
         return Array.from(byFile.entries()).map(([filePath, items]) => {
-            const componentName = this.deriveComponentName(filePath);
+            const componentName = items.find((i) => i.component)?.component || this.deriveComponentName(filePath);
             const route = items[0]?.route || '/';
             return {
                 name: componentName,
-                filePath,
+                filePath: projectRoot ? this.normalizePath(filePath, projectRoot) : filePath.replace(/\\/g, '/'),
                 route,
                 stateVariables: [],
                 interactions: [],
             };
         });
     }
+    // ---------------------------------------------------------------------------
+    // Flow conversion
+    // ---------------------------------------------------------------------------
     toPolicyFlows(flows, routes, selectors) {
         return flows.map((flow, flowIndex) => {
             const firstRoute = flow.steps[0] || '/';
-            const page = flow.page || routes.find((route) => route.path === firstRoute)?.path || firstRoute;
-            const hasInteraction = flow.edges.some((edge) => edge.from === edge.to && edge.trigger?.startsWith('on'));
+            const page = flow.page || routes.find((r) => r.path === firstRoute)?.path || firstRoute;
             const steps = flow.steps.map((routePath, stepIndex) => {
-                const target = selectors.find((entry) => entry.route === routePath)?.selector ||
-                    `[data-clippy-route='${routePath}']`;
+                const incomingEdge = stepIndex > 0 ? flow.edges.find((e) => e.to === routePath) : null;
+                let target;
+                if (incomingEdge?.trigger && incomingEdge.trigger !== 'link') {
+                    const fromRoute = incomingEdge.from;
+                    const byLabel = selectors.find((s) => s.route === fromRoute &&
+                        s.label?.toLowerCase() === incomingEdge.trigger.toLowerCase());
+                    const byAttr = !byLabel
+                        ? selectors.find((s) => s.route === fromRoute &&
+                            s.attributes.some((a) => a.value.toLowerCase() === incomingEdge.trigger.toLowerCase()))
+                        : null;
+                    target = (byLabel || byAttr)?.selector;
+                }
+                if (!target) {
+                    target =
+                        selectors.find((s) => s.route === routePath)?.selector ||
+                            `[data-clippy-route='${routePath}']`;
+                }
+                const isFirst = stepIndex === 0;
+                const isInteractionStep = flow.edges.some((e) => e.from === e.to && e.trigger?.startsWith('on'));
                 return {
                     step: stepIndex + 1,
-                    action: stepIndex === 0
-                        ? hasInteraction
-                            ? 'interact'
-                            : 'navigate'
-                        : 'transition',
+                    action: isFirst ? (isInteractionStep ? 'interact' : 'navigate') : 'transition',
                     target,
                 };
             });
+            const intentPatterns = flow.intentPatterns && flow.intentPatterns.length > 0
+                ? flow.intentPatterns
+                : [flow.name.toLowerCase()];
             return {
                 flowId: flow.id || `flow_${flowIndex + 1}`,
                 page,
-                intentPatterns: [flow.name.toLowerCase()],
+                intentPatterns,
                 steps,
             };
         });
     }
+    // ---------------------------------------------------------------------------
+    // Helpers
+    // ---------------------------------------------------------------------------
     deriveComponentName(filePath) {
         return (0, IdStrategy_1.deriveComponentName)(filePath);
     }
@@ -152,12 +267,5 @@ class PackageBuilder {
         const match = selector.match(/\[data-clippy-id=['\"]([^'\"]+)['\"]\]/);
         return match?.[1] || null;
     }
-    simpleHash(input) {
-        let hash = 0;
-        for (let i = 0; i < input.length; i++) {
-            hash = (hash * 31 + input.charCodeAt(i)) >>> 0;
-        }
-        return hash.toString(36);
-    }
 }
 exports.PackageBuilder = PackageBuilder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcoder-x/plugin-shared",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",