@cryptiklemur/lattice 4.0.2 → 5.0.0

package/src/client/components/ui/IconPicker.tsx

@@ -1,184 +0,0 @@
-import { useState, useMemo } from "react";
-import { icons } from "lucide-react";
-import type { ProjectIcon } from "#shared";
-
-type Tab = "lucide" | "text" | "upload";
-
-interface IconPickerProps {
-  value?: ProjectIcon;
-  onChange: (icon: ProjectIcon) => void;
-}
-
-function renderPreview(value?: ProjectIcon) {
-  if (!value) {
-    return (
-      <div className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-base-content/30 text-[11px]">
-        ?
-      </div>
-    );
-  }
-
-  if (value.type === "lucide") {
-    var LucideIcon = icons[value.name as keyof typeof icons];
-    if (!LucideIcon) return null;
-    return (
-      <div className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-base-content">
-        <LucideIcon size={18} />
-      </div>
-    );
-  }
-
-  if (value.type === "text") {
-    return (
-      <div
-        className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-[14px] font-bold"
-        style={value.color ? { color: value.color } : undefined}
-      >
-        {value.value}
-      </div>
-    );
-  }
-
-  if (value.type === "image") {
-    return (
-      <img src={value.path} alt="icon" className="w-8 h-8 rounded-lg object-cover border border-base-content/15" loading="lazy" />
-    );
-  }
-
-  return null;
-}
-
-export function IconPicker({ value, onChange }: IconPickerProps) {
-  var normalizedValue = value && (value as { type: string }).type === "emoji" ? undefined : value;
-  var [tab, setTab] = useState<Tab>(normalizedValue?.type === "text" ? "text" : normalizedValue?.type === "image" ? "upload" : "lucide");
-  var [search, setSearch] = useState("");
-  var [textValue, setTextValue] = useState(normalizedValue?.type === "text" ? normalizedValue.value : "");
-  var [textColor, setTextColor] = useState(normalizedValue?.type === "text" ? (normalizedValue.color || "#ffffff") : "#ffffff");
-
-  var iconNames = useMemo(function () {
-    var allNames = Object.keys(icons);
-    if (!search.trim()) return allNames.slice(0, 60);
-    var term = search.toLowerCase();
-    return allNames.filter(function (name) {
-      return name.toLowerCase().includes(term);
-    }).slice(0, 60);
-  }, [search]);
-
-  var tabs: { id: Tab; label: string }[] = [
-    { id: "lucide", label: "Lucide" },
-    { id: "text", label: "Text" },
-    { id: "upload", label: "Upload" },
-  ];
-
-  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-    var file = e.target.files?.[0];
-    if (!file) return;
-    var reader = new FileReader();
-    reader.onload = function (ev) {
-      var dataUrl = ev.target?.result as string;
-      onChange({ type: "image", path: dataUrl });
-    };
-    reader.readAsDataURL(file);
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-3">
-        {renderPreview(normalizedValue)}
-        <span className="text-[11px] text-base-content/40">Current icon</span>
-      </div>
-
-      <div className="flex gap-1">
-        {tabs.map(function (t) {
-          return (
-            <button
-              key={t.id}
-              type="button"
-              onClick={function () { setTab(t.id); }}
-              className={"btn btn-xs " + (tab === t.id ? "btn-primary" : "btn-ghost")}
-            >
-              {t.label}
-            </button>
-          );
-        })}
-      </div>
-
-      {tab === "lucide" && (
-        <div className="space-y-2">
-          <input
-            type="text"
-            value={search}
-            onChange={function (e) { setSearch(e.target.value); }}
-            placeholder="Search icons..."
-            aria-label="Search icons"
-            className="w-full h-8 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
-          />
-          <div className="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
-            {iconNames.map(function (name) {
-              var Icon = icons[name as keyof typeof icons];
-              var selected = normalizedValue?.type === "lucide" && normalizedValue.name === name;
-              return (
-                <button
-                  key={name}
-                  type="button"
-                  title={name}
-                  onClick={function () { onChange({ type: "lucide", name: name }); }}
-                  className={
-                    "w-8 h-8 flex items-center justify-center rounded-lg text-base-content transition-colors duration-75 " +
-                    (selected ? "border border-primary bg-base-300" : "hover:bg-base-300")
-                  }
-                >
-                  <Icon size={16} />
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {tab === "text" && (
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={textValue}
-            maxLength={2}
-            onChange={function (e) {
-              setTextValue(e.target.value);
-              if (e.target.value) {
-                onChange({ type: "text", value: e.target.value, color: textColor });
-              }
-            }}
-            placeholder="1-2 chars"
-            aria-label="Icon text"
-            className="flex-1 h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
-          />
-          <input
-            type="color"
-            value={textColor}
-            onChange={function (e) {
-              setTextColor(e.target.value);
-              if (textValue) {
-                onChange({ type: "text", value: textValue, color: e.target.value });
-              }
-            }}
-            className="w-9 h-9 rounded-xl border border-base-content/15 bg-base-300 cursor-pointer"
-          />
-        </div>
-      )}
-
-      {tab === "upload" && (
-        <div className="space-y-2">
-          <input
-            type="file"
-            accept="image/*"
-            onChange={handleFileChange}
-            className="w-full text-[12px] text-base-content/60 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[12px] file:bg-base-300 file:text-base-content/60 file:cursor-pointer"
-          />
-          {normalizedValue?.type === "image" && (
-            <img src={normalizedValue.path} alt="preview" className="w-16 h-16 rounded-xl object-cover border border-base-content/15" loading="lazy" />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/client/components/ui/KeyboardShortcuts.tsx

@@ -1,129 +0,0 @@
-import { useEffect, useState } from "react";
-import { X } from "lucide-react";
-
-interface ShortcutEntry {
-  keys: string[];
-  description: string;
-}
-
-interface ShortcutCategory {
-  name: string;
-  shortcuts: ShortcutEntry[];
-}
-
-var isMac = typeof navigator !== "undefined" && navigator.platform.indexOf("Mac") !== -1;
-var modKey = isMac ? "\u2318" : "Ctrl";
-
-var categories: ShortcutCategory[] = [
-  {
-    name: "Chat",
-    shortcuts: [
-      { keys: ["Enter"], description: "Send message" },
-      { keys: ["Shift", "Enter"], description: "New line" },
-      { keys: ["\u2191"], description: "Previous input history" },
-      { keys: ["\u2193"], description: "Next input history" },
-      { keys: ["/"], description: "Slash commands" },
-      { keys: ["Escape"], description: "Close autocomplete" },
-    ],
-  },
-  {
-    name: "Navigation",
-    shortcuts: [
-      { keys: [modKey, "K"], description: "Command palette" },
-      { keys: ["?"], description: "Keyboard shortcuts" },
-      { keys: ["Escape"], description: "Close modal / exit settings" },
-    ],
-  },
-  {
-    name: "Session",
-    shortcuts: [
-      { keys: ["/clear"], description: "New session" },
-      { keys: ["/copy"], description: "Copy last response" },
-      { keys: ["/export"], description: "Export conversation" },
-      { keys: ["/rename"], description: "Rename session" },
-    ],
-  },
-];
-
-function Kbd(props: { children: string }) {
-  return (
-    <kbd className="bg-base-300 border border-base-content/20 rounded px-1.5 py-0.5 text-[11px] font-mono text-base-content/70 leading-none inline-flex items-center justify-center min-w-[22px]">
-      {props.children}
-    </kbd>
-  );
-}
-
-export function KeyboardShortcuts() {
-  var [open, setOpen] = useState(false);
-
-  useEffect(function () {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
-        var tag = (e.target as HTMLElement).tagName;
-        if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement).isContentEditable) return;
-        e.preventDefault();
-        setOpen(true);
-      }
-      if (e.key === "Escape" && open) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () { document.removeEventListener("keydown", handleKeyDown); };
-  }, [open]);
-
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-[9998] flex items-center justify-center" onClick={function () { setOpen(false); }}>
-      <div className="absolute inset-0 bg-base-content/50" />
-      <div
-        className="relative w-full max-w-[540px] mx-4 bg-base-200 border border-base-content/15 rounded-2xl shadow-xl overflow-hidden"
-        onClick={function (e) { e.stopPropagation(); }}
-      >
-        <div className="flex items-center justify-between px-5 py-3.5 border-b border-base-content/10">
-          <h2 className="text-[14px] font-mono font-bold text-base-content tracking-tight">Keyboard Shortcuts</h2>
-          <button
-            onClick={function () { setOpen(false); }}
-            className="w-6 h-6 rounded flex items-center justify-center text-base-content/30 hover:text-base-content/60 transition-colors"
-          >
-            <X size={14} />
-          </button>
-        </div>
-        <div className="px-5 py-4 max-h-[70vh] overflow-y-auto">
-          <div className="flex flex-col gap-5">
-            {categories.map(function (cat) {
-              return (
-                <div key={cat.name}>
-                  <div className="text-[9px] uppercase tracking-widest text-base-content/30 font-mono font-bold mb-2">{cat.name}</div>
-                  <div className="flex flex-col gap-1">
-                    {cat.shortcuts.map(function (shortcut, i) {
-                      return (
-                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-base-content/5 transition-colors">
-                          <span className="text-[13px] text-base-content/60">{shortcut.description}</span>
-                          <div className="flex items-center gap-1 flex-shrink-0 ml-4">
-                            {shortcut.keys.map(function (key, ki) {
-                              return (
-                                <span key={ki} className="flex items-center gap-1">
-                                  {ki > 0 && <span className="text-[10px] text-base-content/20">+</span>}
-                                  <Kbd>{key}</Kbd>
-                                </span>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-        <div className="px-5 py-2.5 border-t border-base-content/10 flex justify-end">
-          <span className="text-[10px] font-mono text-base-content/20">Press <Kbd>Esc</Kbd> to close</span>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/client/components/ui/LatticeLogomark.tsx

@@ -1,19 +0,0 @@
-interface LatticeLogomarkProps {
-  size: number;
-}
-
-export function LatticeLogomark(props: LatticeLogomarkProps) {
-  var s = props.size;
-  return (
-    <svg width={s} height={s} viewBox="0 0 48 48" fill="none" aria-hidden="true">
-      <rect x="4" y="4" width="18" height="18" rx="3" fill="currentColor" />
-      <rect x="26" y="4" width="18" height="18" rx="3" fill="currentColor" opacity="0.55" />
-      <rect x="4" y="26" width="18" height="18" rx="3" fill="currentColor" opacity="0.55" />
-      <rect x="26" y="26" width="18" height="18" rx="3" fill="currentColor" opacity="0.25" />
-      <line x1="13" y1="22" x2="13" y2="26" stroke="currentColor" strokeWidth="1.5" opacity="0.8" />
-      <line x1="35" y1="22" x2="35" y2="26" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
-      <line x1="22" y1="13" x2="26" y2="13" stroke="currentColor" strokeWidth="1.5" opacity="0.8" />
-      <line x1="22" y1="35" x2="26" y2="35" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
-    </svg>
-  );
-}

package/src/client/components/ui/NodeDisconnectedOverlay.tsx

@@ -1,35 +0,0 @@
-import { WifiOff, Loader2 } from "lucide-react";
-import { useProjects } from "../../hooks/useProjects";
-import { useMesh } from "../../hooks/useMesh";
-import { useSidebar } from "../../hooks/useSidebar";
-
-export function NodeDisconnectedOverlay() {
-  var { activeProject } = useProjects();
-  var { nodes } = useMesh();
-  var sidebar = useSidebar();
-
-  if (!activeProject || !activeProject.isRemote) return null;
-  if (sidebar.activeView.type !== "chat") return null;
-
-  var remoteNode = nodes.find(function (n) { return n.id === activeProject!.nodeId; });
-  if (!remoteNode || remoteNode.online) return null;
-
-  return (
-    <div className="absolute inset-0 z-40 flex items-center justify-center bg-base-100/80 backdrop-blur-sm">
-      <div className="bg-base-300 border border-base-content/15 rounded-2xl shadow-2xl px-8 py-6 max-w-sm text-center">
-        <WifiOff size={28} className="text-warning mx-auto mb-3" />
-        <h3 className="text-[15px] font-mono font-bold text-base-content mb-1">Node Disconnected</h3>
-        <p className="text-[13px] text-base-content/50 mb-3">
-          <span className="font-semibold text-base-content/70">{remoteNode.name}</span> is unreachable.
-        </p>
-        <div className="flex items-center justify-center gap-2 text-[12px] text-base-content/40">
-          <Loader2 size={12} className="animate-spin" />
-          Attempting to reconnect...
-        </div>
-        <p className="text-[11px] text-base-content/25 mt-3">
-          Session state preserved. Operations will resume on reconnect.
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/client/components/ui/PopupMenu.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-
-export interface PopupMenuItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  danger?: boolean;
-  separator?: boolean;
-}
-
-interface PopupMenuProps {
-  items: PopupMenuItem[];
-  onSelect: (id: string) => void;
-  onClose: () => void;
-  anchorRef: React.RefObject<HTMLElement | null>;
-  position?: "above" | "below" | "right";
-}
-
-export function PopupMenu(props: PopupMenuProps) {
-  var menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(function () {
-    function handleClickOutside(e: MouseEvent) {
-      if (
-        menuRef.current &&
-        !menuRef.current.contains(e.target as Node) &&
-        props.anchorRef.current &&
-        !props.anchorRef.current.contains(e.target as Node)
-      ) {
-        props.onClose();
-      }
-    }
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        props.onClose();
-      }
-    }
-    function handleScroll() {
-      props.onClose();
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    window.addEventListener("scroll", handleScroll, true);
-    return function () {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [props.onClose, props.anchorRef]);
-
-  var style: React.CSSProperties = {};
-  if (props.anchorRef.current) {
-    var rect = props.anchorRef.current.getBoundingClientRect();
-    var pos = props.position ?? "above";
-    var menuWidth = 180;
-    var menuHeight = 200;
-
-    if (pos === "above") {
-      style.bottom = window.innerHeight - rect.top + 4 + "px";
-      var leftAbove = rect.left;
-      if (leftAbove + menuWidth > window.innerWidth - 8) leftAbove = window.innerWidth - menuWidth - 8;
-      if (leftAbove < 8) leftAbove = 8;
-      style.left = leftAbove + "px";
-    } else if (pos === "below") {
-      var topBelow = rect.bottom + 4;
-      if (topBelow + menuHeight > window.innerHeight - 8) {
-        style.bottom = window.innerHeight - rect.top + 4 + "px";
-      } else {
-        style.top = topBelow + "px";
-      }
-      var leftBelow = rect.left;
-      if (leftBelow + menuWidth > window.innerWidth - 8) leftBelow = window.innerWidth - menuWidth - 8;
-      if (leftBelow < 8) leftBelow = 8;
-      style.left = leftBelow + "px";
-    } else if (pos === "right") {
-      var topRight = rect.top;
-      if (topRight + menuHeight > window.innerHeight - 8) topRight = window.innerHeight - menuHeight - 8;
-      if (topRight < 8) topRight = 8;
-      style.top = topRight + "px";
-      var leftRight = rect.right + 4;
-      if (leftRight + menuWidth > window.innerWidth - 8) leftRight = rect.left - menuWidth - 4;
-      if (leftRight < 8) leftRight = 8;
-      style.left = leftRight + "px";
-    }
-  }
-
-  return createPortal(
-    <div
-      ref={menuRef}
-      role="menu"
-      aria-label="Actions"
-      className="fixed z-[9999] bg-base-300 border border-base-content/10 rounded-lg shadow-xl p-1 min-w-[180px] max-h-[80vh] overflow-y-auto"
-      style={style}
-    >
-      {props.items.map(function (item) {
-        if (item.separator) {
-          return <div key={item.id} className="h-px bg-base-content/8 my-1 mx-2" />;
-        }
-        return (
-          <button
-            key={item.id}
-            role="menuitem"
-            onClick={function () { props.onSelect(item.id); }}
-            className={
-              "w-full flex items-center gap-2 px-2.5 py-[6px] rounded text-[11px] text-left cursor-pointer transition-colors duration-[120ms] outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset " +
-              (item.danger
-                ? "text-error hover:bg-error/10"
-                : "text-base-content/70 hover:bg-base-content/5 hover:text-base-content")
-            }
-          >
-            {item.icon && <span className="opacity-60 flex-shrink-0">{item.icon}</span>}
-            {item.label}
-          </button>
-        );
-      })}
-    </div>,
-    document.body
-  );
-}

package/src/client/components/ui/SaveFooter.tsx

@@ -1,63 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Loader2, Check, X } from "lucide-react";
-import type { SaveState } from "../../hooks/useSaveState";
-import { showToast } from "./Toast";
-
-interface SaveFooterProps {
-  dirty: boolean;
-  saving: boolean;
-  saveState: SaveState;
-  onSave: () => void;
-  extraStatus?: string;
-}
-
-export function SaveFooter({ dirty, saving, saveState, onSave, extraStatus }: SaveFooterProps) {
-  var disabled = saving || (!dirty && saveState !== "error");
-  var prevStateRef = useRef<SaveState>("idle");
-
-  useEffect(function () {
-    if (prevStateRef.current !== saveState) {
-      if (saveState === "saved") {
-        showToast("Settings saved", "info");
-      } else if (saveState === "error") {
-        showToast("Failed to save settings — server did not respond within 5 seconds", "error");
-      }
-      prevStateRef.current = saveState;
-    }
-  }, [saveState]);
-
-  return (
-    <div className="flex items-center justify-end gap-3">
-      {extraStatus && (
-        <div className="text-[11px] text-warning/70">{extraStatus}</div>
-      )}
-      {!extraStatus && dirty && saveState === "idle" && !saving && (
-        <div className="text-[11px] text-warning/70">Unsaved changes</div>
-      )}
-      {saveState === "error" && (
-        <div className="flex items-center gap-1.5 text-[11px] text-error">
-          <X size={11} />
-          Save failed — server did not respond
-        </div>
-      )}
-      {saveState === "saved" && (
-        <div className="flex items-center gap-1.5 text-[11px] text-success/70">
-          <Check size={11} />
-          Saved
-        </div>
-      )}
-      <button
-        onClick={onSave}
-        disabled={disabled}
-        className={
-          "btn btn-sm gap-1.5 " +
-          (saveState === "saved" ? "btn-success" : saveState === "error" ? "btn-error" : "btn-primary") +
-          (disabled ? " opacity-50 cursor-not-allowed" : "")
-        }
-      >
-        {saving && <Loader2 size={13} className="animate-spin" />}
-        {saving ? "Saving..." : saveState === "error" ? "Retry" : "Save Changes"}
-      </button>
-    </div>
-  );
-}

package/src/client/components/ui/Toast.tsx

@@ -1,132 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import { X, Info, AlertTriangle, AlertCircle } from "lucide-react";
-
-export interface ToastOptions {
-  persistent?: boolean;
-  duration?: number;
-}
-
-export interface ToastItem {
-  id: string;
-  message: string;
-  type: "info" | "error" | "warning";
-  persistent?: boolean;
-  duration?: number;
-}
-
-interface ToastProps {
-  items: ToastItem[];
-  onDismiss: (id: string) => void;
-}
-
-var ICON_MAP = {
-  info: Info,
-  warning: AlertTriangle,
-  error: AlertCircle,
-};
-
-var ACCENT_MAP = {
-  info: "bg-primary",
-  warning: "bg-warning",
-  error: "bg-error",
-};
-
-var ICON_COLOR_MAP = {
-  info: "text-primary",
-  warning: "text-warning",
-  error: "text-error",
-};
-
-export function Toast(props: ToastProps) {
-  if (props.items.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="fixed top-3 right-3 z-[9999] flex flex-col gap-2 max-w-[340px]" role="status" aria-live="polite" aria-atomic="false">
-      {props.items.map(function (item) {
-        var Icon = ICON_MAP[item.type];
-        return (
-          <div
-            key={item.id}
-            className="flex items-start gap-2.5 bg-base-300 border border-base-content/10 rounded-lg shadow-xl px-3 py-2.5 animate-[toast-in_0.18s_ease]"
-          >
-            <div className={"w-0.5 self-stretch rounded-full flex-shrink-0 " + ACCENT_MAP[item.type]} />
-            <Icon size={14} className={"flex-shrink-0 mt-0.5 " + ICON_COLOR_MAP[item.type]} />
-            <span className="flex-1 text-[13px] text-base-content/80 leading-snug">{item.message}</span>
-            <button
-              onClick={function () { props.onDismiss(item.id); }}
-              aria-label="Dismiss"
-              className="flex-shrink-0 text-base-content/30 hover:text-base-content/60 transition-colors mt-0.5"
-            >
-              <X size={13} />
-            </button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-var toastListeners: Array<(item: ToastItem) => void> = [];
-
-export function showToast(message: string, type: ToastItem["type"] = "info", options?: ToastOptions): void {
-  var persistent = options?.persistent;
-  var duration = options?.duration;
-
-  if (type === "error" && persistent === undefined && duration === undefined) {
-    persistent = true;
-  }
-
-  var item: ToastItem = {
-    id: Math.random().toString(36).slice(2),
-    message,
-    type,
-    persistent,
-    duration,
-  };
-  toastListeners.forEach(function (listener) {
-    listener(item);
-  });
-}
-
-export function useToastState(): { items: ToastItem[]; dismiss: (id: string) => void } {
-  var [items, setItems] = useState<ToastItem[]>([]);
-
-  var dismiss = useCallback(function (id: string) {
-    setItems(function (prev) {
-      return prev.filter(function (item) {
-        return item.id !== id;
-      });
-    });
-  }, []);
-
-  useEffect(function () {
-    function listener(item: ToastItem) {
-      setItems(function (prev) {
-        return [...prev, item];
-      });
-
-      if (item.persistent) return;
-
-      var timeout = item.duration ?? 5000;
-      setTimeout(function () {
-        setItems(function (prev) {
-          return prev.filter(function (i) {
-            return i.id !== item.id;
-          });
-        });
-      }, timeout);
-    }
-
-    toastListeners.push(listener);
-
-    return function () {
-      toastListeners = toastListeners.filter(function (l) {
-        return l !== listener;
-      });
-    };
-  }, []);
-
-  return { items, dismiss };
-}