@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/editor/AColorPalettePopover.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed, watch, nextTick } from "vue";
+import { COLOR_PALETTES } from "../../utils/colorPalettes";
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:modelValue", "update:open"]);
+const search = ref("");
+const filteredPalettes = computed(() => {
+  if (!search.value) return COLOR_PALETTES;
+  const q = search.value.toLowerCase();
+  return COLOR_PALETTES.filter((p) => p.name.toLowerCase().includes(q));
+});
+function selectHex(hex) {
+  emit("update:modelValue", hex);
+  emit("update:open", false);
+}
+const searchInput = ref(null);
+watch(() => props.open, async (open) => {
+  if (open) {
+    await nextTick();
+    searchInput.value?.$el?.querySelector("input")?.focus();
+  }
+});
+</script>
+
+<template>
+  <UPopover
+    :open="open"
+    :content="{ align: 'center' }"
+    @update:open="$emit('update:open', $event)"
+  >
+    <slot />
+    <template #content>
+      <div class="w-80 p-2 flex flex-col gap-2">
+        <UInput
+          ref="searchInput"
+          v-model="search"
+          size="sm"
+          placeholder="Search colors..."
+          icon="i-lucide-search"
+        />
+        <div class="max-h-64 overflow-y-auto flex flex-col gap-1.5">
+          <div
+            v-for="palette in filteredPalettes"
+            :key="palette.name"
+          >
+            <p class="text-xs text-(--ui-text-muted) mb-0.5 capitalize">
+              {{ palette.name }}
+            </p>
+            <div class="grid grid-cols-11 gap-0.5">
+              <UTooltip
+                v-for="shade in palette.shades"
+                :key="shade.shade"
+                :text="`${palette.name}-${shade.shade}`"
+              >
+                <button
+                  class="size-5 rounded-sm cursor-pointer transition-transform hover:scale-110"
+                  :class="modelValue === shade.hex ? 'ring-2 ring-offset-1 ring-(--ui-color-neutral-900) dark:ring-(--ui-color-neutral-100) scale-110' : ''"
+                  :style="{ background: shade.hex }"
+                  @click="selectHex(shade.hex)"
+                />
+              </UTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/editor/AColorPalettePopover.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    modelValue: string;
+    open: boolean;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/editor/ADocLinkPopover.d.vue.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/ADocLinkPopover.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from "vue";
+import { navigateTo } from "#imports";
+import { useDocLinkPick } from "../../composables/useDocLinkPick";
+const props = defineProps({
+  editor: { type: Object, required: true }
+});
+const { pickDoc } = useDocLinkPick();
+const activeDocHref = computed(() => {
+  const { href } = props.editor.getAttributes("link");
+  return href?.startsWith("/doc/") ? href : null;
+});
+const dropdownItems = computed(() => [[
+  {
+    label: "Navigate to page",
+    icon: "i-lucide-arrow-right",
+    onSelect: () => {
+      navigateTo(activeDocHref.value);
+    }
+  },
+  {
+    label: "Remove link",
+    icon: "i-lucide-trash",
+    onSelect: () => {
+      props.editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
+    }
+  }
+]]);
+function pick() {
+  pickDoc().then((result) => {
+    if (!result) return;
+    const { id, label } = result;
+    const isEmpty = props.editor.state.selection.empty;
+    let chain = props.editor.chain().focus().extendMarkRange("link").setLink({ href: `/doc/${id}` });
+    if (isEmpty) chain = chain.insertContent({ type: "text", text: label });
+    chain.run();
+  });
+}
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="activeDocHref"
+    :items="dropdownItems"
+    :content="{ side: 'bottom' }"
+    :ui="{ content: 'w-48' }"
+  >
+    <UTooltip text="Doc Link">
+      <UButton
+        icon="i-lucide-file-symlink"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="true"
+      />
+    </UTooltip>
+  </UDropdownMenu>
+
+  <UTooltip
+    v-else
+    text="Doc Link"
+  >
+    <UButton
+      icon="i-lucide-file-symlink"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      :disabled="!editor.isEditable"
+      @click="pick"
+    />
+  </UTooltip>
+</template>

