@servicetitan/json-render-react 0.1.1 → 0.2.0

package/dist/catalog/core/catalog-prompt.md

@@ -46,7 +46,7 @@ For lists where users can add/remove items (todos, carts, etc.), use pushState a
 
 IMPORTANT: State paths use RFC 6901 JSON Pointer syntax (e.g. "/todos/0/title"). Do NOT use JavaScript-style dot notation (e.g. "/todos.length" is WRONG). To generate unique IDs for new items, use "$id" instead of trying to read array length.
 
-AVAILABLE COMPONENTS (20):
+AVAILABLE COMPONENTS (21):
 
 - Text: { content: string, variant?: "headline" | "body" | "eyebrow", size?: "small" | "medium" | "large" | "xlarge", subdued?: boolean, el?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" } - Display text. variant: headline=bold title, eyebrow=small label, body=default. size: small/medium/large/xlarge (headline and body only). subdued: deemphasized body text. el: heading element for variant=headline (default h3).
 - Card: { background?: "strong" | "stronger", padding?: "0" | "xsmall" | "small" | "medium" | "large" } - White surface with padding; groups related content. background: strong | stronger for elevated surfaces. padding: 0 | xsmall | small | medium (default) | large. [accepts children]
@@ -65,6 +65,7 @@ AVAILABLE COMPONENTS (20):
 - Button: { label: string, appearance?: "primary" | "secondary" | "ghost", size?: "xsmall" | "small" | "medium" | "large", loading?: boolean, disabled?: boolean } - Clickable button. Every button automatically submits form data when pressed — the element key is used as the actionId to identify which button was clicked. loading: true shows a spinner. disabled: true prevents interaction. size: xsmall | small | medium (default) | large.
 - Checkbox: { label: string, checked?: boolean, disabled?: boolean } - Checkbox input with label. Use $bindState on checked to track state.
 - Input: { label: string, placeholder?: string, type?: "text" | "password" | "email" | "tel" | "url" | "number", value?: string, disabled?: boolean } - Free-text input field for user-typed values (names, notes, numbers, etc). type: text (default), password (masked), email, tel (phone), url, number. Use $bindState on value to bind to state. Prefer this over Select when the value is not from a fixed list.
+- Textarea: { label: string, placeholder?: string, description?: string, moreInfo?: string, value?: string, rows?: number, disabled?: boolean } - Multi-line free-text input for long values (notes, descriptions, email body). Use $bindState on value to bind to state. rows: visible row count (default 3).
 - Listbox: { label: string, options: Array<{ value: string, label: string }>, value?: string, disabled?: boolean } - Listbox for choosing from a fixed list of known options. Use only when options are predefined. For free-text user input use Input instead.
 - RadioGroup: { label: string, options: Array<{ value: string, label: string }>, value?: string, disabled?: boolean } - Group of radio buttons for single selection. Use $bindState on value to capture selection.
 - Switch: { label: string, checked?: boolean, disabled?: boolean } - Toggle switch for binary on/off settings. Prefer over Checkbox for enabling/disabling features. Use $bindState on checked to track state.
@@ -77,6 +78,7 @@ AVAILABLE ACTIONS:
 - validateForm: Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }. [built-in]
 - atlas.submitUserAction: Submit form data. actionId overrides default "form_submit" identifier.
 - atlas.navigate: Navigate to a URL or internal route. External URLs (http/https) open in a new tab; internal route strings navigate within the app.
+- atlas.toolCall: Invoke a tool on the active artifact panel app (an MCP-backed MFE). args is the tool argument payload; if omitted the current form state is sent.
 
 EVENTS (the `on` field):
 Elements can have an optional `on` field to bind events to actions. The `on` field is a top-level field on the element (sibling of type/props/children), NOT inside props.

package/dist/catalog/core/schema.json

@@ -28,6 +28,7 @@
               "Button",
               "Checkbox",
               "Input",
+              "Textarea",
               "Listbox",
               "RadioGroup",
               "Switch"

package/dist/catalog/marketing/catalog-prompt.md

@@ -46,7 +46,7 @@ For lists where users can add/remove items (todos, carts, etc.), use pushState a
 
 IMPORTANT: State paths use RFC 6901 JSON Pointer syntax (e.g. "/todos/0/title"). Do NOT use JavaScript-style dot notation (e.g. "/todos.length" is WRONG). To generate unique IDs for new items, use "$id" instead of trying to read array length.
 
