@celestia-island/hikari 0.4.4 → 0.4.5

package/README.md

@@ -51,4 +51,4 @@ import { HkButton, HkCard, HkInput } from "@celestia-island/hikari";
 
 ## License
 
-BUSL-1.1
+Licensed under the [Synthetic Source License (SySL), Version 1.0](../../LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
@@ -26,6 +26,10 @@
     },
     "./styles": {
       "import": "./src/styles/index.scss"
+    },
+    "./plugins": {
+      "import": "./src/plugins/index.ts",
+      "types": "./src/plugins/index.ts"
     }
   },
   "files": [
@@ -46,18 +50,23 @@
     "dompurify": "^*",
     "echarts": "^*",
     "lucide-vue-next": "^*",
-    "marked": "^*"
+    "marked": "^*",
+    "highlight.js": "^*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^*",
     "@vitejs/plugin-vue-jsx": "^*",
     "@vue/server-renderer": "^*",
+    "happy-dom": "^*",
     "sass": "^*",
-    "typescript": "~6.0",
+    "typescript": "^*",
     "vite": "^*",
-    "vue-tsc": "^*"
+    "vue-tsc": "^*",
+    "vitest": "^*",
+    "@types/node": "^*"
   },
-  "overrides": {
-    "typescript": "~6.0"
-  }
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ]
 }

package/src/DemoApp.vue

@@ -250,7 +250,7 @@
     </section>
 
     <section class="demo-footer">
-      <p>Hikari v0.4.4 — Powered by celestia-island</p>
+      <p>Hikari v0.4.5 — Powered by celestia-island</p>
     </section>
   </div>
 </template>

package/src/components/HkAdminHeader.tsx

