@aglyn/plugins-mui 1.0.0-beta.143

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

@@ -0,0 +1,336 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiImageMultiple, mdiImageMultipleOutline } from "@aglyn/shared-data-mdi";
+import MuiImageList from "@mui/material/ImageList";
+import MuiImageListItem from "@mui/material/ImageListItem";
+import MuiImageListItemBar from "@mui/material/ImageListItemBar";
+import { forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const IMAGE_LIST_ID = 'muiImageList';
+export const IMAGE_LIST_ITEM_ID = 'muiImageListItem';
+/** Number fields round-trip as strings; MUI's grid math needs numbers. */ export function toCount(value, fallback) {
+    if (value == null || value === '') return fallback;
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed) || parsed < 0) return fallback;
+    return Math.round(parsed);
+}
+/**
+ * Image list (https://mui.com/material-ui/react-image-list/): a masonry
+ * or quilted grid of images, denser than a Grid of cards.
+ */ const ImageListElement = /*#__PURE__*/ forwardRef((rawProps, ref)=>{
+    // Cleared props dropped before the resolvers below read them
+    // (AGL-1451); `rest` also spreads straight into MUI.
+    const props = dropClearedProps(rawProps);
+    const { cols, gap, rowHeight, variant, children } = props, rest = _object_without_properties_loose(props, [
+        "cols",
+        "gap",
+        "rowHeight",
+        "variant",
+        "children"
+    ]);
+    const resolvedVariant = [
+        'standard',
+        'quilted',
+        'masonry',
+        'woven'
+    ].includes(variant) ? variant : 'standard';
+    const height = toCount(rowHeight);
+    return /*#__PURE__*/ _jsx(MuiImageList, _extends({
+        ref: ref,
+        variant: resolvedVariant,
+        cols: toCount(cols, 3),
+        gap: toCount(gap, 4),
+        // A masonry list sizes rows from the images themselves; a fixed
+        // rowHeight silently defeats the whole variant.
+        rowHeight: resolvedVariant === 'masonry' ? 'auto' : height != null ? height : 'auto'
+    }, rest, {
+        // MUI types ImageList's children as NonNullable; the renderer
+        // always supplies the tile subtree.
+        children: children
+    }));
+});
+ImageListElement.displayName = 'AglynImageList';
+/**
+ * One tile. The image itself is an ordinary Image element dropped
+ * inside, so tiles keep the media-CDN srcSet, lazy loading and
+ * empty-source placeholder (AGL-74/175) rather than a second, worse
+ * image implementation living here.
+ */ export const ImageListItemElement = /*#__PURE__*/ forwardRef((rawProps, ref)=>{
+    const props = dropClearedProps(rawProps);
+    const { cols, rows, title, subtitle, barPosition, children } = props, rest = _object_without_properties_loose(props, [
+        "cols",
+        "rows",
+        "title",
+        "subtitle",
+        "barPosition",
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsxs(MuiImageListItem, _extends({
+        ref: ref,
+        cols: toCount(cols, 1),
+        rows: toCount(rows, 1)
+    }, rest, {
+        children: [
+            children,
+            title || subtitle ? /*#__PURE__*/ _jsx(MuiImageListItemBar, {
+                title: title || undefined,
+                subtitle: subtitle || undefined,
+                position: barPosition || 'bottom'
+            }) : null
+        ]
+    }));
+});
+ImageListItemElement.displayName = 'AglynImageListItem';
+/** Row height is meaningless on masonry — MUI forces `auto` there. */ const NOT_MASONRY = {
+    when: 'variant',
+    is: 'masonry',
+    notMatch: true
+};
+export const imageListSchema = {
+    $id: IMAGE_LIST_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Image List',
+    description: 'Dense grid of images — standard, quilted, masonry or woven.',
+    category: Aglyn.ComponentCategory.MEDIA,
+    icon: {
+        path: mdiImageMultiple.path,
+        sx: {
+            color: '#7b1fa2'
+        }
+    },
+    restrictChildren: [
+        Aglyn.LinealDirectiveFlag.LIMIT_TO,
+        {
+            components: [
+                IMAGE_LIST_ITEM_ID
+            ]
+        }
+    ],
+    attributes: [
+        {
+            name: 'variant',
+            label: 'Variant',
+            description: 'Standard is a plain grid; quilted lets tiles span columns and ' + 'rows; masonry keeps each image’s own aspect ratio; woven ' + 'alternates tile sizes.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // A real sentinel, not a deletion (AGL-1451): `standard` is one of
+            // MUI's four named variants and the resolver above already accepts
+            // it by name, so the option is a genuine choice — and the one an
+            // author needs in order to move a list BACK off quilted or masonry.
+            // Spelled `''` it could not persist (AGL-1191), so that move
+            // silently reverted.
+            options: [
+                {
+                    value: 'standard',
+                    label: 'Standard (default)'
+                },
+                {
+                    value: 'quilted',
+                    label: 'Quilted'
+                },
+                {
+                    value: 'masonry',
+                    label: 'Masonry'
+                },
+                {
+                    value: 'woven',
+                    label: 'Woven'
+                }
+            ]
+        },
+        {
+            name: 'cols',
+            label: 'Columns',
+            description: 'Number of columns. Default 3.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'gap',
+            label: 'Gap',
+            description: 'Space between tiles, in px. Default 4.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'rowHeight',
+            label: 'Row height',
+            description: 'Row height in px. Leave blank to size rows from the images.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number',
+            condition: NOT_MASONRY
+        }
+    ]
+};
+export const imageListItemSchema = {
+    $id: IMAGE_LIST_ITEM_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Image List Item',
+    description: 'One tile of an image list, with an optional caption bar.',
+    category: Aglyn.ComponentCategory.MEDIA,
+    icon: {
+        path: mdiImageMultipleOutline.path,
+        sx: {
+            color: '#7b1fa2'
+        }
+    },
+    attributes: [
+        {
+            name: 'title',
+            label: 'Caption',
+            description: 'Caption bar text. Leave both caption fields blank for no bar.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'subtitle',
+            label: 'Caption subtitle',
+            description: 'Second line of the caption bar.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'barPosition',
+            label: 'Caption position',
+            description: 'Where the caption bar sits relative to the image.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // `bottom` is MUI's own position value and the `|| 'bottom'`
+            // fallback below already resolves to it, so the sentinel is the
+            // value the code was reaching for anyway (AGL-1451).
+            options: [
+                {
+                    value: 'bottom',
+                    label: 'Bottom (default)'
+                },
+                {
+                    value: 'top',
+                    label: 'Top'
+                },
+                {
+                    value: 'below',
+                    label: 'Below the image'
+                }
+            ]
+        },
+        // The spans are read only by the quilted layout, but the variant
+        // that decides that lives on the PARENT list. A `condition` is
+        // evaluated against this node's own attribute form and cannot see
+        // it, so these stay visible and say so in their help text — a
+        // condition here would hide them permanently.
+        {
+            name: 'cols',
+            label: 'Column span',
+            description: 'How many columns this tile spans. Only the parent list’s ' + 'Quilted variant reads this.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'rows',
+            label: 'Row span',
+            description: 'How many rows this tile spans. Only the parent list’s Quilted ' + 'variant reads this.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        }
+    ]
+};
+const tile = (caption)=>({
+        $id: null,
+        componentId: IMAGE_LIST_ITEM_ID,
+        pluginId: BUNDLE_ID,
+        props: {
+            title: caption
+        },
+        nodes: [
+            {
+                $id: null,
+                componentId: 'image',
+                pluginId: BUNDLE_ID,
+                props: {
+                    alt: caption,
+                    height: '160px',
+                    objectFit: 'cover'
+                }
+            }
+        ]
+    });
+export const imageListPresets = [
+    {
+        $id: generatePresetId(IMAGE_LIST_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Image List',
+        pluginId: BUNDLE_ID,
+        description: 'Three-column gallery with captioned tiles',
+        category: Aglyn.ComponentCategory.MEDIA,
+        icon: imageListSchema.icon,
+        data: {
+            $id: null,
+            componentId: IMAGE_LIST_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                cols: 3,
+                gap: 8,
+                rowHeight: 160
+            },
+            nodes: [
+                tile('First image'),
+                tile('Second image'),
+                tile('Third image')
+            ]
+        }
+    },
+    {
+        $id: generatePresetId(IMAGE_LIST_ID, 'masonry'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Image List Masonry',
+        pluginId: BUNDLE_ID,
+        description: 'Gallery that keeps each image’s own aspect ratio',
+        category: Aglyn.ComponentCategory.MEDIA,
+        icon: imageListSchema.icon,
+        data: {
+            $id: null,
+            componentId: IMAGE_LIST_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                variant: 'masonry',
+                cols: 3,
+                gap: 8
+            },
+            nodes: [
+                tile(''),
+                tile(''),
+                tile(''),
+                tile('')
+            ]
+        }
+    },
+    {
+        $id: generatePresetId(IMAGE_LIST_ITEM_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Image List Item',
+        pluginId: BUNDLE_ID,
+        description: 'One more tile to add to an existing image list',
+        category: Aglyn.ComponentCategory.MEDIA,
+        icon: imageListItemSchema.icon,
+        data: tile('')
+    }
+];
+export default ImageListElement;
+
+//# sourceMappingURL=image-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/image-list.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 { mdiImageMultiple, mdiImageMultipleOutline } from '@aglyn/shared-data-mdi'\nimport MuiImageList from '@mui/material/ImageList'\nimport MuiImageListItem from '@mui/material/ImageListItem'\nimport MuiImageListItemBar from '@mui/material/ImageListItemBar'\nimport { forwardRef, type ReactNode } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { dropClearedProps } from '../utils/drop-cleared-props'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const IMAGE_LIST_ID: Aglyn.ComponentId = 'muiImageList'\nexport const IMAGE_LIST_ITEM_ID: Aglyn.ComponentId = 'muiImageListItem'\n\nexport type ImageListVariant = 'standard' | 'quilted' | 'masonry' | 'woven'\n\nexport interface ImageListElementProps {\n  cols?: number | string\n  gap?: number | string\n  /** Row height in px, or blank for `auto`. */\n  rowHeight?: number | string\n  variant?: ImageListVariant\n  children?: ReactNode\n}\n\nexport interface ImageListItemElementProps {\n  /** Columns this tile spans (quilted lists). */\n  cols?: number | string\n  /** Rows this tile spans (quilted lists). */\n  rows?: number | string\n  /** Caption bar text; the bar is omitted entirely when both are blank. */\n  title?: string\n  subtitle?: string\n  barPosition?: 'below' | 'top' | 'bottom'\n  children?: ReactNode\n}\n\n/** Number fields round-trip as strings; MUI's grid math needs numbers. */\nexport function toCount(value: unknown, fallback?: number): number | undefined {\n  if (value == null || value === '') return fallback\n  const parsed = Number(value)\n  if (!Number.isFinite(parsed) || parsed < 0) return fallback\n  return Math.round(parsed)\n}\n\n/**\n * Image list (https://mui.com/material-ui/react-image-list/): a masonry\n * or quilted grid of images, denser than a Grid of cards.\n */\nconst ImageListElement = forwardRef<HTMLUListElement, ImageListElementProps>(\n  (rawProps, ref) => {\n    // Cleared props dropped before the resolvers below read them\n    // (AGL-1451); `rest` also spreads straight into MUI.\n    const props = dropClearedProps(rawProps)\n    const { cols, gap, rowHeight, variant, children, ...rest } = props\n    const resolvedVariant: ImageListVariant = (\n      ['standard', 'quilted', 'masonry', 'woven'] as const\n    ).includes(variant as ImageListVariant)\n      ? (variant as ImageListVariant)\n      : 'standard'\n    const height = toCount(rowHeight)\n    return (\n      <MuiImageList\n        ref={ref}\n        variant={resolvedVariant}\n        cols={toCount(cols, 3)}\n        gap={toCount(gap, 4)}\n        // A masonry list sizes rows from the images themselves; a fixed\n        // rowHeight silently defeats the whole variant.\n        rowHeight={resolvedVariant === 'masonry' ? 'auto' : height ?? 'auto'}\n        {...rest}\n        // MUI types ImageList's children as NonNullable; the renderer\n        // always supplies the tile subtree.\n        children={children as NonNullable<ReactNode>}\n      />\n    )\n  },\n)\nImageListElement.displayName = 'AglynImageList'\n\n/**\n * One tile. The image itself is an ordinary Image element dropped\n * inside, so tiles keep the media-CDN srcSet, lazy loading and\n * empty-source placeholder (AGL-74/175) rather than a second, worse\n * image implementation living here.\n */\nexport const ImageListItemElement = forwardRef<\n  HTMLLIElement,\n  ImageListItemElementProps\n>((rawProps, ref) => {\n  const props = dropClearedProps(rawProps)\n  const { cols, rows, title, subtitle, barPosition, children, ...rest } = props\n  return (\n    <MuiImageListItem\n      ref={ref}\n      cols={toCount(cols, 1)}\n      rows={toCount(rows, 1)}\n      {...rest}\n    >\n      {children}\n      {title || subtitle ? (\n        <MuiImageListItemBar\n          title={title || undefined}\n          subtitle={subtitle || undefined}\n          position={barPosition || 'bottom'}\n        />\n      ) : null}\n    </MuiImageListItem>\n  )\n})\nImageListItemElement.displayName = 'AglynImageListItem'\n\n/** Row height is meaningless on masonry — MUI forces `auto` there. */\nconst NOT_MASONRY = { when: 'variant', is: 'masonry', notMatch: true }\n\nexport const imageListSchema: Aglyn.ComponentSchema<ImageListElementProps> = {\n  $id: IMAGE_LIST_ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Image List',\n  description: 'Dense grid of images — standard, quilted, masonry or woven.',\n  category: Aglyn.ComponentCategory.MEDIA,\n  icon: { path: mdiImageMultiple.path, sx: { color: '#7b1fa2' } },\n  restrictChildren: [\n    Aglyn.LinealDirectiveFlag.LIMIT_TO,\n    { components: [IMAGE_LIST_ITEM_ID] },\n  ],\n  attributes: [\n    {\n      name: 'variant',\n      label: 'Variant',\n      description:\n        'Standard is a plain grid; quilted lets tiles span columns and ' +\n        'rows; masonry keeps each image’s own aspect ratio; woven ' +\n        'alternates tile sizes.',\n      component: Aglyn.FieldComponentType.SELECT,\n      // A real sentinel, not a deletion (AGL-1451): `standard` is one of\n      // MUI's four named variants and the resolver above already accepts\n      // it by name, so the option is a genuine choice — and the one an\n      // author needs in order to move a list BACK off quilted or masonry.\n      // Spelled `''` it could not persist (AGL-1191), so that move\n      // silently reverted.\n      options: [\n        { value: 'standard', label: 'Standard (default)' },\n        { value: 'quilted', label: 'Quilted' },\n        { value: 'masonry', label: 'Masonry' },\n        { value: 'woven', label: 'Woven' },\n      ],\n    },\n    {\n      name: 'cols',\n      label: 'Columns',\n      description: 'Number of columns. Default 3.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n    {\n      name: 'gap',\n      label: 'Gap',\n      description: 'Space between tiles, in px. Default 4.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n    {\n      name: 'rowHeight',\n      label: 'Row height',\n      description:\n        'Row height in px. Leave blank to size rows from the images.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n      condition: NOT_MASONRY,\n    },\n  ],\n}\n\nexport const imageListItemSchema: Aglyn.ComponentSchema<ImageListItemElementProps> =\n  {\n    $id: IMAGE_LIST_ITEM_ID,\n    pluginId: BUNDLE_ID,\n    displayName: 'Image List Item',\n    description: 'One tile of an image list, with an optional caption bar.',\n    category: Aglyn.ComponentCategory.MEDIA,\n    icon: { path: mdiImageMultipleOutline.path, sx: { color: '#7b1fa2' } },\n    attributes: [\n      {\n        name: 'title',\n        label: 'Caption',\n        description:\n          'Caption bar text. Leave both caption fields blank for no bar.',\n        component: Aglyn.FieldComponentType.TEXT_FIELD,\n      },\n      {\n        name: 'subtitle',\n        label: 'Caption subtitle',\n        description: 'Second line of the caption bar.',\n        component: Aglyn.FieldComponentType.TEXT_FIELD,\n      },\n      {\n        name: 'barPosition',\n        label: 'Caption position',\n        description: 'Where the caption bar sits relative to the image.',\n        component: Aglyn.FieldComponentType.SELECT,\n        // `bottom` is MUI's own position value and the `|| 'bottom'`\n        // fallback below already resolves to it, so the sentinel is the\n        // value the code was reaching for anyway (AGL-1451).\n        options: [\n          { value: 'bottom', label: 'Bottom (default)' },\n          { value: 'top', label: 'Top' },\n          { value: 'below', label: 'Below the image' },\n        ],\n      },\n      // The spans are read only by the quilted layout, but the variant\n      // that decides that lives on the PARENT list. A `condition` is\n      // evaluated against this node's own attribute form and cannot see\n      // it, so these stay visible and say so in their help text — a\n      // condition here would hide them permanently.\n      {\n        name: 'cols',\n        label: 'Column span',\n        description:\n          'How many columns this tile spans. Only the parent list’s ' +\n          'Quilted variant reads this.',\n        component: Aglyn.FieldComponentType.TEXT_FIELD,\n        type: 'number',\n      },\n      {\n        name: 'rows',\n        label: 'Row span',\n        description:\n          'How many rows this tile spans. Only the parent list’s Quilted ' +\n          'variant reads this.',\n        component: Aglyn.FieldComponentType.TEXT_FIELD,\n        type: 'number',\n      },\n    ],\n  }\n\nconst tile = (caption: string) => ({\n  $id: null,\n  componentId: IMAGE_LIST_ITEM_ID,\n  pluginId: BUNDLE_ID,\n  props: { title: caption },\n  nodes: [\n    {\n      $id: null,\n      componentId: 'image',\n      pluginId: BUNDLE_ID,\n      props: { alt: caption, height: '160px', objectFit: 'cover' },\n    },\n  ],\n})\n\nexport const imageListPresets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(IMAGE_LIST_ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Image List',\n    pluginId: BUNDLE_ID,\n    description: 'Three-column gallery with captioned tiles',\n    category: Aglyn.ComponentCategory.MEDIA,\n    icon: imageListSchema.icon,\n    data: {\n      $id: null,\n      componentId: IMAGE_LIST_ID,\n      pluginId: BUNDLE_ID,\n      props: { cols: 3, gap: 8, rowHeight: 160 },\n      nodes: [tile('First image'), tile('Second image'), tile('Third image')],\n    },\n  },\n  {\n    $id: generatePresetId(IMAGE_LIST_ID, 'masonry'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Image List Masonry',\n    pluginId: BUNDLE_ID,\n    description: 'Gallery that keeps each image’s own aspect ratio',\n    category: Aglyn.ComponentCategory.MEDIA,\n    icon: imageListSchema.icon,\n    data: {\n      $id: null,\n      componentId: IMAGE_LIST_ID,\n      pluginId: BUNDLE_ID,\n      props: { variant: 'masonry', cols: 3, gap: 8 },\n      nodes: [tile(''), tile(''), tile(''), tile('')],\n    },\n  },\n  {\n    $id: generatePresetId(IMAGE_LIST_ITEM_ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Image List Item',\n    pluginId: BUNDLE_ID,\n    description: 'One more tile to add to an existing image list',\n    category: Aglyn.ComponentCategory.MEDIA,\n    icon: imageListItemSchema.icon,\n    data: tile(''),\n  },\n]\n\nexport default ImageListElement\n"],"names":["Aglyn","mdiImageMultiple","mdiImageMultipleOutline","MuiImageList","MuiImageListItem","MuiImageListItemBar","forwardRef","BUNDLE_ID","dropClearedProps","generatePresetId","IMAGE_LIST_ID","IMAGE_LIST_ITEM_ID","toCount","value","fallback","parsed","Number","isFinite","Math","round","ImageListElement","rawProps","ref","props","cols","gap","rowHeight","variant","children","rest","resolvedVariant","includes","height","displayName","ImageListItemElement","rows","title","subtitle","barPosition","undefined","position","NOT_MASONRY","when","is","notMatch","imageListSchema","$id","pluginId","description","category","ComponentCategory","MEDIA","icon","path","sx","color","restrictChildren","LinealDirectiveFlag","LIMIT_TO","components","attributes","name","label","component","FieldComponentType","SELECT","options","TEXT_FIELD","type","condition","imageListItemSchema","tile","caption","componentId","nodes","alt","objectFit","imageListPresets","NodeType","PRESET","data"],"mappings":"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"}

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

@@ -0,0 +1,154 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+import type { SxProps } from '@mui/material/styles';
+import { type ReactNode } from 'react';
+export declare const ID: Aglyn.ComponentId;
+/**
+ * The node ids of the images that load eagerly: the first image the LAYOUT
+ * chain renders and the first image the SCREEN renders, each in document
+ * order (AGL-2486).
+ *
+ * Every image used to render `loading="lazy"` — the hero included. That is
+ * the worst possible default for the one image that is almost always the LCP
+ * element: a lazy image is not fetched until layout has run and the browser
+ * has decided it is near the viewport, and it is fetched at LOW priority when
+ * it finally is. Lighthouse reports that as "LCP request discovery", and it is
+ * also why an image four sections down could finish before the one the reader
+ * is looking at: with everything lazy and everything low, nothing outranked
+ * anything, so the order was whatever the network felt like.
+ *
+ * So the lead images get `loading="eager"` and the rest get
+ * `fetchpriority="low"`, which is the browser-level knob that stops
+ * below-the-fold images competing with the ones above them.
+ *
+ * ONE lead image was not enough. On any site whose header carries a logo, the
+ * first image in document order is that logo, so the screen's own hero — the
+ * element Lighthouse names as the LCP on aglyn.com's solution pages at
+ * 375x812 — stayed `lazy` + `low`: undiscovered until layout, then fetched
+ * behind every script on the page (measured 2026-09-08: 1.5 s of load delay
+ * and 1.5 s of load time for a 13 KB image). Composition namespaces layout
+ * nodes by origin ({@link Aglyn.isLayoutComposedNodeId}), so the walk keeps
+ * one lead PER ORIGIN: the layout's first image (the logo) and the screen's
+ * first image (the hero). A layout image further down — a mega-menu
+ * illustration, the footer mark — is still deferred, as is every later
+ * screen image. In the besigner canvas nothing is layout-composed, so the
+ * screen's first image is the only lead, exactly as before.
+ *
+ * Neither lead gets `fetchpriority="high"`, and the reasoning is at the
+ * `fetchPriority` prop below. Short version: "first image of its origin" is
+ * still not "the LCP element", and a ranking claim needs evidence this
+ * function does not have.
+ *
+ * Resolved from the tree rather than a render-order counter on purpose: the
+ * renderer walks the tree in document order on the server AND on hydrate, but
+ * a mutable counter would double-count under React's concurrent re-renders
+ * and hand the priority to a different image on the client than the one the
+ * HTML gave it. A pure function of the tree cannot disagree with itself — and
+ * it is deliberately NOT memoized on the root object, because the canvas
+ * mutates that tree in place while an author works.
+ *
+ * The walk STOPS once both leads are known — on a page with a header logo
+ * and a hero that is O(nodes above the hero), a dozen or two on a normal
+ * page — and at the first image on a screen with no layout.
+ *
+ * An image with no `src` renders a placeholder box and no `<img>` at all, so
+ * it cannot be the LCP element and is skipped.
+ */
+export declare function leadImageNodeIds(root: Aglyn.NodeSchema | undefined): readonly string[];
+export interface ImageProps {
+    /**
+     * Where the image comes from (AGL-72). Either a **media reference** —
+     * `media:{scope}/{mediaId}`, what "Browse media" now stores (AGL-1215) —
+     * or any URL, which covers both the legacy values already in published
+     * documents and an author-typed hotlink. `resolveMediaSrc` decides.
+     */
+    src?: string;
+    alt?: string;
+    /**
+     * Explicit decorative choice (AGL-1305): ON forces `alt=""` (and drops
+     * the tooltip) no matter what the alt field says, so screen readers skip
+     * the image. Distinct from simply leaving alt unset, which also renders
+     * `alt=""` today but records no intent.
+     */
+    decorative?: boolean;
+    /** Tooltip shown on hover — the native img `title` attribute. */
+    title?: string;
+    /** Native loading hint; unset stays lazy, exactly as before AGL-1305. */
+    loading?: 'lazy' | 'eager';
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** CSS width (e.g. "100%", "320px"); defaults to 100%. */
+    width?: string;
+    /** CSS height (e.g. "240px"); defaults to auto. */
+    height?: string;
+    /**
+     * The asset's own pixel dimensions, copied off the media document when the
+     * image was picked (AGL-2486), and read from the asset again when the page
+     * is composed, so a replace with a different shape reaches every page that
+     * places it (AGL-2833).
+     *
+     * NOT author controls, which is why neither appears in the schema below:
+     * they describe the file, and the CSS `width`/`height` above describe the
+     * placement. The pair becomes the `<img>`'s intrinsic `width`/`height`
+     * attributes, which is the only thing that lets the browser reserve the
+     * right box before the bytes arrive — with `width: 100%; height: auto` the
+     * element is otherwise zero-height until the image decodes, and every image
+     * on the page shifts the layout as it lands.
+     *
+     * An attribute pair is a RATIO here, not a size: CSS wins for the used
+     * dimensions either way, so a stale value costs nothing but a reservation
+     * of the wrong shape. Both must be present and positive or neither is
+     * emitted — one alone gives the browser no ratio and would be read as a
+     * real dimension.
+     *
+     * Read from the node like any other prop, so this element never fetches a
+     * media document: the composition has already laid the asset's current
+     * pair over the pick's (`media-asset-facts.ts`), and the pick's copy is
+     * what renders wherever that read cannot answer. `srcSet` still selects
+     * which variant is downloaded; these only say what shape it will be.
+     */
+    intrinsicWidth?: number;
+    /** See `intrinsicWidth` — the two are only ever used as a pair. */
+    intrinsicHeight?: number;
+    /** Border radius in px. */
+    radius?: number;
+    /** Target screen id — resolved rename-safe like Screen Link (AGL-339). */
+    screenId?: string;
+    /** External URL, used only when no `screenId` is set. */
+    href?: string;
+    /**
+     * Authored node styles, handed over by the renderer rather than typed into
+     * an attribute — recomposed below so the author's Styles-panel values are
+     * merged rather than replaced (AGL-1240).
+     */
+    sx?: SxProps;
+    /**
+     * Accepted and dropped: an `<img>` is a void element and React throws on
+     * ANY children value reaching one, which 500'd whole pages (AGL-579).
+     * Declared because the implementation deliberately discards it (AGL-1323).
+     */
+    children?: ReactNode;
+}
+/**
+ * Image element (AGL-74): renders a plain img with fit/size/radius
+ * controls; an empty src shows a labeled placeholder so the element stays
+ * visible and selectable in the editor.
+ */
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLElement>>;
+export declare const schema: Aglyn.ComponentSchema<ImageProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default Image;