akanjs 3.0.0-beta.2 → 3.0.0-beta.20

package/types/ui/UiOverride/useUiOverride.d.ts

@@ -1,7 +0,0 @@
-import { type AkanUiOverrides } from "./context.d.ts";
-/**
- * Resolves the active override for a framework component in the current route
- * subtree, or `undefined` when no `_overrides.tsx` in the route's ancestry
- * declares one.
- */
-export declare const useUiOverride: <K extends keyof AkanUiOverrides>(name: K) => AkanUiOverrides[K] | undefined;

package/types/ui/UiOverride/useUiRecipe.d.ts

@@ -1,8 +0,0 @@
-import { type AkanUiRecipes } from "./context.d.ts";
-/**
- * Resolves the active recipe swap for a framework recipe slot in the current route
- * subtree, or `undefined` when no `_overrides.tsx` in the ancestry declares one.
- * Framework components consume it as `const recipe = useUiRecipe("button") ?? buttonRecipe;`
- * so an app can restyle every instance app/route-wide without touching behavior.
- */
-export declare const useUiRecipe: <K extends keyof AkanUiRecipes>(name: K) => AkanUiRecipes[K] | undefined;

package/types/webkit/createSitemapPage.d.ts

@@ -1,4 +0,0 @@
-export declare const createSitemapPage: (clientHttpUri: string, paths: string[]) => {
-    url: string;
-    lastModified: Date;
-}[];

package/ui/Agent/Context.tsx

@@ -1,49 +0,0 @@
-"use client";
-import { AgentContext } from "akanjs/store";
-import { useState } from "react";
-import { AgenticSurface } from "../../vendor/use-agentic";
-import { buttonRecipe } from "../recipe";
-
-interface ContextProps {
-  className?: string;
-}
-
-/**
- * Assembles and shows exactly what a turn would carry, on demand — the one preview of "what does the agent see on
- * this screen" that no amount of reading the source answers.
- *
- * The tool list leads, by name only: a zone publishes its tools scope-prefixed, and instructions that name a tool
- * without its prefix name a tool that does not exist. That is invisible in the source of either file and obvious
- * here. Renders nothing on `AKAN_PUBLIC_ENV=main`.
- */
-export default function Context({ className }: ContextProps) {
-  const [shown, setShown] = useState("");
-  
-  if (process.env.AKAN_PUBLIC_ENV === "main" || process.env.NODE_ENV === "develop") return null;
-  const assemble = () => {
-    try {
-      const { guides, tools } = AgenticSurface.shared.snapshot();
-      const context = AgentContext.of().blocks(AgenticSurface.shared);
-      const assembled = {
-        tools: tools.map((tool) => tool.name),
-        ...(guides.length ? { guides } : {}),
-        context,
-      };
-      setShown(JSON.stringify(assembled, null, 2));
-    } catch (thrown) {
-      setShown(thrown instanceof Error ? thrown.message : String(thrown));
-    }
-  };
-  return (
-    <div className={className}>
-      <button className={buttonRecipe({ size: "xs" })} onClick={assemble} type="button">
-        Assemble
-      </button>
-      {shown ? (
-        <pre className="scrollbar-thin mt-2 max-h-60 overflow-auto rounded-field bg-background/60 p-2 text-[10px] leading-tight">
-          {shown}
-        </pre>
-      ) : null}
-    </div>
-  );
-}

package/ui/Agent/Mic.tsx

@@ -1,27 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import { AiOutlineAudio, AiOutlineAudioMuted } from "react-icons/ai";
-
-interface MicProps {
-  className?: string;
-  listening: boolean;
-  label: string;
-  onToggle: () => void;
-}
-
-export const Mic = ({ className, listening, label, onToggle }: MicProps) => (
-  <button
-    aria-label={label}
-    aria-pressed={listening}
-    className={cn(
-      "shrink-0 hover:text-foreground",
-      listening ? "animate-pulse text-primary" : "text-foreground/50",
-      className,
-    )}
-    onClick={onToggle}
-    title={label}
-    type="button"
-  >
-    {listening ? <AiOutlineAudioMuted /> : <AiOutlineAudio />}
-  </button>
-);

package/ui/Agent/Section.tsx

