@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/data-table.js

@@ -0,0 +1,216 @@
+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 { normalizeEmphasisColumn, parseDataTableRows, readDataTableAlignments } from "@aglyn/shared-data-enums";
+import { mdiTable } from "@aglyn/shared-data-mdi";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { scrollRegionProps, scrollableTableSx } from "@aglyn/shared-ui-jsx/utils/scroll-overflow";
+import Box from "@mui/material/Box";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+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 DATA_TABLE_ID = 'dataTable';
+/** What a screen reader announces on reaching the grid's scroll box. */ const TABLE_REGION_LABEL = 'Table';
+/**
+ * A comparison table (AGL-2543).
+ *
+ * The feature matrix is the load-bearing block on a competitor comparison
+ * page, and the palette had no way to build one: searching `table` returned
+ * **Table of Contents** and **Pricing Table**, neither of which is a general
+ * grid. The only route was to author markdown pipe syntax inside a Markdown
+ * element — which renders correctly and is exactly the audience the besigner
+ * exists to spare.
+ *
+ * Three things the Markdown route could not give, and the reason this is an
+ * element rather than a docs note:
+ *
+ *  - **Header emphasis**, without asking an author to remember that the first
+ *    row is special.
+ *  - **A highlighted column** — the "ours" column on a comparison page is the
+ *    entire point of the block, and markdown has no way to say it.
+ *  - **A grid to edit**, rather than pipe syntax in a text box — see the
+ *    `DATA_TABLE` field this element's `rows` attribute asks for.
+ *
+ * Narrow-screen behaviour is NOT one of them (AGL-2568). Both routes draw the
+ * same block, so both take the same treatment from `scroll-overflow`: the
+ * grid scrolls inside its own box once it is too wide to read, and says so.
+ */ const DataTable = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref;
+    var _grid_;
+    const { rows, headerRow = true, emphasizeColumn } = props, rest = _object_without_properties_loose(props, [
+        "rows",
+        "headerRow",
+        "emphasizeColumn"
+    ]);
+    // 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 grid = parseDataTableRows(rows);
+    const width = (_ref = (_grid_ = grid[0]) == null ? void 0 : _grid_.length) != null ? _ref : 0;
+    const alignments = readDataTableAlignments(rows, width);
+    const emphasis = normalizeEmphasisColumn(emphasizeColumn, width);
+    if (grid.length === 0) {
+        // The hint is for the author, so only editing surfaces draw it; a
+        // published page renders the bare element.
+        if (!suppressNavigation) return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest));
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    padding: 2,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    color: 'text.secondary',
+                    fontSize: 12,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Table — add rows in Attributes'
+        }));
+    }
+    const [first, ...body] = grid;
+    const dataRows = headerRow ? body : grid;
+    // An emphasised column reads as emphasised in BOTH halves of the table: a
+    // header cell that is bold anyway would otherwise show no highlight at all,
+    // which is the one row an author looks at first.
+    const cellSx = (columnIndex)=>emphasis === columnIndex + 1 ? {
+            backgroundColor: 'action.hover',
+            fontWeight: 600
+        } : undefined;
+    return /*#__PURE__*/ _jsxs(ScrollTable, {
+        ref: ref,
+        size: "small",
+        // The box scrolls the grid, and the grid is sized so that it can
+        // (AGL-2568). The box's `overflow-x` is half of it: it does nothing at
+        // all while the table inside is `width: 100%`, because a table of prose
+        // cells that cannot exceed its box never overflows it — it crushes its
+        // columns instead. `max-content` is the other half, and the box's fade
+        // is what makes an overlay-scrollbar platform admit that it scrolled.
+        sx: scrollableTableSx,
+        ContainerProps: _extends({}, rest, scrollRegionProps(TABLE_REGION_LABEL), {
+            // The node's styles merge after the box's own, never instead of them.
+            sx: nodeSx
+        }),
+        children: [
+            headerRow ? /*#__PURE__*/ _jsx(TableHead, {
+                children: /*#__PURE__*/ _jsx(TableRow, {
+                    children: first.map((cell, columnIndex)=>/*#__PURE__*/ _jsx(TableCell, {
+                            align: alignments[columnIndex],
+                            sx: _extends({
+                                fontWeight: 700
+                            }, cellSx(columnIndex)),
+                            children: cell
+                        }, columnIndex))
+                })
+            }) : null,
+            /*#__PURE__*/ _jsx(TableBody, {
+                children: dataRows.map((row, rowIndex)=>/*#__PURE__*/ _jsx(TableRow, {
+                        children: row.map((cell, columnIndex)=>/*#__PURE__*/ _jsx(TableCell, {
+                                align: alignments[columnIndex],
+                                sx: cellSx(columnIndex),
+                                children: cell
+                            }, columnIndex))
+                    }, rowIndex))
+            })
+        ]
+    });
+});
+DataTable.displayName = 'AglynDataTable';
+export default DataTable;
+export const dataTableSchema = {
+    $id: DATA_TABLE_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Table',
+    description: 'A grid of rows and columns — a feature matrix, a spec sheet, a comparison.',
+    category: Aglyn.ComponentCategory.BLOCKS,
+    icon: {
+        path: mdiTable.path,
+        sx: {
+            color: '#0288d1'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'rows',
+            description: 'The table contents. Paste a markdown table to import one you already have.',
+            component: Aglyn.FieldComponentType.DATA_TABLE,
+            label: 'Rows'
+        },
+        {
+            name: 'headerRow',
+            description: 'Render the first row as a header.',
+            component: Aglyn.FieldComponentType.CHECKBOX,
+            label: 'First row is a header'
+        },
+        {
+            name: 'emphasizeColumn',
+            description: 'Highlight one column — on a comparison table, usually your own. 0 for none.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Emphasize column'
+        }
+    ]
+};
+export const dataTablePresets = [
+    {
+        $id: generatePresetId(DATA_TABLE_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Table',
+        pluginId: BUNDLE_ID,
+        description: 'Comparison grid with a header row',
+        category: Aglyn.ComponentCategory.BLOCKS,
+        icon: {
+            path: mdiTable.path,
+            sx: {
+                color: '#0288d1'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: DATA_TABLE_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                headerRow: true,
+                emphasizeColumn: 2,
+                rows: [
+                    'Feature | Us | Them',
+                    '--- | :---: | :---:',
+                    'Open source | Yes | No',
+                    'Self-hostable | Yes | No',
+                    'One platform | Yes | No'
+                ].join('\n')
+            }
+        }
+    }
+];
+
+//# sourceMappingURL=data-table.js.map

package/src/lib/components/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/data-table.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 {\n  normalizeEmphasisColumn,\n  parseDataTableRows,\n  readDataTableAlignments,\n} from '@aglyn/shared-data-enums'\nimport { mdiTable } from '@aglyn/shared-data-mdi'\nimport { ScrollTable } from '@aglyn/shared-ui-jsx/components/scroll-table.component'\nimport {\n  scrollRegionProps,\n  scrollableTableSx,\n} from '@aglyn/shared-ui-jsx/utils/scroll-overflow'\nimport Box from '@mui/material/Box'\nimport TableBody from '@mui/material/TableBody'\nimport TableCell from '@mui/material/TableCell'\nimport TableHead from '@mui/material/TableHead'\nimport TableRow from '@mui/material/TableRow'\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 DATA_TABLE_ID: Aglyn.ComponentId = 'dataTable'\n\n/** What a screen reader announces on reaching the grid's scroll box. */\nconst TABLE_REGION_LABEL = 'Table'\n\nexport interface DataTableProps {\n  /**\n   * The grid, pipe-delimited, one row per line — and its column alignment,\n   * as a markdown divider row. See `@aglyn/shared-data-enums`'s `data-table` utilities.\n   */\n  rows?: string\n  /** Render the first row as a header. */\n  headerRow?: boolean\n  /** 1-based column to emphasise, or 0/absent for none. */\n  emphasizeColumn?: number | string\n}\n\n/**\n * A comparison table (AGL-2543).\n *\n * The feature matrix is the load-bearing block on a competitor comparison\n * page, and the palette had no way to build one: searching `table` returned\n * **Table of Contents** and **Pricing Table**, neither of which is a general\n * grid. The only route was to author markdown pipe syntax inside a Markdown\n * element — which renders correctly and is exactly the audience the besigner\n * exists to spare.\n *\n * Three things the Markdown route could not give, and the reason this is an\n * element rather than a docs note:\n *\n *  - **Header emphasis**, without asking an author to remember that the first\n *    row is special.\n *  - **A highlighted column** — the \"ours\" column on a comparison page is the\n *    entire point of the block, and markdown has no way to say it.\n *  - **A grid to edit**, rather than pipe syntax in a text box — see the\n *    `DATA_TABLE` field this element's `rows` attribute asks for.\n *\n * Narrow-screen behaviour is NOT one of them (AGL-2568). Both routes draw the\n * same block, so both take the same treatment from `scroll-overflow`: the\n * grid scrolls inside its own box once it is too wide to read, and says so.\n */\nconst DataTable = forwardRef<HTMLDivElement, DataTableProps>((props, ref) => {\n  const { rows, headerRow = true, emphasizeColumn, ...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 grid = parseDataTableRows(rows)\n  const width = grid[0]?.length ?? 0\n  const alignments = readDataTableAlignments(rows, width)\n  const emphasis = normalizeEmphasisColumn(emphasizeColumn, width)\n\n  if (grid.length === 0) {\n    // The hint is for the author, so only editing surfaces draw it; a\n    // published page renders the bare element.\n    if (!suppressNavigation) return <Box ref={ref} {...rest} />\n    return (\n      <Box\n        ref={ref}\n        {...rest}\n        sx={[\n          {\n            padding: 2,\n            border: '1px dashed',\n            borderColor: 'divider',\n            color: 'text.secondary',\n            fontSize: 12,\n            fontFamily: 'system-ui, sans-serif',\n          },\n          ...nodeSx,\n        ]}\n      >\n        {'Table — add rows in Attributes'}\n      </Box>\n    )\n  }\n\n  const [first, ...body] = grid\n  const dataRows = headerRow ? body : grid\n  // An emphasised column reads as emphasised in BOTH halves of the table: a\n  // header cell that is bold anyway would otherwise show no highlight at all,\n  // which is the one row an author looks at first.\n  const cellSx = (columnIndex: number) =>\n    emphasis === columnIndex + 1\n      ? { backgroundColor: 'action.hover', fontWeight: 600 }\n      : undefined\n\n  return (\n    <ScrollTable\n      ref={ref}\n      size=\"small\"\n      // The box scrolls the grid, and the grid is sized so that it can\n      // (AGL-2568). The box's `overflow-x` is half of it: it does nothing at\n      // all while the table inside is `width: 100%`, because a table of prose\n      // cells that cannot exceed its box never overflows it — it crushes its\n      // columns instead. `max-content` is the other half, and the box's fade\n      // is what makes an overlay-scrollbar platform admit that it scrolled.\n      sx={scrollableTableSx}\n      ContainerProps={{\n        ...rest,\n        ...scrollRegionProps(TABLE_REGION_LABEL),\n        // The node's styles merge after the box's own, never instead of them.\n        sx: nodeSx,\n      }}\n    >\n      {headerRow ? (\n        <TableHead>\n          <TableRow>\n            {first.map((cell, columnIndex) => (\n              <TableCell\n                key={columnIndex}\n                align={alignments[columnIndex]}\n                sx={{ fontWeight: 700, ...cellSx(columnIndex) }}\n              >\n                {cell}\n              </TableCell>\n            ))}\n          </TableRow>\n        </TableHead>\n      ) : null}\n      <TableBody>\n        {dataRows.map((row, rowIndex) => (\n          <TableRow key={rowIndex}>\n            {row.map((cell, columnIndex) => (\n              <TableCell\n                key={columnIndex}\n                align={alignments[columnIndex]}\n                sx={cellSx(columnIndex)}\n              >\n                {cell}\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </ScrollTable>\n  )\n})\nDataTable.displayName = 'AglynDataTable'\n\nexport default DataTable\n\nexport const dataTableSchema: Aglyn.ComponentSchema<DataTableProps> = {\n  $id: DATA_TABLE_ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Table',\n  description:\n    'A grid of rows and columns — a feature matrix, a spec sheet, a comparison.',\n  category: Aglyn.ComponentCategory.BLOCKS,\n  icon: { path: mdiTable.path, sx: { color: '#0288d1' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'rows',\n      description:\n        'The table contents. Paste a markdown table to import one you already have.',\n      component: Aglyn.FieldComponentType.DATA_TABLE,\n      label: 'Rows',\n    },\n    {\n      name: 'headerRow',\n      description: 'Render the first row as a header.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n      label: 'First row is a header',\n    },\n    {\n      name: 'emphasizeColumn',\n      description:\n        'Highlight one column — on a comparison table, usually your own. 0 for none.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Emphasize column',\n    },\n  ],\n}\n\nexport const dataTablePresets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(DATA_TABLE_ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Table',\n    pluginId: BUNDLE_ID,\n    description: 'Comparison grid with a header row',\n    category: Aglyn.ComponentCategory.BLOCKS,\n    icon: { path: mdiTable.path, sx: { color: '#0288d1' } },\n    data: {\n      $id: null,\n      componentId: DATA_TABLE_ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        headerRow: true,\n        emphasizeColumn: 2,\n        rows: [\n          'Feature | Us | Them',\n          '--- | :---: | :---:',\n          'Open source | Yes | No',\n          'Self-hostable | Yes | No',\n          'One platform | Yes | No',\n        ].join('\\n'),\n      },\n    },\n  },\n]\n"],"names":["Aglyn","normalizeEmphasisColumn","parseDataTableRows","readDataTableAlignments","mdiTable","ScrollTable","scrollRegionProps","scrollableTableSx","Box","TableBody","TableCell","TableHead","TableRow","forwardRef","useContext","BUNDLE_ID","generatePresetId","DATA_TABLE_ID","TABLE_REGION_LABEL","DataTable","props","ref","grid","rows","headerRow","emphasizeColumn","rest","nodeSx","Array","isArray","suppressNavigation","ScreenLinkContext","width","length","alignments","emphasis","sx","padding","border","borderColor","color","fontSize","fontFamily","first","body","dataRows","cellSx","columnIndex","backgroundColor","fontWeight","undefined","size","ContainerProps","map","cell","align","row","rowIndex","displayName","dataTableSchema","$id","pluginId","description","category","ComponentCategory","BLOCKS","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","component","FieldComponentType","DATA_TABLE","label","CHECKBOX","TEXT_FIELD","dataTablePresets","type","NodeType","PRESET","data","componentId","join"],"mappings":"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"}

package/src/lib/components/document-root.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @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';
+/**
+ * The canvas ROOT's component id — the `Document` layer at the top of every
+ * hierarchy (`NODE_ROOT_ID`). Persisted in screen and layout documents since
+ * the first seed; never rename.
+ *
+ * Until now nothing was registered under it, so the renderer fell through to
+ * its unstyled `styled('div')` fallback and the besigner's attributes panel
+ * had no schema to draw: the Document layer could be styled and could not be
+ * given an element. Registering the id changes no stored document — the same
+ * `div` renders — and gives the root the one attribute it has always needed.
+ */
+export declare const ID: Aglyn.ComponentId;
+/**
+ * Elements the document root may render as (AGL-2486, widened by AGL-2514).
+ *
+ * `main` is offered here and on the Layout Slot, and nowhere else: those two
+ * are the only nodes that can BE the page's content region, and
+ * `stampDocumentLandmark` guarantees exactly one of them carries it.
+ *
+ * The rest of the list is the sectioning set `SECTION_ELEMENTS` offers, for
+ * the same reason it offers them: the root is an element like any other, and
+ * a document whose whole body is one region — a layout that is nothing but
+ * chrome, a fragment composed into a larger page — had no way to say so. It
+ * stayed `div` and the region went unnamed. A root that is `header` or
+ * `footer` is a document with no `main`, which `stampDocumentLandmark`
+ * already treats as the author's choice rather than a state to repair: it
+ * hands the landmark to the slot when there is one, and otherwise ships the
+ * page without.
+ *
+ * An allow-list rather than free text: the value is persisted and rendered
+ * verbatim, so a typed one would put `script` into every visitor's page.
+ */
+export declare const DOCUMENT_ROOT_ELEMENTS: readonly ["div", "main", "header", "footer", "nav", "aside", "section", "article"];
+export type DocumentRootElement = (typeof DOCUMENT_ROOT_ELEMENTS)[number];
+export interface DocumentRootProps {
+    /**
+     * The DOM element rendered; defaults to `div`. On a screen with no shared
+     * layout, composition fills in `main` — with no slot to carry it, the root
+     * IS the page's content region.
+     *
+     * Named `component` like Box's and Typography's, not `element` like
+     * Section's: the attribute means the same thing everywhere it appears, and
+     * two names for it is one the author has to learn twice.
+     */
+    component?: DocumentRootElement | string;
+    children?: ReactNode;
+}
+/**
+ * The document root: the outermost node of a screen or layout tree.
+ *
+ * A plain container, as it has always been. It exists as a registered
+ * component so the root can answer the two questions every other node can —
+ * what element am I, and what does the attributes panel show — rather than
+ * being the one node in the tree with no schema.
+ */
+declare const DocumentRoot: import("react").ForwardRefExoticComponent<DocumentRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<DocumentRootProps>;
+export { DocumentRoot };
+export default DocumentRoot;

package/src/lib/components/document-root.js

@@ -0,0 +1,118 @@
+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 { mdiFileDocumentOutline } from "@aglyn/shared-data-mdi";
+import MuiBox from "@mui/material/Box";
+import { forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+/**
+ * The canvas ROOT's component id — the `Document` layer at the top of every
+ * hierarchy (`NODE_ROOT_ID`). Persisted in screen and layout documents since
+ * the first seed; never rename.
+ *
+ * Until now nothing was registered under it, so the renderer fell through to
+ * its unstyled `styled('div')` fallback and the besigner's attributes panel
+ * had no schema to draw: the Document layer could be styled and could not be
+ * given an element. Registering the id changes no stored document — the same
+ * `div` renders — and gives the root the one attribute it has always needed.
+ */ export const ID = 'div';
+/**
+ * Elements the document root may render as (AGL-2486, widened by AGL-2514).
+ *
+ * `main` is offered here and on the Layout Slot, and nowhere else: those two
+ * are the only nodes that can BE the page's content region, and
+ * `stampDocumentLandmark` guarantees exactly one of them carries it.
+ *
+ * The rest of the list is the sectioning set `SECTION_ELEMENTS` offers, for
+ * the same reason it offers them: the root is an element like any other, and
+ * a document whose whole body is one region — a layout that is nothing but
+ * chrome, a fragment composed into a larger page — had no way to say so. It
+ * stayed `div` and the region went unnamed. A root that is `header` or
+ * `footer` is a document with no `main`, which `stampDocumentLandmark`
+ * already treats as the author's choice rather than a state to repair: it
+ * hands the landmark to the slot when there is one, and otherwise ships the
+ * page without.
+ *
+ * An allow-list rather than free text: the value is persisted and rendered
+ * verbatim, so a typed one would put `script` into every visitor's page.
+ */ export const DOCUMENT_ROOT_ELEMENTS = [
+    'div',
+    'main',
+    'header',
+    'footer',
+    'nav',
+    'aside',
+    'section',
+    'article'
+];
+/**
+ * The document root: the outermost node of a screen or layout tree.
+ *
+ * A plain container, as it has always been. It exists as a registered
+ * component so the root can answer the two questions every other node can —
+ * what element am I, and what does the attributes panel show — rather than
+ * being the one node in the tree with no schema.
+ */ const DocumentRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { component, children } = props, rest = _object_without_properties_loose(props, [
+        "component",
+        "children"
+    ]);
+    // Unknown values degrade to `div` rather than reaching the DOM as an
+    // invented tag — the resolver pattern `Section` uses.
+    const element = DOCUMENT_ROOT_ELEMENTS.includes(String(component != null ? component : '')) ? component : 'div';
+    return /*#__PURE__*/ _jsx(MuiBox, _extends({
+        ref: ref,
+        component: element
+    }, rest, {
+        children: children
+    }));
+});
+DocumentRoot.displayName = 'AglynDocumentRoot';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: Aglyn.NODE_ROOT_LABEL,
+    description: 'The page itself — the outermost element every other element sits in.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiFileDocumentOutline.path,
+        sx: {
+            color: 'text.secondary'
+        }
+    },
+    attributes: [
+        {
+            name: 'component',
+            label: 'Component',
+            description: 'The DOM element the page renders as. On a screen framed by a ' + 'shared layout the layout’s slot carries "main" instead, so this ' + 'stays a plain container unless you say otherwise. Choosing a ' + 'landmark other than "main" leaves the page without one.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: DOCUMENT_ROOT_ELEMENTS.map((value)=>({
+                    value,
+                    label: value
+                }))
+        }
+    ]
+};
+// No preset, deliberately: the root is not an element anybody drops. The
+// element drawer lists presets, so registering the schema alone keeps it out
+// of the palette while giving the node its attributes panel.
+export { DocumentRoot };
+export default DocumentRoot;
+
+//# sourceMappingURL=document-root.js.map

