akanjs 3.0.0-alpha.61 → 3.0.0-alpha.62

package/fetch/client/httpClient.ts

@@ -115,8 +115,11 @@ export class HttpClient {
       const argValue = argMap.get(arg.name);
       if (argValue === null || argValue === undefined) return;
 
-      if (arg.refName === "Any") searchParams.set(arg.name, JSON.stringify(argValue));
-      else if (arg.arrDepth && Array.isArray(argValue))
+      if (arg.refName === "Any") {
+
+        const encoded = JSON.stringify(argValue);
+        if (encoded !== undefined) searchParams.set(arg.name, encoded);
+      } else if (arg.arrDepth && Array.isArray(argValue))
         argValue.forEach((value) => {
           searchParams.append(arg.name, String(value));
         });

package/fetch/fetchType/appliedReturn.type.ts

@@ -11,7 +11,11 @@ export type SliceMeta = {
 /** What the root slice takes: one of the model's declared filter queries, and the args that filter asks for. */
 export interface QuerySetting {
   queryKey: string;
-  args?: unknown[];
+  /**
+   * Read when the query is applied rather than when the setting is written, so a thunk keeps an arg relative to
+   * now — `() => [dayjs().subtract(1, "hour")]` — current at the moment the user asks for it.
+   */
+  args?: unknown[] | (() => unknown[]);
 }
 
 export type ServerInit<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.61",
+  "version": "3.0.0-alpha.62",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -216,7 +216,6 @@
     "postgres": "^3.4.9",
     "protobufjs": "^8.4.0",
     "react": "19.2.7",
-    "react-datepicker": "^9.1.0",
     "react-dom": "19.2.7",
     "react-icons": "^5.6.0",
     "react-refresh": "^0.18.0",
@@ -324,9 +323,6 @@
     "react": {
       "optional": true
     },
-    "react-datepicker": {
-      "optional": true
-    },
     "react-dom": {
       "optional": true
     },

package/types/fetch/fetchType/appliedReturn.type.d.ts

@@ -9,7 +9,11 @@ export type SliceMeta = {
 /** What the root slice takes: one of the model's declared filter queries, and the args that filter asks for. */
 export interface QuerySetting {
     queryKey: string;
-    args?: unknown[];
+    /**
+     * Read when the query is applied rather than when the setting is written, so a thunk keeps an arg relative to
+     * now — `() => [dayjs().subtract(1, "hour")]` — current at the moment the user asks for it.
+     */
+    args?: unknown[] | (() => unknown[]);
 }
 export type ServerInit<RefName extends string, Light, Insight = any, QueryArgs = any, Filter extends FilterInstance = any, _CapitalizedRefName extends string = Capitalize<RefName>, _LightObj = GetStateObject<Light>, _InsightObj = GetStateObject<Insight>, _Sort = ExtractSort<Filter>> = SliceMeta & {
     [K in `${RefName}ObjList`]: _LightObj[];

package/types/ui/Data/Dashboard.d.ts

@@ -2,13 +2,18 @@ import type { QuerySetting, SliceMeta } from "akanjs/fetch";
 export interface DashboardProps<T extends string, State> {
     className?: string;
     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;
     /** Columns that narrow the listing when clicked. A column absent from the map renders as a plain tile. */
     queryMap?: {
         [column: string]: QuerySetting;
     };
+    /** Applies one column's filter. Without it a mapped column still renders, but as a plain tile. */
+    onSelect?: (setting: QuerySetting, column: string) => void;
+    /** The filter key the listing is showing, so a tile stops looking active once the toolbar moves off it. */
+    queryKey?: string;
     columns?: string[];
     presents?: string[];
     hidePresents?: boolean;
 }
-export default function Dashboard<T extends string, State>({ className, summary, slice, queryMap, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element | null;
+export default function Dashboard<T extends string, State>({ className, summary, queryMap, onSelect, queryKey, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element | null;

package/types/ui/Data/ListContainer.d.ts

@@ -34,9 +34,13 @@ export interface ListContainerProps<T extends string, State, Input, Full extends
     tools?: DataTool[] | ((modelList: Light[]) => DataTool[]);
     /** Per-row actions or action factory. */
     actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
-    renderDashboard?: ({ summary, hidePresents, }: {
+    renderDashboard?: ({ summary, hidePresents, onSelect, queryKey, }: {
         summary: Record<string, unknown>;
         hidePresents?: boolean;
+        /** Applies one summary column's filter to this listing, in place. */
+        onSelect: (setting: QuerySetting) => void;
+        /** The filter key the listing is showing right now. */
+        queryKey: string;
     }) => ReactNode;
     renderItem?: (props: ModelProps<any, any>) => ReactNode;
     renderTemplate?: (props: any) => ReactNode | null;

package/types/ui/Data/QueryMaker.d.ts

@@ -5,14 +5,21 @@ interface QueryMakerProps {
     slice: SliceMeta;
     query?: QuerySetting;
     /** Where a completed filter goes. Defaults to the slice's own store, which is where a listing reads it. */
-    onApply?: (setting: Required<QuerySetting>) => void;
+    onApply?: (setting: ResolvedQuerySetting) => void;
 }
 export interface QueryMakerState {
     queryKeys: string[];
     args: SerializedArg[];
-    setting: Required<QuerySetting>;
+    setting: ResolvedQuerySetting;
     selectKey: (queryKey: string) => void;
     setArg: (idx: number, value: unknown) => void;
+    /** Applies a whole filter at once, for a control that stands for one — a dashboard tile, a saved view. */
+    applySetting: (setting: QuerySetting) => void;
+}
+/** A setting whose thunk has been read, which is the only form the store and the wire accept. */
+export interface ResolvedQuerySetting {
+    queryKey: string;
+    args: unknown[];
 }
 interface QueryMakerKeyProps {
     className?: string;
@@ -25,6 +32,8 @@ interface QueryMakerArgsProps {
     slice: SliceMeta;
     state: QueryMakerState;
 }
+/** A filter's args may be written as a thunk, so that an arg relative to now is read when the filter is applied. */
+export declare const resolveQuerySetting: (setting: QuerySetting) => ResolvedQuerySetting;
 /** A filter the server will accept: every arg it declared as required has been given a value. */
 export declare const isReadyQuery: (args: SerializedArg[], values: unknown[]) => boolean;
 /**

package/types/ui/DatePicker.d.ts

@@ -1,37 +1,41 @@
 import { type Dayjs } from "akanjs/base";
 export interface DatePickerProps {
+    className?: string;
     value?: Dayjs | null;
     onChange: (value: Dayjs | null) => void;
     showTime?: boolean;
-    format?: string;
-    timeIntervals?: number;
+    /** 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;
-    className?: string;
-    placement?: "top" | "bottom" | "left" | "right";
     defaultValue?: Dayjs;
 }
 export interface RangePickerProps {
+    className?: string;
     value: [Dayjs | null, Dayjs | null];
     onChange: (value: [Dayjs | null, Dayjs | null]) => void;
-    format?: string;
     showTime?: boolean;
-    timeIntervals?: number;
+    /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
     disabledDate?: (date: Dayjs) => boolean | null | undefined;
-    className?: string;
 }
 export interface TimePickerProps {
+    className?: string;
     value: Dayjs | null;
     onChange: (value: Dayjs) => void;
-    format?: string;
-    timeIntervals?: number;
-    disabledDate?: (date: Dayjs) => boolean | null | undefined;
-    className?: string;
     disabled?: boolean;
+    /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
+    disabledDate?: (date: Dayjs) => boolean | null | undefined;
 }
 /**
  * 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 declare const DatePicker: import("react").ComponentType<DatePickerProps> & {
     RangePicker: import("react").ComponentType<RangePickerProps>;

package/ui/Data/Dashboard.tsx

@@ -2,16 +2,21 @@
 import { cn, usePage } from "akanjs/client";
 import type { QuerySetting, SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
+import { useState } from "react";
 
-import { Link } from "../Link";
 import { dictLabel, formatStat } from "./dataText";
 
 export interface DashboardProps<T extends string, State> {
   className?: string;
   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;
   /** Columns that narrow the listing when clicked. A column absent from the map renders as a plain tile. */
   queryMap?: { [column: string]: QuerySetting };
+  /** Applies one column's filter. Without it a mapped column still renders, but as a plain tile. */
+  onSelect?: (setting: QuerySetting, column: string) => void;
+  /** The filter key the listing is showing, so a tile stops looking active once the toolbar moves off it. */
+  queryKey?: string;
   columns?: string[];
   presents?: string[];
   hidePresents?: boolean;
@@ -22,42 +27,55 @@ const tileClassName = "flex min-w-40 flex-1 flex-col gap-1 rounded-box border px
 export default function Dashboard<T extends string, State>({
   className,
   summary,
-  slice,
   queryMap,
+  onSelect,
+  queryKey,
   columns,
   presents,
   hidePresents,
 }: DashboardProps<T, State>) {
-  const { refName } = slice;
   const { l } = usePage();
   const searchParams = st.use.searchParams({ agent: false });
   const filter = Array.isArray(searchParams.filter) ? searchParams.filter[0] : searchParams.filter;
+
+  const [selected, setSelected] = useState(typeof filter === "string" ? filter : undefined);
   const shownColumns = (columns ?? []).filter((column) => summary[column] !== undefined);
   const shownPresents = hidePresents ? [] : (presents ?? []).filter((column) => summary[column] !== undefined);
   if (!shownColumns.length && !shownPresents.length) return null;
+  const activeColumn = selected && queryMap?.[selected]?.queryKey === queryKey ? selected : undefined;
   return (
     <div className={cn("mb-4 flex flex-wrap gap-2", className)}>
       {[...shownColumns, ...shownPresents].map((column) => {
-        const linkable = queryMap?.[column] !== undefined;
-        return (
-          <Link
-            key={column}
-            disabled={!linkable}
-            href={`/admin?topMenu=data&subMenu=${refName}&filter=${column}`}
+        const setting = queryMap?.[column];
+        const label = dictLabel(l._, `summary.${column}`, column);
+        const body = (
+          <>
+            <span className="truncate text-muted-foreground text-xs">{label}</span>
+            <span className="truncate font-semibold text-2xl text-primary tabular-nums">
+              {formatStat(summary[column])}
+            </span>
+          </>
+        );
+        return setting && onSelect ? (
+          <button
             className={cn(
               tileClassName,
-              "bg-card",
-              linkable && "transition hover:border-primary/50",
-              filter === column && linkable ? "border-primary" : "border-border",
+              "bg-card transition hover:border-primary/50",
+              activeColumn === column ? "border-primary" : "border-border",
             )}
+            key={column}
+            onClick={() => {
+              setSelected(column);
+              onSelect(setting, column);
+            }}
+            type="button"
           >
-            <span className="truncate text-muted-foreground text-xs">
-              {dictLabel(l._, `summary.${column}`, column)}
-            </span>
-            <span className="truncate font-semibold text-2xl text-primary tabular-nums">
-              {formatStat(summary[column])}
-            </span>
-          </Link>
+            {body}
+          </button>
+        ) : (
+          <div className={cn(tileClassName, "border-border bg-card")} key={column}>
+            {body}
+          </div>
         );
       })}
     </div>

package/ui/Data/ListContainer.tsx

@@ -36,7 +36,7 @@ import { Select } from "../Select";
 import DataCardList from "./CardList";
 import { columnKey, downloadBlob, toCsvBlob, toJsonBlob } from "./dataExport";
 import { dictLabel } from "./dataText";
-import { QueryMakerArgs, QueryMakerKey, useQueryMaker } from "./QueryMaker";
+import { QueryMakerArgs, QueryMakerKey, resolveQuerySetting, useQueryMaker } from "./QueryMaker";
 import DataTableList from "./TableList";
 
 const controlClassName = "h-9";
@@ -79,9 +79,15 @@ export interface ListContainerProps<
   renderDashboard?: ({
     summary,
     hidePresents,
+    onSelect,
+    queryKey,
   }: {
     summary: Record<string, unknown>;
     hidePresents?: boolean;
+    /** Applies one summary column's filter to this listing, in place. */
+    onSelect: (setting: QuerySetting) => void;
+    /** The filter key the listing is showing right now. */
+    queryKey: string;
   }) => ReactNode;
   renderItem?: (props: ModelProps<any, any>) => ReactNode;
   renderTemplate?: (props: any) => ReactNode | null;
@@ -178,7 +184,10 @@ export default function ListContainer<
   useEffect(() => {
     
     const queryArgs = new Array(slice.argLength).fill(null) as unknown[];
-    if (initQuery) [queryArgs[0], queryArgs[1]] = [initQuery.queryKey, initQuery.args ?? []];
+    if (initQuery) {
+      const { queryKey, args } = resolveQuerySetting(initQuery);
+      [queryArgs[0], queryArgs[1]] = [queryKey, args];
+    }
     void storeDo[namesOfSlice.initModel](...queryArgs, { sort, ...init });
   }, []);
 
@@ -252,16 +261,22 @@ export default function ListContainer<
 
   const modelLabel = dictLabel(l._, `${sliceName}.modelName`, refName);
   const RenderTitle = renderTitle ?? ((model: Full) => `${modelLabel} - ${model.id ? model.id : "New"}`);
-  const ModelDashboard = (): ReactNode => {
-    const Stat = renderDashboard;
 
-    const summary = storeSel<Record<string, unknown> | undefined>(
-      (state) => (state as { summary?: Record<string, unknown> }).summary,
+  const summary = storeSel<Record<string, unknown> | undefined>(
+    (state) => (state as { summary?: Record<string, unknown> }).summary,
+  );
+  const summaryLoading = storeSel<boolean>((state) => !!(state as { summaryLoading?: boolean }).summaryLoading);
+  const modelDashboard =
+    !renderDashboard || !summary ? null : summaryLoading ? (
+      <Loading.Skeleton className="mb-4" active />
+    ) : (
+      renderDashboard({
+        summary,
+        hidePresents: true,
+        onSelect: queryState.applySetting,
+        queryKey: queryState.setting.queryKey,
+      })
     );
-    const summaryLoading = storeSel<boolean>((state) => !!(state as { summaryLoading?: boolean }).summaryLoading);
-    if (!Stat || !summary) return null;
-    return summaryLoading ? <Loading.Skeleton className="mb-4" active /> : <Stat summary={summary} hidePresents />;
-  };
 
   const queryMakerArgs = renderQueryMaker ? (
     renderQueryMaker()
@@ -401,7 +416,7 @@ export default function ListContainer<
           ) : null}
         </div>
       </div>
-      {query ? null : <ModelDashboard />}
+      {query ? null : modelDashboard}
       {queryMakerArgs}
       <RenderInsight />
       {view === "card" ? (

package/ui/Data/QueryMaker.tsx

@@ -16,14 +16,21 @@ interface QueryMakerProps {
   slice: SliceMeta;
   query?: QuerySetting;
   /** Where a completed filter goes. Defaults to the slice's own store, which is where a listing reads it. */
-  onApply?: (setting: Required<QuerySetting>) => void;
+  onApply?: (setting: ResolvedQuerySetting) => void;
 }
 export interface QueryMakerState {
   queryKeys: string[];
   args: SerializedArg[];
-  setting: Required<QuerySetting>;
+  setting: ResolvedQuerySetting;
   selectKey: (queryKey: string) => void;
   setArg: (idx: number, value: unknown) => void;
+  /** Applies a whole filter at once, for a control that stands for one — a dashboard tile, a saved view. */
+  applySetting: (setting: QuerySetting) => void;
+}
+/** A setting whose thunk has been read, which is the only form the store and the wire accept. */
+export interface ResolvedQuerySetting {
+  queryKey: string;
+  args: unknown[];
 }
 interface QueryMakerKeyProps {
   className?: string;
@@ -37,6 +44,12 @@ interface QueryMakerArgsProps {
   state: QueryMakerState;
 }
 
+/** A filter's args may be written as a thunk, so that an arg relative to now is read when the filter is applied. */
+export const resolveQuerySetting = (setting: QuerySetting): ResolvedQuerySetting => ({
+  queryKey: setting.queryKey,
+  args: typeof setting.args === "function" ? setting.args() : (setting.args ?? []),
+});
+
 const isFillableArg = (arg: SerializedArg) => !arg.modelType;
 const defaultArg = (arg: SerializedArg) => ((arg.arrDepth ?? 0) > 0 ? [] : null);
 
@@ -58,21 +71,20 @@ export const useQueryMaker = ({ slice, query, onApply }: QueryMakerProps): Query
   const queryKeys = Object.entries(filterQuery)
     .filter(([, args]) => args.every(isFillableArg))
     .map(([queryKey]) => queryKey);
-  const [setting, setSetting] = useState<Required<QuerySetting>>({
-    queryKey: query?.queryKey ?? queryKeys[0] ?? "any",
-    args: query?.args ?? [],
-  });
+  const [setting, setSetting] = useState<ResolvedQuerySetting>(
+    query ? resolveQuerySetting(query) : { queryKey: queryKeys[0] ?? "any", args: [] },
+  );
 
-  const applyRef = useRef<(setting: Required<QuerySetting>) => void>(() => undefined);
+  const applyRef = useRef<(setting: ResolvedQuerySetting) => void>(() => undefined);
   applyRef.current = (setting) => {
     if (onApply) onApply(setting);
     else void storeDo[`setQueryArgsOf${capitalize(sliceName)}`](setting.queryKey, setting.args);
   };
   
-  const applyQuery = useDebounce((setting: Required<QuerySetting>) => {
+  const applyQuery = useDebounce((setting: ResolvedQuerySetting) => {
     applyRef.current(setting);
   }, []);
-  const update = (setting: Required<QuerySetting>) => {
+  const update = (setting: ResolvedQuerySetting) => {
     setSetting(setting);
 
     if (isReadyQuery(filterQuery[setting.queryKey] ?? [], setting.args)) applyQuery(setting);
@@ -88,6 +100,9 @@ export const useQueryMaker = ({ slice, query, onApply }: QueryMakerProps): Query
     setArg: (idx, value) => {
       update({ ...setting, args: args.map((arg, i) => (i === idx ? value : (setting.args[i] ?? defaultArg(arg)))) });
     },
+    applySetting: (setting) => {
+      update(resolveQuerySetting(setting));
+    },
   };
 };
 

package/ui/Data/RefPicker.tsx

@@ -2,7 +2,6 @@
 import { cn, fetch, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { ConstantRegistry, labelOf } from "akanjs/constant";
-import type { QuerySetting } from "akanjs/fetch";
 import { useEffect, useState } from "react";
 import { AiOutlineClose, AiOutlineSearch } from "react-icons/ai";
 import { buttonRecipe } from "../Button";
@@ -10,7 +9,7 @@ import { Empty } from "../Empty";
 import { Loading } from "../Loading";
 import { Modal } from "../Modal";
 import { dictLabel } from "./dataText";
-import { isReadyQuery, QueryMakerArgs, QueryMakerKey, useQueryMaker } from "./QueryMaker";
+import { isReadyQuery, QueryMakerArgs, QueryMakerKey, type ResolvedQuerySetting, useQueryMaker } from "./QueryMaker";
 
 interface RefPickerProps {
   className?: string;
@@ -39,10 +38,10 @@ export default function RefPicker({ className, refName, value, onChange }: RefPi
   const filterQuery = fetch.filterQueryMap?.get(refName) ?? {};
 
   const initialKey = filterQuery.bySearch ? "bySearch" : "any";
-  const initialQuery: Required<QuerySetting> = { queryKey: initialKey, args: [] };
+  const initialQuery: ResolvedQuerySetting = { queryKey: initialKey, args: [] };
 
   const [open, setOpen] = useState(false);
-  const [applied, setApplied] = useState<Required<QuerySetting>>(initialQuery);
+  const [applied, setApplied] = useState<ResolvedQuerySetting>(initialQuery);
   const [page, setPage] = useState(1);
   const [rows, setRows] = useState<RefRow[]>([]);
   const [hasNext, setHasNext] = useState(false);

package/ui/DatePicker.tsx

@@ -1,189 +1,168 @@
 "use client";
 import { type Dayjs, dayjs } from "akanjs/base";
 import { cn, msg } from "akanjs/client";
-import { lazy } from "akanjs/webkit";
-import { type FocusEvent, useEffect, useRef } from "react";
+import { type ChangeEvent, useEffect } from "react";
 import { AiOutlineSwapRight } from "react-icons/ai";
 
 import { inputRecipe } from "./recipe";
 import { createOverridable } from "./UiOverride";
 
-const reactDatePickerPackage = "react-datepicker";
-const reactDatePickerStylePath = "react-datepicker/dist/react-datepicker.css";
+type NativeDateType = "date" | "datetime-local" | "time";
+
+const valueFormat = { date: "YYYY-MM-DD", "datetime-local": "YYYY-MM-DDTHH:mm", time: "HH:mm" } as const;
+
+const toInputValue = (value: Dayjs | null | undefined, type: NativeDateType) =>
+  value?.isValid() ? value.format(valueFormat[type]) : "";
+
+/** `type="time"` reports a clock reading only, so the day comes from whatever the field already holds. */
+const fromInputValue = (raw: string, type: NativeDateType, base: Dayjs) => {
+  if (!raw) return null;
+  const picked = type === "time" ? dayjs(`${base.format(valueFormat.date)}T${raw}`) : dayjs(raw);
+  return picked.isValid() ? picked : null;
+};
+
+interface NativeDateInputProps {
+  className?: string;
+  type: NativeDateType;
+  value?: Dayjs | null;
+  min?: Dayjs | null;
+  max?: Dayjs | null;
+  disabled?: boolean;
+  disabledDate?: (date: Dayjs) => boolean | null | undefined;
+  onChange: (value: Dayjs) => void;
+}
+const NativeDateInput = ({
+  className,
+  type,
+  value,
+  min,
+  max,
+  disabled,
+  disabledDate,
+  onChange,
+}: NativeDateInputProps) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const picked = fromInputValue(event.target.value, type, value ?? dayjs());
+    if (!picked || disabledDate?.(picked)) {
+      msg.warning("base.selectDateError");
+      
+      event.target.value = toInputValue(value, type);
+      return;
+    }
+    onChange(picked);
+  };
+  return (
+    <input
+      className={className}
+      type={type}
+      value={toInputValue(value, type)}
+      min={min ? toInputValue(min, type) : undefined}
+      max={max ? toInputValue(max, type) : undefined}
+      disabled={disabled}
+      onChange={handleChange}
+    />
+  );
+};
 
-const ReactDatePicker = lazy(
-  async () => {
-    await import(reactDatePickerStylePath);
-    return import(reactDatePickerPackage);
-  },
-  { ssr: false },
-);
 export interface DatePickerProps {
+  className?: string;
   value?: Dayjs | null;
   onChange: (value: Dayjs | null) => void;
   showTime?: boolean;
-  format?: string;
-  timeIntervals?: number;
+  /** 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;
-  className?: string;
-  placement?: "top" | "bottom" | "left" | "right";
   defaultValue?: Dayjs;
 }
 
 const DefaultDatePicker = ({
+  className = "",
   value,
   onChange,
   showTime,
-  format = "yyyy-MM-dd",
-  timeIntervals = 10,
+  min,
+  max,
   disabledDate,
-  placement,
-  className = "",
   defaultValue,
 }: DatePickerProps) => {
-  const clickNum = useRef(0);
-
   useEffect(() => {
-    if (defaultValue) {
-      onChange(defaultValue);
-    }
+    if (defaultValue) onChange(defaultValue);
   }, [defaultValue]);
 
-  const handleDateChange = (date?: Date | null) => {
-    if (!date) {
-      msg.warning("base.selectDateError");
-      return;
-    }
-    onChange(dayjs(date));
-  };
-
   return (
-    <ReactDatePicker
+    <NativeDateInput
       className={inputRecipe({}, ["text-center", className])}
-      selected={value ? value.toDate() : new Date()}
-      disabledKeyboardNavigation
-      onFocus={(e: FocusEvent<HTMLInputElement>) => {
-        
-        if (clickNum.current % 2 === 0) e.target.blur();
-        clickNum.current++;
-      }}
-      onChange={handleDateChange}
-      showTimeSelect={showTime}
-      popperPlacement={placement}
-      timeIntervals={timeIntervals}
-      filterDate={(date: Date) => (!disabledDate?.(dayjs(date)) ? true : false)}
-      dateFormat={format}
+      type={showTime ? "datetime-local" : "date"}
+      value={value}
+      min={min}
+      max={max}
+      disabledDate={disabledDate}
+      onChange={onChange}
     />
   );
 };
 
 export interface RangePickerProps {
+  className?: string;
   value: [Dayjs | null, Dayjs | null];
   onChange: (value: [Dayjs | null, Dayjs | null]) => void;
-  format?: string;
   showTime?: boolean;
-  timeIntervals?: number;
+  /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
   disabledDate?: (date: Dayjs) => boolean | null | undefined;
-  className?: string;
 }
 
-const DefaultRangePicker = ({
-  value,
-  onChange,
-  format = "yyyy-MM-dd",
-  showTime,
-  timeIntervals = 10,
-  disabledDate,
-  className = "",
-}: RangePickerProps) => {
-  const handleStartDateChange = (date?: Date | null) => {
-    if (!date) {
-      msg.warning("base.selectDateError");
-      return;
-    }
-    onChange([dayjs(date), value[1] ?? dayjs()]);
-  };
-  const handleEndDateChange = (date?: Date | null) => {
-    if (!date) {
-      msg.warning("base.selectDateError");
-      return;
-    }
-    onChange([value[0] ?? dayjs(), dayjs(date)]);
-  };
+const DefaultRangePicker = ({ className = "", value, onChange, showTime, disabledDate }: RangePickerProps) => {
+  const type = showTime ? "datetime-local" : "date";
 
-  const pickerClassName = "m-0 h-full w-full border-none bg-transparent p-3 text-center focus:outline-hidden z-50";
+  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])}>
-      <ReactDatePicker
-        className={pickerClassName}
-        selected={value[0] ? value[0].toDate() : undefined}
-        selectsStart
-        startDate={value[0] ? value[0].toDate() : undefined}
-        endDate={value[1] ? value[1].toDate() : undefined}
-        onChange={handleStartDateChange}
-        showTimeSelect={showTime}
-        timeIntervals={timeIntervals}
-        filterDate={(date: Date) => (!disabledDate?.(dayjs(date)) ? true : false)}
-        dateFormat={format}
+      <NativeDateInput
+        className={inputClassName}
+        type={type}
+        value={value[0]}
+        max={value[1]}
+        disabledDate={disabledDate}
+        onChange={(start) => {
+          onChange([start, value[1] ?? dayjs()]);
+        }}
       />
       <AiOutlineSwapRight className="text-3xl text-muted-foreground" />
-      <ReactDatePicker
-        className={pickerClassName}
-        selected={value[1] ? value[1].toDate() : undefined}
-        selectsEnd
-        startDate={value[0] ? value[0].toDate() : undefined}
-        endDate={value[1] ? value[1].toDate() : undefined}
-        onChange={handleEndDateChange}
-        showTimeSelect={showTime}
-        timeIntervals={timeIntervals}
-        filterDate={(date: Date) =>
-          !disabledDate?.(dayjs(date)) && value[0] && !dayjs(date).add(1, "day").isBefore(value[0]) ? true : false
-        }
-        filterTime={(time: Date) => !!value[0] && dayjs(time).isAfter(value[0])}
-        dateFormat={format}
+      <NativeDateInput
+        className={inputClassName}
+        type={type}
+        value={value[1]}
+        min={value[0]}
+        disabledDate={disabledDate}
+        onChange={(end) => {
+          onChange([value[0] ?? dayjs(), end]);
+        }}
       />
     </div>
   );
 };
 
 export interface TimePickerProps {
+  className?: string;
   value: Dayjs | null;
   onChange: (value: Dayjs) => void;
-  format?: string;
-  timeIntervals?: number;
-  disabledDate?: (date: Dayjs) => boolean | null | undefined;
-  className?: string;
   disabled?: boolean;
+  /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
+  disabledDate?: (date: Dayjs) => boolean | null | undefined;
 }
 
-const DefaultTimePicker = ({
-  disabled,
-  className,
-  value,
-  format = "HH:mm",
-  onChange,
-  timeIntervals = 10,
-}: TimePickerProps) => {
-  const handleDateChange = (date?: Date | null) => {
-    if (!date) {
-      msg.warning("base.selectDateError");
-      return;
-    }
-    onChange(dayjs(date));
-  };
-
+const DefaultTimePicker = ({ className, value, onChange, disabled, disabledDate }: TimePickerProps) => {
   return (
-    <ReactDatePicker
-      wrapperClassName="inline-block"
+    <NativeDateInput
       className={cn("inline-block w-auto", className)}
-      selected={value ? value.toDate() : new Date()}
-      onChange={handleDateChange}
-      showTimeSelect
-      showTimeSelectOnly
-      timeIntervals={timeIntervals}
-      timeCaption="Time"
-      dateFormat={format}
+      type="time"
+      value={value}
       disabled={disabled}
+      disabledDate={disabledDate}
+      onChange={onChange}
     />
   );
 };
@@ -194,9 +173,12 @@ 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/Model/AdminPanel.tsx

@@ -45,12 +45,14 @@ export default function AdminPanel<
   ),
 
   renderDashboard = summaryColumns?.length
-    ? ({ summary, hidePresents }) => (
+    ? ({ summary, hidePresents, onSelect, queryKey }) => (
         <Data.Dashboard
           summary={summary}
           slice={slice}
           columns={summaryColumns}
           queryMap={queryMap}
+          onSelect={onSelect}
+          queryKey={queryKey}
           hidePresents={hidePresents}
         />
       )

package/ui/styles.css

@@ -14,6 +14,9 @@
    기본 theme="css"는 data-theme 미부착 → :root 가 기본(dark). [data-theme="light"] override. */
 :root,
 [data-theme="dark"] {
+  /* Native controls the app does not paint — the date/time field's calendar popup, scrollbars, the caret —
+     take their colours from this and nothing else. */
+  color-scheme: dark;
   --background: #0a0a0a;
   --foreground: #fafafa;
   --primary: #fafafa;
@@ -46,6 +49,7 @@
 }
 
 [data-theme="light"] {
+  color-scheme: light;
   --background: #ffffff;
   --foreground: #0a0a0a;
   --primary: #171717;