@celestia-island/hikari 0.4.4

package/src/components/HkGaugeRing.tsx

@@ -0,0 +1,130 @@
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
+
+import { useReportedTransition } from "../composables/useReportedTransition";
+import { onceFrame } from "../runtime/animationBus";
+import "./HkGaugeRing.scss";
+
+interface RingData {
+  pct: number;
+  color: string;
+  trackColor: string;
+}
+
+const RING_ANIM_MS = 800;
+
+export default defineComponent({
+  name: "HkGaugeRing",
+  props: {
+    rings: {
+      type: Array as () => RingData[],
+      required: true,
+    },
+    size: { type: Number, default: 140 },
+    strokeWidth: { type: Number, default: 8 },
+    gap: { type: Number, default: 6 },
+    centerLabel: { type: String, default: "" },
+    centerValue: { type: String, default: "" },
+    animate: { type: Boolean, default: true },
+  },
+  setup(props) {
+    const progress = ref(props.animate ? 0 : 1);
+
+    const anim = useReportedTransition(RING_ANIM_MS);
+    function kickRamp() {
+      progress.value = 0;
+      onceFrame(() => {
+        progress.value = 1;
+      });
+      anim.run();
+    }
+
+    onMounted(() => {
+      if (!props.animate) return;
+      kickRamp();
+    });
+
+    watch(() => props.rings, () => {
+      if (!props.animate) return;
+      kickRamp();
+    });
+
+    const rings = computed(() => {
+      const { strokeWidth, gap, size } = props;
+      const svg: {
+        radius: number;
+        circumference: number;
+        dashOffset: number;
+        color: string;
+        trackColor: string;
+        strokeWidth: number;
+      }[] = [];
+      let r = (size - strokeWidth) / 2;
+      for (const ring of props.rings) {
+        const radius = Math.max(r, 1);
+        const circumference = 2 * Math.PI * radius;
+        const dashOffset = circumference * (1 - (Math.min(ring.pct, 100) / 100) * progress.value);
+        svg.push({
+          radius,
+          circumference,
+          dashOffset,
+          color: ring.color,
+          trackColor: ring.trackColor,
+          strokeWidth,
+        });
+        r -= strokeWidth + gap;
+        if (r < strokeWidth / 2) break;
+      }
+      return svg;
+    });
+
+    const center = computed(() => props.size / 2);
+
+    return () => (
+      <div class="hk-gauge-ring" style={{ width: `${props.size}px`, height: `${props.size}px` }}>
+        <svg
+          width={props.size}
+          height={props.size}
+          viewBox={`0 0 ${props.size} ${props.size}`}
+          style={{ transform: "rotate(-90deg)" }}
+        >
+          {rings.value.map((ring, i) => (
+            <g key={i}>
+              <circle
+                cx={center.value}
+                cy={center.value}
+                r={ring.radius}
+                fill="none"
+                stroke={ring.trackColor}
+                stroke-width={ring.strokeWidth}
+              />
+              <circle
+                cx={center.value}
+                cy={center.value}
+                r={ring.radius}
+                fill="none"
+                stroke={ring.color}
+                stroke-width={ring.strokeWidth}
+                stroke-linecap="round"
+                stroke-dasharray={ring.circumference}
+                stroke-dashoffset={ring.dashOffset}
+                style={{
+                  transition: props.animate ? "stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1)" : "none",
+                }}
+              />
+            </g>
+          ))}
+        </svg>
+        {(props.centerValue || props.centerLabel) && (
+          <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+            {props.centerValue && (
+              <div class="text-lg font-bold text-text leading-none">{props.centerValue}</div>
+            )}
+            {props.centerLabel && (
+              <div class="text-2xs text-muted mt-0.5">{props.centerLabel}</div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkHoverRevealAction.scss

@@ -0,0 +1,66 @@
+.hk-hover-reveal {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.hk-hover-reveal-main {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.hk-hover-reveal-extension {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-hover-reveal[data-placement="right"] > .hk-hover-reveal-extension {
+  left: 100%;
+  top: 50%;
+  transform: translate(-4px, -50%);
+}
+.hk-hover-reveal[data-placement="right"].is-revealed > .hk-hover-reveal-extension {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(4px, -50%);
+}
+
+.hk-hover-reveal[data-placement="left"] > .hk-hover-reveal-extension {
+  right: 100%;
+  top: 50%;
+  transform: translate(4px, -50%);
+}
+.hk-hover-reveal[data-placement="left"].is-revealed > .hk-hover-reveal-extension {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-4px, -50%);
+}
+
+.hk-hover-reveal[data-placement="bottom"] > .hk-hover-reveal-extension {
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, -4px);
+}
+.hk-hover-reveal[data-placement="bottom"].is-revealed > .hk-hover-reveal-extension {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, 4px);
+}
+
+.hk-hover-reveal[data-placement="top"] > .hk-hover-reveal-extension {
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, 4px);
+}
+.hk-hover-reveal[data-placement="top"].is-revealed > .hk-hover-reveal-extension {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, -4px);
+}

package/src/components/HkHoverRevealAction.tsx

@@ -0,0 +1,77 @@
+import { defineComponent, h, onUnmounted, ref, watch, type PropType } from "vue";
+
+import "./HkHoverRevealAction.scss";
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+
+export type HoverRevealPlacement = "right" | "left" | "top" | "bottom";
+
+export default defineComponent({
+  name: "HkHoverRevealAction",
+  props: {
+    hideDelay: { type: Number, default: 140 },
+    as: { type: String, default: "span" },
+    placement: { type: String as PropType<HoverRevealPlacement>, default: "right" },
+    forceRevealed: { type: Boolean, default: false },
+  },
+  emits: {
+    revealChange: (_revealed: boolean) => true,
+  },
+  setup(props, { emit, slots }) {
+    const revealed = ref(false);
+    let hideTimer: CronHandle | null = null;
+
+    function clearHideTimer() {
+      if (hideTimer) {
+        hideTimer.disconnect();
+        hideTimer = null;
+      }
+    }
+
+    function reveal() {
+      clearHideTimer();
+      if (!revealed.value) {
+        revealed.value = true;
+        emit("revealChange", true);
+      }
+    }
+
+    function scheduleHide() {
+      if (props.forceRevealed) return;
+      clearHideTimer();
+      hideTimer = scheduleCronAfter(() => {
+        if (revealed.value) {
+          revealed.value = false;
+          emit("revealChange", false);
+        }
+      }, props.hideDelay);
+    }
+
+    watch(
+      () => props.forceRevealed,
+      (forced) => {
+        if (forced) reveal();
+        else scheduleHide();
+      },
+    );
+
+    onUnmounted(clearHideTimer);
+
+    return () => {
+      return h(
+        props.as,
+        {
+          class: ["hk-hover-reveal", revealed.value && "is-revealed"],
+          "data-placement": props.placement,
+          onMouseenter: reveal,
+          onMouseleave: scheduleHide,
+        },
+        [
+          h("span", { class: "hk-hover-reveal-main" }, slots.default?.()),
+          slots.extension
+            ? h("span", { class: "hk-hover-reveal-extension" }, slots.extension({ revealed: revealed.value }))
+            : null,
+        ].filter(Boolean),
+      );
+    };
+  },
+});

package/src/components/HkIcon.tsx

@@ -0,0 +1,43 @@
+import { defineComponent, type PropType } from "vue";
+import * as LucideIcons from "lucide-vue-next";
+import "../../../components/src/styles/components/icon.scss";
+
+function pascalCase(str: string): string {
+  const camel = str.replace(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+  return camel.charAt(0).toUpperCase() + camel.slice(1);
+}
+
+const icons = LucideIcons as Record<string, any>;
+
+export default defineComponent({
+  name: "HkIcon",
+  props: {
+    name: { type: String, required: true },
+    size: { type: Number as PropType<16 | 20 | 24 | 32 | 40 | 48 | 64>, default: 20 },
+    color: { type: String as PropType<"primary" | "secondary" | "accent" | "success" | "warning" | "danger" | "muted"> },
+  },
+  setup(props) {
+    return () => {
+      const cls = [
+        "hk-icon",
+        `hk-icon-${props.size}`,
+        props.color ? `hk-icon-${props.color}` : "",
+      ];
+
+      const pName = pascalCase(props.name);
+      const IconComp = icons[pName] || icons[props.name];
+
+      if (IconComp) {
+        return <span class={cls}><IconComp /></span>;
+      }
+
+      return (
+        <span class={cls}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10" />
+          </svg>
+        </span>
+      );
+    };
+  },
+});

package/src/components/HkIconButton.tsx

@@ -0,0 +1,42 @@
+import { computed, defineComponent, type PropType } from "vue";
+import "../../../components/src/styles/components/icon_button.scss";
+import "../../../components/src/styles/components/icon-button-vars.scss";
+
+export default defineComponent({
+  name: "HkIconButton",
+  inheritAttrs: false,
+  props: {
+    icon: { type: String, default: "" },
+    variant: { type: String as PropType<"ghost" | "primary" | "secondary" | "danger" | "success">, default: "ghost" },
+    size: { type: Number as PropType<16 | 24 | 32 | 36 | 40>, default: 32 },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+  },
+  setup(props, { emit, slots }) {
+    const cls = computed(() => [
+      "hk-icon-button",
+      `hk-icon-button-${props.size}`,
+      `hk-icon-button-${props.variant}`,
+    ]);
+
+    return () => (
+      <button
+        class={cls.value}
+        disabled={props.disabled}
+        onClick={(e: MouseEvent) => emit("click", e)}
+      >
+        <span class="hk-icon-button-icon">
+          {slots.icon ? (
+            slots.icon()
+          ) : (
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+            </svg>
+          )}
+        </span>
+      </button>
+    );
+  },
+});

package/src/components/HkImageViewer.scss

@@ -0,0 +1,33 @@
+.hk-image-viewer {
+  position: relative;
+  width: 100%;
+  height: 60vh;
+  min-height: 18rem;
+  overflow: hidden;
+  background: rgb(0 0 0 / 45%);
+  border-radius: var(--radius-sm);
+  touch-action: none;
+  user-select: none;
+}
+
+.hk-image-viewer-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: none;
+  max-height: none;
+  will-change: transform;
+  transition: transform 0.12s ease-out;
+
+  &.is-loading {
+    opacity: 0;
+  }
+}
+
+.hk-image-viewer-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/HkImageViewer.tsx

@@ -0,0 +1,250 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import HSpinner from "./HkSpinner";
+import HMinimap from "./HkMinimap";
+import "./HkImageViewer.scss";
+
+/**
+ * Zoomable / pannable image viewer.
+ *
+ * The image is laid out at its natural pixel size and transformed with
+ * `translate(panX, panY) scale(zoom)` (transform-origin 0 0). That keeps it
+ * compatible with HMinimap's viewport-rect math, which assumes exactly this
+ * transform model. Default state is fit-to-container + centred; wheel and
+ * double-click zoom (cursor-anchored), drag pans. The minimap reuses the
+ * generic HMinimap (rendered with the image as its background).
+ */
+export default defineComponent({
+  name: "HkImageViewer",
+  props: {
+    src: { type: String, required: true },
+    alt: { type: String, default: "" },
+  },
+  setup(props) {
+    const containerRef = ref<HTMLElement | null>(null);
+    const imgRef = ref<HTMLImageElement | null>(null);
+
+    const zoom = ref(1);
+    const panX = ref(0);
+    const panY = ref(0);
+    const fit = ref(1);
+    const imgW = ref(0);
+    const imgH = ref(0);
+    const loaded = ref(false);
+
+    const dragging = ref(false);
+    const lastPt = ref({ x: 0, y: 0 });
+
+    const MAX_ZOOM = 8;
+
+    const isZoomed = computed(() => loaded.value && zoom.value > fit.value + 0.001);
+    const canZoomIn = computed(() => zoom.value < MAX_ZOOM);
+    const canZoomOut = computed(() => zoom.value > fit.value + 0.001);
+
+    function dims() {
+      const c = containerRef.value;
+      return c ? { cw: c.clientWidth, ch: c.clientHeight } : { cw: 0, ch: 0 };
+    }
+
+    function recomputeFit() {
+      const { cw, ch } = dims();
+      if (!imgW.value || !imgH.value || !cw || !ch) return;
+      fit.value = Math.min(1, cw / imgW.value, ch / imgH.value);
+    }
+
+    function center() {
+      const { cw, ch } = dims();
+      const dw = imgW.value * zoom.value;
+      const dh = imgH.value * zoom.value;
+      panX.value = (cw - dw) / 2;
+      panY.value = (ch - dh) / 2;
+    }
+
+    function clampPan() {
+      const { cw, ch } = dims();
+      const dw = imgW.value * zoom.value;
+      const dh = imgH.value * zoom.value;
+      if (dw <= cw) panX.value = (cw - dw) / 2;
+      else panX.value = Math.max(cw - dw, Math.min(0, panX.value));
+      if (dh <= ch) panY.value = (ch - dh) / 2;
+      else panY.value = Math.max(ch - dh, Math.min(0, panY.value));
+    }
+
+    function setZoom(next: number, cx?: number, cy?: number) {
+      const { cw, ch } = dims();
+      const target = Math.max(fit.value, Math.min(MAX_ZOOM, next));
+      if (target === zoom.value) return;
+      const anchorX = cx ?? cw / 2;
+      const anchorY = cy ?? ch / 2;
+      const wx = (anchorX - panX.value) / zoom.value;
+      const wy = (anchorY - panY.value) / zoom.value;
+      zoom.value = target;
+      panX.value = anchorX - wx * target;
+      panY.value = anchorY - wy * target;
+      clampPan();
+    }
+
+    function resetView() {
+      recomputeFit();
+      zoom.value = fit.value;
+      center();
+    }
+
+    function onImgLoad() {
+      const img = imgRef.value;
+      if (!img) return;
+      imgW.value = img.naturalWidth;
+      imgH.value = img.naturalHeight;
+      loaded.value = true;
+      resetView();
+    }
+
+    function onWheel(e: WheelEvent) {
+      if (!loaded.value) return;
+      e.preventDefault();
+      const el = containerRef.value;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+      setZoom(zoom.value * factor, cx, cy);
+    }
+
+    function onPointerDown(e: PointerEvent) {
+      if (!loaded.value) return;
+      dragging.value = true;
+      lastPt.value = { x: e.clientX, y: e.clientY };
+      (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    }
+
+    function onPointerMove(e: PointerEvent) {
+      if (!dragging.value) return;
+      const dx = e.clientX - lastPt.value.x;
+      const dy = e.clientY - lastPt.value.y;
+      lastPt.value = { x: e.clientX, y: e.clientY };
+      panX.value += dx;
+      panY.value += dy;
+      clampPan();
+    }
+
+    function onPointerUp() {
+      dragging.value = false;
+    }
+
+    function onDblClick(e: MouseEvent) {
+      if (!loaded.value) return;
+      const el = containerRef.value;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      setZoom(isZoomed.value ? fit.value : Math.min(MAX_ZOOM, fit.value * 3), cx, cy);
+    }
+
+    function onPanDelta(dx: number, dy: number) {
+      panX.value += dx;
+      panY.value += dy;
+      clampPan();
+    }
+
+    let ro: ResizeObserver | null = null;
+
+    onMounted(() => {
+      const c = containerRef.value;
+      if (!c) return;
+      ro = new ResizeObserver(() => {
+        const wasFit = !isZoomed.value;
+        recomputeFit();
+        if (wasFit) {
+          zoom.value = fit.value;
+          center();
+        } else {
+          clampPan();
+        }
+      });
+      ro.observe(c);
+      c.addEventListener("wheel", onWheel, { passive: false });
+      c.addEventListener("pointerdown", onPointerDown);
+      c.addEventListener("pointermove", onPointerMove);
+      c.addEventListener("pointerup", onPointerUp);
+      c.addEventListener("pointercancel", onPointerUp);
+      c.addEventListener("dblclick", onDblClick);
+    });
+
+    onBeforeUnmount(() => {
+      const c = containerRef.value;
+      if (!c) return;
+      ro?.disconnect();
+      ro = null;
+      c.removeEventListener("wheel", onWheel);
+      c.removeEventListener("pointerdown", onPointerDown);
+      c.removeEventListener("pointermove", onPointerMove);
+      c.removeEventListener("pointerup", onPointerUp);
+      c.removeEventListener("pointercancel", onPointerUp);
+      c.removeEventListener("dblclick", onDblClick);
+    });
+
+    watch(
+      () => props.src,
+      () => {
+        loaded.value = false;
+        imgW.value = 0;
+        imgH.value = 0;
+        zoom.value = 1;
+        fit.value = 1;
+        panX.value = 0;
+        panY.value = 0;
+      },
+    );
+
+    const imgStyle = computed(() => ({
+      transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,
+      transformOrigin: "0 0",
+      cursor: isZoomed.value ? (dragging.value ? "grabbing" : "grab") : "zoom-in",
+    }));
+
+    const contentBounds = computed(() => ({ x: 0, y: 0, w: imgW.value, h: imgH.value }));
+    const zoomPercent = computed(() => Math.round(zoom.value * 100));
+
+    return () => (
+      <div ref={containerRef} class="hk-image-viewer">
+        <img
+          ref={imgRef}
+          src={props.src}
+          alt={props.alt}
+          class={["hk-image-viewer-img", !loaded.value && "is-loading"].filter(Boolean).join(" ")}
+          style={imgStyle.value}
+          draggable={false}
+          onLoad={onImgLoad}
+        />
+        {!loaded.value && (
+          <div class="hk-image-viewer-loading">
+            <HSpinner size="md" />
+          </div>
+        )}
+
+        {loaded.value && isZoomed.value && (
+          <HMinimap
+            imageSrc={props.src}
+            imageBounds={contentBounds.value}
+            zoom={zoom.value}
+            panX={panX.value}
+            panY={panY.value}
+            viewportWidth={dims().cw}
+            viewportHeight={dims().ch}
+            contentBounds={contentBounds.value}
+            zoomPercent={zoomPercent.value}
+            canZoomIn={canZoomIn.value}
+            canZoomOut={canZoomOut.value}
+            showReset
+            onZoomIn={() => setZoom(zoom.value * 1.2)}
+            onZoomOut={() => setZoom(zoom.value / 1.2)}
+            onReset={resetView}
+            onPanDelta={onPanDelta}
+          />
+        )}
+      </div>
+    );
+  },
+});