akanjs 3.0.0-alpha.2 → 3.0.0-alpha.21

package/ui/Agent/Context.tsx

@@ -0,0 +1,38 @@
+"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 the exact context blocks 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.
+ */
+export default function Context({ className }: ContextProps) {
+  const [shown, setShown] = useState("");
+  const assemble = () => {
+    try {
+      const { guides } = AgenticSurface.shared.snapshot();
+      const context = AgentContext.of().blocks(AgenticSurface.shared);
+      setShown(JSON.stringify(guides.length ? { guides, context } : context, 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="mt-2 max-h-60 overflow-auto rounded-field bg-base-100/60 p-2 text-[10px] leading-tight">
+          {shown}
+        </pre>
+      ) : null}
+    </div>
+  );
+}

package/ui/Agent/Dock.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "akanjs/client";
+import { type AgentBridge, ensureStoreSurface, StoreRegistry } from "akanjs/store";
+import { useRef, useState } from "react";
+import Context from "./Context";
+import Section from "./Section";
+import StateKey from "./StateKey";
+import Tool from "./Tool";
+import Transcript from "./Transcript";
+
+export interface DockProps {
+  className?: string;
+  /** Pass the bridge an agent is already driving so both write into one transcript. Defaults to the app's own. */
+  bridge?: AgentBridge;
+  open?: boolean;
+}
+
+/**
+ * The in-page surface of the agent bridge: what this page lets an agent do, what it refused, and what it has done.
+ *
+ * It drives the store directly rather than talking to a model, because a model is not the framework's to choose —
+ * there is no provider or key here. An app wires its own agent to `bridge.tools` / `bridge.call` and can render this
+ * beside it; on its own it is the way to see the catalogue a page actually publishes, which is the one thing no
+ * amount of reading the source answers.
+ */
+export const Dock = ({ className, bridge, open = false }: DockProps) => {
+  const held = useRef<AgentBridge | null>(null);
+  held.current ??= bridge ?? ensureStoreSurface().bridge;
+  const agent = held.current;
+  const [ran, setRan] = useState(0);
+  const liveKeys = StoreRegistry.instance.liveKeys;
+  const stateEntries = Object.entries(agent.state).sort(([a], [b]) => {
+    const [liveA, liveB] = [liveKeys.has(a), liveKeys.has(b)];
+    if (liveA !== liveB) return liveA ? -1 : 1;
+    return a < b ? -1 : 1;
+  });
+  return (
+    <aside
+      data-agent-ui=""
+      className={cn(
+        "fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-80 flex-col gap-2 overflow-y-auto rounded-box border border-base-content/10 bg-base-100/95 p-3 shadow-lg",
+        className,
+      )}
+    >
+      <h2 className="font-semibold text-sm">Agent</h2>
+      <Section count={agent.tools.length} open={open} title="Actions">
+        {agent.tools.map((tool) => (
+          <Tool bridge={agent} key={tool.name} onRun={() => setRan(ran + 1)} tool={tool} />
+        ))}
+      </Section>
+      <Section count={Object.keys(agent.state).length} title="State">
+        {stateEntries.map(([name, entry]) => (
+          <StateKey bridge={agent} entry={entry} key={name} live={liveKeys.has(name)} name={name} />
+        ))}
+      </Section>
+      <Section count={liveKeys.size} title="Context">
+        <Context />
+      </Section>
+      <Section count={agent.refusals.length} title="Refused">
+        {agent.refusals.map((refusal) => (
+          <div className="flex flex-col" key={refusal.key}>
+            <span className="truncate font-mono text-xs">{refusal.key}</span>
+            <span className="text-[10px] text-foreground/50">{refusal.reason}</span>
+          </div>
+        ))}
+      </Section>
+      <Section count={agent.transcript.length} open title="Transcript">
+        <Transcript calls={agent.transcript} />
+      </Section>
+    </aside>
+  );
+};

package/ui/Agent/Guide.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { useAgentGuide } from "../../vendor/use-agentic";
+
+export interface GuideProps {
+  instructions: string;
+}
+
+/**
+ * Standing agent guidance scoped to a route subtree: render it from a `_layout.tsx` or a page and the text joins
+ * the turn's instructions while that subtree is mounted. Nesting layers naturally — each mounted Guide contributes
+ * its block, and navigating away withdraws it. Renders nothing.
+ */
+export const Guide = ({ instructions }: GuideProps) => {
+  useAgentGuide(instructions);
+  return null;
+};

package/ui/Agent/Section.tsx

@@ -0,0 +1,24 @@
+"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

@@ -0,0 +1,44 @@
+"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="max-h-40 overflow-auto rounded-field bg-muted p-2 text-[10px] leading-tight">{shown}</pre>
+      ) : null}
+    </div>
+  );
+}

