@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/container.js

@@ -0,0 +1,169 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiTextBoxOutline, mdiViewArrayOutline } from "@aglyn/shared-data-mdi";
+import MuiContainer from "@mui/material/Container";
+import { createElement, forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { applySemanticElement, semanticElementAttribute, semanticElementLabelAttribute } from "../utils/element-picker.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+/**
+ * MUI's Container behind the cleared-prop guard (AGL-1435).
+ *
+ * `maxWidth` is the one authorable attribute in this plugin where a cleared
+ * value changes PAGE LAYOUT instead of showing an obviously wrong value, and
+ * it satisfied neither branch of MUI's own logic:
+ *
+ *  - `''` / `null` is not `undefined`, so the `maxWidth = 'lg'` destructuring
+ *    default in `@mui/system/Container/createContainer.js` never fires;
+ *  - `''` / `null` is falsy, so the `ownerState.maxWidth &&` guard skips both
+ *    the branch that emits the `max-width` rule and the one that emits the
+ *    matching utility class.
+ *
+ * The result is a section with NO width constraint at all — full-bleed, with
+ * nothing thrown and nothing visibly wrong in the editor. Clearing the field
+ * persists `null` (the AGL-1226 shape; 106 cleared prop values live in the
+ * corpus today across other components), so this was reachable, not
+ * theoretical. Dropping the key instead lets MUI's own `lg` apply.
+ */ const Container = forwardRef((props, ref)=>createElement(MuiContainer, _extends({}, applySemanticElement(dropClearedProps(props)), {
+        ref
+    })));
+Container.displayName = 'AglynContainer';
+// Component ids are persisted in screen documents; keep the legacy ids.
+export const ID = 'muiContainer';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Container',
+    description: 'Centers your page content and caps how wide it gets.',
+    category: Aglyn.ComponentCategory.LAYOUT,
+    icon: {
+        path: mdiViewArrayOutline.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    attributes: [
+        semanticElementAttribute('this container'),
+        semanticElementLabelAttribute(),
+        {
+            name: 'fixed',
+            description: "If true, set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default.",
+            component: Aglyn.FieldComponentType.SWITCH,
+            label: 'Fixed Breakpoints'
+        },
+        {
+            name: 'disableGutters',
+            description: 'Removes the container’s side padding, so its content runs to the ' + 'full width it is centered in. Use it for a full-bleed band; leave ' + 'it off for text, which needs the margin on a phone.',
+            component: Aglyn.FieldComponentType.SWITCH,
+            label: 'Disable Gutters?'
+        },
+        {
+            name: 'maxWidth',
+            description: 'The width this section stops growing at. New containers start at ' + 'XL (1536px), the standard for full-width page sections. Long-form ' + 'prose — legal pages, docs, blog and changelog bodies — uses MD ' + '(900px), which lands near the 65–75 characters a line that reads ' + 'comfortably; the "Prose Container" preset starts there. LG (1200px) ' + 'is the deliberate middle case for a wide but text-led section, not ' + 'a default to spread. Clearing the field falls back to the MUI ' + 'default of LG. There is no "Default" option: "Fluid Responsive" is ' + 'the only way to render edge-to-edge, and it has to be chosen on ' + 'purpose.',
+            component: Aglyn.FieldComponentType.SELECT,
+            label: 'Max Width',
+            // Every value here is a real, persistable one. The list used to open
+            // with `{ value: '', label: 'Default' }`, which was unpersistable by
+            // construction — the attributes form strips `''` on change (AGL-1191)
+            // — and, on any path that DID land it, rendered full-bleed rather than
+            // any default at all (AGL-1435).
+            options: [
+                {
+                    value: 'xs',
+                    label: 'XS - Mobile (444px)'
+                },
+                {
+                    value: 'sm',
+                    label: 'SM - Tablet (600px)'
+                },
+                {
+                    value: 'md',
+                    label: 'MD - Laptop (900px)'
+                },
+                {
+                    value: 'lg',
+                    label: 'LG - Desktop (1200px)'
+                },
+                {
+                    value: 'xl',
+                    label: 'XL - Widescreen (1536px, section standard)'
+                },
+                {
+                    value: false,
+                    label: 'Fluid Responsive (no max width)'
+                }
+            ]
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Container',
+        icon: {
+            path: mdiViewArrayOutline.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        category: Aglyn.ComponentCategory.LAYOUT,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            // Explicit, not implicit: a dropped Container is a page section, and
+            // sections are XL here (245 of the 248 authored on the marketing host).
+            // Relying on MUI's implicit `lg` is what made "what does no value mean"
+            // an open question in the first place (AGL-1435).
+            props: {
+                maxWidth: 'xl'
+            }
+        }
+    },
+    {
+        // Case is MD on READING grounds, not as "one step down" — at XL a
+        // paragraph runs 110–120 characters a line, and even LG (1200px) is far
+        // past the 65–75 the eye tracks without losing its place. MD is the
+        // stock breakpoint that lands in that band, so the standard grows a
+        // third case without growing a bespoke number: the 1328px ban holds
+        // because 1328 is a content width, not a breakpoint.
+        $id: generatePresetId(ID, 'prose'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Prose Container',
+        icon: {
+            path: mdiTextBoxOutline.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        category: Aglyn.ComponentCategory.LAYOUT,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                maxWidth: 'md'
+            }
+        }
+    }
+];
+export default Container;
+
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/container.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport {\n  mdiTextBoxOutline,\n  mdiViewArrayOutline,\n} from '@aglyn/shared-data-mdi'\nimport MuiContainer, { type ContainerProps } from '@mui/material/Container'\nimport { createElement, forwardRef } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport {\n  applySemanticElement,\n  semanticElementAttribute,\n  semanticElementLabelAttribute,\n} from '../utils/element-picker'\nimport { dropClearedProps } from '../utils/drop-cleared-props'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n/**\n * MUI's Container behind the cleared-prop guard (AGL-1435).\n *\n * `maxWidth` is the one authorable attribute in this plugin where a cleared\n * value changes PAGE LAYOUT instead of showing an obviously wrong value, and\n * it satisfied neither branch of MUI's own logic:\n *\n *  - `''` / `null` is not `undefined`, so the `maxWidth = 'lg'` destructuring\n *    default in `@mui/system/Container/createContainer.js` never fires;\n *  - `''` / `null` is falsy, so the `ownerState.maxWidth &&` guard skips both\n *    the branch that emits the `max-width` rule and the one that emits the\n *    matching utility class.\n *\n * The result is a section with NO width constraint at all — full-bleed, with\n * nothing thrown and nothing visibly wrong in the editor. Clearing the field\n * persists `null` (the AGL-1226 shape; 106 cleared prop values live in the\n * corpus today across other components), so this was reachable, not\n * theoretical. Dropping the key instead lets MUI's own `lg` apply.\n */\nconst Container = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =>\n  createElement(MuiContainer, {\n    ...applySemanticElement(dropClearedProps(props) as Record<string, unknown>),\n    ref,\n  }),\n)\nContainer.displayName = 'AglynContainer'\n\n// Component ids are persisted in screen documents; keep the legacy ids.\nexport const ID: Aglyn.ComponentId = 'muiContainer'\n\nexport const schema: Aglyn.ComponentSchema<ContainerProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Container',\n  description: 'Centers your page content and caps how wide it gets.',\n  category: Aglyn.ComponentCategory.LAYOUT,\n  icon: {\n    path: mdiViewArrayOutline.path,\n    sx: { color: '#2196f3' },\n  },\n  attributes: [\n    semanticElementAttribute('this container'),\n    semanticElementLabelAttribute(),\n    {\n      name: 'fixed',\n      description:\n        \"If true, set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default.\",\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Fixed Breakpoints',\n    },\n    {\n      name: 'disableGutters',\n      description:\n        'Removes the container’s side padding, so its content runs to the ' +\n        'full width it is centered in. Use it for a full-bleed band; leave ' +\n        'it off for text, which needs the margin on a phone.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Disable Gutters?',\n    },\n    {\n      name: 'maxWidth',\n      description:\n        'The width this section stops growing at. New containers start at ' +\n        'XL (1536px), the standard for full-width page sections. Long-form ' +\n        'prose — legal pages, docs, blog and changelog bodies — uses MD ' +\n        '(900px), which lands near the 65–75 characters a line that reads ' +\n        'comfortably; the \"Prose Container\" preset starts there. LG (1200px) ' +\n        'is the deliberate middle case for a wide but text-led section, not ' +\n        'a default to spread. Clearing the field falls back to the MUI ' +\n        'default of LG. There is no \"Default\" option: \"Fluid Responsive\" is ' +\n        'the only way to render edge-to-edge, and it has to be chosen on ' +\n        'purpose.',\n      component: Aglyn.FieldComponentType.SELECT,\n      label: 'Max Width',\n      // Every value here is a real, persistable one. The list used to open\n      // with `{ value: '', label: 'Default' }`, which was unpersistable by\n      // construction — the attributes form strips `''` on change (AGL-1191)\n      // — and, on any path that DID land it, rendered full-bleed rather than\n      // any default at all (AGL-1435).\n      options: [\n        { value: 'xs', label: 'XS - Mobile (444px)' },\n        { value: 'sm', label: 'SM - Tablet (600px)' },\n        { value: 'md', label: 'MD - Laptop (900px)' },\n        { value: 'lg', label: 'LG - Desktop (1200px)' },\n        { value: 'xl', label: 'XL - Widescreen (1536px, section standard)' },\n        { value: false, label: 'Fluid Responsive (no max width)' },\n      ],\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Container',\n    icon: {\n      path: mdiViewArrayOutline.path,\n      sx: { color: '#2196f3' },\n    },\n    category: Aglyn.ComponentCategory.LAYOUT,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      // Explicit, not implicit: a dropped Container is a page section, and\n      // sections are XL here (245 of the 248 authored on the marketing host).\n      // Relying on MUI's implicit `lg` is what made \"what does no value mean\"\n      // an open question in the first place (AGL-1435).\n      props: { maxWidth: 'xl' },\n    },\n  },\n  {\n    // Case is MD on READING grounds, not as \"one step down\" — at XL a\n    // paragraph runs 110–120 characters a line, and even LG (1200px) is far\n    // past the 65–75 the eye tracks without losing its place. MD is the\n    // stock breakpoint that lands in that band, so the standard grows a\n    // third case without growing a bespoke number: the 1328px ban holds\n    // because 1328 is a content width, not a breakpoint.\n    $id: generatePresetId(ID, 'prose'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Prose Container',\n    icon: {\n      path: mdiTextBoxOutline.path,\n      sx: { color: '#2196f3' },\n    },\n    category: Aglyn.ComponentCategory.LAYOUT,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { maxWidth: 'md' },\n    },\n  },\n]\n\nexport default Container\n"],"names":["Aglyn","mdiTextBoxOutline","mdiViewArrayOutline","MuiContainer","createElement","forwardRef","BUNDLE_ID","applySemanticElement","semanticElementAttribute","semanticElementLabelAttribute","dropClearedProps","generatePresetId","Container","props","ref","displayName","ID","schema","$id","pluginId","description","category","ComponentCategory","LAYOUT","icon","path","sx","color","attributes","name","component","FieldComponentType","SWITCH","label","SELECT","options","value","presets","type","NodeType","PRESET","data","componentId","maxWidth"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SACEC,iBAAiB,EACjBC,mBAAmB,QACd,yBAAwB;AAC/B,OAAOC,kBAA2C,0BAAyB;AAC3E,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AACjD,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,6BAA6B,QACxB,6BAAyB;AAChC,SAASC,gBAAgB,QAAQ,iCAA6B;AAC9D,SAASC,gBAAgB,QAAQ,iCAA6B;AAE9D;;;;;;;;;;;;;;;;;;CAkBC,GACD,MAAMC,YAAYP,WAA2C,CAACQ,OAAOC,MACnEV,cAAcD,cAAc,aACvBI,qBAAqBG,iBAAiBG;QACzCC;;AAGJF,UAAUG,WAAW,GAAG;AAExB,wEAAwE;AACxE,OAAO,MAAMC,KAAwB,eAAc;AAEnD,OAAO,MAAMC,SAAgD;IAC3DC,KAAKF;IACLG,UAAUb;IACVS,aAAa;IACbK,aAAa;IACbC,UAAUrB,MAAMsB,iBAAiB,CAACC,MAAM;IACxCC,MAAM;QACJC,MAAMvB,oBAAoBuB,IAAI;QAC9BC,IAAI;YAAEC,OAAO;QAAU;IACzB;IACAC,YAAY;QACVpB,yBAAyB;QACzBC;QACA;YACEoB,MAAM;YACNT,aACE;YACFU,WAAW9B,MAAM+B,kBAAkB,CAACC,MAAM;YAC1CC,OAAO;QACT;QACA;YACEJ,MAAM;YACNT,aACE,sEACA,uEACA;YACFU,WAAW9B,MAAM+B,kBAAkB,CAACC,MAAM;YAC1CC,OAAO;QACT;QACA;YACEJ,MAAM;YACNT,aACE,sEACA,uEACA,oEACA,sEACA,yEACA,wEACA,mEACA,wEACA,qEACA;YACFU,WAAW9B,MAAM+B,kBAAkB,CAACG,MAAM;YAC1CD,OAAO;YACP,qEAAqE;YACrE,qEAAqE;YACrE,sEAAsE;YACtE,uEAAuE;YACvE,iCAAiC;YACjCE,SAAS;gBACP;oBAAEC,OAAO;oBAAMH,OAAO;gBAAsB;gBAC5C;oBAAEG,OAAO;oBAAMH,OAAO;gBAAsB;gBAC5C;oBAAEG,OAAO;oBAAMH,OAAO;gBAAsB;gBAC5C;oBAAEG,OAAO;oBAAMH,OAAO;gBAAwB;gBAC9C;oBAAEG,OAAO;oBAAMH,OAAO;gBAA6C;gBACnE;oBAAEG,OAAO;oBAAOH,OAAO;gBAAkC;aAC1D;QACH;KACD;AACH,EAAC;AAED,OAAO,MAAMI,UAAgC;IAC3C;QACEnB,KAAKP,iBAAiBK;QACtBsB,MAAMtC,MAAMuC,QAAQ,CAACC,MAAM;QAC3BzB,aAAa;QACbS,MAAM;YACJC,MAAMvB,oBAAoBuB,IAAI;YAC9BC,IAAI;gBAAEC,OAAO;YAAU;QACzB;QACAN,UAAUrB,MAAMsB,iBAAiB,CAACC,MAAM;QACxCkB,MAAM;YACJvB,KAAK;YACLwB,aAAa1B;YACbG,UAAUb;YACV,qEAAqE;YACrE,wEAAwE;YACxE,wEAAwE;YACxE,kDAAkD;YAClDO,OAAO;gBAAE8B,UAAU;YAAK;QAC1B;IACF;IACA;QACE,kEAAkE;QAClE,wEAAwE;QACxE,oEAAoE;QACpE,oEAAoE;QACpE,oEAAoE;QACpE,qDAAqD;QACrDzB,KAAKP,iBAAiBK,IAAI;QAC1BsB,MAAMtC,MAAMuC,QAAQ,CAACC,MAAM;QAC3BzB,aAAa;QACbS,MAAM;YACJC,MAAMxB,kBAAkBwB,IAAI;YAC5BC,IAAI;gBAAEC,OAAO;YAAU;QACzB;QACAN,UAAUrB,MAAMsB,iBAAiB,CAACC,MAAM;QACxCkB,MAAM;YACJvB,KAAK;YACLwB,aAAa1B;YACbG,UAAUb;YACVO,OAAO;gBAAE8B,UAAU;YAAK;QAC1B;IACF;CACD,CAAA;AAED,eAAe/B,UAAS"}

package/src/lib/components/custom-html.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @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 CustomHtmlProps {
+    /** Author-provided markup, sanitized before every render. */
+    html?: string;
+    /** Scoped styles injected as a <style> tag (selectors are the
+     * author's responsibility; keep them specific). */
+    css?: string;
+    /**
+     * Embed mode (AGL-320): renders the RAW snippet inside a sandboxed
+     * iframe (scripts allowed, same-origin denied) for third-party
+     * widgets. Business-plan gated by the contentGating entitlement's
+     * sibling `commerce` checks server-side; the besigner surfaces the
+     * gate in the attribute description.
+     */
+    embedMode?: boolean;
+    /** Iframe height (px) in embed mode. */
+    embedHeight?: number;
+    /**
+     * 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;
+}
+/**
+ * Sanitization policy (AGL-320): an allowlist — no scripts, iframes,
+ * objects, or event-handler attributes. Applied at EVERY render (server,
+ * client, and besigner canvas), so stored markup can never execute even if a
+ * write bypassed the console. Embed mode never touches the DOM — the raw
+ * snippet only exists inside `sandbox="allow-scripts"` (no
+ * allow-same-origin), so it cannot reach cookies, storage, or the parent
+ * page.
+ *
+ * The engine is `Aglyn.sanitizeAuthorHtml` (AGL-1901), which replaced a
+ * per-instance DOMPurify. DOMPurify needs a real DOM, so this component
+ * could only sanitize in an effect, and every Custom HTML block was
+ * therefore absent from the server response — the SSR/SEO half AGL-1268 left
+ * open. The new sanitizer is a pure function of the string, so the same call
+ * runs on the server and in the browser and both produce the same bytes.
+ *
+ * What carried over unchanged:
+ *
+ * - the forbidden set (`script`, `iframe`, `object`, `embed`, `form`,
+ *   `base`), `srcdoc`/`formaction`, and `ALLOW_DATA_ATTR: false`;
+ * - AGL-1725's `style`-attribute rule. DOMPurify performs NO CSS filtering,
+ *   which is why that hook existed at all; `sanitizeAuthorHtml` applies
+ *   `sanitizeAuthorCss` to every `style` attribute itself, so the rule is
+ *   part of the sanitizer rather than a hook a future caller could forget to
+ *   register.
+ * - the `<style>` element being dropped from the `html` attribute, so the
+ *   `css` attribute below stays the ONLY route to a style block. That was
+ *   DOMPurify's behaviour and `custom-html-author-css.spec.tsx` pins it;
+ *   a first pass at AGL-1901 mistook it for a gap and let the tag through,
+ *   which that spec caught.
+ */
+export declare function sanitizeCustomHtml(html: string): string;
+declare const CustomHtml: import("react").ForwardRefExoticComponent<CustomHtmlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<CustomHtmlProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default CustomHtml;

package/src/lib/components/custom-html.js

@@ -0,0 +1,219 @@
+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 { mdiCodeTags } from "@aglyn/shared-data-mdi";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+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 = 'custom-html';
+/**
+ * Sanitization policy (AGL-320): an allowlist — no scripts, iframes,
+ * objects, or event-handler attributes. Applied at EVERY render (server,
+ * client, and besigner canvas), so stored markup can never execute even if a
+ * write bypassed the console. Embed mode never touches the DOM — the raw
+ * snippet only exists inside `sandbox="allow-scripts"` (no
+ * allow-same-origin), so it cannot reach cookies, storage, or the parent
+ * page.
+ *
+ * The engine is `Aglyn.sanitizeAuthorHtml` (AGL-1901), which replaced a
+ * per-instance DOMPurify. DOMPurify needs a real DOM, so this component
+ * could only sanitize in an effect, and every Custom HTML block was
+ * therefore absent from the server response — the SSR/SEO half AGL-1268 left
+ * open. The new sanitizer is a pure function of the string, so the same call
+ * runs on the server and in the browser and both produce the same bytes.
+ *
+ * What carried over unchanged:
+ *
+ * - the forbidden set (`script`, `iframe`, `object`, `embed`, `form`,
+ *   `base`), `srcdoc`/`formaction`, and `ALLOW_DATA_ATTR: false`;
+ * - AGL-1725's `style`-attribute rule. DOMPurify performs NO CSS filtering,
+ *   which is why that hook existed at all; `sanitizeAuthorHtml` applies
+ *   `sanitizeAuthorCss` to every `style` attribute itself, so the rule is
+ *   part of the sanitizer rather than a hook a future caller could forget to
+ *   register.
+ * - the `<style>` element being dropped from the `html` attribute, so the
+ *   `css` attribute below stays the ONLY route to a style block. That was
+ *   DOMPurify's behaviour and `custom-html-author-css.spec.tsx` pins it;
+ *   a first pass at AGL-1901 mistook it for a gap and let the tag through,
+ *   which that spec caught.
+ */ export function sanitizeCustomHtml(html) {
+    return Aglyn.sanitizeAuthorHtml(html);
+}
+const CustomHtml = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { html, css, embedMode, embedHeight } = props, rest = _object_without_properties_loose(props, [
+        "html",
+        "css",
+        "embedMode",
+        "embedHeight"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { hostId } = Aglyn.useSite();
+    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    // Same shape as typography's rich text, and fixed the same way
+    // (AGL-1901): sanitized DURING render rather than in an effect. The
+    // effect existed because DOMPurify needs a DOM — the server rendered
+    // nothing, so the first client render had to render nothing too or
+    // hydration would mismatch (AGL-1268). `sanitizeCustomHtml` is now a
+    // pure function of the string, so both sides compute the same markup and
+    // the block is in the server response where a crawler can read it.
+    const sanitized = !html || embedMode ? '' : sanitizeCustomHtml(html);
+    if (!(html == null ? void 0 : html.trim())) {
+        // 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, {
+            // MERGE, never replace (AGL-1284): the placeholder's own look goes
+            // first so an author who styles the empty state can override it.
+            sx: [
+                {
+                    p: 3,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    color: 'text.secondary',
+                    fontSize: 13,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: '</> Custom HTML — add markup in the attributes panel'
+        }));
+    }
+    if (embedMode) {
+        return /*#__PURE__*/ _jsxs(Box, _extends({
+            ref: ref
+        }, rest, {
+            children: [
+                !hostId ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: 'Embed (sandboxed iframe) — runs on the live site'
+                }) : null,
+                /*#__PURE__*/ _jsx("iframe", {
+                    title: "Embedded content",
+                    sandbox: "allow-scripts allow-popups",
+                    srcDoc: html,
+                    style: {
+                        width: '100%',
+                        height: `${Math.max(40, embedHeight != null ? embedHeight : 320)}px`,
+                        border: 0
+                    }
+                })
+            ]
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        children: [
+            css ? /*#__PURE__*/ _jsx("style", {
+                children: Aglyn.sanitizeAuthorCss(css)
+            }) : null,
+            /*#__PURE__*/ _jsx("div", {
+                dangerouslySetInnerHTML: {
+                    __html: sanitized
+                }
+            })
+        ]
+    }));
+});
+CustomHtml.displayName = 'AglynCustomHtml';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Custom HTML',
+    description: 'Your own markup, sanitised on render, or isolated in a sandboxed iframe.',
+    category: Aglyn.ComponentCategory.DATA_DISPLAY,
+    icon: {
+        path: mdiCodeTags.path,
+        sx: {
+            color: '#7b1fa2'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'html',
+            label: 'HTML',
+            description: 'Sanitized on every render: scripts, iframes, and on* handlers ' + 'are stripped. Use Embed mode for third-party widgets.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'css',
+            label: 'CSS',
+            // AGL-1725 — the "warn" half of warn-and-disclose. An author can only
+            // weigh this egress if they are told it exists, and the attributes
+            // panel is where they are typing the url().
+            description: 'Injected as a style tag — keep selectors specific. A url() ' + 'pointing off your site makes every visitor’s browser contact that ' + 'host, which sees their IP address and which page they are on. ' + 'Insecure http:// URLs are not loaded.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'embedMode',
+            label: 'Embed mode (sandboxed)',
+            description: 'Runs the raw snippet in a sandboxed iframe (scripts allowed, no ' + 'access to your site or visitor data). For third-party widgets.',
+            component: Aglyn.FieldComponentType.CHECKBOX
+        },
+        {
+            name: 'embedHeight',
+            label: 'Embed height (px)',
+            description: 'Iframe height in embed mode (default 320).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Custom HTML',
+        pluginId: BUNDLE_ID,
+        description: 'Sanitized markup block, with a sandboxed embed mode',
+        category: Aglyn.ComponentCategory.DATA_DISPLAY,
+        icon: {
+            path: mdiCodeTags.path,
+            sx: {
+                color: '#7b1fa2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                html: '<p>Hello from custom HTML</p>'
+            }
+        }
+    }
+];
+export default CustomHtml;
+
+//# sourceMappingURL=custom-html.js.map