package/src/lib/components/document-root.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/document-root.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 { mdiFileDocumentOutline } from '@aglyn/shared-data-mdi'\nimport MuiBox from '@mui/material/Box'\nimport { forwardRef, type ReactNode } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\n\n/**\n * The canvas ROOT's component id — the `Document` layer at the top of every\n * hierarchy (`NODE_ROOT_ID`). Persisted in screen and layout documents since\n * the first seed; never rename.\n *\n * Until now nothing was registered under it, so the renderer fell through to\n * its unstyled `styled('div')` fallback and the besigner's attributes panel\n * had no schema to draw: the Document layer could be styled and could not be\n * given an element. Registering the id changes no stored document — the same\n * `div` renders — and gives the root the one attribute it has always needed.\n */\nexport const ID: Aglyn.ComponentId = 'div'\n\n/**\n * Elements the document root may render as (AGL-2486, widened by AGL-2514).\n *\n * `main` is offered here and on the Layout Slot, and nowhere else: those two\n * are the only nodes that can BE the page's content region, and\n * `stampDocumentLandmark` guarantees exactly one of them carries it.\n *\n * The rest of the list is the sectioning set `SECTION_ELEMENTS` offers, for\n * the same reason it offers them: the root is an element like any other, and\n * a document whose whole body is one region — a layout that is nothing but\n * chrome, a fragment composed into a larger page — had no way to say so. It\n * stayed `div` and the region went unnamed. A root that is `header` or\n * `footer` is a document with no `main`, which `stampDocumentLandmark`\n * already treats as the author's choice rather than a state to repair: it\n * hands the landmark to the slot when there is one, and otherwise ships the\n * page without.\n *\n * An allow-list rather than free text: the value is persisted and rendered\n * verbatim, so a typed one would put `script` into every visitor's page.\n */\nexport const DOCUMENT_ROOT_ELEMENTS = [\n  'div',\n  'main',\n  'header',\n  'footer',\n  'nav',\n  'aside',\n  'section',\n  'article',\n] as const\nexport type DocumentRootElement = (typeof DOCUMENT_ROOT_ELEMENTS)[number]\n\nexport interface DocumentRootProps {\n  /**\n   * The DOM element rendered; defaults to `div`. On a screen with no shared\n   * layout, composition fills in `main` — with no slot to carry it, the root\n   * IS the page's content region.\n   *\n   * Named `component` like Box's and Typography's, not `element` like\n   * Section's: the attribute means the same thing everywhere it appears, and\n   * two names for it is one the author has to learn twice.\n   */\n  component?: DocumentRootElement | string\n  children?: ReactNode\n}\n\n/**\n * The document root: the outermost node of a screen or layout tree.\n *\n * A plain container, as it has always been. It exists as a registered\n * component so the root can answer the two questions every other node can —\n * what element am I, and what does the attributes panel show — rather than\n * being the one node in the tree with no schema.\n */\nconst DocumentRoot = forwardRef<HTMLDivElement, DocumentRootProps>(\n  (props, ref) => {\n    const { component, children, ...rest } = props\n    // Unknown values degrade to `div` rather than reaching the DOM as an\n    // invented tag — the resolver pattern `Section` uses.\n    const element = (DOCUMENT_ROOT_ELEMENTS as readonly string[]).includes(\n      String(component ?? ''),\n    )\n      ? (component as DocumentRootElement)\n      : 'div'\n    return (\n      <MuiBox ref={ref} component={element} {...rest}>\n        {children}\n      </MuiBox>\n    )\n  },\n)\nDocumentRoot.displayName = 'AglynDocumentRoot'\n\nexport const schema: Aglyn.ComponentSchema<DocumentRootProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: Aglyn.NODE_ROOT_LABEL,\n  description:\n    'The page itself — the outermost element every other element sits in.',\n  category: Aglyn.ComponentCategory.LAYOUT,\n  icon: { path: mdiFileDocumentOutline.path, sx: { color: 'text.secondary' } },\n  attributes: [\n    {\n      name: 'component',\n      label: 'Component',\n      description:\n        'The DOM element the page renders as. On a screen framed by a ' +\n        'shared layout the layout’s slot carries \"main\" instead, so this ' +\n        'stays a plain container unless you say otherwise. Choosing a ' +\n        'landmark other than \"main\" leaves the page without one.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: DOCUMENT_ROOT_ELEMENTS.map((value) => ({\n        value,\n        label: value,\n      })),\n    },\n  ],\n}\n\n// No preset, deliberately: the root is not an element anybody drops. The\n// element drawer lists presets, so registering the schema alone keeps it out\n// of the palette while giving the node its attributes panel.\n\nexport { DocumentRoot }\nexport default DocumentRoot\n"],"names":["Aglyn","mdiFileDocumentOutline","MuiBox","forwardRef","BUNDLE_ID","ID","DOCUMENT_ROOT_ELEMENTS","DocumentRoot","props","ref","component","children","rest","element","includes","String","displayName","schema","$id","pluginId","NODE_ROOT_LABEL","description","category","ComponentCategory","LAYOUT","icon","path","sx","color","attributes","name","label","FieldComponentType","SELECT","options","map","value"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SAASC,sBAAsB,QAAQ,yBAAwB;AAC/D,OAAOC,YAAY,oBAAmB;AACtC,SAASC,UAAU,QAAwB,QAAO;AAClD,SAASC,SAAS,QAAQ,gCAA4B;AAEtD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,KAAwB,MAAK;AAE1C;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,yBAAyB;IACpC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAS;AAiBV;;;;;;;CAOC,GACD,MAAMC,6BAAeJ,WACnB,CAACK,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAW,GAAGH,OAATI,wCAASJ;;;;IACzC,qEAAqE;IACrE,sDAAsD;IACtD,MAAMK,UAAU,AAACP,uBAA6CQ,QAAQ,CACpEC,OAAOL,oBAAAA,YAAa,OAEjBA,YACD;IACJ,qBACE,KAACR;QAAOO,KAAKA;QAAKC,WAAWG;OAAaD;kBACvCD;;AAGP;AAEFJ,aAAaS,WAAW,GAAG;AAE3B,OAAO,MAAMC,SAAmD;IAC9DC,KAAKb;IACLc,UAAUf;IACVY,aAAahB,MAAMoB,eAAe;IAClCC,aACE;IACFC,UAAUtB,MAAMuB,iBAAiB,CAACC,MAAM;IACxCC,MAAM;QAAEC,MAAMzB,uBAAuByB,IAAI;QAAEC,IAAI;YAAEC,OAAO;QAAiB;IAAE;IAC3EC,YAAY;QACV;YACEC,MAAM;YACNC,OAAO;YACPV,aACE,kEACA,qEACA,kEACA;YACFX,WAAWV,MAAMgC,kBAAkB,CAACC,MAAM;YAC1CC,SAAS5B,uBAAuB6B,GAAG,CAAC,CAACC,QAAW,CAAA;oBAC9CA;oBACAL,OAAOK;gBACT,CAAA;QACF;KACD;AACH,EAAC;AAED,yEAAyE;AACzE,6EAA6E;AAC7E,6DAA6D;AAE7D,SAAS7B,YAAY,GAAE;AACvB,eAAeA,aAAY"}

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

@@ -0,0 +1,93 @@
+/**
+ * @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';
+import { type ReactNode } from 'react';
+export declare const DRAWER_ID: Aglyn.ComponentId;
+export declare const DRAWER_TOGGLE_ID: Aglyn.ComponentId;
+export type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+/** All four edges MUI's Drawer supports. */
+export declare const DRAWER_ANCHORS: DrawerAnchor[];
+/** Horizontal anchors are the ones the `width` setting applies to. */
+export declare function isSideAnchor(anchor: unknown): boolean;
+export interface DrawerElementProps {
+    /** Which edge the drawer slides in from. */
+    anchor?: DrawerAnchor;
+    /** CSS width of the open panel (default 280px). Side anchors only. */
+    width?: string;
+    /**
+     * Authored node styles, handed over by the renderer rather than typed into
+     * an attribute — recomposed below so the panel's own sx is merged, not
+     * replaced (AGL-1323 declared it; the merge predates it).
+     */
+    sx?: SxProps;
+    children?: ReactNode;
+}
+export interface DrawerToggleProps {
+    /**
+     * Legacy pre-AGL-572 binding attribute. Persisted values are accepted
+     * and silently ignored (no migration): behavior config rides the
+     * interactions system (AGL-568), so explicit targeting is authored as
+     * *When clicked → Open/close a drawer* on the button instead.
+     */
+    targetNodeId?: string;
+    /** Accessible name for the icon button. */
+    ariaLabel?: string;
+}
+/**
+ * The node id encoded in the renderer's stable `data-aglyn="leaf:<id>"`
+ * attribute (the same selector contract the interactions system uses).
+ */
+export declare function parseLeafNodeId(dataAglyn: unknown): string | undefined;
+/**
+ * True while the besigner canvas flags this leaf's subtree as holding the
+ * current selection (AGL-571): the renderer stamps
+ * `data-aglyn-selected-within` on a leaf whenever the node itself or any
+ * descendant is selected, and drops it when selection leaves the subtree.
+ * Live surfaces never set it, so absence simply means "render collapsed" —
+ * the same neutral `data-aglyn*` leaf contract `parseLeafNodeId` reads.
+ */
+export declare function isLeafSelectedWithin(rest: Record<string, unknown>): boolean;
+/** Test seam: the current broadcast owner (first mounted drawer). */
+export declare function firstMountedDrawer(): string | undefined;
+/**
+ * Slide-in drawer (AGL-562): a canvas children slot that opens from the
+ * page edge — the mobile-menu building block. Opens/closes/toggles via
+ * the shared window event bus (`dispatchDrawerCommand`), reachable from
+ * the interactions system's drawer steps and the Menu Button element.
+ * SSR ships it closed; the canvas shows a slim collapsed placeholder that
+ * expands its contents inline only while the drawer or one of its
+ * descendants is selected (AGL-571) — full drawer designability is
+ * AGL-572.
+ */
+declare const DrawerElement: import("react").ForwardRefExoticComponent<DrawerElementProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Menu button (AGL-562, targeting moved to interactions in AGL-572): a
+ * hamburger icon button whose click broadcast-toggles the page's first
+ * drawer over the shared command bus — the zero-config default that
+ * makes the one-insert Mobile Nav preset work. Targeting a specific
+ * drawer is an interaction (*When clicked → Open/close a drawer*), the
+ * same openDrawer/closeDrawer/toggleDrawer steps any element can use;
+ * the legacy `targetNodeId` attribute is discarded here so persisted
+ * values neither retarget the click nor leak into the DOM. Inert on the
+ * static canvas so canvas clicks only select; live (incl. Preview) it toggles.
+ */
+export declare const DrawerToggle: import("react").ForwardRefExoticComponent<DrawerToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const drawerSchema: Aglyn.ComponentSchema<DrawerElementProps>;
+export declare const drawerToggleSchema: Aglyn.ComponentSchema<DrawerToggleProps>;
+export declare const drawerPresets: Aglyn.PresetSchema[];
+export default DrawerElement;