@zikojs/console 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@zikojs/console",
+  "version": "0.1.0",
+  "description": "",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "zikojs",
+    "console",
+    "log",
+    "dev-tools"
+  ],
+  "author": "zakaria elalaoui",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "ziko": "^2.0.0-beta.16.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/_actions.js

@@ -0,0 +1,29 @@
+const actions = [
+  ["Messages", [
+    ["log", () => console.log("Hello from VanJS", 42, true, null, undefined)],
+    ["info", () => console.info("Server listening on :3000")],
+    ["debug", () => console.debug("cache miss", {key: "user:12"})],
+    ["warn", () => console.warn("Deprecated: use render() instead")],
+    ["error", () => console.error(new Error("Something broke"))],
+    ["%s format", () => console.log("%s has %d items %c(styled)", "Cart", 3, "color:red")],
+    ["Repeat x5", () => { for (let i = 0; i < 5; i++) console.log("tick") }],
+  ]],
+  ["Inspect", [
+    ["Nested object", () => {
+      const o = {user: {name: "Zakaria", tags: ["js", "three", "van"]}, ids: new Set([1, 2]),
+        lookup: new Map([["a", 1], ["b", {deep: true}]]), when: new Date(), run() {}, empty: {}}
+      o.self = o
+      console.log("Click to expand", o)
+    }],
+    ["DOM node", () => console.log(document.body, document.getElementById("mount"))],
+    ["Table", () => console.table([{id: 1, name: "Ada", role: "dev"}, {id: 2, name: "Linus", role: "ops", team: "kernel"}])],
+  ]],
+  ["Timing and flow", [
+    ["Group", () => { console.group("Request"); console.log("parsing"); console.group("Auth"); console.warn("token expires soon"); console.groupEnd(); console.groupEnd() }],
+    ["Timer", () => { console.time("work"); setTimeout(() => console.timeEnd("work"), 350) }],
+    ["Count", () => console.count("clicks")],
+    ["Assert", () => console.assert(1 === 2, "math is hard")],
+    ["Rejection", () => Promise.reject(new Error("Unhandled promise"))],
+    ["Throw", () => setTimeout(() => { throw new TypeError("Uncaught from timeout") })],
+  ]],
+]

package/src/components/Console.js

@@ -0,0 +1,28 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+
+import { entryNode, nodeEntry } from "../entries/entryNode.js";
+
+export const Console = {
+  theme: van.state("light")
+};
+
+Console.log = entryNode("log", Console.theme);
+Console.info = entryNode("info", Console.theme);
+Console.debug = entryNode("debug", Console.theme);
+Console.warn = entryNode("warn", Console.theme);
+Console.error = entryNode("error", Console.theme);
+Console.table = entryNode("table", Console.theme);
+
+Console.group = entryNode("group", Console.theme);
+
+Console.groupEnd = () => {
+  const node =
+    document.createComment("groupEnd");
+
+  nodeEntry.set(node, {
+    method: "groupEnd",
+    args: []
+  });
+
+  return node;
+};

package/src/components/ConsoleBody.js

@@ -0,0 +1,46 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+import { Row } from "./Row.js";
+
+const { div } = van.tags;
+
+export function ConsoleBody(visible) {
+  let stick = true;
+
+  const body = div(
+    {
+      class: "cf-body",
+
+      onscroll: () => {
+        stick =
+          body.scrollHeight -
+          body.scrollTop -
+          body.clientHeight < 24;
+      }
+    },
+
+    () =>
+      visible.val.length
+        ? div(
+            visible.val.map(entry =>
+              Row(entry)
+            )
+          )
+        : div(
+            { class: "cf-empty" },
+            "No messages yet. Anything sent to console.* shows up here."
+          )
+  );
+
+  van.derive(() => {
+    visible.val;
+
+    requestAnimationFrame(() => {
+      if (stick) {
+        body.scrollTop =
+          body.scrollHeight;
+      }
+    });
+  });
+
+  return body;
+}

package/src/components/ConsoleFeed.js

