# elise-studio-components ## Thumbnail carousel galleries Set `Gallery.layout` to `thumbnail-carousel` for a large photo with square previous/next controls and a strip of five visible thumbnails below it. At desktop widths (1024px and up), arrows appear on photo hover or keyboard focus when the device has a fine, hover-capable pointer. Smaller tablet/mobile viewports and touch-only devices hide the arrows; tappable thumbnails remain available alongside swipes. Swipe left/right on the main photo to navigate on touch screens; vertical scrolling and pinch zoom remain available, and a tap opens the lightbox. Clicking a thumbnail selects that photo; the active border and strip stay synchronized with the arrows. Selecting a photo smoothly shifts its thumbnail to the left edge of the strip, stopping at the end so the last five thumbnails stay filled. Overflow supports touch scrolling; only the strip moves, not the surrounding page. Reduced-motion preferences disable the smooth animation. Focused thumbnails support Left/Right arrows and Home/End as well as native Enter/Space activation. This layout supports category filters and independent section galleries, static images and live property media. `carouselAccentColor` controls the arrows and selected border, defaulting to the site's primary theme color. Existing tile height, image fit, radius, and responsive settings still apply; the default stage aspect ratio is 4:3. Clicking the large photo opens the existing lightbox; `lightboxThumbnails` controls only the overlay's optional thumbnail strip. The editor and compiler receive the new layout through the generated component schema (version 37). Release the package and update the consuming editor/compiler versions before selecting this layout in production. ## Curated floor plan catalogs `FloorplanCatalog` is a grouped, selector-and-accordion presentation of live Elise floor plans. Each authored plan is a reference to an Elise floor plan id; references missing from the authenticated property API are not rendered. Authored JSON controls group order, marketing copy, actions, optional image fallbacks, and an optional square-footage marketing label. API records remain the source of identity, bed/bath values, availability, rent, and preferred media. The component follows all cursor pages so a curated id is not lost beyond the first response page, and stops safely if the API repeats a cursor. The catalog uses Studio's keyed `sm` through `2xl` responsive contract and a semantic `collapseAt` breakpoint. Actions reuse the canonical Button contract, navigation stays router-aware, analytics emit canonical API floor plan ids, and images use the shared accessible Lightbox. `FloorplanExplorer` remains unchanged for uncurated listing grids and lists. A validated `compactPresentation` object controls accordion typography, rhythm, panel insets, and action alignment below the collapse breakpoint without relying on arbitrary classes or site templates. The opt-in `desktopPresentation: "workspace"` mode integrates a bounded, scrollable grouped selector with a stable summary-and-drawing canvas for larger catalogs. Selector headings, counts, and API-backed plan details are separately configurable. Below `collapseAt`, `compactDisclosure: "single"` turns the same catalog into a globally single-open inline accordion; responsive detail columns and connected panel styling remain authored presentation choices. The default `split`/`perGroup` behavior and API contract are unchanged. ## Motion and background media `BackgroundMedia` is a generic frame for decorative image or muted video backgrounds. It accepts normal Studio children, so headings, buttons, and data components remain independently editable. The optional `parallax` motion moves only the media layer; overlay content and document layout stay fixed. Video is paused outside the viewport and replaced by its poster or image when the visitor requests reduced motion. If no still is authored, a paused first video frame is used instead. ```json { "type": "BackgroundMedia", "props": { "video": { "$content": "hero.video" }, "poster": { "$content": "hero.poster" }, "minHeight": "90vh", "contentPosition": "bottom-left", "motion": "parallax" }, "children": [ { "type": "Text", "props": { "content": { "$content": "hero.headline" }, "variant": "display" } } ] } ``` `Parallax` applies the same bounded, request-animation-frame scroll transform to any child subtree. `StickyFrame` pins a subtree within its parent scroll range and defaults to normal flow on mobile. Together with `Grid`, `Container`, and `ScrollReveal`, these frames support sticky storytelling, independently moving media, and layered editorial sections without site-specific JavaScript or CSS. All motion is progressive enhancement: server output remains visible, unsupported browsers retain a static layout, and operating-system reduced-motion preferences disable continuous translation. ## Atlas authoring contract The exported component schema includes optional `authoring` metadata for Atlas and semantic validators. It describes component roles, breakpoint-aware props, composition constraints, required context, relative performance cost, stable repair hints, and recommended recipe IDs. Runtime rendering ignores this metadata. The generated `dist/componentSchema.json` versions the component schema, authoring contract, and diagnostic envelope independently. Diagnostics use a shared shape and may include existing Studio design operations for Atlas to apply: ```json { "code": "STICKY_MEDIA_OVERLAP", "severity": "error", "nodeId": "hero-media", "breakpoint": "sm", "message": "The transformed media can leave its sticky boundary.", "suggestedOperations": [ { "type": "set_node_prop", "node_id": "hero-media", "prop_path": ["motion"], "value": "none" } ] } ``` `validateAuthoringTree` is the shared, side-effect-free semantic validator used by Atlas, preview, and compiler consumers. It checks required props, component nesting, authoring contexts, incompatibilities, deprecations, and an optional normalized performance budget without resolving or rendering the tree: ```ts const { diagnostics, performanceCost } = validateAuthoringTree(page.tree, { availableContexts: ["property"], performanceBudget: 24, path: "pages[0].tree", }); ``` Errors represent invalid authoring decisions; warnings cover deprecations, unknown props, and budget pressure. When a safe default exists, a diagnostic may include a typed Studio design operation that Atlas can apply as a repair. ## Atlas composition recipes The `@meetelise/studio-components/recipes` export and generated `dist/authoringRecipes.json` provide versioned, validated section blueprints. Each recipe declares its content fields, required site contexts, normalized performance budget, and a normal Studio component tree using `$content` bindings. The initial catalog includes editorial hero, split-media story, sticky-media story, and availability/conversion compositions. Recipes are build-validated against the canonical component schema and semantic validator. A build fails if a recipe references an unknown component, an undeclared content key, or a missing recipe ID. Atlas can therefore select a recipe, create its declared content fields, and insert the tree through ordinary typed Studio operations. ## Amenity presentations `AmenityList` keeps layout and ordering independent. Existing sites continue to use the alphabetized icon-grid default, while `order="source"` preserves the first occurrence of each amenity from either authored content or the Elise property API. The opt-in `bulleted` layout emits semantic `ul`/`li` markup and uses theme body typography. Its indentation, item spacing, and typography can be adjusted through the validated `bulletPresentation` object without baking a property's measurements into the shared component. ## Overlay navigation below preceding content Use `Container display="grid" overlapChildren` to layer navigation over page content while earlier content, such as a specials banner, stays in document flow: ```tsx