@celestia-island/hikari 0.4.4

package/src/components/HkTrendChart.tsx

@@ -0,0 +1,180 @@
+import { defineComponent, onMounted, onUnmounted, ref, watch, type PropType } from "vue";
+
+import { LineChart } from "echarts/charts";
+import { DataZoomComponent, GridComponent, LegendComponent, MarkLineComponent, TooltipComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomComponent,
+  MarkLineComponent,
+  CanvasRenderer,
+]);
+
+export interface TrendPoint {
+  time: number;
+  value: number;
+}
+
+export interface AlarmThresholds {
+  hh?: number;
+  h?: number;
+  l?: number;
+  ll?: number;
+}
+
+export interface TrendPen {
+  label: string;
+  data: TrendPoint[];
+  thresholds?: AlarmThresholds;
+}
+
+/**
+ * Streaming line-chart wrapper around echarts. Takes any number of
+ * "pens" (labelled time-series) and renders them against a rolling
+ * time window, with optional alarm threshold lines (hh/h/l/ll) per pen.
+ * Pure echarts plumbing — no domain logic, so any consumer can feed it
+ * metrics, telemetry or analytics series.
+ */
+export default defineComponent({
+  name: "HkTrendChart",
+  props: {
+    pens: { type: Array as PropType<TrendPen[]>, default: () => [] },
+    height: { type: String, default: "240px" },
+    showThresholds: { type: Boolean, default: true },
+    timeWindowMs: { type: Number, default: 300_000 }, // 5 minutes
+  },
+  setup(props) {
+    const chartEl = ref<HTMLElement>();
+    let chart: echarts.ECharts | null = null;
+    let resizeCleanup: (() => void) | undefined;
+
+    function renderChart() {
+      if (!chart || props.pens.length === 0) return;
+
+      const now = Date.now();
+      const minTime = now - props.timeWindowMs;
+
+      const series = props.pens.map((pen) => ({
+        name: pen.label,
+        type: "line" as const,
+        data: pen.data
+          .filter((p) => p.time >= minTime)
+          .map((p) => [p.time, p.value]),
+        smooth: true,
+        symbol: "none",
+        lineStyle: { width: 2 },
+      }));
+
+      const markLines: Record<string, unknown>[] = [];
+      if (props.showThresholds) {
+        for (const pen of props.pens) {
+          if (pen.thresholds) {
+            const t = pen.thresholds;
+            if (t.hh != null)
+              markLines.push({
+                yAxis: t.hh,
+                lineStyle: { color: "#FF1744", type: "dashed", width: 1 },
+                label: { show: false },
+              });
+            if (t.h != null)
+              markLines.push({
+                yAxis: t.h,
+                lineStyle: { color: "#FF6D00", type: "dotted", width: 1 },
+                label: { show: false },
+              });
+            if (t.l != null)
+              markLines.push({
+                yAxis: t.l,
+                lineStyle: { color: "#FFD600", type: "dotted", width: 1 },
+                label: { show: false },
+              });
+            if (t.ll != null)
+              markLines.push({
+                yAxis: t.ll,
+                lineStyle: { color: "#FF1744", type: "dashed", width: 1 },
+                label: { show: false },
+              });
+          }
+        }
+      }
+
+      chart.setOption(
+        {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: { type: "cross" },
+          },
+          legend: {
+            top: 0,
+            textStyle: { fontSize: 11 },
+          },
+          grid: { left: 50, right: 20, top: 30, bottom: 40 },
+          xAxis: {
+            type: "time",
+            min: minTime,
+            max: now,
+          },
+          yAxis: { type: "value", scale: true },
+          dataZoom: [{ type: "inside" }],
+          series:
+            markLines.length > 0
+              ? series.map((s) => ({
+                  ...s,
+                  markLine: { silent: true, data: markLines.map((m) => [{ ...m }, { ...m }]) },
+                }))
+              : series,
+        },
+        // Merge (not notMerge): this fires on every streaming tick (deep watch
+        // on pens). notMerge:true replaced the whole option each tick, which
+        // reset the user's dataZoom pan/zoom on every update and rebuilt every
+        // series. Merge updates data incrementally and — because we never
+        // specify dataZoom start/end here — preserves the user's current zoom.
+      );
+    }
+
+    function onResize() {
+      chart?.resize();
+    }
+
+    onMounted(() => {
+      if (chartEl.value) {
+        chart = echarts.init(chartEl.value);
+        renderChart();
+        // Keep the canvas in sync with its container. echarts doesn't
+        // observe its own element, so without this the chart keeps its
+        // initial pixel size when the column narrows (mobile rotation,
+        // sidebar collapse, container resize) and renders off-canvas or
+        // leaves dead space. ResizeObserver covers container-driven
+        // changes; the window listener catches the cases where the
+        // observer isn't supported / doesn't fire (older WebViews).
+        const el = chartEl.value;
+        window.addEventListener("resize", onResize);
+        let ro: ResizeObserver | undefined;
+        if (typeof ResizeObserver !== "undefined") {
+          ro = new ResizeObserver(onResize);
+          ro.observe(el);
+        }
+        resizeCleanup = () => {
+          window.removeEventListener("resize", onResize);
+          ro?.disconnect();
+        };
+      }
+    });
+
+    onUnmounted(() => {
+      resizeCleanup?.();
+      resizeCleanup = undefined;
+      chart?.dispose();
+      chart = null;
+    });
+
+    watch(() => props.pens, renderChart, { deep: true });
+
+    return () => <div ref={chartEl} style={{ width: "100%", height: props.height }} />;
+  },
+});