@@ -0,0 +1,141 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+
+import { createFeed } from "../feed/createFeed.js";
+import { nodeEntry } from "../entries/entryNode.js";
+
+import { ConsoleToolbar } from "./ConsoleToolbar.js";
+import { ConsoleBody } from "./ConsoleBody.js";
+import { ConsolePrompt } from "./ConsolePrompt.js";
+
+import { Hook } from "../hook/index.js";
+import {
+  fmt,
+  safe
+} from "../utils/index.js";
+
+const { div } = van.tags;
+
+const LEVEL = {
+  log: "log",
+  dir: "log",
+  table: "log",
+  group: "log",
+
+  info: "info",
+  debug: "debug",
+  warn: "warn",
+  error: "error"
+};
+
+const LEVELS = [
+  "log",
+  "info",
+  "warn",
+  "error",
+  "debug"
+];
+
+const isProps = value =>
+  value &&
+  typeof value === "object" &&
+  !(value instanceof Node) &&
+  Object.getPrototypeOf(value) === Object.prototype;
+
+export function ConsoleFeed(...args) {
+  const [props, ...children] =
+    isProps(args[0])
+      ? args
+      : [{}, ...args];
+
+  const {
+    feed = createFeed(),
+    variant = "dark",
+    repl = true,
+    hook = false
+  } = props;
+
+  if (hook) {
+    Hook(console, feed.push);
+  }
+
+  children
+    .flat(Infinity)
+    .forEach(child => {
+      const entry = nodeEntry.get(child);
+
+      if (entry) {
+        feed.push(entry);
+      }
+    });
+
+  const theme =
+    typeof variant === "string"
+      ? van.state(variant)
+      : variant;
+
+  const levels = Object.fromEntries(
+    LEVELS.map(level => [
+      level,
+      van.state(true)
+    ])
+  );
+
+  const query = van.state("");
+
+  const count = level =>
+    van.derive(() =>
+      feed.logs.val.filter(
+        entry =>
+          LEVEL[entry.method] === level
+      ).length
+    );
+
+  const visible = van.derive(() => {
+    const search =
+      query.val.toLowerCase();
+
+    return feed.logs.val.filter(entry => {
+      const level =
+        LEVEL[entry.method];
+
+      if (
+        level &&
+        !levels[level].val
+      ) {
+        return false;
+      }
+
+      if (!search) {
+        return true;
+      }
+
+      return fmt(entry.args)
+        .map(safe)
+        .join(" ")
+        .toLowerCase()
+        .includes(search);
+    });
+  });
+
+  return div(
+    {
+      class: () =>
+        "cf " + theme.val,
+
+      style: "flex:1"
+    },
+
+    ConsoleToolbar({
+      levels,
+      query,
+      count,
+      clear: feed.clear
+    }),
+
+    ConsoleBody(visible),
+
+    repl
+      ? ConsolePrompt({ feed })
+      : ""
+  );
+}

package/src/components/ConsolePrompt.js

@@ -0,0 +1,74 @@
+import { tags } from "ziko/dom";
+const { div, span, input } = tags;
+export function ConsolePrompt({
+  feed
+}) {
+  const history = [];
+  let index = 0;
+
+  const run = code => {
+    feed.push({
+      method: "command",
+      args: [code]
+    });
+
+    try {
+      feed.push({
+        method: "result",
+        args: [(0, eval)(code)]
+      });
+    } catch (error) {
+      feed.push({
+        method: "error",
+        args: [error]
+      });
+    }
+  };
+
+  const inp = input({
+      placeholder: "Run JavaScript",
+      "aria-label": "Run JavaScript",
+      spellcheck: false,
+      autocomplete: "off",
+
+      onKeyDown: __e__ => {
+        const e = __e__.event
+        const el = e.target;
+
+        if (
+          e.key === "Enter" &&
+          el.value.trim()
+        ) {
+          history.push(el.value);
+          index = history.length;
+
+          run(el.value);
+
+          el.value = "";
+        }
+
+        else if (
+          e.key === "ArrowUp" &&
+          index > 0
+        ) {
+          el.value = history[--index];
+          e.preventDefault();
+        }
+
+        else if (e.key === "ArrowDown") {
+          el.value =
+            index < history.length - 1
+              ? history[++index]
+              : (index = history.length, "");
+        }
+      }
+    })
+
+  return div(
+    { class: "cf-prompt" },
+
+    span("\u203A"),
+    inp
+    
+  ).element;
+}

package/src/components/ConsoleToolbar.js

