@celestia-island/hikari 0.4.4

package/src/components/HkTooltip.scss

@@ -0,0 +1,47 @@
+/* HkTooltip — lightweight tooltip. Colours are intentionally decoupled from
+   theme tokens so the tooltip stays legible on any wallpaper. */
+.hk-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.hk-tooltip-trigger {
+  display: inline-flex;
+}
+
+.hk-tooltip-popup {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  padding: var(--space-4) var(--space-8);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+  white-space: normal;
+  word-break: break-word;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--duration-short) ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  background: #ffffff;
+  color: #000000;
+}
+
+.hk-tooltip-popup.hk-tooltip-visible {
+  opacity: 1;
+}
+
+.hk-tooltip-content {
+  max-width: 280px;
+}
+
+[data-mode="light"] .hk-tooltip-popup {
+  background: #ffffff;
+  color: #000000;
+}
+
+[data-mode="dark"] .hk-tooltip-popup {
+  background: #4b4b4b;
+  color: #ffffff;
+}

package/src/components/HkTooltip.tsx

@@ -0,0 +1,108 @@
+import { computed, defineComponent, onBeforeUnmount, ref, Teleport, type CSSProperties, type PropType } from "vue";
+import "./HkTooltip.scss";
+
+export default defineComponent({
+  name: "HkTooltip",
+  props: {
+    text: { type: String, required: true },
+    placement: { type: String as PropType<"top" | "bottom" | "left" | "right">, default: "top" },
+    delay: { type: Number, default: 300 },
+    maxWidth: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    const visible = ref(false);
+    const wrapperRef = ref<HTMLElement | null>(null);
+    const tooltipStyle = ref<CSSProperties>({});
+    let showTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function updatePosition() {
+      if (!wrapperRef.value) return;
+      const rect = wrapperRef.value.getBoundingClientRect();
+      const gap = 8;
+      const style: CSSProperties = {};
+
+      if (props.maxWidth) {
+        style.maxWidth = props.maxWidth;
+      }
+
+      switch (props.placement) {
+        case "top":
+          style.top = `${rect.top - gap}px`;
+          style.left = `${rect.left + rect.width / 2}px`;
+          style.transform = "translate(-50%, -100%)";
+          break;
+        case "bottom":
+          style.top = `${rect.bottom + gap}px`;
+          style.left = `${rect.left + rect.width / 2}px`;
+          style.transform = "translate(-50%, 0)";
+          break;
+        case "left":
+          style.top = `${rect.top + rect.height / 2}px`;
+          style.left = `${rect.left - gap}px`;
+          style.transform = "translate(-100%, -50%)";
+          break;
+        case "right":
+          style.top = `${rect.top + rect.height / 2}px`;
+          style.left = `${rect.right + gap}px`;
+          style.transform = "translate(0, -50%)";
+          break;
+      }
+
+      tooltipStyle.value = style;
+    }
+
+    function show() {
+      clearShowTimer();
+      showTimer = setTimeout(() => {
+        visible.value = true;
+        requestAnimationFrame(updatePosition);
+      }, props.delay);
+    }
+
+    function hide() {
+      clearShowTimer();
+      visible.value = false;
+    }
+
+    function clearShowTimer() {
+      if (showTimer !== null) {
+        clearTimeout(showTimer);
+        showTimer = null;
+      }
+    }
+
+    onBeforeUnmount(() => {
+      clearShowTimer();
+    });
+
+    const tooltipCls = computed(() => [
+      "hk-tooltip-popup",
+      `hk-tooltip-${props.placement}`,
+      visible.value ? "hk-tooltip-visible" : "",
+    ]);
+
+    return () => (
+      <span
+        ref={wrapperRef}
+        class="hk-tooltip-wrapper"
+        data-position={props.placement}
+        onMouseenter={show}
+        onMouseleave={hide}
+        onFocusin={show}
+        onFocusout={hide}
+      >
+        <span class="hk-tooltip-trigger">
+          {slots.default?.()}
+        </span>
+        <Teleport to="body">
+          <div
+            class={tooltipCls.value}
+            style={tooltipStyle.value}
+          >
+            <div class="hk-tooltip-content">{props.text}</div>
+          </div>
+        </Teleport>
+      </span>
+    );
+  },
+});

package/src/components/HkTree.scss

