@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/section.js

@@ -0,0 +1,132 @@
+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 { mdiPageLayoutBody } from "@aglyn/shared-data-mdi";
+import Box from "@mui/material/Box";
+import { forwardRef } 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 ID = 'section';
+/**
+ * W3C sectioning/grouping elements the component may render as (AGL-336).
+ *
+ * ⛔ `main` IS NOT ONE OF THEM (AGL-2486). A published page carries exactly
+ * one `main` landmark, placed by composition on the page's content region —
+ * the layout's slot, or the screen root when there is no layout, each of which
+ * offers its own element picker. An author-selectable `main` on a grouping
+ * container that may appear any number of times per page could only ever
+ * produce a SECOND one — and two `main` elements is a worse
+ * accessibility outcome than none, because the landmark stops naming anything
+ * in particular. It was offered in this select, with field help recommending
+ * it, which made the duplicate the documented choice rather than a mistake.
+ *
+ * Removing it degrades rather than breaks: the resolver below falls back to
+ * `section` for any value not in this list, so a stored `element: 'main'` on a
+ * published screen renders as `<section>` — still a grouping element, still
+ * where the author put it, and no longer competing with the layout's landmark.
+ */ export const SECTION_ELEMENTS = [
+    'section',
+    'div',
+    'article',
+    'aside',
+    'nav',
+    'header',
+    'footer'
+];
+/**
+ * Semantic grouping container (AGL-336): renders children inside the
+ * chosen W3C element so pages keep meaningful document structure
+ * (landmarks for assistive tech, better SEO outlines) instead of
+ * div-soup. Behaves like any container: droppable, stylable via sx,
+ * classes, and interactions.
+ */ const Section = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { element, ariaLabel, children } = props, rest = _object_without_properties_loose(props, [
+        "element",
+        "ariaLabel",
+        "children"
+    ]);
+    const component = SECTION_ELEMENTS.includes(element) ? element : 'section';
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref,
+        component: component,
+        "aria-label": ariaLabel || undefined
+    }, rest, {
+        children: children
+    }));
+});
+Section.displayName = 'AglynSection';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Section',
+    description: 'Groups components inside a semantic HTML element (section, article, nav, …).',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiPageLayoutBody.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    attributes: [
+        {
+            name: 'element',
+            label: 'Component',
+            description: 'The DOM element this section renders as, per W3C semantics. ' + 'Use section/article/aside/nav/header/footer for meaningful ' + 'structure; div for purely visual grouping.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: SECTION_ELEMENTS.map((value)=>({
+                    value,
+                    label: value
+                }))
+        },
+        {
+            name: 'ariaLabel',
+            label: 'Accessible label',
+            description: 'Names the landmark for screen readers (recommended when a page ' + 'has several of the same element).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Section',
+        pluginId: BUNDLE_ID,
+        description: 'Semantic grouping container (section/div/article/…)',
+        category: Aglyn.ComponentCategory.LAYOUT,
+        icon: {
+            path: mdiPageLayoutBody.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                element: 'section'
+            }
+        }
+    }
+];
+export default Section;
+
+//# sourceMappingURL=section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/section.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 { mdiPageLayoutBody } from '@aglyn/shared-data-mdi'\nimport Box from '@mui/material/Box'\nimport { forwardRef } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'section'\n\n/**\n * W3C sectioning/grouping elements the component may render as (AGL-336).\n *\n * ⛔ `main` IS NOT ONE OF THEM (AGL-2486). A published page carries exactly\n * one `main` landmark, placed by composition on the page's content region —\n * the layout's slot, or the screen root when there is no layout, each of which\n * offers its own element picker. An author-selectable `main` on a grouping\n * container that may appear any number of times per page could only ever\n * produce a SECOND one — and two `main` elements is a worse\n * accessibility outcome than none, because the landmark stops naming anything\n * in particular. It was offered in this select, with field help recommending\n * it, which made the duplicate the documented choice rather than a mistake.\n *\n * Removing it degrades rather than breaks: the resolver below falls back to\n * `section` for any value not in this list, so a stored `element: 'main'` on a\n * published screen renders as `<section>` — still a grouping element, still\n * where the author put it, and no longer competing with the layout's landmark.\n */\nexport const SECTION_ELEMENTS = [\n  'section',\n  'div',\n  'article',\n  'aside',\n  'nav',\n  'header',\n  'footer',\n] as const\nexport type SectionElement = (typeof SECTION_ELEMENTS)[number]\n\nexport interface SectionProps {\n  /** The DOM element rendered; defaults to `section`. */\n  element?: SectionElement\n  /** Accessible name announced for landmark elements. */\n  ariaLabel?: string\n  children?: JSX.Children\n}\n\n/**\n * Semantic grouping container (AGL-336): renders children inside the\n * chosen W3C element so pages keep meaningful document structure\n * (landmarks for assistive tech, better SEO outlines) instead of\n * div-soup. Behaves like any container: droppable, stylable via sx,\n * classes, and interactions.\n */\nconst Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {\n  const { element, ariaLabel, children, ...rest } = props\n  const component = SECTION_ELEMENTS.includes(element as SectionElement)\n    ? (element as SectionElement)\n    : 'section'\n  return (\n    <Box\n      ref={ref}\n      component={component}\n      aria-label={ariaLabel || undefined}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n})\nSection.displayName = 'AglynSection'\n\nexport const schema: Aglyn.ComponentSchema<SectionProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Section',\n  description:\n    'Groups components inside a semantic HTML element (section, article, nav, …).',\n  category: Aglyn.ComponentCategory.LAYOUT,\n  icon: { path: mdiPageLayoutBody.path, sx: { color: '#2196f3' } },\n  attributes: [\n    {\n      name: 'element',\n      label: 'Component',\n      description:\n        'The DOM element this section renders as, per W3C semantics. ' +\n        'Use section/article/aside/nav/header/footer for meaningful ' +\n        'structure; div for purely visual grouping.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: SECTION_ELEMENTS.map((value) => ({ value, label: value })),\n    },\n    {\n      name: 'ariaLabel',\n      label: 'Accessible label',\n      description:\n        'Names the landmark for screen readers (recommended when a page ' +\n        'has several of the same element).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Section',\n    pluginId: BUNDLE_ID,\n    description: 'Semantic grouping container (section/div/article/…)',\n    category: Aglyn.ComponentCategory.LAYOUT,\n    icon: { path: mdiPageLayoutBody.path, sx: { color: '#2196f3' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { element: 'section' },\n    },\n  },\n]\n\nexport default Section\n"],"names":["Aglyn","mdiPageLayoutBody","Box","forwardRef","BUNDLE_ID","generatePresetId","ID","SECTION_ELEMENTS","Section","props","ref","element","ariaLabel","children","rest","component","includes","aria-label","undefined","displayName","schema","$id","pluginId","description","category","ComponentCategory","LAYOUT","icon","path","sx","color","attributes","name","label","FieldComponentType","SELECT","options","map","value","TEXT_FIELD","presets","type","NodeType","PRESET","data","componentId"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SAASC,iBAAiB,QAAQ,yBAAwB;AAC1D,OAAOC,SAAS,oBAAmB;AACnC,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SAASC,gBAAgB,QAAQ,iCAA6B;AAE9D,iEAAiE;AACjE,OAAO,MAAMC,KAAwB,UAAS;AAE9C;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,mBAAmB;IAC9B;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAS;AAWV;;;;;;CAMC,GACD,MAAMC,wBAAUL,WAAsC,CAACM,OAAOC;IAC5D,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAW,GAAGJ,OAATK,wCAASL;;;;;IAClD,MAAMM,YAAYR,iBAAiBS,QAAQ,CAACL,WACvCA,UACD;IACJ,qBACE,KAACT;QACCQ,KAAKA;QACLK,WAAWA;QACXE,cAAYL,aAAaM;OACrBJ;kBAEHD;;AAGP;AACAL,QAAQW,WAAW,GAAG;AAEtB,OAAO,MAAMC,SAA8C;IACzDC,KAAKf;IACLgB,UAAUlB;IACVe,aAAa;IACbI,aACE;IACFC,UAAUxB,MAAMyB,iBAAiB,CAACC,MAAM;IACxCC,MAAM;QAAEC,MAAM3B,kBAAkB2B,IAAI;QAAEC,IAAI;YAAEC,OAAO;QAAU;IAAE;IAC/DC,YAAY;QACV;YACEC,MAAM;YACNC,OAAO;YACPV,aACE,iEACA,gEACA;YACFR,WAAWf,MAAMkC,kBAAkB,CAACC,MAAM;YAC1CC,SAAS7B,iBAAiB8B,GAAG,CAAC,CAACC,QAAW,CAAA;oBAAEA;oBAAOL,OAAOK;gBAAM,CAAA;QAClE;QACA;YACEN,MAAM;YACNC,OAAO;YACPV,aACE,oEACA;YACFR,WAAWf,MAAMkC,kBAAkB,CAACK,UAAU;QAChD;KACD;AACH,EAAC;AAED,OAAO,MAAMC,UAAgC;IAC3C;QACEnB,KAAKhB,iBAAiBC;QACtBmC,MAAMzC,MAAM0C,QAAQ,CAACC,MAAM;QAC3BxB,aAAa;QACbG,UAAUlB;QACVmB,aAAa;QACbC,UAAUxB,MAAMyB,iBAAiB,CAACC,MAAM;QACxCC,MAAM;YAAEC,MAAM3B,kBAAkB2B,IAAI;YAAEC,IAAI;gBAAEC,OAAO;YAAU;QAAE;QAC/Dc,MAAM;YACJvB,KAAK;YACLwB,aAAavC;YACbgB,UAAUlB;YACVK,OAAO;gBAAEE,SAAS;YAAU;QAC9B;IACF;CACD,CAAA;AAED,eAAeH,QAAO"}

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

