@celestia-island/hikari 0.4.4 → 0.4.5

package/src/components/HkSelect.tsx

@@ -8,6 +8,8 @@ import {
   type PropType,
   Teleport,
 } from "vue";
+
+
 import { ChevronDown, Search } from "lucide-vue-next";
 import "./HkSelect.scss";
 

package/src/components/HkSelectionGrid.tsx

@@ -1,5 +1,6 @@
-import { defineComponent, type PropType } from "vue";
 import { Check } from "lucide-vue-next";
+import { defineComponent, type PropType } from "vue";
+
 import "./HkSelectionGrid.scss";
 
 export interface SelectionGridItem {

package/src/components/HkStatusBar.tsx

@@ -0,0 +1,235 @@
+import { defineComponent, ref, onMounted, type PropType } from "vue";
+import { HPopover, useI18n } from "@celestia-island/hikari";
+import { Wifi, WifiOff, Globe, Cable, Cpu } from "lucide-vue-next";
+import type { HkConnectionInfo } from "./HkConnectionInfo";
+import { PCountdownDigit } from "./HkCountdownDigit";
+
+
+const regionLabel: Record<string, string> = {
+  CN: "\u4e2d\u56fd\u5927\u9646", JP: "\u65e5\u672c", KR: "\u97e9\u56fd",
+  US: "\u7f8e\u56fd", GB: "\u82f1\u56fd", DE: "\u5fb7\u56fd",
+  FR: "\u6cd5\u56fd", SA: "\u6c99\u7279", TW: "\u4e2d\u56fd\u53f0\u6e7e",
+  HK: "\u4e2d\u56fd\u9999\u6e2f", MO: "\u4e2d\u56fd\u6fb3\u95e8",
+  BR: "\u5df4\u897f", RU: "\u4fc4\u7f57\u65af",
+  CA: "\u52a0\u62ff\u5927", AU: "\u6fb3\u5927\u5229\u4e9a",
+  PT: "\u8461\u8404\u7259", ES: "\u897f\u73ed\u7259",
+};
+
+function latencyColor(ms: number | null): string {
+  if (ms === null) return "var(--color-muted)";
+  if (ms < 30) return "rgb(var(--color-success))";
+  if (ms < 100) return "rgb(var(--color-warning))";
+  return "rgb(var(--color-error))";
+}
+
+function qualityIcon(quality: string, tier: string, isLocalhost: boolean, size: number) {
+  if (isLocalhost) return <Cable size={size} />;
+  if (quality === "excellent" || quality === "good") return <Wifi size={size} />;
+  if (quality === "unknown") return <Wifi size={size} style={{ opacity: 0.4 }} />;
+  return <WifiOff size={size} />;
+}
+
+function fmtVer(v: string, hash?: string): string {
+  if (hash) return `${v} ${hash}`;
+  return v;
+}
+
+export const HkStatusBar = defineComponent({
+  name: "HkStatusBar",
+  props: {
+    version: { type: String, default: "0.1.0" },
+    engineVersion: { type: String as PropType<string | null>, default: null },
+    panelBuildHash: { type: String as PropType<string | undefined>, default: undefined },
+    engineBuildHash: { type: String as PropType<string | undefined>, default: undefined },
+    connectionStatus: {
+      type: String as PropType<"connected" | "reconnecting" | "disconnected" | "connecting">,
+      default: "disconnected",
+    },
+    connectionInfo: {
+      type: Object as PropType<HkConnectionInfo | null>,
+      default: null,
+    },
+    standalone: { type: Boolean, default: true },
+    onRetry: { type: Function as PropType<() => void>, default: undefined },
+    latencyMs: { type: Number, default: null },
+    transportTier: { type: String as PropType<string>, default: undefined },
+    attemptNumber: { type: Number, default: undefined },
+    countdown: { type: Number, default: undefined },
+  },
+  setup(props) {
+    const popupOpen = ref(false);
+    const anchorRef = ref<HTMLElement | null>(null);
+    let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const dotColorMap: Record<string, string> = {
+      connected: "rgb(var(--color-success))",
+      connecting: "rgb(var(--color-warning))",
+      reconnecting: "rgb(var(--color-warning))",
+      disconnected: "rgb(var(--color-error))",
+    };
+
+    function onTagEnter() {
+      if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
+      popupOpen.value = true;
+    }
+    function onTagLeave() {
+      closeTimer = setTimeout(() => { popupOpen.value = false; }, 250);
+    }
+    function onPopupEnter() {
+      if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
+    }
+    function onPopupLeave() {
+      popupOpen.value = false;
+    }
+    function onTagClick() {
+      if (props.connectionStatus !== "connected") {
+        props.onRetry?.();
+      }
+    }
+
+    return () => {
+      const { t } = useI18n();
+      const info = props.connectionInfo;
+      const latency = props.latencyMs ?? info?.latencyMs ?? null;
+      const mode = props.connectionStatus;
+      const tier = props.transportTier ?? info?.tier ?? "ws";
+      const attempt = props.attemptNumber ?? info?.attemptNumber ?? 0;
+      const countdown = props.countdown ?? info?.countdown ?? 0;
+
+      const tierLabelKey = `hikari::statusBar.tier.${tier}`;
+      const statusText = mode === "connected" ? t("hikari::statusBar.connected", "Connected")
+        : mode === "reconnecting" || mode === "connecting" ? t("hikari::statusBar.connecting", "Connecting...")
+        : t("hikari::statusBar.disconnected", "Disconnected");
+
+      const connecting = mode === "reconnecting" || mode === "connecting";
+
+      const pv = fmtVer(props.version, props.panelBuildHash);
+      const ev = props.engineVersion;
+      // Two nowrap version parts inside a flex-wrap container: on wide
+      // screens they sit side by side ("pv | Engine ev"), and when the
+      // width runs out the engine part wraps to its own line instead of
+      // breaking mid-token (mobile footer vertical-fragmentation fix).
+      const enginePart = ev
+        ? `${t("hikari::statusBar.engine", "Engine")} ${fmtVer(ev, props.engineBuildHash)}`
+        : null;
+
+      const tagClass = connecting
+        ? "s-status-bar-tag s-status-bar-tag-reconnecting"
+        : "s-status-bar-tag";
+
+      const inner = (
+        <>
+          <span
+            ref={anchorRef}
+            class={tagClass}
+            role="button"
+            tabindex={0}
+            onMouseenter={onTagEnter}
+            onMouseleave={onTagLeave}
+            onClick={onTagClick}
+            onKeydown={(e: KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onTagClick(); }
+            }}
+            style={{
+              position: "relative", zIndex: 51,
+            }}
+          >
+            <span class="s-status-bar-dot" style={{
+              background: dotColorMap[mode] ?? dotColorMap.disconnected,
+            }} />
+            <span class="s-status-bar-tag-label">{t("hikari::statusBar.panel", "Panel")}</span>
+            <span class="s-status-bar-tag-value">
+              <span class="s-status-bar-version">{pv}</span>
+              {enginePart && (
+                <span class="s-status-bar-version">
+                  <span class="s-status-bar-version-sep" aria-hidden="true">| </span>
+                  {enginePart}
+                </span>
+              )}
+            </span>
+          </span>
+
+          <HPopover
+            modelValue={popupOpen.value}
+            onUpdate:modelValue={(v: boolean) => { popupOpen.value = v; }}
+            placement="top-start"
+            backdrop={false}
+            closeOnBackdrop={false}
+            anchorRef={anchorRef.value}
+          >
+            <div
+              onMouseenter={onPopupEnter}
+              onMouseleave={onPopupLeave}
+              style={{
+                minWidth: "220px", padding: "10px 14px",
+                fontSize: "0.75rem", lineHeight: 1.6,
+                color: "rgb(var(--color-text))",
+              }}
+            >
+              {info ? (
+                <>
+                  <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px", fontWeight: 600, fontSize: "0.8125rem" }}>
+                    {qualityIcon(info.quality || (mode === "connected" ? "good" : "unknown"), tier, info.isLocalhost, 14)}
+                    <span style={{ color: dotColorMap[mode] ?? dotColorMap.disconnected }}>
+                      {statusText}
+                    </span>
+                    {latency !== null && (
+                      <span style={{ marginLeft: "auto", color: latencyColor(latency), fontFamily: "var(--font-mono, monospace)", fontWeight: 600, fontSize: "0.6875rem" }}>
+                        {latency} ms
+                      </span>
+                    )}
+                  </div>
+                  {connecting && attempt > 0 && (
+                    <div style={{ display: "flex", alignItems: "center", gap: "4px", color: "rgb(var(--color-warning))", fontSize: "0.6875rem", marginBottom: "4px" }}>
+                      <span>
+                        {t("hikari::statusBar.retrying", "Retrying {retryCount} / {maxRetries}")
+                          .replace("{retryCount}", String(attempt))
+                          .replace("{maxRetries}", String(info.maxRetries > 0 ? info.maxRetries : 3))}
+                      </span>
+                      {countdown > 0 && (
+                        <span style={{ display: "inline-flex", alignItems: "center", gap: "4px", fontFamily: "var(--font-mono, monospace)", marginLeft: "8px" }}>
+                          <PCountdownDigit value={countdown} />
+                        </span>
+                      )}
+                    </div>
+                  )}
+                  {mode === "disconnected" && (
+                    <div style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7 }}>
+                      {t("hikari::statusBar.clickReconnect", "Click to retry")}
+                    </div>
+                  )}
+                  <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                    <Cpu size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
+                    <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.protocol", "Protocol")}</span>
+                    {connecting ? (
+                      <span style={{ color: "rgb(var(--color-warning))" }}>
+                        {t("hikari::statusBar.probing", "Probing...")}
+                      </span>
+                    ) : (
+                      <span>{t(tierLabelKey, tier)}</span>
+                    )}
+                  </div>
+                  <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                    <Globe size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
+                    <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.network", "Network")}</span>
+                    <span>{regionLabel[info.region] ?? info.region}{info.asn != null ? ` · AS${info.asn}` : ""}{info.isLocalhost ? " · " + t("hikari::statusBar.local", "Local") : ""}</span>
+                  </div>
+                </>
+              ) : (
+                <div style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</div>
+              )}
+            </div>
+          </HPopover>
+        </>
+      );
+
+      if (!props.standalone) return inner;
+
+      return (
+        <footer class="s-status-bar">
+          {inner}
+        </footer>
+      );
+    };
+  },
+});

