akanjs 3.0.0-beta.2 → 3.0.0-beta.20

package/ui/Link/Anchor.tsx

@@ -0,0 +1,118 @@
+"use client";
+import { getEnv } from "akanjs/base";
+import { cn, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
+import { loadCapacitorBrowser } from "akanjs/client/capacitor";
+import { Logger } from "akanjs/common";
+import { st } from "akanjs/store";
+import type { AnchorHTMLAttributes } from "react";
+
+export type CommonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+  /** Omitted, or with `disabled`, Link renders a plain div around the same children. */
+  href?: string | null;
+  disabled?: boolean;
+  scrollToTop?: boolean;
+  /** Replaces the current history entry instead of pushing a new one. */
+  replace?: boolean;
+  /** Applied while the current path starts with `href`, or equals it with `activeExact`. */
+  activeClassName?: string;
+  activeExact?: boolean;
+  /** @deprecated Has no effect: neither renderer reads it. */
+  noCache?: boolean;
+};
+type AnchorProps = Omit<CommonLinkProps, "href" | "disabled"> & { href: string };
+
+export const CsrLink = ({
+  className,
+  children,
+  href,
+  replace,
+  activeClassName,
+  scrollToTop,
+  activeExact,
+  noCache,
+  ...props
+}: AnchorProps) => {
+  const { prefix } = usePathCtx();
+  const currentPath = st.use.path({ agent: false });
+  const { lang } = usePage();
+  const { path, hash } = getPathInfo(href, lang, prefix ?? "");
+  return (
+    <a
+      className={cn(
+        "cursor-pointer",
+        className,
+        (activeExact ? currentPath === path : currentPath.startsWith(path)) && activeClassName,
+      )}
+      {...props}
+      onClick={(event) => {
+        props.onClick?.(event);
+        if (event.defaultPrevented) return;
+        const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+        const url = href.startsWith("#") ? `${window.location.pathname}#${hash}` : href;
+        if (isExternal)
+          void loadCapacitorBrowser()
+            .then(({ Browser }) => Browser.open({ url: href, presentationStyle: "popover" }))
+            .catch(() => window.open(href, "_blank", "noopener,noreferrer"));
+        else if (replace) router.replace(url, { scrollToTop });
+        else router.push(url, { scrollToTop });
+      }}
+    >
+      {children}
+    </a>
+  );
+};
+
+export const SsrLink = ({
+  className,
+  children,
+  href,
+  scrollToTop,
+  replace,
+  activeClassName,
+  activeExact,
+  noCache,
+  ...props
+}: AnchorProps) => {
+  const pathCtx = usePathCtx();
+  const prefix = pathCtx.prefix ?? "";
+  const { lang, path: pagePath } = usePage();
+  const currentPath = pathCtx.location?.pathRoute?.path ?? getPathInfo(pagePath, lang, prefix).path;
+  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const internalPathInfo = getPathInfo(href, lang, prefix);
+  const requestHref = getEnv().operationMode === "local" ? internalPathInfo.href : getPathInfo(href, lang, "").href;
+  const path = internalPathInfo.path;
+  if (href.startsWith("#"))
+    return (
+      <a className={cn(className, currentPath === path && activeClassName)} href={href} {...props}>
+        {children}
+      </a>
+    );
+  return (
+    <a
+      className={cn(className, (activeExact ? currentPath === path : currentPath.startsWith(path)) && activeClassName)}
+      href={isExternal ? href : requestHref}
+      {...props}
+      onClick={(event) => {
+        props.onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        if (isExternal) return;
+        const rscNavigationReady =
+          typeof (globalThis as typeof globalThis & { __AKAN_RSC_NAVIGATE__?: unknown }).__AKAN_RSC_NAVIGATE__ ===
+          "function";
+        if (!router.isInitialized || !rscNavigationReady) return;
+        event.preventDefault();
+        try {
+          if (replace) router.replace(href, { scrollToTop });
+          else router.push(href, { scrollToTop });
+        } catch (error) {
+          Logger.warn(`SSR link navigation failed, falling back to document navigation: ${String(error)}`);
+          if (replace) window.location.replace(requestHref);
+          else window.location.assign(requestHref);
+        }
+      }}
+    >
+      {children}
+    </a>
+  );
+};

