@sovereignfs/ui 0.83.1 → 0.89.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 (556) hide show
  1. package/LICENSE +373 -661
  2. package/NOTICE +8 -0
  3. package/README.md +4 -6
  4. package/dist/AppsLauncher.module.css +6 -0
  5. package/dist/Button.module.css +5 -0
  6. package/dist/Card.module.css +6 -0
  7. package/dist/CardTile.module.css +6 -0
  8. package/dist/CheckableListRow.module.css +8 -0
  9. package/dist/Checkbox.module.css +8 -0
  10. package/dist/CodeTextarea.module.css +6 -0
  11. package/dist/ColorPicker.module.css +6 -0
  12. package/dist/Combobox.module.css +6 -0
  13. package/dist/Command.module.css +6 -0
  14. package/dist/ConfirmDialog.module.css +6 -0
  15. package/dist/DatePicker.module.css +6 -0
  16. package/dist/Dialog.module.css +1 -1
  17. package/dist/DragHandleRow.module.css +6 -0
  18. package/dist/FileDropzone.module.css +25 -1
  19. package/dist/Header.module.css +6 -0
  20. package/dist/IconPicker.module.css +14 -4
  21. package/dist/Input.module.css +6 -0
  22. package/dist/LegalLinks.module.css +9 -2
  23. package/dist/Markdown.module.css +5 -0
  24. package/dist/Message.module.css +9 -0
  25. package/dist/MobileAppsDrawer.module.css +9 -5
  26. package/dist/MobileFooter.module.css +6 -0
  27. package/dist/NavList.module.css +11 -2
  28. package/dist/NavTabs.module.css +7 -1
  29. package/dist/NotificationsPanel.module.css +10 -0
  30. package/dist/QrCode.module.css +17 -0
  31. package/dist/QuantityStepper.module.css +4 -2
  32. package/dist/RadioGroup.module.css +6 -0
  33. package/dist/SegmentedControl.module.css +6 -0
  34. package/dist/Select.module.css +6 -0
  35. package/dist/Sheet.module.css +16 -1
  36. package/dist/SplitPane.module.css +1 -1
  37. package/dist/StepStrip.module.css +5 -3
  38. package/dist/SuggestionInput.module.css +12 -1
  39. package/dist/SwipableMobileCarouselDots.module.css +6 -0
  40. package/dist/SystemBanner.module.css +6 -0
  41. package/dist/Tabs.module.css +6 -0
  42. package/dist/TagInput.module.css +6 -0
  43. package/dist/Textarea.module.css +6 -0
  44. package/dist/Toast.module.css +5 -0
  45. package/dist/Toggle.module.css +7 -0
  46. package/dist/Tooltip.module.css +6 -0
  47. package/dist/UserMenu.module.css +5 -0
  48. package/dist/fonts/OFL.txt +93 -0
  49. package/dist/fonts/hanken-grotesk-cyrillic-ext-wght-normal.woff2 +0 -0
  50. package/dist/fonts/hanken-grotesk-latin-ext-wght-normal.woff2 +0 -0
  51. package/dist/fonts/hanken-grotesk-latin-wght-normal.woff2 +0 -0
  52. package/dist/fonts/hanken-grotesk-vietnamese-wght-normal.woff2 +0 -0
  53. package/dist/index.d.ts +121 -43
  54. package/dist/index.js +1410 -1152
  55. package/dist/tokens/fonts.css +53 -0
  56. package/dist/tokens/primitives.css +12 -12
  57. package/dist/tokens.css +2 -1
  58. package/package.json +24 -13
  59. package/src/__tests__/motion.test.tsx +0 -105
  60. package/src/__tests__/package-json.test.ts +0 -8
  61. package/src/components/Accordion/Accordion.module.css +0 -3
  62. package/src/components/Accordion/Accordion.stories.tsx +0 -110
  63. package/src/components/Accordion/Accordion.tsx +0 -53
  64. package/src/components/Accordion/__tests__/Accordion.test.tsx +0 -61
  65. package/src/components/Alert/Alert.module.css +0 -62
  66. package/src/components/Alert/Alert.stories.tsx +0 -96
  67. package/src/components/Alert/Alert.tsx +0 -58
  68. package/src/components/Alert/__tests__/Alert.test.tsx +0 -75
  69. package/src/components/AppsLauncher/AppsLauncher.module.css +0 -96
  70. package/src/components/AppsLauncher/AppsLauncher.stories.tsx +0 -58
  71. package/src/components/AppsLauncher/AppsLauncher.tsx +0 -117
  72. package/src/components/AppsLauncher/__tests__/AppsLauncher.test.tsx +0 -52
  73. package/src/components/AspectRatio/AspectRatio.module.css +0 -15
  74. package/src/components/AspectRatio/AspectRatio.stories.tsx +0 -78
  75. package/src/components/AspectRatio/AspectRatio.tsx +0 -21
  76. package/src/components/AspectRatio/__tests__/AspectRatio.test.tsx +0 -27
  77. package/src/components/Avatar/Avatar.module.css +0 -38
  78. package/src/components/Avatar/Avatar.tsx +0 -42
  79. package/src/components/Badge/Badge.module.css +0 -177
  80. package/src/components/Badge/Badge.stories.tsx +0 -238
  81. package/src/components/Badge/Badge.tsx +0 -84
  82. package/src/components/Badge/__tests__/Badge.test.tsx +0 -90
  83. package/src/components/BalanceChip/BalanceChip.module.css +0 -32
  84. package/src/components/BalanceChip/BalanceChip.stories.tsx +0 -45
  85. package/src/components/BalanceChip/BalanceChip.tsx +0 -33
  86. package/src/components/Breadcrumb/Breadcrumb.module.css +0 -49
  87. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +0 -47
  88. package/src/components/Breadcrumb/Breadcrumb.tsx +0 -57
  89. package/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx +0 -52
  90. package/src/components/Button/Button.module.css +0 -169
  91. package/src/components/Button/Button.stories.tsx +0 -83
  92. package/src/components/Button/Button.tsx +0 -52
  93. package/src/components/Button/__tests__/Button.test.tsx +0 -66
  94. package/src/components/ButtonGroup/ButtonGroup.module.css +0 -29
  95. package/src/components/ButtonGroup/ButtonGroup.stories.tsx +0 -57
  96. package/src/components/ButtonGroup/ButtonGroup.tsx +0 -27
  97. package/src/components/ButtonGroup/__tests__/ButtonGroup.test.tsx +0 -29
  98. package/src/components/Calendar/Calendar.module.css +0 -126
  99. package/src/components/Calendar/Calendar.tsx +0 -213
  100. package/src/components/Calendar/__tests__/Calendar.test.tsx +0 -98
  101. package/src/components/Calendar/dateUtils.ts +0 -97
  102. package/src/components/Card/Card.module.css +0 -42
  103. package/src/components/Card/Card.tsx +0 -34
  104. package/src/components/CardTile/CardTile.module.css +0 -181
  105. package/src/components/CardTile/CardTile.stories.tsx +0 -86
  106. package/src/components/CardTile/CardTile.tsx +0 -128
  107. package/src/components/CardTile/__tests__/CardTile.test.tsx +0 -56
  108. package/src/components/CheckableListRow/CheckableListRow.module.css +0 -95
  109. package/src/components/CheckableListRow/CheckableListRow.stories.tsx +0 -99
  110. package/src/components/CheckableListRow/CheckableListRow.tsx +0 -89
  111. package/src/components/Checkbox/Checkbox.module.css +0 -111
  112. package/src/components/Checkbox/Checkbox.tsx +0 -78
  113. package/src/components/CodeTextarea/CodeTextarea.module.css +0 -53
  114. package/src/components/CodeTextarea/CodeTextarea.stories.tsx +0 -77
  115. package/src/components/CodeTextarea/CodeTextarea.tsx +0 -36
  116. package/src/components/Collapsible/Collapsible.module.css +0 -70
  117. package/src/components/Collapsible/Collapsible.stories.tsx +0 -62
  118. package/src/components/Collapsible/Collapsible.tsx +0 -66
  119. package/src/components/Collapsible/__tests__/Collapsible.test.tsx +0 -71
  120. package/src/components/ColorPicker/ColorPicker.module.css +0 -132
  121. package/src/components/ColorPicker/ColorPicker.stories.tsx +0 -80
  122. package/src/components/ColorPicker/ColorPicker.tsx +0 -157
  123. package/src/components/ColorPicker/__tests__/ColorPicker.test.tsx +0 -117
  124. package/src/components/Combobox/Combobox.module.css +0 -122
  125. package/src/components/Combobox/Combobox.stories.tsx +0 -79
  126. package/src/components/Combobox/Combobox.tsx +0 -186
  127. package/src/components/Combobox/__tests__/Combobox.test.tsx +0 -158
  128. package/src/components/Command/Command.module.css +0 -80
  129. package/src/components/Command/Command.stories.tsx +0 -104
  130. package/src/components/Command/Command.tsx +0 -168
  131. package/src/components/Command/__tests__/Command.test.tsx +0 -162
  132. package/src/components/ConfirmDialog/ConfirmDialog.module.css +0 -113
  133. package/src/components/ConfirmDialog/ConfirmDialog.tsx +0 -150
  134. package/src/components/ConfirmDialog/__tests__/ConfirmDialog.test.tsx +0 -214
  135. package/src/components/ConsentPrompt/ConsentPrompt.module.css +0 -21
  136. package/src/components/ConsentPrompt/ConsentPrompt.stories.tsx +0 -31
  137. package/src/components/ConsentPrompt/ConsentPrompt.tsx +0 -66
  138. package/src/components/ContextMenu/ContextMenu.stories.tsx +0 -81
  139. package/src/components/ContextMenu/ContextMenu.tsx +0 -100
  140. package/src/components/ContextMenu/__tests__/ContextMenu.test.tsx +0 -87
  141. package/src/components/CurrencyInput/CurrencyInput.stories.tsx +0 -50
  142. package/src/components/CurrencyInput/CurrencyInput.tsx +0 -60
  143. package/src/components/DataTable/DataTable.module.css +0 -28
  144. package/src/components/DataTable/DataTable.stories.tsx +0 -74
  145. package/src/components/DataTable/DataTable.tsx +0 -154
  146. package/src/components/DataTable/__tests__/DataTable.test.tsx +0 -123
  147. package/src/components/DatePicker/DatePicker.module.css +0 -61
  148. package/src/components/DatePicker/DatePicker.tsx +0 -103
  149. package/src/components/DatePicker/__tests__/DatePicker.test.tsx +0 -89
  150. package/src/components/DeviceOnlyGate/DeviceOnlyGate.tsx +0 -58
  151. package/src/components/DeviceOnlyGate/__tests__/DeviceOnlyGate.test.tsx +0 -45
  152. package/src/components/DeviceStorageKeyGate/DeviceStorageKeyGate.tsx +0 -100
  153. package/src/components/DeviceStorageKeyGate/__tests__/DeviceStorageKeyGate.test.tsx +0 -119
  154. package/src/components/Dialog/Dialog.module.css +0 -335
  155. package/src/components/Dialog/Dialog.stories.tsx +0 -324
  156. package/src/components/Dialog/Dialog.tsx +0 -254
  157. package/src/components/Dialog/__tests__/Dialog.test.tsx +0 -318
  158. package/src/components/DragHandleRow/DragHandleRow.module.css +0 -57
  159. package/src/components/DragHandleRow/DragHandleRow.tsx +0 -42
  160. package/src/components/Drawer/Drawer.module.css +0 -121
  161. package/src/components/Drawer/Drawer.stories.tsx +0 -132
  162. package/src/components/Drawer/Drawer.tsx +0 -175
  163. package/src/components/Drawer/__tests__/Drawer.test.tsx +0 -226
  164. package/src/components/EmptyState/EmptyState.module.css +0 -27
  165. package/src/components/EmptyState/EmptyState.tsx +0 -27
  166. package/src/components/FileDropzone/FileDropzone.module.css +0 -63
  167. package/src/components/FileDropzone/FileDropzone.tsx +0 -109
  168. package/src/components/FileDropzone/__tests__/FileDropzone.test.tsx +0 -67
  169. package/src/components/FormField/FormField.module.css +0 -33
  170. package/src/components/FormField/FormField.tsx +0 -78
  171. package/src/components/FormField/__tests__/FormField.test.tsx +0 -83
  172. package/src/components/GripIcon/GripIcon.tsx +0 -27
  173. package/src/components/Header/Header.module.css +0 -62
  174. package/src/components/Header/Header.stories.tsx +0 -452
  175. package/src/components/Header/Header.tsx +0 -102
  176. package/src/components/Header/__tests__/Header.test.tsx +0 -104
  177. package/src/components/HeaderFooterLayout/HeaderFooterLayout.module.css +0 -21
  178. package/src/components/HeaderFooterLayout/HeaderFooterLayout.stories.tsx +0 -111
  179. package/src/components/HeaderFooterLayout/HeaderFooterLayout.tsx +0 -54
  180. package/src/components/HeaderFooterLayout/__tests__/HeaderFooterLayout.test.tsx +0 -58
  181. package/src/components/HoverCard/HoverCard.module.css +0 -3
  182. package/src/components/HoverCard/HoverCard.stories.tsx +0 -66
  183. package/src/components/HoverCard/HoverCard.tsx +0 -111
  184. package/src/components/HoverCard/__tests__/HoverCard.test.tsx +0 -99
  185. package/src/components/Icon/Icon.module.css +0 -27
  186. package/src/components/Icon/Icon.stories.tsx +0 -95
  187. package/src/components/Icon/Icon.tsx +0 -43
  188. package/src/components/Icon/__tests__/Icon.test.tsx +0 -40
  189. package/src/components/Icon/icons/activity.tsx +0 -20
  190. package/src/components/Icon/icons/alert-triangle.tsx +0 -22
  191. package/src/components/Icon/icons/apple.tsx +0 -21
  192. package/src/components/Icon/icons/arrow-left-right.tsx +0 -23
  193. package/src/components/Icon/icons/banana.tsx +0 -21
  194. package/src/components/Icon/icons/beef.tsx +0 -22
  195. package/src/components/Icon/icons/beer.tsx +0 -24
  196. package/src/components/Icon/icons/bell.tsx +0 -21
  197. package/src/components/Icon/icons/bold.tsx +0 -20
  198. package/src/components/Icon/icons/calendar.tsx +0 -23
  199. package/src/components/Icon/icons/candy.tsx +0 -24
  200. package/src/components/Icon/icons/carrot.tsx +0 -22
  201. package/src/components/Icon/icons/check.tsx +0 -20
  202. package/src/components/Icon/icons/chevron-down.tsx +0 -20
  203. package/src/components/Icon/icons/chevron-left.tsx +0 -20
  204. package/src/components/Icon/icons/chevron-right.tsx +0 -20
  205. package/src/components/Icon/icons/chevron-up.tsx +0 -20
  206. package/src/components/Icon/icons/circle-check.tsx +0 -21
  207. package/src/components/Icon/icons/circle-chevron-left.tsx +0 -21
  208. package/src/components/Icon/icons/circle-x.tsx +0 -22
  209. package/src/components/Icon/icons/code.tsx +0 -21
  210. package/src/components/Icon/icons/coffee.tsx +0 -23
  211. package/src/components/Icon/icons/cookie.tsx +0 -25
  212. package/src/components/Icon/icons/copy.tsx +0 -21
  213. package/src/components/Icon/icons/credit-card.tsx +0 -21
  214. package/src/components/Icon/icons/croissant.tsx +0 -24
  215. package/src/components/Icon/icons/cup-soda.tsx +0 -23
  216. package/src/components/Icon/icons/database.tsx +0 -22
  217. package/src/components/Icon/icons/download.tsx +0 -22
  218. package/src/components/Icon/icons/drumstick.tsx +0 -21
  219. package/src/components/Icon/icons/egg.tsx +0 -20
  220. package/src/components/Icon/icons/ellipsis-vertical.tsx +0 -22
  221. package/src/components/Icon/icons/external-link.tsx +0 -22
  222. package/src/components/Icon/icons/eye-off.tsx +0 -23
  223. package/src/components/Icon/icons/eye.tsx +0 -21
  224. package/src/components/Icon/icons/file-text.tsx +0 -24
  225. package/src/components/Icon/icons/file.tsx +0 -21
  226. package/src/components/Icon/icons/fish.tsx +0 -25
  227. package/src/components/Icon/icons/folder-closed.tsx +0 -21
  228. package/src/components/Icon/icons/folder-open.tsx +0 -20
  229. package/src/components/Icon/icons/folder.tsx +0 -20
  230. package/src/components/Icon/icons/folders.tsx +0 -21
  231. package/src/components/Icon/icons/grid-2x2.tsx +0 -22
  232. package/src/components/Icon/icons/hat-glasses.tsx +0 -24
  233. package/src/components/Icon/icons/history.tsx +0 -22
  234. package/src/components/Icon/icons/house.tsx +0 -21
  235. package/src/components/Icon/icons/inbox.tsx +0 -21
  236. package/src/components/Icon/icons/index.ts +0 -394
  237. package/src/components/Icon/icons/info.tsx +0 -22
  238. package/src/components/Icon/icons/italic.tsx +0 -22
  239. package/src/components/Icon/icons/layers.tsx +0 -22
  240. package/src/components/Icon/icons/layout-dashboard.tsx +0 -23
  241. package/src/components/Icon/icons/layout-grid.tsx +0 -23
  242. package/src/components/Icon/icons/link.tsx +0 -21
  243. package/src/components/Icon/icons/list-ordered.tsx +0 -25
  244. package/src/components/Icon/icons/list.tsx +0 -25
  245. package/src/components/Icon/icons/lock.tsx +0 -21
  246. package/src/components/Icon/icons/log-out.tsx +0 -22
  247. package/src/components/Icon/icons/luggage.tsx +0 -24
  248. package/src/components/Icon/icons/mail.tsx +0 -21
  249. package/src/components/Icon/icons/map-pin.tsx +0 -21
  250. package/src/components/Icon/icons/menu.tsx +0 -22
  251. package/src/components/Icon/icons/milk.tsx +0 -22
  252. package/src/components/Icon/icons/minus.tsx +0 -20
  253. package/src/components/Icon/icons/package.tsx +0 -23
  254. package/src/components/Icon/icons/paint-bucket.tsx +0 -23
  255. package/src/components/Icon/icons/panel-left.tsx +0 -21
  256. package/src/components/Icon/icons/pencil.tsx +0 -21
  257. package/src/components/Icon/icons/pin.tsx +0 -21
  258. package/src/components/Icon/icons/pizza.tsx +0 -24
  259. package/src/components/Icon/icons/plus.tsx +0 -21
  260. package/src/components/Icon/icons/rectangle-ellipsis.tsx +0 -23
  261. package/src/components/Icon/icons/refresh-cw.tsx +0 -23
  262. package/src/components/Icon/icons/rotate-ccw.tsx +0 -21
  263. package/src/components/Icon/icons/rotate-cw.tsx +0 -21
  264. package/src/components/Icon/icons/route.tsx +0 -22
  265. package/src/components/Icon/icons/salad.tsx +0 -24
  266. package/src/components/Icon/icons/search.tsx +0 -21
  267. package/src/components/Icon/icons/send.tsx +0 -21
  268. package/src/components/Icon/icons/settings.tsx +0 -21
  269. package/src/components/Icon/icons/share-2.tsx +0 -24
  270. package/src/components/Icon/icons/sheet.tsx +0 -24
  271. package/src/components/Icon/icons/shield.tsx +0 -20
  272. package/src/components/Icon/icons/shopping-basket.tsx +0 -26
  273. package/src/components/Icon/icons/sliders-horizontal.tsx +0 -28
  274. package/src/components/Icon/icons/smartphone.tsx +0 -21
  275. package/src/components/Icon/icons/snowflake.tsx +0 -31
  276. package/src/components/Icon/icons/spray-can.tsx +0 -29
  277. package/src/components/Icon/icons/square-kanban.tsx +0 -23
  278. package/src/components/Icon/icons/table.tsx +0 -23
  279. package/src/components/Icon/icons/trash-2.tsx +0 -24
  280. package/src/components/Icon/icons/upload.tsx +0 -22
  281. package/src/components/Icon/icons/user-round-plus.tsx +0 -23
  282. package/src/components/Icon/icons/user.tsx +0 -21
  283. package/src/components/Icon/icons/users.tsx +0 -23
  284. package/src/components/Icon/icons/wine.tsx +0 -23
  285. package/src/components/Icon/icons/x.tsx +0 -21
  286. package/src/components/IconPicker/IconPicker.module.css +0 -63
  287. package/src/components/IconPicker/IconPicker.stories.tsx +0 -84
  288. package/src/components/IconPicker/IconPicker.tsx +0 -90
  289. package/src/components/Input/Input.module.css +0 -52
  290. package/src/components/Input/Input.stories.tsx +0 -86
  291. package/src/components/Input/Input.tsx +0 -20
  292. package/src/components/Input/__tests__/Input.test.tsx +0 -22
  293. package/src/components/Item/Item.module.css +0 -70
  294. package/src/components/Item/Item.stories.tsx +0 -62
  295. package/src/components/Item/Item.tsx +0 -54
  296. package/src/components/Item/__tests__/Item.test.tsx +0 -39
  297. package/src/components/Kbd/Kbd.module.css +0 -14
  298. package/src/components/Kbd/Kbd.stories.tsx +0 -32
  299. package/src/components/Kbd/Kbd.tsx +0 -12
  300. package/src/components/Kbd/__tests__/Kbd.test.tsx +0 -14
  301. package/src/components/Label/Label.module.css +0 -11
  302. package/src/components/Label/Label.stories.tsx +0 -40
  303. package/src/components/Label/Label.tsx +0 -24
  304. package/src/components/Label/__tests__/Label.test.tsx +0 -32
  305. package/src/components/LegalLinks/LegalLinks.module.css +0 -24
  306. package/src/components/LegalLinks/LegalLinks.stories.tsx +0 -22
  307. package/src/components/LegalLinks/LegalLinks.tsx +0 -40
  308. package/src/components/Markdown/Markdown.module.css +0 -73
  309. package/src/components/Markdown/Markdown.stories.tsx +0 -40
  310. package/src/components/Markdown/Markdown.tsx +0 -305
  311. package/src/components/Markdown/__tests__/Markdown.test.tsx +0 -144
  312. package/src/components/Marker/Marker.module.css +0 -33
  313. package/src/components/Marker/Marker.stories.tsx +0 -39
  314. package/src/components/Marker/Marker.tsx +0 -34
  315. package/src/components/Marker/__tests__/Marker.test.tsx +0 -23
  316. package/src/components/MemberMultiSelect/MemberMultiSelect.module.css +0 -27
  317. package/src/components/MemberMultiSelect/MemberMultiSelect.stories.tsx +0 -74
  318. package/src/components/MemberMultiSelect/MemberMultiSelect.tsx +0 -67
  319. package/src/components/Menu/Menu.module.css +0 -90
  320. package/src/components/Menu/Menu.tsx +0 -209
  321. package/src/components/Menu/__tests__/Menu.test.tsx +0 -227
  322. package/src/components/Menubar/Menubar.stories.tsx +0 -52
  323. package/src/components/Menubar/Menubar.tsx +0 -42
  324. package/src/components/Menubar/__tests__/Menubar.test.tsx +0 -45
  325. package/src/components/Message/Message.module.css +0 -99
  326. package/src/components/Message/Message.stories.tsx +0 -79
  327. package/src/components/Message/Message.tsx +0 -41
  328. package/src/components/Message/__tests__/Message.test.tsx +0 -46
  329. package/src/components/MessageScroller/MessageScroller.module.css +0 -65
  330. package/src/components/MessageScroller/MessageScroller.stories.tsx +0 -84
  331. package/src/components/MessageScroller/MessageScroller.tsx +0 -84
  332. package/src/components/MessageScroller/__tests__/MessageScroller.test.tsx +0 -105
  333. package/src/components/MobileAppsDrawer/MobileAppsDrawer.module.css +0 -82
  334. package/src/components/MobileAppsDrawer/MobileAppsDrawer.tsx +0 -78
  335. package/src/components/MobileAppsDrawer/__tests__/MobileAppsDrawer.test.tsx +0 -80
  336. package/src/components/MobileFooter/MobileFooter.module.css +0 -73
  337. package/src/components/MobileFooter/MobileFooter.stories.tsx +0 -47
  338. package/src/components/MobileFooter/MobileFooter.tsx +0 -122
  339. package/src/components/MobileFooter/__tests__/MobileFooter.test.tsx +0 -129
  340. package/src/components/MobileHeader/MobileHeader.module.css +0 -76
  341. package/src/components/MobileHeader/MobileHeader.stories.tsx +0 -57
  342. package/src/components/MobileHeader/MobileHeader.tsx +0 -90
  343. package/src/components/MobileHeader/__tests__/MobileHeader.test.tsx +0 -113
  344. package/src/components/NavList/NavList.module.css +0 -130
  345. package/src/components/NavList/NavList.tsx +0 -136
  346. package/src/components/NavList/__tests__/NavList.test.tsx +0 -109
  347. package/src/components/NavTabs/NavTabs.module.css +0 -50
  348. package/src/components/NavTabs/NavTabs.tsx +0 -61
  349. package/src/components/NavigationMenu/NavigationMenu.module.css +0 -53
  350. package/src/components/NavigationMenu/NavigationMenu.stories.tsx +0 -58
  351. package/src/components/NavigationMenu/NavigationMenu.tsx +0 -125
  352. package/src/components/NavigationMenu/__tests__/NavigationMenu.test.tsx +0 -93
  353. package/src/components/NotificationsPanel/NotificationsPanel.module.css +0 -258
  354. package/src/components/NotificationsPanel/NotificationsPanel.stories.tsx +0 -61
  355. package/src/components/NotificationsPanel/NotificationsPanel.tsx +0 -187
  356. package/src/components/NotificationsPanel/__tests__/NotificationsPanel.test.tsx +0 -78
  357. package/src/components/OfflineGate/OfflineGate.tsx +0 -44
  358. package/src/components/OfflineGate/__tests__/OfflineGate.test.tsx +0 -66
  359. package/src/components/OverlayHeader/OverlayHeader.module.css +0 -98
  360. package/src/components/OverlayHeader/OverlayHeader.tsx +0 -77
  361. package/src/components/OverlayHeader/__tests__/OverlayHeader.test.tsx +0 -69
  362. package/src/components/PageContainer/PageContainer.module.css +0 -82
  363. package/src/components/PageContainer/PageContainer.tsx +0 -64
  364. package/src/components/PageContainer/__tests__/PageContainer.test.tsx +0 -70
  365. package/src/components/PageHeader/PageHeader.module.css +0 -86
  366. package/src/components/PageHeader/PageHeader.tsx +0 -176
  367. package/src/components/PageHeader/__tests__/PageHeader.test.tsx +0 -103
  368. package/src/components/PageLayout/PageLayout.module.css +0 -51
  369. package/src/components/PageLayout/PageLayout.stories.tsx +0 -73
  370. package/src/components/PageLayout/PageLayout.tsx +0 -51
  371. package/src/components/PageLayout/__tests__/PageLayout.test.tsx +0 -34
  372. package/src/components/Pagination/Pagination.module.css +0 -98
  373. package/src/components/Pagination/Pagination.stories.tsx +0 -49
  374. package/src/components/Pagination/Pagination.tsx +0 -87
  375. package/src/components/Pagination/__tests__/Pagination.test.tsx +0 -56
  376. package/src/components/Popover/Popover.module.css +0 -74
  377. package/src/components/Popover/Popover.stories.tsx +0 -357
  378. package/src/components/Popover/Popover.tsx +0 -290
  379. package/src/components/Popover/__tests__/Popover.test.tsx +0 -263
  380. package/src/components/Progress/Progress.module.css +0 -20
  381. package/src/components/Progress/Progress.stories.tsx +0 -40
  382. package/src/components/Progress/Progress.tsx +0 -35
  383. package/src/components/Progress/__tests__/Progress.test.tsx +0 -31
  384. package/src/components/QuantityStepper/QuantityStepper.module.css +0 -67
  385. package/src/components/QuantityStepper/QuantityStepper.stories.tsx +0 -79
  386. package/src/components/QuantityStepper/QuantityStepper.tsx +0 -107
  387. package/src/components/RadioGroup/RadioGroup.module.css +0 -88
  388. package/src/components/RadioGroup/RadioGroup.stories.tsx +0 -69
  389. package/src/components/RadioGroup/RadioGroup.tsx +0 -99
  390. package/src/components/RadioGroup/__tests__/RadioGroup.test.tsx +0 -59
  391. package/src/components/Resizable/Resizable.module.css +0 -70
  392. package/src/components/Resizable/Resizable.stories.tsx +0 -82
  393. package/src/components/Resizable/Resizable.tsx +0 -313
  394. package/src/components/Resizable/__tests__/Resizable.test.tsx +0 -128
  395. package/src/components/ResponsiveSurface/ResponsiveSurface.tsx +0 -24
  396. package/src/components/ResponsiveSurface/__tests__/ResponsiveSurface.test.tsx +0 -73
  397. package/src/components/RootLayout/RootLayout.module.css +0 -12
  398. package/src/components/RootLayout/RootLayout.stories.tsx +0 -125
  399. package/src/components/RootLayout/RootLayout.tsx +0 -185
  400. package/src/components/RootLayout/__tests__/RootLayout.test.tsx +0 -161
  401. package/src/components/ScrollArea/ScrollArea.module.css +0 -20
  402. package/src/components/ScrollArea/ScrollArea.stories.tsx +0 -57
  403. package/src/components/ScrollArea/ScrollArea.tsx +0 -27
  404. package/src/components/ScrollArea/__tests__/ScrollArea.test.tsx +0 -39
  405. package/src/components/SegmentedControl/SegmentedControl.module.css +0 -55
  406. package/src/components/SegmentedControl/SegmentedControl.stories.tsx +0 -118
  407. package/src/components/SegmentedControl/SegmentedControl.tsx +0 -56
  408. package/src/components/SegmentedControl/__tests__/SegmentedControl.test.tsx +0 -63
  409. package/src/components/Select/Select.module.css +0 -82
  410. package/src/components/Select/Select.stories.tsx +0 -115
  411. package/src/components/Select/Select.tsx +0 -48
  412. package/src/components/Select/__tests__/Select.test.tsx +0 -59
  413. package/src/components/Sheet/Sheet.module.css +0 -58
  414. package/src/components/Sheet/Sheet.tsx +0 -109
  415. package/src/components/Sheet/__tests__/Sheet.test.tsx +0 -99
  416. package/src/components/Slider/Slider.module.css +0 -95
  417. package/src/components/Slider/Slider.stories.tsx +0 -64
  418. package/src/components/Slider/Slider.tsx +0 -77
  419. package/src/components/Slider/__tests__/Slider.test.tsx +0 -45
  420. package/src/components/Spinner/Spinner.module.css +0 -39
  421. package/src/components/Spinner/Spinner.tsx +0 -23
  422. package/src/components/SplitMethodSelector/SplitMethodSelector.stories.tsx +0 -33
  423. package/src/components/SplitMethodSelector/SplitMethodSelector.tsx +0 -43
  424. package/src/components/SplitPane/SplitPane.module.css +0 -85
  425. package/src/components/SplitPane/SplitPane.stories.tsx +0 -160
  426. package/src/components/SplitPane/SplitPane.tsx +0 -149
  427. package/src/components/SplitPane/__tests__/SplitPane.test.tsx +0 -51
  428. package/src/components/StatusBadge/StatusBadge.module.css +0 -59
  429. package/src/components/StatusBadge/StatusBadge.stories.tsx +0 -74
  430. package/src/components/StatusBadge/StatusBadge.tsx +0 -65
  431. package/src/components/StepStrip/StepStrip.module.css +0 -53
  432. package/src/components/StepStrip/StepStrip.tsx +0 -74
  433. package/src/components/SuggestionInput/SuggestionInput.module.css +0 -103
  434. package/src/components/SuggestionInput/SuggestionInput.stories.tsx +0 -144
  435. package/src/components/SuggestionInput/SuggestionInput.tsx +0 -207
  436. package/src/components/SwipableMobileCarousel/SwipableMobileCarousel.module.css +0 -64
  437. package/src/components/SwipableMobileCarousel/SwipableMobileCarousel.tsx +0 -243
  438. package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlide.tsx +0 -35
  439. package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody.tsx +0 -42
  440. package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter.tsx +0 -18
  441. package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader.tsx +0 -21
  442. package/src/components/SwipableMobileCarousel/SwipableMobileCarouselSlideParts.module.css +0 -29
  443. package/src/components/SwipableMobileCarousel/__tests__/SwipableMobileCarousel.test.tsx +0 -214
  444. package/src/components/SwipableMobileCarousel/__tests__/SwipableMobileCarouselDevGuard.test.tsx +0 -61
  445. package/src/components/SwipableMobileCarousel/context.ts +0 -13
  446. package/src/components/SwipableMobileCarouselDots/SwipableMobileCarouselDots.module.css +0 -64
  447. package/src/components/SwipableMobileCarouselDots/SwipableMobileCarouselDots.tsx +0 -73
  448. package/src/components/SwipableMobileCarouselDots/__tests__/SwipableMobileCarouselDots.test.tsx +0 -63
  449. package/src/components/SwipeStack/SwipeStack.module.css +0 -101
  450. package/src/components/SwipeStack/SwipeStack.tsx +0 -199
  451. package/src/components/SwipeStack/SwipeStackCard.tsx +0 -22
  452. package/src/components/SwipeStack/__tests__/SwipeStack.test.tsx +0 -169
  453. package/src/components/SystemBanner/SystemBanner.module.css +0 -79
  454. package/src/components/SystemBanner/SystemBanner.stories.tsx +0 -86
  455. package/src/components/SystemBanner/SystemBanner.tsx +0 -50
  456. package/src/components/SystemBanner/__tests__/SystemBanner.test.tsx +0 -50
  457. package/src/components/Table/Table.module.css +0 -45
  458. package/src/components/Table/Table.stories.tsx +0 -125
  459. package/src/components/Table/Table.tsx +0 -51
  460. package/src/components/Table/__tests__/Table.test.tsx +0 -50
  461. package/src/components/Tabs/Tabs.module.css +0 -56
  462. package/src/components/Tabs/Tabs.stories.tsx +0 -100
  463. package/src/components/Tabs/Tabs.tsx +0 -46
  464. package/src/components/Tabs/__tests__/Tabs.test.tsx +0 -45
  465. package/src/components/TagInput/TagInput.module.css +0 -141
  466. package/src/components/TagInput/TagInput.stories.tsx +0 -109
  467. package/src/components/TagInput/TagInput.tsx +0 -174
  468. package/src/components/TagInput/__tests__/TagInput.test.tsx +0 -69
  469. package/src/components/Textarea/Textarea.module.css +0 -47
  470. package/src/components/Textarea/Textarea.tsx +0 -38
  471. package/src/components/Textarea/__tests__/Textarea.test.tsx +0 -51
  472. package/src/components/ThreeColumnLayout/ThreeColumnLayout.module.css +0 -35
  473. package/src/components/ThreeColumnLayout/ThreeColumnLayout.stories.tsx +0 -152
  474. package/src/components/ThreeColumnLayout/ThreeColumnLayout.tsx +0 -87
  475. package/src/components/ThreeColumnLayout/__tests__/ThreeColumnLayout.test.tsx +0 -78
  476. package/src/components/Toast/Toast.module.css +0 -191
  477. package/src/components/Toast/Toast.stories.tsx +0 -191
  478. package/src/components/Toast/Toast.tsx +0 -139
  479. package/src/components/Toggle/Toggle.module.css +0 -57
  480. package/src/components/Toggle/Toggle.stories.tsx +0 -95
  481. package/src/components/Toggle/Toggle.tsx +0 -39
  482. package/src/components/Toggle/__tests__/Toggle.test.tsx +0 -47
  483. package/src/components/Tooltip/Tooltip.module.css +0 -56
  484. package/src/components/Tooltip/Tooltip.tsx +0 -30
  485. package/src/components/Typography/Typography.module.css +0 -47
  486. package/src/components/Typography/Typography.stories.tsx +0 -62
  487. package/src/components/Typography/Typography.tsx +0 -30
  488. package/src/components/Typography/__tests__/Typography.test.tsx +0 -34
  489. package/src/components/UserMenu/UserMenu.module.css +0 -90
  490. package/src/components/UserMenu/UserMenu.stories.tsx +0 -49
  491. package/src/components/UserMenu/UserMenu.tsx +0 -132
  492. package/src/components/UserMenu/__tests__/UserMenu.test.tsx +0 -77
  493. package/src/css-modules.d.ts +0 -4
  494. package/src/hooks/__tests__/useCarouselRouteSync.test.tsx +0 -126
  495. package/src/hooks/__tests__/useDoubleTap.test.tsx +0 -117
  496. package/src/hooks/__tests__/useIsMobile.test.tsx +0 -80
  497. package/src/hooks/__tests__/useIsOffline.test.tsx +0 -53
  498. package/src/hooks/__tests__/useLongPress.test.tsx +0 -158
  499. package/src/hooks/__tests__/useOfflineTileState.test.tsx +0 -69
  500. package/src/hooks/__tests__/usePublishShellChromeHeight.test.tsx +0 -118
  501. package/src/hooks/__tests__/useReorderSensors.test.ts +0 -26
  502. package/src/hooks/__tests__/useResponsiveLayout.test.tsx +0 -87
  503. package/src/hooks/__tests__/useSnapCarousel.test.tsx +0 -175
  504. package/src/hooks/__tests__/useSwipeReveal.test.tsx +0 -110
  505. package/src/hooks/__tests__/useSwipeStack.test.tsx +0 -155
  506. package/src/hooks/index.ts +0 -33
  507. package/src/hooks/useCarouselRouteSync.ts +0 -92
  508. package/src/hooks/useCommitOnEnterOrBlur.ts +0 -39
  509. package/src/hooks/useDoubleTap.ts +0 -91
  510. package/src/hooks/useIsMobile.ts +0 -33
  511. package/src/hooks/useIsOffline.ts +0 -41
  512. package/src/hooks/useLongPress.ts +0 -185
  513. package/src/hooks/useOfflineTileState.ts +0 -45
  514. package/src/hooks/usePublishShellChromeHeight.ts +0 -96
  515. package/src/hooks/useReorderSensors.ts +0 -88
  516. package/src/hooks/useResponsiveLayout.ts +0 -36
  517. package/src/hooks/useSnapCarousel.ts +0 -284
  518. package/src/hooks/useSwipeReveal.ts +0 -107
  519. package/src/hooks/useSwipeStack.ts +0 -235
  520. package/src/index.ts +0 -311
  521. package/src/motion.ts +0 -78
  522. package/src/overlay-shell.ts +0 -159
  523. package/src/scroll-lock.ts +0 -22
  524. package/src/stories/Avatar.stories.tsx +0 -44
  525. package/src/stories/Card.stories.tsx +0 -35
  526. package/src/stories/Checkbox.stories.tsx +0 -45
  527. package/src/stories/DesignSystemOverview.stories.tsx +0 -3793
  528. package/src/stories/DeviceOnlyGate.stories.tsx +0 -35
  529. package/src/stories/DeviceStorageKeyGate.stories.tsx +0 -57
  530. package/src/stories/DragHandleRow.stories.tsx +0 -41
  531. package/src/stories/EmptyState.stories.tsx +0 -33
  532. package/src/stories/FileDropzone.stories.tsx +0 -69
  533. package/src/stories/FormField.stories.tsx +0 -47
  534. package/src/stories/GripIcon.stories.tsx +0 -29
  535. package/src/stories/InteractionHooks.stories.tsx +0 -925
  536. package/src/stories/LayoutSystem.stories.tsx +0 -639
  537. package/src/stories/MenuEntries.stories.tsx +0 -86
  538. package/src/stories/MobilePatterns.stories.tsx +0 -1536
  539. package/src/stories/NavList.stories.tsx +0 -147
  540. package/src/stories/NavTabs.stories.tsx +0 -53
  541. package/src/stories/OfflineGate.stories.tsx +0 -42
  542. package/src/stories/PageContainer.stories.tsx +0 -82
  543. package/src/stories/PageHeader.stories.tsx +0 -95
  544. package/src/stories/ResponsiveSurface.stories.tsx +0 -47
  545. package/src/stories/Spinner.stories.tsx +0 -25
  546. package/src/stories/StepStrip.stories.tsx +0 -76
  547. package/src/stories/SwipableMobileCarousel.stories.tsx +0 -362
  548. package/src/stories/SwipeStack.stories.tsx +0 -200
  549. package/src/stories/Textarea.stories.tsx +0 -63
  550. package/src/stories/TokenGallery.stories.tsx +0 -652
  551. package/src/stories/Tooltip.stories.tsx +0 -59
  552. package/src/tokens/primitives.css +0 -168
  553. package/src/tokens/semantic.css +0 -162
  554. package/src/tokens/theme-presets.css +0 -33
  555. package/src/tokens/theme-presets.ts +0 -72
  556. package/src/tokens.css +0 -5