@@ -0,0 +1,61 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+
+const {
+  div,
+  button,
+  input
+} = van.tags;
+
+export function ConsoleToolbar({
+  levels,
+  query,
+  count,
+  clear
+}) {
+  const LEVELS = [
+    "log",
+    "info",
+    "warn",
+    "error",
+    "debug"
+  ];
+
+  return div(
+    { class: "cf-bar" },
+
+    LEVELS.map(level =>
+      button(
+        {
+          class: () =>
+            `cf-chip ${level}` +
+            (levels[level].val ? " on" : ""),
+
+          "aria-pressed": () =>
+            levels[level].val,
+
+          onclick: () =>
+            levels[level].val =
+              !levels[level].val
+        },
+
+        level,
+        " ",
+        count(level)
+      )
+    ),
+
+    input({
+      type: "search",
+      placeholder: "Filter messages",
+      "aria-label": "Filter messages",
+
+      oninput: e =>
+        query.val = e.target.value
+    }),
+
+    button(
+      { onclick: clear },
+      "Clear"
+    )
+  );
+}

package/src/components/Inspect.js

@@ -0,0 +1,101 @@
+import {
+  isObj,
+  prim,
+  primCls,
+  nodeLabel,
+  label,
+  short,
+  preview,
+  entriesOf,
+} from "../utils/index.js";
+
+import { tags } from "ziko/dom";
+import { useState, useDerived } from "ziko/hooks";
+
+const { div, span } = tags;
+
+export function Inspect(v, key, seen = [], top = false) {
+  const k =
+    key === undefined
+      ? ""
+      : span({ class: "cf-k" }, key, ": ");
+
+  const leaf = (cls, t) =>
+    span({ class: "cf-" + cls }, k, t);
+
+  if (v instanceof Error) {
+    const s = v.stack?.includes(v.message)
+      ? v.stack
+      : `${v.name}: ${v.message}\n${v.stack || ""}`;
+
+    return div(
+      { class: "cf-err" },
+      k,
+      s,
+    );
+  }
+
+  if (top && typeof v === "string") {
+    return span(v);
+  }
+
+  if (typeof v === "function") {
+    return leaf("fn", short(v));
+  }
+
+  if (!isObj(v)) {
+    return leaf(primCls(v), prim(v));
+  }
+
+  if (v instanceof Date || v instanceof RegExp) {
+    return leaf("str", short(v));
+  }
+
+  if (typeof Node !== "undefined" && v instanceof Node) {
+    return leaf("nul", nodeLabel(v));
+  }
+
+  if (seen.includes(v)) {
+    return leaf("nul", "[Circular]");
+  }
+
+  const es = entriesOf(v);
+
+  if (!es.length) {
+    return leaf(
+      "nul",
+      (label(v) ? label(v) + " " : "") +
+        (Array.isArray(v) ? "[]" : "{}"),
+    );
+  }
+
+  const [open, setOpen] = useState(false);
+
+  const header = useDerived(
+    open => div(
+      {
+        class: "cf-t" + (open ? " open" : ""),
+        onClick: () => setOpen(old => !old),
+      },
+      k,
+      open
+        ? label(v) || "Object"
+        : preview(v),
+    ),
+    [open],
+  );
+
+  const children = useDerived(
+  open => {
+    const kids = open ? es.map(([kk, x]) => Inspect(x, kk, [...seen, v]).element) : []
+    return div({ class: "cf-kids" }, ...kids)
+  },
+  [open],
+);
+
+  return div(
+    { class: "cf-node" },
+    header,
+    children
+  )
+}

package/src/components/Row.js

@@ -0,0 +1,64 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+
+import {
+  fmt,
+  isObj
+} from "../utils/index.js";
+
+import { Inspect } from "./Inspect.js";
+import { Table } from "./Table.js";
+
+const { div, span } = van.tags;
+
+const cache = new WeakMap();
+
+const buildRow = entry => {
+  const [a0, ...rest] = entry.args;
+
+  const items =
+    entry.method === "table" && isObj(a0)
+      ? [
+          Table(a0),
+          ...rest.map(x =>
+            Inspect(x, undefined, [], true).element
+          )
+        ]
+      : fmt(entry.args).map(a =>
+          Inspect(a, undefined, [], true).element
+        );
+
+  return div(
+    {
+      class: `cf-row ${entry.method}`,
+      style: `--d:${entry.depth}`
+    },
+
+    () =>
+      entry.count.val > 1
+        ? span(
+            { class: "cf-badge" },
+            entry.count.val
+          )
+        : "",
+
+    span(
+      { class: "cf-time" },
+      entry.time.toLocaleTimeString([], {
+        hour12: false
+      })
+    ),
+
+    div(
+      { class: "cf-msg" },
+      items
+    )
+  );
+};
+
+export const Row = entry =>
+  cache.get(entry) ||
+  (() => {
+    const node = buildRow(entry);
+    cache.set(entry, node);
+    return node;
+  })();

