@birdapi/velinstyle 1.1.0 → 1.2.0

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 (308) hide show
  1. package/README.de.md +87 -162
  2. package/README.md +188 -119
  3. package/cli/blueprint.js +98 -5
  4. package/cli/blueprints/app-chrome.html +18 -0
  5. package/cli/blueprints/benefits-grid.html +9 -0
  6. package/cli/blueprints/bottom-nav-mobile.html +2 -1
  7. package/cli/blueprints/cookie-consent.html +1 -1
  8. package/cli/blueprints/cta-band.html +6 -0
  9. package/cli/blueprints/faq-section.html +18 -0
  10. package/cli/blueprints/filter-bar.html +4 -4
  11. package/cli/blueprints/form-contact.html +6 -5
  12. package/cli/blueprints/hero-section.html +3 -3
  13. package/cli/blueprints/notification-center.html +1 -1
  14. package/cli/blueprints/onboarding.html +2 -1
  15. package/cli/blueprints/ops-console.html +29 -0
  16. package/cli/blueprints/pricing-band.html +37 -0
  17. package/cli/blueprints/process-steps.html +10 -0
  18. package/cli/blueprints/services-grid.html +9 -0
  19. package/cli/blueprints/settings-panel.html +8 -6
  20. package/cli/blueprints/split-hero.html +25 -0
  21. package/cli/blueprints/testimonials.html +8 -0
  22. package/cli/blueprints/trust-bar.html +10 -0
  23. package/cli/cli-manifest.json +81 -17
  24. package/cli/contrast-utils.js +97 -0
  25. package/cli/create.js +370 -0
  26. package/cli/docgen/extract-attributes.js +126 -10
  27. package/cli/docgen/extract-cli.js +3 -2
  28. package/cli/docgen/extract-components.js +61 -2
  29. package/cli/docgen/extract-utilities.js +10 -10
  30. package/cli/doctor.js +119 -0
  31. package/cli/index.js +531 -44
  32. package/cli/meta.js +84 -1
  33. package/cli/perf-audit.js +15 -2
  34. package/cli/prompt-engine.js +243 -0
  35. package/cli/review.js +268 -0
  36. package/cli/scaffold.js +119 -4
  37. package/cli/scanner-rules-data.js +7 -0
  38. package/cli/scanner.js +357 -4
  39. package/cli/serve.js +81 -0
  40. package/cli/skills.js +223 -0
  41. package/cli/wc-api.js +89 -0
  42. package/cli/workflow.js +42 -0
  43. package/components/index.js +2 -0
  44. package/components/runtime/component-loaders.js +2 -0
  45. package/components/velin-accordion.js +62 -13
  46. package/components/velin-bottom-nav.js +10 -0
  47. package/components/velin-calendar.js +212 -0
  48. package/components/velin-command.js +18 -2
  49. package/components/velin-data-table.js +78 -1
  50. package/components/velin-dialog.js +4 -1
  51. package/components/velin-drawer.js +2 -4
  52. package/components/velin-file-dropzone.js +162 -0
  53. package/components/velin-icon.js +22 -1
  54. package/components/velin-lightbox.js +5 -3
  55. package/components/velin-modal.js +2 -4
  56. package/components/velin-search.js +1 -1
  57. package/components/velin-sheet.js +2 -4
  58. package/core/a11y/component-contracts.json +20 -3
  59. package/core/meta/build.js +125 -5
  60. package/core/meta/design-constraints/contact.json +9 -0
  61. package/core/meta/design-constraints/faq.json +9 -0
  62. package/core/meta/design-constraints/hero.json +13 -0
  63. package/core/meta/knowledge/components.json +622 -0
  64. package/core/meta/knowledge/tokens.json +282 -0
  65. package/core/meta/pages/registry.json +294 -0
  66. package/core/meta/schema.js +3 -1
  67. package/core/meta/sections/registry.json +185 -0
  68. package/dist/chunks/{attributes-STYCS3O5.js → attributes-A423NX5J.js} +3 -3
  69. package/dist/chunks/{attributes-353XDOAX.js → attributes-F6UPIEVP.js} +1 -1
  70. package/dist/chunks/{attributes-ADOKLKA7.js → attributes-GLYXGGAL.js} +3 -3
  71. package/dist/chunks/{attributes-TPANLMLF.js → attributes-UFTYOSAU.js} +3 -3
  72. package/dist/chunks/attributes-XGLXLR2T.js +391 -0
  73. package/dist/chunks/attributes-YF4NI2QS.js +391 -0
  74. package/dist/chunks/browser-AUABBYUK.js +1544 -0
  75. package/dist/chunks/{chunk-RSMRR27R.js → chunk-2LSKX57P.js} +12 -10
  76. package/dist/chunks/{chunk-IEHKRARD.js → chunk-2TGCVDUL.js} +11 -9
  77. package/dist/chunks/{chunk-SRL6EWHP.js → chunk-5JWGUAPC.js} +17 -13
  78. package/dist/chunks/chunk-7YSO2OQ2.js +113 -0
  79. package/dist/chunks/{chunk-QVHYL3R4.js → chunk-BHR3ZG6U.js} +6 -6
  80. package/dist/chunks/{chunk-J472ERN2.js → chunk-JMSIHEYX.js} +15 -4
  81. package/dist/chunks/{chunk-MKZP2TBH.js → chunk-L7ZGUU4D.js} +2 -2
  82. package/dist/chunks/chunk-TUGIPKW5.js +113 -0
  83. package/dist/chunks/{highlight-GJHHV4KM.js → highlight-M2ELQNYK.js} +1 -1
  84. package/dist/chunks/runtime-entry.js +1 -1
  85. package/dist/chunks/{velin-accordion-FBIPAEXG.js → velin-accordion-WSY6BMLA.js} +64 -10
  86. package/dist/chunks/{velin-bottom-nav-7GEMPIM6.js → velin-bottom-nav-5RVRNGIP.js} +25 -0
  87. package/dist/chunks/{velin-bottom-nav-N3DFQR66.js → velin-bottom-nav-N5F4UO2I.js} +26 -1
  88. package/dist/chunks/velin-calendar-OFE6THUD.js +210 -0
  89. package/dist/chunks/velin-calendar-PGVNJTXK.js +217 -0
  90. package/dist/chunks/velin-calendar-XC7JRDSH.js +217 -0
  91. package/dist/chunks/{velin-code-block-CIAURDRJ.js → velin-code-block-ZGWG7JI5.js} +1 -1
  92. package/dist/chunks/{velin-combobox-NXS4QB4R.js → velin-combobox-56V2ZWT5.js} +1 -1
  93. package/dist/chunks/{velin-command-ONKO2A3J.js → velin-command-2HO2EKR6.js} +29 -2
  94. package/dist/chunks/{velin-command-TMLSRGIU.js → velin-command-ZJSLPK7B.js} +30 -3
  95. package/dist/chunks/{velin-copy-NYDBOKXT.js → velin-copy-XDQSV2XU.js} +1 -1
  96. package/dist/chunks/{velin-countdown-4ZVDGK4R.js → velin-countdown-V4Z5MA63.js} +1 -1
  97. package/dist/chunks/velin-data-table-UVR42UUM.js +372 -0
  98. package/dist/chunks/{velin-dialog-GTTZI564.js → velin-dialog-3YK2RPRV.js} +9 -2
  99. package/dist/chunks/{velin-dialog-ELFOZIXZ.js → velin-dialog-S24KAP4S.js} +3 -1
  100. package/dist/chunks/{velin-drawer-BE6TYN3H.js → velin-drawer-5PNU624J.js} +2 -4
  101. package/dist/chunks/{velin-drawer-DLL2GLT6.js → velin-drawer-CCM6S25D.js} +3 -5
  102. package/dist/chunks/{velin-email-RBX6ZR4S.js → velin-email-TNFONXPW.js} +1 -1
  103. package/dist/chunks/velin-file-dropzone-QRGF2JNA.js +154 -0
  104. package/dist/chunks/velin-file-dropzone-XIZMJ3NB.js +154 -0
  105. package/dist/chunks/{velin-icon-7M76DOPB.js → velin-icon-A6NCXGUK.js} +59 -17
  106. package/dist/chunks/{velin-icon-ZTSKUOVN.js → velin-icon-EC4B5XCM.js} +18 -5
  107. package/dist/chunks/{velin-lightbox-6E7CAATP.js → velin-lightbox-FFK4TUUP.js} +7 -6
  108. package/dist/chunks/{velin-lightbox-NXA3U2FM.js → velin-lightbox-P725FLTY.js} +5 -4
  109. package/dist/chunks/{velin-menubar-J66JXRWW.js → velin-menubar-6I2LM5HL.js} +1 -1
  110. package/dist/chunks/{velin-modal-5HYNNNUI.js → velin-modal-ICTMGRSU.js} +7 -8
  111. package/dist/chunks/{velin-modal-AEOTZ67O.js → velin-modal-JBNODH7D.js} +2 -4
  112. package/dist/chunks/{velin-popover-T72HK3DF.js → velin-popover-WZG2GHBL.js} +25 -4
  113. package/dist/chunks/{velin-rating-N4DI2XNL.js → velin-rating-QBBYRRBU.js} +1 -1
  114. package/dist/chunks/{velin-search-7B4KJ6TX.js → velin-search-B3L6J2RP.js} +2 -2
  115. package/dist/chunks/{velin-search-2XRQFBCS.js → velin-search-L3UG6NDQ.js} +5 -4
  116. package/dist/chunks/{velin-secure-field-6PV7RZDJ.js → velin-secure-field-DGYMP7OK.js} +1 -1
  117. package/dist/chunks/{velin-segmented-control-GYD5BIXQ.js → velin-segmented-control-P74GJPAR.js} +1 -1
  118. package/dist/chunks/{velin-sheet-R2Y67X6H.js → velin-sheet-M5GZZD7G.js} +2 -4
  119. package/dist/chunks/{velin-sheet-OUK6572T.js → velin-sheet-X7RXIWKV.js} +3 -5
  120. package/dist/chunks/{velin-stepper-X54WGHDG.js → velin-stepper-4YQJUHPC.js} +12 -5
  121. package/dist/chunks/{velin-toast-OMMOA2DK.js → velin-toast-UG5LWTG2.js} +5 -1
  122. package/dist/chunks/{velin-tooltip-BDHGRTQB.js → velin-tooltip-ZDH5SDLU.js} +1 -1
  123. package/dist/llms.txt +29 -7
  124. package/dist/search-index.json +156 -10
  125. package/dist/velin-agent.json +3973 -28
  126. package/dist/velinstyle-components.iife.js +1211 -284
  127. package/dist/velinstyle-components.js +1213 -284
  128. package/dist/velinstyle-components.min.js +266 -118
  129. package/dist/velinstyle.css +252 -67
  130. package/dist/velinstyle.d.ts +2 -0
  131. package/dist/velinstyle.min.css +1 -1
  132. package/package.json +20 -6
  133. package/packages/skill-engine/README.md +24 -0
  134. package/packages/skill-engine/package.json +7 -0
  135. package/packages/skill-engine/src/catalog.js +29 -0
  136. package/packages/skill-engine/src/index.js +5 -0
  137. package/packages/skill-engine/src/install.js +69 -0
  138. package/packages/skill-engine/src/registry.js +27 -0
  139. package/packages/skill-engine/src/resolve.js +68 -0
  140. package/packages/skill-engine/src/validate.js +40 -0
  141. package/packages/velinstyle-skills/README.md +6 -0
  142. package/packages/velinstyle-skills/adapter.json +8 -0
  143. package/packages/velinstyle-skills/bundles/landing-starter.bundle.yaml +12 -0
  144. package/packages/velinstyle-skills/bundles/review-suite.bundle.yaml +11 -0
  145. package/packages/velinstyle-skills/catalog.json +1004 -0
  146. package/packages/velinstyle-skills/graphs/component-ship.graph.yaml +14 -0
  147. package/packages/velinstyle-skills/graphs/landingpage.graph.yaml +21 -0
  148. package/packages/velinstyle-skills/graphs/release-gate.graph.yaml +15 -0
  149. package/packages/velinstyle-skills/index.js +22 -0
  150. package/packages/velinstyle-skills/package.json +7 -0
  151. package/packages/velinstyle-skills/packs/accessibility.pack.yaml +9 -0
  152. package/packages/velinstyle-skills/packs/design.pack.yaml +10 -0
  153. package/packages/velinstyle-skills/packs/documentation.pack.yaml +8 -0
  154. package/packages/velinstyle-skills/packs/enterprise.pack.yaml +10 -0
  155. package/packages/velinstyle-skills/packs/frontend.pack.yaml +10 -0
  156. package/packages/velinstyle-skills/packs/review.pack.yaml +9 -0
  157. package/packages/velinstyle-skills/projects/admin-panel.project.yaml +12 -0
  158. package/packages/velinstyle-skills/projects/blog.project.yaml +11 -0
  159. package/packages/velinstyle-skills/projects/documentation-portal.project.yaml +13 -0
  160. package/packages/velinstyle-skills/projects/ecommerce-shop.project.yaml +12 -0
  161. package/packages/velinstyle-skills/projects/landing-page.project.yaml +12 -0
  162. package/packages/velinstyle-skills/projects/laravel-dashboard.project.yaml +12 -0
  163. package/packages/velinstyle-skills/projects/marketing-website.project.yaml +14 -0
  164. package/packages/velinstyle-skills/projects/portfolio.project.yaml +12 -0
  165. package/packages/velinstyle-skills/registry.json +142 -0
  166. package/packages/velinstyle-skills/scripts/generate-assets.mjs +163 -0
  167. package/packages/velinstyle-skills/skills/velin-a11y-focus-keyboard/SKILL.md +57 -0
  168. package/packages/velinstyle-skills/skills/velin-a11y-page-checklist/SKILL.md +57 -0
  169. package/packages/velinstyle-skills/skills/velin-a11y-scan-fix/SKILL.md +57 -0
  170. package/packages/velinstyle-skills/skills/velin-ai-agent-briefing/SKILL.md +57 -0
  171. package/packages/velinstyle-skills/skills/velin-ai-plan-scaffold-review/SKILL.md +57 -0
  172. package/packages/velinstyle-skills/skills/velin-ai-skill-authoring/SKILL.md +57 -0
  173. package/packages/velinstyle-skills/skills/velin-components-accessibility-map/SKILL.md +57 -0
  174. package/packages/velinstyle-skills/skills/velin-components-api-contract/SKILL.md +57 -0
  175. package/packages/velinstyle-skills/skills/velin-components-recipe/SKILL.md +57 -0
  176. package/packages/velinstyle-skills/skills/velin-components-select-compose/SKILL.md +57 -0
  177. package/packages/velinstyle-skills/skills/velin-design-hero-compose/SKILL.md +57 -0
  178. package/packages/velinstyle-skills/skills/velin-design-section-rhythm/SKILL.md +57 -0
  179. package/packages/velinstyle-skills/skills/velin-design-surface-roles/SKILL.md +57 -0
  180. package/packages/velinstyle-skills/skills/velin-dev-component-wire/SKILL.md +57 -0
  181. package/packages/velinstyle-skills/skills/velin-dev-page-scaffold/SKILL.md +57 -0
  182. package/packages/velinstyle-skills/skills/velin-dev-plan-first/SKILL.md +57 -0
  183. package/packages/velinstyle-skills/skills/velin-docs-component-guide/SKILL.md +57 -0
  184. package/packages/velinstyle-skills/skills/velin-docs-generate-api/SKILL.md +57 -0
  185. package/packages/velinstyle-skills/skills/velin-dx-doctor-setup/SKILL.md +57 -0
  186. package/packages/velinstyle-skills/skills/velin-dx-project-init/SKILL.md +57 -0
  187. package/packages/velinstyle-skills/skills/velin-migration-legacy-wc/SKILL.md +57 -0
  188. package/packages/velinstyle-skills/skills/velin-migration-prefix-classes/SKILL.md +57 -0
  189. package/packages/velinstyle-skills/skills/velin-motion-reduced-safe/SKILL.md +57 -0
  190. package/packages/velinstyle-skills/skills/velin-motion-reveal-feedback/SKILL.md +57 -0
  191. package/packages/velinstyle-skills/skills/velin-perf-audit-fix/SKILL.md +57 -0
  192. package/packages/velinstyle-skills/skills/velin-perf-runtime-tree-shake/SKILL.md +57 -0
  193. package/packages/velinstyle-skills/skills/velin-release-changelog-sync/SKILL.md +57 -0
  194. package/packages/velinstyle-skills/skills/velin-release-meta-rebuild/SKILL.md +57 -0
  195. package/packages/velinstyle-skills/skills/velin-review-conversion-hero/SKILL.md +57 -0
  196. package/packages/velinstyle-skills/skills/velin-review-page-gate/SKILL.md +57 -0
  197. package/packages/velinstyle-skills/skills/velin-review-seo-meta/SKILL.md +57 -0
  198. package/packages/velinstyle-skills/skills/velin-security-sanitize-html/SKILL.md +57 -0
  199. package/packages/velinstyle-skills/skills/velin-security-scan-pii/SKILL.md +57 -0
  200. package/packages/velinstyle-skills/skills/velin-testing-a11y-suite/SKILL.md +57 -0
  201. package/packages/velinstyle-skills/skills/velin-testing-visual-smoke/SKILL.md +57 -0
  202. package/packages/velinstyle-skills/skills/velin-themes-apply-token/SKILL.md +57 -0
  203. package/packages/velinstyle-skills/skills/velin-themes-contrast-check/SKILL.md +57 -0
  204. package/packages/velinstyle-skills/skills/velin-utilities-layout-apply/SKILL.md +57 -0
  205. package/packages/velinstyle-skills/skills/velin-utilities-prefix-fix/SKILL.md +57 -0
  206. package/packages/velinstyle-skills/skills/velin-utilities-token-map/SKILL.md +57 -0
  207. package/packages/velinstyle-skills/templates/admin-panel.template.yaml +12 -0
  208. package/packages/velinstyle-skills/templates/blog.template.yaml +12 -0
  209. package/packages/velinstyle-skills/templates/documentation-portal.template.yaml +12 -0
  210. package/packages/velinstyle-skills/templates/ecommerce-shop.template.yaml +13 -0
  211. package/packages/velinstyle-skills/templates/landing-page.template.yaml +12 -0
  212. package/packages/velinstyle-skills/templates/laravel-dashboard.template.yaml +11 -0
  213. package/packages/velinstyle-skills/templates/marketing-website.template.yaml +13 -0
  214. package/packages/velinstyle-skills/templates/portfolio.template.yaml +12 -0
  215. package/schemas/component-knowledge.schema.json +33 -0
  216. package/schemas/design-constraint.schema.json +15 -0
  217. package/schemas/design-intelligence.schema.json +19 -0
  218. package/schemas/design-rule.schema.json +19 -0
  219. package/schemas/page-template.schema.json +24 -0
  220. package/schemas/review-report.schema.json +36 -0
  221. package/schemas/section.schema.json +22 -0
  222. package/schemas/skill-bundle.schema.json +15 -0
  223. package/schemas/skill-graph.schema.json +25 -0
  224. package/schemas/skill-pack.schema.json +14 -0
  225. package/schemas/skill-project.schema.json +16 -0
  226. package/schemas/skill-record.schema.json +27 -0
  227. package/schemas/skill-registry.schema.json +17 -0
  228. package/schemas/skill-template.schema.json +17 -0
  229. package/schemas/token-graph.schema.json +27 -0
  230. package/schemas/utility.schema.json +166 -0
  231. package/src/components/alert.css +22 -1
  232. package/src/components/calendar-dropzone.css +5 -0
  233. package/src/layout/app-shell.css +33 -0
  234. package/src/tokens/shadow.css +13 -0
  235. package/src/utilities/border.css +2 -0
  236. package/src/utilities/display.css +1 -24
  237. package/src/utilities/responsive.css +16 -1
  238. package/src/utilities/spacing.css +32 -0
  239. package/src/velinstyle.css +2 -0
  240. package/dist/chunks/attributes-3BZLI7XF.js +0 -364
  241. package/dist/chunks/attributes-4N5JP4CG.js +0 -364
  242. package/dist/chunks/attributes-5Q2WXGRC.js +0 -374
  243. package/dist/chunks/attributes-AIR7SVLK.js +0 -364
  244. package/dist/chunks/attributes-BGRN5XZO.js +0 -364
  245. package/dist/chunks/attributes-BVSQAYLR.js +0 -364
  246. package/dist/chunks/attributes-CDYFUY7Y.js +0 -364
  247. package/dist/chunks/attributes-JMYJZBPE.js +0 -364
  248. package/dist/chunks/attributes-R5JY3X4O.js +0 -374
  249. package/dist/chunks/attributes-TNSPQTHX.js +0 -374
  250. package/dist/chunks/chunk-2354NEBP.js +0 -109
  251. package/dist/chunks/chunk-2VNA7G7S.js +0 -109
  252. package/dist/chunks/chunk-AQLRJSGG.js +0 -109
  253. package/dist/chunks/chunk-EWPSDMQT.js +0 -109
  254. package/dist/chunks/chunk-LA7264K4.js +0 -85
  255. package/dist/chunks/chunk-QTJJ3DPO.js +0 -109
  256. package/dist/chunks/chunk-RZQVWFHW.js +0 -109
  257. package/dist/chunks/chunk-U4XHMZ7D.js +0 -109
  258. package/dist/chunks/chunk-V5YIUA6G.js +0 -109
  259. package/dist/chunks/chunk-XIET2VSZ.js +0 -109
  260. package/dist/chunks/chunk-XYLJ2GCB.js +0 -205
  261. package/dist/chunks/chunk-ZPSPKUYD.js +0 -109
  262. package/dist/chunks/highlight-XTHRKBA3.js +0 -37
  263. package/dist/chunks/velin-bottom-nav-2N2TYWOF.js +0 -86
  264. package/dist/chunks/velin-carousel-Y5VCOABZ.js +0 -213
  265. package/dist/chunks/velin-code-block-ASUBTAQV.js +0 -119
  266. package/dist/chunks/velin-code-block-TSUKPY4C.js +0 -123
  267. package/dist/chunks/velin-code-block-Y6CM726Q.js +0 -119
  268. package/dist/chunks/velin-combobox-2KDTCQ7N.js +0 -155
  269. package/dist/chunks/velin-command-M7RNHUPR.js +0 -136
  270. package/dist/chunks/velin-copy-T5KDTDXP.js +0 -81
  271. package/dist/chunks/velin-countdown-5XSTN3BH.js +0 -101
  272. package/dist/chunks/velin-counter-ISCTEAHI.js +0 -118
  273. package/dist/chunks/velin-dialog-D2GUHSCD.js +0 -144
  274. package/dist/chunks/velin-dialog-IJLFDXAJ.js +0 -144
  275. package/dist/chunks/velin-dialog-TNS3WXMB.js +0 -144
  276. package/dist/chunks/velin-drawer-MJS6WCF7.js +0 -130
  277. package/dist/chunks/velin-email-N5B5ZYTE.js +0 -90
  278. package/dist/chunks/velin-icon-KZO3IEHG.js +0 -164
  279. package/dist/chunks/velin-lightbox-I75U6JF4.js +0 -140
  280. package/dist/chunks/velin-lightbox-QOTB4PRL.js +0 -140
  281. package/dist/chunks/velin-lightbox-UCD6N7HF.js +0 -140
  282. package/dist/chunks/velin-live-dot-XHUZCIDZ.js +0 -67
  283. package/dist/chunks/velin-menubar-SFEXJE56.js +0 -86
  284. package/dist/chunks/velin-modal-2HOBXE6F.js +0 -176
  285. package/dist/chunks/velin-modal-GLI2XZZB.js +0 -176
  286. package/dist/chunks/velin-popover-EXINRIGJ.js +0 -145
  287. package/dist/chunks/velin-popover-OXX7MRZ6.js +0 -145
  288. package/dist/chunks/velin-popover-YKCCROJG.js +0 -145
  289. package/dist/chunks/velin-rating-XRQJV4LO.js +0 -91
  290. package/dist/chunks/velin-scroll-top-F2FCZNYD.js +0 -58
  291. package/dist/chunks/velin-search-4YHJWYSS.js +0 -556
  292. package/dist/chunks/velin-search-LWHY23Q5.js +0 -474
  293. package/dist/chunks/velin-secure-field-H7FSBUJW.js +0 -95
  294. package/dist/chunks/velin-segmented-control-PQX6LKOJ.js +0 -109
  295. package/dist/chunks/velin-sheet-3OGI4HD7.js +0 -119
  296. package/dist/chunks/velin-sparkline-GVEANJVW.js +0 -184
  297. package/dist/chunks/velin-sparkline-KDA3GQAN.js +0 -162
  298. package/dist/chunks/velin-stepper-2ZIHLKGM.js +0 -141
  299. package/dist/chunks/velin-stepper-FYEUEWE6.js +0 -141
  300. package/dist/chunks/velin-stepper-wc-QU3KRVQR.js +0 -133
  301. package/dist/chunks/velin-theme-toggle-BNNS7WLV.js +0 -285
  302. package/dist/chunks/velin-theme-toggle-NO7V4TWI.js +0 -285
  303. package/dist/chunks/velin-theme-toggle-QELCJM2Q.js +0 -291
  304. package/dist/chunks/velin-toast-RCZ4CSUC.js +0 -109
  305. package/dist/chunks/velin-toast-WEUBTJG6.js +0 -109
  306. package/dist/chunks/velin-tooltip-664IOHZA.js +0 -112
  307. package/dist/chunks/velin-tooltip-wc-LXDVT6DE.js +0 -103
  308. package/dist/chunks/worker-client-R6DBYPFT.js +0 -46
