akanjs 2.4.2-rc.2 → 3.0.0-alpha.0

package/base/baseEnv.ts

@@ -13,8 +13,6 @@ export interface BaseEnv {
   appName: string;
   environment: Environment;
   operationMode: "local" | "edge" | "cloud" | "module";
-  tunnelUsername: string;
-  tunnelPassword: string;
   databaseMode?: DatabaseMode;
 }
 export type BackendEnv = BaseEnv & {
@@ -87,16 +85,12 @@ export const getEnv = (): ClientEnv => {
   const environment = (process.env.AKAN_PUBLIC_ENV ?? "debug") as BaseEnv["environment"];
   const operationMode = (process.env.AKAN_PUBLIC_OPERATION_MODE ??
     (environment === "local" ? "local" : "cloud")) as BaseEnv["operationMode"];
-  const tunnelUsername = process.env.SSH_TUNNEL_USERNAME ?? "root";
-  const tunnelPassword = process.env.SSH_TUNNEL_PASSWORD ?? repoName;
   const baseEnv: BaseEnv = {
     repoName,
     serveDomain,
     appName,
     environment,
     operationMode,
-    tunnelUsername,
-    tunnelPassword,
     databaseMode: process.env.AKAN_DATABASE_MODE as DatabaseMode | undefined,
   } as const;
   const side = typeof window === "undefined" ? "server" : "client";

package/client/cn.ts

@@ -0,0 +1,52 @@
+import { type ClassNameValue, extendTailwindMerge } from "tailwind-merge";
+
+/**
+ * Akan's semantic color tokens beyond tailwind-merge's built-in Tailwind palette.
+ * Registering them under `theme.color` teaches tailwind-merge that `bg-*`/`text-*`/
+ * `border-*`/… built from these names belong to the same conflict group, so
+ * `cn("bg-primary", "bg-open")` correctly resolves to `"bg-open"` instead of keeping both.
+ */
+export const colorTokens = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "accent",
+  "accent-foreground",
+  "muted",
+  "muted-foreground",
+  "destructive",
+  "destructive-foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "info",
+  "info-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "neutral",
+  "neutral-foreground",
+  "open",
+  "open-foreground",
+  "border",
+  "input",
+  "ring",
+];
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      color: colorTokens,
+    },
+  },
+});
+
+/** 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"`. */
+export const cn = (...inputs: ClassNameValue[]) => twMerge(...inputs);

package/client/csrTypes.ts

