[{"data":1,"prerenderedAt":3790},["ShallowReactive",2],{"navigation_docs":3,"-guide-ux-patterns-pages":587,"-guide-ux-patterns-pages-surround":3785},[4,50,155,441,504],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":49},"Get Started","i-lucide-rocket","\u002Fget-started","1.get-started",[10,15,20,25,30,35,40,45],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fget-started\u002Fintroduction","1.get-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Project structure","\u002Fget-started\u002Fproject-structure","1.get-started\u002F3.project-structure","i-lucide-folder-tree",{"title":26,"path":27,"stem":28,"icon":29},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F4.configuration","i-lucide-settings",{"title":31,"path":32,"stem":33,"icon":34},"Authentication","\u002Fget-started\u002Fauthentication","1.get-started\u002F5.authentication","i-lucide-lock",{"title":36,"path":37,"stem":38,"icon":39},"Adding modules","\u002Fget-started\u002Fadding-modules","1.get-started\u002F6.adding-modules","i-lucide-puzzle",{"title":41,"path":42,"stem":43,"icon":44},"Database","\u002Fget-started\u002Fdatabase","1.get-started\u002F7.database","i-lucide-database",{"title":46,"path":47,"stem":48,"icon":6},"Deployment","\u002Fget-started\u002Fdeployment","1.get-started\u002F8.deployment",false,{"title":51,"icon":52,"path":53,"stem":54,"children":55,"page":49},"Guide","i-lucide-book-open","\u002Fguide","2.guide",[56,90,115,125],{"title":57,"icon":49,"path":58,"stem":59,"children":60,"page":49},"Concepts","\u002Fguide\u002Fconcepts","2.guide\u002F1.concepts",[61,66,71,76,80,85],{"title":62,"path":63,"stem":64,"icon":65},"Architecture","\u002Fguide\u002Fconcepts\u002Farchitecture","2.guide\u002F1.concepts\u002F1.architecture","i-lucide-blocks",{"title":67,"path":68,"stem":69,"icon":70},"Access control","\u002Fguide\u002Fconcepts\u002Fauth-and-scopes","2.guide\u002F1.concepts\u002F2.auth-and-scopes","i-lucide-shield-check",{"title":72,"path":73,"stem":74,"icon":75},"Extension points","\u002Fguide\u002Fconcepts\u002Fextension-points","2.guide\u002F1.concepts\u002F3.extension-points","i-lucide-plug",{"title":77,"path":78,"stem":79,"icon":44},"Database extensions","\u002Fguide\u002Fconcepts\u002Fdatabase-extensions","2.guide\u002F1.concepts\u002F4.database-extensions",{"title":81,"path":82,"stem":83,"icon":84},"Identity","\u002Fguide\u002Fconcepts\u002Fidentity","2.guide\u002F1.concepts\u002F5.identity","i-lucide-fingerprint",{"title":86,"path":87,"stem":88,"icon":89},"Glossary","\u002Fguide\u002Fconcepts\u002Fglossary","2.guide\u002F1.concepts\u002F6.glossary","i-lucide-book-a",{"title":91,"icon":49,"path":92,"stem":93,"children":94,"page":49},"UX patterns","\u002Fguide\u002Fux-patterns","2.guide\u002F2.ux-patterns",[95,100,105,110],{"title":96,"path":97,"stem":98,"icon":99},"Layouts and navigation","\u002Fguide\u002Fux-patterns\u002Flayouts-and-navigation","2.guide\u002F2.ux-patterns\u002F1.layouts-and-navigation","i-lucide-layout-template",{"title":101,"path":102,"stem":103,"icon":104},"Pages","\u002Fguide\u002Fux-patterns\u002Fpages","2.guide\u002F2.ux-patterns\u002F2.pages","i-lucide-table",{"title":106,"path":107,"stem":108,"icon":109},"Forms and actions","\u002Fguide\u002Fux-patterns\u002Fforms-and-actions","2.guide\u002F2.ux-patterns\u002F3.forms-and-actions","i-lucide-square-pen",{"title":111,"path":112,"stem":113,"icon":114},"Text and formatting","\u002Fguide\u002Fux-patterns\u002Ftext-and-formatting","2.guide\u002F2.ux-patterns\u002F4.text-and-formatting","i-lucide-type",{"title":116,"icon":49,"path":117,"stem":118,"children":119,"page":49},"Best practices","\u002Fguide\u002Fbest-practices","2.guide\u002F3.best-practices",[120],{"title":121,"path":122,"stem":123,"icon":124},"HTTP routes","\u002Fguide\u002Fbest-practices\u002Fhttp-routes","2.guide\u002F3.best-practices\u002F1.http-routes","i-lucide-route",{"title":126,"icon":49,"path":127,"stem":128,"children":129,"page":49},"Going further","\u002Fguide\u002Fgoing-further","2.guide\u002F4.going-further",[130,135,140,145,150],{"title":131,"path":132,"stem":133,"icon":134},"Use your own OAuth server","\u002Fguide\u002Fgoing-further\u002Fown-oauth-server","2.guide\u002F4.going-further\u002F1.own-oauth-server","i-lucide-key-round",{"title":136,"path":137,"stem":138,"icon":139},"Create an OAuth application","\u002Fguide\u002Fgoing-further\u002Foauth-application","2.guide\u002F4.going-further\u002F2.oauth-application","i-lucide-app-window",{"title":141,"path":142,"stem":143,"icon":144},"Signing keys","\u002Fguide\u002Fgoing-further\u002Fsigning-keys","2.guide\u002F4.going-further\u002F3.signing-keys","i-lucide-key-square",{"title":146,"path":147,"stem":148,"icon":149},"Stripe setup","\u002Fguide\u002Fgoing-further\u002Fstripe-setup","2.guide\u002F4.going-further\u002F4.stripe-setup","i-lucide-credit-card",{"title":151,"path":152,"stem":153,"icon":154},"Migrate to the permission model","\u002Fguide\u002Fgoing-further\u002Fmigrate-access-control","2.guide\u002F4.going-further\u002F5.migrate-access-control","i-lucide-arrow-right-left",{"title":156,"icon":157,"path":158,"stem":159,"children":160},"Modules","i-lucide-boxes","\u002Fmodules","3.modules",[161,163,244,273,320,375],{"title":156,"path":158,"stem":162},"3.modules\u002Findex",{"title":81,"icon":49,"path":164,"stem":165,"children":166,"page":49},"\u002Fmodules\u002Fidentity","3.modules\u002F1.identity",[167,190,194,198,220,224,240],{"title":168,"path":169,"stem":170,"children":171},"Auth","\u002Fmodules\u002Fidentity\u002Fauth","3.modules\u002F1.identity\u002F1.auth\u002Findex",[172,174,178,182,186],{"title":173,"path":169,"stem":170},"Overview",{"title":175,"path":176,"stem":177},"Server API","\u002Fmodules\u002Fidentity\u002Fauth\u002Fserver","3.modules\u002F1.identity\u002F1.auth\u002F2.server",{"title":179,"path":180,"stem":181},"Reference","\u002Fmodules\u002Fidentity\u002Fauth\u002Freference","3.modules\u002F1.identity\u002F1.auth\u002F3.reference",{"title":183,"path":184,"stem":185},"Client mode","\u002Fmodules\u002Fidentity\u002Fauth\u002Fclient-mode","3.modules\u002F1.identity\u002F1.auth\u002F4.client-mode",{"title":187,"path":188,"stem":189},"OAuth providers","\u002Fmodules\u002Fidentity\u002Fauth\u002Foauth-providers","3.modules\u002F1.identity\u002F1.auth\u002F5.oauth-providers",{"title":191,"path":192,"stem":193},"Users","\u002Fmodules\u002Fidentity\u002Fusers","3.modules\u002F1.identity\u002F2.users",{"title":195,"path":196,"stem":197},"Account","\u002Fmodules\u002Fidentity\u002Faccount","3.modules\u002F1.identity\u002F3.account",{"title":199,"path":200,"stem":201,"children":202},"Authorization","\u002Fmodules\u002Fidentity\u002Fauthorization","3.modules\u002F1.identity\u002F4.authorization\u002Findex",[203,204,208,212,216],{"title":173,"path":200,"stem":201},{"title":205,"path":206,"stem":207},"Roles and requirements","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Froles-and-requirements","3.modules\u002F1.identity\u002F4.authorization\u002F2.roles-and-requirements",{"title":209,"path":210,"stem":211},"Policies","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Fpolicies","3.modules\u002F1.identity\u002F4.authorization\u002F3.policies",{"title":213,"path":214,"stem":215},"Client","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Fclient","3.modules\u002F1.identity\u002F4.authorization\u002F4.client",{"title":217,"path":218,"stem":219},"Admin","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Fadmin","3.modules\u002F1.identity\u002F4.authorization\u002F5.admin",{"title":221,"path":222,"stem":223},"Preferences","\u002Fmodules\u002Fidentity\u002Fpreferences","3.modules\u002F1.identity\u002F5.preferences",{"title":225,"path":226,"stem":227,"children":228},"OAuth Server","\u002Fmodules\u002Fidentity\u002Foauth-server","3.modules\u002F1.identity\u002F6.oauth-server\u002Findex",[229,230,233,237],{"title":173,"path":226,"stem":227},{"title":175,"path":231,"stem":232},"\u002Fmodules\u002Fidentity\u002Foauth-server\u002Fserver","3.modules\u002F1.identity\u002F6.oauth-server\u002F2.server",{"title":234,"path":235,"stem":236},"Hooks","\u002Fmodules\u002Fidentity\u002Foauth-server\u002Fhooks","3.modules\u002F1.identity\u002F6.oauth-server\u002F3.hooks",{"title":179,"path":238,"stem":239},"\u002Fmodules\u002Fidentity\u002Foauth-server\u002Froutes-and-clients","3.modules\u002F1.identity\u002F6.oauth-server\u002F4.routes-and-clients",{"title":241,"path":242,"stem":243},"OAuth Resource","\u002Fmodules\u002Fidentity\u002Foauth-resource","3.modules\u002F1.identity\u002F8.oauth-resource",{"title":245,"icon":49,"path":246,"stem":247,"children":248,"page":49},"Commerce","\u002Fmodules\u002Fcommerce","3.modules\u002F2.commerce",[249,253,257],{"title":250,"path":251,"stem":252},"Stripe","\u002Fmodules\u002Fcommerce\u002Fstripe","3.modules\u002F2.commerce\u002F1.stripe",{"title":254,"path":255,"stem":256},"Payments","\u002Fmodules\u002Fcommerce\u002Fpayments","3.modules\u002F2.commerce\u002F2.payments",{"title":258,"path":259,"stem":260,"children":261},"Subscriptions","\u002Fmodules\u002Fcommerce\u002Fsubscriptions","3.modules\u002F2.commerce\u002F3.subscriptions\u002Findex",[262,263,266,270],{"title":173,"path":259,"stem":260},{"title":175,"path":264,"stem":265},"\u002Fmodules\u002Fcommerce\u002Fsubscriptions\u002Fserver","3.modules\u002F2.commerce\u002F3.subscriptions\u002F2.server",{"title":267,"path":268,"stem":269},"App","\u002Fmodules\u002Fcommerce\u002Fsubscriptions\u002Fapp","3.modules\u002F2.commerce\u002F3.subscriptions\u002F3.app",{"title":179,"path":271,"stem":272},"\u002Fmodules\u002Fcommerce\u002Fsubscriptions\u002Freference","3.modules\u002F2.commerce\u002F3.subscriptions\u002F4.reference",{"title":274,"icon":49,"path":275,"stem":276,"children":277,"page":49},"Features","\u002Fmodules\u002Ffeatures","3.modules\u002F3.features",[278,293,312,316],{"title":279,"path":280,"stem":281,"children":282},"Events","\u002Fmodules\u002Ffeatures\u002Fevents","3.modules\u002F3.features\u002F1.events\u002Findex",[283,284,287,290],{"title":173,"path":280,"stem":281},{"title":175,"path":285,"stem":286},"\u002Fmodules\u002Ffeatures\u002Fevents\u002Fserver","3.modules\u002F3.features\u002F1.events\u002F2.server",{"title":267,"path":288,"stem":289},"\u002Fmodules\u002Ffeatures\u002Fevents\u002Fapp","3.modules\u002F3.features\u002F1.events\u002F3.app",{"title":179,"path":291,"stem":292},"\u002Fmodules\u002Ffeatures\u002Fevents\u002Freference","3.modules\u002F3.features\u002F1.events\u002F4.reference",{"title":294,"path":295,"stem":296,"children":297},"Forms","\u002Fmodules\u002Ffeatures\u002Fforms","3.modules\u002F3.features\u002F2.forms\u002Findex",[298,299,303,306,309],{"title":173,"path":295,"stem":296},{"title":300,"path":301,"stem":302},"Definition","\u002Fmodules\u002Ffeatures\u002Fforms\u002Fdefinition","3.modules\u002F3.features\u002F2.forms\u002F2.definition",{"title":175,"path":304,"stem":305},"\u002Fmodules\u002Ffeatures\u002Fforms\u002Fserver","3.modules\u002F3.features\u002F2.forms\u002F3.server",{"title":267,"path":307,"stem":308},"\u002Fmodules\u002Ffeatures\u002Fforms\u002Fapp","3.modules\u002F3.features\u002F2.forms\u002F4.app",{"title":179,"path":310,"stem":311},"\u002Fmodules\u002Ffeatures\u002Fforms\u002Freference","3.modules\u002F3.features\u002F2.forms\u002F5.reference",{"title":313,"path":314,"stem":315},"Cookie Consent","\u002Fmodules\u002Ffeatures\u002Fcookie-consent","3.modules\u002F3.features\u002F3.cookie-consent",{"title":317,"path":318,"stem":319},"MCP","\u002Fmodules\u002Ffeatures\u002Fmcp","3.modules\u002F3.features\u002F4.mcp",{"title":321,"icon":49,"path":322,"stem":323,"children":324,"page":49},"Interface","\u002Fmodules\u002Finterface","3.modules\u002F4.interface",[325,350,353,357,361],{"title":326,"path":327,"stem":328,"children":329},"UI","\u002Fmodules\u002Finterface\u002Fui","3.modules\u002F4.interface\u002F1.ui\u002Findex",[330,331,335,339,343,347],{"title":173,"path":327,"stem":328},{"title":332,"path":333,"stem":334},"Page components","\u002Fmodules\u002Finterface\u002Fui\u002Fpage-components","3.modules\u002F4.interface\u002F1.ui\u002F2.page-components",{"title":336,"path":337,"stem":338},"App shell","\u002Fmodules\u002Finterface\u002Fui\u002Fapp-shell","3.modules\u002F4.interface\u002F1.ui\u002F3.app-shell",{"title":340,"path":341,"stem":342},"Form inputs","\u002Fmodules\u002Finterface\u002Fui\u002Fform-inputs","3.modules\u002F4.interface\u002F1.ui\u002F4.form-inputs",{"title":344,"path":345,"stem":346},"Composables and helpers","\u002Fmodules\u002Finterface\u002Fui\u002Fcomposables","3.modules\u002F4.interface\u002F1.ui\u002F5.composables",{"title":179,"path":348,"stem":349},"\u002Fmodules\u002Finterface\u002Fui\u002Freference","3.modules\u002F4.interface\u002F1.ui\u002F6.reference",{"title":217,"path":351,"stem":352},"\u002Fmodules\u002Finterface\u002Fadmin","3.modules\u002F4.interface\u002F2.admin",{"title":354,"path":355,"stem":356},"Menu","\u002Fmodules\u002Finterface\u002Fmenu","3.modules\u002F4.interface\u002F3.menu",{"title":358,"path":359,"stem":360},"Widget","\u002Fmodules\u002Finterface\u002Fwidget","3.modules\u002F4.interface\u002F4.widget",{"title":362,"path":363,"stem":364,"children":365},"Mobile","\u002Fmodules\u002Finterface\u002Fmobile","3.modules\u002F4.interface\u002F5.mobile\u002Findex",[366,367,371],{"title":173,"path":363,"stem":364},{"title":368,"path":369,"stem":370},"CLI and devices","\u002Fmodules\u002Finterface\u002Fmobile\u002Fcli-and-devices","3.modules\u002F4.interface\u002F5.mobile\u002F2.cli-and-devices",{"title":372,"path":373,"stem":374},"Splash screen","\u002Fmodules\u002Finterface\u002Fmobile\u002Fsplash-screen","3.modules\u002F4.interface\u002F5.mobile\u002F3.splash-screen",{"title":376,"icon":49,"path":377,"stem":378,"children":379,"page":49},"Platform","\u002Fmodules\u002Fplatform","3.modules\u002F5.platform",[380,402,406,423],{"title":381,"path":382,"stem":383,"children":384},"Module Kit","\u002Fmodules\u002Fplatform\u002Fmodule-kit","3.modules\u002F5.platform\u002F1.module-kit\u002Findex",[385,386,390,394,398],{"title":173,"path":382,"stem":383},{"title":387,"path":388,"stem":389},"Server toolkit","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fserver-toolkit","3.modules\u002F5.platform\u002F1.module-kit\u002F2.server-toolkit",{"title":391,"path":392,"stem":393},"Registries and menus","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fregistries-and-menus","3.modules\u002F5.platform\u002F1.module-kit\u002F3.registries-and-menus",{"title":395,"path":396,"stem":397},"Translations","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fi18n","3.modules\u002F5.platform\u002F1.module-kit\u002F4.i18n",{"title":399,"path":400,"stem":401},"Database helpers","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fdatabase","3.modules\u002F5.platform\u002F1.module-kit\u002F5.database",{"title":403,"path":404,"stem":405},"Notify","\u002Fmodules\u002Fplatform\u002Fnotify","3.modules\u002F5.platform\u002F2.notify",{"title":407,"path":408,"stem":409,"children":410},"Email Templates","\u002Fmodules\u002Fplatform\u002Femail-templates","3.modules\u002F5.platform\u002F3.email-templates\u002Findex",[411,412,416,419],{"title":173,"path":408,"stem":409},{"title":413,"path":414,"stem":415},"Email components","\u002Fmodules\u002Fplatform\u002Femail-templates\u002Fcomponents","3.modules\u002F5.platform\u002F3.email-templates\u002F2.components",{"title":175,"path":417,"stem":418},"\u002Fmodules\u002Fplatform\u002Femail-templates\u002Fserver","3.modules\u002F5.platform\u002F3.email-templates\u002F3.server",{"title":420,"path":421,"stem":422},"Module emails","\u002Fmodules\u002Fplatform\u002Femail-templates\u002Fmodule-emails","3.modules\u002F5.platform\u002F3.email-templates\u002F4.module-emails",{"title":424,"path":425,"stem":426,"children":427},"Base Layer","\u002Fmodules\u002Fplatform\u002Fbase-layer","3.modules\u002F5.platform\u002F4.base-layer\u002Findex",[428,429,433,437],{"title":173,"path":425,"stem":426},{"title":430,"path":431,"stem":432},"Content collections","\u002Fmodules\u002Fplatform\u002Fbase-layer\u002Fcontent-collections","3.modules\u002F5.platform\u002F4.base-layer\u002F2.content-collections",{"title":434,"path":435,"stem":436},"Layouts and routing","\u002Fmodules\u002Fplatform\u002Fbase-layer\u002Flayouts-and-routing","3.modules\u002F5.platform\u002F4.base-layer\u002F3.layouts-and-routing",{"title":438,"path":439,"stem":440},"Composables and utils","\u002Fmodules\u002Fplatform\u002Fbase-layer\u002Fcomposables-and-utils","3.modules\u002F5.platform\u002F4.base-layer\u002F4.composables-and-utils",{"title":442,"icon":443,"path":444,"stem":445,"children":446,"page":49},"Examples","i-lucide-code-xml","\u002Fexamples","4.examples",[447,466,476],{"title":448,"icon":49,"path":449,"stem":450,"children":451,"page":49},"Starters","\u002Fexamples\u002Fstarters","4.examples\u002F1.starters",[452,456,461],{"title":453,"path":454,"stem":455,"icon":6},"Workspace starter","\u002Fexamples\u002Fstarters\u002Fworkspace","4.examples\u002F1.starters\u002F1.workspace",{"title":457,"path":458,"stem":459,"icon":460},"Mobile starter","\u002Fexamples\u002Fstarters\u002Fmobile","4.examples\u002F1.starters\u002F2.mobile","i-lucide-smartphone",{"title":462,"path":463,"stem":464,"icon":465},"Standalone mobile starter","\u002Fexamples\u002Fstarters\u002Fmobile-standalone","4.examples\u002F1.starters\u002F3.mobile-standalone","i-lucide-tablet-smartphone",{"title":467,"icon":49,"path":468,"stem":469,"children":470,"page":49},"Apps","\u002Fexamples\u002Fapps","4.examples\u002F2.apps",[471],{"title":472,"path":473,"stem":474,"icon":475},"Frigear website app","\u002Fexamples\u002Fapps\u002Ffrigear-nu-website","4.examples\u002F2.apps\u002F1.frigear-nu-website","i-lucide-layout-dashboard",{"title":477,"icon":49,"path":478,"stem":479,"children":480,"page":49},"Tasks","\u002Fexamples\u002Ftasks","4.examples\u002F3.tasks",[481,485,489,494,499],{"title":482,"path":483,"stem":484,"icon":70},"Protect a route","\u002Fexamples\u002Ftasks\u002Fprotect-a-route","4.examples\u002F3.tasks\u002F1.protect-a-route",{"title":486,"path":487,"stem":488,"icon":475},"Add an admin page","\u002Fexamples\u002Ftasks\u002Fadd-an-admin-page","4.examples\u002F3.tasks\u002F2.add-an-admin-page",{"title":490,"path":491,"stem":492,"icon":493},"Sell event tickets","\u002Fexamples\u002Ftasks\u002Fsell-event-tickets","4.examples\u002F3.tasks\u002F3.sell-event-tickets","i-lucide-ticket",{"title":495,"path":496,"stem":497,"icon":498},"Build a form","\u002Fexamples\u002Ftasks\u002Fbuild-a-form","4.examples\u002F3.tasks\u002F4.build-a-form","i-lucide-clipboard-list",{"title":500,"path":501,"stem":502,"icon":503},"Send an email","\u002Fexamples\u002Ftasks\u002Fsend-an-email","4.examples\u002F3.tasks\u002F5.send-an-email","i-lucide-mail",{"title":505,"icon":506,"path":507,"stem":508,"children":509,"page":49},"Contribute","i-lucide-git-pull-request","\u002Fcontribute","5.contribute",[510,513,518,544,549,552,556,571],{"title":173,"path":511,"stem":512,"icon":506},"\u002Fcontribute\u002Foverview","5.contribute\u002F1.overview",{"title":514,"path":515,"stem":516,"icon":517},"Local development","\u002Fcontribute\u002Flocal-development","5.contribute\u002F2.local-development","i-lucide-terminal",{"title":519,"icon":49,"path":520,"stem":521,"children":522,"page":49},"Writing a module","\u002Fcontribute\u002Fwriting-a-module","5.contribute\u002F3.writing-a-module",[523,527,532,536,541],{"title":524,"path":525,"stem":526,"icon":39},"Scaffold a module","\u002Fcontribute\u002Fwriting-a-module\u002Fscaffold","5.contribute\u002F3.writing-a-module\u002F1.scaffold",{"title":528,"path":529,"stem":530,"icon":531},"Setup checklist","\u002Fcontribute\u002Fwriting-a-module\u002Fsetup-checklist","5.contribute\u002F3.writing-a-module\u002F2.setup-checklist","i-lucide-list-checks",{"title":533,"path":534,"stem":535,"icon":44},"Database tables","\u002Fcontribute\u002Fwriting-a-module\u002Fdatabase-tables","5.contribute\u002F3.writing-a-module\u002F3.database-tables",{"title":537,"path":538,"stem":539,"icon":540},"Testing","\u002Fcontribute\u002Fwriting-a-module\u002Ftesting","5.contribute\u002F3.writing-a-module\u002F4.testing","i-lucide-flask-conical",{"title":67,"path":542,"stem":543,"icon":70},"\u002Fcontribute\u002Fwriting-a-module\u002Faccess-control","5.contribute\u002F3.writing-a-module\u002F5.access-control",{"title":545,"path":546,"stem":547,"icon":548},"Publishing","\u002Fcontribute\u002Fpublishing","5.contribute\u002F4.publishing","i-lucide-package-check",{"title":448,"path":550,"stem":551,"icon":6},"\u002Fcontribute\u002Fstarters","5.contribute\u002F5.starters",{"title":553,"path":554,"stem":555,"icon":52},"Documentation","\u002Fcontribute\u002Fdocumentation","5.contribute\u002F6.documentation",{"title":557,"icon":49,"path":558,"stem":559,"children":560,"page":49},"Tooling","\u002Fcontribute\u002Ftooling","5.contribute\u002F7.tooling",[561,566],{"title":562,"path":563,"stem":564,"icon":565},"CLI","\u002Fcontribute\u002Ftooling\u002Fcli","5.contribute\u002F7.tooling\u002F1.cli","i-lucide-square-terminal",{"title":567,"path":568,"stem":569,"icon":570},"ESLint config","\u002Fcontribute\u002Ftooling\u002Feslint-config","5.contribute\u002F7.tooling\u002F2.eslint-config","i-lucide-spell-check",{"title":572,"icon":49,"path":573,"stem":574,"children":575},"Decisions","\u002Fcontribute\u002Fdecisions","5.contribute\u002F8.decisions\u002Findex",[576,578,583],{"title":572,"path":573,"stem":574,"icon":577},"i-lucide-scale",{"title":579,"path":580,"stem":581,"icon":582},"Session lifetimes per OAuth client","\u002Fcontribute\u002Fdecisions\u002Foauth-token-lifetimes","5.contribute\u002F8.decisions\u002F1.oauth-token-lifetimes","i-lucide-timer",{"title":584,"path":585,"stem":586,"icon":70},"One permission model","\u002Fcontribute\u002Fdecisions\u002Fpermission-model","5.contribute\u002F8.decisions\u002F2.permission-model",{"id":588,"title":101,"body":589,"description":3778,"extension":3779,"links":3780,"meta":3781,"navigation":3782,"path":102,"seo":3783,"stem":103,"__hash__":3784},"docs\u002F2.guide\u002F2.ux-patterns\u002F2.pages.md",{"type":590,"value":591,"toc":3764},"minimark",[592,601,610,619,624,717,725,728,731,815,822,825,831,834,870,894,897,967,2658,2685,2705,2708,2711,2796,2802,2824,2867,2870,2973,2976,2979,3024,3035,3038,3045,3048,3051,3084,3175,3179,3191,3194,3197,3216,3223,3226,3229,3235,3252,3255,3261,3336,3635,3646,3648,3651,3714,3730,3739,3743,3760],[593,594,595,596,600],"p",{},"A ",[597,598,599],"a",{"href":87},"staff"," member who has learned one list in the admin area should already know every other\nlist. So pages in the admin and account areas are built from a few shapes. This page tells you which shape your page\nis, which shared components build it, and what it shows while it loads, when it is empty and when a request fails.",[602,603,605,609],"callout",{"icon":604},"i-lucide-users",[606,607,608],"strong",{},"For:"," module authors and app developers who add a page to the admin or account area.",[593,611,612,613,615,616,618],{},"The components come from ",[597,614,326],{"href":327},". Which area a page belongs in is on\n",[597,617,96],{"href":97},".",[620,621,623],"h2",{"id":622},"which-shape-do-i-use","Which shape do I use?",[625,626,627,643],"table",{},[628,629,630],"thead",{},[631,632,633,637,640],"tr",{},[634,635,636],"th",{},"Your page shows",[634,638,639],{},"Shape",[634,641,642],{},"Section",[644,645,646,661,675,689,703],"tbody",{},[631,647,648,652,655],{},[649,650,651],"td",{},"Many records of one kind, such as users or events",[649,653,654],{},"A list page, with a detail page per record",[649,656,657],{},[597,658,660],{"href":659},"#lists","Lists",[631,662,663,666,669],{},[649,664,665],{},"One record with several sections",[649,667,668],{},"A detail page",[649,670,671],{},[597,672,674],{"href":673},"#detail-pages","Detail pages",[631,676,677,680,683],{},[649,678,679],{},"A record with little of its own, such as a unit",[649,681,682],{},"A slideover over the list",[649,684,685],{},[597,686,688],{"href":687},"#light-entities","Light entities",[631,690,691,694,697],{},[649,692,693],{},"A few records that are not worth a table, such as passkeys",[649,695,696],{},"A divided list in a card",[649,698,699],{},[597,700,702],{"href":701},"#divided-list","Divided list",[631,704,705,708,711],{},[649,706,707],{},"Numbers and what needs a decision",[649,709,710],{},"An overview",[649,712,713],{},[597,714,716],{"href":715},"#overview-pages","Overview pages",[593,718,719,720,724],{},"Every page has the same root: a plain ",[721,722,723],"code",{},"\u003Cdiv class=\"flex flex-col gap-4\">",". There is no page wrapper component.",[620,726,660],{"id":727},"lists",[593,729,730],{},"A top-level entity gets a list page and a detail page. The list page has, from top to bottom:",[732,733,734,749,758,776,789,802],"ul",{},[735,736,737,740,741,744,745,748],"li",{},[606,738,739],{},"A heading"," (",[721,742,743],{},"PageHeading",") with the entity's name. The primary action, such as \"Add user\" or \"New event\", goes\nin its ",[721,746,747],{},"#actions"," slot.",[735,750,751,740,754,757],{},[606,752,753],{},"A toolbar",[721,755,756],{},"PageToolbar",") with search and filters, once the list is longer than about eight rows. Leave it out\nfor short lists.",[735,759,760,763,764,767,768,771,772,775],{},[606,761,762],{},"A table in a card."," A ",[721,765,766],{},"UTable"," sits inside ",[721,769,770],{},"TableCard",", styled with ",[721,773,774],{},"tableUi()",": small muted headers, compact rows\non desktop and taller rows on mobile. Rows are clickable and open the detail page.",[735,777,778,740,781,784,785,618],{},[606,779,780],{},"A row menu",[721,782,783],{},"RowMenu",") in the last column, for the row's actions. See\n",[597,786,788],{"href":787},"\u002Fguide\u002Fux-patterns\u002Fforms-and-actions#row-actions","Row actions",[735,790,791,740,794,797,798,801],{},[606,792,793],{},"Pagination",[721,795,796],{},"TablePagination",") in the card's ",[721,799,800],{},"#footer",": \"21–40 of 132\", rows per page and pages.",[735,803,804,740,807,810,811,618],{},[606,805,806],{},"An empty state",[721,808,809],{},"UEmpty",") when there are no rows, never an empty table. See ",[597,812,814],{"href":813},"#empty-states","Empty states",[593,816,817],{},[818,819],"img",{"alt":820,"src":821},"An admin events list: a heading with a description and a New event button, a search field and a status filter, and a table in a card with status badges and a row menu column.","\u002Fimages\u002Fux-patterns\u002Fpages-list.png",[593,823,824],{},"The row menu opens with Open first and the destructive action last, in its own red group:",[593,826,827],{},[818,828],{"alt":829,"src":830},"The events list with a row menu open: Open, View public page, Duplicate, and a red Delete event item in its own group.","\u002Fimages\u002Fux-patterns\u002Fpages-row-menu.png",[593,832,833],{},"Tables share these behaviours:",[732,835,836,850,860],{},[735,837,838,841,842,845,846,849],{},[606,839,840],{},"Sticky header."," Long lists add ",[721,843,844],{},"sticky"," and ",[721,847,848],{},"tableUi({}, { sticky: true })",". The header then stays in view while\nthe table scrolls inside its card.",[735,851,852,855,856,859],{},[606,853,854],{},"Sorting."," A sortable column uses ",[721,857,858],{},"useTableSort().header(id, label)",": a ghost button that cycles ascending,\ndescending and unsorted.",[735,861,862,865,866,869],{},[606,863,864],{},"State in the URL."," A server-paginated list keeps page, page size, search, sort and filters in the URL with\n",[721,867,868],{},"useTableQuery",". So a filtered list can be linked, and it survives a reload.",[871,872,873,874,877,878,881,882,885,886,889,890,618],"warning",{},"Loading never blanks a list that is already on screen. ",[721,875,876],{},"TableCard :loading"," shows skeleton rows on the first load\nonly. Every later load, such as the next page, a new sort or a search, passes ",[721,879,880],{},":refreshing",". That keeps the current\nrows and dims them until the new ones arrive. The empty state shows only after a load succeeded with no rows, never\nwhile ",[721,883,884],{},"status"," is ",[721,887,888],{},"'pending'",". See ",[597,891,893],{"href":892},"#loading","Loading",[593,895,896],{},"Cells follow the same rules everywhere:",[732,898,899,912,922,936,946],{},[735,900,901,904,905,908,909,748],{},[606,902,903],{},"First column."," It is the record's identity (",[721,906,907],{},"TableIdentity","): the name, a muted second line such as an email or a\nslug, and an optional avatar or icon. Badges that belong to the name go in its ",[721,910,911],{},"#badges",[735,913,914,917,918,921],{},[606,915,916],{},"Numbers."," They are right-aligned with tabular figures (",[721,919,920],{},"meta: numericColumn",").",[735,923,924,927,928,931,932,935],{},[606,925,926],{},"Dates."," They use ",[721,929,930],{},"useFormat()"," in a ",[721,933,934],{},"tabular-nums"," span.",[735,937,938,941,942,945],{},[606,939,940],{},"Missing values."," A missing value is a dimmed dash (",[721,943,944],{},"emptyCell()","), never an empty cell.",[735,947,948,951,952,955,956,959,960,963,964,618],{},[606,949,950],{},"Status."," A status is a subtle badge whose colour follows the status. The component is ",[721,953,954],{},"StatusBadge",", and it\npicks the colour with ",[721,957,958],{},"statusColor",". To change the colour of one status, pass ",[721,961,962],{},"colors",", for example\n",[721,965,966],{},":colors=\"{ archived: 'warning' }\"",[968,969,974],"pre",{"className":970,"code":971,"language":972,"meta":973,"style":973},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { TableColumn } from '@nuxt\u002Fui'\n\nconst t = useModuleT('events')\nconst format = useFormat()\nconst actions = useEventActions()\n\nconst { page, pageSize, search, sort: sortState, query } = useTableQuery({ sort: { id: 'startsAt', desc: true } })\nconst { header } = useTableSort(null, sortState)\nconst { data, status } = await useFetch('\u002Fapi\u002Fadmin\u002Fevents', { query, default: () => ({ items: [], total: 0 }) })\nconst pending = computed(() => status.value === 'pending')\n\nconst TableIdentity = resolveComponent('TableIdentity')\nconst RowMenu = resolveComponent('RowMenu')\nconst columns: TableColumn\u003CEventRow>[] = [\n  {\n    accessorKey: 'title',\n    header: header('title', t('admin.title', 'Title')),\n    cell: ({ row }) => h(TableIdentity, { title: row.original.title, description: row.original.location }),\n  },\n  { accessorKey: 'startsAt', header: header('startsAt', t('admin.starts', 'Starts')) },\n  { accessorKey: 'capacity', header: t('admin.capacity', 'Capacity'), meta: numericColumn },\n  { id: 'actions', cell: ({ row }) => h(RowMenu, { items: actions.menu(row.original), subject: row.original.title }) },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"flex flex-col gap-4\">\n    \u003CPageHeading :title=\"t('admin.events', 'Events')\">\n      \u003Ctemplate #actions>\n        \u003CUButton icon=\"i-lucide-plus\" :label=\"t('admin.create', 'New event')\" @click=\"actions.create()\" \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FPageHeading>\n\n    \u003CPageToolbar>\n      \u003CUInput v-model=\"search\" icon=\"i-lucide-search\" :placeholder=\"t('admin.search', 'Search events')\" \u002F>\n    \u003C\u002FPageToolbar>\n\n    \u003CTableCard :loading=\"pending && !data.items.length\" :refreshing=\"pending && !!data.items.length\">\n      \u003CUTable\n        :data=\"data.items\"\n        :columns=\"columns\"\n        :ui=\"tableUi({}, { sticky: true })\"\n        sticky\n        @select=\"(_, row) => navigateTo(`\u002Fadmin\u002Fevents\u002F${row.original.id}`)\"\n      >\n        \u003Ctemplate #startsAt-cell=\"{ row }\">\n          \u003Cspan class=\"tabular-nums\">{{ format.dateTime(row.original.startsAt) }}\u003C\u002Fspan>\n        \u003C\u002Ftemplate>\n        \u003Ctemplate #empty>\n          \u003CUEmpty variant=\"naked\" icon=\"i-lucide-calendar\" :title=\"t('admin.empty', 'No events yet')\">\n            \u003Ctemplate #actions>\n              \u003CUButton :label=\"t('admin.create', 'New event')\" @click=\"actions.create()\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FUEmpty>\n        \u003C\u002Ftemplate>\n      \u003C\u002FUTable>\n      \u003Ctemplate #footer>\n        \u003CTablePagination v-model:page=\"page\" v-model:page-size=\"pageSize\" :total=\"data.total\" \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FTableCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[721,975,976,1011,1043,1050,1079,1095,1110,1115,1201,1226,1312,1352,1357,1380,1402,1431,1437,1455,1502,1573,1579,1640,1696,1780,1786,1796,1801,1811,1834,1878,1893,1971,1981,1991,1996,2005,2071,2080,2085,2149,2157,2178,2194,2224,2230,2290,2296,2323,2352,2362,2376,2440,2454,2512,2522,2532,2541,2550,2564,2621,2630,2639,2649],{"__ignoreMap":973},[977,978,981,985,989,993,996,999,1002,1006,1008],"span",{"class":979,"line":980},"line",1,[977,982,984],{"class":983},"sMK4o","\u003C",[977,986,988],{"class":987},"swJcz","script",[977,990,992],{"class":991},"spNyl"," setup",[977,994,995],{"class":991}," lang",[977,997,998],{"class":983},"=",[977,1000,1001],{"class":983},"\"",[977,1003,1005],{"class":1004},"sfazB","ts",[977,1007,1001],{"class":983},[977,1009,1010],{"class":983},">\n",[977,1012,1014,1018,1021,1024,1028,1031,1034,1037,1040],{"class":979,"line":1013},2,[977,1015,1017],{"class":1016},"s7zQu","import",[977,1019,1020],{"class":1016}," type",[977,1022,1023],{"class":983}," {",[977,1025,1027],{"class":1026},"sTEyZ"," TableColumn",[977,1029,1030],{"class":983}," }",[977,1032,1033],{"class":1016}," from",[977,1035,1036],{"class":983}," '",[977,1038,1039],{"class":1004},"@nuxt\u002Fui",[977,1041,1042],{"class":983},"'\n",[977,1044,1046],{"class":979,"line":1045},3,[977,1047,1049],{"emptyLinePlaceholder":1048},true,"\n",[977,1051,1053,1056,1059,1061,1065,1068,1071,1074,1076],{"class":979,"line":1052},4,[977,1054,1055],{"class":991},"const",[977,1057,1058],{"class":1026}," t ",[977,1060,998],{"class":983},[977,1062,1064],{"class":1063},"s2Zo4"," useModuleT",[977,1066,1067],{"class":1026},"(",[977,1069,1070],{"class":983},"'",[977,1072,1073],{"class":1004},"events",[977,1075,1070],{"class":983},[977,1077,1078],{"class":1026},")\n",[977,1080,1082,1084,1087,1089,1092],{"class":979,"line":1081},5,[977,1083,1055],{"class":991},[977,1085,1086],{"class":1026}," format ",[977,1088,998],{"class":983},[977,1090,1091],{"class":1063}," useFormat",[977,1093,1094],{"class":1026},"()\n",[977,1096,1098,1100,1103,1105,1108],{"class":979,"line":1097},6,[977,1099,1055],{"class":991},[977,1101,1102],{"class":1026}," actions ",[977,1104,998],{"class":983},[977,1106,1107],{"class":1063}," useEventActions",[977,1109,1094],{"class":1026},[977,1111,1113],{"class":979,"line":1112},7,[977,1114,1049],{"emptyLinePlaceholder":1048},[977,1116,1118,1120,1122,1125,1128,1131,1133,1136,1138,1141,1144,1147,1149,1152,1155,1158,1161,1163,1166,1168,1170,1172,1175,1177,1179,1182,1184,1186,1189,1191,1195,1197,1199],{"class":979,"line":1117},8,[977,1119,1055],{"class":991},[977,1121,1023],{"class":983},[977,1123,1124],{"class":1026}," page",[977,1126,1127],{"class":983},",",[977,1129,1130],{"class":1026}," pageSize",[977,1132,1127],{"class":983},[977,1134,1135],{"class":1026}," search",[977,1137,1127],{"class":983},[977,1139,1140],{"class":987}," sort",[977,1142,1143],{"class":983},":",[977,1145,1146],{"class":1026}," sortState",[977,1148,1127],{"class":983},[977,1150,1151],{"class":1026}," query ",[977,1153,1154],{"class":983},"}",[977,1156,1157],{"class":983}," =",[977,1159,1160],{"class":1063}," useTableQuery",[977,1162,1067],{"class":1026},[977,1164,1165],{"class":983},"{",[977,1167,1140],{"class":987},[977,1169,1143],{"class":983},[977,1171,1023],{"class":983},[977,1173,1174],{"class":987}," id",[977,1176,1143],{"class":983},[977,1178,1036],{"class":983},[977,1180,1181],{"class":1004},"startsAt",[977,1183,1070],{"class":983},[977,1185,1127],{"class":983},[977,1187,1188],{"class":987}," desc",[977,1190,1143],{"class":983},[977,1192,1194],{"class":1193},"sfNiH"," true",[977,1196,1030],{"class":983},[977,1198,1030],{"class":983},[977,1200,1078],{"class":1026},[977,1202,1204,1206,1208,1211,1213,1215,1218,1220,1223],{"class":979,"line":1203},9,[977,1205,1055],{"class":991},[977,1207,1023],{"class":983},[977,1209,1210],{"class":1026}," header ",[977,1212,1154],{"class":983},[977,1214,1157],{"class":983},[977,1216,1217],{"class":1063}," useTableSort",[977,1219,1067],{"class":1026},[977,1221,1222],{"class":983},"null,",[977,1224,1225],{"class":1026}," sortState)\n",[977,1227,1229,1231,1233,1236,1238,1241,1243,1245,1248,1251,1253,1255,1258,1260,1262,1264,1267,1269,1272,1274,1277,1280,1282,1284,1287,1289,1292,1294,1297,1299,1303,1305,1308,1310],{"class":979,"line":1228},10,[977,1230,1055],{"class":991},[977,1232,1023],{"class":983},[977,1234,1235],{"class":1026}," data",[977,1237,1127],{"class":983},[977,1239,1240],{"class":1026}," status ",[977,1242,1154],{"class":983},[977,1244,1157],{"class":983},[977,1246,1247],{"class":1016}," await",[977,1249,1250],{"class":1063}," useFetch",[977,1252,1067],{"class":1026},[977,1254,1070],{"class":983},[977,1256,1257],{"class":1004},"\u002Fapi\u002Fadmin\u002Fevents",[977,1259,1070],{"class":983},[977,1261,1127],{"class":983},[977,1263,1023],{"class":983},[977,1265,1266],{"class":1026}," query",[977,1268,1127],{"class":983},[977,1270,1271],{"class":1063}," default",[977,1273,1143],{"class":983},[977,1275,1276],{"class":983}," ()",[977,1278,1279],{"class":991}," =>",[977,1281,740],{"class":1026},[977,1283,1165],{"class":983},[977,1285,1286],{"class":987}," items",[977,1288,1143],{"class":983},[977,1290,1291],{"class":1026}," []",[977,1293,1127],{"class":983},[977,1295,1296],{"class":987}," total",[977,1298,1143],{"class":983},[977,1300,1302],{"class":1301},"sbssI"," 0",[977,1304,1030],{"class":983},[977,1306,1307],{"class":1026},") ",[977,1309,1154],{"class":983},[977,1311,1078],{"class":1026},[977,1313,1315,1317,1320,1322,1325,1327,1330,1332,1335,1337,1340,1343,1345,1348,1350],{"class":979,"line":1314},11,[977,1316,1055],{"class":991},[977,1318,1319],{"class":1026}," pending ",[977,1321,998],{"class":983},[977,1323,1324],{"class":1063}," computed",[977,1326,1067],{"class":1026},[977,1328,1329],{"class":983},"()",[977,1331,1279],{"class":991},[977,1333,1334],{"class":1026}," status",[977,1336,618],{"class":983},[977,1338,1339],{"class":1026},"value ",[977,1341,1342],{"class":983},"===",[977,1344,1036],{"class":983},[977,1346,1347],{"class":1004},"pending",[977,1349,1070],{"class":983},[977,1351,1078],{"class":1026},[977,1353,1355],{"class":979,"line":1354},12,[977,1356,1049],{"emptyLinePlaceholder":1048},[977,1358,1360,1362,1365,1367,1370,1372,1374,1376,1378],{"class":979,"line":1359},13,[977,1361,1055],{"class":991},[977,1363,1364],{"class":1026}," TableIdentity ",[977,1366,998],{"class":983},[977,1368,1369],{"class":1063}," resolveComponent",[977,1371,1067],{"class":1026},[977,1373,1070],{"class":983},[977,1375,907],{"class":1004},[977,1377,1070],{"class":983},[977,1379,1078],{"class":1026},[977,1381,1383,1385,1388,1390,1392,1394,1396,1398,1400],{"class":979,"line":1382},14,[977,1384,1055],{"class":991},[977,1386,1387],{"class":1026}," RowMenu ",[977,1389,998],{"class":983},[977,1391,1369],{"class":1063},[977,1393,1067],{"class":1026},[977,1395,1070],{"class":983},[977,1397,783],{"class":1004},[977,1399,1070],{"class":983},[977,1401,1078],{"class":1026},[977,1403,1405,1407,1410,1412,1415,1417,1420,1423,1426,1428],{"class":979,"line":1404},15,[977,1406,1055],{"class":991},[977,1408,1409],{"class":1026}," columns",[977,1411,1143],{"class":983},[977,1413,1027],{"class":1414},"sBMFI",[977,1416,984],{"class":983},[977,1418,1419],{"class":1414},"EventRow",[977,1421,1422],{"class":983},">",[977,1424,1425],{"class":1026},"[] ",[977,1427,998],{"class":983},[977,1429,1430],{"class":1026}," [\n",[977,1432,1434],{"class":979,"line":1433},16,[977,1435,1436],{"class":983},"  {\n",[977,1438,1440,1443,1445,1447,1450,1452],{"class":979,"line":1439},17,[977,1441,1442],{"class":987},"    accessorKey",[977,1444,1143],{"class":983},[977,1446,1036],{"class":983},[977,1448,1449],{"class":1004},"title",[977,1451,1070],{"class":983},[977,1453,1454],{"class":983},",\n",[977,1456,1458,1461,1463,1466,1468,1470,1472,1474,1476,1479,1481,1483,1486,1488,1490,1492,1495,1497,1500],{"class":979,"line":1457},18,[977,1459,1460],{"class":987},"    header",[977,1462,1143],{"class":983},[977,1464,1465],{"class":1063}," header",[977,1467,1067],{"class":1026},[977,1469,1070],{"class":983},[977,1471,1449],{"class":1004},[977,1473,1070],{"class":983},[977,1475,1127],{"class":983},[977,1477,1478],{"class":1063}," t",[977,1480,1067],{"class":1026},[977,1482,1070],{"class":983},[977,1484,1485],{"class":1004},"admin.title",[977,1487,1070],{"class":983},[977,1489,1127],{"class":983},[977,1491,1036],{"class":983},[977,1493,1494],{"class":1004},"Title",[977,1496,1070],{"class":983},[977,1498,1499],{"class":1026},"))",[977,1501,1454],{"class":983},[977,1503,1505,1508,1510,1513,1517,1520,1522,1525,1528,1530,1532,1535,1537,1539,1541,1544,1546,1548,1550,1553,1555,1557,1559,1561,1563,1566,1568,1571],{"class":979,"line":1504},19,[977,1506,1507],{"class":1063},"    cell",[977,1509,1143],{"class":983},[977,1511,1512],{"class":983}," ({",[977,1514,1516],{"class":1515},"sHdIc"," row",[977,1518,1519],{"class":983}," })",[977,1521,1279],{"class":991},[977,1523,1524],{"class":1063}," h",[977,1526,1527],{"class":1026},"(TableIdentity",[977,1529,1127],{"class":983},[977,1531,1023],{"class":983},[977,1533,1534],{"class":987}," title",[977,1536,1143],{"class":983},[977,1538,1516],{"class":1026},[977,1540,618],{"class":983},[977,1542,1543],{"class":1026},"original",[977,1545,618],{"class":983},[977,1547,1449],{"class":1026},[977,1549,1127],{"class":983},[977,1551,1552],{"class":987}," description",[977,1554,1143],{"class":983},[977,1556,1516],{"class":1026},[977,1558,618],{"class":983},[977,1560,1543],{"class":1026},[977,1562,618],{"class":983},[977,1564,1565],{"class":1026},"location ",[977,1567,1154],{"class":983},[977,1569,1570],{"class":1026},")",[977,1572,1454],{"class":983},[977,1574,1576],{"class":979,"line":1575},20,[977,1577,1578],{"class":983},"  },\n",[977,1580,1582,1585,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1623,1625,1627,1629,1632,1634,1637],{"class":979,"line":1581},21,[977,1583,1584],{"class":983},"  {",[977,1586,1587],{"class":987}," accessorKey",[977,1589,1143],{"class":983},[977,1591,1036],{"class":983},[977,1593,1181],{"class":1004},[977,1595,1070],{"class":983},[977,1597,1127],{"class":983},[977,1599,1465],{"class":987},[977,1601,1143],{"class":983},[977,1603,1465],{"class":1063},[977,1605,1067],{"class":1026},[977,1607,1070],{"class":983},[977,1609,1181],{"class":1004},[977,1611,1070],{"class":983},[977,1613,1127],{"class":983},[977,1615,1478],{"class":1063},[977,1617,1067],{"class":1026},[977,1619,1070],{"class":983},[977,1621,1622],{"class":1004},"admin.starts",[977,1624,1070],{"class":983},[977,1626,1127],{"class":983},[977,1628,1036],{"class":983},[977,1630,1631],{"class":1004},"Starts",[977,1633,1070],{"class":983},[977,1635,1636],{"class":1026},")) ",[977,1638,1639],{"class":983},"},\n",[977,1641,1643,1645,1647,1649,1651,1654,1656,1658,1660,1662,1664,1666,1668,1671,1673,1675,1677,1680,1682,1684,1686,1689,1691,1694],{"class":979,"line":1642},22,[977,1644,1584],{"class":983},[977,1646,1587],{"class":987},[977,1648,1143],{"class":983},[977,1650,1036],{"class":983},[977,1652,1653],{"class":1004},"capacity",[977,1655,1070],{"class":983},[977,1657,1127],{"class":983},[977,1659,1465],{"class":987},[977,1661,1143],{"class":983},[977,1663,1478],{"class":1063},[977,1665,1067],{"class":1026},[977,1667,1070],{"class":983},[977,1669,1670],{"class":1004},"admin.capacity",[977,1672,1070],{"class":983},[977,1674,1127],{"class":983},[977,1676,1036],{"class":983},[977,1678,1679],{"class":1004},"Capacity",[977,1681,1070],{"class":983},[977,1683,1570],{"class":1026},[977,1685,1127],{"class":983},[977,1687,1688],{"class":987}," meta",[977,1690,1143],{"class":983},[977,1692,1693],{"class":1026}," numericColumn ",[977,1695,1639],{"class":983},[977,1697,1699,1701,1703,1705,1707,1710,1712,1714,1717,1719,1721,1723,1725,1727,1729,1732,1734,1736,1738,1740,1743,1745,1748,1751,1753,1756,1758,1761,1763,1765,1767,1769,1771,1774,1776,1778],{"class":979,"line":1698},23,[977,1700,1584],{"class":983},[977,1702,1174],{"class":987},[977,1704,1143],{"class":983},[977,1706,1036],{"class":983},[977,1708,1709],{"class":1004},"actions",[977,1711,1070],{"class":983},[977,1713,1127],{"class":983},[977,1715,1716],{"class":1063}," cell",[977,1718,1143],{"class":983},[977,1720,1512],{"class":983},[977,1722,1516],{"class":1515},[977,1724,1519],{"class":983},[977,1726,1279],{"class":991},[977,1728,1524],{"class":1063},[977,1730,1731],{"class":1026},"(RowMenu",[977,1733,1127],{"class":983},[977,1735,1023],{"class":983},[977,1737,1286],{"class":987},[977,1739,1143],{"class":983},[977,1741,1742],{"class":1026}," actions",[977,1744,618],{"class":983},[977,1746,1747],{"class":1063},"menu",[977,1749,1750],{"class":1026},"(row",[977,1752,618],{"class":983},[977,1754,1755],{"class":1026},"original)",[977,1757,1127],{"class":983},[977,1759,1760],{"class":987}," subject",[977,1762,1143],{"class":983},[977,1764,1516],{"class":1026},[977,1766,618],{"class":983},[977,1768,1543],{"class":1026},[977,1770,618],{"class":983},[977,1772,1773],{"class":1026},"title ",[977,1775,1154],{"class":983},[977,1777,1307],{"class":1026},[977,1779,1639],{"class":983},[977,1781,1783],{"class":979,"line":1782},24,[977,1784,1785],{"class":1026},"]\n",[977,1787,1789,1792,1794],{"class":979,"line":1788},25,[977,1790,1791],{"class":983},"\u003C\u002F",[977,1793,988],{"class":987},[977,1795,1010],{"class":983},[977,1797,1799],{"class":979,"line":1798},26,[977,1800,1049],{"emptyLinePlaceholder":1048},[977,1802,1804,1806,1809],{"class":979,"line":1803},27,[977,1805,984],{"class":983},[977,1807,1808],{"class":987},"template",[977,1810,1010],{"class":983},[977,1812,1814,1817,1820,1823,1825,1827,1830,1832],{"class":979,"line":1813},28,[977,1815,1816],{"class":983},"  \u003C",[977,1818,1819],{"class":987},"div",[977,1821,1822],{"class":991}," class",[977,1824,998],{"class":983},[977,1826,1001],{"class":983},[977,1828,1829],{"class":1004},"flex flex-col gap-4",[977,1831,1001],{"class":983},[977,1833,1010],{"class":983},[977,1835,1837,1840,1842,1845,1847,1849,1851,1854,1856,1858,1861,1863,1866,1868,1870,1872,1874,1876],{"class":979,"line":1836},29,[977,1838,1839],{"class":983},"    \u003C",[977,1841,743],{"class":987},[977,1843,1844],{"class":983}," :",[977,1846,1449],{"class":991},[977,1848,998],{"class":983},[977,1850,1001],{"class":983},[977,1852,1853],{"class":1063},"t",[977,1855,1067],{"class":983},[977,1857,1070],{"class":983},[977,1859,1860],{"class":1004},"admin.events",[977,1862,1070],{"class":983},[977,1864,1865],{"class":983},", ",[977,1867,1070],{"class":983},[977,1869,279],{"class":1004},[977,1871,1070],{"class":983},[977,1873,1570],{"class":983},[977,1875,1001],{"class":983},[977,1877,1010],{"class":983},[977,1879,1881,1884,1886,1889,1891],{"class":979,"line":1880},30,[977,1882,1883],{"class":983},"      \u003C",[977,1885,1808],{"class":987},[977,1887,1888],{"class":983}," #",[977,1890,1709],{"class":991},[977,1892,1010],{"class":983},[977,1894,1896,1899,1902,1905,1907,1909,1912,1914,1916,1919,1921,1923,1925,1927,1929,1932,1934,1936,1938,1941,1943,1945,1947,1950,1953,1955,1957,1959,1961,1964,1966,1968],{"class":979,"line":1895},31,[977,1897,1898],{"class":983},"        \u003C",[977,1900,1901],{"class":987},"UButton",[977,1903,1904],{"class":991}," icon",[977,1906,998],{"class":983},[977,1908,1001],{"class":983},[977,1910,1911],{"class":1004},"i-lucide-plus",[977,1913,1001],{"class":983},[977,1915,1844],{"class":983},[977,1917,1918],{"class":991},"label",[977,1920,998],{"class":983},[977,1922,1001],{"class":983},[977,1924,1853],{"class":1063},[977,1926,1067],{"class":983},[977,1928,1070],{"class":983},[977,1930,1931],{"class":1004},"admin.create",[977,1933,1070],{"class":983},[977,1935,1865],{"class":983},[977,1937,1070],{"class":983},[977,1939,1940],{"class":1004},"New event",[977,1942,1070],{"class":983},[977,1944,1570],{"class":983},[977,1946,1001],{"class":983},[977,1948,1949],{"class":983}," @",[977,1951,1952],{"class":991},"click",[977,1954,998],{"class":983},[977,1956,1001],{"class":983},[977,1958,1709],{"class":1026},[977,1960,618],{"class":983},[977,1962,1963],{"class":1063},"create",[977,1965,1329],{"class":983},[977,1967,1001],{"class":983},[977,1969,1970],{"class":983}," \u002F>\n",[977,1972,1974,1977,1979],{"class":979,"line":1973},32,[977,1975,1976],{"class":983},"      \u003C\u002F",[977,1978,1808],{"class":987},[977,1980,1010],{"class":983},[977,1982,1984,1987,1989],{"class":979,"line":1983},33,[977,1985,1986],{"class":983},"    \u003C\u002F",[977,1988,743],{"class":987},[977,1990,1010],{"class":983},[977,1992,1994],{"class":979,"line":1993},34,[977,1995,1049],{"emptyLinePlaceholder":1048},[977,1997,1999,2001,2003],{"class":979,"line":1998},35,[977,2000,1839],{"class":983},[977,2002,756],{"class":987},[977,2004,1010],{"class":983},[977,2006,2008,2010,2013,2016,2018,2020,2023,2025,2027,2029,2031,2034,2036,2038,2041,2043,2045,2047,2049,2051,2054,2056,2058,2060,2063,2065,2067,2069],{"class":979,"line":2007},36,[977,2009,1883],{"class":983},[977,2011,2012],{"class":987},"UInput",[977,2014,2015],{"class":991}," v-model",[977,2017,998],{"class":983},[977,2019,1001],{"class":983},[977,2021,2022],{"class":1026},"search",[977,2024,1001],{"class":983},[977,2026,1904],{"class":991},[977,2028,998],{"class":983},[977,2030,1001],{"class":983},[977,2032,2033],{"class":1004},"i-lucide-search",[977,2035,1001],{"class":983},[977,2037,1844],{"class":983},[977,2039,2040],{"class":991},"placeholder",[977,2042,998],{"class":983},[977,2044,1001],{"class":983},[977,2046,1853],{"class":1063},[977,2048,1067],{"class":983},[977,2050,1070],{"class":983},[977,2052,2053],{"class":1004},"admin.search",[977,2055,1070],{"class":983},[977,2057,1865],{"class":983},[977,2059,1070],{"class":983},[977,2061,2062],{"class":1004},"Search events",[977,2064,1070],{"class":983},[977,2066,1570],{"class":983},[977,2068,1001],{"class":983},[977,2070,1970],{"class":983},[977,2072,2074,2076,2078],{"class":979,"line":2073},37,[977,2075,1986],{"class":983},[977,2077,756],{"class":987},[977,2079,1010],{"class":983},[977,2081,2083],{"class":979,"line":2082},38,[977,2084,1049],{"emptyLinePlaceholder":1048},[977,2086,2088,2090,2092,2094,2097,2099,2101,2103,2106,2109,2111,2114,2116,2119,2121,2123,2126,2128,2130,2132,2135,2137,2139,2141,2143,2145,2147],{"class":979,"line":2087},39,[977,2089,1839],{"class":983},[977,2091,770],{"class":987},[977,2093,1844],{"class":983},[977,2095,2096],{"class":991},"loading",[977,2098,998],{"class":983},[977,2100,1001],{"class":983},[977,2102,1347],{"class":1026},[977,2104,2105],{"class":983}," && !",[977,2107,2108],{"class":1026},"data",[977,2110,618],{"class":983},[977,2112,2113],{"class":1026},"items",[977,2115,618],{"class":983},[977,2117,2118],{"class":1026},"length",[977,2120,1001],{"class":983},[977,2122,1844],{"class":983},[977,2124,2125],{"class":991},"refreshing",[977,2127,998],{"class":983},[977,2129,1001],{"class":983},[977,2131,1347],{"class":1026},[977,2133,2134],{"class":983}," && !!",[977,2136,2108],{"class":1026},[977,2138,618],{"class":983},[977,2140,2113],{"class":1026},[977,2142,618],{"class":983},[977,2144,2118],{"class":1026},[977,2146,1001],{"class":983},[977,2148,1010],{"class":983},[977,2150,2152,2154],{"class":979,"line":2151},40,[977,2153,1883],{"class":983},[977,2155,2156],{"class":987},"UTable\n",[977,2158,2160,2163,2165,2167,2169,2171,2173,2175],{"class":979,"line":2159},41,[977,2161,2162],{"class":983},"        :",[977,2164,2108],{"class":991},[977,2166,998],{"class":983},[977,2168,1001],{"class":983},[977,2170,2108],{"class":1026},[977,2172,618],{"class":983},[977,2174,2113],{"class":1026},[977,2176,2177],{"class":983},"\"\n",[977,2179,2181,2183,2186,2188,2190,2192],{"class":979,"line":2180},42,[977,2182,2162],{"class":983},[977,2184,2185],{"class":991},"columns",[977,2187,998],{"class":983},[977,2189,1001],{"class":983},[977,2191,2185],{"class":1026},[977,2193,2177],{"class":983},[977,2195,2197,2199,2202,2204,2206,2209,2212,2214,2217,2220,2222],{"class":979,"line":2196},43,[977,2198,2162],{"class":983},[977,2200,2201],{"class":991},"ui",[977,2203,998],{"class":983},[977,2205,1001],{"class":983},[977,2207,2208],{"class":1063},"tableUi",[977,2210,2211],{"class":983},"({}, { ",[977,2213,844],{"class":987},[977,2215,2216],{"class":983},": ",[977,2218,2219],{"class":1193},"true",[977,2221,1519],{"class":983},[977,2223,2177],{"class":983},[977,2225,2227],{"class":979,"line":2226},44,[977,2228,2229],{"class":991},"        sticky\n",[977,2231,2233,2236,2239,2241,2243,2245,2248,2250,2253,2255,2258,2261,2263,2266,2269,2272,2274,2276,2278,2280,2283,2286,2288],{"class":979,"line":2232},45,[977,2234,2235],{"class":983},"        @",[977,2237,2238],{"class":991},"select",[977,2240,998],{"class":983},[977,2242,1001],{"class":983},[977,2244,1067],{"class":983},[977,2246,2247],{"class":1515},"_",[977,2249,1865],{"class":983},[977,2251,2252],{"class":1515},"row",[977,2254,1307],{"class":983},[977,2256,2257],{"class":991},"=>",[977,2259,2260],{"class":1063}," navigateTo",[977,2262,1067],{"class":983},[977,2264,2265],{"class":983},"`",[977,2267,2268],{"class":1004},"\u002Fadmin\u002Fevents\u002F",[977,2270,2271],{"class":983},"${",[977,2273,2252],{"class":1026},[977,2275,618],{"class":983},[977,2277,1543],{"class":1026},[977,2279,618],{"class":983},[977,2281,2282],{"class":1026},"id",[977,2284,2285],{"class":983},"}`",[977,2287,1570],{"class":983},[977,2289,2177],{"class":983},[977,2291,2293],{"class":979,"line":2292},46,[977,2294,2295],{"class":983},"      >\n",[977,2297,2299,2301,2303,2305,2308,2310,2312,2314,2317,2319,2321],{"class":979,"line":2298},47,[977,2300,1898],{"class":983},[977,2302,1808],{"class":987},[977,2304,1888],{"class":983},[977,2306,2307],{"class":991},"startsAt-cell",[977,2309,998],{"class":983},[977,2311,1001],{"class":983},[977,2313,1165],{"class":983},[977,2315,2316],{"class":1026}," row ",[977,2318,1154],{"class":983},[977,2320,1001],{"class":983},[977,2322,1010],{"class":983},[977,2324,2326,2329,2331,2333,2335,2337,2339,2341,2343,2346,2348,2350],{"class":979,"line":2325},48,[977,2327,2328],{"class":983},"          \u003C",[977,2330,977],{"class":987},[977,2332,1822],{"class":991},[977,2334,998],{"class":983},[977,2336,1001],{"class":983},[977,2338,934],{"class":1004},[977,2340,1001],{"class":983},[977,2342,1422],{"class":983},[977,2344,2345],{"class":1026},"{{ format.dateTime(row.original.startsAt) }}",[977,2347,1791],{"class":983},[977,2349,977],{"class":987},[977,2351,1010],{"class":983},[977,2353,2355,2358,2360],{"class":979,"line":2354},49,[977,2356,2357],{"class":983},"        \u003C\u002F",[977,2359,1808],{"class":987},[977,2361,1010],{"class":983},[977,2363,2365,2367,2369,2371,2374],{"class":979,"line":2364},50,[977,2366,1898],{"class":983},[977,2368,1808],{"class":987},[977,2370,1888],{"class":983},[977,2372,2373],{"class":991},"empty",[977,2375,1010],{"class":983},[977,2377,2379,2381,2383,2386,2388,2390,2393,2395,2397,2399,2401,2404,2406,2408,2410,2412,2414,2416,2418,2420,2423,2425,2427,2429,2432,2434,2436,2438],{"class":979,"line":2378},51,[977,2380,2328],{"class":983},[977,2382,809],{"class":987},[977,2384,2385],{"class":991}," variant",[977,2387,998],{"class":983},[977,2389,1001],{"class":983},[977,2391,2392],{"class":1004},"naked",[977,2394,1001],{"class":983},[977,2396,1904],{"class":991},[977,2398,998],{"class":983},[977,2400,1001],{"class":983},[977,2402,2403],{"class":1004},"i-lucide-calendar",[977,2405,1001],{"class":983},[977,2407,1844],{"class":983},[977,2409,1449],{"class":991},[977,2411,998],{"class":983},[977,2413,1001],{"class":983},[977,2415,1853],{"class":1063},[977,2417,1067],{"class":983},[977,2419,1070],{"class":983},[977,2421,2422],{"class":1004},"admin.empty",[977,2424,1070],{"class":983},[977,2426,1865],{"class":983},[977,2428,1070],{"class":983},[977,2430,2431],{"class":1004},"No events yet",[977,2433,1070],{"class":983},[977,2435,1570],{"class":983},[977,2437,1001],{"class":983},[977,2439,1010],{"class":983},[977,2441,2443,2446,2448,2450,2452],{"class":979,"line":2442},52,[977,2444,2445],{"class":983},"            \u003C",[977,2447,1808],{"class":987},[977,2449,1888],{"class":983},[977,2451,1709],{"class":991},[977,2453,1010],{"class":983},[977,2455,2457,2460,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510],{"class":979,"line":2456},53,[977,2458,2459],{"class":983},"              \u003C",[977,2461,1901],{"class":987},[977,2463,1844],{"class":983},[977,2465,1918],{"class":991},[977,2467,998],{"class":983},[977,2469,1001],{"class":983},[977,2471,1853],{"class":1063},[977,2473,1067],{"class":983},[977,2475,1070],{"class":983},[977,2477,1931],{"class":1004},[977,2479,1070],{"class":983},[977,2481,1865],{"class":983},[977,2483,1070],{"class":983},[977,2485,1940],{"class":1004},[977,2487,1070],{"class":983},[977,2489,1570],{"class":983},[977,2491,1001],{"class":983},[977,2493,1949],{"class":983},[977,2495,1952],{"class":991},[977,2497,998],{"class":983},[977,2499,1001],{"class":983},[977,2501,1709],{"class":1026},[977,2503,618],{"class":983},[977,2505,1963],{"class":1063},[977,2507,1329],{"class":983},[977,2509,1001],{"class":983},[977,2511,1970],{"class":983},[977,2513,2515,2518,2520],{"class":979,"line":2514},54,[977,2516,2517],{"class":983},"            \u003C\u002F",[977,2519,1808],{"class":987},[977,2521,1010],{"class":983},[977,2523,2525,2528,2530],{"class":979,"line":2524},55,[977,2526,2527],{"class":983},"          \u003C\u002F",[977,2529,809],{"class":987},[977,2531,1010],{"class":983},[977,2533,2535,2537,2539],{"class":979,"line":2534},56,[977,2536,2357],{"class":983},[977,2538,1808],{"class":987},[977,2540,1010],{"class":983},[977,2542,2544,2546,2548],{"class":979,"line":2543},57,[977,2545,1976],{"class":983},[977,2547,766],{"class":987},[977,2549,1010],{"class":983},[977,2551,2553,2555,2557,2559,2562],{"class":979,"line":2552},58,[977,2554,1883],{"class":983},[977,2556,1808],{"class":987},[977,2558,1888],{"class":983},[977,2560,2561],{"class":991},"footer",[977,2563,1010],{"class":983},[977,2565,2567,2569,2571,2573,2575,2578,2580,2582,2584,2586,2588,2590,2593,2595,2597,2600,2602,2604,2607,2609,2611,2613,2615,2617,2619],{"class":979,"line":2566},59,[977,2568,1898],{"class":983},[977,2570,796],{"class":987},[977,2572,2015],{"class":991},[977,2574,1143],{"class":983},[977,2576,2577],{"class":991},"page",[977,2579,998],{"class":983},[977,2581,1001],{"class":983},[977,2583,2577],{"class":1026},[977,2585,1001],{"class":983},[977,2587,2015],{"class":991},[977,2589,1143],{"class":983},[977,2591,2592],{"class":991},"page-size",[977,2594,998],{"class":983},[977,2596,1001],{"class":983},[977,2598,2599],{"class":1026},"pageSize",[977,2601,1001],{"class":983},[977,2603,1844],{"class":983},[977,2605,2606],{"class":991},"total",[977,2608,998],{"class":983},[977,2610,1001],{"class":983},[977,2612,2108],{"class":1026},[977,2614,618],{"class":983},[977,2616,2606],{"class":1026},[977,2618,1001],{"class":983},[977,2620,1970],{"class":983},[977,2622,2624,2626,2628],{"class":979,"line":2623},60,[977,2625,1976],{"class":983},[977,2627,1808],{"class":987},[977,2629,1010],{"class":983},[977,2631,2633,2635,2637],{"class":979,"line":2632},61,[977,2634,1986],{"class":983},[977,2636,770],{"class":987},[977,2638,1010],{"class":983},[977,2640,2642,2645,2647],{"class":979,"line":2641},62,[977,2643,2644],{"class":983},"  \u003C\u002F",[977,2646,1819],{"class":987},[977,2648,1010],{"class":983},[977,2650,2652,2654,2656],{"class":979,"line":2651},63,[977,2653,1791],{"class":983},[977,2655,1808],{"class":987},[977,2657,1010],{"class":983},[593,2659,2660,2661,2664,2665,2667,2668,2671,2672,931,2674,2677,2678,2680,2681,2684],{},"A table in a tab or on a detail page sits in ",[721,2662,2663],{},"TableCard :title",", with ",[721,2666,747],{}," for its primary action. That gives it\nthe same header as ",[721,2669,2670],{},"SectionCard",". Never wrap a ",[721,2673,766],{},[721,2675,2676],{},"flush"," ",[721,2679,2670],{},". Pass ",[721,2682,2683],{},"tableUi({ tr: '' })"," when the\nrows open nothing.",[2686,2687,2688,2689,2692,2693,2696,2697,2700,2701,845,2703,618],"tip",{},"A short list that loads in one go sorts on the client. Bind ",[721,2690,2691],{},"useTableSort()","'s ",[721,2694,2695],{},"sorting"," with ",[721,2698,2699],{},"v-model:sorting",", and\nleave out ",[721,2702,868],{},[721,2704,796],{},[620,2706,674],{"id":2707},"detail-pages",[593,2709,2710],{},"A detail page shows one record. It has:",[732,2712,2713,2738,2750,2765,2783],{},[735,2714,2715,740,2717,2719,2720,2723,2724,2727,2728,2731,2732,2734,2735,2737],{},[606,2716,739],{},[721,2718,743],{},") with a ",[721,2721,2722],{},"breadcrumb"," back to the list, such as ",[721,2725,2726],{},"[Users, Ada Lovelace]",". A status\n",[721,2729,2730],{},"#badge"," goes in it when the record has one. The primary actions go in ",[721,2733,747],{},", with an outline ",[721,2736,783],{}," last.",[735,2739,2740,2743,2744,2746,2747,618],{},[606,2741,2742],{},"Sections."," Each section is a ",[721,2745,2670],{},". Key facts are a ",[721,2748,2749],{},"DescriptionList",[735,2751,2752,2755,2756,2758,2759,2696,2762,618],{},[606,2753,2754],{},"Save buttons per section."," A form inside a section puts its Save button in the section's ",[721,2757,800],{},", as\n",[721,2760,2761],{},"type=\"submit\"",[721,2763,2764],{},"form=\"\u003Cid>\"",[735,2766,2767,2770,2771,2774,2775,2778,2779,618],{},[606,2768,2769],{},"Tabs."," Sections that other modules can extend are ",[721,2772,2773],{},"WidgetTabs",". Sections the page owns are ",[721,2776,2777],{},"PageTabs",". See\n",[597,2780,2782],{"href":2781},"#tabs","Tabs",[735,2784,2785,2788,2789,2791,2792,618],{},[606,2786,2787],{},"A not-found state."," A record that does not exist shows a ",[721,2790,809],{}," with a link back to the list, never a blank\npage. See ",[597,2793,2795],{"href":2794},"#failed-forbidden-and-not-found","Failed, forbidden and not found",[593,2797,2798],{},[818,2799],{"alt":2800,"src":2801},"An event detail page: a breadcrumb back to the list, the title with a status badge, a summary card, the Details, Tickets and Attendees tabs, and a form card with label and control rows.","\u002Fimages\u002Fux-patterns\u002Fpages-detail.png",[593,2803,2804,2805,2808,2809,2812,2813,2816,2817,2820,2821,618],{},"Inline settings forms use horizontal rows. Each field is a ",[721,2806,2807],{},"FormRow",": a ",[721,2810,2811],{},"UFormField orientation=\"horizontal\""," with the\nlabel and its ",[721,2814,2815],{},"description"," hint on the left and the control on the right. Below ",[721,2818,2819],{},"sm"," the two stack. The rows sit in a\nparent with ",[721,2822,2823],{},"divide-y divide-default",[625,2825,2826,2836],{},[628,2827,2828],{},[631,2829,2830,2833],{},[634,2831,2832],{},"Control",[634,2834,2835],{},"Width",[644,2837,2838,2848,2858],{},[631,2839,2840,2843],{},[649,2841,2842],{},"Short control",[649,2844,2845],{},[721,2846,2847],{},"class=\"w-full sm:max-w-sm\"",[631,2849,2850,2853],{},[649,2851,2852],{},"Long text, such as a textarea or an editor",[649,2854,2855],{},[721,2856,2857],{},"class=\"w-full\"",[631,2859,2860,2863],{},[649,2861,2862],{},"Any control in the account area",[649,2864,2865],{},[721,2866,2857],{},[593,2868,2869],{},"In the account area the column is narrow. A capped input would stop short of the section's footer actions, and the\nright edge would go ragged. Slideover forms stay vertical.",[968,2871,2873],{"className":970,"code":2872,"language":972,"meta":973,"style":973},"\u003CSectionCard :title=\"t('password.title', 'Password')\">\n  \u003CUForm id=\"change-password\" :schema=\"schema\" :state=\"state\" class=\"flex flex-col divide-y divide-default\" @submit=\"save\">\n    \u003CFormRow name=\"newPassword\" :label=\"t('new', 'New password')\" :description=\"t('newHint', 'At least 8 characters.')\" required>\n      \u003CUInput v-model=\"state.newPassword\" type=\"password\" class=\"w-full sm:max-w-sm\" \u002F>\n    \u003C\u002FFormRow>\n  \u003C\u002FUForm>\n  \u003Ctemplate #footer>\n    \u003Cdiv class=\"flex justify-end\">\n      \u003CUButton type=\"submit\" form=\"change-password\" :loading=\"busy\" :label=\"t('save', 'Change password')\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FSectionCard>\n",[721,2874,2875,2915,2920,2925,2930,2935,2940,2945,2950,2955,2960,2965],{"__ignoreMap":973},[977,2876,2877,2879,2881,2883,2885,2887,2889,2891,2893,2895,2898,2900,2902,2904,2907,2909,2911,2913],{"class":979,"line":980},[977,2878,984],{"class":983},[977,2880,2670],{"class":987},[977,2882,1844],{"class":983},[977,2884,1449],{"class":991},[977,2886,998],{"class":983},[977,2888,1001],{"class":983},[977,2890,1853],{"class":1063},[977,2892,1067],{"class":1026},[977,2894,1070],{"class":983},[977,2896,2897],{"class":1004},"password.title",[977,2899,1070],{"class":983},[977,2901,1127],{"class":983},[977,2903,1036],{"class":983},[977,2905,2906],{"class":1004},"Password",[977,2908,1070],{"class":983},[977,2910,1570],{"class":1026},[977,2912,1001],{"class":983},[977,2914,1010],{"class":983},[977,2916,2917],{"class":979,"line":1013},[977,2918,2919],{"class":1026},"  \u003CUForm id=\"change-password\" :schema=\"schema\" :state=\"state\" class=\"flex flex-col divide-y divide-default\" @submit=\"save\">\n",[977,2921,2922],{"class":979,"line":1045},[977,2923,2924],{"class":1026},"    \u003CFormRow name=\"newPassword\" :label=\"t('new', 'New password')\" :description=\"t('newHint', 'At least 8 characters.')\" required>\n",[977,2926,2927],{"class":979,"line":1052},[977,2928,2929],{"class":1026},"      \u003CUInput v-model=\"state.newPassword\" type=\"password\" class=\"w-full sm:max-w-sm\" \u002F>\n",[977,2931,2932],{"class":979,"line":1081},[977,2933,2934],{"class":1026},"    \u003C\u002FFormRow>\n",[977,2936,2937],{"class":979,"line":1097},[977,2938,2939],{"class":1026},"  \u003C\u002FUForm>\n",[977,2941,2942],{"class":979,"line":1112},[977,2943,2944],{"class":1026},"  \u003Ctemplate #footer>\n",[977,2946,2947],{"class":979,"line":1117},[977,2948,2949],{"class":1026},"    \u003Cdiv class=\"flex justify-end\">\n",[977,2951,2952],{"class":979,"line":1203},[977,2953,2954],{"class":1026},"      \u003CUButton type=\"submit\" form=\"change-password\" :loading=\"busy\" :label=\"t('save', 'Change password')\" \u002F>\n",[977,2956,2957],{"class":979,"line":1228},[977,2958,2959],{"class":1026},"    \u003C\u002Fdiv>\n",[977,2961,2962],{"class":979,"line":1314},[977,2963,2964],{"class":1026},"  \u003C\u002Ftemplate>\n",[977,2966,2967,2969,2971],{"class":979,"line":1354},[977,2968,1791],{"class":983},[977,2970,2670],{"class":987},[977,2972,1010],{"class":983},[620,2974,2782],{"id":2975},"tabs",[593,2977,2978],{},"Both tab components look the same: a bordered strip with an underline highlight. So a page never looks different\nbecause of how it is built.",[625,2980,2981,2991],{},[628,2982,2983],{},[631,2984,2985,2988],{},[634,2986,2987],{},"Use",[634,2989,2990],{},"When",[644,2992,2993,3005],{},[631,2994,2995,2999],{},[649,2996,2997],{},[721,2998,2773],{},[649,3000,3001,3002,618],{},"Other modules should be able to add sections to the page. An example is the user detail page, where Payments or Membership appear when those modules are installed. The active tab is in ",[721,3003,3004],{},"?tab=",[631,3006,3007,3011],{},[649,3008,3009],{},[721,3010,2777],{},[649,3012,3013,3014,2696,3016,3019,3020,3023],{},"The page fixes its own sections, such as a form's builder, settings and access. Pass ",[721,3015,2113],{},[721,3017,3018],{},"to"," for link tabs, where each tab is a route, or ",[721,3021,3022],{},"v-model"," for state tabs.",[593,3025,3026,3028,3029,3031,3032,618],{},[721,3027,2773],{}," comes from the ",[597,3030,358],{"href":359}," module, and other modules add tabs with ",[721,3033,3034],{},"extendTabs",[620,3036,688],{"id":3037},"light-entities",[593,3039,3040,3041,3044],{},"An entity with little of its own, such as a unit or an application, opens in a slideover instead of on a detail page.\nThe open record lives in the URL query, for example ",[721,3042,3043],{},"?application=\u003Cid>",". So ⌘K and other pages can link straight\nto it.",[620,3046,702],{"id":3047},"divided-list",[593,3049,3050],{},"A short list of records that is not a table, such as passkeys, documents or applications, is a list inside a card:",[732,3052,3053,3063,3069,3078],{},[735,3054,3055,3056,3059,3060,618],{},"The card is a ",[721,3057,3058],{},"SectionCard flush"," around a ",[721,3061,3062],{},"ul.divide-y.divide-default",[735,3064,3065,3066,618],{},"Each row is ",[721,3067,3068],{},"li.flex.items-center.gap-3.px-4.py-3",[735,3070,3071,3072,3075,3076,618],{},"A row holds a leading icon or avatar, a ",[721,3073,3074],{},"min-w-0 flex-1"," text block, and a trailing button or ",[721,3077,783],{},[735,3079,3080,3081,618],{},"The empty state goes inside the card, as ",[721,3082,3083],{},"UEmpty variant=\"naked\"",[968,3085,3087],{"className":970,"code":3086,"language":972,"meta":973,"style":973},"\u003CSectionCard flush :title=\"t('documents.title', 'Documents')\">\n  \u003Cul class=\"divide-y divide-default\">\n    \u003Cli v-for=\"doc in documents\" :key=\"doc.id\" class=\"flex items-center gap-3 px-4 py-3\">\n      \u003CUIcon :name=\"doc.icon\" class=\"size-5 shrink-0 text-muted\" \u002F>\n      \u003Cspan class=\"min-w-0 flex-1 truncate font-medium text-highlighted\">{{ doc.label }}\u003C\u002Fspan>\n      \u003CUButton :to=\"doc.path\" color=\"neutral\" variant=\"outline\" :label=\"t('documents.download', 'Download')\" \u002F>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002FSectionCard>\n",[721,3088,3089,3132,3137,3142,3147,3152,3157,3162,3167],{"__ignoreMap":973},[977,3090,3091,3093,3095,3098,3100,3102,3104,3106,3108,3110,3112,3115,3117,3119,3121,3124,3126,3128,3130],{"class":979,"line":980},[977,3092,984],{"class":983},[977,3094,2670],{"class":987},[977,3096,3097],{"class":991}," flush",[977,3099,1844],{"class":983},[977,3101,1449],{"class":991},[977,3103,998],{"class":983},[977,3105,1001],{"class":983},[977,3107,1853],{"class":1063},[977,3109,1067],{"class":1026},[977,3111,1070],{"class":983},[977,3113,3114],{"class":1004},"documents.title",[977,3116,1070],{"class":983},[977,3118,1127],{"class":983},[977,3120,1036],{"class":983},[977,3122,3123],{"class":1004},"Documents",[977,3125,1070],{"class":983},[977,3127,1570],{"class":1026},[977,3129,1001],{"class":983},[977,3131,1010],{"class":983},[977,3133,3134],{"class":979,"line":1013},[977,3135,3136],{"class":1026},"  \u003Cul class=\"divide-y divide-default\">\n",[977,3138,3139],{"class":979,"line":1045},[977,3140,3141],{"class":1026},"    \u003Cli v-for=\"doc in documents\" :key=\"doc.id\" class=\"flex items-center gap-3 px-4 py-3\">\n",[977,3143,3144],{"class":979,"line":1052},[977,3145,3146],{"class":1026},"      \u003CUIcon :name=\"doc.icon\" class=\"size-5 shrink-0 text-muted\" \u002F>\n",[977,3148,3149],{"class":979,"line":1081},[977,3150,3151],{"class":1026},"      \u003Cspan class=\"min-w-0 flex-1 truncate font-medium text-highlighted\">{{ doc.label }}\u003C\u002Fspan>\n",[977,3153,3154],{"class":979,"line":1097},[977,3155,3156],{"class":1026},"      \u003CUButton :to=\"doc.path\" color=\"neutral\" variant=\"outline\" :label=\"t('documents.download', 'Download')\" \u002F>\n",[977,3158,3159],{"class":979,"line":1112},[977,3160,3161],{"class":1026},"    \u003C\u002Fli>\n",[977,3163,3164],{"class":979,"line":1117},[977,3165,3166],{"class":1026},"  \u003C\u002Ful>\n",[977,3168,3169,3171,3173],{"class":979,"line":1203},[977,3170,1791],{"class":983},[977,3172,2670],{"class":987},[977,3174,1010],{"class":983},[620,3176,3178],{"id":3177},"page-wide-draft","Page-wide draft",[593,3180,3181,3182,3184,3185,3187,3188,3190],{},"Most pages save per section: the form sits in a ",[721,3183,2670],{},", and Save is in its ",[721,3186,800],{},". One case is different: a\nsingle draft that spans the whole page and that several cards edit, such as the form builder. Save then stays in the\nheading's ",[721,3189,747],{},", next to the status. The page still has one editor and one Save, never a Save per card.",[620,3192,716],{"id":3193},"overview-pages",[593,3195,3196],{},"An overview shows numbers first, then what needs a decision:",[732,3198,3199,3209],{},[735,3200,3201,3202,3205,3206,3208],{},"Each number is a ",[721,3203,3204],{},"StatCard"," that links (",[721,3207,3018],{},") to the list it summarises.",[735,3210,3211,3212,3215],{},"Then come ",[721,3213,3214],{},"ListCard","s for what needs a decision, such as recent items or upcoming events.",[593,3217,3218,3219,3222],{},"The admin dashboard and the account overview are both built this way, from ",[597,3220,3221],{"href":359},"widget"," areas.",[620,3224,814],{"id":3225},"empty-states",[593,3227,3228],{},"An empty state says what the thing is and offers the single action that gets you going. An example is \"No events yet\"\nwith a \"New event\" button.",[593,3230,3231],{},[818,3232],{"alt":3233,"src":3234},"An empty events list: an icon, a title, a one-line hint and a single New event button.","\u002Fimages\u002Fux-patterns\u002Fpages-empty.png",[732,3236,3237,3243,3249],{},[735,3238,3239,3240,3242],{},"It is a ",[721,3241,809],{},". There is no separate empty-state component.",[735,3244,3245,3246,618],{},"Inside a card, use ",[721,3247,3248],{},"variant=\"naked\"",[735,3250,3251],{},"When a prerequisite is missing, point to it instead of the action, for example \"Add a ticket type first\".",[620,3253,2795],{"id":3254},"failed-forbidden-and-not-found",[593,3256,3257,3258,3260],{},"A page whose data did not load shows a ",[721,3259,809],{}," as the page body. It sits inside the page root, below the heading when\nthe heading does not depend on the data. There are three cases. All use the default variant, because they replace the\nbody.",[625,3262,3263,3279],{},[628,3264,3265],{},[631,3266,3267,3270,3273,3276],{},[634,3268,3269],{},"Case",[634,3271,3272],{},"Icon",[634,3274,3275],{},"Title and description",[634,3277,3278],{},"Action",[644,3280,3281,3304,3319],{},[631,3282,3283,3286,3291,3297],{},[649,3284,3285],{},"Failed (any other error)",[649,3287,3288],{},[721,3289,3290],{},"i-lucide-circle-alert",[649,3292,3293,3294],{},"\"X could not be loaded\", and ",[721,3295,3296],{},"errorMessage(error, fallback)",[649,3298,3299,3300,3303],{},"A neutral outline \"Try again\" (",[721,3301,3302],{},"i-lucide-rotate-ccw",") that refreshes",[631,3305,3306,3309,3313,3316],{},[649,3307,3308],{},"Forbidden (401, 403)",[649,3310,3311],{},[721,3312,34],{},[649,3314,3315],{},"\"You are not allowed to see X\"",[649,3317,3318],{},"None",[631,3320,3321,3324,3330,3333],{},[649,3322,3323],{},"Not found (404)",[649,3325,3326,3327],{},"The entity's own icon, such as ",[721,3328,3329],{},"i-lucide-user-x",[649,3331,3332],{},"\"X not found\", and a hint such as \"It may have been deleted.\"",[649,3334,3335],{},"A neutral outline \"All X\" that links to the list",[968,3337,3339],{"className":970,"code":3338,"language":972,"meta":973,"style":973},"\u003CUEmpty\n  v-if=\"error && !data\"\n  :icon=\"forbidden ? 'i-lucide-lock' : 'i-lucide-circle-alert'\"\n  :title=\"forbidden ? t('admin.forbidden', 'You are not allowed to see events') : t('admin.loadFailed', 'Events could not be loaded')\"\n  :description=\"forbidden ? undefined : errorMessage(error, t('admin.loadFailedHint', 'Try again in a moment.'))\"\n  :actions=\"forbidden ? [] : [{ label: t('retry', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]\"\n\u002F>\n",[721,3340,3341,3348,3370,3403,3465,3516,3630],{"__ignoreMap":973},[977,3342,3343,3345],{"class":979,"line":980},[977,3344,984],{"class":983},[977,3346,3347],{"class":987},"UEmpty\n",[977,3349,3350,3353,3355,3357,3360,3363,3366,3368],{"class":979,"line":1013},[977,3351,3352],{"class":1016},"  v-if",[977,3354,998],{"class":983},[977,3356,1001],{"class":983},[977,3358,3359],{"class":1026},"error ",[977,3361,3362],{"class":983},"&&",[977,3364,3365],{"class":983}," !",[977,3367,2108],{"class":1026},[977,3369,2177],{"class":983},[977,3371,3372,3375,3378,3380,3382,3385,3388,3390,3392,3394,3396,3398,3400],{"class":979,"line":1045},[977,3373,3374],{"class":983},"  :",[977,3376,3377],{"class":991},"icon",[977,3379,998],{"class":983},[977,3381,1001],{"class":983},[977,3383,3384],{"class":1026},"forbidden ",[977,3386,3387],{"class":983},"?",[977,3389,1036],{"class":983},[977,3391,34],{"class":1004},[977,3393,1070],{"class":983},[977,3395,1844],{"class":983},[977,3397,1036],{"class":983},[977,3399,3290],{"class":1004},[977,3401,3402],{"class":983},"'\"\n",[977,3404,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423,3426,3428,3430,3432,3435,3437,3439,3441,3443,3445,3447,3450,3452,3454,3456,3459,3461,3463],{"class":979,"line":1052},[977,3406,3374],{"class":983},[977,3408,1449],{"class":991},[977,3410,998],{"class":983},[977,3412,1001],{"class":983},[977,3414,3384],{"class":1026},[977,3416,3387],{"class":983},[977,3418,1478],{"class":1063},[977,3420,1067],{"class":1026},[977,3422,1070],{"class":983},[977,3424,3425],{"class":1004},"admin.forbidden",[977,3427,1070],{"class":983},[977,3429,1127],{"class":983},[977,3431,1036],{"class":983},[977,3433,3434],{"class":1004},"You are not allowed to see events",[977,3436,1070],{"class":983},[977,3438,1307],{"class":1026},[977,3440,1143],{"class":983},[977,3442,1478],{"class":1063},[977,3444,1067],{"class":1026},[977,3446,1070],{"class":983},[977,3448,3449],{"class":1004},"admin.loadFailed",[977,3451,1070],{"class":983},[977,3453,1127],{"class":983},[977,3455,1036],{"class":983},[977,3457,3458],{"class":1004},"Events could not be loaded",[977,3460,1070],{"class":983},[977,3462,1570],{"class":1026},[977,3464,2177],{"class":983},[977,3466,3467,3469,3471,3473,3475,3477,3479,3482,3484,3487,3490,3492,3494,3496,3498,3501,3503,3505,3507,3510,3512,3514],{"class":979,"line":1081},[977,3468,3374],{"class":983},[977,3470,2815],{"class":991},[977,3472,998],{"class":983},[977,3474,1001],{"class":983},[977,3476,3384],{"class":1026},[977,3478,3387],{"class":983},[977,3480,3481],{"class":983}," undefined",[977,3483,1844],{"class":983},[977,3485,3486],{"class":1063}," errorMessage",[977,3488,3489],{"class":1026},"(error",[977,3491,1127],{"class":983},[977,3493,1478],{"class":1063},[977,3495,1067],{"class":1026},[977,3497,1070],{"class":983},[977,3499,3500],{"class":1004},"admin.loadFailedHint",[977,3502,1070],{"class":983},[977,3504,1127],{"class":983},[977,3506,1036],{"class":983},[977,3508,3509],{"class":1004},"Try again in a moment.",[977,3511,1070],{"class":983},[977,3513,1499],{"class":1026},[977,3515,2177],{"class":983},[977,3517,3518,3520,3522,3524,3526,3528,3530,3533,3535,3538,3540,3543,3545,3547,3549,3551,3554,3556,3558,3560,3563,3565,3567,3569,3571,3573,3575,3577,3579,3581,3584,3586,3588,3591,3593,3595,3597,3599,3601,3604,3606,3608,3611,3613,3615,3617,3620,3623,3625,3628],{"class":979,"line":1097},[977,3519,3374],{"class":983},[977,3521,1709],{"class":991},[977,3523,998],{"class":983},[977,3525,1001],{"class":983},[977,3527,3384],{"class":1026},[977,3529,3387],{"class":983},[977,3531,3532],{"class":1026}," [] ",[977,3534,1143],{"class":983},[977,3536,3537],{"class":1026}," [",[977,3539,1165],{"class":983},[977,3541,3542],{"class":987}," label",[977,3544,1143],{"class":983},[977,3546,1478],{"class":1063},[977,3548,1067],{"class":1026},[977,3550,1070],{"class":983},[977,3552,3553],{"class":1004},"retry",[977,3555,1070],{"class":983},[977,3557,1127],{"class":983},[977,3559,1036],{"class":983},[977,3561,3562],{"class":1004},"Try again",[977,3564,1070],{"class":983},[977,3566,1570],{"class":1026},[977,3568,1127],{"class":983},[977,3570,1904],{"class":987},[977,3572,1143],{"class":983},[977,3574,1036],{"class":983},[977,3576,3302],{"class":1004},[977,3578,1070],{"class":983},[977,3580,1127],{"class":983},[977,3582,3583],{"class":987}," color",[977,3585,1143],{"class":983},[977,3587,1036],{"class":983},[977,3589,3590],{"class":1004},"neutral",[977,3592,1070],{"class":983},[977,3594,1127],{"class":983},[977,3596,2385],{"class":987},[977,3598,1143],{"class":983},[977,3600,1036],{"class":983},[977,3602,3603],{"class":1004},"outline",[977,3605,1070],{"class":983},[977,3607,1127],{"class":983},[977,3609,3610],{"class":1063}," onClick",[977,3612,1143],{"class":983},[977,3614,1276],{"class":983},[977,3616,1279],{"class":991},[977,3618,3619],{"class":1063}," refresh",[977,3621,3622],{"class":1026},"() ",[977,3624,1154],{"class":983},[977,3626,3627],{"class":1026},"]",[977,3629,2177],{"class":983},[977,3631,3632],{"class":979,"line":1112},[977,3633,3634],{"class":1026},"\u002F>\n",[871,3636,3637,3638,3641,3642,3645],{},"Check ",[721,3639,3640],{},"error && !data",", not ",[721,3643,3644],{},"error"," alone. Otherwise a failed background refresh replaces rows that are already on\nscreen.",[620,3647,893],{"id":2096},[593,3649,3650],{},"A page never says \"nothing here\" before it knows. An empty state, a \"join\" hero or a \"not a member\" message is a claim\nabout the data. So it renders only after a load succeeded and found nothing.",[732,3652,3653,3673,3687,3708],{},[735,3654,3655,3658,3659,1454,3662,3665,3666,3669,3670,618],{},[606,3656,3657],{},"Pages await their data."," Await the fetch that loads the page's main data. That fetch is ",[721,3660,3661],{},"useFetch",[721,3663,3664],{},"useCachedFetch"," or a module composable that can be awaited, such as ",[721,3667,3668],{},"useMyTickets()",". The server then renders the\npage with its data, and hydration shows the same thing. Never leave the main data un-awaited with a default such as\n",[721,3671,3672],{},"default: () => []",[735,3674,3675,3680,3681,3683,3684,3686],{},[606,3676,3677,3678,618],{},"Data that should survive navigation uses ",[721,3679,3664],{}," See ",[597,3682,326],{"href":327},". Plain ",[721,3685,3661],{},"\ndata is dropped when the page unmounts. Going back then flashes the empty state while it refetches.",[735,3688,3689,3692,3693,3696,3697,3699,3700,1865,3702,1865,3704,845,3706,921],{},[606,3690,3691],{},"Widgets may load lazily."," Only widgets, and secondary parts of a page that must not hold up the render, load\nwithout waiting. They use ",[721,3694,3695],{},"useLazyFetch"," or an un-awaited fetch. While they load, they show a skeleton: each card\ncomponent takes a ",[721,3698,2096],{}," prop for it (",[721,3701,2670],{},[721,3703,3214],{},[721,3705,770],{},[721,3707,3204],{},[735,3709,3710,3713],{},[606,3711,3712],{},"Skeletons keep the size."," A skeleton has the size of what it replaces, so the layout does not jump when the data\narrives.",[871,3715,3716,3717,3720,3721,2692,3723,3725,3726,3729],{},"Gate on \"pending and nothing to show\": ",[721,3718,3719],{},"status === 'pending' && !data",", or ",[721,3722,3664],{},[721,3724,2096],{},". Gating on\n",[721,3727,3728],{},"status === 'pending'"," alone replaces the current content during a background refresh.",[871,3731,3732,3733,3735,3736,3738],{},"Errors are not empty. Do not swallow a failed request into default data. Check ",[721,3734,3644],{}," and show a ",[721,3737,809],{}," with the\nmessage, or a toast for a background refresh. Otherwise \"you have no tickets\" shows because a request failed.",[620,3740,3742],{"id":3741},"next-steps","Next steps",[732,3744,3745,3750,3755],{},[735,3746,3747,3749],{},[597,3748,106],{"href":107}," – add the create form and row menu this page's lists use.",[735,3751,3752,3754],{},[597,3753,486],{"href":487}," – build a list page with a sidebar entry, step by step.",[735,3756,3757,3759],{},[597,3758,332],{"href":333}," – look up the props of each component named here.",[3761,3762,3763],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":973,"searchDepth":1013,"depth":1013,"links":3765},[3766,3767,3768,3769,3770,3771,3772,3773,3774,3775,3776,3777],{"id":622,"depth":1013,"text":623},{"id":727,"depth":1013,"text":660},{"id":2707,"depth":1013,"text":674},{"id":2975,"depth":1013,"text":2782},{"id":3037,"depth":1013,"text":688},{"id":3047,"depth":1013,"text":702},{"id":3177,"depth":1013,"text":3178},{"id":3193,"depth":1013,"text":716},{"id":3225,"depth":1013,"text":814},{"id":3254,"depth":1013,"text":2795},{"id":2096,"depth":1013,"text":893},{"id":3741,"depth":1013,"text":3742},"The shape of each kind of app page, and the loading, empty and error states every page shows.","md",null,{},{"icon":104},{"title":101,"description":3778},"KSCx2i5NKALNlIP52K0ScOYT22oGpLdrdYWj0Xo5YUQ",[3786,3788],{"title":96,"path":97,"stem":98,"description":3787,"icon":99,"children":-1},"Which of the three areas a new screen belongs in, the layout it gets and where its navigation entry goes.",{"title":106,"path":107,"stem":108,"description":3789,"icon":109,"children":-1},"How a screen creates, edits and deletes records, and how it tells the user what happened.",1794503151032]