package/src/components/HkTag.tsx

@@ -1,5 +1,6 @@
-import { computed, defineComponent, type PropType } from "vue";
 import { X } from "lucide-vue-next";
+import { computed, defineComponent, type PropType } from "vue";
+
 import "./HkTag.scss";
 
 export type TagVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";

package/src/components/HkThemeToggle.scss

@@ -0,0 +1,130 @@
+.s-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.s-theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  min-width: 1.75rem;
+  padding: 0 var(--space-6, 0.375rem);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 12%));
+  background: rgb(var(--color-surface));
+  color: rgb(var(--color-text-secondary, var(--color-muted)));
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.s-theme-toggle-btn:hover {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+.s-theme-toggle-btn[data-variant="main"] {
+  border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
+  border-right: none;
+}
+
+.s-theme-toggle-btn[data-variant="arrow"] {
+  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
+}
+
+.s-theme-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 0.25rem);
+  min-width: 13rem;
+  padding: var(--space-8, 0.5rem);
+}
+
+.s-theme-menu-label {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  color: rgb(var(--color-muted));
+  padding: var(--space-4, 0.25rem) var(--space-6, 0.375rem);
+}
+
+.s-theme-mode-row {
+  display: flex;
+  gap: var(--space-4, 0.25rem);
+  padding: 0 var(--space-6, 0.375rem) var(--space-4, 0.25rem);
+}
+
+.s-theme-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 12%));
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-muted));
+  font-size: var(--text-xs, 0.75rem);
+  cursor: pointer;
+}
+
+.s-theme-mode-btn:hover {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+.s-theme-mode-btn[data-active] {
+  background: rgb(var(--color-primary));
+  border-color: rgb(var(--color-primary));
+  color: rgb(var(--color-on-primary));
+}
+
+.s-theme-item-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+}
+
+.s-theme-item-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8, 0.5rem);
+  flex: 1;
+  padding: var(--space-6, 0.375rem) var(--space-8, 0.5rem);
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text));
+  font-size: var(--text-sm, 0.8125rem);
+  text-align: left;
+  cursor: pointer;
+}
+
+.s-theme-item-btn:hover {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+.s-theme-item-btn[data-active] {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+  font-weight: 600;
+}
+
+.s-theme-item-delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-muted));
+  cursor: pointer;
+}
+
+.s-theme-item-delete:hover {
+  background: rgb(var(--color-error) / 15%);
+  color: rgb(var(--color-error));
+}