@@ -0,0 +1,205 @@
+import { defineComponent, ref, type PropType, type VNode } from "vue";
+import { Camera, Languages, LogOut, Menu } from "lucide-vue-next";
+import { HBadge, HButton, HDivider, HPopover } from "@celestia-island/hikari";
+
+export interface LocaleOption {
+  code: string;
+  label: string;
+}
+
+export const HkAdminHeader = defineComponent({
+  name: "HkAdminHeader",
+  props: {
+    title: { type: String, required: true },
+    showHamburger: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    actions: { type: Array as PropType<VNode[]>, default: () => [] },
+    username: { type: String, default: "" },
+    avatarUrl: { type: String, default: "" },
+    userEmail: { type: String, default: "" },
+    userGroups: { type: Array as PropType<{ id: string; name: string }[]>, default: () => [] },
+    showEmergencyStop: { type: Boolean, default: false },
+    emergencyStopActive: { type: Boolean, default: false },
+    emergencyStopActiveLabel: { type: String, default: "" },
+    emergencyStopActiveTitle: { type: String, default: "" },
+    emergencyStopLabel: { type: String, default: "" },
+    emergencyStopTitle: { type: String, default: "" },
+    emergencyStopLoading: { type: Boolean, default: false },
+    avatarMenuLabel: { type: String, default: "Avatar" },
+    localeMenuLabel: { type: String, default: "Language" },
+    logoutLabel: { type: String, default: "Logout" },
+    adminGroupLabel: { type: String, default: "Administrators" },
+  },
+  emits: {
+    logout: () => true,
+    hamburger: () => true,
+    emergencyStop: () => true,
+    avatarClick: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const userMenuOpen = ref(false);
+    const userTriggerRef = ref<HTMLElement>();
+    const avatarModalOpen = ref(false);
+    const avatarFailed = ref(false);
+    const localeMenuOpen = ref(false);
+    const localeTriggerRef = ref<HTMLElement | null>(null);
+
+    return () => (
+      <header
+        class={[
+          "s-glass-header",
+          props.compact ? "px-4 gap-2" : "px-6 gap-3",
+        ]}
+      >
+        {props.showHamburger && (
+          <HButton
+            variant="ghost"
+            size="sm"
+            onClick={() => emit("hamburger")}
+          >
+            <Menu size={20} class="w-5 h-5" />
+          </HButton>
+        )}
+
+        <div ref={userTriggerRef} class="flex items-center gap-2">
+          <button
+            class={[
+              "w-7 h-7 rounded-full overflow-hidden shrink-0 cursor-pointer transition-opacity relative group p-0 border-0",
+              props.avatarUrl
+                ? ""
+                : "bg-primary/10 border-2 border-primary/15 hover:border-primary/30",
+            ]}
+            onClick={(e) => {
+              e.stopPropagation();
+              avatarModalOpen.value = true;
+              emit("avatarClick");
+            }}
+          >
+            {props.avatarUrl && !avatarFailed.value ? (
+              <img
+                src={props.avatarUrl}
+                alt={props.username}
+                class="w-full h-full object-cover"
+                onError={() => { avatarFailed.value = true; }}
+              />
+            ) : (
+              <span class="text-xs font-bold text-primary/70">
+                {props.username?.charAt(0).toUpperCase() || "?"}
+              </span>
+            )}
+            <div class="absolute inset-0 rounded-full bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+              <Camera size={10} class="text-white" />
+            </div>
+          </button>
+          <span class="text-sm font-semibold text-text truncate max-w-[8rem]">
+            {props.username}
+          </span>
+        </div>
+
+        <HPopover
+          modelValue={userMenuOpen.value}
+          onUpdate:modelValue={(v: boolean) => { userMenuOpen.value = v; }}
+          placement="bottom-start"
+          anchorRef={userTriggerRef.value ?? null}
+          class="w-40"
+        >
+          <div class="py-1">
+            {props.userGroups && props.userGroups.length > 0 && (
+              <>
+                <div class="px-3 py-1.5 flex flex-wrap gap-1">
+                  {props.userGroups.map((g: { id: string; name: string }) => (
+                    <HBadge
+                      key={g.id}
+                      variant={g.name === "Administrators" ? "error" : "primary"}
+                      size="sm"
+                    >
+                      {g.name === "Administrators" ? props.adminGroupLabel : g.name}
+                    </HBadge>
+                  ))}
+                </div>
+                <HDivider spacing="sm" />
+              </>
+            )}
+            <button
+              class="s-popup-menu-item"
+              onClick={() => {
+                userMenuOpen.value = false;
+                avatarModalOpen.value = true;
+              }}
+            >
+              <Camera size={14} />
+              {props.avatarMenuLabel}
+            </button>
+            <div ref={localeTriggerRef}>
+              <button
+                class="s-popup-menu-item"
+                onClick={() => (localeMenuOpen.value = !localeMenuOpen.value)}
+              >
+                <Languages size={14} />
+                {props.localeMenuLabel}
+              </button>
+              {slots["locale-picker"]?.({
+                open: localeMenuOpen.value,
+                onUpdateOpen: (v: boolean) => {
+                  localeMenuOpen.value = v;
+                  if (!v) userMenuOpen.value = false;
+                },
+                triggerRef: localeTriggerRef.value,
+              })}
+            </div>
+            {slots["user-menu-extra"]?.()}
+            <HDivider spacing="sm" />
+            <button
+              class="s-popup-menu-item"
+              onClick={() => {
+                userMenuOpen.value = false;
+                emit("logout");
+              }}
+            >
+              <LogOut size={14} />
+              {props.logoutLabel}
+            </button>
+          </div>
+        </HPopover>
+
+        <h2 class="text-sm font-semibold text-text">
+          {props.title}
+        </h2>
+        <div class="ml-auto flex items-center gap-1.5">
+          {props.showEmergencyStop && (
+            <button
+              class={[
+                "px-3 py-1 rounded-md text-xs font-bold border transition-all",
+                props.emergencyStopLoading ? "opacity-50 cursor-wait" : "cursor-pointer",
+                props.emergencyStopActive
+                  ? "bg-red-600 text-white border-red-700 animate-pulse"
+                  : "bg-red-600/10 text-red-500 border-red-500/40 hover:bg-red-600/25",
+              ]}
+              disabled={props.emergencyStopLoading}
+              title={props.emergencyStopActive
+                ? props.emergencyStopActiveTitle
+                : props.emergencyStopTitle}
+              onClick={() => emit("emergencyStop")}
+            >
+              {props.emergencyStopActive
+                ? props.emergencyStopActiveLabel
+                : props.emergencyStopLabel}
+            </button>
+          )}
+          {slots["emergency-stop-extra"]?.()}
+          {(props.actions || []).map((vnode, i) => (
+            <span key={i} class="flex items-center gap-1">
+              {vnode}
+            </span>
+          ))}
+          {slots["theme-toggle"]?.()}
+        </div>
+
+        {slots["avatar-modal"]?.({
+          open: avatarModalOpen.value,
+          onUpdateOpen: (v: boolean) => { avatarModalOpen.value = v; },
+        })}
+      </header>
+    );
+  },
+});