@@ -1,24 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-
-interface SectionProps {
-  className?: string;
-  title: string;
-  count: number;
-  children: ReactNode;
-  open?: boolean;
-}
-
-export default function Section({ className, title, count, children, open }: SectionProps) {
-  return (
-    <details className={cn("group rounded-box bg-muted", className)} open={open}>
-      <summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2 [&::-webkit-details-marker]:hidden">
-        <span className="font-semibold text-sm">{title}</span>
-        <span className="text-foreground/50 text-xs">{count}</span>
-        <span className="ml-auto text-foreground/40 transition-transform group-open:rotate-180">▾</span>
-      </summary>
-      <div className="flex flex-col gap-1 px-3 pb-3">{children}</div>
-    </details>
-  );
-}

package/ui/Agent/StateKey.tsx

@@ -1,46 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import type { AgentBridge, SerializedStoreState } from "akanjs/store";
-import { useState } from "react";
-
-interface StateKeyProps {
-  className?: string;
-  bridge: AgentBridge;
-  name: string;
-  entry: SerializedStoreState;
-  live?: boolean;
-}
-
-/**
- * One readable state key, read on demand rather than rendered with the rest.
- *
- * Reading is where masking happens, so a key that holds an object no model claims refuses here instead of in the
- * catalogue — whether it is readable depends on what is in it, which the catalogue cannot know ahead of time.
- */
-export default function StateKey({ className, bridge, name, entry, live }: StateKeyProps) {
-  const [shown, setShown] = useState("");
-  const read = () => {
-    try {
-      setShown(JSON.stringify(bridge.read(name), null, 2));
-    } catch (thrown) {
-      setShown(thrown instanceof Error ? thrown.message : String(thrown));
-    }
-  };
-  return (
-    <div className={cn("flex flex-col gap-1", className)}>
-      <button className="flex items-center gap-2 text-left" type="button" onClick={read}>
-        <span className="truncate font-mono text-xs">{name}</span>
-        <span className="ml-auto shrink-0 text-[10px] text-foreground/40">
-          {live ? "live · " : ""}
-          {entry.refName ? `${entry.refName}.${entry.modelType ?? ""}` : entry.type}
-          {entry.derived ? " · derived" : ""}
-        </span>
-      </button>
-      {shown ? (
-        <pre className="scrollbar-thin max-h-40 overflow-auto rounded-field bg-muted p-2 text-[10px] leading-tight">
-          {shown}
-        </pre>
-      ) : null}
-    </div>
-  );
-}

package/ui/Agent/Tool.tsx

@@ -1,59 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import { useState } from "react";
-import type { PublishedTool, SurfaceView } from "../../vendor/use-agentic";
-import { buttonRecipe } from "../recipe";
-
-interface ToolProps {
-  className?: string;
-  surface: SurfaceView;
-  tool: PublishedTool;
-  onRun: () => void;
-}
-
-/**
- * One declared tool, with the arguments as JSON rather than as a generated form.
- *
- * A form per argument is what the API explorer does, and it is the wrong trade here: the point of the dock is to
- * watch a call land in the running app, and every schema shape a component declares is already legible as JSON.
- */
-export default function Tool({ className, surface, tool, onRun }: ToolProps) {
-  const [args, setArgs] = useState("{}");
-  const [error, setError] = useState("");
-  const properties = (tool.parameters as { properties?: unknown } | undefined)?.properties ?? {};
-  const run = async () => {
-    setError("");
-    try {
-      await surface.call(tool.name, JSON.parse(args) as Record<string, unknown>);
-    } catch (thrown) {
-      setError(thrown instanceof Error ? thrown.message : String(thrown));
-    }
-    onRun();
-  };
-  return (
-    <details className={cn("rounded-field bg-background/60 px-2 py-1", className)}>
-      <summary className="flex cursor-pointer list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
-        <span className="truncate font-mono text-xs">{tool.name}</span>
-        {tool.needsConfirm ? <span className="shrink-0 text-[10px] text-foreground/40">confirm</span> : null}
-      </summary>
-      <div className="flex flex-col gap-2 py-2">
-        {tool.description ? <p className="text-foreground/70 text-xs">{tool.description}</p> : null}
-        <pre className="overflow-x-auto rounded-field bg-muted p-2 text-[10px] leading-tight">
-          {JSON.stringify(properties, null, 2)}
-        </pre>
-        <textarea
-          className="w-full rounded-field bg-muted p-2 font-mono text-xs"
-          rows={2}
-          value={args}
-          onChange={(event) => setArgs(event.target.value)}
-        />
-        {/* `buttonRecipe` rather than `Button`, which reads the app runtime through `usePage()` for labels this
-            developer surface does not localize anyway — the same English the API explorer uses. */}
-        <button className={buttonRecipe({ size: "xs" })} onClick={run} type="button">
-          Run
-        </button>
-        {error ? <p className="text-destructive text-xs">{error}</p> : null}
-      </div>
-    </details>
-  );
-}