@@ -0,0 +1,188 @@
+.hk-tree {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-tree-node {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-tree-indent {
+  flex-shrink: 0;
+}
+
+.hk-tree-children {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: var(--guide-left, 8px);
+    top: 0;
+    bottom: 6px;
+    width: 1px;
+    background: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+  }
+}
+
+.hk-tree-row {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  cursor: pointer;
+  transition: background var(--hi-duration-fast, 0.15s) ease;
+  color: var(--hi-color-text-primary);
+  position: relative;
+
+  &:hover {
+    background: color-mix(in srgb, var(--hi-color-primary) 5%, transparent);
+  }
+}
+
+.hk-tree-row[data-status="completed"] {
+  opacity: 0.55;
+
+  .hk-tree-label {
+    text-decoration: line-through;
+  }
+}
+
+.hk-tree-row[data-status="failed"] .hk-tree-label {
+  color: var(--hi-color-danger);
+}
+
+.hk-tree-row[data-status="in_progress"],
+.hk-tree-row[data-status="running"] {
+  .hk-tree-label {
+    font-weight: 500;
+  }
+}
+
+.hk-tree-row[data-status="warning"] .hk-tree-label {
+  color: var(--hi-color-warning);
+}
+
+.hk-tree-row[data-status="muted"] {
+  opacity: 0.45;
+}
+
+/* ── Row heights by size ───────────────────────── */
+
+.hk-tree[data-size="xs"] > .hk-tree-node > .hk-tree-row,
+.hk-tree[data-size="xs"] .hk-tree-children > .hk-tree-node > .hk-tree-row {
+  min-height: 22px;
+
+  .hk-tree-label { font-size: var(--hi-text-xs, 0.75rem); }
+  .hk-tree-icon { width: 14px; height: 14px; }
+  .hk-tree-leaf { width: 4px; height: 4px; }
+}
+
+.hk-tree[data-size="sm"] > .hk-tree-node > .hk-tree-row,
+.hk-tree[data-size="sm"] .hk-tree-children > .hk-tree-node > .hk-tree-row {
+  min-height: 28px;
+
+  .hk-tree-label { font-size: var(--hi-text-xs, 0.75rem); }
+  .hk-tree-icon { width: 16px; height: 16px; }
+  .hk-tree-leaf { width: 5px; height: 5px; }
+}
+
+.hk-tree[data-size="md"] > .hk-tree-node > .hk-tree-row,
+.hk-tree[data-size="md"] .hk-tree-children > .hk-tree-node > .hk-tree-row {
+  min-height: 34px;
+
+  .hk-tree-label { font-size: var(--hi-text-sm, 0.875rem); }
+  .hk-tree-icon { width: 18px; height: 18px; }
+  .hk-tree-leaf { width: 6px; height: 6px; }
+}
+
+/* ── Toggle chevron ────────────────────────────── */
+
+.hk-tree-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--hi-color-muted);
+  border-radius: var(--hi-radius-sm, 4px);
+  transition: color var(--hi-duration-fast, 0.15s), background var(--hi-duration-fast, 0.15s);
+}
+
+.hk-tree-toggle[data-parent] {
+  cursor: pointer;
+
+  &:hover {
+    background: color-mix(in srgb, var(--hi-color-surface) 40%, transparent);
+    color: var(--hi-color-text-primary);
+  }
+}
+
+.hk-tree-chevron {
+  transition: transform var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-tree-chevron[data-open] {
+  transform: rotate(90deg);
+}
+
+.hk-tree-leaf {
+  display: block;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--hi-color-muted) 25%, transparent);
+}
+
+/* ── Icon slot ─────────────────────────────────── */
+
+.hk-tree-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+
+/* ── Label ─────────────────────────────────────── */
+
+.hk-tree-label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+  font-weight: 400;
+  margin-left: 4px;
+}
+
+/* ── Label rich-text parts (agent::skill) ───────── */
+
+.hk-tree-label-agent {
+  font-weight: 600;
+  color: var(--hi-color-primary);
+}
+
+.hk-tree-label-sep {
+  color: var(--hi-color-muted);
+  font-weight: 400;
+}
+
+.hk-tree-label-skill {
+  font-weight: 500;
+  color: var(--hi-color-text-primary);
+}
+
+.hk-tree-label-tag {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 0.375em;
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--hi-color-primary);
+  background: color-mix(in srgb, var(--hi-color-primary) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-primary) 18%, transparent);
+  border-radius: var(--hi-radius-sm, 4px);
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}

package/src/components/HkTree.tsx

