feat: modal

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
  @apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+	}
 }
 
 @theme {

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -1,36 +1,84 @@
 <script module>
-export {DrawerContent};
+export {DrawerContent};
 </script>
 
 {#snippet DrawerContent()}
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
- Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
- Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
- Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
- Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
- Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
- Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
- Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
- Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
- Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
- Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
- Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
- Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
- Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
- Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
- Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
- Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
- Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
- Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
- Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
- Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
- Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
- Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
- Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
- Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
- Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
- Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
- Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
- Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
- Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
-{/snippet}
+	<p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam
+ expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea
+ exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni
+ reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea
+ excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque
+ repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore
+ veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus
+ eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus
+ unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat
+ quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem
+ ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem,
+ expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus
+ similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid
+ nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque
+ perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni
+ consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit
+ accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium
+ necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur,
+ reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi
+ sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam
+ deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo
+ expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse
+ molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi
+ recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora
+ alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat
+ provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam
+ inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus
+ recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore.
+ Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam!
+ Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis
+ nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed
+ illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse.
+ Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla
+ culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur
+ nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni
+ ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo,
+ dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam
+ possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum
+ laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui
+ minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id
+ ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui
+ numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil
+ natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit
+ adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit,
+ libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi
+ mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt
+ temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+ Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id
+ cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis
+ placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas
+ dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi
+ fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+ Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia?
+ Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos
+ nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet
+ dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero
+ cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error.
+ Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque
+ repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non
+ blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum
+ eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis
+ perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam
+ voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae,
+ quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore
+ praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit
+ blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos
+ excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit,
+ dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi
+ incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam
+ facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias
+ harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis
+ laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam
+ dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum
+ nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui
+ perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore!
+ Explicabo quaerat doloremque labore harum vitae!
+	</p>
+{/snippet}

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-children: DrawerContent
-}
+children: DrawerContent
+}
 };

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-import type { SwipeCustomEvent } from 'svelte-gestures';
+import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
  isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
- drawer?.destroy({ animate: true });
- isPaneOpen = false;
-	};
+	function dismiss() {
+ if (drawer) drawer.destroy({ animate: true });
+	}
 
-const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-if (event.detail.direction === 'down' as string) {
-handleSwipe?.(false);
-drawer?.destroy({ animate: true });
-isPaneOpen = false;
-}
-};
+const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+if (event.detail.direction === ('down' as string)) {
+handleSwipe?.(false);
+drawer?.destroy({ animate: true });
+isPaneOpen = false;
+}
+};
 
 	onMount(() => {
  if (!drawerElement) return;
@@ -47,7 +46,10 @@
  bottomClose: true,
  buttonDestroy: false,
  cssClass: '',
- initialBreak: 'middle'
+ initialBreak: 'middle',
+ events: {
+ onBackdropTap: () => dismiss()
+ }
  });
  if (isPaneOpen) {
  drawer.present({ animate: true });
@@ -67,8 +69,20 @@
  minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+ border-top-left-radius: 32px !important;
+ border-top-right-radius: 32px !important;
+ padding: 20px !important;
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+ ::-webkit-scrollbar {
+ display: none !important;
+ }
+	}
+</style>

platforms/metagram/src/lib/fragments/Header/Header.stories.ts

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
- title: "Fragments/Header",
- component: Header,
- tags: ["autodocs"],
- render: (args: {
- Component: Header;
- props: ComponentProps<typeof Header>;
- }) => ({
- Component: Header,
- props: args,
- }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+ Component: Header,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-variant: "primary",
-heading: "metagram",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'primary',
+heading: 'metagram',
+callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-args: {
-variant: "primary",
-heading: "messages",
- },
+args: {
+variant: 'primary',
+heading: 'messages'
+	}
 };
 
 export const Secondary = {
-args: {
-variant: "secondary",
-heading: "Account",
- },
+args: {
+variant: 'secondary',
+heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-args: {
-variant: "secondary",
-heading: "Account",
-callback: () => alert("menu clicked"),
- },
+args: {
+variant: 'secondary',
+heading: 'Account',
+callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-args: {
-variant: "tertiary",
-callback: () => alert("clicked"),
- },
+args: {
+variant: 'tertiary',
+callback: () => alert('clicked')
+	}
 };

platforms/metagram/src/lib/fragments/Message/Message.stories.ts

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
- title: "UI/Message",
- component: Message,
- tags: ["autodocs"],
- render: (args: {
- Component: Message;
- props: ComponentProps<typeof Message>;
- }) => ({
- Component: Message,
- props: args,
- }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+ Component: Message,
+ props: args
+	})
 };
 
 export const Primary = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: false,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: false,
+callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-args: {
-avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-username: "donaldthefirstt",
-text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-unread: true,
-callback: () => alert("Message clicked"),
- },
+args: {
+avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+username: 'donaldthefirstt',
+text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+unread: true,
+callback: () => alert('Message clicked')
+	}
 };