package/src/components/HkWindowedItem.scss

@@ -0,0 +1,17 @@
+.hk-windowed-item {
+  display: block;
+}
+
+.hk-windowed-item[data-state="placeholder"] {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  pointer-events: none;
+  background: transparent;
+}
+
+.hk-windowed-item[data-state="real"] {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+}

package/src/components/HkWindowedItem.tsx

@@ -0,0 +1,107 @@
+import { defineComponent, onBeforeUnmount, onMounted, ref, shallowRef, watch, type PropType } from "vue";
+
+import "./HkWindowedItem.scss";
+import { useScrollWindow } from "../composables/useScrollWindow";
+import { onceFrame } from "../runtime/animationBus";
+
+export default defineComponent({
+  name: "HkWindowedItem",
+  props: {
+    itemKey: { type: String, default: undefined },
+    estimatedHeight: { type: Number, default: 96 },
+    overscanScreens: { type: Number as PropType<number | null>, default: null },
+    as: { type: String, default: "div" },
+  },
+  setup(props, { slots }) {
+    const ctx = useScrollWindow();
+    const root = shallowRef<HTMLElement | null>(null);
+    const inWindow = ref(false);
+    const measuredHeight = ref<number | null>(null);
+    let io: IntersectionObserver | null = null;
+
+    function placeholderHeight(): number {
+      return measuredHeight.value ?? props.estimatedHeight;
+    }
+
+    function withinBuffer(el: HTMLElement, scrollEl: HTMLElement, overscan: number): boolean {
+      const elRect = el.getBoundingClientRect();
+      const rootRect = scrollEl.getBoundingClientRect();
+      const buf = scrollEl.clientHeight * overscan;
+      return elRect.bottom >= rootRect.top - buf && elRect.top <= rootRect.bottom + buf;
+    }
+
+    function buildObserver(target: HTMLElement, scrollEl: HTMLElement | null) {
+      io?.disconnect();
+      const overscan = props.overscanScreens ?? ctx?.overscanScreens ?? 1;
+      const margin = `${Math.round(overscan * 100)}% 0px ${Math.round(overscan * 100)}% 0px`;
+      io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            inWindow.value = e.isIntersecting;
+          }
+        },
+        {
+          root: scrollEl,
+          rootMargin: margin,
+          threshold: 0,
+        },
+      );
+      io.observe(target);
+    }
+
+    function measure() {
+      const el = root.value;
+      if (!el) return;
+      const h = el.offsetHeight;
+      if (h > 0) measuredHeight.value = h;
+    }
+
+    onMounted(() => {
+      const scrollEl = ctx?.scrollRoot.value ?? null;
+      const overscan = props.overscanScreens ?? ctx?.overscanScreens ?? 1;
+      if (scrollEl && root.value) {
+        inWindow.value = withinBuffer(root.value, scrollEl, overscan);
+      } else {
+        inWindow.value = true;
+      }
+      if (root.value) buildObserver(root.value, scrollEl);
+      onceFrame(measure);
+    });
+
+    watch(
+      () => ctx?.scrollRoot.value ?? null,
+      (scrollEl) => {
+        if (root.value) buildObserver(root.value, scrollEl);
+      },
+    );
+
+    watch(inWindow, (v) => {
+      if (v) {
+        onceFrame(measure);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      io?.disconnect();
+      io = null;
+    });
+
+    return () => {
+      const Tag = props.as as "div";
+      const showReal = inWindow.value || !ctx;
+      const placeholderStyle = showReal ? undefined : { height: `${placeholderHeight()}px` };
+      return (
+        <Tag
+          ref={root}
+          class="hk-windowed-item"
+          data-state={showReal ? "real" : "placeholder"}
+          data-windowed-key={props.itemKey}
+          style={placeholderStyle}
+          aria-hidden={showReal ? undefined : "true"}
+        >
+          {showReal ? slots.default?.() : null}
+        </Tag>
+      );
+    };
+  },
+});

