@particle-academy/fancy-cms-ui 0.0.1-dev.2 → 0.0.1-dev.4

package/dist/chunk-7YYLYBLI.js

@@ -0,0 +1,47 @@
+// src/document/fractional.ts
+var BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var RADIX = BASE.length;
+var MID = Math.floor(RADIX / 2);
+function val(c) {
+  const i = BASE.indexOf(c);
+  return i < 0 ? 0 : i;
+}
+function keyBetween(a, b) {
+  if (a === null) a = "";
+  if (b === null) {
+    return a + BASE[MID];
+  }
+  if (a >= b) {
+    throw new Error(`keyBetween: lower bound "${a}" is not below upper bound "${b}"`);
+  }
+  let result = "";
+  let i = 0;
+  for (; ; ) {
+    const ca = i < a.length ? val(a[i]) : 0;
+    const cb = i < b.length ? val(b[i]) : RADIX;
+    if (cb - ca > 1) {
+      result += BASE[ca + Math.floor((cb - ca) / 2)];
+      return result;
+    }
+    if (ca === cb) {
+      result += BASE[ca];
+      i++;
+      continue;
+    }
+    result += BASE[ca];
+    i++;
+    for (; ; ) {
+      const da = i < a.length ? val(a[i]) : 0;
+      if (RADIX - da > 1) {
+        result += BASE[da + Math.floor((RADIX - da) / 2)];
+        return result;
+      }
+      result += BASE[da];
+      i++;
+    }
+  }
+}
+
+export { keyBetween };
+//# sourceMappingURL=chunk-7YYLYBLI.js.map
+//# sourceMappingURL=chunk-7YYLYBLI.js.map

