native-document 1.0.165 → 1.0.168

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 (488) hide show
  1. package/.vitepress/config.js +166 -0
  2. package/CHANGELOG.md +153 -0
  3. package/components.d.ts +2 -0
  4. package/components.js +2 -1
  5. package/devtools/widget.js +1 -1
  6. package/dist/native-document.components.min.js +11589 -2983
  7. package/dist/native-document.dev.js +2280 -396
  8. package/dist/native-document.dev.js.map +1 -1
  9. package/dist/native-document.min.js +1 -1
  10. package/docs/advanced-components.md +213 -608
  11. package/docs/anchor.md +173 -312
  12. package/docs/cache.md +95 -803
  13. package/docs/cli.md +179 -0
  14. package/docs/components/accordion.md +172 -0
  15. package/docs/components/alert.md +99 -0
  16. package/docs/components/avatar.md +160 -0
  17. package/docs/components/badge.md +102 -0
  18. package/docs/components/breadcrumb.md +89 -0
  19. package/docs/components/button.md +183 -0
  20. package/docs/components/card.md +69 -0
  21. package/docs/components/context-menu.md +118 -0
  22. package/docs/components/data-table.md +345 -0
  23. package/docs/components/dropdown.md +214 -0
  24. package/docs/components/form/autocomplete-field.md +81 -0
  25. package/docs/components/form/checkbox-field.md +41 -0
  26. package/docs/components/form/checkbox-group-field.md +54 -0
  27. package/docs/components/form/color-field.md +64 -0
  28. package/docs/components/form/date-field.md +92 -0
  29. package/docs/components/form/field-collection.md +63 -0
  30. package/docs/components/form/file-field.md +203 -0
  31. package/docs/components/form/form-control.md +87 -0
  32. package/docs/components/form/image-field.md +90 -0
  33. package/docs/components/form/index.md +115 -0
  34. package/docs/components/form/number-field.md +65 -0
  35. package/docs/components/form/radio-field.md +51 -0
  36. package/docs/components/form/select-field.md +123 -0
  37. package/docs/components/form/slider.md +136 -0
  38. package/docs/components/form/string-field.md +134 -0
  39. package/docs/components/form/textarea-field.md +65 -0
  40. package/docs/components/form-fields.md +372 -0
  41. package/docs/components/getting-started.md +264 -0
  42. package/docs/components/index.md +337 -0
  43. package/docs/components/layout.md +279 -0
  44. package/docs/components/list.md +73 -0
  45. package/docs/components/menu.md +215 -0
  46. package/docs/components/modal.md +156 -0
  47. package/docs/components/pagination.md +95 -0
  48. package/docs/components/popover.md +131 -0
  49. package/docs/components/progress.md +111 -0
  50. package/docs/components/shortcut-manager.md +221 -0
  51. package/docs/components/simple-table.md +107 -0
  52. package/docs/components/skeleton.md +155 -0
  53. package/docs/components/spinner.md +100 -0
  54. package/docs/components/splitter.md +133 -0
  55. package/docs/components/stepper.md +163 -0
  56. package/docs/components/switch.md +113 -0
  57. package/docs/components/tabs.md +153 -0
  58. package/docs/components/toast.md +119 -0
  59. package/docs/components/tooltip.md +151 -0
  60. package/docs/components/traits.md +261 -0
  61. package/docs/conditional-rendering.md +170 -588
  62. package/docs/contributing.md +300 -25
  63. package/docs/core-concepts.md +205 -374
  64. package/docs/elements.md +251 -367
  65. package/docs/extending-native-document-element.md +192 -207
  66. package/docs/filters.md +153 -1122
  67. package/docs/getting-started.md +193 -267
  68. package/docs/i18n.md +241 -0
  69. package/docs/index.md +76 -0
  70. package/docs/lifecycle-events.md +143 -75
  71. package/docs/list-rendering.md +227 -852
  72. package/docs/memory-management.md +134 -47
  73. package/docs/native-document-element.md +337 -186
  74. package/docs/native-fetch.md +99 -630
  75. package/docs/observable-resource.md +364 -0
  76. package/docs/observables.md +592 -526
  77. package/docs/routing.md +244 -653
  78. package/docs/state-management.md +134 -241
  79. package/docs/svg-elements.md +231 -0
  80. package/docs/theming.md +409 -0
  81. package/docs/validation.md +95 -97
  82. package/docs/vitepress-conventions.md +219 -0
  83. package/eslint.config.js +28 -33
  84. package/i18n.js +1 -1
  85. package/i18n.ts +2 -0
  86. package/index.js +3 -0
  87. package/package.json +36 -14
  88. package/readme.md +269 -89
  89. package/src/components/$traits/has-draggable/HasDraggable.d.ts +4 -0
  90. package/src/components/$traits/has-draggable/HasDraggable.js +13 -0
  91. package/src/components/$traits/has-items/HasItems.d.ts +9 -0
  92. package/src/components/$traits/has-items/HasItems.js +6 -6
  93. package/src/components/$traits/has-position/HasFullPosition.d.ts +14 -0
  94. package/src/components/$traits/has-position/HasFullPosition.js +44 -0
  95. package/src/components/$traits/has-position/HasPosition.d.ts +7 -0
  96. package/src/components/$traits/has-position/HasPosition.js +23 -1
  97. package/src/components/$traits/has-resizable/HasResizable.d.ts +13 -0
  98. package/src/components/$traits/has-resizable/HasResizable.js +9 -0
  99. package/src/components/$traits/has-validation/HasValidation.d.ts +17 -0
  100. package/src/components/$traits/has-validation/HasValidation.js +54 -7
  101. package/src/components/BaseComponent.d.ts +32 -0
  102. package/src/components/BaseComponent.js +65 -9
  103. package/src/components/accordion/Accordion.js +39 -14
  104. package/src/components/accordion/AccordionItem.js +45 -14
  105. package/src/components/accordion/index.js +2 -2
  106. package/src/components/accordion/types/Accordion.d.ts +47 -0
  107. package/src/components/accordion/types/AccordionItem.d.ts +48 -0
  108. package/src/components/alert/Alert.js +70 -38
  109. package/src/components/alert/index.js +2 -2
  110. package/src/components/alert/types/Alert.d.ts +62 -0
  111. package/src/components/avatar/Avatar.js +49 -12
  112. package/src/components/avatar/AvatarGroup.js +50 -2
  113. package/src/components/avatar/index.js +2 -2
  114. package/src/components/avatar/types/Avatar.d.ts +74 -0
  115. package/src/components/avatar/types/AvatarGroup.d.ts +32 -0
  116. package/src/components/badge/Badge.js +125 -5
  117. package/src/components/badge/index.js +2 -2
  118. package/src/components/badge/types/Badge.d.ts +51 -0
  119. package/src/components/breadcrumb/BreadCrumb.js +61 -5
  120. package/src/components/breadcrumb/index.js +2 -2
  121. package/src/components/breadcrumb/types/BreadCrumb.d.ts +42 -0
  122. package/src/components/button/Button.js +164 -9
  123. package/src/components/button/index.js +1 -1
  124. package/src/components/button/types/Button.d.ts +62 -0
  125. package/src/components/card/Card.js +204 -32
  126. package/src/components/card/index.js +4 -4
  127. package/src/components/card/types/Card.d.ts +42 -0
  128. package/src/components/context-menu/ContextMenu.js +49 -5
  129. package/src/components/context-menu/ContextMenuGroup.js +15 -2
  130. package/src/components/context-menu/ContextMenuItem.js +14 -2
  131. package/src/components/context-menu/index.js +5 -5
  132. package/src/components/context-menu/types/ContextMenu.d.ts +30 -0
  133. package/src/components/context-menu/types/ContextMenuGroup.d.ts +18 -0
  134. package/src/components/context-menu/types/ContextMenuItem.d.ts +18 -0
  135. package/src/components/divider/Divider.js +120 -4
  136. package/src/components/divider/index.js +3 -3
  137. package/src/components/divider/types/Divider.d.ts +55 -0
  138. package/src/components/dropdown/Dropdown.js +239 -16
  139. package/src/components/dropdown/DropdownDivider.js +22 -2
  140. package/src/components/dropdown/DropdownGroup.js +44 -5
  141. package/src/components/dropdown/DropdownItem.js +76 -3
  142. package/src/components/dropdown/DropdownTrigger.js +49 -20
  143. package/src/components/dropdown/helpers.js +1 -1
  144. package/src/components/dropdown/index.js +6 -6
  145. package/src/components/dropdown/types/Dropdown.d.ts +88 -0
  146. package/src/components/dropdown/types/DropdownDivider.d.ts +20 -0
  147. package/src/components/dropdown/types/DropdownGroup.d.ts +25 -0
  148. package/src/components/dropdown/types/DropdownItem.d.ts +41 -0
  149. package/src/components/dropdown/types/DropdownTrigger.d.ts +32 -0
  150. package/src/components/form/FormControl.js +156 -13
  151. package/src/components/form/field/Field.js +172 -9
  152. package/src/components/form/field/FieldCollection.js +116 -12
  153. package/src/components/form/field/types/AutocompleteField.js +92 -2
  154. package/src/components/form/field/types/CheckboxField.js +43 -2
  155. package/src/components/form/field/types/CheckboxGroupField.js +83 -6
  156. package/src/components/form/field/types/ColorField.js +56 -3
  157. package/src/components/form/field/types/DateField.js +155 -4
  158. package/src/components/form/field/types/EmailField.js +54 -4
  159. package/src/components/form/field/types/FileField.js +140 -6
  160. package/src/components/form/field/types/HiddenField.js +27 -1
  161. package/src/components/form/field/types/ImageField.js +82 -3
  162. package/src/components/form/field/types/NumberField.js +97 -4
  163. package/src/components/form/field/types/PasswordField.js +103 -7
  164. package/src/components/form/field/types/RadioField.js +75 -4
  165. package/src/components/form/field/types/RangeField.js +67 -1
  166. package/src/components/form/field/types/SearchField.js +41 -2
  167. package/src/components/form/field/types/SelectField.js +133 -4
  168. package/src/components/form/field/types/StringField.js +91 -2
  169. package/src/components/form/field/types/TelField.js +55 -4
  170. package/src/components/form/field/types/TextAreaField.js +76 -2
  171. package/src/components/form/field/types/TimeField.js +120 -5
  172. package/src/components/form/field/types/UrlField.js +59 -4
  173. package/src/components/form/field/types/file-field-mode/FileAvatarMode.js +83 -4
  174. package/src/components/form/field/types/file-field-mode/FileDropzoneMode.js +61 -3
  175. package/src/components/form/field/types/file-field-mode/FileItemPreview.js +79 -3
  176. package/src/components/form/field/types/file-field-mode/FileNativeMode.js +24 -2
  177. package/src/components/form/field/types/file-field-mode/FileUploadButtonMode.js +64 -3
  178. package/src/components/form/field/types/file-field-mode/FileWallMode.js +56 -3
  179. package/src/components/form/index.js +28 -28
  180. package/src/components/form/types/Field.d.ts +73 -0
  181. package/src/components/form/types/FieldCollection.d.ts +53 -0
  182. package/src/components/form/types/FormControl.d.ts +64 -0
  183. package/src/components/form/types/fields/AutocompleteField.d.ts +48 -0
  184. package/src/components/form/types/fields/CheckboxField.d.ts +33 -0
  185. package/src/components/form/types/fields/CheckboxGroupField.d.ts +49 -0
  186. package/src/components/form/types/fields/ColorField.d.ts +37 -0
  187. package/src/components/form/types/fields/DateField.d.ts +70 -0
  188. package/src/components/form/types/fields/EmailField.d.ts +35 -0
  189. package/src/components/form/types/fields/FileAvatarMode.d.ts +46 -0
  190. package/src/components/form/types/fields/FileDropzoneMode.d.ts +28 -0
  191. package/src/components/form/types/fields/FileField.d.ts +56 -0
  192. package/src/components/form/types/fields/FileItemPreview.d.ts +35 -0
  193. package/src/components/form/types/fields/FileNativeMode.d.ts +21 -0
  194. package/src/components/form/types/fields/FileUploadButtonMode.d.ts +34 -0
  195. package/src/components/form/types/fields/FileWallMode.d.ts +32 -0
  196. package/src/components/form/types/fields/HiddenField.d.ts +26 -0
  197. package/src/components/form/types/fields/ImageField.d.ts +45 -0
  198. package/src/components/form/types/fields/NumberField.d.ts +48 -0
  199. package/src/components/form/types/fields/PasswordField.d.ts +46 -0
  200. package/src/components/form/types/fields/RadioField.d.ts +48 -0
  201. package/src/components/form/types/fields/RangeField.d.ts +44 -0
  202. package/src/components/form/types/fields/SearchField.d.ts +34 -0
  203. package/src/components/form/types/fields/SelectField.d.ts +71 -0
  204. package/src/components/form/types/fields/StringField.d.ts +48 -0
  205. package/src/components/form/types/fields/TelField.d.ts +37 -0
  206. package/src/components/form/types/fields/TextAreaField.d.ts +44 -0
  207. package/src/components/form/types/fields/TimeField.d.ts +51 -0
  208. package/src/components/form/types/fields/UrlField.d.ts +35 -0
  209. package/src/components/form/validation/Validation.js +54 -54
  210. package/src/components/index.d.ts +160 -0
  211. package/src/components/list/HasListItem.js +171 -0
  212. package/src/components/list/List.js +85 -67
  213. package/src/components/list/ListDivider.js +39 -0
  214. package/src/components/list/ListGroup.js +105 -38
  215. package/src/components/list/ListItem.js +158 -49
  216. package/src/components/list/index.js +8 -6
  217. package/src/components/list/types/List.d.ts +43 -0
  218. package/src/components/list/types/ListGroup.d.ts +37 -0
  219. package/src/components/list/types/ListItem.d.ts +53 -0
  220. package/src/components/menu/HasMenuItem.js +55 -6
  221. package/src/components/menu/Menu.js +113 -22
  222. package/src/components/menu/MenuDivider.js +18 -2
  223. package/src/components/menu/MenuGroup.js +61 -6
  224. package/src/components/menu/MenuItem.js +95 -11
  225. package/src/components/menu/MenuLink.js +27 -2
  226. package/src/components/menu/index.js +6 -6
  227. package/src/components/menu/types/Menu.d.ts +60 -0
  228. package/src/components/menu/types/MenuDivider.d.ts +19 -0
  229. package/src/components/menu/types/MenuGroup.d.ts +44 -0
  230. package/src/components/menu/types/MenuItem.d.ts +46 -0
  231. package/src/components/menu/types/MenuLink.d.ts +16 -0
  232. package/src/components/modal/Modal.js +258 -17
  233. package/src/components/modal/index.js +3 -3
  234. package/src/components/modal/types/Modal.d.ts +94 -0
  235. package/src/components/pagination/Pagination.js +155 -7
  236. package/src/components/pagination/index.js +3 -3
  237. package/src/components/pagination/types/Pagination.d.ts +68 -0
  238. package/src/components/popover/Popover.js +198 -11
  239. package/src/components/popover/PopoverFooter.js +33 -9
  240. package/src/components/popover/PopoverHeader.js +33 -8
  241. package/src/components/popover/index.js +4 -4
  242. package/src/components/popover/types/Popover.d.ts +83 -0
  243. package/src/components/popover/types/PopoverFooter.d.ts +24 -0
  244. package/src/components/popover/types/PopoverHeader.d.ts +26 -0
  245. package/src/components/progress/Progress.js +182 -13
  246. package/src/components/progress/index.js +3 -3
  247. package/src/components/progress/types/Progress.d.ts +77 -0
  248. package/src/components/skeleton/Skeleton.js +117 -49
  249. package/src/components/skeleton/index.js +3 -3
  250. package/src/components/skeleton/types/Skeleton.d.ts +55 -0
  251. package/src/components/slider/Slider.js +207 -10
  252. package/src/components/slider/index.js +2 -2
  253. package/src/components/slider/types/Slider.d.ts +82 -0
  254. package/src/components/spacer/Spacer.js +12 -3
  255. package/src/components/spacer/index.js +2 -2
  256. package/src/components/spacer/types/Spacer.d.ts +19 -0
  257. package/src/components/spinner/Spinner.js +180 -9
  258. package/src/components/spinner/index.js +3 -3
  259. package/src/components/spinner/types/Spinner.d.ts +71 -0
  260. package/src/components/splitter/Splitter.js +76 -13
  261. package/src/components/splitter/SplitterGutter.js +67 -5
  262. package/src/components/splitter/SplitterPanel.js +69 -2
  263. package/src/components/splitter/index.js +5 -5
  264. package/src/components/splitter/types/Splitter.d.ts +38 -0
  265. package/src/components/splitter/types/SplitterGutter.d.ts +38 -0
  266. package/src/components/splitter/types/SplitterPanel.d.ts +41 -0
  267. package/src/components/stacks/AbsoluteStack.js +23 -3
  268. package/src/components/stacks/FixedStack.js +23 -3
  269. package/src/components/stacks/HStack.js +24 -3
  270. package/src/components/stacks/PositionStack.js +111 -3
  271. package/src/components/stacks/RelativeStack.js +23 -3
  272. package/src/components/stacks/Stack.js +73 -2
  273. package/src/components/stacks/VStack.js +24 -4
  274. package/src/components/stacks/index.js +7 -7
  275. package/src/components/stacks/types/AbsoluteStack.d.ts +16 -0
  276. package/src/components/stacks/types/FixedStack.d.ts +16 -0
  277. package/src/components/stacks/types/HStack.d.ts +16 -0
  278. package/src/components/stacks/types/PositionStack.d.ts +54 -0
  279. package/src/components/stacks/types/RelativeStack.d.ts +17 -0
  280. package/src/components/stacks/types/Stack.d.ts +39 -0
  281. package/src/components/stacks/types/VStack.d.ts +16 -0
  282. package/src/components/stepper/Stepper.js +152 -12
  283. package/src/components/stepper/StepperStep.js +104 -3
  284. package/src/components/stepper/index.js +4 -4
  285. package/src/components/stepper/types/Stepper.d.ts +68 -0
  286. package/src/components/stepper/types/StepperStep.d.ts +54 -0
  287. package/src/components/switch/Switch.js +143 -6
  288. package/src/components/switch/index.js +1 -1
  289. package/src/components/switch/types/Switch.d.ts +55 -0
  290. package/src/components/table/Column.js +105 -6
  291. package/src/components/table/ColumnGroup.js +48 -3
  292. package/src/components/table/DataTable.js +256 -19
  293. package/src/components/table/SimpleTable.js +58 -4
  294. package/src/components/table/index.js +2 -2
  295. package/src/components/table/types/Column.d.ts +49 -0
  296. package/src/components/table/types/ColumnGroup.d.ts +28 -0
  297. package/src/components/table/types/DataTable.d.ts +97 -0
  298. package/src/components/table/types/SimpleTable.d.ts +40 -0
  299. package/src/components/tabs/Tabs.js +192 -5
  300. package/src/components/tabs/index.js +3 -3
  301. package/src/components/tabs/types/Tabs.d.ts +78 -0
  302. package/src/components/toast/Toast.js +133 -5
  303. package/src/components/toast/index.js +3 -3
  304. package/src/components/toast/types/Toast.d.ts +57 -0
  305. package/src/components/toast/types/ToastError.d.ts +7 -0
  306. package/src/components/toast/types/ToastInfo.d.ts +7 -0
  307. package/src/components/toast/types/ToastSuccess.d.ts +7 -0
  308. package/src/components/toast/types/ToastWarning.d.ts +7 -0
  309. package/src/components/tooltip/Tooltip.js +157 -13
  310. package/src/components/tooltip/index.js +2 -2
  311. package/src/components/tooltip/prototypes.js +1 -1
  312. package/src/components/tooltip/types/Tooltip.d.ts +65 -0
  313. package/src/core/data/MemoryManager.js +2 -2
  314. package/src/core/data/Observable.js +15 -18
  315. package/src/core/data/ObservableArray.js +118 -46
  316. package/src/core/data/ObservableChecker.js +2 -2
  317. package/src/core/data/ObservableItem.js +135 -21
  318. package/src/core/data/ObservableObject.js +126 -35
  319. package/src/core/data/ObservableResource.js +118 -3
  320. package/src/core/data/Store.js +142 -26
  321. package/src/core/data/observable-helpers/observable.is-to.js +196 -1
  322. package/src/core/data/observable-helpers/observable.prototypes.js +35 -8
  323. package/src/core/elements/anchor/anchor-with-sentinel.js +23 -2
  324. package/src/core/elements/anchor/anchor.js +16 -7
  325. package/src/core/elements/anchor/one-child-anchor-overwriting.js +2 -2
  326. package/src/core/elements/content-formatter.js +1 -1
  327. package/src/core/elements/control/for-each-array.js +9 -9
  328. package/src/core/elements/control/for-each.js +14 -14
  329. package/src/core/elements/control/show-if.js +11 -11
  330. package/src/core/elements/control/show-when.js +5 -5
  331. package/src/core/elements/control/switch.js +14 -14
  332. package/src/core/elements/description-list.js +1 -1
  333. package/src/core/elements/form.js +2 -2
  334. package/src/core/elements/fragment.js +1 -1
  335. package/src/core/elements/html5-semantics.js +1 -1
  336. package/src/core/elements/img.js +3 -3
  337. package/src/core/elements/interactive.js +1 -1
  338. package/src/core/elements/list.js +1 -1
  339. package/src/core/elements/medias.js +1 -1
  340. package/src/core/elements/meta-data.js +1 -1
  341. package/src/core/elements/svg.js +1 -1
  342. package/src/core/elements/table.js +1 -1
  343. package/src/core/errors/ArgTypesError.js +1 -1
  344. package/src/core/utils/HasEventEmitter.js +36 -2
  345. package/src/core/utils/args-types.js +9 -9
  346. package/src/core/utils/cache.js +1 -1
  347. package/src/core/utils/callback-handler.js +29 -0
  348. package/src/core/utils/debug-manager.js +6 -6
  349. package/src/core/utils/events.js +139 -139
  350. package/src/core/utils/filters/date.js +84 -3
  351. package/src/core/utils/filters/standard.js +136 -11
  352. package/src/core/utils/filters/strings.js +34 -2
  353. package/src/core/utils/filters/utils.js +40 -4
  354. package/src/core/utils/formatters.js +4 -4
  355. package/src/core/utils/helpers.js +39 -7
  356. package/src/core/utils/localstorage.js +11 -11
  357. package/src/core/utils/memoize.js +56 -3
  358. package/src/core/utils/plugins-manager.js +3 -3
  359. package/src/core/utils/property-accumulator.js +6 -6
  360. package/src/core/utils/prototypes.js +26 -1
  361. package/src/core/utils/shortcut-manager.js +2 -2
  362. package/src/core/utils/validator.js +8 -8
  363. package/src/core/wrappers/AttributesWrapper.js +32 -22
  364. package/src/core/wrappers/DocumentObserver.js +3 -3
  365. package/src/core/wrappers/ElementCreator.js +5 -5
  366. package/src/core/wrappers/HtmlElementWrapper.js +38 -12
  367. package/src/core/wrappers/NDElement.js +328 -22
  368. package/src/core/wrappers/NdPrototype.js +60 -16
  369. package/src/core/wrappers/SingletonView.js +50 -2
  370. package/src/core/wrappers/SvgElementWrapper.js +1 -1
  371. package/src/core/wrappers/constants.js +35 -2
  372. package/src/core/wrappers/prototypes/attributes-extensions.js +7 -7
  373. package/src/core/wrappers/prototypes/nd-element-extensions.js +72 -6
  374. package/src/core/wrappers/prototypes/nd-element.transition.extensions.js +42 -2
  375. package/src/core/wrappers/template-cloner/NodeCloner.js +53 -8
  376. package/src/core/wrappers/template-cloner/TemplateCloner.js +75 -6
  377. package/src/core/wrappers/template-cloner/attributes-hydrator.js +58 -2
  378. package/src/core/wrappers/template-cloner/utils.js +42 -6
  379. package/src/fetch/NativeFetch.js +3 -3
  380. package/src/i18n/bin/scan.js +6 -6
  381. package/src/i18n/index.d.ts +2 -0
  382. package/src/i18n/service/I18nService.d.ts +27 -0
  383. package/src/i18n/service/I18nService.js +5 -5
  384. package/src/i18n/service/functions.d.ts +22 -0
  385. package/src/i18n/service/functions.js +2 -2
  386. package/src/router/Route.js +3 -3
  387. package/src/router/RouteGroupHelper.js +2 -2
  388. package/src/router/Router.js +15 -15
  389. package/src/router/RouterComponent.js +33 -7
  390. package/src/router/link.js +4 -4
  391. package/src/router/modes/HashRouter.js +2 -2
  392. package/src/router/modes/HistoryRouter.js +2 -2
  393. package/src/router/modes/MemoryRouter.js +1 -1
  394. package/src/ui/components/accordion/AccordionItemRender.js +3 -3
  395. package/src/ui/components/accordion/AccordionRender.js +1 -1
  396. package/src/ui/components/alert/AlertRender.js +10 -10
  397. package/src/ui/components/avatar/avata-group/AvatarGroupRender.js +1 -1
  398. package/src/ui/components/avatar/avatar/AvatarRender.js +1 -1
  399. package/src/ui/components/breadcrumb/BreadcrumbRender.js +2 -2
  400. package/src/ui/components/button/ButtonRender.js +1 -1
  401. package/src/ui/components/card/CardRender.js +133 -0
  402. package/src/ui/components/card/card.css +169 -0
  403. package/src/ui/components/contextmenu/ContextmenuRender.js +6 -6
  404. package/src/ui/components/dropdown/DropdownRender.js +8 -8
  405. package/src/ui/components/dropdown/group/DropdownGroupRender.js +2 -2
  406. package/src/ui/components/dropdown/item/DropdownItemRender.js +1 -1
  407. package/src/ui/components/form/FieldCollectionRender.js +2 -2
  408. package/src/ui/components/form/FormControlRender.js +5 -5
  409. package/src/ui/components/form/fields/AutocompleteFieldRender.js +3 -3
  410. package/src/ui/components/form/fields/CheckboxFieldRender.js +1 -1
  411. package/src/ui/components/form/fields/CheckboxGroupFieldRender.js +1 -1
  412. package/src/ui/components/form/fields/DateFieldRender.js +7 -7
  413. package/src/ui/components/form/fields/EmailFieldRender.js +1 -1
  414. package/src/ui/components/form/fields/FieldRender.js +4 -4
  415. package/src/ui/components/form/fields/FileFieldRender.js +1 -1
  416. package/src/ui/components/form/fields/PasswordFieldRender.js +2 -2
  417. package/src/ui/components/form/fields/RadioFieldRender.js +1 -1
  418. package/src/ui/components/form/fields/RangeFieldRender.js +1 -1
  419. package/src/ui/components/form/fields/SelectFieldRender.js +2 -2
  420. package/src/ui/components/form/fields/SliderFieldRender.js +6 -6
  421. package/src/ui/components/form/fields/StringFieldRender.js +1 -1
  422. package/src/ui/components/form/fields/TelFieldRender.js +1 -1
  423. package/src/ui/components/form/fields/TextAreaFieldRender.js +1 -1
  424. package/src/ui/components/form/fields/TimeFieldRender.js +3 -3
  425. package/src/ui/components/form/fields/UrlFieldRender.js +1 -1
  426. package/src/ui/components/form/file-upload-mode/FileAvatarModeRender.js +1 -1
  427. package/src/ui/components/form/file-upload-mode/FileDropzoneModeRender.js +2 -2
  428. package/src/ui/components/form/file-upload-mode/FileUploadButtonModeRender.js +2 -2
  429. package/src/ui/components/form/file-upload-mode/FileWallModeRender.js +1 -1
  430. package/src/ui/components/form/helpers.js +8 -8
  431. package/src/ui/components/form/index.js +27 -27
  432. package/src/ui/components/list/ListRender.js +18 -0
  433. package/src/ui/components/list/divider/ListDividerRender.js +10 -0
  434. package/src/ui/components/list/divider/list-divider.css +12 -0
  435. package/src/ui/components/list/group/ListGroupRender.js +61 -0
  436. package/src/ui/components/list/group/list-group.css +62 -0
  437. package/src/ui/components/list/item/ListItemRender.js +238 -0
  438. package/src/ui/components/list/item/list-item.css +191 -0
  439. package/src/ui/components/list/list.css +24 -0
  440. package/src/ui/components/menu/MenuDividerRender.js +1 -1
  441. package/src/ui/components/menu/MenuGroupRender.js +3 -3
  442. package/src/ui/components/menu/MenuItemRender.js +2 -2
  443. package/src/ui/components/menu/MenuLinkRender.js +3 -3
  444. package/src/ui/components/menu/helpers.js +4 -4
  445. package/src/ui/components/modal/ModalRender.js +4 -4
  446. package/src/ui/components/pagination/PaginationRender.js +9 -9
  447. package/src/ui/components/popover/PopoverRender.js +7 -7
  448. package/src/ui/components/progress/ProgressRender.js +12 -12
  449. package/src/ui/components/skeleton/SkeletonRender.js +56 -0
  450. package/src/ui/components/spacer/SpacerRender.js +10 -0
  451. package/src/ui/components/splitter/SplitterGutterRender.js +1 -1
  452. package/src/ui/components/splitter/SplitterPanelRender.js +2 -2
  453. package/src/ui/components/stacks/PositionStackRender.js +1 -1
  454. package/src/ui/components/stacks/StackRender.js +1 -1
  455. package/src/ui/components/stacks/absolute-stack/AbsoluteStackRender.js +1 -1
  456. package/src/ui/components/stacks/fixed-stack/FixedStackRender.js +1 -1
  457. package/src/ui/components/stacks/h-stack/HStackRender.js +1 -1
  458. package/src/ui/components/stacks/index.js +5 -5
  459. package/src/ui/components/stacks/relative-stack/RelativeStackRender.js +1 -1
  460. package/src/ui/components/stacks/v-stack/VStackRender.js +1 -1
  461. package/src/ui/components/stepper/StepperRender.js +2 -2
  462. package/src/ui/components/stepper/StepperStepRender.js +4 -4
  463. package/src/ui/components/switch/SwitchRender.js +4 -4
  464. package/src/ui/components/table/data-table/DataTableRender.js +5 -5
  465. package/src/ui/components/table/data-table/bulk-actions.js +7 -7
  466. package/src/ui/components/table/data-table/pagination.js +6 -6
  467. package/src/ui/components/table/data-table/tables.js +25 -25
  468. package/src/ui/components/table/data-table/toolbar.js +3 -3
  469. package/src/ui/components/table/simple-table/SimpleTableRender.js +8 -8
  470. package/src/ui/components/tabs/TabsRender.js +11 -11
  471. package/src/ui/components/toast/ToastRender.js +3 -3
  472. package/src/ui/components/tooltip/TooltipRender.js +1 -1
  473. package/src/ui/index.js +44 -36
  474. package/types/elements.d.ts +163 -1037
  475. package/types/forms.d.ts +16 -20
  476. package/types/globals.d.ts +543 -0
  477. package/types/images.d.ts +2 -2
  478. package/types/observable-resource.d.ts +3 -0
  479. package/types/property-accumulator.d.ts +4 -4
  480. package/types/store.d.ts +26 -2
  481. package/types/validator.ts +3 -3
  482. package/ui.js +1 -0
  483. package/src/components/form/field/DefaultRender.js +0 -77
  484. package/src/components/form/field/FieldFactory.js +0 -107
  485. package/src/components/skeleton/SkeletonList.js +0 -0
  486. package/src/components/skeleton/SkeletonParagraph.js +0 -0
  487. package/src/components/skeleton/SkeletonTable.js +0 -0
  488. /package/{src/components/skeleton/SkeletonCard.js → docs/tutorials/.gitkeep} +0 -0
