@celestia-island/hikari 0.4.4

package/src/components/HkKeywordSearchModal.tsx

@@ -0,0 +1,308 @@
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+
+import "./HkKeywordSearchModal.scss";
+import HModal from "./HkModal";
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+
+interface FuzzyMatch {
+  matched: boolean;
+  score: number;
+}
+
+function fuzzyScore(query: string, haystack: string): FuzzyMatch {
+  if (!query) return { matched: true, score: 0 };
+  const q = query.toLowerCase();
+  const h = haystack.toLowerCase();
+  if (!h) return { matched: false, score: 0 };
+
+  const subIdx = h.indexOf(q);
+  if (subIdx >= 0) {
+    const boundary = subIdx === 0 || /[\s_\-/.:]/.test(h[subIdx - 1] ?? " ");
+    return { matched: true, score: 1000 + q.length * 10 + (boundary ? 50 : 0) };
+  }
+
+  let qi = 0;
+  let score = 0;
+  let run = 0;
+  let prevMatchedIdx = -2;
+  for (let hi = 0; hi < h.length && qi < q.length; hi++) {
+    if (h[hi] === q[qi]) {
+      run = hi === prevMatchedIdx + 1 ? run + 1 : 1;
+      score += 10 + run * 4;
+      const prev = hi > 0 ? h[hi - 1] : " ";
+      if (/[\s_\-/.:,()]/.test(prev)) score += 15;
+      prevMatchedIdx = hi;
+      qi++;
+    }
+  }
+  return { matched: qi === q.length, score: qi === q.length ? score : 0 };
+}
+
+function fuzzyScoreFields(
+  query: string,
+  fields: { text: string; weight?: number }[],
+): { matched: boolean; score: number; fieldIndex: number } {
+  let best = { matched: false, score: 0, fieldIndex: -1 };
+  for (let i = 0; i < fields.length; i++) {
+    const { text, weight = 1 } = fields[i];
+    const res = fuzzyScore(query, text);
+    if (!res.matched) continue;
+    const weighted = res.score * weight;
+    if (weighted > best.score) {
+      best = { matched: true, score: weighted, fieldIndex: i };
+    }
+  }
+  return best;
+}
+
+function fuzzySearch<T>(
+  query: string,
+  records: T[],
+  fieldsOf: (rec: T) => { text: string; weight?: number }[],
+): { record: T; score: number }[] {
+  const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  if (terms.length === 0) {
+    return records.map((record) => ({ record, score: 0 }));
+  }
+  const out: { record: T; score: number }[] = [];
+  for (const record of records) {
+    const fields = fieldsOf(record);
+    let total = 0;
+    let allMatched = true;
+    for (const term of terms) {
+      const res = fuzzyScoreFields(term, fields);
+      if (!res.matched) { allMatched = false; break; }
+      total += res.score;
+    }
+    if (allMatched) out.push({ record, score: total });
+  }
+  out.sort((a, b) => b.score - a.score);
+  return out;
+}
+
+export interface SemanticSearchItem {
+  key: string;
+  title?: string;
+  snippet: string;
+  score?: number;
+  source?: string;
+  raw: unknown;
+}
+
+export default defineComponent({
+  name: "HkKeywordSearchModal",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    title: { type: String, default: undefined },
+    placeholder: { type: String, default: undefined },
+    records: { type: Array as PropType<unknown[]>, default: () => [] },
+    fieldsOf: {
+      type: Function as PropType<(rec: unknown) => { text: string; weight?: number }[]>,
+      default: () => [],
+    },
+    keyOf: { type: Function as PropType<(rec: unknown) => string>, default: () => "0" },
+    emptyText: { type: String, default: undefined },
+    semanticSearch: {
+      type: [Function, null] as unknown as PropType<
+        ((query: string) => Promise<SemanticSearchItem[]>) | undefined
+      >,
+      default: undefined,
+    },
+    searchingText: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+    select: (_rec: unknown) => true,
+  },
+  setup(props, { slots, emit }) {
+    const query = ref("");
+    let debounceTimer: CronHandle | null = null;
+    const debouncedQuery = ref("");
+
+    function scheduleDebounce() {
+      debounceTimer?.disconnect();
+      debounceTimer = scheduleCronAfter(() => {
+        debouncedQuery.value = query.value;
+      }, 120);
+    }
+
+    watch(query, scheduleDebounce);
+
+    const semanticActive = computed(() => typeof props.semanticSearch === "function");
+    const semanticLoading = ref(false);
+    const semanticResults = ref<SemanticSearchItem[]>([]);
+    let semanticToken = 0;
+
+    async function runSemantic(q: string) {
+      if (!props.semanticSearch) {
+        semanticResults.value = [];
+        return;
+      }
+      const trimmed = q.trim();
+      if (!trimmed) {
+        semanticResults.value = [];
+        semanticLoading.value = false;
+        return;
+      }
+      const token = ++semanticToken;
+      semanticLoading.value = true;
+      try {
+        const items = await props.semanticSearch(trimmed);
+        if (token === semanticToken) semanticResults.value = items ?? [];
+      } catch {
+        if (token === semanticToken) semanticResults.value = [];
+      } finally {
+        if (token === semanticToken) semanticLoading.value = false;
+      }
+    }
+
+    watch(debouncedQuery, (q) => {
+      if (semanticActive.value) void runSemantic(q);
+    });
+
+    const results = computed(() => {
+      const q = debouncedQuery.value;
+      return fuzzySearch(q, props.records as unknown[], props.fieldsOf).map((r) => ({
+        key: props.keyOf(r.record),
+        record: r.record,
+        score: r.score,
+      }));
+    });
+
+    watch(
+      () => props.modelValue,
+      (open) => {
+        if (open) {
+          query.value = "";
+          debouncedQuery.value = "";
+          semanticResults.value = [];
+          semanticLoading.value = false;
+        }
+      },
+    );
+
+    function pick(rec: unknown) {
+      emit("select", rec);
+      emit("update:modelValue", false);
+    }
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.title ?? "Search"}
+        width="40rem"
+      >
+        <div class="hk-kw-search">
+          <div class="hk-kw-search-box">
+            <svg
+              class="hk-kw-search-icon"
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <input
+              class="hk-kw-search-input"
+              type="text"
+              value={query.value}
+              placeholder={props.placeholder ?? "Search…"}
+              onInput={(e: Event) => { query.value = (e.target as HTMLInputElement).value; }}
+              autofocus
+            />
+            {query.value && (
+              <button
+                class="hk-kw-search-clear"
+                type="button"
+                aria-label="Clear"
+                onClick={() => {
+                  query.value = "";
+                  debouncedQuery.value = "";
+                  semanticResults.value = [];
+                }}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          <div class="hk-kw-search-results">
+            {semanticActive.value ? (
+              semanticLoading.value && semanticResults.value.length === 0 ? (
+                <div class="hk-kw-search-empty">
+                  {props.searchingText ?? "Searching…"}
+                </div>
+              ) : semanticResults.value.length === 0 ? (
+                <div class="hk-kw-search-empty">
+                  {debouncedQuery.value
+                    ? (props.emptyText ?? "No matches")
+                    : (props.placeholder ?? "Search…")}
+                </div>
+              ) : (
+                semanticResults.value.map((r) => (
+                  <button
+                    key={r.key}
+                    class="hk-kw-search-result hk-kw-search-result-semantic"
+                    type="button"
+                    onClick={() => pick(r.raw)}
+                  >
+                    {slots.semanticResult?.({ item: r }) ?? (
+                      <span class="hk-kw-search-semantic">
+                        <span class="hk-kw-search-semantic-head">
+                          {r.title && (
+                            <span class="hk-kw-search-semantic-title">{r.title}</span>
+                          )}
+                          {typeof r.score === "number" && (
+                            <span class="hk-kw-search-semantic-score">
+                              {(r.score * 100).toFixed(0)}%
+                            </span>
+                          )}
+                        </span>
+                        <span class="hk-kw-search-semantic-snippet">{r.snippet}</span>
+                        {r.source && (
+                          <span class="hk-kw-search-semantic-source">{r.source}</span>
+                        )}
+                      </span>
+                    )}
+                  </button>
+                ))
+              )
+            ) : results.value.length === 0 ? (
+              <div class="hk-kw-search-empty">
+                {props.emptyText ?? "No matches"}
+              </div>
+            ) : (
+              results.value.map((r) => (
+                <button
+                  key={r.key}
+                  class="hk-kw-search-result"
+                  type="button"
+                  onClick={() => pick(r.record)}
+                >
+                  {slots.result?.({ record: r.record })}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkListTransition.scss

@@ -0,0 +1,131 @@
+.hk-list-move {
+  transition: transform var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-list-move-disabled {
+  transition: none !important;
+}
+
+.hk-list-pop-enter-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
+    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-list-pop-leave-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) ease-in,
+    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.5, 0, 0.75, 0);
+  position: absolute;
+}
+
+.hk-list-pop-enter-from {
+  opacity: 0;
+  transform: scale(0.85) translateY(4px);
+}
+
+.hk-list-pop-leave-to {
+  opacity: 0;
+  transform: scale(0.85);
+}
+
+.hk-list-slide-enter-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) ease,
+    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-list-slide-leave-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) ease-in,
+    transform var(--hi-duration-normal, 0.3s) ease-in;
+  position: absolute;
+}
+
+.hk-list-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+
+.hk-list-slide-leave-to {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+.hk-list-fade-enter-active {
+  transition: opacity var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-list-fade-leave-active {
+  transition: opacity var(--hi-duration-normal, 0.3s) ease-in;
+  position: absolute;
+}
+
+.hk-list-fade-enter-from,
+.hk-list-fade-leave-to {
+  opacity: 0;
+}
+
+.hk-list-grow-enter-active {
+  transition:
+    transform var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
+    opacity var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--hi-duration-fast, 0.15s);
+  pointer-events: none;
+}
+
+.hk-list-grow-enter-from {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+.hk-list-grow-leave-active {
+  transition:
+    transform var(--hi-duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
+    opacity var(--hi-duration-fast, 0.15s) ease-in;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+}
+
+.hk-list-grow-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+.hk-list-grow-move {
+  transition: transform var(--hi-duration-fast, 0.15s) ease;
+  transition-delay: var(--hi-duration-fast, 0.15s);
+}
+
+.hk-list-reveal-enter-active {
+  interpolate-size: allow-keywords;
+  overflow: hidden;
+  transition:
+    height var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
+    opacity var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-list-reveal-leave-active {
+  interpolate-size: allow-keywords;
+  overflow: hidden;
+  transition:
+    height var(--hi-duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
+    opacity var(--hi-duration-fast, 0.15s) ease-in;
+}
+
+.hk-list-reveal-enter-from,
+.hk-list-reveal-leave-to {
+  opacity: 0;
+  height: calc-size(auto, size * 0.8);
+}
+
+.hk-list-reveal-move {
+  transition: transform var(--hi-duration-fast, 0.15s) ease;
+}
+
+.hk-list-none-enter-active,
+.hk-list-none-leave-active,
+.hk-list-none-move {
+  transition: none;
+}

package/src/components/HkListTransition.tsx

@@ -0,0 +1,29 @@
+import { defineComponent, TransitionGroup, type PropType } from "vue";
+
+import "./HkListTransition.scss";
+
+type ListAnimVariant = "pop" | "slide" | "fade" | "grow" | "reveal";
+
+export default defineComponent({
+  name: "HkListTransition",
+  props: {
+    tag: { type: String, default: "div" },
+    variant: { type: String as PropType<ListAnimVariant>, default: "pop" },
+    move: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const name = props.disabled ? "hk-list-none" : `hk-list-${props.variant}`;
+      return (
+        <TransitionGroup
+          tag={props.tag}
+          name={name}
+          moveClass={props.move ? undefined : "hk-list-move-disabled"}
+        >
+          {slots.default?.()}
+        </TransitionGroup>
+      );
+    };
+  },
+});

package/src/components/HkLocalePickerPopup.tsx

@@ -0,0 +1,42 @@
+import { defineComponent, type PropType } from "vue";
+import type { Ref } from "vue";
+
+const HkLocalePickerPopup = defineComponent({
+  name: "HkLocalePickerPopup",
+  props: {
+    open: { type: Boolean, required: true },
+    triggerRef: { type: [Object, null] as PropType<HTMLElement | Ref<HTMLElement | null> | null>, default: null },
+    placement: { type: String, default: "right-start" },
+    locales: { type: Array as PropType<Array<{ code: string; label: string; flag?: string }>>, required: true },
+    currentLocale: { type: String, default: "" },
+    t: { type: Function as PropType<(key: string) => string>, default: (k: string) => k },
+  },
+  emits: ["update:open", "select"],
+  setup(props, { emit }) {
+    return () => {
+      if (!props.open) return null;
+      return (
+        <div class="hk-locale-picker-popup" role="listbox">
+          {props.locales.map((loc) => (
+            <button
+              key={loc.code}
+              class="hk-locale-picker-item"
+              data-selected={loc.code === props.currentLocale || undefined}
+              role="option"
+              aria-selected={loc.code === props.currentLocale}
+              onClick={() => {
+                emit("select", loc.code);
+                emit("update:open", false);
+              }}
+            >
+              {loc.flag && <span class="hk-locale-picker-flag">{loc.flag}</span>}
+              <span class="hk-locale-picker-label">{loc.label}</span>
+            </button>
+          ))}
+        </div>
+      );
+    };
+  },
+});
+
+export default HkLocalePickerPopup;

package/src/components/HkLogo.scss

@@ -0,0 +1,36 @@
+.hk-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--hi-radius-md, 8px);
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+a.hk-logo {
+  text-decoration: none;
+}
+
+.hk-logo-img {
+  display: block;
+  border-radius: var(--hi-radius-md, 8px);
+  object-fit: contain;
+}
+
+.hk-logo-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hi-color-primary);
+  color: #fff;
+  border-radius: var(--hi-radius-md, 8px);
+}
+
+.hk-logo-initial {
+  font-weight: 700;
+  font-size: 50%;
+  line-height: 1;
+  user-select: none;
+}

package/src/components/HkLogo.tsx

@@ -0,0 +1,93 @@
+import { defineComponent, type PropType } from "vue";
+import { useI18n } from "../i18n/context";
+import "./HkLogo.scss";
+
+const sizeMap: Record<string, string> = {
+  xs: "1.25rem",
+  sm: "1.625rem",
+  md: "2rem",
+  lg: "3.5rem",
+  xl: "5rem",
+};
+
+const placeholderSvg = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="60%" height="60%">
+    <path d="M12 2L2 7l10 5 10-5-10-5z" />
+    <path d="M2 17l10 5 10-5" />
+    <path d="M2 12l10 5 10-5" />
+  </svg>
+);
+
+export default defineComponent({
+  name: "HkLogo",
+  props: {
+    src: { type: String, default: undefined },
+    alt: { type: String, default: "" },
+    size: {
+      type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl">,
+      default: "md",
+    },
+    href: { type: String, default: undefined },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const logoSize = () => sizeMap[props.size] ?? sizeMap.md;
+
+    const renderLogo = () => {
+      if (props.src) {
+        return (
+          <img
+            class="hk-logo-img"
+            src={props.src}
+            alt={props.alt}
+            style={{ width: logoSize(), height: logoSize() }}
+          />
+        );
+      }
+
+      return (
+        <div
+          class="hk-logo-placeholder"
+          style={{
+            width: logoSize(),
+            height: logoSize(),
+          }}
+          role="img"
+          aria-label={props.alt || t("hk.logo.fallbackAlt", "Logo")}
+        >
+          {props.alt ? (
+            <span class="hk-logo-initial">{props.alt.charAt(0).toUpperCase()}</span>
+          ) : (
+            placeholderSvg
+          )}
+        </div>
+      );
+    };
+
+    if (props.href) {
+      return () => (
+        <a
+          class="hk-logo"
+          href={props.href}
+          onClick={(e: MouseEvent) => emit("click", e)}
+          style={{ lineHeight: 0 }}
+        >
+          {renderLogo()}
+        </a>
+      );
+    }
+
+    return () => (
+      <div
+        class="hk-logo"
+        onClick={(e: MouseEvent) => emit("click", e)}
+        style={{ lineHeight: 0 }}
+      >
+        {renderLogo()}
+      </div>
+    );
+  },
+});