changedInput schema / properties / files / items / properties / code / description
Previous value: -"Complete self-contained TSX. Sections receive { content }. Allowed imports: react, react-dom, lucide-react, framer-motion, clsx, tailwind-merge, embla-carousel-react; relative chrome (pages only); AND platform components via \"@/components/Runtime*\" (see PLATFORM COMPONENTS). Anything else fails validation. COLORS (so the design is theme-swappable in the editor): define your brand palette as CSS variables in a theme block (\":root { --color-primary; --color-secondary; --color-accent; + shades }\") and reference them as var(--color-primary) everywhere brand color appears. Neutrals (white/black/greys) may be literal Tailwind classes. Do NOT hardcode brand hues as bg-indigo-600 or #hex — they will not be recolorable and defeat the palette switcher. PLATFORM COMPONENTS: prefer \"@/components/Runtime*\" over hand-building. Self-wiring (safe to use directly in an authored import): RuntimeOwnedVideo (Owned video with required src, poster and title; mode=\"hero\" for a muted loop, mode=\"testimonial\" for click-to-play. Respects reduced motion.), RuntimeForm (Site form; write its field config to content.forms[]), RuntimeInquiryForm (Enquiry form; field config in content.forms[]), RuntimeQuoteForm (Quote-request form; field config in content.forms[]), RuntimeDataView (renders rows a section is bound to; pass items={content.<section>?.items} — it makes no requests of its own), RuntimeCategoryListing (category listing over the site catalog), RuntimeQuiz (multi-step quiz), RuntimeDirectorySearch (hero search that takes visitors to the directory, filtered), RuntimeDirectoryListingDetail (the page for one business in a directory), RuntimeDirectoryRankedPage (a \"Best {niche} in {area}\" page, ranked from the directory), RuntimeAreaLinks (links to the \"Best in <area>\" pages a directory publishes), RuntimeFacetedCatalog (faceted catalog browse + filter), RuntimeGallery (image gallery + optional screenshot tour + lightbox), RuntimeAccordion (accordion / FAQ), RuntimeCarousel (carousel / slider), RuntimeTabs (tabbed panels), RuntimeMap (embedded map). Owner-setup-required (these render but stay INERT on import until the owner activates the feature — do NOT rely on them in authored code; add them through refine_site instead, which runs the activation pipeline): RuntimeBookingWidget, RuntimeBookingDirectory (Team or branches cards from Appointments, each with a Book button), RuntimePaymentButton, RuntimeCart, RuntimeProductDetail, RuntimeCheckout, RuntimeFunnelCheckout, RuntimeFunnelOptin, RuntimeFunnelUpsell, RuntimeListingClaim (\"is this your business?\" claim + report form for a directory listing), RuntimeListingUpgrade (paid placement picker for a directory listing), RuntimeListingSubmit (public \"add your business\" form for a directory), RuntimeCustomerPortal, RuntimePortalCollection."New value: +"Complete self-contained TSX. Sections receive { content }. Allowed imports: react, react-dom, lucide-react, framer-motion, clsx, tailwind-merge, embla-carousel-react; relative chrome (pages only); AND platform components via \"@/components/Runtime*\" (see PLATFORM COMPONENTS). Anything else fails validation. COLORS (so the design is theme-swappable in the editor): define your brand palette as CSS variables in a theme block (\":root { --color-primary; --color-secondary; --color-accent; + shades }\") and reference them as var(--color-primary) everywhere brand color appears. Neutrals (white/black/greys) may be literal Tailwind classes. Do NOT hardcode brand hues as bg-indigo-600 or #hex — they will not be recolorable and defeat the palette switcher. PLATFORM COMPONENTS: prefer \"@/components/Runtime*\" over hand-building. Self-wiring (safe to use directly in an authored import): RuntimeOwnedVideo (Owned video with required src, poster and title; mode=\"hero\" for a muted loop, mode=\"testimonial\" for click-to-play. Respects reduced motion.), RuntimeForm (Site form; write its field config to content.forms[]), RuntimeInquiryForm (Enquiry form; field config in content.forms[]), RuntimeQuoteForm (Quote-request form; field config in content.forms[]), RuntimeDataView (renders rows a section is bound to; pass items={content.<section>?.items} — it makes no requests of its own), RuntimeCategoryListing (category listing over the site catalog), RuntimeQuiz (multi-step quiz), RuntimeDirectorySearch (hero search that takes visitors to the directory, filtered), RuntimeDirectoryListingDetail (the page for one business in a directory), RuntimeDirectoryRankedPage (a \"Best {niche} in {area}\" page, ranked from the directory), RuntimeAreaLinks (links to the \"Best in <area>\" pages a directory publishes), RuntimeFacetedCatalog (faceted catalog browse + filter), RuntimeGallery (image gallery + optional screenshot tour + lightbox), RuntimeAccordion (accordion / FAQ), RuntimeCarousel (carousel / slider), RuntimeTabs (tabbed panels), RuntimeMap (embedded map), RuntimeBrandIcon (Brand logos in brand colours (Instagram, Facebook, X, LinkedIn, TikTok, Pinterest, WhatsApp, YouTube, Google, Yelp…): <RuntimeBrandIcon brand=\"pinterest\" className=\"h-5 w-5\" />.). Owner-setup-required (these render but stay INERT on import until the owner activates the feature — do NOT rely on them in authored code; add them through refine_site instead, which runs the activation pipeline): RuntimeBookingWidget, RuntimeBookingDirectory (Team or branches cards from Appointments, each with a Book button), RuntimePaymentButton, RuntimeCart, RuntimeProductDetail, RuntimeCheckout, RuntimeFunnelCheckout, RuntimeFunnelOptin, RuntimeFunnelUpsell, RuntimeListingClaim (\"is this your business?\" claim + report form for a directory listing), RuntimeListingUpgrade (paid placement picker for a directory listing), RuntimeListingSubmit (public \"add your business\" form for a directory), RuntimeCustomerPortal, RuntimePortalCollection."