@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkAltSignIn.tsx

@@ -0,0 +1,92 @@
+import { defineComponent, ref } from "vue";
+import HkPopover from "./HkPopover";
+import HkMenuActionItem from "./HkMenuActionItem";
+import "./HkAltSignIn.scss";
+
+/**
+ * Shared "alternative sign-in" entry for auth cards (P77).
+ *
+ * A small muted trigger row (styled in the `.s-auth-footer` grammar) that
+ * opens a popover listing third-party/alternative credential entries —
+ * platform passkey on shittim-chest, feishu OAuth on easy-hydro-erp — so
+ * both apps share one implementation and only differ in content.
+ *
+ * Entries render as [`HkMenuActionItem`] rows inside an [`HkPopover`]
+ * (glass panel, flip/escape/backdrop close, bottom-sheet on mobile), which
+ * gives keyboard and pointer handling for free.
+ */
+export default defineComponent({
+  name: "HkAltSignIn",
+  props: {
+    /** Trigger row text, e.g. "其他方式登录". Consumer-localized on
+     *  purpose: hikari ships no dictionary dependency onto hosts here. */
+    label: { type: String, required: true },
+    /** Alternative sign-in entries offered in the dropdown. */
+    entries: {
+      type: Array as unknown as () => Array<{
+        key: string;
+        label: string;
+        icon?: Record<string, unknown>;
+        danger?: boolean;
+      }>,
+      required: true,
+    },
+    disabled: { type: Boolean, default: false },
+    /** Popover placement around the trigger row. */
+    placement: {
+      type: String,
+      default: "top",
+    } as const,
+  },
+  emits: {
+    /** An entry was chosen; the popover closes automatically. */
+    select: (_key: string) => true,
+  },
+  setup(props, { emit }) {
+    const open = ref(false);
+    const anchor = ref<HTMLElement | null>(null);
+
+    function choose(key: string): void {
+      open.value = false;
+      emit("select", key);
+    }
+
+    return () => (
+      <div class="hk-alt-signin">
+        <button
+          ref={(el) => (anchor.value = el as HTMLElement | null)}
+          type="button"
+          class="hk-alt-signin__trigger"
+          aria-haspopup="menu"
+          aria-expanded={open.value}
+          disabled={props.disabled}
+          onClick={() => {
+            if (!props.disabled) open.value = !open.value;
+          }}
+        >
+          <span class="hk-alt-signin__rule" />
+          <span class="hk-alt-signin__label">{props.label}</span>
+          <span class="hk-alt-signin__rule" />
+        </button>
+        <HkPopover
+          modelValue={open.value}
+          onUpdate:modelValue={(v: boolean) => (open.value = v)}
+          placement={props.placement as never}
+          anchorRef={anchor.value}
+        >
+          <div class="hk-alt-signin__panel" role="menu">
+            {props.entries.map((entry) => (
+              <HkMenuActionItem
+                key={entry.key}
+                icon={entry.icon}
+                label={entry.label}
+                danger={entry.danger === true}
+                onClick={() => choose(entry.key)}
+              />
+            ))}
+          </div>
+        </HkPopover>
+      </div>
+    );
+  },
+});

package/src/components/HkAttachmentModal.scss

