ngx-json-render 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-json-render",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Angular renderer for json-render — stream AI-generated JSON specs into real Angular components with signals.",
   "keywords": [
     "angular",
@@ -27,7 +27,8 @@
     "@json-render/core": ">=0.20.0 <0.22.0",
     "zod": "^4.0.0",
     "@modelcontextprotocol/ext-apps": "^1.7.5",
-    "@modelcontextprotocol/sdk": "^1.29.0"
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "@json-render/devtools": ">=0.20.0 <0.22.0"
   },
   "peerDependenciesMeta": {
     "@modelcontextprotocol/ext-apps": {
@@ -35,6 +36,9 @@
     },
     "@modelcontextprotocol/sdk": {
       "optional": true
+    },
+    "@json-render/devtools": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -55,6 +59,10 @@
       "types": "./types/ngx-json-render.d.ts",
       "default": "./fesm2022/ngx-json-render.mjs"
     },
+    "./devtools": {
+      "types": "./types/ngx-json-render-devtools.d.ts",
+      "default": "./fesm2022/ngx-json-render-devtools.mjs"
+    },
     "./mcp": {
       "types": "./types/ngx-json-render-mcp.d.ts",
       "default": "./fesm2022/ngx-json-render-mcp.mjs"

package/schematics/ng-add/index.cjs

@@ -32,7 +32,7 @@ function ngAdd() {
             'ngx-json-render is ready. Next: describe your components in a catalog,',
             `register them, and render a spec with <json-render> — see ${README}`,
             'No components of your own yet? `ng add ngx-json-render-material` adds',
-            '28 ready-made Angular Material ones.',
+            '29 ready-made Angular Material ones.',
         ].join('\n'));
         return (0, schematics_1.chain)(rules);
     };

package/types/ngx-json-render-devtools.d.ts

