[{"data":1,"prerenderedAt":1138},["ShallowReactive",2],{"navigation_docs":3,"-guide-ux-patterns-layouts-and-navigation":587,"-guide-ux-patterns-layouts-and-navigation-surround":1133},[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":96,"body":589,"description":1126,"extension":1127,"links":1128,"meta":1129,"navigation":1130,"path":97,"seo":1131,"stem":98,"__hash__":1132},"docs\u002F2.guide\u002F2.ux-patterns\u002F1.layouts-and-navigation.md",{"type":590,"value":591,"toc":1117},"minimark",[592,601,610,613,637,653,662,667,670,761,772,775,782,842,855,862,866,911,914,923,929,980,983,1001,1021,1027,1030,1033,1039,1090,1096,1100],[593,594,595,596,600],"p",{},"When every ",[597,598,599],"a",{"href":87},"module"," draws its screens its own way, the app stops feeling like one product. The\nUX pattern pages fix that: each screen follows the same few patterns, whichever modules are installed. This page tells\nyou which area a new screen belongs in, which layout it gets and where its navigation entry goes.",[602,603,605,609],"callout",{"icon":604},"i-lucide-users",[606,607,608],"strong",{},"For:"," module authors and app developers who add a screen, and anyone who reviews one.",[593,611,612],{},"Read the four pattern pages before you add a screen, and follow them when you review one:",[614,615,616,622,627,632],"ul",{},[617,618,619,621],"li",{},[606,620,96],{}," (this page): the three areas and their navigation.",[617,623,624,626],{},[597,625,101],{"href":102},": lists, detail pages, overviews and the loading, empty and error states.",[617,628,629,631],{},[597,630,106],{"href":107},": create and edit forms, row menus and confirmations.",[617,633,634,636],{},[597,635,111],{"href":112},": strings, dates, links and a checklist for a new page.",[593,638,639,640,642,643,645,646,649,650,652],{},"The building blocks come from three modules. ",[597,641,326],{"href":327}," has the shared components. The\n",[597,644,217],{"href":351}," module draws the ",[597,647,648],{"href":87},"admin area",". The\n",[597,651,195],{"href":196}," module draws the account settings pages.",[654,655,656,657,661],"note",{},"These are patterns, plus a light theme for the admin area. The admin shell sets the chrome tones: the page, sidebar and\nnavbar backgrounds, and a primary-coloured brand tile. Colours, fonts and radius still come from Nuxt UI and your app's\n",[658,659,660],"code",{},"app.config.ts",". The shared components add only structure and spacing.",[663,664,666],"h2",{"id":665},"pick-the-area","Pick the area",[593,668,669],{},"There are three areas, and each has its own layout. A page picks its area by its path. It never imports a layout.",[671,672,673,692],"table",{},[674,675,676],"thead",{},[677,678,679,683,686,689],"tr",{},[680,681,682],"th",{},"Area",[680,684,685],{},"Paths",[680,687,688],{},"Layout",[680,690,691],{},"What it is",[693,694,695,720,741],"tbody",{},[677,696,697,701,704,713],{},[698,699,700],"td",{},"Public site",[698,702,703],{},"Everything else",[698,705,706,709,710],{},[658,707,708],{},"default",", from the ",[597,711,712],{"href":425},"base layer",[698,714,715,716,719],{},"A header and a footer. Public pages use ",[658,717,718],{},"UContainer > UPage",".",[677,721,722,725,730,738],{},[698,723,724],{},"Admin area",[698,726,727],{},[658,728,729],{},"\u002Fadmin\u002F**",[698,731,732,735,736],{},[658,733,734],{},"admin",", from ",[597,737,217],{"href":351},[698,739,740],{},"A dashboard shell: a collapsible sidebar with grouped navigation, a ⌘K palette and the account menu in the sidebar footer.",[677,742,743,746,751,758],{},[698,744,745],{},"Account area",[698,747,748],{},[658,749,750],{},"\u002Faccount\u002F**",[698,752,753,735,756],{},[658,754,755],{},"account",[597,757,195],{"href":196},[698,759,760],{},"The site's header and footer around a centred settings grid, with a section list on the left.",[593,762,763,764,767,768,771],{},"The admin layout is a thin layout around the shared shell (",[658,765,766],{},"AppShell","). Neither app area draws a heading. Every page in\nthe admin and account areas renders its own heading (",[658,769,770],{},"PageHeading",").",[663,773,724],{"id":774},"admin-area",[593,776,777,778,781],{},"The admin sidebar groups its navigation. Each group reads its own ",[597,779,780],{"href":355},"menu"," path:",[671,783,784,797],{},[674,785,786],{},[677,787,788,791,794],{},[680,789,790],{},"Group",[680,792,793],{},"Menu path",[680,795,796],{},"Put here",[693,798,799,811,829],{},[677,800,801,803,808],{},[698,802,173],{},[698,804,805],{},[658,806,807],{},"admin.nav.overview",[698,809,810],{},"The dashboard.",[677,812,813,816,822],{},[698,814,815],{},"Manage",[698,817,818,821],{},[658,819,820],{},"admin.nav"," (the root)",[698,823,824,825,828],{},"What ",[597,826,827],{"href":87},"staff"," manage every day: users, events, forms.",[677,830,831,834,839],{},[698,832,833],{},"Settings",[698,835,836],{},[658,837,838],{},"admin.nav.settings",[698,840,841],{},"Configuration: OAuth applications, integrations.",[593,843,844,845,848,849,851,852,854],{},"The Overview group has no heading in the sidebar: its items, such as ",[606,846,847],{},"Dashboard",", sit above the ",[606,850,815],{}," and\n",[606,853,833],{}," headings. In the ⌘K palette the group is called \"Go to\".",[593,856,857],{},[858,859],"img",{"alt":860,"src":861},"The admin dashboard: the sidebar shows Dashboard above the Manage and Settings groups, the navbar shows the area and section, and the account menu sits in the sidebar footer.","\u002Fimages\u002Fux-patterns\u002Flayouts-and-navigation-admin.png",[863,864,865],"tip",{},"Put a new feature in one of these groups. A new group needs a reason, such as a whole new class of screens that reads\nas neither \"managing\" nor \"settings\".",[614,867,868,874,880,889,898],{},[617,869,870,873],{},[606,871,872],{},"Search."," The ⌘K palette lists the same groups. So a page that is in the navigation is also searchable.",[617,875,876,879],{},[606,877,878],{},"Account menu."," It sits in the sidebar footer as one button: your avatar and name, which opens a dropdown menu.\nWhen the sidebar is collapsed, the button shrinks to the avatar.",[617,881,882,885,886,719],{},[606,883,884],{},"Colour mode."," It is not in the chrome. It lives in the account menu, under ",[606,887,888],{},"Appearance",[617,890,891,894,895,719],{},[606,892,893],{},"Navbar."," The navbar shows a muted \"Area › Section\" eyebrow, such as \"Administration › Users\". It is not a\ntitle, so the page's own heading is the only ",[658,896,897],{},"\u003Ch1>",[617,899,900,903,904,907,908,719],{},[606,901,902],{},"Width."," The page body is centred at ",[658,905,906],{},"max-w-7xl"," by default. A page that needs the full width, such as the form\nbuilder, sets ",[658,909,910],{},"definePageMeta({ wide: true })",[663,912,745],{"id":913},"account-area",[593,915,916,917,919,920,922],{},"The account area is a settings page inside the site. Pages under ",[658,918,750],{}," render in the ",[658,921,755],{}," layout.",[593,924,925],{},[858,926],{"alt":927,"src":928},"The account area inside the site header and footer, with the section list on the left: Overview, Profile, Membership, Security and more.","\u002Fimages\u002Fux-patterns\u002Flayouts-and-navigation-account.png",[614,930,931,941,951,964,974],{},[617,932,933,936,937,940],{},[606,934,935],{},"Chrome."," The site header and footer stay. The account menu (",[658,938,939],{},"AccountMenu",") stays in the site header.",[617,942,943,946,947,950],{},[606,944,945],{},"Grid."," The content is a centred ",[658,948,949],{},"max-w-5xl"," grid.",[617,952,953,956,957,960,961,963],{},[606,954,955],{},"Left column."," A sticky column shows the signed-in user (a small ",[658,958,959],{},"UUser","). Below it is the vertical navigation,\nbuilt from the ",[658,962,755],{}," menu.",[617,965,966,969,970,973],{},[606,967,968],{},"Narrow screens."," A section switcher (",[658,971,972],{},"PageSectionSwitcher",") replaces the left column, above the content.",[617,975,976,979],{},[606,977,978],{},"Identity."," The signed-in user is shown once, in the left column. Headings do not repeat it.",[593,981,982],{},"The layout renders no heading, so every page renders its own as the first child of its root:",[614,984,985,995],{},[617,986,987,988,991,992,994],{},"Pages of the Account module use ",[658,989,990],{},"AccountHeader",", a ",[658,993,770],{}," filled from the current menu item.",[617,996,997,998,1000],{},"Pages that other modules add use ",[658,999,770],{}," with the menu item's own i18n keys. The label and the title then\ncannot drift apart.",[593,1002,1003,1006,1007,1009,1010,1013,1014,1017,1020],{},[658,1004,1005],{},"\u002Faccount"," itself is an overview. It shows a summary card (",[658,1008,959],{}," plus ",[658,1011,1012],{},"AccountIdentity","), the ",[658,1015,1016],{},"account.overview",[597,1018,1019],{"href":87},"widget area"," and shortcuts to the other pages.",[593,1022,1023,1024,1026],{},"A module adds a page by registering the route and an item in the ",[658,1025,755],{}," menu. It never draws its own account\nnavigation.",[663,1028,700],{"id":1029},"public-site",[593,1031,1032],{},"Public pages, such as events, forms and content, are a different kind of page from app pages.",[593,1034,1035],{},[858,1036],{"alt":1037,"src":1038},"A public events page between the site header and the site footer.","\u002Fimages\u002Fux-patterns\u002Flayouts-and-navigation-public.png",[671,1040,1041,1054],{},[674,1042,1043],{},[677,1044,1045,1048,1051],{},[680,1046,1047],{},"Page",[680,1049,1050],{},"Container",[680,1052,1053],{},"Title",[693,1055,1056,1075],{},[677,1057,1058,1061,1070],{},[698,1059,1060],{},"Public",[698,1062,1063,1065,1066,1069],{},[658,1064,718],{},", with ",[658,1067,1068],{},"UPageSection"," for bands",[698,1071,1072],{},[658,1073,1074],{},"UPageHeader",[677,1076,1077,1080,1086],{},[698,1078,1079],{},"App (admin and account areas)",[698,1081,1082,1083],{},"A plain ",[658,1084,1085],{},"\u003Cdiv class=\"flex flex-col gap-4\">",[698,1087,1088],{},[658,1089,770],{},[593,1091,1092,1093,1095],{},"Do not mix them. The public header is a marketing-sized hero. ",[658,1094,770],{}," is a working title with actions.",[663,1097,1099],{"id":1098},"next-steps","Next steps",[614,1101,1102,1107,1112],{},[617,1103,1104,1106],{},[597,1105,101],{"href":102}," – build the list or detail page that goes in the area you picked.",[617,1108,1109,1111],{},[597,1110,486],{"href":487}," – add a page and its sidebar entry, step by step.",[617,1113,1114,1116],{},[597,1115,354],{"href":355}," – look up menu paths and how modules add items to them.",{"title":1118,"searchDepth":1119,"depth":1119,"links":1120},"",2,[1121,1122,1123,1124,1125],{"id":665,"depth":1119,"text":666},{"id":774,"depth":1119,"text":724},{"id":913,"depth":1119,"text":745},{"id":1029,"depth":1119,"text":700},{"id":1098,"depth":1119,"text":1099},"Which of the three areas a new screen belongs in, the layout it gets and where its navigation entry goes.","md",null,{},{"icon":99},{"title":96,"description":1126},"hJHTar6Uo04JZv4RLFBp9pBn-xOUSdclrgoYNGsbXSU",[1134,1136],{"title":86,"path":87,"stem":88,"description":1135,"icon":89,"children":-1},"The one word these docs use for each concept, what it means and which page explains it.",{"title":101,"path":102,"stem":103,"description":1137,"icon":104,"children":-1},"The shape of each kind of app page, and the loading, empty and error states every page shows.",1794503150607]