@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/language-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/language-switcher.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 { mdiTranslate } from '@aglyn/shared-data-mdi'\nimport { AppLink } from '@aglyn/shared-ui-jsx'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\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 = 'languageSwitcher'\n\nexport interface LanguageSwitcherProps {\n  /** 'text' shows locale codes; 'buttons' renders outlined buttons. */\n  variant?: 'text' | 'buttons'\n  /** Uppercase the locale codes (EN / ES). */\n  uppercase?: boolean\n}\n\n/**\n * Language switcher (AGL-164): renders one link per translation of the\n * CURRENT screen, resolved from ScreenLinkContext (`localeVariants` +\n * routing map), so it works inside shared layouts. Shows a placeholder in\n * the editor when the screen has no variants; renders nothing on the live\n * site in that case.\n */\nconst LanguageSwitcher = forwardRef<HTMLElement, LanguageSwitcherProps>(\n  (props, ref) => {\n    const { variant, uppercase, ...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 { screens, localeVariants, currentLocale, suppressNavigation } =\n      useContext(Aglyn.ScreenLinkContext)\n    const entries = Object.entries(localeVariants ?? {}).filter(\n      ([, screenId]) => screens?.[screenId] != null,\n    )\n    const format = (locale: string) =>\n      uppercase === false ? locale : locale.toUpperCase()\n\n    if (!entries.length) {\n      // Editor-only placeholder; invisible on the live site.\n      if (!suppressNavigation) return null\n      return (\n        <Stack\n          ref={ref as any}\n          direction=\"row\"\n          spacing={1}\n          {...rest}\n          sx={[\n            {\n              alignItems: 'center',\n              border: '1px dashed',\n              borderColor: 'divider',\n              borderRadius: 1,\n              px: 1.5,\n              py: 0.5,\n              color: 'text.secondary',\n              fontSize: 12,\n              fontFamily: 'system-ui, sans-serif',\n            },\n            ...nodeSx,\n          ]}\n        >\n          {'Language switcher — set screen translations'}\n        </Stack>\n      )\n    }\n\n    return (\n      <Stack\n        ref={ref as any}\n        direction=\"row\"\n        spacing={0.5}\n        {...rest}\n        sx={[{ alignItems: 'center' }, ...nodeSx]}\n      >\n        {currentLocale ? (\n          <Button size=\"small\" variant=\"text\" disabled>\n            {format(currentLocale)}\n          </Button>\n        ) : null}\n        {entries.map(([locale, screenId]) => {\n          const path = screens?.[screenId]\n          const href =\n            path != null ? Aglyn.screenRoutePathToUrl(path) : undefined\n          if (!href || suppressNavigation) {\n            return (\n              <Button key={locale} size=\"small\" variant=\"text\">\n                {format(locale)}\n              </Button>\n            )\n          }\n          return (\n            <AppLink\n              key={locale}\n              componentVariant=\"button\"\n              href={href}\n              size=\"small\"\n              variant={variant === 'buttons' ? 'outlined' : 'text'}\n            >\n              {format(locale)}\n            </AppLink>\n          )\n        })}\n      </Stack>\n    )\n  },\n)\nLanguageSwitcher.displayName = 'LanguageSwitcher'\n\nexport const schema: Aglyn.ComponentSchema<LanguageSwitcherProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Language Switcher',\n  description:\n    \"Links between this screen's translations. It hides itself when there are none.\",\n  category: Aglyn.ComponentCategory.NAVIGATION,\n  icon: {\n    path: mdiTranslate.path,\n    sx: { color: '#2196f3' },\n  },\n  flags: {\n    selfClosing: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  attributes: [\n    {\n      name: 'variant',\n      description: 'How the language links render.',\n      component: Aglyn.FieldComponentType.SELECT,\n      label: 'Style',\n      // `text` is half of the declared `'text' | 'buttons'` union and the\n      // value the render already falls back to; as `''` the option was\n      // unpersistable (AGL-1191) and outside its own prop type (AGL-1451).\n      options: [\n        { value: 'text', label: 'Text (default)' },\n        { value: 'buttons', label: 'Outlined buttons' },\n      ],\n    },\n    {\n      name: 'uppercase',\n      description: 'Show locale codes uppercased (EN, ES).',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n      label: 'Uppercase',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Language Switcher',\n    pluginId: BUNDLE_ID,\n    description: 'Links between this screen’s translations',\n    category: Aglyn.ComponentCategory.NAVIGATION,\n    icon: {\n      path: mdiTranslate.path,\n      sx: { color: '#2196f3' },\n    },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {},\n    },\n  },\n]\n\nexport default LanguageSwitcher\n"],"names":["Aglyn","mdiTranslate","AppLink","Button","Stack","forwardRef","useContext","BUNDLE_ID","generatePresetId","ID","LanguageSwitcher","props","ref","variant","uppercase","rest","nodeSx","Array","isArray","screens","localeVariants","currentLocale","suppressNavigation","ScreenLinkContext","entries","Object","filter","screenId","format","locale","toUpperCase","length","direction","spacing","sx","alignItems","border","borderColor","borderRadius","px","py","color","fontSize","fontFamily","size","disabled","map","path","href","screenRoutePathToUrl","undefined","componentVariant","displayName","schema","$id","pluginId","description","category","ComponentCategory","NAVIGATION","icon","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","component","FieldComponentType","SELECT","label","options","value","CHECKBOX","presets","type","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/layout-slot.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @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 BoxProps } from '@mui/material/Box';
+export declare const ID: Aglyn.ComponentId;
+/**
+ * Elements the slot may render as (AGL-2486).
+ *
+ * `main` is here, and is the DEFAULT composition assigns, because the slot is
+ * by construction the page content between the layout's chrome — which is the
+ * definition of the landmark. It is the one place on the platform that may
+ * choose it: `SECTION_ELEMENTS` and `ALLOWED_AUTHOR_HTML_ELEMENTS` both drop
+ * `main` so a document can never carry two, and `stampDocumentLandmark`
+ * decides which single node gets it.
+ */
+export declare const LAYOUT_SLOT_ELEMENTS: readonly ["main", "div", "section", "article"];
+export type LayoutSlotElement = (typeof LAYOUT_SLOT_ELEMENTS)[number];
+export interface LayoutSlotProps extends Omit<BoxProps, 'component'> {
+    /**
+     * The DOM element the slot renders as. Left unset, composition fills in
+     * `main` — see {@link LAYOUT_SLOT_ELEMENTS}. Unknown values degrade to
+     * `div` rather than reaching the DOM as an invented tag.
+     *
+     * Named `component` like Box's and Typography's, not `element` like
+     * Section's: the attribute means the same thing everywhere it appears.
+     * Narrower than the `ElementType` Box accepts — a canvas attribute is a
+     * persisted STRING, and an allow-list is what keeps `script` out of it —
+     * so `BoxProps`' own `component` is omitted rather than widened.
+     */
+    component?: LayoutSlotElement | string;
+    /**
+     * Editor-only caption under the slot marker. Layouts render different
+     * kinds of content — a doc body, a narrow article measure, a full page —
+     * and naming it is the difference between four identical dashed boxes and
+     * a layout you can read at a glance.
+     */
+    caption?: string;
+}
+/** Shown when a layout hasn't named its slot. */
+export declare const DEFAULT_SLOT_CAPTION = "Screen content renders here";
+/**
+ * Content outlet for shared layouts: marks where a bound screen's nodes are
+ * grafted into the layout tree at composition time. With children (composed
+ * or previewed) it is a plain passthrough region; empty, it renders a
+ * dashed placeholder so layout designers can see the slot on the canvas.
+ *
+ * The placeholder is editor chrome, so it is drawn on editing surfaces only.
+ * A published screen with no content of its own still composes an empty
+ * slot, and that renders as the plain region.
+ */
+declare const LayoutSlot: import("react").ForwardRefExoticComponent<Omit<LayoutSlotProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<LayoutSlotProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default LayoutSlot;

package/src/lib/components/layout-slot.js

@@ -0,0 +1,192 @@
+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 { mdiPageLayoutBody } from "@aglyn/shared-data-mdi";
+import Box from "@mui/material/Box";
+import { alpha } from "@mui/material/styles";
+import { Children, 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 layout documents; never rename.
+export const ID = 'layoutSlot';
+/**
+ * Elements the slot may render as (AGL-2486).
+ *
+ * `main` is here, and is the DEFAULT composition assigns, because the slot is
+ * by construction the page content between the layout's chrome — which is the
+ * definition of the landmark. It is the one place on the platform that may
+ * choose it: `SECTION_ELEMENTS` and `ALLOWED_AUTHOR_HTML_ELEMENTS` both drop
+ * `main` so a document can never carry two, and `stampDocumentLandmark`
+ * decides which single node gets it.
+ */ export const LAYOUT_SLOT_ELEMENTS = [
+    'main',
+    'div',
+    'section',
+    'article'
+];
+/**
+ * The slot marker is EDITOR CHROME, so it holds the brand accent literally
+ * rather than reading `secondary` from the theme: the canvas renders under
+ * the host's palette, so a token would repaint the editor's own furniture
+ * whenever a subscriber restyles their site — and it already rendered pink
+ * instead of the design's blue.
+ */ const SLOT_ACCENT = '#00B0FF';
+/** Shown when a layout hasn't named its slot. */ export const DEFAULT_SLOT_CAPTION = 'Screen content renders here';
+/**
+ * Content outlet for shared layouts: marks where a bound screen's nodes are
+ * grafted into the layout tree at composition time. With children (composed
+ * or previewed) it is a plain passthrough region; empty, it renders a
+ * dashed placeholder so layout designers can see the slot on the canvas.
+ *
+ * The placeholder is editor chrome, so it is drawn on editing surfaces only.
+ * A published screen with no content of its own still composes an empty
+ * slot, and that renders as the plain region.
+ */ const LayoutSlot = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, sx, caption, component } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "sx",
+        "caption",
+        "component"
+    ]);
+    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    const hasChildren = Children.count(children) > 0;
+    const element = LAYOUT_SLOT_ELEMENTS.includes(String(component != null ? component : '')) ? component : 'div';
+    if (hasChildren || !suppressNavigation) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref,
+            component: element,
+            "data-aglyn-layout-slot": "",
+            sx: sx
+        }, rest, {
+            children: children
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref,
+        "data-aglyn-layout-slot": "",
+        sx: [
+            {
+                minHeight: 160,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 0.5,
+                borderWidth: 2,
+                borderStyle: 'dashed',
+                // The slot is not an ordinary dashed container — it is the one
+                // region a layout does NOT own. Brand blue on a faint tint says
+                // that at a glance, and matches the design's slot convention.
+                borderColor: SLOT_ACCENT,
+                backgroundColor: alpha(SLOT_ACCENT, 0.06),
+                borderRadius: 1,
+                color: 'text.secondary',
+                fontFamily: 'sans-serif',
+                fontSize: 13,
+                textAlign: 'center',
+                p: 2
+            },
+            ...Array.isArray(sx) ? sx : [
+                sx
+            ]
+        ]
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                component: "span",
+                sx: {
+                    color: SLOT_ACCENT,
+                    fontWeight: 700
+                },
+                children: '◇ layout-slot'
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                component: "span",
+                children: caption || DEFAULT_SLOT_CAPTION
+            })
+        ]
+    }));
+});
+LayoutSlot.displayName = 'LayoutSlot';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Layout Slot',
+    description: "Marks where each bound screen's content renders inside this layout. One per layout.",
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiPageLayoutBody.path,
+        sx: {
+            color: '#9c27b0'
+        }
+    },
+    // The slot's children come from screen composition, never from the canvas.
+    restrictChildren: [
+        Aglyn.LinealDirectiveFlag.LIMIT_TO,
+        {
+            components: []
+        }
+    ],
+    flags: {
+        cloning: Aglyn.FEATURE_FLAG.DISABLED,
+        dropping: Aglyn.FEATURE_FLAG.DISABLED
+    },
+    attributes: [
+        {
+            name: 'caption',
+            label: 'Slot caption',
+            description: 'Editor-only label for what renders here — e.g. "Doc body renders ' + 'here". Never shown on the published site.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            placeholder: DEFAULT_SLOT_CAPTION
+        },
+        {
+            name: 'component',
+            label: 'Component',
+            description: 'The DOM element the screen content renders inside. Blank is ' + '"main" — the page-content landmark assistive tech skips the ' + 'chrome with. Choose another only if this layout’s slot is not the ' + 'page’s main content.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: LAYOUT_SLOT_ELEMENTS.map((value)=>({
+                    value,
+                    label: value
+                }))
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Layout Slot',
+        icon: {
+            path: mdiPageLayoutBody.path,
+            sx: {
+                color: '#9c27b0'
+            }
+        },
+        category: Aglyn.ComponentCategory.LAYOUT,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+export default LayoutSlot;
+
+//# sourceMappingURL=layout-slot.js.map

