sova-devtools 0.1.1

In-app DevTools bar for Sova (HTML inject, SSE timeline, request snapshots)
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<script setup lang="ts">
import { ref } from "vue";
import { Check, Copy } from "@lucide/vue";
import Icon from "./Icon.vue";

const props = withDefaults(
  defineProps<{
    code: string;
    title?: string;
    language?: string;
  }>(),
  { title: "code", language: "text" },
);

const copied = ref(false);

async function copy() {
  try {
    await navigator.clipboard.writeText(props.code);
    copied.value = true;
    setTimeout(() => {
      copied.value = false;
    }, 1200);
  } catch {
    /* ignore */
  }
}
</script>

<template>
  <div
    class="overflow-hidden rounded-[var(--dt-radius)] border border-[var(--dt-border)] bg-[var(--dt-bg)]"
  >
    <div
      class="flex items-center gap-2 border-b border-[var(--dt-border)] bg-[var(--dt-surface-2)] px-3 py-1.5"
    >
      <span class="text-[10px] uppercase tracking-wider text-[var(--dt-faint)]">{{
        title
      }}</span>
      <span class="dt-mono text-[10px] text-[var(--dt-faint)]">{{ language }}</span>
      <button
        type="button"
        class="ml-auto inline-flex min-h-7 cursor-pointer items-center gap-1 rounded border border-[var(--dt-border)] bg-[var(--dt-surface)] px-2 text-[10px] text-[var(--dt-muted)] hover:text-[var(--dt-text)]"
        @click="copy"
      >
        <Icon :icon="copied ? Check : Copy" :size="12" />
        {{ copied ? "copied" : "copy" }}
      </button>
    </div>
    <pre
      class="dt-scroll m-0 max-h-48 overflow-auto p-3 dt-mono text-[11px] leading-relaxed text-[var(--dt-muted)] whitespace-pre-wrap break-all"
      >{{ code }}</pre
    >
  </div>
</template>