akanjs 3.0.0-alpha.5 → 3.0.0-alpha.6

package/client/cn.ts

@@ -38,10 +38,17 @@ export const colorTokens = [
   "ring",
 ];
 
+/**
+ * Akan's semantic radius tokens (`--radius-box` / `--radius-field` in ui/styles.css). Without them
+ * `cn("rounded-field", "rounded-full")` keeps both classes and stylesheet order decides the winner.
+ */
+export const radiusTokens = ["box", "field"];
+
 const twMerge = extendTailwindMerge({
   extend: {
     theme: {
       color: colorTokens,
+      radius: radiusTokens,
     },
   },
 });

package/client/csrTypes.ts

@@ -455,6 +455,7 @@ export interface FrameLayoutState {
   keyboard: KeyboardFrameState;
   contentViewport: FrameContentViewportState;
   keyboardAccessory: KeyboardAccessoryFrameState;
+  contentAnchor?: "bottom";
   platformProfile: FramePlatformProfile;
   zIndex: FrameLayerZIndex;
   pageStateByPath: Map<string, PageState>;
@@ -463,6 +464,7 @@ export interface FrameSlotRegistration {
   scope?: FrameSlotScope;
   type: FrameSlotType;
   role?: FrameSlotRole;
+  contentAnchor?: "bottom";
   height?: number;
   estimatedHeight?: number;
   source?: "navbar" | "topInset" | "bottomInset" | "bottomTab" | (string & {});

package/client/frameDebug.ts

@@ -20,9 +20,10 @@ const isFrameDebugEnabled = () => {
 export function debugFrame(event: string, payload: DebugPayload = {}) {
   if (!isFrameDebugEnabled()) return;
   debugSeq += 1;
-  console.info(`[akan:frame:${debugSessionId}:${debugSeq}] ${event}`, {
+  const details = {
     href: window.location.href,
     now: Math.round(performance.now()),
     ...payload,
-  });
+  };
+  console.info(`[akan:frame:${debugSessionId}:${debugSeq}] ${event}`, details, JSON.stringify(details));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/server/webRouter.ts

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import { pathToFileURL } from "node:url";
 import { getEnv } from "akanjs/base";
 import {
   type AkanI18nConfig,
@@ -61,6 +62,18 @@ export const DEFAULT_HTML_RESULT_CACHE_MAX_BODY_BYTES = 2 * 1024 * 1024;
 const ROUTE_CACHE_SWEEP_INTERVAL_MS = 60_000;
 const APPLE_APP_SITE_ASSOCIATION_PATH = "/.well-known/apple-app-site-association";
 const ANDROID_ASSET_LINKS_PATH = "/.well-known/assetlinks.json";
+const FIREBASE_MESSAGING_SW_PATH = "/firebase-messaging-sw.js";
+const FIREBASE_WEB_SDK_VERSION = "12.13.0";
+
+interface FirebaseClientEnvConfig {
+  apiKey: string;
+  authDomain?: string;
+  projectId: string;
+  storageBucket?: string;
+  messagingSenderId: string;
+  appId: string;
+  vapidKey?: string;
+}
 
 export function createRscRedirectResponse(
   location: string,
@@ -488,6 +501,16 @@ export class WebRouter {
         WebRouter.#deepLinkAssociationResponse(ANDROID_ASSET_LINKS_PATH, this.#artifact, {
           cacheControl: this.#prodMode ? "public, max-age=3600" : "no-store",
         }) ?? new Response("Not Found", { status: 404 }),
+      [FIREBASE_MESSAGING_SW_PATH]: async () => {
+        this.#requestStats.staticAsset += 1;
+        const firebaseConfig = await WebRouter.#resolveFirebaseClientConfig();
+        return new Response(WebRouter.#createFirebaseMessagingServiceWorker(firebaseConfig), {
+          headers: {
+            "Content-Type": "application/javascript; charset=utf-8",
+            "Cache-Control": "no-store",
+          },
+        });
+      },
       "/*": async (req) => {
         const url = new URL(req.url);
         if (WebRouter.#isImageOptimizerPath(url.pathname)) {
@@ -1008,6 +1031,79 @@ export class WebRouter {
     return process.env.AKAN_APP_DIR ?? path.dirname(Bun.main);
   }
 
+  static async #resolveFirebaseClientConfig(): Promise<FirebaseClientEnvConfig | null> {
+    const envPath = path.join(WebRouter.#resolveAppDir(), "env", "env.client.ts");
+    if (!fs.existsSync(envPath)) return null;
+    try {
+      const envUrl = pathToFileURL(envPath);
+      envUrl.searchParams.set("t", String(Date.now()));
+      const envModule = (await import(envUrl.href)) as { env?: { firebase?: unknown } };
+      return WebRouter.#normalizeFirebaseClientConfig(envModule.env?.firebase);
+    } catch {
+      return null;
+    }
+  }
+
+  static #normalizeFirebaseClientConfig(config: unknown): FirebaseClientEnvConfig | null {
+    if (!config || typeof config !== "object") return null;
+    const value = config as Partial<Record<keyof FirebaseClientEnvConfig, unknown>>;
+    if (
+      typeof value.apiKey !== "string" ||
+      typeof value.projectId !== "string" ||
+      typeof value.messagingSenderId !== "string" ||
+      typeof value.appId !== "string"
+    ) {
+      return null;
+    }
+    return {
+      apiKey: value.apiKey,
+      ...(typeof value.authDomain === "string" ? { authDomain: value.authDomain } : {}),
+      projectId: value.projectId,
+      ...(typeof value.storageBucket === "string" ? { storageBucket: value.storageBucket } : {}),
+      messagingSenderId: value.messagingSenderId,
+      appId: value.appId,
+    };
+  }
+
+  static #createFirebaseMessagingServiceWorker(config: FirebaseClientEnvConfig | null): string {
+    const configJson = JSON.stringify(config);
+    return `/* Generated by Akan.js. Do not edit. */
+const firebaseConfig = ${configJson};
+
+if (firebaseConfig) {
+  importScripts("https://www.gstatic.com/firebasejs/${FIREBASE_WEB_SDK_VERSION}/firebase-app-compat.js");
+  importScripts("https://www.gstatic.com/firebasejs/${FIREBASE_WEB_SDK_VERSION}/firebase-messaging-compat.js");
+
+  firebase.initializeApp(firebaseConfig);
+  const messaging = firebase.messaging();
+
+  const notificationUrl = (payload) =>
+    payload?.data?.url || payload?.fcmOptions?.link || payload?.notification?.click_action;
+
+  messaging.onBackgroundMessage((payload) => {
+    const title = payload?.notification?.title || "";
+    const options = {
+      body: payload?.notification?.body,
+      icon: payload?.notification?.icon,
+      image: payload?.notification?.image,
+      data: {
+        url: notificationUrl(payload),
+        FCM_MSG: payload,
+      },
+    };
+    self.registration.showNotification(title, options);
+  });
+}
+
+self.addEventListener("notificationclick", (event) => {
+  const url = event.notification?.data?.url || event.notification?.data?.FCM_MSG?.data?.url;
+  event.notification?.close();
+  if (!url) return;
+  event.waitUntil(clients.openWindow(url));
+});
+`;
+  }
+
   static #normalizeArtifact(artifact: BaseBuildArtifact, artifactDir: string): BaseBuildArtifact {
     const normalizedArtifactDir = path.resolve(artifactDir);
     const pagesBundlePath = WebRouter.#resolveArtifactPath(artifact.pagesBundlePath, normalizedArtifactDir);

package/types/client/cn.d.ts

@@ -6,6 +6,11 @@ import { type ClassNameValue } from "tailwind-merge";
  * `cn("bg-primary", "bg-open")` correctly resolves to `"bg-open"` instead of keeping both.
  */
 export declare const colorTokens: string[];
+/**
+ * Akan's semantic radius tokens (`--radius-box` / `--radius-field` in ui/styles.css). Without them
+ * `cn("rounded-field", "rounded-full")` keeps both classes and stylesheet order decides the winner.
+ */
+export declare const radiusTokens: string[];
 /** The one class-combining function: joins strings/arrays/conditional parts (`cond && "x"`) and
  *  resolves Tailwind conflicts with a shared tailwind-merge instance that knows Akan's semantic
  *  color tokens. clsx-style object syntax (`{ x: cond }`) is not supported — write `cond && "x"`. */

package/types/client/csrTypes.d.ts

@@ -428,6 +428,7 @@ export interface FrameLayoutState {
     keyboard: KeyboardFrameState;
     contentViewport: FrameContentViewportState;
     keyboardAccessory: KeyboardAccessoryFrameState;
+    contentAnchor?: "bottom";
     platformProfile: FramePlatformProfile;
     zIndex: FrameLayerZIndex;
     pageStateByPath: Map<string, PageState>;
@@ -436,6 +437,7 @@ export interface FrameSlotRegistration {
     scope?: FrameSlotScope;
     type: FrameSlotType;
     role?: FrameSlotRole;
+    contentAnchor?: "bottom";
     height?: number;
     estimatedHeight?: number;
     source?: "navbar" | "topInset" | "bottomInset" | "bottomTab" | (string & {});

package/types/ui/Dropdown.d.ts

@@ -1,4 +1,6 @@
 import { type ReactNode } from "react";
+/** Put this on a menu item that runs its own interaction (a switch, a copy button) to keep the menu open. */
+export declare const DROPDOWN_KEEP_OPEN_ATTR = "data-dropdown-keep-open";
 export interface DropdownProps {
     /** Button/trigger content. */
     value: ReactNode;

package/types/ui/Layout/BottomInset.d.ts

@@ -4,10 +4,11 @@ export interface BottomInsetProps {
     className?: string;
     children: ReactNode;
     keyboardSticky?: boolean;
+    contentAnchor?: "bottom";
     role?: "bottomChrome" | "keyboardAccessory";
     estimatedHeight?: number;
     frameScope?: FrameSlotRegistration["scope"];
     frameSource?: FrameSlotRegistration["source"];
     frameCache?: boolean;
 }
-export declare const BottomInset: ({ className, children, keyboardSticky, role, estimatedHeight, frameScope, frameSource, frameCache, }: BottomInsetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomInset: ({ className, children, keyboardSticky, contentAnchor, role, estimatedHeight, frameScope, frameSource, frameCache, }: BottomInsetProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Layout/index.d.ts

@@ -4,7 +4,7 @@ export declare const Layout: {
     Navbar: ({ back, className, height, children, title, left, right }: import("./Navbar.d.ts").NavbarProps) => import("react/jsx-runtime").JSX.Element;
     TopInset: ({ className, children, estimatedHeight }: import("./TopInset.d.ts").TopInsetProps) => import("react/jsx-runtime").JSX.Element;
     BottomTab: ({ className, tabs, height }: import("./BottomTab.d.ts").BottomTabProps) => import("react/jsx-runtime").JSX.Element;
-    BottomInset: ({ className, children, keyboardSticky, role, estimatedHeight, frameScope, frameSource, frameCache, }: import("./BottomInset.d.ts").BottomInsetProps) => import("react/jsx-runtime").JSX.Element;
+    BottomInset: ({ className, children, keyboardSticky, contentAnchor, role, estimatedHeight, frameScope, frameSource, frameCache, }: import("./BottomInset.d.ts").BottomInsetProps) => import("react/jsx-runtime").JSX.Element;
     Template: ({ className, children }: import("./Template.d.ts").TemplateProps) => import("react/jsx-runtime").JSX.Element;
     Unit: ({ className, children, href }: import("./Unit.d.ts").UnitProps) => import("react/jsx-runtime").JSX.Element;
     View: ({ className, children }: import("./View.d.ts").ViewProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Signal/style.d.ts

@@ -11,4 +11,4 @@ export declare const signalUi: {
 export declare const getEndpointBadgeClassName: (type: string) => string;
 export declare const getGuardBadgeClassName: (guard: string) => string;
 export declare const getStatusBadgeClassName: (status: string) => string;
-export declare const getStatusTextareaClassName: (status: string) => "" | "pointer-events-none opacity-50" | "border-destructive text-destructive" | "border-primary";
+export declare const getStatusTextareaClassName: (status: string) => "" | "border-primary" | "pointer-events-none opacity-50" | "border-destructive text-destructive";

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

@@ -16,7 +16,7 @@ import type { ModalProps } from "../Modal.d.ts";
 import type { PaginationProps } from "../Pagination.d.ts";
 import type { PopconfirmProps } from "../Popconfirm.d.ts";
 import type { ItemProps as RadioItemProps, RadioProps } from "../Radio.d.ts";
-import type { BadgeVariants, ButtonVariants } from "../recipe.d.ts";
+import type { BadgeVariants, ButtonVariants, InputSurfaceVariants } from "../recipe.d.ts";
 import type { SelectProps } from "../Select.d.ts";
 import type { TableProps } from "../Table.d.ts";
 import type { MultiProps as ToggleSelectMultiProps, ToggleSelectProps } from "../ToggleSelect.d.ts";
@@ -75,11 +75,21 @@ export type AkanModalComponent = AkanUiOverrides["Modal"];
  * manifest: `override({ recipes: { button: neonButtonRecipe } })`. A recipe swap changes
  * only the className factory — the component's structure/behavior (async states, focus,
  * a11y) is untouched. Each replacement must accept the framework recipe's full variant
- * contract, so every call site keeps working.
+ * contract, so every call site keeps working (a replacement with *extra* optional axes is
+ * assignable — contravariance — but those axes are only reachable from code that knows the
+ * replacement's own type).
+ *
+ * Scope: a recipe slot is a **client-side, route-scoped restyle**. It reaches framework
+ * client components, which resolve through `useUiRecipe(...)`. It never reaches a raw
+ * `xRecipe(...)` call in app JSX (statically imported — no context), nor server components
+ * (`Unit`/`View`), which intentionally render the canonical framework recipe. Extending the
+ * *vocabulary* is not this slot's job: add the axis to the framework recipe, or author an
+ * app recipe in `apps/<app>/ui/Recipe/`.
  */
 export interface AkanUiRecipes {
     button: (variants?: ButtonVariants, className?: ClassValue) => string;
     badge: (variants?: BadgeVariants, className?: ClassValue) => string;
+    input: (variants?: InputSurfaceVariants, className?: ClassValue) => string;
 }
 /** Shape of an `_overrides.tsx` manifest: component slots plus an optional recipe-slot map. */
 export type AkanUiOverrideManifest = Partial<AkanUiOverrides> & {

package/types/ui/index.d.ts

@@ -12,7 +12,7 @@ export { DatePicker } from "./DatePicker.d.ts";
 export { Dialog } from "./Dialog.d.ts";
 export { DragAction } from "./DragAction.d.ts";
 export { DraggableList } from "./DraggableList.d.ts";
-export { Dropdown } from "./Dropdown.d.ts";
+export { DROPDOWN_KEEP_OPEN_ATTR, Dropdown } from "./Dropdown.d.ts";
 export { Empty } from "./Empty.d.ts";
 export { Field } from "./Field.d.ts";
 export { FontFace } from "./FontFace.d.ts";
@@ -29,6 +29,7 @@ export { Modal } from "./Modal.d.ts";
 export { Model } from "./Model.d.ts";
 export { More } from "./More.d.ts";
 export { ObjectId } from "./ObjectId.d.ts";
+export { isOwnOverlayClick, OVERLAY_LAYER_ATTR, OverlayOwnerProvider, useOverlayLayerProps, useOverlayScope, } from "./overlayLayer.d.ts";
 export { Pagination } from "./Pagination.d.ts";
 export { Popconfirm } from "./Popconfirm.d.ts";
 export { Portal } from "./Portal.d.ts";

package/types/ui/overlayLayer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Overlay surfaces render through `createPortal(document.body)`, so they leave the DOM subtree of the
+ * component that opened them, and a dismiss check asking `ref.current.contains(target)` reads every
+ * click inside a dialog it opened *itself* as an outside click.
+ *
+ * React context reaches through a portal where the DOM does not, so an overlay can read which
+ * dismissable scope rendered it and stamp that owner on the roots it portals out. A scope then
+ * recognises its own overlays exactly, instead of guessing from how close a dialog happens to be.
+ */
+export declare const OVERLAY_LAYER_ATTR = "data-akan-overlay";
+/** Wrap the content a dismissable container owns, with the scope from {@link useOverlayScope}. */
+export declare const OverlayOwnerProvider: import("react").Provider<string>;
+/** Scope a dismissable container hands to its content. Nests as a `parent/child` path. */
+export declare const useOverlayScope: (id: string) => string;
+/** Props an overlay spreads onto every root it portals out of its own tree. */
+export declare const useOverlayLayerProps: () => {
+    "data-akan-overlay": string;
+};
+/**
+ * True when the click landed in an overlay that `scope` — or a scope nested inside it — rendered.
+ * An overlay nobody owns, and one owned by an unrelated scope, both read as an ordinary outside
+ * click, so a menu does not linger behind a dialog it has nothing to do with.
+ */
+export declare const isOwnOverlayClick: (target: EventTarget | null, scope: string) => boolean;

package/types/ui/recipe/badgeRecipe.d.ts

@@ -1,11 +1,15 @@
-/** 뱃지 look — 시맨틱 variant. `<Badge>` 가 소비하며, recipes.badge 슬롯으로 교체 가능. */
+/** 뱃지 look — 시맨틱 variant × size, outline 플래그는 색을 유지한 외곽선 스타일. `<Badge>` 가 소비하며, recipes.badge 슬롯으로 교체 가능. */
 export declare const badgeRecipe: (variants?: Omit<({
-    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "outline" | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | undefined;
+    outline?: boolean | undefined;
+    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "neutral" | "outline" | undefined;
 } & {
     class?: import("tailwind-variants").ClassValue;
     className?: never;
 }) | ({
-    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "outline" | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | undefined;
+    outline?: boolean | undefined;
+    variant?: "default" | "error" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "neutral" | "outline" | undefined;
 } & {
     class?: never;
     className?: import("tailwind-variants").ClassValue;

package/types/ui/recipe/buttonRecipe.d.ts

@@ -1,13 +1,17 @@
-/** 버튼 look — 시맨틱 variant × size. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
+/** 버튼 look — 시맨틱 variant × size × shape, outline 플래그는 색을 유지한 외곽선 스타일. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
 export declare const buttonRecipe: (variants?: Omit<({
     size?: "lg" | "md" | "sm" | "xs" | "icon" | undefined;
-    variant?: "link" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | undefined;
+    outline?: boolean | undefined;
+    variant?: "link" | "default" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "neutral" | "outline" | "ghost" | undefined;
+    shape?: "default" | "circle" | "square" | undefined;
 } & {
     class?: import("tailwind-variants").ClassValue;
     className?: never;
 }) | ({
     size?: "lg" | "md" | "sm" | "xs" | "icon" | undefined;
-    variant?: "link" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "outline" | "ghost" | undefined;
+    outline?: boolean | undefined;
+    variant?: "link" | "default" | "info" | "warning" | "success" | "primary" | "secondary" | "accent" | "destructive" | "neutral" | "outline" | "ghost" | undefined;
+    shape?: "default" | "circle" | "square" | undefined;
 } & {
     class?: never;
     className?: import("tailwind-variants").ClassValue;

package/types/ui/recipe/inputRecipe.d.ts

@@ -1,11 +1,15 @@
-/** 입력 표면 look — Input/TextArea 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area)을 고른다. */
+/** 입력 표면 look — Input/TextArea/Select 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area), tone 으로 강조/오류 상태를 고른다. */
 export declare const inputRecipe: (variants?: Omit<({
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     kind?: "field" | "area" | undefined;
+    tone?: "default" | "error" | "primary" | undefined;
 } & {
     class?: import("tailwind-variants").ClassValue;
     className?: never;
 }) | ({
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     kind?: "field" | "area" | undefined;
+    tone?: "default" | "error" | "primary" | undefined;
 } & {
     class?: never;
     className?: import("tailwind-variants").ClassValue;

package/types/webkit/index.d.ts

@@ -8,6 +8,7 @@ export { useCodepush } from "./useCodepush.d.ts";
 export { useContact } from "./useContact.d.ts";
 export { useCsrValues } from "./useCsrValues.d.ts";
 export { useDebounce } from "./useDebounce.d.ts";
+export { useEscapeKey } from "./useEscapeKey.d.ts";
 export { useFetch, useFetchFn } from "./useFetch.d.ts";
 export { useGeoLocation } from "./useGeoLocation.d.ts";
 export { useHistory } from "./useHistory.d.ts";

package/types/webkit/lazy.d.ts

@@ -1,6 +1,18 @@
 import type { ReactNode } from "react";
+/**
+ * `suspense` puts a Suspense boundary around the lazy component, so a chunk that resolves *after* the
+ * page is painted — a modal body, a dropdown menu — suspends only itself. Without one the suspension
+ * travels up to the nearest boundary, which is the route (`server/routeElementComposer.tsx`), and the
+ * whole page repaints as its loading fallback on the first open.
+ *
+ * It is opt-in rather than the default because a boundary also changes server rendering: under the
+ * default `renderMode: "stream"` the boundary's subtree leaves the shell as `loading` and arrives later
+ * in the stream. That is fine for an interaction shell and wrong for a page body, which SEO snapshots,
+ * prerendering and pre-hydration E2E read out of the shell.
+ */
 type LazyOption = {
     ssr?: boolean;
+    suspense?: boolean;
     loading?: () => ReactNode;
 };
 type LoadedOf<Loaded> = Loaded extends {

package/types/webkit/useCsrValues.d.ts

@@ -1,8 +1,8 @@
-import { type NavigationIntent, type PathRoute, type RouteGuide, type RouterInstance, type TransitionType } from "akanjs/client";
+import { type NavigationIntent, type PageTransition, type PathRoute, type RouteGuide, type RouterInstance, type TransitionType } from "akanjs/client";
 export declare const useCsrValues: (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]) => {
+    page: PageTransition | null;
     topSafeArea: import("akanjs/client").SafeAreaTransition | null;
-    page: import("akanjs/client").PageTransition | null;
-    prevPage: import("akanjs/client").PageTransition | null;
+    prevPage: PageTransition | null;
     topInset: import("akanjs/client").ContainerTransition | null;
     bottomInset: import("akanjs/client").ContainerTransition | null;
     topLeftAction: import("akanjs/client").ContainerTransition | null;

package/types/webkit/useEscapeKey.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Close `onEscape` on Escape while `active`, but only while this surface is the topmost active one.
+ * The callback is read through a ref, so a fresh closure per render does not reshuffle the stack.
+ */
+export declare const useEscapeKey: (active: boolean, onEscape: () => void) => void;

package/types/webkit/useFrameRuntime.d.ts

@@ -4,7 +4,10 @@ export type FrameSlotBucket = "active" | "pending";
 export type FrameSlotMapByBucket = Record<FrameSlotBucket, FrameSlotMap>;
 export declare const PENDING_FRAME_READY_TIMEOUT_MS = 80;
 export declare const PENDING_FRAME_READY_MAX_TIMEOUT_MS = 120;
-export declare const KEYBOARD_FALLBACK_ANIMATION_DURATION_MS = 285;
+export declare const KEYBOARD_SHOW_ANIMATION_DURATION_MS = 420;
+export declare const KEYBOARD_HIDE_ANIMATION_DURATION_MS = 90;
+export declare const KEYBOARD_SHOW_ANIMATION_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+export declare const KEYBOARD_HIDE_ANIMATION_EASING = "cubic-bezier(0.7, 0, 0.84, 0)";
 export declare const FRAME_Z_INDEX: {
     readonly page: 10;
     readonly previousPage: 0;
@@ -39,6 +42,7 @@ export declare function useFrameViewport(): {
 export declare function getKeyboardAccessorySlots(path: string, frameSlots: FrameSlotMap): FrameSlotRegistration[];
 export declare function resolveKeyboardAccessoryHeight(path: string, frameSlots: FrameSlotMap): number;
 export declare function hasKeyboardStickySlot(path: string, frameSlots: FrameSlotMap): boolean;
+export declare function hasBottomAnchoredKeyboardSlot(path: string, frameSlots: FrameSlotMap): boolean;
 export declare function resolveKeyboardFrame({ keyboardHeight, bottomSafeArea, visualViewportKeyboardHeight, platformProfile, sticky, freeze, }: {
     keyboardHeight: number;
     bottomSafeArea: number;
@@ -57,6 +61,7 @@ export declare function useKeyboardFrame({ bottomSafeArea, sticky, viewport, pla
     bottomSafeArea: number;
     sticky: boolean;
     viewport: {
+        height: number;
         visualHeight: number;
         visualOffsetTop: number;
     };

package/ui/Badge.tsx

@@ -7,10 +7,10 @@ export { badgeRecipe, type BadgeVariants };
 
 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

@@ -61,6 +61,8 @@ const DefaultButton = <Result = unknown>({
   className,
   variant,
   size,
+  shape,
+  outline,
   type = "button",
   loadingMode = "hold",
   showError = true,
@@ -84,7 +86,7 @@ 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),
         )}

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/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}

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}