package/src/components/HkAdminShell.tsx

@@ -0,0 +1,85 @@
+import { defineComponent, ref } from "vue";
+import { HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
+import { provideActionBar } from "../composables/useActionBar";
+
+export const HkAdminShell = defineComponent({
+  name: "HkAdminShell",
+  props: {
+    sidebarCollapsed: { type: Boolean, default: false },
+    sidebarWidth: { type: String, default: "224px" },
+    mobileBreakpoint: { type: Number, default: 768 },
+    footerHeight: { type: String, default: "var(--s-footer-height)" },
+    navTitle: { type: String, default: "Navigation" },
+  },
+  setup(props, { slots }) {
+    const { isDesktop } = useBreakpoint();
+    const sidebarOpen = ref(false);
+
+    const actionBar = provideActionBar();
+
+    const toggleHamburger = () => {
+      sidebarOpen.value = !sidebarOpen.value;
+    };
+
+    const closeSidebar = () => {
+      sidebarOpen.value = false;
+    };
+
+    return () => (
+      <div class="flex flex-col h-full w-full overflow-hidden">
+        {slots.header && (
+          <div style={{ flexShrink: 0 }}>
+            {slots.header({
+              isDesktop: isDesktop.value,
+              showHamburger: !isDesktop.value,
+              compact: !isDesktop.value,
+              actions: actionBar.actions.value ? actionBar.actions.value() : [],
+              onHamburger: toggleHamburger,
+            })}
+          </div>
+        )}
+
+        <div class="flex flex-1 min-h-0" style={{ paddingBottom: props.footerHeight }}>
+          {isDesktop.value && !props.sidebarCollapsed && slots.sidebar && (
+            <aside
+              style={{
+                width: props.sidebarWidth,
+                flexShrink: 0,
+                borderRight: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
+                background: "rgb(var(--color-surface))",
+                overflow: "hidden",
+              }}
+            >
+              {slots.sidebar({ collapsed: false, onNavigate: closeSidebar })}
+            </aside>
+          )}
+          <main class="flex-1 flex flex-col min-w-0 min-h-0">
+            <HScrollContainer class="flex-1 p-6 min-h-0">
+              {slots.content?.()}
+            </HScrollContainer>
+          </main>
+
+          {!isDesktop.value && (
+            <HDrawer
+              modelValue={sidebarOpen.value}
+              onUpdate:modelValue={(v: boolean) => (sidebarOpen.value = v)}
+              side="left"
+              size="280px"
+              title={props.navTitle}
+            >
+              {slots.sidebar?.({ collapsed: false, onNavigate: closeSidebar })}
+            </HDrawer>
+          )}
+        </div>
+
+        {slots.footer && (
+          <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 40 }}>
+            {slots.footer()}
+          </footer>
+        )}
+
+        {slots.overlays}
+      </div>
+    );
+  },
+});

package/src/components/HkAdminTablePage.tsx

