[{"data":1,"prerenderedAt":2108},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-canvas-components":225,"-nuxt-canvas-components-surround":2103},[4,27,77,123,157,211],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203,207],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":200,"path":201,"stem":202},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":204,"path":205,"stem":206},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":208,"path":209,"stem":210},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[217,221],{"title":218,"path":219,"stem":220},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":222,"path":223,"stem":224},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":226,"title":196,"body":227,"description":2097,"extension":2098,"links":2099,"meta":2100,"navigation":448,"path":197,"seo":2101,"stem":198,"__hash__":2102},"docs\u002F5.nuxt\u002F57.canvas-components.md",{"type":228,"value":229,"toc":2080},"minimark",[230,234,254,275,282,300,305,312,524,532,536,539,544,550,649,720,723,727,730,928,935,1112,1116,1119,1152,1155,1248,1253,1269,1273,1291,1314,1320,1324,1327,1331,1367,1374,1440,1444,1458,1649,1653,2062,2076],[231,232,196],"h1",{"id":233},"component-index",[235,236,237,238,241,242,246,247,253],"p",{},"To make Vue components available in the ",[239,240,70],"a",{"href":71}," editor, the frontend exposes a ",[243,244,245],"strong",{},"component index",": a JSON file listing all available components together with their props, prop schemas, labels, descriptions, categories, formats and schema references. ",[239,248,252],{"href":249,"rel":250},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcanvas_extjs",[251],"nofollow","Canvas External JS Components"," reads this index and uses it to populate the editor UI.",[235,255,256,257,262,263,271,272,274],{},"The ",[239,258,261],{"href":259,"rel":260},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview",[251],"nuxt-component-preview"," Nuxt module generates this index automatically from your components, picking up extra metadata from JSDoc annotations (implemented in ",[239,264,267],{"href":265,"rel":266},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview\u002Ftree\u002F1.x\u002Fsrc\u002Fruntime\u002Fserver\u002Futils",[251],[268,269,270],"code",{},"src\u002Fruntime\u002Fserver\u002Futils\u002F","). The same module also powers the ",[239,273,192],{"href":193}," used by the Canvas editor.",[235,276,277,278,281],{},"The index is served at ",[268,279,280],{},"\u002Fnuxt-component-preview\u002Fcomponent-index.json",".",[235,283,284,285,288,289,292,293,296,297,281],{},"Only ",[243,286,287],{},"global"," components are included. Components in ",[268,290,291],{},"components\u002Fglobal\u002F"," are automatically global; others can be registered with ",[268,294,295],{},"global: true"," in ",[268,298,299],{},"nuxt.config.ts",[301,302,304],"h2",{"id":303},"grouping-components-by-folder","Grouping Components by Folder",[235,306,307,308,311],{},"A recommended pattern is to keep Canvas components in a dedicated ",[268,309,310],{},"components\u002FCanvas\u002F"," folder and derive categories from subfolder names:",[313,314,319],"pre",{"className":315,"code":316,"language":317,"meta":318,"style":318},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","components: [\n  { path: '~\u002Fcomponents\u002FCanvas', global: true, pathPrefix: false, prefix: '' },\n  { path: '~\u002Fcomponents\u002Fglobal', global: true },\n  '~\u002Fcomponents',\n],\n\ncomponentPreview: {\n  componentIndex: {\n    \u002F\u002F Derive Canvas component categories from folder names (Base\u002F, Layout\u002F, Card\u002F, Hero\u002F)\n    category: { directory: true, fallback: 'Misc' },\n  },\n},\n","ts","",[268,320,321,338,395,421,435,443,450,461,471,478,512,518],{"__ignoreMap":318},[322,323,326,330,334],"span",{"class":324,"line":325},"line",1,[322,327,329],{"class":328},"sBMFI","components",[322,331,333],{"class":332},"sMK4o",":",[322,335,337],{"class":336},"sTEyZ"," [\n",[322,339,341,344,348,350,353,357,360,363,366,368,372,374,377,379,382,384,387,389,392],{"class":324,"line":340},2,[322,342,343],{"class":332},"  {",[322,345,347],{"class":346},"swJcz"," path",[322,349,333],{"class":332},[322,351,352],{"class":332}," '",[322,354,356],{"class":355},"sfazB","~\u002Fcomponents\u002FCanvas",[322,358,359],{"class":332},"'",[322,361,362],{"class":332},",",[322,364,365],{"class":346}," global",[322,367,333],{"class":332},[322,369,371],{"class":370},"sfNiH"," true",[322,373,362],{"class":332},[322,375,376],{"class":346}," pathPrefix",[322,378,333],{"class":332},[322,380,381],{"class":370}," false",[322,383,362],{"class":332},[322,385,386],{"class":346}," prefix",[322,388,333],{"class":332},[322,390,391],{"class":332}," ''",[322,393,394],{"class":332}," },\n",[322,396,398,400,402,404,406,409,411,413,415,417,419],{"class":324,"line":397},3,[322,399,343],{"class":332},[322,401,347],{"class":346},[322,403,333],{"class":332},[322,405,352],{"class":332},[322,407,408],{"class":355},"~\u002Fcomponents\u002Fglobal",[322,410,359],{"class":332},[322,412,362],{"class":332},[322,414,365],{"class":346},[322,416,333],{"class":332},[322,418,371],{"class":370},[322,420,394],{"class":332},[322,422,424,427,430,432],{"class":324,"line":423},4,[322,425,426],{"class":332},"  '",[322,428,429],{"class":355},"~\u002Fcomponents",[322,431,359],{"class":332},[322,433,434],{"class":332},",\n",[322,436,438,441],{"class":324,"line":437},5,[322,439,440],{"class":336},"]",[322,442,434],{"class":332},[322,444,446],{"class":324,"line":445},6,[322,447,449],{"emptyLinePlaceholder":448},true,"\n",[322,451,453,456,458],{"class":324,"line":452},7,[322,454,455],{"class":328},"componentPreview",[322,457,333],{"class":332},[322,459,460],{"class":332}," {\n",[322,462,464,467,469],{"class":324,"line":463},8,[322,465,466],{"class":328},"  componentIndex",[322,468,333],{"class":332},[322,470,460],{"class":332},[322,472,474],{"class":324,"line":473},9,[322,475,477],{"class":476},"sHwdD","    \u002F\u002F Derive Canvas component categories from folder names (Base\u002F, Layout\u002F, Card\u002F, Hero\u002F)\n",[322,479,481,484,486,489,492,494,496,498,501,503,505,508,510],{"class":324,"line":480},10,[322,482,483],{"class":328},"    category",[322,485,333],{"class":332},[322,487,488],{"class":332}," {",[322,490,491],{"class":328}," directory",[322,493,333],{"class":332},[322,495,371],{"class":370},[322,497,362],{"class":332},[322,499,500],{"class":328}," fallback",[322,502,333],{"class":332},[322,504,352],{"class":332},[322,506,507],{"class":355},"Misc",[322,509,359],{"class":332},[322,511,394],{"class":332},[322,513,515],{"class":324,"line":514},11,[322,516,517],{"class":332},"  },\n",[322,519,521],{"class":324,"line":520},12,[322,522,523],{"class":332},"},\n",[235,525,526,527,281],{},"For working examples, see the ",[239,528,531],{"href":529,"rel":530},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Flupus-decoupled-nuxt-starter\u002Ftree\u002Fmain\u002Fcomponents\u002FCanvas",[251],"Canvas components in the Lupus Decoupled Nuxt Starter",[301,533,535],{"id":534},"jsdoc-metadata","JSDoc Metadata",[235,537,538],{},"Components and their props are documented via TypeScript, with JSDoc annotations supplying the additional metadata that TypeScript alone cannot express. The pattern is consistent: a label (display name) and an optional description, plus additional tags.",[540,541,543],"h3",{"id":542},"component-metadata","Component Metadata",[235,545,546,547,333],{},"Define component-level metadata via a JSDoc comment at the top of ",[268,548,549],{},"\u003Cscript setup>",[313,551,555],{"className":552,"code":553,"language":554,"meta":318,"style":318},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\n\u002F**\n * Hero Billboard\n * @description A full-width hero section with background image and overlay.\n * @category Hero\n * @status stable\n *\u002F\n\u003C\u002Fscript>\n","vue",[268,556,557,585,590,595,611,623,635,640],{"__ignoreMap":318},[322,558,559,562,565,569,572,575,578,580,582],{"class":324,"line":325},[322,560,561],{"class":332},"\u003C",[322,563,564],{"class":346},"script",[322,566,568],{"class":567},"spNyl"," setup",[322,570,571],{"class":567}," lang",[322,573,574],{"class":332},"=",[322,576,577],{"class":332},"\"",[322,579,317],{"class":355},[322,581,577],{"class":332},[322,583,584],{"class":332},">\n",[322,586,587],{"class":324,"line":340},[322,588,589],{"class":476},"\u002F**\n",[322,591,592],{"class":324,"line":397},[322,593,594],{"class":476}," * Hero Billboard\n",[322,596,597,600,604,608],{"class":324,"line":423},[322,598,599],{"class":476}," * ",[322,601,603],{"class":602},"s7zQu","@",[322,605,607],{"class":606},"s6hCs","description",[322,609,610],{"class":476}," A full-width hero section with background image and overlay.\n",[322,612,613,615,617,620],{"class":324,"line":437},[322,614,599],{"class":476},[322,616,603],{"class":602},[322,618,619],{"class":606},"category",[322,621,622],{"class":476}," Hero\n",[322,624,625,627,629,632],{"class":324,"line":445},[322,626,599],{"class":476},[322,628,603],{"class":602},[322,630,631],{"class":606},"status",[322,633,634],{"class":476}," stable\n",[322,636,637],{"class":324,"line":452},[322,638,639],{"class":476}," *\u002F\n",[322,641,642,645,647],{"class":324,"line":463},[322,643,644],{"class":332},"\u003C\u002F",[322,646,564],{"class":346},[322,648,584],{"class":332},[650,651,652,665],"table",{},[653,654,655],"thead",{},[656,657,658,662],"tr",{},[659,660,661],"th",{},"Tag",[659,663,664],{},"Description",[666,667,668,677,687,697],"tbody",{},[656,669,670,674],{},[671,672,673],"td",{},"First line",[671,675,676],{},"Label \u002F display name (falls back to auto-generated from PascalCase)",[656,678,679,684],{},[671,680,681],{},[268,682,683],{},"@description",[671,685,686],{},"Component description shown in the editor",[656,688,689,694],{},[671,690,691],{},[268,692,693],{},"@category",[671,695,696],{},"Category override (alternative to directory-based)",[656,698,699,704],{},[671,700,701],{},[268,702,703],{},"@status",[671,705,706,709,710,709,713,716,717],{},[268,707,708],{},"experimental",", ",[268,711,712],{},"stable",[268,714,715],{},"deprecated",", or ",[268,718,719],{},"obsolete",[235,721,722],{},"All fields are optional. Config-level overrides take priority over JSDoc.",[540,724,726],{"id":725},"prop-metadata","Prop Metadata",[235,728,729],{},"Props follow the same pattern — a label and description, plus additional tags for editor behavior:",[313,731,733],{"className":552,"code":732,"language":554,"meta":318,"style":318},"\u003Cscript setup lang=\"ts\">\nwithDefaults(defineProps\u003C{\n  \u002F**\n   * Button label text\n   * @example Submit\n   *\u002F\n  label?: string\n  \u002F**\n   * Button variant\n   * @enumLabels {\"large\": \"Extra Large (XL)\"}\n   *\u002F\n  variant?: 'primary' | 'secondary' | 'large'\n}>(), {\n  label: 'Click me',\n  variant: 'primary'\n})\n\u003C\u002Fscript>\n",[268,734,735,755,770,775,780,793,798,809,813,818,830,834,868,881,897,910,919],{"__ignoreMap":318},[322,736,737,739,741,743,745,747,749,751,753],{"class":324,"line":325},[322,738,561],{"class":332},[322,740,564],{"class":346},[322,742,568],{"class":567},[322,744,571],{"class":567},[322,746,574],{"class":332},[322,748,577],{"class":332},[322,750,317],{"class":355},[322,752,577],{"class":332},[322,754,584],{"class":332},[322,756,757,761,764,767],{"class":324,"line":340},[322,758,760],{"class":759},"s2Zo4","withDefaults",[322,762,763],{"class":336},"(",[322,765,766],{"class":759},"defineProps",[322,768,769],{"class":332},"\u003C{\n",[322,771,772],{"class":324,"line":397},[322,773,774],{"class":476},"  \u002F**\n",[322,776,777],{"class":324,"line":423},[322,778,779],{"class":476},"   * Button label text\n",[322,781,782,785,787,790],{"class":324,"line":437},[322,783,784],{"class":476},"   * ",[322,786,603],{"class":602},[322,788,789],{"class":606},"example",[322,791,792],{"class":476}," Submit\n",[322,794,795],{"class":324,"line":445},[322,796,797],{"class":476},"   *\u002F\n",[322,799,800,803,806],{"class":324,"line":452},[322,801,802],{"class":346},"  label",[322,804,805],{"class":332},"?:",[322,807,808],{"class":328}," string\n",[322,810,811],{"class":324,"line":463},[322,812,774],{"class":476},[322,814,815],{"class":324,"line":473},[322,816,817],{"class":476},"   * Button variant\n",[322,819,820,822,824,827],{"class":324,"line":480},[322,821,784],{"class":476},[322,823,603],{"class":602},[322,825,826],{"class":606},"enumLabels",[322,828,829],{"class":476}," {\"large\": \"Extra Large (XL)\"}\n",[322,831,832],{"class":324,"line":514},[322,833,797],{"class":476},[322,835,836,839,841,843,846,848,851,853,856,858,860,862,865],{"class":324,"line":520},[322,837,838],{"class":346},"  variant",[322,840,805],{"class":332},[322,842,352],{"class":332},[322,844,845],{"class":355},"primary",[322,847,359],{"class":332},[322,849,850],{"class":332}," |",[322,852,352],{"class":332},[322,854,855],{"class":355},"secondary",[322,857,359],{"class":332},[322,859,850],{"class":332},[322,861,352],{"class":332},[322,863,864],{"class":355},"large",[322,866,867],{"class":332},"'\n",[322,869,871,874,877,879],{"class":324,"line":870},13,[322,872,873],{"class":332},"}>",[322,875,876],{"class":336},"()",[322,878,362],{"class":332},[322,880,460],{"class":332},[322,882,884,886,888,890,893,895],{"class":324,"line":883},14,[322,885,802],{"class":346},[322,887,333],{"class":332},[322,889,352],{"class":332},[322,891,892],{"class":355},"Click me",[322,894,359],{"class":332},[322,896,434],{"class":332},[322,898,900,902,904,906,908],{"class":324,"line":899},15,[322,901,838],{"class":346},[322,903,333],{"class":332},[322,905,352],{"class":332},[322,907,845],{"class":355},[322,909,867],{"class":332},[322,911,913,916],{"class":324,"line":912},16,[322,914,915],{"class":332},"}",[322,917,918],{"class":336},")\n",[322,920,922,924,926],{"class":324,"line":921},17,[322,923,644],{"class":332},[322,925,564],{"class":346},[322,927,584],{"class":332},[235,929,930,931,934],{},"The prop label is auto-generated from the first JSDoc line or prop name. Use ",[268,932,933],{},"@title"," to override.",[650,936,937,945],{},[653,938,939],{},[656,940,941,943],{},[659,942,661],{},[659,944,664],{},[666,946,947,956,966,979,989,1003,1020,1067,1077,1094],{},[656,948,949,953],{},[671,950,951],{},[268,952,933],{},[671,954,955],{},"Explicit label override",[656,957,958,963],{},[671,959,960],{},[268,961,962],{},"@example",[671,964,965],{},"Adds example values (multiple allowed)",[656,967,968,973],{},[671,969,970],{},[268,971,972],{},"@enumLabels",[671,974,975,976],{},"Custom labels for enum values, e.g. ",[268,977,978],{},"{\"large\": \"Extra Large (XL)\"}",[656,980,981,986],{},[671,982,983],{},[268,984,985],{},"@contentMediaType text\u002Fhtml",[671,987,988],{},"Enables rich text editing in Canvas for string props",[656,990,991,996],{},[671,992,993],{},[268,994,995],{},"@formattingContext block|inline",[671,997,998,999,1002],{},"Controls formatting context (default: ",[268,1000,1001],{},"block",")",[656,1004,1005,1010],{},[671,1006,1007],{},[268,1008,1009],{},"@schemaRef",[671,1011,1012,1013,1016,1017],{},"Reference Canvas JSON schema definitions (e.g. ",[268,1014,1015],{},"canvas\u002Fstream-wrapper-uri","); array variant: ",[268,1018,1019],{},"@itemsSchemaRef",[656,1021,1022,1027],{},[671,1023,1024],{},[268,1025,1026],{},"@format",[671,1028,1029,1030,709,1033,709,1036,709,1039,709,1042,709,1045,709,1048,709,1051,709,1054,709,1057,709,1060,1063,1064],{},"JSON Schema format for semantic validation and UI widgets: ",[268,1031,1032],{},"date",[268,1034,1035],{},"date-time",[268,1037,1038],{},"time",[268,1040,1041],{},"duration",[268,1043,1044],{},"email",[268,1046,1047],{},"hostname",[268,1049,1050],{},"ipv4",[268,1052,1053],{},"ipv6",[268,1055,1056],{},"uuid",[268,1058,1059],{},"uri",[268,1061,1062],{},"uri-reference",", etc.; array variant: ",[268,1065,1066],{},"@itemsFormat",[656,1068,1069,1074],{},[671,1070,1071],{},[268,1072,1073],{},"@pattern",[671,1075,1076],{},"JSON Schema regex pattern for string validation",[656,1078,1079,1084],{},[671,1080,1081],{},[268,1082,1083],{},"@allowed-schemes",[671,1085,1086,1087,1090,1091,1002],{},"Allowed URI schemes for Canvas field type detection (e.g. ",[268,1088,1089],{},"public"," or ",[268,1092,1093],{},"http, https",[656,1095,1096,1105],{},[671,1097,1098,1101,1102],{},[268,1099,1100],{},"@minItems"," \u002F ",[268,1103,1104],{},"@maxItems",[671,1106,1107,1108,1002],{},"Cardinality bounds for array props (see ",[239,1109,1111],{"href":1110},"#multi-value-array-props","Multi-Value Props",[301,1113,1115],{"id":1114},"drupal-canvas-types","Drupal Canvas Types",[235,1117,1118],{},"For Canvas integration, special TypeScript types are available that generate JSON schemas enabling Canvas UI features like media library selection. These types are auto-imported by Nuxt.",[650,1120,1121,1130],{},[653,1122,1123],{},[656,1124,1125,1128],{},[659,1126,1127],{},"Type",[659,1129,664],{},[666,1131,1132,1142],{},[656,1133,1134,1139],{},[671,1135,1136],{},[268,1137,1138],{},"CanvasImage",[671,1140,1141],{},"Image with media library integration (src, alt, width, height)",[656,1143,1144,1149],{},[671,1145,1146],{},[268,1147,1148],{},"CanvasVideo",[671,1150,1151],{},"Video with poster support",[235,1153,1154],{},"Example usage:",[313,1156,1158],{"className":552,"code":1157,"language":554,"meta":318,"style":318},"\u003Cscript setup lang=\"ts\">\n\u002F**\n * Hero Banner\n *\u002F\ndefineProps\u003C{\n  \u002F**\n   * Background image\n   * @example src=https:\u002F\u002Fexample.com\u002Fhero.jpg alt=\"Hero\" width=1200 height=600\n   *\u002F\n  image: CanvasImage\n}>()\n\u003C\u002Fscript>\n",[268,1159,1160,1180,1184,1189,1193,1199,1203,1208,1219,1223,1233,1240],{"__ignoreMap":318},[322,1161,1162,1164,1166,1168,1170,1172,1174,1176,1178],{"class":324,"line":325},[322,1163,561],{"class":332},[322,1165,564],{"class":346},[322,1167,568],{"class":567},[322,1169,571],{"class":567},[322,1171,574],{"class":332},[322,1173,577],{"class":332},[322,1175,317],{"class":355},[322,1177,577],{"class":332},[322,1179,584],{"class":332},[322,1181,1182],{"class":324,"line":340},[322,1183,589],{"class":476},[322,1185,1186],{"class":324,"line":397},[322,1187,1188],{"class":476}," * Hero Banner\n",[322,1190,1191],{"class":324,"line":423},[322,1192,639],{"class":476},[322,1194,1195,1197],{"class":324,"line":437},[322,1196,766],{"class":759},[322,1198,769],{"class":332},[322,1200,1201],{"class":324,"line":445},[322,1202,774],{"class":476},[322,1204,1205],{"class":324,"line":452},[322,1206,1207],{"class":476},"   * Background image\n",[322,1209,1210,1212,1214,1216],{"class":324,"line":463},[322,1211,784],{"class":476},[322,1213,603],{"class":602},[322,1215,789],{"class":606},[322,1217,1218],{"class":476}," src=https:\u002F\u002Fexample.com\u002Fhero.jpg alt=\"Hero\" width=1200 height=600\n",[322,1220,1221],{"class":324,"line":473},[322,1222,797],{"class":476},[322,1224,1225,1228,1230],{"class":324,"line":480},[322,1226,1227],{"class":346},"  image",[322,1229,333],{"class":332},[322,1231,1232],{"class":328}," CanvasImage\n",[322,1234,1235,1237],{"class":324,"line":514},[322,1236,873],{"class":332},[322,1238,1239],{"class":336},"()\n",[322,1241,1242,1244,1246],{"class":324,"line":520},[322,1243,644],{"class":332},[322,1245,564],{"class":346},[322,1247,584],{"class":332},[235,1249,256,1250,1252],{},[268,1251,962],{}," for Canvas types supports two formats:",[1254,1255,1256,1263],"ul",{},[1257,1258,1259,1260],"li",{},"Key-value: ",[268,1261,1262],{},"src=https:\u002F\u002F... alt=\"text\" width=800 height=600",[1257,1264,1265,1266],{},"JS object: ",[268,1267,1268],{},"{ src: 'https:\u002F\u002F...', alt: 'text', width: 800 }",[540,1270,1272],{"id":1271},"schema-references","Schema References",[235,1274,1275,1276,1278,1279,1282,1283,1286,1287,1290],{},"For advanced use cases, ",[268,1277,1009],{}," allows referencing Canvas JSON schema definitions directly, useful for types like ",[268,1280,1281],{},"stream-wrapper-uri"," and ",[268,1284,1285],{},"stream-wrapper-image-uri",". Use the shorthand ",[268,1288,1289],{},"prefix\u002Fname"," notation:",[313,1292,1294],{"className":552,"code":1293,"language":554,"meta":318,"style":318},"\u002F**\n * @schemaRef canvas\u002Fstream-wrapper-uri\n *\u002F\nimageUri?: string\n",[268,1295,1296,1300,1305,1309],{"__ignoreMap":318},[322,1297,1298],{"class":324,"line":325},[322,1299,589],{"class":336},[322,1301,1302],{"class":324,"line":340},[322,1303,1304],{"class":336}," * @schemaRef canvas\u002Fstream-wrapper-uri\n",[322,1306,1307],{"class":324,"line":397},[322,1308,639],{"class":336},[322,1310,1311],{"class":324,"line":423},[322,1312,1313],{"class":336},"imageUri?: string\n",[235,1315,1316,1317,281],{},"This expands to ",[268,1318,1319],{},"json-schema-definitions:\u002F\u002Fcanvas.module\u002Fstream-wrapper-uri",[301,1321,1323],{"id":1322},"multi-value-array-props","Multi-Value (Array) Props",[235,1325,1326],{},"Canvas 1.4 introduced support for multi-value props — arrays of primitives, formatted strings, enums, or known struct shapes. Declare them as TS array types; refinements TypeScript can't express are picked up via JSDoc.",[540,1328,1330],{"id":1329},"cardinality","Cardinality",[650,1332,1333,1342],{},[653,1334,1335],{},[656,1336,1337,1339],{},[659,1338,661],{},[659,1340,1341],{},"Effect",[666,1343,1344,1357],{},[656,1345,1346,1351],{},[671,1347,1348],{},[268,1349,1350],{},"@minItems N",[671,1352,1353,1354],{},"Required-array — canvas treats this as the multi-value equivalent of ",[268,1355,1356],{},"required",[656,1358,1359,1364],{},[671,1360,1361],{},[268,1362,1363],{},"@maxItems N",[671,1365,1366],{},"Caps the number of entries",[540,1368,1370,1371,1002],{"id":1369},"element-shape-refinements-applied-to-items","Element-shape refinements (applied to ",[268,1372,1373],{},"items",[650,1375,1376,1384],{},[653,1377,1378],{},[656,1379,1380,1382],{},[659,1381,661],{},[659,1383,1341],{},[666,1385,1386,1413],{},[656,1387,1388,1393],{},[671,1389,1390],{},[268,1391,1392],{},"@itemsFormat \u003Cfmt>",[671,1394,1395,1396,1399,1400,1402,1403,709,1405,709,1407,709,1409,709,1411,1002],{},"Lifts ",[268,1397,1398],{},"format"," into ",[268,1401,1373],{}," (e.g. ",[268,1404,1059],{},[268,1406,1062],{},[268,1408,1032],{},[268,1410,1035],{},[268,1412,1044],{},[656,1414,1415,1420],{},[671,1416,1417],{},[268,1418,1419],{},"@itemsSchemaRef \u003Cprefix\u002Fname>",[671,1421,1395,1422,1399,1425,1427,1428,709,1430,709,1433,1436,1437,1439],{},[268,1423,1424],{},"$ref",[268,1426,1373],{},", including known-shape extras (",[268,1429,1398],{},[268,1431,1432],{},"x-allowed-schemes",[268,1434,1435],{},"contentMediaType",") — same as ",[268,1438,1009],{}," for scalar props",[540,1441,1443],{"id":1442},"enums-in-items","Enums in items",[235,1445,1446,1447,1450,1451,1454,1455,1457],{},"TypeScript union literals on the element type lift into ",[268,1448,1449],{},"items.enum"," + auto-generated ",[268,1452,1453],{},"items.meta:enum"," labels. ",[268,1456,972],{}," on the prop overrides those labels.",[313,1459,1461],{"className":552,"code":1460,"language":554,"meta":318,"style":318},"\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  \u002F\u002F Element labels auto-generated from values.\n  status?: ('option_one' | 'option_two' | 'option_three')[]\n\n  \u002F**\n   * @enumLabels {\"draft\": \"Draft\", \"review\": \"In Review\", \"live\": \"Live\"}\n   *\u002F\n  workflowState?: ('draft' | 'review' | 'live')[]\n\n  \u002F\u002F Numeric union → items.type: integer + enum.\n  ratings?: (1 | 2 | 3 | 4 | 5)[]\n}>()\n\u003C\u002Fscript>\n",[268,1462,1463,1483,1489,1494,1532,1536,1540,1551,1555,1591,1595,1600,1635,1641],{"__ignoreMap":318},[322,1464,1465,1467,1469,1471,1473,1475,1477,1479,1481],{"class":324,"line":325},[322,1466,561],{"class":332},[322,1468,564],{"class":346},[322,1470,568],{"class":567},[322,1472,571],{"class":567},[322,1474,574],{"class":332},[322,1476,577],{"class":332},[322,1478,317],{"class":355},[322,1480,577],{"class":332},[322,1482,584],{"class":332},[322,1484,1485,1487],{"class":324,"line":340},[322,1486,766],{"class":759},[322,1488,769],{"class":332},[322,1490,1491],{"class":324,"line":397},[322,1492,1493],{"class":476},"  \u002F\u002F Element labels auto-generated from values.\n",[322,1495,1496,1499,1501,1504,1506,1509,1511,1513,1515,1518,1520,1522,1524,1527,1529],{"class":324,"line":423},[322,1497,1498],{"class":346},"  status",[322,1500,805],{"class":332},[322,1502,1503],{"class":336}," (",[322,1505,359],{"class":332},[322,1507,1508],{"class":355},"option_one",[322,1510,359],{"class":332},[322,1512,850],{"class":332},[322,1514,352],{"class":332},[322,1516,1517],{"class":355},"option_two",[322,1519,359],{"class":332},[322,1521,850],{"class":332},[322,1523,352],{"class":332},[322,1525,1526],{"class":355},"option_three",[322,1528,359],{"class":332},[322,1530,1531],{"class":336},")[]\n",[322,1533,1534],{"class":324,"line":437},[322,1535,449],{"emptyLinePlaceholder":448},[322,1537,1538],{"class":324,"line":445},[322,1539,774],{"class":476},[322,1541,1542,1544,1546,1548],{"class":324,"line":452},[322,1543,784],{"class":476},[322,1545,603],{"class":602},[322,1547,826],{"class":606},[322,1549,1550],{"class":476}," {\"draft\": \"Draft\", \"review\": \"In Review\", \"live\": \"Live\"}\n",[322,1552,1553],{"class":324,"line":463},[322,1554,797],{"class":476},[322,1556,1557,1560,1562,1564,1566,1569,1571,1573,1575,1578,1580,1582,1584,1587,1589],{"class":324,"line":473},[322,1558,1559],{"class":346},"  workflowState",[322,1561,805],{"class":332},[322,1563,1503],{"class":336},[322,1565,359],{"class":332},[322,1567,1568],{"class":355},"draft",[322,1570,359],{"class":332},[322,1572,850],{"class":332},[322,1574,352],{"class":332},[322,1576,1577],{"class":355},"review",[322,1579,359],{"class":332},[322,1581,850],{"class":332},[322,1583,352],{"class":332},[322,1585,1586],{"class":355},"live",[322,1588,359],{"class":332},[322,1590,1531],{"class":336},[322,1592,1593],{"class":324,"line":480},[322,1594,449],{"emptyLinePlaceholder":448},[322,1596,1597],{"class":324,"line":514},[322,1598,1599],{"class":476},"  \u002F\u002F Numeric union → items.type: integer + enum.\n",[322,1601,1602,1605,1607,1609,1613,1615,1618,1620,1623,1625,1628,1630,1633],{"class":324,"line":520},[322,1603,1604],{"class":346},"  ratings",[322,1606,805],{"class":332},[322,1608,1503],{"class":336},[322,1610,1612],{"class":1611},"sbssI","1",[322,1614,850],{"class":332},[322,1616,1617],{"class":1611}," 2",[322,1619,850],{"class":332},[322,1621,1622],{"class":1611}," 3",[322,1624,850],{"class":332},[322,1626,1627],{"class":1611}," 4",[322,1629,850],{"class":332},[322,1631,1632],{"class":1611}," 5",[322,1634,1531],{"class":336},[322,1636,1637,1639],{"class":324,"line":870},[322,1638,873],{"class":332},[322,1640,1239],{"class":336},[322,1642,1643,1645,1647],{"class":324,"line":883},[322,1644,644],{"class":332},[322,1646,564],{"class":346},[322,1648,584],{"class":332},[540,1650,1652],{"id":1651},"full-example","Full example",[313,1654,1656],{"className":552,"code":1655,"language":554,"meta":318,"style":318},"\u003Cscript setup lang=\"ts\">\nwithDefaults(defineProps\u003C{\n  \u002F**\n   * Plain text values\n   * @example [\"Hello World\", \"Sample Text\"]\n   *\u002F\n  textValues?: string[]\n\n  \u002F**\n   * Required text values (canvas signals required via minItems)\n   * @minItems 1\n   *\u002F\n  requiredText: string[]\n\n  \u002F**\n   * Absolute URLs, capped at 3\n   * @itemsFormat uri\n   * @maxItems 3\n   *\u002F\n  links?: string[]\n\n  \u002F**\n   * Event dates\n   * @itemsFormat date\n   *\u002F\n  dates?: string[]\n\n  \u002F**\n   * Workflow state list — labels overridden via @enumLabels\n   * @enumLabels {\"draft\": \"Draft\", \"review\": \"In Review\", \"live\": \"Live\"}\n   * @maxItems 3\n   *\u002F\n  states?: ('draft' | 'review' | 'live')[]\n\n  \u002F**\n   * Public file attachments\n   * @itemsSchemaRef canvas\u002Fstream-wrapper-uri\n   *\u002F\n  attachments?: string[]\n\n  \u002F**\n   * Gallery images\n   * @maxItems 5\n   *\u002F\n  images?: CanvasImage[]\n}>(), {})\n\u003C\u002Fscript>\n",[268,1657,1658,1678,1688,1692,1697,1708,1712,1725,1729,1733,1738,1750,1754,1765,1769,1773,1778,1790,1803,1808,1820,1825,1830,1836,1848,1853,1865,1870,1875,1886,1897,1908,1913,1947,1952,1957,1963,1976,1981,1993,1998,2003,2009,2021,2026,2039,2053],{"__ignoreMap":318},[322,1659,1660,1662,1664,1666,1668,1670,1672,1674,1676],{"class":324,"line":325},[322,1661,561],{"class":332},[322,1663,564],{"class":346},[322,1665,568],{"class":567},[322,1667,571],{"class":567},[322,1669,574],{"class":332},[322,1671,577],{"class":332},[322,1673,317],{"class":355},[322,1675,577],{"class":332},[322,1677,584],{"class":332},[322,1679,1680,1682,1684,1686],{"class":324,"line":340},[322,1681,760],{"class":759},[322,1683,763],{"class":336},[322,1685,766],{"class":759},[322,1687,769],{"class":332},[322,1689,1690],{"class":324,"line":397},[322,1691,774],{"class":476},[322,1693,1694],{"class":324,"line":423},[322,1695,1696],{"class":476},"   * Plain text values\n",[322,1698,1699,1701,1703,1705],{"class":324,"line":437},[322,1700,784],{"class":476},[322,1702,603],{"class":602},[322,1704,789],{"class":606},[322,1706,1707],{"class":476}," [\"Hello World\", \"Sample Text\"]\n",[322,1709,1710],{"class":324,"line":445},[322,1711,797],{"class":476},[322,1713,1714,1717,1719,1722],{"class":324,"line":452},[322,1715,1716],{"class":346},"  textValues",[322,1718,805],{"class":332},[322,1720,1721],{"class":328}," string",[322,1723,1724],{"class":336},"[]\n",[322,1726,1727],{"class":324,"line":463},[322,1728,449],{"emptyLinePlaceholder":448},[322,1730,1731],{"class":324,"line":473},[322,1732,774],{"class":476},[322,1734,1735],{"class":324,"line":480},[322,1736,1737],{"class":476},"   * Required text values (canvas signals required via minItems)\n",[322,1739,1740,1742,1744,1747],{"class":324,"line":514},[322,1741,784],{"class":476},[322,1743,603],{"class":602},[322,1745,1746],{"class":606},"minItems",[322,1748,1749],{"class":476}," 1\n",[322,1751,1752],{"class":324,"line":520},[322,1753,797],{"class":476},[322,1755,1756,1759,1761,1763],{"class":324,"line":870},[322,1757,1758],{"class":346},"  requiredText",[322,1760,333],{"class":332},[322,1762,1721],{"class":328},[322,1764,1724],{"class":336},[322,1766,1767],{"class":324,"line":883},[322,1768,449],{"emptyLinePlaceholder":448},[322,1770,1771],{"class":324,"line":899},[322,1772,774],{"class":476},[322,1774,1775],{"class":324,"line":912},[322,1776,1777],{"class":476},"   * Absolute URLs, capped at 3\n",[322,1779,1780,1782,1784,1787],{"class":324,"line":921},[322,1781,784],{"class":476},[322,1783,603],{"class":602},[322,1785,1786],{"class":606},"itemsFormat",[322,1788,1789],{"class":476}," uri\n",[322,1791,1793,1795,1797,1800],{"class":324,"line":1792},18,[322,1794,784],{"class":476},[322,1796,603],{"class":602},[322,1798,1799],{"class":606},"maxItems",[322,1801,1802],{"class":476}," 3\n",[322,1804,1806],{"class":324,"line":1805},19,[322,1807,797],{"class":476},[322,1809,1811,1814,1816,1818],{"class":324,"line":1810},20,[322,1812,1813],{"class":346},"  links",[322,1815,805],{"class":332},[322,1817,1721],{"class":328},[322,1819,1724],{"class":336},[322,1821,1823],{"class":324,"line":1822},21,[322,1824,449],{"emptyLinePlaceholder":448},[322,1826,1828],{"class":324,"line":1827},22,[322,1829,774],{"class":476},[322,1831,1833],{"class":324,"line":1832},23,[322,1834,1835],{"class":476},"   * Event dates\n",[322,1837,1839,1841,1843,1845],{"class":324,"line":1838},24,[322,1840,784],{"class":476},[322,1842,603],{"class":602},[322,1844,1786],{"class":606},[322,1846,1847],{"class":476}," date\n",[322,1849,1851],{"class":324,"line":1850},25,[322,1852,797],{"class":476},[322,1854,1856,1859,1861,1863],{"class":324,"line":1855},26,[322,1857,1858],{"class":346},"  dates",[322,1860,805],{"class":332},[322,1862,1721],{"class":328},[322,1864,1724],{"class":336},[322,1866,1868],{"class":324,"line":1867},27,[322,1869,449],{"emptyLinePlaceholder":448},[322,1871,1873],{"class":324,"line":1872},28,[322,1874,774],{"class":476},[322,1876,1878,1881,1883],{"class":324,"line":1877},29,[322,1879,1880],{"class":476},"   * Workflow state list — labels overridden via ",[322,1882,603],{"class":602},[322,1884,1885],{"class":606},"enumLabels\n",[322,1887,1889,1891,1893,1895],{"class":324,"line":1888},30,[322,1890,784],{"class":476},[322,1892,603],{"class":602},[322,1894,826],{"class":606},[322,1896,1550],{"class":476},[322,1898,1900,1902,1904,1906],{"class":324,"line":1899},31,[322,1901,784],{"class":476},[322,1903,603],{"class":602},[322,1905,1799],{"class":606},[322,1907,1802],{"class":476},[322,1909,1911],{"class":324,"line":1910},32,[322,1912,797],{"class":476},[322,1914,1916,1919,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939,1941,1943,1945],{"class":324,"line":1915},33,[322,1917,1918],{"class":346},"  states",[322,1920,805],{"class":332},[322,1922,1503],{"class":336},[322,1924,359],{"class":332},[322,1926,1568],{"class":355},[322,1928,359],{"class":332},[322,1930,850],{"class":332},[322,1932,352],{"class":332},[322,1934,1577],{"class":355},[322,1936,359],{"class":332},[322,1938,850],{"class":332},[322,1940,352],{"class":332},[322,1942,1586],{"class":355},[322,1944,359],{"class":332},[322,1946,1531],{"class":336},[322,1948,1950],{"class":324,"line":1949},34,[322,1951,449],{"emptyLinePlaceholder":448},[322,1953,1955],{"class":324,"line":1954},35,[322,1956,774],{"class":476},[322,1958,1960],{"class":324,"line":1959},36,[322,1961,1962],{"class":476},"   * Public file attachments\n",[322,1964,1966,1968,1970,1973],{"class":324,"line":1965},37,[322,1967,784],{"class":476},[322,1969,603],{"class":602},[322,1971,1972],{"class":606},"itemsSchemaRef",[322,1974,1975],{"class":476}," canvas\u002Fstream-wrapper-uri\n",[322,1977,1979],{"class":324,"line":1978},38,[322,1980,797],{"class":476},[322,1982,1984,1987,1989,1991],{"class":324,"line":1983},39,[322,1985,1986],{"class":346},"  attachments",[322,1988,805],{"class":332},[322,1990,1721],{"class":328},[322,1992,1724],{"class":336},[322,1994,1996],{"class":324,"line":1995},40,[322,1997,449],{"emptyLinePlaceholder":448},[322,1999,2001],{"class":324,"line":2000},41,[322,2002,774],{"class":476},[322,2004,2006],{"class":324,"line":2005},42,[322,2007,2008],{"class":476},"   * Gallery images\n",[322,2010,2012,2014,2016,2018],{"class":324,"line":2011},43,[322,2013,784],{"class":476},[322,2015,603],{"class":602},[322,2017,1799],{"class":606},[322,2019,2020],{"class":476}," 5\n",[322,2022,2024],{"class":324,"line":2023},44,[322,2025,797],{"class":476},[322,2027,2029,2032,2034,2037],{"class":324,"line":2028},45,[322,2030,2031],{"class":346},"  images",[322,2033,805],{"class":332},[322,2035,2036],{"class":328}," CanvasImage",[322,2038,1724],{"class":336},[322,2040,2042,2044,2046,2048,2051],{"class":324,"line":2041},46,[322,2043,873],{"class":332},[322,2045,876],{"class":336},[322,2047,362],{"class":332},[322,2049,2050],{"class":332}," {}",[322,2052,918],{"class":336},[322,2054,2056,2058,2060],{"class":324,"line":2055},47,[322,2057,644],{"class":332},[322,2059,564],{"class":346},[322,2061,584],{"class":332},[235,2063,2064,2065,2070,2071,281],{},"A complete example covering every shape combination can be seen in ",[239,2066,2069],{"href":2067,"rel":2068},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview\u002Fblob\u002F1.x\u002Fplayground\u002Fcomponents\u002Fglobal\u002FTestMultiValueProps.vue",[251],"TestMultiValueProps.vue"," and its ",[239,2072,2075],{"href":2073,"rel":2074},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxt-component-preview\u002Fblob\u002F1.x\u002Ftest\u002Ffixtures\u002Fmultivalue-props.component-index.json",[251],"generated component-index",[2077,2078,2079],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .s6hCs, html code.shiki .s6hCs{--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#C792EA;--shiki-default-font-style:italic;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":318,"searchDepth":340,"depth":340,"links":2081},[2082,2083,2087,2090],{"id":303,"depth":340,"text":304},{"id":534,"depth":340,"text":535,"children":2084},[2085,2086],{"id":542,"depth":397,"text":543},{"id":725,"depth":397,"text":726},{"id":1114,"depth":340,"text":1115,"children":2088},[2089],{"id":1271,"depth":397,"text":1272},{"id":1322,"depth":340,"text":1323,"children":2091},[2092,2093,2095,2096],{"id":1329,"depth":397,"text":1330},{"id":1369,"depth":397,"text":2094},"Element-shape refinements (applied to items)",{"id":1442,"depth":397,"text":1443},{"id":1651,"depth":397,"text":1652},"To make Vue components available in the Drupal Canvas editor, the frontend exposes a component index: a JSON file listing all available components together with their props, prop schemas, labels, descriptions, categories, formats and schema references. Canvas External JS Components reads this index and uses it to populate the editor UI.","md",null,{},{"title":196,"description":2097},"DNl-O57vluwKYYCXZz8li9Ylo9Ev-9KADLy0pZ8nIpo",[2104,2106],{"title":192,"path":193,"stem":194,"description":2105,"children":-1},"Component previews allow Vue components to be rendered in isolation in external contexts, such as the Drupal Canvas editor. This enables editors to see live previews of components directly in the page builder.",{"title":200,"path":201,"stem":202,"description":2107,"children":-1},"With Nuxt you can decide what rendering strategy you want to use, if you like even at the route level.",1779292116353]