@celestia-island/hikari 0.4.4 → 0.4.5

package/src/components/HkColorSchemeDialog.tsx

@@ -0,0 +1,237 @@
+import { computed, defineComponent, nextTick, reactive, ref, watch } from "vue";
+import {
+  HColorPicker,
+  HInput,
+  HModal,
+  HMorphingTabs,
+  
+  useI18n,
+  useTheme,
+  type ModalAction,
+  type ThemeSchemeTokens,
+} from "@celestia-island/hikari";
+
+import "./HkColorSchemeDialog.scss";
+
+
+const defaultDark: ThemeSchemeTokens = {
+  primary: { r: 255, g: 107, b: 157 },
+  secondary: { r: 199, g: 146, b: 234 },
+  accent: { r: 253, g: 235, b: 139 },
+  text: { r: 228, g: 228, b: 231 },
+  muted: { r: 180, g: 180, b: 180 },
+  border: { r: 255, g: 255, b: 255 },
+  focusedBorder: { r: 255, g: 107, b: 157 },
+  background: { r: 14, g: 14, b: 30 },
+  surface: { r: 24, g: 24, b: 42 },
+  selectedBackground: { r: 70, g: 70, b: 85 },
+  selectedText: { r: 240, g: 240, b: 240 },
+  statusBarBackground: { r: 24, g: 24, b: 42 },
+  success: { r: 114, g: 241, b: 184 },
+  error: { r: 255, g: 107, b: 107 },
+  warning: { r: 253, g: 235, b: 139 },
+  info: { r: 110, g: 231, b: 239 },
+};
+
+const defaultLight: ThemeSchemeTokens = {
+  primary: { r: 214, g: 51, b: 132 },
+  secondary: { r: 156, g: 106, b: 222 },
+  accent: { r: 230, g: 167, b: 0 },
+  text: { r: 30, g: 30, b: 30 },
+  muted: { r: 80, g: 80, b: 80 },
+  border: { r: 0, g: 0, b: 0 },
+  focusedBorder: { r: 214, g: 51, b: 132 },
+  background: { r: 245, g: 245, b: 240 },
+  surface: { r: 255, g: 255, b: 255 },
+  selectedBackground: { r: 200, g: 200, b: 205 },
+  selectedText: { r: 40, g: 40, b: 45 },
+  statusBarBackground: { r: 230, g: 230, b: 225 },
+  success: { r: 16, g: 185, b: 129 },
+  error: { r: 239, g: 68, b: 68 },
+  warning: { r: 245, g: 158, b: 11 },
+  info: { r: 6, g: 182, b: 212 },
+};
+
+type ColorTokenKey = keyof ThemeSchemeTokens;
+
+const editableTokens: ColorTokenKey[] = ["primary", "secondary", "accent", "success", "error", "warning", "info"];
+const derivedTokens: ColorTokenKey[] = ["background", "surface", "text", "muted", "border", "focusedBorder", "selectedBackground", "selectedText", "statusBarBackground"];
+
+function clamp(v: number): number {
+  return Math.max(0, Math.min(255, v));
+}
+
+function deriveSurface(tokens: ThemeSchemeTokens, isDark: boolean): ThemeSchemeTokens {
+  const p = tokens.primary;
+  const base = isDark ? 14 : 245;
+  return {
+    ...tokens,
+    background: { r: clamp(base), g: clamp(base), b: clamp(base + (isDark ? 16 : -5)) },
+    surface: { r: clamp(base + (isDark ? 10 : 10)), g: clamp(base + (isDark ? 10 : 10)), b: clamp(base + (isDark ? 18 : 5)) },
+    text: { r: clamp(isDark ? 228 : 30), g: clamp(isDark ? 228 : 30), b: clamp(isDark ? 231 : 30) },
+    muted: { r: clamp(isDark ? 180 : 80), g: clamp(isDark ? 180 : 80), b: clamp(isDark ? 180 : 80) },
+    border: { r: clamp(isDark ? 255 : 0), g: clamp(isDark ? 255 : 0), b: clamp(isDark ? 255 : 0) },
+    focusedBorder: { r: p.r, g: p.g, b: p.b },
+    selectedBackground: { r: clamp(p.r * 0.27), g: clamp(p.g * 0.27), b: clamp(p.b * 0.35) },
+    selectedText: { r: clamp(isDark ? 240 : 40), g: clamp(isDark ? 240 : 40), b: clamp(isDark ? 240 : 45) },
+    statusBarBackground: { r: clamp(base + (isDark ? 10 : -15)), g: clamp(base + (isDark ? 10 : -15)), b: clamp(base + (isDark ? 18 : -5)) },
+  };
+}
+
+interface HkTabItem {
+  key: string;
+  label: string;
+}
+
+/**
+ * HCustomTheme — custom color scheme payload, structurally identical to
+ * hikari's `CustomThemePreset` (which hikari does not re-export from its
+ * root yet). `useTheme().addCustomTheme(theme)` accepts it directly.
+ */
+export interface HCustomTheme {
+  id: string;
+  name: string;
+  dark: ThemeSchemeTokens;
+  light: ThemeSchemeTokens;
+}
+
+/**
+ * HColorSchemeDialog — custom color scheme editor over hikari's theme
+ * presets/custom themes.
+ *
+ * Edits the seven accent tokens (primary/secondary/accent/success/error/
+ * warning/info) per mode (dark/light); surface tokens are derived. Emits
+ * `confirm` with a `HCustomTheme` (a hikari `CustomThemePreset`); the
+ * caller persists it via `useTheme().addCustomTheme()` and applies it
+ * with `setTheme()`.
+ */
+export const HColorSchemeDialog = defineComponent({
+  name: "HkColorSchemeDialog",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    /** Prefill dark tokens; defaults to the hikari synthwave dark scheme. */
+    initialDark: { type: Object, default: undefined },
+    /** Prefill light tokens; defaults to the hikari synthwave light scheme. */
+    initialLight: { type: Object, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+    confirm: (_theme: HCustomTheme) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const { effectiveMode } = useTheme();
+    const modeTab = ref<string>(effectiveMode.value);
+    const themeName = ref("");
+
+    const dark = reactive<ThemeSchemeTokens>({ ...defaultDark });
+    const light = reactive<ThemeSchemeTokens>({ ...defaultLight });
+
+    const currentTokens = computed(() => (modeTab.value === "dark" ? dark : light));
+
+    function rederiveSurface() {
+      const target = modeTab.value === "dark" ? dark : light;
+      const derived = deriveSurface(target, modeTab.value === "dark");
+      derivedTokens.forEach((k) => {
+        target[k] = { ...derived[k] };
+      });
+    }
+
+    watch(
+      () => [
+        dark.primary, dark.secondary, dark.accent, dark.success, dark.error, dark.warning, dark.info,
+        light.primary, light.secondary, light.accent, light.success, light.error, light.warning, light.info,
+      ],
+      () => rederiveSurface(),
+      { deep: true },
+    );
+
+    watch(modeTab, () => nextTick(() => rederiveSurface()));
+
+    watch(
+      () => props.modelValue,
+      (open) => {
+        if (!open) return;
+        modeTab.value = effectiveMode.value;
+        themeName.value = t("hikari::theme.customThemeName");
+        const initialDark = props.initialDark as ThemeSchemeTokens | undefined;
+        const initialLight = props.initialLight as ThemeSchemeTokens | undefined;
+        Object.assign(dark, initialDark ?? defaultDark);
+        Object.assign(light, initialLight ?? defaultLight);
+        rederiveSurface();
+      },
+    );
+
+    function updateToken(key: ColorTokenKey, rgb: { r: number; g: number; b: number }) {
+      const target = modeTab.value === "dark" ? dark : light;
+      target[key] = { ...rgb };
+    }
+
+    function handleConfirm() {
+      const id = `custom-theme-${Date.now()}`;
+      emit("confirm", {
+        id,
+        name: themeName.value || t("hikari::theme.customThemeName"),
+        dark: { ...dark },
+        light: { ...light },
+      });
+      emit("update:modelValue", false);
+    }
+
+    const footerActions = computed<ModalAction[]>(() => [
+      {
+        label: t("hikari::protocol.decline"),
+        variant: "secondary" as const,
+        onClick: () => emit("update:modelValue", false),
+      },
+      {
+        label: t("hikari::theme.save"),
+        variant: "primary" as const,
+        onClick: handleConfirm,
+      },
+    ]);
+
+    const modeTabs = computed<HkTabItem[]>(() => [
+      { key: "dark", label: t("hikari::theme.modeDark") },
+      { key: "light", label: t("hikari::theme.modeLight") },
+    ]);
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={t("hikari::theme.editScheme")}
+        width="36rem"
+        footerActions={footerActions.value}
+      >
+        <div class="s-scheme-dialog">
+          <HInput
+            modelValue={themeName.value}
+            onUpdate:modelValue={(v: string) => { themeName.value = v; }}
+            label={t("hikari::theme.themeName")}
+            placeholder={t("hikari::theme.customThemeName")}
+          />
+          <HMorphingTabs
+            tag="div"
+            class="s-scheme-mode-switch"
+            modelValue={modeTab.value}
+            onUpdate:modelValue={(v: string) => { modeTab.value = v; }}
+            tabs={modeTabs.value}
+          />
+          <div class="s-scheme-colors">
+            {editableTokens.map((key) => (
+              <HColorPicker
+                key={key}
+                r={currentTokens.value[key].r}
+                g={currentTokens.value[key].g}
+                b={currentTokens.value[key].b}
+                label={t(`hikari::theme.tokens.${key}`)}
+                onChange={(rgb: { r: number; g: number; b: number }) => updateToken(key, rgb)}
+              />
+            ))}
+          </div>
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkConnectionInfo.ts

@@ -0,0 +1,80 @@
+import { computed, type Ref } from "vue";
+
+function detectRegion(): string {
+  const lang = navigator.language;
+  const regionMap: Record<string, string> = {
+    zh: "CN", "zh-CN": "CN", "zh-Hans": "CN",
+    "zh-TW": "TW", "zh-HK": "HK",
+    ja: "JP", ko: "KR", de: "DE", fr: "FR", es: "ES", pt: "PT",
+    ar: "SA", ru: "RU", en: "US",
+  };
+  return regionMap[lang] ?? lang.split("-")[1]?.toUpperCase() ?? lang.toUpperCase();
+}
+
+function isLocalhostUrl(): boolean {
+  try {
+    const host = window.location.hostname;
+    return host === "localhost" || host === "127.0.0.1" || host === "[::1]";
+  } catch { return false; }
+}
+
+export type ConnectionStateInput =
+  | "connected"
+  | "disconnected"
+  | "connecting"
+  | "reconnecting"
+  | "failed";
+
+export interface HkConnectionInfo {
+  state: "connected" | "reconnecting" | "disconnected";
+  tier: string;
+  quality: string;
+  latencyMs: number | null;
+  isLocalhost: boolean;
+  region: string;
+  retryCount: number;
+  maxRetries: number;
+  asn: number | null;
+  attemptNumber: number;
+  countdown: number;
+}
+
+export function useConnectionInfo(
+  connectionState: Ref<ConnectionStateInput>,
+  transportTier?: Ref<string>,
+  retryCount?: Ref<number>,
+  maxRetries?: Ref<number>,
+  attemptNumber?: Ref<number>,
+  countdown?: Ref<number>,
+  latencyMs?: Ref<number | null>,
+): { connectionInfo: Ref<HkConnectionInfo> } {
+  const info = computed<HkConnectionInfo>(() => {
+    const s = connectionState.value;
+    let state: HkConnectionInfo["state"] = "disconnected";
+    if (s === "connected") state = "connected";
+    else if (s === "connecting" || s === "reconnecting") state = "reconnecting";
+    else if (s === "failed") state = "disconnected";
+
+    const tierValue = transportTier?.value ?? (isLocalhostUrl() ? "local" : "ws");
+    let quality = "unknown";
+    if (s === "connected") {
+      quality = tierValue === "local" ? "excellent" : tierValue === "ws" ? "good" : "fair";
+    }
+
+    return {
+      state,
+      tier: tierValue,
+      quality,
+      latencyMs: latencyMs?.value ?? null,
+      isLocalhost: isLocalhostUrl(),
+      region: detectRegion(),
+      retryCount: retryCount?.value ?? 0,
+      maxRetries: maxRetries?.value ?? 3,
+      asn: null,
+      attemptNumber: attemptNumber?.value ?? 0,
+      countdown: countdown?.value ?? 0,
+    };
+  });
+
+  return { connectionInfo: info };
+}

package/src/components/HkConnectionStatus.tsx

@@ -0,0 +1,133 @@
+import { computed, defineComponent, onMounted, type PropType } from "vue";
+import { useI18n } from "@celestia-island/hikari";
+import { HkStatusBar } from "./HkStatusBar";
+import {
+  useConnectionInfo,
+  type ConnectionStateInput,
+  type HkConnectionInfo,
+} from "./HkConnectionInfo";
+import { useConnectionProbe } from "../composables/useConnectionProbe";
+import { useEngineHealth } from "../composables/useEngineHealth";
+
+
+/** Secondary "engine/backend health" traffic-light segment. */
+export interface HBackendStatus {
+  label: string;
+  state: "ok" | "warn" | "error" | "unknown";
+}
+
+const backendStateColor: Record<HBackendStatus["state"], string> = {
+  ok: "rgb(var(--color-success))",
+  warn: "rgb(var(--color-warning))",
+  error: "rgb(var(--color-error))",
+  unknown: "var(--color-muted)",
+};
+
+/**
+ * Batteries-included connection status footer: composes useConnectionProbe +
+ * useEngineHealth + useConnectionInfo + HkStatusBar. Slots:
+ * - `left`  — extras after the status tags (e.g. a mock badge)
+ * - `right` — extras on the far right (e.g. an engine version tag)
+ */
+export const HkConnectionStatus = defineComponent({
+  name: "HkConnectionStatus",
+  props: {
+    version: { type: String, default: "0.1.0" },
+    panelBuildHash: { type: String as PropType<string | undefined>, default: undefined },
+    /** API origin for the /api/health probe (defaults to same-origin ""). */
+    baseUrl: { type: String as PropType<string | undefined>, default: undefined },
+    backendStatus: { type: Object as PropType<HBackendStatus | undefined>, default: undefined },
+    standalone: { type: Boolean, default: true },
+  },
+  setup(props, { slots }) {
+
+    const { result: probe, retryNow } = useConnectionProbe();
+    const { health } = useEngineHealth(props.baseUrl);
+
+    const connectionState = computed<ConnectionStateInput>(() => probe.value.state);
+    const transportTier = computed(() => probe.value.transportTier);
+    const attemptNumber = computed(() => probe.value.attemptNumber);
+    const retryTotal = computed(() => probe.value.retryTotal);
+    const countdown = computed(() => probe.value.countdown);
+    const latencyMs = computed(() => probe.value.latencyMs);
+
+    const { connectionInfo } = useConnectionInfo(
+      connectionState,
+      transportTier,
+      attemptNumber,
+      retryTotal,
+      attemptNumber,
+      countdown,
+      latencyMs,
+    );
+
+    // Overlay the server-reported network context (region/asn) when available;
+    // "XX" is the backend's unknown-region sentinel, keep the local guess then.
+    const mergedInfo = computed<HkConnectionInfo>(() => {
+      const base = connectionInfo.value;
+      const net = health.value?.network;
+      if (!net) return base;
+      return {
+        ...base,
+        region: net.region && net.region !== "XX" ? net.region : base.region,
+        asn: net.asn ?? base.asn,
+      };
+    });
+
+    const connectionStatus = computed<"connected" | "reconnecting" | "disconnected">(() => {
+      const s = probe.value.state;
+      if (s === "connected") return "connected";
+      if (s === "connecting" || s === "reconnecting") return "reconnecting";
+      return "disconnected";
+    });
+
+    return () => {
+      const { t } = useI18n();
+      const bs = props.backendStatus;
+      const inner = (
+        <>
+          <div class="s-status-bar-left">
+            <HkStatusBar
+              standalone={false}
+              version={props.version}
+              panelBuildHash={props.panelBuildHash}
+              engineVersion={health.value?.engineVersion ?? null}
+              engineBuildHash={health.value?.engineBuildHash ?? undefined}
+              connectionStatus={connectionStatus.value}
+              connectionInfo={mergedInfo.value}
+              onRetry={retryNow}
+              transportTier={probe.value.transportTier}
+              attemptNumber={probe.value.attemptNumber}
+              countdown={probe.value.countdown}
+            />
+            {bs && (
+              <span class="s-status-bar-tag" style={{ cursor: "default" }}>
+                <span
+                  class="s-status-bar-dot"
+                  style={{ background: backendStateColor[bs.state] ?? backendStateColor.unknown }}
+                />
+                <span class="s-status-bar-tag-label">{bs.label}</span>
+                <span class="s-status-bar-tag-value">
+                  {t(`hikari::statusBar.backend.${bs.state}`, bs.state)}
+                </span>
+              </span>
+            )}
+            {slots.left?.()}
+          </div>
+          <div class="s-status-bar-center" />
+          <div class="s-status-bar-right">
+            {slots.right?.()}
+          </div>
+        </>
+      );
+
+      if (!props.standalone) return inner;
+
+      return (
+        <footer class="s-status-bar">
+          {inner}
+        </footer>
+      );
+    };
+  },
+});

package/src/components/HkCountdownDigit.tsx

@@ -0,0 +1,97 @@
+import { defineComponent, ref, watch } from "vue";
+
+export const PCountdownDigit = defineComponent({
+  name: "HkCountdownDigit",
+  props: {
+    value: { type: Number, default: 0 },
+  },
+  setup(props) {
+    const prevValue = ref(props.value);
+    const key = ref(0);
+    const oldDigit = ref(String(props.value));
+    const newDigit = ref(String(props.value));
+
+    watch(
+      () => props.value,
+      (next, old) => {
+        if (next !== old) {
+          oldDigit.value = String(old);
+          newDigit.value = String(next);
+          key.value++;
+        }
+      },
+    );
+
+    return () => (
+      <span
+        class="plana-countdown-digit"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0",
+          fontVariantNumeric: "tabular-nums",
+          height: "1em",
+          lineHeight: 1,
+          fontWeight: 700,
+        }}
+      >
+        <span
+          key={key.value}
+          class="plana-countdown-digit-slot"
+          style={{
+            position: "relative",
+            display: "inline-flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+            height: "1em",
+            width: "1ch",
+          }}
+        >
+          <span
+            class="plana-flip-out"
+            style={{
+              display: "block",
+              lineHeight: 1,
+              animation: "plana-flip-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) both",
+            }}
+          >
+            {oldDigit.value}
+          </span>
+          <span
+            class="plana-flip-in"
+            style={{
+              display: "block",
+              lineHeight: 1,
+              position: "absolute",
+              inset: 0,
+              animation: "plana-flip-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both",
+            }}
+          >
+            {newDigit.value}
+          </span>
+        </span>
+        <span
+          style={{
+            fontSize: "0.75em",
+            opacity: 0.6,
+            fontWeight: 400,
+          }}
+        >
+          s
+        </span>
+        <style>{`
+          @keyframes plana-flip-out {
+            0%   { transform: translateY(0); opacity: 1; }
+            100% { transform: translateY(-1em); opacity: 0; }
+          }
+          @keyframes plana-flip-in {
+            0%   { transform: translateY(1em); opacity: 0; }
+            100% { transform: translateY(0); opacity: 1; }
+          }
+        `}</style>
+      </span>
+    );
+  },
+});

package/src/components/HkDateTimePicker.tsx

@@ -1,5 +1,11 @@
-import { computed, defineComponent, onBeforeUnmount, ref, Transition, watch, type PropType } from "vue";
 import { ArrowLeft, Calendar, ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-vue-next";
+import { computed, defineComponent, onBeforeUnmount, ref, Transition, watch, type PropType } from "vue";
+
+
+
+
+
+
 
 import { useI18n } from "../i18n/context";
 import "./HkDateTimePicker.scss";

package/src/components/HkErrorBoundary.tsx

@@ -1,5 +1,8 @@
+import { Copy, RefreshCw, TriangleAlert as AlertTriangle } from "lucide-vue-next";
 import { defineComponent, onErrorCaptured, ref, type PropType, type VNode } from "vue";
-import { AlertTriangle, Copy, RefreshCw } from "lucide-vue-next";
+
+
+
 import { useClipboard } from "../runtime/useClipboard";
 import { useI18n } from "../i18n/context";
 import HButton from "./HkButton";

package/src/components/HkIcon.scss

@@ -0,0 +1,123 @@
+// Icon component styles
+//
+// These styles enable icons to inherit theme colors and support
+// custom color overrides.
+
+// ------
+// Base Icon Styles
+// ------
+
+.hk-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // Default: inherit color from parent element
+  // This allows buttons and other containers to control icon color
+  color: inherit;
+
+  // SVG inherits color; fill/stroke controlled by each icon's inline attributes
+  svg {
+    width: 100%;
+    height: 100%;
+    // MDI fill-based icons set fill="currentColor" in their SVG data
+    // Lucide/Feather stroke-based icons set stroke="currentColor" + fill="none"
+    // We must NOT override these here
+  }
+}
+
+// ------
+// Icon Size Variants
+// ------
+
+.hk-icon-16 {
+  width: 1rem;
+  height: 1rem;
+}
+
+.hk-icon-20 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.hk-icon-24 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.hk-icon-32 {
+  width: 2rem;
+  height: 2rem;
+}
+
+.hk-icon-40 {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.hk-icon-48 {
+  width: 3rem;
+  height: 3rem;
+}
+
+.hk-icon-64 {
+  width: 4rem;
+  height: 4rem;
+}
+
+// ------
+// Icon Color Variants
+// ------
+
+// Use theme primary color
+.hk-icon-primary {
+  color: var(--hi-color-primary);
+}
+
+// Use theme secondary color
+.hk-icon-secondary {
+  color: var(--hi-color-secondary);
+}
+
+// Use theme accent color
+.hk-icon-accent {
+  color: var(--hi-color-accent);
+}
+
+// Use theme success color
+.hk-icon-success {
+  color: var(--hi-color-success);
+}
+
+// Use theme warning color
+.hk-icon-warning {
+  color: var(--hi-color-warning);
+}
+
+// Use theme danger color
+.hk-icon-danger {
+  color: var(--hi-color-danger);
+}
+
+// Use secondary text color
+.hk-icon-muted {
+  color: var(--hi-color-text-secondary);
+}
+
+// ------
+// Transitions
+// ------
+
+.hk-icon-transition {
+  transition: color 150ms ease-in-out;
+
+  svg path,
+  svg circle,
+  svg rect,
+  svg ellipse,
+  svg polygon,
+  svg polyline,
+  svg line {
+    transition: fill 150ms ease-in-out, stroke 150ms ease-in-out;
+  }
+}