package/ui/Agent/Tool.tsx

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "akanjs/client";
+import type { AgentBridge, AgentTool } from "akanjs/store";
+import { useState } from "react";
+import { buttonRecipe } from "../recipe";
+
+const effectClass: { [key in AgentTool["effect"]]: string } = {
+  state: "bg-muted text-foreground/70",
+  query: "bg-info/15 text-info",
+  mutation: "bg-warning/15 text-warning",
+};
+
+interface ToolProps {
+  className?: string;
+  bridge: AgentBridge;
+  tool: AgentTool;
+  onRun: () => void;
+}
+
+/**
+ * One published action, 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 the store publishes is already legible as JSON.
+ */
+export default function Tool({ className, bridge, tool, onRun }: ToolProps) {
+  const [args, setArgs] = useState("{}");
+  const [error, setError] = useState("");
+  const run = async () => {
+    setError("");
+    try {
+      await bridge.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-base-100/60 px-2 py-1", className)}>
+      <summary className="flex cursor-pointer list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
+        <span className={cn("rounded-field px-1.5 py-0.5 text-[10px] uppercase", effectClass[tool.effect])}>
+          {tool.effect}
+        </span>
+        <span className="truncate font-mono text-xs">{tool.name}</span>
+      </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(tool.inputSchema.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-error text-xs">{error}</p> : null}
+      </div>
+    </details>
+  );
+}

package/ui/Agent/Transcript.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "akanjs/client";
+import type { AgentCall } from "akanjs/store";
+
+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-base-100/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-error">{call.error}</span> : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/ui/Agent/Zone.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { AgentContext, ensureStoreSurface } from "akanjs/store";
+import { type ReactNode, useMemo, useRef } from "react";
+import { AgenticSurface, type AgentRunner, AgentScope, AgentSession, SessionContext, useScopePath } from "../../vendor/use-agentic";
+import { fetchRunner } from "./fetchRunner";
+import { Guide } from "./Guide";
+import { type PersistOption, sessionHistoryOf } from "./sessionHistory";
+
+export interface ZoneProps {
+  className?: string;
+  /** Names the zone; the scope id and the `data-agent-zone` container both derive from it. */
+  id: string;
+  label?: string;
+  /** Zone-scoped guidance — a mounted Guide, so the root agent reads it too (ancestor rule), a sibling zone never does. */
+  instructions?: string;
+  runner?: AgentRunner;
+  maxTurns?: number;
+  /** Keeps this zone's transcript across reloads, keyed by the zone's scope path. */
+  persist?: PersistOption;
+  children: ReactNode;
+}
+
+/**
+ * A zone agent: one subtree with its own conversation over a scoped view of the same surface. Everything mounted
+ * inside — hook tools, `st.use` subscriptions, guides — belongs to this zone's session *and* to the root agent:
+ * zones are views, never walls. An `Agent.Chat` mounted inside binds to this session automatically, so two zones
+ * on one screen run two conversations in parallel, each seeing only its own subtree.
+ */
+export const Zone = ({ className, id, label, instructions, runner, maxTurns, persist, children }: ZoneProps) => {
+  const parent = useScopePath();
+  const path = useMemo(() => AgenticSurface.childPath(parent, id), [parent.join("."), id]);
+  const held = useRef<AgentSession | null>(null);
+  held.current ??= new AgentSession(ensureStoreSurface().surface.view(path), runner ?? fetchRunner(), {
+    buildContext: (view) => AgentContext.of().blocks(view, path),
+    ...(maxTurns ? { maxTurns } : {}),
+    ...(persist ? { history: sessionHistoryOf(persist, path.join(".")) } : {}),
+  });
+  return (
+    <AgentScope id={id} kind="zone" label={label}>
+      <SessionContext.Provider value={held.current}>
+        <div className={className} data-agent-zone={path.join(".")}>
+          {instructions ? <Guide instructions={instructions} /> : null}
+          {children}
+        </div>
+      </SessionContext.Provider>
+    </AgentScope>
+  );
+};

package/ui/Agent/fetchRunner.ts

@@ -0,0 +1,30 @@
+import { getEnv } from "akanjs/base";
+import { fetch } from "akanjs/client";
+import { type AgentRunner, httpRunner } from "../../vendor/use-agentic";
+
+/**
+ * Runs each assistant turn against the app's own `runAgentTurn` route — service signals mount unprefixed, so the
+ * URL is `<serverHttpUri>/runAgentTurn` — through the shared `httpRunner`, which negotiates streaming via
+ * `accept`: a server that streams answers SSE and the text arrives as it is generated; one that does not answers
+ * the same JSON turn. The client runtime's fetch proxy is only probed for whether the endpoint exists (the util
+ * lib ships one) and for the signed-in JWT; cookies ride the same-origin request on their own. The endpoint is a
+ * stateless relay; the loop and every tool execution stay in this browser session.
+ */
+export const fetchRunner = (options: { fetcher?: typeof globalThis.fetch } = {}): AgentRunner => ({
+  async *run(request) {
+    const client = fetch as { runAgentTurn?: unknown; instance?: { jwt?: string | null } };
+    if (typeof client.runAgentTurn !== "function") {
+      yield { type: "error", message: "No runAgentTurn endpoint is mounted on this app, so the agent cannot answer." };
+      return;
+    }
+    const runner = httpRunner({
+      url: `${getEnv().serverHttpUri}/runAgentTurn`,
+      headers: (): Record<string, string> => {
+        const jwt = client.instance?.jwt;
+        return jwt ? { authorization: `Bearer ${jwt}` } : {};
+      },
+      ...(options.fetcher ? { fetcher: options.fetcher } : {}),
+    });
+    yield* runner.run(request);
+  },
+});

package/ui/Agent/index.ts

@@ -0,0 +1,12 @@
+import { AgentScope } from "../../vendor/use-agentic";
+import Context from "./Context";
+import { Dock } from "./Dock";
+import { Guide } from "./Guide";
+import { Chat } from "./index_";
+import Section from "./Section";
+import StateKey from "./StateKey";
+import Tool from "./Tool";
+import Transcript from "./Transcript";
+import { Zone } from "./Zone";
+
+export const Agent = { Chat, Context, Dock, Guide, Scope: AgentScope, Section, StateKey, Tool, Transcript, Zone };

package/ui/Agent/index_.tsx

@@ -0,0 +1,4 @@
+"use client";
+import { lazy } from "akanjs/webkit";
+
+export const Chat = lazy(() => import("./Chat"), { ssr: false });

package/ui/Agent/sessionHistory.ts

@@ -0,0 +1,33 @@
+import { getEnv } from "akanjs/base";
+import type { ChatMessage, SessionHistory } from "../../vendor/use-agentic";
+
+export type PersistOption = boolean | { storage?: "session" | "local"; key?: string };
+
+/**
+ * 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.
+ */
+export const sessionHistoryOf = (persist: PersistOption | undefined, pathKey = ""): SessionHistory | undefined => {
+  if (!persist || typeof window === "undefined") return undefined;
+  const option = persist === true ? {} : persist;
+  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) => {
+      storage.setItem(key, JSON.stringify({ v: version, messages: messages.slice(-cap) }));
+    },
+    clear: () => {
+      storage.removeItem(key);
+    },
+  };
+};

