[{"data":1,"prerenderedAt":1887},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-file-field":393,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-file-field-surround":1882},[4,14,36,69,144,376],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,120,124,128,132,136,140],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,107],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99,103],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106},"Explicit Allow Only","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fexplicit-allow-only","4.api\u002F2.components\u002F2.annotations\u002F4.explicit-allow-only",{"title":108,"path":109,"stem":110,"children":111,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[112,116],{"title":113,"path":114,"stem":115},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":117,"path":118,"stem":119},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":121,"path":122,"stem":123},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":125,"path":126,"stem":127},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":129,"path":130,"stem":131},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":133,"path":134,"stem":135},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":137,"path":138,"stem":139},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":141,"path":142,"stem":143},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":145,"path":146,"stem":147,"children":148,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[149,153,157,170,190,211,244,328,352,356],{"title":150,"path":151,"stem":152},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":154,"path":155,"stem":156},"PWA & Offline","\u002Fnuxt-module\u002Fpwa","5.nuxt-module\u002F10.pwa",{"title":158,"path":159,"stem":160,"children":161,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[162,166],{"title":163,"path":164,"stem":165},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":167,"path":168,"stem":169},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":171,"path":172,"stem":173,"children":174,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[175,179,183,186],{"title":176,"path":177,"stem":178},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":180,"path":181,"stem":182},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":184,"stem":185},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":187,"path":188,"stem":189},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":191,"path":192,"stem":193,"children":194,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[195,199,203,207],{"title":196,"path":197,"stem":198},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":200,"path":201,"stem":202},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":204,"path":205,"stem":206},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":208,"path":209,"stem":210},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Cwa Api","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",[216,220,224,228,232,236,240],{"title":217,"path":218,"stem":219},"Overview","\u002Fnuxt-module\u002Fcwa-api\u002Foverview","5.nuxt-module\u002F5.cwa-api\u002F1.overview",{"title":221,"path":222,"stem":223},"Resources","\u002Fnuxt-module\u002Fcwa-api\u002Fresources","5.nuxt-module\u002F5.cwa-api\u002F2.resources",{"title":225,"path":226,"stem":227},"Resources Manager","\u002Fnuxt-module\u002Fcwa-api\u002Fresources-manager","5.nuxt-module\u002F5.cwa-api\u002F3.resources-manager",{"title":229,"path":230,"stem":231},"Auth","\u002Fnuxt-module\u002Fcwa-api\u002Fauth","5.nuxt-module\u002F5.cwa-api\u002F4.auth",{"title":233,"path":234,"stem":235},"Forms","\u002Fnuxt-module\u002Fcwa-api\u002Fforms","5.nuxt-module\u002F5.cwa-api\u002F5.forms",{"title":237,"path":238,"stem":239},"Admin","\u002Fnuxt-module\u002Fcwa-api\u002Fadmin","5.nuxt-module\u002F5.cwa-api\u002F6.admin",{"title":241,"path":242,"stem":243},"Site Config","\u002Fnuxt-module\u002Fcwa-api\u002Fsite-config","5.nuxt-module\u002F5.cwa-api\u002F7.site-config",{"title":245,"path":246,"stem":247,"children":248,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[249,257,294,311],{"title":250,"path":251,"stem":252,"children":253,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[254],{"title":250,"path":255,"stem":256},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":258,"path":259,"stem":260,"children":261,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[262,266,270,274,278,282,286,290],{"title":263,"path":264,"stem":265},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":267,"path":268,"stem":269},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":271,"path":272,"stem":273},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":275,"path":276,"stem":277},"File Field","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-file-field","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-file-field",{"title":279,"path":280,"stem":281},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":283,"path":284,"stem":285},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":287,"path":288,"stem":289},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":291,"path":292,"stem":293},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":295,"path":296,"stem":297,"children":298,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[299,303,307],{"title":300,"path":301,"stem":302},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":304,"path":305,"stem":306},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":308,"path":309,"stem":310},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":312,"path":313,"stem":314,"children":315,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[316,320,324],{"title":317,"path":318,"stem":319},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":321,"path":322,"stem":323},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":325,"path":326,"stem":327},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":329,"path":330,"stem":331,"children":332,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[333,337,341,345,349],{"title":334,"path":335,"stem":336},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":338,"path":339,"stem":340},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":342,"path":343,"stem":344},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":346,"path":347,"stem":348},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":233,"path":350,"stem":351},"\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":353,"path":354,"stem":355},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":357,"path":358,"stem":359,"children":360,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[361,364,368,372],{"title":217,"path":362,"stem":363},"\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":365,"path":366,"stem":367},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":369,"path":370,"stem":371},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":373,"path":374,"stem":375},"Styling","\u002Fnuxt-module\u002Fcwa-layer\u002Fstyling","5.nuxt-module\u002F9.cwa-layer\u002F4.styling",{"title":377,"path":378,"stem":379,"children":380,"page":35},"Deployment","\u002Fdeployment","6.deployment",[381,385,389],{"title":382,"path":383,"stem":384},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":386,"path":387,"stem":388},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":390,"path":391,"stem":392},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":394,"title":395,"badge":396,"body":399,"description":1875,"extension":1876,"links":1877,"meta":1878,"navigation":1879,"path":276,"seo":1880,"stem":277,"__hash__":1881},"docs\u002F5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-file-field.md","useCwaFileField",{"label":397,"color":398},"Draft","amber",{"type":400,"value":401,"toc":1865},"minimark",[402,413,428,448,688,693,786,860,867,892,919,922,955,967,1130,1139,1143,1251,1255,1674,1710,1716,1736,1744,1755,1759,1764,1839,1845,1861],[403,404,405,408,409,412],"p",{},[406,407,395],"code",{}," resolves one uploadable file field on a component backed by a PHP entity with ",[406,410,411],{},"#[Silverback\\Uploadable]",". It returns the display media, its content URL, and load state for that field. Because you name the field at the call site, one component can wire several file fields without them colliding.",[403,414,415,416,423,424,427],{},"It's the standalone form of the ",[417,418,420],"a",{"href":419},"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component#withfile-fileops",[406,421,422],{},"withFile()"," plugin — the same resolver under the hood, called directly instead of through ",[406,425,426],{},"useCwaComponent","'s plugin array.",[429,430,432],"callout",{"icon":431},"i-heroicons-arrow-path",[403,433,434,435,438,439,443,444,447],{},"Renamed from ",[406,436,437],{},"useCwaImageResource"," (removed). The file APIs handle ",[440,441,442],"strong",{},"any"," uploadable file, not just images — ",[406,445,446],{},"imagineFilterName"," is an image-specific convenience.",[449,450,455],"pre",{"className":451,"code":452,"language":453,"meta":454,"style":454},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","import { useTemplateRef } from 'vue'\nimport { useCwaFileField } from '#imports'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\n\nconst imageRef = useTemplateRef\u003Cunknown>('file')\nconst { contentUrl, displayMedia, handleLoad, loaded } = useCwaFileField(props, {\n  imagineFilterName: 'thumbnail',\n  imageRef\n})\n","ts","",[406,456,457,491,512,536,543,575,580,614,654,674,680],{"__ignoreMap":454},[458,459,462,466,470,474,477,480,484,488],"span",{"class":460,"line":461},"line",1,[458,463,465],{"class":464},"sm4w6","import",[458,467,469],{"class":468},"sOvfz"," {",[458,471,473],{"class":472},"sPB8G"," useTemplateRef",[458,475,476],{"class":468}," }",[458,478,479],{"class":464}," from",[458,481,483],{"class":482},"seSrl"," '",[458,485,487],{"class":486},"sLL54","vue",[458,489,490],{"class":482},"'\n",[458,492,494,496,498,501,503,505,507,510],{"class":460,"line":493},2,[458,495,465],{"class":464},[458,497,469],{"class":468},[458,499,500],{"class":472}," useCwaFileField",[458,502,476],{"class":468},[458,504,479],{"class":464},[458,506,483],{"class":482},[458,508,509],{"class":486},"#imports",[458,511,490],{"class":482},[458,513,515,517,520,522,525,527,529,531,534],{"class":460,"line":514},3,[458,516,465],{"class":464},[458,518,519],{"class":464}," type",[458,521,469],{"class":468},[458,523,524],{"class":472}," IriProp",[458,526,476],{"class":468},[458,528,479],{"class":464},[458,530,483],{"class":482},[458,532,533],{"class":486},"#cwa\u002Fcomposables\u002Fcwa-resource",[458,535,490],{"class":482},[458,537,539],{"class":460,"line":538},4,[458,540,542],{"emptyLinePlaceholder":541},true,"\n",[458,544,546,550,554,558,562,565,569,572],{"class":460,"line":545},5,[458,547,549],{"class":548},"swB56","const",[458,551,553],{"class":552},"sc2zw"," props",[458,555,557],{"class":556},"sVlFx"," =",[458,559,561],{"class":560},"sKpYG"," defineProps",[458,563,564],{"class":468},"\u003C",[458,566,568],{"class":567},"sRCss","IriProp",[458,570,571],{"class":468},">",[458,573,574],{"class":472},"()\n",[458,576,578],{"class":460,"line":577},6,[458,579,542],{"emptyLinePlaceholder":541},[458,581,583,585,588,590,592,594,598,600,603,606,609,611],{"class":460,"line":582},7,[458,584,549],{"class":548},[458,586,587],{"class":552}," imageRef",[458,589,557],{"class":556},[458,591,473],{"class":560},[458,593,564],{"class":468},[458,595,597],{"class":596},"sbW4m","unknown",[458,599,571],{"class":468},[458,601,602],{"class":472},"(",[458,604,605],{"class":482},"'",[458,607,608],{"class":486},"file",[458,610,605],{"class":482},[458,612,613],{"class":472},")\n",[458,615,617,619,621,624,627,630,632,635,637,640,642,644,646,649,651],{"class":460,"line":616},8,[458,618,549],{"class":548},[458,620,469],{"class":468},[458,622,623],{"class":552}," contentUrl",[458,625,626],{"class":468},",",[458,628,629],{"class":552}," displayMedia",[458,631,626],{"class":468},[458,633,634],{"class":552}," handleLoad",[458,636,626],{"class":468},[458,638,639],{"class":552}," loaded",[458,641,476],{"class":468},[458,643,557],{"class":556},[458,645,500],{"class":560},[458,647,648],{"class":472},"(props",[458,650,626],{"class":468},[458,652,653],{"class":468}," {\n",[458,655,657,661,664,666,669,671],{"class":460,"line":656},9,[458,658,660],{"class":659},"sDHlG","  imagineFilterName",[458,662,663],{"class":468},":",[458,665,483],{"class":482},[458,667,668],{"class":486},"thumbnail",[458,670,605],{"class":482},[458,672,673],{"class":468},",\n",[458,675,677],{"class":460,"line":676},10,[458,678,679],{"class":472},"  imageRef\n",[458,681,683,686],{"class":460,"line":682},11,[458,684,685],{"class":468},"}",[458,687,613],{"class":472},[689,690,692],"h2",{"id":691},"signature","Signature",[449,694,696],{"className":451,"code":695,"language":453,"meta":454,"style":454},"useCwaFileField(\n  props: IriProp,                          \u002F\u002F your component's props (with `iri`)\n  fileOps?: {\n    fileProp?: string                      \u002F\u002F the PHP #[UploadableField] property (default: 'file')\n    imagineFilterName?: string             \u002F\u002F Imagine filter variant to surface as displayMedia\n    imageRef?: Readonly\u003CShallowRef\u003Cunknown>>  \u002F\u002F opt in to cached-image load detection\n  }\n)\n",[406,697,698,705,716,726,739,752,777,782],{"__ignoreMap":454},[458,699,700,702],{"class":460,"line":461},[458,701,395],{"class":560},[458,703,704],{"class":472},"(\n",[458,706,707,710,712],{"class":460,"line":493},[458,708,709],{"class":472},"  props: IriProp",[458,711,626],{"class":468},[458,713,715],{"class":714},"sTBSN","                          \u002F\u002F your component's props (with `iri`)\n",[458,717,718,721,724],{"class":460,"line":514},[458,719,720],{"class":472},"  fileOps",[458,722,723],{"class":556},"?:",[458,725,653],{"class":468},[458,727,728,731,733,736],{"class":460,"line":538},[458,729,730],{"class":472},"    fileProp?",[458,732,663],{"class":468},[458,734,735],{"class":472}," string                      ",[458,737,738],{"class":714},"\u002F\u002F the PHP #[UploadableField] property (default: 'file')\n",[458,740,741,744,746,749],{"class":460,"line":545},[458,742,743],{"class":472},"    imagineFilterName",[458,745,723],{"class":556},[458,747,748],{"class":472}," string             ",[458,750,751],{"class":714},"\u002F\u002F Imagine filter variant to surface as displayMedia\n",[458,753,754,757,759,762,764,767,769,771,774],{"class":460,"line":577},[458,755,756],{"class":472},"    imageRef",[458,758,723],{"class":556},[458,760,761],{"class":472}," Readonly",[458,763,564],{"class":556},[458,765,766],{"class":472},"ShallowRef",[458,768,564],{"class":556},[458,770,597],{"class":472},[458,772,773],{"class":556},">>",[458,775,776],{"class":714},"  \u002F\u002F opt in to cached-image load detection\n",[458,778,779],{"class":460,"line":582},[458,780,781],{"class":468},"  }\n",[458,783,784],{"class":460,"line":616},[458,785,613],{"class":472},[787,788,789,805,821,844],"ul",{},[790,791,792,793,796,797,800,801,804],"li",{},"Pass ",[406,794,795],{},"props"," directly — no need to ",[406,798,799],{},"toRef"," the ",[406,802,803],{},"iri","; the composable resolves the resource itself.",[790,806,807,812,813,816,817,820],{},[440,808,809],{},[406,810,811],{},"fileProp"," — which uploadable field to read, i.e. which key of ",[406,814,815],{},"_metadata.mediaObjects"," to resolve. Defaults to ",[406,818,819],{},"'file'",".",[790,822,823,827,828,831,832,835,836,839,840,843],{},[440,824,825],{},[406,826,446],{}," — the LiipImagineBundle filter to surface as ",[406,829,830],{},"displayMedia","\u002F",[406,833,834],{},"contentUrl"," (e.g. ",[406,837,838],{},"'thumbnail'",", ",[406,841,842],{},"'hero'","). Omit for the original uploaded file.",[790,845,846,851,852,855,856,859],{},[440,847,848],{},[406,849,850],{},"imageRef"," — a template ref pointing at the ",[406,853,854],{},"\u003Cimg>"," that renders this file. Optional, and ",[440,857,858],{},"never registered for you",". See below.",[689,861,863,864,866],{"id":862},"why-imageref-exists","Why ",[406,865,850],{}," exists",[403,868,869,870,872,873,880,881,883,884,887,888,891],{},"An ",[406,871,854],{}," served ",[440,874,875,876,879],{},"from cache can finish loading before Vue attaches the ",[406,877,878],{},"@load"," listener",". When that happens ",[406,882,878],{}," never fires, ",[406,885,886],{},"loaded"," stays ",[406,889,890],{},"false"," forever, and any placeholder gated on it is stuck over a fully-loaded image.",[403,893,894,896,897,900,901,904,905,908,909,912,913,915,916,918],{},[406,895,850],{}," exists solely to close that gap: on mount, the composable reads the element's own load state (",[406,898,899],{},"complete"," \u002F ",[406,902,903],{},"naturalHeight",") and calls ",[406,906,907],{},"handleLoad()"," itself if the image is already there. That is its ",[440,910,911],{},"only"," job — ",[406,914,834],{}," and ",[406,917,830],{}," come from resource data and never touch it.",[403,920,921],{},"So the rule is simple:",[787,923,924,935],{},[790,925,926,932,933,820],{},[440,927,928,929,931],{},"Rendering an ",[406,930,854],{}," and want the cached case handled?"," Pass ",[406,934,850],{},[790,936,937,940,941,944,945,947,948,950,951,954],{},[440,938,939],{},"Anything else"," — a PDF, a zip, any non-image field — ",[440,942,943],{},"omit it."," Only an ",[406,946,854],{}," can report its own load state, so ",[406,949,878],{}," is the sole source of truth. A ref that can't report it (a ",[406,952,953],{},"\u003Cdiv>",", an unmatched ref name) is ignored at runtime.",[403,956,957,958,960,961,964,965,820],{},"Both a bare ",[406,959,854],{}," and a component wrapping one (",[406,962,963],{},"\u003CNuxtImg>",") work — a component ref resolves to the instance and is unwrapped to its root ",[406,966,854],{},[429,968,971,994,1113],{"icon":969,"color":970},"i-heroicons-exclamation-triangle","warning",[403,972,973,976,977,979,980,982,983,986,987,990,991,993],{},[440,974,975],{},"Breaking change."," ",[406,978,850],{}," used to be registered implicitly from ",[406,981,811],{}," via ",[406,984,985],{},"useTemplateRef(fileProp)",". It no longer is — ",[440,988,989],{},"if you relied on load detection, you must now pass the ref yourself",", or ",[406,992,886],{}," will never flip for a cached image and your placeholder will never fade.",[449,995,997],{"className":451,"code":996,"language":453,"meta":454,"style":454},"\u002F\u002F before — ref auto-registered from fileProp\nconst { loaded } = useCwaFileField(props, { imagineFilterName: 'thumbnail' })\n\n\u002F\u002F after — register it yourself\nconst imageRef = useTemplateRef\u003Cunknown>('file')\nconst { loaded } = useCwaFileField(props, { imagineFilterName: 'thumbnail', imageRef })\n",[406,998,999,1004,1039,1043,1048,1074],{"__ignoreMap":454},[458,1000,1001],{"class":460,"line":461},[458,1002,1003],{"class":714},"\u002F\u002F before — ref auto-registered from fileProp\n",[458,1005,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1027,1029,1031,1033,1035,1037],{"class":460,"line":493},[458,1007,549],{"class":548},[458,1009,469],{"class":468},[458,1011,639],{"class":552},[458,1013,476],{"class":468},[458,1015,557],{"class":556},[458,1017,500],{"class":560},[458,1019,648],{"class":472},[458,1021,626],{"class":468},[458,1023,469],{"class":468},[458,1025,1026],{"class":659}," imagineFilterName",[458,1028,663],{"class":468},[458,1030,483],{"class":482},[458,1032,668],{"class":486},[458,1034,605],{"class":482},[458,1036,476],{"class":468},[458,1038,613],{"class":472},[458,1040,1041],{"class":460,"line":514},[458,1042,542],{"emptyLinePlaceholder":541},[458,1044,1045],{"class":460,"line":538},[458,1046,1047],{"class":714},"\u002F\u002F after — register it yourself\n",[458,1049,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072],{"class":460,"line":545},[458,1051,549],{"class":548},[458,1053,587],{"class":552},[458,1055,557],{"class":556},[458,1057,473],{"class":560},[458,1059,564],{"class":468},[458,1061,597],{"class":596},[458,1063,571],{"class":468},[458,1065,602],{"class":472},[458,1067,605],{"class":482},[458,1069,608],{"class":486},[458,1071,605],{"class":482},[458,1073,613],{"class":472},[458,1075,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1109,1111],{"class":460,"line":577},[458,1077,549],{"class":548},[458,1079,469],{"class":468},[458,1081,639],{"class":552},[458,1083,476],{"class":468},[458,1085,557],{"class":556},[458,1087,500],{"class":560},[458,1089,648],{"class":472},[458,1091,626],{"class":468},[458,1093,469],{"class":468},[458,1095,1026],{"class":659},[458,1097,663],{"class":468},[458,1099,483],{"class":482},[458,1101,668],{"class":486},[458,1103,605],{"class":482},[458,1105,626],{"class":468},[458,1107,1108],{"class":472}," imageRef ",[458,1110,685],{"class":468},[458,1112,613],{"class":472},[403,1114,1115,1116,1118,1119,1122,1123,1126,1127,1129],{},"The implicit ref was removed because two calls in one component both defaulted to the key ",[406,1117,819],{}," and collided — ",[406,1120,1121],{},"TypeError: Cannot redefine property: file",", thrown ",[440,1124,1125],{},"only in production builds"," (dev merely warned). It also only ever worked if you happened to name your template ref exactly the ",[406,1128,811],{},", and did nothing at all otherwise.",[403,1131,1132,1134,1135,1138],{},[406,1133,811],{}," no longer has any relationship to a template ref name — name the ref whatever you like. ",[406,1136,1137],{},"ref=\"file\""," is convention, not a requirement.",[689,1140,1142],{"id":1141},"return-values","Return values",[1144,1145,1146,1162],"table",{},[1147,1148,1149],"thead",{},[1150,1151,1152,1156,1159],"tr",{},[1153,1154,1155],"th",{},"Return",[1153,1157,1158],{},"Type",[1153,1160,1161],{},"Purpose",[1163,1164,1165,1180,1210,1231],"tbody",{},[1150,1166,1167,1172,1177],{},[1168,1169,1170],"td",{},[406,1171,834],{},[1168,1173,1174],{},[406,1175,1176],{},"ComputedRef\u003Cstring | undefined>",[1168,1178,1179],{},"URL of the (optionally filtered) file",[1150,1181,1182,1186,1191],{},[1168,1183,1184],{},[406,1185,830],{},[1168,1187,1188],{},[406,1189,1190],{},"ComputedRef\u003CMediaFile | undefined>",[1168,1192,1193,1194,839,1196,839,1199,839,1202,1205,1206,1209],{},"The media object to display — has ",[406,1195,834],{},[406,1197,1198],{},"mimeType",[406,1200,1201],{},"width",[406,1203,1204],{},"height","; ",[406,1207,1208],{},"undefined"," until available",[1150,1211,1212,1217,1222],{},[1168,1213,1214],{},[406,1215,1216],{},"handleLoad",[1168,1218,1219],{},[406,1220,1221],{},"() => void",[1168,1223,1224,1225,1227,1228,1230],{},"Call on the ",[406,1226,854],{},"'s ",[406,1229,878],{}," event",[1150,1232,1233,1237,1242],{},[1168,1234,1235],{},[406,1236,886],{},[1168,1238,1239],{},[406,1240,1241],{},"Ref\u003Cboolean>",[1168,1243,1244,1247,1248,1250],{},[406,1245,1246],{},"true"," once ",[406,1249,907],{}," fires",[689,1252,1254],{"id":1253},"example","Example",[449,1256,1259],{"className":1257,"code":1258,"language":487,"meta":454,"style":454},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"relative\">\n    \u003CNuxtImg\n      v-show=\"loaded\"\n      ref=\"file\"\n      :src=\"contentUrl\"\n      :width=\"displayMedia?.width\"\n      :height=\"displayMedia?.height\"\n      class=\"w-full object-cover\"\n      @load=\"handleLoad\"\n    \u002F>\n    \u003Cdiv v-if=\"!loaded\" class=\"skeleton h-48 w-full bg-gray-200 animate-pulse\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue'\nimport { useCwaFileField } from '#imports'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\n\nconst imageRef = useTemplateRef\u003Cunknown>('file')\nconst { contentUrl, displayMedia, handleLoad, loaded } = useCwaFileField(props, {\n  imagineFilterName: 'thumbnail',\n  imageRef\n})\n\u003C\u002Fscript>\n",[406,1260,1261,1272,1297,1305,1319,1332,1345,1359,1373,1387,1400,1405,1441,1451,1461,1466,1490,1509,1528,1549,1554,1573,1578,1605,1638,1653,1658,1665],{"__ignoreMap":454},[458,1262,1263,1265,1269],{"class":460,"line":461},[458,1264,564],{"class":468},[458,1266,1268],{"class":1267},"s-h7I","template",[458,1270,1271],{"class":468},">\n",[458,1273,1274,1277,1280,1284,1287,1290,1293,1295],{"class":460,"line":493},[458,1275,1276],{"class":468},"  \u003C",[458,1278,1279],{"class":1267},"div",[458,1281,1283],{"class":1282},"sGtlX"," class",[458,1285,1286],{"class":468},"=",[458,1288,1289],{"class":482},"\"",[458,1291,1292],{"class":486},"relative",[458,1294,1289],{"class":482},[458,1296,1271],{"class":468},[458,1298,1299,1302],{"class":460,"line":514},[458,1300,1301],{"class":468},"    \u003C",[458,1303,1304],{"class":1267},"NuxtImg\n",[458,1306,1307,1310,1312,1314,1316],{"class":460,"line":538},[458,1308,1309],{"class":1282},"      v-show",[458,1311,1286],{"class":468},[458,1313,1289],{"class":482},[458,1315,886],{"class":486},[458,1317,1318],{"class":482},"\"\n",[458,1320,1321,1324,1326,1328,1330],{"class":460,"line":545},[458,1322,1323],{"class":1282},"      ref",[458,1325,1286],{"class":468},[458,1327,1289],{"class":482},[458,1329,608],{"class":486},[458,1331,1318],{"class":482},[458,1333,1334,1337,1339,1341,1343],{"class":460,"line":577},[458,1335,1336],{"class":1282},"      :src",[458,1338,1286],{"class":468},[458,1340,1289],{"class":482},[458,1342,834],{"class":486},[458,1344,1318],{"class":482},[458,1346,1347,1350,1352,1354,1357],{"class":460,"line":582},[458,1348,1349],{"class":1282},"      :width",[458,1351,1286],{"class":468},[458,1353,1289],{"class":482},[458,1355,1356],{"class":486},"displayMedia?.width",[458,1358,1318],{"class":482},[458,1360,1361,1364,1366,1368,1371],{"class":460,"line":616},[458,1362,1363],{"class":1282},"      :height",[458,1365,1286],{"class":468},[458,1367,1289],{"class":482},[458,1369,1370],{"class":486},"displayMedia?.height",[458,1372,1318],{"class":482},[458,1374,1375,1378,1380,1382,1385],{"class":460,"line":656},[458,1376,1377],{"class":1282},"      class",[458,1379,1286],{"class":468},[458,1381,1289],{"class":482},[458,1383,1384],{"class":486},"w-full object-cover",[458,1386,1318],{"class":482},[458,1388,1389,1392,1394,1396,1398],{"class":460,"line":676},[458,1390,1391],{"class":1282},"      @load",[458,1393,1286],{"class":468},[458,1395,1289],{"class":482},[458,1397,1216],{"class":486},[458,1399,1318],{"class":482},[458,1401,1402],{"class":460,"line":682},[458,1403,1404],{"class":468},"    \u002F>\n",[458,1406,1408,1410,1412,1415,1417,1419,1422,1424,1426,1428,1430,1433,1435,1439],{"class":460,"line":1407},12,[458,1409,1301],{"class":468},[458,1411,1279],{"class":1267},[458,1413,1414],{"class":1282}," v-if",[458,1416,1286],{"class":468},[458,1418,1289],{"class":482},[458,1420,1421],{"class":486},"!loaded",[458,1423,1289],{"class":482},[458,1425,1283],{"class":1282},[458,1427,1286],{"class":468},[458,1429,1289],{"class":482},[458,1431,1432],{"class":486},"skeleton h-48 w-full bg-gray-200 animate-pulse",[458,1434,1289],{"class":482},[458,1436,1438],{"class":1437},"s01iV"," \u002F",[458,1440,1271],{"class":468},[458,1442,1444,1447,1449],{"class":460,"line":1443},13,[458,1445,1446],{"class":468},"  \u003C\u002F",[458,1448,1279],{"class":1267},[458,1450,1271],{"class":468},[458,1452,1454,1457,1459],{"class":460,"line":1453},14,[458,1455,1456],{"class":468},"\u003C\u002F",[458,1458,1268],{"class":1267},[458,1460,1271],{"class":468},[458,1462,1464],{"class":460,"line":1463},15,[458,1465,542],{"emptyLinePlaceholder":541},[458,1467,1469,1471,1474,1477,1480,1482,1484,1486,1488],{"class":460,"line":1468},16,[458,1470,564],{"class":468},[458,1472,1473],{"class":1267},"script",[458,1475,1476],{"class":1282}," setup",[458,1478,1479],{"class":1282}," lang",[458,1481,1286],{"class":468},[458,1483,1289],{"class":482},[458,1485,453],{"class":486},[458,1487,1289],{"class":482},[458,1489,1271],{"class":468},[458,1491,1493,1495,1497,1499,1501,1503,1505,1507],{"class":460,"line":1492},17,[458,1494,465],{"class":464},[458,1496,469],{"class":468},[458,1498,473],{"class":472},[458,1500,476],{"class":468},[458,1502,479],{"class":464},[458,1504,483],{"class":482},[458,1506,487],{"class":486},[458,1508,490],{"class":482},[458,1510,1512,1514,1516,1518,1520,1522,1524,1526],{"class":460,"line":1511},18,[458,1513,465],{"class":464},[458,1515,469],{"class":468},[458,1517,500],{"class":472},[458,1519,476],{"class":468},[458,1521,479],{"class":464},[458,1523,483],{"class":482},[458,1525,509],{"class":486},[458,1527,490],{"class":482},[458,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547],{"class":460,"line":1530},19,[458,1532,465],{"class":464},[458,1534,519],{"class":464},[458,1536,469],{"class":468},[458,1538,524],{"class":472},[458,1540,476],{"class":468},[458,1542,479],{"class":464},[458,1544,483],{"class":482},[458,1546,533],{"class":486},[458,1548,490],{"class":482},[458,1550,1552],{"class":460,"line":1551},20,[458,1553,542],{"emptyLinePlaceholder":541},[458,1555,1557,1559,1561,1563,1565,1567,1569,1571],{"class":460,"line":1556},21,[458,1558,549],{"class":548},[458,1560,553],{"class":552},[458,1562,557],{"class":556},[458,1564,561],{"class":560},[458,1566,564],{"class":468},[458,1568,568],{"class":567},[458,1570,571],{"class":468},[458,1572,574],{"class":472},[458,1574,1576],{"class":460,"line":1575},22,[458,1577,542],{"emptyLinePlaceholder":541},[458,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603],{"class":460,"line":1580},23,[458,1582,549],{"class":548},[458,1584,587],{"class":552},[458,1586,557],{"class":556},[458,1588,473],{"class":560},[458,1590,564],{"class":468},[458,1592,597],{"class":596},[458,1594,571],{"class":468},[458,1596,602],{"class":472},[458,1598,605],{"class":482},[458,1600,608],{"class":486},[458,1602,605],{"class":482},[458,1604,613],{"class":472},[458,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636],{"class":460,"line":1607},24,[458,1609,549],{"class":548},[458,1611,469],{"class":468},[458,1613,623],{"class":552},[458,1615,626],{"class":468},[458,1617,629],{"class":552},[458,1619,626],{"class":468},[458,1621,634],{"class":552},[458,1623,626],{"class":468},[458,1625,639],{"class":552},[458,1627,476],{"class":468},[458,1629,557],{"class":556},[458,1631,500],{"class":560},[458,1633,648],{"class":472},[458,1635,626],{"class":468},[458,1637,653],{"class":468},[458,1639,1641,1643,1645,1647,1649,1651],{"class":460,"line":1640},25,[458,1642,660],{"class":659},[458,1644,663],{"class":468},[458,1646,483],{"class":482},[458,1648,668],{"class":486},[458,1650,605],{"class":482},[458,1652,673],{"class":468},[458,1654,1656],{"class":460,"line":1655},26,[458,1657,679],{"class":472},[458,1659,1661,1663],{"class":460,"line":1660},27,[458,1662,685],{"class":468},[458,1664,613],{"class":472},[458,1666,1668,1670,1672],{"class":460,"line":1667},28,[458,1669,1456],{"class":468},[458,1671,1473],{"class":1267},[458,1673,1271],{"class":468},[429,1675,1676],{"icon":969,"color":970},[403,1677,1678,976,1691,1693,1694,1696,1697,1700,1701,1703,1704,1706,1707,1709],{},[440,1679,1680,1681,1684,1685,1688,1689,820],{},"Use ",[406,1682,1683],{},"v-show",", not ",[406,1686,1687],{},"v-if",", when gating the image on ",[406,1690,886],{},[406,1692,886],{}," is set by that element's own ",[406,1695,878],{},", so ",[406,1698,1699],{},"v-if=\"loaded\""," is a deadlock — the element is never created, so it never loads, so ",[406,1702,886],{}," never becomes ",[406,1705,1246],{},". ",[406,1708,1683],{}," keeps it in the DOM so it can load and fade in.",[689,1711,1713,1714],{"id":1712},"type-the-ref-as-unknown","Type the ref as ",[406,1715,597],{},[403,1717,1718,1719,1722,1723,1726,1727,1731,1732,1735],{},"Declare the ref as ",[406,1720,1721],{},"useTemplateRef\u003Cunknown>('file')",". Without the annotation, ",[406,1724,1725],{},"useTemplateRef"," infers its type ",[1728,1729,1730],"em",{},"from the template"," — and if the template also reads this composable's own result, that inference is circular and ",[406,1733,1734],{},"vue-tsc"," fails:",[449,1737,1742],{"className":1738,"code":1740,"language":1741},[1739],"language-text","TS7022: 'imageRef' implicitly has type 'any' because it does not have a type annotation\nand is referenced directly or indirectly in its own initializer.\n","text",[406,1743,1740],{"__ignoreMap":454},[403,1745,1746,1748,1749,1751,1752,820],{},[406,1747,597],{}," is also honest: on a component like ",[406,1750,963],{}," the ref's value is the component instance, not an ",[406,1753,1754],{},"HTMLImageElement",[689,1756,1758],{"id":1757},"multiple-file-fields","Multiple file fields",[403,1760,1761,1762,663],{},"Call it once per field, naming each with ",[406,1763,811],{},[449,1765,1767],{"className":451,"code":1766,"language":453,"meta":454,"style":454},"const hero  = useCwaFileField(props, { fileProp: 'heroImage' })\nconst thumb = useCwaFileField(props, { fileProp: 'thumbnail' })\n\u002F\u002F hero.contentUrl, thumb.contentUrl, …\n",[406,1768,1769,1803,1834],{"__ignoreMap":454},[458,1770,1771,1773,1776,1779,1781,1783,1785,1787,1790,1792,1794,1797,1799,1801],{"class":460,"line":461},[458,1772,549],{"class":548},[458,1774,1775],{"class":552}," hero",[458,1777,1778],{"class":556},"  =",[458,1780,500],{"class":560},[458,1782,648],{"class":472},[458,1784,626],{"class":468},[458,1786,469],{"class":468},[458,1788,1789],{"class":659}," fileProp",[458,1791,663],{"class":468},[458,1793,483],{"class":482},[458,1795,1796],{"class":486},"heroImage",[458,1798,605],{"class":482},[458,1800,476],{"class":468},[458,1802,613],{"class":472},[458,1804,1805,1807,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832],{"class":460,"line":493},[458,1806,549],{"class":548},[458,1808,1809],{"class":552}," thumb",[458,1811,557],{"class":556},[458,1813,500],{"class":560},[458,1815,648],{"class":472},[458,1817,626],{"class":468},[458,1819,469],{"class":468},[458,1821,1789],{"class":659},[458,1823,663],{"class":468},[458,1825,483],{"class":482},[458,1827,668],{"class":486},[458,1829,605],{"class":482},[458,1831,476],{"class":468},[458,1833,613],{"class":472},[458,1835,1836],{"class":460,"line":514},[458,1837,1838],{"class":714},"\u002F\u002F hero.contentUrl, thumb.contentUrl, …\n",[403,1840,1841,1842,1844],{},"Each call needs its own ",[406,1843,850],{}," (pointing at its own template ref) if you want load detection for that field — they're independent.",[403,1846,1847,1848,1850,1851,1854,1855,820],{},"If you're already calling ",[406,1849,426],{},", prefer the plugin form — ",[406,1852,1853],{},"useCwaComponent(props, [withFile({ fileProp: 'heroImage' }), withFile({ fileProp: 'thumbnail' })])"," exposes the same data under a ",[417,1856,1857,1860],{"href":419},[406,1858,1859],{},"files"," map",[1862,1863,1864],"style",{},"html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sbW4m, html code.shiki .sbW4m{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FFCB6B}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}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 .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .s01iV, html code.shiki .s01iV{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}",{"title":454,"searchDepth":493,"depth":493,"links":1866},[1867,1868,1870,1871,1872,1874],{"id":691,"depth":493,"text":692},{"id":862,"depth":493,"text":1869},"Why imageRef exists",{"id":1141,"depth":493,"text":1142},{"id":1253,"depth":493,"text":1254},{"id":1712,"depth":493,"text":1873},"Type the ref as unknown",{"id":1757,"depth":493,"text":1758},"Resolve a single uploadable file field on a resource — content URL, display media, load state, and Imagine filter variants — named at the call site.","md",null,{},{"title":275},{"title":395,"description":1875},"KuysAjMwXlQe_x5mmFeA8OJ-W3_jzWQhcR5QsLRK7Ws",[1883,1885],{"title":271,"path":272,"stem":273,"description":1884,"children":-1},"Composable for Collection-backed components — access paginated items, total pages, and page navigation.",{"title":279,"path":280,"stem":281,"description":1886,"children":-1},"Handle form submission, track in-flight state, and read form-level errors from a CWA Form component resource.",1786531907911]