akanjs 3.0.2 → 3.1.0-rc.0

package/webkit/useCsrValues.ts

@@ -4,6 +4,7 @@ import { useDrag } from "@use-gesture/react";
 import {
   type CsrContextType,
   router as clientRouter,
+  csrLocation,
   Device,
   debugFrame,
   defaultPageState,
@@ -109,6 +110,7 @@ const pageContentStyle = ({ frameLayout }: RouteState, pageState: FramePageState
       (frameLayout.keyboard.sticky ? frameLayout.keyboardAccessory.height : 0),
   ),
   height: frameLayout.contentViewport.height,
+  "--akan-content-height": `${frameLayout.contentViewport.height}px`,
 });
 
 const prevPageContentStyle = (clientHeight: number, prevPageState: FramePageState) => ({
@@ -132,6 +134,10 @@ const tweenedSafeAreas = (
   bottomSafeArea: {
     containerStyle: {
       backgroundColor: pageState.bottomSafeAreaColor,
+      visibility:
+        pageState.bottomInset > 0 || pageState.bottomSafeAreaColor !== defaultPageState.bottomSafeAreaColor
+          ? ("visible" as const)
+          : ("hidden" as const),
       top: tween(progress, clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea),
       height: tween(progress, prevPageState.bottomSafeArea, pageState.bottomSafeArea),
     },
@@ -603,7 +609,7 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
 
   const { getLocation } = useLocation({ rootRouteGuide });
   const [initialStack] = useState(() => {
-    const current = getLocation(window.location.href.replace(window.location.origin, ""));
+    const current = getLocation(csrLocation.href);
     return CsrStack.restore(current, getLocation) ?? { locations: [current], idx: 0 };
   });
   const {
@@ -876,8 +882,8 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
       if (!usePendingNavigation) {
         setHistoryForward({ type: kind, location: toLocation, scrollTop, scrollToTop });
         settle(kind === "replace" ? prevLocation : fromLocation);
-        if (kind === "push") window.history.pushState({ akanEntryId: toLocation.entryId }, "", href);
-        else window.history.replaceState({ akanEntryId: toLocation.entryId }, "", href);
+        if (kind === "push") csrLocation.push({ akanEntryId: toLocation.entryId }, href);
+        else csrLocation.replace({ akanEntryId: toLocation.entryId }, href);
         return;
       }
 
@@ -951,8 +957,8 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
           navigationIntent: intent,
           phase: "transitioning",
         });
-        if (kind === "push") window.history.pushState({ akanEntryId: toLocation.entryId }, "", href);
-        else window.history.replaceState({ akanEntryId: toLocation.entryId }, "", href);
+        if (kind === "push") csrLocation.push({ akanEntryId: toLocation.entryId }, href);
+        else csrLocation.replace({ akanEntryId: toLocation.entryId }, href);
         debugFrame("navigation.commit", { id: intent.id, kind, to: href });
         window.setTimeout(
           () => {
@@ -1038,7 +1044,7 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   ]);
   useEffect(() => {
     debugFrame("csr.mount", { path: resolvedLocation.pathRoute.path, viewport });
-    window.history.replaceState({ ...(window.history.state ?? {}), akanEntryId: getCurrentLocation().entryId }, "");
+    csrLocation.replace({ ...((csrLocation.state as object | null) ?? {}), akanEntryId: getCurrentLocation().entryId });
     return () => debugFrame("csr.unmount", { lastPath: resolvedLocation.pathRoute.path });
   }, []);
   const getRouter = useCallback((): RouterInstance => {
@@ -1058,7 +1064,7 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
       push: forward("push"),
       replace: forward("replace"),
       refresh: () => {
-        window.location.reload();
+        csrLocation.reload();
       },
       back: async ({ scrollToTop }: RouteOptions = {}) => {
         const targetLocation = getPrevLocation();
@@ -1072,12 +1078,12 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
         const scrollTop = pageContentRef.current?.scrollTop ?? 0;
         setHistoryBack({ type: "back", location, scrollTop, scrollToTop });
         settle(getPrevLocation());
-        window.history.back();
+        csrLocation.back();
       },
     };
     window.onpopstate = async (event) => {
-      const href = window.location.href.replace(window.location.origin, "");
-      const entryId = (window.history.state as { akanEntryId?: string } | null)?.akanEntryId;
+      const href = csrLocation.href;
+      const entryId = (csrLocation.state as { akanEntryId?: string } | null)?.akanEntryId;
       const isAt = (target: Location | null | undefined) =>
         !!target && (entryId ? target.entryId === entryId : target.href === href);
       const routeType = isAt(getNextLocation()) ? "forward" : isAt(getPrevLocation()) ? "back" : null;

package/webkit/useFrameRuntime.ts

@@ -74,7 +74,16 @@ export function applyFrameSlots(
 ) {
   const slots = getFrameSlotsForPath(pathRoute, frameSlots, pathRoutes, visiblePaths);
   const pageState = clonePageState(basePageState);
-  if (!pathRoute.explicitPageConfigKeys?.cache && slots.some((slot) => slot.cache)) pageState.cache = true;
+  const explicit = pathRoute.explicitPageConfigKeys ?? {};
+  if (!explicit.cache && slots.some((slot) => slot.cache)) pageState.cache = true;
+  
+  for (const side of ["topInset", "bottomInset"] as const) {
+    if (explicit[side]) continue;
+    const heights = slots
+      .filter((slot) => slot.type === side && !isKeyboardAccessorySlot(slot))
+      .map(resolveFrameSlotHeight);
+    if (heights.length) pageState[side] = Math.max(...heights);
+  }
   return pageState;
 }
 

package/webkit/useLocation.ts

@@ -1,5 +1,5 @@
 "use client";
-import type { Location, PathRoute, RouteGuide } from "akanjs/client";
+import { csrLocation, type Location, type PathRoute, type RouteGuide } from "akanjs/client";
 import { useCallback, useRef } from "react";
 import { CsrStack } from "./CsrStack";
 
@@ -34,7 +34,8 @@ export const useLocation = ({ rootRouteGuide }: UseLocationOptions) => {
       const targetRouteGuide = getTargetRouteGuide(pathSegments, routeGuide.current);
       const pathRoute = targetRouteGuide.pathRoute;
       if (!pathRoute) {
-        window.location.assign("/404");
+        
+        if (!csrLocation.isMemory || pathname === csrLocation.pathname) csrLocation.assign("/404");
         throw new Error("404");
       }
       return pathRoute;
@@ -57,7 +58,7 @@ export const useLocation = ({ rootRouteGuide }: UseLocationOptions) => {
         {},
       );
     };
-    const hrefWithoutOrigin = href.replace(window.location.origin, "");
+    const hrefWithoutOrigin = csrLocation.strip(href);
     const [hrefWithoutHash, hash = ""] = hrefWithoutOrigin.split("#");
     const [pathname, search] = hrefWithoutHash.split("?");
     const pathRoute = getPathRoute(pathname);

package/webkit/useVisualViewportFrame.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export interface VisualViewportFrame {
+  /** The on-screen keyboard's height over the layout viewport's bottom; 0 while it is closed. */
+  keyboardHeight: number;
+  /** The visible rectangle's height and its scroll offset from the layout viewport's top, in CSS px. */
+  height: number;
+  offsetTop: number;
+}
+
+const closedFrame = (): VisualViewportFrame => ({
+  keyboardHeight: 0,
+  height: typeof window === "undefined" ? 0 : window.innerHeight,
+  offsetTop: 0,
+});
+
+/**
+ * The visible part of the page while the on-screen keyboard is up, on the web. Only `visualViewport` reports the
+ * keyboard: `dvh` tracks the browser's own chrome, and iOS pans the visual viewport to the field instead of shrinking
+ * the page, so a fixed bottom bar stays behind the keyboard until it is placed at `offsetTop + height`.
+ */
+export const useVisualViewportFrame = (): VisualViewportFrame => {
+  const [frame, setFrame] = useState<VisualViewportFrame>(closedFrame);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) return;
+    const measure = () => {
+      
+      const zoomed = viewport.scale > 1.01;
+      const keyboardHeight = zoomed
+        ? 0
+        : Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop));
+      const next = zoomed
+        ? closedFrame()
+        : { keyboardHeight, height: Math.round(viewport.height), offsetTop: Math.round(viewport.offsetTop) };
+      setFrame((prev) =>
+        prev.keyboardHeight === next.keyboardHeight && prev.height === next.height && prev.offsetTop === next.offsetTop
+          ? prev
+          : next,
+      );
+    };
+    measure();
+    viewport.addEventListener("resize", measure);
+    viewport.addEventListener("scroll", measure);
+    return () => {
+      viewport.removeEventListener("resize", measure);
+      viewport.removeEventListener("scroll", measure);
+    };
+  }, []);
+  return frame;
+};