package/ui/Badge.tsx

@@ -3,14 +3,14 @@ import type { HTMLAttributes } from "react";
 import { type BadgeVariants, badgeRecipe } from "./recipe";
 import { createOverridable, useUiRecipe } from "./UiOverride";
 
-export { badgeRecipe, type BadgeVariants };
+export { type BadgeVariants, badgeRecipe };
 
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & BadgeVariants;
 
-const DefaultBadge = ({ className, variant, ...rest }: BadgeProps) => {
+const DefaultBadge = ({ className, variant, size, outline, ...rest }: BadgeProps) => {
   
   const recipe = useUiRecipe("badge") ?? badgeRecipe;
-  return <span className={recipe({ variant }, className)} {...rest} />;
+  return <span className={recipe({ variant, size, outline }, className)} {...rest} />;
 };
 
 /** Status/label pill. Route-overridable via `page/**\/_overrides.tsx` (slot `Badge`). */

package/ui/BottomSheet.tsx

@@ -3,6 +3,7 @@ import { useDrag } from "@use-gesture/react";
 import { cn } from "akanjs/client";
 import { st } from "akanjs/store";
 import { animated } from "akanjs/ui";
+import { useEscapeKey } from "akanjs/webkit";
 import { forwardRef, type ReactNode, useEffect, useImperativeHandle, useRef } from "react";
 import { BiX } from "react-icons/bi";
 import { config, useSpring } from "react-spring";
@@ -54,6 +55,10 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       close: closeModal,
     }));
 