@@ -0,0 +1,49 @@
+.s-attachment-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12, 0.75rem);
+}
+
+.s-attachment-modal-text {
+  max-height: 48vh;
+  padding: var(--space-12, 0.75rem);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  border-radius: var(--radius-md, 8px);
+  background: rgb(var(--color-surface) / 0.5);
+}
+
+.s-attachment-modal-text-empty {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+  font-style: italic;
+}
+
+.s-attachment-modal-text-error {
+  margin: var(--space-8, 0.5rem) 0 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-error));
+}
+
+.s-attachment-modal-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-24, 1.5rem);
+  color: rgb(var(--color-muted));
+}
+
+.s-attachment-modal-file-name {
+  margin: 0;
+  font-size: var(--text-sm, 0.8125rem);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s-attachment-modal-meta {
+  display: flex;
+  gap: var(--space-8, 0.5rem);
+}

package/src/components/HkAttachmentModal.tsx

@@ -0,0 +1,318 @@
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+import { Film, File as FileIcon, Image as ImageIcon, Music } from "lucide-vue-next";
+import {
+  HBadge,
+  HImageViewer,
+  HMarkdownRenderer,
+  HMediaPlayer,
+  HModal,
+  HScrollContainer,
+} from "@celestia-island/hikari";
+
+import { useI18n } from "../i18n/context";
+
+import "./HkAttachmentModal.scss";
+
+const CODE_LANGS: Record<string, string> = {
+  ".ts": "typescript", ".tsx": "typescript", ".js": "javascript",
+  ".jsx": "javascript", ".json": "json", ".rs": "rust", ".go": "go",
+  ".py": "python", ".java": "java", ".c": "c", ".cpp": "cpp", ".h": "c",
+  ".cs": "csharp", ".sh": "bash", ".bash": "bash", ".yaml": "yaml",
+  ".yml": "yaml", ".toml": "toml", ".html": "html", ".css": "css",
+  ".scss": "scss", ".sql": "sql", ".xml": "xml", ".ini": "ini",
+};
+
+function codeLanguage(name: string): string | undefined {
+  const idx = name.lastIndexOf(".");
+  if (idx < 0) return undefined;
+  return CODE_LANGS[name.slice(idx).toLowerCase()];
+}
+
+const TEXT_EXTS = new Set([".md", ".markdown", ".txt", ".log", ".csv"]);
+const CODE_EXTS = new Set(Object.keys(CODE_LANGS));
+
+/** Attachment row in the HRichInput strip. Parent-owned upload state. */
+export interface HAttachmentItem {
+  id: string;
+  name: string;
+  type: string;
+  size: number;
+  preview?: string;
+  /** Upload progress 0-100; omitted/100 = ready. */
+  progress?: number;
+  status?: "uploading" | "done" | "error";
+}
+
+/** Attachment payload for HAttachmentModal preview. */
+export interface HAttachmentDetail {
+  name: string;
+  type: string;
+  size: number;
+  preview?: string;
+  url?: string;
+  /** Original File handle — used to read text/code content for preview. */
+  file?: File;
+}
+
+/** Kind of rich preview to render; inferred from MIME unless hinted. */
+export type HAttachmentPreviewType = "image" | "video" | "audio" | "other";
+
+/** Resolve the preview kind: an explicit hint wins, MIME prefix otherwise. */
+export function previewKindFor(
+  att: Pick<HAttachmentDetail, "type"> | null | undefined,
+  hint?: HAttachmentPreviewType,
+): HAttachmentPreviewType {
+  if (hint) return hint;
+  const type = att?.type ?? "";
+  if (type.startsWith("image/")) return "image";
+  if (type.startsWith("video/")) return "video";
+  if (type.startsWith("audio/")) return "audio";
+  return "other";
+}
+
+function isTextFile(att: HAttachmentDetail): boolean {
+  const ext = att.name.slice(att.name.lastIndexOf(".")).toLowerCase();
+  return att.type.startsWith("text/") || TEXT_EXTS.has(ext) || CODE_EXTS.has(ext);
+}
+
+/** "512" -> "512B", "1536" -> "1.5KB", "2621440" -> "2.5MB". */
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0B";
+  if (bytes < 1024) return `${Math.floor(bytes)}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}GB`;
+}
+
+/**
+ * HkAttachmentModal — generic file-picker preview modal.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * Renders an attachment by preview kind: image (HImageViewer), video/audio
+ * (HMediaPlayer), text/code (HMarkdownRenderer, with syntax fences for
+ * known code extensions) or a generic file chip.
+ *
+ * URL handling is transport-agnostic: when the attachment carries no
+ * `preview`/`url`, the consumer may pass `resolveUrl` (its own API client /
+ * transport knows how to turn a backend file name into an authed URL).
+ * The resolved URL is used for media previews, the text fetch and the
+ * download action. Text content is read via the attachment's `file` handle
+ * when provided.
+ */
+export const HkAttachmentModal = defineComponent({
+  name: "HkAttachmentModal",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    attachment: { type: Object as PropType<HAttachmentDetail | null>, default: null },
+    /** Transport-provided URL resolver; called with the file name when the
+     *  attachment has neither `preview` nor `url`. */
+    resolveUrl: { type: Function as PropType<(name: string) => Promise<string>>, default: undefined },
+    /** Preview kind hint; inferred from the MIME type when omitted. */
+    previewType: { type: String as PropType<HAttachmentPreviewType>, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+
+    const kind = computed(() => previewKindFor(props.attachment, props.previewType));
+    const isText = computed(() => (props.attachment ? isTextFile(props.attachment) : false));
+
+    /* ── URL resolution ──────────────────────────────────────────── */
+    const resolvedSrc = ref("");
+    const srcLoading = ref(false);
+    const srcError = ref<string | null>(null);
+
+    async function resolveSrc() {
+      const att = props.attachment;
+      srcLoading.value = false;
+      srcError.value = null;
+      if (!att) {
+        resolvedSrc.value = "";
+        return;
+      }
+      if (att.preview || att.url) {
+        resolvedSrc.value = att.preview || att.url || "";
+        return;
+      }
+      if (props.resolveUrl) {
+        srcLoading.value = true;
+        try {
+          const resolved = await props.resolveUrl(att.name);
+          // A resolver that misses (map lookup, stale cache) may return
+          // undefined — store the empty string so every src binding stays
+          // a real string and the srcError path explains the empty preview.
+          if (typeof resolved !== "string" || !resolved) {
+            resolvedSrc.value = "";
+            srcError.value = `no URL resolved for "${att.name}"`;
+            return;
+          }
+          resolvedSrc.value = resolved;
+        } catch (e) {
+          resolvedSrc.value = "";
+          srcError.value = e instanceof Error ? e.message : String(e);
+        } finally {
+          srcLoading.value = false;
+        }
+        return;
+      }
+      resolvedSrc.value = "";
+    }
+
+    watch(
+      () => [props.attachment, props.resolveUrl, props.previewType] as const,
+      () => { void resolveSrc(); },
+      { immediate: true },
+    );
+
+    /* ── Text / code preview ─────────────────────────────────────── */
+    const textContent = ref("");
+    const textPlain = ref(false);
+    const textLoading = ref(false);
+    const textError = ref<string | null>(null);
+
+    async function loadText() {
+      const att = props.attachment;
+      if (!att) return;
+      textLoading.value = true;
+      textError.value = null;
+      try {
+        let raw: string;
+        if (att.file) {
+          raw = await att.file.text();
+        } else if (resolvedSrc.value) {
+          // The resolved URL comes from the consumer's transport (via
+          // `resolveUrl`) or was already a usable preview/object URL.
+          const res = await fetch(resolvedSrc.value);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          raw = await res.text();
+        } else {
+          raw = "";
+        }
+        const lang = codeLanguage(att.name);
+        const isMd = /\.(md|markdown)$/i.test(att.name);
+        if (isMd) {
+          textContent.value = raw;
+          textPlain.value = false;
+        } else if (lang) {
+          textContent.value = "```" + lang + "\n" + raw + "\n```";
+          textPlain.value = false;
+        } else {
+          textContent.value = raw;
+          textPlain.value = true;
+        }
+      } catch (e) {
+        textError.value = e instanceof Error ? e.message : String(e);
+      } finally {
+        textLoading.value = false;
+      }
+    }
+
+    function startTextLoad() {
+      if (!props.modelValue || !props.attachment) return;
+      if (isText.value) void loadText();
+    }
+
+    watch(
+      () => [props.modelValue, props.attachment] as const,
+      () => startTextLoad(),
+      { immediate: true },
+    );
+
+    // Re-fetch text once the transport URL lands (resolveUrl is async).
+    watch(resolvedSrc, () => {
+      if (!props.attachment?.file) startTextLoad();
+    });
+
+    function download() {
+      if (!resolvedSrc.value) return;
+      const a = document.createElement("a");
+      a.href = resolvedSrc.value;
+      a.download = props.attachment?.name || "download";
+      a.click();
+    }
+
+    function fileIcon() {
+      const att = props.attachment;
+      if (!att) return <FileIcon size={40} />;
+      if (att.type.startsWith("image/")) return <ImageIcon size={40} />;
+      if (att.type.startsWith("video/")) return <Film size={40} />;
+      if (att.type.startsWith("audio/")) return <Music size={40} />;
+      return <FileIcon size={40} />;
+    }
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.attachment?.name}
+        width="44rem"
+        footerActions={[
+          { label: t("hikari::attachment.download", "Download"), onClick: download, disabled: !resolvedSrc.value },
+          { label: t("hikari::attachment.close", "Close"), variant: "secondary", onClick: () => emit("update:modelValue", false) },
+        ]}
+      >
+        <div class="s-attachment-modal">
+          {srcLoading.value && (
+            <p class="s-attachment-modal-text-empty">{t("hikari::attachment.loading", "Loading…")}</p>
+          )}
+
+          {/* Image — zoomable viewer with minimap navigator */}
+          {!srcLoading.value && kind.value === "image" && resolvedSrc.value && (
+            <HImageViewer src={resolvedSrc.value} alt={props.attachment?.name ?? ""} />
+          )}
+
+          {/* Video — hikari media player with control bar */}
+          {!srcLoading.value && kind.value === "video" && resolvedSrc.value && (
+            <HMediaPlayer type="video" src={resolvedSrc.value} />
+          )}
+
+          {/* Audio — hikari media player with visualizer + control bar */}
+          {!srcLoading.value && kind.value === "audio" && resolvedSrc.value && (
+            <HMediaPlayer type="audio" src={resolvedSrc.value} />
+          )}
+
+          {/* Text / code — markdown + highlight.js via HMarkdownRenderer */}
+          {isText.value && (
+            <HScrollContainer class="s-attachment-modal-text">
+              {props.attachment?.file || resolvedSrc.value ? (
+                <HMarkdownRenderer
+                  content={textContent.value}
+                  loading={textLoading.value}
+                  plain={textPlain.value}
+                />
+              ) : (
+                <p class="s-attachment-modal-text-empty">
+                  {srcError.value
+                    ? srcError.value
+                    : t("hikari::attachment.noPreview", "No preview available.")}
+                </p>
+              )}
+              {textError.value && (
+                <p class="s-attachment-modal-text-error">{textError.value}</p>
+              )}
+            </HScrollContainer>
+          )}
+
+          {/* Generic file */}
+          {!srcLoading.value && kind.value === "other" && !isText.value && (
+            <div class="s-attachment-modal-file">
+              {fileIcon()}
+              <p class="s-attachment-modal-file-name">{props.attachment?.name}</p>
+            </div>
+          )}
+
+          {srcError.value && kind.value !== "other" && (
+            <p class="s-attachment-modal-text-error">{srcError.value}</p>
+          )}
+
+          <div class="s-attachment-modal-meta">
+            <HBadge variant="muted">{props.attachment?.type || "unknown"}</HBadge>
+            <HBadge variant="muted">{formatBytes(props.attachment?.size ?? 0)}</HBadge>
+          </div>
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkAuthCard.tsx

@@ -0,0 +1,50 @@
+import { defineComponent, type PropType } from "vue";
+
+/**
+ * HkAuthCard — the shared shell of every Celestia auth screen (login,
+ * register, setup): centered header (logo/title/subtitle) over a column
+ * form body.
+ *
+ * Slot layout contract:
+ * - `footer` renders into `.s-auth-footer`, a flex column sized to its
+ *   widest row and centered in the card: every slot child is its own row
+ *   (remember-me, protocol consent, a sign-in link…) and the rows share
+ *   one left edge. Children must not assume a shared inline line or
+ *   per-row centering; content that must sit on one row belongs inside
+ *   one child element.
+ * - `logo` swaps the header's logo slot; `default` is the form body.
+ */
+export const HkAuthCard = defineComponent({
+  name: "HkAuthCard",
+  props: {
+    title: { type: String, required: true },
+    subtitle: { type: String, default: "" },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div class="s-auth-card">
+        {slots.logo && (
+          <div class="s-auth-header">
+            {slots.logo()}
+            <h1 class="s-auth-title">{props.title}</h1>
+            {props.subtitle && <p class="s-auth-subtitle">{props.subtitle}</p>}
+          </div>
+        )}
+        {!slots.logo && (
+          <div class="s-auth-header">
+            <h1 class="s-auth-title">{props.title}</h1>
+            {props.subtitle && <p class="s-auth-subtitle">{props.subtitle}</p>}
+          </div>
+        )}
+        <div class="s-auth-form">
+          {slots.default?.()}
+        </div>
+        {slots.footer && (
+          <div class="s-auth-footer">
+            {slots.footer()}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkAuthSubmitButton.scss

@@ -0,0 +1,12 @@
+.s-auth-submit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.s-auth-submit-error {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: rgb(var(--color-danger, 229 62 62));
+}

package/src/components/HkAuthSubmitButton.tsx

@@ -0,0 +1,94 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { HButton, useI18n } from "@celestia-island/hikari";
+import { solvePow, type PowChallenge, type PowSolution } from "../utils/pow";
+
+export interface AuthSubmitContext {
+  /** Solved PoW for the challenge the backend issued (if any). */
+  pow?: PowSolution;
+  /** Captcha verification token (if the flow requires one). */
+  captchaToken?: string | null;
+}
+
+/**
+ * Submit button with an auth-challenge lifecycle (the plana-ui half of the
+ * auth kit; hikari provides the base input variants, the backend provides
+ * the challenge/captcha facilities this wraps):
+ *
+ * 1. `onGetChallenge` (optional) — ask the backend for a `{ seed, bits }`
+ *    PoW challenge.
+ * 2. Solve it with the built-in `solvePow` (or a custom `solver`).
+ * 3. `onCaptcha` (optional) — acquire a captcha verification token.
+ * 4. Call `onSubmit` with the assembled `AuthSubmitContext`.
+ *
+ * While solving, the button shows its own spinner; `loading` stays
+ * external so callers can reflect server-side submission progress.
+ */
+export default defineComponent({
+  name: "HkAuthSubmitButton",
+  props: {
+    label: { type: String, required: true },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: { type: String, default: undefined },
+    block: { type: Boolean, default: false },
+    size: { type: String as () => "sm" | "md" | "lg", default: "md" },
+    variant: { type: String as () => "primary" | "secondary" | "ghost", default: "primary" },
+    /** Fetch the backend PoW challenge; return null to skip PoW. */
+    onGetChallenge: { type: Function as PropType<() => Promise<PowChallenge | null>>, default: undefined },
+    /** Custom solver; defaults to the built-in subtle-based solvePow. */
+    solver: { type: Function as PropType<(c: PowChallenge) => Promise<number>>, default: undefined },
+    /** Acquire a captcha token; return null to skip captcha. */
+    onCaptcha: { type: Function as PropType<() => Promise<string | null>>, default: undefined },
+    /** Invoked with the assembled challenge context when ready. */
+    doSubmit: { type: Function as PropType<(ctx: AuthSubmitContext) => Promise<void>>, required: true },
+  },
+  emits: {
+    error: (_message: string) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const solving = ref(false);
+
+    const busy = computed(() => props.loading || solving.value);
+
+    async function handleClick() {
+      if (busy.value) return;
+      solving.value = true;
+      try {
+        const ctx: AuthSubmitContext = { captchaToken: null };
+        const challenge = props.onGetChallenge ? await props.onGetChallenge() : null;
+        if (challenge && challenge.bits > 0) {
+          const solve = props.solver ?? solvePow;
+          const counter = await solve(challenge);
+          ctx.pow = { seed: challenge.seed, bits: challenge.bits, counter };
+        }
+        if (props.onCaptcha) {
+          ctx.captchaToken = await props.onCaptcha();
+        }
+        await props.doSubmit(ctx);
+      } catch (e) {
+        emit("error", e instanceof Error ? e.message : String(e));
+      } finally {
+        solving.value = false;
+      }
+    }
+
+    return () => (
+      <div class="s-auth-submit">
+        <HButton
+          variant={props.variant}
+          size={props.size}
+          block={props.block}
+          loading={busy.value}
+          disabled={props.disabled || busy.value}
+          onClick={() => void handleClick()}
+        >
+          {solving.value
+            ? t("hikari::auth.solvingChallenge", "Verifying challenge…")
+            : props.label}
+        </HButton>
+        {props.error && <p class="s-auth-submit-error">{props.error}</p>}
+      </div>
+    );
+  },
+});