package/service/predefinedAdaptor/sql/driver/libsql.ts

@@ -1,45 +0,0 @@
-import type { Client as LibsqlClient, Transaction as LibsqlTransaction } from "@libsql/client";
-import type { AkanSqlClient, AkanSqlStatement } from "../types";
-import { toLibsqlArgs } from "../values";
-import { openTurn, type SqliteWriteTurn, waitForTurn } from "./bunSqlite";
-
-export class LibsqlStatement implements AkanSqlStatement {
-  readonly #turn: () => Promise<void>;
-  constructor(
-    private readonly client: LibsqlClient | LibsqlTransaction,
-    private readonly sql: string,
-    writeTurn: SqliteWriteTurn = openTurn,
-  ) {
-    this.#turn = waitForTurn(sql, writeTurn);
-  }
-  async run(...params: unknown[]) {
-    await this.#turn();
-    return await this.client.execute({ sql: this.sql, args: toLibsqlArgs(params) });
-  }
-  async get<Row = Record<string, unknown>>(...params: unknown[]): Promise<Row | null> {
-    await this.#turn();
-    const result = await this.client.execute({ sql: this.sql, args: toLibsqlArgs(params) });
-    return (result.rows[0] as Row | undefined) ?? null;
-  }
-  async all<Row = Record<string, unknown>>(...params: unknown[]): Promise<Row[]> {
-    await this.#turn();
-    const result = await this.client.execute({ sql: this.sql, args: toLibsqlArgs(params) });
-    return result.rows as Row[];
-  }
-}
-
-export class LibsqlAkanClient implements AkanSqlClient {
-  constructor(
-    readonly client: LibsqlClient | LibsqlTransaction,
-    private readonly writeTurn: SqliteWriteTurn = openTurn,
-  ) {}
-  async execute(sql: string, params: unknown[] | Record<string, unknown> = []) {
-    return await this.prepare(sql).run(...(Array.isArray(params) ? params : [params]));
-  }
-  prepare(sql: string): AkanSqlStatement {
-    return new LibsqlStatement(this.client, sql, this.writeTurn);
-  }
-  async close() {
-    this.client.close();
-  }
-}