@@ -0,0 +1,67 @@
+import * as _json_render_core from '@json-render/core';
+import { Spec, Catalog } from '@json-render/core';
+import * as _angular_core from '@angular/core';
+import { PanelPosition, DevtoolsEvent } from '@json-render/devtools';
+export { DevtoolsEvent, PanelPosition } from '@json-render/devtools';
+import { JsonRenderer, ChatUIReturn } from 'ngx-json-render';
+
+/**
+ * A floating json-render devtools panel for an Angular app — the counterpart
+ * of `<JsonRenderDevtools />` in `@json-render/devtools-react`, `-vue`,
+ * `-svelte` and `-solid`, with the same tabs (Spec, State, Actions, Stream,
+ * Catalog) and the same element picker.
+ *
+ * Angular has no provider above `<json-render>` to read the renderer from, so
+ * the renderer is passed in by template reference. Streams need no wiring:
+ * every `injectUIStream` and `injectChatUI` generation in the app reaches the
+ * Stream tab.
+ *
+ * Renders nothing outside dev mode, and loads the panel itself
+ * (`@json-render/devtools`) with a dynamic `import()`, so a production build
+ * never fetches it.
+ *
+ * @example
+ * ```html
+ * <json-render #renderer [spec]="ui.spec()" [registry]="registry" />
+ * <json-render-devtools [renderer]="renderer" [catalog]="catalog" />
+ * ```
+ */
+declare class JsonRenderDevtools {
+    /** The renderer to inspect: its spec, state store and catalog. */
+    readonly renderer: _angular_core.InputSignal<JsonRenderer | null>;
+    /** Spec to show instead of the renderer's. */
+    readonly spec: _angular_core.InputSignal<Spec | null | undefined>;
+    /** Catalog for the Catalog tab, if the renderer was not given one. */
+    readonly catalog: _angular_core.InputSignal<Catalog<_json_render_core.SchemaDefinition<_json_render_core.SchemaType<string, unknown>, _json_render_core.SchemaType<string, unknown>>, unknown> | null | undefined>;
+    /**
+     * A chat from `injectChatUI`: every assistant reply with a spec becomes a
+     * generation in the Spec tab's switcher.
+     */
+    readonly chat: _angular_core.InputSignal<ChatUIReturn | null>;
+    readonly initialOpen: _angular_core.InputSignal<boolean>;
+    readonly position: _angular_core.InputSignal<PanelPosition>;
+    /** Toggle shortcut; `false` disables it. */
+    readonly hotkey: _angular_core.InputSignal<string | false>;
+    /** Events kept in the ring buffer. Read once, at creation. */
+    readonly bufferSize: _angular_core.InputSignal<number>;
+    /** Pad the page while the panel is open instead of overlaying it. */
+    readonly reserveSpace: _angular_core.InputSignal<boolean>;
+    /** Let the viewer flip the panel between bottom and right dock. */
+    readonly allowDockToggle: _angular_core.InputSignal<boolean>;
+    /** Every event the panel records, for an app's own logging. */
+    readonly event: _angular_core.OutputEmitterRef<DevtoolsEvent>;
+    private readonly destroyRef;
+    private events;
+    private panel;
+    private destroyed;
+    constructor();
+    private currentSpec;
+    private currentCatalog;
+    private generations;
+    private stateStore;
+    private mount;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<JsonRenderDevtools, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JsonRenderDevtools, "json-render-devtools", never, { "renderer": { "alias": "renderer"; "required": false; "isSignal": true; }; "spec": { "alias": "spec"; "required": false; "isSignal": true; }; "catalog": { "alias": "catalog"; "required": false; "isSignal": true; }; "chat": { "alias": "chat"; "required": false; "isSignal": true; }; "initialOpen": { "alias": "initialOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "bufferSize": { "alias": "bufferSize"; "required": false; "isSignal": true; }; "reserveSpace": { "alias": "reserveSpace"; "required": false; "isSignal": true; }; "allowDockToggle": { "alias": "allowDockToggle"; "required": false; "isSignal": true; }; }, { "event": "event"; }, never, never, true, never>;
+}
+
+export { JsonRenderDevtools };

package/types/ngx-json-render.d.ts

@@ -1090,6 +1090,36 @@ declare function createStoreSetState(store: Pick<StateStore, 'getSnapshot' | 'up
  */
 declare function applyPatch(spec: Spec, patch: JsonPatch): Spec;
 
+/** Token usage as the AI SDK reports it in its usage line. */
+interface StreamObserverUsage {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+}
+/**
+ * Hooks into every `injectUIStream` and `injectChatUI` generation in the app,
+ * the counterpart of `registerActionObserver` in `@json-render/core`. This is
+ * what `ngx-json-render/devtools` fills its Stream tab from, so it is private
+ * API: the `ɵ` prefix says it may change in any release.
+ */
+interface StreamObserver {
+    /** A generation started. */
+    onStart?(): void;
+    /** A patch was applied to the spec, in arrival order. */
+    onPatch?(patch: JsonPatch): void;
+    /** A line of prose arrived (`injectChatUI` only). */
+    onText?(text: string): void;
+    /** The usage line arrived (`injectUIStream` only). */
+    onUsage?(usage: StreamObserverUsage): void;
+    /** The generation ended; `ok` is false on an error, true on a stop. */
+    onEnd?(ok: boolean): void;
+}
+/**
+ * Register an observer for every stream in the app. Returns the function that
+ * removes it. Private API for `ngx-json-render/devtools`.
+ */
+declare function ɵregisterStreamObserver(observer: StreamObserver): () => void;
+
 /**
  * Convert a flat element list to a Spec.
  * Input elements use key/parentKey to establish identity and relationships.
@@ -1352,5 +1382,5 @@ declare function injectChatUI(options: ChatUIOptions): ChatUIReturn;
  */
 declare function injectDevtoolsActive(): Signal<boolean>;
 
-export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, formatSpecCheckIssues, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage };
-export type { ActionFn, Actions, CatalogHasActions, ChatMessage, ChatUIOptions, ChatUIReturn, ComponentRegistry, Components, ConfirmContext, ConfirmLabels, DataPart, DefineRegistryResult, EventHandle, FieldValidationState, PendingConfirmation, RegistryEntry, RenderContext, RenderLimits, RepeatScope, SetState, SpecCatalog, SpecCheck, SpecCheckIssue, SpecCheckIssueCode, SpecCheckOptions, SpecValidationMode, StateChange, TokenUsage, UIStreamOptions, UIStreamReturn, UIStreamSendOptions };
+export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, formatSpecCheckIssues, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage, ɵregisterStreamObserver };
+export type { ActionFn, Actions, CatalogHasActions, ChatMessage, ChatUIOptions, ChatUIReturn, ComponentRegistry, Components, ConfirmContext, ConfirmLabels, DataPart, DefineRegistryResult, EventHandle, FieldValidationState, PendingConfirmation, RegistryEntry, RenderContext, RenderLimits, RepeatScope, SetState, SpecCatalog, SpecCheck, SpecCheckIssue, SpecCheckIssueCode, SpecCheckOptions, SpecValidationMode, StateChange, StreamObserver, StreamObserverUsage, TokenUsage, UIStreamOptions, UIStreamReturn, UIStreamSendOptions };