package/ui/Link/index.tsx

@@ -1,19 +1,18 @@
 import { getEnv } from "akanjs/base";
+import type { HTMLAttributes } from "react";
 
-import Back from "./Back";
-import Close from "./Close";
-import CsrLink from "./CsrLink";
-import Lang from "./Lang";
-import SsrLink from "./SsrLink";
-import type { CommonLinkProps } from "./types";
+import { Back, Close, Lang } from "./Action";
+import { type CommonLinkProps, CsrLink, SsrLink } from "./Anchor";
 
 export const Link = ({ className, href, disabled = false, children, ...props }: CommonLinkProps) => {
-  if (disabled || !href)
+  if (disabled || !href) {
+    const { scrollToTop, replace, activeClassName, activeExact, noCache, ...divProps } = props;
     return (
-      <div className={className} {...(props as any)}>
+      <div className={className} {...(divProps as unknown as HTMLAttributes<HTMLDivElement>)}>
         {children}
       </div>
     );
+  }
 
   if (getEnv().renderMode === "csr")
     return (

package/ui/Load/Edit_Client.tsx

@@ -91,44 +91,9 @@ function Render<T extends string, Full extends { id: string }>({
   );
 }
 
-export default function Edit_Client<T extends string, Full extends { id: string }>({
-  className,
-  checkSubmit,
-  modalClassName,
-  type,
-  edit,
-  modal,
-  slice,
-  loading,
-  children,
-  onSubmit,
-  onCancel,
-  submitText,
-  submitClassName,
-  submitOption,
-  renderSubmit,
-  draft,
-}: EditProps<T, Full>) {
-  const props: EditProps<T, Full> = {
-    className,
-    checkSubmit,
-    modalClassName,
-    type,
-    edit,
-    modal,
-    slice,
-    loading,
-    children,
-    onSubmit,
-    onCancel,
-    submitText,
-    submitClassName,
-    submitOption,
-    renderSubmit,
-    draft,
-  };
+export default function Edit_Client<T extends string, Full extends { id: string }>(props: EditProps<T, Full>) {
   return (
-    <Stream of={edit} fallback={loading === undefined ? <Loading.Skeleton active /> : loading}>
+    <Stream of={props.edit} fallback={props.loading === undefined ? <Loading.Skeleton active /> : props.loading}>
       {(serverEdit) => (serverEdit ? <Render {...props} edit={serverEdit} /> : <Empty />)}
     </Stream>
   );

package/ui/Load/Page.tsx

@@ -4,15 +4,13 @@ import type { ReactNode } from "react";
 import { PageCSR } from "./PageCSR";
 
 export interface PageProps<Return> {
-  /** Route component used by the CSR page wrapper. */
+  /** The route component, which keys the CSR loader cache. */
   of: (props: unknown) => ReactNode | null;
-  /** Async data loader shared by SSR and CSR rendering. */
   loader: () => Promise<Return>;
-  /** Render callback invoked with the loaded data. */
   render: (data: Return) => ReactNode;
-  /** Optional loading renderer used while CSR data is pending. */
+  /** Shown while CSR data is pending. */
   loading?: () => ReactNode;
-  /** Disable cached CSR loader results when fresh data is required. */
+  /** Skips the per-path CSR loader cache. */
   noCache?: boolean;
 }
 const Page: <Return>(props: PageProps<Return>) => ReactNode =
@@ -29,7 +27,6 @@ const Page: <Return>(props: PageProps<Return>) => ReactNode =
                 error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
               if (message === "NEXT_REDIRECT") reject(error);
               else {
-                
                 console.error(error);
                 resolve(<div className="text-destructive">{message}</div>);
               }

package/ui/Load/Pagination.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "akanjs/client";
-import { capitalize, type DynamicRecord, lowerlize } from "akanjs/common";
+import { type DynamicRecord, lowerlize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import type { ClientInit, ServerInit } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -9,6 +9,7 @@ import { useRef } from "react";
 
 import { Empty } from "../Empty";
 import { Pagination as Pagn } from "../Pagination";
+import { sliceNamesOf } from "../sliceNamesOf";
 import Stream from "./Stream";
 
 interface PaginationProps<RefName extends string, Light> {
@@ -27,26 +28,10 @@ function Render<RefName extends string, Light>({ className, init, scrollToTop }:
   const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
   const storeGet = st.get as unknown as <T>() => { [key: string]: T };
   const { refName, sliceName } = init;
-  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const modelName = lowerlize(refName);
   const initModelInitAt = (init as DynamicRecord)[`${modelName}InitAt`] as Date;
   const loaded = useRef(storeGet<Date>()[`${refName}InitAt`].getTime() >= initModelInitAt.getTime());
-  const names = {
-    model: modelName,
-    modelInsight: `${modelName}Insight`,
-    modelInitAt: `${modelName}InitAt`,
-    modelObjInsight: `${modelName}ObjInsight`,
-    pageOfModel: `pageOf${ModelName}`,
-    lastPageOfModel: `lastPageOf${ModelName}`,
-    limitOfModel: `limitOf${ModelName}`,
-    setPageOfModel: `setPageOf${ModelName}`,
-  };
-  const namesOfSlice = {
-    modelInsight: sliceName.replace(names.model, names.modelInsight),
-    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
-    lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
-    pageOfModel: sliceName.replace(names.model, names.pageOfModel),
-    setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
-  };
+  const { names, namesOfSlice } = sliceNamesOf(modelName, sliceName);
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;

package/ui/Load/Stream.tsx

@@ -9,18 +9,6 @@ interface StreamProps<Value> {
   children: (value: Value) => ReactNode;
 }
 
-/**
- * Renders whatever a route hands over, awaited or not.
- *
- * A resolved value renders with no boundary, keeping its markup in the SSR shell that prerendering, SEO
- * snapshots and pre-hydration E2E read. A thenable gets a boundary of its own and is read with `use()`, so the
- * server streams the real markup once the data lands and the rest of the page never waits for it; resolving it
- * in an effect instead commits a skeleton the browser then has to re-render.
- *
- * The file carries no `"use client"`, which is what lets one implementation serve both sides: a route keeps its
- * `children` on the server, and `Load.Units` and friends compile it into their own client chunk. `use()` is
- * exported by the `react-server` build too, so the same read works in either graph.
- */
 export default function Stream<Value>({ of, fallback = null, children }: StreamProps<Value>) {
   return isThenable(of) ? (
     <Suspense fallback={fallback}>

package/ui/Load/Units.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { DataList } from "akanjs/base";
 import { cn } from "akanjs/client";
-import { capitalize, type DynamicRecord, isQueryEqual, lowerlize } from "akanjs/common";
+import { type DynamicRecord, isQueryEqual, lowerlize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import { ConstantRegistry, labelOf, withSharedInstances } from "akanjs/constant";
 import type { ClientInit, ServerInit } from "akanjs/fetch";
@@ -12,6 +12,7 @@ import { type ReactNode, type RefObject, useEffect, useMemo, useRef } from "reac
 import { Empty } from "../Empty";
 import { Loading } from "../Loading";
 import { More } from "../More";
+import { sliceNamesOf } from "../sliceNamesOf";
 import Stream from "./Stream";
 
 interface DefaultProps<L extends { id: string }> {
@@ -73,49 +74,9 @@ function Render<RefName extends string, Light extends { id: string }>({
   const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
   const storeGet = st.get as unknown as <T>() => { [key: string]: T };
   const { refName, sliceName } = init;
-  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const modelName = lowerlize(refName);
   const cnst = ConstantRegistry.getDatabase(refName);
-  const names = {
-    model: modelName,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    modelInsight: `${modelName}Insight`,
-    modelInitList: `${modelName}InitList`,
-    modelInitAt: `${modelName}InitAt`,
-    modelStaleAt: `${modelName}StaleAt`,
-    modelObjList: `${modelName}ObjList`,
-    modelObjInsight: `${modelName}ObjInsight`,
-    pageOfModel: `pageOf${ModelName}`,
-    lastPageOfModel: `lastPageOf${ModelName}`,
-    limitOfModel: `limitOf${ModelName}`,
-    hasMoreOfModel: `hasMoreOf${ModelName}`,
-    isCumulativeOfModel: `isCumulativeOf${ModelName}`,
-    queryArgsOfModel: `queryArgsOf${ModelName}`,
-    sortOfModel: `sortOf${ModelName}`,
-    setPageOfModel: `setPageOf${ModelName}`,
-    loadMoreOfModel: `loadMoreOf${ModelName}`,
-    refreshModel: `refresh${ModelName}`,
-    watchLiveModel: `watchLive${ModelName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    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),
-    modelInsight: sliceName.replace(names.model, names.modelInsight),
-    pageOfModel: sliceName.replace(names.model, names.pageOfModel),
-    lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
-    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
-    hasMoreOfModel: sliceName.replace(names.model, names.hasMoreOfModel),
-    isCumulativeOfModel: sliceName.replace(names.model, names.isCumulativeOfModel),
-    queryArgsOfModel: sliceName.replace(names.model, names.queryArgsOfModel),
-    sortOfModel: sliceName.replace(names.model, names.sortOfModel),
-    setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
-    loadMoreOfModel: sliceName.replace(names.model, names.loadMoreOfModel),
-    refreshModel: sliceName.replace(names.model, names.refreshModel),
-    watchLiveModel: sliceName.replace(names.model, names.watchLiveModel),
-  };
+  const { names, namesOfSlice } = sliceNamesOf(modelName, sliceName);
   const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
   const initQueryArgs = (init as DynamicRecord)[names.queryArgsOfModel] as object[];
@@ -131,7 +92,7 @@ function Render<RefName extends string, Light extends { id: string }>({
     isQueryEqual(storeGet<object[]>()[namesOfSlice.queryArgsOfModel], initQueryArgs) &&
     storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= initModelInitAt.getTime();
   if (useCache) loadedQueryArgs.current = initQueryArgs;
-
+  
   const loaded = !!loadedQueryArgs.current && isQueryEqual(loadedQueryArgs.current, initQueryArgs);
 
   const modelInitList = useMemo<DataList<Light>>(() => {
@@ -163,7 +124,7 @@ function Render<RefName extends string, Light extends { id: string }>({
       [namesOfSlice.pageOfModel]: initPageOfModel,
       [namesOfSlice.lastPageOfModel]: initLastPageOfModel,
       [namesOfSlice.limitOfModel]: initLimitOfModel,
-
+      
       [namesOfSlice.hasMoreOfModel]: initHasMoreOfModel,
       [namesOfSlice.isCumulativeOfModel]: false,
       [namesOfSlice.queryArgsOfModel]: initQueryArgsOfModel,
@@ -206,7 +167,6 @@ function Render<RefName extends string, Light extends { id: string }>({
     },
     onPageSelect: (page: number, option?: { scrollToTop?: boolean }) => {
       void storeDo[namesOfSlice.setPageOfModel](page);
-      
       if (option?.scrollToTop !== false) {
         window.parent.postMessage({ type: "pathChange", page }, "*");
         window.scrollTo({ top: 0, behavior: "instant" });
@@ -285,16 +245,7 @@ function Render<RefName extends string, Light extends { id: string }>({
 }
 
 export default function Units<RefName extends string, Light extends { id: string }>({
-  containerRef,
-  className,
-  init,
   noDiv,
-  from,
-  to,
-  loading,
-  empty,
-  renderItem,
-  renderList,
   renderEmpty = noDiv
     ? () => null
     : () => (
@@ -302,51 +253,27 @@ export default function Units<RefName extends string, Light extends { id: string
           <Empty />
         </div>
       ),
-  filter = () => true,
-  sort = (a, b) => 1,
-  reverse,
-  style,
   pagination = true,
-  staleTime,
+  ...props
 }: UnitsProps<RefName, Light>) {
-  const props: UnitsProps<RefName, Light> = {
-    containerRef,
-    className,
-    style,
-    init,
-    noDiv,
-    from,
-    to,
-    loading,
-    empty,
-    renderItem,
-    renderList,
-    renderEmpty,
-    filter,
-    sort,
-    reverse,
-    pagination,
-    staleTime,
-  };
-
   return (
     <Stream
-      of={init}
+      of={props.init}
       fallback={
-        loading === undefined ? (
+        props.loading === undefined ? (
           <div className="flex size-full items-center justify-center">
             <Loading.Skeleton active />
           </div>
         ) : (
-          loading
+          props.loading
         )
       }
     >
       {(serverInit) =>
         serverInit ? (
-          <Render {...props} init={serverInit} />
-        ) : empty !== undefined ? (
-          empty
+          <Render {...props} noDiv={noDiv} renderEmpty={renderEmpty} pagination={pagination} init={serverInit} />
+        ) : props.empty !== undefined ? (
+          props.empty
         ) : renderEmpty ? (
           renderEmpty()
         ) : (

package/ui/Load/View.tsx

@@ -12,25 +12,19 @@ import { Loading } from "../Loading";
 import Stream from "./Stream";
 
 interface DefaultProps<T extends string, M> {
-  /** Additional classes for the default wrapping div. */
   className?: string;
-  /** Render the model directly without the default wrapper div. */
+  /** Renders the model without the default wrapper div. */
   noDiv?: boolean;
-  /** Custom fallback shown while the client view is loading. */
   loading?: ReactNode;
-  /** Placeholder for a view whose model came back empty. */
   empty?: ReactNode;
-  /** Render callback invoked with the loaded full model. */
   renderView: (model: M) => ReactNode;
 }
 
 interface ViewProps<T extends string, Full extends { id: string }> extends DefaultProps<T, Full> {
-  /** Client view promise returned by Akan fetch helpers. */
   view: ClientView<T, Full>;
 }
 
 interface RenderProps<T extends string, Full extends { id: string }> extends DefaultProps<T, Full> {
-  /** Resolved server view payload used to hydrate the client store. */
   view: ServerView<T, Full>;
 }
 
@@ -101,31 +95,20 @@ function Render<T extends string, Full extends { id: string }>({
 }
 
 export default function View<T extends string, Full extends { id: string }>({
-  className,
   view,
-  noDiv,
-  loading,
   empty,
-  renderView,
+  ...props
 }: ViewProps<T, Full>) {
-  
-  const props: ViewProps<T, Full> = {
-    className,
-    view,
-    noDiv,
-    loading,
-    renderView,
-  };
   return (
     <Stream
       of={view}
       fallback={
-        loading === undefined ? (
+        props.loading === undefined ? (
           <div className="size-full">
             <Loading.Skeleton active />
           </div>
         ) : (
-          loading
+          props.loading
         )
       }
     >

package/ui/Loading/ProgressBar.tsx

@@ -9,10 +9,6 @@ export interface ProgressBarProps {
   max: number;
 }
 
-/**
- * A div track rather than a native `<progress>`. `accent-color` themes only the fill; the track keeps the UA
- * grey, which reads as a light bar on a dark theme, and no browser applies the element's radius to the fill.
- */
 export const ProgressBar = ({ className, value, max }: ProgressBarProps) => {
   const percent = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
   const spring = useSpring({ from: { percent: 0 }, to: { percent } });

package/ui/Loading/Skeleton.tsx

@@ -7,6 +7,20 @@ export interface SkeletonProps {
   style?: CSSProperties;
 }
 
+export const Button = ({ className = "", active = true, style }: SkeletonProps) => (
+  <div
+    className={cn("inline-block h-9 w-20 rounded-field bg-muted align-bottom", active && "animate-pulse", className)}
+    style={style}
+  />
+);
+
+export const Input = ({ className = "", active = true, style }: SkeletonProps) => (
+  <div
+    className={cn("inline-block h-9 w-44 rounded-field bg-muted align-bottom", active && "animate-pulse", className)}
+    style={style}
+  />
+);
+
 export const Skeleton = ({ className = "", active = true, style }: SkeletonProps) => (
   <div className={cn("flex w-full flex-col gap-3", active && "animate-pulse", className)} style={style}>
     <div className="h-4 w-2/5 rounded-field bg-muted" />

package/ui/Loading/Spin.tsx

@@ -1,28 +1,57 @@
-import { cn } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import type { ReactNode } from "react";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 export interface SpinProps {
+  className?: string;
+  /** Replaces the built-in icon; the wrapper spins it, so it needs no `animate-spin` of its own. */
   indicator?: ReactNode;
   isCenter?: boolean;
-  className?: string;
-  size?: "sm" | "md" | "lg";
+  /** A named step, or the pixel size the icon is drawn at. */
+  size?: "sm" | "md" | "lg" | number;
+  /** `"current"` inherits the surface's foreground, for a filled surface; a `text-*` in `className` beats any tone. */
+  tone?: "primary" | "current" | "muted";
 }
 
 const sizeClass = { sm: "text-sm", md: "text-xl", lg: "text-3xl" } as const;
+const toneClass = { primary: "text-primary/70", current: "", muted: "text-muted-foreground" } as const;
 
-export const Spin = ({ indicator, isCenter, className, size = "md" }: SpinProps) => (
+export const Spin = ({ className, indicator, isCenter, size = "md", tone = "primary" }: SpinProps) => (
   <div
     className={cn(
       "inline-block py-1",
+      !indicator && toneClass[tone],
+      typeof size === "string" && sizeClass[size],
       isCenter && "absolute inset-0 flex size-full items-center justify-center py-0",
       className,
     )}
+    style={typeof size === "number" ? { fontSize: size } : undefined}
   >
     {indicator ? (
       <span className="[&>svg]:animate-spin">{indicator}</span>
     ) : (
-      <AiOutlineLoading3Quarters className={cn("animate-spin text-primary/70", sizeClass[size])} />
+      <AiOutlineLoading3Quarters className="animate-spin" />
     )}
   </div>
 );
+
+export interface AreaProps {
+  className?: string;
+  indicator?: ReactNode;
+  children?: ReactNode;
+}
+
+export const Area = ({ className, indicator, children }: AreaProps) => {
+  const { l } = usePage();
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 flex size-full flex-col items-center justify-center gap-2 rounded-[inherit] bg-background/60 backdrop-blur-sm",
+        className,
+      )}
+    >
+      {indicator ?? <Spin />}
+      <div className="text-foreground/60 text-sm">{children ?? l("base.processing")}</div>
+    </div>
+  );
+};

package/ui/Loading/index.ts

@@ -1,10 +1,5 @@
 import { LoadingArea, LoadingButton, LoadingInput, LoadingProgressBar, LoadingSkeleton, LoadingSpin } from "./index_";
 
-/**
- * Loading indicators. Each member is an independent override slot (`LoadingSpin`, `LoadingSkeleton`,
- * `LoadingProgressBar`, `LoadingButton`, `LoadingInput`, `LoadingArea`), resolved from the closest
- * `page/**\/_overrides.tsx` in the route's ancestry, otherwise the shipped default.
- */
 export const Loading = {
   Area: LoadingArea,
   Button: LoadingButton,

package/ui/Loading/index_.tsx

@@ -1,19 +1,9 @@
 "use client";
 import { createOverridable } from "../UiOverride";
-import { Area } from "./Area";
-import { Button } from "./Button";
-import { Input } from "./Input";
 import { ProgressBar } from "./ProgressBar";
-import { Skeleton } from "./Skeleton";
-import { Spin } from "./Spin";
+import { Button, Input, Skeleton } from "./Skeleton";
+import { Area, Spin } from "./Spin";
 
-/**
- * One named export per member, rather than the `Loading` namespace object itself, because the `"use client"`
- * transform replaces a client module's *exports* with `registerClientReference` stubs. A namespace exported
- * from here would reach a server component as one reference for the whole object, and `Loading.Skeleton` on it
- * would read a property the stub does not have — `undefined`, which React reports as an invalid element type.
- * The namespace is assembled in `index.ts`, which carries no directive, so each member crosses on its own.
- */
 export const LoadingArea = createOverridable("LoadingArea", Area);
 export const LoadingButton = createOverridable("LoadingButton", Button);
 export const LoadingInput = createOverridable("LoadingInput", Input);