package/src/components/HkZoomToolbar.scss

@@ -0,0 +1,35 @@
+.hk-zoom-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  border-radius: var(--radius-md);
+  background: rgb(var(--color-surface) / 85%);
+  border: 1px solid rgb(var(--color-border) / 8%);
+  padding: 2px 4px;
+  backdrop-filter: blur(var(--blur-sm));
+}
+
+.hk-zoom-btn.hk-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+.hk-zoom-label {
+  font-size: var(--text-2xs);
+  font-family: var(--font-mono, monospace);
+  color: rgb(var(--color-muted));
+  min-width: 32px;
+  text-align: center;
+  user-select: none;
+}
+
+.hk-zoom-reset-btn {
+  margin-left: 2px;
+  border-left: 1px solid rgb(var(--color-border) / 8%);
+  padding-left: 4px;
+}

package/src/components/HkZoomToolbar.tsx

@@ -0,0 +1,69 @@
+import { defineComponent } from "vue";
+import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+
+import HButton from "./HkButton";
+import { useI18n } from "../i18n/context";
+import "./HkZoomToolbar.scss";
+
+/**
+ * Floating zoom control cluster for image/pan viewers. Reflects viewer state
+ * via props and forwards intents via events; renders nothing when the view
+ * is fully zoomed out (nothing to undo).
+ */
+export default defineComponent({
+  name: "HkZoomToolbar",
+  props: {
+    zoom: { type: Number, required: true },
+    canZoomIn: { type: Boolean, required: true },
+    canZoomOut: { type: Boolean, required: true },
+    isZoomed: { type: Boolean, required: true },
+  },
+  emits: {
+    zoomIn: () => true,
+    zoomOut: () => true,
+    reset: () => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    return () => {
+      if (!props.isZoomed && !props.canZoomOut) return null;
+
+      return (
+        <div class="hk-zoom-toolbar">
+          <HButton
+            variant="ghost"
+            size="sm"
+            class="hk-zoom-btn"
+            disabled={!props.canZoomOut}
+            ariaLabel={t("hk.zoomToolbar.zoomOut", "Zoom out")}
+            onClick={() => emit("zoomOut")}
+          >
+            <ZoomOut size={14} />
+          </HButton>
+          <span class="hk-zoom-label">{Math.round(props.zoom * 100)}%</span>
+          <HButton
+            variant="ghost"
+            size="sm"
+            class="hk-zoom-btn"
+            disabled={!props.canZoomIn}
+            ariaLabel={t("hk.zoomToolbar.zoomIn", "Zoom in")}
+            onClick={() => emit("zoomIn")}
+          >
+            <ZoomIn size={14} />
+          </HButton>
+          {props.isZoomed && (
+            <HButton
+              variant="ghost"
+              size="sm"
+              class={["hk-zoom-btn", "hk-zoom-reset-btn"]}
+              ariaLabel={t("hk.zoomToolbar.reset", "Reset zoom")}
+              onClick={() => emit("reset")}
+            >
+              <Maximize2 size={14} />
+            </HButton>
+          )}
+        </div>
+      );
+    };
+  },
+});