package/docs/getting-started.md CHANGED
@@ -1,14 +1,46 @@
1
+ ---
2
+ title: Getting Started
3
+ description: Install NativeDocument and build your first application in minutes
4
+ ---
5
+
1
6
  # Getting Started
2
7
 
3
- Welcome to NativeDocument! This guide will help you set up and create your first application with NativeDocument.
8
+ Welcome to NativeDocument! This guide will help you set up and create your first application.
4
9
 
5
10
  ## Installation
6
11
 
7
- NativeDocument offers multiple installation methods to fit your development workflow.
12
+ NativeDocument offers multiple installation methods to fit your workflow.
13
+
14
+ ### Option 1: CLI (Recommended)
15
+
16
+ The fastest way to start a complete project with Vite, routing, i18n, and a ready-to-use folder structure:
17
+
18
+ ```bash
19
+ npm install -g @native-document/cli
20
+
21
+ nd create MyApp # default structure
22
+ nd create MyApp --feature # feature-based architecture
23
+
24
+ cd MyApp
25
+ npm install
26
+ npm start
27
+ ```
28
+
29
+ Verify the CLI is installed correctly:
30
+
31
+ ```bash
32
+ nd --help
33
+ ```
34
+
35
+ > The CLI source is available at [github.com/afrocodeur/native-document-cli](https://github.com/afrocodeur/native-document-cli).
36
+
37
+ See the **[CLI guide](./cli.md)** for all available commands.
8
38
 
9
- ### Method 1: CDN (Recommended for beginners)
39
+ ---
10
40
 
11
- The fastest way to get started is using our CDN. Simply add this script tag to your HTML:
41
+ ### Option 2: CDN (No build step)
42
+
43
+ The quickest way to experiment without any tooling:
12
44
 
13
45
  ```html
14
46
  <!DOCTYPE html>
@@ -24,12 +56,11 @@ The fastest way to get started is using our CDN. Simply add this script tag to y
24
56
  const { Div, Button } = NativeDocument.elements;
25
57
  const { Observable } = NativeDocument;
26
58
 
27
- // Your code here
28
59
  const count = Observable(0);
29
60
 
30
61
  const App = Div({ class: 'app' }, [
31
62
  Div(['Count: ', count]),
32
- Button('Increment').nd.onClick(() => count.set(count.val() + 1))
63
+ Button('Increment').nd.onClick(() => count.$value++)
33
64
  ]);
34
65
 
35
66
  document.body.appendChild(App);
@@ -38,26 +69,11 @@ The fastest way to get started is using our CDN. Simply add this script tag to y
38
69
  </html>
39
70
  ```
40
71
 
41
- ### Method 2: Vite Template (Recommended for projects)
42
-
43
- For a complete development setup with Vite, use our official template:
72
+ ---
44
73
 
45
- ```bash
46
- npx degit afrocodeur/native-document-vite my-app
47
- cd my-app
48
- npm install
49
- npm run dev
50
- ```
74
+ ### Option 3: NPM/Yarn (existing project)
51
75
 
52
- This template includes:
53
- - Pre-configured Vite setup
54
- - Development server with auto reload
55
- - Build optimization
56
- - Example components
57
-
58
- ### Method 3: NPM/Yarn Package
59
-
60
- Install NativeDocument as a dependency in your existing project:
76
+ Install NativeDocument into an existing Vite project:
61
77
 
62
78
  ```bash
63
79
  npm install native-document
@@ -68,132 +84,148 @@ yarn add native-document
68
84
  Then import what you need:
69
85
 
70
86
  ```javascript
71
- import { Div, Button } from 'native-document/src/elements'
72
- import { Observable } from 'native-document'
87
+ import { Div, Button } from 'native-document/elements';
88
+ import { Observable } from 'native-document';
73
89
 
74
90
  const count = Observable(0);
75
91
 
76
92
  const App = Div({ class: 'app' }, [
77
93
  Div(['Count: ', count]),
78
- Button('Increment').nd.onClick(() => count.set(count.val() + 1))
94
+ Button('Increment').nd.onClick(() => count.$value++)
79
95
  ]);
80
96
 
81
97
  document.body.appendChild(App);
82
98
  ```
83
99
 
84
- ## Your First Application
100
+ ---
85
101
 
86
- Let's build a simple counter application to understand NativeDocument basics.
102
+ ## Project Structure
87
103
 
88
- ### Step 1: Create the HTML Structure
104
+ ### Default structure
89
105
 
90
- ```html
91
- <!DOCTYPE html>
92
- <html lang="en">
93
- <head>
94
- <meta charset="UTF-8">
95
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
96
- <title>Counter App</title>
97
- <style>
98
- .counter-app {
99
- max-width: 400px;
100
- margin: 50px auto;
101
- padding: 20px;
102
- text-align: center;
103
- font-family: Arial, sans-serif;
104
- }
105
- .count-display {
106
- font-size: 2rem;
107
- margin: 20px 0;
108
- color: #333;
109
- }
110
- button {
111
- margin: 0 10px;
112
- padding: 10px 20px;
113
- font-size: 1rem;
114
- cursor: pointer;
115
- }
116
- </style>
117
- </head>
118
- <body>
119
- <script src="https://cdn.jsdelivr.net/gh/afrocodeur/native-document@latest/dist/native-document.min.js"></script>
120
- <script>
121
- // Your JavaScript code will go here
122
- </script>
123
- </body>
124
- </html>
106
+ ```
107
+ src/
108
+ ├── main.js # Entry point
109
+ ├── index.css # Global styles
110
+ │
111
+ ├── core/
112
+ │ ├── lang/
113
+ │ │ ├── lang.js # i18n configuration
114
+ │ │ └── locales/
115
+ │ │ ├── en.json # English translations
116
+ │ │ └── fr.json # French translations
117
+ │ ├── middlewares/ # Route middlewares
118
+ │ └── services/ # Core services (http, i18n...)
119
+ │
120
+ ├── routes/
121
+ │ ├── routes.js # Route definitions
122
+ │ └── layouts/
123
+ │ └── DefaultLayout/ # Default layout
124
+ │
125
+ ├── components/ # Reusable UI components
126
+ │
127
+ ├── pages/
128
+ │ ├── home/
129
+ │ │ ├── HomePage.js
130
+ │ │ └── home.css
131
+ │ └── not-found/
132
+ │ ├── NotFoundPage.js
133
+ │ └── not-found.css
134
+ │
135
+ └── services/ # Business logic + observables
136
+ ```
137
+
138
+ ### Feature-based structure (`--feature`)
139
+
140
+ When created with `nd create MyApp --feature`, a `src/features/` folder is added. Each feature is self-contained:
141
+
142
+ ```
143
+ src/features/auth/
144
+ ├── components/
145
+ ├── services/
146
+ │ └── AuthService/
147
+ │ └── AuthService.js
148
+ ├── utils/
149
+ └── index.js # Public API - import from here
125
150
  ```
126
151
 
127
- ### Step 2: Add the JavaScript Logic
152
+ Import from a feature via its public API:
128
153
 
129
154
  ```javascript
130
- const { Div, Button, H1 } = NativeDocument.elements;
131
- const { Observable } = NativeDocument;
155
+ import { AuthService } from '@/features/auth';
156
+ ```
157
+
158
+ ---
159
+
160
+ ## Available Scripts
161
+
162
+ ```bash
163
+ npm start # Start the development server
164
+ npm run build # Build for production
165
+ npm run preview # Preview the production build
166
+ npm run lint # Run ESLint
167
+ npm run i18n:scan # Scan for missing translation keys
168
+ ```
169
+
170
+ ---
171
+
172
+ ## Your First Application
173
+
174
+ Let's build a counter to understand NativeDocument basics.
175
+
176
+ ```javascript
177
+ import { Div, Button, H1 } from 'native-document/elements';
178
+ import { Observable } from 'native-document';
132
179
 
133
- // Create reactive state
180
+ // Reactive state
134
181
  const count = Observable(0);
135
182
 
136
- // Create the application
183
+ // Build the UI
137
184
  const CounterApp = Div({ class: 'counter-app' }, [
138
- H1('Counter Application'),
185
+ H1('Counter'),
139
186
 
140
- Div({ class: 'count-display' }, [
141
- 'Current count: ', count
142
- ]),
187
+ Div({ class: 'count-display' }, ['Current count: ', count]),
143
188
 
144
189
  Div([
145
- Button('Decrease').nd.onClick(() => {
146
- count.$value--;
147
- }),
148
-
149
- Button('Reset').nd.onClick(() => {
150
- count.set(0);
151
- }),
152
-
153
- Button('Increase').nd.onClick(() => {
154
- count.$value++;
155
- })
190
+ Button('−').nd.onClick(() => count.$value--),
191
+ Button('Reset').nd.onClick(() => count.set(0)),
192
+ Button('+').nd.onClick(() => count.$value++),
156
193
  ])
157
194
  ]);
158
195
 
159
- // Mount the application
160
196
  document.body.appendChild(CounterApp);
161
197
  ```
162
198
 
163
- ### Step 3: Understanding What Happened
199
+ ### What happened
200
+
201
+ 1. `Observable(0)` creates a reactive value starting at `0`
202
+ 2. `count` is passed directly as a child - the DOM updates automatically when it changes
203
+ 3. `.nd.onClick()` attaches a native click listener
204
+ 4. `count.$value++` mutates the value and triggers a DOM update
164
205
 
165
- 1. **Imported Components**: We used `Div`, `Button`, and `H1` from `NativeDocument.elements`
166
- 2. **Created Reactive State**: `Observable(0)` creates a reactive value that starts at 0
167
- 3. **Built the UI**: Elements are created with attributes and children
168
- 4. **Added Event Handlers**: `.nd.onClick()` attaches click event listeners
169
- 5. **Automatic Updates**: When `count` changes, the UI updates automatically
206
+ ---
170
207
 
171
- ## Todo List Application
208
+ ## Todo List Example
172
209
 
173
- Let's build something more complex - a todo list with add, delete, and filter functionality:
210
+ A more complete example with list rendering, filtering, and computed values:
174
211
 
175
212
  ```javascript
176
- const { Div, Input, Button, ShowIf, ForEach } = NativeDocument.elements;
177
- const { Observable } = NativeDocument;
213
+ import { Div, Input, Button, ShowIf, ForEachArray } from 'native-document/elements';
214
+ import { Observable } from 'native-document';
178
215
 
179
- // Reactive state
180
216
  const todos = Observable.array([]);
181
217
  const newTodo = Observable('');
182
- const filter = Observable('all'); // 'all', 'active', 'completed'
218
+ const filter = Observable('all'); // 'all' | 'active' | 'completed'
183
219
 
184
- // Computed values
185
220
  const filteredTodos = Observable.computed(() => {
186
- const allTodos = todos.val();
187
- const currentFilter = filter.val();
188
-
189
- if (currentFilter === 'active') {
190
- return allTodos.filter(todo => !todo.done);
221
+ const all = todos.val();
222
+ if (filter.val() === 'active') {
223
+ return all.filter(t => t.done.equals(false));
191
224
  }
192
- if (currentFilter === 'completed') {
193
- return allTodos.filter(todo => todo.done);
225
+ if (filter.val() === 'completed') {
226
+ return all.filter(t => t.done.equals(true));
194
227
  }
195
-
196
- return [...allTodos];
228
+ return [...all];
197
229
  }, [todos, filter]);
198
230
 
199
231
  const addTodo = () => {
@@ -205,212 +237,106 @@ const addTodo = () => {
205
237
  text: newTodo.val().trim(),
206
238
  done: false
207
239
  });
240
+
208
241
  todos.push(todo);
209
242
  newTodo.set('');
210
243
  };
211
244
 
212
- // Todo application
213
245
  const TodoApp = Div({ class: 'todo-app' }, [
214
- // Header
246
+
215
247
  Div({ class: 'header' }, [
216
- Input({
217
- placeholder: 'What needs to be done?',
218
- value: newTodo
219
- }),
248
+ Input({ placeholder: 'What needs to be done?', value: newTodo }),
220
249
  Button('Add').nd.onClick(addTodo)
221
250
  ]),
222
251
 
223
- // Todo list container
224
- Div({ class: 'todos-list'}, [
225
- ShowIf(todos.check(list => list.length === 0),
226
- Div({ class: 'empty' }, 'No todos yet! Add one above.')), // Empty state
227
-
228
- // List of todos
229
- ForEach(filteredTodos, (todo, index) => // Todo list
230
- Div({ class: 'todo-item' }, [
231
- Input({
232
- type: 'checkbox',
233
- checked: todo.done
234
- }).nd.onChange((e) => {
235
- const todoList = todos.val();
236
- todoList[index.val()].done = e.target.checked;
237
- todos.set([...todoList]);
238
- }),
239
-
240
- Div({ class: todo.done.check(d => d ? 'completed' : '') }, ['Task: ', todo.text]),
241
-
242
- Button('Delete').nd.onClick(() => {
243
- todos.splice(index.val(), 1);
244
- })
245
- ]),
246
- // Key function for efficient updates
247
- (item) => item.id
248
- )
249
- ]),
252
+ ShowIf(todos.isEmpty(),
253
+ Div({ class: 'empty' }, 'No todos yet! Add one above.')
254
+ ),
255
+
256
+ ForEachArray(filteredTodos, (todo, index) =>
257
+ Div({ class: 'todo-item' }, [
258
+ Input({ type: 'checkbox', checked: todo.done }),
259
+ Div(todo.text),
260
+ Button('Delete').nd.onClick(() => todos.removeItem(todo))
261
+ ]),
262
+ (item) => item.id
263
+ ),
250
264
 
251
- // Filters
252
265
  Div({ class: 'filters' }, [
253
266
  Button('All').nd.onClick(() => filter.set('all')),
254
267
  Button('Active').nd.onClick(() => filter.set('active')),
255
268
  Button('Completed').nd.onClick(() => filter.set('completed'))
256
269
  ])
257
-
258
270
  ]);
259
271
 
260
272
  document.body.appendChild(TodoApp);
261
273
  ```
262
274
 
263
- ## Key Concepts Demonstrated
264
-
265
- ### Observables
266
- - `Observable(value)` - Creates reactive primitive values
267
- - `Observable.array([])` - Creates reactive arrays with array methods
268
- - `Observable.computed(() => {}, [deps])` - Creates computed values
269
-
270
- ### Elements
271
- - Elements are functions that return DOM nodes
272
- - First parameter is attributes object (optional)
273
- - Second parameter is children array or single child
274
- - Children can be strings, numbers, elements, or observables
275
-
276
- ### Event Handling
277
- - `.nd.onClick()` - Add click event listener
278
- - `.nd.onChange()` - Add change event listener
279
- - Event handlers receive the native event object
280
-
281
- ### Conditional Rendering
282
- - `ShowIf(condition, content)` - Show content when condition is true
283
- - `ForEach(array, callback, propertyKey || keyFn)` - Render lists efficiently
284
-
285
- ## Project Structure
286
-
287
- For larger applications, organize your code like this:
288
-
289
- ```
290
- my-app/
291
- ├── index.html
292
- ├── src/
293
- │ ├── main.js # Application entry point
294
- │ ├── components/ # Reusable components
295
- │ │ ├── TodoItem.js
296
- │ │ └── Header.js
297
- │ ├── stores/ # Global state
298
- │ │ └── TodoStore.js
299
- │ └── utils/ # Helper functions
300
- │ └── validators.js
301
- ├── styles/
302
- │ └── main.css
303
- └── package.json
304
- ```
305
-
306
- ### Example Component (components/TodoItem.js)
307
-
308
- ```javascript
309
- import { Div, Input, Button } from 'native-document/src/elements';
310
-
311
- export function TodoItem(todo, onToggle, onDelete) {
312
- return Div({ class: 'todo-item' }, [
313
- Input({
314
- type: 'checkbox',
315
- checked: todo.done
316
- }).nd.onChange(onToggle),
317
-
318
- Div(['Task: ', todo.text]),
319
-
320
- Button('Delete').nd.onClick(onDelete)
321
- ]);
322
- }
323
- ```
324
-
325
- ## Development Workflow
326
-
327
- ### Auto Reload with Vite
328
-
329
- When using the Vite template, your development server automatically reloads when you make changes:
330
-
331
- ```bash
332
- npm run dev # Start development server
333
- npm run build # Build for production
334
- npm run preview # Preview production build
335
- ```
275
+ ---
336
276
 
337
277
  ## Browser Support
338
278
 
339
- NativeDocument works in all modern browsers that support:
279
+ NativeDocument requires:
340
280
  - ES6 Modules
341
281
  - Proxy objects
342
- - FinalizationRegistry (for automatic memory management)
343
-
344
- **Supported browsers:**
345
- - Chrome 84+
346
- - Firefox 79+
347
- - Safari 14.1+
348
- - Edge 84+
349
-
350
- ## Next Steps
351
-
352
- Now that you've built your first NativeDocument applications, explore these topics:
353
-
354
- - **[Core Concepts](core-concepts.md)** - Understanding the fundamentals
355
- - **[Observables](observables.md)** - Reactive state management
356
- - **[Elements](elements.md)** - Creating and composing UI
357
- - **[Conditional Rendering](conditional-rendering.md)** - Dynamic content
358
- - **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
359
- - **[Routing](routing.md)** - Navigation and URL management
360
- - **[State Management](state-management.md)** - Global state patterns
361
- - **[Lifecycle Events](lifecycle-events.md)** - Lifecycle events
362
- - **[NDElement](native-document-element.md)** - Native Document Element
363
- - **[Extending NDElement](extending-native-document-element.md)** - Custom Methods Guide
364
- - **[Advanced Components](advanced-components.md)** - Template caching and singleton views
365
- - **[Args Validation](validation.md)** - Function Argument Validation
366
- - **[Memory Management](memory-management.md)** - Memory management
367
- - **[Anchor](anchor.md)** - Anchor
282
+ - `FinalizationRegistry` (for automatic memory management)
368
283
 
369
- ## Utilities
370
-
371
- - **[Cache](docs/utils/cache.md)** - Lazy initialization and singleton patterns
372
- - **[NativeFetch](docs/utils/native-fetch.md)** - HTTP client with interceptors
373
- - **[Filters](docs/utils/filters.md)** - Data filtering helpers
284
+ | Browser | Minimum version |
285
+ |---------|----------------|
286
+ | Chrome | 84+ |
287
+ | Firefox | 79+ |
288
+ | Safari | 14.1+ |
289
+ | Edge | 84+ |
374
290
 
291
+ ---
375
292
 
376
293
  ## Common Issues
377
294
 
378
- ### Import Errors
379
- **Problem**: `Cannot resolve module 'native-document'`
295
+ ### Import errors
380
296
 
381
- **Solution**: Make sure you're using the correct import path:
382
297
  ```javascript
383
- // Correct
384
- import { Div } from 'native-document/src/elements'
385
- import { Observable } from 'native-document'
298
+ // ✅ Correct
299
+ import { Div, Button } from 'native-document/elements';
300
+ import { Observable } from 'native-document';
301
+ import { Router, Link } from 'native-document/router';
302
+ import { tr } from 'native-document/i18n';
386
303
 
387
304
  // CDN
388
- const { Div } = NativeDocument.elements;
305
+ const { Div, Button } = NativeDocument.elements;
389
306
  const { Observable } = NativeDocument;
390
307
  ```
391
308
 
392
- ### Observable Not Updating
393
- **Problem**: UI doesn't update when you change observable values
309
+ ### Observable not updating the DOM
394
310
 
395
- **Solution**: Make sure you're using `.set()` method:
396
311
  ```javascript
397
- // Wrong
312
+ // ❌ Wrong - direct assignment on the outer variable
398
313
  count = 5;
399
314
 
400
- // Correct
315
+ // ✅ Correct
401
316
  count.set(5);
402
- // Correct
403
317
  count.$value = 5;
404
318
  ```
405
319
 
406
- ### Memory Leaks
407
- **Problem**: Application slows down over time
320
+ ### Memory leaks
321
+
322
+ NativeDocument handles cleanup automatically. For manual subscriptions, store and call the unsubscribe function:
408
323
 
409
- **Solution**: NativeDocument has automatic memory management, but you can help by cleaning up manual subscriptions:
410
324
  ```javascript
411
- const unsubscribe = observable.subscribe(callback);
325
+ const callback = () => {};
326
+ observable.subscribe(callback);
327
+
412
328
  // Later...
413
- unsubscribe(); // Clean up manually if needed
329
+ observable.unsubscribe(callback)
414
330
  ```
415
331
 
416
- Ready to dive deeper? Continue with [Core Concepts](core-concepts.md)!
332
+ ---
333
+
334
+ ## Next Steps
335
+
336
+ - **[Core Concepts](./core-concepts.md)** - Understanding the fundamentals
337
+ - **[Observables](./observables.md)** - Reactive state management
338
+ - **[Elements](./elements.md)** - Creating and composing UI
339
+ - **[Routing](./routing.md)** - Navigation and URL management
340
+ - **[State Management](./state-management.md)** - Global state patterns
341
+ - **[CLI](./cli.md)** - All scaffolding commands
342
+ - **[i18n & Formatting](./i18n.md)** - Translations and locale-aware formatting