akanjs 3.0.2 → 3.1.0-rc.0

package/ui/Model/NewWrapper_Client.tsx

@@ -9,6 +9,7 @@ import type { ReactNode } from "react";
 
 import { agentAttrs } from "../agentAttrs";
 import { type DraftProp, newDraftScope } from "./draftScope";
+import { NewFormOrigin } from "./newFormOrigin";
 
 interface NewWrapperProps<Full = any> {
   className?: string;
@@ -60,6 +61,7 @@ export const NewWrapper_Client = <Full,>({
         sliceName,
         routePath: path,
       });
+      NewFormOrigin.set(modelName, sliceName);
       void storeDo[names.newModel](crystal, { modal, setDefault, sliceName, draftScope });
       resets?.forEach((reset) => {
         void storeDo[`reset${capitalize(reset)}`]();

package/ui/Model/ViewEditModal.tsx

@@ -9,6 +9,7 @@ import { BiDotsVertical, BiTrash } from "react-icons/bi";
 
 import { agentAttrs } from "../agentAttrs";
 import { buttonRecipe } from "../Button";
+import type { ModalPlacement, ModalPresentation } from "../Dialog/modalSurface";
 import { Dropdown } from "../Dropdown";
 import { Modal } from "../Modal";
 import Remove from "./Remove";
@@ -59,6 +60,10 @@ const SaveAction = ({ modelName, label, onAct, closeView }: ActionProps) => {
 
 interface ViewEditModalProps {
   modalClassName?: string;
+  /** Passed to the `Modal`: `auto` is a full-screen sheet below `md`. */
+  presentation?: ModalPresentation;
+  /** Passed to the `Modal`: `right` is a side sheet from `md` up. */
+  placement?: ModalPlacement;
   viewClassName?: string;
   slice: SliceMeta;
   renderTitle?: (model: any) => ReactNode | string;
@@ -71,6 +76,8 @@ interface ViewEditModalProps {
 }
 export default function ViewEditModal({
   modalClassName,
+  presentation,
+  placement,
   viewClassName,
   slice,
   renderTitle,
@@ -121,6 +128,8 @@ export default function ViewEditModal({
       open={isModalOpen}
       onCancel={closeView}
       className={modalClassName}
+      presentation={presentation}
+      placement={placement}
       title={
         <div className="flex w-full items-center justify-between">
           <Title />

package/ui/Model/ViewModal.tsx

@@ -4,6 +4,7 @@ import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import type { ReactNode } from "react";
 
+import type { ModalPlacement, ModalPresentation } from "../Dialog/modalSurface";
 import { Modal } from "../Modal";
 import View from "./View";
 
@@ -23,6 +24,10 @@ interface ViewModalProps {
   id: string;
   modal?: string;
   modalClassName?: string;
+  /** Passed to the `Modal`: `auto` is a full-screen sheet below `md`. */
+  presentation?: ModalPresentation;
+  /** Passed to the `Modal`: `right` is a side sheet from `md` up. */
+  placement?: ModalPlacement;
   viewClassName?: string;
   slice: SliceMeta;
   renderTitle?: (model: any) => ReactNode | string;
@@ -33,6 +38,8 @@ export default function ViewModal({
   id,
   modal,
   modalClassName,
+  presentation,
+  placement,
   viewClassName,
   slice,
   renderTitle,
@@ -73,7 +80,15 @@ export default function ViewModal({
   return (
     <>
       {isModalOpen ? <ViewTools modelName={modelName} closeView={closeView} /> : null}
-      <Modal open={isModalOpen} onCancel={closeView} className={modalClassName} title={<Title />} action={<Action />}>
+      <Modal
+        open={isModalOpen}
+        onCancel={closeView}
+        className={modalClassName}
+        presentation={presentation}
+        placement={placement}
+        title={<Title />}
+        action={<Action />}
+      >
         <View className={viewClassName} model={model} modelLoading={modelLoading} render={renderView} />
       </Modal>
     </>

package/ui/Model/newFormOrigin.ts

@@ -0,0 +1,45 @@
+"use client";
+import { useSyncExternalStore } from "react";
+
+interface OriginRegistry {
+  origins: Map<string, string>;
+  listeners: Set<() => void>;
+}
+
+const globalWithOrigins = globalThis as typeof globalThis & { __AKAN_NEW_FORM_ORIGIN__?: OriginRegistry };
+
+globalWithOrigins.__AKAN_NEW_FORM_ORIGIN__ ??= { origins: new Map(), listeners: new Set() };
+const registry = globalWithOrigins.__AKAN_NEW_FORM_ORIGIN__;
+
+export class NewFormOrigin {
+  static set(model: string, sliceName: string) {
+    if (registry.origins.get(model) === sliceName) return;
+    registry.origins.set(model, sliceName);
+    NewFormOrigin.#notify();
+  }
+
+  static clear(model: string) {
+    if (registry.origins.delete(model)) NewFormOrigin.#notify();
+  }
+
+  static get(model: string) {
+    return registry.origins.get(model) ?? null;
+  }
+
+  static use(model: string) {
+    return useSyncExternalStore(
+      NewFormOrigin.#subscribe,
+      () => NewFormOrigin.get(model),
+      () => null,
+    );
+  }
+
+  static #subscribe(listener: () => void) {
+    registry.listeners.add(listener);
+    return () => registry.listeners.delete(listener);
+  }
+
+  static #notify() {
+    for (const listener of registry.listeners) listener();
+  }
+}

package/ui/Popconfirm.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { cn, usePage } from "akanjs/client";
 import { useEscapeKey } from "akanjs/webkit";
-import { type ButtonHTMLAttributes, type ReactNode, useEffect, useRef, useState } from "react";
+import { type ButtonHTMLAttributes, type ReactNode, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BiMessageRoundedError } from "react-icons/bi";
 import { buttonRecipe } from "./Button";
-import { overlayZ, useOverlayLayerProps } from "./overlayLayer";
+import { overlayZ, useOverlayLayerProps, useOverlayPortal } from "./overlayLayer";
 import { useOverlayPosition } from "./overlayPosition";
 import { createOverridable, useUiRecipe } from "./UiOverride";
 
@@ -51,8 +51,7 @@ export const DefaultPopconfirm = ({
   const { l } = usePage();
   const recipe = useUiRecipe("button") ?? buttonRecipe;
   const [isConfirming, setIsConfirming] = useState(false);
-  
-  const [portal, setPortal] = useState<HTMLElement | null>(null);
+  const portal = useOverlayPortal();
   const triggerRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const overlayLayerProps = useOverlayLayerProps();
@@ -72,9 +71,6 @@ export const DefaultPopconfirm = ({
     setIsConfirming(false);
   };
   useEscapeKey(isConfirming, handleCancel);
-  useEffect(() => {
-    setPortal(document.body);
-  }, []);
 
   const panel = (
     <>
@@ -141,8 +137,10 @@ export const DefaultPopconfirm = ({
   );
   return (
     <div className="relative inline-block" ref={triggerRef}>
+      {/* Keeps an enclosing dropdown open: the panel is anchored to this row, which a closed menu hides. */}
       <div
         className={cn("trigger", triggerClassName)}
+        data-dropdown-keep-open
         onClick={(e) => {
           e.stopPropagation();
           setIsConfirming(true);

package/ui/Portal.tsx

@@ -2,14 +2,15 @@
 
 import { type ReactNode, useLayoutEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { captureServerPortal } from "./ServerPortal";
 
 interface PortalProps {
   children: ReactNode;
   id: string;
+  /** Drawn in place until the target is found: on the server, and in the first client render that hydrates it. */
+  fallback?: ReactNode;
 }
 
-export const Portal = ({ children, id }: PortalProps) => {
+export const Portal = ({ children, id, fallback = null }: PortalProps) => {
 
   const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);
 
@@ -17,9 +18,5 @@ export const Portal = ({ children, id }: PortalProps) => {
     setTargetElement(document.getElementById(id));
   }, [id]);
 
-  if (typeof document === "undefined" && captureServerPortal(id, children)) {
-    return null;
-  }
-
-  return targetElement ? createPortal(children, targetElement) : null;
+  return targetElement ? createPortal(children, targetElement) : fallback;
 };

package/ui/Reference/origin.ts

@@ -0,0 +1,31 @@
+export const ownerOf = (origin: string[] | undefined) => origin?.at(-1);
+
+/**
+ * Owners in dependency order, the app first, from origin chains listed in registration order. A lib's modules
+ * register before those of whatever builds on it, so the order in which each owner first registers a module of its
+ * own, reversed, puts dependents ahead of dependencies; an owner that only extends others' modules comes first.
+ */
+export const ownerOrderOf = (origins: (string[] | undefined)[]) => {
+  const seen: string[] = [];
+  for (const origin of origins) {
+    const first = origin?.[0];
+    if (first && !seen.includes(first)) seen.push(first);
+  }
+  for (const origin of origins) for (const owner of origin ?? []) if (!seen.includes(owner)) seen.push(owner);
+  return seen.reverse();
+};
+
+export const originText = (origin: string[]) => {
+  const owner = ownerOf(origin) ?? "";
+  const bases = origin.slice(0, -1).reverse().join(", ");
+  return bases ? { en: `${owner} (extends ${bases})`, ko: `${owner} (${bases} 확장)` } : { en: owner, ko: owner };
+};
+
+export const groupByOwner = <Item>(items: Item[], originOf: (item: Item) => string[] | undefined, order: string[]) => {
+  const groups = new Map<string, Item[]>(order.map((owner) => [owner, []]));
+  for (const item of items) {
+    const owner = ownerOf(originOf(item)) ?? "";
+    groups.set(owner, [...(groups.get(owner) ?? []), item]);
+  }
+  return [...groups.entries()].filter(([, grouped]) => grouped.length);
+};

package/ui/ScreenNavigator.tsx

@@ -3,10 +3,10 @@ import { useDrag } from "@use-gesture/react";
 import { cn } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { st } from "akanjs/store";
-import { animated } from "akanjs/ui";
 import { type ReactNode, useContext, useEffect, useRef, useState } from "react";
 import { SpringValue, useSpringValue } from "react-spring";
 import { sharedContext } from "../client/sharedContext";
+import { animated } from "./animated";
 
 interface ScreenNavigatorContextType {
   bind: (...args: any[]) => any;

package/ui/Select.tsx

@@ -22,7 +22,7 @@ import { TiDelete } from "react-icons/ti";
 import { agentAttrs } from "./agentAttrs";
 import { Label } from "./Field/Label";
 import { Spin } from "./Loading/Spin";
-import { overlayZ, useOverlayLayerProps } from "./overlayLayer";
+import { overlayZ, useOverlayLayerProps, useOverlayPortal } from "./overlayLayer";
 import { useOverlayPosition } from "./overlayPosition";
 import { createOverridable, useUiOverride } from "./UiOverride";
 
@@ -113,8 +113,7 @@ const DefaultSelect = <
   }, [options]);
 
   const [searchText, setSearchText] = useState("");
-  
-  const [portal, setPortal] = useState<HTMLElement | null>(null);
+  const portal = useOverlayPortal();
   const [searchOptions, setSearchOptions] = useState<LabelOption<T>[]>(labeledOptions);
   const [activeIdx, setActiveIdx] = useState(-1);
   const listId = useId();
@@ -228,10 +227,6 @@ const DefaultSelect = <
     };
   }, [isOpen]);
 
-  useEffect(() => {
-    setPortal(document.body);
-  }, []);
-
   useEffect(() => {
     setSearchOptions(labeledOptions);
   }, [labeledOptions]);

package/ui/Signal/Arg.tsx

@@ -12,7 +12,7 @@ import { Input } from "../Input";
 import { dictText, docDash, docUi } from "../Reference";
 import { Select } from "../Select";
 import { Tooltip } from "../Tooltip";
-import UiObject from "./Object";
+import { ObjectType } from "./Object";
 import { signalUi } from "./style";
 
 interface ArgProps {
@@ -80,7 +80,7 @@ const ArgTable = ({ refName, endpointKey, args }: ArgTableProps) => {
                 {label ? <div className="text-foreground/45 text-xs">{label}</div> : null}
               </td>
               <td>
-                <UiObject.Type objRef={argRef as ConstantCls} arrDepth={arg.arrDepth ?? 0} nullable={arg.nullable} />
+                <ObjectType objRef={argRef as ConstantCls} arrDepth={arg.arrDepth ?? 0} nullable={arg.nullable} />
               </td>
               <td>
                 {argEnum ? (

package/ui/Signal/Doc.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { cn, usePage } from "akanjs/client";
-import { decodeJwtPayload, lowerlize, mcpRefusalOf } from "akanjs/common";
+import { decodeJwtPayload, mcpRefusalOf } from "akanjs/common";
 import { type Account, type FetchProxy, getDefaultAccount } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import { type ReactNode, useState } from "react";
@@ -23,13 +23,20 @@ import {
   Toolbar,
   ToolbarField,
 } from "../Reference";
-import { endpointEntriesOf, guardNamesOf, isWsEndpoint } from "./endpointEntries";
-import RestApi from "./RestApi";
-import WebSocket from "./WebSocket";
-
-export default function Doc() {
-  return <div></div>;
-}
+import { originText, ownerOf } from "../Reference/origin";
+import { Tab } from "../Tab";
+import {
+  endpointEntriesOf,
+  guardNamesOf,
+  isWsEndpoint,
+  runtimeFetch,
+  type SignalScope,
+  signalOwnerOrderOf,
+  signalRefNamesOf,
+} from "./endpointEntries";
+import { RestApiEndpoints } from "./RestApi";
+import { guardCountText, signalText } from "./signalText";
+import { WebSocketEndpoints } from "./WebSocket";
 
 interface GuardItemProps {
   active: boolean;
@@ -47,20 +54,25 @@ const GuardItem = ({ active, label, onClick }: GuardItemProps) => (
   </button>
 );
 
-interface DocSettingProps {
-  fetch: FetchProxy;
+export interface DocSettingProps {
+  fetch?: FetchProxy;
   search?: string;
   onSearch?: (search: string) => void;
 }
-const DocSetting = ({ fetch, search, onSearch }: DocSettingProps) => {
+export const DocSetting = ({ fetch = runtimeFetch, search, onSearch }: DocSettingProps) => {
+  const { l } = usePage();
   const tryGuards = st.use.tryGuards({ agent: false });
   const tryJwt = st.use.tryJwt({ agent: false });
   const guardNames = guardNamesOf(fetch);
   const selectionLabel =
-    tryGuards.length === 0 ? "All guards" : tryGuards.length === 1 ? tryGuards[0] : `${tryGuards.length} guards`;
+    tryGuards.length === 0
+      ? l.trans(signalText.allGuards)
+      : tryGuards.length === 1
+        ? tryGuards[0]
+        : l.trans(guardCountText(tryGuards.length));
   return (
     <Toolbar>
-      <ToolbarField label="Base URL">
+      <ToolbarField label={l.trans(signalText.baseUrl)}>
         <Copy text={fetch.origin}>
           <button className={buttonRecipe({ variant: "ghost", size: "sm" }, "font-mono text-foreground/80")}>
             {fetch.origin}
@@ -69,7 +81,7 @@ const DocSetting = ({ fetch, search, onSearch }: DocSettingProps) => {
         </Copy>
       </ToolbarField>
       {guardNames.length ? (
-        <ToolbarField label="Guards">
+        <ToolbarField label={l.trans(signalText.guards)}>
           <Dropdown
             buttonClassName={buttonRecipe({ variant: "outline", size: "sm" }, "font-normal")}
             align="start"
@@ -85,7 +97,7 @@ const DocSetting = ({ fetch, search, onSearch }: DocSettingProps) => {
                 <li data-dropdown-keep-open="">
                   <GuardItem
                     active={!tryGuards.length}
-                    label="All guards"
+                    label={l.trans(signalText.allGuards)}
                     onClick={() => {
                       st.do.setTryGuards([]);
                     }}
@@ -110,10 +122,10 @@ const DocSetting = ({ fetch, search, onSearch }: DocSettingProps) => {
           />
         </ToolbarField>
       ) : null}
-      <ToolbarField label="Auth">
+      <ToolbarField label={l.trans(signalText.auth)}>
         <DocAuthModal>
           <button className={buttonRecipe({ variant: tryJwt ? "primary" : "outline", size: "sm" })} type="button">
-            <BiLock /> {tryJwt ? "Authorized" : "Anonymous"}
+            <BiLock /> {l.trans(tryJwt ? signalText.authorized : signalText.anonymous)}
           </button>
         </DocAuthModal>
       </ToolbarField>
@@ -125,19 +137,18 @@ const DocSetting = ({ fetch, search, onSearch }: DocSettingProps) => {
           inputClassName="w-56 pl-9"
           nullable
           onChange={onSearch}
-          placeholder="Search endpoints"
+          placeholder={l.trans(signalText.searchEndpoints)}
           value={search ?? ""}
         />
       ) : null}
     </Toolbar>
   );
 };
-Doc.Setting = DocSetting;
-
-interface DocAuthModalProps {
+export interface DocAuthModalProps {
   children: ReactNode;
 }
-const DocAuthModal = ({ children }: DocAuthModalProps) => {
+export const DocAuthModal = ({ children }: DocAuthModalProps) => {
+  const { l } = usePage();
   const tryJwt = st.use.tryJwt({ agent: false });
   const [jwt, setJwt] = useState(tryJwt);
   const [modalOpen, setModalOpen] = useState(false);
@@ -159,7 +170,7 @@ const DocAuthModal = ({ children }: DocAuthModalProps) => {
         onCancel={() => {
           setModalOpen(false);
         }}
-        title="Set JWT for Authorization"
+        title={l.trans(signalText.setJwtTitle)}
         action={
           <button
             className={buttonRecipe({ variant: "primary" }, "w-full")}
@@ -172,12 +183,12 @@ const DocAuthModal = ({ children }: DocAuthModalProps) => {
               setModalOpen(false);
             }}
           >
-            <BiLock /> Set Authorization
+            <BiLock /> {l.trans(signalText.setAuthorization)}
           </button>
         }
       >
         <div className="flex w-full flex-col gap-2">
-          <div className={docUi.sectionLabel}>Bearer token</div>
+          <div className={docUi.sectionLabel}>{l.trans(signalText.bearerToken)}</div>
           <Input
             inputClassName="w-full font-mono text-xs"
             placeholder="eyJhbGciOi…"
@@ -186,36 +197,27 @@ const DocAuthModal = ({ children }: DocAuthModalProps) => {
             validate={() => true}
           />
         </div>
-        <Code code={accountStr} label="Account decoded" />
+        <Code code={accountStr} label={l.trans(signalText.accountDecoded)} />
       </Modal>
     </>
   );
 };
-Doc.AuthModal = DocAuthModal;
-
-interface DocSignalsProps {
-  fetch: FetchProxy;
+export interface DocSignalsProps extends SignalScope {
+  fetch?: FetchProxy;
 }
-const DocSignals = ({ fetch }: DocSignalsProps) => {
-  const signalEntries = Object.entries(fetch.serializedSignal).sort(([keyA], [keyB]) =>
-    lowerlize(keyA) > lowerlize(keyB) ? 1 : -1,
-  );
-  return (
-    <div className="flex flex-col gap-2">
-      {signalEntries.map(([refName], idx) => (
-        <DocSignal key={idx} refName={refName} fetch={fetch} />
-      ))}
-    </div>
-  );
-};
-
-Doc.DocSignals = DocSignals;
+export const DocSignals = ({ fetch = runtimeFetch, include, exclude, libs }: DocSignalsProps) => (
+  <div className="flex flex-col gap-2">
+    {signalRefNamesOf(fetch, { include, exclude, libs }).map((refName) => (
+      <DocSignal key={refName} refName={refName} fetch={fetch} />
+    ))}
+  </div>
+);
 
-interface DocSignalProps {
+export interface DocSignalProps {
   refName: string;
-  fetch: FetchProxy;
+  fetch?: FetchProxy;
 }
-const DocSignal = ({ refName, fetch }: DocSignalProps) => {
+export const DocSignal = ({ refName, fetch = runtimeFetch }: DocSignalProps) => {
   const { l } = usePage();
   const desc = dictText(l, `${refName}.modelDesc`);
   return (
@@ -224,53 +226,113 @@ const DocSignal = ({ refName, fetch }: DocSignalProps) => {
         <div className="flex min-w-0 flex-col gap-1.5">
           <div className="flex flex-wrap items-center gap-2">
             <span className="font-bold text-lg">{refName}</span>
-            <span className={docPill("muted")}>Signal</span>
+            <span className={docPill("muted")}>{l.trans(signalText.signal)}</span>
           </div>
           {desc ? <div className="text-foreground/55 text-sm">{desc}</div> : null}
         </div>
       }
     >
-      <RestApi.Endpoints refName={refName} fetch={fetch} />
+      <RestApiEndpoints refName={refName} fetch={fetch} />
     </Collapse>
   );
 };
-Doc.DocSignal = DocSignal;
 
-interface ZoneProps {
+export interface ZoneProps {
   refName: string;
-  fetch: FetchProxy;
+  fetch?: FetchProxy;
   openAll?: boolean;
 }
-const Zone = ({ refName, fetch, openAll }: ZoneProps) => {
+export const Zone = ({ refName, fetch = runtimeFetch, openAll }: ZoneProps) => {
   const { l } = usePage();
   const [search, setSearch] = useState("");
   const desc = dictText(l, `${refName}.modelDesc`);
   const entries = endpointEntriesOf(refName, fetch);
   const wsEntries = entries.filter(({ endpoint }) => isWsEndpoint(endpoint));
   const mcpEntries = entries.filter(({ key, endpoint }) => !mcpRefusalOf(endpoint, { refName, key }));
+  const origin = fetch.serializedSignal[refName]?.origin;
   return (
     <div className="flex break-after-page flex-col gap-6">
       <div className="flex flex-col gap-1">
         <div className="flex flex-wrap items-center gap-2">
           <h1 className={docUi.pageTitle}>{refName}</h1>
-          <span className={docPill("muted")}>Signal</span>
+          <span className={docPill("muted")}>{l.trans(signalText.signal)}</span>
+          {origin?.length ? <span className={docPill("muted", "font-mono")}>{l.trans(originText(origin))}</span> : null}
         </div>
         {desc ? <p className={docUi.sectionDescription}>{desc}</p> : null}
       </div>
       <SummaryGrid>
-        <SummaryCard label="Endpoints" value={entries.length} />
-        <SummaryCard label="REST API" value={entries.length - wsEntries.length} />
-        <SummaryCard label="Web Socket" value={wsEntries.length} />
-        <SummaryCard label="MCP Tools" value={mcpEntries.length} />
+        <SummaryCard label={l.trans(signalText.endpoints)} value={entries.length} />
+        <SummaryCard label={l.trans(signalText.restApi)} value={entries.length - wsEntries.length} />
+        <SummaryCard label={l.trans(signalText.webSocket)} value={wsEntries.length} />
+        <SummaryCard label={l.trans(signalText.mcpTools)} value={mcpEntries.length} />
       </SummaryGrid>
       <DocSetting fetch={fetch} onSearch={setSearch} search={search} />
-      <Section title="REST API">
-        <RestApi.Endpoints refName={refName} fetch={fetch} openAll={openAll} search={search} />
+      <Section title={l.trans(signalText.restApi)}>
+        <RestApiEndpoints refName={refName} fetch={fetch} openAll={openAll} search={search} />
       </Section>
-      <Section title="Web Socket">
-        <WebSocket.Endpoints refName={refName} fetch={fetch} openAll={openAll} search={search} />
+      <Section title={l.trans(signalText.webSocket)}>
+        <WebSocketEndpoints refName={refName} fetch={fetch} openAll={openAll} search={search} />
       </Section>
     </div>
   );
 };
-Doc.Zone = Zone;
+
+export interface ExplorerProps extends SignalScope {
+  className?: string;
+  fetch?: FetchProxy;
+  defaultRefName?: string;
+  openAll?: boolean;
+  groupBy?: "lib";
+}
+export const Explorer = ({
+  className,
+  fetch = runtimeFetch,
+  include,
+  exclude,
+  libs,
+  defaultRefName,
+  openAll,
+  groupBy,
+}: ExplorerProps) => {
+  const { l } = usePage();
+  const refNames = signalRefNamesOf(fetch, { include, exclude, libs });
+  if (!refNames.length) return <div className={docUi.emptyPanel}>{l.trans(signalText.noSignal)}</div>;
+  const groups =
+    groupBy === "lib"
+      ? [...signalOwnerOrderOf(fetch), ""]
+          .map((owner) => ({
+            owner,
+            refNames: refNames.filter((refName) => (ownerOf(fetch.serializedSignal[refName]?.origin) ?? "") === owner),
+          }))
+          .filter((group) => group.refNames.length)
+      : [{ owner: null, refNames }];
+  const ordered = groups.flatMap((group) => group.refNames);
+  const firstRefName = defaultRefName && ordered.includes(defaultRefName) ? defaultRefName : ordered[0];
+  return (
+    <Tab className={cn("flex w-full items-start gap-8", className)} defaultMenu={firstRefName}>
+      <aside className="sticky top-0 flex max-h-screen w-56 shrink-0 flex-col gap-4 overflow-y-auto py-2">
+        {groups.map((group) => (
+          <div className="flex flex-col gap-1" key={group.owner ?? ""}>
+            {group.owner === null ? null : (
+              <div className={cn(docUi.sectionLabel, "px-3")}>{group.owner || l.trans(signalText.unknownOrigin)}</div>
+            )}
+            <Tab.Menus className="flex flex-col items-stretch gap-0.5">
+              {group.refNames.map((refName) => (
+                <Tab.Menu key={refName} className="truncate text-left font-mono" menu={refName} scrollToTop>
+                  {refName}
+                </Tab.Menu>
+              ))}
+            </Tab.Menus>
+          </div>
+        ))}
+      </aside>
+      <div className="min-w-0 flex-1">
+        {ordered.map((refName) => (
+          <Tab.Panel key={refName} loading="lazy" menu={refName}>
+            <Zone refName={refName} fetch={fetch} openAll={openAll} />
+          </Tab.Panel>
+        ))}
+      </div>
+    </Tab>
+  );
+};