@celestia-island/hikari 0.55.185 → 0.55.187

package/package.json

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

package/src/components/HkAdminTablePage.test.tsx

@@ -115,4 +115,27 @@ describe("HkAdminTablePage", () => {
     expect(c.querySelector(".hk-spinner-wrapper")).toBeTruthy();
     expect(c.querySelector("table")).toBeNull();
   });
+
+  it("manageable renders the ⋯ column and forwards manage(row, opener)", () => {
+    const got: Array<[Record<string, unknown>, HTMLElement]> = [];
+    const rows = [{ id: "r1", name: "alpha" }];
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "T",
+        rows,
+        columns: COLS,
+        rowKey: "id",
+        manageable: true,
+        onManage: (row: Record<string, unknown>, opener: HTMLElement) =>
+          got.push([row, opener]),
+      }),
+    );
+    expect(c.querySelectorAll("thead th")).toHaveLength(COLS.length + 1);
+    const btn = c.querySelector(".hk-table-manage-cell button") as HTMLButtonElement;
+    expect(btn).not.toBeNull();
+    btn.click();
+    expect(got).toHaveLength(1);
+    expect(got[0]![0]).toBe(rows[0]);
+    expect(got[0]![1]).toBe(btn);
+  });
 });

package/src/components/HkAdminTablePage.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, type Component, type PropType } from "vue";
 import { HAlert, HCard, HEmptyState, HSpinner, HTable, useI18n } from "@celestia-island/hikari";
 import { HkPageHeader } from "./HkPageHeader";
+import type { HkRowManageGate } from "./HkTable";
 
 
 /** Column definition passed through to HTable. */
@@ -10,6 +11,8 @@ export interface HTableColumn {
   width?: string;
   sortable?: boolean;
   align?: "left" | "center" | "right";
+  /** Opt one column out of the click-to-copy layer (see HkTable). */
+  copyable?: boolean;
 }
 
 /**
@@ -53,9 +56,18 @@ export const HkAdminTablePage = defineComponent({
     /** Left grip column with drag-to-reorder (forwarded to HTable; the
      *  `reorder` event is forwarded verbatim — indices into `rows`). */
     draggable: { type: Boolean, default: false },
