@celestia-island/hikari 0.4.4

package/src/components/HkMarkdownRenderer.scss

@@ -0,0 +1,141 @@
+.hk-markdown {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--hi-color-text-primary, #c9d1d9);
+  position: relative;
+}
+
+.hk-markdown-body {
+  min-height: 120px;
+}
+
+.hk-markdown h1,
+.hk-markdown h2,
+.hk-markdown h3 {
+  font-weight: 700;
+  margin: 1.25em 0 0.5em;
+  color: var(--hi-color-text-primary, #c9d1d9);
+}
+
+.hk-markdown h1 { font-size: 1.5em; }
+.hk-markdown h2 { font-size: 1.25em; }
+.hk-markdown h3 { font-size: 1.1em; }
+
+.hk-markdown p {
+  margin: 0.5em 0;
+}
+
+.hk-markdown ul,
+.hk-markdown ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.hk-markdown li {
+  margin: 0.25em 0;
+}
+
+.hk-markdown code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+  background: var(--hi-color-bg-subtle, #21262d);
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+}
+
+.hk-md-code {
+  position: relative;
+  margin: 0.75em 0;
+  padding: 1em;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  user-select: none;
+  cursor: pointer;
+  overflow-x: auto;
+  background: var(--hi-color-bg-subtle, #0d1117);
+}
+
+.hk-md-code pre {
+  margin: 0;
+}
+
+.hk-md-code-lang {
+  position: absolute;
+  top: 0.25em;
+  right: 0.5em;
+  font-size: 0.625em;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  opacity: 0.6;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+}
+
+.hk-md-plain {
+  margin: 0;
+  padding: 0.5rem 0;
+  font-family: ui-monospace, monospace;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--hi-color-text-primary, #c9d1d9);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.hk-markdown blockquote {
+  margin: 0.75em 0;
+  padding: 0.5em 1em;
+  border-left: 3px solid var(--hi-color-text-tertiary, #8b949e);
+  color: var(--hi-color-text-secondary, #8b949e);
+}
+
+.hk-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75em 0;
+}
+
+.hk-markdown th,
+.hk-markdown td {
+  padding: 0.5em 0.75em;
+  border: 1px solid var(--hi-color-border, #30363d);
+  text-align: left;
+}
+
+.hk-markdown th {
+  font-weight: 600;
+  background: var(--hi-color-bg-subtle, #21262d);
+}
+
+.hk-markdown a {
+  color: var(--hi-color-primary, #58a6ff);
+  text-decoration: none;
+}
+
+.hk-markdown a:hover {
+  text-decoration: underline;
+}
+
+.hk-markdown hr {
+  border: none;
+  border-top: 1px solid var(--hi-color-border, #30363d);
+  margin: 1em 0;
+}
+
+.hk-markdown img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+
+.hk-markdown-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--hi-color-surface) 70%, transparent);
+  backdrop-filter: blur(4px);
+  z-index: 10;
+}

package/src/components/HkMarkdownRenderer.tsx

@@ -0,0 +1,123 @@
+import { computed, defineComponent, ref, watch } from "vue";
+import HSpinner from "./HkSpinner";
+import "./HkMarkdownRenderer.scss";
+
+let _marked: any = null;
+let _DOMPurify: any = null;
+
+async function ensureMarked(): Promise<any> {
+  if (_marked) return _marked;
+  try {
+    // @ts-ignore
+    const mod = await import("marked");
+    _marked = mod.marked;
+    _marked.setOptions({ gfm: true, breaks: true });
+    return _marked;
+  } catch {
+    return null as never;
+  }
+}
+
+async function ensureDOMPurify() {
+  if (_DOMPurify) return _DOMPurify;
+  try {
+    // @ts-ignore
+    const mod = await import("dompurify");
+    _DOMPurify = mod.default;
+    return _DOMPurify;
+  } catch {
+    return null;
+  }
+}
+
+function tryHighlight(code: string, lang?: string): string {
+  try {
+    const hljs = (globalThis as Record<string, unknown>).hljs as
+      | { highlight: (code: string, opts: { language?: string }) => { value: string } }
+      | undefined;
+    if (hljs?.highlight) {
+      const result = hljs.highlight(code, { language: lang });
+      return result.value;
+    }
+  } catch {
+    // fall through
+  }
+  return code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function renderPlain(content: string): string {
+  const escaped = content
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+  return `<pre class="hk-md-plain">${escaped}</pre>`;
+}
+
+async function renderMarkdown(content: string): Promise<string> {
+  const [marked, DOMPurify] = await Promise.all([ensureMarked(), ensureDOMPurify()]);
+
+  if (!marked || !DOMPurify) {
+    return renderPlain(content);
+  }
+
+  const renderer = new (marked as unknown as { Renderer: new () => Record<string, unknown> }).Renderer();
+
+  (renderer as Record<string, unknown>).code = function (tok: { text: string; lang?: string }) {
+    const highlighted = tryHighlight(tok.text, tok.lang);
+    const langAttr = tok.lang ? ` language-${tok.lang}` : "";
+    const langLabel = tok.lang ? `<span class="hk-md-code-lang">${tok.lang}</span>` : "";
+    return `<div class="hk-md-code">${langLabel}<pre><code class="hljs${langAttr}">${highlighted}</code></pre></div>`;
+  };
+
+  const raw = marked.parse(content, { renderer, async: false });
+  const html = typeof raw === "string" ? raw : "";
+  return DOMPurify.sanitize(html);
+}
+
+export default defineComponent({
+  name: "HkMarkdownRenderer",
+  props: {
+    content: { type: String, required: true },
+    loading: { type: Boolean, default: false },
+    plain: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const renderedHtml = ref("");
+    const parseError = ref(false);
+
+    async function parse() {
+      if (!props.content) {
+        renderedHtml.value = "";
+        return;
+      }
+      parseError.value = false;
+      try {
+        if (props.plain) {
+          renderedHtml.value = renderPlain(props.content);
+        } else {
+          renderedHtml.value = await renderMarkdown(props.content);
+        }
+      } catch {
+        parseError.value = true;
+        renderedHtml.value = renderPlain(props.content);
+      }
+    }
+
+    watch(
+      () => [props.content, props.plain],
+      () => { void parse(); },
+      { immediate: true },
+    );
+
+    return () => (
+      <div class="hk-markdown" data-plain={props.plain || undefined} data-loading={props.loading}>
+        <div class="hk-markdown-body" innerHTML={renderedHtml.value} />
+        {props.loading && (
+          <div class="hk-markdown-overlay">
+            <HSpinner center />
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkMediaControlBar.scss

@@ -0,0 +1,65 @@
+.hk-media-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-6) var(--space-10);
+  background: rgb(var(--color-surface) / 0.85);
+  backdrop-filter: blur(var(--blur-sm));
+  border-top: 1px solid var(--border-faint);
+  color: rgb(var(--color-text));
+}
+
+.hk-media-btn.hk-btn {
+  min-width: 28px;
+  height: 28px;
+  padding: 0 var(--space-6);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.hk-media-play.hk-btn {
+  background: rgb(var(--color-primary) / 0.14);
+  color: rgb(var(--color-primary));
+
+  &:hover:not(:disabled) {
+    background: rgb(var(--color-primary) / 0.24);
+  }
+}
+
+.hk-media-controls-seek {
+  flex: 1;
+  min-width: 0;
+}
+
+.hk-media-time {
+  font-size: var(--text-2xs);
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--color-muted));
+  white-space: nowrap;
+  user-select: none;
+}
+
+.hk-media-volume {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.hk-media-controls-vol {
+  width: 64px;
+}
+
+.hk-media-rate {
+  font-variant-numeric: tabular-nums;
+}
+
+// ── Mobile responsive ─────────────────────────────────────────────
+// On a phone the play button + time labels + 64px volume slider leave
+// almost no room for the seek bar to be usable. Phone volume is set via
+// hardware keys, so hide the volume control on narrow screens and let
+// the seek bar reclaim that width.
+@media (max-width: 600px) {
+  .hk-media-volume {
+    display: none;
+  }
+}

package/src/components/HkMediaControlBar.tsx

@@ -0,0 +1,115 @@
+import { defineComponent } from "vue";
+import { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from "lucide-vue-next";
+
+import HButton from "./HkButton";
+import { useI18n } from "../i18n/context";
+import HMediaSlider from "./HkMediaSlider";
+import "./HkMediaControlBar.scss";
+
+export function formatMediaTime(sec: number): string {
+  if (!Number.isFinite(sec) || sec < 0) sec = 0;
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Shared transport controls for any media controller — the same bar is used
+ * under the audio and video players. Purely presentational: it reflects
+ * controller state via props and forwards intents via events. `HMediaSlider`
+ * backs both the seek track and the volume track.
+ */
+export default defineComponent({
+  name: "HkMediaControlBar",
+  props: {
+    playing: { type: Boolean, default: false },
+    current: { type: Number, default: 0 },
+    duration: { type: Number, default: 0 },
+    progress: { type: Number, default: 0 },
+    bufferedPct: { type: Number, default: 0 },
+    volume: { type: Number, default: 1 },
+    muted: { type: Boolean, default: false },
+    rate: { type: Number, default: 1 },
+    isFullscreen: { type: Boolean, default: false },
+    showFullscreen: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: {
+    togglePlay: () => true,
+    seek: (_ratio: number) => true,
+    setVolume: (_v: number) => true,
+    toggleMute: () => true,
+    cycleRate: () => true,
+    toggleFullscreen: () => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    return () => (
+      <div class="hk-media-controls">
+        <HButton
+          variant="ghost"
+          size="sm"
+          class="hk-media-btn hk-media-play"
+          ariaLabel={props.playing ? t("hk.mediaPlayer.pause", "Pause") : t("hk.mediaPlayer.play", "Play")}
+          onClick={() => emit("togglePlay")}
+        >
+          {props.playing ? <Pause size={16} /> : <Play size={16} />}
+        </HButton>
+
+        <HMediaSlider
+          class="hk-media-controls-seek"
+          ratio={props.progress / 100}
+          buffered={props.bufferedPct / 100}
+          disabled={props.disabled || props.duration <= 0}
+          ariaLabel={t("hk.mediaPlayer.seek", "Seek")}
+          onUpdate:ratio={(r) => emit("seek", r)}
+        />
+
+        <span class="hk-media-time">
+          {formatMediaTime(props.current)} / {formatMediaTime(props.duration)}
+        </span>
+
+        <div class="hk-media-volume">
+          <HButton
+            variant="ghost"
+            size="sm"
+            class="hk-media-btn"
+            ariaLabel={props.muted ? t("hk.mediaPlayer.unmute", "Unmute") : t("hk.mediaPlayer.mute", "Mute")}
+            onClick={() => emit("toggleMute")}
+          >
+            {props.muted || props.volume === 0 ? <VolumeX size={15} /> : <Volume2 size={15} />}
+          </HButton>
+          <HMediaSlider
+            class="hk-media-controls-vol"
+            size="sm"
+            ratio={props.muted ? 0 : props.volume}
+            ariaLabel={t("hk.mediaPlayer.volume", "Volume")}
+            onUpdate:ratio={(v) => emit("setVolume", v)}
+          />
+        </div>
+
+        <HButton
+          variant="ghost"
+          size="sm"
+          class="hk-media-btn hk-media-rate"
+          ariaLabel={t("hk.mediaPlayer.speed", "Playback speed")}
+          onClick={() => emit("cycleRate")}
+        >
+          {props.rate}x
+        </HButton>
+
+        {props.showFullscreen && (
+          <HButton
+            variant="ghost"
+            size="sm"
+            class="hk-media-btn"
+            ariaLabel={props.isFullscreen ? t("hk.mediaPlayer.exitFullscreen", "Exit fullscreen") : t("hk.mediaPlayer.fullscreen", "Fullscreen")}
+            onClick={() => emit("toggleFullscreen")}
+          >
+            {props.isFullscreen ? <Minimize size={15} /> : <Maximize size={15} />}
+          </HButton>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkMediaPlayer.scss

@@ -0,0 +1,29 @@
+.hk-media-player {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  width: 100%;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: rgb(0 0 0 / 0.2);
+}
+
+.hk-media-player.is-fullscreen {
+  width: 100%;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.hk-media-player-video {
+  width: 100%;
+  max-height: 60vh;
+  display: block;
+  background: #000;
+  cursor: pointer;
+}
+
+.hk-media-player.is-fullscreen .hk-media-player-video {
+  max-height: none;
+  height: 100%;
+  object-fit: contain;
+}

package/src/components/HkMediaPlayer.tsx

@@ -0,0 +1,210 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
+
+import HMediaControlBar from "./HkMediaControlBar";
+import HMediaVisualizer from "./HkMediaVisualizer";
+import "./HkMediaPlayer.scss";
+
+type MediaKind = "video" | "audio";
+
+/** Playback rate presets cycled by the control bar's rate button. */
+export const MEDIA_RATES = [0.5, 1, 1.25, 1.5, 2] as const;
+
+/**
+ * Thin media player orchestrator. Owns the `<video>` / `<audio>` element,
+ * wires the raw media element events into reactive playback state, and
+ * composes the pluggable pieces: `HMediaVisualizer` (audio only) + the
+ * shared `HMediaControlBar`. Everything interactive lives in the control
+ * bar / slider, so this stays a small shell that's easy to swap or embed.
+ */
+export default defineComponent({
+  name: "HkMediaPlayer",
+  props: {
+    src: { type: String, required: true },
+    type: { type: String as PropType<MediaKind>, required: true },
+    poster: { type: String, default: undefined },
+  },
+  setup(props) {
+    const rootRef = ref<HTMLElement | null>(null);
+    const mediaRef = ref<HTMLMediaElement | null>(null);
+
+    const playing = ref(false);
+    const current = ref(0);
+    const duration = ref(0);
+    const buffered = ref(0);
+    const volume = ref(1);
+    const muted = ref(false);
+    const rateIdx = ref(1);
+    const isFullscreen = ref(false);
+
+    const rate = computed(() => MEDIA_RATES[rateIdx.value]);
+    const progress = computed(() =>
+      duration.value > 0 ? (current.value / duration.value) * 100 : 0,
+    );
+    const bufferedPct = computed(() =>
+      duration.value > 0 ? (buffered.value / duration.value) * 100 : 0,
+    );
+
+    function applyVolume() {
+      const m = mediaRef.value;
+      if (m) {
+        m.volume = volume.value;
+        m.muted = muted.value;
+      }
+    }
+    function applyRate() {
+      const m = mediaRef.value;
+      if (m) m.playbackRate = rate.value;
+    }
+
+    function onTimeUpdate() {
+      const m = mediaRef.value;
+      if (!m) return;
+      current.value = m.currentTime;
+      if (m.buffered.length) buffered.value = m.buffered.end(m.buffered.length - 1);
+    }
+    function onDurationChange() {
+      const m = mediaRef.value;
+      if (m) duration.value = m.duration || 0;
+    }
+    function onLoadedMetadata() {
+      const m = mediaRef.value;
+      if (!m) return;
+      duration.value = m.duration || 0;
+      volume.value = m.volume;
+      muted.value = m.muted;
+      applyRate();
+    }
+    function onVolumeChange() {
+      const m = mediaRef.value;
+      if (!m) return;
+      volume.value = m.volume;
+      muted.value = m.muted;
+    }
+    function onPlay() {
+      playing.value = true;
+    }
+    function onPause() {
+      playing.value = false;
+    }
+    function onEnded() {
+      playing.value = false;
+    }
+
+    let cleanupMedia: (() => void) | null = null;
+    function attachMedia(media: HTMLMediaElement | null) {
+      cleanupMedia?.();
+      cleanupMedia = null;
+      if (!media) return;
+      media.addEventListener("timeupdate", onTimeUpdate);
+      media.addEventListener("durationchange", onDurationChange);
+      media.addEventListener("loadedmetadata", onLoadedMetadata);
+      media.addEventListener("volumechange", onVolumeChange);
+      media.addEventListener("play", onPlay);
+      media.addEventListener("pause", onPause);
+      media.addEventListener("ended", onEnded);
+      cleanupMedia = () => {
+        media.removeEventListener("timeupdate", onTimeUpdate);
+        media.removeEventListener("durationchange", onDurationChange);
+        media.removeEventListener("loadedmetadata", onLoadedMetadata);
+        media.removeEventListener("volumechange", onVolumeChange);
+        media.removeEventListener("play", onPlay);
+        media.removeEventListener("pause", onPause);
+        media.removeEventListener("ended", onEnded);
+      };
+    }
+
+    function onFullscreenChange() {
+      isFullscreen.value = !!document.fullscreenElement;
+    }
+
+    onMounted(() => {
+      document.addEventListener("fullscreenchange", onFullscreenChange);
+    });
+
+    onBeforeUnmount(() => {
+      cleanupMedia?.();
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+    });
+
+    watch(mediaRef, attachMedia, { flush: "post" });
+
+    function togglePlay() {
+      const m = mediaRef.value;
+      if (!m) return;
+      if (m.paused) void m.play();
+      else m.pause();
+    }
+    function seekToRatio(ratio: number) {
+      const m = mediaRef.value;
+      if (!m || !duration.value) return;
+      const r = Math.max(0, Math.min(1, ratio));
+      m.currentTime = r * duration.value;
+      current.value = m.currentTime;
+    }
+    function setVolume(v: number) {
+      const val = Math.max(0, Math.min(1, v));
+      volume.value = val;
+      muted.value = val === 0;
+      applyVolume();
+    }
+    function toggleMute() {
+      muted.value = !muted.value;
+      applyVolume();
+    }
+    function cycleRate() {
+      rateIdx.value = (rateIdx.value + 1) % MEDIA_RATES.length;
+      applyRate();
+    }
+    function toggleFullscreen() {
+      const el = rootRef.value;
+      if (!el) return;
+      if (document.fullscreenElement) void document.exitFullscreen();
+      else void el.requestFullscreen?.();
+    }
+
+    return () => (
+      <div
+        ref={rootRef}
+        class={[
+          "hk-media-player",
+          `hk-media-player--${props.type}`,
+          isFullscreen.value && "is-fullscreen",
+        ].filter(Boolean).join(" ")}
+      >
+        {props.type === "audio" ? (
+          <>
+            <HMediaVisualizer mediaRef={mediaRef} />
+            <audio ref={mediaRef} src={props.src} />
+          </>
+        ) : (
+          <video
+            ref={mediaRef}
+            src={props.src}
+            poster={props.poster}
+            class="hk-media-player-video"
+            onClick={togglePlay}
+          />
+        )}
+
+        <HMediaControlBar
+          playing={playing.value}
+          current={current.value}
+          duration={duration.value}
+          progress={progress.value}
+          bufferedPct={bufferedPct.value}
+          volume={volume.value}
+          muted={muted.value}
+          rate={rate.value}
+          isFullscreen={isFullscreen.value}
+          showFullscreen={props.type === "video"}
+          onTogglePlay={togglePlay}
+          onSeek={seekToRatio}
+          onSetVolume={setVolume}
+          onToggleMute={toggleMute}
+          onCycleRate={cycleRate}
+          onToggleFullscreen={toggleFullscreen}
+        />
+      </div>
+    );
+  },
+});