@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/product.js

@@ -0,0 +1,287 @@
+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 { buildBeginCheckoutParams, trackEventBeforeNavigation } from "@aglyn/aglyn/app-utils/analytics-events";
+import { mdiCartOutline } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { forwardRef, useCallback, useState } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'product';
+/**
+ * Commerce Starter product block (AGL-90): displays from its own props,
+ * but Buy posts {hostId, productId} to the tenant's /api/commerce/checkout,
+ * which prices from the server-side product doc — canvas props can't forge
+ * a charge. Inert without SiteContext (besigner canvas/preview).
+ */ const Product = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { productId, name, priceUsd, description, imageUrl: storedImageUrl, buyLabel, showCoupon } = props, rest = _object_without_properties_loose(props, [
+        "productId",
+        "name",
+        "priceUsd",
+        "description",
+        "imageUrl",
+        "buyLabel",
+        "showCoupon"
+    ]);
+    const { hostId } = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
+    // A media-picker target, so it can hold a media reference (AGL-1215) as
+    // well as any URL form that predates it. `siteRelativeMediaSrc` rather
+    // than the bare resolver (AGL-1726): one of those older forms is an
+    // absolute `https://{subdomain}.aglyn.app/api/media/cdn/…`, which on a
+    // white-label storefront names our platform in the customer's page source
+    // and fetches cross-origin from their own domain.
+    const imageUrl = Aglyn.siteRelativeMediaSrc(storedImageUrl, {
+        hostId
+    });
+    const [status, setStatus] = useState('idle');
+    const [coupon, setCoupon] = useState('');
+    const [message, setMessage] = useState('');
+    const soldOut = message === 'Sold out';
+    const handleBuy = useCallback(async ()=>{
+        if (!hostId || !productId || status === 'sending') return;
+        setStatus('sending');
+        setMessage('');
+        try {
+            var _ref;
+            const response = await siteFetch('/api/commerce/checkout', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(_extends({
+                    hostId,
+                    productId
+                }, coupon.trim() ? {
+                    couponCode: coupon.trim()
+                } : {}))
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (response.ok && (payload == null ? void 0 : payload.url)) {
+                // The Starter block's `begin_checkout`. It takes real money through
+                // Stripe and reported nothing, so a site built from this block alone
+                // showed GA4 a `purchase` with no checkout step in front of it — which
+                // reads as a 0% checkout rate rather than as an unmeasured path.
+                //
+                // Fired only after the server has ACCEPTED the request and returned a
+                // session url, never on the click: a count inflated by sold-out
+                // products and rejected coupons describes attempts, not checkouts.
+                //
+                // `value` is the price the SHOPPER SAW, which is the block's own prop.
+                // The charge is priced server-side from the product doc — an author
+                // who edits one without the other has a storefront that lies to
+                // shoppers before it lies to GA — and an unparseable or absent price
+                // reports no event at all, because a `value: 0` on a real sale is a
+                // worse number than a missing one.
+                const shownPrice = Number(priceUsd);
+                if (Number.isFinite(shownPrice) && shownPrice > 0) {
+                    await trackEventBeforeNavigation('begin_checkout', buildBeginCheckoutParams({
+                        items: [
+                            {
+                                item_id: productId,
+                                item_name: name || 'Product',
+                                price: shownPrice,
+                                quantity: 1
+                            }
+                        ]
+                    }));
+                }
+                window.location.assign(payload.url);
+                return;
+            }
+            // Server messages are visitor-safe (AGL-96): "Sold out", "Invalid
+            // or expired coupon", etc.
+            setMessage(String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : ''));
+            setStatus('error');
+        } catch (unused) {
+            setStatus('error');
+        }
+    }, [
+        hostId,
+        productId,
+        status,
+        coupon,
+        siteFetch
+    ]);
+    return /*#__PURE__*/ _jsxs(Card, _extends({
+        ref: ref,
+        variant: "outlined",
+        sx: {
+            maxWidth: 360
+        }
+    }, rest, {
+        children: [
+            imageUrl ? /*#__PURE__*/ _jsx(CardMedia, _extends({
+                component: "img",
+                image: imageUrl,
+                alt: name != null ? name : '',
+                sx: {
+                    height: 200,
+                    objectFit: 'cover'
+                }
+            }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES)) : null,
+            /*#__PURE__*/ _jsxs(CardContent, {
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h6",
+                        children: name || 'Product name'
+                    }),
+                    priceUsd ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle1",
+                        color: "text.secondary",
+                        children: `$${priceUsd}`
+                    }) : null,
+                    description ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            mt: 1
+                        },
+                        children: description
+                    }) : null,
+                    status === 'error' ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: soldOut ? 'info' : 'error',
+                        sx: {
+                            mt: 1
+                        },
+                        children: message || 'Checkout is unavailable right now.'
+                    }) : null,
+                    showCoupon && !soldOut ? /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        fullWidth: true,
+                        label: "Coupon code",
+                        value: coupon,
+                        onChange: (event)=>setCoupon(event.target.value),
+                        sx: {
+                            mt: 1.5
+                        }
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        color: "primary",
+                        sx: {
+                            mt: 2
+                        },
+                        disabled: status === 'sending' || soldOut,
+                        onClick: handleBuy,
+                        fullWidth: true,
+                        children: soldOut ? 'Sold out' : status === 'sending' ? 'Redirecting…' : buyLabel || 'Buy now'
+                    })
+                ]
+            })
+        ]
+    }));
+});
+Product.displayName = 'AglynProduct';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Product',
+    description: 'A single product card with a buy button, priced on the server.',
+    category: Aglyn.ComponentCategory.COMMERCE,
+    icon: {
+        path: mdiCartOutline.path,
+        sx: {
+            color: '#2e7d32'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'productId',
+            description: 'Product id from the Products card on the host dashboard — the ' + 'charge uses that product’s price.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Product id'
+        },
+        {
+            name: 'name',
+            description: 'Displayed product name.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Name'
+        },
+        {
+            name: 'priceUsd',
+            description: 'Displayed price (the charge uses the product doc).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Price (USD)'
+        },
+        {
+            name: 'description',
+            description: 'Short product description.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Description'
+        },
+        {
+            name: 'imageUrl',
+            description: 'Product image URL (copy from the Media library).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Image URL'
+        },
+        {
+            name: 'buyLabel',
+            description: 'Buy button label.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Button label'
+        },
+        {
+            name: 'showCoupon',
+            label: 'Show coupon field',
+            description: 'Adds a coupon-code input; codes are managed on the Products card.',
+            component: Aglyn.FieldComponentType.CHECKBOX
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Product',
+        pluginId: BUNDLE_ID,
+        description: 'Product card with a Stripe Checkout buy button',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiCartOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                name: 'My product',
+                priceUsd: '25',
+                description: 'A short description of what the buyer gets.',
+                buyLabel: 'Buy now'
+            }
+        }
+    }
+];
+export default Product;
+
+//# sourceMappingURL=product.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/product.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 {\n  buildBeginCheckoutParams,\n  trackEventBeforeNavigation,\n} from '@aglyn/aglyn/app-utils/analytics-events'\nimport { mdiCartOutline } from '@aglyn/shared-data-mdi'\nimport Alert from '@mui/material/Alert'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport CardMedia from '@mui/material/CardMedia'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'product'\n\nexport interface ProductProps {\n  /** Id of the product doc under hosts/{hostId}/products. */\n  productId?: string\n  name?: string\n  /** Display price; the charge always uses the product doc's price. */\n  priceUsd?: string\n  description?: string\n  imageUrl?: string\n  buyLabel?: string\n  /** Shows a coupon-code input above the buy button (AGL-96). */\n  showCoupon?: boolean\n}\n\n/**\n * Commerce Starter product block (AGL-90): displays from its own props,\n * but Buy posts {hostId, productId} to the tenant's /api/commerce/checkout,\n * which prices from the server-side product doc — canvas props can't forge\n * a charge. Inert without SiteContext (besigner canvas/preview).\n */\nconst Product = forwardRef<HTMLDivElement, ProductProps>((props, ref) => {\n  const {\n    productId,\n    name,\n    priceUsd,\n    description,\n    imageUrl: storedImageUrl,\n    buyLabel,\n    showCoupon,\n    ...rest\n  } = props\n  const { hostId } = Aglyn.useSite()\n  const siteFetch = Aglyn.useSiteFetch()\n  // A media-picker target, so it can hold a media reference (AGL-1215) as\n  // well as any URL form that predates it. `siteRelativeMediaSrc` rather\n  // than the bare resolver (AGL-1726): one of those older forms is an\n  // absolute `https://{subdomain}.aglyn.app/api/media/cdn/…`, which on a\n  // white-label storefront names our platform in the customer's page source\n  // and fetches cross-origin from their own domain.\n  const imageUrl = Aglyn.siteRelativeMediaSrc(storedImageUrl, { hostId })\n  const [status, setStatus] = useState<'idle' | 'sending' | 'error'>('idle')\n  const [coupon, setCoupon] = useState('')\n  const [message, setMessage] = useState('')\n  const soldOut = message === 'Sold out'\n\n  const handleBuy = useCallback(async () => {\n    if (!hostId || !productId || status === 'sending') return\n    setStatus('sending')\n    setMessage('')\n    try {\n      const response = await siteFetch('/api/commerce/checkout', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          hostId,\n          productId,\n          ...(coupon.trim() ? { couponCode: coupon.trim() } : {}),\n        }),\n      })\n      const payload = await response.json().catch(() => ({}))\n      if (response.ok && payload?.url) {\n        // The Starter block's `begin_checkout`. It takes real money through\n        // Stripe and reported nothing, so a site built from this block alone\n        // showed GA4 a `purchase` with no checkout step in front of it — which\n        // reads as a 0% checkout rate rather than as an unmeasured path.\n        //\n        // Fired only after the server has ACCEPTED the request and returned a\n        // session url, never on the click: a count inflated by sold-out\n        // products and rejected coupons describes attempts, not checkouts.\n        //\n        // `value` is the price the SHOPPER SAW, which is the block's own prop.\n        // The charge is priced server-side from the product doc — an author\n        // who edits one without the other has a storefront that lies to\n        // shoppers before it lies to GA — and an unparseable or absent price\n        // reports no event at all, because a `value: 0` on a real sale is a\n        // worse number than a missing one.\n        const shownPrice = Number(priceUsd)\n        if (Number.isFinite(shownPrice) && shownPrice > 0) {\n          await trackEventBeforeNavigation(\n            'begin_checkout',\n            buildBeginCheckoutParams({\n              items: [\n                {\n                  item_id: productId,\n                  item_name: name || 'Product',\n                  price: shownPrice,\n                  quantity: 1,\n                },\n              ],\n            }),\n          )\n        }\n        window.location.assign(payload.url)\n        return\n      }\n      // Server messages are visitor-safe (AGL-96): \"Sold out\", \"Invalid\n      // or expired coupon\", etc.\n      setMessage(String(payload?.error ?? ''))\n      setStatus('error')\n    } catch {\n      setStatus('error')\n    }\n  }, [hostId, productId, status, coupon, siteFetch])\n\n  return (\n    <Card ref={ref} variant=\"outlined\" sx={{ maxWidth: 360 }} {...rest}>\n      {imageUrl ? (\n        <CardMedia\n          component=\"img\"\n          image={imageUrl}\n          alt={name ?? ''}\n          sx={{ height: 200, objectFit: 'cover' }}\n          // Deferred (AGL-2486). A Product card is a 360px-wide card dropped\n          // into a page; it is never the page's lead image, and before this\n          // it carried no loading hint at all — i.e. EAGER at default\n          // priority, outranking the `lazy` + `low` Image elements in the\n          // section the reader was actually looking at.\n          {...Aglyn.DEFERRED_IMAGE_ATTRIBUTES}\n        />\n      ) : null}\n      <CardContent>\n        <Typography variant=\"h6\">{name || 'Product name'}</Typography>\n        {priceUsd ? (\n          <Typography variant=\"subtitle1\" color=\"text.secondary\">\n            {`$${priceUsd}`}\n          </Typography>\n        ) : null}\n        {description ? (\n          <Typography variant=\"body2\" sx={{ mt: 1 }}>\n            {description}\n          </Typography>\n        ) : null}\n        {status === 'error' ? (\n          <Alert severity={soldOut ? 'info' : 'error'} sx={{ mt: 1 }}>\n            {message || 'Checkout is unavailable right now.'}\n          </Alert>\n        ) : null}\n        {showCoupon && !soldOut ? (\n          <TextField\n            size=\"small\"\n            fullWidth\n            label=\"Coupon code\"\n            value={coupon}\n            onChange={(event) => setCoupon(event.target.value)}\n            sx={{ mt: 1.5 }}\n          />\n        ) : null}\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          sx={{ mt: 2 }}\n          disabled={status === 'sending' || soldOut}\n          onClick={handleBuy}\n          fullWidth\n        >\n          {soldOut\n            ? 'Sold out'\n            : status === 'sending'\n              ? 'Redirecting…'\n              : buyLabel || 'Buy now'}\n        </Button>\n      </CardContent>\n    </Card>\n  )\n})\nProduct.displayName = 'AglynProduct'\n\nexport const schema: Aglyn.ComponentSchema<ProductProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Product',\n  description: 'A single product card with a buy button, priced on the server.',\n  category: Aglyn.ComponentCategory.COMMERCE,\n  icon: { path: mdiCartOutline.path, sx: { color: '#2e7d32' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'productId',\n      description:\n        'Product id from the Products card on the host dashboard — the ' +\n        'charge uses that product’s price.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Product id',\n    },\n    {\n      name: 'name',\n      description: 'Displayed product name.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Name',\n    },\n    {\n      name: 'priceUsd',\n      description: 'Displayed price (the charge uses the product doc).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Price (USD)',\n    },\n    {\n      name: 'description',\n      description: 'Short product description.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Description',\n    },\n    {\n      name: 'imageUrl',\n      description: 'Product image URL (copy from the Media library).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Image URL',\n    },\n    {\n      name: 'buyLabel',\n      description: 'Buy button label.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Button label',\n    },\n    {\n      name: 'showCoupon',\n      label: 'Show coupon field',\n      description:\n        'Adds a coupon-code input; codes are managed on the Products card.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Product',\n    pluginId: BUNDLE_ID,\n    description: 'Product card with a Stripe Checkout buy button',\n    category: Aglyn.ComponentCategory.COMMERCE,\n    icon: { path: mdiCartOutline.path, sx: { color: '#2e7d32' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        name: 'My product',\n        priceUsd: '25',\n        description: 'A short description of what the buyer gets.',\n        buyLabel: 'Buy now',\n      },\n    },\n  },\n]\n\nexport default Product\n"],"names":["Aglyn","buildBeginCheckoutParams","trackEventBeforeNavigation","mdiCartOutline","Alert","Button","Card","CardContent","CardMedia","TextField","Typography","forwardRef","useCallback","useState","BUNDLE_ID","generatePresetId","ID","Product","props","ref","productId","name","priceUsd","description","imageUrl","storedImageUrl","buyLabel","showCoupon","rest","hostId","useSite","siteFetch","useSiteFetch","siteRelativeMediaSrc","status","setStatus","coupon","setCoupon","message","setMessage","soldOut","handleBuy","response","method","headers","body","JSON","stringify","trim","couponCode","payload","json","catch","ok","url","shownPrice","Number","isFinite","items","item_id","item_name","price","quantity","window","location","assign","String","error","variant","sx","maxWidth","component","image","alt","height","objectFit","DEFERRED_IMAGE_ATTRIBUTES","color","mt","severity","size","fullWidth","label","value","onChange","event","target","disabled","onClick","displayName","schema","$id","pluginId","category","ComponentCategory","COMMERCE","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","FieldComponentType","TEXT_FIELD","CHECKBOX","presets","type","NodeType","PRESET","data","componentId"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SACEC,wBAAwB,EACxBC,0BAA0B,QACrB,0CAAyC;AAChD,SAASC,cAAc,QAAQ,yBAAwB;AACvD,OAAOC,WAAW,sBAAqB;AACvC,OAAOC,YAAY,uBAAsB;AACzC,OAAOC,UAAU,qBAAoB;AACrC,OAAOC,iBAAiB,4BAA2B;AACnD,OAAOC,eAAe,0BAAyB;AAC/C,OAAOC,eAAe,0BAAyB;AAC/C,OAAOC,gBAAgB,2BAA0B;AACjD,SAASC,UAAU,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AACzD,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SAASC,gBAAgB,QAAQ,iCAA6B;AAE9D,iEAAiE;AACjE,OAAO,MAAMC,KAAwB,UAAS;AAe9C;;;;;CAKC,GACD,MAAMC,wBAAUN,WAAyC,CAACO,OAAOC;IAC/D,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAUC,cAAc,EACxBC,QAAQ,EACRC,UAAU,EAEX,GAAGT,OADCU,wCACDV;;;;;;;;;IACJ,MAAM,EAAEW,MAAM,EAAE,GAAG7B,MAAM8B,OAAO;IAChC,MAAMC,YAAY/B,MAAMgC,YAAY;IACpC,wEAAwE;IACxE,uEAAuE;IACvE,oEAAoE;IACpE,uEAAuE;IACvE,0EAA0E;IAC1E,kDAAkD;IAClD,MAAMR,WAAWxB,MAAMiC,oBAAoB,CAACR,gBAAgB;QAAEI;IAAO;IACrE,MAAM,CAACK,QAAQC,UAAU,GAAGtB,SAAuC;IACnE,MAAM,CAACuB,QAAQC,UAAU,GAAGxB,SAAS;IACrC,MAAM,CAACyB,SAASC,WAAW,GAAG1B,SAAS;IACvC,MAAM2B,UAAUF,YAAY;IAE5B,MAAMG,YAAY7B,YAAY;QAC5B,IAAI,CAACiB,UAAU,CAACT,aAAac,WAAW,WAAW;QACnDC,UAAU;QACVI,WAAW;QACX,IAAI;;YACF,MAAMG,WAAW,MAAMX,UAAU,0BAA0B;gBACzDY,QAAQ;gBACRC,SAAS;oBAAE,gBAAgB;gBAAmB;gBAC9CC,MAAMC,KAAKC,SAAS,CAAC;oBACnBlB;oBACAT;mBACIgB,OAAOY,IAAI,KAAK;oBAAEC,YAAYb,OAAOY,IAAI;gBAAG,IAAI,CAAC;YAEzD;YACA,MAAME,UAAU,MAAMR,SAASS,IAAI,GAAGC,KAAK,CAAC,IAAO,CAAA,CAAC,CAAA;YACpD,IAAIV,SAASW,EAAE,KAAIH,2BAAAA,QAASI,GAAG,GAAE;gBAC/B,oEAAoE;gBACpE,qEAAqE;gBACrE,uEAAuE;gBACvE,iEAAiE;gBACjE,EAAE;gBACF,sEAAsE;gBACtE,gEAAgE;gBAChE,mEAAmE;gBACnE,EAAE;gBACF,uEAAuE;gBACvE,oEAAoE;gBACpE,gEAAgE;gBAChE,qEAAqE;gBACrE,oEAAoE;gBACpE,mCAAmC;gBACnC,MAAMC,aAAaC,OAAOlC;gBAC1B,IAAIkC,OAAOC,QAAQ,CAACF,eAAeA,aAAa,GAAG;oBACjD,MAAMrD,2BACJ,kBACAD,yBAAyB;wBACvByD,OAAO;4BACL;gCACEC,SAASvC;gCACTwC,WAAWvC,QAAQ;gCACnBwC,OAAON;gCACPO,UAAU;4BACZ;yBACD;oBACH;gBAEJ;gBACAC,OAAOC,QAAQ,CAACC,MAAM,CAACf,QAAQI,GAAG;gBAClC;YACF;YACA,kEAAkE;YAClE,2BAA2B;YAC3Bf,WAAW2B,eAAOhB,2BAAAA,QAASiB,KAAK,mBAAI;YACpChC,UAAU;QACZ,EAAE,eAAM;YACNA,UAAU;QACZ;IACF,GAAG;QAACN;QAAQT;QAAWc;QAAQE;QAAQL;KAAU;IAEjD,qBACE,MAACzB;QAAKa,KAAKA;QAAKiD,SAAQ;QAAWC,IAAI;YAAEC,UAAU;QAAI;OAAO1C;;YAC3DJ,yBACC,KAAChB;gBACC+D,WAAU;gBACVC,OAAOhD;gBACPiD,GAAG,EAAEpD,eAAAA,OAAQ;gBACbgD,IAAI;oBAAEK,QAAQ;oBAAKC,WAAW;gBAAQ;eAMlC3E,MAAM4E,yBAAyB,KAEnC;0BACJ,MAACrE;;kCACC,KAACG;wBAAW0D,SAAQ;kCAAM/C,QAAQ;;oBACjCC,yBACC,KAACZ;wBAAW0D,SAAQ;wBAAYS,OAAM;kCACnC,CAAC,CAAC,EAAEvD,UAAU;yBAEf;oBACHC,4BACC,KAACb;wBAAW0D,SAAQ;wBAAQC,IAAI;4BAAES,IAAI;wBAAE;kCACrCvD;yBAED;oBACHW,WAAW,wBACV,KAAC9B;wBAAM2E,UAAUvC,UAAU,SAAS;wBAAS6B,IAAI;4BAAES,IAAI;wBAAE;kCACtDxC,WAAW;yBAEZ;oBACHX,cAAc,CAACa,wBACd,KAAC/B;wBACCuE,MAAK;wBACLC,SAAS;wBACTC,OAAM;wBACNC,OAAO/C;wBACPgD,UAAU,CAACC,QAAUhD,UAAUgD,MAAMC,MAAM,CAACH,KAAK;wBACjDd,IAAI;4BAAES,IAAI;wBAAI;yBAEd;kCACJ,KAACzE;wBACC+D,SAAQ;wBACRS,OAAM;wBACNR,IAAI;4BAAES,IAAI;wBAAE;wBACZS,UAAUrD,WAAW,aAAaM;wBAClCgD,SAAS/C;wBACTwC,SAAS;kCAERzC,UACG,aACAN,WAAW,YACT,iBACAR,YAAY;;;;;;AAK5B;AACAT,QAAQwE,WAAW,GAAG;AAEtB,OAAO,MAAMC,SAA8C;IACzDC,KAAK3E;IACL4E,UAAU9E;IACV2E,aAAa;IACblE,aAAa;IACbsE,UAAU7F,MAAM8F,iBAAiB,CAACC,QAAQ;IAC1CC,MAAM;QAAEC,MAAM9F,eAAe8F,IAAI;QAAE5B,IAAI;YAAEQ,OAAO;QAAU;IAAE;IAC5DqB,OAAO;QAAEC,aAAanG,MAAMoG,YAAY,CAACC,OAAO;IAAC;IACjDC,YAAY;QACV;YACEjF,MAAM;YACNE,aACE,mEACA;YACFgD,WAAWvE,MAAMuG,kBAAkB,CAACC,UAAU;YAC9CtB,OAAO;QACT;QACA;YACE7D,MAAM;YACNE,aAAa;YACbgD,WAAWvE,MAAMuG,kBAAkB,CAACC,UAAU;YAC9CtB,OAAO;QACT;QACA;YACE7D,MAAM;YACNE,aAAa;YACbgD,WAAWvE,MAAMuG,kBAAkB,CAACC,UAAU;YAC9CtB,OAAO;QACT;QACA;YACE7D,MAAM;YACNE,aAAa;YACbgD,WAAWvE,MAAMuG,kBAAkB,CAACC,UAAU;YAC9CtB,OAAO;QACT;QACA;YACE7D,MAAM;YACNE,aAAa;YACbgD,WAAWvE,MAAMuG,kBAAkB,CAACC,UAAU;YAC9CtB,OAAO;QACT;QACA;YACE7D,MAAM;YACNE,aAAa;YACbgD,WAAWvE,MAAMuG,kBAAkB,CAACC,UAAU;YAC9CtB,OAAO;QACT;QACA;YACE7D,MAAM;YACN6D,OAAO;YACP3D,aACE;YACFgD,WAAWvE,MAAMuG,kBAAkB,CAACE,QAAQ;QAC9C;KACD;AACH,EAAC;AAED,OAAO,MAAMC,UAAgC;IAC3C;QACEf,KAAK5E,iBAAiBC;QACtB2F,MAAM3G,MAAM4G,QAAQ,CAACC,MAAM;QAC3BpB,aAAa;QACbG,UAAU9E;QACVS,aAAa;QACbsE,UAAU7F,MAAM8F,iBAAiB,CAACC,QAAQ;QAC1CC,MAAM;YAAEC,MAAM9F,eAAe8F,IAAI;YAAE5B,IAAI;gBAAEQ,OAAO;YAAU;QAAE;QAC5DiC,MAAM;YACJnB,KAAK;YACLoB,aAAa/F;YACb4E,UAAU9E;YACVI,OAAO;gBACLG,MAAM;gBACNC,UAAU;gBACVC,aAAa;gBACbG,UAAU;YACZ;QACF;IACF;CACD,CAAA;AAED,eAAeT,QAAO"}

