[{"data":1,"prerenderedAt":655},["ShallowReactive",2],{"navigation_docs":3,"-docs-reference-storybook":118,"-docs-reference-storybook-surround":650},[4,19,49,75,89],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Démarrer","i-lucide-rocket","\u002Fdocs\u002Fdemarrer","docs\u002F1.demarrer",[10,14],{"title":11,"path":12,"stem":13},"Première présentation","\u002Fdocs\u002Fdemarrer\u002Fpremiere-presentation","docs\u002F1.demarrer\u002F1.premiere-presentation",{"title":15,"path":16,"stem":17},"Le Markdown","\u002Fdocs\u002Fdemarrer\u002Fle-markdown","docs\u002F1.demarrer\u002F2.le-markdown",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24,"page":18},"Écrire","i-lucide-pen-line","\u002Fdocs\u002Fecrire","docs\u002F2.ecrire",[25,29,33,37,41,45],{"title":26,"path":27,"stem":28},"La syntaxe","\u002Fdocs\u002Fecrire\u002Fsyntaxe","docs\u002F2.ecrire\u002F1.syntaxe",{"title":30,"path":31,"stem":32},"Les composants","\u002Fdocs\u002Fecrire\u002Fcomposants","docs\u002F2.ecrire\u002F2.composants",{"title":34,"path":35,"stem":36},"Story Storybook","\u002Fdocs\u002Fecrire\u002Fstory-storybook","docs\u002F2.ecrire\u002F3.story-storybook",{"title":38,"path":39,"stem":40},"Image et texte","\u002Fdocs\u002Fecrire\u002Fimage-a-cote-du-texte","docs\u002F2.ecrire\u002F4.image-a-cote-du-texte",{"title":42,"path":43,"stem":44},"Présenter et exporter","\u002Fdocs\u002Fecrire\u002Fpresenter","docs\u002F2.ecrire\u002F5.presenter",{"title":46,"path":47,"stem":48},"Écrire avec un agent","\u002Fdocs\u002Fecrire\u002Fecrire-avec-un-agent","docs\u002F2.ecrire\u002F6.ecrire-avec-un-agent",{"title":50,"icon":51,"path":52,"stem":53,"children":54,"page":18},"Studio","i-lucide-layout-grid","\u002Fdocs\u002Fstudio","docs\u002F3.studio",[55,59,63,67,71],{"title":56,"path":57,"stem":58},"Rôles et partage","\u002Fdocs\u002Fstudio\u002Froles-et-partage","docs\u002F3.studio\u002F1.roles-et-partage",{"title":60,"path":61,"stem":62},"Versions et brouillon","\u002Fdocs\u002Fstudio\u002Fversions-et-brouillon","docs\u002F3.studio\u002F2.versions-et-brouillon",{"title":64,"path":65,"stem":66},"Organiser le catalogue","\u002Fdocs\u002Fstudio\u002Forganiser-le-catalogue","docs\u002F3.studio\u002F3.organiser-le-catalogue",{"title":68,"path":69,"stem":70},"Jetons d'accès","\u002Fdocs\u002Fstudio\u002Fjetons-d-acces","docs\u002F3.studio\u002F4.jetons-d-acces",{"title":72,"path":73,"stem":74},"Problèmes fréquents","\u002Fdocs\u002Fstudio\u002Fproblemes-frequents","docs\u002F3.studio\u002F5.problemes-frequents",{"title":76,"icon":77,"path":78,"stem":79,"children":80,"page":18},"Thèmes","i-lucide-palette","\u002Fdocs\u002Fthemes","docs\u002F4.themes",[81,85],{"title":82,"path":83,"stem":84},"Thème DSFR","\u002Fdocs\u002Fthemes\u002Ftheme-dsfr","docs\u002F4.themes\u002F1.theme-dsfr",{"title":86,"path":87,"stem":88},"Thème d'équipe","\u002Fdocs\u002Fthemes\u002Ftheme-de-votre-equipe","docs\u002F4.themes\u002F2.theme-de-votre-equipe",{"title":90,"icon":91,"path":92,"stem":93,"children":94,"page":18},"Référence","i-lucide-book-open","\u002Fdocs\u002Freference","docs\u002F5.reference",[95,99,103,107,111,115],{"title":96,"path":97,"stem":98},"Module de rendu","\u002Fdocs\u002Freference\u002Fnuxt","docs\u002F5.reference\u002F1.nuxt",{"title":100,"path":101,"stem":102},"Composants de schéma","\u002Fdocs\u002Freference\u002Fschemas","docs\u002F5.reference\u002F2.schemas",{"title":104,"path":105,"stem":106},"Composants Storybook","\u002Fdocs\u002Freference\u002Fstorybook","docs\u002F5.reference\u002F3.storybook",{"title":108,"path":109,"stem":110},"Système de thèmes","\u002Fdocs\u002Freference\u002Ftheme-system","docs\u002F5.reference\u002F4.theme-system",{"title":112,"path":113,"stem":114},"Kit de thèmes","\u002Fdocs\u002Freference\u002Ftheme-kit","docs\u002F5.reference\u002F5.theme-kit",{"title":82,"path":116,"stem":117},"\u002Fdocs\u002Freference\u002Ftheme-dsfr","docs\u002F5.reference\u002F6.theme-dsfr",{"id":119,"title":104,"body":120,"description":644,"extension":645,"meta":646,"navigation":647,"path":105,"seo":648,"stem":106,"__hash__":649},"docs\u002Fdocs\u002Freference\u002Fstorybook\u002FREADME.md",{"type":121,"value":122,"toc":636},"minimark",[123,149,224,228,265,270,285,321,332,336,352,356,390,393,429,436,439,453,455,619,622,626,632],[124,125,130],"pre",{"className":126,"code":127,"language":128,"meta":129,"style":129},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @vignettes\u002Fstorybook\n","bash","",[131,132,133],"code",{"__ignoreMap":129},[134,135,138,142,146],"span",{"class":136,"line":137},"line",1,[134,139,141],{"class":140},"sBMFI","pnpm",[134,143,145],{"class":144},"sfazB"," add",[134,147,148],{"class":144}," @vignettes\u002Fstorybook\n",[124,150,154],{"className":151,"code":152,"language":153,"meta":129,"style":129},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@vignettes\u002Fnuxt', '@vignettes\u002Fstorybook'],\n})\n","ts",[131,155,156,177,215],{"__ignoreMap":129},[134,157,158,162,165,169,173],{"class":136,"line":137},[134,159,161],{"class":160},"s7zQu","export",[134,163,164],{"class":160}," default",[134,166,168],{"class":167},"s2Zo4"," defineNuxtConfig",[134,170,172],{"class":171},"sTEyZ","(",[134,174,176],{"class":175},"sMK4o","{\n",[134,178,180,184,187,190,193,196,198,201,204,207,209,212],{"class":136,"line":179},2,[134,181,183],{"class":182},"swJcz","  modules",[134,185,186],{"class":175},":",[134,188,189],{"class":171}," [",[134,191,192],{"class":175},"'",[134,194,195],{"class":144},"@vignettes\u002Fnuxt",[134,197,192],{"class":175},[134,199,200],{"class":175},",",[134,202,203],{"class":175}," '",[134,205,206],{"class":144},"@vignettes\u002Fstorybook",[134,208,192],{"class":175},[134,210,211],{"class":171},"]",[134,213,214],{"class":175},",\n",[134,216,218,221],{"class":136,"line":217},3,[134,219,220],{"class":175},"}",[134,222,223],{"class":171},")\n",[225,226,227],"p",{},"A deck names its Storybook root in the frontmatter, and each embed names a story id:",[124,229,233],{"className":230,"code":231,"language":232,"meta":129,"style":129},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: A deck\nstorybook: https:\u002F\u002Fstorybook.example.com\n---\n","yaml",[131,234,235,240,250,260],{"__ignoreMap":129},[134,236,237],{"class":136,"line":137},[134,238,239],{"class":140},"---\n",[134,241,242,245,247],{"class":136,"line":179},[134,243,244],{"class":182},"title",[134,246,186],{"class":175},[134,248,249],{"class":144}," A deck\n",[134,251,252,255,257],{"class":136,"line":217},[134,253,254],{"class":182},"storybook",[134,256,186],{"class":175},[134,258,259],{"class":144}," https:\u002F\u002Fstorybook.example.com\n",[134,261,263],{"class":136,"line":262},4,[134,264,239],{"class":140},[266,267,269],"h2",{"id":268},"one-story-beside-the-text","One story beside the text",[225,271,272,273,276,277,280,281,284],{},"A ",[131,274,275],{},"story"," on the ",[131,278,279],{},":layout"," annotation resolves to ",[131,282,283],{},"\u003Cstorybook>\u002Fiframe.html?id=\u003Cstory>&viewMode=story"," and renders as an iframe:",[124,286,290],{"className":287,"code":288,"language":289,"meta":129,"style":129},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","### My component, live\n\n:layout{media=\"right\" size=\"2\u002F3\" story=\"home-scenario-a--page\" lightbox}\n\nWhat we are testing, next to the live story.\n","markdown",[131,291,292,300,306,311,315],{"__ignoreMap":129},[134,293,294,297],{"class":136,"line":137},[134,295,296],{"class":175},"### ",[134,298,299],{"class":140},"My component, live\n",[134,301,302],{"class":136,"line":179},[134,303,305],{"emptyLinePlaceholder":304},true,"\n",[134,307,308],{"class":136,"line":217},[134,309,310],{"class":171},":layout{media=\"right\" size=\"2\u002F3\" story=\"home-scenario-a--page\" lightbox}\n",[134,312,313],{"class":136,"line":262},[134,314,305],{"emptyLinePlaceholder":304},[134,316,318],{"class":136,"line":317},5,[134,319,320],{"class":171},"What we are testing, next to the live story.\n",[225,322,323,324,327,328,331],{},"The value is the Storybook story id, ",[131,325,326],{},"\u003CcomponentId>--\u003CstoryName>",". ",[131,329,330],{},"lightbox"," lets a click open the story full-screen.",[266,333,335],{"id":334},"several-screens-side-by-side","Several screens side by side",[225,337,338,341,342,345,346,348,349,351],{},[131,339,340],{},"Screens"," lays its ",[131,343,344],{},"StoryFrame"," children in a row. An iframe renders at its logical width and the frame scales it down to fit, so the frame shows the whole page. ",[131,347,344],{}," also works on its own in a slide body, without ",[131,350,340],{},".",[353,354,340],"h3",{"id":355},"screens",[124,357,359],{"className":287,"code":358,"language":289,"meta":129,"style":129},":::Screens{cols=\"2\"}\n::StoryFrame{story=\"story-id\" label=\"Label\" lightbox}\n::\n::StoryFrame{story=\"story-id\" label=\"Label\" lightbox}\n::\n:::\n",[131,360,361,366,371,376,380,384],{"__ignoreMap":129},[134,362,363],{"class":136,"line":137},[134,364,365],{"class":171},":::Screens{cols=\"2\"}\n",[134,367,368],{"class":136,"line":179},[134,369,370],{"class":171},"::StoryFrame{story=\"story-id\" label=\"Label\" lightbox}\n",[134,372,373],{"class":136,"line":217},[134,374,375],{"class":171},"::\n",[134,377,378],{"class":136,"line":262},[134,379,370],{"class":171},[134,381,382],{"class":136,"line":317},[134,383,375],{"class":171},[134,385,387],{"class":136,"line":386},6,[134,388,389],{"class":171},":::\n",[225,391,392],{},"Attributes:",[394,395,396,407,416],"ul",{},[397,398,399,402,403,406],"li",{},[131,400,401],{},"cols"," (",[131,404,405],{},"string | number","): Column count; defaults to an even auto-fit row.",[397,408,409,402,412,415],{},[131,410,411],{},"gap",[131,413,414],{},"string","): CSS gap between the frames.",[397,417,418,402,421,424,425,428],{},[131,419,420],{},"align",[131,422,423],{},"'start' | 'center' | 'stretch'",", default ",[131,426,427],{},"'stretch'","): Vertical alignment of the frames in their row.",[225,430,431,432,435],{},"Content: The ",[131,433,434],{},"::StoryFrame"," blocks.",[353,437,344],{"id":438},"storyframe",[124,440,442],{"className":287,"code":441,"language":289,"meta":129,"style":129},"::StoryFrame{story=\"story-id\" ratio=\"16\u002F9\" viewport=\"760\" label=\"Label\" lightbox}\n::\n",[131,443,444,449],{"__ignoreMap":129},[134,445,446],{"class":136,"line":137},[134,447,448],{"class":171},"::StoryFrame{story=\"story-id\" ratio=\"16\u002F9\" viewport=\"760\" label=\"Label\" lightbox}\n",[134,450,451],{"class":136,"line":179},[134,452,375],{"class":171},[225,454,392],{},[394,456,457,467,478,487,503,546,554,565,577,585,594,601,611],{},[397,458,459,402,461,463,464,466],{},[131,460,275],{},[131,462,414],{},"): Storybook story id (",[131,465,326],{},").",[397,468,469,402,472,474,475,477],{},[131,470,471],{},"src",[131,473,414],{},"): Explicit URL, used when ",[131,476,275],{}," is absent.",[397,479,480,402,483,486],{},[131,481,482],{},"type",[131,484,485],{},"'iframe' | 'image'","): Kind of media; without it, a story or an address is a page, and an address that ends with an image extension an image.",[397,488,489,402,492,424,495,498,499,502],{},[131,490,491],{},"fit",[131,493,494],{},"'cover' | 'contain'",[131,496,497],{},"'cover'","): CSS ",[131,500,501],{},"object-fit"," of an image in the frame.",[397,504,505,402,508,510,511,514,515,518,519,522,523,526,527,530,531,534,535,538,539,542,543,545],{},[131,506,507],{},"ratio",[131,509,414],{},"): Aspect ratio: a name (",[131,512,513],{},"desktop"," 16\u002F10, ",[131,516,517],{},"wide"," 16\u002F9, ",[131,520,521],{},"classic"," 4\u002F3, ",[131,524,525],{},"photo"," 3\u002F2, ",[131,528,529],{},"square",", ",[131,532,533],{},"mobile"," 9\u002F16, ",[131,536,537],{},"portrait"," 3\u002F4) or a ratio such as ",[131,540,541],{},"16\u002F9",". Without it, the frame is ",[131,544,517],{}," outside a gallery.",[397,547,548,402,551,553],{},[131,549,550],{},"viewport",[131,552,405],{},"): Logical width (px) the iframe renders at before scaling; a higher value shows more of the page.",[397,555,556,402,559,561,562,564],{},[131,557,558],{},"previewWidth",[131,560,405],{},"): Another name of ",[131,563,550],{},", read in the existing presentations.",[397,566,567,402,570,424,573,576],{},[131,568,569],{},"raw",[131,571,572],{},"boolean",[131,574,575],{},"false","): Renders the frame at its native size, without scaling.",[397,578,579,402,582,584],{},[131,580,581],{},"label",[131,583,414],{},"): Caption under the frame; overrides the default slot.",[397,586,587,402,589,424,591,593],{},[131,588,330],{},[131,590,572],{},[131,592,575],{},"): Opens the screen full-screen on click.",[397,595,596,402,598,600],{},[131,597,244],{},[131,599,414],{},"): Accessible title of the frame, or the text alternative of an image.",[397,602,603,402,606,424,608,610],{},[131,604,605],{},"grow",[131,607,572],{},[131,609,575],{},"): Lets the frame grow to fill the available height, in a gallery.",[397,612,613,402,616,618],{},[131,614,615],{},"hint",[131,617,414],{},"): Incentive text shown beside the frame to invite interaction.",[225,620,621],{},"Content: The caption under the frame, in markdown.",[266,623,625],{"id":624},"frozen-decks","Frozen decks",[225,627,628,631],{},[131,629,630],{},"@vignettes\u002Ffreeze"," copies a built Storybook into the bundle and rewrites the embeds to point at that copy, so a frozen deck renders its stories from the bundle.",[633,634,635],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":129,"searchDepth":179,"depth":179,"links":637},[638,639,643],{"id":268,"depth":179,"text":269},{"id":334,"depth":179,"text":335,"children":640},[641,642],{"id":355,"depth":217,"text":340},{"id":438,"depth":217,"text":344},{"id":624,"depth":179,"text":625},"Embeds a live Storybook story in a slide. The slide loads the story from the published Storybook, and shows the component as that Storybook renders it when the deck opens.","md",{},{"title":104},{"title":104,"description":644},"Y8TCpqLETHVgokVEGlNyP8mHLirVD8rvx6sIIkxAZtM",[651,653],{"title":100,"path":101,"stem":102,"description":652,"children":-1},"Deck components that explain a system on a slide: pictogram steps linked by arrows, diagrams whose cards sit on a grid or are ranked automatically, and a file read beside the description of what it holds.",{"title":108,"path":109,"stem":110,"description":654,"children":-1},"A theme is a directory with a theme.json manifest, an SCSS entry and an optional assets\u002F folder. The build compiles each theme to public\u002Fthemes\u002F\u003Cname>.css, copies its assets to public\u002Fthemes\u002F\u003Cname>\u002F, and generates the runtime registry from the manifests. public\u002Fthemes\u002F is a build output; pnpm dev and pnpm build produce it.",1793478541370]