package/dist/chunk-7YYLYBLI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/document/fractional.ts"],"names":[],"mappings":";AAaA,IAAM,IAAA,GAAO,gEAAA;AACb,IAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,IAAM,GAAA,GAAM,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,CAAC,CAAA;AAEhC,SAAS,IAAI,CAAA,EAAmB;AAC9B,EAAA,MAAM,CAAA,GAAI,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAA;AACxB,EAAA,OAAO,CAAA,GAAI,IAAI,CAAA,GAAI,CAAA;AACrB;AAOO,SAAS,UAAA,CAAW,GAAkB,CAAA,EAA0B;AACrE,EAAA,IAAI,CAAA,KAAM,MAAM,CAAA,GAAI,EAAA;AACpB,EAAA,IAAI,MAAM,IAAA,EAAM;AAEd,IAAA,OAAO,CAAA,GAAI,KAAK,GAAG,CAAA;AAAA,EACrB;AACA,EAAA,IAAI,KAAK,CAAA,EAAG;AACV,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,yBAAA,EAA4B,CAAC,CAAA,4BAAA,EAA+B,CAAC,CAAA,CAAA,CAAG,CAAA;AAAA,EAClF;AAEA,EAAA,IAAI,MAAA,GAAS,EAAA;AACb,EAAA,IAAI,CAAA,GAAI,CAAA;AAER,EAAA,WAAS;AACP,IAAA,MAAM,EAAA,GAAK,IAAI,CAAA,CAAE,MAAA,GAAS,IAAI,CAAA,CAAE,CAAC,CAAW,CAAA,GAAI,CAAA;AAChD,IAAA,MAAM,EAAA,GAAK,IAAI,CAAA,CAAE,MAAA,GAAS,IAAI,CAAA,CAAE,CAAC,CAAW,CAAA,GAAI,KAAA;AAChD,IAAA,IAAI,EAAA,GAAK,KAAK,CAAA,EAAG;AACf,MAAA,MAAA,IAAU,KAAK,EAAA,GAAK,IAAA,CAAK,OAAO,EAAA,GAAK,EAAA,IAAM,CAAC,CAAC,CAAA;AAC7C,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,IAAI,OAAO,EAAA,EAAI;AACb,MAAA,MAAA,IAAU,KAAK,EAAE,CAAA;AACjB,MAAA,CAAA,EAAA;AACA,MAAA;AAAA,IACF;AAGA,IAAA,MAAA,IAAU,KAAK,EAAE,CAAA;AACjB,IAAA,CAAA,EAAA;AACA,IAAA,WAAS;AACP,MAAA,MAAM,EAAA,GAAK,IAAI,CAAA,CAAE,MAAA,GAAS,IAAI,CAAA,CAAE,CAAC,CAAW,CAAA,GAAI,CAAA;AAChD,MAAA,IAAI,KAAA,GAAQ,KAAK,CAAA,EAAG;AAClB,QAAA,MAAA,IAAU,KAAK,EAAA,GAAK,IAAA,CAAK,OAAO,KAAA,GAAQ,EAAA,IAAM,CAAC,CAAC,CAAA;AAChD,QAAA,OAAO,MAAA;AAAA,MACT;AACA,MAAA,MAAA,IAAU,KAAK,EAAE,CAAA;AACjB,MAAA,CAAA,EAAA;AAAA,IACF;AAAA,EACF;AACF","file":"chunk-7YYLYBLI.js","sourcesContent":["/**\n * Minimal collab-safe fractional ordering keys.\n *\n * Sibling `order` is a string over a base-62 alphabet interpreted as a fraction\n * in (0, 1). `keyBetween(a, b)` returns a key that sorts strictly between `a`\n * and `b` (lexicographically), extending precision when the bounds are\n * adjacent. Concurrent inserts at the same spot produce different keys (vary by\n * actor), so reorders never collide.\n *\n * This is intentionally compact for Phase 0. Before live collaboration ships it\n * should be swapped for a hardened implementation with jitter + bucket bounds.\n */\n\nconst BASE = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\nconst RADIX = BASE.length; // 62\nconst MID = Math.floor(RADIX / 2);\n\nfunction val(c: string): number {\n  const i = BASE.indexOf(c);\n  return i < 0 ? 0 : i;\n}\n\n/**\n * Return a key strictly between `a` and `b`. Pass `null` for an open bound\n * (`keyBetween(null, null)` for the first key, `keyBetween(last, null)` to\n * append, `keyBetween(null, first)` to prepend).\n */\nexport function keyBetween(a: string | null, b: string | null): string {\n  if (a === null) a = \"\";\n  if (b === null) {\n    // Append: a key greater than `a`. Appending a mid digit always sorts after.\n    return a + BASE[MID];\n  }\n  if (a >= b) {\n    throw new Error(`keyBetween: lower bound \"${a}\" is not below upper bound \"${b}\"`);\n  }\n\n  let result = \"\";\n  let i = 0;\n  // Walk the common prefix, then split at the first differing digit.\n  for (;;) {\n    const ca = i < a.length ? val(a[i] as string) : 0;\n    const cb = i < b.length ? val(b[i] as string) : RADIX;\n    if (cb - ca > 1) {\n      result += BASE[ca + Math.floor((cb - ca) / 2)];\n      return result;\n    }\n    if (ca === cb) {\n      result += BASE[ca];\n      i++;\n      continue;\n    }\n    // Adjacent digits (cb - ca === 1): take the lower path, then descend into\n    // `a`'s remainder with RADIX as the upper bound until a gap opens.\n    result += BASE[ca];\n    i++;\n    for (;;) {\n      const da = i < a.length ? val(a[i] as string) : 0;\n      if (RADIX - da > 1) {\n        result += BASE[da + Math.floor((RADIX - da) / 2)];\n        return result;\n      }\n      result += BASE[da];\n      i++;\n    }\n  }\n}\n"]}

package/dist/editor.cjs

@@ -697,138 +697,288 @@ function Toolbar({ ed }) {
     }
   );
 }
