akanjs 3.0.0-beta.9 → 3.0.1

package/ui/Constant/Graph.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import { useId, useMemo } from "react";
 import { docUi, Panel } from "../Reference";
 import {
@@ -28,14 +28,22 @@ export interface GraphProps {
 export const Graph = ({ className, title, nodes, edges, selectedId, onSelect }: GraphProps) => {
   const reactId = useId();
   const arrow = `arrow${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const { l } = usePage();
   const layout = useMemo(() => new SchemaGraphLayout(nodes, edges), [nodes, edges]);
-  if (!layout.nodes.length) return <div className={docUi.emptyPanel}>No model is registered.</div>;
+  if (!layout.nodes.length)
+    return (
+      <div className={docUi.emptyPanel}>
+        {l.trans({ en: "No model is registered.", ko: "등록된 모델이 없습니다." })}
+      </div>
+    );
   return (
     <Panel
       bodyClassName="max-h-none overflow-x-auto p-4"
       className={className}
       label={title}
-      meta={<span className="text-foreground/40 text-xs">Click a node</span>}
+      meta={
+        <span className="text-foreground/40 text-xs">{l.trans({ en: "Click a node", ko: "노드를 눌러 보세요" })}</span>
+      }
     >
       <svg
         className="min-w-fit select-none"

package/ui/Constant/schemaGraph.ts

@@ -41,10 +41,6 @@ const SUBTITLE_CHAR = 6.2;
 const TEXT_LEFT = 32;
 const TEXT_RIGHT = 16;
 
-/**
- * Layered left-to-right placement (longest-path layering + barycenter ordering), the same shape a `flowchart LR`
- * produces without the renderer. Pure geometry so it is unit-testable and runs identically on the server.
- */
 export class SchemaGraphLayout {
   readonly nodes: PlacedNode[];
   readonly edges: PlacedEdge[];
@@ -68,11 +64,6 @@ export class SchemaGraphLayout {
     this.height = bottom + PAD + (links.some((edge) => this.#isBack(byId, edge)) ? BACK_EDGE_SAG + 24 : 0);
   }
 
-  /**
-   * Depth-first feedback-arc removal. A schema legally holds reference cycles (`user.org` / `org.owner`), and
-   * layering one directly pushes both ends apart once per pass — the graph came out with a dozen empty columns
-   * between them. The cycle's edges are still drawn, just not allowed to decide a column.
-   */
   #feedForward(nodes: SchemaGraphNode[], links: SchemaGraphEdge[]) {
     const outgoing = new Map<string, SchemaGraphEdge[]>();
     for (const edge of links) {

package/ui/Copy.tsx

@@ -4,11 +4,10 @@ import { st } from "akanjs/store";
 import { cloneElement, isValidElement, type MouseEvent, type ReactElement, type ReactNode } from "react";
 
 export interface CopyProps {
-  /** Text copied to the clipboard. Defaults to an empty string. */
+  /** Defaults to an empty string. */
   text?: string;
-  /** Success message shown through the global store message helper. */
+  /** Defaults to a localized "Copied". */
   copyMessage?: string;
-  /** Copy trigger element. */
   children: ReactNode;
 }
 

package/ui/CsrImage.tsx

@@ -1,9 +1,11 @@
 "use client";
+import { cn, resolveServerUrl } from "akanjs/client";
 import type { ProtoLightFile } from "akanjs/constant";
 import type { ImgHTMLAttributes } from "react";
 
 type CsrImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> & {
   src?: string;
+  alt?: string;
   file?: ProtoLightFile | { url: string; imageSize: [number, number]; abstractData?: string | null } | null;
   abstractData?: string | null;
   priority?: boolean;
@@ -13,25 +15,24 @@ type CsrImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> &
   fill?: boolean;
 };
 
-export const CsrImage = ({ src, file, className, abstractData, ...props }: CsrImageProps) => {
-  const url = src ?? file?.url ?? "/empty.png";
+const EMPTY_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+export const CsrImage = ({ src, alt, file, className, abstractData, ...props }: CsrImageProps) => {
+  const stored = src || file?.url || null;
+  const url = stored ? resolveServerUrl(stored) : null;
   const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
   const defaultAbstractData =
     "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg==";
-  
   const blurDataURL = abstractData ?? file?.abstractData ?? defaultAbstractData;
-
   const { priority, preload, quality, unoptimized, fill, ...csrProps } = props;
   return (
     <img
-      src={url}
+      src={url ?? EMPTY_IMAGE}
       data-src={blurDataURL}
       width={width}
       height={height}
-      
-      className={className}
-      alt="image"
-      
+      className={cn(!url && "bg-muted", className)}
+      alt={alt ?? "image"}
       {...csrProps}
     />
   );

package/ui/Data/CardList.tsx

@@ -1,7 +1,6 @@
 "use client";
 import type { DataList } from "akanjs/base";
 import { cn, type DataAction, type DataColumn } from "akanjs/client";
-import { capitalize } from "akanjs/common";
 import type { FilterInstance } from "akanjs/document";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -9,6 +8,7 @@ import { type ReactNode, useEffect } from "react";
 import { Empty } from "../Empty";
 import { Loading } from "../Loading";
 import { Model } from "../Model";
+import { sliceNamesOf } from "../sliceNamesOf";
 import DataItem from "./Item";
 import DataPagination from "./Pagination";
 
@@ -58,23 +58,8 @@ export default function CardList<
 }: CardListProps<T, Input, Full, Light, Filter>) {
   const storeUse = st.use as { [key: string]: () => unknown };
   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 } = slice;
-  const [modelName, modelClassName] = [refName, capitalize(refName)];
-  const names = {
-    model: modelName,
-    modelId: `${modelName}Id`,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    limitOfModel: `limitOf${modelClassName}`,
-    initModel: `init${modelClassName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
-    initModel: sliceName.replace(names.model, names.initModel),
-  };
+  const { names, namesOfSlice } = sliceNamesOf(refName, sliceName);
   const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;

package/ui/Data/Dashboard.tsx

@@ -2,7 +2,7 @@
 import { cn, usePage } from "akanjs/client";
 import { fieldQueryMetaOf } from "akanjs/constant";
 import type { QuerySetting, SliceMeta } from "akanjs/fetch";
-import { st } from "akanjs/store";
+import { usePageLocation } from "akanjs/webkit";
 import { useState } from "react";
 
 import { dictLabel, formatStat } from "./dataText";
@@ -12,10 +12,7 @@ export interface DashboardProps<T extends string, State> {
   summary: Record<string, unknown>;
   /** The listing these tiles belong to. Kept so a caller names its target; the labels are app-level keys. */
   slice: SliceMeta;
-  /**
-   * Overrides the filter a column applies. A column left out still narrows the listing when its own field
-   * declares a query with `.meta(...)`; one with neither renders as a plain tile.
-   */
+  /** Overrides a column's filter; a column left out filters through its field's `.meta(...)`, else is a plain tile. */
   queryMap?: { [column: string]: QuerySetting };
   /** Model whose fields the columns name. Its `.meta(...)` declarations are where a tile's filter comes from. */
   summaryRefName?: string;
@@ -43,9 +40,9 @@ export default function Dashboard<T extends string, State>({
   hidePresents,
 }: DashboardProps<T, State>) {
   const { l } = usePage();
-  const searchParams = st.use.searchParams({ agent: false });
+  const { searchParams } = usePageLocation();
   const filter = Array.isArray(searchParams.filter) ? searchParams.filter[0] : searchParams.filter;
-
+  
   const [selected, setSelected] = useState(typeof filter === "string" ? filter : undefined);
 
   const settingOf = (column: string): QuerySetting | undefined => {

package/ui/Data/Item.tsx

@@ -1,5 +1,5 @@
 "use client";
-import type { Dayjs } from "akanjs/base";
+import { type Dayjs, dayjs } from "akanjs/base";
 import { cn, type DataAction, type DataColumn, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { BaseObject } from "akanjs/constant";
@@ -15,14 +15,17 @@ import { Popconfirm } from "../Popconfirm";
 import { RecentTime } from "../RecentTime";
 import { dictLabel, formatCell } from "./dataText";
 
+const renderCell = (value: unknown) =>
+  value instanceof Date || dayjs.isDayjs(value) ? <RecentTime date={value} /> : formatCell(value);
+
 export const convToAntdColumn = (column: DataColumn<any>) => {
   if (typeof column !== "string")
     return {
       key: column.key as string,
       dataIndex: column.key as string,
       title: capitalize(column.key as string),
-      responsive: column.responsive ? (["xs", "sm", "md", "xl"] as const) : undefined,
-      render: column.render,
+      responsive: column.responsive ? (["md", "lg", "xl"] as const) : undefined,
+      render: column.render ?? renderCell,
     };
   else if (
     [
@@ -62,7 +65,7 @@ export const convToAntdColumn = (column: DataColumn<any>) => {
       title: capitalize(column),
       render: (role: string) => <RoleTags role={role} />,
     };
-  else return { key: column, dataIndex: column, title: capitalize(column) };
+  else return { key: column, dataIndex: column, title: capitalize(column), render: renderCell };
 };
 
 interface ItemProps<T extends string, Full extends { id: string }, Light extends { id: string }> {
@@ -126,7 +129,7 @@ export default function Item<T extends string, Full extends { id: string }, Ligh
         <div className="flex justify-center">
           <div className="relative size-full" onClick={onClick}>
             {children}
-            {/* children 클릭 방지 */}
+            {/* Covers the children so the click lands on the card, not on them. */}
             <div className="absolute inset-0" />
           </div>
         </div>
@@ -176,7 +179,6 @@ export const Action = <T extends string, M extends { id: string }, L extends { i
 }: ActionProps<T, M, L> & { outline?: boolean }) => {
   const { l } = usePage();
   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 } = slice;
   const [modelName, modelClassName] = [refName, capitalize(refName)];
   const names = {

package/ui/Data/ListContainer.tsx

@@ -10,11 +10,10 @@ import {
   type ModelProps,
   usePage,
 } from "akanjs/client";
-import { capitalize } from "akanjs/common";
 import { type BaseInsight, ConstantRegistry, labelOf } from "akanjs/constant";
 import type { FetchInitForm, QuerySetting, SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
-import { useScreenScope } from "akanjs/webkit";
+import { usePageLocation, useScreenScope } from "akanjs/webkit";
 import { type ReactNode, useEffect, useState } from "react";
 import {
   AiOutlineAppstore,
@@ -33,6 +32,7 @@ import { Dropdown } from "../Dropdown";
 import { Loading } from "../Loading";
 import { Model } from "../Model";
 import { Select } from "../Select";
+import { sliceNamesOf } from "../sliceNamesOf";
 import DataCardList from "./CardList";
 import { columnKey, downloadBlob, toCsvBlob, toJsonBlob } from "./dataExport";
 import { dictLabel } from "./dataText";
@@ -50,11 +50,9 @@ export interface ListContainerProps<
   Full extends { id: string },
   Light extends { id: string },
 > {
-  /** Additional classes for the list container. */
   className?: string;
-  /** Additional classes for card-list rendering. */
   cardListClassName?: string;
-  /** Initial rendering mode. The toolbar toggle switches it from here. */
+  /** Initial mode; the toolbar toggle switches it from here. */
   type?: "card" | "list";
   /** Fixed filter query for this listing. Given one, the panel is scoped and offers no query maker. */
   query?: QuerySetting;
@@ -62,19 +60,12 @@ export interface ListContainerProps<
   queryMap?: { [column: string]: QuerySetting };
   /** Initial fetch form: page, limit, sort, and the default values a new model starts from. */
   init?: FetchInitForm<Input, any>;
-  /** Generated slice metadata for the target model. */
   slice: SliceMeta;
-  /** Show create/new-model controls. */
   create?: boolean;
-  /** Optional list title. */
   title?: ReactNode;
-  /** Initial sort value. */
   sort?: unknown;
-  /** Table/list columns. */
   columns?: DataColumn<any>[];
-  /** Toolbar actions or a factory receiving the loaded list. */
   tools?: DataTool[] | ((modelList: Light[]) => DataTool[]);
-  /** Per-row actions or action factory. */
   actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
   renderDashboard?: ({
     summary,
@@ -133,51 +124,14 @@ export default function ListContainer<
   const storeSel = st.sel as <Ret>(selector: (state: unknown) => Ret) => Ret;
   const storeGet = st.get as unknown as <T>() => { [key: string]: T };
   const { refName, sliceName } = slice;
-  const [modelName, modelClassName] = [refName, capitalize(refName)];
   if (refName !== sliceName) throw new Error("ListContainer: sliceName must be the same as refName");
-  const names = {
-    model: modelName,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    modelInsight: `${modelName}Insight`,
-    limitOfModel: `limitOf${modelClassName}`,
-    sortOfModel: `sortOf${modelClassName}`,
-    initModel: `init${modelClassName}`,
-    newModel: `new${modelClassName}`,
-    refreshModel: `refresh${modelClassName}`,
-    setSortOfModel: `setSortOf${modelClassName}`,
-    setLimitOfModel: `setLimitOf${modelClassName}`,
-    setViewOfModel: `setViewOf${modelClassName}`,
-    exportCsvOfModel: `exportCsvOf${modelClassName}`,
-    exportJsonOfModel: `exportJsonOf${modelClassName}`,
-    editModel: `edit${modelClassName}`,
-    viewModel: `view${modelClassName}`,
-    removeModel: `remove${modelClassName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    modelInsight: sliceName.replace(names.model, names.modelInsight),
-    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
-    sortOfModel: sliceName.replace(names.model, names.sortOfModel),
-    initModel: sliceName.replace(names.model, names.initModel),
-    newModel: sliceName.replace(names.model, names.newModel),
-    refreshModel: sliceName.replace(names.model, names.refreshModel),
-    setSortOfModel: sliceName.replace(names.model, names.setSortOfModel),
-    setLimitOfModel: sliceName.replace(names.model, names.setLimitOfModel),
-    setViewOfModel: sliceName.replace(names.model, names.setViewOfModel),
-    exportCsvOfModel: sliceName.replace(names.model, names.exportCsvOfModel),
-    exportJsonOfModel: sliceName.replace(names.model, names.exportJsonOfModel),
-    editModel: sliceName.replace(names.model, names.editModel),
-    viewModel: sliceName.replace(names.model, names.viewModel),
-    removeModel: sliceName.replace(names.model, names.removeModel),
-  };
+  const { namesOfSlice } = sliceNamesOf(refName, sliceName);
   const [view, setView] = useState(type);
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
   const sortOfModel = storeUse[namesOfSlice.sortOfModel]() as string;
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
-  const searchParams = st.use.searchParams({ agent: false });
+  const { searchParams } = usePageLocation();
   const filter = Array.isArray(searchParams.filter) ? searchParams.filter[0] : searchParams.filter;
   const initQuery = query ?? (filter ? queryMap?.[filter] : undefined);
   const queryState = useQueryMaker({ slice, query: initQuery });
@@ -197,56 +151,56 @@ export default function ListContainer<
       ? column.title
       : dictLabel(l._, `${sliceName}.${columnKey(column)}`, columnKey(column));
   const loadedList = () => [...(storeGet<DataList<Light>>()[namesOfSlice.modelList] as DataList<Light>)];
-  const whileLoaded = () => (modelListLoading ? `The ${modelName} list is still loading.` : true);
+  const whileLoaded = () => (modelListLoading ? `The ${refName} list is still loading.` : true);
   const setViewOfModel = st
     .tool(namesOfSlice.setViewOfModel)
-    .desc(`Render the ${modelName} list as cards or as a table.`)
+    .desc(`Render the ${refName} list as cards or as a table.`)
     .arg("mode", String, { oneOf: ["card", "list"] })
     .exec((mode) => {
       setView(mode);
     });
   const setSortOfModel = st
     .tool(sortKeys.length > 1 ? namesOfSlice.setSortOfModel : null)
-    .desc(`Reorder the ${modelName} list.`)
+    .desc(`Reorder the ${refName} list.`)
     .arg("sortKey", String, { oneOf: sortKeys })
     .exec((sortKey) => storeDo[namesOfSlice.setSortOfModel](sortKey));
   const setLimitOfModel = st
     .tool(namesOfSlice.setLimitOfModel)
-    .desc(`Set how many ${modelName} rows one page holds.`)
+    .desc(`Set how many ${refName} rows one page holds.`)
     .arg("limit", Int, { oneOf: pageLimits })
     .exec((limit) => storeDo[namesOfSlice.setLimitOfModel](limit));
   const refreshModel = st
     .tool(namesOfSlice.refreshModel, { settle: false })
-    .desc(`Reload the ${modelName} list from the server.`)
+    .desc(`Reload the ${refName} list from the server.`)
     .exec(() => storeDo[namesOfSlice.refreshModel]());
   const newModel = st
     .tool(renderTemplate && create ? namesOfSlice.newModel : null)
-    .desc(`Open the form that creates a ${modelName}.`)
+    .desc(`Open the form that creates a ${refName}.`)
     .exec(() => storeDo[namesOfSlice.newModel]());
   const exportCsvOfModel = st
     .tool(namesOfSlice.exportCsvOfModel, { guard: whileLoaded })
-    .desc(`Download the loaded page of ${modelName} rows as a CSV file.`)
+    .desc(`Download the loaded page of ${refName} rows as a CSV file.`)
     .exec(() => {
       downloadBlob(toCsvBlob(columns, loadedList() as Record<string, unknown>[], columnTitle), `${sliceName}.csv`);
     });
   const exportJsonOfModel = st
     .tool(namesOfSlice.exportJsonOfModel, { guard: whileLoaded })
-    .desc(`Download the loaded page of ${modelName} rows as a JSON file.`)
+    .desc(`Download the loaded page of ${refName} rows as a JSON file.`)
     .exec(() => {
       downloadBlob(toJsonBlob(loadedList()), `${sliceName}.json`);
     });
 
   const rowActions = Array.isArray(actions) ? actions : [];
   st.tool(rowActions.includes("edit") && renderTemplate ? namesOfSlice.editModel : null)
-    .desc(`Open one ${modelName} in the edit form.`)
+    .desc(`Open one ${refName} in the edit form.`)
     .arg("modelId", ID)
     .exec((modelId) => storeDo[namesOfSlice.editModel](modelId));
   st.tool(rowActions.includes("view") && renderView ? namesOfSlice.viewModel : null)
-    .desc(`Open one ${modelName} in the detail view.`)
+    .desc(`Open one ${refName} in the detail view.`)
     .arg("modelId", ID)
     .exec((modelId) => storeDo[namesOfSlice.viewModel](modelId));
   st.tool(rowActions.includes("remove") ? namesOfSlice.removeModel : null)
-    .desc(`Remove one ${modelName}.`)
+    .desc(`Remove one ${refName}.`)
     .arg("modelId", ID)
     .exec((modelId) => storeDo[namesOfSlice.removeModel](modelId));
   const scopePath = useScreenScope({
@@ -277,7 +231,7 @@ export default function ListContainer<
         queryKey: queryState.setting.queryKey,
       })
     );
-
+  
   const queryMakerArgs = renderQueryMaker ? (
     renderQueryMaker()
   ) : query ? null : (

package/ui/Data/Pagination.tsx

@@ -1,47 +1,29 @@
 "use client";
 import { cn } from "akanjs/client";
-import { capitalize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import { usePageTool } from "akanjs/webkit";
 
 import { Pagination as Pagn } from "../Pagination";
+import { sliceNamesOf } from "../sliceNamesOf";
 
 interface PaginationProps<T extends string> {
-  /** Additional classes for the pagination wrapper. */
   className?: string;
-  /** Generated slice metadata used to read page state and dispatch page changes. */
   slice: SliceMeta;
 }
 export default function Pagination<T extends string>({ className, slice }: PaginationProps<T>) {
   const storeUse = st.use as { [key: string]: () => unknown };
   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 } = slice;
-  const [modelName, modelClassName] = [refName, capitalize(refName)];
-  const names = {
-    model: modelName,
-    modelInsight: `${modelName}Insight`,
-    limitOfModel: `limitOf${modelClassName}`,
-    lastPageOfModel: `lastPageOf${modelClassName}`,
-    pageOfModel: `pageOf${modelClassName}`,
-    setPageOfModel: `setPageOf${modelClassName}`,
-  };
-  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 { namesOfSlice } = sliceNamesOf(refName, sliceName);
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
   const lastPageOfModel = storeUse[namesOfSlice.lastPageOfModel]() as number;
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
   const setPageOfModel = usePageTool({
     name: modelInsight.count > limitOfModel ? namesOfSlice.setPageOfModel : null,
-    model: modelName,
+    model: refName,
     page: pageOfModel,
     lastPage: lastPageOfModel,
     total: modelInsight.count,
@@ -51,7 +33,6 @@ export default function Pagination<T extends string>({ className, slice }: Pagin
     <div className={cn("mt-4 flex flex-wrap justify-center", className)}>
       <Pagn
         currentPage={pageOfModel}
-        
         total={modelInsight.count}
         onPageSelect={setPageOfModel}
         itemsPerPage={limitOfModel || modelInsight.count}

package/ui/Data/QueryMaker.tsx

@@ -59,11 +59,6 @@ const isFilledArg = (value: unknown) =>
 export const isReadyQuery = (args: SerializedArg[], values: unknown[]) =>
   args.every((arg, idx) => arg.nullable || isFilledArg(values[idx]));
 
-/**
- * The filter a listing is showing, and the one write that applies it. Held in a hook rather than a component
- * because the key select rides the toolbar while the args that key takes render under it — two places in the
- * tree, one selection.
- */
 export const useQueryMaker = ({ slice, query, onApply }: QueryMakerProps): QueryMakerState => {
   const { refName, sliceName } = slice;
   const storeDo = st.do as unknown as { [key: string]: (...args: unknown[]) => Promise<void> };
@@ -86,7 +81,7 @@ export const useQueryMaker = ({ slice, query, onApply }: QueryMakerProps): Query
   }, []);
   const update = (setting: ResolvedQuerySetting) => {
     setSetting(setting);
-
+    
     if (isReadyQuery(filterQuery[setting.queryKey] ?? [], setting.args)) applyQuery(setting);
   };
   const args = filterQuery[setting.queryKey] ?? [];
@@ -106,7 +101,6 @@ export const useQueryMaker = ({ slice, query, onApply }: QueryMakerProps): Query
   };
 };
 
-/** The filter picker. Sized for a toolbar, beside the sort and page-size selects. */
 export const QueryMakerKey = ({ className, selectClassName, slice, state }: QueryMakerKeyProps) => {
   const { l } = usePage();
   const { queryKeys, setting, selectKey } = state;
@@ -125,7 +119,6 @@ export const QueryMakerKey = ({ className, selectClassName, slice, state }: Quer
   );
 };
 
-/** What the picked filter asks for. Renders nothing for a filter that takes no arguments. */
 export const QueryMakerArgs = ({ className, slice, state }: QueryMakerArgsProps) => {
   const { l } = usePage();
   const { args, setting, setArg } = state;

package/ui/Data/RefPicker.tsx

@@ -25,18 +25,11 @@ interface RefRow {
 
 const pageSize = 20;
 
-/**
- * Picks one row of a referenced model instead of asking for its hex id. Rows are held here rather than in the
- * ref model's store: that store is a singleton, so a picker loading into it would overwrite whatever listing of
- * the same model is already on the screen — and a picker opened from inside a picker would overwrite itself.
- *
- * The search is the ref model's own root slice, which is Admin-guarded, so this belongs to admin surfaces.
- */
 export default function RefPicker({ className, refName, value, onChange }: RefPickerProps) {
   const { l } = usePage();
   const slice = fetch.slice[refName];
   const filterQuery = fetch.filterQueryMap?.get(refName) ?? {};
-
+  
   const initialKey = filterQuery.bySearch ? "bySearch" : "any";
   const initialQuery: ResolvedQuerySetting = { queryKey: initialKey, args: [] };
 

package/ui/Data/TableList.tsx

@@ -1,7 +1,6 @@
 "use client";
 import type { DataList } from "akanjs/base";
 import { type DataAction, type DataColumn, usePage } from "akanjs/client";
-import { capitalize } from "akanjs/common";
 import type { FilterInstance } from "akanjs/document";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -9,6 +8,7 @@ import { type ReactNode, useEffect, useMemo } from "react";
 
 import { Loading } from "../Loading";
 import { Model } from "../Model";
+import { sliceNamesOf } from "../sliceNamesOf";
 import { Table } from "../Table";
 import { columnKey } from "./dataExport";
 import { dictLabel } from "./dataText";
@@ -54,21 +54,8 @@ export default function TableList<
   const { l } = usePage();
   const storeUse = st.use as { [key: string]: () => unknown };
   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 } = slice;
-  const [modelName, modelClassName] = [refName, capitalize(refName)];
-  const names = {
-    model: modelName,
-    modelId: `${modelName}Id`,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    initModel: `init${modelClassName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    initModel: sliceName.replace(names.model, names.initModel),
-  };
+  const { names, namesOfSlice } = sliceNamesOf(refName, sliceName);
   const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
   const RenderTemplate = ({ id }: { id: string }) => {

package/ui/DatePicker.tsx

@@ -69,9 +69,7 @@ export interface DatePickerProps {
   value?: Dayjs | null;
   onChange: (value: Dayjs | null) => void;
   showTime?: boolean;
-  /** Earliest selectable value. The browser enforces it. */
   min?: Dayjs | null;
-  /** Latest selectable value. The browser enforces it. */
   max?: Dayjs | null;
   /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
   disabledDate?: (date: Dayjs) => boolean | null | undefined;
@@ -116,7 +114,7 @@ export interface RangePickerProps {
 
 const DefaultRangePicker = ({ className = "", value, onChange, showTime, disabledDate }: RangePickerProps) => {
   const type = showTime ? "datetime-local" : "date";
-
+  
   const inputClassName = "m-0 h-full w-full border-none bg-transparent p-3 text-center focus:outline-hidden";
   return (
     <div className={inputRecipe({}, ["flex h-full w-fit items-center gap-2 p-0", className])}>
@@ -169,15 +167,6 @@ const DefaultTimePicker = ({ className, value, onChange, disabled, disabledDate
 
 const DatePickerBase = createOverridable("DatePicker", DefaultDatePicker);
 
-/**
- * Date picker. `DatePicker`, `DatePicker.RangePicker`, and `DatePicker.TimePicker` each resolve to a
- * route-scoped override when a `page/**\/_overrides.tsx` in the route's ancestry declares one (slots
- * `DatePicker`, `DatePickerRangePicker`, `DatePickerTimePicker`).
- *
- * Each renders one native `<input type="date" | "datetime-local" | "time">`, so the calendar is the browser's
- * own: an OS wheel on mobile, keyboard entry everywhere, nothing shipped in the bundle. What that costs is a
- * themed popup, a chosen display format, and per-day disabling — an app needing any of those overrides the slot.
- */
 export const DatePicker = Object.assign(DatePickerBase, {
   RangePicker: createOverridable("DatePickerRangePicker", DefaultRangePicker),
   TimePicker: createOverridable("DatePickerTimePicker", DefaultTimePicker),

package/ui/Dialog/LegacyModal.tsx

@@ -10,7 +10,7 @@ import { config, useSpring } from "react-spring";
 import { buttonRecipe } from "../Button";
 import { useOverlayLayerProps } from "../overlayLayer";
 
-import { DialogContext } from "./context";
+import { DialogContext } from "./Provider";
 
 const MODAL_MARGIN = 0; 
 const OPACITY = { START: 0, END: 1 };
@@ -26,10 +26,7 @@ export interface LegacyModalProps {
   children?: ReactNode;
   onCancel?: () => void;
 }
-/**
- * Previous modal skin, kept for screens built around its motion: spring open/close and a drag-to-dismiss
- * sheet on touch. New work composes {@link Modal}, which draws the same slots with no animation.
- */
+/** Spring-animated, drag-to-dismiss skin; {@link Modal} draws the same slots with no animation. */
 export const LegacyModal = ({ className, bodyClassName, confirmClose, children, onCancel }: LegacyModalProps) => {
   const { open, setOpen, registerDismiss, title, action } = useContext(DialogContext);
   const { l } = usePage();
@@ -39,7 +36,6 @@ export const LegacyModal = ({ className, bodyClassName, confirmClose, children,
   const focusedElementRef = useRef<HTMLElement | null>(null);
   const titleId = useId();
   const contentId = useId();
-  
   const overlayLayerProps = useOverlayLayerProps();
   const [{ translate }, api] = useSpring(() => ({ translate: 1 }));
   const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
@@ -188,7 +184,7 @@ export const LegacyModal = ({ className, bodyClassName, confirmClose, children,
         <animated.div
           ref={ref}
           style={{ translateY, opacity }}
-
+          
           className={cn(
             "relative flex max-h-full w-full max-w-2xl flex-col overflow-hidden rounded-box border border-border bg-card text-card-foreground shadow-2xl shadow-black/25 outline-none",
             className,