@celestia-island/hikari 0.55.198 → 0.55.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.198",
+  "version": "0.55.200",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkColorSchemeDialog.scss

@@ -7,15 +7,12 @@
 .s-scheme-mode-switch {
   align-self: center;
 
-  /* The strip needs a track of its own: pill-on-dialog-surface is
-     same-on-same in dark mode and read as bare text links (user report
-     2026-09-16), hiding that it is a segmented control — and that it
-     picks the EDITING target, not the applied app mode. */
-  .hk-tabs-list {
-    background: color-mix(in srgb, var(--hi-color-text-primary, rgb(var(--color-text))) 8%, transparent);
-    padding: var(--space-2, 2px);
-    border-radius: var(--hi-radius-sm, 4px);
-  }
+  /* The editor renders variant="segmented" — the DEFAULT segmented
+     chrome (hikari's own track) is exactly what the user asked for
+     (2026-10-23: the bespoke tinted track read as a different button
+     family from every other segmented group). The 2026-09-16 custom
+     track predates the editor's move to the segmented variant and is
+     retired with it. */
 }
 
 /* Why-this-strip note: the tabs switch which palette you are EDITING;

package/src/components/HkStatusRow.scss

@@ -0,0 +1,103 @@
+// HkStatusRow — the standard status-card anatomy (rail + chip + body +
+// action). Tones map the palette channels; the absent variant is the
+// quiet dashed edge for missing entries.
+
+.hk-status-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem 0.875rem 1.125rem;
+  border-radius: 0.625rem;
+  border: 1px solid rgb(var(--color-border, 60 60 60) / 18%);
+  background: rgb(var(--color-surface, 255 255 255) / 70%);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset-block: 0.625rem;
+    left: 0;
+    width: 3px;
+    border-radius: 999px;
+    background: rgb(var(--color-muted, 108 108 108) / 45%);
+  }
+
+  &--info {
+    border-color: rgb(var(--color-primary, 0 107 255) / 35%);
+    &::before { background: rgb(var(--color-primary, 0 107 255)); }
+    &:hover { border-color: rgb(var(--color-primary, 0 107 255) / 60%); }
+  }
+  &--success {
+    border-color: rgb(var(--color-success, 0 128 68) / 30%);
+    &::before { background: rgb(var(--color-success, 0 128 68)); }
+  }
+  &--warning {
+    border-color: rgb(var(--color-warning, 200 140 30) / 35%);
+    &::before { background: rgb(var(--color-warning, 200 140 30)); }
+  }
+  &--error {
+    border-color: rgb(var(--color-error, 226 58 69) / 35%);
+    &::before { background: rgb(var(--color-error, 226 58 69)); }
+  }
+
+  &--absent {
+    border-style: dashed;
+    opacity: 0.75;
+  }
+}
+
+.hk-status-row__chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+  background: rgb(var(--color-muted, 108 108 108) / 10%);
+  color: rgb(var(--color-muted, 108 108 108));
+}
+
+.hk-status-row--info .hk-status-row__chip {
+  background: rgb(var(--color-primary, 0 107 255) / 12%);
+  color: rgb(var(--color-primary, 0 107 255));
+}
+.hk-status-row--success .hk-status-row__chip {
+  background: rgb(var(--color-success, 0 128 68) / 12%);
+  color: rgb(var(--color-success, 0 128 68));
+}
+.hk-status-row--warning .hk-status-row__chip {
+  background: rgb(var(--color-warning, 200 140 30) / 14%);
+  color: rgb(var(--color-warning, 200 140 30));
+}
+.hk-status-row--error .hk-status-row__chip {
+  background: rgb(var(--color-error, 226 58 69) / 12%);
+  color: rgb(var(--color-error, 226 58 69));
+}
+
+.hk-status-row__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.hk-status-row__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.hk-status-row__status {
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: var(--hk-text-muted, rgb(var(--color-muted, 108 108 108)));
+}
+
+.hk-status-row__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/src/components/HkStatusRow.test.tsx

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, type App } from "vue";
+
+import HkStatusRow from "./HkStatusRow";
+
+const containers: HTMLElement[] = [];
+
+function mountRow(props: Record<string, unknown>, slots: Record<string, () => unknown> = {}): {
+  app: App;
+  container: HTMLElement;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  const Wrapper = defineComponent({
+    render: () =>
+      h(HkStatusRow as never, props, slots),
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  return { app, container };
+}
+
+afterEach(() => {
+  for (const c of containers.splice(0)) c.remove();
+});
+
+describe("HkStatusRow (the standard status-card anatomy)", () => {
+  it("renders title, status, chip and action slots", () => {
+    const t = mountRow(
+      { title: "evernight", status: "detected" },
+      { icon: () => h("i"), action: () => h("button", "register") },
+    );
+    expect(t.container.querySelector(".hk-status-row__title")?.textContent).toBe("evernight");
+    expect(t.container.querySelector(".hk-status-row__status")?.textContent).toBe("detected");
+    expect(t.container.querySelector(".hk-status-row__chip")).not.toBeNull();
+    expect(t.container.querySelector(".hk-status-row__action button")?.textContent).toBe("register");
+    t.app.unmount();
+  });
+
+  it("maps the tone onto the modifier class", () => {
+    const t = mountRow({ title: "x", tone: "warning" });
+    expect(t.container.querySelector(".hk-status-row--warning")).not.toBeNull();
+    t.app.unmount();
+  });
+
+  it("defaults to neutral", () => {
+    const t = mountRow({ title: "x" });
+    expect(t.container.querySelector(".hk-status-row--neutral")).not.toBeNull();
+    t.app.unmount();
+  });
+
+  it("absent renders the dashed quiet variant", () => {
+    const t = mountRow({ title: "x", absent: true });
+    expect(t.container.querySelector(".hk-status-row--absent")).not.toBeNull();
+    t.app.unmount();
+  });
+
+  it("omits the status line when empty and the action zone without a slot", () => {
+    const t = mountRow({ title: "x" });
+    expect(t.container.querySelector(".hk-status-row__status")).toBeNull();
+    expect(t.container.querySelector(".hk-status-row__action")).toBeNull();
+    t.app.unmount();
+  });
+});

package/src/components/HkStatusRow.tsx

@@ -0,0 +1,61 @@
+import { defineComponent, type PropType, type VNode } from "vue";
+
+import "./HkStatusRow.scss";
+
+/**
+ * HkStatusRow — the family's standard status-card row (task-3 D,
+ * user ruling 2026-10-23): one anatomy for every "a thing and its
+ * state" listing — the registration wizard's members, the desktop
+ * services panel, future install checklists.
+ *
+ * Anatomy (deliberately fixed):
+ * - a 3px status RAIL on the card's left edge — the state at a glance;
+ * - an icon CHIP (rounded square, status-tinted wash, default slot);
+ * - TITLE + STATUS LINE stacked in the body;
+ * - an optional trailing ACTION slot (a button, a copy affordance).
+ *
+ * The `tone` prop is the single state axis: neutral | info (primary) |
+ * success | warning | error. Hosts map their domain states onto tones
+ * — the row never guesses.
+ */
+export type HkStatusRowTone = "neutral" | "info" | "success" | "warning" | "error";
+
+export const HkStatusRow = defineComponent({
+  name: "HkStatusRow",
+  props: {
+    /** The state axis — hosts map domain states onto tones. */
+    tone: {
+      type: String as PropType<HkStatusRowTone>,
+      default: "neutral",
+      validator: (v: unknown) =>
+        v === "neutral" || v === "info" || v === "success" || v === "warning" || v === "error",
+    },
+    /** Heading line (the member/service name). */
+    title: { type: String, required: true },
+    /** Status line under the title (state prose). */
+    status: { type: String, default: "" },
+    /** Quiet variant: dashed edge + reduced opacity for absent rows. */
+    absent: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div
+        class={{
+          "hk-status-row": true,
+          [`hk-status-row--${props.tone}`]: true,
+          "hk-status-row--absent": props.absent,
+        }}
+      >
+        <span class="hk-status-row__chip">{slots.icon?.()}</span>
+        <div class="hk-status-row__body">
+          <span class="hk-status-row__title">{props.title}</span>
+          {props.status ? <span class="hk-status-row__status">{props.status}</span> : null}
+          {slots.extra?.()}
+        </div>
+        {slots.action?.() ? <div class="hk-status-row__action">{slots.action?.()}</div> : null}
+      </div>
+    );
+  },
+});
+
+export default HkStatusRow;

package/src/index.ts

@@ -615,6 +615,8 @@ export { default as HkConfirmDialog } from "./components/HkConfirmDialog";
 export { default as HkCrossfade } from "./components/HkCrossfade";
 export { default as HkTransitionContainer } from "./components/HkTransitionContainer";
 export { default as HkWindowControls, isApplePlatform } from "./components/HkWindowControls";
+export { default as HkStatusRow } from "./components/HkStatusRow";
+export type { HkStatusRowTone } from "./components/HkStatusRow";
 export type { WindowControlsVariant } from "./components/HkWindowControls";
 export { default as HkDivider } from "./components/HkDivider";
 export { default as HkDiffViewer } from "./components/HkDiffViewer";