@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/stories/LayoutSystem.stories.tsx DELETED
@@ -1,639 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import { AppsLauncher } from '../components/AppsLauncher/AppsLauncher';
3
- import { Header } from '../components/Header/Header';
4
- import { Icon } from '../components/Icon/Icon';
5
- import { MobileFooter } from '../components/MobileFooter/MobileFooter';
6
- import { MobileHeader } from '../components/MobileHeader/MobileHeader';
7
- import { NotificationsPanel } from '../components/NotificationsPanel/NotificationsPanel';
8
- import { OverlayHeader } from '../components/OverlayHeader/OverlayHeader';
9
- import { PageHeader } from '../components/PageHeader/PageHeader';
10
- import { PageLayout } from '../components/PageLayout/PageLayout';
11
- import { RootLayout } from '../components/RootLayout/RootLayout';
12
- import { UserMenu } from '../components/UserMenu/UserMenu';
13
-
14
- // ---------------------------------------------------------------------------
15
- // Shared primitives (mirrors the conventions in Overview/Mobile Patterns)
16
- // ---------------------------------------------------------------------------
17
-
18
- const ff = 'var(--sv-font-family)';
19
-
20
- function Heading({ level = 2, children }: { level?: 1 | 2 | 3; children: React.ReactNode }) {
21
- const sizes: Record<number, string> = { 1: '1.75rem', 2: '1.125rem', 3: '0.9375rem' };
22
- const weights: Record<number, number> = { 1: 700, 2: 600, 3: 600 };
23
- const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
24
- return (
25
- <Tag
26
- style={{
27
- fontFamily: ff,
28
- fontSize: sizes[level],
29
- fontWeight: weights[level],
30
- color: 'var(--sv-color-text-primary)',
31
- margin: 0,
32
- lineHeight: 1.3,
33
- }}
34
- >
35
- {children}
36
- </Tag>
37
- );
38
- }
39
-
40
- function Body({ children }: { children: React.ReactNode }) {
41
- return (
42
- <p
43
- style={{
44
- fontFamily: ff,
45
- fontSize: 'var(--sv-font-size-sm)',
46
- color: 'var(--sv-color-text-muted)',
47
- margin: '0.5rem 0 0',
48
- lineHeight: 1.6,
49
- }}
50
- >
51
- {children}
52
- </p>
53
- );
54
- }
55
-
56
- function SectionHeader({
57
- title,
58
- subtitle,
59
- source,
60
- }: {
61
- title: string;
62
- subtitle?: string;
63
- source: string;
64
- }) {
65
- return (
66
- <div
67
- style={{
68
- paddingBottom: 'var(--sv-space-3)',
69
- borderBottom: '2px solid var(--sv-color-accent)',
70
- marginBottom: 'var(--sv-space-5)',
71
- }}
72
- >
73
- <Heading level={2}>{title}</Heading>
74
- {subtitle && <Body>{subtitle}</Body>}
75
- <p
76
- style={{
77
- fontFamily: 'var(--sv-font-family-mono)',
78
- fontSize: '0.75rem',
79
- color: 'var(--sv-color-text-muted)',
80
- margin: '0.5rem 0 0',
81
- }}
82
- >
83
- {source}
84
- </p>
85
- </div>
86
- );
87
- }
88
-
89
- function Callout({ type, children }: { type: 'warn' | 'tip'; children: React.ReactNode }) {
90
- const map = {
91
- warn: {
92
- bg: 'var(--sv-color-warning-surface)',
93
- border: 'var(--sv-color-warning-border)',
94
- text: 'var(--sv-color-warning-text)',
95
- label: '⚠',
96
- },
97
- tip: {
98
- bg: 'var(--sv-color-success-surface)',
99
- border: 'var(--sv-color-success-border)',
100
- text: 'var(--sv-color-success-text)',
101
- label: '✓',
102
- },
103
- };
104
- const c = map[type];
105
- return (
106
- <div
107
- style={{
108
- background: c.bg,
109
- border: `1px solid ${c.border}`,
110
- borderRadius: 'var(--sv-radius-md)',
111
- padding: 'var(--sv-space-3) var(--sv-space-4)',
112
- display: 'flex',
113
- gap: 'var(--sv-space-2)',
114
- alignItems: 'flex-start',
115
- marginTop: 'var(--sv-space-4)',
116
- }}
117
- >
118
- <span style={{ color: c.text, fontWeight: 700, flexShrink: 0, fontSize: '0.875rem' }}>
119
- {c.label}
120
- </span>
121
- <p
122
- style={{
123
- fontFamily: ff,
124
- fontSize: 'var(--sv-font-size-sm)',
125
- color: c.text,
126
- margin: 0,
127
- lineHeight: 1.55,
128
- }}
129
- >
130
- {children}
131
- </p>
132
- </div>
133
- );
134
- }
135
-
136
- function Frame({ children }: { children: React.ReactNode }) {
137
- return (
138
- <div
139
- style={{
140
- border: '1px solid var(--sv-color-border)',
141
- borderRadius: 'var(--sv-radius-lg)',
142
- overflow: 'hidden',
143
- fontFamily: ff,
144
- fontSize: 'var(--sv-font-size-sm)',
145
- }}
146
- >
147
- {children}
148
- </div>
149
- );
150
- }
151
-
152
- function ContentPlaceholder({ label = 'Plugin content area' }: { label?: string }) {
153
- return (
154
- <div
155
- style={{
156
- background: 'var(--sv-color-surface-sunken)',
157
- padding: 'var(--sv-space-6) var(--sv-space-4)',
158
- textAlign: 'center',
159
- color: 'var(--sv-color-text-muted)',
160
- fontSize: 'var(--sv-font-size-xs)',
161
- }}
162
- >
163
- {label}
164
- </div>
165
- );
166
- }
167
-
168
- function IconButton({ name, label }: { name: Parameters<typeof Icon>[0]['name']; label: string }) {
169
- return (
170
- <span
171
- aria-label={label}
172
- style={{
173
- display: 'inline-flex',
174
- alignItems: 'center',
175
- justifyContent: 'center',
176
- width: 32,
177
- height: 32,
178
- borderRadius: 'var(--sv-radius-md)',
179
- color: 'var(--sv-color-text-muted)',
180
- }}
181
- >
182
- <Icon name={name} size="md" aria-hidden />
183
- </span>
184
- );
185
- }
186
-
187
- function Avatar({ initials, size = 32 }: { initials: string; size?: number }) {
188
- return (
189
- <span
190
- aria-label={initials}
191
- style={{
192
- display: 'inline-flex',
193
- alignItems: 'center',
194
- justifyContent: 'center',
195
- width: size,
196
- height: size,
197
- borderRadius: 'var(--sv-radius-full)',
198
- background: 'var(--sv-color-accent)',
199
- color: 'var(--sv-color-text-on-accent)',
200
- fontSize: 'var(--sv-font-size-xs)',
201
- fontWeight: 'var(--sv-font-weight-semibold)',
202
- flexShrink: 0,
203
- }}
204
- >
205
- {initials}
206
- </span>
207
- );
208
- }
209
-
210
- function BrandBadge({ size = 36 }: { size?: number }) {
211
- return (
212
- <span
213
- aria-hidden="true"
214
- style={{
215
- display: 'inline-flex',
216
- alignItems: 'center',
217
- justifyContent: 'center',
218
- width: size,
219
- height: size,
220
- borderRadius: 'var(--sv-radius-md)',
221
- background: 'var(--sv-color-accent)',
222
- color: 'var(--sv-color-text-on-accent)',
223
- fontWeight: 700,
224
- fontSize: size * 0.4,
225
- flexShrink: 0,
226
- }}
227
- >
228
- S
229
- </span>
230
- );
231
- }
232
-
233
- // ---------------------------------------------------------------------------
234
- // 1. Web with Sidebar
235
- // ---------------------------------------------------------------------------
236
-
237
- function WebWithSidebar() {
238
- return (
239
- <Frame>
240
- <div style={{ display: 'flex', minHeight: 240 }}>
241
- <div
242
- style={{
243
- width: 64,
244
- flexShrink: 0,
245
- background: 'var(--sv-color-surface)',
246
- borderRight: '1px solid var(--sv-color-border)',
247
- display: 'flex',
248
- flexDirection: 'column',
249
- alignItems: 'center',
250
- gap: 'var(--sv-space-3)',
251
- padding: 'var(--sv-space-3) 0',
252
- }}
253
- >
254
- <BrandBadge />
255
- <hr
256
- style={{
257
- width: 32,
258
- border: 'none',
259
- borderTop: '1px solid var(--sv-color-border)',
260
- margin: 0,
261
- }}
262
- />
263
- <IconButton name="file" label="Notes" />
264
- <IconButton name="house" label="Launcher" />
265
- <div style={{ flex: 1 }} />
266
- <IconButton name="bell" label="Notifications" />
267
- <IconButton name="layout-dashboard" label="Console" />
268
- <Avatar initials="KB" size={32} />
269
- </div>
270
- <div style={{ flex: 1 }}>
271
- <ContentPlaceholder />
272
- </div>
273
- </div>
274
- </Frame>
275
- );
276
- }
277
-
278
- // ---------------------------------------------------------------------------
279
- // 2. Web with Header
280
- // ---------------------------------------------------------------------------
281
-
282
- const layoutSystemLauncherItems = [
283
- {
284
- key: 'home',
285
- icon: <Icon name="house" size="md" aria-hidden />,
286
- label: 'Home',
287
- href: '/launcher',
288
- },
289
- {
290
- key: 'notes',
291
- icon: <Icon name="file" size="md" aria-hidden />,
292
- label: 'Notes',
293
- href: '/notes',
294
- },
295
- ];
296
-
297
- const layoutSystemAccountItems = [
298
- { label: 'Account', icon: 'user' as const, href: '/account' },
299
- { label: 'Sign out', icon: 'log-out' as const, destructive: true, onSelect: () => {} },
300
- ];
301
-
302
- function WebWithHeader() {
303
- return (
304
- <Frame>
305
- <Header
306
- instanceName="Sovereign"
307
- homeHref="/launcher"
308
- plugin={{
309
- name: 'Notes',
310
- // The plugin icon is 28px — same size as the brand badge next to
311
- // it, not a smaller inline glyph.
312
- icon: (
313
- <span
314
- aria-hidden="true"
315
- style={{
316
- display: 'inline-flex',
317
- alignItems: 'center',
318
- justifyContent: 'center',
319
- width: 28,
320
- height: 28,
321
- }}
322
- >
323
- <span style={{ display: 'inline-flex', transform: 'scale(1.15)' }}>
324
- <Icon name="file" size="lg" aria-hidden />
325
- </span>
326
- </span>
327
- ),
328
- href: '/notes',
329
- }}
330
- launcher={<AppsLauncher items={layoutSystemLauncherItems} />}
331
- notifications={<NotificationsPanel items={[]} unreadCount={0} />}
332
- avatarMenu={<UserMenu name="Kasun Benthara" items={layoutSystemAccountItems} size="sm" />}
333
- />
334
- <ContentPlaceholder />
335
- </Frame>
336
- );
337
- }
338
-
339
- // ---------------------------------------------------------------------------
340
- // 3. Mobile Header and Footer
341
- // ---------------------------------------------------------------------------
342
-
343
- function MobileHeaderAndFooter() {
344
- return (
345
- <Frame>
346
- <MobileHeader
347
- title="Tasks"
348
- bell={<IconButton name="bell" label="Notifications" />}
349
- avatarMenu={<Avatar initials="JD" size={36} />}
350
- />
351
- <ContentPlaceholder />
352
- <MobileFooter
353
- onOpenApps={() => {}}
354
- launcherOpen={false}
355
- leftIcons={[
356
- { icon: <Icon name="house" size="md" aria-hidden />, label: 'Home', active: true },
357
- ]}
358
- rightIcons={[{ icon: <Icon name="search" size="md" aria-hidden />, label: 'Search' }]}
359
- />
360
- </Frame>
361
- );
362
- }
363
-
364
- // ---------------------------------------------------------------------------
365
- // 4. Mobile Header, Secondary Header (Page Header)
366
- // ---------------------------------------------------------------------------
367
-
368
- function MobileSecondaryPageHeader() {
369
- return (
370
- <Frame>
371
- <MobileHeader
372
- title="Sovereign"
373
- bell={<IconButton name="bell" label="Notifications" />}
374
- avatarMenu={<Avatar initials="KB" size={36} />}
375
- />
376
- <div
377
- style={{
378
- display: 'flex',
379
- alignItems: 'center',
380
- gap: 'var(--sv-space-2)',
381
- padding: 'var(--sv-space-2) var(--sv-space-3)',
382
- background: 'var(--sv-color-surface)',
383
- borderBottom: '1px solid var(--sv-color-border)',
384
- }}
385
- >
386
- <IconButton name="circle-chevron-left" label="Back to boards" />
387
- <span
388
- style={{
389
- flex: 1,
390
- fontWeight: 600,
391
- fontSize: 'var(--sv-font-size-md)',
392
- color: 'var(--sv-color-text-primary)',
393
- }}
394
- >
395
- Infra Migration
396
- </span>
397
- <IconButton name="ellipsis-vertical" label="Board options" />
398
- </div>
399
- <ContentPlaceholder label="Board content (lists/cards)" />
400
- </Frame>
401
- );
402
- }
403
-
404
- // ---------------------------------------------------------------------------
405
- // 5. Mobile Header, Secondary Header (Dialog Header)
406
- // ---------------------------------------------------------------------------
407
-
408
- function MobileSecondaryDialogHeader() {
409
- return (
410
- <Frame>
411
- <MobileHeader
412
- bell={<IconButton name="bell" label="Notifications" />}
413
- avatarMenu={<Avatar initials="KB" size={36} />}
414
- />
415
- <OverlayHeader
416
- title="Console"
417
- onClose={() => {}}
418
- secondRow={
419
- <nav aria-label="Console sections" style={{ display: 'flex', gap: 'var(--sv-space-4)' }}>
420
- {['Overview', 'Users', 'Settings'].map((label, i) => (
421
- <span
422
- key={label}
423
- style={{
424
- fontSize: 'var(--sv-font-size-sm)',
425
- fontWeight: i === 0 ? 600 : 400,
426
- color: i === 0 ? 'var(--sv-color-text-primary)' : 'var(--sv-color-text-muted)',
427
- paddingBottom: 'var(--sv-space-2)',
428
- borderBottom: i === 0 ? '2px solid var(--sv-color-accent)' : 'none',
429
- }}
430
- >
431
- {label}
432
- </span>
433
- ))}
434
- </nav>
435
- }
436
- />
437
- <ContentPlaceholder label="Console page content" />
438
- </Frame>
439
- );
440
- }
441
-
442
- // ---------------------------------------------------------------------------
443
- // 6. Structural Layout Primitives
444
- // ---------------------------------------------------------------------------
445
-
446
- function StructuralLayoutPrimitives() {
447
- return (
448
- <Frame>
449
- <div style={{ height: 320 }}>
450
- <RootLayout variant="sidebar">
451
- <div
452
- style={{
453
- width: '100%',
454
- height: '100%',
455
- background: 'var(--sv-color-surface)',
456
- borderRight: '1px solid var(--sv-color-border)',
457
- display: 'flex',
458
- flexDirection: 'column',
459
- alignItems: 'center',
460
- gap: 'var(--sv-space-3)',
461
- padding: 'var(--sv-space-3) 0',
462
- }}
463
- >
464
- <BrandBadge />
465
- <IconButton name="house" label="Home" />
466
- <IconButton name="layers" label="Boards" />
467
- </div>
468
- <PageLayout
469
- padding="md"
470
- header={
471
- <PageHeader
472
- title="Boards"
473
- description="Everything you're tracking."
474
- action={<IconButton name="search" label="Search" />}
475
- />
476
- }
477
- >
478
- <ContentPlaceholder label="Page content" />
479
- </PageLayout>
480
- </RootLayout>
481
- </div>
482
- </Frame>
483
- );
484
- }
485
-
486
- // ---------------------------------------------------------------------------
487
- // Main story component
488
- // ---------------------------------------------------------------------------
489
-
490
- function LayoutSystemDoc() {
491
- return (
492
- <div
493
- style={{
494
- padding: 'var(--sv-space-6)',
495
- background: 'var(--sv-color-surface)',
496
- minHeight: '100vh',
497
- fontFamily: ff,
498
- maxWidth: 760,
499
- }}
500
- >
501
- <div style={{ marginBottom: 'var(--sv-space-8)' }}>
502
- <Heading level={1}>Layout System</Heading>
503
- <Body>
504
- The shell-chrome archetypes in use across the platform and its plugins today. Sections 1–5
505
- each show the actual anatomy shipping in the code, cite their source, and flag where the
506
- pattern is a shared design-system component versus a per-plugin reimplementation still
507
- waiting to be extracted. Section 6 introduces a newer, general-purpose layer built on top
508
- of that: structural layout primitives any plugin can compose directly, rather than
509
- reimplementing shell chrome from scratch.
510
- </Body>
511
- </div>
512
-
513
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
514
- <SectionHeader
515
- title="1. Web with Sidebar"
516
- subtitle="The default desktop shell — a fixed vertical icon rail. shell: default (most plugins)."
517
- source="runtime/app/(platform)/layout.tsx"
518
- />
519
- <WebWithSidebar />
520
- <Callout type="warn">
521
- Hand-rolled directly in the runtime shell — never extracted into <code>packages/ui</code>,
522
- unlike <code>MobileHeader</code>/<code>MobileFooter</code> (RFC 0088). A general-purpose
523
- version of this exact shape now exists as <code>RootLayout</code>'s{' '}
524
- <code>variant=&quot;sidebar&quot;</code> (see Section 6 and{' '}
525
- <code>Components/RootLayout</code>) — the runtime shell itself hasn't been migrated onto
526
- it yet, so this section still documents its own hand-rolled markup as the source of truth
527
- for what's actually shipping.
528
- </Callout>
529
- </section>
530
-
531
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
532
- <SectionHeader
533
- title="2. Web with Header"
534
- subtitle="A full-width top bar in place of the sidebar. shell: minimal plugins that own their whole viewport."
535
- source="@sovereignfs/ui — Header, generalized from a real shell: minimal plugin's own hand-rolled top bar"
536
- />
537
- <WebWithHeader />
538
- <Callout type="tip">
539
- The chrome/layout, the apps switcher, notifications, and the account dropdown are all now
540
- shared design-system components (<code>Header</code>, <code>AppsLauncher</code>,{' '}
541
- <code>NotificationsPanel</code>, <code>UserMenu</code>) — generalized from a real{' '}
542
- <code>shell: minimal</code> plugin's own hand-rolled top bar, apps switcher, notification
543
- bell, and account menu. A future <code>shell: minimal</code> plugin no longer has to
544
- rebuild any of this from scratch.
545
- </Callout>
546
- </section>
547
-
548
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
549
- <SectionHeader
550
- title="3. Mobile Header and Footer"
551
- subtitle="Brand/title + bell + avatar on top; a single Apps launcher button on the bottom."
552
- source="@sovereignfs/ui — MobileHeader, MobileFooter (RFC 0088)"
553
- />
554
- <MobileHeaderAndFooter />
555
- <Callout type="tip">
556
- Already a shared design-system component, consumed by both the platform shell and{' '}
557
- <code>shell: minimal</code> plugins. See the interactive prop playground in{' '}
558
- <code>Overview/Mobile Patterns</code>.
559
- </Callout>
560
- </section>
561
-
562
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
563
- <SectionHeader
564
- title="4. Mobile Header, Secondary Header (Page Header)"
565
- subtitle="A contextual second row — back + title + options — stacked directly under MobileHeader as ordinary page content."
566
- source="A real shell: minimal plugin's own bespoke board-detail header"
567
- />
568
- <MobileSecondaryPageHeader />
569
- <Callout type="tip">
570
- The API gap flagged here is now closed: <code>PageHeader</code>'s mobile fork (
571
- <code>onBack</code> + <code>onMenuClick</code>, see <code>Components/PageHeader</code>)
572
- was generalized directly from this plugin's own <code>MobileBoardHeader</code> and renders
573
- this exact back + title + ellipsis-vertical shape. The plugin itself hasn't been migrated
574
- onto it yet — its own hand-rolled version, shown above, is still what's actually shipping
575
- — but any new mobile secondary header no longer needs to reimplement this from scratch.
576
- </Callout>
577
- </section>
578
-
579
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
580
- <SectionHeader
581
- title="5. Mobile Header, Secondary Header (Dialog Header)"
582
- subtitle="The same contextual second row, but lifted into the enclosing overlay's own header when the plugin is soft-navigated as a Dialog."
583
- source="packages/ui — useOverlaySecondRow + Dialog's OverlayHeader; see plugins/console, plugins/account"
584
- />
585
- <MobileSecondaryDialogHeader />
586
- <Callout type="tip">
587
- Already a shared pattern — <code>useOverlaySecondRow</code> hands a plugin's own nav strip
588
- up into <code>Dialog</code>'s <code>OverlayHeader.secondRow</code> whenever the plugin is
589
- opened as an overlay, with no duplicated markup.
590
- </Callout>
591
- </section>
592
-
593
- <section style={{ marginBottom: 'var(--sv-space-10)' }}>
594
- <SectionHeader
595
- title="6. Structural Layout Primitives"
596
- subtitle="RootLayout + PageLayout + PageHeader composed together — the sidebar shape from Section 1, with a page-level header and content area nested inside."
597
- source="@sovereignfs/ui — RootLayout, ThreeColumnLayout, HeaderFooterLayout, PageLayout, PageHeader"
598
- />
599
- <StructuralLayoutPrimitives />
600
- <Callout type="tip">
601
- Unlike sections 1–5, these aren't documenting one specific plugin's shipped code — they're
602
- general-purpose primitives any plugin can adopt directly today. <code>RootLayout</code> is
603
- the root a plugin's page tree sits in (<code>variant</code>: plain, sidebar, header, or
604
- shell — each a fixed web+mobile pairing); <code>ThreeColumnLayout</code> and{' '}
605
- <code>HeaderFooterLayout</code> are the positional primitives it composes internally, also
606
- usable standalone for a list-app's own nested split view; <code>PageLayout</code> is a
607
- single page's content area nested inside <code>RootLayout</code>'s main slot, intended to
608
- eventually replace <code>PageContainer</code> entirely; <code>PageHeader</code> is that
609
- page's title section, with its own web/mobile fork (see the Section 1 and 4 callouts above
610
- for exactly which real shell-chrome gaps it closes). Each has its own interactive
611
- Storybook page under <code>Components/</code> with the full prop playground.
612
- </Callout>
613
- </section>
614
- </div>
615
- );
616
- }
617
-
618
- // ---------------------------------------------------------------------------
619
- // Story
620
- // ---------------------------------------------------------------------------
621
-
622
- const meta = {
623
- title: 'Overview/Layout System',
624
- component: LayoutSystemDoc,
625
- parameters: {
626
- layout: 'fullscreen',
627
- docs: {
628
- description: {
629
- component:
630
- 'Catalog of the shell-chrome layout archetypes in use across the platform and its plugins — which are shared design-system components and which are still per-plugin reimplementations.',
631
- },
632
- },
633
- },
634
- } satisfies Meta<typeof LayoutSystemDoc>;
635
-
636
- export default meta;
637
- type Story = StoryObj<typeof meta>;
638
-
639
- export const Default: Story = {};