chirami 0.0.5 → 0.0.7

package/dist/chirami.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e, Fragment as m } from "react/jsx-runtime";
-import { useState as p, useRef as x, useEffect as g } from "react";
+import { useState as h, useRef as b, useEffect as p } from "react";
 const f = (i) => /* @__PURE__ */ r(
   "svg",
   {
@@ -15,7 +15,7 @@ const f = (i) => /* @__PURE__ */ r(
       /* @__PURE__ */ e("polygon", { fill: "#ff68ca", points: ".5 752.55 .5 457.99 1692.59 457.99 1522.52 752.55 .5 752.55" })
     ]
   }
-), y = (i) => /* @__PURE__ */ r(
+), x = (i) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -32,7 +32,7 @@ const f = (i) => /* @__PURE__ */ r(
     ]
   }
 );
-class w {
+class y {
   logs = [];
   totalCount = 0;
   listeners = /* @__PURE__ */ new Set();
@@ -44,28 +44,28 @@ class w {
   };
   isPatched = !1;
   init() {
-    this.isPatched || (["log", "info", "warn", "error"].forEach((t) => {
-      console[t] = (...s) => {
-        this.originalConsole[t].apply(console, s), this.addLog(t, s);
+    this.isPatched || (["log", "info", "warn", "error"].forEach((o) => {
+      console[o] = (...s) => {
+        this.originalConsole[o].apply(console, s), this.addLog(o, s);
       };
     }), this.totalCount = 0, this.isPatched = !0);
   }
-  addLog(t, s) {
-    const a = {
+  addLog(o, s) {
+    const c = {
       id: Math.random().toString(36).slice(2),
-      type: t,
+      type: o,
       args: s,
       timestamp: Date.now()
     };
-    this.logs = [...this.logs.slice(-399), a], this.totalCount = this.totalCount + 1, this.notify();
+    this.logs = [...this.logs.slice(-399), c], this.totalCount = this.totalCount + 1, this.notify();
   }
-  subscribe(t) {
-    return this.listeners.add(t), t(this.logs), () => {
-      this.listeners.delete(t);
+  subscribe(o) {
+    return this.listeners.add(o), o(this.logs), () => {
+      this.listeners.delete(o);
     };
   }
   notify() {
-    this.listeners.forEach((t) => t(this.logs));
+    this.listeners.forEach((o) => o(this.logs));
   }
   getLogs() {
     return this.logs;
@@ -76,23 +76,28 @@ class w {
   clear() {
     this.logs = [], this.notify();
   }
+  dispose() {
+    this.isPatched && (["log", "info", "warn", "error"].forEach((o) => {
+      console[o] = this.originalConsole[o];
+    }), this.logs = [], this.totalCount = 0, this.listeners.clear(), this.isPatched = !1);
+  }
 }
-const d = new w();
-function b(i, t = 2) {
+const d = new y();
+function w(i, o = 2) {
   const s = /* @__PURE__ */ new WeakSet();
-  return JSON.stringify(i, (a, o) => {
-    if (o === null || typeof o != "object")
-      return o;
-    if (s.has(o))
+  return JSON.stringify(i, (c, t) => {
+    if (t === null || typeof t != "object")
+      return t;
+    if (s.has(t))
       return "[Circular]";
-    if (s.add(o), typeof HTMLElement < "u" && o instanceof HTMLElement) {
-      const l = o.id ? `#${o.id}` : "", c = o.className ? `.${o.className.split(" ").join(".")}` : "";
-      return `<${o.tagName.toLowerCase()}${l}${c}>`;
+    if (s.add(t), typeof HTMLElement < "u" && t instanceof HTMLElement) {
+      const l = t.id ? `#${t.id}` : "", a = t.className ? `.${t.className.split(" ").join(".")}` : "";
+      return `<${t.tagName.toLowerCase()}${l}${a}>`;
     }
-    return o instanceof Error ? { message: o.message, stack: o.stack } : o;
-  }, t);
+    return t instanceof Error ? { message: t.message, stack: t.stack } : t;
+  }, o);
 }
-const C = {
+const S = {
   log: "#d4d4d4",
   info: "#66e3f3",
   warn: "#ffe267",
@@ -111,7 +116,12 @@ const C = {
     overflowY: "auto",
     zIndex: 9999,
     borderTop: "1px solid #333",
-    boxShadow: "0 -2px 10px rgba(0,0,0,0.3)"
+    boxShadow: "0 -2px 10px rgba(0,0,0,0.3)",
+    boxSizing: "border-box",
+    margin: 0,
+    padding: 0,
+    lineHeight: 1.5,
+    pointerEvents: "auto"
   },
   header: {
     display: "flex",
@@ -122,41 +132,63 @@ const C = {
     fontFamily: "system-ui",
     fontWeight: "700",
     position: "sticky",
-    top: 0
+    top: 0,
+    boxSizing: "border-box",
+    margin: 0
+  },
+  headerLogo: {
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap"
   },
   button: {
+    appearance: "none",
+    border: "none",
     marginLeft: 8,
     backgroundColor: "#ffffff11",
+    color: "inherit",
+    fontFamily: "system-ui",
+    fontSize: "inherit",
     cursor: "pointer",
-    padding: 4
+    padding: 4,
+    borderRadius: "2px",
+    lineHeight: "inherit",
+    boxSizing: "border-box"
   },
   icon: {
     width: "14px",
     height: "14px",
-    marginRight: "-4px"
+    marginRight: "-4px",
+    boxSizing: "border-box"
   },
   logo: {
     width: "80px",
-    height: "14px"
+    height: "14px",
+    boxSizing: "border-box"
   },
   logRow: {
     padding: "4px 8px",
     borderBottom: "1px solid #333",
     whiteSpace: "pre-wrap",
-    wordBreak: "break-all"
+    wordBreak: "break-all",
+    boxSizing: "border-box",
+    margin: 0
   },
   logTimestamp: {
     color: "#777",
     fontFamily: "monospace",
-    marginRight: "1em"
+    marginRight: "1em",
+    boxSizing: "border-box"
   },
   milliSecond: {
     fontSize: "10px"
   },
   logArgs: {
-    marginRight: "8px"
+    marginRight: "8px",
+    boxSizing: "border-box"
   },
   chiramiButton: {
+    appearance: "none",
     position: "fixed",
     bottom: "10px",
     right: "10px",
@@ -172,10 +204,16 @@ const C = {
     display: "flex",
     alignItems: "center",
     gap: "2px",
-    fontWeight: "400"
+    fontWeight: "400",
+    boxSizing: "border-box",
+    margin: 0,
+    lineHeight: "normal",
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontSize: "inherit"
   },
   buttonIcon: {
-    width: "12px"
+    width: "12px",
+    boxSizing: "border-box"
   },
   chiramiButtonCount: {
     color: "#f40",
@@ -183,63 +221,60 @@ const C = {
     fontWeight: "700"
   }
 };
-function h(i) {
+function g(i) {
   return i.toString().padStart(2, "0");
 }
-function S(i) {
+function C(i) {
   return i.toString().padStart(3, "0");
 }
 function k(i) {
-  const t = new Date(i.getTime());
+  const o = new Date(i.getTime());
   return /* @__PURE__ */ r(m, { children: [
-    /* @__PURE__ */ e("span", { children: `${t.getFullYear()}-${h(t.getMonth() + 1)}-${h(t.getDay())} ${h(t.getHours())}:${h(t.getMinutes())}:${h(t.getSeconds())}` }),
+    /* @__PURE__ */ e("span", { children: `${o.getFullYear()}-${g(o.getMonth() + 1)}-${g(o.getDate())} ${g(o.getHours())}:${g(o.getMinutes())}:${g(o.getSeconds())}` }),
     /* @__PURE__ */ r("span", { style: n.milliSecond, children: [
       ".",
-      S(t.getMilliseconds())
+      C(o.getMilliseconds())
     ] })
   ] });
 }
-const I = () => {
-  const [i, t] = p([]), [s, a] = p(!1), o = x(null);
-  return g(() => {
+const M = () => {
+  const [i, o] = h([]), [s, c] = h(!1), t = b(null);
+  return p(() => {
     d.init();
-    const l = d.subscribe((c) => {
-      t(c);
+    const l = d.subscribe((a) => {
+      o(a);
     });
     return () => l();
-  }, []), g(() => {
-    s && o.current && o.current.scrollIntoView({ behavior: "smooth" });
-  }, [i, s]), s ? /* @__PURE__ */ r("div", { style: n.container, children: [
+  }, []), p(() => {
+    s && t.current && t.current.scrollIntoView({ behavior: "smooth" });
+  }, [i, s]), s ? /* @__PURE__ */ r("div", { style: n.container, onClick: (l) => l.stopPropagation(), children: [
     /* @__PURE__ */ r("div", { style: n.header, children: [
-      /* @__PURE__ */ r("span", { children: [
+      /* @__PURE__ */ r("div", { style: n.headerLogo, children: [
         /* @__PURE__ */ e(f, { style: n.icon }),
-        /* @__PURE__ */ e(
-          y,
-          {
-            style: n.logo
-          }
-        ),
-        " (",
-        d.getTotalCount(),
-        ")"
+        /* @__PURE__ */ e(x, { style: n.logo }),
+        /* @__PURE__ */ r("div", { style: { whiteSpace: "nowrap" }, children: [
+          "(",
+          d.getTotalCount(),
+          ")"
+        ] })
       ] }),
-      /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r("div", { style: { whiteSpace: "nowrap" }, children: [
         /* @__PURE__ */ e("button", { onClick: () => d.clear(), style: n.button, children: "Clear" }),
-        /* @__PURE__ */ e("button", { onClick: () => a(!1), style: n.button, children: "Close ▼" })
+        /* @__PURE__ */ e("button", { onClick: () => c(!1), style: n.button, children: "Close ▼" })
       ] })
     ] }),
     /* @__PURE__ */ r("div", { style: { textAlign: "left" }, children: [
-      i.map((l) => /* @__PURE__ */ r("div", { style: { ...n.logRow, color: C[l.type] }, children: [
+      i.map((l) => /* @__PURE__ */ r("div", { style: { ...n.logRow, color: S[l.type] }, children: [
         /* @__PURE__ */ e("span", { style: n.logTimestamp, children: k(new Date(l.timestamp)) }),
-        l.args.map((c, u) => /* @__PURE__ */ e("span", { style: n.logArgs, children: typeof c == "object" ? b(c) : String(c) }, `log-args-${u}`))
+        l.args.map((a, u) => /* @__PURE__ */ e("span", { style: n.logArgs, children: typeof a == "object" ? w(a) : String(a) }, `log-args-${u}`))
       ] }, l.id)),
-      /* @__PURE__ */ e("div", { ref: o })
+      /* @__PURE__ */ e("div", { ref: t })
     ] })
   ] }) : /* @__PURE__ */ r(
     "button",
     {
       style: n.chiramiButton,
-      onClick: () => a(!0),
+      onClick: () => c(!0),
       children: [
         /* @__PURE__ */ e(f, { style: n.buttonIcon }),
         /* @__PURE__ */ e("span", { style: n.chiramiButtonCount, children: d.getTotalCount() })
@@ -248,6 +283,6 @@ const I = () => {
   );
 };
 export {
-  I as ChiramiViewer,
+  M as ChiramiViewer,
   d as chiramiStore
 };

package/dist/chirami.umd.cjs

@@ -1 +1 @@
-(function(r,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(r=typeof globalThis<"u"?globalThis:r||self,t(r.Chirami={},r.jsxRuntime,r.React))})(this,(function(r,t,d){"use strict";const f=i=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 2000 2000",width:"32",height:"32",...i,children:[t.jsx("rect",{fill:"#d4d4d4",x:".5",y:".5",width:"1785.85",height:"294.57"}),t.jsx("polygon",{fill:"#66e3f3",points:".5 1743.03 .5 1448.47 1120.74 1448.47 950.67 1743.03 .5 1743.03"}),t.jsx("polygon",{fill:"#ffe267",points:".5 1210.04 .5 915.47 1428.46 915.47 1258.39 1210.04 .5 1210.04"}),t.jsx("polygon",{fill:"#ff68ca",points:".5 752.55 .5 457.99 1692.59 457.99 1522.52 752.55 .5 752.55"})]}),g=i=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1261.05 263.86",width:"160",height:"33.4781333",fill:"currentColor",...i,children:[t.jsx("path",{d:"M171.23,173.27c-28.37,42.73-63.1,67.36-90,67.36-17.61,0-36.2-14.63-36.2-47.73,0-23.1,9.29-54.66,30.82-81.99,40.6-51.58,110.06-85.07,121.8-75.06,5.87,5,0,17.32-6.85,30.79-2.93,5.77-6.36,11.93-8.32,17.71-1.96,5-2.94,9.62-2.94,14.24,0,11.16,6.85,19.63,16.63,24.63,9.78,4.62,16.63.77,19.08-5.77,3.42-8.47,10.27-21.56,18.59-34.64,4.89-7.7,6.85-15.4,6.85-22.33,0-15.01-12.72-30.02-29.35-41.57-8.32-5.39-19.57-8.08-31.79-8.08s-25.92,2.69-38.64,6.54C85.63,37.01-1.92,106.68.03,184.43c.98,31.56,21.03,55.81,44.02,65.44,12.23,5.39,26.9,8.08,43.05,8.08,21.03,0,43.05-4.62,63.1-15.78,17.61-10.39,44.02-32.72,44.02-55.04,0-3.85-.98-8.47-3.42-12.7-4.89-8.85-16.14-6.54-19.57-1.15Z"}),t.jsx("path",{d:"M512.17,105.91c5.87-5.39,10.27-16.94,3.91-27.33-7.83-12.7-25.93-17.71-36.69-8.47-4.89,4.23-7.83,9.62-7.83,15.78,0,4.23,1.47,9.24,4.89,14.24,8.8,13.09,27.39,13.86,35.71,5.77Z"}),t.jsx("path",{d:"M1234.15,63.95c-11.25,0-21.52,10.01-21.52,20.79,0,11.93,13.21,23.48,28.86,23.48,12.23,0,19.57-8.85,19.57-19.25,0-11.16-13.21-25.02-26.9-25.02Z"}),t.jsx("path",{d:"M1236.6,192.9c-15.16,26.17-40.6,51.96-60.17,51.96-5.38,0-7.34-3.46-7.34-9.62s2.45-14.24,6.85-23.09c8.32-15.4,30.82-44.27,40.11-60.82,12.72-19.25,8.8-35.8-.49-43.5-6.36-5.77-12.23-5-19.57,2.69-15.88,17.56-41.93,54.09-56.34,80.99-.8.69-1.59,1.53-2.36,2.54-18.1,23.48-42.07,50.42-57.23,50.42-7.83,0-12.72-6.16-12.72-15.01,0-13.47,12.72-30.41,26.41-46.96,20.06-24.25,30.33-41.96,30.33-55.04s-7.83-23.1-22.01-23.48c-15.65-.38-41.58,12.7-63.59,28.1,0-16.17-10.27-30.02-25.92-30.02s-43.04,14.63-64.08,30.79c.98-3.85,1.47-7.31,1.47-10.39,0-6.16-2.45-12.7-6.85-18.48-4.89-6.93-12.23-7.31-18.59,0-26.46,31.75-57.14,77.4-70.91,103.44-15.4,20.49-34.77,38.59-49.42,38.59-4.89,0-6.85-3.46-6.85-9.24,0-25.79,41.09-67.75,53.81-88.92,12.72-20.02,8.32-36.95,0-44.65-5.87-5.39-14.19-5-20.06,2.69l-9.29,11.93c-4.4-10.01-15.16-16.94-32.77-16.94-24.95,0-65.06,18.09-104.19,62.36-9.02,9.85-15.71,20.31-20.11,30.39-.32.48-.64.99-.92,1.56-15.16,26.94-42.56,50.81-59.68,50.81-6.85,0-10.76-6.54-10.76-16.17,0-5.77,1.47-11.55,3.91-17.32,7.83-19.63,31.31-45.81,52.83-65.05,5.38-5.39,8.32-10.78,8.32-15.4,0-10.01-6.36-17.71-14.19-25.79-5.87-5.77-13.21-3.85-22.01.77-17.12,9.24-28.37,13.86-42.56,16.55,6.36-12.7,10.27-25.02,10.27-33.49s-3.91-12.7-14.19-12.7c-17.12,0-49.4,29.25-49.4,48.88,0,6.93,3.42,13.09,13.21,16.94-25.92,56.2-81.69,101.23-102.72,101.23-3.42,0-6.85-3.08-6.85-8.85,0-13.47,16.63-39.65,31.31-59.28,12.72-16.94,23.97-36.95,23.97-49.65,0-8.47-2.93-14.63-7.83-18.86-6.85-5.77-12.72-5-19.57,2.31-8.85,9.75-40.55,48.2-57.36,81.67-.69.63-1.31,1.37-1.82,2.24-14.67,23.48-40.6,50.81-57.72,50.81-6.85,0-9.29-5-9.29-13.09,0-6.16,1.96-14.24,6.36-22.71,5.38-9.24,17.61-25.41,44.51-63.13,3.91-5.39,5.38-10.78,5.38-16.17,0-15.01-14.19-26.94-28.37-26.94-9.29,0-26.41,4.62-41.09,13.09,4.89-5.39,35.22-41.19,45-53.89,11.74-16.17,17.61-30.41,17.61-40.8,0-5.39-1.47-10.39-3.91-14.63-4.4-7.7-11.74-9.24-19.57-1.54-39.62,40.03-136.47,168.98-156.04,209.4-12.23,25.4-5.38,34.64,2.45,41.96,5.87,5.77,13.21,4.62,17.12-2.31,11.74-23.1,29.35-49.65,45.98-71.21,25.93-33.1,72.39-57.35,76.8-57.35,3.42,0-3.91,9.24-13.21,21.94-18.59,22.71-42.56,56.2-42.56,80.45,0,20.02,14.67,32.72,46.96,32.72,20.75,0,41.7-8.46,57.61-20.66,4.68,12.06,16.51,20.27,36.31,20.27,53.81,0,103.7-50.42,138.92-113.55,11.25-.38,24.46-2.31,38.15-7.31-19.57,18.09-37.18,38.49-48.43,61.2-3.42,8.08-4.89,15.01-4.89,21.17,0,22.33,17.12,38.88,47.94,38.88,20.68,0,45.13-8.31,61.83-21.66,6.4,12.72,20.14,20.88,40.4,20.88s41.58-11.93,55.76-22.71c3.91,14.24,18.1,24.25,42.56,24.25,15.57,0,31.54-5.56,45.06-13.89,2.09,4.04,5.34,7.41,9.23,10.04,8.32,5.77,13.7,3.46,17.12-2.69,19.08-35.41,41.58-70.44,68.97-93.54,29.35-25.4,48.43-33.87,52.34-33.87,4.4,0-9.29,14.63-22.5,31.95-13.21,16.17-29.35,36.95-36.2,50.81-4.89,9.62-8.8,21.94-8.8,28.48,0,10.01,3.42,15.4,10.76,21.17,7.83,6.16,14.67,5,19.57-2.31,20.54-35.8,44.02-72.36,82.18-102.39,28.86-22.71,39.13-26.56,43.05-26.56s-7.83,11.55-18.59,24.25c-11.25,13.86-27.39,34.64-35.22,47.73-5.38,9.62-7.34,18.09-7.34,25.02,0,20.79,18.1,35.03,51.36,35.03,20.03,0,41.97-8.4,58.52-20.53,4.91,12.28,17.99,20.14,40.78,20.14,28.86,0,62.61-16.17,77.29-40.42,6.36-10.01,6.85-19.63,2.45-26.17-4.4-6.93-10.76-7.7-14.67-.77ZM709.29,242.94c-4.89,0-6.85-4.62-6.85-11.55,0-12.32,8.32-32.72,22.99-50.81,24.95-31.56,58.7-55.81,68.48-55.81,4.89,0,5.87,2.69,5.87,7.31,0,10.01-8.8,28.87-27.88,55.04-23.97,32.33-46.47,55.81-62.61,55.81Z"})]});class u{logs=[];totalCount=0;listeners=new Set;originalConsole={log:console.log,info:console.info,warn:console.warn,error:console.error};isPatched=!1;init(){this.isPatched||(["log","info","warn","error"].forEach(o=>{console[o]=(...n)=>{this.originalConsole[o].apply(console,n),this.addLog(o,n)}}),this.totalCount=0,this.isPatched=!0)}addLog(o,n){const p={id:Math.random().toString(36).slice(2),type:o,args:n,timestamp:Date.now()};this.logs=[...this.logs.slice(-399),p],this.totalCount=this.totalCount+1,this.notify()}subscribe(o){return this.listeners.add(o),o(this.logs),()=>{this.listeners.delete(o)}}notify(){this.listeners.forEach(o=>o(this.logs))}getLogs(){return this.logs}getTotalCount(){return this.totalCount}clear(){this.logs=[],this.notify()}}const a=new u;function x(i,o=2){const n=new WeakSet;return JSON.stringify(i,(p,e)=>{if(e===null||typeof e!="object")return e;if(n.has(e))return"[Circular]";if(n.add(e),typeof HTMLElement<"u"&&e instanceof HTMLElement){const l=e.id?`#${e.id}`:"",c=e.className?`.${e.className.split(" ").join(".")}`:"";return`<${e.tagName.toLowerCase()}${l}${c}>`}return e instanceof Error?{message:e.message,stack:e.stack}:e},o)}const y={log:"#d4d4d4",info:"#66e3f3",warn:"#ffe267",error:"#ff68ca"},s={container:{position:"fixed",bottom:0,left:0,width:"100%",height:"300px",backgroundColor:"#1e1e1e",color:"#d4d4d4",fontFamily:"monospace",fontSize:"12px",overflowY:"auto",zIndex:9999,borderTop:"1px solid #333",boxShadow:"0 -2px 10px rgba(0,0,0,0.3)"},header:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 8px",backgroundColor:"#333",fontFamily:"system-ui",fontWeight:"700",position:"sticky",top:0},button:{marginLeft:8,backgroundColor:"#ffffff11",cursor:"pointer",padding:4},icon:{width:"14px",height:"14px",marginRight:"-4px"},logo:{width:"80px",height:"14px"},logRow:{padding:"4px 8px",borderBottom:"1px solid #333",whiteSpace:"pre-wrap",wordBreak:"break-all"},logTimestamp:{color:"#777",fontFamily:"monospace",marginRight:"1em"},milliSecond:{fontSize:"10px"},logArgs:{marginRight:"8px"},chiramiButton:{position:"fixed",bottom:"10px",right:"10px",zIndex:9999,padding:"0 8px",backgroundColor:"#333",opacity:"0.5",color:"#ccc",border:"none",borderRadius:"12px",boxShadow:"#00000033 1px 1px 2px 2px",cursor:"pointer",display:"flex",alignItems:"center",gap:"2px",fontWeight:"400"},buttonIcon:{width:"12px"},chiramiButtonCount:{color:"#f40",fontFamily:"monospace",fontWeight:"700"}};function h(i){return i.toString().padStart(2,"0")}function w(i){return i.toString().padStart(3,"0")}function m(i){const o=new Date(i.getTime());return t.jsxs(t.Fragment,{children:[t.jsx("span",{children:`${o.getFullYear()}-${h(o.getMonth()+1)}-${h(o.getDay())} ${h(o.getHours())}:${h(o.getMinutes())}:${h(o.getSeconds())}`}),t.jsxs("span",{style:s.milliSecond,children:[".",w(o.getMilliseconds())]})]})}const b=()=>{const[i,o]=d.useState([]),[n,p]=d.useState(!1),e=d.useRef(null);return d.useEffect(()=>{a.init();const l=a.subscribe(c=>{o(c)});return()=>l()},[]),d.useEffect(()=>{n&&e.current&&e.current.scrollIntoView({behavior:"smooth"})},[i,n]),n?t.jsxs("div",{style:s.container,children:[t.jsxs("div",{style:s.header,children:[t.jsxs("span",{children:[t.jsx(f,{style:s.icon}),t.jsx(g,{style:s.logo})," (",a.getTotalCount(),")"]}),t.jsxs("div",{children:[t.jsx("button",{onClick:()=>a.clear(),style:s.button,children:"Clear"}),t.jsx("button",{onClick:()=>p(!1),style:s.button,children:"Close ▼"})]})]}),t.jsxs("div",{style:{textAlign:"left"},children:[i.map(l=>t.jsxs("div",{style:{...s.logRow,color:y[l.type]},children:[t.jsx("span",{style:s.logTimestamp,children:m(new Date(l.timestamp))}),l.args.map((c,C)=>t.jsx("span",{style:s.logArgs,children:typeof c=="object"?x(c):String(c)},`log-args-${C}`))]},l.id)),t.jsx("div",{ref:e})]})]}):t.jsxs("button",{style:s.chiramiButton,onClick:()=>p(!0),children:[t.jsx(f,{style:s.buttonIcon}),t.jsx("span",{style:s.chiramiButtonCount,children:a.getTotalCount()})]})};r.ChiramiViewer=b,r.chiramiStore=a,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.Chirami={},l.jsxRuntime,l.React))})(this,(function(l,o,d){"use strict";const p=i=>o.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 2000 2000",width:"32",height:"32",...i,children:[o.jsx("rect",{fill:"#d4d4d4",x:".5",y:".5",width:"1785.85",height:"294.57"}),o.jsx("polygon",{fill:"#66e3f3",points:".5 1743.03 .5 1448.47 1120.74 1448.47 950.67 1743.03 .5 1743.03"}),o.jsx("polygon",{fill:"#ffe267",points:".5 1210.04 .5 915.47 1428.46 915.47 1258.39 1210.04 .5 1210.04"}),o.jsx("polygon",{fill:"#ff68ca",points:".5 752.55 .5 457.99 1692.59 457.99 1522.52 752.55 .5 752.55"})]}),f=i=>o.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1261.05 263.86",width:"160",height:"33.4781333",fill:"currentColor",...i,children:[o.jsx("path",{d:"M171.23,173.27c-28.37,42.73-63.1,67.36-90,67.36-17.61,0-36.2-14.63-36.2-47.73,0-23.1,9.29-54.66,30.82-81.99,40.6-51.58,110.06-85.07,121.8-75.06,5.87,5,0,17.32-6.85,30.79-2.93,5.77-6.36,11.93-8.32,17.71-1.96,5-2.94,9.62-2.94,14.24,0,11.16,6.85,19.63,16.63,24.63,9.78,4.62,16.63.77,19.08-5.77,3.42-8.47,10.27-21.56,18.59-34.64,4.89-7.7,6.85-15.4,6.85-22.33,0-15.01-12.72-30.02-29.35-41.57-8.32-5.39-19.57-8.08-31.79-8.08s-25.92,2.69-38.64,6.54C85.63,37.01-1.92,106.68.03,184.43c.98,31.56,21.03,55.81,44.02,65.44,12.23,5.39,26.9,8.08,43.05,8.08,21.03,0,43.05-4.62,63.1-15.78,17.61-10.39,44.02-32.72,44.02-55.04,0-3.85-.98-8.47-3.42-12.7-4.89-8.85-16.14-6.54-19.57-1.15Z"}),o.jsx("path",{d:"M512.17,105.91c5.87-5.39,10.27-16.94,3.91-27.33-7.83-12.7-25.93-17.71-36.69-8.47-4.89,4.23-7.83,9.62-7.83,15.78,0,4.23,1.47,9.24,4.89,14.24,8.8,13.09,27.39,13.86,35.71,5.77Z"}),o.jsx("path",{d:"M1234.15,63.95c-11.25,0-21.52,10.01-21.52,20.79,0,11.93,13.21,23.48,28.86,23.48,12.23,0,19.57-8.85,19.57-19.25,0-11.16-13.21-25.02-26.9-25.02Z"}),o.jsx("path",{d:"M1236.6,192.9c-15.16,26.17-40.6,51.96-60.17,51.96-5.38,0-7.34-3.46-7.34-9.62s2.45-14.24,6.85-23.09c8.32-15.4,30.82-44.27,40.11-60.82,12.72-19.25,8.8-35.8-.49-43.5-6.36-5.77-12.23-5-19.57,2.69-15.88,17.56-41.93,54.09-56.34,80.99-.8.69-1.59,1.53-2.36,2.54-18.1,23.48-42.07,50.42-57.23,50.42-7.83,0-12.72-6.16-12.72-15.01,0-13.47,12.72-30.41,26.41-46.96,20.06-24.25,30.33-41.96,30.33-55.04s-7.83-23.1-22.01-23.48c-15.65-.38-41.58,12.7-63.59,28.1,0-16.17-10.27-30.02-25.92-30.02s-43.04,14.63-64.08,30.79c.98-3.85,1.47-7.31,1.47-10.39,0-6.16-2.45-12.7-6.85-18.48-4.89-6.93-12.23-7.31-18.59,0-26.46,31.75-57.14,77.4-70.91,103.44-15.4,20.49-34.77,38.59-49.42,38.59-4.89,0-6.85-3.46-6.85-9.24,0-25.79,41.09-67.75,53.81-88.92,12.72-20.02,8.32-36.95,0-44.65-5.87-5.39-14.19-5-20.06,2.69l-9.29,11.93c-4.4-10.01-15.16-16.94-32.77-16.94-24.95,0-65.06,18.09-104.19,62.36-9.02,9.85-15.71,20.31-20.11,30.39-.32.48-.64.99-.92,1.56-15.16,26.94-42.56,50.81-59.68,50.81-6.85,0-10.76-6.54-10.76-16.17,0-5.77,1.47-11.55,3.91-17.32,7.83-19.63,31.31-45.81,52.83-65.05,5.38-5.39,8.32-10.78,8.32-15.4,0-10.01-6.36-17.71-14.19-25.79-5.87-5.77-13.21-3.85-22.01.77-17.12,9.24-28.37,13.86-42.56,16.55,6.36-12.7,10.27-25.02,10.27-33.49s-3.91-12.7-14.19-12.7c-17.12,0-49.4,29.25-49.4,48.88,0,6.93,3.42,13.09,13.21,16.94-25.92,56.2-81.69,101.23-102.72,101.23-3.42,0-6.85-3.08-6.85-8.85,0-13.47,16.63-39.65,31.31-59.28,12.72-16.94,23.97-36.95,23.97-49.65,0-8.47-2.93-14.63-7.83-18.86-6.85-5.77-12.72-5-19.57,2.31-8.85,9.75-40.55,48.2-57.36,81.67-.69.63-1.31,1.37-1.82,2.24-14.67,23.48-40.6,50.81-57.72,50.81-6.85,0-9.29-5-9.29-13.09,0-6.16,1.96-14.24,6.36-22.71,5.38-9.24,17.61-25.41,44.51-63.13,3.91-5.39,5.38-10.78,5.38-16.17,0-15.01-14.19-26.94-28.37-26.94-9.29,0-26.41,4.62-41.09,13.09,4.89-5.39,35.22-41.19,45-53.89,11.74-16.17,17.61-30.41,17.61-40.8,0-5.39-1.47-10.39-3.91-14.63-4.4-7.7-11.74-9.24-19.57-1.54-39.62,40.03-136.47,168.98-156.04,209.4-12.23,25.4-5.38,34.64,2.45,41.96,5.87,5.77,13.21,4.62,17.12-2.31,11.74-23.1,29.35-49.65,45.98-71.21,25.93-33.1,72.39-57.35,76.8-57.35,3.42,0-3.91,9.24-13.21,21.94-18.59,22.71-42.56,56.2-42.56,80.45,0,20.02,14.67,32.72,46.96,32.72,20.75,0,41.7-8.46,57.61-20.66,4.68,12.06,16.51,20.27,36.31,20.27,53.81,0,103.7-50.42,138.92-113.55,11.25-.38,24.46-2.31,38.15-7.31-19.57,18.09-37.18,38.49-48.43,61.2-3.42,8.08-4.89,15.01-4.89,21.17,0,22.33,17.12,38.88,47.94,38.88,20.68,0,45.13-8.31,61.83-21.66,6.4,12.72,20.14,20.88,40.4,20.88s41.58-11.93,55.76-22.71c3.91,14.24,18.1,24.25,42.56,24.25,15.57,0,31.54-5.56,45.06-13.89,2.09,4.04,5.34,7.41,9.23,10.04,8.32,5.77,13.7,3.46,17.12-2.69,19.08-35.41,41.58-70.44,68.97-93.54,29.35-25.4,48.43-33.87,52.34-33.87,4.4,0-9.29,14.63-22.5,31.95-13.21,16.17-29.35,36.95-36.2,50.81-4.89,9.62-8.8,21.94-8.8,28.48,0,10.01,3.42,15.4,10.76,21.17,7.83,6.16,14.67,5,19.57-2.31,20.54-35.8,44.02-72.36,82.18-102.39,28.86-22.71,39.13-26.56,43.05-26.56s-7.83,11.55-18.59,24.25c-11.25,13.86-27.39,34.64-35.22,47.73-5.38,9.62-7.34,18.09-7.34,25.02,0,20.79,18.1,35.03,51.36,35.03,20.03,0,41.97-8.4,58.52-20.53,4.91,12.28,17.99,20.14,40.78,20.14,28.86,0,62.61-16.17,77.29-40.42,6.36-10.01,6.85-19.63,2.45-26.17-4.4-6.93-10.76-7.7-14.67-.77ZM709.29,242.94c-4.89,0-6.85-4.62-6.85-11.55,0-12.32,8.32-32.72,22.99-50.81,24.95-31.56,58.7-55.81,68.48-55.81,4.89,0,5.87,2.69,5.87,7.31,0,10.01-8.8,28.87-27.88,55.04-23.97,32.33-46.47,55.81-62.61,55.81Z"})]});class b{logs=[];totalCount=0;listeners=new Set;originalConsole={log:console.log,info:console.info,warn:console.warn,error:console.error};isPatched=!1;init(){this.isPatched||(["log","info","warn","error"].forEach(e=>{console[e]=(...r)=>{this.originalConsole[e].apply(console,r),this.addLog(e,r)}}),this.totalCount=0,this.isPatched=!0)}addLog(e,r){const g={id:Math.random().toString(36).slice(2),type:e,args:r,timestamp:Date.now()};this.logs=[...this.logs.slice(-399),g],this.totalCount=this.totalCount+1,this.notify()}subscribe(e){return this.listeners.add(e),e(this.logs),()=>{this.listeners.delete(e)}}notify(){this.listeners.forEach(e=>e(this.logs))}getLogs(){return this.logs}getTotalCount(){return this.totalCount}clear(){this.logs=[],this.notify()}dispose(){this.isPatched&&(["log","info","warn","error"].forEach(e=>{console[e]=this.originalConsole[e]}),this.logs=[],this.totalCount=0,this.listeners.clear(),this.isPatched=!1)}}const c=new b;function x(i,e=2){const r=new WeakSet;return JSON.stringify(i,(g,t)=>{if(t===null||typeof t!="object")return t;if(r.has(t))return"[Circular]";if(r.add(t),typeof HTMLElement<"u"&&t instanceof HTMLElement){const s=t.id?`#${t.id}`:"",a=t.className?`.${t.className.split(" ").join(".")}`:"";return`<${t.tagName.toLowerCase()}${s}${a}>`}return t instanceof Error?{message:t.message,stack:t.stack}:t},e)}const u={log:"#d4d4d4",info:"#66e3f3",warn:"#ffe267",error:"#ff68ca"},n={container:{position:"fixed",bottom:0,left:0,width:"100%",height:"300px",backgroundColor:"#1e1e1e",color:"#d4d4d4",fontFamily:"monospace",fontSize:"12px",overflowY:"auto",zIndex:9999,borderTop:"1px solid #333",boxShadow:"0 -2px 10px rgba(0,0,0,0.3)",boxSizing:"border-box",margin:0,padding:0,lineHeight:1.5,pointerEvents:"auto"},header:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 8px",backgroundColor:"#333",fontFamily:"system-ui",fontWeight:"700",position:"sticky",top:0,boxSizing:"border-box",margin:0},headerLogo:{display:"flex",alignItems:"center",whiteSpace:"nowrap"},button:{appearance:"none",border:"none",marginLeft:8,backgroundColor:"#ffffff11",color:"inherit",fontFamily:"system-ui",fontSize:"inherit",cursor:"pointer",padding:4,borderRadius:"2px",lineHeight:"inherit",boxSizing:"border-box"},icon:{width:"14px",height:"14px",marginRight:"-4px",boxSizing:"border-box"},logo:{width:"80px",height:"14px",boxSizing:"border-box"},logRow:{padding:"4px 8px",borderBottom:"1px solid #333",whiteSpace:"pre-wrap",wordBreak:"break-all",boxSizing:"border-box",margin:0},logTimestamp:{color:"#777",fontFamily:"monospace",marginRight:"1em",boxSizing:"border-box"},milliSecond:{fontSize:"10px"},logArgs:{marginRight:"8px",boxSizing:"border-box"},chiramiButton:{appearance:"none",position:"fixed",bottom:"10px",right:"10px",zIndex:9999,padding:"0 8px",backgroundColor:"#333",opacity:"0.5",color:"#ccc",border:"none",borderRadius:"12px",boxShadow:"#00000033 1px 1px 2px 2px",cursor:"pointer",display:"flex",alignItems:"center",gap:"2px",fontWeight:"400",boxSizing:"border-box",margin:0,lineHeight:"normal",fontFamily:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",fontSize:"inherit"},buttonIcon:{width:"12px",boxSizing:"border-box"},chiramiButtonCount:{color:"#f40",fontFamily:"monospace",fontWeight:"700"}};function h(i){return i.toString().padStart(2,"0")}function y(i){return i.toString().padStart(3,"0")}function m(i){const e=new Date(i.getTime());return o.jsxs(o.Fragment,{children:[o.jsx("span",{children:`${e.getFullYear()}-${h(e.getMonth()+1)}-${h(e.getDate())} ${h(e.getHours())}:${h(e.getMinutes())}:${h(e.getSeconds())}`}),o.jsxs("span",{style:n.milliSecond,children:[".",y(e.getMilliseconds())]})]})}const w=()=>{const[i,e]=d.useState([]),[r,g]=d.useState(!1),t=d.useRef(null);return d.useEffect(()=>{c.init();const s=c.subscribe(a=>{e(a)});return()=>s()},[]),d.useEffect(()=>{r&&t.current&&t.current.scrollIntoView({behavior:"smooth"})},[i,r]),r?o.jsxs("div",{style:n.container,onClick:s=>s.stopPropagation(),children:[o.jsxs("div",{style:n.header,children:[o.jsxs("div",{style:n.headerLogo,children:[o.jsx(p,{style:n.icon}),o.jsx(f,{style:n.logo}),o.jsxs("div",{style:{whiteSpace:"nowrap"},children:["(",c.getTotalCount(),")"]})]}),o.jsxs("div",{style:{whiteSpace:"nowrap"},children:[o.jsx("button",{onClick:()=>c.clear(),style:n.button,children:"Clear"}),o.jsx("button",{onClick:()=>g(!1),style:n.button,children:"Close ▼"})]})]}),o.jsxs("div",{style:{textAlign:"left"},children:[i.map(s=>o.jsxs("div",{style:{...n.logRow,color:u[s.type]},children:[o.jsx("span",{style:n.logTimestamp,children:m(new Date(s.timestamp))}),s.args.map((a,S)=>o.jsx("span",{style:n.logArgs,children:typeof a=="object"?x(a):String(a)},`log-args-${S}`))]},s.id)),o.jsx("div",{ref:t})]})]}):o.jsxs("button",{style:n.chiramiButton,onClick:()=>g(!0),children:[o.jsx(p,{style:n.buttonIcon}),o.jsx("span",{style:n.chiramiButtonCount,children:c.getTotalCount()})]})};l.ChiramiViewer=w,l.chiramiStore=c,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/components/ChiramiViewer.styles.d.ts

@@ -8,6 +8,7 @@ export declare const typeColors: {
 export declare const styles: {
     container: React.CSSProperties;
     header: React.CSSProperties;
+    headerLogo: React.CSSProperties;
     button: React.CSSProperties;
     icon: React.CSSProperties;
     logo: React.CSSProperties;

package/dist/core/ChiramiStore.d.ts

@@ -19,6 +19,7 @@ declare class ChiramiStore {
     getLogs(): LogItem[];
     getTotalCount(): number;
     clear(): void;
+    dispose(): void;
 }
 export declare const chiramiStore: ChiramiStore;
 export {};

package/dist/utils/toTimestamp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chirami",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "MIT",
   "keywords": [
     "react",
@@ -27,10 +27,15 @@
   "scripts": {
     "dev": "vite --open",
     "build": "tsc -p tsconfig.build.json && vite build",
+    "test": "vitest",
     "preview": "vite preview"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.13",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -39,11 +44,16 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "jsdom": "^28.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "chirami": "^0.0.6"
   }
 }