@celestia-island/hikari 0.4.4

package/src/components/HkDrawer.scss

@@ -0,0 +1,175 @@
+.hk-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--hk-drawer-overlay-bg, rgba(0, 0, 0, 0.45));
+  backdrop-filter: var(--hk-drawer-overlay-blur, blur(6px));
+}
+
+.hk-drawer-overlay-enter-active {
+  transition: opacity var(--hi-duration-normal, 0.3s) var(--hi-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+.hk-drawer-overlay-leave-active {
+  transition: opacity var(--hi-duration-normal, 0.3s) var(--hi-ease-in, cubic-bezier(0.4, 0, 1, 1));
+}
+
+.hk-drawer-overlay-enter-from,
+.hk-drawer-overlay-leave-to {
+  opacity: 0;
+}
+
+.hk-drawer-panel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: var(--hk-drawer-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  backdrop-filter: blur(12px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
+  outline: none;
+  transition:
+    width var(--hi-duration-normal, 0.3s) ease,
+    height var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-drawer-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-right: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: 0 var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem) 0;
+}
+
+.hk-drawer-right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  border-left: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--hi-radius-md, 0.5rem) 0 0 var(--hi-radius-md, 0.5rem);
+}
+
+.hk-drawer-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: 0 0 var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem);
+}
+
+.hk-drawer-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem) 0 0;
+}
+
+.hk-drawer-left-enter-active,
+.hk-drawer-right-enter-active,
+.hk-drawer-top-enter-active,
+.hk-drawer-bottom-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.34, 1.56, 0.64, 1);
+}
+
+.hk-drawer-left-leave-active,
+.hk-drawer-right-leave-active,
+.hk-drawer-top-leave-active,
+.hk-drawer-bottom-leave-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1),
+    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
+}
+
+.hk-drawer-left-enter-from,
+.hk-drawer-left-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.hk-drawer-right-enter-from,
+.hk-drawer-right-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.hk-drawer-top-enter-from,
+.hk-drawer-top-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.hk-drawer-bottom-enter-from,
+.hk-drawer-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.hk-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--hi-space-12, 0.75rem) var(--hi-space-16, 1rem);
+  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  flex-shrink: 0;
+}
+
+.hk-drawer-title {
+  font-size: var(--hi-text-base, 1rem);
+  font-weight: 700;
+  color: var(--hi-color-text-primary, #333);
+}
+
+.hk-drawer-close {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--hi-radius-md, 0.5rem);
+  color: var(--hi-color-text-secondary, #666);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background: var(--hi-secondary-bg, rgba(0, 0, 0, 0.06));
+    color: var(--hi-color-text-primary, #333);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline-offset: 2px;
+  }
+}
+
+.hk-drawer-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--hi-space-16, 1rem);
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--hi-color-border, rgba(0, 0, 0, 0.12));
+    border-radius: 3px;
+  }
+}
+
+.hk-drawer-footer {
+  padding: var(--hi-space-12, 0.75rem) var(--hi-space-16, 1rem);
+  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  flex-shrink: 0;
+}

package/src/components/HkDrawer.tsx

