@haikit/client 0.9.0 → 0.9.2

package/README.md

@@ -20,6 +20,10 @@ property, so override what you like.
 
 ## The default UI
 
+The [default UI guide](https://github.com/wfoxd/haikit/blob/main/docs/default-ui.md)
+covers it in full: every option, what each part of the screen does, theming,
+styling your surfaces, and building your own layout. In short:
+
 `mountChat` gives you a header with **New chat** and a **Context** button that
 shows how many tokens the model holds, a centred conversation, and a composer
 that grows as you type.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haikit/client",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "The haikit browser runtime: streams tool payloads into interactive UI surfaces. Plain ESM, no build step, no dependencies.",
   "keywords": [
     "haikit",

package/src/app.js

@@ -17,7 +17,7 @@
 
 import { createChat } from "./index.js";
 import { renderTranscript, closeTranscript, h } from "./transcript.js";
-import { icon } from "./icons.js";
+import { icon, mark, FAVICON } from "./icons.js";
 
 /** Below this width the drawer opens over the chat rather than beside it. */
 const WIDE = "(min-width: 900px)";
@@ -60,6 +60,28 @@ function setPin(theme) {
   pinning.ours = theme;
 }
 
+/**
+ * A page without an icon of its own gets the haikit favicon while a chat is
+ * open on it. Every chat shares the one link; the last to close takes it away.
+ */
+const favicon = { chats: 0, link: null };
+
+function addFavicon() {
+  if (favicon.chats++ || document.querySelector('link[rel~="icon"]')) return;
+  const link = document.createElement("link");
+  link.rel = "icon";
+  link.type = "image/svg+xml";
+  link.href = FAVICON;
+  document.head.append(link);
+  favicon.link = link;
+}
+
+function dropFavicon() {
+  if (--favicon.chats) return;
+  favicon.link?.remove();
+  favicon.link = null;
+}
+
 /**
  * @param {{
  *   root: HTMLElement,
@@ -78,7 +100,7 @@ export function mountChat({
   root,
   registry,
   endpoint = "/hai",
-  title = "hai",
+  title = "HaiKIT",
   subtitle = "",
   suggestions = [],
   inspector = true,
@@ -94,13 +116,14 @@ export function mountChat({
   // so a pin on the shell alone would not reach them.
   const pinned = theme === "light" || theme === "dark" ? { theme } : null;
   if (pinned) pin(pinned);
+  addFavicon();
 
   // ── shell ──────────────────────────────────────────────────────────
   const shell = h("div", "hai-shell");
 
   const top = h("header", "hai-top");
   const brand = h("div", "hai-brand");
-  brand.append(icon("brand", "hai-icon hai-mark"), h("span", "hai-title", title));
+  brand.append(mark("small", "hai-logo hai-mark"), h("span", "hai-title", title));
   if (subtitle) brand.append(h("span", "hai-subtitle", subtitle));
 
   const modelEl = h("span", "hai-model");
@@ -256,7 +279,7 @@ export function mountChat({
   function emptyState() {
     const empty = h("div", "hai-empty");
     if (!emptyText && !suggestions.length) return empty;
-    empty.append(icon("brand", "hai-icon hai-empty-mark"));
+    empty.append(mark("full", "hai-logo hai-empty-mark"));
     if (emptyText) empty.append(h("p", null, emptyText));
     if (suggestions.length) {
       const row = h("div", "hai-suggestions");
@@ -310,6 +333,7 @@ export function mountChat({
       shell.remove();
       releaseDrawer();
       if (pinned) unpin(pinned);
+      dropFavicon();
       return;
     }
 

package/src/hai.css

@@ -41,6 +41,9 @@
   --hai-user-bg: light-dark(#e7eefb, #1e2835);
   --hai-code-bg: light-dark(#f3f5f8, #0a0d11);
   --hai-shadow: 0 1px 2px light-dark(rgb(15 23 42 / .06), rgb(0 0 0 / .35));
+  --hai-logo-ink: light-dark(#0f1115, #f3f2ee);
+  --hai-logo-paper: light-dark(#f3f2ee, #0f1115);
+  --hai-logo-hot: #ff5a1f;
 
   /* tints, derived — override the colour and these follow */
   --hai-line-soft: color-mix(in srgb, var(--hai-line) 60%, transparent);
@@ -79,6 +82,8 @@
     --hai-user-bg: #1e2835;
     --hai-code-bg: #0a0d11;
     --hai-shadow: 0 1px 2px rgb(0 0 0 / .35);
+    --hai-logo-ink: #f3f2ee;
+    --hai-logo-paper: #0f1115;
   }
 }
 
@@ -110,7 +115,12 @@
   background: var(--hai-panel);
 }
 .hai-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.hai-mark { width: 22px; height: 22px; color: var(--hai-accent); }
