Design inspector

mountDesignInspector(container, { transport, selection?, pageSize? }) mounts an optional browser panel. It imports only protocol types from the compiler and does not include TypeScript, Node APIs, React, or production Toned runtime code.

The transport connects to the same DesignProject, proposeValueEdit and checked applyDesignEdit used by the language server and CLI. Its query/document/propose/apply methods are asynchronous and receive an AbortSignal. The application controls source access, authentication, allowed workspaces and persistence. Do not expose a write transport on a production site or an unauthenticated network endpoint.

import { mountDesignInspector } from '@toned/compiler/inspector'

const inspector = mountDesignInspector(panel, {
  transport: developmentSourceBridge,
  selection: { uri: sourceUri, owner: 'buttonStyles', part: 'Root' },
})
// Selecting a preview element can call inspector.select({ uri, owner, part }).
// On development panel unmount:
inspector.dispose()

The panel displays sheet/declaration names, part and condition paths, exact source ranges, current version, and explanations for opaque values. Direct literals can use finite token choices when their local owning system is known, or JSON input. It never executes an expression or silently replaces a shared constant with its resolved value. Proposal previews show before/after source, scope, affected files and the index's stated impact limitations.

Apply re-reads and checks source version, revision and original span before calling the transport. The transport must perform the same checks atomically with the write: the browser check cannot prevent a race after its read. Failed checks must leave source untouched. A successful response must return the updated source document with a newer version. Source edits still require the owning type and renderer checks; an indexed literal change is not semantic validation.

Queries are paginated (default 100, maximum 500 declarations per page). Large workspace sheet lists show their truncation and permit an exact integration-driven selection. A selected-part filter applies to each declaration page and says so. This bounds DOM work without claiming omitted sheets/declarations do not exist. All source strings use textContent, never HTML. New selections and input changes invalidate pending requests; disposal aborts requests and removes the panel.

Finite token choices resolve the sheet's system declaration before querying its vocabulary. The optional transport.definition({ uri, name }, signal) operation follows indexed relative import aliases; the built-in source bridge provides it. Custom transports without that operation support same-file systems only. An unresolved or opaque system keeps the JSON literal editor available without inventing a token vocabulary. HTTP transport errors include the response status; HTML or malformed JSON responses point to the development bridge endpoint.

The public interactive example connects this same panel to one bounded in-memory DesignProject. Its compiler chunk loads only when opened; the example never writes files or evaluates source. Production applications can keep the compiler on their server and use the lightweight inspector transport instead. Source revision hashes use portable SHA-256 and retain the same identity in Node and browsers.