package/types/service/predefinedAdaptor/sql/driver/libsql.d.ts

@@ -1,20 +0,0 @@
-import type { Client as LibsqlClient, Transaction as LibsqlTransaction } from "@libsql/client";
-import type { AkanSqlClient, AkanSqlStatement } from "../types.d.ts";
-import { type SqliteWriteTurn } from "./bunSqlite.d.ts";
-export declare class LibsqlStatement implements AkanSqlStatement {
-    #private;
-    private readonly client;
-    private readonly sql;
-    constructor(client: LibsqlClient | LibsqlTransaction, sql: string, writeTurn?: SqliteWriteTurn);
-    run(...params: unknown[]): Promise<import("@libsql/client").ResultSet>;
-    get<Row = Record<string, unknown>>(...params: unknown[]): Promise<Row | null>;
-    all<Row = Record<string, unknown>>(...params: unknown[]): Promise<Row[]>;
-}
-export declare class LibsqlAkanClient implements AkanSqlClient {
-    readonly client: LibsqlClient | LibsqlTransaction;
-    private readonly writeTurn;
-    constructor(client: LibsqlClient | LibsqlTransaction, writeTurn?: SqliteWriteTurn);
-    execute(sql: string, params?: unknown[] | Record<string, unknown>): Promise<unknown>;
-    prepare(sql: string): AkanSqlStatement;
-    close(): Promise<void>;
-}

