@celestia-island/hikari 0.55.114 → 0.55.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.114",
+  "version": "0.55.116",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAdminTablePage.tsx

@@ -50,8 +50,14 @@ export const HkAdminTablePage = defineComponent({
     rowKey: { type: String, default: "id" },
     emptyTitle: { type: String, default: "" },
     emptyDescription: { type: String as PropType<string | undefined>, default: undefined },
+    /** Left grip column with drag-to-reorder (forwarded to HTable; the
+     *  `reorder` event is forwarded verbatim — indices into `rows`). */
+    draggable: { type: Boolean, default: false },
   },
-  setup(props, { slots }) {
+  emits: {
+    reorder: (_fromIndex: number, _toIndex: number) => true,
+  },
+  setup(props, { emit, slots }) {
 
     return () => {
       const { t } = useI18n();
@@ -96,7 +102,13 @@ export const HkAdminTablePage = defineComponent({
             <div class="hk-admin-table-page-body">{slots.body()}</div>
           ) : (
             <HCard padded={false}>
-              <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>
+              <HTable
+                columns={props.columns}
+                rows={props.rows}
+                rowKey={props.rowKey}
+                draggable={props.draggable}
+                onReorder={(from: number, to: number) => emit("reorder", from, to)}
+              >
                 {slots}
               </HTable>
             </HCard>

package/src/components/HkBadge.scss

@@ -27,6 +27,11 @@
   color: var(--hk-badge-text);
   line-height: 1.4;
   white-space: nowrap;
+  /* Tags are labels, not prose: dragging across a row of pills must never
+     start a text selection (the workspace tag contract makes HkCopyBadge
+     the copy path instead). */
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 /* ---------- size ---------- */

package/src/components/HkCopyBadge.scss

@@ -0,0 +1,20 @@
+/*
+ * HkCopyBadge — the interactive tag face. The badge itself stays pure;
+ * this sheet only adds the interactivity contract: pointer cursor and a
+ * pressed/keyboard-focus affordance that keeps the HkBadge geometry.
+ * (Text selection is banned on every badge at the `.hk-badge` base —
+ * tags are labels, not prose.)
+ */
+
+.hk-badge.hk-copy-badge {
+  cursor: pointer;
+
+  &:active {
+    filter: brightness(0.92);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary) / 60%);
+    outline-offset: 1px;
+  }
+}

package/src/components/HkCopyBadge.test.tsx

@@ -0,0 +1,172 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, defineComponent } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkCopyBadge from "./HkCopyBadge";
+import { useToast } from "../runtime/useToast";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(renderNode: () => ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: renderNode });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  useToast().toasts.splice(0);
+});
+
+// `navigator.clipboard` does not exist under happy-dom — install a
+// controllable stub and restore whatever was there before.
+let writeText: ReturnType<typeof vi.fn>;
+const originalClipboard = navigator.clipboard;
+
+beforeEach(() => {
+  writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText },
+    configurable: true,
+  });
+});
+
+afterEach(() => {
+  Object.defineProperty(navigator, "clipboard", {
+    value: originalClipboard,
+    configurable: true,
+  });
+});
+
+describe("HkCopyBadge", () => {
+  it("renders a HkBadge inside the tooltip wrapper with button semantics", () => {
+    const c = mount(() => h(HkCopyBadge, { variant: "muted", mono: true }, () => "#d.132"));
+    // The badge keeps its HkBadge identity (variant class, mono flag)…
+    const badge = c.querySelector(".hk-badge");
+    expect(badge).not.toBeNull();
+    expect(badge!.classList.contains("hk-badge-muted")).toBe(true);
+    expect(badge!.hasAttribute("data-mono")).toBe(true);
+    expect(badge!.textContent).toBe("#d.132");
+    // …wrapped by the house tooltip, with button semantics on the badge.
+    expect(c.querySelector(".hk-tooltip-wrapper")).not.toBeNull();
+    expect(badge!.getAttribute("role")).toBe("button");
+    expect(badge!.getAttribute("tabindex")).toBe("0");
+    expect(badge!.classList.contains("hk-copy-badge")).toBe(true);
+  });
+
+  it("copies the rendered text on click and toasts the localized default", async () => {
+    const c = mount(() => h(HkCopyBadge, null, () => "#demiurge.132"));
+    (c.querySelector(".hk-badge") as HTMLElement).click();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(writeText).toHaveBeenCalledWith("#demiurge.132");
+    const success = useToast().toasts.find((t) => t.type === "success");
+    expect(success?.messages.some((m) => m.text === "Copied")).toBe(true);
+  });
+
+  it("prefers the value prop over the rendered label as the copy payload", async () => {
+    const c = mount(() =>
+      h(HkCopyBadge, { value: "demiurge.132" }, () => "#d.132"),
+    );
+    (c.querySelector(".hk-badge") as HTMLElement).click();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(writeText).toHaveBeenCalledWith("demiurge.132");
+    expect(writeText).not.toHaveBeenCalledWith("#d.132");
+  });
+
+  it("stops the click from reaching clickable ancestors", async () => {
+    const rowClick = vi.fn();
+    const Row = defineComponent({
+      setup() {
+        return () =>
+          h("div", { onClick: rowClick }, h(HkCopyBadge, null, () => "#d.132"));
+      },
+    });
+    const c = mount(() => h(Row));
+    (c.querySelector(".hk-badge") as HTMLElement).click();
+    await Promise.resolve();
+
+    expect(writeText).toHaveBeenCalled();
+    expect(rowClick).not.toHaveBeenCalled();
+  });
+
+  it("activates on Enter and Space but not other keys", async () => {
+    const c = mount(() => h(HkCopyBadge, null, () => "x"));
+    const badge = c.querySelector(".hk-badge") as HTMLElement;
+
+    badge.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await Promise.resolve();
+    badge.dispatchEvent(new KeyboardEvent("keydown", { key: " ", bubbles: true }));
+    await Promise.resolve();
+    expect(writeText).toHaveBeenCalledTimes(2);
+
+    badge.dispatchEvent(new KeyboardEvent("keydown", { key: "a", bubbles: true }));
+    await Promise.resolve();
+    expect(writeText).toHaveBeenCalledTimes(2);
+  });
+
+  it("swaps the click behavior when `action` is set", async () => {
+    const action = vi.fn();
+    const c = mount(() => h(HkCopyBadge, { action, tooltip: "Open details" }, () => "#d.132"));
+    (c.querySelector(".hk-badge") as HTMLElement).click();
+    await Promise.resolve();
+
+    expect(action).toHaveBeenCalledTimes(1);
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("renders the custom tooltip text", () => {
+    const c = mount(() => h(HkCopyBadge, { tooltip: "Open details" }, () => "#d.132"));
+    const content = c.parentElement!.querySelector(".hk-tooltip-popup .hk-tooltip-content");
+    expect(content?.textContent).toBe("Open details");
+  });
+
+  it("shows the localized click-to-copy tooltip by default", () => {
+    const c = mount(() => h(HkCopyBadge, null, () => "#d.132"));
+    const content = c.parentElement!.querySelector(".hk-tooltip-popup .hk-tooltip-content");
+    expect(content?.textContent).toBe("Click to copy");
+  });
+
+  it("renders the inert badge face when disabled", () => {
+    const c = mount(() => h(HkCopyBadge, { disabled: true }, () => "#d.132"));
+    const badge = c.querySelector(".hk-badge")!;
+    expect(badge.getAttribute("role")).toBeNull();
+    expect(badge.getAttribute("tabindex")).toBeNull();
+    expect(badge.classList.contains("hk-copy-badge")).toBe(false);
+    // No tooltip wrapper at all.
+    expect(c.querySelector(".hk-tooltip-wrapper")).toBeNull();
+  });
+
+  it("keeps the workspace tag contract: no badge text selection, ever", () => {
+    // Source contract on the HkBadge base sheet — every tag in every host
+    // inherits the no-selection rule, copyable or not.
+    const here = dirname(fileURLToPath(import.meta.url));
+    const scss = readFileSync(join(here, "HkBadge.scss"), "utf-8");
+    expect(scss).toMatch(/user-select:\s*none/);
+  });
+
+  it("lands consumer class on the badge element, not the tooltip wrapper", () => {
+    const c = mount(() => h(HkCopyBadge, { class: "s-kanban-card-tag" }, () => "#tag"));
+    const badge = c.querySelector(".hk-badge")!;
+    expect(badge.classList.contains("s-kanban-card-tag")).toBe(true);
+    expect(badge.classList.contains("hk-copy-badge")).toBe(true);
+    const wrapper = c.querySelector(".hk-tooltip-wrapper")!;
+    expect(wrapper.classList.contains("s-kanban-card-tag")).toBe(false);
+  });
+
+  it("keeps consumer class when disabled", () => {
+    const c = mount(() => h(HkCopyBadge, { disabled: true, class: "x-pill" }, () => "#tag"));
+    expect(c.querySelector(".hk-badge")!.classList.contains("x-pill")).toBe(true);
+  });
+});

package/src/components/HkCopyBadge.tsx

@@ -0,0 +1,140 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+
+import HBadge, { type BadgeVariant } from "./HkBadge";
+import HTooltip from "./HkTooltip";
+import { useI18n } from "../i18n/context";
+import { useClipboardWithToast } from "../runtime/useClipboard";
+import { useToast } from "../runtime/useToast";
+import "./HkCopyBadge.scss";
+
+/**
+ * HkCopyBadge — the house standard for interactive TAGS: a HkBadge that
+ * never selects text and instead copies on click.
+ *
+ * The workspace-wide tag contract (user direction 2026-10-05) is that a
+ * label pill is not prose: text selection is always off (that half lives
+ * on `.hk-badge` itself), hover shows a "click to copy" tooltip, and a
+ * click runs the shared clipboard-with-toast path so every host confirms
+ * with the same localized toast. Rendered content is the default copy
+ * payload; pass `value` when the meaningful string differs from the
+ * label (a `#short` display id backed by a longer id, say).
+ *
+ * `action` swaps the click behavior outright (open a panel, jump …).
+ * That is only legitimate when the tooltip no longer claims "copy" —
+ * pass `tooltip` alongside, or the component warns in dev. `disabled`
+ * drops the interactivity entirely (no tooltip, no pointer cursor, no
+ * button semantics) and renders the plain badge face.
+ *
+ * A11y: the tag is a real button (role, tab order, Enter/Space), and the
+ * click is stopped from reaching clickable ancestors — a tag inside a
+ * selectable row copies without selecting the row. Consumer attrs
+ * (class/style/data-*) land on the badge element itself, so a call site
+ * skinning the pill keeps working; the tooltip wrapper stays clean.
+ */
+export default defineComponent({
+  name: "HkCopyBadge",
+  inheritAttrs: false,
+  props: {
+    /** What a click copies. Default: the rendered text content. */
+    value: { type: String, default: undefined },
+    /** Tooltip text. Default: the localized "click to copy". */
+    tooltip: { type: String, default: undefined },
+    /** Swap the click behavior (must come with a custom `tooltip`). */
+    action: { type: Function as PropType<() => void>, default: undefined },
+    /** Render the inert badge face: no tooltip, no click, no cursor. */
+    disabled: { type: Boolean, default: false },
+    // ── HkBadge passthrough ──────────────────────────────────────────
+    variant: { type: String as PropType<BadgeVariant>, default: "default" },
+    dot: { type: Boolean, default: false },
+    size: { type: String as PropType<"sm" | "md">, default: "md" },
+    mono: { type: Boolean, default: false },
+    uppercase: { type: Boolean, default: false },
+    pill: { type: Boolean, default: true },
+    color: { type: String, default: undefined },
+    bgColor: { type: String, default: undefined },
+    borderColor: { type: String, default: undefined },
+  },
+  setup(props, { slots, attrs }) {
+    const { t } = useI18n();
+    const clipboard = useClipboardWithToast(useToast());
+
+    // The badge root: HkBadge renders a single span, so the instance's
+    // $el carries the rendered label — the default copy payload.
+    const badgeRef = ref<InstanceType<typeof HBadge> | null>(null);
+
+    const tooltipText = computed(() =>
+      props.tooltip ?? t("hikari::clipboard.clickToCopy", "Click to copy"),
+    );
+
+    if (import.meta.env?.DEV && props.action && !props.tooltip) {
+      console.warn(
+        "[HkCopyBadge] `action` replaces the copy behavior — pass `tooltip` " +
+        "so the hover hint stops claiming click-to-copy.",
+      );
+    }
+
+    function copyPayload(): string {
+      if (props.value !== undefined) return props.value;
+      const el = badgeRef.value?.$el as HTMLElement | undefined;
+      return el?.textContent?.trim() ?? "";
+    }
+
+    function activate() {
+      if (props.disabled) return;
+      if (props.action) {
+        props.action();
+        return;
+      }
+      const text = copyPayload();
+      if (!text) return;
+      void clipboard.copy(text);
+    }
+
+    return () => {
+      // Everything the call site put on HkCopyBadge belongs to the pill
+      // itself; only the interactive contract below is ours to add.
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+
+      const badge = (
+        <HBadge
+          ref={badgeRef}
+          {...restAttrs}
+          class={props.disabled ? attrClass : ["hk-copy-badge", attrClass]}
+          style={attrStyle}
+          variant={props.variant}
+          dot={props.dot}
+          size={props.size}
+          mono={props.mono}
+          uppercase={props.uppercase}
+          pill={props.pill}
+          color={props.color}
+          bgColor={props.bgColor}
+          borderColor={props.borderColor}
+          {...(props.disabled
+            ? {}
+            : {
+                role: "button",
+                tabindex: 0,
+                onClick: (e: MouseEvent) => {
+                  // A tag inside a clickable row/card copies itself
+                  // without triggering the row.
+                  e.stopPropagation();
+                  activate();
+                },
+                onKeydown: (e: KeyboardEvent) => {
+                  if (e.key !== "Enter" && e.key !== " ") return;
+                  e.preventDefault();
+                  e.stopPropagation();
+                  activate();
+                },
+              })}
+        >
+          {slots.default?.()}
+        </HBadge>
+      );
+
+      if (props.disabled) return badge;
+      return <HTooltip text={tooltipText.value}>{badge}</HTooltip>;
+    };
+  },
+});