@supersoniks/concorde 5.0.5 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (282) hide show
  1. package/.claude/launch.json +15 -0
  2. package/.claude/vite.http.config.mjs +7 -0
  3. package/.taste-skill/after/desktop-fold.jpg +0 -0
  4. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  5. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  6. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  7. package/.taste-skill/after/mobile-fold.jpg +0 -0
  8. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  9. package/.taste-skill/after/report.json +4103 -0
  10. package/.taste-skill/after/tablet-fold.jpg +0 -0
  11. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  12. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  13. package/.taste-skill/before/desktop-fold.jpg +0 -0
  14. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  15. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  16. package/.taste-skill/before/mobile-fold.jpg +0 -0
  17. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  18. package/.taste-skill/before/report.json +2556 -0
  19. package/.taste-skill/before/tablet-fold.jpg +0 -0
  20. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  21. package/.taste-skill/direction.json +510 -0
  22. package/.taste-skill/notes.md +84 -0
  23. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  24. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  25. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  26. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  27. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  28. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  29. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  30. package/.taste-skill/prod/report.json +1973 -0
  31. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  32. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  33. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  34. package/.tmp-cem/custom-elements.json +13705 -0
  35. package/AUDIT.md +228 -0
  36. package/PLAN-AMELIORATION.md +220 -0
  37. package/build-infos.json +1 -1
  38. package/concorde-core.bundle.js +196 -196
  39. package/concorde-core.es.js +3854 -3572
  40. package/custom-elements-manifest.config.mjs +14 -0
  41. package/dist/concorde-core.bundle.js +196 -196
  42. package/dist/concorde-core.es.js +3854 -3572
  43. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  44. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  45. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  46. package/dist/img/archive/credits.json +28 -0
  47. package/docs/assets/index-Bb-_LRyY.js +12280 -0
  48. package/docs/index.html +1 -1
  49. package/index.html +27 -63
  50. package/package.json +44 -3
  51. package/public/img/archive/concorde-001-2cv.webp +0 -0
  52. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/public/img/archive/credits.json +28 -0
  55. package/scripts/generate-sdui-catalog.mjs +250 -0
  56. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  57. package/scripts/pre-build.mjs +15 -0
  58. package/src/core/components/functional/fetch/fetch.md +2 -2
  59. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  60. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  61. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  62. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  63. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  64. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  65. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  66. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  67. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  68. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  69. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  70. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  71. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  72. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  73. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  74. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  75. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  76. package/src/core/components/functional/sdui/sdui.md +122 -0
  77. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  78. package/src/core/components/functional/sdui/sdui.ts +442 -34
  79. package/src/core/components/functional/sdui/types.ts +49 -0
  80. package/src/core/components/ui/modal/modal.ts +14 -11
  81. package/src/docs/_getting-started/components.md +5 -0
  82. package/src/docs/_getting-started/theming.md +2 -2
  83. package/src/docs/code.ts +88 -75
  84. package/src/docs/components/docs-demo-sources.ts +16 -8
  85. package/src/docs/components/docs-lit-demo.ts +19 -37
  86. package/src/docs/docs.ts +5 -0
  87. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  88. package/src/docs/example/docs-provider-keys.ts +12 -0
  89. package/src/docs/header/header.ts +233 -69
  90. package/src/docs/home/catalog.ts +44 -0
  91. package/src/docs/home/home.ts +513 -0
  92. package/src/docs/home/mach-stage.ts +389 -0
  93. package/src/docs/layout.ts +3 -1
  94. package/src/docs/navigation/components-index.ts +56 -0
  95. package/src/docs/navigation/navigation.ts +240 -232
  96. package/src/docs/navigation/pager.ts +67 -0
  97. package/src/docs/navigation/toc.ts +98 -0
  98. package/src/docs/search/docs-search.json +330 -20
  99. package/src/docs/search/markdown-renderer.ts +11 -3
  100. package/src/docs/shiki/index.ts +109 -0
  101. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  102. package/src/docs/tailwind/css/base/theme.css +96 -0
  103. package/src/docs/tailwind/css/base/typography.css +4 -0
  104. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  105. package/src/docs/tailwind/css/docs/content.css +32 -0
  106. package/src/docs/tailwind/css/docs/page.css +10 -0
  107. package/src/docs/tailwind/css/docs.css +9 -0
  108. package/src/docs/tailwind/css/home/hero.css +210 -0
  109. package/src/docs/tailwind/css/home/motion.css +84 -0
  110. package/src/docs/tailwind/css/home/sections.css +416 -0
  111. package/src/docs/tailwind/css/tailwind.css +7 -185
  112. package/src/tsconfig.json +113 -2
  113. package/src/tsconfig.tsbuildinfo +1 -1
  114. package/tailwind.config.js +8 -4
  115. package/docs/assets/index-wVZpLVYW.js +0 -12122
  116. package/docs/crawl/core/components/functional/date/date.html +0 -190
  117. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  118. package/docs/crawl/core/components/functional/if/if.html +0 -27
  119. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  120. package/docs/crawl/core/components/functional/list/list.html +0 -70
  121. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  122. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  123. package/docs/crawl/core/components/functional/router/router.html +0 -106
  124. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  125. package/docs/crawl/core/components/functional/states/states.html +0 -66
  126. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  127. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  128. package/docs/crawl/core/components/functional/value/value.html +0 -51
  129. package/docs/crawl/core/components/ui/alert/alert.html +0 -211
  130. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
  131. package/docs/crawl/core/components/ui/badge/badge.html +0 -197
  132. package/docs/crawl/core/components/ui/button/button.html +0 -150
  133. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
  134. package/docs/crawl/core/components/ui/card/card.html +0 -253
  135. package/docs/crawl/core/components/ui/divider/divider.html +0 -144
  136. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  137. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
  138. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
  139. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
  140. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  141. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  142. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  143. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  144. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  145. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  146. package/docs/crawl/core/components/ui/group/group.html +0 -104
  147. package/docs/crawl/core/components/ui/icon/icon.html +0 -222
  148. package/docs/crawl/core/components/ui/image/image.html +0 -298
  149. package/docs/crawl/core/components/ui/link/link.html +0 -100
  150. package/docs/crawl/core/components/ui/loader/loader.html +0 -124
  151. package/docs/crawl/core/components/ui/menu/menu.html +0 -394
  152. package/docs/crawl/core/components/ui/modal/modal.html +0 -342
  153. package/docs/crawl/core/components/ui/pop/pop.html +0 -296
  154. package/docs/crawl/core/components/ui/progress/progress.html +0 -131
  155. package/docs/crawl/core/components/ui/table/table.html +0 -545
  156. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  157. package/docs/crawl/core/components/ui/toast/toast.html +0 -233
  158. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
  159. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  160. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  161. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  162. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
  163. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  164. package/docs/crawl/docs/_decorators/bind.html +0 -141
  165. package/docs/crawl/docs/_decorators/get.html +0 -149
  166. package/docs/crawl/docs/_decorators/handle.html +0 -165
  167. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  168. package/docs/crawl/docs/_decorators/patch.html +0 -78
  169. package/docs/crawl/docs/_decorators/post.html +0 -139
  170. package/docs/crawl/docs/_decorators/publish.html +0 -61
  171. package/docs/crawl/docs/_decorators/put.html +0 -78
  172. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  173. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  174. package/docs/crawl/docs/_directives/sub.html +0 -93
  175. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  176. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  177. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  178. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  179. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  180. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  181. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  182. package/docs/crawl/docs/_getting-started/start.html +0 -76
  183. package/docs/crawl/docs/_getting-started/theming.html +0 -333
  184. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  185. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  186. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  187. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  188. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  189. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  190. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  191. package/docs/crawl/hubs/decorators.html +0 -547
  192. package/docs/crawl/hubs/form-components.html +0 -381
  193. package/docs/crawl/hubs/remote-data.html +0 -452
  194. package/docs/crawl/index.html +0 -102
  195. package/docs/llms-full.txt +0 -7008
  196. package/docs/llms.txt +0 -97
  197. package/docs/sitemap.xml +0 -240
  198. package/docs/src/core/components/functional/date/date.md +0 -290
  199. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  200. package/docs/src/core/components/functional/if/if.md +0 -9
  201. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  202. package/docs/src/core/components/functional/list/list.md +0 -65
  203. package/docs/src/core/components/functional/mix/mix.md +0 -41
  204. package/docs/src/core/components/functional/queue/queue.md +0 -72
  205. package/docs/src/core/components/functional/router/router.md +0 -94
  206. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  207. package/docs/src/core/components/functional/sdui/example.json +0 -99
  208. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  209. package/docs/src/core/components/functional/states/states.md +0 -87
  210. package/docs/src/core/components/functional/submit/submit.md +0 -114
  211. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  212. package/docs/src/core/components/functional/value/value.md +0 -35
  213. package/docs/src/core/components/ui/alert/alert.md +0 -196
  214. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  215. package/docs/src/core/components/ui/badge/badge.md +0 -188
  216. package/docs/src/core/components/ui/button/button.md +0 -183
  217. package/docs/src/core/components/ui/captcha/captcha.md +0 -71
  218. package/docs/src/core/components/ui/card/card.md +0 -215
  219. package/docs/src/core/components/ui/divider/divider.md +0 -129
  220. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  221. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
  222. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
  223. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
  224. package/docs/src/core/components/ui/form/input/input.md +0 -142
  225. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  226. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  227. package/docs/src/core/components/ui/form/select/select.md +0 -71
  228. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  229. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  230. package/docs/src/core/components/ui/group/group.md +0 -75
  231. package/docs/src/core/components/ui/icon/icon.md +0 -214
  232. package/docs/src/core/components/ui/icon/icons.json +0 -1
  233. package/docs/src/core/components/ui/image/image.md +0 -233
  234. package/docs/src/core/components/ui/link/link.md +0 -81
  235. package/docs/src/core/components/ui/loader/loader.md +0 -112
  236. package/docs/src/core/components/ui/menu/menu.md +0 -370
  237. package/docs/src/core/components/ui/modal/modal.md +0 -235
  238. package/docs/src/core/components/ui/pop/pop.md +0 -294
  239. package/docs/src/core/components/ui/progress/progress.md +0 -109
  240. package/docs/src/core/components/ui/table/table.md +0 -431
  241. package/docs/src/core/components/ui/theme/theme.md +0 -122
  242. package/docs/src/core/components/ui/toast/toast.md +0 -216
  243. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
  244. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  245. package/docs/src/docs/_core-concept/overview.md +0 -57
  246. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  247. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
  248. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  249. package/docs/src/docs/_decorators/bind.md +0 -167
  250. package/docs/src/docs/_decorators/get.md +0 -162
  251. package/docs/src/docs/_decorators/handle.md +0 -175
  252. package/docs/src/docs/_decorators/on-assign.md +0 -390
  253. package/docs/src/docs/_decorators/patch.md +0 -70
  254. package/docs/src/docs/_decorators/post.md +0 -146
  255. package/docs/src/docs/_decorators/publish.md +0 -55
  256. package/docs/src/docs/_decorators/put.md +0 -70
  257. package/docs/src/docs/_decorators/subscribe.md +0 -100
  258. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  259. package/docs/src/docs/_directives/sub.md +0 -91
  260. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  261. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  262. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  263. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  264. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  265. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  266. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  267. package/docs/src/docs/_getting-started/start.md +0 -47
  268. package/docs/src/docs/_getting-started/theming.md +0 -253
  269. package/docs/src/docs/_misc/api-configuration.md +0 -81
  270. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  271. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  272. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  273. package/docs/src/docs/_misc/endpoint.md +0 -45
  274. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  275. package/docs/src/docs/_misc/html-integration.md +0 -15
  276. package/docs/src/docs/search/docs-search.json +0 -12242
  277. package/docs/src/tag-list.json +0 -1
  278. package/docs/src/tsconfig-model.json +0 -23
  279. package/docs/src/tsconfig.json +0 -1242
  280. package/src/docs/prism/index.ts +0 -6
  281. package/src/docs/prism/prism.css +0 -158
  282. package/src/docs/prism/prism.js +0 -1022