@@ -270,8 +270,8 @@ export const defaultPageState: PageState = {
   gesture: true,
   cache: false,
   ssr: "stream",
-  topSafeAreaColor: "var(--color-base-100, Canvas)",
-  bottomSafeAreaColor: "var(--color-base-100, Canvas)",
+  topSafeAreaColor: "var(--color-background, Canvas)",
+  bottomSafeAreaColor: "var(--color-background, Canvas)",
 };
 
 export interface Location {

package/client/frameConfig.ts

@@ -152,8 +152,8 @@ export function resolvePageState({
         : (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)",
+    topSafeAreaColor: config.topSafeAreaColor ?? "var(color-background, Canvas)",
+    bottomSafeAreaColor: config.bottomSafeAreaColor ?? "var(color-background, Canvas)",
   };
 }
 

package/client/index.ts

@@ -1,4 +1,5 @@
 export * from "./clientRuntime";
+export * from "./cn";
 export * from "./cookie";
 export * from "./createFont";
 export * from "./csrTypes";

package/client/types.ts

@@ -1,11 +1,7 @@
 import type { BaseInsight } from "akanjs/constant";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
-import { type ClassValue, clsx as clsxLib } from "clsx";
 import type { ReactElement, ReactNode } from "react";
 
-/** Composes class names with the shared clsx implementation. */
-export const clsx = (...args: ClassValue[]) => clsxLib(...args);
-
 export type ReactFontStyle = "normal" | "italic" | "oblique";
 export type ReactFontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
 export type ReactFontCategory = "monospace" | "sans-serif" | "serif" | "display";

package/common/fileUpload.ts

@@ -10,7 +10,7 @@ interface FileUploadSerializedSignal {
 /** Framework-owned file-upload contract shared by client-safe packages. */
 export const fileUploadContract = {
   fields: { files: "files", metas: "metas", type: "type", parentId: "parentId" },
-  buildMetas: (fileList: FileList) =>
+  buildMetas: (fileList: FileList | File[]) =>
     Array.from(fileList).map((f) => ({ lastModifiedAt: new Date(f.lastModified).toISOString(), size: f.size })),
 } as const;
 

package/common/index.ts

@@ -15,6 +15,7 @@ export { isDayjs } from "./isDayjs";
 export { isEmail } from "./isEmail";
 export { isPhoneNumber } from "./isPhoneNumber";
 export { isQueryEqual } from "./isQueryEqual";
+export { isThenable } from "./isThenable";
 export { isValidDate } from "./isValidDate";
 export { decodeJwtPayload } from "./jwtDecode";
 export { Logger, type LoggerSink, type LoggerSinkEntry, type LogLevel } from "./Logger";

package/common/isThenable.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether a value is awaitable. Duck-typed rather than `instanceof Promise` so a thenable produced by a
+ * different realm or promise implementation still counts — a same-realm check silently misses those.
+ *
+ * `<Button>` uses this to decide whether a click handler is asynchronous: a handler that returns a
+ * thenable gets the pending/success states, a plain one renders as an ordinary button. That makes the
+ * distinction impossible to forget, unlike an explicit flag.
+ */
+export const isThenable = (value: unknown): value is PromiseLike<unknown> =>
+  !!value &&
+  (typeof value === "object" || typeof value === "function") &&
+  typeof Reflect.get(value, "then") === "function";

package/constant/purify.ts

@@ -10,7 +10,6 @@ import {
   ID,
   PrimitiveRegistry,
   type PrimitiveScalar,
-  type Upload,
 } from "akanjs/base";
 import { Logger } from "akanjs/common";
 
@@ -37,15 +36,15 @@ type PurifiedWithObjectToId<T, StateKeys extends keyof GetStateObject<T> = keyof
 } & {
   [K in StateKeys as null extends T[K] ? K : never]?: Purified<T[K]> | undefined;
 };
-export type PurifiedModel<T> = T extends Upload[]
-  ? FileList
-  : T extends (infer S)[]
-    ? PurifiedModel<S>[]
-    : T extends string | number | boolean | Dayjs | File
-      ? T
-      : T extends Map<infer K, infer V>
-        ? Map<K, PurifiedModel<V>>
-        : PurifiedWithObjectToId<T>;
+export type PurifiedModel<T> = T extends (infer S)[]
+  ? PurifiedModel<S>[]
+  : T extends string | number | boolean | Dayjs | File
+    ? T
+    : T extends Map<infer K, infer V>
+      ? Map<K, PurifiedModel<V>>
+      : PurifiedWithObjectToId<T>;
+
+export type UploadableClientArg<T> = [T] extends [File[]] ? File[] | FileList : T;
 
 export type PurifyFunc<Input, _DefaultInput = DefaultOf<Input>, _PurifiedInput = PurifiedModel<Input>> = (
   self: _DefaultInput,

package/fetch/client/fetchClient.ts

@@ -491,7 +491,7 @@ export class FetchClient {
     this.#setHandlerFactory(
       names.addModelFiles,
       () =>
-        (async (fileList: FileList, parentId?: string, option?: FetchPolicy) => {
+        (async (fileList: FileList | File[], parentId?: string, option?: FetchPolicy) => {
           const cap = resolveFileUploadCapability(this.serializedSignal);
           const endpoint = cap ? this.serializedSignal[cap.refName]?.endpoint[cap.endpointKey] : undefined;
           if (!cap || !endpoint)

package/fetch/client/httpClient.ts

@@ -125,6 +125,12 @@ export class HttpClient {
     });
     return `${paramedPath}${searchPath}`;
   }
+
+  static #toUploadValues(argValue: unknown): (Blob | string)[] {
+    if (Array.isArray(argValue)) return argValue as (Blob | string)[];
+    if (typeof FileList !== "undefined" && argValue instanceof FileList) return Array.from(argValue);
+    return [argValue as Blob | string];
+  }
   static makeBody(bodyArgs: SerializedArg[], uploadArgs: SerializedArg[], argMap: Map<string, unknown>) {
     if (uploadArgs.length > 0) {
       const formData = new FormData();
@@ -133,11 +139,9 @@ export class HttpClient {
         if (arg.nullable && (argValue === null || argValue === undefined)) return;
         if (!arg.nullable && (argValue === null || argValue === undefined))
           throw new Error(`Argument ${arg.name} is required`);
-        if (Array.isArray(argValue)) {
-          argValue.forEach((value) => {
-            formData.append(arg.name, value as Blob | string);
-          });
-        } else formData.append(arg.name, argValue as Blob | string);
+        HttpClient.#toUploadValues(argValue).forEach((value) => {
+          formData.append(arg.name, value);
+        });
       });
       bodyArgs.forEach((arg) => {
         const argValue = argMap.get(arg.name);

package/fetch/fetchType/sliceFetch.type.ts

@@ -152,7 +152,7 @@ type AppliedBaseSliceFetchType<
   [K in `get${_CapitalizedRefName}Edit`]: (id: string, option?: FetchPolicy) => Promise<ServerEdit<RefName, Full>>;
 } & {
   [K in `add${_CapitalizedRefName}Files`]: (
-    fileList: FileList,
+    fileList: FileList | File[],
     parentId?: string,
     option?: FetchPolicy,
   ) => Promise<ProtoFile[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.4.2-rc.2",
+  "version": "3.0.0-alpha.0",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -178,10 +178,11 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
     "immer": "^11.1.8",
-    "sharp": "^0.34.5"
+    "sharp": "^0.34.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.3.0"
   },
   "peerDependencies": {
     "@capacitor-community/contacts": "^7.2.0",
@@ -210,7 +211,6 @@
     "chance": "^1.1.13",
     "cordova-plugin-purchase": "^13.16.0",
     "croner": "^10.0.1",
-    "daisyui": "5.5.23",
     "firebase": "^12.13.0",
     "ioredis": "^5.10.1",
     "mermaid": "^11.15.0",
@@ -308,9 +308,6 @@
     "croner": {
       "optional": true
     },
-    "daisyui": {
-      "optional": true
-    },
     "firebase": {
       "optional": true
     },

package/server/akanApp.ts

@@ -1,3 +1,5 @@
+
+
 import { mkdir, readdir, rm } from "node:fs/promises";
 import path from "node:path";
 import { Logger } from "akanjs/common";

package/server/systemPageDocument.tsx

@@ -39,19 +39,19 @@ export const SYSTEM_PAGE_STATUS_COPY = {
 } as const;
 
 const FALLBACK_STYLE = `
-:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-base-content: #ffffff; --akan-base-100: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
-body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-base-100); color: var(--akan-base-content); }
+:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
+body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-background); color: var(--akan-foreground); }
 a { color: inherit; }
-.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-base-100), #111); }
+.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-background), #111); }
 .akan-system-card { width: min(720px, 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(145deg, rgba(42, 42, 42, 0.96), rgba(43, 46, 51, 0.78)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36); padding: clamp(28px, 6vw, 56px); }
 .akan-system-status { margin: 0 0 18px; font-weight: 800; font-size: clamp(4rem, 18vw, 8rem); line-height: 0.85; letter-spacing: -0.08em; color: var(--akan-primary); }
 .akan-system-eyebrow { margin: 0 0 10px; color: var(--akan-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
-.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-base-content); }
+.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-foreground); }
 .akan-system-description { margin: 22px 0 0; max-width: 56ch; color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.75; }
 .akan-system-path { margin: 22px 0 0; overflow-wrap: anywhere; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(26, 26, 26, 0.72); padding: 12px 14px; color: rgba(255, 255, 255, 0.72); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88rem; }
 .akan-system-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
-.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-base-content); padding: 0 18px; font-weight: 800; text-decoration: none; }
-.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-base-content); }
+.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-foreground); padding: 0 18px; font-weight: 800; text-decoration: none; }
+.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-foreground); }
 .akan-system-details { margin-top: 28px; max-height: 260px; overflow: auto; border-radius: 18px; background: rgba(26, 26, 26, 0.82); border: 1px solid rgba(240, 32, 32, 0.22); padding: 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; }
 `;
 
@@ -73,9 +73,9 @@ export function createSystemPageDocument(options: SystemPageOptions): ReactNode
         <style data-akan-system-page>{FALLBACK_STYLE}</style>
       </head>
       <body>
-        <main className="akan-system-page min-h-screen bg-base-100 text-base-content">
+        <main className="akan-system-page min-h-screen bg-background text-foreground">
           <section
-            className="akan-system-card rounded-3xl border border-base-content/10 bg-base-content/4 p-8 shadow-2xl backdrop-blur-xl"
+            className="akan-system-card rounded-3xl border border-foreground/10 bg-foreground/4 p-8 shadow-2xl backdrop-blur-xl"
             aria-labelledby="akan-system-title"
           >
             <p className="akan-system-status text-primary">{copy.status}</p>
@@ -83,15 +83,15 @@ export function createSystemPageDocument(options: SystemPageOptions): ReactNode
             <h1 id="akan-system-title" className="akan-system-title font-black">
               {copy.title}
             </h1>
-            <p className="akan-system-description text-base-content/70">{copy.description}</p>
-            <p className="akan-system-path border border-base-content/10 bg-base-200/50" aria-label="Requested path">
+            <p className="akan-system-description text-foreground/70">{copy.description}</p>
+            <p className="akan-system-path border border-foreground/10 bg-muted/50" aria-label="Requested path">
               {options.pathname}
             </p>
             <div className="akan-system-actions">
-              <a className="akan-system-action btn btn-primary" href={options.homeHref}>
+              <a className="akan-system-action" href={options.homeHref}>
                 {copy.actionLabel}
               </a>
-              <a className="akan-system-action akan-system-secondary btn" href={options.pathname}>
+              <a className="akan-system-action akan-system-secondary" href={options.pathname}>
                 Try again
               </a>
             </div>

package/signal/endpointInfo.ts

@@ -15,6 +15,7 @@ import type {
   ParamFieldType,
   PlainTypeToFieldType,
   PurifiedModel,
+  UploadableClientArg,
 } from "akanjs/constant";
 import type { ServiceModel } from "akanjs/service";
 import type { InternalArgCls } from "./internalArg";
@@ -135,7 +136,7 @@ export class EndpointInfo<
     Arg extends ConstantFieldTypeInput = PlainTypeToFieldType<ExplicitType>,
     Optional extends boolean = false,
     _ArgType = unknown extends ExplicitType ? FieldToValue<Arg> : ExplicitType,
-    _ClientArg = PurifiedModel<_ArgType>,
+    _ClientArg = UploadableClientArg<PurifiedModel<_ArgType>>,
     _ServerArg = DocumentModel<_ArgType>,
   >(name: ArgName, arg: Arg, option?: EndpointArgProps<Optional>) {
     if (this.execFn) throw new Error("Query function is already set");

package/signal/slice.ts

@@ -112,7 +112,7 @@ export function slice<
             _Filter,
             SrvMap<SrvModule>,
             ["query"],
-            [_Query],
+            [query?: _Query | null],
             [],
             [_Query]
           >;

package/signal/sliceInfo.ts

@@ -9,6 +9,7 @@ import type {
   PlainTypeToFieldType,
   PurifiedModel,
   QueryOf,
+  UploadableClientArg,
 } from "akanjs/constant";
 import type { FilterCls, FilterInstance } from "akanjs/document";
 import type { ServiceModel } from "akanjs/service";
@@ -94,7 +95,7 @@ export class SliceInfo<
     Arg extends ConstantFieldTypeInput = PlainTypeToFieldType<ExplicitType>,
     Optional extends boolean = false,
     _ArgType = unknown extends ExplicitType ? FieldToValue<Arg> : ExplicitType,
-    _ClientArg = PurifiedModel<_ArgType>,
+    _ClientArg = UploadableClientArg<PurifiedModel<_ArgType>>,
     _ServerArg = DocumentModel<_ArgType>,
   >(name: ArgName, arg: Arg, option?: EndpointArgProps<Optional>) {
     if (this.execFn) throw new Error("Query function is already set");

package/store/action.ts

@@ -224,7 +224,7 @@ type FormSetter<
       ? K extends string
         ? SetterKey<"upload", K, RefName, _CapitalizedRefName>
         : never
-      : never]: (fileList: FileList, idx?: number) => Promise<void>;
+      : never]: (fileList: FileList | File[], idx?: number) => Promise<void>;
   } & {
     [K in `writeOn${_CapitalizedRefName}`]: (path: string | (string | number)[], value: any) => void;
   };
@@ -376,7 +376,11 @@ export const makeFormSetter = (refName: string, fetch: FetchProxy<any>) => {
         : {}),
       ...(field.isClass && !!fileUploadRefName && ConstantRegistry.getRefName(field.modelRef) === fileUploadRefName
         ? {
-            [namesOfField.uploadFieldOnModel]: async function (this: SetGet, fileList: FileList, index?: number) {
+            [namesOfField.uploadFieldOnModel]: async function (
+              this: SetGet,
+              fileList: FileList | File[],
+              index?: number,
+            ) {
               const form = (this.get() as { [key: string]: any })[names.modelForm] as { [key: string]: any };
               if (!fileList.length) return;
               const files = await (fetch[names.addModelFiles] as (...args: any) => Promise<ProtoFile[]>)(
@@ -476,6 +480,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
     initModel: `init${className}`,
     modelInitList: `${fieldName}InitList`,
     modelInitAt: `${fieldName}InitAt`,
+    modelStaleAt: `${fieldName}StaleAt`,
     refreshModel: `refresh${className}`,
     selectModel: `select${className}`,
     setPageOfModel: `setPageOf${className}`,
@@ -489,6 +494,14 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
     queryArgsOfModel: `queryArgsOf${className}`,
     sortOfModel: `sortOf${className}`,
   };
+  const staleAtOfOtherSlices = (createdSliceName: string) => {
+    const staleAt = new Date();
+    return Object.fromEntries(
+      slices
+        .filter(({ sliceName }) => sliceName !== createdSliceName)
+        .map(({ sliceName }) => [sliceName.replace(names.model, names.modelStaleAt), staleAt]),
+    );
+  };
   const baseAction = {
     [names.createModelInForm]: async function (
       this: SetGet,
@@ -527,6 +540,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
         [namesOfSlice.modelInsight]: newModelInsight,
         [names.modelViewAt]: new Date(),
         [names.modelModal]: modal ?? null,
+        ...staleAtOfOtherSlices(sliceName),
         ...(typeof path === "string" && path ? { [path]: model } : {}),
       });
       await onSuccess?.(model);
@@ -609,6 +623,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
         [namesOfSlice.modelInsight]: newModelInsight,
         [names.modelViewAt]: new Date(),
         [names.modelModal]: modal ?? null,
+        ...staleAtOfOtherSlices(sliceName),
         ...(typeof path === "string" && path ? { [path]: model } : {}),
       });
       await onSuccess?.(model);
@@ -845,6 +860,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
       initModel: SliceName.replace(names.Model, names.initModel),
       modelInitList: SliceName.replace(names.Model, names.modelInitList),
       modelInitAt: SliceName.replace(names.Model, names.modelInitAt),
+      modelStaleAt: SliceName.replace(names.Model, names.modelStaleAt),
       refreshModel: SliceName.replace(names.Model, names.refreshModel),
       selectModel: SliceName.replace(names.Model, names.selectModel),
       setPageOfModel: SliceName.replace(names.Model, names.setPageOfModel),

package/store/baseSt.ts

@@ -45,8 +45,8 @@ export class BaseStore extends store("base" as const, () => ({
     gesture: true,
     cache: false,
     ssr: "stream",
-    topSafeAreaColor: "var(--color-base-100, Canvas)",
-    bottomSafeAreaColor: "var(--color-base-100, Canvas)",
+    topSafeAreaColor: "var(--color-background, Canvas)",
+    bottomSafeAreaColor: "var(--color-background, Canvas)",
   } as PageState,
   devMode: false,
   deviceToken: "" as string,

package/store/state.ts

@@ -23,6 +23,7 @@ export type SliceStateKey =
   | "modelListLoading"
   | "modelInitList"
   | "modelInitAt"
+  | "modelStaleAt"
   | "modelSelection"
   | "lastPageOfModel"
   | "pageOfModel"
@@ -78,6 +79,8 @@ export type SliceState<
   [K in `${RefName}InitList${_CapitalizedSuffix}`]: DataList<Light>;
 } & {
   [K in `${RefName}InitAt${_CapitalizedSuffix}`]: Date;
+} & {
+  [K in `${RefName}StaleAt${_CapitalizedSuffix}`]: Date;
 } & {
   [K in `${RefName}Selection${_CapitalizedSuffix}`]: DataList<Light>;
 } & {
@@ -112,7 +115,9 @@ type DefaultSliceStateFields<
     | `${_RefName}InitList${StoreSliceSuffixCap<SlceCls, Suffix>}`
     | `${_RefName}Selection${StoreSliceSuffixCap<SlceCls, Suffix>}`]: DataList<_Light>;
 } & {
-  [Suffix in _Suffixes as `${_RefName}InitAt${StoreSliceSuffixCap<SlceCls, Suffix>}`]: Date;
+  [Suffix in _Suffixes as
+    | `${_RefName}InitAt${StoreSliceSuffixCap<SlceCls, Suffix>}`
+    | `${_RefName}StaleAt${StoreSliceSuffixCap<SlceCls, Suffix>}`]: Date;
 } & {
   [Suffix in _Suffixes as `${_RefName}ListLoading${StoreSliceSuffixCap<SlceCls, Suffix>}`]: boolean;
 } & {
@@ -182,6 +187,7 @@ export const createSliceState = (refName: string, slice: { [key: string]: Serial
     modelListLoading: `${fieldName}ListLoading`,
     modelInitList: `${fieldName}InitList`,
     modelInitAt: `${fieldName}InitAt`,
+    modelStaleAt: `${fieldName}StaleAt`,
     modelSelection: `${fieldName}Selection`,
     modelInsight: `${fieldName}Insight`,
     lastPageOfModel: `lastPageOf${className}`,
@@ -200,6 +206,7 @@ export const createSliceState = (refName: string, slice: { [key: string]: Serial
       modelListLoading: sliceName.replace(names.model, names.modelListLoading),
       modelInitList: sliceName.replace(names.model, names.modelInitList),
       modelInitAt: sliceName.replace(names.model, names.modelInitAt),
+      modelStaleAt: sliceName.replace(names.model, names.modelStaleAt),
       modelSelection: sliceName.replace(names.model, names.modelSelection),
       modelInsight: sliceName.replace(names.model, names.modelInsight),
       lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
@@ -214,6 +221,7 @@ export const createSliceState = (refName: string, slice: { [key: string]: Serial
       [namesOfSlice.modelListLoading]: true,
       [namesOfSlice.modelInitList]: new DataList(),
       [namesOfSlice.modelInitAt]: new Date(0),
+      [namesOfSlice.modelStaleAt]: new Date(0),
       [namesOfSlice.modelSelection]: new DataList(),
       [namesOfSlice.modelInsight]: new cnst.insight(),
       [namesOfSlice.lastPageOfModel]: 1,

package/store/storeInstance.ts

@@ -263,6 +263,7 @@ export class StoreInstance {
       modelListLoading: `${fieldName}ListLoading`,
       modelInitList: `${fieldName}InitList`,
       modelInitAt: `${fieldName}InitAt`,
+      modelStaleAt: `${fieldName}StaleAt`,
       pageOfModel: `pageOf${className}`,
       limitOfModel: `limitOf${className}`,
       queryArgsOfModel: `queryArgsOf${className}`,
@@ -286,6 +287,7 @@ export class StoreInstance {
       modelList: sliceName.replace(names.model, names.modelList),
       modelListLoading: sliceName.replace(names.model, names.modelListLoading),
       modelInitAt: SliceName.replace(names.Model, names.modelInitAt),
+      modelStaleAt: SliceName.replace(names.Model, names.modelStaleAt),
       lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
       pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
       limitOfModel: SliceName.replace(names.Model, names.limitOfModel),

package/test/sampleOf.ts

@@ -10,7 +10,7 @@ import {
   Upload,
 } from "akanjs/base";
 import { randomPick } from "akanjs/common";
-import type { BaseObject, ConstantCls, ConstantField, DocumentModel, FieldPreset } from "akanjs/constant";
+import type { BaseObject, ConstantCls, ConstantField, DocumentModel, FieldObject, FieldPreset } from "akanjs/constant";
 
 import { sample } from "./sample";
 
@@ -57,8 +57,8 @@ const makeSample = (field: ConstantField): any => {
 export type SampleOf<Model> = DocumentModel<{
   [K in keyof Model as Model[K] extends BaseObject ? never : K]: NonNullable<Model[K]>;
 }>;
-export const sampleOf = <Model>(
-  modelRef: ConstantCls<Model>,
+export const sampleOf = <Model, FieldObj extends FieldObject>(
+  modelRef: ConstantCls<Model, FieldObj>,
 ): DocumentModel<{ [K in keyof Model as Model[K] extends BaseObject ? never : K]: NonNullable<Model[K]> }> => {
   
   return Object.fromEntries(

package/test/signalTestRuntime.ts

@@ -93,8 +93,6 @@ export const setupSignalTestTarget = async <Fetch = FetchProxy>(
       appName: name,
       environment: "testing",
       operationMode: "local",
-      tunnelUsername: process.env.SSH_TUNNEL_USERNAME ?? "username",
-      tunnelPassword: process.env.SSH_TUNNEL_PASSWORD ?? process.env.AKAN_PUBLIC_REPO_NAME ?? "password",
     };
     TestServer.applyProcessEnv(env, resolvedOptions);
 

package/types/base/baseEnv.d.ts

@@ -6,8 +6,6 @@ export interface BaseEnv {
     appName: string;
     environment: Environment;
     operationMode: "local" | "edge" | "cloud" | "module";
-    tunnelUsername: string;
-    tunnelPassword: string;
     databaseMode?: DatabaseMode;
 }
 export type BackendEnv = BaseEnv & {

package/types/client/cn.d.ts

@@ -0,0 +1,12 @@
+import { type ClassNameValue } from "tailwind-merge";
+/**
+ * Akan's semantic color tokens beyond tailwind-merge's built-in Tailwind palette.
+ * Registering them under `theme.color` teaches tailwind-merge that `bg-*`/`text-*`/
+ * `border-*`/… built from these names belong to the same conflict group, so
+ * `cn("bg-primary", "bg-open")` correctly resolves to `"bg-open"` instead of keeping both.
+ */
+export declare const colorTokens: 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"`. */
+export declare const cn: (...inputs: ClassNameValue[]) => string;

package/types/client/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./clientRuntime.d.ts";
+export * from "./cn.d.ts";
 export * from "./cookie.d.ts";
 export * from "./createFont.d.ts";
 export * from "./csrTypes.d.ts";

package/types/client/types.d.ts

@@ -1,9 +1,6 @@
 import type { BaseInsight } from "akanjs/constant";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
-import { type ClassValue } from "clsx";
 import type { ReactElement, ReactNode } from "react";
-/** Composes class names with the shared clsx implementation. */
-export declare const clsx: (...args: ClassValue[]) => string;
 export type ReactFontStyle = "normal" | "italic" | "oblique";
 export type ReactFontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
 export type ReactFontCategory = "monospace" | "sans-serif" | "serif" | "display";

package/types/common/fileUpload.d.ts

@@ -13,7 +13,7 @@ export declare const fileUploadContract: {
         readonly type: "type";
         readonly parentId: "parentId";
     };
-    readonly buildMetas: (fileList: FileList) => {
+    readonly buildMetas: (fileList: FileList | File[]) => {
         lastModifiedAt: string;
         size: number;
     }[];

package/types/common/index.d.ts

@@ -11,6 +11,7 @@ export { isDayjs } from "./isDayjs.d.ts";
 export { isEmail } from "./isEmail.d.ts";
 export { isPhoneNumber } from "./isPhoneNumber.d.ts";
 export { isQueryEqual } from "./isQueryEqual.d.ts";
+export { isThenable } from "./isThenable.d.ts";
 export { isValidDate } from "./isValidDate.d.ts";
 export { decodeJwtPayload } from "./jwtDecode.d.ts";
 export { Logger, type LoggerSink, type LoggerSinkEntry, type LogLevel } from "./Logger.d.ts";