akanjs 3.0.0-alpha.34 → 3.0.0-alpha.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/store/agentic/StToolBuilder.ts

@@ -27,6 +27,11 @@ export interface StToolMeta {
   effect?: ToolEffect;
   confirm?: ToolConfirm;
   guard?: ToolGuard;
+  /**
+   * Set by a component that renders once per row. It is only true when the row's id rides in an argument rather
+   * than in the closure, which is what makes every row's registration interchangeable.
+   */
+  shared?: boolean;
 }
 
 interface StToolArg {
@@ -115,6 +120,7 @@ export class StToolBuilder<Args extends unknown[] = []> {
         name,
         description: spec.meta.desc,
         effect: spec.meta.effect,
+        ...(spec.meta.shared ? { shared: true } : {}),
         parameters: StToolBuilder.parametersOf(spec.args),
         
         ...(spec.meta.confirm === undefined && !name.startsWith("remove")

package/types/store/agentic/StToolBuilder.d.ts

@@ -6,6 +6,11 @@ export interface StToolMeta {
     effect?: ToolEffect;
     confirm?: ToolConfirm;
     guard?: ToolGuard;
+    /**
+     * Set by a component that renders once per row. It is only true when the row's id rides in an argument rather
+     * than in the closure, which is what makes every row's registration interchangeable.
+     */
+    shared?: boolean;
 }
 interface StToolArg {
     name: string;

package/types/ui/Dialog/LegacyModal.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface LegacyModalProps {
+    className?: string;
+    bodyClassName?: string;
+    confirmClose?: boolean;
+    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.
+ */
+export declare const LegacyModal: ({ className, bodyClassName, confirmClose, children, onCancel }: LegacyModalProps) => import("react").ReactPortal | null;

package/types/ui/Dialog/context.d.ts

@@ -4,6 +4,12 @@ export interface DialogContextType {
     setOpen: (open: boolean) => void;
     openDialog: () => void;
     closeDialog: () => void;
+    /**
+     * How this dialog actually dismisses, handed up by whichever surface is drawing it. `confirmClose` and
+     * `onCancel` hang off that path, so a close that only flipped `open` would skip both — which is what made an
+     * agent's close, and `Dialog.Close`, quietly different from clicking the X.
+     */
+    registerDismiss: (dismiss: (() => void) | null) => void;
     title: ReactNode;
     setTitle: (title: ReactNode) => void;
     action: ReactNode;

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

@@ -2,6 +2,7 @@ import { type ProviderProps } from "./Provider.d.ts";
 export declare const Dialog: {
     ({ children, ...props }: ProviderProps): import("react/jsx-runtime").JSX.Element;
     Modal: ({ className, bodyClassName, confirmClose, children, onCancel }: import("./Modal.d.ts").ModalProps) => import("react").ReactPortal | null;
+    LegacyModal: ({ className, bodyClassName, confirmClose, children, onCancel }: import("./LegacyModal.d.ts").LegacyModalProps) => import("react").ReactPortal | null;
     Title: ({ children }: import("./Title.d.ts").TitleProps) => null;
     Action: ({ children }: import("./Action.d.ts").ActionProps) => null;
     Trigger: ({ className, children }: import("./Trigger.d.ts").TriggerProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Dropdown.d.ts

@@ -12,8 +12,10 @@ export interface DropdownProps {
     buttonClassName?: string;
     /** Additional classes for the dropdown content panel. */
     dropdownClassName?: string;
+    /** Trigger edge the menu lines up with. Position is computed, so a `left-0` class cannot do this. */
+    align?: "start" | "end";
 }
-export declare const DefaultDropdown: ({ value, content, className, buttonClassName, dropdownClassName }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultDropdown: ({ value, content, className, buttonClassName, dropdownClassName, align, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Dropdown. Resolves to a route-scoped override when a `page/**\/_overrides.tsx`
  * in the route's ancestry declares one, otherwise renders {@link DefaultDropdown}.

package/types/ui/LegacyModal.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface LegacyModalProps {
+    /** Additional classes for the modal surface. */
+    className?: string;
+    /** Optional modal title. */
+    title?: string | ReactNode;
+    /** Optional action area, usually footer buttons. */
+    action?: ReactNode;
+    /** Controlled open state. */
+    open: boolean;
+    /** Called when the modal requests closing. */
+    onCancel: () => void;
+    /** Additional classes for the content body. */
+    bodyClassName?: string;
+    children?: ReactNode;
+    /** Ask for close confirmation before dismissing. */
+    confirmClose?: boolean;
+}
+/**
+ * Previous akanjs modal skin: spring open/close and a drag-to-dismiss sheet on touch. Kept for screens
+ * built around that motion. New work uses {@link Modal}, which takes the same props with no animation,
+ * and unlike this one resolves through the `Modal` override slot.
+ */
+export declare const LegacyModal: ({ className, title, action, open, onCancel, bodyClassName, children, confirmClose, }: LegacyModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,8 @@ interface NewProps<Full = any> {
     renderTitle?: ((model: {
         id: string;
     }) => string | ReactNode) | string;
+    /** Suffixes the tool this button publishes. Only a second create button for the same slice needs one. */
+    namespace?: string;
 }
-export default function New({ className, wrapperClassName, type, children, slice, modal, partial, renderTitle, }: NewProps): import("react/jsx-runtime").JSX.Element;
+export default function New({ className, wrapperClassName, type, children, slice, modal, partial, renderTitle, namespace, }: NewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,8 @@ interface NewWrapperProps<Full = any> {
     setDefault?: boolean;
     modal?: string | null;
     resets?: string[] | null;
+    /** Suffixes the tool this trigger publishes. Only a second create trigger for the same slice needs one. */
+    namespace?: string;
 }
 export default function NewWrapper<Full>({ partial, ...props }: NewWrapperProps<Full>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,7 @@ interface NewWrapperProps<Full = any> {
     setDefault?: boolean;
     modal?: string | null;
     resets?: string[] | null;
+    namespace?: string;
 }
-export declare const NewWrapper_Client: <Full>({ children, slice, partial, setDefault, className, modal, resets, }: NewWrapperProps<Full>) => import("react/jsx-runtime").JSX.Element;
+export declare const NewWrapper_Client: <Full>({ children, slice, partial, setDefault, className, modal, resets, namespace, }: NewWrapperProps<Full>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/ui/index.d.ts

@@ -23,6 +23,7 @@ export { InfiniteScroll } from "./InfiniteScroll.d.ts";
 export { Input } from "./Input.d.ts";
 export { KeyboardAvoiding } from "./KeyboardAvoiding.d.ts";
 export { Layout } from "./Layout.d.ts";
+export { LegacyModal } from "./LegacyModal.d.ts";
 export { Link } from "./Link.d.ts";
 export { Load } from "./Load.d.ts";
 export { Loading } from "./Loading.d.ts";

package/types/ui/overlayLayer.d.ts

@@ -8,6 +8,19 @@
  * recognises its own overlays exactly, instead of guessing from how close a dialog happens to be.
  */
 export declare const OVERLAY_LAYER_ATTR = "data-akan-overlay";
+/**
+ * Stacking order for overlays that portal to `document.body`, where nesting no longer decides who is on
+ * top. A Popconfirm outranks a dropdown menu because `Model.Remove` draws one from inside a menu item,
+ * and its scrim outranks the menu so the click that answers the confirm is not also a menu selection.
+ * A Select's options stay under both: it is a field, and whatever opened over it took the click that
+ * dismisses it.
+ */
+export declare const overlayZ: {
+    readonly select: 90;
+    readonly dropdown: 100;
+    readonly popconfirmScrim: 105;
+    readonly popconfirm: 110;
+};
 /** Wrap the content a dismissable container owns, with the scope from {@link useOverlayScope}. */
 export declare const OverlayOwnerProvider: import("react").Provider<string>;
 /** Scope a dismissable container hands to its content. Nests as a `parent/child` path. */

package/types/ui/overlayPosition.d.ts

@@ -0,0 +1,28 @@
+import { type RefObject } from "react";
+export interface OverlayPosition {
+    top: number;
+    left: number;
+    /** Placed above the trigger, because there was no room below. */
+    above: boolean;
+    /** The trigger's centre relative to the panel's left edge, held clear of the panel's rounded corners. */
+    anchorOffset: number;
+    /** The trigger's own width, for a panel that lines up with the control it drops out of. */
+    anchorWidth: number;
+}
+/**
+ * Places a portalled panel against its trigger in viewport coordinates.
+ *
+ * A panel positioned inside its own tree is clipped by every `overflow` ancestor it has — the modal
+ * surface, the modal's scrolling body, a table's scroll container, the dropdown menu a row verb sits in —
+ * so overlay panels portal out to `document.body` and are placed here instead of by CSS.
+ * `position: fixed` in place would not do it either: a fixed element inside a transformed ancestor is laid
+ * out and clipped by that ancestor, and the modal surface animates a transform.
+ */
+export declare const useOverlayPosition: ({ opened, triggerRef, panelRef, align, gap, }: {
+    opened: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    panelRef: RefObject<HTMLElement | null>;
+    align: "start" | "end";
+    /** Distance from the trigger. Raise it for a panel whose pointer sticks out past its own edge. */
+    gap?: number;
+}) => OverlayPosition | null;

package/types/vendor/use-agentic/AgenticSurface.d.ts

@@ -15,6 +15,12 @@ export declare class AgenticSurface {
     static childPath(parent: string[], id: string): string[];
     static fullName(scope: string[], name: string): string;
     subscribe(listener: () => void): () => void;
+    /**
+     * A row component registers the same name once per row. That is legal when the tool takes the row's id as an
+     * argument rather than closing over it, because every registration is then interchangeable and last-wins picks
+     * an equivalent one — `shared` is the registrant saying so, and it turns fifty rows from fifty collisions into
+     * one declaration. A shared name landing on top of a name nobody shared is still a real clash, and still warns.
+     */
     registerTool(scope: string[], entry: ToolEntry): () => void;
     registerResource(scope: string[], entry: ResourceEntry): () => void;
     openScope(parent: string[], scope: ScopeEntry): () => void;

package/types/vendor/use-agentic/types.d.ts

@@ -11,6 +11,8 @@ export interface ToolEntry {
     effect?: ToolEffect;
     confirm?: ToolConfirm;
     guard?: ToolGuard;
+    /** Declares that repeat registrations of this name are interchangeable — see `AgenticSurface.registerTool`. */
+    shared?: boolean;
     run: (args: Record<string, unknown>) => unknown;
 }
 /** One call an agent made through the surface, in the order it made them. */

package/types/webkit/index.d.ts

@@ -3,6 +3,7 @@ export { createRobotPage } from "./createRobotPage.d.ts";
 export { createSitemapPage } from "./createSitemapPage.d.ts";
 export { lazy } from "./lazy.d.ts";
 export type * from "./types.d.ts";
+export { useBodyScrollLock } from "./useBodyScrollLock.d.ts";
 export { useCamera } from "./useCamera.d.ts";
 export { useCodepush } from "./useCodepush.d.ts";
 export { useContact } from "./useContact.d.ts";

package/types/webkit/useBodyScrollLock.d.ts

@@ -0,0 +1,2 @@
+/** Hold `document.body` unscrollable while `active`. */
+export declare const useBodyScrollLock: (active: boolean) => void;

package/ui/Data/ListContainer.tsx

@@ -143,11 +143,6 @@ export default function ListContainer<
     editModel: `edit${modelClassName}`,
     viewModel: `view${modelClassName}`,
     removeModel: `remove${modelClassName}`,
-    submitModel: `submit${modelClassName}`,
-    setModelModal: `set${modelClassName}Modal`,
-    resetModel: `reset${modelClassName}`,
-    cancelEditOfModel: `cancelEditOf${modelClassName}`,
-    closeViewOfModel: `closeViewOf${modelClassName}`,
   };
   const namesOfSlice = {
     modelList: sliceName.replace(names.model, names.modelList),
@@ -166,8 +161,6 @@ export default function ListContainer<
     editModel: sliceName.replace(names.model, names.editModel),
     viewModel: sliceName.replace(names.model, names.viewModel),
     removeModel: sliceName.replace(names.model, names.removeModel),
-    cancelEditOfModel: sliceName.replace(names.model, names.cancelEditOfModel),
-    closeViewOfModel: sliceName.replace(names.model, names.closeViewOfModel),
   };
   const [view, setView] = useState(type);
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
@@ -243,33 +236,24 @@ export default function ListContainer<
   st.tool(rowActions.includes("edit") && renderTemplate ? namesOfSlice.editModel : null, {
     desc: `Open one ${modelName} in the edit form.`,
     effect: "state",
+    shared: true,
   })
     .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.`,
     effect: "state",
+    shared: true,
   })
     .arg("modelId", ID)
     .exec((modelId) => storeDo[namesOfSlice.viewModel](modelId));
   st.tool(rowActions.includes("remove") ? namesOfSlice.removeModel : null, {
     desc: `Remove one ${modelName}.`,
     effect: "mutation",
+    shared: true,
   })
     .arg("modelId", ID)
     .exec((modelId) => storeDo[namesOfSlice.removeModel](modelId));
-  st.tool(renderTemplate ? names.submitModel : null, {
-    desc: `Save the ${modelName} the edit form holds.`,
-    effect: "mutation",
-  }).exec(() => storeDo[names.submitModel]({ sliceName }));
-  st.tool(renderTemplate ? namesOfSlice.cancelEditOfModel : null, {
-    desc: `Close the ${modelName} edit form without saving.`,
-    effect: "state",
-  }).exec(() => storeDo[names.setModelModal](null));
-  st.tool(renderView ? namesOfSlice.closeViewOfModel : null, {
-    desc: `Close the ${modelName} detail view.`,
-    effect: "state",
-  }).exec(() => storeDo[names.resetModel]());
   const scopePath = useScreenScope({
     id: sliceName,
     kind: refName,

package/ui/Dialog/LegacyModal.tsx

@@ -0,0 +1,241 @@
+"use client";
+import { useDrag } from "@use-gesture/react";
+import { cn, usePage } from "akanjs/client";
+import { animated } from "akanjs/ui";
+import { useBodyScrollLock, useEscapeKey } from "akanjs/webkit";
+import { type ReactNode, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { BiX } from "react-icons/bi";
+import { config, useSpring } from "react-spring";
+import { buttonRecipe } from "../Button";
+import { useOverlayLayerProps } from "../overlayLayer";
+
+import { DialogContext } from "./context";
+
+const MODAL_MARGIN = 0; 
+const OPACITY = { START: 0, END: 1 };
+
+const interpolate = (o: number, i: number, t: number) => {
+  return o + (i - o) * t;
+};
+
+export interface LegacyModalProps {
+  className?: string;
+  bodyClassName?: string;
+  confirmClose?: boolean;
+  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.
+ */
+export const LegacyModal = ({ className, bodyClassName, confirmClose, children, onCancel }: LegacyModalProps) => {
+  const { open, setOpen, registerDismiss, title, action } = useContext(DialogContext);
+  const { l } = usePage();
+  const ref = useRef<HTMLDivElement>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closingRef = useRef(false);
+  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);
+  const [isMounted, setIsMounted] = useState(open);
+  const [showBackground, setShowBackground] = useState(false);
+
+  const openModal = useCallback(
+    async ({ canceled }: { canceled?: boolean } = {}) => {
+      closingRef.current = false;
+      setIsMounted(true);
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = setTimeout(() => {
+        setShowBackground(true);
+      }, 100);
+      await Promise.all(api.start({ translate: 0, immediate: false, config: canceled ? config.wobbly : config.stiff }));
+    },
+    [api],
+  );
+
+  const closeModal = useCallback(
+    async ({
+      velocity = 0,
+      confirmClose,
+      notifyCancel = true,
+    }: {
+      velocity?: number;
+      confirmClose?: boolean;
+      notifyCancel?: boolean;
+    }) => {
+      if (closingRef.current) return;
+      if (confirmClose && !window.confirm(l("base.confirmClose"))) {
+        return;
+      }
+
+      closingRef.current = true;
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = setTimeout(() => {
+        setShowBackground(false);
+      }, 100);
+      await Promise.all(api.start({ translate: 1, immediate: false, config: { ...config.stiff, velocity } }));
+      setIsMounted(false);
+      setOpen(false);
+      if (notifyCancel) onCancel?.();
+      closingRef.current = false;
+    },
+    [api, l, onCancel, setOpen],
+  );
+
+  const requestClose = useCallback(
+    (options?: { velocity?: number }) => {
+      void closeModal({ velocity: options?.velocity, confirmClose });
+    },
+    [closeModal, confirmClose],
+  );
+
+  const bind = useDrag(
+    ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], movement: [, my], cancel, canceled }) => {
+      if (!ref.current) return;
+      const height = Math.max((ref.current.clientHeight || MODAL_MARGIN) - MODAL_MARGIN, 1);
+      if (my > 70) cancel();
+      if (last) {
+        if (my > height * 0.5 || (vy > 0.5 && dy > 0)) requestClose({ velocity: vy / height });
+        else void openModal({ canceled });
+      } else void api.start({ translate: oy / height, immediate: true });
+    },
+    { from: () => [0, translate.get()], filterTaps: true, bounds: { top: 0 }, rubberband: true },
+  );
+
+  const opacity = translate.to((t) => {
+    return interpolate(OPACITY.END, OPACITY.START, t);
+  });
+  const translateY = translate.to((t) => {
+    return `${t * 100}%`;
+  });
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    setPortalElement(document.body);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      void openModal();
+    }
+  }, [open, openModal]);
+
+  useEffect(() => {
+    if (!open && isMounted) {
+      void closeModal({ notifyCancel: false });
+    }
+  }, [closeModal, isMounted, open]);
+
+  useBodyScrollLock(isMounted);
+
+  useEffect(() => {
+    if (!isMounted || !portalElement || typeof document === "undefined") return;
+
+    focusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    queueMicrotask(() => {
+      ref.current?.focus();
+    });
+
+    return () => {
+      if (focusedElementRef.current && document.contains(focusedElementRef.current)) {
+        focusedElementRef.current.focus();
+      }
+      focusedElementRef.current = null;
+    };
+  }, [isMounted, portalElement]);
+
+  const latestClose = useRef(requestClose);
+  latestClose.current = requestClose;
+  useEffect(() => {
+    registerDismiss(() => {
+      latestClose.current();
+    });
+    return () => {
+      registerDismiss(null);
+    };
+  }, [registerDismiss]);
+
+  useEscapeKey(isMounted, requestClose);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+
+  if (!isMounted || !portalElement) return null;
+
+  return createPortal(
+    <>
+      <div
+        {...overlayLayerProps}
+        className={cn("fixed inset-0 z-10", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-sm")}
+      />
+      <div
+        {...overlayLayerProps}
+        className="fixed inset-0 z-10 flex items-center justify-center p-4"
+        onClick={(event) => {
+          if (event.target !== event.currentTarget) return;
+          requestClose();
+        }}
+      >
+        <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,
+          )}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={contentId}
+          tabIndex={-1}
+        >
+          <animated.div
+            {...bind()}
+            className={cn(
+              "flex shrink-0 touch-pan-y flex-col",
+              title && "border-border/70 border-b bg-card/80 backdrop-blur-sm",
+            )}
+          >
+            <div className="flex justify-center pt-2 md:hidden">
+              <div className="h-1 w-10 rounded-full bg-foreground/15" />
+            </div>
+            <div className="flex items-start gap-3 px-5 pt-4 pb-3">
+              <div className="min-w-0 flex-1 font-semibold text-lg leading-snug" id={titleId}>
+                {title}
+              </div>
+              <button
+                aria-label="Close"
+                className={buttonRecipe(
+                  { variant: "ghost", size: "icon" },
+                  "-mt-1 -mr-2 size-8 shrink-0 rounded-full text-foreground/45 hover:text-foreground",
+                )}
+                onClick={() => requestClose()}
+                type="button"
+              >
+                <BiX className="text-2xl" />
+              </button>
+            </div>
+          </animated.div>
+          <div
+            className={cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-5 pt-4 pb-5", bodyClassName)}
+            id={contentId}
+          >
+            {children}
+          </div>
+          {action ? <div className="shrink-0 border-border/70 border-t bg-muted/30 px-5 py-4">{action}</div> : null}
+        </animated.div>
+      </div>
+    </>,
+    portalElement,
+  );
+};