@birdapi/velinstyle 1.1.0 → 1.2.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 (328) hide show
  1. package/README.de.md +89 -161
  2. package/README.md +187 -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 +128 -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 +560 -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/transparency.js +221 -0
  42. package/cli/wc-api.js +89 -0
  43. package/cli/workflow.js +42 -0
  44. package/components/index.js +2 -0
  45. package/components/runtime/component-loaders.js +2 -0
  46. package/components/velin-accordion.js +62 -13
  47. package/components/velin-bottom-nav.js +10 -0
  48. package/components/velin-calendar.js +212 -0
  49. package/components/velin-command.js +18 -2
  50. package/components/velin-data-table.js +78 -1
  51. package/components/velin-dialog.js +4 -1
  52. package/components/velin-drawer.js +2 -4
  53. package/components/velin-file-dropzone.js +162 -0
  54. package/components/velin-icon.js +22 -1
  55. package/components/velin-lightbox.js +5 -3
  56. package/components/velin-modal.js +2 -4
  57. package/components/velin-search.js +1 -1
  58. package/components/velin-sheet.js +2 -4
  59. package/core/a11y/component-contracts.json +20 -3
  60. package/core/attributes/registry.js +14 -0
  61. package/core/meta/build.js +125 -5
  62. package/core/meta/design-constraints/contact.json +9 -0
  63. package/core/meta/design-constraints/faq.json +9 -0
  64. package/core/meta/design-constraints/hero.json +13 -0
  65. package/core/meta/knowledge/components.json +622 -0
  66. package/core/meta/knowledge/tokens.json +282 -0
  67. package/core/meta/pages/registry.json +294 -0
  68. package/core/meta/schema.js +13 -1
  69. package/core/meta/sections/registry.json +185 -0
  70. package/core/transparency/attach.js +74 -0
  71. package/core/transparency/claims.js +97 -0
  72. package/core/transparency/doctor.js +142 -0
  73. package/core/transparency/engine.js +75 -0
  74. package/core/transparency/export.js +98 -0
  75. package/core/transparency/index.js +30 -0
  76. package/core/transparency/migrate.js +130 -0
  77. package/core/transparency/normalize.js +125 -0
  78. package/core/transparency/policy.js +105 -0
  79. package/core/transparency/providers.js +235 -0
  80. package/core/transparency/registry.js +104 -0
  81. package/core/transparency/renderer.js +111 -0
  82. package/core/transparency/reporter.js +113 -0
  83. package/core/transparency/validator.js +112 -0
  84. package/dist/chunks/attach-H2ZSEAE6.js +365 -0
  85. package/dist/chunks/{attributes-STYCS3O5.js → attributes-A423NX5J.js} +3 -3
  86. package/dist/chunks/attributes-DZCXX2RZ.js +404 -0
  87. package/dist/chunks/{attributes-353XDOAX.js → attributes-F6UPIEVP.js} +1 -1
  88. package/dist/chunks/{attributes-ADOKLKA7.js → attributes-GLYXGGAL.js} +3 -3
  89. package/dist/chunks/{attributes-TPANLMLF.js → attributes-UFTYOSAU.js} +3 -3
  90. package/dist/chunks/attributes-XGLXLR2T.js +391 -0
  91. package/dist/chunks/attributes-YF4NI2QS.js +391 -0
  92. package/dist/chunks/browser-AUABBYUK.js +1544 -0
  93. package/dist/chunks/{chunk-RSMRR27R.js → chunk-2LSKX57P.js} +12 -10
  94. package/dist/chunks/{chunk-IEHKRARD.js → chunk-2TGCVDUL.js} +11 -9
  95. package/dist/chunks/{chunk-SRL6EWHP.js → chunk-5JWGUAPC.js} +17 -13
  96. package/dist/chunks/chunk-7YSO2OQ2.js +113 -0
  97. package/dist/chunks/{chunk-QVHYL3R4.js → chunk-BHR3ZG6U.js} +6 -6
  98. package/dist/chunks/chunk-CQMTCEI6.js +113 -0
  99. package/dist/chunks/{chunk-J472ERN2.js → chunk-JMSIHEYX.js} +15 -4
  100. package/dist/chunks/{chunk-MKZP2TBH.js → chunk-L7ZGUU4D.js} +2 -2
  101. package/dist/chunks/chunk-TUGIPKW5.js +113 -0
  102. package/dist/chunks/{highlight-GJHHV4KM.js → highlight-M2ELQNYK.js} +1 -1
  103. package/dist/chunks/runtime-entry.js +1 -1
  104. package/dist/chunks/{velin-accordion-FBIPAEXG.js → velin-accordion-WSY6BMLA.js} +64 -10
  105. package/dist/chunks/{velin-bottom-nav-7GEMPIM6.js → velin-bottom-nav-5RVRNGIP.js} +25 -0
  106. package/dist/chunks/{velin-bottom-nav-N3DFQR66.js → velin-bottom-nav-N5F4UO2I.js} +26 -1
  107. package/dist/chunks/velin-calendar-OFE6THUD.js +210 -0
  108. package/dist/chunks/velin-calendar-PGVNJTXK.js +217 -0
  109. package/dist/chunks/velin-calendar-XC7JRDSH.js +217 -0
  110. package/dist/chunks/{velin-code-block-CIAURDRJ.js → velin-code-block-ZGWG7JI5.js} +1 -1
  111. package/dist/chunks/{velin-combobox-NXS4QB4R.js → velin-combobox-56V2ZWT5.js} +1 -1
  112. package/dist/chunks/{velin-command-ONKO2A3J.js → velin-command-2HO2EKR6.js} +29 -2
  113. package/dist/chunks/{velin-command-TMLSRGIU.js → velin-command-ZJSLPK7B.js} +30 -3
  114. package/dist/chunks/{velin-copy-NYDBOKXT.js → velin-copy-XDQSV2XU.js} +1 -1
  115. package/dist/chunks/{velin-countdown-4ZVDGK4R.js → velin-countdown-V4Z5MA63.js} +1 -1
  116. package/dist/chunks/velin-data-table-UVR42UUM.js +372 -0
  117. package/dist/chunks/{velin-dialog-GTTZI564.js → velin-dialog-3YK2RPRV.js} +9 -2
  118. package/dist/chunks/{velin-dialog-ELFOZIXZ.js → velin-dialog-S24KAP4S.js} +3 -1
  119. package/dist/chunks/{velin-drawer-BE6TYN3H.js → velin-drawer-5PNU624J.js} +2 -4
  120. package/dist/chunks/{velin-drawer-DLL2GLT6.js → velin-drawer-CCM6S25D.js} +3 -5
  121. package/dist/chunks/{velin-email-RBX6ZR4S.js → velin-email-TNFONXPW.js} +1 -1
  122. package/dist/chunks/velin-file-dropzone-QRGF2JNA.js +154 -0
  123. package/dist/chunks/velin-file-dropzone-XIZMJ3NB.js +154 -0
  124. package/dist/chunks/{velin-icon-7M76DOPB.js → velin-icon-A6NCXGUK.js} +59 -17
  125. package/dist/chunks/{velin-icon-ZTSKUOVN.js → velin-icon-EC4B5XCM.js} +18 -5
  126. package/dist/chunks/{velin-lightbox-6E7CAATP.js → velin-lightbox-FFK4TUUP.js} +7 -6
  127. package/dist/chunks/{velin-lightbox-NXA3U2FM.js → velin-lightbox-P725FLTY.js} +5 -4
  128. package/dist/chunks/{velin-menubar-J66JXRWW.js → velin-menubar-6I2LM5HL.js} +1 -1
  129. package/dist/chunks/{velin-modal-5HYNNNUI.js → velin-modal-ICTMGRSU.js} +7 -8
  130. package/dist/chunks/{velin-modal-AEOTZ67O.js → velin-modal-JBNODH7D.js} +2 -4
  131. package/dist/chunks/{velin-popover-T72HK3DF.js → velin-popover-WZG2GHBL.js} +25 -4
  132. package/dist/chunks/{velin-rating-N4DI2XNL.js → velin-rating-QBBYRRBU.js} +1 -1
  133. package/dist/chunks/{velin-search-7B4KJ6TX.js → velin-search-B3L6J2RP.js} +2 -2
  134. package/dist/chunks/{velin-search-2XRQFBCS.js → velin-search-L3UG6NDQ.js} +5 -4
  135. package/dist/chunks/{velin-secure-field-6PV7RZDJ.js → velin-secure-field-DGYMP7OK.js} +1 -1
  136. package/dist/chunks/{velin-segmented-control-GYD5BIXQ.js → velin-segmented-control-P74GJPAR.js} +1 -1
  137. package/dist/chunks/{velin-sheet-R2Y67X6H.js → velin-sheet-M5GZZD7G.js} +2 -4
  138. package/dist/chunks/{velin-sheet-OUK6572T.js → velin-sheet-X7RXIWKV.js} +3 -5
  139. package/dist/chunks/{velin-stepper-X54WGHDG.js → velin-stepper-4YQJUHPC.js} +12 -5
  140. package/dist/chunks/{velin-toast-OMMOA2DK.js → velin-toast-UG5LWTG2.js} +5 -1
  141. package/dist/chunks/{velin-tooltip-BDHGRTQB.js → velin-tooltip-ZDH5SDLU.js} +1 -1
  142. package/dist/llms.txt +31 -8
  143. package/dist/search-index.json +182 -10
  144. package/dist/velin-agent.json +3980 -31
  145. package/dist/velinstyle-components.iife.js +1622 -286
  146. package/dist/velinstyle-components.js +1624 -286
  147. package/dist/velinstyle-components.min.js +262 -114
  148. package/dist/velinstyle.css +412 -67
  149. package/dist/velinstyle.d.ts +2 -0
  150. package/dist/velinstyle.min.css +1 -1
  151. package/package.json +21 -6
  152. package/packages/skill-engine/README.md +24 -0
  153. package/packages/skill-engine/package.json +7 -0
  154. package/packages/skill-engine/src/catalog.js +29 -0
  155. package/packages/skill-engine/src/index.js +5 -0
  156. package/packages/skill-engine/src/install.js +69 -0
  157. package/packages/skill-engine/src/registry.js +27 -0
  158. package/packages/skill-engine/src/resolve.js +68 -0
  159. package/packages/skill-engine/src/validate.js +40 -0
  160. package/packages/velinstyle-skills/README.md +6 -0
  161. package/packages/velinstyle-skills/adapter.json +8 -0
  162. package/packages/velinstyle-skills/bundles/landing-starter.bundle.yaml +12 -0
  163. package/packages/velinstyle-skills/bundles/review-suite.bundle.yaml +11 -0
  164. package/packages/velinstyle-skills/catalog.json +1004 -0
  165. package/packages/velinstyle-skills/graphs/component-ship.graph.yaml +14 -0
  166. package/packages/velinstyle-skills/graphs/landingpage.graph.yaml +21 -0
  167. package/packages/velinstyle-skills/graphs/release-gate.graph.yaml +15 -0
  168. package/packages/velinstyle-skills/index.js +22 -0
  169. package/packages/velinstyle-skills/package.json +7 -0
  170. package/packages/velinstyle-skills/packs/accessibility.pack.yaml +9 -0
  171. package/packages/velinstyle-skills/packs/design.pack.yaml +10 -0
  172. package/packages/velinstyle-skills/packs/documentation.pack.yaml +8 -0
  173. package/packages/velinstyle-skills/packs/enterprise.pack.yaml +10 -0
  174. package/packages/velinstyle-skills/packs/frontend.pack.yaml +10 -0
  175. package/packages/velinstyle-skills/packs/review.pack.yaml +9 -0
  176. package/packages/velinstyle-skills/projects/admin-panel.project.yaml +12 -0
  177. package/packages/velinstyle-skills/projects/blog.project.yaml +11 -0
  178. package/packages/velinstyle-skills/projects/documentation-portal.project.yaml +13 -0
  179. package/packages/velinstyle-skills/projects/ecommerce-shop.project.yaml +12 -0
  180. package/packages/velinstyle-skills/projects/landing-page.project.yaml +12 -0
  181. package/packages/velinstyle-skills/projects/laravel-dashboard.project.yaml +12 -0
  182. package/packages/velinstyle-skills/projects/marketing-website.project.yaml +14 -0
  183. package/packages/velinstyle-skills/projects/portfolio.project.yaml +12 -0
  184. package/packages/velinstyle-skills/registry.json +142 -0
  185. package/packages/velinstyle-skills/scripts/generate-assets.mjs +163 -0
  186. package/packages/velinstyle-skills/skills/velin-a11y-focus-keyboard/SKILL.md +57 -0
  187. package/packages/velinstyle-skills/skills/velin-a11y-page-checklist/SKILL.md +57 -0
  188. package/packages/velinstyle-skills/skills/velin-a11y-scan-fix/SKILL.md +57 -0
  189. package/packages/velinstyle-skills/skills/velin-ai-agent-briefing/SKILL.md +57 -0
  190. package/packages/velinstyle-skills/skills/velin-ai-plan-scaffold-review/SKILL.md +57 -0
  191. package/packages/velinstyle-skills/skills/velin-ai-skill-authoring/SKILL.md +57 -0
  192. package/packages/velinstyle-skills/skills/velin-components-accessibility-map/SKILL.md +57 -0
  193. package/packages/velinstyle-skills/skills/velin-components-api-contract/SKILL.md +57 -0
  194. package/packages/velinstyle-skills/skills/velin-components-recipe/SKILL.md +57 -0
  195. package/packages/velinstyle-skills/skills/velin-components-select-compose/SKILL.md +57 -0
  196. package/packages/velinstyle-skills/skills/velin-design-hero-compose/SKILL.md +57 -0
  197. package/packages/velinstyle-skills/skills/velin-design-section-rhythm/SKILL.md +57 -0
  198. package/packages/velinstyle-skills/skills/velin-design-surface-roles/SKILL.md +57 -0
  199. package/packages/velinstyle-skills/skills/velin-dev-component-wire/SKILL.md +57 -0
  200. package/packages/velinstyle-skills/skills/velin-dev-page-scaffold/SKILL.md +57 -0
  201. package/packages/velinstyle-skills/skills/velin-dev-plan-first/SKILL.md +57 -0
  202. package/packages/velinstyle-skills/skills/velin-docs-component-guide/SKILL.md +57 -0
  203. package/packages/velinstyle-skills/skills/velin-docs-generate-api/SKILL.md +57 -0
  204. package/packages/velinstyle-skills/skills/velin-dx-doctor-setup/SKILL.md +57 -0
  205. package/packages/velinstyle-skills/skills/velin-dx-project-init/SKILL.md +57 -0
  206. package/packages/velinstyle-skills/skills/velin-migration-legacy-wc/SKILL.md +57 -0
  207. package/packages/velinstyle-skills/skills/velin-migration-prefix-classes/SKILL.md +57 -0
  208. package/packages/velinstyle-skills/skills/velin-motion-reduced-safe/SKILL.md +57 -0
  209. package/packages/velinstyle-skills/skills/velin-motion-reveal-feedback/SKILL.md +57 -0
  210. package/packages/velinstyle-skills/skills/velin-perf-audit-fix/SKILL.md +57 -0
  211. package/packages/velinstyle-skills/skills/velin-perf-runtime-tree-shake/SKILL.md +57 -0
  212. package/packages/velinstyle-skills/skills/velin-release-changelog-sync/SKILL.md +57 -0
  213. package/packages/velinstyle-skills/skills/velin-release-meta-rebuild/SKILL.md +57 -0
  214. package/packages/velinstyle-skills/skills/velin-review-conversion-hero/SKILL.md +57 -0
  215. package/packages/velinstyle-skills/skills/velin-review-page-gate/SKILL.md +57 -0
  216. package/packages/velinstyle-skills/skills/velin-review-seo-meta/SKILL.md +57 -0
  217. package/packages/velinstyle-skills/skills/velin-security-sanitize-html/SKILL.md +57 -0
  218. package/packages/velinstyle-skills/skills/velin-security-scan-pii/SKILL.md +57 -0
  219. package/packages/velinstyle-skills/skills/velin-testing-a11y-suite/SKILL.md +57 -0
  220. package/packages/velinstyle-skills/skills/velin-testing-visual-smoke/SKILL.md +57 -0
  221. package/packages/velinstyle-skills/skills/velin-themes-apply-token/SKILL.md +57 -0
  222. package/packages/velinstyle-skills/skills/velin-themes-contrast-check/SKILL.md +57 -0
  223. package/packages/velinstyle-skills/skills/velin-utilities-layout-apply/SKILL.md +57 -0
  224. package/packages/velinstyle-skills/skills/velin-utilities-prefix-fix/SKILL.md +57 -0
  225. package/packages/velinstyle-skills/skills/velin-utilities-token-map/SKILL.md +57 -0
  226. package/packages/velinstyle-skills/templates/admin-panel.template.yaml +12 -0
  227. package/packages/velinstyle-skills/templates/blog.template.yaml +12 -0
  228. package/packages/velinstyle-skills/templates/documentation-portal.template.yaml +12 -0
  229. package/packages/velinstyle-skills/templates/ecommerce-shop.template.yaml +13 -0
  230. package/packages/velinstyle-skills/templates/landing-page.template.yaml +12 -0
  231. package/packages/velinstyle-skills/templates/laravel-dashboard.template.yaml +11 -0
  232. package/packages/velinstyle-skills/templates/marketing-website.template.yaml +13 -0
  233. package/packages/velinstyle-skills/templates/portfolio.template.yaml +12 -0
  234. package/schemas/component-knowledge.schema.json +33 -0
  235. package/schemas/design-constraint.schema.json +15 -0
  236. package/schemas/design-intelligence.schema.json +19 -0
  237. package/schemas/design-rule.schema.json +19 -0
  238. package/schemas/page-template.schema.json +24 -0
  239. package/schemas/review-report.schema.json +36 -0
  240. package/schemas/section.schema.json +22 -0
  241. package/schemas/skill-bundle.schema.json +15 -0
  242. package/schemas/skill-graph.schema.json +25 -0
  243. package/schemas/skill-pack.schema.json +14 -0
  244. package/schemas/skill-project.schema.json +16 -0
  245. package/schemas/skill-record.schema.json +27 -0
  246. package/schemas/skill-registry.schema.json +17 -0
  247. package/schemas/skill-template.schema.json +17 -0
  248. package/schemas/token-graph.schema.json +27 -0
  249. package/schemas/utility.schema.json +166 -0
  250. package/src/components/alert.css +22 -1
  251. package/src/components/calendar-dropzone.css +5 -0
  252. package/src/components/transparency.css +138 -0
  253. package/src/layout/app-shell.css +33 -0
  254. package/src/tokens/shadow.css +13 -0
  255. package/src/utilities/border.css +2 -0
  256. package/src/utilities/display.css +1 -24
  257. package/src/utilities/responsive.css +16 -1
  258. package/src/utilities/spacing.css +32 -0
  259. package/src/velinstyle.css +3 -0
  260. package/dist/chunks/attributes-3BZLI7XF.js +0 -364
  261. package/dist/chunks/attributes-4N5JP4CG.js +0 -364
  262. package/dist/chunks/attributes-5Q2WXGRC.js +0 -374
  263. package/dist/chunks/attributes-AIR7SVLK.js +0 -364
  264. package/dist/chunks/attributes-BGRN5XZO.js +0 -364
  265. package/dist/chunks/attributes-BVSQAYLR.js +0 -364
  266. package/dist/chunks/attributes-CDYFUY7Y.js +0 -364
  267. package/dist/chunks/attributes-JMYJZBPE.js +0 -364
  268. package/dist/chunks/attributes-R5JY3X4O.js +0 -374
  269. package/dist/chunks/attributes-TNSPQTHX.js +0 -374
  270. package/dist/chunks/chunk-2354NEBP.js +0 -109
  271. package/dist/chunks/chunk-2VNA7G7S.js +0 -109
  272. package/dist/chunks/chunk-AQLRJSGG.js +0 -109
  273. package/dist/chunks/chunk-EWPSDMQT.js +0 -109
  274. package/dist/chunks/chunk-LA7264K4.js +0 -85
  275. package/dist/chunks/chunk-QTJJ3DPO.js +0 -109
  276. package/dist/chunks/chunk-RZQVWFHW.js +0 -109
  277. package/dist/chunks/chunk-U4XHMZ7D.js +0 -109
  278. package/dist/chunks/chunk-V5YIUA6G.js +0 -109
  279. package/dist/chunks/chunk-XIET2VSZ.js +0 -109
  280. package/dist/chunks/chunk-XYLJ2GCB.js +0 -205
  281. package/dist/chunks/chunk-ZPSPKUYD.js +0 -109
  282. package/dist/chunks/highlight-XTHRKBA3.js +0 -37
  283. package/dist/chunks/velin-bottom-nav-2N2TYWOF.js +0 -86
  284. package/dist/chunks/velin-carousel-Y5VCOABZ.js +0 -213
  285. package/dist/chunks/velin-code-block-ASUBTAQV.js +0 -119
  286. package/dist/chunks/velin-code-block-TSUKPY4C.js +0 -123
  287. package/dist/chunks/velin-code-block-Y6CM726Q.js +0 -119
  288. package/dist/chunks/velin-combobox-2KDTCQ7N.js +0 -155
  289. package/dist/chunks/velin-command-M7RNHUPR.js +0 -136
  290. package/dist/chunks/velin-copy-T5KDTDXP.js +0 -81
  291. package/dist/chunks/velin-countdown-5XSTN3BH.js +0 -101
  292. package/dist/chunks/velin-counter-ISCTEAHI.js +0 -118
  293. package/dist/chunks/velin-dialog-D2GUHSCD.js +0 -144
  294. package/dist/chunks/velin-dialog-IJLFDXAJ.js +0 -144
  295. package/dist/chunks/velin-dialog-TNS3WXMB.js +0 -144
  296. package/dist/chunks/velin-drawer-MJS6WCF7.js +0 -130
  297. package/dist/chunks/velin-email-N5B5ZYTE.js +0 -90
  298. package/dist/chunks/velin-icon-KZO3IEHG.js +0 -164
  299. package/dist/chunks/velin-lightbox-I75U6JF4.js +0 -140
  300. package/dist/chunks/velin-lightbox-QOTB4PRL.js +0 -140
  301. package/dist/chunks/velin-lightbox-UCD6N7HF.js +0 -140
  302. package/dist/chunks/velin-live-dot-XHUZCIDZ.js +0 -67
  303. package/dist/chunks/velin-menubar-SFEXJE56.js +0 -86
  304. package/dist/chunks/velin-modal-2HOBXE6F.js +0 -176
  305. package/dist/chunks/velin-modal-GLI2XZZB.js +0 -176
  306. package/dist/chunks/velin-popover-EXINRIGJ.js +0 -145
  307. package/dist/chunks/velin-popover-OXX7MRZ6.js +0 -145
  308. package/dist/chunks/velin-popover-YKCCROJG.js +0 -145
  309. package/dist/chunks/velin-rating-XRQJV4LO.js +0 -91
  310. package/dist/chunks/velin-scroll-top-F2FCZNYD.js +0 -58
  311. package/dist/chunks/velin-search-4YHJWYSS.js +0 -556
  312. package/dist/chunks/velin-search-LWHY23Q5.js +0 -474
  313. package/dist/chunks/velin-secure-field-H7FSBUJW.js +0 -95
  314. package/dist/chunks/velin-segmented-control-PQX6LKOJ.js +0 -109
  315. package/dist/chunks/velin-sheet-3OGI4HD7.js +0 -119
  316. package/dist/chunks/velin-sparkline-GVEANJVW.js +0 -184
  317. package/dist/chunks/velin-sparkline-KDA3GQAN.js +0 -162
  318. package/dist/chunks/velin-stepper-2ZIHLKGM.js +0 -141
  319. package/dist/chunks/velin-stepper-FYEUEWE6.js +0 -141
  320. package/dist/chunks/velin-stepper-wc-QU3KRVQR.js +0 -133
  321. package/dist/chunks/velin-theme-toggle-BNNS7WLV.js +0 -285
  322. package/dist/chunks/velin-theme-toggle-NO7V4TWI.js +0 -285
  323. package/dist/chunks/velin-theme-toggle-QELCJM2Q.js +0 -291
  324. package/dist/chunks/velin-toast-RCZ4CSUC.js +0 -109
  325. package/dist/chunks/velin-toast-WEUBTJG6.js +0 -109
  326. package/dist/chunks/velin-tooltip-664IOHZA.js +0 -112
  327. package/dist/chunks/velin-tooltip-wc-LXDVT6DE.js +0 -103
  328. 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`, …).',
@@ -29,6 +30,104 @@ const ATTRIBUTE_DOCS = {
29
30
  'velin-code': 'Code block with copy button and VelinHighlight syntax colors (use `language` or `velin-code="js"`).',
30
31
  'velin-quote': 'Styled blockquote.',
31
32
  'velin-highlight': 'Inline text mark (not syntax highlighting — use `velin-code` or `velinSyntax`).',
33
+ 'velin-transparency': 'Velin Transparency Framework host — attaches disclosure + provenance mark (Renderer).',
34
+ 'velin-disclosure': 'Alias for `velin-transparency`.',
35
+ };
36
+
37
+ /** Value | Meaning | Bridges to */
38
+ const ATTRIBUTE_VALUES = {
39
+ 'velin-modal': [
40
+ ['(empty / present)', 'Upgrade host to modal trigger / content bridge', '`<velin-modal>`'],
41
+ ],
42
+ 'velin-tabs': [
43
+ ['(empty / present)', 'Bridge host to tabs controller', '`<velin-tabs>`'],
44
+ ],
45
+ 'velin-accordion': [
46
+ ['(empty / present)', 'Bridge host to accordion', '`<velin-accordion>`'],
47
+ ],
48
+ 'velin-tooltip': [
49
+ ['(empty)', 'Use host `title` / text as tooltip', '`<velin-tooltip>`'],
50
+ ['`text`', 'Explicit tooltip label', '`<velin-tooltip>`'],
51
+ ],
52
+ 'velin-copy': [
53
+ ['(empty)', 'Copy host text content', '`<velin-copy>` / Clipboard API'],
54
+ ['`selector` / value', 'Copy from related node when provided by enhance', 'Clipboard API'],
55
+ ],
56
+ 'velin-counter': [
57
+ ['number', 'Target value to animate toward', '`<velin-counter>`'],
58
+ ],
59
+ 'velin-notify': [
60
+ ['message', 'Toast body text', '`<velin-toast>`'],
61
+ ],
62
+ 'velin-theme': [
63
+ ['`toggle`', 'Cycle light/dark (or theme picker behavior)', '`data-velin-theme`'],
64
+ ['`<name>`', 'Set named theme / scheme', '`data-velin-theme`'],
65
+ ],
66
+ 'velin-progress': [
67
+ ['`0`–`100`', 'Linear progress value', '`<velin-progress>`'],
68
+ ['`ring`', 'Use progress ring instead of bar', '`<velin-progress-ring>`'],
69
+ ],
70
+ 'velin-search': [
71
+ ['(empty / present)', 'Attach search UI / behavior', 'VelinSearch / `<velin-search>`'],
72
+ ],
73
+ 'velin-scroll-top': [
74
+ ['(empty)', 'Mount default scroll-top control', '`<velin-scroll-top>`'],
75
+ ['threshold px', 'Show after scroll distance', '`<velin-scroll-top>`'],
76
+ ],
77
+ 'velin-reveal': [
78
+ ['(empty / present)', 'Reveal when in view', 'Motion runtime'],
79
+ ],
80
+ 'velin-fade': [
81
+ ['(empty / present)', 'Fade in on scroll', 'Motion runtime'],
82
+ ],
83
+ 'velin-slide': [
84
+ ['`up`', 'Slide from below', 'Motion runtime'],
85
+ ['`down`', 'Slide from above', 'Motion runtime'],
86
+ ['`left` / `right`', 'Horizontal slide', 'Motion runtime'],
87
+ ],
88
+ 'velin-scale': [
89
+ ['(empty / present)', 'Scale in on scroll', 'Motion runtime'],
90
+ ],
91
+ 'velin-parallax': [
92
+ ['(empty)', 'Default parallax speed', 'Motion runtime'],
93
+ ['`slow`', 'Reduced parallax factor', 'Motion runtime'],
94
+ ],
95
+ 'velin-hover': [
96
+ ['(empty / present)', 'Hover lift / glow', 'Motion CSS'],
97
+ ],
98
+ 'velin-stagger': [
99
+ ['ms number', 'Stagger delay between children', 'Motion runtime'],
100
+ ],
101
+ 'velin-scroll': [
102
+ ['(empty / present)', 'Smooth-scroll using `href="#id"`', 'Scroll behavior'],
103
+ ],
104
+ 'velin-anchor': [
105
+ ['(empty / length)', 'Apply scroll-margin for in-page targets', 'CSS scroll-margin'],
106
+ ],
107
+ 'velin-lazy': [
108
+ ['(empty / present)', 'Lazy-load `<img>` (`loading="lazy"`)', 'Native lazy + optional skeleton'],
109
+ ],
110
+ 'velin-skeleton': [
111
+ ['`text`', 'Text-line placeholder', 'Skeleton CSS'],
112
+ ['`avatar`', 'Circular placeholder', 'Skeleton CSS'],
113
+ ['`image`', 'Media block placeholder', 'Skeleton CSS'],
114
+ ['`card` / other', 'Preset shapes when supported', 'Skeleton CSS'],
115
+ ],
116
+ 'velin-loading': [
117
+ ['(empty / present)', 'Busy / spinner state (`aria-busy`)', 'Loading CSS'],
118
+ ],
119
+ 'velin-grid': [
120
+ ['column count', 'Auto-fit grid columns', 'CSS grid'],
121
+ ],
122
+ 'velin-code': [
123
+ ['language id (`js`, `css`, …)', 'Syntax highlight + copy chrome', 'VelinHighlight / `<velin-code-block>`'],
124
+ ],
125
+ 'velin-quote': [
126
+ ['(empty / present)', 'Style host as blockquote', 'Quote CSS'],
127
+ ],
128
+ 'velin-highlight': [
129
+ ['(empty / present)', 'Inline mark emphasis', 'Mark CSS'],
130
+ ],
32
131
  };
33
132
 
34
133
  const A11Y_NOTES = {
@@ -44,12 +143,29 @@ const A11Y_NOTES = {
44
143
  'velin-loading': 'Sets `aria-busy`, `role="status"`, default `aria-label="Loading"`.',
45
144
  'velin-notify': 'Dispatches toast event; pair with `<velin-announcer>` or `initA11y()`.',
46
145
  'velin-lazy': 'Adds `loading="lazy"` on `<img>` only.',
146
+ 'velin-scroll-top': 'Ensure the control has an accessible name when rendered.',
147
+ 'velin-modal': 'Prefer the web component for focus trap / `velin-close`; attribute is a bridge.',
148
+ };
149
+
150
+ const EXAMPLES = {
151
+ 'velin-code': '<pre velin-code="js" language="js"><code>const x = 42;</code></pre>',
152
+ 'velin-scroll': '<a href="#section" velin-scroll>Jump to section</a>',
153
+ 'velin-slide': '<div velin-slide="up">…</div>',
154
+ 'velin-theme': '<button type="button" velin-theme="toggle">Theme</button>',
155
+ 'velin-progress': '<div velin-progress="42"></div>',
156
+ 'velin-skeleton': '<div velin-skeleton="text"></div>',
157
+ 'velin-scroll-top': '<body velin-scroll-top>',
158
+ 'velin-notify': '<button type="button" velin-notify="Saved">Notify</button>',
159
+ 'velin-stagger': '<ul velin-stagger="80">…</ul>',
160
+ 'velin-grid': '<div velin-grid="3">…</div>',
161
+ 'velin-parallax': '<div velin-parallax="slow">…</div>',
47
162
  };
48
163
 
49
164
  export function extractAttributes() {
50
165
  return listRegisteredAttributes().map((name) => ({
51
166
  name,
52
167
  description: ATTRIBUTE_DOCS[name] || 'Velin HTML attribute extension.',
168
+ values: ATTRIBUTE_VALUES[name] || [['(empty / present)', 'Enable the attribute behavior', 'Attribute registry']],
53
169
  }));
54
170
  }
55
171
 
@@ -57,14 +173,15 @@ export function renderAttribute(attr) {
57
173
  let md = banner('velinstyle docs generate');
58
174
  md += heading(1, attr.name);
59
175
  md += `\n${attr.description}\n\n`;
176
+
177
+ md += heading(2, 'Values');
178
+ md += table(
179
+ ['Value', 'Meaning', 'Bridges to'],
180
+ (attr.values || []).map((row) => row.map((cell) => cell)),
181
+ );
182
+
60
183
  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
- }
184
+ md += `${EXAMPLES[attr.name] || `<div ${attr.name}>…</div>`}\n`;
68
185
  md += '```\n';
69
186
  if (A11Y_NOTES[attr.name]) {
70
187
  md += '\n## Accessibility\n\n';
@@ -77,9 +194,10 @@ export function renderAttributesIndex(attrs) {
77
194
  let md = banner('velinstyle docs generate');
78
195
  md += heading(1, 'Velin HTML attributes');
79
196
  md += '\nDeclarative extensions interpreted by `bootAttributes()` / `bootFromDOM({ attributes: true })`.\n\n';
80
- md += '| Attribute | Description |\n| --- | --- |\n';
197
+ md += '| Attribute | Description | Values |\n| --- | --- | --- |\n';
81
198
  for (const a of attrs) {
82
- md += `| [\`${a.name}\`](./${a.name}.md) | ${a.description} |\n`;
199
+ const n = (a.values && a.values.length) || 0;
200
+ md += `| [\`${a.name}\`](./${a.name}.md) | ${a.description} | ${n} |\n`;
83
201
  }
84
202
  return md;
85
203
  }
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');