@celestia-island/hikari 0.4.4 → 0.4.5

package/src/components/HkMediaControlBar.tsx

@@ -1,17 +1,17 @@
-import { defineComponent } from "vue";
 import { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from "lucide-vue-next";
+import { defineComponent } from "vue";
+
+
+
+
+
+
 
 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
@@ -19,6 +19,13 @@ export function formatMediaTime(sec: number): string {
  * controller state via props and forwards intents via events. `HMediaSlider`
  * backs both the seek track and the volume track.
  */
+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")}`;
+}
+
 export default defineComponent({
   name: "HkMediaControlBar",
   props: {

package/src/components/HkMinimap.tsx

@@ -1,5 +1,8 @@
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, type PropType } from "vue";
 import { Maximize2, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, type PropType } from "vue";
+
+
+
 
 import { useI18n } from "../i18n/context";
 import "./HkMinimap.scss";
@@ -35,7 +38,7 @@ export default defineComponent({
     /** Optional image rendered as the minimap background (image navigator).
      *  When set, the minimap renders even with no boxes. */
     imageSrc: { type: String, default: undefined },
-    imageBounds: { type: Object as PropType<MinimapRect>, default: undefined },
+    imageBounds: { type: Object as PropType<MinimapRect | undefined>, default: undefined },
     zoom: { type: Number, default: 1 },
     panX: { type: Number, default: 0 },
     panY: { type: Number, default: 0 },
@@ -51,6 +54,11 @@ export default defineComponent({
     /** Show the reset/fit button in the zoom bar (chest only rendered it
      *  when a reset handler was wired up). */
     showReset: { type: Boolean, default: false },
+    /** Optional prop-callback surface (alternative to the emits). */
+    onZoomIn: { type: Function as PropType<() => void>, default: undefined },
+    onZoomOut: { type: Function as PropType<() => void>, default: undefined },
+    onReset: { type: Function as PropType<() => void>, default: undefined },
+    onPanDelta: { type: Function as PropType<(dx: number, dy: number) => void>, default: undefined },
   },
   emits: {
     zoomIn: () => true,

package/src/components/HkModal.tsx

@@ -13,6 +13,7 @@ import {
 
 import { useI18n } from "../i18n/context";
 import "./HkModal.scss";
+import { focusFirst, trapFocus } from "../utils/dom";
 import { useOverlay } from "../runtime/useOverlay";
 import { usePopupManager } from "../runtime/usePopupManager";
 import HButton from "./HkButton";
@@ -29,28 +30,6 @@ export interface ModalAction {
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
-function trapFocus(container: HTMLElement, e: KeyboardEvent): void {
-  const focusable = container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
-  if (focusable.length === 0) return;
-  const first = focusable[0];
-  const last = focusable[focusable.length - 1];
-  if (e.shiftKey) {
-    if (document.activeElement === first) {
-      e.preventDefault();
-      last.focus();
-    }
-  } else {
-    if (document.activeElement === last) {
-      e.preventDefault();
-      first.focus();
-    }
-  }
-}
-
-function focusFirst(container: HTMLElement): void {
-  const el = container.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
-  if (el) el.focus();
-}
 
 export default defineComponent({
   name: "HkModal",
@@ -446,7 +425,7 @@ export default defineComponent({
                         >
                           <polyline points="6 9 12 15 18 9" />
                         </svg>
-                        <span>Auto</span>
+                        <span>{t("hk.modal.auto", "Auto")}</span>
                       </div>
                     )}
                   </div>

package/src/components/HkNavItem.tsx

@@ -1,6 +1,7 @@
+import { ChevronRight } from "lucide-vue-next";
 import { defineComponent, computed, ref, type PropType } from "vue";
 import type { Component } from "vue";
-import { ChevronRight } from "lucide-vue-next";
+
 import "./HkNavItem.scss";
 
 interface NavItemChild {

package/src/components/HkNavSidebar.tsx

@@ -0,0 +1,99 @@
+import { defineComponent, h, type Component, type PropType } from "vue";
+
+import { HNavItem, HSidebar } from "@celestia-island/hikari";
+import { ChartBarBig as BarChart3, Bell, Bot, Box, Cable, Cpu, FileText, FolderOpen, Gauge, Key, Layers, LayoutDashboard, Mic, Monitor, Send, Settings, Share2, Shield, Webhook, Zap } from "lucide-vue-next";
+
+interface NavItem {
+  key: string;
+  icon: string;
+  label: string;
+  route: string;
+  disabled?: boolean;
+  badge?: string;
+}
+
+const iconMap: Record<string, Component> = {
+  chart: LayoutDashboard,
+  plug: Cable,
+  bot: Bot,
+  cpu: Cpu,
+  zap: Zap,
+  folder: FolderOpen,
+  radio: Send,
+  monitor: Monitor,
+  box: Box,
+  link: Webhook,
+  key: Key,
+  shield: Shield,
+  bar: BarChart3,
+  gauge: Gauge,
+  mic: Mic,
+  settings: Settings,
+  panels: Layers,
+  bell: Bell,
+  share: Share2,
+  manifest: FileText,
+};
+
+export const HkNavSidebar = defineComponent({
+  name: "HkNavSidebar",
+  props: {
+    navItems: {
+      type: Array as PropType<NavItem[]>,
+      required: true,
+    },
+    currentRoute: {
+      type: String,
+      required: true,
+    },
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["navigate"],
+  setup(props, { emit }) {
+    return () => (
+      <HSidebar width="224px">
+        {{
+          default: () => (
+            <nav>
+              {props.navItems.map((item) => {
+                const active = props.currentRoute === item.route;
+                const IconComp = iconMap[item.icon];
+                return (
+                  <HNavItem
+                    key={item.key}
+                    active={active}
+                    disabled={item.disabled}
+                    onClick={() => emit("navigate", item.route)}
+                  >
+                    {{
+                      // Render via h(): Vue's `Component` union includes
+                      // non-callable option types, so `<IconComp />` is not a
+                      // valid JSX element type (matches hikari's HkTree).
+                      icon: () => (IconComp ? h(IconComp, { size: 16 }) : null),
+                      default: () => (
+                        <span class="s-nav-item-content">
+                          <span class="truncate">{item.label}</span>
+                          {item.badge && (
+                            <span
+                              class="s-nav-item-badge"
+                              aria-label={`${item.badge} pending`}
+                            >
+                              {item.badge}
+                            </span>
+                          )}
+                        </span>
+                      ),
+                    }}
+                  </HNavItem>
+                );
+              })}
+            </nav>
+          ),
+        }}
+      </HSidebar>
+    );
+  },
+});

package/src/components/HkPageHeader.tsx

@@ -0,0 +1,40 @@
+import { defineComponent } from "vue";
+
+/**
+ * Title + actions page header. Slot `actions` renders on the right.
+ */
+export const HkPageHeader = defineComponent({
+  name: "HkPageHeader",
+  props: {
+    title: { type: String, required: true },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "var(--space-12, 0.75rem)",
+          marginBottom: "var(--space-16, 1rem)",
+        }}
+      >
+        <h1
+          style={{
+            margin: 0,
+            fontSize: "var(--text-lg, 1.125rem)",
+            fontWeight: 700,
+            color: "rgb(var(--color-text))",
+          }}
+        >
+          {props.title}
+        </h1>
+        {slots.actions && (
+          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-8, 0.5rem)" }}>
+            {slots.actions()}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkPasswordInput.scss

@@ -22,9 +22,8 @@
   align-items: center;
   min-height: 2.5rem;
   padding: 0.5rem 0.75rem;
-  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
-  backdrop-filter: blur(8px);
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
+  border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
   border-radius: 6px;
   overflow: hidden;
   transition:
@@ -84,9 +83,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition:
-    color 0.3s ease,
-    filter 0.3s ease;
+  transition: color 0.3s ease;
 }
 
 .hk-pwd-lock-empty {
@@ -103,12 +100,10 @@
 .hk-pwd-box:focus-within .hk-pwd-lock,
 .hk-pwd-box[data-focused] .hk-pwd-lock {
   color: var(--hi-color-primary, #58a6ff);
-  filter: drop-shadow(0 0 5px currentColor);
 }
 
 .hk-pwd-lock[data-revealing] {
   color: var(--hi-color-primary, #58a6ff);
-  filter: drop-shadow(0 0 6px currentColor);
 }
 
 .hk-pwd-dots {
@@ -127,7 +122,6 @@
   align-items: center;
   justify-content: center;
   z-index: 1;
-  pointer-events: none;
   user-select: none;
   font-size: 0.875rem;
   color: var(--hi-color-primary, rgba(88, 166, 255, 0.7));
@@ -135,7 +129,10 @@
 }
 
 .hk-pwd-box[data-focused] .hk-pwd-placeholder {
-  color: var(--hi-color-primary, rgba(88, 166, 255, 0.85));
+  /* Waiting-for-input placeholder turns italic + grey while focused,
+     matching the blur/select hints' style. */
+  font-style: italic;
+  color: var(--hi-color-text-secondary, #666);
 }
 
 @keyframes hk-pwd-breathe {
@@ -151,11 +148,12 @@
   justify-content: center;
   z-index: 1;
   user-select: none;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   font-style: italic;
   color: var(--hi-color-text-secondary, #666);
   cursor: pointer;
   transition: color 0.3s ease;
+  animation: hk-pwd-breathe 3s ease-in-out infinite;
 }
 
 .hk-pwd-blur-hint:hover {
@@ -174,10 +172,11 @@
   justify-content: center;
   z-index: 1;
   user-select: none;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   font-style: italic;
   color: var(--hi-color-text-secondary, #666);
   pointer-events: none;
+  animation: hk-pwd-breathe 3s ease-in-out infinite;
 }
 
 .hk-pwd-reveal-text {
@@ -204,6 +203,9 @@
   cursor: text;
   font-size: 1rem;
   z-index: 2;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
 }
 
 .hk-pwd-strength {

package/src/components/HkPasswordInput.test.ts

@@ -0,0 +1,242 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, ref, type Slot } from "vue";
+
+import HkPasswordInput from "./HkPasswordInput";
+
+interface Mounted {
+  model: ReturnType<typeof ref<string>>;
+  app: ReturnType<typeof createApp>;
+  container: HTMLElement;
+  input: HTMLInputElement;
+}
+
+const mounts: Mounted[] = [];
+
+function mountPasswordInput(
+  initial = "",
+  props: Record<string, unknown> = {},
+  slots: Record<string, Slot> = {},
+): Mounted {
+  const model = ref(initial);
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render() {
+      return h(
+        HkPasswordInput,
+        {
+          ...props,
+          modelValue: model.value,
+          "onUpdate:modelValue": (v: string) => {
+            model.value = v;
+          },
+        },
+        slots,
+      );
+    },
+  });
+  app.mount(container);
+  const input = container.querySelector(".hk-pwd-input") as HTMLInputElement;
+  const mounted = { model, app, container, input };
+  mounts.push(mounted);
+  return mounted;
+}
+
+function placeholderText(container: HTMLElement): string | null {
+  return container.querySelector(".hk-pwd-placeholder")?.textContent ?? null;
+}
+
+function blurHintText(container: HTMLElement): string | null {
+  return container.querySelector(".hk-pwd-blur-hint")?.textContent ?? null;
+}
+
+function fireInput(input: HTMLInputElement, value: string) {
+  input.value = value;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function fireBeforeinput(input: HTMLInputElement, inputType: string) {
+  const event = new InputEvent("beforeinput", {
+    inputType,
+    bubbles: true,
+    cancelable: true,
+  });
+  input.dispatchEvent(event);
+  return event;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkPasswordInput refocus", () => {
+  it("keeps the entered password and shows the refocus placeholder on focus", async () => {
+    const { container, input, model } = mountPasswordInput("secret");
+    expect(placeholderText(container)).toBeNull();
+
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+
+    expect(model.value).toBe("secret");
+    expect(placeholderText(container)).toBe(
+      "Focused, typing will clear the current password",
+    );
+    expect(blurHintText(container)).toBeNull();
+  });
+
+  it("restores the blur hint when the field loses focus again", async () => {
+    const { container, input } = mountPasswordInput("secret");
+    input.dispatchEvent(new FocusEvent("focus"));
+    input.dispatchEvent(new FocusEvent("blur"));
+    await nextTick();
+
+    expect(placeholderText(container)).toBeNull();
+    expect(blurHintText(container)).toBe(
+      "Entered, click to focus and clear the existing password",
+    );
+  });
+
+  it("starts the next input from an empty field after beforeinput", async () => {
+    const { input, model } = mountPasswordInput("secret");
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+
+    fireBeforeinput(input, "insertText");
+    fireInput(input, "x");
+    await nextTick();
+
+    expect(model.value).toBe("x");
+  });
+
+  it("clears the whole field on delete instead of nibbling the old value", async () => {
+    const { container, input, model } = mountPasswordInput("secret");
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+
+    const event = fireBeforeinput(input, "deleteContentBackward");
+    await nextTick();
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(model.value).toBe("");
+    expect(input.value).toBe("");
+    expect(placeholderText(container)).toBe("Focused, enter your password");
+  });
+
+  it("keeps only the newly typed tail when beforeinput is unavailable", async () => {
+    const { input, model } = mountPasswordInput("secret");
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+
+    fireInput(input, "secretx");
+    await nextTick();
+
+    expect(model.value).toBe("x");
+  });
+
+  it("starts over when an edit lands mid-value without beforeinput", async () => {
+    const { input, model } = mountPasswordInput("secret");
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+
+    fireInput(input, "secxret");
+    await nextTick();
+
+    expect(model.value).toBe("");
+  });
+
+  it("shows the waiting placeholder again on refocus after clearing", async () => {
+    const { container, input } = mountPasswordInput("secret");
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+
+    fireBeforeinput(input, "deleteContentBackward");
+    await nextTick();
+
+    input.dispatchEvent(new FocusEvent("blur"));
+    await nextTick();
+    expect(blurHintText(container)).toBeNull();
+
+    input.dispatchEvent(new FocusEvent("focus"));
+    await nextTick();
+    expect(placeholderText(container)).toBe("Focused, enter your password");
+  });
+
+  it("reclaims focus on a stray blur right after input", async () => {
+    const { input } = mountPasswordInput("");
+    fireInput(input, "a");
+    const focusSpy = vi.spyOn(input, "focus");
+
+    input.dispatchEvent(new FocusEvent("blur", { relatedTarget: null }));
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it("lets Tab navigation hand focus to another element", async () => {
+    const { input } = mountPasswordInput("");
+    const next = document.createElement("input");
+    document.body.appendChild(next);
+
+    fireInput(input, "a");
+    const focusSpy = vi.spyOn(input, "focus");
+
+    input.dispatchEvent(new FocusEvent("blur", { relatedTarget: next }));
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(focusSpy).not.toHaveBeenCalled();
+    next.remove();
+  });
+});
+
+describe("HkPasswordInput variants and icons", () => {
+  it("defaults to the password variant with the lock icon and i18n placeholder", () => {
+    const { container } = mountPasswordInput("");
+    expect(placeholderText(container)).toBe("Enter your password");
+    expect(
+      container.querySelector(".hk-pwd-lock")?.getAttribute("data-icon"),
+    ).toBe("password");
+    expect(
+      container
+        .querySelector(".hk-pwd-lock")
+        ?.classList.contains("hk-pwd-lock-empty"),
+    ).toBe(true);
+  });
+
+  it("renders the confirm icon and confirm placeholder for the confirm variant", () => {
+    const { container } = mountPasswordInput("", { variant: "confirm" });
+    expect(placeholderText(container)).toBe("Confirm your password");
+    expect(
+      container.querySelector(".hk-pwd-lock")?.getAttribute("data-icon"),
+    ).toBe("confirm");
+    // The built-in lock icon must not render for the confirm variant.
+    expect(container.querySelector(".hk-pwd-lock rect")).toBeNull();
+  });
+
+  it("renders the icon slot for the custom icon instead of a built-in svg", () => {
+    const { container } = mountPasswordInput(
+      "",
+      { icon: "custom" },
+      {
+        icon: () => [h("span", { class: "custom-icon" }, "custom-✓")],
+      },
+    );
+    expect(
+      container.querySelector(".hk-pwd-lock")?.getAttribute("data-icon"),
+    ).toBe("custom");
+    expect(container.querySelector(".custom-icon")?.textContent).toBe(
+      "custom-✓",
+    );
+    expect(container.querySelector(".hk-pwd-lock svg")).toBeNull();
+  });
+
+  it("lets an explicit placeholder override the variant default", () => {
+    const { container } = mountPasswordInput("", {
+      variant: "confirm",
+      placeholder: "Confirm password (custom)",
+    });
+    expect(placeholderText(container)).toBe("Confirm password (custom)");
+  });
+});