@mohasinac/appkit 3.5.3 → 3.5.4

package/dist/ui/components/BaseListingCard.d.ts

@@ -21,7 +21,8 @@ export interface BaseListingCardRootProps {
     onTouchEnd?: () => void;
 }
 export interface BaseListingCardHeroProps {
-    aspect?: string;
+    /** Aspect ratio for the hero image — only these two produce a real CSS rule (Tailwind's static scanner can't see a dynamically-interpolated `aspect-[${var}]`). Defaults to `"4/3"`. */
+    aspect?: "square" | "4/3";
     variant?: "grid" | "list";
     className?: string;
     children?: ReactNode;

package/dist/ui/components/BaseListingCard.js

@@ -25,11 +25,10 @@ function BaseListingCardHero({ aspect, variant = "grid", className = "", childre
                 .filter(Boolean)
                 .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
     }
-    const aspectClass = aspect === "square"
-        ? "aspect-square"
-        : aspect === "4/3" || !aspect
-            ? "aspect-[4/3]"
-            : `aspect-[${aspect}]`;
+    // Literal, statically-scannable class names only — never interpolate an
+    // arbitrary value into `aspect-[...]`, Tailwind's JIT scanner can't see it
+    // and the rule silently never makes it into the compiled CSS.
+    const aspectClass = aspect === "square" ? "aspect-square" : "aspect-[4/3]";
     return (_jsx("div", { className: [
             "relative overflow-hidden bg-[var(--appkit-color-surface)] flex-shrink-0",
             aspectClass,

package/dist/ui/components/Button.js

@@ -116,6 +116,16 @@ const ACTION_KIND_VARIANT = {
 };
 export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild = false, action, ...props }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
+    // React 17+ no longer pools SyntheticEvents, so it's safe to hold onto the
+    // original triggering event across the confirmation dialog's async gap and
+    // forward it to the consumer's onClick once confirmed — not the confirm
+    // button's own click event (a different DOM element, with none of the
+    // data-* attributes the caller may have put on the real trigger). Per the
+    // DOM/React event spec, `currentTarget` itself is reset to null once the
+    // original event's own synchronous dispatch finishes, so it's captured
+    // separately here and restored onto the stored event before forwarding.
+    const pendingEventRef = React.useRef(null);
+    const pendingTargetRef = React.useRef(null);
     // Resolve defaults from action registry
     const resolvedVariant = variant ?? (action ? (ACTION_KIND_VARIANT[action.kind] ?? "primary") : "primary");
     const resolvedChildren = children ?? (action ? action.label : undefined);
@@ -159,37 +169,57 @@ export function Button({ variant, size = "md", className = "", isLoading = false
         }
         if (action?.confirmation) {
             event.preventDefault();
+            pendingEventRef.current = event;
+            pendingTargetRef.current = event.currentTarget;
             setConfirmOpen(true);
             return;
         }
         wrapAsync(userOnClick)(event);
     }, [disabled, isLoading, action, userOnClick, wrapAsync]);
-    const handleConfirm = useCallback((event) => {
+    const handleConfirm = useCallback(() => {
         setConfirmOpen(false);
-        wrapAsync(userOnClick)(event);
+        const originalEvent = pendingEventRef.current;
+        const originalTarget = pendingTargetRef.current;
+        pendingEventRef.current = null;
+        pendingTargetRef.current = null;
+        if (originalEvent) {
+            originalEvent.currentTarget = originalTarget;
+            wrapAsync(userOnClick)(originalEvent);
+        }
     }, [userOnClick, wrapAsync]);
-    if (asChild && React.isValidElement(resolvedChildren)) {
-        const child = resolvedChildren;
-        return React.cloneElement(child, {
-            ...props,
-            className: twMerge(String(child.props.className ?? ""), classes),
-            ...(disabled ? { "aria-disabled": true } : {}),
-        });
-    }
     const confirmDef = action?.confirmation;
     const confirmVariant = confirmDef?.confirmKind
         ? (ACTION_KIND_VARIANT[confirmDef.confirmKind] ?? "primary")
         : "primary";
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, "aria-label": resolvedAriaLabel, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: resolvedChildren })) : (_jsx("span", { className: "appkit-button__content", children: resolvedChildren }))] }), confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
-                    position: "fixed", inset: 0, zIndex: "var(--appkit-z-confirm, 1000)",
-                    display: "flex", alignItems: "center", justifyContent: "center",
-                    background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
-                }, onClick: (e) => { if (e.target === e.currentTarget)
-                    setConfirmOpen(false); }, children: _jsxs("div", { style: {
-                        background: "var(--appkit-color-surface)",
-                        borderRadius: "var(--appkit-radius-lg, 12px)",
-                        padding: "1.5rem",
-                        maxWidth: "380px", width: "calc(100% - 2rem)",
-                        boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
-                    }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body)] }));
+    // Built once and rendered alongside EITHER the asChild clone or the plain
+    // <button> below — this must never live inside an early return for only
+    // one of those two branches, or the other branch can never open a
+    // confirmation dialog at all (this was the actual asChild bug: the early
+    // return happened before this JSX was ever reached).
+    const confirmPortal = confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
+            position: "fixed", inset: 0, zIndex: "var(--appkit-z-confirm, 1000)",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
+        }, onClick: (e) => { if (e.target === e.currentTarget)
+            setConfirmOpen(false); }, children: _jsxs("div", { style: {
+                background: "var(--appkit-color-surface)",
+                borderRadius: "var(--appkit-radius-lg, 12px)",
+                padding: "1.5rem",
+                maxWidth: "380px", width: "calc(100% - 2rem)",
+                boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
+            }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body);
+    if (asChild && React.isValidElement(resolvedChildren)) {
+        const child = resolvedChildren;
+        // Never spread the caller's raw onClick here — it must go through
+        // handleClick so a configured action.confirmation dialog still gates
+        // the click even when rendering as a cloned child (e.g. next/link).
+        const { onClick: _rawOnClick, ...restProps } = props;
+        return (_jsxs(_Fragment, { children: [React.cloneElement(child, {
+                    ...restProps,
+                    className: twMerge(String(child.props.className ?? ""), classes),
+                    ...(disabled ? { "aria-disabled": true } : {}),
+                    onClick: handleClick,
+                }), confirmPortal] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, "aria-label": resolvedAriaLabel, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: resolvedChildren })) : (_jsx("span", { className: "appkit-button__content", children: resolvedChildren }))] }), confirmPortal] }));
 }