package/src/components/Table.js

@@ -0,0 +1,33 @@
+import { isObj, prim, short } from "../utils/index.js";
+import { tags } from "ziko/dom";
+const { table, thead, tbody, tr, th, td } = tags;
+export function Table(data) {
+  const rows = Array.isArray(data)
+    ? data.map((x, i) => [i, x])
+    : data instanceof Map
+      ? [...data].map(([a, b]) => [short(a), b])
+      : Object.entries(data);
+  const cols = [
+    ...new Set(rows.flatMap(([, x]) => (isObj(x) ? Object.keys(x) : []))),
+  ];
+  const hasVal = rows.some(([, x]) => !isObj(x));
+  return table(
+    { class: "cf-table" },
+    thead(
+      tr(
+        th("(index)"),
+        cols.map((c) => th(c)),
+        hasVal ? th("Value") : "",
+      ),
+    ),
+    tbody(
+      ...rows.map(([i, x]) =>
+        tr(
+          td(i),
+          cols.map((c) => td(isObj(x) && c in x ? short(x[c]) : "")),
+          hasVal ? td(isObj(x) ? "" : prim(x)) : "",
+        ),
+      ),
+    ),
+  ).element;
+}

package/src/components/index.js

@@ -0,0 +1,8 @@
+export * from './Inspect.js'
+export * from './Table.js'
+export * from './Row.js'
+export * from './ConsoleToolbar.js'
+export * from './ConsoleBody.js'
+export * from './ConsolePrompt.js'
+export * from './ConsoleFeed.js'
+export * from './Console.js'

package/src/entries/createEntry.js

@@ -0,0 +1,10 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+
+export const createEntry = (method, args) => ({
+  id: 0,
+  method,
+  args,
+  depth: 0,
+  count: van.state(1),
+  time: new Date()
+});

package/src/entries/entryNode.js

@@ -0,0 +1,22 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+import { createEntry } from "./createEntry.js";
+import { Row } from "../components/Row.js";
+const { div } = van.tags
+
+export const nodeEntry = new WeakMap();
+
+export const entryNode = (method, theme) => (...args) => {
+  const entry = createEntry(method, args);
+
+  const node = div(
+    {
+      class: () =>
+        "cf cf-solo " + theme.val
+    },
+    Row(entry)
+  );
+
+  nodeEntry.set(node, entry);
+
+  return node;
+};

package/src/feed/createFeed.js

@@ -0,0 +1,67 @@
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+import { isObj } from "../utils/index.js";
+
+export function createFeed(max = 1000) {
+  const logs = van.state([]);
+
+  let depth = 0;
+  let id = 0;
+
+  const same = (a, b) =>
+    a.method === b.method &&
+    a.depth === b.depth &&
+    a.args.length === b.args.length &&
+    a.args.every(
+      (x, i) => !isObj(x) && Object.is(x, b.args[i])
+    );
+
+  const push = src => {
+    const { method, args = [] } = src;
+
+    if (method === "clear") {
+      depth = 0;
+      logs.val = [];
+      return;
+    }
+
+    if (method === "groupEnd") {
+      depth = Math.max(0, depth - 1);
+      return;
+    }
+
+    const isGroup =
+      method === "group" ||
+      method === "groupCollapsed";
+
+    const entry = src.count
+      ? Object.assign(src, {
+          id: ++id,
+          depth
+        })
+      : {
+          id: ++id,
+          method: isGroup ? "group" : method,
+          args,
+          depth,
+          count: van.state(1),
+          time: new Date()
+        };
+
+    const last = logs.val.at(-1);
+
+    if (last && !isGroup && same(last, entry)) {
+      last.count.val++;
+      return;
+    }
+
+    logs.val = [...logs.val, entry].slice(-max);
+
+    if (isGroup) depth++;
+  };
+
+  return {
+    logs,
+    push,
+    clear: () => push({ method: "clear" })
+  };
+}

