@aglyn/plugins-mui 1.0.0-beta.223 → 1.0.0-beta.225

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

@@ -1 +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, type Theme, useTheme } from '@mui/material/styles'\nimport useForkRef from '@mui/utils/useForkRef'\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\nimport { imageSizes, layoutBandWidths } from '../utils/image-sizes'\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 * Only the SCREEN's lead can get `fetchpriority=\"high\"` and a preload, and\n * only when nothing says it renders small (AGL-3485); the reasoning is at the\n * `fetchPriority` prop below. The layout's lead is the header logo on any\n * site that has one, which is why \"first image\" alone was never evidence.\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\n/**\n * The breakpoint band the theme says is in effect. Asked of the THEME, not of\n * the window: the Besigner canvas pins its theme's breakpoint helpers to the\n * previewed device (`createDevicePinnedTheme`), so on a pinned device this is\n * the device's band, and in Fluid Responsive it is the window's — which is\n * the band the canvas's own layout is answering to either way.\n */\nfunction themeBand(theme: Theme): Aglyn.RenderedWidthBand {\n  if (typeof window === 'undefined' || !window.matchMedia) return 'xs'\n  for (const band of [...Aglyn.RENDERED_WIDTH_BANDS].reverse()) {\n    if (band === 'xs') break\n    const query = theme.breakpoints.up(band).replace(/^@media\\s*/, '')\n    if (window.matchMedia(query).matches) return band\n  }\n  return 'xs'\n}\n\n/**\n * The width of the page an element is laid out in. On the canvas that is the\n * shadow host the page renders into — narrower than the window, and the width\n * a share of \"the viewport\" has to be taken of.\n */\nfunction pageWidthOf(element: HTMLElement): number {\n  const root = element.getRootNode()\n  const host =\n    typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot\n      ? (root.host as HTMLElement)\n      : document.documentElement\n  return host.clientWidth\n}\n\n/**\n * Records how wide this image renders on the Besigner canvas, per band, for\n * the save to write onto the node (AGL-3485, `rendered-widths.ts`). Inert\n * everywhere but the canvas. A `ResizeObserver` on the image and on the page\n * re-records as the author changes the layout, resizes the window or switches\n * device — a device switch also rebuilds the pinned theme, which re-runs this.\n */\nfunction useRenderedWidthRecorder(\n  nodeId: string,\n  enabled: boolean,\n): (element: HTMLElement | null) => void {\n  const theme = useTheme()\n  const [element, setElement] = useState<HTMLElement | null>(null)\n  useEffect(() => {\n    if (!enabled || !element || !nodeId) return undefined\n    if (typeof ResizeObserver === 'undefined') return undefined\n    const measure = () => {\n      const percent = Aglyn.renderedWidthPercent(\n        element.getBoundingClientRect().width,\n        pageWidthOf(element),\n      )\n      if (percent !== undefined) {\n        Aglyn.recordRenderedWidth(nodeId, themeBand(theme), percent)\n      }\n    }\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n    const root = element.getRootNode()\n    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {\n      observer.observe(root.host)\n    }\n    return () => observer.disconnect()\n  }, [enabled, element, nodeId, theme])\n  return setElement\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 author's own `sizes` attribute, used exactly as typed (AGL-3485).\n   * Empty — the normal case — lets the element work it out: see\n   * `utils/image-sizes.ts`.\n   */\n  sizes?: string\n  /**\n   * How wide the image rendered on the Besigner canvas, per breakpoint band,\n   * as a share of the page: written by the editor's save, never by an author\n   * (AGL-3485, `rendered-widths.ts`).\n   */\n  renderedWidths?: Aglyn.RenderedWidths\n  /**\n   * The asset's current content hash, laid on by the composition from its\n   * media document like the pixel pair below (AGL-3485). It makes the URL the\n   * VERSIONED one, which every cache may keep for a year; a replace changes\n   * it, and so the URL.\n   */\n  mediaVersion?: 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    sizes: authoredSizes,\n    renderedWidths,\n    mediaVersion,\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 leadIds = nodeId ? leadImageNodeIds(Aglyn.canvas.rootNode) : []\n  const isLeadImage = leadIds.some((leadId) =>\n    Aglyn.leafIdsMatch(leadId, nodeId),\n  )\n  const screenLeadId = leadIds.find((id) => !Aglyn.isLayoutComposedNodeId(id))\n  const isScreenLead =\n    screenLeadId !== undefined && Aglyn.leafIdsMatch(screenLeadId, nodeId)\n  const eager = loading === 'eager' || (loading == null && isLeadImage)\n  // The canvas measures; nothing else does (AGL-3485).\n  const { editorInert } = Aglyn.useScreenLink(undefined)\n  const recordRef = useRenderedWidthRecorder(nodeId, Boolean(editorInert))\n  const imageRef = useForkRef(ref, recordRef)\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  // With the asset's version when the composition read one (AGL-3485): the\n  // versioned URL is the one every cache may keep, and a replace moves it.\n  const src = Aglyn.resolveMediaSrc(storedSrc, {\n    hostId,\n    version: mediaVersion,\n  })\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={imageRef}\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. Any\n  // other url has no candidates, and so no `sizes` either.\n  //\n  // The asset's own width caps the list (AGL-3486): the widest candidate is\n  // the source, described truthfully, never a `1920w` for a 1000px photo that\n  // the CDN can only answer with the same 1000 pixels.\n  const srcSet = Aglyn.mediaCdnSrcSet(src, {\n    sourceWidth:\n      typeof intrinsicWidth === 'number' &&\n      Number.isFinite(intrinsicWidth) &&\n      intrinsicWidth > 0\n        ? intrinsicWidth\n        : undefined,\n  })\n  /**\n   * How wide the image will render, for `sizes` (AGL-3485): the author's own\n   * value, else per breakpoint a pixel width or height the element states (in\n   * its attributes or its `sx`, responsive values included), what the\n   * Besigner measured, and what the layout around it states. See\n   * `utils/image-sizes.ts` for the order and for why none of it disturbs\n   * layout the way `sizes=\"auto\"` did (AGL-2486).\n   *\n   * The layout is read off the canvas tree this image is rendered from, which\n   * the tenant fills on the server too, so the published HTML carries it.\n   */\n  const resolvedSizes = imageSizes({\n    sizes: authoredSizes,\n    width,\n    height,\n    sx: nodeSxProp,\n    intrinsicWidth,\n    intrinsicHeight,\n    renderedWidths,\n    layoutWidths: nodeId\n      ? layoutBandWidths(Aglyn.canvas.getNode(nodeId) as never)\n      : undefined,\n  })\n  /**\n   * The page's hero: the SCREEN's lead image, loading eagerly, that nothing\n   * says renders small. It gets `fetchpriority=\"high\"`, which its preload\n   * carries too (AGL-3485) — see `fetchPriority`. Only on a published page:\n   * an editing surface has no first paint to win.\n   */\n  const hero =\n    isScreenLead && eager && !resolvedSizes.small && !suppressNavigation\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  const sizes = srcSet ? resolvedSizes.sizes : undefined\n  return wrapLink(\n    <Box\n      ref={imageRef}\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={srcSet}\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, which is why every\n      // answer `imageSizes` gives is a real width of the slot (AGL-3485): the\n      // author's own value, a definite pixel length, a span of a parent of\n      // definite width, or the width the Besigner MEASURED this image at —\n      // a fixed point, since an image whose intrinsic width is its measured\n      // width lays out at its measured width. `100vw`, the value every\n      // published document was authored against, is now only the last resort\n      // for a band nothing describes.\n      sizes={sizes}\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      // `high` is a claim that this image outranks everything else in flight,\n      // including the stylesheet and the webfont a TEXT LCP is waiting on, and\n      // it went wrong once (AGL-2486): spent on \"the first `<img>` in document\n      // order\", which is the HEADER LOGO on any site whose header has one.\n      // Measured on aglyn.com at 375x812, the logo carrying it was 145x44 =\n      // 6,380 px² against an `<h1>` of 38,893 px² that Lighthouse named as the\n      // LCP — the hint made the real LCP arrive later.\n      //\n      // So it goes only to the page's HERO (AGL-3485), on two pieces of\n      // evidence that did not exist then:\n      //\n      // - it is the SCREEN's lead image. The layout's lead — the logo — never\n      //   qualifies, because composition says which origin each node has;\n      // - nothing says it renders small. A pixel width of 240 or less, or under\n      //   40% of the page in every band the Besigner measured or the layout\n      //   states, marks a logo or an icon, and those keep the browser's `auto`.\n      //\n      // The preload is React's own: a server render emits\n      // `<link rel=\"preload\" as=\"image\">` in the head for every image that is\n      // not lazy, carrying its `srcset`, its `sizes` and this `fetchpriority`\n      // — so the hero's request starts with the head, for the same bytes the\n      // `<img>` will ask for, and nothing here restates it.\n      //\n      // Every other lead image — the layout's, or a small one — keeps\n      // `loading=\"eager\"` (the discovery fix that earned AGL-2486's win) and\n      // the browser's own in-viewport ranking.\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        ? {\n            loading: 'eager' as const,\n            ...(hero ? { fetchPriority: 'high' as const } : {}),\n          }\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      // AGL-3485. Empty is the answer for nearly everyone: the image works\n      // out how big it renders from where it sits on the page, measured as\n      // the page is built. This is the override for someone who knows the\n      // HTML attribute and wants to say it themselves.\n      name: 'sizes',\n      description:\n        'Leave empty — the image works out how big it shows on every ' +\n        'screen size from where you place it, and downloads a file that ' +\n        'size. Advanced: an HTML sizes value used exactly as typed, e.g. ' +\n        '(min-width: 900px) 33vw, 100vw.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Sizes',\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 page 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 page when the image is clicked — ' +\n        'follows the published path like a Page Link.',\n      component: Aglyn.FieldComponentType.SCREEN_SELECT,\n      label: 'Link to page',\n    },\n    {\n      name: 'href',\n      description:\n        'Makes the image a link to somewhere off this site. Ignored while ' +\n        'Link to page 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","useTheme","useForkRef","forwardRef","useEffect","useState","BUNDLE_ID","generatePresetId","imageSizes","layoutBandWidths","ID","leadImageNodeIds","root","layoutLead","screenLead","walk","node","componentId","props","resolvedProps","String","trim","isLayoutComposedNodeId","$id","child","children","filter","id","Boolean","themeBand","theme","window","matchMedia","band","RENDERED_WIDTH_BANDS","reverse","query","breakpoints","up","replace","matches","pageWidthOf","element","getRootNode","host","ShadowRoot","document","documentElement","clientWidth","useRenderedWidthRecorder","nodeId","enabled","setElement","undefined","ResizeObserver","measure","percent","renderedWidthPercent","getBoundingClientRect","width","recordRenderedWidth","observer","observe","disconnect","Image","ref","src","storedSrc","alt","decorative","title","loading","objectFit","height","sizes","authoredSizes","renderedWidths","mediaVersion","intrinsicWidth","intrinsicHeight","radius","screenId","href","externalHref","_children","sx","nodeSxProp","rest","nodeSx","Array","isArray","linkHref","suppressNavigation","useLinkTarget","useNodeId","leadIds","canvas","rootNode","isLeadImage","some","leadId","leafIdsMatch","screenLeadId","find","isScreenLead","eager","editorInert","useScreenLink","recordRef","imageRef","hostId","useSite","resolveMediaSrc","version","wrapLink","componentVariant","style","display","alignItems","justifyContent","border","borderColor","borderRadius","color","fontSize","fontFamily","srcSet","mediaCdnSrcSet","sourceWidth","Number","isFinite","resolvedSizes","layoutWidths","getNode","hero","small","usable","value","intrinsicAttributes","component","fetchPriority","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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"}
+{"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, type Theme, useTheme } from '@mui/material/styles'\nimport useForkRef from '@mui/utils/useForkRef'\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\nimport { imageSizes, layoutBandWidths } from '../utils/image-sizes'\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 * Only the SCREEN's lead can get `fetchpriority=\"high\"` and a preload, and\n * only when nothing says it renders small (AGL-3485); the reasoning is at the\n * `fetchPriority` prop below. The layout's lead is the header logo on any\n * site that has one, which is why \"first image\" alone was never evidence.\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\n/**\n * The breakpoint band the theme says is in effect. Asked of the THEME, not of\n * the window: the Besigner canvas pins its theme's breakpoint helpers to the\n * previewed device (`createDevicePinnedTheme`), so on a pinned device this is\n * the device's band, and in Fluid Responsive it is the window's — which is\n * the band the canvas's own layout is answering to either way.\n */\nfunction themeBand(theme: Theme): Aglyn.RenderedWidthBand {\n  if (typeof window === 'undefined' || !window.matchMedia) return 'xs'\n  for (const band of [...Aglyn.RENDERED_WIDTH_BANDS].reverse()) {\n    if (band === 'xs') break\n    const query = theme.breakpoints.up(band).replace(/^@media\\s*/, '')\n    if (window.matchMedia(query).matches) return band\n  }\n  return 'xs'\n}\n\n/**\n * The width of the page an element is laid out in. On the canvas that is the\n * shadow host the page renders into — narrower than the window, and the width\n * a share of \"the viewport\" has to be taken of.\n */\nfunction pageWidthOf(element: HTMLElement): number {\n  const root = element.getRootNode()\n  const host =\n    typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot\n      ? (root.host as HTMLElement)\n      : document.documentElement\n  return host.clientWidth\n}\n\n/**\n * Records how wide this image renders on the Besigner canvas, per band, for\n * the save to write onto the node (AGL-3485, `rendered-widths.ts`). Inert\n * everywhere but the canvas. A `ResizeObserver` on the image and on the page\n * re-records as the author changes the layout, resizes the window or switches\n * device — a device switch also rebuilds the pinned theme, which re-runs this.\n */\nfunction useRenderedWidthRecorder(\n  nodeId: string,\n  enabled: boolean,\n): (element: HTMLElement | null) => void {\n  const theme = useTheme()\n  const [element, setElement] = useState<HTMLElement | null>(null)\n  useEffect(() => {\n    if (!enabled || !element || !nodeId) return undefined\n    if (typeof ResizeObserver === 'undefined') return undefined\n    const measure = () => {\n      const percent = Aglyn.renderedWidthPercent(\n        element.getBoundingClientRect().width,\n        pageWidthOf(element),\n      )\n      if (percent !== undefined) {\n        Aglyn.recordRenderedWidth(nodeId, themeBand(theme), percent)\n      }\n    }\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n    const root = element.getRootNode()\n    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {\n      observer.observe(root.host)\n    }\n    return () => observer.disconnect()\n  }, [enabled, element, nodeId, theme])\n  return setElement\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 author's own `sizes` attribute, used exactly as typed (AGL-3485).\n   * Empty — the normal case — lets the element work it out: see\n   * `utils/image-sizes.ts`.\n   */\n  sizes?: string\n  /**\n   * How wide the image rendered on the Besigner canvas, per breakpoint band,\n   * as a share of the page: written by the editor's save, never by an author\n   * (AGL-3485, `rendered-widths.ts`).\n   */\n  renderedWidths?: Aglyn.RenderedWidths\n  /**\n   * The asset's current content hash, laid on by the composition from its\n   * media document like the pixel pair below (AGL-3485). It makes the URL the\n   * VERSIONED one, which every cache may keep for a year; a replace changes\n   * it, and so the URL.\n   */\n  mediaVersion?: 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    sizes: authoredSizes,\n    renderedWidths,\n    mediaVersion,\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 leadIds = nodeId ? leadImageNodeIds(Aglyn.canvas.rootNode) : []\n  const isLeadImage = leadIds.some((leadId) =>\n    Aglyn.leafIdsMatch(leadId, nodeId),\n  )\n  const screenLeadId = leadIds.find((id) => !Aglyn.isLayoutComposedNodeId(id))\n  const isScreenLead =\n    screenLeadId !== undefined && Aglyn.leafIdsMatch(screenLeadId, nodeId)\n  const eager = loading === 'eager' || (loading == null && isLeadImage)\n  // The canvas measures; nothing else does (AGL-3485).\n  const { editorInert } = Aglyn.useScreenLink(undefined)\n  const recordRef = useRenderedWidthRecorder(nodeId, Boolean(editorInert))\n  const imageRef = useForkRef(ref, recordRef)\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  // With the asset's version when the composition read one (AGL-3485): the\n  // versioned URL is the one every cache may keep, and a replace moves it.\n  const src = Aglyn.resolveMediaSrc(storedSrc, {\n    hostId,\n    version: mediaVersion,\n  })\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={imageRef}\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. Any\n  // other url has no candidates, and so no `sizes` either.\n  //\n  // The asset's own width caps the list (AGL-3486): the widest candidate is\n  // the source, described truthfully, never a `1920w` for a 1000px photo that\n  // the CDN can only answer with the same 1000 pixels.\n  const srcSet = Aglyn.mediaCdnSrcSet(src, {\n    sourceWidth:\n      typeof intrinsicWidth === 'number' &&\n      Number.isFinite(intrinsicWidth) &&\n      intrinsicWidth > 0\n        ? intrinsicWidth\n        : undefined,\n  })\n  /**\n   * How wide the image will render, for `sizes` (AGL-3485): the author's own\n   * value, else per breakpoint a pixel width or height the element states (in\n   * its attributes or its `sx`, responsive values included), what the\n   * Besigner measured, and what the layout around it states. See\n   * `utils/image-sizes.ts` for the order and for why none of it disturbs\n   * layout the way `sizes=\"auto\"` did (AGL-2486).\n   *\n   * The layout is read off the canvas tree this image is rendered from, which\n   * the tenant fills on the server too, so the published HTML carries it.\n   */\n  const resolvedSizes = imageSizes({\n    sizes: authoredSizes,\n    width,\n    height,\n    sx: nodeSxProp,\n    intrinsicWidth,\n    intrinsicHeight,\n    renderedWidths,\n    layoutWidths: nodeId\n      ? layoutBandWidths(Aglyn.canvas.getNode(nodeId) as never)\n      : undefined,\n  })\n  /**\n   * The page's hero: the SCREEN's lead image, loading eagerly, that nothing\n   * says renders small. It gets `fetchpriority=\"high\"`, which its preload\n   * carries too (AGL-3485) — see `fetchPriority`. Only on a published page:\n   * an editing surface has no first paint to win.\n   */\n  const hero =\n    isScreenLead && eager && !resolvedSizes.small && !suppressNavigation\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  const sizes = srcSet ? resolvedSizes.sizes : undefined\n  return wrapLink(\n    <Box\n      ref={imageRef}\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={srcSet}\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, which is why every\n      // answer `imageSizes` gives is a real width of the slot (AGL-3485): the\n      // author's own value, a definite pixel length, a span of a parent of\n      // definite width, or the width the Besigner MEASURED this image at —\n      // a fixed point, since an image whose intrinsic width is its measured\n      // width lays out at its measured width. `100vw`, the value every\n      // published document was authored against, is now only the last resort\n      // for a band nothing describes.\n      sizes={sizes}\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      // `high` is a claim that this image outranks everything else in flight,\n      // including the stylesheet and the webfont a TEXT LCP is waiting on, and\n      // it went wrong once (AGL-2486): spent on \"the first `<img>` in document\n      // order\", which is the HEADER LOGO on any site whose header has one.\n      // Measured on aglyn.com at 375x812, the logo carrying it was 145x44 =\n      // 6,380 px² against an `<h1>` of 38,893 px² that Lighthouse named as the\n      // LCP — the hint made the real LCP arrive later.\n      //\n      // So it goes only to the page's HERO (AGL-3485), on two pieces of\n      // evidence that did not exist then:\n      //\n      // - it is the SCREEN's lead image. The layout's lead — the logo — never\n      //   qualifies, because composition says which origin each node has;\n      // - nothing says it renders small. A pixel width of 240 or less, or under\n      //   40% of the page in every band the Besigner measured or the layout\n      //   states, marks a logo or an icon, and those keep the browser's `auto`.\n      //\n      // The preload is React's own: a server render emits\n      // `<link rel=\"preload\" as=\"image\">` in the head for every image that is\n      // not lazy, carrying its `srcset`, its `sizes` and this `fetchpriority`\n      // — so the hero's request starts with the head, for the same bytes the\n      // `<img>` will ask for, and nothing here restates it.\n      //\n      // Every other lead image — the layout's, or a small one — keeps\n      // `loading=\"eager\"` (the discovery fix that earned AGL-2486's win) and\n      // the browser's own in-viewport ranking.\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        ? {\n            loading: 'eager' as const,\n            ...(hero ? { fetchPriority: 'high' as const } : {}),\n          }\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    // Static: may sit in a subtree that keeps its server HTML (AGL-3581).\n    lazyHydration: Aglyn.FEATURE_FLAG.ENABLED,\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      // AGL-3485. Empty is the answer for nearly everyone: the image works\n      // out how big it renders from where it sits on the page, measured as\n      // the page is built. This is the override for someone who knows the\n      // HTML attribute and wants to say it themselves.\n      name: 'sizes',\n      description:\n        'Leave empty — the image works out how big it shows on every ' +\n        'screen size from where you place it, and downloads a file that ' +\n        'size. Advanced: an HTML sizes value used exactly as typed, e.g. ' +\n        '(min-width: 900px) 33vw, 100vw.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Sizes',\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 page 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 page when the image is clicked — ' +\n        'follows the published path like a Page Link.',\n      component: Aglyn.FieldComponentType.SCREEN_SELECT,\n      label: 'Link to page',\n    },\n    {\n      name: 'href',\n      description:\n        'Makes the image a link to somewhere off this site. Ignored while ' +\n        'Link to page 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","useTheme","useForkRef","forwardRef","useEffect","useState","BUNDLE_ID","generatePresetId","imageSizes","layoutBandWidths","ID","leadImageNodeIds","root","layoutLead","screenLead","walk","node","componentId","props","resolvedProps","String","trim","isLayoutComposedNodeId","$id","child","children","filter","id","Boolean","themeBand","theme","window","matchMedia","band","RENDERED_WIDTH_BANDS","reverse","query","breakpoints","up","replace","matches","pageWidthOf","element","getRootNode","host","ShadowRoot","document","documentElement","clientWidth","useRenderedWidthRecorder","nodeId","enabled","setElement","undefined","ResizeObserver","measure","percent","renderedWidthPercent","getBoundingClientRect","width","recordRenderedWidth","observer","observe","disconnect","Image","ref","src","storedSrc","alt","decorative","title","loading","objectFit","height","sizes","authoredSizes","renderedWidths","mediaVersion","intrinsicWidth","intrinsicHeight","radius","screenId","href","externalHref","_children","sx","nodeSxProp","rest","nodeSx","Array","isArray","linkHref","suppressNavigation","useLinkTarget","useNodeId","leadIds","canvas","rootNode","isLeadImage","some","leadId","leafIdsMatch","screenLeadId","find","isScreenLead","eager","editorInert","useScreenLink","recordRef","imageRef","hostId","useSite","resolveMediaSrc","version","wrapLink","componentVariant","style","display","alignItems","justifyContent","border","borderColor","borderRadius","color","fontSize","fontFamily","srcSet","mediaCdnSrcSet","sourceWidth","Number","isFinite","resolvedSizes","layoutWidths","getNode","hero","small","usable","value","intrinsicAttributes","component","fetchPriority","DEFERRED_IMAGE_ATTRIBUTES","displayName","NOT_DECORATIVE","when","is","notMatch","schema","pluginId","description","category","ComponentCategory","MEDIA","icon","path","flags","lazyHydration","FEATURE_FLAG","ENABLED","selfClosing","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.js

@@ -166,6 +166,8 @@ export const schema = {
         }
     },
     flags: {
+        // Static: may sit in a subtree that keeps its server HTML (AGL-3581).
+        lazyHydration: Aglyn.FEATURE_FLAG.ENABLED,
         // The run IS its text: edited inline on the canvas, like Typography.
         textEditable: Aglyn.FEATURE_FLAG.ENABLED,
         richTextEditable: Aglyn.FEATURE_FLAG.ENABLED

package/src/lib/components/inline-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/inline-text.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 { mdiFormatColorHighlight, mdiFormatColorText } from '@aglyn/shared-data-mdi'\nimport MuiBox 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 { FIELD_TEXT_CONTENT } from '../constants/field-presets'\nimport { authorHtmlLabel } from '../utils/author-html-label'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'muiInlineText'\n\n/**\n * Inline elements the run may render as. An allow-list rather than a\n * free-text field, for the same reason Box's is (AGL-1201): `element` is\n * persisted and rendered verbatim into every visitor's page, so a typed\n * value would let an author put `script`/`iframe` there.\n *\n * All five are phrasing content, so a run is always legal inside a\n * paragraph — which is the whole point of the element.\n */\nexport const INLINE_TEXT_ELEMENTS = [\n  'span',\n  'strong',\n  'em',\n  'mark',\n  'small',\n] as const\nexport type InlineTextElement = (typeof INLINE_TEXT_ELEMENTS)[number]\n\n/**\n * Theme palette paths, never raw hexes: the design's `text/muted` and\n * `text/primary` tokens ARE `text.secondary` / `text.primary`, and a\n * hardcoded `#757575` would ignore the site's theme (and dark mode).\n *\n * Every value is a real sentinel — an option value of `''` is stripped\n * before save and the pick silently reverts on reload (AGL-1191), so\n * \"inherit\" has to be spelled out rather than left blank.\n */\nconst TONE_COLOR: Record<string, string> = {\n  inherit: undefined,\n  primary: 'text.primary',\n  secondary: 'text.secondary',\n  disabled: 'text.disabled',\n  accent: 'primary.main',\n  accentAlt: 'secondary.main',\n  success: 'success.main',\n  warning: 'warning.main',\n  error: 'error.main',\n}\n\n/** Named weights so the field is a pick, not a number to remember. */\nconst FONT_WEIGHT: Record<string, number> = {\n  inherit: undefined,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n}\n\n/**\n * `text-decoration` PROPAGATES — it is not inherited. An ancestor's\n * underline (a Screen Link, a struck-through block) is painted straight\n * across every in-flow inline descendant, and `text-decoration: none` on\n * the descendant CANNOT remove it. Only an element that is not an in-flow\n * non-atomic inline box escapes the propagation, which is why \"None\" also\n * switches the run to `inline-block`: an atomic inline box is not painted\n * through.\n *\n * That costs line-breaking — an inline-block will not break across lines —\n * so it is opt-in rather than the default, and the field says so. The\n * default, `inherit`, is a plain `display: inline` run that flows and wraps\n * with the rest of the sentence.\n */\nconst DECORATION_SX: Record<string, Record<string, string>> = {\n  inherit: {},\n  none: { display: 'inline-block', textDecoration: 'none' },\n  underline: { textDecoration: 'underline' },\n  lineThrough: { textDecoration: 'line-through' },\n}\n\nexport interface InlineTextProps {\n  /** The DOM element rendered; defaults to `span`. */\n  element?: InlineTextElement\n  /** Palette token key from {@link TONE_COLOR}. */\n  tone?: string\n  /** Named weight key from {@link FONT_WEIGHT}. */\n  weight?: string\n  /** Decoration behaviour key from {@link DECORATION_SX}. */\n  decoration?: string\n  /**\n   * Authored node styles, handed over by the renderer rather than typed\n   * into an attribute. Declared because the merge below reads it —\n   * undeclared, no typed caller could style a run (AGL-1323).\n   */\n  sx?: SxProps\n  /**\n   * Sanitized emphasis markup for the run, written by the inline editor's\n   * rich mode (AGL-2557). `children` keeps the plain-text reading of it, and\n   * is what every surface that cannot render markup falls back to.\n   */\n  html?: string\n  /** The text of this run; edited inline on the canvas. */\n  children?: ReactNode\n}\n\n/**\n * One run of text inside a sentence (AGL-1235).\n *\n * The gap this fills: `muiTypography` is `textEditable`, therefore a leaf —\n * `nodeAcceptsChildren` reports false, so no span can be nested inside it.\n * A statement whose argument lives in an emphasised phrase (\"Aglyn commerce\n * is **part of the platform**\") could not be authored at all; the whole line\n * was one flat colour.\n *\n * This is a leaf too, deliberately: the shape that renders correctly is a\n * block container holding SIBLING inline runs, not a nested span. Sibling\n * runs flow and wrap as a single paragraph, so the sentence breaks\n * naturally with the emphasis landing in the right place. Drop a Box as\n * `p`, then one of these per style change.\n */\nconst InlineText = forwardRef<HTMLElement, InlineTextProps>((props, ref) => {\n  const { element, tone, weight, decoration, children, sx, html, ...rest } =\n    props\n  const component = INLINE_TEXT_ELEMENTS.includes(element as InlineTextElement)\n    ? (element as InlineTextElement)\n    : 'span'\n  // Node styles ride the renderer-merged sx; recompose rather than spread\n  // (the stack.ts/link-box.tsx pattern). Writing an `sx` literal after the\n  // props spread would REPLACE the author's styles silently — the defect\n  // class `aglyn/no-sx-after-spread` guards (AGL-1240/1284).\n  const nodeSx = Array.isArray(sx) ? sx : sx ? [sx] : []\n  // A cleared attribute persists as null, so every lookup below must miss\n  // rather than throw; `Record[null]` is simply undefined.\n  const color = TONE_COLOR[tone]\n  const fontWeight = FONT_WEIGHT[weight]\n  return (\n    <MuiBox\n      ref={ref}\n      component={component}\n      {...rest}\n      // Order matters: the baseline first, then the declared attributes,\n      // then the author's node styles last so the Styles panel always wins.\n      sx={[\n        { display: 'inline' },\n        color ? { color } : {},\n        fontWeight ? { fontWeight } : {},\n        DECORATION_SX[decoration] ?? {},\n        ...nodeSx,\n      ]}\n    >\n      {authorHtmlLabel(html) ?? children}\n    </MuiBox>\n  )\n})\nInlineText.displayName = 'AglynInlineText'\n\nexport const schema: Aglyn.ComponentSchema<InlineTextProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Inline Text',\n  description:\n    'One run of text inside a sentence — put several side by side in a ' +\n    'paragraph to emphasize a phrase without breaking the line.',\n  category: Aglyn.ComponentCategory.TEXT,\n  icon: { path: mdiFormatColorText.path, sx: { color: '#057822' } },\n  flags: {\n    // The run IS its text: edited inline on the canvas, like Typography.\n    textEditable: Aglyn.FEATURE_FLAG.ENABLED,\n    richTextEditable: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  // Emphasis only (AGL-2557), for a different reason than the controls: this\n  // run is not interactive, it is `display: inline`. Every element it may\n  // render as is phrasing content — that is the guarantee INLINE_TEXT_ELEMENTS\n  // exists to make — so a list inside one is a block in an inline box, which\n  // the parser lifts straight back out of the enclosing paragraph. Links stay\n  // with Screen Link, whose job is a resolved target rather than a typed href.\n  richTextCommands: [Aglyn.RICH_TEXT_COMMANDS.EMPHASIS],\n  attributes: [\n    FIELD_TEXT_CONTENT,\n    {\n      name: 'element',\n      label: 'Component',\n      description:\n        'The DOM element this run renders as. `strong` and `em` carry ' +\n        'meaning for screen readers and search engines; `mark` marks a ' +\n        'highlighted phrase; `span` is purely visual.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: INLINE_TEXT_ELEMENTS.map((value) => ({ value, label: value })),\n    },\n    {\n      name: 'tone',\n      label: 'Color',\n      description:\n        \"Palette token for this run. Two-tone text is a muted sentence \" +\n        'with one run set to Primary (or Accent) — theme tokens, so it ' +\n        'still reads correctly in dark mode.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'primary', label: 'Text primary' },\n        { value: 'secondary', label: 'Text muted' },\n        { value: 'disabled', label: 'Text disabled' },\n        { value: 'accent', label: 'Accent' },\n        { value: 'accentAlt', label: 'Accent alternate' },\n        { value: 'success', label: 'Success' },\n        { value: 'warning', label: 'Warning' },\n        { value: 'error', label: 'Error' },\n      ],\n    },\n    {\n      name: 'weight',\n      label: 'Weight',\n      description: 'Font weight for this run only.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'regular', label: 'Regular' },\n        { value: 'medium', label: 'Medium' },\n        { value: 'semibold', label: 'Semi bold' },\n        { value: 'bold', label: 'Bold' },\n      ],\n    },\n    {\n      name: 'decoration',\n      label: 'Underline / strike',\n      description:\n        'Inherit follows the surrounding text, including a link\\'s ' +\n        'underline — an underline PROPAGATES down and cannot be switched ' +\n        'off from inside. None does switch it off, at the cost of the run ' +\n        'no longer breaking across lines, so keep it to a short phrase.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'none', label: 'None (does not wrap)' },\n        { value: 'underline', label: 'Underline' },\n        { value: 'lineThrough', label: 'Strikethrough' },\n      ],\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Inline Text',\n    pluginId: BUNDLE_ID,\n    description: 'One run of text inside a sentence',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { element: 'span', children: 'Inline text' },\n    },\n  },\n  {\n    $id: generatePresetId(ID, 'emphasis'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Emphasized Text',\n    pluginId: BUNDLE_ID,\n    description: 'A phrase picked out of a muted sentence',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: { path: mdiFormatColorHighlight.path, sx: { color: '#057822' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        element: 'strong',\n        tone: 'primary',\n        weight: 'bold',\n        children: 'the emphasized phrase',\n      },\n    },\n  },\n  {\n    // The whole shape in one drop (AGL-1235): the reason the emphasis was\n    // never authored is that assembling it by hand meant a container, three\n    // runs and a colour on each. This is that assembly, ready to retype.\n    $id: generatePresetId(ID, 'statement'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Two-tone Statement',\n    pluginId: BUNDLE_ID,\n    description: 'A muted sentence with one phrase emphasized',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: { path: mdiFormatColorHighlight.path, sx: { color: '#057822' } },\n    data: {\n      $id: null,\n      // A real `<p>`, not a div: the runs are phrasing content, so the\n      // paragraph is the honest container and screen readers get a\n      // sentence rather than three unrelated fragments.\n      componentId: 'muiBox',\n      pluginId: BUNDLE_ID,\n      props: { component: 'p' },\n      // Node-level sx (AGL-1346) — the record the Styles panel edits.\n      sx: { marginTop: 0, marginRight: 0, marginBottom: 0, marginLeft: 0 },\n      nodes: [\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'span',\n            tone: 'secondary',\n            children: 'Everything you build is ',\n          },\n        },\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'strong',\n            tone: 'primary',\n            weight: 'bold',\n            children: 'part of the platform',\n          },\n        },\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'span',\n            tone: 'secondary',\n            children: ', not bolted onto it.',\n          },\n        },\n      ],\n    },\n  },\n]\n\nexport default InlineText\n"],"names":["Aglyn","mdiFormatColorHighlight","mdiFormatColorText","MuiBox","forwardRef","BUNDLE_ID","FIELD_TEXT_CONTENT","authorHtmlLabel","generatePresetId","ID","INLINE_TEXT_ELEMENTS","TONE_COLOR","inherit","undefined","primary","secondary","disabled","accent","accentAlt","success","warning","error","FONT_WEIGHT","regular","medium","semibold","bold","DECORATION_SX","none","display","textDecoration","underline","lineThrough","InlineText","props","ref","element","tone","weight","decoration","children","sx","html","rest","component","includes","nodeSx","Array","isArray","color","fontWeight","displayName","schema","$id","pluginId","description","category","ComponentCategory","TEXT","icon","path","flags","textEditable","FEATURE_FLAG","ENABLED","richTextEditable","richTextCommands","RICH_TEXT_COMMANDS","EMPHASIS","attributes","name","label","FieldComponentType","SELECT","options","map","value","presets","type","NodeType","PRESET","data","componentId","marginTop","marginRight","marginBottom","marginLeft","nodes"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/inline-text.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 { mdiFormatColorHighlight, mdiFormatColorText } from '@aglyn/shared-data-mdi'\nimport MuiBox 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 { FIELD_TEXT_CONTENT } from '../constants/field-presets'\nimport { authorHtmlLabel } from '../utils/author-html-label'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'muiInlineText'\n\n/**\n * Inline elements the run may render as. An allow-list rather than a\n * free-text field, for the same reason Box's is (AGL-1201): `element` is\n * persisted and rendered verbatim into every visitor's page, so a typed\n * value would let an author put `script`/`iframe` there.\n *\n * All five are phrasing content, so a run is always legal inside a\n * paragraph — which is the whole point of the element.\n */\nexport const INLINE_TEXT_ELEMENTS = [\n  'span',\n  'strong',\n  'em',\n  'mark',\n  'small',\n] as const\nexport type InlineTextElement = (typeof INLINE_TEXT_ELEMENTS)[number]\n\n/**\n * Theme palette paths, never raw hexes: the design's `text/muted` and\n * `text/primary` tokens ARE `text.secondary` / `text.primary`, and a\n * hardcoded `#757575` would ignore the site's theme (and dark mode).\n *\n * Every value is a real sentinel — an option value of `''` is stripped\n * before save and the pick silently reverts on reload (AGL-1191), so\n * \"inherit\" has to be spelled out rather than left blank.\n */\nconst TONE_COLOR: Record<string, string> = {\n  inherit: undefined,\n  primary: 'text.primary',\n  secondary: 'text.secondary',\n  disabled: 'text.disabled',\n  accent: 'primary.main',\n  accentAlt: 'secondary.main',\n  success: 'success.main',\n  warning: 'warning.main',\n  error: 'error.main',\n}\n\n/** Named weights so the field is a pick, not a number to remember. */\nconst FONT_WEIGHT: Record<string, number> = {\n  inherit: undefined,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n}\n\n/**\n * `text-decoration` PROPAGATES — it is not inherited. An ancestor's\n * underline (a Screen Link, a struck-through block) is painted straight\n * across every in-flow inline descendant, and `text-decoration: none` on\n * the descendant CANNOT remove it. Only an element that is not an in-flow\n * non-atomic inline box escapes the propagation, which is why \"None\" also\n * switches the run to `inline-block`: an atomic inline box is not painted\n * through.\n *\n * That costs line-breaking — an inline-block will not break across lines —\n * so it is opt-in rather than the default, and the field says so. The\n * default, `inherit`, is a plain `display: inline` run that flows and wraps\n * with the rest of the sentence.\n */\nconst DECORATION_SX: Record<string, Record<string, string>> = {\n  inherit: {},\n  none: { display: 'inline-block', textDecoration: 'none' },\n  underline: { textDecoration: 'underline' },\n  lineThrough: { textDecoration: 'line-through' },\n}\n\nexport interface InlineTextProps {\n  /** The DOM element rendered; defaults to `span`. */\n  element?: InlineTextElement\n  /** Palette token key from {@link TONE_COLOR}. */\n  tone?: string\n  /** Named weight key from {@link FONT_WEIGHT}. */\n  weight?: string\n  /** Decoration behaviour key from {@link DECORATION_SX}. */\n  decoration?: string\n  /**\n   * Authored node styles, handed over by the renderer rather than typed\n   * into an attribute. Declared because the merge below reads it —\n   * undeclared, no typed caller could style a run (AGL-1323).\n   */\n  sx?: SxProps\n  /**\n   * Sanitized emphasis markup for the run, written by the inline editor's\n   * rich mode (AGL-2557). `children` keeps the plain-text reading of it, and\n   * is what every surface that cannot render markup falls back to.\n   */\n  html?: string\n  /** The text of this run; edited inline on the canvas. */\n  children?: ReactNode\n}\n\n/**\n * One run of text inside a sentence (AGL-1235).\n *\n * The gap this fills: `muiTypography` is `textEditable`, therefore a leaf —\n * `nodeAcceptsChildren` reports false, so no span can be nested inside it.\n * A statement whose argument lives in an emphasised phrase (\"Aglyn commerce\n * is **part of the platform**\") could not be authored at all; the whole line\n * was one flat colour.\n *\n * This is a leaf too, deliberately: the shape that renders correctly is a\n * block container holding SIBLING inline runs, not a nested span. Sibling\n * runs flow and wrap as a single paragraph, so the sentence breaks\n * naturally with the emphasis landing in the right place. Drop a Box as\n * `p`, then one of these per style change.\n */\nconst InlineText = forwardRef<HTMLElement, InlineTextProps>((props, ref) => {\n  const { element, tone, weight, decoration, children, sx, html, ...rest } =\n    props\n  const component = INLINE_TEXT_ELEMENTS.includes(element as InlineTextElement)\n    ? (element as InlineTextElement)\n    : 'span'\n  // Node styles ride the renderer-merged sx; recompose rather than spread\n  // (the stack.ts/link-box.tsx pattern). Writing an `sx` literal after the\n  // props spread would REPLACE the author's styles silently — the defect\n  // class `aglyn/no-sx-after-spread` guards (AGL-1240/1284).\n  const nodeSx = Array.isArray(sx) ? sx : sx ? [sx] : []\n  // A cleared attribute persists as null, so every lookup below must miss\n  // rather than throw; `Record[null]` is simply undefined.\n  const color = TONE_COLOR[tone]\n  const fontWeight = FONT_WEIGHT[weight]\n  return (\n    <MuiBox\n      ref={ref}\n      component={component}\n      {...rest}\n      // Order matters: the baseline first, then the declared attributes,\n      // then the author's node styles last so the Styles panel always wins.\n      sx={[\n        { display: 'inline' },\n        color ? { color } : {},\n        fontWeight ? { fontWeight } : {},\n        DECORATION_SX[decoration] ?? {},\n        ...nodeSx,\n      ]}\n    >\n      {authorHtmlLabel(html) ?? children}\n    </MuiBox>\n  )\n})\nInlineText.displayName = 'AglynInlineText'\n\nexport const schema: Aglyn.ComponentSchema<InlineTextProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Inline Text',\n  description:\n    'One run of text inside a sentence — put several side by side in a ' +\n    'paragraph to emphasize a phrase without breaking the line.',\n  category: Aglyn.ComponentCategory.TEXT,\n  icon: { path: mdiFormatColorText.path, sx: { color: '#057822' } },\n  flags: {\n    // Static: may sit in a subtree that keeps its server HTML (AGL-3581).\n    lazyHydration: Aglyn.FEATURE_FLAG.ENABLED,\n    // The run IS its text: edited inline on the canvas, like Typography.\n    textEditable: Aglyn.FEATURE_FLAG.ENABLED,\n    richTextEditable: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  // Emphasis only (AGL-2557), for a different reason than the controls: this\n  // run is not interactive, it is `display: inline`. Every element it may\n  // render as is phrasing content — that is the guarantee INLINE_TEXT_ELEMENTS\n  // exists to make — so a list inside one is a block in an inline box, which\n  // the parser lifts straight back out of the enclosing paragraph. Links stay\n  // with Screen Link, whose job is a resolved target rather than a typed href.\n  richTextCommands: [Aglyn.RICH_TEXT_COMMANDS.EMPHASIS],\n  attributes: [\n    FIELD_TEXT_CONTENT,\n    {\n      name: 'element',\n      label: 'Component',\n      description:\n        'The DOM element this run renders as. `strong` and `em` carry ' +\n        'meaning for screen readers and search engines; `mark` marks a ' +\n        'highlighted phrase; `span` is purely visual.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: INLINE_TEXT_ELEMENTS.map((value) => ({ value, label: value })),\n    },\n    {\n      name: 'tone',\n      label: 'Color',\n      description:\n        \"Palette token for this run. Two-tone text is a muted sentence \" +\n        'with one run set to Primary (or Accent) — theme tokens, so it ' +\n        'still reads correctly in dark mode.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'primary', label: 'Text primary' },\n        { value: 'secondary', label: 'Text muted' },\n        { value: 'disabled', label: 'Text disabled' },\n        { value: 'accent', label: 'Accent' },\n        { value: 'accentAlt', label: 'Accent alternate' },\n        { value: 'success', label: 'Success' },\n        { value: 'warning', label: 'Warning' },\n        { value: 'error', label: 'Error' },\n      ],\n    },\n    {\n      name: 'weight',\n      label: 'Weight',\n      description: 'Font weight for this run only.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'regular', label: 'Regular' },\n        { value: 'medium', label: 'Medium' },\n        { value: 'semibold', label: 'Semi bold' },\n        { value: 'bold', label: 'Bold' },\n      ],\n    },\n    {\n      name: 'decoration',\n      label: 'Underline / strike',\n      description:\n        'Inherit follows the surrounding text, including a link\\'s ' +\n        'underline — an underline PROPAGATES down and cannot be switched ' +\n        'off from inside. None does switch it off, at the cost of the run ' +\n        'no longer breaking across lines, so keep it to a short phrase.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'none', label: 'None (does not wrap)' },\n        { value: 'underline', label: 'Underline' },\n        { value: 'lineThrough', label: 'Strikethrough' },\n      ],\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Inline Text',\n    pluginId: BUNDLE_ID,\n    description: 'One run of text inside a sentence',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { element: 'span', children: 'Inline text' },\n    },\n  },\n  {\n    $id: generatePresetId(ID, 'emphasis'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Emphasized Text',\n    pluginId: BUNDLE_ID,\n    description: 'A phrase picked out of a muted sentence',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: { path: mdiFormatColorHighlight.path, sx: { color: '#057822' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        element: 'strong',\n        tone: 'primary',\n        weight: 'bold',\n        children: 'the emphasized phrase',\n      },\n    },\n  },\n  {\n    // The whole shape in one drop (AGL-1235): the reason the emphasis was\n    // never authored is that assembling it by hand meant a container, three\n    // runs and a colour on each. This is that assembly, ready to retype.\n    $id: generatePresetId(ID, 'statement'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Two-tone Statement',\n    pluginId: BUNDLE_ID,\n    description: 'A muted sentence with one phrase emphasized',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: { path: mdiFormatColorHighlight.path, sx: { color: '#057822' } },\n    data: {\n      $id: null,\n      // A real `<p>`, not a div: the runs are phrasing content, so the\n      // paragraph is the honest container and screen readers get a\n      // sentence rather than three unrelated fragments.\n      componentId: 'muiBox',\n      pluginId: BUNDLE_ID,\n      props: { component: 'p' },\n      // Node-level sx (AGL-1346) — the record the Styles panel edits.\n      sx: { marginTop: 0, marginRight: 0, marginBottom: 0, marginLeft: 0 },\n      nodes: [\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'span',\n            tone: 'secondary',\n            children: 'Everything you build is ',\n          },\n        },\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'strong',\n            tone: 'primary',\n            weight: 'bold',\n            children: 'part of the platform',\n          },\n        },\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'span',\n            tone: 'secondary',\n            children: ', not bolted onto it.',\n          },\n        },\n      ],\n    },\n  },\n]\n\nexport default InlineText\n"],"names":["Aglyn","mdiFormatColorHighlight","mdiFormatColorText","MuiBox","forwardRef","BUNDLE_ID","FIELD_TEXT_CONTENT","authorHtmlLabel","generatePresetId","ID","INLINE_TEXT_ELEMENTS","TONE_COLOR","inherit","undefined","primary","secondary","disabled","accent","accentAlt","success","warning","error","FONT_WEIGHT","regular","medium","semibold","bold","DECORATION_SX","none","display","textDecoration","underline","lineThrough","InlineText","props","ref","element","tone","weight","decoration","children","sx","html","rest","component","includes","nodeSx","Array","isArray","color","fontWeight","displayName","schema","$id","pluginId","description","category","ComponentCategory","TEXT","icon","path","flags","lazyHydration","FEATURE_FLAG","ENABLED","textEditable","richTextEditable","richTextCommands","RICH_TEXT_COMMANDS","EMPHASIS","attributes","name","label","FieldComponentType","SELECT","options","map","value","presets","type","NodeType","PRESET","data","componentId","marginTop","marginRight","marginBottom","marginLeft","nodes"],"mappings":"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"}

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

@@ -144,6 +144,10 @@ export const schema = {
         }
     ],
     flags: {
+        // Static: may sit in a subtree that keeps its server HTML (AGL-3581).
+        // Not `childrenInRoot` — it draws its own placeholder when it has
+        // no children, which is what a held root looks like.
+        lazyHydration: Aglyn.FEATURE_FLAG.ENABLED,
         cloning: Aglyn.FEATURE_FLAG.DISABLED,
         dropping: Aglyn.FEATURE_FLAG.DISABLED
     },

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

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

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

@@ -128,6 +128,12 @@ export const schema = {
     $id: ID,
     pluginId: BUNDLE_ID,
     displayName: 'Link Container',
+    // Static: may sit in a subtree that keeps its server HTML (AGL-3581).
+    // Not `childrenInRoot`: the anchor it renders through adds markup of
+    // its own beside its children.
+    flags: {
+        lazyHydration: Aglyn.FEATURE_FLAG.ENABLED
+    },
     description: 'Container that is itself a link — put an icon, a heading and a ' + 'description inside and the whole box becomes one target.',
     category: Aglyn.ComponentCategory.NAVIGATION,
     icon: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/link-box.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 { mdiLinkBoxOutline } from '@aglyn/shared-data-mdi'\nimport { AppLink } from '@aglyn/shared-ui-jsx'\nimport MuiBox 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'\nimport {\n  linkContainerA11yProps,\n  linkContainerLabelFieldProps,\n  REDUNDANT_ATTRIBUTE,\n} from './link-box-accessible-name'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'muiLinkBox'\n\nexport interface LinkBoxProps {\n  /** Target screen id, resolved from the host routing map at render time. */\n  screenId?: string\n  /** External URL escape hatch, used only when no `screenId` is set. */\n  href?: string\n  /** Opens in a new tab. External destinations only. */\n  newTab?: boolean\n  /** The link's name for assistive tech, when its content supplies none. */\n  ariaLabel?: string\n  /**\n   * The box repeats a link beside it to the same destination, so it is\n   * hidden from assistive tech and left out of the tab order.\n   */\n  redundant?: boolean\n  /**\n   * Authored node styles, handed over by the renderer rather than typed into\n   * an attribute. Declared because the merge below reads it: undeclared, no\n   * typed caller could style a tile (AGL-1323).\n   */\n  sx?: SxProps\n  children?: ReactNode\n}\n\n/**\n * A container that IS the link — icon, heading and description inside one\n * anchor, instead of a tile whose only clickable part is its title.\n *\n * Every other linking element in the plugin is a leaf: Screen Link and\n * Button both render their `children` as inline text, so `nodeAcceptsChildren`\n * reports false and the canvas will not let anything be dropped inside them.\n * That left no way to author a card, a mega-menu tile, or a linked logo —\n * the shapes where the whole box is meant to be one target (AGL-1231).\n *\n * Nothing interactive may be nested inside: an `<a>` inside an `<a>` is\n * invalid HTML and browsers unnest it, which silently moves half the tile\n * back out of the link. Convert an inner Screen Link to plain Text when you\n * wrap it in one of these.\n *\n * The link is named by the text inside it, so a box holding only an icon\n * needs `ariaLabel` — or `redundant`, when a link beside it already goes to\n * the same place (AGL-2886). Both land on the anchor in every branch below,\n * so the canvas carries the same attributes the published page does.\n */\nconst LinkBox = forwardRef<HTMLElement, LinkBoxProps>((props, ref) => {\n  const {\n    screenId,\n    href: externalHref,\n    newTab,\n    ariaLabel,\n    redundant,\n    children,\n    sx,\n    ...rest\n  } = props\n  const a11y = linkContainerA11yProps(ariaLabel, redundant)\n  // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n  // Spreading `rest` with `sx` still inside it would REPLACE the baseline\n  // below rather than merge with it, so every styled tile would quietly lose\n  // `textDecoration: none` and get the browser's underlined-blue anchor.\n  const nodeSx = Array.isArray(sx) ? sx : sx ? [sx] : []\n  // Shared resolution (AGL-1335): screen id first, `javascript:`/`data:`\n  // hrefs refused, `screen:`-prefixed prop values understood in either slot.\n  // \"External\" means it leaves the site, not merely \"typed by hand\": a\n  // site-relative `/pricing` in the href field must stay in the tab, or the\n  // visitor loses their history for nothing.\n  const {\n    href,\n    suppressNavigation,\n    leavesSite: external,\n  } = Aglyn.useLinkTarget(screenId, externalHref)\n\n  // The unresolved and suppressed cases keep the same ELEMENT, not just the\n  // same box (AGL-1268): this used to render a `<div>` here and an `<a>` when\n  // the screen resolved, so the node's element type depended on the screens\n  // map — a screen published or unpublished between renders changed the DOM\n  // shape. An `<a>` without `href` is HTML's placeholder link: identical\n  // element, non-interactive, and the canvas stays inert exactly as before.\n  // The style floor matches the active branch so the two render identically.\n  if (!href || suppressNavigation) {\n    return (\n      <MuiBox\n        ref={ref}\n        component=\"a\"\n        {...rest}\n        {...a11y}\n        sx={[\n          { display: 'block', color: 'inherit', textDecoration: 'none' },\n          ...nodeSx,\n        ]}\n      >\n        {children}\n      </MuiBox>\n    )\n  }\n  return (\n    <AppLink\n      ref={ref}\n      // NOT `componentVariant=\"naked\"`: that branch renders a bare NextLink,\n      // which does not process `sx` — it lands on the DOM as a literal `sx=\"\"`\n      // attribute and every style is silently dropped. The default branch is\n      // MUI's Link, which does. The anchor chrome it brings is neutralised by\n      // the baseline below.\n      href={href}\n      {...(newTab && external\n        ? { target: '_blank', rel: 'noopener noreferrer' }\n        : {})}\n      {...rest}\n      {...a11y}\n      // `display: block` so the anchor takes the tile's box, and no anchor\n      // chrome — authors then style it exactly as they would a Box. This is\n      // only the floor: node styles come after it and win.\n      sx={[\n        { display: 'block', color: 'inherit', textDecoration: 'none' },\n        ...nodeSx,\n      ]}\n    >\n      {children}\n    </AppLink>\n  )\n})\nLinkBox.displayName = 'AglynLinkBox'\n\n/** A label is announced by nothing once the link is hidden as a duplicate. */\nconst NOT_REDUNDANT = { when: REDUNDANT_ATTRIBUTE, is: true, notMatch: true }\n\nexport const schema: Aglyn.ComponentSchema<LinkBoxProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Link Container',\n  description:\n    'Container that is itself a link — put an icon, a heading and a ' +\n    'description inside and the whole box becomes one target.',\n  category: Aglyn.ComponentCategory.NAVIGATION,\n  icon: { path: mdiLinkBoxOutline.path, sx: { color: '#2196f3' } },\n  attributes: [\n    {\n      name: 'screenId',\n      description:\n        'Page this box navigates to. The address is generated from the ' +\n        'published path at render time, so it keeps working when the ' +\n        \"page's slug or parent changes.\",\n      component: Aglyn.FieldComponentType.SCREEN_SELECT,\n      label: 'Page',\n    },\n    {\n      name: 'href',\n      description:\n        'Where the whole container goes when it points off this site. ' +\n        'Ignored while Page names one. Everything inside the box becomes ' +\n        'part of this one link, so it should hold no other link.',\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      name: 'newTab',\n      description:\n        'Open in a new tab. Applies to external URLs only — a link to one ' +\n        'of your own pages stays in the tab so the visitor keeps their ' +\n        'history.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Open in a new tab',\n    },\n    {\n      name: 'ariaLabel',\n      label: 'Accessible label',\n      description:\n        'Names this link for screen readers. Needed when the box holds only ' +\n        'an icon, or an image with no alt text, which is otherwise announced ' +\n        'as just \"link\". Leave it empty when there is text inside: that text ' +\n        'already names the link.',\n      // A text field, so the Attributes panel takes a binding here as it\n      // does in every other text attribute.\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      condition: NOT_REDUNDANT,\n      // Warns while nothing names the link (AGL-2886).\n      resolveProps: linkContainerLabelFieldProps,\n    },\n    {\n      name: REDUNDANT_ATTRIBUTE,\n      label: 'Duplicate of another link',\n      description:\n        'Turn on when another link beside this box goes to the same place, ' +\n        'such as the arrow on a card whose title is already a link. Screen ' +\n        'readers and the Tab key then skip this box, so those visitors meet ' +\n        'the destination once, and a click or tap still follows it. Leave it ' +\n        'off when this is the only link to where it goes.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Link Container',\n    pluginId: BUNDLE_ID,\n    description: 'A whole box that links somewhere',\n    category: Aglyn.ComponentCategory.NAVIGATION,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      // Ships with padding and a hover tint: an empty, zero-height anchor\n      // dropped on the canvas looks like nothing happened.\n      props: {},\n      // Node-level sx (AGL-1346) — the record the Styles panel edits.\n      sx: {\n        display: 'block',\n        paddingTop: 2,\n        paddingRight: 2,\n        paddingBottom: 2,\n        paddingLeft: 2,\n        borderRadius: 1,\n        '&:hover': { backgroundColor: 'action.hover' },\n      },\n    },\n  },\n]\n\nexport default LinkBox\n"],"names":["Aglyn","mdiLinkBoxOutline","AppLink","MuiBox","forwardRef","BUNDLE_ID","generatePresetId","linkContainerA11yProps","linkContainerLabelFieldProps","REDUNDANT_ATTRIBUTE","ID","LinkBox","props","ref","screenId","href","externalHref","newTab","ariaLabel","redundant","children","sx","rest","a11y","nodeSx","Array","isArray","suppressNavigation","leavesSite","external","useLinkTarget","component","display","color","textDecoration","target","rel","displayName","NOT_REDUNDANT","when","is","notMatch","schema","$id","pluginId","description","category","ComponentCategory","NAVIGATION","icon","path","attributes","name","FieldComponentType","SCREEN_SELECT","label","TEXT_FIELD","resolveProps","bareFragmentLinkFieldProps","SWITCH","condition","presets","type","NodeType","PRESET","data","componentId","paddingTop","paddingRight","paddingBottom","paddingLeft","borderRadius","backgroundColor"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/link-box.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 { mdiLinkBoxOutline } from '@aglyn/shared-data-mdi'\nimport { AppLink } from '@aglyn/shared-ui-jsx'\nimport MuiBox 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'\nimport {\n  linkContainerA11yProps,\n  linkContainerLabelFieldProps,\n  REDUNDANT_ATTRIBUTE,\n} from './link-box-accessible-name'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'muiLinkBox'\n\nexport interface LinkBoxProps {\n  /** Target screen id, resolved from the host routing map at render time. */\n  screenId?: string\n  /** External URL escape hatch, used only when no `screenId` is set. */\n  href?: string\n  /** Opens in a new tab. External destinations only. */\n  newTab?: boolean\n  /** The link's name for assistive tech, when its content supplies none. */\n  ariaLabel?: string\n  /**\n   * The box repeats a link beside it to the same destination, so it is\n   * hidden from assistive tech and left out of the tab order.\n   */\n  redundant?: boolean\n  /**\n   * Authored node styles, handed over by the renderer rather than typed into\n   * an attribute. Declared because the merge below reads it: undeclared, no\n   * typed caller could style a tile (AGL-1323).\n   */\n  sx?: SxProps\n  children?: ReactNode\n}\n\n/**\n * A container that IS the link — icon, heading and description inside one\n * anchor, instead of a tile whose only clickable part is its title.\n *\n * Every other linking element in the plugin is a leaf: Screen Link and\n * Button both render their `children` as inline text, so `nodeAcceptsChildren`\n * reports false and the canvas will not let anything be dropped inside them.\n * That left no way to author a card, a mega-menu tile, or a linked logo —\n * the shapes where the whole box is meant to be one target (AGL-1231).\n *\n * Nothing interactive may be nested inside: an `<a>` inside an `<a>` is\n * invalid HTML and browsers unnest it, which silently moves half the tile\n * back out of the link. Convert an inner Screen Link to plain Text when you\n * wrap it in one of these.\n *\n * The link is named by the text inside it, so a box holding only an icon\n * needs `ariaLabel` — or `redundant`, when a link beside it already goes to\n * the same place (AGL-2886). Both land on the anchor in every branch below,\n * so the canvas carries the same attributes the published page does.\n */\nconst LinkBox = forwardRef<HTMLElement, LinkBoxProps>((props, ref) => {\n  const {\n    screenId,\n    href: externalHref,\n    newTab,\n    ariaLabel,\n    redundant,\n    children,\n    sx,\n    ...rest\n  } = props\n  const a11y = linkContainerA11yProps(ariaLabel, redundant)\n  // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n  // Spreading `rest` with `sx` still inside it would REPLACE the baseline\n  // below rather than merge with it, so every styled tile would quietly lose\n  // `textDecoration: none` and get the browser's underlined-blue anchor.\n  const nodeSx = Array.isArray(sx) ? sx : sx ? [sx] : []\n  // Shared resolution (AGL-1335): screen id first, `javascript:`/`data:`\n  // hrefs refused, `screen:`-prefixed prop values understood in either slot.\n  // \"External\" means it leaves the site, not merely \"typed by hand\": a\n  // site-relative `/pricing` in the href field must stay in the tab, or the\n  // visitor loses their history for nothing.\n  const {\n    href,\n    suppressNavigation,\n    leavesSite: external,\n  } = Aglyn.useLinkTarget(screenId, externalHref)\n\n  // The unresolved and suppressed cases keep the same ELEMENT, not just the\n  // same box (AGL-1268): this used to render a `<div>` here and an `<a>` when\n  // the screen resolved, so the node's element type depended on the screens\n  // map — a screen published or unpublished between renders changed the DOM\n  // shape. An `<a>` without `href` is HTML's placeholder link: identical\n  // element, non-interactive, and the canvas stays inert exactly as before.\n  // The style floor matches the active branch so the two render identically.\n  if (!href || suppressNavigation) {\n    return (\n      <MuiBox\n        ref={ref}\n        component=\"a\"\n        {...rest}\n        {...a11y}\n        sx={[\n          { display: 'block', color: 'inherit', textDecoration: 'none' },\n          ...nodeSx,\n        ]}\n      >\n        {children}\n      </MuiBox>\n    )\n  }\n  return (\n    <AppLink\n      ref={ref}\n      // NOT `componentVariant=\"naked\"`: that branch renders a bare NextLink,\n      // which does not process `sx` — it lands on the DOM as a literal `sx=\"\"`\n      // attribute and every style is silently dropped. The default branch is\n      // MUI's Link, which does. The anchor chrome it brings is neutralised by\n      // the baseline below.\n      href={href}\n      {...(newTab && external\n        ? { target: '_blank', rel: 'noopener noreferrer' }\n        : {})}\n      {...rest}\n      {...a11y}\n      // `display: block` so the anchor takes the tile's box, and no anchor\n      // chrome — authors then style it exactly as they would a Box. This is\n      // only the floor: node styles come after it and win.\n      sx={[\n        { display: 'block', color: 'inherit', textDecoration: 'none' },\n        ...nodeSx,\n      ]}\n    >\n      {children}\n    </AppLink>\n  )\n})\nLinkBox.displayName = 'AglynLinkBox'\n\n/** A label is announced by nothing once the link is hidden as a duplicate. */\nconst NOT_REDUNDANT = { when: REDUNDANT_ATTRIBUTE, is: true, notMatch: true }\n\nexport const schema: Aglyn.ComponentSchema<LinkBoxProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Link Container',\n  // Static: may sit in a subtree that keeps its server HTML (AGL-3581).\n  // Not `childrenInRoot`: the anchor it renders through adds markup of\n  // its own beside its children.\n  flags: { lazyHydration: Aglyn.FEATURE_FLAG.ENABLED },\n  description:\n    'Container that is itself a link — put an icon, a heading and a ' +\n    'description inside and the whole box becomes one target.',\n  category: Aglyn.ComponentCategory.NAVIGATION,\n  icon: { path: mdiLinkBoxOutline.path, sx: { color: '#2196f3' } },\n  attributes: [\n    {\n      name: 'screenId',\n      description:\n        'Page this box navigates to. The address is generated from the ' +\n        'published path at render time, so it keeps working when the ' +\n        \"page's slug or parent changes.\",\n      component: Aglyn.FieldComponentType.SCREEN_SELECT,\n      label: 'Page',\n    },\n    {\n      name: 'href',\n      description:\n        'Where the whole container goes when it points off this site. ' +\n        'Ignored while Page names one. Everything inside the box becomes ' +\n        'part of this one link, so it should hold no other link.',\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      name: 'newTab',\n      description:\n        'Open in a new tab. Applies to external URLs only — a link to one ' +\n        'of your own pages stays in the tab so the visitor keeps their ' +\n        'history.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Open in a new tab',\n    },\n    {\n      name: 'ariaLabel',\n      label: 'Accessible label',\n      description:\n        'Names this link for screen readers. Needed when the box holds only ' +\n        'an icon, or an image with no alt text, which is otherwise announced ' +\n        'as just \"link\". Leave it empty when there is text inside: that text ' +\n        'already names the link.',\n      // A text field, so the Attributes panel takes a binding here as it\n      // does in every other text attribute.\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      condition: NOT_REDUNDANT,\n      // Warns while nothing names the link (AGL-2886).\n      resolveProps: linkContainerLabelFieldProps,\n    },\n    {\n      name: REDUNDANT_ATTRIBUTE,\n      label: 'Duplicate of another link',\n      description:\n        'Turn on when another link beside this box goes to the same place, ' +\n        'such as the arrow on a card whose title is already a link. Screen ' +\n        'readers and the Tab key then skip this box, so those visitors meet ' +\n        'the destination once, and a click or tap still follows it. Leave it ' +\n        'off when this is the only link to where it goes.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Link Container',\n    pluginId: BUNDLE_ID,\n    description: 'A whole box that links somewhere',\n    category: Aglyn.ComponentCategory.NAVIGATION,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      // Ships with padding and a hover tint: an empty, zero-height anchor\n      // dropped on the canvas looks like nothing happened.\n      props: {},\n      // Node-level sx (AGL-1346) — the record the Styles panel edits.\n      sx: {\n        display: 'block',\n        paddingTop: 2,\n        paddingRight: 2,\n        paddingBottom: 2,\n        paddingLeft: 2,\n        borderRadius: 1,\n        '&:hover': { backgroundColor: 'action.hover' },\n      },\n    },\n  },\n]\n\nexport default LinkBox\n"],"names":["Aglyn","mdiLinkBoxOutline","AppLink","MuiBox","forwardRef","BUNDLE_ID","generatePresetId","linkContainerA11yProps","linkContainerLabelFieldProps","REDUNDANT_ATTRIBUTE","ID","LinkBox","props","ref","screenId","href","externalHref","newTab","ariaLabel","redundant","children","sx","rest","a11y","nodeSx","Array","isArray","suppressNavigation","leavesSite","external","useLinkTarget","component","display","color","textDecoration","target","rel","displayName","NOT_REDUNDANT","when","is","notMatch","schema","$id","pluginId","flags","lazyHydration","FEATURE_FLAG","ENABLED","description","category","ComponentCategory","NAVIGATION","icon","path","attributes","name","FieldComponentType","SCREEN_SELECT","label","TEXT_FIELD","resolveProps","bareFragmentLinkFieldProps","SWITCH","condition","presets","type","NodeType","PRESET","data","componentId","paddingTop","paddingRight","paddingBottom","paddingLeft","borderRadius","backgroundColor"],"mappings":"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"}

package/src/lib/components/list-item-text.js

@@ -32,6 +32,8 @@ export const schema = {
     // Text lives in `primary`/`secondary` (not `children`), so this component
     // exposes its own text fields instead of FIELD_TEXT_CONTENT.
     flags: {
+        // Static: may sit in a subtree that keeps its server HTML (AGL-3581).
+        lazyHydration: Aglyn.FEATURE_FLAG.ENABLED,
         // …and MUI reads `children` ONLY as a fallback for a missing `primary`
         // (`primary = primaryProp != null ? primaryProp : children`), so with a
         // primary set — which every preset and every authored row has — a node

package/src/lib/components/list-item-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/list-item-text.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  mdiFormatListChecks,\n} from '@aglyn/shared-data-mdi'\nimport ListItemText, {\n  type ListItemTextProps,\n} from '@mui/material/ListItemText'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; keep the legacy ids.\nexport const ID: Aglyn.ComponentId = 'muiListItemText'\n\nexport const schema: Aglyn.ComponentSchema<ListItemTextProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'List Item Text',\n  description: 'The primary and secondary text pair inside a list row.',\n  category: Aglyn.ComponentCategory.DATA_DISPLAY,\n  icon: { path: mdiFormatListChecks.path },\n  // Text lives in `primary`/`secondary` (not `children`), so this component\n  // exposes its own text fields instead of FIELD_TEXT_CONTENT.\n  flags: {\n    // …and MUI reads `children` ONLY as a fallback for a missing `primary`\n    // (`primary = primaryProp != null ? primaryProp : children`), so with a\n    // primary set — which every preset and every authored row has — a node\n    // dropped in here is discarded at render with no warning. Same shape as\n    // the Markdown block that swallowed three /press screenshots\n    // (AGL-1388): the row's text is its attributes, not its child list.\n    dropping: Aglyn.FEATURE_FLAG.DISABLED,\n  },\n  attributes: [\n    {\n      name: 'primary',\n      description: 'The main content text.',\n      component: Aglyn.FieldComponentType.TEXTAREA,\n      label: 'Primary text',\n    },\n    {\n      name: 'secondary',\n      description: 'The secondary content text.',\n      component: Aglyn.FieldComponentType.TEXTAREA,\n      label: 'Secondary text',\n    },\n    {\n      name: 'inset',\n      description:\n        'Indents the text to line up with rows that have an icon or ' +\n        'avatar, so a mixed list keeps one text column.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Inset?',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'List Item Text',\n    icon: { path: mdiFormatListChecks.path },\n    category: Aglyn.ComponentCategory.DATA_DISPLAY,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        primary: 'Item Primary',\n        secondary: 'This is the secondary',\n      },\n    },\n  },\n]\n\nexport default ListItemText\n"],"names":["Aglyn","mdiFormatListChecks","ListItemText","BUNDLE_ID","generatePresetId","ID","schema","$id","pluginId","displayName","description","category","ComponentCategory","DATA_DISPLAY","icon","path","flags","dropping","FEATURE_FLAG","DISABLED","attributes","name","component","FieldComponentType","TEXTAREA","label","SWITCH","presets","type","NodeType","PRESET","data","componentId","props","primary","secondary"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SACEC,mBAAmB,QACd,yBAAwB;AAC/B,OAAOC,kBAEA,6BAA4B;AACnC,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SAASC,gBAAgB,QAAQ,iCAA6B;AAE9D,wEAAwE;AACxE,OAAO,MAAMC,KAAwB,kBAAiB;AAEtD,OAAO,MAAMC,SAAmD;IAC9DC,KAAKF;IACLG,UAAUL;IACVM,aAAa;IACbC,aAAa;IACbC,UAAUX,MAAMY,iBAAiB,CAACC,YAAY;IAC9CC,MAAM;QAAEC,MAAMd,oBAAoBc,IAAI;IAAC;IACvC,0EAA0E;IAC1E,6DAA6D;IAC7DC,OAAO;QACL,uEAAuE;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,wEAAwE;QACxE,6DAA6D;QAC7D,oEAAoE;QACpEC,UAAUjB,MAAMkB,YAAY,CAACC,QAAQ;IACvC;IACAC,YAAY;QACV;YACEC,MAAM;YACNX,aAAa;YACbY,WAAWtB,MAAMuB,kBAAkB,CAACC,QAAQ;YAC5CC,OAAO;QACT;QACA;YACEJ,MAAM;YACNX,aAAa;YACbY,WAAWtB,MAAMuB,kBAAkB,CAACC,QAAQ;YAC5CC,OAAO;QACT;QACA;YACEJ,MAAM;YACNX,aACE,gEACA;YACFY,WAAWtB,MAAMuB,kBAAkB,CAACG,MAAM;YAC1CD,OAAO;QACT;KACD;AACH,EAAC;AAED,OAAO,MAAME,UAAgC;IAC3C;QACEpB,KAAKH,iBAAiBC;QACtBuB,MAAM5B,MAAM6B,QAAQ,CAACC,MAAM;QAC3BrB,aAAa;QACbK,MAAM;YAAEC,MAAMd,oBAAoBc,IAAI;QAAC;QACvCJ,UAAUX,MAAMY,iBAAiB,CAACC,YAAY;QAC9CkB,MAAM;YACJxB,KAAK;YACLyB,aAAa3B;YACbG,UAAUL;YACV8B,OAAO;gBACLC,SAAS;gBACTC,WAAW;YACb;QACF;IACF;CACD,CAAA;AAED,eAAejC,aAAY"}
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/list-item-text.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  mdiFormatListChecks,\n} from '@aglyn/shared-data-mdi'\nimport ListItemText, {\n  type ListItemTextProps,\n} from '@mui/material/ListItemText'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; keep the legacy ids.\nexport const ID: Aglyn.ComponentId = 'muiListItemText'\n\nexport const schema: Aglyn.ComponentSchema<ListItemTextProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'List Item Text',\n  description: 'The primary and secondary text pair inside a list row.',\n  category: Aglyn.ComponentCategory.DATA_DISPLAY,\n  icon: { path: mdiFormatListChecks.path },\n  // Text lives in `primary`/`secondary` (not `children`), so this component\n  // exposes its own text fields instead of FIELD_TEXT_CONTENT.\n  flags: {\n    // Static: may sit in a subtree that keeps its server HTML (AGL-3581).\n    lazyHydration: Aglyn.FEATURE_FLAG.ENABLED,\n    // …and MUI reads `children` ONLY as a fallback for a missing `primary`\n    // (`primary = primaryProp != null ? primaryProp : children`), so with a\n    // primary set — which every preset and every authored row has — a node\n    // dropped in here is discarded at render with no warning. Same shape as\n    // the Markdown block that swallowed three /press screenshots\n    // (AGL-1388): the row's text is its attributes, not its child list.\n    dropping: Aglyn.FEATURE_FLAG.DISABLED,\n  },\n  attributes: [\n    {\n      name: 'primary',\n      description: 'The main content text.',\n      component: Aglyn.FieldComponentType.TEXTAREA,\n      label: 'Primary text',\n    },\n    {\n      name: 'secondary',\n      description: 'The secondary content text.',\n      component: Aglyn.FieldComponentType.TEXTAREA,\n      label: 'Secondary text',\n    },\n    {\n      name: 'inset',\n      description:\n        'Indents the text to line up with rows that have an icon or ' +\n        'avatar, so a mixed list keeps one text column.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Inset?',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'List Item Text',\n    icon: { path: mdiFormatListChecks.path },\n    category: Aglyn.ComponentCategory.DATA_DISPLAY,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        primary: 'Item Primary',\n        secondary: 'This is the secondary',\n      },\n    },\n  },\n]\n\nexport default ListItemText\n"],"names":["Aglyn","mdiFormatListChecks","ListItemText","BUNDLE_ID","generatePresetId","ID","schema","$id","pluginId","displayName","description","category","ComponentCategory","DATA_DISPLAY","icon","path","flags","lazyHydration","FEATURE_FLAG","ENABLED","dropping","DISABLED","attributes","name","component","FieldComponentType","TEXTAREA","label","SWITCH","presets","type","NodeType","PRESET","data","componentId","props","primary","secondary"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SACEC,mBAAmB,QACd,yBAAwB;AAC/B,OAAOC,kBAEA,6BAA4B;AACnC,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SAASC,gBAAgB,QAAQ,iCAA6B;AAE9D,wEAAwE;AACxE,OAAO,MAAMC,KAAwB,kBAAiB;AAEtD,OAAO,MAAMC,SAAmD;IAC9DC,KAAKF;IACLG,UAAUL;IACVM,aAAa;IACbC,aAAa;IACbC,UAAUX,MAAMY,iBAAiB,CAACC,YAAY;IAC9CC,MAAM;QAAEC,MAAMd,oBAAoBc,IAAI;IAAC;IACvC,0EAA0E;IAC1E,6DAA6D;IAC7DC,OAAO;QACL,sEAAsE;QACtEC,eAAejB,MAAMkB,YAAY,CAACC,OAAO;QACzC,uEAAuE;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,wEAAwE;QACxE,6DAA6D;QAC7D,oEAAoE;QACpEC,UAAUpB,MAAMkB,YAAY,CAACG,QAAQ;IACvC;IACAC,YAAY;QACV;YACEC,MAAM;YACNb,aAAa;YACbc,WAAWxB,MAAMyB,kBAAkB,CAACC,QAAQ;YAC5CC,OAAO;QACT;QACA;YACEJ,MAAM;YACNb,aAAa;YACbc,WAAWxB,MAAMyB,kBAAkB,CAACC,QAAQ;YAC5CC,OAAO;QACT;QACA;YACEJ,MAAM;YACNb,aACE,gEACA;YACFc,WAAWxB,MAAMyB,kBAAkB,CAACG,MAAM;YAC1CD,OAAO;QACT;KACD;AACH,EAAC;AAED,OAAO,MAAME,UAAgC;IAC3C;QACEtB,KAAKH,iBAAiBC;QACtByB,MAAM9B,MAAM+B,QAAQ,CAACC,MAAM;QAC3BvB,aAAa;QACbK,MAAM;YAAEC,MAAMd,oBAAoBc,IAAI;QAAC;QACvCJ,UAAUX,MAAMY,iBAAiB,CAACC,YAAY;QAC9CoB,MAAM;YACJ1B,KAAK;YACL2B,aAAa7B;YACbG,UAAUL;YACVgC,OAAO;gBACLC,SAAS;gBACTC,WAAW;YACb;QACF;IACF;CACD,CAAA;AAED,eAAenC,aAAY"}

package/src/lib/components/list-item.js

@@ -40,6 +40,10 @@ export const schema = {
     $id: ID,
     pluginId: BUNDLE_ID,
     displayName: 'List Item',
+    // Static: may sit in a subtree that keeps its server HTML (AGL-3581).
+    flags: {
+        lazyHydration: Aglyn.FEATURE_FLAG.ENABLED
+    },
     description: 'One row of a list.',
     category: Aglyn.ComponentCategory.DATA_DISPLAY,
     icon: {