@mohasinac/appkit 2.7.36 → 2.7.38

package/dist/ui/forms/FormShell.style.css

@@ -0,0 +1,287 @@
+/* ─── FormShell ─────────────────────────────────────────────────────────────── */
+
+.appkit-formshell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-6, 1.5rem);
+}
+
+/* Header */
+.appkit-formshell__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-4, 1rem);
+}
+
+.appkit-formshell__title {
+  font-size: var(--appkit-font-size-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--appkit-color-text-primary);
+}
+
+/* ─── Step Indicator ──────────────────────────────────────────────────────── */
+
+.appkit-formshell__step-indicator {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--appkit-spacing-1, 0.25rem);
+  border-bottom: 1px solid var(--appkit-color-border);
+  padding-bottom: var(--appkit-spacing-3, 0.75rem);
+}
+
+.appkit-formshell__step-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--appkit-spacing-2, 0.5rem);
+  padding: var(--appkit-spacing-1-5, 0.375rem) var(--appkit-spacing-3, 0.75rem);
+  border-radius: var(--appkit-radius-md, 0.375rem);
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--appkit-color-text-secondary);
+  cursor: pointer;
+  font-size: var(--appkit-font-size-sm, 0.875rem);
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.appkit-formshell__step-btn:hover {
+  background: var(--appkit-color-surface-hover);
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-formshell__step-btn--active {
+  background: var(--appkit-color-primary-subtle, rgb(from var(--appkit-color-primary) r g b / 0.1));
+  border-color: var(--appkit-color-primary);
+  color: var(--appkit-color-primary);
+  font-weight: 500;
+}
+
+.appkit-formshell__step-btn--error {
+  color: var(--appkit-color-error, #dc2626);
+  border-color: var(--appkit-color-error, #dc2626);
+}
+
+.appkit-formshell__step-dot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: var(--appkit-color-surface-secondary);
+  font-size: var(--appkit-font-size-xs, 0.75rem);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.appkit-formshell__step-btn--active .appkit-formshell__step-dot {
+  background: var(--appkit-color-primary);
+  color: #fff;
+}
+
+.appkit-formshell__step-btn--error .appkit-formshell__step-dot {
+  background: var(--appkit-color-error, #dc2626);
+  color: #fff;
+}
+
+/* Red dot badge on step dot */
+.appkit-formshell__step-error-badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  background: var(--appkit-color-error, #dc2626);
+  border: 2px solid var(--appkit-color-surface);
+}
+
+/* Inline error count badge (accordion header) */
+.appkit-formshell__step-error-badge--inline {
+  position: static;
+  width: auto;
+  height: auto;
+  border-radius: var(--appkit-radius-full, 9999px);
+  padding: 0 0.375rem;
+  font-size: var(--appkit-font-size-xs, 0.75rem);
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.4;
+  border: none;
+}
+
+.appkit-formshell__step-label {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .appkit-formshell__step-label {
+    display: inline;
+  }
+}
+
+/* ─── Error Summary ───────────────────────────────────────────────────────── */
+
+.appkit-formshell__error-summary {
+  border: 1px solid var(--appkit-color-error, #dc2626);
+  border-radius: var(--appkit-radius-md, 0.375rem);
+  padding: var(--appkit-spacing-3, 0.75rem);
+  background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.05);
+}
+
+.appkit-formshell__error-summary__title {
+  font-weight: 600;
+  margin-bottom: var(--appkit-spacing-2, 0.5rem);
+}
+
+.appkit-formshell__error-summary__list {
+  list-style: disc;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-1, 0.25rem);
+}
+
+/* ─── Body + Steps ───────────────────────────────────────────────────────── */
+
+.appkit-formshell__body {
+  flex: 1;
+  /* Ensure body content is not hidden under the sticky footer. The footer is
+     ~56px tall; add generous padding so the last field is always reachable. */
+  padding-bottom: 5rem;
+}
+
+.appkit-formshell__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-1, 0.25rem);
+}
+
+.appkit-formshell__step {
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-md, 0.375rem);
+  overflow: hidden;
+}
+
+.appkit-formshell__step--active {
+  border-color: var(--appkit-color-primary);
+}
+
+.appkit-formshell__step--error {
+  border-color: var(--appkit-color-error, #dc2626);
+}
+
+/* Mobile accordion button — hidden on lg+ (step indicator handles navigation) */
+.appkit-formshell__step-accordion-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--appkit-spacing-3, 0.75rem) var(--appkit-spacing-4, 1rem);
+  background: var(--appkit-color-surface-secondary);
+  border: none;
+  cursor: pointer;
+  font-size: var(--appkit-font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--appkit-color-text-primary);
+  text-align: left;
+}
+
+.appkit-formshell__step-accordion-label {
+  flex: 1;
+}
+
+/* On lg+ the accordion controls are purely decorative; the step indicator drives navigation */
+@media (min-width: 1024px) {
+  .appkit-formshell--accordion-mobile .appkit-formshell__step-accordion-btn {
+    display: none;
+  }
+
+  .appkit-formshell--accordion-mobile .appkit-formshell__step [hidden] {
+    display: block !important;
+  }
+
+  .appkit-formshell--accordion-mobile .appkit-formshell__step-content {
+    display: block !important;
+  }
+}
+
+.appkit-formshell__step-content {
+  padding: 0.75rem 1.25rem;
+}
+
+/* ─── Footer ──────────────────────────────────────────────────────────────── */
+
+/*
+ * Sticky footer — always visible regardless of scroll position.
+ * Uses var(--appkit-z-dropdown, 30) so it stays above card content but below
+ * the site header (which uses var(--appkit-z-modal, 50)).
+ *
+ * Bottom offset accounts for:
+ *   - Mobile: bottom nav (--bottom-nav-height, 56px fallback) + iOS safe area
+ *   - Desktop (lg+): no bottom nav, just standard padding
+ */
+.appkit-formshell__footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--appkit-z-dropdown, 30);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--appkit-spacing-3, 0.75rem);
+  padding: 0.75rem 1.25rem;
+  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  flex-wrap: wrap;
+  /* Offset for mobile bottom nav (--bottom-nav-height set by AppLayoutShell) */
+  margin-bottom: 0;
+}
+
+/* On mobile, lift the footer above the bottom nav bar */
+@media (max-width: 1023px) {
+  .appkit-formshell__footer {
+    bottom: var(--bottom-nav-height, 64px);
+    box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 0.08);
+  }
+}
+
+/* On desktop the bottom nav is gone — reset to viewport bottom */
+@media (min-width: 1024px) {
+  .appkit-formshell__footer {
+    bottom: 0;
+    box-shadow: 0 -1px 0 0 var(--appkit-color-border);
+  }
+}
+
+.appkit-formshell__step-nav {
+  display: flex;
+  gap: var(--appkit-spacing-2, 0.5rem);
+}
+
+.appkit-formshell__actions {
+  display: flex;
+  gap: var(--appkit-spacing-2, 0.5rem);
+  margin-left: auto;
+}
+
+/* ─── Dark mode ──────────────────────────────────────────────────────────── */
+
+.dark .appkit-formshell__footer {
+  background: var(--appkit-color-surface-dark, var(--appkit-color-surface));
+}
+
+.dark .appkit-formshell__title {
+  color: var(--appkit-color-text-primary-dark, inherit);
+}
+
+.dark .appkit-formshell__step-accordion-btn {
+  background: var(--appkit-color-surface-secondary-dark, var(--appkit-color-surface-secondary));
+  color: var(--appkit-color-text-primary-dark, inherit);
+}
+
+.dark .appkit-formshell__error-summary {
+  background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.1);
+}

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

