akanjs 2.3.13-rc.3 → 2.4.0-rc.0

package/client/csrTypes.ts

@@ -16,6 +16,20 @@ export type PageSafeAreaConfig =
       bottom?: boolean;
       android?: "auto" | "edge-to-edge" | "none";
     };
+/**
+ * Server-render strategy for the initial full-document SSR pass.
+ * - `"stream"` (default): flush the shell — including any `Loading` Suspense
+ *   fallback — as soon as it is ready, then stream the resolved page. Redirects
+ *   decided in the shell still become real HTTP redirects; redirects thrown
+ *   inside suspended content degrade to soft (client) redirects.
+ * - `"block"`: buffer the whole document until every Suspense boundary resolves
+ *   before sending a byte. The `Loading` fallback never reaches the browser, but
+ *   a non-redirect error thrown in slow content can still yield a clean error
+ *   page. Use only for routes that need that guarantee and do not care about SEO
+ *   or first-paint of the fallback.
+ */
+export type SsrRenderMode = "stream" | "block";
+
 /** Per-page CSR configuration for transition, safe-area, and gesture behavior. */
 export interface PageConfig {
   transition?: TransitionType;
@@ -26,6 +40,8 @@ export interface PageConfig {
   bottomInset?: number | boolean;
   gesture?: boolean;
   cache?: boolean;
+  /** Initial full-document SSR strategy. Defaults to `"stream"`. */
+  ssr?: SsrRenderMode;
   /**
    * Opt in to guarded RSC page suffix commits when the page does not require
    * head/metadata updates and the retained route chain head is invariant for
@@ -44,6 +60,7 @@ export interface CsrState {
   bottomInset: number;
   gesture: boolean;
   cache: boolean;
+  ssr: SsrRenderMode;
   topSafeAreaColor?: string;
   bottomSafeAreaColor?: string;
 }
@@ -99,6 +116,9 @@ export interface RouteRender {
   render: LayoutRender | PageRender;
   isAsync?: boolean;
   Loading?: LayoutLoadingRender | PageLoadingRender;
+  /** Loads the module and populates `Loading` without running `render`/`resolveHead`.
+   * Used by the patch (suffix) compose path, which never calls `resolveHead`. */
+  resolveLoading?: () => void | Promise<void>;
   NotFound?: LayoutNotFoundRender;
   Error?: LayoutErrorRender;
   resolveNotFound?: () => PromiseOrObject<LayoutNotFoundRender | undefined>;
@@ -242,6 +262,7 @@ export const defaultPageState: PageState = {
   bottomInset: 0,
   gesture: true,
   cache: false,
+  ssr: "stream",
   topSafeAreaColor: "var(--color-base-100, Canvas)",
   bottomSafeAreaColor: "var(--color-base-100, Canvas)",
 };

package/client/frameConfig.ts

@@ -1,4 +1,4 @@
-import type { PageConfig, PageSafeAreaConfig, PageState, TransitionType } from "./csrTypes";
+import type { PageConfig, PageSafeAreaConfig, PageState, SsrRenderMode, TransitionType } from "./csrTypes";
 
 export type DevicePlatform = "ios" | "android" | "web" | (string & {});
 export type SafeAreaInsets = { top: number; bottom: number };
@@ -19,11 +19,13 @@ const pageConfigKeys = new Set<keyof PageConfig>([
   "bottomInset",
   "gesture",
   "cache",
+  "ssr",
   "rscPatchHeadSafe",
   "topSafeAreaColor",
   "bottomSafeAreaColor",
 ]);
 const transitionTypes = new Set<TransitionType>(["none", "fade", "bottomUp", "stack", "scaleOut"]);
+const ssrRenderModes = new Set<SsrRenderMode>(["stream", "block"]);
 const DEFAULT_BOOLEAN_INSET = 48;
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
@@ -43,6 +45,9 @@ export function validatePageConfig(routeKey: string, config?: PageConfig) {
   if (pageConfig.transition !== undefined && !transitionTypes.has(pageConfig.transition)) {
     throw new Error(`[route-convention] unsupported pageConfig.transition "${pageConfig.transition}" in ${routeKey}`);
   }
+  if (pageConfig.ssr !== undefined && !ssrRenderModes.has(pageConfig.ssr)) {
+    throw new Error(`[route-convention] unsupported pageConfig.ssr "${pageConfig.ssr}" in ${routeKey}`);
+  }
   if (pageConfig.topInset !== undefined && !isValidInsetValue(pageConfig.topInset)) {
     throw new Error(
       `[route-convention] pageConfig.topInset in ${routeKey} must be a boolean or non-negative px number.`,
@@ -141,6 +146,7 @@ export function resolvePageState({
         ? false
         : (config.gesture ?? false),
     cache: config.cache ?? false,
+    ssr: config.ssr ?? "stream",
     topSafeAreaColor: config.topSafeAreaColor ?? "var(--color-base-100, Canvas)",
     bottomSafeAreaColor: config.bottomSafeAreaColor ?? "var(--color-base-100, Canvas)",
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.3.13-rc.3",
+  "version": "2.4.0-rc.0",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -195,6 +195,7 @@
     "bullmq": "^5.76.10",
     "capacitor-plugin-safe-area": "^5.0.0",
     "chance": "^1.1.13",
+    "cordova-plugin-purchase": "^13.16.0",
     "croner": "^10.0.1",
     "daisyui": "5.5.23",
     "firebase": "^12.13.0",
@@ -279,6 +280,9 @@
     "chance": {
       "optional": true
     },
+    "cordova-plugin-purchase": {
+      "optional": true
+    },
     "croner": {
       "optional": true
     },

package/server/routeElementComposer.tsx

@@ -2,14 +2,14 @@ import type {
   Head,
   LayoutErrorRender,
   LayoutFallbackRoute,
-  PageConfig,
   LayoutNotFoundRender,
+  PageConfig,
   PathRoute,
   ResolvedHead,
   RouteRender,
 } from "akanjs/client";
-import { getExplicitPageConfigKeys, resolvePageState } from "../client/frameConfig";
 import { Children, cloneElement, isValidElement, type ReactElement, type ReactNode, Suspense } from "react";
+import { getExplicitPageConfigKeys, resolvePageState } from "../client/frameConfig";
 import { resolveHeadResult } from "./metadata";
 import { type AkanRouteSegmentState, createAkanRouteSegments, createAkanSegmentOutletKey } from "./routeState";
 import { isAkanRscPartialCommitEnabled } from "./rscPartialCommit";
@@ -61,16 +61,19 @@ export class RouteElementComposer {
     pathRoute,
     params,
     searchParams,
+    navKey,
   }: {
     pathRoute: PathRoute;
     params: Record<string, string>;
     searchParams: Record<string, string | string[]>;
+    navKey?: string;
   }): ReactNode {
     return RouteElementComposer.composeRenders({
       renders: RouteElementComposer.#getRenderStack(pathRoute),
       segments: isAkanRscPartialCommitEnabled() ? createAkanRouteSegments(pathRoute) : undefined,
       params,
       searchParams,
+      navKey,
     });
   }
 
@@ -79,11 +82,13 @@ export class RouteElementComposer {
     params,
     searchParams,
     patchStartIndex,
+    navKey,
   }: {
     pathRoute: PathRoute;
     params: Record<string, string>;
     searchParams: Record<string, string | string[]>;
     patchStartIndex: number;
+    navKey?: string;
   }): ReactNode | null {
     const renders = RouteElementComposer.#getRenderStack(pathRoute);
     if (!Number.isInteger(patchStartIndex) || patchStartIndex < 0 || patchStartIndex >= renders.length) return null;
@@ -91,9 +96,18 @@ export class RouteElementComposer {
       renders: renders.slice(patchStartIndex),
       params,
       searchParams,
+      navKey,
     });
   }
 
+  static async resolveSuffixLoadings(pathRoute: PathRoute, patchStartIndex: number): Promise<void> {
+    const renders = RouteElementComposer.#getRenderStack(pathRoute).slice(Math.max(patchStartIndex, 0));
+    
+    await Promise.all(
+      renders.map((routeRender) => Promise.resolve(routeRender?.resolveLoading?.()).catch(() => undefined)),
+    );
+  }
+
   static async resolveHead({
     pathRoute,
     params,
@@ -170,18 +184,23 @@ export class RouteElementComposer {
     segments,
     params,
     searchParams,
+    navKey,
   }: {
     renders: RouteRender[];
     segments?: AkanRouteSegmentState[];
     params: Record<string, string>;
     searchParams: Record<string, string | string[]>;
+    navKey?: string;
   }): ReactNode {
     let element: ReactNode = null;
     for (let i = renders.length - 1; i >= 0; i--) {
       const routeRender = renders[i];
       if (!routeRender) continue;
+      const loadingFallback = RouteElementComposer.#composeLoadingFallback(renders.slice(i), params);
+      const suspenseKey =
+        navKey && loadingFallback != null && i === renders.length - 1 ? `akan-loading:${navKey}` : undefined;
       element = (
-        <Suspense fallback={RouteElementComposer.#composeLoadingFallback(renders.slice(i), params)}>
+        <Suspense key={suspenseKey} fallback={loadingFallback}>
           <RouteElementComposer.AsyncRender routeRender={routeRender} params={params} searchParams={searchParams}>
             {element}
           </RouteElementComposer.AsyncRender>

package/server/routeTreeBuilder.ts

@@ -34,6 +34,7 @@ export const defaultPageState: PageState = {
   bottomInset: 0,
   gesture: true,
   cache: false,
+  ssr: "stream",
   topSafeAreaColor: "transparent",
   bottomSafeAreaColor: "transparent",
 };
@@ -341,6 +342,10 @@ export class RouteTreeBuilder {
     const loadModule = RouteTreeBuilder.#makeLazyModule(key, kind, loader);
     const routeRender: RouteRender = {
       isAsync: true,
+      resolveLoading: async () => {
+        const mod = await loadModule();
+        routeRender.Loading = mod.Loading as never;
+      },
       render: async (props: LayoutProps | PageProps) => {
         const mod = await loadModule();
         routeRender.Loading = mod.Loading as never;

package/server/rscWorker.tsx

@@ -2,6 +2,7 @@ import type {
   AkanNotFoundError,
   AkanRedirectError,
   LayoutFallbackRoute,
+  PageState,
   PathRoute,
   RedirectStatus,
   ResolvedHead,
@@ -9,6 +10,7 @@ import type {
 import { type AkanI18nConfig, DEFAULT_AKAN_I18N, getBasePathFromPathname, Logger } from "akanjs/common";
 import {
   getRequestDynamicUsage,
+  getRequestFrameState,
   getRequestPolicy,
   getRequestTheme,
   requestStorage,
@@ -525,6 +527,7 @@ export class RscRenderer {
               patchStartSegment: undefined,
               patchHeadSafe: undefined,
               patchHeadSnapshot: undefined,
+              ssrBlocking: cached.ssrBlocking,
             },
             send: (message) => this.#send(message),
             isCancelled: () => this.#cancelledRenderRequests.has(requestId),
@@ -553,9 +556,11 @@ export class RscRenderer {
         else element = await this.#renderNotFound(urlObj);
         const traceCacheKey =
           effectivePatchDecision.status === "patch" ? (patchCacheEntry?.key ?? cacheEntry?.key) : cacheEntry?.key;
+        const ssrBlocking = getRequestFrameState<PageState>()?.ssr === "block";
         const trace: RscTraceMetadata = {
           ...createTraceBase(effectivePatchDecision, traceCacheKey),
           cache: cacheEntry ? "miss" : "bypass",
+          ssrBlocking,
         };
         this.#logger.verbose(`render[${requestId}] starting Flight stream`);
         const result = await this.#renderFlightElement(element, msg.clientManifest ?? this.#clientManifest, {
@@ -597,6 +602,7 @@ export class RscRenderer {
                   routeId,
                   tags: cacheState.tags,
                   theme: getRequestTheme(),
+                  ssrBlocking,
                   cacheState,
                   patch: createCachedRscPatchMetadata({
                     targetRouterState,
@@ -616,6 +622,7 @@ export class RscRenderer {
                   routeId,
                   tags: cacheState.tags,
                   theme: getRequestTheme(),
+                  ssrBlocking,
                   cacheState,
                 },
                 storeTtl,
@@ -1243,6 +1250,7 @@ export class RscRenderer {
       pathRoute,
       params: match.params,
       searchParams,
+      navKey: url.pathname + url.search,
     });
     return (
       <html
@@ -1283,11 +1291,14 @@ export class RscRenderer {
       basePath: this.#getBasePath(url),
     });
     setRequestFrameState(pathRoute.pageState);
+
+    await RouteElementComposer.resolveSuffixLoadings(pathRoute, patchStartIndex);
     return RouteElementComposer.composeSuffix({
       pathRoute,
       params: match.params,
       searchParams,
       patchStartIndex,
+      navKey: url.pathname + url.search,
     });
   }
 

package/server/rscWorkerCache.ts

@@ -16,6 +16,8 @@ export interface CachedRscResult {
   routeId?: string;
   tags?: string[];
   theme?: string;
+  /** Whether the matched route opted into blocking SSR (`pageConfig.ssr: "block"`). */
+  ssrBlocking?: boolean;
   cacheState: RouteCacheRenderState;
   patch?: CachedRscPatchMetadata;
 }

package/server/ssrFromRscRenderer.tsx

@@ -594,12 +594,13 @@ export class SsrFromRscRenderer {
       ? `${SsrFromRscRenderer.#clientBootstrap}\n${input.extraBootstrapInline}`
       : SsrFromRscRenderer.#clientBootstrap;
 
+    const waitForAllReady = input.waitForAllReady || process.env.AKAN_SSR_WAIT_FOR_ALL_READY === "1";
     const renderHtml = async () => {
       const root = await thenable;
       const stream = await renderToReadableStream(root, {
         bootstrapScriptContent: bootstrap,
       });
-      await stream.allReady;
+      if (waitForAllReady) await stream.allReady;
       return stream;
     };
     const requestContext = input.requestStore ?? input.request;

package/server/ssrTypes.ts

@@ -42,6 +42,13 @@ export interface RscTraceMetadata {
   patchHeadSafe?: boolean;
   patchHeadSnapshot?: string;
   routeState?: string;
+  /**
+   * Resolved from the matched route's `pageConfig.ssr === "block"`. Rides the
+   * trace so the host (which never resolves pageConfig itself) can decide
+   * whether the full-document SSR pass buffers until every Suspense boundary
+   * resolves. Absent/`false` means stream the shell first.
+   */
+  ssrBlocking?: boolean;
 }
 
 export interface SsrFromRscInput {
@@ -73,4 +80,11 @@ export interface SsrFromRscInput {
   injectThemeInitScript?: boolean;
   lateControl?: Promise<SsrLateRedirect | null>;
   onCancel?: (reason?: unknown) => void;
+  /**
+   * When true, buffer the whole document until every Suspense boundary resolves
+   * (`stream.allReady`) before emitting a byte, matching `pageConfig.ssr:
+   * "block"`. Defaults to shell-first streaming so `Loading` fallbacks surface.
+   * The `AKAN_SSR_WAIT_FOR_ALL_READY=1` env var forces blocking globally.
+   */
+  waitForAllReady?: boolean;
 }

package/server/webRouter.ts

@@ -578,6 +578,7 @@ export class WebRouter {
             importmap: this.#artifact.vendorMap,
             theme: themeCookieExists ? undefined : (rscResult.theme ?? "system"),
             lateControl: rscResult.lateControl,
+            waitForAllReady: rscResult.trace?.ssrBlocking ?? false,
             onCancel: (reason: unknown) => {
               rscResult.cancel(reason);
             },

package/store/baseSt.ts

@@ -44,6 +44,7 @@ export class BaseStore extends store("base" as const, () => ({
     bottomInset: 0,
     gesture: true,
     cache: false,
+    ssr: "stream",
     topSafeAreaColor: "var(--color-base-100, Canvas)",
     bottomSafeAreaColor: "var(--color-base-100, Canvas)",
   } as PageState,

package/types/client/csrTypes.d.ts

@@ -10,6 +10,19 @@ export type PageSafeAreaConfig = boolean | "top" | "bottom" | {
     bottom?: boolean;
     android?: "auto" | "edge-to-edge" | "none";
 };
+/**
+ * Server-render strategy for the initial full-document SSR pass.
+ * - `"stream"` (default): flush the shell — including any `Loading` Suspense
+ *   fallback — as soon as it is ready, then stream the resolved page. Redirects
+ *   decided in the shell still become real HTTP redirects; redirects thrown
+ *   inside suspended content degrade to soft (client) redirects.
+ * - `"block"`: buffer the whole document until every Suspense boundary resolves
+ *   before sending a byte. The `Loading` fallback never reaches the browser, but
+ *   a non-redirect error thrown in slow content can still yield a clean error
+ *   page. Use only for routes that need that guarantee and do not care about SEO
+ *   or first-paint of the fallback.
+ */
+export type SsrRenderMode = "stream" | "block";
 /** Per-page CSR configuration for transition, safe-area, and gesture behavior. */
 export interface PageConfig {
     transition?: TransitionType;
@@ -20,6 +33,8 @@ export interface PageConfig {
     bottomInset?: number | boolean;
     gesture?: boolean;
     cache?: boolean;
+    /** Initial full-document SSR strategy. Defaults to `"stream"`. */
+    ssr?: SsrRenderMode;
     /**
      * Opt in to guarded RSC page suffix commits when the page does not require
      * head/metadata updates and the retained route chain head is invariant for
@@ -37,6 +52,7 @@ export interface CsrState {
     bottomInset: number;
     gesture: boolean;
     cache: boolean;
+    ssr: SsrRenderMode;
     topSafeAreaColor?: string;
     bottomSafeAreaColor?: string;
 }
@@ -98,6 +114,9 @@ export interface RouteRender {
     render: LayoutRender | PageRender;
     isAsync?: boolean;
     Loading?: LayoutLoadingRender | PageLoadingRender;
+    /** Loads the module and populates `Loading` without running `render`/`resolveHead`.
+     * Used by the patch (suffix) compose path, which never calls `resolveHead`. */
+    resolveLoading?: () => void | Promise<void>;
     NotFound?: LayoutNotFoundRender;
     Error?: LayoutErrorRender;
     resolveNotFound?: () => PromiseOrObject<LayoutNotFoundRender | undefined>;

package/types/server/routeElementComposer.d.ts

@@ -11,17 +11,20 @@ export declare class RouteElementComposer {
         route: PathRoute | LayoutFallbackRoute;
         basePath?: string | null;
     }): Promise<import("akanjs/client").PageState>;
-    static compose({ pathRoute, params, searchParams, }: {
+    static compose({ pathRoute, params, searchParams, navKey, }: {
         pathRoute: PathRoute;
         params: Record<string, string>;
         searchParams: Record<string, string | string[]>;
+        navKey?: string;
     }): ReactNode;
-    static composeSuffix({ pathRoute, params, searchParams, patchStartIndex, }: {
+    static composeSuffix({ pathRoute, params, searchParams, patchStartIndex, navKey, }: {
         pathRoute: PathRoute;
         params: Record<string, string>;
         searchParams: Record<string, string | string[]>;
         patchStartIndex: number;
+        navKey?: string;
     }): ReactNode | null;
+    static resolveSuffixLoadings(pathRoute: PathRoute, patchStartIndex: number): Promise<void>;
     static resolveHead({ pathRoute, params, searchParams, }: {
         pathRoute: PathRoute;
         params: Record<string, string>;
@@ -41,11 +44,12 @@ export declare class RouteElementComposer {
         error?: unknown;
         digest?: string;
     }): Promise<ReactNode | null>;
-    static composeRenders({ renders, segments, params, searchParams, }: {
+    static composeRenders({ renders, segments, params, searchParams, navKey, }: {
         renders: RouteRender[];
         segments?: AkanRouteSegmentState[];
         params: Record<string, string>;
         searchParams: Record<string, string | string[]>;
+        navKey?: string;
     }): ReactNode;
     static renderAsync({ routeRender, children, params, searchParams, }: {
         routeRender: RouteRender;

package/types/server/rscWorkerCache.d.ts

@@ -8,6 +8,8 @@ export interface CachedRscResult {
     routeId?: string;
     tags?: string[];
     theme?: string;
+    /** Whether the matched route opted into blocking SSR (`pageConfig.ssr: "block"`). */
+    ssrBlocking?: boolean;
     cacheState: RouteCacheRenderState;
     patch?: CachedRscPatchMetadata;
 }

package/types/server/ssrTypes.d.ts

@@ -40,6 +40,13 @@ export interface RscTraceMetadata {
     patchHeadSafe?: boolean;
     patchHeadSnapshot?: string;
     routeState?: string;
+    /**
+     * Resolved from the matched route's `pageConfig.ssr === "block"`. Rides the
+     * trace so the host (which never resolves pageConfig itself) can decide
+     * whether the full-document SSR pass buffers until every Suspense boundary
+     * resolves. Absent/`false` means stream the shell first.
+     */
+    ssrBlocking?: boolean;
 }
 export interface SsrFromRscInput {
     request?: Request;
@@ -70,4 +77,11 @@ export interface SsrFromRscInput {
     injectThemeInitScript?: boolean;
     lateControl?: Promise<SsrLateRedirect | null>;
     onCancel?: (reason?: unknown) => void;
+    /**
+     * When true, buffer the whole document until every Suspense boundary resolves
+     * (`stream.allReady`) before emitting a byte, matching `pageConfig.ssr:
+     * "block"`. Defaults to shell-first streaming so `Loading` fallbacks surface.
+     * The `AKAN_SSR_WAIT_FOR_ALL_READY=1` env var forces blocking globally.
+     */
+    waitForAllReady?: boolean;
 }

package/types/ui/Model/LoadView.d.ts

@@ -0,0 +1,10 @@
+import type { ClientView } from "akanjs/fetch";
+interface LoadViewProps<T extends string, Model extends {
+    id: string;
+}> {
+    view: ClientView<T, Model>;
+}
+export default function LoadView<T extends string, Light extends {
+    id: string;
+}>({ view }: LoadViewProps<T, Light>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -8,6 +8,7 @@ export declare const Model: {
     Remove: typeof import("./Remove.d.ts").default;
     RemoveWrapper: typeof import("./RemoveWrapper.d.ts").default;
     LoadInit: typeof import("./LoadInit.d.ts").default;
+    LoadView: typeof import("./LoadView.d.ts").default;
     ViewWrapper: typeof import("./ViewWrapper.d.ts").default;
     ViewEditModal: typeof import("./ViewEditModal.d.ts").default;
     Edit: typeof import("./Edit.d.ts").default;

package/types/ui/Model/index_.d.ts

@@ -7,6 +7,7 @@ export declare const NewWrapper: typeof import("./NewWrapper.d.ts").default;
 export declare const EditWrapper: typeof import("./EditWrapper.d.ts").default;
 export declare const RemoveWrapper: typeof import("./RemoveWrapper.d.ts").default;
 export declare const LoadInit: typeof import("./LoadInit.d.ts").default;
+export declare const LoadView: typeof import("./LoadView.d.ts").default;
 export declare const ViewWrapper: typeof import("./ViewWrapper.d.ts").default;
 export declare const ViewEditModal: typeof import("./ViewEditModal.d.ts").default;
 export declare const Edit: typeof import("./Edit.d.ts").default;

package/types/webkit/index.d.ts

@@ -3,9 +3,13 @@ export { createRobotPage } from "./createRobotPage.d.ts";
 export { createSitemapPage } from "./createSitemapPage.d.ts";
 export { lazy } from "./lazy.d.ts";
 export type * from "./types.d.ts";
+export { useCamera } from "./useCamera.d.ts";
+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 { useFetch, useFetchFn } from "./useFetch.d.ts";
+export { useGeoLocation } from "./useGeoLocation.d.ts";
 export { useHistory } from "./useHistory.d.ts";
 export { useInterval } from "./useInterval.d.ts";
 export { useLocation } from "./useLocation.d.ts";

package/types/webkit/useCamera.d.ts

@@ -0,0 +1,19 @@
+import { type CapacitorPermissionState } from "akanjs/client/capacitor";
+type PermissionStatus = {
+    camera: CapacitorPermissionState;
+    photos: CapacitorPermissionState;
+};
+/** Capacitor camera/photos hook with permission checks and app-settings fallback. */
+export declare const useCamera: () => {
+    permissions: PermissionStatus;
+    getPhoto: (src?: "prompt" | "camera" | "photos") => Promise<{
+        [key: string]: unknown;
+        dataUrl?: string;
+    } | undefined>;
+    pickImage: () => Promise<{
+        [key: string]: unknown;
+        photos: unknown[];
+    }>;
+    checkPermission: (type: "photos" | "camera" | "all") => Promise<void>;
+};
+export {};

package/types/webkit/useCodepush.d.ts

@@ -0,0 +1,16 @@
+import type { ProtoAppInfo, ProtoFile } from "akanjs/constant";
+export declare const useCodepush: ({ serverUrl }: {
+    serverUrl: string;
+}) => {
+    update: boolean;
+    version: string;
+    initialize: () => Promise<void>;
+    checkNewRelease: () => Promise<{
+        release: ProtoAppInfo & {
+            appBuild: string;
+        };
+        bundleFile: ProtoFile;
+    } | undefined>;
+    codepush: () => Promise<void>;
+    statManager: () => Promise<void>;
+};

package/types/webkit/useContact.d.ts

@@ -0,0 +1,11 @@
+import { type CapacitorPermissionState } from "akanjs/client/capacitor";
+type PermissionStatus = {
+    contacts: CapacitorPermissionState;
+};
+/** Capacitor contacts hook with permission checks and contact loading helpers. */
+export declare const useContact: () => {
+    permissions: PermissionStatus;
+    getContacts: () => Promise<unknown[]>;
+    checkPermission: () => Promise<void>;
+};
+export {};

package/types/webkit/useGeoLocation.d.ts

@@ -0,0 +1,8 @@
+/** Capacitor geolocation hook with permission checks and current position lookup. */
+export declare const useGeoLocation: () => {
+    checkPermission: () => Promise<{
+        geolocation: string;
+        coarseLocation: string;
+    }>;
+    getPosition: () => Promise<unknown>;
+};

package/types/webkit/usePurchase.d.ts

@@ -0,0 +1,19 @@
+import "cordova-plugin-purchase/www/store";
+export type PlatformType = "android" | "ios" | "all";
+export interface ProductType {
+    id: string;
+    type: keyof typeof CdvPurchase.ProductType;
+}
+export type CdvProductType = CdvPurchase.ProductType;
+export declare const usePurchase: ({ platform, productInfo, url, onPay, onSubscribe, }: {
+    platform: PlatformType;
+    productInfo: ProductType[];
+    url: string;
+    onPay?: (transaction: CdvPurchase.Transaction) => void | Promise<void>;
+    onSubscribe?: (transaction: CdvPurchase.Transaction) => void | Promise<void>;
+}) => {
+    isLoading: boolean;
+    products: CdvPurchase.Product[];
+    purchaseProduct: (product: CdvPurchase.Product) => Promise<void>;
+    restorePurchases: () => Promise<void>;
+};

package/ui/Model/LoadView.tsx

@@ -0,0 +1,11 @@
+"use client";
+import type { ClientView } from "akanjs/fetch";
+
+import { Load } from "../Load";
+
+interface LoadViewProps<T extends string, Model extends { id: string }> {
+  view: ClientView<T, Model>;
+}
+export default function LoadView<T extends string, Light extends { id: string }>({ view }: LoadViewProps<T, Light>) {
+  return <Load.View view={view} renderView={() => null} loading={null} />;
+}

package/ui/Model/index.ts

@@ -4,6 +4,7 @@ import {
   EditModal,
   EditWrapper,
   LoadInit,
+  LoadView,
   New,
   NewWrapper,
   Remove,
@@ -25,6 +26,7 @@ export const Model = {
   Remove,
   RemoveWrapper,
   LoadInit,
+  LoadView,
   ViewWrapper,
   ViewEditModal,
   Edit,

package/ui/Model/index_.tsx

@@ -9,6 +9,7 @@ export const NewWrapper = lazy(() => import("./NewWrapper"));
 export const EditWrapper = lazy(() => import("./EditWrapper"));
 export const RemoveWrapper = lazy(() => import("./RemoveWrapper"));
 export const LoadInit = lazy(() => import("./LoadInit"));
+export const LoadView = lazy(() => import("./LoadView"));
 export const ViewWrapper = lazy(() => import("./ViewWrapper"));
 export const ViewEditModal = lazy(() => import("./ViewEditModal"));
 export const Edit = lazy(() => import("./Edit"));

package/webkit/index.ts

@@ -3,9 +3,13 @@ export { createRobotPage } from "./createRobotPage";
 export { createSitemapPage } from "./createSitemapPage";
 export { lazy } from "./lazy";
 export type * from "./types";
+export { useCamera } from "./useCamera";
+export { useCodepush } from "./useCodepush";
+export { useContact } from "./useContact";
 export { useCsrValues } from "./useCsrValues";
 export { useDebounce } from "./useDebounce";
 export { useFetch, useFetchFn } from "./useFetch";
+export { useGeoLocation } from "./useGeoLocation";
 export { useHistory } from "./useHistory";
 export { useInterval } from "./useInterval";
 export { useLocation } from "./useLocation";

package/webkit/useCamera.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { Device, isMobileDevice } from "akanjs/client";
+import { type CapacitorPermissionState, loadCapacitorCamera } from "akanjs/client/capacitor";
+import { useEffect, useState } from "react";
+
+type PermissionStatus = {
+  camera: CapacitorPermissionState;
+  photos: CapacitorPermissionState;
+};
+
+/** Capacitor camera/photos hook with permission checks and app-settings fallback. */
+export const useCamera = () => {
+  const [permissions, setPermissions] = useState<PermissionStatus>({ camera: "prompt", photos: "prompt" });
+
+  /**
+   * 최초로 킬 경우 권한은 prompt 상태이다.
+   * prompt 상태일 경우 권한을 요청한다.
+   * 권한이 denied 상태일 경우 설정으로 이동한다.
+   * 이후 state의 permission을 업데이트해야한다.
+   *
+   */
+  const checkPermission = async (type: "photos" | "camera" | "all") => {
+    try {
+      const { Camera } = await loadCapacitorCamera();
+      if (type === "photos") {
+        if (permissions.photos === "prompt") {
+          const { photos } = await Camera.requestPermissions();
+          setPermissions((prev) => ({ ...prev, photos }));
+        } else if (permissions.photos === "denied") {
+          location.assign("app-settings:");
+          return;
+        }
+      } else if (type === "camera") {
+        if (permissions.camera === "prompt") {
+          const { camera } = await Camera.requestPermissions();
+          setPermissions((prev) => ({ ...prev, camera }));
+        } else if (permissions.camera === "denied") {
+          location.assign("app-settings:");
+          return;
+        }
+      } else {
+        if (permissions.camera === "prompt" || permissions.photos === "prompt") {
+          const permissions = await Camera.requestPermissions();
+          setPermissions(permissions);
+        } else if (permissions.camera === "denied" || permissions.photos === "denied") {
+          location.assign("app-settings:");
+          return;
+        }
+      }
+    } catch {
+    }
+  };
+
+  const getPhoto = async (src: "prompt" | "camera" | "photos" = "prompt") => {
+    const { Camera, CameraResultType, CameraSource } = await loadCapacitorCamera();
+    const source =
+      Device.getDevice().info.platform !== "web"
+        ? src === "prompt"
+          ? CameraSource.Prompt
+          : src === "camera"
+            ? CameraSource.Camera
+            : CameraSource.Photos
+        : CameraSource.Photos;
+    const permission = src === "prompt" ? "all" : src === "camera" ? "camera" : "photos";
+    await checkPermission(permission);
+    try {
+      const photo = await Camera.getPhoto({
+        quality: 100,
+        source,
+        allowEditing: false,
+        resultType: CameraResultType.DataUrl,
+        promptLabelHeader: "프로필 사진을 올려주세요",
+        promptLabelPhoto: "앨범에서 선택하기",
+        promptLabelPicture: "사진 찍기",
+        promptLabelCancel: "취소",
+      });
+      return photo;
+    } catch (e) {
+      if (e === "User cancelled photos app") return;
+    }
+  };
+
+  const pickImage = async () => {
+    await checkPermission("photos");
+    const { Camera } = await loadCapacitorCamera();
+    const photo = await Camera.pickImages({
+      quality: 90,
+    });
+
+    return photo;
+  };
+
+  useEffect(() => {
+    void (async () => {
+      if (isMobileDevice()) {
+        const { Camera } = await loadCapacitorCamera();
+        const permissions = await Camera.checkPermissions();
+        setPermissions(permissions);
+      }
+    })();
+  }, []);
+  return { permissions, getPhoto, pickImage, checkPermission };
+};

package/webkit/useCodepush.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { loadCapacitorApp, loadCapacitorDevice, loadCapacitorUpdater } from "akanjs/client/capacitor";
+import { HttpClient, mergeVersion, splitVersion } from "akanjs/common";
+import type { ProtoAppInfo, ProtoFile } from "akanjs/constant";
+import { useState } from "react";
+
+export const useCodepush = ({ serverUrl }: { serverUrl: string }) => {
+  const [update, setUpdate] = useState(false);
+  const [version, setVersion] = useState("");
+
+  const initialize = async () => {
+    const { CapacitorUpdater } = await loadCapacitorUpdater();
+    await CapacitorUpdater.notifyAppReady();
+  };
+  const checkNewRelease = async () => {
+    const [{ App }, { Device }, { CapacitorUpdater }] = await Promise.all([
+      loadCapacitorApp(),
+      loadCapacitorDevice(),
+      loadCapacitorUpdater(),
+    ]);
+    
+    const info = await Device.getInfo();
+    const app = await App.getInfo();
+    const pluginVersion = await CapacitorUpdater.getPluginVersion();
+    const { deviceId } = await CapacitorUpdater.getDeviceId();
+    const { bundle: version, native } = await CapacitorUpdater.current();
+    const builtInversion = await CapacitorUpdater.getBuiltinVersion();
+    const appId = app.id;
+    const platform = info.platform;
+
+    window.alert(
+      `getBuildinVersion:${builtInversion.version}\ncurrent.bundle:${version.version}\ncurrennt.native:${native}`,
+    );
+    /**
+     *  "version_name": "builtin",
+     *   "version_code": "1",
+     *   "app_id": "com.lu.app",
+     *   "plugin_version": "5.6.9",
+     *   "version_build": "1.0",
+     *   "is_prod": true,
+     *   "version_os": "17.0.1",
+     *   "is_emulator": true,
+     *   "custom_id": "",
+     *   "device_id": "C77000B1-7D28-4697-ADE0-74452F47C350",
+     *   "platform": "ios",
+     *   "defaultChannel": ""
+     */
+    const { major, minor, patch } = splitVersion(version.version === "builtin" ? app.version : version.version);
+    const appName = process.env.AKAN_PUBLIC_APP_NAME ?? "";
+
+    const appInfo: ProtoAppInfo = {
+      appId,
+      appName,
+      deviceId: deviceId,
+      platform: platform as "ios" | "android",
+      branch: process.env.AKAN_PUBLIC_ENV ?? "debug",
+      isEmulator: info.isVirtual,
+      major: parseInt(major),
+      minor: parseInt(minor),
+      patch: parseInt(patch),
+      buildNum: app.build, //앱내 빌드시 버전 횟수 모르면 고한테 물어보기
+      versionOs: info.osVersion,
+    };
+
+    const url = serverUrl.replace("lu", "akasys");
+    const httpClient = new HttpClient(url);
+    const release = await httpClient.post<(ProtoAppInfo & { appBuild: string }) | null>("/release/codepush", {
+      data: { ...appInfo },
+    });
+    if (!release) return;
+    const file = await httpClient.get<ProtoFile>(`/file/file/${release.appBuild}`);
+
+    return { release: release, bundleFile: file };
+  };
+
+  const codepush = async () => {
+    
+    const newRelease = await checkNewRelease();
+    if (!newRelease) return;
+    const { release, bundleFile } = newRelease;
+    const { CapacitorUpdater } = await loadCapacitorUpdater();
+    setUpdate(true);
+    const bundle = await CapacitorUpdater.download({
+      url: bundleFile.url,
+      version: mergeVersion(release.major, release.minor, release.patch),
+    });
+    
+    await CapacitorUpdater.set(bundle);
+  };
+  const getVersion = async () => {
+    const { CapacitorUpdater } = await loadCapacitorUpdater();
+    return await CapacitorUpdater.getBuiltinVersion();
+  };
+
+  const statManager = async () => {
+  };
+
+  return { update, version, initialize, checkNewRelease, codepush, statManager };
+};

package/webkit/useContact.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { Device } from "akanjs/client";
+import { type CapacitorPermissionState, loadCapacitorContacts } from "akanjs/client/capacitor";
+import { useEffect, useState } from "react";
+
+type PermissionStatus = {
+  contacts: CapacitorPermissionState;
+};
+
+/** Capacitor contacts hook with permission checks and contact loading helpers. */
+export const useContact = () => {
+  const [permissions, setPermissions] = useState<PermissionStatus>({ contacts: "prompt" });
+
+  /**
+   * 최초로 킬 경우 권한은 prompt 상태이다.
+   * prompt 상태일 경우 권한을 요청한다.
+   * 권한이 denied 상태일 경우 설정으로 이동한다.
+   * 이후 state의 permission을 업데이트해야한다.
+   *
+   */
+  const checkPermission = async () => {
+    try {
+      const { Contacts } = await loadCapacitorContacts();
+      if (permissions.contacts === "prompt") {
+        const { contacts } = await Contacts.requestPermissions();
+        setPermissions((prev) => ({ ...prev, contacts }));
+      } else if (permissions.contacts === "denied") {
+        location.assign("app-settings:");
+        return;
+      }
+    } catch {
+    }
+  };
+
+  const getContacts = async () => {
+    await checkPermission();
+    const { Contacts } = await loadCapacitorContacts();
+    const { contacts } = await Contacts.getContacts({ projection: { name: true, phones: true } });
+    return contacts;
+  };
+
+  useEffect(() => {
+    void (async () => {
+      if (Device.getDevice().info.platform === "web") return;
+      const { Contacts } = await loadCapacitorContacts();
+      const permissions = await Contacts.checkPermissions();
+      setPermissions(permissions);
+    })();
+  }, []);
+
+  return { permissions, getContacts, checkPermission };
+};

package/webkit/useGeoLocation.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { loadCapacitorGeolocation } from "akanjs/client/capacitor";
+
+/** Capacitor geolocation hook with permission checks and current position lookup. */
+export const useGeoLocation = () => {
+  const checkPermission = async (): Promise<{ geolocation: string; coarseLocation: string }> => {
+    const { Geolocation } = await loadCapacitorGeolocation();
+    const { location: geolocation, coarseLocation } = await Geolocation.requestPermissions();
+    return { geolocation, coarseLocation };
+  };
+
+  const getPosition = async () => {
+    const { geolocation, coarseLocation } = await checkPermission();
+    if (geolocation === "denied" || coarseLocation === "denied") {
+      location.assign("app-settings:");
+      return;
+    }
+    const { Geolocation } = await loadCapacitorGeolocation();
+    const coordinates = await Geolocation.getCurrentPosition();
+    return coordinates;
+  };
+
+  return { checkPermission, getPosition };
+};

package/webkit/usePurchase.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import "cordova-plugin-purchase/www/store";
+
+import { loadCapacitorApp } from "akanjs/client/capacitor";
+import { useEffect, useRef, useState } from "react";
+
+export type PlatformType = "android" | "ios" | "all";
+export interface ProductType {
+  id: string;
+  type: keyof typeof CdvPurchase.ProductType;
+}
+
+export type CdvProductType = CdvPurchase.ProductType;
+
+export const usePurchase = ({
+  platform,
+  productInfo,
+  url,
+  onPay,
+  onSubscribe,
+}: {
+  platform: PlatformType;
+  productInfo: ProductType[];
+  url: string;
+  onPay?: (transaction: CdvPurchase.Transaction) => void | Promise<void>;
+  onSubscribe?: (transaction: CdvPurchase.Transaction) => void | Promise<void>;
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const billingRef = useRef<any>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      if (CdvPurchase.store.isReady) {
+        setIsLoading(false);
+
+        return;
+      }
+      const { App } = await loadCapacitorApp();
+      const app = await App.getInfo();
+      if (platform === "all")
+        CdvPurchase.store.register([
+          ...productInfo.map((prouct) => ({
+            id: prouct.id,
+            platform: CdvPurchase.Platform.GOOGLE_PLAY,
+            type: CdvPurchase.ProductType[prouct.type],
+          })),
+          ...productInfo.map((prouct) => ({
+            id: prouct.id,
+            platform: CdvPurchase.Platform.APPLE_APPSTORE,
+            type: CdvPurchase.ProductType[prouct.type],
+          })),
+        ]);
+      else
+        CdvPurchase.store.register(
+          productInfo.map((product) => ({
+            id: product.id,
+            platform: platform === "android" ? CdvPurchase.Platform.GOOGLE_PLAY : CdvPurchase.Platform.APPLE_APPSTORE,
+            type: CdvPurchase.ProductType[product.type],
+          })),
+        );
+
+      await CdvPurchase.store.initialize([
+        { platform: CdvPurchase.Platform.APPLE_APPSTORE, options: { needAppReceipt: false } },
+        { platform: CdvPurchase.Platform.GOOGLE_PLAY },
+      ]);
+      await CdvPurchase.store.update();
+      await CdvPurchase.store.restorePurchases();
+      
+      CdvPurchase.store.validator = (async (
+        request: { id: string; transaction: { id: string; purchaseToken: string; appStoreReceipt: string } },
+        callback: (result: {
+          ok: boolean;
+          data: { id: string; latest_receipt: boolean; transaction: CdvPurchase.Transaction };
+        }) => void,
+      ) => {
+        const transactionId = request.transaction.id; 
+        const transactions = CdvPurchase.store.localTransactions;
+        const verifingTransaction = transactions.find((transaction) => transaction.transactionId === transactionId);
+
+        if (verifingTransaction?.state !== "approved") return;
+
+        const billing = await fetch(`${url}/billing/verifyBilling`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            data: {
+              platform: verifingTransaction.platform === CdvPurchase.Platform.GOOGLE_PLAY ? "google" : "apple",
+              packageName: app.id,
+              productId: verifingTransaction.products[0].id,
+              receipt:
+                verifingTransaction.platform === CdvPurchase.Platform.GOOGLE_PLAY
+                  ? request.transaction.purchaseToken
+                  : request.transaction.appStoreReceipt,
+              transactionId: verifingTransaction.transactionId,
+            },
+          }),
+        });
+
+        billingRef.current = billing.json();
+
+        callback({
+          
+          ok: !!billing,
+          
+          data: { id: request.id, latest_receipt: true, transaction: request.transaction } as any,
+        });
+      }) as any;
+      if (CdvPurchase.store.localReceipts.length > 0) {
+        CdvPurchase.store.localReceipts.forEach((receipt) => {
+          if (receipt.platform === CdvPurchase.Platform.GOOGLE_PLAY)
+            if (receipt.transactions[0].state === CdvPurchase.TransactionState.APPROVED)
+              void receipt.transactions[0].verify();
+            else void receipt.transactions[0].finish();
+        });
+      }
+
+      CdvPurchase.store
+        .when()
+        .approved((transaction) => {
+          void transaction.verify();
+        })
+        .verified((receipt) => {
+          void receipt.finish();
+        })
+        .finished((transaction) => {
+          void inAppPurchase(transaction);
+        });
+      setIsLoading(false);
+    };
+    void init();
+  }, []);
+  const purchaseProduct = async (product: CdvPurchase.Product) => {
+    await product.getOffer()?.order();
+  };
+
+  const restorePurchases = async () => {
+    await CdvPurchase.store.restorePurchases();
+  };
+
+  const inAppPurchase = async (transaction: CdvPurchase.Transaction) => {
+    const product = CdvPurchase.store.get(transaction.products[0].id);
+    if (product?.type === "consumable") await onPay?.(transaction);
+    else await onSubscribe?.(transaction);
+    await transaction.finish();
+  };
+
+  return {
+    isLoading,
+    products: CdvPurchase.store.products,
+    purchaseProduct,
+    restorePurchases,
+  };
+};