package/src/lib/components/reusable-instance.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+import { type BoxProps } from '@mui/material/Box';
+export declare const ID: Aglyn.ComponentId;
+export interface ReusableInstanceProps extends BoxProps {
+    /** Definition id in `hosts/{hostId}/components`; grafted at render time. */
+    refId?: string;
+    /**
+     * The definition's display name, carried on the instance purely so the
+     * editor placeholder can say which component this stands for (AGL-1193).
+     * Never rendered on production surfaces, where the graft fills the box.
+     */
+    name?: string;
+    /**
+     * This instance's declared-prop overrides (AGL-1247). Addressed to the
+     * GRAFT, which reads it off the stored node to substitute `{{prop.*}}`
+     * inside its private copy of the definition — the wrapper element itself
+     * has no use for it, and it is stripped below rather than spread.
+     */
+    propValues?: Record<string, unknown>;
+}
+/**
+ * Wrapper element for a reusable-component instance. On production surfaces
+ * the compose step (`composeReusableComponentNodes`) grafts the definition
+ * subtree inside, so this renders as a plain container. In the editor the
+ * instance has no children (definitions aren't grafted into the editable
+ * canvas), so the CSS `:empty` placeholder marks it visibly instead — named,
+ * since a layout whose chrome has been promoted is otherwise nothing but
+ * indistinguishable dashed boxes.
+ *
+ * The placeholder is drawn on editing surfaces only. A published instance
+ * whose definition does not resolve is left empty by the compose step, and a
+ * visitor must not see the marker there.
+ */
+declare const ReusableInstance: import("react").ForwardRefExoticComponent<Omit<ReusableInstanceProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const schema: Aglyn.ComponentSchema<ReusableInstanceProps>;
+/**
+ * No static presets: instances are inserted from per-host definitions, which
+ * the console registers dynamically (category "Your components").
+ */
+export declare const presets: Aglyn.PresetSchema[];
+export default ReusableInstance;

