Phosphor
DraftThis article is currently in draft mode

Click to Source: Embedding Runtime Locations
⋅

Anchors
- Anchors

Build-time transforms inject source locations into runtime code. Alt+Click any element to jump to its source file.

Try It
⋅

Hold Alt and hover over any button, then click to view its source. The mock console shows what file would open, and the viewer displays the source code.

React Component Locations
⋅

Transform $ prop shorthand into data-loc attributes:

        if (enableReact$Loc && path.endsWith(".tsx")) {
          for (const match of code.matchAll(CLASSNAME_$_RE)) {
            const index = match.index!;
            const [_, pre, post] = match;
            const { line, column } = indexToLineAndColumn(code, index + pre.length);

            const link = `${path.slice(inCodebase.index + IN_CODEBASE_SLICE)}:${line}:${column}`;
            let dataAttrs = `data-loc=${JSON.stringify(link)}`;
            if (pre.startsWith("<")) {
              dataAttrs = `${dataAttrs} data-name=${JSON.stringify(pre.split(" ")[0].slice(1).trim())}`;
            }

            if (post === "=") {
              string.overwrite(index + pre.length, index + _.length - post.length, `${dataAttrs} className`);
            } else {
              string.overwrite(index + pre.length, index + _.length - post.length, dataAttrs);
            }
          }
        }
  // Input:
  <div $="card">Content</div>

  // Output (at build):
  <div data-loc="components/Card.tsx:26:7" className="card">Content</div>

Runtime handler walks React fiber tree and opens the file:

const getPath = (fiber: Fiber, element: HTMLElement | undefined): string | undefined => {
  // First check for data-loc attribute if element is provided
  if (element?.dataset.loc) {
    return element.dataset.loc;
  }

  const source = fiber._debugSource ?? fiber._debugInfo ?? fiber._source;

  if (!source) return undefined;

  const { fileName, lineNumber = 1, columnNumber = 1 } = source;
  return `${fileName}:${lineNumber}:${columnNumber}`;
};

const getLayersForElement = (element: HTMLElement, root: string): ComponentLayer[] => {
  let instance = getReactInstanceForElement(element);
  const layers: ComponentLayer[] = [];

  while (instance) {
    // Try to find the DOM element for this fiber to check for data-loc
    const fiberElement = instance.stateNode instanceof HTMLElement ? instance.stateNode : undefined;
    const path = getPath(instance, fiberElement);
    if (path) {
      const name =
        typeof instance.type === "string"
          ? instance.type
          : (instance.type.displayName ?? instance.type.name ?? instance.type.render?.name ?? "undefined");
      layers.push({ name, path: path.replace(`${root}/`, "") });
    }
    instance = instance._debugOwner ?? undefined;
  }
  return layers;
};

DevString Locations
⋅

Tagged templates automatically capture call-site locations:

        if (enableDevLoc) {
          for (const match of code.matchAll(DEV_RE)) {
            const index = match.index!;
            const { line, column } = indexToLineAndColumn(code, index);
            const [_, fn, message] = match;
            const link = `${path.slice(inCodebase.index + IN_CODEBASE_SLICE)}:${line}:${column}`;
            string.overwrite(index, index + _.length, `${fn}\`${message}\`.ctx({ loc: ${JSON.stringify(link)} })`);
          }
        }
// Input:
handler(dev`User pressed X`);

// Output (at build):
handler(dev`User pressed X`.ctx({ loc: "Card.tsx:83:12" }));

Usage:

function deleteCard(reason: DevString) {
  console.log("Called from:", reason.toJSON().context.loc);
}

deleteCard(dev`User clicked delete`);
// Automatically knows source location

DevStrings compose with .because() to build audit trails:

const rootEvent = dev`keydown from root`;
handler(rootEvent.because(dev`Looking for action handler`));
// Creates chain: "keydown from root → Looking for action handler"

Editor Integration
⋅

Local HTTP endpoint opens files:

let lastOpenedFile: string | null = null;
/**
 * uses our launch-editor endpoint to open the file in the dev's editor
 * this has been set up as a vite plugin.
 */
