@celestia-island/hikari 0.4.4

package/src/components/HkMediaSlider.scss

@@ -0,0 +1,54 @@
+.hk-media-slider {
+  position: relative;
+  height: 6px;
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-muted) / 22%);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+
+.hk-media-slider[data-size="sm"] {
+  height: 5px;
+}
+
+.hk-media-slider.is-disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.hk-media-slider-buffered {
+  position: absolute;
+  inset: 0 auto 0 0;
+  height: 100%;
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-muted) / 40%);
+}
+
+.hk-media-slider-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  height: 100%;
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-primary));
+}
+
+.hk-media-slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin-left: -6px;
+  border-radius: 50%;
+  background: rgb(var(--color-primary));
+  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity var(--hi-duration-short, 0.15s);
+  pointer-events: none;
+}
+
+.hk-media-slider:hover .hk-media-slider-thumb,
+.hk-media-slider:active .hk-media-slider-thumb {
+  opacity: 1;
+}

package/src/components/HkMediaSlider.tsx

@@ -0,0 +1,81 @@
+import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
+
+import "./HkMediaSlider.scss";
+
+/**
+ * Generic draggable 0..1 track — the one primitive both the seek bar and the
+ * volume slider are built on. Pointer-drag (with capture) emits the ratio
+ * continuously so consumers can scrub live. An optional secondary `buffered`
+ * fill renders behind the played fill.
+ */
+export default defineComponent({
+  name: "HkMediaSlider",
+  props: {
+    ratio: { type: Number, required: true },
+    buffered: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: undefined },
+    size: { type: String as () => "md" | "sm", default: "md" },
+  },
+  emits: {
+    "update:ratio": (_ratio: number) => true,
+  },
+  setup(props, { emit }) {
+    const trackRef = ref<HTMLElement | null>(null);
+    let dragging = false;
+
+    function ratioFrom(clientX: number): number {
+      const el = trackRef.value;
+      if (!el) return 0;
+      const rect = el.getBoundingClientRect();
+      return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    }
+    function onDown(e: PointerEvent) {
+      if (props.disabled) return;
+      dragging = true;
+      (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+      emit("update:ratio", ratioFrom(e.clientX));
+    }
+    function onMove(e: PointerEvent) {
+      if (dragging) emit("update:ratio", ratioFrom(e.clientX));
+    }
+    function onUp() {
+      dragging = false;
+    }
+
+    onMounted(() => {
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    });
+
+    return () => (
+      <div
+        ref={trackRef}
+        class={[
+          "hk-media-slider",
+          props.disabled && "is-disabled",
+        ].filter(Boolean).join(" ")}
+        data-size={props.size}
+        role="slider"
+        tabindex={-1}
+        aria-label={props.ariaLabel}
+        aria-valuenow={Math.round(props.ratio * 100)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        onPointerdown={onDown}
+      >
+        {props.buffered > 0 && (
+          <div class="hk-media-slider-buffered" style={{ width: `${props.buffered * 100}%` }} />
+        )}
+        <div class="hk-media-slider-fill" style={{ width: `${props.ratio * 100}%` }} />
+        <div class="hk-media-slider-thumb" style={{ left: `${props.ratio * 100}%` }} />
+      </div>
+    );
+  },
+});

package/src/components/HkMediaVisualizer.scss

@@ -0,0 +1,7 @@
+.hk-media-visualizer {
+  width: 100%;
+  height: 8rem;
+  display: block;
+  background: rgb(var(--color-muted) / 6%);
+  border-radius: var(--radius-sm);
+}

package/src/components/HkMediaVisualizer.tsx

@@ -0,0 +1,119 @@
+import { defineComponent, onBeforeUnmount, ref, watch, type PropType, type Ref } from "vue";
+
+import { onFrame, type AnimationHandle } from "../runtime/animationBus";
+import "./HkMediaVisualizer.scss";
+
+/**
+ * Pluggable audio spectrum visualiser. Point it at any media element ref and
+ * it draws an analyser-driven frequency bar chart while that element plays
+ * (and stops otherwise). Self-contained WebAudio wiring — the
+ * `MediaElementAudioSourceNode` is created lazily and only once per element.
+ *
+ * The draw loop registers with the unified animation bus via `onFrame`
+ * (sync priority) rather than a private rAF, so it shares the same loop
+ * lifecycle as every other per-frame consumer and the bus's
+ * idle-auto-shutdown applies to it too.
+ */
+export default defineComponent({
+  name: "HkMediaVisualizer",
+  props: {
+    mediaRef: {
+      type: Object as PropType<Ref<HTMLMediaElement | null>>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const canvasRef = ref<HTMLCanvasElement | null>(null);
+    let audioCtx: AudioContext | null = null;
+    let analyser: AnalyserNode | null = null;
+    let source: MediaElementAudioSourceNode | null = null;
+    let frameHandle: AnimationHandle | null = null;
+
+    function start() {
+      const media = props.mediaRef.value;
+      const canvas = canvasRef.value;
+      if (!media || !canvas) return;
+      try {
+        if (!audioCtx) {
+          audioCtx = new (window.AudioContext ||
+            (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+          analyser = audioCtx.createAnalyser();
+          analyser.fftSize = 128;
+          source = audioCtx.createMediaElementSource(media);
+          source.connect(analyser);
+          analyser.connect(audioCtx.destination);
+        }
+        if (audioCtx.state === "suspended") void audioCtx.resume();
+      } catch {
+        return;
+      }
+      const ctx2d = canvas.getContext("2d");
+      if (!ctx2d || !analyser) return;
+      canvas.width = canvas.clientWidth * 2;
+      canvas.height = canvas.clientHeight * 2;
+      const data = new Uint8Array(analyser.frequencyBinCount);
+
+      function draw() {
+        if (!analyser || !ctx2d || !canvas) return;
+        analyser.getByteFrequencyData(data);
+        const w = canvas.width;
+        const h = canvas.height;
+        ctx2d.clearRect(0, 0, w, h);
+        const n = data.length;
+        const bw = w / n;
+        for (let i = 0; i < n; i++) {
+          const v = data[i] / 255;
+          const bh = v * h * 0.85;
+          const hue = 200 + (i / n) * 80;
+          ctx2d.fillStyle = `hsl(${hue}, 70%, 55%)`;
+          ctx2d.fillRect(i * bw, h - bh, bw - 1, bh);
+        }
+        // No self-reschedule — onFrame keeps firing until disconnect().
+      }
+
+      // Drop any prior handle (e.g. a replay after pause) before subscribing.
+      if (frameHandle) {
+        frameHandle.disconnect();
+        frameHandle = null;
+      }
+      frameHandle = onFrame(draw, "sync");
+    }
+
+    function stop() {
+      if (frameHandle) {
+        frameHandle.disconnect();
+        frameHandle = null;
+      }
+    }
+
+    let cleanupListeners: (() => void) | null = null;
+    function attach(media: HTMLMediaElement | null) {
+      cleanupListeners?.();
+      cleanupListeners = null;
+      if (!media) return;
+      media.addEventListener("play", start);
+      media.addEventListener("pause", stop);
+      media.addEventListener("ended", stop);
+      cleanupListeners = () => {
+        media.removeEventListener("play", start);
+        media.removeEventListener("pause", stop);
+        media.removeEventListener("ended", stop);
+      };
+    }
+
+    watch(() => props.mediaRef.value, attach, { immediate: true });
+
+    onBeforeUnmount(() => {
+      stop();
+      cleanupListeners?.();
+      source?.disconnect();
+      analyser?.disconnect();
+      audioCtx?.close().catch(() => {});
+      audioCtx = null;
+      analyser = null;
+      source = null;
+    });
+
+    return () => <canvas ref={canvasRef} class="hk-media-visualizer" />;
+  },
+});

package/src/components/HkMinimap.scss

@@ -0,0 +1,76 @@
+.hk-minimap {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  z-index: 50;
+  width: 160px;
+  background: rgb(var(--color-surface) / 0.82);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--radius-sm);
+  backdrop-filter: blur(var(--blur-md));
+  cursor: pointer;
+  overflow: hidden;
+  pointer-events: auto;
+
+  &:hover {
+    border-color: rgb(var(--color-primary) / 0.3);
+  }
+
+  &[data-dragging] {
+    cursor: grabbing;
+  }
+}
+
+.hk-minimap-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.hk-mm-zoom-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 3px 8px;
+  border-top: 1px solid var(--border-faint);
+  pointer-events: auto;
+}
+
+.hk-mm-zoom-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: rgb(var(--color-text));
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+
+  &:hover:not(:disabled) {
+    background: rgb(var(--color-primary) / 0.1);
+    color: rgb(var(--color-primary));
+  }
+
+  &:disabled {
+    color: rgb(var(--color-muted) / 40%);
+    cursor: not-allowed;
+  }
+}
+
+.hk-mm-zoom-reset-btn svg {
+  stroke-width: 2px;
+}
+
+.hk-mm-zoom-label {
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--color-muted));
+  min-width: 30px;
+  text-align: center;
+  user-select: none;
+}

