@servicetitan/json-render-react 0.1.1 → 0.3.0

package/dist/marketing/catalog/catalog.d.ts

@@ -1 +1 @@
-export declare const marketingCatalog: import('../..').TeamCatalogDef;
+export declare const marketingCatalog: import('../..').ScopedCatalogDef;

package/dist/marketing/catalog/components/revenue-card.css.d.ts

@@ -0,0 +1,15 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const trendText: import('@vanilla-extract/recipes').RuntimeFn<{
+    trend: {
+        up: {
+            color: `var(--${string})`;
+        };
+        down: {
+            color: `var(--${string})`;
+        };
+        flat: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export type TrendTextVariants = RecipeVariants<typeof trendText>;

package/dist/marketing/catalog/index.d.ts

@@ -3,4 +3,4 @@ import { marketingCatalog } from './catalog';
 export { marketingRenderers } from './components';
 export { marketingCatalog };
 export declare const marketingCatalogEntries: CatalogEntry[];
-export { teams } from './teams';
+export { scopedCatalogs } from './scoped-catalogs';

package/dist/marketing/catalog/scoped-catalogs.d.ts

@@ -0,0 +1,4 @@
+export declare const scopedCatalogs: readonly [{
+    readonly name: "marketing";
+    readonly catalog: import('../..').ScopedCatalogDef;
+}];

package/dist/registry-utils.d.ts

@@ -1,5 +1,5 @@
 import { AllComponentRenderers } from './renderers/types';
-import { ComponentCatalogDef } from './team-catalog';
+import { ComponentCatalogDef } from './scoped-catalog';
 import { CatalogEntry, RendererContext } from './types';
 export declare function filterCatalogEntries(entries: CatalogEntry[], renderer: RendererContext): CatalogEntry[];
 export declare function toComponentCatalogMap(entries: CatalogEntry[]): Record<string, ComponentCatalogDef>;

package/dist/registry.d.ts

@@ -4,5 +4,6 @@ export declare function getRegistry(renderer?: RendererContext): import('@json-r
 export declare const registry: import('@json-render/react').ComponentRegistry;
 export declare const handlers: (getSetState: () => import('@json-render/react').SetState | undefined, getState: () => import('@json-render/core').StateModel) => Record<string, (params: Record<string, unknown>) => Promise<void>>;
 export declare const executeAction: (actionName: string, params: Record<string, unknown> | undefined, setState: import('@json-render/react').SetState, state?: import('@json-render/core').StateModel) => Promise<void>;
+export declare function getContextRegistry(): import('@json-render/react').DefineRegistryResult;
 /** Core catalog used for schema generation and prompt artifacts. */
 export { coreCatalog as catalog };

package/dist/renderers/context-spec-renderer.d.ts

@@ -0,0 +1,6 @@
+import { ContextRenderErrorInfo } from '../context/components/context-render-error-boundary';
+import { SpecRendererProps } from './spec-renderer';
+export type ContextSpecRendererProps = Omit<SpecRendererProps, "registry" | "handlers"> & Partial<Pick<SpecRendererProps, "registry" | "handlers">> & {
+    onRenderError?: (info: ContextRenderErrorInfo) => void;
+};
+export declare const ContextSpecRenderer: ({ spec, registry, handlers, actions, onRenderError, loading, }: ContextSpecRendererProps) => import("react/jsx-runtime").JSX.Element;

package/dist/renderers/sectioned-context-renderer.css.d.ts

@@ -0,0 +1 @@
+export declare const sectionLoadingTail: string;

package/dist/renderers/sectioned-context-renderer.d.ts

@@ -0,0 +1,36 @@
+import { Spec } from '@json-render/core';
+import { ComponentRegistry, DefineRegistryResult } from '@json-render/react';
+import { ContextRenderErrorInfo } from '../context/components/context-render-error-boundary';
+import { SpecRendererProps } from './spec-renderer';
+export type ContextSectionStatus = "loading" | "ready" | "error";
+/** A single top-level context section rendered by its own SpecRenderer + store. */
+export interface ContextSection {
+    id: string;
+    title?: string;
+    spec: Spec | null;
+    status: ContextSectionStatus;
+    error?: string;
+}
+export interface SectionedContextRendererProps {
+    /** Combined ContextPanel spec — split client-side into per-section slots. */
+    spec?: Spec | null;
+    /** Explicit ordered section slots (parallel per-section streams). Wins over `spec`. */
+    sections?: ContextSection[];
+    /** Global streaming flag — the last in-progress section shows a loading state. */
+    loading?: boolean;
+    registry?: ComponentRegistry;
+    handlers?: DefineRegistryResult["handlers"];
+    actions?: SpecRendererProps["actions"];
+    onRenderError?: (info: ContextRenderErrorInfo) => void;
+}
+/** Build a standalone `{ root, elements, state }` spec for one section. */
+export declare function extractSectionSpec(spec: Spec, sectionId: string): {
+    spec: Spec;
+    hasMissingRefs: boolean;
+};
+/**
+ * Renders a context panel as independent per-section renderers. Each section
+ * owns its own SpecRenderer + state store, so streaming in (or parallel-loading)
+ * later sections never resets an already-expanded section.
+ */
+export declare const SectionedContextRenderer: ({ spec, sections, loading, registry, handlers, actions, onRenderError, }: SectionedContextRendererProps) => import("react/jsx-runtime").JSX.Element;

package/dist/renderers/spec-renderer.d.ts

@@ -1,15 +1,30 @@
 import { Spec } from '@json-render/core';
 import { ComponentRegistry, DefineRegistryResult } from '@json-render/react';
 type SetState = (path: string, value: unknown) => void;
+export interface SpecActionHelpers {
+    setState: SetState;
+    getSnapshot: () => Record<string, unknown>;
+}
+export type SpecActionHandler = (params: unknown) => void | Promise<void>;
+export type SpecActionsFactory = (helpers: SpecActionHelpers) => Record<string, SpecActionHandler>;
 export interface SpecRendererProps {
     spec: Spec;
     registry: ComponentRegistry;
     handlers: DefineRegistryResult["handlers"];
-    onUserActionSubmit?: (params: {
-        actionId: string;
-        data: Record<string, unknown>;
-    }, setState: SetState) => void | Promise<void>;
-    onNavigate?: (url: string) => void;
+    /**
+     * Build the runtime action handlers for this spec. Called with helpers that
+     * expose the spec's local state store (`setState` for writing back,
+     * `getSnapshot` for reading the current form data). Handlers returned here
+     * are merged on top of the catalog defaults from `handlers`, so hosts can
+     * implement any action declared in the catalog (e.g. `atlas.submitUserAction`,
+     * `atlas.navigate`, `atlas.toolCall`) without changes to this package.
+     */
+    actions?: SpecActionsFactory;
+    /**
+     * True while the spec is still streaming in. Renders partial trees and
+     * suppresses "missing child" warnings for elements that have not arrived yet.
+     */
+    loading?: boolean;
 }
-export declare const SpecRenderer: ({ spec, registry, handlers, onUserActionSubmit, onNavigate, }: SpecRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SpecRenderer: ({ spec, registry, handlers, actions, loading }: SpecRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/renderers/types.d.ts

@@ -1,3 +1,4 @@
+import { contextContentRenderers, contextShellRenderers } from '../context/catalog';
 import { baseRenderers } from '../core/catalog';
 import { marketingRenderers } from '../marketing/catalog/components';
-export type AllComponentRenderers = typeof baseRenderers & typeof marketingRenderers;
+export type AllComponentRenderers = typeof baseRenderers & typeof marketingRenderers & typeof contextShellRenderers & typeof contextContentRenderers;

package/dist/renderers/wrap-context-registry.d.ts

@@ -0,0 +1,3 @@
+import { ComponentRegistry } from '@json-render/react';
+import { ContextRenderErrorInfo } from '../context/components/context-render-error-boundary';
+export declare function wrapContextRegistryWithErrorFallback(registry: ComponentRegistry, onRenderError?: (info: ContextRenderErrorInfo) => void): ComponentRegistry;

package/dist/scoped-catalog.d.ts

@@ -0,0 +1,64 @@
+import { Catalog } from '@json-render/core';
+import { z } from 'zod';
+import { baseComponents } from './core/catalog/schemas';
+export interface ComponentCatalogDef {
+    props: z.ZodType;
+    slots: string[];
+    description: string;
+    /**
+     * Events this component emits, surfaced to the LLM as `[events: ...]` in the
+     * generated prompt so it knows which event names are valid in an element's
+     * `on` map (e.g. `{ "press": { "action": "..." } }`).
+     */
+    events?: string[];
+}
+export interface ActionCatalogDef {
+    params: z.ZodType;
+    description: string;
+}
+/** Names of the components available in the core catalog. */
+export type CoreComponentName = keyof typeof baseComponents;
+/** Replace or append to a component's catalog description (prompt + JSON schema). */
+export interface DescriptionOverride {
+    /** Replace the component's description entirely. */
+    description?: string;
+    /** Append to the existing description (joined with a space). */
+    append?: string;
+}
+export interface ComposeCatalogComponentsOptions {
+    /** Core components to include: an array of names, or "all" (default). */
+    core?: CoreComponentName[] | "all";
+    /** Per-component description overrides/appends — applies to core and own components. */
+    overrides?: Partial<Record<string, DescriptionOverride>>;
+    /** This catalog's own (non-core) components. */
+    components?: Record<string, ComponentCatalogDef>;
+}
+/**
+ * Build the component map for a catalog: pick a subset of core components (or
+ * all), merge in the catalog's own components, and apply per-component
+ * description overrides. Descriptions feed both `defineCatalog(...).prompt()`
+ * and `.jsonSchema()`, so this controls what an agent sees for the catalog.
+ *
+ * Overrides are applied immutably — the shared `baseComponents` definitions
+ * (also used by the core catalog/registry) are never mutated.
+ */
+export declare function composeCatalogComponents(opts?: ComposeCatalogComponentsOptions): Record<string, ComponentCatalogDef>;
+export interface ScopedCatalogDef {
+    prefix: string;
+    components?: Record<string, ComponentCatalogDef>;
+    actions?: Record<string, ActionCatalogDef>;
+    /** Core components to include: an array of names, or "all" (default). */
+    core?: CoreComponentName[] | "all";
+    /** Per-component description overrides/appends — applies to core and own components. */
+    overrides?: Partial<Record<string, DescriptionOverride>>;
+    /** Appended to base rules in generated prompt */
+    rules?: string;
+}
+export interface MergedCatalog {
+    prefix: string;
+    catalog: Catalog;
+    prompt(baseRules: string): string;
+    jsonSchema(): object;
+}
+export declare function createScopedCatalog(def: ScopedCatalogDef): ScopedCatalogDef;
+export declare function mergeCatalogs(scopedDef: ScopedCatalogDef): MergedCatalog;

package/dist/styles.css

@@ -0,0 +1,2 @@
+._7hazmf0{width:100%}._7hazmf1{gap:var(--gpbfm95y);flex-direction:column;display:flex;overflow:visible}._7hazmf2{flex-direction:column;width:100%;display:flex}._7hazmf3{transition:grid-template-rows var(--m8lxqj1i) var(--m8lxqj1t), margin-top var(--m8lxqj1i) var(--m8lxqj1t), opacity var(--m8lxqj1i) var(--m8lxqj1t);display:grid;overflow:visible}._7hazmf4{margin-top:var(--gpbfm95y);opacity:1;grid-template-rows:1fr}._7hazmf5{opacity:0;grid-template-rows:0fr;margin-top:0}._7hazmf6{min-height:0;transition:padding var(--m8lxqj1i) var(--m8lxqj1t), margin var(--m8lxqj1i) var(--m8lxqj1t);overflow:hidden}._7hazmf7{padding:var(--gpbfm95y);margin:calc(-1 * var(--gpbfm95y))}._7hazmf8{margin:0;padding:0}._7hazmf9{justify-content:space-between;align-items:center;gap:var(--gpbfm95w);cursor:pointer;width:100%;color:inherit;font:inherit;text-align:left;background:0 0;border:none;margin:0;padding:0;display:flex}._7hazmfa{align-items:center;gap:var(--gpbfm95w);flex:1;min-width:0;display:flex}._7hazmfb{flex-shrink:0;align-items:center;min-width:0;display:inline-flex}._7hazmfc{transition:transform var(--m8lxqj1i) var(--m8lxqj1t);transform-origin:50%;flex-shrink:0}._7hazmfd{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){._7hazmf3,._7hazmf6,._7hazmfc{transition:none}}._1b4fiav0{width:100%;overflow-x:auto}._1b4fiav1{font-variant-numeric:tabular-nums;font-weight:500}._1afcqze0{gap:var(--gpbfm95w);flex-direction:column;width:100%;display:flex}._1afcqze1{width:100%}._1afcqze2{align-items:center;gap:var(--gpbfm95x);min-width:0;display:flex}._1afcqze3{width:var(--gpbfm962);height:var(--gpbfm962);background-color:var(--m8lxqjb);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}._1afcqze4{gap:var(--gpbfm95x);flex-direction:column;width:100%;display:flex}._1afcqze5{justify-content:center;align-items:center;width:100%;display:flex}._1afcqze6{object-fit:contain;border-radius:var(--m8lxqj1);max-width:100%;max-height:65vh}._1afcqze7{width:100%;min-height:var(--gpbfm968);justify-content:center;align-items:center;display:flex}._1afcqze8{text-align:left;width:100%}.blgld0{flex-direction:column;width:100%;display:flex}.blgld1{color:var(--m8lxqj12)}.blgld2{padding:var(--gpbfm95x)}.blgld3{column-gap:var(--gpbfm95x);row-gap:var(--gpbfm95v);grid-template-columns:minmax(0,1fr) max-content;align-items:start;width:100%;display:grid}.blgld4{gap:var(--gpbfm95v);flex-direction:column;min-width:0;display:flex}.blgld5{align-items:center;gap:var(--gpbfm95w);min-width:0;display:flex}.blgld6{width:var(--gpbfm95s);background-color:var(--m8lxqjw);flex-shrink:0;align-self:stretch}.blgld7{align-items:flex-end;gap:var(--gpbfm95v);flex-direction:column;flex-shrink:0;display:flex}._16tl57e0{gap:var(--gpbfm95y);width:100%;display:grid}._16tl57e1{grid-template-columns:repeat(3,minmax(0,1fr))}._16tl57e2{grid-template-columns:repeat(4,minmax(0,1fr))}._16tl57e3{color:var(--m8lxqj12)}._16tl57e4{gap:var(--gpbfm95v);flex-direction:column;min-width:0;display:flex}._2pn4ri0{isolation:isolate;width:100%;position:relative;overflow:visible}._4l9lye0{flex-direction:column;width:100%;display:flex}._4l9lye1{margin-bottom:var(--gpbfm95x)}._4l9lye2{padding-block:var(--gpbfm95w);gap:var(--gpbfm95v);flex-direction:column;display:flex}._4l9lye2:first-child{padding-top:0}._4l9lye3{justify-content:space-between;align-items:baseline;gap:var(--gpbfm95w);display:flex}._4l9lye4{color:var(--m8lxqj12)}._1ysu3qn0{gap:var(--gpbfm95w);flex-direction:column;display:flex}._1ysu3qn1{align-items:center;gap:var(--gpbfm95w);display:flex}._19nljxi0{gap:var(--gpbfm95x);flex-direction:column;max-width:800px;margin:0 auto;display:flex}._5kl5rv0{flex-direction:column;width:100%;display:flex}._5kl5rv1{background-color:var(--gpbfm9a);border-radius:var(--m8lxqj2);padding:var(--gpbfm95x);flex-direction:column;display:flex}._5kl5rv1:not(:first-child){margin-top:var(--gpbfm95x)}._5kl5rv2{margin-bottom:var(--gpbfm95w)}._5kl5rv3{color:var(--m8lxqj12)}._5kl5rv4{align-content:start;justify-items:start;width:100%;display:grid}._5kl5rv5{width:100%;margin-top:var(--gpbfm95x);margin-bottom:var(--gpbfm95x);height:var(--gpbfm95s);background-color:var(--m8lxqjw);grid-column:1/-1}._5kl5rv6{align-items:flex-start;gap:var(--gpbfm95v);flex-direction:column;justify-self:start;min-width:0;display:flex}.zf6dad0{width:100%}._1v76lkh0{border-width:var(--gpbfm95s);border-style:solid;border-color:var(--m8lxqjw);border-radius:var(--m8lxqj1);display:grid;overflow:hidden}._1v76lkh1{padding-block:var(--gpbfm95w);padding-inline:var(--gpbfm95x)}._1v76lkh2{border-bottom-width:var(--gpbfm95s);border-bottom-style:solid;border-bottom-color:var(--m8lxqjw)}._1le8ba61{pointer-events:none;opacity:var(--m8lxqj1w)}.cy2dbi0{font-weight:var(--gpbfm94r);font-size:13px}.cy2dbi1{color:var(--gpbfm91m)}.cy2dbi2{color:var(--gpbfm91a)}.cy2dbi3{color:var(--m8lxqj12)}.nilaa0{padding-top:var(--gpbfm95w)}
+/*$vite$:1*/

package/dist/test/setup-dom.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -1,7 +1,10 @@
 import { z } from 'zod';
-import { ComponentCatalogDef } from './team-catalog';
-export type RendererContext = "chat" | "panel" | "app";
-export declare const ALL_RENDERERS: RendererContext[];
+import { ComponentCatalogDef } from './scoped-catalog';
+/**
+ * Surfaces a catalog component can render on. `"all"` is a wildcard that matches
+ * every surface; `"panel"` and `"app"` are reserved for future use.
+ */
+export type RendererContext = "all" | "chat" | "panel" | "app" | "context";
 export interface CatalogEntry {
     name: string;
     catalog: ComponentCatalogDef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/json-render-react",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Generative UI catalog, registry, and renderers for json-render",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,11 +14,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./catalog/*": "./dist/catalog/*"
   },
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "@json-render/core": "^0.15.0",
     "@json-render/react": "^0.15.0",
@@ -28,6 +32,7 @@
     "@amcharts/amcharts5": "^5.0.0",
     "@servicetitan/anvil2": ">=1.0.0",
     "@servicetitan/anvil2-ext-charts": "0.1.7",
+    "@servicetitan/carto-react-kit": ">=0.3.0",
     "react": ">=18 <20",
     "react-dom": ">=18 <20"
   },
@@ -35,7 +40,7 @@
     "@amcharts/amcharts5": "^5.0.0",
     "@biomejs/biome": "^2.4.15",
     "@chromatic-com/storybook": "^5.2.1",
-    "@servicetitan/anvil2": "^3.0.6",
+    "@servicetitan/anvil2": "^3.3.0",
     "@servicetitan/anvil2-ext-charts": "0.1.7",
     "@storybook/addon-a11y": "^10.4.1",
     "@storybook/addon-docs": "^10.4.1",
@@ -46,6 +51,9 @@
     "@types/prismjs": "^1.26.6",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser": "^4.1.6",
     "@vitest/browser-playwright": "^4.1.6",
@@ -63,7 +71,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.6",
     "@carto-internal/biome-config": "0.0.0",
-    "@carto-internal/tsconfig": "0.0.0"
+    "@carto-internal/tools": "0.0.0",
+    "@carto-internal/tsconfig": "0.0.0",
+    "@servicetitan/carto-react-kit": "0.3.3",
+    "@servicetitan/carto-tokens": "0.2.0"
   },
   "scripts": {
     "build": "vite build && pnpm schema:gen",

package/dist/core/catalog/badge.catalog.d.ts

@@ -1,12 +0,0 @@
-import { z } from 'zod';
-export declare const badgeCatalog: {
-    props: z.ZodObject<{
-        content: z.ZodOptional<z.ZodString>;
-        offset: z.ZodOptional<z.ZodObject<{
-            x: z.ZodOptional<z.ZodString>;
-            y: z.ZodOptional<z.ZodString>;
-        }, z.core.$strip>>;
-    }, z.core.$strip>;
-    slots: string[];
-    description: string;
-};

package/dist/core/catalog/badge.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import { z } from 'zod';
-import { badgeCatalog } from './badge.catalog';
-export { badgeCatalog };
-export declare const BadgeRenderer: ({ props, children, }: {
-    props: z.infer<typeof badgeCatalog.props>;
-    children?: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/marketing/catalog/teams.d.ts

@@ -1,4 +0,0 @@
-export declare const teams: readonly [{
-    readonly name: "marketing";
-    readonly catalog: import('../..').TeamCatalogDef;
-}];

package/dist/team-catalog.d.ts

@@ -1,26 +0,0 @@
-import { Catalog } from '@json-render/core';
-import { z } from 'zod';
-export interface ComponentCatalogDef {
-    props: z.ZodType;
-    slots: string[];
-    description: string;
-}
-export interface ActionCatalogDef {
-    params: z.ZodType;
-    description: string;
-}
-export interface TeamCatalogDef {
-    prefix: string;
-    components?: Record<string, ComponentCatalogDef>;
-    actions?: Record<string, ActionCatalogDef>;
-    /** Appended to base rules in generated prompt */
-    rules?: string;
-}
-export interface MergedCatalog {
-    prefix: string;
-    catalog: Catalog;
-    prompt(baseRules: string): string;
-    jsonSchema(): object;
-}
-export declare function createTeamCatalog(def: TeamCatalogDef): TeamCatalogDef;
-export declare function mergeCatalogs(teamDef: TeamCatalogDef): MergedCatalog;