package/ui/Agent/Transcript.tsx

@@ -1,33 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import type { AgentCall } from "../../vendor/use-agentic";
-
-interface TranscriptProps {
-  className?: string;
-  calls: readonly AgentCall[];
-}
-
-/**
- * What the agent did, newest last, so the user can check it against what they saw the page do.
- *
- * There is no undo here. Every model removal in this framework is soft, so one is possible in principle, but which
- * writes are reversible is a per-module judgement and `local/agent-native/PLAN.md` §9-3 leaves it open.
- */
-export default function Transcript({ className, calls }: TranscriptProps) {
-  return (
-    <div className={cn("flex flex-col gap-1", className)}>
-      {calls.map((call, idx) => (
-        <div className="flex flex-col rounded-field bg-background/60 px-2 py-1" key={idx}>
-          <div className="flex items-baseline gap-2">
-            <span className="truncate font-mono text-xs">{call.name}</span>
-            <span className="ml-auto shrink-0 text-[10px] text-foreground/40">
-              {call.at.toISOString().slice(11, 19)}
-            </span>
-          </div>
-          <span className="truncate font-mono text-[10px] text-foreground/50">{JSON.stringify(call.args)}</span>
-          {call.error ? <span className="text-[10px] text-destructive">{call.error}</span> : null}
-        </div>
-      ))}
-    </div>
-  );
-}

package/ui/Agent/markdownSpans.tsx

