@fuzdev/fuz_ui 0.169.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (323) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +93 -0
  3. package/dist/Alert.svelte +108 -0
  4. package/dist/Alert.svelte.d.ts +16 -0
  5. package/dist/Alert.svelte.d.ts.map +1 -0
  6. package/dist/ApiDeclarationList.svelte +35 -0
  7. package/dist/ApiDeclarationList.svelte.d.ts +9 -0
  8. package/dist/ApiDeclarationList.svelte.d.ts.map +1 -0
  9. package/dist/ApiIndex.svelte +65 -0
  10. package/dist/ApiIndex.svelte.d.ts +23 -0
  11. package/dist/ApiIndex.svelte.d.ts.map +1 -0
  12. package/dist/ApiModule.svelte +124 -0
  13. package/dist/ApiModule.svelte.d.ts +22 -0
  14. package/dist/ApiModule.svelte.d.ts.map +1 -0
  15. package/dist/Breadcrumb.svelte +83 -0
  16. package/dist/Breadcrumb.svelte.d.ts +23 -0
  17. package/dist/Breadcrumb.svelte.d.ts.map +1 -0
  18. package/dist/Card.svelte +157 -0
  19. package/dist/Card.svelte.d.ts +13 -0
  20. package/dist/Card.svelte.d.ts.map +1 -0
  21. package/dist/ColorSchemeInput.svelte +65 -0
  22. package/dist/ColorSchemeInput.svelte.d.ts +11 -0
  23. package/dist/ColorSchemeInput.svelte.d.ts.map +1 -0
  24. package/dist/Contextmenu.svelte +30 -0
  25. package/dist/Contextmenu.svelte.d.ts +32 -0
  26. package/dist/Contextmenu.svelte.d.ts.map +1 -0
  27. package/dist/ContextmenuEntry.svelte +74 -0
  28. package/dist/ContextmenuEntry.svelte.d.ts +12 -0
  29. package/dist/ContextmenuEntry.svelte.d.ts.map +1 -0
  30. package/dist/ContextmenuLinkEntry.svelte +112 -0
  31. package/dist/ContextmenuLinkEntry.svelte.d.ts +12 -0
  32. package/dist/ContextmenuLinkEntry.svelte.d.ts.map +1 -0
  33. package/dist/ContextmenuRoot.svelte +372 -0
  34. package/dist/ContextmenuRoot.svelte.d.ts +71 -0
  35. package/dist/ContextmenuRoot.svelte.d.ts.map +1 -0
  36. package/dist/ContextmenuRootForSafariCompatibility.svelte +541 -0
  37. package/dist/ContextmenuRootForSafariCompatibility.svelte.d.ts +79 -0
  38. package/dist/ContextmenuRootForSafariCompatibility.svelte.d.ts.map +1 -0
  39. package/dist/ContextmenuSeparator.svelte +16 -0
  40. package/dist/ContextmenuSeparator.svelte.d.ts +4 -0
  41. package/dist/ContextmenuSeparator.svelte.d.ts.map +1 -0
  42. package/dist/ContextmenuSubmenu.svelte +116 -0
  43. package/dist/ContextmenuSubmenu.svelte.d.ts +10 -0
  44. package/dist/ContextmenuSubmenu.svelte.d.ts.map +1 -0
  45. package/dist/ContextmenuTextEntry.svelte +21 -0
  46. package/dist/ContextmenuTextEntry.svelte.d.ts +10 -0
  47. package/dist/ContextmenuTextEntry.svelte.d.ts.map +1 -0
  48. package/dist/CopyToClipboard.svelte +81 -0
  49. package/dist/CopyToClipboard.svelte.d.ts +18 -0
  50. package/dist/CopyToClipboard.svelte.d.ts.map +1 -0
  51. package/dist/DeclarationDetail.svelte +340 -0
  52. package/dist/DeclarationDetail.svelte.d.ts +8 -0
  53. package/dist/DeclarationDetail.svelte.d.ts.map +1 -0
  54. package/dist/DeclarationLink.svelte +50 -0
  55. package/dist/DeclarationLink.svelte.d.ts +8 -0
  56. package/dist/DeclarationLink.svelte.d.ts.map +1 -0
  57. package/dist/Details.svelte +51 -0
  58. package/dist/Details.svelte.d.ts +20 -0
  59. package/dist/Details.svelte.d.ts.map +1 -0
  60. package/dist/Dialog.svelte +217 -0
  61. package/dist/Dialog.svelte.d.ts +30 -0
  62. package/dist/Dialog.svelte.d.ts.map +1 -0
  63. package/dist/Dialogs.svelte +28 -0
  64. package/dist/Dialogs.svelte.d.ts +11 -0
  65. package/dist/Dialogs.svelte.d.ts.map +1 -0
  66. package/dist/Docs.svelte +179 -0
  67. package/dist/Docs.svelte.d.ts +13 -0
  68. package/dist/Docs.svelte.d.ts.map +1 -0
  69. package/dist/DocsContent.svelte +40 -0
  70. package/dist/DocsContent.svelte.d.ts +14 -0
  71. package/dist/DocsContent.svelte.d.ts.map +1 -0
  72. package/dist/DocsFooter.svelte +64 -0
  73. package/dist/DocsFooter.svelte.d.ts +15 -0
  74. package/dist/DocsFooter.svelte.d.ts.map +1 -0
  75. package/dist/DocsLink.svelte +41 -0
  76. package/dist/DocsLink.svelte.d.ts +12 -0
  77. package/dist/DocsLink.svelte.d.ts.map +1 -0
  78. package/dist/DocsList.svelte +44 -0
  79. package/dist/DocsList.svelte.d.ts +11 -0
  80. package/dist/DocsList.svelte.d.ts.map +1 -0
  81. package/dist/DocsMenu.svelte +55 -0
  82. package/dist/DocsMenu.svelte.d.ts +11 -0
  83. package/dist/DocsMenu.svelte.d.ts.map +1 -0
  84. package/dist/DocsMenuHeader.svelte +15 -0
  85. package/dist/DocsMenuHeader.svelte.d.ts +9 -0
  86. package/dist/DocsMenuHeader.svelte.d.ts.map +1 -0
  87. package/dist/DocsModulesList.svelte +32 -0
  88. package/dist/DocsModulesList.svelte.d.ts +7 -0
  89. package/dist/DocsModulesList.svelte.d.ts.map +1 -0
  90. package/dist/DocsPageLinks.svelte +61 -0
  91. package/dist/DocsPageLinks.svelte.d.ts +8 -0
  92. package/dist/DocsPageLinks.svelte.d.ts.map +1 -0
  93. package/dist/DocsPrimaryNav.svelte +93 -0
  94. package/dist/DocsPrimaryNav.svelte.d.ts +11 -0
  95. package/dist/DocsPrimaryNav.svelte.d.ts.map +1 -0
  96. package/dist/DocsSearch.svelte +48 -0
  97. package/dist/DocsSearch.svelte.d.ts +11 -0
  98. package/dist/DocsSearch.svelte.d.ts.map +1 -0
  99. package/dist/DocsSecondaryNav.svelte +63 -0
  100. package/dist/DocsSecondaryNav.svelte.d.ts +9 -0
  101. package/dist/DocsSecondaryNav.svelte.d.ts.map +1 -0
  102. package/dist/DocsTertiaryNav.svelte +118 -0
  103. package/dist/DocsTertiaryNav.svelte.d.ts +10 -0
  104. package/dist/DocsTertiaryNav.svelte.d.ts.map +1 -0
  105. package/dist/EcosystemLinks.svelte +53 -0
  106. package/dist/EcosystemLinks.svelte.d.ts +7 -0
  107. package/dist/EcosystemLinks.svelte.d.ts.map +1 -0
  108. package/dist/EcosystemLinksPanel.svelte +22 -0
  109. package/dist/EcosystemLinksPanel.svelte.d.ts +8 -0
  110. package/dist/EcosystemLinksPanel.svelte.d.ts.map +1 -0
  111. package/dist/GithubLink.svelte +75 -0
  112. package/dist/GithubLink.svelte.d.ts +14 -0
  113. package/dist/GithubLink.svelte.d.ts.map +1 -0
  114. package/dist/Glyph.svelte +28 -0
  115. package/dist/Glyph.svelte.d.ts +9 -0
  116. package/dist/Glyph.svelte.d.ts.map +1 -0
  117. package/dist/Hashlink.svelte +41 -0
  118. package/dist/Hashlink.svelte.d.ts +8 -0
  119. package/dist/Hashlink.svelte.d.ts.map +1 -0
  120. package/dist/HiddenPersonalLinks.svelte +6 -0
  121. package/dist/HiddenPersonalLinks.svelte.d.ts +27 -0
  122. package/dist/HiddenPersonalLinks.svelte.d.ts.map +1 -0
  123. package/dist/HueInput.svelte +127 -0
  124. package/dist/HueInput.svelte.d.ts +11 -0
  125. package/dist/HueInput.svelte.d.ts.map +1 -0
  126. package/dist/ImgOrSvg.svelte +58 -0
  127. package/dist/ImgOrSvg.svelte.d.ts +25 -0
  128. package/dist/ImgOrSvg.svelte.d.ts.map +1 -0
  129. package/dist/LibraryDetail.svelte +297 -0
  130. package/dist/LibraryDetail.svelte.d.ts +15 -0
  131. package/dist/LibraryDetail.svelte.d.ts.map +1 -0
  132. package/dist/LibrarySummary.svelte +151 -0
  133. package/dist/LibrarySummary.svelte.d.ts +16 -0
  134. package/dist/LibrarySummary.svelte.d.ts.map +1 -0
  135. package/dist/MdnLink.svelte +40 -0
  136. package/dist/MdnLink.svelte.d.ts +8 -0
  137. package/dist/MdnLink.svelte.d.ts.map +1 -0
  138. package/dist/Mdz.svelte +30 -0
  139. package/dist/Mdz.svelte.d.ts +10 -0
  140. package/dist/Mdz.svelte.d.ts.map +1 -0
  141. package/dist/MdzNodeView.svelte +93 -0
  142. package/dist/MdzNodeView.svelte.d.ts +9 -0
  143. package/dist/MdzNodeView.svelte.d.ts.map +1 -0
  144. package/dist/ModuleLink.svelte +48 -0
  145. package/dist/ModuleLink.svelte.d.ts +8 -0
  146. package/dist/ModuleLink.svelte.d.ts.map +1 -0
  147. package/dist/PasteFromClipboard.svelte +35 -0
  148. package/dist/PasteFromClipboard.svelte.d.ts +9 -0
  149. package/dist/PasteFromClipboard.svelte.d.ts.map +1 -0
  150. package/dist/PendingAnimation.svelte +62 -0
  151. package/dist/PendingAnimation.svelte.d.ts +13 -0
  152. package/dist/PendingAnimation.svelte.d.ts.map +1 -0
  153. package/dist/PendingButton.svelte +75 -0
  154. package/dist/PendingButton.svelte.d.ts +17 -0
  155. package/dist/PendingButton.svelte.d.ts.map +1 -0
  156. package/dist/ProjectLinks.svelte +54 -0
  157. package/dist/ProjectLinks.svelte.d.ts +19 -0
  158. package/dist/ProjectLinks.svelte.d.ts.map +1 -0
  159. package/dist/Redirect.svelte +44 -0
  160. package/dist/Redirect.svelte.d.ts +23 -0
  161. package/dist/Redirect.svelte.d.ts.map +1 -0
  162. package/dist/Spiders.svelte +57 -0
  163. package/dist/Spiders.svelte.d.ts +9 -0
  164. package/dist/Spiders.svelte.d.ts.map +1 -0
  165. package/dist/Svg.svelte +99 -0
  166. package/dist/Svg.svelte.d.ts +54 -0
  167. package/dist/Svg.svelte.d.ts.map +1 -0
  168. package/dist/Teleport.svelte +48 -0
  169. package/dist/Teleport.svelte.d.ts +15 -0
  170. package/dist/Teleport.svelte.d.ts.map +1 -0
  171. package/dist/ThemeInput.svelte +75 -0
  172. package/dist/ThemeInput.svelte.d.ts +15 -0
  173. package/dist/ThemeInput.svelte.d.ts.map +1 -0
  174. package/dist/Themed.svelte +101 -0
  175. package/dist/Themed.svelte.d.ts +24 -0
  176. package/dist/Themed.svelte.d.ts.map +1 -0
  177. package/dist/TomeContent.svelte +67 -0
  178. package/dist/TomeContent.svelte.d.ts +12 -0
  179. package/dist/TomeContent.svelte.d.ts.map +1 -0
  180. package/dist/TomeHeader.svelte +56 -0
  181. package/dist/TomeHeader.svelte.d.ts +4 -0
  182. package/dist/TomeHeader.svelte.d.ts.map +1 -0
  183. package/dist/TomeLink.svelte +29 -0
  184. package/dist/TomeLink.svelte.d.ts +10 -0
  185. package/dist/TomeLink.svelte.d.ts.map +1 -0
  186. package/dist/TomeSection.svelte +65 -0
  187. package/dist/TomeSection.svelte.d.ts +24 -0
  188. package/dist/TomeSection.svelte.d.ts.map +1 -0
  189. package/dist/TomeSectionHeader.svelte +90 -0
  190. package/dist/TomeSectionHeader.svelte.d.ts +13 -0
  191. package/dist/TomeSectionHeader.svelte.d.ts.map +1 -0
  192. package/dist/TypeLink.svelte +19 -0
  193. package/dist/TypeLink.svelte.d.ts +7 -0
  194. package/dist/TypeLink.svelte.d.ts.map +1 -0
  195. package/dist/alert.d.ts +7 -0
  196. package/dist/alert.d.ts.map +1 -0
  197. package/dist/alert.js +6 -0
  198. package/dist/api_search.svelte.d.ts +16 -0
  199. package/dist/api_search.svelte.d.ts.map +1 -0
  200. package/dist/api_search.svelte.js +61 -0
  201. package/dist/constants.d.ts +2 -0
  202. package/dist/constants.d.ts.map +1 -0
  203. package/dist/constants.js +3 -0
  204. package/dist/context_helpers.d.ts +17 -0
  205. package/dist/context_helpers.d.ts.map +1 -0
  206. package/dist/context_helpers.js +19 -0
  207. package/dist/contextmenu_helpers.d.ts +16 -0
  208. package/dist/contextmenu_helpers.d.ts.map +1 -0
  209. package/dist/contextmenu_helpers.js +39 -0
  210. package/dist/contextmenu_state.svelte.d.ts +152 -0
  211. package/dist/contextmenu_state.svelte.d.ts.map +1 -0
  212. package/dist/contextmenu_state.svelte.js +424 -0
  213. package/dist/csp.d.ts +160 -0
  214. package/dist/csp.d.ts.map +1 -0
  215. package/dist/csp.js +354 -0
  216. package/dist/csp_of_ryanatkn.d.ts +6 -0
  217. package/dist/csp_of_ryanatkn.d.ts.map +1 -0
  218. package/dist/csp_of_ryanatkn.js +14 -0
  219. package/dist/declaration.svelte.d.ts +84 -0
  220. package/dist/declaration.svelte.d.ts.map +1 -0
  221. package/dist/declaration.svelte.js +66 -0
  222. package/dist/declaration_contextmenu.d.ts +4 -0
  223. package/dist/declaration_contextmenu.d.ts.map +1 -0
  224. package/dist/declaration_contextmenu.js +14 -0
  225. package/dist/dialog.d.ts +24 -0
  226. package/dist/dialog.d.ts.map +1 -0
  227. package/dist/dialog.js +12 -0
  228. package/dist/dimensions.svelte.d.ts +5 -0
  229. package/dist/dimensions.svelte.d.ts.map +1 -0
  230. package/dist/dimensions.svelte.js +4 -0
  231. package/dist/docs_helpers.svelte.d.ts +48 -0
  232. package/dist/docs_helpers.svelte.d.ts.map +1 -0
  233. package/dist/docs_helpers.svelte.js +99 -0
  234. package/dist/helpers.d.ts +2 -0
  235. package/dist/helpers.d.ts.map +1 -0
  236. package/dist/helpers.js +16 -0
  237. package/dist/intersect.svelte.d.ts +47 -0
  238. package/dist/intersect.svelte.d.ts.map +1 -0
  239. package/dist/intersect.svelte.js +92 -0
  240. package/dist/library.svelte.d.ts +197 -0
  241. package/dist/library.svelte.d.ts.map +1 -0
  242. package/dist/library.svelte.js +130 -0
  243. package/dist/library_gen.d.ts +34 -0
  244. package/dist/library_gen.d.ts.map +1 -0
  245. package/dist/library_gen.js +123 -0
  246. package/dist/library_gen_helpers.d.ts +85 -0
  247. package/dist/library_gen_helpers.d.ts.map +1 -0
  248. package/dist/library_gen_helpers.js +188 -0
  249. package/dist/library_helpers.d.ts +54 -0
  250. package/dist/library_helpers.d.ts.map +1 -0
  251. package/dist/library_helpers.js +102 -0
  252. package/dist/logos.d.ts +134 -0
  253. package/dist/logos.d.ts.map +1 -0
  254. package/dist/logos.js +281 -0
  255. package/dist/mdz.d.ts +106 -0
  256. package/dist/mdz.d.ts.map +1 -0
  257. package/dist/mdz.js +1481 -0
  258. package/dist/mdz_components.d.ts +37 -0
  259. package/dist/mdz_components.d.ts.map +1 -0
  260. package/dist/mdz_components.js +12 -0
  261. package/dist/module.svelte.d.ts +47 -0
  262. package/dist/module.svelte.d.ts.map +1 -0
  263. package/dist/module.svelte.js +56 -0
  264. package/dist/module_contextmenu.d.ts +4 -0
  265. package/dist/module_contextmenu.d.ts.map +1 -0
  266. package/dist/module_contextmenu.js +14 -0
  267. package/dist/module_helpers.d.ts +69 -0
  268. package/dist/module_helpers.d.ts.map +1 -0
  269. package/dist/module_helpers.js +87 -0
  270. package/dist/rune_helpers.svelte.d.ts +6 -0
  271. package/dist/rune_helpers.svelte.d.ts.map +1 -0
  272. package/dist/rune_helpers.svelte.js +10 -0
  273. package/dist/storage.d.ts +13 -0
  274. package/dist/storage.d.ts.map +1 -0
  275. package/dist/storage.js +43 -0
  276. package/dist/svelte_helpers.d.ts +37 -0
  277. package/dist/svelte_helpers.d.ts.map +1 -0
  278. package/dist/svelte_helpers.js +245 -0
  279. package/dist/themer.svelte.d.ts +24 -0
  280. package/dist/themer.svelte.d.ts.map +1 -0
  281. package/dist/themer.svelte.js +43 -0
  282. package/dist/tome.d.ts +80 -0
  283. package/dist/tome.d.ts.map +1 -0
  284. package/dist/tome.js +27 -0
  285. package/dist/ts_helpers.d.ts +110 -0
  286. package/dist/ts_helpers.d.ts.map +1 -0
  287. package/dist/ts_helpers.js +533 -0
  288. package/dist/tsdoc_helpers.d.ts +98 -0
  289. package/dist/tsdoc_helpers.d.ts.map +1 -0
  290. package/dist/tsdoc_helpers.js +221 -0
  291. package/package.json +128 -0
  292. package/src/lib/alert.ts +14 -0
  293. package/src/lib/api_search.svelte.ts +85 -0
  294. package/src/lib/constants.ts +3 -0
  295. package/src/lib/context_helpers.ts +47 -0
  296. package/src/lib/contextmenu_helpers.ts +63 -0
  297. package/src/lib/contextmenu_state.svelte.ts +515 -0
  298. package/src/lib/csp.ts +576 -0
  299. package/src/lib/csp_of_ryanatkn.ts +16 -0
  300. package/src/lib/declaration.svelte.ts +102 -0
  301. package/src/lib/declaration_contextmenu.ts +22 -0
  302. package/src/lib/dialog.ts +35 -0
  303. package/src/lib/dimensions.svelte.ts +4 -0
  304. package/src/lib/docs_helpers.svelte.ts +149 -0
  305. package/src/lib/helpers.ts +10 -0
  306. package/src/lib/intersect.svelte.ts +152 -0
  307. package/src/lib/library.svelte.ts +162 -0
  308. package/src/lib/library_gen.ts +160 -0
  309. package/src/lib/library_gen_helpers.ts +262 -0
  310. package/src/lib/library_helpers.ts +123 -0
  311. package/src/lib/logos.ts +302 -0
  312. package/src/lib/mdz.ts +1819 -0
  313. package/src/lib/mdz_components.ts +34 -0
  314. package/src/lib/module.svelte.ts +78 -0
  315. package/src/lib/module_contextmenu.ts +20 -0
  316. package/src/lib/module_helpers.ts +113 -0
  317. package/src/lib/rune_helpers.svelte.ts +10 -0
  318. package/src/lib/storage.ts +48 -0
  319. package/src/lib/svelte_helpers.ts +303 -0
  320. package/src/lib/themer.svelte.ts +68 -0
  321. package/src/lib/tome.ts +38 -0
  322. package/src/lib/ts_helpers.ts +662 -0
  323. package/src/lib/tsdoc_helpers.ts +259 -0