package/src/lib/components/reusable-instance.js

@@ -0,0 +1,126 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { _ as _to_property_key } from "@swc/helpers/_/_to_property_key";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiPackageVariant } from "@aglyn/shared-data-mdi";
+import Box from "@mui/material/Box";
+import { forwardRef, useContext } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+// Persisted in screen documents; never rename (see AGL-34 ADR).
+export const ID = Aglyn.REUSABLE_INSTANCE_COMPONENT_ID;
+/**
+ * Wrapper element for a reusable-component instance. On production surfaces
+ * the compose step (`composeReusableComponentNodes`) grafts the definition
+ * subtree inside, so this renders as a plain container. In the editor the
+ * instance has no children (definitions aren't grafted into the editable
+ * canvas), so the CSS `:empty` placeholder marks it visibly instead — named,
+ * since a layout whose chrome has been promoted is otherwise nothing but
+ * indistinguishable dashed boxes.
+ *
+ * The placeholder is drawn on editing surfaces only. A published instance
+ * whose definition does not resolve is left empty by the compose step, and a
+ * visitor must not see the marker there.
+ */ const ReusableInstance = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const _key = Aglyn.REUSABLE_INSTANCE_PROP_VALUES_KEY, { refId: _refId, name, // Instance-scoped directives, not element attributes. `refId` and
+    // `name` were always stripped; `propValues` was not, so the author's
+    // overrides spread onto the Box and reached the DOM — React logs
+    // "does not recognize the `propValues` prop" on the canvas, and a
+    // published page serialised the same copy a second time as
+    // `propvalues="[object Object]"` on the wrapper (AGL-2486).
+    //
+    // Stripped HERE rather than in the graft because the canvas renders
+    // an instance the graft has not touched (definitions are not grafted
+    // into the editable canvas), so a strip upstream would fix the
+    // published page and leave the editor warning on every render.
+    [_key]: _propValues, children, sx } = props, rest = _object_without_properties_loose(props, [
+        "refId",
+        "name",
+        _to_property_key(_key),
+        "children",
+        "sx"
+    ]);
+    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref,
+        // `content: attr()` rather than a child, so the box stays `:empty`
+        // and the placeholder cannot be mistaken for grafted content.
+        "data-aglyn-component": name || 'Reusable component',
+        sx: [
+            Boolean(suppressNavigation) && {
+                '&:empty': {
+                    minHeight: 56,
+                    m: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderWidth: 1,
+                    borderStyle: 'dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1
+                },
+                '&:empty::after': {
+                    content: 'attr(data-aglyn-component)',
+                    color: 'text.secondary',
+                    fontSize: 12,
+                    letterSpacing: 1,
+                    textTransform: 'uppercase'
+                }
+            },
+            ...Array.isArray(sx) ? sx : sx ? [
+                sx
+            ] : []
+        ]
+    }, rest, {
+        children: children
+    }));
+});
+ReusableInstance.displayName = 'ReusableInstance';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Reusable Component',
+    description: 'Where a reusable component is placed. Edit the component once and every instance follows.',
+    category: Aglyn.ComponentCategory.SURFACE,
+    icon: {
+        path: mdiPackageVariant.path,
+        sx: {
+            color: '#9c27b0'
+        }
+    },
+    flags: {
+        // Instances are opaque: their content lives in the definition, so
+        // nothing may be dropped inside from the canvas.
+        dropping: Aglyn.FEATURE_FLAG.DISABLED
+    },
+    /*
+   * No attributes. An instance is a REFERENCE, not an element: the graft puts
+   * the definition's root in its place, so the only node that reaches a
+   * published page is the component's own (AGL-2521). An element picker here
+   * briefly existed (AGL-2514) and configured a wrapper that no longer
+   * exists — what it was reaching for is **Attribute overrides → Component
+   * root**, which sets the definition root's element for this placement.
+   */ attributes: []
+};
+/**
+ * No static presets: instances are inserted from per-host definitions, which
+ * the console registers dynamically (category "Your components").
+ */ export const presets = [];
+export default ReusableInstance;
+
+//# sourceMappingURL=reusable-instance.js.map

