@celestia-island/hikari 0.4.4

package/src/components/HkAlert.tsx

@@ -0,0 +1,85 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { useI18n } from "../i18n/context";
+import { AlertTriangle, CheckCircle, Info, X } from "lucide-vue-next";
+
+import "./HkAlert.scss";
+
+export type AlertVariant = "error" | "warning" | "info" | "success";
+export type AlertSize = "sm" | "md" | "lg";
+
+const VARIANT_ICONS: Record<AlertVariant, typeof AlertTriangle> = {
+  error: AlertTriangle,
+  warning: AlertTriangle,
+  info: Info,
+  success: CheckCircle,
+};
+
+export default defineComponent({
+  name: "HkAlert",
+  props: {
+    variant: { type: String as PropType<AlertVariant>, default: "error" },
+    message: { type: String, required: true },
+    title: { type: String, default: undefined },
+    closable: { type: Boolean, default: false },
+    banner: { type: Boolean, default: false },
+    size: { type: String as PropType<AlertSize>, default: "md" },
+  },
+  emits: {
+    close: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const isDismissed = ref(false);
+
+    const rootCls = computed(() => [
+      "hk-alert",
+      `hk-alert-${props.variant}`,
+      `hk-alert-${props.size}`,
+      props.banner ? "hk-alert-banner" : "",
+      !props.title ? "hk-alert-no-title" : "",
+    ]);
+
+    function onClose() {
+      isDismissed.value = true;
+      emit("close");
+    }
+
+    return () => {
+      if (isDismissed.value) return null;
+
+      const IconComp = VARIANT_ICONS[props.variant];
+
+      return (
+        <div class={rootCls.value}>
+          <span class="hk-alert-icon">
+            {slots.icon ? (
+              slots.icon()
+            ) : (
+              <IconComp size={18} />
+            )}
+          </span>
+
+          <div class="hk-alert-body">
+            {props.title && (
+              <p class="hk-alert-title">{props.title}</p>
+            )}
+            <p class="hk-alert-text">
+              {slots.default ? slots.default() : props.message}
+            </p>
+          </div>
+
+          {props.closable && (
+            <button
+              class="hk-alert-close"
+              type="button"
+              aria-label={t("hk.alert.close", "Close")}
+              onClick={onClose}
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkAvatar.tsx

@@ -0,0 +1,29 @@
+import { computed, defineComponent, type PropType } from "vue";
+import { useI18n } from "../i18n/context";
+import "../../../components/src/styles/components/avatar.scss";
+
+export default defineComponent({
+  name: "HkAvatar",
+  props: {
+    src: { type: String },
+    name: { type: String },
+    size: { type: String as PropType<"sm" | "md" | "lg">, default: "md" },
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const cls = computed(() => [
+      "hk-avatar",
+      `hk-avatar-${props.size}`,
+    ]);
+
+    return () => (
+      <div class={cls.value}>
+        {props.src ? (
+          <img src={props.src} alt={props.name} />
+        ) : (
+          <span class="hk-avatar-fallback">{props.name?.charAt(0)?.toUpperCase() ?? t("hk.avatar.fallback", "?")}</span>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkBadge.scss

@@ -0,0 +1,117 @@
+/*
+ * HkBadge — canonical small label / tag / pill / status component.
+ *
+ * Color model is CSS-variable-driven so consumers can either pick a semantic
+ * variant class (sets all three channels coherently) or override any
+ * channel individually via the color / bgColor / borderColor props
+ * (rendered as inline --hk-badge-* custom properties).
+ */
+
+.hk-badge {
+  --hk-badge-text: inherit;
+  --hk-badge-bg: transparent;
+  --hk-badge-border: transparent;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  padding: var(--space-2) var(--space-8);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--hk-badge-border);
+  background: var(--hk-badge-bg);
+  color: var(--hk-badge-text);
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+/* ---------- size ---------- */
+.hk-badge[data-size="sm"] {
+  font-size: var(--text-2xs);
+  padding: var(--space-1) var(--space-6);
+}
+
+.hk-badge[data-size="md"] {
+  font-size: var(--text-xs);
+  padding: var(--space-2) var(--space-8);
+}
+
+/* ---------- shape ---------- */
+.hk-badge[data-pill="false"] {
+  border-radius: var(--radius-sm);
+}
+
+/* ---------- typography ---------- */
+.hk-badge[data-mono] {
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.hk-badge[data-uppercase] {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ---------- dot indicator ---------- */
+.hk-badge [data-el="dot"] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--hk-badge-text);
+  flex-shrink: 0;
+}
+
+/* dot-only: strip the pill padding/border/background so it's just the
+   indicator dot, not a dot wrapped in a bordered pill. */
+.hk-badge[data-dot-only] {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+/* ------
+   Semantic variants
+   ================================================================== */
+
+.hk-badge-default {
+  --hk-badge-text: rgb(var(--color-text));
+  --hk-badge-bg: rgb(var(--color-surface) / var(--opacity-half));
+  --hk-badge-border: var(--border-input);
+}
+
+.hk-badge-primary {
+  --hk-badge-text: rgb(var(--color-primary));
+  --hk-badge-bg: var(--c-primary-dim);
+  --hk-badge-border: var(--c-primary-overlay);
+}
+
+.hk-badge-success {
+  --hk-badge-text: rgb(var(--color-success));
+  --hk-badge-bg: rgb(var(--color-success) / 10%);
+  --hk-badge-border: rgb(var(--color-success) / 20%);
+}
+
+.hk-badge-error {
+  --hk-badge-text: rgb(var(--color-error));
+  --hk-badge-bg: var(--c-error-dim);
+  --hk-badge-border: var(--c-error-overlay);
+}
+
+.hk-badge-warning {
+  --hk-badge-text: rgb(var(--color-warning));
+  --hk-badge-bg: rgb(var(--color-warning) / 10%);
+  --hk-badge-border: rgb(var(--color-warning) / 20%);
+}
+
+.hk-badge-info {
+  --hk-badge-text: rgb(var(--color-info));
+  --hk-badge-bg: rgb(var(--color-info) / 10%);
+  --hk-badge-border: rgb(var(--color-info) / 20%);
+}
+
+.hk-badge-muted {
+  --hk-badge-text: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
+  --hk-badge-bg: rgb(var(--color-muted) / 8%);
+  --hk-badge-border: rgb(var(--color-muted) / 12%);
+}

package/src/components/HkBadge.tsx

@@ -0,0 +1,50 @@
+import { computed, defineComponent, type CSSProperties, type PropType } from "vue";
+import "./HkBadge.scss";
+
+export type BadgeVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "error"
+  | "warning"
+  | "info"
+  | "muted";
+
+export default defineComponent({
+  name: "HkBadge",
+  props: {
+    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 }) {
+    const style = computed<CSSProperties>(() => {
+      const s: Record<string, string> = {};
+      if (props.color) s["--hk-badge-text"] = props.color;
+      if (props.bgColor) s["--hk-badge-bg"] = props.bgColor;
+      if (props.borderColor) s["--hk-badge-border"] = props.borderColor;
+      return s as CSSProperties;
+    });
+
+    return () => (
+      <span
+        class={["hk-badge", `hk-badge-${props.variant}`]}
+        data-size={props.size}
+        data-pill={props.pill ? undefined : "false"}
+        data-mono={props.mono ? "" : undefined}
+        data-uppercase={props.uppercase ? "" : undefined}
+        data-dot-only={(props.dot && !slots.default) || undefined}
+        style={Object.keys(style.value).length ? style.value : undefined}
+      >
+        {props.dot ? <span data-el="dot" /> : null}
+        {slots.default?.()}
+      </span>
+    );
+  },
+});

package/src/components/HkBreadcrumb.tsx

@@ -0,0 +1,39 @@
+import { computed, defineComponent, type PropType } from "vue";
+import { useI18n } from "../i18n/context";
+import "../../../components/src/styles/components/breadcrumb.scss";
+
+export default defineComponent({
+  name: "HkBreadcrumb",
+  props: {
+    items: { type: Array as PropType<{ label: string; to?: string }[]>, required: true },
+    separator: { type: String },
+    size: { type: String as PropType<"sm" | "md" | "lg">, default: "md" },
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const cls = computed(() => ["hk-breadcrumb", `hk-breadcrumb-${props.size}`]);
+
+    return () => (
+      <nav aria-label={t("hk.breadcrumb.label", "Breadcrumb")}>
+        <ol class={cls.value}>
+          {props.items.map((item, index) => (
+            <li key={index} class="hk-breadcrumb-item">
+              {item.to ? (
+                <a href={item.to} class="hk-breadcrumb-link">{item.label}</a>
+              ) : (
+                <span class="hk-breadcrumb-link">{item.label}</span>
+              )}
+              {index < props.items.length - 1 && (
+                <span class="hk-breadcrumb-separator">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    <polyline points="9 18 15 12 9 6" />
+                  </svg>
+                </span>
+              )}
+            </li>
+          ))}
+        </ol>
+      </nav>
+    );
+  },
+});

package/src/components/HkButton.scss

@@ -0,0 +1,128 @@
+@use "../tokens";
+
+/* HkButton */
+.hk-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+  position: relative;
+  min-height: 2.5rem;
+}
+
+.hk-btn:focus-visible {
+  box-shadow:
+    0 0 0 2px rgb(var(--color-surface)),
+    0 0 0 4px rgb(var(--color-primary));
+}
+
+.hk-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Size variants ---- */
+
+.hk-btn-sm {
+  padding: var(--space-6) var(--space-12);
+  font-size: var(--text-xs);
+}
+
+.hk-btn-md {
+  padding: var(--space-8) var(--space-16);
+  font-size: var(--text-base);
+}
+
+.hk-btn-lg {
+  padding: var(--space-10) var(--space-24);
+  font-size: var(--text-md);
+}
+
+/* ---- Primary ---- */
+
+.hk-btn-primary {
+  background: rgb(var(--color-primary));
+  color: rgb(var(--color-on-solid));
+}
+
+.hk-btn-primary:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: var(--shadow-button);
+}
+
+.hk-btn-primary:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+
+/* ---- Secondary ---- */
+
+.hk-btn-secondary {
+  background: rgb(var(--color-surface));
+  color: rgb(var(--color-text));
+  border-color: rgb(var(--color-border) / 20%);
+  backdrop-filter: blur(var(--blur-sm));
+}
+
+.hk-btn-secondary:hover:not(:disabled) {
+  background: rgb(var(--color-surface));
+  border-color: var(--c-primary-strong);
+}
+
+/* ---- Outline ---- */
+
+.hk-btn-outline {
+  background: transparent;
+  color: rgb(var(--color-primary));
+  border-color: var(--c-primary-intense);
+}
+
+.hk-btn-outline:hover:not(:disabled) {
+  background: var(--c-primary-light);
+  border-color: rgb(var(--color-primary));
+}
+
+/* ---- Ghost ---- */
+
+.hk-btn-ghost {
+  background: transparent;
+  color: rgb(var(--color-text));
+  border-color: transparent;
+}
+
+.hk-btn-ghost:hover:not(:disabled) {
+  background: var(--c-primary-light);
+}
+
+/* ---- Danger ---- */
+
+.hk-btn-danger {
+  background: rgb(var(--color-error));
+  color: rgb(var(--color-on-solid));
+}
+
+.hk-btn-danger:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: var(--shadow-button-danger);
+}
+
+/* ---- Block ---- */
+
+.hk-btn-block {
+  width: 100%;
+}
+
+/* ---- Loading ---- */
+
+.hk-btn-loading {
+  pointer-events: none;
+}

package/src/components/HkButton.tsx

@@ -0,0 +1,74 @@
+import { computed, defineComponent, useAttrs, type PropType } from "vue";
+
+import "./HkButton.scss";
+import HIcon from "./HkIcon";
+import HKbd from "./HkKbd";
+import HSpinner from "./HkSpinner";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "ghost"
+  | "danger"
+  | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export default defineComponent({
+  name: "HkButton",
+  inheritAttrs: false,
+  props: {
+    variant: { type: String as PropType<ButtonVariant>, default: "primary" },
+    size: { type: String as PropType<ButtonSize>, default: "md" },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    block: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: undefined },
+    shortcut: { type: String, default: undefined },
+    icon: { type: String, default: undefined },
+    suffix: { type: String, default: undefined },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+  },
+  setup(props, { emit, slots }) {
+    const attrs = useAttrs();
+
+    const buttonClass = computed(() => [
+      "hk-btn",
+      `hk-btn-${props.variant}`,
+      `hk-btn-${props.size}`,
+      props.block ? "hk-btn-block" : "",
+      props.loading ? "hk-btn-loading" : "",
+      props.shortcut ? "hk-btn-has-shortcut" : "",
+    ]);
+
+    return () => (
+      <button
+        {...attrs}
+        type={(attrs.type as "button" | "submit" | "reset") || "button"}
+        disabled={props.disabled || props.loading}
+        class={[buttonClass.value, attrs.class]}
+        style={attrs.style || undefined}
+        aria-label={props.ariaLabel}
+        aria-busy={props.loading || undefined}
+        onClick={(e) => emit("click", e)}
+      >
+        {props.loading ? <HSpinner size="xs" tone="current" /> : null}
+        {!props.loading && props.icon ? (
+          <span class="hk-btn-icon">
+            <HIcon name={props.icon} size={16} />
+          </span>
+        ) : null}
+        {slots.default?.()}
+        {props.suffix ? (
+          <span class="hk-btn-suffix">
+            <HIcon name={props.suffix} size={16} />
+          </span>
+        ) : null}
+        {props.shortcut ? (
+          <HKbd keys={props.shortcut!} size="sm" />
+        ) : null}
+      </button>
+    );
+  },
+});

package/src/components/HkCard.scss

@@ -0,0 +1,49 @@
+@use "../tokens";
+
+/* HkCard — canonical surface card. Hover effect mirrors the node card:
+   only box-shadow and border-color animate. No transforms, so the card
+   never displaces its neighbors or triggers layout reflow. */
+.hk-card {
+  display: block;
+  overflow: hidden;
+  background: rgb(var(--color-surface) / var(--opacity-half));
+  backdrop-filter: blur(var(--blur-md));
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-elevated);
+}
+
+.hk-card-hoverable {
+  cursor: pointer;
+  transition:
+    box-shadow var(--duration-normal) ease,
+    border-color var(--duration-normal) ease;
+}
+
+.hk-card-hoverable:hover {
+  box-shadow: var(--shadow-elevated);
+  border-color: var(--c-primary-intense);
+}
+
+.hk-card-header {
+  padding: var(--space-12) var(--space-16);
+  border-bottom: 1px solid var(--border-faint);
+}
+
+.hk-card-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+.hk-card-body {
+  padding: var(--space-16);
+}
+
+.hk-card-body-unpadded {
+  padding: 0;
+}
+
+.hk-card-footer {
+  padding: var(--space-12) var(--space-16);
+  border-top: 1px solid rgb(var(--color-border) / 10%);
+}

package/src/components/HkCard.tsx

@@ -0,0 +1,38 @@
+import { defineComponent } from "vue";
+
+import "./HkCard.scss";
+
+export default defineComponent({
+  name: "HkCard",
+  props: {
+    title: { type: String, default: undefined },
+    hoverable: { type: Boolean, default: false },
+    padded: { type: Boolean, default: true },
+    class: { type: String, default: "" },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+  },
+  setup(props, { emit, slots }) {
+    return () => (
+      <div
+        class={[
+          "hk-card",
+          props.hoverable ? "hk-card-hoverable" : "",
+          props.class,
+        ]}
+        onClick={(e) => emit("click", e)}
+      >
+        {props.title || slots.header ? (
+          <div class="hk-card-header">
+            {slots.header ? slots.header() : <h3 class="hk-card-title">{props.title}</h3>}
+          </div>
+        ) : null}
+        <div class={["hk-card-body", !props.padded ? "hk-card-body-unpadded" : ""]}>
+          {slots.default?.()}
+        </div>
+        {slots.footer ? <div class="hk-card-footer">{slots.footer()}</div> : null}
+      </div>
+    );
+  },
+});