+
+// src/document/fractional.ts
+var BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var RADIX = BASE.length;
+var MID = Math.floor(RADIX / 2);
+function keyBetween(a, b) {
+  if (a === null) a = "";
+  {
+    return a + BASE[MID];
+  }
+}
+var Z = 2147483e3;
 function EditablePage({
   doc,
   registry = defaultRegistry,
-  defaultEditing = false,
-  timelineDock
+  timelineDock,
+  transforms,
+  onNodeTransform,
+  onSelect
 }) {
   const ed = useEditor(doc);
-  const [editing, setEditing] = react.useState(defaultEditing);
+  const [editing, setEditing] = react.useState(false);
+  const [revealed, setRevealed] = react.useState(false);
   const pageRef = react.useRef(null);
   const [box, setBox] = react.useState(null);
   const { selection } = ed.state;
+  const selNode = selection ? ed.state.doc.nodes[selection] : null;
+  react.useEffect(() => onSelect?.(selection), [selection, onSelect]);
+  react.useEffect(() => {
+    const onKey = (e) => setRevealed(e.ctrlKey && e.shiftKey);
+    const onBlur = () => setRevealed(false);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("keyup", onKey);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("keyup", onKey);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, []);
+  react.useEffect(() => {
+    const root = pageRef.current;
+    if (!root) return;
+    root.querySelectorAll("[data-cms]").forEach((el) => {
+      const id = el.dataset.cms;
+      const t = id ? transforms?.[id] : void 0;
+      if (t) {
+        el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1})`;
+        el.style.opacity = t.opacity != null ? String(t.opacity) : "";
+      } else {
+        el.style.transform = "";
+        el.style.opacity = "";
+      }
+    });
+  }, [transforms, ed.state.doc]);
+  const measureBox = react.useCallback(() => {
+    if (!editing || !selection || !pageRef.current) return setBox(null);
+    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    if (!el) return setBox(null);
+    const r = el.getBoundingClientRect();
+    setBox({ x: r.left, y: r.top, w: r.width, h: r.height });
+  }, [editing, selection]);
   react.useLayoutEffect(() => {
-    if (!editing || !selection || !pageRef.current) {
-      setBox(null);
-      return;
-    }
-    const update = () => {
-      const el = pageRef.current?.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
-      if (!el) return setBox(null);
-      const r = el.getBoundingClientRect();
-      setBox({ x: r.left, y: r.top, w: r.width, h: r.height });
+    measureBox();
+    window.addEventListener("scroll", measureBox, { passive: true });
+    window.addEventListener("resize", measureBox);
+    return () => {
+      window.removeEventListener("scroll", measureBox);
+      window.removeEventListener("resize", measureBox);
     };
-    update();
-    window.addEventListener("scroll", update, { passive: true });
-    window.addEventListener("resize", update);
+  }, [measureBox, ed.state.doc, transforms]);
+  react.useEffect(() => {
+    if (!editing || !selection || !pageRef.current || selNode?.type !== "text") return;
+    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    if (!el) return;
+    el.setAttribute("contenteditable", "true");
+    el.style.outline = "none";
+    el.focus();
+    const commit = () => ed.apply({ t: "set_props", id: selection, patch: { content: el.innerText } });
+    el.addEventListener("blur", commit);
     return () => {
-      window.removeEventListener("scroll", update);
-      window.removeEventListener("resize", update);
+      el.removeEventListener("blur", commit);
+      el.removeAttribute("contenteditable");
     };
-  }, [editing, selection, ed.state.doc]);
+  }, [editing, selection, selNode?.type, ed]);
   const onClickCapture = (e) => {
     if (!editing) return;
     const el = e.target.closest("[data-cms]");
     if (el) {
+      if (el.getAttribute("contenteditable") === "true") return;
       e.preventDefault();
       e.stopPropagation();
       ed.select(el.getAttribute("data-cms"));
     }
   };
-  const outline = box ? {
-    position: "fixed",
-    left: box.x,
-    top: box.y,
-    width: box.w,
-    height: box.h,
-    outline: "2px solid #8b5cf6",
-    outlineOffset: -1,
-    pointerEvents: "none",
-    zIndex: 2147483e3
-  } : null;
+  const addText = react.useCallback(() => {
+    const parent = selNode && selNode.type !== "text" ? selNode.id : ed.state.doc.sections[0] ?? null;
+    const siblings = childrenOf(ed.state.doc, parent);
+    const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null);
+    const id = `n${ed.state.doc.seq + 1}-${Math.floor(performance.now())}`;
+    ed.apply({ t: "insert_node", node: { id, type: "text", parent, order, props: { content: "New text" }, style: { base: { color: "inherit" } } } });
+    ed.select(id);
+  }, [ed, selNode]);
+  const setStyle = (patch) => selection && ed.apply({ t: "set_style", id: selection, breakpoint: "base", patch });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: pageRef, onClickCapture, children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry }) }),
-    editing && outline ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: outline }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
+    editing && box && selection ? /* @__PURE__ */ jsxRuntime.jsx(
+      SelectionOverlay,
+      {
+        box,
+        base: transforms?.[selection] ?? {},
+        movable: Boolean(onNodeTransform),
+        getEl: () => pageRef.current?.querySelector(`[data-cms="${cssEscape2(selection)}"]`) ?? null,
+        onTransform: (t) => onNodeTransform?.(selection, t),
+        onLive: measureBox
+      }
+    ) : null,
+    editing && box && selNode ? /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbar, { box, isText: selNode.type === "text", base: selNode.style.base, setStyle }) : null,
+    revealed || editing ? /* @__PURE__ */ jsxRuntime.jsx(
       EditBar,
       {
         editing,
-        onToggle: () => setEditing((v) => !v),
+        onToggle: () => {
+          setEditing((v) => !v);
+          ed.select(null);
+        },
         canUndo: ed.canUndo,
         canRedo: ed.canRedo,
         onUndo: ed.undo,
         onRedo: ed.redo,
-        hasDock: Boolean(timelineDock)
+        onAddText: addText
       }
-    ),
-    editing && selection ? /* @__PURE__ */ jsxRuntime.jsx("aside", { style: inspectorPanel, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection, apply: ed.apply }) }) : null,
-    editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: dockSlot, children: timelineDock }) : null
+    ) : null,
+    editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: 0, right: 0, bottom: 0, zIndex: Z }, children: timelineDock }) : null
   ] });
 }
-var inspectorPanel = {
-  position: "fixed",
-  top: 56,
-  right: 12,
-  bottom: 12,
-  width: 300,
-  background: "#fff",
-  border: "1px solid #e2e8f0",
-  borderRadius: 12,
-  boxShadow: "0 10px 30px -10px rgba(0,0,0,0.25)",
-  overflow: "auto",
-  zIndex: 2147483001
-};
-var dockSlot = {
-  position: "fixed",
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 2147483e3
-};
-function EditBar({
-  editing,
-  onToggle,
-  canUndo,
-  canRedo,
-  onUndo,
-  onRedo,
-  hasDock
+function SelectionOverlay({
+  box,
+  base,
+  movable,
+  getEl,
+  onTransform,
+  onLive
 }) {
-  const bar = {
+  const drag = react.useRef(null);
+  const apply = (t) => {
+    const el = getEl();
+    if (el) {
+      el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1})`;
+      el.style.opacity = t.opacity != null ? String(t.opacity) : "";
+    }
+  };
+  const start = (kind) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    drag.current = { kind, x: e.clientX, y: e.clientY, w: box.w, live: { ...base } };
+  };
+  const move = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    if (d.kind === "move") {
+      d.live = { ...base, x: (base.x ?? 0) + (e.clientX - d.x), y: (base.y ?? 0) + (e.clientY - d.y) };
+    } else {
+      const factor = Math.max(0.1, (d.w + (e.clientX - d.x)) / d.w);
+      d.live = { ...base, scale: Number(((base.scale ?? 1) * factor).toFixed(3)) };
+    }
+    apply(d.live);
+    onLive();
+  };
+  const end = () => {
+    const d = drag.current;
+    if (d) onTransform(d.live);
+    drag.current = null;
+  };
+  const outline = {
+    position: "fixed",
+    left: box.x - 1,
+    top: box.y - 1,
+    width: box.w + 2,
+    height: box.h + 2,
+    outline: "2px solid #8b5cf6",
+    borderRadius: 4,
+    pointerEvents: "none",
+    zIndex: Z
+  };
+  const handle = {
+    position: "fixed",
+    width: 16,
+    height: 16,
+    background: "#8b5cf6",
+    border: "2px solid #fff",
+    borderRadius: 5,
+    zIndex: Z + 1,
+    touchAction: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: outline }),
+    movable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: "Drag to move",
+          onPointerDown: start("move"),
+          onPointerMove: move,
+          onPointerUp: end,
+          style: { ...handle, left: box.x - 9, top: box.y - 9, cursor: "move", borderRadius: 9 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: "Drag to resize",
+          onPointerDown: start("resize"),
+          onPointerMove: move,
+          onPointerUp: end,
+          style: { ...handle, left: box.x + box.w - 7, top: box.y + box.h - 7, cursor: "nwse-resize" }
+        }
+      )
+    ] }) : null
+  ] });
+}
+function FloatingToolbar({
+  box,
+  isText,
+  base,
+  setStyle
+}) {
+  const wrap = {
     position: "fixed",
-    top: 12,
-    right: 12,
+    left: box.x,
+    top: Math.max(8, box.y - 46),
     display: "flex",
-    gap: 6,
     alignItems: "center",
-    padding: 6,
+    gap: 8,
+    padding: "6px 10px",
     background: "#0f172a",
     color: "#fff",
+    border: "1px solid rgba(255,255,255,0.12)",
     borderRadius: 999,
-    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)",
-    zIndex: 2147483002,
+    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.5)",
+    zIndex: Z + 2,
     fontFamily: "system-ui, sans-serif",
     fontSize: 12
   };
