@muibook/components 19.6.0 → 20.1.0

package/dist/types/knowledge/compositions.d.ts

@@ -0,0 +1,4644 @@
+export declare const compositions: {
+    readonly signupFlow: {
+        readonly type: "Container";
+        readonly id: "signup_container";
+        readonly props: {
+            readonly center: true;
+            readonly size: "medium";
+            readonly style: "padding-block: var(--space-800);";
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "signup_card";
+            readonly props: {
+                readonly style: "width: 100%; max-width: 32rem; margin-inline: auto;";
+            };
+            readonly children: readonly [{
+                readonly type: "CardBody";
+                readonly id: "signup_card_body";
+                readonly props: {
+                    readonly style: "padding: var(--space-500);";
+                };
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "signup_stack";
+                    readonly props: {
+                        readonly space: "var(--space-400)";
+                        readonly alignX: "stretch";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "signup_title";
+                        readonly props: {
+                            readonly text: "Create your account";
+                            readonly size: "2";
+                            readonly level: "1";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Body";
+                        readonly id: "signup_intro";
+                        readonly props: {
+                            readonly text: "Start with your work email and a secure password.";
+                            readonly size: "small";
+                            readonly variant: "optional";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "FormGroup";
+                        readonly id: "signup_fields";
+                        readonly props: {
+                            readonly variant: "vertical";
+                            readonly "hide-label": true;
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Field";
+                            readonly id: "signup_name_field";
+                            readonly props: {
+                                readonly label: "Name";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Input";
+                                readonly id: "signup_name";
+                                readonly props: {
+                                    readonly label: "Name";
+                                    readonly placeholder: "Jane Smith";
+                                    readonly name: "name";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Field";
+                            readonly id: "signup_email_field";
+                            readonly props: {
+                                readonly label: "Email";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Input";
+                                readonly id: "signup_email";
+                                readonly props: {
+                                    readonly label: "Email";
+                                    readonly type: "email";
+                                    readonly placeholder: "jane@company.com";
+                                    readonly name: "email";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Field";
+                            readonly id: "signup_password_field";
+                            readonly props: {
+                                readonly label: "Password";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Input";
+                                readonly id: "signup_password";
+                                readonly props: {
+                                    readonly label: "Password";
+                                    readonly type: "password";
+                                    readonly placeholder: "Create password";
+                                    readonly name: "password";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Checkbox";
+                            readonly id: "signup_terms";
+                            readonly props: {
+                                readonly text: "I agree to the terms";
+                                readonly size: "small";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "signup_submit";
+                        readonly props: {
+                            readonly text: "Create account";
+                            readonly variant: "primary";
+                            readonly size: "large";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly rewardsCard: {
+        readonly type: "Container";
+        readonly id: "root";
+        readonly props: {
+            readonly size: "medium";
+            readonly center: true;
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "card";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "CardHeader";
+                readonly id: "header";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "title";
+                    readonly props: {
+                        readonly text: "Rewards";
+                        readonly size: "4";
+                        readonly level: "4";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "CardBody";
+                readonly id: "body";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "content";
+                    readonly props: {
+                        readonly space: "var(--space-200)";
+                        readonly alignX: "center";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "SmartCard";
+                        readonly id: "smart-card";
+                        readonly props: {
+                            readonly inverted: true;
+                            readonly "bg-image": "https://muibook.com/images/diamond.png";
+                            readonly partner: "https://muibook.com/images/emerald.svg";
+                            readonly number: "1234";
+                            readonly type: "Rewards";
+                            readonly variant: "plain";
+                            readonly state: "default";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly contactForm: {
+        readonly type: "VStack";
+        readonly id: "root";
+        readonly props: {
+            readonly space: "var(--space-300)";
+            readonly style: "width: 100%; max-width: 960px;";
+        };
+        readonly children: readonly [{
+            readonly type: "Heading";
+            readonly id: "title";
+            readonly props: {
+                readonly text: "Contact Us";
+                readonly size: "1";
+                readonly level: "1";
+            };
+            readonly children: readonly [];
+        }, {
+            readonly type: "Alert";
+            readonly id: "info";
+            readonly props: {
+                readonly variant: "info";
+                readonly label: "Info";
+            };
+            readonly children: readonly [{
+                readonly type: "Span";
+                readonly id: "copy";
+                readonly props: {
+                    readonly text: "Reply in 24h.";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "form";
+            readonly props: {
+                readonly space: "var(--space-200)";
+            };
+            readonly children: readonly [{
+                readonly type: "Input";
+                readonly id: "email";
+                readonly props: {
+                    readonly label: "Email";
+                    readonly type: "email";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Select";
+                readonly id: "subject";
+                readonly props: {
+                    readonly label: "Subject";
+                    readonly options: readonly [{
+                        readonly value: "general";
+                        readonly label: "General";
+                    }, {
+                        readonly value: "support";
+                        readonly label: "Support";
+                    }, {
+                        readonly value: "billing";
+                        readonly label: "Billing";
+                    }];
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Input";
+                readonly id: "message";
+                readonly props: {
+                    readonly label: "Message";
+                    readonly type: "text";
+                    readonly placeholder: "How can we help?";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "Button";
+            readonly id: "submit";
+            readonly props: {
+                readonly text: "Send Message";
+                readonly variant: "primary";
+            };
+            readonly children: readonly [];
+        }];
+    };
+    readonly analyticsSummary: {
+        readonly type: "Container";
+        readonly id: "analytics_container";
+        readonly props: {
+            readonly center: true;
+            readonly size: "large";
+            readonly style: "padding-block: var(--space-700);";
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "analytics_card";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "CardHeader";
+                readonly id: "analytics_header";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "analytics_title";
+                    readonly props: {
+                        readonly text: "Weekly performance";
+                        readonly size: "3";
+                        readonly level: "2";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "analytics_export";
+                    readonly props: {
+                        readonly text: "Export";
+                        readonly variant: "secondary";
+                        readonly size: "small";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "CardBody";
+                readonly id: "analytics_body";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Grid";
+                    readonly id: "analytics_metrics";
+                    readonly props: {
+                        readonly columns: "repeat(3, minmax(0, 1fr))";
+                        readonly gap: "var(--space-300)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_revenue";
+                        readonly props: {
+                            readonly space: "var(--space-050)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_revenue_label";
+                            readonly props: {
+                                readonly text: "Revenue";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_revenue_value";
+                            readonly props: {
+                                readonly text: "$42.8K";
+                                readonly size: "4";
+                                readonly level: "3";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "VStack";
+                        readonly id: "metric_orders";
+                        readonly props: {
+                            readonly space: "var(--space-050)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_orders_label";
+                            readonly props: {
+                                readonly text: "Orders";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_orders_value";
+                            readonly props: {
+                                readonly text: "1,284";
+                                readonly size: "4";
+                                readonly level: "3";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "VStack";
+                        readonly id: "metric_conversion";
+                        readonly props: {
+                            readonly space: "var(--space-050)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_conversion_label";
+                            readonly props: {
+                                readonly text: "Conversion";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_conversion_value";
+                            readonly props: {
+                                readonly text: "7.4%";
+                                readonly size: "4";
+                                readonly level: "3";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly onboarding: {
+        readonly type: "Container";
+        readonly id: "onboarding_container";
+        readonly props: {
+            readonly center: true;
+            readonly size: "small";
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "signup_card";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "CardHeader";
+                readonly id: "signup_header";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "signup_title";
+                    readonly props: {
+                        readonly text: "Sign up for our product!";
+                        readonly size: "3";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "CardBody";
+                readonly id: "signup_body";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "signup_stack";
+                    readonly props: {
+                        readonly space: "var(--space-400)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Field";
+                        readonly id: "firstNameField";
+                        readonly props: {
+                            readonly label: "First Name";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "firstName";
+                            readonly props: {
+                                readonly placeholder: "John";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "lastNameField";
+                        readonly props: {
+                            readonly label: "Last Name";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "lastName";
+                            readonly props: {
+                                readonly placeholder: "Doe";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "emailField";
+                        readonly props: {
+                            readonly label: "Email";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "email";
+                            readonly props: {
+                                readonly type: "email";
+                                readonly placeholder: "john@example.com";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "passwordField";
+                        readonly props: {
+                            readonly label: "Password";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "password";
+                            readonly props: {
+                                readonly type: "password";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "confirmPasswordField";
+                        readonly props: {
+                            readonly label: "Confirm Password";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "confirmPassword";
+                            readonly props: {
+                                readonly type: "password";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "termsField";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Checkbox";
+                            readonly id: "agreeTerms";
+                            readonly props: {
+                                readonly text: "I agree to the terms and conditions";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "ButtonGroup";
+                        readonly id: "signup_actions";
+                        readonly props: {
+                            readonly align: "right";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Button";
+                            readonly id: "signup_submit";
+                            readonly props: {
+                                readonly text: "Sign up";
+                                readonly variant: "primary";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly wallet: {
+        readonly type: "VStack";
+        readonly id: "wallet_root";
+        readonly props: {
+            readonly alignX: "stretch";
+            readonly style: "max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)";
+        };
+        readonly children: readonly [{
+            readonly type: "SmartCard";
+            readonly id: "wallet_card";
+            readonly props: {
+                readonly variant: "animated";
+                readonly partner: "Visa";
+                readonly type: "Debit";
+                readonly number: "1234";
+            };
+            readonly children: readonly [];
+        }, {
+            readonly type: "TabController";
+            readonly id: "wallet_tabs";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "tab_stack";
+                readonly props: {
+                    readonly alignX: "stretch";
+                    readonly space: "var(--space-300)";
+                };
+                readonly children: readonly [{
+                    readonly type: "TabBar";
+                    readonly id: "tab_bar";
+                    readonly props: {
+                        readonly inset: true;
+                        readonly stroke: "none";
+                        readonly radius: "500";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "TabItem";
+                        readonly id: "tab_item_tx";
+                        readonly props: {
+                            readonly active: true;
+                            readonly text: "Transactions";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "TabItem";
+                        readonly id: "tab_item_st";
+                        readonly props: {
+                            readonly text: "Statements";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "TabPanel";
+                    readonly id: "panel_tx";
+                    readonly props: {
+                        readonly item: "tab_item_tx";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "SlatGroup";
+                        readonly id: "tx_group";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Slat";
+                            readonly id: "tx_header";
+                            readonly props: {
+                                readonly variant: "header";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Heading";
+                                readonly id: "tx_header_title";
+                                readonly props: {
+                                    readonly text: "Today";
+                                    readonly size: "6";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Slat";
+                            readonly id: "tx_item_1";
+                            readonly props: {
+                                readonly variant: "row";
+                                readonly col: "1fr auto";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Avatar";
+                                readonly id: "tx_item_1_icon";
+                                readonly props: {};
+                                readonly children: readonly [];
+                            }, {
+                                readonly type: "VStack";
+                                readonly id: "tx_item_1_details";
+                                readonly props: {};
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly muitube: {
+        readonly type: "VStack";
+        readonly id: "muitube_root";
+        readonly props: {
+            readonly alignX: "stretch";
+            readonly alignY: "start";
+            readonly space: "var(--space-000)";
+            readonly style: "background: var(--surface-elevated-100);";
+        };
+        readonly children: readonly [{
+            readonly type: "HStack";
+            readonly id: "muitube_header";
+            readonly props: {
+                readonly alignX: "space-between";
+                readonly alignY: "center";
+                readonly style: "padding: var(--space-400); background: var(--surface-elevated-100);";
+            };
+            readonly children: readonly [{
+                readonly type: "HStack";
+                readonly id: "header_left";
+                readonly props: {
+                    readonly alignX: "start";
+                    readonly alignY: "center";
+                    readonly space: "var(--space-000)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Responsive";
+                    readonly id: "muitube_menu_button";
+                    readonly props: {
+                        readonly breakpoint: "768";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Button";
+                        readonly id: "muitube_menu_toggle_desktop";
+                        readonly slot: "showAbove";
+                        readonly props: {
+                            readonly variant: "tertiary";
+                            readonly "aria-label": "Toggle menu";
+                            readonly size: "medium";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "muitube_menu_icon_desktop";
+                            readonly props: {
+                                readonly icon: "mui-icon-menu";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "muitube_menu_toggle_mobile";
+                        readonly slot: "showBelow";
+                        readonly props: {
+                            readonly variant: "tertiary";
+                            readonly "aria-label": "Open menu";
+                            readonly size: "medium";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "muitube_menu_icon_mobile";
+                            readonly props: {
+                                readonly icon: "mui-icon-menu";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }, {
+                    readonly type: "HStack";
+                    readonly id: "muitube_brand";
+                    readonly props: {
+                        readonly alignX: "start";
+                        readonly alignY: "center";
+                        readonly space: "var(--space-200)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "logo";
+                        readonly props: {
+                            readonly text: "Premium";
+                            readonly size: "3";
+                            readonly level: "1";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Badge";
+                        readonly id: "country";
+                        readonly props: {
+                            readonly text: "AU";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }, {
+                readonly type: "Responsive";
+                readonly id: "header_search";
+                readonly props: {
+                    readonly breakpoint: "768";
+                    readonly style: "max-width: 70rem; width: 100%;";
+                };
+                readonly children: readonly [{
+                    readonly type: "HStack";
+                    readonly id: "header_search_desktop";
+                    readonly slot: "showAbove";
+                    readonly props: {
+                        readonly alignX: "center";
+                        readonly alignY: "center";
+                        readonly space: "var(--space-300)";
+                        readonly width: "100%";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Input";
+                        readonly id: "search_input";
+                        readonly props: {
+                            readonly placeholder: "Search";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Button";
+                            readonly id: "search_btn";
+                            readonly slot: "after";
+                            readonly props: {
+                                readonly variant: "secondary";
+                                readonly "aria-label": "Search";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "_Icon";
+                                readonly id: "search_icon";
+                                readonly props: {
+                                    readonly icon: "mui-icon-search";
+                                    readonly size: "medium";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "settings_btn";
+                        readonly props: {
+                            readonly variant: "tertiary";
+                            readonly "aria-label": "Settings";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "settings_icon";
+                            readonly props: {
+                                readonly icon: "mui-icon-gear";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "HStack";
+                readonly id: "header_actions";
+                readonly props: {
+                    readonly alignX: "start";
+                    readonly alignY: "center";
+                    readonly space: "var(--space-300)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Responsive";
+                    readonly id: "create_action";
+                    readonly props: {
+                        readonly breakpoint: "768";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Button";
+                        readonly id: "create_desktop";
+                        readonly slot: "showAbove";
+                        readonly props: {
+                            readonly text: "Create";
+                            readonly variant: "primary";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "create_mobile";
+                        readonly slot: "showBelow";
+                        readonly props: {
+                            readonly variant: "primary";
+                            readonly "aria-label": "Create";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "create_mobile_icon";
+                            readonly props: {
+                                readonly icon: "mui-icon-add";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "notifications";
+                    readonly props: {
+                        readonly variant: "tertiary";
+                        readonly "aria-label": "Notifications";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "_Icon";
+                        readonly id: "notification_icon";
+                        readonly props: {
+                            readonly icon: "mui-icon-notification";
+                            readonly size: "medium";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "Responsive";
+            readonly id: "muitube_layout";
+            readonly props: {
+                readonly breakpoint: "768";
+            };
+            readonly children: readonly [{
+                readonly type: "Drawer";
+                readonly id: "sidebar_drawer";
+                readonly slot: "showAbove";
+                readonly props: {
+                    readonly width: "240px";
+                    readonly variant: "push";
+                    readonly open: true;
+                    readonly side: "left";
+                    readonly "drawer-space": "none";
+                };
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "sidebar_menu";
+                    readonly props: {
+                        readonly space: "var(--space-000)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Button";
+                        readonly id: "menu_home";
+                        readonly props: {
+                            readonly text: "Home";
+                            readonly variant: "tertiary";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "menu_shorts";
+                        readonly props: {
+                            readonly text: "Shorts";
+                            readonly variant: "tertiary";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "menu_subscriptions";
+                        readonly props: {
+                            readonly text: "Subscriptions";
+                            readonly variant: "tertiary";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "VStack";
+                    readonly id: "muitube_page_desktop";
+                    readonly slot: "page";
+                    readonly props: {
+                        readonly space: "var(--space-000)";
+                        readonly alignX: "stretch";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "ChipRail";
+                        readonly id: "video_filters_desktop";
+                        readonly props: {
+                            readonly size: "medium";
+                            readonly "aria-label": "Video filters";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Chip";
+                            readonly id: "filter_all";
+                            readonly props: {
+                                readonly text: "All";
+                                readonly active: true;
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "filter_gaming";
+                            readonly props: {
+                                readonly text: "Gaming";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "filter_music";
+                            readonly props: {
+                                readonly text: "Music";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "filter_japan";
+                            readonly props: {
+                                readonly text: "Japan";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Grid";
+                        readonly id: "video_grid_desktop";
+                        readonly props: {
+                            readonly col: "repeat(auto-fit, minmax(268px, 1fr))";
+                            readonly space: "var(--space-600)";
+                            readonly alignX: "start";
+                            readonly alignY: "start";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Link";
+                            readonly id: "video_card_1";
+                            readonly props: {
+                                readonly href: "#";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "video_card_1_stack";
+                                readonly props: {
+                                    readonly alignX: "start";
+                                    readonly alignY: "start";
+                                    readonly space: "var(--space-300)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "VideoThumbnail";
+                                    readonly id: "video_card_1_thumbnail";
+                                    readonly props: {
+                                        readonly src: "/images/muitube/mui-video-light.png";
+                                        readonly "src-light": "/images/muitube/mui-video-light.png";
+                                        readonly "src-dark": "/images/muitube/mui-video-dark.png";
+                                        readonly "src-mui-light": "/images/muitube/mui-video-light.png";
+                                        readonly "src-mui-dark": "/images/muitube/mui-video-dark.png";
+                                        readonly alt: "Muibook video thumbnail";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_1_title";
+                                    readonly props: {
+                                        readonly text: "Designing with Muibook";
+                                        readonly size: "large";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_1_author";
+                                    readonly props: {
+                                        readonly text: "Michael Trilford";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_1_meta";
+                                    readonly props: {
+                                        readonly text: "12K views · 4 days ago";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }];
+                        }, {
+                            readonly type: "Link";
+                            readonly id: "video_card_2";
+                            readonly props: {
+                                readonly href: "#";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "video_card_2_stack";
+                                readonly props: {
+                                    readonly alignX: "start";
+                                    readonly alignY: "start";
+                                    readonly space: "var(--space-300)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "VideoThumbnail";
+                                    readonly id: "video_card_2_thumbnail";
+                                    readonly props: {
+                                        readonly src: "/images/muitube/sensei-video-light.png";
+                                        readonly "src-light": "/images/muitube/sensei-video-light.png";
+                                        readonly "src-dark": "/images/muitube/sensei-video-dark.png";
+                                        readonly alt: "Sensei video thumbnail";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_2_title";
+                                    readonly props: {
+                                        readonly text: "Building design system flows";
+                                        readonly size: "large";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_2_author";
+                                    readonly props: {
+                                        readonly text: "Sensei";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_2_meta";
+                                    readonly props: {
+                                        readonly text: "8.4K views · 1 week ago";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "VStack";
+                readonly id: "muitube_mobile";
+                readonly slot: "showBelow";
+                readonly props: {
+                    readonly alignX: "stretch";
+                    readonly space: "var(--space-000)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Drawer";
+                    readonly id: "sidebar_drawer_mobile";
+                    readonly props: {
+                        readonly variant: "overlay";
+                        readonly width: "260px";
+                        readonly side: "left";
+                        readonly "z-index": "200";
+                        readonly "drawer-space": "none";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "mobile_sidebar_menu";
+                        readonly props: {
+                            readonly space: "var(--space-000)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Button";
+                            readonly id: "mobile_menu_home";
+                            readonly props: {
+                                readonly text: "Home";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Button";
+                            readonly id: "mobile_menu_shorts";
+                            readonly props: {
+                                readonly text: "Shorts";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Button";
+                            readonly id: "mobile_menu_subscriptions";
+                            readonly props: {
+                                readonly text: "Subscriptions";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }, {
+                    readonly type: "VStack";
+                    readonly id: "muitube_page_mobile";
+                    readonly props: {
+                        readonly space: "var(--space-000)";
+                        readonly alignX: "stretch";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "ChipRail";
+                        readonly id: "video_filters_mobile";
+                        readonly props: {
+                            readonly size: "medium";
+                            readonly "aria-label": "Video filters";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Chip";
+                            readonly id: "mobile_filter_all";
+                            readonly props: {
+                                readonly text: "All";
+                                readonly active: true;
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "mobile_filter_music";
+                            readonly props: {
+                                readonly text: "Music";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "mobile_filter_japan";
+                            readonly props: {
+                                readonly text: "Japan";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Grid";
+                        readonly id: "video_grid_mobile";
+                        readonly props: {
+                            readonly col: "repeat(auto-fit, minmax(268px, 1fr))";
+                            readonly space: "var(--space-600)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Link";
+                            readonly id: "mobile_video_card";
+                            readonly props: {
+                                readonly href: "#";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VideoThumbnail";
+                                readonly id: "mobile_video_thumbnail";
+                                readonly props: {
+                                    readonly src: "/images/muitube/mui-video-light.png";
+                                    readonly "src-light": "/images/muitube/mui-video-light.png";
+                                    readonly "src-dark": "/images/muitube/mui-video-dark.png";
+                                    readonly alt: "Muibook video thumbnail";
+                                };
+                                readonly children: readonly [];
+                            }, {
+                                readonly type: "Body";
+                                readonly id: "mobile_video_title";
+                                readonly props: {
+                                    readonly text: "Designing with Muibook";
+                                    readonly size: "large";
+                                    readonly weight: "bold";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly songPage: {
+        readonly type: "Container";
+        readonly id: "song_container";
+        readonly props: {
+            readonly size: "large";
+            readonly center: true;
+        };
+        readonly children: readonly [{
+            readonly type: "HStack";
+            readonly id: "song_header";
+            readonly props: {
+                readonly alignX: "space-between";
+                readonly alignY: "center";
+                readonly style: "margin-block-end: var(--space-500);";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "logo";
+                readonly props: {
+                    readonly text: "SoundAmp";
+                    readonly size: "3";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Dropdown";
+                readonly id: "account_dropdown";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "AvatarChip";
+                    readonly id: "user_avatar";
+                    readonly props: {
+                        readonly primary: "Mike Trilford";
+                        readonly secondary: "Creator";
+                        readonly image: "https://muibook.com/images/mui/avatar-mike.jpg";
+                        readonly label: "Mike Trilford";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "song_content";
+            readonly props: {
+                readonly space: "var(--space-500)";
+                readonly alignX: "stretch";
+            };
+            readonly children: readonly [{
+                readonly type: "MediaPlayer";
+                readonly id: "song_player";
+                readonly props: {
+                    readonly type: "audio";
+                    readonly src: "https://muibook.com/audio/twilight.m4a";
+                    readonly artwork: "https://muibook.com/audio/artwork-light.png";
+                    readonly waveform: true;
+                    readonly height: "14rem";
+                };
+                readonly children: readonly [{
+                    readonly type: "AvatarChip";
+                    readonly id: "player_meta";
+                    readonly props: {
+                        readonly slot: "meta-before";
+                        readonly href: "#creator-profile";
+                        readonly image: "https://muibook.com/images/mui/avatar-mike.jpg";
+                        readonly label: "Mike Trilford";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Body";
+                        readonly id: "song_title";
+                        readonly slot: "primary";
+                        readonly props: {
+                            readonly text: "Twilight";
+                            readonly weight: "bold";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Link";
+                        readonly id: "song_creator";
+                        readonly slot: "secondary";
+                        readonly props: {
+                            readonly href: "#creator-profile";
+                            readonly text: "by Michael Trilford";
+                            readonly weight: "medium";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "player_buy";
+                    readonly slot: "meta-after";
+                    readonly props: {
+                        readonly text: "Buy now";
+                        readonly variant: "overlay";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }];
+    };
+    readonly videoMetadataAction: {
+        readonly type: "MediaPlayer";
+        readonly id: "video_metadata_action";
+        readonly props: {
+            readonly type: "video";
+            readonly src: "https://muibook.com/video/japan.mp4";
+            readonly poster: "https://muibook.com/video/japan-poster.jpg";
+        };
+        readonly children: readonly [{
+            readonly type: "AvatarChip";
+            readonly id: "video_creator";
+            readonly props: {
+                readonly slot: "meta-before";
+                readonly href: "#creator-profile";
+                readonly image: "https://muibook.com/images/mui/avatar-mike.jpg";
+                readonly label: "Mike Trilford";
+            };
+            readonly children: readonly [{
+                readonly type: "Body";
+                readonly id: "video_channel";
+                readonly slot: "primary";
+                readonly props: {
+                    readonly text: "Sugoi Travels";
+                    readonly weight: "bold";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Link";
+                readonly id: "video_subscribers";
+                readonly slot: "secondary";
+                readonly props: {
+                    readonly href: "#creator-profile";
+                    readonly text: "77k subscribers";
+                    readonly weight: "medium";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "Button";
+            readonly id: "video_subscribe";
+            readonly slot: "meta-after";
+            readonly props: {
+                readonly text: "Subscribe";
+                readonly variant: "overlay";
+            };
+            readonly children: readonly [];
+        }];
+    };
+    readonly customSelectWastePicker: {
+        readonly type: "Select";
+        readonly id: "waste_picker";
+        readonly props: {
+            readonly label: "Waste stream";
+            readonly appearance: "custom";
+            readonly "selected-content": "label";
+            readonly col: "1fr 1fr";
+            readonly space: "var(--space-100)";
+        };
+        readonly children: readonly [{
+            readonly type: "Option";
+            readonly id: "waste_recyclable";
+            readonly props: {
+                readonly value: "recyclable";
+                readonly label: "Recyclable";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_recyclable_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_recyclable_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-positive-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_recyclable_label";
+                    readonly props: {
+                        readonly text: "Recyclable";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Option";
+            readonly id: "waste_general";
+            readonly props: {
+                readonly value: "waste";
+                readonly label: "Waste";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_general_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_general_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-info-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_general_label";
+                    readonly props: {
+                        readonly text: "Waste";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Option";
+            readonly id: "waste_organic";
+            readonly props: {
+                readonly value: "organic";
+                readonly label: "Organic";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_organic_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_organic_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-warning-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_organic_label";
+                    readonly props: {
+                        readonly text: "Organic";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Option";
+            readonly id: "waste_burnable";
+            readonly props: {
+                readonly value: "burnable";
+                readonly label: "Burnable";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_burnable_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_burnable_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-attention-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_burnable_label";
+                    readonly props: {
+                        readonly text: "Burnable";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }];
+    };
+    readonly drawerWorkspace: {
+        readonly type: "Drawer";
+        readonly id: "workspace_drawer";
+        readonly props: {
+            readonly variant: "workspace";
+            readonly "resize-rail": true;
+            readonly "left-open": true;
+            readonly "right-open": true;
+            readonly "left-width": "24rem";
+            readonly "right-width": "30rem";
+            readonly "resize-min-left-width": "200";
+            readonly "resize-min-right-width": "200";
+            readonly "resize-min-page-width": "400";
+            readonly "resize-close-threshold": "96";
+            readonly breakpoint: "1400";
+            readonly height: "80dvh";
+        };
+        readonly children: readonly [{
+            readonly type: "VStack";
+            readonly id: "workspace_left_panel";
+            readonly slot: "left";
+            readonly props: {
+                readonly space: "var(--space-300)";
+                readonly padding: "var(--space-400)";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "workspace_left_heading";
+                readonly props: {
+                    readonly text: "Components";
+                    readonly size: "4";
+                    readonly level: "2";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Button";
+                readonly id: "workspace_media_card";
+                readonly props: {
+                    readonly text: "Media Card";
+                    readonly variant: "tertiary";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Button";
+                readonly id: "workspace_sidebar";
+                readonly props: {
+                    readonly text: "Sidebar";
+                    readonly variant: "tertiary";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "workspace_canvas";
+            readonly slot: "page";
+            readonly props: {
+                readonly space: "var(--space-400)";
+                readonly padding: "var(--space-500)";
+                readonly alignX: "center";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "workspace_canvas_heading";
+                readonly props: {
+                    readonly text: "Canvas";
+                    readonly size: "3";
+                    readonly level: "1";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Card";
+                readonly id: "workspace_selected_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "workspace_selected_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "workspace_selected_title";
+                        readonly props: {
+                            readonly text: "Customer Portal";
+                            readonly size: "4";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Body";
+                        readonly id: "workspace_selected_description";
+                        readonly props: {
+                            readonly text: "A selected page region sits between the component library and inspector panels.";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "workspace_right_panel";
+            readonly slot: "right";
+            readonly props: {
+                readonly space: "var(--space-300)";
+                readonly padding: "var(--space-400)";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "workspace_right_heading";
+                readonly props: {
+                    readonly text: "Inspector";
+                    readonly size: "4";
+                    readonly level: "2";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "AccordionBlock";
+                readonly id: "workspace_styles";
+                readonly props: {
+                    readonly heading: "Styles";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "AccordionBlock";
+                readonly id: "workspace_layout";
+                readonly props: {
+                    readonly heading: "Layout";
+                };
+                readonly children: readonly [];
+            }];
+        }];
+    };
+    readonly modelViewerProductPreview: {
+        readonly type: "ModelViewer";
+        readonly id: "model_viewer_product_preview";
+        readonly props: {
+            readonly src: "https://muibook.com/models/chair.glb";
+            readonly "ios-src": "https://muibook.com/models/chair.usdz";
+            readonly poster: "https://muibook.com/models/chair-poster.jpg";
+            readonly alt: "Three dimensional preview of a lounge chair.";
+            readonly controls: true;
+            readonly ar: true;
+        };
+        readonly children: readonly [{
+            readonly type: "Body";
+            readonly id: "model_viewer_fallback";
+            readonly props: {
+                readonly text: "Download the product model or view the gallery if 3D preview is unavailable.";
+                readonly size: "small";
+            };
+            readonly children: readonly [];
+        }];
+    };
+    readonly dashboard: {
+        readonly type: "VStack";
+        readonly id: "dashboard_root";
+        readonly props: {
+            readonly space: "var(--space-500)";
+            readonly alignX: "stretch";
+            readonly style: "max-width: 112rem; margin: 0 auto;";
+        };
+        readonly children: readonly [{
+            readonly type: "HStack";
+            readonly id: "dashboard_header";
+            readonly props: {
+                readonly alignX: "space-between";
+                readonly alignY: "center";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "header_title_stack";
+                readonly props: {
+                    readonly space: "var(--space-000)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "title";
+                    readonly props: {
+                        readonly text: "Revenue operations";
+                        readonly size: "2";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "subtitle";
+                    readonly props: {
+                        readonly text: "Track activation health...";
+                        readonly size: "small";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "ButtonGroup";
+                readonly id: "header_actions";
+                readonly props: {
+                    readonly align: "right";
+                };
+                readonly children: readonly [{
+                    readonly type: "Button";
+                    readonly id: "export_btn";
+                    readonly props: {
+                        readonly text: "Export report";
+                        readonly variant: "secondary";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "create_btn";
+                    readonly props: {
+                        readonly text: "Create task";
+                        readonly variant: "primary";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Grid";
+            readonly id: "dashboard_metric_grid";
+            readonly props: {
+                readonly col: "repeat(4, minmax(0, 1fr))";
+                readonly space: "var(--space-300)";
+                readonly alignX: "stretch";
+            };
+            readonly children: readonly [{
+                readonly type: "Card";
+                readonly id: "metric_revenue_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_revenue_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_revenue_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_revenue_label";
+                            readonly props: {
+                                readonly text: "Monthly revenue";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_revenue_value";
+                            readonly props: {
+                                readonly text: "$128.4K";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_revenue_delta";
+                            readonly props: {
+                                readonly text: "+12.8%";
+                                readonly size: "small";
+                                readonly variant: "positive";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "metric_accounts_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_accounts_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_accounts_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_accounts_label";
+                            readonly props: {
+                                readonly text: "Active accounts";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_accounts_value";
+                            readonly props: {
+                                readonly text: "24,892";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_accounts_delta";
+                            readonly props: {
+                                readonly text: "+4.2%";
+                                readonly size: "small";
+                                readonly variant: "positive";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "metric_conversion_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_conversion_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_conversion_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_conversion_label";
+                            readonly props: {
+                                readonly text: "Trial conversion";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_conversion_value";
+                            readonly props: {
+                                readonly text: "8.6%";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_conversion_delta";
+                            readonly props: {
+                                readonly text: "-1.1%";
+                                readonly size: "small";
+                                readonly variant: "warning";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "metric_uptime_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_uptime_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_uptime_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_uptime_label";
+                            readonly props: {
+                                readonly text: "Platform uptime";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_uptime_value";
+                            readonly props: {
+                                readonly text: "99.98%";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_uptime_delta";
+                            readonly props: {
+                                readonly text: "Stable";
+                                readonly size: "small";
+                                readonly variant: "neutral";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "Grid";
+            readonly id: "dashboard_main_grid";
+            readonly props: {
+                readonly col: "minmax(0, 1.55fr) minmax(26rem, 1fr)";
+                readonly space: "var(--space-300)";
+                readonly alignX: "stretch";
+            };
+            readonly children: readonly [{
+                readonly type: "Card";
+                readonly id: "activation_health_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardHeader";
+                    readonly id: "activation_health_header";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "activation_health_title";
+                        readonly props: {
+                            readonly text: "Activation health";
+                            readonly size: "3";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Body";
+                        readonly id: "activation_health_description";
+                        readonly props: {
+                            readonly text: "Performance across the last 30 days.";
+                            readonly size: "small";
+                            readonly variant: "optional";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "CardBody";
+                    readonly id: "activation_health_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "activation_health_stack";
+                        readonly props: {
+                            readonly space: "var(--space-400)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "VStack";
+                            readonly id: "feature_adoption";
+                            readonly props: {
+                                readonly space: "var(--space-100)";
+                                readonly alignX: "stretch";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "HStack";
+                                readonly id: "feature_adoption_header";
+                                readonly props: {
+                                    readonly alignX: "space-between";
+                                    readonly alignY: "center";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "feature_adoption_label";
+                                    readonly props: {
+                                        readonly text: "Feature adoption";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Badge";
+                                    readonly id: "feature_adoption_delta";
+                                    readonly props: {
+                                        readonly text: "+15%";
+                                        readonly size: "x-small";
+                                        readonly variant: "positive";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Progress";
+                                readonly id: "feature_adoption_progress";
+                                readonly props: {
+                                    readonly progress: "45";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "VStack";
+                            readonly id: "retention";
+                            readonly props: {
+                                readonly space: "var(--space-100)";
+                                readonly alignX: "stretch";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "HStack";
+                                readonly id: "retention_header";
+                                readonly props: {
+                                    readonly alignX: "space-between";
+                                    readonly alignY: "center";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "retention_label";
+                                    readonly props: {
+                                        readonly text: "30-day retention";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Badge";
+                                    readonly id: "retention_delta";
+                                    readonly props: {
+                                        readonly text: "+4%";
+                                        readonly size: "x-small";
+                                        readonly variant: "positive";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Progress";
+                                readonly id: "retention_progress";
+                                readonly props: {
+                                    readonly progress: "68";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "priority_tasks_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardHeader";
+                    readonly id: "priority_tasks_header";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "priority_tasks_title";
+                        readonly props: {
+                            readonly text: "Priority tasks";
+                            readonly size: "3";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "CardBody";
+                    readonly id: "priority_tasks_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "SlatGroup";
+                        readonly id: "priority_tasks";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Slat";
+                            readonly id: "billing_alerts_task";
+                            readonly props: {
+                                readonly variant: "action";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "billing_alerts_copy";
+                                readonly slot: "start";
+                                readonly props: {
+                                    readonly space: "var(--space-000)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "billing_alerts_title";
+                                    readonly props: {
+                                        readonly text: "Review billing alerts";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "billing_alerts_meta";
+                                    readonly props: {
+                                        readonly text: "Finance operations";
+                                        readonly size: "x-small";
+                                        readonly variant: "optional";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Badge";
+                                readonly id: "billing_alerts_badge";
+                                readonly slot: "end";
+                                readonly props: {
+                                    readonly text: "Urgent";
+                                    readonly size: "x-small";
+                                    readonly variant: "attention";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Slat";
+                            readonly id: "campaign_task";
+                            readonly props: {
+                                readonly variant: "action";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "campaign_copy";
+                                readonly slot: "start";
+                                readonly props: {
+                                    readonly space: "var(--space-000)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "campaign_title";
+                                    readonly props: {
+                                        readonly text: "Approve campaign launch";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "campaign_meta";
+                                    readonly props: {
+                                        readonly text: "Growth team";
+                                        readonly size: "x-small";
+                                        readonly variant: "optional";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Badge";
+                                readonly id: "campaign_badge";
+                                readonly slot: "end";
+                                readonly props: {
+                                    readonly text: "Pending";
+                                    readonly size: "x-small";
+                                    readonly variant: "warning";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "Responsive";
+            readonly id: "dashboard_activity";
+            readonly props: {
+                readonly breakpoint: "767";
+            };
+            readonly children: readonly [{
+                readonly type: "Card";
+                readonly id: "activity_table_card";
+                readonly slot: "showAbove";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardHeader";
+                    readonly id: "activity_table_header";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "activity_table_title";
+                        readonly props: {
+                            readonly text: "Recent account activity";
+                            readonly size: "3";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "CardBody";
+                    readonly id: "activity_table_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Table";
+                        readonly id: "activity_table";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "RowGroup";
+                            readonly id: "activity_rows";
+                            readonly props: {};
+                            readonly children: readonly [{
+                                readonly type: "Row";
+                                readonly id: "activity_acme";
+                                readonly props: {
+                                    readonly columns: "1.5fr 1fr 1fr auto";
+                                    readonly size: "small";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_account";
+                                    readonly props: {};
+                                    readonly children: readonly [{
+                                        readonly type: "Body";
+                                        readonly id: "activity_acme_name";
+                                        readonly props: {
+                                            readonly text: "Acme Studios";
+                                            readonly size: "small";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }, {
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_event";
+                                    readonly props: {};
+                                    readonly children: readonly [{
+                                        readonly type: "Body";
+                                        readonly id: "activity_acme_event_text";
+                                        readonly props: {
+                                            readonly text: "Renewal";
+                                            readonly size: "small";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }, {
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_status";
+                                    readonly props: {};
+                                    readonly children: readonly [{
+                                        readonly type: "Badge";
+                                        readonly id: "activity_acme_paid";
+                                        readonly props: {
+                                            readonly text: "Paid";
+                                            readonly size: "small";
+                                            readonly variant: "positive";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }, {
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_action";
+                                    readonly props: {
+                                        readonly action: true;
+                                    };
+                                    readonly children: readonly [{
+                                        readonly type: "Button";
+                                        readonly id: "activity_acme_view";
+                                        readonly props: {
+                                            readonly text: "View";
+                                            readonly size: "small";
+                                            readonly variant: "tertiary";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }];
+                            }];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "activity_slat_card";
+                readonly slot: "showBelow";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "activity_slat_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "SlatGroup";
+                        readonly id: "activity_mobile_slats";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Slat";
+                            readonly id: "activity_mobile_acme";
+                            readonly props: {
+                                readonly variant: "action";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "activity_mobile_acme_copy";
+                                readonly slot: "start";
+                                readonly props: {
+                                    readonly space: "var(--space-000)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "activity_mobile_acme_title";
+                                    readonly props: {
+                                        readonly text: "Acme Studios";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "activity_mobile_acme_meta";
+                                    readonly props: {
+                                        readonly text: "Renewal payment";
+                                        readonly size: "x-small";
+                                        readonly variant: "optional";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Badge";
+                                readonly id: "activity_mobile_acme_status";
+                                readonly slot: "end";
+                                readonly props: {
+                                    readonly text: "Paid";
+                                    readonly size: "x-small";
+                                    readonly variant: "positive";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+};
+export declare const compositionConfig: {
+    signupFlow: {
+        includeInAgent: true;
+        detail: "compact";
+    };
+    rewardsCard: {
+        includeInAgent: true;
+        detail: "compact";
+    };
+    contactForm: {
+        includeInAgent: true;
+        detail: "compact";
+    };
+    analyticsSummary: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    onboarding: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    wallet: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    muitube: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    songPage: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    videoMetadataAction: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    customSelectWastePicker: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    drawerWorkspace: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    modelViewerProductPreview: {
+        includeInAgent: false;
+        detail: "full";
+    };
+    dashboard: {
+        includeInAgent: false;
+        detail: "full";
+    };
+};
+export declare const agentCompositionKeys: ("signupFlow" | "rewardsCard" | "contactForm" | "analyticsSummary" | "onboarding" | "wallet" | "muitube" | "songPage" | "videoMetadataAction" | "customSelectWastePicker" | "drawerWorkspace" | "modelViewerProductPreview" | "dashboard")[];
+export type AgentCompositionKey = (typeof agentCompositionKeys)[number];
+export declare const agentCompositions: Pick<{
+    readonly signupFlow: {
+        readonly type: "Container";
+        readonly id: "signup_container";
+        readonly props: {
+            readonly center: true;
+            readonly size: "medium";
+            readonly style: "padding-block: var(--space-800);";
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "signup_card";
+            readonly props: {
+                readonly style: "width: 100%; max-width: 32rem; margin-inline: auto;";
+            };
+            readonly children: readonly [{
+                readonly type: "CardBody";
+                readonly id: "signup_card_body";
+                readonly props: {
+                    readonly style: "padding: var(--space-500);";
+                };
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "signup_stack";
+                    readonly props: {
+                        readonly space: "var(--space-400)";
+                        readonly alignX: "stretch";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "signup_title";
+                        readonly props: {
+                            readonly text: "Create your account";
+                            readonly size: "2";
+                            readonly level: "1";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Body";
+                        readonly id: "signup_intro";
+                        readonly props: {
+                            readonly text: "Start with your work email and a secure password.";
+                            readonly size: "small";
+                            readonly variant: "optional";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "FormGroup";
+                        readonly id: "signup_fields";
+                        readonly props: {
+                            readonly variant: "vertical";
+                            readonly "hide-label": true;
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Field";
+                            readonly id: "signup_name_field";
+                            readonly props: {
+                                readonly label: "Name";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Input";
+                                readonly id: "signup_name";
+                                readonly props: {
+                                    readonly label: "Name";
+                                    readonly placeholder: "Jane Smith";
+                                    readonly name: "name";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Field";
+                            readonly id: "signup_email_field";
+                            readonly props: {
+                                readonly label: "Email";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Input";
+                                readonly id: "signup_email";
+                                readonly props: {
+                                    readonly label: "Email";
+                                    readonly type: "email";
+                                    readonly placeholder: "jane@company.com";
+                                    readonly name: "email";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Field";
+                            readonly id: "signup_password_field";
+                            readonly props: {
+                                readonly label: "Password";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Input";
+                                readonly id: "signup_password";
+                                readonly props: {
+                                    readonly label: "Password";
+                                    readonly type: "password";
+                                    readonly placeholder: "Create password";
+                                    readonly name: "password";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Checkbox";
+                            readonly id: "signup_terms";
+                            readonly props: {
+                                readonly text: "I agree to the terms";
+                                readonly size: "small";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "signup_submit";
+                        readonly props: {
+                            readonly text: "Create account";
+                            readonly variant: "primary";
+                            readonly size: "large";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly rewardsCard: {
+        readonly type: "Container";
+        readonly id: "root";
+        readonly props: {
+            readonly size: "medium";
+            readonly center: true;
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "card";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "CardHeader";
+                readonly id: "header";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "title";
+                    readonly props: {
+                        readonly text: "Rewards";
+                        readonly size: "4";
+                        readonly level: "4";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "CardBody";
+                readonly id: "body";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "content";
+                    readonly props: {
+                        readonly space: "var(--space-200)";
+                        readonly alignX: "center";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "SmartCard";
+                        readonly id: "smart-card";
+                        readonly props: {
+                            readonly inverted: true;
+                            readonly "bg-image": "https://muibook.com/images/diamond.png";
+                            readonly partner: "https://muibook.com/images/emerald.svg";
+                            readonly number: "1234";
+                            readonly type: "Rewards";
+                            readonly variant: "plain";
+                            readonly state: "default";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly contactForm: {
+        readonly type: "VStack";
+        readonly id: "root";
+        readonly props: {
+            readonly space: "var(--space-300)";
+            readonly style: "width: 100%; max-width: 960px;";
+        };
+        readonly children: readonly [{
+            readonly type: "Heading";
+            readonly id: "title";
+            readonly props: {
+                readonly text: "Contact Us";
+                readonly size: "1";
+                readonly level: "1";
+            };
+            readonly children: readonly [];
+        }, {
+            readonly type: "Alert";
+            readonly id: "info";
+            readonly props: {
+                readonly variant: "info";
+                readonly label: "Info";
+            };
+            readonly children: readonly [{
+                readonly type: "Span";
+                readonly id: "copy";
+                readonly props: {
+                    readonly text: "Reply in 24h.";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "form";
+            readonly props: {
+                readonly space: "var(--space-200)";
+            };
+            readonly children: readonly [{
+                readonly type: "Input";
+                readonly id: "email";
+                readonly props: {
+                    readonly label: "Email";
+                    readonly type: "email";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Select";
+                readonly id: "subject";
+                readonly props: {
+                    readonly label: "Subject";
+                    readonly options: readonly [{
+                        readonly value: "general";
+                        readonly label: "General";
+                    }, {
+                        readonly value: "support";
+                        readonly label: "Support";
+                    }, {
+                        readonly value: "billing";
+                        readonly label: "Billing";
+                    }];
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Input";
+                readonly id: "message";
+                readonly props: {
+                    readonly label: "Message";
+                    readonly type: "text";
+                    readonly placeholder: "How can we help?";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "Button";
+            readonly id: "submit";
+            readonly props: {
+                readonly text: "Send Message";
+                readonly variant: "primary";
+            };
+            readonly children: readonly [];
+        }];
+    };
+    readonly analyticsSummary: {
+        readonly type: "Container";
+        readonly id: "analytics_container";
+        readonly props: {
+            readonly center: true;
+            readonly size: "large";
+            readonly style: "padding-block: var(--space-700);";
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "analytics_card";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "CardHeader";
+                readonly id: "analytics_header";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "analytics_title";
+                    readonly props: {
+                        readonly text: "Weekly performance";
+                        readonly size: "3";
+                        readonly level: "2";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "analytics_export";
+                    readonly props: {
+                        readonly text: "Export";
+                        readonly variant: "secondary";
+                        readonly size: "small";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "CardBody";
+                readonly id: "analytics_body";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Grid";
+                    readonly id: "analytics_metrics";
+                    readonly props: {
+                        readonly columns: "repeat(3, minmax(0, 1fr))";
+                        readonly gap: "var(--space-300)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_revenue";
+                        readonly props: {
+                            readonly space: "var(--space-050)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_revenue_label";
+                            readonly props: {
+                                readonly text: "Revenue";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_revenue_value";
+                            readonly props: {
+                                readonly text: "$42.8K";
+                                readonly size: "4";
+                                readonly level: "3";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "VStack";
+                        readonly id: "metric_orders";
+                        readonly props: {
+                            readonly space: "var(--space-050)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_orders_label";
+                            readonly props: {
+                                readonly text: "Orders";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_orders_value";
+                            readonly props: {
+                                readonly text: "1,284";
+                                readonly size: "4";
+                                readonly level: "3";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "VStack";
+                        readonly id: "metric_conversion";
+                        readonly props: {
+                            readonly space: "var(--space-050)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_conversion_label";
+                            readonly props: {
+                                readonly text: "Conversion";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_conversion_value";
+                            readonly props: {
+                                readonly text: "7.4%";
+                                readonly size: "4";
+                                readonly level: "3";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly onboarding: {
+        readonly type: "Container";
+        readonly id: "onboarding_container";
+        readonly props: {
+            readonly center: true;
+            readonly size: "small";
+        };
+        readonly children: readonly [{
+            readonly type: "Card";
+            readonly id: "signup_card";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "CardHeader";
+                readonly id: "signup_header";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "signup_title";
+                    readonly props: {
+                        readonly text: "Sign up for our product!";
+                        readonly size: "3";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "CardBody";
+                readonly id: "signup_body";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "signup_stack";
+                    readonly props: {
+                        readonly space: "var(--space-400)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Field";
+                        readonly id: "firstNameField";
+                        readonly props: {
+                            readonly label: "First Name";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "firstName";
+                            readonly props: {
+                                readonly placeholder: "John";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "lastNameField";
+                        readonly props: {
+                            readonly label: "Last Name";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "lastName";
+                            readonly props: {
+                                readonly placeholder: "Doe";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "emailField";
+                        readonly props: {
+                            readonly label: "Email";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "email";
+                            readonly props: {
+                                readonly type: "email";
+                                readonly placeholder: "john@example.com";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "passwordField";
+                        readonly props: {
+                            readonly label: "Password";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "password";
+                            readonly props: {
+                                readonly type: "password";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "confirmPasswordField";
+                        readonly props: {
+                            readonly label: "Confirm Password";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Input";
+                            readonly id: "confirmPassword";
+                            readonly props: {
+                                readonly type: "password";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Field";
+                        readonly id: "termsField";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Checkbox";
+                            readonly id: "agreeTerms";
+                            readonly props: {
+                                readonly text: "I agree to the terms and conditions";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "ButtonGroup";
+                        readonly id: "signup_actions";
+                        readonly props: {
+                            readonly align: "right";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Button";
+                            readonly id: "signup_submit";
+                            readonly props: {
+                                readonly text: "Sign up";
+                                readonly variant: "primary";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly wallet: {
+        readonly type: "VStack";
+        readonly id: "wallet_root";
+        readonly props: {
+            readonly alignX: "stretch";
+            readonly style: "max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)";
+        };
+        readonly children: readonly [{
+            readonly type: "SmartCard";
+            readonly id: "wallet_card";
+            readonly props: {
+                readonly variant: "animated";
+                readonly partner: "Visa";
+                readonly type: "Debit";
+                readonly number: "1234";
+            };
+            readonly children: readonly [];
+        }, {
+            readonly type: "TabController";
+            readonly id: "wallet_tabs";
+            readonly props: {};
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "tab_stack";
+                readonly props: {
+                    readonly alignX: "stretch";
+                    readonly space: "var(--space-300)";
+                };
+                readonly children: readonly [{
+                    readonly type: "TabBar";
+                    readonly id: "tab_bar";
+                    readonly props: {
+                        readonly inset: true;
+                        readonly stroke: "none";
+                        readonly radius: "500";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "TabItem";
+                        readonly id: "tab_item_tx";
+                        readonly props: {
+                            readonly active: true;
+                            readonly text: "Transactions";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "TabItem";
+                        readonly id: "tab_item_st";
+                        readonly props: {
+                            readonly text: "Statements";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "TabPanel";
+                    readonly id: "panel_tx";
+                    readonly props: {
+                        readonly item: "tab_item_tx";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "SlatGroup";
+                        readonly id: "tx_group";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Slat";
+                            readonly id: "tx_header";
+                            readonly props: {
+                                readonly variant: "header";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Heading";
+                                readonly id: "tx_header_title";
+                                readonly props: {
+                                    readonly text: "Today";
+                                    readonly size: "6";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Slat";
+                            readonly id: "tx_item_1";
+                            readonly props: {
+                                readonly variant: "row";
+                                readonly col: "1fr auto";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "Avatar";
+                                readonly id: "tx_item_1_icon";
+                                readonly props: {};
+                                readonly children: readonly [];
+                            }, {
+                                readonly type: "VStack";
+                                readonly id: "tx_item_1_details";
+                                readonly props: {};
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly muitube: {
+        readonly type: "VStack";
+        readonly id: "muitube_root";
+        readonly props: {
+            readonly alignX: "stretch";
+            readonly alignY: "start";
+            readonly space: "var(--space-000)";
+            readonly style: "background: var(--surface-elevated-100);";
+        };
+        readonly children: readonly [{
+            readonly type: "HStack";
+            readonly id: "muitube_header";
+            readonly props: {
+                readonly alignX: "space-between";
+                readonly alignY: "center";
+                readonly style: "padding: var(--space-400); background: var(--surface-elevated-100);";
+            };
+            readonly children: readonly [{
+                readonly type: "HStack";
+                readonly id: "header_left";
+                readonly props: {
+                    readonly alignX: "start";
+                    readonly alignY: "center";
+                    readonly space: "var(--space-000)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Responsive";
+                    readonly id: "muitube_menu_button";
+                    readonly props: {
+                        readonly breakpoint: "768";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Button";
+                        readonly id: "muitube_menu_toggle_desktop";
+                        readonly slot: "showAbove";
+                        readonly props: {
+                            readonly variant: "tertiary";
+                            readonly "aria-label": "Toggle menu";
+                            readonly size: "medium";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "muitube_menu_icon_desktop";
+                            readonly props: {
+                                readonly icon: "mui-icon-menu";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "muitube_menu_toggle_mobile";
+                        readonly slot: "showBelow";
+                        readonly props: {
+                            readonly variant: "tertiary";
+                            readonly "aria-label": "Open menu";
+                            readonly size: "medium";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "muitube_menu_icon_mobile";
+                            readonly props: {
+                                readonly icon: "mui-icon-menu";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }, {
+                    readonly type: "HStack";
+                    readonly id: "muitube_brand";
+                    readonly props: {
+                        readonly alignX: "start";
+                        readonly alignY: "center";
+                        readonly space: "var(--space-200)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "logo";
+                        readonly props: {
+                            readonly text: "Premium";
+                            readonly size: "3";
+                            readonly level: "1";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Badge";
+                        readonly id: "country";
+                        readonly props: {
+                            readonly text: "AU";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }, {
+                readonly type: "Responsive";
+                readonly id: "header_search";
+                readonly props: {
+                    readonly breakpoint: "768";
+                    readonly style: "max-width: 70rem; width: 100%;";
+                };
+                readonly children: readonly [{
+                    readonly type: "HStack";
+                    readonly id: "header_search_desktop";
+                    readonly slot: "showAbove";
+                    readonly props: {
+                        readonly alignX: "center";
+                        readonly alignY: "center";
+                        readonly space: "var(--space-300)";
+                        readonly width: "100%";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Input";
+                        readonly id: "search_input";
+                        readonly props: {
+                            readonly placeholder: "Search";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Button";
+                            readonly id: "search_btn";
+                            readonly slot: "after";
+                            readonly props: {
+                                readonly variant: "secondary";
+                                readonly "aria-label": "Search";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "_Icon";
+                                readonly id: "search_icon";
+                                readonly props: {
+                                    readonly icon: "mui-icon-search";
+                                    readonly size: "medium";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "settings_btn";
+                        readonly props: {
+                            readonly variant: "tertiary";
+                            readonly "aria-label": "Settings";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "settings_icon";
+                            readonly props: {
+                                readonly icon: "mui-icon-gear";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "HStack";
+                readonly id: "header_actions";
+                readonly props: {
+                    readonly alignX: "start";
+                    readonly alignY: "center";
+                    readonly space: "var(--space-300)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Responsive";
+                    readonly id: "create_action";
+                    readonly props: {
+                        readonly breakpoint: "768";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Button";
+                        readonly id: "create_desktop";
+                        readonly slot: "showAbove";
+                        readonly props: {
+                            readonly text: "Create";
+                            readonly variant: "primary";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "create_mobile";
+                        readonly slot: "showBelow";
+                        readonly props: {
+                            readonly variant: "primary";
+                            readonly "aria-label": "Create";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "_Icon";
+                            readonly id: "create_mobile_icon";
+                            readonly props: {
+                                readonly icon: "mui-icon-add";
+                                readonly size: "medium";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "notifications";
+                    readonly props: {
+                        readonly variant: "tertiary";
+                        readonly "aria-label": "Notifications";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "_Icon";
+                        readonly id: "notification_icon";
+                        readonly props: {
+                            readonly icon: "mui-icon-notification";
+                            readonly size: "medium";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "Responsive";
+            readonly id: "muitube_layout";
+            readonly props: {
+                readonly breakpoint: "768";
+            };
+            readonly children: readonly [{
+                readonly type: "Drawer";
+                readonly id: "sidebar_drawer";
+                readonly slot: "showAbove";
+                readonly props: {
+                    readonly width: "240px";
+                    readonly variant: "push";
+                    readonly open: true;
+                    readonly side: "left";
+                    readonly "drawer-space": "none";
+                };
+                readonly children: readonly [{
+                    readonly type: "VStack";
+                    readonly id: "sidebar_menu";
+                    readonly props: {
+                        readonly space: "var(--space-000)";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Button";
+                        readonly id: "menu_home";
+                        readonly props: {
+                            readonly text: "Home";
+                            readonly variant: "tertiary";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "menu_shorts";
+                        readonly props: {
+                            readonly text: "Shorts";
+                            readonly variant: "tertiary";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Button";
+                        readonly id: "menu_subscriptions";
+                        readonly props: {
+                            readonly text: "Subscriptions";
+                            readonly variant: "tertiary";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "VStack";
+                    readonly id: "muitube_page_desktop";
+                    readonly slot: "page";
+                    readonly props: {
+                        readonly space: "var(--space-000)";
+                        readonly alignX: "stretch";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "ChipRail";
+                        readonly id: "video_filters_desktop";
+                        readonly props: {
+                            readonly size: "medium";
+                            readonly "aria-label": "Video filters";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Chip";
+                            readonly id: "filter_all";
+                            readonly props: {
+                                readonly text: "All";
+                                readonly active: true;
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "filter_gaming";
+                            readonly props: {
+                                readonly text: "Gaming";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "filter_music";
+                            readonly props: {
+                                readonly text: "Music";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "filter_japan";
+                            readonly props: {
+                                readonly text: "Japan";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Grid";
+                        readonly id: "video_grid_desktop";
+                        readonly props: {
+                            readonly col: "repeat(auto-fit, minmax(268px, 1fr))";
+                            readonly space: "var(--space-600)";
+                            readonly alignX: "start";
+                            readonly alignY: "start";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Link";
+                            readonly id: "video_card_1";
+                            readonly props: {
+                                readonly href: "#";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "video_card_1_stack";
+                                readonly props: {
+                                    readonly alignX: "start";
+                                    readonly alignY: "start";
+                                    readonly space: "var(--space-300)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "VideoThumbnail";
+                                    readonly id: "video_card_1_thumbnail";
+                                    readonly props: {
+                                        readonly src: "/images/muitube/mui-video-light.png";
+                                        readonly "src-light": "/images/muitube/mui-video-light.png";
+                                        readonly "src-dark": "/images/muitube/mui-video-dark.png";
+                                        readonly "src-mui-light": "/images/muitube/mui-video-light.png";
+                                        readonly "src-mui-dark": "/images/muitube/mui-video-dark.png";
+                                        readonly alt: "Muibook video thumbnail";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_1_title";
+                                    readonly props: {
+                                        readonly text: "Designing with Muibook";
+                                        readonly size: "large";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_1_author";
+                                    readonly props: {
+                                        readonly text: "Michael Trilford";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_1_meta";
+                                    readonly props: {
+                                        readonly text: "12K views · 4 days ago";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }];
+                        }, {
+                            readonly type: "Link";
+                            readonly id: "video_card_2";
+                            readonly props: {
+                                readonly href: "#";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "video_card_2_stack";
+                                readonly props: {
+                                    readonly alignX: "start";
+                                    readonly alignY: "start";
+                                    readonly space: "var(--space-300)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "VideoThumbnail";
+                                    readonly id: "video_card_2_thumbnail";
+                                    readonly props: {
+                                        readonly src: "/images/muitube/sensei-video-light.png";
+                                        readonly "src-light": "/images/muitube/sensei-video-light.png";
+                                        readonly "src-dark": "/images/muitube/sensei-video-dark.png";
+                                        readonly alt: "Sensei video thumbnail";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_2_title";
+                                    readonly props: {
+                                        readonly text: "Building design system flows";
+                                        readonly size: "large";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_2_author";
+                                    readonly props: {
+                                        readonly text: "Sensei";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "video_card_2_meta";
+                                    readonly props: {
+                                        readonly text: "8.4K views · 1 week ago";
+                                        readonly size: "x-small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "VStack";
+                readonly id: "muitube_mobile";
+                readonly slot: "showBelow";
+                readonly props: {
+                    readonly alignX: "stretch";
+                    readonly space: "var(--space-000)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Drawer";
+                    readonly id: "sidebar_drawer_mobile";
+                    readonly props: {
+                        readonly variant: "overlay";
+                        readonly width: "260px";
+                        readonly side: "left";
+                        readonly "z-index": "200";
+                        readonly "drawer-space": "none";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "mobile_sidebar_menu";
+                        readonly props: {
+                            readonly space: "var(--space-000)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Button";
+                            readonly id: "mobile_menu_home";
+                            readonly props: {
+                                readonly text: "Home";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Button";
+                            readonly id: "mobile_menu_shorts";
+                            readonly props: {
+                                readonly text: "Shorts";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Button";
+                            readonly id: "mobile_menu_subscriptions";
+                            readonly props: {
+                                readonly text: "Subscriptions";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }, {
+                    readonly type: "VStack";
+                    readonly id: "muitube_page_mobile";
+                    readonly props: {
+                        readonly space: "var(--space-000)";
+                        readonly alignX: "stretch";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "ChipRail";
+                        readonly id: "video_filters_mobile";
+                        readonly props: {
+                            readonly size: "medium";
+                            readonly "aria-label": "Video filters";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Chip";
+                            readonly id: "mobile_filter_all";
+                            readonly props: {
+                                readonly text: "All";
+                                readonly active: true;
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "mobile_filter_music";
+                            readonly props: {
+                                readonly text: "Music";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Chip";
+                            readonly id: "mobile_filter_japan";
+                            readonly props: {
+                                readonly text: "Japan";
+                                readonly variant: "clickable";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }, {
+                        readonly type: "Grid";
+                        readonly id: "video_grid_mobile";
+                        readonly props: {
+                            readonly col: "repeat(auto-fit, minmax(268px, 1fr))";
+                            readonly space: "var(--space-600)";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Link";
+                            readonly id: "mobile_video_card";
+                            readonly props: {
+                                readonly href: "#";
+                                readonly variant: "tertiary";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VideoThumbnail";
+                                readonly id: "mobile_video_thumbnail";
+                                readonly props: {
+                                    readonly src: "/images/muitube/mui-video-light.png";
+                                    readonly "src-light": "/images/muitube/mui-video-light.png";
+                                    readonly "src-dark": "/images/muitube/mui-video-dark.png";
+                                    readonly alt: "Muibook video thumbnail";
+                                };
+                                readonly children: readonly [];
+                            }, {
+                                readonly type: "Body";
+                                readonly id: "mobile_video_title";
+                                readonly props: {
+                                    readonly text: "Designing with Muibook";
+                                    readonly size: "large";
+                                    readonly weight: "bold";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+    readonly songPage: {
+        readonly type: "Container";
+        readonly id: "song_container";
+        readonly props: {
+            readonly size: "large";
+            readonly center: true;
+        };
+        readonly children: readonly [{
+            readonly type: "HStack";
+            readonly id: "song_header";
+            readonly props: {
+                readonly alignX: "space-between";
+                readonly alignY: "center";
+                readonly style: "margin-block-end: var(--space-500);";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "logo";
+                readonly props: {
+                    readonly text: "SoundAmp";
+                    readonly size: "3";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Dropdown";
+                readonly id: "account_dropdown";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "AvatarChip";
+                    readonly id: "user_avatar";
+                    readonly props: {
+                        readonly primary: "Mike Trilford";
+                        readonly secondary: "Creator";
+                        readonly image: "https://muibook.com/images/mui/avatar-mike.jpg";
+                        readonly label: "Mike Trilford";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "song_content";
+            readonly props: {
+                readonly space: "var(--space-500)";
+                readonly alignX: "stretch";
+            };
+            readonly children: readonly [{
+                readonly type: "MediaPlayer";
+                readonly id: "song_player";
+                readonly props: {
+                    readonly type: "audio";
+                    readonly src: "https://muibook.com/audio/twilight.m4a";
+                    readonly artwork: "https://muibook.com/audio/artwork-light.png";
+                    readonly waveform: true;
+                    readonly height: "14rem";
+                };
+                readonly children: readonly [{
+                    readonly type: "AvatarChip";
+                    readonly id: "player_meta";
+                    readonly props: {
+                        readonly slot: "meta-before";
+                        readonly href: "#creator-profile";
+                        readonly image: "https://muibook.com/images/mui/avatar-mike.jpg";
+                        readonly label: "Mike Trilford";
+                    };
+                    readonly children: readonly [{
+                        readonly type: "Body";
+                        readonly id: "song_title";
+                        readonly slot: "primary";
+                        readonly props: {
+                            readonly text: "Twilight";
+                            readonly weight: "bold";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Link";
+                        readonly id: "song_creator";
+                        readonly slot: "secondary";
+                        readonly props: {
+                            readonly href: "#creator-profile";
+                            readonly text: "by Michael Trilford";
+                            readonly weight: "medium";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "player_buy";
+                    readonly slot: "meta-after";
+                    readonly props: {
+                        readonly text: "Buy now";
+                        readonly variant: "overlay";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }];
+    };
+    readonly videoMetadataAction: {
+        readonly type: "MediaPlayer";
+        readonly id: "video_metadata_action";
+        readonly props: {
+            readonly type: "video";
+            readonly src: "https://muibook.com/video/japan.mp4";
+            readonly poster: "https://muibook.com/video/japan-poster.jpg";
+        };
+        readonly children: readonly [{
+            readonly type: "AvatarChip";
+            readonly id: "video_creator";
+            readonly props: {
+                readonly slot: "meta-before";
+                readonly href: "#creator-profile";
+                readonly image: "https://muibook.com/images/mui/avatar-mike.jpg";
+                readonly label: "Mike Trilford";
+            };
+            readonly children: readonly [{
+                readonly type: "Body";
+                readonly id: "video_channel";
+                readonly slot: "primary";
+                readonly props: {
+                    readonly text: "Sugoi Travels";
+                    readonly weight: "bold";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Link";
+                readonly id: "video_subscribers";
+                readonly slot: "secondary";
+                readonly props: {
+                    readonly href: "#creator-profile";
+                    readonly text: "77k subscribers";
+                    readonly weight: "medium";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "Button";
+            readonly id: "video_subscribe";
+            readonly slot: "meta-after";
+            readonly props: {
+                readonly text: "Subscribe";
+                readonly variant: "overlay";
+            };
+            readonly children: readonly [];
+        }];
+    };
+    readonly customSelectWastePicker: {
+        readonly type: "Select";
+        readonly id: "waste_picker";
+        readonly props: {
+            readonly label: "Waste stream";
+            readonly appearance: "custom";
+            readonly "selected-content": "label";
+            readonly col: "1fr 1fr";
+            readonly space: "var(--space-100)";
+        };
+        readonly children: readonly [{
+            readonly type: "Option";
+            readonly id: "waste_recyclable";
+            readonly props: {
+                readonly value: "recyclable";
+                readonly label: "Recyclable";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_recyclable_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_recyclable_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-positive-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_recyclable_label";
+                    readonly props: {
+                        readonly text: "Recyclable";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Option";
+            readonly id: "waste_general";
+            readonly props: {
+                readonly value: "waste";
+                readonly label: "Waste";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_general_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_general_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-info-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_general_label";
+                    readonly props: {
+                        readonly text: "Waste";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Option";
+            readonly id: "waste_organic";
+            readonly props: {
+                readonly value: "organic";
+                readonly label: "Organic";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_organic_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_organic_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-warning-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_organic_label";
+                    readonly props: {
+                        readonly text: "Organic";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Option";
+            readonly id: "waste_burnable";
+            readonly props: {
+                readonly value: "burnable";
+                readonly label: "Burnable";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "waste_burnable_stack";
+                readonly props: {
+                    readonly space: "var(--space-100)";
+                    readonly alignX: "center";
+                };
+                readonly children: readonly [{
+                    readonly type: "_Illustration";
+                    readonly id: "waste_burnable_bin";
+                    readonly props: {
+                        readonly illustration: "mui-illustration-trash";
+                        readonly size: "medium";
+                        readonly color: "var(--feedback-attention-border-color)";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "waste_burnable_label";
+                    readonly props: {
+                        readonly text: "Burnable";
+                        readonly weight: "bold";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }];
+    };
+    readonly drawerWorkspace: {
+        readonly type: "Drawer";
+        readonly id: "workspace_drawer";
+        readonly props: {
+            readonly variant: "workspace";
+            readonly "resize-rail": true;
+            readonly "left-open": true;
+            readonly "right-open": true;
+            readonly "left-width": "24rem";
+            readonly "right-width": "30rem";
+            readonly "resize-min-left-width": "200";
+            readonly "resize-min-right-width": "200";
+            readonly "resize-min-page-width": "400";
+            readonly "resize-close-threshold": "96";
+            readonly breakpoint: "1400";
+            readonly height: "80dvh";
+        };
+        readonly children: readonly [{
+            readonly type: "VStack";
+            readonly id: "workspace_left_panel";
+            readonly slot: "left";
+            readonly props: {
+                readonly space: "var(--space-300)";
+                readonly padding: "var(--space-400)";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "workspace_left_heading";
+                readonly props: {
+                    readonly text: "Components";
+                    readonly size: "4";
+                    readonly level: "2";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Button";
+                readonly id: "workspace_media_card";
+                readonly props: {
+                    readonly text: "Media Card";
+                    readonly variant: "tertiary";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Button";
+                readonly id: "workspace_sidebar";
+                readonly props: {
+                    readonly text: "Sidebar";
+                    readonly variant: "tertiary";
+                };
+                readonly children: readonly [];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "workspace_canvas";
+            readonly slot: "page";
+            readonly props: {
+                readonly space: "var(--space-400)";
+                readonly padding: "var(--space-500)";
+                readonly alignX: "center";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "workspace_canvas_heading";
+                readonly props: {
+                    readonly text: "Canvas";
+                    readonly size: "3";
+                    readonly level: "1";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "Card";
+                readonly id: "workspace_selected_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "workspace_selected_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "workspace_selected_title";
+                        readonly props: {
+                            readonly text: "Customer Portal";
+                            readonly size: "4";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Body";
+                        readonly id: "workspace_selected_description";
+                        readonly props: {
+                            readonly text: "A selected page region sits between the component library and inspector panels.";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "VStack";
+            readonly id: "workspace_right_panel";
+            readonly slot: "right";
+            readonly props: {
+                readonly space: "var(--space-300)";
+                readonly padding: "var(--space-400)";
+            };
+            readonly children: readonly [{
+                readonly type: "Heading";
+                readonly id: "workspace_right_heading";
+                readonly props: {
+                    readonly text: "Inspector";
+                    readonly size: "4";
+                    readonly level: "2";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "AccordionBlock";
+                readonly id: "workspace_styles";
+                readonly props: {
+                    readonly heading: "Styles";
+                };
+                readonly children: readonly [];
+            }, {
+                readonly type: "AccordionBlock";
+                readonly id: "workspace_layout";
+                readonly props: {
+                    readonly heading: "Layout";
+                };
+                readonly children: readonly [];
+            }];
+        }];
+    };
+    readonly modelViewerProductPreview: {
+        readonly type: "ModelViewer";
+        readonly id: "model_viewer_product_preview";
+        readonly props: {
+            readonly src: "https://muibook.com/models/chair.glb";
+            readonly "ios-src": "https://muibook.com/models/chair.usdz";
+            readonly poster: "https://muibook.com/models/chair-poster.jpg";
+            readonly alt: "Three dimensional preview of a lounge chair.";
+            readonly controls: true;
+            readonly ar: true;
+        };
+        readonly children: readonly [{
+            readonly type: "Body";
+            readonly id: "model_viewer_fallback";
+            readonly props: {
+                readonly text: "Download the product model or view the gallery if 3D preview is unavailable.";
+                readonly size: "small";
+            };
+            readonly children: readonly [];
+        }];
+    };
+    readonly dashboard: {
+        readonly type: "VStack";
+        readonly id: "dashboard_root";
+        readonly props: {
+            readonly space: "var(--space-500)";
+            readonly alignX: "stretch";
+            readonly style: "max-width: 112rem; margin: 0 auto;";
+        };
+        readonly children: readonly [{
+            readonly type: "HStack";
+            readonly id: "dashboard_header";
+            readonly props: {
+                readonly alignX: "space-between";
+                readonly alignY: "center";
+            };
+            readonly children: readonly [{
+                readonly type: "VStack";
+                readonly id: "header_title_stack";
+                readonly props: {
+                    readonly space: "var(--space-000)";
+                };
+                readonly children: readonly [{
+                    readonly type: "Heading";
+                    readonly id: "title";
+                    readonly props: {
+                        readonly text: "Revenue operations";
+                        readonly size: "2";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Body";
+                    readonly id: "subtitle";
+                    readonly props: {
+                        readonly text: "Track activation health...";
+                        readonly size: "small";
+                    };
+                    readonly children: readonly [];
+                }];
+            }, {
+                readonly type: "ButtonGroup";
+                readonly id: "header_actions";
+                readonly props: {
+                    readonly align: "right";
+                };
+                readonly children: readonly [{
+                    readonly type: "Button";
+                    readonly id: "export_btn";
+                    readonly props: {
+                        readonly text: "Export report";
+                        readonly variant: "secondary";
+                    };
+                    readonly children: readonly [];
+                }, {
+                    readonly type: "Button";
+                    readonly id: "create_btn";
+                    readonly props: {
+                        readonly text: "Create task";
+                        readonly variant: "primary";
+                    };
+                    readonly children: readonly [];
+                }];
+            }];
+        }, {
+            readonly type: "Grid";
+            readonly id: "dashboard_metric_grid";
+            readonly props: {
+                readonly col: "repeat(4, minmax(0, 1fr))";
+                readonly space: "var(--space-300)";
+                readonly alignX: "stretch";
+            };
+            readonly children: readonly [{
+                readonly type: "Card";
+                readonly id: "metric_revenue_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_revenue_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_revenue_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_revenue_label";
+                            readonly props: {
+                                readonly text: "Monthly revenue";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_revenue_value";
+                            readonly props: {
+                                readonly text: "$128.4K";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_revenue_delta";
+                            readonly props: {
+                                readonly text: "+12.8%";
+                                readonly size: "small";
+                                readonly variant: "positive";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "metric_accounts_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_accounts_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_accounts_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_accounts_label";
+                            readonly props: {
+                                readonly text: "Active accounts";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_accounts_value";
+                            readonly props: {
+                                readonly text: "24,892";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_accounts_delta";
+                            readonly props: {
+                                readonly text: "+4.2%";
+                                readonly size: "small";
+                                readonly variant: "positive";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "metric_conversion_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_conversion_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_conversion_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_conversion_label";
+                            readonly props: {
+                                readonly text: "Trial conversion";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_conversion_value";
+                            readonly props: {
+                                readonly text: "8.6%";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_conversion_delta";
+                            readonly props: {
+                                readonly text: "-1.1%";
+                                readonly size: "small";
+                                readonly variant: "warning";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "metric_uptime_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "metric_uptime_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "metric_uptime_stack";
+                        readonly props: {
+                            readonly space: "var(--space-200)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "Body";
+                            readonly id: "metric_uptime_label";
+                            readonly props: {
+                                readonly text: "Platform uptime";
+                                readonly size: "small";
+                                readonly variant: "optional";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Heading";
+                            readonly id: "metric_uptime_value";
+                            readonly props: {
+                                readonly text: "99.98%";
+                                readonly size: "3";
+                                readonly level: "2";
+                            };
+                            readonly children: readonly [];
+                        }, {
+                            readonly type: "Badge";
+                            readonly id: "metric_uptime_delta";
+                            readonly props: {
+                                readonly text: "Stable";
+                                readonly size: "small";
+                                readonly variant: "neutral";
+                            };
+                            readonly children: readonly [];
+                        }];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "Grid";
+            readonly id: "dashboard_main_grid";
+            readonly props: {
+                readonly col: "minmax(0, 1.55fr) minmax(26rem, 1fr)";
+                readonly space: "var(--space-300)";
+                readonly alignX: "stretch";
+            };
+            readonly children: readonly [{
+                readonly type: "Card";
+                readonly id: "activation_health_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardHeader";
+                    readonly id: "activation_health_header";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "activation_health_title";
+                        readonly props: {
+                            readonly text: "Activation health";
+                            readonly size: "3";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }, {
+                        readonly type: "Body";
+                        readonly id: "activation_health_description";
+                        readonly props: {
+                            readonly text: "Performance across the last 30 days.";
+                            readonly size: "small";
+                            readonly variant: "optional";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "CardBody";
+                    readonly id: "activation_health_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "VStack";
+                        readonly id: "activation_health_stack";
+                        readonly props: {
+                            readonly space: "var(--space-400)";
+                            readonly alignX: "stretch";
+                        };
+                        readonly children: readonly [{
+                            readonly type: "VStack";
+                            readonly id: "feature_adoption";
+                            readonly props: {
+                                readonly space: "var(--space-100)";
+                                readonly alignX: "stretch";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "HStack";
+                                readonly id: "feature_adoption_header";
+                                readonly props: {
+                                    readonly alignX: "space-between";
+                                    readonly alignY: "center";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "feature_adoption_label";
+                                    readonly props: {
+                                        readonly text: "Feature adoption";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Badge";
+                                    readonly id: "feature_adoption_delta";
+                                    readonly props: {
+                                        readonly text: "+15%";
+                                        readonly size: "x-small";
+                                        readonly variant: "positive";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Progress";
+                                readonly id: "feature_adoption_progress";
+                                readonly props: {
+                                    readonly progress: "45";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "VStack";
+                            readonly id: "retention";
+                            readonly props: {
+                                readonly space: "var(--space-100)";
+                                readonly alignX: "stretch";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "HStack";
+                                readonly id: "retention_header";
+                                readonly props: {
+                                    readonly alignX: "space-between";
+                                    readonly alignY: "center";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "retention_label";
+                                    readonly props: {
+                                        readonly text: "30-day retention";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Badge";
+                                    readonly id: "retention_delta";
+                                    readonly props: {
+                                        readonly text: "+4%";
+                                        readonly size: "x-small";
+                                        readonly variant: "positive";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Progress";
+                                readonly id: "retention_progress";
+                                readonly props: {
+                                    readonly progress: "68";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "priority_tasks_card";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardHeader";
+                    readonly id: "priority_tasks_header";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "priority_tasks_title";
+                        readonly props: {
+                            readonly text: "Priority tasks";
+                            readonly size: "3";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "CardBody";
+                    readonly id: "priority_tasks_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "SlatGroup";
+                        readonly id: "priority_tasks";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Slat";
+                            readonly id: "billing_alerts_task";
+                            readonly props: {
+                                readonly variant: "action";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "billing_alerts_copy";
+                                readonly slot: "start";
+                                readonly props: {
+                                    readonly space: "var(--space-000)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "billing_alerts_title";
+                                    readonly props: {
+                                        readonly text: "Review billing alerts";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "billing_alerts_meta";
+                                    readonly props: {
+                                        readonly text: "Finance operations";
+                                        readonly size: "x-small";
+                                        readonly variant: "optional";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Badge";
+                                readonly id: "billing_alerts_badge";
+                                readonly slot: "end";
+                                readonly props: {
+                                    readonly text: "Urgent";
+                                    readonly size: "x-small";
+                                    readonly variant: "attention";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }, {
+                            readonly type: "Slat";
+                            readonly id: "campaign_task";
+                            readonly props: {
+                                readonly variant: "action";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "campaign_copy";
+                                readonly slot: "start";
+                                readonly props: {
+                                    readonly space: "var(--space-000)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "campaign_title";
+                                    readonly props: {
+                                        readonly text: "Approve campaign launch";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "campaign_meta";
+                                    readonly props: {
+                                        readonly text: "Growth team";
+                                        readonly size: "x-small";
+                                        readonly variant: "optional";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Badge";
+                                readonly id: "campaign_badge";
+                                readonly slot: "end";
+                                readonly props: {
+                                    readonly text: "Pending";
+                                    readonly size: "x-small";
+                                    readonly variant: "warning";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }, {
+            readonly type: "Responsive";
+            readonly id: "dashboard_activity";
+            readonly props: {
+                readonly breakpoint: "767";
+            };
+            readonly children: readonly [{
+                readonly type: "Card";
+                readonly id: "activity_table_card";
+                readonly slot: "showAbove";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardHeader";
+                    readonly id: "activity_table_header";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Heading";
+                        readonly id: "activity_table_title";
+                        readonly props: {
+                            readonly text: "Recent account activity";
+                            readonly size: "3";
+                            readonly level: "2";
+                        };
+                        readonly children: readonly [];
+                    }];
+                }, {
+                    readonly type: "CardBody";
+                    readonly id: "activity_table_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "Table";
+                        readonly id: "activity_table";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "RowGroup";
+                            readonly id: "activity_rows";
+                            readonly props: {};
+                            readonly children: readonly [{
+                                readonly type: "Row";
+                                readonly id: "activity_acme";
+                                readonly props: {
+                                    readonly columns: "1.5fr 1fr 1fr auto";
+                                    readonly size: "small";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_account";
+                                    readonly props: {};
+                                    readonly children: readonly [{
+                                        readonly type: "Body";
+                                        readonly id: "activity_acme_name";
+                                        readonly props: {
+                                            readonly text: "Acme Studios";
+                                            readonly size: "small";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }, {
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_event";
+                                    readonly props: {};
+                                    readonly children: readonly [{
+                                        readonly type: "Body";
+                                        readonly id: "activity_acme_event_text";
+                                        readonly props: {
+                                            readonly text: "Renewal";
+                                            readonly size: "small";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }, {
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_status";
+                                    readonly props: {};
+                                    readonly children: readonly [{
+                                        readonly type: "Badge";
+                                        readonly id: "activity_acme_paid";
+                                        readonly props: {
+                                            readonly text: "Paid";
+                                            readonly size: "small";
+                                            readonly variant: "positive";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }, {
+                                    readonly type: "Cell";
+                                    readonly id: "activity_acme_action";
+                                    readonly props: {
+                                        readonly action: true;
+                                    };
+                                    readonly children: readonly [{
+                                        readonly type: "Button";
+                                        readonly id: "activity_acme_view";
+                                        readonly props: {
+                                            readonly text: "View";
+                                            readonly size: "small";
+                                            readonly variant: "tertiary";
+                                        };
+                                        readonly children: readonly [];
+                                    }];
+                                }];
+                            }];
+                        }];
+                    }];
+                }];
+            }, {
+                readonly type: "Card";
+                readonly id: "activity_slat_card";
+                readonly slot: "showBelow";
+                readonly props: {};
+                readonly children: readonly [{
+                    readonly type: "CardBody";
+                    readonly id: "activity_slat_body";
+                    readonly props: {};
+                    readonly children: readonly [{
+                        readonly type: "SlatGroup";
+                        readonly id: "activity_mobile_slats";
+                        readonly props: {};
+                        readonly children: readonly [{
+                            readonly type: "Slat";
+                            readonly id: "activity_mobile_acme";
+                            readonly props: {
+                                readonly variant: "action";
+                            };
+                            readonly children: readonly [{
+                                readonly type: "VStack";
+                                readonly id: "activity_mobile_acme_copy";
+                                readonly slot: "start";
+                                readonly props: {
+                                    readonly space: "var(--space-000)";
+                                };
+                                readonly children: readonly [{
+                                    readonly type: "Body";
+                                    readonly id: "activity_mobile_acme_title";
+                                    readonly props: {
+                                        readonly text: "Acme Studios";
+                                        readonly size: "small";
+                                        readonly weight: "bold";
+                                    };
+                                    readonly children: readonly [];
+                                }, {
+                                    readonly type: "Body";
+                                    readonly id: "activity_mobile_acme_meta";
+                                    readonly props: {
+                                        readonly text: "Renewal payment";
+                                        readonly size: "x-small";
+                                        readonly variant: "optional";
+                                    };
+                                    readonly children: readonly [];
+                                }];
+                            }, {
+                                readonly type: "Badge";
+                                readonly id: "activity_mobile_acme_status";
+                                readonly slot: "end";
+                                readonly props: {
+                                    readonly text: "Paid";
+                                    readonly size: "x-small";
+                                    readonly variant: "positive";
+                                };
+                                readonly children: readonly [];
+                            }];
+                        }];
+                    }];
+                }];
+            }];
+        }];
+    };
+}, "signupFlow" | "rewardsCard" | "contactForm" | "analyticsSummary" | "onboarding" | "wallet" | "muitube" | "songPage" | "videoMetadataAction" | "customSelectWastePicker" | "drawerWorkspace" | "modelViewerProductPreview" | "dashboard">;