@trojanbox-vcp-test/site-edit-engine 0.1.0

package/dist/internal/render/render-projection.js

@@ -0,0 +1,281 @@
+// ─── Render Projection ───────────────────────────────
+// 来源: docs/06-development-checklist.md §7
+//
+// 从 graph + topology + capabilities 投影出 protocol-facing 的
+// RenderDocument 和 RenderObjectDetail。
+function isExternalSourceKind(kind) {
+    return (kind === "api-field" ||
+        kind === "cms-field" ||
+        kind === "i18n-message" ||
+        kind === "config-entry");
+}
+/**
+ * 投影 RenderDocument —— 从 graph + topology + capabilities 构建。
+ */
+export function projectRenderDocument(graph, _topology, capabilities, options = {}) {
+    const entries = [];
+    for (const [key, element] of graph.elements) {
+        const cap = capabilities.get(key);
+        const operationSummary = {
+            canUpdateText: options.canUpdateTextByKey?.get(key) ?? cap?.canUpdateText ?? false,
+            canInsertChild: cap?.canInsertChild ?? false,
+            canMove: cap?.canMove ?? false,
+            canRemove: cap?.canRemove ?? false,
+        };
+        entries.push({
+            key,
+            tag: element.tag,
+            label: element.tag === element.componentName
+                ? element.tag
+                : `${element.tag} (${element.componentName})`,
+            parentKey: element.parentKey,
+            childKeys: [...element.childKeys],
+            operationSummary,
+        });
+    }
+    return {
+        routeId: graph.routeId,
+        version: graph.version,
+        rootKeys: [...graph.rootKeys],
+        entries,
+    };
+}
+/**
+ * 投影 RenderObjectDetail —— 按需加载单个节点的详细信息。
+ */
+export function projectRenderObjectDetail(key, graph, topology, capabilities, textSources, writeTarget, provenances, conditional, componentSemantic, contentModel, mediaModel, styleSource, styleModel) {
+    const element = graph.elements.get(key);
+    const topNode = topology.nodes.get(key);
+    const cap = capabilities.get(key);
+    if (!element || !topNode || !cap) {
+        throw new Error(`Node not found: ${key}`);
+    }
+    const primaryProvenance = pickPrimaryProvenance(element.textSegments, provenances);
+    const projectedCapability = projectCapabilityModes(key, graph, element, cap, primaryProvenance);
+    const provenanceChain = primaryProvenance
+        ? projectProvenanceChain(primaryProvenance)
+        : undefined;
+    const effectiveWriteTarget = projectEffectiveWriteTarget(writeTarget, primaryProvenance);
+    const textSegments = element.textSegments.map((seg) => ({
+        index: seg.index,
+        value: seg.value,
+        editable: projectTextSegmentEditable(seg, cap, provenances?.get(seg.index) ?? null),
+        source: textSources.get(seg.index) ?? null,
+    }));
+    // Build ancestors chain
+    const ancestors = [];
+    let currentKey = element.parentKey;
+    while (currentKey) {
+        const parent = graph.elements.get(currentKey);
+        if (!parent)
+            break;
+        ancestors.push({
+            key: currentKey,
+            tag: parent.tag,
+            label: parent.tag,
+        });
+        currentKey = parent.parentKey;
+    }
+    ancestors.reverse(); // root first
+    // Build children refs
+    const children = element.childKeys
+        .map((ck) => {
+        const child = graph.elements.get(ck);
+        return child ? { key: ck, tag: child.tag, label: child.tag } : null;
+    })
+        .filter((c) => c !== null);
+    // Build siblings refs (exclude self)
+    const siblings = [];
+    if (element.parentKey) {
+        const parent = graph.elements.get(element.parentKey);
+        if (parent) {
+            for (const sibKey of parent.childKeys) {
+                if (sibKey === key)
+                    continue;
+                const sib = graph.elements.get(sibKey);
+                if (sib) {
+                    siblings.push({ key: sibKey, tag: sib.tag, label: sib.tag });
+                }
+            }
+        }
+    }
+    return {
+        key,
+        tag: element.tag,
+        componentName: element.componentName,
+        sourceFile: element.sourceFile,
+        label: element.tag,
+        capabilities: projectedCapability,
+        writeTarget,
+        effectiveWriteTarget,
+        provenanceChain,
+        componentSemantic,
+        contentModel,
+        mediaModel,
+        styleSource,
+        styleModel,
+        conditional,
+        textSegments,
+        boundaryKind: element.boundaryKind,
+        isOpaque: element.isOpaque,
+        ancestors,
+        children,
+        siblings,
+    };
+}
+/**
+ * 选择 detail 的写回目标。
+ * 只有可编辑 segment 解析到 value target 时，才升级为 value-binding。
+ * 否则保持 jsx-node，并保留上游传入的 file / isProxy 元数据。
+ */
+export function projectDetailWriteTarget(topWriteTarget, segments) {
+    const resolvedEditableSegment = segments.find((segment) => segment.editable && segment.source && segment.source.kind !== "literal");
+    if (resolvedEditableSegment?.source) {
+        return {
+            kind: "value-binding",
+            file: resolvedEditableSegment.source.file,
+            componentName: topWriteTarget.componentName,
+            isProxy: resolvedEditableSegment.source.file !== topWriteTarget.file,
+        };
+    }
+    return {
+        kind: "jsx-node",
+        file: topWriteTarget.file,
+        componentName: topWriteTarget.componentName,
+        isProxy: topWriteTarget.isProxy,
+    };
+}
+function pickPrimaryProvenance(segments, provenances) {
+    if (!provenances) {
+        return null;
+    }
+    for (const segment of segments) {
+        const provenance = provenances.get(segment.index);
+        if (provenance) {
+            return provenance;
+        }
+    }
+    return null;
+}
+function projectCapabilityModes(key, graph, element, capability, provenance) {
+    const isRepeatTemplate = element.identity.structuralPath.includes("#repeat:");
+    const isRepeatItemRoot = graph.regions.some((region) => region.kind === "repeat-region" && region.childKeys.includes(key));
+    const externalReasonCode = provenance?.diagnostics.find((diagnostic) => diagnostic.code === "missing-adapter" ||
+        diagnostic.code === "external-source-readonly")?.code;
+    const updateTextMode = capability.canUpdateText
+        ? {
+            mode: provenance?.editMode ?? "direct",
+            reasonCode: externalReasonCode ??
+                (provenance?.editMode === "upstream"
+                    ? "component-prop"
+                    : provenance?.finalSource?.kind === "repeat-template"
+                        ? "repeat-item-data"
+                        : undefined),
+        }
+        : { mode: "unsupported", reasonCode: "capability-denied" };
+    const canUpdateText = capability.canUpdateText && isWritableUpdateTextMode(updateTextMode.mode);
+    return {
+        ...capability,
+        canUpdateText,
+        editModes: {
+            updateText: updateTextMode,
+            insertChild: capability.canInsertChild
+                ? {
+                    mode: "direct",
+                    reasonCode: isRepeatTemplate || isRepeatItemRoot
+                        ? "repeat-template"
+                        : undefined,
+                }
+                : { mode: "unsupported", reasonCode: "capability-denied" },
+            move: capability.canMove
+                ? {
+                    mode: isRepeatItemRoot ? "proxy" : "direct",
+                    reasonCode: isRepeatItemRoot ? "repeat-collection" : undefined,
+                }
+                : { mode: "unsupported", reasonCode: "capability-denied" },
+            remove: capability.canRemove
+                ? {
+                    mode: isRepeatItemRoot ? "proxy" : "direct",
+                    reasonCode: isRepeatItemRoot ? "repeat-collection" : undefined,
+                }
+                : { mode: "unsupported", reasonCode: "capability-denied" },
+        },
+    };
+}
+function projectTextSegmentEditable(segment, capability, provenance) {
+    if (!segment.editable || !capability.canUpdateText) {
+        return false;
+    }
+    if (!provenance) {
+        return true;
+    }
+    return isWritableUpdateTextMode(provenance.editMode);
+}
+function isWritableUpdateTextMode(mode) {
+    return mode === "direct" || mode === "proxy" || mode === "upstream";
+}
+function projectProvenanceChain(provenance) {
+    return {
+        finalSource: provenance.finalSource
+            ? {
+                kind: provenance.finalSource.kind,
+                file: provenance.finalSource.file,
+                displayPath: provenance.finalSource.displayPath,
+                externalSource: provenance.finalSource.externalSource,
+            }
+            : null,
+        chain: provenance.chain.map((hop) => ({
+            kind: hop.kind,
+            file: hop.file,
+            displayName: hop.displayName,
+            canEditHere: hop.canEditHere,
+        })),
+        confidence: provenance.confidence,
+        editMode: provenance.editMode,
+        diagnostics: provenance.diagnostics.map((diagnostic) => ({
+            code: diagnostic.code,
+            message: diagnostic.message,
+        })),
+    };
+}
+function projectEffectiveWriteTarget(writeTarget, provenance) {
+    if (!provenance?.finalSource) {
+        return {
+            kind: writeTarget.kind === "route-export" ? "route-export" : "jsx-node",
+            file: writeTarget.file,
+            isProxy: writeTarget.isProxy,
+        };
+    }
+    if (provenance.finalSource.kind === "jsx-literal") {
+        return {
+            kind: "jsx-node",
+            file: writeTarget.file,
+            isProxy: writeTarget.isProxy,
+        };
+    }
+    if (provenance.finalSource.kind === "config-entry" &&
+        provenance.finalSource.locator) {
+        return {
+            kind: "value-path",
+            file: provenance.finalSource.file,
+            isProxy: provenance.finalSource.file !== writeTarget.file,
+            displayPath: provenance.finalSource.displayPath,
+        };
+    }
+    if (isExternalSourceKind(provenance.finalSource.kind)) {
+        return {
+            kind: "external-entry",
+            file: provenance.finalSource.file,
+            isProxy: false,
+            displayPath: provenance.finalSource.displayPath,
+            sourceType: provenance.finalSource.externalSource?.sourceType,
+            sourceId: provenance.finalSource.externalSource?.sourceId,
+        };
+    }
+    return {
+        kind: "value-path",
+        file: provenance.finalSource.file,
+        isProxy: provenance.finalSource.file !== writeTarget.file,
+        displayPath: provenance.finalSource.displayPath,
+    };
+}

package/dist/internal/render/tailwind-style-model.d.ts

@@ -0,0 +1,19 @@
+import type { OperationValue, StyleBreakpoint, StyleModelView, StyleProperty, StyleSourceView, StyleStateMode } from "../protocol.js";
+import type { ElementNode } from "../graph/types.js";
+type TailwindStyleRule = {
+    property: StyleProperty;
+    options?: string[];
+    prefix?: string;
+    exact?: readonly string[];
+    isMatch?: (token: string) => boolean;
+};
+type TailwindStyleTokenContext = {
+    breakpoint?: StyleBreakpoint;
+    state?: StyleStateMode;
+};
+export declare const TAILWIND_STYLE_RULES: readonly TailwindStyleRule[];
+export declare function buildStyleModel(element: ElementNode): StyleModelView;
+export declare function buildStyleSource(element: ElementNode): StyleSourceView;
+export declare function updateStylePropertyInClassName(currentValue: string, property: StyleProperty, value: OperationValue | null, context?: TailwindStyleTokenContext): string | null;
+export declare function matchesStyleProperty(property: StyleProperty, token: string): boolean;
+export {};