@@ -0,0 +1,171 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  Teleport,
+  Transition,
+  watch,
+  type PropType,
+} from "vue";
+
+import { useI18n } from "../i18n/context";
+import "./HkDrawer.scss";
+import { useOverlay } from "../runtime/useOverlay";
+import { usePopupManager } from "../runtime/usePopupManager";
+
+type DrawerSide = "left" | "right" | "top" | "bottom";
+
+export default defineComponent({
+  name: "HkDrawer",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    side: { type: String as PropType<DrawerSide>, default: "right" },
+    title: { type: String, default: undefined },
+    closable: { type: Boolean, default: true },
+    overlay: { type: Boolean, default: true },
+    size: { type: String, default: "320px" },
+  },
+  emits: {
+    "update:modelValue": (_value: boolean) => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const manager = usePopupManager();
+    const overlayHook = useOverlay({ name: "hk-drawer" });
+
+    const handle = ref<{ id: string; zIndex: number } | null>(null);
+    const panelRef = ref<HTMLElement>();
+    let unmounted = false;
+
+    const isVertical = computed(
+      () => props.side === "left" || props.side === "right",
+    );
+
+    const overlayZ = computed(() => handle.value?.zIndex ?? 0);
+    const panelZ = computed(() => (handle.value?.zIndex ?? 0) + 1);
+
+    const panelStyle = computed(() => {
+      const base: Record<string, string | number> =
+        isVertical.value
+          ? { width: props.size, maxWidth: "85vw" }
+          : { height: props.size, maxHeight: "70vh" };
+      base.zIndex = panelZ.value;
+      return base;
+    });
+
+    function close() {
+      emit("update:modelValue", false);
+    }
+
+    function onOverlayClick() {
+      if (props.closable && props.overlay) close();
+    }
+
+    function onEscape() {
+      if (props.closable) close();
+    }
+
+    function onDrawerAfterLeave() {
+      cleanup();
+    }
+
+    function cleanup() {
+      if (handle.value) {
+        manager.unregister(handle.value.id);
+        handle.value = null;
+      }
+    }
+
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (unmounted) return;
+        if (val) {
+          cleanup();
+          handle.value = manager.register("drawer", true);
+          overlayHook.open();
+          nextTick(() => {
+            panelRef.value?.focus();
+          });
+        }
+      },
+      { immediate: true },
+    );
+
+    onMounted(() => {
+      unmounted = false;
+    });
+
+    onBeforeUnmount(() => {
+      unmounted = true;
+      cleanup();
+    });
+
+    return () => (
+      <Teleport to="body">
+        <Transition name="hk-drawer-overlay" appear>
+          {props.modelValue && props.overlay ? (
+            <div
+              class="hk-drawer-overlay"
+              style={{ zIndex: overlayZ.value }}
+              onClick={onOverlayClick}
+            />
+          ) : null}
+        </Transition>
+        <Transition name={`hk-drawer-${props.side}`} appear onAfterLeave={onDrawerAfterLeave}>
+          {props.modelValue ? (
+            <div
+              ref={panelRef}
+              class={["hk-drawer-panel", `hk-drawer-${props.side}`]}
+              style={panelStyle.value}
+              role="dialog"
+              aria-label={props.title}
+              aria-modal={props.overlay}
+              tabindex={-1}
+              onKeydown={(e: KeyboardEvent) => {
+                if (e.key === "Escape") onEscape();
+              }}
+            >
+              {props.title || slots.header ? (
+                <div class="hk-drawer-header">
+                  {slots.header ? (
+                    slots.header()
+                  ) : (
+                    <span class="hk-drawer-title">{props.title}</span>
+                  )}
+                  {props.closable ? (
+                    <button
+                      class="hk-drawer-close"
+                      aria-label={t("hk.drawer.close", "Close")}
+                      onClick={close}
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        width="16"
+                        height="16"
+                      >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
+                    </button>
+                  ) : null}
+                </div>
+              ) : null}
+              <div class="hk-drawer-body">{slots.default?.()}</div>
+              {slots.footer ? (
+                <div class="hk-drawer-footer">{slots.footer()}</div>
+              ) : null}
+            </div>
+          ) : null}
+        </Transition>
+      </Teleport>
+    );
+  },
+});

package/src/components/HkEmptyState.scss

