@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/image.js

@@ -0,0 +1,451 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiImage } from "@aglyn/shared-data-mdi";
+import { AppLink } from "@aglyn/shared-ui-jsx";
+import Box from "@mui/material/Box";
+import { forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'image';
+/**
+ * The node ids of the images that load eagerly: the first image the LAYOUT
+ * chain renders and the first image the SCREEN renders, each in document
+ * order (AGL-2486).
+ *
+ * Every image used to render `loading="lazy"` — the hero included. That is
+ * the worst possible default for the one image that is almost always the LCP
+ * element: a lazy image is not fetched until layout has run and the browser
+ * has decided it is near the viewport, and it is fetched at LOW priority when
+ * it finally is. Lighthouse reports that as "LCP request discovery", and it is
+ * also why an image four sections down could finish before the one the reader
+ * is looking at: with everything lazy and everything low, nothing outranked
+ * anything, so the order was whatever the network felt like.
+ *
+ * So the lead images get `loading="eager"` and the rest get
+ * `fetchpriority="low"`, which is the browser-level knob that stops
+ * below-the-fold images competing with the ones above them.
+ *
+ * ONE lead image was not enough. On any site whose header carries a logo, the
+ * first image in document order is that logo, so the screen's own hero — the
+ * element Lighthouse names as the LCP on aglyn.com's solution pages at
+ * 375x812 — stayed `lazy` + `low`: undiscovered until layout, then fetched
+ * behind every script on the page (measured 2026-09-08: 1.5 s of load delay
+ * and 1.5 s of load time for a 13 KB image). Composition namespaces layout
+ * nodes by origin ({@link Aglyn.isLayoutComposedNodeId}), so the walk keeps
+ * one lead PER ORIGIN: the layout's first image (the logo) and the screen's
+ * first image (the hero). A layout image further down — a mega-menu
+ * illustration, the footer mark — is still deferred, as is every later
+ * screen image. In the besigner canvas nothing is layout-composed, so the
+ * screen's first image is the only lead, exactly as before.
+ *
+ * Neither lead gets `fetchpriority="high"`, and the reasoning is at the
+ * `fetchPriority` prop below. Short version: "first image of its origin" is
+ * still not "the LCP element", and a ranking claim needs evidence this
+ * function does not have.
+ *
+ * Resolved from the tree rather than a render-order counter on purpose: the
+ * renderer walks the tree in document order on the server AND on hydrate, but
+ * a mutable counter would double-count under React's concurrent re-renders
+ * and hand the priority to a different image on the client than the one the
+ * HTML gave it. A pure function of the tree cannot disagree with itself — and
+ * it is deliberately NOT memoized on the root object, because the canvas
+ * mutates that tree in place while an author works.
+ *
+ * The walk STOPS once both leads are known — on a page with a header logo
+ * and a hero that is O(nodes above the hero), a dozen or two on a normal
+ * page — and at the first image on a screen with no layout.
+ *
+ * An image with no `src` renders a placeholder box and no `<img>` at all, so
+ * it cannot be the LCP element and is skipped.
+ */ export function leadImageNodeIds(root) {
+    let layoutLead;
+    let screenLead;
+    const walk = (node)=>{
+        var _node_children;
+        if (!node) return false;
+        if (node.componentId === ID) {
+            var _ref, _node_resolvedProps, _props_src;
+            const props = (_ref = (_node_resolvedProps = node.resolvedProps) != null ? _node_resolvedProps : node.props) != null ? _ref : {};
+            if (String((_props_src = props['src']) != null ? _props_src : '').trim()) {
+                if (Aglyn.isLayoutComposedNodeId(node.$id)) {
+                    if (!layoutLead) layoutLead = node.$id;
+                } else if (!screenLead) {
+                    screenLead = node.$id;
+                }
+                if (layoutLead && screenLead) return true;
+            }
+        }
+        for (const child of (_node_children = node.children) != null ? _node_children : []){
+            if (walk(child)) return true;
+        }
+        return false;
+    };
+    walk(root);
+    return [
+        layoutLead,
+        screenLead
+    ].filter((id)=>Boolean(id));
+}
+/**
+ * Image element (AGL-74): renders a plain img with fit/size/radius
+ * controls; an empty src shows a labeled placeholder so the element stays
+ * visible and selectable in the editor.
+ */ const Image = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { src: storedSrc, alt, decorative, title, loading, objectFit, width, height, intrinsicWidth, intrinsicHeight, radius, screenId, href: externalHref, // Never forward children to the <img> below — React throws on ANY
+    // children value reaching a void element, which 500'd whole pages
+    // when a renderer passed empty JSX children through (AGL-579).
+    children: _children, // Pull `sx` out of the spread: the literals below are composed AFTER
+    // `{...rest}`, so leaving it there REPLACED every style the author set
+    // from the Styles panel. The hero mockups' 16px radius and drop shadow
+    // were being discarded on every published page (AGL-1240).
+    sx: nodeSxProp } = props, rest = _object_without_properties_loose(props, [
+        "src",
+        "alt",
+        "decorative",
+        "title",
+        "loading",
+        "objectFit",
+        "width",
+        "height",
+        "intrinsicWidth",
+        "intrinsicHeight",
+        "radius",
+        "screenId",
+        "href",
+        "children",
+        "sx"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(nodeSxProp) ? nodeSxProp : nodeSxProp ? [
+        nodeSxProp
+    ] : [];
+    // Optional link mode (AGL-339): screen id first (rename-safe), external
+    // URL as fallback; suppressed in the besigner canvas like Screen Link.
+    // Shared with every other linking element since AGL-1335, so a `Link`
+    // component prop bound here behaves as it does on a Button.
+    const { href: linkHref, suppressNavigation } = Aglyn.useLinkTarget(screenId, externalHref);
+    /**
+   * Eagerness (AGL-2486). An explicit author choice always wins — including
+   * an explicit `lazy`, so someone who deliberately deferred the top image
+   * keeps that. Only an UNSET `loading` is decided here, and only for the
+   * lead images: the layout's first and the screen's first.
+   *
+   * `leafIdsMatch` rather than `===`: a reusable component instance suffixes
+   * its leaf ids, so the id in the tree and the id in the context are the
+   * same leaf spelled two ways (the markdown block resolves the same way).
+   */ const nodeId = Aglyn.useNodeId();
+    const isLeadImage = Boolean(nodeId) && leadImageNodeIds(Aglyn.canvas.rootNode).some((leadId)=>Aglyn.leafIdsMatch(leadId, nodeId));
+    const eager = loading === 'eager' || loading == null && isLeadImage;
+    /**
+   * Resolve the stored value to a URL (AGL-1215). A media reference becomes
+   * a CDN URL here rather than in the document, so the route shape stays an
+   * app concern; every other value — a legacy firebasestorage URL, a legacy
+   * `/api/media/cdn/…` path, an author-typed hotlink — passes through.
+   *
+   * `useSite().hostId` is the site being rendered: present on the tenant and
+   * in Preview, absent in the besigner canvas. When it is there it names the
+   * asking site in the org scope, which is what lets ONE reference in a
+   * layout or reusable component resolve on each site that uses it.
+   */ const { hostId } = Aglyn.useSite();
+    const src = Aglyn.resolveMediaSrc(storedSrc, {
+        hostId
+    });
+    const wrapLink = (element)=>linkHref && !suppressNavigation ? /*#__PURE__*/ _jsx(AppLink, {
+            componentVariant: "naked",
+            href: linkHref,
+            style: {
+                display: 'block'
+            },
+            children: element
+        }) : element;
+    if (!src) {
+        // The labeled box 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, {
+            sx: nodeSx
+        }));
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    width: width || '100%',
+                    height: height || 120,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: radius != null ? `${radius}px` : undefined,
+                    color: 'text.secondary',
+                    fontSize: 12,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Image — choose a source'
+        }));
+    }
+    // CDN URLs (AGL-175) carry WebP variants selected by `?w=`; widths
+    // without a variant fall back to the original server-side, so a static
+    // srcSet is safe for any CDN-form URL. Asked of the RESOLVED url, so a
+    // reference and a legacy stored path both keep their WebP variants.
+    const isCdnUrl = Aglyn.isMediaCdnUrl(src);
+    /** A CSS width that is a plain pixel value, and therefore a real `sizes`. */ const pinnedWidth = /^\d+(?:\.\d+)?px$/.test(String(width != null ? width : '').trim()) ? String(width).trim() : undefined;
+    /**
+   * The intrinsic attribute pair, or nothing.
+   *
+   * Both-or-neither: the browser derives an aspect-ratio only from the pair,
+   * and a lone `width` is read as a real dimension instead — which would
+   * reserve a box of the wrong shape rather than no box at all. Finite and
+   * positive because a media document may carry `0` or a partial capture
+   * (dimensions are best-effort at upload), and `width="0"` collapses the
+   * element.
+   */ const usable = (value)=>typeof value === 'number' && Number.isFinite(value) && value > 0;
+    const intrinsicAttributes = usable(intrinsicWidth) && usable(intrinsicHeight) ? {
+        width: intrinsicWidth,
+        height: intrinsicHeight
+    } : undefined;
+    return wrapLink(/*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref,
+        component: "img",
+        src: src,
+        // EVERY CANDIDATE IS A `?w=` URL, and the bare one is gone (2026-08-26).
+        // Why that is worth 335 KB against 4 KB, and why each candidate merges
+        // its width into the url's existing query, are documented where the list
+        // and the builder live — `MEDIA_CDN_VARIANT_WIDTHS` and `mediaCdnSrcSet`
+        // in `media-ref.ts`.
+        //
+        // Called rather than restated so the Markdown and entry-body renderers
+        // can ask for the same list (AGL-3149). Building it here is the reason
+        // they had none: a candidate list inside a component is a candidate list
+        // no other component can have.
+        srcSet: Aglyn.mediaCdnSrcSet(src),
+        // `sizes` is NOT only a delivery hint, and treating it as one broke every
+        // fluid image (AGL-2486). With `w` descriptors the browser derives the
+        // image's density-corrected INTRINSIC size from `sizes`, so `sizes` is
+        // what a CSS `width: 100%` resolves against whenever the containing block
+        // is content-sized — shrink-to-fit, inline-block, a flex item sized on its
+        // content. Measured in Chrome at a 1200px viewport with the author CSS
+        // `width:100%;height:auto;display:block`:
+        //
+        //   parent                        sizes=100vw   sizes=auto
+        //   inline-block (shrink-to-fit)     1184px        300px
+        //   block / fixed-width flex          900px        900px
+        //
+        // 300px is the spec's default object size, used because resolving `auto`
+        // against a content-sized parent is circular. So `sizes="auto"` — which
+        // genuinely does pick a better candidate, `?w=320` instead of a 357 KB
+        // original in a 158px slot — rendered those images tiny and centred in
+        // their box, on the canvas, in _preview and on published sites alike.
+        //
+        // A delivery win may not be paid for in layout, so this is back to
+        // `100vw`: it overfetches, but it is the value every published document
+        // was authored against. A pinned pixel width is still the better answer
+        // where the author gave one, because it is a definite length and cannot
+        // be circular. Getting image delivery right for fluid images needs the
+        // media pipeline (a WebP variant at source width) or real intrinsic
+        // `width`/`height` attributes from media metadata — neither of which
+        // perturbs layout the way `sizes` does.
+        sizes: isCdnUrl ? pinnedWidth != null ? pinnedWidth : '100vw' : undefined,
+        // Unset alt keeps rendering `alt=""` exactly as it always has —
+        // existing documents must not change output (AGL-1305). Decorative
+        // ON forces `alt=""` over any alt text and suppresses the tooltip,
+        // so the a11y intent is explicit rather than an accident of blank.
+        alt: decorative ? '' : alt != null ? alt : '',
+        title: decorative ? undefined : title || undefined
+    }, eager ? {
+        loading: 'eager'
+    } : Aglyn.DEFERRED_IMAGE_ATTRIBUTES, intrinsicAttributes, rest, {
+        sx: [
+            {
+                display: 'block',
+                width: width || '100%',
+                height: height || 'auto',
+                objectFit: objectFit || 'cover',
+                borderRadius: radius != null ? `${radius}px` : undefined
+            },
+            ...nodeSx
+        ]
+    })));
+});
+Image.displayName = 'Image';
+/** Alt text and tooltip make no sense on an explicitly decorative image. */ const NOT_DECORATIVE = {
+    when: 'decorative',
+    is: true,
+    notMatch: true
+};
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Image',
+    description: 'A picture from your media library or any URL, with fit, size and an optional link.',
+    category: Aglyn.ComponentCategory.MEDIA,
+    icon: {
+        path: mdiImage.path,
+        sx: {
+            color: '#7b1fa2'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'src',
+            // "Browse media" is the path an author should take (AGL-1215) — it
+            // stores a reference to the asset, which survives moves, replaces and
+            // any future change to how media is delivered. Typing a URL stays
+            // supported for hotlinking somebody else's image; nobody should ever
+            // be pasting one of OUR paths in here.
+            description: 'Pick from your media library with "Browse media", or paste the ' + 'URL of an image hosted somewhere else.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Image source'
+        },
+        {
+            name: 'alt',
+            // AGL-1896: "Browse media" now fills this in from the asset's own alt
+            // text when it is empty, so the description says where the value came
+            // from — otherwise a field that populates itself reads as a bug.
+            description: 'Describes the image for screen readers and search engines. ' + 'Filled in from the media library when you pick a file that has ' + 'alt text; anything you type here wins for this placement only.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Alt text',
+            // Hidden while Decorative is on — the renderer forces alt="" then,
+            // but the text is kept on the node so toggling back restores it.
+            condition: NOT_DECORATIVE
+        },
+        {
+            name: 'decorative',
+            description: 'Turn on when the image is purely decorative so screen readers ' + 'skip it — no alt text is needed then.',
+            component: Aglyn.FieldComponentType.SWITCH,
+            label: 'Decorative image'
+        },
+        {
+            name: 'title',
+            description: 'Optional tooltip shown when a visitor hovers over the image.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Tooltip',
+            condition: NOT_DECORATIVE
+        },
+        {
+            name: 'objectFit',
+            description: 'How the image fills its box.',
+            component: Aglyn.FieldComponentType.SELECT,
+            label: 'Fit',
+            // Both selects on this element take real sentinels (AGL-1451):
+            // `cover` and `lazy` are members of their own declared prop unions
+            // and the values the render already falls back to. As `''` neither
+            // could persist (AGL-1191) — an image switched to Contain or Eager
+            // could not be switched back.
+            options: [
+                {
+                    value: 'cover',
+                    label: 'Cover (default)'
+                },
+                {
+                    value: 'contain',
+                    label: 'Contain'
+                },
+                {
+                    value: 'fill',
+                    label: 'Fill'
+                },
+                {
+                    value: 'none',
+                    label: 'None'
+                },
+                {
+                    value: 'scale-down',
+                    label: 'Scale down'
+                }
+            ]
+        },
+        {
+            name: 'width',
+            description: 'Width of the image — a number plus a unit, e.g. 100% or 320px.',
+            component: Aglyn.FieldComponentType.CSS_DIMENSION,
+            label: 'Width'
+        },
+        {
+            name: 'height',
+            description: 'Height of the image. Leave empty for auto.',
+            component: Aglyn.FieldComponentType.CSS_DIMENSION,
+            label: 'Height'
+        },
+        {
+            name: 'loading',
+            description: 'Lazy waits to load the image until a visitor scrolls near it; ' + 'pick Eager for the first image at the top of a screen so it ' + 'shows immediately.',
+            component: Aglyn.FieldComponentType.SELECT,
+            label: 'Loading',
+            options: [
+                {
+                    value: 'lazy',
+                    label: 'Lazy (default)'
+                },
+                {
+                    value: 'eager',
+                    label: 'Eager'
+                }
+            ]
+        },
+        {
+            name: 'screenId',
+            description: 'Optional: navigate to this screen when the image is clicked — ' + 'follows the published path like a Screen Link.',
+            component: Aglyn.FieldComponentType.SCREEN_SELECT,
+            label: 'Link to screen'
+        },
+        {
+            name: 'href',
+            description: 'Makes the image a link to somewhere off this site. Ignored while ' + 'Link to screen names one. Leave both blank and the image is not ' + 'clickable at all.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'External URL',
+            // A bare `#fragment` saves and goes nowhere (AGL-2867).
+            resolveProps: Aglyn.bareFragmentLinkFieldProps
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Image',
+        pluginId: BUNDLE_ID,
+        description: 'Image from your media library or any URL',
+        category: Aglyn.ComponentCategory.MEDIA,
+        icon: {
+            path: mdiImage.path,
+            sx: {
+                color: '#7b1fa2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+export default Image;
+
+//# sourceMappingURL=image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/image.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 { mdiImage } from '@aglyn/shared-data-mdi'\nimport { AppLink } from '@aglyn/shared-ui-jsx'\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { forwardRef, type ReactNode } 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 = 'image'\n\n/**\n * The node ids of the images that load eagerly: the first image the LAYOUT\n * chain renders and the first image the SCREEN renders, each in document\n * order (AGL-2486).\n *\n * Every image used to render `loading=\"lazy\"` — the hero included. That is\n * the worst possible default for the one image that is almost always the LCP\n * element: a lazy image is not fetched until layout has run and the browser\n * has decided it is near the viewport, and it is fetched at LOW priority when\n * it finally is. Lighthouse reports that as \"LCP request discovery\", and it is\n * also why an image four sections down could finish before the one the reader\n * is looking at: with everything lazy and everything low, nothing outranked\n * anything, so the order was whatever the network felt like.\n *\n * So the lead images get `loading=\"eager\"` and the rest get\n * `fetchpriority=\"low\"`, which is the browser-level knob that stops\n * below-the-fold images competing with the ones above them.\n *\n * ONE lead image was not enough. On any site whose header carries a logo, the\n * first image in document order is that logo, so the screen's own hero — the\n * element Lighthouse names as the LCP on aglyn.com's solution pages at\n * 375x812 — stayed `lazy` + `low`: undiscovered until layout, then fetched\n * behind every script on the page (measured 2026-09-08: 1.5 s of load delay\n * and 1.5 s of load time for a 13 KB image). Composition namespaces layout\n * nodes by origin ({@link Aglyn.isLayoutComposedNodeId}), so the walk keeps\n * one lead PER ORIGIN: the layout's first image (the logo) and the screen's\n * first image (the hero). A layout image further down — a mega-menu\n * illustration, the footer mark — is still deferred, as is every later\n * screen image. In the besigner canvas nothing is layout-composed, so the\n * screen's first image is the only lead, exactly as before.\n *\n * Neither lead gets `fetchpriority=\"high\"`, and the reasoning is at the\n * `fetchPriority` prop below. Short version: \"first image of its origin\" is\n * still not \"the LCP element\", and a ranking claim needs evidence this\n * function does not have.\n *\n * Resolved from the tree rather than a render-order counter on purpose: the\n * renderer walks the tree in document order on the server AND on hydrate, but\n * a mutable counter would double-count under React's concurrent re-renders\n * and hand the priority to a different image on the client than the one the\n * HTML gave it. A pure function of the tree cannot disagree with itself — and\n * it is deliberately NOT memoized on the root object, because the canvas\n * mutates that tree in place while an author works.\n *\n * The walk STOPS once both leads are known — on a page with a header logo\n * and a hero that is O(nodes above the hero), a dozen or two on a normal\n * page — and at the first image on a screen with no layout.\n *\n * An image with no `src` renders a placeholder box and no `<img>` at all, so\n * it cannot be the LCP element and is skipped.\n */\nexport function leadImageNodeIds(\n  root: Aglyn.NodeSchema | undefined,\n): readonly string[] {\n  let layoutLead: string | undefined\n  let screenLead: string | undefined\n  const walk = (node: Aglyn.NodeSchema | undefined): boolean => {\n    if (!node) return false\n    if (node.componentId === ID) {\n      const props = (node.resolvedProps ?? node.props ?? {}) as Record<\n        string,\n        unknown\n      >\n      if (String(props['src'] ?? '').trim()) {\n        if (Aglyn.isLayoutComposedNodeId(node.$id)) {\n          if (!layoutLead) layoutLead = node.$id\n        } else if (!screenLead) {\n          screenLead = node.$id\n        }\n        if (layoutLead && screenLead) return true\n      }\n    }\n    for (const child of node.children ?? []) {\n      if (walk(child)) return true\n    }\n    return false\n  }\n  walk(root)\n  return [layoutLead, screenLead].filter((id): id is string => Boolean(id))\n}\n\nexport interface ImageProps {\n  /**\n   * Where the image comes from (AGL-72). Either a **media reference** —\n   * `media:{scope}/{mediaId}`, what \"Browse media\" now stores (AGL-1215) —\n   * or any URL, which covers both the legacy values already in published\n   * documents and an author-typed hotlink. `resolveMediaSrc` decides.\n   */\n  src?: string\n  alt?: string\n  /**\n   * Explicit decorative choice (AGL-1305): ON forces `alt=\"\"` (and drops\n   * the tooltip) no matter what the alt field says, so screen readers skip\n   * the image. Distinct from simply leaving alt unset, which also renders\n   * `alt=\"\"` today but records no intent.\n   */\n  decorative?: boolean\n  /** Tooltip shown on hover — the native img `title` attribute. */\n  title?: string\n  /** Native loading hint; unset stays lazy, exactly as before AGL-1305. */\n  loading?: 'lazy' | 'eager'\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\n  /** CSS width (e.g. \"100%\", \"320px\"); defaults to 100%. */\n  width?: string\n  /** CSS height (e.g. \"240px\"); defaults to auto. */\n  height?: string\n  /**\n   * The asset's own pixel dimensions, copied off the media document when the\n   * image was picked (AGL-2486), and read from the asset again when the page\n   * is composed, so a replace with a different shape reaches every page that\n   * places it (AGL-2833).\n   *\n   * NOT author controls, which is why neither appears in the schema below:\n   * they describe the file, and the CSS `width`/`height` above describe the\n   * placement. The pair becomes the `<img>`'s intrinsic `width`/`height`\n   * attributes, which is the only thing that lets the browser reserve the\n   * right box before the bytes arrive — with `width: 100%; height: auto` the\n   * element is otherwise zero-height until the image decodes, and every image\n   * on the page shifts the layout as it lands.\n   *\n   * An attribute pair is a RATIO here, not a size: CSS wins for the used\n   * dimensions either way, so a stale value costs nothing but a reservation\n   * of the wrong shape. Both must be present and positive or neither is\n   * emitted — one alone gives the browser no ratio and would be read as a\n   * real dimension.\n   *\n   * Read from the node like any other prop, so this element never fetches a\n   * media document: the composition has already laid the asset's current\n   * pair over the pick's (`media-asset-facts.ts`), and the pick's copy is\n   * what renders wherever that read cannot answer. `srcSet` still selects\n   * which variant is downloaded; these only say what shape it will be.\n   */\n  intrinsicWidth?: number\n  /** See `intrinsicWidth` — the two are only ever used as a pair. */\n  intrinsicHeight?: number\n  /** Border radius in px. */\n  radius?: number\n  /** Target screen id — resolved rename-safe like Screen Link (AGL-339). */\n  screenId?: string\n  /** External URL, used only when no `screenId` is set. */\n  href?: string\n  /**\n   * Authored node styles, handed over by the renderer rather than typed into\n   * an attribute — recomposed below so the author's Styles-panel values are\n   * merged rather than replaced (AGL-1240).\n   */\n  sx?: SxProps\n  /**\n   * Accepted and dropped: an `<img>` is a void element and React throws on\n   * ANY children value reaching one, which 500'd whole pages (AGL-579).\n   * Declared because the implementation deliberately discards it (AGL-1323).\n   */\n  children?: ReactNode\n}\n\n/**\n * Image element (AGL-74): renders a plain img with fit/size/radius\n * controls; an empty src shows a labeled placeholder so the element stays\n * visible and selectable in the editor.\n */\nconst Image = forwardRef<HTMLElement, ImageProps>((props, ref) => {\n  const {\n    src: storedSrc,\n    alt,\n    decorative,\n    title,\n    loading,\n    objectFit,\n    width,\n    height,\n    intrinsicWidth,\n    intrinsicHeight,\n    radius,\n    screenId,\n    href: externalHref,\n    // Never forward children to the <img> below — React throws on ANY\n    // children value reaching a void element, which 500'd whole pages\n    // when a renderer passed empty JSX children through (AGL-579).\n    children: _children,\n    // Pull `sx` out of the spread: the literals below are composed AFTER\n    // `{...rest}`, so leaving it there REPLACED every style the author set\n    // from the Styles panel. The hero mockups' 16px radius and drop shadow\n    // were being discarded on every published page (AGL-1240).\n    sx: nodeSxProp,\n    ...rest\n  } = props\n  // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n  const nodeSx = Array.isArray(nodeSxProp)\n    ? nodeSxProp\n    : nodeSxProp\n      ? [nodeSxProp]\n      : []\n  // Optional link mode (AGL-339): screen id first (rename-safe), external\n  // URL as fallback; suppressed in the besigner canvas like Screen Link.\n  // Shared with every other linking element since AGL-1335, so a `Link`\n  // component prop bound here behaves as it does on a Button.\n  const { href: linkHref, suppressNavigation } = Aglyn.useLinkTarget(\n    screenId,\n    externalHref,\n  )\n  /**\n   * Eagerness (AGL-2486). An explicit author choice always wins — including\n   * an explicit `lazy`, so someone who deliberately deferred the top image\n   * keeps that. Only an UNSET `loading` is decided here, and only for the\n   * lead images: the layout's first and the screen's first.\n   *\n   * `leafIdsMatch` rather than `===`: a reusable component instance suffixes\n   * its leaf ids, so the id in the tree and the id in the context are the\n   * same leaf spelled two ways (the markdown block resolves the same way).\n   */\n  const nodeId = Aglyn.useNodeId()\n  const isLeadImage =\n    Boolean(nodeId) &&\n    leadImageNodeIds(Aglyn.canvas.rootNode).some((leadId) =>\n      Aglyn.leafIdsMatch(leadId, nodeId),\n    )\n  const eager = loading === 'eager' || (loading == null && isLeadImage)\n  /**\n   * Resolve the stored value to a URL (AGL-1215). A media reference becomes\n   * a CDN URL here rather than in the document, so the route shape stays an\n   * app concern; every other value — a legacy firebasestorage URL, a legacy\n   * `/api/media/cdn/…` path, an author-typed hotlink — passes through.\n   *\n   * `useSite().hostId` is the site being rendered: present on the tenant and\n   * in Preview, absent in the besigner canvas. When it is there it names the\n   * asking site in the org scope, which is what lets ONE reference in a\n   * layout or reusable component resolve on each site that uses it.\n   */\n  const { hostId } = Aglyn.useSite()\n  const src = Aglyn.resolveMediaSrc(storedSrc, { hostId })\n  const wrapLink = (element: JSX.Element) =>\n    linkHref && !suppressNavigation ? (\n      <AppLink\n        componentVariant=\"naked\"\n        href={linkHref}\n        style={{ display: 'block' }}\n      >\n        {element}\n      </AppLink>\n    ) : (\n      element\n    )\n  if (!src) {\n    // The labeled box 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} sx={nodeSx} />\n    return (\n      <Box\n        ref={ref}\n        {...rest}\n        sx={[\n          {\n            width: width || '100%',\n            height: height || 120,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            border: '1px dashed',\n            borderColor: 'divider',\n            borderRadius: radius != null ? `${radius}px` : undefined,\n            color: 'text.secondary',\n            fontSize: 12,\n            fontFamily: 'system-ui, sans-serif',\n          },\n          ...nodeSx,\n        ]}\n      >\n        {'Image — choose a source'}\n      </Box>\n    )\n  }\n  // CDN URLs (AGL-175) carry WebP variants selected by `?w=`; widths\n  // without a variant fall back to the original server-side, so a static\n  // srcSet is safe for any CDN-form URL. Asked of the RESOLVED url, so a\n  // reference and a legacy stored path both keep their WebP variants.\n  const isCdnUrl = Aglyn.isMediaCdnUrl(src)\n  /** A CSS width that is a plain pixel value, and therefore a real `sizes`. */\n  const pinnedWidth = /^\\d+(?:\\.\\d+)?px$/.test(String(width ?? '').trim())\n    ? String(width).trim()\n    : undefined\n  /**\n   * The intrinsic attribute pair, or nothing.\n   *\n   * Both-or-neither: the browser derives an aspect-ratio only from the pair,\n   * and a lone `width` is read as a real dimension instead — which would\n   * reserve a box of the wrong shape rather than no box at all. Finite and\n   * positive because a media document may carry `0` or a partial capture\n   * (dimensions are best-effort at upload), and `width=\"0\"` collapses the\n   * element.\n   */\n  const usable = (value: unknown): value is number =>\n    typeof value === 'number' && Number.isFinite(value) && value > 0\n  const intrinsicAttributes =\n    usable(intrinsicWidth) && usable(intrinsicHeight)\n      ? { width: intrinsicWidth, height: intrinsicHeight }\n      : undefined\n  return wrapLink(\n    <Box\n      ref={ref}\n      component=\"img\"\n      src={src}\n      // EVERY CANDIDATE IS A `?w=` URL, and the bare one is gone (2026-08-26).\n      // Why that is worth 335 KB against 4 KB, and why each candidate merges\n      // its width into the url's existing query, are documented where the list\n      // and the builder live — `MEDIA_CDN_VARIANT_WIDTHS` and `mediaCdnSrcSet`\n      // in `media-ref.ts`.\n      //\n      // Called rather than restated so the Markdown and entry-body renderers\n      // can ask for the same list (AGL-3149). Building it here is the reason\n      // they had none: a candidate list inside a component is a candidate list\n      // no other component can have.\n      srcSet={Aglyn.mediaCdnSrcSet(src)}\n      // `sizes` is NOT only a delivery hint, and treating it as one broke every\n      // fluid image (AGL-2486). With `w` descriptors the browser derives the\n      // image's density-corrected INTRINSIC size from `sizes`, so `sizes` is\n      // what a CSS `width: 100%` resolves against whenever the containing block\n      // is content-sized — shrink-to-fit, inline-block, a flex item sized on its\n      // content. Measured in Chrome at a 1200px viewport with the author CSS\n      // `width:100%;height:auto;display:block`:\n      //\n      //   parent                        sizes=100vw   sizes=auto\n      //   inline-block (shrink-to-fit)     1184px        300px\n      //   block / fixed-width flex          900px        900px\n      //\n      // 300px is the spec's default object size, used because resolving `auto`\n      // against a content-sized parent is circular. So `sizes=\"auto\"` — which\n      // genuinely does pick a better candidate, `?w=320` instead of a 357 KB\n      // original in a 158px slot — rendered those images tiny and centred in\n      // their box, on the canvas, in _preview and on published sites alike.\n      //\n      // A delivery win may not be paid for in layout, so this is back to\n      // `100vw`: it overfetches, but it is the value every published document\n      // was authored against. A pinned pixel width is still the better answer\n      // where the author gave one, because it is a definite length and cannot\n      // be circular. Getting image delivery right for fluid images needs the\n      // media pipeline (a WebP variant at source width) or real intrinsic\n      // `width`/`height` attributes from media metadata — neither of which\n      // perturbs layout the way `sizes` does.\n      sizes={isCdnUrl ? (pinnedWidth ?? '100vw') : undefined}\n      // Unset alt keeps rendering `alt=\"\"` exactly as it always has —\n      // existing documents must not change output (AGL-1305). Decorative\n      // ON forces `alt=\"\"` over any alt text and suppresses the tooltip,\n      // so the a11y intent is explicit rather than an accident of blank.\n      alt={decorative ? '' : (alt ?? '')}\n      title={decorative ? undefined : title || undefined}\n      // The ordering signal, ONE-DIRECTIONAL on purpose (AGL-2486).\n      //\n      // `low` on every deferred image, so a footer image cannot be fetched\n      // ahead of the section the reader is in. That half is safe in a way the\n      // other half is not: deprioritising an image that is provably not being\n      // looked at cannot starve whatever the LCP turns out to be.\n      //\n      // The lead image gets NO `fetchpriority` — the browser's `auto` — where\n      // it used to get `high`. `high` is not a statement about this image, it\n      // is a claim that this image outranks everything else in flight,\n      // including the stylesheet and the webfont that a TEXT LCP is waiting\n      // on. We are not in a position to make that claim: the only evidence\n      // behind it was \"first `<img>` in document order\", and document order's\n      // first image is the HEADER LOGO on any site whose header has one.\n      //\n      // Measured on aglyn.com at a 375x812 viewport, which is what sent this\n      // back: the element carrying `fetchpriority=\"high\"` was the logo at\n      // 145x44 = 6,380 px², while the `<h1>` under it was 343x113 =\n      // 38,893 px² — six times the area, and the element Lighthouse named as\n      // the LCP. So the hint was being spent to make a text LCP arrive later.\n      //\n      // `auto` is not a retreat to the old behaviour. The old bug was that\n      // everything was `lazy`, so the lead image was not discovered until\n      // after layout; it still gets `loading=\"eager\"` above, which is the\n      // discovery fix and the part that actually earned the win. What goes is\n      // only the RANKING claim, back to Chrome's own in-viewport heuristic —\n      // which decides after layout, with the viewport and the geometry this\n      // function provably does not have.\n      //\n      // Deliberately not replaced with a size heuristic: nothing here knows\n      // the rendered size. `width`/`height` are optional author CSS strings,\n      // routinely `100%`, and a logo constrained by its container measures\n      // small while declaring nothing. A guess that fails the same way is not\n      // an improvement on a guess.\n      //\n      // An author who genuinely has an image LCP should be able to SAY so —\n      // but not through this control. The `loading` field is labelled\n      // \"Loading\" and described in terms of lazy versus eager; an author\n      // picking Eager for the top image is not asserting a priority ranking,\n      // and reading one out of that choice is how the logo got `high` in the\n      // first place. A real priority affordance needs its own control and its\n      // own words. After September 1.\n      // Decoding off the main thread for the deferred ones — they have no\n      // paint deadline, and decoding them synchronously is main-thread time\n      // spent on pixels nobody is looking at yet. The eager image keeps the\n      // browser's default (`auto`) so it is free to decode in time to paint.\n      //\n      // The deferred set is `DEFERRED_IMAGE_ATTRIBUTES` rather than three\n      // literals because every OTHER `<img>` a published page renders has to\n      // land in the same rank to be ranked at all — a product grid, an event\n      // list, a cart line. Those carried no hint whatsoever and so were\n      // fetched EAGERLY, ahead of anything this component deferred. The set\n      // is documented at its definition; the reasoning for each member is\n      // the two paragraphs above and the two below.\n      {...(eager\n        ? { loading: 'eager' as const }\n        : Aglyn.DEFERRED_IMAGE_ATTRIBUTES)}\n      // Ahead of `{...rest}` so an author who has typed a literal width or\n      // height attribute onto the node still wins, and ahead of `sx` because\n      // these are ATTRIBUTES: the CSS block below sets the used size, and\n      // these only supply the ratio it is laid out against. `Box` in this\n      // version applies `styleFunctionSx` alone — it has no system-props\n      // layer — so both forward to the `<img>` rather than becoming CSS.\n      {...intrinsicAttributes}\n      {...rest}\n      sx={[\n        {\n          display: 'block',\n          width: width || '100%',\n          height: height || 'auto',\n          objectFit: objectFit || 'cover',\n          borderRadius: radius != null ? `${radius}px` : undefined,\n        },\n        ...nodeSx,\n      ]}\n    />,\n  )\n})\nImage.displayName = 'Image'\n\n/** Alt text and tooltip make no sense on an explicitly decorative image. */\nconst NOT_DECORATIVE = { when: 'decorative', is: true, notMatch: true }\n\nexport const schema: Aglyn.ComponentSchema<ImageProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Image',\n  description:\n    'A picture from your media library or any URL, with fit, size and an optional link.',\n  category: Aglyn.ComponentCategory.MEDIA,\n  icon: {\n    path: mdiImage.path,\n    sx: { color: '#7b1fa2' },\n  },\n  flags: {\n    selfClosing: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  attributes: [\n    {\n      name: 'src',\n      // \"Browse media\" is the path an author should take (AGL-1215) — it\n      // stores a reference to the asset, which survives moves, replaces and\n      // any future change to how media is delivered. Typing a URL stays\n      // supported for hotlinking somebody else's image; nobody should ever\n      // be pasting one of OUR paths in here.\n      description:\n        'Pick from your media library with \"Browse media\", or paste the ' +\n        'URL of an image hosted somewhere else.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Image source',\n    },\n    {\n      name: 'alt',\n      // AGL-1896: \"Browse media\" now fills this in from the asset's own alt\n      // text when it is empty, so the description says where the value came\n      // from — otherwise a field that populates itself reads as a bug.\n      description:\n        'Describes the image for screen readers and search engines. ' +\n        'Filled in from the media library when you pick a file that has ' +\n        'alt text; anything you type here wins for this placement only.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Alt text',\n      // Hidden while Decorative is on — the renderer forces alt=\"\" then,\n      // but the text is kept on the node so toggling back restores it.\n      condition: NOT_DECORATIVE,\n    },\n    {\n      name: 'decorative',\n      description:\n        'Turn on when the image is purely decorative so screen readers ' +\n        'skip it — no alt text is needed then.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Decorative image',\n    },\n    {\n      name: 'title',\n      description:\n        'Optional tooltip shown when a visitor hovers over the image.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Tooltip',\n      condition: NOT_DECORATIVE,\n    },\n    {\n      name: 'objectFit',\n      description: 'How the image fills its box.',\n      component: Aglyn.FieldComponentType.SELECT,\n      label: 'Fit',\n      // Both selects on this element take real sentinels (AGL-1451):\n      // `cover` and `lazy` are members of their own declared prop unions\n      // and the values the render already falls back to. As `''` neither\n      // could persist (AGL-1191) — an image switched to Contain or Eager\n      // could not be switched back.\n      options: [\n        { value: 'cover', label: 'Cover (default)' },\n        { value: 'contain', label: 'Contain' },\n        { value: 'fill', label: 'Fill' },\n        { value: 'none', label: 'None' },\n        { value: 'scale-down', label: 'Scale down' },\n      ],\n    },\n    {\n      name: 'width',\n      description:\n        'Width of the image — a number plus a unit, e.g. 100% or 320px.',\n      component: Aglyn.FieldComponentType.CSS_DIMENSION,\n      label: 'Width',\n    },\n    {\n      name: 'height',\n      description: 'Height of the image. Leave empty for auto.',\n      component: Aglyn.FieldComponentType.CSS_DIMENSION,\n      label: 'Height',\n    },\n    {\n      name: 'loading',\n      description:\n        'Lazy waits to load the image until a visitor scrolls near it; ' +\n        'pick Eager for the first image at the top of a screen so it ' +\n        'shows immediately.',\n      component: Aglyn.FieldComponentType.SELECT,\n      label: 'Loading',\n      options: [\n        { value: 'lazy', label: 'Lazy (default)' },\n        { value: 'eager', label: 'Eager' },\n      ],\n    },\n    {\n      name: 'screenId',\n      description:\n        'Optional: navigate to this screen when the image is clicked — ' +\n        'follows the published path like a Screen Link.',\n      component: Aglyn.FieldComponentType.SCREEN_SELECT,\n      label: 'Link to screen',\n    },\n    {\n      name: 'href',\n      description:\n        'Makes the image a link to somewhere off this site. Ignored while ' +\n        'Link to screen names one. Leave both blank and the image is not ' +\n        'clickable at all.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'External URL',\n      // A bare `#fragment` saves and goes nowhere (AGL-2867).\n      resolveProps: Aglyn.bareFragmentLinkFieldProps,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Image',\n    pluginId: BUNDLE_ID,\n    description: 'Image from your media library or any URL',\n    category: Aglyn.ComponentCategory.MEDIA,\n    icon: {\n      path: mdiImage.path,\n      sx: { color: '#7b1fa2' },\n    },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {},\n    },\n  },\n]\n\nexport default Image\n"],"names":["Aglyn","mdiImage","AppLink","Box","forwardRef","BUNDLE_ID","generatePresetId","ID","leadImageNodeIds","root","layoutLead","screenLead","walk","node","componentId","props","resolvedProps","String","trim","isLayoutComposedNodeId","$id","child","children","filter","id","Boolean","Image","ref","src","storedSrc","alt","decorative","title","loading","objectFit","width","height","intrinsicWidth","intrinsicHeight","radius","screenId","href","externalHref","_children","sx","nodeSxProp","rest","nodeSx","Array","isArray","linkHref","suppressNavigation","useLinkTarget","nodeId","useNodeId","isLeadImage","canvas","rootNode","some","leadId","leafIdsMatch","eager","hostId","useSite","resolveMediaSrc","wrapLink","element","componentVariant","style","display","alignItems","justifyContent","border","borderColor","borderRadius","undefined","color","fontSize","fontFamily","isCdnUrl","isMediaCdnUrl","pinnedWidth","test","usable","value","Number","isFinite","intrinsicAttributes","component","srcSet","mediaCdnSrcSet","sizes","DEFERRED_IMAGE_ATTRIBUTES","displayName","NOT_DECORATIVE","when","is","notMatch","schema","pluginId","description","category","ComponentCategory","MEDIA","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","FieldComponentType","TEXT_FIELD","label","condition","SWITCH","SELECT","options","CSS_DIMENSION","SCREEN_SELECT","resolveProps","bareFragmentLinkFieldProps","presets","type","NodeType","PRESET","data"],"mappings":"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"}

package/src/lib/components/inline-text.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @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;
+/**
+ * Inline elements the run may render as. An allow-list rather than a
+ * free-text field, for the same reason Box's is (AGL-1201): `element` is
+ * persisted and rendered verbatim into every visitor's page, so a typed
+ * value would let an author put `script`/`iframe` there.
+ *
+ * All five are phrasing content, so a run is always legal inside a
+ * paragraph — which is the whole point of the element.
+ */
+export declare const INLINE_TEXT_ELEMENTS: readonly ["span", "strong", "em", "mark", "small"];
+export type InlineTextElement = (typeof INLINE_TEXT_ELEMENTS)[number];
+export interface InlineTextProps {
+    /** The DOM element rendered; defaults to `span`. */
+    element?: InlineTextElement;
+    /** Palette token key from {@link TONE_COLOR}. */
+    tone?: string;
+    /** Named weight key from {@link FONT_WEIGHT}. */
+    weight?: string;
+    /** Decoration behaviour key from {@link DECORATION_SX}. */
+    decoration?: string;
+    /**
+     * 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 run (AGL-1323).
+     */
+    sx?: SxProps;
+    /**
+     * Sanitized emphasis markup for the run, written by the inline editor's
+     * rich mode (AGL-2557). `children` keeps the plain-text reading of it, and
+     * is what every surface that cannot render markup falls back to.
+     */
+    html?: string;
+    /** The text of this run; edited inline on the canvas. */
+    children?: ReactNode;
+}
+/**
+ * One run of text inside a sentence (AGL-1235).
+ *
+ * The gap this fills: `muiTypography` is `textEditable`, therefore a leaf —
+ * `nodeAcceptsChildren` reports false, so no span can be nested inside it.
+ * A statement whose argument lives in an emphasised phrase ("Aglyn commerce
+ * is **part of the platform**") could not be authored at all; the whole line
+ * was one flat colour.
+ *
+ * This is a leaf too, deliberately: the shape that renders correctly is a
+ * block container holding SIBLING inline runs, not a nested span. Sibling
+ * runs flow and wrap as a single paragraph, so the sentence breaks
+ * naturally with the emphasis landing in the right place. Drop a Box as
+ * `p`, then one of these per style change.
+ */
+declare const InlineText: import("react").ForwardRefExoticComponent<InlineTextProps & import("react").RefAttributes<HTMLElement>>;
+export declare const schema: Aglyn.ComponentSchema<InlineTextProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default InlineText;