package/src/lib/components/layout-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/layout-slot.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, { type BoxProps } from '@mui/material/Box'\nimport { alpha } from '@mui/material/styles'\nimport { Children, 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 layout documents; never rename.\nexport const ID: Aglyn.ComponentId = 'layoutSlot'\n\n/**\n * Elements the slot may render as (AGL-2486).\n *\n * `main` is here, and is the DEFAULT composition assigns, because the slot is\n * by construction the page content between the layout's chrome — which is the\n * definition of the landmark. It is the one place on the platform that may\n * choose it: `SECTION_ELEMENTS` and `ALLOWED_AUTHOR_HTML_ELEMENTS` both drop\n * `main` so a document can never carry two, and `stampDocumentLandmark`\n * decides which single node gets it.\n */\nexport const LAYOUT_SLOT_ELEMENTS = [\n  'main',\n  'div',\n  'section',\n  'article',\n] as const\nexport type LayoutSlotElement = (typeof LAYOUT_SLOT_ELEMENTS)[number]\n\nexport interface LayoutSlotProps extends Omit<BoxProps, 'component'> {\n  /**\n   * The DOM element the slot renders as. Left unset, composition fills in\n   * `main` — see {@link LAYOUT_SLOT_ELEMENTS}. Unknown values degrade to\n   * `div` rather than reaching the DOM as an invented tag.\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.\n   * Narrower than the `ElementType` Box accepts — a canvas attribute is a\n   * persisted STRING, and an allow-list is what keeps `script` out of it —\n   * so `BoxProps`' own `component` is omitted rather than widened.\n   */\n  component?: LayoutSlotElement | string\n  /**\n   * Editor-only caption under the slot marker. Layouts render different\n   * kinds of content — a doc body, a narrow article measure, a full page —\n   * and naming it is the difference between four identical dashed boxes and\n   * a layout you can read at a glance.\n   */\n  caption?: string\n}\n\n/**\n * The slot marker is EDITOR CHROME, so it holds the brand accent literally\n * rather than reading `secondary` from the theme: the canvas renders under\n * the host's palette, so a token would repaint the editor's own furniture\n * whenever a subscriber restyles their site — and it already rendered pink\n * instead of the design's blue.\n */\nconst SLOT_ACCENT = '#00B0FF'\n/** Shown when a layout hasn't named its slot. */\nexport const DEFAULT_SLOT_CAPTION = 'Screen content renders here'\n\n/**\n * Content outlet for shared layouts: marks where a bound screen's nodes are\n * grafted into the layout tree at composition time. With children (composed\n * or previewed) it is a plain passthrough region; empty, it renders a\n * dashed placeholder so layout designers can see the slot on the canvas.\n *\n * The placeholder is editor chrome, so it is drawn on editing surfaces only.\n * A published screen with no content of its own still composes an empty\n * slot, and that renders as the plain region.\n */\nconst LayoutSlot = forwardRef<HTMLDivElement, LayoutSlotProps>(\n  (props, ref) => {\n    const { children, sx, caption, component, ...rest } = props\n    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext)\n    const hasChildren = Children.count(children) > 0\n    const element = (LAYOUT_SLOT_ELEMENTS as readonly string[]).includes(\n      String(component ?? ''),\n    )\n      ? (component as LayoutSlotElement)\n      : 'div'\n\n    if (hasChildren || !suppressNavigation) {\n      return (\n        <Box\n          ref={ref}\n          component={element}\n          data-aglyn-layout-slot=\"\"\n          sx={sx}\n          {...rest}\n        >\n          {children}\n        </Box>\n      )\n    }\n\n    return (\n      <Box\n        ref={ref}\n        data-aglyn-layout-slot=\"\"\n        sx={[\n          {\n            minHeight: 160,\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: 0.5,\n            borderWidth: 2,\n            borderStyle: 'dashed',\n            // The slot is not an ordinary dashed container — it is the one\n            // region a layout does NOT own. Brand blue on a faint tint says\n            // that at a glance, and matches the design's slot convention.\n            borderColor: SLOT_ACCENT,\n            backgroundColor: alpha(SLOT_ACCENT, 0.06),\n            borderRadius: 1,\n            color: 'text.secondary',\n            fontFamily: 'sans-serif',\n            fontSize: 13,\n            textAlign: 'center',\n            p: 2,\n          },\n          ...(Array.isArray(sx) ? sx : [sx]),\n        ]}\n        {...rest}\n      >\n        <Box\n          component=\"span\"\n          sx={{ color: SLOT_ACCENT, fontWeight: 700 }}\n        >\n          {'◇ layout-slot'}\n        </Box>\n        <Box component=\"span\">{caption || DEFAULT_SLOT_CAPTION}</Box>\n      </Box>\n    )\n  },\n)\nLayoutSlot.displayName = 'LayoutSlot'\n\nexport const schema: Aglyn.ComponentSchema<LayoutSlotProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Layout Slot',\n  description:\n    \"Marks where each bound screen's content renders inside this layout. One per layout.\",\n  category: Aglyn.ComponentCategory.LAYOUT,\n  icon: {\n    path: mdiPageLayoutBody.path,\n    sx: { color: '#9c27b0' },\n  },\n  // The slot's children come from screen composition, never from the canvas.\n  restrictChildren: [Aglyn.LinealDirectiveFlag.LIMIT_TO, { components: [] }],\n  flags: {\n    cloning: Aglyn.FEATURE_FLAG.DISABLED,\n    dropping: Aglyn.FEATURE_FLAG.DISABLED,\n  },\n  attributes: [\n    {\n      name: 'caption',\n      label: 'Slot caption',\n      description:\n        'Editor-only label for what renders here — e.g. \"Doc body renders ' +\n        'here\". Never shown on the published site.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      placeholder: DEFAULT_SLOT_CAPTION,\n    },\n    {\n      name: 'component',\n      label: 'Component',\n      description:\n        'The DOM element the screen content renders inside. Blank is ' +\n        '\"main\" — the page-content landmark assistive tech skips the ' +\n        'chrome with. Choose another only if this layout’s slot is not the ' +\n        'page’s main content.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: LAYOUT_SLOT_ELEMENTS.map((value) => ({\n        value,\n        label: value,\n      })),\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Layout Slot',\n    icon: {\n      path: mdiPageLayoutBody.path,\n      sx: { color: '#9c27b0' },\n    },\n    category: Aglyn.ComponentCategory.LAYOUT,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {},\n    },\n  },\n]\n\nexport default LayoutSlot\n"],"names":["Aglyn","mdiPageLayoutBody","Box","alpha","Children","forwardRef","useContext","BUNDLE_ID","generatePresetId","ID","LAYOUT_SLOT_ELEMENTS","SLOT_ACCENT","DEFAULT_SLOT_CAPTION","LayoutSlot","props","ref","children","sx","caption","component","rest","suppressNavigation","ScreenLinkContext","hasChildren","count","element","includes","String","data-aglyn-layout-slot","minHeight","display","flexDirection","alignItems","justifyContent","gap","borderWidth","borderStyle","borderColor","backgroundColor","borderRadius","color","fontFamily","fontSize","textAlign","p","Array","isArray","fontWeight","displayName","schema","$id","pluginId","description","category","ComponentCategory","LAYOUT","icon","path","restrictChildren","LinealDirectiveFlag","LIMIT_TO","components","flags","cloning","FEATURE_FLAG","DISABLED","dropping","attributes","name","label","FieldComponentType","TEXT_FIELD","placeholder","SELECT","options","map","value","presets","type","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/link-box-accessible-name.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @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.
+ */
+/**
+ * How a Link Container's link gets its accessible name (AGL-2886).
+ *
+ * An `<a>` is named by the text inside it. A Link Container holding only an
+ * Icon has none, so a screen reader announces "link" and nothing else
+ * (WCAG 2.4.4, 4.1.2). Two attributes answer that, and this module holds both
+ * halves of them: what the anchor renders, and the warning the Attributes
+ * panel shows while neither has been used.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+/** The Link Container attribute that marks it as a second link. */
+export declare const REDUNDANT_ATTRIBUTE = "redundant";
+/**
+ * The anchor attributes that name the link, or take it out of the
+ * accessibility tree and the tab order.
+ *
+ * Redundant wins over a label. A link hidden from assistive tech announces no
+ * name, so the label would be an attribute every visitor downloads for
+ * nothing. Read through `readYesNoValue` because a switch bound to a Yes / no
+ * property can arrive as the string `'false'`, which plain truthiness reads
+ * as a yes.
+ *
+ * `tabIndex` goes with `aria-hidden` because either alone is a defect: a
+ * hidden link that still takes focus leaves a keyboard user on a stop that
+ * announces nothing, and a skipped link that is still announced is the
+ * duplicate this option exists to remove.
+ */
+export declare function linkContainerA11yProps(ariaLabel: unknown, redundant: unknown): {
+    'aria-label'?: string;
+    'aria-hidden'?: 'true';
+    tabIndex?: number;
+};
+/**
+ * Whether what is inside a Link Container gives its link a name, or `true`
+ * when that cannot be decided from the document.
+ *
+ * Walks every descendant. A hidden element is skipped, because the page
+ * renders it with `display: none` and that removes it from the accessibility
+ * tree. A child the lookup cannot find is an unknown, not a silence.
+ */
+export declare function linkContentNamesLink(node: Aglyn.NodeSchema<any>, getNode: Aglyn.AttributeFieldContext['getNode']): boolean;
+/** What the Accessible label field says while the link has no name. */
+export declare const UNNAMED_LINK_CONTAINER_WARNING: string;
+/**
+ * The Accessible label field's `resolveProps`: the warning above as its
+ * helper text while the link would render with no name, and the field's own
+ * description otherwise.
+ *
+ * Silent without the panel's context, since it cannot see what is inside the
+ * box, and silent while Duplicate of another link holds a binding, since each
+ * page that places the component decides that for itself.
+ */
+export declare function linkContainerLabelFieldProps(_props: unknown, field: {
+    input?: {
+        value?: unknown;
+    };
+}, formOptions?: {
+    getState?: () => {
+        values?: Record<string, unknown>;
+    };
+}, context?: Aglyn.AttributeFieldContext): {
+    helperText?: string;
+};

package/src/lib/components/link-box-accessible-name.js

@@ -0,0 +1,158 @@
+/**
+ * @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.
+ */ /**
+ * How a Link Container's link gets its accessible name (AGL-2886).
+ *
+ * An `<a>` is named by the text inside it. A Link Container holding only an
+ * Icon has none, so a screen reader announces "link" and nothing else
+ * (WCAG 2.4.4, 4.1.2). Two attributes answer that, and this module holds both
+ * halves of them: what the anchor renders, and the warning the Attributes
+ * panel shows while neither has been used.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { ID as boxId } from "./box.js";
+import { ID as containerId } from "./container.js";
+import { ID as gridId } from "./grid.js";
+import { ID as iconId } from "./icon.js";
+import { ID as imageId } from "./image.js";
+import { ID as inlineTextId } from "./inline-text.js";
+import { ID as paperId } from "./paper.js";
+import { ID as sectionId } from "./section.js";
+import { ID as stackId } from "./stack.js";
+import { ID as typographyId } from "./typography.js";
+/** The Link Container attribute that marks it as a second link. */ export const REDUNDANT_ATTRIBUTE = 'redundant';
+/**
+ * The anchor attributes that name the link, or take it out of the
+ * accessibility tree and the tab order.
+ *
+ * Redundant wins over a label. A link hidden from assistive tech announces no
+ * name, so the label would be an attribute every visitor downloads for
+ * nothing. Read through `readYesNoValue` because a switch bound to a Yes / no
+ * property can arrive as the string `'false'`, which plain truthiness reads
+ * as a yes.
+ *
+ * `tabIndex` goes with `aria-hidden` because either alone is a defect: a
+ * hidden link that still takes focus leaves a keyboard user on a stop that
+ * announces nothing, and a skipped link that is still announced is the
+ * duplicate this option exists to remove.
+ */ export function linkContainerA11yProps(ariaLabel, redundant) {
+    if (Aglyn.readYesNoValue(redundant) === true) {
+        return {
+            'aria-hidden': 'true',
+            tabIndex: -1
+        };
+    }
+    const label = typeof ariaLabel === 'string' ? ariaLabel.trim() : '';
+    return label ? {
+        'aria-label': label
+    } : {};
+}
+/**
+ * Elements that add no words of their own to a link they sit inside.
+ *
+ * An Icon draws an SVG glyph with no text alternative, and a layout container
+ * is only the box around its children. Image and the two text elements are
+ * listed because their words live in props the walk below reads directly
+ * (`alt`, `children`, `html`), so one of them holding none is as silent as an
+ * Icon.
+ *
+ * An element NOT listed, holding none of those props, is taken to name the
+ * link. A reusable component keeps its words in its definition, a collection
+ * or product element takes them from data, and List Item Text keeps its lines
+ * in props of its own. A warning about any of those would be a guess, and a
+ * warning that is wrong about correct content teaches an author to ignore the
+ * one that is right.
+ */ const WORDLESS_ELEMENTS = new Set([
+    boxId,
+    containerId,
+    gridId,
+    iconId,
+    imageId,
+    inlineTextId,
+    paperId,
+    sectionId,
+    stackId,
+    typographyId
+]);
+const hasText = (value)=>typeof value === 'string' && value.trim().length > 0;
+/**
+ * Whether an element inside the link carries words of its own.
+ *
+ * A binding counts: `{{…}}` is not blank, and what it resolves to is not
+ * known until the page renders. An image's alt text counts unless the image
+ * is marked decorative, because the renderer drops the alt then.
+ */ function carriesWords(props) {
+    if (!props) return false;
+    if (hasText(props['children']) || hasText(props['html'])) return true;
+    if (hasText(props['ariaLabel'])) return true;
+    return hasText(props['alt']) && Aglyn.readYesNoValue(props['decorative']) !== true;
+}
+/**
+ * Whether what is inside a Link Container gives its link a name, or `true`
+ * when that cannot be decided from the document.
+ *
+ * Walks every descendant. A hidden element is skipped, because the page
+ * renders it with `display: none` and that removes it from the accessibility
+ * tree. A child the lookup cannot find is an unknown, not a silence.
+ */ export function linkContentNamesLink(node, getNode) {
+    var _node_nodes;
+    var _node_props;
+    // The renderer draws a node's own `children` string inside the element.
+    if (hasText((_node_props = node.props) == null ? void 0 : _node_props['children'])) {
+        return true;
+    }
+    const pending = [
+        ...(_node_nodes = node.nodes) != null ? _node_nodes : []
+    ];
+    const visited = new Set();
+    while(pending.length){
+        var _child_nodes;
+        const id = pending.pop();
+        if (visited.has(id)) continue;
+        visited.add(id);
+        const child = getNode(id);
+        if (!child) return true;
+        if (child.hidden) continue;
+        if (carriesWords(child.props)) {
+            return true;
+        }
+        if (!WORDLESS_ELEMENTS.has(String(child.componentId))) return true;
+        pending.push(...(_child_nodes = child.nodes) != null ? _child_nodes : []);
+    }
+    return false;
+}
+/** What the Accessible label field says while the link has no name. */ export const UNNAMED_LINK_CONTAINER_WARNING = 'Nothing inside this box can be read aloud, so screen readers announce ' + 'it as just "link". Describe where it goes here, or turn on Duplicate of ' + 'another link if a link beside it already goes to the same place.';
+/**
+ * The Accessible label field's `resolveProps`: the warning above as its
+ * helper text while the link would render with no name, and the field's own
+ * description otherwise.
+ *
+ * Silent without the panel's context, since it cannot see what is inside the
+ * box, and silent while Duplicate of another link holds a binding, since each
+ * page that places the component decides that for itself.
+ */ export function linkContainerLabelFieldProps(_props, field, formOptions, context) {
+    var _field_input, _formOptions_getState_values, _formOptions_getState, _formOptions_getState1;
+    if (!(context == null ? void 0 : context.node) || hasText(field == null ? void 0 : (_field_input = field.input) == null ? void 0 : _field_input.value)) return {};
+    const redundant = formOptions == null ? void 0 : (_formOptions_getState1 = formOptions.getState) == null ? void 0 : (_formOptions_getState = _formOptions_getState1.call(formOptions)) == null ? void 0 : (_formOptions_getState_values = _formOptions_getState.values) == null ? void 0 : _formOptions_getState_values[REDUNDANT_ATTRIBUTE];
+    const marked = Aglyn.readYesNoValue(redundant);
+    if (marked === true || marked === undefined && redundant != null) {
+        return {};
+    }
+    return linkContentNamesLink(context.node, context.getNode) ? {} : {
+        helperText: UNNAMED_LINK_CONTAINER_WARNING
+    };
+}
+
+//# sourceMappingURL=link-box-accessible-name.js.map

package/src/lib/components/link-box-accessible-name.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/link-box-accessible-name.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\n/**\n * How a Link Container's link gets its accessible name (AGL-2886).\n *\n * An `<a>` is named by the text inside it. A Link Container holding only an\n * Icon has none, so a screen reader announces \"link\" and nothing else\n * (WCAG 2.4.4, 4.1.2). Two attributes answer that, and this module holds both\n * halves of them: what the anchor renders, and the warning the Attributes\n * panel shows while neither has been used.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport { ID as boxId } from './box'\nimport { ID as containerId } from './container'\nimport { ID as gridId } from './grid'\nimport { ID as iconId } from './icon'\nimport { ID as imageId } from './image'\nimport { ID as inlineTextId } from './inline-text'\nimport { ID as paperId } from './paper'\nimport { ID as sectionId } from './section'\nimport { ID as stackId } from './stack'\nimport { ID as typographyId } from './typography'\n\n/** The Link Container attribute that marks it as a second link. */\nexport const REDUNDANT_ATTRIBUTE = 'redundant'\n\n/**\n * The anchor attributes that name the link, or take it out of the\n * accessibility tree and the tab order.\n *\n * Redundant wins over a label. A link hidden from assistive tech announces no\n * name, so the label would be an attribute every visitor downloads for\n * nothing. Read through `readYesNoValue` because a switch bound to a Yes / no\n * property can arrive as the string `'false'`, which plain truthiness reads\n * as a yes.\n *\n * `tabIndex` goes with `aria-hidden` because either alone is a defect: a\n * hidden link that still takes focus leaves a keyboard user on a stop that\n * announces nothing, and a skipped link that is still announced is the\n * duplicate this option exists to remove.\n */\nexport function linkContainerA11yProps(\n  ariaLabel: unknown,\n  redundant: unknown,\n): { 'aria-label'?: string; 'aria-hidden'?: 'true'; tabIndex?: number } {\n  if (Aglyn.readYesNoValue(redundant) === true) {\n    return { 'aria-hidden': 'true', tabIndex: -1 }\n  }\n  const label = typeof ariaLabel === 'string' ? ariaLabel.trim() : ''\n  return label ? { 'aria-label': label } : {}\n}\n\n/**\n * Elements that add no words of their own to a link they sit inside.\n *\n * An Icon draws an SVG glyph with no text alternative, and a layout container\n * is only the box around its children. Image and the two text elements are\n * listed because their words live in props the walk below reads directly\n * (`alt`, `children`, `html`), so one of them holding none is as silent as an\n * Icon.\n *\n * An element NOT listed, holding none of those props, is taken to name the\n * link. A reusable component keeps its words in its definition, a collection\n * or product element takes them from data, and List Item Text keeps its lines\n * in props of its own. A warning about any of those would be a guess, and a\n * warning that is wrong about correct content teaches an author to ignore the\n * one that is right.\n */\nconst WORDLESS_ELEMENTS: ReadonlySet<string> = new Set([\n  boxId,\n  containerId,\n  gridId,\n  iconId,\n  imageId,\n  inlineTextId,\n  paperId,\n  sectionId,\n  stackId,\n  typographyId,\n])\n\nconst hasText = (value: unknown): boolean =>\n  typeof value === 'string' && value.trim().length > 0\n\n/**\n * Whether an element inside the link carries words of its own.\n *\n * A binding counts: `{{…}}` is not blank, and what it resolves to is not\n * known until the page renders. An image's alt text counts unless the image\n * is marked decorative, because the renderer drops the alt then.\n */\nfunction carriesWords(props: Record<string, unknown> | undefined): boolean {\n  if (!props) return false\n  if (hasText(props['children']) || hasText(props['html'])) return true\n  if (hasText(props['ariaLabel'])) return true\n  return (\n    hasText(props['alt']) && Aglyn.readYesNoValue(props['decorative']) !== true\n  )\n}\n\n/**\n * Whether what is inside a Link Container gives its link a name, or `true`\n * when that cannot be decided from the document.\n *\n * Walks every descendant. A hidden element is skipped, because the page\n * renders it with `display: none` and that removes it from the accessibility\n * tree. A child the lookup cannot find is an unknown, not a silence.\n */\nexport function linkContentNamesLink(\n  node: Aglyn.NodeSchema<any>,\n  getNode: Aglyn.AttributeFieldContext['getNode'],\n): boolean {\n  // The renderer draws a node's own `children` string inside the element.\n  if (hasText((node.props as Record<string, unknown> | undefined)?.['children'])) {\n    return true\n  }\n  const pending = [...(node.nodes ?? [])]\n  const visited = new Set<string>()\n  while (pending.length) {\n    const id = pending.pop() as string\n    if (visited.has(id)) continue\n    visited.add(id)\n    const child = getNode(id)\n    if (!child) return true\n    if (child.hidden) continue\n    if (carriesWords(child.props as Record<string, unknown> | undefined)) {\n      return true\n    }\n    if (!WORDLESS_ELEMENTS.has(String(child.componentId))) return true\n    pending.push(...(child.nodes ?? []))\n  }\n  return false\n}\n\n/** What the Accessible label field says while the link has no name. */\nexport const UNNAMED_LINK_CONTAINER_WARNING =\n  'Nothing inside this box can be read aloud, so screen readers announce ' +\n  'it as just \"link\". Describe where it goes here, or turn on Duplicate of ' +\n  'another link if a link beside it already goes to the same place.'\n\n/**\n * The Accessible label field's `resolveProps`: the warning above as its\n * helper text while the link would render with no name, and the field's own\n * description otherwise.\n *\n * Silent without the panel's context, since it cannot see what is inside the\n * box, and silent while Duplicate of another link holds a binding, since each\n * page that places the component decides that for itself.\n */\nexport function linkContainerLabelFieldProps(\n  _props: unknown,\n  field: { input?: { value?: unknown } },\n  formOptions?: { getState?: () => { values?: Record<string, unknown> } },\n  context?: Aglyn.AttributeFieldContext,\n): { helperText?: string } {\n  if (!context?.node || hasText(field?.input?.value)) return {}\n  const redundant = formOptions?.getState?.()?.values?.[REDUNDANT_ATTRIBUTE]\n  const marked = Aglyn.readYesNoValue(redundant)\n  if (marked === true || (marked === undefined && redundant != null)) {\n    return {}\n  }\n  return linkContentNamesLink(context.node, context.getNode)\n    ? {}\n    : { helperText: UNNAMED_LINK_CONTAINER_WARNING }\n}\n"],"names":["Aglyn","ID","boxId","containerId","gridId","iconId","imageId","inlineTextId","paperId","sectionId","stackId","typographyId","REDUNDANT_ATTRIBUTE","linkContainerA11yProps","ariaLabel","redundant","readYesNoValue","tabIndex","label","trim","WORDLESS_ELEMENTS","Set","hasText","value","length","carriesWords","props","linkContentNamesLink","node","getNode","pending","nodes","visited","child","id","pop","has","add","hidden","String","componentId","push","UNNAMED_LINK_CONTAINER_WARNING","linkContainerLabelFieldProps","_props","field","formOptions","context","input","getState","values","marked","undefined","helperText"],"mappings":"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"}

package/src/lib/components/link-box.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @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 ID: Aglyn.ComponentId;
+export interface LinkBoxProps {
+    /** Target screen id, resolved from the host routing map at render time. */
+    screenId?: string;
+    /** External URL escape hatch, used only when no `screenId` is set. */
+    href?: string;
+    /** Opens in a new tab. External destinations only. */
+    newTab?: boolean;
+    /** The link's name for assistive tech, when its content supplies none. */
+    ariaLabel?: string;
+    /**
+     * The box repeats a link beside it to the same destination, so it is
+     * hidden from assistive tech and left out of the tab order.
+     */
+    redundant?: boolean;
+    /**
+     * Authored node styles, handed over by the renderer rather than typed into
+     * an attribute. Declared because the merge below reads it: undeclared, no
+     * typed caller could style a tile (AGL-1323).
+     */
+    sx?: SxProps;
+    children?: ReactNode;
+}
+/**
+ * A container that IS the link — icon, heading and description inside one
+ * anchor, instead of a tile whose only clickable part is its title.
+ *
+ * Every other linking element in the plugin is a leaf: Screen Link and
+ * Button both render their `children` as inline text, so `nodeAcceptsChildren`
+ * reports false and the canvas will not let anything be dropped inside them.
+ * That left no way to author a card, a mega-menu tile, or a linked logo —
+ * the shapes where the whole box is meant to be one target (AGL-1231).
+ *
+ * Nothing interactive may be nested inside: an `<a>` inside an `<a>` is
+ * invalid HTML and browsers unnest it, which silently moves half the tile
+ * back out of the link. Convert an inner Screen Link to plain Text when you
+ * wrap it in one of these.
+ *
+ * The link is named by the text inside it, so a box holding only an icon
+ * needs `ariaLabel` — or `redundant`, when a link beside it already goes to
+ * the same place (AGL-2886). Both land on the anchor in every branch below,
+ * so the canvas carries the same attributes the published page does.
+ */
+declare const LinkBox: import("react").ForwardRefExoticComponent<LinkBoxProps & import("react").RefAttributes<HTMLElement>>;
+export declare const schema: Aglyn.ComponentSchema<LinkBoxProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default LinkBox;