package/src/lib/components/reusable-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/reusable-instance.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 { mdiPackageVariant } from '@aglyn/shared-data-mdi'\nimport Box, { type BoxProps } from '@mui/material/Box'\nimport { forwardRef, useContext } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\n\n// Persisted in screen documents; never rename (see AGL-34 ADR).\nexport const ID: Aglyn.ComponentId = Aglyn.REUSABLE_INSTANCE_COMPONENT_ID\n\nexport interface ReusableInstanceProps extends BoxProps {\n  /** Definition id in `hosts/{hostId}/components`; grafted at render time. */\n  refId?: string\n  /**\n   * The definition's display name, carried on the instance purely so the\n   * editor placeholder can say which component this stands for (AGL-1193).\n   * Never rendered on production surfaces, where the graft fills the box.\n   */\n  name?: string\n  /**\n   * This instance's declared-prop overrides (AGL-1247). Addressed to the\n   * GRAFT, which reads it off the stored node to substitute `{{prop.*}}`\n   * inside its private copy of the definition — the wrapper element itself\n   * has no use for it, and it is stripped below rather than spread.\n   */\n  propValues?: Record<string, unknown>\n}\n\n/**\n * Wrapper element for a reusable-component instance. On production surfaces\n * the compose step (`composeReusableComponentNodes`) grafts the definition\n * subtree inside, so this renders as a plain container. In the editor the\n * instance has no children (definitions aren't grafted into the editable\n * canvas), so the CSS `:empty` placeholder marks it visibly instead — named,\n * since a layout whose chrome has been promoted is otherwise nothing but\n * indistinguishable dashed boxes.\n *\n * The placeholder is drawn on editing surfaces only. A published instance\n * whose definition does not resolve is left empty by the compose step, and a\n * visitor must not see the marker there.\n */\nconst ReusableInstance = forwardRef<any, ReusableInstanceProps>(\n  (props, ref) => {\n    const {\n      refId: _refId,\n      name,\n      // Instance-scoped directives, not element attributes. `refId` and\n      // `name` were always stripped; `propValues` was not, so the author's\n      // overrides spread onto the Box and reached the DOM — React logs\n      // \"does not recognize the `propValues` prop\" on the canvas, and a\n      // published page serialised the same copy a second time as\n      // `propvalues=\"[object Object]\"` on the wrapper (AGL-2486).\n      //\n      // Stripped HERE rather than in the graft because the canvas renders\n      // an instance the graft has not touched (definitions are not grafted\n      // into the editable canvas), so a strip upstream would fix the\n      // published page and leave the editor warning on every render.\n      [Aglyn.REUSABLE_INSTANCE_PROP_VALUES_KEY]: _propValues,\n      children,\n      sx,\n      ...rest\n    } = props\n    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext)\n    return (\n      <Box\n        ref={ref}\n        // `content: attr()` rather than a child, so the box stays `:empty`\n        // and the placeholder cannot be mistaken for grafted content.\n        data-aglyn-component={name || 'Reusable component'}\n        sx={[\n          Boolean(suppressNavigation) && {\n            '&:empty': {\n              minHeight: 56,\n              m: 1,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              borderWidth: 1,\n              borderStyle: 'dashed',\n              borderColor: 'divider',\n              borderRadius: 1,\n            },\n            '&:empty::after': {\n              content: 'attr(data-aglyn-component)',\n              color: 'text.secondary',\n              fontSize: 12,\n              letterSpacing: 1,\n              textTransform: 'uppercase',\n            },\n          },\n          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n        ]}\n        {...rest}\n      >\n        {children}\n      </Box>\n    )\n  },\n)\nReusableInstance.displayName = 'ReusableInstance'\n\nexport const schema: Aglyn.ComponentSchema<ReusableInstanceProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Reusable Component',\n  description:\n    'Where a reusable component is placed. Edit the component once and every instance follows.',\n  category: Aglyn.ComponentCategory.SURFACE,\n  icon: {\n    path: mdiPackageVariant.path,\n    sx: { color: '#9c27b0' },\n  },\n  flags: {\n    // Instances are opaque: their content lives in the definition, so\n    // nothing may be dropped inside from the canvas.\n    dropping: Aglyn.FEATURE_FLAG.DISABLED,\n  },\n  /*\n   * No attributes. An instance is a REFERENCE, not an element: the graft puts\n   * the definition's root in its place, so the only node that reaches a\n   * published page is the component's own (AGL-2521). An element picker here\n   * briefly existed (AGL-2514) and configured a wrapper that no longer\n   * exists — what it was reaching for is **Attribute overrides → Component\n   * root**, which sets the definition root's element for this placement.\n   */\n  attributes: [],\n}\n\n/**\n * No static presets: instances are inserted from per-host definitions, which\n * the console registers dynamically (category \"Your components\").\n */\nexport const presets: Aglyn.PresetSchema[] = []\n\nexport default ReusableInstance\n"],"names":["Aglyn","mdiPackageVariant","Box","forwardRef","useContext","BUNDLE_ID","ID","REUSABLE_INSTANCE_COMPONENT_ID","ReusableInstance","props","ref","REUSABLE_INSTANCE_PROP_VALUES_KEY","refId","_refId","name","_propValues","children","sx","rest","suppressNavigation","ScreenLinkContext","data-aglyn-component","Boolean","minHeight","m","display","alignItems","justifyContent","borderWidth","borderStyle","borderColor","borderRadius","content","color","fontSize","letterSpacing","textTransform","Array","isArray","displayName","schema","$id","pluginId","description","category","ComponentCategory","SURFACE","icon","path","flags","dropping","FEATURE_FLAG","DISABLED","attributes","presets"],"mappings":";;;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SAASC,iBAAiB,QAAQ,yBAAwB;AAC1D,OAAOC,SAA4B,oBAAmB;AACtD,SAASC,UAAU,EAAEC,UAAU,QAAQ,QAAO;AAC9C,SAASC,SAAS,QAAQ,gCAA4B;AAEtD,gEAAgE;AAChE,OAAO,MAAMC,KAAwBN,MAAMO,8BAA8B,CAAA;AAoBzE;;;;;;;;;;;;CAYC,GACD,MAAMC,iCAAmBL,WACvB,CAACM,OAAOC;IACN,aAcGV,MAAMW,iCAAiC,EAdpC,EACJC,OAAOC,MAAM,EACbC,IAAI,EACJ,kEAAkE;IAClE,qEAAqE;IACrE,iEAAiE;IACjE,kEAAkE;IAClE,2DAA2D;IAC3D,4DAA4D;IAC5D,EAAE;IACF,oEAAoE;IACpE,qEAAqE;IACrE,+DAA+D;IAC/D,+DAA+D;IAC/D,MAAyC,EAAEC,WAAW,EACtDC,QAAQ,EACRC,EAAE,EAEH,GAAGR,OADCS,wCACDT;;;;;;;IACJ,MAAM,EAAEU,kBAAkB,EAAE,GAAGf,WAAWJ,MAAMoB,iBAAiB;IACjE,qBACE,KAAClB;QACCQ,KAAKA;QACL,mEAAmE;QACnE,8DAA8D;QAC9DW,wBAAsBP,QAAQ;QAC9BG,IAAI;YACFK,QAAQH,uBAAuB;gBAC7B,WAAW;oBACTI,WAAW;oBACXC,GAAG;oBACHC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,aAAa;oBACbC,aAAa;oBACbC,aAAa;oBACbC,cAAc;gBAChB;gBACA,kBAAkB;oBAChBC,SAAS;oBACTC,OAAO;oBACPC,UAAU;oBACVC,eAAe;oBACfC,eAAe;gBACjB;YACF;eACIC,MAAMC,OAAO,CAACrB,MAAMA,KAAKA,KAAK;gBAACA;aAAG,GAAG,EAAE;SAC5C;OACGC;kBAEHF;;AAGP;AAEFR,iBAAiB+B,WAAW,GAAG;AAE/B,OAAO,MAAMC,SAAuD;IAClEC,KAAKnC;IACLoC,UAAUrC;IACVkC,aAAa;IACbI,aACE;IACFC,UAAU5C,MAAM6C,iBAAiB,CAACC,OAAO;IACzCC,MAAM;QACJC,MAAM/C,kBAAkB+C,IAAI;QAC5B/B,IAAI;YAAEgB,OAAO;QAAU;IACzB;IACAgB,OAAO;QACL,kEAAkE;QAClE,iDAAiD;QACjDC,UAAUlD,MAAMmD,YAAY,CAACC,QAAQ;IACvC;IACA;;;;;;;GAOC,GACDC,YAAY,EAAE;AAChB,EAAC;AAED;;;CAGC,GACD,OAAO,MAAMC,UAAgC,EAAE,CAAA;AAE/C,eAAe9C,iBAAgB"}

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

