feat: clarify content ownership and add classic presentation

Author: Cylop

README.md

@@ -22,6 +22,7 @@ JavaScript data is a graph. Dates, collections, undefined values, symbols and ob
 - Controlled expansion and selection; cancellable search through collapsed data.
 - Hierarchical ranges and bounded rendering for large values.
 - Tree keyboard navigation, separate focus/selection, accessible actions.
+- Inspector and classic presentations on the same graph engine.
 - CSS variables, targeted slots, custom types and actions, unstyled mode.
 - React 18.3/19, SSR, TypeScript, ESM/CJS; no runtime dependencies beyond React peers.
 
@@ -44,9 +45,11 @@ JavaScript data is a graph. Dates, collections, undefined values, symbols and ob
 }
 ```
 
+Prefer quoted keys and object-viewer syntax? Set `presentation="classic"`; see [presentation modes](https://react-data-inspector.nipesolutions.com/guides/presentation).
+
 See the [compiled customization examples](examples/customization.tsx), [API reference](docs/api.md), [architecture and type matrix](docs/architecture.md), and [performance methodology](benchmarks/README.md).
 
-The first alpha is read-only. Editing will emit immutable change proposals; it will never mutate application data. Getters are not evaluated, promises are not awaited, functions are not executed, and WeakMap/WeakSet contents remain opaque. Collection paths are not presented as JSON Pointers.
+The alpha is read-only; editing is not part of the public API. Getters are not evaluated, promises are not awaited, functions are not executed, and WeakMap/WeakSet contents remain opaque. Collection paths are not presented as JSON Pointers.
 
 ## Development
 

benchmarks/README.md

@@ -7,3 +7,9 @@ Each synchronous case has one warmup and ten measured runs; raw samples, median
 `npm run benchmark:memory` runs a forced-GC model-lifetime experiment. It reports observed collection, not a deterministic guarantee or a browser retained-heap audit. `npm run benchmark:browser` records Chromium UI timing samples against the local site, including expansion, collapse, selection reveal and scrolling. Browser fixture state and timings are in its JSON output.
 
 Do not compare these numbers to a competitor without matching fixtures, expansion state, browser, production mode and work limits. No comparative speed claim is published. Wide-object property enumeration is synchronous and should be measured separately. Search and default rendering intentionally perform different amounts of work.
+
+## Presentation comparison
+
+Run `npx tsx benchmarks/presentation.ts > /tmp/rdi-presentation-results.json` to compare inspector and classic server rendering over identical datasets: a 100k-property object, a 200-level object (subject to the inspection depth limit), 1k records, and a grouped 500k array with ranges closed and open. The harness alternates order, warms up both modes, records ten samples, and asserts identical data-row counts. Output includes Node/React versions and hardware details.
+
+This measures SSR traversal and markup generation, not browser frame rate. Classic emits additional decorative markup; equal row counts do not imply equal rendering cost. Browser tests separately cover uniform row heights, bounded mounted nodes and navigation in both presentations.

benchmarks/browser.mjs

@@ -32,7 +32,6 @@ try {
   const samples = []
   for (let i = 0; i < 5; i++) {
     await page.goto('http://127.0.0.1:5174')
-    await page.locator('.json-disclosure > summary').click()
     const tree = page.getByRole('tree', { name: 'Playground inspector' })
     const start = performance.now()
     await tree.getByRole('button', { name: 'Expand user' }).click()
@@ -52,13 +51,14 @@ try {
       .click()
     await tree.locator('[data-selected=true]').waitFor()
     const searchRevealMs = performance.now() - searchStart
+    await page.goto('http://127.0.0.1:5174/playground?section=json')
     await page
       .getByLabel('JSON input', { exact: true })
       .fill(JSON.stringify(Array.from({ length: 1000 }, (_, i) => i)))
     await page
       .getByRole('button', { name: 'Inspect JSON', exact: true })
       .click()
-    const virtual = page.getByRole('tree', { name: 'JSON input inspector' })
+    const virtual = page.getByRole('tree', { name: 'JSON inspector' })
     await virtual.focus()
     const scrollStart = performance.now()
     await virtual.press('End')

benchmarks/presentation.ts

@@ -0,0 +1,91 @@
+import { performance } from 'node:perf_hooks'
+import { arch, cpus, platform } from 'node:os'
+import { createElement, version as reactVersion } from 'react'
+import { renderToString } from 'react-dom/server'
+import { DataInspector, type DataInspectorProps } from '../src'
+
+// Run: npx tsx benchmarks/presentation.ts > presentation-results.json
+// Keep local comparison output outside the repository unless publishing evidence.
+const samples = 10
+let deep: unknown = 'leaf'
+for (let index = 0; index < 200; index++) deep = { child: deep }
+const array500k = Array.from({ length: 500000 }, (_, index) => index)
+const cases: Record<string, Omit<DataInspectorProps, 'presentation'>> = {
+  wide100k: {
+    value: Object.fromEntries(
+      Array.from({ length: 100000 }, (_, i) => [`field${i}`, i]),
+    ),
+    defaultExpandedDepth: 2,
+  },
+  deep200: { value: deep, defaultExpandedDepth: 101 },
+  array1k: {
+    value: Array.from({ length: 1000 }, (_, id) => ({ id })),
+    defaultExpandedDepth: 2,
+  },
+  grouped500k: { value: array500k, defaultExpandedDepth: 2 },
+  grouped500kOpenRange: {
+    value: array500k,
+    defaultExpandedDepth: 2,
+    defaultExpandedPaths: [
+      [{ kind: 'range', start: 0, end: 10000 }],
+      [
+        { kind: 'range', start: 0, end: 10000 },
+        { kind: 'range', start: 0, end: 100 },
+      ],
+    ],
+  },
+}
+const results = Object.entries(cases).map(([name, props]) => {
+  const timings = { inspector: [] as number[], classic: [] as number[] }
+  const rowCounts = { inspector: 0, classic: 0 }
+  for (let iteration = -1; iteration < samples; iteration++) {
+    const order =
+      iteration % 2 === 0
+        ? (['classic', 'inspector'] as const)
+        : (['inspector', 'classic'] as const)
+    for (const presentation of order) {
+      const start = performance.now()
+      const html = renderToString(
+        createElement(DataInspector, { ...props, presentation }),
+      )
+      const elapsed = performance.now() - start
+      rowCounts[presentation] = (html.match(/data-rdi-node=/g) ?? []).length
+      if (iteration >= 0) timings[presentation].push(elapsed)
+    }
+  }
+  if (rowCounts.inspector !== rowCounts.classic)
+    throw Error(`Presentation changed data row count for ${name}`)
+  const summarize = (values: number[]) => {
+    const sorted = [...values].sort((a, b) => a - b)
+    return {
+      samplesMs: values,
+      medianMs: (sorted[4]! + sorted[5]!) / 2,
+      p95Ms: sorted[9],
+    }
+  }
+  return {
+    name,
+    dataRows: rowCounts.inspector,
+    inspector: summarize(timings.inspector),
+    classic: summarize(timings.classic),
+  }
+})
+process.stdout.write(
+  JSON.stringify(
+    {
+      date: new Date().toISOString(),
+      environment: {
+        node: process.version,
+        react: reactVersion,
+        platform: platform(),
+        arch: arch(),
+        cpu: cpus()[0]?.model,
+      },
+      methodology:
+        'Paired in-process React SSR; one warmup per mode and fixture, ten measured samples, alternating mode order. Dataset construction excluded. Each render creates the same model and visible rows. No client windowing, scrolling, or browser timings. Deep fixture reaches the default maximum depth (100); wide and 500k cases use default grouping. Open-range fixture explicitly expands the first 10k range and first 100-value subrange. Customization, themes, and actions use defaults. Samples are descriptive, not timing assertions.',
+      results,
+    },
+    null,
+    2,
+  ) + '\n',
+)

docs/api.md

@@ -25,6 +25,7 @@ The root export provides `DataInspector`, `defineInspectorType`, `formatPath`, `
 | actions                     | readonly InspectorAction[] / []                 | Extend the action list.                                                                                      |
 | messages                    | Partial<InspectorMessages>                | Replace action labels, instructions, summary/nodeLabel functions and parameterized result/reference phrases. |
 | className, style            | React root attributes                           | Styling hooks.                                                                                               |