@@ -0,0 +1,8 @@
+export type { FormShellProps, FormShellStep, FormShellContextValue, } from "./FormShell";
+export { FormShell, useFormShell } from "./FormShell";
+export type { FieldInputProps } from "./FieldInput";
+export { FieldInput } from "./FieldInput";
+export type { FieldSelectProps } from "./FieldSelect";
+export { FieldSelect } from "./FieldSelect";
+export type { FieldCheckboxProps } from "./FieldCheckbox";
+export { FieldCheckbox } from "./FieldCheckbox";

package/dist/ui/forms/index.js

@@ -0,0 +1,4 @@
+export { FormShell, useFormShell } from "./FormShell";
+export { FieldInput } from "./FieldInput";
+export { FieldSelect } from "./FieldSelect";
+export { FieldCheckbox } from "./FieldCheckbox";

package/dist/ui/index.d.ts

@@ -1,4 +1,13 @@
 import "./components/index.style.css";
+import "./forms/FormShell.style.css";
+export type { FormShellProps, FormShellStep, FormShellContextValue, } from "./forms";
+export { FormShell, 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 { 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, HeaderProps, FooterProps, UlProps, OlProps, LiProps, } from "./components/Semantic";

package/dist/ui/index.js

@@ -1,4 +1,9 @@
 import "./components/index.style.css";
+import "./forms/FormShell.style.css";
+export { FormShell, useFormShell } from "./forms";
+export { FieldInput } from "./forms";
+export { FieldSelect } from "./forms";
+export { FieldCheckbox } from "./forms";
 // --- Column utilities ---------------------------------------------------------
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
 export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, } from "./components/Semantic";