package/src/lib/components/custom-html.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/custom-html.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 { mdiCodeTags } from '@aglyn/shared-data-mdi'\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport Typography from '@mui/material/Typography'\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 = 'custom-html'\n\nexport interface CustomHtmlProps {\n  /** Author-provided markup, sanitized before every render. */\n  html?: string\n  /** Scoped styles injected as a <style> tag (selectors are the\n   * author's responsibility; keep them specific). */\n  css?: string\n  /**\n   * Embed mode (AGL-320): renders the RAW snippet inside a sandboxed\n   * iframe (scripts allowed, same-origin denied) for third-party\n   * widgets. Business-plan gated by the contentGating entitlement's\n   * sibling `commerce` checks server-side; the besigner surfaces the\n   * gate in the attribute description.\n   */\n  embedMode?: boolean\n  /** Iframe height (px) in embed mode. */\n  embedHeight?: number\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 * Sanitization policy (AGL-320): an allowlist — no scripts, iframes,\n * objects, or event-handler attributes. Applied at EVERY render (server,\n * client, and besigner canvas), so stored markup can never execute even if a\n * write bypassed the console. Embed mode never touches the DOM — the raw\n * snippet only exists inside `sandbox=\"allow-scripts\"` (no\n * allow-same-origin), so it cannot reach cookies, storage, or the parent\n * page.\n *\n * The engine is `Aglyn.sanitizeAuthorHtml` (AGL-1901), which replaced a\n * per-instance DOMPurify. DOMPurify needs a real DOM, so this component\n * could only sanitize in an effect, and every Custom HTML block was\n * therefore absent from the server response — the SSR/SEO half AGL-1268 left\n * open. The new sanitizer is a pure function of the string, so the same call\n * runs on the server and in the browser and both produce the same bytes.\n *\n * What carried over unchanged:\n *\n * - the forbidden set (`script`, `iframe`, `object`, `embed`, `form`,\n *   `base`), `srcdoc`/`formaction`, and `ALLOW_DATA_ATTR: false`;\n * - AGL-1725's `style`-attribute rule. DOMPurify performs NO CSS filtering,\n *   which is why that hook existed at all; `sanitizeAuthorHtml` applies\n *   `sanitizeAuthorCss` to every `style` attribute itself, so the rule is\n *   part of the sanitizer rather than a hook a future caller could forget to\n *   register.\n * - the `<style>` element being dropped from the `html` attribute, so the\n *   `css` attribute below stays the ONLY route to a style block. That was\n *   DOMPurify's behaviour and `custom-html-author-css.spec.tsx` pins it;\n *   a first pass at AGL-1901 mistook it for a gap and let the tag through,\n *   which that spec caught.\n */\nexport function sanitizeCustomHtml(html: string): string {\n  return Aglyn.sanitizeAuthorHtml(html)\n}\n\nconst CustomHtml = forwardRef<HTMLDivElement, CustomHtmlProps>(\n  (props, ref) => {\n    const { html, css, embedMode, embedHeight, ...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 { hostId } = Aglyn.useSite()\n    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext)\n\n    // Same shape as typography's rich text, and fixed the same way\n    // (AGL-1901): sanitized DURING render rather than in an effect. The\n    // effect existed because DOMPurify needs a DOM — the server rendered\n    // nothing, so the first client render had to render nothing too or\n    // hydration would mismatch (AGL-1268). `sanitizeCustomHtml` is now a\n    // pure function of the string, so both sides compute the same markup and\n    // the block is in the server response where a crawler can read it.\n    const sanitized = !html || embedMode ? '' : sanitizeCustomHtml(html)\n\n    if (!html?.trim()) {\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          // MERGE, never replace (AGL-1284): the placeholder's own look goes\n          // first so an author who styles the empty state can override it.\n          sx={[\n            {\n              p: 3,\n              border: '1px dashed',\n              borderColor: 'divider',\n              borderRadius: 1,\n              color: 'text.secondary',\n              fontSize: 13,\n              fontFamily: 'system-ui, sans-serif',\n            },\n            ...nodeSx,\n          ]}\n        >\n          {'</> Custom HTML — add markup in the attributes panel'}\n        </Box>\n      )\n    }\n\n    if (embedMode) {\n      return (\n        <Box ref={ref} {...rest}>\n          {!hostId ? (\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              {'Embed (sandboxed iframe) — runs on the live site'}\n            </Typography>\n          ) : null}\n          <iframe\n            title=\"Embedded content\"\n            sandbox=\"allow-scripts allow-popups\"\n            srcDoc={html}\n            style={{\n              width: '100%',\n              height: `${Math.max(40, embedHeight ?? 320)}px`,\n              border: 0,\n            }}\n          />\n        </Box>\n      )\n    }\n\n    return (\n      <Box ref={ref} {...rest}>\n        {/* AGL-1725: the `css` attribute never reached DOMPurify — that\n            policy covers `html` only — so this <style> block was the one\n            surface on a published site where an author's raw CSS shipped to\n            every visitor unexamined. `sanitizeAuthorCss` refuses schemes\n            that cannot be defended (http:, and anything not https/data/blob)\n            and deliberately leaves the HOST alone; see the module header on\n            why AGL-1701's input restriction does not transfer to a site\n            owner styling their own site. */}\n        {css ? <style>{Aglyn.sanitizeAuthorCss(css)}</style> : null}\n        {/* Sanitized above on every render — see sanitizeCustomHtml. */}\n        <div dangerouslySetInnerHTML={{ __html: sanitized }} />\n      </Box>\n    )\n  },\n)\nCustomHtml.displayName = 'AglynCustomHtml'\n\nexport const schema: Aglyn.ComponentSchema<CustomHtmlProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Custom HTML',\n  description:\n    'Your own markup, sanitised on render, or isolated in a sandboxed iframe.',\n  category: Aglyn.ComponentCategory.DATA_DISPLAY,\n  icon: { path: mdiCodeTags.path, sx: { color: '#7b1fa2' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'html',\n      label: 'HTML',\n      description:\n        'Sanitized on every render: scripts, iframes, and on* handlers ' +\n        'are stripped. Use Embed mode for third-party widgets.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'css',\n      label: 'CSS',\n      // AGL-1725 — the \"warn\" half of warn-and-disclose. An author can only\n      // weigh this egress if they are told it exists, and the attributes\n      // panel is where they are typing the url().\n      description:\n        'Injected as a style tag — keep selectors specific. A url() ' +\n        'pointing off your site makes every visitor’s browser contact that ' +\n        'host, which sees their IP address and which page they are on. ' +\n        'Insecure http:// URLs are not loaded.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'embedMode',\n      label: 'Embed mode (sandboxed)',\n      description:\n        'Runs the raw snippet in a sandboxed iframe (scripts allowed, no ' +\n        'access to your site or visitor data). For third-party widgets.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'embedHeight',\n      label: 'Embed height (px)',\n      description: 'Iframe height in embed mode (default 320).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Custom HTML',\n    pluginId: BUNDLE_ID,\n    description: 'Sanitized markup block, with a sandboxed embed mode',\n    category: Aglyn.ComponentCategory.DATA_DISPLAY,\n    icon: { path: mdiCodeTags.path, sx: { color: '#7b1fa2' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { html: '<p>Hello from custom HTML</p>' },\n    },\n  },\n]\n\nexport default CustomHtml\n"],"names":["Aglyn","mdiCodeTags","Box","Typography","forwardRef","useContext","BUNDLE_ID","generatePresetId","ID","sanitizeCustomHtml","html","sanitizeAuthorHtml","CustomHtml","props","ref","css","embedMode","embedHeight","rest","nodeSx","Array","isArray","hostId","useSite","suppressNavigation","ScreenLinkContext","sanitized","trim","sx","p","border","borderColor","borderRadius","color","fontSize","fontFamily","variant","iframe","title","sandbox","srcDoc","style","width","height","Math","max","sanitizeAuthorCss","div","dangerouslySetInnerHTML","__html","displayName","schema","$id","pluginId","description","category","ComponentCategory","DATA_DISPLAY","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","label","component","FieldComponentType","TEXT_FIELD","CHECKBOX","type","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/data-table.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+export declare const DATA_TABLE_ID: Aglyn.ComponentId;
+export interface DataTableProps {
+    /**
+     * The grid, pipe-delimited, one row per line — and its column alignment,
+     * as a markdown divider row. See `@aglyn/shared-data-enums`'s `data-table` utilities.
+     */
+    rows?: string;
+    /** Render the first row as a header. */
+    headerRow?: boolean;
+    /** 1-based column to emphasise, or 0/absent for none. */
+    emphasizeColumn?: number | string;
+}
+/**
+ * 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.
+ */
+declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DataTable;
+export declare const dataTableSchema: Aglyn.ComponentSchema<DataTableProps>;
+export declare const dataTablePresets: Aglyn.PresetSchema[];