akanjs 3.0.0-alpha.7 → 3.0.0-alpha.71

package/ui/overlayPosition.ts

@@ -0,0 +1,104 @@
+"use client";
+import { type RefObject, useCallback, useEffect, useLayoutEffect, useState } from "react";
+
+const TRIGGER_GAP = 4;
+const VIEWPORT_MARGIN = 8;
+const POINTER_INSET = 16;
+
+export interface OverlayPosition {
+  top: number;
+  left: number;
+  /** Placed above the trigger, because there was no room below. */
+  above: boolean;
+  /** The trigger's centre relative to the panel's left edge, held clear of the panel's rounded corners. */
+  anchorOffset: number;
+  /** The trigger's own width, for a panel that lines up with the control it drops out of. */
+  anchorWidth: number;
+}
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
+
+/**
+ * Places a portalled panel against its trigger in viewport coordinates.
+ *
+ * A panel positioned inside its own tree is clipped by every `overflow` ancestor it has — the modal
+ * surface, the modal's scrolling body, a table's scroll container, the dropdown menu a row verb sits in —
+ * so overlay panels portal out to `document.body` and are placed here instead of by CSS.
+ * `position: fixed` in place would not do it either: a fixed element inside a transformed ancestor is laid
+ * out and clipped by that ancestor, and the modal surface animates a transform.
+ */
+export const useOverlayPosition = ({
+  opened,
+  triggerRef,
+  panelRef,
+  align,
+  gap = TRIGGER_GAP,
+}: {
+  opened: boolean;
+  triggerRef: RefObject<HTMLElement | null>;
+  panelRef: RefObject<HTMLElement | null>;
+  align: "start" | "end";
+  /** Distance from the trigger. Raise it for a panel whose pointer sticks out past its own edge. */
+  gap?: number;
+}) => {
+  const [position, setPosition] = useState<OverlayPosition | null>(null);
+
+  const measure = useCallback(() => {
+    const trigger = triggerRef.current?.getBoundingClientRect();
+    const panel = panelRef.current;
+    if (!trigger || !panel) return;
+    const { offsetHeight: height, offsetWidth: width } = panel;
+    const spaceBelow = window.innerHeight - trigger.bottom - gap - VIEWPORT_MARGIN;
+    const spaceAbove = trigger.top - gap - VIEWPORT_MARGIN;
+    const above = spaceBelow < height && spaceAbove > spaceBelow;
+    const left = clamp(
+      align === "start" ? trigger.left : trigger.right - width,
+      VIEWPORT_MARGIN,
+      window.innerWidth - VIEWPORT_MARGIN - width,
+    );
+    const next = {
+      top: clamp(
+        above ? trigger.top - gap - height : trigger.bottom + gap,
+        VIEWPORT_MARGIN,
+        window.innerHeight - VIEWPORT_MARGIN - height,
+      ),
+      left,
+      above,
+      anchorOffset: clamp((trigger.left + trigger.right) / 2 - left, POINTER_INSET, width - POINTER_INSET),
+      anchorWidth: trigger.width,
+    };
+
+    setPosition((prev) =>
+      prev &&
+      prev.top === next.top &&
+      prev.left === next.left &&
+      prev.above === next.above &&
+      prev.anchorOffset === next.anchorOffset &&
+      prev.anchorWidth === next.anchorWidth
+        ? prev
+        : next,
+    );
+  }, [align, gap, panelRef, triggerRef]);
+
+  useLayoutEffect(() => {
+    if (opened) measure();
+  }, [opened, measure]);
+
+  useEffect(() => {
+    if (!opened) return;
+    
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+
+    const panel = panelRef.current;
+    const observer = panel ? new ResizeObserver(measure) : null;
+    if (panel && observer) observer.observe(panel);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+      observer?.disconnect();
+    };
+  }, [opened, measure, panelRef]);
+
+  return position;
+};

package/ui/recipe/buttonRecipe.ts

