@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/manifest/index.js

@@ -0,0 +1,486 @@
+// The LLM-facing manifest of every Ripple widget, aggregated into
+// dist/manifest.json (and static/manifest.json for the dev server) by
+// scripts/build-manifest.ts.
+//
+// Per-widget entries live in ./entries/<kebab-type>.ts. Adding a widget needs
+// both a new entry file AND the import + array entry below.
+//
+// The action grammar and spec envelope come from @ripple-ui/core/manifest
+// (they describe the engine) and are re-exported unchanged. So does the craft
+// data: buildManifest() stamps `data: true` on every prop core's DATA_PROPS
+// lists and carries core's reviewed `waivers`, its `intents` map and its
+// `craft` rules and lenses, so the build loop, pocketpaw and the skill read
+// one copy. The version comes from src/lib/version.ts, a
+// plain constant: this module is a client dependency (the visual editor), and
+// importing package.json here 500s `vite dev`.
+// Each entry may carry `staticSafe` (renders with JavaScript off) and a
+// runnable `pocket`; the top-level `motion` block documents the node-level
+// `motion` field.
+import { RIPPLE_VERSION } from '../version.js';
+import { manifestActions } from './actions.js';
+// ActionSpec, SpecEnvelope and specEnvelope moved to @ripple-ui/core/manifest on
+// 2026-09-27 (they describe the engine, not any widget). Re-exported so every
+// existing import from this module keeps working.
+import { specEnvelope, DATA_PROPS, waivers, craft, intents } from '@ripple-ui/core/manifest';
+export { specEnvelope };
+import { accordionEntry } from './entries/accordion.js';
+import { alertEntry } from './entries/alert.js';
+import { analystBarEntry } from './entries/analyst-bar.js';
+import { approvalGateEntry } from './entries/approval-gate.js';
+import { animatedBeamEntry } from './entries/animated-beam.js';
+import { apiKeyEntry } from './entries/api-key.js';
+import { appShellEntry } from './entries/app-shell.js';
+import { askUserQuestionsEntry } from './entries/ask-user-questions.js';
+import { articleMetaEntry } from './entries/article-meta.js';
+import { audioEntry } from './entries/audio.js';
+import { auditLogEntry } from './entries/audit-log.js';
+import { auroraEntry } from './entries/aurora.js';
+import { avatarEntry } from './entries/avatar.js';
+import { avatarGroupEntry } from './entries/avatar-group.js';
+import { badgeEntry } from './entries/badge.js';
+import { bentoGridEntry } from './entries/bento-grid.js';
+import { borderBeamEntry } from './entries/border-beam.js';
+import { breadcrumbEntry } from './entries/breadcrumb.js';
+import { bulkActionBarEntry } from './entries/bulk-action-bar.js';
+import { buttonEntry } from './entries/button.js';
+import { c4Entry } from './entries/c4.js';
+import { calendarEntry } from './entries/calendar.js';
+import { calloutEntry } from './entries/callout.js';
+import { cardEntry } from './entries/card.js';
+import { chartEntry } from './entries/chart.js';
+import { checkboxEntry } from './entries/checkbox.js';
+import { checkboxGroupEntry } from './entries/checkbox-group.js';
+import { chipEntry } from './entries/chip.js';
+import { citationEntry } from './entries/citation.js';
+import { coachmarkEntry } from './entries/coachmark.js';
+import { codeEntry } from './entries/code.js';
+import { codeBlockEntry } from './entries/code-block.js';
+import { codeEditorEntry } from './entries/code-editor.js';
+import { collapsibleEntry } from './entries/collapsible.js';
+import { colorPickerEntry } from './entries/color-picker.js';
+import { comboboxEntry } from './entries/combobox.js';
+import { commandPaletteEntry } from './entries/command-palette.js';
+import { commentThreadEntry } from './entries/comment-thread.js';
+import { companyHeaderEntry } from './entries/company-header.js';
+import { analyticsDashboardEntry } from './entries/analytics-dashboard.js';
+import { checklistLayoutEntry } from './entries/checklist-layout.js';
+import { comparisonLayoutEntry } from './entries/comparison-layout.js';
+import { comparisonTableEntry } from './entries/comparison-table.js';
+import { confirmDialogEntry } from './entries/confirm-dialog.js';
+import { containerEntry } from './entries/container.js';
+import { ctaEntry } from './entries/cta.js';
+import { contextMenuEntry } from './entries/context-menu.js';
+import { copyEntry } from './entries/copy.js';
+import { dashboardEntry } from './entries/dashboard.js';
+import { dashboardSlotEntry } from './entries/dashboard-slot.js';
+import { dataGridEntry } from './entries/data-grid.js';
+import { datePickerEntry } from './entries/date-picker.js';
+import { definitionListEntry } from './entries/definition-list.js';
+import { diffEntry } from './entries/diff.js';
+import { discoverCardEntry } from './entries/discover-card.js';
+import { drawingCanvasEntry } from './entries/drawing-canvas.js';
+import { dropdownMenuEntry } from './entries/dropdown-menu.js';
+import { eachEntry } from './entries/each.js';
+import { embedEntry } from './entries/embed.js';
+import { emptyStateEntry } from './entries/empty-state.js';
+import { entityDetailEntry } from './entries/entity-detail.js';
+import { bookingEntry } from './entries/booking.js';
+import { execDashboardEntry } from './entries/exec-dashboard.js';
+import { errorStateEntry } from './entries/error-state.js';
+import { faqEntry } from './entries/faq.js';
+import { featureGridEntry } from './entries/feature-grid.js';
+import { fileUploadEntry } from './entries/file-upload.js';
+import { fillGridEntry } from './entries/fill-grid.js';
+import { filterBarEntry } from './entries/filter-bar.js';
+import { flashcardEntry } from './entries/flashcard.js';
+import { flexEntry } from './entries/flex.js';
+import { followUpEntry } from './entries/follow-up.js';
+import { footerEntry } from './entries/footer.js';
+import { formEntry } from './entries/form.js';
+import { formLayoutEntry } from './entries/form-layout.js';
+import { funnelEntry } from './entries/funnel.js';
+import { ganttEntry } from './entries/gantt.js';
+import { gaugeEntry } from './entries/gauge.js';
+import { glassCardEntry } from './entries/glass-card.js';
+import { glyphGridEntry } from './entries/glyph-grid.js';
+import { gridEntry } from './entries/grid.js';
+import { headingEntry } from './entries/heading.js';
+import { heatmapEntry } from './entries/heatmap.js';
+import { heroEntry } from './entries/hero.js';
+import { highlightEntry } from './entries/highlight.js';
+import { hoverCardEntry } from './entries/hover-card.js';
+import { iconEntry } from './entries/icon.js';
+import { ifEntry } from './entries/if.js';
+import { imageEntry } from './entries/image.js';
+import { illustrationEntry } from './entries/illustration.js';
+import { inputEntry } from './entries/input.js';
+import { invoiceLayoutEntry } from './entries/invoice-layout.js';
+import { invoiceLinesEntry } from './entries/invoice-lines.js';
+import { itineraryEntry } from './entries/itinerary.js';
+import { growthProjectionEntry } from './entries/growth-projection.js';
+import { billSplitEntry } from './entries/bill-split.js';
+import { intervalWorkoutEntry } from './entries/interval-workout.js';
+import { habitTrackerEntry } from './entries/habit-tracker.js';
+import { standupBoardEntry } from './entries/standup-board.js';
+import { notesEntry } from './entries/notes.js';
+import { placeResultsEntry } from './entries/place-results.js';
+import { productGridEntry } from './entries/product-grid.js';
+import { mediaGridEntry } from './entries/media-grid.js';
+import { focusTimerEntry } from './entries/focus-timer.js';
+import { musicPlayerEntry } from './entries/music-player.js';
+import { isoSceneEntry } from './entries/iso-scene.js';
+import { figureEntry } from './entries/figure.js';
+import { flashcardDeckEntry } from './entries/flashcard-deck.js';
+import { wordGuessEntry } from './entries/word-guess.js';
+import { quizEntry } from './entries/quiz.js';
+import { memoryMatchEntry } from './entries/memory-match.js';
+import { boardGameEntry } from './entries/board-game.js';
+import { agendaEntry } from './entries/agenda.js';
+import { weekScheduleEntry } from './entries/week-schedule.js';
+import { weatherForecastEntry } from './entries/weather-forecast.js';
+import { kanbanEntry } from './entries/kanban.js';
+import { kbdEntry } from './entries/kbd.js';
+import { kvTableEntry } from './entries/kv-table.js';
+import { ledClockEntry } from './entries/led-clock.js';
+import { linkPreviewEntry } from './entries/link-preview.js';
+import { loadingEntry } from './entries/loading.js';
+import { locationPickerEntry } from './entries/location-picker.js';
+import { logoCloudEntry } from './entries/logo-cloud.js';
+import { mapEntry } from './entries/map.js';
+import { markdownEntry } from './entries/markdown.js';
+import { marketingHeroEntry } from './entries/marketing-hero.js';
+import { marqueeEntry } from './entries/marquee.js';
+import { masterDetailEntry } from './entries/master-detail.js';
+import { mealPlanEntry } from './entries/meal-plan.js';
+import { mentionEntry } from './entries/mention.js';
+import { metricEntry } from './entries/metric.js';
+import { modalEntry } from './entries/modal.js';
+import { modelViewerEntry } from './entries/model-viewer.js';
+import { motionDoc } from './motion-doc.js';
+import { multiSelectEntry } from './entries/multi-select.js';
+import { navbarEntry } from './entries/navbar.js';
+import { newsCardEntry } from './entries/news-card.js';
+import { newsletterEntry } from './entries/newsletter.js';
+import { notificationCenterEntry } from './entries/notification-center.js';
+import { numberInputEntry } from './entries/number-input.js';
+import { opsDashboardEntry } from './entries/ops-dashboard.js';
+import { orderStatusEntry } from './entries/order-status.js';
+import { menuOrderEntry } from './entries/menu-order.js';
+import { orgChartEntry } from './entries/org-chart.js';
+import { otpInputEntry } from './entries/otp-input.js';
+import { pageHeaderEntry } from './entries/page-header.js';
+import { parallaxEntry } from './entries/parallax.js';
+import { peoplePickerEntry } from './entries/people-picker.js';
+import { pipelineDashboardEntry } from './entries/pipeline-dashboard.js';
+import { permissionMatrixEntry } from './entries/permission-matrix.js';
+import { popoverEntry } from './entries/popover.js';
+import { pricingTableEntry } from './entries/pricing-table.js';
+import { progressEntry } from './entries/progress.js';
+import { progressRingEntry } from './entries/progress-ring.js';
+import { projectDashboardEntry } from './entries/project-dashboard.js';
+import { prosConsEntry } from './entries/pros-cons.js';
+import { qrEntry } from './entries/qr.js';
+import { quoteEntry } from './entries/quote.js';
+import { radioGroupEntry } from './entries/radio-group.js';
+import { rangeBarEntry } from './entries/range-bar.js';
+import { ratingEntry } from './entries/rating.js';
+import { reasoningTraceEntry } from './entries/reasoning-trace.js';
+import { recipeEntry } from './entries/recipe.js';
+import { reportLayoutEntry } from './entries/report-layout.js';
+import { revealEntry } from './entries/reveal.js';
+import { richTextEntry } from './entries/rich-text.js';
+import { richtextEntry } from './entries/richtext.js';
+import { rippleFrameEntry } from './entries/ripple-frame.js';
+import { sankeyEntry } from './entries/sankey.js';
+import { savedViewsEntry } from './entries/saved-views.js';
+import { searchEntry } from './entries/search.js';
+import { sectionEntry } from './entries/section.js';
+import { segmentedEntry } from './entries/segmented.js';
+import { seismographEntry } from './entries/seismograph.js';
+import { selectEntry } from './entries/select.js';
+import { separatorEntry } from './entries/separator.js';
+import { settingsListEntry } from './entries/settings-list.js';
+import { sheetEntry } from './entries/sheet.js';
+import { shimmerEntry } from './entries/shimmer.js';
+import { sidebarEntry } from './entries/sidebar.js';
+import { skeletonEntry } from './entries/skeleton.js';
+import { sliderEntry } from './entries/slider.js';
+import { soulStatusEntry } from './entries/soul-status.js';
+import { sourceCardEntry } from './entries/source-card.js';
+import { sourcesBarEntry } from './entries/sources-bar.js';
+import { sparklineEntry } from './entries/sparkline.js';
+import { splitEntry } from './entries/split.js';
+import { spotlightEntry } from './entries/spotlight.js';
+import { statEntry } from './entries/stat.js';
+import { statusDotEntry } from './entries/status-dot.js';
+import { stepsEntry } from './entries/steps.js';
+import { streakBarsEntry } from './entries/streak-bars.js';
+import { streamTextEntry } from './entries/stream-text.js';
+import { switchEntry } from './entries/switch.js';
+import { tableEntry } from './entries/table.js';
+import { tabsEntry } from './entries/tabs.js';
+import { testimonialEntry } from './entries/testimonial.js';
+import { terminalEntry } from './entries/terminal.js';
+import { textEntry } from './entries/text.js';
+import { textEffectEntry } from './entries/text-effect.js';
+import { textareaEntry } from './entries/textarea.js';
+import { tickerEntry } from './entries/ticker.js';
+import { timelineEntry } from './entries/timeline.js';
+import { timePickerEntry } from './entries/time-picker.js';
+import { timerEntry } from './entries/timer.js';
+import { todoListEntry } from './entries/todo-list.js';
+import { toastEntry } from './entries/toast.js';
+import { toolCallEntry } from './entries/tool-call.js';
+import { tooltipEntry } from './entries/tooltip.js';
+import { treeEntry } from './entries/tree.js';
+import { treemapEntry } from './entries/treemap.js';
+import { treeTableEntry } from './entries/tree-table.js';
+import { trendEntry } from './entries/trend.js';
+import { videoEntry } from './entries/video.js';
+import { virtualListEntry } from './entries/virtual-list.js';
+import { wizardLayoutEntry } from './entries/wizard-layout.js';
+import { workflowEntry } from './entries/workflow.js';
+export const manifestEntries = [
+    accordionEntry,
+    alertEntry,
+    analystBarEntry,
+    animatedBeamEntry,
+    apiKeyEntry,
+    askUserQuestionsEntry,
+    appShellEntry,
+    articleMetaEntry,
+    auditLogEntry,
+    auroraEntry,
+    avatarEntry,
+    avatarGroupEntry,
+    badgeEntry,
+    bentoGridEntry,
+    borderBeamEntry,
+    breadcrumbEntry,
+    bulkActionBarEntry,
+    buttonEntry,
+    c4Entry,
+    calendarEntry,
+    calloutEntry,
+    cardEntry,
+    chartEntry,
+    checkboxEntry,
+    checkboxGroupEntry,
+    chipEntry,
+    citationEntry,
+    coachmarkEntry,
+    codeEntry,
+    codeBlockEntry,
+    codeEditorEntry,
+    collapsibleEntry,
+    colorPickerEntry,
+    comboboxEntry,
+    commandPaletteEntry,
+    commentThreadEntry,
+    companyHeaderEntry,
+    analyticsDashboardEntry,
+    checklistLayoutEntry,
+    comparisonLayoutEntry,
+    comparisonTableEntry,
+    confirmDialogEntry,
+    containerEntry,
+    ctaEntry,
+    contextMenuEntry,
+    copyEntry,
+    dashboardEntry,
+    dashboardSlotEntry,
+    dataGridEntry,
+    datePickerEntry,
+    definitionListEntry,
+    diffEntry,
+    discoverCardEntry,
+    dropdownMenuEntry,
+    eachEntry,
+    embedEntry,
+    emptyStateEntry,
+    entityDetailEntry,
+    execDashboardEntry,
+    errorStateEntry,
+    faqEntry,
+    featureGridEntry,
+    fileUploadEntry,
+    filterBarEntry,
+    flexEntry,
+    followUpEntry,
+    footerEntry,
+    formEntry,
+    formLayoutEntry,
+    funnelEntry,
+    ganttEntry,
+    gaugeEntry,
+    glassCardEntry,
+    gridEntry,
+    headingEntry,
+    heatmapEntry,
+    heroEntry,
+    highlightEntry,
+    hoverCardEntry,
+    iconEntry,
+    ifEntry,
+    imageEntry,
+    illustrationEntry,
+    inputEntry,
+    invoiceLayoutEntry,
+    invoiceLinesEntry,
+    itineraryEntry,
+    growthProjectionEntry,
+    billSplitEntry,
+    kanbanEntry,
+    kbdEntry,
+    kvTableEntry,
+    linkPreviewEntry,
+    loadingEntry,
+    locationPickerEntry,
+    logoCloudEntry,
+    mapEntry,
+    markdownEntry,
+    marketingHeroEntry,
+    marqueeEntry,
+    masterDetailEntry,
+    mealPlanEntry,
+    mentionEntry,
+    metricEntry,
+    modalEntry,
+    modelViewerEntry,
+    multiSelectEntry,
+    navbarEntry,
+    newsCardEntry,
+    newsletterEntry,
+    notificationCenterEntry,
+    numberInputEntry,
+    opsDashboardEntry,
+    orderStatusEntry,
+    bookingEntry,
+    menuOrderEntry,
+    intervalWorkoutEntry,
+    habitTrackerEntry,
+    standupBoardEntry,
+    notesEntry,
+    placeResultsEntry,
+    productGridEntry,
+    mediaGridEntry,
+    focusTimerEntry,
+    musicPlayerEntry,
+    isoSceneEntry,
+    figureEntry,
+    flashcardDeckEntry,
+    wordGuessEntry,
+    quizEntry,
+    memoryMatchEntry,
+    boardGameEntry,
+    agendaEntry,
+    weekScheduleEntry,
+    weatherForecastEntry,
+    orgChartEntry,
+    otpInputEntry,
+    pageHeaderEntry,
+    parallaxEntry,
+    peoplePickerEntry,
+    pipelineDashboardEntry,
+    permissionMatrixEntry,
+    popoverEntry,
+    pricingTableEntry,
+    progressEntry,
+    progressRingEntry,
+    projectDashboardEntry,
+    prosConsEntry,
+    qrEntry,
+    quoteEntry,
+    radioGroupEntry,
+    rangeBarEntry,
+    ratingEntry,
+    recipeEntry,
+    reportLayoutEntry,
+    revealEntry,
+    richTextEntry,
+    richtextEntry,
+    rippleFrameEntry,
+    sankeyEntry,
+    savedViewsEntry,
+    searchEntry,
+    sectionEntry,
+    segmentedEntry,
+    selectEntry,
+    separatorEntry,
+    settingsListEntry,
+    sheetEntry,
+    shimmerEntry,
+    sidebarEntry,
+    skeletonEntry,
+    sliderEntry,
+    soulStatusEntry,
+    sourceCardEntry,
+    sourcesBarEntry,
+    sparklineEntry,
+    splitEntry,
+    spotlightEntry,
+    statEntry,
+    statusDotEntry,
+    stepsEntry,
+    switchEntry,
+    tableEntry,
+    tabsEntry,
+    terminalEntry,
+    testimonialEntry,
+    textEntry,
+    textEffectEntry,
+    textareaEntry,
+    tickerEntry,
+    timelineEntry,
+    timePickerEntry,
+    toastEntry,
+    tooltipEntry,
+    treeEntry,
+    treemapEntry,
+    treeTableEntry,
+    trendEntry,
+    virtualListEntry,
+    wizardLayoutEntry,
+    workflowEntry,
+    // Composite consumer widgets (ocean-flow port, 2026-05-31)
+    todoListEntry,
+    drawingCanvasEntry,
+    timerEntry,
+    flashcardEntry,
+    audioEntry,
+    videoEntry,
+    // Console telemetry pack (feat/console-telemetry-widgets, 2026-06-13)
+    ledClockEntry,
+    seismographEntry,
+    glyphGridEntry,
+    fillGridEntry,
+    streakBarsEntry,
+    // AI-native display tier (feat/ai-native-widgets, 2026-06-24)
+    streamTextEntry,
+    toolCallEntry,
+    reasoningTraceEntry,
+    approvalGateEntry,
+];
+export function buildManifest() {
+    if (manifestEntries.length === 0) {
+        throw new Error('No manifest entries registered');
+    }
+    return {
+        schema: 'ripple.manifest/v1',
+        version: RIPPLE_VERSION,
+        generatedAt: new Date().toISOString(),
+        spec: specEnvelope,
+        actions: manifestActions,
+        motion: motionDoc,
+        widgets: manifestEntries.map((entry) => {
+            const data = DATA_PROPS[entry.type];
+            if (!data)
+                return entry;
+            const props = Object.fromEntries(Object.entries(entry.props).map(([name, spec]) => [name, data.includes(name) ? { ...spec, data: true } : spec]));
+            return { ...entry, props };
+        }),
+        waivers,
+        intents,
+        craft,
+    };
+}