@@ -0,0 +1,157 @@
1
+ <script lang="ts">
2
+ import {page} from '$app/state';
3
+ import type {Snippet} from 'svelte';
4
+
5
+ // TODO think through Alert+Card APIs together, one can be a button and the other a link atm
6
+
7
+ const {
8
+ tag,
9
+ href,
10
+ align = 'left',
11
+ attrs,
12
+ icon,
13
+ children,
14
+ }: {
15
+ tag?: string | undefined;
16
+ href?: string | undefined;
17
+ align?: 'left' | 'right' | 'above' | 'below';
18
+ attrs?: any; // type? what about the optional tag though? (button etc - maybe API should be more explicit)
19
+ icon?: string | Snippet;
20
+ children: Snippet;
21
+ } = $props();
22
+
23
+ const link = $derived(!!href);
24
+ const selected = $derived(link && page.url.pathname === href);
25
+ const final_tag = $derived(tag ?? (link ? 'a' : 'div'));
26
+ const inferred_attrs = $derived(link ? {href} : undefined);
27
+
28
+ const left = $derived(align === 'left');
29
+ const right = $derived(align === 'right');
30
+ const above = $derived(align === 'above');
31
+ const below = $derived(align === 'below');
32
+
33
+ const fallback_icon = $derived(link ? '🔗' : '🪧');
34
+ const final_icon: string | Snippet = $derived(icon ?? fallback_icon);
35
+ </script>
36
+
37
+ <svelte:element
38
+ this={final_tag}
39
+ class="card"
40
+ {...attrs}
41
+ {...inferred_attrs}
42
+ class:link
43
+ class:selected
44
+ class:left
45
+ class:right
46
+ class:above
47
+ class:below
48
+ >
49
+ {#if align === 'left' || align === 'above'}
50
+ {@render icon_snippet()}
51
+ {/if}
52
+ <div class="content">
53
+ {@render children()}
54
+ </div>
55
+ {#if align === 'right' || align === 'below'}
56
+ {@render icon_snippet()}
57
+ {/if}
58
+ </svelte:element>
59
+
60
+ <!-- TODO name? -->
61
+ {#snippet icon_snippet()}
62
+ <div class="icon">
63
+ {#if typeof final_icon === 'string'}
64
+ {final_icon}
65
+ {:else}
66
+ {@render final_icon()}
67
+ {/if}
68
+ </div>
69
+ {/snippet}
70
+
71
+ <style>
72
+ .card {
73
+ --icon_size: var(--icon_size_lg);
74
+ --icon_margin: var(--space_lg);
75
+ display: flex;
76
+ font-size: var(--font_size_xl2);
77
+ align-items: center;
78
+ padding: var(--space_lg);
79
+ width: var(--card_width);
80
+ background-color: var(--fg_1);
81
+ border-radius: var(--border_radius, var(--border_radius_md));
82
+ text-decoration: none;
83
+ text-align: left;
84
+ }
85
+ .right {
86
+ justify-content: flex-end;
87
+ }
88
+ .above,
89
+ .below {
90
+ flex-direction: column;
91
+ text-align: center;
92
+ }
93
+ .link {
94
+ box-shadow: var(
95
+ --shadow,
96
+ var(--shadow_inset_bottom_sm)
97
+ color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_2), transparent)
98
+ );
99
+ }
100
+ .link:active {
101
+ box-shadow: var(
102
+ --shadow,
103
+ var(--shadow_inset_top_sm)
104
+ color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_2), transparent)
105
+ );
106
+ }
107
+ .link.selected .content,
108
+ .link:hover .content {
109
+ text-decoration: underline;
110
+ }
111
+ .left .content {
112
+ padding-right: var(--space_sm);
113
+ }
114
+ .right .content {
115
+ text-align: right;
116
+ padding-left: var(--space_sm);
117
+ }
118
+ .icon {
119
+ font-size: var(--icon_size, var(--icon_size_md));
120
+ text-align: center;
121
+ display: flex;
122
+ justify-content: center;
123
+ }
124
+ /* TODO @many remove all :global usage after https://github.com/sveltejs/svelte/issues/10143 */
125
+ .left :global(.icon) {
126
+ margin-right: var(--icon_margin);
127
+ }
128
+ .right :global(.icon) {
129
+ margin-left: var(--icon_margin);
130
+ }
131
+ .above :global(.icon) {
132
+ margin-bottom: var(--icon_margin);
133
+ }
134
+ .below :global(.icon) {
135
+ margin-top: var(--icon_margin);
136
+ }
137
+ @media (max-width: 460px) {
138
+ .card {
139
+ font-size: var(--font_size_xl);
140
+ }
141
+ }
142
+ @media (max-width: 380px) {
143
+ .card {
144
+ --icon_size: var(--icon_size_md);
145
+ --icon_margin: var(--space_sm);
146
+ font-size: var(--font_size_lg);
147
+ }
148
+ .icon {
149
+ font-size: var(--icon_size_md);
150
+ margin-right: var(--space_sm);
151
+ }
152
+ .right :global(.icon) {
153
+ margin-right: 0;
154
+ margin-left: var(--space_sm);
155
+ }
156
+ }
157
+ </style>
@@ -0,0 +1,13 @@
1
+ import type { Snippet } from 'svelte';
2
+ type $$ComponentProps = {
3
+ tag?: string | undefined;
4
+ href?: string | undefined;
5
+ align?: 'left' | 'right' | 'above' | 'below';
6
+ attrs?: any;
7
+ icon?: string | Snippet;
8
+ children: Snippet;
9
+ };
10
+ declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
11
+ type Card = ReturnType<typeof Card>;
12
+ export default Card;
13
+ //# sourceMappingURL=Card.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Card.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEnC,KAAK,gBAAgB,GAAI;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAyDH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
@@ -0,0 +1,65 @@
1
+ <script lang="ts">
2
+ import {swallow} from '@fuzdev/fuz_util/dom.js';
3
+ import {color_schemes, type ColorScheme} from '@fuzdev/fuz_css/theme.js';
4
+
5
+ import {themer_context} from './themer.svelte.js';
6
+
7
+ const {
8
+ value = themer_context.get(),
9
+ onchange = (color_scheme) => {
10
+ value.color_scheme = color_scheme; // won't work with POJOs but users could provide their own onchange in that case
11
+ },
12
+ }: {
13
+ value?: {color_scheme: ColorScheme};
14
+ onchange?: (color_scheme: ColorScheme) => void;
15
+ } = $props();
16
+ </script>
17
+
18
+ <!-- TODO maybe support menubar aria
19
+ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role -->
20
+ <menu class="color_scheme_control unstyled">
21
+ {#each color_schemes as color_scheme (color_scheme)}
22
+ {@const selected = color_scheme === value.color_scheme}
23
+ <button
24
+ type="button"
25
+ class="color_scheme color_a"
26
+ role="menuitemradio"
27
+ title={selected
28
+ ? `${color_scheme} color scheme is selected`
29
+ : `select ${color_scheme} color scheme`}
30
+ class:selected
31
+ aria-checked={selected}
32
+ onclick={(e) => {
33
+ swallow(e);
34
+ onchange(color_scheme);
35
+ }}
36
+ >
37
+ <div class="content">{color_scheme}</div>
38
+ </button>
39
+ {/each}
40
+ </menu>
41
+
42
+ <style>
43
+ .color_scheme_control {
44
+ display: flex;
45
+ flex-direction: row;
46
+ justify-content: center;
47
+ }
48
+ .content {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ padding: 0 var(--space_lg);
53
+ }
54
+ .color_scheme {
55
+ border-radius: 0;
56
+ }
57
+ .color_scheme:first-child {
58
+ border-top-left-radius: var(--border_radius, var(--border_radius_md));
59
+ border-bottom-left-radius: var(--border_radius, var(--border_radius_md));
60
+ }
61
+ .color_scheme:last-child {
62
+ border-top-right-radius: var(--border_radius, var(--border_radius_md));
63
+ border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
64
+ }
65
+ </style>
@@ -0,0 +1,11 @@
1
+ import { type ColorScheme } from '@fuzdev/fuz_css/theme.js';
2
+ type $$ComponentProps = {
3
+ value?: {
4
+ color_scheme: ColorScheme;
5
+ };
6
+ onchange?: (color_scheme: ColorScheme) => void;
7
+ };
8
+ declare const ColorSchemeInput: import("svelte").Component<$$ComponentProps, {}, "">;
9
+ type ColorSchemeInput = ReturnType<typeof ColorSchemeInput>;
10
+ export default ColorSchemeInput;
11
+ //# sourceMappingURL=ColorSchemeInput.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorSchemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ColorSchemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,0BAA0B,CAAC;AAIxE,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE;QAAC,YAAY,EAAE,WAAW,CAAA;KAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C,CAAC;AAkCH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,30 @@
1
+ <script lang="ts" generics="T extends string = 'span'">
2
+ import type {Snippet} from 'svelte';
3
+ import type {SvelteHTMLElements} from 'svelte/elements';
4
+
5
+ import {contextmenu_attachment} from './contextmenu_state.svelte.js';
6
+
7
+ const {
8
+ tag = 'span' as T, // TODO why is casting needed?
9
+ attrs,
10
+ entries,
11
+ children,
12
+ }: {
13
+ // TODO custom tag?
14
+ tag?: T;
15
+ attrs?: SvelteHTMLElements[T];
16
+ entries: Snippet;
17
+ children: Snippet;
18
+ } = $props();
19
+
20
+ // Ideally this wouldn't have a wrapper element,
21
+ // but I don't see a decent way to map DOM click events
22
+ // from anywhere to the Svelte context without gross overhead.
23
+ </script>
24
+
25
+ <svelte:element
26
+ this={tag}
27
+ class="display_contents"
28
+ {...attrs}
29
+ {@attach contextmenu_attachment(entries)}>{@render children()}</svelte:element
30
+ >
@@ -0,0 +1,32 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ declare function $$render<T extends string = 'span'>(): {
4
+ props: {
5
+ tag?: T;
6
+ attrs?: SvelteHTMLElements[T];
7
+ entries: Snippet;
8
+ children: Snippet;
9
+ };
10
+ exports: {};
11
+ bindings: "";
12
+ slots: {};
13
+ events: {};
14
+ };
15
+ declare class __sveltets_Render<T extends string = 'span'> {
16
+ props(): ReturnType<typeof $$render<T>>['props'];
17
+ events(): ReturnType<typeof $$render<T>>['events'];
18
+ slots(): ReturnType<typeof $$render<T>>['slots'];
19
+ bindings(): "";
20
+ exports(): {};
21
+ }
22
+ interface $$IsomorphicComponent {
23
+ new <T extends string = 'span'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
24
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
25
+ } & ReturnType<__sveltets_Render<T>['exports']>;
26
+ <T extends string = 'span'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
27
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
28
+ }
29
+ declare const Contextmenu: $$IsomorphicComponent;
30
+ type Contextmenu<T extends string = 'span'> = InstanceType<typeof Contextmenu<T>>;
31
+ export default Contextmenu;
32
+ //# sourceMappingURL=Contextmenu.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Contextmenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Contextmenu.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;;cAOnC,CAAC;gBACC,kBAAkB,CAAC,CAAC,CAAC;iBACpB,OAAO;kBACN,OAAO;;;;;;EAkBsG;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACpZ,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACpF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,74 @@
1
+ <script lang="ts">
2
+ import type {Snippet} from 'svelte';
3
+ import {swallow} from '@fuzdev/fuz_util/dom.js';
4
+
5
+ import PendingAnimation from './PendingAnimation.svelte';
6
+ import {contextmenu_context, type ContextmenuRun} from './contextmenu_state.svelte.js';
7
+
8
+ const {
9
+ run,
10
+ icon,
11
+ children,
12
+ disabled: disabled_prop = false,
13
+ }: {
14
+ run: ContextmenuRun;
15
+ icon?: string | Snippet;
16
+ children: Snippet;
17
+ disabled?: boolean;
18
+ } = $props();
19
+
20
+ const contextmenu = contextmenu_context.get();
21
+
22
+ const entry = contextmenu.add_entry(
23
+ () => run,
24
+ () => disabled_prop,
25
+ );
26
+
27
+ const {selected, pending, error_message} = $derived(entry);
28
+ const disabled = $derived(entry.disabled());
29
+ </script>
30
+
31
+ <!-- disabling the a11y warning because a parent element handles keyboard events -->
32
+ <!-- svelte-ignore a11y_click_events_have_key_events -->
33
+ <li
34
+ class="menu_item plain selectable deselectable"
35
+ class:selected
36
+ class:disabled
37
+ role="menuitem"
38
+ aria-label="contextmenu entry"
39
+ aria-disabled={disabled}
40
+ tabindex="-1"
41
+ title={error_message ? `Error: ${error_message}` : undefined}
42
+ onclick={disabled
43
+ ? undefined
44
+ : () => {
45
+ // This timeout lets event handlers react to the current DOM
46
+ // before the item's changes are applied.
47
+ setTimeout(() => contextmenu.activate(entry));
48
+ }}
49
+ onmouseenter={disabled
50
+ ? undefined
51
+ : (e) => {
52
+ swallow(e);
53
+ contextmenu.select(entry);
54
+ }}
55
+ >
56
+ <div class="content">
57
+ <div class="icon">
58
+ {#if typeof icon === 'string'}
59
+ {icon}
60
+ {:else if icon}
61
+ {@render icon()}
62
+ {/if}
63
+ </div>
64
+ <div class="title">{@render children()}</div>
65
+ {#if pending}<PendingAnimation />{:else if error_message}⚠️{/if}
66
+ </div>
67
+ </li>
68
+
69
+ <style>
70
+ /* TODO hacky, needed because the base `.menu_item` added z-index */
71
+ .menu_item {
72
+ z-index: unset;
73
+ }
74
+ </style>
@@ -0,0 +1,12 @@
1
+ import type { Snippet } from 'svelte';
2
+ import { type ContextmenuRun } from './contextmenu_state.svelte.js';
3
+ type $$ComponentProps = {
4
+ run: ContextmenuRun;
5
+ icon?: string | Snippet;
6
+ children: Snippet;
7
+ disabled?: boolean;
8
+ };
9
+ declare const ContextmenuEntry: import("svelte").Component<$$ComponentProps, {}, "">;
10
+ type ContextmenuEntry = ReturnType<typeof ContextmenuEntry>;
11
+ export default ContextmenuEntry;
12
+ //# sourceMappingURL=ContextmenuEntry.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAIpC,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyDH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,112 @@
1
+ <script lang="ts">
2
+ import {strip_start} from '@fuzdev/fuz_util/string.js';
3
+ import {swallow} from '@fuzdev/fuz_util/dom.js';
4
+ import type {Snippet} from 'svelte';
5
+ import {page} from '$app/state';
6
+
7
+ import {contextmenu_context} from './contextmenu_state.svelte.js';
8
+
9
+ const {
10
+ href,
11
+ icon,
12
+ children,
13
+ disabled: disabled_prop = false,
14
+ external_rel = 'noreferrer', // TODO smarter defaults
15
+ }: {
16
+ href: string;
17
+ icon?: string | Snippet; // TODO @many rethink this API, add svg icon fallback
18
+ children?: Snippet; // TODO @many rethink this API
19
+ disabled?: boolean;
20
+ external_rel?: string;
21
+ } = $props();
22
+
23
+ const contextmenu = contextmenu_context.get();
24
+
25
+ let anchor_el: HTMLAnchorElement | undefined = $state();
26
+
27
+ // Register with state management for keyboard navigation
28
+ // When activated via keyboard, programmatically click the anchor to trigger navigation
29
+ const entry = contextmenu.add_entry(
30
+ () => () => {
31
+ if (anchor_el) anchor_el.click();
32
+ },
33
+ () => disabled_prop,
34
+ );
35
+
36
+ const disabled = $derived(entry.disabled());
37
+
38
+ // TODO move or upstream? rename? `print_url`?
39
+ const format_url = (url: string, host: string = location.host): string => {
40
+ const formatted = strip_start(strip_start(url, 'https://'), 'http://');
41
+ return formatted.startsWith(host + '/') ? strip_start(formatted, host) : formatted;
42
+ };
43
+
44
+ const text = $derived(format_url(href));
45
+ const external = $derived(!(text[0] === '.' || (text[0] === '/' && text[1] !== '/')));
46
+ const rel = $derived(external ? external_rel : undefined);
47
+
48
+ const selected = $derived(page.url.pathname === href);
49
+ </script>
50
+
51
+ <li role="none">
52
+ <!-- TODO -next-line doesnt work? -->
53
+ <!-- eslint-disable svelte/no-navigation-without-resolve -->
54
+ <a
55
+ bind:this={anchor_el}
56
+ class="menu_item plain"
57
+ class:selected
58
+ class:disabled
59
+ role="menuitem"
60
+ aria-disabled={disabled}
61
+ tabindex="-1"
62
+ {href}
63
+ {rel}
64
+ onclick={disabled ? undefined : () => contextmenu.close()}
65
+ oncontextmenu={(e) => {
66
+ // Stop propagation to prevent the window handler from opening another Fuz contextmenu.
67
+ // Without this, the event would bubble to the window handler, which calls
68
+ // `contextmenu_query_params` (contextmenu_state.svelte.ts:410), which auto-detects
69
+ // `<a>` tags and reopens the Fuz contextmenu instead of showing the browser's native menu.
70
+ // Allow default behavior to show the browser's native contextmenu for the link.
71
+ e.stopPropagation();
72
+ }}
73
+ onmouseenter={disabled
74
+ ? undefined
75
+ : (e) => {
76
+ swallow(e);
77
+ contextmenu.select(entry);
78
+ }}
79
+ >
80
+ <div class="content">
81
+ <div class="icon">
82
+ {#if typeof icon === 'string'}
83
+ {icon}
84
+ {:else if icon}
85
+ {@render icon()}
86
+ {/if}
87
+ </div>
88
+ <div class="title">
89
+ <span class="text"
90
+ >{#if children}{@render children()}{:else}{text}{/if}</span
91
+ >
92
+ </div>
93
+ </div>
94
+ </a>
95
+ </li>
96
+
97
+ <style>
98
+ li {
99
+ display: flex;
100
+ }
101
+ /* Underline only the link text, not the icon. */
102
+ a:hover {
103
+ text-decoration: none;
104
+ }
105
+ a:hover .text {
106
+ text-decoration: underline;
107
+ }
108
+ /* TODO hacky, needed because the base `.menu_item` added z-index */
109
+ .menu_item {
110
+ z-index: unset;
111
+ }
112
+ </style>
@@ -0,0 +1,12 @@
1
+ import type { Snippet } from 'svelte';
2
+ type $$ComponentProps = {
3
+ href: string;
4
+ icon?: string | Snippet;
5
+ children?: Snippet;
6
+ disabled?: boolean;
7
+ external_rel?: string;
8
+ };
9
+ declare const ContextmenuLinkEntry: import("svelte").Component<$$ComponentProps, {}, "">;
10
+ type ContextmenuLinkEntry = ReturnType<typeof ContextmenuLinkEntry>;
11
+ export default ContextmenuLinkEntry;
12
+ //# sourceMappingURL=ContextmenuLinkEntry.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAgFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}