+    useEscapeKey(open, () => {
+      void closeModal();
+    });
+
     useEffect(() => {
       if (open) void openModal();
       else void closeModal();

package/ui/Button.tsx

@@ -4,10 +4,11 @@ import { isThenable } from "akanjs/common";
 import type React from "react";
 import { type ButtonHTMLAttributes, type ComponentType, createElement, useState } from "react";
 import { AiFillCheckCircle, AiOutlineLoading3Quarters } from "react-icons/ai";
+import { agentAttrs } from "./agentAttrs";
 import { type ButtonVariants, buttonRecipe } from "./recipe";
 import { useUiOverride, useUiRecipe } from "./UiOverride";
 
-export { buttonRecipe, type ButtonVariants };
+export { type ButtonVariants, buttonRecipe };
 
 export type ButtonProps<Result> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> &
   ButtonVariants & {
@@ -61,6 +62,8 @@ const DefaultButton = <Result = unknown>({
   className,
   variant,
   size,
+  shape,
+  outline,
   type = "button",
   loadingMode = "hold",
   showError = true,
@@ -84,11 +87,12 @@ const DefaultButton = <Result = unknown>({
       <button
         type={type}
         className={recipe(
-          { variant, size },
+          { variant, size, shape, outline },
 
           cn(loadingMode === "hold" && "relative", busy && !rest.disabled && "disabled:opacity-100", className),
         )}
         {...rest}
+        {...agentAttrs(onClick)}
         disabled={!!rest.disabled || busy}
         onClick={(e) => {
           if (!onClick) return;

package/ui/Constant/Doc.tsx

@@ -238,7 +238,7 @@ const EnumList = ({ enums = getConstantSchemaDoc().enums }: EnumProps) => {
   const { l } = usePage();
   return (
     <div className="overflow-x-auto rounded-xl bg-muted p-3">
-      <table className="table">
+      <table className={tableClass}>
         <thead>
           <tr>
             <th>Key</th>

package/ui/CsrImage.tsx

@@ -5,7 +5,7 @@ import type { ImgHTMLAttributes } from "react";
 type CsrImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> & {
   src?: string;
   file?: ProtoFile | { url: string; imageSize: [number, number]; abstractData?: string | null } | null;
-  abstractData?: string;
+  abstractData?: string | null;
   priority?: boolean;
   preload?: boolean;
   quality?: number;

package/ui/Data/ListContainer.tsx

@@ -268,7 +268,7 @@ export default function ListContainer<
     <div className={cn("m-4", className)}>
       <div className="mb-3 flex flex-wrap justify-between">
         <div className="flex pb-1">
-          <p className="prose text-lg">
+          <p className="text-lg">
             {title ?? l._(`${sliceName}.modelName`)}({modelInsight.count})
           </p>
           <div className="ml-3 flex items-center">

package/ui/DatePicker.tsx

@@ -5,6 +5,7 @@ import { lazy } from "akanjs/webkit";
 import { type FocusEvent, useEffect, useRef } from "react";
 import { AiOutlineSwapRight } from "react-icons/ai";
 
+import { inputRecipe } from "./recipe";
 import { createOverridable } from "./UiOverride";
 
 const reactDatePickerPackage = "react-datepicker";
@@ -58,7 +59,7 @@ const DefaultDatePicker = ({
 
   return (
     <ReactDatePicker
-      className={cn("input text-center", className)}
+      className={inputRecipe({}, ["text-center", className])}
       selected={value ? value.toDate() : new Date()}
       disabledKeyboardNavigation
       onFocus={(e: FocusEvent<HTMLInputElement>) => {
@@ -110,9 +111,9 @@ const DefaultRangePicker = ({
     onChange([value[0] ?? dayjs(), dayjs(date)]);
   };
 
-  const pickerClassName = "m-0 input focus:outline-hidden z-50 p-3 text-center h-full w-full ";
+  const pickerClassName = "m-0 h-full w-full border-none bg-transparent p-3 text-center focus:outline-hidden z-50";
   return (
-    <div className={cn("input flex h-full w-fit items-center gap-2 p-0", className)}>
+    <div className={inputRecipe({}, ["flex h-full w-fit items-center gap-2 p-0", className])}>
       <ReactDatePicker
         className={pickerClassName}
         selected={value[0] ? value[0].toDate() : undefined}
@@ -136,7 +137,7 @@ const DefaultRangePicker = ({
         showTimeSelect={showTime}
         timeIntervals={timeIntervals}
         filterDate={(date: Date) =>
-          !disabledDate?.(dayjs(date)) && !!value[0] && !dayjs(date).add(1, "day").isBefore(value[0]) ? true : false
+          !disabledDate?.(dayjs(date)) && value[0] && !dayjs(date).add(1, "day").isBefore(value[0]) ? true : false
         }
         filterTime={(time: Date) => !!value[0] && dayjs(time).isAfter(value[0])}
         dateFormat={format}

package/ui/Dialog/Modal.tsx

@@ -2,11 +2,13 @@
 import { useDrag } from "@use-gesture/react";
 import { cn, usePage } from "akanjs/client";
 import { animated } from "akanjs/ui";
+import { useEscapeKey } from "akanjs/webkit";
 import { type ReactNode, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BiX } from "react-icons/bi";
 import { config, useSpring } from "react-spring";
 import { buttonRecipe } from "../Button";
+import { useOverlayLayerProps } from "../overlayLayer";
 
 import { DialogContext } from "./context";
 
@@ -35,6 +37,8 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
   const focusedElementRef = useRef<HTMLElement | null>(null);
   const titleId = useId();
   const contentId = useId();
+  
+  const overlayLayerProps = useOverlayLayerProps();
   const [{ translate }, api] = useSpring(() => ({ translate: 1 }));
   const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
   const [isMounted, setIsMounted] = useState(open);
@@ -160,20 +164,7 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
     };
   }, [isMounted, portalElement]);
 
-  useEffect(() => {
-    if (!isMounted) return;
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      requestClose();
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, [isMounted, requestClose]);
+  useEscapeKey(isMounted, requestClose);
 
   useEffect(() => {
     return () => {
@@ -186,17 +177,23 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
   return createPortal(
     <>
       <div
+        {...overlayLayerProps}
         className={cn("fixed inset-0 z-10", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-md")}
         onClick={(event) => {
           if (event.target !== event.currentTarget) return;
           requestClose();
         }}
       />
-      <div className="fixed top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
+      <div
+        {...overlayLayerProps}
+        className="fixed top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+      >
         <div className="z-10">
           <animated.div
             ref={ref}
             style={{ translateY, opacity }}
+
+            className="outline-none"
             role="dialog"
             aria-modal="true"
             aria-labelledby={title ? titleId : undefined}