pagyra-js 0.0.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 (540) hide show
  1. package/.eslintrc.json +30 -0
  2. package/CHANGELOG.md +13 -0
  3. package/README.md +275 -0
  4. package/UA_Styles_Chromium.md +93 -0
  5. package/_ext/woff2_conversion/brotli-decode.d.ts +139 -0
  6. package/_ext/woff2_conversion/brotli-encode.d.ts +129 -0
  7. package/_ext/woff2_conversion/brotli-port.d.ts +12 -0
  8. package/_ext/woff2_conversion/brotli-shared-dictionary.d.ts +25 -0
  9. package/_ext/woff2_conversion/brotli-types.d.ts +15 -0
  10. package/_ext/woff2_conversion/woff2-common.d.ts +37 -0
  11. package/_ext/woff2_conversion/woff2-decode.d.ts +32 -0
  12. package/_ext/woff2_conversion/woff2-encode.d.ts +31 -0
  13. package/_ext/woff2_conversion/woff2-output.d.ts +39 -0
  14. package/_ext/woff2_original_cpp/brotli/brotli.c +1559 -0
  15. package/_ext/woff2_original_cpp/brotli/brotli.md +116 -0
  16. package/_ext/woff2_original_cpp/brotli/decode.h +409 -0
  17. package/_ext/woff2_original_cpp/brotli/encode.h +505 -0
  18. package/_ext/woff2_original_cpp/brotli/port.h +302 -0
  19. package/_ext/woff2_original_cpp/brotli/shared_dictionary.h +100 -0
  20. package/_ext/woff2_original_cpp/brotli/types.h +83 -0
  21. package/_ext/woff2_original_cpp/cmake/FindBrotliDec.cmake +35 -0
  22. package/_ext/woff2_original_cpp/cmake/FindBrotliEnc.cmake +35 -0
  23. package/_ext/woff2_original_cpp/include/woff2/decode.h +36 -0
  24. package/_ext/woff2_original_cpp/include/woff2/encode.h +43 -0
  25. package/_ext/woff2_original_cpp/include/woff2/output.h +86 -0
  26. package/_ext/woff2_original_cpp/src/buffer.h +164 -0
  27. package/_ext/woff2_original_cpp/src/convert_woff2ttf_fuzzer.cc +13 -0
  28. package/_ext/woff2_original_cpp/src/convert_woff2ttf_fuzzer_new_entry.cc +12 -0
  29. package/_ext/woff2_original_cpp/src/file.h +30 -0
  30. package/_ext/woff2_original_cpp/src/font.cc +400 -0
  31. package/_ext/woff2_original_cpp/src/font.h +105 -0
  32. package/_ext/woff2_original_cpp/src/glyph.cc +383 -0
  33. package/_ext/woff2_original_cpp/src/glyph.h +71 -0
  34. package/_ext/woff2_original_cpp/src/normalize.cc +314 -0
  35. package/_ext/woff2_original_cpp/src/normalize.h +39 -0
  36. package/_ext/woff2_original_cpp/src/port.h +66 -0
  37. package/_ext/woff2_original_cpp/src/round.h +27 -0
  38. package/_ext/woff2_original_cpp/src/store_bytes.h +55 -0
  39. package/_ext/woff2_original_cpp/src/table_tags.cc +82 -0
  40. package/_ext/woff2_original_cpp/src/table_tags.h +30 -0
  41. package/_ext/woff2_original_cpp/src/transform.cc +430 -0
  42. package/_ext/woff2_original_cpp/src/transform.h +26 -0
  43. package/_ext/woff2_original_cpp/src/variable_length.cc +129 -0
  44. package/_ext/woff2_original_cpp/src/variable_length.h +30 -0
  45. package/_ext/woff2_original_cpp/src/woff2_common.cc +50 -0
  46. package/_ext/woff2_original_cpp/src/woff2_common.h +64 -0
  47. package/_ext/woff2_original_cpp/src/woff2_compress.cc +43 -0
  48. package/_ext/woff2_original_cpp/src/woff2_dec.cc +1398 -0
  49. package/_ext/woff2_original_cpp/src/woff2_decompress.cc +41 -0
  50. package/_ext/woff2_original_cpp/src/woff2_enc.cc +458 -0
  51. package/_ext/woff2_original_cpp/src/woff2_info.cc +142 -0
  52. package/_ext/woff2_original_cpp/src/woff2_out.cc +63 -0
  53. package/assets/fonts/ttf/arimo/Arimo-Bold.ttf +0 -0
  54. package/assets/fonts/ttf/arimo/Arimo-BoldItalic.ttf +0 -0
  55. package/assets/fonts/ttf/arimo/Arimo-Italic.ttf +0 -0
  56. package/assets/fonts/ttf/arimo/Arimo-Regular.ttf +0 -0
  57. package/assets/fonts/ttf/cinzeldecorative/CinzelDecorative-Black.ttf +0 -0
  58. package/assets/fonts/ttf/cinzeldecorative/CinzelDecorative-Bold.ttf +0 -0
  59. package/assets/fonts/ttf/cinzeldecorative/CinzelDecorative-Regular.ttf +0 -0
  60. package/assets/fonts/ttf/dejavu/DejaVuSans.ttf +0 -0
  61. package/assets/fonts/ttf/firecode/FiraCode-Bold.ttf +0 -0
  62. package/assets/fonts/ttf/firecode/FiraCode-Light.ttf +0 -0
  63. package/assets/fonts/ttf/firecode/FiraCode-Medium.ttf +0 -0
  64. package/assets/fonts/ttf/firecode/FiraCode-Regular.ttf +0 -0
  65. package/assets/fonts/ttf/firecode/FiraCode-SemiBold.ttf +0 -0
  66. package/assets/fonts/ttf/notoemoji/NotoEmoji-Bold.ttf +0 -0
  67. package/assets/fonts/ttf/notoemoji/NotoEmoji-Light.ttf +0 -0
  68. package/assets/fonts/ttf/notoemoji/NotoEmoji-Medium.ttf +0 -0
  69. package/assets/fonts/ttf/notoemoji/NotoEmoji-Regular.ttf +0 -0
  70. package/assets/fonts/ttf/notoemoji/NotoEmoji-SemiBold.ttf +0 -0
  71. package/assets/fonts/ttf/notosans/NotoSans-Regular.ttf +0 -0
  72. package/assets/fonts/ttf/roboto/Roboto-Bold.ttf +0 -0
  73. package/assets/fonts/ttf/roboto/Roboto-BoldItalic.ttf +0 -0
  74. package/assets/fonts/ttf/roboto/Roboto-Italic.ttf +0 -0
  75. package/assets/fonts/ttf/roboto/Roboto-Regular.ttf +0 -0
  76. package/assets/fonts/ttf/stixtwomath/STIXTwoMath-Regular.ttf +0 -0
  77. package/assets/fonts/ttf/tinos/Tinos-Bold.ttf +0 -0
  78. package/assets/fonts/ttf/tinos/Tinos-BoldItalic.ttf +0 -0
  79. package/assets/fonts/ttf/tinos/Tinos-Italic.ttf +0 -0
  80. package/assets/fonts/ttf/tinos/Tinos-Regular.ttf +0 -0
  81. package/assets/fonts/woff/lato/lato-latin-400-italic.woff +0 -0
  82. package/assets/fonts/woff/lato/lato-latin-400-normal.woff +0 -0
  83. package/assets/fonts/woff/lato/lato-latin-700-italic.woff +0 -0
  84. package/assets/fonts/woff/lato/lato-latin-700-normal.woff +0 -0
  85. package/assets/fonts/woff2/caveat/Caveat-Bold.woff2 +0 -0
  86. package/assets/fonts/woff2/caveat/Caveat-Regular.woff2 +0 -0
  87. package/assets/fonts/woff2/lato/lato-latin-400-italic.woff2 +0 -0
  88. package/assets/fonts/woff2/lato/lato-latin-400-normal.woff2 +0 -0
  89. package/assets/fonts/woff2/lato/lato-latin-700-italic.woff2 +0 -0
  90. package/assets/fonts/woff2/lato/lato-latin-700-normal.woff2 +0 -0
  91. package/docs/AGENTS.md +288 -0
  92. package/docs/BACKGROUND-REPEAT-IMPLEMENTATION.md +127 -0
  93. package/docs/BACKGROUND-REPEAT-REFERENCE.md +127 -0
  94. package/docs/BACKGROUND-REPEAT-SPACE-ROUND.md +164 -0
  95. package/docs/css-properties-support.md +256 -0
  96. package/docs/src_modules_table.md +172 -0
  97. package/docs/text-overlap-fix.md +85 -0
  98. package/docs/text-overlap-investigation.md +27 -0
  99. package/eslint.config.js +36 -0
  100. package/glyph_measure.htm +1458 -0
  101. package/package.json +50 -0
  102. package/playground/browser-entry.ts +2 -0
  103. package/playground/exports/background-text-debug.pdf +0 -0
  104. package/playground/public/app.js +875 -0
  105. package/playground/public/assets/1.webp +0 -0
  106. package/playground/public/examples/accents-test.html +24 -0
  107. package/playground/public/examples/advanced-selectors-demo.html +118 -0
  108. package/playground/public/examples/background-advanced-showcase.html +82 -0
  109. package/playground/public/examples/background-clip-text.html +36 -0
  110. package/playground/public/examples/background-origin-showcase.html +137 -0
  111. package/playground/public/examples/background-position-showcase.html +83 -0
  112. package/playground/public/examples/background-repeat-showcase.html +83 -0
  113. package/playground/public/examples/background-repeat-space-round.html +348 -0
  114. package/playground/public/examples/background-size-showcase.html +82 -0
  115. package/playground/public/examples/background-text-debug.html +18 -0
  116. package/playground/public/examples/baseline-test.html +24 -0
  117. package/playground/public/examples/bold-showcase.html +150 -0
  118. package/playground/public/examples/bold-strike-example.html +12 -0
  119. package/playground/public/examples/border-collapse-test.html +23 -0
  120. package/playground/public/examples/centered-shadow-div.html +72 -0
  121. package/playground/public/examples/css-variables.html +50 -0
  122. package/playground/public/examples/debug-accents.html +11 -0
  123. package/playground/public/examples/debug-text-overlap.html +46 -0
  124. package/playground/public/examples/flex-gap-column.html +130 -0
  125. package/playground/public/examples/flex-gap-row.html +137 -0
  126. package/playground/public/examples/flex-padding-test.html +29 -0
  127. package/playground/public/examples/flexbox-text-test.html +193 -0
  128. package/playground/public/examples/fonts-demo.html +126 -0
  129. package/playground/public/examples/footer-example.html +4 -0
  130. package/playground/public/examples/gradient-text.html +54 -0
  131. package/playground/public/examples/grid-gap-demo.html +156 -0
  132. package/playground/public/examples/header-example.html +4 -0
  133. package/playground/public/examples/header-footer-example.html +27 -0
  134. package/playground/public/examples/image-showcase.html +33 -0
  135. package/playground/public/examples/justify-text.html +22 -0
  136. package/playground/public/examples/linear-gradient-example.html +38 -0
  137. package/playground/public/examples/lorem-span.html +14 -0
  138. package/playground/public/examples/margin-block-showcase.html +21 -0
  139. package/playground/public/examples/margin-inline-showcase.html +21 -0
  140. package/playground/public/examples/monthly-summary.html +95 -0
  141. package/playground/public/examples/multi-page-lorem.html +190 -0
  142. package/playground/public/examples/opacity-debug.html +39 -0
  143. package/playground/public/examples/opacity-example.html +70 -0
  144. package/playground/public/examples/png-image-example.html +13 -0
  145. package/playground/public/examples/red-rectangle.html +18 -0
  146. package/playground/public/examples/repro.html +24 -0
  147. package/playground/public/examples/rounded-borders-test.html +24 -0
  148. package/playground/public/examples/simple-list.html +89 -0
  149. package/playground/public/examples/simple-svg.html +37 -0
  150. package/playground/public/examples/simple-table.html +52 -0
  151. package/playground/public/examples/skew-div.html +138 -0
  152. package/playground/public/examples/skew-text.html +21 -0
  153. package/playground/public/examples/starter-report.css +51 -0
  154. package/playground/public/examples/starter-report.html +23 -0
  155. package/playground/public/examples/svg-aspect-ratio-showcase.html +116 -0
  156. package/playground/public/examples/svg-gradients-linear.html +28 -0
  157. package/playground/public/examples/svg-gradients-radial.html +29 -0
  158. package/playground/public/examples/svg-gradients-showcase.html +66 -0
  159. package/playground/public/examples/svg-image-path-test.html +43 -0
  160. package/playground/public/examples/svg-images-clipping.html +27 -0
  161. package/playground/public/examples/svg-path-gallery.html +118 -0
  162. package/playground/public/examples/svg-radial-transform-demo.html +78 -0
  163. package/playground/public/examples/svg-transform-stack.html +103 -0
  164. package/playground/public/examples/svg-transforms-demo.html +127 -0
  165. package/playground/public/examples/table-merge-test.html +34 -0
  166. package/playground/public/examples/text-decoration-showcase.html +138 -0
  167. package/playground/public/examples/text-indent-showcase.html +137 -0
  168. package/playground/public/examples/text-shadow-example.html +29 -0
  169. package/playground/public/examples/very-complex-css.html +293 -0
  170. package/playground/public/examples/webp-example.html +13 -0
  171. package/playground/public/examples/z-index-demo.html +93 -0
  172. package/playground/public/examples.json +240 -0
  173. package/playground/public/images/dice.png +0 -0
  174. package/playground/public/images/duck.jpg +0 -0
  175. package/playground/public/index.html +149 -0
  176. package/playground/public/mode.js +1 -0
  177. package/playground/public/styles.css +382 -0
  178. package/playground/public/tmp-h2-debug.html +33 -0
  179. package/playground/public/tmp-italic-debug.html +32 -0
  180. package/playground/public/vendor/codemirror/codemirror.min.css +1 -0
  181. package/playground/public/vendor/codemirror/codemirror.min.js +1 -0
  182. package/playground/public/vendor/codemirror/css.min.js +1 -0
  183. package/playground/public/vendor/codemirror/darcula.min.css +1 -0
  184. package/playground/public/vendor/codemirror/htmlmixed.min.js +1 -0
  185. package/playground/public/vendor/codemirror/javascript.min.js +1 -0
  186. package/playground/public/vendor/codemirror/xml.min.js +1 -0
  187. package/playground/public/vendor/pagyra-playground-browser.js +165966 -0
  188. package/playground/public/vendor/pagyra-playground-browser.js.map +7 -0
  189. package/playground/server.d.ts +1 -0
  190. package/playground/server.js +68 -0
  191. package/playground/server.ts +128 -0
  192. package/scripts/browser-build.ts +101 -0
  193. package/scripts/build-browser-bundle.ts +52 -0
  194. package/scripts/glyph-comparison/simulate.ts +744 -0
  195. package/scripts/playground-browser-server.ts +57 -0
  196. package/scripts/probe-roboto.ts +6 -0
  197. package/scripts/render-playground-example.ts +121 -0
  198. package/scripts/run-glyph-atlas-tuner-runner.mjs +113 -0
  199. package/scripts/run-glyph-atlas-tuner.ts +141 -0
  200. package/scripts/top-ts-files.ps1 +39 -0
  201. package/scripts/top-ts-files.sh +37 -0
  202. package/scripts/woff2_info.ps1 +132 -0
  203. package/src/browser-entry.ts +14 -0
  204. package/src/compression/adler32.ts +45 -0
  205. package/src/compression/brotli/brotli.ts +463 -0
  206. package/src/compression/brotli/index.ts +15 -0
  207. package/src/compression/brotli/transform.ts +184 -0
  208. package/src/compression/brotli/types.ts +58 -0
  209. package/src/compression/brotli/utils.ts +157 -0
  210. package/src/compression/brotli/vendor/bit_reader.js +124 -0
  211. package/src/compression/brotli/vendor/context.js +250 -0
  212. package/src/compression/brotli/vendor/decode.d.ts +2 -0
  213. package/src/compression/brotli/vendor/decode.js +938 -0
  214. package/src/compression/brotli/vendor/dictionary-data.js +9469 -0
  215. package/src/compression/brotli/vendor/dictionary.js +36 -0
  216. package/src/compression/brotli/vendor/huffman.js +123 -0
  217. package/src/compression/brotli/vendor/package.json +3 -0
  218. package/src/compression/brotli/vendor/prefix.js +60 -0
  219. package/src/compression/brotli/vendor/streams.js +31 -0
  220. package/src/compression/brotli/vendor/transform.js +247 -0
  221. package/src/compression/brotli/vendor-decode.d.ts +4 -0
  222. package/src/compression/brotli/woff2-glyf-transform.ts +623 -0
  223. package/src/compression/decompress.ts +16 -0
  224. package/src/compression/deflate.ts +295 -0
  225. package/src/compression/index.ts +4 -0
  226. package/src/compression/types.ts +26 -0
  227. package/src/compression/utils.ts +107 -0
  228. package/src/core.ts +18 -0
  229. package/src/css/apply-declarations.ts +86 -0
  230. package/src/css/background-types.ts +65 -0
  231. package/src/css/browser-defaults.ts +16 -0
  232. package/src/css/clip-path-types.ts +13 -0
  233. package/src/css/compute-style.ts +494 -0
  234. package/src/css/css-unit-resolver.ts +65 -0
  235. package/src/css/custom-properties.ts +215 -0
  236. package/src/css/enums.ts +127 -0
  237. package/src/css/font-face-parser.ts +233 -0
  238. package/src/css/font-weight.ts +65 -0
  239. package/src/css/inline-style-parser.ts +27 -0
  240. package/src/css/layout-property-resolver.ts +75 -0
  241. package/src/css/length.ts +141 -0
  242. package/src/css/line-height.ts +96 -0
  243. package/src/css/named-colors.ts +150 -0
  244. package/src/css/parsers/background-parser-extended.ts +111 -0
  245. package/src/css/parsers/background-parser.ts +456 -0
  246. package/src/css/parsers/border-block-parser.ts +26 -0
  247. package/src/css/parsers/border-inline-parser.ts +26 -0
  248. package/src/css/parsers/border-parser-extended.ts +256 -0
  249. package/src/css/parsers/border-parser.ts +175 -0
  250. package/src/css/parsers/box-shadow-parser.ts +106 -0
  251. package/src/css/parsers/clip-path-parser.ts +92 -0
  252. package/src/css/parsers/color-parser.ts +14 -0
  253. package/src/css/parsers/dimension-parser.ts +117 -0
  254. package/src/css/parsers/display-flex-parser.ts +59 -0
  255. package/src/css/parsers/flex-parser.ts +144 -0
  256. package/src/css/parsers/font-parser.ts +40 -0
  257. package/src/css/parsers/gradient-parser.ts +366 -0
  258. package/src/css/parsers/grid-parser-extended.ts +55 -0
  259. package/src/css/parsers/grid-parser.ts +218 -0
  260. package/src/css/parsers/length-parser.ts +95 -0
  261. package/src/css/parsers/list-style-parser.ts +39 -0
  262. package/src/css/parsers/margin-block-parser.ts +12 -0
  263. package/src/css/parsers/margin-inline-parser.ts +12 -0
  264. package/src/css/parsers/margin-parser.ts +30 -0
  265. package/src/css/parsers/opacity-parser.ts +32 -0
  266. package/src/css/parsers/overflow-wrap-parser.ts +38 -0
  267. package/src/css/parsers/padding-block-parser.ts +12 -0
  268. package/src/css/parsers/padding-inline-parser.ts +12 -0
  269. package/src/css/parsers/padding-parser.ts +30 -0
  270. package/src/css/parsers/position-parser.ts +75 -0
  271. package/src/css/parsers/register-parsers.ts +302 -0
  272. package/src/css/parsers/registry.ts +18 -0
  273. package/src/css/parsers/text-parser-extended.ts +144 -0
  274. package/src/css/parsers/text-parser.ts +25 -0
  275. package/src/css/parsers/text-shadow-parser.ts +94 -0
  276. package/src/css/properties/box-model.ts +82 -0
  277. package/src/css/properties/flexbox.ts +44 -0
  278. package/src/css/properties/gap.ts +14 -0
  279. package/src/css/properties/grid.ts +94 -0
  280. package/src/css/properties/layout.ts +59 -0
  281. package/src/css/properties/misc.ts +44 -0
  282. package/src/css/properties/typography.ts +71 -0
  283. package/src/css/properties/visual.ts +68 -0
  284. package/src/css/selectors/matcher.ts +219 -0
  285. package/src/css/selectors/parser.ts +163 -0
  286. package/src/css/selectors/simple-key.ts +31 -0
  287. package/src/css/selectors/specificity.ts +41 -0
  288. package/src/css/selectors/types.ts +31 -0
  289. package/src/css/shorthands/border-shorthand.ts +68 -0
  290. package/src/css/shorthands/box-shorthand.ts +33 -0
  291. package/src/css/style-inheritance.ts +50 -0
  292. package/src/css/style.ts +402 -0
  293. package/src/css/ua-defaults/base-defaults.ts +266 -0
  294. package/src/css/ua-defaults/browser-defaults.ts +134 -0
  295. package/src/css/ua-defaults/element-defaults.ts +374 -0
  296. package/src/css/ua-defaults/types.ts +43 -0
  297. package/src/css/unit-conversion.ts +24 -0
  298. package/src/css/utils.ts +108 -0
  299. package/src/css/viewport.ts +17 -0
  300. package/src/debug/audit.ts +20 -0
  301. package/src/debug/ids.ts +13 -0
  302. package/src/debug/log.js +28 -0
  303. package/src/debug/log.ts +52 -0
  304. package/src/debug/tree.ts +57 -0
  305. package/src/dom/node.ts +133 -0
  306. package/src/environment/browser-environment.ts +78 -0
  307. package/src/environment/environment.ts +35 -0
  308. package/src/environment/global.ts +13 -0
  309. package/src/environment/node-environment.browser.ts +28 -0
  310. package/src/environment/node-environment.ts +64 -0
  311. package/src/fonts/detector.ts +28 -0
  312. package/src/fonts/engines/ttf-engine.ts +28 -0
  313. package/src/fonts/engines/woff-engine.ts +38 -0
  314. package/src/fonts/engines/woff2-engine.ts +41 -0
  315. package/src/fonts/extractors/metrics-extractor.ts +362 -0
  316. package/src/fonts/font-registry-resolver.ts +132 -0
  317. package/src/fonts/index.ts +3 -0
  318. package/src/fonts/orchestrator.ts +92 -0
  319. package/src/fonts/parsers/base-parser.ts +23 -0
  320. package/src/fonts/types.ts +85 -0
  321. package/src/fonts/utils/ttf-reconstructor.ts +120 -0
  322. package/src/fonts/woff/decoder.ts +105 -0
  323. package/src/fonts/woff2/buffer.ts +106 -0
  324. package/src/fonts/woff2/decoder.ts +981 -0
  325. package/src/geometry/box.ts +48 -0
  326. package/src/geometry/matrix.ts +59 -0
  327. package/src/html/css/parse-css.ts +85 -0
  328. package/src/html/dom-converter.ts +433 -0
  329. package/src/html/image-converter.ts +200 -0
  330. package/src/html-to-pdf.ts +410 -0
  331. package/src/image/base-decoder.ts +149 -0
  332. package/src/image/image-service.ts +188 -0
  333. package/src/image/jpeg-decoder.ts +73 -0
  334. package/src/image/png-decoder.ts +550 -0
  335. package/src/image/types.ts +20 -0
  336. package/src/image/webp-decoder.ts +242 -0
  337. package/src/image/webp-huffman.ts +218 -0
  338. package/src/image/webp-riff-parser.ts +54 -0
  339. package/src/image/webp-vp8l-decoder.ts +199 -0
  340. package/src/index.ts +35 -0
  341. package/src/layout/context/float-context.ts +62 -0
  342. package/src/layout/context/layout-environment.ts +29 -0
  343. package/src/layout/debug.ts +18 -0
  344. package/src/layout/inline/bounding-box-calculator.ts +132 -0
  345. package/src/layout/inline/font-baseline-calculator.ts +76 -0
  346. package/src/layout/inline/inline-utils.ts +94 -0
  347. package/src/layout/inline/layout.ts +285 -0
  348. package/src/layout/inline/line_breaker.ts +109 -0
  349. package/src/layout/inline/measurement.ts +144 -0
  350. package/src/layout/inline/run-placer.ts +139 -0
  351. package/src/layout/inline/text-alignment.ts +70 -0
  352. package/src/layout/inline/tokenizer.ts +195 -0
  353. package/src/layout/inline/types.ts +76 -0
  354. package/src/layout/pipeline/context-factory.ts +16 -0
  355. package/src/layout/pipeline/default-engine.ts +24 -0
  356. package/src/layout/pipeline/engine.ts +59 -0
  357. package/src/layout/pipeline/layout-tree.ts +13 -0
  358. package/src/layout/pipeline/out-of-flow-manager.ts +73 -0
  359. package/src/layout/pipeline/strategy.ts +12 -0
  360. package/src/layout/pipeline/text-metrics-initializer.ts +13 -0
  361. package/src/layout/strategies/block.ts +236 -0
  362. package/src/layout/strategies/display-none.ts +14 -0
  363. package/src/layout/strategies/fallback.ts +15 -0
  364. package/src/layout/strategies/flex.ts +477 -0
  365. package/src/layout/strategies/fragmentation.ts +17 -0
  366. package/src/layout/strategies/grid.ts +247 -0
  367. package/src/layout/strategies/image.ts +342 -0
  368. package/src/layout/strategies/inline.ts +128 -0
  369. package/src/layout/strategies/table.ts +595 -0
  370. package/src/layout/table/cell_layout.ts +31 -0
  371. package/src/layout/table/diagnostics.ts +19 -0
  372. package/src/layout/text-run.ts +42 -0
  373. package/src/layout/utils/content-measurer.ts +117 -0
  374. package/src/layout/utils/display-utils.ts +24 -0
  375. package/src/layout/utils/floats.ts +98 -0
  376. package/src/layout/utils/gap-calculator.ts +167 -0
  377. package/src/layout/utils/inline-formatter.ts +31 -0
  378. package/src/layout/utils/inline-formatting.ts +9 -0
  379. package/src/layout/utils/margin.ts +140 -0
  380. package/src/layout/utils/node-math.ts +237 -0
  381. package/src/layout/utils/overflow.ts +14 -0
  382. package/src/layout/utils/sizing.ts +12 -0
  383. package/src/layout/utils/text-metrics.ts +361 -0
  384. package/src/logging/debug.ts +58 -0
  385. package/src/pdf/font/base14/widths-courier-bold.ts +159 -0
  386. package/src/pdf/font/base14/widths-courier.ts +159 -0
  387. package/src/pdf/font/base14/widths-helvetica-bold.ts +158 -0
  388. package/src/pdf/font/base14/widths-helvetica.ts +158 -0
  389. package/src/pdf/font/base14/widths-times-bold.ts +158 -0
  390. package/src/pdf/font/base14/widths-times-roman.ts +158 -0
  391. package/src/pdf/font/base14/widths-types.ts +25 -0
  392. package/src/pdf/font/base14-widths.ts +32 -0
  393. package/src/pdf/font/blur.ts +81 -0
  394. package/src/pdf/font/builtin-fonts.browser.ts +262 -0
  395. package/src/pdf/font/builtin-fonts.ts +126 -0
  396. package/src/pdf/font/composite-glyph-parser.ts +242 -0
  397. package/src/pdf/font/embedder.ts +395 -0
  398. package/src/pdf/font/font-config.ts +190 -0
  399. package/src/pdf/font/font-registry.ts +263 -0
  400. package/src/pdf/font/font-subset.ts +258 -0
  401. package/src/pdf/font/glyph-atlas-maxrects.ts +305 -0
  402. package/src/pdf/font/glyph-atlas-tuner.ts +98 -0
  403. package/src/pdf/font/glyph-atlas.ts +226 -0
  404. package/src/pdf/font/glyph-cache.ts +127 -0
  405. package/src/pdf/font/loca-reader.ts +109 -0
  406. package/src/pdf/font/managers/font-resource-manager.ts +73 -0
  407. package/src/pdf/font/managers/subset-resource-manager.ts +164 -0
  408. package/src/pdf/font/rasterizer.ts +270 -0
  409. package/src/pdf/font/resolvers/base-font-mapper.ts +77 -0
  410. package/src/pdf/font/resolvers/family-resolver.ts +33 -0
  411. package/src/pdf/font/resolvers/weight-style-applicator.ts +63 -0
  412. package/src/pdf/font/simple-glyph-parser.ts +289 -0
  413. package/src/pdf/font/to-unicode.ts +109 -0
  414. package/src/pdf/font/transformation-matrix.ts +136 -0
  415. package/src/pdf/font/ttf-cmap.ts +180 -0
  416. package/src/pdf/font/ttf-global-metrics.ts +58 -0
  417. package/src/pdf/font/ttf-glyf.ts +125 -0
  418. package/src/pdf/font/ttf-glyph-metrics.ts +43 -0
  419. package/src/pdf/font/ttf-lite.ts +269 -0
  420. package/src/pdf/font/ttf-table-parser.ts +132 -0
  421. package/src/pdf/font/ttf-table-provider.ts +61 -0
  422. package/src/pdf/font/widths.ts +79 -0
  423. package/src/pdf/font-subset/font-registry.ts +127 -0
  424. package/src/pdf/header-footer-layout.ts +153 -0
  425. package/src/pdf/header-footer-painter.ts +209 -0
  426. package/src/pdf/header-footer-renderer.ts +357 -0
  427. package/src/pdf/header-footer-tokens.ts +55 -0
  428. package/src/pdf/header-footer.ts +25 -0
  429. package/src/pdf/layout-tree-builder.ts +261 -0
  430. package/src/pdf/page-painter.ts +241 -0
  431. package/src/pdf/pagination.ts +155 -0
  432. package/src/pdf/primitives/pdf-builder.ts +378 -0
  433. package/src/pdf/primitives/pdf-bytes.ts +40 -0
  434. package/src/pdf/primitives/pdf-document.ts +108 -0
  435. package/src/pdf/primitives/pdf-reference-manager.ts +47 -0
  436. package/src/pdf/primitives/pdf-resource-registries.ts +255 -0
  437. package/src/pdf/primitives/pdf-serializers.ts +194 -0
  438. package/src/pdf/primitives/pdf-types.ts +73 -0
  439. package/src/pdf/render.ts +210 -0
  440. package/src/pdf/renderer/box-painter.ts +236 -0
  441. package/src/pdf/renderer/page-paint.ts +102 -0
  442. package/src/pdf/renderer/paint-box-shadows.ts +218 -0
  443. package/src/pdf/renderer/radius.ts +58 -0
  444. package/src/pdf/renderers/graphics-state-manager.ts +40 -0
  445. package/src/pdf/renderers/image-renderer.ts +127 -0
  446. package/src/pdf/renderers/radius-utils.ts +80 -0
  447. package/src/pdf/renderers/rectangle-renderer.ts +129 -0
  448. package/src/pdf/renderers/rounded-rect-path.ts +120 -0
  449. package/src/pdf/renderers/shape-renderer.ts +563 -0
  450. package/src/pdf/renderers/shape-utils.ts +194 -0
  451. package/src/pdf/renderers/text-decoration-renderer.ts +313 -0
  452. package/src/pdf/renderers/text-encoder.ts +41 -0
  453. package/src/pdf/renderers/text-font-resolver.ts +75 -0
  454. package/src/pdf/renderers/text-renderer-utils.ts +28 -0
  455. package/src/pdf/renderers/text-renderer.ts +391 -0
  456. package/src/pdf/renderers/text-shadow-renderer.ts +300 -0
  457. package/src/pdf/shading/gradient-service.ts +525 -0
  458. package/src/pdf/shading/index.ts +1 -0
  459. package/src/pdf/stacking/build-stacking-contexts.ts +93 -0
  460. package/src/pdf/stacking/resolve-paint-order.ts +157 -0
  461. package/src/pdf/stacking/types.ts +40 -0
  462. package/src/pdf/svg/aspect-ratio.ts +81 -0
  463. package/src/pdf/svg/coordinate-mapper.ts +81 -0
  464. package/src/pdf/svg/geometry-builder.ts +45 -0
  465. package/src/pdf/svg/render-svg.ts +296 -0
  466. package/src/pdf/svg/shape-renderer.ts +463 -0
  467. package/src/pdf/svg/style-computer.ts +246 -0
  468. package/src/pdf/transform-adapter.ts +26 -0
  469. package/src/pdf/types.ts +377 -0
  470. package/src/pdf/utils/background-layer-resolver.ts +439 -0
  471. package/src/pdf/utils/background-tiles.ts +192 -0
  472. package/src/pdf/utils/border-dashes.ts +109 -0
  473. package/src/pdf/utils/border-radius-utils.ts +86 -0
  474. package/src/pdf/utils/box-dimensions-utils.ts +47 -0
  475. package/src/pdf/utils/clip-path-resolver.ts +50 -0
  476. package/src/pdf/utils/clipping-path-builder.ts +190 -0
  477. package/src/pdf/utils/color-utils.ts +102 -0
  478. package/src/pdf/utils/coordinate-transformer.ts +30 -0
  479. package/src/pdf/utils/drop-shadow-raster.ts +233 -0
  480. package/src/pdf/utils/encoding.ts +98 -0
  481. package/src/pdf/utils/glyph-atlas-registrar.ts +13 -0
  482. package/src/pdf/utils/glyph-run-renderer.ts +129 -0
  483. package/src/pdf/utils/image-command-partitioner.ts +28 -0
  484. package/src/pdf/utils/image-matrix-builder.ts +31 -0
  485. package/src/pdf/utils/image-utils.ts +26 -0
  486. package/src/pdf/utils/list-utils.ts +194 -0
  487. package/src/pdf/utils/node-text-run-factory.ts +202 -0
  488. package/src/pdf/utils/page-resource-registrar.ts +46 -0
  489. package/src/pdf/utils/result-combiner.ts +102 -0
  490. package/src/pdf/utils/shadow-utils.ts +127 -0
  491. package/src/pdf/utils/text-alignment-resolver.ts +76 -0
  492. package/src/pdf/utils/text-decoration-utils.ts +64 -0
  493. package/src/pdf/utils/text-layout-adjuster.ts +185 -0
  494. package/src/pdf/utils/text-utils.ts +193 -0
  495. package/src/pdf/utils/transform-scope-manager.ts +69 -0
  496. package/src/render/offset.ts +170 -0
  497. package/src/shim/empty.ts +2 -0
  498. package/src/shim/fs-empty.ts +5 -0
  499. package/src/shim/url-empty.ts +7 -0
  500. package/src/shim/zlib-empty.ts +9 -0
  501. package/src/style/shorthands/index.ts +19 -0
  502. package/src/style/ua/defaults.ts +69 -0
  503. package/src/svg/index.ts +4 -0
  504. package/src/svg/parser-registry.ts +71 -0
  505. package/src/svg/parser.ts +486 -0
  506. package/src/svg/path-data.ts +515 -0
  507. package/src/svg/types.ts +194 -0
  508. package/src/text/line-breaker.ts +321 -0
  509. package/src/text/text-transform.ts +43 -0
  510. package/src/text/text.ts +33 -0
  511. package/src/transform/css-parser.ts +95 -0
  512. package/src/types/fonts.ts +62 -0
  513. package/src/types/public.ts +19 -0
  514. package/src/units/page-utils.ts +58 -0
  515. package/src/units/units.ts +50 -0
  516. package/src/utils/base64.ts +24 -0
  517. package/test-output.txt +79 -0
  518. package/tests/css/background-parser.spec.ts +14 -0
  519. package/tests/css/clip-path-parser.spec.ts +66 -0
  520. package/tests/environment/path-resolution.spec.ts +104 -0
  521. package/tests/helpers/ai-layout-diagnostics.ts +141 -0
  522. package/tests/helpers/render-utils.ts +52 -0
  523. package/tests/helpers/text-geometry.ts +56 -0
  524. package/tests/layout/custom-properties.test.ts +38 -0
  525. package/tests/layout/gap-calculator.spec.ts +196 -0
  526. package/tests/layout/inline-background-alignment.spec.ts +93 -0
  527. package/tests/layout/inline-fragments.spec.ts +26 -0
  528. package/tests/layout/run-placer-baseline.spec.ts +108 -0
  529. package/tests/pdf/alignments.spec.ts +26 -0
  530. package/tests/pdf/background-clip.spec.ts +57 -0
  531. package/tests/pdf/background-repeat-space-round.spec.ts +35 -0
  532. package/tests/pdf/background-repeat.spec.ts +137 -0
  533. package/tests/pdf/border-radius.spec.ts +151 -0
  534. package/tests/pdf/clip-path.spec.ts +92 -0
  535. package/tests/pdf/radial-gradient.spec.ts +50 -0
  536. package/tests/pdf/svg-stroke-dash.spec.ts +81 -0
  537. package/tests/pdf/text-transform-matrix.spec.ts +43 -0
  538. package/tsconfig.json +17 -0
  539. package/types/fonts.js +10 -0
  540. package/vitest.config.ts +9 -0
