[{"data":1,"prerenderedAt":3793},["ShallowReactive",2],{"navigation_docs":3,"-frontend-api-reference-common-types-media":1474,"-frontend-api-reference-common-types-media-surround":3788},[4,132,442,591,1159,1231,1237,1243,1302,1401],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","0.getting-started/0.index",[9,10,14,18,56,81,115,128],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Starting new project","/getting-started/starting-new-project","0.getting-started/1.starting-new-project",{"title":15,"path":16,"stem":17},"What is Laioutr?","/getting-started/what-is-laioutr","0.getting-started/2.what-is-laioutr",{"title":19,"path":20,"stem":21,"children":22,"page":55},"Key Concepts","/getting-started/key-concepts","0.getting-started/3.key-concepts",[23,27,31,35,39,43,47,51],{"title":24,"path":25,"stem":26},"Architecture","/getting-started/key-concepts/architecture","0.getting-started/3.key-concepts/1.architecture",{"title":28,"path":29,"stem":30},"Data Model","/getting-started/key-concepts/data-model","0.getting-started/3.key-concepts/2.data-model",{"title":32,"path":33,"stem":34},"Internationalization","/getting-started/key-concepts/5.internationalization","0.getting-started/3.key-concepts/3.5.internationalization",{"title":36,"path":37,"stem":38},"Data Flow","/getting-started/key-concepts/data-flow","0.getting-started/3.key-concepts/3.data-flow",{"title":40,"path":41,"stem":42},"Extensibility","/getting-started/key-concepts/extensibility","0.getting-started/3.key-concepts/4.extensibility",{"title":44,"path":45,"stem":46},"Philosophy","/getting-started/key-concepts/philosophy","0.getting-started/3.key-concepts/5.philosophy",{"title":48,"path":49,"stem":50},"CI/CD Pipeline","/getting-started/key-concepts/ci-cd-pipeline","0.getting-started/3.key-concepts/6.ci-cd-pipeline",{"title":52,"path":53,"stem":54},"Multi-tenancy","/getting-started/key-concepts/multi-tenancy","0.getting-started/3.key-concepts/multi-tenancy",false,{"title":57,"path":58,"stem":59,"children":60,"page":55},"Next Steps","/getting-started/next-steps","0.getting-started/4.next-steps",[61,65,69,73,77],{"title":62,"path":63,"stem":64},"Create Organization and Project","/getting-started/next-steps/create-org-and-project","0.getting-started/4.next-steps/0.create-org-and-project",{"title":66,"path":67,"stem":68},"First Project Configuration","/getting-started/next-steps/first-project-config","0.getting-started/4.next-steps/1.first-project-config",{"title":70,"path":71,"stem":72},"Setup Local Development Environment","/getting-started/next-steps/local-setup","0.getting-started/4.next-steps/3.local-setup",{"title":74,"path":75,"stem":76},"Create your first custom app","/getting-started/next-steps/create-custom-app","0.getting-started/4.next-steps/4.create-custom-app",{"title":78,"path":79,"stem":80},"CLI","/getting-started/next-steps/cli","0.getting-started/4.next-steps/5.cli",{"title":82,"path":83,"stem":84,"children":85},"Changelogs","/getting-started/changelogs","0.getting-started/5.Changelogs/0.index",[86,87,91,95,99,103,107,111],{"title":82,"path":83,"stem":84},{"title":88,"path":89,"stem":90},"CLI Changelog","/getting-started/changelogs/cli-changelog","0.getting-started/5.Changelogs/cli-changelog",{"title":92,"path":93,"stem":94},"Cockpit Changelog","/getting-started/changelogs/cockpit-changelog","0.getting-started/5.Changelogs/cockpit-changelog",{"title":96,"path":97,"stem":98},"Figma Kit Changelog","/getting-started/changelogs/figma-kit-changelog","0.getting-started/5.Changelogs/figma-kit-changelog",{"title":100,"path":101,"stem":102},"Frontend Changelog","/getting-started/changelogs/frontend-changelog","0.getting-started/5.Changelogs/frontend-changelog",{"title":104,"path":105,"stem":106},"Orchestr Changelog","/getting-started/changelogs/orchestr-changelog","0.getting-started/5.Changelogs/orchestr-changelog",{"title":108,"path":109,"stem":110},"Orchestr Devtools Changelog","/getting-started/changelogs/orchestr-devtools-changelog","0.getting-started/5.Changelogs/orchestr-devtools-changelog",{"title":112,"path":113,"stem":114},"UI Changelog","/getting-started/changelogs/ui-changelog","0.getting-started/5.Changelogs/ui-changelog",{"title":116,"path":117,"stem":118,"children":119,"page":55},"Hints And Tips","/getting-started/hints-and-tips","0.getting-started/6.Hints-and-Tips",[120,124],{"title":121,"path":122,"stem":123},"Introduction","/getting-started/hints-and-tips/introduction","0.getting-started/6.Hints-and-Tips/0.introduction",{"title":125,"path":126,"stem":127},"Developer tools","/getting-started/hints-and-tips/developer-tools","0.getting-started/6.Hints-and-Tips/1.developer-tools",{"title":129,"path":130,"stem":131},"MCP Server","/getting-started/mcp-server","0.getting-started/7.mcp-server",{"title":133,"path":134,"stem":135,"children":136},"Frontend","/frontend","1.Frontend/0.index",[137,138,149,211,237,301],{"title":133,"path":134,"stem":135},{"title":121,"path":139,"stem":140,"children":141,"page":55},"/frontend/introduction","1.Frontend/1.Introduction",[142,145],{"title":19,"path":143,"stem":144},"/frontend/introduction/key-concepts","1.Frontend/1.Introduction/0.key-concepts",{"title":146,"path":147,"stem":148},"Tech Stack","/frontend/introduction/tech-stack","1.Frontend/1.Introduction/1.tech-stack",{"title":150,"path":151,"stem":152,"children":153},"Features","/frontend/features","1.Frontend/2.Features/0.index",[154,155,159,163,167,171,175,179,183,187,191,195,199,203,207],{"title":150,"path":151,"stem":152},{"title":156,"path":157,"stem":158},"Consent Management","/frontend/features/consent-management","1.Frontend/2.Features/consent-management",{"title":160,"path":161,"stem":162},"Currencies","/frontend/features/currencies","1.Frontend/2.Features/currencies",{"title":164,"path":165,"stem":166},"Environments & Staging","/frontend/features/environments","1.Frontend/2.Features/environments",{"title":168,"path":169,"stem":170},"Hooks","/frontend/features/hooks","1.Frontend/2.Features/hooks",{"title":172,"path":173,"stem":174},"Media and Media Library","/frontend/features/media","1.Frontend/2.Features/media",{"title":176,"path":177,"stem":178},"Multi-language Support","/frontend/features/multi-language-support","1.Frontend/2.Features/multi-language-support",{"title":180,"path":181,"stem":182},"Multi-market","/frontend/features/multi-market","1.Frontend/2.Features/multi-market",{"title":184,"path":185,"stem":186},"Page Types","/frontend/features/pagetypes","1.Frontend/2.Features/pagetypes",{"title":188,"path":189,"stem":190},"PWA","/frontend/features/pwa","1.Frontend/2.Features/pwa",{"title":192,"path":193,"stem":194},"Redirects","/frontend/features/redirects","1.Frontend/2.Features/redirects",{"title":196,"path":197,"stem":198},"Routing","/frontend/features/routing","1.Frontend/2.Features/routing",{"title":200,"path":201,"stem":202},"Server-Side Rendering (SSR) and Caching","/frontend/features/ssr-and-caching","1.Frontend/2.Features/ssr-and-caching",{"title":204,"path":205,"stem":206},"Tracking","/frontend/features/tracking","1.Frontend/2.Features/tracking",{"title":208,"path":209,"stem":210},"Z-Ordering","/frontend/features/z-ordering","1.Frontend/2.Features/z-ordering",{"title":212,"path":213,"stem":214,"children":215},"SEO","/frontend/seo","1.Frontend/3.SEO/0.index",[216,217,221,225,229,233],{"title":212,"path":213,"stem":214},{"title":218,"path":219,"stem":220},"Link Checker","/frontend/seo/link-checker","1.Frontend/3.SEO/link-checker",{"title":222,"path":223,"stem":224},"OG Image","/frontend/seo/og-image","1.Frontend/3.SEO/og-image",{"title":226,"path":227,"stem":228},"Robots.txt","/frontend/seo/robots-txt","1.Frontend/3.SEO/robots-txt",{"title":230,"path":231,"stem":232},"Schema.org","/frontend/seo/schema-org","1.Frontend/3.SEO/schema-org",{"title":234,"path":235,"stem":236},"Sitemap","/frontend/seo/sitemap","1.Frontend/3.SEO/sitemap",{"title":238,"path":239,"stem":240,"children":241},"Backend for Frontend","/frontend/orchestr","1.Frontend/4.Orchestr/0.index",[242,243,269,273,277,281,285,289,293,297],{"title":238,"path":239,"stem":240},{"title":244,"path":245,"stem":246,"children":247},"Recipes","/frontend/orchestr/recipes","1.Frontend/4.Orchestr/99.recipes/0.index",[248,249,253,257,261,265],{"title":244,"path":245,"stem":246},{"title":250,"path":251,"stem":252},"Analytics components from query handlers","/frontend/orchestr/recipes/analytics-from-query-handlers","1.Frontend/4.Orchestr/99.recipes/analytics-from-query-handlers",{"title":254,"path":255,"stem":256},"Identity cookies (cart and visitor IDs)","/frontend/orchestr/recipes/identity-cookies","1.Frontend/4.Orchestr/99.recipes/identity-cookies",{"title":258,"path":259,"stem":260},"System bootstrap in extendRequest","/frontend/orchestr/recipes/system-bootstrap","1.Frontend/4.Orchestr/99.recipes/system-bootstrap",{"title":262,"path":263,"stem":264},"Translating vendor errors","/frontend/orchestr/recipes/translating-vendor-errors","1.Frontend/4.Orchestr/99.recipes/translating-vendor-errors",{"title":266,"path":267,"stem":268},"Userland cache patterns","/frontend/orchestr/recipes/userland-cache-patterns","1.Frontend/4.Orchestr/99.recipes/userland-cache-patterns",{"title":270,"path":271,"stem":272},"Actions","/frontend/orchestr/actions","1.Frontend/4.Orchestr/Actions",{"title":274,"path":275,"stem":276},"Caching","/frontend/orchestr/caching","1.Frontend/4.Orchestr/Caching",{"title":278,"path":279,"stem":280},"Middleware","/frontend/orchestr/middleware","1.Frontend/4.Orchestr/Middleware",{"title":282,"path":283,"stem":284},"Queries & Links","/frontend/orchestr/queries","1.Frontend/4.Orchestr/Queries",{"title":286,"path":287,"stem":288},"Component Resolvers","/frontend/orchestr/component-resolvers","1.Frontend/4.Orchestr/component-resolvers",{"title":290,"path":291,"stem":292},"Filters","/frontend/orchestr/filters","1.Frontend/4.Orchestr/filters",{"title":294,"path":295,"stem":296},"URL Query Parameters","/frontend/orchestr/url-query-params","1.Frontend/4.Orchestr/url-query-params",{"title":298,"path":299,"stem":300},"Orchestr Wire Format","/frontend/orchestr/wire-format","1.Frontend/4.Orchestr/wire-format",{"title":302,"path":303,"stem":304,"children":305},"API Reference","/frontend/api-reference","1.Frontend/99.api-reference/0.index",[306,307,364,367,392,408,416,427,435],{"title":302,"path":303,"stem":304},{"title":308,"path":309,"stem":310,"children":311,"page":55},"Entities","/frontend/api-reference/entities","1.Frontend/99.api-reference/01.entities",[312,316,320,324,328,332,336,340,344,348,352,356,360],{"title":313,"path":314,"stem":315},"Product","/frontend/api-reference/entities/product","1.Frontend/99.api-reference/01.entities/1.product",{"title":317,"path":318,"stem":319},"SuggestedSearch","/frontend/api-reference/entities/suggested-search","1.Frontend/99.api-reference/01.entities/10.suggested-search",{"title":321,"path":322,"stem":323},"SuggestedSearchEntry","/frontend/api-reference/entities/suggested-search-entry","1.Frontend/99.api-reference/01.entities/11.suggested-search-entry",{"title":325,"path":326,"stem":327},"BlogCollection","/frontend/api-reference/entities/blog-collection","1.Frontend/99.api-reference/01.entities/12.blog-collection",{"title":329,"path":330,"stem":331},"Comment","/frontend/api-reference/entities/comment","1.Frontend/99.api-reference/01.entities/13.comment",{"title":333,"path":334,"stem":335},"ProductVariant","/frontend/api-reference/entities/product-variant","1.Frontend/99.api-reference/01.entities/2.product-variant",{"title":337,"path":338,"stem":339},"Category","/frontend/api-reference/entities/category","1.Frontend/99.api-reference/01.entities/3.category",{"title":341,"path":342,"stem":343},"Cart","/frontend/api-reference/entities/cart","1.Frontend/99.api-reference/01.entities/4.cart",{"title":345,"path":346,"stem":347},"CartItem","/frontend/api-reference/entities/cart-item","1.Frontend/99.api-reference/01.entities/5.cart-item",{"title":349,"path":350,"stem":351},"Review","/frontend/api-reference/entities/review","1.Frontend/99.api-reference/01.entities/6.review",{"title":353,"path":354,"stem":355},"BreadcrumbItem","/frontend/api-reference/entities/breadcrumb-item","1.Frontend/99.api-reference/01.entities/7.breadcrumb-item",{"title":357,"path":358,"stem":359},"MenuItem","/frontend/api-reference/entities/menu-item","1.Frontend/99.api-reference/01.entities/8.menu-item",{"title":361,"path":362,"stem":363},"BlogPost","/frontend/api-reference/entities/blog-post","1.Frontend/99.api-reference/01.entities/9.blog-post",{"title":184,"path":365,"stem":366},"/frontend/api-reference/page-types","1.Frontend/99.api-reference/02.page-types",{"title":368,"path":369,"stem":370,"children":371,"page":55},"Common Types","/frontend/api-reference/common-types","1.Frontend/99.api-reference/03.common-types",[372,376,380,384,388],{"title":373,"path":374,"stem":375},"Link","/frontend/api-reference/common-types/link","1.Frontend/99.api-reference/03.common-types/1.link",{"title":377,"path":378,"stem":379},"Media","/frontend/api-reference/common-types/media","1.Frontend/99.api-reference/03.common-types/2.media",{"title":381,"path":382,"stem":383},"Money","/frontend/api-reference/common-types/money","1.Frontend/99.api-reference/03.common-types/3.money",{"title":385,"path":386,"stem":387},"UnitPrice","/frontend/api-reference/common-types/unit-price","1.Frontend/99.api-reference/03.common-types/4.unit-price",{"title":389,"path":390,"stem":391},"Measurement","/frontend/api-reference/common-types/measurement","1.Frontend/99.api-reference/03.common-types/5.measurement",{"title":393,"path":394,"stem":395,"children":396,"page":55},"Ecommerce","/frontend/api-reference/ecommerce","1.Frontend/99.api-reference/10.ecommerce",[397,400,404],{"title":270,"path":398,"stem":399},"/frontend/api-reference/ecommerce/actions","1.Frontend/99.api-reference/10.ecommerce/1.actions",{"title":401,"path":402,"stem":403},"Queries","/frontend/api-reference/ecommerce/queries","1.Frontend/99.api-reference/10.ecommerce/2.queries",{"title":405,"path":406,"stem":407},"Errors","/frontend/api-reference/ecommerce/errors","1.Frontend/99.api-reference/10.ecommerce/3.errors",{"title":409,"path":410,"stem":411,"children":412,"page":55},"Newsletter","/frontend/api-reference/newsletter","1.Frontend/99.api-reference/11.newsletter",[413],{"title":270,"path":414,"stem":415},"/frontend/api-reference/newsletter/actions","1.Frontend/99.api-reference/11.newsletter/1.actions",{"title":417,"path":418,"stem":419,"children":420,"page":55},"Blog","/frontend/api-reference/blog","1.Frontend/99.api-reference/12.blog",[421,424],{"title":401,"path":422,"stem":423},"/frontend/api-reference/blog/queries","1.Frontend/99.api-reference/12.blog/1.queries",{"title":405,"path":425,"stem":426},"/frontend/api-reference/blog/errors","1.Frontend/99.api-reference/12.blog/2.errors",{"title":428,"path":429,"stem":430,"children":431,"page":55},"Suggested Search","/frontend/api-reference/suggested-search","1.Frontend/99.api-reference/13.suggested-search",[432],{"title":401,"path":433,"stem":434},"/frontend/api-reference/suggested-search/queries","1.Frontend/99.api-reference/13.suggested-search/1.queries",{"title":204,"path":436,"stem":437,"children":438,"page":55},"/frontend/api-reference/tracking","1.Frontend/99.api-reference/14.tracking",[439],{"title":270,"path":440,"stem":441},"/frontend/api-reference/tracking/actions","1.Frontend/99.api-reference/14.tracking/1.actions",{"title":443,"path":444,"stem":445,"children":446},"Apps","/apps","2.Apps/0.index",[447,448,502,575],{"title":443,"path":444,"stem":445},{"title":449,"path":450,"stem":451,"children":452},"App Development","/apps/app-development","2.Apps/app-development/0.index",[453,454,458,462,466,470,474,478,482,486,490,494,498],{"title":449,"path":450,"stem":451},{"title":455,"path":456,"stem":457},"App Configuration","/apps/app-development/app-configuration","2.Apps/app-development/app-configuration",{"title":459,"path":460,"stem":461},"App Starter","/apps/app-development/app-starter","2.Apps/app-development/app-starter",{"title":463,"path":464,"stem":465},"Best Practice","/apps/app-development/best-practice","2.Apps/app-development/best-practice",{"title":467,"path":468,"stem":469},"Block Definitions","/apps/app-development/block-definitions","2.Apps/app-development/block-definitions",{"title":471,"path":472,"stem":473},"Coding Standards","/apps/app-development/coding-standards","2.Apps/app-development/coding-standards",{"title":475,"path":476,"stem":477},"Consent Adapters","/apps/app-development/consent-adapters","2.Apps/app-development/consent-adapters",{"title":479,"path":480,"stem":481},"Consuming Query Fields","/apps/app-development/consuming-query-fields","2.Apps/app-development/consuming-query-fields",{"title":483,"path":484,"stem":485},"Implementation Overview","/apps/app-development/implementation-overview","2.Apps/app-development/implementation-overview",{"title":487,"path":488,"stem":489},"Platform Dependencies","/apps/app-development/platform-dependencies","2.Apps/app-development/platform-dependencies",{"title":491,"path":492,"stem":493},"Schema Fields","/apps/app-development/schema-fields","2.Apps/app-development/schema-fields",{"title":495,"path":496,"stem":497},"Section Definitions","/apps/app-development/section-definitions","2.Apps/app-development/section-definitions",{"title":499,"path":500,"stem":501},"Studio Icons","/apps/app-development/studio-icons","2.Apps/app-development/studio-icons",{"title":503,"path":504,"stem":505,"children":506,"page":55},"App Docs","/apps/app-docs","2.Apps/app-docs",[507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571],{"title":508,"path":509,"stem":510},"Adobe Commerce","/apps/app-docs/adobe-commerce","2.Apps/app-docs/adobe-commerce",{"title":512,"path":513,"stem":514},"B2Bsellers","/apps/app-docs/b2bsellers","2.Apps/app-docs/b2bsellers",{"title":516,"path":517,"stem":518},"Battery Included","/apps/app-docs/battery-included","2.Apps/app-docs/battery-included",{"title":520,"path":521,"stem":522},"CCM19","/apps/app-docs/ccm19","2.Apps/app-docs/ccm19",{"title":524,"path":525,"stem":526},"Cookiebot","/apps/app-docs/cookiebot","2.Apps/app-docs/cookiebot",{"title":528,"path":529,"stem":530},"Google Tag Manager (GTM)","/apps/app-docs/gtm","2.Apps/app-docs/gtm",{"title":532,"path":533,"stem":534},"Hygraph","/apps/app-docs/hygraph","2.Apps/app-docs/hygraph",{"title":536,"path":537,"stem":538},"Nimstrata Google Retail API","/apps/app-docs/nimstrata","2.Apps/app-docs/nimstrata",{"title":540,"path":541,"stem":542},"Pimcore","/apps/app-docs/pimcore","2.Apps/app-docs/pimcore",{"title":544,"path":545,"stem":546},"Commercetools","/apps/app-docs/commercetools","2.apps/app-docs/commercetools",{"title":548,"path":549,"stem":550},"Emporix","/apps/app-docs/emporix","2.apps/app-docs/emporix",{"title":552,"path":553,"stem":554},"Klaviyo","/apps/app-docs/klaviyo","2.apps/app-docs/klaviyo",{"title":556,"path":557,"stem":558},"OXID eShop","/apps/app-docs/oxid","2.apps/app-docs/oxid",{"title":560,"path":561,"stem":562},"Shopify","/apps/app-docs/shopify","2.apps/app-docs/shopify",{"title":564,"path":565,"stem":566},"Shopware","/apps/app-docs/shopware","2.apps/app-docs/shopware",{"title":568,"path":569,"stem":570},"Vercel Analytics","/apps/app-docs/vercel-analytics","2.apps/app-docs/vercel-analytics",{"title":572,"path":573,"stem":574},"Vercel Speed Insights","/apps/app-docs/vercel-speed-insights","2.apps/app-docs/vercel-speed-insights",{"title":576,"path":577,"stem":578,"children":579,"page":55},"Essentials","/apps/essentials","2.Apps/essentials",[580,584,588],{"title":581,"path":582,"stem":583},"Legal","/apps/essentials/legal","2.Apps/essentials/legal",{"title":585,"path":586,"stem":587},"Mailer","/apps/essentials/mailer","2.Apps/essentials/mailer",{"title":212,"path":589,"stem":590},"/apps/essentials/seo","2.Apps/essentials/seo",{"title":592,"path":593,"stem":594,"children":595},"Laioutr UI","/laioutr-ui","3.laioutr-ui/0.index",[596,597,621,627,633,739,745,751,805,827,880],{"title":592,"path":593,"stem":594},{"title":5,"path":598,"stem":599,"children":600},"/laioutr-ui/getting-started","3.laioutr-ui/01.getting-started/0.index",[601,602,606,610,614,618],{"title":5,"path":598,"stem":599},{"title":603,"path":604,"stem":605},"Browser support","/laioutr-ui/getting-started/browser-support","3.laioutr-ui/01.getting-started/1.browser-support",{"title":607,"path":608,"stem":609},"Common Data","/laioutr-ui/getting-started/common-data","3.laioutr-ui/01.getting-started/99.common-data",{"title":611,"path":612,"stem":613},"Figma Kit","/laioutr-ui/getting-started/figma-kit","3.laioutr-ui/01.getting-started/figma-kit",{"title":615,"path":616,"stem":617},"Theming","/laioutr-ui/getting-started/theming","3.laioutr-ui/01.getting-started/theming",{"title":208,"path":619,"stem":620},"/laioutr-ui/getting-started/z-ordering","3.laioutr-ui/01.getting-started/z-ordering",{"title":622,"path":623,"stem":624,"children":625},"B2B","/laioutr-ui/b2b","3.laioutr-ui/b2b/0.index",[626],{"title":622,"path":623,"stem":624},{"title":628,"path":629,"stem":630,"children":631},"Booking","/laioutr-ui/booking","3.laioutr-ui/booking/0.index",[632],{"title":628,"path":629,"stem":630},{"title":634,"path":635,"stem":636,"children":637},"CMS","/laioutr-ui/cms","3.laioutr-ui/cms/0.index",[638,639,664,672,684,693,714],{"title":634,"path":635,"stem":636},{"title":640,"path":641,"stem":642,"children":643,"page":55},"Banner","/laioutr-ui/cms/banner","3.laioutr-ui/cms/banner",[644,648,652,656,660],{"title":645,"path":646,"stem":647},"Banner Slider","/laioutr-ui/cms/banner/bannerslider","3.laioutr-ui/cms/banner/BannerSlider",{"title":649,"path":650,"stem":651},"Basic Banner with Image and Text","/laioutr-ui/cms/banner/basicbannerwithimageandtext","3.laioutr-ui/cms/banner/BasicBannerWithImageAndText",{"title":653,"path":654,"stem":655},"Content with Image and Text","/laioutr-ui/cms/banner/contentwithimageandtext","3.laioutr-ui/cms/banner/ContentWithImageAndText",{"title":657,"path":658,"stem":659},"Content With Text Columns","/laioutr-ui/cms/banner/contentwithtextcolumns","3.laioutr-ui/cms/banner/ContentWithTextColumns",{"title":661,"path":662,"stem":663},"USP Banner","/laioutr-ui/cms/banner/uspbanner","3.laioutr-ui/cms/banner/UspBanner",{"title":417,"path":665,"stem":666,"children":667,"page":55},"/laioutr-ui/cms/blog","3.laioutr-ui/cms/blog",[668],{"title":669,"path":670,"stem":671},"Blog Post","/laioutr-ui/cms/blog/blogpost","3.laioutr-ui/cms/blog/BlogPost",{"title":409,"path":673,"stem":674,"children":675,"page":55},"/laioutr-ui/cms/newsletter","3.laioutr-ui/cms/newsletter",[676,680],{"title":677,"path":678,"stem":679},"Input for Newsletter","/laioutr-ui/cms/newsletter/inputnewsletter","3.laioutr-ui/cms/newsletter/InputNewsletter",{"title":681,"path":682,"stem":683},"Newsletter Registration","/laioutr-ui/cms/newsletter/newsletterregistration","3.laioutr-ui/cms/newsletter/NewsletterRegistration",{"title":685,"path":686,"stem":687,"children":688,"page":55},"Quotes","/laioutr-ui/cms/quotes","3.laioutr-ui/cms/quotes",[689],{"title":690,"path":691,"stem":692},"Personal Quote with Text and Image","/laioutr-ui/cms/quotes/personalquote","3.laioutr-ui/cms/quotes/PersonalQuote",{"title":694,"path":695,"stem":696,"children":697,"page":55},"Reviews","/laioutr-ui/cms/reviews","3.laioutr-ui/cms/reviews",[698,702,706,710],{"title":699,"path":700,"stem":701},"Quote Card","/laioutr-ui/cms/reviews/quotecard","3.laioutr-ui/cms/reviews/QuoteCard",{"title":703,"path":704,"stem":705},"Rating","/laioutr-ui/cms/reviews/rating","3.laioutr-ui/cms/reviews/Rating",{"title":707,"path":708,"stem":709},"Rating Form","/laioutr-ui/cms/reviews/ratingform","3.laioutr-ui/cms/reviews/RatingForm",{"title":711,"path":712,"stem":713},"Review Section","/laioutr-ui/cms/reviews/reviewsection","3.laioutr-ui/cms/reviews/ReviewSection",{"title":715,"path":716,"stem":717,"children":718,"page":55},"Slider","/laioutr-ui/cms/slider","3.laioutr-ui/cms/slider",[719,723,727,731,735],{"title":720,"path":721,"stem":722},"Hero Slider","/laioutr-ui/cms/slider/heroslider","3.laioutr-ui/cms/slider/HeroSlider",{"title":724,"path":725,"stem":726},"Logo Slider","/laioutr-ui/cms/slider/logoslider","3.laioutr-ui/cms/slider/LogoSlider",{"title":728,"path":729,"stem":730},"Swiper Navigation with Bullets","/laioutr-ui/cms/slider/swipernavigationbullets","3.laioutr-ui/cms/slider/SwiperNavigationBullets",{"title":732,"path":733,"stem":734},"Swiper Navigation Compact","/laioutr-ui/cms/slider/swipernavigationcompact","3.laioutr-ui/cms/slider/SwiperNavigationCompact",{"title":736,"path":737,"stem":738},"Swiper Navigation with Numbers","/laioutr-ui/cms/slider/swipernavigationnumbers","3.laioutr-ui/cms/slider/SwiperNavigationNumbers",{"title":740,"path":741,"stem":742,"children":743},"Marketplace","/laioutr-ui/marketplace","3.laioutr-ui/marketplace/0.index",[744],{"title":740,"path":741,"stem":742},{"title":746,"path":747,"stem":748,"children":749},"Multichannel","/laioutr-ui/multichannel","3.laioutr-ui/multichannel/0.index",[750],{"title":746,"path":747,"stem":748},{"title":752,"path":753,"stem":754,"children":755},"Navigation & Headers","/laioutr-ui/navigation","3.laioutr-ui/navigation/0.index",[756,757,761,765,769,773,777,781,785,789,793,797,801],{"title":752,"path":753,"stem":754},{"title":758,"path":759,"stem":760},"Basic Header","/laioutr-ui/navigation/basicheader","3.laioutr-ui/navigation/BasicHeader",{"title":762,"path":763,"stem":764},"Color Mode Switch","/laioutr-ui/navigation/colormodeswitch","3.laioutr-ui/navigation/ColorModeSwitch",{"title":766,"path":767,"stem":768},"Desktop Side By Side Menu","/laioutr-ui/navigation/desktopsidebysidemenu","3.laioutr-ui/navigation/DesktopSideBySideMenu",{"title":770,"path":771,"stem":772},"Header with Text Links","/laioutr-ui/navigation/headerwithtextlinks","3.laioutr-ui/navigation/HeaderWithTextLinks",{"title":774,"path":775,"stem":776},"Locale Select","/laioutr-ui/navigation/localeselect","3.laioutr-ui/navigation/LocaleSelect",{"title":778,"path":779,"stem":780},"Mega Menu Desktop","/laioutr-ui/navigation/megamenudesktop","3.laioutr-ui/navigation/MegaMenuDesktop",{"title":782,"path":783,"stem":784},"Mobile Menu","/laioutr-ui/navigation/mobilemenu","3.laioutr-ui/navigation/MobileMenu",{"title":786,"path":787,"stem":788},"Search Overlay Input","/laioutr-ui/navigation/searchoverlayinput","3.laioutr-ui/navigation/SearchOverlayInput",{"title":790,"path":791,"stem":792},"Shop Header","/laioutr-ui/navigation/shopheader","3.laioutr-ui/navigation/ShopHeader",{"title":794,"path":795,"stem":796},"Top Bar","/laioutr-ui/navigation/topbar","3.laioutr-ui/navigation/TopBar",{"title":798,"path":799,"stem":800},"Breadcrumb","/laioutr-ui/navigation/breadcrumb","3.laioutr-ui/navigation/breadcrumb",{"title":802,"path":803,"stem":804},"Footer","/laioutr-ui/navigation/footer","3.laioutr-ui/navigation/footer",{"title":806,"path":807,"stem":808,"children":809},"SaaS","/laioutr-ui/saas","3.laioutr-ui/saas/0.index",[810,811,815,819,823],{"title":806,"path":807,"stem":808},{"title":812,"path":813,"stem":814},"Billing Cycle Switch","/laioutr-ui/saas/billingcycleswitch","3.laioutr-ui/saas/BillingCycleSwitch",{"title":816,"path":817,"stem":818},"Pricing Plan","/laioutr-ui/saas/pricingplan","3.laioutr-ui/saas/pricingplan",{"title":820,"path":821,"stem":822},"Pricing Plans","/laioutr-ui/saas/pricingplans","3.laioutr-ui/saas/pricingplans",{"title":824,"path":825,"stem":826},"Pricing Table","/laioutr-ui/saas/pricingtable","3.laioutr-ui/saas/pricingtable",{"title":828,"path":829,"stem":830,"children":831},"Shop","/laioutr-ui/shop","3.laioutr-ui/shop/0.index",[832,833,837,841,845,849,853,857,861,865,869,873,877],{"title":828,"path":829,"stem":830},{"title":834,"path":835,"stem":836},"Cards Container","/laioutr-ui/shop/cardscontainer","3.laioutr-ui/shop/CardsContainer",{"title":838,"path":839,"stem":840},"Grid Card Content","/laioutr-ui/shop/gridcardcontent","3.laioutr-ui/shop/GridCardContent",{"title":842,"path":843,"stem":844},"Grid Card Text Content","/laioutr-ui/shop/gridcardtextcontent","3.laioutr-ui/shop/GridCardTextContent",{"title":846,"path":847,"stem":848},"Inpage Navigation Basic Grid","/laioutr-ui/shop/inpagenavigationbasicgrid","3.laioutr-ui/shop/InpageNavigationBasicGrid",{"title":850,"path":851,"stem":852},"Inpage Navigation Basic Slider","/laioutr-ui/shop/inpagenavigationbasicslider","3.laioutr-ui/shop/InpageNavigationBasicSlider",{"title":854,"path":855,"stem":856},"Inpage Navigation Big Grid","/laioutr-ui/shop/inpagenavigationbiggrid","3.laioutr-ui/shop/InpageNavigationBigGrid",{"title":858,"path":859,"stem":860},"Inpage Navigation Big Slider","/laioutr-ui/shop/inpagenavigationbigslider","3.laioutr-ui/shop/InpageNavigationBigSlider",{"title":862,"path":863,"stem":864},"Inpage Navigation Compact Grid","/laioutr-ui/shop/inpagenavigationcompactgrid","3.laioutr-ui/shop/InpageNavigationCompactGrid",{"title":866,"path":867,"stem":868},"Inpage Navigation Compact Slider","/laioutr-ui/shop/inpagenavigationcompactslider","3.laioutr-ui/shop/InpageNavigationCompactSlider",{"title":870,"path":871,"stem":872},"Product Card","/laioutr-ui/shop/productcard","3.laioutr-ui/shop/ProductCard",{"title":874,"path":875,"stem":876},"Product Slider","/laioutr-ui/shop/productslider","3.laioutr-ui/shop/ProductSlider",{"title":290,"path":878,"stem":879},"/laioutr-ui/shop/filters","3.laioutr-ui/shop/filters",{"title":881,"path":882,"stem":883,"children":884},"UI Kit","/laioutr-ui/ui-kit","3.laioutr-ui/ui-kit/0.index",[885,886,962,982,1003,1036,1057,1122],{"title":881,"path":882,"stem":883},{"title":887,"path":888,"stem":889,"children":890,"page":55},"General","/laioutr-ui/ui-kit/general","3.laioutr-ui/ui-kit/01.general",[891,895,899,903,907,911,915,919,923,927,931,935,938,942,946,950,954,958],{"title":892,"path":893,"stem":894},"Accordion","/laioutr-ui/ui-kit/general/accordion","3.laioutr-ui/ui-kit/01.general/Accordion",{"title":896,"path":897,"stem":898},"Avatar","/laioutr-ui/ui-kit/general/avatar","3.laioutr-ui/ui-kit/01.general/Avatar",{"title":900,"path":901,"stem":902},"Backdrop","/laioutr-ui/ui-kit/general/backdrop","3.laioutr-ui/ui-kit/01.general/Backdrop",{"title":904,"path":905,"stem":906},"Color Swatch","/laioutr-ui/ui-kit/general/colorswatch","3.laioutr-ui/ui-kit/01.general/ColorSwatch",{"title":908,"path":909,"stem":910},"Dropdown Menu","/laioutr-ui/ui-kit/general/dropdownmenu","3.laioutr-ui/ui-kit/01.general/DropdownMenu",{"title":912,"path":913,"stem":914},"Edge Glow","/laioutr-ui/ui-kit/general/edgeglow","3.laioutr-ui/ui-kit/01.general/EdgeGlow",{"title":916,"path":917,"stem":918},"Empty State","/laioutr-ui/ui-kit/general/emptystate","3.laioutr-ui/ui-kit/01.general/EmptyState",{"title":920,"path":921,"stem":922},"Icon","/laioutr-ui/ui-kit/general/icon","3.laioutr-ui/ui-kit/01.general/Icon",{"title":924,"path":925,"stem":926},"Image Contrast Overlay","/laioutr-ui/ui-kit/general/imagecontrastoverlay","3.laioutr-ui/ui-kit/01.general/ImageContrastOverlay",{"title":928,"path":929,"stem":930},"Image Variant Thumbnail","/laioutr-ui/ui-kit/general/imagevariantthumbnail","3.laioutr-ui/ui-kit/01.general/ImageVariantThumbnail",{"title":932,"path":933,"stem":934},"Loading Spinner","/laioutr-ui/ui-kit/general/loadingspinner","3.laioutr-ui/ui-kit/01.general/LoadingSpinner",{"title":377,"path":936,"stem":937},"/laioutr-ui/ui-kit/general/media","3.laioutr-ui/ui-kit/01.general/Media",{"title":939,"path":940,"stem":941},"Navigation Bullets","/laioutr-ui/ui-kit/general/navigationbullets","3.laioutr-ui/ui-kit/01.general/NavigationBullets",{"title":943,"path":944,"stem":945},"Placeholder","/laioutr-ui/ui-kit/general/placeholder","3.laioutr-ui/ui-kit/01.general/Placeholder",{"title":947,"path":948,"stem":949},"Progress Bar","/laioutr-ui/ui-kit/general/progressbar","3.laioutr-ui/ui-kit/01.general/ProgressBar",{"title":951,"path":952,"stem":953},"Scrollbar","/laioutr-ui/ui-kit/general/scrollbar","3.laioutr-ui/ui-kit/01.general/Scrollbar",{"title":955,"path":956,"stem":957},"Swatch Preview","/laioutr-ui/ui-kit/general/swatchpreview","3.laioutr-ui/ui-kit/01.general/SwatchPreview",{"title":959,"path":960,"stem":961},"Thumbnail","/laioutr-ui/ui-kit/general/thumbnail","3.laioutr-ui/ui-kit/01.general/Thumbnail",{"title":963,"path":964,"stem":965,"children":966,"page":55},"Typography","/laioutr-ui/ui-kit/typography","3.laioutr-ui/ui-kit/02.typography",[967,971,974,978],{"title":968,"path":969,"stem":970},"Icon List","/laioutr-ui/ui-kit/typography/iconlist","3.laioutr-ui/ui-kit/02.typography/IconList",{"title":373,"path":972,"stem":973},"/laioutr-ui/ui-kit/typography/link","3.laioutr-ui/ui-kit/02.typography/Link",{"title":975,"path":976,"stem":977},"Rich Content","/laioutr-ui/ui-kit/typography/richcontent","3.laioutr-ui/ui-kit/02.typography/RichContent",{"title":979,"path":980,"stem":981},"Text","/laioutr-ui/ui-kit/typography/text","3.laioutr-ui/ui-kit/02.typography/Text",{"title":983,"path":984,"stem":985,"children":986,"page":55},"Layout","/laioutr-ui/ui-kit/layout","3.laioutr-ui/ui-kit/03.layout",[987,991,995,999],{"title":988,"path":989,"stem":990},"Grid Fill","/laioutr-ui/ui-kit/layout/gridfill","3.laioutr-ui/ui-kit/03.layout/GridFill",{"title":992,"path":993,"stem":994},"Grid Masonry","/laioutr-ui/ui-kit/layout/gridmasonry","3.laioutr-ui/ui-kit/03.layout/GridMasonry",{"title":996,"path":997,"stem":998},"Scroll Area","/laioutr-ui/ui-kit/layout/scrollarea","3.laioutr-ui/ui-kit/03.layout/ScrollArea",{"title":1000,"path":1001,"stem":1002},"Separator","/laioutr-ui/ui-kit/layout/separator","3.laioutr-ui/ui-kit/03.layout/Separator",{"title":1004,"path":1005,"stem":1006,"children":1007,"page":55},"Content","/laioutr-ui/ui-kit/content","3.laioutr-ui/ui-kit/04.content",[1008,1012,1016,1020,1024,1028,1032],{"title":1009,"path":1010,"stem":1011},"Card","/laioutr-ui/ui-kit/content/card","3.laioutr-ui/ui-kit/04.content/Card",{"title":1013,"path":1014,"stem":1015},"CTA Banner Basic","/laioutr-ui/ui-kit/content/ctabannerbasic","3.laioutr-ui/ui-kit/04.content/CtaBannerBasic",{"title":1017,"path":1018,"stem":1019},"CTA Banner Integrated","/laioutr-ui/ui-kit/content/ctabannerintegrated","3.laioutr-ui/ui-kit/04.content/CtaBannerIntegrated",{"title":1021,"path":1022,"stem":1023},"CTA Banner Showcase","/laioutr-ui/ui-kit/content/ctabannershowcase","3.laioutr-ui/ui-kit/04.content/CtaBannerShowcase",{"title":1025,"path":1026,"stem":1027},"Link Tile Basic","/laioutr-ui/ui-kit/content/linktilebasic","3.laioutr-ui/ui-kit/04.content/LinkTileBasic",{"title":1029,"path":1030,"stem":1031},"Link Tile Big","/laioutr-ui/ui-kit/content/linktilebig","3.laioutr-ui/ui-kit/04.content/LinkTileBig",{"title":1033,"path":1034,"stem":1035},"Link Tile Compact","/laioutr-ui/ui-kit/content/linktilecompact","3.laioutr-ui/ui-kit/04.content/LinkTileCompact",{"title":1037,"path":1038,"stem":1039,"children":1040,"page":55},"Surfaces","/laioutr-ui/ui-kit/surfaces","3.laioutr-ui/ui-kit/05.surfaces",[1041,1045,1049,1053],{"title":1042,"path":1043,"stem":1044},"Alert Dialog","/laioutr-ui/ui-kit/surfaces/alertdialog","3.laioutr-ui/ui-kit/05.surfaces/AlertDialog",{"title":1046,"path":1047,"stem":1048},"Sheet","/laioutr-ui/ui-kit/surfaces/sheet","3.laioutr-ui/ui-kit/05.surfaces/Sheet",{"title":1050,"path":1051,"stem":1052},"Toast","/laioutr-ui/ui-kit/surfaces/toast","3.laioutr-ui/ui-kit/05.surfaces/Toast",{"title":1054,"path":1055,"stem":1056},"Toaster","/laioutr-ui/ui-kit/surfaces/toaster","3.laioutr-ui/ui-kit/05.surfaces/Toaster",{"title":1058,"path":1059,"stem":1060,"children":1061,"page":55},"Form","/laioutr-ui/ui-kit/form","3.laioutr-ui/ui-kit/06.form",[1062,1066,1070,1074,1078,1082,1086,1090,1094,1098,1102,1106,1110,1114,1118],{"title":1063,"path":1064,"stem":1065},"Button","/laioutr-ui/ui-kit/form/button","3.laioutr-ui/ui-kit/06.form/Button",{"title":1067,"path":1068,"stem":1069},"Checkbox","/laioutr-ui/ui-kit/form/checkbox","3.laioutr-ui/ui-kit/06.form/Checkbox",{"title":1071,"path":1072,"stem":1073},"Field","/laioutr-ui/ui-kit/form/field","3.laioutr-ui/ui-kit/06.form/Field",{"title":1075,"path":1076,"stem":1077},"Input","/laioutr-ui/ui-kit/form/input","3.laioutr-ui/ui-kit/06.form/Input",{"title":1079,"path":1080,"stem":1081},"Input Checkbox","/laioutr-ui/ui-kit/form/inputcheckbox","3.laioutr-ui/ui-kit/06.form/InputCheckbox",{"title":1083,"path":1084,"stem":1085},"Password Input","/laioutr-ui/ui-kit/form/inputpassword","3.laioutr-ui/ui-kit/06.form/InputPassword",{"title":1087,"path":1088,"stem":1089},"Search Input","/laioutr-ui/ui-kit/form/inputsearch","3.laioutr-ui/ui-kit/06.form/InputSearch",{"title":1091,"path":1092,"stem":1093},"Label","/laioutr-ui/ui-kit/form/label","3.laioutr-ui/ui-kit/06.form/Label",{"title":1095,"path":1096,"stem":1097},"Load More","/laioutr-ui/ui-kit/form/loadmore","3.laioutr-ui/ui-kit/06.form/LoadMore",{"title":1099,"path":1100,"stem":1101},"Pagination","/laioutr-ui/ui-kit/form/pagination","3.laioutr-ui/ui-kit/06.form/Pagination",{"title":1103,"path":1104,"stem":1105},"Quantity Picker","/laioutr-ui/ui-kit/form/quantitypicker","3.laioutr-ui/ui-kit/06.form/QuantityPicker",{"title":1107,"path":1108,"stem":1109},"Radio Group","/laioutr-ui/ui-kit/form/radioselect","3.laioutr-ui/ui-kit/06.form/RadioSelect",{"title":1111,"path":1112,"stem":1113},"Select","/laioutr-ui/ui-kit/form/select","3.laioutr-ui/ui-kit/06.form/Select",{"title":1115,"path":1116,"stem":1117},"Switch","/laioutr-ui/ui-kit/form/switch","3.laioutr-ui/ui-kit/06.form/Switch",{"title":1119,"path":1120,"stem":1121},"Variant Select Button","/laioutr-ui/ui-kit/form/variantselectbutton","3.laioutr-ui/ui-kit/06.form/VariantSelectButton",{"title":1123,"path":1124,"stem":1125,"children":1126,"page":55},"Indicators","/laioutr-ui/ui-kit/indicators","3.laioutr-ui/ui-kit/07.indicators",[1127,1131,1135,1139,1143,1147,1151,1155],{"title":1128,"path":1129,"stem":1130},"Badge","/laioutr-ui/ui-kit/indicators/badge","3.laioutr-ui/ui-kit/07.indicators/Badge",{"title":1132,"path":1133,"stem":1134},"Caption Flag","/laioutr-ui/ui-kit/indicators/captionflag","3.laioutr-ui/ui-kit/07.indicators/CaptionFlag",{"title":1136,"path":1137,"stem":1138},"Category Node Flag","/laioutr-ui/ui-kit/indicators/categorynodeflag","3.laioutr-ui/ui-kit/07.indicators/CategoryNodeFlag",{"title":1140,"path":1141,"stem":1142},"Product Tile Flag","/laioutr-ui/ui-kit/indicators/producttileflag","3.laioutr-ui/ui-kit/07.indicators/ProductTileFlag",{"title":1144,"path":1145,"stem":1146},"Rating Summary","/laioutr-ui/ui-kit/indicators/ratingsummary","3.laioutr-ui/ui-kit/07.indicators/RatingSummary",{"title":1148,"path":1149,"stem":1150},"Rating Summary Small","/laioutr-ui/ui-kit/indicators/ratingsummarysmall","3.laioutr-ui/ui-kit/07.indicators/RatingSummarySmall",{"title":1152,"path":1153,"stem":1154},"Savings Badge","/laioutr-ui/ui-kit/indicators/savingsbadge","3.laioutr-ui/ui-kit/07.indicators/SavingsBadge",{"title":1156,"path":1157,"stem":1158},"Stars Rating","/laioutr-ui/ui-kit/indicators/starsrating","3.laioutr-ui/ui-kit/07.indicators/StarsRating",{"title":1160,"path":1161,"stem":1162,"children":1163},"Hosting","/hosting","4.hosting/0.index",[1164,1165,1171,1201],{"title":1160,"path":1161,"stem":1162},{"title":1166,"path":1167,"stem":1168,"children":1169},"Laioutr Cloud","/hosting/laioutr-cloud","4.hosting/0.laioutr-cloud/0.index",[1170],{"title":1166,"path":1167,"stem":1168},{"title":1172,"path":1173,"stem":1174,"children":1175},"Hosting Adapter","/hosting/hosting-adapter","4.hosting/1.hosting-adapter/0.index",[1176,1177,1181,1185,1189,1193,1197],{"title":1172,"path":1173,"stem":1174},{"title":1178,"path":1179,"stem":1180},"AWS Adapter","/hosting/hosting-adapter/aws-adapter","4.hosting/1.hosting-adapter/aws-adapter",{"title":1182,"path":1183,"stem":1184},"Azure Adapter","/hosting/hosting-adapter/azure-adapter","4.hosting/1.hosting-adapter/azure-adapter",{"title":1186,"path":1187,"stem":1188},"Google Adapter","/hosting/hosting-adapter/google-adapter","4.hosting/1.hosting-adapter/google-adapter",{"title":1190,"path":1191,"stem":1192},"Netlify Adapter","/hosting/hosting-adapter/netlify-adapter","4.hosting/1.hosting-adapter/netlify-adapter",{"title":1194,"path":1195,"stem":1196},"Scale Commerce Adapter","/hosting/hosting-adapter/scale-commerce-adapter","4.hosting/1.hosting-adapter/scale-commerce-adapter",{"title":1198,"path":1199,"stem":1200},"Vercel Adapter","/hosting/hosting-adapter/vercel-adapter","4.hosting/1.hosting-adapter/vercel-adapter",{"title":1202,"path":1203,"stem":1204,"children":1205},"Bring Your Own Server (BYOS)","/hosting/bring-your-own-server-byos","4.hosting/2.bring-your-own-server-byos/0.index",[1206,1207,1211,1215,1219,1223,1227],{"title":1202,"path":1203,"stem":1204},{"title":1208,"path":1209,"stem":1210},"BYOS Agent","/hosting/bring-your-own-server-byos/byos-agent","4.hosting/2.bring-your-own-server-byos/byos-agent",{"title":1212,"path":1213,"stem":1214},"Changelog","/hosting/bring-your-own-server-byos/changelog","4.hosting/2.bring-your-own-server-byos/changelog",{"title":1216,"path":1217,"stem":1218},"DevOps Components","/hosting/bring-your-own-server-byos/devops","4.hosting/2.bring-your-own-server-byos/devops",{"title":1220,"path":1221,"stem":1222},"Infrastructure Requirements","/hosting/bring-your-own-server-byos/infrastructure","4.hosting/2.bring-your-own-server-byos/infrastructure",{"title":1224,"path":1225,"stem":1226},"Software Requirements","/hosting/bring-your-own-server-byos/software","4.hosting/2.bring-your-own-server-byos/software",{"title":1228,"path":1229,"stem":1230},"Webhook Configuration","/hosting/bring-your-own-server-byos/webhook-config","4.hosting/2.bring-your-own-server-byos/webhook-config",{"title":1232,"path":1233,"stem":1234,"children":1235},"Checkout","/checkout","5.Checkout/0.index",[1236],{"title":1232,"path":1233,"stem":1234},{"title":1238,"path":1239,"stem":1240,"children":1241},"Larry AI","/larry-ai","6.Larry-AI/0.index",[1242],{"title":1238,"path":1239,"stem":1240},{"title":611,"path":1244,"stem":1245,"children":1246},"/figma-kit","7.Figma Kit/0.index",[1247,1248,1264],{"title":611,"path":1244,"stem":1245},{"title":121,"path":1249,"stem":1250,"children":1251,"page":55},"/figma-kit/introduction","7.Figma Kit/1.Introduction",[1252,1256,1260],{"title":1253,"path":1254,"stem":1255},"How to Start","/figma-kit/introduction/howtostart","7.Figma Kit/1.Introduction/0.howtostart",{"title":1257,"path":1258,"stem":1259},"Figma Variables","/figma-kit/introduction/figma-variables","7.Figma Kit/1.Introduction/figma-variables",{"title":1261,"path":1262,"stem":1263},"Library Connections","/figma-kit/introduction/library-connections","7.Figma Kit/1.Introduction/library-connections",{"title":1265,"path":1266,"stem":1267,"children":1268,"page":55},"Kits","/figma-kit/kits","7.Figma Kit/Kits",[1269,1272,1275,1278,1282,1285,1289,1293,1296,1299],{"title":622,"path":1270,"stem":1271},"/figma-kit/kits/b2b","7.Figma Kit/Kits/b2b",{"title":628,"path":1273,"stem":1274},"/figma-kit/kits/booking","7.Figma Kit/Kits/booking",{"title":634,"path":1276,"stem":1277},"/figma-kit/kits/cms","7.Figma Kit/Kits/cms",{"title":1279,"path":1280,"stem":1281},"Inpage Navigation","/figma-kit/kits/inpage-navigation","7.Figma Kit/Kits/inpage-navigation",{"title":740,"path":1283,"stem":1284},"/figma-kit/kits/marketplace","7.Figma Kit/Kits/marketplace",{"title":1286,"path":1287,"stem":1288},"Retail & Multichannel","/figma-kit/kits/multichannel","7.Figma Kit/Kits/multichannel",{"title":1290,"path":1291,"stem":1292},"Navigation","/figma-kit/kits/navigation","7.Figma Kit/Kits/navigation",{"title":806,"path":1294,"stem":1295},"/figma-kit/kits/saas","7.Figma Kit/Kits/saas",{"title":828,"path":1297,"stem":1298},"/figma-kit/kits/shop","7.Figma Kit/Kits/shop",{"title":881,"path":1300,"stem":1301},"/figma-kit/kits/ui-kit","7.Figma Kit/Kits/ui-kit",{"title":1303,"path":1304,"stem":1305,"children":1306},"Cockpit","/cockpit","8.Cockpit/0.index",[1307,1308,1338,1355,1372],{"title":1303,"path":1304,"stem":1305},{"title":150,"path":1309,"stem":1310,"children":1311,"page":55},"/cockpit/features","8.Cockpit/1.Features",[1312,1315,1319,1323,1327,1330,1334],{"title":443,"path":1313,"stem":1314},"/cockpit/features/apps","8.Cockpit/1.Features/apps",{"title":1316,"path":1317,"stem":1318},"Content (Collections)","/cockpit/features/content-collections","8.Cockpit/1.Features/content-collections",{"title":1320,"path":1321,"stem":1322},"Deployments","/cockpit/features/deployments","8.Cockpit/1.Features/deployments",{"title":1324,"path":1325,"stem":1326},"Markets","/cockpit/features/markets","8.Cockpit/1.Features/markets",{"title":192,"path":1328,"stem":1329},"/cockpit/features/redirects","8.Cockpit/1.Features/redirects",{"title":1331,"path":1332,"stem":1333},"Studio","/cockpit/features/studio","8.Cockpit/1.Features/studio",{"title":1335,"path":1336,"stem":1337},"Translations","/cockpit/features/translations","8.Cockpit/1.Features/translations",{"title":1339,"path":1340,"stem":1341,"children":1342,"page":55},"Project Settings","/cockpit/project-settings","8.Cockpit/2.Project-Settings",[1343,1347,1351],{"title":1344,"path":1345,"stem":1346},"Delete a project","/cockpit/project-settings/delete-project","8.Cockpit/2.Project-Settings/delete-project",{"title":1348,"path":1349,"stem":1350},"NPM","/cockpit/project-settings/npm","8.Cockpit/2.Project-Settings/npm",{"title":1352,"path":1353,"stem":1354},"Project secret key","/cockpit/project-settings/project-secret-key","8.Cockpit/2.Project-Settings/project-secret-key",{"title":1356,"path":1357,"stem":1358,"children":1359,"page":55},"Account Settings","/cockpit/account-settings","8.Cockpit/3.Account-Settings",[1360,1364,1368],{"title":1361,"path":1362,"stem":1363},"Notifications","/cockpit/account-settings/notifications","8.Cockpit/3.Account-Settings/notifications",{"title":1365,"path":1366,"stem":1367},"Preferences","/cockpit/account-settings/preferences","8.Cockpit/3.Account-Settings/preferences",{"title":1369,"path":1370,"stem":1371},"Security","/cockpit/account-settings/security","8.Cockpit/3.Account-Settings/security",{"title":1373,"path":1374,"stem":1375,"children":1376,"page":55},"Organisation Settings","/cockpit/organisation-settings","8.Cockpit/4.Organisation-Settings",[1377,1381,1385,1389,1393,1397],{"title":1378,"path":1379,"stem":1380},"API keys","/cockpit/organisation-settings/api-keys","8.Cockpit/4.Organisation-Settings/api-keys",{"title":1382,"path":1383,"stem":1384},"Billing","/cockpit/organisation-settings/billing","8.Cockpit/4.Organisation-Settings/billing",{"title":1386,"path":1387,"stem":1388},"General settings","/cockpit/organisation-settings/general-settings","8.Cockpit/4.Organisation-Settings/general-settings",{"title":1390,"path":1391,"stem":1392},"Members","/cockpit/organisation-settings/members","8.Cockpit/4.Organisation-Settings/members",{"title":1394,"path":1395,"stem":1396},"Projects","/cockpit/organisation-settings/projects","8.Cockpit/4.Organisation-Settings/projects",{"title":1398,"path":1399,"stem":1400},"Roles","/cockpit/organisation-settings/roles","8.Cockpit/4.Organisation-Settings/roles",{"title":1402,"path":1403,"stem":1404,"children":1405},"Offering","/offering","9.Offering/0.index",[1406,1407,1439,1452,1465],{"title":1402,"path":1403,"stem":1404},{"title":1408,"path":1409,"stem":1410,"children":1411},"Products","/offering/products","9.Offering/1.Products/0.index",[1412,1413,1418,1423,1428,1434],{"title":1408,"path":1409,"stem":1410},{"title":133,"path":1414,"stem":1415,"children":1416},"/offering/products/frontend","9.Offering/1.Products/1.Frontend/0.index",[1417],{"title":133,"path":1414,"stem":1415},{"title":1303,"path":1419,"stem":1420,"children":1421},"/offering/products/cockpit","9.Offering/1.Products/2.Cockpit/0.index",[1422],{"title":1303,"path":1419,"stem":1420},{"title":1232,"path":1424,"stem":1425,"children":1426},"/offering/products/checkout","9.Offering/1.Products/3.Checkout/0.index",[1427],{"title":1232,"path":1424,"stem":1425},{"title":1429,"path":1430,"stem":1431,"children":1432},"Cloud","/offering/products/cloud","9.Offering/1.Products/4.cloud/0.index",[1433],{"title":1429,"path":1430,"stem":1431},{"title":1238,"path":1435,"stem":1436,"children":1437},"/offering/products/larry-ai","9.Offering/1.Products/5.larry-ai/0.index",[1438],{"title":1238,"path":1435,"stem":1436},{"title":1440,"path":1441,"stem":1442,"children":1443,"page":55},"Service Level Agreement","/offering/service-level-agreement","9.Offering/2.service-level-agreement",[1444,1448],{"title":1445,"path":1446,"stem":1447},"Standard Service Level Agreement Composable Frontend","/offering/service-level-agreement/standard-service-level-agreement","9.Offering/2.service-level-agreement/1.standard-service-level-agreement",{"title":1449,"path":1450,"stem":1451},"Backups","/offering/service-level-agreement/backups","9.Offering/2.service-level-agreement/backups",{"title":1453,"path":1454,"stem":1455,"children":1456,"page":55},"Customer Support","/offering/customer-support","9.Offering/3.customer-support",[1457,1461],{"title":1458,"path":1459,"stem":1460},"Standard Customer Support","/offering/customer-support/standard-customer-support","9.Offering/3.customer-support/1.standard-customer-support",{"title":1462,"path":1463,"stem":1464},"Customer Support Severity Levels of Laioutr products","/offering/customer-support/maximum-serverity-levels","9.Offering/3.customer-support/maximum-serverity-levels",{"title":1466,"path":1467,"stem":1468,"children":1469,"page":55},"Compliance","/offering/compliance","9.Offering/4.Compliance",[1470],{"title":1471,"path":1472,"stem":1473},"Fair usage policy","/offering/compliance/fair-usage-policy","9.Offering/4.Compliance/fair-usage-policy",{"id":1475,"title":377,"body":1476,"description":3779,"extension":2551,"meta":3780,"navigation":1551,"path":378,"seo":3781,"sitemap":3783,"stem":379,"__hash__":3787},"docs/1.Frontend/99.api-reference/03.common-types/2.media.md",{"type":1477,"value":1478,"toc":3756},"minimark",[1479,1498,1576,1595,1600,1661,1672,1676,1680,1760,1767,1779,1789,1793,1856,1863,1876,1879,1888,1892,2018,2049,2073,2083,2097,2101,2220,2235,2239,2288,2304,2307,2315,2337,2346,2546,2560,2563,2566,2635,2703,2711,2715,2723,2875,2891,2908,2912,2915,2930,2934,3044,3047,3084,3088,3383,3386,3392,3398,3470,3476,3480,3486,3695,3705,3709,3752],[1480,1481,1482,1483,1486,1487,1490,1491,1497],"p",{},"A product has images. A hero banner has a background image. A blog post has a featured image. A category card might have a video. The shape connectors and editors return for all of these is the same ",[1484,1485,377],"code",{}," discriminated union: a ",[1484,1488,1489],{},"type"," field plus a list of source URLs (one per variant the renderer can pick from). The storefront's ",[1492,1493,1494],"a",{"href":936},[1484,1495,1496],{},"\u003CMedia>"," component reads the sources, picks the right one for the current viewport, and hands the chosen URL to nuxt-image so the right provider can serve it.",[1499,1500,1505],"pre",{"className":1501,"code":1502,"language":1503,"meta":1504,"style":1504},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { Media } from '@laioutr-core/core-types/common';\n\ntype Media = MediaImage | MediaVideo;\n","ts","",[1484,1506,1507,1546,1553],{"__ignoreMap":1504},[1508,1509,1512,1516,1519,1523,1527,1530,1533,1536,1540,1543],"span",{"class":1510,"line":1511},"line",1,[1508,1513,1515],{"class":1514},"s7zQu","import",[1508,1517,1518],{"class":1514}," type",[1508,1520,1522],{"class":1521},"sMK4o"," {",[1508,1524,1526],{"class":1525},"sTEyZ"," Media",[1508,1528,1529],{"class":1521}," }",[1508,1531,1532],{"class":1514}," from",[1508,1534,1535],{"class":1521}," '",[1508,1537,1539],{"class":1538},"sfazB","@laioutr-core/core-types/common",[1508,1541,1542],{"class":1521},"'",[1508,1544,1545],{"class":1521},";\n",[1508,1547,1549],{"class":1510,"line":1548},2,[1508,1550,1552],{"emptyLinePlaceholder":1551},true,"\n",[1508,1554,1556,1559,1562,1565,1568,1571,1574],{"class":1510,"line":1555},3,[1508,1557,1489],{"class":1558},"spNyl",[1508,1560,1526],{"class":1561},"sBMFI",[1508,1563,1564],{"class":1521}," =",[1508,1566,1567],{"class":1561}," MediaImage",[1508,1569,1570],{"class":1521}," |",[1508,1572,1573],{"class":1561}," MediaVideo",[1508,1575,1545],{"class":1521},[1480,1577,1578,1579,1582,1583,1586,1587,1590,1591,1594],{},"The variants exist because the renderer treats them differently. An image renders as a ",[1484,1580,1581],{},"\u003Cpicture>"," with responsive ",[1484,1584,1585],{},"\u003Csource>"," tags. A video needs a ",[1484,1588,1589],{},"\u003Cvideo>"," element with controls. Both wrap a list of sources that may include separate mobile and desktop variants, and each source carries the nuxt-image ",[1484,1592,1593],{},"provider"," name that knows how to fetch and resize that particular URL.",[1596,1597,1599],"h2",{"id":1598},"choosing-a-variant","Choosing a variant",[1601,1602,1603,1619],"table",{},[1604,1605,1606],"thead",{},[1607,1608,1609,1613,1616],"tr",{},[1610,1611,1612],"th",{},"Variant",[1610,1614,1615],{},"Use it for",[1610,1617,1618],{},"Renders as",[1620,1621,1622,1643],"tbody",{},[1607,1623,1624,1633,1636],{},[1625,1626,1627],"td",{},[1492,1628,1630],{"href":1629},"#mediaimage",[1484,1631,1632],{},"image",[1625,1634,1635],{},"Photographs, illustrations, product shots, hero backgrounds",[1625,1637,1638,1582,1640,1642],{},[1484,1639,1581],{},[1484,1641,1585],{}," tags via nuxt-image",[1607,1644,1645,1653,1656],{},[1625,1646,1647],{},[1492,1648,1650],{"href":1649},"#mediavideo",[1484,1651,1652],{},"video",[1625,1654,1655],{},"Product demos, hero loops, autoplay backgrounds",[1625,1657,1658,1660],{},[1484,1659,1589],{}," with sources (no built-in player UI yet)",[1480,1662,1663,1664,1667,1668,1671],{},"If you're a connector returning a product's main image, use ",[1484,1665,1666],{},"MediaImage",". If you're an editor picking from the media library, the schema field gives you both, optionally restricted via ",[1484,1669,1670],{},"allowedTypes",".",[1596,1673,1675],{"id":1674},"variants","Variants",[1677,1678,1666],"h3",{"id":1679},"mediaimage",[1499,1681,1683],{"className":1501,"code":1682,"language":1503,"meta":1504,"style":1504},"{\n  type: 'image';\n  sources: MediaSourceImage[];      // at least one\n  alt?: string;\n  placeholder?: MediaSourcePlaceholder;\n}\n",[1484,1684,1685,1690,1706,1727,1741,1754],{"__ignoreMap":1504},[1508,1686,1687],{"class":1510,"line":1511},[1508,1688,1689],{"class":1521},"{\n",[1508,1691,1692,1695,1698,1700,1702,1704],{"class":1510,"line":1548},[1508,1693,1694],{"class":1561},"  type",[1508,1696,1697],{"class":1521},":",[1508,1699,1535],{"class":1521},[1508,1701,1632],{"class":1538},[1508,1703,1542],{"class":1521},[1508,1705,1545],{"class":1521},[1508,1707,1708,1711,1713,1716,1720,1723],{"class":1510,"line":1555},[1508,1709,1710],{"class":1561},"  sources",[1508,1712,1697],{"class":1521},[1508,1714,1715],{"class":1525}," MediaSourceImage",[1508,1717,1719],{"class":1718},"swJcz","[]",[1508,1721,1722],{"class":1521},";",[1508,1724,1726],{"class":1725},"sHwdD","      // at least one\n",[1508,1728,1730,1733,1736,1739],{"class":1510,"line":1729},4,[1508,1731,1732],{"class":1525},"  alt",[1508,1734,1735],{"class":1521},"?:",[1508,1737,1738],{"class":1525}," string",[1508,1740,1545],{"class":1521},[1508,1742,1744,1747,1749,1752],{"class":1510,"line":1743},5,[1508,1745,1746],{"class":1525},"  placeholder",[1508,1748,1735],{"class":1521},[1508,1750,1751],{"class":1525}," MediaSourcePlaceholder",[1508,1753,1545],{"class":1521},[1508,1755,1757],{"class":1510,"line":1756},6,[1508,1758,1759],{"class":1521},"}\n",[1480,1761,1762,1763,1766],{},"Use this for any still asset. The ",[1484,1764,1765],{},"sources"," array is the heart of the type: one entry per variant the renderer can choose from. A single static source covers the simple case. Multiple sources let you ship separate files for mobile and desktop, or different formats for different providers.",[1480,1768,1769,1772,1773,1775,1776,1778],{},[1484,1770,1771],{},"alt"," is the default alt text. The renderer uses it unless overridden via the ",[1484,1774,1496],{}," component's ",[1484,1777,1771],{}," prop.",[1480,1780,1781,1784,1785,1671],{},[1484,1782,1783],{},"placeholder"," shows a low-quality preview while the real image loads. See ",[1492,1786,1788],{"href":1787},"#placeholders","Placeholders",[1677,1790,1792],{"id":1791},"mediavideo","MediaVideo",[1499,1794,1796],{"className":1501,"code":1795,"language":1503,"meta":1504,"style":1504},"{\n  type: 'video';\n  sources: MediaSourceVideo[];      // at least one\n  preview?: MediaImage;\n  alt?: string;\n}\n",[1484,1797,1798,1802,1816,1831,1842,1852],{"__ignoreMap":1504},[1508,1799,1800],{"class":1510,"line":1511},[1508,1801,1689],{"class":1521},[1508,1803,1804,1806,1808,1810,1812,1814],{"class":1510,"line":1548},[1508,1805,1694],{"class":1561},[1508,1807,1697],{"class":1521},[1508,1809,1535],{"class":1521},[1508,1811,1652],{"class":1538},[1508,1813,1542],{"class":1521},[1508,1815,1545],{"class":1521},[1508,1817,1818,1820,1822,1825,1827,1829],{"class":1510,"line":1555},[1508,1819,1710],{"class":1561},[1508,1821,1697],{"class":1521},[1508,1823,1824],{"class":1525}," MediaSourceVideo",[1508,1826,1719],{"class":1718},[1508,1828,1722],{"class":1521},[1508,1830,1726],{"class":1725},[1508,1832,1833,1836,1838,1840],{"class":1510,"line":1729},[1508,1834,1835],{"class":1525},"  preview",[1508,1837,1735],{"class":1521},[1508,1839,1567],{"class":1525},[1508,1841,1545],{"class":1521},[1508,1843,1844,1846,1848,1850],{"class":1510,"line":1743},[1508,1845,1732],{"class":1525},[1508,1847,1735],{"class":1521},[1508,1849,1738],{"class":1525},[1508,1851,1545],{"class":1521},[1508,1853,1854],{"class":1510,"line":1756},[1508,1855,1759],{"class":1521},[1480,1857,1858,1859,1862],{},"Use this for moving assets. The ",[1484,1860,1861],{},"preview"," field carries a still image to show as a poster while the video loads (or as a fallback in renderers that don't play video).",[1480,1864,1865,1866,1868,1869,1871,1872,1875],{},"The Media UI Kit component does not currently render ",[1484,1867,1792],{}," (it type-narrows to images). If you ship video content today, render it directly with a ",[1484,1870,1589],{}," element keyed off ",[1484,1873,1874],{},"media.sources",". A first-class video renderer is on the roadmap.",[1596,1877,1878],{"id":1765},"Sources",[1480,1880,1881,1882,1884,1885,1887],{},"A ",[1484,1883,377],{}," object is mostly its ",[1484,1886,1765],{},": each one is a self-contained URL plus the metadata the renderer needs to pick and serve it.",[1677,1889,1891],{"id":1890},"mediasourceimage","MediaSourceImage",[1499,1893,1895],{"className":1501,"code":1894,"language":1503,"meta":1504,"style":1504},"{\n  provider: string;                 // nuxt-image provider name\n  src: string;                      // URL or provider-specific id\n  width?: number;\n  height?: number;\n  responsive?: 'static' | 'mobile' | 'desktop';\n  focalPoint?: [number, number];    // [x, y] as fractions, e.g. [0.5, 0.5] for center\n}\n",[1484,1896,1897,1901,1915,1929,1941,1952,1986,2013],{"__ignoreMap":1504},[1508,1898,1899],{"class":1510,"line":1511},[1508,1900,1689],{"class":1521},[1508,1902,1903,1906,1908,1910,1912],{"class":1510,"line":1548},[1508,1904,1905],{"class":1561},"  provider",[1508,1907,1697],{"class":1521},[1508,1909,1738],{"class":1525},[1508,1911,1722],{"class":1521},[1508,1913,1914],{"class":1725},"                 // nuxt-image provider name\n",[1508,1916,1917,1920,1922,1924,1926],{"class":1510,"line":1555},[1508,1918,1919],{"class":1561},"  src",[1508,1921,1697],{"class":1521},[1508,1923,1738],{"class":1525},[1508,1925,1722],{"class":1521},[1508,1927,1928],{"class":1725},"                      // URL or provider-specific id\n",[1508,1930,1931,1934,1936,1939],{"class":1510,"line":1729},[1508,1932,1933],{"class":1525},"  width",[1508,1935,1735],{"class":1521},[1508,1937,1938],{"class":1525}," number",[1508,1940,1545],{"class":1521},[1508,1942,1943,1946,1948,1950],{"class":1510,"line":1743},[1508,1944,1945],{"class":1525},"  height",[1508,1947,1735],{"class":1521},[1508,1949,1938],{"class":1525},[1508,1951,1545],{"class":1521},[1508,1953,1954,1957,1959,1961,1964,1966,1968,1970,1973,1975,1977,1979,1982,1984],{"class":1510,"line":1756},[1508,1955,1956],{"class":1525},"  responsive",[1508,1958,1735],{"class":1521},[1508,1960,1535],{"class":1521},[1508,1962,1963],{"class":1538},"static",[1508,1965,1542],{"class":1521},[1508,1967,1570],{"class":1521},[1508,1969,1535],{"class":1521},[1508,1971,1972],{"class":1538},"mobile",[1508,1974,1542],{"class":1521},[1508,1976,1570],{"class":1521},[1508,1978,1535],{"class":1521},[1508,1980,1981],{"class":1538},"desktop",[1508,1983,1542],{"class":1521},[1508,1985,1545],{"class":1521},[1508,1987,1989,1992,1994,1997,2000,2003,2005,2008,2010],{"class":1510,"line":1988},7,[1508,1990,1991],{"class":1525},"  focalPoint",[1508,1993,1735],{"class":1521},[1508,1995,1996],{"class":1718}," [",[1508,1998,1999],{"class":1525},"number",[1508,2001,2002],{"class":1521},",",[1508,2004,1938],{"class":1525},[1508,2006,2007],{"class":1718},"]",[1508,2009,1722],{"class":1521},[1508,2011,2012],{"class":1725},"    // [x, y] as fractions, e.g. [0.5, 0.5] for center\n",[1508,2014,2016],{"class":1510,"line":2015},8,[1508,2017,1759],{"class":1521},[1480,2019,2020,2022,2023,2026,2027,2030,2031,2030,2034,2037,2038,2041,2042,2048],{},[1484,2021,1593],{}," is the most load-bearing field. It tells nuxt-image which adapter to use to fetch and resize this URL. Common values are ",[1484,2024,2025],{},"'shopify'"," (Shopify CDN), ",[1484,2028,2029],{},"'cloudinary'",", ",[1484,2032,2033],{},"'directus'",[1484,2035,2036],{},"'sanity'",", custom names registered by your app, or ",[1484,2039,2040],{},"'none'"," (a ",[1492,2043,2047],{"href":2044,"rel":2045},"https://image.nuxt.com/providers/none",[2046],"nofollow","nuxt-image built-in",") to pass the URL through unchanged.",[1480,2050,2051,2054,2055,2058,2059,2062,2063,2065,2066,2068,2069,2072],{},[1484,2052,2053],{},"width"," and ",[1484,2056,2057],{},"height"," are the source's natural dimensions. Set them when the backend gives you that information. The renderer uses them to set the ",[1484,2060,2061],{},"\u003Cimg>"," ",[1484,2064,2053],{},"/",[1484,2067,2057],{}," attributes (preventing layout shift) and to compute the native aspect ratio when ",[1484,2070,2071],{},"aspectRatio={true}"," is passed.",[1480,2074,2075,2078,2079,1671],{},[1484,2076,2077],{},"responsive"," marks a source as mobile-only or desktop-only. See ",[1492,2080,2082],{"href":2081},"#responsive-sources","Responsive sources",[1480,2084,2085,2088,2089,2092,2093,2096],{},[1484,2086,2087],{},"focalPoint"," lets the editor (or the connector) declare which part of the image should remain visible when the renderer crops the image. ",[1484,2090,2091],{},"[0.5, 0.5]"," is center; ",[1484,2094,2095],{},"[0.0, 0.0]"," is top-left.",[1677,2098,2100],{"id":2099},"mediasourcevideo","MediaSourceVideo",[1499,2102,2104],{"className":1501,"code":2103,"language":1503,"meta":1504,"style":1504},"{\n  provider: string;\n  src: string;\n  width: number;                    // required for video\n  height: number;                   // required for video\n  length?: Duration;                // ISO 8601 duration string\n  format?: string;                  // e.g. 'mp4', 'webm'\n  responsive?: 'static' | 'mobile' | 'desktop';\n}\n",[1484,2105,2106,2110,2120,2130,2143,2156,2171,2185,2215],{"__ignoreMap":1504},[1508,2107,2108],{"class":1510,"line":1511},[1508,2109,1689],{"class":1521},[1508,2111,2112,2114,2116,2118],{"class":1510,"line":1548},[1508,2113,1905],{"class":1561},[1508,2115,1697],{"class":1521},[1508,2117,1738],{"class":1525},[1508,2119,1545],{"class":1521},[1508,2121,2122,2124,2126,2128],{"class":1510,"line":1555},[1508,2123,1919],{"class":1561},[1508,2125,1697],{"class":1521},[1508,2127,1738],{"class":1525},[1508,2129,1545],{"class":1521},[1508,2131,2132,2134,2136,2138,2140],{"class":1510,"line":1729},[1508,2133,1933],{"class":1561},[1508,2135,1697],{"class":1521},[1508,2137,1938],{"class":1525},[1508,2139,1722],{"class":1521},[1508,2141,2142],{"class":1725},"                    // required for video\n",[1508,2144,2145,2147,2149,2151,2153],{"class":1510,"line":1743},[1508,2146,1945],{"class":1561},[1508,2148,1697],{"class":1521},[1508,2150,1938],{"class":1525},[1508,2152,1722],{"class":1521},[1508,2154,2155],{"class":1725},"                   // required for video\n",[1508,2157,2158,2161,2163,2166,2168],{"class":1510,"line":1756},[1508,2159,2160],{"class":1525},"  length",[1508,2162,1735],{"class":1521},[1508,2164,2165],{"class":1525}," Duration",[1508,2167,1722],{"class":1521},[1508,2169,2170],{"class":1725},"                // ISO 8601 duration string\n",[1508,2172,2173,2176,2178,2180,2182],{"class":1510,"line":1988},[1508,2174,2175],{"class":1525},"  format",[1508,2177,1735],{"class":1521},[1508,2179,1738],{"class":1525},[1508,2181,1722],{"class":1521},[1508,2183,2184],{"class":1725},"                  // e.g. 'mp4', 'webm'\n",[1508,2186,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213],{"class":1510,"line":2015},[1508,2188,1956],{"class":1525},[1508,2190,1735],{"class":1521},[1508,2192,1535],{"class":1521},[1508,2194,1963],{"class":1538},[1508,2196,1542],{"class":1521},[1508,2198,1570],{"class":1521},[1508,2200,1535],{"class":1521},[1508,2202,1972],{"class":1538},[1508,2204,1542],{"class":1521},[1508,2206,1570],{"class":1521},[1508,2208,1535],{"class":1521},[1508,2210,1981],{"class":1538},[1508,2212,1542],{"class":1521},[1508,2214,1545],{"class":1521},[1508,2216,2218],{"class":1510,"line":2217},9,[1508,2219,1759],{"class":1521},[1480,2221,2222,2223,2226,2227,2230,2231,2234],{},"Width and height are required because video players need them up front to reserve layout space. ",[1484,2224,2225],{},"length"," is an ISO 8601 duration (",[1484,2228,2229],{},"'PT1M30S'"," for 90 seconds). ",[1484,2232,2233],{},"format"," lets the renderer pick the best source for the browser when multiple formats are provided.",[1677,2236,2238],{"id":2237},"mediasourceplaceholder","MediaSourcePlaceholder",[1499,2240,2242],{"className":1501,"code":2241,"language":1503,"meta":1504,"style":1504},"type MediaSourcePlaceholder = ['solid', string] | ['thumbhash', string];\n",[1484,2243,2244],{"__ignoreMap":1504},[1508,2245,2246,2248,2250,2252,2254,2256,2259,2261,2263,2265,2268,2271,2273,2275,2278,2280,2282,2284,2286],{"class":1510,"line":1511},[1508,2247,1489],{"class":1558},[1508,2249,1751],{"class":1561},[1508,2251,1564],{"class":1521},[1508,2253,1996],{"class":1525},[1508,2255,1542],{"class":1521},[1508,2257,2258],{"class":1538},"solid",[1508,2260,1542],{"class":1521},[1508,2262,2002],{"class":1521},[1508,2264,1738],{"class":1561},[1508,2266,2267],{"class":1525},"] ",[1508,2269,2270],{"class":1521},"|",[1508,2272,1996],{"class":1525},[1508,2274,1542],{"class":1521},[1508,2276,2277],{"class":1538},"thumbhash",[1508,2279,1542],{"class":1521},[1508,2281,2002],{"class":1521},[1508,2283,1738],{"class":1561},[1508,2285,2007],{"class":1525},[1508,2287,1545],{"class":1521},[1480,2289,2290,2291,2294,2295,2298,2299,2303],{},"A two-element tuple. The first element picks the placeholder style; the second element carries the data. ",[1484,2292,2293],{},"'solid'"," takes a hex color. ",[1484,2296,2297],{},"'thumbhash'"," takes a ",[1492,2300,2277],{"href":2301,"rel":2302},"https://evanw.github.io/thumbhash/",[2046]," string (Shopify produces these out of the box). Both render under the real image until it loads.",[1596,2305,2082],{"id":2306},"responsive-sources",[1480,2308,1881,2309,2311,2312,2314],{},[1484,2310,377],{}," value can ship separate sources for mobile and desktop. The renderer picks one per viewport based on the ",[1484,2313,2077],{}," field on each source:",[2316,2317,2318,2325,2331],"ul",{},[2319,2320,2321,2324],"li",{},[1484,2322,2323],{},"'static'"," (or omitted): the source works on all viewports. This is the default.",[2319,2326,2327,2330],{},[1484,2328,2329],{},"'mobile'",": the renderer uses this source below the desktop breakpoint.",[2319,2332,2333,2336],{},[1484,2334,2335],{},"'desktop'",": the renderer uses this source at and above the desktop breakpoint.",[1480,2338,2339,2340,2342,2343,2345],{},"When both a mobile and a desktop source are present, the renderer emits a ",[1484,2341,1581],{}," element with two ",[1484,2344,1585],{}," tags and a media query, letting the browser pick. When only one source exists, it's used everywhere.",[1499,2347,2349],{"className":1501,"code":2348,"language":1503,"meta":1504,"style":1504},"const responsiveBanner: MediaImage = {\n  type: 'image',\n  alt: 'Summer collection 2026',\n  sources: [\n    { provider: 'shopify', src: 'https://cdn.shopify.com/.../mobile.jpg', width: 750, height: 1000, responsive: 'mobile' },\n    { provider: 'shopify', src: 'https://cdn.shopify.com/.../desktop.jpg', width: 2400, height: 800, responsive: 'desktop' },\n  ],\n};\n",[1484,2350,2351,2368,2383,2398,2407,2475,2534,2541],{"__ignoreMap":1504},[1508,2352,2353,2356,2359,2361,2363,2365],{"class":1510,"line":1511},[1508,2354,2355],{"class":1558},"const",[1508,2357,2358],{"class":1525}," responsiveBanner",[1508,2360,1697],{"class":1521},[1508,2362,1567],{"class":1561},[1508,2364,1564],{"class":1521},[1508,2366,2367],{"class":1521}," {\n",[1508,2369,2370,2372,2374,2376,2378,2380],{"class":1510,"line":1548},[1508,2371,1694],{"class":1718},[1508,2373,1697],{"class":1521},[1508,2375,1535],{"class":1521},[1508,2377,1632],{"class":1538},[1508,2379,1542],{"class":1521},[1508,2381,2382],{"class":1521},",\n",[1508,2384,2385,2387,2389,2391,2394,2396],{"class":1510,"line":1555},[1508,2386,1732],{"class":1718},[1508,2388,1697],{"class":1521},[1508,2390,1535],{"class":1521},[1508,2392,2393],{"class":1538},"Summer collection 2026",[1508,2395,1542],{"class":1521},[1508,2397,2382],{"class":1521},[1508,2399,2400,2402,2404],{"class":1510,"line":1729},[1508,2401,1710],{"class":1718},[1508,2403,1697],{"class":1521},[1508,2405,2406],{"class":1525}," [\n",[1508,2408,2409,2412,2415,2417,2419,2422,2424,2426,2429,2431,2433,2436,2438,2440,2443,2445,2449,2451,2454,2456,2459,2461,2464,2466,2468,2470,2472],{"class":1510,"line":1743},[1508,2410,2411],{"class":1521},"    {",[1508,2413,2414],{"class":1718}," provider",[1508,2416,1697],{"class":1521},[1508,2418,1535],{"class":1521},[1508,2420,2421],{"class":1538},"shopify",[1508,2423,1542],{"class":1521},[1508,2425,2002],{"class":1521},[1508,2427,2428],{"class":1718}," src",[1508,2430,1697],{"class":1521},[1508,2432,1535],{"class":1521},[1508,2434,2435],{"class":1538},"https://cdn.shopify.com/.../mobile.jpg",[1508,2437,1542],{"class":1521},[1508,2439,2002],{"class":1521},[1508,2441,2442],{"class":1718}," width",[1508,2444,1697],{"class":1521},[1508,2446,2448],{"class":2447},"sbssI"," 750",[1508,2450,2002],{"class":1521},[1508,2452,2453],{"class":1718}," height",[1508,2455,1697],{"class":1521},[1508,2457,2458],{"class":2447}," 1000",[1508,2460,2002],{"class":1521},[1508,2462,2463],{"class":1718}," responsive",[1508,2465,1697],{"class":1521},[1508,2467,1535],{"class":1521},[1508,2469,1972],{"class":1538},[1508,2471,1542],{"class":1521},[1508,2473,2474],{"class":1521}," },\n",[1508,2476,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2500,2502,2504,2506,2508,2511,2513,2515,2517,2520,2522,2524,2526,2528,2530,2532],{"class":1510,"line":1756},[1508,2478,2411],{"class":1521},[1508,2480,2414],{"class":1718},[1508,2482,1697],{"class":1521},[1508,2484,1535],{"class":1521},[1508,2486,2421],{"class":1538},[1508,2488,1542],{"class":1521},[1508,2490,2002],{"class":1521},[1508,2492,2428],{"class":1718},[1508,2494,1697],{"class":1521},[1508,2496,1535],{"class":1521},[1508,2498,2499],{"class":1538},"https://cdn.shopify.com/.../desktop.jpg",[1508,2501,1542],{"class":1521},[1508,2503,2002],{"class":1521},[1508,2505,2442],{"class":1718},[1508,2507,1697],{"class":1521},[1508,2509,2510],{"class":2447}," 2400",[1508,2512,2002],{"class":1521},[1508,2514,2453],{"class":1718},[1508,2516,1697],{"class":1521},[1508,2518,2519],{"class":2447}," 800",[1508,2521,2002],{"class":1521},[1508,2523,2463],{"class":1718},[1508,2525,1697],{"class":1521},[1508,2527,1535],{"class":1521},[1508,2529,1981],{"class":1538},[1508,2531,1542],{"class":1521},[1508,2533,2474],{"class":1521},[1508,2535,2536,2539],{"class":1510,"line":1988},[1508,2537,2538],{"class":1525},"  ]",[1508,2540,2382],{"class":1521},[1508,2542,2543],{"class":1510,"line":2015},[1508,2544,2545],{"class":1521},"};\n",[1480,2547,2548,2549,2552,2553,2556,2557,2559],{},"The desktop breakpoint defaults to ",[1484,2550,2551],{},"md"," (the laioutr-ui theme breakpoint). Pass ",[1484,2554,2555],{},"desktopBreakpoint"," to the ",[1484,2558,1496],{}," component to change it.",[1596,2561,1788],{"id":2562},"placeholders",[1480,2564,2565],{},"Placeholders give you something to show on screen before the full image arrives, eliminating the visual jank of a blank box jumping into a photo.",[1499,2567,2569],{"className":1501,"code":2568,"language":1503,"meta":1504,"style":1504},"{\n  type: 'image',\n  sources: [...],\n  placeholder: ['solid', '#1a1a1a'],\n}\n",[1484,2570,2571,2575,2589,2604,2631],{"__ignoreMap":1504},[1508,2572,2573],{"class":1510,"line":1511},[1508,2574,1689],{"class":1521},[1508,2576,2577,2579,2581,2583,2585,2587],{"class":1510,"line":1548},[1508,2578,1694],{"class":1561},[1508,2580,1697],{"class":1521},[1508,2582,1535],{"class":1521},[1508,2584,1632],{"class":1538},[1508,2586,1542],{"class":1521},[1508,2588,2382],{"class":1521},[1508,2590,2591,2593,2595,2597,2600,2602],{"class":1510,"line":1555},[1508,2592,1710],{"class":1561},[1508,2594,1697],{"class":1521},[1508,2596,1996],{"class":1718},[1508,2598,2599],{"class":1521},"...",[1508,2601,2007],{"class":1718},[1508,2603,2382],{"class":1521},[1508,2605,2606,2608,2610,2612,2614,2616,2618,2620,2622,2625,2627,2629],{"class":1510,"line":1729},[1508,2607,1746],{"class":1561},[1508,2609,1697],{"class":1521},[1508,2611,1996],{"class":1718},[1508,2613,1542],{"class":1521},[1508,2615,2258],{"class":1538},[1508,2617,1542],{"class":1521},[1508,2619,2002],{"class":1521},[1508,2621,1535],{"class":1521},[1508,2623,2624],{"class":1538},"#1a1a1a",[1508,2626,1542],{"class":1521},[1508,2628,2007],{"class":1718},[1508,2630,2382],{"class":1521},[1508,2632,2633],{"class":1510,"line":1743},[1508,2634,1759],{"class":1521},[1499,2636,2638],{"className":1501,"code":2637,"language":1503,"meta":1504,"style":1504},"{\n  type: 'image',\n  sources: [...],\n  placeholder: ['thumbhash', 'wXj5SoJ4eIB3iIeHf...'],\n}\n",[1484,2639,2640,2644,2658,2672,2699],{"__ignoreMap":1504},[1508,2641,2642],{"class":1510,"line":1511},[1508,2643,1689],{"class":1521},[1508,2645,2646,2648,2650,2652,2654,2656],{"class":1510,"line":1548},[1508,2647,1694],{"class":1561},[1508,2649,1697],{"class":1521},[1508,2651,1535],{"class":1521},[1508,2653,1632],{"class":1538},[1508,2655,1542],{"class":1521},[1508,2657,2382],{"class":1521},[1508,2659,2660,2662,2664,2666,2668,2670],{"class":1510,"line":1555},[1508,2661,1710],{"class":1561},[1508,2663,1697],{"class":1521},[1508,2665,1996],{"class":1718},[1508,2667,2599],{"class":1521},[1508,2669,2007],{"class":1718},[1508,2671,2382],{"class":1521},[1508,2673,2674,2676,2678,2680,2682,2684,2686,2688,2690,2693,2695,2697],{"class":1510,"line":1729},[1508,2675,1746],{"class":1561},[1508,2677,1697],{"class":1521},[1508,2679,1996],{"class":1718},[1508,2681,1542],{"class":1521},[1508,2683,2277],{"class":1538},[1508,2685,1542],{"class":1521},[1508,2687,2002],{"class":1521},[1508,2689,1535],{"class":1521},[1508,2691,2692],{"class":1538},"wXj5SoJ4eIB3iIeHf...",[1508,2694,1542],{"class":1521},[1508,2696,2007],{"class":1718},[1508,2698,2382],{"class":1521},[1508,2700,2701],{"class":1510,"line":1743},[1508,2702,1759],{"class":1521},[1480,2704,2705,2707,2708,2710],{},[1484,2706,2293],{}," is the right choice when the connector knows the dominant color of the image (Shopify exposes this; some DAMs do too). ",[1484,2709,2297],{}," produces a tiny blurred preview that looks like the real image at very low resolution. Both are inline (no extra HTTP request).",[1596,2712,2714],{"id":2713},"rendering-media","Rendering Media",[1480,2716,1881,2717,2719,2720,2722],{},[1484,2718,377],{}," value is just data. Turning it into pixels on the page is the job of the ",[1484,2721,1496],{}," UI Kit component, which reads the sources, picks the right one for the viewport, and hands the URL to nuxt-image:",[1499,2724,2729],{"className":2725,"code":2726,"filename":2727,"language":2728,"meta":1504,"style":1504},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { MediaImage } from '@laioutr-core/core-types/common';\nconst props = defineProps\u003C{ image: MediaImage }>();\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMedia :media=\"props.image\" sizes=\"100vw md:50vw\" />\n\u003C/template>\n","components/SomeBlock.vue","vue",[1484,2730,2731,2758,2780,2811,2820,2824,2833,2867],{"__ignoreMap":1504},[1508,2732,2733,2736,2739,2742,2745,2748,2751,2753,2755],{"class":1510,"line":1511},[1508,2734,2735],{"class":1521},"\u003C",[1508,2737,2738],{"class":1718},"script",[1508,2740,2741],{"class":1558}," setup",[1508,2743,2744],{"class":1558}," lang",[1508,2746,2747],{"class":1521},"=",[1508,2749,2750],{"class":1521},"\"",[1508,2752,1503],{"class":1538},[1508,2754,2750],{"class":1521},[1508,2756,2757],{"class":1521},">\n",[1508,2759,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778],{"class":1510,"line":1548},[1508,2761,1515],{"class":1514},[1508,2763,1518],{"class":1514},[1508,2765,1522],{"class":1521},[1508,2767,1567],{"class":1525},[1508,2769,1529],{"class":1521},[1508,2771,1532],{"class":1514},[1508,2773,1535],{"class":1521},[1508,2775,1539],{"class":1538},[1508,2777,1542],{"class":1521},[1508,2779,1545],{"class":1521},[1508,2781,2782,2784,2787,2789,2793,2796,2799,2801,2803,2806,2809],{"class":1510,"line":1555},[1508,2783,2355],{"class":1558},[1508,2785,2786],{"class":1525}," props ",[1508,2788,2747],{"class":1521},[1508,2790,2792],{"class":2791},"s2Zo4"," defineProps",[1508,2794,2795],{"class":1521},"\u003C{",[1508,2797,2798],{"class":1718}," image",[1508,2800,1697],{"class":1521},[1508,2802,1567],{"class":1561},[1508,2804,2805],{"class":1521}," }>",[1508,2807,2808],{"class":1525},"()",[1508,2810,1545],{"class":1521},[1508,2812,2813,2816,2818],{"class":1510,"line":1729},[1508,2814,2815],{"class":1521},"\u003C/",[1508,2817,2738],{"class":1718},[1508,2819,2757],{"class":1521},[1508,2821,2822],{"class":1510,"line":1743},[1508,2823,1552],{"emptyLinePlaceholder":1551},[1508,2825,2826,2828,2831],{"class":1510,"line":1756},[1508,2827,2735],{"class":1521},[1508,2829,2830],{"class":1718},"template",[1508,2832,2757],{"class":1521},[1508,2834,2835,2838,2840,2843,2845,2847,2850,2852,2855,2857,2859,2862,2864],{"class":1510,"line":1988},[1508,2836,2837],{"class":1521},"  \u003C",[1508,2839,377],{"class":1718},[1508,2841,2842],{"class":1558}," :media",[1508,2844,2747],{"class":1521},[1508,2846,2750],{"class":1521},[1508,2848,2849],{"class":1538},"props.image",[1508,2851,2750],{"class":1521},[1508,2853,2854],{"class":1558}," sizes",[1508,2856,2747],{"class":1521},[1508,2858,2750],{"class":1521},[1508,2860,2861],{"class":1538},"100vw md:50vw",[1508,2863,2750],{"class":1521},[1508,2865,2866],{"class":1521}," />\n",[1508,2868,2869,2871,2873],{"class":1510,"line":2015},[1508,2870,2815],{"class":1521},[1508,2872,2830],{"class":1718},[1508,2874,2757],{"class":1521},[1480,2876,2877,2878,2065,2881,2884,2885,2890],{},"The component handles responsive source selection, focal-point cropping, placeholder display, lazy loading, and the ",[1484,2879,2880],{},"imagesizes",[1484,2882,2883],{},"imagesrcset"," link tags for above-the-fold preloading. See the ",[1492,2886,2887,2889],{"href":936},[1484,2888,1496],{}," component reference"," for the full prop list.",[2892,2893,2894,2895,2898,2899,2901,2902,2904,2905,2907],"warning",{},"Laioutr's frontend-core registers nuxt-image with ",[1484,2896,2897],{},"provider: 'none'"," at the module level, which disables the global default; each source's ",[1484,2900,1593],{}," field is what selects an adapter at render time. The same name ",[1484,2903,2040],{}," is also a valid per-source provider: it's nuxt-image's built-in pass-through that returns the URL unchanged. If you set a source's ",[1484,2906,1593],{}," to a name nobody has registered, nuxt-image errors at provider-resolution time rather than silently falling back.",[1596,2909,2911],{"id":2910},"for-connector-authors","For connector authors",[1480,2913,2914],{},"This is the section that prevents the most common bug in connector code: returning media the storefront can't render efficiently. The rule is short:",[2916,2917,2918],"blockquote",{},[1480,2919,2920,2921,2923,2924,2926,2927,2929],{},"Map your backend's asset shape to a ",[1484,2922,377],{}," object with the right ",[1484,2925,1593],{},". Never return a bare URL string, never default everything to ",[1484,2928,2040],{},", and never drop the dimensions when the backend gives them to you.",[1677,2931,2933],{"id":2932},"wrong","Wrong",[1499,2935,2937],{"className":1501,"code":2936,"language":1503,"meta":1504,"style":1504},"// Shopify connector, product media handler\nreturn {\n  cover: product.featuredImage.url,                        // ❌ bare string\n  gallery: product.images.map((img) => ({ url: img.url })), // ❌ ad-hoc shape\n};\n",[1484,2938,2939,2944,2951,2976,3040],{"__ignoreMap":1504},[1508,2940,2941],{"class":1510,"line":1511},[1508,2942,2943],{"class":1725},"// Shopify connector, product media handler\n",[1508,2945,2946,2949],{"class":1510,"line":1548},[1508,2947,2948],{"class":1514},"return",[1508,2950,2367],{"class":1521},[1508,2952,2953,2956,2958,2961,2963,2966,2968,2971,2973],{"class":1510,"line":1555},[1508,2954,2955],{"class":1718},"  cover",[1508,2957,1697],{"class":1521},[1508,2959,2960],{"class":1525}," product",[1508,2962,1671],{"class":1521},[1508,2964,2965],{"class":1525},"featuredImage",[1508,2967,1671],{"class":1521},[1508,2969,2970],{"class":1525},"url",[1508,2972,2002],{"class":1521},[1508,2974,2975],{"class":1725},"                        // ❌ bare string\n",[1508,2977,2978,2981,2983,2985,2987,2990,2992,2995,2998,3000,3004,3007,3010,3013,3016,3019,3021,3024,3026,3029,3032,3035,3037],{"class":1510,"line":1729},[1508,2979,2980],{"class":1718},"  gallery",[1508,2982,1697],{"class":1521},[1508,2984,2960],{"class":1525},[1508,2986,1671],{"class":1521},[1508,2988,2989],{"class":1525},"images",[1508,2991,1671],{"class":1521},[1508,2993,2994],{"class":2791},"map",[1508,2996,2997],{"class":1525},"(",[1508,2999,2997],{"class":1521},[1508,3001,3003],{"class":3002},"sHdIc","img",[1508,3005,3006],{"class":1521},")",[1508,3008,3009],{"class":1558}," =>",[1508,3011,3012],{"class":1525}," (",[1508,3014,3015],{"class":1521},"{",[1508,3017,3018],{"class":1718}," url",[1508,3020,1697],{"class":1521},[1508,3022,3023],{"class":1525}," img",[1508,3025,1671],{"class":1521},[1508,3027,3028],{"class":1525},"url ",[1508,3030,3031],{"class":1521},"}",[1508,3033,3034],{"class":1525},"))",[1508,3036,2002],{"class":1521},[1508,3038,3039],{"class":1725}," // ❌ ad-hoc shape\n",[1508,3041,3042],{"class":1510,"line":1743},[1508,3043,2545],{"class":1521},[1480,3045,3046],{},"This breaks for three independent reasons:",[3048,3049,3050,3062,3070],"ol",{},[2319,3051,3052,3058,3059,3061],{},[3053,3054,3055,3056,1671],"strong",{},"Bare strings aren't ",[1484,3057,377],{}," The frontend doesn't know whether this is an image or a video, what its dimensions are, or which nuxt-image provider can serve it. Components that expect ",[1484,3060,377],{}," will type-error or misrender.",[2319,3063,3064,3069],{},[3053,3065,3066,3067,1671],{},"No ",[1484,3068,1593],{}," The renderer can't ask Shopify's CDN to resize the image, so users download full-resolution originals on every viewport.",[2319,3071,3072,3075,3076,3078,3079,2065,3081,3083],{},[3053,3073,3074],{},"No dimensions."," The ",[1484,3077,2061],{}," tag ships without ",[1484,3080,2053],{},[1484,3082,2057],{},", causing layout shift as each image arrives.",[1677,3085,3087],{"id":3086},"right","Right",[1499,3089,3091],{"className":1501,"code":3090,"language":1503,"meta":1504,"style":1504},"// Shopify connector, product media handler\nimport type { MediaImage } from '@laioutr-core/core-types/common';\n\nconst toMediaImage = (img: ShopifyImage): MediaImage => ({\n  type: 'image',\n  alt: img.altText ?? '',\n  placeholder: img.thumbhash ? ['thumbhash', img.thumbhash] : undefined,\n  sources: [\n    {\n      provider: 'shopify',\n      src: img.url,\n      width: img.width,\n      height: img.height,\n    },\n  ],\n});\n\nreturn {\n  cover: toMediaImage(product.featuredImage),\n  gallery: product.images.map(toMediaImage),\n};\n",[1484,3092,3093,3097,3119,3123,3152,3166,3187,3225,3233,3238,3254,3270,3286,3302,3308,3315,3324,3329,3336,3356,3378],{"__ignoreMap":1504},[1508,3094,3095],{"class":1510,"line":1511},[1508,3096,2943],{"class":1725},[1508,3098,3099,3101,3103,3105,3107,3109,3111,3113,3115,3117],{"class":1510,"line":1548},[1508,3100,1515],{"class":1514},[1508,3102,1518],{"class":1514},[1508,3104,1522],{"class":1521},[1508,3106,1567],{"class":1525},[1508,3108,1529],{"class":1521},[1508,3110,1532],{"class":1514},[1508,3112,1535],{"class":1521},[1508,3114,1539],{"class":1538},[1508,3116,1542],{"class":1521},[1508,3118,1545],{"class":1521},[1508,3120,3121],{"class":1510,"line":1555},[1508,3122,1552],{"emptyLinePlaceholder":1551},[1508,3124,3125,3127,3130,3132,3134,3136,3138,3141,3144,3146,3148,3150],{"class":1510,"line":1729},[1508,3126,2355],{"class":1558},[1508,3128,3129],{"class":1525}," toMediaImage ",[1508,3131,2747],{"class":1521},[1508,3133,3012],{"class":1521},[1508,3135,3003],{"class":3002},[1508,3137,1697],{"class":1521},[1508,3139,3140],{"class":1561}," ShopifyImage",[1508,3142,3143],{"class":1521},"):",[1508,3145,1567],{"class":1561},[1508,3147,3009],{"class":1558},[1508,3149,3012],{"class":1525},[1508,3151,1689],{"class":1521},[1508,3153,3154,3156,3158,3160,3162,3164],{"class":1510,"line":1743},[1508,3155,1694],{"class":1718},[1508,3157,1697],{"class":1521},[1508,3159,1535],{"class":1521},[1508,3161,1632],{"class":1538},[1508,3163,1542],{"class":1521},[1508,3165,2382],{"class":1521},[1508,3167,3168,3170,3172,3174,3176,3179,3182,3185],{"class":1510,"line":1756},[1508,3169,1732],{"class":1718},[1508,3171,1697],{"class":1521},[1508,3173,3023],{"class":1525},[1508,3175,1671],{"class":1521},[1508,3177,3178],{"class":1525},"altText ",[1508,3180,3181],{"class":1521},"??",[1508,3183,3184],{"class":1521}," ''",[1508,3186,2382],{"class":1521},[1508,3188,3189,3191,3193,3195,3197,3200,3203,3205,3207,3209,3211,3213,3215,3217,3220,3222],{"class":1510,"line":1988},[1508,3190,1746],{"class":1718},[1508,3192,1697],{"class":1521},[1508,3194,3023],{"class":1525},[1508,3196,1671],{"class":1521},[1508,3198,3199],{"class":1525},"thumbhash ",[1508,3201,3202],{"class":1521},"?",[1508,3204,1996],{"class":1525},[1508,3206,1542],{"class":1521},[1508,3208,2277],{"class":1538},[1508,3210,1542],{"class":1521},[1508,3212,2002],{"class":1521},[1508,3214,3023],{"class":1525},[1508,3216,1671],{"class":1521},[1508,3218,3219],{"class":1525},"thumbhash] ",[1508,3221,1697],{"class":1521},[1508,3223,3224],{"class":1521}," undefined,\n",[1508,3226,3227,3229,3231],{"class":1510,"line":2015},[1508,3228,1710],{"class":1718},[1508,3230,1697],{"class":1521},[1508,3232,2406],{"class":1525},[1508,3234,3235],{"class":1510,"line":2217},[1508,3236,3237],{"class":1521},"    {\n",[1508,3239,3241,3244,3246,3248,3250,3252],{"class":1510,"line":3240},10,[1508,3242,3243],{"class":1718},"      provider",[1508,3245,1697],{"class":1521},[1508,3247,1535],{"class":1521},[1508,3249,2421],{"class":1538},[1508,3251,1542],{"class":1521},[1508,3253,2382],{"class":1521},[1508,3255,3257,3260,3262,3264,3266,3268],{"class":1510,"line":3256},11,[1508,3258,3259],{"class":1718},"      src",[1508,3261,1697],{"class":1521},[1508,3263,3023],{"class":1525},[1508,3265,1671],{"class":1521},[1508,3267,2970],{"class":1525},[1508,3269,2382],{"class":1521},[1508,3271,3273,3276,3278,3280,3282,3284],{"class":1510,"line":3272},12,[1508,3274,3275],{"class":1718},"      width",[1508,3277,1697],{"class":1521},[1508,3279,3023],{"class":1525},[1508,3281,1671],{"class":1521},[1508,3283,2053],{"class":1525},[1508,3285,2382],{"class":1521},[1508,3287,3289,3292,3294,3296,3298,3300],{"class":1510,"line":3288},13,[1508,3290,3291],{"class":1718},"      height",[1508,3293,1697],{"class":1521},[1508,3295,3023],{"class":1525},[1508,3297,1671],{"class":1521},[1508,3299,2057],{"class":1525},[1508,3301,2382],{"class":1521},[1508,3303,3305],{"class":1510,"line":3304},14,[1508,3306,3307],{"class":1521},"    },\n",[1508,3309,3311,3313],{"class":1510,"line":3310},15,[1508,3312,2538],{"class":1525},[1508,3314,2382],{"class":1521},[1508,3316,3318,3320,3322],{"class":1510,"line":3317},16,[1508,3319,3031],{"class":1521},[1508,3321,3006],{"class":1525},[1508,3323,1545],{"class":1521},[1508,3325,3327],{"class":1510,"line":3326},17,[1508,3328,1552],{"emptyLinePlaceholder":1551},[1508,3330,3332,3334],{"class":1510,"line":3331},18,[1508,3333,2948],{"class":1514},[1508,3335,2367],{"class":1521},[1508,3337,3339,3341,3343,3346,3349,3351,3354],{"class":1510,"line":3338},19,[1508,3340,2955],{"class":1718},[1508,3342,1697],{"class":1521},[1508,3344,3345],{"class":2791}," toMediaImage",[1508,3347,3348],{"class":1525},"(product",[1508,3350,1671],{"class":1521},[1508,3352,3353],{"class":1525},"featuredImage)",[1508,3355,2382],{"class":1521},[1508,3357,3359,3361,3363,3365,3367,3369,3371,3373,3376],{"class":1510,"line":3358},20,[1508,3360,2980],{"class":1718},[1508,3362,1697],{"class":1521},[1508,3364,2960],{"class":1525},[1508,3366,1671],{"class":1521},[1508,3368,2989],{"class":1525},[1508,3370,1671],{"class":1521},[1508,3372,2994],{"class":2791},[1508,3374,3375],{"class":1525},"(toMediaImage)",[1508,3377,2382],{"class":1521},[1508,3379,3381],{"class":1510,"line":3380},21,[1508,3382,2545],{"class":1521},[1480,3384,3385],{},"The connector says \"this is an image, served by Shopify's CDN, with these dimensions and this thumbhash for the LQIP.\" The frontend's nuxt-image setup decides how to resize, format, and lazy-load it. Multi-viewport rendering, placeholder behavior, and preloading all stay where they belong: in the storefront.",[1677,3387,3389,3390],{"id":3388},"picking-the-right-provider","Picking the right ",[1484,3391,1593],{},[1480,3393,3394,3395,3397],{},"The ",[1484,3396,1593],{}," field must match a nuxt-image provider that the storefront has configured (or that your app registers). Common cases:",[1601,3399,3400,3415],{},[1604,3401,3402],{},[1607,3403,3404,3407,3412],{},[1610,3405,3406],{},"If the asset comes from…",[1610,3408,3409,3410],{},"Use ",[1484,3411,1593],{},[1610,3413,3414],{},"Notes",[1620,3416,3417,3429,3441,3458],{},[1607,3418,3419,3422,3426],{},[1625,3420,3421],{},"Shopify Files / Storefront API",[1625,3423,3424],{},[1484,3425,2025],{},[1625,3427,3428],{},"Built into the Shopify app; supports CDN resizing parameters",[1607,3430,3431,3434,3438],{},[1625,3432,3433],{},"Cloudinary",[1625,3435,3436],{},[1484,3437,2029],{},[1625,3439,3440],{},"Configure with your Cloudinary cloud name",[1607,3442,3443,3446,3449],{},[1625,3444,3445],{},"A DAM with a custom URL scheme",[1625,3447,3448],{},"a custom name you register",[1625,3450,3451,3452,3457],{},"Register a ",[1492,3453,3456],{"href":3454,"rel":3455},"https://image.nuxt.com/advanced/custom-provider",[2046],"nuxt-image provider"," in your app",[1607,3459,3460,3463,3467],{},[1625,3461,3462],{},"A plain CDN URL with no resize API",[1625,3464,3465],{},[1484,3466,2040],{},[1625,3468,3469],{},"nuxt-image built-in pass-through; skips optimization but works",[1480,3471,3472,3473,3475],{},"Picking ",[1484,3474,2040],{}," everywhere \"to keep things simple\" gives up the bandwidth savings and format conversion that nuxt-image is there to do. Spend the time wiring up the right provider; it pays back on every page load.",[1677,3477,3479],{"id":3478},"returning-responsive-sources","Returning responsive sources",[1480,3481,3482,3483,3485],{},"If your backend stores separate mobile and desktop assets (Hygraph and many DAMs let editors crop per breakpoint), return them both with the ",[1484,3484,2077],{}," field set:",[1499,3487,3489],{"className":1501,"code":3488,"language":1503,"meta":1504,"style":1504},"{\n  type: 'image',\n  alt: hero.alt,\n  sources: [\n    { provider: 'hygraph', src: hero.mobile.url, width: hero.mobile.width, height: hero.mobile.height, responsive: 'mobile' },\n    { provider: 'hygraph', src: hero.desktop.url, width: hero.desktop.width, height: hero.desktop.height, responsive: 'desktop' },\n  ],\n}\n",[1484,3490,3491,3495,3509,3524,3532,3609,3685,3691],{"__ignoreMap":1504},[1508,3492,3493],{"class":1510,"line":1511},[1508,3494,1689],{"class":1521},[1508,3496,3497,3499,3501,3503,3505,3507],{"class":1510,"line":1548},[1508,3498,1694],{"class":1561},[1508,3500,1697],{"class":1521},[1508,3502,1535],{"class":1521},[1508,3504,1632],{"class":1538},[1508,3506,1542],{"class":1521},[1508,3508,2382],{"class":1521},[1508,3510,3511,3513,3515,3518,3520,3522],{"class":1510,"line":1555},[1508,3512,1732],{"class":1561},[1508,3514,1697],{"class":1521},[1508,3516,3517],{"class":1525}," hero",[1508,3519,1671],{"class":1521},[1508,3521,1771],{"class":1525},[1508,3523,2382],{"class":1521},[1508,3525,3526,3528,3530],{"class":1510,"line":1729},[1508,3527,1710],{"class":1561},[1508,3529,1697],{"class":1521},[1508,3531,2406],{"class":1718},[1508,3533,3534,3536,3538,3540,3542,3545,3547,3549,3551,3553,3555,3557,3559,3561,3563,3565,3567,3569,3571,3573,3575,3577,3579,3581,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607],{"class":1510,"line":1743},[1508,3535,2411],{"class":1521},[1508,3537,2414],{"class":1718},[1508,3539,1697],{"class":1521},[1508,3541,1535],{"class":1521},[1508,3543,3544],{"class":1538},"hygraph",[1508,3546,1542],{"class":1521},[1508,3548,2002],{"class":1521},[1508,3550,2428],{"class":1718},[1508,3552,1697],{"class":1521},[1508,3554,3517],{"class":1525},[1508,3556,1671],{"class":1521},[1508,3558,1972],{"class":1525},[1508,3560,1671],{"class":1521},[1508,3562,2970],{"class":1525},[1508,3564,2002],{"class":1521},[1508,3566,2442],{"class":1718},[1508,3568,1697],{"class":1521},[1508,3570,3517],{"class":1525},[1508,3572,1671],{"class":1521},[1508,3574,1972],{"class":1525},[1508,3576,1671],{"class":1521},[1508,3578,2053],{"class":1525},[1508,3580,2002],{"class":1521},[1508,3582,2453],{"class":1718},[1508,3584,1697],{"class":1521},[1508,3586,3517],{"class":1525},[1508,3588,1671],{"class":1521},[1508,3590,1972],{"class":1525},[1508,3592,1671],{"class":1521},[1508,3594,2057],{"class":1525},[1508,3596,2002],{"class":1521},[1508,3598,2463],{"class":1718},[1508,3600,1697],{"class":1521},[1508,3602,1535],{"class":1521},[1508,3604,1972],{"class":1538},[1508,3606,1542],{"class":1521},[1508,3608,2474],{"class":1521},[1508,3610,3611,3613,3615,3617,3619,3621,3623,3625,3627,3629,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673,3675,3677,3679,3681,3683],{"class":1510,"line":1756},[1508,3612,2411],{"class":1521},[1508,3614,2414],{"class":1718},[1508,3616,1697],{"class":1521},[1508,3618,1535],{"class":1521},[1508,3620,3544],{"class":1538},[1508,3622,1542],{"class":1521},[1508,3624,2002],{"class":1521},[1508,3626,2428],{"class":1718},[1508,3628,1697],{"class":1521},[1508,3630,3517],{"class":1525},[1508,3632,1671],{"class":1521},[1508,3634,1981],{"class":1525},[1508,3636,1671],{"class":1521},[1508,3638,2970],{"class":1525},[1508,3640,2002],{"class":1521},[1508,3642,2442],{"class":1718},[1508,3644,1697],{"class":1521},[1508,3646,3517],{"class":1525},[1508,3648,1671],{"class":1521},[1508,3650,1981],{"class":1525},[1508,3652,1671],{"class":1521},[1508,3654,2053],{"class":1525},[1508,3656,2002],{"class":1521},[1508,3658,2453],{"class":1718},[1508,3660,1697],{"class":1521},[1508,3662,3517],{"class":1525},[1508,3664,1671],{"class":1521},[1508,3666,1981],{"class":1525},[1508,3668,1671],{"class":1521},[1508,3670,2057],{"class":1525},[1508,3672,2002],{"class":1521},[1508,3674,2463],{"class":1718},[1508,3676,1697],{"class":1521},[1508,3678,1535],{"class":1521},[1508,3680,1981],{"class":1538},[1508,3682,1542],{"class":1521},[1508,3684,2474],{"class":1521},[1508,3686,3687,3689],{"class":1510,"line":1988},[1508,3688,2538],{"class":1718},[1508,3690,2382],{"class":1521},[1508,3692,3693],{"class":1510,"line":2015},[1508,3694,1759],{"class":1521},[1480,3696,3697,3698,3701,3702,3704],{},"If your backend only stores one asset, return one source with ",[1484,3699,3700],{},"responsive: 'static'"," (or omit ",[1484,3703,2077],{},"). The renderer handles both cases.",[1596,3706,3708],{"id":3707},"related","Related",[2316,3710,3711,3722,3731,3744],{},[2319,3712,3713,3718,3719,3721],{},[1492,3714,3715,3717],{"href":936},[1484,3716,1496],{}," component",": the UI Kit component that renders ",[1484,3720,377],{}," values.",[2319,3723,3724,3727,3728,3730],{},[1492,3725,3726],{"href":173},"Media Library",": how editors pick ",[1484,3729,377],{}," values from connected backends in Cockpit, and how to add a media library provider for your asset system.",[2319,3732,3733,3740,3741,3743],{},[1492,3734,3736,3739],{"href":3735},"/apps/app-development/schema-fields#media",[1484,3737,3738],{},"media"," schema field",": the editor-facing media picker that produces a ",[1484,3742,377],{}," value.",[2319,3745,3746,3751],{},[1492,3747,3750],{"href":3748,"rel":3749},"https://image.nuxt.com/",[2046],"nuxt-image documentation",": provider configuration, sizes syntax, and image optimization concepts.",[3753,3754,3755],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":1504,"searchDepth":1548,"depth":1548,"links":3757},[3758,3759,3763,3768,3769,3770,3771,3778],{"id":1598,"depth":1548,"text":1599},{"id":1674,"depth":1548,"text":1675,"children":3760},[3761,3762],{"id":1679,"depth":1555,"text":1666},{"id":1791,"depth":1555,"text":1792},{"id":1765,"depth":1548,"text":1878,"children":3764},[3765,3766,3767],{"id":1890,"depth":1555,"text":1891},{"id":2099,"depth":1555,"text":2100},{"id":2237,"depth":1555,"text":2238},{"id":2306,"depth":1548,"text":2082},{"id":2562,"depth":1548,"text":1788},{"id":2713,"depth":1548,"text":2714},{"id":2910,"depth":1548,"text":2911,"children":3772},[3773,3774,3775,3777],{"id":2932,"depth":1555,"text":2933},{"id":3086,"depth":1555,"text":3087},{"id":3388,"depth":1555,"text":3776},"Picking the right provider",{"id":3478,"depth":1555,"text":3479},{"id":3707,"depth":1548,"text":3708},"The discriminated union returned anywhere a connector or component schema yields an image or video. Two variants, source-driven rendering through the Media component.",{},{"title":3782,"description":3779},"Media | Laioutr",{"loc":378,"lastmod":3784,"changefreq":3785,"priority":3786},"2026-05-05","monthly",0.9,"k00ZHKkyPrmuqL9Rc5tLY0EMiiUVgCr2lqEJmV5UwYE",[3789,3791],{"title":373,"path":374,"stem":375,"description":3790,"children":-1},"The discriminated union returned anywhere a connector or component schema yields a navigable target. Five variants, one resolver.",{"title":381,"path":382,"stem":383,"description":3792,"children":-1},"The flat record returned anywhere a connector or component schema yields a price. Two fields, locale-aware rendering through the $money formatter.",1778245946840]