@mohasinac/appkit 3.5.2 → 3.5.4

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> {

package/dist/ui/components/Semantic.js

@@ -59,9 +59,9 @@ export function sectionBackgroundStyle(bg) {
             return {};
     }
 }
-export const Section = React.forwardRef(({ tone = "plain", background, color, layout, gap, align, justify, className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }, ref) => (_jsxs("section", { className: [
+export const Section = React.forwardRef(({ tone = "plain", background, color, layout, gap, align, justify, className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }, ref) => (_jsxs("section", { className: [
         SECTION_TONE_MAP[tone],
-        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         color ? SEMANTIC_COLOR_MAP[color] : "",
         layout ? SECTION_LAYOUT_MAP[layout] : "",
         gap ? SECTION_GAP_MAP[gap] : "",
@@ -73,13 +73,13 @@ export const Section = React.forwardRef(({ tone = "plain", background, color, la
         .filter(Boolean)
         .join(" "), ref: ref, ...props, children: [background?.value && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-0 -z-10", style: sectionBackgroundStyle(background) }), background.overlay?.enabled && (_jsx("span", { "aria-hidden": true, className: "absolute inset-0 -z-10", style: { backgroundColor: background.overlay.color, opacity: background.overlay.opacity } }))] })), children] })));
 Section.displayName = "Section";
-export function Article({ className = "", surface, padding, rounded, border, shadow, color, children, ...props }) {
-    return (_jsx("article", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
+export function Article({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, color, children, ...props }) {
+    return (_jsx("article", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Main({ className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, color, children, ...props }) {
-    return (_jsx("main", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
+export function Main({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, color, children, ...props }) {
+    return (_jsx("main", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export const Aside = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, color, children, ...props }, ref) => (_jsx("aside", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
+export const Aside = React.forwardRef(({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, color, children, ...props }, ref) => (_jsx("aside", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
 Aside.displayName = "Aside";
 const NAV_TEXT_SIZE_MAP = {
     xs: "text-xs",
@@ -97,8 +97,8 @@ const NAV_SPACING_MAP = {
 };
 const NAV_GAP_MAP = {
     none: "",
-    "2xs": "gap-1.5",
-    xs: "gap-1",
+    "2xs": "gap-1",
+    xs: "gap-1.5",
     sm: "gap-2",
     md: "gap-3",
     lg: "gap-4",
@@ -114,9 +114,9 @@ const NAV_COLOR_MAP = {
     muted: "appkit-color--muted",
     faint: "appkit-color--faint",
 };
-export function Nav({ surface, padding, rounded, border, shadow, spacing, gap, layout, color, textSize, className = "", children, ...props }) {
+export function Nav({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, spacing, gap, layout, color, textSize, className = "", children, ...props }) {
     return (_jsx("nav", { className: [
-            buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+            buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
             spacing ? NAV_SPACING_MAP[spacing] : "",
             gap ? NAV_GAP_MAP[gap] : "",
             layout ? NAV_LAYOUT_MAP[layout] : "",
@@ -125,11 +125,11 @@ export function Nav({ surface, padding, rounded, border, shadow, spacing, gap, l
             className,
         ].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function BlockHeader({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("header", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function BlockHeader({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
+    return (_jsx("header", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function BlockFooter({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("footer", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function BlockFooter({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
+    return (_jsx("footer", { className: [buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 const LIST_MARKER_MAP = {
     disc: "appkit-list--marker-disc",
@@ -263,8 +263,8 @@ const TABLE_SIZE_MAP = {
     md: "appkit-table--md",
     lg: "appkit-table--lg",
 };
-export function Table({ variant = "default", size = "md", stickyHeader = false, className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("table", { className: ["appkit-table", TABLE_VARIANT_MAP[variant], TABLE_SIZE_MAP[size], stickyHeader ? "appkit-table--sticky-header" : "", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Table({ variant = "default", size = "md", stickyHeader = false, className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
+    return (_jsx("table", { className: ["appkit-table", TABLE_VARIANT_MAP[variant], TABLE_SIZE_MAP[size], stickyHeader ? "appkit-table--sticky-header" : "", buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 const THEAD_SURFACE_MAP = {
     none: "",
@@ -444,8 +444,8 @@ export function Code({ color = "default", weight, size, padding, rounded, surfac
             className,
         ].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Pre({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("pre", { className: ["appkit-pre", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Pre({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
+    return (_jsx("pre", { className: ["appkit-pre", buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 const BLOCKQUOTE_COLOR_MAP = {
     default: "appkit-blockquote--default",
@@ -453,22 +453,22 @@ const BLOCKQUOTE_COLOR_MAP = {
     info: "appkit-blockquote--info",
     warning: "appkit-blockquote--warning",
 };
-export function Blockquote({ color = "default", className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }) {
-    return (_jsx("blockquote", { className: ["appkit-blockquote", BLOCKQUOTE_COLOR_MAP[color], buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Blockquote({ color = "default", className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
+    return (_jsx("blockquote", { className: ["appkit-blockquote", BLOCKQUOTE_COLOR_MAP[color], buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Figure({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
-    return (_jsx("figure", { className: ["appkit-figure", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+export function Figure({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
+    return (_jsx("figure", { className: ["appkit-figure", buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 export function Figcaption({ className = "", children, ...props }) {
     return (_jsx("figcaption", { className: ["appkit-figcaption", className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Dl({ variant = "stacked", divide, className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+export function Dl({ variant = "stacked", divide, className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, children, ...props }) {
     const divideCls = divide
         ? divide === "subtle"
             ? "appkit-stack--divide-subtle"
             : "appkit-stack--divide"
         : "";
-    return (_jsx("dl", { className: ["appkit-dl", variant === "inline" ? "appkit-dl--inline" : "appkit-dl--stacked", divideCls, buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+    return (_jsx("dl", { className: ["appkit-dl", variant === "inline" ? "appkit-dl--inline" : "appkit-dl--stacked", divideCls, buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 const DT_DD_COLOR_MAP = {
     default: "",

package/dist/ui/components/SideDrawer.js

@@ -124,18 +124,20 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
     }, [isOpen]);
     // Prevent body scroll when drawer is open
     useEffect(() => {
-        if (isOpen) {
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            document.body.style.overflow = "hidden";
-            document.body.style.paddingRight = `${scrollbarWidth}px`;
-        }
-        else {
-            document.body.style.overflow = "";
-            document.body.style.paddingRight = "";
-        }
+        if (!isOpen)
+            return;
+        // Capture and restore the PRIOR values rather than hard-coding "" —
+        // otherwise closing this drawer while another overlay (Modal,
+        // SideModal, a second SideDrawer) is still open underneath wipes out
+        // that overlay's own scroll lock too.
+        const previousOverflow = document.body.style.overflow;
+        const previousPaddingRight = document.body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        document.body.style.overflow = "hidden";
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
         return () => {
-            document.body.style.overflow = "";
-            document.body.style.paddingRight = "";
+            document.body.style.overflow = previousOverflow;
+            document.body.style.paddingRight = previousPaddingRight;
         };
     }, [isOpen]);
     useSwipe(drawerRef, {

package/dist/ui/components/SideModal.js

@@ -40,14 +40,16 @@ export function SideModal({ isOpen, onClose, title, side = "right", children, cl
     }, [isOpen]);
     // Prevent body scroll while open
     useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
+        if (!isOpen)
+            return;
+        // Capture and restore the PRIOR value rather than hard-coding "" —
+        // otherwise closing this modal while another overlay is still open
+        // underneath (Modal, SideDrawer, a second SideModal) wipes out that
+        // overlay's own scroll lock too.
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
         return () => {
-            document.body.style.overflow = "";
+            document.body.style.overflow = previousOverflow;
         };
     }, [isOpen]);
     const reduced = useReducedMotion();

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

@@ -46,11 +46,22 @@ export interface SlottedListingViewProps {
      * - `public`: no managed state by default
      */
     portal?: ViewPortal;
-    /** Enable managed search state (default driven by portal, otherwise false). */
+    /**
+     * Currently unused — `renderSearch` is always invoked when provided,
+     * regardless of this flag. Kept as a no-op accepted prop because real
+     * consumers (CategoryProductsView, StoreProductsView, FAQPageContent, …)
+     * already pass their own self-contained `renderSearch` closures that
+     * manage search state externally and would lose their search UI if this
+     * ever started gating the render call. Do not wire this up to gate
+     * `renderSearch` without auditing every consumer's `renderSearch` first.
+     */
     manageSearch?: boolean;
     /** Enable managed selection state (default driven by portal, otherwise false). */
     manageSelection?: boolean;
-    /** Enable managed sort state (default empty string). */
+    /**
+     * Currently unused — see `manageSearch` above; `renderSort` is always
+     * invoked when provided, regardless of this flag, for the same reason.
+     */
     manageSort?: boolean;
     /** Wrap search + sort slots in a flex row. */
     inlineToolbar?: boolean;

package/dist/ui/components/StickyToolbar.js

@@ -12,21 +12,25 @@ const PADDING_CLS = {
     lg: "px-4 py-3",
     toolbar: "px-3 py-1.5",
 };
-function resolveOffset(offset) {
+function resolveOffsetClass(offset) {
     if (offset === "header") {
         return "top-[var(--header-height,0px)]";
     }
     if (offset === "header+nav") {
         return "top-[calc(var(--header-height,0px)+var(--appkit-navbar-height,2.5rem))]";
     }
-    // Numeric pixel offset.
-    return `top-[${offset}px]`;
+    // Numeric offsets are applied via inline style instead (see below) —
+    // Tailwind's static scanner can never see a dynamically-interpolated
+    // `top-[${offset}px]` arbitrary value, so no CSS rule would ever be
+    // generated for it in the compiled stylesheet.
+    return "";
 }
 export function StickyToolbar({ children, offset = "header", tone = "translucent", border = true, padding = "toolbar", z = "above-content", role, }) {
-    const offsetCls = resolveOffset(offset);
+    const offsetCls = resolveOffsetClass(offset);
+    const offsetStyle = typeof offset === "number" ? { top: `${offset}px` } : undefined;
     const borderCls = border ? "border-b border-[var(--appkit-color-border)]" : "";
     const zCls = z === "above-content" ? "z-10" : "z-[5]";
-    return (_jsx("div", { role: role, 
+    return (_jsx("div", { role: role, style: offsetStyle, 
         // for the translucent sticky-toolbar pattern. The header offset is
         // sourced from --header-height (set by AppLayoutShell at runtime).
         className: `sticky ${offsetCls} ${zCls} ${TONE_CLS[tone]} ${borderCls} ${PADDING_CLS[padding]}`, children: children }));

package/dist/ui/components/TagInput.js

@@ -5,8 +5,9 @@ import { Label, Span } from "./Typography";
 export function TagInput({ value, onChange, disabled = false, label, placeholder = "Add a tag...", className = "", helperText = "Press Enter or comma to add a tag", }) {
     const [draft, setDraft] = useState("");
     const inputRef = useRef(null);
+    const normalizeTag = (raw) => raw.trim().replace(/,+$/, "").trim();
     const addTag = (raw) => {
-        const tag = raw.trim().replace(/,+$/, "").trim();
+        const tag = normalizeTag(raw);
         if (!tag || value.includes(tag)) {
             setDraft("");
             return;
@@ -32,7 +33,19 @@ export function TagInput({ value, onChange, disabled = false, label, placeholder
         if (inputValue.includes(",")) {
             const parts = inputValue.split(",");
             const last = parts.pop() ?? "";
-            parts.forEach((part) => addTag(part));
+            // Accumulate locally instead of calling addTag() in a loop — addTag
+            // always computes `[...value, tag]` off the current render's `value`
+            // prop, so multiple synchronous calls in the same paste each started
+            // from the SAME stale array and every onChange but the last one got
+            // silently overwritten (only the final comma-segment ever survived).
+            let next = value;
+            for (const part of parts) {
+                const tag = normalizeTag(part);
+                if (tag && !next.includes(tag))
+                    next = [...next, tag];
+            }
+            if (next !== value)
+                onChange(next);
             setDraft(last);
             return;
         }

package/dist/ui/components/Textarea.js

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

package/dist/ui/components/Toggle.js

@@ -43,5 +43,12 @@ export function Toggle({ checked: checkedProp, defaultChecked = false, onChange,
                     .join(" "), children: _jsx(Span, { "aria-hidden": "true", className: [
                         UI_TOGGLE.thumb,
                         checked ? UI_TOGGLE.thumbOn : UI_TOGGLE.thumbOff,
-                    ].join(" ") }) }), label && (_jsx(Label, { id: `${toggleId}-label`, htmlFor: toggleId, className: disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", onClick: disabled ? undefined : handleToggle, children: label }))] }));
+                    ].join(" ") }) }), label && (
+            // No onClick here — `htmlFor` on a `<label>` already makes the
+            // browser forward a click on the label to the labelable `<button>`
+            // above natively. Also attaching handleToggle here fired it TWICE
+            // per click (once from this handler, once from the native
+            // label→button forwarding), both reading the same stale `checked`
+            // closure, so onChange(true) could fire twice for one click.
+            _jsx(Label, { id: `${toggleId}-label`, htmlFor: toggleId, className: disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", children: label }))] }));
 }

package/dist/ui/components/UnsavedChangesModal.js

@@ -18,7 +18,18 @@ export function UnsavedChangesModal({ labels = {} }) {
     useEffect(() => {
         const subscription = eventBus.on(UNSAVED_CHANGES_EVENT, (...args) => {
             const resolveFn = args[0];
-            setResolve(() => resolveFn);
+            setResolve((prevResolve) => {
+                // A second UNSAVED_CHANGES_EVENT arrived before the user answered
+                // the first — resolve that abandoned promise with `false` instead
+                // of silently overwriting it and leaving it pending forever.
+                prevResolve?.(false);
+                // Returning `resolveFn` directly (not `() => resolveFn`) is
+                // correct here — the double-wrap trick is only needed when
+                // passing setState a bare function *value* (to stop React from
+                // treating it as an updater); inside an updater callback the
+                // return value already becomes the next state as-is.
+                return resolveFn;
+            });
             setIsOpen(true);
         });
         return () => subscription.unsubscribe();

package/dist/ui/forms/ColorPickerField.js

@@ -31,6 +31,13 @@ export function ColorPickerField({ name, label, hint, required, swatchWidth = "f
     }
     function handleChange(e) {
         onChange?.(e.target.value);
+        // FieldInput/FieldTextarea/FieldSelect/FieldCheckbox all clear the
+        // FormShell error for this field on change — this was the only Field*
+        // wrapper that omitted it, so a picked (valid) color never cleared a
+        // previously-set error until something else called clearErrors/
+        // setFieldError.
+        if (showError)
+            ctx?.clearFieldError(name);
     }
     return (_jsxs(Span, { layout: "flex", gap: "sm", className: "flex-col", children: [label != null && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("input", { id: inputId, type: "color", name: name, className: `h-10 ${SWATCH_WIDTH_MAP[swatchWidth]} rounded border border-[var(--appkit-color-border)] cursor-pointer ${className ?? ""}`, "aria-invalid": showError ? true : undefined, "aria-describedby": showError ? errorId : undefined, onBlur: handleBlur, onChange: handleChange, ...inputProps }), hint != null && !showError && (_jsx(Text, { size: "xs", color: "muted", children: hint })), showError && (_jsx(Text, { id: errorId, role: "alert", size: "xs", color: "error", children: error }))] }));
 }

package/dist/ui/forms/FieldCheckbox.js

@@ -21,5 +21,5 @@ export function FieldCheckbox({ name, label, hint, checked, onChange, onBlur, di
         ctx?.setFieldTouched(name);
         onBlur?.();
     }
-    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [_jsx(Checkbox, { id: inputId, name: name, checked: checked, onChange: handleChange, onBlur: handleBlur, label: label, disabled: disabled, error: showError ? error : undefined, "aria-describedby": showError ? errorId : undefined }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
+    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [_jsx(Checkbox, { id: inputId, name: name, checked: checked, onChange: handleChange, onBlur: handleBlur, label: label, disabled: disabled, "aria-describedby": showError ? errorId : undefined }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
 }

package/dist/utils/id-generators.d.ts

@@ -270,10 +270,13 @@ export type MediaFilenameContext = ({
 export declare function generateMediaFilename(ctx: MediaFilenameContext): string;
 export declare function validateMediaFilename(filename: string): boolean;
 /**
- * Derives the `MediaFilenameContext["type"]` a filename was generated under
- * (e.g. "catalogue-image") by matching against the same prefix list
- * {@link validateMediaFilename} uses — the longest matching prefix wins so
- * "blog-content-image" isn't mis-derived as "blog-cover"'s sibling "blog-".
+ * Derives the `MediaFilenameContext["type"]` family a filename was
+ * generated under (e.g. "catalogue-image") by matching against the same
+ * shape patterns {@link validateMediaFilename} uses. Sibling context types
+ * that share one generator (e.g. blog-cover/blog-content-image/
+ * blog-additional-image all produce the same shape as blog-image) resolve
+ * to that shared family name — the dispatcher itself can't distinguish them
+ * from the filename alone, since it never encoded the sub-type into the name.
  * Used at /api/media/finalize time to stamp `MediaAssetDocument.contextType`
  * without changing the finalize request contract.
  */