@@ -0,0 +1,55 @@
+/**
+ * @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 StackProps } from '@mui/material/Stack';
+import type { CSSProperties } from 'react';
+/**
+ * The dividers the `divider` attribute can name (AGL-2486).
+ *
+ * MUI's own `divider` prop takes a NODE, which an attributes panel cannot
+ * author — so the persisted value is a style name and this file builds the
+ * element. Anything else (an author's stray string, a paste) renders no
+ * divider rather than the literal text between every pair of children.
+ */
+declare const DIVIDER_STYLES: {
+    readonly line: {};
+    readonly dashed: {
+        readonly borderStyle: "dashed";
+    };
+};
+export type StackDivider = keyof typeof DIVIDER_STYLES;
+type StackWithFlexProps = Omit<StackProps, 'divider'> & {
+    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    flexWrap?: CSSProperties['flexWrap'];
+    /** Divider STYLE name, not a node — see {@link DIVIDER_STYLES}. */
+    divider?: StackDivider | string;
+    /**
+     * A repeat's directives (AGL-103, AGL-181). The published page's
+     * composition consumes them before anything renders; a surface that renders
+     * the stored node as written, like a component editor, still hands them over.
+     */
+    repeatDataset?: string;
+    repeatLimit?: number | string;
+    repeatFilter?: string;
+    repeatSort?: string;
+};
+declare const Stack: import("react").ForwardRefExoticComponent<Omit<StackWithFlexProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ID: Aglyn.ComponentId;
+export declare const schema: Aglyn.ComponentSchema;
+export declare const presets: Aglyn.PresetSchema[];
+export default Stack;