@@ -1,49 +0,0 @@
-"use client";
-import type { ReactNode } from "react";
-
-const inline =
-  /(!?)\[([^\]]*)\]\(((?:[^\s()]|\([^\s()]*\))+)\)|`([^`]+)`|\*\*([\s\S]+?)\*\*|\*([^*\n]+?)\*|~~([\s\S]+?)~~/g;
-
-const isSafeHref = (href: string) => !/^[a-z][a-z0-9+.-]*:/i.test(href) || /^(?:https?|mailto|tel):/i.test(href);
-
-export const spans = (text: string): ReactNode[] => {
-  const nodes: ReactNode[] = [];
-  let cut = 0;
-  for (const match of text.matchAll(inline)) {
-    const at = match.index;
-    const [, image, label, href, code, strong, em, del] = match;
-    if (at > cut) nodes.push(text.slice(cut, at));
-    cut = at + match[0].length;
-    if (href)
-      nodes.push(
-        image || !isSafeHref(href) ? (
-          label
-        ) : (
-          <a className="underline" href={href} key={at} rel="noreferrer" target="_blank">
-            {spans(label)}
-          </a>
-        ),
-      );
-    else if (code)
-      nodes.push(
-        <code className="rounded-field bg-muted px-1 font-mono text-[11px]" key={at}>
-          {code}
-        </code>,
-      );
-    else if (strong)
-      nodes.push(
-        <strong className="font-semibold" key={at}>
-          {spans(strong)}
-        </strong>,
-      );
-    else if (em) nodes.push(<em key={at}>{spans(em)}</em>);
-    else if (del)
-      nodes.push(
-        <del className="opacity-60" key={at}>
-          {spans(del)}
-        </del>,
-      );
-  }
-  if (cut < text.length) nodes.push(text.slice(cut));
-  return nodes;
-};

package/ui/Agent/sessionHistory.ts

@@ -1,62 +0,0 @@
-import { getEnv } from "akanjs/base";
-import { type ChatMessage, type SessionHistory, Transcript } from "../../vendor/use-agentic";
-
-export type PersistOption = boolean | { storage?: "session" | "local"; key?: string };
-
-/**
- * Attachment content never reaches storage. Web storage is a few megabytes per origin, one screenshot fills a
- * chunk of it, and `AgentSession` swallows a failed save — so persisting the bytes would quietly stop persisting
- * the transcript itself. The name and type stay so a restored conversation still reads as what happened, and a
- * `url` stays because a pointer is not content; the server then tells the model the content is gone rather than
- * letting it answer from the filename.
- */
-const withoutContent = (message: ChatMessage): ChatMessage =>
-  message.attachments?.length
-    ? {
-        ...message,
-        attachments: message.attachments.map(({ name, mimeType, url }) => ({
-          name,
-          mimeType,
-          ...(url ? { url } : {}),
-        })),
-      }
-    : message;
-
-/**
- * Maps the `persist` prop onto a `SessionHistory` over web storage. Session storage is the default on purpose:
- * surviving a refresh is the whole ask, and a transcript that dies with the tab never lingers on a shared machine
- * or collides across tabs. `"local"` is the explicit opt-up. The envelope is versioned so a wire change discards
- * stale transcripts instead of replaying them, and only the newest messages are kept under the cap — which is
- * why the cap is applied *before* the pairing repair: the window it keeps can start between a tool call and the
- * result answering it, and a transcript restored in that state is refused by the provider on its first turn.
- */
-export const sessionHistoryOf = (
-  persist: PersistOption | SessionHistory | undefined,
-  pathKey = "",
-): SessionHistory | undefined => {
-  if (!persist) return undefined;
-
-  if (typeof persist === "object" && typeof (persist as SessionHistory).load === "function")
-    return persist as SessionHistory;
-  if (typeof window === "undefined") return undefined;
-  const option = persist === true ? {} : (persist as Exclude<PersistOption, boolean>);
-  const storage = option.storage === "local" ? window.localStorage : window.sessionStorage;
-  const key = option.key ?? `akan.agent.${getEnv().appName}${pathKey ? `.${pathKey}` : ""}`;
-  const version = 1;
-  const cap = 50;
-  return {
-    load: () => {
-      const raw = storage.getItem(key);
-      if (!raw) return null;
-      const parsed = JSON.parse(raw) as { v?: number; messages?: ChatMessage[] };
-      return parsed.v === version && Array.isArray(parsed.messages) ? parsed.messages : null;
-    },
-    save: (messages) => {
-      const kept = Transcript.sanitize(messages.slice(-cap)).map(withoutContent);
-      storage.setItem(key, JSON.stringify({ v: version, messages: kept }));
-    },
-    clear: () => {
-      storage.removeItem(key);
-    },
-  };
-};

package/ui/Agent/sessionView.ts

@@ -1,38 +0,0 @@
-import { StoreSurfaceSource } from "akanjs/store";
-import type { AgenticSurface, SurfaceView } from "../../vendor/use-agentic";
-
-/** One of the tools the akan runtime contributes to every screen, whatever that screen declares. */
-export type AgentBuiltin = (typeof StoreSurfaceSource.builtins)[number];
-
-/** `true` (the default) takes all of them, `false` none, an array exactly the ones it names. */
-export type BuiltinOption = boolean | AgentBuiltin[];
-
-/**
- * The half of the surface one session reads: scoped to its zone, and narrowed to the built-ins it was given.
- *
- * Narrowing happens here rather than on the source because the source is shared — two sessions read one registry,
- * and a zone that must not navigate away cannot take `navigate` off the screen for the root agent too. A withheld
- * tool is withheld from `call` as well as from the listing, answering the same "unknown tool" a name that was
- * never registered gets: a tool the model can still reach by guessing its name is not withheld.
- */
-export const sessionView = (surface: AgenticSurface, path: string[], builtins?: BuiltinOption): SurfaceView => {
-  const scoped = path.length ? surface.view(path) : surface;
-  if (builtins === undefined || builtins === true) return scoped;
-  const kept = new Set<string>(builtins === false ? [] : builtins);
-  const names = StoreSurfaceSource.builtins as readonly string[];
-  const shown = (name: string) => kept.has(name) || !names.includes(name) || surface.declares(name, path);
-  return {
-    snapshot: () => {
-      const snapshot = scoped.snapshot();
-      return { ...snapshot, tools: snapshot.tools.filter((tool) => shown(tool.name)) };
-    },
-    tool: (name) => (shown(name) ? scoped.tool(name) : null),
-    call: async (name, args) => {
-      if (!shown(name)) throw new Error(`Unknown tool: ${name}`);
-      return await scoped.call(name, args);
-    },
-    read: (name) => scoped.read(name),
-    diffSince: (before) => scoped.diffSince(before),
-    subscribe: (listener) => scoped.subscribe(listener),
-  };
-};

package/ui/Dialog/Action.tsx

@@ -1,15 +0,0 @@
-"use client";
-import { type ReactNode, useContext, useEffect } from "react";
-
-import { DialogContext } from "./context";
-
-export interface ActionProps {
-  children?: ReactNode;
-}
-export const Action = ({ children }: ActionProps) => {
-  const { setAction } = useContext(DialogContext);
-  useEffect(() => {
-    setAction(children);
-  }, [children]);
-  return null;
-};

package/ui/Dialog/Close.tsx

@@ -1,18 +0,0 @@
-"use client";
-import { type ReactNode, useContext } from "react";
-
-import { agentAttrs } from "../agentAttrs";
-import { DialogContext } from "./context";
-
-export interface CloseProps {
-  className?: string;
-  children?: ReactNode;
-}
-export const Close = ({ className, children }: CloseProps) => {
-  const { closeDialog } = useContext(DialogContext);
-  return (
-    <a className={className} onClick={closeDialog} {...agentAttrs(closeDialog)}>
-      {children}
-    </a>
-  );
-};

package/ui/Dialog/Content.tsx

@@ -1,11 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-
-export interface ContentProps {
-  className?: string;
-  children?: ReactNode;
-}
-export const Content = ({ className, children }: ContentProps) => {
-  return <div className={cn("block w-full", className)}>{children}</div>;
-};

package/ui/Dialog/Title.tsx

@@ -1,15 +0,0 @@
-"use client";
-import { type ReactNode, useContext, useEffect } from "react";
-
-import { DialogContext } from "./context";
-
-export interface TitleProps {
-  children?: ReactNode;
-}
-export const Title = ({ children }: TitleProps) => {
-  const { setTitle } = useContext(DialogContext);
-  useEffect(() => {
-    setTitle(children);
-  }, [children]);
-  return null;
-};

package/ui/Dialog/Trigger.tsx

@@ -1,18 +0,0 @@
-"use client";
-import { type ReactNode, useContext } from "react";
-
-import { agentAttrs } from "../agentAttrs";
-import { DialogContext } from "./context";
-
-export interface TriggerProps {
-  className?: string;
-  children?: ReactNode;
-}
-export const Trigger = ({ className, children }: TriggerProps) => {
-  const { openDialog } = useContext(DialogContext);
-  return (
-    <div className={className} onClick={openDialog} {...agentAttrs(openDialog)}>
-      {children}
-    </div>
-  );
-};

package/ui/Dialog/context.ts

@@ -1,32 +0,0 @@
-"use client";
-import type { ReactNode } from "react";
-import { sharedContext } from "../../client/sharedContext";
-
-export interface DialogContextType {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openDialog: () => void;
-  closeDialog: () => void;
-  /**
-   * How this dialog actually dismisses, handed up by whichever surface is drawing it. `confirmClose` and
-   * `onCancel` hang off that path, so a close that only flipped `open` would skip both — which is what made an
-   * agent's close, and `Dialog.Close`, quietly different from clicking the X.
-   */
-  registerDismiss: (dismiss: (() => void) | null) => void;
-  title: ReactNode;
-  setTitle: (title: ReactNode) => void;
-  action: ReactNode;
-  setAction: (action: ReactNode) => void;
-}
-
-export const DialogContext = sharedContext<DialogContextType>("dialog", {
-  open: false,
-  setOpen: (open: boolean) => null,
-  openDialog: () => null,
-  closeDialog: () => null,
-  registerDismiss: (dismiss: (() => void) | null) => null,
-  title: null,
-  setTitle: (title: ReactNode) => null,
-  action: null,
-  setAction: (action: ReactNode) => null,
-});

package/ui/Layout/LeftSider.tsx

@@ -1,43 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-import { BiX } from "react-icons/bi";
-import { buttonRecipe } from "../Button";
-
-export interface LeftSiderProps {
-  className?: string;
-  children: ReactNode;
-  open: boolean;
-  width?: number | string;
-  /** Element that closes the drawer. `false` draws none. */
-  close?: ReactNode | false;
-  onCancel: () => void;
-}
-export const LeftSider = ({ className, children, open, width, close, onCancel }: LeftSiderProps) => {
-  return (
-    <div
-      className={cn(
-        "absolute top-0 border-muted border-r bg-background transition-all duration-150",
-        open ? "translate-x-0" : "translate-x-[-100%]",
-        className,
-      )}
-      style={{ width }}
-    >
-      {children}
-      {close === false ? null : (
-        <div
-          className="absolute top-0 right-0"
-          onClick={() => {
-            onCancel();
-          }}
-        >
-          {close ?? (
-            <button className={buttonRecipe({ variant: "ghost", size: "icon" })}>
-              <BiX />
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/ui/Layout/RightSider.tsx

@@ -1,47 +0,0 @@
-"use client";
-import { cn } from "akanjs/client";
-import type { ReactNode } from "react";
-import { AiOutlineClose } from "react-icons/ai";
-
-export interface RightSiderProps {
-  className?: string;
-  children: ReactNode;
-  open: boolean;
-  title?: ReactNode;
-  width?: number | string;
-  /** The mark inside the drawer's close control. `false` draws no control. */
-  close?: ReactNode | false;
-  onCancel: () => void;
-}
-export const RightSider = ({ className, children, open, title, width, close, onCancel }: RightSiderProps) => {
-  return (
-    <div
-      className={cn(
-        "group absolute top-0 right-0 overflow-y-auto border-muted border-l bg-background pt-14 transition-all duration-150",
-        open && "translate-x-0",
-        !open && "translate-x-[100%]",
-        className,
-      )}
-      style={{ width }}
-    >
-      {children}
-      <div className="absolute top-2 left-4 flex items-center gap-4 pt-2 text-xl">
-        {close === false ? null : (
-          <div
-            className={cn(
-              "cursor-pointer border-muted bg-background transition-all duration-150",
-              open && "opacity-100",
-              !open && "opacity-0",
-            )}
-            onClick={() => {
-              onCancel();
-            }}
-          >
-            {close ?? <AiOutlineClose />}
-          </div>
-        )}
-        {title ? <div className="whitespace-nowrap">{title}</div> : null}
-      </div>
-    </div>
-  );
-};

package/ui/Layout/Template.tsx

@@ -1,11 +0,0 @@
-import { cn } from "akanjs/client";
-
-export interface TemplateProps {
-  /** Additional classes merged with the default vertical form/template spacing. */
-  className?: string;
-  /** Template content, usually Field components in a model form. */
-  children?: React.ReactNode;
-}
-export const Template = ({ className, children }: TemplateProps) => {
-  return <div className={cn("flex w-full flex-col gap-6 p-2", className)}>{children}</div>;
-};

package/ui/Layout/TopLeftAction.tsx

@@ -1,28 +0,0 @@
-"use client";
-import { getEnv } from "akanjs/base";
-import { usePathCtx } from "akanjs/client";
-import { type ReactNode, useEffect, useState } from "react";
-
-import { Portal } from "../Portal";
-
-export interface TopLeftActionProps {
-  className?: string;
-  children: ReactNode;
-}
-
-export const TopLeftAction = ({ className, children }: TopLeftActionProps) => {
-  const [render, setRender] = useState(false);
-  const path = usePathCtx().location?.pathRoute?.path;
-  const suffix = getEnv().renderMode === "csr" && path ? `-${path}` : "";
-  useEffect(() => {
-    setRender(true);
-  }, []);
-
-  if (!render) return null;
-
-  return (
-    <Portal id={`topLeftActionContent${suffix}`}>
-      <div className={className}>{children}</div>
-    </Portal>
-  );
-};