@cryptiklemur/lattice 4.0.1 → 5.0.0

package/src/client/components/workspace/TabBar.tsx

@@ -1,170 +0,0 @@
-import { X, Columns2, Rows2, MessageSquare, FolderOpen, TerminalSquare, StickyNote, Calendar, Bookmark, BarChart3 } from "lucide-react";
-import { useWorkspace } from "../../hooks/useWorkspace";
-import { useSession } from "../../hooks/useSession";
-import type { Tab, TabType } from "../../stores/workspace";
-import { pinTab } from "../../stores/workspace";
-import { formatSessionTitle } from "../../utils/formatSessionTitle";
-import { ContextMenu, useContextMenu } from "../ui/ContextMenu";
-
-interface TabBarProps {
-  paneId?: string;
-  isActivePane?: boolean;
-}
-
-var TAB_ICONS: Record<TabType, typeof MessageSquare> = {
-  chat: MessageSquare,
-  files: FolderOpen,
-  terminal: TerminalSquare,
-  notes: StickyNote,
-  tasks: Calendar,
-  bookmarks: Bookmark,
-  analytics: BarChart3,
-};
-
-export function TabBar({ paneId, isActivePane }: TabBarProps) {
-  var workspace = useWorkspace();
-  var session = useSession();
-  var ctxMenu = useContextMenu<string>();
-
-  var paneTabs: Tab[];
-  var activeTabId: string;
-
-  if (paneId) {
-    var pane = workspace.panes.find(function (p) { return p.id === paneId; });
-    if (!pane) return null;
-    paneTabs = pane.tabIds.map(function (id) {
-      return workspace.tabs.find(function (t) { return t.id === id; });
-    }).filter(function (t): t is Tab { return t != null; });
-    activeTabId = pane.activeTabId;
-  } else {
-    paneTabs = workspace.tabs;
-    activeTabId = workspace.activeTabId;
-  }
-
-  var shouldShow = paneTabs.length > 1 || workspace.panes.length > 1;
-
-  function getTabLabel(tab: Tab): string {
-    if (tab.type === "chat" && tab.sessionId) {
-      if (tab.sessionId === session.activeSessionId && session.activeSessionTitle) {
-        return formatSessionTitle(session.activeSessionTitle) || tab.label;
-      }
-      return formatSessionTitle(tab.label) || "Session";
-    }
-    return tab.label;
-  }
-
-  function handleTabClick(tabId: string) {
-    if (paneId) {
-      workspace.setPaneActiveTab(paneId, tabId);
-    } else {
-      workspace.setActiveTab(tabId);
-    }
-    var tab = workspace.tabs.find(function (t) { return t.id === tabId; });
-    if (tab && tab.type === "chat" && tab.sessionId && tab.projectSlug) {
-      if (session.activeSessionId !== tab.sessionId) {
-        session.activateSession(tab.projectSlug, tab.sessionId);
-      }
-    }
-  }
-
-  function handleCloseTab(tabId: string) {
-    workspace.closeTab(tabId);
-  }
-
-  function handleContextMenu(e: React.MouseEvent, tabId: string) {
-    if (workspace.panes.length >= 2) return;
-    var contextPane = paneId
-      ? workspace.panes.find(function (p) { return p.id === paneId; })
-      : workspace.panes[0];
-    if (!contextPane || contextPane.tabIds.length < 2) return;
-    ctxMenu.open(e, tabId);
-  }
-
-  function handleSplit(direction: "horizontal" | "vertical") {
-    if (!ctxMenu.state) return;
-    workspace.splitPane(ctxMenu.state.data, direction);
-    ctxMenu.close();
-  }
-
-  function handleMiddleClick(e: React.MouseEvent, tab: Tab) {
-    if (e.button === 1 && tab.closeable) {
-      e.preventDefault();
-      handleCloseTab(tab.id);
-    }
-  }
-
-  return (
-    <>
-      <div
-        className={
-          "flex items-stretch bg-base-200 overflow-x-auto flex-shrink-0 order-1 sm:order-none" +
-          (shouldShow ? " border-b border-t sm:border-t-0 border-base-content/15" : "") +
-          (isActivePane && shouldShow ? " sm:border-t-2 sm:border-t-primary/40" : "")
-        }
-        style={{
-          maxHeight: shouldShow ? "3rem" : "0",
-          opacity: shouldShow ? 1 : 0,
-          overflow: shouldShow ? undefined : "hidden",
-          transition: "max-height 0.2s ease, opacity 0.15s ease",
-        }}
-      >
-        {paneTabs.map(function (tab) {
-          var isActive = tab.id === activeTabId;
-          var Icon = TAB_ICONS[tab.type] || MessageSquare;
-          var label = getTabLabel(tab);
-          return (
-            <div
-              key={tab.id}
-              role="tab"
-              tabIndex={0}
-              aria-selected={isActive}
-              onClick={function () { handleTabClick(tab.id); }}
-              onDoubleClick={function () { if (!tab.pinned) pinTab(tab.id); }}
-              onMouseDown={function (e) { handleMiddleClick(e, tab); }}
-              onKeyDown={function (e) {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleTabClick(tab.id);
-                }
-              }}
-              onContextMenu={function (e) { handleContextMenu(e, tab.id); }}
-              className={
-                "flex items-center gap-2 px-4 py-2.5 text-[13px] font-mono border-r border-base-content/10 transition-colors whitespace-nowrap flex-shrink-0 outline-none cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset max-w-[200px] " +
-                (isActive
-                  ? "bg-base-100 text-base-content border-b-2 border-b-primary"
-                  : "text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30")
-              }
-            >
-              <Icon size={14} className={isActive ? "text-primary" : ""} />
-              <span className={"truncate text-[12px]" + (tab.pinned ? "" : " italic")}>{label}</span>
-              {tab.closeable && (
-                <button
-                  aria-label={"Close " + label + " tab"}
-                  onClick={function (e) {
-                    e.stopPropagation();
-                    handleCloseTab(tab.id);
-                  }}
-                  className="ml-0.5 p-1 rounded hover:bg-base-content/15 text-base-content/30 hover:text-base-content/60 outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                >
-                  <X size={12} />
-                </button>
-              )}
-            </div>
-          );
-        })}
-      </div>
-      {ctxMenu.state !== null && (
-        <ContextMenu
-          x={ctxMenu.state.x}
-          y={ctxMenu.state.y}
-          items={[
-            { label: "Split Right", icon: <Columns2 size={14} />, onClick: function () { handleSplit("horizontal"); } },
-            { label: "Split Down", icon: <Rows2 size={14} />, onClick: function () { handleSplit("vertical"); } },
-          ]}
-          onClose={ctxMenu.close}
-          label="Tab actions"
-        />
-      )}
-    </>
-  );
-}