-AVAILABLE COMPONENTS (21):
+AVAILABLE COMPONENTS (22):
 
 - Text: { content: string, variant?: "headline" | "body" | "eyebrow", size?: "small" | "medium" | "large" | "xlarge", subdued?: boolean, el?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" } - Display text. variant: headline=bold title, eyebrow=small label, body=default. size: small/medium/large/xlarge (headline and body only). subdued: deemphasized body text. el: heading element for variant=headline (default h3).
 - Card: { background?: "strong" | "stronger", padding?: "0" | "xsmall" | "small" | "medium" | "large" } - White surface with padding; groups related content. background: strong | stronger for elevated surfaces. padding: 0 | xsmall | small | medium (default) | large. [accepts children]
@@ -65,6 +65,7 @@ AVAILABLE COMPONENTS (21):
 - Button: { label: string, appearance?: "primary" | "secondary" | "ghost", size?: "xsmall" | "small" | "medium" | "large", loading?: boolean, disabled?: boolean } - Clickable button. Every button automatically submits form data when pressed — the element key is used as the actionId to identify which button was clicked. loading: true shows a spinner. disabled: true prevents interaction. size: xsmall | small | medium (default) | large.
 - Checkbox: { label: string, checked?: boolean, disabled?: boolean } - Checkbox input with label. Use $bindState on checked to track state.
 - Input: { label: string, placeholder?: string, type?: "text" | "password" | "email" | "tel" | "url" | "number", value?: string, disabled?: boolean } - Free-text input field for user-typed values (names, notes, numbers, etc). type: text (default), password (masked), email, tel (phone), url, number. Use $bindState on value to bind to state. Prefer this over Select when the value is not from a fixed list.
+- Textarea: { label: string, placeholder?: string, description?: string, moreInfo?: string, value?: string, rows?: number, disabled?: boolean } - Multi-line free-text input for long values (notes, descriptions, email body). Use $bindState on value to bind to state. rows: visible row count (default 3).
 - Listbox: { label: string, options: Array<{ value: string, label: string }>, value?: string, disabled?: boolean } - Listbox for choosing from a fixed list of known options. Use only when options are predefined. For free-text user input use Input instead.
 - RadioGroup: { label: string, options: Array<{ value: string, label: string }>, value?: string, disabled?: boolean } - Group of radio buttons for single selection. Use $bindState on value to capture selection.
 - Switch: { label: string, checked?: boolean, disabled?: boolean } - Toggle switch for binary on/off settings. Prefer over Checkbox for enabling/disabling features. Use $bindState on checked to track state.
@@ -78,6 +79,7 @@ AVAILABLE ACTIONS:
 - validateForm: Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }. [built-in]
 - atlas.submitUserAction: Submit form data. actionId overrides default "form_submit" identifier.
 - atlas.navigate: Navigate to a URL or internal route. External URLs (http/https) open in a new tab; internal route strings navigate within the app.
+- atlas.toolCall: Invoke a tool on the active artifact panel app (an MCP-backed MFE). args is the tool argument payload; if omitted the current form state is sent.
 
 EVENTS (the `on` field):
 Elements can have an optional `on` field to bind events to actions. The `on` field is a top-level field on the element (sibling of type/props/children), NOT inside props.

package/dist/catalog/marketing/schema.json

@@ -28,6 +28,7 @@
               "Button",
               "Checkbox",
               "Input",
+              "Textarea",
               "Listbox",
               "RadioGroup",
               "Switch",

package/dist/core/actions.d.ts

@@ -13,8 +13,16 @@ export declare const actionsCatalog: {
         }, z.core.$strip>;
         description: string;
     };
+    "atlas.toolCall": {
+        params: z.ZodObject<{
+            tool: z.ZodString;
+            args: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        }, z.core.$strip>;
+        description: string;
+    };
 };
 export declare const actionsHandlers: {
     "atlas.submitUserAction": (_params: unknown) => Promise<void>;
     "atlas.navigate": (_params: unknown) => Promise<void>;
+    "atlas.toolCall": (_params: unknown) => Promise<void>;
 };

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

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

package/dist/core/catalog/catalog-def.d.ts