-  const btn = {
-    font: "inherit",
-    border: "none",
-    background: "transparent",
-    color: "inherit",
-    cursor: "pointer",
-    padding: "4px 8px",
-    borderRadius: 999
-  };
+  const swatch = { width: 22, height: 22, border: "none", background: "transparent", padding: 0, cursor: "pointer" };
+  const num = { width: 52, background: "#1e293b", color: "#fff", border: "1px solid #334155", borderRadius: 6, padding: "3px 6px", font: "inherit" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrap, onMouseDown: (e) => e.preventDefault(), children: [
+    isText ? /* @__PURE__ */ jsxRuntime.jsxs("label", { title: "Text color", style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: "A" }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", style: swatch, value: base.color ?? "#0f172a", onChange: (e) => setStyle({ color: e.target.value }) })
+    ] }) : null,
+    isText ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "number", title: "Font size (px)", style: num, placeholder: "size", value: base.fontSize?.value ?? "", onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { title: "Background", style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: "BG" }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", style: swatch, value: normalizeColor(base.background), onChange: (e) => setStyle({ background: e.target.value }) })
+    ] })
+  ] });
+}
+function EditBar({
+  editing,
+  onToggle,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onAddText
+}) {
+  const bar = { position: "fixed", top: 12, right: 12, display: "flex", gap: 6, alignItems: "center", padding: 6, background: "#0f172a", color: "#fff", borderRadius: 999, boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)", zIndex: Z + 3, fontFamily: "system-ui, sans-serif", fontSize: 12 };
+  const btn = { font: "inherit", border: "none", background: "transparent", color: "inherit", cursor: "pointer", padding: "4px 8px", borderRadius: 999 };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bar, children: [
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, background: editing ? "#8b5cf6" : "transparent" }, onClick: onToggle, children: editing ? "\u25CF Editing" : "Edit" }),
     editing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onClick: onAddText, title: "Add a text element", children: "\uFF0B Text" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canUndo ? 1 : 0.4 }, disabled: !canUndo, onClick: onUndo, children: "\u21B6" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canRedo ? 1 : 0.4 }, disabled: !canRedo, onClick: onRedo, children: "\u21B7" }),
-      !hasDock ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.5, paddingRight: 6 }, children: "timeline: fancy-motion \u2192" }) : null
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canRedo ? 1 : 0.4 }, disabled: !canRedo, onClick: onRedo, children: "\u21B7" })
     ] }) : null
   ] });
 }
+function normalizeColor(v) {
+  return v && /^#[0-9a-fA-F]{6}$/.test(v) ? v : "#ffffff";
+}
 function cssEscape2(value) {
   return value.replace(/["\\]/g, "\\$&");
 }