package/src/hook/index.js

@@ -0,0 +1,29 @@
+export const METHODS = ["log","info","debug","warn","error","table","dir","assert","count","countReset",
+  "time","timeEnd","timeLog","group","groupCollapsed","groupEnd","clear"]
+
+export function Hook(target, cb) {
+  const orig = {}, counts = {}, timers = {}
+  const emit = (method, args) => { try { cb({method, args}) } catch {} }
+  const ms = l => (performance.now() - timers[l]).toFixed(2) + "ms"
+  const impl = {
+    count: (l = "default") => emit("log", [`${l}: ${counts[l] = (counts[l] || 0) + 1}`]),
+    countReset: (l = "default") => { counts[l] = 0 },
+    time: (l = "default") => { timers[l] = performance.now() },
+    timeEnd: (l = "default") => { if (l in timers) { emit("log", [`${l}: ${ms(l)}`]); delete timers[l] } },
+    timeLog: (l = "default", ...r) => { if (l in timers) emit("log", [`${l}: ${ms(l)}`, ...r]) },
+    assert: (c, ...r) => { if (!c) emit("error", ["Assertion failed:", ...r]) },
+  }
+  METHODS.forEach(m => {
+    orig[m] = target[m]
+    target[m] = (...a) => { orig[m]?.apply(target, a); (impl[m] || ((...x) => emit(m, x)))(...a) }
+  })
+  const onErr = e => emit("error", [e.error || e.message])
+  const onRej = e => emit("error", [e.reason instanceof Error ? e.reason : new Error("Unhandled rejection: " + safe(e.reason))])
+  addEventListener("error", onErr)
+  addEventListener("unhandledrejection", onRej)
+  return () => {
+    METHODS.forEach(m => target[m] = orig[m])
+    removeEventListener("error", onErr)
+    removeEventListener("unhandledrejection", onRej)
+  }
+}

package/src/index.css

