noteconnection 1.7.0 → 1.8.0

package/dist/src/frontend/path_modules_bridge.js

@@ -0,0 +1,486 @@
+/**
+ * path_modules_bridge.js — Non-module bridge for extracted path modules.
+ *
+ * This script exposes utility functions from path_mermaid_utils.mjs and
+ * path_state.mjs on window.pathModules, so path_app.js can access them
+ * without ES module imports (which require <script type="module">).
+ *
+ * Load order:
+ *   1. <script src="path_modules_bridge.js"></script>  (this file)
+ *   2. <script src="path_app.js"></script>
+ *
+ * path_app.js can then use:
+ *   window.pathModules.utils.estimateBridgeTextLineWidth(text, fontSize)
+ *   window.pathModules.state.createPathLearningState()
+ *
+ * When path_app.js migrates to ES modules, it can import directly from
+ * path_mermaid_utils.mjs and path_state.mjs instead.
+ *
+ * Phase 4 P1 — eliminates duplication; canonical source remains the .mjs files.
+ */
+
+(function () {
+    'use strict';
+
+    // ── SVG/Mermaid Utilities (from path_mermaid_utils.mjs) ──
+
+    function normalizeBridgeInlineText(text) {
+        return String(text || '').replace(/\s+/g, ' ').trim();
+    }
+
+    function isBridgeWideGlyph(char) {
+        return /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︐-︙︰-﹯！-｠￠-￦\u{1F300}-\u{1FAFF}]/u.test(char);
+    }
+
+    function estimateBridgeGlyphWidthUnits(char) {
+        if (!char) return 0;
+        if (/\s/.test(char)) return 0.35;
+        if (isBridgeWideGlyph(char)) return 1.02;
+        if (/[.,;:!'`|]/.test(char)) return 0.32;
+        if (/[(){}\[\]<>]/.test(char)) return 0.46;
+        if (/[\\/_-]/.test(char)) return 0.5;
+        if (/[0-9]/.test(char)) return 0.62;
+        if (/[A-Z]/.test(char)) return 0.72;
+        if (/[a-z]/.test(char)) return 0.64;
+        return 0.7;
+    }
+
+    function estimateBridgeTextLineWidth(text, fontSize) {
+        var units = 0;
+        var chars = Array.from(String(text || ''));
+        for (var i = 0; i < chars.length; i++) {
+            units += estimateBridgeGlyphWidthUnits(chars[i]);
+        }
+        return Math.max(fontSize * 0.75, (units * fontSize) + Math.max(2, fontSize * 0.12));
+    }
+
+    function splitBridgeTokenForWrap(token, fontSize, maxLineWidth) {
+        var wrapped = [];
+        var segment = '';
+        var chars = Array.from(token);
+        for (var i = 0; i < chars.length; i++) {
+            var candidate = segment + chars[i];
+            if (!segment || estimateBridgeTextLineWidth(candidate, fontSize) <= maxLineWidth) {
+                segment = candidate;
+            } else {
+                wrapped.push(segment);
+                segment = chars[i];
+            }
+        }
+        if (segment) wrapped.push(segment);
+        return wrapped;
+    }
+
+    function parseBridgeCssLength(lengthValue, baseFontSize) {
+        if (!lengthValue) return 0;
+        var normalized = String(lengthValue).trim().toLowerCase();
+        if (!normalized || normalized === 'normal') return 0;
+        var numeric = parseFloat(normalized);
+        if (!isFinite(numeric) || numeric <= 0) return 0;
+        if (normalized.indexOf('em') !== -1 || normalized.indexOf('rem') !== -1) {
+            return numeric * Math.max(10, baseFontSize || 16);
+        }
+        if (normalized.indexOf('%') !== -1) {
+            return (numeric / 100) * Math.max(10, baseFontSize || 16);
+        }
+        return numeric;
+    }
+
+    function parseBridgeNumericAttribute(element, name, fallback) {
+        var numeric = parseFloat(String((element && element.getAttribute) ? element.getAttribute(name) : ''));
+        return isFinite(numeric) ? numeric : (fallback || 0);
+    }
+
+    function extractBridgeInlineStyleValue(styleValue, propertyName) {
+        if (!styleValue) return null;
+        var pattern = new RegExp('(?:^|;)\\s*' + propertyName + '\\s*:\\s*([^;]+)', 'i');
+        var match = String(styleValue).match(pattern);
+        return match && match[1] ? String(match[1]).trim() : null;
+    }
+
+    function wrapBridgeMeasurementLine(line, fontSize, maxLineWidth) {
+        var normalized = normalizeBridgeInlineText(line);
+        if (!normalized) return [];
+        if (estimateBridgeTextLineWidth(normalized, fontSize) <= maxLineWidth) {
+            return [normalized];
+        }
+        var tokens = normalized.split(/\s+/);
+        var wrapped = [];
+        for (var i = 0; i < tokens.length; i++) {
+            var tokenWrapped = splitBridgeTokenForWrap(tokens[i], fontSize, maxLineWidth);
+            wrapped = wrapped.concat(tokenWrapped);
+        }
+        return wrapped;
+    }
+
+    function resolveBridgeTextProperty(element, propertyName) {
+        var current = element;
+        while (current) {
+            var attr = current.getAttribute && current.getAttribute(propertyName);
+            if (attr && String(attr).trim()) return String(attr).trim();
+            var styleVal = extractBridgeInlineStyleValue(
+                current.getAttribute && current.getAttribute('style'), propertyName
+            );
+            if (styleVal) return styleVal;
+            current = current.parentElement || null;
+        }
+        return null;
+    }
+
+    function resolveBridgeSvgFontSize(element) {
+        var current = element;
+        while (current) {
+            var attr = current.getAttribute && current.getAttribute('font-size');
+            if (attr && String(attr).trim()) return String(attr).trim();
+            current = current.parentElement || null;
+        }
+        var parsed = parseBridgeCssLength('16', 16);
+        return parsed > 0 ? parsed : 16;
+    }
+
+    function resolveBridgeSvgLineHeight(element, fontSize) {
+        var current = element;
+        while (current) {
+            var attr = current.getAttribute && current.getAttribute('line-height');
+            if (attr && String(attr).trim()) return String(attr).trim();
+            current = current.parentElement || null;
+        }
+        var parsed = parseBridgeCssLength('normal', fontSize);
+        return parsed > 0 ? parsed : Math.max(fontSize * 1.18, fontSize + 4);
+    }
+
+    function normalizeBridgeMermaidLineBreaks(source) {
+        return String(source || '')
+            .replace(/\r\n?/g, '\n')
+            .replace(/<br\s*>/gi, '<br/>');
+    }
+
+    function stripBridgeWrappingQuotes(text) {
+        var trimmed = String(text || '').trim();
+        if (trimmed.length >= 2 && trimmed.charAt(0) === '"' && trimmed.charAt(trimmed.length - 1) === '"') {
+            return trimmed.slice(1, -1);
+        }
+        return trimmed;
+    }
+
+    function splitBridgeMermaidTopLevelStatements(source) {
+        var text = normalizeBridgeMermaidLineBreaks(source)
+            .split('\n')
+            .map(function(line) {
+                return rewriteBridgeQuotedLabelAfterSemicolonLine(line) || line;
+            })
+            .join('\n');
+        var result = '';
+        var quote = false;
+        var squareDepth = 0;
+        var roundDepth = 0;
+        var curlyDepth = 0;
+
+        for (var index = 0; index < text.length; index += 1) {
+            var char = text.charAt(index);
+            if (char === '"' && text.charAt(index - 1) !== '\\') {
+                quote = !quote;
+                result += char;
+                continue;
+            }
+            if (!quote) {
+                if (char === '[') squareDepth += 1;
+                else if (char === ']') squareDepth = Math.max(0, squareDepth - 1);
+                else if (char === '(') roundDepth += 1;
+                else if (char === ')') roundDepth = Math.max(0, roundDepth - 1);
+                else if (char === '{') curlyDepth += 1;
+                else if (char === '}') curlyDepth = Math.max(0, curlyDepth - 1);
+                if (char === ';' && squareDepth === 0 && roundDepth === 0 && curlyDepth === 0) {
+                    result += '\n';
+                    continue;
+                }
+            }
+            result += char;
+        }
+        return result;
+    }
+
+    function rewriteBridgeQuotedLabelAfterSemicolonLine(line) {
+        if (String(line || '').indexOf('-->') === -1) {
+            return null;
+        }
+        var match = String(line || '').match(/^(.*?)\s*(-->)\s*(.*?);\s*"([^"\n]+)"\s*$/);
+        if (!match) {
+            return null;
+        }
+        var source = String(match[1] || '').trim();
+        var arrow = String(match[2] || '').trim();
+        var target = String(match[3] || '').trim();
+        var label = String(match[4] || '').trim();
+        if (!source || !target || !label) {
+            return null;
+        }
+        return `${source} -- "${label}" ${arrow} ${target};`;
+    }
+
+    function mergeBridgeDoubleArrowLabelLine(line) {
+        var match = String(line || '').match(/^(.*?)\s*--\s*"([^"\n]+)"\s*--\s*"([^"\n]+)"\s*(-->|---)\s*(.*)$/);
+        if (!match) {
+            return null;
+        }
+        var start = String(match[1] || '').trim();
+        var labelLeft = String(match[2] || '').trim();
+        var labelRight = String(match[3] || '').trim();
+        var arrow = String(match[4] || '').trim();
+        var end = String(match[5] || '').trim();
+        if (!start || !labelLeft || !labelRight || !end) {
+            return null;
+        }
+        return `${start} -- "${labelLeft}<br/>${labelRight}" ${arrow} ${end}`;
+    }
+
+    function quoteBridgeUnquotedEdgeLabelLine(line) {
+        var match = String(line || '').match(/^(.*?)\s*--\s*([^"\n][^>\n]*?)\s*-->\s*(.*)$/);
+        if (!match) {
+            return null;
+        }
+        var start = String(match[1] || '').trim();
+        var label = String(match[2] || '').trim();
+        var end = String(match[3] || '').trim();
+        if (!start || !label || !end) {
+            return null;
+        }
+        if (
+            /^[A-Za-z_][A-Za-z0-9_]*$/.test(label)
+            || /^[A-Za-z_][A-Za-z0-9_]*\s*[\[\(\{].*$/.test(label)
+            || /^["[{(]/.test(label)
+        ) {
+            return null;
+        }
+        return `${start} -- "${label}" --> ${end}`;
+    }
+
+    function splitBridgeIntermediateNodeLine(line) {
+        var match = String(line || '').match(/^(.*?)\s*(-->|---)\s*([A-Za-z_][A-Za-z0-9_]*)\s*(\[[^\]]+\]|\([^)]+\)|\{[^}]+\})\s*(-->|---)\s*(.*)$/);
+        if (!match) {
+            return null;
+        }
+        var start = String(match[1] || '').trim();
+        var leftArrow = String(match[2] || '').trim();
+        var nodeId = String(match[3] || '').trim();
+        var nodeShape = String(match[4] || '').trim();
+        var rightArrow = String(match[5] || '').trim();
+        var end = String(match[6] || '').trim();
+        if (!start || !nodeId || !nodeShape || !end) {
+            return null;
+        }
+        return [
+            `${start} ${leftArrow} ${nodeId}${nodeShape}`,
+            `${nodeId} ${rightArrow} ${end}`
+        ];
+    }
+
+    function sanitizeBridgeMermaidIdentifier(rawValue, fallbackPrefix, counter) {
+        var raw = String(rawValue || '').trim();
+        var prefixedMatch = raw.match(/^([A-Za-z][A-Za-z0-9_]*)/);
+        if (prefixedMatch && prefixedMatch[1]) {
+            return prefixedMatch[1];
+        }
+        return `${fallbackPrefix}${counter}`;
+    }
+
+    function escapeBridgeMermaidLabel(rawValue) {
+        return String(rawValue || '')
+            .replace(/\\/g, '\\\\')
+            .replace(/"/g, '\\"')
+            .trim();
+    }
+
+    function isBridgeMermaidControlLine(line) {
+        return /^\s*(?:graph|flowchart|subgraph|end|classDef|class|style|linkStyle|click|%%)\b/i.test(line);
+    }
+
+    function convertBridgeNoteLine(line, state) {
+        var directionalMatch = String(line || '').match(/^\s*note\s+(?:right|left|top|bottom)\s+of\s+([A-Za-z0-9_]+)\s*:\s*(.+)$/i);
+        if (directionalMatch) {
+            state.syntheticCounter += 1;
+            var directionalNodeId = `AutoNote${state.syntheticCounter}`;
+            var directionalNodeText = escapeBridgeMermaidLabel(stripBridgeWrappingQuotes(directionalMatch[2]));
+            return [
+                `${directionalNodeId}["${directionalNodeText}"]`,
+                `${directionalMatch[1]} -.- ${directionalNodeId}`
+            ];
+        }
+
+        var targetedMatch = String(line || '').match(/^\s*note\s+([A-Za-z0-9_]+)\s+"(.+)"\s*$/i);
+        if (targetedMatch) {
+            state.syntheticCounter += 1;
+            var targetedNodeId = `AutoNote${state.syntheticCounter}`;
+            var targetedNodeText = escapeBridgeMermaidLabel(stripBridgeWrappingQuotes(targetedMatch[2]));
+            return [
+                `${targetedNodeId}["${targetedNodeText}"]`,
+                `${targetedMatch[1]} -.- ${targetedNodeId}`
+            ];
+        }
+
+        return null;
+    }
+
+    function normalizeBridgeMermaidEdgeLabels(line) {
+        return String(line || '')
+            .replace(/--\s*"([^"\n]+)"\s*-->/g, '-->|$1|')
+            .replace(/--\s*"([^"\n]+)"\s*--\s*/g, ' -->|$1| ');
+    }
+
+    function normalizeBridgeMermaidEndpoint(rawValue, state) {
+        var raw = String(rawValue || '').trim();
+        if (!raw) return raw;
+        if (/^(?:\[|\{|\(|")/.test(raw)) return raw;
+        if (/^[A-Za-z_][A-Za-z0-9_]*$/.test(raw)) return raw;
+        if (/^[A-Za-z_][A-Za-z0-9_]*\s*[\[\(\{].*$/.test(raw)) return raw;
+
+        var nodeId = state.labelToId.get(raw);
+        if (!nodeId) {
+            state.syntheticCounter += 1;
+            nodeId = sanitizeBridgeMermaidIdentifier(raw, 'AutoNode', state.syntheticCounter);
+            state.labelToId.set(raw, nodeId);
+        }
+        return `${nodeId}["${escapeBridgeMermaidLabel(raw)}"]`;
+    }
+
+    function normalizeBridgeMermaidEdgeLine(line, state) {
+        var next = normalizeBridgeMermaidEdgeLabels(line);
+        var match = /(.*?)(--(?:>|o|x)(?:\|[^|]*\|)?\s*)(.+)$/.exec(next);
+        if (!match) {
+            return next;
+        }
+        var left = String(match[1] || '');
+        var connector = String(match[2] || '');
+        var right = String(match[3] || '').trim();
+        if (!right) {
+            return next;
+        }
+        return `${left}${connector}${normalizeBridgeMermaidEndpoint(right, state)}`;
+    }
+
+    function fixBridgeDanglingBracketedNodeLabelLine(line) {
+        var match = String(line || '').match(/^(\s*[A-Za-z_][A-Za-z0-9_]*)\["([^"\n]*)\["\s*;?\s*$/);
+        if (!match) {
+            return null;
+        }
+
+        var nodeId = String(match[1] || '').trim();
+        var label = String(match[2] || '').trim();
+        if (!nodeId || !label) {
+            return null;
+        }
+
+        return `${nodeId}["${escapeBridgeMermaidLabel(label)}"]`;
+    }
+
+    function applyBridgeLegacyMermaidRepairs(line, state) {
+        var noteLines = convertBridgeNoteLine(line, state);
+        if (noteLines) {
+            return noteLines;
+        }
+
+        var next = String(line || '');
+        next = rewriteBridgeQuotedLabelAfterSemicolonLine(next) || next;
+        next = mergeBridgeDoubleArrowLabelLine(next) || next;
+        next = quoteBridgeUnquotedEdgeLabelLine(next) || next;
+        next = fixBridgeDanglingBracketedNodeLabelLine(next) || next;
+
+        var splitIntermediate = splitBridgeIntermediateNodeLine(next);
+        if (splitIntermediate) {
+            return splitIntermediate;
+        }
+
+        return [next];
+    }
+
+    function normalizeBridgeMermaidDefinition(source) {
+        var split = splitBridgeMermaidTopLevelStatements(source);
+        var state = {
+            labelToId: new Map(),
+            syntheticCounter: 0
+        };
+
+        return split
+            .split('\n')
+            .reduce(function(lines, rawLine) {
+                var repairedLines = applyBridgeLegacyMermaidRepairs(rawLine, state);
+                for (var index = 0; index < repairedLines.length; index += 1) {
+                    var line = repairedLines[index];
+                    if (!String(line || '').trim()) {
+                        continue;
+                    }
+                    if (isBridgeMermaidControlLine(line)) {
+                        lines.push(line.trimEnd());
+                    } else {
+                        lines.push(normalizeBridgeMermaidEdgeLine(line, state).trimEnd());
+                    }
+                }
+                return lines;
+            }, [])
+            .join('\n')
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+    }
+
+    // ── State Factories (from path_state.mjs) ──
+
+    function createPathGraphState() {
+        return {
+            canvas: null, ctx: null, worker: null,
+            transform: { k: 1, x: 0, y: 0 },
+            nodes: [], links: [], width: 0, height: 0,
+        };
+    }
+
+    function createPathLearningState() {
+        return {
+            centralNodeId: null, learningHistory: [],
+            completedNodes: new Set(), collapsedNodes: new Set(),
+            forcedExpansionNodes: new Set(), expansionOrder: [],
+            stickyClaimEnabled: true, currentTargetId: null,
+            currentTargetIds: [], lastTreeLayout: null, uiInitialized: false,
+        };
+    }
+
+    function createPathRuntimeConfig(overrides) {
+        var base = { mode: 'domain', strategy: 'foundational', layout: 'orbital',
+            targetId: null, targetIds: [], autoReconstruct: true, retainHistory: true };
+        if (overrides) { for (var k in overrides) { base[k] = overrides[k]; } }
+        return base;
+    }
+
+    function createLearningWorkbenchState(userId) {
+        return {
+            userId: userId || 'path_user_default', loading: false,
+            lastError: '', lastUpdatedAt: '', sessionPlan: null,
+            qualitySnapshot: null, misconceptions: null, runtimeState: null,
+            tutorFeedback: null, sessionExecution: null, sessionHistory: null,
+        };
+    }
+
+    // ── Expose on window ──
+
+    window.pathModules = {
+        utils: {
+            normalizeBridgeInlineText: normalizeBridgeInlineText,
+            normalizeBridgeMermaidDefinition: normalizeBridgeMermaidDefinition,
+            parseBridgeNumericAttribute: parseBridgeNumericAttribute,
+            extractBridgeInlineStyleValue: extractBridgeInlineStyleValue,
+            parseBridgeCssLength: parseBridgeCssLength,
+            resolveBridgeTextProperty: resolveBridgeTextProperty,
+            resolveBridgeSvgFontSize: resolveBridgeSvgFontSize,
+            resolveBridgeSvgLineHeight: resolveBridgeSvgLineHeight,
+            estimateBridgeTextLineWidth: estimateBridgeTextLineWidth,
+            estimateBridgeGlyphWidthUnits: estimateBridgeGlyphWidthUnits,
+            splitBridgeTokenForWrap: splitBridgeTokenForWrap,
+            wrapBridgeMeasurementLine: wrapBridgeMeasurementLine,
+            isBridgeWideGlyph: isBridgeWideGlyph,
+        },
+        state: {
+            createPathGraphState: createPathGraphState,
+            createPathLearningState: createPathLearningState,
+            createPathRuntimeConfig: createPathRuntimeConfig,
+            createLearningWorkbenchState: createLearningWorkbenchState,
+        }
+    };
+})();

package/dist/src/frontend/path_state.mjs

@@ -0,0 +1,118 @@
+/**
+ * path_state.mjs — Path Mode state object factories
+ * Extracted from path_app.js (v2.7, Phase 4 P2)
+ *
+ * These factory functions create the default state objects used by
+ * the Path Mode controller. They are pure data constructors with
+ * no DOM, event, or rendering dependencies.
+ *
+ * Usage (after migration to ES modules):
+ *   import { createPathGraphState, createPathLearningState, ... } from './path_state.mjs';
+ *
+ * Current (pre-migration):
+ *   These factories mirror the inline state definitions in path_app.js
+ *   lines 7-58. Replace inline definitions with factory calls when
+ *   path_app.js migrates to ES module loading.
+ */
+
+/** Core graph rendering state: canvas, worker, transform, nodes, links. */
+export function createPathGraphState() {
+    return {
+        canvas: null,
+        ctx: null,
+        worker: null,
+        transform: { k: 1, x: 0, y: 0 },
+        nodes: [],
+        links: [],
+        width: 0,
+        height: 0,
+    };
+}
+
+/** Learning path state: focus node, completion tracking, expansion control. */
+export function createPathLearningState() {
+    return {
+        centralNodeId: null,
+        learningHistory: [],
+        completedNodes: new Set(),
+        collapsedNodes: new Set(),
+        forcedExpansionNodes: new Set(),
+        expansionOrder: [],
+        stickyClaimEnabled: true,
+        currentTargetId: null,
+        currentTargetIds: [],
+        lastTreeLayout: null,
+        uiInitialized: false,
+    };
+}
+
+/** Runtime configuration for Path Mode layout and behavior. */
+export function createPathRuntimeConfig(overrides = {}) {
+    return {
+        mode: 'domain',
+        strategy: 'foundational',
+        layout: 'orbital',
+        targetId: null,
+        targetIds: [],
+        autoReconstruct: true,
+        retainHistory: true,
+        ...overrides,
+    };
+}
+
+/** Learning workbench state: session plan, quality, misconceptions, tutor feedback. */
+export function createLearningWorkbenchState(userId = 'path_user_default') {
+    return {
+        userId,
+        loading: false,
+        lastError: '',
+        lastUpdatedAt: '',
+        sessionPlan: null,
+        qualitySnapshot: null,
+        misconceptions: null,
+        runtimeState: null,
+        tutorFeedback: null,
+        sessionExecution: null,
+        sessionHistory: null,
+    };
+}
+
+/** Animation state for orbital graph rendering. */
+export function createAnimationState() {
+    return {
+        animationId: null,
+        orbitalAngle: 0,
+    };
+}
+
+/** Bridge communication state. */
+export function createBridgeState() {
+    return {
+        bridgeLanguageListenerRegistered: false,
+        bridgeMermaidRenderQueue: Promise.resolve(),
+        pendingWindowVisibility: null,
+        semanticA11yLastSummaryKey: '',
+        semanticA11yLastAnnouncementAt: 0,
+    };
+}
+
+/** Complete Path Mode application state (all substates combined). */
+export function createFullPathAppState(overrides = {}) {
+    const base = {
+        ...createPathGraphState(),
+        ...createPathLearningState(),
+        ...createPathBridgeState(),
+    };
+    // Re-assign non-serializable objects that spread would lose
+    base.completedNodes = new Set();
+    base.collapsedNodes = new Set();
+    base.forcedExpansionNodes = new Set();
+    base.bridgeMermaidRenderQueue = Promise.resolve();
+
+    base.runtimeConfig = createPathRuntimeConfig();
+    base.learningWorkbench = createLearningWorkbenchState();
+    base.animationId = null;
+    base.orbitalAngle = 0;
+
+    return { ...base, ...overrides };
+}