@joshuahhh/pretty-print 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { prettyPrintForBrowser, prettyLog, PrettyPrint, prettyPrintToString, testData, } from "./pretty-print.js";
+export { StringTagger } from "./string-tagger.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EACT,WAAW,EACX,mBAAmB,EACnB,QAAQ,GACT,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { prettyPrintForBrowser, prettyLog, PrettyPrint, prettyPrintToString, testData, } from "./pretty-print.js";
+export { StringTagger } from "./string-tagger.js";

package/dist/pretty-print.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+/**
+ * Converts ANSI color codes to browser console %c format with CSS styles.
+ */
+export declare function prettyPrintForBrowser(value: unknown, printWidth?: number): [string, ...string[]];
+/**
+ * Pretty-print a value to the browser console with colors.
+ * This is the easiest way to use the pretty-printer in browser code.
+ */
+export declare function prettyLog(value: unknown, { label, width }?: {
+    label?: string;
+    width?: number;
+}): void;
+/**
+ * React component that pretty-prints a value and automatically adjusts
+ * to the width of its container.
+ */
+export declare function PrettyPrint({ value, style, className, }: {
+    value: unknown;
+    style?: React.CSSProperties;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pretty-print a JavaScript value to a string.
+ * @param value The value to pretty-print
+ * @param printWidth Maximum line width (default: 80)
+ * @param useColor Whether to include colors (default: true)
+ */
+export declare function prettyPrintToString(value: unknown, printWidth?: number, useColor?: boolean): string;
+export declare const testData: {
+    primitives: {
+        number: number;
+        string: string;
+        bool: boolean;
+        nil: null;
+    };
+    arrays: number[];
+    longArray: number[];
+    object: {
+        a: number;
+        b: number;
+    };
+    typePrefix: {
+        type: string;
+        first: string;
+        last: string;
+    };
+    nested: {
+        users: {
+            id: number;
+            name: string;
+        }[];
+    };
+};
+//# sourceMappingURL=pretty-print.d.ts.map

package/dist/pretty-print.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pretty-print.d.ts","sourceRoot":"","sources":["../src/pretty-print.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,OAAO,EACd,UAAU,GAAE,MAAW,GACtB,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CA2BvB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,EAAE,KAAK,EAAE,KAAW,EAAE,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAC9D,IAAI,CAQN;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAsFA;AAuSD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,OAAO,EACd,UAAU,GAAE,MAAW,EACvB,QAAQ,GAAE,OAAc,GACvB,MAAM,CAUR;AAGD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;CAYpB,CAAC"}

package/dist/pretty-print.js

@@ -0,0 +1,388 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as prettier from "prettier";
+import React from "react";
+import { StringTagger } from "./string-tagger.js";
+const { group, indent, line, softline, ifBreak } = prettier.doc.builders;
+// Single source of truth for all color information
+const COLORS = [
+    { name: "string", ansi: "\x1b[32m", hex: "#22c55e" }, // green
+    { name: "number", ansi: "\x1b[33m", hex: "#eab308" }, // yellow
+    { name: "boolean", ansi: "\x1b[35m", hex: "#a855f7" }, // magenta
+    { name: "null", ansi: "\x1b[90m", hex: "#6b7280" }, // gray
+    { name: "key", ansi: "\x1b[36m", hex: "#06b6d4" }, // cyan
+    { name: "keyword", ansi: "\x1b[34m", hex: "#3b82f6" }, // blue
+    { name: "type", ansi: "\x1b[95m", hex: "#ec4899" }, // bright magenta
+    { name: "id", ansi: "\x1b[90m", hex: "#9ca3af" }, // faded gray
+];
+const ANSI_RESET = "\x1b[0m";
+const COLOR_NAME_TO_ANSI = Object.fromEntries(COLORS.map((c) => [c.name, c.ansi]));
+// Derived: ANSI code -> hex color lookup
+const ANSI_TO_HEX = Object.fromEntries(COLORS.map((c) => [c.ansi.match(/\d+/)?.[0] || "", c.hex]));
+/**
+ * Converts ANSI color codes to browser console %c format with CSS styles.
+ */
+export function prettyPrintForBrowser(value, printWidth = 80) {
+    const textWithAnsi = prettyPrintToString(value, printWidth, true);
+    const ansiRegex = /\x1b\[(\d+)m/g;
+    const parts = [];
+    const styles = [];
+    let lastIndex = 0;
+    let currentStyle = "";
+    let match;
+    while ((match = ansiRegex.exec(textWithAnsi)) !== null) {
+        const textBefore = textWithAnsi.slice(lastIndex, match.index);
+        if (textBefore) {
+            parts.push("%c" + textBefore);
+            styles.push(currentStyle);
+        }
+        const hexColor = ANSI_TO_HEX[match[1]];
+        currentStyle = hexColor ? `color: ${hexColor}` : "";
+        lastIndex = match.index + match[0].length;
+    }
+    const remaining = textWithAnsi.slice(lastIndex);
+    if (remaining) {
+        parts.push("%c" + remaining);
+        styles.push(currentStyle);
+    }
+    return [parts.join(""), ...styles];
+}
+/**
+ * Pretty-print a value to the browser console with colors.
+ * This is the easiest way to use the pretty-printer in browser code.
+ */
+export function prettyLog(value, { label, width = 120 } = {}) {
+    if (label) {
+        console.group(label);
+    }
+    console.log(...prettyPrintForBrowser(value, width));
+    if (label) {
+        console.groupEnd();
+    }
+}
+/**
+ * React component that pretty-prints a value and automatically adjusts
+ * to the width of its container.
+ */
+export function PrettyPrint({ value, style, className, }) {
+    const containerRef = React.useRef(null);
+    const measureRef = React.useRef(null);
+    const [printWidth, setPrintWidth] = React.useState(80);
+    React.useEffect(() => {
+        if (!containerRef.current || !measureRef.current)
+            return;
+        const updateWidth = () => {
+            if (!containerRef.current || !measureRef.current)
+                return;
+            // Measure actual character width by measuring a sample string
+            const sampleWidth = measureRef.current.offsetWidth;
+            const sampleLength = 100; // We measure a 100-character string
+            const charWidth = sampleWidth / sampleLength;
+            const containerWidth = containerRef.current.offsetWidth;
+            const charsPerLine = Math.floor(containerWidth / charWidth);
+            setPrintWidth(charsPerLine); // minimum 40 chars
+        };
+        // Initial measurement (with slight delay to ensure fonts are loaded)
+        setTimeout(updateWidth, 0);
+        // Watch for container size changes
+        const resizeObserver = new ResizeObserver(updateWidth);
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    // Convert ANSI color codes to React elements with inline styles
+    const textWithAnsi = prettyPrintToString(value, printWidth, true);
+    const ansiRegex = /\x1b\[(\d+)m/g;
+    const elements = [];
+    let lastIndex = 0;
+    let currentColor = "";
+    let match;
+    let key = 0;
+    while ((match = ansiRegex.exec(textWithAnsi)) !== null) {
+        const textBefore = textWithAnsi.slice(lastIndex, match.index);
+        if (textBefore) {
+            elements.push(_jsx("span", { style: { color: currentColor || "inherit" }, children: textBefore }, key++));
+        }
+        currentColor = ANSI_TO_HEX[match[1]] || "";
+        lastIndex = match.index + match[0].length;
+    }
+    const remaining = textWithAnsi.slice(lastIndex);
+    if (remaining) {
+        elements.push(_jsx("span", { style: { color: currentColor || "inherit" }, children: remaining }, key++));
+    }
+    return (_jsxs("div", { ref: containerRef, style: { width: "100%", ...style, overflowX: "auto" }, className: className, children: [_jsx("span", { ref: measureRef, style: {
+                    position: "absolute",
+                    visibility: "hidden",
+                    fontFamily: "monospace",
+                    whiteSpace: "pre",
+                }, children: "0123456789".repeat(10) }), _jsx("pre", { style: { margin: 0, fontFamily: "monospace", maxWidth: "100%" }, children: elements })] }));
+}
+/**
+ * Pretty-print a JavaScript value using Prettier's doc builder API.
+ * Returns a Doc that can be printed with prettier.printDocToString()
+ */
+function prettyPrintToDoc(value, tagger, visited = new Set()) {
+    // Helper to colorize text if tagger is available
+    const colorize = (text, colorType) => {
+        if (!tagger)
+            return text;
+        const ansi = COLOR_NAME_TO_ANSI[colorType];
+        return tagger.tag(text, ansi, ANSI_RESET);
+    };
+    // Handle JSX elements
+    if (true) {
+        // Change to false to disable JSX printing
+        if (React.isValidElement(value)) {
+            const element = value;
+            const type = typeof element.type === "string"
+                ? element.type
+                : element.type.name || "Component";
+            const props = element.props;
+            const { children, ...otherProps } = props;
+            const openTag = colorize(`<${type}`, "keyword");
+            const closeTag = colorize(`</${type}>`, "keyword");
+            const selfCloseTag = colorize("/>", "keyword");
+            // Format props
+            const propEntries = Object.entries(otherProps);
+            const propDocs = [];
+            for (let i = 0; i < propEntries.length; i++) {
+                const [key, val] = propEntries[i];
+                const keyStr = colorize(key, "key");
+                const valDoc = typeof val === "string"
+                    ? colorize(JSON.stringify(val), "string")
+                    : ["{", prettyPrintToDoc(val, tagger, visited), "}"];
+                propDocs.push(ifBreak(line, " "), keyStr, "=", valDoc);
+            }
+            const childrenArray = React.Children.toArray(children);
+            const hasChildren = childrenArray.length > 0;
+            if (!hasChildren && propEntries.length === 0) {
+                return [openTag, " ", selfCloseTag];
+            }
+            if (!hasChildren) {
+                return group([
+                    openTag,
+                    indent(propDocs),
+                    ifBreak(line, " "),
+                    selfCloseTag,
+                ]);
+            }
+            const childDocs = childrenArray.map((child) => typeof child === "string" || typeof child === "number"
+                ? String(child)
+                : prettyPrintToDoc(child, tagger, visited));
+            // Add conditional line breaks between children
+            // When inline, no separator. When broken, each child on its own line.
+            const childDocsWithSeparators = [];
+            for (let i = 0; i < childDocs.length; i++) {
+                childDocsWithSeparators.push(childDocs[i]);
+                if (i < childDocs.length - 1) {
+                    childDocsWithSeparators.push(ifBreak(line, ""));
+                }
+            }
+            // Group the opening tag separately so it can stay on one line if it fits,
+            // then group the whole element to allow compact inline formatting when possible
+            const openingTag = group([
+                openTag,
+                indent(propDocs),
+                colorize(">", "keyword"),
+            ]);
+            return group([
+                openingTag,
+                indent([softline, ...childDocsWithSeparators]),
+                softline,
+                closeTag,
+            ]);
+        }
+    }
+    // Handle primitives
+    if (value === null)
+        return colorize("null", "null");
+    if (value === undefined)
+        return colorize("undefined", "null");
+    if (typeof value === "string") {
+        return colorize(JSON.stringify(value), "string");
+    }
+    if (typeof value === "number") {
+        return colorize(String(value), "number");
+    }
+    if (typeof value === "boolean") {
+        return colorize(String(value), "boolean");
+    }
+    if (typeof value === "function") {
+        return value.name ? `[Function: ${value.name}]` : "[Function]";
+    }
+    if (typeof value === "symbol") {
+        return value.toString();
+    }
+    if (typeof value === "bigint") {
+        return colorize(`${value}n`, "number");
+    }
+    // Check for circular references (objects and arrays)
+    if (typeof value === "object" && value !== null) {
+        if (visited.has(value)) {
+            return colorize("[Circular]", "null");
+        }
+    }
+    // Mark this object/array as visited
+    visited = new Set(visited);
+    visited.add(value);
+    // Handle arrays
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return "[]";
+        }
+        const elements = value.map((item) => prettyPrintToDoc(item, tagger, visited));
+        // Use commas when inline, line breaks when multi-line
+        const withSeparators = [];
+        for (let i = 0; i < elements.length; i++) {
+            withSeparators.push(elements[i]);
+            if (i < elements.length - 1) {
+                withSeparators.push(ifBreak(line, ", "));
+            }
+        }
+        return group(["[", indent([softline, ...withSeparators]), softline, "]"]);
+    }
+    // Handle objects
+    if (typeof value === "object") {
+        // Handle special objects
+        if (value instanceof Date) {
+            const keyword = colorize("new", "keyword");
+            const ctor = colorize("Date", "keyword");
+            const str = tagger
+                ? colorize(`"${value.toISOString()}"`, "string")
+                : `"${value.toISOString()}"`;
+            return [keyword, " ", ctor, "(", str, ")"];
+        }
+        if (value instanceof RegExp) {
+            return colorize(value.toString(), "string");
+        }
+        if (value instanceof Map) {
+            if (value.size === 0) {
+                const keyword = colorize("new", "keyword");
+                const ctor = colorize("Map", "keyword");
+                return [keyword, " ", ctor, "()"];
+            }
+            const keyword = colorize("new", "keyword");
+            const ctor = colorize("Map", "keyword");
+            const entries = Array.from(value.entries()).map(([k, v]) => [
+                "[",
+                prettyPrintToDoc(k, tagger, visited),
+                ", ",
+                prettyPrintToDoc(v, tagger, visited),
+                "]",
+            ]);
+            const withSeparators = [];
+            for (let i = 0; i < entries.length; i++) {
+                withSeparators.push(entries[i]);
+                if (i < entries.length - 1) {
+                    withSeparators.push(ifBreak(line, ", "));
+                }
+            }
+            return group([
+                keyword,
+                " ",
+                ctor,
+                "([",
+                indent([softline, ...withSeparators]),
+                softline,
+                "])",
+            ]);
+        }
+        if (value instanceof Set) {
+            if (value.size === 0) {
+                const keyword = colorize("new", "keyword");
+                const ctor = colorize("Set", "keyword");
+                return [keyword, " ", ctor, "()"];
+            }
+            const keyword = colorize("new", "keyword");
+            const ctor = colorize("Set", "keyword");
+            const items = Array.from(value).map((v) => prettyPrintToDoc(v, tagger, visited));
+            const withSeparators = [];
+            for (let i = 0; i < items.length; i++) {
+                withSeparators.push(items[i]);
+                if (i < items.length - 1) {
+                    withSeparators.push(ifBreak(line, ", "));
+                }
+            }
+            return group([
+                keyword,
+                " ",
+                ctor,
+                "([",
+                indent([softline, ...withSeparators]),
+                softline,
+                "])",
+            ]);
+        }
+        // Handle plain objects
+        const entries = Object.entries(value);
+        if (entries.length === 0) {
+            return "{}";
+        }
+        // Check if object has "type" and/or "id" fields
+        const typeEntry = entries.find(([key]) => key === "type");
+        const typeValue = typeEntry?.[1];
+        const idEntry = entries.find(([key]) => key === "id");
+        const idValue = idEntry?.[1];
+        const remainingEntries = entries.filter(([key]) => key !== "type" && key !== "id");
+        const props = remainingEntries.map(([key, val]) => {
+            const keyStr = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)
+                ? key
+                : JSON.stringify(key);
+            const coloredKey = colorize(keyStr, "key");
+            return [coloredKey, ": ", prettyPrintToDoc(val, tagger, visited)];
+        });
+        // Use commas when inline, line breaks when multi-line
+        const withSeparators = [];
+        for (let i = 0; i < props.length; i++) {
+            withSeparators.push(props[i]);
+            if (i < props.length - 1) {
+                withSeparators.push(ifBreak(line, ", "));
+            }
+        }
+        // Build the prefix: "type#id" or "type" or "#id"
+        const prefix = [];
+        if (typeValue && typeof typeValue === "string") {
+            prefix.push(colorize(typeValue, "type"));
+        }
+        if (idValue !== undefined) {
+            prefix.push(colorize("#" + String(idValue), "id"));
+        }
+        return group([
+            "{",
+            prefix.length > 0 ? prefix : "",
+            prefix.length > 0 ? " " : "",
+            remainingEntries.length > 0 ? indent([softline, ...withSeparators]) : "",
+            remainingEntries.length > 0 ? softline : "",
+            "}",
+        ]);
+    }
+    return "[Unknown]";
+}
+/**
+ * Pretty-print a JavaScript value to a string.
+ * @param value The value to pretty-print
+ * @param printWidth Maximum line width (default: 80)
+ * @param useColor Whether to include colors (default: true)
+ */
+export function prettyPrintToString(value, printWidth = 80, useColor = true) {
+    const tagger = useColor ? new StringTagger() : null;
+    const doc = prettyPrintToDoc(value, tagger);
+    const formatted = prettier.doc.printer.printDocToString(doc, {
+        printWidth,
+        tabWidth: 2,
+        useTabs: false,
+    }).formatted;
+    return tagger ? tagger.expand(formatted) : formatted;
+}
+// Shared test data
+export const testData = {
+    primitives: { number: 42, string: "hello", bool: true, nil: null },
+    arrays: [1, 2, 3],
+    longArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    object: { a: 1, b: 2 },
+    typePrefix: { type: "person", first: "Albert", last: "Einstein" },
+    nested: {
+        users: [
+            { id: 1, name: "Alice" },
+            { id: 2, name: "Bob" },
+        ],
+    },
+};

package/dist/string-tagger.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A more general string tagging system that supports arbitrary Unicode characters.
+ *
+ * Instead of encoding color information directly into characters, this system:
+ * 1. Assigns unique PUA (Private Use Area) codepoints to mark span starts
+ * 2. Uses a single universal PUA codepoint to mark span ends
+ * 3. Records the original characters and associated before/after strings separately
+ * 4. Can expand the tagged string back to the original with tags applied
+ */
+export declare class StringTagger {
+    private spans;
+    private nextMarkerIndex;
+    /**
+     * Tags a substring by replacing the first and last characters
+     * with unique PUA markers.
+     *
+     * @param text The text to tag (can be any Unicode)
+     * @param before String to insert before the span when expanded
+     * @param after String to insert after the span when expanded
+     * @returns A string with same length, but first and last chars are PUA markers
+     */
+    tag(text: string, before: string, after: string): string;
+    /**
+     * Expands a tagged string back to the original text with before/after strings applied.
+     *
+     * @param encoded The string containing PUA markers
+     * @returns The fully expanded string with before/after strings wrapped around tagged spans
+     */
+    expand(encoded: string): string;
+}
+//# sourceMappingURL=string-tagger.d.ts.map

package/dist/string-tagger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string-tagger.d.ts","sourceRoot":"","sources":["../src/string-tagger.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgBH,qBAAa,YAAY;IACvB,OAAO,CAAC,KAAK,CAAoC;IACjD,OAAO,CAAC,eAAe,CAAK;IAE5B;;;;;;;;OAQG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;IAyCxD;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;CAsEhC"}

package/dist/string-tagger.js

@@ -0,0 +1,116 @@
+/**
+ * A more general string tagging system that supports arbitrary Unicode characters.
+ *
+ * Instead of encoding color information directly into characters, this system:
+ * 1. Assigns unique PUA (Private Use Area) codepoints to mark span starts
+ * 2. Uses a single universal PUA codepoint to mark span ends
+ * 3. Records the original characters and associated before/after strings separately
+ * 4. Can expand the tagged string back to the original with tags applied
+ */
+// Use Unicode private use area for markers
+const PUA_START = 0xe000;
+const PUA_END = 0xf8ff; // End of BMP private use area
+const END_MARKER = PUA_END; // Universal end marker
+const MAX_MARKERS = PUA_END - PUA_START; // One less because we reserve END_MARKER
+export class StringTagger {
+    constructor() {
+        this.spans = new Map();
+        this.nextMarkerIndex = 0;
+    }
+    /**
+     * Tags a substring by replacing the first and last characters
+     * with unique PUA markers.
+     *
+     * @param text The text to tag (can be any Unicode)
+     * @param before String to insert before the span when expanded
+     * @param after String to insert after the span when expanded
+     * @returns A string with same length, but first and last chars are PUA markers
+     */
+    tag(text, before, after) {
+        if (text.length === 0) {
+            return text;
+        }
+        if (this.nextMarkerIndex >= MAX_MARKERS) {
+            throw new Error(`Exceeded maximum number of tagged spans (${MAX_MARKERS})`);
+        }
+        // Get the next PUA codepoint for the start marker
+        const startMarker = PUA_START + this.nextMarkerIndex;
+        this.nextMarkerIndex++;
+        // Record the original characters and before/after strings
+        const originalStart = text[0];
+        const originalEnd = text.length === 1 ? null : text[text.length - 1];
+        this.spans.set(startMarker, {
+            startMarker,
+            originalStart,
+            originalEnd,
+            before,
+            after,
+        });
+        // Build the result: marker + middle + marker
+        if (originalEnd === null) {
+            // Single character - just the start marker
+            return String.fromCharCode(startMarker);
+        }
+        const middle = text.slice(1, -1);
+        return (String.fromCharCode(startMarker) +
+            middle +
+            String.fromCharCode(END_MARKER));
+    }
+    /**
+     * Expands a tagged string back to the original text with before/after strings applied.
+     *
+     * @param encoded The string containing PUA markers
+     * @returns The fully expanded string with before/after strings wrapped around tagged spans
+     */
+    expand(encoded) {
+        if (encoded.length === 0) {
+            return encoded;
+        }
+        // Regex to find any PUA character (start markers or end marker)
+        const puaRegex = /[\ue000-\uf8ff]/g;
+        const parts = [];
+        let lastIndex = 0;
+        let match;
+        while ((match = puaRegex.exec(encoded)) !== null) {
+            const i = match.index;
+            const charCode = encoded.charCodeAt(i);
+            // Check if this is a start marker
+            const spanInfo = this.spans.get(charCode);
+            if (spanInfo) {
+                // Copy any regular text before this marker
+                if (i > lastIndex) {
+                    parts.push(encoded.slice(lastIndex, i));
+                }
+                // Found a tagged span
+                if (spanInfo.originalEnd === null) {
+                    // Single-character span - no end marker to look for
+                    parts.push(spanInfo.before, spanInfo.originalStart, spanInfo.after);
+                    lastIndex = i + 1;
+                }
+                else {
+                    // Multi-character span - find the end marker
+                    const endIndex = encoded.indexOf(String.fromCharCode(END_MARKER), i + 1);
+                    if (endIndex === -1) {
+                        throw new Error("Tagged span missing end marker");
+                    }
+                    // Extract the middle part (between start marker and end marker)
+                    const middle = encoded.slice(i + 1, endIndex);
+                    // Build the expanded span
+                    parts.push(spanInfo.before, spanInfo.originalStart, middle, spanInfo.originalEnd, spanInfo.after);
+                    lastIndex = endIndex + 1;
+                    // Advance the regex past the end marker
+                    puaRegex.lastIndex = lastIndex;
+                }
+            }
+            else {
+                // Unrecognized PUA character - this is an error
+                throw new Error(`Unrecognized PUA marker at index ${i}`);
+            }
+        }
+        // Copy any remaining regular text
+        if (lastIndex < encoded.length) {
+            parts.push(encoded.slice(lastIndex));
+        }
+        return parts.join("");
+    }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@joshuahhh/pretty-print",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "prettier": "^2.8.8"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/prettier": "^2.7.3",
+    "@types/react": "^19.2.4",
+    "react": "^19.2.0",
+    "typescript": "^5.2.2",
+    "vitest": "^4.0.6"
+  }
+}