@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkCaptchaModal.tsx

@@ -0,0 +1,62 @@
+import { defineComponent, type PropType } from "vue";
+import { HModal } from "@celestia-island/hikari";
+
+import { useI18n } from "../i18n/context";
+
+import { HkCaptchaWidget, type HkCaptchaProvider } from "./HkCaptchaWidget";
+import "./HkCaptchaModal.scss";
+
+/**
+ * HkCaptchaModal — modal host for HkCaptchaWidget.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * Opens on demand (at submit time), renders the provider widget, and emits
+ * the verification token once the challenge succeeds. Closes itself when
+ * the provider reports an error so the caller can surface its own message.
+ */
+export const HkCaptchaModal = defineComponent({
+  name: "HkCaptchaModal",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    siteKey: { type: String, required: true },
+    provider: { type: String as PropType<HkCaptchaProvider>, default: "turnstile" },
+    scriptUrl: { type: String, default: undefined },
+    attempt: { type: Number, default: 0 },
+    title: { type: String, default: undefined },
+    width: { type: String, default: "30rem" },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+    verify: (_token: string) => true,
+    error: (_message: string) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.title ?? t("hikari::captcha.title", "Security check")}
+        width={props.width}
+      >
+        <div class="s-captcha-modal">
+          <p class="s-captcha-modal-prompt">{t("hikari::captcha.prompt", "Complete the verification below to continue.")}</p>
+          {props.modelValue && (
+            <HkCaptchaWidget
+              siteKey={props.siteKey}
+              provider={props.provider}
+              scriptUrl={props.scriptUrl}
+              attempt={props.attempt}
+              onVerify={(token: string) => emit("verify", token)}
+              onError={(message: string) => {
+                emit("error", message);
+                emit("update:modelValue", false);
+              }}
+            />
+          )}
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkCaptchaWidget.scss

@@ -0,0 +1,30 @@
+.s-captcha-widget {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  min-height: 4rem;
+}
+
+.s-captcha-widget-loading {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+}
+
+.s-captcha-widget-host {
+  display: flex;
+  justify-content: center;
+}
+
+.s-captcha-widget-placeholder {
+  justify-content: center;
+  min-height: 4rem;
+  padding: var(--space-16, 1rem);
+  border: 1px dashed var(--border-faint, rgb(var(--color-border) / 15%));
+  border-radius: var(--radius-md, 8px);
+  color: rgb(var(--color-muted));
+  font-size: var(--text-xs, 0.75rem);
+  text-align: center;
+  max-width: 22rem;
+}

package/src/components/HkCaptchaWidget.tsx

@@ -0,0 +1,181 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
+import { ShieldAlert } from "lucide-vue-next";
+
+import { useI18n } from "../i18n/context";
+
+import "./HkCaptchaWidget.scss";
+
+/**
+ * HkCaptchaWidget — provider-agnostic silent-captcha widget.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * Renders a third-party captcha widget (Cloudflare Turnstile or Google
+ * reCAPTCHA protocol) and emits the verification token once the challenge
+ * succeeds. The provider CDN script is loaded lazily, only once per URL,
+ * and never bundled locally.
+ *
+ * Provider-agnostic contract:
+ *  - `provider: "turnstile" | "recaptcha"` selects the render protocol.
+ *  - `scriptUrl` overrides the official CDN URL (defaults per provider),
+ *    so any platform compatible with one of those protocols — including a
+ *    self-hosted one — works by pointing `scriptUrl` at it.
+ *  - No-op placeholder mode: when `siteKey` is empty (or `disabled` is
+ *    true) the widget renders a placeholder box and emits nothing. This
+ *    lets deployments ship without a captcha provider; wire a real
+ *    `siteKey`/`scriptUrl` per deployment to enable verification.
+ *
+ * Tokens are single-use; bump `attempt` (e.g. after a failed submit) to
+ * force a reset so a fresh token is produced.
+ */
+export type HkCaptchaProvider = "turnstile" | "recaptcha";
+
+const DEFAULT_SCRIPT_URLS: Record<HkCaptchaProvider, string> = {
+  turnstile: "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit",
+  recaptcha: "https://www.google.com/recaptcha/api.js?render=explicit",
+};
+
+const SCRIPT_LOADERS: Record<string, Promise<unknown> | undefined> = {};
+
+function loadScript(src: string): Promise<unknown> {
+  if (SCRIPT_LOADERS[src]) return SCRIPT_LOADERS[src];
+  SCRIPT_LOADERS[src] = new Promise((resolve, reject) => {
+    const el = document.createElement("script");
+    el.src = src;
+    el.async = true;
+    el.defer = true;
+    el.onload = () => resolve(undefined);
+    el.onerror = () => {
+      delete SCRIPT_LOADERS[src];
+      reject(new Error(`failed to load ${src}`));
+    };
+    document.head.appendChild(el);
+  });
+  return SCRIPT_LOADERS[src];
+}
+
+type TurnstileApi = {
+  render: (el: HTMLElement, opts: Record<string, unknown>) => string;
+  reset: (id?: string) => void;
+  remove: (id: string) => void;
+};
+type GrecaptchaApi = {
+  ready: (cb: () => void) => void;
+  render: (el: HTMLElement, opts: Record<string, unknown>) => number;
+  reset: (id?: number) => void;
+};
+
+function getGlobal(name: string): unknown {
+  return (window as unknown as Record<string, unknown>)[name];
+}
+
+export const HkCaptchaWidget = defineComponent({
+  name: "HkCaptchaWidget",
+  props: {
+    /** Site key issued by the provider (empty = placeholder/no-op mode). */
+    siteKey: { type: String, required: true },
+    /** Provider protocol: "turnstile" (default) or "recaptcha". */
+    provider: { type: String as PropType<HkCaptchaProvider>, default: "turnstile" },
+    /** CDN script URL override (defaults to the official provider URL). */
+    scriptUrl: { type: String, default: undefined },
+    /** Bump to force a token refresh (e.g. after a failed submit). */
+    attempt: { type: Number, default: 0 },
+    /** Disables rendering and enters no-op placeholder mode. */
+    disabled: { type: Boolean, default: false },
+  },
+  emits: {
+    verify: (_token: string) => true,
+    error: (_message: string) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const container = ref<HTMLElement>();
+    const loading = ref(false);
+    let widgetId: string | number | null = null;
+
+    const placeholder = computed(() => !props.siteKey || props.disabled);
+
+    function reset() {
+      if (widgetId == null) return;
+      if (props.provider === "turnstile") {
+        (getGlobal("turnstile") as TurnstileApi | undefined)?.reset(widgetId as string);
+      } else {
+        (getGlobal("grecaptcha") as GrecaptchaApi | undefined)?.reset(widgetId as number);
+      }
+    }
+
+    async function render() {
+      if (!container.value || placeholder.value) return;
+      const onToken = (token: string) => emit("verify", token);
+
+      loading.value = true;
+      try {
+        const src = props.scriptUrl || DEFAULT_SCRIPT_URLS[props.provider];
+        // An unknown provider string (config-driven value, typo) makes the
+        // lookup above return undefined — and `el.src = undefined` coerces
+        // to the literal "undefined", so the browser fetches
+        // `<origin>/undefined` and the widget reports a bogus load failure.
+        // Fail loudly with the provider name instead.
+        if (!src) {
+          throw new Error(
+            `no script URL for captcha provider "${props.provider}" (expected "${Object.keys(DEFAULT_SCRIPT_URLS).join('" | "')}")`,
+          );
+        }
+        if (props.provider === "turnstile") {
+          await loadScript(src);
+          const api = getGlobal("turnstile") as TurnstileApi | undefined;
+          if (!api) throw new Error("turnstile not available");
+          widgetId = api.render(container.value, {
+            sitekey: props.siteKey,
+            callback: onToken,
+            "error-callback": () => emit("error", "turnstile error"),
+          });
+        } else {
+          await loadScript(src);
+          const api = getGlobal("grecaptcha") as GrecaptchaApi | undefined;
+          if (!api) throw new Error("grecaptcha not available");
+          await new Promise<void>((resolve) => api.ready(() => resolve()));
+          widgetId = api.render(container.value, {
+            sitekey: props.siteKey,
+            callback: onToken,
+          });
+        }
+      } catch (e) {
+        emit("error", e instanceof Error ? e.message : String(e));
+      } finally {
+        loading.value = false;
+      }
+    }
+
+    onMounted(render);
+    watch(
+      () => props.attempt,
+      () => {
+        if (widgetId != null) reset();
+      },
+    );
+    onBeforeUnmount(() => {
+      if (widgetId == null) return;
+      if (props.provider === "turnstile") {
+        (getGlobal("turnstile") as TurnstileApi | undefined)?.remove(widgetId as string);
+      }
+      widgetId = null;
+    });
+
+    return () => {
+      if (placeholder.value) {
+        return (
+          <div class="s-captcha-widget s-captcha-widget-placeholder">
+            <ShieldAlert size={16} />
+            <span>{t("hikari::captcha.placeholder", "Verification is not configured for this deployment (no site key provided).")}</span>
+          </div>
+        );
+      }
+      return (
+        <div class="s-captcha-widget">
+          {loading.value && <p class="s-captcha-widget-loading">{t("hikari::captcha.loading", "Loading verification widget…")}</p>}
+          <div ref={container} class="s-captcha-widget-host" />
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkCard.scss

@@ -6,7 +6,7 @@
 .hk-card {
   display: block;
   overflow: hidden;
-  background: rgb(var(--color-surface) / var(--opacity-half));
+  background: color-mix(in srgb, rgb(var(--color-surface)) 70%, transparent);
   backdrop-filter: blur(var(--blur-md));
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);

package/src/components/HkChatTypes.ts

@@ -0,0 +1,65 @@
+/**
+ * Shared chat/LLM types for the hikari chat kit.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * Deliberately dependency-light: plain data shapes only, so any service
+ * (arona, shittim-chest, …) can map its own store onto these props
+ * without importing provider internals.
+ *
+ * The attachment shapes already live on HkAttachmentModal (upstreamed in
+ * an earlier wave) and are re-exported here so this module mirrors the
+ * old PlanaChatTypes surface — import everything chat-related from here.
+ */
+
+/** Message role — drives bubble alignment and tinting. */
+export type HChatRole = "user" | "assistant";
+
+/** Lifecycle of a tool call block. */
+export type HToolCallStatus = "pending" | "running" | "done" | "error";
+
+/** Tool call payload rendered by HkToolBlock (also nested in chat messages). */
+export interface HToolCall {
+  id?: string;
+  toolName: string;
+  agentType?: string;
+  status: HToolCallStatus;
+  callText?: string;
+  resultText?: string;
+  durationMs?: number;
+  defaultExpanded?: boolean;
+}
+
+/** Voice popup phase — see HkVoiceInputPopup. */
+export type HVoicePopupMode = "notConfigured" | "listening" | "transcribing";
+
+/**
+ * Voice state fed by the parent (e.g. from a voice-input composable).
+ * `open` + `mode` drive the anchored HkVoiceInputPopup; `transcribing`
+ * disables the mic button while recognition is running.
+ */
+export interface HVoiceState {
+  open: boolean;
+  mode: HVoicePopupMode;
+  transcribing?: boolean;
+}
+
+/** One model row in the HkTokenUsagePanel per-model breakdown. */
+export interface HModelUsageEntry {
+  model: string;
+  tokenCount: number;
+}
+
+/** Read-only cost inputs for HkTokenUsagePanel (USD amounts). */
+export interface HModelCosts {
+  prompt: number;
+  completion: number;
+  cached?: number;
+}
+
+// Attachment shapes (defined by HkAttachmentModal since the first
+// chat-kit wave) — re-exported, not redefined.
+export type {
+  HAttachmentDetail,
+  HAttachmentItem,
+  HAttachmentPreviewType,
+} from "./HkAttachmentModal";

package/src/components/HkCheckbox.scss

@@ -40,7 +40,7 @@
 .hk-checkbox-box[data-checked] {
   background: var(--hi-color-primary, #ff6b9d);
   border-color: var(--hi-color-primary, #ff6b9d);
-  color: var(--hi-color-text-on-primary, #fff);
+  color: rgb(var(--color-on-solid-text, 255 255 255));
 }
 
 .hk-checkbox-box[data-indeterminate] {
@@ -69,7 +69,7 @@
 .hk-checkbox-icon {
   position: relative;
   z-index: var(--hi-z-above, 1);
-  color: var(--hi-color-text-on-primary, #fff);
+  color: rgb(var(--color-on-solid-icon, 255 255 255));
   width: 14px;
   height: 14px;
 }
@@ -78,7 +78,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--hi-color-text-on-primary, #fff);
+  background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: var(--hi-z-above, 1);
 }
 
@@ -86,7 +86,7 @@
   width: 8px;
   height: 2px;
   border-radius: 1px;
-  background: var(--hi-color-text-on-primary, #fff);
+  background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: var(--hi-z-above, 1);
 }
 
@@ -95,8 +95,3 @@
 .hk-checkbox[data-animating] .hk-checkbox-box {
   will-change: border-color, background;
 }
-
-.hk-checkbox-label-text {
-  font-size: var(--hi-text-sm, 0.8125rem);
-  color: var(--hi-color-text-primary, #333);
-}

package/src/components/HkCheckbox.tsx

@@ -1,5 +1,8 @@
-import { defineComponent, ref, type PropType } from "vue";
 import { Check } from "lucide-vue-next";
+import { defineComponent, onUnmounted, ref, type PropType } from "vue";
+
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+import HkLabel from "./HkLabel";
 import "./HkCheckbox.scss";
 
 export default defineComponent({
@@ -22,12 +25,16 @@ export default defineComponent({
   },
   setup(props, { emit, slots }) {
     const animating = ref(false);
-    let animTimer: ReturnType<typeof setTimeout> | null = null;
+    let animTimer: CronHandle | null = null;
 
     function markActive() {
       animating.value = true;
-      if (animTimer) clearTimeout(animTimer);
-      animTimer = setTimeout(() => {
+      // cronBus one-shot (not the rAF-driven animationBus one): the
+      // flag must always clear, even while the animation bus is parked
+      // under reduced motion.
+      animTimer?.disconnect();
+      animTimer = scheduleCronAfter(() => {
+        animTimer = null;
         animating.value = false;
       }, 300);
     }
@@ -38,6 +45,11 @@ export default defineComponent({
       markActive();
     }
 
+    onUnmounted(() => {
+      animTimer?.disconnect();
+      animTimer = null;
+    });
+
     return () => {
       const inputType = props.type === "radio" ? "radio" : "checkbox";
       const isChecked = props.modelValue === true || props.modelValue === null;
@@ -74,9 +86,9 @@ export default defineComponent({
             ) : null}
           </span>
           {props.label || slots.default ? (
-            <span class="hk-checkbox-label-text">
+            <HkLabel size={props.size}>
               {slots.default?.() ?? props.label}
-            </span>
+            </HkLabel>
           ) : null}
         </label>
       );

package/src/components/HkColorPicker.scss

@@ -1,5 +1,33 @@
 .hk-color-picker {
   display: inline-flex;
+  min-width: 0;
+}
+
+// Row layout — dense grids that must show full color names: swatch left,
+// single-line label right, ellipsis when the name outgrows the cell.
+// Grid/flex children sizing needs min-width: 0 on every ancestor to let
+// text-overflow actually engage.
+.hk-color-picker[data-layout="row"] {
+  .hk-color-picker-swatch-btn {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-8);
+    width: 100%;
+  }
+
+  .hk-color-picker-swatch {
+    width: 18px;
+    height: 18px;
+  }
+
+  .hk-color-picker-label {
+    margin-bottom: 0;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
 }
 
 .hk-color-picker-trigger {
@@ -33,9 +61,12 @@
 }
 
 .hk-color-picker-label {
+  display: block;
   font-size: var(--text-xs);
-  font-weight: 500;
-  color: rgb(var(--color-muted));
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  margin-bottom: var(--space-4);
+  color: rgb(var(--color-text) / var(--hk-field-label-alpha, 72%));
   white-space: nowrap;
   line-height: 1;
   transition: color var(--duration-short);
@@ -106,9 +137,25 @@
   display: block;
   overflow: hidden;
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+  // Explicit on the hit targets too (not only the container): touch-action
+  // resolves against the touched element's ancestor chain, and spelling it
+  // out on track+thumb removes any hit-target ambiguity on mobile.
+  touch-action: none;
 }
 
 .hk-color-picker-slider-thumb {
+  // Absolute INSIDE the slider container (the track is the only in-flow
+  // flex child and spans the full width, so `left: N%` of the container
+  // is N% of the track). Without this the thumb was a static flex item:
+  // the inline `left` from HkColorPicker.tsx is ignored on static
+  // elements and the thumb sat parked after the flex:1 track at the
+  // right edge on every layout, never following the value.
+  position: absolute;
+  top: 50%;
+  left: 0;
+  // Center the thumb ON the value point; hover scale must extend (not
+  // replace) this transform or the thumb would jump back half its size.
+  transform: translate(-50%, -50%);
   display: block;
   width: 14px;
   height: 14px;
@@ -119,8 +166,10 @@
   cursor: grab;
   outline: none;
   transition: transform 0.1s;
+  touch-action: none;
+  -webkit-touch-callout: none;
 
-  &:hover { transform: scale(1.15); }
+  &:hover { transform: translate(-50%, -50%) scale(1.15); }
   &:active { cursor: grabbing; }
 }
 
@@ -138,6 +187,40 @@
   width: 100%;
 }
 
+.hk-color-picker-band {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.hk-color-picker-hue-band {
+  position: relative;
+  height: 10px;
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+}
+
+.hk-color-picker-hue-band-thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  transform: translate(-50%, -50%);
+  border-radius: calc(var(--radius-xs) - 1px);
+  border: 2px solid rgb(255 255 255 / 90%);
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);
+  pointer-events: none;
+}
+
+.hk-color-picker-band-caption {
+  font-size: var(--text-2xs);
+  font-weight: 500;
+  color: rgb(var(--color-muted));
+  letter-spacing: 0.02em;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
 .hk-color-picker-hex-hash {
   font-size: var(--text-xs);
   font-weight: 600;
@@ -146,3 +229,37 @@
   pointer-events: none;
   line-height: 1;
 }
+
+// Mobile sheet form (via HPopover sheetOnMobile): the panel spans the full
+// width and its controls get touch-sized spacing — the sliders are the
+// whole point on phones, give them room to hit. The bottom padding stacks
+// the home-bar safe-area inset ON TOP of the component's own gap (the
+// shorthand here would otherwise silently override the base sheet rule's
+// env() padding-bottom).
+.hk-popover-panel.hk-is-sheet.hk-color-picker-panel {
+  padding: 0 var(--space-16)
+    calc(var(--space-20) + env(safe-area-inset-bottom, 0px));
+
+  .hk-color-picker-controls {
+    min-width: 0;
+    width: 100%;
+    gap: var(--space-16);
+  }
+
+  .hk-color-picker-slider-row {
+    gap: var(--space-10);
+  }
+
+  .hk-color-picker-channel-slider {
+    height: 22px;
+  }
+
+  .hk-color-picker-slider-track {
+    height: 14px;
+  }
+
+  .hk-color-picker-slider-thumb {
+    width: 22px;
+    height: 22px;
+  }
+}