# Canonical Pattern Index, survey targets for Mode 8 (composite-demo-protocol.md) **Auto-generated** by this skill's `scripts/build-canonical-pattern-index.mjs`. Do not edit by hand, re-run the build script (from the monorepo root) after adding new canonicals to `apps/`, `catalog/`, or `playgrounds/`. **Total canonical `.contents.html` files**: 116 ## How to use this index 1. From Phase 1 of [composite-demo-protocol.md](composite-demo-protocol.md), name the UI type. 2. Find the matching section below. 3. Read every `.contents.html` listed (or the closest 2-3 if the section has many). 4. Extract primitive composition per Phase 3 of the protocol. 5. Cite the path in your demo's `` comment. --- ## billing (5) > Billing dashboards (current plan, invoices, payment methods, usage). Lift card-ui + section + col-ui + field-ui chain from billing.contents.html. - `apps/saas/app/billing/billing.contents.html`, 482 lines (from SaaS app dashboards) - `apps/user-flow/app/registration/billing/billing.contents.html`, 94 lines (from User-flow templates) - `catalog/ui-patterns/app/invoice-line-items/invoice-line-items.contents.html`, 91 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/newsletter-subscription/newsletter-subscription.contents.html`, 36 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/payment-method-form/payment-method-form.contents.html`, 65 lines (from UI-pattern atomics (catalog)) ## dashboard (1) > Admin dashboards (KPI grids, overview cards). Lift grid-ui responsive columns from admin-dashboard.contents.html. - `apps/saas/app/admin-dashboard/admin-dashboard.contents.html`, 1566 lines (from SaaS app dashboards) ## settings (5) > Settings pages (preferences, security, appearance). Lift card-ui per setting group + col-ui spacing. - `apps/saas/app/settings-page/settings-page.contents.html`, 267 lines (from SaaS app dashboards) - `apps/user-flow/app/onboarding/notification-prefs/notification-prefs.contents.html`, 65 lines (from User-flow templates) - `catalog/ui-patterns/app/settings-appearance/settings-appearance.contents.html`, 13 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/settings-notifications/settings-notifications.contents.html`, 45 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/settings-page/settings-page.contents.html`, 30 lines (from Page-shell templates (catalog)) ## auth-flow (10) > Authentication flows (sign-in, MFA, OAuth, password reset). Lift single-column form layout from sign-in.contents.html siblings. - `apps/user-flow/app/auth/email-change/verify/verify.contents.html`, 38 lines (from User-flow templates) - `apps/user-flow/app/auth/forgot-password/forgot-password.contents.html`, 32 lines (from User-flow templates) - `apps/user-flow/app/auth/oauth/callback/callback.contents.html`, 39 lines (from User-flow templates) - `apps/user-flow/app/auth/reset-password/reset-password.contents.html`, 61 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-in/mfa/mfa.contents.html`, 40 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-in/otp/verify/verify.contents.html`, 38 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-in/password/password.contents.html`, 52 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-in/sign-in.contents.html`, 50 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-up/mfa-setup/mfa-setup.contents.html`, 64 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-up/verify/verify.contents.html`, 38 lines (from User-flow templates) ## onboarding-wizard (3) > Onboarding multi-step wizards. Lift step-progress + section + cta-row pattern. - `apps/user-flow/app/onboarding/first-action/first-action.contents.html`, 77 lines (from User-flow templates) - `apps/user-flow/app/onboarding/welcome/welcome.contents.html`, 68 lines (from User-flow templates) - `catalog/ui-patterns/app/onboarding-checklist/onboarding-checklist.contents.html`, 46 lines (from UI-pattern atomics (catalog)) ## registration-wizard (5) > Registration multi-step flows. Lift wizard step + form composition. - `apps/saas/app/profile-security/profile-security.contents.html`, 524 lines (from SaaS app dashboards) - `apps/user-flow/app/auth/sign-up/profile/profile.contents.html`, 51 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-up/sign-up.contents.html`, 45 lines (from User-flow templates) - `apps/user-flow/app/registration/profile/profile.contents.html`, 51 lines (from User-flow templates) - `catalog/ui-patterns/app/user-profile-card/user-profile-card.contents.html`, 34 lines (from UI-pattern atomics (catalog)) ## list-with-detail (3) > List + detail compositions (entity rows + drawer/modal detail). Lift entity-item + drawer pattern. - `apps/saas/app/members/members.contents.html`, 447 lines (from SaaS app dashboards) - `apps/user-flow/app/registration/team-size/team-size.contents.html`, 73 lines (from User-flow templates) - `catalog/ui-patterns/app/users-table-badge/users-table-badge.contents.html`, 42 lines (from UI-pattern atomics (catalog)) ## integrations-list (3) > Searchable integration/connector grids. Lift grid-ui + card-ui + empty-state-inside-card pattern. - `apps/saas/app/integrations/integrations.contents.html`, 856 lines (from SaaS app dashboards) - `apps/user-flow/app/registration/integrations/integrations.contents.html`, 109 lines (from User-flow templates) - `catalog/ui-patterns/app/api-key-table/api-key-table.contents.html`, 22 lines (from UI-pattern atomics (catalog)) ## agent-activity (3) > Agent activity / reasoning feeds. Lift activity-feed scroll + collapsed-reasoning pattern. - `catalog/ui-patterns/app/agent-activity-feed/agent-activity-feed.contents.html`, 17 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/agent-reasoning-collapsed/agent-reasoning-collapsed.contents.html`, 13 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/agent-canvas/agent-canvas.contents.html`, 56 lines (from Page-shell templates (catalog)) ## chat (3) > Chat surfaces (thread, composer, sidebar). Lift chat-streaming-surface composition. - `apps/genui/app/factory-chat/factory-chat.contents.html`, 48 lines (from GenUI app routes) - `catalog/ui-patterns/app/chat-streaming-surface/chat-streaming-surface.contents.html`, 16 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/chat-page/chat-page.contents.html`, 67 lines (from Page-shell templates (catalog)) ## editor (7) > Editor panes (code, preview, toolbar). Lift editor-shell composition. - `apps/genui/app/a2ui-editor/a2ui-editor.contents.html`, 261 lines (from GenUI app routes) - `apps/genui/app/render-preview/render-preview.contents.html`, 93 lines (from GenUI app routes) - `catalog/ui-patterns/app/editor-code-pane/editor-code-pane.contents.html`, 16 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/editor-preview-pane/editor-preview-pane.contents.html`, 13 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/split-pane-editor/split-pane-editor.contents.html`, 31 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/doc-editor/doc-editor.contents.html`, 65 lines (from Page-shell templates (catalog)) - `catalog/page-shells/app/editor-page/editor-page.contents.html`, 25 lines (from Page-shell templates (catalog)) ## kanban (2) > Kanban / column-based boards. Lift kanban-board-3col pattern. - `catalog/ui-patterns/app/kanban-board-3col/kanban-board-3col.contents.html`, 145 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/kanban-page/kanban-page.contents.html`, 121 lines (from Page-shell templates (catalog)) ## data-table (5) > Data tables with badges/inline actions. Lift users-table-badge composition. - `apps/user-flow/app/onboarding/import-data/import-data.contents.html`, 70 lines (from User-flow templates) - `catalog/ui-patterns/app/card-grid-images/card-grid-images.contents.html`, 91 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/feature-grid-icons/feature-grid-icons.contents.html`, 60 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/permission-matrix-table/permission-matrix-table.contents.html`, 58 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/sortable-search-table/sortable-search-table.contents.html`, 23 lines (from UI-pattern atomics (catalog)) ## command (1) > Command palette / global search. Lift command-palette overlay pattern. - `catalog/ui-patterns/app/command-palette/command-palette.contents.html`, 46 lines (from UI-pattern atomics (catalog)) ## overlay (2) > Modals, drawers, popovers. Lift destructive-confirm-modal pattern for confirmations. - `apps/user-flow/app/registration/confirmation/confirmation.contents.html`, 79 lines (from User-flow templates) - `catalog/ui-patterns/app/destructive-confirm-modal/destructive-confirm-modal.contents.html`, 28 lines (from UI-pattern atomics (catalog)) ## multi-step-funnel (1) > Multi-step conversion funnels. Lift conversion-funnel-6step composition. - `catalog/ui-patterns/app/conversion-funnel-6step/conversion-funnel-6step.contents.html`, 26 lines (from UI-pattern atomics (catalog)) ## feed (2) > Activity / event feeds. Lift activity-feed composition. - `apps/genui/app/gen-ui-feed/gen-ui-feed.contents.html`, 390 lines (from GenUI app routes) - `catalog/ui-patterns/app/order-tracking-timeline/order-tracking-timeline.contents.html`, 45 lines (from UI-pattern atomics (catalog)) ## marketing (2) > Marketing pages, hero CTAs. Lift marketing-hero-cta composition. - `catalog/ui-patterns/app/marketing-hero-cta/marketing-hero-cta.contents.html`, 17 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/marketing-page/marketing-page.contents.html`, 55 lines (from Page-shell templates (catalog)) ## error-page (6) > Error states (404, 500, forbidden, expired). Lift centered single-card error pattern. - `apps/user-flow/app/auth/account-deleted/account-deleted.contents.html`, 40 lines (from User-flow templates) - `apps/user-flow/app/auth/account-locked/account-locked.contents.html`, 40 lines (from User-flow templates) - `apps/user-flow/app/auth/forbidden/forbidden.contents.html`, 38 lines (from User-flow templates) - `apps/user-flow/app/auth/link-expired/link-expired.contents.html`, 41 lines (from User-flow templates) - `apps/user-flow/app/auth/session-expired/session-expired.contents.html`, 37 lines (from User-flow templates) - `catalog/page-shells/app/error-page/error-page.contents.html`, 20 lines (from Page-shell templates (catalog)) ## demo-playground (3) > Internal demo + playground surfaces. Use these as reference for composition style; not always production-grade. - `apps/genui/app/a2ui/a2ui.contents.html`, 48 lines (from GenUI app routes) - `apps/genui/app/css-channel-demo/css-channel-demo.contents.html`, 70 lines (from GenUI app routes) - `apps/genui/app/streams-bridge/streams-bridge.contents.html`, 80 lines (from GenUI app routes) ## other (44) > Misc canonicals. Inspect contents.html to determine UI type. - `apps/genui/app/gen-ui/gen-ui.contents.html`, 47 lines (from GenUI app routes) - `apps/genui/app/patient-visit/patient-visit.contents.html`, 58 lines (from GenUI app routes) - `apps/user-flow/app/auth/accept-invite/accept-invite.contents.html`, 52 lines (from User-flow templates) - `apps/user-flow/app/auth/forgot-password/sent/sent.contents.html`, 33 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-in/magic-link/sent/sent.contents.html`, 35 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-in/mfa/recovery/recovery.contents.html`, 46 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-out/sign-out.contents.html`, 33 lines (from User-flow templates) - `apps/user-flow/app/auth/sign-up/sso-only/sso-only.contents.html`, 41 lines (from User-flow templates) - `apps/user-flow/app/onboarding/browser-extension/browser-extension.contents.html`, 69 lines (from User-flow templates) - `apps/user-flow/app/onboarding/complete/complete.contents.html`, 82 lines (from User-flow templates) - `apps/user-flow/app/onboarding/connect-source/connect-source.contents.html`, 82 lines (from User-flow templates) - `apps/user-flow/app/onboarding/mobile-app/mobile-app.contents.html`, 67 lines (from User-flow templates) - `apps/user-flow/app/onboarding/mode/mode.contents.html`, 50 lines (from User-flow templates) - `apps/user-flow/app/onboarding/review/review.contents.html`, 301 lines (from User-flow templates) - `apps/user-flow/app/registration/address/address.contents.html`, 253 lines (from User-flow templates) - `apps/user-flow/app/registration/brand-scrape/brand-scrape.contents.html`, 156 lines (from User-flow templates) - `apps/user-flow/app/registration/departments/departments.contents.html`, 91 lines (from User-flow templates) - `apps/user-flow/app/registration/done/done.contents.html`, 281 lines (from User-flow templates) - `apps/user-flow/app/registration/import/import.contents.html`, 79 lines (from User-flow templates) - `apps/user-flow/app/registration/invite/invite.contents.html`, 99 lines (from User-flow templates) - `apps/user-flow/app/registration/legal/legal.contents.html`, 102 lines (from User-flow templates) - `apps/user-flow/app/registration/org-review/org-review.contents.html`, 247 lines (from User-flow templates) - `apps/user-flow/app/registration/personal/personal.contents.html`, 146 lines (from User-flow templates) - `apps/user-flow/app/registration/plan/plan.contents.html`, 128 lines (from User-flow templates) - `apps/user-flow/app/registration/support/support.contents.html`, 146 lines (from User-flow templates) - `apps/user-flow/app/registration/use-case/use-case.contents.html`, 77 lines (from User-flow templates) - `apps/user-flow/app/registration/workspace/workspace.contents.html`, 45 lines (from User-flow templates) - `catalog/ui-patterns/app/email-inbox-list/email-inbox-list.contents.html`, 135 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/filter-popover-form/filter-popover-form.contents.html`, 22 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/import-mapping/import-mapping.contents.html`, 217 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/loading-skeleton-placeholder/loading-skeleton-placeholder.contents.html`, 62 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/product-card-buy/product-card-buy.contents.html`, 39 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/social-media-post-card/social-media-post-card.contents.html`, 31 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/survey-rating-form/survey-rating-form.contents.html`, 31 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/testimonials-avatar-cards/testimonials-avatar-cards.contents.html`, 56 lines (from UI-pattern atomics (catalog)) - `catalog/ui-patterns/app/tooltip-hover/tooltip-hover.contents.html`, 12 lines (from UI-pattern atomics (catalog)) - `catalog/page-shells/app/form-page/form-page.contents.html`, 26 lines (from Page-shell templates (catalog)) - `catalog/page-shells/app/gallery-page/gallery-page.contents.html`, 79 lines (from Page-shell templates (catalog)) - `playgrounds/admin-shell/app/admin-shell.contents.html`, 99 lines (from Playgrounds) - `playgrounds/agent-admin/app/agent-admin.contents.html`, 29 lines (from Playgrounds) - `playgrounds/agent-chat/app/agent-chat.contents.html`, 28 lines (from Playgrounds) - `playgrounds/chat/app/chat.contents.html`, 49 lines (from Playgrounds) - `playgrounds/composed-flow/app/composed-flow.contents.html`, 294 lines (from Playgrounds) - `playgrounds/table-toolbar/app/table-toolbar.contents.html`, 31 lines (from Playgrounds) --- ## Maintenance Re-build this index: ```bash node /scripts/build-canonical-pattern-index.mjs # from the monorepo root ``` If a heuristic misclassifies a path (the file lands in `other` or the wrong UI type), update the `inferUiType()` regex in `scripts/build-canonical-pattern-index.mjs`.