@@ -340,6 +340,19 @@ export declare const catalog: import('@json-render/core').Catalog<{
             slots: never[];
             description: string;
         };
+        Textarea: {
+            props: import('zod').ZodObject<{
+                label: import('zod').ZodString;
+                placeholder: import('zod').ZodOptional<import('zod').ZodString>;
+                description: import('zod').ZodOptional<import('zod').ZodString>;
+                moreInfo: import('zod').ZodOptional<import('zod').ZodString>;
+                value: import('zod').ZodOptional<import('zod').ZodString>;
+                rows: import('zod').ZodOptional<import('zod').ZodNumber>;
+                disabled: import('zod').ZodOptional<import('zod').ZodBoolean>;
+            }, import('zod/v4/core').$strip>;
+            slots: never[];
+            description: string;
+        };
         Listbox: {
             props: import('zod').ZodObject<{
                 label: import('zod').ZodString;
@@ -390,5 +403,12 @@ export declare const catalog: import('@json-render/core').Catalog<{
             }, import('zod/v4/core').$strip>;
             description: string;
         };
+        "atlas.toolCall": {
+            params: import('zod').ZodObject<{
+                tool: import('zod').ZodString;
+                args: import('zod').ZodOptional<import('zod').ZodRecord<import('zod').ZodString, import('zod').ZodUnknown>>;
+            }, import('zod/v4/core').$strip>;
+            description: string;
+        };
     };
 }>;

package/dist/core/catalog/chart.css.d.ts

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

package/dist/core/catalog/grid.css.d.ts

@@ -0,0 +1,4 @@
+export declare const borderedGrid: string;
+export declare const borderedGridCell: string;
+/** Row separator — omit on the last row so it does not stack on the container bottom edge. */
+export declare const borderedGridRowDivider: string;

package/dist/core/catalog/listbox.css.d.ts

@@ -0,0 +1,9 @@
+export declare const listboxWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
+    disabled: {
+        true: {
+            pointerEvents: "none";
+            opacity: `var(--${string})`;
+        };
+        false: {};
+    };
+}>;

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

@@ -315,6 +315,19 @@ export declare const baseComponents: {
         slots: never[];
         description: string;
     };
+    Textarea: {
+        props: import('zod').ZodObject<{
+            label: import('zod').ZodString;
+            placeholder: import('zod').ZodOptional<import('zod').ZodString>;
+            description: import('zod').ZodOptional<import('zod').ZodString>;
+            moreInfo: import('zod').ZodOptional<import('zod').ZodString>;
+            value: import('zod').ZodOptional<import('zod').ZodString>;
+            rows: import('zod').ZodOptional<import('zod').ZodNumber>;
+            disabled: import('zod').ZodOptional<import('zod').ZodBoolean>;
+        }, import('zod/v4/core').$strip>;
+        slots: never[];
+        description: string;
+    };
     Listbox: {
         props: import('zod').ZodObject<{
             label: import('zod').ZodString;

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

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+export declare const textareaCatalog: {
+    props: z.ZodObject<{
+        label: z.ZodString;
+        placeholder: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+        moreInfo: z.ZodOptional<z.ZodString>;
+        value: z.ZodOptional<z.ZodString>;
+        rows: z.ZodOptional<z.ZodNumber>;
+        disabled: z.ZodOptional<z.ZodBoolean>;
+    }, z.core.$strip>;
+    slots: never[];
+    description: string;
+};

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

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+import { textareaCatalog } from './textarea.catalog';
+export { textareaCatalog };
+export declare const TextareaRenderer: ({ props, bindings, emit, }: {
+    props: z.infer<typeof textareaCatalog.props>;
+    bindings?: Record<string, string>;
+    emit: (event: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { Catalog, Spec } from '@json-render/core';
 export { catalog, executeAction, getRegistry, handlers, registry } from './registry';
-export { SpecRenderer, type SpecRendererProps } from './renderers/spec-renderer';
+export { type SpecActionHandler, type SpecActionHelpers, type SpecActionsFactory, SpecRenderer, type SpecRendererProps, } from './renderers/spec-renderer';
 export type { ActionCatalogDef, ComponentCatalogDef, MergedCatalog, TeamCatalogDef, } from './team-catalog';
 export { createTeamCatalog, mergeCatalogs } from './team-catalog';
 export type { RendererContext } from './types';