package/src/composables/useBreakpoint.ts

@@ -0,0 +1,41 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+type Breakpoint = "sm" | "md" | "lg" | "xl";
+
+const breakpoints: Record<Breakpoint, number> = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+};
+
+export function useBreakpoint() {
+  const current = ref<Breakpoint>("md");
+
+  function update() {
+    const width = window.innerWidth;
+    if (width >= breakpoints.xl) current.value = "xl";
+    else if (width >= breakpoints.lg) current.value = "lg";
+    else if (width >= breakpoints.md) current.value = "md";
+    else current.value = "sm";
+  }
+
+  function isUp(bp: Breakpoint) {
+    return window.innerWidth >= breakpoints[bp];
+  }
+
+  function isDown(bp: Breakpoint) {
+    return window.innerWidth < breakpoints[bp];
+  }
+
+  onMounted(() => {
+    update();
+    window.addEventListener("resize", update);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", update);
+  });
+
+  return { current, isUp, isDown };
+}

package/src/composables/useClipboard.ts

@@ -0,0 +1,37 @@
+import { ref } from "vue";
+
+export function useClipboard() {
+  const copied = ref(false);
+
+  async function copy(text: string): Promise<boolean> {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+      return true;
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      try {
+        document.execCommand("copy");
+        copied.value = true;
+        setTimeout(() => {
+          copied.value = false;
+        }, 2000);
+        return true;
+      } catch {
+        return false;
+      } finally {
+        document.body.removeChild(textarea);
+      }
+    }
+  }
+
+  return { copied, copy };
+}

package/src/composables/useConfirm.ts

@@ -0,0 +1,35 @@
+import { ref } from "vue";
+
+export function useConfirm() {
+  const resolveRef = ref<((value: boolean) => void) | null>(null);
+  const open = ref(false);
+  const message = ref("");
+  const title = ref("Confirm");
+  const confirmText = ref("Confirm");
+  const cancelText = ref("Cancel");
+
+  function confirm(text: string, opts?: { title?: string; confirmText?: string; cancelText?: string }): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      resolveRef.value = resolve;
+      message.value = text;
+      title.value = opts?.title ?? "Confirm";
+      confirmText.value = opts?.confirmText ?? "Confirm";
+      cancelText.value = opts?.cancelText ?? "Cancel";
+      open.value = true;
+    });
+  }
+
+  function onConfirm() {
+    open.value = false;
+    resolveRef.value?.(true);
+    resolveRef.value = null;
+  }
+
+  function onCancel() {
+    open.value = false;
+    resolveRef.value?.(false);
+    resolveRef.value = null;
+  }
+
+  return { open, title, message, confirmText, cancelText, confirm, onConfirm, onCancel };
+}

package/src/composables/useProgressDialog.ts

@@ -0,0 +1,52 @@
+import { reactive } from "vue";
+
+export interface ProgressDialogState {
+  open: boolean;
+  title: string;
+  logs: string[];
+  value: number | null;
+  max: number;
+}
+
+export interface ProgressDialogHandle {
+  log(line: string): void;
+  setProgress(done: number, total?: number): void;
+  close(): void;
+}
+
+const MAX_LOG_LINES = 200;
+
+const state = reactive<ProgressDialogState>({
+  open: false,
+  title: "",
+  logs: [],
+  value: null,
+  max: 100,
+});
+
+export function showProgressDialog(opts: { title: string }): ProgressDialogHandle {
+  state.title = opts.title;
+  state.logs = [];
+  state.value = null;
+  state.max = 100;
+  state.open = true;
+  return {
+    log(line: string) {
+      state.logs.push(line);
+      if (state.logs.length > MAX_LOG_LINES) {
+        state.logs.splice(0, state.logs.length - MAX_LOG_LINES);
+      }
+    },
+    setProgress(done: number, total?: number) {
+      if (typeof total === "number") state.max = total;
+      state.value = done;
+    },
+    close() {
+      state.open = false;
+    },
+  };
+}
+
+export function useProgressDialog(): ProgressDialogState {
+  return state;
+}

