@muibook/components 19.6.0 → 20.1.0

package/dist/esm/knowledge/compositions/index.js

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