+    /** Trailing row-actions column with the standard ⋯ trigger
+     *  (forwarded to HTable; see HkTable's `manageable` — pass a
+     *  HkRowManageGate to hide/disable the trigger per row). The
+     *  `manage` event is forwarded verbatim — (row, opener button). */
+    manageable: {
+      type: [Boolean, Function] as PropType<HkRowManageGate>,
+      default: false,
+    },
   },
   emits: {
     reorder: (_fromIndex: number, _toIndex: number) => true,
+    manage: (_row: Record<string, unknown>, _opener: HTMLElement) => true,
   },
   setup(props, { emit, slots }) {
 
@@ -107,7 +119,11 @@ export const HkAdminTablePage = defineComponent({
                 rows={props.rows}
                 rowKey={props.rowKey}
                 draggable={props.draggable}
+                manageable={props.manageable}
                 onReorder={(from: number, to: number) => emit("reorder", from, to)}
+                onManage={(row: Record<string, unknown>, opener: HTMLElement) =>
+                  emit("manage", row, opener)
+                }
               >
                 {slots}
               </HTable>

package/src/components/HkHeaderPicker.scss

@@ -9,7 +9,10 @@
   min-width: 0;
 }
 
-.hk-header-picker-trigger {
+/* Double-class on purpose: the ghost chrome must beat the base
+ * `.hk-select-trigger` field chrome regardless of stylesheet import
+ * order (both would otherwise sit at one class of specificity). */
+.hk-select-trigger.hk-header-picker-trigger {
   width: auto;
   /* Header-band compact: the button group beside it runs ~28px; the
    * trigger stays a touch taller for its label but must not drive the
@@ -20,6 +23,28 @@
   font-size: var(--text-sm);
   font-weight: 600;
   max-width: 16rem;
+  /* Ghost chrome (2026-10-18 user direction: the top-centre dropdown
+   * must read like the bottom-centre platform pill — no field border,
+   * hover tint only). Mirrors HkButton's ghost variant. */
+  background: transparent;
+  border-color: transparent;
+}
+
+.hk-select-trigger.hk-header-picker-trigger:hover:not([data-disabled]) {
+  background: var(--c-primary-light);
+  border-color: transparent;
+}
+
+.hk-select-trigger.hk-header-picker-trigger:active:not([data-disabled]) {
+  filter: brightness(0.95);
+}
+
+/* Keyboard / open ring survives — the ring rides the existing
+ * --shadow-focus; only the field border stays gone. */
+.hk-select-trigger.hk-header-picker-trigger:focus-visible,
+.hk-select-trigger.hk-header-picker-trigger[data-state="open"] {
+  background: var(--c-primary-light);
+  border-color: rgb(var(--color-focused-border));
 }
 
 .hk-header-picker-trigger .hk-select-value {

package/src/components/HkHeaderPicker.test.tsx

@@ -1,8 +1,13 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, ref } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import HkHeaderPicker, { type HkPickerOption } from "./HkHeaderPicker";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 /**
  * HkHeaderPicker — the header-centre selector (the button group's
  * sibling). These pins hold the standardized contract: trigger chrome,
@@ -122,13 +127,30 @@ describe("HkHeaderPicker", () => {
     expect(document.querySelectorAll('.hk-draggable-list-handle[data-hidden]').length).toBe(1);
   });
 
-  it("declares the placement prop with the top-down default (mirror-of-bottom contract)", () => {
+  it("declares the placement prop with the centered-down default (mirror-of-footer contract)", () => {
     // The panel is teleported to body, so the through-wiring is pinned at
     // the contract level: the prop exists, defaults to the header's
-    // downward growth, and the render passes it straight through
+    // downward growth CENTERED on the trigger (2026-10-18 user
+    // direction — the footer platform pill's symmetric pop, mirrored
+    // up top), and the render passes it straight through
     // (`placement={props.placement}` in HkHeaderPicker.tsx).
     expect(HkHeaderPicker.props!.placement).toBeDefined();
-    expect((HkHeaderPicker.props!.placement as { default: string }).default).toBe("bottom-start");
+    expect((HkHeaderPicker.props!.placement as { default: string }).default).toBe("bottom-center");
+  });
+
+  it("keeps the popout content-sized and the trigger chrome ghost", () => {
+    // 2026-10-18 user direction: the header-centre dropdown must read
+    // like the bottom-centre platform pill — no field border, hover
+    // tint only, and a compact centered menu (not a stretched field
+    // panel). Pinned at source level like the popout-width contract.
+    const tsx = readFileSync(join(here, "HkHeaderPicker.tsx"), "utf-8");
+    expect(tsx).toContain("matchAnchorWidth={false}");
+    const scss = readFileSync(join(here, "HkHeaderPicker.scss"), "utf-8");
+    // The ghost override must be double-classed to beat the base
+    // `.hk-select-trigger` chrome regardless of import order.
+    expect(scss).toContain(".hk-select-trigger.hk-header-picker-trigger");
+    expect(scss).toContain("border-color: transparent;");
+    expect(scss).toContain("background: var(--c-primary-light);");
   });
 
   it("disables the trigger when disabled", () => {

package/src/components/HkHeaderPicker.tsx

@@ -75,10 +75,15 @@ export default defineComponent({
     /** Desktop-popout side relative to the trigger. The header sits at
      *  the viewport's top, so the popout grows DOWNWARD (bottom-*) —
      *  the mirror of bottom-pinned pickers; auto-flip still rescues a
-     *  viewport that cannot fit it. */
+     *  viewport that cannot fit it. CENTERED on the trigger by default
+     *  (2026-10-18 user direction): the header pill mirrors the
+     *  footer's platform pill, whose menu pops symmetrically on the
+     *  trigger's midpoint — a start-anchored menu reads lopsided off a
+     *  narrow pill. Callers with edge-pinned triggers may still pin a
+     *  side explicitly. */
     placement: {
       type: String as PropType<SelectPanelPlacement>,
-      default: "bottom-start",
+      default: "bottom-center",
     },
     /** Accessible name of the trigger itself. */
     ariaLabel: { type: String, default: undefined },
@@ -302,6 +307,10 @@ export default defineComponent({
           title={props.panelTitle ?? ""}
           placement={props.placement}
           offset={4}
+          // The popout hugs its rows (not the trigger's width): the
+          // header pill is narrow, and the mirror-of-the-footer look
+          // means a compact centered menu, not a stretched field panel.
+          matchAnchorWidth={false}
           sheetOnMobile
           onKeydown={onPopoutKeydown}
         >

package/src/components/HkRowActions.test.tsx

@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h } from "vue";
+
+import HkRowActions from "./HkRowActions";
+import type { HkMenuItem } from "./HkMenu";
+
+/**
+ * HkRowActions contract (2026-10-18 row-actions standard):
+ * - trigger mode: one ghost kebab button, localized default label, and
+ *   a click emits `open` with the trigger itself as the opener element
+ *   (the focus-restore anchor a row manage window reuses)
+ * - menu mode (`items`): the trigger hosts an HkMenu popup —
+ *   aria-haspopup/expanded flip, `open` never fires, `select` fires
+ * - the click never reaches clickable ancestors
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.querySelectorAll(".hk-select-panel").forEach((n) => n.remove());
+});
+
+describe("HkRowActions", () => {
+  it("trigger mode: click emits open with the trigger button as opener", async () => {
+    const opened: HTMLElement[] = [];
+    const c = mount(h(HkRowActions, { onOpen: (el: HTMLElement) => opened.push(el) }));
+    const btn = c.querySelector("button.hk-icon-button") as HTMLButtonElement;
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute("aria-label")).toBe("Row actions");
+    btn.click();
+    await Promise.resolve();
+    expect(opened).toHaveLength(1);
+    expect(opened[0]).toBe(btn);
+  });
+
+  it("menu mode: aria announces the popup, open never fires", async () => {
+    const onOpen = vi.fn();
+    const items: HkMenuItem[] = [
+      { key: "edit", label: "Edit" },
+      { key: "delete", label: "Delete", danger: true },
+    ];
+    const c = mount(h(HkRowActions, { items, onOpen }));
+    const btn = c.querySelector("button.hk-icon-button") as HTMLButtonElement;
+    expect(btn.getAttribute("aria-haspopup")).toBe("menu");
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+    btn.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(btn.getAttribute("aria-expanded")).toBe("true");
+    // A second press toggles the menu shut (the hand-rolled kebab+menu
+    // pairs this component replaces closed on re-click).
+    btn.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("stops the click from reaching clickable ancestors", () => {
+    const outer = vi.fn();
+    const c = mount(
+      h("div", { onClick: outer }, h(HkRowActions)),
+    );
+    (c.querySelector("button.hk-icon-button") as HTMLButtonElement).click();
+    expect(outer).not.toHaveBeenCalled();
+  });
+
+  it("custom label overrides the localized default", () => {
+    const c = mount(h(HkRowActions, { label: "Manage row" }));
+    const btn = c.querySelector("button.hk-icon-button") as HTMLButtonElement;
+    expect(btn.getAttribute("aria-label")).toBe("Manage row");
+  });
+});

package/src/components/HkRowActions.tsx

@@ -0,0 +1,128 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { MoreHorizontal } from "lucide-vue-next";
+
+import { useI18n } from "../i18n/context";
+import HkIconButton from "./HkIconButton";
+import HkMenu, { type HkMenuItem } from "./HkMenu";
+
+/**
+ * HkRowActions — the house standard for the rightmost ⋯ trigger on a
+ * data row (2026-10-18 user direction: call sites stop hand-rolling an
+ * HkIconButton + MoreHorizontal in every view).
+ *
+ * Two modes, one component:
+ * - Trigger mode (default): a ghost kebab button that emits `open` with
+ *   ITSELF as the opener element — the anchor a row manage window
+ *   (chest's useRowManageWindow pattern) restores focus to on close.
+ *   The consumer decides what opens; this component only standardizes
+ *   the affordance (glyph, size step, aria label, click isolation).
+ * - Menu mode (`items`): the same button hosts an HkMenu popup
+ *   (desktop popout / mobile sheet via the shared HkSelectPanel
+ *   surface) and emits `select(item)`; the menu closes on selection.
+ *
+ * The click is stopped from reaching ancestors — a trigger inside a
+ * clickable cell opens only itself, exactly like HkCopyBadge's tag
+ * contract, and HkTable's cell copy layer additionally ignores presses
+ * that land on interactive controls.
+ */
+export default defineComponent({
+  name: "HkRowActions",
+  props: {
+    /** Accessible name / tooltip for the trigger. Defaults to the
+     *  localized "Row actions" (hikari::table.rowActions). */
+    label: { type: String, default: undefined },
+    /** Button size step (HkIconButton's ladder). 28 is the roster step
+     *  the row manage pattern standardized on (2026-10-12 ruling). */
+    size: {
+      type: Number as PropType<16 | 24 | 28 | 32 | 36 | 40>,
+      default: 28,
+    },
+    disabled: { type: Boolean, default: false },
+    /** Menu mode: data-driven HkMenu items. Providing items swaps the
+     *  click behavior from `open` to hosting the popup. */
+    items: { type: Array as PropType<HkMenuItem[]>, default: undefined },
+    /** Desktop popout placement (menu mode). Rows sit at the table's
+     *  trailing edge, so bottom-end keeps the panel on the screen. */
+    placement: {
+      type: String as PropType<
+        "bottom-start" | "bottom-end" | "top-start" | "top-end" | "right-start" | "left-start"
+      >,
+      default: "bottom-end",
+    },
+  },
+  emits: {
+    /** Trigger mode: the opener element (this button) for focus-restore
+     *  anchoring. */
+    open: (_opener: HTMLElement) => true,
+    /** Menu mode: the chosen item; the popup closes itself first. */
+    select: (_item: HkMenuItem) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const open = ref(false);
+    const triggerRef = ref<InstanceType<typeof HkIconButton> | null>(null);
+
+    const label = computed(
+      () => props.label ?? t("hikari::table.rowActions", "Row actions"),
+    );
+
+    /** The trigger's real <button> (HkIconButton renders a single
+     *  button root, so the instance's $el is the element). */
+    function openerEl(): HTMLElement | null {
+      const el = triggerRef.value?.$el as HTMLElement | undefined;
+      return el && el.nodeType === 1 ? el : null;
+    }
+
+    function onTrigger(e: MouseEvent) {
+      // A row-action press never reaches the surrounding cell or row
+      // handlers — the trigger owns its click outright.
+      e.stopPropagation();
+      if (props.disabled) return;
+      if (props.items) {
+        // A second press on the ⋯ toggles the menu shut — the hand-rolled
+        // kebab+menu pairs this component replaces closed on re-click
+        // (rowMenu.toggle), and that habit carries over. The anchor hit
+        // containment in HkSelectPanel would otherwise swallow the press.
+        open.value = !open.value;
+        return;
+      }
+      emit("open", openerEl() ?? (e.currentTarget as HTMLElement));
+    }
+
+    function onSelect(item: HkMenuItem) {
+      open.value = false;
+      emit("select", item);
+    }
+
+    return () => (
+      <>
+        <HkIconButton
+          ref={triggerRef}
+          variant="ghost"
+          size={props.size}
+          disabled={props.disabled}
+          aria-label={label.value}
+          aria-haspopup={props.items ? "menu" : undefined}
+          aria-expanded={props.items ? open.value : undefined}
+          onClick={onTrigger}
+        >
+          <MoreHorizontal size={props.size >= 32 ? 16 : 14} />
+        </HkIconButton>
+        {props.items && (
+          <HkMenu
+            variant="popup"
+            items={props.items}
+            open={open.value}
+            anchorRef={openerEl()}
+            placement={props.placement}
+            title={label.value}
+            onUpdate:open={(v: boolean) => {
+              open.value = v;
+            }}
+            onSelect={onSelect}
+          />
+        )}
+      </>
+    );
+  },
+});

package/src/components/HkTable.interactions.test.tsx

@@ -0,0 +1,307 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HTable from "./HkTable";
+import { useToast } from "../runtime/useToast";
+
+/**
+ * HkTable interaction contract (2026-10-18 user direction, on top of the
+ * 2026-10-05 tag contract and the 2026-10-12 row-manage ruling):
+ * - plain text in a cell copies on click through the shared
+ *   clipboard-with-toast path (same runtime as HkCopyBadge) — no bare
+ *   selection, no drag mass-select (user-select: none, scoped by
+ *   `data-copy-cells`)
+ * - interactive descendants (controls, button-role elements, popup
+ *   owners, `[data-no-copy]`) own their clicks; the copy layer never
+ *   swallows them
+ * - only TEXT LEAVES copy — layout wrappers and cell padding never
+ *   sweep up descendant text, and per the 2026-10-18 ruling a cell
+ *   body click does NOT open row actions (the ⋯ trigger stays the only
+ *   row-action affordance)
+ * - `Column.copyable: false` and the table-wide `copy-cells=false` opt
+ *   out wholesale
+ * - `manageable` renders the trailing ⋯ column (HkRowActions) and
+ *   emits `manage(row, opener)`; the trigger click never copies
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  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 (house pattern: HkCopyBadge.test.tsx).
+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,
+  });
+});
+
+const COLS = [
+  { key: "name", title: "Name" },
+  { key: "endpoint", title: "Endpoint" },
+];
+
+async function settle() {
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+function bodyCells(c: HTMLElement): HTMLElement[] {
+  return Array.from(c.querySelectorAll<HTMLElement>("tbody .hk-table-cell"));
+}
+
+describe("HkTable cell copy layer", () => {
+  it("clicking a default text cell copies its text and toasts success", async () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "https://x.example" }] }),
+    );
+    bodyCells(c)[0]!.click();
+    await settle();
+    expect(writeText).toHaveBeenCalledWith("alpha");
+    const success = useToast().toasts.find((t) => t.type === "success");
+    expect(success?.messages.some((m) => m.text === "Copied")).toBe(true);
+  });
+
+  it("a slot cell's plain text leaf copies that leaf, not the whole cell", async () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "" }] }, {
+        "cell-endpoint": () =>
+          h("div", { class: "probe-endpoint" }, [
+            h("span", { class: "probe-url" }, "https://a.example"),
+            h("span", { class: "probe-via" }, "via gw-1"),
+          ]),
+      }),
+    );
+    (c.querySelector(".probe-url") as HTMLElement).click();
+    await settle();
+    expect(writeText).toHaveBeenCalledWith("https://a.example");
+    expect(writeText).not.toHaveBeenCalledWith("https://a.examplevia gw-1");
+  });
+
+  it("interactive descendants own their clicks — no copy, no toast", async () => {
+    const onToggle = vi.fn();
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "" }] }, {
+        "cell-endpoint": () =>
+          h("div", null, [
+            h("span", { role: "button", onClick: onToggle }, "toggle-me"),
+            h("span", { class: "probe-rest" }, "plain"),
+          ]),
+      }),
+    );
+    const toggle = Array.from(c.querySelectorAll<HTMLElement>('[role="button"]'))[0]!;
+    toggle.click();
+    await settle();
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("a data-no-copy marker opts its subtree out of the copy layer", async () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "" }] }, {
+        "cell-endpoint": () =>
+          h("div", { "data-no-copy": "" }, h("span", { class: "probe-nope" }, "do-not-copy")),
+      }),
+    );
+    (c.querySelector(".probe-nope") as HTMLElement).click();
+    await settle();
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("clicking a layout wrapper (gaps between chips) copies nothing", async () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "" }] }, {
+        "cell-endpoint": () =>
+          h("div", { class: "probe-composite" }, [
+            h("span", null, "one"),
+            h("span", null, "two"),
+          ]),
+      }),
+    );
+    (c.querySelector(".probe-composite") as HTMLElement).click();
+    await settle();
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("cell padding around slot content does nothing (body clicks never open row actions)", async () => {
+    const onManage = vi.fn();
+    const c = mount(
+      h(HTable, {
+        columns: COLS,
+        rows: [{ name: "alpha", endpoint: "" }],
+        manageable: true,
+        onManage,
+      }, {
+        "cell-endpoint": () => h("div", { class: "probe-slot" }, "slot-text"),
+      }),
+    );
+    const endpointTd = Array.from(c.querySelectorAll<HTMLElement>("tbody td")).find(
+      (td) => td.querySelector(".probe-slot"),
+    )!;
+    endpointTd.click();
+    await settle();
+    expect(writeText).not.toHaveBeenCalled();
+    expect(onManage).not.toHaveBeenCalled();
+  });
+
+  it("column copyable:false opts that column out", async () => {
+    const c = mount(
+      h(HTable, {
+        columns: [...COLS, { key: "secret", title: "Secret", copyable: false }],
+        rows: [{ name: "alpha", endpoint: "", secret: "nope-token" }],
+      }),
+    );
+    const tds = bodyCells(c);
+    tds[0]!.click();
+    await settle();
+    expect(writeText).toHaveBeenCalledTimes(1);
+    tds[2]!.click();
+    await settle();
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(writeText).not.toHaveBeenCalledWith("nope-token");
+  });
+
+  it("copy-cells=false disables the layer and the scoping attribute", async () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "" }], copyCells: false }),
+    );
+    expect(c.querySelector("table.hk-table")!.hasAttribute("data-copy-cells")).toBe(false);
+    bodyCells(c)[0]!.click();
+    await settle();
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("default-rendered copyable cells advertise the click-to-copy hint", () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "https://x.example" }] }),
+    );
+    const td = bodyCells(c)[0]!;
+    expect(td.getAttribute("title")).toBe("Click to copy");
+  });
+});
+
+describe("HkTable manageable column", () => {
+  it("renders the trailing ⋯ column and emits manage(row, opener)", async () => {
+    const rows = [
+      { name: "alpha", endpoint: "" },
+      { name: "beta", endpoint: "" },
+    ];
+    const emitted: Array<[Record<string, unknown>, HTMLElement]> = [];
+    const c = mount(
+      h(HTable, {
+        columns: COLS,
+        rows,
+        rowKey: "name",
+        manageable: true,
+        onManage: (row: Record<string, unknown>, opener: HTMLElement) =>
+          emitted.push([row, opener]),
+      }),
+    );
+    // Header gained one trailing column; every row carries the trigger.
+    expect(c.querySelectorAll("thead th")).toHaveLength(COLS.length + 1);
+    const triggers = Array.from(
+      c.querySelectorAll<HTMLElement>(".hk-table-manage-cell button"),
+    );
+    expect(triggers).toHaveLength(2);
+    expect(triggers[0]!.getAttribute("aria-label")).toBe("Row actions");
+    triggers[0]!.click();
+    await settle();
+    expect(emitted).toHaveLength(1);
+    expect(emitted[0]![0]).toBe(rows[0]);
+    expect(emitted[0]![1]).toBe(triggers[0]);
+    // The trigger press never leaks into the copy layer.
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it("manageable=false (default) renders no actions column", () => {
+    const c = mount(h(HTable, { columns: COLS, rows: [{ name: "a", endpoint: "" }] }));
+    expect(c.querySelector(".hk-table-manage-cell")).toBeNull();
+    expect(c.querySelectorAll("thead th")).toHaveLength(COLS.length);
+  });
+
+  it("manage gate: rows hide the trigger or render it disabled", async () => {
+    const rows = [
+      { name: "alpha", endpoint: "", state: "on" },
+      { name: "beta", endpoint: "", state: "no-perm" },
+      { name: "gamma", endpoint: "", state: "readonly" },
+    ];
+    const emitted: Array<[Record<string, unknown>, HTMLElement]> = [];
+    const c = mount(
+      h(HTable, {
+        columns: COLS,
+        rows,
+        rowKey: "name",
+        manageable: (row: Record<string, unknown>) =>
+          row.state === "readonly" ? "disabled" : row.state === "on",
+        onManage: (row: Record<string, unknown>, opener: HTMLElement) =>
+          emitted.push([row, opener]),
+      }),
+    );
+    const cells = Array.from(c.querySelectorAll<HTMLElement>(".hk-table-manage-cell"));
+    expect(cells).toHaveLength(3);
+    // A gated-off row renders an EMPTY cell — no ⋯ at all, not a dead
+    // button (roster convention: permission gates hide the affordance).
+    expect(cells[1]!.querySelector("button")).toBeNull();
+    // A read-only row keeps the affordance but refuses activation.
+    const readonlyBtn = cells[2]!.querySelector("button") as HTMLButtonElement;
+    expect(readonlyBtn.disabled).toBe(true);
+    readonlyBtn.click();
+    await settle();
+    expect(emitted).toHaveLength(0);
+    // The on row runs the normal path.
+    const onBtn = cells[0]!.querySelector("button") as HTMLButtonElement;
+    onBtn.click();
+    await settle();
+    expect(emitted).toHaveLength(1);
+    expect(emitted[0]![0]).toBe(rows[0]);
+  });
+});
+
+describe("HkTable interaction stylesheet", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const scss = readFileSync(join(here, "HkTable.scss"), "utf-8");
+
+  it("scopes the selection kill + copy cursor under data-copy-cells", () => {
+    expect(scss).toContain(".hk-table[data-copy-cells]");
+    const block = scss.slice(scss.indexOf(".hk-table[data-copy-cells]"));
+    expect(block).toContain("user-select: none");
+    expect(block).toContain("-webkit-user-select: none");
+    expect(block).toContain("cursor: copy");
+  });
+
+  it("the manage cell is a control track, not a copy surface", () => {
+    const block = scss.slice(scss.indexOf(".hk-table[data-copy-cells]"));
+    expect(block).toContain(".hk-table-manage-cell");
+    expect(block.indexOf("cursor: default")).toBeGreaterThan(-1);
+  });
+});

package/src/components/HkTable.scss

@@ -399,3 +399,31 @@
     transition: none;
   }
 }
+
+/* ── Table interaction contract (2026-10-18 user direction) ───────────
+   Table content is not prose. While the copy layer is enabled
+   (`copy-cells`, the default), body cells kill drag mass-selection
+   (user-select: none) and advertise the click-to-copy affordance with
+   the `copy` cursor — text clicks run the shared clipboard-with-toast
+   path (HkTable.tsx). Both halves scope under `data-copy-cells`, so a
+   consumer that opts out gets plain selectable text back wholesale. */
+.hk-table[data-copy-cells] {
+  .hk-table-cell {
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: copy;
+  }
+
+  /* The row-actions column is a control, not text — no copy cursor. */
+  .hk-table-manage-cell {
+    cursor: default;
+  }
+}
+
+/* The standard trailing row-actions column (HkRowActions trigger):
+   fixed narrow track, centered, never wrapping. */
+.hk-table-manage-cell {
+  width: 36px;
+  text-align: center;
+  white-space: nowrap;
+}

package/src/components/HkTable.tsx

@@ -7,6 +7,9 @@ import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composa
 import { onceFrame } from "../runtime/animationBus";
 import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
 import { ancestorZoom } from "../runtime/cssZoom";
+import { useClipboardWithToast } from "../runtime/useClipboard";
+import { useToast } from "../runtime/useToast";
+import HkRowActions from "./HkRowActions";
 import "./HkTable.scss";
 
 interface Column {
@@ -15,8 +18,31 @@ interface Column {
   width?: string;
   sortable?: boolean;
   align?: "left" | "center" | "right";
+  /** 2026-10-18 table-interaction contract: cells are not prose — a
+   *  click on a cell's plain text copies it (shared clipboard-with-toast
+   *  path). Set `copyable: false` to opt one column out (controls-only
+   *  columns, editable previews); the copy click layer never fires
+   *  there. Default true. */
+  copyable?: boolean;
 }
 
+/** Per-row gate for the manage column: `true` renders the trigger;
+ *  `false` renders an empty cell (permission gates, rows without
+ *  actions — the roster convention is no ⋯ at all, not a dead button);
+ *  `"disabled"` keeps the affordance but refuses activation (read-only
+ *  rows that must still show where actions would live). */
+export type HkRowManageGate =
+  | boolean
+  | ((row: Record<string, unknown>) => boolean | "disabled");
+
+/** Elements whose clicks mean their own action — the cell copy layer
+ *  must never swallow them. Matches the HkCopyBadge interactive guard:
+ *  real controls, button-role elements, popup owners, and the explicit
+ *  `[data-no-copy]` escape hatch for slot content that wants its own
+ *  click semantics without becoming a control. */
+const INTERACTIVE_SELECTOR =
+  'button, a, input, select, textarea, label, [role="button"], [aria-haspopup], [data-no-copy]';
+
 /** Duration of every drag motion this component paints: the arrangement
  *  shift (placeholder onto the resolved slot, neighbours gliding across)
  *  and the ghost's settle fade on release. One number so the transition
@@ -44,11 +70,34 @@ export default defineComponent({
      *  faithfully encode the visual move: reordering is INERT until the
      *  sort is cleared (the handles render dimmed and refuse presses). */
     draggable: { type: Boolean, default: false },
+    /** 2026-10-18 table-interaction contract: table content is not
+     *  prose. When on (the default for every roster/admin table), plain
+     *  text in a cell copies on click through the shared
+     *  clipboard-with-toast path, drag mass-selection is dead
+     *  (user-select: none, scoped by `data-copy-cells`), and per-column
+     *  opt-out rides `Column.copyable`. Turn off only for exotic embeds
+     *  that genuinely need selectable text. */
+    copyCells: { type: Boolean, default: true },
+    /** Render the trailing row-actions column (HkRowActions trigger).
+     *  This is the 2026-10-12 row-manage ruling's ⋯ button, promoted
+     *  into the table so call sites stop hand-rolling it: enable the
+     *  column, handle `manage`, done. The button — not cell bodies —
+     *  remains the ONLY row-action affordance (2026-10-18 ruling).
+     *  Pass a gate function (HkRowManageGate) to hide the trigger per
+     *  row (no permission, no actions for that row) or render it
+     *  disabled (read-only rows that keep the affordance). */
+    manageable: {
+      type: [Boolean, Function] as PropType<HkRowManageGate>,
+      default: false,
+    },
     emptyText: { type: String, default: "" },
   },
   emits: {
     "update:selectedRows": (_rows: Record<string, unknown>[]) => true,
     reorder: (_fromIndex: number, _toIndex: number) => true,
+    /** `manageable`: the row's ⋯ trigger was pressed. The opener is the
+     *  trigger button (focus-restore anchor for a manage window). */
+    manage: (_row: Record<string, unknown>, _opener: HTMLElement) => true,
   },
   setup(props, { emit, slots }) {
     const { t } = useI18n();
@@ -56,6 +105,74 @@ export default defineComponent({
     const sortDirection = ref<"asc" | "desc">("asc");
     const selectedRowKeys = ref<Set<string>>(new Set());
 
+    // The cell copy layer shares the house clipboard-with-toast path
+    // (same runtime HkCopyBadge uses), so the confirmation toast —
+    // top-right band, localized defaults — is identical everywhere.
+    const clipboard = useClipboardWithToast(useToast());
+    const copyHint = computed(() => t("hikari::clipboard.clickToCopy", "Click to copy"));
+
+    /** Copy the text of a TEXT LEAF — an element with no element
+     *  children. Layout wrappers (rows of chips, badges beside prose)
+     *  never become a copy payload: a click there copies nothing rather
+     *  than sweeping up every descendant's text into one string. */
+    function copyLeafText(el: HTMLElement): void {
+      if (el.firstElementChild) return;
+      const text = (el.textContent ?? "").trim();
+      if (text) void clipboard.copy(text);
+    }
+
+    /** The td's copy click layer. Partition, in order:
+     *  1. Interactive descendants own their clicks outright (toggles,
+     *     badges, the ⋯ trigger) — return.
+     *  2. A click on the td itself is a text click ONLY when the cell
+     *     is pure text (no element children); a click on the padding
+     *     AROUND slot content does nothing — per the 2026-10-18 ruling,
+     *     cell bodies do NOT open row actions.
+     *  3. Otherwise the target must be a text leaf; layout containers
+     *     (gaps between chips) do nothing. */
+    function onCellClick(e: MouseEvent, col: Column, cellEl: HTMLElement): void {
+      if (!props.copyCells || col.copyable === false) return;
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      if (target !== cellEl) {
+        if (target.closest(INTERACTIVE_SELECTOR)) return;
+        copyLeafText(target);
+        return;
+      }
+      if (cellEl.firstElementChild) return;
+      copyLeafText(cellEl);
+    }
+
+    /** Resolve the row's manage mode from the gate: the column renders
+     *  whenever `manageable` is set, but the TRIGGER obeys the per-row
+     *  verdict — off (empty cell, roster convention: no permission, no
+     *  ⋯), disabled (read-only rows keep the affordance), or on. */
+    function rowManageMode(row: Record<string, unknown>): "off" | "disabled" | "on" {
+      const gate = props.manageable;
+      if (!gate) return "off";
+      if (typeof gate === "function") {
+        const verdict = gate(row);
+        if (verdict === "disabled") return "disabled";
+        return verdict ? "on" : "off";
+      }
+      return "on";
+    }
+
+    function renderManageCell(row: Record<string, unknown>) {
+      const mode = rowManageMode(row);
+      return (
+        <td class="hk-table-cell hk-table-manage-cell">
+          {mode !== "off" ? (
+            <HkRowActions
+              size={28}
+              disabled={mode === "disabled"}
+              onOpen={(opener: HTMLElement) => emit("manage", row, opener)}
+            />
+          ) : null}
+        </td>
+      );
+    }
+
     // Wide tables scroll horizontally in the wrapper — attach the shared
     // overlay scrollbar (horizontal track) once on mount.
     const wrapperRef = ref<HTMLElement>();
@@ -587,14 +704,22 @@ export default defineComponent({
     }));
 
     const totalCols = computed(
-      () => props.columns.length + (props.selectable ? 1 : 0) + (props.draggable ? 1 : 0)
+      () =>
+        props.columns.length +
+        (props.selectable ? 1 : 0) +
+        (props.draggable ? 1 : 0) +
+        (props.manageable ? 1 : 0)
     );
 
     return () => {
       return (
       <div ref={wrapperHostRef} class="hk-table-host">
         <div ref={wrapperRef} class="hk-table-wrapper">
-        <table class={tableCls.value} {...dragScope.value}>
+        <table
+          class={tableCls.value}
+          {...dragScope.value}
+          data-copy-cells={props.copyCells ? "" : undefined}
+        >
           {props.caption && <caption class="hk-table-sr-only">{props.caption}</caption>}
           <thead>
             <tr class="hk-table-header-row">
@@ -668,6 +793,11 @@ export default defineComponent({
                   </th>
                 );
               })}
+              {props.manageable && (
+                <th class="hk-table-header-cell hk-table-manage-head" style={{ width: "36px" }}>
+                  <span class="hk-table-sr-only">{t("hikari::table.rowActions", "Row actions")}</span>
+                </th>
+              )}
             </tr>
           </thead>
           <tbody class="hk-table-body">
@@ -761,16 +891,32 @@ export default defineComponent({
                         </label>
                       </td>
                     )}
-                    {props.columns.map((col) => (
-                      <td
-                        key={col.key}
-                        class={["hk-table-cell", col.align ? `hk-text-${col.align}` : ""]}
-                      >
-                        {slots[`cell-${col.key}`]
-                          ? slots[`cell-${col.key}`]!({ row, value: row[col.key], index })
-                          : row[col.key]}
-                      </td>
-                    ))}
+                    {props.columns.map((col) => {
+                      const isSlotCell = Boolean(slots[`cell-${col.key}`]);
+                      const cellCopyable =
+                        props.copyCells && col.copyable !== false;
+                      return (
+                        <td
+                          key={col.key}
+                          class={["hk-table-cell", col.align ? `hk-text-${col.align}` : ""]}
+                          // The hover affordance rides only on
+                          // default-rendered text cells — slot cells own
+                          // their hints (HkCopyBadge carries the house
+                          // tooltip already).
+                          title={
+                            cellCopyable && !isSlotCell ? copyHint.value : undefined
+                          }
+                          onClick={(e: MouseEvent) =>
+                            onCellClick(e, col, e.currentTarget as HTMLElement)
+                          }
+                        >
+                          {isSlotCell
+                            ? slots[`cell-${col.key}`]!({ row, value: row[col.key], index })
+                            : row[col.key]}
+                        </td>
+                      );
+                    })}
+                    {props.manageable && renderManageCell(row)}
                   </tr>
                 );
               })

package/src/i18n/locales/ar/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " مللي ثانية",
     "hikari::table.noData": "لا توجد بيانات",
+    "hikari::table.rowActions": "إجراءات الصف",
     "hikari::table.dragHandle": "اسحب لإعادة الترتيب",
     "hikari::table.dragHandleRow": "إعادة ترتيب {label}",
     "hikari::tablePage.emptyTitle": "لا توجد بيانات",

package/src/i18n/locales/de/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " ms",
     "hikari::table.noData": "Keine Daten",
+    "hikari::table.rowActions": "Zeilenaktionen",
     "hikari::table.dragHandle": "Zum Neuanordnen ziehen",
     "hikari::table.dragHandleRow": "„{label}“ neu anordnen",
     "hikari::tablePage.emptyTitle": "Keine Daten",

package/src/i18n/locales/en/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " ms",
     "hikari::table.noData": "No data",
+    "hikari::table.rowActions": "Row actions",
     "hikari::table.dragHandle": "Drag to reorder",
     "hikari::table.dragHandleRow": "Reorder {label}",
     "hikari::tablePage.emptyTitle": "No data",

package/src/i18n/locales/es/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " ms",
     "hikari::table.noData": "Sin datos",
+    "hikari::table.rowActions": "Acciones de fila",
     "hikari::table.dragHandle": "Arrastra para reordenar",
     "hikari::table.dragHandleRow": "Reordenar «{label}»",
     "hikari::tablePage.emptyTitle": "Sin datos",

package/src/i18n/locales/fr/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " ms",
     "hikari::table.noData": "Aucune donnée",
+    "hikari::table.rowActions": "Actions de ligne",
     "hikari::table.dragHandle": "Glisser pour réordonner",
     "hikari::table.dragHandleRow": "Réordonner « {label} »",
     "hikari::tablePage.emptyTitle": "Aucune donnée",

package/src/i18n/locales/ja/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " ミリ秒",
     "hikari::table.noData": "データなし",
+    "hikari::table.rowActions": "行の操作",
     "hikari::table.dragHandle": "ドラッグで並べ替え",
     "hikari::table.dragHandleRow": "「{label}」の順序を変更",
     "hikari::tablePage.emptyTitle": "データがありません",

package/src/i18n/locales/ko/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " 밀리초",
     "hikari::table.noData": "데이터 없음",
+    "hikari::table.rowActions": "행 작업",
     "hikari::table.dragHandle": "드래그하여 순서 변경",
     "hikari::table.dragHandleRow": "'{label}' 순서 변경",
     "hikari::tablePage.emptyTitle": "데이터 없음",

package/src/i18n/locales/pt/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " ms",
     "hikari::table.noData": "Sem dados",
+    "hikari::table.rowActions": "Ações de linha",
     "hikari::table.dragHandle": "Arraste para reordenar",
     "hikari::table.dragHandleRow": "Reordenar «{label}»",
     "hikari::tablePage.emptyTitle": "Sem dados",

package/src/i18n/locales/ru/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " мс",
     "hikari::table.noData": "Нет данных",
+    "hikari::table.rowActions": "Действия со строкой",
     "hikari::table.dragHandle": "Перетащите, чтобы изменить порядок",
     "hikari::table.dragHandleRow": "Изменить порядок: {label}",
     "hikari::tablePage.emptyTitle": "Нет данных",

package/src/i18n/locales/zh-Hans/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " 毫秒",
     "hikari::table.noData": "暂无数据",
+    "hikari::table.rowActions": "更多操作",
     "hikari::table.dragHandle": "拖动以调整顺序",
     "hikari::table.dragHandleRow": "调整「{label}」的顺序",
     "hikari::tablePage.emptyTitle": "暂无数据",

package/src/i18n/locales/zh-Hant/components.json

@@ -169,6 +169,7 @@
     "hikari::statusBar.tier.ws": "WebSocket",
     "hikari::statusPill.ms": " 毫秒",
     "hikari::table.noData": "暫無數據",
+    "hikari::table.rowActions": "更多操作",
     "hikari::table.dragHandle": "拖曳以調整順序",
     "hikari::table.dragHandleRow": "調整「{label}」的順序",
     "hikari::tablePage.emptyTitle": "暫無資料",

package/src/index.ts

@@ -96,6 +96,7 @@ export { default as HSlider } from "./components/HkSlider";
 export { default as HSpinner } from "./components/HkSpinner";
 export { default as HSliderField } from "./components/HkSliderField";
 export { default as HSwitch } from "./components/HkSwitch";
+export { default as HRowActions } from "./components/HkRowActions";
 export { default as HTable } from "./components/HkTable";
 export { default as HTabs } from "./components/HkTabs";
 export { default as HTag } from "./components/HkTag";
@@ -655,6 +656,7 @@ export { default as HkContextMenuProvider } from "./components/HkContextMenuProv
 export { default as HkMenuPanel } from "./components/HkMenuPanel";
 export { default as HkMenuActionItem } from "./components/HkMenuActionItem";
 export { default as HkMenuIdentityItem } from "./components/HkMenuIdentityItem";
+export { default as HkRowActions } from "./components/HkRowActions";
 export { default as HkPopupSelect } from "./components/HkPopupSelect";
 export { default as HkProgressBar } from "./components/HkProgressBar";
 export { default as HkProgressDialog } from "./components/HkProgressDialog";
@@ -673,7 +675,7 @@ export { default as HkTokenInput, compactTokenCount, type TokenUnit } from "./co
 export { default as HkSliderField } from "./components/HkSliderField";
 export { default as HkSpinner } from "./components/HkSpinner";
 export { default as HkSwitch } from "./components/HkSwitch";
-export { default as HkTable } from "./components/HkTable";
+export { default as HkTable, type HkRowManageGate } from "./components/HkTable";
 export { default as HkTabs } from "./components/HkTabs";
 export { default as HkTag } from "./components/HkTag";
 export { default as HkTextarea } from "./components/HkTextarea";