package/src/composables/useReportedTransition.ts

@@ -0,0 +1,69 @@
+import { onUnmounted } from "vue";
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+import { reportTransition, type AnimationHandle } from "../runtime/animationBus";
+
+export interface ReportedTransitionTrack {
+  run(): void;
+  cancel(): void;
+}
+
+export interface ReportedTransition extends ReportedTransitionTrack {
+  track(key: string): ReportedTransitionTrack;
+}
+
+export function useReportedTransition(durationMs: number): ReportedTransition {
+  interface TrackState {
+    handle: AnimationHandle | null;
+    timer: CronHandle | null;
+  }
+  const tracks = new Map<string, TrackState>();
+  const MAIN_TRACK_KEY = "";
+
+  function getTrack(key: string): TrackState {
+    let t = tracks.get(key);
+    if (!t) {
+      t = { handle: null, timer: null };
+      tracks.set(key, t);
+    }
+    return t;
+  }
+
+  function cancelTrack(key: string) {
+    const t = tracks.get(key);
+    if (!t) return;
+    t.timer?.disconnect();
+    t.timer = null;
+    t.handle?.disconnect();
+    t.handle = null;
+  }
+
+  function runTrack(key: string) {
+    const t = getTrack(key);
+    t.timer?.disconnect();
+    t.timer = null;
+    t.handle?.disconnect();
+    t.handle = reportTransition(durationMs);
+    t.timer = scheduleCronAfter(() => {
+      t.timer = null;
+      t.handle?.disconnect();
+      t.handle = null;
+    }, durationMs);
+  }
+
+  function cancelAll() {
+    for (const key of tracks.keys()) cancelTrack(key);
+  }
+
+  onUnmounted(cancelAll);
+
+  return {
+    run: () => runTrack(MAIN_TRACK_KEY),
+    cancel: () => cancelTrack(MAIN_TRACK_KEY),
+    track(key: string): ReportedTransitionTrack {
+      return {
+        run: () => runTrack(key),
+        cancel: () => cancelTrack(key),
+      };
+    },
+  };
+}

package/src/composables/useScrollWindow.ts

@@ -0,0 +1,21 @@
+import { inject, provide, type InjectionKey, type Ref } from "vue";
+
+export interface ScrollWindowContext {
+  scrollRoot: Ref<HTMLElement | null>;
+  overscanScreens: number;
+}
+
+const SCROLL_WINDOW_KEY: InjectionKey<ScrollWindowContext> = Symbol("scroll-window");
+
+export function provideScrollWindow(
+  scrollRoot: Ref<HTMLElement | null>,
+  overscanScreens = 1,
+): ScrollWindowContext {
+  const ctx: ScrollWindowContext = { scrollRoot, overscanScreens };
+  provide(SCROLL_WINDOW_KEY, ctx);
+  return ctx;
+}
+
+export function useScrollWindow(): ScrollWindowContext | null {
+  return inject(SCROLL_WINDOW_KEY, null);
+}

package/src/composables/useToast.ts

@@ -0,0 +1,2 @@
+export { useToast } from "../runtime/useToast";
+export type { ToastItem, ToastMessage, ToastType } from "../runtime/useToast";

package/src/demo.scss

@@ -0,0 +1,24 @@
+body {
+  margin: 0; padding: 2rem;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  background: rgb(var(--color-background, 14 15 24));
+  color: rgb(var(--color-text, 192 202 245));
+}
+.demo {
+  max-width: 800px; margin: 0 auto;
+}
+h1 { font-size: 2rem; margin-bottom: 2rem; text-align: center; }
+h2 { font-size: 1.25rem; margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.1)); }
+section { margin-bottom: 2rem; }
+.row {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.icons { gap: 16px; }
+.icon-grid {
+  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
+}
+.icon-grid small { font-size: 0.625rem; opacity: 0.5; }
+.input-result, .checked-feedback, .switch-state {
+  margin-top: 8px; font-size: 0.75rem; opacity: 0.7;
+}