package/dist/runtime/components/editor/ADocLinkPopover.vue.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AFileAudioPlayer.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    src: string;
+    filename: string;
+    artist?: string;
+    album?: string;
+    duration?: number;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AFileAudioPlayer.vue

@@ -0,0 +1,353 @@
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  src: { type: String, required: true },
+  filename: { type: String, required: true },
+  artist: { type: String, required: false },
+  album: { type: String, required: false },
+  duration: { type: Number, required: false }
+});
+const canvasRef = ref(null);
+const audioRef = ref(null);
+const isPlaying = ref(false);
+const isMuted = ref(false);
+const volume = ref(1);
+const currentTime = ref(0);
+const totalDuration = ref(props.duration ?? 0);
+const waveformBars = ref([]);
+const waveformReady = ref(false);
+const waveformFailed = ref(false);
+const progressFraction = ref(0);
+let animFrameId = null;
+const subtitle = computed(() => {
+  if (props.artist && props.album) return `${props.artist} \u2014 ${props.album}`;
+  if (props.artist) return props.artist;
+  if (props.album) return props.album;
+  return "";
+});
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+const timeDisplay = computed(() => {
+  const cur = formatTime(currentTime.value);
+  const tot = formatTime(totalDuration.value);
+  return `${cur} / ${tot}`;
+});
+async function analyzeAudio(url) {
+  waveformReady.value = false;
+  waveformFailed.value = false;
+  waveformBars.value = [];
+  try {
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    const audioCtx = new AudioContext();
+    const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+    await audioCtx.close();
+    const channelData = audioBuffer.getChannelData(0);
+    const barCount = 150;
+    const samplesPerBar = Math.floor(channelData.length / barCount);
+    const bars = [];
+    for (let i = 0; i < barCount; i++) {
+      let sum = 0;
+      const start = i * samplesPerBar;
+      for (let j = start; j < start + samplesPerBar && j < channelData.length; j++) {
+        sum += Math.abs(channelData[j]);
+      }
+      bars.push(sum / samplesPerBar);
+    }
+    const max = Math.max(...bars, 1e-3);
+    for (let i = 0; i < bars.length; i++) {
+      bars[i] = bars[i] / max;
+    }
+    waveformBars.value = bars;
+    waveformReady.value = true;
+    if (!totalDuration.value) {
+      totalDuration.value = audioBuffer.duration;
+    }
+  } catch {
+    waveformFailed.value = true;
+  }
+}
+function drawWaveform() {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const dpr = window.devicePixelRatio || 1;
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  ctx.scale(dpr, dpr);
+  const w = rect.width;
+  const h = rect.height;
+  ctx.clearRect(0, 0, w, h);
+  const style = getComputedStyle(canvas);
+  const inactiveColor = style.getPropertyValue("--ui-border-accented").trim() || "#d1d5db";
+  const activeColor = style.getPropertyValue("--ui-primary").trim() || "#3b82f6";
+  const bars = waveformBars.value;
+  if (!bars.length) return;
+  const barWidth = 2;
+  const gap = 1;
+  const totalBarWidth = barWidth + gap;
+  const totalBarsWidth = bars.length * totalBarWidth;
+  const offsetX = Math.max(0, (w - totalBarsWidth) / 2);
+  const minBarHeight = 2;
+  for (let i = 0; i < bars.length; i++) {
+    const barFraction = i / bars.length;
+    const barH = Math.max(minBarHeight, bars[i] * (h - 4));
+    const x = offsetX + i * totalBarWidth;
+    const y = (h - barH) / 2;
+    ctx.fillStyle = barFraction <= progressFraction.value ? activeColor : inactiveColor;
+    ctx.fillRect(x, y, barWidth, barH);
+  }
+}
+function drawFallbackProgress() {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const dpr = window.devicePixelRatio || 1;
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  ctx.scale(dpr, dpr);
+  const w = rect.width;
+  const h = rect.height;
+  ctx.clearRect(0, 0, w, h);
+  const style = getComputedStyle(canvas);
+  const inactiveColor = style.getPropertyValue("--ui-border-accented").trim() || "#d1d5db";
+  const activeColor = style.getPropertyValue("--ui-primary").trim() || "#3b82f6";
+  const barHeight = 4;
+  const y = (h - barHeight) / 2;
+  const radius = 2;
+  ctx.fillStyle = inactiveColor;
+  ctx.beginPath();
+  ctx.roundRect(0, y, w, barHeight, radius);
+  ctx.fill();
+  const activeWidth = w * progressFraction.value;
+  if (activeWidth > 0) {
+    ctx.fillStyle = activeColor;
+    ctx.beginPath();
+    ctx.roundRect(0, y, activeWidth, barHeight, radius);
+    ctx.fill();
+  }
+}
+function renderCanvas() {
+  if (waveformReady.value) {
+    drawWaveform();
+  } else if (waveformFailed.value) {
+    drawFallbackProgress();
+  }
+}
+function tick() {
+  const audio = audioRef.value;
+  if (audio && totalDuration.value > 0) {
+    currentTime.value = audio.currentTime;
+    progressFraction.value = audio.currentTime / totalDuration.value;
+  }
+  renderCanvas();
+  if (isPlaying.value) {
+    animFrameId = requestAnimationFrame(tick);
+  }
+}
+function startAnimLoop() {
+  if (animFrameId !== null) return;
+  animFrameId = requestAnimationFrame(tick);
+}
+function stopAnimLoop() {
+  if (animFrameId !== null) {
+    cancelAnimationFrame(animFrameId);
+    animFrameId = null;
+  }
+}
+function togglePlay() {
+  const audio = audioRef.value;
+  if (!audio) return;
+  if (isPlaying.value) {
+    audio.pause();
+    isPlaying.value = false;
+    stopAnimLoop();
+    renderCanvas();
+  } else {
+    audio.play();
+    isPlaying.value = true;
+    startAnimLoop();
+  }
+}
+function toggleMute() {
+  const audio = audioRef.value;
+  if (!audio) return;
+  isMuted.value = !isMuted.value;
+  audio.muted = isMuted.value;
+}
+function onVolumeChange(e) {
+  const target = e.target;
+  const val = Number.parseFloat(target.value);
+  volume.value = val;
+  if (audioRef.value) {
+    audioRef.value.volume = val;
+  }
+  if (val === 0) {
+    isMuted.value = true;
+  } else if (isMuted.value) {
+    isMuted.value = false;
+    if (audioRef.value) audioRef.value.muted = false;
+  }
+}
+function onAudioEnded() {
+  isPlaying.value = false;
+  stopAnimLoop();
+  const audio = audioRef.value;
+  if (audio) {
+    audio.currentTime = 0;
+  }
+  currentTime.value = 0;
+  progressFraction.value = 0;
+  renderCanvas();
+}
+function onAudioLoadedMetadata() {
+  const audio = audioRef.value;
+  if (audio && audio.duration && Number.isFinite(audio.duration)) {
+    totalDuration.value = audio.duration;
+  }
+}
+function onCanvasClick(e) {
+  const canvas = canvasRef.value;
+  const audio = audioRef.value;
+  if (!canvas || !audio || !totalDuration.value) return;
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const fraction = Math.max(0, Math.min(1, x / rect.width));
+  audio.currentTime = fraction * totalDuration.value;
+  currentTime.value = audio.currentTime;
+  progressFraction.value = fraction;
+  renderCanvas();
+}
+let resizeObserver = null;
+onMounted(() => {
+  analyzeAudio(props.src);
+  if (canvasRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      renderCanvas();
+    });
+    resizeObserver.observe(canvasRef.value);
+  }
+});
+onBeforeUnmount(() => {
+  stopAnimLoop();
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+watch(() => props.src, (newSrc) => {
+  isPlaying.value = false;
+  stopAnimLoop();
+  currentTime.value = 0;
+  progressFraction.value = 0;
+  totalDuration.value = props.duration ?? 0;
+  if (audioRef.value) {
+    audioRef.value.pause();
+    audioRef.value.currentTime = 0;
+  }
+  analyzeAudio(newSrc);
+});
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <div class="fa-header">
+      <div class="fa-icon-btn">
+        <UIcon
+          name="i-lucide-music-2"
+          class="size-3.5"
+        />
+      </div>
+      <div class="fa-info">
+        <div class="fa-title">
+          {{ filename }}
+        </div>
+        <div
+          v-if="subtitle"
+          class="fa-subtitle"
+        >
+          {{ subtitle }}
+        </div>
+      </div>
+      <div class="fa-controls">
+        <a
+          :href="src"
+          :download="filename"
+          class="fa-ctrl-btn fa-ctrl-download"
+          @click.stop
+        >
+          <UIcon
+            name="i-lucide-download"
+            class="size-3"
+          />
+        </a>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="fa-body">
+      <canvas
+        ref="canvasRef"
+        class="fa-waveform"
+        @click="onCanvasClick"
+      />
+
+      <div class="fa-transport">
+        <button
+          class="fa-play-btn"
+          @click="togglePlay"
+        >
+          <UIcon
+            :name="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
+            class="size-3.5"
+          />
+        </button>
+
+        <span class="fa-time">{{ timeDisplay }}</span>
+
+        <span class="flex-1" />
+
+        <button
+          class="fa-ctrl-btn fa-vol-btn"
+          @click="toggleMute"
+        >
+          <UIcon
+            :name="isMuted || volume === 0 ? 'i-lucide-volume-x' : 'i-lucide-volume-2'"
+            class="size-3.5"
+          />
+        </button>
+
+        <input
+          type="range"
+          class="fa-vol-slider"
+          min="0"
+          max="1"
+          step="0.01"
+          :value="isMuted ? 0 : volume"
+          @input="onVolumeChange"
+        >
+      </div>
+    </div>
+
+    <!-- Hidden audio element -->
+    <audio
+      ref="audioRef"
+      :src="src"
+      preload="metadata"
+      @ended="onAudioEnded"
+      @loadedmetadata="onAudioLoadedMetadata"
+    />
+  </div>
+</template>
+
+<style scoped>
+.fa-header{background:var(--ui-bg-elevated);border-bottom:1px solid var(--ui-border);gap:6px;height:34px;padding:0 4px 0 10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fa-header,.fa-icon-btn{align-items:center;display:flex;flex-shrink:0}.fa-icon-btn{border-radius:50%;color:var(--ui-text-muted);height:22px;width:22px}.fa-icon-btn,.fa-info{justify-content:center}.fa-info{display:flex;flex:1;flex-direction:column;gap:0;min-width:0}.fa-title{color:var(--ui-text-muted);font-size:12px;font-weight:500;line-height:1.3}.fa-subtitle,.fa-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fa-subtitle{color:var(--ui-text-dimmed);font-size:11px;line-height:1.2}.fa-controls{flex-shrink:0;gap:2px}.fa-controls,.fa-ctrl-btn{align-items:center;display:flex}.fa-ctrl-btn{border-radius:50%;color:var(--ui-text-dimmed);cursor:pointer;height:22px;justify-content:center;text-decoration:none;transition:background .12s,color .12s;width:22px}.fa-ctrl-btn:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.fa-ctrl-download:hover{background:rgba(34,197,94,.15);color:#148f3e}.fa-body{padding:12px 16px}.fa-waveform{border-radius:6px;cursor:pointer;display:block;height:64px;width:100%}.fa-transport{gap:10px;margin-top:10px}.fa-play-btn,.fa-transport{align-items:center;display:flex}.fa-play-btn{background:var(--ui-primary);border-radius:50%;color:#fff;cursor:pointer;flex-shrink:0;height:28px;justify-content:center;transition:opacity .12s;width:28px}.fa-play-btn:hover{opacity:.85}.fa-time{color:var(--ui-text-dimmed);font-size:12px;font-variant-numeric:tabular-nums;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.fa-vol-btn{color:var(--ui-text-muted)}.fa-vol-btn:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.fa-vol-slider{accent-color:var(--ui-primary);cursor:pointer;height:4px;width:70px}
+</style>

package/dist/runtime/components/editor/AFileAudioPlayer.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    src: string;
+    filename: string;
+    artist?: string;
+    album?: string;
+    duration?: number;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/AFileGlbViewer.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    url: string;
+    objectId: string;
+    autoRotate?: boolean;
+};
+declare function resetView(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    autoRotateEnabled: import("vue").Ref<boolean, boolean>;
+    wireframe: import("vue").Ref<boolean, boolean>;
+    resetView: typeof resetView;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;