@owdproject/nuxt-theme-paper 0.0.0-stage → 4.0.0-alpha.4

package/dist/runtime/components/PaperSystemBar.vue

@@ -0,0 +1,808 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
+import { useApplicationManager } from "@owdproject/nuxt/runtime/composables/useApplicationManager";
+import { useApplicationEntries } from "@owdproject/nuxt/runtime/composables/useApplicationEntries";
+import { useDesktopVolumeStore } from "@owdproject/nuxt/runtime/stores/storeDesktopVolume";
+import { usePaperAppearance } from "../composables/usePaperAppearance";
+const open = ref(false);
+const calendarOpen = ref(false);
+const time = ref("");
+const barRef = ref(null);
+const triggerRef = ref(null);
+const clockRef = ref(null);
+const panelPos = ref({ top: "0px", left: "0px", minWidth: "18rem" });
+const calendarPos = ref({ top: "0px", left: "0px", minWidth: "17.5rem" });
+const volumeOpen = ref(false);
+const volumeRef = ref(null);
+const volumePos = ref({ top: "0px", left: "0px", minWidth: "11.5rem" });
+const volumeBeforeMute = ref(100);
+const muted = ref(false);
+const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+const today = startOfDay(/* @__PURE__ */ new Date());
+const selectedDate = ref(startOfDay(/* @__PURE__ */ new Date()));
+const viewDate = ref(new Date(today.getFullYear(), today.getMonth(), 1));
+const applicationManager = useApplicationManager();
+const apps = useApplicationEntries().sortedAppEntries("title", "primary");
+const { appearance, toggleAppearance } = usePaperAppearance();
+const volumeStore = useDesktopVolumeStore();
+const appCount = computed(() => apps.value.length);
+const runningApps = computed(() => applicationManager.appsRunning.value);
+const isDark = computed(() => appearance.value === "dark");
+const appearanceLabel = computed(
+  () => isDark.value ? "Switch to light mode" : "Switch to dark mode"
+);
+const volumeLevel = computed(() => volumeStore.master);
+const isVolumeMuted = computed(
+  () => muted.value || volumeLevel.value === 0
+);
+const volumeLabel = computed(() => {
+  if (isVolumeMuted.value) return "Volume, muted";
+  return `Volume, ${volumeLevel.value}%`;
+});
+const { te, t } = useI18n();
+const groupedApps = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const entry of apps.value) {
+    const category = entry.category?.trim() || "Programs";
+    const list = map.get(category) ?? [];
+    list.push(entry);
+    map.set(category, list);
+  }
+  return [...map.entries()].map(([category, entries]) => {
+    const translationKey = `applications.categories.${category}`;
+    const translatedName = te(translationKey) ? t(translationKey) : category;
+    return { category, translatedName, entries };
+  }).sort((a, b) => a.translatedName.localeCompare(b.translatedName)).map(({ category, entries }) => ({
+    category,
+    entries: [...entries].sort(
+      (a, b) => (a.title || "").localeCompare(b.title || "")
+    )
+  }));
+});
+const showGroupHeaders = computed(() => {
+  const groups = groupedApps.value;
+  if (groups.length <= 1) return false;
+  return !(groups.length === 1 && (groups[0]?.category === "Programs" || groups[0]?.category === "Other"));
+});
+function entrySubtitle(entry) {
+  const desc = entry.application.config.description?.trim();
+  if (desc && desc !== entry.title) return desc;
+  return "";
+}
+function isIconUrl(icon) {
+  return icon.startsWith("http://") || icon.startsWith("https://") || icon.startsWith("/") || icon.startsWith("data:");
+}
+function isAppFocused(application) {
+  return [...application.windows.values()].some(
+    (w) => w.state.active && w.state.focused
+  );
+}
+function getAppTargetWindow(application) {
+  const windows = [...application.windows.values()];
+  if (windows.length === 0) return void 0;
+  const focused = windows.find((w) => w.state.focused && w.state.active);
+  if (focused) return focused;
+  const active = windows.find((w) => w.state.active);
+  if (active) return active;
+  return windows[windows.length - 1];
+}
+function focusRunningApp(application) {
+  const window2 = getAppTargetWindow(application);
+  if (!window2) return;
+  if (window2.state.active && window2.state.focused) {
+    window2.actions.minimize();
+    return;
+  }
+  if (!window2.state.active) {
+    window2.actions.setActive(true);
+  }
+  window2.actions.bringToFront();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+const monthLabel = computed(
+  () => viewDate.value.toLocaleDateString(void 0, {
+    month: "long",
+    year: "numeric"
+  })
+);
+const calendarCells = computed(() => {
+  const year = viewDate.value.getFullYear();
+  const month = viewDate.value.getMonth();
+  const firstWeekday = (new Date(year, month, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < firstWeekday; i++) {
+    cells.push({ date: null, key: `pad-${year}-${month}-${i}` });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    cells.push({
+      date: new Date(year, month, day),
+      key: `${year}-${month}-${day}`
+    });
+  }
+  return cells;
+});
+function tick() {
+  time.value = (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function updatePanelPosition() {
+  const trigger = triggerRef.value;
+  const bar = barRef.value;
+  if (!trigger || !bar) return;
+  const triggerRect = trigger.getBoundingClientRect();
+  const barRect = bar.getBoundingClientRect();
+  const panelMin = 288;
+  const panelMax = Math.min(360, window.innerWidth - 24);
+  const width = Math.max(panelMin, Math.min(panelMax, panelMax));
+  let left = triggerRect.left;
+  if (left + width > window.innerWidth - 12) {
+    left = window.innerWidth - 12 - width;
+  }
+  left = Math.max(12, left);
+  panelPos.value = {
+    top: `${barRect.bottom + 6}px`,
+    left: `${left}px`,
+    minWidth: `${width}px`
+  };
+}
+function updateCalendarPosition() {
+  const trigger = clockRef.value;
+  const bar = barRef.value;
+  if (!trigger || !bar) return;
+  const triggerRect = trigger.getBoundingClientRect();
+  const barRect = bar.getBoundingClientRect();
+  const width = 280;
+  let left = triggerRect.right - width;
+  left = Math.max(12, Math.min(left, window.innerWidth - width - 12));
+  calendarPos.value = {
+    top: `${barRect.bottom + 6}px`,
+    left: `${left}px`,
+    minWidth: `${width}px`
+  };
+}
+function updateVolumePosition() {
+  const trigger = volumeRef.value;
+  const bar = barRef.value;
+  if (!trigger || !bar) return;
+  const triggerRect = trigger.getBoundingClientRect();
+  const barRect = bar.getBoundingClientRect();
+  const width = 184;
+  let left = triggerRect.right - width;
+  left = Math.max(12, Math.min(left, window.innerWidth - width - 12));
+  volumePos.value = {
+    top: `${barRect.bottom + 6}px`,
+    left: `${left}px`,
+    minWidth: `${width}px`
+  };
+}
+function toggleApps() {
+  calendarOpen.value = false;
+  volumeOpen.value = false;
+  open.value = !open.value;
+}
+function closeApps() {
+  open.value = false;
+}
+function toggleCalendar() {
+  open.value = false;
+  volumeOpen.value = false;
+  if (!calendarOpen.value) {
+    const now = startOfDay(/* @__PURE__ */ new Date());
+    selectedDate.value = now;
+    viewDate.value = new Date(now.getFullYear(), now.getMonth(), 1);
+  }
+  calendarOpen.value = !calendarOpen.value;
+}
+function closeCalendar() {
+  calendarOpen.value = false;
+}
+function toggleVolume() {
+  open.value = false;
+  calendarOpen.value = false;
+  volumeOpen.value = !volumeOpen.value;
+}
+function closeVolume() {
+  volumeOpen.value = false;
+}
+function onVolumeInput(e) {
+  const value = Number(e.target.value);
+  muted.value = false;
+  volumeStore.setMasterVolume(value);
+}
+function toggleMute() {
+  if (isVolumeMuted.value) {
+    volumeStore.setMasterVolume(volumeBeforeMute.value || 50);
+    muted.value = false;
+  } else {
+    volumeBeforeMute.value = volumeLevel.value;
+    volumeStore.setMasterVolume(0);
+    muted.value = true;
+  }
+}
+function selectDay(date) {
+  selectedDate.value = startOfDay(date);
+}
+function prevMonth() {
+  const d = viewDate.value;
+  viewDate.value = new Date(d.getFullYear(), d.getMonth() - 1, 1);
+}
+function nextMonth() {
+  const d = viewDate.value;
+  viewDate.value = new Date(d.getFullYear(), d.getMonth() + 1, 1);
+}
+async function launch(entry) {
+  if (!entry.application?.id || !entry.command) return;
+  await applicationManager.execAppCommand(entry.application.id, entry.command);
+  closeApps();
+}
+let timer;
+function onKey(e) {
+  if (e.key !== "Escape") return;
+  if (volumeOpen.value) closeVolume();
+  else if (calendarOpen.value) closeCalendar();
+  else if (open.value) closeApps();
+}
+function onResize() {
+  if (open.value) updatePanelPosition();
+  if (calendarOpen.value) updateCalendarPosition();
+  if (volumeOpen.value) updateVolumePosition();
+}
+watch(open, async (isOpen) => {
+  if (!isOpen) return;
+  await nextTick();
+  updatePanelPosition();
+});
+watch(calendarOpen, async (isOpen) => {
+  if (!isOpen) return;
+  await nextTick();
+  updateCalendarPosition();
+});
+watch(volumeOpen, async (isOpen) => {
+  if (!isOpen) return;
+  await nextTick();
+  updateVolumePosition();
+});
+onMounted(() => {
+  tick();
+  timer = setInterval(tick, 3e4);
+  window.addEventListener("keydown", onKey);
+  window.addEventListener("resize", onResize);
+});
+onUnmounted(() => {
+  clearInterval(timer);
+  window.removeEventListener("keydown", onKey);
+  window.removeEventListener("resize", onResize);
+});
+</script>
+
+<template>
+  <header
+    ref="barRef"
+    class="paper-bar owd-desktop__system-bar"
+    :class="{ 'paper-bar--menu-open': open || calendarOpen || volumeOpen }"
+  >
+    <div class="paper-bar__start">
+      <button
+        ref="triggerRef"
+        type="button"
+        class="paper-bar__trigger"
+        :class="{ 'paper-bar__trigger--open': open }"
+        :aria-expanded="open"
+        aria-haspopup="menu"
+        @click="toggleApps()"
+      >
+        <span class="paper-bar__trigger-icon" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <rect
+              x="2"
+              y="2"
+              width="5"
+              height="5"
+              rx="1"
+              fill="currentColor"
+            />
+            <rect
+              x="9"
+              y="2"
+              width="5"
+              height="5"
+              rx="1"
+              fill="currentColor"
+            />
+            <rect
+              x="2"
+              y="9"
+              width="5"
+              height="5"
+              rx="1"
+              fill="currentColor"
+            />
+            <rect
+              x="9"
+              y="9"
+              width="5"
+              height="5"
+              rx="1"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span class="paper-bar__trigger-label">Applications</span>
+        <span v-if="appCount > 0" class="paper-bar__trigger-badge">{{
+          appCount
+        }}</span>
+      </button>
+      <div
+        v-if="runningApps.length > 0"
+        class="paper-bar__running"
+        role="list"
+        aria-label="Open applications"
+      >
+        <button
+          v-for="application in runningApps"
+          :key="`${application.id}-${application.openWindowCount.value}`"
+          type="button"
+          role="listitem"
+          class="paper-bar__app-btn"
+          :class="{ 'paper-bar__app-btn--active': isAppFocused(application) }"
+          :title="application.config.title"
+          :aria-label="application.config.title"
+          @click="focusRunningApp(application)"
+        >
+          <img
+            v-if="application.config.icon && isIconUrl(application.config.icon)"
+            class="paper-bar__app-btn-img"
+            :src="application.config.icon"
+            alt=""
+          />
+          <Icon
+            v-else-if="application.config.icon"
+            :name="application.config.icon"
+            :size="16"
+          />
+          <span v-else class="paper-bar__app-btn-fallback">
+            {{ (application.config.title || "?").charAt(0).toUpperCase() }}
+          </span>
+        </button>
+      </div>
+
+    </div>
+
+    <div class="paper-bar__end">
+      <button
+        type="button"
+        class="paper-bar__icon-btn"
+        :aria-label="appearanceLabel"
+        :aria-pressed="isDark"
+        @click="toggleAppearance()"
+      >
+        <svg
+          v-if="isDark"
+          class="paper-bar__icon-btn-svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle cx="8" cy="8" r="3.25" stroke="currentColor" stroke-width="1.5" />
+          <path
+            d="M8 1.25v1.5M8 13.25v1.5M1.25 8h1.5M13.25 8h1.5M3.1 3.1l1.06 1.06M11.84 11.84l1.06 1.06M3.1 12.9l1.06-1.06M11.84 4.16l1.06-1.06"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg
+          v-else
+          class="paper-bar__icon-btn-svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M8 2.5a5.5 5.5 0 1 0 0 11 4 4 0 0 1 0-11z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <button
+        ref="volumeRef"
+        type="button"
+        class="paper-bar__icon-btn"
+        :class="{ 'paper-bar__icon-btn--open': volumeOpen }"
+        :aria-expanded="volumeOpen"
+        aria-haspopup="dialog"
+        :aria-label="volumeLabel"
+        @click="toggleVolume()"
+      >
+        <svg
+          v-if="isVolumeMuted"
+          class="paper-bar__icon-btn-svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M3 6.5v3h2.5L9 13V3L5.5 6.5H3z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M11.5 6l3 4-3 4M14.5 6l-3 4 3 4"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg
+          v-else-if="volumeLevel <= 33"
+          class="paper-bar__icon-btn-svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M3 6.5v3h2.5L9 13V3L5.5 6.5H3z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M11 8.5c0-1-.5-1.75-1-2.25"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg
+          v-else-if="volumeLevel <= 66"
+          class="paper-bar__icon-btn-svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M3 6.5v3h2.5L9 13V3L5.5 6.5H3z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M10.5 6.5a3 3 0 0 1 0 3M12.5 5a5 5 0 0 1 0 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg
+          v-else
+          class="paper-bar__icon-btn-svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M3 6.5v3h2.5L9 13V3L5.5 6.5H3z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M10.5 5.5a4.5 4.5 0 0 1 0 5M12.5 3.5a7.5 7.5 0 0 1 0 9"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
+
+      <button
+        ref="clockRef"
+        type="button"
+        class="paper-bar__icon-btn paper-bar__time"
+        :class="{ 'paper-bar__icon-btn--open': calendarOpen }"
+        :aria-expanded="calendarOpen"
+        aria-haspopup="dialog"
+        :aria-label="`Calendar, ${monthLabel}`"
+        @click="toggleCalendar()"
+      >
+        <time :datetime="selectedDate.toISOString().slice(0, 10)">{{ time }}</time>
+      </button>
+    </div>
+  </header>
+
+  <Teleport to="body">
+    <Transition name="paper-menu">
+      <div v-if="open" class="paper-menu" role="presentation">
+        <button
+          type="button"
+          class="paper-menu__scrim"
+          aria-label="Close menu"
+          @click="closeApps()"
+        />
+        <nav
+          class="paper-menu__panel"
+          role="menu"
+          aria-label="Applications"
+          :style="{
+  top: panelPos.top,
+  left: panelPos.left,
+  minWidth: panelPos.minWidth
+}"
+        >
+          <header class="paper-menu__header">
+            <p class="paper-menu__eyebrow">Launch</p>
+            <p class="paper-menu__title">Applications</p>
+          </header>
+
+          <p v-if="apps.length === 0" class="paper-menu__empty">
+            No applications installed.
+          </p>
+
+          <div v-else class="paper-menu__body">
+            <section
+              v-for="group in groupedApps"
+              :key="group.category"
+              class="paper-menu__section"
+            >
+              <h2
+                v-if="showGroupHeaders"
+                class="paper-menu__section-title"
+              >
+                {{ $te(`applications.categories.${group.category}`) ? $t(`applications.categories.${group.category}`) : group.category }}
+              </h2>
+              <ul class="paper-menu__list" role="none">
+                <li
+                  v-for="(entry, i) in group.entries"
+                  :key="`${entry.application.id}:${entry.command}:${i}`"
+                  role="none"
+                >
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="paper-menu__item"
+                    @click="launch(entry)"
+                  >
+                    <span class="paper-menu__icon" aria-hidden="true">
+                      <img
+                        v-if="entry.icon && isIconUrl(entry.icon)"
+                        class="paper-menu__icon-img"
+                        :src="entry.icon"
+                        alt=""
+                      />
+                      <Icon
+                        v-else-if="entry.icon"
+                        :name="entry.icon"
+                        :size="18"
+                      />
+                      <span v-else class="paper-menu__icon-fallback">
+                        {{ (entry.title || "?").charAt(0).toUpperCase() }}
+                      </span>
+                    </span>
+                    <span class="paper-menu__copy">
+                      <span class="paper-menu__label">{{ entry.title }}</span>
+                      <span
+                        v-if="entrySubtitle(entry)"
+                        class="paper-menu__meta"
+                      >
+                        {{ entrySubtitle(entry) }}
+                      </span>
+                    </span>
+                    <span class="paper-menu__chevron" aria-hidden="true">
+                      <svg width="14" height="14" viewBox="0 0 14 14">
+                        <path
+                          d="M5 3l4 4-4 4"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </li>
+              </ul>
+            </section>
+          </div>
+        </nav>
+      </div>
+    </Transition>
+
+    <Transition name="paper-menu">
+      <div v-if="calendarOpen" class="paper-menu" role="presentation">
+        <button
+          type="button"
+          class="paper-menu__scrim"
+          aria-label="Close calendar"
+          @click="closeCalendar()"
+        />
+        <div
+          class="paper-calendar paper-menu__panel"
+          role="dialog"
+          aria-label="Calendar"
+          :style="{
+  top: calendarPos.top,
+  left: calendarPos.left,
+  minWidth: calendarPos.minWidth
+}"
+        >
+          <header class="paper-calendar__nav">
+            <button
+              type="button"
+              class="paper-calendar__nav-btn"
+              aria-label="Previous month"
+              @click="prevMonth()"
+            >
+              ‹
+            </button>
+            <p class="paper-calendar__month">{{ monthLabel }}</p>
+            <button
+              type="button"
+              class="paper-calendar__nav-btn"
+              aria-label="Next month"
+              @click="nextMonth()"
+            >
+              ›
+            </button>
+          </header>
+
+          <div class="paper-calendar__weekdays" aria-hidden="true">
+            <span
+              v-for="label in WEEKDAYS"
+              :key="label"
+              class="paper-calendar__weekday"
+            >
+              {{ label }}
+            </span>
+          </div>
+
+          <div class="paper-calendar__grid" role="grid">
+            <button
+              v-for="cell in calendarCells"
+              :key="cell.key"
+              type="button"
+              class="paper-calendar__day"
+              :class="{
+  'paper-calendar__day--empty': !cell.date,
+  'paper-calendar__day--today': cell.date && isSameDay(cell.date, today),
+  'paper-calendar__day--selected': cell.date && isSameDay(cell.date, selectedDate)
+}"
+              role="gridcell"
+              :tabindex="cell.date ? 0 : -1"
+              :disabled="!cell.date"
+              :aria-label="
+  cell.date ? cell.date.toLocaleDateString(void 0, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  }) : void 0
+"
+              :aria-selected="
+  cell.date ? isSameDay(cell.date, selectedDate) : void 0
+"
+              @click="cell.date && selectDay(cell.date)"
+            >
+              {{ cell.date?.getDate() }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <Transition name="paper-menu">
+      <div v-if="volumeOpen" class="paper-menu" role="presentation">
+        <button
+          type="button"
+          class="paper-menu__scrim"
+          aria-label="Close volume"
+          @click="closeVolume()"
+        />
+        <div
+          class="paper-volume paper-menu__panel"
+          role="dialog"
+          aria-label="Volume"
+          :style="{
+  top: volumePos.top,
+  left: volumePos.left,
+  minWidth: volumePos.minWidth
+}"
+        >
+          <div class="paper-volume__row">
+            <button
+              type="button"
+              class="paper-volume__mute"
+              :aria-label="isVolumeMuted ? 'Unmute' : 'Mute'"
+              :aria-pressed="isVolumeMuted"
+              @click="toggleMute()"
+            >
+              <svg
+                v-if="isVolumeMuted"
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  d="M3 6.5v3h2.5L9 13V3L5.5 6.5H3z"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M11.5 6l3 4-3 4M14.5 6l-3 4 3 4"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+              <svg
+                v-else
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  d="M3 6.5v3h2.5L9 13V3L5.5 6.5H3z"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M10.5 5.5a4.5 4.5 0 0 1 0 5M12.5 3.5a7.5 7.5 0 0 1 0 9"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+            <input
+              type="range"
+              class="paper-volume__slider"
+              min="0"
+              max="100"
+              step="1"
+              :value="volumeLevel"
+              :aria-valuenow="volumeLevel"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-label="Volume level"
+              @input="onVolumeInput"
+            />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.paper-bar{align-items:center;background:var(--paper-surface);border-bottom:1px solid var(--paper-border);display:flex;flex-shrink:0;gap:1rem;height:var(--paper-bar-height);padding:0 1rem}.paper-bar--menu-open{border-bottom-color:var(--paper-border)}.paper-bar__start{gap:.375rem}.paper-bar__running,.paper-bar__start{align-items:center;display:flex;min-width:0}.paper-bar__running{gap:.125rem;max-width:min(40vw,24rem);overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none}.paper-bar__running::-webkit-scrollbar{display:none}.paper-bar__app-btn{align-items:center;background:none;border:1px solid transparent;border-radius:var(--paper-radius);color:var(--paper-text-secondary);cursor:pointer;display:inline-flex;flex-shrink:0;height:1.625rem;justify-content:center;margin:0;opacity:.72;padding:0;transition:border-color .12s ease,background-color .12s ease,color .12s ease,opacity .12s ease;width:1.625rem}.paper-bar__app-btn:hover{background:color-mix(in srgb,var(--paper-bg) 80%,transparent);opacity:1}.paper-bar__app-btn--active,.paper-bar__app-btn--active:hover{background:var(--paper-accent-soft);border-color:var(--paper-border);color:var(--paper-accent);opacity:1}.paper-bar__app-btn-img{height:1rem;-o-object-fit:contain;object-fit:contain;width:1rem}.paper-bar__app-btn-fallback{font-size:.6875rem;font-weight:600;line-height:1}.paper-bar__trigger{align-items:center;background:var(--paper-surface);border:1px solid var(--paper-border);border-radius:var(--paper-radius);color:var(--paper-text);cursor:pointer;display:inline-flex;font:inherit;font-size:.8125rem;font-weight:500;gap:.5rem;line-height:1;margin:0;padding:.375rem .75rem .375rem .625rem;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,color .15s ease}.paper-bar__trigger:hover{background:var(--paper-bg);border-color:var(--paper-border)}.paper-bar__trigger--open,.paper-bar__trigger--open:hover{background:var(--paper-accent-soft);border-color:color-mix(in srgb,var(--paper-accent) 35%,var(--paper-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--paper-accent) 12%,transparent);color:var(--paper-accent)}.paper-bar__trigger-icon{color:var(--paper-text-secondary);display:flex}.paper-bar__trigger--open .paper-bar__trigger-icon{color:var(--paper-accent)}.paper-bar__trigger-badge{align-items:center;background:var(--paper-bg);border-radius:var(--paper-radius-pill);color:var(--paper-text-secondary);display:inline-flex;font-size:.6875rem;font-variant-numeric:tabular-nums;font-weight:600;height:1.125rem;justify-content:center;min-width:1.125rem;padding:0 .25rem}.paper-bar__trigger--open .paper-bar__trigger-badge{background:var(--paper-accent-soft);color:var(--paper-accent)}.paper-bar__end{align-items:center;display:flex;gap:.125rem;margin-left:auto;margin-right:-.375rem}.paper-bar__icon-btn{align-items:center;background:none;border:none;border-radius:var(--paper-radius);color:var(--paper-text-secondary);cursor:pointer;display:inline-flex;font:inherit;justify-content:center;margin:0;padding:.25rem .375rem;transition:background-color .12s ease,color .12s ease}.paper-bar__icon-btn-svg{display:block}.paper-bar__time{font-family:var(--paper-mono);font-size:.75rem;font-variant-numeric:tabular-nums}.paper-bar__icon-btn:hover{background:color-mix(in srgb,var(--paper-bg) 80%,transparent);color:var(--paper-text)}.paper-bar__icon-btn--open,.paper-bar__icon-btn--open:hover{background:var(--paper-accent-soft);color:var(--paper-accent)}.paper-menu{inset:0;pointer-events:none;position:fixed;z-index:var(--paper-z-menu)}.paper-menu__scrim{background:var(--paper-scrim);border:0;cursor:default;inset:0;margin:0;padding:0;pointer-events:auto;position:absolute}.paper-menu__panel{background-color:var(--paper-menu-bg);border:1px solid var(--paper-border);border-radius:var(--paper-radius);box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;max-height:min(28rem,calc(100dvh - var(--paper-bar-height) - 1.5rem));overflow:hidden;pointer-events:auto;position:fixed}.paper-menu__header{background-color:var(--paper-menu-header-bg);border-bottom:1px solid var(--paper-border);flex-shrink:0;padding:.875rem 1rem .625rem}.paper-menu__eyebrow{color:var(--paper-accent);font-size:.6875rem;font-weight:600;letter-spacing:.08em;margin:0;text-transform:uppercase}.paper-menu__title{color:var(--paper-text);font-size:1rem;font-weight:600;letter-spacing:-.02em;margin:.125rem 0 0}.paper-menu__body{background-color:var(--paper-menu-bg);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:.25rem 0 .375rem}.paper-menu__section+.paper-menu__section{border-top:1px solid var(--paper-border);margin-top:.25rem;padding-top:.25rem}.paper-menu__section-title{color:var(--paper-text-tertiary);font-size:.6875rem;font-weight:600;letter-spacing:.06em;margin:0;padding:.5rem 1rem .25rem;text-transform:uppercase}.paper-menu__list{display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;padding:0 .375rem}.paper-menu__empty{background-color:var(--paper-menu-bg);color:var(--paper-text-secondary);font-size:.8125rem;margin:0;padding:1rem 1rem 1.125rem}.paper-menu__item{background:none;border:none;color:var(--paper-text);cursor:pointer;font:inherit;gap:.75rem;margin:0;padding:.5rem .625rem;text-align:left;transition:background-color .12s ease,color .12s ease;width:100%}.paper-menu__icon,.paper-menu__item{align-items:center;border-radius:var(--paper-radius);display:flex}.paper-menu__icon{background:var(--paper-bg);color:var(--paper-text-secondary);flex-shrink:0;height:2rem;justify-content:center;width:2rem}.paper-menu__icon-img{height:1.125rem;-o-object-fit:contain;object-fit:contain;width:1.125rem}.paper-menu__icon-fallback{font-size:.8125rem;font-weight:600;line-height:1}.paper-menu__copy{display:flex;flex:1;flex-direction:column;gap:.125rem;min-width:0}.paper-menu__label{font-size:.875rem;font-weight:500}.paper-menu__label,.paper-menu__meta{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.paper-menu__meta{color:var(--paper-text-secondary);font-size:.75rem}.paper-menu__chevron{color:var(--paper-text-tertiary);flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .12s ease,transform .12s ease,color .12s ease}.paper-menu__item:focus-visible,.paper-menu__item:hover{background:var(--paper-accent-soft);outline:none}.paper-menu__item:focus-visible .paper-menu__label,.paper-menu__item:hover .paper-menu__label{color:var(--paper-accent)}.paper-menu__item:focus-visible .paper-menu__icon,.paper-menu__item:hover .paper-menu__icon{background:color-mix(in srgb,var(--paper-accent) 12%,#fff);color:var(--paper-accent)}.paper-menu__item:focus-visible .paper-menu__chevron,.paper-menu__item:hover .paper-menu__chevron{color:var(--paper-accent);opacity:1;transform:translateX(0)}.paper-menu-enter-active,.paper-menu-leave-active{transition:opacity .18s ease}.paper-menu-enter-active .paper-menu__panel,.paper-menu-leave-active .paper-menu__panel{transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1)}.paper-menu-enter-from,.paper-menu-leave-to{opacity:0}.paper-menu-enter-from .paper-menu__panel,.paper-menu-leave-to .paper-menu__panel{opacity:0;transform:translateY(-6px) scale(.98)}.paper-calendar{background-color:var(--paper-menu-bg);padding:.75rem}.paper-calendar__nav{align-items:center;display:flex;gap:.5rem;justify-content:space-between;margin-bottom:.75rem}.paper-calendar__month{color:var(--paper-text);flex:1;font-size:.875rem;font-weight:600;margin:0;text-align:center}.paper-calendar__nav-btn{align-items:center;background:var(--paper-surface);border:1px solid var(--paper-border);border-radius:var(--paper-radius);color:var(--paper-text-secondary);cursor:pointer;display:flex;font-size:1.125rem;height:1.75rem;justify-content:center;line-height:1;margin:0;padding:0;width:1.75rem}.paper-calendar__nav-btn:hover{background:var(--paper-bg);border-color:var(--paper-border);color:var(--paper-text)}.paper-calendar__weekdays{display:grid;gap:.125rem;grid-template-columns:repeat(7,1fr);margin-bottom:.25rem}.paper-calendar__weekday{color:var(--paper-text-tertiary);font-size:.6875rem;font-weight:600;text-align:center}.paper-calendar__grid{display:grid;gap:.125rem;grid-template-columns:repeat(7,1fr)}.paper-calendar__day{align-items:center;aspect-ratio:1;background:none;border:1px solid transparent;border-radius:var(--paper-radius);color:var(--paper-text);cursor:pointer;display:flex;font:inherit;font-size:.8125rem;font-variant-numeric:tabular-nums;justify-content:center;margin:0;min-height:2rem;padding:0}.paper-calendar__day--empty{pointer-events:none;visibility:hidden}.paper-calendar__day:not(.paper-calendar__day--empty):hover{background:var(--paper-bg)}.paper-calendar__day--today:not(.paper-calendar__day--selected){border-color:var(--paper-border);font-weight:600}.paper-calendar__day--selected{border-color:color-mix(in srgb,var(--paper-accent) 40%,var(--paper-border));color:var(--paper-accent);font-weight:600}.paper-calendar__day--selected,.paper-calendar__day--selected:hover{background:var(--paper-accent-soft)}.paper-volume{background-color:var(--paper-menu-bg);padding:.625rem .75rem}.paper-volume__row{align-items:center;display:flex;gap:.625rem}.paper-volume__mute{align-items:center;background:var(--paper-surface);border:1px solid var(--paper-border);border-radius:var(--paper-radius);color:var(--paper-text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:1.75rem;justify-content:center;margin:0;padding:0;width:1.75rem}.paper-volume__mute:hover{background:var(--paper-bg);border-color:var(--paper-border);color:var(--paper-text)}.paper-volume__slider{accent-color:var(--paper-accent);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--paper-border);border:none;border-radius:var(--paper-radius-pill);cursor:pointer;flex:1;height:.25rem;margin:0;min-width:0;padding:0}.paper-volume__slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--paper-surface);border:1px solid var(--paper-border);border-radius:var(--paper-radius-circle);box-shadow:none;cursor:pointer;height:.875rem;width:.875rem}.paper-volume__slider::-moz-range-thumb{background:var(--paper-surface);border:1px solid var(--paper-border);border-radius:var(--paper-radius-circle);box-shadow:none;cursor:pointer;height:.875rem;width:.875rem}.paper-volume__slider:focus-visible{outline:2px solid color-mix(in srgb,var(--paper-accent) 40%,transparent);outline-offset:2px}
+</style>