package/src/components/HkMinimap.tsx

@@ -0,0 +1,255 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, type PropType } from "vue";
+import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+
+import { useI18n } from "../i18n/context";
+import "./HkMinimap.scss";
+
+export interface MinimapBox {
+  id: string;
+  bounds: { x: number; y: number; w: number; h: number };
+  color: string;
+}
+
+export interface MinimapRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/**
+ * Generic minimap / overview overlay for pannable+zoomable surfaces.
+ *
+ * Renders an optionally-zoomed content area as an SVG scaled to fit, with
+ * coloured boxes (or an image background for an image navigator), a hub
+ * marker, the current viewport rectangle, and a small zoom bar. Dragging
+ * inside the map pans the viewport via the `panDelta` event. The math
+ * assumes the main surface uses `translate(panX, panY) scale(zoom)` with
+ * `transform-origin: 0 0` — the same model HImageViewer uses.
+ */
+export default defineComponent({
+  name: "HkMinimap",
+  props: {
+    boxes: { type: Array as PropType<MinimapBox[]>, default: () => [] },
+    hubPos: { type: Object as PropType<{ x: number; y: number } | null>, default: null },
+    /** Optional image rendered as the minimap background (image navigator).
+     *  When set, the minimap renders even with no boxes. */
+    imageSrc: { type: String, default: undefined },
+    imageBounds: { type: Object as PropType<MinimapRect>, default: undefined },
+    zoom: { type: Number, default: 1 },
+    panX: { type: Number, default: 0 },
+    panY: { type: Number, default: 0 },
+    viewportWidth: { type: Number, default: 800 },
+    viewportHeight: { type: Number, default: 600 },
+    contentBounds: {
+      type: Object as PropType<MinimapRect>,
+      default: () => ({ x: 0, y: 0, w: 1200, h: 800 }),
+    },
+    zoomPercent: { type: Number, default: 100 },
+    canZoomIn: { type: Boolean, default: true },
+    canZoomOut: { type: Boolean, default: true },
+    /** Show the reset/fit button in the zoom bar (chest only rendered it
+     *  when a reset handler was wired up). */
+    showReset: { type: Boolean, default: false },
+  },
+  emits: {
+    zoomIn: () => true,
+    zoomOut: () => true,
+    reset: () => true,
+    panDelta: (_dx: number, _dy: number) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const svgW = 160;
+    const svgH = 110;
+    const rootRef = ref<HTMLElement | null>(null);
+    const dragging = ref(false);
+    const dragStart = ref({ x: 0, y: 0 });
+
+    const cb = computed(() => props.contentBounds);
+    const overpanW = computed(() => Math.max(props.contentBounds.w * 0.5, props.viewportWidth * 0.3));
+    const overpanH = computed(() => Math.max(props.contentBounds.h * 0.5, props.viewportHeight * 0.3));
+
+    const mapRect = computed(() => ({
+      x: cb.value.x - overpanW.value,
+      y: cb.value.y - overpanH.value,
+      w: cb.value.w + overpanW.value * 2,
+      h: cb.value.h + overpanH.value * 2,
+    }));
+
+    const scale = computed(() => {
+      const sx = svgW / mapRect.value.w;
+      const sy = svgH / mapRect.value.h;
+      return Math.min(sx, sy);
+    });
+
+    const contentOffset = computed(() => {
+      const sw = mapRect.value.w * scale.value;
+      const sh = mapRect.value.h * scale.value;
+      return { ox: (svgW - sw) / 2, oy: (svgH - sh) / 2 };
+    });
+
+    function toMap(wx: number, wy: number): [number, number] {
+      const s = scale.value;
+      const { ox, oy } = contentOffset.value;
+      return [(wx - mapRect.value.x) * s + ox, (wy - mapRect.value.y) * s + oy];
+    }
+
+    const viewportRect = computed(() => {
+      const z = props.zoom;
+      const tl = toMap(-props.panX / z, -props.panY / z);
+      const br = toMap(-props.panX / z + props.viewportWidth / z, -props.panY / z + props.viewportHeight / z);
+      return { x: tl[0], y: tl[1], w: Math.max(1, br[0] - tl[0]), h: Math.max(1, br[1] - tl[1]) };
+    });
+
+    function onDown(e: PointerEvent) {
+      if ((e.target as HTMLElement).closest(".hk-mm-zoom-bar")) return;
+      e.stopPropagation();
+      e.preventDefault();
+      dragging.value = true;
+      dragStart.value = { x: e.clientX, y: e.clientY };
+      rootRef.value?.setPointerCapture(e.pointerId);
+    }
+    function onMove(e: PointerEvent) {
+      if (!dragging.value) return;
+      e.stopPropagation();
+      const dx = e.clientX - dragStart.value.x;
+      const dy = e.clientY - dragStart.value.y;
+      dragStart.value = { x: e.clientX, y: e.clientY };
+      if (scale.value > 0) {
+        emit("panDelta", (-dx / scale.value) * props.zoom, (-dy / scale.value) * props.zoom);
+      }
+    }
+    function onUp(e: PointerEvent) {
+      if (!dragging.value) return;
+      e.stopPropagation();
+      dragging.value = false;
+      rootRef.value?.releasePointerCapture(e.pointerId);
+    }
+
+    onMounted(() => {
+      const el = rootRef.value;
+      if (!el) return;
+      el.addEventListener("pointerdown", onDown);
+      el.addEventListener("pointermove", onMove);
+      el.addEventListener("pointerup", onUp);
+      el.addEventListener("pointercancel", onUp);
+    });
+    onBeforeUnmount(() => {
+      const el = rootRef.value;
+      if (!el) return;
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointercancel", onUp);
+    });
+
+    return () => {
+      if (props.boxes.length === 0 && !props.imageSrc) return null;
+
+      const s = scale.value;
+      const vr = viewportRect.value;
+
+      const ib = props.imageBounds ?? props.contentBounds;
+      const imgPos = props.imageSrc ? toMap(ib.x, ib.y) : null;
+
+      const boxRects = props.boxes.map((b) => {
+        const p = toMap(b.bounds.x, b.bounds.y);
+        return (
+          <rect
+            key={`mm-${b.id}`}
+            x={p[0]}
+            y={p[1]}
+            width={b.bounds.w * s}
+            height={b.bounds.h * s}
+            rx={2}
+            fill={b.color}
+            opacity="0.28"
+            stroke={b.color}
+            stroke-width="0.6"
+          />
+        );
+      });
+
+      const hubP = props.hubPos ? toMap(props.hubPos.x, props.hubPos.y) : null;
+
+      return (
+        <div
+          ref={rootRef}
+          class="hk-minimap"
+          data-dragging={dragging.value ? "" : undefined}
+        >
+          <svg viewBox={`0 0 ${svgW} ${svgH}`} width={svgW} height={svgH} class="hk-minimap-svg">
+            {imgPos && (
+              <image
+                href={props.imageSrc}
+                x={imgPos[0]}
+                y={imgPos[1]}
+                width={ib.w * s}
+                height={ib.h * s}
+                preserveAspectRatio="none"
+                class="hk-mm-image"
+              />
+            )}
+            {boxRects}
+            {hubP && (
+              <circle
+                cx={hubP[0]}
+                cy={hubP[1]}
+                r={3}
+                fill="rgb(var(--color-primary))"
+                filter="drop-shadow(0 0 2px rgb(var(--color-primary) / 0.6))"
+              />
+            )}
+            <rect
+              x={vr.x}
+              y={vr.y}
+              width={Math.max(1, vr.w)}
+              height={Math.max(1, vr.h)}
+              fill="none"
+              stroke="rgb(var(--color-primary))"
+              stroke-width="1"
+              stroke-dasharray="3 2"
+              rx="2"
+              opacity="0.85"
+            />
+          </svg>
+          <div class="hk-mm-zoom-bar">
+            <button
+              class="hk-mm-zoom-btn"
+              type="button"
+              onClick={() => emit("zoomOut")}
+              disabled={!props.canZoomOut}
+              aria-label={t("hk.zoomToolbar.zoomOut", "Zoom out")}
+              title={t("hk.zoomToolbar.zoomOut", "Zoom out")}
+            >
+              <ZoomOut size={12} />
+            </button>
+            <span class="hk-mm-zoom-label">{props.zoomPercent}%</span>
+            <button
+              class="hk-mm-zoom-btn"
+              type="button"
+              onClick={() => emit("zoomIn")}
+              disabled={!props.canZoomIn}
+              aria-label={t("hk.zoomToolbar.zoomIn", "Zoom in")}
+              title={t("hk.zoomToolbar.zoomIn", "Zoom in")}
+            >
+              <ZoomIn size={12} />
+            </button>
+            {props.showReset && (
+              <button
+                class="hk-mm-zoom-btn hk-mm-zoom-reset-btn"
+                type="button"
+                onClick={() => emit("reset")}
+                aria-label={t("hk.zoomToolbar.reset", "Reset zoom")}
+                title={t("hk.zoomToolbar.reset", "Reset zoom")}
+              >
+                <Maximize2 size={11} />
+              </button>
+            )}
+          </div>
+        </div>
+      );
+    };
+  },
+});