@@ -0,0 +1,70 @@
+import { defineComponent, type PropType } from "vue";
+import { HAlert, HCard, HEmptyState, HSpinner, HTable, useI18n } from "@celestia-island/hikari";
+import { HkPageHeader } from "./HkPageHeader";
+
+
+/** Column definition passed through to HTable. */
+export interface HTableColumn {
+  key: string;
+  title: string;
+  width?: string;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+}
+
+/**
+ * CRUD table-page scaffold: HkPageHeader + loading spinner + error alert +
+ * empty state + HTable. Slots:
+ * - `actions`      — header actions (e.g. a "Create" button)
+ * - `cell-<key>`   — per-column cell templates, forwarded to HTable
+ * - `create-modal` — create dialog, rendered after the table
+ * - `edit-modal`   — edit dialog, rendered after the table
+ */
+export const HkAdminTablePage = defineComponent({
+  name: "HkAdminTablePage",
+  props: {
+    title: { type: String, default: "" },
+    loading: { type: Boolean, default: false },
+    error: { type: String as PropType<string | undefined>, default: undefined },
+    rows: { type: Array as PropType<Record<string, unknown>[]>, required: true },
+    columns: { type: Array as PropType<HTableColumn[]>, required: true },
+    rowKey: { type: String, default: "id" },
+    emptyTitle: { type: String, default: "" },
+    emptyDescription: { type: String as PropType<string | undefined>, default: undefined },
+  },
+  setup(props, { slots }) {
+
+    return () => {
+      const { t } = useI18n();
+      const emptyTitle = props.emptyTitle || t("hikari::tablePage.emptyTitle", "No data");
+      return (
+        <div>
+          {props.title ? (
+            <HkPageHeader title={props.title}>
+              {{ actions: () => slots.actions?.() }}
+            </HkPageHeader>
+          ) : slots.actions ? (
+            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "var(--space-16, 1rem)" }}>
+              {slots.actions()}
+            </div>
+          ) : null}
+          {props.error ? (
+            <HAlert message={props.error} />
+          ) : props.loading && !props.rows.length ? (
+            <HSpinner center />
+          ) : !props.rows.length ? (
+            <HEmptyState title={emptyTitle} description={props.emptyDescription} />
+          ) : (
+            <HCard padded={false}>
+              <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>
+                {slots}
+              </HTable>
+            </HCard>
+          )}
+          {slots["create-modal"]?.()}
+          {slots["edit-modal"]?.()}
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkAuthCard.tsx

@@ -0,0 +1,36 @@
+import { defineComponent, type PropType } from "vue";
+
+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>
+    );
+  },
+});

package/src/components/HkAvatar.scss

@@ -0,0 +1,93 @@
+// ------
+// Hikari Avatar Component
+// ------
+
+.hk-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: var(--hi-color-gray-200, #E5E7EB);
+  color: var(--hi-color-gray-600, #4B5563);
+  font-weight: 500;
+  transition: all 0.2s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.hk-avatar-xs {
+  width: 24px;
+  height: 24px;
+  font-size: 0.625rem;
+}
+
+.hk-avatar-sm {
+  width: 32px;
+  height: 32px;
+  font-size: 0.75rem;
+}
+
+.hk-avatar-md {
+  width: 40px;
+  height: 40px;
+  font-size: 0.875rem;
+}
+
+.hk-avatar-lg {
+  width: 48px;
+  height: 48px;
+  font-size: 1rem;
+}
+
+.hk-avatar-xl {
+  width: 64px;
+  height: 64px;
+  font-size: 1.25rem;
+}
+
+.hk-avatar-circular {
+  border-radius: 50%;
+}
+
+.hk-avatar-rounded {
+  border-radius: 8px;
+}
+
+.hk-avatar-square {
+  border-radius: 0;
+}
+
+.hk-avatar-fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  font-weight: 600;
+}
+
+.hk-avatar-icon {
+  color: var(--hi-color-text-secondary);
+  opacity: 0.8;
+}
+
+.hk-avatar-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+[data-theme="dark"] .hk-avatar {
+  background-color: var(--hi-surface);
+  color: var(--hi-color-text-secondary);
+}
+
+[data-theme="dark"] .hk-avatar-icon {
+  color: var(--hi-color-text-secondary);
+  opacity: 0.6;
+}

package/src/components/HkAvatar.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, type PropType } from "vue";
 import { useI18n } from "../i18n/context";
-import "../../../components/src/styles/components/avatar.scss";
+import "./HkAvatar.scss";
 
 export default defineComponent({
   name: "HkAvatar",