package/docs/crawl/docs/_getting-started/ai-agents.html DELETED
@@ -1,173 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html" data-doc-id="docs/_getting-started/ai-agents">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI agents (skills &amp; AGENTS.md) — Concorde</title>
7
- <meta name="description" content="Concorde ships skills, rules, and a root AGENTS.md so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migratio">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/ai-agents, ai-agents, AI agents (skills &amp; AGENTS.md), guide, AGENTS.md, yarn ai:sync, ai-init, yarn add @supersoniks/concorde, |
9
- | Concorde repo (contributors) | , --skip-agents, --merge-agents, --force-agents">
10
- <meta name="concorde-doc-id" content="docs/_getting-started/ai-agents">
11
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html">
12
- </head>
13
- <body>
14
- <header>
15
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/ai-agents.md/ai-agents" rel="nofollow">interactive version</a></p>
16
- </header>
17
- <main>
18
- <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — AI agents (skills &amp; AGENTS.md)</strong>. Concorde ships skills, rules, and a root AGENTS.md so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migratio <span>Doc ID: <code>docs/_getting-started/ai-agents</code>. Keywords: Concorde, supersoniks, docs/_getting-started/ai-agents, ai-agents, AI agents (skills &amp; AGENTS.md), guide, AGENTS.md, yarn ai:sync, ai-init, yarn add @supersoniks/concorde, |
20
- | Concorde repo (contributors) | , --skip-agents, --merge-agents, --force-agents. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html</a>.</span></p>
21
- <h1 id="ai-agents-skills--agentsmd">AI agents (skills &amp; AGENTS.md)</h1>
22
- <p>Concorde ships <strong>skills</strong>, <strong>rules</strong>, and a root <strong><code>AGENTS.md</code></strong> so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migrations).</p>
23
- <p>On a <a href="./concorde-outside.html#concorde-outside">starter</a> project, run <code>yarn ai:sync</code> after install. On a <a href="./concorde-manual-install.html#concorde-manual-install">manual / brownfield</a> project, install Concorde first, then use <code>ai-init</code> below.</p>
24
- <h2 id="dedicated-commands">Dedicated commands</h2>
25
- <table>
26
- <thead>
27
- <tr>
28
- <th>Context</th>
29
- <th>Command</th>
30
- </tr>
31
- </thead>
32
- <tbody><tr>
33
- <td><a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a> project</td>
34
- <td><code>yarn ai:sync</code></td>
35
- </tr>
36
- <tr>
37
- <td>Any consumer app (after <code>yarn add @supersoniks/concorde</code>)</td>
38
- <td><code>node node_modules/@supersoniks/concorde/scripts/ai-init.mjs</code></td>
39
- </tr>
40
- <tr>
41
- <td>Concorde repo (contributors)</td>
42
- <td><code>yarn ai-init</code></td>
43
- </tr>
44
- </tbody></table>
45
- <pre><code class="language-shell"># Starter (from project root)
46
- yarn ai:sync
47
-
48
- # Manual / existing project
49
- node node_modules/@supersoniks/concorde/scripts/ai-init.mjs
50
- </code></pre>
51
- <h2 id="useful-flags">Useful flags</h2>
52
- <table>
53
- <thead>
54
- <tr>
55
- <th>Flag</th>
56
- <th>Effect</th>
57
- </tr>
58
- </thead>
59
- <tbody><tr>
60
- <td><code>--skip-agents</code></td>
61
- <td>Never write <code>AGENTS.md</code> (skills / rules only)</td>
62
- </tr>
63
- <tr>
64
- <td><code>--merge-agents</code></td>
65
- <td>Opt-in: keep the project preamble and append / refresh the Concorde block</td>
66
- </tr>
67
- <tr>
68
- <td><code>--force-agents</code></td>
69
- <td>Opt-in: <strong>replace</strong> the whole <code>AGENTS.md</code> (destructive)</td>
70
- </tr>
71
- <tr>
72
- <td><code>--overlay &lt;dir&gt;</code></td>
73
- <td>Extra rules/skills + optional <code>AGENTS.concorde.md</code> for project-only Concorde agent notes</td>
74
- </tr>
75
- <tr>
76
- <td><code>--cursor-only</code></td>
77
- <td>Install only <code>.cursor/skills</code> and <code>.cursor/rules</code></td>
78
- </tr>
79
- <tr>
80
- <td><code>--jetbrains-only</code></td>
81
- <td>Install only <code>.aiassistant/rules/</code></td>
82
- </tr>
83
- </tbody></table>
84
- <h2 id="agentsmd-policy-non-invasive"><code>AGENTS.md</code> policy (non-invasive)</h2>
85
- <table>
86
- <thead>
87
- <tr>
88
- <th>Situation</th>
89
- <th>Default</th>
90
- </tr>
91
- </thead>
92
- <tbody><tr>
93
- <td>No <code>AGENTS.md</code></td>
94
- <td>Create the Concorde guide</td>
95
- </tr>
96
- <tr>
97
- <td>File with <code>&lt;!-- concorde-ai --&gt;</code></td>
98
- <td>Refresh the managed zone only</td>
99
- </tr>
100
- <tr>
101
- <td>File <strong>without</strong> marker (project notes)</td>
102
- <td><strong>Left untouched</strong> — skills / rules are enough</td>
103
- </tr>
104
- <tr>
105
- <td><code>--merge-agents</code> / <code>--force-agents</code> / <code>--skip-agents</code></td>
106
- <td>See flags above</td>
107
- </tr>
108
- </tbody></table>
109
- <pre><code class="language-text">[optional project preamble — short, project-only]
110
- &lt;!-- concorde-ai --&gt;
111
- &lt;package ai/AGENTS.md&gt;
112
- [--- + overlay AGENTS.concorde.md]
113
- </code></pre>
114
- <p>Everything <strong>after</strong> <code>&lt;!-- concorde-ai --&gt;</code> is replaced on each <code>ai-init</code> run (idempotent). Do not paste a full copy of the Concorde guide above the marker — put project-specific notes in <code>AGENTS.concorde.md</code> (overlay). If the preamble duplicates package <code>AGENTS.md</code>, <code>ai-init</code> slims or drops it and prints a warning. Legacy filenames <code>AGENTS.overlay.md</code> / <code>AGENTS.starter.md</code> are still accepted with a deprecation warning.</p>
115
- <h2 id="what-gets-installed">What gets installed</h2>
116
- <table>
117
- <thead>
118
- <tr>
119
- <th>Path</th>
120
- <th>Role</th>
121
- </tr>
122
- </thead>
123
- <tbody><tr>
124
- <td><code>AGENTS.md</code></td>
125
- <td>Created only if missing; existing project-owned files are left alone unless <code>--merge-agents</code> / <code>--force-agents</code></td>
126
- </tr>
127
- <tr>
128
- <td><code>.cursor/skills/concorde/</code></td>
129
- <td>Core Lit + DataProvider patterns</td>
130
- </tr>
131
- <tr>
132
- <td><code>.cursor/skills/concorde-imports/</code></td>
133
- <td>Short <code>@supersoniks/concorde/…</code> import paths</td>
134
- </tr>
135
- <tr>
136
- <td><code>.cursor/skills/concorde-scope/</code></td>
137
- <td><code>serviceURL</code>, <code>formDataProvider</code>, API configuration</td>
138
- </tr>
139
- <tr>
140
- <td><code>.cursor/skills/concorde-theme/</code></td>
141
- <td><code>sonic-theme</code> and <code>--sc-*</code> tokens</td>
142
- </tr>
143
- <tr>
144
- <td><code>.cursor/skills/concorde-menu/</code></td>
145
- <td><code>sonic-menu</code> navigation</td>
146
- </tr>
147
- <tr>
148
- <td><code>.cursor/skills/concorde-get-set-dp/</code></td>
149
- <td><code>get</code> / <code>set</code> / <code>dp</code> and <code>DataProviderKey</code> migration</td>
150
- </tr>
151
- <tr>
152
- <td><code>.cursor/rules/concorde.mdc</code></td>
153
- <td>Cursor rules (always-on patterns)</td>
154
- </tr>
155
- <tr>
156
- <td><code>.aiassistant/rules/concorde.md</code></td>
157
- <td>JetBrains AI Assistant rules</td>
158
- </tr>
159
- </tbody></table>
160
- <h2 id="workflow">Workflow</h2>
161
- <ol>
162
- <li><strong>Starter project:</strong> <a href="./concorde-outside.html#concorde-outside">Installation</a> — <code>yarn ai:sync</code> is wired in the kit.</li>
163
- <li><strong>Existing / manual Vite project:</strong> <a href="./concorde-manual-install.html#concorde-manual-install">Manual installation</a>, then <strong><code>ai-init</code></strong> after <code>yarn add @supersoniks/concorde</code>.</li>
164
- <li>Commit <code>.cursor/</code> and <code>.aiassistant/</code> (and <code>AGENTS.md</code> only if you opted in / it was created) if your team shares agent settings.</li>
165
- <li>Re-run the same command when you bump <code>@supersoniks/concorde</code> to refresh skills from <code>node_modules/@supersoniks/concorde/ai/</code>.</li>
166
- <li>In Cursor, skills under <code>.cursor/skills/</code> are picked up automatically; mention a skill in chat for focused tasks (e.g. migration → <code>concorde-get-set-dp</code>).</li>
167
- </ol>
168
- <p>Source files in the npm package: <code>node_modules/@supersoniks/concorde/ai/</code> (see also <code>ai/README.md</code> in the <a href="https://github.com/supersoniks/concorde">Concorde repository</a>).</p>
169
-
170
- </article>
171
- </main>
172
- </body>
173
- </html>
package/docs/crawl/docs/_getting-started/concorde-manual-install.html DELETED
@@ -1,100 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html" data-doc-id="docs/_getting-started/concorde-manual-install">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Manual installation (Vite) — Concorde</title>
7
- <meta name="description" content="&gt; Legacy — for brownfield apps or custom stacks. New projects should use the starter.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes ,
9
- * , main.ts, my-element.ts">
10
- <meta name="concorde-doc-id" content="docs/_getting-started/concorde-manual-install">
11
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html">
12
- </head>
13
- <body>
14
- <header>
15
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-manual-install.md/concorde-manual-install" rel="nofollow">interactive version</a></p>
16
- </header>
17
- <main>
18
- <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Manual installation (Vite)</strong>. &gt; Legacy — for brownfield apps or custom stacks. New projects should use the starter. <span>Doc ID: <code>docs/_getting-started/concorde-manual-install</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes ,
20
- * , main.ts, my-element.ts. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html</a>.</span></p>
21
- <h1 id="manual-installation-vite">Manual installation (Vite)</h1>
22
- <blockquote>
23
- <p><strong>Legacy</strong> — for brownfield apps or custom stacks. New projects should use the <a href="./concorde-outside.html#concorde-outside">starter</a>.</p>
24
- </blockquote>
25
- <h2 id="brand-new-vite-project">Brand New Vite Project</h2>
26
- <p>Tailwind configuration is not covered here yet.</p>
27
- <h3 id="creating-the-project">Creating the Project</h3>
28
- <pre><code class="language-shell"># Pure JavaScript project
29
- yarn create vite --template vanilla-js
30
- # TypeScript project
31
- # (it is recommended to use this approach, which installs Lit separately if needed, via &quot;yarn add lit&quot;)
32
- yarn create vite --template vanilla-ts
33
- # TypeScript + Lit project
34
- # (creating new web components, for example, to extend the fetch or subscriber mixins)
35
- yarn create vite --template lit-ts
36
- </code></pre>
37
- <p>Using Lit with TypeScript requires the following configuration in the &quot;compilerOptions&quot; section of the <code>tsconfig.json</code> file:</p>
38
- <pre><code class="language-json">&quot;experimentalDecorators&quot;: true,
39
- &quot;useDefineForClassFields&quot;: false
40
- </code></pre>
41
- <h3 id="installing-concorde">Installing Concorde</h3>
42
- <p>Navigate to the project folder created and perform the installation:</p>
43
- <pre><code class="language-shell">yarn add @supersoniks/concorde
44
- </code></pre>
45
- <p>Agent skills (<code>AGENTS.md</code>, Cursor / JetBrains): see <a href="./ai-agents.html#ai-agents">AI agents</a> — run <code>node node_modules/@supersoniks/concorde/scripts/ai-init.mjs</code> after install.</p>
46
- <h3 id="development--build">Development / Build</h3>
47
- <pre><code class="language-shell"># Development (you can add `--host` after the command chain in package.json&#39;s dev script instead of typing it each time as shown below)
48
- yarn dev --host
49
- # Build
50
- yarn build
51
- </code></pre>
52
- <h2 id="shortcut-imports">Shortcut Imports</h2>
53
- <p>Shortcut imports work by default in JavaScript, but in TypeScript, they are activated by choice as they inject data into <em>tsconfig.json</em>. Here is the command:</p>
54
- <pre><code class="language-shell">npx concorde enable-short-paths
55
- </code></pre>
56
- <p>Shortcut imports replace the actual paths with aliases as follows:</p>
57
- <ul>
58
- <li><code>@supersoniks/concorde/core/components/functional_or_ui/component/component</code> becomes <code>@supersoniks/concorde/functional_or_ui/component</code></li>
59
- <li><code>@supersoniks/concorde/core/mixins_or_utils/class_name</code> becomes <code>@supersoniks/concorde/mixins_or_utils/class_name</code></li>
60
- </ul>
61
- <p>The original paths remain accessible. Shortcut imports are used for the examples later in this documentation.</p>
62
- <h2 id="usage">Usage</h2>
63
- <h3 id="simple-integration-in-html">Simple Integration in HTML</h3>
64
- <p>Import needed component in <code>main.ts</code> or wherever you want to use it:</p>
65
- <pre><code class="language-typescript">import &quot;@supersoniks/concorde/ui/button&quot;;
66
- </code></pre>
67
- <p>Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:</p>
68
- <pre><code>&lt;sonic-button variant=&quot;outline&quot;&gt;My button&lt;/sonic-button&gt;
69
- </code></pre>
70
- <h3 id="using-a-mixin-to-create-a-new-lit-component">Using a Mixin to Create a New Lit Component</h3>
71
- <p>For example, create a file <code>my-element.ts</code> at the root:</p>
72
- <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
73
- import { customElement, property } from &quot;lit/decorators.js&quot;;
74
- import Fetcher from &quot;@supersoniks/concorde/mixins/Fetcher&quot;;
75
- import Subscriber from &quot;@supersoniks/concorde/mixins/Subscriber&quot;;
76
-
77
- @customElement(&quot;my-element&quot;)
78
- export class SonicComponent extends Fetcher(Subscriber(LitElement)) {
79
- @property() email = &quot;&quot;;
80
- @property() first_name = &quot;&quot;;
81
- @property() last_name = &quot;&quot;;
82
-
83
- render() {
84
- return html`&lt;div&gt;
85
- ${this.first_name} ${this.last_name} : ${this.email}
86
- &lt;/div&gt;`;
87
- }
88
- }
89
- </code></pre>
90
- <p>Import component <code>main.ts</code> or <code>main.js</code> or any other component that uses it to be compiled</p>
91
- <pre><code class="language-typescript">import &quot;./my-element&quot;;
92
- </code></pre>
93
- <p>In the HTML of a JS or TS component or in the HTML of the web page containing the compiled JS:</p>
94
- <pre><code class="language-html">&lt;my-element serviceURL=&quot;/docs-mock-api&quot; dataProvider=&quot;api/users/2&quot; key=&quot;data&quot;&gt;&lt;/my-element&gt;
95
- </code></pre>
96
-
97
- </article>
98
- </main>
99
- </body>
100
- </html>
package/docs/crawl/docs/_getting-started/concorde-outside.html DELETED
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html" data-doc-id="docs/_getting-started/concorde-outside">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Installation — Concorde</title>
7
- <meta name="description" content="The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/concorde-outside">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-outside.md/concorde-outside" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Installation</strong>. The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started. <span>Doc ID: <code>docs/_getting-started/concorde-outside</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html</a>.</span></p>
19
- <h1 id="installation">Installation</h1>
20
- <sonic-alert status="info" label="Recommended — use the starter" background>
21
- <p>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a></p>
22
- <p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="./ai-agents.html#ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
23
- </sonic-alert>
24
-
25
- <h2 id="starter">Starter</h2>
26
- <p>The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.</p>
27
- <pre><code class="language-shell">npx @supersoniks/create-concorde-ts-starter &quot;project_name&quot;
28
- </code></pre>
29
- <p>Then, from the project folder:</p>
30
- <pre><code class="language-shell">yarn install
31
- yarn dev --host
32
- </code></pre>
33
- <h2 id="next-steps">Next steps</h2>
34
- <table>
35
- <thead>
36
- <tr>
37
- <th>Step</th>
38
- <th>Page</th>
39
- </tr>
40
- </thead>
41
- <tbody><tr>
42
- <td>Learn patterns</td>
43
- <td><a href="./my-first-component.html#my-first-component">My first component</a></td>
44
- </tr>
45
- <tr>
46
- <td>Agent skills</td>
47
- <td><a href="./ai-agents.html#ai-agents">AI agents (skills)</a> — <code>yarn ai:sync</code> on the starter</td>
48
- </tr>
49
- <tr>
50
- <td>Brownfield / manual Vite</td>
51
- <td><a href="./concorde-manual-install.html#concorde-manual-install">Legacy: Manual installation</a></td>
52
- </tr>
53
- </tbody></table>
54
-
55
- </article>
56
- </main>
57
- </body>
58
- </html>
package/docs/crawl/docs/_getting-started/create-a-component.html DELETED
@@ -1,111 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html" data-doc-id="docs/_getting-started/create-a-component">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Creating components — Concorde</title>
7
- <meta name="description" content="&gt; New app components: start with My first component and Data flow. The Subscriber mixin below is legacy.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/create-a-component, create-a-component, Creating components, guide, Subscriber, core, /components/destination/, /components/atoms, example.ts, ${this.text}">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/create-a-component">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/create-a-component.md/create-a-component" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Creating components</strong>. &gt; New app components: start with My first component and Data flow. The Subscriber mixin below is legacy. <span>Doc ID: <code>docs/_getting-started/create-a-component</code>. Keywords: Concorde, supersoniks, docs/_getting-started/create-a-component, create-a-component, Creating components, guide, Subscriber, core, /components/destination/, /components/atoms, example.ts, ${this.text}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html</a>.</span></p>
19
- <h1 id="creating-components">Creating components</h1>
20
- <blockquote>
21
- <p><strong>New app components:</strong> start with <a href="./my-first-component.html#my-first-component">My first component</a> and <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>. The <code>Subscriber</code> mixin below is <a href="../_core-concept/subscriber.html#subscriber">legacy</a>.</p>
22
- </blockquote>
23
- <h2 id="where-to-put-it">Where to put it?</h2>
24
- <p>In this document, we consider the src directory of the project as the root.<br>
25
- We describe how we organize our components as an example, however it depends on your project.</p>
26
- <p>In concorde each component is currently organized in the following directory structure (at least we try):</p>
27
- <ul>
28
- <li><strong>/core/components/functional/component-name/component-name.ts</strong><br>Generic/functional/generally unstyled component.
29
- The component usually doesn&#39;t use any other concrete components.</li>
30
- <li><strong>/core/components/ui/component-name/component-name.ts</strong><br>Generic but UI-oriented component.
31
- The component usually only uses generic components and other UI components.</li>
32
- <li><strong>la-billetterie/components/atoms/component-name/component-name.ts</strong><br>The component is intended to have a concrete usage within our ticketing system <strong>&quot;la-billetterie&quot;</strong>.
33
- It usually only uses generic components from <code>core</code> and possibly other atoms.</li>
34
- <li><strong>la-billetterie/components/concrete-destination/component-name/component-name.ts</strong><br>The component has a specific destination: (event / cart / gift card): <code>/components/destination/</code>
35
- The component uses various components, usually from the <code>/components/atoms</code> directory.
36
- It does not use components at the same level in the file hierarchy.</li>
37
- </ul>
38
- <h2 id="starting-from-a-simple-model">Starting from a Simple Model</h2>
39
- <p>You can copy <code>example.ts</code> from the source to the desired destination to start with.
40
- This file contains a web component in the form of a class that extends the <code>Subscriber</code> mixin, with a reactive property and a render function.</p>
41
- <pre><code class="language-javascript">import { html, LitElement } from &quot;lit&quot;;
42
- import { customElement, property } from &quot;lit/decorators.js&quot;;
43
- import Subscriber from &quot;@supersoniks/concorde/core/mixins/Subscriber&quot;;
44
-
45
- @customElement(&quot;sonic-example&quot;)
46
- export class SonicComponent extends Subscriber(LitElement) {
47
- @property() text = &quot;Example&quot;;
48
- render() {
49
- return html`${this.text}`;
50
- }
51
- }
52
- </code></pre>
53
- <p><strong>You can remove the dependency on <code>Subscriber</code></strong> if automatic population of the component with external data is not required.
54
- For example, for a UI component:</p>
55
- <pre><code class="language-javascript">import { html, LitElement } from &quot;lit&quot;;
56
- import { customElement, property } from &quot;lit/decorators.js&quot;;
57
-
58
- @customElement(&quot;sonic-example&quot;)
59
- export class SonicComponent extends LitElement {
60
- @property() text = &quot;Example&quot;;
61
- render() {
62
- return html`${this.text}`;
63
- }
64
- }
65
- </code></pre>
66
- <p>Regarding <code>Subscriber</code>, see:</p>
67
- <ul>
68
- <li><a href="../_core-concept/subscriber.html#subscriber">🔔 Subscriber</a></li>
69
- <li><a href="./pubsub.html#pubsub">🥨 Sharing Data</a></li>
70
- </ul>
71
- <h3 id="naming-the-component">Naming the Component</h3>
72
- <p>The class name is not necessarily important. However, it is important to <strong>give it a component name prefixed with &quot;sonic&quot;</strong> (or a prefix of your own) using the dedicated metadata already present in the copied document. For example, a button component would be named as follows:</p>
73
- <pre><code class="language-typescript">@customElement(&quot;sonic-button&quot;)
74
- </code></pre>
75
- <p>For less generic components with a specific destination, we advise to include the destination in the name.
76
- For example, for a &quot;title&quot; component in the &quot;event&quot; destination, the name would be simply:</p>
77
- <pre><code class="language-typescript">@customElement(&quot;sonic-event-title&quot;)
78
- </code></pre>
79
- <h2 id="modifying-it">Modifying It</h2>
80
- <h4 id="creating-reactive-properties-and-modifying-the-render-function">Creating Reactive Properties and Modifying the Render Function</h4>
81
- <p>To do this, study the functioning of <a href="https://lit.dev">https://lit.dev</a> and also refer to <a href="../_core-concept/subscriber.html#subscriber">Subscriber</a>.</p>
82
- <h4 id="html-structure-of-a-component">HTML Structure of a Component</h4>
83
- <p>The HTML structure of a component should remain as simple as possible.</p>
84
- <p>Ideally, there should be only one additional level of elements in addition to slots.</p>
85
- <ul>
86
- <li><strong>The main component is already a wrapper</strong>.
87
- It receives classes to manage its layout, but it should not style internal elements.</li>
88
- <li><strong>Slots handle the visual organization</strong> of elements.</li>
89
- <li><strong>The specificity of the component is expressed in this additional level</strong> by adding a list, a functional native element (e.g., button), or another component.</li>
90
- </ul>
91
- <p>This leads to the creation of more components and thus raises questions about the hierarchical organization of files. However, this tends to atomize their roles.</p>
92
- <h2 id="referencing-it">Referencing It</h2>
93
- <p>To compile the component, it needs to be referenced somewhere through an import statement. In particular, it is important to reference it in any component that uses it.</p>
94
- <p>In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of <strong>specific bundles</strong> in the future.</p>
95
- <p>Here&#39;s where we add imports based on the component&#39;s location inside concorde as an example</p>
96
- <ul>
97
- <li><strong>/core/components/functional/component-name/component-name.ts</strong><br>In <code>/core/components/functional/functional.ts</code>, which is referenced in core.ts and imported in <code>index.ts</code>.</li>
98
- <li><strong>/core/components/ui/component-name/component-name.ts</strong><br>In <code>/core/components/ui/ui.ts</code>, which is referenced in core.ts and imported in <code>index.ts</code>.</li>
99
- <li><strong>la-billetterie/components/atoms/component-name/component-name.ts</strong><br>Nowhere else but where it will be used, except for possible <strong>temporary</strong> tests, for example, in <code>index.ts</code>.</li>
100
- <li><strong>la-billetterie/components/concrete-destination/component-name/component-name.ts</strong><br>In <code>la-billetterie/components/concrete-destination/destination-concrete.ts</code>.
101
- If it&#39;s a new destination, you&#39;ll need to create the corresponding import .ts file and import it in <code>la-billetterie.ts</code>.</li>
102
- </ul>
103
- <h2 id="using-it">Using It</h2>
104
- <p>As a reminder, the component is simply integrated into the context by adding a tag with the component&#39;s name, for example:</p>
105
- <pre><code class="language-html">&lt;sonic-event-title&gt;&lt;/sonic-event-title&gt;
106
- </code></pre>
107
-
108
- </article>
109
- </main>
110
- </body>
111
- </html>