@lionrapid/core 0.2.1 → 0.3.0-beta.0

package/dist/browser/lionrapid.editor.js

@@ -226,6 +226,60 @@ var LionRapidEditor = (() => {
   background: #fef2f2;
 }
 
+.lr-wf-note {
+  font-size: 11px;
+  color: #6b7280;
+  font-style: italic;
+  padding: 4px 0;
+}
+
+/* Workflow context strip (per-row 'you are here' indicator at the top of
+   the workflow actions block). Width-flexible: stages wrap on narrow sidebars. */
+.lr-wf-strip-host {
+  width: 100%;
+}
+.lr-wf-strip {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+  padding: 6px 8px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+}
+.lr-wf-strip-stages {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+}
+.lr-wf-strip-stage {
+  padding: 2px 8px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.lr-wf-strip-stage.is-active {
+  background: #2563eb;
+  color: white;
+}
+.lr-wf-strip-stage.is-muted {
+  background: #e5e7eb;
+  color: #9ca3af;
+}
+.lr-wf-strip-sep {
+  color: #d1d5db;
+  font-size: 12px;
+  user-select: none;
+}
+.lr-wf-strip-caption {
+  font-size: 11px;
+  color: #4b5563;
+  font-weight: 500;
+}
+
 /* Snapshot viewer sandbox wrapper */
 #__lr_snapshot_root {
   isolation: isolate;
@@ -470,6 +524,7 @@ var LionRapidEditor = (() => {
 .lr-status-dot.ready { background: #22c55e; }
 .lr-status-dot.locked { background: #a855f7; }
 .lr-status-dot.unsaved { background: #f59e0b; }
+.lr-status-dot.readonly { background: #9ca3af; opacity: 0.6; } /* grey + faded \u2014 past my stage */
 
 /* \u2500\u2500 Locked textarea \u2500\u2500 */
 .lr-textarea-locked {
@@ -501,131 +556,47 @@ var LionRapidEditor = (() => {
 }
 `;
 
-  // src/content/safe-href.ts
-  var SAFE_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
-  var ALLOWED_SCHEMES = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:", "sms:"]);
-  function safeHref(href) {
-    if (!href) return "#";
-    const trimmed = href.trim();
-    if (!trimmed) return "#";
-    if (trimmed.startsWith("//")) {
-      return "#";
-    }
-    if (trimmed.startsWith("/") || trimmed.startsWith("?") || trimmed.startsWith("#") || trimmed.startsWith("./") || trimmed.startsWith("../")) {
-      return trimmed;
-    }
-    const schemeMatch = SAFE_SCHEME.exec(trimmed);
-    if (schemeMatch) {
-      const scheme = schemeMatch[0].toLowerCase();
-      return ALLOWED_SCHEMES.has(scheme) ? trimmed : "#";
-    }
-    return trimmed;
+  // src/content/canonical-tag.ts
+  var VOID_TAGS = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  function escapeAttrValue(value) {
+    return value.replace(/"/g, """);
   }
-
-  // src/content/style-mapper/DefaultStyleMapper.ts
-  var DefaultStyleMapper = class {
-    constructor() {
-      /**
-       * Element → Style mapping
-       * Maps HTML element names to their style property
-       */
-      __publicField(this, "elementToStyles", {
-        b: "bold",
-        strong: "bold",
-        i: "italic",
-        em: "italic",
-        u: "underline",
-        s: "strikethrough",
-        del: "strikethrough",
-        strike: "strikethrough",
-        code: "code",
-        mark: "highlight",
-        sub: "subscript",
-        sup: "superscript"
-      });
-      /**
-       * Style → Element mapping (reverse)
-       * Uses simple, familiar elements for developer convenience
-       * Also accepts element names directly (strong, em, etc.)
-       */
-      __publicField(this, "styleToElement", {
-        // Semantic style names → simple elements
-        bold: "b",
-        italic: "i",
-        underline: "u",
-        strikethrough: "s",
-        code: "code",
-        highlight: "mark",
-        subscript: "sub",
-        superscript: "sup",
-        // Element names (for servers that store styles as element names)
-        strong: "b",
-        b: "b",
-        em: "i",
-        i: "i",
-        u: "u",
-        s: "s",
-        del: "s",
-        strike: "s",
-        mark: "mark",
-        sub: "sub",
-        sup: "sup"
-      });
-    }
-    /**
-     * Convert HTML element to style properties
-     *
-     * @param element - Tag name (e.g., "b", "a", "strong")
-     * @param attrs - Element attributes (e.g., { href: "/url" })
-     * @returns Array of style strings
-     */
-    mapElementToStyles(element, attrs) {
-      const styles = [];
-      const tag = element.toLowerCase();
-      const mappedStyle = this.elementToStyles[tag];
-      if (mappedStyle) {
-        styles.push(mappedStyle);
-      }
-      if (tag === "a" && attrs.href) {
-        styles.push(`hyperlink:${attrs.href}`);
-      }
-      return styles;
-    }
-    /**
-     * Convert style properties to HTML element
-     *
-     * Priority order:
-     * 1. Hyperlink (becomes wrapper element with href)
-     * 2. First recognized style property
-     * 3. Fallback to span
-     *
-     * @param styles - Array of style strings
-     * @returns Element info for serialization
-     */
-    mapStylesToElement(styles) {
-      for (const style of styles) {
-        if (style.startsWith("hyperlink:")) {
-          return {
-            element: "a",
-            attrs: { href: safeHref(style.slice("hyperlink:".length)) }
-          };
-        }
-      }
-      for (const style of styles) {
-        const element = this.styleToElement[style];
-        if (element) {
-          return {
-            element,
-            attrs: {}
-          };
-        }
-      }
-      return { element: "span", attrs: {} };
+  function serializeOpeningTag(tagName, attrs) {
+    const tag = tagName.toLowerCase();
+    let result = `<${tag}`;
+    for (const [name, value] of Object.entries(attrs)) {
+      result += ` ${name.toLowerCase()}="${escapeAttrValue(value)}"`;
+    }
+    result += ">";
+    return result;
+  }
+  function extractTagName(rawOpenTag) {
+    const end = rawOpenTag.search(/[\s>]/);
+    return rawOpenTag.slice(1, end === -1 ? rawOpenTag.length : end).toLowerCase();
+  }
+  function readRawStyle(styles) {
+    for (const s of styles) {
+      if (s.startsWith("raw:")) return s.slice(4);
     }
-  };
+    return null;
+  }
 
   // src/browser/markup-parser.ts
-  var styleMapper = new DefaultStyleMapper();
   function parseBlockElement(element) {
     const styles = {};
     let tagIndex = 0;
@@ -643,22 +614,17 @@ var LionRapidEditor = (() => {
         const attr = el.attributes[i];
         attrs[attr.name.toLowerCase()] = attr.value;
       }
-      const styleList = styleMapper.mapElementToStyles(tag, attrs);
-      if (styleList.length > 0) {
-        tagIndex++;
-        const idx = tagIndex;
-        styles[String(idx)] = styleList;
-        let inner = "";
-        for (let i = 0; i < node.childNodes.length; i++) {
-          inner += walk(node.childNodes[i]);
-        }
-        return `<${idx}>${inner}</${idx}>`;
+      tagIndex++;
+      const idx = tagIndex;
+      styles[String(idx)] = [`raw:${serializeOpeningTag(tag, attrs)}`];
+      if (VOID_TAGS.has(tag)) {
+        return `<${idx}/>`;
       }
-      let result = "";
+      let inner = "";
       for (let i = 0; i < node.childNodes.length; i++) {
-        result += walk(node.childNodes[i]);
+        inner += walk(node.childNodes[i]);
       }
-      return result;
+      return `<${idx}>${inner}</${idx}>`;
     }
     let text = "";
     for (let i = 0; i < element.childNodes.length; i++) {
@@ -1088,16 +1054,6 @@ var LionRapidEditor = (() => {
 
   // src/content/serializer/HTMLSerializer.ts
   var HTMLSerializer = class {
-    constructor(options = {}) {
-      __publicField(this, "styleMapper");
-      this.styleMapper = options.styleMapper ?? new DefaultStyleMapper();
-    }
-    /**
-     * Serialize ContentUnit to HTML string
-     *
-     * @param unit - ContentUnit with indexed tags and styles
-     * @returns HTML string with semantic elements
-     */
     serialize(unit) {
       const { text, styles } = unit;
       const tagPattern = /<(\/?)?(\d+)(\/)?>/g;
@@ -1106,40 +1062,25 @@ var LionRapidEditor = (() => {
       let match;
       while ((match = tagPattern.exec(text)) !== null) {
         result += text.slice(lastIndex, match.index);
-        const [fullMatch, closingSlash, indexStr, selfClosingSlash] = match;
-        const tagIndex = indexStr;
-        const styleList = styles[tagIndex] || [];
-        if (closingSlash) {
-          const mapping = this.styleMapper.mapStylesToElement(styleList);
-          result += `</${mapping.element}>`;
-        } else if (selfClosingSlash) {
-          const mapping = this.styleMapper.mapStylesToElement(styleList);
-          const attrs = this.formatAttributes(mapping.attrs);
-          result += `<${mapping.element}${attrs} />`;
+        const [fullMatch, closingSlash, indexStr] = match;
+        const styleList = styles[indexStr] ?? [];
+        const rawOpen = readRawStyle(styleList);
+        if (rawOpen) {
+          const tagName = extractTagName(rawOpen);
+          const isVoid = VOID_TAGS.has(tagName);
+          if (closingSlash) {
+            if (!isVoid) result += `</${tagName}>`;
+          } else {
+            result += rawOpen;
+          }
         } else {
-          const mapping = this.styleMapper.mapStylesToElement(styleList);
-          const attrs = this.formatAttributes(mapping.attrs);
-          result += `<${mapping.element}${attrs}>`;
+          result += fullMatch;
         }
         lastIndex = match.index + fullMatch.length;
       }
       result += text.slice(lastIndex);
       return result;
     }
-    /**
-     * Format attributes object into HTML attribute string
-     */
-    formatAttributes(attrs) {
-      const entries = Object.entries(attrs);
-      if (entries.length === 0) return "";
-      return " " + entries.map(([key, value]) => `${key}="${this.escapeAttributeValue(value)}"`).join(" ");
-    }
-    /**
-     * Escape special characters in attribute values
-     */
-    escapeAttributeValue(value) {
-      return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    }
   };
 
   // src/browser/editor/live-preview.ts
@@ -1154,10 +1095,12 @@ var LionRapidEditor = (() => {
       const fullKey = `${locale}:${namespace}:${key}`;
       cache.set(fullKey, text, styles);
     }
-    if (styles && Object.keys(styles).length > 0) {
+    const hasIndexedMarkers = /<\/?[0-9]+\/?>/.test(text);
+    const sourceHasStyles = styles && Object.keys(styles).length > 0;
+    if (hasIndexedMarkers) {
       const unit = { text, styles };
       element.innerHTML = htmlSerializer.serialize(unit);
-    } else {
+    } else if (!sourceHasStyles) {
       element.textContent = text;
     }
     element.setAttribute("data-lr-block", key);
@@ -1239,8 +1182,14 @@ var LionRapidEditor = (() => {
     // Server already translated
     "data-lionrapid-client",
     // Client already translated
-    "data-no-translate"
+    "data-no-translate",
     // Explicitly marked to skip
+    // Edge proxy already rendered this block with the correct translation
+    // and styles. Skip in normal extraction so the client-side auto-translator
+    // can't overwrite the styled DOM with a stale (or plain-text) cache entry.
+    // The editor passes includeTranslated=true to bypass this and re-extract
+    // edge-rendered blocks for inspection.
+    "data-lr-block"
   ];
   var BlockExtractor = class {
     constructor(excludePatterns = {}, excludeSelectors = [], minTextLength = 2) {
@@ -1364,6 +1313,10 @@ var LionRapidEditor = (() => {
       __publicField(this, "lastFetchTime", 0);
       __publicField(this, "lastFlushTime", 0);
       __publicField(this, "userRole");
+      // Project workflow context — fetched once on first render, cached for the
+      // sidebar's lifetime. Workflow shape is stable per editor session.
+      __publicField(this, "workflowInfo", null);
+      __publicField(this, "workflowInfoFetched", false);
       this.api = api;
       this.locale = locale;
       this.namespace = namespace;
@@ -1565,9 +1518,14 @@ var LionRapidEditor = (() => {
       const isReady = !!status?.isReady;
       const isLocked = !!status?.isLocked;
       const isConfirmed = !!status?.isConfirmed;
+      const canEdit = status?.canEdit !== false;
       const composite = `${this.locale}:${this.namespace}:${key}`;
       const wrap = document.createElement("div");
       wrap.className = "lr-workflow-actions";
+      const stripHost = document.createElement("div");
+      stripHost.className = "lr-wf-strip-host";
+      wrap.appendChild(stripHost);
+      this.renderWorkflowStrip(stripHost, status);
       const addBtn = (label, action, variant = "secondary") => {
         const btn = document.createElement("button");
         btn.className = `lr-wf-btn lr-wf-${variant}`;
@@ -1582,12 +1540,17 @@ var LionRapidEditor = (() => {
         });
         wrap.appendChild(btn);
       };
-      if (!isLocked && !isReady) {
-        addBtn("Confirm", "confirm", "primary");
-        addBtn("Reject", "reject", "danger");
-      }
-      if (isConfirmed && !isLocked && !isReady) {
-        addBtn("Unconfirm", "unconfirm");
+      if (canEdit && !isLocked && !isReady) {
+        if (!isConfirmed) {
+          addBtn("Confirm", "confirm", "primary");
+          addBtn("Reject", "reject", "danger");
+        } else {
+          const isPerFile = this.workflowInfo?.workflowMode === "per_file";
+          if (!isPerFile) {
+            addBtn("Advance", "advance", "primary");
+          }
+          addBtn("Unconfirm", "unconfirm");
+        }
       }
       if (isPM) {
         if (!isReady) {
@@ -1596,10 +1559,88 @@ var LionRapidEditor = (() => {
           addBtn("Unmark Ready", "unmark-ready", "danger");
         }
       }
+      if (!canEdit && !isPM && !isReady && !isLocked) {
+        const note = document.createElement("span");
+        note.className = "lr-wf-note";
+        note.textContent = typeof status?.stageIndex === "number" && status.stageIndex > 0 ? `Row already advanced (stage ${status.stageIndex + 1}) \u2014 out of your scope.` : "You are not assigned to this row at the current stage.";
+        wrap.appendChild(note);
+      }
       if (wrap.children.length > 0) {
         this.bodyEl.appendChild(wrap);
       }
     }
+    /**
+     * Render the workflow context strip ('Workflow: A → B → C — you are at stage X').
+     * Highlights the user's POV stage and greys the rest.
+     *
+     * Highlight rule:
+     *   - PM/admin: highlight = row's current stage_index (deep-dive view)
+     *   - Non-PM:   highlight = first userAssignedStages entry (fixed POV)
+     *
+     * Workflow info is fetched lazily on first call and cached for the sidebar's
+     * lifetime. While the fetch is in flight, the host stays empty (no flash).
+     */
+    renderWorkflowStrip(host, status) {
+      if (this.workflowInfo) {
+        const node = this.buildWorkflowStripNode(this.workflowInfo, status);
+        host.replaceChildren(...node ? [node] : []);
+        return;
+      }
+      if (this.workflowInfoFetched) return;
+      this.workflowInfoFetched = true;
+      void this.api.fetchWorkflowInfo().then((info) => {
+        this.workflowInfo = info;
+        if (!this.current) return;
+        const fresh = this.statusMap.get(this.current.key) ?? status ?? null;
+        const node = info ? this.buildWorkflowStripNode(info, fresh) : null;
+        if (host.isConnected) host.replaceChildren(...node ? [node] : []);
+      });
+    }
+    buildWorkflowStripNode(info, status) {
+      if (!info.stages || info.stages.length === 0) return null;
+      let highlightIndex = null;
+      if (info.isPmAdmin) {
+        highlightIndex = typeof status?.stageIndex === "number" ? status.stageIndex : null;
+      } else if (info.userAssignedStages.length > 0) {
+        highlightIndex = info.userAssignedStages[0];
+      }
+      const strip = document.createElement("div");
+      strip.className = "lr-wf-strip";
+      const stagesRow = document.createElement("div");
+      stagesRow.className = "lr-wf-strip-stages";
+      info.stages.forEach((stage, i) => {
+        const item = document.createElement("span");
+        item.className = "lr-wf-strip-stage";
+        if (highlightIndex !== null && stage.index === highlightIndex) {
+          item.classList.add("is-active");
+        } else {
+          item.classList.add("is-muted");
+        }
+        item.textContent = stage.name;
+        stagesRow.appendChild(item);
+        if (i < info.stages.length - 1) {
+          const sep = document.createElement("span");
+          sep.className = "lr-wf-strip-sep";
+          sep.textContent = "\u2192";
+          stagesRow.appendChild(sep);
+        }
+      });
+      strip.appendChild(stagesRow);
+      const caption = document.createElement("div");
+      caption.className = "lr-wf-strip-caption";
+      if (highlightIndex !== null) {
+        const stage = info.stages.find((s) => s.index === highlightIndex);
+        const name = stage?.name ?? `Stage ${highlightIndex + 1}`;
+        const label = info.isPmAdmin ? "Row currently at" : "You are here";
+        caption.textContent = `${label}: stage ${highlightIndex + 1} of ${info.stages.length} \u2014 ${name}`;
+      } else if (!info.isPmAdmin && info.userAssignedStages.length === 0) {
+        caption.textContent = "You have no stage assignment on this project.";
+      } else {
+        caption.textContent = `${info.stages.length} stages`;
+      }
+      strip.appendChild(caption);
+      return strip;
+    }
     /** Re-fetch status for one key and re-render the current view. */
     async refreshStatusForKey(key) {
       const fresh = await this.api.fetchStatus([key], this.locale, this.namespace);
@@ -1622,13 +1663,18 @@ var LionRapidEditor = (() => {
       this.bodyEl.appendChild(field);
     }
     /**
-     * Get CSS class for the status dot based on actual row state.
+     * Get CSS class for the status dot based on actual row state, with one
+     * viewer-relative override: rows that have advanced past the viewer's
+     * stage assignment render as 'readonly' (greyed) — same data for everyone,
+     * different signal per viewer. Avoids the new-color-per-stage explosion the
+     * user was originally considering; reuses existing semantics.
      */
     getDotClass(key) {
       if (this.unsavedKeys.has(key)) return "unsaved";
       const s = this.statusMap.get(key);
       if (!s) return "missing";
       if (s.isLocked) return "locked";
+      if (s.canEdit === false && typeof s.stageIndex === "number" && s.stageIndex > 0) return "readonly";
       if (s.isReady) return "ready";
       if (s.isConfirmed) return "confirmed";
       if (s.rowState === "edited") return "edited";
@@ -1735,6 +1781,9 @@ var LionRapidEditor = (() => {
       __publicField(this, "onFlushed", () => {
       });
       __publicField(this, "onSessionExpired", null);
+      // Workflow info is project-scoped and stable for the editor session lifetime.
+      // Cached as a Promise so concurrent callers share one fetch.
+      __publicField(this, "workflowInfoPromise", null);
       __publicField(this, "statusAbort", null);
       __publicField(this, "handleVisibility", () => {
         if (document.visibilityState === "hidden") {
@@ -1873,6 +1922,37 @@ var LionRapidEditor = (() => {
     get pendingCount() {
       return this.queue.length;
     }
+    /**
+     * Fetch workflow context for the project (stages, user's stage assignments,
+     * PM/admin flag). Cached for the editor session lifetime — workflow shape
+     * doesn't change mid-session and the sidebar re-uses it on every row click.
+     * Returns null if the fetch fails; callers should hide the strip in that case.
+     */
+    async fetchWorkflowInfo() {
+      if (this.workflowInfoPromise) return this.workflowInfoPromise;
+      this.workflowInfoPromise = (async () => {
+        try {
+          const response = await fetch(`${this.apiBase}/api/integrations/editor/workflow`, {
+            headers: { "Authorization": `Bearer ${this.sessionToken}` }
+          });
+          if (response.status === 401) {
+            this.handleSessionExpired();
+            return null;
+          }
+          if (!response.ok) return null;
+          const data = await response.json();
+          return {
+            stages: Array.isArray(data.stages) ? data.stages : [],
+            userAssignedStages: Array.isArray(data.user_assigned_stages) ? data.user_assigned_stages : [],
+            isPmAdmin: Boolean(data.is_pm_admin),
+            workflowMode: data.workflow_mode === "per_file" ? "per_file" : "per_row"
+          };
+        } catch {
+          return null;
+        }
+      })();
+      return this.workflowInfoPromise;
+    }
     // ============================================
     // Session renewal
     // ============================================
@@ -1910,6 +1990,7 @@ var LionRapidEditor = (() => {
               token: this.sessionToken,
               exp: payload.exp || 0
             }));
+            document.cookie = "__lr_editor_active=1; path=/; SameSite=Lax";
           }
         } catch {
         }
@@ -1928,6 +2009,7 @@ var LionRapidEditor = (() => {
       }
     }
     handleSessionExpired() {
+      document.cookie = "__lr_editor_active=; path=/; SameSite=Lax; Max-Age=0";
       this.onStatus("error", "Session expired. Please reopen the editor from the dashboard.");
       if (this.onSessionExpired) {
         this.onSessionExpired();
@@ -2369,6 +2451,13 @@ var LionRapidEditor = (() => {
 
   // src/browser/editor/editor-init.ts
   var SESSION_KEY = "__lr_editor_session";
+  var PREVIEW_COOKIE = "__lr_editor_active";
+  function setPreviewCookie() {
+    document.cookie = `${PREVIEW_COOKIE}=1; path=/; SameSite=Lax`;
+  }
+  function clearPreviewCookie() {
+    document.cookie = `${PREVIEW_COOKIE}=; path=/; SameSite=Lax; Max-Age=0`;
+  }
   function getStoredSession() {
     try {
       const raw = sessionStorage.getItem(SESSION_KEY);
@@ -2376,8 +2465,10 @@ var LionRapidEditor = (() => {
       const parsed = JSON.parse(raw);
       if (parsed.exp * 1e3 < Date.now() + 3e4) {
         sessionStorage.removeItem(SESSION_KEY);
+        clearPreviewCookie();
         return null;
       }
+      setPreviewCookie();
       return parsed.token;
     } catch {
       return null;
@@ -2391,11 +2482,13 @@ var LionRapidEditor = (() => {
       const payload = JSON.parse(atob(parts[1]));
       const session = { token, exp: payload.exp || 0 };
       sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));
+      setPreviewCookie();
     } catch {
     }
   }
   function clearSession() {
     sessionStorage.removeItem(SESSION_KEY);
+    clearPreviewCookie();
   }
   function extractSessionRole(token) {
     try {