package/playground/public/examples/skew-div.html ADDED
@@ -0,0 +1,138 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Exemplo Div Estilizada com Transform Skew</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ padding: 40px;
11
+ background-color: #f5f5f5;
12
+ }
13
+
14
+ h1 {
15
+ color: #333;
16
+ margin-bottom: 30px;
17
+ }
18
+
19
+ .example-container {
20
+ margin-bottom: 40px;
21
+ }
22
+
23
+ .example-title {
24
+ font-size: 18px;
25
+ font-weight: bold;
26
+ color: #666;
27
+ margin-bottom: 15px;
28
+ }
29
+
30
+ .skewed-div-x {
31
+ font-size: 32px;
32
+ transform: skewX(20deg);
33
+ color: white;
34
+ background-color: #1a73e8;
35
+ border: 5px solid red;
36
+ padding: 20px;
37
+ display: inline-block;
38
+ margin: 10px;
39
+ }
40
+
41
+ .skewed-div-y {
42
+ font-size: 28px;
43
+ transform: skewY(15deg);
44
+ color: white;
45
+ background-color: #ff5722;
46
+ border: 4px solid #ff9800;
47
+ padding: 18px;
48
+ display: inline-block;
49
+ margin: 10px;
50
+ }
51
+
52
+ .skewed-div-both {
53
+ font-size: 24px;
54
+ transform: skewX(10deg) skewY(10deg);
55
+ color: white;
56
+ background-color: #4caf50;
57
+ border: 3px solid #8bc34a;
58
+ padding: 15px;
59
+ display: inline-block;
60
+ margin: 10px;
61
+ }
62
+
63
+ .skewed-negative {
64
+ font-size: 26px;
65
+ transform: skewX(-15deg);
66
+ color: white;
67
+ background-color: #9c27b0;
68
+ border: 4px solid #e91e63;
69
+ padding: 16px;
70
+ display: inline-block;
71
+ margin: 10px;
72
+ }
73
+
74
+ .normal-div {
75
+ font-size: 28px;
76
+ color: white;
77
+ background-color: #607d8b;
78
+ border: 4px solid #455a64;
79
+ padding: 18px;
80
+ display: inline-block;
81
+ margin: 10px;
82
+ }
83
+ </style>
84
+ </head>
85
+ <body>
86
+ <h1>Transform Skew em Divs com Backgrounds e Borders</h1>
87
+
88
+ <div class="example-container">
89
+ <div class="example-title">SkewX (+20deg) - Azul com borda vermelha:</div>
90
+ <div class="skewed-div-x">
91
+ Conteúdo da DIV Inclinada
92
+ </div>
93
+ </div>
94
+
95
+ <div class="example-container">
96
+ <div class="example-title">SkewY (+15deg) - Laranja:</div>
97
+ <div class="skewed-div-y">
98
+ Inclinação Vertical
99
+ </div>
100
+ </div>
101
+
102
+ <div class="example-container">
103
+ <div class="example-title">SkewX + SkewY (+10deg cada) - Verde:</div>
104
+ <div class="skewed-div-both">
105
+ Dupla Inclinação
106
+ </div>
107
+ </div>
108
+
109
+ <div class="example-container">
110
+ <div class="example-title">SkewX (-15deg negativo) - Roxo:</div>
111
+ <div class="skewed-negative">
112
+ Inclinação Negativa
113
+ </div>
114
+ </div>
115
+
116
+ <div class="example-container">
117
+ <div class="example-title">Sem Transform (referência) - Cinza:</div>
118
+ <div class="normal-div">
119
+ DIV Normal Sem Transform
120
+ </div>
121
+ </div>
122
+
123
+ <div class="example-container" style="margin-top: 50px;">
124
+ <div class="example-title">Múltiplas divs com diferentes transforms:</div>
125
+ <div style="display: flex; gap: 20px; flex-wrap: wrap;">
126
+ <div style="font-size: 20px; transform: skewX(15deg); background-color: #e91e63; color: white; padding: 12px; border: 3px solid #c2185b;">
127
+ Skew X: 15°
128
+ </div>
129
+ <div style="font-size: 20px; transform: skewY(-10deg); background-color: #9c27b0; color: white; padding: 12px; border: 3px solid #7b1fa2;">
130
+ Skew Y: -10°
131
+ </div>
132
+ <div style="font-size: 20px; transform: skewX(25deg); background-color: #3f51b5; color: white; padding: 12px; border: 3px solid #303f9f;">
133
+ Skew X: 25°
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </body>
138
+ </html>
package/playground/public/examples/skew-text.html ADDED
@@ -0,0 +1,21 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Exemplo Skewed</title>
7
+ <style>
8
+ .skewed {
9
+ font-size: 48px;
10
+ transform: skewX(20deg);
11
+ color: #1a73e8;
12
+ display: inline-block;
13
+ }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <span class="skewed">
18
+ Texto Inclinado
19
+ </span>
20
+ </body>
21
+ </html>
package/playground/public/examples/starter-report.css ADDED
@@ -0,0 +1,51 @@
1
+ body {
2
+ font-family: "Segoe UI", Arial, sans-serif;
3
+ background: #f5f5f5;
4
+ color: #1f2937;
5
+ margin: 0;
6
+ padding: 24px;
7
+ }
8
+
9
+ main {
10
+ background: #ffffff;
11
+ margin: 0 auto;
12
+ max-width: 560px;
13
+ padding: 32px;
14
+ border: 1px solid #e5e7eb;
15
+ border-radius: 4px;
16
+ }
17
+
18
+ h1 {
19
+ font-size: 26px;
20
+ margin: 0 0 8px;
21
+ color: #111827;
22
+ }
23
+
24
+ p.lead {
25
+ margin: 0;
26
+ color: #4b5563;
27
+ line-height: 1.6;
28
+ }
29
+
30
+ h2 {
31
+ font-size: 18px;
32
+ margin: 0 0 8px;
33
+ color: #1f2937;
34
+ }
35
+
36
+ p {
37
+ margin: 0 0 12px;
38
+ line-height: 1.6;
39
+ }
40
+
41
+ ul {
42
+ margin: 0 0 16px;
43
+ padding-left: 20px;
44
+ }
45
+
46
+ footer {
47
+ margin-top: 32px;
48
+ font-size: 12px;
49
+ color: #6b7280;
50
+ text-align: right;
51
+ }
package/playground/public/examples/starter-report.html ADDED
@@ -0,0 +1,23 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <body>
4
+ <main>
5
+ <h1>Pagyra Sample Report</h1>
6
+ <p class="lead">
7
+ Start from this clean A4-friendly layout and adapt the content to your needs.
8
+ </p>
9
+ <h2>Checklist</h2>
10
+ <ul>
11
+ <li>Keep copy within the content area defined by the margins.</li>
12
+ <li>Use headings, paragraphs, and lists for structure.</li>
13
+ <li>Update styles to match your brand.</li>
14
+ </ul>
15
+ <p>
16
+ Need multiple pages? Just let the text flow - Pagyra will handle the pagination.
17
+ </p>
18
+ <footer>
19
+ <small>Prepared with Pagyra &copy; <time datetime="2025-10-12">October 12, 2025</time></small>
20
+ </footer>
21
+ </main>
22
+ </body>
23
+ </html>
package/playground/public/examples/svg-aspect-ratio-showcase.html ADDED
@@ -0,0 +1,116 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>SVG preserveAspectRatio Showcase</title>
6
+ <style>
7
+ body {
8
+ font-family: "Segoe UI", system-ui, sans-serif;
9
+ margin: 32px;
10
+ background: #fefefe;
11
+ color: #24303f;
12
+ }
13
+
14
+ table {
15
+ width: 100%;
16
+ border-collapse: collapse;
17
+ margin-top: 20px;
18
+ }
19
+
20
+ th, td {
21
+ border: 1px solid #dcdfe6;
22
+ padding: 16px;
23
+ vertical-align: top;
24
+ background: #ffffff;
25
+ }
26
+
27
+ th {
28
+ background: #eef2f8;
29
+ text-align: left;
30
+ font-size: 0.95rem;
31
+ }
32
+
33
+ svg {
34
+ width: 100%;
35
+ background: #f0f4f9;
36
+ border: 1px solid #b9c4d3;
37
+ }
38
+
39
+ .frame {
40
+ width: 220px;
41
+ height: 140px;
42
+ }
43
+
44
+ caption {
45
+ caption-side: bottom;
46
+ text-align: left;
47
+ font-size: 0.9rem;
48
+ margin-top: 8px;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body>
53
+ <h1>SVG preserveAspectRatio Showcase</h1>
54
+ <p>
55
+ Each frame renders the same star path inside different viewports while changing
56
+ <code>preserveAspectRatio</code>. The PDF backend should match the browser layout by honoring the alignment and
57
+ meet/slice rules.
58
+ </p>
59
+ <table>
60
+ <thead>
61
+ <tr>
62
+ <th>Property</th>
63
+ <th>Preview</th>
64
+ <th>Notes</th>
65
+ </tr>
66
+ </thead>
67
+ <tbody>
68
+ <tr>
69
+ <td><code>preserveAspectRatio="none"</code></td>
70
+ <td>
71
+ <div class="frame">
72
+ <svg viewBox="0 0 100 100" preserveAspectRatio="none">
73
+ <rect x="0" y="0" width="100" height="100" fill="#e0f2fe" />
74
+ <path
75
+ d="M50 5 L61 38 L96 38 L67 58 L78 92 L50 72 L22 92 L33 58 L4 38 L39 38 Z"
76
+ fill="#0284c7"
77
+ />
78
+ </svg>
79
+ </div>
80
+ </td>
81
+ <td>Shape stretches to fill the viewport, distorting the star horizontally.</td>
82
+ </tr>
83
+ <tr>
84
+ <td><code>preserveAspectRatio="xMidYMid meet"</code></td>
85
+ <td>
86
+ <div class="frame">
87
+ <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
88
+ <rect x="0" y="0" width="100" height="100" fill="#fff7ed" />
89
+ <path
90
+ d="M50 5 L61 38 L96 38 L67 58 L78 92 L50 72 L22 92 L33 58 L4 38 L39 38 Z"
91
+ fill="#f97316"
92
+ />
93
+ </svg>
94
+ </div>
95
+ </td>
96
+ <td>Uniform scaling with letterboxing; extra space is evenly distributed.</td>
97
+ </tr>
98
+ <tr>
99
+ <td><code>preserveAspectRatio="xMaxYMid slice"</code></td>
100
+ <td>
101
+ <div class="frame">
102
+ <svg viewBox="0 0 100 100" preserveAspectRatio="xMaxYMid slice">
103
+ <rect x="0" y="0" width="100" height="100" fill="#fdf2f8" />
104
+ <path
105
+ d="M50 5 L61 38 L96 38 L67 58 L78 92 L50 72 L22 92 L33 58 L4 38 L39 38 Z"
106
+ fill="#ec4899"
107
+ />
108
+ </svg>
109
+ </div>
110
+ </td>
111
+ <td>Shape remains proportional while cropping to fill height, anchored to the right edge.</td>
112
+ </tr>
113
+ </tbody>
114
+ </table>
115
+ </body>
116
+ </html>
package/playground/public/examples/svg-gradients-linear.html ADDED
@@ -0,0 +1,28 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>SVG Linear Gradients</title>
6
+ <style>body{font-family:Arial,sans-serif;margin:20px}.demo{margin:20px 0;border:1px solid #ccc;padding:15px}svg{border:1px solid #ddd;margin:10px 0}</style>
7
+ </head>
8
+ <body>
9
+ <h1>SVG Linear Gradients</h1>
10
+ <div class="demo">
11
+ <h3>Horizontal & Vertical</h3>
12
+ <svg width="300" height="80">
13
+ <defs>
14
+ <linearGradient id="h" x1="0%" y1="0%" x2="100%" y2="0%">
15
+ <stop offset="0%" stop-color="red"/><stop offset="100%" stop-color="blue"/>
16
+ </linearGradient>
17
+ <linearGradient id="v" x1="0" y1="0" x2="0" y2="50">
18
+ <stop offset="0" stop-color="#ff6b6b"/><stop offset="1" stop-color="#4ecdc4"/>
19
+ </linearGradient>
20
+ </defs>
21
+ <rect x="10" y="10" width="120" height="40" fill="url(#h)"/>
22
+ <rect x="150" y="10" width="120" height="40" fill="url(#v)"/>
23
+ <text x="70" y="65" text-anchor="middle">Horizontal</text>
24
+ <text x="210" y="65" text-anchor="middle">Vertical</text>
25
+ </svg>
26
+ </div>
27
+ </body>
28
+ </html>
package/playground/public/examples/svg-gradients-radial.html ADDED
@@ -0,0 +1,29 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>SVG Radial Gradients</title>
6
+ <style>body{font-family:Arial,sans-serif;margin:20px}.demo{margin:20px 0;border:1px solid #ccc;padding:15px}svg{border:1px solid #ddd;margin:10px 0}</style>
7
+ </head>
8
+ <body>
9
+ <h1>SVG Radial Gradients</h1>
10
+ <div class="demo">
11
+ <h3>Radial & Opacity</h3>
12
+ <svg width="300" height="80">
13
+ <defs>
14
+ <radialGradient id="r" cx="50%" cy="50%" r="50%">
15
+ <stop offset="0%" stop-color="white"/><stop offset="100%" stop-color="#3498db"/>
16
+ </radialGradient>
17
+ <linearGradient id="o">
18
+ <stop offset="0%" stop-color="red" stop-opacity="1"/>
19
+ <stop offset="100%" stop-color="blue" stop-opacity="0.2"/>
20
+ </linearGradient>
21
+ </defs>
22
+ <circle cx="60" cy="40" r="35" fill="url(#r)"/>
23
+ <rect x="150" y="10" width="120" height="60" fill="url(#o)"/>
24
+ <text x="60" y="75" text-anchor="middle">Radial</text>
25
+ <text x="210" y="75" text-anchor="middle">Opacity</text>
26
+ </svg>
27
+ </div>
28
+ </body>
29
+ </html>
package/playground/public/examples/svg-gradients-showcase.html ADDED
@@ -0,0 +1,66 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SVG Gradients Showcase</title>
7
+ <style>
8
+ body { font-family: Arial, sans-serif; margin: 20px; }
9
+ .demo { margin: 20px 0; border: 1px solid #ccc; padding: 15px; }
10
+ svg { border: 1px solid #ddd; margin: 10px 0; }
11
+ </style>
12
+ </head>
13
+ <body>
14
+ <h1>SVG Gradients Demo</h1>
15
+ <p>SVG gradient features: linearGradient and radialGradient with stops.</p>
16
+
17
+ <div class="demo">
18
+ <h3>Linear Gradients</h3>
19
+ <svg width="300" height="100">
20
+ <defs>
21
+ <linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="0%">
22
+ <stop offset="0%" stop-color="red"/><stop offset="100%" stop-color="blue"/>
23
+ </linearGradient>
24
+ <linearGradient id="lg2" x1="0" y1="0" x2="0" y2="50">
25
+ <stop offset="0" stop-color="#ff6b6b"/><stop offset="1" stop-color="#4ecdc4"/>
26
+ </linearGradient>
27
+ </defs>
28
+ <rect x="10" y="10" width="120" height="40" fill="url(#lg1)"/>
29
+ <rect x="150" y="10" width="120" height="40" fill="url(#lg2)"/>
30
+ <text x="70" y="75" text-anchor="middle">Horizontal</text>
31
+ <text x="210" y="75" text-anchor="middle">Vertical</text>
32
+ </svg>
33
+ </div>
34
+
35
+ <div class="demo">
36
+ <h3>Radial Gradients</h3>
37
+ <svg width="300" height="100">
38
+ <defs>
39
+ <radialGradient id="rg1" cx="50%" cy="50%" r="50%">
40
+ <stop offset="0%" stop-color="white"/><stop offset="100%" stop-color="#3498db"/>
41
+ </radialGradient>
42
+ <radialGradient id="rg2" cx="30%" cy="30%" r="70%">
43
+ <stop offset="0%" stop-color="#e74c3c"/><stop offset="100%" stop-color="#27ae60"/>
44
+ </radialGradient>
45
+ </defs>
46
+ <circle cx="60" cy="50" r="40" fill="url(#rg1)"/>
47
+ <circle cx="180" cy="50" r="40" fill="url(#rg2)"/>
48
+ <text x="60" y="95" text-anchor="middle">Simple</text>
49
+ <text x="180" y="95" text-anchor="middle">Offset</text>
50
+ </svg>
51
+ </div>
52
+
53
+ <div class="demo">
54
+ <h3>Gradient with Opacity</h3>
55
+ <svg width="200" height="100">
56
+ <defs>
57
+ <linearGradient id="og">
58
+ <stop offset="0%" stop-color="red" stop-opacity="1"/>
59
+ <stop offset="100%" stop-color="blue" stop-opacity="0.2"/>
60
+ </linearGradient>
61
+ </defs>
62
+ <rect x="20" y="20" width="160" height="60" fill="url(#og)"/>
63
+ </svg>
64
+ </div>
65
+ </body>
66
+ </html>
package/playground/public/examples/svg-image-path-test.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <title>SVG Image Path Test</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial;
10
+ margin: 20px;
11
+ }
12
+
13
+ svg {
14
+ border: 1px solid #ddd;
15
+ margin: 10px 0;
16
+ }
17
+ </style>
18
+ </head>
19
+
20
+ <body>
21
+ <h1>SVG Image Path Resolution Test</h1>
22
+ <p>This tests that absolute paths like /images/duck.jpg resolve correctly.</p>
23
+
24
+ <svg width="500" height="200" viewBox="0 0 500 200">
25
+ <defs>
26
+ <clipPath id="circleClip">
27
+ <circle cx="50" cy="50" r="45" />
28
+ </clipPath>
29
+ </defs>
30
+
31
+ <!-- Test absolute path: /images/duck.jpg -->
32
+ <image x="10" y="10" width="90" height="90" href="/images/duck.jpg" clip-path="url(#circleClip)" />
33
+ <text x="10" y="120" font-size="12">Absolute: /images/duck.jpg</text>
34
+
35
+ <!-- Test absolute path: /images/dice.png -->
36
+ <image x="150" y="10" width="90" height="90" href="/images/dice.png" />
37
+ <text x="150" y="120" font-size="12">Absolute: /images/dice.png</text>
38
+ </svg>
39
+
40
+ <p>If both images appear above, the absolute path resolution is working correctly!</p>
41
+ </body>
42
+
43
+ </html>
package/playground/public/examples/svg-images-clipping.html ADDED
@@ -0,0 +1,27 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>SVG Images (compact)</title>
6
+ <style>body{font-family:Arial;margin:10px}svg{border:1px solid #ddd}</style>
7
+ </head>
8
+ <body>
9
+ <h1>SVG Images (compact)</h1>
10
+
11
+ <!-- Minimal image examples to reduce console noise -->
12
+ <svg width="500" height="140" viewBox="0 0 500 140">
13
+ <defs>
14
+ <clipPath id="c1"><circle cx="45" cy="45" r="40"/></clipPath>
15
+ </defs>
16
+
17
+ <!-- two inline images (absolute /images/ path) -->
18
+ <image x="10" y="10" width="80" height="80" href="/images/duck.jpg" clip-path="url(#c1)"/>
19
+ <image x="110" y="10" width="80" height="80" href="/images/dice.png"/>
20
+
21
+ <!-- a small decorative rect to keep the SVG non-empty visually -->
22
+ <rect x="220" y="10" width="120" height="80" fill="#e0e0e0" stroke="#bbb"/>
23
+ </svg>
24
+
25
+ <p>Shortened demo for faster console runs.</p>
26
+ </body>
27
+ </html>
package/playground/public/examples/svg-path-gallery.html ADDED
@@ -0,0 +1,118 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>SVG Path Gallery</title>
6
+ <style>
7
+ body {
8
+ font-family: system-ui, sans-serif;
9
+ margin: 24px;
10
+ line-height: 1.6;
11
+ }
12
+
13
+ .grid {
14
+ display: grid;
15
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
16
+ gap: 24px;
17
+ }
18
+
19
+ figure {
20
+ border: 1px solid #ccd5dd;
21
+ border-radius: 8px;
22
+ padding: 16px;
23
+ margin: 0;
24
+ background: #f9fbfd;
25
+ }
26
+
27
+ figcaption {
28
+ margin-top: 12px;
29
+ font-size: 0.9rem;
30
+ color: #44505d;
31
+ }
32
+
33
+ svg {
34
+ width: 100%;
35
+ height: auto;
36
+ display: block;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <h1>SVG Path Gallery</h1>
42
+ <p>
43
+ A set of path-heavy shapes covering lines, cubic and quadratic curves, and elliptical arcs. Each drawing exercises
44
+ the new path renderer, fill rules, and stroke settings.
45
+ </p>
46
+ <section class="grid">
47
+ <figure>
48
+ <svg viewBox="0 0 160 160">
49
+ <path
50
+ d="M20 140 L80 20 L140 140 Z"
51
+ fill="#ffb347"
52
+ stroke="#cc6d00"
53
+ stroke-width="6"
54
+ stroke-linejoin="round"
55
+ />
56
+ <path
57
+ d="M80 46 C66 66 54 86 44 108 C58 112 70 118 80 128 C90 118 102 112 116 108 C106 86 94 66 80 46 Z"
58
+ fill="#ffffff"
59
+ fill-opacity="0.6"
60
+ stroke="#333333"
61
+ stroke-width="2"
62
+ />
63
+ </svg>
64
+ <figcaption>Quadratic fan and cubic ribbon layered inside a stroked triangle.</figcaption>
65
+ </figure>
66
+ <figure>
67
+ <svg viewBox="0 0 200 200">
68
+ <path
69
+ d="M40 100 A60 60 0 0 1 160 100 A60 60 0 0 1 40 100 Z"
70
+ fill="#4fb4d8"
71
+ stroke="#0f4c75"
72
+ stroke-width="5"
73
+ />
74
+ <path
75
+ d="M60 100 A40 40 0 0 0 140 100 A40 40 0 0 0 60 100 Z"
76
+ fill="#ffffff"
77
+ fill-opacity="0.7"
78
+ stroke="#0f4c75"
79
+ stroke-width="2"
80
+ stroke-dasharray="4 4"
81
+ />
82
+ <path
83
+ d="M100 70 L112 130 L88 130 Z"
84
+ fill="#0f4c75"
85
+ />
86
+ </svg>
87
+ <figcaption>Nested elliptical arcs with an inset triangle to show arc conversion.</figcaption>
88
+ </figure>
89
+ <figure>
90
+ <svg viewBox="0 0 180 180">
91
+ <path
92
+ d="M40 30 L140 30 L140 150 L40 150 Z
93
+ M70 60 L110 60 L110 120 L70 120 Z"
94
+ fill="#ffd166"
95
+ fill-rule="evenodd"
96
+ stroke="#ef476f"
97
+ stroke-width="8"
98
+ />
99
+ <path
100
+ d="M52 42 C74 82 106 82 128 42"
101
+ fill="none"
102
+ stroke="#073b4c"
103
+ stroke-width="4"
104
+ stroke-linecap="round"
105
+ />
106
+ <path
107
+ d="M52 138 C74 98 106 98 128 138"
108
+ fill="none"
109
+ stroke="#073b4c"
110
+ stroke-width="4"
111
+ stroke-linecap="round"
112
+ />
113
+ </svg>
114
+ <figcaption>Even-odd filling with interior hole plus bezier curves along top and bottom.</figcaption>
115
+ </figure>
116
+ </section>
117
+ </body>
118
+ </html>