@marianmeres/stuic 3.123.0 → 3.125.0

package/dist/components/Checkout/CheckoutConfirmStep.svelte

@@ -220,6 +220,7 @@
 						<CheckoutOrderSummary
 							totals={order.totals}
 							hasShipping={!!order.delivery_option_id}
+							shippingPending={!!order.delivery_option?.pending}
 							{formatPrice}
 							t={tProp}
 							{unstyled}

package/dist/components/Checkout/CheckoutOrderConfirmation.svelte

@@ -206,7 +206,9 @@
 						<div
 							class={unstyled ? undefined : "stuic-checkout-confirmation-delivery-detail"}
 						>
-							{#if order.delivery_option.price === 0}
+							{#if order.delivery_option.pending}
+								{t("checkout.summary.pending")}
+							{:else if order.delivery_option.price === 0}
 								{t("checkout.summary.free")}
 							{:else}
 								{fp(order.delivery_option.price)}
@@ -233,6 +235,7 @@
 		</CheckoutSectionHeader>
 		<CheckoutOrderSummary
 			totals={order.totals}
+			shippingPending={!!order.delivery_option?.pending}
 			formatPrice={formatPriceProp}
 			t={tProp}
 			{unstyled}

package/dist/components/Checkout/CheckoutOrderReview.svelte

@@ -306,7 +306,9 @@
 				<div class={unstyled ? undefined : "stuic-checkout-review-delivery"}>
 					<span>{order.delivery_option.name}</span>
 					<span>
-						{#if order.delivery_option.price === 0}
+						{#if order.delivery_option.pending}
+							{t("checkout.summary.pending")}
+						{:else if order.delivery_option.price === 0}
 							{t("checkout.summary.free")}
 						{:else}
 							{fp(order.delivery_option.price)}

package/dist/components/Checkout/CheckoutOrderSummary.svelte

@@ -15,6 +15,15 @@
 		 */
 		hasShipping?: boolean;
 
+		/**
+		 * Shipping cost is not yet known and will be quoted/calculated later
+		 * (e.g. international orders quoted by email). When true, the shipping row
+		 * shows the `checkout.summary.pending` label ("Calculated separately")
+		 * instead of "Free" or the amount — even when `totals.shipping` is 0.
+		 * Default: false
+		 */
+		shippingPending?: boolean;
+
 		/**
 		 * Format a number (in cents) to a display string.
 		 * Default: defaultFormatPrice (cents / 100, 2 decimal places)
@@ -58,6 +67,7 @@
 	let {
 		totals,
 		hasShipping = true,
+		shippingPending = false,
 		formatPrice: formatPriceProp,
 		row,
 		extraRows,
@@ -72,6 +82,7 @@
 	let fp = $derived(formatPriceProp ?? defaultFormatPrice);
 
 	let shippingValue = $derived.by(() => {
+		if (shippingPending) return t("checkout.summary.pending");
 		if (!hasShipping) return t("checkout.summary.not_selected");
 		if (totals.shipping === 0) return t("checkout.summary.free");
 		return fp(totals.shipping);

package/dist/components/Checkout/CheckoutOrderSummary.svelte.d.ts

@@ -11,6 +11,14 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
      * Default: true
      */
     hasShipping?: boolean;
+    /**
+     * Shipping cost is not yet known and will be quoted/calculated later
+     * (e.g. international orders quoted by email). When true, the shipping row
+     * shows the `checkout.summary.pending` label ("Calculated separately")
+     * instead of "Free" or the amount — even when `totals.shipping` is 0.
+     * Default: false
+     */
+    shippingPending?: boolean;
     /**
      * Format a number (in cents) to a display string.
      * Default: defaultFormatPrice (cents / 100, 2 decimal places)

package/dist/components/Checkout/CheckoutShippingStep.svelte

@@ -360,6 +360,7 @@
 						<CheckoutOrderSummary
 							totals={order.totals}
 							hasShipping={!!order.delivery_option_id}
+							shippingPending={!!order.delivery_option?.pending}
 							{formatPrice}
 							t={tProp}
 							{unstyled}

package/dist/components/Checkout/_internal/checkout-i18n-defaults.js

@@ -19,6 +19,7 @@ const DEFAULTS = {
     "checkout.summary.total": "Total",
     "checkout.summary.free": "Free",
     "checkout.summary.not_selected": "\u2014",
+    "checkout.summary.pending": "Calculated separately",
     // -- CheckoutCartReview (03) --
     "checkout.cart.title": "Order Summary",
     "checkout.cart.edit": "Edit Cart",

package/dist/components/Checkout/_internal/checkout-types.d.ts

@@ -74,6 +74,13 @@ export interface CheckoutDeliverySnapshot {
     name: string;
     price: number;
     estimated_time?: string;
+    /**
+     * Shipping cost is not yet known and will be quoted/calculated later
+     * (e.g. international orders quoted by email after the order is placed).
+     * When true, components render the `checkout.summary.pending` label instead
+     * of the price or "Free", regardless of `price` being 0.
+     */
+    pending?: boolean;
 }
 export interface CheckoutOrderData {
     status: string;

package/dist/components/Input/FieldObject.svelte

@@ -18,6 +18,19 @@
 		id?: string;
 		tabindex?: number;
 		renderSize?: "sm" | "md" | "lg" | string;
+		/**
+		 * Max nesting depth rendered in (read-only) preview mode before a node is
+		 * collapsed to a keys-only / `[n]` summary with a "more…" hint. Prevents
+		 * deeply nested objects from blowing out horizontally and becoming
+		 * unreadable. Has no effect on raw edit mode. Defaults to 4.
+		 */
+		previewMaxDepth?: number;
+		/**
+		 * When true (the default), the edit toggle opens the raw JSON editor in a
+		 * (near) full-screen modal — comfortable for large / deeply nested objects.
+		 * Set `false` to edit inline in a textarea below the preview instead.
+		 */
+		fullscreenEdit?: boolean;
 		required?: boolean;
 		disabled?: boolean;
 		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
@@ -38,6 +51,9 @@
 	import { validate as validateAction } from "../../actions/validate.svelte.js";
 	import { getId } from "../../utils/get-id.js";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import Modal from "../Modal/Modal.svelte";
+	import { Thc, isTHCNotEmpty } from "../Thc/index.js";
 	import InputWrap from "./_internal/InputWrap.svelte";
 
 	let {
@@ -49,6 +65,8 @@
 		class: classProp,
 		tabindex = 0,
 		renderSize = "sm",
+		previewMaxDepth = 4,
+		fullscreenEdit = true,
 		required = false,
 		disabled = false,
 		// Renamed local binding to avoid collision with `export function validate()` below.
@@ -113,17 +131,54 @@
 			}
 		} else {
 			validation = undefined;
-			// Pretty-print the JSON before entering edit mode
-			try {
-				const obj = JSON.parse(value || "null");
-				value = JSON.stringify(obj, null, "\t");
-			} catch {
-				// leave value as-is if not parseable
-			}
+			prettyPrint();
 			editMode = true;
 		}
 	}
 
+	/** Pretty-print `value` in place; leaves it untouched if not parseable. */
+	function prettyPrint() {
+		try {
+			value = JSON.stringify(JSON.parse(value || "null"), null, "\t");
+		} catch {
+			// not parseable — leave as-is
+		}
+	}
+
+	// --- Fullscreen modal editor (opt-in via `fullscreenEdit`) ---
+	let fsModal: Modal | undefined = $state();
+	// Snapshot of `value` captured when the modal opens, so Cancel / Escape can
+	// discard edits and restore the original (the inline editor has no cancel).
+	let fsSnapshot = "";
+
+	function openFullscreen(openerOrEvent?: MouseEvent) {
+		validation = undefined;
+		fsSnapshot = value;
+		prettyPrint();
+		fsModal?.open(openerOrEvent ?? null);
+	}
+
+	function applyFullscreen() {
+		// Same rule as the inline toggle: invalid JSON keeps the editor open.
+		try {
+			JSON.parse(value || "null");
+			validation = undefined;
+			fsModal?.close();
+		} catch {
+			validation = {
+				valid: false,
+				message: "This field requires attention. Please review and try again.",
+			};
+		}
+	}
+
+	function cancelFullscreen() {
+		// discard edits — restore the value as it was when the modal opened
+		value = fsSnapshot;
+		validation = undefined;
+		fsModal?.close();
+	}
+
 	// Validation
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
@@ -167,7 +222,7 @@
 	}
 
 	const TEXTAREA_CLS =
-		"w-full min-h-16 p-2 font-mono text-sm focus:outline-none focus:ring-0";
+		"w-full min-h-16 p-2 font-mono text-sm focus:outline-none focus:ring-0 scrollbar-thin";
 
 	const BTN_CLS = [
 		"toggle-btn",
@@ -198,6 +253,13 @@
 	{/if}
 {/snippet}
 
+{#snippet moreHint()}
+	<span
+		class="ml-1 align-middle text-xs italic opacity-40"
+		title="Open the editor to view the full structure">more&hellip;</span
+	>
+{/snippet}
+
 {#snippet renderValue(val: unknown, depth: number)}
 	{#if val === null || val === undefined || typeof val === "boolean" || typeof val === "number" || typeof val === "string"}
 		{@render renderPrimitive(val)}
@@ -210,6 +272,9 @@
 			<span class="break-words"
 				>{val.map((v) => (v === null ? "null" : String(v))).join(", ")}</span
 			>
+		{:else if depth >= previewMaxDepth}
+			<!-- Too deep to render legibly — collapse to count + hint -->
+			<span class="opacity-50">[{val.length}]</span>{@render moreHint()}
 		{:else}
 			<div class="flex flex-col gap-2">
 				{#each val as item, i (i)}
@@ -236,6 +301,11 @@
 			<span class="opacity-50"
 				>{"{"}&#8239;{entries.map(([k]) => k).join(", ")}&#8239;{"}"}</span
 			>
+		{:else if depth >= previewMaxDepth}
+			<!-- Too deep to render legibly — collapse to keys + hint -->
+			<span class="opacity-50"
+				>{"{"}&#8239;{entries.map(([k]) => k).join(", ")}&#8239;{"}"}</span
+			>{@render moreHint()}
 		{:else}
 			<div class={twMerge("flex flex-col", depth > 0 && "ml-2")}>
 				{#each entries as [key, v], i (key)}
@@ -310,6 +380,7 @@
 					class={TEXTAREA_CLS}
 					{tabindex}
 					{disabled}
+					wrap="off"
 					use:autogrow={() => ({ enabled: true, value })}
 				></textarea>
 			{:else}
@@ -331,7 +402,7 @@
 			type="button"
 			class={BTN_CLS}
 			bind:this={toggleBtnEl}
-			onclick={toggleMode}
+			onclick={(e) => (fullscreenEdit ? openFullscreen(e) : toggleMode())}
 			{disabled}
 			use:tooltip={() => ({
 				enabled: true,
@@ -374,3 +445,52 @@
 		};
 	}}
 />
+
+{#if fullscreenEdit}
+	<!-- Full-screen raw JSON editor (opened by the edit toggle when `fullscreenEdit`) -->
+	<Modal
+		bind:this={fsModal}
+		noClickOutsideClose
+		onEscape={() => {
+			// Escape behaves like Cancel — discard edits (the dialog closes itself)
+			value = fsSnapshot;
+			validation = undefined;
+		}}
+		classDialog="md:size-full"
+		classInner="md:h-full md:max-h-full md:min-h-0 md:w-full md:max-w-full"
+		classHeader="p-3 flex items-center gap-2 border-b border-(--stuic-color-border)"
+		classMain="p-0 flex flex-col overflow-hidden"
+		classFooter="p-3 flex items-center border-t border-(--stuic-color-border)"
+	>
+		{#snippet header()}
+			<span class="flex-1 truncate font-semibold">
+				{#if typeof label === "function"}
+					{@render label({ id })}
+				{:else if isTHCNotEmpty(label)}
+					<Thc thc={label as THC} />
+				{:else}
+					Edit JSON
+				{/if}
+			</span>
+		{/snippet}
+
+		<textarea
+			bind:value
+			{disabled}
+			wrap="off"
+			class="min-h-0 w-full flex-1 resize-none p-3 font-mono text-sm scrollbar-thin focus:outline-none focus:ring-0"
+		></textarea>
+
+		{#snippet footer()}
+			<div class="flex w-full items-center justify-between gap-3">
+				<span class="text-sm text-red-600 dark:text-red-400">
+					{#if validation && !validation.valid}{validation.message}{/if}
+				</span>
+				<div class="flex gap-2">
+					<Button type="button" variant="ghost" onclick={cancelFullscreen}>Cancel</Button>
+					<Button type="button" onclick={applyFullscreen}>Apply</Button>
+				</div>
+			</div>
+		{/snippet}
+	</Modal>
+{/if}

package/dist/components/Input/FieldObject.svelte.d.ts

@@ -14,6 +14,19 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     id?: string;
     tabindex?: number;
     renderSize?: "sm" | "md" | "lg" | string;
+    /**
+     * Max nesting depth rendered in (read-only) preview mode before a node is
+     * collapsed to a keys-only / `[n]` summary with a "more…" hint. Prevents
+     * deeply nested objects from blowing out horizontally and becoming
+     * unreadable. Has no effect on raw edit mode. Defaults to 4.
+     */
+    previewMaxDepth?: number;
+    /**
+     * When true (the default), the edit toggle opens the raw JSON editor in a
+     * (near) full-screen modal — comfortable for large / deeply nested objects.
+     * Set `false` to edit inline in a textarea below the preview instead.
+     */
+    fullscreenEdit?: boolean;
     required?: boolean;
     disabled?: boolean;
     validate?: boolean | Omit<ValidateOptions, "setValidationResult">;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.123.0",
+	"version": "3.125.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",