package/src/components/Header/Header.stories.tsx DELETED
@@ -1,452 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import { Header } from './Header';
3
- import { MobileHeader } from '../MobileHeader/MobileHeader';
4
- import { AppsLauncher } from '../AppsLauncher/AppsLauncher';
5
- import { Icon, type IconName } from '../Icon/Icon';
6
- import { NotificationsPanel } from '../NotificationsPanel/NotificationsPanel';
7
- import { UserMenu } from '../UserMenu/UserMenu';
8
- import { useIsMobile } from '../../hooks';
9
-
10
- // ---------------------------------------------------------------------------
11
- // Shared doc primitives (mirrors Overview/Mobile Patterns' own doc styling)
12
- // ---------------------------------------------------------------------------
13
-
14
- const ff = 'var(--sv-font-family)';
15
-
16
- function Heading({ level = 2, children }: { level?: 1 | 2 | 3; children: React.ReactNode }) {
17
- const sizes: Record<number, string> = { 1: '1.75rem', 2: '1.125rem', 3: '0.9375rem' };
18
- const weights: Record<number, number> = { 1: 700, 2: 600, 3: 600 };
19
- const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
20
- return (
21
- <Tag
22
- style={{
23
- fontFamily: ff,
24
- fontSize: sizes[level],
25
- fontWeight: weights[level],
26
- color: 'var(--sv-color-text-primary)',
27
- margin: 0,
28
- lineHeight: 1.3,
29
- }}
30
- >
31
- {children}
32
- </Tag>
33
- );
34
- }
35
-
36
- function Body({ children }: { children: React.ReactNode }) {
37
- return (
38
- <p
39
- style={{
40
- fontFamily: ff,
41
- fontSize: 'var(--sv-font-size-sm)',
42
- color: 'var(--sv-color-text-muted)',
43
- margin: '0.5rem 0 0',
44
- lineHeight: 1.6,
45
- }}
46
- >
47
- {children}
48
- </p>
49
- );
50
- }
51
-
52
- function SectionHeader({ title, subtitle }: { title: string; subtitle?: string }) {
53
- return (
54
- <div
55
- style={{
56
- paddingBottom: 'var(--sv-space-3)',
57
- borderBottom: '2px solid var(--sv-color-accent)',
58
- marginBottom: 'var(--sv-space-5)',
59
- }}
60
- >
61
- <Heading level={2}>{title}</Heading>
62
- {subtitle && <Body>{subtitle}</Body>}
63
- </div>
64
- );
65
- }
66
-
67
- function Callout({
68
- type = 'info',
69
- children,
70
- }: {
71
- type?: 'info' | 'warn' | 'tip';
72
- children: React.ReactNode;
73
- }) {
74
- const map = {
75
- info: {
76
- bg: 'var(--sv-color-info-surface)',
77
- border: 'var(--sv-color-info-border)',
78
- text: 'var(--sv-color-info-text)',
79
- label: 'ℹ',
80
- },
81
- warn: {
82
- bg: 'var(--sv-color-warning-surface)',
83
- border: 'var(--sv-color-warning-border)',
84
- text: 'var(--sv-color-warning-text)',
85
- label: '⚠',
86
- },
87
- tip: {
88
- bg: 'var(--sv-color-success-surface)',
89
- border: 'var(--sv-color-success-border)',
90
- text: 'var(--sv-color-success-text)',
91
- label: '✓',
92
- },
93
- };
94
- const c = map[type];
95
- return (
96
- <div
97
- style={{
98
- background: c.bg,
99
- border: `1px solid ${c.border}`,
100
- borderRadius: 'var(--sv-radius-md)',
101
- padding: 'var(--sv-space-3) var(--sv-space-4)',
102
- display: 'flex',
103
- gap: 'var(--sv-space-2)',
104
- alignItems: 'flex-start',
105
- marginBottom: 'var(--sv-space-4)',
106
- }}
107
- >
108
- <span style={{ color: c.text, fontWeight: 700, flexShrink: 0, fontSize: '0.875rem' }}>
109
- {c.label}
110
- </span>
111
- <p
112
- style={{
113
- fontFamily: ff,
114
- fontSize: 'var(--sv-font-size-sm)',
115
- color: c.text,
116
- margin: 0,
117
- lineHeight: 1.55,
118
- }}
119
- >
120
- {children}
121
- </p>
122
- </div>
123
- );
124
- }
125
-
126
- function CodeBlock({ children }: { children: string }) {
127
- return (
128
- <pre
129
- style={{
130
- fontFamily: 'var(--sv-font-family-mono)',
131
- fontSize: '0.75rem',
132
- background: 'var(--sv-color-surface-sunken)',
133
- border: '1px solid var(--sv-color-border)',
134
- borderRadius: 'var(--sv-radius-md)',
135
- padding: 'var(--sv-space-3) var(--sv-space-4)',
136
- marginTop: 'var(--sv-space-3)',
137
- overflowX: 'auto',
138
- color: 'var(--sv-color-text-primary)',
139
- lineHeight: 1.6,
140
- }}
141
- >
142
- {children}
143
- </pre>
144
- );
145
- }
146
-
147
- function Frame({ children }: { children: React.ReactNode }) {
148
- return (
149
- <div
150
- style={{
151
- border: '1px solid var(--sv-color-border)',
152
- borderRadius: 'var(--sv-radius-lg)',
153
- overflow: 'hidden',
154
- }}
155
- >
156
- {children}
157
- </div>
158
- );
159
- }
160
-
161
- // ---------------------------------------------------------------------------
162
- // Demo pieces — the real, shared AppsLauncher/NotificationsPanel/UserMenu,
163
- // not story-local mockups.
164
- // ---------------------------------------------------------------------------
165
-
166
- /**
167
- * The plugin icon renders at the same 28px as the brand badge next to it,
168
- * not a smaller inline glyph. `Icon`'s largest built-in size (`lg`, 24px)
169
- * reads slightly small in a 28px box (lucide-style glyphs carry their own
170
- * internal inset), so it's scaled up the remaining bit to actually fill the
171
- * box, the same way a real 28px plugin-icon `<img>` asset would.
172
- */
173
- function HeaderPluginIcon({ name }: { name: IconName }) {
174
- return (
175
- <span
176
- aria-hidden="true"
177
- style={{
178
- display: 'inline-flex',
179
- alignItems: 'center',
180
- justifyContent: 'center',
181
- width: 28,
182
- height: 28,
183
- }}
184
- >
185
- <span style={{ display: 'inline-flex', transform: 'scale(1.15)' }}>
186
- <Icon name={name} size="lg" aria-hidden />
187
- </span>
188
- </span>
189
- );
190
- }
191
-
192
- const launcherItems = [
193
- {
194
- key: 'home',
195
- icon: <Icon name="house" size="md" aria-hidden />,
196
- label: 'Home',
197
- href: '/launcher',
198
- },
199
- {
200
- key: 'console',
201
- icon: <Icon name="layout-dashboard" size="md" aria-hidden />,
202
- label: 'Console',
203
- href: '/console',
204
- },
205
- {
206
- key: 'notes',
207
- icon: <Icon name="file" size="md" aria-hidden />,
208
- label: 'Notes',
209
- href: '/notes',
210
- },
211
- ];
212
-
213
- const notificationItems = [
214
- {
215
- id: '1',
216
- icon: <Icon name="layers" size="sm" aria-hidden />,
217
- title: 'Added to a project',
218
- timeLabel: '2d ago',
219
- read: false,
220
- onDismiss: () => {},
221
- },
222
- ];
223
-
224
- const accountItems = [
225
- { label: 'Account', icon: 'user' as const, href: '/account' },
226
- { label: 'Preferences', icon: 'sliders-horizontal' as const, href: '/account/preferences' },
227
- { label: 'Sign out', icon: 'log-out' as const, destructive: true, onSelect: () => {} },
228
- ];
229
-
230
- function Launcher() {
231
- return <AppsLauncher items={launcherItems} />;
232
- }
233
-
234
- function Notifications() {
235
- return <NotificationsPanel items={notificationItems} unreadCount={1} />;
236
- }
237
-
238
- function Account() {
239
- return <UserMenu name="Kasun Benthara" email="kasun@openfs.io" items={accountItems} size="sm" />;
240
- }
241
-
242
- /**
243
- * `Header` is web-only (`shell: minimal`'s desktop top bar) — a plugin
244
- * renders its own mobile equivalent alongside it, gated with `useIsMobile`
245
- * (not CSS, to avoid mounting the wrong chrome's hooks on the wrong
246
- * surface). Resize the Storybook viewport below 768px to see `MobileHeader`
247
- * render instead. The launcher/notifications/avatar triggers are the real,
248
- * shared `AppsLauncher`/`NotificationsPanel`/`UserMenu` components — shared
249
- * verbatim across both branches, not two implementations of the same
250
- * dropdown, and fully clickable here.
251
- */
252
- function ResponsiveHeaderDemo() {
253
- const isMobile = useIsMobile();
254
-
255
- if (isMobile) {
256
- return <MobileHeader title="Sovereign" bell={<Notifications />} avatarMenu={<Account />} />;
257
- }
258
-
259
- return (
260
- <Header
261
- instanceName="Sovereign"
262
- homeHref="/launcher"
263
- plugin={{
264
- name: 'Notes',
265
- icon: <HeaderPluginIcon name="file" />,
266
- href: '/notes',
267
- }}
268
- launcher={<Launcher />}
269
- notifications={<Notifications />}
270
- avatarMenu={<Account />}
271
- />
272
- );
273
- }
274
-
275
- // ---------------------------------------------------------------------------
276
- // Default — the documentation page
277
- // ---------------------------------------------------------------------------
278
-
279
- function HeaderDoc() {
280
- return (
281
- <div
282
- style={{
283
- padding: 'var(--sv-space-6)',
284
- background: 'var(--sv-color-surface)',
285
- minHeight: '100vh',
286
- fontFamily: ff,
287
- maxWidth: 760,
288
- margin: '0 auto',
289
- }}
290
- >
291
- <div style={{ marginBottom: 'var(--sv-space-8)' }}>
292
- <Heading level={1}>Header</Heading>
293
- <Body>
294
- The web top-bar header for <code>shell: minimal</code> plugins — a plugin that owns its
295
- whole viewport (no platform sidebar) renders this instead, so it doesn't have to hand-roll
296
- its own top bar from scratch.
297
- </Body>
298
- </div>
299
-
300
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
301
- <SectionHeader
302
- title="Live demo"
303
- subtitle="Real, clickable components — not mockups. Resize the Storybook viewport below 768px to see MobileHeader render instead of a squeezed desktop bar."
304
- />
305
- <Frame>
306
- <ResponsiveHeaderDemo />
307
- </Frame>
308
- </section>
309
-
310
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
311
- <SectionHeader
312
- title="Anatomy"
313
- subtitle="Brand badge + optional active plugin on the left; launcher, notifications, and avatar menu on the right — always rendered, never optional."
314
- />
315
- <ul style={{ margin: 0, paddingLeft: '1.25rem', color: 'var(--sv-color-text-muted)' }}>
316
- <li>
317
- <strong style={{ color: 'var(--sv-color-text-primary)' }}>Brand badge</strong> — derives
318
- its initial from <code>instanceName</code>, links to <code>homeHref</code>.
319
- </li>
320
- <li>
321
- <strong style={{ color: 'var(--sv-color-text-primary)' }}>Active plugin</strong> (
322
- <code>plugin</code>, optional) — icon + name, links to <code>plugin.href</code>.
323
- </li>
324
- <li>
325
- <strong style={{ color: 'var(--sv-color-text-primary)' }}>launcher</strong> — the real{' '}
326
- <code>AppsLauncher</code>.
327
- </li>
328
- <li>
329
- <strong style={{ color: 'var(--sv-color-text-primary)' }}>notifications</strong> — the
330
- real <code>NotificationsPanel</code>.
331
- </li>
332
- <li>
333
- <strong style={{ color: 'var(--sv-color-text-primary)' }}>avatarMenu</strong> — the real{' '}
334
- <code>UserMenu</code> (<code>size=&quot;sm&quot;</code> in this context — see Sizing
335
- below).
336
- </li>
337
- </ul>
338
- <CodeBlock>{`<Header
339
- instanceName="Sovereign"
340
- homeHref="/launcher"
341
- plugin={{ name: 'Notes', icon: <PluginIcon />, href: '/notes' }}
342
- launcher={<AppsLauncher items={apps} />}
343
- notifications={<NotificationsPanel items={items} unreadCount={n} />}
344
- avatarMenu={<UserMenu name={user.name} email={user.email} items={menuItems} size="sm" />}
345
- />`}</CodeBlock>
346
- </section>
347
-
348
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
349
- <SectionHeader title="Boundary — presentational only" />
350
- <Body>
351
- <code>Header</code> owns layout only — never launcher/notification/account interaction
352
- logic, matching <code>MobileHeader</code>&apos;s own boundary (RFC 0088).{' '}
353
- <code>launcher</code>/<code>notifications</code>/<code>avatarMenu</code> are supplied
354
- fully built by the consumer. In practice that consumer is almost always the real{' '}
355
- <code>AppsLauncher</code>/<code>NotificationsPanel</code>/<code>UserMenu</code> — see
356
- their own Components pages — not a bespoke reimplementation.
357
- </Body>
358
- </section>
359
-
360
- <section style={{ marginBottom: 'var(--sv-space-6)' }}>
361
- <SectionHeader
362
- title="Sizing"
363
- subtitle="A compact top bar, deliberately smaller than the platform sidebar — this plugin owns its whole viewport, so it isn't bound to platform chrome dimensions."
364
- />
365
- <ul style={{ margin: 0, paddingLeft: '1.25rem', color: 'var(--sv-color-text-muted)' }}>
366
- <li>Bar height: 49px (48px content + 1px border).</li>
367
- <li>Brand badge / plugin icon: 28px.</li>
368
- <li>Launcher / notifications trigger buttons: 28px, with a 20–24px icon inside.</li>
369
- <li>
370
- Avatar: 32px here (<code>UserMenu size=&quot;sm&quot;</code>) — smaller than the
371
- platform sidebar&apos;s own 36px avatar (<code>UserMenu</code>&apos;s default), to suit
372
- this compact top bar&apos;s own proportions.
373
- </li>
374
- </ul>
375
- <Callout type="tip">
376
- Want to try different <code>instanceName</code>/<code>homeHref</code>/<code>plugin</code>{' '}
377
- values live? See the <strong>Playground</strong> story — its Controls panel is wired up
378
- for exactly that.
379
- </Callout>
380
- </section>
381
- </div>
382
- );
383
- }
384
-
385
- // ---------------------------------------------------------------------------
386
- // Story
387
- // ---------------------------------------------------------------------------
388
-
389
- const meta = {
390
- title: 'Components/Header',
391
- component: Header,
392
- parameters: {
393
- // fullscreen, not padded — this is a full-bleed top bar; Storybook's own
394
- // canvas gutter around a `padded` story reads as extra height in a
395
- // screenshot comparison against the real, edge-to-edge running app. The
396
- // Default doc page supplies its own centered/padded wrapper internally.
397
- layout: 'fullscreen',
398
- docs: {
399
- description: {
400
- component:
401
- 'The web top-bar header for shell: minimal plugins — the counterpart to the platform sidebar for a plugin that owns its whole viewport. Brand badge and optional active plugin on the left; launcher (AppsLauncher), notifications (NotificationsPanel), and avatar menu (UserMenu) on the right. Below 768px, plugins render MobileHeader instead.',
402
- },
403
- },
404
- },
405
- argTypes: {
406
- instanceName: { control: 'text' },
407
- homeHref: { control: 'text' },
408
- plugin: { control: 'object' },
409
- launcher: { control: false },
410
- notifications: { control: false },
411
- avatarMenu: { control: false },
412
- },
413
- args: {
414
- instanceName: 'Sovereign',
415
- homeHref: '/launcher',
416
- plugin: {
417
- name: 'Notes',
418
- icon: <HeaderPluginIcon name="file" />,
419
- href: '/notes',
420
- },
421
- launcher: <Launcher />,
422
- notifications: <Notifications />,
423
- avatarMenu: <Account />,
424
- },
425
- } satisfies Meta<typeof Header>;
426
-
427
- export default meta;
428
- type StoryDetail = StoryObj<typeof meta>;
429
-
430
- export const Story: StoryDetail = {
431
- parameters: {
432
- controls: { disable: true },
433
- },
434
- render: () => <HeaderDoc />,
435
- };
436
-
437
- /**
438
- * A plain, bare `Header` — use the Controls panel below to try different
439
- * `instanceName`/`homeHref`/`plugin` values live. `launcher`/`notifications`/
440
- * `avatarMenu` stay fixed to the real shared components (they're ReactNode
441
- * slots — not meaningfully editable as Controls). `plugin.icon` is omitted
442
- * here (unlike the live demo above) so the object control stays plain,
443
- * editable JSON rather than a React element it can't serialize.
444
- */
445
- export const Playground: StoryDetail = {
446
- args: {
447
- plugin: {
448
- name: 'Notes',
449
- href: '/notes',
450
- },
451
- },
452
- };
package/src/components/Header/Header.tsx DELETED
@@ -1,102 +0,0 @@
1
- import type { HTMLAttributes, ReactNode } from 'react';
2
- import styles from './Header.module.css';
3
-
4
- export interface HeaderPlugin {
5
- /** Plugin display name, rendered next to its icon. */
6
- name: string;
7
- /** Plugin icon — already sized (28px) and built by the consumer (typically
8
- * an `<img src="/plugin-icons/<id>.svg">`), matching `MobileHeader`'s own
9
- * router-agnostic convention for icon-shaped slots. */
10
- icon?: ReactNode;
11
- /** Where the plugin name/icon links to — typically the plugin's own
12
- * `routePrefix`. Omit to render plain (non-interactive) text instead of a
13
- * link — e.g. a plugin's own home page linking to itself would be a no-op. */
14
- href?: string;
15
- }
16
-
17
- export interface HeaderProps extends HTMLAttributes<HTMLElement> {
18
- /** Instance name — derives the brand badge's initial (its first character,
19
- * uppercased) and the badge's accessible label. Does not render as text
20
- * anywhere in this component (unlike `MobileHeader`'s optional `title`). */
21
- instanceName: string;
22
- /** Optional instance logo image; falls back to `instanceName`'s initial
23
- * (matching the runtime shell's own sidebar/mobile-header fallback). */
24
- instanceLogoUrl?: string;
25
- /** Where the brand badge links — typically the Launcher plugin's route. */
26
- homeHref: string;
27
- /** The active plugin, rendered next to the brand badge. Omit for a page
28
- * with no single active plugin (e.g. the Launcher itself). */
29
- plugin?: HeaderPlugin;
30
- /** Apps launcher trigger — already wired by the consumer (icon button plus
31
- * whatever popover/drawer it opens). Always rendered, matching
32
- * `MobileHeader`'s bell/avatarMenu boundary: this component owns layout
33
- * only, never launcher/notification/account interaction logic. */
34
- launcher: ReactNode;
35
- /** Notification bell trigger — always rendered; not overridable. Same
36
- * "just an icon slot" boundary as `MobileHeader`'s own `bell` prop. */
37
- notifications: ReactNode;
38
- /** Avatar / account menu trigger — always rendered; not overridable. */
39
- avatarMenu: ReactNode;
40
- }
41
-
42
- /**
43
- * The web top-bar header: brand badge (+ optional active plugin) on the
44
- * left, launcher · notifications · avatar menu on the right. This is the
45
- * `shell: minimal` counterpart to the runtime shell's own sidebar — a plugin
46
- * that owns its whole viewport (no platform sidebar) renders this instead,
47
- * the same way it renders `MobileHeader` in place of the platform's mobile
48
- * chrome. Extracted into a shared component so a `shell: minimal` plugin
49
- * doesn't have to hand-roll its own top bar from scratch.
50
- *
51
- * Presentational only — no data fetching, no account/notification/launcher
52
- * logic of its own. `launcher`/`notifications`/`avatarMenu` are supplied
53
- * fully built, exactly like `MobileHeader`'s `bell`/`avatarMenu`: this
54
- * component stays router-agnostic and interaction-agnostic, and never
55
- * duplicates a real `AccountMenu`/notification-panel/apps-switcher
56
- * implementation.
57
- */
58
- export function Header({
59
- instanceName,
60
- instanceLogoUrl,
61
- homeHref,
62
- plugin,
63
- launcher,
64
- notifications,
65
- avatarMenu,
66
- className,
67
- ...rest
68
- }: HeaderProps) {
69
- const brandInitial = instanceName.charAt(0).toUpperCase() || 'S';
70
- const cls = [styles.header, className].filter(Boolean).join(' ');
71
-
72
- return (
73
- <header className={cls} {...rest}>
74
- <div className={styles.left}>
75
- <a href={homeHref} className={styles.brandBadge} aria-label={`${instanceName} home`}>
76
- {instanceLogoUrl ? (
77
- <img src={instanceLogoUrl} alt="" className={styles.brandLogoImg} />
78
- ) : (
79
- brandInitial
80
- )}
81
- </a>
82
- {plugin &&
83
- (plugin.href ? (
84
- <a href={plugin.href} className={styles.plugin}>
85
- {plugin.icon}
86
- <span className={styles.pluginName}>{plugin.name}</span>
87
- </a>
88
- ) : (
89
- <span className={styles.plugin}>
90
- {plugin.icon}
91
- <span className={styles.pluginName}>{plugin.name}</span>
92
- </span>
93
- ))}
94
- </div>
95
- <div className={styles.right}>
96
- {launcher}
97
- {notifications}
98
- {avatarMenu}
99
- </div>
100
- </header>
101
- );
102
- }
package/src/components/Header/__tests__/Header.test.tsx DELETED
@@ -1,104 +0,0 @@
1
- // @vitest-environment jsdom
2
- import { afterEach, describe, expect, it } from 'vitest';
3
- import { cleanup, render, screen } from '@testing-library/react';
4
- import { Header } from '../Header';
5
-
6
- afterEach(() => {
7
- cleanup();
8
- });
9
-
10
- describe('Header', () => {
11
- it('always renders the brand badge, launcher, notifications, and avatar menu slots', () => {
12
- render(
13
- <Header
14
- instanceName="Sovereign"
15
- homeHref="/launcher"
16
- launcher={<span data-testid="launcher">launcher</span>}
17
- notifications={<span data-testid="bell">bell</span>}
18
- avatarMenu={<span data-testid="avatar">avatar</span>}
19
- />,
20
- );
21
-
22
- expect(screen.getByText('S')).toBeDefined();
23
- expect(screen.getByTestId('launcher')).toBeDefined();
24
- expect(screen.getByTestId('bell')).toBeDefined();
25
- expect(screen.getByTestId('avatar')).toBeDefined();
26
- });
27
-
28
- it('derives the brand badge initial from instanceName, uppercased', () => {
29
- render(
30
- <Header
31
- instanceName="acme"
32
- homeHref="/launcher"
33
- launcher={<span />}
34
- notifications={<span />}
35
- avatarMenu={<span />}
36
- />,
37
- );
38
-
39
- expect(screen.getByText('A')).toBeDefined();
40
- });
41
-
42
- it('links the brand badge to homeHref', () => {
43
- render(
44
- <Header
45
- instanceName="Sovereign"
46
- homeHref="/launcher"
47
- launcher={<span />}
48
- notifications={<span />}
49
- avatarMenu={<span />}
50
- />,
51
- );
52
-
53
- expect(screen.getByRole('link', { name: 'Sovereign home' })).toHaveProperty(
54
- 'href',
55
- expect.stringContaining('/launcher'),
56
- );
57
- });
58
-
59
- it('renders no plugin by default', () => {
60
- render(
61
- <Header
62
- instanceName="Sovereign"
63
- homeHref="/launcher"
64
- launcher={<span />}
65
- notifications={<span />}
66
- avatarMenu={<span />}
67
- />,
68
- );
69
-
70
- expect(screen.queryByText('Notes')).toBeNull();
71
- });
72
-
73
- it('renders the active plugin as a link when href is provided', () => {
74
- render(
75
- <Header
76
- instanceName="Sovereign"
77
- homeHref="/launcher"
78
- plugin={{ name: 'Notes', icon: <span>icon</span>, href: '/notes' }}
79
- launcher={<span />}
80
- notifications={<span />}
81
- avatarMenu={<span />}
82
- />,
83
- );
84
-
85
- const link = screen.getByRole('link', { name: /Notes/ });
86
- expect(link).toHaveProperty('href', expect.stringContaining('/notes'));
87
- });
88
-
89
- it('renders the active plugin as plain text when href is omitted', () => {
90
- render(
91
- <Header
92
- instanceName="Sovereign"
93
- homeHref="/launcher"
94
- plugin={{ name: 'Notes' }}
95
- launcher={<span />}
96
- notifications={<span />}
97
- avatarMenu={<span />}
98
- />,
99
- );
100
-
101
- expect(screen.getByText('Notes')).toBeDefined();
102
- expect(screen.queryByRole('link', { name: /Notes/ })).toBeNull();
103
- });
104
- });
package/src/components/HeaderFooterLayout/HeaderFooterLayout.module.css DELETED
@@ -1,21 +0,0 @@
1
- .shell {
2
- display: flex;
3
- flex-direction: column;
4
- height: 100%;
5
- }
6
-
7
- .header {
8
- flex-shrink: 0;
9
- overflow: hidden;
10
- }
11
-
12
- .main {
13
- flex: 1;
14
- min-height: 0;
15
- overflow-y: auto;
16
- }
17
-
18
- .footer {
19
- flex-shrink: 0;
20
- overflow: hidden;
21
- }