package/dist/utils/action-response.d.ts

@@ -0,0 +1,6 @@
+import type { ActionResult } from "../core/server-action";
+export type { ActionResult };
+type ActionErrorResult = Extract<ActionResult<never>, {
+    ok: false;
+}>;
+export declare function handleActionError(err: unknown): ActionErrorResult;

package/dist/utils/action-response.js

@@ -0,0 +1,22 @@
+import { serverLogger } from "../monitoring";
+import { AuthorizationError, NotFoundError, ValidationError, } from "../errors";
+export function handleActionError(err) {
+    const devDebug = process.env.NODE_ENV === "development"
+        ? { stack: err instanceof Error ? err.stack : String(err) }
+        : undefined;
+    if (err instanceof NotFoundError)
+        return { ok: false, error: err.message, code: "NOT_FOUND", ...(devDebug && { debug: devDebug }) };
+    if (err instanceof ValidationError) {
+        const code = err.data?.code ?? "VALIDATION";
+        return { ok: false, error: err.message, code, ...(devDebug && { debug: devDebug }) };
+    }
+    if (err instanceof AuthorizationError)
+        return { ok: false, error: err.message, code: "UNAUTHORIZED", ...(devDebug && { debug: devDebug }) };
+    serverLogger.error("Unexpected action error", { err });
+    return {
+        ok: false,
+        error: "Something went wrong. Please try again.",
+        code: "INTERNAL",
+        ...(devDebug && { debug: devDebug }),
+    };
+}

package/dist/utils/index.d.ts

@@ -16,4 +16,5 @@ export * from "./color.helper";
 export * from "./business-day";
 export * from "./schema-ui";
 export * from "./listing-params";
+export * from "./action-response";
 export { splitCartIntoOrderGroups, type OrderType, type OrderGroup, } from "../features/orders/utils/order-splitter";

package/dist/utils/index.js

@@ -16,5 +16,6 @@ export * from "./color.helper";
 export * from "./business-day";
 export * from "./schema-ui";
 export * from "./listing-params";
+export * from "./action-response";
 // Re-export order utilities for checkout flows
 export { splitCartIntoOrderGroups, } from "../features/orders/utils/order-splitter";

package/dist/validation/schemas.d.ts

@@ -6,15 +6,15 @@ export declare const paginationQuerySchema: z.ZodObject<{
     sortOrder: z.ZodDefault<z.ZodEnum<["asc", "desc"]>>;
     search: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    sortOrder: "asc" | "desc";
     page: number;
+    sortOrder: "desc" | "asc";
     limit: number;
     search?: string | undefined;
     sortBy?: string | undefined;
 }, {
-    sortOrder?: "asc" | "desc" | undefined;
     search?: string | undefined;
     page?: number | undefined;
+    sortOrder?: "desc" | "asc" | undefined;
     limit?: number | undefined;
     sortBy?: string | undefined;
 }>;
@@ -117,8 +117,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     minWidth: z.ZodOptional<z.ZodNumber>;
     minHeight: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -130,8 +130,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -143,8 +143,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -156,8 +156,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -169,8 +169,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -182,8 +182,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -195,8 +195,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }>, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;
@@ -208,8 +208,8 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
 }, {
-    width: number;
     height: number;
+    width: number;
     x: number;
     y: number;
     sourceUrl: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.36",
+  "version": "2.7.38",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -147,7 +147,7 @@
     "watch:css": "tailwindcss -i src/tailwind-input.css -o dist/tailwind-utilities.css --watch",
     "audit": "node scripts/audit-violations.mjs",
     "check:types": "tsc --noEmit",
-    "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs",
+    "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs && node scripts/audit-export-paths.mjs",
     "check": "npm run check:types && npm run check:audits"
   },
   "dependencies": {