Skip to content
XMachines

Variable: demoComponents

Examples / @xmachines/play-react-demo / demoComponents

const demoComponents: object;

Defined in: packages/play-react/examples/demo/src/components/demo-components.ts:20

demoComponents — the full catalog component map, shared with the router demos.

Type Declaration

NameTypeDefault valueDescriptionDefined in
AboutComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "About">-About — Public information page Uses ComponentFn<AuthCatalog, “About”> for catalog-typed props. NavBar handles the navigation — this component only renders content.packages/play-react/examples/demo/src/components/demo-components.ts:22
ButtonComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Button">-Button — emits press; the spec’s on.press binding decides what happens (a host action sending a machine event, or a built-in like setState).packages/play-react/examples/demo/src/components/demo-components.ts:34
ContactComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Contact">-Contact — Public contact page Uses ComponentFn<AuthCatalog, “Contact”> for catalog-typed props. NavBar handles the navigation — this component only renders content.packages/play-react/examples/demo/src/components/demo-components.ts:23
DashboardComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Dashboard">-Dashboard — Protected authenticated home Uses ComponentFn<AuthCatalog, “Dashboard”> for catalog-typed props. Emits “logout” to trigger the auth.logout event via PlayRenderer actions map. NavBar handles the navigation — this component only handles auth actions.packages/play-react/examples/demo/src/components/demo-components.ts:25
FieldComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Field">-Field — labelled input with two-way $bindState binding and declarative validation checks. Registration happens by rendering: useFieldValidation registers the bound state path with the ValidationProvider so the validateForm built-in sees it. The error DISPLAY deliberately reads props.formErrors — the result object validateForm wrote to state — rather than the local hook, so every renderer (DOM included) surfaces errors at the same moment: after submit.packages/play-react/examples/demo/src/components/demo-components.ts:33
HomeComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Home">-Home - Public landing page component Uses ComponentFn<AuthCatalog, “Home”> for catalog-typed props. NavBar handles the navigation — this component only renders content.packages/play-react/examples/demo/src/components/demo-components.ts:21
LoginComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Login">-Login — Authentication form Uses ComponentFn<AuthCatalog, “Login”> for catalog-typed props. Username is bound via $bindState from the spec — useStateBinding provides reactive two-way binding to the @xstate/store atom backing the current view’s state store. Emits “submit” on form submit — spec resolves the username state and calls login handler.packages/play-react/examples/demo/src/components/demo-components.ts:24
NavBarComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "NavBar">NavBarView-packages/play-react/examples/demo/src/components/demo-components.ts:31
NavigationComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Navigation">-Navigation - Status display component Uses ComponentFn<AuthCatalog, “Navigation”> for catalog-typed props. This component displays navigation state info. NavBar handles the actual navigation.packages/play-react/examples/demo/src/components/demo-components.ts:30
OverviewComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Overview">-Overview - Dashboard overview child route component Uses ComponentFn<AuthCatalog, “Overview”> for catalog-typed props. Relative route “overview” resolves to /dashboard/overview.packages/play-react/examples/demo/src/components/demo-components.ts:26
PanelComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Panel">-Panel — generic container leaf for the 0.20 showcase. Renders an optional title and note, then its spec children — which is how repeat containers work: the element renders ONCE and its children render per item, so a Panel is both the list shell and the row.packages/play-react/examples/demo/src/components/demo-components.ts:32
ProfileComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Profile">-Profile — Protected user profile page Uses ComponentFn<AuthCatalog, “Profile”> for catalog-typed props. NavBar handles the navigation — this component only renders content.packages/play-react/examples/demo/src/components/demo-components.ts:28
SettingsComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Settings">-Settings — Protected settings page Uses ComponentFn<AuthCatalog, “Settings”> for catalog-typed props. NavBar handles the navigation — this component only renders content.packages/play-react/examples/demo/src/components/demo-components.ts:29
StatsComponentFn<Catalog<{ catalog: SchemaType<"object", { actions: SchemaType<"map", { description: SchemaType<"string", unknown>; params: SchemaType<"zod", unknown>; }>; components: SchemaType<"map", { description: SchemaType<"string", unknown>; example: SchemaType<"any", unknown>; props: SchemaType<"zod", unknown>; slots: SchemaType<"array", SchemaType<"string", unknown>>; }>; }>; spec: SchemaType<"object", { elements: SchemaType<"record", SchemaType<"object", { children: SchemaType<"array", SchemaType<…, …>>; props: SchemaType<"propsOf", string>; repeat: { inner?: unknown; kind: "any"; optional: true; }; slots: { inner?: … | …; kind: "record"; optional: true; }; type: SchemaType<"ref", string>; visible: { inner?: unknown; kind: "any"; optional: true; }; }>>; root: SchemaType<"string", unknown>; }>; }, { actions: { addTask: { description: "Add a task (sends task.add to the machine)"; params: ZodObject<{ title: ZodString; }, $strip>; }; completeTask: { description: "Mark a task done (sends task.complete to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; login: { description: "Login with username"; params: ZodObject<{ username: ZodString; }, $strip>; }; logout: { description: "Logout and return to home"; }; removeTask: { description: "Remove a task (sends task.remove to the machine)"; params: ZodObject<{ id: ZodString; }, $strip>; }; resetForm: { description: "Reset a demo form to its defaults (confirm-gated in the spec)"; params: ZodObject<{ form: ZodString; }, $strip>; }; route: { description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"; params: ZodObject<{ params: ZodOptional<ZodRecord<ZodString, ZodString>>; to: ZodString; }, $strip>; }; submitForm: { description: "Submit a demo form; rejects when the form did not pass validation"; params: ZodObject<{ form: ZodString; valid: ZodOptional<ZodNullable<ZodBoolean>>; }, $strip>; }; }; components: { About: { props: ZodObject<{ title: ZodString; }, $strip>; }; Button: { props: ZodObject<{ disabled: ZodOptional<ZodBoolean>; label: ZodString; testId: ZodOptional<ZodString>; variant: ZodOptional<ZodEnum<{ danger: …; primary: …; secondary: …; }>>; }, $strip>; }; Contact: { props: ZodObject<{ title: ZodString; }, $strip>; }; Dashboard: { props: ZodObject<{ username: ZodString; welcome: ZodBoolean; }, $strip>; }; Field: { props: ZodObject<{ checks: ZodOptional<ZodArray<ZodCustom<…, …>>>; formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<…>>>; inputType: ZodOptional<ZodEnum<{ email: …; text: …; textarea: …; }>>; label: ZodString; placeholder: ZodOptional<ZodString>; testId: ZodOptional<ZodString>; value: ZodOptional<ZodString>; }, $strip>; }; Home: { props: ZodObject<{ title: ZodString; }, $strip>; }; Login: { props: ZodObject<{ title: ZodString; username: ZodOptional<ZodString>; }, $strip>; }; NavBar: { props: ZodObject<{ isAuthenticated: ZodBoolean; username: ZodNullable<ZodString>; }, $strip>; }; Navigation: { props: ZodObject<{ currentPath: ZodString; isAuthenticated: ZodBoolean; }, $strip>; }; Overview: { props: ZodObject<{ title: ZodString; }, $strip>; }; Panel: { props: ZodObject<{ note: ZodOptional<ZodUnion<readonly […, …, …, …]>>; testId: ZodOptional<ZodString>; title: ZodOptional<ZodUnion<readonly […, …]>>; tone: ZodOptional<ZodEnum<{ danger: …; default: …; muted: …; success: …; }>>; }, $strip>; }; Profile: { props: ZodObject<{ username: ZodString; }, $strip>; }; Settings: { props: ZodObject<{ section: ZodOptional<ZodString>; username: ZodString; }, $strip>; }; Stats: { props: ZodObject<{ title: ZodString; }, $strip>; }; }; }>, "Stats">-Stats - Dashboard stats child route component Uses ComponentFn<AuthCatalog, “Stats”> for catalog-typed props. Relative route “stats” resolves to /dashboard/stats.packages/play-react/examples/demo/src/components/demo-components.ts:27