package/src/lib/components/stack.js

@@ -0,0 +1,309 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+/**
+ * @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 { mdiViewColumn, mdiViewSequential } from "@aglyn/shared-data-mdi";
+import MuiDivider from "@mui/material/Divider";
+import MuiStack from "@mui/material/Stack";
+import { createElement, forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { applySemanticElement, semanticElementAttribute, semanticElementLabelAttribute } from "../utils/element-picker.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+/**
+ * The dividers the `divider` attribute can name (AGL-2486).
+ *
+ * MUI's own `divider` prop takes a NODE, which an attributes panel cannot
+ * author — so the persisted value is a style name and this file builds the
+ * element. Anything else (an author's stray string, a paste) renders no
+ * divider rather than the literal text between every pair of children.
+ */ const DIVIDER_STYLES = {
+    line: {},
+    dashed: {
+        borderStyle: 'dashed'
+    }
+};
+/**
+ * A Stack's divider runs ACROSS the flow, so its orientation is the
+ * opposite of the stack's own axis. A responsive `direction` (an array or
+ * object) is not authorable here, so only the string form is inspected;
+ * anything else falls back to MUI's default horizontal rule.
+ */ function buildDivider(divider, direction) {
+    if (typeof divider !== 'string') return undefined;
+    // `hasOwnProperty`, not a truthiness test on the lookup: `"constructor"`
+    // and friends resolve through Object.prototype and would sail past one.
+    if (!Object.prototype.hasOwnProperty.call(DIVIDER_STYLES, divider)) {
+        return undefined;
+    }
+    const style = DIVIDER_STYLES[divider];
+    const horizontal = typeof direction === 'string' && direction.startsWith('row');
+    return createElement(MuiDivider, {
+        orientation: horizontal ? 'vertical' : 'horizontal',
+        // Without it a vertical divider collapses to zero height in a flex row.
+        flexItem: horizontal,
+        sx: style
+    });
+}
+const Stack = forwardRef(// repeatDataset/repeatLimit are compose-time attributes (AGL-103): the
+// tenant expands them before render; strip so they never hit the DOM.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+(_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { justifyContent, alignItems, flexWrap, divider, repeatDataset, repeatLimit, repeatFilter, repeatSort, sx } = _ref1, props = _object_without_properties_loose(_ref1, [
+        "justifyContent",
+        "alignItems",
+        "flexWrap",
+        "divider",
+        "repeatDataset",
+        "repeatLimit",
+        "repeatFilter",
+        "repeatSort",
+        "sx"
+    ]), [ref] = _rest;
+    return createElement(MuiStack, _extends({
+        ref,
+        sx: [
+            {
+                justifyContent,
+                alignItems,
+                flexWrap
+            },
+            ...Array.isArray(sx) ? sx : sx ? [
+                sx
+            ] : []
+        ],
+        // The stored value is a style NAME; MUI wants a node (AGL-2486).
+        divider: buildDivider(divider, props.direction)
+    }, applySemanticElement(dropClearedProps(props))));
+});
+// Component ids are persisted in screen documents; keep the legacy ids.
+export const ID = 'muiStack';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Stack',
+    description: 'Lays children out in a row or column with even spacing — the workhorse for most layouts.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiViewColumn.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    attributes: [
+        semanticElementAttribute('this stack'),
+        semanticElementLabelAttribute(),
+        {
+            name: 'direction',
+            label: 'Direction',
+            description: 'Defines the directional flow using the `flex-direction` style property. It is applied for all screen sizes.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // "Default" deleted (AGL-1453): unpersistable, and a second name for
+            // `column`, MUI Stack's own default, already on the list.
+            options: [
+                {
+                    value: 'column',
+                    label: 'Column'
+                },
+                {
+                    value: 'column-reverse',
+                    label: 'Column Reversed'
+                },
+                {
+                    value: 'row',
+                    label: 'Row'
+                },
+                {
+                    value: 'row-reverse',
+                    label: 'Row Reversed'
+                }
+            ]
+        },
+        {
+            name: 'justifyContent',
+            label: 'Justify Content',
+            description: 'Defines how the browser distributes space between and around content items along the main-axis of the container.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // "Default" deleted (AGL-1453). Unpersistable, and a second name for
+            // `flex-start`: CSS's initial `justify-content` is `normal`, which on a
+            // flex container — which a Stack always is — behaves as `flex-start`.
+            //
+            // Deleted rather than sentinelled for a second reason specific to this
+            // prop: `justifyContent` is destructured out ABOVE and pushed into
+            // `sx`, so it never passes through `dropClearedProps`. It is the one
+            // attribute on this component the guard does not cover, so the right
+            // move is to stop minting values it would have to catch.
+            options: [
+                {
+                    value: 'flex-start',
+                    label: 'Flex Start'
+                },
+                {
+                    value: 'center',
+                    label: 'Center'
+                },
+                {
+                    value: 'flex-end',
+                    label: 'Flex End'
+                },
+                {
+                    value: 'space-between',
+                    label: 'Space Between'
+                },
+                {
+                    value: 'space-around',
+                    label: 'Space Around'
+                },
+                {
+                    value: 'space-evenly',
+                    label: 'Space Evenly'
+                }
+            ]
+        },
+        {
+            name: 'alignItems',
+            label: 'Align Items',
+            description: 'Defines how the browser distributes space between and around ' + 'content items along the cross-axis of the container — the axis ' + 'across the Direction.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // No "Default" sentinel (AGL-1453): `stretch` is CSS's own initial
+            // `align-items` and is already on the list, and like `justifyContent`
+            // this prop is pushed into `sx` rather than through
+            // `dropClearedProps`, so an unpersistable `''` would not be caught.
+            options: [
+                {
+                    value: 'stretch',
+                    label: 'Stretch'
+                },
+                {
+                    value: 'flex-start',
+                    label: 'Flex Start'
+                },
+                {
+                    value: 'center',
+                    label: 'Center'
+                },
+                {
+                    value: 'flex-end',
+                    label: 'Flex End'
+                },
+                {
+                    value: 'baseline',
+                    label: 'Baseline'
+                }
+            ]
+        },
+        {
+            name: 'spacing',
+            label: 'Spacing',
+            description: 'Defines the space/gap between its immediate children.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'useFlexGap',
+            label: 'Use flex gap',
+            description: 'Space children with the CSS `gap` property instead of margins. ' + 'Required for Spacing to survive wrapping, and it leaves child ' + 'margins alone — but `gap` is unsupported in some older browsers.',
+            component: Aglyn.FieldComponentType.SWITCH
+        },
+        {
+            name: 'flexWrap',
+            label: 'Wrap',
+            description: 'Whether children that do not fit move onto a new line. Turn on ' + 'Use flex gap as well, or Spacing is applied as margins and the ' + 'wrapped rows get an uneven gap.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'nowrap',
+                    label: 'No Wrap'
+                },
+                {
+                    value: 'wrap',
+                    label: 'Wrap'
+                },
+                {
+                    value: 'wrap-reverse',
+                    label: 'Wrap Reversed'
+                }
+            ]
+        },
+        {
+            name: 'divider',
+            label: 'Divider',
+            description: 'Draws a rule between each pair of children, across the ' + 'Direction. Clear the field for no divider.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // MUI's own prop takes a node; the persisted value is a style name and
+            // the component builds the element. No `''` option (AGL-1453) — "no
+            // divider" is the field's ✕, which persists as cleared.
+            options: [
+                {
+                    value: 'line',
+                    label: 'Line'
+                },
+                {
+                    value: 'dashed',
+                    label: 'Dashed'
+                }
+            ]
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Stack Horizontal',
+        icon: {
+            path: mdiViewColumn.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        category: Aglyn.ComponentCategory.LAYOUT,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'row'
+            }
+        }
+    },
+    {
+        $id: generatePresetId(ID, 'vertical'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Stack Vertical',
+        icon: {
+            path: mdiViewSequential.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        category: Aglyn.ComponentCategory.LAYOUT,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                direction: 'column'
+            }
+        }
+    }
+];
+export default Stack;
+
+//# sourceMappingURL=stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/stack.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 {\n  mdiViewColumn,\n  mdiViewSequential,\n} from '@aglyn/shared-data-mdi'\nimport MuiDivider from '@mui/material/Divider'\nimport MuiStack, { type StackProps } from '@mui/material/Stack'\nimport type { CSSProperties, ReactElement } from 'react'\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 { dropClearedProps } from '../utils/drop-cleared-props'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n/**\n * The dividers the `divider` attribute can name (AGL-2486).\n *\n * MUI's own `divider` prop takes a NODE, which an attributes panel cannot\n * author — so the persisted value is a style name and this file builds the\n * element. Anything else (an author's stray string, a paste) renders no\n * divider rather than the literal text between every pair of children.\n */\nconst DIVIDER_STYLES = {\n  line: {},\n  dashed: { borderStyle: 'dashed' },\n} as const\n\nexport type StackDivider = keyof typeof DIVIDER_STYLES\n\n// justifyContent/alignItems/flexWrap are not direct StackProps in MUI v6+;\n// pass them through sx.\ntype StackWithFlexProps = Omit<StackProps, 'divider'> & {\n  justifyContent?: CSSProperties['justifyContent']\n  alignItems?: CSSProperties['alignItems']\n  flexWrap?: CSSProperties['flexWrap']\n  /** Divider STYLE name, not a node — see {@link DIVIDER_STYLES}. */\n  divider?: StackDivider | string\n  /**\n   * A repeat's directives (AGL-103, AGL-181). The published page's\n   * composition consumes them before anything renders; a surface that renders\n   * the stored node as written, like a component editor, still hands them over.\n   */\n  repeatDataset?: string\n  repeatLimit?: number | string\n  repeatFilter?: string\n  repeatSort?: string\n}\n\n/**\n * A Stack's divider runs ACROSS the flow, so its orientation is the\n * opposite of the stack's own axis. A responsive `direction` (an array or\n * object) is not authorable here, so only the string form is inspected;\n * anything else falls back to MUI's default horizontal rule.\n */\nfunction buildDivider(\n  divider: unknown,\n  direction: unknown,\n): ReactElement | undefined {\n  if (typeof divider !== 'string') return undefined\n  // `hasOwnProperty`, not a truthiness test on the lookup: `\"constructor\"`\n  // and friends resolve through Object.prototype and would sail past one.\n  if (!Object.prototype.hasOwnProperty.call(DIVIDER_STYLES, divider)) {\n    return undefined\n  }\n  const style = DIVIDER_STYLES[divider as StackDivider]\n  const horizontal =\n    typeof direction === 'string' && direction.startsWith('row')\n  return createElement(MuiDivider, {\n    orientation: horizontal ? 'vertical' : 'horizontal',\n    // Without it a vertical divider collapses to zero height in a flex row.\n    flexItem: horizontal,\n    sx: style,\n  })\n}\n\nconst Stack = forwardRef<HTMLDivElement, StackWithFlexProps>(\n  // repeatDataset/repeatLimit are compose-time attributes (AGL-103): the\n  // tenant expands them before render; strip so they never hit the DOM.\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  ({ justifyContent, alignItems, flexWrap, divider, repeatDataset, repeatLimit, repeatFilter, repeatSort, sx, ...props }, ref) =>\n    createElement(MuiStack, {\n      ref,\n      sx: [\n        { justifyContent, alignItems, flexWrap },\n        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n      ],\n      // The stored value is a style NAME; MUI wants a node (AGL-2486).\n      divider: buildDivider(divider, props.direction),\n      // A cleared `direction` persists as null, and MUI resolves it as a\n      // responsive value — `null.xs` throws during SSR and 500s the page.\n      // Same class as the AGL-1226 button colour, different sharp edge.\n      // Last, so an author's element wins over anything `props` carried\n      // (AGL-2525). A stack IS the nav row on most sites; before this it\n      // could only be wrapped in one.\n      ...applySemanticElement(dropClearedProps(props) as Record<string, unknown>),\n    }),\n)\n\n// Component ids are persisted in screen documents; keep the legacy ids.\nexport const ID: Aglyn.ComponentId = 'muiStack'\n\nexport const schema: Aglyn.ComponentSchema = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Stack',\n  description:\n    'Lays children out in a row or column with even spacing — the workhorse for most layouts.',\n  category: Aglyn.ComponentCategory.LAYOUT,\n  icon: {\n    path: mdiViewColumn.path,\n    sx: { color: '#2196f3' },\n  },\n  attributes: [\n    semanticElementAttribute('this stack'),\n    semanticElementLabelAttribute(),\n    {\n      name: 'direction',\n      label: 'Direction',\n      description:\n        'Defines the directional flow using the `flex-direction` style property. It is applied for all screen sizes.',\n      component: Aglyn.FieldComponentType.SELECT,\n      // \"Default\" deleted (AGL-1453): unpersistable, and a second name for\n      // `column`, MUI Stack's own default, already on the list.\n      options: [\n        { value: 'column', label: 'Column' },\n        { value: 'column-reverse', label: 'Column Reversed' },\n        { value: 'row', label: 'Row' },\n        { value: 'row-reverse', label: 'Row Reversed' },\n      ],\n    },\n    {\n      name: 'justifyContent',\n      label: 'Justify Content',\n      description:\n        'Defines how the browser distributes space between and around content items along the main-axis of the container.',\n      component: Aglyn.FieldComponentType.SELECT,\n      // \"Default\" deleted (AGL-1453). Unpersistable, and a second name for\n      // `flex-start`: CSS's initial `justify-content` is `normal`, which on a\n      // flex container — which a Stack always is — behaves as `flex-start`.\n      //\n      // Deleted rather than sentinelled for a second reason specific to this\n      // prop: `justifyContent` is destructured out ABOVE and pushed into\n      // `sx`, so it never passes through `dropClearedProps`. It is the one\n      // attribute on this component the guard does not cover, so the right\n      // move is to stop minting values it would have to catch.\n      options: [\n        { value: 'flex-start', label: 'Flex Start' },\n        { value: 'center', label: 'Center' },\n        { value: 'flex-end', label: 'Flex End' },\n        { value: 'space-between', label: 'Space Between' },\n        { value: 'space-around', label: 'Space Around' },\n        { value: 'space-evenly', label: 'Space Evenly' },\n      ],\n    },\n    {\n      name: 'alignItems',\n      label: 'Align Items',\n      description:\n        'Defines how the browser distributes space between and around ' +\n        'content items along the cross-axis of the container — the axis ' +\n        'across the Direction.',\n      component: Aglyn.FieldComponentType.SELECT,\n      // No \"Default\" sentinel (AGL-1453): `stretch` is CSS's own initial\n      // `align-items` and is already on the list, and like `justifyContent`\n      // this prop is pushed into `sx` rather than through\n      // `dropClearedProps`, so an unpersistable `''` would not be caught.\n      options: [\n        { value: 'stretch', label: 'Stretch' },\n        { value: 'flex-start', label: 'Flex Start' },\n        { value: 'center', label: 'Center' },\n        { value: 'flex-end', label: 'Flex End' },\n        { value: 'baseline', label: 'Baseline' },\n      ],\n    },\n    {\n      name: 'spacing',\n      label: 'Spacing',\n      description: 'Defines the space/gap between its immediate children.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n    {\n      name: 'useFlexGap',\n      label: 'Use flex gap',\n      description:\n        'Space children with the CSS `gap` property instead of margins. ' +\n        'Required for Spacing to survive wrapping, and it leaves child ' +\n        'margins alone — but `gap` is unsupported in some older browsers.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n    {\n      name: 'flexWrap',\n      label: 'Wrap',\n      description:\n        'Whether children that do not fit move onto a new line. Turn on ' +\n        'Use flex gap as well, or Spacing is applied as margins and the ' +\n        'wrapped rows get an uneven gap.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'nowrap', label: 'No Wrap' },\n        { value: 'wrap', label: 'Wrap' },\n        { value: 'wrap-reverse', label: 'Wrap Reversed' },\n      ],\n    },\n    {\n      name: 'divider',\n      label: 'Divider',\n      description:\n        'Draws a rule between each pair of children, across the ' +\n        'Direction. Clear the field for no divider.',\n      component: Aglyn.FieldComponentType.SELECT,\n      // MUI's own prop takes a node; the persisted value is a style name and\n      // the component builds the element. No `''` option (AGL-1453) — \"no\n      // divider\" is the field's ✕, which persists as cleared.\n      options: [\n        { value: 'line', label: 'Line' },\n        { value: 'dashed', label: 'Dashed' },\n      ],\n    },\n    // No Repeat fields: every element's Attributes panel draws the same Repeat\n    // section (AGL-3111), writing the props a Stack has always stored.\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Stack Horizontal',\n    icon: {\n      path: mdiViewColumn.path,\n      sx: { color: '#2196f3' },\n    },\n    category: Aglyn.ComponentCategory.LAYOUT,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { direction: 'row' },\n    },\n  },\n  {\n    $id: generatePresetId(ID, 'vertical'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Stack Vertical',\n    icon: {\n      path: mdiViewSequential.path,\n      sx: { color: '#2196f3' },\n    },\n    category: Aglyn.ComponentCategory.LAYOUT,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { direction: 'column' },\n    },\n  },\n]\n\nexport default Stack\n"],"names":["Aglyn","mdiViewColumn","mdiViewSequential","MuiDivider","MuiStack","createElement","forwardRef","BUNDLE_ID","applySemanticElement","semanticElementAttribute","semanticElementLabelAttribute","dropClearedProps","generatePresetId","DIVIDER_STYLES","line","dashed","borderStyle","buildDivider","divider","direction","undefined","Object","prototype","hasOwnProperty","call","style","horizontal","startsWith","orientation","flexItem","sx","Stack","justifyContent","alignItems","flexWrap","repeatDataset","repeatLimit","repeatFilter","repeatSort","props","ref","Array","isArray","ID","schema","$id","pluginId","displayName","description","category","ComponentCategory","LAYOUT","icon","path","color","attributes","name","label","component","FieldComponentType","SELECT","options","value","TEXT_FIELD","type","SWITCH","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}