export const openInDevEditor = (loc: string) => {
  if (lastOpenedFile === loc) return;
  lastOpenedFile = loc;
  setTimeout(() => (lastOpenedFile = null), 500);
  void fetch(`http://localhost:5090/__open-in-editor?file=${loc}`).catch((error) => {
    console.error("Failed to open in editor", error);
  });
};
openInDevEditor("Card.tsx:26:7");
  ↓
fetch("http://localhost:5090/__open-in-editor?file=Card.tsx:26:7");
  ↓
// Editor opens at that line

Setup
⋅

Build plugin:

import { bunDevStringAndReact$ClassNameLoc } from "./bun-dev-and-react-$-className-loc.mts";

await Bun.build({
  plugins: [
    bunDevStringAndReact$ClassNameLoc({
      enableReact$Loc: true,
      enableDevLoc: true,
    }),
  ],
});

Runtime:

import { initClickToSource } from "./click-to-source.client.ts";

if (import.meta.env.DEV) {
  initClickToSource();
}
Tera Template Context (Zola data-loc) 
{
  "config": {
    "base_url": "/",
    "mode": "build",
    "title": "Phosphor",
    "description": "Things we learned while building Phosphor",
    "languages": {},
    "default_language": "en",
    "generate_feed": true,
    "generate_feeds": true,
    "feed_filenames": [
      "atom.xml"
    ],
    "taxonomies": [],
    "author": null,
    "build_search_index": true,
    "extra": {
      "sections": [
        "Getting Started",
        "Managing Complexity",
        "Moving Quickly",
        "Understanding Quickly",
        "Architecture Patterns",
        "Interactive Demos",
        "Developer Tools",
        "Advanced Topics"
      ],
      "author": "Phosphor",
      "drafts": true
    },
    "markdown": {
      "highlight_code": true,
      "error_on_missing_highlight": false,
      "highlight_theme": "base16-ocean-dark",
      "highlight_themes_css": [],
      "render_emoji": false,
      "external_links_class": null,
      "external_links_target_blank": false,
      "external_links_no_follow": false,
      "external_links_no_referrer": false,
      "smart_punctuation": false,
      "definition_list": false,
      "bottom_footnotes": false,
      "extra_syntaxes_and_themes": [],
      "lazy_async_image": false,
      "insert_anchor_links": "none",
      "github_alerts": false
    },
    "search": {
      "index_format": "elasticlunr_javascript"
    },
    "generate_sitemap": true,
    "generate_robots_txt": true,
    "exclude_paginated_pages_in_sitemap": "none"
  },
  "current_path": "/click-to-source/",
  "current_url": "/click-to-source/",
  "lang": "en",
  "page": {
    "relative_path": "click-to-source.md",
    "colocated_path": null,
    "content": "
Click to Source: Embedding Runtime Locations 
⋅
\n\n\n
\n  \n    Anchors\n  \n  \n  
- Anchors
\n
\n\n
Build-time transforms inject source locations into runtime code. Alt+Click any element to jump to its source file.
\n
Try It 
⋅
\n
\nHold Alt and hover over any button, then click to view its source. The mock console shows what file would open, and the viewer displays the source code.\n
\n\n
React Component Locations 
⋅
\n
Transform $ prop shorthand into data-loc attributes:
\n
\n  \n  
\n    
        if (enableReact$Loc && path.endsWith(\".tsx\")) {\n          for (const match of code.matchAll(CLASSNAME_$_RE)) {\n            const index = match.index!;\n            const [_, pre, post] = match;\n            const { line, column } = indexToLineAndColumn(code, index + pre.length);\n\n            const link = `${path.slice(inCodebase.index + IN_CODEBASE_SLICE)}:${line}:${column}`;\n            let dataAttrs = `data-loc=${JSON.stringify(link)}`;\n            if (pre.startsWith(\"<\")) {\n              dataAttrs = `${dataAttrs} data-name=${JSON.stringify(pre.split(\" \")[0].slice(1).trim())}`;\n            }\n\n            if (post === \"=\") {\n              string.overwrite(index + pre.length, index + _.length - post.length, `${dataAttrs} className`);\n            } else {\n              string.overwrite(index + pre.length, index + _.length - post.length, dataAttrs);\n            }\n          }\n        }
\n  
\n
\n
  // Input:\n  <div $="card">Content</div>\n\n  // Output (at build):\n  <div data-loc="components/Card.tsx:26:7" className="card">Content</div>\n
\n
Runtime handler walks React fiber tree and opens the file:
\n
\n  \n  
\n    
const getPath = (fiber: Fiber, element: HTMLElement | undefined): string | undefined => {\n  // First check for data-loc attribute if element is provided\n  if (element?.dataset.loc) {\n    return element.dataset.loc;\n  }\n\n  const source = fiber._debugSource ?? fiber._debugInfo ?? fiber._source;\n\n  if (!source) return undefined;\n\n  const { fileName, lineNumber = 1, columnNumber = 1 } = source;\n  return `${fileName}:${lineNumber}:${columnNumber}`;\n};\n\nconst getLayersForElement = (element: HTMLElement, root: string): ComponentLayer[] => {\n  let instance = getReactInstanceForElement(element);\n  const layers: ComponentLayer[] = [];\n\n  while (instance) {\n    // Try to find the DOM element for this fiber to check for data-loc\n    const fiberElement = instance.stateNode instanceof HTMLElement ? instance.stateNode : undefined;\n    const path = getPath(instance, fiberElement);\n    if (path) {\n      const name =\n        typeof instance.type === \"string\"\n          ? instance.type\n          : (instance.type.displayName ?? instance.type.name ?? instance.type.render?.name ?? \"undefined\");\n      layers.push({ name, path: path.replace(`${root}/`, \"\") });\n    }\n    instance = instance._debugOwner ?? undefined;\n  }\n  return layers;\n};
\n  
\n
\n
DevString Locations 
⋅
\n
Tagged templates automatically capture call-site locations:
\n
\n  \n  
\n    
        if (enableDevLoc) {\n          for (const match of code.matchAll(DEV_RE)) {\n            const index = match.index!;\n            const { line, column } = indexToLineAndColumn(code, index);\n            const [_, fn, message] = match;\n            const link = `${path.slice(inCodebase.index + IN_CODEBASE_SLICE)}:${line}:${column}`;\n            string.overwrite(index, index + _.length, `${fn}\\`${message}\\`.ctx({ loc: ${JSON.stringify(link)} })`);\n          }\n        }
\n  
\n
\n
// Input:\nhandler(dev`User pressed X`);\n\n// Output (at build):\nhandler(dev`User pressed X`.ctx({ loc: "Card.tsx:83:12" }));\n
\n
Usage:
\n
function deleteCard(reason: DevString) {\n  console.log("Called from:", reason.toJSON().context.loc);\n}\n\ndeleteCard(dev`User clicked delete`);\n// Automatically knows source location\n
\n
DevStrings compose with .because() to build audit trails:
\n
const rootEvent = dev`keydown from root`;\nhandler(rootEvent.because(dev`Looking for action handler`));\n// Creates chain: "keydown from root → Looking for action handler"\n
\n
Editor Integration 
⋅
\n
Local HTTP endpoint opens files:
\n
\n  \n  
\n    
let lastOpenedFile: string | null = null;\n/**\n * uses our launch-editor endpoint to open the file in the dev's editor\n * this has been set up as a vite plugin.\n */\nexport const openInDevEditor = (loc: string) => {\n  if (lastOpenedFile === loc) return;\n  lastOpenedFile = loc;\n  setTimeout(() => (lastOpenedFile = null), 500);\n  void fetch(`http://localhost:5090/__open-in-editor?file=${loc}`).catch((error) => {\n    console.error(\"Failed to open in editor\", error);\n  });\n};
\n  
\n
\n
openInDevEditor("Card.tsx:26:7");\n  ↓\nfetch("http://localhost:5090/__open-in-editor?file=Card.tsx:26:7");\n  ↓\n// Editor opens at that line\n
\n
Setup 
⋅
\n
Build plugin:
\n
import { bunDevStringAndReact$ClassNameLoc } from "./bun-dev-and-react-$-className-loc.mts";\n\nawait Bun.build({\n  plugins: [\n    bunDevStringAndReact$ClassNameLoc({\n      enableReact$Loc: true,\n      enableDevLoc: true,\n    }),\n  ],\n});\n
\n
Runtime:
\n
import { initClickToSource } from "./click-to-source.client.ts";\n\nif (import.meta.env.DEV) {\n  initClickToSource();\n}\n
\n",
    "permalink": "/click-to-source/",
    "slug": "click-to-source",
    "ancestors": [
      "_index.md"
    ],
    "title": "Click to Source: Embedding Runtime Locations",
    "description": null,
    "updated": null,
    "date": "2025-10-20",
    "year": 2025,
    "month": 10,
    "day": 20,
    "taxonomies": {},
    "authors": [],
    "extra": {
      "nav_section": "Moving Quickly",
      "nav_order": 1
    },
    "path": "/click-to-source/",
    "components": [
      "click-to-source"
    ],
    "summary": null,
    "toc": [
      {
        "level": 1,
        "id": "click-to-source-embedding-runtime-locations",
        "permalink": "/click-to-source/#click-to-source-embedding-runtime-locations",
        "title": "Click to Source: Embedding Runtime Locations ⋅",
        "children": [
          {
            "level": 2,
            "id": "try-it",
            "permalink": "/click-to-source/#try-it",
            "title": "Try It ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "react-component-locations",
            "permalink": "/click-to-source/#react-component-locations",
            "title": "React Component Locations ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "devstring-locations",
            "permalink": "/click-to-source/#devstring-locations",
            "title": "DevString Locations ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "editor-integration",
            "permalink": "/click-to-source/#editor-integration",
            "title": "Editor Integration ⋅",
            "children": []
          },
          {
            "level": 2,
            "id": "setup",
            "permalink": "/click-to-source/#setup",
            "title": "Setup ⋅",
            "children": []
          }
        ]
      }
    ],
    "word_count": 255,
    "reading_time": 2,
    "assets": [],
    "draft": true,
    "lang": "en",
    "lower": {
      "relative_path": "tight-javascriptify.md",
      "colocated_path": null,
      "content": "
Tight Javascriptify: Extensible Value Serialization 
⋅
\n
Serialize any JavaScript value to a readable string with hooks for custom transformations. Handles circular refs, Maps, Sets, Errors, and more.
\n
Basic Usage 
⋅
\n
import { tightJavaScriptify } from "@phosphor/utils";\n\ntightJavaScriptify({ user: "alice", id: 42 });\n// → {user:alice,id:42}\n\ntightJavaScriptify(new Map([["key", "value"]]));\n// → {$Map(1):[["key","value"]]}\n\ntightJavaScriptify(new Error("failed"));\n// → {name:Error,message:failed,stack:...}\n
\n
Built-in Type Support 
⋅
\n
\n  \n  
\n    
function builtInPreHookForJsTypes(key: string, value: unknown): null | { value: unknown } {\n  // Convert Map/Set to a standard object structure so that JSON.stringify can handle them\n  if (value instanceof Map) {\n    const entries = Array.from(value.entries());\n    return { value: { [`$Map(${value.size})`]: entries } };\n  }\n  if (value instanceof Set) {\n    const values = Array.from(value);\n    return { value: { [`$Set(${value.size})`]: values } };\n  }\n  if (value instanceof Uint8Array) {\n    return { value: { [`$Uint8Array(${value.length})`]: uint8ArrayToUtf8String(value) } };\n  }\n  if (value instanceof Date) {\n    return { value: { $Date: value.toISOString() } };\n  }\n  return null;\n}
\n  
\n
\n
Automatically handles:
\n
    \n
  • Map/Set → {$Map(n): entries} / {$Set(n): values}
    • \n
  • Date → {$Date: \"2025-10-21T...\"}
    • \n
  • Uint8Array → {$Uint8Array(n): \"utf8 string\"}
    • \n
  • Error → {name, message, stack}
    • \n
  • Function → \"functionName\" or truncated toString()
    • \n
  • Circular refs → [Circular? key: Object]
    • \n
\n
Extensible Hooks 
⋅
\n
Add custom transformations with preHooks, hooks, or postHooks:
\n
\n  \n  
\n    
/**\n * Applies each hook in sequence. The first hook that returns a non-null object\n * wins. If none return anything, returns undefined.\n */\nfunction applyHooks(key: string, value: unknown, hooks: TightJavaScriptifyHook[], seen = new WeakMap()): unknown {\n  let current = value;\n  if (isObject(current)) {\n    if (seen.has(current)) return `[Circular? ${seen.get(current)}]`;\n    seen.set(current, `${key}: ${toString(current)}`);\n  }\n  if (hooks.length > 0) {\n    for (const hook of hooks) {\n      const result = hook.replacer(key, current);\n      if (result != null) {\n        current = result.value;\n      }\n    }\n  }\n  current = toJSON(current);\n  if (Array.isArray(current)) {\n    for (let i = 0; i < current.length; i++) {\n      current[i] = applyHooks(String(i), current[i], hooks, seen);\n    }\n  } else if (current && typeof current === \"object\") {\n    const result: Record<string, unknown> = {};\n    for (const [subKey, subValue] of Object.entries(current)) {\n      result[subKey] = applyHooks(subKey, subValue, hooks, seen);\n    }\n    return result;\n  }\n  return current;\n}
\n  
\n
\n
Example: Custom Class 
⋅
\n
class UserId {\n  constructor(public id: string) {}\n}\n\ntightJavaScriptify.hooks.push({\n  name: "UserId",\n  replacer: (key, value) => {\n    if (value instanceof UserId) {\n      return { value: { $UserId: value.id } };\n    }\n    return null;\n  },\n});\n\ntightJavaScriptify({ user: new UserId("u123") });\n// → {user:{$UserId:u123}}\n
\n
Example: Redact Secrets 
⋅
\n
tightJavaScriptify.preHooks.push({\n  name: "RedactAPIKeys",\n  replacer: (key, value) => {\n    if (key === "apiKey" && typeof value === "string") {\n      return { value: value.slice(0, 4) + "..." };\n    }\n    return null;\n  },\n});\n\ntightJavaScriptify({ apiKey: "sk_live_abc123xyz" });\n// → {apiKey:sk_l...}\n
\n
Hook Execution Order 
⋅
\n
// Single-pass traversal applies hooks in order:\n[\n  ...tightJavaScriptify.preHooks, // Built-in JS types (Map/Set/Date)\n  ...extraHooks, // Per-call custom hooks\n  ...tightJavaScriptify.hooks, // Global user hooks\n  ...tightJavaScriptify.postHooks, // Error/Function fallbacks\n];\n
\n
Per-Call Hooks 
⋅
\n
Pass one-off hooks without mutating global state:
\n
const redactEmail = {\n  name: "RedactEmail",\n  replacer: (key: string, value: unknown) => {\n    if (key === "email") return { value: "***" };\n    return null;\n  },\n};\n\ntightJavaScriptify({ email: "alice@example.com" }, [redactEmail]);\n// → {email:***}\n
\n
Full Source 
⋅
\n
\n  \n  
\n    
/**\n * Serializes a value to a \"tight\" JavaScript-ish string.\n * By default, it handles circular objects, Errors, etc. If you wish to add\n * custom transformations, push a new hook to `tightJavaScriptify.hooks`.\n *\n * Performance optimization: This implementation performs a single traversal of the data\n * structure while maintaining the order of hook application (preHooks -> extraHooks ->\n * hooks -> postHooks). This avoids multiple recursive traversals of the same structure.\n *\n * Example usage:\n * ```ts\n * tightJavaScriptify.hooks.push({\n *   name: \"myHook\",\n *   replacer: (key, value) => {\n *     if (isMySpecialObject(value)) {\n *       return { value: transformMyObject(value) };\n *     }\n *     return null;\n *   }\n * })\n * const result = tightJavaScriptify(myData);\n *\n * // For custom preHooks:\n * tightJavaScriptify.preHooks.push({\n *   name: \"replaceDates\",\n *   replacer: (key, value) => {\n *     if (value instanceof Date) {\n *       return { value: { $Date: value.toISOString() } };\n *     }\n *     return null;\n *   }\n * });\n *\n * // We also have a default builtInPreHookForMapAndSet that handles Map/Set\n * // You can remove it if you wish to override map or set transformations:\n * tightJavaScriptify.preHooks = tightJavaScriptify.preHooks.filter(h => h.name !== \"builtInMapSetHook\");\n * ```\n */\nfunction tightJavaScriptify(value: unknown, extraHooks?: (Falsey | TightJavaScriptifyHook)[]): string {\n  let traversed = toJSON(value);\n\n  const combinedHooks = [\n    ...tightJavaScriptify.preHooks,\n    ...(extraHooks ?? []),\n    ...tightJavaScriptify.hooks,\n    ...tightJavaScriptify.postHooks,\n  ].filter(isTruthy);\n  // Single traversal applying all hooks in sequence\n  traversed = applyHooks(\"\", traversed, combinedHooks);\n  // try {\n  //   traversed.hooked = combinedHooks.map((h) => h.name).join(\" -> \");\n  // } catch {}\n\n  if (traversed === undefined) return \"undefined\";\n  if (traversed === null) return \"null\";\n\n  const result = (tightJsonStringify(traversed) ?? \"undefined\")\n    // Convert quoted property keys to unquoted if valid\n    .replace(/(\\\\?\")([^\"]+)\\1:/g, \"$2:\")\n    // Turn our placeholder UNDEFINED back into \"undefined\"\n    .replace(UNDEFINED_RE, \"undefined\");\n\n  return result;\n}
\n  
\n
\n
Performance 
⋅
\n
Single-pass traversal with hook composition avoids multiple recursive walks. Hooks execute sequentially until one returns a transformed value.
\n
Use Cases 
⋅
\n
    \n
  • DevString serialization – Capture complex context in dev messages
    • \n
  • Logging – Readable structured logs without circular ref errors
    • \n
  • Debugging – Quick object inspection with custom formatters
    • \n
  • Test snapshots – Consistent serialization across types
    • \n
\n",
      "permalink": "/tight-javascriptify/",
      "slug": "tight-javascriptify",
      "ancestors": [
        "_index.md"
      ],
      "title": "Tight Javascriptify: Extensible Value Serialization",
      "description": null,
      "updated": null,
      "date": "2025-10-21",
      "year": 2025,
      "month": 10,
      "day": 21,
      "taxonomies": {},
      "authors": [],
      "extra": {},
      "path": "/tight-javascriptify/",
      "components": [
        "tight-javascriptify"
      ],
      "summary": null,
      "toc": [
        {
          "level": 1,
          "id": "tight-javascriptify-extensible-value-serialization",
          "permalink": "/tight-javascriptify/#tight-javascriptify-extensible-value-serialization",
          "title": "Tight Javascriptify: Extensible Value Serialization ⋅",
          "children": [
            {
              "level": 2,
              "id": "basic-usage",
              "permalink": "/tight-javascriptify/#basic-usage",
              "title": "Basic Usage ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "built-in-type-support",
              "permalink": "/tight-javascriptify/#built-in-type-support",
              "title": "Built-in Type Support ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "extensible-hooks",
              "permalink": "/tight-javascriptify/#extensible-hooks",
              "title": "Extensible Hooks ⋅",
              "children": [
                {
                  "level": 3,
                  "id": "example-custom-class",
                  "permalink": "/tight-javascriptify/#example-custom-class",
                  "title": "Example: Custom Class ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "example-redact-secrets",
                  "permalink": "/tight-javascriptify/#example-redact-secrets",
                  "title": "Example: Redact Secrets ⋅",
                  "children": []
                },
                {
                  "level": 3,
                  "id": "hook-execution-order",
                  "permalink": "/tight-javascriptify/#hook-execution-order",
                  "title": "Hook Execution Order ⋅",
                  "children": []
                }
              ]
            },
            {
              "level": 2,
              "id": "per-call-hooks",
              "permalink": "/tight-javascriptify/#per-call-hooks",
              "title": "Per-Call Hooks ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "full-source",
              "permalink": "/tight-javascriptify/#full-source",
              "title": "Full Source ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "performance",
              "permalink": "/tight-javascriptify/#performance",
              "title": "Performance ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "use-cases",
              "permalink": "/tight-javascriptify/#use-cases",
              "title": "Use Cases ⋅",
              "children": []
            }
          ]
        }
      ],
      "word_count": 295,
      "reading_time": 2,
      "assets": [],
      "draft": true,
      "lang": "en",
      "lower": null,
      "higher": null,
      "translations": [],
      "backlinks": []
    },
    "higher": {
      "relative_path": "incantations.md",
      "colocated_path": null,
      "content": "
Writing Process - Phosphor Engineering 
⋅
\n
Macro Expansion (Pass 1) 
⋅
\n
Context: You are expanding section bullets from bones.md into full prose for draft.md.
\n
Inputs: anchors.md (locked context) + bones.md section + current section ID
\n
Output: Expanded prose for the specified [S#] section with natural transitions
\n
Requirements:
\n
    \n
  • Follow anchors.md constraints exactly
    • \n
  • Maintain technical depth specified in anchors
    • \n
  • Add smooth transitions between bullet points
    • \n
  • Include concrete examples where bones mention them
    • \n
  • Keep section IDs [S#] in draft.md headers
    • \n
  • No inline tags yet (that's Pass 2)
    • \n
\n
Style: Technical advisor voice per be-a-technical-advisor.md
\n
\n
Micro Edit (Pass 3) 
⋅
\n
Context: You are resolving inline annotation tags from draft.md via unified diff
\n
Inputs: anchors.md + draft.md section with inline tags + specific tags to resolve
\n
Output: Unified diff showing exact changes to resolve tags
\n
Requirements:
\n
    \n
  • Address each tagged issue precisely
    • \n
  • Follow tag modifiers ([!] = must-fix, [~] = nice-to-have, [->suggestion])
    • \n
  • Maintain section structure and flow
    • \n
  • Don't rewrite untagged content
    • \n
  • Verify claims with concrete evidence
    • \n
  • Add examples where [ex] tags appear
    • \n
\n
\n
Quality Check (Pass 4) 
⋅
\n
Context: Final audit before publish
\n
Checklist:
\n
    \n
  • \nAll [!] tags resolved
    • \n
  • \nEvidence ratio met (per anchors.md)
    • \n
  • \nInteractive demos working
    • \n
  • \nForbidden phrases removed
    • \n
  • \nSuccess criteria achieved
    • \n
  • \nHook visceral, conclusion actionable
    • \n
\n",
      "permalink": "/incantations/",
      "slug": "incantations",
      "ancestors": [
        "_index.md"
      ],
      "title": "Incantations",
      "description": null,
      "updated": null,
      "date": "2025-10-20",
      "year": 2025,
      "month": 10,
      "day": 20,
      "taxonomies": {},
      "authors": [],
      "extra": {
        "nav_section": "Advanced Topics",
        "nav_order": 1
      },
      "path": "/incantations/",
      "components": [
        "incantations"
      ],
      "summary": null,
      "toc": [
        {
          "level": 1,
          "id": "writing-process-phosphor-engineering",
          "permalink": "/incantations/#writing-process-phosphor-engineering",
          "title": "Writing Process - Phosphor Engineering ⋅",
          "children": [
            {
              "level": 2,
              "id": "macro-expansion-pass-1",
              "permalink": "/incantations/#macro-expansion-pass-1",
              "title": "Macro Expansion (Pass 1) ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "micro-edit-pass-3",
              "permalink": "/incantations/#micro-edit-pass-3",
              "title": "Micro Edit (Pass 3) ⋅",
              "children": []
            },
            {
              "level": 2,
              "id": "quality-check-pass-4",
              "permalink": "/incantations/#quality-check-pass-4",
              "title": "Quality Check (Pass 4) ⋅",
              "children": []
            }
          ]
        }
      ],
      "word_count": 230,
      "reading_time": 2,
      "assets": [],
      "draft": true,
      "lang": "en",
      "lower": null,
      "higher": null,
      "translations": [],
      "backlinks": []
    },
    "translations": [],
    "backlinks": []
  },
  "zola_version": "0.21.0"
}