AI pass on redesign

src/app.css

@@ -2,10 +2,15 @@
 
 @config "../tailwind.config.js";
 
+@theme {
+  --font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Baloo 2", "Lato", ui-rounded, system-ui, sans-serif;
+}
+
 /* root */
 
 :root {
-  font-family: Lato;
+  font-family: var(--font-sans);
   --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
   --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
@@ -153,15 +158,15 @@
 }
 
 @utility heading {
-  @apply text-center text-2xl;
+  @apply font-display text-center text-2xl font-bold tracking-tight;
 }
 
-@utility subheading {
+@utility brand {
-  @apply text-center text-xl;
+  @apply font-display text-primary font-bold tracking-tight;
 }
 
-@utility superheading {
+@utility label {
-  @apply text-center text-4xl;
+  @apply font-display text-sm font-semibold tracking-wider uppercase opacity-70;
 }
 
 @utility link {
@@ -215,8 +220,19 @@
 
   @font-face {
     font-family: "Lato";
-    font-style: bold;
+    font-style: normal;
-    font-weight: 600;
+    font-weight: 300;
+    src:
+      local(""),
+      url("/fonts/Lato-Light.ttf") format("truetype");
+  }
+
+  /* Lato ships Regular + Bold only; map 600 (semibold) and 700 (bold) to the
+     Bold file so the browser never synthesizes a faux-bold. */
+  @font-face {
+    font-family: "Lato";
+    font-style: normal;
+    font-weight: 600 700;
     src:
       local(""),
       url("/fonts/Lato-Bold.ttf") format("truetype");
@@ -228,13 +244,38 @@
     font-weight: 400;
     src:
       local(""),
-      url("/fonts/Italic.ttf") format("truetype");
+      url("/fonts/Lato-Italic.ttf") format("truetype");
+  }
+
+  /* Baloo 2 — rounded, friendly display face (self-hosted, Latin subset). */
+  @font-face {
+    font-family: "Baloo 2";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("/fonts/Baloo2-Medium.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Baloo 2";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("/fonts/Baloo2-SemiBold.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Baloo 2";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("/fonts/Baloo2-Bold.woff2") format("woff2");
   }
 
   /* root */
 
   :root {
-    font-family: Lato;
+    font-family: var(--font-sans);
     text-size-adjust: 100%;
     --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
     --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
@@ -284,7 +325,7 @@
   opacity: 0.5;
 }
 
-/* tiptap */
+/* editors */
 
 .input-editor,
 .chat-editor,
@@ -323,7 +364,11 @@
 }
 
 .chat-editor .tiptap {
-  @apply rounded-box bg-base-300 pr-12;
+  @apply bg-base-300 rounded-[1.5rem] pr-12 transition-shadow;
+}
+
+.chat-editor:focus-within .tiptap {
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary), transparent 55%);
 }
 
 .note-editor .tiptap {
@@ -448,3 +493,149 @@ body.keyboard-open .chat__compose {
 .chat__scroll-down {
   @apply pb-sai z-feature fixed right-4 bottom-28 md:bottom-16;
 }
+
+/* shape, depth & motion */
+
+/* Accessibility: neutralize all motion when the user asks for it. Decorative
+   motion is otherwise opt-in via `motion-safe:` and the guards below. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Soft, diffuse elevation — replaces ad-hoc hard `shadow-md` uses. */
+@utility shadow-soft {
+  box-shadow:
+    0 4px 16px -4px oklch(0% 0 0 / 0.18),
+    0 1px 3px oklch(0% 0 0 / 0.08);
+}
+
+/* Organic "hand-drawn" avatar masks. The image (or gradient fallback) fills
+   the blob; three variants are chosen deterministically by pubkey hash so a
+   person's shape stays stable across the app. */
+@utility avatar-blob {
+  border-radius: 42% 58% 54% 46% / 58% 46% 54% 42%;
+}
+@utility avatar-blob-2 {
+  border-radius: 60% 40% 46% 54% / 43% 57% 43% 57%;
+}
+@utility avatar-blob-3 {
+  border-radius: 47% 53% 62% 38% / 50% 62% 38% 50%;
+}
+
+/* Friendly rounded-square for space / relay / room tiles. */
+@utility squircle {
+  border-radius: 30%;
+}
+
+/* Every DaisyUI button speaks in the rounded display voice and presses in. */
+.btn {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .btn {
+    transition:
+      transform 150ms ease,
+      box-shadow 150ms ease,
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
+  .btn:active {
+    transform: scale(0.96);
+  }
+}
+
+/* ---- Motion vocabulary ---- */
+@keyframes nav-button-pop {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes button-pop {
+  0% {
+    transform: scale(0.97);
+  }
+  40% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes pop {
+  0% {
+    transform: scale(0);
+  }
+  70% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes reaction-pop {
+  0% {
+    transform: scale(0.6);
+  }
+  60% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-4deg);
+  }
+  75% {
+    transform: rotate(4deg);
+  }
+}
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@utility animate-pop {
+  animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@utility animate-reaction-pop {
+  animation: reaction-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@utility animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+@utility animate-wiggle {
+  animation: wiggle 0.4s ease-in-out;
+}

src/app/components/AppContainer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import {pubkey} from "@welshman/app"
-  import Dialog from "@lib/components2/Dialog.svelte"
+  import Dialog from "@lib/components/Dialog.svelte"
   import Landing from "@app/components/Landing.svelte"
   import Toast from "@app/components/Toast.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"

src/app/components/BunkerConnect.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import QRCode from "@app/components/QRCode.svelte"
   import type {Nip46Controller} from "@app/nip46"
 
@@ -20,7 +19,7 @@
   {:else}
     <div class="flex flex-col items-center gap-2">
       <QRCode code={$url} />
-      <Text size="sm" muted>Scan with your signer to log in, or click to copy.</Text>
+      <p class="text-sm opacity-75">Scan with your signer to log in, or click to copy.</p>
     </div>
   {/if}
 {/if}

src/app/components/BunkerUrl.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import {debounce} from "throttle-debounce"
-  import Scanner from "@lib/components2/Scanner.svelte"
+  import Scanner from "@lib/components/Scanner.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Field from "@lib/components2/Field.svelte"
+  import Field from "@lib/components/Field.svelte"
   import CpuBolt from "@assets/icons/cpu-bolt.svg?dataurl"
   import QrCode from "@assets/icons/qr-code.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import InfoBunker from "@app/components/InfoBunker.svelte"
   import type {Nip46Controller} from "@app/nip46"
   import {pushModal} from "@app/modal"
@@ -34,9 +34,9 @@
     <p>Bunker Link*</p>
   {/snippet}
   {#snippet input()}
-    <label class="input-cl input-cl-group">
+    <label class="input input-bordered flex w-full items-center gap-2">
       <Icon icon={CpuBolt} />
-      <input disabled={$loading} bind:value={$bunker} placeholder="bunker://" />
+      <input disabled={$loading} bind:value={$bunker} class="grow" placeholder="bunker://" />
       <Button onclick={toggleScanner}>
         <Icon icon={QrCode} />
       </Button>
@@ -45,7 +45,7 @@
   {#snippet info()}
     <p>
       A login link provided by a nostr signing app.
-      <Button class="cl-link" onclick={() => pushModal(InfoBunker)}>What is a bunker link?</Button>
+      <Button class="link" onclick={() => pushModal(InfoBunker)}>What is a bunker link?</Button>
     </p>
   {/snippet}
 </Field>

src/app/components/CalendarEventActions.svelte

@@ -3,9 +3,9 @@
   import {getTagValue, getAddress} from "@welshman/util"
   import {pubkey} from "@welshman/app"
   import Pen2 from "@assets/icons/pen-2.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
@@ -42,11 +42,11 @@
 
 <div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
-    <Link href={makeSpacePath(url, h)} class="badge-cl badge-cl-neutral badge-cl-sm">
+    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />
     </Link>
   {/if}
-  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="cl-tip-left" />
+  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
   <ThunkStatusOrDeleted {event} />
   {#if showActivity}
     <EventActivity {url} {path} {event} />

src/app/components/CalendarEventCreate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {

src/app/components/CalendarEventDate.svelte

@@ -14,10 +14,10 @@
 {#if !isNaN(start)}
   {@const startDate = secondsToDate(start)}
   <div
-    class="clay-card clay-card-sm cl-surface-alt hidden h-32 w-32 min-w-32 flex-col items-center justify-center gap-1 p-2 sm:flex">
+    class="hidden h-32 w-32 min-w-32 flex-col items-center justify-center gap-1 rounded-box bg-base-300 p-2 sm:flex">
     <strong>{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</strong>
     <span class="text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
-    <span class="cl-text-muted text-xs"
+    <span class="text-xs opacity-75"
       >{Intl.DateTimeFormat(LOCALE, {weekday: "long"}).format(startDate)}</span>
   </div>
 {/if}

src/app/components/CalendarEventEdit.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {

src/app/components/CalendarEventForm.svelte

@@ -9,14 +9,14 @@
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
   import MapPoint from "@assets/icons/map-point.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components2/Field.svelte"
+  import Field from "@lib/components/Field.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import DateTimeInput from "@lib/components2/DateTimeInput.svelte"
+  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {PROTECTED, publishRoomQuote} from "@app/groups"
   import {makeEditor} from "@app/editor"
@@ -164,8 +164,8 @@
         <p>Title*</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group">
+        <label class="input input-bordered flex w-full items-center gap-2">
-          <input bind:value={title} type="text" />
+          <input bind:value={title} class="grow" type="text" />
         </label>
       {/snippet}
     </Field>
@@ -174,17 +174,18 @@
         <p>Summary</p>
       {/snippet}
       {#snippet input()}
-        <div class="cl-surface cl-border-t relative z-feature flex gap-2">
+        <div
+          class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
           <div class="input-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
           <Button
             data-tip="Add an image"
-            circle
+            class="center btn tooltip"
             onclick={selectFiles}
             disabled={loading}>
             {#if $uploading}
-              <span class="cl-spinner"></span>
+              <span class="loading loading-spinner loading-xs"></span>
             {:else}
               <Icon icon={GallerySend} />
             {/if}
@@ -213,19 +214,19 @@
         <p>Location (optional)</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={MapPoint} />
-          <input bind:value={location} type="text" />
+          <input bind:value={location} class="grow" type="text" />
         </label>
       {/snippet}
     </Field>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={$uploading || loading}>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
       <Spinner loading={$uploading || loading}>Save Event</Spinner>
     </Button>
   </ModalFooter>

src/app/components/CalendarEventHeader.svelte

@@ -7,8 +7,7 @@
   } from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Text from "@lib/components2/Text.svelte"
 
   type Props = {
     event: TrustedEvent
@@ -21,12 +20,12 @@
 </script>
 
 <div class="flex flex-col justify-between gap-1">
-  <Text size="lg">{meta.title || meta.name}</Text>
+  <p class="text-lg">{meta.title || meta.name}</p>
   {#if !isNaN(start) && !isNaN(end)}
     {@const startDateDisplay = formatTimestampAsDate(start)}
     {@const endDateDisplay = formatTimestampAsDate(end)}
     {@const isSingleDay = startDateDisplay === endDateDisplay}
-    <div class="cl-text flex flex-wrap gap-2 text-xs">
+    <div class="flex flex-wrap gap-2 text-xs">
       <div class="flex items-center gap-2">
         <Icon icon={ClockCircle} size={4} />
         {formatTimestampAsDate(start)}

src/app/components/CalendarEventItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue, getAddress} from "@welshman/util"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
   import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
@@ -19,11 +19,11 @@
 </script>
 
 <Link
-  class="cv clay-card clay-card-interactive flex w-full cursor-pointer flex-col gap-3 p-4 sm:p-6"
+  class="cv col-3 card2 bg-alt w-full cursor-pointer shadow-md"
   href={makeCalendarPath(url, getAddress(event))}>
   <CalendarEventHeader {event} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <span class="cl-text-muted whitespace-nowrap py-1 text-sm">
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by <ProfileLink pubkey={event.pubkey} {url} />
       {#if h}
         in <RoomLink {url} {h} />

src/app/components/CalendarEventMeta.svelte

@@ -3,7 +3,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import UserCircle from "@assets/icons/user-circle.svg?dataurl"
   import MapPoint from "@assets/icons/map-point.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
 
   type Props = {
@@ -15,7 +15,7 @@
   const meta = $derived(fromPairs(event.tags) as Record<string, string>)
 </script>
 
-<div class="cl-text-muted flex min-w-0 flex-col gap-1 text-sm">
+<div class="flex min-w-0 flex-col gap-1 text-sm opacity-75">
   <span class="flex items-center gap-1">
     <Icon icon={UserCircle} size={4} />
     Posted by <ProfileLink pubkey={event.pubkey} {url} />

src/app/components/Chat.svelte

@@ -36,16 +36,12 @@
   } from "@welshman/app"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import PageBar from "@lib/components2/PageBar.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
-  import PageContent from "@lib/components2/PageContent.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
-  import Divider from "@lib/components2/Divider.svelte"
+  import Divider from "@lib/components/Divider.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Row from "@lib/components2/Row.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Card from "@lib/components2/Card.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
@@ -253,18 +249,18 @@
       <Icon icon={ArrowLeft} size={7} />
     </Button>
     <div class="flex items-center justify-between gap-4">
-      <div class="flex items-center gap-4 overflow-hidden text-ellipsis whitespace-nowrap">
+      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
         <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
           {#if others.length === 0}
-            <Row>
+            <div class="row-2">
               <ProfileCircle pubkey={$pubkey!} size={5} />
               <ProfileName pubkey={$pubkey!} />
-            </Row>
+            </div>
           {:else if others.length === 1}
-            <Row>
+            <div class="row-2">
               <ProfileCircle pubkey={others[0]} size={5} />
               <ProfileName pubkey={others[0]} />
-            </Row>
+            </div>
           {:else}
             <div class="flex items-center gap-2">
               <ProfileCircles pubkeys={others} size={5} />
@@ -289,21 +285,19 @@
 <PageContent class="flex flex-col-reverse gap-2 py-2 !mb-0">
   {#if missingRelayLists.length > 0}
     <div class="py-12">
-      <Card class="m-auto max-w-md text-center">
+      <div class="card2 col-2 m-auto max-w-md items-center text-center">
-        <Col class="items-center">
+        <p class="row-2 text-lg text-error">
-          <Row class="text-lg cl-text-danger">
+          <Icon icon={Danger} />
-            <Icon icon={Danger} />
+          Direct messages are not enabled
-            Direct messages are not enabled
+        </p>
-          </Row>
+        <p>
-          <Text>
+          Ask
-            Ask
+          {#each missingRelayLists as pubkey (pubkey)}
-            {#each missingRelayLists as pubkey (pubkey)}
+            <ProfileLink {pubkey} />
-              <ProfileLink {pubkey} />
+          {/each}
-            {/each}
+          to enable direct messaging by opening this conversation in their app.
-            to enable direct messaging by opening this conversation in their app.
+        </p>
-          </Text>
+      </div>
-        </Col>
-      </Card>
     </div>
   {/if}
   {#each elements as { type, id, value, showPubkey } (id)}
@@ -332,7 +326,7 @@
   <div class="h-screen"></div>
 </PageContent>
 
-<div class="chat__compose cl-surface-alt">
+<div class="chat__compose bg-base-200">
   <div>
     {#if parent}
       <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />

src/app/components/ChatCompose.svelte

@@ -6,8 +6,8 @@
   import {isMobile, preventDefault} from "@lib/html"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
   import Plane from "@assets/icons/plane-2.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
   import {type DraftKey} from "@app/drafts"
@@ -112,14 +112,12 @@
 
 <form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>
   <Button
-    variant="secondary"
-    circle
     data-tip="Add an image"
-    class="h-10 w-10 min-w-10"
+    class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
     disabled={$uploading || disabled}
     onclick={uploadFiles}>
     {#if $uploading}
-      <span class="cl-spinner"></span>
+      <span class="loading loading-spinner loading-xs"></span>
     {:else}
       <Icon icon={GallerySend} />
     {/if}
@@ -128,10 +126,8 @@
     <EditorContent {autofocus} {editor} />
   </div>
   <Button
-    variant="primary"
-    circle
     data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
-    class="absolute right-4 h-10 w-10 min-w-10"
+    class="center tooltip tooltip-left bg-primary text-primary-content absolute top-[7px] right-[7px] h-11 w-11 min-w-11 scale-90 rounded-full transition-transform motion-safe:hover:scale-100"
     disabled={$uploading || disabled}
     onclick={submit}>
     <Icon icon={Plane} />

src/app/components/ChatComposeEdit.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import {slide} from "@lib/transition"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
 
   const {
     clear,
@@ -12,10 +12,9 @@
 </script>
 
 <div
-  class="relative flex h-8 items-center justify-between border-l-2 border-solid px-2 pr-7 text-xs cl-surface-alt cl-text-primary"
+  class="relative flex h-8 items-center justify-between border-l-2 border-solid border-primary bg-base-300 px-2 pr-7 text-xs"
-  style="border-left-color: var(--cl-primary);"
   transition:slide>
-  <p>Editing message</p>
+  <p class="text-primary">Editing message</p>
   <Button onclick={clear} class="flex items-center">
     <Icon icon={CloseCircle} />
   </Button>

src/app/components/ChatComposeParent.svelte

@@ -3,8 +3,8 @@
   import {displayProfileByPubkey} from "@welshman/app"
   import {slide} from "@lib/transition"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
 
   const {
@@ -19,10 +19,9 @@
 </script>
 
 <div
-  class="relative border-l-2 border-solid px-2 py-1 pr-8 cl-surface-alt"
+  class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 pr-8"
-  style="border-left-color: var(--cl-primary);"
   transition:slide>
-  <p class="text-xs cl-text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
+  <p class="text-xs text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
   {#key event.id}
     <NoteContentMinimal trimParent {event} />
   {/key}

src/app/components/ChatEnable.svelte

@@ -4,15 +4,14 @@
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Text from "@lib/components2/Text.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
   import {DEFAULT_RELAYS, DEFAULT_MESSAGING_RELAYS} from "@app/env"
   import {pushToast} from "@app/toast"
 
@@ -58,14 +57,14 @@
     <ModalHeader>
       <ModalTitle>Enable direct messaging?</ModalTitle>
     </ModalHeader>
-    <Text>Direct messaging isn't currently enabled. Would you like to turn it on?</Text>
+    <p>Direct messaging isn't currently enabled. Would you like to turn it on?</p>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Enable direct messaging</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/ChatItem.svelte

@@ -1,9 +1,3 @@
-<style>
-  .chat-item:hover {
-    background-color: var(--cl-bg-alt);
-  }
-</style>
-
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
@@ -11,7 +5,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import {pubkey, loadMessagingRelayList} from "@welshman/app"
   import {fade} from "@lib/transition"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
@@ -41,8 +35,8 @@
 
 <Button class="flex flex-col justify-start gap-1 w-full" onclick={openChat}>
   <div
-    class="chat-item cursor-pointer cl-border-t px-3 py-2 transition-colors {props.class}"
+    class="cursor-pointer border-t border-solid border-base-100 px-3 py-2 transition-colors hover:bg-base-100 {props.class}"
-    class:cl-surface-alt={active}>
+    class:bg-base-100={active}>
     <div class="flex flex-col justify-start gap-1">
       <div class="flex items-center justify-between gap-2">
         <div class="flex min-w-0 items-center gap-2">
@@ -62,22 +56,18 @@
           {/if}
         </div>
         {#if !active && $notifications.has(path)}
-          <div
+          <div class="h-2 w-2 rounded-full bg-primary" transition:fade></div>
-            class="h-2 w-2 rounded-full"
-            style="background-color: var(--cl-primary);"
-            transition:fade>
-          </div>
         {/if}
       </div>
       <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-        <span class="cl-text-muted">
+        <span class="opacity-70">
           {#if props.messages[0].pubkey === $pubkey}
             You:
           {/if}
         </span>
         {props.messages[0].content}
       </p>
-      <p class="text-xs cl-text-muted">
+      <p class="text-xs opacity-70">
         {formatTimestamp(props.messages[0].created_at)}
       </p>
     </div>

src/app/components/ChatMembers.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Card from "@lib/components2/Card.svelte"
   import Profile from "@app/components/Profile.svelte"
 
   interface Props {
@@ -22,13 +21,13 @@
     </ModalHeader>
     <div class="flex flex-col gap-2">
       {#each pubkeys as pubkey (pubkey)}
-        <Card sm pad={false} class="p-3">
+        <div class="card2 bg-alt">
           <Profile {pubkey} />
-        </Card>
+        </div>
       {/each}
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="primary" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
   </ModalFooter>
 </Modal>

src/app/components/ChatMenu.svelte

@@ -3,10 +3,10 @@
   import Check from "@assets/icons/check.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import BellOff from "@assets/icons/bell-off.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import {setChecked} from "@app/notifications"
   import {notificationSettings} from "@app/settings"
 
@@ -23,17 +23,17 @@
 <Modal>
   <ModalBody>
     <div class="flex flex-col gap-2">
-      <Button variant="secondary" onclick={markAsRead}>
+      <Button class="btn btn-neutral" onclick={markAsRead}>
         <Icon size={5} icon={Check} />
         Mark all read
       </Button>
       {#if $notificationSettings.messages}
-        <Button variant="secondary" onclick={disableAlerts}>
+        <Button class="btn btn-neutral" onclick={disableAlerts}>
           <Icon size={4} icon={BellOff} />
           Disable alerts
         </Button>
       {:else}
-        <Button variant="secondary" onclick={enableAlerts}>
+        <Button class="btn btn-neutral" onclick={enableAlerts}>
           <Icon size={4} icon={Bell} />
           Enable alerts
         </Button>

src/app/components/ChatMessage.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import {type Instance} from "tippy.js"
-  import {hash, formatTimestampAsTime} from "@welshman/lib"
+  import {formatTimestampAsTime} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   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/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Tippy from "@lib/components2/Tippy.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
-  import TapTarget from "@lib/components2/TapTarget.svelte"
+  import TapTarget from "@lib/components/TapTarget.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import Content from "@app/components/Content.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
@@ -16,7 +16,7 @@
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import ChatMessageMenuMobile from "@app/components/ChatMessageMenuMobile.svelte"
-  import {colors} from "@app/theme"
+  import {getColor} from "@app/theme"
   import {makeDelete} from "@app/deletes"
   import {makeReaction} from "@app/reactions"
   import {pushModal} from "@app/modal"
@@ -35,7 +35,7 @@
   const isOwn = event.pubkey === $pubkey
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const thunk = mergeThunks($thunks.filter(t => t.event.id === event.id))
-  const [_, colorValue] = colors[hash(event.pubkey) % colors.length]
+  const colorValue = getColor(event.pubkey)
 
   const reply = () => replyTo(event)
   const edit = canEdit?.(event) ? () => onEdit?.(event) : undefined
@@ -71,8 +71,10 @@
 {/if}
 <div
   data-event={event.id}
-  class="group flex items-center justify-end gap-1 px-2"
+  class="group chat flex items-center justify-end gap-1 px-2"
-  class:flex-row-reverse={!isOwn}>
+  class:chat-start={!isOwn}
+  class:flex-row-reverse={!isOwn}
+  class:chat-end={isOwn}>
   {#if !isMobile}
     <Tippy
       bind:popover
@@ -99,13 +101,18 @@
   {/if}
   <div class="flex min-w-0 flex-col" class:items-end={isOwn}>
     <TapTarget
-      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"
+      class="chat-bubble shadow-soft mx-1 mb-2 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl min-w-[100px] {isOwn
+        ? 'bg-primary text-primary-content'
+        : 'bg-base-100'}"
       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="cl-border" size={4} />
+              <ProfileCircle
+                pubkey={event.pubkey}
+                style="box-shadow: 0 0 0 1.5px {colorValue}"
+                size={4} />
               <div class="flex items-center gap-2">
                 <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
                   {$profileDisplay}
@@ -113,7 +120,7 @@
               </div>
             </Button>
           {/if}
-          <span class="cl-text-subtle whitespace-nowrap text-xs"
+          <span class="whitespace-nowrap text-xs opacity-50"
             >{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
@@ -121,7 +128,7 @@
         <Content showEntire {event} />
       </div>
     </TapTarget>
-    <div class="z-feature -mt-4 ml-4 flex items-center gap-2">
+    <div class="row-2 z-feature -mt-4 ml-4">
       <ReactionSummary {event} {deleteReaction} {createReaction} noTooltip />
     </div>
   </div>

src/app/components/ChatMessageEmojiButton.svelte

@@ -3,8 +3,8 @@
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import EmojiButton from "@lib/components2/EmojiButton.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
   import {makeReaction} from "@app/reactions"
 
   interface Props {
@@ -22,6 +22,6 @@
     })
 </script>
 
-<EmojiButton {onEmoji} class="btn-cl-sm">
+<EmojiButton {onEmoji} class="btn join-item btn-xs">
   <Icon icon={SmileCircle} size={4} />
 </EmojiButton>

src/app/components/ChatMessageMenu.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Row from "@lib/components2/Row.svelte"
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/modal"
@@ -20,19 +19,19 @@
   }
 </script>
 
-<Row gap={1} class="cl-surface cl-border rounded-full px-1 py-1 text-xs">
+<div class="join border border-solid border-neutral text-xs">
   <ChatMessageEmojiButton {event} {pubkeys} />
   {#if replyTo}
-    <Button size="sm" circle onclick={reply}>
+    <Button class="btn join-item btn-xs" onclick={reply}>
       <Icon size={4} icon={Reply} />
     </Button>
   {/if}
   {#if edit}
-    <Button size="sm" circle onclick={onEdit}>
+    <Button class="btn join-item btn-xs" onclick={onEdit}>
       <Icon size={4} icon={Pen} />
     </Button>
   {/if}
-  <Button size="sm" circle onclick={showInfo}>
+  <Button class="btn join-item btn-xs" onclick={showInfo}>
     <Icon size={4} icon={Code2} />
   </Button>
-</Row>
+</div>

src/app/components/ChatMessageMenuMobile.svelte

@@ -7,12 +7,11 @@
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Col from "@lib/components2/Col.svelte"
+  import EmojiPicker from "@lib/components/EmojiPicker.svelte"
-  import EmojiPicker from "@lib/components2/EmojiPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {makeReaction} from "@app/reactions"
   import {pushModal} from "@app/modal"
@@ -58,29 +57,29 @@
 
 <Modal>
   <ModalBody>
-    <Col gap={2}>
+    <div class="flex flex-col gap-2">
-      <Button variant="secondary" onclick={showInfo}>
+      <Button class="btn btn-neutral" onclick={showInfo}>
         <Icon size={4} icon={Code2} />
         Message Info
       </Button>
-      <Button variant="secondary" block onclick={copyText}>
+      <Button class="btn btn-neutral w-full" onclick={copyText}>
         <Icon size={4} icon={Copy} />
         Copy Text
       </Button>
-      <Button variant="secondary" block onclick={sendReply}>
+      <Button class="btn btn-neutral w-full" onclick={sendReply}>
         <Icon size={4} icon={Reply} />
         Send Reply
       </Button>
       {#if edit}
-        <Button variant="secondary" block onclick={sendEdit}>
+        <Button class="btn btn-neutral w-full" onclick={sendEdit}>
           <Icon size={4} icon={Pen} />
           Edit Message
         </Button>
       {/if}
-      <Button variant="primary" block onclick={showEmojiPicker}>
+      <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
         <Icon size={4} icon={SmileCircle} />
         Send Reaction
       </Button>
-    </Col>
+    </div>
   </ModalBody>
 </Modal>

src/app/components/ChatStart.svelte

@@ -6,17 +6,17 @@
   import {fromNostrURI} from "@welshman/util"
   import {loadMessagingRelayList} from "@welshman/app"
   import {preventDefault} from "@lib/html"
-  import Field from "@lib/components2/Field.svelte"
+  import Field from "@lib/components/Field.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {goToChat} from "@app/routes"
 
@@ -73,11 +73,11 @@
     </Field>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={pubkeys.length === 0}>
+    <Button type="submit" class="btn btn-primary" disabled={pubkeys.length === 0}>
       Create Chat
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/ClassifiedActions.svelte

@@ -5,10 +5,9 @@
   import {pubkey} from "@welshman/app"
   import Pen2 from "@assets/icons/pen-2.svg?dataurl"
   import {normalizeTopic} from "@lib/util"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Badge from "@lib/components2/Badge.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ClassifiedStatus from "@app/components/ClassifiedStatus.svelte"
@@ -47,20 +46,18 @@
 
 <div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
-    <Link href={makeSpacePath(url, h)}>
+    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
-      <Badge variant="neutral" sm>
+      Posted in #<RoomName {h} {url} />
-        Posted in #<RoomName {h} {url} />
-      </Badge>
     </Link>
   {/if}
   <div class="flex min-w-0 flex-wrap gap-2">
     {#each uniq(topics) as topic (topic)}
-      <button type="button" class="badge-cl badge-cl-neutral badge-cl-sm">
+      <button type="button" class="btn btn-xs rounded-full font-normal">
         #{normalizeTopic(topic)}
       </button>
     {/each}
   </div>
-  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="cl-tip-left" />
+  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
   <ThunkStatusOrDeleted {event}>
     <ClassifiedStatus {event} />
   </ThunkStatusOrDeleted>

src/app/components/ClassifiedCreate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ClassifiedForm from "@app/components/ClassifiedForm.svelte"
 
   type Props = {

src/app/components/ClassifiedEdit.svelte

@@ -2,9 +2,9 @@
   import {fromPairs} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {getTag, getTagValues} from "@welshman/util"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ClassifiedForm from "@app/components/ClassifiedForm.svelte"
 
   type Props = {

src/app/components/ClassifiedForm.svelte

@@ -6,18 +6,14 @@
   import {isMobile, preventDefault} from "@lib/html"
   import {normalizeTopic} from "@lib/util"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components2/Field.svelte"
+  import Field from "@lib/components/Field.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Col from "@lib/components2/Col.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Grid from "@lib/components2/Grid.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import Input from "@lib/components2/Input.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Select from "@lib/components2/Select.svelte"
+  import ImagesInput from "@lib/components/ImagesInput.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
-  import ImagesInput from "@lib/components2/ImagesInput.svelte"
   import CurrencyInput from "@app/components/CurrencyInput.svelte"
   import TopicMultiSelect from "@app/components/TopicMultiSelect.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
@@ -168,18 +164,21 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     {@render header?.()}
-    <Col gap={8} class="relative">
+    <div class="col-8 relative">
       <Field>
         {#snippet label()}
           <p>Title*</p>
         {/snippet}
         {#snippet input()}
-          <!-- svelte-ignore a11y_autofocus -->
+          <label class="input input-bordered flex w-full items-center gap-2">
-          <Input
+            <!-- svelte-ignore a11y_autofocus -->
-            autofocus={!isMobile}
+            <input
-            bind:value={title}
+              autofocus={!isMobile}
-            type="text"
+              bind:value={title}
-            placeholder="What is this listing for?" />
+              class="grow"
+              type="text"
+              placeholder="What is this listing for?" />
+          </label>
         {/snippet}
       </Field>
       <Field>
@@ -205,10 +204,12 @@
           <p>Price*</p>
         {/snippet}
         {#snippet input()}
-          <Grid cols={2} gap={2}>
+          <div class="join grid grid-cols-2">
-            <Input bind:value={price} type="number" />
+            <label class="join-item input input-bordered flex w-full items-center gap-2">
-            <CurrencyInput bind:value={currency} />
+              <input bind:value={price} class="grow w-32" type="number" />
-          </Grid>
+            </label>
+            <CurrencyInput class="join-item" bind:value={currency} />
+          </div>
         {/snippet}
       </Field>
       {#if initialValues}
@@ -217,10 +218,10 @@
             <p>Status*</p>
           {/snippet}
           {#snippet input()}
-            <Select bind:value={status}>
+            <select class="select select-bordered w-full" bind:value={status}>
               <option value="active">Active</option>
               <option value="sold">Sold</option>
-            </Select>
+            </select>
           {/snippet}
         </Field>
       {/if}
@@ -232,14 +233,14 @@
           <ImagesInput bind:value={images} />
         {/snippet}
       </Field>
-    </Col>
+    </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Save Listing</Spinner>
     </Button>
   </ModalFooter>

src/app/components/ClassifiedItem.svelte

@@ -2,8 +2,8 @@
   import {formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {getTag, getAddress, getTagValue, getTagValues} from "@welshman/util"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import CurrencySymbol from "@lib/components2/CurrencySymbol.svelte"
+  import CurrencySymbol from "@lib/components/CurrencySymbol.svelte"
   import ContentLinkBlock from "@app/components/ContentLinkBlock.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
@@ -25,20 +25,20 @@
 </script>
 
 <Link
-  class="clay-card cl-surface-alt flex w-full cursor-pointer flex-col gap-2 p-4 sm:p-6"
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
   href={makeClassifiedPath(url, getAddress(event))}>
   {#if title}
     <div class="flex w-full items-center justify-between gap-2">
-      <p class="cl-text text-xl">
+      <p class="text-xl">
         {title} —
         <CurrencySymbol code={currency} />{price}
       </p>
-      <p class="cl-text-muted text-sm">
+      <p class="text-sm opacity-75">
         {formatTimestamp(event.created_at)}
       </p>
     </div>
   {:else}
-    <p class="cl-text-muted mb-3 h-0 text-xs">
+    <p class="mb-3 h-0 text-xs opacity-75">
       {formatTimestamp(event.created_at)}
     </p>
   {/if}
@@ -49,7 +49,7 @@
     {/each}
   </div>
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <span class="cl-text-muted whitespace-nowrap py-1 text-sm">
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by
       <ProfileLink pubkey={event.pubkey} {url} />
       {#if h}

src/app/components/ClassifiedStatus.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import cx from "classnames"
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
   import {ucFirst} from "@lib/util"
-  import Badge from "@lib/components2/Badge.svelte"
 
   type Props = {
     event: TrustedEvent
@@ -14,7 +14,7 @@
 </script>
 
 {#if status}
-  <Badge sm variant={status !== "active" ? "primary" : "neutral"}>
+  <div class={cx("btn btn-xs rounded-full", {"btn-primary": status !== "active"})}>
     {ucFirst(status)}
-  </Badge>
+  </div>
 {/if}

src/app/components/CommentActions.svelte

@@ -31,7 +31,7 @@
 
 <div class="flex flex-wrap items-center justify-between gap-2">
   <div class="flex grow flex-wrap justify-end gap-2">
-    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="cl-tip-left" />
+    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
     <ThunkStatusOrDeleted {event} />
     {#if showActivity}
       <EventActivity {url} {path} {event} />

src/app/components/ComposeMenu.svelte

@@ -5,8 +5,8 @@
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
   import Revote from "@assets/icons/revote.svg?dataurl"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import {pushModal} from "@app/modal"
   import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
@@ -39,33 +39,33 @@
   })
 </script>
 
-<ul class="clay-card flex flex-col gap-1 whitespace-nowrap p-2" bind:this={ul}>
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
   <li>
-    <Button block class="justify-start" onclick={createGoal}>
+    <Button onclick={createGoal}>
       <Icon size={4} icon={StarFallMinimalistic} />
       Funding Goal
     </Button>
   </li>
   <li>
-    <Button block class="justify-start" onclick={createCalendarEvent}>
+    <Button onclick={createCalendarEvent}>
       <Icon size={4} icon={CalendarMinimalistic} />
       Calendar Event
     </Button>
   </li>
   <li>
-    <Button block class="justify-start" onclick={createClassified}>
+    <Button onclick={createClassified}>
       <Icon size={4} icon={CaseMinimalistic} />
       Classified Listing
     </Button>
   </li>
   <li>
-    <Button block class="justify-start" onclick={createThread}>
+    <Button onclick={createThread}>
       <Icon size={4} icon={NotesMinimalistic} />
       Create Thread
     </Button>
   </li>
   <li>
-    <Button block class="justify-start" onclick={createPoll}>
+    <Button onclick={createPoll}>
       <Icon size={4} icon={Revote} />
       Ask a Question
     </Button>

src/app/components/Content.svelte

@@ -21,12 +21,10 @@
   } from "@welshman/content"
   import type {Parsed} from "@welshman/content"
   import {preventDefault, stopPropagation} from "@lib/html"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Alert from "@lib/components2/Alert.svelte"
-  import Row from "@lib/components2/Row.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentEmoji from "@app/components/ContentEmoji.svelte"
   import ContentEmail from "@app/components/ContentEmail.svelte"
@@ -146,15 +144,13 @@
 
 <div class="relative">
   {#if warning}
-    <Alert variant="warning">
+    <div class="card2 card2-sm bg-alt row-2">
-      <Row gap={2}>
+      <Icon icon={Danger} />
-        <Icon icon={Danger} />
+      <p>
-        <p>
+        This note has been flagged by the author as "{warning}".<br />
-          This note has been flagged by the author as "{warning}".<br />
+        <Button class="link" onclick={ignoreWarning}>Show anyway</Button>
-          <Button class="cl-link" onclick={ignoreWarning}>Show anyway</Button>
+      </p>
-        </p>
+    </div>
-      </Row>
-    </Alert>
   {:else}
     <div
       class="overflow-hidden text-ellipsis wrap-break-word"
@@ -208,9 +204,12 @@
     </div>
     {#if expandBlock}
       <div class="relative z-feature -mt-6 flex justify-center py-2">
-        <Button variant="secondary" onclick={stopPropagation(preventDefault(expand))}>
+        <button
+          type="button"
+          class="btn btn-neutral"
+          onclick={stopPropagation(preventDefault(expand))}>
           See more
-        </Button>
+        </button>
       </div>
     {/if}
   {/if}

src/app/components/ContentCode.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <code
-  class="cl-surface-alt cl-text w-full overflow-auto whitespace-pre rounded px-1"
+  class="w-full overflow-auto whitespace-pre rounded bg-neutral px-1 text-neutral-content"
   class:block={isBlock}>
   {value.trim()}
 </code>

src/app/components/ContentEmail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
 
   export let value: string
 </script>

src/app/components/ContentLinkBlock.svelte

@@ -3,8 +3,7 @@
   import {isRelayUrl, getTagValue} from "@welshman/util"
   import {Capacitor} from "@capacitor/core"
   import {preventDefault, stopPropagation} from "@lib/html"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Center from "@lib/components2/Center.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
@@ -54,45 +53,37 @@
 
 {#if isRoomOrRelay}
   <div>
-    <ContentLinkUrl
+    <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
-      {url}
-      class="cl-surface-alt cl-text inline-block max-w-full overflow-hidden text-ellipsis whitespace-nowrap rounded px-1" />
   </div>
 {:else}
   <Link {external} {href} class="my-2 block">
-    <div class="overflow-hidden" style="border-radius: var(--cl-r-card)">
+    <div class="overflow-hidden rounded-box">
       {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
         <video
           controls
           src={url}
           poster={getVideoPoster(url)}
           preload="metadata"
-          class="max-h-96 object-contain object-center"
+          class="max-h-96 rounded-box object-contain object-center">
-          style="border-radius: var(--cl-r-card)">
           <track kind="captions" />
         </video>
       {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
         <button type="button" onclick={stopPropagation(preventDefault(expand))}>
-          <ContentLinkBlockImage
+          <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
-            {value}
-            {event}
-            class="m-auto max-h-96"
-            style="border-radius: var(--cl-r-card)" />
         </button>
       {:else}
         {#await loadPreview()}
-          <Center class="my-12 w-full">
+          <div class="center my-12 w-full">
-            <span class="cl-spinner"></span>
+            <span class="loading loading-spinner"></span>
-          </Center>
+          </div>
         {:then preview}
-          <div class="cl-surface-alt flex max-w-xl flex-col leading-normal">
+          <div class="bg-alt flex max-w-xl flex-col leading-normal">
             {#if preview.image && !hideImage}
               <img
                 alt=""
                 onerror={onError}
                 src={preview.image}
-                class="cl-surface-alt max-h-72 object-contain object-center"
+                class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
-                style="border-top-left-radius: var(--cl-r-card); border-top-right-radius: var(--cl-r-card)" />
             {/if}
             <div class="flex flex-col gap-2 p-4">
               <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
@@ -101,7 +92,7 @@
             </div>
           </div>
         {:catch}
-          <p class="cl-surface-alt p-12 text-center leading-normal">
+          <p class="bg-alt p-12 text-center leading-normal">
             Unable to load a preview for {url}
           </p>
         {/await}

src/app/components/ContentLinkBlockImage.svelte

@@ -11,7 +11,7 @@
   } from "@welshman/util"
   import {signer} from "@welshman/app"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
 
   const {value, event, ...props} = $props()
 
@@ -87,9 +87,7 @@
 </script>
 
 {#if hasError}
-  <a
+  <a href={url} class="link-content whitespace-nowrap">
-    href={url}
-    class="cl-surface-alt inline-flex max-w-full items-center gap-1 overflow-hidden rounded px-1 whitespace-nowrap text-ellipsis">
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>

src/app/components/ContentLinkDetail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
 
   const {value, event} = $props()
 
@@ -8,9 +8,5 @@
 </script>
 
 <Button class="m-auto h-screen w-screen cursor-pointer p-4" onclick={back}>
-  <ContentLinkBlockImage
+  <ContentLinkBlockImage {value} {event} class="m-auto max-h-full max-w-full rounded-box" />
-    {value}
-    {event}
-    class="m-auto max-h-full max-w-full"
-    style="border-radius: var(--cl-r-card);" />
 </Button>

src/app/components/ContentLinkInline.svelte

@@ -3,7 +3,7 @@
   import {getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import {pushModal} from "@app/modal"
@@ -21,13 +21,11 @@
   <!-- Use a real link so people can copy the href -->
   <a
     href={url}
-    class="cl-surface-alt inline-flex max-w-full items-center gap-1 overflow-hidden rounded px-1 whitespace-nowrap text-ellipsis"
+    class="link-content whitespace-nowrap"
     onclick={stopPropagation(preventDefault(expand))}>
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
 {:else}
-  <ContentLinkUrl
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
-    {url}
-    class="cl-surface-alt inline-flex max-w-full items-center gap-1 overflow-hidden rounded px-1 whitespace-nowrap text-ellipsis" />
 {/if}

src/app/components/ContentLinkUrl.svelte

@@ -2,8 +2,8 @@
   import {call, displayUrl} from "@welshman/lib"
   import {displayRelayUrl, isRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import {PLATFORM_URL} from "@app/env"
   import {displayRoom, isRoomId, splitRoomId} from "@app/groups"
   import {makeRoomPath, makeSpacePath} from "@app/routes"
@@ -49,10 +49,10 @@
 
 <Link {external} {href} class={className}>
   {#if roomReference}
-    ~<span class="cl-text-primary">{displayRelayUrl(roomReference.url)}</span> /
+    ~<span class="text-primary">{displayRelayUrl(roomReference.url)}</span> /
     {displayRoom(roomReference.url, roomReference.h)}
   {:else if relayReference}
-    <span class="cl-text-primary">{displayRelayUrl(relayReference)}</span>
+    <span class="text-primary">{displayRelayUrl(relayReference)}</span>
   {:else}
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}

src/app/components/ContentMention.svelte

@@ -2,7 +2,7 @@
   import {removeUndefined} from "@welshman/lib"
   import type {ProfilePointer} from "@welshman/content"
   import {deriveProfileDisplay} from "@welshman/app"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/modal"
 
@@ -18,6 +18,6 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey: value.pubkey, url})
 </script>
 
-<Button onclick={openProfile} class="cl-link">
+<Button onclick={openProfile} class="link-content">
   @{$display}
 </Button>

src/app/components/ContentMinimal.svelte

@@ -19,11 +19,10 @@
     isNewline,
   } from "@welshman/content"
   import type {Parsed} from "@welshman/content"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Alert from "@lib/components2/Alert.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentEmoji from "@app/components/ContentEmoji.svelte"
   import ContentEmail from "@app/components/ContentEmail.svelte"
@@ -97,13 +96,13 @@
 
 <div class="relative">
   {#if warning}
-    <Alert variant="warning" class="items-center">
+    <div class="card2 card2-sm bg-alt row-2">
       <Icon icon={Danger} />
       <p>
         This note has been flagged by the author as "{warning}".<br />
-        <Button class="cl-link" onclick={ignoreWarning}>Show anyway</Button>
+        <Button class="link" onclick={ignoreWarning}>Show anyway</Button>
       </p>
-    </Alert>
+    </div>
   {:else}
     <div class="overflow-hidden text-ellipsis wrap-break-word">
       {#each shortContent as parsed, i}

src/app/components/ContentQuote.svelte

@@ -3,10 +3,9 @@
   import {Router} from "@welshman/router"
   import type {TrustedEvent} from "@welshman/util"
   import {Address, MESSAGE} from "@welshman/util"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import NoteContent from "@app/components/NoteContent.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import {deriveEvent} from "@app/repository"
   import {entityLink} from "@app/env"
@@ -44,23 +43,19 @@
 
 <Button class="my-2 block w-full max-w-full text-left" {onclick}>
   {#if $quote}
-    {#if $quote.content.trim().match(/^(nostr:)?nevent1[a-z0-9]+$/)}
+    {#if $quote.kind === MESSAGE}
-      <NoteContent {url} event={$quote} />
-    {:else if $quote.kind === MESSAGE}
       <div
-        class="cl-surface-alt py-1 pl-2 opacity-90"
+        class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
-        style="border-left: 2px solid var(--cl-primary);">
+        style="background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-300) 90%);">
         <NoteContentMinimal trimParent {url} event={$quote} />
       </div>
     {:else}
-      <div class="cl-surface-alt overflow-hidden" style="border-radius: var(--cl-r-card);">
+      <NoteCard noShadow event={$quote} {url} class="bg-alt rounded-box p-4">
-        <NoteCard noShadow event={$quote} {url} class="p-4">
+        <NoteContentMinimal {url} event={$quote} />
-          <NoteContentMinimal {url} event={$quote} />
+      </NoteCard>
-        </NoteCard>
-      </div>
     {/if}
   {:else}
-    <div class="cl-surface-alt p-4" style="border-radius: var(--cl-r-card);">
+    <div class="rounded-box p-4">
       <Spinner loading>Loading event...</Spinner>
     </div>
   {/if}

src/app/components/ContentToken.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Bolt from "@assets/icons/bolt.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import {clip} from "@app/toast"
 
   const {value} = $props()
@@ -9,7 +9,7 @@
   const copy = () => clip(value)
 </script>
 
-<Button onclick={copy} variant="secondary" size="sm" class="max-w-full truncate align-middle">
+<Button onclick={copy} class="link-content">
   <Icon icon={Bolt} size={3} class="inline-block translate-y-px" />
   {value.slice(0, 16)}...
 </Button>

src/app/components/ContentTopic.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import Badge from "@lib/components2/Badge.svelte"
-
   const {value} = $props()
 </script>
 
-<Badge variant="neutral">
+<span class="link-content">
   #{value}
-</Badge>
+</span>

src/app/components/CurrencyInput.svelte

@@ -6,11 +6,11 @@
   import {preventDefault} from "@lib/html"
   import {createSearch} from "@welshman/app"
   import {currencyOptions, displayCurrency} from "@lib/currency"
-  import Suggestions from "@lib/components2/Suggestions.svelte"
+  import Suggestions from "@lib/components/Suggestions.svelte"
   import CurrencySuggestion from "@app/components/CurrencySuggestion.svelte"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Tippy from "@lib/components2/Tippy.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
 
   interface Props {
     value: string
@@ -66,18 +66,22 @@
 </script>
 
 <button
-  class={cx(props.class, "input-cl input-cl-group cursor-pointer", {"cl-surface-alt": currency})}
+  class={cx(
+    props.class,
+    {"bg-base-200": currency},
+    "input input-bordered flex items-center gap-2 cursor-pointer",
+  )}
   bind:this={wrapper}
   onfocus={preventDefault(clearAndFocus)}
   onclick={preventDefault(clearAndFocus)}>
   <Icon icon={AltArrowDown} />
   {#if currency}
-    <span class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+    <span class="text-sm ellipsize whitespace-nowrap">
       {displayCurrency(currency)}
     </span>
   {:else}
     <!-- svelte-ignore a11y_autofocus -->
-    <input {autofocus} class="input-cl-bare grow" type="text" bind:value={$term} onkeydown={onKeyDown} />
+    <input {autofocus} class="grow" type="text" bind:value={$term} onkeydown={onKeyDown} />
   {/if}
   <Tippy
     bind:popover

src/app/components/EmptyState.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+
+  type Props = {
+    icon?: string
+    title: string
+    children?: Snippet
+    action?: Snippet
+  }
+
+  const {icon, title, children, action}: Props = $props()
+</script>
+
+<div
+  class="m-auto flex max-w-sm flex-col items-center gap-3 px-4 py-12 text-center"
+  in:fly={{y: 16}}>
+  {#if icon}
+    <div class="bg-primary/10 text-primary center size-16 rounded-full motion-safe:animate-float">
+      <Icon {icon} size={8} />
+    </div>
+  {/if}
+  <h3 class="font-display text-xl font-bold tracking-tight">{title}</h3>
+  {#if children}
+    <p class="text-sm opacity-70">{@render children?.()}</p>
+  {/if}
+  {#if action}
+    <div class="mt-1">{@render action?.()}</div>
+  {/if}
+</div>

src/app/components/EventActions.svelte

@@ -6,12 +6,11 @@
   import Bolt from "@assets/icons/bolt.svg?dataurl"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Tippy from "@lib/components2/Tippy.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Row from "@lib/components2/Row.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
-  import EmojiButton from "@lib/components2/EmojiButton.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
   import EventMenu from "@app/components/EventMenu.svelte"
   import {ENABLE_ZAPS} from "@app/env"
   import {publishReaction} from "@app/reactions"
@@ -44,13 +43,13 @@
   let popover: Instance | undefined = $state()
 </script>
 
-<Row gap={1} class="cl-surface-alt cl-border rounded-full px-1 py-1">
+<div class="join items-center rounded-full">
   {#if ENABLE_ZAPS && !hideZap}
-    <ZapButton {url} {event} class="btn-cl-sm">
+    <ZapButton {url} {event} class="btn join-item btn-neutral btn-xs">
       <Icon icon={Bolt} size={4} />
     </ZapButton>
   {/if}
-  <EmojiButton {onEmoji} class="btn-cl-sm">
+  <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">
     <Icon icon={SmileCircle} size={4} />
   </EmojiButton>
   <Tippy
@@ -59,8 +58,8 @@
     component={EventMenu}
     props={{url, noun, event, customActions, onClick: hidePopover}}
     params={{trigger: "manual", interactive: true}}>
-    <Button class="btn-cl-sm" onclick={showPopover}>
+    <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
       <Icon icon={MenuDots} size={4} />
     </Button>
   </Tippy>
-</Row>
+</div>

src/app/components/EventActivity.svelte

@@ -8,8 +8,7 @@
   import {repository} from "@welshman/app"
   import {deriveChecked} from "@app/notifications"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Badge from "@lib/components2/Badge.svelte"
 
   const {url, path, event}: {url: string; path: string; event: TrustedEvent} = $props()
 
@@ -23,13 +22,13 @@
   })
 </script>
 
-<Badge sm>
+<div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
-  <Icon icon={Reply} size={4} />
+  <Icon icon={Reply} />
   <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
-</Badge>
+</div>
-<Badge sm>
+<div class="btn btn-neutral btn-xs relative rounded-full">
   {#if gt(lastActive, $checked)}
-    <div class="h-2 w-2 rounded-full" style="background-color: var(--cl-primary);"></div>
+    <div class="h-2 w-2 rounded-full bg-primary"></div>
   {/if}
   Active {formatTimestampRelative(lastActive)}
-</Badge>
+</div>

src/app/components/EventDeleteConfirm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
-  import Confirm from "@lib/components2/Confirm.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
   import {publishDelete} from "@app/deletes"
   import {canEnforceNip70} from "@app/relays"
   import {clearModals} from "@app/modal"

src/app/components/EventInfo.svelte

@@ -8,16 +8,15 @@
   import FileText from "@assets/icons/file-text.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import UserCircle from "@assets/icons/user-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Badge from "@lib/components2/Badge.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
   import {clip} from "@app/toast"
 
   type Props = {
@@ -61,13 +60,13 @@
         <p>Event Link</p>
       {/snippet}
       {#snippet input()}
-        <div class="input-cl input-cl-group w-full">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={FileText} />
-          <input type="text" class="input-cl-bare overflow-hidden text-ellipsis" value={nevent1} />
+          <input type="text" class="ellipsize min-w-0 grow" value={nevent1} />
           <Button onclick={copyLink} class="flex items-center">
             <Icon icon={Copy} />
           </Button>
-        </div>
+        </label>
       {/snippet}
     </FieldInline>
     <FieldInline>
@@ -75,13 +74,13 @@
         <p>Author Pubkey</p>
       {/snippet}
       {#snippet input()}
-        <div class="input-cl input-cl-group w-full">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={UserCircle} />
-          <input type="text" class="input-cl-bare overflow-hidden text-ellipsis" value={npub1} />
+          <input type="text" class="ellipsize min-w-0 grow" value={npub1} />
           <Button onclick={copyPubkey} class="flex items-center">
             <Icon icon={Copy} />
           </Button>
-        </div>
+        </label>
       {/snippet}
     </FieldInline>
     {#if !url && seenOn.size > 0}
@@ -92,25 +91,24 @@
         {#snippet input()}
           <div class="flex flex-wrap gap-2">
             {#each seenOn as url, i (url)}
-              <Badge>
+              <span class="bg-alt badge flex gap-1">
                 {displayRelayUrl(url)}
-              </Badge>
+              </span>
             {/each}
           </div>
         {/snippet}
       </FieldInline>
     {/if}
     <div class="relative">
-      <pre
+      <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
-        class="cl-surface-alt cl-border overflow-auto rounded-2xl p-4 text-xs"><code>{json}</code></pre>
       <p class="absolute right-2 top-2 flex grow items-center justify-between">
-        <Button variant="secondary" size="sm" onclick={copyJson} class="flex items-center">
+        <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
           <Icon icon={Copy} /> Copy
         </Button>
       </p>
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="primary" class="grow" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary grow" onclick={() => history.back()}>Got it</Button>
   </ModalFooter>
 </Modal>

src/app/components/EventMenu.svelte

@@ -10,9 +10,9 @@
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Danger from "@assets/icons/danger.svg?dataurl"
   import {setKey} from "@lib/implicit"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Confirm from "@lib/components2/Confirm.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import Report from "@app/components/Report.svelte"
   import EventShare from "@app/components/EventShare.svelte"
@@ -78,33 +78,43 @@
   })
 </script>
 
-<div class="clay-card flex flex-col gap-1 whitespace-nowrap p-2" bind:this={ul}>
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
   {#if isRoot}
-    <Button block onclick={share}>
+    <li>
-      <Icon size={4} icon={ShareCircle} />
+      <Button onclick={share}>
-      Share to Chat
+        <Icon size={4} icon={ShareCircle} />
-    </Button>
+        Share to Chat
+      </Button>
+    </li>
   {/if}
-  <Button block onclick={showInfo}>
+  <li>
-    <Icon size={4} icon={Code2} />
+    <Button onclick={showInfo}>
-    {noun} Details
+      <Icon size={4} icon={Code2} />
-  </Button>
+      {noun} Details
+    </Button>
+  </li>
   {@render customActions?.()}
   {#if event.pubkey === $pubkey}
-    <Button block variant="danger" onclick={showDelete}>
+    <li>
-      <Icon size={4} icon={TrashBin2} />
+      <Button onclick={showDelete} class="text-error">
-      Delete {noun}
-    </Button>
-  {:else}
-    <Button block variant="danger" onclick={report}>
-      <Icon size={4} icon={Danger} />
-      Report Content
-    </Button>
-    {#if $userIsAdmin}
-      <Button block variant="danger" onclick={showAdminDelete}>
         <Icon size={4} icon={TrashBin2} />
         Delete {noun}
       </Button>
+    </li>
+  {:else}
+    <li>
+      <Button class="text-error" onclick={report}>
+        <Icon size={4} icon={Danger} />
+        Report Content
+      </Button>
+    </li>
+    {#if $userIsAdmin}
+      <li>
+        <Button class="text-error" onclick={showAdminDelete}>
+          <Icon size={4} icon={TrashBin2} />
+          Delete {noun}
+        </Button>
+      </li>
     {/if}
   {/if}
-</div>
+</ul>

src/app/components/EventReply.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
-  import type {TrustedEvent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
   import {fly} from "@lib/transition"
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
-  import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
   import {publishComment} from "@app/comments"
   import {canEnforceNip70} from "@app/relays"
-  import {PROTECTED, prependParent} from "@app/groups"
+  import {PROTECTED} from "@app/groups"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/drafts"
   import {pushToast} from "@app/toast"
@@ -20,17 +18,8 @@
     content?: string | object
   }
 
-  type Props = {
+  const {url, event, onClose, onSubmit} = $props()
-    url: string
+  const draftKey = new DraftKey<Values>(`reply:${event.id}`)
-    event: TrustedEvent
-    parent?: TrustedEvent
-    onClose: () => void
-    onClearParent?: () => void
-    onSubmit: (thunk: unknown) => void
-  }
-
-  const {url, event, parent, onClose, onClearParent, onSubmit}: Props = $props()
-  const draftKey = new DraftKey<Values>(`reply:${event.id}:${parent?.id || ""}`)
   const initialValues = draftKey.get()
   const shouldProtect = canEnforceNip70(url)
   const uploading = writable(false)
@@ -42,8 +31,8 @@
     if ($uploading) return
 
     const ed = await editor
-    let content = ed.getText({blockSeparator: "\n"}).trim()
+    const content = ed.getText({blockSeparator: "\n"}).trim()
-    let tags = ed.storage.nostr.getEditorTags()
+    const tags = ed.storage.nostr.getEditorTags()
 
     if (await shouldProtect) {
       tags.push(PROTECTED)
@@ -56,10 +45,6 @@
       })
     }
 
-    if (parent) {
-      ;({content, tags} = prependParent(parent, {content, tags}, url))
-    }
-
     draftKey.clear()
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
@@ -101,29 +86,25 @@
   bind:this={form}
   onsubmit={preventDefault(submit)}
   class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
-  <div class="clay-card mx-2 my-2 p-4">
+  <div class="card2 mx-2 my-2 bg-alt shadow-md">
-    {#if parent}
-      <ChatComposeParent event={parent} clear={() => onClearParent?.()} verb="Replying to" />
-    {/if}
     <div class="relative">
       <div class="note-editor grow overflow-hidden">
         <EditorContent {autofocus} {editor} />
       </div>
       <Button
         data-tip="Add an image"
-        circle
+        class="tooltip tooltip-left absolute bottom-1 right-2"
-        class="absolute bottom-1 right-2"
         onclick={selectFiles}>
         {#if $uploading}
-          <span class="cl-spinner"></span>
+          <span class="loading loading-spinner loading-xs"></span>
         {:else}
           <Icon icon={Paperclip} size={3} />
         {/if}
       </Button>
     </div>
     <div class="flex justify-between pt-3">
-      <Button onclick={onClose}>Cancel</Button>
+      <Button class="btn btn-link" onclick={onClose}>Cancel</Button>
-      <Button type="submit" variant="primary">Post Reply</Button>
+      <Button type="submit" class="btn btn-primary">Post Reply</Button>
     </div>
   </div>
 </form>

src/app/components/EventShare.svelte

@@ -5,14 +5,14 @@
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import {setKey} from "@lib/implicit"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import {roomsByUrl} from "@app/groups"
   import {makeRoomPath} from "@app/routes"
@@ -41,20 +41,23 @@
     </ModalHeader>
     <div class="grid grid-cols-3 gap-2">
       {#each $roomsByUrl.get(url) || [] as room (room.h)}
-        <Button
+        <button
-          variant={selection === room.h ? "primary" : "secondary"}
+          type="button"
+          class="btn"
+          class:btn-neutral={selection !== room.h}
+          class:btn-primary={selection === room.h}
           onclick={() => toggleRoom(room.h)}>
           #<RoomName {...room} />
-        </Button>
+        </button>
       {/each}
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={!selection}>
+    <Button type="submit" class="btn btn-primary" disabled={!selection}>
       Share {noun}
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/GoalActions.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
@@ -34,11 +34,11 @@
 
 <div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
-    <Link href={makeSpacePath(url, h)} class="badge-cl badge-cl-neutral badge-cl-sm">
+    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />
     </Link>
   {/if}
-  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="cl-tip-left" />
+  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
   <ThunkStatusOrDeleted {event} />
   {#if showActivity}
     <EventActivity {url} {path} {event} />

src/app/components/GoalCreate.svelte

@@ -6,17 +6,17 @@
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components2/Field.svelte"
+  import Field from "@lib/components/Field.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {pushToast} from "@app/toast"
   import {PROTECTED, publishRoomQuote} from "@app/groups"
@@ -145,17 +145,18 @@
       <ModalTitle>Create a Funding Goal</ModalTitle>
       <ModalSubtitle>Request contributions for your fundraiser.</ModalSubtitle>
     </ModalHeader>
-    <div class="relative flex flex-col gap-8">
+    <div class="col-8 relative">
       <Field>
         {#snippet label()}
           <p>Title*</p>
         {/snippet}
         {#snippet input()}
-          <label class="input-cl input-cl-group">
+          <label class="input input-bordered flex w-full items-center gap-2">
             <!-- svelte-ignore a11y_autofocus -->
             <input
               autofocus={!isMobile}
               bind:value={title}
+              class="grow"
               type="text"
               placeholder="What do funds go towards?" />
           </label>
@@ -174,11 +175,11 @@
         </Field>
         <Button
           data-tip="Add an image"
-          class="absolute bottom-1 right-2"
+          class="tooltip tooltip-left absolute bottom-1 right-2"
           onclick={selectFiles}
           disabled={loading}>
           {#if $uploading}
-            <span class="cl-spinner"></span>
+            <span class="loading loading-spinner loading-xs"></span>
           {:else}
             <Icon icon={Paperclip} size={3} />
           {/if}
@@ -191,17 +192,16 @@
           {/snippet}
           {#snippet input()}
             <div class="flex grow justify-end">
-              <label class="input-cl input-cl-group w-auto">
+              <label class="input input-bordered flex w-auto items-center gap-2">
                 <Icon icon={Bolt} />
-                <input bind:value={amount} type="number" class="input-cl-bare w-28" />
+                <input bind:value={amount} type="number" class="w-28 grow" />
-                <p class="cl-text-subtle shrink-0">sats</p>
+                <p class="shrink-0 opacity-50">sats</p>
               </label>
             </div>
           {/snippet}
         </FieldInline>
         <input
-          class="-mt-2 w-full"
+          class="range range-primary -mt-2 w-full"
-          style="accent-color: var(--cl-primary);"
           type="range"
           min="1000"
           max="100000"
@@ -211,11 +211,11 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={$uploading || loading}>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
       <Spinner {loading}>Create Goal</Spinner>
     </Button>
   </ModalFooter>

src/app/components/GoalItem.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import GoalActions from "@app/components/GoalActions.svelte"
@@ -22,27 +20,24 @@
   const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="w-full" href={makeGoalPath(url, event.id)}>
+<Link
-  <Col
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
-    gap={2}
+  href={makeGoalPath(url, event.id)}>
-    class="clay-card clay-card-interactive cl-surface-alt w-full p-4 sm:p-6"
+  <p class="text-2xl">{event.content}</p>
-    style="content-visibility: auto;">
+  <Content
-    <p class="text-2xl">{event.content}</p>
+    event={{content: summary, tags: event.tags}}
-    <Content
+    {url}
-      event={{content: summary, tags: event.tags}}
+    expandMode="inline"
-      {url}
+    minLength={50}
-      expandMode="inline"
+    maxLength={300} />
-      minLength={50}
+  <GoalSummary {url} {event} />
-      maxLength={300} />
+  <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <GoalSummary {url} {event} />
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
-    <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
+      Posted by <ProfileLink pubkey={event.pubkey} {url} />
-      <Text size="sm" muted class="whitespace-nowrap py-1">
+      {#if h}
-        Posted by <ProfileLink pubkey={event.pubkey} {url} />
+        in <RoomLink {url} {h} />
-        {#if h}
+      {/if}
-          in <RoomLink {url} {h} />
+    </span>
-        {/if}
+    <GoalActions showActivity {url} {event} />
-      </Text>
+  </div>
-      <GoalActions showActivity {url} {event} />
-    </div>
-  </Col>
 </Link>

src/app/components/GoalSummary.svelte

@@ -5,11 +5,7 @@
   import {deriveItemsByKey, deriveArray} from "@welshman/store"
   import {repository, getValidZap} from "@welshman/app"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Stat from "@lib/components2/Stat.svelte"
-  import Row from "@lib/components2/Row.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Progress from "@lib/components2/Progress.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
 
   type Props = {
@@ -35,17 +31,24 @@
   const daysOld = Math.ceil((now() - event.created_at) / DAY)
 </script>
 
-<Col gap={8} class={props.class}>
+<div class="flex flex-col gap-8 {props.class}">
-  <Row gap={8} class="items-start">
+  <div class="flex gap-8">
-    <Stat value="{zapAmount} sats" label="funded of {goalAmount} sats" gradient />
+    <div>
-    <Stat
+      <p class="text-xl text-primary">{zapAmount} sats</p>
-      value={contributorsCount}
+      <p class="text-sm opacity-75">funded of {goalAmount} sats</p>
-      label={contributorsCount === 1 ? "contributor" : "contributors"} />
+    </div>
-    <Stat value={daysOld} label="{daysOld === 1 ? 'day' : 'days'} old" />
+    <div>
-  </Row>
+      <p class="text-xl">{contributorsCount}</p>
-  <Progress value={zapAmount} max={goalAmount} />
+      <p class="text-sm opacity-75">{contributorsCount === 1 ? "contributor" : "contributors"}</p>
-  <ZapButton {url} {event} class="btn-cl btn-cl-primary lg:m-auto lg:px-20">
+    </div>
+    <div>
+      <p class="text-xl">{daysOld}</p>
+      <p class="text-sm opacity-75">{daysOld === 1 ? "day" : "days"} old</p>
+    </div>
+  </div>
+  <progress class="progress progress-primary" value={zapAmount} max={goalAmount}></progress>
+  <ZapButton {url} {event} class="btn btn-primary lg:m-auto lg:px-20">
     <Icon icon={Bolt} />
     Contribute to this goal
   </ZapButton>
-</Col>
+</div>

src/app/components/IconPicker.svelte

@@ -1,18 +1,6 @@
-<style>
-  .icon-tile {
-    color: var(--cl-text);
-    border-radius: var(--cl-r-icon);
-    transition: all 0.2s ease;
-  }
-  .icon-tile:hover {
-    background: var(--cl-primary);
-    color: var(--cl-primary-content);
-  }
-</style>
-
 <script lang="ts">
   import {createSearch} from "@welshman/app"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
 
   const iconModules = import.meta.glob("@assets/icons/*.svg", {
@@ -55,9 +43,9 @@
   }
 </script>
 
-<label class="input-cl input-cl-group">
+<label class="input input-bordered flex w-full items-center gap-2">
   <Icon icon={Magnifier} />
-  <input bind:value={searchTerm} class="input-cl-bare" type="text" placeholder="Search icons..." />
+  <input bind:value={searchTerm} class="grow" type="text" placeholder="Search icons..." />
 </label>
 <div class="mt-2 max-h-80 overflow-y-auto">
   <div class="grid grid-cols-8 gap-2 p-2">
@@ -65,9 +53,9 @@
       <button
         type="button"
         title={icon.name}
-        class="icon-tile flex aspect-square items-center justify-center"
+        class="flex aspect-square items-center justify-center rounded-box transition-colors hover:bg-primary hover:text-primary-content"
         onclick={() => handleSelect(icon.url)}>
-        <Icon icon={icon.url} size={6} />
+        <Icon icon={icon.url} class="h-6 w-6" />
       </button>
     {/each}
   </div>

src/app/components/IconPickerModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import IconPicker from "@app/components/IconPicker.svelte"
 
   type Props = {

src/app/components/IconPickerPopover.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Card from "@lib/components2/Card.svelte"
   import IconPicker from "@app/components/IconPicker.svelte"
 
   type Props = {
@@ -9,6 +8,6 @@
   const {onSelect}: Props = $props()
 </script>
 
-<Card class="w-96">
+<div class="w-96 rounded-box bg-base-100 p-4 shadow-2xl">
   <IconPicker {onSelect} />
-</Card>
+</div>

src/app/components/InfoBunker.svelte

@@ -1,42 +1,41 @@
 <script lang="ts">
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Text from "@lib/components2/Text.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
   import {PLATFORM_NAME} from "@app/env"
 </script>
 
-<Modal>
+<Modal
-  <ModalBody>
+  ><ModalBody>
     <ModalHeader>
       <ModalTitle>What is a bunker link?</ModalTitle>
     </ModalHeader>
-    <Text>
+    <p>
-      <Link external styled href="https://nostr.com/">Nostr</Link> uses "keys" instead of passwords
+      <Link external class="link" href="https://nostr.com/">Nostr</Link> uses "keys" instead of passwords
-      to identify users. This allows users to own their social identity instead of renting it from a
+      to identify users. This allows users to own their social identity instead of renting it from a tech
-      tech company, and can bring it with them from app to app.
+      company, and can bring it with them from app to app.
-    </Text>
+    </p>
-    <Text>
+    <p>
-      A good way to manage your keys is to use a remote signing application. These apps can hold your
+      A good way to manage your keys is to use a remote signing application. These apps can hold
-      keys and log you in remotely to as many applications as you like, without risking loss or theft
+      your keys and log you in remotely to as many applications as you like, without risking loss or
-      of your keys.
+      theft of your keys.
-    </Text>
+    </p>
-    <Text>
+    <p>
       One way to log in with a remote signer is using a "bunker link" which is more secure and
       decentralized than other solutions. Check your signer for a link beginning with "bunker://",
       copy it into {PLATFORM_NAME}, and you should be good to go!
-    </Text>
+    </p>
-    <Text>
+    <p>
-      If you don't have a signer yet, <Link external styled href="https://nsec.app/">nsec.app</Link>
+      If you don't have a signer yet, <Link external class="link" href="https://nsec.app/"
+        >nsec.app</Link>
       is a great way to get started. You can find more signers on <Link
         external
-        styled
+        class="link"
         href="https://nostrapps.com#signers">nostrapps.com</Link
       >.
-    </Text>
+    </p>
-    <Button variant="primary" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
-  </ModalBody>
+  </ModalBody></Modal>
-</Modal>

src/app/components/InfoHandle.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Text from "@lib/components2/Text.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
   import {PLATFORM_NAME} from "@app/env"
 </script>
 
-<Modal>
+<Modal
-  <ModalBody>
+  ><ModalBody>
     <ModalHeader>
       <ModalTitle>What is a nostr address?</ModalTitle>
     </ModalHeader>
-    <Text>
+    <p>
-      {PLATFORM_NAME} hosts spaces on the <Link external styled href="https://nostr.com/"
+      {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"
         >Nostr protocol</Link
       >. Nostr uses "nostr addresses" to make it easier for people to find you, without having to
       memorize your public key (your user id).
-    </Text>
+    </p>
-    <Text>
+    <p>
       There are several providers of nostr addresses, including several clients. You can find a list
-      and more information on <Link external styled href="https://nostr.how/en/guides/get-verified"
+      and more information on <Link
-        >nostr.how</Link
+        external
+        href="https://nostr.how/en/guides/get-verified"
+        class="underline">nostr.how</Link
       >.
-    </Text>
+    </p>
-    <Button variant="primary" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
-  </ModalBody>
+  </ModalBody></Modal>
-</Modal>

src/app/components/InfoKeys.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
   import {session} from "@welshman/app"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import KeyRecoveryRequest from "@app/components/KeyRecoveryRequest.svelte"
   import {PLATFORM_NAME} from "@app/env"
   import {pushModal} from "@app/modal"
@@ -25,36 +24,36 @@
     <ModalHeader>
       <ModalTitle>What is a private key?</ModalTitle>
     </ModalHeader>
-    <Text>
+    <p>
       Most online services keep track of users by giving them a username and password. This gives
       the service <strong>total control</strong> over their users, allowing them to ban them at any time,
       or sell their activity.
-    </Text>
+    </p>
-    <Text>
+    <p>
-      On <Link external styled href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your
+      On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your
       own identity and social data, through the magic of cryptography. The basic idea is that you
       have a
       <strong>public key</strong>, which acts as your user ID, and a
       <strong>private key</strong> which allows you to prove your identity.
-    </Text>
+    </p>
     {#if $session?.email}
-      <Text>
+      <p>
         It's very important to keep private keys safe, but this can sometimes be tricky, which is
         why {PLATFORM_NAME}
         supports a traditional account-based login for new users.
-      </Text>
+      </p>
-      <Text>If you'd like to switch to self-custody, please click below to get started.</Text>
+      <p>If you'd like to switch to self-custody, please click below to get started.</p>
     {:else}
-      <Button variant="primary" onclick={back}>Got it</Button>
+      <Button class="btn btn-primary" onclick={back}>Got it</Button>
     {/if}
   </ModalBody>
   {#if $session?.email}
     <ModalFooter>
-      <Button onclick={back}>
+      <Button class="btn btn-link" onclick={back}>
         <Icon icon={AltArrowLeft} />
         Go back
       </Button>
-      <Button variant="primary" onclick={startRecoveryRequest}>
+      <Button class="btn btn-primary" onclick={startRecoveryRequest}>
         <Icon icon={CheckCircle} />
         I want to hold my own keys
       </Button>

src/app/components/InfoNostr.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import Text from "@lib/components2/Text.svelte"
 </script>
 
 <Modal
@@ -13,21 +12,21 @@
     <ModalHeader>
       <ModalTitle>What is nostr?</ModalTitle>
     </ModalHeader>
-    <Text>
+    <p>
-      <Link external styled href="https://nostr.com/">Nostr</Link> is way to build social apps that
+      <Link external href="https://nostr.com/" class="link">Nostr</Link> is way to build social apps that
       talk to each other. Users own their social identity instead of renting it from a tech company, and
       can take it with them.
-    </Text>
+    </p>
-    <Text>
+    <p>
       If you'd like to learn more about what other apps exist in the nostr ecosystem, please visit <Link
         external
-        styled
+        class="link"
         href="https://nostrapps.com/">nostrapps.com</Link
       >.
-    </Text>
+    </p>
-    <Text>
+    <p>
       To learn more about how to manage your keys, or to set up an account, try
-      <Link external styled href="https://nosta.me/">nosta.me</Link>.
+      <Link external class="link" href="https://nosta.me/">nosta.me</Link>.
-    </Text>
+    </p>
-    <Button variant="primary" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
   </ModalBody></Modal>

src/app/components/InfoRelay.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import {PLATFORM_NAME} from "@app/env"
 </script>
 
@@ -15,19 +14,19 @@
     <ModalHeader>
       <ModalTitle>What is a relay?</ModalTitle>
     </ModalHeader>
-    <Text>
+    <p>
-      {PLATFORM_NAME} hosts spaces on the <Link external styled href="https://nostr.com/"
+      {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"
         >Nostr protocol</Link
       >. Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's
       language. This means that anyone can host their own data, making the web more decentralized
       and resilient.
-    </Text>
+    </p>
-    <Text>
+    <p>
       Different relays have different policies for access control and content retention. Be sure to
       double check that you have access to the relays you try to use by visiting their website.
-    </Text>
+    </p>
   </ModalBody>
   <ModalFooter>
-    <Button variant="primary" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
   </ModalFooter>
 </Modal>

src/app/components/InfoSignatures.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import Text from "@lib/components2/Text.svelte"
 
   const back = () => history.back()
 </script>
@@ -15,21 +14,21 @@
     <ModalHeader>
       <ModalTitle>What are digital signatures?</ModalTitle>
     </ModalHeader>
-    <Text>
+    <p>
       Most online services ask their users to trust them that they're being honest, and they usually
       are. However, traditional social media platforms have the ability to <strong
         >create forged content</strong> that can appear to be genuinely authored, but which are actually
       counterfeit.
-    </Text>
+    </p>
-    <Text>
+    <p>
-      On <Link external styled href="https://nostr.com/">Nostr</Link>, all your content is authenticated
+      On <Link external href="https://nostr.com/">Nostr</Link>, all your content is authenticated
       using <strong>digital signatures</strong>, which cryptographically tie a particular person to
       a given post or message.
-    </Text>
+    </p>
-    <Text>
+    <p>
       The result is that you don't normally have to trust service providers not to tamper with the
       information flowing through the network — instead, your client software can prove that a given
       piece of data is authentic.
-    </Text>
+    </p>
-    <Button variant="primary" onclick={back}>Got it</Button>
+    <Button class="btn btn-primary" onclick={back}>Got it</Button>
   </ModalBody></Modal>

src/app/components/InfoZapperError.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import {deriveZapperForPubkey} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
 
   const {pubkey} = $props()
@@ -23,7 +23,7 @@
       <ModalTitle>Unable to Zap</ModalTitle>
     </ModalHeader>
     <p>
-      Zapping <ProfileLink {pubkey} class="cl-text-primary" /> isn't possible right now because
+      Zapping <ProfileLink {pubkey} class="text-primary!" /> isn't possible right now because
       {#if $zapper}
         their zap receiver isn't correctly set up.
       {:else}
@@ -32,7 +32,7 @@
     </p>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>

src/app/components/InputProfilePicture.svelte

@@ -4,7 +4,7 @@
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import {uploadFile} from "@app/uploads"
 
   interface Props {
@@ -79,28 +79,29 @@
   <label
     for={id}
     aria-label="Drag and drop files here."
-    style="background-image: url({url}); background-color: var(--cl-bg-alt); border-color: {active
+    style="background-image: url({url});"
-      ? 'var(--cl-primary)'
+    class="avatar-blob relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center border-2 border-dashed border-primary/40 bg-base-300 bg-cover bg-center transition-all motion-safe:hover:rotate-1 motion-safe:hover:scale-[1.02]"
-      : 'var(--cl-border)'};"
-    class="relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-solid bg-cover bg-center transition-all"
     class:transparent={!url}
+    class:border-solid={url || active}
+    class:border-primary={active}
     ondragenter={stopPropagation(preventDefault(onDragEnter))}
     ondragover={stopPropagation(preventDefault(onDragOver))}
     ondragleave={stopPropagation(preventDefault(onDragLeave))}
     ondrop={stopPropagation(preventDefault(onDrop))}>
     <div
-      class="absolute right-0 top-0 h-5 w-5 overflow-hidden rounded-full"
+      class="absolute right-0 top-0 h-5 w-5 overflow-hidden rounded-full bg-primary"
-      style="background-color: {url ? 'var(--cl-danger)' : 'var(--cl-primary)'};">
+      class:bg-error={url}
+      class:bg-primary={!url}>
       {#if url}
         <span
           role="button"
           tabindex="-1"
           onmousedown={stopPropagation(onClear)}
           ontouchstart={stopPropagation(onClear)}>
-          <Icon icon={CloseCircle} class="scale-150 cl-surface-alt" />
+          <Icon icon={CloseCircle} class="scale-150 bg-base-300!" />
         </span>
       {:else}
-        <Icon icon={AddCircle} class="scale-150 cl-surface-alt" />
+        <Icon icon={AddCircle} class="scale-150 bg-base-300!" />
       {/if}
     </div>
     {#if !url}

src/app/components/KeyDownload.svelte

@@ -7,14 +7,14 @@
   import ArrowDown from "@assets/icons/arrow-down.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components2/Field.svelte"
+  import Field from "@lib/components/Field.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast} from "@app/toast"
   import {PLATFORM_NAME} from "@app/env"
@@ -129,9 +129,9 @@
           Password*
         {/snippet}
         {#snippet input()}
-          <label class="input-cl input-cl-group w-full">
+          <label class="input input-bordered flex w-full items-center gap-2">
             <Icon icon={Key} />
-            <input bind:value={password} onchange={onPasswordChange} type="password" />
+            <input bind:value={password} onchange={onPasswordChange} class="grow" type="password" />
           </label>
         {/snippet}
         {#snippet info()}
@@ -139,12 +139,12 @@
         {/snippet}
       </Field>
     {/if}
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col">
-      <Button variant={didDownload ? "secondary" : "primary"} onclick={downloadKey}>
+      <Button class="btn {didDownload ? 'btn-neutral' : 'btn-primary'}" onclick={downloadKey}>
         Download my key
         <Icon icon={ArrowDown} />
       </Button>
-      <Button variant="ghost" onclick={toggleUsePassword}>
+      <Button class="btn btn-link no-underline" onclick={toggleUsePassword}>
         {#if usePassword}
           Nevermind, I want to download the plain version
         {:else}
@@ -157,11 +157,11 @@
     <ProgressBar current={step} total={totalSteps} />
   {/if}
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button disabled={!didDownload} variant="primary" type="submit">
+    <Button disabled={!didDownload} class="btn btn-primary" type="submit">
       {submitText}
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/KeyRecoveryConfirm.svelte

@@ -6,16 +6,16 @@
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import StringMultiInput from "@lib/components2/StringMultiInput.svelte"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import KeyDownload from "@app/components/KeyDownload.svelte"
   import {pushToast} from "@app/toast"
   import {pushModal, clearModals} from "@app/modal"
@@ -87,11 +87,11 @@
     <StringMultiInput bind:value={otps} placeholder="Enter your recovery codes..." />
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading || otps.length < 2}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 2}>
       <Spinner {loading}>Confirm recovery</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/KeyRecoveryRequest.svelte

@@ -5,15 +5,15 @@
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushModal} from "@app/modal"
   import KeyRecoveryConfirm from "@app/components/KeyRecoveryConfirm.svelte"
 
@@ -59,11 +59,11 @@
     </p>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Request recovery</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/Landing.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
   import Login from "@assets/icons/login-3.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import CardButton from "@lib/components2/CardButton.svelte"
+  import CardButton from "@lib/components/CardButton.svelte"
-  import Heading from "@lib/components2/Heading.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import LogIn from "@app/components/LogIn.svelte"
   import SignUp from "@app/components/SignUp.svelte"
-  import {PLATFORM_TERMS, PLATFORM_PRIVACY, PLATFORM_NAME} from "@app/env"
+  import {PLATFORM_TERMS, PLATFORM_PRIVACY, PLATFORM_NAME, PLATFORM_LOGO} from "@app/env"
   import {pushModal} from "@app/modal"
 
   const logIn = () => pushModal(LogIn)
@@ -21,12 +19,18 @@
 
 <Modal>
   <ModalBody>
-    <div class="py-2">
+    <div class="flex flex-col items-center gap-3 py-2">
-      <Heading level={1} class="text-center">Welcome to {PLATFORM_NAME}!</Heading>
+      <img
-      <Text class="text-center">The chat app built for self-hosted communities.</Text>
+        src={PLATFORM_LOGO}
+        alt={PLATFORM_NAME}
+        class="shadow-soft ring-primary/20 size-16 rounded-2xl object-cover ring-4 motion-safe:animate-float" />
+      <h1 class="heading">Welcome to <span class="brand">{PLATFORM_NAME}</span>!</h1>
+      <p class="max-w-sm text-center opacity-80">
+        A cozy home for your community — chat, connect, and own your little corner of the internet.
+      </p>
     </div>
-    <Button onclick={logIn} block class="!p-0">
+    <Button onclick={logIn}>
-      <CardButton>
+      <CardButton class="btn-primary">
         {#snippet icon()}
           <div><Icon icon={Login} size={7} /></div>
         {/snippet}
@@ -38,7 +42,7 @@
         {/snippet}
       </CardButton>
     </Button>
-    <Button onclick={signUp} block class="!p-0">
+    <Button onclick={signUp} class="btn-neutral">
       <CardButton>
         {#snippet icon()}
           <div><Icon icon={AddCircle} size={7} /></div>
@@ -51,10 +55,10 @@
         {/snippet}
       </CardButton>
     </Button>
-    <Text size="sm" muted class="text-center">
+    <p class="text-center text-xs opacity-75">
       By using {PLATFORM_NAME}, you consent to our
-      <Link external styled href={PLATFORM_TERMS}>Terms of Service</Link> and
+      <Link external class="link" href={PLATFORM_TERMS}>Terms of Service</Link> and
-      <Link external styled href={PLATFORM_PRIVACY}>Privacy Policy</Link>.
+      <Link external class="link" href={PLATFORM_PRIVACY}>Privacy Policy</Link>.
-    </Text>
+    </p>
   </ModalBody>
 </Modal>

src/app/components/LogIn.svelte

@@ -8,13 +8,11 @@
   import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
   import Compass from "@assets/icons/compass-big.svg?dataurl"
   import Key from "@assets/icons/key.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Heading from "@lib/components2/Heading.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
   import LogInBunker from "@app/components/LogInBunker.svelte"
@@ -96,17 +94,16 @@
 
 <Modal>
   <ModalBody>
-    <Heading level={1} class="text-center">Log in with Nostr</Heading>
+    <h1 class="heading">Log in with Nostr</h1>
-    <Text class="m-auto max-w-sm text-center">
+    <p class="m-auto max-w-sm text-center">
       {PLATFORM_NAME} is built using the
-      <Button variant="ghost" class="inline cl-link" onclick={() => pushModal(InfoNostr)}
+      <Button class="link" onclick={() => pushModal(InfoNostr)}>nostr protocol</Button>, which
-        >nostr protocol</Button
+      allows you to own your social identity.
-      >, which allows you to own your social identity.
+    </p>
-    </Text>
     {#if getNip07()}
-      <Button variant="primary" block {disabled} onclick={loginWithNip07}>
+      <Button {disabled} onclick={loginWithNip07} class="btn btn-primary">
         {#if loading === "nip07"}
-          <span class="cl-spinner mr-3"></span>
+          <span class="loading loading-spinner mr-3"></span>
         {:else}
           <Icon icon={Widget} />
         {/if}
@@ -114,9 +111,9 @@
       </Button>
     {/if}
     {#each signers as app}
-      <Button variant="primary" block {disabled} onclick={() => loginWithNip55(app)}>
+      <Button {disabled} class="btn btn-primary" onclick={() => loginWithNip55(app)}>
         {#if loading === "nip55"}
-          <span class="cl-spinner mr-3"></span>
+          <span class="loading loading-spinner mr-3"></span>
         {:else}
           <img src={app.iconUrl} alt={app.name} width="20" height="20" />
         {/if}
@@ -124,27 +121,26 @@
       </Button>
     {/each}
     {#if hasPomade && !hasSigner}
-      <Button variant="primary" block {disabled} onclick={loginWithEmail}>
+      <Button {disabled} onclick={loginWithEmail} class="btn btn-primary">
         <Icon icon={Letter} />
         Log in with Email
       </Button>
     {/if}
     <Button
-      variant={hasSigner || hasPomade ? "secondary" : "primary"}
-      block
       onclick={loginWithBunker}
-      {disabled}>
+      {disabled}
+      class="btn {hasSigner || hasPomade ? 'btn-neutral' : 'btn-primary'}">
       <Icon icon={Cpu} />
       Log in with Remote Signer
     </Button>
     {#if hasPomade && hasSigner}
-      <Button variant="ghost" block {disabled} onclick={loginWithEmail}>
+      <Button {disabled} onclick={loginWithEmail} class="btn">
         <Icon icon={Letter} />
         Log in with Email
       </Button>
     {/if}
     {#if !hasSigner}
-      <Button variant="secondary" block {disabled} onclick={loginWithKey}>
+      <Button {disabled} onclick={loginWithKey} class="btn btn-neutral">
         <Icon icon={Key} />
         Log in with Key
       </Button>
@@ -154,14 +150,14 @@
         external
         {disabled}
         href="https://nostrapps.com#signers"
-        class="btn-cl btn-cl-block {hasSigner || hasPomade ? 'btn-cl-ghost' : 'btn-cl-secondary'}">
+        class="btn {hasSigner || hasPomade ? '' : 'btn-neutral'}">
         <Icon icon={Compass} />
         Browse Signer Apps
       </Link>
     {/if}
-    <Text size="sm">
+    <div class="text-sm">
       Need an account?
-      <Button variant="ghost" class="inline cl-link" onclick={signUp}>Register instead</Button>
+      <Button class="link" onclick={signUp}>Register instead</Button>
-    </Text>
+    </div>
   </ModalBody>
 </Modal>

src/app/components/LogInBunker.svelte

@@ -6,17 +6,17 @@
   import {makeSecret} from "@welshman/util"
   import {loginWithNip01, loginWithNip46} from "@welshman/app"
   import {preventDefault} from "@lib/html"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import BunkerConnect from "@app/components/BunkerConnect.svelte"
   import BunkerUrl from "@app/components/BunkerUrl.svelte"
   import {Nip46Controller} from "@app/nip46"
@@ -151,20 +151,20 @@
       <BunkerConnect {controller} />
     {:else}
       <BunkerUrl {controller} />
-      <Button variant={$bunker ? "secondary" : "primary"} onclick={selectConnect}
+      <Button class="btn {$bunker ? 'btn-neutral' : 'btn-primary'}" onclick={selectConnect}
         >Log in with a QR code instead</Button>
       {#if isIos}
-        <Button variant="secondary" onclick={openSigner}>Open in Signer</Button>
+        <Button class="btn btn-neutral" onclick={openSigner}>Open in Signer</Button>
       {/if}
     {/if}
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={$loading}>
+    <Button class="btn btn-link" onclick={back} disabled={$loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     {#if mode === "bunker"}
-      <Button type="submit" variant="primary" disabled={$loading || !$bunker}>
+      <Button type="submit" class="btn btn-primary" disabled={$loading || !$bunker}>
         <Spinner loading={$loading}>Next</Spinner>
         <Icon icon={AltArrowRight} />
       </Button>

src/app/components/LogInEmail.svelte

@@ -2,20 +2,20 @@
   import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
   import {preventDefault} from "@lib/html"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Key from "@assets/icons/key.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTP from "@app/components/LogInOTP.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/pomade"
@@ -96,9 +96,9 @@
         <p>Email*</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input type="email" class="input-cl-bare" bind:value={email} />
+          <input type="email" bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>
@@ -107,24 +107,24 @@
         <p>Password*</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Key} />
-          <input type="password" class="input-cl-bare" bind:value={password} />
+          <input type="password" bind:value={password} />
         </label>
       {/snippet}
     </FieldInline>
     <p class="text-sm">
-      Forgot your password? <Button class="cl-link p-0" onclick={loginWithOTP}
+      Forgot your password? <Button class="link" onclick={loginWithOTP}
         >Log in with a one-time access code</Button
       >.
     </p>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading || !email || !password}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || !email || !password}>
       <Spinner {loading}>Log in</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogInKey.svelte

@@ -4,22 +4,21 @@
   import {decrypt} from "nostr-tools/nip49"
   import {preventDefault} from "@lib/html"
   import {nsecDecode} from "@lib/util"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Alert from "@lib/components2/Alert.svelte"
   import Key from "@assets/icons/key.svg?dataurl"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {clearModals} from "@app/modal"
   import {setChecked} from "@app/notifications"
   import {pushToast} from "@app/toast"
@@ -86,7 +85,7 @@
         <p>Your Key*</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group w-full">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Key} />
           <input type="password" bind:value={keyInput} placeholder="nsec1..." />
         </label>
@@ -98,31 +97,31 @@
           <p>Password*</p>
         {/snippet}
         {#snippet input()}
-          <label class="input-cl input-cl-group w-full">
+          <label class="input input-bordered flex w-full items-center gap-2">
             <Icon icon={Key} />
             <input type="password" bind:value={password} placeholder="Your password" />
           </label>
         {/snippet}
       </FieldInline>
     {/if}
-    <Alert variant="warning" class="flex-col text-sm">
+    <div class="card2 card2-sm bg-alt flex flex-col gap-2 text-sm">
       <strong class="flex items-center gap-2">
         <Icon icon={Danger} />
         Please note!
       </strong>
       <p>
         Logging in this way is not a best practice. For better security, please consider using a
-        <Link external styled href="https://nostrapps.com#signers">signer app</Link>
+        <Link external href="https://nostrapps.com#signers" class="link">signer app</Link>
         to keep your keys safe.
       </p>
-    </Alert>
+    </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={!canSubmit}>
+    <Button type="submit" class="btn btn-primary" disabled={!canSubmit}>
       <Spinner {loading}>Log in</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogInOTP.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import {Client} from "@pomade/core"
   import {preventDefault} from "@lib/html"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTPConfirm from "@app/components/LogInOTPConfirm.svelte"
   import {POMADE_NETWORK_ERROR_MESSAGE} from "@app/pomade"
   import {pushModal} from "@app/modal"
@@ -69,7 +69,7 @@
         <p>Email*</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group w-full">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
           <input type="email" bind:value={email} />
         </label>
@@ -77,11 +77,11 @@
     </FieldInline>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading || !email}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || !email}>
       <Spinner {loading}>Log in</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogInOTPConfirm.svelte

@@ -2,18 +2,18 @@
   import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
   import {preventDefault} from "@lib/html"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import StringMultiInput from "@lib/components2/StringMultiInput.svelte"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
   import {pushModal, clearModals} from "@app/modal"
   import {setChecked} from "@app/notifications"
@@ -99,11 +99,11 @@
     <StringMultiInput bind:value={otps} placeholder="Enter your login codes..." />
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading || otps.length < 3}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 3}>
       <Spinner {loading}>Log In</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogInSelect.svelte

@@ -2,16 +2,16 @@
   import type {AccountOption} from "@pomade/core"
   import {Client} from "@pomade/core"
   import {uniqBy} from "@welshman/lib"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/pomade"
   import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/pomade"
@@ -73,17 +73,16 @@
     <div class="flex flex-col gap-2">
       {#each uniqBy(o => o.pubkey, options) as option (option.pubkey)}
         <Button
-          variant="secondary"
           onclick={() => selectAccount(option)}
           disabled={loading}
-          class="flex w-full items-center p-3 text-left">
+          class="card2 bg-alt flex w-full items-center p-3 text-left">
-          <Profile inert pubkey={option.pubkey} />
+          <Profile pubkey={option.pubkey} />
         </Button>
       {/each}
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>

src/app/components/LogOut.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import {logout} from "@app/session"
 
   const back = () => history.back()
@@ -33,14 +32,14 @@
     <ModalHeader>
       <ModalTitle>Are you sure you want<br />to log out?</ModalTitle>
     </ModalHeader>
-    <Text class="text-center">Your local database will be cleared.</Text>
+    <p class="text-center">Your local database will be cleared.</p>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Log Out</Spinner>
     </Button>
   </ModalFooter>

src/app/components/MenuSettings.svelte

@@ -6,12 +6,11 @@
   import Shield from "@assets/icons/shield-minimalistic.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import Wallet from "@assets/icons/wallet.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Grid from "@lib/components2/Grid.svelte"
   import Profile from "@app/components/Profile.svelte"
   import LogOut from "@app/components/LogOut.svelte"
   import {pushModal} from "@app/modal"
@@ -29,11 +28,11 @@
           <Profile inert pubkey={$pubkey} />
         </Link>
       {/if}
-      <Grid cols={3} gap={3} class="w-full">
+      <div class="grid grid-cols-3 gap-3 w-full">
         <Link
           replaceState
           href="/settings/alerts"
-          class="clay-card clay-card-sm clay-card-interactive aspect-square flex flex-col gap-2 items-center justify-center text-center p-3 cl-text">
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
           <Icon icon={Bell} size={5} />
           Alerts
         </Link>
@@ -41,7 +40,7 @@
           <Link
             replaceState
             href="/settings/wallet"
-            class="clay-card clay-card-sm clay-card-interactive aspect-square flex flex-col gap-2 items-center justify-center text-center p-3 cl-text">
+            class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
             <Icon icon={Wallet} size={5} />
             Wallet
           </Link>
@@ -49,29 +48,29 @@
         <Link
           replaceState
           href="/settings/relays"
-          class="clay-card clay-card-sm clay-card-interactive aspect-square flex flex-col gap-2 items-center justify-center text-center p-3 cl-text">
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
           <Icon icon={Server} size={5} />
           Relays
         </Link>
         <Link
           replaceState
           href="/settings/content"
-          class="clay-card clay-card-sm clay-card-interactive aspect-square flex flex-col gap-2 items-center justify-center text-center p-3 cl-text">
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
           <Icon icon={GalleryMinimalistic} size={5} />
           Content
         </Link>
         <Link
           replaceState
           href="/settings/privacy"
-          class="clay-card clay-card-sm clay-card-interactive aspect-square flex flex-col gap-2 items-center justify-center text-center p-3 cl-text">
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
           <Icon icon={Shield} size={5} />
           Privacy
         </Link>
-      </Grid>
+      </div>
       <div class="flex gap-3 items-center opacity-75 text-sm">
         <Button onclick={toggleTheme}>Theme</Button>
         /
-        <Link replaceState styled href="/settings/about">About</Link>
+        <Link replaceState href="/settings/about">About</Link>
         /
         <Button onclick={logout}>Log Out</Button>
       </div>

src/app/components/ModalContainer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount, mount, unmount} from "svelte"
-  import Drawer from "@lib/components2/Drawer.svelte"
+  import Drawer from "@lib/components/Drawer.svelte"
-  import Dialog from "@lib/components2/Dialog.svelte"
+  import Dialog from "@lib/components/Dialog.svelte"
   import {modal, modalStack, popModal} from "@app/modal"
 
   const closeModal = () => {

src/app/components/NoteCard.svelte

@@ -4,9 +4,8 @@
   import {formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Row from "@lib/components2/Row.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import {goToEvent} from "@app/routes"
@@ -40,11 +39,11 @@
 <div class="flex flex-col gap-2 {restProps.class}" class:shadow-md={!noShadow}>
   {#if muted}
     <div class="flex items-center justify-between">
-      <Row class="relative">
+      <div class="row-2 relative">
         <Icon icon={Danger} class="mt-1" />
         <p>You have muted this person.</p>
-      </Row>
+      </div>
-      <Button class="cl-link ml-8" onclick={ignoreMute}>Show anyway</Button>
+      <Button class="link ml-8" onclick={ignoreMute}>Show anyway</Button>
     </div>
   {:else}
     <div class="flex items-start justify-between gap-2">

src/app/components/NoteContentClassified.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
   import {getTag, getTagValue, getTagValues} from "@welshman/util"
-  import CurrencySymbol from "@lib/components2/CurrencySymbol.svelte"
+  import CurrencySymbol from "@lib/components/CurrencySymbol.svelte"
   import Content from "@app/components/Content.svelte"
   import ContentLinkBlock from "@app/components/ContentLinkBlock.svelte"
 

src/app/components/NoteContentEventTime.svelte

@@ -11,8 +11,8 @@
   <CalendarEventDate event={props.event} />
   <div class="flex grow flex-col">
     <CalendarEventHeader event={props.event} />
-    <div class="flex py-2">
+    <div class="flex py-2 opacity-50">
-      <div class="cl-divider-soft grow"></div>
+      <div class="h-px grow bg-base-content opacity-25"></div>
     </div>
     <Content {...props} />
   </div>

src/app/components/NoteContentMinimalEventTime.svelte

@@ -7,10 +7,7 @@
     formatTimestampAsTime,
   } from "@welshman/lib"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Row from "@lib/components2/Row.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
 
   const props: ComponentProps<typeof ContentMinimal> = $props()
@@ -19,21 +16,21 @@
   const end = $derived(parseInt(meta.end))
 </script>
 
-<Col>
+<div class="flex flex-col">
   <div class="flex grow flex-wrap justify-between gap-2">
-    <Text size="sm">{meta.title || meta.name}</Text>
+    <p class="text-sm">{meta.title || meta.name}</p>
     {#if !isNaN(start) && !isNaN(end)}
       {@const startDateDisplay = formatTimestampAsDate(start)}
       {@const endDateDisplay = formatTimestampAsDate(end)}
       {@const isSingleDay = startDateDisplay === endDateDisplay}
-      <Row>
+      <div class="flex items-center gap-2">
         <Icon icon={ClockCircle} size={4} />
         <span class="hidden sm:block">{formatTimestampAsDate(start)}</span>
         {formatTimestampAsTime(start)} — {isSingleDay
           ? formatTimestampAsTime(end)
           : formatTimestamp(end)}
-      </Row>
+      </div>
     {/if}
   </div>
   <ContentMinimal {...props} />
-</Col>
+</div>

src/app/components/NoteContentMinimalGoal.svelte

@@ -6,9 +6,7 @@
   import {deriveItemsByKey, deriveArray} from "@welshman/store"
   import {repository, getValidZap} from "@welshman/app"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Row from "@lib/components2/Row.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
 
   const props: ComponentProps<typeof ContentMinimal> = $props()
@@ -31,9 +29,9 @@
 
 <div class="flex justify-between">
   <span class="text-sm">{props.event.content}</span>
-  <Row gap={1}>
+  <div class="flex items-center gap-1">
     <Icon icon={Bolt} size={4} />
     {zapAmount}/{goalAmount} sats funded
-  </Row>
+  </div>
 </div>
 <ContentMinimal {...props} event={fakeEvent} />

src/app/components/NoteContentMinimalPoll.svelte

@@ -3,8 +3,6 @@
   import {derived} from "svelte/store"
   import {POLL_RESPONSE} from "@welshman/util"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import {deriveEvents} from "@app/repository"
   import {getPollResults} from "@app/polls"
 
@@ -15,7 +13,7 @@
   const results = derived(responses, $responses => getPollResults(props.event, $responses))
 </script>
 
-<Col gap={0}>
+<div class="flex flex-col gap-0">
   <ContentMinimal {...props} />
-  <Text size="xs" subtle>{$results.voters} voter{$results.voters === 1 ? "" : "s"}</Text>
+  <span class="text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</span>
-</Col>
+</div>

src/app/components/NoteContentMinimalThread.svelte

@@ -2,7 +2,6 @@
   import type {ComponentProps} from "svelte"
   import {getTagValue} from "@welshman/util"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
-  import Text from "@lib/components2/Text.svelte"
 
   const props: ComponentProps<typeof ContentMinimal> = $props()
 
@@ -10,7 +9,7 @@
 </script>
 
 {#if title}
-  <Text size="sm">{title}</Text>
+  <span class="text-sm">{title}</span>
 {/if}
 {#if props.event.content}
   <ContentMinimal {...props} />

src/app/components/NoteContentPoll.svelte

@@ -5,7 +5,6 @@
   import {POLL_RESPONSE} from "@welshman/util"
   import PollVotes from "@app/components/PollVotes.svelte"
   import Content from "@app/components/Content.svelte"
-  import Col from "@lib/components2/Col.svelte"
 
   const props: ComponentProps<typeof Content> = $props()
 
@@ -21,10 +20,10 @@
   })
 </script>
 
-<Col gap={3}>
+<div class="flex flex-col gap-3">
   <Content event={props.event} showEntire url={props.url} />
 
   {#if props.url}
     <PollVotes url={props.url} event={props.event} />
   {/if}
-</Col>
+</div>

src/app/components/NoteContentThread.svelte

@@ -2,19 +2,17 @@
   import type {ComponentProps} from "svelte"
   import {getTagValue} from "@welshman/util"
   import Content from "@app/components/Content.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Text from "@lib/components2/Text.svelte"
 
   const props: ComponentProps<typeof Content> = $props()
 
   const title = getTagValue("title", props.event.tags)
 </script>
 
-<Col gap={2}>
+<div class="flex flex-col gap-2">
   {#if title}
-    <Text size="xl">{title}</Text>
+    <p class="text-xl">{title}</p>
   {/if}
   {#if props.event.content}
     <Content {...props} />
   {/if}
-</Col>
+</div>

src/app/components/NoteItem.svelte

@@ -4,8 +4,8 @@
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {Router} from "@welshman/router"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import EmojiButton from "@lib/components2/EmojiButton.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
@@ -40,11 +40,11 @@
     })
 </script>
 
-<NoteCard {event} {url} class="cv clay-card cl-surface-alt p-4">
+<NoteCard {event} {url} class="cv card2 bg-alt">
   <NoteContent {event} expandMode="inline" />
   <div class="flex w-full justify-between gap-2">
-    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="cl-tip-right">
+    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-right">
-      <EmojiButton {onEmoji} variant="secondary" size="sm" circle>
+      <EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">
         <Icon icon={SmileCircle} size={4} />
       </EmojiButton>
     </ReactionSummary>

src/app/components/PasswordReset.svelte

@@ -5,16 +5,16 @@
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import StringMultiInput from "@lib/components2/StringMultiInput.svelte"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import PasswordResetConfirm from "@app/components/PasswordResetConfirm.svelte"
   import {pushToast} from "@app/toast"
   import {pushModal} from "@app/modal"
@@ -94,11 +94,11 @@
     <StringMultiInput bind:value={otps} placeholder="Enter your confirmation codes..." />
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading || otps.length < 2}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 2}>
       <Spinner {loading}>Continue</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/PasswordResetConfirm.svelte

@@ -6,16 +6,16 @@
   import Key from "@assets/icons/key.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {loginWithPomade, deleteCurrentPomadeSession} from "@app/pomade"
   import {clearModals} from "@app/modal"
   import {pushToast} from "@app/toast"
@@ -98,7 +98,7 @@
         <p>New Password*</p>
       {/snippet}
       {#snippet input()}
-        <label class="input-cl input-cl-group w-full">
+        <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Key} />
           <input type="password" bind:value={password} />
         </label>
@@ -106,11 +106,11 @@
     </FieldInline>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button variant="primary" type="submit" disabled={loading || !password}>
+    <Button class="btn btn-primary" type="submit" disabled={loading || !password}>
       <Spinner {loading}>Continue</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/PeopleItem.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import UserCircle from "@assets/icons/user-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Card from "@lib/components2/Card.svelte"
-  import Col from "@lib/components2/Col.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
@@ -20,20 +18,18 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
 </script>
 
-<Card>
+<div class="card2 bg-alt flex flex-col gap-4 shadow-md">
-  <Col gap={4}>
+  <div class="flex justify-between">
-    <div class="flex justify-between">
+    <Profile {pubkey} {url} />
-      <Profile {pubkey} {url} />
+    <Button onclick={openProfile} class="btn btn-primary hidden sm:flex">
-      <Button onclick={openProfile} variant="primary" class="hidden sm:flex">
-        <Icon icon={UserCircle} />
-        View Profile
-      </Button>
-    </div>
-    <ProfileInfo {pubkey} {url} />
-    <ProfileBadges {pubkey} {url} />
-    <Button onclick={openProfile} variant="primary" class="sm:hidden">
       <Icon icon={UserCircle} />
       View Profile
     </Button>
-  </Col>
+  </div>
-</Card>
+  <ProfileInfo {pubkey} {url} />
+  <ProfileBadges {pubkey} {url} />
+  <Button onclick={openProfile} class="btn btn-primary sm:hidden">
+    <Icon icon={UserCircle} />
+    View Profile
+  </Button>
+</div>

src/app/components/PollCreate.svelte

@@ -7,22 +7,18 @@
   import HamburgerMenu from "@assets/icons/hamburger-menu.svg?dataurl"
   import PlusCircle from "@assets/icons/add-circle.svg?dataurl"
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
-  import Icon from "@lib/components2/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
-  import Col from "@lib/components2/Col.svelte"
+  import Field from "@lib/components/Field.svelte"
-  import Row from "@lib/components2/Row.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Field from "@lib/components2/Field.svelte"
+  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
-  import FieldInline from "@lib/components2/FieldInline.svelte"
+  import Button from "@lib/components/Button.svelte"
-  import Input from "@lib/components2/Input.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
-  import Select from "@lib/components2/Select.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import DateTimeInput from "@lib/components2/DateTimeInput.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import Button from "@lib/components2/Button.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import Spinner from "@lib/components2/Spinner.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ModalHeader from "@lib/components2/ModalHeader.svelte"
+  import Modal from "@lib/components/Modal.svelte"
-  import ModalTitle from "@lib/components2/ModalTitle.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components2/ModalFooter.svelte"
-  import Modal from "@lib/components2/Modal.svelte"
-  import ModalBody from "@lib/components2/ModalBody.svelte"
   import {pushToast} from "@app/toast"
   import {PROTECTED, publishRoomQuote} from "@app/groups"
   import {canEnforceNip70} from "@app/relays"
@@ -192,18 +188,21 @@
       <ModalTitle>Create a Poll</ModalTitle>
       <ModalSubtitle>Ask a question and collect votes right in the feed.</ModalSubtitle>
     </ModalHeader>
-    <Col gap={8} class="relative">
+    <div class="col-8 relative">
       <Field>
         {#snippet label()}
           <p>Question*</p>
         {/snippet}
         {#snippet input()}
-          <!-- svelte-ignore a11y_autofocus -->
+          <label class="input input-bordered flex w-full items-center gap-2">
-          <Input
+            <!-- svelte-ignore a11y_autofocus -->
-            autofocus={!isMobile}
+            <input
-            bind:value={title}
+              autofocus={!isMobile}
-            type="text"
+              bind:value={title}
-            placeholder="What would you like to ask?" />
+              class="grow"
+              type="text"
+              placeholder="What would you like to ask?" />
+          </label>
         {/snippet}
       </Field>
 
@@ -212,7 +211,7 @@
           <p>Options*</p>
         {/snippet}
         {#snippet input()}
-          <Col gap={2} role="list">
+          <div class="flex flex-col gap-2" role="list">
             {#each options as option, index (option.id)}
               <div
                 class="flex items-center gap-2"
@@ -225,34 +224,37 @@
                 <div class="cursor-move opacity-70" aria-label="Drag handle">
                   <Icon icon={HamburgerMenu} size={4} />
                 </div>
-                <Input
+                <label class="input input-bordered flex w-full items-center gap-2">
-                  value={option.value}
+                  <input
-                  type="text"
+                    value={option.value}
-                  placeholder={`Option ${index + 1}`}
+                    class="grow"
-                  oninput={e => updateOption(option.id, e.currentTarget.value)} />
+                    type="text"
-                <Button variant="ghost" size="sm" onclick={() => removeOption(option.id)}>
+                    placeholder={`Option ${index + 1}`}
+                    oninput={e => updateOption(option.id, e.currentTarget.value)} />
+                </label>
+                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(option.id)}>
                   <Icon icon={MinusCircle} size={4} />
                 </Button>
               </div>
             {/each}
-            <Button variant="secondary" size="sm" class="self-end" onclick={addOption}>
+            <Button class="btn btn-outline btn-sm self-end" onclick={addOption}>
               <Icon icon={PlusCircle} size={4} />
               Add option
             </Button>
-          </Col>
+          </div>
         {/snippet}
       </Field>
 
-      <Col gap={2}>
+      <div class="flex flex-col gap-2">
         <FieldInline>
           {#snippet label()}
             Poll type
           {/snippet}
           {#snippet input()}
-            <Select class="w-full max-w-xs" bind:value={pollType}>
+            <select class="select select-bordered w-full max-w-xs" bind:value={pollType}>
               <option value="singlechoice">Single choice</option>
               <option value="multiplechoice">Multiple choice</option>
-            </Select>
+            </select>
           {/snippet}
         </FieldInline>
         <FieldInline>
@@ -263,15 +265,15 @@
             <DateTimeInput bind:value={endsAt} />
           {/snippet}
         </FieldInline>
-      </Col>
+      </div>
-    </Col>
+    </div>
   </ModalBody>
   <ModalFooter>
-    <Button variant="ghost" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" variant="primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Create Poll</Spinner>
     </Button>
   </ModalFooter>

src/app/components/PollItem.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
-  import Link from "@lib/components2/Link.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import Col from "@lib/components2/Col.svelte"
-  import Text from "@lib/components2/Text.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import RoomLink from "@app/components/RoomLink.svelte"
@@ -20,17 +18,17 @@
   const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="clay-card w-full cursor-pointer p-4 sm:p-6" href={makePollPath(url, event.id)}>
+<Link
-  <Col>
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
-    <NoteContent {event} {url} />
+  href={makePollPath(url, event.id)}>
-    <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
+  <NoteContent {event} {url} />
-      <Text size="sm" muted class="whitespace-nowrap py-1">
+  <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-        Posted by <ProfileLink pubkey={event.pubkey} {url} />
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
-        {#if h}
+      Posted by <ProfileLink pubkey={event.pubkey} {url} />
-          in <RoomLink {url} {h} />
+      {#if h}
-        {/if}
+        in <RoomLink {url} {h} />
-      </Text>
+      {/if}
-      <CommentActions segment="polls" showActivity {url} {event} />
+    </span>
-    </div>
+    <CommentActions segment="polls" showActivity {url} {event} />
-  </Col>
+  </div>
 </Link>