rimelight-components 2.1.37 → 2.1.39

package/dist/runtime/components/dashboard/customers/AddModal.vue

@@ -0,0 +1,45 @@
+<script setup>
+import * as z from "zod";
+import {} from "@nuxt/ui";
+import { useToast } from "@nuxt/ui/composables";
+import { ref, reactive } from "vue";
+const schema = z.object({
+  name: z.string().min(2, "Too short"),
+  email: z.string().email("Invalid email")
+});
+const open = ref(false);
+const state = reactive({
+  name: void 0,
+  email: void 0
+});
+const toast = useToast();
+async function onSubmit(event) {
+  toast.add({
+    title: "Success",
+    description: `New customer ${event.data.name} added`,
+    color: "success"
+  });
+  open.value = false;
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="New customer" description="Add a new customer to the database">
+    <UButton label="New customer" icon="lucide:plus" />
+
+    <template #body>
+      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+        <UFormField label="Name" placeholder="John Doe" name="name">
+          <UInput v-model="state.name" class="w-full" />
+        </UFormField>
+        <UFormField label="Email" placeholder="john.doe@example.com" name="email">
+          <UInput v-model="state.email" class="w-full" />
+        </UFormField>
+        <div class="flex justify-end gap-2">
+          <UButton label="Cancel" color="neutral" variant="subtle" @click="open = false" />
+          <UButton label="Create" color="primary" variant="solid" type="submit" />
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/dashboard/customers/AddModal.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/dashboard/customers/DeleteModal.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    count?: number;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dashboard/customers/DeleteModal.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from "vue";
+const { count = 0 } = defineProps({
+  count: { type: Number, required: false }
+});
+const open = ref(false);
+async function onSubmit() {
+  await new Promise((resolve) => setTimeout(resolve, 1e3));
+  open.value = false;
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="`Delete ${count} customer${count > 1 ? 's' : ''}`"
+    :description="`Are you sure, this action cannot be undone.`"
+  >
+    <slot />
+
+    <template #body>
+      <div class="flex justify-end gap-2">
+        <UButton label="Cancel" color="neutral" variant="subtle" @click="open = false" />
+        <UButton label="Delete" color="error" variant="solid" loading-auto @click="onSubmit" />
+      </div>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/dashboard/customers/DeleteModal.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    count?: number;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dashboard/floating-tools/FocusTimerTool.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/dashboard/floating-tools/FocusTimerTool.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useFocusTimer } from "~/src/runtime/composables";
+const focusTimer = useFocusTimer();
+</script>
+
+<template>
+  <div class="flex flex-col gap-sm">
+    <UProgress :model-value="focusTimer.progress.value" size="sm" color="primary" />
+
+    <div class="flex flex-col items-center">
+      <div class="text-4xl font-bold tabular-nums">
+        {{ focusTimer.formattedTime.value }}
+      </div>
+      <div class="text-md text-muted uppercase">
+        {{ focusTimer.mode.value.replace("-", " ") }}
+      </div>
+    </div>
+
+    <div class="flex items-center gap-sm">
+      <UButton
+        :icon="focusTimer.isRunning.value ? 'lucide:pause' : 'lucide:play'"
+        :label="focusTimer.isRunning.value ? 'Pause' : 'Start'"
+        :color="focusTimer.isRunning.value ? 'warning' : 'primary'"
+        block
+        size="sm"
+        @click="focusTimer.isRunning.value ? focusTimer.pauseTimer() : focusTimer.startTimer()"
+      />
+      <UButton
+        icon="lucide:rotate-ccw"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        @click="focusTimer.resetTimer()"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/dashboard/floating-tools/FocusTimerTool.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/headings/H1.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H1.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1 class="text-5xl font-bold text-highlighted">
+    <slot />
+  </h1>
+</template>
+
+<style scoped></style>

package/dist/runtime/components/headings/H1.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H2.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H2.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h2 class="text-3xl font-bold text-highlighted">
+    <slot />
+  </h2>
+</template>
+
+<style scoped></style>

package/dist/runtime/components/headings/H2.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H3.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H3.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h3 class="text-2xl font-bold text-highlighted">
+    <slot />
+  </h3>
+</template>
+
+<style scoped></style>

package/dist/runtime/components/headings/H3.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H4.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H4.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h4 class="text-xl font-bold text-highlighted">
+    <slot />
+  </h4>
+</template>
+
+<style scoped></style>

package/dist/runtime/components/headings/H4.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H5.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H5.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h5 class="text-lg font-bold text-highlighted">
+    <slot />
+  </h5>
+</template>
+
+<style scoped></style>

package/dist/runtime/components/headings/H5.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H6.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/headings/H6.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h6 class="text-md font-bold text-highlighted">
+    <slot />
+  </h6>
+</template>
+
+<style scoped></style>

package/dist/runtime/components/headings/H6.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/modals/ConfirmModal.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/ConfirmModal.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { useConfirm } from "~/src/runtime/composables";
+import { computed } from "vue";
+const { state, handleConfirm, handleCancel } = useConfirm();
+const isOpen = computed({
+  get: () => state.value.isVisible,
+  set: (value) => {
+    state.value.isVisible = value;
+  }
+});
+</script>
+
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :title="state.options.title"
+    :description="state.options.description"
+  >
+    <template #body>
+      <div class="flex flex-row justify-between gap-sm">
+        <UButton
+          color="error"
+          variant="outline"
+          :label="state.options.cancelLabel"
+          @click="handleCancel"
+        />
+        <UButton
+          :color="state.options.danger ? 'error' : 'success'"
+          :variant="state.options.danger ? 'subtle' : 'solid'"
+          :label="state.options.confirmLabel"
+          @click="handleConfirm"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/modals/ConfirmModal.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/LinkNode.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { tv } from "../../internal/tv";
-import { useRC } from "../../composables/useRC";
+import { useRC } from "~/src/runtime/composables";
 const { href, target, content, rc: rcProp } = defineProps({
   href: { type: String, required: true },
   target: { type: String, required: false },

package/dist/runtime/components/nodes/TextNode.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { tv } from "../../internal/tv";
-import { useRC } from "../../composables/useRC";
+import { useRC } from "~/src/runtime/composables";
 const { content, rc: rcProp } = defineProps({
   content: { type: String, required: true },
   rc: { type: Object, required: false }

package/dist/runtime/components/notes/NoteCard.d.vue.ts

@@ -0,0 +1,31 @@
+import type { Note } from "../../db/auth.js";
+export interface NoteCardProps {
+    note: Note;
+}
+type __VLS_Props = NoteCardProps;
+export interface NoteCardEmits {
+    (e: "click"): void;
+    (e: "togglePin"): void;
+    (e: "archive"): void;
+    (e: "delete"): void;
+}
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean) => any;
+} & {
+    delete: () => any;
+    archive: () => any;
+    togglePin: () => any;
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onArchive?: (() => any) | undefined;
+    onTogglePin?: (() => any) | undefined;
+    onClick?: (() => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/notes/NoteCard.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref } from "vue";
+const selected = defineModel("selected", { type: Boolean, ...{ default: false } });
+const isHovered = ref(false);
+const { note } = defineProps({
+  note: { type: Object, required: true }
+});
+const emit = defineEmits(["click", "togglePin", "archive", "delete"]);
+</script>
+
+<template>
+  <div
+    class="group relative flex flex-col"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <UCard
+      variant="soft"
+      class="h-48 cursor-pointer transition-all duration-200 hover:ring-2 hover:ring-primary-500/20"
+      :ui="{ body: 'flex flex-col gap-sm justify-between h-full' }"
+      @click="emit('click')"
+    >
+      <template #default>
+        <div class="flex flex-col gap-xs">
+          <h4 v-if="note.title" class="line-clamp-1 text-md font-bold break-words">
+            {{ note.title }}
+          </h4>
+          <p
+            v-if="note.content"
+            class="line-clamp-3 text-sm break-words whitespace-pre-line text-dimmed"
+          >
+            {{ note.content }}
+          </p>
+        </div>
+        <div
+          v-if="note.labels?.length"
+          class="flex flex-row flex-nowrap gap-xs overflow-hidden mask-[linear-gradient(90deg,black_85%,transparent)]"
+        >
+          <UBadge
+            v-for="labelEntry in note.labels"
+            :key="labelEntry.label.id"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            class="shrink-0 truncate"
+          >
+            {{ labelEntry.label.name }}
+          </UBadge>
+        </div>
+      </template>
+    </UCard>
+    <div
+      v-if="selected || isHovered"
+      class="absolute top-2 left-2 z-20 transition-opacity duration-200"
+    >
+      <UCheckbox v-model="selected" color="primary" size="lg" @click.stop />
+    </div>
+    <div class="absolute top-2 right-2 z-20 flex flex-col gap-xs transition-opacity duration-200">
+      <UButton
+        v-if="note.isPinned || isHovered"
+        :icon="note.isPinned ? 'lucide:pin-off' : 'lucide:pin'"
+        variant="ghost"
+        size="xs"
+        :class="
+  note.isPinned ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+"
+        @click.stop="emit('togglePin')"
+      />
+      <UButton
+        v-if="isHovered"
+        :icon="note.isArchived ? 'lucide:archive-x' : 'lucide:archive-restore'"
+        variant="ghost"
+        size="xs"
+        @click.stop="emit('archive')"
+      />
+      <UButton
+        v-if="isHovered"
+        icon="lucide:trash-2"
+        variant="ghost"
+        color="error"
+        size="xs"
+        @click.stop="emit('delete')"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/notes/NoteCard.vue.d.ts

@@ -0,0 +1,31 @@
+import type { Note } from "../../db/auth.js";
+export interface NoteCardProps {
+    note: Note;
+}
+type __VLS_Props = NoteCardProps;
+export interface NoteCardEmits {
+    (e: "click"): void;
+    (e: "togglePin"): void;
+    (e: "archive"): void;
+    (e: "delete"): void;
+}
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean) => any;
+} & {
+    delete: () => any;
+    archive: () => any;
+    togglePin: () => any;
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onArchive?: (() => any) | undefined;
+    onTogglePin?: (() => any) | undefined;
+    onClick?: (() => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;