package/types/ui/Agent/useKeyboardInset.d.ts

@@ -1 +0,0 @@
-export declare const useKeyboardInset: () => number;

package/types/ui/ServerPortal.d.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from "react";
-interface ServerPortalStore {
-    capture: (id: string, children: ReactNode) => void;
-    read: (id: string) => ReactNode;
-}
-declare global {
-    var __AKAN_SERVER_PORTAL_STORE__: ServerPortalStore | undefined;
-}
-export declare const createServerPortalStore: () => ServerPortalStore;
-export declare const setActiveServerPortalStore: (store: ServerPortalStore) => void;
-export declare const captureServerPortal: (id: string, children: ReactNode) => boolean;
-export declare const ServerPortalOutlet: ({ id }: {
-    id: string;
-}) => import("react").JSX.Element;
-export {};

package/ui/Agent/useKeyboardInset.ts

@@ -1,19 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-
-export const useKeyboardInset = () => {
-  const [inset, setInset] = useState(0);
-  useEffect(() => {
-    const viewport = window.visualViewport;
-    if (!viewport) return;
-    const measure = () => setInset(Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop));
-    measure();
-    viewport.addEventListener("resize", measure);
-    viewport.addEventListener("scroll", measure);
-    return () => {
-      viewport.removeEventListener("resize", measure);
-      viewport.removeEventListener("scroll", measure);
-    };
-  }, []);
-  return inset;
-};

package/ui/ServerPortal.tsx

@@ -1,49 +0,0 @@
-import { getRequestStore } from "akanjs/fetch";
-import type { ReactNode } from "react";
-
-interface ServerPortalStore {
-  capture: (id: string, children: ReactNode) => void;
-  read: (id: string) => ReactNode;
-}
-
-declare global {
-  var __AKAN_SERVER_PORTAL_STORE__: ServerPortalStore | undefined;
-}
-
-export const createServerPortalStore = (): ServerPortalStore => {
-  const portals = new Map<string, ReactNode[]>();
-  return {
-    capture: (id, children) => {
-      const current = portals.get(id) ?? [];
-      current.push(children);
-      portals.set(id, current);
-    },
-    read: (id) => portals.get(id) ?? null,
-  };
-};
-
-export const setActiveServerPortalStore = (store: ServerPortalStore): void => {
-  const requestStore = getRequestStore() as ({ serverPortalStore?: ServerPortalStore } & object) | undefined;
-  if (requestStore) {
-    requestStore.serverPortalStore = store;
-    return;
-  }
-  globalThis.__AKAN_SERVER_PORTAL_STORE__ = store;
-};
-
-const getActiveServerPortalStore = (): ServerPortalStore | undefined => {
-  const requestStore = getRequestStore() as ({ serverPortalStore?: ServerPortalStore } & object) | undefined;
-  return requestStore?.serverPortalStore ?? globalThis.__AKAN_SERVER_PORTAL_STORE__;
-};
-
-export const captureServerPortal = (id: string, children: ReactNode): boolean => {
-  const store = getActiveServerPortalStore();
-  if (!store) return false;
-  store.capture(id, children);
-  return true;
-};
-
-export const ServerPortalOutlet = ({ id }: { id: string }) => {
-  const serverPortal = getActiveServerPortalStore();
-  return <>{serverPortal?.read(id)}</>;
-};