package/dist/ui/components/DateInput.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Label, Span, Text } from "./Typography";

package/dist/ui/components/DynamicBgDiv.js

@@ -7,12 +7,14 @@ export function DynamicBgDiv({ color, background, textColor, className = "", chi
         const el = ref.current;
         if (!el)
             return;
-        if (background)
-            el.style.background = background;
-        else if (color)
-            el.style.backgroundColor = color;
-        if (textColor)
-            el.style.color = textColor;
+        // Explicitly clear every property this component owns before
+        // (re-)applying — otherwise a value set on a previous render (e.g. a
+        // `background` gradient) stays in the inline style forever once that
+        // prop becomes undefined, even though a sibling prop like `color` is
+        // now supposed to take over.
+        el.style.background = background ?? "";
+        el.style.backgroundColor = !background && color ? color : "";
+        el.style.color = textColor ?? "";
     }, [background, color, textColor]);
     return (_jsx("div", { ref: ref, className: className, "aria-hidden": ariaHidden, children: children }));
 }

package/dist/ui/components/FormField.js

@@ -17,7 +17,7 @@ export function FormField({ label, name, card = false, type = "text", value = ""
     const errorId = `${inputId}-error`;
     const describedBy = showError ? errorId : undefined;
     if (type === "image" && onUpload) {
-        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => onChange?.(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx("div", { "aria-disabled": disabled || undefined, className: disabled ? "pointer-events-none opacity-60" : undefined, children: _jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => onChange?.(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }) }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
     }
     if (type === "media" && onUpload) {
         return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-506", children: [_jsx(MediaUploadField, { label: `${label || name}${required ? " *" : ""}`, value: value, onChange: (url) => onChange?.(url), onUpload: onUpload, disabled: disabled, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", captureMode: captureMode ?? "both", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));

package/dist/ui/components/HorizontalScroller.js

@@ -194,23 +194,34 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         return () => clearInterval(autoScrollTimer.current);
     }, [autoScroll, isPaused, autoScrollInterval, containerRef]);
     useEffect(() => {
-        if (!perView)
+        if (!perView && !loop)
             return;
         const el = containerRef.current;
         if (!el)
             return;
         const observer = new ResizeObserver(([entry]) => {
             const w = entry.contentRect.width;
-            const count = resolvePerView(perView, w);
-            if (count > 0) {
-                setColCount(count);
-                setItemWidth((w - (count - 1) * gap) / count);
+            if (perView) {
+                const count = resolvePerView(perView, w);
+                if (count > 0) {
+                    setColCount(count);
+                    setItemWidth((w - (count - 1) * gap) / count);
+                }
+            }
+            else {
+                // loop is true but no perView hint was given: items render at their
+                // natural width, so measure a real rendered item to get the scroll
+                // stride the clone-buffer offset / edge teleporter need — without
+                // this, itemWidth never resolves and loop mode never initializes.
+                const item = el.querySelector(".appkit-hscroller__item");
+                if (item)
+                    setItemWidth(item.getBoundingClientRect().width);
             }
             updateExtents();
         });
         observer.observe(el);
         return () => observer.disconnect();
-    }, [perView, gap, containerRef, updateExtents]);
+    }, [perView, loop, gap, containerRef, updateExtents]);
     // Recompute extents when content size changes (itemWidth resolved, items count changes).
     useEffect(() => {
         updateExtents();

package/dist/ui/components/Iframe.d.ts

@@ -15,7 +15,14 @@ export interface IframeProps extends Omit<IframeHTMLAttributes<HTMLIFrameElement
     aspect?: IframeAspect;
     /** Rounded corners preset. Default `"lg"`. */
     rounded?: IframeRounded;
-    /** Sandbox attribute. Default permits same-origin only. */
+    /**
+     * Sandbox attribute. Default is `"allow-same-origin allow-scripts
+     * allow-popups allow-forms"` — permissive enough for trusted third-party
+     * embeds (payment checkout panels, YouTube). Combining `allow-same-origin`
+     * with `allow-scripts` lets same-origin framed content remove its own
+     * sandbox restrictions, so pass a tighter override for any `src` that
+     * isn't a fully-trusted origin.
+     */
     sandbox?: string;
 }
 export declare function Iframe({ src, title, aspect, rounded, sandbox, loading, ...rest }: IframeProps): import("react").JSX.Element;

package/dist/ui/components/Layout.d.ts

@@ -184,7 +184,7 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLElement>, Surfa
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Container({ size, as, surface, padding, rounded, border, shadow, className, children, ...props }: ContainerProps): React.JSX.Element;
+export declare function Container({ size, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: ContainerProps): React.JSX.Element;
 /**
  * Vertical flex column. Use instead of `<div className="flex flex-col gap-4" data-section="layout-div-535">`.
  *
@@ -245,7 +245,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfacePr
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, wrap, smAlign, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: StackProps): React.JSX.Element;
+export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, wrap, smAlign, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: StackProps): React.JSX.Element;
 /**
  * Horizontal flex row. Use instead of `<div className="flex items-center gap-3" data-section="layout-div-536">`.
  *
@@ -315,7 +315,7 @@ declare const TEXT_COLOR_MAP: {
     readonly info: "appkit-color--info";
 };
 type TextColorKey = keyof typeof TEXT_COLOR_MAP;
-export declare function Row({ gap, centered, align, justify, textSize, textWeight, color, wrap, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: RowProps): React.JSX.Element;
+export declare function Row({ gap, centered, align, justify, textSize, textWeight, color, wrap, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: RowProps): React.JSX.Element;
 /**
  * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-537">`.
  *
@@ -355,5 +355,5 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement>, SurfacePro
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Grid({ cols, gap, align, justify, as, surface, padding, rounded, border, shadow, className, children, ...props }: GridProps): React.JSX.Element;
+export declare function Grid({ cols, gap, align, justify, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, children, ...props }: GridProps): React.JSX.Element;
 export {};

package/dist/ui/components/Layout.js

@@ -154,9 +154,9 @@ const JUSTIFY_MAP = {
     around: "appkit-justify--around",
     evenly: "appkit-justify--evenly",
 };
-export function Container({ size = "2xl", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+export function Container({ size = "2xl", as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
-    return (_jsx(Tag, { className: ["appkit-container", CONTAINER_MAP[size], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className]
+    return (_jsx(Tag, { className: ["appkit-container", CONTAINER_MAP[size], buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
@@ -178,7 +178,7 @@ function resolveDivideClass(divide, axis) {
     const base = `appkit-${axis}--divide`;
     return divide === "subtle" ? `${base}-subtle` : base;
 }
-export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, wrap = false, smAlign, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
+export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, wrap = false, smAlign, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-stack",
@@ -193,7 +193,7 @@ export function Stack({ gap = "md", centered = false, align = "stretch", justify
         wrap ? "flex-wrap" : "",
         smAlign ? STACK_SM_ALIGN_MAP[smAlign] : "",
         resolveDivideClass(divide, "stack"),
-        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)
@@ -231,7 +231,7 @@ const ROW_ODD_EVEN_MAP = {
     none: "",
     zebra: "even:bg-[var(--appkit-color-surface-input)] dark:even:bg-[var(--appkit-color-bg)]",
 };
-export function Row({ gap = "md", centered = false, align = "center", justify = "start", textSize, textWeight, color, wrap = false, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
+export function Row({ gap = "md", centered = false, align = "center", justify = "start", textSize, textWeight, color, wrap = false, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-row",
@@ -244,14 +244,14 @@ export function Row({ gap = "md", centered = false, align = "center", justify =
         textWeight ? TEXT_WEIGHT_MAP[textWeight] : "",
         color ? TEXT_COLOR_MAP[color] : "",
         resolveDivideClass(divide, "row"),
-        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));
 }
-export function Grid({ cols, gap = "md", align, justify, as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+export function Grid({ cols, gap = "md", align, justify, as, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const baseClass = cols !== undefined ? GRID_MAP[cols] : "appkit-grid";
     const classes = [
@@ -259,7 +259,7 @@ export function Grid({ cols, gap = "md", align, justify, as, surface, padding, r
         GAP_MAP[gap],
         align ? ITEMS_MAP[align] : "",
         justify ? JUSTIFY_MAP[justify] : "",
-        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)

package/dist/ui/components/Motion.js

@@ -108,7 +108,10 @@ export function AnimatedRow({ delay = 0, children, className, ...props }) {
 }
 export function Draggable({ axis, constraints, dragElastic = 0.1, children, ...props }) {
     const reduced = useReducedMotion();
-    const drag = reduced ? false : (axis === true ? true : axis || true);
+    // `axis` defaults to unrestricted (true) when omitted, but an explicit
+    // `axis={false}` must actually disable dragging — `axis || true` always
+    // collapsed a falsy axis back to `true`, making `axis={false}` a no-op.
+    const drag = reduced ? false : (axis ?? true);
     return (_jsx(motion.div, { drag: drag, dragConstraints: constraints, dragElastic: dragElastic, ...props, children: children }));
 }
 export function Swipeable({ onSwipeLeft, onSwipeRight, threshold = 50, children, ...props }) {

package/dist/ui/components/OtpInput.js

@@ -47,7 +47,7 @@ export function OtpInput({ length = 6, value, onChange, label, error, helperText
         const lastFilled = Math.min(sanitized.length, length - 1);
         focusAt(lastFilled);
     }
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: `${inputId}-0`, className: "appkit-form-field__label mb-2", children: label })), _jsx("div", { className: "flex gap-2", role: "group", "aria-labelledby": label ? `${inputId}-label` : undefined, children: digits.map((digit, i) => (_jsx("input", { ref: (el) => { inputsRef.current[i] = el; }, id: i === 0 ? `${inputId}-0` : undefined, type: "text", inputMode: inputMode, maxLength: 1, value: digit, disabled: disabled, autoFocus: autoFocus && i === 0, autoComplete: "one-time-code", "aria-label": `Digit ${i + 1} of ${length}`, className: [
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { id: `${inputId}-label`, htmlFor: `${inputId}-0`, className: "appkit-form-field__label mb-2", children: label })), _jsx("div", { className: "flex gap-2", role: "group", "aria-labelledby": label ? `${inputId}-label` : undefined, children: digits.map((digit, i) => (_jsx("input", { ref: (el) => { inputsRef.current[i] = el; }, id: i === 0 ? `${inputId}-0` : undefined, type: "text", inputMode: inputMode, maxLength: 1, value: digit, disabled: disabled, autoFocus: autoFocus && i === 0, autoComplete: "one-time-code", "aria-label": `Digit ${i + 1} of ${length}`, className: [
                         "appkit-input",
                         "appkit-otp-input",
                         error ? "appkit-input--error" : "",

package/dist/ui/components/PaginatedSelect.js

@@ -64,15 +64,26 @@ export function PaginatedSelect(props) {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const containerRef = useRef(null);
     const labelMap = useRef(new Map());
+    // Monotonic counter guarding against out-of-order async responses: a
+    // slower earlier request (e.g. for an already-abandoned search query)
+    // must never overwrite state after a faster, more recent request resolved.
+    const requestIdRef = useRef(0);
+    const wasOpenRef = useRef(false);
     const hasCreate = Boolean(createLabel && (renderCreateForm ?? (createFields && onCreateSubmit)));
     const resolvedOptions = options ?? asyncOptions;
     resolvedOptions.forEach((o) => labelMap.current.set(o.value, o.label));
     const load = useCallback(async (search, nextPage, reset = false) => {
         if (!loadOptions)
             return;
+        const requestId = ++requestIdRef.current;
         setLoading(true);
         try {
             const response = await loadOptions(search, nextPage);
+            // A newer request (new search, or the dropdown reopened) was issued
+            // while this one was in flight — its response is stale, discard it
+            // rather than clobbering state a more recent request already set.
+            if (requestId !== requestIdRef.current)
+                return;
             setAsyncOptions((prev) => {
                 const merged = reset ? response.items : [...prev, ...response.items];
                 merged.forEach((o) => labelMap.current.set(o.value, o.label));
@@ -82,13 +93,28 @@ export function PaginatedSelect(props) {
             setHasMore(response.hasMore);
         }
         finally {
-            setLoading(false);
+            if (requestId === requestIdRef.current)
+                setLoading(false);
         }
     }, [loadOptions]);
     useEffect(() => {
-        if (!open || !loadOptions)
+        if (!open || !loadOptions) {
+            wasOpenRef.current = false;
             return;
-        void load(query, 1, true);
+        }
+        // Load immediately the moment the dropdown opens; debounce subsequent
+        // reloads triggered by the user typing so every keystroke doesn't fire
+        // a new request.
+        const isFreshOpen = !wasOpenRef.current;
+        wasOpenRef.current = true;
+        if (isFreshOpen) {
+            void load(query, 1, true);
+            return;
+        }
+        const timer = setTimeout(() => {
+            void load(query, 1, true);
+        }, 300);
+        return () => clearTimeout(timer);
     }, [open, query, load, loadOptions]);
     useEffect(() => {
         if (!open || !containerRef.current)

package/dist/ui/components/Pagination.js

@@ -6,12 +6,17 @@ function getPageNumbers(currentPage, totalPages, maxVisible) {
         return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
     const pages = [];
-    const halfVisible = Math.floor(maxVisible / 2);
-    let startPage = Math.max(1, currentPage - halfVisible);
-    let endPage = Math.min(totalPages, currentPage + halfVisible);
-    if (currentPage <= halfVisible)
+    // Split unevenly (floor/ceil) around (maxVisible - 1) rather than using a
+    // single halved value on both sides — `Math.floor(maxVisible / 2)` on
+    // both sides produces a window of `2*halfVisible + 1`, which is one page
+    // too many whenever maxVisible is even.
+    const before = Math.floor((maxVisible - 1) / 2);
+    const after = Math.ceil((maxVisible - 1) / 2);
+    let startPage = Math.max(1, currentPage - before);
+    let endPage = Math.min(totalPages, currentPage + after);
+    if (currentPage <= before)
         endPage = maxVisible;
-    if (currentPage >= totalPages - halfVisible)
+    if (currentPage >= totalPages - after)
         startPage = totalPages - maxVisible + 1;
     if (startPage > 1) {
         pages.push(1);

package/dist/ui/components/RichTextEditor.js

@@ -1,12 +1,69 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
+// Matches exactly what this editor's own toolbar (bold/italic/underline/
+// lists/link/clear-formatting) and typing can legitimately produce.
+// Anything else — <script>, <img onerror=...>, <iframe>, <svg>, <style>,
+// <form>, event-handler attributes — can only have arrived via paste, and is
+// dropped entirely rather than risk it either executing live in the editor
+// or being persisted and re-rendered elsewhere as stored XSS.
+const ALLOWED_TAGS = new Set([
+    "B", "STRONG", "I", "EM", "U", "S", "STRIKE",
+    "UL", "OL", "LI", "A", "BR", "DIV", "SPAN", "P",
+]);
+function isSafeHref(href) {
+    const trimmed = href.trim();
+    // Same rule as string.formatter.ts's applyMark: allow http(s)/mailto, a
+    // single leading "/" (same-site relative path, NOT "//host" protocol-
+    // relative), or "#" — reject everything else including javascript:.
+    return /^(https?:\/\/|mailto:|\/(?!\/)|#)/i.test(trimmed);
+}
+function sanitizeRichTextHtml(html) {
+    if (typeof document === "undefined" || !html)
+        return "";
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const walk = (root) => {
+        Array.from(root.childNodes).forEach((child) => {
+            if (child.nodeType === Node.ELEMENT_NODE) {
+                const el = child;
+                if (!ALLOWED_TAGS.has(el.tagName)) {
+                    root.removeChild(el);
+                    return;
+                }
+                Array.from(el.attributes).forEach((attr) => {
+                    if (el.tagName === "A" && attr.name.toLowerCase() === "href") {
+                        if (!isSafeHref(attr.value))
+                            el.setAttribute("href", "#");
+                        return;
+                    }
+                    el.removeAttribute(attr.name);
+                });
+                walk(el);
+            }
+            else if (child.nodeType !== Node.TEXT_NODE) {
+                root.removeChild(child);
+            }
+        });
+    };
+    walk(template.content);
+    return template.innerHTML;
+}
 export function RichTextEditor({ value, onChange, disabled = false, className = "", minHeightClassName = "min-h-[180px]", placeholder = "Write formatted content...", }) {
     const editorRef = useRef(null);
     const emitChange = () => {
         if (!editorRef.current)
             return;
-        onChange(editorRef.current.innerHTML);
+        const raw = editorRef.current.innerHTML;
+        const sanitized = sanitizeRichTextHtml(raw);
+        // Only touch the live DOM (which would reset caret position) when
+        // sanitization actually changed something — a no-op for every normal
+        // keystroke/toolbar action, since those only ever produce allowlisted
+        // markup; only a malicious paste triggers this branch.
+        if (sanitized !== raw) {
+            editorRef.current.innerHTML = sanitized;
+        }
+        onChange(sanitized);
     };
     const exec = (command, commandValue) => {
         if (disabled || typeof document === "undefined")
@@ -51,8 +108,12 @@ export function RichTextEditor({ value, onChange, disabled = false, className =
         const editor = editorRef.current;
         if (!editor)
             return;
-        if (editor.innerHTML !== value) {
-            editor.innerHTML = value;
+        // Sanitize on every incoming `value` too — this is the stored-XSS path:
+        // previously-saved content (e.g. loaded from Firestore) must not be
+        // trusted just because it was already persisted.
+        const safeValue = sanitizeRichTextHtml(value);
+        if (editor.innerHTML !== safeValue) {
+            editor.innerHTML = safeValue;
         }
     }, [value]);
     return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b border-zinc-200 p-2 border-[var(--appkit-color-border)]", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));

package/dist/ui/components/Select.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Div } from "./Div";

package/dist/ui/components/Semantic.d.ts

@@ -87,7 +87,7 @@ export interface ArticleProps extends React.HTMLAttributes<HTMLElement>, Surface
     color?: SemanticColor;
     children?: React.ReactNode;
 }
-export declare function Article({ className, surface, padding, rounded, border, shadow, color, children, ...props }: ArticleProps): React.JSX.Element;
+export declare function Article({ className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, color, children, ...props }: ArticleProps): React.JSX.Element;
 /**
  * Semantic `<main>` element.
  * Wraps the primary content of the document. Should appear only once per page.
@@ -96,7 +96,7 @@ export interface MainProps extends React.HTMLAttributes<HTMLElement>, SurfacePro
     color?: SemanticColor;
     children: React.ReactNode;
 }
-export declare function Main({ className, surface, padding, paddingX, paddingY, rounded, border, shadow, color, children, ...props }: MainProps): React.JSX.Element;
+export declare function Main({ className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, color, children, ...props }: MainProps): React.JSX.Element;
 /**
  * Semantic `<aside>` element.
  * Use for supplementary content tangentially related to the main content:
@@ -134,7 +134,7 @@ export interface NavProps extends React.HTMLAttributes<HTMLElement>, SurfaceProp
     textSize?: "xs" | "sm" | "base" | "lg";
     children: React.ReactNode;
 }
-export declare function Nav({ surface, padding, rounded, border, shadow, spacing, gap, layout, color, textSize, className, children, ...props }: NavProps): React.JSX.Element;
+export declare function Nav({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, spacing, gap, layout, color, textSize, className, children, ...props }: NavProps): React.JSX.Element;
 /**
  * Semantic `<header>` element for block-level component headers.
  * Use inside `Section`, `Article`, or card bodies — NOT as the page-level header.
@@ -151,7 +151,7 @@ export declare function Nav({ surface, padding, rounded, border, shadow, spacing
 export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function BlockHeader({ className, surface, padding, rounded, border, shadow, children, ...props }: BlockHeaderProps): React.JSX.Element;
+export declare function BlockHeader({ className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: BlockHeaderProps): React.JSX.Element;
 /**
  * Semantic `<footer>` element for block-level component footers.
  * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.
@@ -159,7 +159,7 @@ export declare function BlockHeader({ className, surface, padding, rounded, bord
 export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function BlockFooter({ className, surface, padding, rounded, border, shadow, children, ...props }: BlockFooterProps): React.JSX.Element;
+export declare function BlockFooter({ className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: BlockFooterProps): React.JSX.Element;
 /**
  * Semantic `<ul>` (unordered list) element.
  *
@@ -266,7 +266,7 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     stickyHeader?: boolean;
     children: React.ReactNode;
 }
-export declare function Table({ variant, size, stickyHeader, className, surface, padding, rounded, border, shadow, children, ...props }: TableProps): React.JSX.Element;
+export declare function Table({ variant, size, stickyHeader, className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: TableProps): React.JSX.Element;
 type TheadSurface = "none" | "default" | "muted" | "subtle";
 export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
     /** Background tone for the header row. */
@@ -347,16 +347,16 @@ export declare function Code({ color, weight, size, padding, rounded, surface, c
 export interface PreProps extends React.HTMLAttributes<HTMLPreElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function Pre({ className, surface, padding, rounded, border, shadow, children, ...props }: PreProps): React.JSX.Element;
+export declare function Pre({ className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: PreProps): React.JSX.Element;
 export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement>, SurfaceProps {
     color?: "default" | "primary" | "info" | "warning";
     children: React.ReactNode;
 }
-export declare function Blockquote({ color, className, surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }: BlockquoteProps): React.JSX.Element;
+export declare function Blockquote({ color, className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: BlockquoteProps): React.JSX.Element;
 export interface FigureProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function Figure({ className, surface, padding, rounded, border, shadow, children, ...props }: FigureProps): React.JSX.Element;
+export declare function Figure({ className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: FigureProps): React.JSX.Element;
 export interface FigcaptionProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
 }
@@ -372,7 +372,7 @@ export interface DlProps extends React.HTMLAttributes<HTMLDListElement>, Surface
     divide?: boolean | "default" | "subtle";
     children: React.ReactNode;
 }
-export declare function Dl({ variant, divide, className, surface, padding, rounded, border, shadow, children, ...props }: DlProps): React.JSX.Element;
+export declare function Dl({ variant, divide, className, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }: DlProps): React.JSX.Element;
 type DtDdColor = "default" | "primary" | "muted" | "faint";
 type DtDdWeight = "normal" | "medium" | "semibold" | "bold";
 export interface DtProps extends React.HTMLAttributes<HTMLElement> {