@@ -0,0 +1,42 @@
+.hk-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--hi-space-48, 3rem) var(--hi-space-16, 1rem);
+  text-align: center;
+  background: var(--hk-empty-bg, 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.06));
+  border-radius: var(--hi-radius-md, 0.5rem);
+}
+
+.hk-empty-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--hi-space-12, 0.75rem);
+  color: var(--hi-color-text-secondary, #666);
+  opacity: 0.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hk-empty-title {
+  font-size: var(--hi-text-base, 1rem);
+  font-weight: 600;
+  color: var(--hi-color-text-primary, #333);
+  margin: 0 0 var(--hi-space-8, 0.5rem);
+}
+
+.hk-empty-desc {
+  font-size: var(--hi-text-sm, 0.8125rem);
+  color: var(--hi-color-text-secondary, #666);
+  margin: 0 0 var(--hi-space-16, 1rem);
+  max-width: 24rem;
+  line-height: 1.5;
+}
+
+.hk-empty-action {
+  margin-top: var(--hi-space-4, 0.25rem);
+}

package/src/components/HkEmptyState.tsx

@@ -0,0 +1,41 @@
+import { defineComponent } from "vue";
+
+import "./HkEmptyState.scss";
+
+export default defineComponent({
+  name: "HkEmptyState",
+  props: {
+    title: { type: String, required: true },
+    description: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div class="hk-empty-state">
+        <div class="hk-empty-icon">
+          {slots.icon ? (
+            slots.icon()
+          ) : (
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              width="48"
+              height="48"
+            >
+              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+              <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+            </svg>
+          )}
+        </div>
+        <p class="hk-empty-title">{props.title}</p>
+        {props.description ? (
+          <p class="hk-empty-desc">{props.description}</p>
+        ) : null}
+        <div class="hk-empty-action">{slots.action?.()}</div>
+      </div>
+    );
+  },
+});

package/src/components/HkErrorBoundary.scss

@@ -0,0 +1,64 @@
+.hk-error-boundary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.hk-error-boundary-card {
+  max-width: 28rem;
+  width: 100%;
+  background: rgb(from var(--hi-color-error, #f85149) r g b / 0.06);
+  border: 1px solid rgb(from var(--hi-color-error, #f85149) r g b / 0.18);
+  border-radius: 8px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.hk-error-boundary-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.hk-error-boundary-icon {
+  color: var(--hi-color-error, #f85149);
+  flex-shrink: 0;
+}
+
+.hk-error-boundary-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--hi-color-error, #f85149);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.hk-error-boundary-tag {
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 4px;
+  background: rgb(from var(--hi-color-error, #f85149) r g b / 0.12);
+  color: var(--hi-color-error, #f85149);
+  font-family: ui-monospace, monospace;
+}
+
+.hk-error-boundary-msg {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--hi-color-text-primary, #c9d1d9);
+  opacity: 0.85;
+  word-break: break-word;
+  white-space: pre-wrap;
+  font-family: ui-monospace, monospace;
+}
+
+.hk-error-boundary-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}

package/src/components/HkErrorBoundary.tsx

@@ -0,0 +1,82 @@
+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";
+import HScrollContainer from "./HkScrollContainer";
+import "./HkErrorBoundary.scss";
+
+export default defineComponent({
+  name: "HkErrorBoundary",
+  props: {
+    name: { type: String, default: "unknown" },
+    fallback: { type: Function as PropType<(err: string, retry: () => void) => VNode>, default: undefined },
+    errorTitle: { type: String, default: "" },
+    copyErrorLabel: { type: String, default: "" },
+    retryLabel: { type: String, default: "" },
+  },
+  setup(props, { slots }) {
+    const clipboard = useClipboard();
+    const { t } = useI18n();
+    const error = ref<string | null>(null);
+
+    onErrorCaptured((err) => {
+      const msg =
+        err instanceof Error
+          ? `${err.name}: ${err.message}\n\n${err.stack || ""}`
+          : String(err);
+      console.error(`[ErrorBoundary:${props.name}]`, msg);
+      error.value = msg;
+      return false;
+    });
+
+    function retry() {
+      error.value = null;
+    }
+
+    function copyError() {
+      clipboard.copy(error.value!);
+    }
+
+    return () => {
+      if (error.value === null) {
+        return slots.default?.();
+      }
+
+      if (props.fallback) {
+        return props.fallback(error.value, retry);
+      }
+
+      return (
+        <div class="hk-error-boundary">
+          <div class="hk-error-boundary-card">
+            <div class="hk-error-boundary-header">
+              <AlertTriangle size={16} class="hk-error-boundary-icon" />
+              <span class="hk-error-boundary-label">{props.errorTitle || t("hk.errorBoundary.title", "Component Error")}</span>
+              {props.name !== "unknown" && (
+                <span class="hk-error-boundary-tag">{props.name}</span>
+              )}
+            </div>
+            <div class="hk-error-boundary-msg">
+              <div style={{ maxHeight: "12rem" }}>
+                <HScrollContainer>
+                  {error.value}
+                </HScrollContainer>
+              </div>
+            </div>
+            <div class="hk-error-boundary-actions">
+              <HButton variant="ghost" size="sm" onClick={copyError}>
+                <Copy size={12} />
+                {props.copyErrorLabel || t("hk.errorBoundary.copyError", "Copy Error")}
+              </HButton>
+              <HButton variant="outline" size="sm" onClick={retry}>
+                <RefreshCw size={12} />
+                {props.retryLabel || t("hk.errorBoundary.retry", "Retry")}
+              </HButton>
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkGaugeRing.scss

@@ -0,0 +1,4 @@
+.hk-gauge-ring {
+  position: relative;
+  display: inline-flex;
+}