@@ -0,0 +1,217 @@
+import { defineComponent, ref, watch, h, type Component, type PropType, type VNodeChild } from "vue";
+
+import "./HkTree.scss";
+
+export type TreeSize = "xs" | "sm" | "md";
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  icon?: Component;
+  iconClass?: string;
+  status?: string;
+  tag?: boolean;
+  tagLabel?: string;
+  children?: TreeNode[];
+  data?: unknown;
+}
+
+export interface TreeRowScope {
+  node: TreeNode;
+  depth: number;
+  indent: number;
+}
+
+type RowRenderer = (scope: TreeRowScope) => VNodeChild;
+
+export default defineComponent({
+  name: "HkTree",
+  props: {
+    nodes: { type: Array as PropType<TreeNode[]>, default: () => [] },
+    size: { type: String as PropType<TreeSize>, default: "sm" },
+    defaultExpandAll: { type: Boolean, default: false },
+    indent: { type: Number, default: 16 },
+    expandOnClick: { type: Boolean, default: false },
+  },
+  emits: {
+    select: (_node: TreeNode) => true,
+    toggle: (_node: TreeNode) => true,
+  },
+  setup(props, { slots, emit }) {
+    const expanded = ref<Set<string>>(new Set());
+
+    function ensureExpanded() {
+      if (expanded.value.size > 0) return;
+      if (!props.defaultExpandAll) return;
+      const ids = new Set<string>();
+      function walk(list: TreeNode[]) {
+        for (const n of list) {
+          if (n.children?.length) {
+            ids.add(n.id);
+            walk(n.children);
+          }
+        }
+      }
+      walk(props.nodes);
+      expanded.value = ids;
+    }
+
+    watch(
+      () => props.nodes,
+      () => { if (props.defaultExpandAll) ensureExpanded(); },
+      { immediate: true },
+    );
+
+    function findNode(id: string): TreeNode | undefined {
+      let found: TreeNode | undefined;
+      function walk(list: TreeNode[]) {
+        for (const n of list) {
+          if (n.id === id) { found = n; return; }
+          if (n.children?.length) walk(n.children);
+          if (found) return;
+        }
+      }
+      walk(props.nodes);
+      return found;
+    }
+
+    function toggle(id: string) {
+      const next = new Set(expanded.value);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      expanded.value = next;
+      const node = findNode(id);
+      if (node) emit("toggle", node);
+    }
+
+    const renderRow: RowRenderer | undefined = slots.row
+      ? (scope) => slots.row!(scope)
+      : undefined;
+
+    return () => (
+      <div class="hk-tree" data-size={props.size}>
+        {props.nodes.map((node) => (
+          <TreeNodeRow
+            key={node.id}
+            node={node}
+            depth={0}
+            indent={props.indent}
+            expanded={expanded.value}
+            expandOnClick={props.expandOnClick}
+            renderRow={renderRow}
+            onToggle={toggle}
+            onSelect={(n) => emit("select", n)}
+          />
+        ))}
+      </div>
+    );
+  },
+});
+
+interface TreeNodeRowProps {
+  node: TreeNode;
+  depth: number;
+  indent: number;
+  expanded: Set<string>;
+  expandOnClick: boolean;
+  renderRow?: RowRenderer;
+  onToggle: (id: string) => void;
+  onSelect: (node: TreeNode) => void;
+}
+
+const TreeNodeRow = ({
+  node,
+  depth,
+  indent,
+  expanded,
+  expandOnClick,
+  renderRow,
+  onToggle,
+  onSelect,
+}: TreeNodeRowProps) => {
+  const hasChildren = (node.children?.length ?? 0) > 0;
+  const isExpanded = hasChildren && expanded.has(node.id);
+  const IconComp = node.icon;
+
+  const guideLeft = depth * indent + 16;
+
+  function handleRowClick() {
+    onSelect(node);
+    if (expandOnClick && hasChildren) onToggle(node.id);
+  }
+
+  return (
+    <div class="hk-tree-node">
+      <div
+        class="hk-tree-row"
+        data-status={node.status || undefined}
+        onClick={handleRowClick}
+      >
+        {depth > 0 && (
+          <span class="hk-tree-indent" style={{ width: `${depth * indent}px` }} />
+        )}
+
+        <span
+          class="hk-tree-toggle"
+          data-parent={hasChildren || undefined}
+          data-open={isExpanded || undefined}
+          onClick={(e: MouseEvent) => { e.stopPropagation(); if (hasChildren) onToggle(node.id); }}
+        >
+          {hasChildren ? (
+            <svg viewBox="0 0 16 16" width="12" height="12" class="hk-tree-chevron" data-open={isExpanded || undefined}>
+              <path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          ) : (
+            <span class="hk-tree-leaf" />
+          )}
+        </span>
+
+        {renderRow
+          ? renderRow({ node, depth, indent })
+          : (
+            <>
+              {IconComp ? (
+                <span class={["hk-tree-icon", node.iconClass ?? ""]}>
+                  {h(IconComp as Component, { size: 13 })}
+                </span>
+              ) : null}
+
+              <span class="hk-tree-label">
+                {node.tagLabel
+                  ? [renderTagLabel(node.tagLabel), " ", renderLabel(node.label)]
+                  : node.tag
+                    ? renderTagLabel(node.label)
+                    : renderLabel(node.label)}
+              </span>
+            </>
+          )}
+      </div>
+
+      {hasChildren && isExpanded && (
+        <div class="hk-tree-children" style={{ "--guide-left": `${guideLeft}px` } as Record<string, string>}>
+          {node.children?.map((child) => (
+            <TreeNodeRow
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              indent={indent}
+              expanded={expanded}
+              expandOnClick={expandOnClick}
+              renderRow={renderRow}
+              onToggle={onToggle}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+function renderLabel(label: string) {
+  return label;
+}
+
+function renderTagLabel(label: string) {
+  return <span class="hk-tree-label-tag">{label}</span>;
+}