@hiogawa/tiny-toast - npm Package Compare versions

Comparing version 0.1.1-pre.7 to 0.1.1-pre.8

./dist/index.js

@@ -52,2 +52,5 @@ // src/utils.ts
 var styleAssign = Object.assign;
+function istyle(props) {
+  return Object.entries(props).map(([k, v]) => `${k.replace(/[A-Z]/g, "-$&").toLowerCase()}:${v};`).join("");
+}
 
@@ -151,2 +154,5 @@ // src/core.ts
 };
+function includesGuard(ls, v) {
+  return ls.includes(v);
+}
 
@@ -182,7 +188,7 @@ // src/common.ts
       styleAssign(el.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         height: "0"
       });
       styleAssign(el.firstElementChild.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         opacity: "0.5",
@@ -244,2 +250,880 @@ transform: cls(
 }
+
+// ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.1-pre.10_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/chunk-LMP36Z52.js
+var NODE_TYPE_EMPTY = "empty";
+var NODE_TYPE_TAG = "tag";
+var NODE_TYPE_TEXT = "text";
+var NODE_TYPE_CUSTOM = "custom";
+var NODE_TYPE_FRAGMENT = "fragment";
+function emptyNode() {
+  return {
+    type: NODE_TYPE_EMPTY
+  };
+}
+var EMPTY_VNODE = {
+  type: NODE_TYPE_EMPTY
+};
+function getNodeKey(node) {
+  if (node.type === NODE_TYPE_TAG || node.type === NODE_TYPE_CUSTOM || node.type === NODE_TYPE_FRAGMENT) {
+    return node.key;
+  }
+  return;
+}
+function getSlot(node) {
+  if (node.type === NODE_TYPE_EMPTY) {
+    return;
+  }
+  if (node.type === NODE_TYPE_TAG || node.type === NODE_TYPE_TEXT) {
+    return node.hnode;
+  }
+  return node.slot;
+}
+function createElement(tag, props, ...children) {
+  const { key, ...propsNoKey } = props;
+  const child = normalizeComponentChildren(
+    children.length <= 1 ? children[0] : children
+  );
+  if (typeof tag === "string") {
+    const { ref, ...propsNoKeyNoRef } = propsNoKey;
+    return {
+      type: NODE_TYPE_TAG,
+      name: tag,
+      key,
+      ref,
+      props: propsNoKeyNoRef,
+      child
+    };
+  } else if (typeof tag === "function") {
+    return {
+      type: NODE_TYPE_CUSTOM,
+      key,
+      props: {
+        ...propsNoKey,
+        children: child
+      },
+      render: tag
+    };
+  }
+  return tag;
+}
+function Fragment(props) {
+  return normalizeComponentChildren(props.children);
+}
+function normalizeComponentChildren(children) {
+  if (Array.isArray(children)) {
+    return {
+      type: NODE_TYPE_FRAGMENT,
+      children: children.map((c) => normalizeComponentChildren(c))
+    };
+  }
+  return normalizeComponentChild(children);
+}
+function normalizeComponentChild(child) {
+  if (child === null || typeof child === "undefined" || typeof child === "boolean") {
+    return EMPTY_VNODE;
+  }
+  if (typeof child === "string" || typeof child === "number") {
+    return {
+      type: NODE_TYPE_TEXT,
+      data: String(child)
+    };
+  }
+  return child;
+}
+var h = /* @__PURE__ */ new Proxy(() => {
+}, {
+  get(_target, tag, _receiver) {
+    return (...args) => createElement(tag, ...args);
+  },
+  apply(_target, _thisArg, args) {
+    return createElement(...args);
+  }
+});
+
+// ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.1-pre.10_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/chunk-3AXPM6OV.js
+function tinyassert2(value, message) {
+  if (value) {
+    return;
+  }
+  if (message instanceof Error) {
+    throw message;
+  }
+  throw new TinyAssertionError2(message, tinyassert2);
+}
+var TinyAssertionError2 = class extends Error {
+  constructor(message, stackStartFunction) {
+    super(message);
+    if (stackStartFunction && "captureStackTrace" in Error) {
+      Error.captureStackTrace(this, stackStartFunction);
+    }
+  }
+};
+
+// ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.1-pre.10_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/index.js
+function resolveNextState(prev, next) {
+  return typeof next === "function" ? next(prev) : next;
+}
+var HookContext = class _HookContext {
+  // reconciler use `notify` for "force update"
+  constructor(notify) {
+    this.notify = notify;
+  }
+  // expose global
+  // (technically we can keep stack HookContext[] so that HookContext.wrap can be reentrant)
+  static current;
+  initial = true;
+  hookCount = 0;
+  hooks = [];
+  wrap(f) {
+    tinyassert2(!_HookContext.current, "hook reentrance?");
+    _HookContext.current = this;
+    this.hookCount = 0;
+    try {
+      return f();
+    } finally {
+      this.initial = false;
+      tinyassert2(_HookContext.current);
+      _HookContext.current = void 0;
+    }
+  }
+  runEffect(type) {
+    for (const hook of this.hooks) {
+      if (hook.type === type) {
+        hook.pendings.forEach((pending, i) => {
+          if (pending.effect) {
+            tinyassert2(!pending.cleanup);
+            pending.cleanup = pending.effect();
+            pending.effect = void 0;
+          }
+          if (i < hook.pendings.length - 1) {
+            if (pending.cleanup) {
+              pending.cleanup();
+            }
+          }
+        });
+        hook.pendings = hook.pendings.slice(-1);
+      }
+    }
+  }
+  cleanupEffect(type) {
+    for (const hook of this.hooks) {
+      if (hook.type === type) {
+        for (const pending of hook.pendings) {
+          if (pending.cleanup) {
+            pending.cleanup();
+          }
+        }
+        hook.pendings = [];
+      }
+    }
+  }
+  //
+  // hook api
+  //
+  useReducer = (reducer, initialState) => {
+    if (this.initial) {
+      this.hooks.push({
+        type: "reducer",
+        state: resolveNextState(void 0, initialState)
+      });
+    }
+    const hook = this.hooks[this.hookCount++];
+    tinyassert2(hook.type === "reducer");
+    const state = hook.state;
+    const dispatch = (action) => {
+      const nextState = reducer(hook.state, action);
+      if (hook.state !== nextState) {
+        hook.state = nextState;
+        this.notify();
+      }
+    };
+    return [state, dispatch];
+  };
+  useEffect = (type, effect, deps) => {
+    if (this.initial) {
+      this.hooks.push({
+        type,
+        deps,
+        pendings: [{ effect }]
+      });
+    }
+    const hook = this.hooks[this.hookCount++];
+    tinyassert2(hook.type === type);
+    tinyassert2(hook.deps?.length === deps?.length);
+    if (!this.initial && !(hook.deps && deps && isEqualShallow(hook.deps, deps))) {
+      hook.deps = deps;
+      hook.pendings.push({ effect });
+    }
+  };
+};
+var useReducer = /* @__PURE__ */ defineHook((ctx) => ctx.useReducer);
+var useEffectInner = /* @__PURE__ */ defineHook((ctx) => ctx.useEffect);
+function useEffect(effect, deps) {
+  return useEffectInner("effect", effect, deps);
+}
+function useState(initialState) {
+  return useReducer(
+    (prev, next) => resolveNextState(prev, next),
+    initialState
+  );
+}
+function useRef(initialState) {
+  return useState(() => ({ current: initialState }))[0];
+}
+function defineHook(implement) {
+  return new Proxy(() => {
+  }, {
+    apply(_target, ...args) {
+      tinyassert2(HookContext.current);
+      return Reflect.apply(implement(HookContext.current), ...args);
+    }
+  });
+}
+function isEqualShallow(xs, ys) {
+  return xs.length === ys.length && xs.every((x, i) => x === ys[i]);
+}
+function render(vnode, parent, bnode) {
+  const effectManager = new EffectManager();
+  const newBnode = reconcileNode(
+    vnode,
+    bnode ?? emptyNode(),
+    parent,
+    void 0,
+    effectManager
+  );
+  effectManager.run();
+  return newBnode;
+}
+function reconcileNode(vnode, bnode, hparent, preSlot, effectManager) {
+  if (vnode.type === NODE_TYPE_EMPTY) {
+    if (bnode.type === NODE_TYPE_EMPTY) {
+    } else {
+      unmount(bnode);
+      bnode = emptyNode();
+    }
+  } else if (vnode.type === NODE_TYPE_TAG) {
+    if (bnode.type === NODE_TYPE_TAG && bnode.key === vnode.key && bnode.ref === vnode.ref && bnode.name === vnode.name) {
+      reconcileTagProps(bnode, vnode.props, bnode.props);
+      bnode.props = vnode.props;
+      bnode.child = reconcileNode(
+        vnode.child,
+        bnode.child,
+        bnode.hnode,
+        void 0,
+        effectManager
+      );
+      placeChild(bnode.hnode, hparent, preSlot, false);
+    } else {
+      unmount(bnode);
+      const hnode = document.createElement(vnode.name);
+      const child = reconcileNode(
+        vnode.child,
+        emptyNode(),
+        hnode,
+        void 0,
+        effectManager
+      );
+      bnode = { ...vnode, child, hnode, listeners: /* @__PURE__ */ new Map() };
+      reconcileTagProps(bnode, vnode.props, {});
+      placeChild(bnode.hnode, hparent, preSlot, true);
+      effectManager.refNodes.push(bnode);
+    }
+    bnode.child.parent = bnode;
+  } else if (vnode.type === NODE_TYPE_TEXT) {
+    if (bnode.type === NODE_TYPE_TEXT) {
+      if (bnode.data !== vnode.data) {
+        bnode.hnode.data = vnode.data;
+        bnode.data = vnode.data;
+      }
+      placeChild(bnode.hnode, hparent, preSlot, false);
+    } else {
+      unmount(bnode);
+      const hnode = document.createTextNode(vnode.data);
+      bnode = { ...vnode, hnode };
+      placeChild(bnode.hnode, hparent, preSlot, true);
+    }
+  } else if (vnode.type === NODE_TYPE_FRAGMENT) {
+    if (bnode.type === NODE_TYPE_FRAGMENT && bnode.key === vnode.key) {
+      const [newChildren, oldChildren] = alignChildrenByKey(
+        vnode.children,
+        bnode.children
+      );
+      bnode.children = newChildren;
+      for (const bnode2 of oldChildren) {
+        unmount(bnode2);
+      }
+    } else {
+      unmount(bnode);
+      bnode = { ...vnode, children: [] };
+    }
+    const bchildren = bnode.children;
+    for (const bchild of bchildren.slice(vnode.children.length)) {
+      unmount(bchild);
+    }
+    bnode.slot = void 0;
+    for (let i = 0; i < vnode.children.length; i++) {
+      const bchild = reconcileNode(
+        vnode.children[i],
+        bchildren[i] ?? emptyNode(),
+        hparent,
+        preSlot,
+        effectManager
+      );
+      preSlot = getSlot(bchild) ?? preSlot;
+      bnode.slot = getSlot(bchild) ?? bnode.slot;
+      bnode.children[i] = bchild;
+      bchild.parent = bnode;
+    }
+  } else if (vnode.type === NODE_TYPE_CUSTOM) {
+    if (bnode.type === NODE_TYPE_CUSTOM && bnode.key === vnode.key && bnode.render === vnode.render) {
+      bnode.hookContext.notify = updateCustomNodeUnsupported;
+      const vchild = bnode.hookContext.wrap(() => vnode.render(vnode.props));
+      bnode.child = reconcileNode(
+        vchild,
+        bnode.child,
+        hparent,
+        preSlot,
+        effectManager
+      );
+      bnode.props = vnode.props;
+    } else {
+      unmount(bnode);
+      const hookContext = new HookContext(updateCustomNodeUnsupported);
+      const vchild = hookContext.wrap(() => vnode.render(vnode.props));
+      const child = reconcileNode(
+        vchild,
+        emptyNode(),
+        hparent,
+        preSlot,
+        effectManager
+      );
+      bnode = { ...vnode, child, hookContext };
+    }
+    bnode.hparent = hparent;
+    bnode.child.parent = bnode;
+    bnode.slot = getSlot(bnode.child);
+    effectManager.effectNodes.push(bnode);
+    const bcustom = bnode;
+    bnode.hookContext.notify = () => {
+      updateCustomNode(vnode, bcustom);
+    };
+  } else {
+    vnode;
+  }
+  return bnode;
+}
+function placeChild(hnode, hparent, preSlot, init) {
+  const slotNext = preSlot ? preSlot.nextSibling : hparent.firstChild;
+  if (init || !(hnode === slotNext || hnode.nextSibling === slotNext)) {
+    hparent.insertBefore(hnode, slotNext);
+  }
+}
+function updateCustomNodeUnsupported() {
+  throw new Error("Unsupported force-update during render");
+}
+function updateCustomNode(vnode, bnode) {
+  if (!bnode.hparent) {
+    return;
+  }
+  const oldSlot = getSlot(bnode);
+  const preSlot = findPreviousSlot(bnode);
+  const effectManager = new EffectManager();
+  const newBnode = reconcileNode(
+    vnode,
+    bnode,
+    bnode.hparent,
+    preSlot,
+    effectManager
+  );
+  tinyassert2(newBnode === bnode);
+  const newSlot = getSlot(bnode);
+  if (oldSlot !== newSlot) {
+    updateParentSlot(bnode);
+  }
+  effectManager.run();
+}
+function findPreviousSlot(child) {
+  let parent = child.parent;
+  while (parent) {
+    if (parent.type === NODE_TYPE_TAG) {
+      return;
+    }
+    if (parent.type === NODE_TYPE_FRAGMENT) {
+      let slot;
+      for (const c of parent.children) {
+        if (c === child) {
+          if (slot) {
+            return slot;
+          }
+          break;
+        }
+        slot = getSlot(c) ?? slot;
+      }
+    }
+    child = parent;
+    parent = child.parent;
+  }
+  return;
+}
+function updateParentSlot(child) {
+  let parent = child.parent;
+  while (parent) {
+    if (parent.type === NODE_TYPE_TAG) {
+      return;
+    }
+    if (parent.type === NODE_TYPE_CUSTOM) {
+      parent.slot = getSlot(child);
+    }
+    if (parent.type === NODE_TYPE_FRAGMENT) {
+      let slot;
+      for (const c of parent.children) {
+        slot = getSlot(c) ?? slot;
+      }
+      parent.slot = slot;
+    }
+    child = parent;
+    parent = child.parent;
+  }
+}
+function alignChildrenByKey(vnodes, bnodes) {
+  const keyMap = /* @__PURE__ */ new Map();
+  vnodes.forEach((vnode, i) => {
+    const key = getNodeKey(vnode);
+    if (typeof key !== "undefined") {
+      keyMap.set(key, i);
+    }
+  });
+  if (keyMap.size !== vnodes.length) {
+    return [bnodes, []];
+  }
+  const newBnodes = vnodes.map(() => emptyNode());
+  const oldBnodes = [];
+  for (const bnode of bnodes) {
+    const key = getNodeKey(bnode);
+    if (typeof key !== "undefined") {
+      const i = keyMap.get(key);
+      if (typeof i !== "undefined") {
+        newBnodes[i] = bnode;
+        continue;
+      }
+    }
+    oldBnodes.push(bnode);
+  }
+  return [newBnodes, oldBnodes];
+}
+function reconcileTagProps(bnode, props, oldProps) {
+  for (const k in oldProps) {
+    if (!(k in props)) {
+      setTagProp(bnode, k, null);
+    }
+  }
+  for (const k in props) {
+    if (props[k] !== oldProps[k]) {
+      setTagProp(bnode, k, props[k]);
+    }
+  }
+}
+function setTagProp(bnode, key, value) {
+  const { listeners, hnode } = bnode;
+  if (key.startsWith("on")) {
+    const eventType = key.slice(2).toLowerCase();
+    const listener = listeners.get(eventType);
+    if (listener) {
+      hnode.removeEventListener(eventType, listener);
+    }
+    if (value != null) {
+      tinyassert2(
+        typeof value === "function",
+        `Invalid event listener prop for '${eventType}'`
+      );
+      listeners.set(eventType, value);
+      hnode.addEventListener(eventType, value);
+    }
+    return;
+  }
+  if (key in hnode) {
+    try {
+      hnode[key] = value != null ? value : "";
+      return;
+    } catch {
+    }
+  }
+  if (value != null) {
+    hnode.setAttribute(key, value);
+  } else {
+    hnode.removeAttribute(key);
+  }
+}
+function unmount(bnode) {
+  return unmountNode(bnode, false);
+}
+function unmountNode(bnode, skipRemove) {
+  if (bnode.type === NODE_TYPE_EMPTY) {
+    return;
+  } else if (bnode.type === NODE_TYPE_TAG) {
+    unmountNode(
+      bnode.child,
+      /* skipRemove */
+      true
+    );
+    if (!skipRemove) {
+      bnode.hnode.remove();
+      bnode.ref?.(null);
+    }
+  } else if (bnode.type === NODE_TYPE_TEXT) {
+    bnode.hnode.remove();
+  } else if (bnode.type === NODE_TYPE_FRAGMENT) {
+    for (const child of bnode.children) {
+      unmountNode(child, skipRemove);
+    }
+  } else if (bnode.type === NODE_TYPE_CUSTOM) {
+    bnode.hookContext.cleanupEffect("layout-effect");
+    bnode.hookContext.cleanupEffect("effect");
+    bnode.hparent = void 0;
+    unmountNode(bnode.child, skipRemove);
+  } else {
+    bnode;
+  }
+}
+var EffectManager = class {
+  // TODO: effect ordering? (currently DFS exit time ordering)
+  refNodes = [];
+  effectNodes = [];
+  run() {
+    for (const tagNode of this.refNodes) {
+      if (tagNode.ref) {
+        tagNode.ref(tagNode.hnode);
+      }
+    }
+    for (const customNode of this.effectNodes) {
+      customNode.hookContext.runEffect("layout-effect");
+    }
+    requestAnimationFrame(() => {
+      for (const customNode of this.effectNodes) {
+        if (customNode.hparent) {
+          customNode.hookContext.runEffect("effect");
+        }
+      }
+    });
+  }
+};
+function useSyncExternalStore(subscribe, getSnapshot, _getServerSnapshot) {
+  const [value, setValue] = useState(() => getSnapshot());
+  const latestRef = useRef({ getSnapshot });
+  latestRef.current.getSnapshot = getSnapshot;
+  useEffect(() => {
+    return subscribe(() => {
+      setValue(latestRef.current.getSnapshot());
+    });
+  }, [subscribe]);
+  return value;
+}
+
+// ../tiny-transition/dist/index.js
+function tinyassert3(value, message) {
+  if (value) {
+    return;
+  }
+  if (message instanceof Error) {
+    throw message;
+  }
+  throw new TinyAssertionError3(message, tinyassert3);
+}
+var TinyAssertionError3 = class _TinyAssertionError2 extends Error {
+  constructor(message, stackStartFunction) {
+    super(message);
+    if ("captureStackTrace" in Error) {
+      Error.captureStackTrace(this, stackStartFunction ?? _TinyAssertionError2);
+    }
+  }
+};
+var TransitionManager = class {
+  constructor(options) {
+    this.options = options;
+    this.state = this.options.defaultEntered ? "entered" : "left";
+  }
+  listeners = /* @__PURE__ */ new Set();
+  disposables = /* @__PURE__ */ new Set();
+  state = "left";
+  el = null;
+  shouldRender() {
+    return this.state !== "left";
+  }
+  show(show) {
+    if (show && this.state !== "entering" && this.state !== "entered") {
+      this.state = "entering";
+      this.startEnter();
+      this.notify();
+    }
+    if (!show && this.state !== "leaving" && this.state !== "left") {
+      this.state = "leaving";
+      this.startLeave();
+      this.notify();
+    }
+  }
+  // api compatible with ref callback
+  setElement = (el) => {
+    this.dispose();
+    this.el = el;
+    if (!el)
+      return;
+    if (this.state === "entered") {
+      this.options.onEntered?.(el);
+    } else if (this.state === "entering") {
+      this.startEnter();
+    }
+  };
+  startEnter() {
+    if (!this.el)
+      return;
+    const el = this.el;
+    this.options.onEnterFrom?.(el);
+    this.dispose();
+    this.disposables.add(
+      onNextFrame(() => {
+        forceStyle(el);
+        this.options.onEnterTo?.(el);
+        this.disposables.add(
+          onTransitionEnd(el, () => {
+            this.state = "entered";
+            this.notify(() => this.options.onEntered?.(el));
+          })
+        );
+      })
+    );
+  }
+  startLeave() {
+    if (!this.el)
+      return;
+    const el = this.el;
+    this.options.onLeaveFrom?.(el);
+    this.dispose();
+    this.disposables.add(
+      onNextFrame(() => {
+        forceStyle(el);
+        this.options.onLeaveTo?.(el);
+        this.disposables.add(
+          onTransitionEnd(el, () => {
+            this.state = "left";
+            this.notify(() => this.options.onLeft?.(el));
+          })
+        );
+      })
+    );
+  }
+  dispose() {
+    this.disposables.forEach((f) => f());
+    this.disposables.clear();
+  }
+  //
+  // api for React.useSyncExternalStore
+  //
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getSnapshot = () => this.state;
+  notify(callback) {
+    if (this.listeners.size === 0)
+      return;
+    callback?.();
+    this.listeners.forEach((f) => f());
+  }
+};
+function onNextFrame(callback) {
+  const id = requestAnimationFrame(callback);
+  return () => {
+    cancelAnimationFrame(id);
+  };
+}
+function onTransitionEnd(el, callback) {
+  const timeoutDuration = computeTransitionTimeout(el);
+  const handle = setTimeout(() => callback(), timeoutDuration);
+  return () => {
+    clearTimeout(handle);
+  };
+}
+function computeTransitionTimeout(el) {
+  const style = getComputedStyle(el);
+  const [duration, delay] = [
+    style.transitionDuration,
+    style.transitionDelay
+  ].map((s) => Math.max(...parseDuration(s)));
+  return duration + delay;
+}
+function parseDuration(s) {
+  return s.trim().split(",").map((s2) => parseDurationSingle(s2.trim()));
+}
+function parseDurationSingle(s) {
+  let ms = 0;
+  if (!s) {
+    ms = 0;
+  } else if (s.endsWith("ms")) {
+    ms = Number.parseFloat(s.slice(0, -2));
+  } else if (s.endsWith("s")) {
+    ms = Number.parseFloat(s.slice(0, -1)) * 1e3;
+  }
+  tinyassert3(Number.isFinite(ms), `failed to parse css duration '${s}'`);
+  return ms;
+}
+function forceStyle(el) {
+  typeof getComputedStyle(el).transition;
+}
+
+// src/tiny-react/ui.tsx
+function ToastContainer({ toast }) {
+  useSyncExternalStore(toast.subscribe, toast.getSnapshot, toast.getSnapshot);
+  return h.div(
+    {
+      style: istyle({
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        pointerEvents: "none"
+      }),
+      onmouseenter: () => {
+        toast.pause(true);
+      },
+      onmouseleave: () => {
+        toast.pause(false);
+      }
+    },
+    h.div(
+      {
+        style: istyle({
+          position: "absolute",
+          top: "0.5rem",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column-reverse",
+          alignItems: "center"
+        })
+      },
+      toast.items.map(
+        (item) => h(ToastAnimation, { key: item.id, toast, item })
+      )
+    )
+  );
+}
+function ToastAnimation({
+  toast,
+  item
+}) {
+  const [manager] = useState(() => {
+    const transition = slideScaleCollapseTransition({
+      position: "top-center"
+    });
+    const manager2 = new TransitionManager({
+      defaultEntered: false,
+      onEnterFrom: transition.enterFrom,
+      onEnterTo: transition.enterTo,
+      onEntered: transition.entered,
+      onLeaveFrom: transition.leaveFrom,
+      onLeaveTo: transition.leaveTo,
+      onLeft: () => toast.remove(item.id)
+    });
+    return manager2;
+  });
+  useSyncExternalStore(
+    manager.subscribe,
+    manager.getSnapshot,
+    manager.getSnapshot
+  );
+  useEffect(() => {
+    manager.show(item.step < TOAST_STEP.DISMISS);
+  }, [item.step]);
+  if (!manager.shouldRender()) {
+    return h(Fragment, {});
+  }
+  return h.div(
+    {
+      ref: manager.setElement
+    },
+    h.div(
+      {
+        style: istyle({
+          pointerEvents: "auto",
+          display: "inline-block",
+          padding: "0.25rem 0"
+        })
+      },
+      h(ToastItemComponent, { toast, item })
+    )
+  );
+}
+function ToastItemComponent({
+  toast,
+  item
+}) {
+  return h.div(
+    {
+      className: item.data.className,
+      style: istyle({
+        display: "flex",
+        alignItems: "center",
+        padding: "10px 10px",
+        borderRadius: "8px",
+        boxShadow: "0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)"
+      }) + (item.data.style ?? "")
+    },
+    includesGuard(["success", "error", "info"], item.data.type) && h.span({
+      key: item.data.type,
+      // ref callback to imitate dangerouslySetInnerHTML
+      ref: (el) => {
+        if (el && !el.innerHTML) {
+          el.innerHTML = TOAST_TYPE_ICONS[item.data.type];
+        }
+      },
+      style: istyle({
+        width: "1.5rem",
+        height: "1.5rem",
+        color: TOAST_TYPE_ICON_COLORS[item.data.type]
+      })
+    }),
+    h.div(
+      { style: istyle({ padding: "0 10px" }) },
+      item.data.message({ h, item, toast })
+    )
+  );
+}
+
+// src/tiny-react/api.tsx
+var TinyReactToastManager = class extends ToastManager {
+  defaultOptions = {
+    position: "top-center",
+    duration: 4e3
+  };
+  render() {
+    const el = document.createElement("div");
+    el.setAttribute("data-tiny-toast", "");
+    document.body.appendChild(el);
+    render(h(ToastContainer, { toast: this }), el);
+    return () => {
+      render(h(Fragment, {}), el);
+      el.remove();
+    };
+  }
+  success = createByTypeFactory("success");
+  error = createByTypeFactory("error");
+  info = createByTypeFactory("info");
+  custom = createByTypeFactory("custom");
+};
+function createByTypeFactory(type) {
+  return function(message, options) {
+    this.create(
+      {
+        message: typeof message === "function" ? message : () => message,
+        type,
+        position: options?.position ?? this.defaultOptions.position,
+        className: options?.className ?? this.defaultOptions.className,
+        style: options?.style ?? this.defaultOptions.style
+      },
+      {
+        duration: options?.duration ?? this.defaultOptions.duration / (type === "success" ? 2 : 1)
+      }
+    );
+  };
+}
 export {
@@ -251,4 +1135,5 @@ TOAST_POSITIONS,
   TOAST_TYPE_ICON_COLORS,
+  TinyReactToastManager,
   ToastManager,
   slideScaleCollapseTransition
 };

dist/index.d.ts

@@ -1,76 +0,33 @@
-type PauseableTimeoutState = {
-    t: "stopped";
-} | {
-    t: "started";
-    startedAt: number;
-    stop: () => void;
-} | {
-    t: "disposed";
-};
-declare class PauseableTimeout {
-    private callback;
-    ms: number;
-    state: PauseableTimeoutState;
-    runningMs: number;
-    constructor(callback: () => void, ms: number);
-    start(): void;
-    stop(): void;
-    dispose(): void;
+import { a as ToastManager, b as ToastType, c as ToastPosition, T as ToastItem } from './common-147f71a5.js';
+export { f as TOAST_POSITIONS, e as TOAST_STEP, g as TOAST_TYPES, h as TOAST_TYPE_ICONS, i as TOAST_TYPE_ICON_COLORS, d as ToastCoreOptions, s as slideScaleCollapseTransition } from './common-147f71a5.js';
+
+interface TinyToastData {
+    message: RenderItem;
+    type: ToastType;
+    position: ToastPosition;
+    className?: string;
+    style?: string;
 }
-
-type ToastItem<T> = {
-    id: string;
-    step: number;
+interface DefaultOptions {
+    className?: string;
+    style?: string;
+    position: ToastPosition;
     duration: number;
-    dismissTimeout: PauseableTimeout;
-    data: T;
-};
-type ToastCoreOptions = {
-    duration: number;
-};
-declare const TOAST_STEP: {
-    START: number;
-    DISMISS: number;
-};
-declare class ToastManager<T> {
-    items: ToastItem<T>[];
-    paused: boolean;
-    create(data: T, { duration }: ToastCoreOptions): void;
-    update(id: string, newItem: Partial<ToastItem<T>>): void;
-    dismiss(id: string): void;
-    dismissAll(): void;
-    remove(id: string): void;
-    removeAll(): void;
-    pause(paused: boolean): void;
-    private listeners;
-    private snapshot;
-    subscribe: (listener: () => void) => () => void;
-    getSnapshot: () => {};
-    notify(): void;
 }
+type RenderItem = (props: {
+    h: (...args: any[]) => unknown;
+    item: TinyToastItem;
+    toast: TinyReactToastManager;
+}) => unknown;
+type MaybeRenderItem = RenderItem | string;
+type TinyToastItem = ToastItem<TinyToastData>;
+declare class TinyReactToastManager extends ToastManager<TinyToastData> {
+    defaultOptions: DefaultOptions;
+    render(): () => void;
+    success: (this: TinyReactToastManager, message: MaybeRenderItem, options?: Partial<DefaultOptions> | undefined) => void;
+    error: (this: TinyReactToastManager, message: MaybeRenderItem, options?: Partial<DefaultOptions> | undefined) => void;
+    info: (this: TinyReactToastManager, message: MaybeRenderItem, options?: Partial<DefaultOptions> | undefined) => void;
+    custom: (this: TinyReactToastManager, message: MaybeRenderItem, options?: Partial<DefaultOptions> | undefined) => void;
+}
 
-declare const TOAST_POSITIONS: readonly ["bottom-left", "top-center"];
-type ToastPosition = (typeof TOAST_POSITIONS)[number];
-declare const TOAST_TYPES: readonly ["success", "error", "info", "blank", "custom"];
-type ToastType = (typeof TOAST_TYPES)[number];
-declare const TOAST_TYPE_ICONS: {
-    success: string;
-    error: string;
-    info: string;
-};
-declare const TOAST_TYPE_ICON_COLORS: {
-    success: string;
-    error: string;
-    info: string;
-};
-declare function slideScaleCollapseTransition({ position, }: {
-    position: ToastPosition;
-}): {
-    enterFrom: (el: HTMLElement) => void;
-    enterTo: (el: HTMLElement) => void;
-    entered: (el: HTMLElement) => void;
-    leaveFrom: (el: HTMLElement) => void;
-    leaveTo: (el: HTMLElement) => void;
-};
-
-export { TOAST_POSITIONS, TOAST_STEP, TOAST_TYPES, TOAST_TYPE_ICONS, TOAST_TYPE_ICON_COLORS, ToastCoreOptions, ToastItem, ToastManager, ToastPosition, ToastType, slideScaleCollapseTransition };
+export { TinyReactToastManager, ToastItem, ToastManager, ToastPosition, ToastType };

dist/index.js

@@ -52,2 +52,5 @@ // src/utils.ts
 var styleAssign = Object.assign;
+function istyle(props) {
+  return Object.entries(props).map(([k, v]) => `${k.replace(/[A-Z]/g, "-$&").toLowerCase()}:${v};`).join("");
+}
 
@@ -151,2 +154,5 @@ // src/core.ts
 };
+function includesGuard(ls, v) {
+  return ls.includes(v);
+}
 
@@ -182,7 +188,7 @@ // src/common.ts
       styleAssign(el.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         height: "0"
       });
       styleAssign(el.firstElementChild.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         opacity: "0.5",
@@ -244,2 +250,880 @@ transform: cls(
 }
+
+// ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.1-pre.10_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/chunk-LMP36Z52.js
+var NODE_TYPE_EMPTY = "empty";
+var NODE_TYPE_TAG = "tag";
+var NODE_TYPE_TEXT = "text";
+var NODE_TYPE_CUSTOM = "custom";
+var NODE_TYPE_FRAGMENT = "fragment";
+function emptyNode() {
+  return {
+    type: NODE_TYPE_EMPTY
+  };
+}
+var EMPTY_VNODE = {
+  type: NODE_TYPE_EMPTY
+};
+function getNodeKey(node) {
+  if (node.type === NODE_TYPE_TAG || node.type === NODE_TYPE_CUSTOM || node.type === NODE_TYPE_FRAGMENT) {
+    return node.key;
+  }
+  return;
+}
+function getSlot(node) {
+  if (node.type === NODE_TYPE_EMPTY) {
+    return;
+  }
+  if (node.type === NODE_TYPE_TAG || node.type === NODE_TYPE_TEXT) {
+    return node.hnode;
+  }
+  return node.slot;
+}
+function createElement(tag, props, ...children) {
+  const { key, ...propsNoKey } = props;
+  const child = normalizeComponentChildren(
+    children.length <= 1 ? children[0] : children
+  );
+  if (typeof tag === "string") {
+    const { ref, ...propsNoKeyNoRef } = propsNoKey;
+    return {
+      type: NODE_TYPE_TAG,
+      name: tag,
+      key,
+      ref,
+      props: propsNoKeyNoRef,
+      child
+    };
+  } else if (typeof tag === "function") {
+    return {
+      type: NODE_TYPE_CUSTOM,
+      key,
+      props: {
+        ...propsNoKey,
+        children: child
+      },
+      render: tag
+    };
+  }
+  return tag;
+}
+function Fragment(props) {
+  return normalizeComponentChildren(props.children);
+}
+function normalizeComponentChildren(children) {
+  if (Array.isArray(children)) {
+    return {
+      type: NODE_TYPE_FRAGMENT,
+      children: children.map((c) => normalizeComponentChildren(c))
+    };
+  }
+  return normalizeComponentChild(children);
+}
+function normalizeComponentChild(child) {
+  if (child === null || typeof child === "undefined" || typeof child === "boolean") {
+    return EMPTY_VNODE;
+  }
+  if (typeof child === "string" || typeof child === "number") {
+    return {
+      type: NODE_TYPE_TEXT,
+      data: String(child)
+    };
+  }
+  return child;
+}
+var h = /* @__PURE__ */ new Proxy(() => {
+}, {
+  get(_target, tag, _receiver) {
+    return (...args) => createElement(tag, ...args);
+  },
+  apply(_target, _thisArg, args) {
+    return createElement(...args);
+  }
+});
+
+// ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.1-pre.10_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/chunk-3AXPM6OV.js
+function tinyassert2(value, message) {
+  if (value) {
+    return;
+  }
+  if (message instanceof Error) {
+    throw message;
+  }
+  throw new TinyAssertionError2(message, tinyassert2);
+}
+var TinyAssertionError2 = class extends Error {
+  constructor(message, stackStartFunction) {
+    super(message);
+    if (stackStartFunction && "captureStackTrace" in Error) {
+      Error.captureStackTrace(this, stackStartFunction);
+    }
+  }
+};
+
+// ../../node_modules/.pnpm/@hiogawa+tiny-react@0.0.1-pre.10_vite@4.4.9/node_modules/@hiogawa/tiny-react/dist/index.js
+function resolveNextState(prev, next) {
+  return typeof next === "function" ? next(prev) : next;
+}
+var HookContext = class _HookContext {
+  // reconciler use `notify` for "force update"
+  constructor(notify) {
+    this.notify = notify;
+  }
+  // expose global
+  // (technically we can keep stack HookContext[] so that HookContext.wrap can be reentrant)
+  static current;
+  initial = true;
+  hookCount = 0;
+  hooks = [];
+  wrap(f) {
+    tinyassert2(!_HookContext.current, "hook reentrance?");
+    _HookContext.current = this;
+    this.hookCount = 0;
+    try {
+      return f();
+    } finally {
+      this.initial = false;
+      tinyassert2(_HookContext.current);
+      _HookContext.current = void 0;
+    }
+  }
+  runEffect(type) {
+    for (const hook of this.hooks) {
+      if (hook.type === type) {
+        hook.pendings.forEach((pending, i) => {
+          if (pending.effect) {
+            tinyassert2(!pending.cleanup);
+            pending.cleanup = pending.effect();
+            pending.effect = void 0;
+          }
+          if (i < hook.pendings.length - 1) {
+            if (pending.cleanup) {
+              pending.cleanup();
+            }
+          }
+        });
+        hook.pendings = hook.pendings.slice(-1);
+      }
+    }
+  }
+  cleanupEffect(type) {
+    for (const hook of this.hooks) {
+      if (hook.type === type) {
+        for (const pending of hook.pendings) {
+          if (pending.cleanup) {
+            pending.cleanup();
+          }
+        }
+        hook.pendings = [];
+      }
+    }
+  }
+  //
+  // hook api
+  //
+  useReducer = (reducer, initialState) => {
+    if (this.initial) {
+      this.hooks.push({
+        type: "reducer",
+        state: resolveNextState(void 0, initialState)
+      });
+    }
+    const hook = this.hooks[this.hookCount++];
+    tinyassert2(hook.type === "reducer");
+    const state = hook.state;
+    const dispatch = (action) => {
+      const nextState = reducer(hook.state, action);
+      if (hook.state !== nextState) {
+        hook.state = nextState;
+        this.notify();
+      }
+    };
+    return [state, dispatch];
+  };
+  useEffect = (type, effect, deps) => {
+    if (this.initial) {
+      this.hooks.push({
+        type,
+        deps,
+        pendings: [{ effect }]
+      });
+    }
+    const hook = this.hooks[this.hookCount++];
+    tinyassert2(hook.type === type);
+    tinyassert2(hook.deps?.length === deps?.length);
+    if (!this.initial && !(hook.deps && deps && isEqualShallow(hook.deps, deps))) {
+      hook.deps = deps;
+      hook.pendings.push({ effect });
+    }
+  };
+};
+var useReducer = /* @__PURE__ */ defineHook((ctx) => ctx.useReducer);
+var useEffectInner = /* @__PURE__ */ defineHook((ctx) => ctx.useEffect);
+function useEffect(effect, deps) {
+  return useEffectInner("effect", effect, deps);
+}
+function useState(initialState) {
+  return useReducer(
+    (prev, next) => resolveNextState(prev, next),
+    initialState
+  );
+}
+function useRef(initialState) {
+  return useState(() => ({ current: initialState }))[0];
+}
+function defineHook(implement) {
+  return new Proxy(() => {
+  }, {
+    apply(_target, ...args) {
+      tinyassert2(HookContext.current);
+      return Reflect.apply(implement(HookContext.current), ...args);
+    }
+  });
+}
+function isEqualShallow(xs, ys) {
+  return xs.length === ys.length && xs.every((x, i) => x === ys[i]);
+}
+function render(vnode, parent, bnode) {
+  const effectManager = new EffectManager();
+  const newBnode = reconcileNode(
+    vnode,
+    bnode ?? emptyNode(),
+    parent,
+    void 0,
+    effectManager
+  );
+  effectManager.run();
+  return newBnode;
+}
+function reconcileNode(vnode, bnode, hparent, preSlot, effectManager) {
+  if (vnode.type === NODE_TYPE_EMPTY) {
+    if (bnode.type === NODE_TYPE_EMPTY) {
+    } else {
+      unmount(bnode);
+      bnode = emptyNode();
+    }
+  } else if (vnode.type === NODE_TYPE_TAG) {
+    if (bnode.type === NODE_TYPE_TAG && bnode.key === vnode.key && bnode.ref === vnode.ref && bnode.name === vnode.name) {
+      reconcileTagProps(bnode, vnode.props, bnode.props);
+      bnode.props = vnode.props;
+      bnode.child = reconcileNode(
+        vnode.child,
+        bnode.child,
+        bnode.hnode,
+        void 0,
+        effectManager
+      );
+      placeChild(bnode.hnode, hparent, preSlot, false);
+    } else {
+      unmount(bnode);
+      const hnode = document.createElement(vnode.name);
+      const child = reconcileNode(
+        vnode.child,
+        emptyNode(),
+        hnode,
+        void 0,
+        effectManager
+      );
+      bnode = { ...vnode, child, hnode, listeners: /* @__PURE__ */ new Map() };
+      reconcileTagProps(bnode, vnode.props, {});
+      placeChild(bnode.hnode, hparent, preSlot, true);
+      effectManager.refNodes.push(bnode);
+    }
+    bnode.child.parent = bnode;
+  } else if (vnode.type === NODE_TYPE_TEXT) {
+    if (bnode.type === NODE_TYPE_TEXT) {
+      if (bnode.data !== vnode.data) {
+        bnode.hnode.data = vnode.data;
+        bnode.data = vnode.data;
+      }
+      placeChild(bnode.hnode, hparent, preSlot, false);
+    } else {
+      unmount(bnode);
+      const hnode = document.createTextNode(vnode.data);
+      bnode = { ...vnode, hnode };
+      placeChild(bnode.hnode, hparent, preSlot, true);
+    }
+  } else if (vnode.type === NODE_TYPE_FRAGMENT) {
+    if (bnode.type === NODE_TYPE_FRAGMENT && bnode.key === vnode.key) {
+      const [newChildren, oldChildren] = alignChildrenByKey(
+        vnode.children,
+        bnode.children
+      );
+      bnode.children = newChildren;
+      for (const bnode2 of oldChildren) {
+        unmount(bnode2);
+      }
+    } else {
+      unmount(bnode);
+      bnode = { ...vnode, children: [] };
+    }
+    const bchildren = bnode.children;
+    for (const bchild of bchildren.slice(vnode.children.length)) {
+      unmount(bchild);
+    }
+    bnode.slot = void 0;
+    for (let i = 0; i < vnode.children.length; i++) {
+      const bchild = reconcileNode(
+        vnode.children[i],
+        bchildren[i] ?? emptyNode(),
+        hparent,
+        preSlot,
+        effectManager
+      );
+      preSlot = getSlot(bchild) ?? preSlot;
+      bnode.slot = getSlot(bchild) ?? bnode.slot;
+      bnode.children[i] = bchild;
+      bchild.parent = bnode;
+    }
+  } else if (vnode.type === NODE_TYPE_CUSTOM) {
+    if (bnode.type === NODE_TYPE_CUSTOM && bnode.key === vnode.key && bnode.render === vnode.render) {
+      bnode.hookContext.notify = updateCustomNodeUnsupported;
+      const vchild = bnode.hookContext.wrap(() => vnode.render(vnode.props));
+      bnode.child = reconcileNode(
+        vchild,
+        bnode.child,
+        hparent,
+        preSlot,
+        effectManager
+      );
+      bnode.props = vnode.props;
+    } else {
+      unmount(bnode);
+      const hookContext = new HookContext(updateCustomNodeUnsupported);
+      const vchild = hookContext.wrap(() => vnode.render(vnode.props));
+      const child = reconcileNode(
+        vchild,
+        emptyNode(),
+        hparent,
+        preSlot,
+        effectManager
+      );
+      bnode = { ...vnode, child, hookContext };
+    }
+    bnode.hparent = hparent;
+    bnode.child.parent = bnode;
+    bnode.slot = getSlot(bnode.child);
+    effectManager.effectNodes.push(bnode);
+    const bcustom = bnode;
+    bnode.hookContext.notify = () => {
+      updateCustomNode(vnode, bcustom);
+    };
+  } else {
+    vnode;
+  }
+  return bnode;
+}
+function placeChild(hnode, hparent, preSlot, init) {
+  const slotNext = preSlot ? preSlot.nextSibling : hparent.firstChild;
+  if (init || !(hnode === slotNext || hnode.nextSibling === slotNext)) {
+    hparent.insertBefore(hnode, slotNext);
+  }
+}
+function updateCustomNodeUnsupported() {
+  throw new Error("Unsupported force-update during render");
+}
+function updateCustomNode(vnode, bnode) {
+  if (!bnode.hparent) {
+    return;
+  }
+  const oldSlot = getSlot(bnode);
+  const preSlot = findPreviousSlot(bnode);
+  const effectManager = new EffectManager();
+  const newBnode = reconcileNode(
+    vnode,
+    bnode,
+    bnode.hparent,
+    preSlot,
+    effectManager
+  );
+  tinyassert2(newBnode === bnode);
+  const newSlot = getSlot(bnode);
+  if (oldSlot !== newSlot) {
+    updateParentSlot(bnode);
+  }
+  effectManager.run();
+}
+function findPreviousSlot(child) {
+  let parent = child.parent;
+  while (parent) {
+    if (parent.type === NODE_TYPE_TAG) {
+      return;
+    }
+    if (parent.type === NODE_TYPE_FRAGMENT) {
+      let slot;
+      for (const c of parent.children) {
+        if (c === child) {
+          if (slot) {
+            return slot;
+          }
+          break;
+        }
+        slot = getSlot(c) ?? slot;
+      }
+    }
+    child = parent;
+    parent = child.parent;
+  }
+  return;
+}
+function updateParentSlot(child) {
+  let parent = child.parent;
+  while (parent) {
+    if (parent.type === NODE_TYPE_TAG) {
+      return;
+    }
+    if (parent.type === NODE_TYPE_CUSTOM) {
+      parent.slot = getSlot(child);
+    }
+    if (parent.type === NODE_TYPE_FRAGMENT) {
+      let slot;
+      for (const c of parent.children) {
+        slot = getSlot(c) ?? slot;
+      }
+      parent.slot = slot;
+    }
+    child = parent;
+    parent = child.parent;
+  }
+}
+function alignChildrenByKey(vnodes, bnodes) {
+  const keyMap = /* @__PURE__ */ new Map();
+  vnodes.forEach((vnode, i) => {
+    const key = getNodeKey(vnode);
+    if (typeof key !== "undefined") {
+      keyMap.set(key, i);
+    }
+  });
+  if (keyMap.size !== vnodes.length) {
+    return [bnodes, []];
+  }
+  const newBnodes = vnodes.map(() => emptyNode());
+  const oldBnodes = [];
+  for (const bnode of bnodes) {
+    const key = getNodeKey(bnode);
+    if (typeof key !== "undefined") {
+      const i = keyMap.get(key);
+      if (typeof i !== "undefined") {
+        newBnodes[i] = bnode;
+        continue;
+      }
+    }
+    oldBnodes.push(bnode);
+  }
+  return [newBnodes, oldBnodes];
+}
+function reconcileTagProps(bnode, props, oldProps) {
+  for (const k in oldProps) {
+    if (!(k in props)) {
+      setTagProp(bnode, k, null);
+    }
+  }
+  for (const k in props) {
+    if (props[k] !== oldProps[k]) {
+      setTagProp(bnode, k, props[k]);
+    }
+  }
+}
+function setTagProp(bnode, key, value) {
+  const { listeners, hnode } = bnode;
+  if (key.startsWith("on")) {
+    const eventType = key.slice(2).toLowerCase();
+    const listener = listeners.get(eventType);
+    if (listener) {
+      hnode.removeEventListener(eventType, listener);
+    }
+    if (value != null) {
+      tinyassert2(
+        typeof value === "function",
+        `Invalid event listener prop for '${eventType}'`
+      );
+      listeners.set(eventType, value);
+      hnode.addEventListener(eventType, value);
+    }
+    return;
+  }
+  if (key in hnode) {
+    try {
+      hnode[key] = value != null ? value : "";
+      return;
+    } catch {
+    }
+  }
+  if (value != null) {
+    hnode.setAttribute(key, value);
+  } else {
+    hnode.removeAttribute(key);
+  }
+}
+function unmount(bnode) {
+  return unmountNode(bnode, false);
+}
+function unmountNode(bnode, skipRemove) {
+  if (bnode.type === NODE_TYPE_EMPTY) {
+    return;
+  } else if (bnode.type === NODE_TYPE_TAG) {
+    unmountNode(
+      bnode.child,
+      /* skipRemove */
+      true
+    );
+    if (!skipRemove) {
+      bnode.hnode.remove();
+      bnode.ref?.(null);
+    }
+  } else if (bnode.type === NODE_TYPE_TEXT) {
+    bnode.hnode.remove();
+  } else if (bnode.type === NODE_TYPE_FRAGMENT) {
+    for (const child of bnode.children) {
+      unmountNode(child, skipRemove);
+    }
+  } else if (bnode.type === NODE_TYPE_CUSTOM) {
+    bnode.hookContext.cleanupEffect("layout-effect");
+    bnode.hookContext.cleanupEffect("effect");
+    bnode.hparent = void 0;
+    unmountNode(bnode.child, skipRemove);
+  } else {
+    bnode;
+  }
+}
+var EffectManager = class {
+  // TODO: effect ordering? (currently DFS exit time ordering)
+  refNodes = [];
+  effectNodes = [];
+  run() {
+    for (const tagNode of this.refNodes) {
+      if (tagNode.ref) {
+        tagNode.ref(tagNode.hnode);
+      }
+    }
+    for (const customNode of this.effectNodes) {
+      customNode.hookContext.runEffect("layout-effect");
+    }
+    requestAnimationFrame(() => {
+      for (const customNode of this.effectNodes) {
+        if (customNode.hparent) {
+          customNode.hookContext.runEffect("effect");
+        }
+      }
+    });
+  }
+};
+function useSyncExternalStore(subscribe, getSnapshot, _getServerSnapshot) {
+  const [value, setValue] = useState(() => getSnapshot());
+  const latestRef = useRef({ getSnapshot });
+  latestRef.current.getSnapshot = getSnapshot;
+  useEffect(() => {
+    return subscribe(() => {
+      setValue(latestRef.current.getSnapshot());
+    });
+  }, [subscribe]);
+  return value;
+}
+
+// ../tiny-transition/dist/index.js
+function tinyassert3(value, message) {
+  if (value) {
+    return;
+  }
+  if (message instanceof Error) {
+    throw message;
+  }
+  throw new TinyAssertionError3(message, tinyassert3);
+}
+var TinyAssertionError3 = class _TinyAssertionError2 extends Error {
+  constructor(message, stackStartFunction) {
+    super(message);
+    if ("captureStackTrace" in Error) {
+      Error.captureStackTrace(this, stackStartFunction ?? _TinyAssertionError2);
+    }
+  }
+};
+var TransitionManager = class {
+  constructor(options) {
+    this.options = options;
+    this.state = this.options.defaultEntered ? "entered" : "left";
+  }
+  listeners = /* @__PURE__ */ new Set();
+  disposables = /* @__PURE__ */ new Set();
+  state = "left";
+  el = null;
+  shouldRender() {
+    return this.state !== "left";
+  }
+  show(show) {
+    if (show && this.state !== "entering" && this.state !== "entered") {
+      this.state = "entering";
+      this.startEnter();
+      this.notify();
+    }
+    if (!show && this.state !== "leaving" && this.state !== "left") {
+      this.state = "leaving";
+      this.startLeave();
+      this.notify();
+    }
+  }
+  // api compatible with ref callback
+  setElement = (el) => {
+    this.dispose();
+    this.el = el;
+    if (!el)
+      return;
+    if (this.state === "entered") {
+      this.options.onEntered?.(el);
+    } else if (this.state === "entering") {
+      this.startEnter();
+    }
+  };
+  startEnter() {
+    if (!this.el)
+      return;
+    const el = this.el;
+    this.options.onEnterFrom?.(el);
+    this.dispose();
+    this.disposables.add(
+      onNextFrame(() => {
+        forceStyle(el);
+        this.options.onEnterTo?.(el);
+        this.disposables.add(
+          onTransitionEnd(el, () => {
+            this.state = "entered";
+            this.notify(() => this.options.onEntered?.(el));
+          })
+        );
+      })
+    );
+  }
+  startLeave() {
+    if (!this.el)
+      return;
+    const el = this.el;
+    this.options.onLeaveFrom?.(el);
+    this.dispose();
+    this.disposables.add(
+      onNextFrame(() => {
+        forceStyle(el);
+        this.options.onLeaveTo?.(el);
+        this.disposables.add(
+          onTransitionEnd(el, () => {
+            this.state = "left";
+            this.notify(() => this.options.onLeft?.(el));
+          })
+        );
+      })
+    );
+  }
+  dispose() {
+    this.disposables.forEach((f) => f());
+    this.disposables.clear();
+  }
+  //
+  // api for React.useSyncExternalStore
+  //
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getSnapshot = () => this.state;
+  notify(callback) {
+    if (this.listeners.size === 0)
+      return;
+    callback?.();
+    this.listeners.forEach((f) => f());
+  }
+};
+function onNextFrame(callback) {
+  const id = requestAnimationFrame(callback);
+  return () => {
+    cancelAnimationFrame(id);
+  };
+}
+function onTransitionEnd(el, callback) {
+  const timeoutDuration = computeTransitionTimeout(el);
+  const handle = setTimeout(() => callback(), timeoutDuration);
+  return () => {
+    clearTimeout(handle);
+  };
+}
+function computeTransitionTimeout(el) {
+  const style = getComputedStyle(el);
+  const [duration, delay] = [
+    style.transitionDuration,
+    style.transitionDelay
+  ].map((s) => Math.max(...parseDuration(s)));
+  return duration + delay;
+}
+function parseDuration(s) {
+  return s.trim().split(",").map((s2) => parseDurationSingle(s2.trim()));
+}
+function parseDurationSingle(s) {
+  let ms = 0;
+  if (!s) {
+    ms = 0;
+  } else if (s.endsWith("ms")) {
+    ms = Number.parseFloat(s.slice(0, -2));
+  } else if (s.endsWith("s")) {
+    ms = Number.parseFloat(s.slice(0, -1)) * 1e3;
+  }
+  tinyassert3(Number.isFinite(ms), `failed to parse css duration '${s}'`);
+  return ms;
+}
+function forceStyle(el) {
+  typeof getComputedStyle(el).transition;
+}
+
+// src/tiny-react/ui.tsx
+function ToastContainer({ toast }) {
+  useSyncExternalStore(toast.subscribe, toast.getSnapshot, toast.getSnapshot);
+  return h.div(
+    {
+      style: istyle({
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        pointerEvents: "none"
+      }),
+      onmouseenter: () => {
+        toast.pause(true);
+      },
+      onmouseleave: () => {
+        toast.pause(false);
+      }
+    },
+    h.div(
+      {
+        style: istyle({
+          position: "absolute",
+          top: "0.5rem",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column-reverse",
+          alignItems: "center"
+        })
+      },
+      toast.items.map(
+        (item) => h(ToastAnimation, { key: item.id, toast, item })
+      )
+    )
+  );
+}
+function ToastAnimation({
+  toast,
+  item
+}) {
+  const [manager] = useState(() => {
+    const transition = slideScaleCollapseTransition({
+      position: "top-center"
+    });
+    const manager2 = new TransitionManager({
+      defaultEntered: false,
+      onEnterFrom: transition.enterFrom,
+      onEnterTo: transition.enterTo,
+      onEntered: transition.entered,
+      onLeaveFrom: transition.leaveFrom,
+      onLeaveTo: transition.leaveTo,
+      onLeft: () => toast.remove(item.id)
+    });
+    return manager2;
+  });
+  useSyncExternalStore(
+    manager.subscribe,
+    manager.getSnapshot,
+    manager.getSnapshot
+  );
+  useEffect(() => {
+    manager.show(item.step < TOAST_STEP.DISMISS);
+  }, [item.step]);
+  if (!manager.shouldRender()) {
+    return h(Fragment, {});
+  }
+  return h.div(
+    {
+      ref: manager.setElement
+    },
+    h.div(
+      {
+        style: istyle({
+          pointerEvents: "auto",
+          display: "inline-block",
+          padding: "0.25rem 0"
+        })
+      },
+      h(ToastItemComponent, { toast, item })
+    )
+  );
+}
+function ToastItemComponent({
+  toast,
+  item
+}) {
+  return h.div(
+    {
+      className: item.data.className,
+      style: istyle({
+        display: "flex",
+        alignItems: "center",
+        padding: "10px 10px",
+        borderRadius: "8px",
+        boxShadow: "0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)"
+      }) + (item.data.style ?? "")
+    },
+    includesGuard(["success", "error", "info"], item.data.type) && h.span({
+      key: item.data.type,
+      // ref callback to imitate dangerouslySetInnerHTML
+      ref: (el) => {
+        if (el && !el.innerHTML) {
+          el.innerHTML = TOAST_TYPE_ICONS[item.data.type];
+        }
+      },
+      style: istyle({
+        width: "1.5rem",
+        height: "1.5rem",
+        color: TOAST_TYPE_ICON_COLORS[item.data.type]
+      })
+    }),
+    h.div(
+      { style: istyle({ padding: "0 10px" }) },
+      item.data.message({ h, item, toast })
+    )
+  );
+}
+
+// src/tiny-react/api.tsx
+var TinyReactToastManager = class extends ToastManager {
+  defaultOptions = {
+    position: "top-center",
+    duration: 4e3
+  };
+  render() {
+    const el = document.createElement("div");
+    el.setAttribute("data-tiny-toast", "");
+    document.body.appendChild(el);
+    render(h(ToastContainer, { toast: this }), el);
+    return () => {
+      render(h(Fragment, {}), el);
+      el.remove();
+    };
+  }
+  success = createByTypeFactory("success");
+  error = createByTypeFactory("error");
+  info = createByTypeFactory("info");
+  custom = createByTypeFactory("custom");
+};
+function createByTypeFactory(type) {
+  return function(message, options) {
+    this.create(
+      {
+        message: typeof message === "function" ? message : () => message,
+        type,
+        position: options?.position ?? this.defaultOptions.position,
+        className: options?.className ?? this.defaultOptions.className,
+        style: options?.style ?? this.defaultOptions.style
+      },
+      {
+        duration: options?.duration ?? this.defaultOptions.duration / (type === "success" ? 2 : 1)
+      }
+    );
+  };
+}
 export {
@@ -251,4 +1135,5 @@ TOAST_POSITIONS,
   TOAST_TYPE_ICON_COLORS,
+  TinyReactToastManager,
   ToastManager,
   slideScaleCollapseTransition
 };

dist/preact/index.d.ts

@@ -1,2 +0,2 @@
-import { ToastItem, ToastManager, ToastType, ToastPosition } from '../index.js';
+import { T as ToastItem, a as ToastManager, b as ToastType, c as ToastPosition } from '../common-147f71a5.js';
 
@@ -3,0 +3,0 @@ type VendorPreact = {

dist/preact/index.js

@@ -335,2 +335,5 @@ // ../../node_modules/.pnpm/preact@10.17.1/node_modules/preact/dist/preact.mjs
 var styleAssign = Object.assign;
+function istyle(props) {
+  return Object.entries(props).map(([k3, v3]) => `${k3.replace(/[A-Z]/g, "-$&").toLowerCase()}:${v3};`).join("");
+}
 
@@ -754,7 +757,7 @@ // src/core.ts
       styleAssign(el.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         height: "0"
       });
       styleAssign(el.firstElementChild.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         opacity: "0.5",
@@ -948,5 +951,2 @@ transform: cls(
 }
-function istyle(props) {
-  return Object.entries(props).map(([k3, v3]) => `${k3.replace(/[A-Z]/g, "-$&").toLowerCase()}:${v3};`).join("");
-}
 
@@ -953,0 +953,0 @@ // src/preact/api.tsx

dist/react/index.d.ts

 import React from 'react';
-import { ToastPosition, ToastType, ToastItem, ToastManager, ToastCoreOptions } from '../index.js';
+import { c as ToastPosition, b as ToastType, T as ToastItem, a as ToastManager, d as ToastCoreOptions } from '../common-147f71a5.js';
 
@@ -4,0 +4,0 @@ type RenderReactNode = (props: {

dist/react/index.js

@@ -524,7 +524,7 @@ // src/utils.ts
       styleAssign(el.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         height: "0"
       });
       styleAssign(el.firstElementChild.style, {
-        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        transition: "all 0.3s cubic-bezier(0, 0.8, 0.5, 1)",
         opacity: "0.5",
@@ -531,0 +531,0 @@ transform: cls(

package.json

 {
   "name": "@hiogawa/tiny-toast",
-  "version": "0.1.1-pre.7",
+  "version": "0.1.1-pre.8",
+  "homepage": "https://github.com/hi-ogawa/unocss-preset-antd/tree/main/packages/tiny-toast",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hi-ogawa/unocss-preset-antd/",
+    "directory": "packages/tiny-transition"
+  },
+  "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "exports": {
@@ -25,13 +29,10 @@ ".": {
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "license": "MIT",
-  "homepage": "https://github.com/hi-ogawa/unocss-preset-antd/tree/main/packages/tiny-toast",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/hi-ogawa/unocss-preset-antd/",
-    "directory": "packages/tiny-transition"
-  },
   "devDependencies": {
+    "@hiogawa/tiny-react": "0.0.1-pre.10",
     "@hiogawa/utils": "1.6.1-pre.7",
@@ -42,4 +43,4 @@ "@hiogawa/utils-react": "^1.3.1-pre.0",
     "react": "^18.2.0",
-    "@hiogawa/unocss-preset-antd": "2.2.1-pre.5",
-    "@hiogawa/tiny-transition": "0.0.1-pre.3"
+    "@hiogawa/tiny-transition": "0.0.1-pre.3",
+    "@hiogawa/unocss-preset-antd": "2.2.1-pre.7"
   },
@@ -46,0 +47,0 @@ "peerDependencies": {

README.md

 # tiny-toast
 
-Simple toast UI system with framework-agnostic core module is separated.
+Simple framework-agnostic toast UI
 
-## example
+## examples
 
-https://unocss-preset-antd-hiro18181.vercel.app/Toast
+- https://unocss-preset-antd-hiro18181.vercel.app/Toast
+- https://unocss-preset-antd-solidjs-hiro18181.vercel.app/Toast

No alert changes

Improved metrics

Total package byte prevSize

277160

increased by92.17%

Number of package files

20

increased by33.33%

Lines of code

9300

increased by112.33%

Number of lines in readme file

9

increased by12.5%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes