@mohasinac/appkit 3.4.8 → 3.5.0

package/dist/ui/components/surface-tokens.js

@@ -37,69 +37,75 @@ export const SURFACE_MAP = {
     /** Near-black placeholder behind a media thumbnail (e.g. YouTube card) — deliberately not theme-tinted. */
     "media-dark": "bg-zinc-900",
 };
-/** Resolves a bare spacing step (e.g. `4`, `1.5`) to its themed CSS var arbitrary-value class fragment. */
-const SP = (step) => `var(--appkit-space-${step.replace(".", "-")})`;
+/**
+ * Every className below is spelled out as a complete string literal — Tailwind's
+ * content scanner reads this source file as plain text (it does not evaluate
+ * JS), so building a class name via template-literal interpolation of the
+ * space step leaves an unresolved placeholder that the scanner cannot turn
+ * into a generatable candidate. See the same fix in Typography.tsx
+ * (RESPONSIVE_TEXT_SIZE_CLASS) for the identical issue with text sizes.
+ */
 export const PADDING_MAP = {
     none: "",
-    "2xs": `p-[${SP("1")}]`,
-    xs: `p-[${SP("2")}]`,
-    sm: `p-[${SP("3")}]`,
-    md: `p-[${SP("4")}]`,
-    "5": `p-[${SP("5")}]`,
-    lg: `p-[${SP("6")}]`,
-    xl: `p-[${SP("8")}]`,
-    "3xl": `p-[${SP("12")}]`,
-    card: `p-[${SP("5")}] sm:p-[${SP("6")}] lg:p-[${SP("8")}]`,
-    "card-tight": `p-[${SP("3")}] sm:p-[${SP("4")}]`,
-    section: `py-[${SP("10")}] sm:py-[${SP("14")}] xl:py-[${SP("20")}]`,
-    sectionSm: `py-[${SP("6")}] sm:py-[${SP("10")}]`,
-    page: `py-[${SP("6")}] sm:py-[${SP("8")}] lg:py-[${SP("10")}]`,
-    hero: `py-[${SP("12")}] sm:py-[${SP("16")}] lg:py-[${SP("24")}]`,
-    toolbar: `px-[${SP("3")}] py-[${SP("1.5")}]`,
-    inline: `px-[${SP("4")}] py-[${SP("3")}]`,
-    inlineSm: `px-[${SP("3")}] py-[${SP("2")}]`,
-    inlineLg: `px-[${SP("6")}] py-[${SP("4")}]`,
+    "2xs": "p-[var(--appkit-space-1)]",
+    xs: "p-[var(--appkit-space-2)]",
+    sm: "p-[var(--appkit-space-3)]",
+    md: "p-[var(--appkit-space-4)]",
+    "5": "p-[var(--appkit-space-5)]",
+    lg: "p-[var(--appkit-space-6)]",
+    xl: "p-[var(--appkit-space-8)]",
+    "3xl": "p-[var(--appkit-space-12)]",
+    card: "p-[var(--appkit-space-5)] sm:p-[var(--appkit-space-6)] lg:p-[var(--appkit-space-8)]",
+    "card-tight": "p-[var(--appkit-space-3)] sm:p-[var(--appkit-space-4)]",
+    section: "py-[var(--appkit-space-10)] sm:py-[var(--appkit-space-14)] xl:py-[var(--appkit-space-20)]",
+    sectionSm: "py-[var(--appkit-space-6)] sm:py-[var(--appkit-space-10)]",
+    page: "py-[var(--appkit-space-6)] sm:py-[var(--appkit-space-8)] lg:py-[var(--appkit-space-10)]",
+    hero: "py-[var(--appkit-space-12)] sm:py-[var(--appkit-space-16)] lg:py-[var(--appkit-space-24)]",
+    toolbar: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)]",
+    inline: "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]",
+    inlineSm: "px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]",
+    inlineLg: "px-[var(--appkit-space-6)] py-[var(--appkit-space-4)]",
     /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
-    "chip-2xs": `px-[${SP("1.5")}] py-[${SP("0.5")}]`,
+    "chip-2xs": "px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)]",
     // Vertical-only presets — the variant-catalogue codemod migrates raw
     // `py-N` / `py-N md:py-M` className tokens into these names.
-    "y-2xs": `py-[${SP("1")}]`,
-    "y-xs": `py-[${SP("2")}]`,
-    "y-sm": `py-[${SP("3")}]`,
-    "y-md": `py-[${SP("4")}]`,
-    "y-lg": `py-[${SP("6")}]`,
-    "y-xl": `py-[${SP("8")}]`,
-    "y-2xl": `py-[${SP("10")}]`,
-    "y-3xl": `py-[${SP("12")}]`,
-    "y-4xl": `py-[${SP("16")}]`,
+    "y-2xs": "py-[var(--appkit-space-1)]",
+    "y-xs": "py-[var(--appkit-space-2)]",
+    "y-sm": "py-[var(--appkit-space-3)]",
+    "y-md": "py-[var(--appkit-space-4)]",
+    "y-lg": "py-[var(--appkit-space-6)]",
+    "y-xl": "py-[var(--appkit-space-8)]",
+    "y-2xl": "py-[var(--appkit-space-10)]",
+    "y-3xl": "py-[var(--appkit-space-12)]",
+    "y-4xl": "py-[var(--appkit-space-16)]",
     // Horizontal-only presets.
-    "x-xs": `px-[${SP("2")}]`,
-    "x-sm": `px-[${SP("3")}]`,
-    "x-md": `px-[${SP("4")}]`,
-    "x-lg": `px-[${SP("6")}]`,
-    "x-xl": `px-[${SP("8")}]`,
+    "x-xs": "px-[var(--appkit-space-2)]",
+    "x-sm": "px-[var(--appkit-space-3)]",
+    "x-md": "px-[var(--appkit-space-4)]",
+    "x-lg": "px-[var(--appkit-space-6)]",
+    "x-xl": "px-[var(--appkit-space-8)]",
     // Top-only and bottom-only side presets.
-    "t-2xs": `pt-[${SP("1")}]`,
-    "b-2xs": `pb-[${SP("1")}]`,
-    "t-xs": `pt-[${SP("2")}]`,
-    "t-sm": `pt-[${SP("3")}]`,
-    "t-md": `pt-[${SP("4")}]`,
-    "t-lg": `pt-[${SP("6")}]`,
-    "t-xl": `pt-[${SP("8")}]`,
-    "b-xs": `pb-[${SP("2")}]`,
-    "b-sm": `pb-[${SP("3")}]`,
-    "b-md": `pb-[${SP("4")}]`,
-    "b-lg": `pb-[${SP("6")}]`,
-    "b-xl": `pb-[${SP("8")}]`,
-    "b-2xl": `pb-[${SP("10")}]`,
+    "t-2xs": "pt-[var(--appkit-space-1)]",
+    "b-2xs": "pb-[var(--appkit-space-1)]",
+    "t-xs": "pt-[var(--appkit-space-2)]",
+    "t-sm": "pt-[var(--appkit-space-3)]",
+    "t-md": "pt-[var(--appkit-space-4)]",
+    "t-lg": "pt-[var(--appkit-space-6)]",
+    "t-xl": "pt-[var(--appkit-space-8)]",
+    "b-xs": "pb-[var(--appkit-space-2)]",
+    "b-sm": "pb-[var(--appkit-space-3)]",
+    "b-md": "pb-[var(--appkit-space-4)]",
+    "b-lg": "pb-[var(--appkit-space-6)]",
+    "b-xl": "pb-[var(--appkit-space-8)]",
+    "b-2xl": "pb-[var(--appkit-space-10)]",
     // Fill-in vertical sizes.
-    "y-2-5xl": `py-[${SP("14")}]`,
-    "y-5xl": `py-[${SP("20")}]`,
-    "y-6xl": `py-[${SP("24")}]`,
+    "y-2-5xl": "py-[var(--appkit-space-14)]",
+    "y-5xl": "py-[var(--appkit-space-20)]",
+    "y-6xl": "py-[var(--appkit-space-24)]",
     // Responsive banner preset — used by accent-banner Sections.
-    banner: `py-[${SP("14")}] md:py-[${SP("16")}] lg:py-[${SP("20")}]`,
+    banner: "py-[var(--appkit-space-14)] md:py-[var(--appkit-space-16)] lg:py-[var(--appkit-space-20)]",
     // Responsive content preset — about-views inner container padding.
-    "content-banner": `py-[${SP("10")}] md:py-[${SP("12")}] lg:py-[${SP("16")}]`,
+    "content-banner": "py-[var(--appkit-space-10)] md:py-[var(--appkit-space-12)] lg:py-[var(--appkit-space-16)]",
 };
 export const ROUNDED_MAP = {
     none: "",
@@ -175,17 +181,17 @@ export const SHADOW_MAP = {
 export const GAP_PRESETS = {
     none: "gap-0",
     px: "gap-px",
-    xs: `gap-[${SP("1")}]`,
-    sm: `gap-[${SP("2")}]`,
-    dense: `gap-[${SP("2")}]`,
-    md: `gap-[${SP("3")}]`,
-    comfortable: `gap-[${SP("3")}]`,
-    lg: `gap-[${SP("4")}]`,
-    loose: `gap-[${SP("4")}]`,
-    xl: `gap-[${SP("5")}]`,
-    "2xl": `gap-[${SP("6")}]`,
-    section: `gap-[${SP("6")}] sm:gap-[${SP("8")}]`,
-    hero: `gap-[${SP("10")}] sm:gap-[${SP("12")}]`,
+    xs: "gap-[var(--appkit-space-1)]",
+    sm: "gap-[var(--appkit-space-2)]",
+    dense: "gap-[var(--appkit-space-2)]",
+    md: "gap-[var(--appkit-space-3)]",
+    comfortable: "gap-[var(--appkit-space-3)]",
+    lg: "gap-[var(--appkit-space-4)]",
+    loose: "gap-[var(--appkit-space-4)]",
+    xl: "gap-[var(--appkit-space-5)]",
+    "2xl": "gap-[var(--appkit-space-6)]",
+    section: "gap-[var(--appkit-space-6)] sm:gap-[var(--appkit-space-8)]",
+    hero: "gap-[var(--appkit-space-10)] sm:gap-[var(--appkit-space-12)]",
 };
 /**
  * Named padding presets consumed by `<Container>` / `<Section>` / `<Card>` /
@@ -196,60 +202,60 @@ export const GAP_PRESETS = {
 export const PADDING_PRESETS = PADDING_MAP;
 export const X_ONLY_MAP = {
     none: "",
-    "x-xs": `px-[${SP("2")}]`,
-    "x-sm": `px-[${SP("3")}]`,
-    "x-md": `px-[${SP("4")}]`,
-    "x-5": `px-[${SP("5")}]`,
-    "x-lg": `px-[${SP("6")}]`,
-    "x-xl": `px-[${SP("8")}]`,
+    "x-xs": "px-[var(--appkit-space-2)]",
+    "x-sm": "px-[var(--appkit-space-3)]",
+    "x-md": "px-[var(--appkit-space-4)]",
+    "x-5": "px-[var(--appkit-space-5)]",
+    "x-lg": "px-[var(--appkit-space-6)]",
+    "x-xl": "px-[var(--appkit-space-8)]",
     /** Responsive: `px-3 sm:px-4` — the canonical mobile-tight container. */
-    "x-sm-md": `px-[${SP("3")}] sm:px-[${SP("4")}]`,
+    "x-sm-md": "px-[var(--appkit-space-3)] sm:px-[var(--appkit-space-4)]",
     /** Responsive: `px-3 lg:px-4` — the canonical mobile-tight wide container. */
-    "x-sm-lg-md": `px-[${SP("3")}] lg:px-[${SP("4")}]`,
+    "x-sm-lg-md": "px-[var(--appkit-space-3)] lg:px-[var(--appkit-space-4)]",
     /** Responsive: `px-4 sm:px-6` — narrow container horizontal padding. */
-    "x-md-lg": `px-[${SP("4")}] sm:px-[${SP("6")}]`,
+    "x-md-lg": "px-[var(--appkit-space-4)] sm:px-[var(--appkit-space-6)]",
     /** Responsive: `px-6 md:px-10` — guide hub / store-extension container padding. */
-    "x-md-xl": `px-[${SP("6")}] md:px-[${SP("10")}]`,
+    "x-md-xl": "px-[var(--appkit-space-6)] md:px-[var(--appkit-space-10)]",
     /** Responsive: `px-4 sm:px-8` — section header container padding. */
-    "x-md-2xl": `px-[${SP("4")}] sm:px-[${SP("8")}]`,
+    "x-md-2xl": "px-[var(--appkit-space-4)] sm:px-[var(--appkit-space-8)]",
     /** Responsive: `px-4 sm:px-6 lg:px-8` — canonical page-container horizontal padding. */
-    "x-page": `px-[${SP("4")}] sm:px-[${SP("6")}] lg:px-[${SP("8")}]`,
+    "x-page": "px-[var(--appkit-space-4)] sm:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]",
     // Asymmetric left one-sided value (for sites that pad just one edge, e.g. a
     // selection-checkbox gutter).
     /** Asymmetric: `pl-8` — reserves a left gutter (e.g. for an overlaid selection checkbox). */
-    "l-xl": `pl-[${SP("8")}]`,
+    "l-xl": "pl-[var(--appkit-space-8)]",
 };
 const Y_ONLY_MAP = {
     none: "",
-    "y-2xs": `py-[${SP("1")}]`,
-    "y-2xs-tall": `py-[${SP("1.5")}]`,
-    "y-xs": `py-[${SP("2")}]`,
-    "y-xs-tall": `py-[${SP("2.5")}]`,
-    "y-sm": `py-[${SP("3")}]`,
-    "y-sm-tall": `py-[${SP("3.5")}]`,
-    "y-md": `py-[${SP("4")}]`,
-    "y-md-lg": `py-[${SP("5")}]`,
-    "y-lg": `py-[${SP("6")}]`,
-    "y-xl": `py-[${SP("8")}]`,
-    "y-2xl": `py-[${SP("10")}]`,
-    "y-3xl": `py-[${SP("12")}]`,
-    "y-2-5xl": `py-[${SP("14")}]`,
-    "y-4xl": `py-[${SP("16")}]`,
-    "y-5xl": `py-[${SP("20")}]`,
-    "y-6xl": `py-[${SP("24")}]`,
+    "y-2xs": "py-[var(--appkit-space-1)]",
+    "y-2xs-tall": "py-[var(--appkit-space-1-5)]",
+    "y-xs": "py-[var(--appkit-space-2)]",
+    "y-xs-tall": "py-[var(--appkit-space-2-5)]",
+    "y-sm": "py-[var(--appkit-space-3)]",
+    "y-sm-tall": "py-[var(--appkit-space-3-5)]",
+    "y-md": "py-[var(--appkit-space-4)]",
+    "y-md-lg": "py-[var(--appkit-space-5)]",
+    "y-lg": "py-[var(--appkit-space-6)]",
+    "y-xl": "py-[var(--appkit-space-8)]",
+    "y-2xl": "py-[var(--appkit-space-10)]",
+    "y-3xl": "py-[var(--appkit-space-12)]",
+    "y-2-5xl": "py-[var(--appkit-space-14)]",
+    "y-4xl": "py-[var(--appkit-space-16)]",
+    "y-5xl": "py-[var(--appkit-space-20)]",
+    "y-6xl": "py-[var(--appkit-space-24)]",
     // Asymmetric top/bottom one-sided values (for sites that pad just one edge).
-    "t-2xs": `pt-[${SP("1")}]`,
-    "b-2xs": `pb-[${SP("1")}]`,
-    "t-xs": `pt-[${SP("2")}]`,
-    "b-xs": `pb-[${SP("2")}]`,
-    "t-sm": `pt-[${SP("3")}]`,
-    "b-sm": `pb-[${SP("3")}]`,
-    "t-md": `pt-[${SP("4")}]`,
-    "b-md": `pb-[${SP("4")}]`,
-    "b-md-lg": `pb-[${SP("5")}]`,
-    "b-lg": `pb-[${SP("6")}]`,
+    "t-2xs": "pt-[var(--appkit-space-1)]",
+    "b-2xs": "pb-[var(--appkit-space-1)]",
+    "t-xs": "pt-[var(--appkit-space-2)]",
+    "b-xs": "pb-[var(--appkit-space-2)]",
+    "t-sm": "pt-[var(--appkit-space-3)]",
+    "b-sm": "pb-[var(--appkit-space-3)]",
+    "t-md": "pt-[var(--appkit-space-4)]",
+    "b-md": "pb-[var(--appkit-space-4)]",
+    "b-md-lg": "pb-[var(--appkit-space-5)]",
+    "b-lg": "pb-[var(--appkit-space-6)]",
     /** Asymmetric: `pt-4 pb-6` — hotspot control bar with tighter top than bottom. */
-    "t-md-b-lg": `pt-[${SP("4")}] pb-[${SP("6")}]`,
+    "t-md-b-lg": "pt-[var(--appkit-space-4)] pb-[var(--appkit-space-6)]",
 };
 const OVERFLOW_MAP = {
     auto: "overflow-auto",

package/dist/ui/forms/FormShell.d.ts

@@ -1,6 +1,13 @@
 import React, { type ReactNode } from "react";
-import type { ZodType } from "zod";
 import type { FormValues } from "../../schemas/types";
+/**
+ * A step descriptor. The step-wizard *rendering* this once drove
+ * (`<FormShell steps={…}>`) was deleted 2026-08-09 as dead code — the real
+ * wizard chrome is `features/shell/FormShell.tsx` + `StepForm.tsx`. This type
+ * survives because `FormShellContextValue.steps` still carries the shape for
+ * any context consumer that reads it (FormShellProvider/useFormShellState
+ * both populate it as `[]` since neither is step-aware).
+ */
 export interface FormShellStep {
     id: string;
     label: string;
@@ -24,31 +31,6 @@ export interface FormShellContextValue {
     isSubmitting: boolean;
     stepErrorCounts: number[];
 }
-export interface FormShellProps {
-    steps: FormShellStep[];
-    /** Called on debounced auto-save and "Save Draft" click */
-    onSaveDraft?: (values: FormValues) => Promise<{
-        id?: string;
-    } | void>;
-    /** Called on Publish / Save */
-    onPublish: (values: FormValues) => Promise<void>;
-    /** Current form values — caller owns state */
-    values: FormValues;
-    /** Zod schema for auto-validation on publish. Errors are mapped to field names. */
-    schema?: ZodType;
-    /** When true + schema provided, validate on every value change (not just publish). */
-    validateOnChange?: boolean;
-    /** Whether any values differ from the persisted state */
-    isDirty?: boolean;
-    draftId?: string;
-    autoSaveDelayMs?: number;
-    publishLabel?: string;
-    saveDraftLabel?: string;
-    title?: string;
-    className?: string;
-    /** If true, show steps as vertical accordion on mobile instead of wizard tabs */
-    mobileAccordion?: boolean;
-}
 export declare const FormShellContext: React.Context<FormShellContextValue | null>;
 export declare function useFormShell(): FormShellContextValue;
 export interface UseFormShellStateResult {
@@ -90,4 +72,3 @@ export interface FormShellProviderProps {
     values?: FormValues;
 }
 export declare function FormShellProvider({ children, onSaveDraft, isDirty, autoSaveDelayMs, values, }: FormShellProviderProps): React.JSX.Element;
-export declare function FormShell({ steps, onSaveDraft, onPublish, values, schema, validateOnChange, isDirty, autoSaveDelayMs, publishLabel, saveDraftLabel, title, className, mobileAccordion, }: FormShellProps): React.JSX.Element;

package/dist/ui/forms/FormShell.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { Button } from "../components/Button";
-import { Heading, Span, Text } from "../components/Typography";
 // ─── Context ──────────────────────────────────────────────────────────────────
 export const FormShellContext = createContext(null);
 export function useFormShell() {
@@ -74,25 +72,6 @@ export function useFormShellState(schema) {
     }), [errors, setFieldError]);
     return { shellCtx, setFieldError, clearErrors, hasErrors: Object.keys(errors).length > 0, validate };
 }
-function StepIndicator({ steps, currentStep, stepErrorCounts, onGoTo, }) {
-    return (_jsx("nav", { className: "appkit-formshell__step-indicator", "aria-label": "Form steps", children: steps.map((step, i) => {
-            const isActive = i === currentStep;
-            const hasErrors = stepErrorCounts[i] > 0;
-            return (_jsxs("button", { type: "button", className: [
-                    "appkit-formshell__step-btn",
-                    isActive ? "appkit-formshell__step-btn--active" : "",
-                    hasErrors ? "appkit-formshell__step-btn--error" : "",
-                ]
-                    .filter(Boolean)
-                    .join(" "), onClick: () => onGoTo(i), "aria-current": isActive ? "step" : undefined, "aria-label": `${step.label}${hasErrors ? ` (${stepErrorCounts[i]} error${stepErrorCounts[i] !== 1 ? "s" : ""})` : ""}`, children: [_jsxs("span", { className: "appkit-formshell__step-dot", children: [hasErrors && (_jsx("span", { className: "appkit-formshell__step-error-badge", "aria-hidden": "true" })), _jsx("span", { className: "appkit-formshell__step-num", children: i + 1 })] }), _jsx("span", { className: "appkit-formshell__step-label", children: step.label })] }, step.id));
-        }) }));
-}
-function ErrorSummary({ errors, visible }) {
-    const entries = Object.entries(errors).filter(([, v]) => v);
-    if (!visible || entries.length === 0)
-        return null;
-    return (_jsxs("div", { className: "appkit-formshell__error-summary", role: "alert", "aria-live": "assertive", children: [_jsxs(Text, { size: "sm", variant: "error", className: "appkit-formshell__error-summary__title", children: ["Please fix ", entries.length, " error", entries.length !== 1 ? "s" : "", " before publishing."] }), _jsx("ul", { className: "appkit-formshell__error-summary__list", children: entries.map(([field, msg]) => (_jsx("li", { children: _jsxs(Text, { size: "sm", variant: "error", children: [_jsx(Span, { weight: "bold", children: field }), ": ", msg] }) }, field))) })] }));
-}
 export function FormShellProvider({ children, onSaveDraft, isDirty = false, autoSaveDelayMs = 2000, values = {}, }) {
     const [errors, setErrors] = useState({});
     const [touched, setTouched] = useState({});
@@ -152,175 +131,3 @@ export function FormShellProvider({ children, onSaveDraft, isDirty = false, auto
     }), [errors, touched, setFieldError, setFieldTouched, clearFieldError, isDirty]);
     return _jsx(FormShellContext.Provider, { value: ctx, children: children });
 }
-// ─── Schema validation helper ────────────────────────────────────────────────
-function validateSchema(schema, values, setFieldError, setErrors) {
-    const result = schema.safeParse(values);
-    if (result.success) {
-        setErrors({});
-        return true;
-    }
-    const newErrors = {};
-    for (const issue of result.error.issues) {
-        const path = issue.path.join(".");
-        if (path && !newErrors[path]) {
-            newErrors[path] = issue.message;
-        }
-    }
-    setErrors(newErrors);
-    return false;
-}
-// ─── FormShell ────────────────────────────────────────────────────────────────
-export function FormShell({ steps, onSaveDraft, onPublish, values, schema, validateOnChange = false, isDirty = false, autoSaveDelayMs = 2000, publishLabel = "Publish", saveDraftLabel = "Save Draft", title, className = "", mobileAccordion = true, }) {
-    const [errors, setErrors] = useState({});
-    const [touched, setTouched] = useState({});
-    const [currentStep, setCurrentStep] = useState(0);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [showErrorSummary, setShowErrorSummary] = useState(false);
-    // Auto-save
-    const autoSaveTimer = useRef(null);
-    const valuesRef = useRef(values);
-    valuesRef.current = values;
-    useEffect(() => {
-        if (!onSaveDraft || !isDirty)
-            return;
-        if (autoSaveTimer.current)
-            clearTimeout(autoSaveTimer.current);
-        autoSaveTimer.current = setTimeout(() => {
-            onSaveDraft(valuesRef.current).catch(() => { });
-        }, autoSaveDelayMs);
-        return () => {
-            if (autoSaveTimer.current)
-                clearTimeout(autoSaveTimer.current);
-        };
-    }, [values, isDirty, onSaveDraft, autoSaveDelayMs]);
-    // Per-step error counts
-    const stepErrorCounts = useMemo(() => {
-        return steps.map((step) => {
-            const fields = step.requiredFields ?? [];
-            return fields.filter((f) => errors[f]).length;
-        });
-    }, [steps, errors]);
-    // Publish gate: all required fields across all steps must be valid
-    const isPublishReady = useMemo(() => {
-        return steps.every((step) => (step.requiredFields ?? []).every((f) => !errors[f]));
-    }, [steps, errors]);
-    const setFieldError = useCallback((name, error) => {
-        setErrors((prev) => {
-            if (!error) {
-                const next = { ...prev };
-                delete next[name];
-                return next;
-            }
-            if (prev[name] === error)
-                return prev;
-            return { ...prev, [name]: error };
-        });
-    }, []);
-    const clearFieldError = useCallback((name) => {
-        setErrors((prev) => {
-            if (!prev[name])
-                return prev;
-            const next = { ...prev };
-            delete next[name];
-            return next;
-        });
-    }, []);
-    const setFieldTouched = useCallback((name) => {
-        setTouched((prev) => (prev[name] ? prev : { ...prev, [name]: true }));
-    }, []);
-    const goToStep = useCallback((n) => {
-        if (n >= 0 && n < steps.length)
-            setCurrentStep(n);
-    }, [steps.length]);
-    const nextStep = useCallback(() => setCurrentStep((s) => Math.min(s + 1, steps.length - 1)), [steps.length]);
-    const prevStep = useCallback(() => setCurrentStep((s) => Math.max(s - 1, 0)), []);
-    const handleSaveDraft = useCallback(async () => {
-        if (!onSaveDraft)
-            return;
-        setIsSubmitting(true);
-        try {
-            await onSaveDraft(values);
-        }
-        finally {
-            setIsSubmitting(false);
-        }
-    }, [onSaveDraft, values]);
-    // Schema-driven live validation on value changes
-    useEffect(() => {
-        if (!schema || !validateOnChange)
-            return;
-        validateSchema(schema, values, setFieldError, setErrors);
-    }, [schema, validateOnChange, values, setFieldError]);
-    const handlePublish = useCallback(async () => {
-        setShowErrorSummary(true);
-        if (schema) {
-            const valid = validateSchema(schema, values, setFieldError, setErrors);
-            if (!valid)
-                return;
-        }
-        if (!isPublishReady)
-            return;
-        setIsSubmitting(true);
-        try {
-            await onPublish(values);
-        }
-        finally {
-            setIsSubmitting(false);
-        }
-    }, [isPublishReady, onPublish, values, schema, setFieldError]);
-    const ctx = useMemo(() => ({
-        errors,
-        touched,
-        setFieldError,
-        setFieldTouched,
-        clearFieldError,
-        steps,
-        currentStep,
-        goToStep,
-        nextStep,
-        prevStep,
-        isPublishReady,
-        isDirty,
-        isSubmitting,
-        stepErrorCounts,
-    }), [
-        errors,
-        touched,
-        setFieldError,
-        setFieldTouched,
-        clearFieldError,
-        steps,
-        currentStep,
-        goToStep,
-        nextStep,
-        prevStep,
-        isPublishReady,
-        isDirty,
-        isSubmitting,
-        stepErrorCounts,
-    ]);
-    const isMultiStep = steps.length > 1;
-    return (_jsx(FormShellContext.Provider, { value: ctx, children: _jsxs("div", { className: [
-                "appkit-formshell",
-                mobileAccordion ? "appkit-formshell--accordion-mobile" : "",
-                className,
-            ]
-                .filter(Boolean)
-                .join(" "), children: [(title || isMultiStep) && (_jsxs("div", { className: "appkit-formshell__header", children: [title && (_jsx(Heading, { level: 2, className: "appkit-formshell__title", children: title })), isMultiStep && (_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrorCounts: stepErrorCounts, onGoTo: goToStep }))] })), _jsx(ErrorSummary, { errors: errors, visible: showErrorSummary }), _jsx("div", { className: "appkit-formshell__body", children: isMultiStep ? (mobileAccordion ? (
-                    // Mobile: vertical accordion; Desktop: show only current step
-                    _jsx("div", { className: "appkit-formshell__steps", children: steps.map((step, i) => {
-                            const isActive = i === currentStep;
-                            const hasErrors = stepErrorCounts[i] > 0;
-                            return (_jsxs("div", { className: [
-                                    "appkit-formshell__step",
-                                    isActive ? "appkit-formshell__step--active" : "",
-                                    hasErrors ? "appkit-formshell__step--error" : "",
-                                ]
-                                    .filter(Boolean)
-                                    .join(" "), children: [_jsxs("button", { type: "button", className: "appkit-formshell__step-accordion-btn", onClick: () => goToStep(i), "aria-expanded": isActive, children: [_jsxs("span", { className: "appkit-formshell__step-accordion-label", children: [i + 1, ". ", step.label] }), hasErrors && (_jsx("span", { className: "appkit-formshell__step-error-badge appkit-formshell__step-error-badge--inline", children: stepErrorCounts[i] }))] }), _jsx("div", { className: "appkit-formshell__step-content", hidden: !isActive, "aria-hidden": !isActive, children: step.content })] }, step.id));
-                        }) })) : (
-                    // Non-accordion: show only the active step
-                    _jsx("div", { className: "appkit-formshell__step-content", children: steps[currentStep]?.content }))) : (
-                    // Single step: render content directly
-                    _jsx("div", { className: "appkit-formshell__step-content", children: steps[0]?.content })) }), _jsxs("div", { className: "appkit-formshell__footer", children: [isMultiStep && (_jsxs("div", { className: "appkit-formshell__step-nav", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: prevStep, disabled: currentStep === 0 || isSubmitting, children: "Previous" }), currentStep < steps.length - 1 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: nextStep, disabled: isSubmitting, children: "Next" }))] })), _jsxs("div", { className: "appkit-formshell__actions", children: [onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: saveDraftLabel })), _jsx(Button, { type: "button", size: "sm", onClick: handlePublish, isLoading: isSubmitting, disabled: isSubmitting || (showErrorSummary && !isPublishReady), children: publishLabel })] })] })] }) }));
-}

package/dist/ui/forms/index.d.ts

@@ -1,5 +1,5 @@
-export type { FormShellProps, FormShellProviderProps, FormShellStep, FormShellContextValue, UseFormShellStateResult, } from "./FormShell";
-export { FormShell, FormShellProvider, FormShellContext, useFormShell, useFormShellState, applyZodIssues } from "./FormShell";
+export type { FormShellProviderProps, FormShellStep, FormShellContextValue, UseFormShellStateResult, } from "./FormShell";
+export { FormShellProvider, FormShellContext, useFormShell, useFormShellState, applyZodIssues } from "./FormShell";
 export type { FieldInputProps } from "./FieldInput";
 export { FieldInput } from "./FieldInput";
 export type { FieldSelectProps } from "./FieldSelect";

package/dist/ui/forms/index.js

@@ -1,4 +1,4 @@
-export { FormShell, FormShellProvider, FormShellContext, useFormShell, useFormShellState, applyZodIssues } from "./FormShell";
+export { FormShellProvider, FormShellContext, useFormShell, useFormShellState, applyZodIssues } from "./FormShell";
 export { FieldInput } from "./FieldInput";
 export { FieldSelect } from "./FieldSelect";
 export { FieldCheckbox } from "./FieldCheckbox";

package/dist/ui/index.d.ts

@@ -1,17 +1,19 @@
 import "./components/index.style.css";
 import "./forms/FormShell.style.css";
-export type { FormShellProps, FormShellStep, FormShellContextValue, } from "./forms";
-export { FormShell, useFormShell } from "./forms";
+export type { FormShellStep, FormShellContextValue, } from "./forms";
+export { FormShellProvider, useFormShell } from "./forms";
 export type { FieldInputProps } from "./forms";
 export { FieldInput } from "./forms";
 export type { FieldSelectProps } from "./forms";
 export { FieldSelect } from "./forms";
 export type { FieldCheckboxProps } from "./forms";
 export { FieldCheckbox } from "./forms";
+export type { FieldTextareaProps } from "./forms";
+export { FieldTextarea } from "./forms";
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
 export type { BooleanRenderOpts, RatingMode, RatingRenderOpts, } from "./columns";
-export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, UlProps, OlProps, LiProps, TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, CodeProps, PreProps, BlockquoteProps, FigureProps, FigcaptionProps, DlProps, DtProps, DdProps, } from "./components/Semantic";
-export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
+export type { SectionProps, SectionBackgroundConfig, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, UlProps, OlProps, LiProps, TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, CodeProps, PreProps, BlockquoteProps, FigureProps, FigcaptionProps, DlProps, DtProps, DdProps, } from "./components/Semantic";
+export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
 export type { ColorVariant } from "./components/Typography";
@@ -218,3 +220,5 @@ export { Anchor } from "./components/Anchor";
 export type { AnchorProps, AnchorTone, AnchorUnderline } from "./components/Anchor";
 export { Scrim } from "./components/Scrim";
 export type { ScrimProps, ScrimDirection, ScrimIntensity } from "./components/Scrim";
+export { Kbd } from "./components/Kbd";
+export type { KbdProps, KbdSize, KbdTone } from "./components/Kbd";

package/dist/ui/index.js

@@ -1,12 +1,13 @@
 import "./components/index.style.css";
 import "./forms/FormShell.style.css";
-export { FormShell, useFormShell } from "./forms";
+export { FormShellProvider, useFormShell } from "./forms";
 export { FieldInput } from "./forms";
 export { FieldSelect } from "./forms";
 export { FieldCheckbox } from "./forms";
+export { FieldTextarea } from "./forms";
 // --- Column utilities ---------------------------------------------------------
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
-export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
+export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export { Div } from "./components/Div";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 // --- Filter chip group (SB10-C completion, S8 2026-05-13) --------------------
@@ -114,3 +115,4 @@ export { Details, Summary } from "./components/Details";
 export { HorizontalRule } from "./components/HorizontalRule";
 export { Anchor } from "./components/Anchor";
 export { Scrim } from "./components/Scrim";
+export { Kbd } from "./components/Kbd";