@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/grid.js

@@ -0,0 +1,322 @@
+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 { mdiViewGrid, mdiViewGridOutline } from "@aglyn/shared-data-mdi";
+// Deep import, NOT the barrel (AGL-1151): `@aglyn/shared-data-enums` re-exports
+// `firebase-auth`, whose `AuthErrorCodes` is a VALUE import of `firebase/auth`.
+// This bundle is `alwaysOn`, so the barrel put the whole Firebase auth client
+// into the chunk every published tenant page loads — a database/identity SDK
+// shipped and evaluated to render static HTML that authenticates nobody. Three
+// breakpoint symbols are the entire reason this module reaches for that
+// library; they live here, one file away from the barrel.
+import { parseBreakpointSpan, SPAN_BREAKPOINTS } from "@aglyn/shared-data-enums/breakpoint-span";
+import MuiGrid from "@mui/material/Grid";
+import { forwardRef } from "react";
+import { applySemanticElement, semanticElementAttribute, semanticElementLabelAttribute } from "../utils/element-picker.js";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'muiGrid';
+/**
+ * Breakpoint keys MUI's responsive `size`/`offset` objects accept.
+ *
+ * Re-exported from `@aglyn/shared-data-enums` rather than declared twice
+ * (AGL-2486): the attributes panel's breakpoint row and this parser have to
+ * agree on the list, and two copies is how they stop agreeing.
+ */ export const BREAKPOINTS = SPAN_BREAKPOINTS;
+/**
+ * Parses the authored span syntax into what MUI v6+ Grid expects.
+ *
+ * MUI dropped the `item` prop and the per-breakpoint `xs=`/`md=` props in
+ * v6; v9 (installed here) takes a single `size` that is either a value or
+ * a `{ xs, md, … }` object. One STORED string covers both, and this parser
+ * owns the translation:
+ *
+ *   `6`           → 6
+ *   `auto`        → 'auto'
+ *   `grow`        → 'grow'
+ *   `xs:12 md:6`  → { xs: 12, md: 6 }
+ *
+ * Anything unparseable returns `undefined` rather than a partial object:
+ * a half-applied breakpoint map is a layout that silently differs from
+ * what the author typed.
+ */ export function parseSpan(value) {
+    // The reading itself is `parseBreakpointSpan` in `@aglyn/shared-data-enums`
+    // (AGL-2486), shared with the attributes panel's breakpoint row so the
+    // editor and the renderer cannot disagree about a stored string. This
+    // function keeps its own signature and its "unparseable means unset"
+    // contract: `raw` is what the editor hands back untouched, and what MUI
+    // must never receive.
+    const span = parseBreakpointSpan(value);
+    if (span.raw !== undefined) return undefined;
+    if (span.base !== undefined) return span.base;
+    return span.values && Object.keys(span.values).length ? span.values : undefined;
+}
+/**
+ * Same syntax as `parseSpan`, minus `grow`.
+ *
+ * MUI's `GridOffset` is `'auto' | number` only — a `grow` offset is not
+ * a wider gap, it is a value the layout cannot use, so it is dropped
+ * here rather than passed through to be ignored.
+ */ export function parseOffset(value) {
+    const parsed = parseSpan(value);
+    if (parsed === 'grow') return undefined;
+    if (parsed && typeof parsed === 'object') {
+        const kept = Object.fromEntries(Object.entries(parsed).filter(([, span])=>span !== 'grow'));
+        return Object.keys(kept).length ? kept : undefined;
+    }
+    return parsed;
+}
+/** Spacing/columns arrive as strings from number fields; MUI wants numbers. */ function toNumber(value) {
+    if (value == null || value === '') return undefined;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+/**
+ * Responsive 12-column grid (https://mui.com/material-ui/react-grid/).
+ * One element covers both roles, matching MUI v6+: switch **Container**
+ * on for the row, leave it off and set a **Span** for each cell.
+ */ const GridElement = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { container, size, offset, spacing, rowSpacing, columnSpacing, columns, direction, wrap, children } = props, rest = _object_without_properties_loose(props, [
+        "container",
+        "size",
+        "offset",
+        "spacing",
+        "rowSpacing",
+        "columnSpacing",
+        "columns",
+        "direction",
+        "wrap",
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsx(MuiGrid, _extends({
+        ref: ref,
+        container: !!container,
+        size: parseSpan(size),
+        offset: parseOffset(offset),
+        // Spacing props only apply to containers; MUI ignores them on
+        // items, so no need to strip them here.
+        spacing: toNumber(spacing),
+        rowSpacing: toNumber(rowSpacing),
+        columnSpacing: toNumber(columnSpacing),
+        columns: toNumber(columns)
+    }, dropClearedProps({
+        direction,
+        wrap
+    }), applySemanticElement(dropClearedProps(rest)), {
+        children: children
+    }));
+});
+GridElement.displayName = 'AglynGrid';
+/** Container-only props: MUI ignores these on an item. */ const CONTAINER_ONLY = {
+    when: 'container',
+    is: true
+};
+/** Item-only props: a container spans its parent, not a column count. */ const ITEM_ONLY = {
+    when: 'container',
+    is: true,
+    notMatch: true
+};
+const SPAN_HELP = 'How many columns this cell takes. Set **All** for every screen size, or ' + 'give individual breakpoints a value — `xs` applies from the smallest ' + 'screens up and each larger breakpoint overrides it. `auto` fits the ' + 'content, `grow` takes the remaining space.';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Grid',
+    description: 'Responsive 12-column layout. Turn on Container for the row; give ' + 'each cell a Span.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiViewGrid.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    attributes: [
+        semanticElementAttribute('this grid'),
+        semanticElementLabelAttribute(),
+        {
+            name: 'container',
+            label: 'Container?',
+            description: 'If true, this grid lays its direct Grid children out in columns. ' + 'Leave it off for a cell inside another grid.',
+            component: Aglyn.FieldComponentType.SWITCH
+        },
+        {
+            name: 'size',
+            label: 'Span',
+            description: SPAN_HELP,
+            // A row of breakpoint controls rather than a text box (AGL-2486). The
+            // STORED value is the same string it always was; only the way it is
+            // authored changed. `xs:12 md:2` was a developer syntax documented
+            // nowhere but this tooltip, so the responsive capability was there and
+            // effectively unreachable.
+            component: Aglyn.FieldComponentType.BREAKPOINT_SPAN,
+            condition: ITEM_ONLY
+        },
+        {
+            name: 'offset',
+            label: 'Offset',
+            description: 'Empty columns before this cell. `auto` pushes the cell to the ' + 'right; `grow` is a span keyword and not an offset, so it is not ' + 'offered here.',
+            component: Aglyn.FieldComponentType.BREAKPOINT_SPAN,
+            // MUI's GridOffset is `'auto' | number`: a zero offset is a real
+            // choice, and `grow` is not one at all.
+            allowGrow: false,
+            minSpan: 0,
+            condition: ITEM_ONLY
+        },
+        {
+            name: 'spacing',
+            label: 'Spacing',
+            description: 'Gap between cells, in theme spacing units (1 = 8px by default).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number',
+            condition: CONTAINER_ONLY
+        },
+        {
+            name: 'rowSpacing',
+            label: 'Row spacing',
+            description: 'Vertical gap only; overrides Spacing.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number',
+            condition: CONTAINER_ONLY
+        },
+        {
+            name: 'columnSpacing',
+            label: 'Column spacing',
+            description: 'Horizontal gap only; overrides Spacing.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number',
+            condition: CONTAINER_ONLY
+        },
+        {
+            name: 'columns',
+            label: 'Columns',
+            description: 'Total columns the row is divided into. Default 12.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number',
+            condition: CONTAINER_ONLY
+        },
+        {
+            name: 'direction',
+            label: 'Direction',
+            // The option that is NOT offered is the point of this field. MUI's own
+            // API doc: "Only `row` and `row-reverse` are supported. `column` and
+            // `column-reverse` are not supported, because the Grid component is
+            // designed to subdivide layouts into columns, not rows." Offering them
+            // would be a control that silently does nothing.
+            description: 'Sets the `flex-direction` for the row. Only Row and Row Reversed ' + 'are supported — Grid divides a layout into columns, so a column ' + 'direction does nothing. Use a Stack for a vertical layout.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'row',
+                    label: 'Row'
+                },
+                {
+                    value: 'row-reverse',
+                    label: 'Row Reversed'
+                }
+            ],
+            condition: CONTAINER_ONLY
+        },
+        {
+            name: 'wrap',
+            label: 'Wrap',
+            description: 'Whether cells that do not fit move onto a new line. Default Wrap; ' + 'No Wrap keeps every cell on one line and lets them shrink instead.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'wrap',
+                    label: 'Wrap'
+                },
+                {
+                    value: 'nowrap',
+                    label: 'No Wrap'
+                },
+                {
+                    value: 'wrap-reverse',
+                    label: 'Wrap Reversed'
+                }
+            ],
+            condition: CONTAINER_ONLY
+        }
+    ]
+};
+const cell = (size, text)=>({
+        $id: null,
+        componentId: ID,
+        pluginId: BUNDLE_ID,
+        props: {
+            size
+        },
+        nodes: [
+            {
+                $id: null,
+                componentId: 'muiTypography',
+                pluginId: BUNDLE_ID,
+                props: {
+                    variant: 'body2',
+                    children: text
+                }
+            }
+        ]
+    });
+export const presets = [
+    {
+        // Ships as a working responsive row, not a bare container: an empty
+        // grid renders as nothing at all on the canvas.
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Grid',
+        pluginId: BUNDLE_ID,
+        description: 'Responsive row — three columns that stack on mobile',
+        category: Aglyn.ComponentCategory.LAYOUT,
+        icon: schema.icon,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                container: true,
+                spacing: 2
+            },
+            nodes: [
+                cell('xs:12 md:4', 'Column one'),
+                cell('xs:12 md:4', 'Column two'),
+                cell('xs:12 md:4', 'Column three')
+            ]
+        }
+    },
+    {
+        $id: generatePresetId(ID, 'cell'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Grid Cell',
+        pluginId: BUNDLE_ID,
+        description: 'A single cell to add to an existing grid row',
+        category: Aglyn.ComponentCategory.LAYOUT,
+        icon: {
+            path: mdiViewGridOutline.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        data: cell('xs:12 md:6', 'Cell')
+    }
+];
+export default GridElement;
+
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/grid.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 { mdiViewGrid, mdiViewGridOutline } from '@aglyn/shared-data-mdi'\n// Deep import, NOT the barrel (AGL-1151): `@aglyn/shared-data-enums` re-exports\n// `firebase-auth`, whose `AuthErrorCodes` is a VALUE import of `firebase/auth`.\n// This bundle is `alwaysOn`, so the barrel put the whole Firebase auth client\n// into the chunk every published tenant page loads — a database/identity SDK\n// shipped and evaluated to render static HTML that authenticates nobody. Three\n// breakpoint symbols are the entire reason this module reaches for that\n// library; they live here, one file away from the barrel.\nimport {\n  parseBreakpointSpan,\n  SPAN_BREAKPOINTS,\n  type SpanBreakpoint,\n} from '@aglyn/shared-data-enums/breakpoint-span'\nimport MuiGrid from '@mui/material/Grid'\nimport { forwardRef, type ReactNode } from 'react'\nimport {\n  applySemanticElement,\n  semanticElementAttribute,\n  semanticElementLabelAttribute,\n} from '../utils/element-picker'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { dropClearedProps } from '../utils/drop-cleared-props'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'muiGrid'\n\n/**\n * Breakpoint keys MUI's responsive `size`/`offset` objects accept.\n *\n * Re-exported from `@aglyn/shared-data-enums` rather than declared twice\n * (AGL-2486): the attributes panel's breakpoint row and this parser have to\n * agree on the list, and two copies is how they stop agreeing.\n */\nexport const BREAKPOINTS = SPAN_BREAKPOINTS\nexport type Breakpoint = SpanBreakpoint\n\nexport interface GridElementProps {\n  /** Flex container behavior; items are its direct Grid children. */\n  container?: boolean\n  /**\n   * Column span. Persisted as one string: a bare span (`6`), the keywords\n   * `auto`/`grow`, or per-breakpoint pairs (`xs:12 md:6`). Authored through\n   * the breakpoint row in the attributes panel (AGL-2486); the stored\n   * format is unchanged from when it was a text box.\n   */\n  size?: string | number\n  /** Empty columns before the item; same syntax as `size`, minus `grow`. */\n  offset?: string | number\n  spacing?: number | string\n  rowSpacing?: number | string\n  columnSpacing?: number | string\n  /** Total columns in the container; MUI's default is 12. */\n  columns?: number | string\n  /**\n   * Container flow. MUI supports `row`/`row-reverse` ONLY — Grid subdivides\n   * a layout into columns, and `column`/`column-reverse` are documented as\n   * unsupported (use a Stack for a vertical layout).\n   */\n  direction?: 'row' | 'row-reverse'\n  /** `flex-wrap` for the container; MUI's default is `wrap`. */\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'\n  children?: ReactNode\n}\n\n/**\n * Parses the authored span syntax into what MUI v6+ Grid expects.\n *\n * MUI dropped the `item` prop and the per-breakpoint `xs=`/`md=` props in\n * v6; v9 (installed here) takes a single `size` that is either a value or\n * a `{ xs, md, … }` object. One STORED string covers both, and this parser\n * owns the translation:\n *\n *   `6`           → 6\n *   `auto`        → 'auto'\n *   `grow`        → 'grow'\n *   `xs:12 md:6`  → { xs: 12, md: 6 }\n *\n * Anything unparseable returns `undefined` rather than a partial object:\n * a half-applied breakpoint map is a layout that silently differs from\n * what the author typed.\n */\nexport function parseSpan(\n  value: unknown,\n): number | 'auto' | 'grow' | Record<string, number | 'auto' | 'grow'> | undefined {\n  // The reading itself is `parseBreakpointSpan` in `@aglyn/shared-data-enums`\n  // (AGL-2486), shared with the attributes panel's breakpoint row so the\n  // editor and the renderer cannot disagree about a stored string. This\n  // function keeps its own signature and its \"unparseable means unset\"\n  // contract: `raw` is what the editor hands back untouched, and what MUI\n  // must never receive.\n  const span = parseBreakpointSpan(value as string | number)\n  if (span.raw !== undefined) return undefined\n  if (span.base !== undefined) return span.base\n  return span.values && Object.keys(span.values).length\n    ? (span.values as Record<string, number | 'auto' | 'grow'>)\n    : undefined\n}\n\n/**\n * Same syntax as `parseSpan`, minus `grow`.\n *\n * MUI's `GridOffset` is `'auto' | number` only — a `grow` offset is not\n * a wider gap, it is a value the layout cannot use, so it is dropped\n * here rather than passed through to be ignored.\n */\nexport function parseOffset(value: unknown) {\n  const parsed = parseSpan(value)\n  if (parsed === 'grow') return undefined\n  if (parsed && typeof parsed === 'object') {\n    const kept = Object.fromEntries(\n      Object.entries(parsed).filter(([, span]) => span !== 'grow'),\n    )\n    return Object.keys(kept).length\n      ? (kept as Record<string, number | 'auto'>)\n      : undefined\n  }\n  return parsed as number | 'auto' | undefined\n}\n\n/** Spacing/columns arrive as strings from number fields; MUI wants numbers. */\nfunction toNumber(value: unknown): number | undefined {\n  if (value == null || value === '') return undefined\n  const parsed = Number(value)\n  return Number.isFinite(parsed) ? parsed : undefined\n}\n\n/**\n * Responsive 12-column grid (https://mui.com/material-ui/react-grid/).\n * One element covers both roles, matching MUI v6+: switch **Container**\n * on for the row, leave it off and set a **Span** for each cell.\n */\nconst GridElement = forwardRef<HTMLDivElement, GridElementProps>(\n  (props, ref) => {\n    const {\n      container,\n      size,\n      offset,\n      spacing,\n      rowSpacing,\n      columnSpacing,\n      columns,\n      direction,\n      wrap,\n      children,\n      ...rest\n    } = props\n    return (\n      <MuiGrid\n        ref={ref}\n        container={!!container}\n        size={parseSpan(size)}\n        offset={parseOffset(offset)}\n        // Spacing props only apply to containers; MUI ignores them on\n        // items, so no need to strip them here.\n        spacing={toNumber(spacing)}\n        rowSpacing={toNumber(rowSpacing)}\n        columnSpacing={toNumber(columnSpacing)}\n        columns={toNumber(columns)}\n        // A CLEARED select persists as `null`, and MUI resolves both of these\n        // as responsive values — `null.xs` throws during SSR and 500s the\n        // published page (the AGL-1226 shape). `undefined` is what \"cleared\"\n        // has to mean by the time it reaches MUI.\n        {...dropClearedProps({ direction, wrap })}\n        {...applySemanticElement(dropClearedProps(rest) as Record<string, unknown>)}\n      >\n        {children}\n      </MuiGrid>\n    )\n  },\n)\nGridElement.displayName = 'AglynGrid'\n\n/** Container-only props: MUI ignores these on an item. */\nconst CONTAINER_ONLY = { when: 'container', is: true }\n/** Item-only props: a container spans its parent, not a column count. */\nconst ITEM_ONLY = { when: 'container', is: true, notMatch: true }\n\nconst SPAN_HELP =\n  'How many columns this cell takes. Set **All** for every screen size, or ' +\n  'give individual breakpoints a value — `xs` applies from the smallest ' +\n  'screens up and each larger breakpoint overrides it. `auto` fits the ' +\n  'content, `grow` takes the remaining space.'\n\nexport const schema: Aglyn.ComponentSchema<GridElementProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Grid',\n  description:\n    'Responsive 12-column layout. Turn on Container for the row; give ' +\n    'each cell a Span.',\n  category: Aglyn.ComponentCategory.LAYOUT,\n  icon: { path: mdiViewGrid.path, sx: { color: '#2196f3' } },\n  attributes: [\n    semanticElementAttribute('this grid'),\n    semanticElementLabelAttribute(),\n    {\n      name: 'container',\n      label: 'Container?',\n      description:\n        'If true, this grid lays its direct Grid children out in columns. ' +\n        'Leave it off for a cell inside another grid.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n    {\n      name: 'size',\n      label: 'Span',\n      description: SPAN_HELP,\n      // A row of breakpoint controls rather than a text box (AGL-2486). The\n      // STORED value is the same string it always was; only the way it is\n      // authored changed. `xs:12 md:2` was a developer syntax documented\n      // nowhere but this tooltip, so the responsive capability was there and\n      // effectively unreachable.\n      component: Aglyn.FieldComponentType.BREAKPOINT_SPAN,\n      condition: ITEM_ONLY,\n    },\n    {\n      name: 'offset',\n      label: 'Offset',\n      description:\n        'Empty columns before this cell. `auto` pushes the cell to the ' +\n        'right; `grow` is a span keyword and not an offset, so it is not ' +\n        'offered here.',\n      component: Aglyn.FieldComponentType.BREAKPOINT_SPAN,\n      // MUI's GridOffset is `'auto' | number`: a zero offset is a real\n      // choice, and `grow` is not one at all.\n      allowGrow: false,\n      minSpan: 0,\n      condition: ITEM_ONLY,\n    },\n    {\n      name: 'spacing',\n      label: 'Spacing',\n      description:\n        'Gap between cells, in theme spacing units (1 = 8px by default).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n      condition: CONTAINER_ONLY,\n    },\n    {\n      name: 'rowSpacing',\n      label: 'Row spacing',\n      description: 'Vertical gap only; overrides Spacing.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n      condition: CONTAINER_ONLY,\n    },\n    {\n      name: 'columnSpacing',\n      label: 'Column spacing',\n      description: 'Horizontal gap only; overrides Spacing.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n      condition: CONTAINER_ONLY,\n    },\n    {\n      name: 'columns',\n      label: 'Columns',\n      description: 'Total columns the row is divided into. Default 12.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n      condition: CONTAINER_ONLY,\n    },\n    {\n      name: 'direction',\n      label: 'Direction',\n      // The option that is NOT offered is the point of this field. MUI's own\n      // API doc: \"Only `row` and `row-reverse` are supported. `column` and\n      // `column-reverse` are not supported, because the Grid component is\n      // designed to subdivide layouts into columns, not rows.\" Offering them\n      // would be a control that silently does nothing.\n      description:\n        'Sets the `flex-direction` for the row. Only Row and Row Reversed ' +\n        'are supported — Grid divides a layout into columns, so a column ' +\n        'direction does nothing. Use a Stack for a vertical layout.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'row', label: 'Row' },\n        { value: 'row-reverse', label: 'Row Reversed' },\n      ],\n      condition: CONTAINER_ONLY,\n    },\n    {\n      name: 'wrap',\n      label: 'Wrap',\n      description:\n        'Whether cells that do not fit move onto a new line. Default Wrap; ' +\n        'No Wrap keeps every cell on one line and lets them shrink instead.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'wrap', label: 'Wrap' },\n        { value: 'nowrap', label: 'No Wrap' },\n        { value: 'wrap-reverse', label: 'Wrap Reversed' },\n      ],\n      condition: CONTAINER_ONLY,\n    },\n  ],\n}\n\nconst cell = (size: string, text: string) => ({\n  $id: null,\n  componentId: ID,\n  pluginId: BUNDLE_ID,\n  props: { size },\n  nodes: [\n    {\n      $id: null,\n      componentId: 'muiTypography',\n      pluginId: BUNDLE_ID,\n      props: { variant: 'body2', children: text },\n    },\n  ],\n})\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    // Ships as a working responsive row, not a bare container: an empty\n    // grid renders as nothing at all on the canvas.\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Grid',\n    pluginId: BUNDLE_ID,\n    description: 'Responsive row — three columns that stack on mobile',\n    category: Aglyn.ComponentCategory.LAYOUT,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { container: true, spacing: 2 },\n      nodes: [\n        cell('xs:12 md:4', 'Column one'),\n        cell('xs:12 md:4', 'Column two'),\n        cell('xs:12 md:4', 'Column three'),\n      ],\n    },\n  },\n  {\n    $id: generatePresetId(ID, 'cell'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Grid Cell',\n    pluginId: BUNDLE_ID,\n    description: 'A single cell to add to an existing grid row',\n    category: Aglyn.ComponentCategory.LAYOUT,\n    icon: { path: mdiViewGridOutline.path, sx: { color: '#2196f3' } },\n    data: cell('xs:12 md:6', 'Cell'),\n  },\n]\n\nexport default GridElement\n"],"names":["Aglyn","mdiViewGrid","mdiViewGridOutline","parseBreakpointSpan","SPAN_BREAKPOINTS","MuiGrid","forwardRef","applySemanticElement","semanticElementAttribute","semanticElementLabelAttribute","BUNDLE_ID","dropClearedProps","generatePresetId","ID","BREAKPOINTS","parseSpan","value","span","raw","undefined","base","values","Object","keys","length","parseOffset","parsed","kept","fromEntries","entries","filter","toNumber","Number","isFinite","GridElement","props","ref","container","size","offset","spacing","rowSpacing","columnSpacing","columns","direction","wrap","children","rest","displayName","CONTAINER_ONLY","when","is","ITEM_ONLY","notMatch","SPAN_HELP","schema","$id","pluginId","description","category","ComponentCategory","LAYOUT","icon","path","sx","color","attributes","name","label","component","FieldComponentType","SWITCH","BREAKPOINT_SPAN","condition","allowGrow","minSpan","TEXT_FIELD","type","SELECT","options","cell","text","componentId","nodes","variant","presets","NodeType","PRESET","data"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+/**
+ * @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 { SxProps } from '@mui/material/styles';
+export declare const ID: Aglyn.ComponentId;
+export interface IconProps {
+    /** mdi icon id from the picker (AGL-146). */
+    iconId?: string;
+    /**
+     * Resolved SVG path for `iconId`, denormalized at author time (AGL-1212).
+     * Render surfaces read this and never load the icon catalog.
+     */
+    iconPath?: string;
+    /** Icon size in px; defaults to 24. */
+    size?: number;
+    /** CSS color; defaults to the inherited text color. */
+    color?: string;
+    /**
+     * Authored node styles, handed over by the renderer rather than typed
+     * into an attribute — recomposed below so the Styles panel's values are
+     * merged rather than replaced (AGL-1284).
+     */
+    sx?: SxProps;
+}
+/**
+ * Icon element (AGL-146): renders a picked mdi icon with size/color
+ * controls; an empty pick shows a labeled placeholder so the element stays
+ * selectable in the editor.
+ *
+ * Path resolution order (AGL-1212): the persisted `iconPath` first, then the
+ * in-memory catalog for documents authored before paths were stored. The
+ * catalog is ~2.9 MB and is only loaded by picker surfaces, so on the tenant
+ * site and in preview the second lookup misses — which is why it must NOT go
+ * through `getMdiIconFromId`, whose `DEFAULT_ICON` fallback carries a real
+ * path and rendered a "help" glyph on every published page.
+ */
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLElement>>;
+export declare const schema: Aglyn.ComponentSchema<IconProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default Icon;

package/src/lib/components/icon.js

@@ -0,0 +1,163 @@
+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 { getMdiIconPath, mdiShapePlus } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import Box from "@mui/material/Box";
+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 ID = 'icon';
+/**
+ * Icon element (AGL-146): renders a picked mdi icon with size/color
+ * controls; an empty pick shows a labeled placeholder so the element stays
+ * selectable in the editor.
+ *
+ * Path resolution order (AGL-1212): the persisted `iconPath` first, then the
+ * in-memory catalog for documents authored before paths were stored. The
+ * catalog is ~2.9 MB and is only loaded by picker surfaces, so on the tenant
+ * site and in preview the second lookup misses — which is why it must NOT go
+ * through `getMdiIconFromId`, whose `DEFAULT_ICON` fallback carries a real
+ * path and rendered a "help" glyph on every published page.
+ */ const Icon = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { iconId, iconPath, size, color } = props, rest = _object_without_properties_loose(props, [
+        "iconId",
+        "iconPath",
+        "size",
+        "color"
+    ]);
+    // 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 path = iconPath || getMdiIconPath(iconId);
+    const icon = path ? {
+        path
+    } : undefined;
+    if (!(icon == null ? void 0 : icon.path)) {
+        // The labeled box is for the author, so only editing surfaces draw it; a
+        // published page renders the bare element, as the span a picked icon is.
+        if (!suppressNavigation) return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref,
+            component: "span"
+        }, rest));
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    width: 48,
+                    height: 48,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    color: 'text.secondary',
+                    fontSize: 10,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Icon'
+        }));
+    }
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref,
+        component: "span",
+        sx: {
+            display: 'inline-flex'
+        }
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(MdiIcon, {
+            path: icon.path,
+            sx: _extends({
+                fontSize: size && size > 0 ? size : 24
+            }, color ? {
+                color
+            } : {})
+        })
+    }));
+});
+Icon.displayName = 'Icon';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Icon',
+    description: 'A single icon from the library, at the size and color you pick.',
+    category: Aglyn.ComponentCategory.MEDIA,
+    icon: {
+        path: mdiShapePlus.path,
+        sx: {
+            color: '#7b1fa2'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'iconId',
+            description: 'Pick any icon from the library.',
+            component: Aglyn.FieldComponentType.ICON_PICKER,
+            label: 'Icon'
+        },
+        {
+            name: 'size',
+            description: 'Icon size in pixels (default 24).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Size (px)',
+            type: 'number'
+        },
+        {
+            name: 'color',
+            description: 'CSS color, e.g. #7b1fa2; empty inherits the text color.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Color'
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Icon',
+        pluginId: BUNDLE_ID,
+        description: 'A single icon from the mdi library',
+        category: Aglyn.ComponentCategory.MEDIA,
+        icon: {
+            path: mdiShapePlus.path,
+            sx: {
+                color: '#7b1fa2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+export default Icon;
+
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/icon.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 { getMdiIconPath, mdiShapePlus } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { forwardRef, useContext } 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 = 'icon'\n\nexport interface IconProps {\n  /** mdi icon id from the picker (AGL-146). */\n  iconId?: string\n  /**\n   * Resolved SVG path for `iconId`, denormalized at author time (AGL-1212).\n   * Render surfaces read this and never load the icon catalog.\n   */\n  iconPath?: string\n  /** Icon size in px; defaults to 24. */\n  size?: number\n  /** CSS color; defaults to the inherited text color. */\n  color?: 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-1284).\n   */\n  sx?: SxProps\n}\n\n/**\n * Icon element (AGL-146): renders a picked mdi icon with size/color\n * controls; an empty pick shows a labeled placeholder so the element stays\n * selectable in the editor.\n *\n * Path resolution order (AGL-1212): the persisted `iconPath` first, then the\n * in-memory catalog for documents authored before paths were stored. The\n * catalog is ~2.9 MB and is only loaded by picker surfaces, so on the tenant\n * site and in preview the second lookup misses — which is why it must NOT go\n * through `getMdiIconFromId`, whose `DEFAULT_ICON` fallback carries a real\n * path and rendered a \"help\" glyph on every published page.\n */\nconst Icon = forwardRef<HTMLElement, IconProps>((props, ref) => {\n  const { iconId, iconPath, size, color, ...rest } = props\n  // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n  const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [props['sx']]\n  const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext)\n  const path = iconPath || getMdiIconPath(iconId)\n  const icon = path ? { path } : undefined\n  if (!icon?.path) {\n    // The labeled box is for the author, so only editing surfaces draw it; a\n    // published page renders the bare element, as the span a picked icon is.\n    if (!suppressNavigation) return <Box ref={ref} component=\"span\" {...rest} />\n    return (\n      <Box\n        ref={ref}\n        {...rest}\n        sx={[\n          {\n            width: 48,\n            height: 48,\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            border: '1px dashed',\n            borderColor: 'divider',\n            borderRadius: 1,\n            color: 'text.secondary',\n            fontSize: 10,\n            fontFamily: 'system-ui, sans-serif',\n          },\n          ...nodeSx,\n        ]}\n      >\n        {'Icon'}\n      </Box>\n    )\n  }\n  return (\n    <Box ref={ref} component=\"span\" sx={{ display: 'inline-flex' }} {...rest}>\n      <MdiIcon\n        path={icon.path}\n        sx={{\n          fontSize: size && size > 0 ? size : 24,\n          ...(color ? { color } : {}),\n        }}\n      />\n    </Box>\n  )\n})\nIcon.displayName = 'Icon'\n\nexport const schema: Aglyn.ComponentSchema<IconProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Icon',\n  description:\n    'A single icon from the library, at the size and color you pick.',\n  category: Aglyn.ComponentCategory.MEDIA,\n  icon: {\n    path: mdiShapePlus.path,\n    sx: { color: '#7b1fa2' },\n  },\n  flags: {\n    selfClosing: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  attributes: [\n    {\n      name: 'iconId',\n      description: 'Pick any icon from the library.',\n      component: Aglyn.FieldComponentType.ICON_PICKER,\n      label: 'Icon',\n    },\n    {\n      name: 'size',\n      description: 'Icon size in pixels (default 24).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Size (px)',\n      type: 'number',\n    },\n    {\n      name: 'color',\n      description: 'CSS color, e.g. #7b1fa2; empty inherits the text color.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Color',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Icon',\n    pluginId: BUNDLE_ID,\n    description: 'A single icon from the mdi library',\n    category: Aglyn.ComponentCategory.MEDIA,\n    icon: {\n      path: mdiShapePlus.path,\n      sx: { color: '#7b1fa2' },\n    },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {},\n    },\n  },\n]\n\nexport default Icon\n"],"names":["Aglyn","getMdiIconPath","mdiShapePlus","MdiIcon","Box","forwardRef","useContext","BUNDLE_ID","generatePresetId","ID","Icon","props","ref","iconId","iconPath","size","color","rest","nodeSx","Array","isArray","suppressNavigation","ScreenLinkContext","path","icon","undefined","component","sx","width","height","display","alignItems","justifyContent","border","borderColor","borderRadius","fontSize","fontFamily","displayName","schema","$id","pluginId","description","category","ComponentCategory","MEDIA","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","FieldComponentType","ICON_PICKER","label","TEXT_FIELD","type","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/image-list.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @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 ReactNode } from 'react';
+export declare const IMAGE_LIST_ID: Aglyn.ComponentId;
+export declare const IMAGE_LIST_ITEM_ID: Aglyn.ComponentId;
+export type ImageListVariant = 'standard' | 'quilted' | 'masonry' | 'woven';
+export interface ImageListElementProps {
+    cols?: number | string;
+    gap?: number | string;
+    /** Row height in px, or blank for `auto`. */
+    rowHeight?: number | string;
+    variant?: ImageListVariant;
+    children?: ReactNode;
+}
+export interface ImageListItemElementProps {
+    /** Columns this tile spans (quilted lists). */
+    cols?: number | string;
+    /** Rows this tile spans (quilted lists). */
+    rows?: number | string;
+    /** Caption bar text; the bar is omitted entirely when both are blank. */
+    title?: string;
+    subtitle?: string;
+    barPosition?: 'below' | 'top' | 'bottom';
+    children?: ReactNode;
+}
+/** Number fields round-trip as strings; MUI's grid math needs numbers. */
+export declare function toCount(value: unknown, fallback?: number): number | undefined;
+/**
+ * Image list (https://mui.com/material-ui/react-image-list/): a masonry
+ * or quilted grid of images, denser than a Grid of cards.
+ */
+declare const ImageListElement: import("react").ForwardRefExoticComponent<ImageListElementProps & import("react").RefAttributes<HTMLUListElement>>;
+/**
+ * One tile. The image itself is an ordinary Image element dropped
+ * inside, so tiles keep the media-CDN srcSet, lazy loading and
+ * empty-source placeholder (AGL-74/175) rather than a second, worse
+ * image implementation living here.
+ */
+export declare const ImageListItemElement: import("react").ForwardRefExoticComponent<ImageListItemElementProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare const imageListSchema: Aglyn.ComponentSchema<ImageListElementProps>;
+export declare const imageListItemSchema: Aglyn.ComponentSchema<ImageListItemElementProps>;
+export declare const imageListPresets: Aglyn.PresetSchema[];
+export default ImageListElement;