@@ -13,7 +13,7 @@ export const buttonRecipe = recipe(
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         accent: "bg-accent text-accent-foreground hover:bg-accent/90",
         neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90",
-        outline: "border border-input bg-background hover:bg-muted hover:text-foreground",
+        outline: "border border-input bg-background text-foreground hover:bg-muted hover:text-foreground",
         ghost: "hover:bg-muted hover:text-foreground",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         success: "bg-success text-success-foreground hover:bg-success/90",
@@ -26,7 +26,7 @@ export const buttonRecipe = recipe(
         sm: "h-8 px-3 text-sm",
         md: "h-10 px-4",
         lg: "h-12 px-6 text-lg",
-        icon: "h-10 w-10",
+        icon: "h-10 w-10 px-0",
       },
 
       shape: {

package/ui/styles.css

@@ -14,6 +14,9 @@
    기본 theme="css"는 data-theme 미부착 → :root 가 기본(dark). [data-theme="light"] override. */
 :root,
 [data-theme="dark"] {
+  /* Native controls the app does not paint — the date/time field's calendar popup, scrollbars, the caret —
+     take their colours from this and nothing else. */
+  color-scheme: dark;
   --background: #0a0a0a;
   --foreground: #fafafa;
   --primary: #fafafa;
@@ -46,6 +49,7 @@
 }
 
 [data-theme="light"] {
+  color-scheme: light;
   --background: #ffffff;
   --foreground: #0a0a0a;
   --primary: #171717;
@@ -342,6 +346,33 @@ body.akan-mobile-document {
   }
 }
 
+/*
+ * The in-page agent's `highlight` tool: a ring that draws the eye, holds, and fades, on the app's own primary
+ * token. It holds through the middle because a person has to find it after the scroll — a symmetric fade reads as
+ * a flicker. `StoreSurfaceSource.highlightMs` mirrors this duration.
+ */
+@keyframes akanAgentHighlight {
+  0% {
+    outline-color: color-mix(in oklab, var(--color-primary) 0%, transparent);
+  }
+  8% {
+    outline-color: var(--color-primary);
+  }
+  65% {
+    outline-color: var(--color-primary);
+  }
+  100% {
+    outline-color: color-mix(in oklab, var(--color-primary) 0%, transparent);
+  }
+}
+
+.akan-agent-highlight {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-field, 0.25rem);
+  animation: akanAgentHighlight 2.4s ease-in-out;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/vendor/use-agentic/AgentAbort.ts

@@ -0,0 +1,29 @@
+/**
+ * The abort signal of the tool call running now.
+ *
+ * Reached through a module slot rather than a parameter for the same reason `AgentProgress` is — work several
+ * frames down, a store action or a poll loop, reads it without every signature between here and there growing a
+ * channel argument, and a session executes tool calls one at a time. Outside a call `current` is null, so a tool
+ * that honours it runs unchanged in a test, under the dock, and on the server.
+ *
+ * Honouring it is optional: the session races every call against the same signal, so Stop lands whatever a tool
+ * does. What reading it buys is the tool's own cleanup — a timer that would otherwise keep ticking for the rest of
+ * its timeout with nobody left to answer.
+ */
+export class AgentAbort {
+  static #signal: AbortSignal | null = null;
+
+  static get current(): AbortSignal | null {
+    return AgentAbort.#signal;
+  }
+
+  static async run<T>(signal: AbortSignal, exec: () => Promise<T> | T): Promise<T> {
+    const outer = AgentAbort.#signal;
+    AgentAbort.#signal = signal;
+    try {
+      return await exec();
+    } finally {
+      AgentAbort.#signal = outer;
+    }
+  }
+}

package/vendor/use-agentic/AgentProgress.ts

@@ -0,0 +1,40 @@
+export interface AgentProgressReport {
+  /** One short line about the step in flight. Read by the user, not the model — keep it prose. */
+  message: string;
+  done?: number;
+  total?: number;
+}
+
+/**
+ * The progress channel for the tool call running now.
+ *
+ * Reached through a module slot rather than a parameter so work several frames down — a store action, an upload
+ * loop, an adapter — reports without every signature between here and there growing a channel argument. The
+ * browser has no `AsyncLocalStorage`, and it needs none: a session executes tool calls one at a time, and `run`
+ * saves and restores the slot so a tool that calls another tool through the surface nests correctly.
+ *
+ * Outside a call `report` is a no-op, so the same code runs unchanged in a test, on the server, and under a host
+ * that renders no progress at all.
+ */
+export class AgentProgress {
+  static #sink: ((report: AgentProgressReport) => void) | null = null;
+
+  static report(message: string, amount: { done?: number; total?: number } = {}) {
+    AgentProgress.#sink?.({ message, ...amount });
+  }
+
+  /** True while someone is rendering the reports, for a message that costs something to assemble. */
+  static get watching() {
+    return !!AgentProgress.#sink;
+  }
+
+  static async run<T>(sink: (report: AgentProgressReport) => void, exec: () => Promise<T> | T): Promise<T> {
+    const outer = AgentProgress.#sink;
+    AgentProgress.#sink = sink;
+    try {
+      return await exec();
+    } finally {
+      AgentProgress.#sink = outer;
+    }
+  }
+}

package/vendor/use-agentic/AgentProvider.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { type ReactNode, useRef } from "react";
+import { AgenticSurface } from "./AgenticSurface";
+import { AgentSession, type AgentSessionOptions } from "./AgentSession";
+import { SurfaceContext } from "./surfaceContext";
+import type { AgentRunner } from "./types";
+import { SessionContext } from "./useAgent";
+
+export interface AgentProviderProps extends AgentSessionOptions {
+  surface?: AgenticSurface;
+  session?: AgentSession;
+  runner?: AgentRunner;
+  children: ReactNode;
+}
+
+/**
+ * Scopes a subtree onto one surface and, when a runner or session is given, one conversation.
+ *
+ * Without a provider, hooks land on `AgenticSurface.shared` — a provider exists to isolate, or to hold the session
+ * `useAgent` reads.
+ */
+export const AgentProvider = ({ surface, session, runner, children, ...options }: AgentProviderProps) => {
+  const held = useRef<{ surface: AgenticSurface; session: AgentSession | null } | null>(null);
+  if (!held.current) {
+    const sessionSurface = session?.surface;
+    
+    const heldSurface =
+      surface ?? (sessionSurface instanceof AgenticSurface ? sessionSurface : undefined) ?? new AgenticSurface();
+    held.current = {
+      surface: heldSurface,
+      session: session ?? (runner ? new AgentSession(heldSurface, runner, options) : null),
+    };
+  }
+  return (
+    <SurfaceContext.Provider value={held.current.surface}>
+      <SessionContext.Provider value={held.current.session}>{children}</SessionContext.Provider>
+    </SurfaceContext.Provider>
+  );
+};

package/vendor/use-agentic/AgentScope.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { type ReactNode, useEffect, useMemo } from "react";
+import { AgenticSurface } from "./AgenticSurface";
+import { ScopeContext, useScopePath, useSurface } from "./surfaceContext";
+
+export interface AgentScopeProps {
+  id: string;
+  label?: string;
+  kind?: string;
+  children: ReactNode;
+}
+
+/** Namespaces every tool and resource registered below it, so list items can reuse local names. */
+export const AgentScope = ({ id, label, kind, children }: AgentScopeProps) => {
+  const surface = useSurface();
+  const parent = useScopePath();
+  const path = useMemo(() => AgenticSurface.childPath(parent, id), [parent, id]);
+  useEffect(() => surface.openScope(parent, { id, label, kind }), [surface, path.join("."), label, kind]);
+  return <ScopeContext.Provider value={path}>{children}</ScopeContext.Provider>;
+};