package/cli/create.js ADDED
@@ -0,0 +1,370 @@
1
+ /**
2
+ * Opinionated scaffolds with validated VelinStyle classes only.
3
+ */
4
+ import { existsSync, mkdirSync, writeFileSync, copyFileSync, cpSync } from 'fs';
5
+ import { join, resolve } from 'path';
6
+ import { validateBlueprintHtml, loadKnownCssClasses } from './blueprint.js';
7
+
8
+ export const CREATE_KINDS = ['landing', 'dashboard', 'docs', 'auth'];
9
+
10
+ function bootScript(vendorPath, tags) {
11
+ const list = tags.map((t) => `'${t}'`).join(', ');
12
+ return ` <script type="module">
13
+ async function boot() {
14
+ try {
15
+ const { bootFromDOM } = await import('@birdapi/velinstyle/runtime');
16
+ await bootFromDOM(document, {
17
+ attributes: true,
18
+ tags: [${list}],
19
+ });
20
+ return;
21
+ } catch {
22
+ /* offline / vendor install — no package resolver */
23
+ }
24
+ await import('./${vendorPath}/velinstyle-components.min.js');
25
+ }
26
+ boot();
27
+ </script>`;
28
+ }
29
+
30
+ function head({ title, theme, vendorPath, intent, goals }) {
31
+ const sprite = `${vendorPath}/velin-icons.svg`;
32
+ const goalsJson = JSON.stringify(goals);
33
+ return `<!DOCTYPE html>
34
+ <html lang="en" data-velin-theme="${theme}" data-velin-reveal-auto>
35
+ <head>
36
+ <meta charset="UTF-8">
37
+ <meta name="viewport" content="width=device-width, initial-scale=1">
38
+ <meta name="velin-icon-sprite" content="${sprite}">
39
+ <title>${title}</title>
40
+ <link rel="stylesheet" href="${vendorPath}/velinstyle.min.css">
41
+ <link rel="stylesheet" href="${vendorPath}/themes/${theme}.min.css">
42
+ <script type="application/vnd.velinstyle.meta+json" id="velin-meta">
43
+ {
44
+ "version": "1.2.0",
45
+ "page": {
46
+ "intent": "${intent}",
47
+ "title": "${title}",
48
+ "goals": ${goalsJson}
49
+ }
50
+ }
51
+ </script>
52
+ </head>`;
53
+ }
54
+
55
+ function landingHtml({ theme, vendorPath }) {
56
+ return `${head({ title: 'VelinStyle landing', theme, vendorPath, intent: 'page:landing', goals: ['marketing-landing'] })}
57
+ <body>
58
+ <a class="velin-skip-link" href="#main">Skip to main content</a>
59
+ <header class="velin-container velin-flex velin-flex--justify-between velin-flex--items-center velin-flex--wrap velin-gap-3 velin-py-4" role="banner">
60
+ <a class="velin-text-lg velin-font-bold velin-no-underline velin-text-inherit" href="#hero">Brand</a>
61
+ <nav class="velin-flex velin-flex--gap-2 velin-flex--wrap" aria-label="Primary">
62
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#features">Features</a>
63
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#contact">Contact</a>
64
+ <a class="velin-btn velin-btn--primary velin-btn--sm" href="#contact">Get started</a>
65
+ </nav>
66
+ <velin-theme-toggle themes-base="${vendorPath}/themes/"></velin-theme-toggle>
67
+ </header>
68
+
69
+ <main id="main">
70
+ <section class="velin-container velin-py-10" id="hero" data-velin-section="hero" aria-labelledby="hero-title">
71
+ <h1 id="hero-title" class="velin-text-4xl velin-font-bold velin-mbe-4">Build accessible UIs faster</h1>
72
+ <p class="velin-text-lg velin-text-muted velin-mbe-6">Generated by <code>velinstyle create landing</code> — only classes that exist in VelinStyle CSS.</p>
73
+ <div class="velin-flex velin-flex--gap-3 velin-flex--wrap">
74
+ <a class="velin-btn velin-btn--primary" href="#contact">Primary CTA</a>
75
+ <a class="velin-btn velin-btn--outline" href="#features">Secondary</a>
76
+ </div>
77
+ </section>
78
+
79
+ <section class="velin-container velin-py-8" id="features" aria-labelledby="features-title">
80
+ <h2 id="features-title" class="velin-text-3xl velin-font-bold velin-mbe-6">Features</h2>
81
+ <div class="velin-grid velin-grid--auto-fit velin-gap-4">
82
+ <article class="velin-card"><div class="velin-card__body"><h3 class="velin-card__title">Tokens</h3><p class="velin-card__text">OKLCH themes</p></div></article>
83
+ <article class="velin-card"><div class="velin-card__body"><h3 class="velin-card__title">A11y</h3><p class="velin-card__text">Contracts + scanner</p></div></article>
84
+ <article class="velin-card"><div class="velin-card__body"><h3 class="velin-card__title">CLI</h3><p class="velin-card__text">plan · review · scan · check</p></div></article>
85
+ </div>
86
+ </section>
87
+
88
+ <section class="velin-container velin-py-8" id="contact" aria-labelledby="contact-title">
89
+ <h2 id="contact-title" class="velin-text-3xl velin-font-bold velin-mbe-4">Contact</h2>
90
+ <form class="velin-flex velin-flex--col velin-gap-3 velin-max-w-md" novalidate>
91
+ <velin-form-summary></velin-form-summary>
92
+ <label class="velin-flex velin-flex--col velin-gap-1" for="landing-email">
93
+ <span>Email</span>
94
+ <input id="landing-email" class="velin-input" type="email" name="email" required autocomplete="email">
95
+ </label>
96
+ <label class="velin-flex velin-flex--col velin-gap-1" for="landing-message">
97
+ <span>Message</span>
98
+ <textarea id="landing-message" class="velin-input" name="message" rows="4" required></textarea>
99
+ </label>
100
+ <button type="submit" class="velin-btn velin-btn--primary">Send</button>
101
+ </form>
102
+ </section>
103
+ </main>
104
+
105
+ <footer class="velin-container velin-py-6 velin-border-block-start velin-text-sm velin-text-muted" role="contentinfo">
106
+ <p>Built with VelinStyle · run <code>velinstyle serve</code> to preview</p>
107
+ </footer>
108
+
109
+ ${bootScript(vendorPath, ['velin-theme-toggle', 'velin-form-summary'])}
110
+ </body>
111
+ </html>
112
+ `;
113
+ }
114
+
115
+ function dashboardHtml({ theme, vendorPath }) {
116
+ const today = new Date().toISOString().slice(0, 10);
117
+ return `${head({ title: 'VelinStyle dashboard', theme, vendorPath, intent: 'page:dashboard', goals: ['admin-shell'] })}
118
+ <body>
119
+ <a class="velin-skip-link" href="#main">Skip to main content</a>
120
+ <div class="velin-app-shell">
121
+ <aside class="velin-app-shell__nav velin-p-4 velin-border-inline-end" aria-label="App">
122
+ <p class="velin-text-lg velin-font-bold velin-mbe-4">Console</p>
123
+ <nav class="velin-flex velin-flex--col velin-gap-2" aria-label="Sidebar">
124
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#main">Overview</a>
125
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#uploads">Uploads</a>
126
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#calendar">Calendar</a>
127
+ </nav>
128
+ <div class="velin-mbs-6" id="calendar">
129
+ <h2 class="velin-text-sm velin-font-bold velin-mbe-2">Calendar</h2>
130
+ <velin-calendar label="Pick a day" value="${today}"></velin-calendar>
131
+ </div>
132
+ </aside>
133
+ <div class="velin-app-shell__body">
134
+ <header class="velin-flex velin-flex--justify-between velin-flex--items-center velin-gap-3 velin-p-4 velin-border-block-end" role="banner">
135
+ <h1 class="velin-text-xl velin-font-bold">Operations</h1>
136
+ <velin-theme-toggle themes-base="${vendorPath}/themes/"></velin-theme-toggle>
137
+ </header>
138
+ <main id="main" class="velin-app-shell__content velin-p-6">
139
+ <p class="velin-text-muted velin-mbe-4">Generated by <code>velinstyle create dashboard</code>. Double-click a cell to edit.</p>
140
+ <label class="velin-flex velin-flex--col velin-gap-1 velin-mbe-3 velin-max-w-md" for="dash-filter">
141
+ <span>Filter rows</span>
142
+ <input id="dash-filter" class="velin-input" type="search" autocomplete="off">
143
+ </label>
144
+ <velin-data-table label="Team tasks" page-size="5" filter-input="#dash-filter" editable empty-text="No tasks">
145
+ <table>
146
+ <caption class="velin-sr-only">Team tasks</caption>
147
+ <thead>
148
+ <tr>
149
+ <th data-sort="text">Task</th>
150
+ <th data-sort="text">Owner</th>
151
+ <th data-sort="text">Status</th>
152
+ </tr>
153
+ </thead>
154
+ <tbody>
155
+ <tr><td data-editable>Ship trust gates</td><td data-editable>Ada</td><td data-editable>Done</td></tr>
156
+ <tr><td data-editable>Wire calendar</td><td data-editable>Lin</td><td data-editable>In review</td></tr>
157
+ <tr><td data-editable>Upload dropzone</td><td data-editable>Kai</td><td data-editable>Todo</td></tr>
158
+ <tr><td data-editable>Docs shell</td><td data-editable>Sam</td><td data-editable>Todo</td></tr>
159
+ <tr><td data-editable>Auth form</td><td data-editable>Rio</td><td data-editable>Done</td></tr>
160
+ <tr><td data-editable>SARIF check</td><td data-editable>Ada</td><td data-editable>Done</td></tr>
161
+ </tbody>
162
+ </table>
163
+ </velin-data-table>
164
+
165
+ <section class="velin-mbs-8" id="uploads" aria-labelledby="upload-title">
166
+ <h2 id="upload-title" class="velin-text-2xl velin-font-bold velin-mbe-3">Uploads</h2>
167
+ <velin-file-dropzone label="Project files" accept=".pdf,.png,.jpg,.csv" multiple></velin-file-dropzone>
168
+ </section>
169
+ </main>
170
+ </div>
171
+ </div>
172
+ ${bootScript(vendorPath, ['velin-theme-toggle', 'velin-data-table', 'velin-calendar', 'velin-file-dropzone'])}
173
+ </body>
174
+ </html>
175
+ `;
176
+ }
177
+
178
+ function docsHtml({ theme, vendorPath }) {
179
+ return `${head({ title: 'VelinStyle docs', theme, vendorPath, intent: 'page:docs', goals: ['docs-shell'] })}
180
+ <body>
181
+ <a class="velin-skip-link" href="#main">Skip to main content</a>
182
+ <header class="velin-container velin-flex velin-flex--justify-between velin-flex--items-center velin-py-4" role="banner">
183
+ <a class="velin-text-lg velin-font-bold velin-no-underline velin-text-inherit" href="#main">Docs</a>
184
+ <velin-theme-toggle themes-base="${vendorPath}/themes/"></velin-theme-toggle>
185
+ </header>
186
+ <div class="velin-container velin-flex velin-flex--wrap velin-gap-6 velin-py-6">
187
+ <nav class="velin-docs-nav velin-flex velin-flex--col velin-gap-2" aria-label="Docs">
188
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#intro">Introduction</a>
189
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#install">Install</a>
190
+ <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#check">Check gate</a>
191
+ </nav>
192
+ <aside class="velin-toc velin-text-sm velin-text-muted" aria-label="On this page">
193
+ <p class="velin-font-bold velin-mbe-2">On this page</p>
194
+ <ul class="velin-stack">
195
+ <li><a href="#intro">Introduction</a></li>
196
+ <li><a href="#install">Install</a></li>
197
+ <li><a href="#check">Check gate</a></li>
198
+ </ul>
199
+ </aside>
200
+ <main id="main" class="velin-docs-main">
201
+ <h1 id="intro" class="velin-text-3xl velin-font-bold velin-mbe-4">Introduction</h1>
202
+ <p class="velin-mbe-4">This docs shell is generated by <code>velinstyle create docs</code>. Use it for guides and API notes.</p>
203
+ <h2 id="install" class="velin-text-2xl velin-font-bold velin-mbe-3">Install</h2>
204
+ <velin-code-block language="bash">npm install @birdapi/velinstyle
205
+ npx velinstyle create docs ./docs-site</velin-code-block>
206
+ <h2 id="check" class="velin-text-2xl velin-font-bold velin-mbs-6 velin-mbe-3">Check gate</h2>
207
+ <p class="velin-mbe-3">Run the quality gate before you ship:</p>
208
+ <velin-code-block language="bash">npx velinstyle check . --json</velin-code-block>
209
+ </main>
210
+ </div>
211
+ ${bootScript(vendorPath, ['velin-theme-toggle', 'velin-code-block'])}
212
+ </body>
213
+ </html>
214
+ `;
215
+ }
216
+
217
+ function authHtml({ theme, vendorPath }) {
218
+ return `${head({ title: 'VelinStyle sign in', theme, vendorPath, intent: 'page:auth', goals: ['auth-login'] })}
219
+ <body>
220
+ <a class="velin-skip-link" href="#main">Skip to main content</a>
221
+ <main id="main" class="velin-container velin-py-10 velin-max-w-md">
222
+ <h1 class="velin-text-3xl velin-font-bold velin-mbe-2">Sign in</h1>
223
+ <p class="velin-text-muted velin-mbe-6">Generated by <code>velinstyle create auth</code>.</p>
224
+ <form class="velin-flex velin-flex--col velin-gap-3" novalidate>
225
+ <velin-form-summary></velin-form-summary>
226
+ <label class="velin-flex velin-flex--col velin-gap-1" for="auth-email">
227
+ <span>Email</span>
228
+ <input id="auth-email" class="velin-input" type="email" name="email" required autocomplete="username">
229
+ </label>
230
+ <label class="velin-flex velin-flex--col velin-gap-1" for="auth-password">
231
+ <span>Password</span>
232
+ <input id="auth-password" class="velin-input" type="password" name="password" required autocomplete="current-password">
233
+ </label>
234
+ <button type="submit" class="velin-btn velin-btn--primary">Continue</button>
235
+ </form>
236
+ <p class="velin-text-sm velin-text-muted velin-mbs-4"><a href="#">Forgot password</a></p>
237
+ </main>
238
+ ${bootScript(vendorPath, ['velin-form-summary'])}
239
+ </body>
240
+ </html>
241
+ `;
242
+ }
243
+
244
+ const HTML_BY_KIND = {
245
+ landing: landingHtml,
246
+ dashboard: dashboardHtml,
247
+ docs: docsHtml,
248
+ auth: authHtml,
249
+ };
250
+
251
+ function copyVendor(pkgRoot, destVendor) {
252
+ const dist = join(pkgRoot, 'dist');
253
+ if (!existsSync(join(dist, 'velinstyle.min.css'))) {
254
+ return { ok: false, missing: dist };
255
+ }
256
+ mkdirSync(destVendor, { recursive: true });
257
+ const files = ['velinstyle.min.css', 'velinstyle-components.min.js', 'velin-icons.svg'];
258
+ const copied = [];
259
+ for (const f of files) {
260
+ const src = join(dist, f);
261
+ if (existsSync(src)) {
262
+ copyFileSync(src, join(destVendor, f));
263
+ copied.push(f);
264
+ }
265
+ }
266
+ const themesSrc = join(dist, 'themes');
267
+ if (existsSync(themesSrc)) {
268
+ cpSync(themesSrc, join(destVendor, 'themes'), { recursive: true });
269
+ copied.push('themes/');
270
+ }
271
+ const docsSrc = join(pkgRoot, 'docs/generated/components');
272
+ const mini = [
273
+ 'velin-toast.md',
274
+ 'velin-data-table.md',
275
+ 'velin-calendar.md',
276
+ 'velin-file-dropzone.md',
277
+ 'velin-stepper.md',
278
+ 'velin-search.md',
279
+ 'velin-form-summary.md',
280
+ 'velin-theme-toggle.md',
281
+ 'velin-rating.md',
282
+ ];
283
+ if (existsSync(docsSrc)) {
284
+ const destDocs = join(destVendor, 'docs');
285
+ mkdirSync(destDocs, { recursive: true });
286
+ const indexLines = [
287
+ '# VelinStyle WC mini-docs (offline)',
288
+ '',
289
+ 'Copied with `velinstyle create`. Full set: framework `docs/generated/components/`.',
290
+ 'CLI: `velinstyle wc api <tag>` (e.g. `velin-toast`).',
291
+ '',
292
+ ];
293
+ for (const f of mini) {
294
+ const src = join(docsSrc, f);
295
+ if (existsSync(src)) {
296
+ copyFileSync(src, join(destDocs, f));
297
+ copied.push(`docs/${f}`);
298
+ indexLines.push(`- [${f.replace('.md', '')}](./${f})`);
299
+ }
300
+ }
301
+ writeFileSync(join(destDocs, 'README.md'), `${indexLines.join('\n')}\n`, 'utf-8');
302
+ copied.push('docs/README.md');
303
+ }
304
+ return { ok: copied.includes('velinstyle.min.css'), copied, destVendor };
305
+ }
306
+
307
+ /**
308
+ * @param {{ kind: string, dir: string, pkgRoot: string, theme?: string, copyAssets?: boolean }} opts
309
+ */
310
+ export function createProject(opts) {
311
+ const kind = opts.kind || 'landing';
312
+ if (!CREATE_KINDS.includes(kind)) {
313
+ return { ok: false, error: `Unknown create kind "${kind}". Use: ${CREATE_KINDS.join('|')}` };
314
+ }
315
+ const dir = resolve(opts.dir || kind);
316
+ const theme = opts.theme || (kind === 'dashboard' ? 'forest' : 'earth');
317
+ const vendorRel = 'vendor/velinstyle';
318
+ mkdirSync(dir, { recursive: true });
319
+
320
+ let vendorResult = null;
321
+ if (opts.copyAssets !== false) {
322
+ vendorResult = copyVendor(opts.pkgRoot, join(dir, vendorRel));
323
+ if (!vendorResult.ok) {
324
+ return {
325
+ ok: false,
326
+ error: `Framework dist/ not found at ${vendorResult.missing}. Build the framework or copy dist into ${vendorRel} manually.`,
327
+ };
328
+ }
329
+ }
330
+
331
+ let html = HTML_BY_KIND[kind]({ theme, vendorPath: vendorRel });
332
+ const check = validateBlueprintHtml(html, loadKnownCssClasses());
333
+ if (!check.ok) {
334
+ return { ok: false, error: `Scaffold emitted unknown classes: ${check.missing.join(', ')}` };
335
+ }
336
+
337
+ const indexPath = join(dir, 'index.html');
338
+ writeFileSync(indexPath, html, 'utf-8');
339
+
340
+ const readme = `# VelinStyle ${kind}
341
+
342
+ Created with \`velinstyle create ${kind}\`.
343
+
344
+ \`\`\`bash
345
+ velinstyle serve .
346
+ velinstyle check .
347
+ \`\`\`
348
+
349
+ Assets: \`${vendorRel}/\` · Theme: \`${theme}\`.
350
+ Offline WC notes: \`${vendorRel}/docs/\` · API: \`velinstyle wc api velin-toast\`.
351
+ Prefer \`import { bootFromDOM } from '@birdapi/velinstyle/runtime'\` in apps with the npm package.
352
+ `;
353
+ writeFileSync(join(dir, 'README.md'), readme, 'utf-8');
354
+
355
+ return {
356
+ ok: true,
357
+ kind,
358
+ dir,
359
+ indexPath,
360
+ vendor: join(dir, vendorRel),
361
+ vendorRel,
362
+ theme,
363
+ vendorCopied: vendorResult?.copied || [],
364
+ };
365
+ }
366
+
367
+ /** @deprecated use createProject({ kind: 'landing', ... }) */
368
+ export function createLanding(opts) {
369
+ return createProject({ ...opts, kind: 'landing' });
370
+ }
package/cli/docgen/extract-attributes.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { join } from 'path';
2
2
  import { listRegisteredAttributes } from '../../core/attributes/registry.js';