+| presentation                | inspector, classic / inspector                  | Visual notation only; shared inspection model and meaningful rows.                                           |
 | theme                       | light, dark, system / system                    | CSS-only color preference.                                                                                   |
 | density                     | compact, comfortable / compact                  | Default 28px or 36px rows; 40px on coarse pointers.                                                          |
 | unstyled                    | boolean / false                                 | Omit all default appearance selectors; keep behavior and attributes.                                         |
@@ -41,7 +42,19 @@ The application must rerender when input changes. A parent rerender re-inspects
 
 `inspectionOptions` supports `includeNonEnumerable` (false), `includeSymbols` (true for enumerable own symbols), `sortKeys` (false, true, or string comparator), `maxDepth` (100, maximum 200), `stringLimit` (200 characters, maximum 100,000), and `onInspectionError(error, path)`. Sorting never reorders Map/Set entries. Error detail adapters include non-enumerable own error properties.
 
-`searchOptions` supports `scope: 'keys' | 'values' | 'keys-and-values'` (last by default), `debounce` (150 ms), `maxNodes` (100,000, maximum 1,000,000), `maxResults` (1,000, maximum 10,000), and `stringLimit` (65,536). Work yields between bounded tasks. A search can be limited by depth, collections, nodes, result count or string truncation. Search enumerates hidden branches; normal collapsed rendering does not. Counts indicate incomplete results. Search can revisit a shared subtree at a shallower path to inspect descendants previously hidden by the depth limit. Query changes cancel previous scans. Data updates coalesce without restarting the query debounce; completed results remain usable while the localizable `refreshing` status reports “Updating results…”. Matches can lag live data, and reveal checks the current value. Mutating the same object does not provide an atomic search snapshot.
+`searchOptions` supports the following settings:
+
+| Option        | Default           | Maximum / choices                   |
+| ------------- | ----------------- | ----------------------------------- |
+| `scope`       | `keys-and-values` | `keys`, `values`, `keys-and-values` |
+| `debounce`    | 150 ms            | Query scheduling delay              |
+| `maxNodes`    | 100,000           | 1,000,000                           |
+| `maxResults`  | 1,000             | 10,000                              |
+| `stringLimit` | 65,536 characters | 100,000 characters                  |
+
+Search yields between bounded tasks and visits hidden branches. Depth, collection, node, result-count, and string limits can make counts incomplete. Query changes cancel earlier scans; data updates coalesce into a follow-up scan while completed results remain available.
+
+See [search behavior](https://react-data-inspector.nipesolutions.com/docs/search) for shared-path revisits, refresh state, controlled queries, and reveal against changing data. A scan is not an atomic snapshot, and synchronous application callbacks cannot be preempted.
 
 ## Paths
 
@@ -82,24 +95,10 @@ Use `defineInspectorType<T>` to preserve inference while combining heterogeneous
 
 ## Styling contract
 
-Styles are scoped with zero-specificity selectors rooted in `[data-rdi-root]:not([data-rdi-unstyled])`. No global reset or CSS-in-JS runtime. Consumer CSS variables override defaults without specificity escalation.
-
-| Variables                                                           | Meaning                                    |
-| ------------------------------------------------------------------- | ------------------------------------------ |
-| --rdi-font-family, --rdi-font-size, --rdi-line-height               | Typography                                 |
-| --rdi-background, --rdi-foreground, --rdi-muted                     | Surface and text                           |
-| --rdi-key-color, --rdi-string-color, --rdi-number-color             | Key, string, number/bigint syntax          |
-| --rdi-boolean-color, --rdi-null-color, --rdi-special-color          | Boolean, nullish/accessor, special syntax  |
-| --rdi-row-height, --rdi-indent                                      | Uniform row height and logical indentation |
-| --rdi-radius, --rdi-border-color                                    | Frame treatment                            |
-| --rdi-hover-background, --rdi-selected-background, --rdi-focus-ring | Interaction state                          |
-
-Stable presence selectors: `data-rdi-root`, `data-rdi-node`, `data-rdi-tree`, `data-rdi-key`, `data-rdi-value`, `data-rdi-toggle`, `data-rdi-actions`, `data-rdi-reference`, `data-rdi-search`, `data-rdi-footer`, `data-rdi-unstyled`, `data-rdi-match` (only matches).
-
-Stable state attributes: `data-type`, `data-depth` (zero-based display depth), `data-expanded`, `data-selected`, `data-focused` (string true/false), `data-theme`, `data-density`. DOM nesting and private CSS class names are not a styling contract. Logical padding supports RTL. Search matches are underlined, focus is outlined, selection has its own fill.
+The canonical [styling reference](https://react-data-inspector.nipesolutions.com/reference/styling) lists CSS variables, stable presence/state attributes, theme and density defaults, and unstyled responsibilities. Styles remain scoped with zero-specificity selectors; no global reset or CSS-in-JS runtime is required. DOM nesting and implementation class names are private.
 
-In unstyled mode, provide your own tree overflow, single-line row geometry, indentation, focus and selection appearance. The current virtualizer requires uniform row heights; use `virtualization={false}` for wrapping or variable-height custom rows. Even without virtualization, grouping and the row limit remain active.
+## Presentation
 
-## Editing design
+`presentation="inspector"` is the default. `presentation="classic"` changes built-in visual notation using quoted property keys and balanced inline container delimiters. It adds no closing-delimiter rows or selectable synthetic punctuation. Both presentations share paths, graph identity, search, selection, expansion, actions, grouping, virtualization, and SSR behavior.
 
-No editing prop is exported in this alpha. The next editing stage proposes a readonly replace/add/remove union with `path`, `value`, and `previousValue` where applicable. The application decides whether to apply a proposal. Initial string/number/boolean/null input will use deterministic parsing and normal form controls; any later JSON text mode uses JSON.parse. JSON Patch conversion will be restricted to compatible paths and values, not used as the internal model.
+Classic output is not serialized JSON or executable JavaScript. Non-JSON type summaries and separately addressed Map key/value rows retain their meaning. See [presentation modes](https://react-data-inspector.nipesolutions.com/guides/presentation) for examples and customization boundaries.