@@ -0,0 +1,310 @@
+:root {
+  --mono:
+    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: #e8eaf0;
+  color: #232834;
+  font: 14px/1.5 var(--sans);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+header {
+  padding: 14px 20px 4px;
+}
+header h1 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 650;
+}
+header p {
+  margin: 2px 0 0;
+  color: #5c6578;
+  font-size: 13px;
+}
+main {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 230px 1fr;
+  gap: 14px;
+  padding: 12px 20px 20px;
+}
+@media (max-width: 720px) {
+  main {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+}
+aside {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 6px;
+}
+aside h2 {
+  width: 100%;
+  margin: 6px 0 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #5c6578;
+}
+aside button {
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 10px;
+  border: 1px solid #c9cedb;
+  background: #f6f7fa;
+  color: inherit;
+  border-radius: 5px;
+  cursor: pointer;
+}
+aside button:hover {
+  background: #fff;
+  border-color: #8a93a8;
+}
+button:focus-visible,
+input:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 1px;
+}
+
+/* ---------- Console component ---------- */
+.cf {
+  --bg: #171b24;
+  --bar: #1e2330;
+  --line: #2b3244;
+  --fg: #d8dee9;
+  --dim: #7d889e;
+  --str: #e9b27a;
+  --num: #8fb8ff;
+  --bool: #c79bff;
+  --nul: #8b93a5;
+  --key: #7fd1c2;
+  --warn-bg: #2e2813;
+  --warn-fg: #f0d27a;
+  --err-bg: #331a1d;
+  --err-fg: #ff9b9b;
+  --hover: #202637;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font: 12.5px/1.55 var(--mono);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.cf.light {
+  --bg: #fbfbfd;
+  --bar: #f0f2f6;
+  --line: #dfe3ea;
+  --fg: #252b37;
+  --dim: #7a8396;
+  --str: #b4531c;
+  --num: #1d5fd1;
+  --bool: #7a3fc4;
+  --nul: #7a8396;
+  --key: #0b7a6c;
+  --warn-bg: #fff6da;
+  --warn-fg: #7a5a00;
+  --err-bg: #ffeceb;
+  --err-fg: #b3261e;
+  --hover: #f3f5f9;
+}
+.cf-bar {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 8px;
+  background: var(--bar);
+  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
+}
+.cf-bar input {
+  flex: 1;
+  min-width: 120px;
+  font: inherit;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 3px 8px;
+}
+.cf-bar button {
+  font: inherit;
+  background: none;
+  color: var(--dim);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+.cf-bar button:hover {
+  color: var(--fg);
+  border-color: var(--line);
+}
+.cf-bar button.cf-chip.on {
+  color: var(--fg);
+  border-color: var(--line);
+  background: var(--bg);
+}
+.cf-chip.warn.on {
+  color: var(--warn-fg) !important;
+}
+.cf-chip.error.on {
+  color: var(--err-fg) !important;
+}
+.cf-body {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+.cf-empty {
+  padding: 18px 12px;
+  color: var(--dim);
+}
+.cf-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 2px 10px 2px calc(10px + var(--d, 0) * 16px);
+  border-bottom: 1px solid var(--line);
+}
+.cf-row:hover {
+  background: var(--hover);
+}
+.cf-row.warn {
+  background: var(--warn-bg);
+  color: var(--warn-fg);
+}
+.cf-row.error {
+  background: var(--err-bg);
+  color: var(--err-fg);
+}
+.cf-row.group .cf-msg {
+  font-weight: 650;
+}
+.cf-row.command .cf-msg::before,
+.cf-row.result .cf-msg::before {
+  color: var(--dim);
+  margin-right: 0.6em;
+}
+.cf-row.command .cf-msg::before {
+  content: "\203A";
+}
+.cf-row.result .cf-msg::before {
+  content: "\2190";
+}
+.cf-badge {
+  background: var(--dim);
+  color: var(--bg);
+  border-radius: 9px;
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 17px;
+  margin-top: 2px;
+}
+.cf-time {
+  color: var(--dim);
+  font-size: 11px;
+  margin-top: 1px;
+  flex: none;
+}
+.cf-msg {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.cf-msg > * {
+  margin-right: 0.7em;
+}
+.cf-str {
+  color: var(--str);
+}
+.cf-num {
+  color: var(--num);
+}
+.cf-bool {
+  color: var(--bool);
+}
+.cf-nul {
+  color: var(--nul);
+}
+.cf-fn {
+  color: var(--key);
+  font-style: italic;
+}
+.cf-k {
+  color: var(--key);
+}
+.cf-node {
+  display: inline-block;
+  vertical-align: top;
+  max-width: 100%;
+}
+.cf-t {
+  cursor: pointer;
+}
+.cf-t::before {
+  content: "\25B8";
+  display: inline-block;
+  width: 1em;
+  color: var(--dim);
+  transition: transform 0.12s;
+}
+.cf-t.open::before {
+  transform: rotate(90deg);
+}
+.cf-kids {
+  margin-left: 0.5em;
+  padding-left: 0.8em;
+  border-left: 1px solid var(--line);
+}
+.cf-kids > * {
+  display: block;
+}
+.cf-err {
+  display: block;
+}
+.cf-table {
+  border-collapse: collapse;
+  margin: 3px 0;
+}
+.cf-table th,
+.cf-table td {
+  border: 1px solid var(--line);
+  padding: 1px 10px;
+  text-align: left;
+}
+.cf-table th {
+  background: var(--bar);
+  font-weight: 600;
+}
+.cf-prompt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  border-top: 1px solid var(--line);
+  background: var(--bar);
+}
+.cf-prompt span {
+  color: var(--key);
+}
+.cf-prompt input {
+  flex: 1;
+  font: inherit;
+  background: none;
+  border: 0;
+  color: var(--fg);
+  outline: 0;
+}

package/src/index.js

@@ -0,0 +1,51 @@
+import './index.css'
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js"
+import {
+  ConsoleFeed,
+  Console
+} from './components'
+import { createFeed } from './feed/createFeed'
+import { Hook } from './hook/index.js'
+
+Object.assign(window, {ConsoleFeed: {Hook, createFeed, ConsoleFeed, Console}})
+
+/* =====================================================================
+   Demo
+   ===================================================================== */
+
+const theme = van.state("light")
+
+// 1) Declarative: children only, or props first then children
+document.body.append(
+  ConsoleFeed({variant: theme, repl: false},
+    Console.log("Hello from VanJS", 42, true, null, undefined),
+    Console.info("Server listening on :3000"),
+    Console.group("Request"),
+    Console.log("parsing"),
+    Console.warn("token expires soon"),
+    Console.groupEnd(),
+    Console.error(new Error("Something broke")),
+    Console.table([{id: 1, name: "Ada"}, {id: 2, name: "Linus"}]),
+  )
+)
+
+// 2) Standalone: a single row, no toolbar
+document.body.append(Console.log("Just one line", {a: 1, b : 1}))
+document.body.append(Console.warn("Standalone warning"))
+document.body.append(Console.table([1,2,3]))
+
+
+// 3) Live: hook the real console into a feed
+Console.theme = theme
+const feed = createFeed()
+Hook(console, e => feed.push(e))
+globalThis.c = ConsoleFeed({feed})
+document.body.append(c)
+
+console.log("Hello from VanJS", 42, true, null, undefined)
+console.log({a: 1})
+console.group("Request")
+console.log("parsing")
+console.group("Auth")
+console.warn("token expires soon")
+console.groupEnd()

package/src/utils/fmt.js

@@ -0,0 +1,20 @@
+/* printf-style substitutions: %s %d %i %f %o %O %j %c %% */
+export function fmt(args) {
+  const [f, ...rest] = args
+  if (typeof f !== "string" || !rest.length || !/%[sdifoOjc%]/.test(f)) return args
+  const s = f.replace(/%([sdifoOjc%])/g, (m, c) => {
+    if (c === "%") return "%"
+    if (!rest.length) return m
+    const a = rest.shift()
+    switch (c) {
+      case "s": return isObj(a) ? short(a) : String(a)
+      case "d": return String(Number(a))
+      case "i": return String(parseInt(a))
+      case "f": return String(parseFloat(a))
+      case "c": return ""
+      case "j": try { return JSON.stringify(a) } catch { return "[Circular]" }
+      default: return isObj(a) ? preview(a) : prim(a)
+    }
+  })
+  return [s, ...rest]
+}

package/src/utils/index.js

@@ -0,0 +1,2 @@
+export * from './value-formatting.js'
+export * from './fmt.js'

package/src/utils/value-formatting.js

@@ -0,0 +1,37 @@
+export const isObj = v => v !== null && typeof v === "object"
+export const cname = v => { try { return Object.getPrototypeOf(v)?.constructor?.name || "" } catch { return "" } }
+export const prim = v => typeof v === "string" ? JSON.stringify(v) : typeof v === "bigint" ? v + "n" : String(v)
+export const primCls = v => v == null ? "nul" : typeof v === "string" ? "str" : typeof v === "boolean" ? "bool" : "num"
+export const nodeLabel = n => n.nodeType === 1
+  ? `<${n.localName}${n.id ? "#" + n.id : ""}${n.classList.length ? "." + [...n.classList].join(".") : ""}>` : String(n)
+
+export const label = v =>
+  Array.isArray(v) ? `Array(${v.length})` :
+  v instanceof Map ? `Map(${v.size})` :
+  v instanceof Set ? `Set(${v.size})` :
+  (n => n && n !== "Object" ? n : "")(cname(v))
+
+export const short = v =>
+  typeof v === "function" ? `ƒ ${v.name || ""}()` :
+  !isObj(v) ? prim(v) :
+  v instanceof Date ? v.toISOString() :
+  v instanceof RegExp ? String(v) :
+  Array.isArray(v) ? label(v) : (label(v) || "Object") + " {…}"
+
+export const entriesOf = v => {
+  try {
+    return Array.isArray(v) ? v.map((x, i) => [i, x])
+      : v instanceof Map ? [...v].map(([a, b]) => [short(a), b])
+      : v instanceof Set ? [...v].map((x, i) => [i, x])
+      : Object.keys(v).map(k => [k, v[k]])
+  } catch { return [] }
+}
+
+export const preview = v => {
+  const es = entriesOf(v), list = Array.isArray(v) || v instanceof Set
+  const body = es.slice(0, 5).map(([k, x]) => (list ? "" : k + ": ") + short(x)).join(", ") + (es.length > 5 ? ", …" : "")
+  const l = label(v)
+  return (l ? l + " " : "") + (list ? `[${body}]` : `{${body}}`)
+}
+
+export const safe = a => a instanceof Error ? a.message : isObj(a) ? preview(a) : typeof a === "function" ? short(a) : String(a)