@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkSecretRevealModal.scss

@@ -0,0 +1,61 @@
+.s-secret-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12, 0.75rem);
+}
+
+.s-secret-modal-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
+  border-radius: var(--radius-md, 8px);
+  background: rgb(var(--color-warning) / 12%);
+  color: rgb(var(--color-warning));
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.s-secret-modal-value {
+  display: block;
+  padding: var(--space-12, 0.75rem);
+  border-radius: var(--radius-md, 8px);
+  background: rgb(var(--color-surface) / 0.6);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 12%));
+  color: rgb(var(--color-text));
+  font-size: var(--text-sm, 0.8125rem);
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.s-secret-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.s-secret-modal-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6, 0.375rem);
+  padding: var(--space-6, 0.375rem) var(--space-12, 0.75rem);
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: rgb(var(--color-primary));
+  color: rgb(var(--color-on-solid-text, 255 255 255));
+  font-size: var(--text-sm, 0.8125rem);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.s-secret-modal-copy:hover {
+  filter: brightness(1.1);
+}
+
+.s-secret-modal-copy[data-copied] {
+  background: rgb(var(--color-success));
+  color: rgb(var(--color-on-solid-text, 255 255 255));
+}
+
+.s-secret-modal-copy:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/HkSecretRevealModal.tsx

