@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/accordion.js

@@ -0,0 +1,392 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } 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 { mdiChevronDown, mdiUnfoldMoreHorizontal } from "@aglyn/shared-data-mdi";
+import { AppLink, MdiIcon } from "@aglyn/shared-ui-jsx";
+import MuiAccordion from "@mui/material/Accordion";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import { forwardRef, isValidElement } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { FIELD_TEXT_CONTENT } from "../constants/field-presets.js";
+import { authorHtmlLabel, withAuthorHtmlLabel } from "../utils/author-html-label.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ACCORDION_ID = 'muiAccordion';
+export const ACCORDION_SUMMARY_ID = 'muiAccordionSummary';
+export const ACCORDION_DETAILS_ID = 'muiAccordionDetails';
+/**
+ * Expand/collapse panel (https://mui.com/material-ui/react-accordion/).
+ *
+ * On the besigner canvas it renders **expanded regardless of
+ * `defaultExpanded`**: collapsed details are unreachable for selection
+ * and styling, which is the same reason the Drawer expands its contents
+ * while selected (AGL-571). Preview and the published site both honour
+ * the author's setting and toggle normally, so what ships is never in
+ * doubt — only the editing surface differs.
+ */ const AccordionElement = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { defaultExpanded, children } = props, rest = _object_without_properties_loose(props, [
+        "defaultExpanded",
+        "children"
+    ]);
+    const { editorInert } = Aglyn.useScreenLink(undefined);
+    if (editorInert) {
+        // Controlled-open with no onChange: the canvas is a static surface,
+        // clicks there select rather than toggle.
+        // MUI types Accordion's children as NonNullable: an accordion with
+        // no summary/details is not a renderable shape, and the renderer
+        // always supplies the pair.
+        return /*#__PURE__*/ _jsx(MuiAccordion, _extends({
+            ref: ref,
+            expanded: true
+        }, rest, {
+            children: children
+        }));
+    }
+    return /*#__PURE__*/ _jsx(MuiAccordion, _extends({
+        ref: ref,
+        defaultExpanded: !!defaultExpanded
+    }, rest, {
+        children: children
+    }));
+});
+AccordionElement.displayName = 'AglynAccordion';
+/** Label and chevron sit on one line; the label takes the slack. */ const SUMMARY_ROW_SX = {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+};
+/** Matches MuiAccordionSummary's own gutters so the split row lines up. */ const SUMMARY_LABEL_SX = {
+    flex: 1,
+    minWidth: 0,
+    px: 2,
+    py: 1.5
+};
+/**
+ * The toggle keeps only its chevron: the label is a sibling now, so the
+ * summary's own content slot would just add empty width.
+ */ const SUMMARY_TOGGLE_SX = {
+    flex: '0 0 auto',
+    '& .MuiAccordionSummary-content': {
+        display: 'none'
+    }
+};
+/**
+ * The visible text of a React children tree, for naming a control that has no
+ * text of its own (AGL-2349).
+ *
+ * It has to walk, not test: what arrives here is the node renderer's output,
+ * which wraps the authored string in an `<AglynText>` element inside an
+ * array (`libs/aglyn-node-renderer/src/lib/components/leaf.tsx`), so the string
+ * is a grandchild at best and never the value itself. Descends `props.children`
+ * rather than reading DOM text, because this runs on the React tree BEFORE
+ * anything is in the DOM to read. (It also predates AGL-2011, when
+ * `<aglyn-text>` was a shadow host whose `innerText` read back empty — that
+ * is no longer true, but walking props is still the right tool here.)
+ */ const childText = (node)=>{
+    if (node == null || typeof node === 'boolean') return '';
+    if (typeof node === 'string' || typeof node === 'number') return String(node);
+    if (Array.isArray(node)) return node.map(childText).join('');
+    if (/*#__PURE__*/ isValidElement(node)) {
+        var _node_props;
+        return childText((_node_props = node.props) == null ? void 0 : _node_props.children);
+    }
+    return '';
+};
+/**
+ * The always-visible header row. Supplies the expand chevron MUI leaves
+ * to the caller — without it the control looks like inert text and gives
+ * no hint that there is anything to open.
+ *
+ * ## Why a linked header is a different shape (AGL-1232)
+ *
+ * `MuiAccordionSummary` renders a `<button>`, and the mobile drawer needs
+ * Product/Solutions to reach their jump pages as well as open. An anchor
+ * inside that button is invalid nesting — browsers unnest it, and nested
+ * interactive content is unusable with a screen reader or a keyboard — so
+ * the row cannot both toggle and navigate while it is one control.
+ *
+ * With a `screenId` set the row therefore splits in two: the label becomes
+ * a real anchor, and a chevron-only `MuiAccordionSummary` beside it becomes
+ * the toggle. Two siblings, each independently focusable, no nesting. The
+ * summary keeps driving the panel through MUI's accordion context, so
+ * `aria-expanded` and the transition are unchanged.
+ *
+ * With no `screenId` — every accordion authored before this — the output is
+ * byte-for-byte what it always was: one `MuiAccordionSummary`, whole row
+ * toggles.
+ */ export const AccordionSummaryElement = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _authorHtmlLabel;
+    const { screenId, html } = props, rest = _object_without_properties_loose(props, [
+        "screenId",
+        "html"
+    ]);
+    // Resolution is the routing map's job, exactly as Screen Link does it;
+    // an unpublished or deleted target yields no href.
+    const { href, suppressNavigation } = Aglyn.useScreenLink(screenId);
+    if (!screenId) {
+        return /*#__PURE__*/ _jsx(MuiAccordionSummary, _extends({
+            ref: ref,
+            expandIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiChevronDown.path
+            })
+        }, withAuthorHtmlLabel(rest, html)));
+    }
+    const { children, sx } = rest, rowRest = _object_without_properties_loose(rest, [
+        "children",
+        "sx"
+    ]);
+    const nodeSx = Array.isArray(sx) ? sx : sx ? [
+        sx
+    ] : [];
+    // The chevron button's only content is an icon, so it needs a name of its
+    // own — "Product" the link and "Product" the toggle are two controls.
+    //
+    // This USED to be `typeof children === 'string'`, which is never true in
+    // production (AGL-2349). A summary's label is authored through
+    // FIELD_TEXT_CONTENT, and the node renderer does not pass that string down as
+    // `children` — `Leaf` lifts it out as `textContent` and renders
+    // `<Component>{children}<AglynText>{textContent}</…></Component>`,
+    // so `children` is always an ARRAY holding an element. The string branch was
+    // reachable only from a spec that handed the component a bare string, so
+    // every published split summary named its chevron "Toggle section".
+    //
+    // Read from `children` rather than from the formatted label below, because
+    // a formatted one is markup handed to `dangerouslySetInnerHTML` and has no
+    // React children to walk. `children` carries the same words either way.
+    const label = childText(children).trim();
+    const content = (_authorHtmlLabel = authorHtmlLabel(html)) != null ? _authorHtmlLabel : children;
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rowRest, {
+        sx: [
+            SUMMARY_ROW_SX,
+            ...nodeSx
+        ],
+        children: [
+            href && !suppressNavigation ? /*#__PURE__*/ _jsx(AppLink, {
+                href: href,
+                underline: "hover",
+                sx: SUMMARY_LABEL_SX,
+                children: content
+            }) : // Unresolved target, or a surface that must not navigate (canvas,
+            // preview): same two-part shape, so the editor never shows a row
+            // that behaves differently from the one that ships.
+            //
+            // Same ELEMENT too, not just the same box (AGL-1268). `href` comes
+            // from the screens map, which differs between the render that
+            // produced an ISR page and the render that hydrates it — a screen
+            // published or unpublished in between. Switching `<a>` to `<span>`
+            // on that would remount the subtree at hydration; an `<a>` with no
+            // href is HTML's placeholder link, so the element is stable and the
+            // row is still inert. Link Container settled on this shape first.
+            /*#__PURE__*/ _jsx(Link, {
+                underline: "none",
+                color: "inherit",
+                sx: SUMMARY_LABEL_SX,
+                children: content
+            }),
+            /*#__PURE__*/ _jsx(MuiAccordionSummary, {
+                "aria-label": label ? `Toggle ${label}` : 'Toggle section',
+                expandIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiChevronDown.path
+                }),
+                sx: SUMMARY_TOGGLE_SX
+            })
+        ]
+    }));
+});
+AccordionSummaryElement.displayName = 'AglynAccordionSummary';
+export const AccordionDetailsElement = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(MuiAccordionDetails, _extends({
+        ref: ref
+    }, props)));
+AccordionDetailsElement.displayName = 'AglynAccordionDetails';
+export const accordionSchema = {
+    $id: ACCORDION_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Accordion',
+    description: 'Header that expands to reveal its details — FAQs, long forms, ' + 'anything progressive.',
+    category: Aglyn.ComponentCategory.SURFACE,
+    icon: {
+        path: mdiUnfoldMoreHorizontal.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    // Structure is fixed by MUI: summary first, details second.
+    restrictChildren: [
+        Aglyn.LinealDirectiveFlag.LIMIT_TO,
+        {
+            components: [
+                ACCORDION_SUMMARY_ID,
+                ACCORDION_DETAILS_ID
+            ]
+        }
+    ],
+    // …and it reads that structure BY INDEX, so the renderer has to hand it one
+    // React child per node child (AGL-1237). Without this the summary swallowed
+    // the details and every accordion on every published site expanded to reveal
+    // an empty panel, with its content rendering unconditionally inside the
+    // summary's heading.
+    flags: {
+        positionalChildren: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'defaultExpanded',
+            label: 'Start expanded?',
+            description: 'If true, the panel is already open when a visitor arrives. The ' + 'canvas always shows it open so you can edit inside it.',
+            component: Aglyn.FieldComponentType.SWITCH
+        },
+        {
+            name: 'disableGutters',
+            label: 'Disable gutters?',
+            description: 'If true, the panel keeps its height when expanded instead of ' + 'gaining extra margin — the tighter look for a stacked FAQ.',
+            component: Aglyn.FieldComponentType.SWITCH
+        },
+        {
+            name: 'disabled',
+            label: 'Disabled?',
+            description: 'If true, visitors cannot expand the panel.',
+            component: Aglyn.FieldComponentType.SWITCH
+        }
+    ]
+};
+export const accordionSummarySchema = {
+    $id: ACCORDION_SUMMARY_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Accordion Summary',
+    description: 'The clickable header row of an accordion.',
+    category: Aglyn.ComponentCategory.SURFACE,
+    icon: {
+        path: mdiUnfoldMoreHorizontal.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    flags: {
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED,
+        richTextEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    // Emphasis only (AGL-2557). The row is a `<button>`, and a list or a link
+    // inside one is invalid markup the parser unnests and a control a keyboard
+    // cannot reach — the same constraint that made a LINKED header two sibling
+    // controls rather than an anchor inside the toggle (AGL-1232).
+    richTextCommands: [
+        Aglyn.RICH_TEXT_COMMANDS.EMPHASIS
+    ],
+    attributes: [
+        FIELD_TEXT_CONTENT,
+        {
+            name: 'screenId',
+            label: 'Header links to',
+            description: 'Optional. Give the header a destination and the row splits: the ' + 'text becomes a link to that screen and the chevron beside it ' + 'opens the panel. That is the only way a header can do both — a ' + 'link inside the toggle button is invalid and unreachable by ' + 'keyboard. Leave it empty and the whole row toggles, as before.',
+            component: Aglyn.FieldComponentType.SCREEN_SELECT
+        }
+    ]
+};
+export const accordionDetailsSchema = {
+    $id: ACCORDION_DETAILS_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Accordion Details',
+    description: 'The region an accordion reveals when expanded.',
+    category: Aglyn.ComponentCategory.SURFACE,
+    icon: {
+        path: mdiUnfoldMoreHorizontal.path,
+        sx: {
+            color: '#2196f3'
+        }
+    }
+};
+const panel = (summary, body)=>({
+        $id: null,
+        componentId: ACCORDION_ID,
+        pluginId: BUNDLE_ID,
+        props: {},
+        nodes: [
+            {
+                $id: null,
+                componentId: ACCORDION_SUMMARY_ID,
+                pluginId: BUNDLE_ID,
+                props: {
+                    children: summary
+                }
+            },
+            {
+                $id: null,
+                componentId: ACCORDION_DETAILS_ID,
+                pluginId: BUNDLE_ID,
+                nodes: [
+                    {
+                        $id: null,
+                        componentId: 'muiTypography',
+                        pluginId: BUNDLE_ID,
+                        props: {
+                            variant: 'body2',
+                            children: body
+                        }
+                    }
+                ]
+            }
+        ]
+    });
+export const accordionPresets = [
+    {
+        $id: generatePresetId(ACCORDION_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Accordion',
+        pluginId: BUNDLE_ID,
+        description: 'One expandable panel with a header and body text',
+        category: Aglyn.ComponentCategory.SURFACE,
+        icon: accordionSchema.icon,
+        data: panel('Accordion header', 'The details revealed when expanded.')
+    },
+    {
+        $id: generatePresetId(ACCORDION_ID, 'faq'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'FAQ',
+        pluginId: BUNDLE_ID,
+        description: 'Three stacked question panels, ready to edit',
+        category: Aglyn.ComponentCategory.SURFACE,
+        icon: {
+            path: mdiUnfoldMoreHorizontal.path,
+            sx: {
+                color: '#1976d2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'column'
+            },
+            nodes: [
+                panel('How do I get started?', 'Answer the first question here.'),
+                panel('What does it cost?', 'Answer the second question here.'),
+                panel('How do I get support?', 'Answer the third question here.')
+            ]
+        }
+    }
+];
+export default AccordionElement;
+
+//# sourceMappingURL=accordion.js.map

package/src/lib/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/accordion.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport { mdiChevronDown, mdiUnfoldMoreHorizontal } from '@aglyn/shared-data-mdi'\nimport { AppLink, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport MuiAccordion from '@mui/material/Accordion'\nimport MuiAccordionDetails from '@mui/material/AccordionDetails'\nimport MuiAccordionSummary from '@mui/material/AccordionSummary'\nimport Box from '@mui/material/Box'\nimport Link from '@mui/material/Link'\nimport type { SxProps } from '@mui/material/styles'\nimport { forwardRef, isValidElement, type ReactNode } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { FIELD_TEXT_CONTENT } from '../constants/field-presets'\nimport {\n  authorHtmlLabel,\n  withAuthorHtmlLabel,\n} from '../utils/author-html-label'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ACCORDION_ID: Aglyn.ComponentId = 'muiAccordion'\nexport const ACCORDION_SUMMARY_ID: Aglyn.ComponentId = 'muiAccordionSummary'\nexport const ACCORDION_DETAILS_ID: Aglyn.ComponentId = 'muiAccordionDetails'\n\nexport interface AccordionElementProps {\n  /** Starts open on the published site. */\n  defaultExpanded?: boolean\n  disabled?: boolean\n  /** Removes the extra margin an expanded accordion normally gains. */\n  disableGutters?: boolean\n  children?: ReactNode\n}\n\n/**\n * Expand/collapse panel (https://mui.com/material-ui/react-accordion/).\n *\n * On the besigner canvas it renders **expanded regardless of\n * `defaultExpanded`**: collapsed details are unreachable for selection\n * and styling, which is the same reason the Drawer expands its contents\n * while selected (AGL-571). Preview and the published site both honour\n * the author's setting and toggle normally, so what ships is never in\n * doubt — only the editing surface differs.\n */\nconst AccordionElement = forwardRef<HTMLDivElement, AccordionElementProps>(\n  (props, ref) => {\n    const { defaultExpanded, children, ...rest } = props\n    const { editorInert } = Aglyn.useScreenLink(undefined)\n    if (editorInert) {\n      // Controlled-open with no onChange: the canvas is a static surface,\n      // clicks there select rather than toggle.\n      // MUI types Accordion's children as NonNullable: an accordion with\n      // no summary/details is not a renderable shape, and the renderer\n      // always supplies the pair.\n      return (\n        <MuiAccordion\n          ref={ref}\n          expanded\n          {...rest}\n          children={children as NonNullable<ReactNode>}\n        />\n      )\n    }\n    return (\n      <MuiAccordion\n        ref={ref}\n        defaultExpanded={!!defaultExpanded}\n        {...rest}\n        children={children as NonNullable<ReactNode>}\n      />\n    )\n  },\n)\nAccordionElement.displayName = 'AglynAccordion'\n\nexport interface AccordionSummaryElementProps {\n  /**\n   * Optional screen the header's label links to (AGL-1232). Setting it\n   * SPLITS the row — see {@link AccordionSummaryElement}. A screen id, never\n   * a path: the href is resolved from the host routing map at render time,\n   * so a slug rename or re-parent cannot break it, and a bare `href` would\n   * full-reload the site instead of routing.\n   */\n  screenId?: string\n  /**\n   * Authored node styles, handed over by the renderer rather than typed\n   * into an attribute — recomposed below so the Styles panel's values are\n   * merged rather than replaced (AGL-1240/1284).\n   */\n  sx?: SxProps\n  /**\n   * Sanitized emphasis markup for the label, written by the inline editor's\n   * rich mode (AGL-2557). `children` keeps the plain-text reading of it, and\n   * is what every surface that cannot render markup falls back to.\n   */\n  html?: string\n  children?: ReactNode\n}\n\n/** Label and chevron sit on one line; the label takes the slack. */\nconst SUMMARY_ROW_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n} as const\n\n/** Matches MuiAccordionSummary's own gutters so the split row lines up. */\nconst SUMMARY_LABEL_SX = {\n  flex: 1,\n  minWidth: 0,\n  px: 2,\n  py: 1.5,\n} as const\n\n/**\n * The toggle keeps only its chevron: the label is a sibling now, so the\n * summary's own content slot would just add empty width.\n */\nconst SUMMARY_TOGGLE_SX = {\n  flex: '0 0 auto',\n  '& .MuiAccordionSummary-content': { display: 'none' },\n} as const\n\n/**\n * The visible text of a React children tree, for naming a control that has no\n * text of its own (AGL-2349).\n *\n * It has to walk, not test: what arrives here is the node renderer's output,\n * which wraps the authored string in an `<AglynText>` element inside an\n * array (`libs/aglyn-node-renderer/src/lib/components/leaf.tsx`), so the string\n * is a grandchild at best and never the value itself. Descends `props.children`\n * rather than reading DOM text, because this runs on the React tree BEFORE\n * anything is in the DOM to read. (It also predates AGL-2011, when\n * `<aglyn-text>` was a shadow host whose `innerText` read back empty — that\n * is no longer true, but walking props is still the right tool here.)\n */\nconst childText = (node: ReactNode): string => {\n  if (node == null || typeof node === 'boolean') return ''\n  if (typeof node === 'string' || typeof node === 'number') return String(node)\n  if (Array.isArray(node)) return node.map(childText).join('')\n  if (isValidElement(node)) {\n    return childText((node.props as { children?: ReactNode })?.children)\n  }\n  return ''\n}\n\n/**\n * The always-visible header row. Supplies the expand chevron MUI leaves\n * to the caller — without it the control looks like inert text and gives\n * no hint that there is anything to open.\n *\n * ## Why a linked header is a different shape (AGL-1232)\n *\n * `MuiAccordionSummary` renders a `<button>`, and the mobile drawer needs\n * Product/Solutions to reach their jump pages as well as open. An anchor\n * inside that button is invalid nesting — browsers unnest it, and nested\n * interactive content is unusable with a screen reader or a keyboard — so\n * the row cannot both toggle and navigate while it is one control.\n *\n * With a `screenId` set the row therefore splits in two: the label becomes\n * a real anchor, and a chevron-only `MuiAccordionSummary` beside it becomes\n * the toggle. Two siblings, each independently focusable, no nesting. The\n * summary keeps driving the panel through MUI's accordion context, so\n * `aria-expanded` and the transition are unchanged.\n *\n * With no `screenId` — every accordion authored before this — the output is\n * byte-for-byte what it always was: one `MuiAccordionSummary`, whole row\n * toggles.\n */\nexport const AccordionSummaryElement = forwardRef<\n  HTMLDivElement,\n  AccordionSummaryElementProps\n>((props, ref) => {\n  const { screenId, html, ...rest } = props\n  // Resolution is the routing map's job, exactly as Screen Link does it;\n  // an unpublished or deleted target yields no href.\n  const { href, suppressNavigation } = Aglyn.useScreenLink(screenId)\n\n  if (!screenId) {\n    return (\n      <MuiAccordionSummary\n        ref={ref}\n        expandIcon={<MdiIcon path={mdiChevronDown.path} />}\n        {...withAuthorHtmlLabel(rest, html)}\n      />\n    )\n  }\n\n  const { children, sx, ...rowRest } = rest\n  const nodeSx = Array.isArray(sx) ? sx : sx ? [sx] : []\n  // The chevron button's only content is an icon, so it needs a name of its\n  // own — \"Product\" the link and \"Product\" the toggle are two controls.\n  //\n  // This USED to be `typeof children === 'string'`, which is never true in\n  // production (AGL-2349). A summary's label is authored through\n  // FIELD_TEXT_CONTENT, and the node renderer does not pass that string down as\n  // `children` — `Leaf` lifts it out as `textContent` and renders\n  // `<Component>{children}<AglynText>{textContent}</…></Component>`,\n  // so `children` is always an ARRAY holding an element. The string branch was\n  // reachable only from a spec that handed the component a bare string, so\n  // every published split summary named its chevron \"Toggle section\".\n  //\n  // Read from `children` rather than from the formatted label below, because\n  // a formatted one is markup handed to `dangerouslySetInnerHTML` and has no\n  // React children to walk. `children` carries the same words either way.\n  const label = childText(children).trim()\n  const content = authorHtmlLabel(html) ?? children\n  return (\n    <Box ref={ref} {...rowRest} sx={[SUMMARY_ROW_SX, ...nodeSx]}>\n      {href && !suppressNavigation ? (\n        <AppLink href={href} underline=\"hover\" sx={SUMMARY_LABEL_SX}>\n          {content}\n        </AppLink>\n      ) : (\n        // Unresolved target, or a surface that must not navigate (canvas,\n        // preview): same two-part shape, so the editor never shows a row\n        // that behaves differently from the one that ships.\n        //\n        // Same ELEMENT too, not just the same box (AGL-1268). `href` comes\n        // from the screens map, which differs between the render that\n        // produced an ISR page and the render that hydrates it — a screen\n        // published or unpublished in between. Switching `<a>` to `<span>`\n        // on that would remount the subtree at hydration; an `<a>` with no\n        // href is HTML's placeholder link, so the element is stable and the\n        // row is still inert. Link Container settled on this shape first.\n        <Link underline=\"none\" color=\"inherit\" sx={SUMMARY_LABEL_SX}>\n          {content}\n        </Link>\n      )}\n      <MuiAccordionSummary\n        aria-label={label ? `Toggle ${label}` : 'Toggle section'}\n        expandIcon={<MdiIcon path={mdiChevronDown.path} />}\n        sx={SUMMARY_TOGGLE_SX}\n      />\n    </Box>\n  )\n})\nAccordionSummaryElement.displayName = 'AglynAccordionSummary'\n\nexport const AccordionDetailsElement = forwardRef<\n  HTMLDivElement,\n  { children?: ReactNode }\n>((props, ref) => <MuiAccordionDetails ref={ref} {...props} />)\nAccordionDetailsElement.displayName = 'AglynAccordionDetails'\n\nexport const accordionSchema: Aglyn.ComponentSchema<AccordionElementProps> = {\n  $id: ACCORDION_ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Accordion',\n  description:\n    'Header that expands to reveal its details — FAQs, long forms, ' +\n    'anything progressive.',\n  category: Aglyn.ComponentCategory.SURFACE,\n  icon: { path: mdiUnfoldMoreHorizontal.path, sx: { color: '#2196f3' } },\n  // Structure is fixed by MUI: summary first, details second.\n  restrictChildren: [\n    Aglyn.LinealDirectiveFlag.LIMIT_TO,\n    { components: [ACCORDION_SUMMARY_ID, ACCORDION_DETAILS_ID] },\n  ],\n  // …and it reads that structure BY INDEX, so the renderer has to hand it one\n  // React child per node child (AGL-1237). Without this the summary swallowed\n  // the details and every accordion on every published site expanded to reveal\n  // an empty panel, with its content rendering unconditionally inside the\n  // summary's heading.\n  flags: { positionalChildren: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'defaultExpanded',\n      label: 'Start expanded?',\n      description:\n        'If true, the panel is already open when a visitor arrives. The ' +\n        'canvas always shows it open so you can edit inside it.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n    {\n      name: 'disableGutters',\n      label: 'Disable gutters?',\n      description:\n        'If true, the panel keeps its height when expanded instead of ' +\n        'gaining extra margin — the tighter look for a stacked FAQ.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n    {\n      name: 'disabled',\n      label: 'Disabled?',\n      description: 'If true, visitors cannot expand the panel.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n  ],\n}\n\nexport const accordionSummarySchema: Aglyn.ComponentSchema = {\n  $id: ACCORDION_SUMMARY_ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Accordion Summary',\n  description: 'The clickable header row of an accordion.',\n  category: Aglyn.ComponentCategory.SURFACE,\n  icon: { path: mdiUnfoldMoreHorizontal.path, sx: { color: '#2196f3' } },\n  flags: {\n    textEditable: Aglyn.FEATURE_FLAG.ENABLED,\n    richTextEditable: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  // Emphasis only (AGL-2557). The row is a `<button>`, and a list or a link\n  // inside one is invalid markup the parser unnests and a control a keyboard\n  // cannot reach — the same constraint that made a LINKED header two sibling\n  // controls rather than an anchor inside the toggle (AGL-1232).\n  richTextCommands: [Aglyn.RICH_TEXT_COMMANDS.EMPHASIS],\n  attributes: [\n    FIELD_TEXT_CONTENT,\n    {\n      name: 'screenId',\n      label: 'Header links to',\n      description:\n        'Optional. Give the header a destination and the row splits: the ' +\n        'text becomes a link to that screen and the chevron beside it ' +\n        'opens the panel. That is the only way a header can do both — a ' +\n        'link inside the toggle button is invalid and unreachable by ' +\n        'keyboard. Leave it empty and the whole row toggles, as before.',\n      component: Aglyn.FieldComponentType.SCREEN_SELECT,\n    },\n  ],\n}\n\nexport const accordionDetailsSchema: Aglyn.ComponentSchema = {\n  $id: ACCORDION_DETAILS_ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Accordion Details',\n  description: 'The region an accordion reveals when expanded.',\n  category: Aglyn.ComponentCategory.SURFACE,\n  icon: { path: mdiUnfoldMoreHorizontal.path, sx: { color: '#2196f3' } },\n}\n\nconst panel = (summary: string, body: string) => ({\n  $id: null,\n  componentId: ACCORDION_ID,\n  pluginId: BUNDLE_ID,\n  props: {},\n  nodes: [\n    {\n      $id: null,\n      componentId: ACCORDION_SUMMARY_ID,\n      pluginId: BUNDLE_ID,\n      props: { children: summary },\n    },\n    {\n      $id: null,\n      componentId: ACCORDION_DETAILS_ID,\n      pluginId: BUNDLE_ID,\n      nodes: [\n        {\n          $id: null,\n          componentId: 'muiTypography',\n          pluginId: BUNDLE_ID,\n          props: { variant: 'body2', children: body },\n        },\n      ],\n    },\n  ],\n})\n\nexport const accordionPresets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ACCORDION_ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Accordion',\n    pluginId: BUNDLE_ID,\n    description: 'One expandable panel with a header and body text',\n    category: Aglyn.ComponentCategory.SURFACE,\n    icon: accordionSchema.icon,\n    data: panel('Accordion header', 'The details revealed when expanded.'),\n  },\n  {\n    $id: generatePresetId(ACCORDION_ID, 'faq'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'FAQ',\n    pluginId: BUNDLE_ID,\n    description: 'Three stacked question panels, ready to edit',\n    category: Aglyn.ComponentCategory.SURFACE,\n    icon: { path: mdiUnfoldMoreHorizontal.path, sx: { color: '#1976d2' } },\n    data: {\n      $id: null,\n      componentId: 'muiStack',\n      pluginId: BUNDLE_ID,\n      props: { direction: 'column' },\n      nodes: [\n        panel('How do I get started?', 'Answer the first question here.'),\n        panel('What does it cost?', 'Answer the second question here.'),\n        panel('How do I get support?', 'Answer the third question here.'),\n      ],\n    },\n  },\n]\n\nexport default AccordionElement\n"],"names":["Aglyn","mdiChevronDown","mdiUnfoldMoreHorizontal","AppLink","MdiIcon","MuiAccordion","MuiAccordionDetails","MuiAccordionSummary","Box","Link","forwardRef","isValidElement","BUNDLE_ID","FIELD_TEXT_CONTENT","authorHtmlLabel","withAuthorHtmlLabel","generatePresetId","ACCORDION_ID","ACCORDION_SUMMARY_ID","ACCORDION_DETAILS_ID","AccordionElement","props","ref","defaultExpanded","children","rest","editorInert","useScreenLink","undefined","expanded","displayName","SUMMARY_ROW_SX","display","alignItems","width","SUMMARY_LABEL_SX","flex","minWidth","px","py","SUMMARY_TOGGLE_SX","childText","node","String","Array","isArray","map","join","AccordionSummaryElement","screenId","html","href","suppressNavigation","expandIcon","path","sx","rowRest","nodeSx","label","trim","content","underline","color","aria-label","AccordionDetailsElement","accordionSchema","$id","pluginId","description","category","ComponentCategory","SURFACE","icon","restrictChildren","LinealDirectiveFlag","LIMIT_TO","components","flags","positionalChildren","FEATURE_FLAG","ENABLED","attributes","name","component","FieldComponentType","SWITCH","accordionSummarySchema","textEditable","richTextEditable","richTextCommands","RICH_TEXT_COMMANDS","EMPHASIS","SCREEN_SELECT","accordionDetailsSchema","panel","summary","body","componentId","nodes","variant","accordionPresets","type","NodeType","PRESET","data","direction"],"mappings":"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"}

package/src/lib/components/app-bar.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @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 { type AppBarProps } from '@mui/material/AppBar';
+/**
+ * MUI's AppBar behind the cleared-prop guard (AGL-1226).
+ *
+ * It was exported raw, which left BOTH of its authorable attributes exposed:
+ * `color` and `position` are each run through MUI's `capitalize`, so clearing
+ * either one persists a null that throws during SSR and 500s the page. A
+ * wrapper is the only place to intercept it, since the schema's props reach
+ * MUI directly. `createElement` rather than JSX keeps this a `.ts` file.
+ */
+declare const AppBar: import("react").ForwardRefExoticComponent<Omit<AppBarProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const ID: Aglyn.ComponentId;
+export declare const schema: Aglyn.ComponentSchema<AppBarProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default AppBar;

package/src/lib/components/app-bar.js

@@ -0,0 +1,86 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * @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 { mdiPageLayoutHeader } from "@aglyn/shared-data-mdi";
+import MuiAppBar from "@mui/material/AppBar";
+import { createElement, forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { applySemanticElement, semanticElementAttribute, semanticElementLabelAttribute } from "../utils/element-picker.js";
+import { FIELD_COLOR_ALT1, FIELD_POSITION } from "../constants/field-presets.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+import { ID as toolbarId } from "./toolbar.js";
+/**
+ * MUI's AppBar behind the cleared-prop guard (AGL-1226).
+ *
+ * It was exported raw, which left BOTH of its authorable attributes exposed:
+ * `color` and `position` are each run through MUI's `capitalize`, so clearing
+ * either one persists a null that throws during SSR and 500s the page. A
+ * wrapper is the only place to intercept it, since the schema's props reach
+ * MUI directly. `createElement` rather than JSX keeps this a `.ts` file.
+ */ const AppBar = forwardRef((props, ref)=>createElement(MuiAppBar, _extends({}, applySemanticElement(dropClearedProps(props)), {
+        ref
+    })));
+AppBar.displayName = 'AglynAppBar';
+// Component ids are persisted in screen documents; keep the legacy ids.
+export const ID = 'muiAppBar';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'App Bar',
+    description: 'The bar across the top of the site — put a Toolbar Content inside it.',
+    category: Aglyn.ComponentCategory.NAVIGATION,
+    icon: {
+        path: mdiPageLayoutHeader.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    attributes: [
+        semanticElementAttribute('this bar'),
+        semanticElementLabelAttribute(),
+        FIELD_COLOR_ALT1,
+        FIELD_POSITION
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'App Bar',
+        pluginId: BUNDLE_ID,
+        description: 'An app bar preset with the app bar and toolbar content nodes',
+        category: Aglyn.ComponentCategory.NAVIGATION,
+        icon: schema.icon,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            nodes: [
+                {
+                    $id: null,
+                    componentId: toolbarId,
+                    pluginId: BUNDLE_ID,
+                    props: {}
+                }
+            ]
+        }
+    }
+];
+export default AppBar;
+
+//# sourceMappingURL=app-bar.js.map

package/src/lib/components/app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/app-bar.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport { mdiPageLayoutHeader } from '@aglyn/shared-data-mdi'\nimport MuiAppBar, { type AppBarProps } from '@mui/material/AppBar'\nimport { createElement, forwardRef } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport {\n  applySemanticElement,\n  semanticElementAttribute,\n  semanticElementLabelAttribute,\n} from '../utils/element-picker'\nimport { FIELD_COLOR_ALT1, FIELD_POSITION } from '../constants/field-presets'\nimport { dropClearedProps } from '../utils/drop-cleared-props'\nimport { generatePresetId } from '../utils/generate-preset-id'\nimport { ID as toolbarId } from './toolbar'\n\n/**\n * MUI's AppBar behind the cleared-prop guard (AGL-1226).\n *\n * It was exported raw, which left BOTH of its authorable attributes exposed:\n * `color` and `position` are each run through MUI's `capitalize`, so clearing\n * either one persists a null that throws during SSR and 500s the page. A\n * wrapper is the only place to intercept it, since the schema's props reach\n * MUI directly. `createElement` rather than JSX keeps this a `.ts` file.\n */\nconst AppBar = forwardRef<HTMLElement, AppBarProps>((props, ref) =>\n  createElement(MuiAppBar, {\n    // Unset leaves MUI's own default, which is `header` — the banner\n    // landmark every site's chrome depends on (AGL-2525). A resolver that\n    // answered `div` for \"unset\" would have stripped it the moment the\n    // picker appeared.\n    ...applySemanticElement(dropClearedProps(props) as Record<string, unknown>),\n    ref,\n  }),\n)\nAppBar.displayName = 'AglynAppBar'\n\n// Component ids are persisted in screen documents; keep the legacy ids.\nexport const ID: Aglyn.ComponentId = 'muiAppBar'\n\nexport const schema: Aglyn.ComponentSchema<AppBarProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'App Bar',\n  description:\n    'The bar across the top of the site — put a Toolbar Content inside it.',\n  category: Aglyn.ComponentCategory.NAVIGATION,\n  icon: {\n    path: mdiPageLayoutHeader.path,\n    sx: { color: '#2196f3' },\n  },\n  attributes: [\n    semanticElementAttribute('this bar'),\n    semanticElementLabelAttribute(),\n    FIELD_COLOR_ALT1,\n    FIELD_POSITION,\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'App Bar',\n    pluginId: BUNDLE_ID,\n    description: 'An app bar preset with the app bar and toolbar content nodes',\n    category: Aglyn.ComponentCategory.NAVIGATION,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      nodes: [\n        {\n          $id: null,\n          componentId: toolbarId,\n          pluginId: BUNDLE_ID,\n          props: {},\n        },\n      ],\n    },\n  },\n]\n\nexport default AppBar\n"],"names":["Aglyn","mdiPageLayoutHeader","MuiAppBar","createElement","forwardRef","BUNDLE_ID","applySemanticElement","semanticElementAttribute","semanticElementLabelAttribute","FIELD_COLOR_ALT1","FIELD_POSITION","dropClearedProps","generatePresetId","ID","toolbarId","AppBar","props","ref","displayName","schema","$id","pluginId","description","category","ComponentCategory","NAVIGATION","icon","path","sx","color","attributes","presets","type","NodeType","PRESET","data","componentId","nodes"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SAASC,mBAAmB,QAAQ,yBAAwB;AAC5D,OAAOC,eAAqC,uBAAsB;AAClE,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AACjD,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,6BAA6B,QACxB,6BAAyB;AAChC,SAASC,gBAAgB,EAAEC,cAAc,QAAQ,gCAA4B;AAC7E,SAASC,gBAAgB,QAAQ,iCAA6B;AAC9D,SAASC,gBAAgB,QAAQ,iCAA6B;AAC9D,SAASC,MAAMC,SAAS,QAAQ,eAAW;AAE3C;;;;;;;;CAQC,GACD,MAAMC,SAASX,WAAqC,CAACY,OAAOC,MAC1Dd,cAAcD,WAAW,aAKpBI,qBAAqBK,iBAAiBK;QACzCC;;AAGJF,OAAOG,WAAW,GAAG;AAErB,wEAAwE;AACxE,OAAO,MAAML,KAAwB,YAAW;AAEhD,OAAO,MAAMM,SAA6C;IACxDC,KAAKP;IACLQ,UAAUhB;IACVa,aAAa;IACbI,aACE;IACFC,UAAUvB,MAAMwB,iBAAiB,CAACC,UAAU;IAC5CC,MAAM;QACJC,MAAM1B,oBAAoB0B,IAAI;QAC9BC,IAAI;YAAEC,OAAO;QAAU;IACzB;IACAC,YAAY;QACVvB,yBAAyB;QACzBC;QACAC;QACAC;KACD;AACH,EAAC;AAED,OAAO,MAAMqB,UAAgC;IAC3C;QACEX,KAAKR,iBAAiBC;QACtBmB,MAAMhC,MAAMiC,QAAQ,CAACC,MAAM;QAC3BhB,aAAa;QACbG,UAAUhB;QACViB,aAAa;QACbC,UAAUvB,MAAMwB,iBAAiB,CAACC,UAAU;QAC5CC,MAAMP,OAAOO,IAAI;QACjBS,MAAM;YACJf,KAAK;YACLgB,aAAavB;YACbQ,UAAUhB;YACVgC,OAAO;gBACL;oBACEjB,KAAK;oBACLgB,aAAatB;oBACbO,UAAUhB;oBACVW,OAAO,CAAC;gBACV;aACD;QACH;IACF;CACD,CAAA;AAED,eAAeD,OAAM"}

package/src/lib/components/blocks.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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';
+export declare const VIDEO_EMBED_ID: Aglyn.ComponentId;
+export declare const SOCIAL_LINKS_ID: Aglyn.ComponentId;
+export interface VideoEmbedProps {
+    /** YouTube or Vimeo video URL. */
+    url?: string;
+    /** CSS height (default 315px, 16:9-ish with full width). */
+    height?: string;
+}
+/**
+ * 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 declare function parseVideoEmbedSrc(url: string): string | null;
+declare const VideoEmbed: import("react").ForwardRefExoticComponent<VideoEmbedProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const videoEmbedSchema: Aglyn.ComponentSchema<VideoEmbedProps>;
+export interface SocialLinksProps {
+    twitter?: string;
+    instagram?: string;
+    facebook?: string;
+    linkedin?: string;
+    youtube?: string;
+    github?: string;
+}
+declare const SocialLinks: import("react").ForwardRefExoticComponent<SocialLinksProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const socialLinksSchema: Aglyn.ComponentSchema<SocialLinksProps>;
+export declare const blockPresets: Aglyn.PresetSchema[];
+export { SocialLinks, VideoEmbed };
+export default VideoEmbed;