@joshuahhh/pretty-print 0.0.1 → 0.0.3

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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;AAC3B,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

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

package/dist/pretty-print.d.ts

@@ -1,32 +1,31 @@
 import React from "react";
+export interface PrettyPrintOptions {
+    width?: number;
+    useColor?: boolean;
+    niceId?: boolean;
+    niceType?: boolean;
+}
 /**
  * Converts ANSI color codes to browser console %c format with CSS styles.
  */
-export declare function prettyPrintForBrowser(value: unknown, printWidth?: number): [string, ...string[]];
+export declare function prettyPrintForBrowser(value: unknown, options?: PrettyPrintOptions): [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 }?: {
+export declare function prettyLog(value: unknown, { label, ...options }?: PrettyPrintOptions & {
     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, }: {
+export declare function PrettyPrint({ value, style, className, ...options }: PrettyPrintOptions & {
     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 function prettyPrintToString(value: unknown, options?: PrettyPrintOptions): string;
 export declare const testData: {
     primitives: {
         number: number;

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

@@ -1 +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"}
+{"version":3,"file":"pretty-print.d.ts","sourceRoot":"","sources":["../src/pretty-print.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,OAAO,EACd,OAAO,GAAE,kBAAuB,GAC/B,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CA2BvB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,GAAE,kBAAkB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAClE,IAAI,CAQN;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,SAAS,EACT,GAAG,OAAO,EACX,EAAE,kBAAkB,GAAG;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyFA;AAyTD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,OAAO,EACd,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAWR;AAGD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;CAYpB,CAAC"}

package/dist/pretty-print.js

@@ -21,8 +21,8 @@ const ANSI_TO_HEX = Object.fromEntries(COLORS.map((c) => [c.ansi.match(/\d+/)?.[
 /**
  * Converts ANSI color codes to browser console %c format with CSS styles.
  */
-export function prettyPrintForBrowser(value, printWidth = 80) {
-    const textWithAnsi = prettyPrintToString(value, printWidth, true);
+export function prettyPrintForBrowser(value, options = {}) {
+    const textWithAnsi = prettyPrintToString(value, options);
     const ansiRegex = /\x1b\[(\d+)m/g;
     const parts = [];
     const styles = [];
@@ -50,11 +50,11 @@ export function prettyPrintForBrowser(value, printWidth = 80) {
  * 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 } = {}) {
+export function prettyLog(value, { label, ...options } = {}) {
     if (label) {
         console.group(label);
     }
-    console.log(...prettyPrintForBrowser(value, width));
+    console.log(...prettyPrintForBrowser(value, options));
     if (label) {
         console.groupEnd();
     }
@@ -63,10 +63,10 @@ export function prettyLog(value, { label, width = 120 } = {}) {
  * React component that pretty-prints a value and automatically adjusts
  * to the width of its container.
  */
-export function PrettyPrint({ value, style, className, }) {
+export function PrettyPrint({ value, style, className, ...options }) {
     const containerRef = React.useRef(null);
     const measureRef = React.useRef(null);
-    const [printWidth, setPrintWidth] = React.useState(80);
+    const [measuredWidth, setMeasuredWidth] = React.useState(80);
     React.useEffect(() => {
         if (!containerRef.current || !measureRef.current)
             return;
@@ -79,7 +79,7 @@ export function PrettyPrint({ value, style, className, }) {
             const charWidth = sampleWidth / sampleLength;
             const containerWidth = containerRef.current.offsetWidth;
             const charsPerLine = Math.floor(containerWidth / charWidth);
-            setPrintWidth(charsPerLine); // minimum 40 chars
+            setMeasuredWidth(charsPerLine);
         };
         // Initial measurement (with slight delay to ensure fonts are loaded)
         setTimeout(updateWidth, 0);
@@ -89,7 +89,10 @@ export function PrettyPrint({ value, style, className, }) {
         return () => resizeObserver.disconnect();
     }, []);
     // Convert ANSI color codes to React elements with inline styles
-    const textWithAnsi = prettyPrintToString(value, printWidth, true);
+    const textWithAnsi = prettyPrintToString(value, {
+        ...options,
+        width: options.width ?? measuredWidth,
+    });
     const ansiRegex = /\x1b\[(\d+)m/g;
     const elements = [];
     let lastIndex = 0;
@@ -119,13 +122,13 @@ export function PrettyPrint({ value, style, className, }) {
  * 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) => {
+function prettyPrintToDoc(value, tagger, options, visited = new Set(), path = []) {
+    const { niceType = true, niceId = true } = options;
+    const colorize = (text, colorType, path) => {
         if (!tagger)
             return text;
         const ansi = COLOR_NAME_TO_ANSI[colorType];
-        return tagger.tag(text, ansi, ANSI_RESET);
+        return tagger.tag(text, ansi, ANSI_RESET, path);
     };
     // Handle JSX elements
     if (true) {
@@ -137,18 +140,27 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
                 : 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");
+            const openTag = colorize(`<${type}`, "keyword", [...path, 0]);
+            const closeTag = colorize(`</${type}>`, "keyword", [...path, 4]);
+            const selfCloseTag = colorize("/>", "keyword", [...path, 2]);
             // 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 keyStr = colorize(key, "key", [...path, 1, i, 0]);
                 const valDoc = typeof val === "string"
-                    ? colorize(JSON.stringify(val), "string")
-                    : ["{", prettyPrintToDoc(val, tagger, visited), "}"];
+                    ? colorize(JSON.stringify(val), "string", [...path, 1, i, 1])
+                    : [
+                        "{",
+                        prettyPrintToDoc(val, tagger, options, visited, [
+                            ...path,
+                            1,
+                            i,
+                            1,
+                        ]),
+                        "}",
+                    ];
                 propDocs.push(ifBreak(line, " "), keyStr, "=", valDoc);
             }
             const childrenArray = React.Children.toArray(children);
@@ -164,11 +176,10 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
                     selfCloseTag,
                 ]);
             }
-            const childDocs = childrenArray.map((child) => typeof child === "string" || typeof child === "number"
+            const childDocs = childrenArray.map((child, i) => typeof child === "string" || typeof child === "number"
                 ? String(child)
-                : prettyPrintToDoc(child, tagger, visited));
+                : prettyPrintToDoc(child, tagger, options, visited, [...path, 3, i]));
             // 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]);
@@ -176,12 +187,10 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
                     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"),
+                colorize(">", "keyword", [...path, 2]),
             ]);
             return group([
                 openingTag,
@@ -193,17 +202,17 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
     }
     // Handle primitives
     if (value === null)
-        return colorize("null", "null");
+        return colorize("null", "null", path);
     if (value === undefined)
-        return colorize("undefined", "null");
+        return colorize("undefined", "null", path);
     if (typeof value === "string") {
-        return colorize(JSON.stringify(value), "string");
+        return colorize(JSON.stringify(value), "string", path);
     }
     if (typeof value === "number") {
-        return colorize(String(value), "number");
+        return colorize(String(value), "number", path);
     }
     if (typeof value === "boolean") {
-        return colorize(String(value), "boolean");
+        return colorize(String(value), "boolean", path);
     }
     if (typeof value === "function") {
         return value.name ? `[Function: ${value.name}]` : "[Function]";
@@ -212,12 +221,12 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
         return value.toString();
     }
     if (typeof value === "bigint") {
-        return colorize(`${value}n`, "number");
+        return colorize(`${value}n`, "number", path);
     }
     // Check for circular references (objects and arrays)
     if (typeof value === "object" && value !== null) {
         if (visited.has(value)) {
-            return colorize("[Circular]", "null");
+            return colorize("[Circular]", "null", path);
         }
     }
     // Mark this object/array as visited
@@ -228,7 +237,7 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
         if (value.length === 0) {
             return "[]";
         }
-        const elements = value.map((item) => prettyPrintToDoc(item, tagger, visited));
+        const elements = value.map((item, i) => prettyPrintToDoc(item, tagger, options, visited, [...path, i]));
         // Use commas when inline, line breaks when multi-line
         const withSeparators = [];
         for (let i = 0; i < elements.length; i++) {
@@ -243,29 +252,29 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
     if (typeof value === "object") {
         // Handle special objects
         if (value instanceof Date) {
-            const keyword = colorize("new", "keyword");
-            const ctor = colorize("Date", "keyword");
+            const keyword = colorize("new", "keyword", [...path, 0]);
+            const ctor = colorize("Date", "keyword", [...path, 1]);
             const str = tagger
-                ? colorize(`"${value.toISOString()}"`, "string")
+                ? colorize(`"${value.toISOString()}"`, "string", [...path, 2])
                 : `"${value.toISOString()}"`;
             return [keyword, " ", ctor, "(", str, ")"];
         }
         if (value instanceof RegExp) {
-            return colorize(value.toString(), "string");
+            return colorize(value.toString(), "string", path);
         }
         if (value instanceof Map) {
             if (value.size === 0) {
-                const keyword = colorize("new", "keyword");
-                const ctor = colorize("Map", "keyword");
+                const keyword = colorize("new", "keyword", [...path, 0]);
+                const ctor = colorize("Map", "keyword", [...path, 1]);
                 return [keyword, " ", ctor, "()"];
             }
-            const keyword = colorize("new", "keyword");
-            const ctor = colorize("Map", "keyword");
-            const entries = Array.from(value.entries()).map(([k, v]) => [
+            const keyword = colorize("new", "keyword", [...path, 0]);
+            const ctor = colorize("Map", "keyword", [...path, 1]);
+            const entries = Array.from(value.entries()).map(([k, v], i) => [
                 "[",
-                prettyPrintToDoc(k, tagger, visited),
+                prettyPrintToDoc(k, tagger, options, visited, [...path, 2, i, 0]),
                 ", ",
-                prettyPrintToDoc(v, tagger, visited),
+                prettyPrintToDoc(v, tagger, options, visited, [...path, 2, i, 1]),
                 "]",
             ]);
             const withSeparators = [];
@@ -287,13 +296,13 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
         }
         if (value instanceof Set) {
             if (value.size === 0) {
-                const keyword = colorize("new", "keyword");
-                const ctor = colorize("Set", "keyword");
+                const keyword = colorize("new", "keyword", [...path, 0]);
+                const ctor = colorize("Set", "keyword", [...path, 1]);
                 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 keyword = colorize("new", "keyword", [...path, 0]);
+            const ctor = colorize("Set", "keyword", [...path, 1]);
+            const items = Array.from(value).map((v, i) => prettyPrintToDoc(v, tagger, options, visited, [...path, 2, i]));
             const withSeparators = [];
             for (let i = 0; i < items.length; i++) {
                 withSeparators.push(items[i]);
@@ -317,17 +326,23 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
             return "{}";
         }
         // Check if object has "type" and/or "id" fields
-        const typeEntry = entries.find(([key]) => key === "type");
+        const typeEntry = niceType
+            ? entries.find(([key]) => key === "type")
+            : undefined;
         const typeValue = typeEntry?.[1];
-        const idEntry = entries.find(([key]) => key === "id");
+        const idEntry = niceId ? entries.find(([key]) => key === "id") : undefined;
         const idValue = idEntry?.[1];
-        const remainingEntries = entries.filter(([key]) => key !== "type" && key !== "id");
-        const props = remainingEntries.map(([key, val]) => {
+        const remainingEntries = entries.filter(([key]) => (key !== "type" || !niceType) && (key !== "id" || !niceId));
+        const props = remainingEntries.map(([key, val], i) => {
             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)];
+            const coloredKey = colorize(keyStr, "key", [...path, 2, i, 0]);
+            return [
+                coloredKey,
+                ": ",
+                prettyPrintToDoc(val, tagger, options, visited, [...path, 2, i, 1]),
+            ];
         });
         // Use commas when inline, line breaks when multi-line
         const withSeparators = [];
@@ -337,13 +352,12 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
                 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"));
+            prefix.push(colorize(typeValue, "type", [...path, 0]));
         }
         if (idValue !== undefined) {
-            prefix.push(colorize("#" + String(idValue), "id"));
+            prefix.push(colorize("#" + String(idValue), "id", [...path, 1]));
         }
         return group([
             "{",
@@ -356,17 +370,12 @@ function prettyPrintToDoc(value, tagger, visited = new Set()) {
     }
     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) {
+export function prettyPrintToString(value, options = {}) {
+    const { width = 80, useColor = true } = options;
     const tagger = useColor ? new StringTagger() : null;
-    const doc = prettyPrintToDoc(value, tagger);
+    const doc = prettyPrintToDoc(value, tagger, options);
     const formatted = prettier.doc.printer.printDocToString(doc, {
-        printWidth,
+        printWidth: width,
         tabWidth: 2,
         useTabs: false,
     }).formatted;

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=pretty-print.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pretty-print.test.d.ts","sourceRoot":"","sources":["../src/pretty-print.test.ts"],"names":[],"mappings":""}

package/dist/pretty-print.test.js

@@ -0,0 +1,168 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { prettyPrintToString } from "./pretty-print.js";
+describe("prettyPrintToString", () => {
+    it("should format with and without ANSI codes", () => {
+        const longArray = Array.from({ length: 20 }, (_, i) => i);
+        const withoutAnsi = prettyPrintToString(longArray, { width: 200, useColor: false });
+        const withAnsi = prettyPrintToString(longArray, { width: 200, useColor: true });
+        // Count ANSI escape sequences
+        const ansiMatches = withAnsi.match(/\x1b\[\d+m/g);
+        expect(ansiMatches).toBeTruthy();
+        expect(withAnsi.length).toBeGreaterThan(withoutAnsi.length);
+    });
+    it("should format long arrays inline with wide printWidth", () => {
+        const longArray = Array.from({ length: 20 }, (_, i) => i);
+        const result = prettyPrintToString(longArray, { width: 200, useColor: false });
+        // With width 200, this should be all on one line
+        expect(result).not.toContain("\n");
+    });
+    it("should format long arrays with line breaks when narrow", () => {
+        const longArray = Array.from({ length: 20 }, (_, i) => i);
+        const result = prettyPrintToString(longArray, { width: 40, useColor: false });
+        // With width 40, this should break across multiple lines
+        expect(result).toContain("\n");
+    });
+    it("should format objects with wide printWidth", () => {
+        const obj = {
+            a: 1,
+            b: 2,
+            c: 3,
+            d: 4,
+            e: 5,
+            f: 6,
+            g: 7,
+            h: 8,
+        };
+        const result = prettyPrintToString(obj, { width: 200, useColor: false });
+        // Should be relatively compact
+        expect(result.split("\n").length).toBeLessThan(10);
+    });
+    it("should format nested structures", () => {
+        const nested = {
+            users: [
+                { id: 1, name: "Alice", age: 30 },
+                { id: 2, name: "Bob", age: 25 },
+                { id: 3, name: "Charlie", age: 35 },
+            ],
+        };
+        const wide = prettyPrintToString(nested, { width: 200, useColor: false });
+        const narrow = prettyPrintToString(nested, { width: 40, useColor: false });
+        // Wide version should have fewer line breaks
+        expect(wide.split("\n").length).toBeLessThan(narrow.split("\n").length);
+    });
+    it("should handle very long arrays", () => {
+        const veryLongArray = Array.from({ length: 50 }, (_, i) => i + 1);
+        const wide = prettyPrintToString(veryLongArray, { width: 300, useColor: false });
+        const narrow = prettyPrintToString(veryLongArray, { width: 60, useColor: false });
+        // Both should contain all elements
+        expect(wide).toContain("49");
+        expect(narrow).toContain("49");
+        // Narrow should have more line breaks
+        expect(narrow.split("\n").length).toBeGreaterThan(wide.split("\n").length);
+    });
+    it("should detect circular references in objects", () => {
+        const obj = { a: 1, b: 2 };
+        obj.self = obj;
+        const result = prettyPrintToString(obj, { width: 80, useColor: false });
+        expect(result).toBe("{a: 1, b: 2, self: [Circular]}");
+    });
+    it("should detect circular references in arrays", () => {
+        const arr = [1, 2, 3];
+        arr.push(arr);
+        const result = prettyPrintToString(arr, { width: 80, useColor: false });
+        expect(result).toBe("[1, 2, 3, [Circular]]");
+    });
+    it("should detect circular references in nested structures", () => {
+        const parent = { name: "parent", children: [] };
+        const child = { name: "child", parent: parent };
+        parent.children.push(child);
+        const result = prettyPrintToString(parent, { width: 80, useColor: false });
+        expect(result).toBe('{name: "parent", children: [{name: "child", parent: [Circular]}]}');
+    });
+    it("should print repeated references distinctly", () => {
+        const shared = { value: 42 };
+        const obj = { first: shared, second: shared };
+        const result = prettyPrintToString(obj, { width: 80, useColor: false });
+        expect(result).toBe("{first: {value: 42}, second: {value: 42}}");
+    });
+    it("should print JSX elements", () => {
+        const element = React.createElement("div", { className: "foo" }, "hello");
+        const result = prettyPrintToString(element, { width: 80, useColor: false });
+        expect(result).toBe('<div className="foo">hello</div>');
+    });
+    it("should print JSX elements with no children", () => {
+        const element = React.createElement("br", {});
+        const result = prettyPrintToString(element, { width: 80, useColor: false });
+        expect(result).toBe("<br />");
+    });
+    it("should print JSX elements with props and no children", () => {
+        const element = React.createElement("img", {
+            src: "test.png",
+            alt: "test",
+        });
+        const result = prettyPrintToString(element, { width: 80, useColor: false });
+        expect(result).toBe('<img src="test.png" alt="test" />');
+    });
+    it("should print nested JSX elements", () => {
+        const element = React.createElement("div", {}, React.createElement("span", {}, "hello"), React.createElement("span", {}, "world"));
+        const result = prettyPrintToString(element, { width: 80, useColor: false });
+        expect(result).toBe("<div><span>hello</span><span>world</span></div>");
+    });
+    it("should break props onto new lines when narrow", () => {
+        const element = React.createElement("img", {
+            src: "test.png",
+            alt: "description",
+            width: 100,
+            height: 200,
+        });
+        const result = prettyPrintToString(element, { width: 30, useColor: false });
+        expect(result).toContain("\n");
+    });
+    it("should extract type field as prefix by default", () => {
+        const obj = { type: "person", name: "Alice" };
+        const result = prettyPrintToString(obj, { width: 80, useColor: false });
+        expect(result).toBe('{person name: "Alice"}');
+    });
+    it("should keep type as normal property when niceType is false", () => {
+        const obj = { type: "person", name: "Alice" };
+        const result = prettyPrintToString(obj, { width: 80, useColor: false, niceType: false });
+        expect(result).toBe('{type: "person", name: "Alice"}');
+    });
+    it("should extract id field as prefix by default", () => {
+        const obj = { id: 42, name: "Alice" };
+        const result = prettyPrintToString(obj, { width: 80, useColor: false });
+        expect(result).toBe('{#42 name: "Alice"}');
+    });
+    it("should keep id as normal property when niceId is false", () => {
+        const obj = { id: 42, name: "Alice" };
+        const result = prettyPrintToString(obj, { width: 80, useColor: false, niceId: false });
+        expect(result).toBe('{id: 42, name: "Alice"}');
+    });
+    it("should extract both type and id as prefixes by default", () => {
+        const obj = { type: "user", id: 1, name: "Alice" };
+        const result = prettyPrintToString(obj, { width: 80, useColor: false });
+        expect(result).toBe('{user#1 name: "Alice"}');
+    });
+    it("should keep both type and id as normal properties when disabled", () => {
+        const obj = { type: "user", id: 1, name: "Alice" };
+        const result = prettyPrintToString(obj, {
+            width: 80,
+            useColor: false,
+            niceType: false,
+            niceId: false,
+        });
+        expect(result).toBe('{type: "user", id: 1, name: "Alice"}');
+    });
+    it("should keep opening tag together when it fits", () => {
+        const element = React.createElement("g", { "data-path": "/" }, React.createElement("circle", { cx: 0, cy: 0 }));
+        const result = prettyPrintToString(element, { width: 20, useColor: false });
+        // The opening tag should stay together if it fits
+        expect(result).toBe(`<g data-path="/">
+  <circle
+    cx={0}
+    cy={0}
+  />
+</g>`);
+    });
+});

package/dist/string-tagger.d.ts

@@ -1,28 +1,36 @@
 /**
- * A more general string tagging system that supports arbitrary Unicode characters.
+ * A 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
+ * This system:
+ * 1. Replaces the first/last characters of tagged spans with fixed PUA markers
+ * 2. Records the original characters and associated before/after strings separately
+ * 3. Uses a caller-provided path (number[]) to determine the left-to-right order of spans
  * 4. Can expand the tagged string back to the original with tags applied
+ *
+ * The path-based approach means callers can tag() in any order — expand() sorts
+ * spans by path to match them with markers left-to-right in the string.
  */
+export type TagPath = number[];
 export declare class StringTagger {
     private spans;
-    private nextMarkerIndex;
     /**
-     * Tags a substring by replacing the first and last characters
-     * with unique PUA markers.
+     * Tags a substring by replacing the first and last characters with 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
+     * @param path A number[] that determines this span's left-to-right position.
+     *   Paths are compared element-wise — spans with earlier paths are matched
+     *   to earlier (leftward) markers in the string.
      * @returns A string with same length, but first and last chars are PUA markers
      */
-    tag(text: string, before: string, after: string): string;
+    tag(text: string, before: string, after: string, path: TagPath): string;
     /**
      * Expands a tagged string back to the original text with before/after strings applied.
      *
+     * Spans are matched to markers by sorting paths element-wise — the span with
+     * the earliest path is matched to the leftmost START_MARKER in the string.
+     *
      * @param encoded The string containing PUA markers
      * @returns The fully expanded string with before/after strings wrapped around tagged spans
      */

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

@@ -1 +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"}
+{"version":3,"file":"string-tagger.d.ts","sourceRoot":"","sources":["../src/string-tagger.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,MAAM,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC;AAiB/B,qBAAa,YAAY;IACvB,OAAO,CAAC,KAAK,CAAkB;IAE/B;;;;;;;;;;OAUG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM;IAsBvE;;;;;;;;OAQG;IACH,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;CAkEhC"}

package/dist/string-tagger.js

@@ -1,64 +1,61 @@
 /**
- * A more general string tagging system that supports arbitrary Unicode characters.
+ * A 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
+ * This system:
+ * 1. Replaces the first/last characters of tagged spans with fixed PUA markers
+ * 2. Records the original characters and associated before/after strings separately
+ * 3. Uses a caller-provided path (number[]) to determine the left-to-right order of spans
  * 4. Can expand the tagged string back to the original with tags applied
+ *
+ * The path-based approach means callers can tag() in any order — expand() sorts
+ * spans by path to match them with markers left-to-right in the string.
  */
-// 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
+// Two fixed PUA codepoints — that's all we need
+const START_MARKER = 0xe000;
+const END_MARKER = 0xe001;
+function comparePaths(a, b) {
+    for (let i = 0; i < Math.min(a.length, b.length); i++) {
+        if (a[i] !== b[i])
+            return a[i] - b[i];
+    }
+    return a.length - b.length;
+}
 export class StringTagger {
     constructor() {
-        this.spans = new Map();
-        this.nextMarkerIndex = 0;
+        this.spans = [];
     }
     /**
-     * Tags a substring by replacing the first and last characters
-     * with unique PUA markers.
+     * Tags a substring by replacing the first and last characters with 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
+     * @param path A number[] that determines this span's left-to-right position.
+     *   Paths are compared element-wise — spans with earlier paths are matched
+     *   to earlier (leftward) markers in the string.
      * @returns A string with same length, but first and last chars are PUA markers
      */
-    tag(text, before, after) {
+    tag(text, before, after, path) {
         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
+        this.spans.push({ path, originalStart, originalEnd, before, after });
         if (originalEnd === null) {
-            // Single character - just the start marker
-            return String.fromCharCode(startMarker);
+            return String.fromCharCode(START_MARKER);
         }
         const middle = text.slice(1, -1);
-        return (String.fromCharCode(startMarker) +
+        return (String.fromCharCode(START_MARKER) +
             middle +
             String.fromCharCode(END_MARKER));
     }
     /**
      * Expands a tagged string back to the original text with before/after strings applied.
      *
+     * Spans are matched to markers by sorting paths element-wise — the span with
+     * the earliest path is matched to the leftmost START_MARKER in the string.
+     *
      * @param encoded The string containing PUA markers
      * @returns The fully expanded string with before/after strings wrapped around tagged spans
      */
@@ -66,45 +63,41 @@ export class StringTagger {
         if (encoded.length === 0) {
             return encoded;
         }
-        // Regex to find any PUA character (start markers or end marker)
-        const puaRegex = /[\ue000-\uf8ff]/g;
+        // Sort spans by path — this determines left-to-right marker assignment
+        const sortedSpans = [...this.spans].sort((a, b) => comparePaths(a.path, b.path));
+        let spanIndex = 0;
         const parts = [];
         let lastIndex = 0;
-        let match;
-        while ((match = puaRegex.exec(encoded)) !== null) {
-            const i = match.index;
+        for (let i = 0; i < encoded.length; i++) {
             const charCode = encoded.charCodeAt(i);
-            // Check if this is a start marker
-            const spanInfo = this.spans.get(charCode);
-            if (spanInfo) {
+            if (charCode === START_MARKER) {
                 // Copy any regular text before this marker
                 if (i > lastIndex) {
                     parts.push(encoded.slice(lastIndex, i));
                 }
-                // Found a tagged span
+                const spanInfo = sortedSpans[spanIndex++];
+                if (!spanInfo) {
+                    throw new Error("More start markers in string than registered spans");
+                }
                 if (spanInfo.originalEnd === null) {
-                    // Single-character span - no end marker to look for
+                    // Single-character span
                     parts.push(spanInfo.before, spanInfo.originalStart, spanInfo.after);
                     lastIndex = i + 1;
                 }
                 else {
-                    // Multi-character span - find the end marker
+                    // 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;
+                    i = endIndex; // skip past end marker
                 }
             }
-            else {
-                // Unrecognized PUA character - this is an error
-                throw new Error(`Unrecognized PUA marker at index ${i}`);
+            else if (charCode === END_MARKER) {
+                throw new Error(`Unexpected end marker at index ${i}`);
             }
         }
         // Copy any remaining regular text

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=string-tagger.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"string-tagger.test.d.ts","sourceRoot":"","sources":["../src/string-tagger.test.ts"],"names":[],"mappings":""}

package/dist/string-tagger.test.js

@@ -0,0 +1,181 @@
+import { describe, expect, it } from "vitest";
+import { StringTagger } from "./string-tagger.js";
+describe("StringTagger", () => {
+    describe("tag", () => {
+        it("should preserve string length for multi-char strings", () => {
+            const tagger = new StringTagger();
+            const result = tagger.tag("hello", "<b>", "</b>", [0]);
+            expect(result.length).toBe("hello".length);
+        });
+        it("should preserve string length for single-char strings", () => {
+            const tagger = new StringTagger();
+            const result = tagger.tag("x", "<b>", "</b>", [0]);
+            expect(result.length).toBe(1);
+        });
+        it("should preserve string length for two-char strings", () => {
+            const tagger = new StringTagger();
+            const result = tagger.tag("ab", "<b>", "</b>", [0]);
+            expect(result.length).toBe(2);
+        });
+        it("should return empty string for empty input", () => {
+            const tagger = new StringTagger();
+            const result = tagger.tag("", "<b>", "</b>", [0]);
+            expect(result).toBe("");
+        });
+        it("should preserve middle characters", () => {
+            const tagger = new StringTagger();
+            const result = tagger.tag("hello", "<b>", "</b>", [0]);
+            // middle characters "ell" should be preserved
+            expect(result.slice(1, -1)).toBe("ell");
+        });
+    });
+    describe("expand", () => {
+        it("should wrap a multi-char string with before/after", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("hello", "<b>", "</b>", [0]);
+            const expanded = tagger.expand(tagged);
+            expect(expanded).toBe("<b>hello</b>");
+        });
+        it("should wrap a single-char string with before/after", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("x", "[", "]", [0]);
+            const expanded = tagger.expand(tagged);
+            expect(expanded).toBe("[x]");
+        });
+        it("should wrap a two-char string with before/after", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("ab", "(", ")", [0]);
+            const expanded = tagger.expand(tagged);
+            expect(expanded).toBe("(ab)");
+        });
+        it("should handle empty before/after strings", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("hello", "", "", [0]);
+            const expanded = tagger.expand(tagged);
+            expect(expanded).toBe("hello");
+        });
+        it("should return empty string for empty input", () => {
+            const tagger = new StringTagger();
+            const expanded = tagger.expand("");
+            expect(expanded).toBe("");
+        });
+        it("should handle multiple tagged spans in sequence", () => {
+            const tagger = new StringTagger();
+            const a = tagger.tag("hello", "<a>", "</a>", [0]);
+            const b = tagger.tag("world", "<b>", "</b>", [1]);
+            const expanded = tagger.expand(a + " " + b);
+            expect(expanded).toBe("<a>hello</a> <b>world</b>");
+        });
+        it("should handle many tagged spans", () => {
+            const tagger = new StringTagger();
+            const parts = [];
+            for (let i = 0; i < 100; i++) {
+                parts.push(tagger.tag(`w${i}`, `<${i}>`, `</${i}>`, [i]));
+            }
+            const expanded = tagger.expand(parts.join(","));
+            for (let i = 0; i < 100; i++) {
+                expect(expanded).toContain(`<${i}>w${i}</${i}>`);
+            }
+        });
+        it("should handle tagged spans mixed with plain text", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("bold", "<b>", "</b>", [0]);
+            const expanded = tagger.expand("plain " + tagged + " also plain");
+            expect(expanded).toBe("plain <b>bold</b> also plain");
+        });
+        it("should handle adjacent tagged spans with no gap", () => {
+            const tagger = new StringTagger();
+            const a = tagger.tag("red", "<r>", "</r>", [0]);
+            const b = tagger.tag("blue", "<b>", "</b>", [1]);
+            const expanded = tagger.expand(a + b);
+            expect(expanded).toBe("<r>red</r><b>blue</b>");
+        });
+        it("should handle adjacent single-char tagged spans", () => {
+            const tagger = new StringTagger();
+            const a = tagger.tag("x", "(", ")", [0]);
+            const b = tagger.tag("y", "[", "]", [1]);
+            const expanded = tagger.expand(a + b);
+            expect(expanded).toBe("(x)[y]");
+        });
+        it("should handle unicode content", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("café", "<i>", "</i>", [0]);
+            const expanded = tagger.expand(tagged);
+            expect(expanded).toBe("<i>café</i>");
+        });
+    });
+    describe("tag + expand roundtrip with ANSI codes", () => {
+        const ANSI_GREEN = "\x1b[32m";
+        const ANSI_RESET = "\x1b[0m";
+        it("should produce correct ANSI-wrapped output", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag('"hello"', ANSI_GREEN, ANSI_RESET, [0]);
+            const expanded = tagger.expand(tagged);
+            expect(expanded).toBe(`${ANSI_GREEN}"hello"${ANSI_RESET}`);
+        });
+        it("should not affect line width measurement", () => {
+            const tagger = new StringTagger();
+            const tagged = tagger.tag("hello", ANSI_GREEN, ANSI_RESET, [0]);
+            expect(tagged.length).toBe("hello".length);
+        });
+    });
+    describe("path-based ordering", () => {
+        it("should expand correctly when tagged out of order (paths determine order)", () => {
+            const tagger = new StringTagger();
+            // Tag in order a, b, c — but paths say the string order is c, a, b
+            const a = tagger.tag("first", "<a>", "</a>", [1]);
+            const b = tagger.tag("second", "<b>", "</b>", [2]);
+            const c = tagger.tag("third", "<c>", "</c>", [0]);
+            // Assemble in string order matching paths: c ([0]), a ([1]), b ([2])
+            const expanded = tagger.expand(c + " " + a + " " + b);
+            expect(expanded).toBe("<c>third</c> <a>first</a> <b>second</b>");
+        });
+        it("should expand correctly when single-char tags are out of order", () => {
+            const tagger = new StringTagger();
+            const a = tagger.tag("x", "(", ")", [1]);
+            const b = tagger.tag("y", "[", "]", [0]);
+            // String order: b first, a second (matching paths [0], [1])
+            const expanded = tagger.expand(b + a);
+            expect(expanded).toBe("[y](x)");
+        });
+        it("should sort hierarchical paths correctly", () => {
+            const tagger = new StringTagger();
+            // Simulate a nested structure: key0: val0, key1: val1
+            const k0 = tagger.tag("key0", "<k>", "</k>", [0, 0]);
+            const v0 = tagger.tag("val0", "<v>", "</v>", [0, 1]);
+            const k1 = tagger.tag("key1", "<k>", "</k>", [1, 0]);
+            const v1 = tagger.tag("val1", "<v>", "</v>", [1, 1]);
+            const expanded = tagger.expand(k0 + ": " + v0 + ", " + k1 + ": " + v1);
+            expect(expanded).toBe("<k>key0</k>: <v>val0</v>, <k>key1</k>: <v>val1</v>");
+        });
+        it("should handle hierarchical paths tagged in arbitrary order", () => {
+            const tagger = new StringTagger();
+            // Tag in reverse order
+            const v1 = tagger.tag("val1", "<v>", "</v>", [1, 1]);
+            const k1 = tagger.tag("key1", "<k>", "</k>", [1, 0]);
+            const v0 = tagger.tag("val0", "<v>", "</v>", [0, 1]);
+            const k0 = tagger.tag("key0", "<k>", "</k>", [0, 0]);
+            // Assemble in correct string order
+            const expanded = tagger.expand(k0 + ": " + v0 + ", " + k1 + ": " + v1);
+            expect(expanded).toBe("<k>key0</k>: <v>val0</v>, <k>key1</k>: <v>val1</v>");
+        });
+    });
+    describe("interaction with string operations", () => {
+        it("should survive concatenation and still expand correctly", () => {
+            const tagger = new StringTagger();
+            const a = tagger.tag("key", "<k>", "</k>", [0]);
+            const b = tagger.tag('"value"', "<v>", "</v>", [1]);
+            const line = "{ " + a + ": " + b + " }";
+            const expanded = tagger.expand(line);
+            expect(expanded).toBe('{ <k>key</k>: <v>"value"</v> }');
+        });
+        it("should survive being split across lines and rejoined", () => {
+            const tagger = new StringTagger();
+            const a = tagger.tag("hello", "<a>", "</a>", [0]);
+            const b = tagger.tag("world", "<b>", "</b>", [1]);
+            const text = a + "\n" + b;
+            const expanded = tagger.expand(text);
+            expect(expanded).toBe("<a>hello</a>\n<b>world</b>");
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joshuahhh/pretty-print",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -19,7 +19,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "prettier": "^2.8.8"
+    "prettier": "^3.8.1"
   },
   "peerDependencies": {
     "react": ">=17"
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@types/prettier": "^2.7.3",
     "@types/react": "^19.2.4",
+    "prettier-plugin-organize-imports": "^4.3.0",
     "react": "^19.2.0",
     "typescript": "^5.2.2",
     "vitest": "^4.0.6"