@@ -0,0 +1,91 @@
+import { defineComponent, ref, watch } from "vue";
+import { TriangleAlert as AlertTriangle, Check, Copy } from "lucide-vue-next";
+import { HModal, useClipboard, useI18n } from "@celestia-island/hikari";
+
+import "./HkSecretRevealModal.scss";
+
+
+/**
+ * HkSecretRevealModal — show-once secret / API-key reveal panel.
+ *
+ * Displays a one-time secret (API key, token, password) with a "shown
+ * only once" notice and a copy button. `copied` fires on successful copy.
+ * The value is a prop: the caller decides how to obtain/discard it (e.g.
+ * clear it once the modal closes).
+ */
+export const HkSecretRevealModal = defineComponent({
+  name: "HkSecretRevealModal",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    /** Secret label (e.g. "API Key"). */
+    label: { type: String, required: true },
+    /** The secret value to reveal. */
+    value: { type: String, required: true },
+    /** Copy button label override. */
+    copyLabel: { type: String, default: undefined },
+    /** "Shown once" notice override. */
+    notice: { type: String, default: undefined },
+    title: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+    copied: () => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const clipboard = useClipboard();
+    const copied = ref(false);
+
+    watch(
+      () => props.modelValue,
+      (open) => {
+        if (open) copied.value = false;
+      },
+    );
+
+    async function handleCopy() {
+      if (!props.value) return;
+      const ok = await clipboard.copy(props.value);
+      if (ok) {
+        copied.value = true;
+        emit("copied");
+      }
+    }
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.title ?? `${props.label} — ${t("hikari::secret.title")}`}
+        width="34rem"
+        footerActions={[
+          {
+            label: t("hikari::secret.close"),
+            variant: "secondary",
+            onClick: () => emit("update:modelValue", false),
+          },
+        ]}
+      >
+        <div class="s-secret-modal">
+          <div class="s-secret-modal-notice">
+            <AlertTriangle size={14} />
+            <span>{props.notice ?? t("hikari::secret.notice")}</span>
+          </div>
+          <code class="s-secret-modal-value">{props.value}</code>
+          <div class="s-secret-modal-actions">
+            <button
+              type="button"
+              class="s-secret-modal-copy"
+              data-copied={copied.value || undefined}
+              onClick={() => void handleCopy()}
+              disabled={!props.value}
+            >
+              {copied.value ? <Check size={14} /> : <Copy size={14} />}
+              {copied.value ? t("hikari::secret.copied") : props.copyLabel ?? t("hikari::secret.copy")}
+            </button>
+          </div>
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkSelect.scss

@@ -9,10 +9,13 @@
 
 .hk-select-label {
   display: block;
-  font-size: var(--text-base);
-  font-weight: 500;
-  margin-bottom: var(--space-6);
-  color: rgb(var(--color-text));
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  margin-bottom: var(--space-4);
+  /* 72% keeps the caption hierarchy while surviving dark-theme tinted
+   * surfaces; override per-app with --hk-field-label-alpha. */
+  color: rgb(var(--color-text) / var(--hk-field-label-alpha, 72%));
 }
 
 .hk-select-required {
@@ -26,9 +29,9 @@
   width: 100%;
   padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
   min-height: 2.5rem;
-  background: rgb(var(--color-surface) / var(--opacity-half));
-  backdrop-filter: blur(var(--blur-sm));
-  border: 1px solid var(--border-input);
+  background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
+  
+  border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
   border-radius: var(--radius-md);
   font-family: inherit;
   font-size: var(--text-base);
@@ -87,20 +90,112 @@
   transform: rotate(180deg);
 }
 
-.hk-select-popout {
+/* Fixed positioning wrapper around the desktop popout (HkSelectPanel):
+ * carries the inline anchor coords + popup-manager z-index and is the
+ * track host for the overlay scrollbar (the popout teleports to body,
+ * whose box is no positioning context). Geometry-neutral: the popout
+ * shrink-wraps the host exactly as the popout shrink-wrapped itself
+ * when it was the fixed element. The 180px width floor lives HERE, not
+ * on the popout: matchAnchorWidth's inline `min-width` lands on the host,
+ * and a stylesheet floor on the CHILD would override that match for
+ * anchors narrower than 180px (the floor must lose to the inline style,
+ * which can only happen on the same element). */
+.hk-select-popout-host {
   position: fixed;
-  z-index: 1100;
   min-width: 180px;
-  max-height: 240px;
+
+  /* Pop motion family — the popout grows out of the anchor edge it sits
+   * on (data-side/data-align are set by HkSelectPanel from the RESOLVED
+   * placement, including after an auto-flip) and retracts back into it.
+   * Same tokens as HkPopover/HkTooltip so every anchored surface moves
+   * with one curve. */
+  &[data-side="bottom"] { transform-origin: top left; }
+  &[data-side="bottom"][data-align="end"] { transform-origin: top right; }
+  &[data-side="top"] { transform-origin: bottom left; }
+  &[data-side="top"][data-align="end"] { transform-origin: bottom right; }
+}
+
+.hk-select-popout-enter-active {
+  transition:
+    opacity var(--hk-pop-in-duration, 0.2s)
+      var(--hk-pop-in-opacity-ease, cubic-bezier(0.16, 1, 0.3, 1)),
+    transform var(--hk-pop-in-duration, 0.2s)
+      var(--hk-pop-in-transform-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+
+.hk-select-popout-leave-active {
+  transition:
+    opacity var(--hk-pop-out-duration, 0.15s)
+      var(--hk-pop-out-ease, cubic-bezier(0.4, 0, 1, 1)),
+    transform var(--hk-pop-out-duration, 0.15s)
+      var(--hk-pop-out-ease, cubic-bezier(0.4, 0, 1, 1));
+}
+
+.hk-select-popout-enter-from,
+.hk-select-popout-leave-to {
+  opacity: 0;
+}
+
+.hk-select-popout-host[data-side="bottom"] {
+  &.hk-select-popout-enter-from {
+    transform: translateY(calc(-1 * var(--hk-pop-offset, 4px)))
+      scale(var(--hk-pop-scale, 0.97));
+  }
+  &.hk-select-popout-leave-to {
+    transform: translateY(var(--hk-pop-offset, 4px))
+      scale(var(--hk-pop-scale, 0.97));
+  }
+}
+
+.hk-select-popout-host[data-side="top"] {
+  &.hk-select-popout-enter-from {
+    transform: translateY(var(--hk-pop-offset, 4px))
+      scale(var(--hk-pop-scale, 0.97));
+  }
+  &.hk-select-popout-leave-to {
+    transform: translateY(calc(-1 * var(--hk-pop-offset, 4px)))
+      scale(var(--hk-pop-scale, 0.97));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-select-popout-enter-active,
+  .hk-select-popout-leave-active {
+    transition: none;
+  }
+}
+
+.hk-select-popout {
+  /* Positioning lives on the host wrapper above — the popout is its
+   * static, box-filling child (width resolves from the host, whose
+   * floor/match rule is documented there). */
+  position: static;
+  /* Menu/switcher panels overflow a bare 240px cap even on tall viewports
+     (user feedback 2026-08-30: identity header + rows ≈ 320px+). Keep 240px
+     as the floor for select lists on short viewports, otherwise let the
+     panel size to its content up to a viewport-relative ceiling. */
+  max-height: max(240px, min(36rem, calc(100vh - 32px)));
+  max-height: max(240px, min(36rem, calc(100dvh - 32px)));
   display: flex;
   flex-direction: column;
-  padding: var(--space-4);
+  gap: var(--space-2);
+  /* 8px panel inset (was 4px): option hover blocks used to run almost
+     edge-to-edge, reading as a glued full-width strip on touch widths. */
+  padding: var(--space-8);
   border-radius: var(--radius-md);
   overflow-y: auto;
-  background: rgb(var(--color-surface) / var(--opacity-half));
+  background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   backdrop-filter: blur(var(--blur-md));
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-dropdown);
+
+  /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
+     always hidden, never styled. */
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .hk-select-option {
@@ -141,3 +236,159 @@
   font-size: var(--text-xs);
   color: rgb(var(--color-error));
 }
+
+// ------
+// Mobile bottom sheet (useBreakpoint().isMobile) — the popout docks to the
+// bottom edge: scrim (click closes) + grabber + label + touch-sized option
+// rows. Desktop popout above is untouched. Same visual contract as the
+// popover/modal mobile dockings.
+// ------
+.hk-select-sheet-scrim {
+  position: fixed;
+  inset: 0;
+  pointer-events: auto;
+  background: rgb(0 0 0 / 40%);
+}
+
+.hk-select-sheet-panel {
+  position: fixed;
+  left: 0;
+  right: 0;
+  /* Float off the bottom edge with the SAME host-tunable gap as the
+   * HkModal mobile docking (--hk-sheet-bottom-gap) — every bottom-up
+   * window reads as one sheet family; was glued to bottom: 0, which is
+   * exactly why dropdown sheets read as "not the standard modal". */
+  bottom: var(--hk-sheet-bottom-gap, 0.375rem);
+  display: flex;
+  flex-direction: column;
+  /* The panel height hugs its content (up to the cap below); the sheet
+   * morphs smoothly when content grows/shrinks — a language list gaining
+   * or losing rows, a select whose options filter. `height: auto` growth
+   * cannot fire a CSS transition, so HkSelectPanel's useSizeMorph pins
+   * the measured natural height as px (see useSizeMorph) and the
+   * transition below animates old→new px; `interpolate-size: allow-keywords`
+   * stays harmless for the enter/leave slide. */
+  interpolate-size: allow-keywords;
+  transition:
+    height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    max-height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  max-height: min(
+    72vh,
+    calc(
+      100vh - var(--hk-sheet-top-inset, 4.25rem) -
+        var(--hk-sheet-bottom-gap, 0.375rem)
+    )
+  );
+  background: rgb(var(--color-surface));
+  border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
+                 var(--hk-modal-radius, var(--hi-radius-lg, 12px))
+                 0 0;
+  box-shadow: 0 -8px 32px rgb(0 0 0 / 20%);
+  outline: none;
+}
+
+.hk-select-sheet-grabber {
+  flex-shrink: 0;
+  padding: 14px 0 20px;
+  margin: 0 auto;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+  &::before {
+    content: "";
+    width: 2.25rem;
+    height: 4px;
+    border-radius: 999px;
+    background: rgb(var(--color-border, 100 100 100) / 40%);
+  }
+}
+
+.hk-select-sheet-title {
+  flex-shrink: 0;
+  /* Left inset tracks the sheet ENTRIES' text edge, not their card
+   * edge: the list pads option blocks in by --space-16 and rows carry
+   * roughly another --space-16 of leading padding inside, so the old
+   * single --space-16 left the title hanging left of every row it
+   * named instead of reading as the list's heading. Hosts tune it via
+   * --hk-sheet-title-inset; the trailing inset stays --space-16. */
+  padding: 0 var(--space-16) var(--space-8)
+    var(--hk-sheet-title-inset, calc(var(--space-16) * 2));
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(var(--color-muted));
+}
+
+/* Track host for the sheet list's overlay scrollbar — owns the flex
+   slot in the sheet column so the rail hugs the LIST band, not the
+   grabber/title bands above it. */
+.hk-select-sheet-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.hk-select-sheet-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* Side insets so the option blocks (full-row hover pills) read as
+     cards inside the sheet instead of an edge-to-edge strip glued to
+     both screen sides — matching the popover family's breathing room.
+     Bottom padding stacks the home-bar safe-area inset ON TOP of the
+     base row gap, so the last row never hides behind the gesture bar
+     on notched phones (the modal footer adds a --hk-sheet-footer-gap
+     on top of this family baseline for its action buttons). */
+  padding-inline: var(--space-16);
+  padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
+
+  /* Overlay scrollbar (useOverlayScrollbar) — native chrome hidden. */
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hk-select-option {
+    padding: var(--space-14) var(--space-16);
+    font-size: var(--text-base);
+  }
+}
+
+/* Leading in-content heading hidden by the sheet duplicate-title
+ * filter (HkSelectPanel) — must beat any consumer display rule, like
+ * the UA [hidden] contract. */
+.hk-select-sheet-list .hk-sheet-dup-title {
+  display: none !important;
+}
+
+.hk-select-sheet-enter-active {
+  transition:
+    opacity 0.25s ease-out,
+    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-select-sheet-leave-active {
+  transition:
+    opacity 0.2s ease-in,
+    transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.hk-select-sheet-enter-from,
+.hk-select-sheet-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-select-sheet-enter-active,
+  .hk-select-sheet-leave-active,
+  .hk-select-sheet-panel {
+    transition: none;
+  }
+}

package/src/components/HkSelect.sheetdock.test.ts

@@ -0,0 +1,30 @@
+/**
+ * Source contract for the dropdown sheet docking (2026-08-30 user
+ * report: the localized input's language menu sheet "didn't look like
+ * it came from the standard modal"). The HkSelectPanel sheet — the
+ * shared surface under HkSelect / HkMenu / HkPopupSelect — must dock
+ * with the SAME host-tunable bottom gap and home-bar safe-area padding
+ * as the HkModal mobile docking, so every bottom-up window belongs to
+ * one visual family. It used to be glued to `bottom: 0`.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkSelect.scss"), "utf-8");
+
+describe("HkSelectPanel mobile sheet docking contract", () => {
+  it("floats the sheet on --hk-sheet-bottom-gap (not hard 0)", () => {
+    const block = src.match(/\.hk-select-sheet-panel\s*{[^}]*}/)?.[0] ?? "";
+    expect(block).toContain("bottom: var(--hk-sheet-bottom-gap");
+    // Same default as the HkModal sheet contract.
+    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0\.375rem/);
+  });
+
+  it("stacks the safe-area inset on the sheet list bottom padding", () => {
+    const block = src.match(/\.hk-select-sheet-list\s*{[^}]*}/)?.[0] ?? "";
+    expect(block).toContain("env(safe-area-inset-bottom");
+  });
+});

package/src/components/HkSelect.test.tsx

@@ -0,0 +1,88 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HSelect } from "../index";
+
+/**
+ * Mobile select contract: below the touch breakpoint the select renders
+ * as a bottom sheet (scrim + panel + grabber) instead of an anchored
+ * popout. The sheet's option list must carry side insets — full-row
+ * option pills used to glue to both screen edges and read as a broken
+ * edge-to-edge strip (the language picker popover keeps margins, which
+ * made the mismatch visible).
+ */
+
+const originalWidth = window.innerWidth;
+
+function setViewportWidth(px: number) {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: px,
+  });
+}
+
+async function mountSelect() {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const app = createApp({
+    render: () =>
+      h(HSelect, {
+        modelValue: "",
+        "onUpdate:modelValue": () => {},
+        options: [
+          { value: "a", label: "Option A" },
+          { value: "b", label: "Option B" },
+        ],
+      }),
+  });
+  app.mount(el);
+  await nextTick();
+  return { el, app };
+}
+
+describe("HSelect mobile sheet", () => {
+  afterEach(() => {
+    setViewportWidth(originalWidth);
+    document.body.innerHTML = "";
+  });
+
+  it("renders a bottom sheet with side-inset options on touch widths", async () => {
+    setViewportWidth(375);
+    const { app } = await mountSelect();
+    const trigger = document.querySelector<HTMLButtonElement>(".hk-select-trigger")!;
+    trigger.click();
+    await nextTick();
+
+    const panel = document.querySelector<HTMLElement>(".hk-select-sheet-panel");
+    expect(panel).not.toBeNull();
+    const scrim = document.querySelector(".hk-select-sheet-scrim");
+    expect(scrim).not.toBeNull();
+    // No anchored popout in sheet mode.
+    expect(document.querySelector(".hk-select-popout")).toBeNull();
+
+    // The list node must exist (side insets are enforced in SCSS —
+    // padding-inline on .hk-select-sheet-list — which happy-dom does not
+    // compute; the visual assertion lives in the stylesheet).
+    const list = document.querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(list).not.toBeNull();
+    const options = panel!.querySelectorAll(".hk-select-option");
+    expect(options.length).toBe(2);
+
+    app.unmount();
+  });
+
+  it("renders an anchored popout on desktop widths", async () => {
+    setViewportWidth(1280);
+    const { app } = await mountSelect();
+    const trigger = document.querySelector<HTMLButtonElement>(".hk-select-trigger")!;
+    trigger.click();
+    await nextTick();
+
+    expect(document.querySelector(".hk-select-sheet-panel")).toBeNull();
+    const popout = document.querySelector<HTMLElement>(".hk-select-popout");
+    expect(popout).not.toBeNull();
+
+    app.unmount();
+  });
+});