@celestia-island/hikari 0.4.4

package/src/components/HkTextarea.tsx

@@ -0,0 +1,104 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import "./HkTextarea.scss";
+
+export default defineComponent({
+  name: "HkTextarea",
+  props: {
+    modelValue: { type: String, default: "" },
+    placeholder: { type: String, default: undefined },
+    disabled: { type: Boolean, default: false },
+    rows: { type: Number, default: 4 },
+    autoGrow: { type: Boolean, default: false },
+    maxLength: { type: Number, default: undefined },
+    showCount: { type: Boolean, default: false },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+  },
+  setup(props, { emit }) {
+    const textareaRef = ref<HTMLTextAreaElement | null>(null);
+    let ro: ResizeObserver | null = null;
+    let lastWidth = -1;
+
+    function autoResize() {
+      const ta = textareaRef.value;
+      if (!ta || !props.autoGrow) return;
+      ta.style.height = "auto";
+      ta.style.height = `${ta.scrollHeight}px`;
+    }
+
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.autoGrow) nextTick(autoResize);
+      },
+    );
+
+    onMounted(() => {
+      if (!props.autoGrow) return;
+      const ta = textareaRef.value;
+      if (!ta) return;
+      ro = new ResizeObserver(() => {
+        const el = textareaRef.value;
+        if (!el) return;
+        const w = el.clientWidth;
+        if (w === lastWidth) return;
+        lastWidth = w;
+        autoResize();
+      });
+      ro.observe(ta);
+      nextTick(autoResize);
+    });
+
+    onBeforeUnmount(() => ro?.disconnect());
+
+    function onInput(e: Event) {
+      emit("update:modelValue", (e.target as HTMLTextAreaElement).value);
+    }
+
+    const charCount = computed(() => props.modelValue.length);
+    const isOverLimit = computed(() =>
+      props.maxLength != null && charCount.value > props.maxLength
+    );
+
+    const wrapperClass = computed(() => [
+      "hk-textarea",
+      props.disabled ? "hk-textarea-disabled" : "",
+      isOverLimit.value ? "hk-textarea-overlimit" : "",
+    ]);
+
+    return () => (
+      <div class={wrapperClass.value}>
+        <textarea
+          ref={textareaRef}
+          class={[
+            "hk-textarea-field",
+            props.autoGrow ? "hk-textarea-field-autogrow" : "",
+          ]}
+          value={props.modelValue}
+          placeholder={props.placeholder}
+          disabled={props.disabled}
+          rows={props.rows}
+          maxlength={props.maxLength}
+          onInput={onInput}
+        />
+        {props.showCount && props.maxLength != null ? (
+          <div class="hk-textarea-count">
+            <span class={isOverLimit.value ? "hk-textarea-count-over" : ""}>
+              {charCount.value}
+            </span>
+            <span> / {props.maxLength}</span>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+});

package/src/components/HkTimeline.scss

@@ -0,0 +1,139 @@
+.hk-timeline {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+
+.hk-timeline[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.hk-timeline-step {
+  display: flex;
+  align-items: center;
+  gap: var(--hi-space-8, 8px);
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+
+  [data-el="indicator"] {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    max-width: 24px;
+    max-height: 24px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    visibility: visible;
+    overflow: visible;
+  }
+
+  [data-el="num"] {
+    font-size: var(--hi-text-xs, 0.75rem);
+    font-weight: 600;
+    line-height: 1;
+    display: block;
+  }
+
+  [data-el="check"] {
+    display: block;
+  }
+
+  [data-el="label"] {
+    font-size: var(--hi-text-xs, 0.75rem);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  [data-el="connector"] {
+    height: 2px;
+    flex: 1 1 0%;
+    min-width: 0.5rem;
+    margin: 0 var(--hi-space-4, 4px);
+  }
+}
+
+.hk-timeline-step[data-last] {
+  flex: 0 0 auto;
+}
+
+.hk-timeline[data-orientation="vertical"] .hk-timeline-step {
+  flex-direction: row;
+  flex: 0 0 auto;
+  padding-bottom: var(--hi-space-24, 24px);
+
+  [data-el="connector"] {
+    width: 2px;
+    height: 1rem;
+    flex: 0 0 auto;
+    position: absolute;
+    left: 0.6875rem;
+    top: 1.5rem;
+    margin: 0;
+  }
+}
+
+.hk-timeline-step[data-status="completed"] {
+  [data-el="indicator"] {
+    background-color: var(--hi-color-primary);
+    color: #fff;
+  }
+
+  [data-el="label"] {
+    color: var(--hi-color-text-primary);
+  }
+
+  [data-el="connector"] {
+    background: var(--hi-color-primary);
+  }
+}
+
+.hk-timeline-step[data-status="active"] {
+  [data-el="indicator"] {
+    background-color: color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
+    color: var(--hi-color-primary);
+    border: 2px solid var(--hi-color-primary);
+  }
+
+  [data-el="label"] {
+    color: var(--hi-color-text-primary);
+  }
+
+  [data-el="connector"] {
+    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+  }
+}
+
+.hk-timeline-step[data-status="pending"] {
+  [data-el="indicator"] {
+    background-color: var(--hi-color-surface);
+    color: var(--hi-color-muted);
+    border: 2px solid color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+  }
+
+  [data-el="label"] {
+    color: var(--hi-color-muted);
+  }
+
+  [data-el="connector"] {
+    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+  }
+}
+
+.hk-timeline-step[data-clickable] {
+  cursor: pointer;
+
+  &:hover [data-el="indicator"] {
+    transform: scale(1.12);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
+    transition: transform var(--hi-duration-normal, 0.3s) ease, box-shadow var(--hi-duration-normal, 0.3s) ease;
+  }
+}

package/src/components/HkTimeline.tsx

@@ -0,0 +1,95 @@
+import { defineComponent, type PropType } from "vue";
+import { Check } from "lucide-vue-next";
+
+import "./HkTimeline.scss";
+
+export type TimelineStepStatus = "completed" | "active" | "pending";
+
+export interface TimelineStep {
+  key: string;
+  label: string;
+  icon?: string;
+}
+
+export default defineComponent({
+  name: "HkTimeline",
+  props: {
+    steps: { type: Array as PropType<TimelineStep[]>, required: true },
+    currentKey: { type: String, required: true },
+    orientation: {
+      type: String as PropType<"horizontal" | "vertical">,
+      default: "horizontal",
+    },
+    clickable: { type: Boolean, default: false },
+  },
+  emits: {
+    select: (_key: string) => true,
+  },
+  setup(props, { emit }) {
+    return () => {
+      const currentIndex = props.steps.findIndex(
+        (s) => s.key === props.currentKey,
+      );
+
+      return (
+        <div
+          class="hk-timeline"
+          data-orientation={props.orientation}
+        >
+          {props.steps.map((step, idx) => {
+            const status: TimelineStepStatus =
+              idx < currentIndex
+                ? "completed"
+                : idx === currentIndex
+                  ? "active"
+                  : "pending";
+
+            const isLast = idx === props.steps.length - 1;
+
+            return (
+              <div
+                key={step.key}
+                class="hk-timeline-step"
+                data-status={status}
+                data-last={isLast || undefined}
+                data-clickable={(props.clickable && status === "completed") || undefined}
+                role={props.clickable ? "button" : undefined}
+                tabindex={props.clickable && status === "completed" ? 0 : undefined}
+                onClick={() => {
+                  if (props.clickable && status === "completed")
+                    emit("select", step.key);
+                }}
+                onKeydown={(e: KeyboardEvent) => {
+                  if (
+                    props.clickable &&
+                    status === "completed" &&
+                    (e.key === "Enter" || e.key === " ")
+                  ) {
+                    e.preventDefault();
+                    emit("select", step.key);
+                  }
+                }}
+              >
+                <span
+                  data-el="indicator"
+                  aria-hidden="true"
+                >
+                  {status === "completed" && (
+                    <Check size={12} data-el="check" strokeWidth={3} />
+                  )}
+                  {status !== "completed" && (
+                    <span data-el="num">{idx + 1}</span>
+                  )}
+                </span>
+                <span data-el="label">{step.label}</span>
+                {!isLast && (
+                  <div data-el="connector" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkToast.scss

@@ -0,0 +1,168 @@
+.hk-toast-container {
+  position: fixed;
+  top: 4rem;
+  right: 1rem;
+  z-index: var(--hk-z-toast, 9999);
+  max-width: 24rem;
+  pointer-events: none;
+}
+
+.hk-toast-container > div {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--hi-space-12, 12px);
+}
+
+.hk-toast-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hi-space-8, 8px);
+  padding: var(--hi-space-12, 12px) var(--hi-space-16, 16px);
+  border-radius: var(--hi-radius-sm, 4px);
+  font-size: var(--hi-text-base, 0.875rem);
+  line-height: 1.4;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  pointer-events: auto;
+  backdrop-filter: blur(12px);
+  user-select: none;
+}
+
+.hk-toast-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--hi-space-4, 4px);
+}
+
+.hk-toast-icon {
+  display: flex;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.hk-toast-message {
+  flex: 1;
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.hk-toast-count {
+  align-self: flex-start;
+  font-size: 0.78em;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  opacity: 0.75;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 20%);
+  white-space: nowrap;
+}
+
+.hk-toast-error {
+  background: var(--hi-color-danger, #f85149);
+  color: #fff;
+}
+
+.hk-toast-success {
+  background: var(--hi-color-success, #3fb950);
+  color: #fff;
+}
+
+.hk-toast-warning {
+  background: var(--hi-color-warning, #d29922);
+  color: #fff;
+}
+
+.hk-toast-info {
+  background: var(--hi-color-info, #58a6ff);
+  color: #fff;
+}
+
+.hk-toast-loading {
+  background: var(--hi-color-info, #58a6ff);
+  color: #fff;
+}
+
+.hk-toast-loading-spinner {
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: hk-toast-spin 0.7s linear infinite;
+  box-sizing: border-box;
+}
+
+@keyframes hk-toast-spin {
+  to { transform: rotate(360deg); }
+}
+
+.hk-toast-copy-btn,
+.hk-toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--hi-radius-sm, 4px);
+  opacity: 0.7;
+  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+  padding: 0;
+}
+
+.hk-toast-copy-btn:hover,
+.hk-toast-close:hover {
+  opacity: 1;
+}
+
+.hk-toast-enter-active {
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: var(--hi-duration-normal, 0.3s);
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.hk-toast-leave-active {
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: var(--hi-duration-normal, 0.3s);
+  transition-timing-function: cubic-bezier(0.36, 0, 0.66, 1);
+}
+
+.hk-toast-enter-from {
+  opacity: 0;
+  transform: translateX(1rem);
+}
+
+.hk-toast-leave-to {
+  opacity: 0;
+  transform: translateX(1rem);
+}
+
+.hk-toast-leave-active {
+  position: absolute;
+  width: 100%;
+}
+
+.hk-toast-move {
+  transition: transform var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-toast-msg-enter-active,
+.hk-toast-msg-leave-active {
+  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+}
+
+.hk-toast-msg-enter-from,
+.hk-toast-msg-leave-to {
+  opacity: 0;
+}

package/src/components/HkToast.tsx

@@ -0,0 +1,175 @@
+import { computed, defineComponent, ref, Teleport, Transition, TransitionGroup, watch } from "vue";
+import { AlertTriangle, CheckCircle, Copy, Info, X, XCircle } 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";
+import "./HkToast.scss";
+
+const LONG_THRESHOLD = 50;
+
+function isLong(msg: string) {
+  return msg.length > LONG_THRESHOLD;
+}
+
+function LoadingSpinner({ size }: { size: number }) {
+  return (
+    <div
+      class="hk-toast-loading-spinner"
+      style={{ width: `${size}px`, height: `${size}px` }}
+    />
+  );
+}
+
+function renderIcon(type: ToastType, size = 18) {
+  if (type === "error") return <XCircle size={size} />;
+  if (type === "success") return <CheckCircle size={size} />;
+  if (type === "warning") return <AlertTriangle size={size} />;
+  if (type === "loading") return <LoadingSpinner size={size} />;
+  return <Info size={size} />;
+}
+
+function renderCountLabel(count: number) {
+  return `${count} msgs`;
+}
+
+const ACTION_ICON_SIZE = 18;
+
+const HkToastItem = defineComponent({
+  name: "HkToastItem",
+  props: {
+    toast: { type: Object as () => ToastItem, required: true },
+  },
+  emits: {
+    remove: (_id: number) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const clipboard = useClipboard();
+    const displayedMsgId = ref<number | null>(null);
+    const animating = ref(false);
+
+    watch(
+      () => props.toast.id,
+      () => {
+        const msgs = props.toast.messages;
+        displayedMsgId.value = msgs.length > 0 ? msgs[msgs.length - 1].id : null;
+        animating.value = false;
+      },
+      { immediate: true },
+    );
+
+    function latestMsgId(): number | null {
+      const msgs = props.toast.messages;
+      return msgs.length > 0 ? msgs[msgs.length - 1].id : null;
+    }
+
+    function tryAdvance() {
+      if (animating.value) return;
+      const latest = latestMsgId();
+      if (latest === null || latest === displayedMsgId.value) return;
+      animating.value = true;
+      displayedMsgId.value = latest;
+    }
+
+    watch(() => props.toast.messages.length, () => tryAdvance());
+
+    function onMsgAfterEnter() {
+      animating.value = false;
+      tryAdvance();
+    }
+
+    const displayedMessage = computed<ToastMessage | null>(() => {
+      const id = displayedMsgId.value;
+      if (id === null) return null;
+      return props.toast.messages.find((m) => m.id === id) ?? null;
+    });
+
+    function handleCopy() {
+      const text = props.toast.messages.map((m) => m.text).join("\n\n");
+      clipboard.copy(text);
+    }
+
+    function handleClose() {
+      emit("remove", props.toast.id);
+    }
+
+    return () => {
+      const msg = displayedMessage.value;
+      const text = msg?.text ?? "";
+      const long = isLong(text);
+      const count = props.toast.messages.length;
+
+      return (
+        <div class={["hk-toast-item", `hk-toast-${props.toast.type}`]}>
+          <span class="hk-toast-icon">{renderIcon(props.toast.type)}</span>
+          <div class="hk-toast-body">
+            <Transition
+              name="hk-toast-msg"
+              mode="out-in"
+              onAfterEnter={onMsgAfterEnter}
+            >
+              <span
+                key={msg?.id ?? 0}
+                class="hk-toast-message"
+                title={text}
+              >
+                {text}
+              </span>
+            </Transition>
+            {count > 1 && (
+              <span class="hk-toast-count">{renderCountLabel(count)}</span>
+            )}
+          </div>
+          {props.toast.copyable && (
+            <button
+              class="hk-toast-copy-btn"
+              title={t("hk.toast.copy", "Copy")}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleCopy();
+              }}
+            >
+              <Copy size={ACTION_ICON_SIZE} />
+            </button>
+          )}
+          <button
+            class="hk-toast-close"
+            aria-label={t("hk.toast.close", "Close")}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleClose();
+            }}
+          >
+            <X size={ACTION_ICON_SIZE} />
+          </button>
+        </div>
+      );
+    };
+  },
+});
+
+export default defineComponent({
+  name: "HkToast",
+  setup() {
+    const { toasts, remove } = useToast();
+
+    return () => (
+      <Teleport to="body">
+        <div class="hk-toast-container">
+          <TransitionGroup
+            tag="div"
+            name="hk-toast"
+          >
+            {toasts.map((item) => (
+              <HkToastItem
+                key={item.id}
+                toast={item}
+                onRemove={(id: number) => remove(id)}
+              />
+            ))}
+          </TransitionGroup>
+        </div>
+      </Teleport>
+    );
+  },
+});