package/src/client/components/workspace/TaskCard.tsx

@@ -1,159 +0,0 @@
-import { useState } from "react";
-import { ChevronDown, ChevronRight, Pencil, Trash2 } from "lucide-react";
-import cronstrue from "cronstrue";
-import type { ScheduledTask } from "#shared";
-
-interface TaskCardProps {
-  task: ScheduledTask;
-  onToggle: (taskId: string) => void;
-  onEdit: (task: ScheduledTask) => void;
-  onDelete: (taskId: string) => void;
-  disabled?: boolean;
-}
-
-function formatTime(ms: number | null): string {
-  if (!ms) return "—";
-  return new Date(ms).toLocaleString(undefined, {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-function humanCron(expr: string): string {
-  try {
-    return cronstrue.toString(expr, { use24HourTimeFormat: true });
-  } catch {
-    return expr;
-  }
-}
-
-export function TaskCard(props: TaskCardProps) {
-  var { task, onToggle, onEdit, onDelete, disabled } = props;
-  var [expanded, setExpanded] = useState(false);
-  var [confirming, setConfirming] = useState(false);
-
-  function handleToggleExpand(e: React.MouseEvent) {
-    e.stopPropagation();
-    setExpanded(function (prev) { return !prev; });
-  }
-
-  function handleDelete(e: React.MouseEvent) {
-    e.stopPropagation();
-    if (confirming) {
-      onDelete(task.id);
-    } else {
-      setConfirming(true);
-    }
-  }
-
-  function handleCancelDelete(e: React.MouseEvent) {
-    e.stopPropagation();
-    setConfirming(false);
-  }
-
-  function handleEdit(e: React.MouseEvent) {
-    e.stopPropagation();
-    onEdit(task);
-  }
-
-  function handleToggle(e: React.MouseEvent) {
-    e.stopPropagation();
-    onToggle(task.id);
-  }
-
-  return (
-    <div className="bg-base-200 border border-base-content/15 rounded-lg overflow-hidden">
-      <div
-        tabIndex={0}
-        role="button"
-        className="flex items-center gap-2.5 px-3 py-2.5 cursor-pointer hover:bg-base-300/50 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
-        onClick={handleToggleExpand}
-        onKeyDown={function (e) {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setExpanded(function (prev) { return !prev; });
-          }
-        }}
-        aria-expanded={expanded}
-      >
-        <span className="text-base-content/40 flex-shrink-0">
-          {expanded ? <ChevronDown className="!size-3.5" /> : <ChevronRight className="!size-3.5" />}
-        </span>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className={`text-[13px] font-medium truncate ${task.enabled ? "text-base-content" : "text-base-content/40"}`}>
-              {task.name}
-            </span>
-          </div>
-          <div className="text-[11px] text-base-content/40 truncate mt-0.5">
-            {humanCron(task.cron)}
-          </div>
-        </div>
-        <label className="swap flex-shrink-0" onClick={disabled ? undefined : handleToggle}>
-          <input
-            type="checkbox"
-            className="toggle toggle-primary toggle-xs"
-            checked={task.enabled}
-            disabled={disabled}
-            aria-label={"Toggle " + task.name}
-            onChange={function () {}}
-          />
-        </label>
-      </div>
-
-      {expanded && (
-        <div className="px-3 pb-3 border-t border-base-content/15 bg-base-100/50">
-          <div className="pt-2.5 space-y-2">
-            <div>
-              <span className="text-[11px] text-base-content/40 uppercase tracking-wider">Prompt</span>
-              <p className="text-[12px] text-base-content/80 mt-0.5 whitespace-pre-wrap break-words leading-relaxed">
-                {task.prompt}
-              </p>
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <div>
-                <span className="text-[11px] text-base-content/40 uppercase tracking-wider">Last Run</span>
-                <p className="text-[12px] text-base-content/70 mt-0.5">{formatTime(task.lastRunAt)}</p>
-              </div>
-              <div>
-                <span className="text-[11px] text-base-content/40 uppercase tracking-wider">Next Run</span>
-                <p className="text-[12px] text-base-content/70 mt-0.5">{formatTime(task.nextRunAt)}</p>
-              </div>
-            </div>
-            {!disabled && (
-              <div className="flex items-center gap-1.5 pt-1">
-                <button
-                  onClick={handleEdit}
-                  className="btn btn-ghost btn-xs border border-base-content/15 text-base-content/70 gap-1 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
-                >
-                  <Pencil className="!size-3" />
-                  Edit
-                </button>
-                {confirming ? (
-                  <div className="flex gap-1.5">
-                    <button onClick={handleDelete} className="btn btn-error btn-xs outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200">
-                      Confirm Delete
-                    </button>
-                    <button onClick={handleCancelDelete} className="btn btn-ghost btn-xs border border-base-content/15 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200">
-                      Cancel
-                    </button>
-                  </div>
-                ) : (
-                  <button
-                    onClick={handleDelete}
-                    className="btn btn-ghost btn-xs border border-base-content/15 text-base-content/50 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
-                    aria-label="Delete task"
-                  >
-                    <Trash2 className="!size-3" />
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/client/components/workspace/TaskEditModal.tsx

@@ -1,129 +0,0 @@
-import { useState, useRef, useCallback } from "react";
-import { X } from "lucide-react";
-import { useFocusTrap } from "../../hooks/useFocusTrap";
-import cronstrue from "cronstrue";
-import type { ScheduledTask } from "#shared";
-
-interface TaskEditModalProps {
-  task: ScheduledTask | null;
-  projectSlug: string;
-  onSave: (data: { name: string; prompt: string; cron: string }) => void;
-  onClose: () => void;
-}
-
-function getCronPreview(expr: string): string {
-  if (!expr.trim()) return "";
-  try {
-    return cronstrue.toString(expr.trim(), { use24HourTimeFormat: true });
-  } catch {
-    return "Invalid cron expression";
-  }
-}
-
-export function TaskEditModal(props: TaskEditModalProps) {
-  var { task, onSave, onClose } = props;
-  var [name, setName] = useState(task ? task.name : "");
-  var [prompt, setPrompt] = useState(task ? task.prompt : "");
-  var [cron, setCron] = useState(task ? task.cron : "0 9 * * 1-5");
-
-  var modalRef = useRef<HTMLDivElement>(null);
-  var stableOnClose = useCallback(function () { onClose(); }, [onClose]);
-  useFocusTrap(modalRef, stableOnClose);
-
-  var cronPreview = getCronPreview(cron);
-  var cronValid = cronPreview !== "Invalid cron expression" && cronPreview !== "";
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim() || !prompt.trim() || !cronValid) return;
-    onSave({ name: name.trim(), prompt: prompt.trim(), cron: cron.trim() });
-  }
-
-  function handleBackdrop(e: React.MouseEvent<HTMLDivElement>) {
-    if (e.target === e.currentTarget) onClose();
-  }
-
-  return (
-    <div
-      ref={modalRef}
-      className="fixed inset-0 z-[9999] flex items-center justify-center bg-base-content/50 backdrop-blur-sm"
-      onClick={handleBackdrop}
-      role="dialog"
-      aria-modal="true"
-      aria-label={task ? "Edit Task" : "New Scheduled Task"}
-    >
-      <div className="bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">
-          <h2 className="text-[14px] font-semibold text-base-content">
-            {task ? "Edit Task" : "New Scheduled Task"}
-          </h2>
-          <button
-            onClick={onClose}
-            aria-label="Close"
-            className="btn btn-ghost btn-xs btn-square text-base-content/50"
-          >
-            <X size={14} />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="p-5 space-y-4">
-          <div className="space-y-1.5">
-            <label htmlFor="task-name" className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Name</label>
-            <input
-              id="task-name"
-              type="text"
-              className="w-full 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]"
-              placeholder="Daily standup summary"
-              value={name}
-              onChange={function (e) { setName(e.target.value); }}
-              autoFocus
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <label htmlFor="task-prompt" className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Prompt</label>
-            <textarea
-              id="task-prompt"
-              className="w-full px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] min-h-[96px] resize-y leading-relaxed focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
-              placeholder="Summarize yesterday's work and create a plan for today..."
-              value={prompt}
-              onChange={function (e) { setPrompt(e.target.value); }}
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <label htmlFor="task-cron" className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Cron Expression</label>
-            <input
-              id="task-cron"
-              type="text"
-              className={`w-full h-9 px-3 bg-base-300 border rounded-xl text-base-content text-[13px] font-mono focus:border-primary focus-visible:outline-none transition-colors duration-[120ms] ${cron.trim() && !cronValid ? "border-error" : "border-base-content/15"}`}
-              placeholder="0 9 * * 1-5"
-              value={cron}
-              onChange={function (e) { setCron(e.target.value); }}
-              aria-invalid={cron.trim() && !cronValid ? "true" : undefined}
-              aria-describedby={cron.trim() ? "cron-preview" : undefined}
-            />
-            {cron.trim() && (
-              <p id="cron-preview" className={`text-[11px] mt-1 ${cronValid ? "text-primary/80" : "text-error"}`}>
-                {cronPreview}
-              </p>
-            )}
-          </div>
-
-          <div className="flex gap-2 pt-1">
-            <button
-              type="submit"
-              className="btn btn-primary btn-sm flex-1"
-              disabled={!name.trim() || !prompt.trim() || !cronValid}
-            >
-              {task ? "Save Changes" : "Create Task"}
-            </button>
-            <button type="button" onClick={onClose} className="btn btn-ghost btn-sm border border-base-content/15">
-              Cancel
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

package/src/client/components/workspace/TerminalInstance.tsx

@@ -1,171 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Terminal as XTerm } from "@xterm/xterm";
-import { FitAddon } from "@xterm/addon-fit";
-import { WebLinksAddon } from "@xterm/addon-web-links";
-import { SearchAddon } from "@xterm/addon-search";
-import "@xterm/xterm/css/xterm.css";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useSidebar } from "../../hooks/useSidebar";
-import type { ServerMessage, TerminalCreatedMessage, TerminalOutputMessage, TerminalExitedMessage } from "#shared";
-
-function getXtermTheme(): Record<string, string> {
-  var root = document.documentElement;
-  var cs = getComputedStyle(root);
-
-  function resolveVar(prop: string, fallback: string): string {
-    var val = cs.getPropertyValue(prop).trim();
-    return val || fallback;
-  }
-
-  return {
-    background: resolveVar("--base00", "#0d0d0d"),
-    foreground: resolveVar("--base05", "#d4d4d4"),
-    cursor: resolveVar("--base05", "#d4d4d4"),
-    selectionBackground: resolveVar("--base02", "#264f78"),
-    black: resolveVar("--base00", "#1e1e1e"),
-    red: resolveVar("--base08", "#f44747"),
-    green: resolveVar("--base0B", "#4ec9b0"),
-    yellow: resolveVar("--base0A", "#dcdcaa"),
-    blue: resolveVar("--base0D", "#569cd6"),
-    magenta: resolveVar("--base0E", "#c586c0"),
-    cyan: resolveVar("--base0C", "#9cdcfe"),
-    white: resolveVar("--base05", "#d4d4d4"),
-    brightBlack: resolveVar("--base03", "#808080"),
-    brightRed: resolveVar("--base08", "#f44747"),
-    brightGreen: resolveVar("--base0B", "#4ec9b0"),
-    brightYellow: resolveVar("--base0A", "#dcdcaa"),
-    brightBlue: resolveVar("--base0D", "#569cd6"),
-    brightMagenta: resolveVar("--base0E", "#c586c0"),
-    brightCyan: resolveVar("--base0C", "#9cdcfe"),
-    brightWhite: resolveVar("--base07", "#ffffff"),
-  };
-}
-
-interface TerminalInstanceProps {
-  instanceId: string;
-  visible: boolean;
-}
-
-export function TerminalInstance({ instanceId, visible }: TerminalInstanceProps) {
-  var containerRef = useRef<HTMLDivElement | null>(null);
-  var xtermRef = useRef<XTerm | null>(null);
-  var fitAddonRef = useRef<FitAddon | null>(null);
-  var searchAddonRef = useRef<SearchAddon | null>(null);
-  var termIdRef = useRef<string | null>(null);
-  var { activeProjectSlug } = useSidebar();
-  var { send, subscribe, unsubscribe } = useWebSocket();
-
-  useEffect(function() {
-    if (!containerRef.current) {
-      return;
-    }
-
-    var term = new XTerm({
-      cursorBlink: true,
-      fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--font-mono").trim() || "JetBrains Mono, monospace",
-      fontSize: 13,
-      theme: getXtermTheme(),
-    });
-
-    var fitAddon = new FitAddon();
-    var webLinksAddon = new WebLinksAddon();
-    var searchAddon = new SearchAddon();
-
-    term.loadAddon(fitAddon);
-    term.loadAddon(webLinksAddon);
-    term.loadAddon(searchAddon);
-    term.open(containerRef.current);
-    fitAddon.fit();
-
-    xtermRef.current = term;
-    fitAddonRef.current = fitAddon;
-    searchAddonRef.current = searchAddon;
-
-    var waitingForCreate = true;
-
-    function onCreated(msg: ServerMessage) {
-      if (!waitingForCreate) return;
-      waitingForCreate = false;
-      var created = msg as TerminalCreatedMessage;
-      termIdRef.current = created.termId;
-    }
-
-    function onOutput(msg: ServerMessage) {
-      var output = msg as TerminalOutputMessage;
-      if (xtermRef.current && output.termId === termIdRef.current) {
-        xtermRef.current.write(output.data);
-      }
-    }
-
-    function onExited(msg: ServerMessage) {
-      var exited = msg as TerminalExitedMessage;
-      if (xtermRef.current && exited.termId === termIdRef.current) {
-        xtermRef.current.write("\r\n\x1b[31m[process exited]\x1b[0m\r\n");
-      }
-    }
-
-    subscribe("terminal:created", onCreated);
-    subscribe("terminal:output", onOutput);
-    subscribe("terminal:exited", onExited);
-
-    send({ type: "terminal:create", projectSlug: activeProjectSlug || undefined });
-
-    term.onData(function(data: string) {
-      var termId = termIdRef.current;
-      if (termId) {
-        send({ type: "terminal:input", termId: termId, data: data });
-      }
-    });
-
-    var resizeObserver = new ResizeObserver(function() {
-      if (fitAddonRef.current) {
-        fitAddonRef.current.fit();
-        var termId = termIdRef.current;
-        var dim = fitAddonRef.current.proposeDimensions();
-        if (termId && dim) {
-          send({ type: "terminal:resize", termId: termId, cols: dim.cols, rows: dim.rows });
-        }
-      }
-    });
-
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-
-    return function() {
-      unsubscribe("terminal:created", onCreated);
-      unsubscribe("terminal:output", onOutput);
-      unsubscribe("terminal:exited", onExited);
-      resizeObserver.disconnect();
-      term.dispose();
-      xtermRef.current = null;
-      fitAddonRef.current = null;
-      searchAddonRef.current = null;
-    };
-  }, []);
-
-  useEffect(function() {
-    if (visible && fitAddonRef.current) {
-      var timer = setTimeout(function() {
-        if (fitAddonRef.current) {
-          fitAddonRef.current.fit();
-          var termId = termIdRef.current;
-          var dim = fitAddonRef.current.proposeDimensions();
-          if (termId && dim) {
-            send({ type: "terminal:resize", termId: termId, cols: dim.cols, rows: dim.rows });
-          }
-        }
-      }, 50);
-      return function() { clearTimeout(timer); };
-    }
-  }, [visible]);
-
-  return (
-    <div
-      ref={containerRef}
-      className="w-full h-full overflow-hidden bg-base-100"
-      style={{ display: visible ? "block" : "none" }}
-      data-instance-id={instanceId}
-    />
-  );
-}