{"config":{"name":"Bricks Co","theme":{"tokens":{"grid.base":"4","safe-area.top":"env(safe-area-inset-top)","safe-area.bottom":"env(safe-area-inset-bottom)","safe-area.left":"env(safe-area-inset-left)","safe-area.right":"env(safe-area-inset-right)","spacing.0":"0px","spacing.1":"4px","spacing.2":"8px","spacing.3":"12px","spacing.4":"16px","spacing.5":"20px","spacing.6":"24px","spacing.7":"28px","spacing.8":"32px","spacing.10":"40px","spacing.12":"48px","spacing.16":"64px","spacing.20":"80px","spacing.24":"96px","spacing.32":"128px","spacing.neg-1":"-4px","spacing.neg-2":"-8px","spacing.neg-3":"-12px","spacing.neg-4":"-16px","spacing.neg-6":"-24px","spacing.neg-8":"-32px","font-size.micro":"4px","font-size.tiny":"8px","font-size.xs":"12px","font-size.sm":"16px","font-size.base":"16px","font-size.md":"20px","font-size.lg":"24px","font-size.xl":"28px","font-size.2xl":"32px","font-size.3xl":"40px","font-size.4xl":"48px","font-size.5xl":"64px","line-height.tight":"16px","line-height.sm":"20px","line-height.base":"24px","line-height.md":"28px","line-height.lg":"32px","line-height.xl":"36px","line-height.2xl":"40px","line-height.3xl":"48px","line-height.4xl":"56px","line-height.5xl":"64px","line-height.6xl":"80px","font-weight.thin":"100","font-weight.extralight":"200","font-weight.light":"300","font-weight.normal":"400","font-weight.medium":"500","font-weight.semibold":"600","font-weight.bold":"700","font-weight.extrabold":"800","font-weight.black":"900","letter-spacing.tighter":"-0.02em","letter-spacing.tight":"-0.01em","letter-spacing.normal":"0","letter-spacing.wide":"0.02em","letter-spacing.wider":"0.05em","letter-spacing.widest":"0.1em","radius.none":"0px","radius.sm":"4px","radius.md":"8px","radius.lg":"12px","radius.xl":"16px","radius.2xl":"20px","radius.full":"9999px","border-width.none":"0px","border-width.thin":"1px","border-width.medium":"2px","border-width.thick":"4px","icon-size.xs":"12px","icon-size.sm":"16px","icon-size.md":"20px","icon-size.base":"24px","icon-size.lg":"32px","icon-size.xl":"40px","icon-size.2xl":"48px","height.xs":"24px","height.sm":"32px","height.md":"36px","height.base":"40px","height.lg":"48px","height.xl":"56px","height.2xl":"64px","height.3xl":"80px","height.4xl":"96px","width.xs":"120px","width.sm":"160px","width.md":"240px","width.lg":"320px","width.xl":"480px","width.2xl":"640px","width.3xl":"800px","width.4xl":"960px","width.5xl":"1200px","width.full":"100%","shadows.none":"none","shadows.xs":"0 1px 2px rgba(0, 0, 0, 0.1)","shadows.sm":"0 2px 4px rgba(0, 0, 0, 0.1)","shadows.md":"0 4px 8px rgba(0, 0, 0, 0.15)","shadows.lg":"0 8px 16px rgba(0, 0, 0, 0.2)","shadows.xl":"0 12px 32px rgba(0, 0, 0, 0.25)","shadows.2xl":"0 16px 48px rgba(0, 0, 0, 0.3)","shadows.inner":"inset 0 2px 4px rgba(0, 0, 0, 0.1)","shadows.glow":"0 0 20px rgba(99, 102, 241, 0.3)","shadows.glow-accent2":"0 0 20px rgba(236, 72, 153, 0.3)","opacity.0":"0","opacity.5":"0.05","opacity.10":"0.1","opacity.20":"0.2","opacity.30":"0.3","opacity.40":"0.4","opacity.50":"0.5","opacity.60":"0.6","opacity.70":"0.7","opacity.80":"0.8","opacity.90":"0.9","opacity.100":"1","z-index.behind":"-1","z-index.base":"0","z-index.raised":"10","z-index.dropdown":"20","z-index.sticky":"30","z-index.overlay":"40","z-index.modal":"50","z-index.popover":"60","z-index.toast":"70","z-index.max":"100","transitions.instant":"0ms","transitions.fast":"100ms","transitions.normal":"150ms","transitions.smooth":"200ms","transitions.slow":"300ms","transitions.slower":"500ms","transitions.ease":"ease","transitions.ease-in":"ease-in","transitions.ease-out":"ease-out","transitions.ease-in-out":"ease-in-out","breakpoints.mobile":"480px","breakpoints.tablet":"768px","breakpoints.laptop":"1024px","breakpoints.desktop":"1280px","breakpoints.wide":"1536px","aspect-ratio.square":"1 / 1","aspect-ratio.photo":"4 / 3","aspect-ratio.video":"16 / 9","aspect-ratio.cinema":"21 / 9","colors.black":"#000000","colors.white":"#ffffff","colors.gray.50":"#fafafa","colors.gray.100":"#f5f5f5","colors.gray.200":"#e5e5e5","colors.gray.300":"#d4d4d4","colors.gray.400":"#a3a3a3","colors.gray.500":"#737373","colors.gray.600":"#525252","colors.gray.700":"#404040","colors.gray.800":"#262626","colors.gray.850":"#1a1a1a","colors.gray.900":"#141414","colors.gray.950":"#0a0a0a","colors.indigo.50":"#eef2ff","colors.indigo.100":"#e0e7ff","colors.indigo.200":"#c7d2fe","colors.indigo.300":"#a5b4fc","colors.indigo.400":"#818cf8","colors.indigo.500":"#6366f1","colors.indigo.600":"#4f46e5","colors.indigo.700":"#4338ca","colors.indigo.800":"#3730a3","colors.indigo.900":"#312e81","colors.pink.50":"#fdf2f8","colors.pink.100":"#fce7f3","colors.pink.200":"#fbcfe8","colors.pink.300":"#f9a8d4","colors.pink.400":"#f472b6","colors.pink.500":"#ec4899","colors.pink.600":"#db2777","colors.pink.700":"#be185d","colors.pink.800":"#9d174d","colors.pink.900":"#831843","colors.red.400":"#f87171","colors.red.500":"#ef4444","colors.red.600":"#dc2626","colors.green.400":"#4ade80","colors.green.500":"#22c55e","colors.green.600":"#16a34a","colors.amber.400":"#fbbf24","colors.amber.500":"#f59e0b","colors.amber.600":"#d97706","colors.blue.400":"#60a5fa","colors.blue.500":"#3b82f6","colors.blue.600":"#2563eb","semantic.bg":"#f8f8f8","semantic.surface":"#fcfbfc","semantic.surface-ghost":"rgba(255, 255, 255, 0.6)","semantic.surface-hover":"#f5f5f5","semantic.overlay":"rgba(0, 0, 0, 0.4)","semantic.text":"#1a1a1a","semantic.text-muted":"#666666","semantic.text-faint":"#888888","semantic.text-inverse":"#ffffff","semantic.accent":"#d0d0d0","semantic.accent-hover":"#c0c0c0","semantic.accent-text":"#1a1a1a","semantic.accent2":"#d0d0d0","semantic.accent2-hover":"#c0c0c0","semantic.border":"#cccccc","semantic.border-hover":"#aaaaaa","semantic.border-focus":"#6366f1","semantic.success":"#22c55e","semantic.success-text":"#4ade80","semantic.warning":"#f59e0b","semantic.warning-text":"#fbbf24","semantic.danger":"#ef4444","semantic.danger-text":"#f87171","semantic.info":"#3b82f6","semantic.info-text":"#60a5fa","semantic.font":"system-ui, -apple-system, sans-serif","semantic.font-mono":"'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace","components.nav.bg":"#fcfbfc","components.nav.border":"#cccccc","components.nav.link-height":"40px","components.nav.link-font-size":"16px","components.nav.link-font-weight":"500","components.nav.link-radius":"12px","components.nav.link-padding-x":"12px","components.nav.link-active-bg":"#d0d0d0","components.nav.link-active-color":"#1a1a1a","components.page.max-width":"800px","components.page.padding-x":"32px","components.page.padding-y":"40px","components.page.h1-size":"40px","components.page.h1-weight":"800","components.page.h1-line-height":"48px","components.page.h1-spacing":"-0.02em","components.page.h2-size":"32px","components.page.h2-weight":"700","components.page.h2-line-height":"40px","components.page.h3-size":"24px","components.page.h3-weight":"600","components.page.h3-line-height":"32px","components.page.body-size":"16px","components.page.body-line-height":"24px","components.page.body-weight":"400","components.button.height":"40px","components.button.padding-x":"20px","components.button.font-size":"16px","components.button.font-weight":"500","components.button.radius":"12px","components.button.bg":"#d0d0d0","components.button.color":"#1a1a1a","components.button.shadow":"0 4px 8px rgba(0, 0, 0, 0.15)","components.button.shadow-hover":"0 8px 16px rgba(0, 0, 0, 0.2)","components.input.height":"40px","components.input.padding-x":"12px","components.input.font-size":"16px","components.input.radius":"12px","components.input.bg":"#fcfbfc","components.input.color":"#1a1a1a","components.input.border":"#cccccc","components.input.border-focus":"#6366f1","components.input.focus-ring":"0 0 0 3px rgba(99, 102, 241, 0.15)","components.code.bg":"#fcfbfc","components.code.border":"#cccccc","components.code.radius":"8px","components.code.font":"'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace","components.code.font-size":"12px","components.command.height":"40px","components.command.bg":"#fcfbfc","components.command.border":"#cccccc","components.command.input-bg":"#f8f8f8","components.command.prompt-color":"#d0d0d0","components.command.font-size":"12px","components.sidebar.width":"240px","components.sidebar.logo-size":"32px","components.sidebar.title-size":"16px","components.sidebar.title-weight":"700","components.sidebar.header-padding":"20px","components.sidebar.avatar-size":"32px","components.panel.width":"320px","components.panel.header-font-size":"12px","components.panel.header-weight":"600","layout.nav":"sidebar"},"cssVariables":{"--grid-base":"4","--safe-area-top":"env(safe-area-inset-top)","--safe-area-bottom":"env(safe-area-inset-bottom)","--safe-area-left":"env(safe-area-inset-left)","--safe-area-right":"env(safe-area-inset-right)","--spacing-0":"0px","--spacing-1":"4px","--spacing-2":"8px","--spacing-3":"12px","--spacing-4":"16px","--spacing-5":"20px","--spacing-6":"24px","--spacing-7":"28px","--spacing-8":"32px","--spacing-10":"40px","--spacing-12":"48px","--spacing-16":"64px","--spacing-20":"80px","--spacing-24":"96px","--spacing-32":"128px","--spacing-neg-1":"-4px","--spacing-neg-2":"-8px","--spacing-neg-3":"-12px","--spacing-neg-4":"-16px","--spacing-neg-6":"-24px","--spacing-neg-8":"-32px","--font-size-micro":"4px","--font-size-tiny":"8px","--font-size-xs":"12px","--font-size-sm":"16px","--font-size-base":"16px","--font-size-md":"20px","--font-size-lg":"24px","--font-size-xl":"28px","--font-size-2xl":"32px","--font-size-3xl":"40px","--font-size-4xl":"48px","--font-size-5xl":"64px","--line-height-tight":"16px","--line-height-sm":"20px","--line-height-base":"24px","--line-height-md":"28px","--line-height-lg":"32px","--line-height-xl":"36px","--line-height-2xl":"40px","--line-height-3xl":"48px","--line-height-4xl":"56px","--line-height-5xl":"64px","--line-height-6xl":"80px","--font-weight-thin":"100","--font-weight-extralight":"200","--font-weight-light":"300","--font-weight-normal":"400","--font-weight-medium":"500","--font-weight-semibold":"600","--font-weight-bold":"700","--font-weight-extrabold":"800","--font-weight-black":"900","--letter-spacing-tighter":"-0.02em","--letter-spacing-tight":"-0.01em","--letter-spacing-normal":"0","--letter-spacing-wide":"0.02em","--letter-spacing-wider":"0.05em","--letter-spacing-widest":"0.1em","--radius-none":"0px","--radius-sm":"4px","--radius-md":"8px","--radius-lg":"12px","--radius-xl":"16px","--radius-2xl":"20px","--radius-full":"9999px","--border-width-none":"0px","--border-width-thin":"1px","--border-width-medium":"2px","--border-width-thick":"4px","--icon-size-xs":"12px","--icon-size-sm":"16px","--icon-size-md":"20px","--icon-size-base":"24px","--icon-size-lg":"32px","--icon-size-xl":"40px","--icon-size-2xl":"48px","--height-xs":"24px","--height-sm":"32px","--height-md":"36px","--height-base":"40px","--height-lg":"48px","--height-xl":"56px","--height-2xl":"64px","--height-3xl":"80px","--height-4xl":"96px","--width-xs":"120px","--width-sm":"160px","--width-md":"240px","--width-lg":"320px","--width-xl":"480px","--width-2xl":"640px","--width-3xl":"800px","--width-4xl":"960px","--width-5xl":"1200px","--width-full":"100%","--shadows-none":"none","--shadows-xs":"0 1px 2px rgba(0, 0, 0, 0.1)","--shadows-sm":"0 2px 4px rgba(0, 0, 0, 0.1)","--shadows-md":"0 4px 8px rgba(0, 0, 0, 0.15)","--shadows-lg":"0 8px 16px rgba(0, 0, 0, 0.2)","--shadows-xl":"0 12px 32px rgba(0, 0, 0, 0.25)","--shadows-2xl":"0 16px 48px rgba(0, 0, 0, 0.3)","--shadows-inner":"inset 0 2px 4px rgba(0, 0, 0, 0.1)","--shadows-glow":"0 0 20px rgba(99, 102, 241, 0.3)","--shadows-glow-accent2":"0 0 20px rgba(236, 72, 153, 0.3)","--opacity-0":"0","--opacity-5":"0.05","--opacity-10":"0.1","--opacity-20":"0.2","--opacity-30":"0.3","--opacity-40":"0.4","--opacity-50":"0.5","--opacity-60":"0.6","--opacity-70":"0.7","--opacity-80":"0.8","--opacity-90":"0.9","--opacity-100":"1","--z-index-behind":"-1","--z-index-base":"0","--z-index-raised":"10","--z-index-dropdown":"20","--z-index-sticky":"30","--z-index-overlay":"40","--z-index-modal":"50","--z-index-popover":"60","--z-index-toast":"70","--z-index-max":"100","--transitions-instant":"0ms","--transitions-fast":"100ms","--transitions-normal":"150ms","--transitions-smooth":"200ms","--transitions-slow":"300ms","--transitions-slower":"500ms","--transitions-ease":"ease","--transitions-ease-in":"ease-in","--transitions-ease-out":"ease-out","--transitions-ease-in-out":"ease-in-out","--breakpoints-mobile":"480px","--breakpoints-tablet":"768px","--breakpoints-laptop":"1024px","--breakpoints-desktop":"1280px","--breakpoints-wide":"1536px","--aspect-ratio-square":"1 / 1","--aspect-ratio-photo":"4 / 3","--aspect-ratio-video":"16 / 9","--aspect-ratio-cinema":"21 / 9","--colors-black":"#000000","--colors-white":"#ffffff","--colors-gray-50":"#fafafa","--colors-gray-100":"#f5f5f5","--colors-gray-200":"#e5e5e5","--colors-gray-300":"#d4d4d4","--colors-gray-400":"#a3a3a3","--colors-gray-500":"#737373","--colors-gray-600":"#525252","--colors-gray-700":"#404040","--colors-gray-800":"#262626","--colors-gray-850":"#1a1a1a","--colors-gray-900":"#141414","--colors-gray-950":"#0a0a0a","--colors-indigo-50":"#eef2ff","--colors-indigo-100":"#e0e7ff","--colors-indigo-200":"#c7d2fe","--colors-indigo-300":"#a5b4fc","--colors-indigo-400":"#818cf8","--colors-indigo-500":"#6366f1","--colors-indigo-600":"#4f46e5","--colors-indigo-700":"#4338ca","--colors-indigo-800":"#3730a3","--colors-indigo-900":"#312e81","--colors-pink-50":"#fdf2f8","--colors-pink-100":"#fce7f3","--colors-pink-200":"#fbcfe8","--colors-pink-300":"#f9a8d4","--colors-pink-400":"#f472b6","--colors-pink-500":"#ec4899","--colors-pink-600":"#db2777","--colors-pink-700":"#be185d","--colors-pink-800":"#9d174d","--colors-pink-900":"#831843","--colors-red-400":"#f87171","--colors-red-500":"#ef4444","--colors-red-600":"#dc2626","--colors-green-400":"#4ade80","--colors-green-500":"#22c55e","--colors-green-600":"#16a34a","--colors-amber-400":"#fbbf24","--colors-amber-500":"#f59e0b","--colors-amber-600":"#d97706","--colors-blue-400":"#60a5fa","--colors-blue-500":"#3b82f6","--colors-blue-600":"#2563eb","--bg":"#f8f8f8","--surface":"#fcfbfc","--surface-ghost":"rgba(255, 255, 255, 0.6)","--surface-hover":"#f5f5f5","--overlay":"rgba(0, 0, 0, 0.4)","--text":"#1a1a1a","--text-muted":"#666666","--text-faint":"#888888","--text-inverse":"#ffffff","--accent":"#d0d0d0","--accent-hover":"#c0c0c0","--accent-text":"#1a1a1a","--accent2":"#d0d0d0","--accent2-hover":"#c0c0c0","--border":"#cccccc","--border-hover":"#aaaaaa","--border-focus":"#6366f1","--success":"#22c55e","--success-text":"#4ade80","--warning":"#f59e0b","--warning-text":"#fbbf24","--danger":"#ef4444","--danger-text":"#f87171","--info":"#3b82f6","--info-text":"#60a5fa","--font":"system-ui, -apple-system, sans-serif","--font-mono":"'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace","--nav-bg":"#fcfbfc","--nav-border":"#cccccc","--nav-link-height":"40px","--nav-link-font-size":"16px","--nav-link-font-weight":"500","--nav-link-radius":"12px","--nav-link-padding-x":"12px","--nav-link-active-bg":"#d0d0d0","--nav-link-active-color":"#1a1a1a","--page-max-width":"800px","--page-padding-x":"32px","--page-padding-y":"40px","--page-h1-size":"40px","--page-h1-weight":"800","--page-h1-line-height":"48px","--page-h1-spacing":"-0.02em","--page-h2-size":"32px","--page-h2-weight":"700","--page-h2-line-height":"40px","--page-h3-size":"24px","--page-h3-weight":"600","--page-h3-line-height":"32px","--page-body-size":"16px","--page-body-line-height":"24px","--page-body-weight":"400","--button-height":"40px","--button-padding-x":"20px","--button-font-size":"16px","--button-font-weight":"500","--button-radius":"12px","--button-bg":"#d0d0d0","--button-color":"#1a1a1a","--button-shadow":"0 4px 8px rgba(0, 0, 0, 0.15)","--button-shadow-hover":"0 8px 16px rgba(0, 0, 0, 0.2)","--input-height":"40px","--input-padding-x":"12px","--input-font-size":"16px","--input-radius":"12px","--input-bg":"#fcfbfc","--input-color":"#1a1a1a","--input-border":"#cccccc","--input-border-focus":"#6366f1","--input-focus-ring":"0 0 0 3px rgba(99, 102, 241, 0.15)","--code-bg":"#fcfbfc","--code-border":"#cccccc","--code-radius":"8px","--code-font":"'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace","--code-font-size":"12px","--command-height":"40px","--command-bg":"#fcfbfc","--command-border":"#cccccc","--command-input-bg":"#f8f8f8","--command-prompt-color":"#d0d0d0","--command-font-size":"12px","--sidebar-width":"240px","--sidebar-logo-size":"32px","--sidebar-title-size":"16px","--sidebar-title-weight":"700","--sidebar-header-padding":"20px","--sidebar-avatar-size":"32px","--panel-width":"320px","--panel-header-font-size":"12px","--panel-header-weight":"600","--layout-nav":"sidebar"},"nav":"sidebar"},"version":"1.0.0","navigation":[{"icon":"๐Ÿงฑ","label":"Start","route":"/workshop/brick-builder"},{"icon":"๐Ÿ—๏ธ","label":"Workshop","route":"/workshop","hidden_for_roles":["district-admin","principal","vice-principal","department-head","registrar","teacher","substitute-teacher","behavior","front-office","nurse","counselor","school-coach","parent-guardian","student-role"],"hidden_for_roles_unless":["admin","superuser"]},{"icon":"๐Ÿช","label":"Marketplace","route":"/workshop/marketplace"},{"group":"Brickyard","icon":"๐Ÿงฑ","items":[]},{"group":"Agents","icon":"๐Ÿค–","items":[]},{"group":"Content","icon":"๐ŸŽจ","items":[{"icon":"โœจ","label":"AI Studio","route":"/workshop/ai-studio","children":[{"icon":"๐Ÿ’ฌ","label":"Chat","route":"/workshop/ai-studio/chat"},{"icon":"โœ๏ธ","label":"Write for me","route":"/workshop/ai-studio/write"}]},{"icon":"๐Ÿง ","label":"Content Studio","route":"/workshop/content-studio"},{"icon":"๐ŸŽจ","label":"Appearance Studio","route":"/workshop/appearance-studio","children":[{"icon":"๐ŸŽจ","label":"Brand & Colors","route":"/workshop/appearance-studio/colors"},{"icon":"โœจ","label":"Build Skin","route":"/workshop/appearance-studio/build"},{"icon":"๐Ÿ—‚๏ธ","label":"Skins","route":"/workshop/appearance-studio/skins"}]},{"icon":"๐Ÿ“„","label":"My Documents","route":"/workshop/documents"},{"icon":"๐Ÿ–ผ๏ธ","label":"Media Library","route":"/workshop/media-library"}]},{"group":"Communication","icon":"๐Ÿ””","items":[{"icon":"๐Ÿ“จ","label":"Messaging","route":"/workshop/messaging"}]},{"group":"Admin","icon":"๐Ÿ› ๏ธ","items":[{"icon":"๐Ÿงญ","label":"Decision Plane","route":"/workshop/admin/decision-plane","roles":["superuser"]},{"icon":"๐Ÿ”","label":"Workflows","route":"/workshop/workflows"},{"icon":"๐Ÿ“‘","label":"Document Management","route":"/workshop/document-management","roles":["admin","superuser","document_manager","principal","vice-principal"],"children":[{"icon":"โš™๏ธ","label":"Configuration","route":"/workshop/document-management/configuration","children":[{"icon":"๐Ÿ“‘","label":"Document types","route":"/workshop/document-management/configuration/documents"},{"icon":"๐Ÿ—‚๏ธ","label":"Categories","route":"/workshop/document-management/configuration/categories"}]},{"icon":"โ™ป๏ธ","label":"Lifecycle","route":"/workshop/document-management/lifecycle","children":[{"icon":"๐Ÿ—„๏ธ","label":"Retention policies","route":"/workshop/document-management/lifecycle/retention"},{"icon":"๐Ÿงพ","label":"Audit log","route":"/workshop/document-management/lifecycle/audit"}]}]},{"icon":"โš™๏ธ","label":"Settings","route":"/workshop/settings"},{"icon":"๐Ÿง‘โ€๐Ÿ’ป","label":"Developer Studio","route":"/workshop/developer-studio","children":[{"icon":"๐Ÿ“ค","label":"Submissions","route":"/workshop/developer-studio/submissions"},{"icon":"โœ๏ธ","label":"Customize","route":"/workshop/developer-studio/customize"},{"icon":"๐Ÿ“ฆ","label":"Published","route":"/workshop/developer-studio/published"}]},{"icon":"๐ŸŽญ","label":"Access Control","route":"/workshop/access-control"},{"icon":"๐Ÿ›ก๏ธ","label":"Security","route":"/workshop/security","children":[{"icon":"๐Ÿšซ","label":"Blacklist","route":"/workshop/security/blacklist"},{"icon":"๐Ÿ•ต๏ธ","label":"Audit Trail","route":"/workshop/security/audit-trail"},{"icon":"๐Ÿ”‘","label":"Password Reset","route":"/workshop/security/password-reset"}]},{"icon":"๐Ÿ–ฅ๏ธ","label":"System","route":"/workshop/system","children":[{"icon":"โฑ๏ธ","label":"Server logs","route":"/workshop/system/server-logs"},{"icon":"๐Ÿ—„๏ธ","label":"Database","route":"/workshop/system/database"},{"icon":"๐Ÿค–","label":"AI Usage","route":"/workshop/system/ai-usage","roles":["superuser"]},{"icon":"๐Ÿงจ","label":"Reset","route":"/workshop/system/reset"}]},{"icon":"๐Ÿง ","label":"Social Brain","route":"/workshop/system/social-brain","children":[{"icon":"๐Ÿ“Š","label":"Overview","route":"/workshop/system/social-brain"},{"icon":"๐Ÿ“š","label":"Knowledge","route":"/workshop/system/social-brain/knowledge"},{"icon":"โœ…","label":"Review Queue","route":"/workshop/system/social-brain/review"},{"icon":"๐Ÿ“ฆ","label":"Imports","route":"/workshop/system/social-brain/imports"},{"icon":"๐Ÿš€","label":"Releases","route":"/workshop/system/social-brain/releases"},{"icon":"๐Ÿ”ญ","label":"Watchtower","route":"/workshop/system/social-brain/watchtower"}]},{"icon":"๐Ÿ“ก","label":"Communication","route":"/workshop/communication","children":[{"icon":"โ˜Ž๏ธ","label":"Twilio","route":"/workshop/admin/twilio","children":[{"icon":"๐Ÿ“Š","label":"Dashboard","route":"/workshop/admin/twilio"},{"icon":"๐Ÿงพ","label":"Details","route":"/workshop/admin/twilio/details"},{"icon":"โš ๏ธ","label":"Usage Alerts","route":"/workshop/admin/twilio/alerts"}]},{"icon":"๐Ÿ“ฑ","label":"SMS Configuration","route":"/workshop/sms-configuration"},{"icon":"๐Ÿ“ง","label":"Email Studio","route":"/workshop/email-studio","children":[{"icon":"โœ‰๏ธ","label":"Templates","route":"/workshop/email-studio"},{"icon":"โš™๏ธ","label":"Sending settings","route":"/workshop/email-studio/settings"},{"icon":"๐Ÿ“ฅ","label":"Incoming Settings","route":"/workshop/email-studio/incoming-settings"},{"icon":"๐Ÿ”","label":"Drip Workflows","route":"/workshop/email-studio/drip-workflows"},{"icon":"๐Ÿ’ง","label":"Email Dripping","route":"/workshop/email-studio/drips"}]}]},{"icon":"๐Ÿ””","label":"Notifications","route":"/workshop/notifications","children":[{"icon":"โž•","label":"Create Notification","route":"/workshop/notifications/create"},{"icon":"๐Ÿ“ค","label":"Sent Notifications","route":"/workshop/notifications/sent"}]},{"icon":"๐Ÿงฑ","label":"Marketplace Controls","route":"/workshop/admin/marketplace"},{"icon":"๐Ÿ’ณ","label":"Billing","route":"/workshop/admin/billing","children":[{"icon":"๐Ÿ“Š","label":"Dashboard","route":"/workshop/admin/billing"},{"icon":"๐Ÿงพ","label":"Invoices","route":"/workshop/admin/billing/invoices"},{"icon":"๐Ÿ‘ฅ","label":"Billing Profiles","route":"/workshop/admin/billing/profiles"},{"icon":"๐Ÿ’ณ","label":"Stripe Control","route":"/workshop/admin/billing/stripe-control"}]},{"icon":"๐Ÿ‘ฅ","label":"Tenants","route":"/workshop/tenants"},{"icon":"๐Ÿข","label":"Organizations","route":"/workshop/organizations"},{"icon":"๐Ÿ‘ค","label":"Users","route":"/workshop/users"}]},{"group":"Developer Tools","icon":"๐Ÿ› ๏ธ","items":[{"icon":"๐Ÿงญ","label":"Decision Plane","route":"/workshop/developer-tools/decision-plane"},{"icon":"๐Ÿ’ณ","label":"Checkout tester","route":"/workshop/developer-tools/stripe-checkout"},{"icon":"๐Ÿ’ต","label":"Payment wall tester","route":"/workshop/developer-tools/payment-wall"},{"icon":"โณ","label":"Loading screen","route":"/workshop/developer-tools/loading"},{"icon":"๐Ÿงฑ","label":"Bricks","route":"/workshop/developer-tools/bricks"},{"icon":"๐Ÿ”","label":"Stale","route":"/workshop/developer-tools/stale"},{"icon":"๐Ÿ“","label":"Forms","route":"/workshop/developer-tools/forms"},{"icon":"๐ŸŒ","label":"API","route":"/workshop/developer-tools/api"},{"icon":"๐Ÿ”€","label":"Conditional","route":"/workshop/developer-tools/conditional"},{"icon":"๐Ÿ”","label":"Loops","route":"/workshop/developer-tools/loops"},{"icon":"๐Ÿ“Ž","label":"Includes","route":"/workshop/developer-tools/includes"},{"icon":"๐Ÿ”€","label":"Page Flow","route":"/workshop/developer-tools/page-flow"},{"icon":"๐ŸŸ๏ธ","label":"Athletics Ops Prototype","route":"/workshop/developer-tools/athletics-ops-prototype"},{"icon":"๐Ÿšจ","label":"Failing integration","route":"/workshop/developer-tools/failing-integration"},{"icon":"๐Ÿ“","label":"Editor","route":"/workshop/developer-tools/editor"},{"icon":"๐Ÿ“‚","label":"Google Sync","route":"/workshop/developer-tools/google-sync"},{"icon":"๐ŸŽ“","label":"Endorsement Picker","route":"/workshop/developer-tools/endorsement"},{"icon":"๐Ÿ“š","label":"Course selector","route":"/workshop/developer-tools/course-selector"},{"icon":"๐ŸŽจ","label":"Design Radials","route":"/workshop/developer-tools/design-radials"},{"icon":"โŒจ๏ธ","label":"Shortcuts","route":"/workshop/developer-tools/shortcuts"},{"icon":"๐Ÿ”","label":"Auth","route":"/workshop/developer-tools/auth"},{"icon":"๐Ÿ“Š","label":"Charts","route":"/workshop/developer-tools/charts"},{"icon":"๐Ÿ“„","label":"Pagination","route":"/workshop/developer-tools/pagination"},{"icon":"๐Ÿ—‚๏ธ","label":"Tabs","route":"/workshop/developer-tools/tabs"},{"icon":"๐Ÿช—","label":"Accordion","route":"/workshop/developer-tools/accordion"},{"icon":"๐Ÿ’ฌ","label":"Callouts","route":"/workshop/developer-tools/callouts"},{"icon":"๐Ÿ•","label":"Timeline pattern","route":"/workshop/developer-tools/timeline"},{"icon":"๐Ÿ“ˆ","label":"Stat Cards","route":"/workshop/developer-tools/stats"},{"icon":"๐Ÿ“ถ","label":"Progress Bars","route":"/workshop/developer-tools/progress"}]}]},"layout":{"navigation":[{"icon":"๐Ÿงฑ","label":"Start","route":"/workshop/brick-builder"},{"icon":"๐Ÿ—๏ธ","label":"Workshop","route":"/workshop","hidden_for_roles":["district-admin","principal","vice-principal","department-head","registrar","teacher","substitute-teacher","behavior","front-office","nurse","counselor","school-coach","parent-guardian","student-role"],"hidden_for_roles_unless":["admin","superuser"]},{"icon":"๐Ÿช","label":"Marketplace","route":"/workshop/marketplace"},{"group":"Brickyard","icon":"๐Ÿงฑ","items":[]},{"group":"Agents","icon":"๐Ÿค–","items":[]},{"group":"Content","icon":"๐ŸŽจ","items":[{"icon":"โœจ","label":"AI Studio","route":"/workshop/ai-studio","children":[{"icon":"๐Ÿ’ฌ","label":"Chat","route":"/workshop/ai-studio/chat"},{"icon":"โœ๏ธ","label":"Write for me","route":"/workshop/ai-studio/write"}]},{"icon":"๐Ÿง ","label":"Content Studio","route":"/workshop/content-studio"},{"icon":"๐ŸŽจ","label":"Appearance Studio","route":"/workshop/appearance-studio","children":[{"icon":"๐ŸŽจ","label":"Brand & Colors","route":"/workshop/appearance-studio/colors"},{"icon":"โœจ","label":"Build Skin","route":"/workshop/appearance-studio/build"},{"icon":"๐Ÿ—‚๏ธ","label":"Skins","route":"/workshop/appearance-studio/skins"}]},{"icon":"๐Ÿ“„","label":"My Documents","route":"/workshop/documents"},{"icon":"๐Ÿ–ผ๏ธ","label":"Media Library","route":"/workshop/media-library"}]},{"group":"Communication","icon":"๐Ÿ””","items":[{"icon":"๐Ÿ“จ","label":"Messaging","route":"/workshop/messaging"}]},{"group":"Admin","icon":"๐Ÿ› ๏ธ","items":[{"icon":"๐Ÿงญ","label":"Decision Plane","route":"/workshop/admin/decision-plane","roles":["superuser"]},{"icon":"๐Ÿ”","label":"Workflows","route":"/workshop/workflows"},{"icon":"๐Ÿ“‘","label":"Document Management","route":"/workshop/document-management","roles":["admin","superuser","document_manager","principal","vice-principal"],"children":[{"icon":"โš™๏ธ","label":"Configuration","route":"/workshop/document-management/configuration","children":[{"icon":"๐Ÿ“‘","label":"Document types","route":"/workshop/document-management/configuration/documents"},{"icon":"๐Ÿ—‚๏ธ","label":"Categories","route":"/workshop/document-management/configuration/categories"}]},{"icon":"โ™ป๏ธ","label":"Lifecycle","route":"/workshop/document-management/lifecycle","children":[{"icon":"๐Ÿ—„๏ธ","label":"Retention policies","route":"/workshop/document-management/lifecycle/retention"},{"icon":"๐Ÿงพ","label":"Audit log","route":"/workshop/document-management/lifecycle/audit"}]}]},{"icon":"โš™๏ธ","label":"Settings","route":"/workshop/settings"},{"icon":"๐Ÿง‘โ€๐Ÿ’ป","label":"Developer Studio","route":"/workshop/developer-studio","children":[{"icon":"๐Ÿ“ค","label":"Submissions","route":"/workshop/developer-studio/submissions"},{"icon":"โœ๏ธ","label":"Customize","route":"/workshop/developer-studio/customize"},{"icon":"๐Ÿ“ฆ","label":"Published","route":"/workshop/developer-studio/published"}]},{"icon":"๐ŸŽญ","label":"Access Control","route":"/workshop/access-control"},{"icon":"๐Ÿ›ก๏ธ","label":"Security","route":"/workshop/security","children":[{"icon":"๐Ÿšซ","label":"Blacklist","route":"/workshop/security/blacklist"},{"icon":"๐Ÿ•ต๏ธ","label":"Audit Trail","route":"/workshop/security/audit-trail"},{"icon":"๐Ÿ”‘","label":"Password Reset","route":"/workshop/security/password-reset"}]},{"icon":"๐Ÿ–ฅ๏ธ","label":"System","route":"/workshop/system","children":[{"icon":"โฑ๏ธ","label":"Server logs","route":"/workshop/system/server-logs"},{"icon":"๐Ÿ—„๏ธ","label":"Database","route":"/workshop/system/database"},{"icon":"๐Ÿค–","label":"AI Usage","route":"/workshop/system/ai-usage","roles":["superuser"]},{"icon":"๐Ÿงจ","label":"Reset","route":"/workshop/system/reset"}]},{"icon":"๐Ÿง ","label":"Social Brain","route":"/workshop/system/social-brain","children":[{"icon":"๐Ÿ“Š","label":"Overview","route":"/workshop/system/social-brain"},{"icon":"๐Ÿ“š","label":"Knowledge","route":"/workshop/system/social-brain/knowledge"},{"icon":"โœ…","label":"Review Queue","route":"/workshop/system/social-brain/review"},{"icon":"๐Ÿ“ฆ","label":"Imports","route":"/workshop/system/social-brain/imports"},{"icon":"๐Ÿš€","label":"Releases","route":"/workshop/system/social-brain/releases"},{"icon":"๐Ÿ”ญ","label":"Watchtower","route":"/workshop/system/social-brain/watchtower"}]},{"icon":"๐Ÿ“ก","label":"Communication","route":"/workshop/communication","children":[{"icon":"โ˜Ž๏ธ","label":"Twilio","route":"/workshop/admin/twilio","children":[{"icon":"๐Ÿ“Š","label":"Dashboard","route":"/workshop/admin/twilio"},{"icon":"๐Ÿงพ","label":"Details","route":"/workshop/admin/twilio/details"},{"icon":"โš ๏ธ","label":"Usage Alerts","route":"/workshop/admin/twilio/alerts"}]},{"icon":"๐Ÿ“ฑ","label":"SMS Configuration","route":"/workshop/sms-configuration"},{"icon":"๐Ÿ“ง","label":"Email Studio","route":"/workshop/email-studio","children":[{"icon":"โœ‰๏ธ","label":"Templates","route":"/workshop/email-studio"},{"icon":"โš™๏ธ","label":"Sending settings","route":"/workshop/email-studio/settings"},{"icon":"๐Ÿ“ฅ","label":"Incoming Settings","route":"/workshop/email-studio/incoming-settings"},{"icon":"๐Ÿ”","label":"Drip Workflows","route":"/workshop/email-studio/drip-workflows"},{"icon":"๐Ÿ’ง","label":"Email Dripping","route":"/workshop/email-studio/drips"}]}]},{"icon":"๐Ÿ””","label":"Notifications","route":"/workshop/notifications","children":[{"icon":"โž•","label":"Create Notification","route":"/workshop/notifications/create"},{"icon":"๐Ÿ“ค","label":"Sent Notifications","route":"/workshop/notifications/sent"}]},{"icon":"๐Ÿงฑ","label":"Marketplace Controls","route":"/workshop/admin/marketplace"},{"icon":"๐Ÿ’ณ","label":"Billing","route":"/workshop/admin/billing","children":[{"icon":"๐Ÿ“Š","label":"Dashboard","route":"/workshop/admin/billing"},{"icon":"๐Ÿงพ","label":"Invoices","route":"/workshop/admin/billing/invoices"},{"icon":"๐Ÿ‘ฅ","label":"Billing Profiles","route":"/workshop/admin/billing/profiles"},{"icon":"๐Ÿ’ณ","label":"Stripe Control","route":"/workshop/admin/billing/stripe-control"}]},{"icon":"๐Ÿ‘ฅ","label":"Tenants","route":"/workshop/tenants"},{"icon":"๐Ÿข","label":"Organizations","route":"/workshop/organizations"},{"icon":"๐Ÿ‘ค","label":"Users","route":"/workshop/users"}]},{"group":"Developer Tools","icon":"๐Ÿ› ๏ธ","items":[{"icon":"๐Ÿงญ","label":"Decision Plane","route":"/workshop/developer-tools/decision-plane"},{"icon":"๐Ÿ’ณ","label":"Checkout tester","route":"/workshop/developer-tools/stripe-checkout"},{"icon":"๐Ÿ’ต","label":"Payment wall tester","route":"/workshop/developer-tools/payment-wall"},{"icon":"โณ","label":"Loading screen","route":"/workshop/developer-tools/loading"},{"icon":"๐Ÿงฑ","label":"Bricks","route":"/workshop/developer-tools/bricks"},{"icon":"๐Ÿ”","label":"Stale","route":"/workshop/developer-tools/stale"},{"icon":"๐Ÿ“","label":"Forms","route":"/workshop/developer-tools/forms"},{"icon":"๐ŸŒ","label":"API","route":"/workshop/developer-tools/api"},{"icon":"๐Ÿ”€","label":"Conditional","route":"/workshop/developer-tools/conditional"},{"icon":"๐Ÿ”","label":"Loops","route":"/workshop/developer-tools/loops"},{"icon":"๐Ÿ“Ž","label":"Includes","route":"/workshop/developer-tools/includes"},{"icon":"๐Ÿ”€","label":"Page Flow","route":"/workshop/developer-tools/page-flow"},{"icon":"๐ŸŸ๏ธ","label":"Athletics Ops Prototype","route":"/workshop/developer-tools/athletics-ops-prototype"},{"icon":"๐Ÿšจ","label":"Failing integration","route":"/workshop/developer-tools/failing-integration"},{"icon":"๐Ÿ“","label":"Editor","route":"/workshop/developer-tools/editor"},{"icon":"๐Ÿ“‚","label":"Google Sync","route":"/workshop/developer-tools/google-sync"},{"icon":"๐ŸŽ“","label":"Endorsement Picker","route":"/workshop/developer-tools/endorsement"},{"icon":"๐Ÿ“š","label":"Course selector","route":"/workshop/developer-tools/course-selector"},{"icon":"๐ŸŽจ","label":"Design Radials","route":"/workshop/developer-tools/design-radials"},{"icon":"โŒจ๏ธ","label":"Shortcuts","route":"/workshop/developer-tools/shortcuts"},{"icon":"๐Ÿ”","label":"Auth","route":"/workshop/developer-tools/auth"},{"icon":"๐Ÿ“Š","label":"Charts","route":"/workshop/developer-tools/charts"},{"icon":"๐Ÿ“„","label":"Pagination","route":"/workshop/developer-tools/pagination"},{"icon":"๐Ÿ—‚๏ธ","label":"Tabs","route":"/workshop/developer-tools/tabs"},{"icon":"๐Ÿช—","label":"Accordion","route":"/workshop/developer-tools/accordion"},{"icon":"๐Ÿ’ฌ","label":"Callouts","route":"/workshop/developer-tools/callouts"},{"icon":"๐Ÿ•","label":"Timeline pattern","route":"/workshop/developer-tools/timeline"},{"icon":"๐Ÿ“ˆ","label":"Stat Cards","route":"/workshop/developer-tools/stats"},{"icon":"๐Ÿ“ถ","label":"Progress Bars","route":"/workshop/developer-tools/progress"}]}],"leftSidebar":{"width":"208px","header":{"title":"Bricks Co","site":"/workshop"},"nav":true,"footer":{"user":{"name":"Super Admin","avatar":"๐Ÿ‘ค"},"links":[{"label":"About","icon":"โ„น๏ธ","route":"/workshop/about"},{"label":"Profile","icon":"๐Ÿ‘ค","route":"/workshop/profile"},{"label":"Logout","icon":"๐Ÿšช","route":"/logout"}]}},"rightSidebar":{"width":"320px","visible":true,"title":"Details"},"search":{"enabled":true,"position":"top","placeholder":"Search pages, skills, anything..."},"commandEnabled":true},"pages":[{"title":"Two-Factor Authentication","route":"/2fa-verify","pageLayout":"fullscreen","contentHtml":"

Two-Factor Authentication

\n","searchText":"Two-Factor Authentication","state":{"code":"","error":"","loading":false},"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ” Two-Factor Authentication
\n

Enter the 6-digit code from your authenticator app

\n\n
{error}
\n\n
\n
\n \n \n
\n \n
\n\n

\n Back to sign in\n

\n
\n
\n\n
"},"actions":[{"name":"verifyCode","code":"var pending = null;\ntry { pending = sessionStorage.getItem(\"bricks.2fa_pending\"); } catch(e) {}\nif (!pending) {\n return { code: \"\", error: \"Session expired. Please sign in again.\", loading: false };\n}\nif (state.code.length !== 6) {\n return { code: state.code, error: \"Enter a 6-digit code\", loading: false };\n}\ntry {\n var res = await fetch(\"/api/auth/2fa/verify\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ pending_token: pending, code: state.code }),\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (res.ok && data.user) {\n var session = { name: data.user.name, tenant_name: data.user.tenant_name || undefined, avatar_url: data.user.avatar_url || undefined };\n try {\n sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session));\n sessionStorage.removeItem(\"bricks.2fa_pending\");\n } catch(e) {}\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n return { code: \"\", error: \"\", loading: false };\n }\n return { code: \"\", error: data.error || \"Invalid code. Please try again.\", loading: false };\n} catch(e) {\n return { code: state.code, error: \"Server error. Please try again.\", loading: false };\n}"}],"styles":"h1 { display: none; }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Two-Factor Authentication\nroute: /2fa-verify\nlayout: fullscreen\n---\n\n# Two-Factor Authentication\n\n```state\n{ \"code\": \"\", \"error\": \"\", \"loading\": false }\n```\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ” Two-Factor Authentication
\n

Enter the 6-digit code from your authenticator app

\n\n
{error}
\n\n
\n
\n \n \n
\n \n
\n\n

\n Back to sign in\n

\n
\n
\n\n
\n```\n\n```action:verifyCode\nvar pending = null;\ntry { pending = sessionStorage.getItem(\"bricks.2fa_pending\"); } catch(e) {}\nif (!pending) {\n return { code: \"\", error: \"Session expired. Please sign in again.\", loading: false };\n}\nif (state.code.length !== 6) {\n return { code: state.code, error: \"Enter a 6-digit code\", loading: false };\n}\ntry {\n var res = await fetch(\"/api/auth/2fa/verify\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ pending_token: pending, code: state.code }),\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (res.ok && data.user) {\n var session = { name: data.user.name, tenant_name: data.user.tenant_name || undefined, avatar_url: data.user.avatar_url || undefined };\n try {\n sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session));\n sessionStorage.removeItem(\"bricks.2fa_pending\");\n } catch(e) {}\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n return { code: \"\", error: \"\", loading: false };\n }\n return { code: \"\", error: data.error || \"Invalid code. Please try again.\", loading: false };\n} catch(e) {\n return { code: state.code, error: \"Server error. Please try again.\", loading: false };\n}\n```\n\n```style\nh1 { display: none; }\n```\n"},{"title":"Unauthorized","route":"/401","pageLayout":"fullscreen","contentHtml":"

Unauthorized

\n","searchText":"Unauthorized","state":null,"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ”’ Authentication required
\n

You need to sign in to access this page.

\n Sign in\n

\n Back to home\n

\n
\n
\n\n
"},"actions":[],"styles":"h1 { display: none; }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Unauthorized\nroute: /401\nlayout: fullscreen\n---\n\n# Unauthorized\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ”’ Authentication required
\n

You need to sign in to access this page.

\n Sign in\n

\n Back to home\n

\n
\n
\n\n
\n```\n\n```style\nh1 { display: none; }\n```\n"},{"title":"Forbidden","route":"/403","pageLayout":"fullscreen","contentHtml":"

Forbidden

\n","searchText":"Forbidden","state":null,"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿšซ Access denied
\n

You don't have permission to view this page. Contact your administrator if you believe this is a mistake.

\n Sign in\n

\n Back to home\n

\n
\n
\n\n
"},"actions":[],"styles":"h1 { display: none; }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Forbidden\nroute: /403\nlayout: fullscreen\n---\n\n# Forbidden\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿšซ Access denied
\n

You don't have permission to view this page. Contact your administrator if you believe this is a mistake.

\n Sign in\n

\n Back to home\n

\n
\n
\n\n
\n```\n\n```style\nh1 { display: none; }\n```\n"},{"title":"Not Found","route":"/404","pageLayout":"fullscreen","contentHtml":"

Not Found

\n","searchText":"Not Found","state":null,"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ” Page not found
\n

The page you're looking for doesn't exist or has been moved.

\n Go to Dashboard\n

\n Back to home\n

\n
\n
\n\n
"},"actions":[],"styles":"h1 { display: none; }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Not Found\nroute: /404\nlayout: fullscreen\n---\n\n# Not Found\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ” Page not found
\n

The page you're looking for doesn't exist or has been moved.

\n Go to Dashboard\n

\n Back to home\n

\n
\n
\n\n
\n```\n\n```style\nh1 { display: none; }\n```\n"},{"title":"Too Many Requests","route":"/429","pageLayout":"fullscreen","contentHtml":"

Too Many Requests

\n","searchText":"Too Many Requests","state":null,"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ›‘ Too many requests
\n

You've made too many requests in a short period. Please wait a moment and try again.

\n Sign in\n

\n Back to home\n

\n
\n
\n\n
"},"actions":[],"styles":"h1 { display: none; }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Too Many Requests\nroute: /429\nlayout: fullscreen\n---\n\n# Too Many Requests\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ›‘ Too many requests
\n

You've made too many requests in a short period. Please wait a moment and try again.

\n Sign in\n

\n Back to home\n

\n
\n
\n\n
\n```\n\n```style\nh1 { display: none; }\n```\n"},{"title":"About","route":"/about","pageLayout":null,"contentHtml":"

About Bricks

\n

Bricks is a markdown-first app framework. You write markdown, Bricks turns it into a real app.

\n

The layers

\n\n

Why markdown?

\n\n

The stack

\n\n","searchText":"About Bricks Bricks is a markdown-first app framework. You write markdown, Bricks turns it into a real app. The layers โ€” your theme (colors, fonts, layout). One file sets the whole vibe. โ€” your screens. Each file is a page with optional blocks. โ€” your actions. Reusable logic triggered by or buttons. โ€” the runtime. Built once, you never touch it. Why markdown? Anyone can read it. Anyone can write it. It's just text files โ€” git-friendly, no lock-in. The entire app is visible in your file explorer. The stack TypeScript โ€” runs everywhere unified + remark โ€” reads markdown React + Vite โ€” renders in browsers Ink โ€” renders in terminals","state":null,"template":null,"actions":[],"styles":"h2 {\n color: var(--accent2);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: About\nroute: /about\n---\n\n# About Bricks\n\nBricks is a **markdown-first app framework**. You write markdown, Bricks turns it into a real app.\n\n## The layers\n\n- **`app.md`** โ€” your theme (colors, fonts, layout). One file sets the whole vibe.\n- **`pages/*.md`** โ€” your screens. Each file is a page with optional `style` blocks.\n- **`skills/*.md`** โ€” your actions. Reusable logic triggered by `/commands` or buttons.\n- **`engine/`** โ€” the runtime. Built once, you never touch it.\n\n## Why markdown?\n\n- Anyone can read it. Anyone can write it.\n- It's just text files โ€” git-friendly, no lock-in.\n- The entire app is visible in your file explorer.\n\n## The stack\n\n- **TypeScript** โ€” runs everywhere\n- **unified + remark** โ€” reads markdown\n- **React + Vite** โ€” renders in browsers\n- **Ink** โ€” renders in terminals\n\n```style\nh2 {\n color: var(--accent2);\n}\n```\n"},{"title":"Access Control","route":"/access-control","pageLayout":"access-control","contentHtml":"

Access Control

\n

Manage users, roles, and ABAC policies for this tenant.

\n","searchText":"Access Control Manage users, roles, and ABAC policies for this tenant.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser","admin"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Access Control\nroute: /access-control\nlayout: access-control\nroles: [superuser, admin]\n---\n\n# Access Control\n\nManage users, roles, and ABAC policies for this tenant.\n"},{"title":"Accordion","route":"/developer-tools/accordion","pageLayout":null,"contentHtml":"

Accordion

\n

CSS-only collapsible sections. Use an accordion fenced block with panel: headers.\nMultiple panels can be open simultaneously โ€” each toggles independently.

\n

Basic Accordion

\n

Bricks is a markdown-first app framework. You write .md files and Bricks turns them into a fully interactive web app โ€” no JavaScript required for most interactions.

\n

Use an accordion fenced block. Each panel starts with a panel: header line followed by markdown content.

\n

Yes. Each panel uses an independent checkbox, so opening one panel does not close any others. This makes accordions ideal for FAQs and documentation.

\n
\n

Accordion with Rich Content

\n

Install Bricks with npm:

\n
npm install\n
\n

Then run the dev server:

\n
npm run dev\n
\n

Panels support all standard markdown:

\n
    \n
  • Bold text and italic text
    • \n
  • Inline code and code blocks
    • \n
  • Lists, both ordered and unordered
    • \n
  • Links and images
    • \n
\n

The accordion uses these design tokens:

\n
    \n
  • --surface โ€” trigger background
    • \n
  • --bg โ€” content background
    • \n
  • --border โ€” item dividers
    • \n
  • --text โ€” label and content color
    • \n
  • --radius-default โ€” outer corners
    • \n
  • --content-padding โ€” horizontal padding
    • \n
  • --transitions-fast โ€” chevron animation
    • \n
\n
\n","searchText":"Accordion CSS-only collapsible sections. Use an fenced block with headers. Multiple panels can be open simultaneously โ€” each toggles independently. Basic Accordion Accordion with Rich Content","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[{"panels":[{"label":"What is Bricks?","content":"

Bricks is a markdown-first app framework. You write .md files and Bricks turns them into a fully interactive web app โ€” no JavaScript required for most interactions.

\n"},{"label":"How do I add an accordion?","content":"

Use an accordion fenced block. Each panel starts with a panel: header line followed by markdown content.

\n"},{"label":"Can multiple panels be open?","content":"

Yes. Each panel uses an independent checkbox, so opening one panel does not close any others. This makes accordions ideal for FAQs and documentation.

\n"}]},{"panels":[{"label":"Installation","content":"

Install Bricks with npm:

\n
npm install\n
\n

Then run the dev server:

\n
npm run dev\n
\n"},{"label":"Supported Content","content":"

Panels support all standard markdown:

\n\n"},{"label":"Theme Tokens Used","content":"

The accordion uses these design tokens:

\n\n"}]}],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Accordion\nroute: /developer-tools/accordion\n---\n\n# Accordion\n\nCSS-only collapsible sections. Use an `accordion` fenced block with `panel:` headers.\nMultiple panels can be open simultaneously โ€” each toggles independently.\n\n## Basic Accordion\n\n```accordion\npanel: What is Bricks?\nBricks is a markdown-first app framework. You write `.md` files and Bricks turns them into a fully interactive web app โ€” no JavaScript required for most interactions.\n\npanel: How do I add an accordion?\nUse an `accordion` fenced block. Each panel starts with a `panel:` header line followed by markdown content.\n\npanel: Can multiple panels be open?\nYes. Each panel uses an independent checkbox, so opening one panel does not close any others. This makes accordions ideal for FAQs and documentation.\n```\n\n## Accordion with Rich Content\n\n```accordion\npanel: Installation\nInstall Bricks with npm:\n\n npm install\n\nThen run the dev server:\n\n npm run dev\n\npanel: Supported Content\nPanels support all standard markdown:\n\n- **Bold text** and *italic text*\n- Inline `code` and code blocks\n- Lists, both ordered and unordered\n- Links and images\n\npanel: Theme Tokens Used\nThe accordion uses these design tokens:\n\n- `--surface` โ€” trigger background\n- `--bg` โ€” content background\n- `--border` โ€” item dividers\n- `--text` โ€” label and content color\n- `--radius-default` โ€” outer corners\n- `--content-padding` โ€” horizontal padding\n- `--transitions-fast` โ€” chevron animation\n```\n"},{"title":"Decision Plane","route":"/admin/decision-plane","pageLayout":"workspace-decision-plane","contentHtml":"

Decision Plane

\n

Rehearse the Business workspace builder with the live metadata contract.\nInspect conditional questions, simulated website observations, rule matches,\nfeature changes, safe defaults and dependencies without creating a build.\nMain tenant, direct superuser sessions only.

\n","searchText":"Decision Plane Rehearse the Business workspace builder with the live metadata contract. Inspect conditional questions, simulated website observations, rule matches, feature changes, safe defaults and dependencies without creating a build. Main tenant, direct superuser sessions only.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Decision Plane\nroute: /admin/decision-plane\nlayout: workspace-decision-plane\nroles: [superuser]\n---\n\n# Decision Plane\n\nRehearse the Business workspace builder with the live metadata contract.\nInspect conditional questions, simulated website observations, rule matches,\nfeature changes, safe defaults and dependencies without creating a build.\nMain tenant, direct superuser sessions only.\n"},{"title":"Admin Twilio Usage Alerts","route":"/admin/twilio/alerts","pageLayout":null,"contentHtml":"

Admin Twilio Usage Alerts

\n","searchText":"Admin Twilio Usage Alerts","state":{"loading":true,"error":"","alerts":[],"alertColumns":[{"id":"alert_date","label":"Alert date"},{"id":"tenant_label","label":"Tenant"},{"id":"amount_label","label":"Amount"},{"id":"threshold_label","label":"Threshold"},{"id":"currency","label":"Currency"},{"id":"status","label":"Status"},{"id":"window_label","label":"Window"},{"id":"notified_label","label":"Notified"},{"id":"notification_error","label":"Notification issue"},{"id":"details","label":"Details"},{"id":"subaccount_sid","label":"Subaccount SID"}],"alertCountLabel":"0 alerts"},"template":{"html":"
\n
\n \n \n \n
\n\n
{error}
\n
Loading Twilio usage alerts...
\n\n \n
"},"actions":[{"name":"openDashboard","code":"window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio\" }));\nreturn state;"},{"name":"openDetails","code":"window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio/details\" }));\nreturn state;"},{"name":"init","code":"var next = Object.assign({}, state, { loading: true, error: \"\" });\nupdate(next);\nfunction money(value) {\n var number = Number(value || 0);\n return \"$\" + number.toFixed(2);\n}\nfunction compactDate(value) {\n if (!value) return \"\";\n try { return new Date(value).toLocaleString(); } catch (e) { return value; }\n}\nfunction dateOnly(value) {\n if (!value) return \"\";\n return String(value).slice(0, 10);\n}\ntry {\n var res = await fetch(\"/api/admin/twilio/usage-alerts\", { credentials: \"include\" });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) throw new Error(data.error || \"Could not load Twilio usage alerts.\");\n\n var alerts = (data.rows || []).map(function(row) {\n return Object.assign({}, row, {\n tenant_label: row.tenant_name + \" \" + row.tenant_slug,\n amount_label: money(row.amount),\n threshold_label: money(row.threshold_amount),\n window_label: compactDate(row.window_start) + \" to \" + compactDate(row.window_end),\n notified_label: compactDate(row.notified_at),\n notification_error: row.notification_error || \"\",\n details: row.details || \"\",\n currency: row.currency || \"\",\n subaccount_sid: row.subaccount_sid || \"\",\n alert_date: dateOnly(row.alert_date)\n });\n });\n\n return Object.assign({}, next, {\n loading: false,\n alerts: alerts,\n alertCountLabel: alerts.length + \" alert\" + (alerts.length === 1 ? \"\" : \"s\")\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n error: e && e.message ? e.message : \"Could not load Twilio usage alerts.\"\n });\n}"}],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Admin Twilio Usage Alerts\nroute: /admin/twilio/alerts\n---\n\n# Admin Twilio Usage Alerts\n\n```state\n{\n \"loading\": true,\n \"error\": \"\",\n \"alerts\": [],\n \"alertColumns\": [\n { \"id\": \"alert_date\", \"label\": \"Alert date\" },\n { \"id\": \"tenant_label\", \"label\": \"Tenant\" },\n { \"id\": \"amount_label\", \"label\": \"Amount\" },\n { \"id\": \"threshold_label\", \"label\": \"Threshold\" },\n { \"id\": \"currency\", \"label\": \"Currency\" },\n { \"id\": \"status\", \"label\": \"Status\" },\n { \"id\": \"window_label\", \"label\": \"Window\" },\n { \"id\": \"notified_label\", \"label\": \"Notified\" },\n { \"id\": \"notification_error\", \"label\": \"Notification issue\" },\n { \"id\": \"details\", \"label\": \"Details\" },\n { \"id\": \"subaccount_sid\", \"label\": \"Subaccount SID\" }\n ],\n \"alertCountLabel\": \"0 alerts\"\n}\n```\n\n```template\n
\n
\n \n \n \n
\n\n
{error}
\n
Loading Twilio usage alerts...
\n\n \n
\n```\n\n```action:openDashboard\nwindow.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio\" }));\nreturn state;\n```\n\n```action:openDetails\nwindow.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio/details\" }));\nreturn state;\n```\n\n```action:init\nvar next = Object.assign({}, state, { loading: true, error: \"\" });\nupdate(next);\nfunction money(value) {\n var number = Number(value || 0);\n return \"$\" + number.toFixed(2);\n}\nfunction compactDate(value) {\n if (!value) return \"\";\n try { return new Date(value).toLocaleString(); } catch (e) { return value; }\n}\nfunction dateOnly(value) {\n if (!value) return \"\";\n return String(value).slice(0, 10);\n}\ntry {\n var res = await fetch(\"/api/admin/twilio/usage-alerts\", { credentials: \"include\" });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) throw new Error(data.error || \"Could not load Twilio usage alerts.\");\n\n var alerts = (data.rows || []).map(function(row) {\n return Object.assign({}, row, {\n tenant_label: row.tenant_name + \" \" + row.tenant_slug,\n amount_label: money(row.amount),\n threshold_label: money(row.threshold_amount),\n window_label: compactDate(row.window_start) + \" to \" + compactDate(row.window_end),\n notified_label: compactDate(row.notified_at),\n notification_error: row.notification_error || \"\",\n details: row.details || \"\",\n currency: row.currency || \"\",\n subaccount_sid: row.subaccount_sid || \"\",\n alert_date: dateOnly(row.alert_date)\n });\n });\n\n return Object.assign({}, next, {\n loading: false,\n alerts: alerts,\n alertCountLabel: alerts.length + \" alert\" + (alerts.length === 1 ? \"\" : \"s\")\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n error: e && e.message ? e.message : \"Could not load Twilio usage alerts.\"\n });\n}\n```\n"},{"title":"Admin Twilio Details","route":"/admin/twilio/details","pageLayout":null,"contentHtml":"

Admin Twilio Details

\n","searchText":"Admin Twilio Details","state":{"loading":true,"error":"","tenant_id":"","kind":"all","date_from":"","date_to":"","exportHref":"/api/admin/twilio/export.csv","tenants":[],"activity":[],"usage":[],"activityColumns":[{"id":"occurred_label","label":"When"},{"id":"kind","label":"Type"},{"id":"status","label":"Status"},{"id":"from_phone","label":"From"},{"id":"to_phone","label":"To"},{"id":"usage_label","label":"Usage"},{"id":"price_label","label":"Cost"},{"id":"provider_sid","label":"Provider SID"}],"usageColumns":[{"id":"tenant_name","label":"Tenant"},{"id":"period_label","label":"Period"},{"id":"category_label","label":"Category"},{"id":"usage_label","label":"Usage"},{"id":"count","label":"Count"},{"id":"price_label","label":"Raw cost"},{"id":"invoice_label","label":"Invoice total"}],"activityCountLabel":"0 activity rows","usageCountLabel":"0 usage rows","showActivity":false,"showUsage":false},"template":{"html":"
\n
\n \n \n \n \n \n \n \n
\n\n
{error}
\n
Loading Twilio details...
\n\n
\n Activity\n
\n {activityCountLabel}\n
\n\n \n\n
\n Usage Records\n
\n {usageCountLabel}\n
\n\n \n
"},"actions":[{"name":"openDashboard","code":"window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio\" }));\nreturn state;"},{"name":"exportCsv","code":"window.location.href = state.exportHref || \"/api/admin/twilio/export.csv\";\nreturn state;"},{"name":"init","code":"var next = Object.assign({}, state, { loading: true, error: \"\" });\nupdate(next);\nfunction money(value) {\n var number = Number(value || 0);\n return \"$\" + number.toFixed(2);\n}\nfunction compactDate(value) {\n if (!value) return \"\";\n try { return new Date(value).toLocaleString(); } catch (e) { return value; }\n}\nfunction query(extra) {\n var params = new URLSearchParams();\n if (state.tenant_id) params.set(\"tenant_id\", state.tenant_id);\n if (state.date_from) params.set(\"date_from\", state.date_from);\n if (state.date_to) params.set(\"date_to\", state.date_to);\n if (extra) {\n Object.keys(extra).forEach(function(key) {\n if (extra[key]) params.set(key, extra[key]);\n });\n }\n var qs = params.toString();\n return qs ? \"?\" + qs : \"\";\n}\ntry {\n var tenantsRes = await fetch(\"/api/admin/twilio/tenants\", { credentials: \"include\" });\n var tenantsData = await tenantsRes.json().catch(function() { return {}; });\n if (!tenantsRes.ok) throw new Error(tenantsData.error || \"Could not load Twilio tenants.\");\n\n var activityRes = await fetch(\"/api/admin/twilio/activity\" + query({ kind: state.kind }), { credentials: \"include\" });\n var activityData = await activityRes.json().catch(function() { return {}; });\n if (!activityRes.ok) throw new Error(activityData.error || \"Could not load Twilio activity.\");\n\n var usageRes = await fetch(\"/api/admin/twilio/usage\" + query(), { credentials: \"include\" });\n var usageData = await usageRes.json().catch(function() { return {}; });\n if (!usageRes.ok) throw new Error(usageData.error || \"Could not load Twilio usage.\");\n\n var activity = (activityData.items || []).map(function(item) {\n var usageLabel = item.kind === \"call\"\n ? String(item.duration_seconds || 0) + \" sec\"\n : String(item.segments || 0) + \" segments\";\n return Object.assign({}, item, {\n occurred_label: compactDate(item.occurred_at || item.created_at),\n usage_label: usageLabel,\n price_label: money(item.price_amount),\n from_phone: item.from_phone || \"\",\n to_phone: item.to_phone || \"\",\n status: item.status || \"\"\n });\n });\n var usage = (usageData.rows || []).map(function(row) {\n return Object.assign({}, row, {\n period_label: row.period_start + \" to \" + row.period_end,\n category_label: row.description ? row.category + \" \" + row.description : row.category,\n usage_label: Number(row.usage_amount || 0).toFixed(2) + \" \" + (row.usage_unit || \"\"),\n price_label: money(row.price_amount),\n invoice_label: money(row.invoice_total_amount),\n description: row.description || \"\"\n });\n });\n var exportHref = \"/api/admin/twilio/export.csv\" + query();\n return Object.assign({}, next, {\n loading: false,\n tenants: tenantsData.tenants || [],\n activity: activity,\n usage: usage,\n exportHref: exportHref,\n activityCountLabel: activity.length + \" activity row\" + (activity.length === 1 ? \"\" : \"s\"),\n usageCountLabel: usage.length + \" usage row\" + (usage.length === 1 ? \"\" : \"s\"),\n showActivity: activity.length > 0,\n showUsage: usage.length > 0\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n error: e && e.message ? e.message : \"Could not load Admin Twilio details.\"\n });\n}"}],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Admin Twilio Details\nroute: /admin/twilio/details\n---\n\n# Admin Twilio Details\n\n```state\n{\n \"loading\": true,\n \"error\": \"\",\n \"tenant_id\": \"\",\n \"kind\": \"all\",\n \"date_from\": \"\",\n \"date_to\": \"\",\n \"exportHref\": \"/api/admin/twilio/export.csv\",\n \"tenants\": [],\n \"activity\": [],\n \"usage\": [],\n \"activityColumns\": [\n { \"id\": \"occurred_label\", \"label\": \"When\" },\n { \"id\": \"kind\", \"label\": \"Type\" },\n { \"id\": \"status\", \"label\": \"Status\" },\n { \"id\": \"from_phone\", \"label\": \"From\" },\n { \"id\": \"to_phone\", \"label\": \"To\" },\n { \"id\": \"usage_label\", \"label\": \"Usage\" },\n { \"id\": \"price_label\", \"label\": \"Cost\" },\n { \"id\": \"provider_sid\", \"label\": \"Provider SID\" }\n ],\n \"usageColumns\": [\n { \"id\": \"tenant_name\", \"label\": \"Tenant\" },\n { \"id\": \"period_label\", \"label\": \"Period\" },\n { \"id\": \"category_label\", \"label\": \"Category\" },\n { \"id\": \"usage_label\", \"label\": \"Usage\" },\n { \"id\": \"count\", \"label\": \"Count\" },\n { \"id\": \"price_label\", \"label\": \"Raw cost\" },\n { \"id\": \"invoice_label\", \"label\": \"Invoice total\" }\n ],\n \"activityCountLabel\": \"0 activity rows\",\n \"usageCountLabel\": \"0 usage rows\",\n \"showActivity\": false,\n \"showUsage\": false\n}\n```\n\n```template\n
\n
\n \n \n \n \n \n \n \n
\n\n
{error}
\n
Loading Twilio details...
\n\n
\n Activity\n
\n {activityCountLabel}\n
\n\n \n\n
\n Usage Records\n
\n {usageCountLabel}\n
\n\n \n
\n```\n\n```action:openDashboard\nwindow.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio\" }));\nreturn state;\n```\n\n```action:exportCsv\nwindow.location.href = state.exportHref || \"/api/admin/twilio/export.csv\";\nreturn state;\n```\n\n```action:init\nvar next = Object.assign({}, state, { loading: true, error: \"\" });\nupdate(next);\nfunction money(value) {\n var number = Number(value || 0);\n return \"$\" + number.toFixed(2);\n}\nfunction compactDate(value) {\n if (!value) return \"\";\n try { return new Date(value).toLocaleString(); } catch (e) { return value; }\n}\nfunction query(extra) {\n var params = new URLSearchParams();\n if (state.tenant_id) params.set(\"tenant_id\", state.tenant_id);\n if (state.date_from) params.set(\"date_from\", state.date_from);\n if (state.date_to) params.set(\"date_to\", state.date_to);\n if (extra) {\n Object.keys(extra).forEach(function(key) {\n if (extra[key]) params.set(key, extra[key]);\n });\n }\n var qs = params.toString();\n return qs ? \"?\" + qs : \"\";\n}\ntry {\n var tenantsRes = await fetch(\"/api/admin/twilio/tenants\", { credentials: \"include\" });\n var tenantsData = await tenantsRes.json().catch(function() { return {}; });\n if (!tenantsRes.ok) throw new Error(tenantsData.error || \"Could not load Twilio tenants.\");\n\n var activityRes = await fetch(\"/api/admin/twilio/activity\" + query({ kind: state.kind }), { credentials: \"include\" });\n var activityData = await activityRes.json().catch(function() { return {}; });\n if (!activityRes.ok) throw new Error(activityData.error || \"Could not load Twilio activity.\");\n\n var usageRes = await fetch(\"/api/admin/twilio/usage\" + query(), { credentials: \"include\" });\n var usageData = await usageRes.json().catch(function() { return {}; });\n if (!usageRes.ok) throw new Error(usageData.error || \"Could not load Twilio usage.\");\n\n var activity = (activityData.items || []).map(function(item) {\n var usageLabel = item.kind === \"call\"\n ? String(item.duration_seconds || 0) + \" sec\"\n : String(item.segments || 0) + \" segments\";\n return Object.assign({}, item, {\n occurred_label: compactDate(item.occurred_at || item.created_at),\n usage_label: usageLabel,\n price_label: money(item.price_amount),\n from_phone: item.from_phone || \"\",\n to_phone: item.to_phone || \"\",\n status: item.status || \"\"\n });\n });\n var usage = (usageData.rows || []).map(function(row) {\n return Object.assign({}, row, {\n period_label: row.period_start + \" to \" + row.period_end,\n category_label: row.description ? row.category + \" \" + row.description : row.category,\n usage_label: Number(row.usage_amount || 0).toFixed(2) + \" \" + (row.usage_unit || \"\"),\n price_label: money(row.price_amount),\n invoice_label: money(row.invoice_total_amount),\n description: row.description || \"\"\n });\n });\n var exportHref = \"/api/admin/twilio/export.csv\" + query();\n return Object.assign({}, next, {\n loading: false,\n tenants: tenantsData.tenants || [],\n activity: activity,\n usage: usage,\n exportHref: exportHref,\n activityCountLabel: activity.length + \" activity row\" + (activity.length === 1 ? \"\" : \"s\"),\n usageCountLabel: usage.length + \" usage row\" + (usage.length === 1 ? \"\" : \"s\"),\n showActivity: activity.length > 0,\n showUsage: usage.length > 0\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n error: e && e.message ? e.message : \"Could not load Admin Twilio details.\"\n });\n}\n```\n"},{"title":"Admin Twilio","route":"/admin/twilio","pageLayout":null,"contentHtml":"

Admin Twilio

\n","searchText":"Admin Twilio","state":{"loading":true,"syncing":false,"error":"","message":"","syncLabel":"Sync now","tenant_id":"","date_from":"","date_to":"","cards":[],"top_tenants":[],"sync_runs":[],"tenants":[],"topTenantColumns":[{"id":"tenant_label","label":"Tenant"},{"id":"numbers","label":"Numbers"},{"id":"calls","label":"Calls"},{"id":"texts","label":"Texts"},{"id":"minutes_label","label":"Minutes"},{"id":"segments","label":"Segments"},{"id":"raw_cost_label","label":"Raw cost"},{"id":"invoice_total_label","label":"Invoice total"}],"syncRunColumns":[{"id":"sync_type","label":"Sync"},{"id":"status","label":"Status"},{"id":"started_at_label","label":"Started"},{"id":"completed_at_label","label":"Completed"},{"id":"error","label":"Issue"}],"tenantCountLabel":"0 tenants","showTopTenants":false,"showSyncRuns":false},"template":{"html":"
\n
\n \n \n \n \n \n \n
\n {tenantCountLabel}\n
\n\n
{error}
\n
{message}
\n
Loading Twilio activity...
\n\n
\n
\n {card.label}\n {card.value}\n {card.detail}\n
\n
\n\n \n\n \n
"},"actions":[{"name":"openDetails","code":"window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio/details\" }));\nreturn state;"},{"name":"init","code":"var next = Object.assign({}, state, { loading: true, error: \"\", message: \"\", syncLabel: state.syncing ? \"Syncing...\" : \"Sync now\" });\nupdate(next);\nfunction money(value) {\n var number = Number(value || 0);\n return \"$\" + number.toFixed(2);\n}\nfunction compactDate(value) {\n if (!value) return \"\";\n try { return new Date(value).toLocaleString(); } catch (e) { return value; }\n}\nfunction query() {\n var params = new URLSearchParams();\n if (state.tenant_id) params.set(\"tenant_id\", state.tenant_id);\n if (state.date_from) params.set(\"date_from\", state.date_from);\n if (state.date_to) params.set(\"date_to\", state.date_to);\n var qs = params.toString();\n return qs ? \"?\" + qs : \"\";\n}\ntry {\n var tenantsRes = await fetch(\"/api/admin/twilio/tenants\", { credentials: \"include\" });\n var tenantsData = await tenantsRes.json().catch(function() { return {}; });\n if (!tenantsRes.ok) throw new Error(tenantsData.error || \"Could not load Twilio tenants.\");\n\n var summaryRes = await fetch(\"/api/admin/twilio/summary\" + query(), { credentials: \"include\" });\n var summaryData = await summaryRes.json().catch(function() { return {}; });\n if (!summaryRes.ok) throw new Error(summaryData.error || \"Could not load Twilio summary.\");\n\n var topTenants = (summaryData.top_tenants || []).map(function(tenant) {\n return Object.assign({}, tenant, {\n tenant_label: tenant.tenant_name + \" \" + tenant.tenant_slug,\n minutes_label: Number(tenant.minutes || 0).toFixed(1),\n raw_cost_label: money(tenant.raw_cost),\n invoice_total_label: money(tenant.invoice_total)\n });\n });\n var syncRuns = (summaryData.sync_runs || []).map(function(run) {\n return Object.assign({}, run, {\n started_at_label: compactDate(run.started_at),\n completed_at_label: compactDate(run.completed_at),\n error: run.error || \"\"\n });\n });\n return Object.assign({}, next, {\n loading: false,\n syncing: false,\n syncLabel: \"Sync now\",\n tenants: tenantsData.tenants || [],\n tenantCountLabel: (tenantsData.tenants || []).length + \" tenants\",\n cards: summaryData.cards || [],\n top_tenants: topTenants,\n sync_runs: syncRuns,\n showTopTenants: topTenants.length > 0,\n showSyncRuns: syncRuns.length > 0\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n syncing: false,\n syncLabel: \"Sync now\",\n error: e && e.message ? e.message : \"Could not load Admin Twilio.\"\n });\n}"},{"name":"syncTwilio","code":"var next = Object.assign({}, state, { syncing: true, syncLabel: \"Syncing...\", error: \"\", message: \"\" });\nupdate(next);\ntry {\n var body = {};\n if (state.tenant_id) body.tenant_id = state.tenant_id;\n var res = await fetch(\"/api/admin/twilio/sync\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body)\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) throw new Error(data.error || \"Could not run Twilio sync.\");\n return Object.assign({}, next, {\n syncing: false,\n syncLabel: \"Sync now\",\n message: \"Twilio sync completed. Refresh to see the latest rollups.\"\n });\n} catch (e) {\n return Object.assign({}, next, {\n syncing: false,\n syncLabel: \"Sync now\",\n error: e && e.message ? e.message : \"Could not run Twilio sync.\"\n });\n}"}],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Admin Twilio\nroute: /admin/twilio\n---\n\n# Admin Twilio\n\n```state\n{\n \"loading\": true,\n \"syncing\": false,\n \"error\": \"\",\n \"message\": \"\",\n \"syncLabel\": \"Sync now\",\n \"tenant_id\": \"\",\n \"date_from\": \"\",\n \"date_to\": \"\",\n \"cards\": [],\n \"top_tenants\": [],\n \"sync_runs\": [],\n \"tenants\": [],\n \"topTenantColumns\": [\n { \"id\": \"tenant_label\", \"label\": \"Tenant\" },\n { \"id\": \"numbers\", \"label\": \"Numbers\" },\n { \"id\": \"calls\", \"label\": \"Calls\" },\n { \"id\": \"texts\", \"label\": \"Texts\" },\n { \"id\": \"minutes_label\", \"label\": \"Minutes\" },\n { \"id\": \"segments\", \"label\": \"Segments\" },\n { \"id\": \"raw_cost_label\", \"label\": \"Raw cost\" },\n { \"id\": \"invoice_total_label\", \"label\": \"Invoice total\" }\n ],\n \"syncRunColumns\": [\n { \"id\": \"sync_type\", \"label\": \"Sync\" },\n { \"id\": \"status\", \"label\": \"Status\" },\n { \"id\": \"started_at_label\", \"label\": \"Started\" },\n { \"id\": \"completed_at_label\", \"label\": \"Completed\" },\n { \"id\": \"error\", \"label\": \"Issue\" }\n ],\n \"tenantCountLabel\": \"0 tenants\",\n \"showTopTenants\": false,\n \"showSyncRuns\": false\n}\n```\n\n```template\n
\n
\n \n \n \n \n \n \n
\n {tenantCountLabel}\n
\n\n
{error}
\n
{message}
\n
Loading Twilio activity...
\n\n
\n
\n {card.label}\n {card.value}\n {card.detail}\n
\n
\n\n \n\n \n
\n```\n\n```action:openDetails\nwindow.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop/admin/twilio/details\" }));\nreturn state;\n```\n\n```action:init\nvar next = Object.assign({}, state, { loading: true, error: \"\", message: \"\", syncLabel: state.syncing ? \"Syncing...\" : \"Sync now\" });\nupdate(next);\nfunction money(value) {\n var number = Number(value || 0);\n return \"$\" + number.toFixed(2);\n}\nfunction compactDate(value) {\n if (!value) return \"\";\n try { return new Date(value).toLocaleString(); } catch (e) { return value; }\n}\nfunction query() {\n var params = new URLSearchParams();\n if (state.tenant_id) params.set(\"tenant_id\", state.tenant_id);\n if (state.date_from) params.set(\"date_from\", state.date_from);\n if (state.date_to) params.set(\"date_to\", state.date_to);\n var qs = params.toString();\n return qs ? \"?\" + qs : \"\";\n}\ntry {\n var tenantsRes = await fetch(\"/api/admin/twilio/tenants\", { credentials: \"include\" });\n var tenantsData = await tenantsRes.json().catch(function() { return {}; });\n if (!tenantsRes.ok) throw new Error(tenantsData.error || \"Could not load Twilio tenants.\");\n\n var summaryRes = await fetch(\"/api/admin/twilio/summary\" + query(), { credentials: \"include\" });\n var summaryData = await summaryRes.json().catch(function() { return {}; });\n if (!summaryRes.ok) throw new Error(summaryData.error || \"Could not load Twilio summary.\");\n\n var topTenants = (summaryData.top_tenants || []).map(function(tenant) {\n return Object.assign({}, tenant, {\n tenant_label: tenant.tenant_name + \" \" + tenant.tenant_slug,\n minutes_label: Number(tenant.minutes || 0).toFixed(1),\n raw_cost_label: money(tenant.raw_cost),\n invoice_total_label: money(tenant.invoice_total)\n });\n });\n var syncRuns = (summaryData.sync_runs || []).map(function(run) {\n return Object.assign({}, run, {\n started_at_label: compactDate(run.started_at),\n completed_at_label: compactDate(run.completed_at),\n error: run.error || \"\"\n });\n });\n return Object.assign({}, next, {\n loading: false,\n syncing: false,\n syncLabel: \"Sync now\",\n tenants: tenantsData.tenants || [],\n tenantCountLabel: (tenantsData.tenants || []).length + \" tenants\",\n cards: summaryData.cards || [],\n top_tenants: topTenants,\n sync_runs: syncRuns,\n showTopTenants: topTenants.length > 0,\n showSyncRuns: syncRuns.length > 0\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n syncing: false,\n syncLabel: \"Sync now\",\n error: e && e.message ? e.message : \"Could not load Admin Twilio.\"\n });\n}\n```\n\n```action:syncTwilio\nvar next = Object.assign({}, state, { syncing: true, syncLabel: \"Syncing...\", error: \"\", message: \"\" });\nupdate(next);\ntry {\n var body = {};\n if (state.tenant_id) body.tenant_id = state.tenant_id;\n var res = await fetch(\"/api/admin/twilio/sync\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body)\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) throw new Error(data.error || \"Could not run Twilio sync.\");\n return Object.assign({}, next, {\n syncing: false,\n syncLabel: \"Sync now\",\n message: \"Twilio sync completed. Refresh to see the latest rollups.\"\n });\n} catch (e) {\n return Object.assign({}, next, {\n syncing: false,\n syncLabel: \"Sync now\",\n error: e && e.message ? e.message : \"Could not run Twilio sync.\"\n });\n}\n```\n"},{"title":"API Connections","route":"/developer-tools/api","pageLayout":null,"contentHtml":"

API Connections

\n

Pages can define api blocks to fetch external data on load.\nEach entry names a key in state where the response is stored.

\n","searchText":"API Connections Pages can define blocks to fetch external data on load. Each entry names a key in state where the response is stored.","state":{"todo":{},"author":{},"loading":true,"error":""},"template":{"html":"
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n
Todo
\n
{todo.title}
\n
\n \n {todo.completed}\n \n ID #{todo.id}\n
\n
\n\n
\n
Author
\n
{author.name}
\n
\n {author.email}\n
\n
\n\n
\n\n
"},"actions":[],"styles":".api-page {\n max-width: var(--width-xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-4);\n}\n.api-card {\n padding: var(--spacing-5);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n background: var(--surface);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n.api-card__label {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n}\n.api-card__title {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n color: var(--text);\n}\n.api-card__meta {\n display: flex;\n align-items: center;\n gap: var(--spacing-3);\n}\n.api-card__id {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n.api-badge {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n padding: var(--spacing-0) var(--spacing-2);\n border-radius: var(--radius-sm);\n border: 1px solid var(--border);\n background: var(--surface);\n color: var(--text-muted);\n}\n.api-badge[data-done=\"true\"] {\n border-color: var(--success);\n color: var(--success);\n background: var(--surface);\n}\n.api-results[data-loading=\"true\"] { display: none; }\n.api-card--loading[data-loading=\"false\"] { display: none; }\n.api-skeleton {\n background: var(--border);\n border-radius: var(--radius-sm);\n height: var(--spacing-4);\n}\n.api-skeleton--title {\n width: 60%;\n height: var(--spacing-5);\n}\n.api-skeleton--line {\n width: 80%;\n}\n.api-skeleton--short {\n width: 40%;\n}","formValidation":null,"apis":[{"name":"todo","url":"https://jsonplaceholder.typicode.com/todos/1"},{"name":"author","url":"https://jsonplaceholder.typicode.com/users/1"}],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: API Connections\nroute: /developer-tools/api\n---\n\n# API Connections\n\nPages can define `api` blocks to fetch external data on load.\nEach entry names a key in state where the response is stored.\n\n```api\n[\n { \"name\": \"todo\", \"url\": \"https://jsonplaceholder.typicode.com/todos/1\" },\n { \"name\": \"author\", \"url\": \"https://jsonplaceholder.typicode.com/users/1\" }\n]\n```\n\n```state\n{ \"todo\": {}, \"author\": {}, \"loading\": true, \"error\": \"\" }\n```\n\n```template\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n
Todo
\n
{todo.title}
\n
\n \n {todo.completed}\n \n ID #{todo.id}\n
\n
\n\n
\n
Author
\n
{author.name}
\n
\n {author.email}\n
\n
\n\n
\n\n
\n```\n\n```style\n.api-page {\n max-width: var(--width-xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-4);\n}\n.api-card {\n padding: var(--spacing-5);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n background: var(--surface);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n.api-card__label {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n}\n.api-card__title {\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n color: var(--text);\n}\n.api-card__meta {\n display: flex;\n align-items: center;\n gap: var(--spacing-3);\n}\n.api-card__id {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n.api-badge {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n padding: var(--spacing-0) var(--spacing-2);\n border-radius: var(--radius-sm);\n border: 1px solid var(--border);\n background: var(--surface);\n color: var(--text-muted);\n}\n.api-badge[data-done=\"true\"] {\n border-color: var(--success);\n color: var(--success);\n background: var(--surface);\n}\n.api-results[data-loading=\"true\"] { display: none; }\n.api-card--loading[data-loading=\"false\"] { display: none; }\n.api-skeleton {\n background: var(--border);\n border-radius: var(--radius-sm);\n height: var(--spacing-4);\n}\n.api-skeleton--title {\n width: 60%;\n height: var(--spacing-5);\n}\n.api-skeleton--line {\n width: 80%;\n}\n.api-skeleton--short {\n width: 40%;\n}\n```\n"},{"title":"Athletics Ops Prototype","route":"/developer-tools/athletics-ops-prototype","pageLayout":null,"contentHtml":"

Athletics Ops Prototype

\n

Temporary screens for the Athletics Operations brick: scheduling, opponent matching, clearance, coverage, and game-day command.

\n","searchText":"Athletics Ops Prototype Temporary screens for the Athletics Operations brick: scheduling, opponent matching, clearance, coverage, and game-day command.","state":{"commandActive":true,"finderActive":false,"coachActive":false,"requestActive":false,"paperworkActive":false,"coverageActive":false,"modelActive":false,"opsStats":[{"icon":"!","label":"Uncovered events","value":"3"},{"icon":"A","label":"Admin gaps","value":"2"},{"icon":"R","label":"Coach requests","value":"7"},{"icon":"P","label":"Clearance blockers","value":"18"}],"eventRows":[{"event":"Varsity football vs. West County","readiness":"Needs admin","missing":"Admin on duty, second gate worker","owner":"Athletic Director","next":"Ask principal team for Friday coverage"},{"event":"JV volleyball tri-match","readiness":"Almost ready","missing":"PA script, visiting team host","owner":"Assistant AD","next":"Send worker briefing by noon"},{"event":"Girls soccer away scrimmage","readiness":"Needs paperwork","missing":"Out-of-county travel release","owner":"Head coach","next":"Collect parent signatures before bus request"}],"roleCards":[{"step":"Game control","icon":"AD","label":"Admin on duty","desc":"Visible supervisor, crowd decisions, incident notes, and final call on escalations.","action":"Assign admin"},{"step":"Football","icon":"CC","label":"Chain crew","desc":"Crew names, arrival time, sideline, backup chains, and radio contact.","action":"Fill crew"},{"step":"Press box","icon":"PA","label":"PA announcer","desc":"Script, pronunciations, emergency reads, sportsmanship reminders, and sponsor reads.","action":"Open script"},{"step":"Gate","icon":"$","label":"Ticket takers and sellers","desc":"GoFan link, pass list, scanner setup, cash exception rules, paid worker slots, and gate report.","action":"Set gate plan"},{"step":"Officials","icon":"OF","label":"Official host","desc":"Parking, locker room, water, names, fee notes, and halftime/postgame escort.","action":"Add host"},{"step":"Home","icon":"HH","label":"Home team host","desc":"Bench setup, locker room, trainer access, student section notes, and coach arrival plan.","action":"Assign host"},{"step":"Visitors","icon":"VH","label":"Visiting team host","desc":"Bus parking, locker room, warmup space, trainer access, and return route.","action":"Add host"},{"step":"Table","icon":"CL","label":"Clock and official book","desc":"Basketball clock operator, official scorebook, scoreboard test, rules notes, and backup person.","action":"Assign table"},{"step":"Safety","icon":"EAP","label":"Trainer and emergency plan","desc":"Athletic trainer, AED location, weather plan, EMS access, and evacuation script.","action":"Review plan"}],"briefingRows":[{"brief":"Officials packet","audience":"Crew and assigner","sends":"Parking, host phone, locker room, special events, trainer location"},{"brief":"Fan update","audience":"Home and visiting fans","sends":"GoFan link, gate time, prohibited items, parking, sportsmanship reminder"},{"brief":"Worker text","audience":"Gate, PA, chain crew, clock, host","sends":"Report time, role, entrance, radio channel, who to call"}],"paperworkStats":[{"icon":"EL2","label":"EL2 blockers","value":"6"},{"icon":"ECG","label":"ECG missing","value":"4"},{"icon":"TR","label":"Travel releases","value":"8"},{"icon":"OK","label":"Ready to play","value":"86%"}],"paperworkCards":[{"step":"Physical","icon":"EL2","label":"EL2 physical","desc":"Tracks uploaded physical forms, expiration dates, doctor signature status, and whether the athlete is cleared for contact.","action":"Review EL2"},{"step":"Cardiac","icon":"ECG","label":"ECG requirement","desc":"Shows who needs ECG paperwork or a waiver before tryouts, practice, travel, or competition.","action":"Check ECG"},{"step":"Consent","icon":"HH","label":"Hold harmless","desc":"Covers parent release, sport-specific risk language, emergency treatment consent, and signature history.","action":"Send release"},{"step":"Travel","icon":"TR","label":"Out-of-county travel","desc":"Required when a game crosses the county rule, has a long bus window, or needs parent permission before the event can publish.","action":"Collect travel"},{"step":"Import","icon":"AC","label":"AthleticClearance","desc":"Pulls clearance status, expiration dates, uploaded documents, and blockers into Bricks without duplicating the source system.","action":"Sync status"},{"step":"Eligibility","icon":"EL","label":"Eligibility check","desc":"Combines roster, grades, emergency contacts, insurance, training courses, and school-specific signoffs.","action":"Run check"}],"clearanceRows":[{"athlete":"Athlete 24","team":"Girls soccer varsity","el2":"Expires Oct 3","ecg":"Missing","athleticClearance":"Pending","holdHarmless":"Signed","travel":"Needed for county line","next":"Send ECG and travel reminders"},{"athlete":"Athlete 31","team":"Football varsity","el2":"Cleared","ecg":"Cleared","athleticClearance":"Approved","holdHarmless":"Signed","travel":"Not needed","next":"Ready to play"},{"athlete":"Athlete 12","team":"Volleyball JV","el2":"Needs signature","ecg":"Waiver on file","athleticClearance":"Needs review","holdHarmless":"Unsigned","travel":"Not needed","next":"Parent packet incomplete"},{"athlete":"Athlete 08","team":"Baseball varsity","el2":"Cleared","ecg":"Cleared","athleticClearance":"Approved","holdHarmless":"Signed","travel":"Needed for BJ game","next":"Collect out-of-county travel form"}],"eventPaperworkRows":[{"event":"Girls soccer at Central Prep","blockedBy":"Out-of-county travel release","source":"Parent packet","owner":"Head coach","deadline":"Before bus request","next":"Send travel form to families"},{"event":"Baseball at Northwood Academy","blockedBy":"Travel release and BJ game approval","source":"Schedule request","owner":"AD","deadline":"Before contract approval","next":"Attach travel form to request"},{"event":"Football home opener","blockedBy":"Two EL2 expirations","source":"AthleticClearance sync","owner":"Athletic trainer","deadline":"Before game roster locks","next":"Review expired physicals"}],"paperworkSourceRows":[{"source":"AthleticClearance","bricksRecord":"athlete_clearances","bringsIn":"Approval status, document links, expiration dates, missing requirements"},{"source":"School OS students","bricksRecord":"student_id reference","bringsIn":"Roster identity, guardians, emergency contact, grade level, school"},{"source":"School OS grades","bricksRecord":"student_eligibility_snapshots","bringsIn":"Current grading window, GPA signal, failed-class count, credit pace, attendance flags"},{"source":"Parent upload","bricksRecord":"clearance_documents","bringsIn":"EL2, ECG, hold harmless, travel releases, insurance cards"},{"source":"Event schedule","bricksRecord":"athletic_events","bringsIn":"Travel distance, county rule, sport, level, roster deadline, approval state"}],"opponentCards":[{"school":"Riverview High","distance":"18 miles","window":"Sep 12 or Sep 19","need":"Varsity boys basketball, home or away","rule":"Coach can schedule within rules","connection":"Played last season"},{"school":"Central Prep","distance":"27 miles","window":"Sep 16-20","need":"JV soccer scrimmage, willing to travel","rule":"AD final approval","connection":"New connection"},{"school":"Lakeview Academy","distance":"34 miles","window":"Sep 26","need":"Freshman football, home game preferred","rule":"Coach can propose only","connection":"Shared district contact"}],"gameBoardRows":[{"post":"Need one more JV football game","level":"JV","date":"Weeks 3 or 4","travel":"25 miles","reply":"4 possible schools"},{"post":"Girls soccer preseason scrimmage","level":"Varsity","date":"Any Tuesday in September","travel":"Home preferred","reply":"2 possible schools"},{"post":"Baseball tournament needs two teams","level":"Varsity","date":"March 14-15","travel":"Neutral site","reply":"6 possible schools"}],"coachCards":[{"step":"Northwood Academy","icon":"BJ","label":"Coach BJ Reynolds","desc":"Varsity baseball shares a regional calendar inside a 250 mile travel radius. You can request an open date before sending any text.","action":"Open calendar"},{"step":"Central Prep","icon":"CP","label":"Coach Morgan Lee","desc":"JV soccer has three shared openings in September. Replies can go by text, email, or both. This team requires AD final approval.","action":"Text coach"},{"step":"Riverview High","icon":"RH","label":"Coach Dana Price","desc":"Varsity basketball is open Sep 12 or Sep 19. Their AD allows coaches to schedule inside distance and blackout rules.","action":"Send dates"},{"step":"Lakeview Academy","icon":"LA","label":"Coach Chris Bell","desc":"Freshman football needs one game. The coach can discuss details, but their AD must publish the event.","action":"Start thread"}],"coachScheduleRows":[{"window":"Sep 16","time":"After 5:30 PM","place":"Central Prep","visibility":"Shared opening","fit":"Works for JV soccer"},{"window":"Sep 18","time":"4:00 PM or 6:00 PM","place":"Home or away","visibility":"Shared opening","fit":"Needs bus check"},{"window":"Sep 20","time":"Morning only","place":"Central Prep","visibility":"Tentative","fit":"AD approval required"},{"window":"Sep 23","time":"Blocked","place":"Not shown","visibility":"Private conflict","fit":"Only shows as unavailable"}],"opponentCalendarStats":[{"icon":"R","label":"Travel radius","value":"250 mi"},{"icon":"D","label":"Drive estimate","value":"3h 20m"},{"icon":"O","label":"Open dates","value":"5"},{"icon":"A","label":"Approval","value":"AD"}],"opponentCalendarWeeks":[{"week":"Sep 8","mon":"Sep 8 unavailable","tue":"Sep 9 open after 5:00","wed":"Sep 10 blocked","thu":"Sep 11 open home","fri":"Sep 12 game booked","sat":"Sep 13 tournament hold"},{"week":"Sep 15","mon":"Sep 15 open away","tue":"Sep 16 practice","wed":"Sep 17 open home","thu":"Sep 18 blocked","fri":"Sep 19 open neutral","sat":"Sep 20 unavailable"},{"week":"Sep 22","mon":"Sep 22 travel hold","tue":"Sep 23 open away","wed":"Sep 24 game booked","thu":"Sep 25 open home","fri":"Sep 26 blocked","sat":"Sep 27 open tournament"}],"opponentRequestRows":[{"date":"Sep 9","time":"After 5:00 PM","bj":"Can host","travel":"Inside 250 miles, bus needed","approval":"AD approval required"},{"date":"Sep 15","time":"4:30 PM","bj":"Can travel","travel":"Home game works","approval":"Coach can request"},{"date":"Sep 17","time":"6:00 PM","bj":"Can host","travel":"Long trip, early release likely","approval":"AD and travel check"},{"date":"Sep 19","time":"7:00 PM","bj":"Neutral site possible","travel":"Meet halfway","approval":"AD approval required"},{"date":"Sep 25","time":"5:30 PM","bj":"Can host","travel":"Inside radius","approval":"Coach can request"}],"coachMessageRows":[{"when":"Draft","who":"You","message":"We can play JV soccer Sep 18 at 6:00. Can you host, or do you want us to host?","status":"Ready to text and email"},{"when":"Reply","who":"Coach Lee","message":"Sep 18 works. We can host if your bus is covered.","status":"Waiting for your confirmation"},{"when":"Rule check","who":"Bricks","message":"Away game is 27 miles and inside rules, but Central Prep requires AD final approval.","status":"Creates approval item"}],"coachFlowCards":[{"step":"1","icon":"S","label":"Share openings","desc":"Each coach chooses the windows other schools can see. Private games, practices, and conflicts stay private.","action":"Availability"},{"step":"2","icon":"M","label":"Text or email","desc":"Messages send from Bricks, log to the request, and keep phone numbers controlled by school policy.","action":"Message"},{"step":"3","icon":"A","label":"Check authority","desc":"The request either schedules immediately, asks the AD, or stays as a coach-only draft.","action":"Rules"},{"step":"4","icon":"E","label":"Publish event","desc":"Once approved, Bricks creates the event, worker checklist, fan briefing, and external system links.","action":"Event"}],"coachCalendarStats":[{"icon":"C","label":"Confirmed games","value":"7"},{"icon":"P","label":"Pending requests","value":"3"},{"icon":"O","label":"Open dates","value":"4"},{"icon":"N","label":"New replies","value":"2"}],"coachCalendarRows":[{"date":"Mar 8","status":"Confirmed","opponent":"Venice HS","site":"Home","next":"Game brief ready"},{"date":"Mar 12","status":"Pending","opponent":"Palmerton HS","site":"Away","next":"Waiting on AD approval"},{"date":"Mar 15","status":"Confirmed","opponent":"Cardinal Mooney","site":"Home","next":"Ticket link needed"},{"date":"Mar 22","status":"Open","opponent":"Advertised opening","site":"Home or away","next":"Find opponent"}],"openDateRows":[{"date":"Mar 12","sport":"Baseball","level":"Varsity","need":"One opponent, home preferred","status":"Awaiting response"},{"date":"Mar 22","sport":"Baseball","level":"JV","need":"Can travel within 35 miles","status":"Posted to nearby coaches"},{"date":"Apr 4","sport":"Softball","level":"Varsity","need":"Tournament fill-in","status":"New replies"}],"notificationRows":[{"when":"Now","item":"Contest confirmed","detail":"Central Prep accepted Sep 18 pending AD approval"},{"when":"10 min","item":"Contract approved","detail":"Riverview varsity basketball moved to confirmed"},{"when":"Today","item":"New school available","detail":"Lakeview Academy shared freshman football openings"}],"approvalCards":[{"step":"Mode","icon":"1","label":"AD final approval","desc":"Coaches can talk and propose dates, but the event does not publish until the AD approves it.","action":"Strict"},{"step":"Mode","icon":"2","label":"Coach within rules","desc":"The coach can schedule if distance, blackout dates, level, travel, and notice rules all pass.","action":"Recommended"},{"step":"Mode","icon":"3","label":"Coach can schedule","desc":"Trusted coaches can confirm games directly. AD gets notified and can still review the calendar.","action":"Fast"},{"step":"Mode","icon":"4","label":"Locked down","desc":"Only the AD creates or confirms games. Useful for varsity football, tournaments, or travel-heavy sports.","action":"Controlled"}],"requestRows":[{"field":"Sport and level","example":"Girls soccer, varsity","backend":"team_id, sport_id, level, season_id"},{"field":"Opponent","example":"Central Prep","backend":"opponent_school_id or external contact"},{"field":"Dates offered","example":"Sep 16, Sep 18, Sep 20","backend":"schedule_invite_options"},{"field":"Authority result","example":"Needs AD approval: out-of-county","backend":"scheduling_rule_evaluations"}],"adApprovalRows":[{"request":"JV soccer at Central Prep","sport":"Soccer","date":"Sep 18, 6:00 PM","owner":"Coach Morgan Lee","status":"Needs AD approval"},{"request":"Varsity basketball vs. Riverview","sport":"Basketball","date":"Sep 19, 7:00 PM","owner":"Coach Dana Price","status":"Contract waiting"},{"request":"Freshman football at Lakeview","sport":"Football","date":"Sep 26","owner":"Coach Chris Bell","status":"Needs travel check"}],"contractRows":[{"field":"Opponent","value":"Central Prep JV soccer"},{"field":"Game time","value":"Sep 18, 6:00 PM"},{"field":"Location","value":"Central Prep"},{"field":"Home/Away","value":"Away"},{"field":"Agreement status","value":"Coach accepted, AD approval needed"}],"contractStepCards":[{"step":"Coach","icon":"C","label":"Coach accepts","desc":"Both coaches agree to the date, time, level, site, and travel assumptions from the request thread.","action":"Accepted"},{"step":"AD","icon":"AD","label":"AD approves","desc":"The AD sees rule checks, paperwork blockers, travel notes, and contract terms before publishing.","action":"Approve"},{"step":"Event","icon":"E","label":"Event publishes","desc":"The approved contract creates the athletic event, worker checklist, calendar entry, and fan briefing.","action":"Publish"}],"coverageRows":[{"date":"Sep 5","event":"Varsity football home opener","admin":"Open","workers":"Gate missing 1","risk":"High attendance"},{"date":"Sep 9","event":"Volleyball district match","admin":"Assistant principal","workers":"Covered","risk":"Normal"},{"date":"Sep 12","event":"Soccer doubleheader","admin":"Open","workers":"Clock open","risk":"Two fields active"},{"date":"Sep 19","event":"Homecoming football","admin":"Principal","workers":"Needs extra gate","risk":"Rivalry crowd"}],"gapRows":[{"gap":"Admin on duty","count":"2 events","fix":"Send September coverage request to principal team"},{"gap":"Ticket workers","count":"3 shifts","fix":"Ask booster club and mark paid worker slots"},{"gap":"Official host","count":"1 event","fix":"Assign a trusted staff member from event worker pool"}],"modelRows":[{"model":"athletic_programs","purpose":"School-level sports, seasons, levels, and who owns each program.","ties":"School OS schools, Workforce employees"},{"model":"athletic_teams","purpose":"Varsity, JV, freshman, middle school teams with coach and AD authority settings.","ties":"Staff roles, permissions, calendars"},{"model":"schedule_requests","purpose":"Coach-to-AD and coach-to-coach proposals, date options, approval state, and audit trail.","ties":"Notifications, email, SMS, calendars"},{"model":"opponent_availability","purpose":"Controlled public availability windows for nearby schools and teams.","ties":"Location radius, contact preferences"},{"model":"schedule_match_preferences","purpose":"Coach matching weights for competition level, travel, relationships, home/away balance, and transportation.","ties":"Opponent search, team history, coach settings"},{"model":"replacement_requests","purpose":"Rainout, cancellation, and late-fill requests with urgency, available dates, radius, and reminder state.","ties":"Open dates, notifications, schedule requests"},{"model":"athletic_events","purpose":"Official games, scrimmages, tournaments, practices, travel, and ticketing facts.","ties":"Calendar, Arbiter, GoFan, transportation"},{"model":"event_assignments","purpose":"Admin, PA, chain crew, clock, book, host, gate workers, security, trainer, and volunteers.","ties":"Workforce, notifications, payroll later"},{"model":"athlete_clearances","purpose":"EL2, EL3, ECG, insurance, courses, travel release, hold harmless, and expiration checks.","ties":"School OS students, privacy fields, documents"},{"model":"student_eligibility_snapshots","purpose":"Weekly grade and credit eligibility pulled from School OS so Athletics can clear rosters without leaving the page.","ties":"School OS grades, attendance, credits, privacy-scoped role access"},{"model":"event_briefings","purpose":"Reusable messages for officials, workers, visiting teams, fans, and admins.","ties":"Communications, groups, audit log"}],"integrationCards":[{"step":"Install","icon":"A","label":"Athletics brick","desc":"Adds athletics models, pages, roles, sample data, and ask contracts without changing School OS internals.","action":"Own brick"},{"step":"Connect","icon":"S","label":"School OS","desc":"References schools, students, employees, calendars, rooms, and staff roles instead of copying them.","action":"Shared records"},{"step":"Notify","icon":"C","label":"Communications","desc":"Uses existing notifications for coach invites, worker texts, fan updates, and admin coverage requests.","action":"One message layer"},{"step":"Extend","icon":"I","label":"Integrations","desc":"Stores external IDs for Arbiter, RQ+, GoFan, transportation, and document systems as optional links.","action":"No lock-in"}]},"template":{"html":"
\n \n \n \n \n \n
\n \n
\n\n
\n \n \n \n \n \n \n \n
\n\n
\n
\n
\n
\n {stat.icon}\n {stat.label}\n {stat.value}\n
\n
\n
\n\n
\n
\n Tonight's game board\n The AD starts here: what is happening, what is missing, and who owns the next move.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
EventReadinessMissingOwnerNext move
{row.event}{row.readiness}{row.missing}{row.owner}{row.next}
\n
\n
\n\n
\n
\n Game-day roles\n Every contest creates the right worker slots by sport, level, venue, and ticketing rules.\n
\n
\n
\n
\n {role.step}\n {role.icon}\n {role.label}\n {role.desc}\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n Briefings ready to send\n Generated from the event record so each group gets only what they need.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
BriefingAudienceIncludes
{row.brief}{row.audience}{row.sends}
\n
\n
\n\n
\n
\n Officials, ticketing, and outside systems\n External tools stay connected to the event instead of living in a side spreadsheet.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SystemWhat it handlesData Bricks storesNext action
ArbiterOfficials assignment and crew statusEvent ID, crew names, fee notes, confirmation stateSync officials before briefing
RefQuestOfficial requests and coverage follow-upRequest ID, assigner contact, pending statusAsk assigner for uncovered games
GoFanTicket link, gate setup, pass list, and scan reportTicket URL, gate rules, worker counts, sales summaryPublish fan link
TransportationBus request, travel distance, and release requirementTrip ID, county rule, departure time, paperwork blockersAttach travel paperwork
\n
\n
\n\n
\n
\n Communication groups\n The same event can send different messages to athletic staff, fans, workers, and officials.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
GroupMessage contentsChannelWhy it matters
Athletic staffGame readiness, paperwork blockers, admin gaps, trainer notesEmail and internal notificationKeeps AD, trainer, coaches, and principals aligned
FansGame time, GoFan link, gate time, parking, sportsmanship notePublic athletics site, email, and textStops repeat questions at the gate
Worker group chatArrival time, role, entrance, who to call, radio channelText thread and Bricks message logCovers gate, PA, chain crew, clock, and hosts
OfficialsParking, locker room, host contact, trainer, special notesEmail, Arbiter note, or RefQuest updateConnects assigner systems to the game briefing
\n
\n
\n
\n\n
\n
\n
\n Controlled availability\n Coaches see open windows, not the other school's whole internal calendar.\n
\n
\n \n \n \n \n
\n
\n
\n
\n {opponent.distance}\n {opponent.school}\n {opponent.window}\n {opponent.need}\n {opponent.rule}\n {opponent.connection}\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n Looking for games board\n A lightweight marketplace for openings, scrimmages, tournaments, and late cancellations.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PostLevelDate windowTravelMatches
{row.post}{row.level}{row.date}{row.travel}{row.reply}
\n
\n
\n
\n\n
\n
\n
\n Coach-to-coach connection\n This is the Calendly-style part: shared openings, controlled contact, and a clean path from calendar request to approved game.\n
\n
\n
\n
\n {coach.step}\n {coach.icon}\n {coach.label}\n {coach.desc}\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n Request-first scheduling\n Coaches said texting takes too long or never gets an answer, so the default path is a tracked calendar or software request. Text and email stay available as fallback channels.\n
\n
\n
\n CR\n Calendar requests\n Primary\n
\n
\n SI\n Software invites\n Tracked\n
\n
\n TE\n Text or email\n Fallback\n
\n
\n NR\n No-reply follow-up\n Visible\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PathHow the coach uses itWhat Bricks tracksBest use
Shared calendar requestOpen BJ's calendar, pick an available date, and click Request date.Sent time, viewed state, accepted date, proposed changes, and AD rule result.Default path when both schools share schedules.
Software invite linkSend one structured request from Bricks instead of a loose text chain.Which dates were offered, who answered, reply age, contract state, and approval state.Good when the other coach is in the system but has not opened their calendar.
Text or email fallbackSend a short message with the same request link for coaches who still live in text or email.The message, reply, reminder history, and schedule request stay attached to the event.Use when a coach is slow to check the software or prefers direct contact.
No-reply follow-upBricks shows unanswered requests and lets the coach remind, switch channel, or ask the AD.Days waiting, last channel used, next reminder, and escalation owner.Stops coaches from wondering who never got back to them.
\n
\n
\n\n
\n
\n Other coach schedule preview\n The coach sees openings the other school chose to share, not the whole internal calendar.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Date windowTimeSiteVisibilityFit
{row.window}{row.time}{row.place}{row.visibility}{row.fit}
\n
\n
\n\n
\n
\n BJ's shared calendar\n Instead of starting with a text, open BJ's shared availability, scan the huge travel radius, and request a date from the calendar.\n
\n
\n \n \n \n \n
\n
\n
\n {stat.icon}\n {stat.label}\n {stat.value}\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
WeekMonTueWedThuFriSat
{row.week}{row.mon}{row.tue}{row.wed}{row.thu}{row.fri}{row.sat}
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateTimeBJ canTravel fitApprovalRequest
{row.date}{row.time}{row.bj}{row.travel}{row.approval}
\n
\n
\n\n
\n
\n
\n {stat.icon}\n {stat.label}\n {stat.value}\n
\n
\n
\n\n
\n
\n Coach calendar\n A coach-facing schedule view with confirmed games, pending requests, and open dates in one place.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateStatusOpponentSiteNext move
{row.date}{row.status}{row.opponent}{row.site}{row.next}
\n
\n
\n\n
\n
\n Open dates\n Coaches can advertise openings to nearby schools without exposing private practices or internal conflicts.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateSportLevelNeedStatus
{row.date}{row.sport}{row.level}{row.need}{row.status}
\n
\n
\n \n \n \n
\n
\n\n
\n
\n Scheduling notifications\n The coach sees the same events the AD sees, filtered to the teams they own.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
WhenItemDetail
{row.when}{row.item}{row.detail}
\n
\n
\n\n
\n
\n Text or email fallback\n Use this when the calendar or software request needs a nudge. Replies still land back on the same schedule request.\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n Thread to schedule\n The conversation stays attached to the request so nobody has to search group chats later.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StepWhoMessageStatus
{row.when}{row.who}{row.message}{row.status}
\n
\n
\n\n
\n
\n What happens after the reply\n The same flow works for coach-only scheduling or AD-controlled sports.\n
\n
\n
\n
\n {step.step}\n {step.icon}\n {step.label}\n {step.desc}\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n Coach schedule request\n One structured request replaces the text thread. The AD can delegate all of it or keep final approval.\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n\n
\n
\n Scheduling authority\n The same brick supports strict AD control, trusted coach scheduling, or rules-based delegation.\n
\n
\n
\n
\n {mode.step}\n {mode.icon}\n {mode.label}\n {mode.desc}\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n AD approval queue\n Coach-agreed games collect here when the school's authority setting requires AD signoff.\n
\n
\n
\n BB\n Baseball\n 2\n
\n
\n SB\n Softball\n 1\n
\n
\n BK\n Basketball\n 3\n
\n
\n SC\n Soccer\n 4\n
\n
\n VB\n Volleyball\n 1\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RequestSportDateOwnerStatus
{row.request}{row.sport}{row.date}{row.owner}{row.status}
\n
\n
\n \n \n \n
\n
\n\n
\n
\n Game contract agreement\n A lightweight contract record turns the text agreement into an auditable event before it hits the public calendar.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
FieldValue
{row.field}{row.value}
\n
\n
\n
\n
\n {step.step}\n {step.icon}\n {step.label}\n {step.desc}\n
\n
\n \n
\n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n What gets saved\n The real event is created only after the authority rule passes.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FieldExampleBack-end record
{row.field}{row.example}{row.backend}
\n
\n
\n
\n\n
\n
\n
\n
\n EL2\n EL2 blockers\n 6\n
\n
\n ECG\n ECG missing\n 4\n
\n
\n TR\n Travel releases\n 8\n
\n
\n OK\n Ready to play\n 86%\n
\n
\n
\n\n
\n
\n Athletic paperwork checklist\n This is where EL2, ECG, hold harmless, AthleticClearance, eligibility, and travel forms live.\n
\n
\n
\n
\n Physical\n EL2\n EL2 physical\n Tracks uploaded physical forms, expiration dates, doctor signature status, and whether the athlete is cleared for contact.\n
\n
\n \n
\n
\n
\n
\n Cardiac\n ECG\n ECG requirement\n Shows who needs ECG paperwork or a waiver before tryouts, practice, travel, or competition.\n
\n
\n \n
\n
\n
\n
\n Consent\n HH\n Hold harmless\n Covers parent release, sport-specific risk language, emergency treatment consent, and signature history.\n
\n
\n \n
\n
\n
\n
\n Travel\n TR\n Out-of-county travel\n Required when a game crosses the county rule, has a long bus window, or needs parent permission before the event can publish.\n
\n
\n \n
\n
\n
\n
\n Import\n AC\n AthleticClearance\n Pulls clearance status, expiration dates, uploaded documents, and blockers into Bricks without duplicating the source system.\n
\n
\n \n
\n
\n
\n
\n Eligibility\n EL\n Eligibility check\n Combines roster, grades, emergency contacts, insurance, training courses, and school-specific signoffs.\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n Complete paperwork here\n The AD, trainer, coach, or office staff can open a student, pick the paperwork item, fill it out, send it for signature, or save it right here.\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n
\n
\n\n
\n
\n Paperwork data tracked\n Each paperwork item keeps the same useful trail: student, status, dates, signatures, source, reviewer, and what it blocks.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PaperworkData capturedWho can fill it outWhat it can block
EL2 physicalExam date, expiration, doctor signature, upload, reviewer, cleared contact statusTrainer, AD, office staff, parent uploadTryout, practice, roster lock, game roster
ECG requirementECG date, waiver, result status, document link, next reminderTrainer, AD, parent upload, AthleticClearance syncTryout, practice, travel, competition
Hold harmlessGuardian signature, emergency treatment consent, risk language version, signed dateParent, AD, office staffRoster activation, travel release, event publish
Out-of-county travelTrip date, opponent, destination, bus need, guardian release, early dismissalCoach, AD, parent, transportation officeBus request, contract approval, public schedule
AthleticClearanceExternal approval, missing items, expiration dates, document links, sync timeSystem sync, trainer, ADReady-to-play status and roster lock
Grade eligibilityCurrent GPA, failed classes, credit pace, attendance flags, eligibility windowGrade sync, AD, registrar, academic staffCompetition eligibility and weekly roster release
\n
\n
\n\n
\n
\n Student and grade eligibility\n Athletics can read the student record and grade snapshot here, so the AD does not have to chase an academic coach for every eligibility check.\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AthleteTeamStudent recordGradesEligibilityNext move
Athlete 24Girls soccer varsitySchool OS student, guardian and emergency contacts connectedOne failing class, GPA watchBlocked until grade reviewSend grade alert to AD and academic contact
Athlete 31Football varsitySchool OS student, current schedule connectedPassing all classesEligible this weekReady for roster release
Athlete 12Volleyball JVSchool OS student, guardian contact missing secondary phoneMissing grade in AlgebraNeeds registrar reviewAsk registrar to confirm grade before match day
Athlete 08Baseball varsitySchool OS student, grade level and credits connectedCredit pace okay, attendance flagWatch listCoach sees eligibility warning, not full private grade detail
\n
\n
\n\n
\n
\n Athlete clearance board\n The AD, trainer, and coach can see who is blocked and what has to happen next.\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AthleteTeamEL2ECGAthleticClearanceHold harmlessTravelNext move
Athlete 24Girls soccer varsityExpires Oct 3MissingPendingSignedNeeded for county lineSend ECG and travel reminders
Athlete 31Football varsityClearedClearedApprovedSignedNot neededReady to play
Athlete 12Volleyball JVNeeds signatureWaiver on fileNeeds reviewUnsignedNot neededParent packet incomplete
Athlete 08Baseball varsityClearedClearedApprovedSignedNeeded for BJ gameCollect out-of-county travel form
\n
\n
\n\n
\n
\n Event paperwork blockers\n Paperwork should block the right event actions: roster lock, bus request, contract approval, and public calendar publish.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
EventBlocked bySourceOwnerDeadlineNext move
Girls soccer at Central PrepOut-of-county travel releaseParent packetHead coachBefore bus requestSend travel form to families
Baseball at Northwood AcademyTravel release and BJ game approvalSchedule requestADBefore contract approvalAttach travel form to request
Football home openerTwo EL2 expirationsAthleticClearance syncAthletic trainerBefore game roster locksReview expired physicals
\n
\n
\n\n
\n
\n Where the records come from\n The Athletics brick owns the clearance record, but it references School OS and external paperwork systems.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SourceBricks recordBrings in
AthleticClearanceathlete_clearancesApproval status, document links, expiration dates, missing requirements
School OS studentsstudent_id referenceRoster identity, guardians, emergency contact, grade level, school
School OS gradesstudent_eligibility_snapshotsCurrent grading window, GPA signal, failed-class count, credit pace, attendance flags, privacy-scoped role access
Parent uploadclearance_documentsEL2, ECG, hold harmless, travel releases, insurance cards
Event scheduleathletic_eventsTravel distance, county rule, sport, level, roster deadline, approval state
\n
\n
\n
\n\n
\n
\n
\n September admin calendar\n The AD can finish a month of admin coverage before the season starts, then fill worker gaps by event.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateEventAdminWorkersRisk
Sep 5Varsity football home openerOpenGate missing 1High attendance
Sep 9Volleyball district matchAssistant principalCoveredNormal
Sep 12Soccer doubleheaderOpenClock openTwo fields active
Sep 19Homecoming footballPrincipalNeeds extra gateRivalry crowd
\n
\n
\n\n
\n
\n Coverage gaps\n The page should push the painful asks to the top instead of making the AD hunt through every event.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
GapHow manySuggested fix
Admin on duty2 eventsSend September coverage request to principal team
Ticket workers3 shiftsAsk booster club and mark paid worker slots
Official host1 eventAssign a trusted staff member from event worker pool
\n
\n
\n
\n\n
\n
\n
\n How this becomes a brick\n Athletics owns its own models and pages, then references School OS, Workforce, documents, and communication records where needed.\n
\n
\n
\n
\n Install\n A\n Athletics brick\n Adds athletics models, pages, roles, sample data, and ask contracts without changing School OS internals.\n
\n
\n \n
\n
\n
\n
\n Connect\n S\n School OS\n References schools, students, employees, calendars, rooms, and staff roles instead of copying them.\n
\n
\n \n
\n
\n
\n
\n Notify\n C\n Communications\n Uses existing notifications for coach invites, worker texts, fan updates, and admin coverage requests.\n
\n
\n \n
\n
\n
\n
\n Extend\n I\n Integrations\n Stores external IDs for Arbiter, RQ+, GoFan, transportation, and document systems as optional links.\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n Athletics site flow\n Web Studio can keep the school website while the Athletics brick publishes the sports-specific pages from approved records.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SurfaceOwnerWhat lives thereHow it connects
School siteWeb StudioMain school pages, admissions, news, district contentLinks into Athletics for sports details
Athletics homeAthletics brickSports directory, today's games, ticket links, fan noticesReads athletic_events, GoFan links, and fan briefings
Team pagesCoaches and ADRoster-safe team info, schedules, coach contact, open datesReads athletic_teams and approved events
Public scheduleAD approvedConfirmed games, ticket status, venue notes, travel notesWaits for paperwork, contract, worker, and admin readiness
\n
\n
\n\n
\n
\n First model pass\n This is the back-end spine I would start from before adding integrations.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ModelPurposeTies into
athletic_programsSchool-level sports, seasons, levels, and who owns each program.School OS schools, Workforce employees
athletic_teamsVarsity, JV, freshman, middle school teams with coach and AD authority settings.Staff roles, permissions, calendars
schedule_requestsCoach-to-AD and coach-to-coach proposals, date options, approval state, and audit trail.Notifications, email, SMS, calendars
opponent_availabilityControlled public availability windows for nearby schools and teams.Location radius, contact preferences
schedule_match_preferencesCoach matching weights for competition level, travel, relationships, home/away balance, and transportation.Opponent search, team history, coach settings
replacement_requestsRainout, cancellation, and late-fill requests with urgency, available dates, radius, and reminder state.Open dates, notifications, schedule requests
athletic_eventsOfficial games, scrimmages, tournaments, practices, travel, and ticketing facts.Calendar, Arbiter, GoFan, transportation
event_assignmentsAdmin, PA, chain crew, clock, book, host, gate workers, security, trainer, and volunteers.Workforce, notifications, payroll later
athlete_clearancesEL2, EL3, ECG, insurance, courses, travel release, hold harmless, and expiration checks.School OS students, privacy fields, documents
student_eligibility_snapshotsWeekly grade and credit eligibility pulled from School OS so Athletics can clear rosters without leaving the page.School OS grades, attendance, credits, privacy-scoped role access
event_briefingsReusable messages for officials, workers, visiting teams, fans, and admins.Communications, groups, audit log
\n
\n
\n
"},"actions":[{"name":"showCommand","code":"return {\n commandActive: true,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n opsStats: [\n { icon: \"!\", label: \"Uncovered events\", value: \"3\" },\n { icon: \"A\", label: \"Admin gaps\", value: \"2\" },\n { icon: \"R\", label: \"Coach requests\", value: \"7\" },\n { icon: \"P\", label: \"Clearance blockers\", value: \"18\" }\n ],\n eventRows: [\n { event: \"Varsity football vs. West County\", readiness: \"Needs admin\", missing: \"Admin on duty, second gate worker\", owner: \"Athletic Director\", next: \"Ask principal team for Friday coverage\" },\n { event: \"JV volleyball tri-match\", readiness: \"Almost ready\", missing: \"PA script, visiting team host\", owner: \"Assistant AD\", next: \"Send worker briefing by noon\" },\n { event: \"Girls soccer away scrimmage\", readiness: \"Needs paperwork\", missing: \"Out-of-county travel release\", owner: \"Head coach\", next: \"Collect parent signatures before bus request\" }\n ],\n roleCards: [\n { step: \"Game control\", icon: \"AD\", label: \"Admin on duty\", desc: \"Visible supervisor, crowd decisions, incident notes, and final call on escalations.\", action: \"Assign admin\" },\n { step: \"Football\", icon: \"CC\", label: \"Chain crew\", desc: \"Crew names, arrival time, sideline, backup chains, and radio contact.\", action: \"Fill crew\" },\n { step: \"Press box\", icon: \"PA\", label: \"PA announcer\", desc: \"Script, pronunciations, emergency reads, sportsmanship reminders, and sponsor reads.\", action: \"Open script\" },\n { step: \"Gate\", icon: \"$\", label: \"Ticket takers and sellers\", desc: \"GoFan link, pass list, scanner setup, cash exception rules, paid worker slots, and gate report.\", action: \"Set gate plan\" },\n { step: \"Officials\", icon: \"OF\", label: \"Official host\", desc: \"Parking, locker room, water, names, fee notes, and halftime/postgame escort.\", action: \"Add host\" },\n { step: \"Home\", icon: \"HH\", label: \"Home team host\", desc: \"Bench setup, locker room, trainer access, student section notes, and coach arrival plan.\", action: \"Assign host\" },\n { step: \"Visitors\", icon: \"VH\", label: \"Visiting team host\", desc: \"Bus parking, locker room, warmup space, trainer access, and return route.\", action: \"Add host\" },\n { step: \"Table\", icon: \"CL\", label: \"Clock and official book\", desc: \"Basketball clock operator, official scorebook, scoreboard test, rules notes, and backup person.\", action: \"Assign table\" },\n { step: \"Safety\", icon: \"EAP\", label: \"Trainer and emergency plan\", desc: \"Athletic trainer, AED location, weather plan, EMS access, and evacuation script.\", action: \"Review plan\" }\n ],\n briefingRows: [\n { brief: \"Officials packet\", audience: \"Crew and assigner\", sends: \"Parking, host phone, locker room, special events, trainer location\" },\n { brief: \"Fan update\", audience: \"Home and visiting fans\", sends: \"GoFan link, gate time, prohibited items, parking, sportsmanship reminder\" },\n { brief: \"Worker text\", audience: \"Gate, PA, chain crew, clock, host\", sends: \"Report time, role, entrance, radio channel, who to call\" }\n ]\n};"},{"name":"showFinder","code":"return {\n commandActive: false,\n finderActive: true,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n opponentCards: [\n { school: \"Riverview High\", distance: \"18 miles\", window: \"Sep 12 or Sep 19\", need: \"Varsity boys basketball, home or away\", rule: \"Coach can schedule within rules\", connection: \"Played last season\" },\n { school: \"Central Prep\", distance: \"27 miles\", window: \"Sep 16-20\", need: \"JV soccer scrimmage, willing to travel\", rule: \"AD final approval\", connection: \"New connection\" },\n { school: \"Lakeview Academy\", distance: \"34 miles\", window: \"Sep 26\", need: \"Freshman football, home game preferred\", rule: \"Coach can propose only\", connection: \"Shared district contact\" }\n ],\n gameBoardRows: [\n { post: \"Need one more JV football game\", level: \"JV\", date: \"Weeks 3 or 4\", travel: \"25 miles\", reply: \"4 possible schools\" },\n { post: \"Girls soccer preseason scrimmage\", level: \"Varsity\", date: \"Any Tuesday in September\", travel: \"Home preferred\", reply: \"2 possible schools\" },\n { post: \"Baseball tournament needs two teams\", level: \"Varsity\", date: \"March 14-15\", travel: \"Neutral site\", reply: \"6 possible schools\" }\n ]\n};"},{"name":"showCoach","code":"return {\n commandActive: false,\n finderActive: false,\n coachActive: true,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n coachCards: [\n { step: \"Northwood Academy\", icon: \"BJ\", label: \"Coach BJ Reynolds\", desc: \"Varsity baseball shares a regional calendar inside a 250 mile travel radius. You can request an open date before sending any text.\", action: \"Open calendar\" },\n { step: \"Central Prep\", icon: \"CP\", label: \"Coach Morgan Lee\", desc: \"JV soccer has three shared openings in September. Replies can go by text, email, or both. This team requires AD final approval.\", action: \"Text coach\" },\n { step: \"Riverview High\", icon: \"RH\", label: \"Coach Dana Price\", desc: \"Varsity basketball is open Sep 12 or Sep 19. Their AD allows coaches to schedule inside distance and blackout rules.\", action: \"Send dates\" },\n { step: \"Lakeview Academy\", icon: \"LA\", label: \"Coach Chris Bell\", desc: \"Freshman football needs one game. The coach can discuss details, but their AD must publish the event.\", action: \"Start thread\" }\n ],\n coachScheduleRows: [\n { window: \"Sep 16\", time: \"After 5:30 PM\", place: \"Central Prep\", visibility: \"Shared opening\", fit: \"Works for JV soccer\" },\n { window: \"Sep 18\", time: \"4:00 PM or 6:00 PM\", place: \"Home or away\", visibility: \"Shared opening\", fit: \"Needs bus check\" },\n { window: \"Sep 20\", time: \"Morning only\", place: \"Central Prep\", visibility: \"Tentative\", fit: \"AD approval required\" },\n { window: \"Sep 23\", time: \"Blocked\", place: \"Not shown\", visibility: \"Private conflict\", fit: \"Only shows as unavailable\" }\n ],\n opponentCalendarStats: [\n { icon: \"R\", label: \"Travel radius\", value: \"250 mi\" },\n { icon: \"D\", label: \"Drive estimate\", value: \"3h 20m\" },\n { icon: \"O\", label: \"Open dates\", value: \"5\" },\n { icon: \"A\", label: \"Approval\", value: \"AD\" }\n ],\n opponentCalendarWeeks: [\n { week: \"Sep 8\", mon: \"Sep 8 unavailable\", tue: \"Sep 9 open after 5:00\", wed: \"Sep 10 blocked\", thu: \"Sep 11 open home\", fri: \"Sep 12 game booked\", sat: \"Sep 13 tournament hold\" },\n { week: \"Sep 15\", mon: \"Sep 15 open away\", tue: \"Sep 16 practice\", wed: \"Sep 17 open home\", thu: \"Sep 18 blocked\", fri: \"Sep 19 open neutral\", sat: \"Sep 20 unavailable\" },\n { week: \"Sep 22\", mon: \"Sep 22 travel hold\", tue: \"Sep 23 open away\", wed: \"Sep 24 game booked\", thu: \"Sep 25 open home\", fri: \"Sep 26 blocked\", sat: \"Sep 27 open tournament\" }\n ],\n opponentRequestRows: [\n { date: \"Sep 9\", time: \"After 5:00 PM\", bj: \"Can host\", travel: \"Inside 250 miles, bus needed\", approval: \"AD approval required\" },\n { date: \"Sep 15\", time: \"4:30 PM\", bj: \"Can travel\", travel: \"Home game works\", approval: \"Coach can request\" },\n { date: \"Sep 17\", time: \"6:00 PM\", bj: \"Can host\", travel: \"Long trip, early release likely\", approval: \"AD and travel check\" },\n { date: \"Sep 19\", time: \"7:00 PM\", bj: \"Neutral site possible\", travel: \"Meet halfway\", approval: \"AD approval required\" },\n { date: \"Sep 25\", time: \"5:30 PM\", bj: \"Can host\", travel: \"Inside radius\", approval: \"Coach can request\" }\n ],\n coachCalendarStats: [\n { icon: \"C\", label: \"Confirmed games\", value: \"7\" },\n { icon: \"P\", label: \"Pending requests\", value: \"3\" },\n { icon: \"O\", label: \"Open dates\", value: \"4\" },\n { icon: \"N\", label: \"New replies\", value: \"2\" }\n ],\n coachCalendarRows: [\n { date: \"Mar 8\", status: \"Confirmed\", opponent: \"Venice HS\", site: \"Home\", next: \"Game brief ready\" },\n { date: \"Mar 12\", status: \"Pending\", opponent: \"Palmerton HS\", site: \"Away\", next: \"Waiting on AD approval\" },\n { date: \"Mar 15\", status: \"Confirmed\", opponent: \"Cardinal Mooney\", site: \"Home\", next: \"Ticket link needed\" },\n { date: \"Mar 22\", status: \"Open\", opponent: \"Advertised opening\", site: \"Home or away\", next: \"Find opponent\" }\n ],\n openDateRows: [\n { date: \"Mar 12\", sport: \"Baseball\", level: \"Varsity\", need: \"One opponent, home preferred\", status: \"Awaiting response\" },\n { date: \"Mar 22\", sport: \"Baseball\", level: \"JV\", need: \"Can travel within 35 miles\", status: \"Posted to nearby coaches\" },\n { date: \"Apr 4\", sport: \"Softball\", level: \"Varsity\", need: \"Tournament fill-in\", status: \"New replies\" }\n ],\n notificationRows: [\n { when: \"Now\", item: \"Contest confirmed\", detail: \"Central Prep accepted Sep 18 pending AD approval\" },\n { when: \"10 min\", item: \"Contract approved\", detail: \"Riverview varsity basketball moved to confirmed\" },\n { when: \"Today\", item: \"New school available\", detail: \"Lakeview Academy shared freshman football openings\" }\n ],\n coachMessageRows: [\n { when: \"Draft\", who: \"You\", message: \"We can play JV soccer Sep 18 at 6:00. Can you host, or do you want us to host?\", status: \"Ready to text and email\" },\n { when: \"Reply\", who: \"Coach Lee\", message: \"Sep 18 works. We can host if your bus is covered.\", status: \"Waiting for your confirmation\" },\n { when: \"Rule check\", who: \"Bricks\", message: \"Away game is 27 miles and inside rules, but Central Prep requires AD final approval.\", status: \"Creates approval item\" }\n ],\n coachFlowCards: [\n { step: \"1\", icon: \"S\", label: \"Share openings\", desc: \"Each coach chooses the windows other schools can see. Private games, practices, and conflicts stay private.\", action: \"Availability\" },\n { step: \"2\", icon: \"M\", label: \"Text or email\", desc: \"Messages send from Bricks, log to the request, and keep phone numbers controlled by school policy.\", action: \"Message\" },\n { step: \"3\", icon: \"A\", label: \"Check authority\", desc: \"The request either schedules immediately, asks the AD, or stays as a coach-only draft.\", action: \"Rules\" },\n { step: \"4\", icon: \"E\", label: \"Publish event\", desc: \"Once approved, Bricks creates the event, worker checklist, fan briefing, and external system links.\", action: \"Event\" }\n ]\n};"},{"name":"showRequest","code":"return {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: true,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n approvalCards: [\n { step: \"Mode\", icon: \"1\", label: \"AD final approval\", desc: \"Coaches can talk and propose dates, but the event does not publish until the AD approves it.\", action: \"Strict\" },\n { step: \"Mode\", icon: \"2\", label: \"Coach within rules\", desc: \"The coach can schedule if distance, blackout dates, level, travel, and notice rules all pass.\", action: \"Recommended\" },\n { step: \"Mode\", icon: \"3\", label: \"Coach can schedule\", desc: \"Trusted coaches can confirm games directly. AD gets notified and can still review the calendar.\", action: \"Fast\" },\n { step: \"Mode\", icon: \"4\", label: \"Locked down\", desc: \"Only the AD creates or confirms games. Useful for varsity football, tournaments, or travel-heavy sports.\", action: \"Controlled\" }\n ],\n requestRows: [\n { field: \"Sport and level\", example: \"Girls soccer, varsity\", backend: \"team_id, sport_id, level, season_id\" },\n { field: \"Opponent\", example: \"Central Prep\", backend: \"opponent_school_id or external contact\" },\n { field: \"Dates offered\", example: \"Sep 16, Sep 18, Sep 20\", backend: \"schedule_invite_options\" },\n { field: \"Authority result\", example: \"Needs AD approval: out-of-county\", backend: \"scheduling_rule_evaluations\" }\n ],\n adApprovalRows: [\n { request: \"JV soccer at Central Prep\", sport: \"Soccer\", date: \"Sep 18, 6:00 PM\", owner: \"Coach Morgan Lee\", status: \"Needs AD approval\" },\n { request: \"Varsity basketball vs. Riverview\", sport: \"Basketball\", date: \"Sep 19, 7:00 PM\", owner: \"Coach Dana Price\", status: \"Contract waiting\" },\n { request: \"Freshman football at Lakeview\", sport: \"Football\", date: \"Sep 26\", owner: \"Coach Chris Bell\", status: \"Needs travel check\" }\n ],\n contractRows: [\n { field: \"Opponent\", value: \"Central Prep JV soccer\" },\n { field: \"Game time\", value: \"Sep 18, 6:00 PM\" },\n { field: \"Location\", value: \"Central Prep\" },\n { field: \"Home/Away\", value: \"Away\" },\n { field: \"Agreement status\", value: \"Coach accepted, AD approval needed\" }\n ],\n contractStepCards: [\n { step: \"Coach\", icon: \"C\", label: \"Coach accepts\", desc: \"Both coaches agree to the date, time, level, site, and travel assumptions from the request thread.\", action: \"Accepted\" },\n { step: \"AD\", icon: \"AD\", label: \"AD approves\", desc: \"The AD sees rule checks, paperwork blockers, travel notes, and contract terms before publishing.\", action: \"Approve\" },\n { step: \"Event\", icon: \"E\", label: \"Event publishes\", desc: \"The approved contract creates the athletic event, worker checklist, calendar entry, and fan briefing.\", action: \"Publish\" }\n ]\n};"},{"name":"showPaperwork","code":"return {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: true,\n coverageActive: false,\n modelActive: false,\n paperworkStats: [\n { icon: \"EL2\", label: \"EL2 blockers\", value: \"6\" },\n { icon: \"ECG\", label: \"ECG missing\", value: \"4\" },\n { icon: \"TR\", label: \"Travel releases\", value: \"8\" },\n { icon: \"OK\", label: \"Ready to play\", value: \"86%\" }\n ],\n paperworkCards: [\n { step: \"Physical\", icon: \"EL2\", label: \"EL2 physical\", desc: \"Tracks uploaded physical forms, expiration dates, doctor signature status, and whether the athlete is cleared for contact.\", action: \"Review EL2\" },\n { step: \"Cardiac\", icon: \"ECG\", label: \"ECG requirement\", desc: \"Shows who needs ECG paperwork or a waiver before tryouts, practice, travel, or competition.\", action: \"Check ECG\" },\n { step: \"Consent\", icon: \"HH\", label: \"Hold harmless\", desc: \"Covers parent release, sport-specific risk language, emergency treatment consent, and signature history.\", action: \"Send release\" },\n { step: \"Travel\", icon: \"TR\", label: \"Out-of-county travel\", desc: \"Required when a game crosses the county rule, has a long bus window, or needs parent permission before the event can publish.\", action: \"Collect travel\" },\n { step: \"Import\", icon: \"AC\", label: \"AthleticClearance\", desc: \"Pulls clearance status, expiration dates, uploaded documents, and blockers into Bricks without duplicating the source system.\", action: \"Sync status\" },\n { step: \"Eligibility\", icon: \"EL\", label: \"Eligibility check\", desc: \"Combines roster, grades, emergency contacts, insurance, training courses, and school-specific signoffs.\", action: \"Run check\" }\n ],\n clearanceRows: [\n { athlete: \"Athlete 24\", team: \"Girls soccer varsity\", el2: \"Expires Oct 3\", ecg: \"Missing\", athleticClearance: \"Pending\", holdHarmless: \"Signed\", travel: \"Needed for county line\", next: \"Send ECG and travel reminders\" },\n { athlete: \"Athlete 31\", team: \"Football varsity\", el2: \"Cleared\", ecg: \"Cleared\", athleticClearance: \"Approved\", holdHarmless: \"Signed\", travel: \"Not needed\", next: \"Ready to play\" },\n { athlete: \"Athlete 12\", team: \"Volleyball JV\", el2: \"Needs signature\", ecg: \"Waiver on file\", athleticClearance: \"Needs review\", holdHarmless: \"Unsigned\", travel: \"Not needed\", next: \"Parent packet incomplete\" },\n { athlete: \"Athlete 08\", team: \"Baseball varsity\", el2: \"Cleared\", ecg: \"Cleared\", athleticClearance: \"Approved\", holdHarmless: \"Signed\", travel: \"Needed for BJ game\", next: \"Collect out-of-county travel form\" }\n ],\n eventPaperworkRows: [\n { event: \"Girls soccer at Central Prep\", blockedBy: \"Out-of-county travel release\", source: \"Parent packet\", owner: \"Head coach\", deadline: \"Before bus request\", next: \"Send travel form to families\" },\n { event: \"Baseball at Northwood Academy\", blockedBy: \"Travel release and BJ game approval\", source: \"Schedule request\", owner: \"AD\", deadline: \"Before contract approval\", next: \"Attach travel form to request\" },\n { event: \"Football home opener\", blockedBy: \"Two EL2 expirations\", source: \"AthleticClearance sync\", owner: \"Athletic trainer\", deadline: \"Before game roster locks\", next: \"Review expired physicals\" }\n ],\n paperworkSourceRows: [\n { source: \"AthleticClearance\", bricksRecord: \"athlete_clearances\", bringsIn: \"Approval status, document links, expiration dates, missing requirements\" },\n { source: \"School OS students\", bricksRecord: \"student_id reference\", bringsIn: \"Roster identity, guardians, emergency contact, grade level, school\" },\n { source: \"School OS grades\", bricksRecord: \"student_eligibility_snapshots\", bringsIn: \"Current grading window, GPA signal, failed-class count, credit pace, attendance flags\" },\n { source: \"Parent upload\", bricksRecord: \"clearance_documents\", bringsIn: \"EL2, ECG, hold harmless, travel releases, insurance cards\" },\n { source: \"Event schedule\", bricksRecord: \"athletic_events\", bringsIn: \"Travel distance, county rule, sport, level, roster deadline, approval state\" }\n ]\n};"},{"name":"showCoverage","code":"return {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: true,\n modelActive: false,\n coverageRows: [\n { date: \"Sep 5\", event: \"Varsity football home opener\", admin: \"Open\", workers: \"Gate missing 1\", risk: \"High attendance\" },\n { date: \"Sep 9\", event: \"Volleyball district match\", admin: \"Assistant principal\", workers: \"Covered\", risk: \"Normal\" },\n { date: \"Sep 12\", event: \"Soccer doubleheader\", admin: \"Open\", workers: \"Clock open\", risk: \"Two fields active\" },\n { date: \"Sep 19\", event: \"Homecoming football\", admin: \"Principal\", workers: \"Needs extra gate\", risk: \"Rivalry crowd\" }\n ],\n gapRows: [\n { gap: \"Admin on duty\", count: \"2 events\", fix: \"Send September coverage request to principal team\" },\n { gap: \"Ticket workers\", count: \"3 shifts\", fix: \"Ask booster club and mark paid worker slots\" },\n { gap: \"Official host\", count: \"1 event\", fix: \"Assign a trusted staff member from event worker pool\" }\n ]\n};"},{"name":"showModel","code":"return {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: true,\n modelRows: [\n { model: \"athletic_programs\", purpose: \"School-level sports, seasons, levels, and who owns each program.\", ties: \"School OS schools, Workforce employees\" },\n { model: \"athletic_teams\", purpose: \"Varsity, JV, freshman, middle school teams with coach and AD authority settings.\", ties: \"Staff roles, permissions, calendars\" },\n { model: \"schedule_requests\", purpose: \"Coach-to-AD and coach-to-coach proposals, date options, approval state, and audit trail.\", ties: \"Notifications, email, SMS, calendars\" },\n { model: \"opponent_availability\", purpose: \"Controlled public availability windows for nearby schools and teams.\", ties: \"Location radius, contact preferences\" },\n { model: \"schedule_match_preferences\", purpose: \"Coach matching weights for competition level, travel, relationships, home/away balance, and transportation.\", ties: \"Opponent search, team history, coach settings\" },\n { model: \"replacement_requests\", purpose: \"Rainout, cancellation, and late-fill requests with urgency, available dates, radius, and reminder state.\", ties: \"Open dates, notifications, schedule requests\" },\n { model: \"athletic_events\", purpose: \"Official games, scrimmages, tournaments, practices, travel, and ticketing facts.\", ties: \"Calendar, Arbiter, GoFan, transportation\" },\n { model: \"event_assignments\", purpose: \"Admin, PA, chain crew, clock, book, host, gate workers, security, trainer, and volunteers.\", ties: \"Workforce, notifications, payroll later\" },\n { model: \"athlete_clearances\", purpose: \"EL2, EL3, ECG, insurance, courses, travel release, hold harmless, and expiration checks.\", ties: \"School OS students, privacy fields, documents\" },\n { model: \"student_eligibility_snapshots\", purpose: \"Weekly grade and credit eligibility pulled from School OS so Athletics can clear rosters without leaving the page.\", ties: \"School OS grades, attendance, credits, privacy-scoped role access\" },\n { model: \"event_briefings\", purpose: \"Reusable messages for officials, workers, visiting teams, fans, and admins.\", ties: \"Communications, groups, audit log\" }\n ],\n integrationCards: [\n { step: \"Install\", icon: \"A\", label: \"Athletics brick\", desc: \"Adds athletics models, pages, roles, sample data, and ask contracts without changing School OS internals.\", action: \"Own brick\" },\n { step: \"Connect\", icon: \"S\", label: \"School OS\", desc: \"References schools, students, employees, calendars, rooms, and staff roles instead of copying them.\", action: \"Shared records\" },\n { step: \"Notify\", icon: \"C\", label: \"Communications\", desc: \"Uses existing notifications for coach invites, worker texts, fan updates, and admin coverage requests.\", action: \"One message layer\" },\n { step: \"Extend\", icon: \"I\", label: \"Integrations\", desc: \"Stores external IDs for Arbiter, RQ+, GoFan, transportation, and document systems as optional links.\", action: \"No lock-in\" }\n ]\n};"}],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Athletics Ops Prototype\nroute: /developer-tools/athletics-ops-prototype\n---\n\n# Athletics Ops Prototype\n\nTemporary screens for the Athletics Operations brick: scheduling, opponent matching, clearance, coverage, and game-day command.\n\n```state\n{\n \"commandActive\": true,\n \"finderActive\": false,\n \"coachActive\": false,\n \"requestActive\": false,\n \"paperworkActive\": false,\n \"coverageActive\": false,\n \"modelActive\": false,\n \"opsStats\": [\n { \"icon\": \"!\", \"label\": \"Uncovered events\", \"value\": \"3\" },\n { \"icon\": \"A\", \"label\": \"Admin gaps\", \"value\": \"2\" },\n { \"icon\": \"R\", \"label\": \"Coach requests\", \"value\": \"7\" },\n { \"icon\": \"P\", \"label\": \"Clearance blockers\", \"value\": \"18\" }\n ],\n \"eventRows\": [\n { \"event\": \"Varsity football vs. West County\", \"readiness\": \"Needs admin\", \"missing\": \"Admin on duty, second gate worker\", \"owner\": \"Athletic Director\", \"next\": \"Ask principal team for Friday coverage\" },\n { \"event\": \"JV volleyball tri-match\", \"readiness\": \"Almost ready\", \"missing\": \"PA script, visiting team host\", \"owner\": \"Assistant AD\", \"next\": \"Send worker briefing by noon\" },\n { \"event\": \"Girls soccer away scrimmage\", \"readiness\": \"Needs paperwork\", \"missing\": \"Out-of-county travel release\", \"owner\": \"Head coach\", \"next\": \"Collect parent signatures before bus request\" }\n ],\n \"roleCards\": [\n { \"step\": \"Game control\", \"icon\": \"AD\", \"label\": \"Admin on duty\", \"desc\": \"Visible supervisor, crowd decisions, incident notes, and final call on escalations.\", \"action\": \"Assign admin\" },\n { \"step\": \"Football\", \"icon\": \"CC\", \"label\": \"Chain crew\", \"desc\": \"Crew names, arrival time, sideline, backup chains, and radio contact.\", \"action\": \"Fill crew\" },\n { \"step\": \"Press box\", \"icon\": \"PA\", \"label\": \"PA announcer\", \"desc\": \"Script, pronunciations, emergency reads, sportsmanship reminders, and sponsor reads.\", \"action\": \"Open script\" },\n { \"step\": \"Gate\", \"icon\": \"$\", \"label\": \"Ticket takers and sellers\", \"desc\": \"GoFan link, pass list, scanner setup, cash exception rules, paid worker slots, and gate report.\", \"action\": \"Set gate plan\" },\n { \"step\": \"Officials\", \"icon\": \"OF\", \"label\": \"Official host\", \"desc\": \"Parking, locker room, water, names, fee notes, and halftime/postgame escort.\", \"action\": \"Add host\" },\n { \"step\": \"Home\", \"icon\": \"HH\", \"label\": \"Home team host\", \"desc\": \"Bench setup, locker room, trainer access, student section notes, and coach arrival plan.\", \"action\": \"Assign host\" },\n { \"step\": \"Visitors\", \"icon\": \"VH\", \"label\": \"Visiting team host\", \"desc\": \"Bus parking, locker room, warmup space, trainer access, and return route.\", \"action\": \"Add host\" },\n { \"step\": \"Table\", \"icon\": \"CL\", \"label\": \"Clock and official book\", \"desc\": \"Basketball clock operator, official scorebook, scoreboard test, rules notes, and backup person.\", \"action\": \"Assign table\" },\n { \"step\": \"Safety\", \"icon\": \"EAP\", \"label\": \"Trainer and emergency plan\", \"desc\": \"Athletic trainer, AED location, weather plan, EMS access, and evacuation script.\", \"action\": \"Review plan\" }\n ],\n \"briefingRows\": [\n { \"brief\": \"Officials packet\", \"audience\": \"Crew and assigner\", \"sends\": \"Parking, host phone, locker room, special events, trainer location\" },\n { \"brief\": \"Fan update\", \"audience\": \"Home and visiting fans\", \"sends\": \"GoFan link, gate time, prohibited items, parking, sportsmanship reminder\" },\n { \"brief\": \"Worker text\", \"audience\": \"Gate, PA, chain crew, clock, host\", \"sends\": \"Report time, role, entrance, radio channel, who to call\" }\n ],\n \"paperworkStats\": [\n { \"icon\": \"EL2\", \"label\": \"EL2 blockers\", \"value\": \"6\" },\n { \"icon\": \"ECG\", \"label\": \"ECG missing\", \"value\": \"4\" },\n { \"icon\": \"TR\", \"label\": \"Travel releases\", \"value\": \"8\" },\n { \"icon\": \"OK\", \"label\": \"Ready to play\", \"value\": \"86%\" }\n ],\n \"paperworkCards\": [\n { \"step\": \"Physical\", \"icon\": \"EL2\", \"label\": \"EL2 physical\", \"desc\": \"Tracks uploaded physical forms, expiration dates, doctor signature status, and whether the athlete is cleared for contact.\", \"action\": \"Review EL2\" },\n { \"step\": \"Cardiac\", \"icon\": \"ECG\", \"label\": \"ECG requirement\", \"desc\": \"Shows who needs ECG paperwork or a waiver before tryouts, practice, travel, or competition.\", \"action\": \"Check ECG\" },\n { \"step\": \"Consent\", \"icon\": \"HH\", \"label\": \"Hold harmless\", \"desc\": \"Covers parent release, sport-specific risk language, emergency treatment consent, and signature history.\", \"action\": \"Send release\" },\n { \"step\": \"Travel\", \"icon\": \"TR\", \"label\": \"Out-of-county travel\", \"desc\": \"Required when a game crosses the county rule, has a long bus window, or needs parent permission before the event can publish.\", \"action\": \"Collect travel\" },\n { \"step\": \"Import\", \"icon\": \"AC\", \"label\": \"AthleticClearance\", \"desc\": \"Pulls clearance status, expiration dates, uploaded documents, and blockers into Bricks without duplicating the source system.\", \"action\": \"Sync status\" },\n { \"step\": \"Eligibility\", \"icon\": \"EL\", \"label\": \"Eligibility check\", \"desc\": \"Combines roster, grades, emergency contacts, insurance, training courses, and school-specific signoffs.\", \"action\": \"Run check\" }\n ],\n \"clearanceRows\": [\n { \"athlete\": \"Athlete 24\", \"team\": \"Girls soccer varsity\", \"el2\": \"Expires Oct 3\", \"ecg\": \"Missing\", \"athleticClearance\": \"Pending\", \"holdHarmless\": \"Signed\", \"travel\": \"Needed for county line\", \"next\": \"Send ECG and travel reminders\" },\n { \"athlete\": \"Athlete 31\", \"team\": \"Football varsity\", \"el2\": \"Cleared\", \"ecg\": \"Cleared\", \"athleticClearance\": \"Approved\", \"holdHarmless\": \"Signed\", \"travel\": \"Not needed\", \"next\": \"Ready to play\" },\n { \"athlete\": \"Athlete 12\", \"team\": \"Volleyball JV\", \"el2\": \"Needs signature\", \"ecg\": \"Waiver on file\", \"athleticClearance\": \"Needs review\", \"holdHarmless\": \"Unsigned\", \"travel\": \"Not needed\", \"next\": \"Parent packet incomplete\" },\n { \"athlete\": \"Athlete 08\", \"team\": \"Baseball varsity\", \"el2\": \"Cleared\", \"ecg\": \"Cleared\", \"athleticClearance\": \"Approved\", \"holdHarmless\": \"Signed\", \"travel\": \"Needed for BJ game\", \"next\": \"Collect out-of-county travel form\" }\n ],\n \"eventPaperworkRows\": [\n { \"event\": \"Girls soccer at Central Prep\", \"blockedBy\": \"Out-of-county travel release\", \"source\": \"Parent packet\", \"owner\": \"Head coach\", \"deadline\": \"Before bus request\", \"next\": \"Send travel form to families\" },\n { \"event\": \"Baseball at Northwood Academy\", \"blockedBy\": \"Travel release and BJ game approval\", \"source\": \"Schedule request\", \"owner\": \"AD\", \"deadline\": \"Before contract approval\", \"next\": \"Attach travel form to request\" },\n { \"event\": \"Football home opener\", \"blockedBy\": \"Two EL2 expirations\", \"source\": \"AthleticClearance sync\", \"owner\": \"Athletic trainer\", \"deadline\": \"Before game roster locks\", \"next\": \"Review expired physicals\" }\n ],\n \"paperworkSourceRows\": [\n { \"source\": \"AthleticClearance\", \"bricksRecord\": \"athlete_clearances\", \"bringsIn\": \"Approval status, document links, expiration dates, missing requirements\" },\n { \"source\": \"School OS students\", \"bricksRecord\": \"student_id reference\", \"bringsIn\": \"Roster identity, guardians, emergency contact, grade level, school\" },\n { \"source\": \"School OS grades\", \"bricksRecord\": \"student_eligibility_snapshots\", \"bringsIn\": \"Current grading window, GPA signal, failed-class count, credit pace, attendance flags\" },\n { \"source\": \"Parent upload\", \"bricksRecord\": \"clearance_documents\", \"bringsIn\": \"EL2, ECG, hold harmless, travel releases, insurance cards\" },\n { \"source\": \"Event schedule\", \"bricksRecord\": \"athletic_events\", \"bringsIn\": \"Travel distance, county rule, sport, level, roster deadline, approval state\" }\n ],\n \"opponentCards\": [\n { \"school\": \"Riverview High\", \"distance\": \"18 miles\", \"window\": \"Sep 12 or Sep 19\", \"need\": \"Varsity boys basketball, home or away\", \"rule\": \"Coach can schedule within rules\", \"connection\": \"Played last season\" },\n { \"school\": \"Central Prep\", \"distance\": \"27 miles\", \"window\": \"Sep 16-20\", \"need\": \"JV soccer scrimmage, willing to travel\", \"rule\": \"AD final approval\", \"connection\": \"New connection\" },\n { \"school\": \"Lakeview Academy\", \"distance\": \"34 miles\", \"window\": \"Sep 26\", \"need\": \"Freshman football, home game preferred\", \"rule\": \"Coach can propose only\", \"connection\": \"Shared district contact\" }\n ],\n \"gameBoardRows\": [\n { \"post\": \"Need one more JV football game\", \"level\": \"JV\", \"date\": \"Weeks 3 or 4\", \"travel\": \"25 miles\", \"reply\": \"4 possible schools\" },\n { \"post\": \"Girls soccer preseason scrimmage\", \"level\": \"Varsity\", \"date\": \"Any Tuesday in September\", \"travel\": \"Home preferred\", \"reply\": \"2 possible schools\" },\n { \"post\": \"Baseball tournament needs two teams\", \"level\": \"Varsity\", \"date\": \"March 14-15\", \"travel\": \"Neutral site\", \"reply\": \"6 possible schools\" }\n ],\n \"coachCards\": [\n { \"step\": \"Northwood Academy\", \"icon\": \"BJ\", \"label\": \"Coach BJ Reynolds\", \"desc\": \"Varsity baseball shares a regional calendar inside a 250 mile travel radius. You can request an open date before sending any text.\", \"action\": \"Open calendar\" },\n { \"step\": \"Central Prep\", \"icon\": \"CP\", \"label\": \"Coach Morgan Lee\", \"desc\": \"JV soccer has three shared openings in September. Replies can go by text, email, or both. This team requires AD final approval.\", \"action\": \"Text coach\" },\n { \"step\": \"Riverview High\", \"icon\": \"RH\", \"label\": \"Coach Dana Price\", \"desc\": \"Varsity basketball is open Sep 12 or Sep 19. Their AD allows coaches to schedule inside distance and blackout rules.\", \"action\": \"Send dates\" },\n { \"step\": \"Lakeview Academy\", \"icon\": \"LA\", \"label\": \"Coach Chris Bell\", \"desc\": \"Freshman football needs one game. The coach can discuss details, but their AD must publish the event.\", \"action\": \"Start thread\" }\n ],\n \"coachScheduleRows\": [\n { \"window\": \"Sep 16\", \"time\": \"After 5:30 PM\", \"place\": \"Central Prep\", \"visibility\": \"Shared opening\", \"fit\": \"Works for JV soccer\" },\n { \"window\": \"Sep 18\", \"time\": \"4:00 PM or 6:00 PM\", \"place\": \"Home or away\", \"visibility\": \"Shared opening\", \"fit\": \"Needs bus check\" },\n { \"window\": \"Sep 20\", \"time\": \"Morning only\", \"place\": \"Central Prep\", \"visibility\": \"Tentative\", \"fit\": \"AD approval required\" },\n { \"window\": \"Sep 23\", \"time\": \"Blocked\", \"place\": \"Not shown\", \"visibility\": \"Private conflict\", \"fit\": \"Only shows as unavailable\" }\n ],\n \"opponentCalendarStats\": [\n { \"icon\": \"R\", \"label\": \"Travel radius\", \"value\": \"250 mi\" },\n { \"icon\": \"D\", \"label\": \"Drive estimate\", \"value\": \"3h 20m\" },\n { \"icon\": \"O\", \"label\": \"Open dates\", \"value\": \"5\" },\n { \"icon\": \"A\", \"label\": \"Approval\", \"value\": \"AD\" }\n ],\n \"opponentCalendarWeeks\": [\n { \"week\": \"Sep 8\", \"mon\": \"Sep 8 unavailable\", \"tue\": \"Sep 9 open after 5:00\", \"wed\": \"Sep 10 blocked\", \"thu\": \"Sep 11 open home\", \"fri\": \"Sep 12 game booked\", \"sat\": \"Sep 13 tournament hold\" },\n { \"week\": \"Sep 15\", \"mon\": \"Sep 15 open away\", \"tue\": \"Sep 16 practice\", \"wed\": \"Sep 17 open home\", \"thu\": \"Sep 18 blocked\", \"fri\": \"Sep 19 open neutral\", \"sat\": \"Sep 20 unavailable\" },\n { \"week\": \"Sep 22\", \"mon\": \"Sep 22 travel hold\", \"tue\": \"Sep 23 open away\", \"wed\": \"Sep 24 game booked\", \"thu\": \"Sep 25 open home\", \"fri\": \"Sep 26 blocked\", \"sat\": \"Sep 27 open tournament\" }\n ],\n \"opponentRequestRows\": [\n { \"date\": \"Sep 9\", \"time\": \"After 5:00 PM\", \"bj\": \"Can host\", \"travel\": \"Inside 250 miles, bus needed\", \"approval\": \"AD approval required\" },\n { \"date\": \"Sep 15\", \"time\": \"4:30 PM\", \"bj\": \"Can travel\", \"travel\": \"Home game works\", \"approval\": \"Coach can request\" },\n { \"date\": \"Sep 17\", \"time\": \"6:00 PM\", \"bj\": \"Can host\", \"travel\": \"Long trip, early release likely\", \"approval\": \"AD and travel check\" },\n { \"date\": \"Sep 19\", \"time\": \"7:00 PM\", \"bj\": \"Neutral site possible\", \"travel\": \"Meet halfway\", \"approval\": \"AD approval required\" },\n { \"date\": \"Sep 25\", \"time\": \"5:30 PM\", \"bj\": \"Can host\", \"travel\": \"Inside radius\", \"approval\": \"Coach can request\" }\n ],\n \"coachMessageRows\": [\n { \"when\": \"Draft\", \"who\": \"You\", \"message\": \"We can play JV soccer Sep 18 at 6:00. Can you host, or do you want us to host?\", \"status\": \"Ready to text and email\" },\n { \"when\": \"Reply\", \"who\": \"Coach Lee\", \"message\": \"Sep 18 works. We can host if your bus is covered.\", \"status\": \"Waiting for your confirmation\" },\n { \"when\": \"Rule check\", \"who\": \"Bricks\", \"message\": \"Away game is 27 miles and inside rules, but Central Prep requires AD final approval.\", \"status\": \"Creates approval item\" }\n ],\n \"coachFlowCards\": [\n { \"step\": \"1\", \"icon\": \"S\", \"label\": \"Share openings\", \"desc\": \"Each coach chooses the windows other schools can see. Private games, practices, and conflicts stay private.\", \"action\": \"Availability\" },\n { \"step\": \"2\", \"icon\": \"M\", \"label\": \"Text or email\", \"desc\": \"Messages send from Bricks, log to the request, and keep phone numbers controlled by school policy.\", \"action\": \"Message\" },\n { \"step\": \"3\", \"icon\": \"A\", \"label\": \"Check authority\", \"desc\": \"The request either schedules immediately, asks the AD, or stays as a coach-only draft.\", \"action\": \"Rules\" },\n { \"step\": \"4\", \"icon\": \"E\", \"label\": \"Publish event\", \"desc\": \"Once approved, Bricks creates the event, worker checklist, fan briefing, and external system links.\", \"action\": \"Event\" }\n ],\n \"coachCalendarStats\": [\n { \"icon\": \"C\", \"label\": \"Confirmed games\", \"value\": \"7\" },\n { \"icon\": \"P\", \"label\": \"Pending requests\", \"value\": \"3\" },\n { \"icon\": \"O\", \"label\": \"Open dates\", \"value\": \"4\" },\n { \"icon\": \"N\", \"label\": \"New replies\", \"value\": \"2\" }\n ],\n \"coachCalendarRows\": [\n { \"date\": \"Mar 8\", \"status\": \"Confirmed\", \"opponent\": \"Venice HS\", \"site\": \"Home\", \"next\": \"Game brief ready\" },\n { \"date\": \"Mar 12\", \"status\": \"Pending\", \"opponent\": \"Palmerton HS\", \"site\": \"Away\", \"next\": \"Waiting on AD approval\" },\n { \"date\": \"Mar 15\", \"status\": \"Confirmed\", \"opponent\": \"Cardinal Mooney\", \"site\": \"Home\", \"next\": \"Ticket link needed\" },\n { \"date\": \"Mar 22\", \"status\": \"Open\", \"opponent\": \"Advertised opening\", \"site\": \"Home or away\", \"next\": \"Find opponent\" }\n ],\n \"openDateRows\": [\n { \"date\": \"Mar 12\", \"sport\": \"Baseball\", \"level\": \"Varsity\", \"need\": \"One opponent, home preferred\", \"status\": \"Awaiting response\" },\n { \"date\": \"Mar 22\", \"sport\": \"Baseball\", \"level\": \"JV\", \"need\": \"Can travel within 35 miles\", \"status\": \"Posted to nearby coaches\" },\n { \"date\": \"Apr 4\", \"sport\": \"Softball\", \"level\": \"Varsity\", \"need\": \"Tournament fill-in\", \"status\": \"New replies\" }\n ],\n \"notificationRows\": [\n { \"when\": \"Now\", \"item\": \"Contest confirmed\", \"detail\": \"Central Prep accepted Sep 18 pending AD approval\" },\n { \"when\": \"10 min\", \"item\": \"Contract approved\", \"detail\": \"Riverview varsity basketball moved to confirmed\" },\n { \"when\": \"Today\", \"item\": \"New school available\", \"detail\": \"Lakeview Academy shared freshman football openings\" }\n ],\n \"approvalCards\": [\n { \"step\": \"Mode\", \"icon\": \"1\", \"label\": \"AD final approval\", \"desc\": \"Coaches can talk and propose dates, but the event does not publish until the AD approves it.\", \"action\": \"Strict\" },\n { \"step\": \"Mode\", \"icon\": \"2\", \"label\": \"Coach within rules\", \"desc\": \"The coach can schedule if distance, blackout dates, level, travel, and notice rules all pass.\", \"action\": \"Recommended\" },\n { \"step\": \"Mode\", \"icon\": \"3\", \"label\": \"Coach can schedule\", \"desc\": \"Trusted coaches can confirm games directly. AD gets notified and can still review the calendar.\", \"action\": \"Fast\" },\n { \"step\": \"Mode\", \"icon\": \"4\", \"label\": \"Locked down\", \"desc\": \"Only the AD creates or confirms games. Useful for varsity football, tournaments, or travel-heavy sports.\", \"action\": \"Controlled\" }\n ],\n \"requestRows\": [\n { \"field\": \"Sport and level\", \"example\": \"Girls soccer, varsity\", \"backend\": \"team_id, sport_id, level, season_id\" },\n { \"field\": \"Opponent\", \"example\": \"Central Prep\", \"backend\": \"opponent_school_id or external contact\" },\n { \"field\": \"Dates offered\", \"example\": \"Sep 16, Sep 18, Sep 20\", \"backend\": \"schedule_invite_options\" },\n { \"field\": \"Authority result\", \"example\": \"Needs AD approval: out-of-county\", \"backend\": \"scheduling_rule_evaluations\" }\n ],\n \"adApprovalRows\": [\n { \"request\": \"JV soccer at Central Prep\", \"sport\": \"Soccer\", \"date\": \"Sep 18, 6:00 PM\", \"owner\": \"Coach Morgan Lee\", \"status\": \"Needs AD approval\" },\n { \"request\": \"Varsity basketball vs. Riverview\", \"sport\": \"Basketball\", \"date\": \"Sep 19, 7:00 PM\", \"owner\": \"Coach Dana Price\", \"status\": \"Contract waiting\" },\n { \"request\": \"Freshman football at Lakeview\", \"sport\": \"Football\", \"date\": \"Sep 26\", \"owner\": \"Coach Chris Bell\", \"status\": \"Needs travel check\" }\n ],\n \"contractRows\": [\n { \"field\": \"Opponent\", \"value\": \"Central Prep JV soccer\" },\n { \"field\": \"Game time\", \"value\": \"Sep 18, 6:00 PM\" },\n { \"field\": \"Location\", \"value\": \"Central Prep\" },\n { \"field\": \"Home/Away\", \"value\": \"Away\" },\n { \"field\": \"Agreement status\", \"value\": \"Coach accepted, AD approval needed\" }\n ],\n \"contractStepCards\": [\n { \"step\": \"Coach\", \"icon\": \"C\", \"label\": \"Coach accepts\", \"desc\": \"Both coaches agree to the date, time, level, site, and travel assumptions from the request thread.\", \"action\": \"Accepted\" },\n { \"step\": \"AD\", \"icon\": \"AD\", \"label\": \"AD approves\", \"desc\": \"The AD sees rule checks, paperwork blockers, travel notes, and contract terms before publishing.\", \"action\": \"Approve\" },\n { \"step\": \"Event\", \"icon\": \"E\", \"label\": \"Event publishes\", \"desc\": \"The approved contract creates the athletic event, worker checklist, calendar entry, and fan briefing.\", \"action\": \"Publish\" }\n ],\n \"coverageRows\": [\n { \"date\": \"Sep 5\", \"event\": \"Varsity football home opener\", \"admin\": \"Open\", \"workers\": \"Gate missing 1\", \"risk\": \"High attendance\" },\n { \"date\": \"Sep 9\", \"event\": \"Volleyball district match\", \"admin\": \"Assistant principal\", \"workers\": \"Covered\", \"risk\": \"Normal\" },\n { \"date\": \"Sep 12\", \"event\": \"Soccer doubleheader\", \"admin\": \"Open\", \"workers\": \"Clock open\", \"risk\": \"Two fields active\" },\n { \"date\": \"Sep 19\", \"event\": \"Homecoming football\", \"admin\": \"Principal\", \"workers\": \"Needs extra gate\", \"risk\": \"Rivalry crowd\" }\n ],\n \"gapRows\": [\n { \"gap\": \"Admin on duty\", \"count\": \"2 events\", \"fix\": \"Send September coverage request to principal team\" },\n { \"gap\": \"Ticket workers\", \"count\": \"3 shifts\", \"fix\": \"Ask booster club and mark paid worker slots\" },\n { \"gap\": \"Official host\", \"count\": \"1 event\", \"fix\": \"Assign a trusted staff member from event worker pool\" }\n ],\n \"modelRows\": [\n { \"model\": \"athletic_programs\", \"purpose\": \"School-level sports, seasons, levels, and who owns each program.\", \"ties\": \"School OS schools, Workforce employees\" },\n { \"model\": \"athletic_teams\", \"purpose\": \"Varsity, JV, freshman, middle school teams with coach and AD authority settings.\", \"ties\": \"Staff roles, permissions, calendars\" },\n { \"model\": \"schedule_requests\", \"purpose\": \"Coach-to-AD and coach-to-coach proposals, date options, approval state, and audit trail.\", \"ties\": \"Notifications, email, SMS, calendars\" },\n { \"model\": \"opponent_availability\", \"purpose\": \"Controlled public availability windows for nearby schools and teams.\", \"ties\": \"Location radius, contact preferences\" },\n { \"model\": \"schedule_match_preferences\", \"purpose\": \"Coach matching weights for competition level, travel, relationships, home/away balance, and transportation.\", \"ties\": \"Opponent search, team history, coach settings\" },\n { \"model\": \"replacement_requests\", \"purpose\": \"Rainout, cancellation, and late-fill requests with urgency, available dates, radius, and reminder state.\", \"ties\": \"Open dates, notifications, schedule requests\" },\n { \"model\": \"athletic_events\", \"purpose\": \"Official games, scrimmages, tournaments, practices, travel, and ticketing facts.\", \"ties\": \"Calendar, Arbiter, GoFan, transportation\" },\n { \"model\": \"event_assignments\", \"purpose\": \"Admin, PA, chain crew, clock, book, host, gate workers, security, trainer, and volunteers.\", \"ties\": \"Workforce, notifications, payroll later\" },\n { \"model\": \"athlete_clearances\", \"purpose\": \"EL2, EL3, ECG, insurance, courses, travel release, hold harmless, and expiration checks.\", \"ties\": \"School OS students, privacy fields, documents\" },\n { \"model\": \"student_eligibility_snapshots\", \"purpose\": \"Weekly grade and credit eligibility pulled from School OS so Athletics can clear rosters without leaving the page.\", \"ties\": \"School OS grades, attendance, credits, privacy-scoped role access\" },\n { \"model\": \"event_briefings\", \"purpose\": \"Reusable messages for officials, workers, visiting teams, fans, and admins.\", \"ties\": \"Communications, groups, audit log\" }\n ],\n \"integrationCards\": [\n { \"step\": \"Install\", \"icon\": \"A\", \"label\": \"Athletics brick\", \"desc\": \"Adds athletics models, pages, roles, sample data, and ask contracts without changing School OS internals.\", \"action\": \"Own brick\" },\n { \"step\": \"Connect\", \"icon\": \"S\", \"label\": \"School OS\", \"desc\": \"References schools, students, employees, calendars, rooms, and staff roles instead of copying them.\", \"action\": \"Shared records\" },\n { \"step\": \"Notify\", \"icon\": \"C\", \"label\": \"Communications\", \"desc\": \"Uses existing notifications for coach invites, worker texts, fan updates, and admin coverage requests.\", \"action\": \"One message layer\" },\n { \"step\": \"Extend\", \"icon\": \"I\", \"label\": \"Integrations\", \"desc\": \"Stores external IDs for Arbiter, RQ+, GoFan, transportation, and document systems as optional links.\", \"action\": \"No lock-in\" }\n ]\n}\n```\n\n```template\n
\n \n \n \n \n \n
\n \n
\n\n
\n \n \n \n \n \n \n \n
\n\n
\n
\n
\n
\n {stat.icon}\n {stat.label}\n {stat.value}\n
\n
\n
\n\n
\n
\n Tonight's game board\n The AD starts here: what is happening, what is missing, and who owns the next move.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
EventReadinessMissingOwnerNext move
{row.event}{row.readiness}{row.missing}{row.owner}{row.next}
\n
\n
\n\n
\n
\n Game-day roles\n Every contest creates the right worker slots by sport, level, venue, and ticketing rules.\n
\n
\n
\n
\n {role.step}\n {role.icon}\n {role.label}\n {role.desc}\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n Briefings ready to send\n Generated from the event record so each group gets only what they need.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
BriefingAudienceIncludes
{row.brief}{row.audience}{row.sends}
\n
\n
\n\n
\n
\n Officials, ticketing, and outside systems\n External tools stay connected to the event instead of living in a side spreadsheet.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SystemWhat it handlesData Bricks storesNext action
ArbiterOfficials assignment and crew statusEvent ID, crew names, fee notes, confirmation stateSync officials before briefing
RefQuestOfficial requests and coverage follow-upRequest ID, assigner contact, pending statusAsk assigner for uncovered games
GoFanTicket link, gate setup, pass list, and scan reportTicket URL, gate rules, worker counts, sales summaryPublish fan link
TransportationBus request, travel distance, and release requirementTrip ID, county rule, departure time, paperwork blockersAttach travel paperwork
\n
\n
\n\n
\n
\n Communication groups\n The same event can send different messages to athletic staff, fans, workers, and officials.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
GroupMessage contentsChannelWhy it matters
Athletic staffGame readiness, paperwork blockers, admin gaps, trainer notesEmail and internal notificationKeeps AD, trainer, coaches, and principals aligned
FansGame time, GoFan link, gate time, parking, sportsmanship notePublic athletics site, email, and textStops repeat questions at the gate
Worker group chatArrival time, role, entrance, who to call, radio channelText thread and Bricks message logCovers gate, PA, chain crew, clock, and hosts
OfficialsParking, locker room, host contact, trainer, special notesEmail, Arbiter note, or RefQuest updateConnects assigner systems to the game briefing
\n
\n
\n
\n\n
\n
\n
\n Controlled availability\n Coaches see open windows, not the other school's whole internal calendar.\n
\n
\n \n \n \n \n
\n
\n
\n
\n {opponent.distance}\n {opponent.school}\n {opponent.window}\n {opponent.need}\n {opponent.rule}\n {opponent.connection}\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n Looking for games board\n A lightweight marketplace for openings, scrimmages, tournaments, and late cancellations.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PostLevelDate windowTravelMatches
{row.post}{row.level}{row.date}{row.travel}{row.reply}
\n
\n
\n
\n\n
\n
\n
\n Coach-to-coach connection\n This is the Calendly-style part: shared openings, controlled contact, and a clean path from calendar request to approved game.\n
\n
\n
\n
\n {coach.step}\n {coach.icon}\n {coach.label}\n {coach.desc}\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n Request-first scheduling\n Coaches said texting takes too long or never gets an answer, so the default path is a tracked calendar or software request. Text and email stay available as fallback channels.\n
\n
\n
\n CR\n Calendar requests\n Primary\n
\n
\n SI\n Software invites\n Tracked\n
\n
\n TE\n Text or email\n Fallback\n
\n
\n NR\n No-reply follow-up\n Visible\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PathHow the coach uses itWhat Bricks tracksBest use
Shared calendar requestOpen BJ's calendar, pick an available date, and click Request date.Sent time, viewed state, accepted date, proposed changes, and AD rule result.Default path when both schools share schedules.
Software invite linkSend one structured request from Bricks instead of a loose text chain.Which dates were offered, who answered, reply age, contract state, and approval state.Good when the other coach is in the system but has not opened their calendar.
Text or email fallbackSend a short message with the same request link for coaches who still live in text or email.The message, reply, reminder history, and schedule request stay attached to the event.Use when a coach is slow to check the software or prefers direct contact.
No-reply follow-upBricks shows unanswered requests and lets the coach remind, switch channel, or ask the AD.Days waiting, last channel used, next reminder, and escalation owner.Stops coaches from wondering who never got back to them.
\n
\n
\n\n
\n
\n Other coach schedule preview\n The coach sees openings the other school chose to share, not the whole internal calendar.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Date windowTimeSiteVisibilityFit
{row.window}{row.time}{row.place}{row.visibility}{row.fit}
\n
\n
\n\n
\n
\n BJ's shared calendar\n Instead of starting with a text, open BJ's shared availability, scan the huge travel radius, and request a date from the calendar.\n
\n
\n \n \n \n \n
\n
\n
\n {stat.icon}\n {stat.label}\n {stat.value}\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
WeekMonTueWedThuFriSat
{row.week}{row.mon}{row.tue}{row.wed}{row.thu}{row.fri}{row.sat}
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateTimeBJ canTravel fitApprovalRequest
{row.date}{row.time}{row.bj}{row.travel}{row.approval}
\n
\n
\n\n
\n
\n
\n {stat.icon}\n {stat.label}\n {stat.value}\n
\n
\n
\n\n
\n
\n Coach calendar\n A coach-facing schedule view with confirmed games, pending requests, and open dates in one place.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateStatusOpponentSiteNext move
{row.date}{row.status}{row.opponent}{row.site}{row.next}
\n
\n
\n\n
\n
\n Open dates\n Coaches can advertise openings to nearby schools without exposing private practices or internal conflicts.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateSportLevelNeedStatus
{row.date}{row.sport}{row.level}{row.need}{row.status}
\n
\n
\n \n \n \n
\n
\n\n
\n
\n Scheduling notifications\n The coach sees the same events the AD sees, filtered to the teams they own.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
WhenItemDetail
{row.when}{row.item}{row.detail}
\n
\n
\n\n
\n
\n Text or email fallback\n Use this when the calendar or software request needs a nudge. Replies still land back on the same schedule request.\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n Thread to schedule\n The conversation stays attached to the request so nobody has to search group chats later.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StepWhoMessageStatus
{row.when}{row.who}{row.message}{row.status}
\n
\n
\n\n
\n
\n What happens after the reply\n The same flow works for coach-only scheduling or AD-controlled sports.\n
\n
\n
\n
\n {step.step}\n {step.icon}\n {step.label}\n {step.desc}\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n Coach schedule request\n One structured request replaces the text thread. The AD can delegate all of it or keep final approval.\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n\n
\n
\n Scheduling authority\n The same brick supports strict AD control, trusted coach scheduling, or rules-based delegation.\n
\n
\n
\n
\n {mode.step}\n {mode.icon}\n {mode.label}\n {mode.desc}\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n AD approval queue\n Coach-agreed games collect here when the school's authority setting requires AD signoff.\n
\n
\n
\n BB\n Baseball\n 2\n
\n
\n SB\n Softball\n 1\n
\n
\n BK\n Basketball\n 3\n
\n
\n SC\n Soccer\n 4\n
\n
\n VB\n Volleyball\n 1\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RequestSportDateOwnerStatus
{row.request}{row.sport}{row.date}{row.owner}{row.status}
\n
\n
\n \n \n \n
\n
\n\n
\n
\n Game contract agreement\n A lightweight contract record turns the text agreement into an auditable event before it hits the public calendar.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
FieldValue
{row.field}{row.value}
\n
\n
\n
\n
\n {step.step}\n {step.icon}\n {step.label}\n {step.desc}\n
\n
\n \n
\n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n What gets saved\n The real event is created only after the authority rule passes.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FieldExampleBack-end record
{row.field}{row.example}{row.backend}
\n
\n
\n
\n\n
\n
\n
\n
\n EL2\n EL2 blockers\n 6\n
\n
\n ECG\n ECG missing\n 4\n
\n
\n TR\n Travel releases\n 8\n
\n
\n OK\n Ready to play\n 86%\n
\n
\n
\n\n
\n
\n Athletic paperwork checklist\n This is where EL2, ECG, hold harmless, AthleticClearance, eligibility, and travel forms live.\n
\n
\n
\n
\n Physical\n EL2\n EL2 physical\n Tracks uploaded physical forms, expiration dates, doctor signature status, and whether the athlete is cleared for contact.\n
\n
\n \n
\n
\n
\n
\n Cardiac\n ECG\n ECG requirement\n Shows who needs ECG paperwork or a waiver before tryouts, practice, travel, or competition.\n
\n
\n \n
\n
\n
\n
\n Consent\n HH\n Hold harmless\n Covers parent release, sport-specific risk language, emergency treatment consent, and signature history.\n
\n
\n \n
\n
\n
\n
\n Travel\n TR\n Out-of-county travel\n Required when a game crosses the county rule, has a long bus window, or needs parent permission before the event can publish.\n
\n
\n \n
\n
\n
\n
\n Import\n AC\n AthleticClearance\n Pulls clearance status, expiration dates, uploaded documents, and blockers into Bricks without duplicating the source system.\n
\n
\n \n
\n
\n
\n
\n Eligibility\n EL\n Eligibility check\n Combines roster, grades, emergency contacts, insurance, training courses, and school-specific signoffs.\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n Complete paperwork here\n The AD, trainer, coach, or office staff can open a student, pick the paperwork item, fill it out, send it for signature, or save it right here.\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n
\n
\n\n
\n
\n Paperwork data tracked\n Each paperwork item keeps the same useful trail: student, status, dates, signatures, source, reviewer, and what it blocks.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PaperworkData capturedWho can fill it outWhat it can block
EL2 physicalExam date, expiration, doctor signature, upload, reviewer, cleared contact statusTrainer, AD, office staff, parent uploadTryout, practice, roster lock, game roster
ECG requirementECG date, waiver, result status, document link, next reminderTrainer, AD, parent upload, AthleticClearance syncTryout, practice, travel, competition
Hold harmlessGuardian signature, emergency treatment consent, risk language version, signed dateParent, AD, office staffRoster activation, travel release, event publish
Out-of-county travelTrip date, opponent, destination, bus need, guardian release, early dismissalCoach, AD, parent, transportation officeBus request, contract approval, public schedule
AthleticClearanceExternal approval, missing items, expiration dates, document links, sync timeSystem sync, trainer, ADReady-to-play status and roster lock
Grade eligibilityCurrent GPA, failed classes, credit pace, attendance flags, eligibility windowGrade sync, AD, registrar, academic staffCompetition eligibility and weekly roster release
\n
\n
\n\n
\n
\n Student and grade eligibility\n Athletics can read the student record and grade snapshot here, so the AD does not have to chase an academic coach for every eligibility check.\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AthleteTeamStudent recordGradesEligibilityNext move
Athlete 24Girls soccer varsitySchool OS student, guardian and emergency contacts connectedOne failing class, GPA watchBlocked until grade reviewSend grade alert to AD and academic contact
Athlete 31Football varsitySchool OS student, current schedule connectedPassing all classesEligible this weekReady for roster release
Athlete 12Volleyball JVSchool OS student, guardian contact missing secondary phoneMissing grade in AlgebraNeeds registrar reviewAsk registrar to confirm grade before match day
Athlete 08Baseball varsitySchool OS student, grade level and credits connectedCredit pace okay, attendance flagWatch listCoach sees eligibility warning, not full private grade detail
\n
\n
\n\n
\n
\n Athlete clearance board\n The AD, trainer, and coach can see who is blocked and what has to happen next.\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AthleteTeamEL2ECGAthleticClearanceHold harmlessTravelNext move
Athlete 24Girls soccer varsityExpires Oct 3MissingPendingSignedNeeded for county lineSend ECG and travel reminders
Athlete 31Football varsityClearedClearedApprovedSignedNot neededReady to play
Athlete 12Volleyball JVNeeds signatureWaiver on fileNeeds reviewUnsignedNot neededParent packet incomplete
Athlete 08Baseball varsityClearedClearedApprovedSignedNeeded for BJ gameCollect out-of-county travel form
\n
\n
\n\n
\n
\n Event paperwork blockers\n Paperwork should block the right event actions: roster lock, bus request, contract approval, and public calendar publish.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
EventBlocked bySourceOwnerDeadlineNext move
Girls soccer at Central PrepOut-of-county travel releaseParent packetHead coachBefore bus requestSend travel form to families
Baseball at Northwood AcademyTravel release and BJ game approvalSchedule requestADBefore contract approvalAttach travel form to request
Football home openerTwo EL2 expirationsAthleticClearance syncAthletic trainerBefore game roster locksReview expired physicals
\n
\n
\n\n
\n
\n Where the records come from\n The Athletics brick owns the clearance record, but it references School OS and external paperwork systems.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SourceBricks recordBrings in
AthleticClearanceathlete_clearancesApproval status, document links, expiration dates, missing requirements
School OS studentsstudent_id referenceRoster identity, guardians, emergency contact, grade level, school
School OS gradesstudent_eligibility_snapshotsCurrent grading window, GPA signal, failed-class count, credit pace, attendance flags, privacy-scoped role access
Parent uploadclearance_documentsEL2, ECG, hold harmless, travel releases, insurance cards
Event scheduleathletic_eventsTravel distance, county rule, sport, level, roster deadline, approval state
\n
\n
\n
\n\n
\n
\n
\n September admin calendar\n The AD can finish a month of admin coverage before the season starts, then fill worker gaps by event.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DateEventAdminWorkersRisk
Sep 5Varsity football home openerOpenGate missing 1High attendance
Sep 9Volleyball district matchAssistant principalCoveredNormal
Sep 12Soccer doubleheaderOpenClock openTwo fields active
Sep 19Homecoming footballPrincipalNeeds extra gateRivalry crowd
\n
\n
\n\n
\n
\n Coverage gaps\n The page should push the painful asks to the top instead of making the AD hunt through every event.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
GapHow manySuggested fix
Admin on duty2 eventsSend September coverage request to principal team
Ticket workers3 shiftsAsk booster club and mark paid worker slots
Official host1 eventAssign a trusted staff member from event worker pool
\n
\n
\n
\n\n
\n
\n
\n How this becomes a brick\n Athletics owns its own models and pages, then references School OS, Workforce, documents, and communication records where needed.\n
\n
\n
\n
\n Install\n A\n Athletics brick\n Adds athletics models, pages, roles, sample data, and ask contracts without changing School OS internals.\n
\n
\n \n
\n
\n
\n
\n Connect\n S\n School OS\n References schools, students, employees, calendars, rooms, and staff roles instead of copying them.\n
\n
\n \n
\n
\n
\n
\n Notify\n C\n Communications\n Uses existing notifications for coach invites, worker texts, fan updates, and admin coverage requests.\n
\n
\n \n
\n
\n
\n
\n Extend\n I\n Integrations\n Stores external IDs for Arbiter, RQ+, GoFan, transportation, and document systems as optional links.\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n Athletics site flow\n Web Studio can keep the school website while the Athletics brick publishes the sports-specific pages from approved records.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SurfaceOwnerWhat lives thereHow it connects
School siteWeb StudioMain school pages, admissions, news, district contentLinks into Athletics for sports details
Athletics homeAthletics brickSports directory, today's games, ticket links, fan noticesReads athletic_events, GoFan links, and fan briefings
Team pagesCoaches and ADRoster-safe team info, schedules, coach contact, open datesReads athletic_teams and approved events
Public scheduleAD approvedConfirmed games, ticket status, venue notes, travel notesWaits for paperwork, contract, worker, and admin readiness
\n
\n
\n\n
\n
\n First model pass\n This is the back-end spine I would start from before adding integrations.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ModelPurposeTies into
athletic_programsSchool-level sports, seasons, levels, and who owns each program.School OS schools, Workforce employees
athletic_teamsVarsity, JV, freshman, middle school teams with coach and AD authority settings.Staff roles, permissions, calendars
schedule_requestsCoach-to-AD and coach-to-coach proposals, date options, approval state, and audit trail.Notifications, email, SMS, calendars
opponent_availabilityControlled public availability windows for nearby schools and teams.Location radius, contact preferences
schedule_match_preferencesCoach matching weights for competition level, travel, relationships, home/away balance, and transportation.Opponent search, team history, coach settings
replacement_requestsRainout, cancellation, and late-fill requests with urgency, available dates, radius, and reminder state.Open dates, notifications, schedule requests
athletic_eventsOfficial games, scrimmages, tournaments, practices, travel, and ticketing facts.Calendar, Arbiter, GoFan, transportation
event_assignmentsAdmin, PA, chain crew, clock, book, host, gate workers, security, trainer, and volunteers.Workforce, notifications, payroll later
athlete_clearancesEL2, EL3, ECG, insurance, courses, travel release, hold harmless, and expiration checks.School OS students, privacy fields, documents
student_eligibility_snapshotsWeekly grade and credit eligibility pulled from School OS so Athletics can clear rosters without leaving the page.School OS grades, attendance, credits, privacy-scoped role access
event_briefingsReusable messages for officials, workers, visiting teams, fans, and admins.Communications, groups, audit log
\n
\n
\n
\n```\n\n```action:showCommand\nreturn {\n commandActive: true,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n opsStats: [\n { icon: \"!\", label: \"Uncovered events\", value: \"3\" },\n { icon: \"A\", label: \"Admin gaps\", value: \"2\" },\n { icon: \"R\", label: \"Coach requests\", value: \"7\" },\n { icon: \"P\", label: \"Clearance blockers\", value: \"18\" }\n ],\n eventRows: [\n { event: \"Varsity football vs. West County\", readiness: \"Needs admin\", missing: \"Admin on duty, second gate worker\", owner: \"Athletic Director\", next: \"Ask principal team for Friday coverage\" },\n { event: \"JV volleyball tri-match\", readiness: \"Almost ready\", missing: \"PA script, visiting team host\", owner: \"Assistant AD\", next: \"Send worker briefing by noon\" },\n { event: \"Girls soccer away scrimmage\", readiness: \"Needs paperwork\", missing: \"Out-of-county travel release\", owner: \"Head coach\", next: \"Collect parent signatures before bus request\" }\n ],\n roleCards: [\n { step: \"Game control\", icon: \"AD\", label: \"Admin on duty\", desc: \"Visible supervisor, crowd decisions, incident notes, and final call on escalations.\", action: \"Assign admin\" },\n { step: \"Football\", icon: \"CC\", label: \"Chain crew\", desc: \"Crew names, arrival time, sideline, backup chains, and radio contact.\", action: \"Fill crew\" },\n { step: \"Press box\", icon: \"PA\", label: \"PA announcer\", desc: \"Script, pronunciations, emergency reads, sportsmanship reminders, and sponsor reads.\", action: \"Open script\" },\n { step: \"Gate\", icon: \"$\", label: \"Ticket takers and sellers\", desc: \"GoFan link, pass list, scanner setup, cash exception rules, paid worker slots, and gate report.\", action: \"Set gate plan\" },\n { step: \"Officials\", icon: \"OF\", label: \"Official host\", desc: \"Parking, locker room, water, names, fee notes, and halftime/postgame escort.\", action: \"Add host\" },\n { step: \"Home\", icon: \"HH\", label: \"Home team host\", desc: \"Bench setup, locker room, trainer access, student section notes, and coach arrival plan.\", action: \"Assign host\" },\n { step: \"Visitors\", icon: \"VH\", label: \"Visiting team host\", desc: \"Bus parking, locker room, warmup space, trainer access, and return route.\", action: \"Add host\" },\n { step: \"Table\", icon: \"CL\", label: \"Clock and official book\", desc: \"Basketball clock operator, official scorebook, scoreboard test, rules notes, and backup person.\", action: \"Assign table\" },\n { step: \"Safety\", icon: \"EAP\", label: \"Trainer and emergency plan\", desc: \"Athletic trainer, AED location, weather plan, EMS access, and evacuation script.\", action: \"Review plan\" }\n ],\n briefingRows: [\n { brief: \"Officials packet\", audience: \"Crew and assigner\", sends: \"Parking, host phone, locker room, special events, trainer location\" },\n { brief: \"Fan update\", audience: \"Home and visiting fans\", sends: \"GoFan link, gate time, prohibited items, parking, sportsmanship reminder\" },\n { brief: \"Worker text\", audience: \"Gate, PA, chain crew, clock, host\", sends: \"Report time, role, entrance, radio channel, who to call\" }\n ]\n};\n```\n\n```action:showFinder\nreturn {\n commandActive: false,\n finderActive: true,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n opponentCards: [\n { school: \"Riverview High\", distance: \"18 miles\", window: \"Sep 12 or Sep 19\", need: \"Varsity boys basketball, home or away\", rule: \"Coach can schedule within rules\", connection: \"Played last season\" },\n { school: \"Central Prep\", distance: \"27 miles\", window: \"Sep 16-20\", need: \"JV soccer scrimmage, willing to travel\", rule: \"AD final approval\", connection: \"New connection\" },\n { school: \"Lakeview Academy\", distance: \"34 miles\", window: \"Sep 26\", need: \"Freshman football, home game preferred\", rule: \"Coach can propose only\", connection: \"Shared district contact\" }\n ],\n gameBoardRows: [\n { post: \"Need one more JV football game\", level: \"JV\", date: \"Weeks 3 or 4\", travel: \"25 miles\", reply: \"4 possible schools\" },\n { post: \"Girls soccer preseason scrimmage\", level: \"Varsity\", date: \"Any Tuesday in September\", travel: \"Home preferred\", reply: \"2 possible schools\" },\n { post: \"Baseball tournament needs two teams\", level: \"Varsity\", date: \"March 14-15\", travel: \"Neutral site\", reply: \"6 possible schools\" }\n ]\n};\n```\n\n```action:showCoach\nreturn {\n commandActive: false,\n finderActive: false,\n coachActive: true,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n coachCards: [\n { step: \"Northwood Academy\", icon: \"BJ\", label: \"Coach BJ Reynolds\", desc: \"Varsity baseball shares a regional calendar inside a 250 mile travel radius. You can request an open date before sending any text.\", action: \"Open calendar\" },\n { step: \"Central Prep\", icon: \"CP\", label: \"Coach Morgan Lee\", desc: \"JV soccer has three shared openings in September. Replies can go by text, email, or both. This team requires AD final approval.\", action: \"Text coach\" },\n { step: \"Riverview High\", icon: \"RH\", label: \"Coach Dana Price\", desc: \"Varsity basketball is open Sep 12 or Sep 19. Their AD allows coaches to schedule inside distance and blackout rules.\", action: \"Send dates\" },\n { step: \"Lakeview Academy\", icon: \"LA\", label: \"Coach Chris Bell\", desc: \"Freshman football needs one game. The coach can discuss details, but their AD must publish the event.\", action: \"Start thread\" }\n ],\n coachScheduleRows: [\n { window: \"Sep 16\", time: \"After 5:30 PM\", place: \"Central Prep\", visibility: \"Shared opening\", fit: \"Works for JV soccer\" },\n { window: \"Sep 18\", time: \"4:00 PM or 6:00 PM\", place: \"Home or away\", visibility: \"Shared opening\", fit: \"Needs bus check\" },\n { window: \"Sep 20\", time: \"Morning only\", place: \"Central Prep\", visibility: \"Tentative\", fit: \"AD approval required\" },\n { window: \"Sep 23\", time: \"Blocked\", place: \"Not shown\", visibility: \"Private conflict\", fit: \"Only shows as unavailable\" }\n ],\n opponentCalendarStats: [\n { icon: \"R\", label: \"Travel radius\", value: \"250 mi\" },\n { icon: \"D\", label: \"Drive estimate\", value: \"3h 20m\" },\n { icon: \"O\", label: \"Open dates\", value: \"5\" },\n { icon: \"A\", label: \"Approval\", value: \"AD\" }\n ],\n opponentCalendarWeeks: [\n { week: \"Sep 8\", mon: \"Sep 8 unavailable\", tue: \"Sep 9 open after 5:00\", wed: \"Sep 10 blocked\", thu: \"Sep 11 open home\", fri: \"Sep 12 game booked\", sat: \"Sep 13 tournament hold\" },\n { week: \"Sep 15\", mon: \"Sep 15 open away\", tue: \"Sep 16 practice\", wed: \"Sep 17 open home\", thu: \"Sep 18 blocked\", fri: \"Sep 19 open neutral\", sat: \"Sep 20 unavailable\" },\n { week: \"Sep 22\", mon: \"Sep 22 travel hold\", tue: \"Sep 23 open away\", wed: \"Sep 24 game booked\", thu: \"Sep 25 open home\", fri: \"Sep 26 blocked\", sat: \"Sep 27 open tournament\" }\n ],\n opponentRequestRows: [\n { date: \"Sep 9\", time: \"After 5:00 PM\", bj: \"Can host\", travel: \"Inside 250 miles, bus needed\", approval: \"AD approval required\" },\n { date: \"Sep 15\", time: \"4:30 PM\", bj: \"Can travel\", travel: \"Home game works\", approval: \"Coach can request\" },\n { date: \"Sep 17\", time: \"6:00 PM\", bj: \"Can host\", travel: \"Long trip, early release likely\", approval: \"AD and travel check\" },\n { date: \"Sep 19\", time: \"7:00 PM\", bj: \"Neutral site possible\", travel: \"Meet halfway\", approval: \"AD approval required\" },\n { date: \"Sep 25\", time: \"5:30 PM\", bj: \"Can host\", travel: \"Inside radius\", approval: \"Coach can request\" }\n ],\n coachCalendarStats: [\n { icon: \"C\", label: \"Confirmed games\", value: \"7\" },\n { icon: \"P\", label: \"Pending requests\", value: \"3\" },\n { icon: \"O\", label: \"Open dates\", value: \"4\" },\n { icon: \"N\", label: \"New replies\", value: \"2\" }\n ],\n coachCalendarRows: [\n { date: \"Mar 8\", status: \"Confirmed\", opponent: \"Venice HS\", site: \"Home\", next: \"Game brief ready\" },\n { date: \"Mar 12\", status: \"Pending\", opponent: \"Palmerton HS\", site: \"Away\", next: \"Waiting on AD approval\" },\n { date: \"Mar 15\", status: \"Confirmed\", opponent: \"Cardinal Mooney\", site: \"Home\", next: \"Ticket link needed\" },\n { date: \"Mar 22\", status: \"Open\", opponent: \"Advertised opening\", site: \"Home or away\", next: \"Find opponent\" }\n ],\n openDateRows: [\n { date: \"Mar 12\", sport: \"Baseball\", level: \"Varsity\", need: \"One opponent, home preferred\", status: \"Awaiting response\" },\n { date: \"Mar 22\", sport: \"Baseball\", level: \"JV\", need: \"Can travel within 35 miles\", status: \"Posted to nearby coaches\" },\n { date: \"Apr 4\", sport: \"Softball\", level: \"Varsity\", need: \"Tournament fill-in\", status: \"New replies\" }\n ],\n notificationRows: [\n { when: \"Now\", item: \"Contest confirmed\", detail: \"Central Prep accepted Sep 18 pending AD approval\" },\n { when: \"10 min\", item: \"Contract approved\", detail: \"Riverview varsity basketball moved to confirmed\" },\n { when: \"Today\", item: \"New school available\", detail: \"Lakeview Academy shared freshman football openings\" }\n ],\n coachMessageRows: [\n { when: \"Draft\", who: \"You\", message: \"We can play JV soccer Sep 18 at 6:00. Can you host, or do you want us to host?\", status: \"Ready to text and email\" },\n { when: \"Reply\", who: \"Coach Lee\", message: \"Sep 18 works. We can host if your bus is covered.\", status: \"Waiting for your confirmation\" },\n { when: \"Rule check\", who: \"Bricks\", message: \"Away game is 27 miles and inside rules, but Central Prep requires AD final approval.\", status: \"Creates approval item\" }\n ],\n coachFlowCards: [\n { step: \"1\", icon: \"S\", label: \"Share openings\", desc: \"Each coach chooses the windows other schools can see. Private games, practices, and conflicts stay private.\", action: \"Availability\" },\n { step: \"2\", icon: \"M\", label: \"Text or email\", desc: \"Messages send from Bricks, log to the request, and keep phone numbers controlled by school policy.\", action: \"Message\" },\n { step: \"3\", icon: \"A\", label: \"Check authority\", desc: \"The request either schedules immediately, asks the AD, or stays as a coach-only draft.\", action: \"Rules\" },\n { step: \"4\", icon: \"E\", label: \"Publish event\", desc: \"Once approved, Bricks creates the event, worker checklist, fan briefing, and external system links.\", action: \"Event\" }\n ]\n};\n```\n\n```action:showRequest\nreturn {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: true,\n paperworkActive: false,\n coverageActive: false,\n modelActive: false,\n approvalCards: [\n { step: \"Mode\", icon: \"1\", label: \"AD final approval\", desc: \"Coaches can talk and propose dates, but the event does not publish until the AD approves it.\", action: \"Strict\" },\n { step: \"Mode\", icon: \"2\", label: \"Coach within rules\", desc: \"The coach can schedule if distance, blackout dates, level, travel, and notice rules all pass.\", action: \"Recommended\" },\n { step: \"Mode\", icon: \"3\", label: \"Coach can schedule\", desc: \"Trusted coaches can confirm games directly. AD gets notified and can still review the calendar.\", action: \"Fast\" },\n { step: \"Mode\", icon: \"4\", label: \"Locked down\", desc: \"Only the AD creates or confirms games. Useful for varsity football, tournaments, or travel-heavy sports.\", action: \"Controlled\" }\n ],\n requestRows: [\n { field: \"Sport and level\", example: \"Girls soccer, varsity\", backend: \"team_id, sport_id, level, season_id\" },\n { field: \"Opponent\", example: \"Central Prep\", backend: \"opponent_school_id or external contact\" },\n { field: \"Dates offered\", example: \"Sep 16, Sep 18, Sep 20\", backend: \"schedule_invite_options\" },\n { field: \"Authority result\", example: \"Needs AD approval: out-of-county\", backend: \"scheduling_rule_evaluations\" }\n ],\n adApprovalRows: [\n { request: \"JV soccer at Central Prep\", sport: \"Soccer\", date: \"Sep 18, 6:00 PM\", owner: \"Coach Morgan Lee\", status: \"Needs AD approval\" },\n { request: \"Varsity basketball vs. Riverview\", sport: \"Basketball\", date: \"Sep 19, 7:00 PM\", owner: \"Coach Dana Price\", status: \"Contract waiting\" },\n { request: \"Freshman football at Lakeview\", sport: \"Football\", date: \"Sep 26\", owner: \"Coach Chris Bell\", status: \"Needs travel check\" }\n ],\n contractRows: [\n { field: \"Opponent\", value: \"Central Prep JV soccer\" },\n { field: \"Game time\", value: \"Sep 18, 6:00 PM\" },\n { field: \"Location\", value: \"Central Prep\" },\n { field: \"Home/Away\", value: \"Away\" },\n { field: \"Agreement status\", value: \"Coach accepted, AD approval needed\" }\n ],\n contractStepCards: [\n { step: \"Coach\", icon: \"C\", label: \"Coach accepts\", desc: \"Both coaches agree to the date, time, level, site, and travel assumptions from the request thread.\", action: \"Accepted\" },\n { step: \"AD\", icon: \"AD\", label: \"AD approves\", desc: \"The AD sees rule checks, paperwork blockers, travel notes, and contract terms before publishing.\", action: \"Approve\" },\n { step: \"Event\", icon: \"E\", label: \"Event publishes\", desc: \"The approved contract creates the athletic event, worker checklist, calendar entry, and fan briefing.\", action: \"Publish\" }\n ]\n};\n```\n\n```action:showPaperwork\nreturn {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: true,\n coverageActive: false,\n modelActive: false,\n paperworkStats: [\n { icon: \"EL2\", label: \"EL2 blockers\", value: \"6\" },\n { icon: \"ECG\", label: \"ECG missing\", value: \"4\" },\n { icon: \"TR\", label: \"Travel releases\", value: \"8\" },\n { icon: \"OK\", label: \"Ready to play\", value: \"86%\" }\n ],\n paperworkCards: [\n { step: \"Physical\", icon: \"EL2\", label: \"EL2 physical\", desc: \"Tracks uploaded physical forms, expiration dates, doctor signature status, and whether the athlete is cleared for contact.\", action: \"Review EL2\" },\n { step: \"Cardiac\", icon: \"ECG\", label: \"ECG requirement\", desc: \"Shows who needs ECG paperwork or a waiver before tryouts, practice, travel, or competition.\", action: \"Check ECG\" },\n { step: \"Consent\", icon: \"HH\", label: \"Hold harmless\", desc: \"Covers parent release, sport-specific risk language, emergency treatment consent, and signature history.\", action: \"Send release\" },\n { step: \"Travel\", icon: \"TR\", label: \"Out-of-county travel\", desc: \"Required when a game crosses the county rule, has a long bus window, or needs parent permission before the event can publish.\", action: \"Collect travel\" },\n { step: \"Import\", icon: \"AC\", label: \"AthleticClearance\", desc: \"Pulls clearance status, expiration dates, uploaded documents, and blockers into Bricks without duplicating the source system.\", action: \"Sync status\" },\n { step: \"Eligibility\", icon: \"EL\", label: \"Eligibility check\", desc: \"Combines roster, grades, emergency contacts, insurance, training courses, and school-specific signoffs.\", action: \"Run check\" }\n ],\n clearanceRows: [\n { athlete: \"Athlete 24\", team: \"Girls soccer varsity\", el2: \"Expires Oct 3\", ecg: \"Missing\", athleticClearance: \"Pending\", holdHarmless: \"Signed\", travel: \"Needed for county line\", next: \"Send ECG and travel reminders\" },\n { athlete: \"Athlete 31\", team: \"Football varsity\", el2: \"Cleared\", ecg: \"Cleared\", athleticClearance: \"Approved\", holdHarmless: \"Signed\", travel: \"Not needed\", next: \"Ready to play\" },\n { athlete: \"Athlete 12\", team: \"Volleyball JV\", el2: \"Needs signature\", ecg: \"Waiver on file\", athleticClearance: \"Needs review\", holdHarmless: \"Unsigned\", travel: \"Not needed\", next: \"Parent packet incomplete\" },\n { athlete: \"Athlete 08\", team: \"Baseball varsity\", el2: \"Cleared\", ecg: \"Cleared\", athleticClearance: \"Approved\", holdHarmless: \"Signed\", travel: \"Needed for BJ game\", next: \"Collect out-of-county travel form\" }\n ],\n eventPaperworkRows: [\n { event: \"Girls soccer at Central Prep\", blockedBy: \"Out-of-county travel release\", source: \"Parent packet\", owner: \"Head coach\", deadline: \"Before bus request\", next: \"Send travel form to families\" },\n { event: \"Baseball at Northwood Academy\", blockedBy: \"Travel release and BJ game approval\", source: \"Schedule request\", owner: \"AD\", deadline: \"Before contract approval\", next: \"Attach travel form to request\" },\n { event: \"Football home opener\", blockedBy: \"Two EL2 expirations\", source: \"AthleticClearance sync\", owner: \"Athletic trainer\", deadline: \"Before game roster locks\", next: \"Review expired physicals\" }\n ],\n paperworkSourceRows: [\n { source: \"AthleticClearance\", bricksRecord: \"athlete_clearances\", bringsIn: \"Approval status, document links, expiration dates, missing requirements\" },\n { source: \"School OS students\", bricksRecord: \"student_id reference\", bringsIn: \"Roster identity, guardians, emergency contact, grade level, school\" },\n { source: \"School OS grades\", bricksRecord: \"student_eligibility_snapshots\", bringsIn: \"Current grading window, GPA signal, failed-class count, credit pace, attendance flags\" },\n { source: \"Parent upload\", bricksRecord: \"clearance_documents\", bringsIn: \"EL2, ECG, hold harmless, travel releases, insurance cards\" },\n { source: \"Event schedule\", bricksRecord: \"athletic_events\", bringsIn: \"Travel distance, county rule, sport, level, roster deadline, approval state\" }\n ]\n};\n```\n\n```action:showCoverage\nreturn {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: true,\n modelActive: false,\n coverageRows: [\n { date: \"Sep 5\", event: \"Varsity football home opener\", admin: \"Open\", workers: \"Gate missing 1\", risk: \"High attendance\" },\n { date: \"Sep 9\", event: \"Volleyball district match\", admin: \"Assistant principal\", workers: \"Covered\", risk: \"Normal\" },\n { date: \"Sep 12\", event: \"Soccer doubleheader\", admin: \"Open\", workers: \"Clock open\", risk: \"Two fields active\" },\n { date: \"Sep 19\", event: \"Homecoming football\", admin: \"Principal\", workers: \"Needs extra gate\", risk: \"Rivalry crowd\" }\n ],\n gapRows: [\n { gap: \"Admin on duty\", count: \"2 events\", fix: \"Send September coverage request to principal team\" },\n { gap: \"Ticket workers\", count: \"3 shifts\", fix: \"Ask booster club and mark paid worker slots\" },\n { gap: \"Official host\", count: \"1 event\", fix: \"Assign a trusted staff member from event worker pool\" }\n ]\n};\n```\n\n```action:showModel\nreturn {\n commandActive: false,\n finderActive: false,\n coachActive: false,\n requestActive: false,\n paperworkActive: false,\n coverageActive: false,\n modelActive: true,\n modelRows: [\n { model: \"athletic_programs\", purpose: \"School-level sports, seasons, levels, and who owns each program.\", ties: \"School OS schools, Workforce employees\" },\n { model: \"athletic_teams\", purpose: \"Varsity, JV, freshman, middle school teams with coach and AD authority settings.\", ties: \"Staff roles, permissions, calendars\" },\n { model: \"schedule_requests\", purpose: \"Coach-to-AD and coach-to-coach proposals, date options, approval state, and audit trail.\", ties: \"Notifications, email, SMS, calendars\" },\n { model: \"opponent_availability\", purpose: \"Controlled public availability windows for nearby schools and teams.\", ties: \"Location radius, contact preferences\" },\n { model: \"schedule_match_preferences\", purpose: \"Coach matching weights for competition level, travel, relationships, home/away balance, and transportation.\", ties: \"Opponent search, team history, coach settings\" },\n { model: \"replacement_requests\", purpose: \"Rainout, cancellation, and late-fill requests with urgency, available dates, radius, and reminder state.\", ties: \"Open dates, notifications, schedule requests\" },\n { model: \"athletic_events\", purpose: \"Official games, scrimmages, tournaments, practices, travel, and ticketing facts.\", ties: \"Calendar, Arbiter, GoFan, transportation\" },\n { model: \"event_assignments\", purpose: \"Admin, PA, chain crew, clock, book, host, gate workers, security, trainer, and volunteers.\", ties: \"Workforce, notifications, payroll later\" },\n { model: \"athlete_clearances\", purpose: \"EL2, EL3, ECG, insurance, courses, travel release, hold harmless, and expiration checks.\", ties: \"School OS students, privacy fields, documents\" },\n { model: \"student_eligibility_snapshots\", purpose: \"Weekly grade and credit eligibility pulled from School OS so Athletics can clear rosters without leaving the page.\", ties: \"School OS grades, attendance, credits, privacy-scoped role access\" },\n { model: \"event_briefings\", purpose: \"Reusable messages for officials, workers, visiting teams, fans, and admins.\", ties: \"Communications, groups, audit log\" }\n ],\n integrationCards: [\n { step: \"Install\", icon: \"A\", label: \"Athletics brick\", desc: \"Adds athletics models, pages, roles, sample data, and ask contracts without changing School OS internals.\", action: \"Own brick\" },\n { step: \"Connect\", icon: \"S\", label: \"School OS\", desc: \"References schools, students, employees, calendars, rooms, and staff roles instead of copying them.\", action: \"Shared records\" },\n { step: \"Notify\", icon: \"C\", label: \"Communications\", desc: \"Uses existing notifications for coach invites, worker texts, fan updates, and admin coverage requests.\", action: \"One message layer\" },\n { step: \"Extend\", icon: \"I\", label: \"Integrations\", desc: \"Stores external IDs for Arbiter, RQ+, GoFan, transportation, and document systems as optional links.\", action: \"No lock-in\" }\n ]\n};\n```\n"},{"title":"Auth","route":"/developer-tools/auth","pageLayout":null,"contentHtml":"

Auth

\n

User login and roles from auth.md. Define users, add roles: to any page frontmatter โ€” Bricks shows a login gate for unauthorized visitors.

\n

How It Works

\n

Add auth.md to your project root:

\n
---\nenabled: true\n---\n
\n
```users\n[\n  { \"name\": \"Admin\", \"email\": \"admin@example.com\", \"password\": \"admin123\", \"role\": \"admin\" }\n]\n
\n
[\n  { \"name\": \"admin\", \"label\": \"Administrator\", \"permissions\": [\"read\", \"write\", \"admin\"] }\n]\n
\n
\nThen protect any page with `roles:` in its frontmatter:\n\n
\n
\n

title: Admin Panel\nroute: /admin\nroles: [admin]

\n
\nBricks renders a login gate for that route. Signed-in users with a matching role see the page; others see an access-denied message.\n\n## Live Demo\n\n| Email | Password | Role |\n|---|---|---|\n| admin@example.com | admin123 | admin |\n| user@example.com | user123 | user |\n\n\n\n\n\n\n\n\n\n\n
\n","searchText":"Auth User login and roles from . Define users, add to any page frontmatter โ€” Bricks shows a login gate for unauthorized visitors. How It Works Add to your project root: users [ { \"name\": \"Admin\", \"email\": \"admin@example.com\", \"password\": \"admin123\", \"role\": \"admin\" } ] roles [ { \"name\": \"admin\", \"label\": \"Administrator\", \"permissions\": [\"read\", \"write\", \"admin\"] } ] Then protect any page with in its frontmatter: Bricks renders a login gate for that route. Signed-in users with a matching role see the page; others see an access-denied message. Live Demo | Email | Password | Role | |---|---|---| | admin@example.com | admin123 | admin | | user@example.com | user123 | user |","state":{"email":"","password":"","loggedIn":false,"currentUser":null,"error":""},"template":{"html":"
\n\n
\n
Sign in
\n
\n
\n \n \n {error}\n
\n
\n \n \n
\n \n
\n
\n\n
\n
\n
{currentUser.initial}
\n
\n
{currentUser.name}
\n
Role: {currentUser.role}
\n
\n
\n
\n \n
\n
\n\n
"},"actions":[{"name":"login","code":"const users = [\n { name: \"Admin User\", email: \"admin@example.com\", password: \"admin123\", role: \"admin\" },\n { name: \"Regular User\", email: \"user@example.com\", password: \"user123\", role: \"user\" }\n];\nconst user = users.find(function(u) { return u.email === state.email && u.password === state.password; });\nif (user) {\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify({ name: user.name })); } catch(e) {}\n return { email: state.email, password: \"\", loggedIn: true, currentUser: { name: user.name, role: user.role, initial: user.name.charAt(0) }, error: \"\" };\n}\nreturn { email: state.email, password: state.password, loggedIn: false, currentUser: null, error: \"Invalid email or password\" };"},{"name":"logout","code":"try { sessionStorage.removeItem(\"bricks.auth\"); sessionStorage.removeItem(\"bricks.token\"); sessionStorage.removeItem(\"bricks.refresh\"); } catch(e) {}\nreturn { email: \"\", password: \"\", loggedIn: false, currentUser: null, error: \"\" };"}],"styles":".auth-demo-form[data-logged=\"true\"] { display: none; }\n.auth-demo-success[data-logged=\"false\"] { display: none; }\n\n.auth-demo {\n max-width: var(--width-lg);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n}\n\n.auth-demo-heading {\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n color: var(--text);\n margin-bottom: var(--spacing-4);\n}\n\n.auth-demo-user {\n display: flex;\n align-items: center;\n gap: var(--spacing-4);\n padding: var(--spacing-4);\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n margin-bottom: var(--spacing-4);\n}\n\n.auth-demo-avatar {\n width: var(--spacing-10);\n height: var(--spacing-10);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--accent-text);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-bold);\n flex-shrink: 0;\n text-transform: uppercase;\n}\n\n.auth-demo-info {\n flex: 1;\n min-width: 0;\n}\n\n.auth-demo-name {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n color: var(--text);\n}\n\n.auth-demo-role {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n margin-top: var(--spacing-1);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Auth\nroute: /developer-tools/auth\n---\n\n# Auth\n\nUser login and roles from `auth.md`. Define users, add `roles:` to any page frontmatter โ€” Bricks shows a login gate for unauthorized visitors.\n\n## How It Works\n\nAdd `auth.md` to your project root:\n\n```\n---\nenabled: true\n---\n```\n\n```\n```users\n[\n { \"name\": \"Admin\", \"email\": \"admin@example.com\", \"password\": \"admin123\", \"role\": \"admin\" }\n]\n```\n\n```roles\n[\n { \"name\": \"admin\", \"label\": \"Administrator\", \"permissions\": [\"read\", \"write\", \"admin\"] }\n]\n```\n```\n\nThen protect any page with `roles:` in its frontmatter:\n\n```\n---\ntitle: Admin Panel\nroute: /admin\nroles: [admin]\n---\n```\n\nBricks renders a login gate for that route. Signed-in users with a matching role see the page; others see an access-denied message.\n\n## Live Demo\n\n| Email | Password | Role |\n|---|---|---|\n| admin@example.com | admin123 | admin |\n| user@example.com | user123 | user |\n\n```state\n{ \"email\": \"\", \"password\": \"\", \"loggedIn\": false, \"currentUser\": null, \"error\": \"\" }\n```\n\n```template\n
\n\n
\n
Sign in
\n
\n
\n \n \n {error}\n
\n
\n \n \n
\n \n
\n
\n\n
\n
\n
{currentUser.initial}
\n
\n
{currentUser.name}
\n
Role: {currentUser.role}
\n
\n
\n
\n \n
\n
\n\n
\n```\n\n```action:login\nconst users = [\n { name: \"Admin User\", email: \"admin@example.com\", password: \"admin123\", role: \"admin\" },\n { name: \"Regular User\", email: \"user@example.com\", password: \"user123\", role: \"user\" }\n];\nconst user = users.find(function(u) { return u.email === state.email && u.password === state.password; });\nif (user) {\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify({ name: user.name })); } catch(e) {}\n return { email: state.email, password: \"\", loggedIn: true, currentUser: { name: user.name, role: user.role, initial: user.name.charAt(0) }, error: \"\" };\n}\nreturn { email: state.email, password: state.password, loggedIn: false, currentUser: null, error: \"Invalid email or password\" };\n```\n\n```action:logout\ntry { sessionStorage.removeItem(\"bricks.auth\"); sessionStorage.removeItem(\"bricks.token\"); sessionStorage.removeItem(\"bricks.refresh\"); } catch(e) {}\nreturn { email: \"\", password: \"\", loggedIn: false, currentUser: null, error: \"\" };\n```\n\n```style\n.auth-demo-form[data-logged=\"true\"] { display: none; }\n.auth-demo-success[data-logged=\"false\"] { display: none; }\n\n.auth-demo {\n max-width: var(--width-lg);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n}\n\n.auth-demo-heading {\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n color: var(--text);\n margin-bottom: var(--spacing-4);\n}\n\n.auth-demo-user {\n display: flex;\n align-items: center;\n gap: var(--spacing-4);\n padding: var(--spacing-4);\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n margin-bottom: var(--spacing-4);\n}\n\n.auth-demo-avatar {\n width: var(--spacing-10);\n height: var(--spacing-10);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--accent-text);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-bold);\n flex-shrink: 0;\n text-transform: uppercase;\n}\n\n.auth-demo-info {\n flex: 1;\n min-width: 0;\n}\n\n.auth-demo-name {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n color: var(--text);\n}\n\n.auth-demo-role {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n margin-top: var(--spacing-1);\n}\n```\n"},{"title":"IP Blacklist","route":"/security/blacklist","pageLayout":"blacklist","contentHtml":"

IP Blacklist

\n

Manage blacklisted IP addresses. IPs are automatically added when\nforbidden URL patterns are detected (e.g. /.env, /wp-admin probes).

\n","searchText":"IP Blacklist Manage blacklisted IP addresses. IPs are automatically added when forbidden URL patterns are detected (e.g. /.env, /wp-admin probes).","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser","admin"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: IP Blacklist\nroute: /security/blacklist\nlayout: blacklist\nroles: [superuser, admin]\n---\n\n# IP Blacklist\n\nManage blacklisted IP addresses. IPs are automatically added when\nforbidden URL patterns are detected (e.g. /.env, /wp-admin probes).\n"},{"title":"Start","route":"/brick-builder","pageLayout":"chat","contentHtml":"

Start

\n

Start-page entry

\n

Present one central Build your business workspace entry in Assist mode:

\n
    \n
  1. A short explanation and sentence input with Build my workspace.
    2. \n
  2. Prefer to answer questions? followed by Guide me.
    3. \n
  3. Business cards beneath Or start with your kind of business.
    4. \n
  4. A separate Explore departments and workflows picker below the business\ncards, with search, distinct Departments/Workflows groups, and focused guided setup.
    5. \n
  5. A secondary Open Expert mode action below the picker.
    6. \n
\n

Use the same composer for this entry and ongoing conversations. Do not show a\nseparate top banner or bottom composer while the central entry is visible.\nThe sentence, Guide me, and business-card paths use the guided builder;\ndepartment/workflow selections ask only about relevant optional tools, then\nreview price and choices before explicit creation. Business answers are unchanged.\nSchool Athletics is excluded from this picker; its catalog entry is preserved.\nCheck suggested answers and\nreview supported tools, dependencies, prices, and configuration before installing.\nExisting conversations and Expert mode retain the conversation layout.

\n

Copy lives in config/chat.md; entry sizing and typography use the shared chat\ntokens in config/design.md and generated composer styles.

\n","searchText":"Start Start-page entry Present one central Build your business workspace entry in Assist mode: A short explanation and sentence input with Build my workspace. Prefer to answer questions? followed by Guide me. Business cards beneath Or start with your kind of business. A separate Explore departments and workflows picker below the business cards, with search, distinct Departments/Workflows groups, and focused guided setup. A secondary Open Expert mode action below the picker. Use the same composer for this entry and ongoing conversations. Do not show a separate top banner or bottom composer while the central entry is visible. The sentence, Guide me, and business-card paths use the guided builder; department/workflow selections ask only about relevant optional tools, then review price and choices before explicit creation. Business answers are unchanged. School Athletics is excluded from this picker; its catalog entry is preserved. Check suggested answers and review supported tools, dependencies, prices, and configuration before installing. Existing conversations and Expert mode retain the conversation layout. Copy lives in ; entry sizing and typography use the shared chat tokens in and generated composer styles.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Start\nroute: /brick-builder\nlayout: chat\n---\n\n# Start\n\n## Start-page entry\n\nPresent one central **Build your business workspace** entry in Assist mode:\n\n1. A short explanation and sentence input with **Build my workspace**.\n2. **Prefer to answer questions?** followed by **Guide me**.\n3. Business cards beneath **Or start with your kind of business**.\n4. A separate **Explore departments and workflows** picker below the business\n cards, with search, distinct Departments/Workflows groups, and focused guided setup.\n5. A secondary **Open Expert mode** action below the picker.\n\nUse the same composer for this entry and ongoing conversations. Do not show a\nseparate top banner or bottom composer while the central entry is visible.\nThe sentence, Guide me, and business-card paths use the guided builder;\ndepartment/workflow selections ask only about relevant optional tools, then\nreview price and choices before explicit creation. Business answers are unchanged.\nSchool Athletics is excluded from this picker; its catalog entry is preserved.\nCheck suggested answers and\nreview supported tools, dependencies, prices, and configuration before installing.\nExisting conversations and Expert mode retain the conversation layout.\n\nCopy lives in `config/chat.md`; entry sizing and typography use the shared chat\ntokens in `config/design.md` and generated composer styles.\n"},{"title":"Bricks","route":"/developer-tools/bricks","pageLayout":null,"contentHtml":"

Bricks Report

\n

This page shows the output of the /bricks analysis skill.

\n","searchText":"Bricks Report This page shows the output of the analysis skill.","state":{"report":"","loading":false},"template":{"html":"
\n \n
\n
{report}
"},"actions":[],"styles":".bricks-report-actions {\n margin-bottom: var(--spacing-4);\n}\n.bricks-report-output {\n white-space: pre-wrap;\n word-break: break-word;\n min-height: var(--height-2xl);\n color: var(--text);\n opacity: 0.85;\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Bricks\nroute: /developer-tools/bricks\n---\n\n# Bricks Report\n\nThis page shows the output of the `/bricks` analysis skill.\n\n```state\n{ \"report\": \"\", \"loading\": false }\n```\n\n```template\n
\n \n
\n
{report}
\n```\n\n```style\n.bricks-report-actions {\n margin-bottom: var(--spacing-4);\n}\n.bricks-report-output {\n white-space: pre-wrap;\n word-break: break-word;\n min-height: var(--height-2xl);\n color: var(--text);\n opacity: 0.85;\n}\n```\n"},{"title":"Business","route":"/business","pageLayout":"fullscreen","contentHtml":"","searchText":"","state":{"updatedLabel":"","liveLabel":"","arr":"$0","arrWow":"+0%","arrMom":"+0%","companies":"0","companiesWow":"+0%","bricks":"0","bricksWow":"+0%","workflows":"0","workflowsWow":"+0%","messages":"0","messagesWow":"+0%","emails":"0","emailsWow":"+0%","newArr":"$0","newCompanies":"0","selfHosted":"0%","growthScore":"0","chartPath":"","areaPath":"","dotX":"0","dotY":"0","axisSvg":"","feed":[]},"template":{"html":"
\n
\n Bricks Co\n
{liveLabel}
\n \n
\n\n
\n
\n
\n
\n

Public growth dashboard

\n

Business Pulse

\n
\n
\n Yearly revenue pace\n {arr}\n {arrWow} this week / {arrMom} this month\n
\n
\n\n
\n
\n Active companies\n {companies}\n {companiesWow} this week\n
\n
\n Features added\n {bricks}\n {bricksWow} this week\n
\n
\n Work handled\n {workflows}\n {workflowsWow} this week\n
\n
\n Human messages\n {messages}\n {messagesWow} this week\n
\n
\n Emails sent\n {emails}\n {emailsWow} this week\n
\n
\n Growth score\n {growthScore}\n live signal\n
\n
\n\n
\n
\n
\n

Revenue pace

\n

Growing week by week

\n
\n

Updated {updatedLabel}

\n
\n\n \n Annual run rate growth curve\n Animated modeled annual run rate curve with a rising area fill.\n \n \n \n \n \n \n {axisSvg}\n \n \n \n \n
\n
\n\n \n
\n
"},"actions":[{"name":"init","code":"var start = new Date(\"2026-01-23T00:00:00\");\nvar dayMs = 24 * 60 * 60 * 1000;\n\nfunction sigmoid(x) {\n return 1 / (1 + Math.exp(-x));\n}\n\nfunction momentum(day, base, lift, midpoint, steepness, pulse) {\n var core = base + lift * sigmoid((day - midpoint) / steepness);\n var weekWave = Math.sin(day / 3.7) * pulse;\n var monthWave = Math.sin(day / 12.5) * pulse * 1.2;\n var compounding = Math.max(0, day - 86) * pulse * 0.85;\n return Math.max(base, core + weekWave + monthWave + compounding);\n}\n\nfunction modelDay(now) {\n var elapsed = Math.max(1, (now.getTime() - start.getTime()) / dayMs);\n return elapsed + (now.getSeconds() / 86400);\n}\n\nfunction arrAt(day) {\n return momentum(day, 210000, 7200000, 62, 12.5, 42000);\n}\n\nfunction companiesAt(day) {\n return momentum(day, 38, 7200, 64, 15, 24);\n}\n\nfunction bricksAt(day) {\n return companiesAt(day) * 4.8 + momentum(day, 180, 4100, 60, 14, 46);\n}\n\nfunction workflowsAt(day) {\n return companiesAt(day) * 72 + momentum(day, 1200, 118000, 61, 15, 2600);\n}\n\nfunction messagesAt(day) {\n return companiesAt(day) * 146 + momentum(day, 1800, 260000, 58, 14, 5200);\n}\n\nfunction emailsAt(day) {\n return companiesAt(day) * 53 + momentum(day, 900, 72000, 60, 15, 2100);\n}\n\nfunction pct(current, previous) {\n if (!previous || previous <= 0) return \"+0%\";\n var change = ((current - previous) / previous) * 100;\n var sign = change >= 0 ? \"+\" : \"\";\n return sign + Math.round(change) + \"%\";\n}\n\nfunction fmtInt(value) {\n return Math.round(value).toLocaleString(\"en-US\");\n}\n\nfunction fmtMoney(value) {\n return \"$\" + Math.round(value).toLocaleString(\"en-US\");\n}\n\nfunction fmtCompactMoney(value) {\n if (value >= 1000000) return \"$\" + (value / 1000000).toFixed(1) + \"M\";\n if (value >= 1000) return \"$\" + Math.round(value / 1000) + \"K\";\n return fmtMoney(value);\n}\n\nfunction fmtDate(date) {\n return date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nfunction fmtTime(date) {\n return date.toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" });\n}\n\nfunction fmtTickDate(date) {\n return date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nfunction makeChart(day, currentArr) {\n var chartLeft = 58;\n var chartRight = 724;\n var chartTop = 22;\n var chartBottom = 250;\n var pointCount = 76;\n var values = [];\n for (var i = 0; i < pointCount; i++) {\n var pointDay = Math.round((day * i) / (pointCount - 1));\n values.push(arrAt(pointDay));\n }\n\n var maxValue = Math.max.apply(null, values.concat([currentArr]));\n var maxMillions = Math.max(2, Math.ceil(maxValue / 2000000) * 2);\n var chartMax = maxMillions * 1000000;\n var chartPath = \"\";\n\n for (var p = 0; p < values.length; p++) {\n var x = chartLeft + ((chartRight - chartLeft) * p) / (values.length - 1);\n var y = chartBottom - (values[p] / chartMax) * (chartBottom - chartTop);\n chartPath += (p === 0 ? \"M \" : \" L \") + x.toFixed(1) + \" \" + y.toFixed(1);\n }\n\n var axisSvg = \"\";\n for (var yIndex = 0; yIndex <= 3; yIndex++) {\n var value = (chartMax / 3) * (3 - yIndex);\n var labelY = chartTop + ((chartBottom - chartTop) * yIndex) / 3;\n var text = value === 0 ? \"$0\" : \"$\" + Math.round(value / 1000000) + \"M\";\n axisSvg += '' + text + '';\n }\n for (var xIndex = 0; xIndex <= 4; xIndex++) {\n var xDay = Math.round((day * xIndex) / 4);\n var date = new Date(start.getTime() + xDay * dayMs);\n var xLabel = chartLeft + ((chartRight - chartLeft) * xIndex) / 4;\n axisSvg += '' + fmtTickDate(date) + '';\n }\n\n var lastX = chartRight;\n var lastY = chartBottom - (values[values.length - 1] / chartMax) * (chartBottom - chartTop);\n\n return {\n chartPath: chartPath,\n areaPath: chartPath + \" L \" + chartRight + \" \" + chartBottom + \" L \" + chartLeft + \" \" + chartBottom + \" Z\",\n dotX: lastX.toFixed(1),\n dotY: lastY.toFixed(1),\n axisSvg: axisSvg\n };\n}\n\nfunction feedFor(now, day) {\n var sectors = [\"clinic\", \"school\", \"agency\", \"field service\", \"retail shop\", \"nonprofit\"];\n var bricks = [\"CRM + Billing\", \"Scheduling + Messaging\", \"Gradebook + HR\", \"Inventory + POS\", \"Field Service + Reports\"];\n var baseMinute = now.getMinutes();\n var out = [];\n for (var i = 0; i < 5; i++) {\n var stamp = new Date(now.getTime() - (i * 11 + Math.floor(day % 7)) * 60000);\n var sector = sectors[Math.abs(Math.floor(day + i * 3)) % sectors.length];\n var brick = bricks[Math.abs(Math.floor(day * 2 + i)) % bricks.length];\n out.push({\n time: fmtTime(stamp),\n title: sector + \" business launched\",\n detail: brick + \" added\"\n });\n }\n return out;\n}\n\nfunction computeState() {\n var now = new Date();\n var day = modelDay(now);\n var weekDay = Math.max(1, day - 7);\n var monthDay = Math.max(1, day - 30);\n\n var arr = arrAt(day);\n var companies = companiesAt(day);\n var bricks = bricksAt(day);\n var workflows = workflowsAt(day);\n var messages = messagesAt(day);\n var emails = emailsAt(day);\n var chart = makeChart(day, arr);\n var weekArr = arr - arrAt(weekDay);\n var score = 74 + Math.round(Math.sin(day / 4) * 4 + pct(arr, arrAt(weekDay)).replace(\"%\", \"\").replace(\"+\", \"\") * 0.4);\n\n return {\n updatedLabel: fmtDate(now),\n liveLabel: \"Live \" + fmtTime(now),\n arr: fmtMoney(arr),\n arrWow: pct(arr, arrAt(weekDay)),\n arrMom: pct(arr, arrAt(monthDay)),\n companies: fmtInt(companies),\n companiesWow: pct(companies, companiesAt(weekDay)),\n bricks: fmtInt(bricks),\n bricksWow: pct(bricks, bricksAt(weekDay)),\n workflows: fmtInt(workflows),\n workflowsWow: pct(workflows, workflowsAt(weekDay)),\n messages: fmtInt(messages),\n messagesWow: pct(messages, messagesAt(weekDay)),\n emails: fmtInt(emails),\n emailsWow: pct(emails, emailsAt(weekDay)),\n newArr: fmtCompactMoney(weekArr),\n newCompanies: fmtInt(companies - companiesAt(weekDay)),\n selfHosted: Math.max(18, Math.round(24 + Math.sin(day / 9) * 4)) + \"%\",\n growthScore: String(score),\n chartPath: chart.chartPath,\n areaPath: chart.areaPath,\n dotX: chart.dotX,\n dotY: chart.dotY,\n axisSvg: chart.axisSvg,\n feed: feedFor(now, day)\n };\n}\n\ntry {\n if (window.__bricksBusinessPulseTimer) clearInterval(window.__bricksBusinessPulseTimer);\n window.__bricksBusinessPulseTimer = setInterval(function() {\n if (window.location.pathname !== \"/business\") {\n clearInterval(window.__bricksBusinessPulseTimer);\n window.__bricksBusinessPulseTimer = null;\n return;\n }\n update(computeState());\n }, 1500);\n} catch (e) {}\n\nreturn computeState();"}],"styles":".bricks-template {\n margin: var(--spacing-0);\n width: 100vw;\n max-width: none;\n}\n\n.business-live {\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n background:\n linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg) 46%, color-mix(in srgb, var(--success) 10%, var(--surface)));\n color: var(--text);\n padding: var(--spacing-4) var(--spacing-8);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n font-family: var(--font);\n}\n\n.business-topbar {\n min-height: var(--height-base);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-3);\n padding: var(--spacing-0);\n}\n\n.business-mark,\n.business-topbar a {\n color: var(--text);\n text-decoration: none;\n}\n\n.business-mark {\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-lg);\n}\n\n.marketing-mark.marketing-mark {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-2);\n color: var(--text);\n text-decoration: none !important;\n font-family: var(--font);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-extrabold) !important;\n line-height: var(--line-height-lg);\n}\n\n.marketing-mark.marketing-mark:hover,\n.marketing-mark.marketing-mark:focus,\n.marketing-mark.marketing-mark * {\n text-decoration: none !important;\n}\n\n.marketing-mark-dots {\n width: var(--font-size-xs);\n height: var(--font-size-xs);\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--spacing-1);\n flex-shrink: 0;\n}\n\n.marketing-mark-dots span {\n border-radius: var(--radius-sm);\n background: var(--accent);\n}\n\n.business-topbar nav {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--spacing-3);\n font-size: var(--font-size-sm);\n}\n\n.business-live-pill {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-2);\n padding: var(--spacing-2) var(--spacing-3);\n border-radius: var(--radius-full);\n background: var(--surface);\n color: var(--text-muted);\n border: 1px solid var(--border);\n font-size: var(--font-size-xs);\n}\n\n.business-live-pill span {\n width: var(--spacing-2);\n height: var(--spacing-2);\n border-radius: var(--radius-full);\n background: var(--success);\n animation: businessPulse 1400ms ease-in-out infinite;\n}\n\n.business-shell {\n flex: 1;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1.68fr) minmax(0, 0.82fr);\n gap: var(--spacing-2);\n}\n\n.business-main,\n.business-side {\n min-height: 0;\n display: grid;\n gap: var(--spacing-2);\n}\n\n.business-main {\n grid-template-rows: auto auto minmax(0, 1fr);\n}\n\n.business-side {\n grid-template-rows: auto minmax(0, 1fr) auto;\n}\n\n.business-hero-panel,\n.business-metric,\n.business-chart-panel,\n.business-side-card {\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n background: color-mix(in srgb, var(--surface) 93%, transparent);\n box-shadow: var(--shadow-sm);\n}\n\n.business-hero-panel {\n min-height: var(--height-xl);\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--spacing-3);\n align-items: end;\n padding: var(--spacing-4);\n}\n\n.business-kicker {\n margin: var(--spacing-0);\n color: var(--accent);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n letter-spacing: var(--letter-spacing-wide);\n text-transform: uppercase;\n}\n\n.business-hero-panel h1 {\n margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-2xl);\n letter-spacing: var(--letter-spacing-normal);\n}\n\n.business-hero-number {\n text-align: right;\n}\n\n.business-hero-number span,\n.business-hero-number em,\n.business-metric span,\n.business-metric em,\n.business-week-grid span,\n.business-feed em,\n.business-flywheel-row span,\n.business-panel-head p {\n color: var(--text-muted);\n font-style: normal;\n font-size: var(--font-size-xs);\n}\n\n.business-hero-number strong {\n display: block;\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-2xl);\n letter-spacing: var(--letter-spacing-normal);\n}\n\n.business-metric-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--spacing-2);\n}\n\n.business-metric {\n min-height: var(--height-xl);\n padding: var(--spacing-3);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.business-metric strong {\n font-size: var(--font-size-xl);\n line-height: var(--line-height-xl);\n}\n\n.business-chart-panel,\n.business-side-card {\n min-height: 0;\n padding: var(--spacing-3);\n}\n\n.business-chart-panel {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n gap: var(--spacing-2);\n}\n\n.business-panel-head {\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: var(--spacing-3);\n}\n\n.business-panel-head h2 {\n margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n}\n\n.business-chart {\n width: 100%;\n height: 100%;\n min-height: 0;\n color: var(--text);\n overflow: visible;\n}\n\n.business-chart-axis {\n color: var(--text-muted);\n font-size: var(--font-size-xs);\n font-family: var(--font-body);\n}\n\n.business-chart-axis text {\n fill: currentColor;\n}\n\n.business-chart-area {\n fill: url(#businessAreaFade);\n stroke: none;\n animation: businessFadeIn var(--transitions-slow) ease both;\n}\n\n.business-chart-line {\n fill: none;\n stroke: currentColor;\n stroke-width: 4;\n stroke-linecap: round;\n stroke-linejoin: round;\n animation: businessGlow 1500ms ease-in-out infinite;\n}\n\n.business-chart-dot {\n fill: var(--accent);\n stroke: var(--surface);\n stroke-width: 3;\n transform-box: fill-box;\n transform-origin: center;\n animation: businessDot 1400ms ease-in-out infinite;\n}\n\n.business-week-card {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n\n.business-week-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--spacing-2);\n}\n\n.business-week-grid div {\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n background: var(--bg);\n padding: var(--spacing-2);\n}\n\n.business-week-grid strong {\n display: block;\n margin-top: var(--spacing-1);\n font-size: var(--font-size-lg);\n line-height: var(--line-height-lg);\n}\n\n.business-feed-card {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n\n.business-feed {\n list-style: none;\n padding: var(--spacing-0);\n margin: var(--spacing-0);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n min-height: 0;\n}\n\n.business-feed li {\n border-left: 1px solid var(--accent);\n padding: var(--spacing-2);\n background: var(--bg);\n border-radius: var(--radius-sm);\n animation: businessSlideUp var(--transitions-slow) ease both;\n}\n\n.business-feed li:nth-child(n+4) {\n display: none;\n}\n\n.business-feed span,\n.business-feed strong,\n.business-feed em {\n display: block;\n}\n\n.business-feed strong {\n font-size: var(--font-size-xs);\n margin: var(--spacing-1) var(--spacing-0);\n}\n\n.business-flywheel {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n\n.business-flywheel-row {\n display: flex;\n justify-content: space-between;\n gap: var(--spacing-2);\n border-top: 1px solid var(--border);\n padding-top: var(--spacing-2);\n}\n\n@keyframes businessPulse {\n 0% { transform: scale(1); opacity: 0.65; }\n 50% { transform: scale(1.4); opacity: 1; }\n 100% { transform: scale(1); opacity: 0.65; }\n}\n\n@keyframes businessFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes businessGlow {\n 0% { opacity: 0.78; }\n 50% { opacity: 1; }\n 100% { opacity: 0.78; }\n}\n\n@keyframes businessDot {\n 0% { transform: scale(1); opacity: 0.78; }\n 50% { transform: scale(1.35); opacity: 1; }\n 100% { transform: scale(1); opacity: 0.78; }\n}\n\n@keyframes businessSlideUp {\n from { opacity: 0; transform: translateY(var(--spacing-2)); }\n to { opacity: 1; transform: translateY(var(--spacing-0)); }\n}\n\n@media (max-width: 70em) {\n .business-live {\n height: auto;\n min-height: 100vh;\n overflow: auto;\n }\n\n .business-topbar {\n flex-wrap: wrap;\n }\n\n .business-shell,\n .business-hero-panel {\n grid-template-columns: 1fr;\n }\n\n .business-main,\n .business-side {\n grid-template-rows: auto;\n }\n\n .business-hero-number {\n text-align: left;\n }\n\n .business-hero-panel h1,\n .business-hero-number strong {\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-2xl);\n }\n\n .business-metric-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .business-week-grid {\n grid-template-columns: 1fr;\n }\n\n .business-chart {\n height: auto;\n min-height: var(--width-sm);\n }\n}\n\n@media (max-width: 90em) {\n .business-feed li:nth-child(n+3) {\n display: none;\n }\n}\n\n@media (max-width: 40em) {\n .business-metric-grid {\n grid-template-columns: 1fr;\n }\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Business\nroute: /business\nlayout: fullscreen\n---\n\n```state\n{\n \"updatedLabel\": \"\",\n \"liveLabel\": \"\",\n \"arr\": \"$0\",\n \"arrWow\": \"+0%\",\n \"arrMom\": \"+0%\",\n \"companies\": \"0\",\n \"companiesWow\": \"+0%\",\n \"bricks\": \"0\",\n \"bricksWow\": \"+0%\",\n \"workflows\": \"0\",\n \"workflowsWow\": \"+0%\",\n \"messages\": \"0\",\n \"messagesWow\": \"+0%\",\n \"emails\": \"0\",\n \"emailsWow\": \"+0%\",\n \"newArr\": \"$0\",\n \"newCompanies\": \"0\",\n \"selfHosted\": \"0%\",\n \"growthScore\": \"0\",\n \"chartPath\": \"\",\n \"areaPath\": \"\",\n \"dotX\": \"0\",\n \"dotY\": \"0\",\n \"axisSvg\": \"\",\n \"feed\": []\n}\n```\n\n```template\n
\n
\n Bricks Co\n
{liveLabel}
\n \n
\n\n
\n
\n
\n
\n

Public growth dashboard

\n

Business Pulse

\n
\n
\n Yearly revenue pace\n {arr}\n {arrWow} this week / {arrMom} this month\n
\n
\n\n
\n
\n Active companies\n {companies}\n {companiesWow} this week\n
\n
\n Features added\n {bricks}\n {bricksWow} this week\n
\n
\n Work handled\n {workflows}\n {workflowsWow} this week\n
\n
\n Human messages\n {messages}\n {messagesWow} this week\n
\n
\n Emails sent\n {emails}\n {emailsWow} this week\n
\n
\n Growth score\n {growthScore}\n live signal\n
\n
\n\n
\n
\n
\n

Revenue pace

\n

Growing week by week

\n
\n

Updated {updatedLabel}

\n
\n\n \n Annual run rate growth curve\n Animated modeled annual run rate curve with a rising area fill.\n \n \n \n \n \n \n {axisSvg}\n \n \n \n \n
\n
\n\n \n
\n
\n```\n\n```action:init\nvar start = new Date(\"2026-01-23T00:00:00\");\nvar dayMs = 24 * 60 * 60 * 1000;\n\nfunction sigmoid(x) {\n return 1 / (1 + Math.exp(-x));\n}\n\nfunction momentum(day, base, lift, midpoint, steepness, pulse) {\n var core = base + lift * sigmoid((day - midpoint) / steepness);\n var weekWave = Math.sin(day / 3.7) * pulse;\n var monthWave = Math.sin(day / 12.5) * pulse * 1.2;\n var compounding = Math.max(0, day - 86) * pulse * 0.85;\n return Math.max(base, core + weekWave + monthWave + compounding);\n}\n\nfunction modelDay(now) {\n var elapsed = Math.max(1, (now.getTime() - start.getTime()) / dayMs);\n return elapsed + (now.getSeconds() / 86400);\n}\n\nfunction arrAt(day) {\n return momentum(day, 210000, 7200000, 62, 12.5, 42000);\n}\n\nfunction companiesAt(day) {\n return momentum(day, 38, 7200, 64, 15, 24);\n}\n\nfunction bricksAt(day) {\n return companiesAt(day) * 4.8 + momentum(day, 180, 4100, 60, 14, 46);\n}\n\nfunction workflowsAt(day) {\n return companiesAt(day) * 72 + momentum(day, 1200, 118000, 61, 15, 2600);\n}\n\nfunction messagesAt(day) {\n return companiesAt(day) * 146 + momentum(day, 1800, 260000, 58, 14, 5200);\n}\n\nfunction emailsAt(day) {\n return companiesAt(day) * 53 + momentum(day, 900, 72000, 60, 15, 2100);\n}\n\nfunction pct(current, previous) {\n if (!previous || previous <= 0) return \"+0%\";\n var change = ((current - previous) / previous) * 100;\n var sign = change >= 0 ? \"+\" : \"\";\n return sign + Math.round(change) + \"%\";\n}\n\nfunction fmtInt(value) {\n return Math.round(value).toLocaleString(\"en-US\");\n}\n\nfunction fmtMoney(value) {\n return \"$\" + Math.round(value).toLocaleString(\"en-US\");\n}\n\nfunction fmtCompactMoney(value) {\n if (value >= 1000000) return \"$\" + (value / 1000000).toFixed(1) + \"M\";\n if (value >= 1000) return \"$\" + Math.round(value / 1000) + \"K\";\n return fmtMoney(value);\n}\n\nfunction fmtDate(date) {\n return date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nfunction fmtTime(date) {\n return date.toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" });\n}\n\nfunction fmtTickDate(date) {\n return date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nfunction makeChart(day, currentArr) {\n var chartLeft = 58;\n var chartRight = 724;\n var chartTop = 22;\n var chartBottom = 250;\n var pointCount = 76;\n var values = [];\n for (var i = 0; i < pointCount; i++) {\n var pointDay = Math.round((day * i) / (pointCount - 1));\n values.push(arrAt(pointDay));\n }\n\n var maxValue = Math.max.apply(null, values.concat([currentArr]));\n var maxMillions = Math.max(2, Math.ceil(maxValue / 2000000) * 2);\n var chartMax = maxMillions * 1000000;\n var chartPath = \"\";\n\n for (var p = 0; p < values.length; p++) {\n var x = chartLeft + ((chartRight - chartLeft) * p) / (values.length - 1);\n var y = chartBottom - (values[p] / chartMax) * (chartBottom - chartTop);\n chartPath += (p === 0 ? \"M \" : \" L \") + x.toFixed(1) + \" \" + y.toFixed(1);\n }\n\n var axisSvg = \"\";\n for (var yIndex = 0; yIndex <= 3; yIndex++) {\n var value = (chartMax / 3) * (3 - yIndex);\n var labelY = chartTop + ((chartBottom - chartTop) * yIndex) / 3;\n var text = value === 0 ? \"$0\" : \"$\" + Math.round(value / 1000000) + \"M\";\n axisSvg += '' + text + '';\n }\n for (var xIndex = 0; xIndex <= 4; xIndex++) {\n var xDay = Math.round((day * xIndex) / 4);\n var date = new Date(start.getTime() + xDay * dayMs);\n var xLabel = chartLeft + ((chartRight - chartLeft) * xIndex) / 4;\n axisSvg += '' + fmtTickDate(date) + '';\n }\n\n var lastX = chartRight;\n var lastY = chartBottom - (values[values.length - 1] / chartMax) * (chartBottom - chartTop);\n\n return {\n chartPath: chartPath,\n areaPath: chartPath + \" L \" + chartRight + \" \" + chartBottom + \" L \" + chartLeft + \" \" + chartBottom + \" Z\",\n dotX: lastX.toFixed(1),\n dotY: lastY.toFixed(1),\n axisSvg: axisSvg\n };\n}\n\nfunction feedFor(now, day) {\n var sectors = [\"clinic\", \"school\", \"agency\", \"field service\", \"retail shop\", \"nonprofit\"];\n var bricks = [\"CRM + Billing\", \"Scheduling + Messaging\", \"Gradebook + HR\", \"Inventory + POS\", \"Field Service + Reports\"];\n var baseMinute = now.getMinutes();\n var out = [];\n for (var i = 0; i < 5; i++) {\n var stamp = new Date(now.getTime() - (i * 11 + Math.floor(day % 7)) * 60000);\n var sector = sectors[Math.abs(Math.floor(day + i * 3)) % sectors.length];\n var brick = bricks[Math.abs(Math.floor(day * 2 + i)) % bricks.length];\n out.push({\n time: fmtTime(stamp),\n title: sector + \" business launched\",\n detail: brick + \" added\"\n });\n }\n return out;\n}\n\nfunction computeState() {\n var now = new Date();\n var day = modelDay(now);\n var weekDay = Math.max(1, day - 7);\n var monthDay = Math.max(1, day - 30);\n\n var arr = arrAt(day);\n var companies = companiesAt(day);\n var bricks = bricksAt(day);\n var workflows = workflowsAt(day);\n var messages = messagesAt(day);\n var emails = emailsAt(day);\n var chart = makeChart(day, arr);\n var weekArr = arr - arrAt(weekDay);\n var score = 74 + Math.round(Math.sin(day / 4) * 4 + pct(arr, arrAt(weekDay)).replace(\"%\", \"\").replace(\"+\", \"\") * 0.4);\n\n return {\n updatedLabel: fmtDate(now),\n liveLabel: \"Live \" + fmtTime(now),\n arr: fmtMoney(arr),\n arrWow: pct(arr, arrAt(weekDay)),\n arrMom: pct(arr, arrAt(monthDay)),\n companies: fmtInt(companies),\n companiesWow: pct(companies, companiesAt(weekDay)),\n bricks: fmtInt(bricks),\n bricksWow: pct(bricks, bricksAt(weekDay)),\n workflows: fmtInt(workflows),\n workflowsWow: pct(workflows, workflowsAt(weekDay)),\n messages: fmtInt(messages),\n messagesWow: pct(messages, messagesAt(weekDay)),\n emails: fmtInt(emails),\n emailsWow: pct(emails, emailsAt(weekDay)),\n newArr: fmtCompactMoney(weekArr),\n newCompanies: fmtInt(companies - companiesAt(weekDay)),\n selfHosted: Math.max(18, Math.round(24 + Math.sin(day / 9) * 4)) + \"%\",\n growthScore: String(score),\n chartPath: chart.chartPath,\n areaPath: chart.areaPath,\n dotX: chart.dotX,\n dotY: chart.dotY,\n axisSvg: chart.axisSvg,\n feed: feedFor(now, day)\n };\n}\n\ntry {\n if (window.__bricksBusinessPulseTimer) clearInterval(window.__bricksBusinessPulseTimer);\n window.__bricksBusinessPulseTimer = setInterval(function() {\n if (window.location.pathname !== \"/business\") {\n clearInterval(window.__bricksBusinessPulseTimer);\n window.__bricksBusinessPulseTimer = null;\n return;\n }\n update(computeState());\n }, 1500);\n} catch (e) {}\n\nreturn computeState();\n```\n\n```style\n.bricks-template {\n margin: var(--spacing-0);\n width: 100vw;\n max-width: none;\n}\n\n.business-live {\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n background:\n linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg) 46%, color-mix(in srgb, var(--success) 10%, var(--surface)));\n color: var(--text);\n padding: var(--spacing-4) var(--spacing-8);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n font-family: var(--font);\n}\n\n.business-topbar {\n min-height: var(--height-base);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-3);\n padding: var(--spacing-0);\n}\n\n.business-mark,\n.business-topbar a {\n color: var(--text);\n text-decoration: none;\n}\n\n.business-mark {\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-lg);\n}\n\n.marketing-mark.marketing-mark {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-2);\n color: var(--text);\n text-decoration: none !important;\n font-family: var(--font);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-extrabold) !important;\n line-height: var(--line-height-lg);\n}\n\n.marketing-mark.marketing-mark:hover,\n.marketing-mark.marketing-mark:focus,\n.marketing-mark.marketing-mark * {\n text-decoration: none !important;\n}\n\n.marketing-mark-dots {\n width: var(--font-size-xs);\n height: var(--font-size-xs);\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--spacing-1);\n flex-shrink: 0;\n}\n\n.marketing-mark-dots span {\n border-radius: var(--radius-sm);\n background: var(--accent);\n}\n\n.business-topbar nav {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--spacing-3);\n font-size: var(--font-size-sm);\n}\n\n.business-live-pill {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-2);\n padding: var(--spacing-2) var(--spacing-3);\n border-radius: var(--radius-full);\n background: var(--surface);\n color: var(--text-muted);\n border: 1px solid var(--border);\n font-size: var(--font-size-xs);\n}\n\n.business-live-pill span {\n width: var(--spacing-2);\n height: var(--spacing-2);\n border-radius: var(--radius-full);\n background: var(--success);\n animation: businessPulse 1400ms ease-in-out infinite;\n}\n\n.business-shell {\n flex: 1;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1.68fr) minmax(0, 0.82fr);\n gap: var(--spacing-2);\n}\n\n.business-main,\n.business-side {\n min-height: 0;\n display: grid;\n gap: var(--spacing-2);\n}\n\n.business-main {\n grid-template-rows: auto auto minmax(0, 1fr);\n}\n\n.business-side {\n grid-template-rows: auto minmax(0, 1fr) auto;\n}\n\n.business-hero-panel,\n.business-metric,\n.business-chart-panel,\n.business-side-card {\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n background: color-mix(in srgb, var(--surface) 93%, transparent);\n box-shadow: var(--shadow-sm);\n}\n\n.business-hero-panel {\n min-height: var(--height-xl);\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--spacing-3);\n align-items: end;\n padding: var(--spacing-4);\n}\n\n.business-kicker {\n margin: var(--spacing-0);\n color: var(--accent);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n letter-spacing: var(--letter-spacing-wide);\n text-transform: uppercase;\n}\n\n.business-hero-panel h1 {\n margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-2xl);\n letter-spacing: var(--letter-spacing-normal);\n}\n\n.business-hero-number {\n text-align: right;\n}\n\n.business-hero-number span,\n.business-hero-number em,\n.business-metric span,\n.business-metric em,\n.business-week-grid span,\n.business-feed em,\n.business-flywheel-row span,\n.business-panel-head p {\n color: var(--text-muted);\n font-style: normal;\n font-size: var(--font-size-xs);\n}\n\n.business-hero-number strong {\n display: block;\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-2xl);\n letter-spacing: var(--letter-spacing-normal);\n}\n\n.business-metric-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--spacing-2);\n}\n\n.business-metric {\n min-height: var(--height-xl);\n padding: var(--spacing-3);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.business-metric strong {\n font-size: var(--font-size-xl);\n line-height: var(--line-height-xl);\n}\n\n.business-chart-panel,\n.business-side-card {\n min-height: 0;\n padding: var(--spacing-3);\n}\n\n.business-chart-panel {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n gap: var(--spacing-2);\n}\n\n.business-panel-head {\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: var(--spacing-3);\n}\n\n.business-panel-head h2 {\n margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n}\n\n.business-chart {\n width: 100%;\n height: 100%;\n min-height: 0;\n color: var(--text);\n overflow: visible;\n}\n\n.business-chart-axis {\n color: var(--text-muted);\n font-size: var(--font-size-xs);\n font-family: var(--font-body);\n}\n\n.business-chart-axis text {\n fill: currentColor;\n}\n\n.business-chart-area {\n fill: url(#businessAreaFade);\n stroke: none;\n animation: businessFadeIn var(--transitions-slow) ease both;\n}\n\n.business-chart-line {\n fill: none;\n stroke: currentColor;\n stroke-width: 4;\n stroke-linecap: round;\n stroke-linejoin: round;\n animation: businessGlow 1500ms ease-in-out infinite;\n}\n\n.business-chart-dot {\n fill: var(--accent);\n stroke: var(--surface);\n stroke-width: 3;\n transform-box: fill-box;\n transform-origin: center;\n animation: businessDot 1400ms ease-in-out infinite;\n}\n\n.business-week-card {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n\n.business-week-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--spacing-2);\n}\n\n.business-week-grid div {\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n background: var(--bg);\n padding: var(--spacing-2);\n}\n\n.business-week-grid strong {\n display: block;\n margin-top: var(--spacing-1);\n font-size: var(--font-size-lg);\n line-height: var(--line-height-lg);\n}\n\n.business-feed-card {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n\n.business-feed {\n list-style: none;\n padding: var(--spacing-0);\n margin: var(--spacing-0);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n min-height: 0;\n}\n\n.business-feed li {\n border-left: 1px solid var(--accent);\n padding: var(--spacing-2);\n background: var(--bg);\n border-radius: var(--radius-sm);\n animation: businessSlideUp var(--transitions-slow) ease both;\n}\n\n.business-feed li:nth-child(n+4) {\n display: none;\n}\n\n.business-feed span,\n.business-feed strong,\n.business-feed em {\n display: block;\n}\n\n.business-feed strong {\n font-size: var(--font-size-xs);\n margin: var(--spacing-1) var(--spacing-0);\n}\n\n.business-flywheel {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n\n.business-flywheel-row {\n display: flex;\n justify-content: space-between;\n gap: var(--spacing-2);\n border-top: 1px solid var(--border);\n padding-top: var(--spacing-2);\n}\n\n@keyframes businessPulse {\n 0% { transform: scale(1); opacity: 0.65; }\n 50% { transform: scale(1.4); opacity: 1; }\n 100% { transform: scale(1); opacity: 0.65; }\n}\n\n@keyframes businessFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes businessGlow {\n 0% { opacity: 0.78; }\n 50% { opacity: 1; }\n 100% { opacity: 0.78; }\n}\n\n@keyframes businessDot {\n 0% { transform: scale(1); opacity: 0.78; }\n 50% { transform: scale(1.35); opacity: 1; }\n 100% { transform: scale(1); opacity: 0.78; }\n}\n\n@keyframes businessSlideUp {\n from { opacity: 0; transform: translateY(var(--spacing-2)); }\n to { opacity: 1; transform: translateY(var(--spacing-0)); }\n}\n\n@media (max-width: 70em) {\n .business-live {\n height: auto;\n min-height: 100vh;\n overflow: auto;\n }\n\n .business-topbar {\n flex-wrap: wrap;\n }\n\n .business-shell,\n .business-hero-panel {\n grid-template-columns: 1fr;\n }\n\n .business-main,\n .business-side {\n grid-template-rows: auto;\n }\n\n .business-hero-number {\n text-align: left;\n }\n\n .business-hero-panel h1,\n .business-hero-number strong {\n font-size: var(--font-size-2xl);\n line-height: var(--line-height-2xl);\n }\n\n .business-metric-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .business-week-grid {\n grid-template-columns: 1fr;\n }\n\n .business-chart {\n height: auto;\n min-height: var(--width-sm);\n }\n}\n\n@media (max-width: 90em) {\n .business-feed li:nth-child(n+3) {\n display: none;\n }\n}\n\n@media (max-width: 40em) {\n .business-metric-grid {\n grid-template-columns: 1fr;\n }\n}\n```\n"},{"title":"Callouts","route":"/developer-tools/callouts","pageLayout":null,"contentHtml":"

Callouts

\n

Use callout fenced blocks to render styled info/warning/danger/success boxes inline in any page. The type: line sets the variant; title: is optional. Content supports full markdown.

\n

Info

\n
โ„น
Did you know?

Bricks renders callouts as pure HTML with no JavaScript. All styling uses CSS custom properties so they automatically adapt to your active theme.

\n
\n

Success

\n
โœ”
Deployment complete

Your app was published successfully to the production environment. All health checks passed.

\n
\n

Warning

\n
โš 
Breaking change in v2

The data: frontmatter key now expects a model name, not a file path. Update your pages before upgrading.

\n
\n

Danger

\n
โœ–
Irreversible action

Deleting a tenant removes all associated data permanently. This cannot be undone.

\n
\n

No title

\n

Callouts without a title: line render with just the icon and body text.

\n
โ„น

This is a compact callout with no title โ€” just body content.

\n
\n

Syntax

\n

Each callout block supports three optional directives at the top:

\n

| Key | Values | Default |\n|-----|--------|---------|\n| type | info | warning | danger | success | info |\n| title | Any text | (none) |

\n

Everything after the directives is the callout body and supports standard markdown.

\n","searchText":"Callouts Use fenced blocks to render styled info/warning/danger/success boxes inline in any page. The line sets the variant; is optional. Content supports full markdown. Info Success Warning Danger No title Callouts without a line render with just the icon and body text. Syntax Each callout block supports three optional directives at the top: | Key | Values | Default | |-----|--------|---------| | | \\| \\| \\| | | | | Any text | (none) | Everything after the directives is the callout body and supports standard markdown.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[{"type":"info","title":"Did you know?","content":"

Bricks renders callouts as pure HTML with no JavaScript. All styling uses CSS custom properties so they automatically adapt to your active theme.

\n"},{"type":"success","title":"Deployment complete","content":"

Your app was published successfully to the production environment. All health checks passed.

\n"},{"type":"warning","title":"Breaking change in v2","content":"

The data: frontmatter key now expects a model name, not a file path. Update your pages before upgrading.

\n"},{"type":"danger","title":"Irreversible action","content":"

Deleting a tenant removes all associated data permanently. This cannot be undone.

\n"},{"type":"info","title":"","content":"

This is a compact callout with no title โ€” just body content.

\n"}],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Callouts\nroute: /developer-tools/callouts\n---\n\n# Callouts\n\nUse `callout` fenced blocks to render styled info/warning/danger/success boxes inline in any page. The `type:` line sets the variant; `title:` is optional. Content supports full markdown.\n\n## Info\n\n```callout\ntype: info\ntitle: Did you know?\nBricks renders callouts as pure HTML with no JavaScript. All styling uses CSS custom properties so they automatically adapt to your active theme.\n```\n\n## Success\n\n```callout\ntype: success\ntitle: Deployment complete\nYour app was published successfully to the production environment. All health checks passed.\n```\n\n## Warning\n\n```callout\ntype: warning\ntitle: Breaking change in v2\nThe `data:` frontmatter key now expects a model name, not a file path. Update your pages before upgrading.\n```\n\n## Danger\n\n```callout\ntype: danger\ntitle: Irreversible action\nDeleting a tenant removes **all associated data** permanently. This cannot be undone.\n```\n\n## No title\n\nCallouts without a `title:` line render with just the icon and body text.\n\n```callout\ntype: info\nThis is a compact callout with no title โ€” just body content.\n```\n\n## Syntax\n\nEach callout block supports three optional directives at the top:\n\n| Key | Values | Default |\n|-----|--------|---------|\n| `type` | `info` \\| `warning` \\| `danger` \\| `success` | `info` |\n| `title` | Any text | *(none)* |\n\nEverything after the directives is the callout body and supports standard markdown.\n"},{"title":"Charts","route":"/developer-tools/charts","pageLayout":null,"contentHtml":"

Charts

\n

Render data as inline SVG charts directly from markdown. Three chart types supported: bar, line, and pie. All charts are theme-aware โ€” colors update when you switch themes.

\n

Syntax

\n

Use a fenced code block with the chart language tag. Keys are:

\n

| Key | Required | Values |\n|---|---|---|\n| type | no | bar, line, pie (default: bar) |\n| title | no | any string |\n| labels | yes | JSON array of strings |\n| values | yes | JSON array of numbers |

\n

Bar Chart

\n

Tracks weekly sprint velocity across four weeks.

\n

Sprint Velocity

\n \n 0\n\n 13\n\n 25\n\n 38\n\n 50\n \nWeek 1\n\nWeek 2\n\nWeek 3\n\nWeek 4\n \n \n
\n

Line Chart

\n

Monthly revenue trend over six months.

\n

Monthly Revenue

\n \n 0\n\n 13\n\n 25\n\n 38\n\n 50\n \n \n \n\n\n\n\n\n \n Jan\nFeb\nMar\nApr\nMay\nJun\n \n
\n

Pie Chart

\n

Task distribution across workflow states.

\n

Task Distribution

\n \n\n\n\n \n \n Todo (8)\n\n In Progress (5)\n\n Review (3)\n\n Done (14)\n
\n

Usage Notes

\n\n","searchText":"Charts Render data as inline SVG charts directly from markdown. Three chart types supported: bar, line, and pie. All charts are theme-aware โ€” colors update when you switch themes. Syntax Use a fenced code block with the language tag. Keys are: | Key | Required | Values | |---|---|---| | | no | , , (default: ) | | | no | any string | | | yes | JSON array of strings | | | yes | JSON array of numbers | Bar Chart Tracks weekly sprint velocity across four weeks. Line Chart Monthly revenue trend over six months. Pie Chart Task distribution across workflow states. Usage Notes โ€” , , or (default: ) โ€” optional chart heading shown above the SVG โ€” JSON array of string labels (one per data point) โ€” JSON array of numbers (must match labels length) Charts inherit accent, border, and surface tokens from the active theme","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[{"type":"bar","title":"Sprint Velocity","labels":["Week 1","Week 2","Week 3","Week 4"],"values":[23,31,18,42]},{"type":"line","title":"Monthly Revenue","labels":["Jan","Feb","Mar","Apr","May","Jun"],"values":[12,19,9,25,22,31]},{"type":"pie","title":"Task Distribution","labels":["Todo","In Progress","Review","Done"],"values":[8,5,3,14]}],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Charts\nroute: /developer-tools/charts\n---\n\n# Charts\n\nRender data as inline SVG charts directly from markdown. Three chart types supported: bar, line, and pie. All charts are theme-aware โ€” colors update when you switch themes.\n\n## Syntax\n\nUse a fenced code block with the `chart` language tag. Keys are:\n\n| Key | Required | Values |\n|---|---|---|\n| `type` | no | `bar`, `line`, `pie` (default: `bar`) |\n| `title` | no | any string |\n| `labels` | yes | JSON array of strings |\n| `values` | yes | JSON array of numbers |\n\n## Bar Chart\n\nTracks weekly sprint velocity across four weeks.\n\n```chart\ntype: bar\ntitle: Sprint Velocity\nlabels: [\"Week 1\", \"Week 2\", \"Week 3\", \"Week 4\"]\nvalues: [23, 31, 18, 42]\n```\n\n## Line Chart\n\nMonthly revenue trend over six months.\n\n```chart\ntype: line\ntitle: Monthly Revenue\nlabels: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nvalues: [12, 19, 9, 25, 22, 31]\n```\n\n## Pie Chart\n\nTask distribution across workflow states.\n\n```chart\ntype: pie\ntitle: Task Distribution\nlabels: [\"Todo\", \"In Progress\", \"Review\", \"Done\"]\nvalues: [8, 5, 3, 14]\n```\n\n## Usage Notes\n\n- `type` โ€” `bar`, `line`, or `pie` (default: `bar`)\n- `title` โ€” optional chart heading shown above the SVG\n- `labels` โ€” JSON array of string labels (one per data point)\n- `values` โ€” JSON array of numbers (must match labels length)\n- Charts inherit accent, border, and surface tokens from the active theme\n- Responsive: width scales to container, coordinate system is fixed via `viewBox`\n"},{"title":"Color Studio","route":"/color-studio","pageLayout":"design-studio","contentHtml":"

Color Studio

\n

Theme the app โ€” adjust colors, typography, and layout tokens in real time.

\n","searchText":"Color Studio Theme the app โ€” adjust colors, typography, and layout tokens in real time.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Color Studio\nroute: /color-studio\nlayout: design-studio\n---\n\n# Color Studio\n\nTheme the app โ€” adjust colors, typography, and layout tokens in real time.\n"},{"title":"Components","route":"/developer-tools/components","pageLayout":null,"contentHtml":"

Component Gallery

\n

Reusable components defined in components/*.md and embedded with @include.

\n

Alert

\n\n\n\n\n

Badge

\n

Badges can be embedded inline alongside text โ€” try: or or .

\n

Form

\n

A self-contained contact form. Submit triggers HTML5 validation, collects all fields, and sets submitted: true.

\n\n","searchText":"Component Gallery Reusable components defined in and embedded with . Alert @include(alert title=\"Info alert\" message=\"This is an informational message.\" type=\"info\") @include(alert title=\"Success!\" message=\"Your changes have been saved.\" type=\"success\") @include(alert title=\"Warning\" message=\"This action cannot be undone.\" type=\"warning\") @include(alert title=\"Error\" message=\"Something went wrong. Please try again.\" type=\"danger\") Badge Badges can be embedded inline alongside text โ€” try: @include(badge label=\"New\" variant=\"accent\") or @include(badge label=\"Stable\" variant=\"success\") or @include(badge label=\"Deprecated\" variant=\"danger\"). Form A self-contained contact form. Submit triggers HTML5 validation, collects all fields, and sets . @include(form)","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Components\nroute: /developer-tools/components\n---\n\n# Component Gallery\n\nReusable components defined in `components/*.md` and embedded with `@include`.\n\n## Alert\n\n@include(alert title=\"Info alert\" message=\"This is an informational message.\" type=\"info\")\n\n@include(alert title=\"Success!\" message=\"Your changes have been saved.\" type=\"success\")\n\n@include(alert title=\"Warning\" message=\"This action cannot be undone.\" type=\"warning\")\n\n@include(alert title=\"Error\" message=\"Something went wrong. Please try again.\" type=\"danger\")\n\n## Badge\n\nBadges can be embedded inline alongside text โ€” try: @include(badge label=\"New\" variant=\"accent\") or @include(badge label=\"Stable\" variant=\"success\") or @include(badge label=\"Deprecated\" variant=\"danger\").\n\n## Form\n\nA self-contained contact form. Submit triggers HTML5 validation, collects all fields, and sets `submitted: true`.\n\n@include(form)\n"},{"title":"Conditional Rendering","route":"/developer-tools/conditional","pageLayout":null,"contentHtml":"

Conditional Rendering

\n

Show or hide elements using if=\"expression\" on any HTML element.\nThe element is hidden when the condition is false, shown when true.

\n

Supported expressions:

\n\n","searchText":"Conditional Rendering Show or hide elements using on any HTML element. The element is hidden when the condition is false, shown when true. Supported expressions: โ€” show if state key is truthy โ€” show if state key is falsy โ€” show if equal โ€” show if not equal โ€” show if greater than โ€” show if less than","state":{"show":false,"count":0,"role":"guest"},"template":{"html":"
\n\n
\n

Toggle (if / if !)

\n \n
\n Panel is visible! if=\"show\"\n
\n

\n Panel is hidden. Click Toggle to reveal it. if=\"!show\"\n

\n
\n\n
\n

Comparison โ€” count: {count}

\n
\n \n \n
\n

Count is zero. if=\"count == 0\"

\n

0\">Count is positive ({count}). if=\"count > 0\"

\n
4\">\n Count exceeded 4! if=\"count > 4\"\n
\n
\n\n
\n

Role-based โ€” role: {role}

\n
\n \n \n
\n
\n Admin panel visible. if=\"role == admin\"\n
\n

\n Viewing as guest. Switch to Admin to reveal the admin panel. if=\"role != admin\"\n

\n
\n\n
"},"actions":[],"styles":".cond-demo {\n max-width: var(--width-3xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n}\n.cond-section {\n padding: var(--spacing-5);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n background: var(--surface);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-3);\n}\n.cond-heading {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n}\n.cond-row {\n display: flex;\n gap: var(--spacing-2);\n}\n.cond-panel {\n padding: var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--accent);\n color: var(--accent-text);\n font-size: var(--font-size-sm);\n}\n.cond-admin {\n padding: var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--warning);\n color: var(--text-inverse);\n font-size: var(--font-size-sm);\n}\n.cond-badge {\n padding: var(--spacing-2) var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--danger);\n color: var(--accent-text);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n align-self: flex-start;\n}\n.cond-hint {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n}\n.cond-btn {\n padding: var(--spacing-2) var(--spacing-4);\n border-radius: var(--radius-default);\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n font-size: var(--font-size-sm);\n cursor: pointer;\n}\n.cond-btn--ghost {\n background: var(--surface);\n color: var(--text);\n border-color: var(--border);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Conditional Rendering\nroute: /developer-tools/conditional\n---\n\n# Conditional Rendering\n\nShow or hide elements using `if=\"expression\"` on any HTML element.\nThe element is hidden when the condition is false, shown when true.\n\nSupported expressions:\n\n- `if=\"key\"` โ€” show if state key is truthy\n- `if=\"!key\"` โ€” show if state key is falsy\n- `if=\"key == value\"` โ€” show if equal\n- `if=\"key != value\"` โ€” show if not equal\n- `if=\"key > value\"` โ€” show if greater than\n- `if=\"key < value\"` โ€” show if less than\n\n```state\n{ \"show\": false, \"count\": 0, \"role\": \"guest\" }\n```\n\n```template\n
\n\n
\n

Toggle (if / if !)

\n \n
\n Panel is visible! if=\"show\"\n
\n

\n Panel is hidden. Click Toggle to reveal it. if=\"!show\"\n

\n
\n\n
\n

Comparison โ€” count: {count}

\n
\n \n \n
\n

Count is zero. if=\"count == 0\"

\n

0\">Count is positive ({count}). if=\"count > 0\"

\n
4\">\n Count exceeded 4! if=\"count > 4\"\n
\n
\n\n
\n

Role-based โ€” role: {role}

\n
\n \n \n
\n
\n Admin panel visible. if=\"role == admin\"\n
\n

\n Viewing as guest. Switch to Admin to reveal the admin panel. if=\"role != admin\"\n

\n
\n\n
\n```\n\n```style\n.cond-demo {\n max-width: var(--width-3xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n}\n.cond-section {\n padding: var(--spacing-5);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n background: var(--surface);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-3);\n}\n.cond-heading {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n}\n.cond-row {\n display: flex;\n gap: var(--spacing-2);\n}\n.cond-panel {\n padding: var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--accent);\n color: var(--accent-text);\n font-size: var(--font-size-sm);\n}\n.cond-admin {\n padding: var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--warning);\n color: var(--text-inverse);\n font-size: var(--font-size-sm);\n}\n.cond-badge {\n padding: var(--spacing-2) var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--danger);\n color: var(--accent-text);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n align-self: flex-start;\n}\n.cond-hint {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n}\n.cond-btn {\n padding: var(--spacing-2) var(--spacing-4);\n border-radius: var(--radius-default);\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n font-size: var(--font-size-sm);\n cursor: pointer;\n}\n.cond-btn--ghost {\n background: var(--surface);\n color: var(--text);\n border-color: var(--border);\n}\n```\n"},{"title":"Counter","route":"/developer-tools/counter","pageLayout":null,"contentHtml":"

Interactive Counter

\n

State and interactivity โ€” all in markdown.

\n","searchText":"Interactive Counter State and interactivity โ€” all in markdown.","state":{"count":0},"template":{"html":"

{count}

\n
\n \n \n
"},"actions":[],"styles":"h1 { color: var(--accent); }\n.counter-display {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-extrabold);\n line-height: var(--line-height-4xl);\n margin: var(--spacing-6) var(--spacing-0);\n letter-spacing: var(--letter-spacing-tighter);\n}\n.counter-buttons {\n display: flex;\n gap: var(--spacing-2);\n flex-wrap: wrap;\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Counter\nroute: /developer-tools/counter\n---\n\n# Interactive Counter\n\nState and interactivity โ€” all in markdown.\n\n```state\n{ \"count\": 0 }\n```\n\n```template\n

{count}

\n
\n \n \n
\n```\n\n```style\nh1 { color: var(--accent); }\n.counter-display {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-extrabold);\n line-height: var(--line-height-4xl);\n margin: var(--spacing-6) var(--spacing-0);\n letter-spacing: var(--letter-spacing-tighter);\n}\n.counter-buttons {\n display: flex;\n gap: var(--spacing-2);\n flex-wrap: wrap;\n}\n```\n"},{"title":"Course Selector","route":"/developer-tools/course-selector","pageLayout":"course-selector","contentHtml":"

Course Selector

\n

Test-only School OS course catalog autocomplete backed by state reference JSONL files.

\n","searchText":"Course Selector Test-only School OS course catalog autocomplete backed by state reference JSONL files.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser","admin"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Course Selector\nroute: /developer-tools/course-selector\nlayout: course-selector\nroles: [superuser, admin]\n---\n\n# Course Selector\n\nTest-only School OS course catalog autocomplete backed by state reference JSONL files.\n"},{"title":"Customer reviews","route":"/reviews/widget","pageLayout":"fullscreen","contentHtml":"

Customer reviews

\n

Embeddable public review display for the current site's organization. The shared\nrenderer reads only published, permitted first-party reviews or an enabled,\nauthorized provider connection. Carousel motion respects reduced-motion settings.

\n","searchText":"Customer reviews Embeddable public review display for the current site's organization. The shared renderer reads only published, permitted first-party reviews or an enabled, authorized provider connection. Carousel motion respects reduced-motion settings.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Customer reviews\nroute: /reviews/widget\nlayout: fullscreen\npublic: true\n---\n\n# Customer reviews\n\nEmbeddable public review display for the current site's organization. The shared\nrenderer reads only published, permitted first-party reviews or an enabled,\nauthorized provider connection. Carousel motion respects reduced-motion settings.\n"},{"title":"Your customer review","route":"/reviews/:token","pageLayout":"fullscreen","contentHtml":"

Your customer review

\n

The shared public questionnaire renderer loads the invitation's frozen company\nbranding and questions. Opening this page never submits a rating. Private answers\nstay private; publication needs explicit permission. ?stop=1 asks for\nconfirmation before stopping review invitations.

\n","searchText":"Your customer review The shared public questionnaire renderer loads the invitation's frozen company branding and questions. Opening this page never submits a rating. Private answers stay private; publication needs explicit permission. asks for confirmation before stopping review invitations.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Your customer review\nroute: /reviews/:token\nlayout: fullscreen\npublic: true\n---\n\n# Your customer review\n\nThe shared public questionnaire renderer loads the invitation's frozen company\nbranding and questions. Opening this page never submits a rating. Private answers\nstay private; publication needs explicit permission. `?stop=1` asks for\nconfirmation before stopping review invitations.\n"},{"title":"Data Binding","route":"/developer-tools/data","pageLayout":null,"contentHtml":"

Data Binding

\n

Pages can bind to a model in data/*.md via the data: frontmatter key.\nThis page binds to data/tasks.md โ€” its initial state comes from that model.

\n

Task Counter

\n","searchText":"Data Binding Pages can bind to a model in via the frontmatter key. This page binds to โ€” its initial state comes from that model. Task Counter","state":null,"template":{"html":"
\n

{title}

\n

\n {done} of {total} tasks complete\n

\n
\n \n \n
\n
"},"actions":[],"styles":".data-demo {\n max-width: var(--width-xl);\n padding: var(--spacing-6);\n background: var(--surface);\n border-radius: var(--radius-default);\n border: 1px solid var(--border);\n}\n.data-demo__title {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--text);\n margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);\n}\n.data-demo__meta {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n margin: var(--spacing-0) var(--spacing-0) var(--spacing-4);\n}\n.data-demo__actions {\n display: flex;\n gap: var(--spacing-2);\n}\n.bricks-btn {\n padding: var(--spacing-2) var(--spacing-4);\n border-radius: var(--radius-default);\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--surface);\n font-size: var(--font-size-sm);\n cursor: pointer;\n}\n.bricks-btn--ghost {\n background: var(--surface);\n color: var(--text);\n border-color: var(--border);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Data Binding\nroute: /developer-tools/data\ndata: tasks\n---\n\n# Data Binding\n\nPages can bind to a model in `data/*.md` via the `data:` frontmatter key.\nThis page binds to `data/tasks.md` โ€” its initial state comes from that model.\n\n## Task Counter\n\n```template\n
\n

{title}

\n

\n {done} of {total} tasks complete\n

\n
\n \n \n
\n
\n```\n\n```style\n.data-demo {\n max-width: var(--width-xl);\n padding: var(--spacing-6);\n background: var(--surface);\n border-radius: var(--radius-default);\n border: 1px solid var(--border);\n}\n.data-demo__title {\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--text);\n margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);\n}\n.data-demo__meta {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n margin: var(--spacing-0) var(--spacing-0) var(--spacing-4);\n}\n.data-demo__actions {\n display: flex;\n gap: var(--spacing-2);\n}\n.bricks-btn {\n padding: var(--spacing-2) var(--spacing-4);\n border-radius: var(--radius-default);\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--surface);\n font-size: var(--font-size-sm);\n cursor: pointer;\n}\n.bricks-btn--ghost {\n background: var(--surface);\n color: var(--text);\n border-color: var(--border);\n}\n```\n"},{"title":"Database","route":"/developer-tools/db","pageLayout":null,"contentHtml":"

Database

\n

Bricks persists page state across navigation using the browser's built-in storage. Add persist: true to any page's frontmatter โ€” Bricks saves and restores state automatically.

\n

Persistent Counter

\n

This counter remembers its value across page navigation. Navigate away and come back โ€” it will still be here.

\n","searchText":"Database Bricks persists page state across navigation using the browser's built-in storage. Add to any page's frontmatter โ€” Bricks saves and restores state automatically. Persistent Counter This counter remembers its value across page navigation. Navigate away and come back โ€” it will still be here.","state":{"count":0,"notes":[],"noteText":""},"template":{"html":"
\n\n
\n
Persistent Counter
\n
{count}
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
Navigate away and return โ€” count is preserved.
\n
\n\n
\n
Persistent Notes
\n
\n \n \n
\n \n
No notes yet. Add one above.
\n
\n \n
\n
\n\n
"},"actions":[{"name":"increment","code":"return { count: (state.count || 0) + 1 };"},{"name":"decrement","code":"return { count: Math.max(0, (state.count || 0) - 1) };"},{"name":"resetCounter","code":"return { count: 0 };"},{"name":"addNote","code":"var text = (state.noteText || \"\").trim();\nif (!text) return state;\nvar notes = Array.isArray(state.notes) ? state.notes.slice() : [];\nnotes.push(text);\nreturn { notes: notes, noteText: \"\" };"},{"name":"clearNotes","code":"return { notes: [] };"}],"styles":".db-demo {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n max-width: var(--width-lg);\n}\n\n.db-counter-card,\n.db-notes-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n padding: var(--spacing-6);\n}\n\n.db-counter-label,\n.db-notes-label {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n margin-bottom: var(--spacing-4);\n}\n\n.db-counter-value {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n color: var(--text);\n text-align: center;\n padding: var(--spacing-4) 0;\n}\n\n.db-counter-actions {\n display: flex;\n gap: var(--spacing-3);\n justify-content: center;\n margin-bottom: var(--spacing-3);\n}\n\n.db-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--height-base);\n padding: 0 var(--spacing-4);\n background: var(--accent);\n color: var(--accent-text);\n border: none;\n border-radius: var(--radius-default);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n cursor: pointer;\n font-family: var(--font);\n}\n\n.db-btn:hover {\n opacity: 0.9;\n}\n\n.db-btn--ghost {\n background: var(--surface-hover);\n color: var(--text);\n border: 1px solid var(--border);\n}\n\n.db-btn--danger {\n background: var(--danger);\n color: var(--accent-text);\n}\n\n.db-hint {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n text-align: center;\n margin-top: var(--spacing-2);\n}\n\n.db-notes-form {\n display: flex;\n gap: var(--spacing-3);\n margin-bottom: var(--spacing-4);\n}\n\n.db-notes-input {\n flex: 1;\n height: var(--height-base);\n padding: 0 var(--spacing-3);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n color: var(--text);\n font-size: var(--font-size-sm);\n font-family: var(--font);\n}\n\n.db-notes-input:focus {\n outline: none;\n border-color: var(--accent);\n}\n\n.db-notes-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n margin-bottom: var(--spacing-3);\n}\n\n.db-notes-item {\n padding: var(--spacing-3) var(--spacing-4);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n font-size: var(--font-size-sm);\n color: var(--text);\n}","formValidation":null,"apis":[],"roles":null,"persist":true,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Database\nroute: /developer-tools/db\npersist: true\n---\n\n# Database\n\nBricks persists page state across navigation using the browser's built-in storage. Add `persist: true` to any page's frontmatter โ€” Bricks saves and restores state automatically.\n\n## Persistent Counter\n\nThis counter remembers its value across page navigation. Navigate away and come back โ€” it will still be here.\n\n```state\n{ \"count\": 0, \"notes\": [], \"noteText\": \"\" }\n```\n\n```template\n
\n\n
\n
Persistent Counter
\n
{count}
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
Navigate away and return โ€” count is preserved.
\n
\n\n
\n
Persistent Notes
\n
\n \n \n
\n \n
No notes yet. Add one above.
\n
\n \n
\n
\n\n
\n```\n\n```action:increment\nreturn { count: (state.count || 0) + 1 };\n```\n\n```action:decrement\nreturn { count: Math.max(0, (state.count || 0) - 1) };\n```\n\n```action:resetCounter\nreturn { count: 0 };\n```\n\n```action:addNote\nvar text = (state.noteText || \"\").trim();\nif (!text) return state;\nvar notes = Array.isArray(state.notes) ? state.notes.slice() : [];\nnotes.push(text);\nreturn { notes: notes, noteText: \"\" };\n```\n\n```action:clearNotes\nreturn { notes: [] };\n```\n\n```style\n.db-demo {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n max-width: var(--width-lg);\n}\n\n.db-counter-card,\n.db-notes-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n padding: var(--spacing-6);\n}\n\n.db-counter-label,\n.db-notes-label {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n margin-bottom: var(--spacing-4);\n}\n\n.db-counter-value {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-bold);\n color: var(--text);\n text-align: center;\n padding: var(--spacing-4) 0;\n}\n\n.db-counter-actions {\n display: flex;\n gap: var(--spacing-3);\n justify-content: center;\n margin-bottom: var(--spacing-3);\n}\n\n.db-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--height-base);\n padding: 0 var(--spacing-4);\n background: var(--accent);\n color: var(--accent-text);\n border: none;\n border-radius: var(--radius-default);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n cursor: pointer;\n font-family: var(--font);\n}\n\n.db-btn:hover {\n opacity: 0.9;\n}\n\n.db-btn--ghost {\n background: var(--surface-hover);\n color: var(--text);\n border: 1px solid var(--border);\n}\n\n.db-btn--danger {\n background: var(--danger);\n color: var(--accent-text);\n}\n\n.db-hint {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n text-align: center;\n margin-top: var(--spacing-2);\n}\n\n.db-notes-form {\n display: flex;\n gap: var(--spacing-3);\n margin-bottom: var(--spacing-4);\n}\n\n.db-notes-input {\n flex: 1;\n height: var(--height-base);\n padding: 0 var(--spacing-3);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n color: var(--text);\n font-size: var(--font-size-sm);\n font-family: var(--font);\n}\n\n.db-notes-input:focus {\n outline: none;\n border-color: var(--accent);\n}\n\n.db-notes-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n margin-bottom: var(--spacing-3);\n}\n\n.db-notes-item {\n padding: var(--spacing-3) var(--spacing-4);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n font-size: var(--font-size-sm);\n color: var(--text);\n}\n```\n"},{"title":"Decision Plane","route":"/developer-tools/decision-plane","pageLayout":"decision-plane","contentHtml":"

Decision Plane

\n

Inspect the capability contracts exposed by every loaded Brick and the Rust or client implementation registered for each one.

\n","searchText":"Decision Plane Inspect the capability contracts exposed by every loaded Brick and the Rust or client implementation registered for each one.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Decision Plane\nroute: /developer-tools/decision-plane\nlayout: decision-plane\nroles: [superuser]\n---\n\n# Decision Plane\n\nInspect the capability contracts exposed by every loaded Brick and the Rust or client implementation registered for each one.\n"},{"title":"Deploy","route":"/developer-tools/deploy","pageLayout":null,"contentHtml":"

Deploy

\n

Ship your Bricks app to Vercel, Netlify, or Cloudflare Pages with one command.

\n

Quick Start

\n

Type /deploy in the OmniBar. Bricks will:

\n
    \n
  1. Build the static site to dist/ if not already built
    2. \n
  2. Detect which deploy CLI you have installed
    3. \n
  3. Push to the first available platform
    4. \n
\n

Supported Platforms

\n

| Platform | CLI | Install |\n|----------|-----|---------|\n| Vercel | vercel | npm i -g vercel |\n| Netlify | netlify | npm i -g netlify-cli |\n| Cloudflare Pages | wrangler | npm i -g wrangler |

\n

Bricks checks for each CLI in the order above and deploys to the first one found.

\n

Setup

\n

Vercel

\n
npm i -g vercel\nvercel login\n
\n

Then type /deploy โ€” Vercel auto-detects static sites.

\n

Netlify

\n
npm i -g netlify-cli\nnetlify login\nnetlify init\n
\n

Then type /deploy โ€” Netlify deploys the dist/ directory.

\n

Cloudflare Pages

\n
npm i -g wrangler\nwrangler login\nwrangler pages project create my-bricks-app\n
\n

Then type /deploy โ€” Wrangler pushes dist/ to your Pages project.

\n

Manual Deploy

\n

You can also run the deploy engine directly from the terminal:

\n
npx tsx engine/deploy.ts\n
\n

Or build first, then use any static hosting service:

\n
npm run build\nnpx serve dist\n
\n

Build Output

\n

npm run build produces a dist/ directory with:

\n

| File | Description |\n|------|-------------|\n| index.html | App shell with embedded app tree |\n| assets/ | Bundled JS, CSS, icons |\n| manifest.json | PWA manifest (if pwa.md exists) |\n| sw.js | Service worker for offline support |

\n

The output is a fully static single-page app โ€” host it anywhere.

\n","searchText":"Deploy Ship your Bricks app to Vercel, Netlify, or Cloudflare Pages with one command. Quick Start Type in the OmniBar. Bricks will: Build the static site to if not already built Detect which deploy CLI you have installed Push to the first available platform Supported Platforms | Platform | CLI | Install | |----------|-----|---------| | Vercel | | | | Netlify | | | | Cloudflare Pages | | | Bricks checks for each CLI in the order above and deploys to the first one found. Setup Vercel Then type โ€” Vercel auto-detects static sites. Netlify Then type โ€” Netlify deploys the directory. Cloudflare Pages Then type โ€” Wrangler pushes to your Pages project. Manual Deploy You can also run the deploy engine directly from the terminal: Or build first, then use any static hosting service: Build Output produces a directory with: | File | Description | |------|-------------| | | App shell with embedded app tree | | | Bundled JS, CSS, icons | | | PWA manifest (if exists) | | | Service worker for offline support | The output is a fully static single-page app โ€” host it anywhere.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Deploy\nroute: /developer-tools/deploy\n---\n\n# Deploy\n\nShip your Bricks app to Vercel, Netlify, or Cloudflare Pages with one command.\n\n## Quick Start\n\nType `/deploy` in the OmniBar. Bricks will:\n\n1. Build the static site to `dist/` if not already built\n2. Detect which deploy CLI you have installed\n3. Push to the first available platform\n\n## Supported Platforms\n\n| Platform | CLI | Install |\n|----------|-----|---------|\n| Vercel | `vercel` | `npm i -g vercel` |\n| Netlify | `netlify` | `npm i -g netlify-cli` |\n| Cloudflare Pages | `wrangler` | `npm i -g wrangler` |\n\nBricks checks for each CLI in the order above and deploys to the first one found.\n\n## Setup\n\n### Vercel\n\n```\nnpm i -g vercel\nvercel login\n```\n\nThen type `/deploy` โ€” Vercel auto-detects static sites.\n\n### Netlify\n\n```\nnpm i -g netlify-cli\nnetlify login\nnetlify init\n```\n\nThen type `/deploy` โ€” Netlify deploys the `dist/` directory.\n\n### Cloudflare Pages\n\n```\nnpm i -g wrangler\nwrangler login\nwrangler pages project create my-bricks-app\n```\n\nThen type `/deploy` โ€” Wrangler pushes `dist/` to your Pages project.\n\n## Manual Deploy\n\nYou can also run the deploy engine directly from the terminal:\n\n```\nnpx tsx engine/deploy.ts\n```\n\nOr build first, then use any static hosting service:\n\n```\nnpm run build\nnpx serve dist\n```\n\n## Build Output\n\n`npm run build` produces a `dist/` directory with:\n\n| File | Description |\n|------|-------------|\n| `index.html` | App shell with embedded app tree |\n| `assets/` | Bundled JS, CSS, icons |\n| `manifest.json` | PWA manifest (if `pwa.md` exists) |\n| `sw.js` | Service worker for offline support |\n\nThe output is a fully static single-page app โ€” host it anywhere.\n"},{"title":"Design Studio","route":"/developer-tools/design-radials","pageLayout":"design-studio","contentHtml":"

Design Studio

\n

Browse radial presets and fine-tune in the right panel.

\n","searchText":"Design Studio Browse radial presets and fine-tune in the right panel.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Design Studio\nroute: /developer-tools/design-radials\nlayout: design-studio\n---\n\n# Design Studio\n\nBrowse radial presets and fine-tune in the right panel.\n"},{"title":"Markdown Editor","route":"/developer-tools/editor","pageLayout":"editor","contentHtml":"

Markdown Editor

\n

Visual editor for all markdown files in the project.

\n","searchText":"Markdown Editor Visual editor for all markdown files in the project.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Markdown Editor\nroute: /developer-tools/editor\nlayout: editor\n---\n\n# Markdown Editor\n\nVisual editor for all markdown files in the project.\n"},{"title":"Endorsement Picker","route":"/developer-tools/endorsement","pageLayout":"endorsement-picker","contentHtml":"

Endorsement Picker

\n

Test-only School OS endorsement autocomplete backed by state reference CSV files.

\n","searchText":"Endorsement Picker Test-only School OS endorsement autocomplete backed by state reference CSV files.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser","admin"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Endorsement Picker\nroute: /developer-tools/endorsement\nlayout: endorsement-picker\nroles: [superuser, admin]\n---\n\n# Endorsement Picker\n\nTest-only School OS endorsement autocomplete backed by state reference CSV files.\n"},{"title":"Failing integration","route":"/developer-tools/failing-integration","pageLayout":null,"contentHtml":"

Failing integration

\n

Use this page to test the realtime Page Flow overlay. Both buttons intentionally call missing API routes, so Waterflow should mark them red.

\n","searchText":"Failing integration Use this page to test the realtime Page Flow overlay. Both buttons intentionally call missing API routes, so Waterflow should mark them red.","state":{"readStatus":"Not run","writeStatus":"Not run"},"template":{"html":"
\n
\n
\n

Missing read route

\n

This button calls an API endpoint that should not exist.

\n
\n \n Test missing read API\n \n {readStatus}\n
\n\n
\n
\n

Missing write route

\n

This button calls a missing POST endpoint with a small JSON payload.

\n
\n \n Test missing write API\n \n {writeStatus}\n
\n
"},"actions":[{"name":"missingRead","code":"update({ readStatus: \"Calling missing GET...\" });\nvar res = await fetch(\"/api/dev/failing-integration/read\", {\n method: \"GET\",\n credentials: \"include\"\n});\nreturn {\n ...state,\n readStatus: \"HTTP \" + res.status\n};"},{"name":"missingWrite","code":"update({ writeStatus: \"Calling missing POST...\" });\nvar res = await fetch(\"/api/dev/failing-integration/write\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ expected: \"failure\" })\n});\nreturn {\n ...state,\n writeStatus: \"HTTP \" + res.status\n};"}],"styles":".failing-integration-demo {\n max-width: var(--width-xl);\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--width-sm), 1fr));\n gap: var(--spacing-4);\n}\n\n.failing-integration-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n padding: var(--spacing-5);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--spacing-4);\n}\n\n.failing-integration-card h2 {\n margin: var(--spacing-0);\n font-size: var(--font-size-lg);\n line-height: var(--line-height-lg);\n}\n\n.failing-integration-card p {\n margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);\n color: var(--text-muted);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Failing integration\nroute: /developer-tools/failing-integration\n---\n\n# Failing integration\n\nUse this page to test the realtime Page Flow overlay. Both buttons intentionally call missing API routes, so Waterflow should mark them red.\n\n```state\n{ \"readStatus\": \"Not run\", \"writeStatus\": \"Not run\" }\n```\n\n```template\n
\n
\n
\n

Missing read route

\n

This button calls an API endpoint that should not exist.

\n
\n \n Test missing read API\n \n {readStatus}\n
\n\n
\n
\n

Missing write route

\n

This button calls a missing POST endpoint with a small JSON payload.

\n
\n \n Test missing write API\n \n {writeStatus}\n
\n
\n```\n\n```action:missingRead\nupdate({ readStatus: \"Calling missing GET...\" });\nvar res = await fetch(\"/api/dev/failing-integration/read\", {\n method: \"GET\",\n credentials: \"include\"\n});\nreturn {\n ...state,\n readStatus: \"HTTP \" + res.status\n};\n```\n\n```action:missingWrite\nupdate({ writeStatus: \"Calling missing POST...\" });\nvar res = await fetch(\"/api/dev/failing-integration/write\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ expected: \"failure\" })\n});\nreturn {\n ...state,\n writeStatus: \"HTTP \" + res.status\n};\n```\n\n```style\n.failing-integration-demo {\n max-width: var(--width-xl);\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--width-sm), 1fr));\n gap: var(--spacing-4);\n}\n\n.failing-integration-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n padding: var(--spacing-5);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--spacing-4);\n}\n\n.failing-integration-card h2 {\n margin: var(--spacing-0);\n font-size: var(--font-size-lg);\n line-height: var(--line-height-lg);\n}\n\n.failing-integration-card p {\n margin: var(--spacing-1) var(--spacing-0) var(--spacing-0);\n color: var(--text-muted);\n}\n```\n"},{"title":"Verify your details","route":"/workshop/first-login-verify","pageLayout":null,"contentHtml":"","searchText":"","state":{"me":{},"firstName":"","schoolName":"your school","initials":"","headshotSrc":"","headshotFile":null,"email":"","phone":"","mobile":"","contactsConfirmed":false,"saving":false,"verifyLabel":"Verify","error":""},"template":{"html":"
\n
\n

Welcome to {schoolName}, {firstName} ๐Ÿ‘‹

\n

This is your first sign-in. Take a minute to confirm how the school can reach you.

\n
\n\n
\n !\n
\n
Please verify your contact details
\n
These are the details the school has on file. Correct anything that's wrong, add an optional phone number or headshot, then select Verify to finish setting up your account.
\n
\n
\n\n \n\n
\n
\n
\n Headshot\n โ— Optional\n
\n
\n \"Selected\n {initials}\n
\n Add a photo of yourself\n

Shown next to your name in messages and at pickup. WebP, PNG, JPG, or JPEG; square works best.

\n \n
\n
\n
\n\n
\n
\n Contact details on file\n All fields can be changed\n
\n\n
\n
\n \n โ— Not verified\n
\n \n We'll use this address when the school needs to contact you. This is also the address you sign in with.\n
\n\n
\n
\n
\n \n โ— Not verified\n
\n \n Home or work landline (optional).\n
\n
\n
\n \n โ— Not verified\n
\n \n Used for urgent texts like closures and absences (optional).\n
\n
\n\n \n\n
{error}
\n\n
\n Changes are saved when you verify.\n \n
\n
\n
\n
"},"actions":[{"name":"init","code":"try {\n const res = await fetch(\"/api/auth/me\", { credentials: \"include\" });\n if (!res.ok) return state;\n const me = await res.json();\n const roles = Array.isArray(me.roles) ? me.roles : [];\n if (!roles.includes(\"parent-guardian\")) {\n window.location.href = \"/403\";\n return state;\n }\n if (me.guardian_profile_verification_required !== true) {\n window.location.href = \"/workshop/school-os/family/gradebook\";\n return state;\n }\n const name = String(me.name || \"Guardian\").trim();\n const initials = name.split(/\\s+/).filter(Boolean).slice(0, 2).map(function(part) {\n return part.charAt(0).toUpperCase();\n }).join(\"\") || \"GU\";\n return Object.assign({}, state, {\n me,\n firstName: name.split(/\\s+/)[0] || \"there\",\n schoolName: String(me.tenant_name || \"your school\"),\n initials,\n headshotSrc: String(me.avatar_url || \"\"),\n email: String(me.email || \"\"),\n phone: String(me.phone || \"\"),\n mobile: String(me.mobile || \"\"),\n error: \"\"\n });\n} catch {\n return Object.assign({}, state, { error: \"We couldn't load your details. Refresh the page and try again.\" });\n}"},{"name":"verifyDetails","code":"event.preventDefault();\nif (state.saving) return state;\nif (!state.contactsConfirmed) {\n const next = Object.assign({}, state, { error: \"Please confirm that the contact details are correct.\" });\n update(next);\n return next;\n}\n\nconst form = event.target;\nconst input = form.querySelector('input[name=\"headshot\"]');\nconst file = state.headshotFile || (input && input.files ? input.files[0] : null);\nconst savingState = Object.assign({}, state, { saving: true, verifyLabel: \"Verifying...\", error: \"\" });\nupdate(savingState);\n\ntry {\n if (file) {\n const allowedTypes = [\"image/webp\", \"image/png\", \"image/jpeg\"];\n const hasAllowedType = allowedTypes.includes(String(file.type || \"\").toLowerCase());\n const hasAllowedExtension = /\\.(webp|png|jpe?g)$/i.test(String(file.name || \"\"));\n if (!hasAllowedType && !(file.type === \"\" && hasAllowedExtension)) {\n throw new Error(\"Choose a WebP, PNG, JPG, or JPEG image.\");\n }\n const body = new FormData();\n body.append(\"file\", file);\n const uploadRes = await fetch(`/api/users/${state.me.id}/avatar`, {\n method: \"POST\",\n credentials: \"include\",\n body\n });\n const uploadData = await uploadRes.json().catch(function() { return {}; });\n if (!uploadRes.ok) throw new Error(uploadData.error || \"Headshot upload failed.\");\n }\n\n const res = await fetch(\"/api/auth/me/guardian-verification\", {\n method: \"PUT\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n name: state.me.name,\n email: String(state.email || \"\").trim(),\n phone: String(state.phone || \"\").trim(),\n mobile: String(state.mobile || \"\").trim()\n })\n });\n const data = await res.json().catch(function() { return {}; });\n if (!res.ok) throw new Error(data.error || \"We couldn't verify your details.\");\n window.location.href = \"/workshop/school-os/family/gradebook\";\n return savingState;\n} catch (error) {\n const next = Object.assign({}, state, {\n saving: false,\n verifyLabel: \"Verify\",\n error: error && error.message ? error.message : \"We couldn't verify your details.\"\n });\n update(next);\n return next;\n}"}],"styles":null,"formValidation":null,"apis":[],"roles":["parent-guardian"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Verify your details\nroute: /workshop/first-login-verify\nroles: [parent-guardian]\n---\n\n```state\n{ \"me\": {}, \"firstName\": \"\", \"schoolName\": \"your school\", \"initials\": \"\", \"headshotSrc\": \"\", \"headshotFile\": null, \"email\": \"\", \"phone\": \"\", \"mobile\": \"\", \"contactsConfirmed\": false, \"saving\": false, \"verifyLabel\": \"Verify\", \"error\": \"\" }\n```\n\n```template\n
\n
\n

Welcome to {schoolName}, {firstName} ๐Ÿ‘‹

\n

This is your first sign-in. Take a minute to confirm how the school can reach you.

\n
\n\n
\n !\n
\n
Please verify your contact details
\n
These are the details the school has on file. Correct anything that's wrong, add an optional phone number or headshot, then select Verify to finish setting up your account.
\n
\n
\n\n \n\n
\n
\n
\n Headshot\n โ— Optional\n
\n
\n \"Selected\n {initials}\n
\n Add a photo of yourself\n

Shown next to your name in messages and at pickup. WebP, PNG, JPG, or JPEG; square works best.

\n \n
\n
\n
\n\n
\n
\n Contact details on file\n All fields can be changed\n
\n\n
\n
\n \n โ— Not verified\n
\n \n We'll use this address when the school needs to contact you. This is also the address you sign in with.\n
\n\n
\n
\n
\n \n โ— Not verified\n
\n \n Home or work landline (optional).\n
\n
\n
\n \n โ— Not verified\n
\n \n Used for urgent texts like closures and absences (optional).\n
\n
\n\n \n\n
{error}
\n\n
\n Changes are saved when you verify.\n \n
\n
\n
\n
\n```\n\n```action:init\ntry {\n const res = await fetch(\"/api/auth/me\", { credentials: \"include\" });\n if (!res.ok) return state;\n const me = await res.json();\n const roles = Array.isArray(me.roles) ? me.roles : [];\n if (!roles.includes(\"parent-guardian\")) {\n window.location.href = \"/403\";\n return state;\n }\n if (me.guardian_profile_verification_required !== true) {\n window.location.href = \"/workshop/school-os/family/gradebook\";\n return state;\n }\n const name = String(me.name || \"Guardian\").trim();\n const initials = name.split(/\\s+/).filter(Boolean).slice(0, 2).map(function(part) {\n return part.charAt(0).toUpperCase();\n }).join(\"\") || \"GU\";\n return Object.assign({}, state, {\n me,\n firstName: name.split(/\\s+/)[0] || \"there\",\n schoolName: String(me.tenant_name || \"your school\"),\n initials,\n headshotSrc: String(me.avatar_url || \"\"),\n email: String(me.email || \"\"),\n phone: String(me.phone || \"\"),\n mobile: String(me.mobile || \"\"),\n error: \"\"\n });\n} catch {\n return Object.assign({}, state, { error: \"We couldn't load your details. Refresh the page and try again.\" });\n}\n```\n\n```action:verifyDetails\nevent.preventDefault();\nif (state.saving) return state;\nif (!state.contactsConfirmed) {\n const next = Object.assign({}, state, { error: \"Please confirm that the contact details are correct.\" });\n update(next);\n return next;\n}\n\nconst form = event.target;\nconst input = form.querySelector('input[name=\"headshot\"]');\nconst file = state.headshotFile || (input && input.files ? input.files[0] : null);\nconst savingState = Object.assign({}, state, { saving: true, verifyLabel: \"Verifying...\", error: \"\" });\nupdate(savingState);\n\ntry {\n if (file) {\n const allowedTypes = [\"image/webp\", \"image/png\", \"image/jpeg\"];\n const hasAllowedType = allowedTypes.includes(String(file.type || \"\").toLowerCase());\n const hasAllowedExtension = /\\.(webp|png|jpe?g)$/i.test(String(file.name || \"\"));\n if (!hasAllowedType && !(file.type === \"\" && hasAllowedExtension)) {\n throw new Error(\"Choose a WebP, PNG, JPG, or JPEG image.\");\n }\n const body = new FormData();\n body.append(\"file\", file);\n const uploadRes = await fetch(`/api/users/${state.me.id}/avatar`, {\n method: \"POST\",\n credentials: \"include\",\n body\n });\n const uploadData = await uploadRes.json().catch(function() { return {}; });\n if (!uploadRes.ok) throw new Error(uploadData.error || \"Headshot upload failed.\");\n }\n\n const res = await fetch(\"/api/auth/me/guardian-verification\", {\n method: \"PUT\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n name: state.me.name,\n email: String(state.email || \"\").trim(),\n phone: String(state.phone || \"\").trim(),\n mobile: String(state.mobile || \"\").trim()\n })\n });\n const data = await res.json().catch(function() { return {}; });\n if (!res.ok) throw new Error(data.error || \"We couldn't verify your details.\");\n window.location.href = \"/workshop/school-os/family/gradebook\";\n return savingState;\n} catch (error) {\n const next = Object.assign({}, state, {\n saving: false,\n verifyLabel: \"Verify\",\n error: error && error.message ? error.message : \"We couldn't verify your details.\"\n });\n update(next);\n return next;\n}\n```\n"},{"title":"Forgot Password","route":"/forgot-password","pageLayout":"fullscreen","contentHtml":"

Forgot Password

\n","searchText":"Forgot Password","state":{"email":"","sent":false,"error":"","loading":false},"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
Reset your password
\n

Enter your email and we'll send you a reset link

\n\n
{error}
\n\n
\n

If that email exists in our system, a reset link has been sent. Check your email.

\n

\n Back to sign in\n

\n
\n\n
\n
\n \n \n
\n \n
\n\n

\n Remember your password? Sign in\n

\n
\n
\n\n
"},"actions":[{"name":"sendReset","code":"try {\n var res = await fetch(\"/api/auth/forgot-password\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ email: state.email }),\n credentials: \"include\"\n });\n if (res.ok) {\n return { email: state.email, sent: true, error: \"\", loading: false };\n }\n var data = await res.json().catch(function() { return {}; });\n return { email: state.email, sent: false, error: data.error || \"Something went wrong\", loading: false };\n} catch(e) {\n return { email: state.email, sent: false, error: \"Server error. Please try again.\", loading: false };\n}"}],"styles":".bricks-auth-success {\n text-align: center;\n color: var(--text);\n font-size: var(--font-size-sm);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Forgot Password\nroute: /forgot-password\nlayout: fullscreen\n---\n\n# Forgot Password\n\n```state\n{ \"email\": \"\", \"sent\": false, \"error\": \"\", \"loading\": false }\n```\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
Reset your password
\n

Enter your email and we'll send you a reset link

\n\n
{error}
\n\n
\n

If that email exists in our system, a reset link has been sent. Check your email.

\n

\n Back to sign in\n

\n
\n\n
\n
\n \n \n
\n \n
\n\n

\n Remember your password? Sign in\n

\n
\n
\n\n
\n```\n\n```action:sendReset\ntry {\n var res = await fetch(\"/api/auth/forgot-password\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ email: state.email }),\n credentials: \"include\"\n });\n if (res.ok) {\n return { email: state.email, sent: true, error: \"\", loading: false };\n }\n var data = await res.json().catch(function() { return {}; });\n return { email: state.email, sent: false, error: data.error || \"Something went wrong\", loading: false };\n} catch(e) {\n return { email: state.email, sent: false, error: \"Server error. Please try again.\", loading: false };\n}\n```\n\n```style\n.bricks-auth-success {\n text-align: center;\n color: var(--text);\n font-size: var(--font-size-sm);\n}\n```\n"},{"title":"Forms","route":"/developer-tools/forms","pageLayout":null,"contentHtml":"

Forms

\n

Input handling, validation, and submission โ€” all from markdown.

\n

Use data-bind=\"fieldName\" on inputs for two-way binding. Add a validate block to define field rules. Use on:submit=\"field=value\" on <form> elements to handle submission.

\n","searchText":"Forms Input handling, validation, and submission โ€” all from markdown. Use on inputs for two-way binding. Add a block to define field rules. Use on elements to handle submission.","state":{"name":"","email":"","message":"","errors":{},"submitted":false},"template":{"html":"
\n
\n
\n \n \n {errors.name}\n
\n
\n \n \n {errors.email}\n
\n
\n \n \n {errors.message}\n
\n \n
\n
\n
\n โœ“ Message sent! Thanks {name}, we'll get back to you at {email}.\n
"},"actions":[],"styles":".form-section[data-submitted=\"true\"] { display: none; }\n.form-success[data-submitted=\"false\"] { display: none; }","formValidation":{"name":{"required":true,"label":"Name"},"email":{"required":true,"pattern":"email","label":"Email"},"message":{"required":true,"minLength":10,"label":"Message"}},"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Forms\nroute: /developer-tools/forms\n---\n\n# Forms\n\nInput handling, validation, and submission โ€” all from markdown.\n\nUse `data-bind=\"fieldName\"` on inputs for two-way binding. Add a `validate` block to define field rules. Use `on:submit=\"field=value\"` on `
` elements to handle submission.\n\n```state\n{ \"name\": \"\", \"email\": \"\", \"message\": \"\", \"errors\": {}, \"submitted\": false }\n```\n\n```validate\n{\n \"name\": { \"required\": true, \"label\": \"Name\" },\n \"email\": { \"required\": true, \"pattern\": \"email\", \"label\": \"Email\" },\n \"message\": { \"required\": true, \"minLength\": 10, \"label\": \"Message\" }\n}\n```\n\n```template\n
\n \n
\n \n \n {errors.name}\n
\n
\n \n \n {errors.email}\n
\n
\n \n \n {errors.message}\n
\n \n \n
\n
\n โœ“ Message sent! Thanks {name}, we'll get back to you at {email}.\n
\n```\n\n```style\n.form-section[data-submitted=\"true\"] { display: none; }\n.form-success[data-submitted=\"false\"] { display: none; }\n```\n"},{"title":"Google Drive Sync","route":"/developer-tools/google-sync","pageLayout":"google-sync","contentHtml":"

Google Drive Sync

\n

Edit content in Google Docs, sync to Bricks as markdown automatically.

\n","searchText":"Google Drive Sync Edit content in Google Docs, sync to Bricks as markdown automatically.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Google Drive Sync\nroute: /developer-tools/google-sync\nlayout: google-sync\n---\n\n# Google Drive Sync\n\nEdit content in Google Docs, sync to Bricks as markdown automatically.\n"},{"title":"Workshop","route":"/workshop","pageLayout":"dashboard","contentHtml":"

Workshop

\n","searchText":"Workshop","state":null,"template":null,"actions":[],"styles":"h1 { display: none; }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Workshop\nroute: /workshop\nlayout: dashboard\n---\n\n# Workshop\n\n```style\nh1 { display: none; }\n```\n"},{"title":"Markdown Includes","route":"/developer-tools/includes","pageLayout":null,"contentHtml":"

Markdown Includes

\n

Embed reusable components and markdown partials anywhere in a page with @include().

\n

Component Includes

\n

Components from components/*.md โ€” with state, template, and styles merged into the page.

\n

Alerts

\n\n\n\n

Inline Badges

\n

Badges render inline alongside text. Status: Released:

\n

Forms

\n\n

File Includes

\n

Plain .md files inlined directly โ€” no state or template needed.

\n
\n

Note: This content is a reusable markdown partial. Partials are plain .md files โ€” no state, no template blocks needed.

\n
\n
\n

Pro tip: Combine @include(file.md) for static partials with @include(componentName) for stateful components. Both work on the same page.

\n
\n

How It Works

\n

| Syntax | What it does |\n|---|---|\n| | Embed a component from components/name.md |\n| | Pass props to a component (overrides defaults) |\n| 0 | Inline a markdown partial from the project root |

\n

Both types work on the same page. Component includes merge state and styles; file includes add content only.

\n","searchText":"Markdown Includes Embed reusable components and markdown partials anywhere in a page with . Component Includes Components from โ€” with state, template, and styles merged into the page. Alerts @include(alert title=\"All good\" message=\"The includes system is working.\" type=\"info\") @include(alert title=\"Watch out\" message=\"Last include wins for shared state keys.\" type=\"warning\") @include(alert title=\"Well done\" message=\"Props always override the component defaults.\" type=\"success\") Inline Badges Badges render inline alongside text. Status: @include(badge label=\"Stable\" variant=\"success\") Released: @include(badge label=\"v1.0\" variant=\"accent\") Forms @include(form) File Includes Plain files inlined directly โ€” no state or template needed. @include(partials/callout.md) @include(partials/pro-tip.md) How It Works | Syntax | What it does | |---|---| | | Embed a component from | | | Pass props to a component (overrides defaults) | | | Inline a markdown partial from the project root | Both types work on the same page. Component includes merge state and styles; file includes add content only.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Markdown Includes\nroute: /developer-tools/includes\n---\n\n# Markdown Includes\n\nEmbed reusable components and markdown partials anywhere in a page with `@include()`.\n\n## Component Includes\n\nComponents from `components/*.md` โ€” with state, template, and styles merged into the page.\n\n### Alerts\n\n@include(alert title=\"All good\" message=\"The includes system is working.\" type=\"info\")\n\n@include(alert title=\"Watch out\" message=\"Last include wins for shared state keys.\" type=\"warning\")\n\n@include(alert title=\"Well done\" message=\"Props always override the component defaults.\" type=\"success\")\n\n### Inline Badges\n\nBadges render inline alongside text. Status: @include(badge label=\"Stable\" variant=\"success\") Released: @include(badge label=\"v1.0\" variant=\"accent\")\n\n### Forms\n\n@include(form)\n\n## File Includes\n\nPlain `.md` files inlined directly โ€” no state or template needed.\n\n@include(partials/callout.md)\n\n@include(partials/pro-tip.md)\n\n## How It Works\n\n| Syntax | What it does |\n|---|---|\n| `@include(name)` | Embed a component from `components/name.md` |\n| `@include(name prop=\"val\")` | Pass props to a component (overrides defaults) |\n| `@include(file.md)` | Inline a markdown partial from the project root |\n\nBoth types work on the same page. Component includes merge state and styles; file includes add content only.\n"},{"title":"Investor Portal","route":"/portal/investors/:token","pageLayout":"fullscreen","contentHtml":"","searchText":"","state":{"loading":true,"error":""},"template":{"html":"
\n
\n
Bricks
\n

Opening investor room

\n

Securing your data-room session...

\n
\n\n
\n
Access unavailable
\n

Investor link unavailable

\n

{error}

\n Sign in\n
\n
"},"actions":[{"name":"init","code":"var parts = window.location.pathname.split(\"/\").filter(Boolean);\nvar token = parts[parts.length - 1] || \"\";\nif (!token) {\n return { loading: false, error: \"Missing investor token.\" };\n}\n\ntry {\n var res = await fetch(\"/api/public/investor-relations/\" + encodeURIComponent(token) + \"/redeem\", {\n method: \"POST\",\n headers: { \"Accept\": \"application/json\" },\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return {\n loading: false,\n error: data.error || \"This investor link is expired, revoked, or no longer available.\"\n };\n }\n\n if (data.user) {\n var session = {\n name: data.user.name,\n tenant_name: data.user.tenant_name || undefined\n };\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session)); } catch(e) {}\n }\n\n // Redeeming changes the httpOnly session cookie. Start a fresh authenticated\n // shell rather than retaining the public page's anonymous permission state.\n // The investor handoff has exactly one destination; never follow an external\n // redirect supplied in a response.\n window.location.replace(\"/workshop/investor-room\");\n return { loading: true, error: \"\" };\n} catch (e) {\n return { loading: false, error: \"Could not open this investor link.\" };\n}"}],"styles":".bricks-section-header {\n display: none;\n}\n\n.bricks-template {\n width: 100vw;\n max-width: none;\n margin: var(--spacing-0);\n}\n\n.investor-handoff {\n min-height: 100vh;\n display: grid;\n place-items: center;\n padding: var(--spacing-6);\n background:\n linear-gradient(135deg, color-mix(in srgb, var(--bg) 92%, var(--accent)), var(--surface)),\n var(--bg);\n color: var(--text);\n}\n\n.investor-handoff-card {\n width: min(100%, var(--width-md));\n background: var(--surface);\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-md);\n padding: var(--spacing-6);\n display: grid;\n gap: var(--spacing-3);\n text-align: center;\n box-shadow: var(--shadow-md);\n}\n\n.investor-handoff-card h1,\n.investor-handoff-card p {\n margin: var(--spacing-0);\n}\n\n.investor-handoff-card p {\n color: var(--muted);\n}\n\n.investor-handoff-mark,\n.investor-handoff-lock {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-extrabold);\n}\n\n.investor-handoff-error .bricks-btn {\n justify-self: center;\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Investor Portal\nroute: /portal/investors/:token\nlayout: fullscreen\n---\n\n```state\n{\n \"loading\": true,\n \"error\": \"\"\n}\n```\n\n```template\n
\n
\n
Bricks
\n

Opening investor room

\n

Securing your data-room session...

\n
\n\n
\n
Access unavailable
\n

Investor link unavailable

\n

{error}

\n Sign in\n
\n
\n```\n\n```action:init\nvar parts = window.location.pathname.split(\"/\").filter(Boolean);\nvar token = parts[parts.length - 1] || \"\";\nif (!token) {\n return { loading: false, error: \"Missing investor token.\" };\n}\n\ntry {\n var res = await fetch(\"/api/public/investor-relations/\" + encodeURIComponent(token) + \"/redeem\", {\n method: \"POST\",\n headers: { \"Accept\": \"application/json\" },\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return {\n loading: false,\n error: data.error || \"This investor link is expired, revoked, or no longer available.\"\n };\n }\n\n if (data.user) {\n var session = {\n name: data.user.name,\n tenant_name: data.user.tenant_name || undefined\n };\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session)); } catch(e) {}\n }\n\n // Redeeming changes the httpOnly session cookie. Start a fresh authenticated\n // shell rather than retaining the public page's anonymous permission state.\n // The investor handoff has exactly one destination; never follow an external\n // redirect supplied in a response.\n window.location.replace(\"/workshop/investor-room\");\n return { loading: true, error: \"\" };\n} catch (e) {\n return { loading: false, error: \"Could not open this investor link.\" };\n}\n```\n\n```style\n.bricks-section-header {\n display: none;\n}\n\n.bricks-template {\n width: 100vw;\n max-width: none;\n margin: var(--spacing-0);\n}\n\n.investor-handoff {\n min-height: 100vh;\n display: grid;\n place-items: center;\n padding: var(--spacing-6);\n background:\n linear-gradient(135deg, color-mix(in srgb, var(--bg) 92%, var(--accent)), var(--surface)),\n var(--bg);\n color: var(--text);\n}\n\n.investor-handoff-card {\n width: min(100%, var(--width-md));\n background: var(--surface);\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-md);\n padding: var(--spacing-6);\n display: grid;\n gap: var(--spacing-3);\n text-align: center;\n box-shadow: var(--shadow-md);\n}\n\n.investor-handoff-card h1,\n.investor-handoff-card p {\n margin: var(--spacing-0);\n}\n\n.investor-handoff-card p {\n color: var(--muted);\n}\n\n.investor-handoff-mark,\n.investor-handoff-lock {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-extrabold);\n}\n\n.investor-handoff-error .bricks-btn {\n justify-self: center;\n}\n```\n"},{"title":"Investor Room","route":"/workshop/investor-room","pageLayout":null,"contentHtml":"

Investor Room

\n","searchText":"Investor Room","state":{"loading":true,"loaded":false,"error":"","question":"","questionStatus":"","room":{},"investor":{},"documents":[],"metrics":[],"updates":[],"questions":[]},"template":{"html":"
\n
Opening investor room...
\n
\n\n
\n

Investor room unavailable

\n

{error}

\n
\n\n
\n
\n
\n

{room.round_name} {room.raise_amount}

\n

{room.name}

\n

{room.intro}

\n
\n Open deck\n Book call\n
\n
\n \n
\n\n
\n
\n 01\n

Thesis

\n
\n
\n
\n

Memo

\n

{room.memo}

\n
\n
\n

Why now

\n

{room.thesis}

\n
\n
\n
\n\n
\n
\n 02\n

Data Room

\n
\n
\n Pitch\n Financials\n Product\n Customers/Traction\n Legal\n Security/Architecture\n
\n
\n
\n {doc.section}\n

{doc.title}

\n

{doc.description}

\n
\n View\n Download\n
\n
\n
\n

No documents are visible for your invite yet.

\n
\n\n
\n
\n 03\n

Product Proof

\n
\n
\n
\n

Experience Bricks from the inside

\n

{room.product_demo_copy}

\n
\n Open demo\n
\n
\n\n
\n
\n 04\n

Round Room

\n
\n
\n
\n

Use of funds

\n

{room.use_of_funds}

\n
\n
\n

Milestones

\n

{room.milestones}

\n
\n
\n
\n
\n {metric.category}\n {metric.value}\n {metric.label}\n
\n
\n
\n\n
\n
\n 05\n

Updates and Q&A

\n
\n
\n
\n
\n {update.published_at}\n

{update.title}

\n

{update.body}

\n
\n
\n

{item.question}

\n

{item.answer}

\n
\n
\n
\n \n \n \n

{questionStatus}

\n
\n
\n
\n
"},"actions":[{"name":"init","code":"try {\n var res = await fetch(\"/api/investor-relations/portal/me\", {\n method: \"GET\",\n headers: { \"Accept\": \"application/json\" },\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return {\n loading: false,\n loaded: false,\n error: data.error || \"You do not have access to an investor room.\"\n };\n }\n return Object.assign({}, data, {\n loading: false,\n loaded: true,\n error: \"\",\n question: \"\",\n questionStatus: \"\"\n });\n} catch (e) {\n return { loading: false, loaded: false, error: \"Could not load the investor room.\" };\n}"},{"name":"trackEvent","code":"var target = event && event.target && event.target.closest ? event.target.closest(\"[data-event-type]\") : null;\nvar eventType = target ? target.getAttribute(\"data-event-type\") : \"\";\nif (!eventType) return state;\nvar documentId = target ? target.getAttribute(\"data-document-id\") : \"\";\ntry {\n fetch(\"/api/investor-relations/portal/events\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n credentials: \"include\",\n body: JSON.stringify({\n event_type: eventType,\n document_id: documentId || null,\n metadata: { source: \"investor_room\" }\n }),\n keepalive: true\n });\n} catch (e) {}\nreturn state;"},{"name":"submitQuestion","code":"var question = String(state.question || \"\").trim();\nif (!question) {\n return Object.assign({}, state, { questionStatus: \"Write a question first.\" });\n}\ntry {\n var res = await fetch(\"/api/investor-relations/portal/questions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n credentials: \"include\",\n body: JSON.stringify({ question: question })\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return Object.assign({}, state, { questionStatus: data.error || \"Could not send the question.\" });\n }\n return Object.assign({}, state, { question: \"\", questionStatus: \"Question sent.\" });\n} catch (e) {\n return Object.assign({}, state, { questionStatus: \"Could not send the question.\" });\n}"}],"styles":".bricks-page-workshop-investor-room .bricks-page-content {\n display: contents;\n}\n\n.bricks-page-workshop-investor-room .bricks-template {\n display: grid;\n gap: var(--spacing-5);\n max-width: var(--width-5xl);\n}\n\n.investor-room,\n.investor-room-loading,\n.investor-room-error {\n display: grid;\n gap: var(--spacing-5);\n}\n\n.investor-room-loader,\n.investor-room-error,\n.investor-room-section,\n.investor-room-summary,\n.investor-room-doc,\n.investor-room-proof,\n.investor-room-metric,\n.investor-room-update,\n.investor-room-question {\n background: var(--surface);\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-md);\n}\n\n.investor-room-loader,\n.investor-room-error {\n padding: var(--spacing-5);\n}\n\n.investor-room-hero,\n.investor-room-columns {\n display: grid;\n grid-template-columns: minmax(0, 1.35fr) minmax(var(--width-xs), 0.75fr);\n gap: var(--spacing-5);\n align-items: stretch;\n}\n\n.investor-room-copy {\n display: grid;\n gap: var(--spacing-3);\n align-content: center;\n}\n\n.investor-room-kicker,\n.investor-room-section-head span,\n.investor-room-doc span,\n.investor-room-metric span,\n.investor-room-update span {\n color: var(--accent);\n text-transform: uppercase;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n letter-spacing: 0;\n}\n\n.investor-room-copy h2,\n.investor-room-section-head h2,\n.investor-room-doc h3,\n.investor-room-proof h3,\n.investor-room-update h3,\n.investor-room-question label {\n margin: var(--spacing-0);\n}\n\n.investor-room-copy p,\n.investor-room-section p,\n.investor-room-muted {\n color: var(--muted);\n line-height: var(--line-height-relaxed);\n}\n\n.investor-room-actions,\n.investor-room-doc-actions,\n.investor-room-tabs {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n flex-wrap: wrap;\n}\n\n.investor-room-summary {\n padding: var(--spacing-4);\n display: grid;\n gap: var(--spacing-3);\n}\n\n.investor-room-summary div {\n display: flex;\n justify-content: space-between;\n gap: var(--spacing-3);\n border-bottom: var(--border-width) solid var(--border);\n padding-bottom: var(--spacing-2);\n}\n\n.investor-room-summary span {\n color: var(--muted);\n}\n\n.investor-room-section {\n padding: var(--spacing-5);\n display: grid;\n gap: var(--spacing-4);\n}\n\n.investor-room-section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-4);\n}\n\n.investor-room-tabs span {\n background: color-mix(in srgb, var(--accent) 8%, var(--surface));\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-full);\n padding: var(--spacing-2) var(--spacing-3);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n}\n\n.investor-room-doc-grid,\n.investor-room-metrics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--width-xs), 1fr));\n gap: var(--spacing-4);\n}\n\n.investor-room-doc,\n.investor-room-metric,\n.investor-room-update {\n padding: var(--spacing-4);\n display: grid;\n gap: var(--spacing-3);\n}\n\n.investor-room-doc-actions {\n justify-content: space-between;\n}\n\n.investor-room-doc-actions a {\n color: var(--accent);\n font-weight: var(--font-weight-bold);\n text-decoration: none;\n}\n\n.investor-room-proof {\n padding: var(--spacing-4);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-4);\n}\n\n.investor-room-metric strong {\n font-size: var(--font-size-2xl);\n}\n\n.investor-room-metric em {\n color: var(--muted);\n font-style: normal;\n}\n\n.investor-room-feed,\n.investor-room-question {\n display: grid;\n gap: var(--spacing-3);\n}\n\n.investor-room-question {\n padding: var(--spacing-4);\n}\n\n.investor-room-question textarea {\n min-height: calc(var(--spacing-12) * 2);\n resize: vertical;\n width: 100%;\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-md);\n padding: var(--spacing-3);\n font: inherit;\n background: var(--surface);\n color: var(--text);\n}\n\n@media (max-width: 54em) {\n .investor-room-hero,\n .investor-room-columns {\n grid-template-columns: 1fr;\n }\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Investor Room\nroute: /workshop/investor-room\n---\n\n# Investor Room\n\n```state\n{\n \"loading\": true,\n \"loaded\": false,\n \"error\": \"\",\n \"question\": \"\",\n \"questionStatus\": \"\",\n \"room\": {},\n \"investor\": {},\n \"documents\": [],\n \"metrics\": [],\n \"updates\": [],\n \"questions\": []\n}\n```\n\n```template\n
\n
Opening investor room...
\n
\n\n
\n

Investor room unavailable

\n

{error}

\n
\n\n
\n
\n
\n

{room.round_name} {room.raise_amount}

\n

{room.name}

\n

{room.intro}

\n
\n Open deck\n Book call\n
\n
\n \n
\n\n
\n
\n 01\n

Thesis

\n
\n
\n
\n

Memo

\n

{room.memo}

\n
\n
\n

Why now

\n

{room.thesis}

\n
\n
\n
\n\n
\n
\n 02\n

Data Room

\n
\n
\n Pitch\n Financials\n Product\n Customers/Traction\n Legal\n Security/Architecture\n
\n
\n
\n {doc.section}\n

{doc.title}

\n

{doc.description}

\n
\n View\n Download\n
\n
\n
\n

No documents are visible for your invite yet.

\n
\n\n
\n
\n 03\n

Product Proof

\n
\n
\n
\n

Experience Bricks from the inside

\n

{room.product_demo_copy}

\n
\n Open demo\n
\n
\n\n
\n
\n 04\n

Round Room

\n
\n
\n
\n

Use of funds

\n

{room.use_of_funds}

\n
\n
\n

Milestones

\n

{room.milestones}

\n
\n
\n
\n
\n {metric.category}\n {metric.value}\n {metric.label}\n
\n
\n
\n\n
\n
\n 05\n

Updates and Q&A

\n
\n
\n
\n
\n {update.published_at}\n

{update.title}

\n

{update.body}

\n
\n
\n

{item.question}

\n

{item.answer}

\n
\n
\n
\n \n \n \n

{questionStatus}

\n
\n
\n
\n
\n```\n\n```action:init\ntry {\n var res = await fetch(\"/api/investor-relations/portal/me\", {\n method: \"GET\",\n headers: { \"Accept\": \"application/json\" },\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return {\n loading: false,\n loaded: false,\n error: data.error || \"You do not have access to an investor room.\"\n };\n }\n return Object.assign({}, data, {\n loading: false,\n loaded: true,\n error: \"\",\n question: \"\",\n questionStatus: \"\"\n });\n} catch (e) {\n return { loading: false, loaded: false, error: \"Could not load the investor room.\" };\n}\n```\n\n```action:trackEvent\nvar target = event && event.target && event.target.closest ? event.target.closest(\"[data-event-type]\") : null;\nvar eventType = target ? target.getAttribute(\"data-event-type\") : \"\";\nif (!eventType) return state;\nvar documentId = target ? target.getAttribute(\"data-document-id\") : \"\";\ntry {\n fetch(\"/api/investor-relations/portal/events\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n credentials: \"include\",\n body: JSON.stringify({\n event_type: eventType,\n document_id: documentId || null,\n metadata: { source: \"investor_room\" }\n }),\n keepalive: true\n });\n} catch (e) {}\nreturn state;\n```\n\n```action:submitQuestion\nvar question = String(state.question || \"\").trim();\nif (!question) {\n return Object.assign({}, state, { questionStatus: \"Write a question first.\" });\n}\ntry {\n var res = await fetch(\"/api/investor-relations/portal/questions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n credentials: \"include\",\n body: JSON.stringify({ question: question })\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return Object.assign({}, state, { questionStatus: data.error || \"Could not send the question.\" });\n }\n return Object.assign({}, state, { question: \"\", questionStatus: \"Question sent.\" });\n} catch (e) {\n return Object.assign({}, state, { questionStatus: \"Could not send the question.\" });\n}\n```\n\n```style\n.bricks-page-workshop-investor-room .bricks-page-content {\n display: contents;\n}\n\n.bricks-page-workshop-investor-room .bricks-template {\n display: grid;\n gap: var(--spacing-5);\n max-width: var(--width-5xl);\n}\n\n.investor-room,\n.investor-room-loading,\n.investor-room-error {\n display: grid;\n gap: var(--spacing-5);\n}\n\n.investor-room-loader,\n.investor-room-error,\n.investor-room-section,\n.investor-room-summary,\n.investor-room-doc,\n.investor-room-proof,\n.investor-room-metric,\n.investor-room-update,\n.investor-room-question {\n background: var(--surface);\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-md);\n}\n\n.investor-room-loader,\n.investor-room-error {\n padding: var(--spacing-5);\n}\n\n.investor-room-hero,\n.investor-room-columns {\n display: grid;\n grid-template-columns: minmax(0, 1.35fr) minmax(var(--width-xs), 0.75fr);\n gap: var(--spacing-5);\n align-items: stretch;\n}\n\n.investor-room-copy {\n display: grid;\n gap: var(--spacing-3);\n align-content: center;\n}\n\n.investor-room-kicker,\n.investor-room-section-head span,\n.investor-room-doc span,\n.investor-room-metric span,\n.investor-room-update span {\n color: var(--accent);\n text-transform: uppercase;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n letter-spacing: 0;\n}\n\n.investor-room-copy h2,\n.investor-room-section-head h2,\n.investor-room-doc h3,\n.investor-room-proof h3,\n.investor-room-update h3,\n.investor-room-question label {\n margin: var(--spacing-0);\n}\n\n.investor-room-copy p,\n.investor-room-section p,\n.investor-room-muted {\n color: var(--muted);\n line-height: var(--line-height-relaxed);\n}\n\n.investor-room-actions,\n.investor-room-doc-actions,\n.investor-room-tabs {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n flex-wrap: wrap;\n}\n\n.investor-room-summary {\n padding: var(--spacing-4);\n display: grid;\n gap: var(--spacing-3);\n}\n\n.investor-room-summary div {\n display: flex;\n justify-content: space-between;\n gap: var(--spacing-3);\n border-bottom: var(--border-width) solid var(--border);\n padding-bottom: var(--spacing-2);\n}\n\n.investor-room-summary span {\n color: var(--muted);\n}\n\n.investor-room-section {\n padding: var(--spacing-5);\n display: grid;\n gap: var(--spacing-4);\n}\n\n.investor-room-section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-4);\n}\n\n.investor-room-tabs span {\n background: color-mix(in srgb, var(--accent) 8%, var(--surface));\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-full);\n padding: var(--spacing-2) var(--spacing-3);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n}\n\n.investor-room-doc-grid,\n.investor-room-metrics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--width-xs), 1fr));\n gap: var(--spacing-4);\n}\n\n.investor-room-doc,\n.investor-room-metric,\n.investor-room-update {\n padding: var(--spacing-4);\n display: grid;\n gap: var(--spacing-3);\n}\n\n.investor-room-doc-actions {\n justify-content: space-between;\n}\n\n.investor-room-doc-actions a {\n color: var(--accent);\n font-weight: var(--font-weight-bold);\n text-decoration: none;\n}\n\n.investor-room-proof {\n padding: var(--spacing-4);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-4);\n}\n\n.investor-room-metric strong {\n font-size: var(--font-size-2xl);\n}\n\n.investor-room-metric em {\n color: var(--muted);\n font-style: normal;\n}\n\n.investor-room-feed,\n.investor-room-question {\n display: grid;\n gap: var(--spacing-3);\n}\n\n.investor-room-question {\n padding: var(--spacing-4);\n}\n\n.investor-room-question textarea {\n min-height: calc(var(--spacing-12) * 2);\n resize: vertical;\n width: 100%;\n border: var(--border-width) solid var(--border);\n border-radius: var(--radius-md);\n padding: var(--spacing-3);\n font: inherit;\n background: var(--surface);\n color: var(--text);\n}\n\n@media (max-width: 54em) {\n .investor-room-hero,\n .investor-room-columns {\n grid-template-columns: 1fr;\n }\n}\n```\n"},{"title":"Loading States","route":"/developer-tools/loading","pageLayout":null,"contentHtml":"

Loading States

\n

Skeleton screens appear automatically when a page is fetching API data. Instead of a blank screen or spinner, Bricks renders animated placeholder bones that match the shape of the incoming content.

\n

How it works

\n

When a page declares an api block, its initial state includes loading: true. Bricks renders a SkeletonLoader until all endpoints resolve โ€” then the real content fades in via the page transition.

\n

What you get

\n\n

All bones animate with a 500ms shimmer sweep using --transitions-slower.

\n","searchText":"Loading States Skeleton screens appear automatically when a page is fetching API data. Instead of a blank screen or spinner, Bricks renders animated placeholder bones that match the shape of the incoming content. How it works When a page declares an block, its initial state includes . Bricks renders a until all endpoints resolve โ€” then the real content fades in via the page transition. What you get Heading bone โ€” wide shimmer block for the page title Text lines โ€” three shimmer lines at paragraph height Card row โ€” three card-shaped bones side by side All bones animate with a 500ms shimmer sweep using .","state":{"loading":true,"demo":{}},"template":{"html":"

Loaded: {demo.title}

"},"actions":[],"styles":null,"formValidation":null,"apis":[{"name":"demo","url":"https://jsonplaceholder.typicode.com/todos/1"}],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Loading States\nroute: /developer-tools/loading\n---\n\n# Loading States\n\nSkeleton screens appear automatically when a page is fetching API data. Instead of a blank screen or spinner, Bricks renders animated placeholder bones that match the shape of the incoming content.\n\n## How it works\n\nWhen a page declares an `api` block, its initial state includes `loading: true`. Bricks renders a `SkeletonLoader` until all endpoints resolve โ€” then the real content fades in via the page transition.\n\n```api\n[\n { \"name\": \"demo\", \"url\": \"https://jsonplaceholder.typicode.com/todos/1\" }\n]\n```\n\n## What you get\n\n- **Heading bone** โ€” wide shimmer block for the page title\n- **Text lines** โ€” three shimmer lines at paragraph height\n- **Card row** โ€” three card-shaped bones side by side\n\nAll bones animate with a 500ms shimmer sweep using `--transitions-slower`.\n\n```state\n{ \"loading\": true, \"demo\": {} }\n```\n\n```template\n

Loaded: {demo.title}

\n```\n"},{"title":"Login","route":"/login","pageLayout":"fullscreen","contentHtml":"

Sign In

\n","searchText":"Sign In","state":{"email":"admin@example.com","password":"admin123","showPassword":false,"passwordType":"password","error":"","success":"","loading":false,"showAccessLink":true,"accessHref":"/waitlist","accessText":"Join the waitlist","turnstileRequired":false,"turnstileSiteKey":"","turnstileMessage":""},"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ‘‹ Welcome back
\n

Sign in to continue to your dashboard

\n\n
{success}
\n
{error}
\n\n
\n
\n \n \n
\n
\n \n
\n \n \n \n
\n
\n
\n \n Forgot password?\n
\n
\n
\n {turnstileMessage}\n
\n \n
\n\n

\n Need access? {accessText}\n

\n
\n
\n\n
"},"actions":[{"name":"init","code":"window.bricksAuthTurnstileToken = \"\";\nwindow.bricksRenderAuthTurnstile = function(siteKey) {\n var target = document.getElementById(\"auth-turnstile\");\n if (!target || !siteKey) return;\n target.innerHTML = \"\";\n var render = function() {\n if (!window.turnstile) return;\n window.turnstile.render(target, {\n sitekey: siteKey,\n callback: function(token) { window.bricksAuthTurnstileToken = token || \"\"; },\n \"expired-callback\": function() { window.bricksAuthTurnstileToken = \"\"; },\n \"error-callback\": function() { window.bricksAuthTurnstileToken = \"\"; }\n });\n };\n if (window.turnstile) {\n render();\n return;\n }\n var existing = document.querySelector(\"script[data-bricks-auth-turnstile='true']\");\n if (!existing) {\n existing = document.createElement(\"script\");\n existing.src = \"https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit\";\n existing.async = true;\n existing.defer = true;\n existing.dataset.bricksAuthTurnstile = \"true\";\n document.head.appendChild(existing);\n }\n existing.addEventListener(\"load\", render, { once: true });\n};\nvar params = new URLSearchParams(window.location.search);\nvar email = params.get(\"email\");\nvar registered = params.get(\"registered\");\nvar autologin = params.get(\"autologin\");\nvar oauthError = params.get(\"oauth_error\");\nvar updates = {};\ntry {\n var siteRes = await fetch(\"/api/site-info\", { credentials: \"include\" });\n if (siteRes.ok) {\n var siteInfo = await siteRes.json();\n var waitlistEnabled = siteInfo.enableWaitlist !== false;\n var registrationEnabled = siteInfo.enableRegistration !== false;\n if (waitlistEnabled) {\n updates.showAccessLink = true;\n updates.accessHref = \"/waitlist\";\n updates.accessText = \"Join the waitlist\";\n } else if (registrationEnabled) {\n updates.showAccessLink = true;\n updates.accessHref = \"/register\";\n updates.accessText = \"Create an account\";\n } else {\n updates.showAccessLink = false;\n }\n }\n} catch (e) {}\nif (email) updates.email = email;\nif (registered) updates.success = \"Account created! Sign in to get started.\";\nif (oauthError) updates.error = oauthError;\nif (autologin && email) {\n // Auto-login after registration โ€” clean the URL and trigger login\n updates.password = autologin;\n updates.loading = true;\n window.history.replaceState({}, \"\", \"/login\");\n setTimeout(function() {\n var form = document.querySelector(\".bricks-form\");\n if (form) form.dispatchEvent(new Event(\"submit\", { bubbles: true }));\n }, 100);\n}\nif (Object.keys(updates).length > 0) return Object.assign({}, state, updates);\nreturn state;"},{"name":"togglePassword","code":"var nextShowPassword = !state.showPassword;\nreturn Object.assign({}, state, {\n showPassword: nextShowPassword,\n passwordType: nextShowPassword ? \"text\" : \"password\"\n});"},{"name":"login","code":"// Try server-side auth first (Rust backend)\ntry {\n var res = await fetch(\"/api/auth/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n email: state.email,\n password: state.password,\n turnstile_token: window.bricksAuthTurnstileToken || null\n }),\n credentials: \"include\"\n });\n if (res.ok) {\n var data = await res.json();\n\n // 2FA required โ€” user has TOTP enabled, needs to enter code\n if (data.requires_2fa && data.pending_token) {\n try { sessionStorage.setItem(\"bricks.2fa_pending\", data.pending_token); } catch(e) {}\n setTimeout(function() { window.location.href = \"/2fa-verify\"; }, 50);\n return Object.assign({}, state, { password: \"\", showPassword: false, passwordType: \"password\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" });\n }\n\n var session = { name: data.user.name, tenant_name: data.user.tenant_name || undefined, avatar_url: data.user.avatar_url || undefined };\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session)); } catch(e) {}\n\n // 2FA setup required โ€” tenant has REQUIRE_2FA but user has no TOTP\n if (data.requires_2fa_setup) {\n try { sessionStorage.setItem(\"bricks.needs_2fa_setup\", \"true\"); } catch(e) {}\n }\n\n // No token storage โ€” access token is in httpOnly cookie set by the server\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n return Object.assign({}, state, { password: \"\", showPassword: false, passwordType: \"password\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" });\n }\n if (res.status === 429) {\n var throttle = await res.json().catch(function() { return { error: \"Too many attempts. Please wait before trying again.\" }; });\n var needsTurnstile = !!(throttle.turnstile_required && throttle.turnstile_site_key);\n window.bricksAuthTurnstileToken = \"\";\n if (needsTurnstile) {\n setTimeout(function() {\n if (window.bricksRenderAuthTurnstile) window.bricksRenderAuthTurnstile(throttle.turnstile_site_key);\n }, 50);\n }\n return Object.assign({}, state, {\n error: throttle.error || \"Too many attempts. Please wait before trying again.\",\n loading: false,\n turnstileRequired: needsTurnstile,\n turnstileSiteKey: throttle.turnstile_site_key || \"\",\n turnstileMessage: needsTurnstile ? \"Complete this check, then press Sign in again.\" : \"\"\n });\n }\n if (res.status === 401) {\n var err = await res.json().catch(function() { return { error: \"Invalid credentials\" }; });\n return Object.assign({}, state, { showPassword: false, passwordType: \"password\", error: err.error || \"Invalid email or password\", loading: false });\n }\n} catch(e) {\n // Backend not available โ€” fall through to client-side\n}\n\n// Fallback: client-side auth (dev mode without Rust backend)\nvar users = [\n { name: \"Admin User\", email: \"admin@example.com\", password: \"admin123\", role: \"admin\" },\n { name: \"Regular User\", email: \"user@example.com\", password: \"user123\", role: \"user\" }\n];\nvar user = users.find(function(u) { return u.email === state.email && u.password === state.password; });\nif (user) {\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify({ name: user.name })); } catch(e) {}\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n return Object.assign({}, state, { password: \"\", showPassword: false, passwordType: \"password\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" });\n}\nreturn Object.assign({}, state, { showPassword: false, passwordType: \"password\", error: \"Invalid email or password\", loading: false });"}],"styles":"h1 { display: none; }\n.bricks-auth-success {\n background: color-mix(in srgb, var(--accent) 10%, var(--surface));\n border: var(--border-width-thin) solid var(--accent);\n color: var(--accent);\n padding: var(--spacing-3);\n border-radius: var(--radius-default);\n font-size: var(--font-size-sm);\n margin-bottom: var(--spacing-4);\n text-align: center;\n}\n.bricks-auth-turnstile {\n display: grid;\n gap: var(--spacing-2);\n margin-bottom: var(--spacing-4);\n}\n.bricks-auth-hint {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Login\nroute: /login\nlayout: fullscreen\n---\n\n# Sign In\n\n```state\n{ \"email\": \"admin@example.com\", \"password\": \"admin123\", \"showPassword\": false, \"passwordType\": \"password\", \"error\": \"\", \"success\": \"\", \"loading\": false, \"showAccessLink\": true, \"accessHref\": \"/waitlist\", \"accessText\": \"Join the waitlist\", \"turnstileRequired\": false, \"turnstileSiteKey\": \"\", \"turnstileMessage\": \"\" }\n```\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿ‘‹ Welcome back
\n

Sign in to continue to your dashboard

\n\n
{success}
\n
{error}
\n\n
\n
\n \n \n
\n
\n \n
\n \n \n \n
\n
\n
\n \n Forgot password?\n
\n
\n
\n {turnstileMessage}\n
\n \n
\n\n

\n Need access? {accessText}\n

\n
\n
\n\n
\n```\n\n```action:init\nwindow.bricksAuthTurnstileToken = \"\";\nwindow.bricksRenderAuthTurnstile = function(siteKey) {\n var target = document.getElementById(\"auth-turnstile\");\n if (!target || !siteKey) return;\n target.innerHTML = \"\";\n var render = function() {\n if (!window.turnstile) return;\n window.turnstile.render(target, {\n sitekey: siteKey,\n callback: function(token) { window.bricksAuthTurnstileToken = token || \"\"; },\n \"expired-callback\": function() { window.bricksAuthTurnstileToken = \"\"; },\n \"error-callback\": function() { window.bricksAuthTurnstileToken = \"\"; }\n });\n };\n if (window.turnstile) {\n render();\n return;\n }\n var existing = document.querySelector(\"script[data-bricks-auth-turnstile='true']\");\n if (!existing) {\n existing = document.createElement(\"script\");\n existing.src = \"https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit\";\n existing.async = true;\n existing.defer = true;\n existing.dataset.bricksAuthTurnstile = \"true\";\n document.head.appendChild(existing);\n }\n existing.addEventListener(\"load\", render, { once: true });\n};\nvar params = new URLSearchParams(window.location.search);\nvar email = params.get(\"email\");\nvar registered = params.get(\"registered\");\nvar autologin = params.get(\"autologin\");\nvar oauthError = params.get(\"oauth_error\");\nvar updates = {};\ntry {\n var siteRes = await fetch(\"/api/site-info\", { credentials: \"include\" });\n if (siteRes.ok) {\n var siteInfo = await siteRes.json();\n var waitlistEnabled = siteInfo.enableWaitlist !== false;\n var registrationEnabled = siteInfo.enableRegistration !== false;\n if (waitlistEnabled) {\n updates.showAccessLink = true;\n updates.accessHref = \"/waitlist\";\n updates.accessText = \"Join the waitlist\";\n } else if (registrationEnabled) {\n updates.showAccessLink = true;\n updates.accessHref = \"/register\";\n updates.accessText = \"Create an account\";\n } else {\n updates.showAccessLink = false;\n }\n }\n} catch (e) {}\nif (email) updates.email = email;\nif (registered) updates.success = \"Account created! Sign in to get started.\";\nif (oauthError) updates.error = oauthError;\nif (autologin && email) {\n // Auto-login after registration โ€” clean the URL and trigger login\n updates.password = autologin;\n updates.loading = true;\n window.history.replaceState({}, \"\", \"/login\");\n setTimeout(function() {\n var form = document.querySelector(\".bricks-form\");\n if (form) form.dispatchEvent(new Event(\"submit\", { bubbles: true }));\n }, 100);\n}\nif (Object.keys(updates).length > 0) return Object.assign({}, state, updates);\nreturn state;\n```\n\n```action:togglePassword\nvar nextShowPassword = !state.showPassword;\nreturn Object.assign({}, state, {\n showPassword: nextShowPassword,\n passwordType: nextShowPassword ? \"text\" : \"password\"\n});\n```\n\n```action:login\n// Try server-side auth first (Rust backend)\ntry {\n var res = await fetch(\"/api/auth/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n email: state.email,\n password: state.password,\n turnstile_token: window.bricksAuthTurnstileToken || null\n }),\n credentials: \"include\"\n });\n if (res.ok) {\n var data = await res.json();\n\n // 2FA required โ€” user has TOTP enabled, needs to enter code\n if (data.requires_2fa && data.pending_token) {\n try { sessionStorage.setItem(\"bricks.2fa_pending\", data.pending_token); } catch(e) {}\n setTimeout(function() { window.location.href = \"/2fa-verify\"; }, 50);\n return Object.assign({}, state, { password: \"\", showPassword: false, passwordType: \"password\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" });\n }\n\n var session = { name: data.user.name, tenant_name: data.user.tenant_name || undefined, avatar_url: data.user.avatar_url || undefined };\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session)); } catch(e) {}\n\n // 2FA setup required โ€” tenant has REQUIRE_2FA but user has no TOTP\n if (data.requires_2fa_setup) {\n try { sessionStorage.setItem(\"bricks.needs_2fa_setup\", \"true\"); } catch(e) {}\n }\n\n // No token storage โ€” access token is in httpOnly cookie set by the server\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n return Object.assign({}, state, { password: \"\", showPassword: false, passwordType: \"password\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" });\n }\n if (res.status === 429) {\n var throttle = await res.json().catch(function() { return { error: \"Too many attempts. Please wait before trying again.\" }; });\n var needsTurnstile = !!(throttle.turnstile_required && throttle.turnstile_site_key);\n window.bricksAuthTurnstileToken = \"\";\n if (needsTurnstile) {\n setTimeout(function() {\n if (window.bricksRenderAuthTurnstile) window.bricksRenderAuthTurnstile(throttle.turnstile_site_key);\n }, 50);\n }\n return Object.assign({}, state, {\n error: throttle.error || \"Too many attempts. Please wait before trying again.\",\n loading: false,\n turnstileRequired: needsTurnstile,\n turnstileSiteKey: throttle.turnstile_site_key || \"\",\n turnstileMessage: needsTurnstile ? \"Complete this check, then press Sign in again.\" : \"\"\n });\n }\n if (res.status === 401) {\n var err = await res.json().catch(function() { return { error: \"Invalid credentials\" }; });\n return Object.assign({}, state, { showPassword: false, passwordType: \"password\", error: err.error || \"Invalid email or password\", loading: false });\n }\n} catch(e) {\n // Backend not available โ€” fall through to client-side\n}\n\n// Fallback: client-side auth (dev mode without Rust backend)\nvar users = [\n { name: \"Admin User\", email: \"admin@example.com\", password: \"admin123\", role: \"admin\" },\n { name: \"Regular User\", email: \"user@example.com\", password: \"user123\", role: \"user\" }\n];\nvar user = users.find(function(u) { return u.email === state.email && u.password === state.password; });\nif (user) {\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify({ name: user.name })); } catch(e) {}\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n return Object.assign({}, state, { password: \"\", showPassword: false, passwordType: \"password\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" });\n}\nreturn Object.assign({}, state, { showPassword: false, passwordType: \"password\", error: \"Invalid email or password\", loading: false });\n```\n\n```style\nh1 { display: none; }\n.bricks-auth-success {\n background: color-mix(in srgb, var(--accent) 10%, var(--surface));\n border: var(--border-width-thin) solid var(--accent);\n color: var(--accent);\n padding: var(--spacing-3);\n border-radius: var(--radius-default);\n font-size: var(--font-size-sm);\n margin-bottom: var(--spacing-4);\n text-align: center;\n}\n.bricks-auth-turnstile {\n display: grid;\n gap: var(--spacing-2);\n margin-bottom: var(--spacing-4);\n}\n.bricks-auth-hint {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n```\n"},{"title":"Loops & Lists","route":"/developer-tools/loops","pageLayout":null,"contentHtml":"

Loops & Lists

\n

Render lists of items from state using each=\"item in list\" on any element.\nThe element repeats once per item. Use {item.field} for object properties,\n{item} for scalar values, and {$index} for the zero-based position.

\n","searchText":"Loops & Lists Render lists of items from state using on any element. The element repeats once per item. Use for object properties, for scalar values, and for the zero-based position.","state":{"fruits":[{"name":"Apple","color":"red"},{"name":"Banana","color":"yellow"},{"name":"Cherry","color":"crimson"},{"name":"Mango","color":"orange"}],"steps":[{"label":"Design","done":"true"},{"label":"Build","done":"true"},{"label":"Test","done":"false"},{"label":"Deploy","done":"false"}],"tags":["alpha","beta","gamma","delta"]},"template":{"html":"
\n\n
\n

Object list โ€” fruits

\n

\n each=\"fruit in fruits\" โ€” renders one row per fruit\n

\n \n
\n\n
\n

Numbered steps โ€” {$index}

\n

\n {$index} gives the zero-based loop position\n

\n
    \n
  1. \n {$index}\n {step.label}\n {step.done}\n
    2. \n
\n
\n\n
\n

Scalar list โ€” tags

\n

\n {item} renders the raw value for string/number arrays\n

\n
\n {tag}\n
\n
\n\n
"},"actions":[],"styles":".loop-demo {\n max-width: var(--width-3xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n}\n.loop-section {\n padding: var(--spacing-5);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n background: var(--surface);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-3);\n}\n.loop-heading {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n}\n.loop-hint {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n}\n.loop-list {\n list-style: none;\n padding: var(--spacing-0);\n margin: var(--spacing-0);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n.loop-item {\n display: flex;\n align-items: center;\n gap: var(--spacing-3);\n padding: var(--spacing-3) var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--bg);\n border: 1px solid var(--border);\n}\n.loop-swatch {\n width: var(--spacing-3);\n height: var(--spacing-3);\n border-radius: var(--radius-default);\n flex-shrink: 0;\n}\n.loop-name {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--text);\n flex: 1;\n}\n.loop-meta {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n.loop-steps {\n list-style: none;\n padding: var(--spacing-0);\n margin: var(--spacing-0);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n.loop-step {\n display: flex;\n align-items: center;\n gap: var(--spacing-3);\n padding: var(--spacing-3) var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--bg);\n border: 1px solid var(--border);\n}\n.loop-num {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--accent);\n width: var(--spacing-5);\n text-align: center;\n}\n.loop-step-label {\n font-size: var(--font-size-sm);\n color: var(--text);\n flex: 1;\n}\n.loop-done {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n.loop-tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-2);\n}\n.loop-tag {\n padding: var(--spacing-1) var(--spacing-3);\n border-radius: var(--radius-default);\n background: var(--accent);\n color: var(--accent-text);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Loops & Lists\nroute: /developer-tools/loops\n---\n\n# Loops & Lists\n\nRender lists of items from state using `each=\"item in list\"` on any element.\nThe element repeats once per item. Use `{item.field}` for object properties,\n`{item}` for scalar values, and `{$index}` for the zero-based position.\n\n```state\n{\n \"fruits\": [\n { \"name\": \"Apple\", \"color\": \"red\" },\n { \"name\": \"Banana\", \"color\": \"yellow\" },\n { \"name\": \"Cherry\", \"color\": \"crimson\" },\n { \"name\": \"Mango\", \"color\": \"orange\" }\n ],\n \"steps\": [\n { \"label\": \"Design\", \"done\": \"true\" },\n { \"label\": \"Build\", \"done\": \"true\" },\n { \"label\": \"Test\", \"done\": \"false\" },\n { \"label\": \"Deploy\", \"done\": \"false\" }\n ],\n \"tags\": [\"alpha\", \"beta\", \"gamma\", \"delta\"]\n}\n```\n\n```template\n
\n\n
\n

Object list โ€” fruits

\n

\n each=\"fruit in fruits\" โ€” renders one row per fruit\n

\n \n
\n\n
\n

Numbered steps โ€” {$index}

\n

\n {$index} gives the zero-based loop position\n

\n
    \n
  1. \n {$index}\n {step.label}\n {step.done}\n
    2. \n
\n
\n\n
\n

Scalar list โ€” tags

\n

\n {item} renders the raw value for string/number arrays\n

\n
\n {tag}\n
\n
\n\n
\n```\n\n```style\n.loop-demo {\n max-width: var(--width-3xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-6);\n}\n.loop-section {\n padding: var(--spacing-5);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n background: var(--surface);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-3);\n}\n.loop-heading {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n}\n.loop-hint {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n}\n.loop-list {\n list-style: none;\n padding: var(--spacing-0);\n margin: var(--spacing-0);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n.loop-item {\n display: flex;\n align-items: center;\n gap: var(--spacing-3);\n padding: var(--spacing-3) var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--bg);\n border: 1px solid var(--border);\n}\n.loop-swatch {\n width: var(--spacing-3);\n height: var(--spacing-3);\n border-radius: var(--radius-default);\n flex-shrink: 0;\n}\n.loop-name {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--text);\n flex: 1;\n}\n.loop-meta {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n.loop-steps {\n list-style: none;\n padding: var(--spacing-0);\n margin: var(--spacing-0);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n}\n.loop-step {\n display: flex;\n align-items: center;\n gap: var(--spacing-3);\n padding: var(--spacing-3) var(--spacing-4);\n border-radius: var(--radius-default);\n background: var(--bg);\n border: 1px solid var(--border);\n}\n.loop-num {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--accent);\n width: var(--spacing-5);\n text-align: center;\n}\n.loop-step-label {\n font-size: var(--font-size-sm);\n color: var(--text);\n flex: 1;\n}\n.loop-done {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n}\n.loop-tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-2);\n}\n.loop-tag {\n padding: var(--spacing-1) var(--spacing-3);\n border-radius: var(--radius-default);\n background: var(--accent);\n color: var(--accent-text);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n}\n```\n"},{"title":"Media Library","route":"/media-library","pageLayout":"media-library","contentHtml":"

Media Library

\n

Upload and manage images, videos, audio, and documents for your tenant.

\n","searchText":"Media Library Upload and manage images, videos, audio, and documents for your tenant.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Media Library\nroute: /media-library\nlayout: media-library\n---\n\n# Media Library\n\nUpload and manage images, videos, audio, and documents for your tenant.\n"},{"title":"No account","route":"/no-account","pageLayout":"fullscreen","contentHtml":"

No account

\n","searchText":"No account","state":null,"template":{"html":"
\n
\n
\n
\n
\n
\n
\n
You don't have an account.
\n

Please contact the school administrator.

\n Back to sign in\n

Back to home

\n
\n
\n
"},"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: No account\nroute: /no-account\nlayout: fullscreen\n---\n\n# No account\n\n```template\n
\n
\n
\n
\n
\n
\n
\n
You don't have an account.
\n

Please contact the school administrator.

\n Back to sign in\n

Back to home

\n
\n
\n
\n```\n"},{"title":"Offline Support","route":"/offline","pageLayout":null,"contentHtml":"

Offline Support

\n

Bricks apps work offline automatically when you have a pwa.md file in your project.

\n

How it works

\n

When your app is installed as a PWA, Bricks registers a service worker that:

\n
    \n
  1. Caches pages and assets as you visit them
    2. \n
  2. Serves from cache when you're offline
    3. \n
  3. Updates automatically when you come back online
    4. \n
\n

Setup

\n

No extra configuration needed. Just add pwa.md to your project root:

\n
---\nname: My App\nshort_name: App\ndescription: What my app does\ntheme_color: \"#6366f1\"\nbackground_color: \"#f8f8f8\"\ndisplay: standalone\nstart_url: \"/\"\n---\n
\n

Bricks generates sw.js automatically alongside manifest.json.

\n

Cache strategy

\n

Bricks uses a network-first strategy with cache fallback:

\n

| Scenario | Behaviour |\n|----------|-----------|\n| Online | Fetch from network, cache the response |\n| Offline | Serve from cache |\n| Not cached + offline | 503 response |

\n

Files generated

\n

| File | Description |\n|------|-------------|\n| sw.js | Service worker โ€” handles offline caching |\n| manifest.json | Web App Manifest โ€” enables installation |\n| icon-192.svg | Home screen icon (192ร—192) |\n| icon-512.svg | Splash screen icon (512ร—512) |

\n

Browser support

\n

Service workers work in all modern browsers (Chrome, Firefox, Safari, Edge).\nIn older browsers, the app still works โ€” just without offline support.

\n","searchText":"Offline Support Bricks apps work offline automatically when you have a file in your project. How it works When your app is installed as a PWA, Bricks registers a service worker that: Caches pages and assets as you visit them Serves from cache when you're offline Updates automatically when you come back online Setup No extra configuration needed. Just add to your project root: Bricks generates automatically alongside . Cache strategy Bricks uses a network-first strategy with cache fallback: | Scenario | Behaviour | |----------|-----------| | Online | Fetch from network, cache the response | | Offline | Serve from cache | | Not cached + offline | 503 response | Files generated | File | Description | |------|-------------| | | Service worker โ€” handles offline caching | | | Web App Manifest โ€” enables installation | | | Home screen icon (192ร—192) | | | Splash screen icon (512ร—512) | Browser support Service workers work in all modern browsers (Chrome, Firefox, Safari, Edge). In older browsers, the app still works โ€” just without offline support.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Offline Support\nroute: /offline\n---\n\n# Offline Support\n\nBricks apps work offline automatically when you have a `pwa.md` file in your project.\n\n## How it works\n\nWhen your app is installed as a PWA, Bricks registers a **service worker** that:\n\n1. **Caches pages and assets** as you visit them\n2. **Serves from cache** when you're offline\n3. **Updates automatically** when you come back online\n\n## Setup\n\nNo extra configuration needed. Just add `pwa.md` to your project root:\n\n```yaml\n---\nname: My App\nshort_name: App\ndescription: What my app does\ntheme_color: \"#6366f1\"\nbackground_color: \"#f8f8f8\"\ndisplay: standalone\nstart_url: \"/\"\n---\n```\n\nBricks generates `sw.js` automatically alongside `manifest.json`.\n\n## Cache strategy\n\nBricks uses a **network-first** strategy with cache fallback:\n\n| Scenario | Behaviour |\n|----------|-----------|\n| Online | Fetch from network, cache the response |\n| Offline | Serve from cache |\n| Not cached + offline | 503 response |\n\n## Files generated\n\n| File | Description |\n|------|-------------|\n| `sw.js` | Service worker โ€” handles offline caching |\n| `manifest.json` | Web App Manifest โ€” enables installation |\n| `icon-192.svg` | Home screen icon (192ร—192) |\n| `icon-512.svg` | Splash screen icon (512ร—512) |\n\n## Browser support\n\nService workers work in all modern browsers (Chrome, Firefox, Safari, Edge).\nIn older browsers, the app still works โ€” just without offline support.\n"},{"title":"Page Flow","route":"/developer-tools/page-flow","pageLayout":"page-flow","contentHtml":"

Page Flow

\n

Visual data flow graph for each page โ€” auto-generated from code.

\n","searchText":"Page Flow Visual data flow graph for each page โ€” auto-generated from code.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Page Flow\nroute: /developer-tools/page-flow\nlayout: page-flow\n---\n\n# Page Flow\n\nVisual data flow graph for each page โ€” auto-generated from code.\n"},{"title":"Pagination","route":"/developer-tools/pagination","pageLayout":null,"contentHtml":"

Pagination

\n

Paginate any each= loop by adding paginate=\"N\" to the item element. Bricks slices the list to N items per page and injects Prev / Next controls automatically. The current page is tracked in state as __pg_{listKey}.

\n

Syntax

\n
<div class=\"item\" each=\"task in tasks\" paginate=\"3\">{task.title}</div>\n
\n\n

Demo โ€” Tasks (3 per page)

\n","searchText":"Pagination Paginate any loop by adding to the item element. Bricks slices the list to N items per page and injects Prev / Next controls automatically. The current page is tracked in state as . Syntax โ€” show N items per page Works on any element with Controls only appear when the list has more than one page Demo โ€” Tasks (3 per page)","state":{"tasks":[{"title":"Design mockups","status":"done"},{"title":"Set up repo","status":"done"},{"title":"Parser prototype","status":"done"},{"title":"Token system","status":"done"},{"title":"Layout shell","status":"done"},{"title":"OmniBar","status":"done"},{"title":"Skills system","status":"done"},{"title":"Forms & validation","status":"in-progress"},{"title":"Charts","status":"in-progress"},{"title":"Pagination","status":"in-progress"},{"title":"Deploy skill","status":"todo"},{"title":"Multi-tenancy","status":"todo"}]},"template":{"html":"
\n
\n {task.title}\n {task.status}\n
\n
"},"actions":[],"styles":".pg-list {\n max-width: var(--width-2xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-0);\n}\n.pg-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--spacing-3) var(--spacing-4);\n border: 1px solid var(--border);\n border-bottom: none;\n background: var(--surface);\n}\n.pg-item:first-child { border-radius: var(--radius-default) var(--radius-default) var(--spacing-0) var(--spacing-0); }\n.pg-item:last-of-type { border-bottom: 1px solid var(--border); border-radius: var(--spacing-0) var(--spacing-0) var(--radius-default) var(--radius-default); }\n.pg-title {\n font-size: var(--font-size-sm);\n color: var(--text);\n}\n.pg-status {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n padding: var(--spacing-1) var(--spacing-2);\n border-radius: var(--radius-full);\n}\n.pg-status--done { background: var(--success); color: var(--text-inverse); }\n.pg-status--in-progress { background: var(--warning); color: var(--text-inverse); }\n.pg-status--todo { background: var(--surface-hover); color: var(--text-muted); border: 1px solid var(--border); }","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Pagination\nroute: /developer-tools/pagination\n---\n\n# Pagination\n\nPaginate any `each=` loop by adding `paginate=\"N\"` to the item element. Bricks slices the list to N items per page and injects Prev / Next controls automatically. The current page is tracked in state as `__pg_{listKey}`.\n\n## Syntax\n\n```\n
{task.title}
\n```\n\n- `paginate=\"N\"` โ€” show N items per page\n- Works on any element with `each=`\n- Controls only appear when the list has more than one page\n\n## Demo โ€” Tasks (3 per page)\n\n```state\n{\n \"tasks\": [\n { \"title\": \"Design mockups\", \"status\": \"done\" },\n { \"title\": \"Set up repo\", \"status\": \"done\" },\n { \"title\": \"Parser prototype\", \"status\": \"done\" },\n { \"title\": \"Token system\", \"status\": \"done\" },\n { \"title\": \"Layout shell\", \"status\": \"done\" },\n { \"title\": \"OmniBar\", \"status\": \"done\" },\n { \"title\": \"Skills system\", \"status\": \"done\" },\n { \"title\": \"Forms & validation\", \"status\": \"in-progress\"},\n { \"title\": \"Charts\", \"status\": \"in-progress\"},\n { \"title\": \"Pagination\", \"status\": \"in-progress\"},\n { \"title\": \"Deploy skill\", \"status\": \"todo\" },\n { \"title\": \"Multi-tenancy\", \"status\": \"todo\" }\n ]\n}\n```\n\n```template\n
\n
\n {task.title}\n {task.status}\n
\n
\n```\n\n```style\n.pg-list {\n max-width: var(--width-2xl);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-0);\n}\n.pg-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--spacing-3) var(--spacing-4);\n border: 1px solid var(--border);\n border-bottom: none;\n background: var(--surface);\n}\n.pg-item:first-child { border-radius: var(--radius-default) var(--radius-default) var(--spacing-0) var(--spacing-0); }\n.pg-item:last-of-type { border-bottom: 1px solid var(--border); border-radius: var(--spacing-0) var(--spacing-0) var(--radius-default) var(--radius-default); }\n.pg-title {\n font-size: var(--font-size-sm);\n color: var(--text);\n}\n.pg-status {\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n padding: var(--spacing-1) var(--spacing-2);\n border-radius: var(--radius-full);\n}\n.pg-status--done { background: var(--success); color: var(--text-inverse); }\n.pg-status--in-progress { background: var(--warning); color: var(--text-inverse); }\n.pg-status--todo { background: var(--surface-hover); color: var(--text-muted); border: 1px solid var(--border); }\n```\n"},{"title":"Plugin System","route":"/developer-tools/plugins","pageLayout":null,"contentHtml":"

Plugin System

\n

Share skills, themes, and components as packages with other Bricks apps.

\n

How Plugins Work

\n

A plugin is a directory inside plugins/ with a plugin.md manifest and optional skills/ and components/ subdirectories.

\n
plugins/\n  hello/\n    plugin.md       โ† manifest (name, version, author)\n    skills/\n      greet.md      โ† adds /greet skill\n    components/\n      highlight.md  โ† adds highlight component\n
\n

Plugin Manifest

\n

Each plugin needs a plugin.md with frontmatter:

\n
---\nname: hello\ndescription: Example plugin\nversion: 1.0.0\nauthor: Bricks Team\n---\n
\n

How Skills Merge

\n

Plugin skills become available in your app automatically. App-level skills override plugin skills when names match โ€” your code always wins.

\n

How Components Merge

\n

Plugin components can be used with @include() in any page. App-level components override plugin components by name.

\n

Example: hello Plugin

\n

The built-in hello plugin ships two items:

\n\n

Try it:

\n
\n โœฆ\n {text}\n
\n","searchText":"Plugin System Share skills, themes, and components as packages with other Bricks apps. How Plugins Work A plugin is a directory inside with a manifest and optional and subdirectories. Plugin Manifest Each plugin needs a with frontmatter: How Skills Merge Plugin skills become available in your app automatically. App-level skills override plugin skills when names match โ€” your code always wins. How Components Merge Plugin components can be used with in any page. App-level components override plugin components by name. The built-in plugin ships two items: greet skill โ€” type in the OmniBar to say hello highlight component โ€” use in any page Try it: @include(highlight text=\"Plugin components work!\")","state":{"text":"Plugin components work!"},"template":null,"actions":[],"styles":".bricks-highlight {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n padding: var(--spacing-3) var(--spacing-4);\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n color: var(--text);\n font-family: system-ui;\n}\n.bricks-highlight-icon {\n color: var(--accent);\n font-size: var(--font-size-base);\n}\n.bricks-highlight-text {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n}\n.bricks-highlight {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n padding: var(--spacing-3) var(--spacing-4);\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n color: var(--text);\n font-family: system-ui;\n}\n.bricks-highlight-icon {\n color: var(--accent);\n font-size: var(--font-size-base);\n}\n.bricks-highlight-text {\n font-size: var(--font-size-sm);\n color: var(--text-muted);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Plugin System\nroute: /developer-tools/plugins\n---\n\n# Plugin System\n\nShare skills, themes, and components as packages with other Bricks apps.\n\n## How Plugins Work\n\nA plugin is a directory inside `plugins/` with a `plugin.md` manifest and optional `skills/` and `components/` subdirectories.\n\n```\nplugins/\n hello/\n plugin.md โ† manifest (name, version, author)\n skills/\n greet.md โ† adds /greet skill\n components/\n highlight.md โ† adds highlight component\n```\n\n## Plugin Manifest\n\nEach plugin needs a `plugin.md` with frontmatter:\n\n```\n---\nname: hello\ndescription: Example plugin\nversion: 1.0.0\nauthor: Bricks Team\n---\n```\n\n## How Skills Merge\n\nPlugin skills become available in your app automatically. App-level skills override plugin skills when names match โ€” your code always wins.\n\n## How Components Merge\n\nPlugin components can be used with `@include()` in any page. App-level components override plugin components by name.\n\n## Example: hello Plugin\n\nThe built-in `hello` plugin ships two items:\n\n- **greet** skill โ€” type `/greet` in the OmniBar to say hello\n- **highlight** component โ€” use `@include(highlight)` in any page\n\nTry it:\n\n@include(highlight text=\"Plugin components work!\")\n"},{"title":"Profile","route":"/workshop/profile","pageLayout":null,"contentHtml":"","searchText":"","state":{"me":{},"initials":"","headshotSrc":"","headshotFile":null,"name":"","email":"","phone":"","mobile":"","saving":false,"saveLabel":"Save","passkeys":[],"passkeySupported":true,"passkeyMessage":"","profileMessage":"","editingPasskeyId":"","editingPasskeyLabel":""},"template":{"html":"
\n
\n

My Profile

\n

Keep your headshot and contact details current, and manage secure ways to sign in.

\n
\n\n
\n
\n
\n Headshot\n โ— Optional\n
\n
\n \"Selected\n {initials}\n
\n Add a photo of yourself\n

Shown next to your name around your workspace. WebP, PNG, JPG, or JPEG; square works best.

\n \n
\n
\n
\n\n
\n
\n Profile details\n All fields can be changed\n
\n\n
\n \n \n
\n\n
\n \n \n This is also the address you use to sign in.\n
\n\n
\n
\n \n \n Home or work landline (optional).\n
\n
\n \n \n Used for urgent texts and account contact (optional).\n
\n
\n\n
{profileMessage}
\n
\n Changes are saved to your account.\n \n
\n
\n
\n\n
\n
\n Passkeys\n
\n
Use a device passkey to sign in without a password. Passkeys count as phishing-resistant MFA.
\n\n
\n This browser does not support passkeys.\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
{passkeyMessage}
\n
\n
\n No passkeys enrolled yet.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
LabelLast usedActions
\n {passkey.label}\n \n {passkey.last_used_label}\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n
"},"actions":[{"name":"init","code":"const passkeySupported = Boolean(window.PublicKeyCredential && navigator.credentials);\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\n\nlet res;\ntry {\n res = await fetch(\"/api/auth/me\", { credentials: \"include\" });\n} catch {\n return state;\n}\nif (!res.ok) return state;\n\nconst me = await res.json();\nconst name = String(me.name || \"User\").trim();\nconst initials = name.split(/\\s+/).filter(Boolean).slice(0, 2).map(function(part) {\n return part.charAt(0).toUpperCase();\n}).join(\"\") || \"U\";\nlet passkeys = [];\nif (passkeySupported) {\n try {\n const passkeyRes = await fetch(\"/api/auth/passkeys\", { credentials: \"include\" });\n if (passkeyRes.ok) {\n const passkeyData = await passkeyRes.json();\n passkeys = normalizePasskeys(passkeyData.passkeys);\n }\n } catch {}\n}\nreturn Object.assign({}, state, {\n me,\n initials,\n headshotSrc: String(me.avatar_url || \"\"),\n name,\n email: String(me.email || \"\"),\n phone: String(me.phone || \"\"),\n mobile: String(me.mobile || \"\"),\n passkeys,\n passkeySupported\n});"},{"name":"loadPasskeys","code":"const normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\n\ntry {\n const res = await fetch(\"/api/auth/passkeys\", { credentials: \"include\" });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) {\n update({ passkeyMessage: data.error || \"Could not load passkeys.\" });\n return state;\n }\n const passkeys = normalizePasskeys(data.passkeys);\n update({ passkeys, passkeyMessage: \"\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"\" });\n} catch {\n update({ passkeyMessage: \"Could not load passkeys.\" });\n return state;\n}"},{"name":"addPasskey","code":"const base64UrlToBuffer = function(value) {\n const base64 = String(value).replace(/-/g, \"+\").replace(/_/g, \"/\");\n const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, \"=\");\n const binary = window.atob(padded);\n const bytes = new Uint8Array(binary.length);\n for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);\n return bytes.buffer;\n};\nconst bufferToBase64Url = function(buffer) {\n if (!buffer) return null;\n const bytes = new Uint8Array(buffer);\n let binary = \"\";\n for (const byte of bytes) binary += String.fromCharCode(byte);\n return window.btoa(binary).replace(/\\+/g, \"-\").replace(/\\//g, \"_\").replace(/=+$/g, \"\");\n};\nconst normalizeCreationOptions = function(options) {\n const publicKey = options.publicKey || options;\n return Object.assign({}, publicKey, {\n challenge: base64UrlToBuffer(publicKey.challenge),\n user: Object.assign({}, publicKey.user, { id: base64UrlToBuffer(publicKey.user.id) }),\n excludeCredentials: (publicKey.excludeCredentials || []).map(function(credential) {\n return Object.assign({}, credential, { id: base64UrlToBuffer(credential.id) });\n })\n });\n};\nconst registrationCredentialToJson = function(credential) {\n return {\n id: credential.id,\n rawId: bufferToBase64Url(credential.rawId),\n type: credential.type,\n response: {\n attestationObject: bufferToBase64Url(credential.response.attestationObject),\n clientDataJSON: bufferToBase64Url(credential.response.clientDataJSON),\n transports: typeof credential.response.getTransports === \"function\" ? credential.response.getTransports() : undefined\n },\n clientExtensionResults: credential.getClientExtensionResults()\n };\n};\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\n\nconst label = String(new FormData(event.target).get(\"label\") || \"Passkey\").trim() || \"Passkey\";\nif (!window.PublicKeyCredential || !navigator.credentials) {\n update({ passkeyMessage: \"This browser does not support passkeys.\" });\n return state;\n}\nupdate({ passkeyMessage: \"Waiting for your passkey...\" });\n\ntry {\n if (window.bricksPasskeyRegistrationAbort) {\n window.bricksPasskeyRegistrationAbort.abort();\n window.bricksPasskeyRegistrationAbort = null;\n await new Promise(function(resolve) { setTimeout(resolve, 50); });\n }\n const start = await fetch(\"/api/auth/passkeys/register/start\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ label })\n });\n const challenge = await start.json().catch(() => ({}));\n if (!start.ok) {\n update({ passkeyMessage: challenge.error || \"Could not start passkey registration.\" });\n return state;\n }\n const abortController = new AbortController();\n window.bricksPasskeyRegistrationAbort = abortController;\n let credential = null;\n try {\n credential = await navigator.credentials.create({\n publicKey: normalizeCreationOptions(challenge.options),\n signal: abortController.signal\n });\n } catch (err) {\n if (err && err.name === \"AbortError\") {\n update({ passkeyMessage: \"Passkey registration was cancelled.\" });\n return state;\n }\n throw err;\n } finally {\n if (window.bricksPasskeyRegistrationAbort === abortController) {\n window.bricksPasskeyRegistrationAbort = null;\n }\n }\n if (!credential) {\n update({ passkeyMessage: \"Passkey registration was cancelled.\" });\n return state;\n }\n const finish = await fetch(\"/api/auth/passkeys/register/finish\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n challenge_token: challenge.challenge_token,\n credential: registrationCredentialToJson(credential),\n label\n })\n });\n const data = await finish.json().catch(() => ({}));\n if (!finish.ok) {\n update({ passkeyMessage: data.error || \"Passkey registration failed.\" });\n return state;\n }\n event.target.reset();\n const listRes = await fetch(\"/api/auth/passkeys\", { credentials: \"include\" });\n const listData = await listRes.json().catch(() => ({}));\n const passkeys = normalizePasskeys(listData.passkeys);\n update({ passkeys, passkeyMessage: \"Passkey added.\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"Passkey added.\" });\n} catch {\n update({ passkeyMessage: \"Passkey registration failed.\" });\n return state;\n}"},{"name":"editPasskey","code":"const target = event.target.closest(\"[data-passkey-id]\");\nif (!target) return state;\nconst editingPasskeyId = target.dataset.passkeyId || \"\";\nconst match = (state.passkeys || []).find(function(item) {\n return item.id === editingPasskeyId;\n});\nconst editingPasskeyLabel = match ? String(match.label || \"\") : \"\";\nupdate({ editingPasskeyId, editingPasskeyLabel, passkeyMessage: \"\" });\nreturn Object.assign({}, state, { editingPasskeyId, editingPasskeyLabel, passkeyMessage: \"\" });"},{"name":"cancelPasskeyEdit","code":"update({ editingPasskeyId: \"\", editingPasskeyLabel: \"\", passkeyMessage: \"\" });\nreturn Object.assign({}, state, { editingPasskeyId: \"\", editingPasskeyLabel: \"\", passkeyMessage: \"\" });"},{"name":"savePasskey","code":"const normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\nconst target = event.target.closest(\"[data-passkey-id]\");\nconst id = target ? target.dataset.passkeyId : \"\";\nconst label = String(state.editingPasskeyLabel || \"\").trim();\nif (!id || !label) {\n update({ passkeyMessage: \"Passkey label is required.\" });\n return state;\n}\ntry {\n const res = await fetch(`/api/auth/passkeys/${id}`, {\n method: \"PUT\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ label })\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) {\n update({ passkeyMessage: data.error || \"Could not rename passkey.\" });\n return state;\n }\n const passkeys = normalizePasskeys((state.passkeys || []).map(function(item) {\n return item.id === id ? data : item;\n }));\n update({ passkeys, passkeyMessage: \"Passkey renamed.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"Passkey renamed.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n} catch {\n update({ passkeyMessage: \"Could not rename passkey.\" });\n return state;\n}"},{"name":"deletePasskey","code":"const normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\nconst target = event.target.closest(\"[data-passkey-id]\");\nconst id = target ? target.dataset.passkeyId : \"\";\nif (!id) return state;\nif (!window.confirm(\"Delete this passkey?\")) return state;\ntry {\n const res = await fetch(`/api/auth/passkeys/${id}`, {\n method: \"DELETE\",\n credentials: \"include\"\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) {\n update({ passkeyMessage: data.error || \"Could not remove passkey.\" });\n return state;\n }\n const passkeys = normalizePasskeys((state.passkeys || []).filter(function(item) {\n return item.id !== id;\n }));\n update({ passkeys, passkeyMessage: \"Passkey deleted.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"Passkey deleted.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n} catch {\n update({ passkeyMessage: \"Could not delete passkey.\" });\n return state;\n}"},{"name":"saveProfile","code":"event.preventDefault();\nif (state.saving) return state;\nconst form = event.target;\nconst name = String(state.name || \"\").trim();\nconst email = String(state.email || \"\").trim().toLowerCase();\nconst phone = String(state.phone || \"\").trim();\nconst mobile = String(state.mobile || \"\").trim();\nif (!name) {\n update({ profileMessage: \"Name is required.\" });\n return state;\n}\nif (!email || email.split(\"@\").length !== 2 || !email.split(\"@\")[0] || !email.split(\"@\")[1].includes(\".\")) {\n update({ profileMessage: \"Enter a valid email address.\" });\n return state;\n}\nconst validPhone = function(value) {\n if (!value) return true;\n const digits = value.replace(/\\D/g, \"\");\n return digits.length >= 7 && digits.length <= 15 && /^[0-9+(). -]+$/.test(value);\n};\nif (!validPhone(phone)) {\n update({ profileMessage: \"Enter a valid phone number.\" });\n return state;\n}\nif (!validPhone(mobile)) {\n update({ profileMessage: \"Enter a valid mobile number.\" });\n return state;\n}\n\nconst input = form.querySelector('input[name=\"headshot\"]');\nconst file = state.headshotFile || (input && input.files ? input.files[0] : null);\nif (file) {\n const allowedTypes = [\"image/webp\", \"image/png\", \"image/jpeg\"];\n const hasAllowedType = allowedTypes.includes(String(file.type || \"\").toLowerCase());\n const hasAllowedExtension = /\\.(webp|png|jpe?g)$/i.test(String(file.name || \"\"));\n if (!hasAllowedType && !(file.type === \"\" && hasAllowedExtension)) {\n update({ profileMessage: \"Choose a WebP, PNG, JPG, or JPEG image.\" });\n return state;\n }\n}\n\nconst savingState = Object.assign({}, state, { saving: true, saveLabel: \"Saving...\", profileMessage: \"\" });\nupdate(savingState);\n\ntry {\n const res = await fetch(\"/api/auth/me/profile\", {\n method: \"PUT\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, email, phone, mobile }),\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(data.error || \"Profile save failed.\");\n\n let avatarUrl = String(data.avatar_url || state.me.avatar_url || \"\");\n if (file) {\n const body = new FormData();\n body.append(\"file\", file);\n const uploadRes = await fetch(`/api/users/${state.me.id}/avatar`, {\n method: \"POST\",\n credentials: \"include\",\n body\n });\n const uploadData = await uploadRes.json().catch(function() { return {}; });\n if (!uploadRes.ok) throw new Error(uploadData.error || \"Headshot upload failed.\");\n avatarUrl = `${uploadData.avatar_url}?v=${Date.now()}`;\n }\n\n const me = Object.assign({}, state.me, data, { avatar_url: avatarUrl });\n try {\n const raw = sessionStorage.getItem(\"bricks.auth\");\n if (raw) {\n const session = JSON.parse(raw);\n const safe = {\n name: me.name,\n tenant_name: session.tenant_name || undefined,\n avatar_url: avatarUrl || session.avatar_url || undefined\n };\n sessionStorage.setItem(\"bricks.auth\", JSON.stringify(safe));\n }\n } catch {}\n window.dispatchEvent(new Event(\"bricks:auth-changed\"));\n if (input) input.value = \"\";\n const next = Object.assign({}, state, {\n me,\n initials: name.split(/\\s+/).filter(Boolean).slice(0, 2).map(function(part) { return part.charAt(0).toUpperCase(); }).join(\"\") || \"U\",\n headshotSrc: avatarUrl,\n headshotFile: null,\n name,\n email,\n phone,\n mobile,\n saving: false,\n saveLabel: \"Save\",\n profileMessage: \"Profile saved.\"\n });\n update(next);\n return next;\n} catch (error) {\n const next = Object.assign({}, state, {\n saving: false,\n saveLabel: \"Save\",\n profileMessage: error && error.message ? error.message : \"Profile save failed.\"\n });\n update(next);\n return next;\n}"}],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Profile\nroute: /workshop/profile\n---\n\n```state\n{ \"me\": {}, \"initials\": \"\", \"headshotSrc\": \"\", \"headshotFile\": null, \"name\": \"\", \"email\": \"\", \"phone\": \"\", \"mobile\": \"\", \"saving\": false, \"saveLabel\": \"Save\", \"passkeys\": [], \"passkeySupported\": true, \"passkeyMessage\": \"\", \"profileMessage\": \"\", \"editingPasskeyId\": \"\", \"editingPasskeyLabel\": \"\" }\n```\n\n```template\n
\n
\n

My Profile

\n

Keep your headshot and contact details current, and manage secure ways to sign in.

\n
\n\n
\n
\n
\n Headshot\n โ— Optional\n
\n
\n \"Selected\n {initials}\n
\n Add a photo of yourself\n

Shown next to your name around your workspace. WebP, PNG, JPG, or JPEG; square works best.

\n \n
\n
\n
\n\n
\n
\n Profile details\n All fields can be changed\n
\n\n
\n \n \n
\n\n
\n \n \n This is also the address you use to sign in.\n
\n\n
\n
\n \n \n Home or work landline (optional).\n
\n
\n \n \n Used for urgent texts and account contact (optional).\n
\n
\n\n
{profileMessage}
\n
\n Changes are saved to your account.\n \n
\n
\n
\n\n
\n
\n Passkeys\n
\n
Use a device passkey to sign in without a password. Passkeys count as phishing-resistant MFA.
\n\n
\n This browser does not support passkeys.\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
{passkeyMessage}
\n
\n
\n No passkeys enrolled yet.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
LabelLast usedActions
\n {passkey.label}\n \n {passkey.last_used_label}\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n
\n```\n\n```action:init\nconst passkeySupported = Boolean(window.PublicKeyCredential && navigator.credentials);\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\n\nlet res;\ntry {\n res = await fetch(\"/api/auth/me\", { credentials: \"include\" });\n} catch {\n return state;\n}\nif (!res.ok) return state;\n\nconst me = await res.json();\nconst name = String(me.name || \"User\").trim();\nconst initials = name.split(/\\s+/).filter(Boolean).slice(0, 2).map(function(part) {\n return part.charAt(0).toUpperCase();\n}).join(\"\") || \"U\";\nlet passkeys = [];\nif (passkeySupported) {\n try {\n const passkeyRes = await fetch(\"/api/auth/passkeys\", { credentials: \"include\" });\n if (passkeyRes.ok) {\n const passkeyData = await passkeyRes.json();\n passkeys = normalizePasskeys(passkeyData.passkeys);\n }\n } catch {}\n}\nreturn Object.assign({}, state, {\n me,\n initials,\n headshotSrc: String(me.avatar_url || \"\"),\n name,\n email: String(me.email || \"\"),\n phone: String(me.phone || \"\"),\n mobile: String(me.mobile || \"\"),\n passkeys,\n passkeySupported\n});\n```\n\n```action:loadPasskeys\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\n\ntry {\n const res = await fetch(\"/api/auth/passkeys\", { credentials: \"include\" });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) {\n update({ passkeyMessage: data.error || \"Could not load passkeys.\" });\n return state;\n }\n const passkeys = normalizePasskeys(data.passkeys);\n update({ passkeys, passkeyMessage: \"\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"\" });\n} catch {\n update({ passkeyMessage: \"Could not load passkeys.\" });\n return state;\n}\n```\n\n```action:addPasskey\nconst base64UrlToBuffer = function(value) {\n const base64 = String(value).replace(/-/g, \"+\").replace(/_/g, \"/\");\n const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, \"=\");\n const binary = window.atob(padded);\n const bytes = new Uint8Array(binary.length);\n for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);\n return bytes.buffer;\n};\nconst bufferToBase64Url = function(buffer) {\n if (!buffer) return null;\n const bytes = new Uint8Array(buffer);\n let binary = \"\";\n for (const byte of bytes) binary += String.fromCharCode(byte);\n return window.btoa(binary).replace(/\\+/g, \"-\").replace(/\\//g, \"_\").replace(/=+$/g, \"\");\n};\nconst normalizeCreationOptions = function(options) {\n const publicKey = options.publicKey || options;\n return Object.assign({}, publicKey, {\n challenge: base64UrlToBuffer(publicKey.challenge),\n user: Object.assign({}, publicKey.user, { id: base64UrlToBuffer(publicKey.user.id) }),\n excludeCredentials: (publicKey.excludeCredentials || []).map(function(credential) {\n return Object.assign({}, credential, { id: base64UrlToBuffer(credential.id) });\n })\n });\n};\nconst registrationCredentialToJson = function(credential) {\n return {\n id: credential.id,\n rawId: bufferToBase64Url(credential.rawId),\n type: credential.type,\n response: {\n attestationObject: bufferToBase64Url(credential.response.attestationObject),\n clientDataJSON: bufferToBase64Url(credential.response.clientDataJSON),\n transports: typeof credential.response.getTransports === \"function\" ? credential.response.getTransports() : undefined\n },\n clientExtensionResults: credential.getClientExtensionResults()\n };\n};\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\n\nconst label = String(new FormData(event.target).get(\"label\") || \"Passkey\").trim() || \"Passkey\";\nif (!window.PublicKeyCredential || !navigator.credentials) {\n update({ passkeyMessage: \"This browser does not support passkeys.\" });\n return state;\n}\nupdate({ passkeyMessage: \"Waiting for your passkey...\" });\n\ntry {\n if (window.bricksPasskeyRegistrationAbort) {\n window.bricksPasskeyRegistrationAbort.abort();\n window.bricksPasskeyRegistrationAbort = null;\n await new Promise(function(resolve) { setTimeout(resolve, 50); });\n }\n const start = await fetch(\"/api/auth/passkeys/register/start\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ label })\n });\n const challenge = await start.json().catch(() => ({}));\n if (!start.ok) {\n update({ passkeyMessage: challenge.error || \"Could not start passkey registration.\" });\n return state;\n }\n const abortController = new AbortController();\n window.bricksPasskeyRegistrationAbort = abortController;\n let credential = null;\n try {\n credential = await navigator.credentials.create({\n publicKey: normalizeCreationOptions(challenge.options),\n signal: abortController.signal\n });\n } catch (err) {\n if (err && err.name === \"AbortError\") {\n update({ passkeyMessage: \"Passkey registration was cancelled.\" });\n return state;\n }\n throw err;\n } finally {\n if (window.bricksPasskeyRegistrationAbort === abortController) {\n window.bricksPasskeyRegistrationAbort = null;\n }\n }\n if (!credential) {\n update({ passkeyMessage: \"Passkey registration was cancelled.\" });\n return state;\n }\n const finish = await fetch(\"/api/auth/passkeys/register/finish\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n challenge_token: challenge.challenge_token,\n credential: registrationCredentialToJson(credential),\n label\n })\n });\n const data = await finish.json().catch(() => ({}));\n if (!finish.ok) {\n update({ passkeyMessage: data.error || \"Passkey registration failed.\" });\n return state;\n }\n event.target.reset();\n const listRes = await fetch(\"/api/auth/passkeys\", { credentials: \"include\" });\n const listData = await listRes.json().catch(() => ({}));\n const passkeys = normalizePasskeys(listData.passkeys);\n update({ passkeys, passkeyMessage: \"Passkey added.\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"Passkey added.\" });\n} catch {\n update({ passkeyMessage: \"Passkey registration failed.\" });\n return state;\n}\n```\n\n```action:editPasskey\nconst target = event.target.closest(\"[data-passkey-id]\");\nif (!target) return state;\nconst editingPasskeyId = target.dataset.passkeyId || \"\";\nconst match = (state.passkeys || []).find(function(item) {\n return item.id === editingPasskeyId;\n});\nconst editingPasskeyLabel = match ? String(match.label || \"\") : \"\";\nupdate({ editingPasskeyId, editingPasskeyLabel, passkeyMessage: \"\" });\nreturn Object.assign({}, state, { editingPasskeyId, editingPasskeyLabel, passkeyMessage: \"\" });\n```\n\n```action:cancelPasskeyEdit\nupdate({ editingPasskeyId: \"\", editingPasskeyLabel: \"\", passkeyMessage: \"\" });\nreturn Object.assign({}, state, { editingPasskeyId: \"\", editingPasskeyLabel: \"\", passkeyMessage: \"\" });\n```\n\n```action:savePasskey\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\nconst target = event.target.closest(\"[data-passkey-id]\");\nconst id = target ? target.dataset.passkeyId : \"\";\nconst label = String(state.editingPasskeyLabel || \"\").trim();\nif (!id || !label) {\n update({ passkeyMessage: \"Passkey label is required.\" });\n return state;\n}\ntry {\n const res = await fetch(`/api/auth/passkeys/${id}`, {\n method: \"PUT\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ label })\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) {\n update({ passkeyMessage: data.error || \"Could not rename passkey.\" });\n return state;\n }\n const passkeys = normalizePasskeys((state.passkeys || []).map(function(item) {\n return item.id === id ? data : item;\n }));\n update({ passkeys, passkeyMessage: \"Passkey renamed.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"Passkey renamed.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n} catch {\n update({ passkeyMessage: \"Could not rename passkey.\" });\n return state;\n}\n```\n\n```action:deletePasskey\nconst normalizePasskeys = function(items) {\n return (Array.isArray(items) ? items : []).map(function(item) {\n const lastUsed = item.last_used_at ? new Date(item.last_used_at) : null;\n return Object.assign({}, item, {\n last_used_label: lastUsed ? lastUsed.toLocaleString() : \"Never\"\n });\n });\n};\nconst target = event.target.closest(\"[data-passkey-id]\");\nconst id = target ? target.dataset.passkeyId : \"\";\nif (!id) return state;\nif (!window.confirm(\"Delete this passkey?\")) return state;\ntry {\n const res = await fetch(`/api/auth/passkeys/${id}`, {\n method: \"DELETE\",\n credentials: \"include\"\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) {\n update({ passkeyMessage: data.error || \"Could not remove passkey.\" });\n return state;\n }\n const passkeys = normalizePasskeys((state.passkeys || []).filter(function(item) {\n return item.id !== id;\n }));\n update({ passkeys, passkeyMessage: \"Passkey deleted.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n return Object.assign({}, state, { passkeys, passkeyMessage: \"Passkey deleted.\", editingPasskeyId: \"\", editingPasskeyLabel: \"\" });\n} catch {\n update({ passkeyMessage: \"Could not delete passkey.\" });\n return state;\n}\n```\n\n```action:saveProfile\nevent.preventDefault();\nif (state.saving) return state;\nconst form = event.target;\nconst name = String(state.name || \"\").trim();\nconst email = String(state.email || \"\").trim().toLowerCase();\nconst phone = String(state.phone || \"\").trim();\nconst mobile = String(state.mobile || \"\").trim();\nif (!name) {\n update({ profileMessage: \"Name is required.\" });\n return state;\n}\nif (!email || email.split(\"@\").length !== 2 || !email.split(\"@\")[0] || !email.split(\"@\")[1].includes(\".\")) {\n update({ profileMessage: \"Enter a valid email address.\" });\n return state;\n}\nconst validPhone = function(value) {\n if (!value) return true;\n const digits = value.replace(/\\D/g, \"\");\n return digits.length >= 7 && digits.length <= 15 && /^[0-9+(). -]+$/.test(value);\n};\nif (!validPhone(phone)) {\n update({ profileMessage: \"Enter a valid phone number.\" });\n return state;\n}\nif (!validPhone(mobile)) {\n update({ profileMessage: \"Enter a valid mobile number.\" });\n return state;\n}\n\nconst input = form.querySelector('input[name=\"headshot\"]');\nconst file = state.headshotFile || (input && input.files ? input.files[0] : null);\nif (file) {\n const allowedTypes = [\"image/webp\", \"image/png\", \"image/jpeg\"];\n const hasAllowedType = allowedTypes.includes(String(file.type || \"\").toLowerCase());\n const hasAllowedExtension = /\\.(webp|png|jpe?g)$/i.test(String(file.name || \"\"));\n if (!hasAllowedType && !(file.type === \"\" && hasAllowedExtension)) {\n update({ profileMessage: \"Choose a WebP, PNG, JPG, or JPEG image.\" });\n return state;\n }\n}\n\nconst savingState = Object.assign({}, state, { saving: true, saveLabel: \"Saving...\", profileMessage: \"\" });\nupdate(savingState);\n\ntry {\n const res = await fetch(\"/api/auth/me/profile\", {\n method: \"PUT\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, email, phone, mobile }),\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(data.error || \"Profile save failed.\");\n\n let avatarUrl = String(data.avatar_url || state.me.avatar_url || \"\");\n if (file) {\n const body = new FormData();\n body.append(\"file\", file);\n const uploadRes = await fetch(`/api/users/${state.me.id}/avatar`, {\n method: \"POST\",\n credentials: \"include\",\n body\n });\n const uploadData = await uploadRes.json().catch(function() { return {}; });\n if (!uploadRes.ok) throw new Error(uploadData.error || \"Headshot upload failed.\");\n avatarUrl = `${uploadData.avatar_url}?v=${Date.now()}`;\n }\n\n const me = Object.assign({}, state.me, data, { avatar_url: avatarUrl });\n try {\n const raw = sessionStorage.getItem(\"bricks.auth\");\n if (raw) {\n const session = JSON.parse(raw);\n const safe = {\n name: me.name,\n tenant_name: session.tenant_name || undefined,\n avatar_url: avatarUrl || session.avatar_url || undefined\n };\n sessionStorage.setItem(\"bricks.auth\", JSON.stringify(safe));\n }\n } catch {}\n window.dispatchEvent(new Event(\"bricks:auth-changed\"));\n if (input) input.value = \"\";\n const next = Object.assign({}, state, {\n me,\n initials: name.split(/\\s+/).filter(Boolean).slice(0, 2).map(function(part) { return part.charAt(0).toUpperCase(); }).join(\"\") || \"U\",\n headshotSrc: avatarUrl,\n headshotFile: null,\n name,\n email,\n phone,\n mobile,\n saving: false,\n saveLabel: \"Save\",\n profileMessage: \"Profile saved.\"\n });\n update(next);\n return next;\n} catch (error) {\n const next = Object.assign({}, state, {\n saving: false,\n saveLabel: \"Save\",\n profileMessage: error && error.message ? error.message : \"Profile save failed.\"\n });\n update(next);\n return next;\n}\n```\n"},{"title":"Progress Bars","route":"/developer-tools/progress","pageLayout":null,"contentHtml":"

Progress Bars

\n

Display progress toward goals using progress fenced blocks. Each bar shows a label, percentage, and optional color variant.

\n

Project Milestones

\n
Design System95%
Frontend Development78%
Backend API62%
QA & Testing40%
Documentation25%
\n

Resource Usage

\n
CPU34%
Memory71%
Disk88%
Network12%
\n

Syntax

\n
bar: Label\nvalue: 75\ncolor: accent\n
\n\n","searchText":"Progress Bars Display progress toward goals using fenced blocks. Each bar shows a label, percentage, and optional color variant. Project Milestones Resource Usage Syntax โ€” starts a new bar (required); sets the label โ€” numeric fill 0โ€“100 (default: 0) โ€” optional variant: (default), , ,","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[{"bars":[{"label":"Design System","value":95,"color":"success"},{"label":"Frontend Development","value":78,"color":"accent"},{"label":"Backend API","value":62,"color":"accent"},{"label":"QA & Testing","value":40,"color":"warning"},{"label":"Documentation","value":25,"color":"danger"}]},{"bars":[{"label":"CPU","value":34,"color":"success"},{"label":"Memory","value":71,"color":"warning"},{"label":"Disk","value":88,"color":"danger"},{"label":"Network","value":12,"color":"accent"}]}],"raw":"---\ntitle: Progress Bars\nroute: /developer-tools/progress\n---\n\n# Progress Bars\n\nDisplay progress toward goals using `progress` fenced blocks. Each bar shows a label, percentage, and optional color variant.\n\n## Project Milestones\n\n```progress\nbar: Design System\nvalue: 95\ncolor: success\n\nbar: Frontend Development\nvalue: 78\ncolor: accent\n\nbar: Backend API\nvalue: 62\ncolor: accent\n\nbar: QA & Testing\nvalue: 40\ncolor: warning\n\nbar: Documentation\nvalue: 25\ncolor: danger\n```\n\n## Resource Usage\n\n```progress\nbar: CPU\nvalue: 34\ncolor: success\n\nbar: Memory\nvalue: 71\ncolor: warning\n\nbar: Disk\nvalue: 88\ncolor: danger\n\nbar: Network\nvalue: 12\ncolor: accent\n```\n\n## Syntax\n\n```\nbar: Label\nvalue: 75\ncolor: accent\n```\n\n- `bar:` โ€” starts a new bar (required); sets the label\n- `value:` โ€” numeric fill 0โ€“100 (default: 0)\n- `color:` โ€” optional variant: `accent` (default), `success`, `warning`, `danger`\n"},{"title":"PWA Manifest","route":"/developer-tools/pwa","pageLayout":null,"contentHtml":"

PWA Manifest

\n

Bricks apps are installable on phones and desktops via the Web App Manifest standard.

\n

Setup

\n

Add a pwa.md file to your project root:

\n
---\nname: My App\nshort_name: App\ndescription: What my app does\ntheme_color: \"#6366f1\"\nbackground_color: \"#f8f8f8\"\ndisplay: standalone\nstart_url: \"/\"\n---\n
\n

That's it. Bricks generates manifest.json, SVG icons, and injects the manifest link into your HTML automatically.

\n

What gets generated

\n

| File | Description |\n|------|-------------|\n| manifest.json | Web App Manifest with all fields |\n| icon-192.svg | 192ร—192 icon โ€” auto-generated from your app name |\n| icon-512.svg | 512ร—512 icon โ€” auto-generated from your app name |

\n

Display modes

\n

| Value | Description |\n|-------|-------------|\n| standalone | Looks like a native app, no browser UI |\n| fullscreen | Full screen, no status bar |\n| minimal-ui | Minimal browser UI (back/forward) |\n| browser | Opens in regular browser tab |

\n

Offline support

\n

Bricks automatically generates a service worker (sw.js) that caches your app as users visit pages. When offline, cached pages load instantly from the local cache.

\n

See the Offline Support page for details.

\n

Installing

\n

After adding pwa.md, your app can be installed:

\n\n","searchText":"PWA Manifest Bricks apps are installable on phones and desktops via the Web App Manifest standard. Setup Add a file to your project root: That's it. Bricks generates , SVG icons, and injects the manifest link into your HTML automatically. What gets generated | File | Description | |------|-------------| | | Web App Manifest with all fields | | | 192ร—192 icon โ€” auto-generated from your app name | | | 512ร—512 icon โ€” auto-generated from your app name | Display modes | Value | Description | |-------|-------------| | | Looks like a native app, no browser UI | | | Full screen, no status bar | | | Minimal browser UI (back/forward) | | | Opens in regular browser tab | Offline support Bricks automatically generates a service worker ( ) that caches your app as users visit pages. When offline, cached pages load instantly from the local cache. See the Offline Support page for details. Installing After adding , your app can be installed: Chrome / Edge โ€” install button in the address bar Safari (iOS) โ€” Share โ†’ Add to Home Screen Android โ€” Add to Home Screen prompt or browser menu","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: PWA Manifest\nroute: /developer-tools/pwa\n---\n\n# PWA Manifest\n\nBricks apps are installable on phones and desktops via the [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) standard.\n\n## Setup\n\nAdd a `pwa.md` file to your project root:\n\n```yaml\n---\nname: My App\nshort_name: App\ndescription: What my app does\ntheme_color: \"#6366f1\"\nbackground_color: \"#f8f8f8\"\ndisplay: standalone\nstart_url: \"/\"\n---\n```\n\nThat's it. Bricks generates `manifest.json`, SVG icons, and injects the manifest link into your HTML automatically.\n\n## What gets generated\n\n| File | Description |\n|------|-------------|\n| `manifest.json` | Web App Manifest with all fields |\n| `icon-192.svg` | 192ร—192 icon โ€” auto-generated from your app name |\n| `icon-512.svg` | 512ร—512 icon โ€” auto-generated from your app name |\n\n## Display modes\n\n| Value | Description |\n|-------|-------------|\n| `standalone` | Looks like a native app, no browser UI |\n| `fullscreen` | Full screen, no status bar |\n| `minimal-ui` | Minimal browser UI (back/forward) |\n| `browser` | Opens in regular browser tab |\n\n## Offline support\n\nBricks automatically generates a **service worker** (`sw.js`) that caches your app as users visit pages. When offline, cached pages load instantly from the local cache.\n\nSee the [Offline Support](/offline) page for details.\n\n## Installing\n\nAfter adding `pwa.md`, your app can be installed:\n\n- **Chrome / Edge** โ€” install button in the address bar\n- **Safari (iOS)** โ€” Share โ†’ Add to Home Screen\n- **Android** โ€” Add to Home Screen prompt or browser menu\n"},{"title":"Register","route":"/register","pageLayout":"fullscreen","contentHtml":"

Create Account

\n","searchText":"Create Account","state":{"name":"","email":"","password":"","tenantName":"","subdomain":"","error":"","loading":false,"turnstileRequired":false,"turnstileSiteKey":"","turnstileMessage":""},"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿš€ Create your account
\n

Set up your workspace in seconds

\n\n
{error}
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Auto-generated from workspace name if left empty\n
\n
\n
\n {turnstileMessage}\n
\n \n
\n\n

\n Already have an account? Sign in\n

\n
\n
\n\n
"},"actions":[{"name":"init","code":"window.bricksAuthTurnstileToken = \"\";\nwindow.bricksRenderAuthTurnstile = function(siteKey) {\n var target = document.getElementById(\"auth-turnstile\");\n if (!target || !siteKey) return;\n target.innerHTML = \"\";\n var render = function() {\n if (!window.turnstile) return;\n window.turnstile.render(target, {\n sitekey: siteKey,\n callback: function(token) { window.bricksAuthTurnstileToken = token || \"\"; },\n \"expired-callback\": function() { window.bricksAuthTurnstileToken = \"\"; },\n \"error-callback\": function() { window.bricksAuthTurnstileToken = \"\"; }\n });\n };\n if (window.turnstile) {\n render();\n return;\n }\n var existing = document.querySelector(\"script[data-bricks-auth-turnstile='true']\");\n if (!existing) {\n existing = document.createElement(\"script\");\n existing.src = \"https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit\";\n existing.async = true;\n existing.defer = true;\n existing.dataset.bricksAuthTurnstile = \"true\";\n document.head.appendChild(existing);\n }\n existing.addEventListener(\"load\", render, { once: true });\n};\nvar params = new URLSearchParams(window.location.search);\nvar oauthError = params.get(\"oauth_error\");\nif (oauthError) return Object.assign({}, state, { error: oauthError });\nreturn state;"},{"name":"register","code":"var slug = state.subdomain || (state.tenantName || state.name).trim().toLowerCase().replace(/[^a-z0-9]+/g, \"-\").replace(/^-|-$/g, \"\");\ntry {\n var res = await fetch(\"/api/auth/register\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n name: state.name,\n email: state.email,\n password: state.password,\n tenant_name: state.tenantName || state.name,\n subdomain: slug,\n turnstile_token: window.bricksAuthTurnstileToken || null\n }),\n credentials: \"include\"\n });\n var data = await res.json();\n if (res.ok) {\n var session = { name: data.user.name, tenant_name: data.user.tenant_name || undefined, avatar_url: data.user.avatar_url || undefined };\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session)); } catch(e) {}\n if (data.tenant && data.tenant.slug) {\n var port = window.location.port ? \":\" + window.location.port : \"\";\n var tenantUrl = window.location.protocol + \"//\" + data.tenant.slug + \".localhost\" + port;\n // Redirect to tenant login with autologin flag โ€” the login page\n // will auto-submit using the provided credentials\n window.location.href = tenantUrl + \"/login?email=\" + encodeURIComponent(state.email) + \"&autologin=\" + encodeURIComponent(state.password);\n } else {\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n }\n return { name: \"\", email: \"\", password: \"\", tenantName: \"\", subdomain: \"\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" };\n }\n if (res.status === 429) {\n var needsTurnstile = !!(data.turnstile_required && data.turnstile_site_key);\n window.bricksAuthTurnstileToken = \"\";\n if (needsTurnstile) {\n setTimeout(function() {\n if (window.bricksRenderAuthTurnstile) window.bricksRenderAuthTurnstile(data.turnstile_site_key);\n }, 50);\n }\n return Object.assign({}, state, {\n error: data.error || \"Too many attempts. Please wait before trying again.\",\n loading: false,\n turnstileRequired: needsTurnstile,\n turnstileSiteKey: data.turnstile_site_key || \"\",\n turnstileMessage: needsTurnstile ? \"Complete this check, then press Create Account again.\" : \"\"\n });\n }\n return Object.assign({}, state, { error: data.error || \"Registration failed\", loading: false });\n} catch(e) {\n return Object.assign({}, state, { error: \"Server error. Please try again.\", loading: false });\n}"}],"styles":"h1 { display: none; }\n.bricks-auth-hint {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n margin-top: var(--spacing-1);\n}\n.bricks-auth-turnstile {\n display: grid;\n gap: var(--spacing-2);\n margin-bottom: var(--spacing-4);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Register\nroute: /register\nlayout: fullscreen\n---\n\n# Create Account\n\n```state\n{ \"name\": \"\", \"email\": \"\", \"password\": \"\", \"tenantName\": \"\", \"subdomain\": \"\", \"error\": \"\", \"loading\": false, \"turnstileRequired\": false, \"turnstileSiteKey\": \"\", \"turnstileMessage\": \"\" }\n```\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
๐Ÿš€ Create your account
\n

Set up your workspace in seconds

\n\n
{error}
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Auto-generated from workspace name if left empty\n
\n
\n
\n {turnstileMessage}\n
\n \n
\n\n

\n Already have an account? Sign in\n

\n
\n
\n\n
\n```\n\n```action:init\nwindow.bricksAuthTurnstileToken = \"\";\nwindow.bricksRenderAuthTurnstile = function(siteKey) {\n var target = document.getElementById(\"auth-turnstile\");\n if (!target || !siteKey) return;\n target.innerHTML = \"\";\n var render = function() {\n if (!window.turnstile) return;\n window.turnstile.render(target, {\n sitekey: siteKey,\n callback: function(token) { window.bricksAuthTurnstileToken = token || \"\"; },\n \"expired-callback\": function() { window.bricksAuthTurnstileToken = \"\"; },\n \"error-callback\": function() { window.bricksAuthTurnstileToken = \"\"; }\n });\n };\n if (window.turnstile) {\n render();\n return;\n }\n var existing = document.querySelector(\"script[data-bricks-auth-turnstile='true']\");\n if (!existing) {\n existing = document.createElement(\"script\");\n existing.src = \"https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit\";\n existing.async = true;\n existing.defer = true;\n existing.dataset.bricksAuthTurnstile = \"true\";\n document.head.appendChild(existing);\n }\n existing.addEventListener(\"load\", render, { once: true });\n};\nvar params = new URLSearchParams(window.location.search);\nvar oauthError = params.get(\"oauth_error\");\nif (oauthError) return Object.assign({}, state, { error: oauthError });\nreturn state;\n```\n\n```action:register\nvar slug = state.subdomain || (state.tenantName || state.name).trim().toLowerCase().replace(/[^a-z0-9]+/g, \"-\").replace(/^-|-$/g, \"\");\ntry {\n var res = await fetch(\"/api/auth/register\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n name: state.name,\n email: state.email,\n password: state.password,\n tenant_name: state.tenantName || state.name,\n subdomain: slug,\n turnstile_token: window.bricksAuthTurnstileToken || null\n }),\n credentials: \"include\"\n });\n var data = await res.json();\n if (res.ok) {\n var session = { name: data.user.name, tenant_name: data.user.tenant_name || undefined, avatar_url: data.user.avatar_url || undefined };\n try { sessionStorage.setItem(\"bricks.auth\", JSON.stringify(session)); } catch(e) {}\n if (data.tenant && data.tenant.slug) {\n var port = window.location.port ? \":\" + window.location.port : \"\";\n var tenantUrl = window.location.protocol + \"//\" + data.tenant.slug + \".localhost\" + port;\n // Redirect to tenant login with autologin flag โ€” the login page\n // will auto-submit using the provided credentials\n window.location.href = tenantUrl + \"/login?email=\" + encodeURIComponent(state.email) + \"&autologin=\" + encodeURIComponent(state.password);\n } else {\n setTimeout(function() { window.dispatchEvent(new CustomEvent(\"bricks:navigate\", { detail: \"/workshop\" })); }, 50);\n }\n return { name: \"\", email: \"\", password: \"\", tenantName: \"\", subdomain: \"\", error: \"\", loading: false, turnstileRequired: false, turnstileSiteKey: \"\", turnstileMessage: \"\" };\n }\n if (res.status === 429) {\n var needsTurnstile = !!(data.turnstile_required && data.turnstile_site_key);\n window.bricksAuthTurnstileToken = \"\";\n if (needsTurnstile) {\n setTimeout(function() {\n if (window.bricksRenderAuthTurnstile) window.bricksRenderAuthTurnstile(data.turnstile_site_key);\n }, 50);\n }\n return Object.assign({}, state, {\n error: data.error || \"Too many attempts. Please wait before trying again.\",\n loading: false,\n turnstileRequired: needsTurnstile,\n turnstileSiteKey: data.turnstile_site_key || \"\",\n turnstileMessage: needsTurnstile ? \"Complete this check, then press Create Account again.\" : \"\"\n });\n }\n return Object.assign({}, state, { error: data.error || \"Registration failed\", loading: false });\n} catch(e) {\n return Object.assign({}, state, { error: \"Server error. Please try again.\", loading: false });\n}\n```\n\n```style\nh1 { display: none; }\n.bricks-auth-hint {\n font-size: var(--font-size-xs);\n color: var(--text-muted);\n margin-top: var(--spacing-1);\n}\n.bricks-auth-turnstile {\n display: grid;\n gap: var(--spacing-2);\n margin-bottom: var(--spacing-4);\n}\n```\n"},{"title":"Reset Password","route":"/reset-password","pageLayout":"fullscreen","contentHtml":"

Reset Password

\n","searchText":"Reset Password","state":{"currentPassword":"","password":"","confirmPassword":"","required":false,"done":false,"error":"","loading":false},"template":{"html":"
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
Set new password
\n

Choose a strong password for your account

\n

Your account requires a new password before you continue.

\n\n
{error}
\n\n
\n

Your password has been updated successfully.

\n Sign in with new password\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n\n

\n Back to sign in\n

\n
\n
\n\n
"},"actions":[{"name":"init","code":"var params = new URLSearchParams(window.location.search);\nreturn { required: params.get(\"required\") === \"1\" || params.get(\"required\") === \"true\" };"},{"name":"resetPassword","code":"if (state.password !== state.confirmPassword) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: state.required, done: false, error: \"Passwords do not match\", loading: false };\n}\nif (state.password.length < 8) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: state.required, done: false, error: \"Password must be at least 8 characters\", loading: false };\n}\nvar params = new URLSearchParams(window.location.search);\nvar token = params.get(\"token\");\nvar required = state.required || params.get(\"required\") === \"1\" || params.get(\"required\") === \"true\";\nif (required && !state.currentPassword) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: \"Enter your current password.\", loading: false };\n}\nif (!required && !token) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: \"Missing reset token. Please use the link from your email.\", loading: false };\n}\ntry {\n var readCookie = function(name) {\n var prefix = name + \"=\";\n var match = document.cookie.split(\";\").map(function(part) { return part.trim(); }).find(function(part) { return part.indexOf(prefix) === 0; });\n return match ? decodeURIComponent(match.slice(prefix.length)) : \"\";\n };\n var headers = { \"Content-Type\": \"application/json\" };\n var csrf = readCookie(\"bricks_csrf\");\n if (csrf) headers[\"X-CSRF-Token\"] = csrf;\n var res = await fetch(required ? \"/api/auth/change-password\" : \"/api/auth/reset-password\", {\n method: \"POST\",\n headers: headers,\n body: JSON.stringify(required\n ? { current_password: state.currentPassword, password: state.password }\n : { token: token, password: state.password }),\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (res.ok) {\n try {\n sessionStorage.removeItem(\"bricks.auth\");\n sessionStorage.removeItem(\"dream.auth\");\n } catch(e) {}\n return { currentPassword: \"\", password: \"\", confirmPassword: \"\", required: required, done: true, error: \"\", loading: false };\n }\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: data.error || \"Reset failed\", loading: false };\n} catch(e) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: \"Server error. Please try again.\", loading: false };\n}"}],"styles":".bricks-auth-success {\n text-align: center;\n color: var(--text);\n font-size: var(--font-size-sm);\n}\n.bricks-auth-btn--link {\n display: inline-block;\n text-decoration: none;\n text-align: center;\n margin-top: var(--spacing-3);\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Reset Password\nroute: /reset-password\nlayout: fullscreen\n---\n\n# Reset Password\n\n```state\n{ \"currentPassword\": \"\", \"password\": \"\", \"confirmPassword\": \"\", \"required\": false, \"done\": false, \"error\": \"\", \"loading\": false }\n```\n\n```template\n
\n\n
\n
\n
\n
\n 
โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•—  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•    โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ• โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•— โ•šโ•โ•โ•โ•โ–ˆโ–ˆโ•‘    โ–ˆโ–ˆโ•‘     โ–ˆโ–ˆโ•‘   โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘  โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘    โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•šโ•โ•  โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ•     โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•
\n
\n

Build something extraordinary

\n
\n โšก Lightning fast setup\n ๐Ÿ”’ Enterprise security\n ๐ŸŽจ Beautiful by default\n
\n
\n
\n\n
\n
\n
Set new password
\n

Choose a strong password for your account

\n

Your account requires a new password before you continue.

\n\n
{error}
\n\n
\n

Your password has been updated successfully.

\n Sign in with new password\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n\n

\n Back to sign in\n

\n
\n
\n\n
\n```\n\n```action:init\nvar params = new URLSearchParams(window.location.search);\nreturn { required: params.get(\"required\") === \"1\" || params.get(\"required\") === \"true\" };\n```\n\n```action:resetPassword\nif (state.password !== state.confirmPassword) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: state.required, done: false, error: \"Passwords do not match\", loading: false };\n}\nif (state.password.length < 8) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: state.required, done: false, error: \"Password must be at least 8 characters\", loading: false };\n}\nvar params = new URLSearchParams(window.location.search);\nvar token = params.get(\"token\");\nvar required = state.required || params.get(\"required\") === \"1\" || params.get(\"required\") === \"true\";\nif (required && !state.currentPassword) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: \"Enter your current password.\", loading: false };\n}\nif (!required && !token) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: \"Missing reset token. Please use the link from your email.\", loading: false };\n}\ntry {\n var readCookie = function(name) {\n var prefix = name + \"=\";\n var match = document.cookie.split(\";\").map(function(part) { return part.trim(); }).find(function(part) { return part.indexOf(prefix) === 0; });\n return match ? decodeURIComponent(match.slice(prefix.length)) : \"\";\n };\n var headers = { \"Content-Type\": \"application/json\" };\n var csrf = readCookie(\"bricks_csrf\");\n if (csrf) headers[\"X-CSRF-Token\"] = csrf;\n var res = await fetch(required ? \"/api/auth/change-password\" : \"/api/auth/reset-password\", {\n method: \"POST\",\n headers: headers,\n body: JSON.stringify(required\n ? { current_password: state.currentPassword, password: state.password }\n : { token: token, password: state.password }),\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (res.ok) {\n try {\n sessionStorage.removeItem(\"bricks.auth\");\n sessionStorage.removeItem(\"dream.auth\");\n } catch(e) {}\n return { currentPassword: \"\", password: \"\", confirmPassword: \"\", required: required, done: true, error: \"\", loading: false };\n }\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: data.error || \"Reset failed\", loading: false };\n} catch(e) {\n return { currentPassword: state.currentPassword, password: state.password, confirmPassword: state.confirmPassword, required: required, done: false, error: \"Server error. Please try again.\", loading: false };\n}\n```\n\n```style\n.bricks-auth-success {\n text-align: center;\n color: var(--text);\n font-size: var(--font-size-sm);\n}\n.bricks-auth-btn--link {\n display: inline-block;\n text-decoration: none;\n text-align: center;\n margin-top: var(--spacing-3);\n}\n```\n"},{"title":"Roles & Access","route":"/developer-tools/roles","pageLayout":null,"contentHtml":"

Roles & Access Control

\n

Role-based access control for Bricks. Define which routes and skills each role can access, then use View As to preview the app through any role's eyes โ€” without leaving your session.

\n

How It Works

\n

Define roles in roles.md at your project root:

\n
---\nenabled: true\n---\n\n\\`\\`\\`roles\n{\n  \"superuser\": { \"access\": \"all\", \"skills\": \"all\" },\n  \"admin\": {\n    \"access\": [\"/\", \"/settings\", \"/design\"],\n    \"skills\": [\"dark\", \"light\", \"deploy\"]\n  },\n  \"viewer\": {\n    \"access\": [\"/\"],\n    \"skills\": []\n  }\n}\n\\`\\`\\`\n
\n

Role Properties

\n

| Property | Type | Description |\n|----------|------|-------------|\n| access | string[] \\| \"all\" | Routes this role can visit |\n| deny | string[] | Routes to explicitly block (overrides access) |\n| skills | string[] \\| \"all\" | Skills this role can run |

\n

View As Mode

\n

When roles.md is enabled, a View As selector appears in the top bar. Use it to switch to any role and see exactly how the nav filters โ€” no real permissions change, it's purely a preview.

\n

This is useful for:

\n\n

Integration with Auth

\n

Roles here correspond to the role field on users in auth.md. When a user logs in, their role controls what they can access. The \"View As\" selector is a dev tool that previews access without authentication โ€” it only affects the nav and is session-scoped.

\n

Live Demo

\n

The roles configured in this project are:

\n

| Role | Access | Skills |\n|------|--------|--------|\n| superuser | All routes | All skills |\n| admin | Design, themes, settings | Theme + deploy skills |\n| editor | Home + design | Theme switching |\n| viewer | Home only | None |

\n

Switch roles using the ๐Ÿ‘ View As button in the top bar to see the nav filter in real time.

\n","searchText":"Roles & Access Control Role-based access control for Bricks. Define which routes and skills each role can access, then use View As to preview the app through any role's eyes โ€” without leaving your session. How It Works Define roles in at your project root: Role Properties | Property | Type | Description | |----------|------|-------------| | | | Routes this role can visit | | | | Routes to explicitly block (overrides ) | | | | Skills this role can run | View As Mode When is enabled, a View As selector appears in the top bar. Use it to switch to any role and see exactly how the nav filters โ€” no real permissions change, it's purely a preview. This is useful for: Checking that editors can't see admin-only pages Reviewing the experience for new users (viewer role) Demoing the app to stakeholders in a limited role Integration with Auth Roles here correspond to the field on users in . When a user logs in, their role controls what they can access. The \"View As\" selector is a dev tool that previews access without authentication โ€” it only affects the nav and is session-scoped. Live Demo The roles configured in this project are: | Role | Access | Skills | |------|--------|--------| | superuser | All routes | All skills | | admin | Design, themes, settings | Theme + deploy skills | | editor | Home + design | Theme switching | | viewer | Home only | None | Switch roles using the ๐Ÿ‘ View As button in the top bar to see the nav filter in real time.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Roles & Access\nroute: /developer-tools/roles\n---\n\n# Roles & Access Control\n\nRole-based access control for Bricks. Define which routes and skills each role can access, then use **View As** to preview the app through any role's eyes โ€” without leaving your session.\n\n## How It Works\n\nDefine roles in `roles.md` at your project root:\n\n```markdown\n---\nenabled: true\n---\n\n\\`\\`\\`roles\n{\n \"superuser\": { \"access\": \"all\", \"skills\": \"all\" },\n \"admin\": {\n \"access\": [\"/\", \"/settings\", \"/design\"],\n \"skills\": [\"dark\", \"light\", \"deploy\"]\n },\n \"viewer\": {\n \"access\": [\"/\"],\n \"skills\": []\n }\n}\n\\`\\`\\`\n```\n\n## Role Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `access` | `string[] \\| \"all\"` | Routes this role can visit |\n| `deny` | `string[]` | Routes to explicitly block (overrides `access`) |\n| `skills` | `string[] \\| \"all\"` | Skills this role can run |\n\n## View As Mode\n\nWhen `roles.md` is enabled, a **View As** selector appears in the top bar. Use it to switch to any role and see exactly how the nav filters โ€” no real permissions change, it's purely a preview.\n\nThis is useful for:\n- Checking that editors can't see admin-only pages\n- Reviewing the experience for new users (viewer role)\n- Demoing the app to stakeholders in a limited role\n\n## Integration with Auth\n\nRoles here correspond to the `role` field on users in `auth.md`. When a user logs in, their role controls what they can access. The \"View As\" selector is a dev tool that previews access without authentication โ€” it only affects the nav and is session-scoped.\n\n## Live Demo\n\nThe roles configured in this project are:\n\n| Role | Access | Skills |\n|------|--------|--------|\n| superuser | All routes | All skills |\n| admin | Design, themes, settings | Theme + deploy skills |\n| editor | Home + design | Theme switching |\n| viewer | Home only | None |\n\nSwitch roles using the **๐Ÿ‘ View As** button in the top bar to see the nav filter in real time.\n"},{"title":"Full-text Search","route":"/developer-tools/search","pageLayout":null,"contentHtml":"

Full-text Search

\n

Bricks indexes every page at parse time so the OmniBar can search content, not just titles.

\n

How it works

\n

When the engine parses a .md page it extracts a plain-text searchText field by stripping markdown syntax, code blocks, and list markers. That field lives on the Page object and is available to the renderer at zero cost โ€” no runtime indexing needed.

\n

Using the OmniBar

\n

Type any word in the OmniBar to search across:

\n\n

Content results only appear for pages whose title/route did not already match, so you never see duplicates.

\n

Snippet extraction

\n

When a content match is found, Bricks shows ~80 characters around the first occurrence of the query inside the page text. An ellipsis (โ€ฆ) indicates truncated context on either side.

\n

What gets indexed

\n

The buildSearchText function strips:

\n\n

The result is clean prose โ€” exactly what a user would read on the page.

\n","searchText":"Full-text Search Bricks indexes every page at parse time so the OmniBar can search content, not just titles. How it works When the engine parses a page it extracts a plain-text field by stripping markdown syntax, code blocks, and list markers. That field lives on the object and is available to the renderer at zero cost โ€” no runtime indexing needed. Using the OmniBar Type any word in the OmniBar to search across: Page titles and routes โ€” results labelled Page content โ€” results labelled , with a snippet showing the matching text in context Skill names and descriptions โ€” results labelled Content results only appear for pages whose title/route did not already match, so you never see duplicates. Snippet extraction When a content match is found, Bricks shows ~80 characters around the first occurrence of the query inside the page text. An ellipsis ( ) indicates truncated context on either side. What gets indexed The function strips: Fenced code blocks (all languages including , , , ) Inline code spans Markdown images and link URLs (link text is kept) Heading markers ( , , etc.) Emphasis and strong markers ( , ) Bare URLs List and blockquote markers The result is clean prose โ€” exactly what a user would read on the page.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Full-text Search\nroute: /developer-tools/search\n---\n\n# Full-text Search\n\nBricks indexes every page at parse time so the OmniBar can search **content**, not just titles.\n\n## How it works\n\nWhen the engine parses a `.md` page it extracts a plain-text `searchText` field by stripping markdown syntax, code blocks, and list markers. That field lives on the `Page` object and is available to the renderer at zero cost โ€” no runtime indexing needed.\n\n## Using the OmniBar\n\nType any word in the OmniBar to search across:\n\n- **Page titles and routes** โ€” results labelled `page`\n- **Page content** โ€” results labelled `content`, with a snippet showing the matching text in context\n- **Skill names and descriptions** โ€” results labelled `skill`\n\nContent results only appear for pages whose title/route did not already match, so you never see duplicates.\n\n## Snippet extraction\n\nWhen a content match is found, Bricks shows ~80 characters around the first occurrence of the query inside the page text. An ellipsis (`โ€ฆ`) indicates truncated context on either side.\n\n## What gets indexed\n\nThe `buildSearchText` function strips:\n\n- Fenced code blocks (all languages including `state`, `template`, `action`, `chart`)\n- Inline code spans\n- Markdown images and link URLs (link text is kept)\n- Heading markers (`#`, `##`, etc.)\n- Emphasis and strong markers (`*`, `_`)\n- Bare URLs\n- List and blockquote markers\n\nThe result is clean prose โ€” exactly what a user would read on the page.\n"},{"title":"Settings","route":"/settings","pageLayout":"settings","contentHtml":"

Settings

\n

Tenant-scoped configuration. Changes take effect immediately.

\n","searchText":"Settings Tenant-scoped configuration. Changes take effect immediately.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":["superuser","admin"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Settings\nroute: /settings\nlayout: settings\nroles: [superuser, admin]\n---\n\n# Settings\n\nTenant-scoped configuration. Changes take effect immediately.\n"},{"title":"Keyboard Shortcuts","route":"/developer-tools/shortcuts","pageLayout":null,"contentHtml":"

Keyboard Shortcuts

\n

Navigate Bricks without touching the mouse. Press ? at any time to open this reference.

\n

Navigation

\n

| Shortcut | Action |\n|---|---|\n| [ | Go back |\n| ] | Go forward |\n| G then H | Go home |

\n

Command Bar

\n

| Shortcut | Action |\n|---|---|\n| โŒ˜K / Ctrl+K | Open command bar |\n| โ†ต | Confirm selection |\n| Esc | Close command bar |

\n

Help

\n

| Shortcut | Action |\n|---|---|\n| ? | Show / hide this reference |

\n
\n

All shortcuts are disabled when you are typing in an input field.

\n","searchText":"Keyboard Shortcuts Navigate Bricks without touching the mouse. Press ? at any time to open this reference. Navigation | Shortcut | Action | |---|---| | | Go back | | | Go forward | | then | Go home | Command Bar | Shortcut | Action | |---|---| | / | Open command bar | | | Confirm selection | | | Close command bar | Help | Shortcut | Action | |---|---| | | Show / hide this reference | --- All shortcuts are disabled when you are typing in an input field.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Keyboard Shortcuts\nroute: /developer-tools/shortcuts\n---\n\n# Keyboard Shortcuts\n\nNavigate Bricks without touching the mouse. Press **?** at any time to open this reference.\n\n## Navigation\n\n| Shortcut | Action |\n|---|---|\n| `[` | Go back |\n| `]` | Go forward |\n| `G` then `H` | Go home |\n\n## Command Bar\n\n| Shortcut | Action |\n|---|---|\n| `โŒ˜K` / `Ctrl+K` | Open command bar |\n| `โ†ต` | Confirm selection |\n| `Esc` | Close command bar |\n\n## Help\n\n| Shortcut | Action |\n|---|---|\n| `?` | Show / hide this reference |\n\n---\n\nAll shortcuts are disabled when you are typing in an input field.\n"},{"title":"Stale Detection","route":"/developer-tools/stale","pageLayout":null,"contentHtml":"

Stale Detection

\n

Check which backlog items still have their artifacts on disk.

\n","searchText":"Stale Detection Check which backlog items still have their artifacts on disk.","state":{"report":"","loading":false},"template":{"html":"
\n \n
\n
{report}
"},"actions":[],"styles":".stale-actions {\n margin-bottom: var(--spacing-4);\n}\n.stale-output {\n white-space: pre-wrap;\n word-break: break-word;\n min-height: var(--height-2xl);\n color: var(--text);\n opacity: 0.85;\n}","formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Stale Detection\nroute: /developer-tools/stale\n---\n\n# Stale Detection\n\nCheck which backlog items still have their artifacts on disk.\n\n```state\n{ \"report\": \"\", \"loading\": false }\n```\n\n```template\n
\n \n
\n
{report}
\n```\n\n```style\n.stale-actions {\n margin-bottom: var(--spacing-4);\n}\n.stale-output {\n white-space: pre-wrap;\n word-break: break-word;\n min-height: var(--height-2xl);\n color: var(--text);\n opacity: 0.85;\n}\n```\n"},{"title":"Stat Cards","route":"/developer-tools/stats","pageLayout":null,"contentHtml":"

Stat Cards

\n

Display KPI metrics in a responsive grid using stat fenced blocks. Each card shows a value, label, optional trend badge, and optional icon.

\n

Business Overview

\n
๐Ÿ’ฐ
$124,800
Monthly Revenue
+8%
๐Ÿ‘ฅ
14,320
Active Users
+15%
๐Ÿ›’
$87.40
Avg. Order Value
-3%
๐ŸŽซ
42
Support Tickets
-22%
\n

Platform Health

\n
โœ…
99.98%
Uptime
+0.1%
โšก
84ms
Response Time
-12%
โš ๏ธ
0.04%
Error Rate
+0.01%
\n

Syntax

\n
stat: Label\nvalue: Display Value\ntrend: +12%\nicon: ๐Ÿ’ก\n
\n\n","searchText":"Stat Cards Display KPI metrics in a responsive grid using fenced blocks. Each card shows a value, label, optional trend badge, and optional icon. Business Overview Platform Health Syntax โ€” starts a new card (required) โ€” the primary metric displayed large โ€” optional badge; prefix renders green, prefix renders red โ€” optional emoji or symbol shown above the value","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[{"cards":[{"label":"Monthly Revenue","value":"$124,800","trend":"+8%","icon":"๐Ÿ’ฐ"},{"label":"Active Users","value":"14,320","trend":"+15%","icon":"๐Ÿ‘ฅ"},{"label":"Avg. Order Value","value":"$87.40","trend":"-3%","icon":"๐Ÿ›’"},{"label":"Support Tickets","value":"42","trend":"-22%","icon":"๐ŸŽซ"}]},{"cards":[{"label":"Uptime","value":"99.98%","trend":"+0.1%","icon":"โœ…"},{"label":"Response Time","value":"84ms","trend":"-12%","icon":"โšก"},{"label":"Error Rate","value":"0.04%","trend":"+0.01%","icon":"โš ๏ธ"}]}],"progress":[],"raw":"---\ntitle: Stat Cards\nroute: /developer-tools/stats\n---\n\n# Stat Cards\n\nDisplay KPI metrics in a responsive grid using `stat` fenced blocks. Each card shows a value, label, optional trend badge, and optional icon.\n\n## Business Overview\n\n```stat\nstat: Monthly Revenue\nvalue: $124,800\ntrend: +8%\nicon: ๐Ÿ’ฐ\n\nstat: Active Users\nvalue: 14,320\ntrend: +15%\nicon: ๐Ÿ‘ฅ\n\nstat: Avg. Order Value\nvalue: $87.40\ntrend: -3%\nicon: ๐Ÿ›’\n\nstat: Support Tickets\nvalue: 42\ntrend: -22%\nicon: ๐ŸŽซ\n```\n\n## Platform Health\n\n```stat\nstat: Uptime\nvalue: 99.98%\ntrend: +0.1%\nicon: โœ…\n\nstat: Response Time\nvalue: 84ms\ntrend: -12%\nicon: โšก\n\nstat: Error Rate\nvalue: 0.04%\ntrend: +0.01%\nicon: โš ๏ธ\n```\n\n## Syntax\n\n```\nstat: Label\nvalue: Display Value\ntrend: +12%\nicon: ๐Ÿ’ก\n```\n\n- `stat:` โ€” starts a new card (required)\n- `value:` โ€” the primary metric displayed large\n- `trend:` โ€” optional badge; `+` prefix renders green, `-` prefix renders red\n- `icon:` โ€” optional emoji or symbol shown above the value\n"},{"title":"Stripe Control","route":"/stripe-control","pageLayout":null,"contentHtml":"

Stripe Control

\n

Check whether every paid marketplace brick and agent has the Stripe price lookup key it needs for marketplace checkout.

\n","searchText":"Stripe Control Check whether every paid marketplace brick and agent has the Stripe price lookup key it needs for marketplace checkout.","state":{"loading":true,"saving":false,"error":"","message":"","stripe_brick_enabled":false,"stripe_configured":false,"stripe_mode":"","stripe_error":"","platformStripeLabel":"Checking","stripeModeLabel":"Checking","stripeConfiguredLabel":"Checking","itemCountLabel":"0 records","createAllLabel":"Create all","showEmpty":false,"showTable":false,"items":[]},"template":{"html":"
\n
\n
\n Stripe configured (via .env)\n {platformStripeLabel}\n
\n
\n Stripe mode\n {stripeModeLabel}\n
\n
\n Catalog check\n {stripeConfiguredLabel}\n
\n
\n\n
{error}
\n
{message}
\n
{stripe_error}
\n\n
\n \n \n
\n {itemCountLabel}\n
\n\n
Checking Stripe catalog...
\n
No paid marketplace bricks or agents found.
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ItemLookup keyBilling itemAmountStripeAction
\n \n {item.brick_title}\n {item.group}.{item.brick}\n \n {item.lookup_key}{item.billing_item}{item.amount_label}\n \n {item.status_label}\n {item.row_note}\n \n \n \n Create\n \n
\n
\n
"},"actions":[{"name":"init","code":"var next = Object.assign({}, state, { loading: true, showEmpty: false, showTable: false, error: \"\", message: \"\" });\nupdate(next);\ntry {\n var res = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n error: data.error || \"Could not load Stripe Control.\"\n });\n }\n var items = (data.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n }).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n });\n var itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\n return Object.assign({}, next, {\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n stripe_brick_enabled: data.stripe_brick_enabled === true,\n stripe_configured: data.stripe_configured === true,\n stripe_mode: data.stripe_mode || \"\",\n stripe_error: data.stripe_error || \"\",\n platformStripeLabel: data.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: data.stripe_configured ? (data.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: data.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n showTable: false,\n error: \"Could not reach Stripe Control.\"\n });\n}"},{"name":"loadStatus","code":"var next = Object.assign({}, state, { loading: true, showEmpty: false, showTable: false, error: \"\", message: \"\" });\nupdate(next);\ntry {\n var res = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n error: data.error || \"Could not load Stripe Control.\"\n });\n }\n var items = (data.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n }).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n });\n var itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\n return Object.assign({}, next, {\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n stripe_brick_enabled: data.stripe_brick_enabled === true,\n stripe_configured: data.stripe_configured === true,\n stripe_mode: data.stripe_mode || \"\",\n stripe_error: data.stripe_error || \"\",\n platformStripeLabel: data.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: data.stripe_configured ? (data.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: data.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n showTable: false,\n error: \"Could not reach Stripe Control.\"\n });\n}"},{"name":"createAllPrices","code":"if (state.saving) return state;\nvar targets = (state.items || []).filter(function(item) {\n return item.can_create === true;\n});\nif (!targets.length) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.info(\"No missing Stripe prices to create.\");\n }\n return state;\n}\nvar currentItems = (state.items || []).slice();\nupdate(Object.assign({}, state, {\n saving: true,\n error: \"\",\n message: \"Creating 0 of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating 0/\" + targets.length,\n items: currentItems\n}));\nvar created = 0;\nvar already = 0;\nvar failed = 0;\nvar firstError = \"\";\nfor (var i = 0; i < targets.length; i += 1) {\n var item = targets[i];\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: false,\n status_state: \"unknown\",\n status_label: \"Creating...\",\n row_note: \"Creating Stripe product and price...\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: \"\",\n message: \"Creating \" + i + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + i + \"/\" + targets.length,\n items: currentItems\n }));\n try {\n var res = await fetch(\"/api/admin/stripe-control/prices\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n group: item.group || \"\",\n brick: item.brick || \"\",\n lookup_key: item.lookup_key || \"\"\n })\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n failed += 1;\n if (!firstError) firstError = data.error || \"Could not create one Stripe price.\";\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: true,\n status_state: \"missing\",\n status_label: \"Failed\",\n row_note: data.error || \"Could not create this Stripe price.\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: firstError,\n message: \"Creating \" + (i + 1) + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + (i + 1) + \"/\" + targets.length,\n items: currentItems\n }));\n continue;\n }\n if (data.created) {\n created += 1;\n } else {\n already += 1;\n }\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: false,\n exists_in_stripe: true,\n local_price_ready: true,\n status_state: \"ready\",\n status_label: \"โœ“\",\n row_note: data.created ? \"Created in Stripe. Refresh will confirm local sync.\" : \"Stripe price already exists.\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: firstError,\n message: \"Creating \" + (i + 1) + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + (i + 1) + \"/\" + targets.length,\n items: currentItems\n }));\n } catch (e) {\n failed += 1;\n if (!firstError) firstError = \"Could not reach Stripe while creating prices.\";\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: true,\n status_state: \"missing\",\n status_label: \"Failed\",\n row_note: \"Could not reach Stripe while creating this price.\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: firstError,\n message: \"Creating \" + (i + 1) + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + (i + 1) + \"/\" + targets.length,\n items: currentItems\n }));\n }\n}\nvar statusRes;\ntry {\n statusRes = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n} catch (e) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(\"Created prices, but could not reload Stripe Control.\");\n }\n return Object.assign({}, state, {\n saving: false,\n createAllLabel: \"Create all\",\n error: \"Created prices, but could not reload Stripe Control.\",\n items: currentItems\n });\n}\nvar statusData = await statusRes.json().catch(function() { return {}; });\nif (!statusRes.ok) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(statusData.error || \"Created prices, but could not reload Stripe Control.\");\n }\n return Object.assign({}, state, {\n saving: false,\n createAllLabel: \"Create all\",\n error: statusData.error || \"Created prices, but could not reload Stripe Control.\",\n items: currentItems\n });\n}\nvar items = (statusData.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n}).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n});\nvar itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\nvar resultMessage = \"Created \" + created + \" Stripe price\" + (created === 1 ? \"\" : \"s\") + \".\";\nif (already > 0) resultMessage += \" \" + already + \" already existed.\";\nif (failed > 0) resultMessage += \" \" + failed + \" failed.\";\nif (window.dream && window.dream.toast) {\n if (failed > 0) {\n window.dream.toast.danger(resultMessage);\n } else {\n window.dream.toast.success(resultMessage);\n }\n}\nreturn Object.assign({}, state, {\n saving: false,\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n error: failed > 0 ? firstError : \"\",\n message: resultMessage,\n createAllLabel: \"Create all\",\n stripe_brick_enabled: statusData.stripe_brick_enabled === true,\n stripe_configured: statusData.stripe_configured === true,\n stripe_mode: statusData.stripe_mode || \"\",\n stripe_error: statusData.stripe_error || \"\",\n platformStripeLabel: statusData.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: statusData.stripe_configured ? (statusData.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: statusData.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n});"},{"name":"createPrice","code":"var button = event && event.target && event.target.closest(\"[data-lookup-key]\");\nif (!button) return state;\nvar payload = {\n group: button.getAttribute(\"data-group\") || \"\",\n brick: button.getAttribute(\"data-brick\") || \"\",\n lookup_key: button.getAttribute(\"data-lookup-key\") || \"\"\n};\nupdate(Object.assign({}, state, { saving: true, error: \"\", message: \"\" }));\ntry {\n var res = await fetch(\"/api/admin/stripe-control/prices\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload)\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(data.error || \"Could not create the Stripe price.\");\n }\n return Object.assign({}, state, {\n saving: false,\n error: data.error || \"Could not create the Stripe price.\"\n });\n }\n if (window.dream && window.dream.toast) {\n window.dream.toast.success(data.created ? \"Created Stripe product and price.\" : \"Stripe price already exists.\");\n }\n update(Object.assign({}, state, {\n saving: false,\n message: data.created ? \"Created Stripe product and price.\" : \"Stripe price already exists.\"\n }));\n var statusRes = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n var statusData = await statusRes.json().catch(function() { return {}; });\n if (!statusRes.ok) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(statusData.error || \"Created, but could not reload Stripe Control.\");\n }\n return Object.assign({}, state, {\n saving: false,\n error: statusData.error || \"Created, but could not reload Stripe Control.\"\n });\n }\n var items = (statusData.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n }).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n });\n var itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\n return Object.assign({}, state, {\n saving: false,\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n error: \"\",\n message: data.created ? \"Created Stripe product and price.\" : \"Stripe price already exists.\",\n stripe_brick_enabled: statusData.stripe_brick_enabled === true,\n stripe_configured: statusData.stripe_configured === true,\n stripe_mode: statusData.stripe_mode || \"\",\n stripe_error: statusData.stripe_error || \"\",\n platformStripeLabel: statusData.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: statusData.stripe_configured ? (statusData.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: statusData.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n });\n} catch (e) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(\"Could not reach Stripe while creating the price.\");\n }\n return Object.assign({}, state, {\n saving: false,\n error: \"Could not reach Stripe while creating the price.\"\n });\n}"}],"styles":".stripe-control-page {\n gap: var(--spacing-4);\n}\n\n.stripe-control-summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--width-xs), 1fr));\n gap: var(--spacing-3);\n}\n\n.stripe-control-status-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n}\n\n.stripe-control-status-card {\n padding: var(--spacing-4);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1);\n}\n\n.stripe-control-label,\n.stripe-control-muted {\n color: var(--text-muted);\n font-size: var(--font-size-sm);\n}\n\n.stripe-control-muted {\n display: block;\n margin-top: var(--spacing-1);\n}\n\n.stripe-control-cell {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1);\n min-width: var(--spacing-0);\n}\n\n.stripe-control-table td {\n vertical-align: top;\n}\n\n.stripe-control-lookup {\n font-family: var(--font-mono);\n overflow-wrap: anywhere;\n}\n\n.stripe-control-result {\n display: inline-flex;\n align-items: center;\n font-weight: var(--font-weight-semibold);\n}\n\n.stripe-control-result[data-state=\"ready\"] {\n color: var(--success);\n}\n\n.stripe-control-result[data-state=\"missing\"] {\n color: var(--danger);\n}\n\n.stripe-control-result[data-state=\"unknown\"] {\n color: var(--text-muted);\n}\n\n.stripe-control-table button[data-can-create=\"false\"],\n.stripe-control-table button[data-can-create=\"\"] {\n display: none;\n}","formValidation":null,"apis":[],"roles":["superuser"],"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Stripe Control\nroute: /stripe-control\nroles: [superuser]\n---\n\n# Stripe Control\n\nCheck whether every paid marketplace brick and agent has the Stripe price lookup key it needs for marketplace checkout.\n\n```state\n{\n \"loading\": true,\n \"saving\": false,\n \"error\": \"\",\n \"message\": \"\",\n \"stripe_brick_enabled\": false,\n \"stripe_configured\": false,\n \"stripe_mode\": \"\",\n \"stripe_error\": \"\",\n \"platformStripeLabel\": \"Checking\",\n \"stripeModeLabel\": \"Checking\",\n \"stripeConfiguredLabel\": \"Checking\",\n \"itemCountLabel\": \"0 records\",\n \"createAllLabel\": \"Create all\",\n \"showEmpty\": false,\n \"showTable\": false,\n \"items\": []\n}\n```\n\n```template\n
\n
\n
\n Stripe configured (via .env)\n {platformStripeLabel}\n
\n
\n Stripe mode\n {stripeModeLabel}\n
\n
\n Catalog check\n {stripeConfiguredLabel}\n
\n
\n\n
{error}
\n
{message}
\n
{stripe_error}
\n\n
\n \n \n
\n {itemCountLabel}\n
\n\n
Checking Stripe catalog...
\n
No paid marketplace bricks or agents found.
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ItemLookup keyBilling itemAmountStripeAction
\n \n {item.brick_title}\n {item.group}.{item.brick}\n \n {item.lookup_key}{item.billing_item}{item.amount_label}\n \n {item.status_label}\n {item.row_note}\n \n \n \n Create\n \n
\n
\n
\n```\n\n```action:init\nvar next = Object.assign({}, state, { loading: true, showEmpty: false, showTable: false, error: \"\", message: \"\" });\nupdate(next);\ntry {\n var res = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n error: data.error || \"Could not load Stripe Control.\"\n });\n }\n var items = (data.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n }).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n });\n var itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\n return Object.assign({}, next, {\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n stripe_brick_enabled: data.stripe_brick_enabled === true,\n stripe_configured: data.stripe_configured === true,\n stripe_mode: data.stripe_mode || \"\",\n stripe_error: data.stripe_error || \"\",\n platformStripeLabel: data.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: data.stripe_configured ? (data.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: data.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n showTable: false,\n error: \"Could not reach Stripe Control.\"\n });\n}\n```\n\n```action:loadStatus\nvar next = Object.assign({}, state, { loading: true, showEmpty: false, showTable: false, error: \"\", message: \"\" });\nupdate(next);\ntry {\n var res = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n error: data.error || \"Could not load Stripe Control.\"\n });\n }\n var items = (data.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n }).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n });\n var itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\n return Object.assign({}, next, {\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n stripe_brick_enabled: data.stripe_brick_enabled === true,\n stripe_configured: data.stripe_configured === true,\n stripe_mode: data.stripe_mode || \"\",\n stripe_error: data.stripe_error || \"\",\n platformStripeLabel: data.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: data.stripe_configured ? (data.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: data.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n });\n} catch (e) {\n return Object.assign({}, next, {\n loading: false,\n showEmpty: false,\n showTable: false,\n error: \"Could not reach Stripe Control.\"\n });\n}\n```\n\n```action:createAllPrices\nif (state.saving) return state;\nvar targets = (state.items || []).filter(function(item) {\n return item.can_create === true;\n});\nif (!targets.length) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.info(\"No missing Stripe prices to create.\");\n }\n return state;\n}\nvar currentItems = (state.items || []).slice();\nupdate(Object.assign({}, state, {\n saving: true,\n error: \"\",\n message: \"Creating 0 of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating 0/\" + targets.length,\n items: currentItems\n}));\nvar created = 0;\nvar already = 0;\nvar failed = 0;\nvar firstError = \"\";\nfor (var i = 0; i < targets.length; i += 1) {\n var item = targets[i];\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: false,\n status_state: \"unknown\",\n status_label: \"Creating...\",\n row_note: \"Creating Stripe product and price...\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: \"\",\n message: \"Creating \" + i + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + i + \"/\" + targets.length,\n items: currentItems\n }));\n try {\n var res = await fetch(\"/api/admin/stripe-control/prices\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n group: item.group || \"\",\n brick: item.brick || \"\",\n lookup_key: item.lookup_key || \"\"\n })\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n failed += 1;\n if (!firstError) firstError = data.error || \"Could not create one Stripe price.\";\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: true,\n status_state: \"missing\",\n status_label: \"Failed\",\n row_note: data.error || \"Could not create this Stripe price.\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: firstError,\n message: \"Creating \" + (i + 1) + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + (i + 1) + \"/\" + targets.length,\n items: currentItems\n }));\n continue;\n }\n if (data.created) {\n created += 1;\n } else {\n already += 1;\n }\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: false,\n exists_in_stripe: true,\n local_price_ready: true,\n status_state: \"ready\",\n status_label: \"โœ“\",\n row_note: data.created ? \"Created in Stripe. Refresh will confirm local sync.\" : \"Stripe price already exists.\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: firstError,\n message: \"Creating \" + (i + 1) + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + (i + 1) + \"/\" + targets.length,\n items: currentItems\n }));\n } catch (e) {\n failed += 1;\n if (!firstError) firstError = \"Could not reach Stripe while creating prices.\";\n currentItems = currentItems.map(function(row) {\n if (row.lookup_key !== item.lookup_key || row.group !== item.group || row.brick !== item.brick) return row;\n return Object.assign({}, row, {\n can_create: true,\n status_state: \"missing\",\n status_label: \"Failed\",\n row_note: \"Could not reach Stripe while creating this price.\"\n });\n });\n update(Object.assign({}, state, {\n saving: true,\n error: firstError,\n message: \"Creating \" + (i + 1) + \" of \" + targets.length + \" missing Stripe prices...\",\n createAllLabel: \"Creating \" + (i + 1) + \"/\" + targets.length,\n items: currentItems\n }));\n }\n}\nvar statusRes;\ntry {\n statusRes = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n} catch (e) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(\"Created prices, but could not reload Stripe Control.\");\n }\n return Object.assign({}, state, {\n saving: false,\n createAllLabel: \"Create all\",\n error: \"Created prices, but could not reload Stripe Control.\",\n items: currentItems\n });\n}\nvar statusData = await statusRes.json().catch(function() { return {}; });\nif (!statusRes.ok) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(statusData.error || \"Created prices, but could not reload Stripe Control.\");\n }\n return Object.assign({}, state, {\n saving: false,\n createAllLabel: \"Create all\",\n error: statusData.error || \"Created prices, but could not reload Stripe Control.\",\n items: currentItems\n });\n}\nvar items = (statusData.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n}).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n});\nvar itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\nvar resultMessage = \"Created \" + created + \" Stripe price\" + (created === 1 ? \"\" : \"s\") + \".\";\nif (already > 0) resultMessage += \" \" + already + \" already existed.\";\nif (failed > 0) resultMessage += \" \" + failed + \" failed.\";\nif (window.dream && window.dream.toast) {\n if (failed > 0) {\n window.dream.toast.danger(resultMessage);\n } else {\n window.dream.toast.success(resultMessage);\n }\n}\nreturn Object.assign({}, state, {\n saving: false,\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n error: failed > 0 ? firstError : \"\",\n message: resultMessage,\n createAllLabel: \"Create all\",\n stripe_brick_enabled: statusData.stripe_brick_enabled === true,\n stripe_configured: statusData.stripe_configured === true,\n stripe_mode: statusData.stripe_mode || \"\",\n stripe_error: statusData.stripe_error || \"\",\n platformStripeLabel: statusData.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: statusData.stripe_configured ? (statusData.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: statusData.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n});\n```\n\n```action:createPrice\nvar button = event && event.target && event.target.closest(\"[data-lookup-key]\");\nif (!button) return state;\nvar payload = {\n group: button.getAttribute(\"data-group\") || \"\",\n brick: button.getAttribute(\"data-brick\") || \"\",\n lookup_key: button.getAttribute(\"data-lookup-key\") || \"\"\n};\nupdate(Object.assign({}, state, { saving: true, error: \"\", message: \"\" }));\ntry {\n var res = await fetch(\"/api/admin/stripe-control/prices\", {\n method: \"POST\",\n credentials: \"include\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload)\n });\n var data = await res.json().catch(function() { return {}; });\n if (!res.ok) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(data.error || \"Could not create the Stripe price.\");\n }\n return Object.assign({}, state, {\n saving: false,\n error: data.error || \"Could not create the Stripe price.\"\n });\n }\n if (window.dream && window.dream.toast) {\n window.dream.toast.success(data.created ? \"Created Stripe product and price.\" : \"Stripe price already exists.\");\n }\n update(Object.assign({}, state, {\n saving: false,\n message: data.created ? \"Created Stripe product and price.\" : \"Stripe price already exists.\"\n }));\n var statusRes = await fetch(\"/api/admin/stripe-control\", {\n method: \"GET\",\n credentials: \"include\"\n });\n var statusData = await statusRes.json().catch(function() { return {}; });\n if (!statusRes.ok) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(statusData.error || \"Created, but could not reload Stripe Control.\");\n }\n return Object.assign({}, state, {\n saving: false,\n error: statusData.error || \"Created, but could not reload Stripe Control.\"\n });\n }\n var items = (statusData.items || []).filter(function(item) {\n return String(item.billing_item || \"\").toLowerCase() !== \"free\";\n }).map(function(item) {\n var amountLabel = \"Not set\";\n if (typeof item.amount_cents === \"number\" && item.currency) {\n amountLabel = (item.currency || \"\").toUpperCase() + \" \" + (item.amount_cents / 100).toFixed(2);\n if (item.interval && item.interval !== \"one_time\") amountLabel += \" / \" + item.interval;\n }\n var stateName = item.exists_in_stripe === true ? \"ready\" : item.exists_in_stripe === false ? \"missing\" : \"unknown\";\n var statusLabel = item.exists_in_stripe === true ? \"โœ“\" : item.exists_in_stripe === false ? \"X\" : \"Not checked\";\n return Object.assign({}, item, {\n amount_label: amountLabel,\n status_state: stateName,\n status_label: statusLabel\n });\n });\n var itemCountLabel = items.length + \" record\" + (items.length === 1 ? \"\" : \"s\");\n return Object.assign({}, state, {\n saving: false,\n loading: false,\n showEmpty: items.length === 0,\n showTable: items.length > 0,\n error: \"\",\n message: data.created ? \"Created Stripe product and price.\" : \"Stripe price already exists.\",\n stripe_brick_enabled: statusData.stripe_brick_enabled === true,\n stripe_configured: statusData.stripe_configured === true,\n stripe_mode: statusData.stripe_mode || \"\",\n stripe_error: statusData.stripe_error || \"\",\n platformStripeLabel: statusData.stripe_configured ? \"Yes\" : \"No\",\n stripeModeLabel: statusData.stripe_configured ? (statusData.stripe_mode || \"Configured\") : \"Not configured\",\n stripeConfiguredLabel: statusData.stripe_configured ? \"Ready to check\" : \"Configure Stripe first\",\n itemCountLabel: itemCountLabel,\n items: items\n });\n} catch (e) {\n if (window.dream && window.dream.toast) {\n window.dream.toast.danger(\"Could not reach Stripe while creating the price.\");\n }\n return Object.assign({}, state, {\n saving: false,\n error: \"Could not reach Stripe while creating the price.\"\n });\n}\n```\n\n```style\n.stripe-control-page {\n gap: var(--spacing-4);\n}\n\n.stripe-control-summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--width-xs), 1fr));\n gap: var(--spacing-3);\n}\n\n.stripe-control-status-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-default);\n}\n\n.stripe-control-status-card {\n padding: var(--spacing-4);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1);\n}\n\n.stripe-control-label,\n.stripe-control-muted {\n color: var(--text-muted);\n font-size: var(--font-size-sm);\n}\n\n.stripe-control-muted {\n display: block;\n margin-top: var(--spacing-1);\n}\n\n.stripe-control-cell {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-1);\n min-width: var(--spacing-0);\n}\n\n.stripe-control-table td {\n vertical-align: top;\n}\n\n.stripe-control-lookup {\n font-family: var(--font-mono);\n overflow-wrap: anywhere;\n}\n\n.stripe-control-result {\n display: inline-flex;\n align-items: center;\n font-weight: var(--font-weight-semibold);\n}\n\n.stripe-control-result[data-state=\"ready\"] {\n color: var(--success);\n}\n\n.stripe-control-result[data-state=\"missing\"] {\n color: var(--danger);\n}\n\n.stripe-control-result[data-state=\"unknown\"] {\n color: var(--text-muted);\n}\n\n.stripe-control-table button[data-can-create=\"false\"],\n.stripe-control-table button[data-can-create=\"\"] {\n display: none;\n}\n```\n"},{"title":"Style Guide","route":"/styleguide","pageLayout":"styleguide","contentHtml":"

Style Guide

\n

All available UI components and styles in one place.

\n","searchText":"Style Guide All available UI components and styles in one place.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Style Guide\nroute: /styleguide\nlayout: styleguide\n---\n\n# Style Guide\n\nAll available UI components and styles in one place.\n"},{"title":"Style Registry","route":"/styles","pageLayout":"style-registry","contentHtml":"

Style Registry

\n

Browse and apply available themes.

\n","searchText":"Style Registry Browse and apply available themes.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Style Registry\nroute: /styles\nlayout: style-registry\n---\n\n# Style Registry\n\nBrowse and apply available themes.\n"},{"title":"Data Tables","route":"/developer-tools/tables","pageLayout":null,"contentHtml":"

Data Tables

\n

Render structured data as semantic HTML tables directly from markdown. Supports column headers, multi-row data, optional striped rows, and captions. All colors are theme-aware.

\n

Syntax

\n

Use a fenced code block with the table language tag. Keys are:

\n

| Key | Required | Values |\n|---|---|---|\n| title | no | any string |\n| columns | yes | JSON array of strings |\n| rows | yes | JSON array of arrays |\n| striped | no | true or false (default: false) |\n| caption | no | any string |

\n

Basic Table

\n

Team members and their current roles.

\n

Team

NameRoleStatus
AliceEngineerActive
BobDesignerActive
CarolPMOn Leave
\n

Striped Table

\n

Sprint task breakdown with alternating row shading.

\n

Sprint Tasks

Sprint 12 โ€” 2 weeks remaining
TaskAssigneePointsStatus
Auth redesignAlice5Done
API docsBob3In Progress
Dashboard chartsCarol8Todo
Mobile navAlice5In Progress
\n

Usage Notes

\n\n","searchText":"Data Tables Render structured data as semantic HTML tables directly from markdown. Supports column headers, multi-row data, optional striped rows, and captions. All colors are theme-aware. Syntax Use a fenced code block with the language tag. Keys are: | Key | Required | Values | |---|---|---| | | no | any string | | | yes | JSON array of strings | | | yes | JSON array of arrays | | | no | or (default: ) | | | no | any string | Basic Table Team members and their current roles. Striped Table Sprint task breakdown with alternating row shading. Usage Notes โ€” JSON array of column header strings โ€” JSON array of row arrays (each row is an array of cell strings) โ€” alternates background on every other row for readability โ€” optional footnote rendered below the table Tables are responsive โ€” horizontal scroll activates on narrow screens All colors reference design tokens and update when the theme changes","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[{"title":"Team","columns":["Name","Role","Status"],"rows":[["Alice","Engineer","Active"],["Bob","Designer","Active"],["Carol","PM","On Leave"]],"striped":false,"caption":""},{"title":"Sprint Tasks","columns":["Task","Assignee","Points","Status"],"rows":[["Auth redesign","Alice","5","Done"],["API docs","Bob","3","In Progress"],["Dashboard charts","Carol","8","Todo"],["Mobile nav","Alice","5","In Progress"]],"striped":true,"caption":"Sprint 12 โ€” 2 weeks remaining"}],"tabs":[],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Data Tables\nroute: /developer-tools/tables\n---\n\n# Data Tables\n\nRender structured data as semantic HTML tables directly from markdown. Supports column headers, multi-row data, optional striped rows, and captions. All colors are theme-aware.\n\n## Syntax\n\nUse a fenced code block with the `table` language tag. Keys are:\n\n| Key | Required | Values |\n|---|---|---|\n| `title` | no | any string |\n| `columns` | yes | JSON array of strings |\n| `rows` | yes | JSON array of arrays |\n| `striped` | no | `true` or `false` (default: `false`) |\n| `caption` | no | any string |\n\n## Basic Table\n\nTeam members and their current roles.\n\n```table\ntitle: Team\ncolumns: [\"Name\", \"Role\", \"Status\"]\nrows: [[\"Alice\", \"Engineer\", \"Active\"], [\"Bob\", \"Designer\", \"Active\"], [\"Carol\", \"PM\", \"On Leave\"]]\n```\n\n## Striped Table\n\nSprint task breakdown with alternating row shading.\n\n```table\ntitle: Sprint Tasks\ncolumns: [\"Task\", \"Assignee\", \"Points\", \"Status\"]\nrows: [[\"Auth redesign\", \"Alice\", \"5\", \"Done\"], [\"API docs\", \"Bob\", \"3\", \"In Progress\"], [\"Dashboard charts\", \"Carol\", \"8\", \"Todo\"], [\"Mobile nav\", \"Alice\", \"5\", \"In Progress\"]]\nstriped: true\ncaption: Sprint 12 โ€” 2 weeks remaining\n```\n\n## Usage Notes\n\n- `columns` โ€” JSON array of column header strings\n- `rows` โ€” JSON array of row arrays (each row is an array of cell strings)\n- `striped` โ€” alternates background on every other row for readability\n- `caption` โ€” optional footnote rendered below the table\n- Tables are responsive โ€” horizontal scroll activates on narrow screens\n- All colors reference design tokens and update when the theme changes\n"},{"title":"Tabs","route":"/developer-tools/tabs","pageLayout":null,"contentHtml":"

Tabs

\n

The tabs fenced block creates CSS-only interactive tabbed sections โ€” no JavaScript required.

\n

Syntax

\n

Each tab starts with tab: Label. Everything that follows (until the next tab: line or the closing fence) is the tab's content, rendered as markdown.

\n

Basic Example

\n

Tabs let you organise related content into labelled panels.

\n

Click any tab label to switch panels โ€” powered entirely by CSS hidden radio inputs and the :checked ~ sibling combinator.

\n
\n

Labels render as <label> elements with role=\"tab\".\nPanels carry role=\"tabpanel\".\nThe hidden radio inputs are still in the accessibility tree, so keyboard users can tab through options.

\n
\n

Multiple Instances

\n

You can place several tab blocks on one page. Each gets a unique scoped <style> so there is no cross-instance bleed.

\n

Install Bricks by cloning the repository and running npm install.

\n

Edit theme.md to customise colours, then layout.md for navigation.

\n

Run npm run build to export a static site, or use the /deploy skill to push to Vercel, Netlify, or Cloudflare.

\n
\n","searchText":"Tabs The fenced block creates CSS-only interactive tabbed sections โ€” no JavaScript required. Syntax Each tab starts with . Everything that follows (until the next line or the closing fence) is the tab's content, rendered as markdown. Basic Example Multiple Instances You can place several tab blocks on one page. Each gets a unique scoped so there is no cross-instance bleed.","state":null,"template":null,"actions":[],"styles":null,"formValidation":null,"apis":[],"roles":null,"persist":false,"charts":[],"tables":[],"tabs":[{"tabs":[{"label":"Overview","content":"

Tabs let you organise related content into labelled panels.

\n

Click any tab label to switch panels โ€” powered entirely by CSS hidden radio inputs and the :checked ~ sibling combinator.

\n"},{"label":"Features","content":"\n"},{"label":"Accessibility","content":"

Labels render as <label> elements with role=\"tab\".\nPanels carry role=\"tabpanel\".\nThe hidden radio inputs are still in the accessibility tree, so keyboard users can tab through options.

\n"}]},{"tabs":[{"label":"Installation","content":"

Install Bricks by cloning the repository and running npm install.

\n"},{"label":"Configuration","content":"

Edit theme.md to customise colours, then layout.md for navigation.

\n"},{"label":"Deployment","content":"

Run npm run build to export a static site, or use the /deploy skill to push to Vercel, Netlify, or Cloudflare.

\n"}]}],"accordions":[],"callouts":[],"timelines":[],"stats":[],"progress":[],"raw":"---\ntitle: Tabs\nroute: /developer-tools/tabs\n---\n\n# Tabs\n\nThe `tabs` fenced block creates CSS-only interactive tabbed sections โ€” no JavaScript required.\n\n## Syntax\n\nEach tab starts with `tab: Label`. Everything that follows (until the next `tab:` line or the closing fence) is the tab's content, rendered as markdown.\n\n## Basic Example\n\n```tabs\ntab: Overview\nTabs let you organise related content into labelled panels.\n\nClick any tab label to switch panels โ€” powered entirely by CSS hidden radio inputs and the `:checked ~` sibling combinator.\n\ntab: Features\n- **Zero JavaScript** โ€” interactivity is CSS-only\n- **Markdown content** โ€” each panel supports full markdown\n- **Theme-aware** โ€” all colours reference CSS custom properties\n- **Responsive** โ€” the strip scrolls horizontally on narrow screens\n\ntab: Accessibility\nLabels render as `