Variable: demoComponents
Examples / @xmachines/play-dom-demo / demoComponents
const demoComponents: object;Defined in: packages/play-dom/examples/demo/src/components/demo-components.ts:20
demoComponents — the full catalog component map, shared with the router demos.
Type Declaration
| Name | Type | Default value | Description | Defined in |
|---|---|---|---|---|
About | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘About’>). Renders static content from props. | packages/play-dom/examples/demo/src/components/demo-components.ts:22 |
Button | ComponentFn<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-dom/examples/demo/src/components/demo-components.ts:34 |
Contact | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Contact’>). Renders static content from props. | packages/play-dom/examples/demo/src/components/demo-components.ts:23 |
Dashboard | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Dashboard’>). Renders welcome message; logout button emits ‘logout’ action. | packages/play-dom/examples/demo/src/components/demo-components.ts:25 |
Field | ComponentFn<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. ctx.validation.registerField registers the bound state path with the DOM renderer’s validation registry so the validateForm built-in sees it (the incremental renderer releases the registration when the element unmounts). Error DISPLAY deliberately reads props.formErrors — the result validateForm wrote to state — so every renderer surfaces errors at the same moment: after submit. | packages/play-dom/examples/demo/src/components/demo-components.ts:33 |
Home | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Home’>). Renders static welcome content from props. | packages/play-dom/examples/demo/src/components/demo-components.ts:21 |
Login | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Login’>). Binds username input to ctx.store via $bindState; emits ‘submit’ on form submit. | packages/play-dom/examples/demo/src/components/demo-components.ts:24 |
NavBar | ComponentFn<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-dom/examples/demo/src/components/demo-components.ts:31 |
Navigation | ComponentFn<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 — Navigation status display. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Navigation’>). Renders current path and auth status from props. | packages/play-dom/examples/demo/src/components/demo-components.ts:30 |
Overview | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Overview’>). Relative route resolves to /dashboard/overview. Logout and goToStats buttons emit actions. | packages/play-dom/examples/demo/src/components/demo-components.ts:26 |
Panel | ComponentFn<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 appends its rendered spec children — repeat containers render ONCE and their children render per item, so a Panel is both the list shell and the row. | packages/play-dom/examples/demo/src/components/demo-components.ts:32 |
Profile | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Profile’>). Renders username from route params filled into props. | packages/play-dom/examples/demo/src/components/demo-components.ts:28 |
Settings | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Settings’>). Renders active section and username from props. | packages/play-dom/examples/demo/src/components/demo-components.ts:29 |
Stats | ComponentFn<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. Catalog-typed DOM component (ComponentFn<AuthCatalog, ‘Stats’>). Relative route resolves to /dashboard/stats. goToOverview button emits action. | packages/play-dom/examples/demo/src/components/demo-components.ts:27 |