3
- import { banner, heading } from './markdown.js';
3
+ import { banner, heading, table } from './markdown.js';
4
4
 
5
5
  const ATTRIBUTE_DOCS = {
6
6
  'velin-modal': 'Opens a modal dialog (bridges to `<velin-modal>`).',
@@ -21,6 +21,7 @@ const ATTRIBUTE_DOCS = {
21
21
  'velin-hover': 'Hover lift/glow animation.',
22
22
  'velin-stagger': 'Stagger child animations (delay in ms).',
23
23
  'velin-scroll': 'Smooth scroll to anchor (`href="#id"`).',
24
+ 'velin-scroll-top': 'Inject / configure `<velin-scroll-top>` (empty or `threshold` px).',
24
25
  'velin-anchor': 'Scroll-margin for anchor targets.',
25
26
  'velin-lazy': 'Lazy-load images with optional skeleton.',
26
27
  'velin-skeleton': 'Skeleton placeholder (`text`, `avatar`, `image`, …).',
@@ -31,6 +32,102 @@ const ATTRIBUTE_DOCS = {
31
32
  'velin-highlight': 'Inline text mark (not syntax highlighting — use `velin-code` or `velinSyntax`).',
32
33
  };
33
34
 
35
+ /** Value | Meaning | Bridges to */
36
+ const ATTRIBUTE_VALUES = {
37
+ 'velin-modal': [
38
+ ['(empty / present)', 'Upgrade host to modal trigger / content bridge', '`<velin-modal>`'],
39
+ ],
40
+ 'velin-tabs': [
41
+ ['(empty / present)', 'Bridge host to tabs controller', '`<velin-tabs>`'],
42
+ ],
43
+ 'velin-accordion': [
44
+ ['(empty / present)', 'Bridge host to accordion', '`<velin-accordion>`'],
45
+ ],
46
+ 'velin-tooltip': [
47
+ ['(empty)', 'Use host `title` / text as tooltip', '`<velin-tooltip>`'],
48
+ ['`text`', 'Explicit tooltip label', '`<velin-tooltip>`'],
49
+ ],
50
+ 'velin-copy': [
51
+ ['(empty)', 'Copy host text content', '`<velin-copy>` / Clipboard API'],
52
+ ['`selector` / value', 'Copy from related node when provided by enhance', 'Clipboard API'],
53
+ ],
54
+ 'velin-counter': [
55
+ ['number', 'Target value to animate toward', '`<velin-counter>`'],
56
+ ],
57
+ 'velin-notify': [
58
+ ['message', 'Toast body text', '`<velin-toast>`'],
59
+ ],
60
+ 'velin-theme': [
61
+ ['`toggle`', 'Cycle light/dark (or theme picker behavior)', '`data-velin-theme`'],
62
+ ['`<name>`', 'Set named theme / scheme', '`data-velin-theme`'],
63
+ ],
64
+ 'velin-progress': [
65
+ ['`0`–`100`', 'Linear progress value', '`<velin-progress>`'],
66
+ ['`ring`', 'Use progress ring instead of bar', '`<velin-progress-ring>`'],
67
+ ],
68
+ 'velin-search': [
69
+ ['(empty / present)', 'Attach search UI / behavior', 'VelinSearch / `<velin-search>`'],
70
+ ],
71
+ 'velin-scroll-top': [
72
+ ['(empty)', 'Mount default scroll-top control', '`<velin-scroll-top>`'],
73
+ ['threshold px', 'Show after scroll distance', '`<velin-scroll-top>`'],
74
+ ],
75
+ 'velin-reveal': [
76
+ ['(empty / present)', 'Reveal when in view', 'Motion runtime'],
77
+ ],
78
+ 'velin-fade': [
79
+ ['(empty / present)', 'Fade in on scroll', 'Motion runtime'],
80
+ ],
81
+ 'velin-slide': [
82
+ ['`up`', 'Slide from below', 'Motion runtime'],
83
+ ['`down`', 'Slide from above', 'Motion runtime'],
84
+ ['`left` / `right`', 'Horizontal slide', 'Motion runtime'],
85
+ ],
86
+ 'velin-scale': [
87
+ ['(empty / present)', 'Scale in on scroll', 'Motion runtime'],
88
+ ],
89
+ 'velin-parallax': [
90
+ ['(empty)', 'Default parallax speed', 'Motion runtime'],
91
+ ['`slow`', 'Reduced parallax factor', 'Motion runtime'],
92
+ ],
93
+ 'velin-hover': [
94
+ ['(empty / present)', 'Hover lift / glow', 'Motion CSS'],
95
+ ],
96
+ 'velin-stagger': [
97
+ ['ms number', 'Stagger delay between children', 'Motion runtime'],
98
+ ],
99
+ 'velin-scroll': [
100
+ ['(empty / present)', 'Smooth-scroll using `href="#id"`', 'Scroll behavior'],
101
+ ],
102
+ 'velin-anchor': [
103
+ ['(empty / length)', 'Apply scroll-margin for in-page targets', 'CSS scroll-margin'],
104
+ ],
105
+ 'velin-lazy': [
106
+ ['(empty / present)', 'Lazy-load `<img>` (`loading="lazy"`)', 'Native lazy + optional skeleton'],
107
+ ],
108
+ 'velin-skeleton': [
109
+ ['`text`', 'Text-line placeholder', 'Skeleton CSS'],
110
+ ['`avatar`', 'Circular placeholder', 'Skeleton CSS'],
111
+ ['`image`', 'Media block placeholder', 'Skeleton CSS'],
112
+ ['`card` / other', 'Preset shapes when supported', 'Skeleton CSS'],
113
+ ],
114
+ 'velin-loading': [
115
+ ['(empty / present)', 'Busy / spinner state (`aria-busy`)', 'Loading CSS'],
116
+ ],
117
+ 'velin-grid': [
118
+ ['column count', 'Auto-fit grid columns', 'CSS grid'],
119
+ ],
120
+ 'velin-code': [
121
+ ['language id (`js`, `css`, …)', 'Syntax highlight + copy chrome', 'VelinHighlight / `<velin-code-block>`'],
122
+ ],
123
+ 'velin-quote': [
124
+ ['(empty / present)', 'Style host as blockquote', 'Quote CSS'],
125
+ ],
126
+ 'velin-highlight': [
127
+ ['(empty / present)', 'Inline mark emphasis', 'Mark CSS'],
128
+ ],
129
+ };
130
+
34
131
  const A11Y_NOTES = {
35
132
  'velin-reveal': 'Honors `prefers-reduced-motion`: content shown immediately without animation.',
36
133
  'velin-fade': 'Honors `prefers-reduced-motion`.',
@@ -44,12 +141,29 @@ const A11Y_NOTES = {
44
141
  'velin-loading': 'Sets `aria-busy`, `role="status"`, default `aria-label="Loading"`.',
45
142
  'velin-notify': 'Dispatches toast event; pair with `<velin-announcer>` or `initA11y()`.',
46
143
  'velin-lazy': 'Adds `loading="lazy"` on `<img>` only.',
144
+ 'velin-scroll-top': 'Ensure the control has an accessible name when rendered.',
145
+ 'velin-modal': 'Prefer the web component for focus trap / `velin-close`; attribute is a bridge.',
146
+ };
147
+
148
+ const EXAMPLES = {
149
+ 'velin-code': '<pre velin-code="js" language="js"><code>const x = 42;</code></pre>',
150
+ 'velin-scroll': '<a href="#section" velin-scroll>Jump to section</a>',
151
+ 'velin-slide': '<div velin-slide="up">…</div>',
152
+ 'velin-theme': '<button type="button" velin-theme="toggle">Theme</button>',
153
+ 'velin-progress': '<div velin-progress="42"></div>',
154
+ 'velin-skeleton': '<div velin-skeleton="text"></div>',
155
+ 'velin-scroll-top': '<body velin-scroll-top>',
156
+ 'velin-notify': '<button type="button" velin-notify="Saved">Notify</button>',
157
+ 'velin-stagger': '<ul velin-stagger="80">…</ul>',
158
+ 'velin-grid': '<div velin-grid="3">…</div>',
159
+ 'velin-parallax': '<div velin-parallax="slow">…</div>',
47
160
  };
48
161
 
49
162
  export function extractAttributes() {
50
163
  return listRegisteredAttributes().map((name) => ({
51
164
  name,
52
165
  description: ATTRIBUTE_DOCS[name] || 'Velin HTML attribute extension.',
166
+ values: ATTRIBUTE_VALUES[name] || [['(empty / present)', 'Enable the attribute behavior', 'Attribute registry']],
53
167
  }));
54
168
  }
55
169
 
@@ -57,14 +171,15 @@ export function renderAttribute(attr) {
57
171
  let md = banner('velinstyle docs generate');
58
172
  md += heading(1, attr.name);
59
173
  md += `\n${attr.description}\n\n`;
174
+
175
+ md += heading(2, 'Values');
176
+ md += table(
177
+ ['Value', 'Meaning', 'Bridges to'],
178
+ (attr.values || []).map((row) => row.map((cell) => cell)),
179
+ );
180
+
60
181
  md += '## Example\n\n```html\n';
61
- if (attr.name === 'velin-code') {
62
- md += '<pre velin-code="js" language="js"><code>const x = 42;</code></pre>\n';
63
- } else if (attr.name === 'velin-scroll') {
64
- md += '<a href="#section" velin-scroll>Jump to section</a>\n';
65
- } else {
66
- md += `<div ${attr.name}${attr.name === 'velin-slide' ? '="up"' : ''}>…</div>\n`;
67
- }
182
+ md += `${EXAMPLES[attr.name] || `<div ${attr.name}>…</div>`}\n`;
68
183
  md += '```\n';
69
184
  if (A11Y_NOTES[attr.name]) {
70
185
  md += '\n## Accessibility\n\n';
@@ -77,9 +192,10 @@ export function renderAttributesIndex(attrs) {
77
192
  let md = banner('velinstyle docs generate');
78
193
  md += heading(1, 'Velin HTML attributes');
79
194
  md += '\nDeclarative extensions interpreted by `bootAttributes()` / `bootFromDOM({ attributes: true })`.\n\n';
80
- md += '| Attribute | Description |\n| --- | --- |\n';
195
+ md += '| Attribute | Description | Values |\n| --- | --- | --- |\n';
81
196
  for (const a of attrs) {
82
- md += `| [\`${a.name}\`](./${a.name}.md) | ${a.description} |\n`;
197
+ const n = (a.values && a.values.length) || 0;
198
+ md += `| [\`${a.name}\`](./${a.name}.md) | ${a.description} | ${n} |\n`;
83
199
  }
84
200
  return md;
85
201
  }
package/cli/docgen/extract-cli.js CHANGED
@@ -7,8 +7,9 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
7
7
 
8
8
  /** Commands registered in cli/index.js switch */
9
9
  export const REGISTERED_COMMANDS = [
10
- 'init', 'build', 'themes', 'add', 'icons', 'blueprint', 'tokens',
11
- 'scan', 'prefix', 'scaffold', 'layout', 'perf', 'docs', 'meta',
10
+ 'init', 'build', 'themes', 'add', 'icons', 'blueprint', 'create', 'serve', 'doctor', 'check', 'tokens',
11
+ 'scan', 'prefix', 'scaffold', 'plan', 'review', 'layout', 'perf', 'docs', 'meta',
12
+ 'search', 'skills', 'workflow', 'wc',
12
13
  ];
13
14
 
14
15
  export function loadCliManifest() {
package/cli/docgen/extract-components.js CHANGED
@@ -111,11 +111,61 @@ export function extractComponents(componentsDir) {
111
111
  return sortByKey(items, 'tag');
112
112
  }
113
113
 
114
+ const MINIMAL_EXAMPLES = {
115
+ 'velin-copy': `<velin-copy value="npm i @birdapi/velinstyle" label="Copy"></velin-copy>
116
+ <!-- Shadow button is built-in. Prefer value= or text= (or data-source). Do not use data-velin-copy. -->`,
117
+ 'velin-tooltip': `<velin-tooltip content="Save draft">
118
+ <button type="button" class="velin-btn">Save</button>
119
+ </velin-tooltip>`,
120
+ 'velin-lightbox': `<velin-lightbox>
121
+ <a href="photo.jpg"><img src="photo-thumb.jpg" alt="Gallery photo"></a>
122
+ </velin-lightbox>`,
123
+ 'velin-icon': `<!-- Set <meta name="velin-icon-sprite" content="vendor/velinstyle/velin-icons.svg"> once -->
124
+ <velin-icon name="check" size="20" label="Done"></velin-icon>`,
125
+ 'velin-command': `<velin-command>
126
+ <input slot="input" type="search" class="velin-input" placeholder="Jump to…" aria-label="Command">
127
+ <button type="button" data-velin-command-item value="home">Home</button>
128
+ <button type="button" data-velin-command-item value="settings">Settings</button>
129
+ </velin-command>`,
130
+ 'velin-menubar': `<velin-menubar>
131
+ <button type="button" data-velin-menubar-trigger>File</button>
132
+ <div data-velin-menubar-panel hidden>
133
+ <button type="button" role="menuitem">New</button>
134
+ <button type="button" role="menuitem">Open</button>
135
+ </div>
136
+ </velin-menubar>`,
137
+ 'velin-form-summary': `<form novalidate>
138
+ <velin-form-summary></velin-form-summary>
139
+ <label class="velin-label" for="email">Email</label>
140
+ <input id="email" class="velin-input" type="email" required>
141
+ <button type="submit" class="velin-btn velin-btn--primary">Send</button>
142
+ </form>`,
143
+ 'velin-data-table': `<velin-data-table filter-input="#filter" page-size="5" label="Team">
144
+ <label class="velin-label" for="filter">Filter</label>
145
+ <input id="filter" class="velin-input" type="search">
146
+ <table>
147
+ <caption>Team</caption>
148
+ <thead><tr><th data-sort="text">Name</th><th data-sort="number">Score</th></tr></thead>
149
+ <tbody>
150
+ <tr><td>Ada</td><td data-sort-value="98">98</td></tr>
151
+ <tr><td>Grace</td><td data-sort-value="95">95</td></tr>
152
+ </tbody>
153
+ </table>
154
+ </velin-data-table>`,
155
+ };
156
+
114
157
  export function renderComponent(meta, contracts) {
115
158
  let md = banner(meta.file);
116
159
  md += heading(1, `<${meta.tag}>`);
117
160
  md += `\nSource: \`${meta.file}\`\n\n`;
118
161
 
162
+ const snippet = MINIMAL_EXAMPLES[meta.tag];
163
+ if (snippet) {
164
+ md += heading(2, 'Minimal working example');
165
+ md += 'Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed):\n\n';
166
+ md += '```html\n' + snippet.trim() + '\n```\n\n';
167
+ }
168
+
119
169
  if (meta.description) {
120
170
  md += heading(2, 'Description');
121
171
  md += `${meta.description}\n\n`;
@@ -129,10 +179,19 @@ export function renderComponent(meta, contracts) {
129
179
  if (meta.observedAttributes.length) {
130
180
  md += table(
131
181
  ['Attribute', 'Notes'],
132
- meta.observedAttributes.map((a) => [`\`${a}\``, 'Observed — triggers `attributeChangedCallback` when changed']),
182
+ meta.observedAttributes.map((a) => {
183
+ const required = contracts?.requiredAttributes?.includes(a) ? ' (required by a11y contract)' : '';
184
+ return [`\`${a}\``, `Observed — triggers \`attributeChangedCallback\` when changed${required}`];
185
+ }),
133
186
  );
134
187
  } else {
135
- md += '_No `observedAttributes` declared._\n\n';
188
+ md += '_No `observedAttributes` declared._ Author-facing configuration may still use slots, properties, or child markup — see **Slots** / **Public API** below.\n\n';
189
+ if (meta.slots.length) {
190
+ md += table(
191
+ ['Author surface', 'Notes'],
192
+ meta.slots.map((s) => [`slot \`${s}\``, 'Content projection (not an observed attribute)']),
193
+ );
194
+ }
136
195
  }
137
196
 
138
197
  md += heading(2, 'Events');