package/dist/manifest/motion-doc.d.ts

@@ -0,0 +1,20 @@
+import type { MotionInput } from '@ripple-ui/core';
+import type { WidgetManifestEntry } from './index.js';
+export interface MotionDoc {
+    field: 'motion';
+    description: string;
+    /** The taste guardrail — the single most important rule for the LLM. */
+    budgetRule: string;
+    presets: Record<string, string>;
+    examples: Array<{
+        name: string;
+        description: string;
+        motion: MotionInput;
+    }>;
+    recipes: Array<{
+        name: string;
+        description: string;
+        ui: WidgetManifestEntry['example'];
+    }>;
+}
+export declare const motionDoc: MotionDoc;

package/dist/manifest/motion-doc.js

@@ -0,0 +1,60 @@
+// src/lib/manifest/motion-doc.ts
+// @file manifest/motion-doc.ts
+// @description The LLM-facing documentation for the node-level `motion` field:
+//   the vocabulary, the semantic presets, the "motion budget" taste rule, and
+//   named recipes the generator can lift. Shipped inside the manifest so the
+//   field is documented alongside the widget catalog.
+// @created 2026-05-30 — RFC 12 animation primitive.
+// @changes
+//   - 2026-05-30 (Task 3.5): reveal-section recipe inner node swapped from
+//     grid/card back to the now-shipped `feature-grid` marketing widget.
+//   - 2026-05-30 (Task 1.13 close-out): doc `examples[].motion` is typed
+//     MotionInput (author shape) instead of the post-parse Motion, so the
+//     reduceMotion-less literals below type-check without a redundant default;
+//     dropped the now-unneeded `as Motion['inView']` cast on section-reveal.
+//   - 2026-05-30 (PR #45 motion runtime close-out): documented that
+//     `transition.delay` is in SECONDS (Framer-style); added a `stagger-cascade`
+//     example so the LLM knows the per-card-delay idiom that drives a cascade.
+export const motionDoc = {
+    field: 'motion',
+    description: 'Add a `motion` field to ANY node (sibling to props/class/style, never inside props) to animate it. ' +
+        'Vocabulary: enter/exit, hover/tap/focus, inView (reveal on scroll), scroll (parallax), stagger, ' +
+        'and transition (use a semantic preset — never raw numbers). MotionState channels are GPU-safe only ' +
+        '(opacity, x, y, scale, rotate, blur). transition.delay is in SECONDS (e.g. 0.12 = 120ms); cascade a ' +
+        'row by giving each child delay = index * 0.12. Reduced-motion and SSR are handled by the runtime — do not add them.',
+    budgetRule: 'MOTION BUDGET: animate entrances and the PRIMARY call-to-action only. Leave everything else at rest. ' +
+        'Default transition is `snappy`. Over-animating reads as cheap — restraint reads as premium.',
+    presets: {
+        instant: 'tween 100ms — micro-feedback.',
+        snappy: 'spring, lively but controlled — the default for entrances and CTAs.',
+        smooth: 'tween 250ms decelerate — section reveals.',
+        gentle: 'tween 400ms — large hero elements.',
+        bouncy: 'spring with overshoot — playful accents, use rarely.',
+    },
+    examples: [
+        { name: 'hero-entrance', description: 'Fade + rise on load.', motion: { enter: { opacity: 0, y: 24 }, transition: { preset: 'snappy' } } },
+        { name: 'cta-hover', description: 'Lift the primary button on hover.', motion: { hover: { y: -2, scale: 1.02 }, transition: { preset: 'snappy' } } },
+        { name: 'section-reveal', description: 'Reveal a section as it scrolls into view.', motion: { inView: { opacity: 0, y: 32, once: true }, transition: { preset: 'smooth' } } },
+        { name: 'stagger-cascade', description: 'Per-card cascade: each card fades+rises on scroll, offset by its index. delay is SECONDS.', motion: { inView: { opacity: 0, y: 28, once: true }, transition: { preset: 'smooth', delay: 0.24 } } },
+        { name: 'parallax-drift', description: 'Continuous parallax: contents drift on scroll bound to the view range.', motion: { scroll: { property: 'y', from: 40, to: -40, range: 'cover' } } },
+    ],
+    recipes: [
+        {
+            name: 'reveal-section',
+            description: 'A section whose heading and cards rise into view on scroll. The canonical landing-page reveal.',
+            ui: {
+                type: 'reveal',
+                props: { direction: 'up' },
+                children: [
+                    { type: 'section', props: { title: 'How it works', description: 'Three steps.' }, children: [
+                            { type: 'feature-grid', props: { columns: 3, features: [
+                                        { title: 'Build', description: 'Describe it in chat.' },
+                                        { title: 'Publish', description: 'One click to the edge.' },
+                                        { title: 'Edit forever', description: 'Keep changing it by chat.' },
+                                    ] } },
+                        ] },
+                ],
+            },
+        },
+    ],
+};