+.hai-logo { flex: none; }
+.hai-logo-ink { fill: var(--hai-logo-ink); }
+.hai-logo-paper { fill: var(--hai-logo-paper); }
+.hai-logo-paper-dim { fill: var(--hai-logo-paper); opacity: .5; }
+.hai-logo-hot { fill: var(--hai-logo-hot); }
+.hai-mark { width: 20px; height: 20px; }
 .hai-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
 .hai-subtitle {
   color: var(--hai-dim);
@@ -171,8 +181,11 @@
 }
 .hai-icon-btn:hover { background: var(--hai-hover); color: var(--hai-fg); }
 
-/* clips the drawer while it waits off the right edge */
-.hai-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; overflow: hidden; }
+/* Clips the drawer while it waits off the right edge. `clip`, not just
+   `hidden`: a hidden box still scrolls, so bringing anything into view
+   centred, as find in page does, slid the whole chat sideways and left it
+   there. `hidden` stays for browsers without `clip`. */
+.hai-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; overflow: hidden; overflow: clip; }
 
 /* the conversation is a centred column; the scrollbar stays at the edge */
 .hai-chat {
@@ -200,15 +213,7 @@
 /* ── empty state ────────────────────────────────────────────────────── */
 .hai-empty { color: var(--hai-dim); }
 .hai-empty p { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.6; }
-.hai-empty-mark {
-  width: 28px;
-  height: 28px;
-  padding: 12px;
-  margin-bottom: 18px;
-  border-radius: 16px;
-  background: var(--hai-accent-soft);
-  color: var(--hai-accent);
-}
+.hai-empty-mark { width: 44px; height: 44px; margin-bottom: 20px; }
 /* alone, it greets; after what init showed, it stays out of the way */
 .hai-empty:first-child {
   display: flex;

package/src/icons.js

@@ -7,8 +7,6 @@
  */
 
 const PATHS = {
-  // one line splitting in two: the dual channel
-  brand: "M2.5 12H8c3.5 0 4.5-6 9-6h4.5M8 12c3.5 0 4.5 6 9 6h4.5",
   send: "M12 19V5M5.5 11.5 12 5l6.5 6.5",
   plus: "M12 5v14M5 12h14",
   panel: "M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM15 4v16",
@@ -22,6 +20,12 @@ const PATHS = {
 
 const SVG = "http://www.w3.org/2000/svg";
 
+/** The haikit favicon, docs/haikit-logo/favicon.svg, as a data URL. Its dark
+ *  tile reads on a light tab bar and a dark one alike. */
+export const FAVICON = "data:image/svg+xml," + encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' role='img' aria-label='HaiKIT'><title>HaiKIT</title><rect width='64' height='64' rx='14' fill='#0F1115'/><g transform='translate(8 8) scale(0.75)'><rect x='6' y='6' width='28' height='52' rx='8' fill='#F3F2EE'/><rect x='33' y='26' width='12' height='12' fill='#F3F2EE'/><rect x='44' y='6' width='14' height='52' rx='4' fill='#FF5A1F'/></g></svg>",
+);
+
 /** An inline SVG icon, hidden from assistive technology: the text beside it, or
  *  the button's label, says what it means. */
 export function icon(name, className = "hai-icon") {
@@ -39,3 +43,48 @@ export function icon(name, className = "hai-icon") {
   svg.append(path);
   return svg;
 }
+
+// The haikit mark, as filled rects: [x, y, width, height, rx, part]. The parts
+// are coloured by hai.css, so the mark reverses in the dark scheme. Below about
+// 32px the full mark's inner bars blur, so small sizes get the simpler one.
+const MARKS = {
+  full: {
+    viewBox: "7 8 50 48",
+    rects: [
+      [7, 8, 26, 48, 7, "ink"],
+      [12.5, 14.5, 15, 3, 1.5, "paper"],
+      [12.5, 20.5, 9, 3, 1.5, "paper-dim"],
+      [12.5, 43.5, 15, 7, 3.5, "hot"],
+      [32, 28, 14, 8, 0, "ink"],
+      [45, 8, 12, 15, 3, "hot"],
+      [45, 25, 12, 14, 3, "hot"],
+      [45, 41, 12, 15, 3, "hot"],
+    ],
+  },
+  small: {
+    viewBox: "6 6 52 52",
+    rects: [
+      [6, 6, 28, 52, 8, "ink"],
+      [33, 26, 12, 12, 0, "ink"],
+      [44, 6, 14, 52, 4, "hot"],
+    ],
+  },
+};
+
+/** The haikit logo mark, hidden from assistive technology like the icons. */
+export function mark(size = "full", className = "hai-logo") {
+  const { viewBox, rects } = MARKS[size];
+  const svg = document.createElementNS(SVG, "svg");
+  svg.setAttribute("class", className);
+  svg.setAttribute("viewBox", viewBox);
+  svg.setAttribute("aria-hidden", "true");
+  for (const [x, y, width, height, rx, part] of rects) {
+    const rect = document.createElementNS(SVG, "rect");
+    for (const [k, v] of Object.entries({ x, y, width, height, rx })) {
+      if (v) rect.setAttribute(k, String(v));
+    }
+    rect.setAttribute("class", `hai-logo-${part}`);
+    svg.append(rect);
+  }
+  return svg;
+}