Add new claymorphic component library

src/app/components/ChatMessage.svelte

@@ -5,10 +5,10 @@
   import {thunks, mergeThunks, pubkey, deriveProfileDisplay, sendWrapped} from "@welshman/app"
   import {isMobile} from "@lib/html"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Tippy from "@lib/components/Tippy.svelte"
-  import TapTarget from "@lib/components/TapTarget.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import Button from "@lib/components2/Button.svelte"
+  import Tippy from "@lib/components2/Tippy.svelte"
+  import TapTarget from "@lib/components2/TapTarget.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import Content from "@app/components/Content.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
@@ -71,10 +71,8 @@
 {/if}
 <div
   data-event={event.id}
-  class="group chat flex items-center justify-end gap-1 px-2"
-  class:chat-start={!isOwn}
-  class:flex-row-reverse={!isOwn}
-  class:chat-end={isOwn}>
+  class="group flex items-center justify-end gap-1 px-2"
+  class:flex-row-reverse={!isOwn}>
   {#if !isMobile}
     <Tippy
       bind:popover
@@ -101,16 +99,13 @@
   {/if}
   <div class="flex min-w-0 flex-col" class:items-end={isOwn}>
     <TapTarget
-      class="bg-alt chat-bubble mx-1 mb-2 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl min-w-[100px]"
+      class="cl-surface-alt mx-1 mb-2 flex min-w-[100px] cursor-auto flex-col gap-1 rounded-2xl px-4 py-3 text-left lg:max-w-2xl"
       onTap={showMobileMenu}>
       {#if showPubkey}
         <div class="flex items-center gap-2">
           {#if !isOwn}
             <Button onclick={openProfile} class="flex items-center gap-1">
-              <ProfileCircle
-                pubkey={event.pubkey}
-                class="border border-solid border-base-content"
-                size={4} />
+              <ProfileCircle pubkey={event.pubkey} class="cl-border" size={4} />
               <div class="flex items-center gap-2">
                 <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
                   {$profileDisplay}
@@ -118,7 +113,7 @@
               </div>
             </Button>
           {/if}
-          <span class="whitespace-nowrap text-xs opacity-50"
+          <span class="cl-text-subtle whitespace-nowrap text-xs"
             >{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
@@ -126,7 +121,7 @@
         <Content showEntire {event} />
       </div>
     </TapTarget>
-    <div class="row-2 z-feature -mt-4 ml-4">
+    <div class="z-feature -mt-4 ml-4 flex items-center gap-2">
       <ReactionSummary {event} {deleteReaction} {createReaction} noTooltip />
     </div>
   </div>