@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/blocks.js

@@ -0,0 +1,1007 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiBullhorn, mdiCurrencyUsd, mdiFacebook, mdiFormatQuoteClose, mdiGestureTapButton, mdiGithub, mdiHelpCircle, mdiImage as mdiImageIcon, mdiImageText, mdiInstagram, mdiLinkedin, mdiPageLayoutFooter, mdiPageLayoutHeader, mdiPlayCircle, mdiRocketLaunchOutline, mdiTwitter, mdiViewGridOutline, mdiYoutube } from "@aglyn/shared-data-mdi";
+import { AppLink, MdiIcon } from "@aglyn/shared-ui-jsx";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { forwardRef, useContext } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const VIDEO_EMBED_ID = 'videoEmbed';
+export const SOCIAL_LINKS_ID = 'socialLinks';
+/**
+ * Builds the embed src from a PARSED video id — the raw user URL is never
+ * placed in the iframe, so only youtube-nocookie/vimeo player origins can
+ * ever load (block-library security posture).
+ */ export function parseVideoEmbedSrc(url) {
+    try {
+        const parsed = new URL(url.trim());
+        const host = parsed.hostname.replace(/^www\./, '');
+        if (host === 'youtu.be') {
+            const id = parsed.pathname.slice(1);
+            return /^[\w-]{6,20}$/.test(id) ? `https://www.youtube-nocookie.com/embed/${id}` : null;
+        }
+        if (host === 'youtube.com' || host === 'm.youtube.com') {
+            var _parsed_searchParams_get;
+            const id = (_parsed_searchParams_get = parsed.searchParams.get('v')) != null ? _parsed_searchParams_get : parsed.pathname.startsWith('/embed/') ? parsed.pathname.split('/')[2] : parsed.pathname.startsWith('/shorts/') ? parsed.pathname.split('/')[2] : '';
+            return id && /^[\w-]{6,20}$/.test(id) ? `https://www.youtube-nocookie.com/embed/${id}` : null;
+        }
+        if (host === 'vimeo.com' || host === 'player.vimeo.com') {
+            const id = parsed.pathname.split('/').find((part)=>/^\d{6,}$/.test(part));
+            return id ? `https://player.vimeo.com/video/${id}` : null;
+        }
+    } catch (unused) {
+    /* invalid URL */ }
+    return null;
+}
+const VideoEmbed = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { url, height } = props, rest = _object_without_properties_loose(props, [
+        "url",
+        "height"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    const src = url ? parseVideoEmbedSrc(url) : null;
+    if (!src) {
+        // The hint is for the author, so only editing surfaces draw it; a
+        // published page renders the bare element.
+        if (!suppressNavigation) return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest));
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    width: '100%',
+                    height: height || 315,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    color: 'text.secondary',
+                    fontSize: 12,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Video — paste a YouTube or Vimeo URL'
+        }));
+    }
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref,
+        component: "iframe",
+        src: src,
+        title: "Embedded video",
+        loading: "lazy",
+        allow: "accelerometer; encrypted-media; picture-in-picture",
+        allowFullScreen: true,
+        sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups"
+    }, rest, {
+        sx: [
+            {
+                display: 'block',
+                width: '100%',
+                height: height || 315,
+                border: 0
+            },
+            ...nodeSx
+        ]
+    }));
+});
+VideoEmbed.displayName = 'AglynVideoEmbed';
+export const videoEmbedSchema = {
+    $id: VIDEO_EMBED_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Video',
+    description: "Embeds a YouTube or Vimeo player from the video's URL.",
+    category: Aglyn.ComponentCategory.MEDIA,
+    icon: {
+        path: mdiPlayCircle.path,
+        sx: {
+            color: '#d32f2f'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'url',
+            description: 'YouTube or Vimeo video URL.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Video URL'
+        },
+        {
+            name: 'height',
+            description: 'Height of the embed — a number plus a unit, e.g. 315px or 50vh.',
+            component: Aglyn.FieldComponentType.CSS_DIMENSION,
+            label: 'Height'
+        }
+    ]
+};
+const SOCIAL_NETWORKS = [
+    {
+        key: 'twitter',
+        label: 'Twitter / X',
+        path: mdiTwitter.path
+    },
+    {
+        key: 'instagram',
+        label: 'Instagram',
+        path: mdiInstagram.path
+    },
+    {
+        key: 'facebook',
+        label: 'Facebook',
+        path: mdiFacebook.path
+    },
+    {
+        key: 'linkedin',
+        label: 'LinkedIn',
+        path: mdiLinkedin.path
+    },
+    {
+        key: 'youtube',
+        label: 'YouTube',
+        path: mdiYoutube.path
+    },
+    {
+        key: 'github',
+        label: 'GitHub',
+        path: mdiGithub.path
+    }
+];
+const SAFE_SOCIAL_HREF = /^https:\/\//i;
+const SocialLinks = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    // The profile fields are this element's data, not attributes of its row.
+    // Spread onto the Stack, each would be written into the page's HTML as a
+    // second copy of the URL, including a URL the filter below refuses.
+    const rowProps = _extends({}, props);
+    for (const { key } of SOCIAL_NETWORKS)delete rowProps[key];
+    const entries = SOCIAL_NETWORKS.map(({ key, label, path })=>{
+        var _props_key;
+        return {
+            key,
+            label,
+            path,
+            href: (_props_key = props[key]) == null ? void 0 : _props_key.trim()
+        };
+    }).filter((entry)=>entry.href && SAFE_SOCIAL_HREF.test(entry.href));
+    return /*#__PURE__*/ _jsx(Stack, _extends({
+        ref: ref,
+        direction: "row",
+        spacing: 0.5
+    }, rowProps, {
+        children: entries.length ? entries.map((entry)=>/*#__PURE__*/ _jsx(AppLink, {
+                componentVariant: "icon-button",
+                href: entry.href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": entry.label,
+                size: "small",
+                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: entry.path
+                })
+            }, entry.key)) : suppressNavigation ? // Editing surfaces only: a visitor has no Attributes panel.
+        /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                color: 'text.secondary',
+                fontSize: 12,
+                fontFamily: 'system-ui, sans-serif',
+                p: 1
+            },
+            children: 'Social links — add profile URLs in Attributes'
+        }) : null
+    }));
+});
+SocialLinks.displayName = 'AglynSocialLinks';
+export const socialLinksSchema = {
+    $id: SOCIAL_LINKS_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Social Links',
+    description: 'A row of icon links to whichever social profiles you fill in.',
+    category: Aglyn.ComponentCategory.NAVIGATION,
+    icon: {
+        path: mdiTwitter.path,
+        sx: {
+            color: '#1976d2'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: SOCIAL_NETWORKS.map(({ key, label })=>({
+            name: key,
+            description: `${label} profile URL (https).`,
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label
+        }))
+};
+/* ── Section presets (composed from existing components) ────────────────── */ /**
+ * Preset styling is authored on the node's OWN `sx`, never inside `props`
+ * (AGL-1346).
+ *
+ * Both records render — `Leaf` composes `(sx, props.sx, node.sx)` — but
+ * only `node.sx` is the one the Styles panel writes, so a preset that put
+ * its styling in `props.sx` authored values the panel could display but no
+ * click could ever change or clear. The renderer composes `node.sx` LAST,
+ * so moving a preset's styles here changes nothing about how a fresh
+ * insert looks; it only makes them editable. Existing documents keep their
+ * `props.sx` and still render from it.
+ *
+ * `plugin.spec.ts` holds every preset in this bundle to that rule.
+ */ const text = (variant, children, extra)=>{
+    const _ref = extra != null ? extra : {}, { sx } = _ref, props = _object_without_properties_loose(_ref, [
+        "sx"
+    ]);
+    return _extends({
+        $id: null,
+        componentId: 'muiTypography',
+        pluginId: BUNDLE_ID,
+        props: _extends({
+            variant,
+            children
+        }, props)
+    }, sx ? {
+        sx
+    } : {});
+};
+const testimonialCard = (quote, name)=>({
+        $id: null,
+        componentId: 'muiStack',
+        pluginId: BUNDLE_ID,
+        props: {
+            spacing: 1
+        },
+        sx: {
+            flex: 1,
+            paddingTop: 3,
+            paddingRight: 3,
+            paddingBottom: 3,
+            paddingLeft: 3
+        },
+        nodes: [
+            text('body1', `“${quote}”`),
+            text('subtitle2', `— ${name}`)
+        ]
+    });
+const pricingColumn = (tier, price, features, highlighted)=>({
+        $id: null,
+        componentId: 'muiStack',
+        pluginId: BUNDLE_ID,
+        props: {
+            spacing: 1
+        },
+        sx: _extends({
+            flex: 1,
+            paddingTop: 3,
+            paddingRight: 3,
+            paddingBottom: 3,
+            paddingLeft: 3,
+            alignItems: 'center'
+        }, highlighted && {
+            border: '2px solid',
+            borderColor: 'primary.main',
+            borderRadius: 2
+        }),
+        nodes: [
+            text('h5', tier),
+            text('h3', price),
+            ...features.map((feature)=>text('body2', feature)),
+            {
+                $id: null,
+                componentId: 'muiButton',
+                pluginId: BUNDLE_ID,
+                props: {
+                    variant: highlighted ? 'contained' : 'outlined',
+                    children: 'Choose plan'
+                }
+            }
+        ]
+    });
+const faqItem = (question, answer)=>[
+        text('subtitle1', question),
+        text('body2', answer, {
+            gutterBottom: true
+        })
+    ];
+/** Screen link with the visible-on-any-surface nav defaults (AGL-539). */ const navLink = (label)=>({
+        $id: null,
+        componentId: 'muiScreenLink',
+        pluginId: BUNDLE_ID,
+        props: {
+            children: label,
+            color: 'inherit'
+        }
+    });
+const featureColumn = (title, body)=>({
+        $id: null,
+        componentId: 'muiStack',
+        pluginId: BUNDLE_ID,
+        props: {
+            spacing: 1
+        },
+        sx: {
+            flex: 1,
+            minWidth: 220,
+            paddingTop: 2,
+            paddingRight: 2,
+            paddingBottom: 2,
+            paddingLeft: 2
+        },
+        nodes: [
+            text('h5', title),
+            text('body1', body)
+        ]
+    });
+/**
+ * A section block's outer band, with its content held to a readable width
+ * (AGL-2544).
+ *
+ * These presets used to be a bare `muiStack` dropped straight into
+ * `Document`, so every one of them rendered edge to edge: a Feature Grid ran
+ * the full viewport while the page's prose sat at 900px, and the FAQ — which
+ * had `maxWidth` but no auto margins — hugged the left edge. That is the
+ * result of the documented happy path on a fresh screen, with no misuse, and
+ * a subscriber has no reason to suspect the block needs wrapping.
+ *
+ * The band and the content are separated rather than the whole thing being
+ * wrapped, because a CTA or hero genuinely wants a full-bleed background with
+ * contained content — wrapping the outer node would take that away to fix the
+ * width. So `bandSx` (padding, background) stays outside and the Container
+ * goes within it.
+ *
+ * `layout` moves a row block's own direction onto an inner Stack: dropping a
+ * Container between a `direction: 'row'` Stack and its columns would leave
+ * the Container as the single flex child and collapse the row.
+ */ const section = ({ bandSx, layout, layoutSx, maxWidth = 'lg', nodes })=>_extends({
+        $id: null,
+        componentId: 'muiStack',
+        pluginId: BUNDLE_ID,
+        props: {}
+    }, bandSx ? {
+        sx: bandSx
+    } : {}, {
+        nodes: [
+            {
+                $id: null,
+                componentId: 'muiContainer',
+                pluginId: BUNDLE_ID,
+                props: {
+                    maxWidth
+                },
+                nodes: layout || layoutSx ? [
+                    _extends({
+                        $id: null,
+                        componentId: 'muiStack',
+                        pluginId: BUNDLE_ID,
+                        props: layout != null ? layout : {}
+                    }, layoutSx ? {
+                        sx: layoutSx
+                    } : {}, {
+                        nodes
+                    })
+                ] : nodes
+            }
+        ]
+    });
+export const blockPresets = [
+    {
+        $id: generatePresetId(VIDEO_EMBED_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Video',
+        pluginId: BUNDLE_ID,
+        description: 'Embedded YouTube or Vimeo video',
+        category: Aglyn.ComponentCategory.MEDIA,
+        icon: {
+            path: mdiPlayCircle.path,
+            sx: {
+                color: '#d32f2f'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: VIDEO_EMBED_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId(SOCIAL_LINKS_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Social Links',
+        pluginId: BUNDLE_ID,
+        description: 'Icon links to social profiles',
+        category: Aglyn.ComponentCategory.NAVIGATION,
+        icon: {
+            path: mdiTwitter.path,
+            sx: {
+                color: '#1976d2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: SOCIAL_LINKS_ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        $id: generatePresetId('muiStack', 'gallery'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Image Gallery',
+        pluginId: BUNDLE_ID,
+        description: 'Three-across image row',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiImageIcon.path,
+            sx: {
+                color: '#7b1fa2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'row',
+                spacing: 2
+            },
+            sx: {
+                paddingTop: 4,
+                paddingBottom: 4
+            },
+            nodes: [
+                1,
+                2,
+                3
+            ].map((index)=>({
+                    $id: null,
+                    componentId: 'image',
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        alt: `Gallery image ${index}`,
+                        height: '240px'
+                    }
+                }))
+        }
+    },
+    {
+        $id: generatePresetId('muiStack', 'testimonials'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Testimonials',
+        pluginId: BUNDLE_ID,
+        description: 'Three customer quotes',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiFormatQuoteClose.path,
+            sx: {
+                color: '#0288d1'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'row',
+                spacing: 2
+            },
+            sx: {
+                paddingTop: 4,
+                paddingBottom: 4
+            },
+            nodes: [
+                testimonialCard('Exactly what our team needed to ship the site fast.', 'Customer One'),
+                testimonialCard('The editor is a joy — we update pages in minutes.', 'Customer Two'),
+                testimonialCard('Best decision we made for our online presence.', 'Customer Three')
+            ]
+        }
+    },
+    {
+        $id: generatePresetId('muiStack', 'pricing'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Pricing Table',
+        pluginId: BUNDLE_ID,
+        description: 'Three plan columns with features and CTAs',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiCurrencyUsd.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'row',
+                spacing: 2
+            },
+            sx: {
+                paddingTop: 4,
+                paddingBottom: 4
+            },
+            nodes: [
+                pricingColumn('Basic', '$9', [
+                    'One project',
+                    'Email support'
+                ]),
+                pricingColumn('Pro', '$29', [
+                    'Five projects',
+                    'Priority support',
+                    'Analytics'
+                ], true),
+                pricingColumn('Team', '$79', [
+                    'Unlimited projects',
+                    'Dedicated support',
+                    'SSO'
+                ])
+            ]
+        }
+    },
+    {
+        $id: generatePresetId('muiStack', 'faq'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'FAQ',
+        pluginId: BUNDLE_ID,
+        description: 'Question and answer list',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiHelpCircle.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: section({
+            bandSx: {
+                paddingTop: 4,
+                paddingBottom: 4
+            },
+            // `md`, not the old bare `maxWidth: 720`. The width was never the
+            // defect — the missing auto margins were, which is why this block
+            // rendered hard against the left viewport edge.
+            maxWidth: 'md',
+            layout: {
+                spacing: 1
+            },
+            nodes: [
+                text('h4', 'Frequently asked questions', {
+                    gutterBottom: true
+                }),
+                ...faqItem('How do I get started?', 'Answer the question in a sentence or two so visitors keep reading.'),
+                ...faqItem('Can I change plans later?', 'Yes — describe how flexible your offering is.'),
+                ...faqItem('Do you offer support?', 'Tell visitors how and when they can reach you.')
+            ]
+        })
+    },
+    {
+        $id: generatePresetId('muiStack', 'announcement'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Announcement Bar',
+        pluginId: BUNDLE_ID,
+        description: 'Accent strip with a message and link',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiBullhorn.path,
+            sx: {
+                color: '#c2185b'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'row',
+                spacing: 2
+            },
+            sx: {
+                paddingTop: 1,
+                paddingBottom: 1,
+                paddingLeft: 2,
+                paddingRight: 2,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText'
+            },
+            nodes: [
+                text('body2', 'Big news — announce a launch, sale, or update here.'),
+                {
+                    $id: null,
+                    componentId: 'muiScreenLink',
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        children: 'Learn more',
+                        size: 'small',
+                        color: 'inherit'
+                    }
+                }
+            ]
+        }
+    },
+    // ── Composed page sections (AGL-539) ──────────────────────────────────
+    // The pieces every real site needs, insertable without raw-JSON
+    // authoring. Node shapes mirror apps/console starter templates; only
+    // persisted component ids are referenced.
+    {
+        $id: generatePresetId('muiAppBar', 'navbar'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Nav Bar',
+        pluginId: BUNDLE_ID,
+        description: 'Header bar with brand text and screen links',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiPageLayoutHeader.path,
+            sx: {
+                color: '#1976d2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiAppBar',
+            pluginId: BUNDLE_ID,
+            // Static so the bar sits in the page flow; switch the Position
+            // attribute to Sticky/Fixed for a pinned header.
+            props: {
+                position: 'static'
+            },
+            nodes: [
+                {
+                    $id: null,
+                    componentId: 'muiToolbar',
+                    pluginId: BUNDLE_ID,
+                    props: {},
+                    nodes: [
+                        text('h6', 'Your Brand', {
+                            sx: {
+                                flexGrow: 1
+                            }
+                        }),
+                        {
+                            $id: null,
+                            componentId: 'muiStack',
+                            pluginId: BUNDLE_ID,
+                            props: {
+                                direction: 'row',
+                                spacing: 1
+                            },
+                            nodes: [
+                                navLink('Home'),
+                                navLink('About'),
+                                navLink('Contact')
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    {
+        $id: generatePresetId('muiStack', 'hero'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Hero',
+        pluginId: BUNDLE_ID,
+        description: 'Centered headline, tagline, and call-to-action button',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiRocketLaunchOutline.path,
+            sx: {
+                color: '#f57c00'
+            }
+        },
+        data: section({
+            bandSx: {
+                paddingTop: 10,
+                paddingBottom: 10,
+                paddingLeft: 4,
+                paddingRight: 4
+            },
+            layout: {
+                spacing: 2
+            },
+            layoutSx: {
+                alignItems: 'center'
+            },
+            nodes: [
+                text('h2', 'A headline that sells your idea', {
+                    align: 'center'
+                }),
+                text('h6', 'One clear sentence about the value you deliver.', {
+                    align: 'center'
+                }),
+                {
+                    $id: null,
+                    componentId: 'muiButton',
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        variant: 'contained',
+                        size: 'large',
+                        children: 'Get started'
+                    }
+                }
+            ]
+        })
+    },
+    {
+        $id: generatePresetId('muiStack', 'features'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Feature Grid',
+        pluginId: BUNDLE_ID,
+        description: 'Three selling points in a wrapping row',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiViewGridOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: section({
+            bandSx: {
+                paddingLeft: 4,
+                paddingRight: 4,
+                paddingTop: 6,
+                paddingBottom: 6
+            },
+            layout: {
+                direction: 'row',
+                spacing: 2
+            },
+            layoutSx: {
+                flexWrap: 'wrap'
+            },
+            nodes: [
+                featureColumn('Fast', 'Explain the first reason customers pick you.'),
+                featureColumn('Simple', 'Explain the second reason customers pick you.'),
+                featureColumn('Reliable', 'Explain the third reason customers pick you.')
+            ]
+        })
+    },
+    {
+        $id: generatePresetId('muiStack', 'imagetext'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Image + Text',
+        pluginId: BUNDLE_ID,
+        description: 'Image beside a heading, copy, and link',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiImageText.path,
+            sx: {
+                color: '#7b1fa2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'row',
+                spacing: 4
+            },
+            sx: {
+                paddingLeft: 4,
+                paddingRight: 4,
+                paddingTop: 6,
+                paddingBottom: 6,
+                alignItems: 'center',
+                flexWrap: 'wrap'
+            },
+            nodes: [
+                {
+                    $id: null,
+                    componentId: 'muiStack',
+                    pluginId: BUNDLE_ID,
+                    props: {},
+                    sx: {
+                        flex: 1,
+                        minWidth: 280
+                    },
+                    nodes: [
+                        {
+                            $id: null,
+                            componentId: 'image',
+                            pluginId: BUNDLE_ID,
+                            props: {
+                                alt: 'Feature image',
+                                height: '320px'
+                            }
+                        }
+                    ]
+                },
+                {
+                    $id: null,
+                    componentId: 'muiStack',
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        spacing: 2
+                    },
+                    sx: {
+                        flex: 1,
+                        minWidth: 280
+                    },
+                    nodes: [
+                        text('h4', 'Show, then tell'),
+                        text('body1', 'Pair a strong visual with a short paragraph that explains ' + 'what visitors are looking at and why it matters.'),
+                        {
+                            $id: null,
+                            componentId: 'muiButton',
+                            pluginId: BUNDLE_ID,
+                            props: {
+                                variant: 'outlined',
+                                children: 'Learn more'
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    {
+        $id: generatePresetId('muiStack', 'cta'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Call to Action',
+        pluginId: BUNDLE_ID,
+        description: 'Accent band with a heading and button',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiGestureTapButton.path,
+            sx: {
+                color: '#c2185b'
+            }
+        },
+        data: section({
+            // The accent band stays full-bleed — that is the point of a CTA —
+            // while its content is held to the page's width inside it.
+            bandSx: {
+                paddingTop: 8,
+                paddingBottom: 8,
+                paddingLeft: 4,
+                paddingRight: 4,
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText'
+            },
+            maxWidth: 'md',
+            layout: {
+                spacing: 2
+            },
+            layoutSx: {
+                alignItems: 'center'
+            },
+            nodes: [
+                text('h4', 'Ready to get started?', {
+                    align: 'center'
+                }),
+                text('body1', 'Tell visitors the one thing to do next.', {
+                    align: 'center'
+                }),
+                {
+                    $id: null,
+                    componentId: 'muiButton',
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        variant: 'contained',
+                        color: 'primary',
+                        size: 'large',
+                        children: 'Get started'
+                    }
+                }
+            ]
+        })
+    },
+    // Contact Section moved to @aglyn/plugins-forms (AGL-395): a preset that
+    // places `form` nodes has to stamp them with the bundle that registers
+    // them, and this one is the only block preset that does.
+    {
+        $id: generatePresetId('section', 'footer'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Footer',
+        pluginId: BUNDLE_ID,
+        description: 'Semantic footer with brand, links, social, and copyright',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiPageLayoutFooter.path,
+            sx: {
+                color: '#455a64'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'section',
+            pluginId: BUNDLE_ID,
+            props: {
+                element: 'footer',
+                ariaLabel: 'Site footer'
+            },
+            sx: {
+                paddingLeft: 4,
+                paddingRight: 4,
+                paddingTop: 6,
+                paddingBottom: 6,
+                borderTop: 1,
+                borderColor: 'divider'
+            },
+            nodes: [
+                {
+                    $id: null,
+                    componentId: 'muiStack',
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        spacing: 2
+                    },
+                    nodes: [
+                        {
+                            $id: null,
+                            componentId: 'muiStack',
+                            pluginId: BUNDLE_ID,
+                            props: {
+                                direction: 'row',
+                                spacing: 2
+                            },
+                            sx: {
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                flexWrap: 'wrap'
+                            },
+                            nodes: [
+                                text('h6', 'Your Brand'),
+                                {
+                                    $id: null,
+                                    componentId: 'muiStack',
+                                    pluginId: BUNDLE_ID,
+                                    props: {
+                                        direction: 'row',
+                                        spacing: 1
+                                    },
+                                    nodes: [
+                                        navLink('Home'),
+                                        navLink('About'),
+                                        navLink('Contact')
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            $id: null,
+                            componentId: SOCIAL_LINKS_ID,
+                            pluginId: BUNDLE_ID,
+                            props: {}
+                        },
+                        text('caption', '© Your Company. All rights reserved.', {
+                            color: 'text.secondary'
+                        })
+                    ]
+                }
+            ]
+        }
+    }
+];
+export { SocialLinks, VideoEmbed };
+export default VideoEmbed;
+
+//# sourceMappingURL=blocks.js.map