package/src/components/HkThemeToggle.tsx

@@ -0,0 +1,160 @@
+import { computed, defineComponent, onMounted, ref, type PropType } from "vue";
+import { Check, ChevronDown, Monitor, Moon, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
+import { HDivider, HPopover, useI18n, useTheme, type PopupPlacement, type ThemeId } from "@celestia-island/hikari";
+
+import { HColorSchemeDialog, type HCustomTheme } from "./HkColorSchemeDialog";
+import "./HkThemeToggle.scss";
+
+
+/**
+ * HkThemeToggle — light/dark/auto theme control over hikari's theme engine.
+ *
+ * Composes hikari's `useTheme()` (theme presets + custom themes + mode
+ * persistence); it does NOT reimplement the theme engine. A main button
+ * cycles light/dark (auto keeps a Monitor glyph); the popover offers
+ * explicit Light/Dark/Auto modes, preset/custom theme selection (custom
+ * themes are removable), and opens HColorSchemeDialog to create a new
+ * custom scheme.
+ */
+export const HkThemeToggle = defineComponent({
+  name: "HkThemeToggle",
+  props: {
+    /** Popover placement. */
+    popoverPlacement: { type: String as PropType<PopupPlacement>, default: "bottom-end" },
+  },
+  emits: {
+    "update:scheme": (_theme: HCustomTheme) => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const { currentTheme, currentMode, effectiveMode, setTheme, setMode, toggleMode, allThemeList, addCustomTheme, removeCustomTheme } = useTheme();
+
+    const menuOpen = ref(false);
+    const triggerRef = ref<HTMLElement | null>(null);
+    const schemeDialogOpen = ref(false);
+
+    const modeLabel = computed(() => {
+      const map: Record<string, string> = {
+        system: t("hikari::theme.modeAuto"),
+        light: t("hikari::theme.modeLight"),
+        dark: t("hikari::theme.modeDark"),
+      };
+      return map[currentMode.value] ?? currentMode.value;
+    });
+
+    const modeOptions = computed(() => [
+      { key: "light", label: t("hikari::theme.modeLight"), icon: () => <Sun size={12} /> },
+      { key: "dark", label: t("hikari::theme.modeDark"), icon: () => <Moon size={12} /> },
+      { key: "system", label: t("hikari::theme.modeAuto"), icon: () => <Monitor size={12} /> },
+    ]);
+
+    function onSelectTheme(id: ThemeId) {
+      setTheme(id);
+      menuOpen.value = false;
+    }
+
+    function onConfirmScheme(theme: HCustomTheme) {
+      addCustomTheme(theme);
+      setTheme(theme.id);
+      emit("update:scheme", theme);
+    }
+
+    return () => (
+      <div class="s-theme-toggle" ref={triggerRef}>
+        <button
+          type="button"
+          class="s-theme-toggle-btn"
+          data-variant="main"
+          onClick={toggleMode}
+          title={modeLabel.value}
+          aria-label={t("hikari::theme.mode")}
+        >
+          {currentMode.value === "system" ? (
+            <Monitor size={14} />
+          ) : effectiveMode.value === "dark" ? (
+            <Moon size={14} />
+          ) : (
+            <Sun size={14} />
+          )}
+        </button>
+        <button
+          type="button"
+          class="s-theme-toggle-btn"
+          data-variant="arrow"
+          onClick={() => { menuOpen.value = !menuOpen.value; }}
+          aria-label={t("hikari::theme.themes")}
+        >
+          <ChevronDown size={12} />
+        </button>
+
+        <HPopover
+          modelValue={menuOpen.value}
+          onUpdate:modelValue={(v: boolean) => { menuOpen.value = v; }}
+          placement={props.popoverPlacement}
+          anchorRef={triggerRef.value ?? null}
+        >
+          <div class="s-theme-menu">
+            <div class="s-theme-menu-label">{t("hikari::theme.mode")}</div>
+            <div class="s-theme-mode-row">
+              {modeOptions.value.map((opt) => (
+                <button
+                  key={opt.key}
+                  type="button"
+                  class="s-theme-mode-btn"
+                  data-active={currentMode.value === opt.key || undefined}
+                  onClick={() => setMode(opt.key as "light" | "dark" | "system")}
+                >
+                  {opt.icon()}
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+
+            <HDivider spacing="md" />
+
+            <div class="s-theme-menu-label">{t("hikari::theme.themes")}</div>
+            {allThemeList.value.map((th) => (
+              <div key={th.id} class="s-theme-item-row">
+                <button
+                  type="button"
+                  class="s-theme-item-btn"
+                  data-active={currentTheme.value === th.id || undefined}
+                  onClick={() => onSelectTheme(th.id)}
+                >
+                  <span>{th.name}</span>
+                  {currentTheme.value === th.id && <Check size={14} />}
+                </button>
+                {th.isCustom && (
+                  <button
+                    type="button"
+                    class="s-theme-item-delete"
+                    title={t("hikari::theme.deleteTheme")}
+                    onClick={() => removeCustomTheme(th.id)}
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                )}
+              </div>
+            ))}
+
+            <button
+              type="button"
+              class="s-theme-item-btn"
+              onClick={() => { schemeDialogOpen.value = true; menuOpen.value = false; }}
+            >
+              <Palette size={14} />
+              <span>{t("hikari::theme.editScheme")}</span>
+            </button>
+          </div>
+          {slots["menu-extra"]?.()}
+        </HPopover>
+
+        <HColorSchemeDialog
+          modelValue={schemeDialogOpen.value}
+          onUpdate:modelValue={(v: boolean) => { schemeDialogOpen.value = v; }}
+          onConfirm={onConfirmScheme}
+        />
+      </div>
+    );
+  },
+});

package/src/components/HkTimeline.tsx

@@ -1,5 +1,6 @@
-import { defineComponent, type PropType } from "vue";
 import { Check } from "lucide-vue-next";
+import { defineComponent, type PropType } from "vue";
+
 
 import "./HkTimeline.scss";
 

package/src/components/HkToast.tsx

@@ -1,5 +1,8 @@
+import { CircleX as XCircle, X } from "lucide-vue-next";
 import { computed, defineComponent, ref, Teleport, Transition, TransitionGroup, watch } from "vue";
-import { AlertTriangle, CheckCircle, Copy, Info, X, XCircle } from "lucide-vue-next";
+import { AlertTriangle, CheckCircle, Copy, Info } from "lucide-vue-next";
+
+
 import { useToast, type ToastItem, type ToastMessage, type ToastType } from "../runtime/useToast";
 import { useClipboard } from "../runtime/useClipboard";
 import { useI18n } from "../i18n/context";

package/src/components/HkTrendChart.tsx

@@ -1,19 +1,11 @@
 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,
-]);
+// echarts is loaded lazily (dynamic import in onMounted) so a consumer that
+// merely imports this component — or anything else from the hikari package —
+// never pays for echarts in the initial bundle. The static import graph
+// previously dragged the whole echarts module tree into the shared chunk,
+// which every entry page (e.g. the login screen) had to download and parse.
+import type { ECharts } from "echarts/core";
 
 export interface TrendPoint {
   time: number;
@@ -50,7 +42,7 @@ export default defineComponent({
   },
   setup(props) {
     const chartEl = ref<HTMLElement>();
-    let chart: echarts.ECharts | null = null;
+    let chart: ECharts | null = null;
     let resizeCleanup: (() => void) | undefined;
 
     function renderChart() {
@@ -141,8 +133,27 @@ export default defineComponent({
       chart?.resize();
     }
 
-    onMounted(() => {
+    onMounted(async () => {
       if (chartEl.value) {
+        const echarts = await import("echarts/core");
+        const { LineChart } = await import("echarts/charts");
+        const {
+          DataZoomComponent,
+          GridComponent,
+          LegendComponent,
+          MarkLineComponent,
+          TooltipComponent,
+        } = await import("echarts/components");
+        const { CanvasRenderer } = await import("echarts/renderers");
+        echarts.use([
+          LineChart,
+          GridComponent,
+          TooltipComponent,
+          LegendComponent,
+          DataZoomComponent,
+          MarkLineComponent,
+          CanvasRenderer,
+        ]);
         chart = echarts.init(chartEl.value);
         renderChart();
         // Keep the canvas in sync with its container. echarts doesn't

package/src/components/HkZoomToolbar.tsx

@@ -1,5 +1,8 @@
-import { defineComponent } from "vue";
 import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { defineComponent } from "vue";
+
+
+
 
 import HButton from "./HkButton";
 import { useI18n } from "../i18n/context";

package/src/components/_hikari-vars.scss

@@ -0,0 +1,4 @@
+$hikari-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$hikari-font-size-sm: 0.875rem;
+$hikari-radius-fui-sm: 4px;
+$hikari-radius-fui-md: 6px;