@abraca/nuxt 0.3.0 → 1.5.0

package/dist/runtime/components/renderers/calendar/ACalendarWeekView.vue

@@ -0,0 +1,188 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import ACalendarEventChip from "./ACalendarEventChip.vue";
+const _props = defineProps({
+  columns: { type: Array, required: true },
+  eventFocusers: { type: Function, required: true },
+  dragId: { type: [String, null], required: false },
+  dragOverContainer: { type: [String, null], required: false },
+  dragPreviewTime: { type: [Object, null], required: false },
+  renameId: { type: [String, null], required: false },
+  renameValue: { type: String, required: false },
+  editable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["create-event", "open-event", "drag-start", "focus-event", "unfocus-event", "rename-input", "rename-commit", "rename-cancel"]);
+const scrollRef = ref(null);
+onMounted(() => {
+  nextTick(() => {
+    const now = (/* @__PURE__ */ new Date()).getHours();
+    const target = scrollRef.value?.querySelector(`[data-hour="${Math.max(0, now - 1)}"]`);
+    target?.scrollIntoView({ block: "start", behavior: "instant" });
+  });
+});
+function eventTopPx(evt) {
+  const d = new Date(evt.datetimeStart);
+  return (d.getHours() + d.getMinutes() / 60) * 48;
+}
+function eventHeightPx(evt) {
+  const s = new Date(evt.datetimeStart);
+  const e = new Date(evt.datetimeEnd);
+  const hours = Math.max(0.5, (e.getTime() - s.getTime()) / 36e5);
+  return hours * 48;
+}
+</script>
+
+<template>
+  <div class="flex-1 min-h-0 flex flex-col">
+    <!-- Column headers -->
+    <div
+      class="shrink-0 border-b border-(--ui-border) grid"
+      :style="{ gridTemplateColumns: `3rem repeat(${columns.length}, 1fr)` }"
+    >
+      <div class="py-2" />
+      <div
+        v-for="col in columns"
+        :key="col.dateStr"
+        class="text-center py-2 border-l border-(--ui-border)/30"
+        :class="col.isToday ? 'bg-(--ui-primary)/5' : ''"
+      >
+        <div class="text-[10px] text-(--ui-text-muted) uppercase">
+          {{ col.shortLabel.split(" ")[0] }}
+        </div>
+        <div
+          class="text-sm font-medium mt-0.5 w-7 h-7 rounded-full flex items-center justify-center mx-auto"
+          :class="col.isToday ? 'bg-(--ui-primary) text-white' : 'text-(--ui-text)'"
+        >
+          {{ col.date.getDate() }}
+        </div>
+      </div>
+    </div>
+
+    <!-- All-day strip -->
+    <div
+      v-if="columns.some((c) => c.allDayEvents.length > 0)"
+      class="shrink-0 border-b border-(--ui-border) grid"
+      :style="{ gridTemplateColumns: `3rem repeat(${columns.length}, 1fr)` }"
+    >
+      <div class="text-[10px] text-(--ui-text-dimmed) py-1 text-center">
+        all day
+      </div>
+      <div
+        v-for="col in columns"
+        :key="'ad-' + col.dateStr"
+        class="p-0.5 border-l border-(--ui-border)/30 space-y-0.5"
+        :data-drop-container="col.dateStr"
+      >
+        <ACalendarEventChip
+          v-for="evt in col.allDayEvents"
+          :key="evt.id"
+          :event="evt"
+          :is-dragging="dragId === evt.id"
+          :focusers="eventFocusers(evt.id)"
+          :rename-id="renameId"
+          :rename-value="renameValue"
+          @click="emit('open-event', $event)"
+          @drag-start="emit('drag-start', $event)"
+          @pointer-enter="emit('focus-event', evt.id)"
+          @pointer-leave="emit('unfocus-event')"
+          @rename-input="emit('rename-input', $event)"
+          @rename-commit="emit('rename-commit')"
+          @rename-cancel="emit('rename-cancel')"
+        />
+      </div>
+    </div>
+
+    <!-- Hour grid (scrollable) -->
+    <div
+      ref="scrollRef"
+      class="flex-1 min-h-0 overflow-y-auto"
+      data-hour-grid="48"
+    >
+      <div
+        class="grid relative"
+        :style="{ gridTemplateColumns: `3rem repeat(${columns.length}, 1fr)`, minHeight: '1152px' }"
+      >
+        <!-- Hour labels -->
+        <div class="relative">
+          <div
+            v-for="h in 24"
+            :key="h - 1"
+            :data-hour="h - 1"
+            class="h-12 text-[10px] text-(--ui-text-dimmed) text-right pr-2 -mt-1.5"
+          >
+            {{ String(h - 1).padStart(2, "0") }}:00
+          </div>
+        </div>
+
+        <!-- Day columns with events -->
+        <div
+          v-for="col in columns"
+          :key="'grid-' + col.dateStr"
+          class="relative border-l border-(--ui-border)/30"
+          :class="col.isToday ? 'bg-(--ui-primary)/3' : ''"
+          :data-drop-container="col.dateStr"
+        >
+          <!-- Hour row lines -->
+          <div
+            v-for="h in 24"
+            :key="h"
+            class="h-12 border-b border-(--ui-border)/20 transition-colors"
+            :class="editable !== false ? 'hover:bg-(--ui-bg-elevated)/50 cursor-pointer' : ''"
+            @click="editable !== false && emit('create-event', { date: col.date, hour: h - 1 })"
+          />
+
+          <!-- Drag time indicator -->
+          <div
+            v-if="dragPreviewTime && dragId && dragOverContainer === col.dateStr"
+            class="absolute left-0 right-0 z-20 pointer-events-none flex items-center"
+            :style="{ top: (dragPreviewTime.hours + dragPreviewTime.minutes / 60) * 48 + 'px' }"
+          >
+            <div class="w-2 h-2 rounded-full bg-(--ui-primary) -ml-1" />
+            <div class="flex-1 border-t-2 border-dashed border-(--ui-primary)" />
+            <span class="text-[10px] text-(--ui-primary) font-medium ml-1 mr-1 tabular-nums">
+              {{ String(dragPreviewTime.hours).padStart(2, "0") }}:{{ String(dragPreviewTime.minutes).padStart(2, "0") }}
+            </span>
+          </div>
+
+          <!-- Timed events (absolute positioned) -->
+          <div
+            v-for="slot in col.hourSlots"
+            :key="slot.hour"
+          >
+            <div
+              v-for="evt in slot.events"
+              v-show="new Date(evt.datetimeStart).getHours() === slot.hour"
+              :key="evt.id + '-' + slot.hour"
+              class="absolute left-0.5 right-0.5 z-10 rounded px-1 py-0.5 text-[10px] sm:text-[11px] text-white truncate cursor-pointer hover:brightness-110 transition-[filter] overflow-hidden min-h-[24px]"
+              :class="{ 'opacity-40': dragId === evt.id }"
+              :style="{
+  top: eventTopPx(evt) + 'px',
+  height: eventHeightPx(evt) + 'px',
+  background: evt.color,
+  ...eventFocusers(evt.id).length > 0 ? { outline: `2px solid ${eventFocusers(evt.id)[0].color}`, outlineOffset: '1px' } : {}
+}"
+              :data-drag-id="evt.id"
+              style="touch-action: none"
+              @pointerdown="emit('drag-start', { event: $event, id: evt.id })"
+              @click.stop="emit('open-event', evt)"
+              @pointerenter="emit('focus-event', evt.id)"
+              @pointerleave="emit('unfocus-event')"
+            >
+              <div class="font-medium truncate flex items-center gap-1">
+                <UIcon
+                  v-if="evt.icon"
+                  :name="`i-lucide-${evt.icon}`"
+                  class="size-3 shrink-0"
+                />
+                {{ evt.label }}
+              </div>
+              <div class="opacity-70">
+                {{ new Date(evt.datetimeStart).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/calendar/ACalendarWeekView.vue.d.ts

@@ -0,0 +1,50 @@
+import type { DayColumn, CalendarEvent } from '../../../composables/useCalendarView.js';
+type __VLS_Props = {
+    columns: DayColumn[];
+    eventFocusers: (id: string) => Array<{
+        name: string;
+        color: string;
+    }>;
+    dragId?: string | null;
+    dragOverContainer?: string | null;
+    dragPreviewTime?: {
+        hours: number;
+        minutes: number;
+    } | null;
+    renameId?: string | null;
+    renameValue?: string;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "drag-start": (payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any;
+    "rename-input": (value: string) => any;
+    "rename-commit": () => any;
+    "rename-cancel": () => any;
+    "create-event": (payload: {
+        date: Date;
+        hour?: number;
+    }) => any;
+    "open-event": (event: CalendarEvent) => any;
+    "focus-event": (id: string) => any;
+    "unfocus-event": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDrag-start"?: ((payload: {
+        event: PointerEvent;
+        id: string;
+    }) => any) | undefined;
+    "onRename-input"?: ((value: string) => any) | undefined;
+    "onRename-commit"?: (() => any) | undefined;
+    "onRename-cancel"?: (() => any) | undefined;
+    "onCreate-event"?: ((payload: {
+        date: Date;
+        hour?: number;
+    }) => any) | undefined;
+    "onOpen-event"?: ((event: CalendarEvent) => any) | undefined;
+    "onFocus-event"?: ((id: string) => any) | undefined;
+    "onUnfocus-event"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/media/MediaPlaylist.d.vue.ts

@@ -0,0 +1,25 @@
+/**
+ * Track list grouped by parent label.
+ * Shows equalizer animation for current track, remote listener avatars.
+ * Ported from cou-sh/app/components/doc/media/MediaPlaylist.vue
+ */
+import type { MediaTrack, MediaGroup } from '../../../composables/useMediaExtractor.js';
+type __VLS_Props = {
+    groups: MediaGroup[];
+    currentTrackId: string | null;
+    remoteListeners: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+        trackId: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    playTrack: (track: MediaTrack) => any;
+    openTrack: (track: MediaTrack) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPlayTrack?: ((track: MediaTrack) => any) | undefined;
+    onOpenTrack?: ((track: MediaTrack) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/media/MediaPlaylist.vue

@@ -0,0 +1,115 @@
+<script setup>
+const props = defineProps({
+  groups: { type: Array, required: true },
+  currentTrackId: { type: [String, null], required: true },
+  remoteListeners: { type: Array, required: true }
+});
+const emit = defineEmits(["playTrack", "openTrack"]);
+function formatDuration(seconds) {
+  if (!seconds || !Number.isFinite(seconds)) return "";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function listenersForTrack(trackId) {
+  return props.remoteListeners.filter((l) => l.trackId === trackId);
+}
+function trackSubtitle(track) {
+  const parts = [];
+  if (track.artist) parts.push(track.artist);
+  if (track.duration) parts.push(formatDuration(track.duration));
+  return parts.join(" \xB7 ");
+}
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="group in groups"
+      :key="group.id"
+      class="mb-1"
+    >
+      <div
+        v-if="groups.length > 1"
+        class="sticky top-0 z-10 px-4 py-1.5 text-xs font-medium text-(--ui-text-muted) bg-(--ui-bg)/80 backdrop-blur-sm border-b border-(--ui-border)"
+      >
+        {{ group.label }}
+      </div>
+
+      <button
+        v-for="(track, idx) in group.items"
+        :key="track.id"
+        class="mp-track"
+        :class="{ 'mp-track-active': currentTrackId === track.id }"
+        @click="emit('playTrack', track)"
+        @contextmenu.prevent="emit('openTrack', track)"
+      >
+        <div class="mp-track-num">
+          <template v-if="currentTrackId === track.id">
+            <div class="mp-eq">
+              <span class="mp-eq-bar" />
+              <span class="mp-eq-bar" />
+              <span class="mp-eq-bar" />
+            </div>
+          </template>
+          <template v-else>
+            <span class="text-xs text-(--ui-text-dimmed) tabular-nums">{{ idx + 1 }}</span>
+          </template>
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <div
+            class="text-sm truncate"
+            :class="currentTrackId === track.id ? 'text-(--ui-primary) font-medium' : 'text-(--ui-text)'"
+          >
+            {{ track.label }}
+          </div>
+          <div
+            v-if="trackSubtitle(track)"
+            class="text-xs text-(--ui-text-dimmed) truncate"
+          >
+            {{ trackSubtitle(track) }}
+          </div>
+        </div>
+
+        <UIcon
+          v-if="track.isVideo"
+          name="i-lucide-film"
+          class="size-3.5 text-(--ui-text-dimmed) shrink-0"
+        />
+
+        <span
+          v-if="track.duration"
+          class="text-xs text-(--ui-text-dimmed) tabular-nums shrink-0"
+        >
+          {{ formatDuration(track.duration) }}
+        </span>
+
+        <div
+          v-if="listenersForTrack(track.id).length"
+          class="flex -space-x-1.5 shrink-0 ml-1"
+        >
+          <span
+            v-for="listener in listenersForTrack(track.id).slice(0, 3)"
+            :key="listener.clientId"
+            class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-white ring-1 ring-(--ui-bg)"
+            :style="{ backgroundColor: listener.color }"
+            :title="listener.name"
+          >
+            {{ listener.name?.charAt(0)?.toUpperCase() ?? "?" }}
+          </span>
+          <span
+            v-if="listenersForTrack(track.id).length > 3"
+            class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-(--ui-text-dimmed) bg-(--ui-bg-accented) ring-1 ring-(--ui-bg)"
+          >
+            +{{ listenersForTrack(track.id).length - 3 }}
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mp-track{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:10px;padding:8px 16px;text-align:left;transition:background .1s;width:100%}.mp-track:hover{background:var(--ui-bg-elevated)}.mp-track-active{background:var(--ui-bg-accented)}.mp-track-num{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:20px}.mp-eq{align-items:flex-end;display:flex;gap:2px;height:14px}.mp-eq-bar{animation:mp-eq-bounce .6s ease-in-out infinite alternate;background:var(--ui-primary);border-radius:1px;display:block;width:3px}.mp-eq-bar:first-child{animation-delay:0s;height:40%}.mp-eq-bar:nth-child(2){animation-delay:.15s;height:70%}.mp-eq-bar:nth-child(3){animation-delay:.3s;height:50%}@keyframes mp-eq-bounce{0%{height:20%}to{height:100%}}
+</style>

package/dist/runtime/components/renderers/media/MediaPlaylist.vue.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Track list grouped by parent label.
+ * Shows equalizer animation for current track, remote listener avatars.
+ * Ported from cou-sh/app/components/doc/media/MediaPlaylist.vue
+ */
+import type { MediaTrack, MediaGroup } from '../../../composables/useMediaExtractor.js';
+type __VLS_Props = {
+    groups: MediaGroup[];
+    currentTrackId: string | null;
+    remoteListeners: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+        trackId: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    playTrack: (track: MediaTrack) => any;
+    openTrack: (track: MediaTrack) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPlayTrack?: ((track: MediaTrack) => any) | undefined;
+    onOpenTrack?: ((track: MediaTrack) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/media/MediaSyncBar.d.vue.ts

@@ -0,0 +1,21 @@
+/**
+ * Sync session bar — join/leave coordinated listening.
+ * Ported from cou-sh/app/components/doc/media/MediaSyncBar.vue
+ */
+type __VLS_Props = {
+    isSynced: boolean;
+    syncedUsers: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    joinSync: () => any;
+    leaveSync: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onJoinSync?: (() => any) | undefined;
+    onLeaveSync?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/media/MediaSyncBar.vue

@@ -0,0 +1,61 @@
+<script setup>
+defineProps({
+  isSynced: { type: Boolean, required: true },
+  syncedUsers: { type: Array, required: true }
+});
+const emit = defineEmits(["joinSync", "leaveSync"]);
+</script>
+
+<template>
+  <div
+    class="mp-sync-bar"
+    :class="{ 'mp-sync-bar-active': isSynced }"
+  >
+    <div class="flex items-center gap-2 flex-1 min-w-0">
+      <div
+        class="mp-sync-dot"
+        :class="{ 'mp-sync-dot-active': isSynced }"
+      />
+      <template v-if="isSynced">
+        <span class="text-xs font-medium text-(--ui-primary)">Synced</span>
+      </template>
+      <template v-else>
+        <span class="text-xs text-(--ui-text-muted)">Listen together</span>
+      </template>
+    </div>
+
+    <div
+      v-if="syncedUsers.length > 0"
+      class="flex -space-x-1.5 shrink-0 mr-2"
+    >
+      <span
+        v-for="user in syncedUsers.slice(0, 5)"
+        :key="user.clientId"
+        class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-white ring-1 ring-(--ui-bg)"
+        :style="{ backgroundColor: user.color }"
+        :title="user.name"
+      >
+        {{ user.name?.charAt(0)?.toUpperCase() ?? "?" }}
+      </span>
+      <span
+        v-if="syncedUsers.length > 5"
+        class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-(--ui-text-dimmed) bg-(--ui-bg-accented) ring-1 ring-(--ui-bg)"
+      >
+        +{{ syncedUsers.length - 5 }}
+      </span>
+    </div>
+
+    <UButton
+      :icon="isSynced ? 'i-lucide-unlink' : 'i-lucide-link'"
+      :label="isSynced ? 'Leave' : 'Join'"
+      :variant="isSynced ? 'soft' : 'solid'"
+      :color="isSynced ? 'neutral' : 'primary'"
+      size="xs"
+      @click="isSynced ? emit('leaveSync') : emit('joinSync')"
+    />
+  </div>
+</template>
+
+<style scoped>
+.mp-sync-bar{align-items:center;background:var(--ui-bg-elevated);border-top:1px solid var(--ui-border);display:flex;gap:8px;padding:6px 12px;transition:background .2s}.mp-sync-bar-active{background:color-mix(in srgb,var(--ui-primary) 5%,var(--ui-bg-elevated));border-top-color:color-mix(in srgb,var(--ui-primary) 20%,var(--ui-border))}.mp-sync-dot{background:var(--ui-text-dimmed);border-radius:9999px;flex-shrink:0;height:6px;transition:background .2s;width:6px}.mp-sync-dot-active{animation:mp-sync-pulse 2s ease-in-out infinite;background:var(--ui-primary);box-shadow:0 0 6px color-mix(in srgb,var(--ui-primary) 50%,transparent)}@keyframes mp-sync-pulse{0%,to{opacity:1}50%{opacity:.5}}
+</style>

package/dist/runtime/components/renderers/media/MediaSyncBar.vue.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Sync session bar — join/leave coordinated listening.
+ * Ported from cou-sh/app/components/doc/media/MediaSyncBar.vue
+ */
+type __VLS_Props = {
+    isSynced: boolean;
+    syncedUsers: Array<{
+        clientId: number;
+        name: string;
+        color: string;
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    joinSync: () => any;
+    leaveSync: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onJoinSync?: (() => any) | undefined;
+    onLeaveSync?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/media/MediaTransportBar.d.vue.ts

@@ -0,0 +1,22 @@
+import type { MediaTrack } from '../../../composables/useMediaExtractor.js';
+type __VLS_Props = {
+    track: MediaTrack;
+    isPlaying: boolean;
+    currentTime: number;
+    totalDuration: number;
+    progressFraction: number;
+    isLoading: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prev: () => any;
+    next: () => any;
+    togglePlay: () => any;
+    seek: (position: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+    onTogglePlay?: (() => any) | undefined;
+    onSeek?: ((position: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/media/MediaTransportBar.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  track: { type: Object, required: true },
+  isPlaying: { type: Boolean, required: true },
+  currentTime: { type: Number, required: true },
+  totalDuration: { type: Number, required: true },
+  progressFraction: { type: Number, required: true },
+  isLoading: { type: Boolean, required: true }
+});
+const emit = defineEmits(["togglePlay", "seek", "prev", "next"]);
+function formatTime(seconds) {
+  if (!seconds || !Number.isFinite(seconds)) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function onProgressClick(e) {
+  const el = e.currentTarget;
+  const rect = el.getBoundingClientRect();
+  const fraction = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+  emit("seek", fraction * props.totalDuration);
+}
+const subtitle = computed(() => {
+  const parts = [];
+  if (props.track.artist) parts.push(props.track.artist);
+  if (props.track.album) parts.push(props.track.album);
+  return parts.join(" \u2014 ");
+});
+</script>
+
+<template>
+  <div class="shrink-0 border-t border-(--ui-border) bg-(--ui-bg-elevated)">
+    <div
+      class="h-1 bg-(--ui-border-accented) cursor-pointer"
+      @click="onProgressClick"
+    >
+      <div
+        class="h-full bg-(--ui-primary) transition-[width] duration-150"
+        :style="{ width: `${progressFraction * 100}%` }"
+      />
+    </div>
+
+    <div class="flex items-center gap-3 px-3 py-2">
+      <div class="flex-1 min-w-0">
+        <div class="text-sm font-medium text-(--ui-text) truncate">
+          {{ track.label }}
+        </div>
+        <div
+          v-if="subtitle"
+          class="text-xs text-(--ui-text-dimmed) truncate"
+        >
+          {{ subtitle }}
+        </div>
+      </div>
+
+      <span class="text-xs font-mono tabular-nums text-(--ui-text-dimmed) shrink-0">
+        {{ formatTime(currentTime) }} / {{ formatTime(totalDuration) }}
+      </span>
+
+      <div class="flex items-center gap-1 shrink-0">
+        <UButton
+          icon="i-lucide-skip-back"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          class="rounded-full"
+          @click="emit('prev')"
+        />
+        <button
+          class="mp-play-btn"
+          :class="{ 'mp-play-btn-loading': isLoading }"
+          @click="emit('togglePlay')"
+        >
+          <UIcon
+            :name="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
+            class="size-4"
+            :class="{ 'ml-0.5': !isPlaying }"
+          />
+        </button>
+        <UButton
+          icon="i-lucide-skip-forward"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          class="rounded-full"
+          @click="emit('next')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mp-play-btn{align-items:center;background:var(--ui-primary);border-radius:9999px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:opacity .15s,transform .15s;width:32px}.mp-play-btn:hover{opacity:.9;transform:scale(1.05)}.mp-play-btn:active{transform:scale(.97)}.mp-play-btn-loading{opacity:.6;pointer-events:none}
+</style>

package/dist/runtime/components/renderers/media/MediaTransportBar.vue.d.ts

@@ -0,0 +1,22 @@
+import type { MediaTrack } from '../../../composables/useMediaExtractor.js';
+type __VLS_Props = {
+    track: MediaTrack;
+    isPlaying: boolean;
+    currentTime: number;
+    totalDuration: number;
+    progressFraction: number;
+    isLoading: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prev: () => any;
+    next: () => any;
+    togglePlay: () => any;
+    seek: (position: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+    onTogglePlay?: (() => any) | undefined;
+    onSeek?: ((position: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;