@@ -0,0 +1,85 @@
+/**
+ * @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 ButtonProps } from '@mui/material/Button';
+import { type LinkTargetChoice } from '../utils/link-target-props';
+export declare const ID: Aglyn.ComponentId;
+export interface ScreenLinkProps extends ButtonProps {
+    /**
+     * Target screen id. The href is resolved from the host routing map at
+     * render time (see `ScreenLinkContext`), so slug renames and re-parenting
+     * never break the link — which is what makes navigation inside a shared
+     * layout viable.
+     */
+    screenId?: string;
+    /** External URL escape hatch, used only when no `screenId` is set. */
+    href?: string;
+    /**
+     * Which element this ships as (AGL-1195, AGL-1347). Persisted in screen
+     * documents; never rename, and `undefined` must keep meaning `'button'` —
+     * every link authored before this existed is one.
+     *
+     * - `'button'` (or unset) — `<a role="button">` with the button's look.
+     * - `'link'` — a plain text link; the button-only props are dropped.
+     * - `'linkButton'` — a plain `<a>` with NO role, wearing the button's
+     *   `variant`/`size`/`fullWidth`. Appearance without semantics: a pill
+     *   that navigates announces as the link it is.
+     */
+    renderAs?: 'button' | 'link' | 'linkButton';
+    /**
+     * Where the link opens. Persisted in screen documents; never rename a
+     * value, and `undefined` must keep meaning `'_self'` — every link authored
+     * before this existed stays in the tab.
+     */
+    target?: LinkTargetChoice;
+    /** Window name used only when `target` is `'custom'`. */
+    targetName?: string;
+    /**
+     * Sanitized emphasis markup for the label, written by the inline editor's
+     * rich mode (AGL-2557). `children` keeps the plain-text reading of it, and
+     * is what every surface that cannot render markup falls back to.
+     */
+    html?: string;
+}
+/**
+ * Link that targets a screen by id, never a hardcoded path. Degrades to a
+ * plain button when the id doesn't resolve (unpublished/deleted screen) and
+ * when navigation is suppressed (besigner canvas, preview).
+ *
+ * `renderAs="link"` renders MUI's `Link` instead of `Button` (AGL-1195).
+ * Footer and inline navigation are *text*: as buttons they inherit button
+ * typography, uppercase transforms and the wrong role for assistive tech.
+ * The button-only props are dropped in that mode rather than passed through
+ * — `variant` means the typography variant on a `Link`, so forwarding
+ * `"contained"` would silently produce an unstyled element.
+ *
+ * `renderAs="linkButton"` splits the two halves that used to travel together
+ * (AGL-1347). A pill row whose chips all navigate — docs URLs, `mailto:`,
+ * social profiles — is a legitimate design, but every chip announced as a
+ * button, which tells a screen-reader user to expect an action and costs
+ * them the link-list and open-in-new-tab affordances. This mode keeps the
+ * button's `variant`/`size`/`fullWidth` and drops the role, exactly as MUI's
+ * own `Button component={Link}` does. It is a THIRD value rather than
+ * `variant` becoming live in `"link"` mode, because a node switched to Text
+ * link keeps whatever `variant` it was authored with (the shipped preset is
+ * `variant: 'outlined'`) — honouring those would repaint the site's nav and
+ * footer as outlined pills.
+ */
+declare const ScreenLink: import("react").ForwardRefExoticComponent<Omit<ScreenLinkProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const schema: Aglyn.ComponentSchema<ScreenLinkProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default ScreenLink;