@standhigher/besttrack-page-extension 0.2.1 → 0.3.0

package/README.md

@@ -1,8 +1,9 @@
 # @standhigher/besttrack-page-extension
 
 V0.7.1 adds the besttrack.branded built-in template. Its announcement, order
-query, order items, recommendations, quick links and Blog blocks use the same
-host-injected tracking query contract as Ready-to-go. Logo and content are
+query, order items, recommendations, quick links and Blog blocks use the
+shared, host-injected `TrackingPageQuery` contract. The
+`ReadyToGoTrackingQuery` name remains a compatible alias. Logo and content are
 JSON-only block props; brand colour, font and radius use the template Theme
 Tokens and may be overridden through PageDocument.theme.
 
@@ -12,3 +13,22 @@ the Shopify Track Page layout (query card, five-step progress, shipping
 timeline, package contents and product cards) using inline styles and `--pb-*`
 Theme Tokens. Live tracking is injected by the host Runtime; this package never
 stores credentials or network endpoints in a `PageDocument`.
+
+V0.7.2 Sales uses the shared, transient `TrackingPageQuery` contract exported
+by this package. The external Go Consumer Runtime API owns live-query
+authorization and transport; Sales only receives its display-safe result and
+never falls back to mock data after a live failure.
+
+Sales keeps the stable `besttrack.sales` v1 template and seven block IDs.
+Its host must inject the query from an authorized Consumer Runtime flow; this
+package provides neither a Go client nor a BFF. The editor validates
+merchant-authored text, preview-only tracking placeholders and collection
+links, while the storefront renders only site-relative or HTTPS resource
+links. See `docs/integration/sales-template.md` and
+`docs/integration/consumer-runtime-api.md` for the host contract.
+
+New Sales pages use the `hero` visual Variant: a token-driven announcement,
+merchant HTTPS hero image and tracking-only query card. Existing `commerce`
+Variants and published v1 documents stay valid. The browser does not offer an
+order-number mode because the shared Consumer Runtime API currently accepts
+only a tracking number.

package/dist/index.d.ts

@@ -2,7 +2,14 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { PageBuilderExtension, TemplateDefinition } from '@standhigher/puck-page-builder/runtime';
 
-type ReadyToGoOrderItem = {
+/**
+ * Display-safe, transient data returned by a Consumer Runtime query.
+ *
+ * These types intentionally describe the boundary between a storefront host
+ * and the template. They are not PageDocument props and must never be saved
+ * with a draft or published document.
+ */
+type TrackingPageOrderItem = {
     id: string;
     title: string;
     quantity: number;
@@ -10,7 +17,7 @@ type ReadyToGoOrderItem = {
     description?: string;
     href?: string;
 };
-type ReadyToGoRecommendation = {
+type TrackingPageRecommendation = {
     id: string;
     title: string;
     description: string;
@@ -18,21 +25,21 @@ type ReadyToGoRecommendation = {
     href?: string;
     price?: string;
 };
-type ReadyToGoTrackingStep = {
+type TrackingPageTrackingStep = {
     id: string;
     label: string;
     state: "complete" | "current" | "upcoming";
     date?: string;
     icon?: "check" | "bag" | "truck" | "box";
 };
-type ReadyToGoTrackingEvent = {
+type TrackingPageTrackingEvent = {
     id: string;
     title: string;
     at?: string;
     detail?: string;
     state?: "complete" | "current" | "upcoming";
 };
-type ReadyToGoShipment = {
+type TrackingPageShipment = {
     id: string;
     label: string;
     trackingNumber?: string;
@@ -42,12 +49,14 @@ type ReadyToGoShipment = {
     updatedAt?: string;
     deliveryAddress?: string;
     estimatedDelivery?: string;
-    progress?: ReadyToGoTrackingStep[];
-    events?: ReadyToGoTrackingEvent[];
-    orderItems?: ReadyToGoOrderItem[];
-    recommendations?: ReadyToGoRecommendation[];
+    progress?: TrackingPageTrackingStep[];
+    events?: TrackingPageTrackingEvent[];
+    orderItems?: TrackingPageOrderItem[];
+    recommendations?: TrackingPageRecommendation[];
 };
-type ReadyToGoTrackingResult = {
+type TrackingPageQueryResult = {
+    /** `empty` is a successful query with no customer-visible tracking result. */
+    outcome?: "found" | "empty";
     trackingNumber: string;
     status: string;
     carrier?: string;
@@ -55,13 +64,22 @@ type ReadyToGoTrackingResult = {
     updatedAt?: string;
     deliveryAddress?: string;
     estimatedDelivery?: string;
-    progress?: ReadyToGoTrackingStep[];
-    events?: ReadyToGoTrackingEvent[];
-    orderItems?: ReadyToGoOrderItem[];
-    recommendations?: ReadyToGoRecommendation[];
-    shipments?: ReadyToGoShipment[];
+    progress?: TrackingPageTrackingStep[];
+    events?: TrackingPageTrackingEvent[];
+    orderItems?: TrackingPageOrderItem[];
+    recommendations?: TrackingPageRecommendation[];
+    shipments?: TrackingPageShipment[];
 };
-type ReadyToGoTrackingQuery = (trackingNumber: string) => Promise<ReadyToGoTrackingResult>;
+/** The UI receives an injected function; it never knows a Go endpoint or credential. */
+type TrackingPageQuery = (trackingNumber: string) => Promise<TrackingPageQueryResult>;
+type TrackingPageRuntimePhase = "idle" | "loading" | "success" | "empty" | "error";
+declare function isEmptyTrackingPageResult(result: TrackingPageQueryResult): boolean;
+
+type ReadyToGoTrackingStep = TrackingPageTrackingStep;
+type ReadyToGoTrackingEvent = TrackingPageTrackingEvent;
+type ReadyToGoShipment = TrackingPageShipment;
+type ReadyToGoTrackingResult = TrackingPageQueryResult;
+type ReadyToGoTrackingQuery = TrackingPageQuery;
 type ReadyToGoRuntimeState = {
     phase: "idle" | "loading" | "success" | "error";
     result?: ReadyToGoTrackingResult;
@@ -79,31 +97,32 @@ declare const bestTrackPageExtension: PageBuilderExtension;
 declare function createBrandedTemplate(): TemplateDefinition;
 declare const bestTrackBrandedExtension: PageBuilderExtension;
 
+/** Branded uses the shared, display-safe Consumer Runtime result without persisting it. */
 type BrandedRuntimeState = {
-    phase: "idle" | "loading" | "success" | "error";
-    result?: ReadyToGoTrackingResult;
+    phase: TrackingPageRuntimePhase;
+    result?: TrackingPageQueryResult;
     error?: string;
 };
 type BrandedRuntimeProviderProps = {
     children: ReactNode;
-    queryTracking: ReadyToGoTrackingQuery;
+    queryTracking: TrackingPageQuery;
 };
 declare function BrandedRuntimeProvider({ children, queryTracking }: BrandedRuntimeProviderProps): react.JSX.Element;
 
+/** Stable Sales v1 document and block IDs are intentionally retained for published-page compatibility. */
 declare function createSalesTemplate(): TemplateDefinition;
 declare const bestTrackSalesExtension: PageBuilderExtension;
 
-type SalesPhase = "idle" | "loading" | "success" | "error";
+/** Transient, consumer-safe state. The host error is deliberately never retained for display. */
 type SalesRuntimeState = {
-    phase: SalesPhase;
-    result?: ReadyToGoTrackingResult;
-    error?: string;
+    phase: TrackingPageRuntimePhase;
+    result?: TrackingPageQueryResult;
 };
 type SalesRuntimeProviderProps = {
     children: ReactNode;
-    queryTracking: ReadyToGoTrackingQuery;
+    queryTracking: TrackingPageQuery;
 };
 /** The host injects a validated query; Sales never calls a DataSource itself. */
 declare function SalesRuntimeProvider({ children, queryTracking }: SalesRuntimeProviderProps): react.JSX.Element;
 
-export { BrandedRuntimeProvider, type BrandedRuntimeProviderProps, type BrandedRuntimeState, ReadyToGoRuntimeProvider, type ReadyToGoRuntimeProviderProps, type ReadyToGoRuntimeState, type ReadyToGoShipment, type ReadyToGoTrackingEvent, type ReadyToGoTrackingQuery, type ReadyToGoTrackingResult, type ReadyToGoTrackingStep, SalesRuntimeProvider, type SalesRuntimeProviderProps, type SalesRuntimeState, bestTrackBrandedExtension, bestTrackPageExtension, bestTrackSalesExtension, createBrandedTemplate, createReadyToGoTemplate, createSalesTemplate };
+export { BrandedRuntimeProvider, type BrandedRuntimeProviderProps, type BrandedRuntimeState, ReadyToGoRuntimeProvider, type ReadyToGoRuntimeProviderProps, type ReadyToGoRuntimeState, type ReadyToGoShipment, type ReadyToGoTrackingEvent, type ReadyToGoTrackingQuery, type ReadyToGoTrackingResult, type ReadyToGoTrackingStep, SalesRuntimeProvider, type SalesRuntimeProviderProps, type SalesRuntimeState, type TrackingPageOrderItem, type TrackingPageQuery, type TrackingPageQueryResult, type TrackingPageRecommendation, type TrackingPageRuntimePhase, type TrackingPageShipment, type TrackingPageTrackingEvent, type TrackingPageTrackingStep, bestTrackBrandedExtension, bestTrackPageExtension, bestTrackSalesExtension, createBrandedTemplate, createReadyToGoTemplate, createSalesTemplate, isEmptyTrackingPageResult };

package/dist/index.js

@@ -345,7 +345,7 @@ function ReadyToGoQueryEditor(block) {
     /* @__PURE__ */ jsx2("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
   ] }) });
 }
-function ReadyToGoProgressEditor(_block) {
+function ReadyToGoProgressEditor() {
   return /* @__PURE__ */ jsx2("section", { "aria-label": "Ready-to-go progress editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx2("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx2(ProgressResult, { showEstimatedDelivery: false, result: previewReadyToGoTracking() }) }) });
 }
 function ReadyToGoDeliveryEditor(block) {
@@ -577,7 +577,14 @@ var bestTrackPageExtension = Object.freeze({
 import { createPageDocument as createPageDocument2 } from "@standhigher/puck-page-builder/runtime";
 
 // src/branded.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useState as useState3 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+
+// src/tracking-page-runtime.ts
+function isEmptyTrackingPageResult(result) {
+  return result.outcome === "empty";
+}
+
+// src/branded.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var initialRuntime2 = {
   phase: "idle",
@@ -598,17 +605,22 @@ var cardStyle = { background: "#fff", color: "#0a0a0a", border: "1px solid #e7e7
 function BrandedRuntimeProvider({ children, queryTracking }) {
   const [state, setState] = useState3({ phase: "idle" });
   const [selectedShipmentId, setSelectedShipmentId] = useState3(null);
+  const requestId = useRef(0);
   const query = useCallback2(async (trackingNumber) => {
+    const currentRequestId = ++requestId.current;
     setState({ phase: "loading" });
     try {
       const result = await queryTracking(trackingNumber);
+      if (currentRequestId !== requestId.current) return;
       setSelectedShipmentId(result.shipments?.[0]?.id ?? null);
-      setState({ phase: "success", result });
-    } catch (error) {
-      setState({ phase: "error", error: error instanceof Error ? error.message : "tracking-query-failed" });
+      setState({ phase: isEmptyTrackingPageResult(result) ? "empty" : "success", result });
+    } catch {
+      if (currentRequestId !== requestId.current) return;
+      setState({ phase: "error", error: "tracking-query-failed" });
     }
   }, [queryTracking]);
   const reset = useCallback2(() => {
+    requestId.current += 1;
     setSelectedShipmentId(null);
     setState({ phase: "idle" });
   }, []);
@@ -617,7 +629,9 @@ function BrandedRuntimeProvider({ children, queryTracking }) {
     const shipment = state.result.shipments?.find((item) => item.id === selectedShipmentId);
     return shipment ? { ...state.result, ...shipment } : state.result;
   }, [selectedShipmentId, state.result]);
-  const selectShipment = useCallback2((id) => setSelectedShipmentId(id), []);
+  const selectShipment = useCallback2((id) => {
+    if (state.result?.shipments?.some((shipment) => shipment.id === id)) setSelectedShipmentId(id);
+  }, [state.result]);
   const value = useMemo2(
     () => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment }),
     [displayedResult, query, reset, selectedShipmentId, selectShipment, state]
@@ -632,7 +646,7 @@ function text3(props, key, fallback) {
 }
 function safeHref2(value) {
   if (typeof value !== "string") return "#";
-  if (value.startsWith("/")) return value;
+  if (value.startsWith("/") && !value.startsWith("//")) return value;
   try {
     const url = new URL(value);
     return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "#";
@@ -663,7 +677,7 @@ function ProductImage2({ src, alt }) {
 function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
   const runtime = useBrandedRuntime();
   const configuredShipments = shipmentLabels(configuredLabels);
-  const shipments = runtime.result?.shipments?.length ? runtime.result.shipments : configuredShipments;
+  const shipments = runtime.phase === "idle" || runtime.phase === "loading" ? configuredShipments : runtime.result?.shipments ?? [];
   if (!shipments.length) return null;
   return /* @__PURE__ */ jsx3("div", { "aria-label": "Shipment switcher", style: { ...contentWidth2, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto", whiteSpace: "nowrap" }, children: shipments.map((shipment, index) => {
     const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
@@ -693,7 +707,8 @@ function QueryHero(props) {
         /* @__PURE__ */ jsx3("input", { id: "branded-tracking-number", "aria-label": mode === "order" ? "Order number" : "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), required: true, minLength: 4, maxLength: 64, placeholder: mode === "order" ? "Enter your order number" : "Enter your tracking number", style: { width: "100%", height: 48, padding: "0 16px", boxSizing: "border-box", border: "1px solid #e2e2e2", borderRadius: 10, font: "inherit" } }),
         /* @__PURE__ */ jsx3("button", { type: "submit", disabled: runtime.phase === "loading", style: { width: "100%", minHeight: 48, marginTop: 24, border: 0, borderRadius: 10, background: runtime.phase === "loading" ? "#6b6b6b" : "#000", color: "#fff", font: "inherit", cursor: runtime.phase === "loading" ? "wait" : "pointer" }, children: runtime.phase === "loading" ? "Tracking\u2026" : text3(props, "submitLabel", "Track") })
       ] }),
-      runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { marginBottom: 0, color: "#b42318" }, children: runtime.error }) : null,
+      runtime.phase === "empty" ? /* @__PURE__ */ jsx3("p", { role: "status", style: { marginBottom: 0, color: "#6b6b6b" }, children: "We couldn\u2019t find an order for that number." }) : null,
+      runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { marginBottom: 0, color: "#b42318" }, children: "We couldn\u2019t retrieve this order right now. Please try again later." }) : null,
       /* @__PURE__ */ jsx3("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 8, textAlign: "right" }, children: "Powered by BestTrack" })
     ] })
   ] });
@@ -873,13 +888,14 @@ function BrandedOrderItemsBlock(props) {
   ] }) });
 }
 function RecommendationCard({ item }) {
+  const href = safeHref2(item.href);
   return /* @__PURE__ */ jsxs3("article", { style: { overflow: "hidden", borderRadius: 6, background: "#fff", boxShadow: "0 1px 2px rgb(0 0 0 / 8%)" }, children: [
     /* @__PURE__ */ jsx3(ProductImage2, { src: item.imageUrl, alt: item.title }),
     /* @__PURE__ */ jsxs3("div", { style: { padding: 14 }, children: [
       /* @__PURE__ */ jsx3("strong", { children: item.title }),
       item.price ? /* @__PURE__ */ jsx3("p", { style: { margin: "6px 0", fontWeight: 700 }, children: item.price }) : null,
       /* @__PURE__ */ jsx3("p", { style: { margin: "6px 0", color: "#6b6b6b", fontSize: 13 }, children: item.description }),
-      /* @__PURE__ */ jsx3("a", { href: safeHref2(item.href), style: { color: "#0a0a0a", fontSize: 13, fontWeight: 700 }, children: "View product" })
+      href === "#" ? /* @__PURE__ */ jsx3("span", { style: { color: "#6b6b6b", fontSize: 13, fontWeight: 700 }, children: "View product" }) : /* @__PURE__ */ jsx3("a", { href, style: { color: "#0a0a0a", fontSize: 13, fontWeight: 700 }, children: "View product" })
     ] })
   ] });
 }
@@ -887,10 +903,10 @@ function BrandedRecommendationsBlock(props) {
   const runtime = useBrandedRuntime();
   const recommendations = runtime.displayedResult?.recommendations ?? [];
   const title = text3(props, "heading", "You might also like");
-  if (runtime.phase === "success" && !recommendations.length && text3(props, "hideWhenEmpty", "false") === "true") return null;
+  if ((runtime.phase === "success" || runtime.phase === "empty") && !recommendations.length && text3(props, "hideWhenEmpty", "false") === "true") return null;
   return /* @__PURE__ */ jsx3("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth2, children: [
     /* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 20 }, children: title }),
-    runtime.phase === "loading" ? /* @__PURE__ */ jsx3("div", { "aria-label": "Loading recommendations", style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx3("span", { style: { display: "block", height: 220, borderRadius: 6, background: "#e7e7e7" } }, item)) }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: recommendations.map((item) => /* @__PURE__ */ jsx3(RecommendationCard, { item }, item.id)) }) : /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Recommendations are temporarily unavailable." : "Recommendations will appear with your order." })
+    runtime.phase === "loading" ? /* @__PURE__ */ jsx3("div", { "aria-label": "Loading recommendations", style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx3("span", { style: { display: "block", height: 220, borderRadius: 6, background: "#e7e7e7" } }, item)) }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: recommendations.map((item) => /* @__PURE__ */ jsx3(RecommendationCard, { item }, item.id)) }) : /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Recommendations are temporarily unavailable." : runtime.phase === "empty" ? "No recommendations are available for that number." : "Recommendations will appear with your order." })
   ] }) });
 }
 function BrandedQuickLinksBlock(props) {
@@ -936,22 +952,30 @@ var bestTrackBrandedExtension = Object.freeze({ name: "besttrack.branded", versi
 import { createPageDocument as createPageDocument3 } from "@standhigher/puck-page-builder/runtime";
 
 // src/sales.tsx
-import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useId, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var initialRuntime3 = { phase: "idle", async query() {
   return void 0;
 } };
 var SalesRuntimeContext = createContext3(initialRuntime3);
-var cardStyle2 = { border: "1px solid var(--pb-color-border)", borderRadius: "var(--pb-radius)", padding: "var(--pb-spacing)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)" };
-var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "var(--pb-spacing)" };
+var contentWidth3 = { boxSizing: "border-box", width: "min(1120px, calc(100% - 32px))", margin: "0 auto" };
+var sectionStyle = { ...contentWidth3, marginTop: "clamp(32px, 6vw, 72px)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)" };
+var panelStyle = { boxSizing: "border-box", border: "1px solid var(--pb-color-border)", borderRadius: "var(--pb-radius)", padding: "clamp(20px, 3vw, 32px)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", overflowWrap: "anywhere" };
+var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))", gap: "clamp(16px, 2vw, 24px)" };
+var trackingNumberPattern = /^[A-Za-z0-9-]{4,64}$/;
 function SalesRuntimeProvider({ children, queryTracking }) {
   const [state, setState] = useState4({ phase: "idle" });
+  const requestId = useRef2(0);
   const query = useCallback3(async (trackingNumber) => {
+    const currentRequestId = ++requestId.current;
     setState({ phase: "loading" });
     try {
-      setState({ phase: "success", result: await queryTracking(trackingNumber) });
-    } catch (error) {
-      setState({ phase: "error", error: error instanceof Error ? error.message : "tracking-query-failed" });
+      const result = await queryTracking(trackingNumber);
+      if (currentRequestId !== requestId.current) return;
+      setState({ phase: isEmptyTrackingPageResult(result) ? "empty" : "success", result });
+    } catch {
+      if (currentRequestId !== requestId.current) return;
+      setState({ phase: "error" });
     }
   }, [queryTracking]);
   const value = useMemo3(() => ({ ...state, query }), [query, state]);
@@ -961,115 +985,314 @@ function useSalesRuntime() {
   return useContext3(SalesRuntimeContext);
 }
 function text5(props, key, fallback) {
-  return typeof props[key] === "string" ? props[key] : fallback;
+  const value = props[key];
+  return typeof value === "string" && value.trim() ? value.trim() : fallback;
+}
+function hasControlCharacter(value) {
+  return [...value].some((character) => character.charCodeAt(0) < 32);
 }
 function safeHref3(value) {
-  if (typeof value !== "string") return "#";
-  if (value.startsWith("/")) return value;
+  if (typeof value !== "string") return void 0;
+  if (value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\") && !value.includes("\\") && !hasControlCharacter(value)) return value;
   try {
     const url = new URL(value);
-    return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "#";
+    return url.protocol === "https:" ? url.toString() : void 0;
   } catch {
-    return "#";
+    return void 0;
   }
 }
-function Section({ title, children }) {
-  return /* @__PURE__ */ jsxs4("section", { "aria-label": title, style: cardStyle2, children: [
-    /* @__PURE__ */ jsx4("h2", { style: { marginTop: 0 }, children: title }),
-    children
-  ] });
+function safeImageUrl3(value) {
+  if (typeof value !== "string") return void 0;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" ? url.toString() : void 0;
+  } catch {
+    return void 0;
+  }
 }
 function resourceState(value) {
   return typeof value !== "string" ? "invalid" : value.trim() ? "ready" : "empty";
 }
+function Status({ children, alert = false }) {
+  return /* @__PURE__ */ jsx4("p", { role: alert ? "alert" : "status", "aria-live": alert ? "assertive" : "polite", style: { margin: "16px 0 0", color: alert ? "#a61b1b" : "var(--pb-color-muted)" }, children });
+}
+function Section({ title, children, busy = false }) {
+  return /* @__PURE__ */ jsx4("section", { "aria-label": title, "aria-busy": busy || void 0, style: sectionStyle, children: /* @__PURE__ */ jsxs4("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px", fontSize: "clamp(24px, 3vw, 34px)", lineHeight: 1.15 }, children: title }),
+    children
+  ] }) });
+}
+function ProductImage3({ src, alt }) {
+  const [failed, setFailed] = useState4(false);
+  const safeSrc = safeImageUrl3(src);
+  if (!safeSrc || failed) return /* @__PURE__ */ jsx4("span", { "aria-label": `${alt} image unavailable`, role: "img", style: { display: "grid", placeItems: "center", width: 76, height: 76, flex: "0 0 auto", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "var(--pb-color-muted)", fontWeight: 700 }, children: alt.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsx4("img", { src: safeSrc, alt, onError: () => setFailed(true), style: { width: 76, height: 76, flex: "0 0 auto", borderRadius: "calc(var(--pb-radius) / 1.5)", objectFit: "cover", background: "var(--pb-color-background)" } });
+}
+function HeroAsset({ src }) {
+  const [failed, setFailed] = useState4(false);
+  const safeSrc = safeImageUrl3(src);
+  if (!safeSrc || failed) return null;
+  return /* @__PURE__ */ jsx4("img", { "data-sales-hero-image": true, src: safeSrc, alt: "", "aria-hidden": "true", onError: () => setFailed(true), style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.62 } });
+}
 function SalesTextField({ value, onChange }) {
   return /* @__PURE__ */ jsx4("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
 }
+var editorSurfaceStyle = { boxSizing: "border-box", border: "1px solid #dfddd7", borderRadius: 10, padding: 24, background: "#ffffff", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" };
+var editorCardStyle = { boxSizing: "border-box", padding: 18, border: "1px solid #dfddd7", borderRadius: 7, background: "#f7f5f0" };
+function editorText(block, name, fallback) {
+  return text5(block, name, fallback);
+}
+function SalesInlineText({ block, name, fallback, style }) {
+  const value = editorText(block, name, fallback);
+  if (!block.selected) return /* @__PURE__ */ jsx4("span", { "data-sales-editor-field": name, style, children: value });
+  return /* @__PURE__ */ jsx4("input", { "aria-label": `Canvas ${name}`, "data-sales-editor-field": name, value, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), onChange: (event) => block.onPropsChange({ [name]: event.currentTarget.value }), style: { boxSizing: "border-box", width: "100%", border: "1px dashed currentColor", borderRadius: 3, padding: "2px 5px", background: "transparent", color: "inherit", font: "inherit", fontWeight: "inherit", lineHeight: "inherit", textAlign: "inherit", ...style } });
+}
+function SalesEditorSurface({ block, children }) {
+  return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales editor preview", style: { ...editorSurfaceStyle, outline: block.selected ? "2px solid #2563eb" : void 0, outlineOffset: -2 }, children });
+}
+function SalesAnnouncementEditor(block) {
+  return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales announcement editor", style: { display: "grid", minHeight: 38, placeItems: "center", boxSizing: "border-box", padding: "10px 16px", borderBottom: "1px solid #dfddd7", background: "#f7f5f0", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif", fontSize: 13, fontWeight: 700, textAlign: "center" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "message", fallback: "Free delivery on orders over $50" }) });
+}
+function SalesQueryEditor(block) {
+  const imageUrl = safeImageUrl3(block.heroImageUrl);
+  const trackingNumber = editorText(block, "defaultTrackingNumber", "BT-2048-DEMO");
+  return /* @__PURE__ */ jsxs4("section", { "aria-label": "Sales Hero query editor", style: { position: "relative", display: "grid", minHeight: "clamp(460px, 52vw, 620px)", placeItems: "center", boxSizing: "border-box", overflow: "hidden", padding: "clamp(28px, 6vw, 72px) 16px", background: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx4("img", { src: imageUrl, alt: "", "aria-hidden": "true", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.62 } }) : null,
+    /* @__PURE__ */ jsx4("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
+    /* @__PURE__ */ jsxs4("div", { style: { position: "relative", zIndex: 1, boxSizing: "border-box", width: "min(560px, 100%)", padding: "clamp(28px, 5vw, 48px)", borderRadius: 10, background: "#ffffff", color: "#0a0a0a", boxShadow: "0 20px 56px rgb(0 0 0 / 28%)" }, children: [
+      /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 28px", fontSize: "clamp(32px, 5vw, 48px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.02, textAlign: "center" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Track your order" }) }),
+      /* @__PURE__ */ jsx4("input", { "aria-label": "Canvas default tracking number", readOnly: !block.selected, value: trackingNumber, onMouseDown: (event) => block.selected && event.stopPropagation(), onClick: (event) => block.selected && event.stopPropagation(), onChange: (event) => block.onPropsChange({ defaultTrackingNumber: event.currentTarget.value }), style: { boxSizing: "border-box", width: "100%", minHeight: 58, padding: "12px 16px", border: "1px solid #dfddd7", borderRadius: 8, background: "#ffffff", color: "#0a0a0a", font: "inherit", fontSize: 17 } }),
+      /* @__PURE__ */ jsx4("div", { style: { display: "grid", minHeight: 58, placeItems: "center", marginTop: 14, padding: "12px 18px", borderRadius: 8, background: "#0a0a0a", color: "#ffffff", fontSize: 16, fontWeight: 700 }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "submitLabel", fallback: "Track order" }) }),
+      /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 14, color: "#6b6b6b", fontSize: 11, textAlign: "right" }, children: "Powered by BestTrack" })
+    ] })
+  ] });
+}
+function SalesOrderItemsEditor(block) {
+  return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
+    /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Items in your order" }) }),
+    /* @__PURE__ */ jsxs4("article", { style: { ...editorCardStyle, display: "flex", alignItems: "center", gap: 14 }, children: [
+      /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { width: 68, height: 68, borderRadius: 7, background: "#dfddd7" } }),
+      /* @__PURE__ */ jsxs4("span", { children: [
+        /* @__PURE__ */ jsx4("strong", { children: "Order item" }),
+        /* @__PURE__ */ jsx4("br", {}),
+        /* @__PURE__ */ jsx4("small", { style: { color: "#6b6b6b" }, children: "Items appear after a successful tracking query." })
+      ] })
+    ] })
+  ] });
+}
+function SalesOtherTrackingEditor(block) {
+  return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
+    /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Other shipments" }) }),
+    /* @__PURE__ */ jsx4("p", { style: { margin: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "emptyMessage", fallback: "No other shipments are linked to this order." }) })
+  ] });
+}
+function SalesServiceCardsEditor(block) {
+  return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
+    /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Shop with confidence" }) }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", gap: 14 }, children: [
+      /* @__PURE__ */ jsxs4("article", { style: editorCardStyle, children: [
+        /* @__PURE__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "firstTitle", fallback: "Easy returns" }) }),
+        /* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "firstDescription", fallback: "Simple support when plans change." }) })
+      ] }),
+      /* @__PURE__ */ jsxs4("article", { style: editorCardStyle, children: [
+        /* @__PURE__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "secondTitle", fallback: "Secure delivery" }) }),
+        /* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "secondDescription", fallback: "Follow every milestone in one place." }) })
+      ] })
+    ] })
+  ] });
+}
+function SalesProductCategoriesEditor(block) {
+  return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
+    /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Shop by category" }) }),
+    /* @__PURE__ */ jsxs4("div", { style: { ...editorCardStyle, display: "flex", justifyContent: "space-between", fontWeight: 700 }, children: [
+      /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "collectionLabel", fallback: "Featured collection" }),
+      /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u2192" })
+    ] })
+  ] });
+}
+function SalesRecommendationsEditor(block) {
+  return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
+    /* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Complete your order" }) }),
+    /* @__PURE__ */ jsx4("div", { style: { ...editorCardStyle, color: "#6b6b6b" }, children: "Recommended products appear after a successful tracking query." })
+  ] });
+}
 function SalesAnnouncementBlock(props) {
-  return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales announcement", style: { ...cardStyle2, background: "var(--pb-color-primary)", color: "white", textAlign: "center" }, children: /* @__PURE__ */ jsx4("strong", { children: text5(props, "message", "Free delivery on orders over $50") }) });
+  return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales announcement", "data-sales-announcement": true, style: { display: "grid", minHeight: 38, placeItems: "center", boxSizing: "border-box", padding: "10px 16px", borderBottom: "1px solid var(--pb-color-border)", background: "var(--pb-color-background)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)", fontSize: 13, textAlign: "center" }, children: /* @__PURE__ */ jsx4("strong", { children: text5(props, "message", "Free delivery on orders over $50") }) });
 }
 function SalesQueryBlock(props) {
   const runtime = useSalesRuntime();
+  const inputId = useId();
+  const errorId = useId();
   const [trackingNumber, setTrackingNumber] = useState4(text5(props, "defaultTrackingNumber", "BT-2048-DEMO"));
+  const [inputError, setInputError] = useState4(null);
   const submit = (event) => {
     event.preventDefault();
-    void runtime.query(trackingNumber);
+    const normalizedTrackingNumber = trackingNumber.trim();
+    if (!trackingNumberPattern.test(normalizedTrackingNumber)) {
+      setInputError("Enter a tracking number using 4\u201364 letters, numbers, or hyphens.");
+      return;
+    }
+    setInputError(null);
+    void runtime.query(normalizedTrackingNumber);
   };
-  return /* @__PURE__ */ jsxs4("section", { "aria-label": "Sales tracking query", style: { ...cardStyle2, boxShadow: "0 12px 32px rgb(0 0 0 / 8%)" }, children: [
-    /* @__PURE__ */ jsx4("h1", { style: { marginTop: 0 }, children: text5(props, "heading", "Track an order") }),
-    /* @__PURE__ */ jsxs4("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsx4("input", { "aria-label": "Sales tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), minLength: 4, maxLength: 64, required: true, style: { flex: "1 1 220px", padding: 12, borderRadius: "var(--pb-radius)", border: "1px solid var(--pb-color-border)" } }),
-      /* @__PURE__ */ jsx4("button", { type: "submit", disabled: runtime.phase === "loading", style: { padding: "12px 18px", border: 0, borderRadius: "var(--pb-radius)", color: "white", background: "var(--pb-color-primary)" }, children: runtime.phase === "loading" ? "Checking\u2026" : text5(props, "submitLabel", "Track order") })
-    ] }),
-    runtime.phase === "error" ? /* @__PURE__ */ jsxs4("p", { role: "alert", children: [
-      "We could not retrieve this order: ",
-      runtime.error
-    ] }) : null
+  const description = inputError ?? (runtime.phase === "empty" ? "We couldn\u2019t find an order for that number." : runtime.phase === "error" ? "We couldn\u2019t retrieve this order right now. Please try again later." : void 0);
+  return /* @__PURE__ */ jsxs4("section", { "aria-label": "Sales tracking query", "aria-busy": runtime.phase === "loading" || void 0, "data-sales-hero": true, style: { position: "relative", display: "grid", minHeight: "clamp(460px, 52vw, 620px)", placeItems: "center", boxSizing: "border-box", overflow: "hidden", padding: "clamp(28px, 6vw, 72px) 16px", background: "var(--pb-color-text)", color: "var(--pb-color-surface)", fontFamily: "var(--pb-font-family)" }, children: [
+    /* @__PURE__ */ jsx4(HeroAsset, { src: props.heroImageUrl }),
+    /* @__PURE__ */ jsx4("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
+    /* @__PURE__ */ jsxs4("div", { "data-sales-query-card": true, style: { position: "relative", zIndex: 1, boxSizing: "border-box", width: "min(560px, 100%)", padding: "clamp(28px, 5vw, 48px)", borderRadius: "var(--pb-radius)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", boxShadow: "0 20px 56px rgb(0 0 0 / 28%)" }, children: [
+      /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 28px", color: "var(--pb-color-text)", fontSize: "clamp(32px, 5vw, 48px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.02, textAlign: "center" }, children: text5(props, "heading", "Track an order") }),
+      /* @__PURE__ */ jsxs4("form", { noValidate: true, onSubmit: submit, style: { display: "grid", gap: 14 }, children: [
+        /* @__PURE__ */ jsx4("label", { htmlFor: inputId, style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }, children: "Tracking number" }),
+        /* @__PURE__ */ jsx4("input", { id: inputId, "aria-describedby": description ? errorId : void 0, "aria-invalid": Boolean(inputError) || void 0, "aria-label": "Sales tracking number", value: trackingNumber, onChange: (event) => {
+          setTrackingNumber(event.target.value);
+          if (inputError) setInputError(null);
+        }, inputMode: "text", autoComplete: "off", pattern: "[A-Za-z0-9-]{4,64}", minLength: 4, maxLength: 64, required: true, placeholder: "Enter your tracking number", style: { boxSizing: "border-box", width: "100%", minHeight: 58, padding: "12px 16px", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", font: "inherit", fontSize: 17 } }),
+        /* @__PURE__ */ jsx4("button", { type: "submit", disabled: runtime.phase === "loading", style: { width: "100%", minHeight: 58, padding: "12px 18px", border: 0, borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-text)", color: "var(--pb-color-surface)", font: "inherit", fontSize: 16, fontWeight: 700, cursor: runtime.phase === "loading" ? "wait" : "pointer" }, children: runtime.phase === "loading" ? "Checking\u2026" : text5(props, "submitLabel", "Track order") })
+      ] }),
+      runtime.phase === "loading" ? /* @__PURE__ */ jsx4(Status, { children: "Checking your order\u2026" }) : null,
+      inputError ? /* @__PURE__ */ jsx4("p", { id: errorId, role: "alert", children: inputError }) : null,
+      !inputError && runtime.phase === "empty" ? /* @__PURE__ */ jsx4("p", { id: errorId, role: "status", children: "We couldn\u2019t find an order for that number." }) : null,
+      !inputError && runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { id: errorId, role: "alert", children: "We couldn\u2019t retrieve this order right now. Please try again later." }) : null,
+      /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 14, color: "var(--pb-color-muted)", fontSize: 11, textAlign: "right" }, children: "Powered by BestTrack" })
+    ] })
   ] });
 }
 function SalesOrderItemsBlock(props) {
   const runtime = useSalesRuntime();
   const title = text5(props, "heading", "Items in your order");
   const items = runtime.result?.orderItems ?? [];
-  return /* @__PURE__ */ jsx4(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Order items are temporarily unavailable." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx4("ul", { style: { marginBottom: 0, paddingLeft: 20 }, children: items.map((item) => /* @__PURE__ */ jsxs4("li", { children: [
-    /* @__PURE__ */ jsx4("strong", { children: item.title }),
-    " \xB7 Qty ",
-    item.quantity
-  ] }, item.id)) }) : /* @__PURE__ */ jsx4("p", { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
+  return /* @__PURE__ */ jsx4(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Order items are temporarily unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No order items are available for that number." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx4("ul", { style: { display: "grid", gap: 12, margin: 0, padding: 0, listStyle: "none" }, children: items.map((item) => {
+    const href = safeHref3(item.href);
+    const itemTitle = text5(item, "title", "Order item");
+    const itemContent = href ? /* @__PURE__ */ jsx4("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle;
+    return /* @__PURE__ */ jsxs4("li", { style: { display: "flex", alignItems: "center", gap: 16, minWidth: 0, padding: 14, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
+      /* @__PURE__ */ jsx4(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
+      /* @__PURE__ */ jsxs4("span", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx4("strong", { children: itemContent }),
+        /* @__PURE__ */ jsx4("br", {}),
+        /* @__PURE__ */ jsxs4("small", { style: { color: "var(--pb-color-muted)" }, children: [
+          "Qty ",
+          Number.isFinite(item.quantity) && item.quantity > 0 ? item.quantity : 1
+        ] }),
+        item.description ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx4("br", {}),
+          /* @__PURE__ */ jsx4("small", { style: { color: "var(--pb-color-muted)" }, children: item.description })
+        ] }) : null
+      ] })
+    ] }, item.id);
+  }) }) : /* @__PURE__ */ jsx4(Status, { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
 }
 function SalesOtherTrackingBlock(props) {
   const runtime = useSalesRuntime();
   const title = text5(props, "heading", "Other shipments");
-  return /* @__PURE__ */ jsx4(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Additional shipments are unavailable." }) : runtime.phase === "success" ? /* @__PURE__ */ jsx4("p", { children: text5(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx4("p", { children: "Other tracking numbers appear with your order result." }) });
+  const shipments = (runtime.result?.shipments ?? []).filter((shipment) => shipment.trackingNumber !== runtime.result?.trackingNumber);
+  return /* @__PURE__ */ jsx4(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Additional shipments are unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No additional shipments are available for that number." }) : runtime.phase === "success" && shipments.length ? /* @__PURE__ */ jsx4("ul", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))", gap: 12, margin: 0, padding: 0, listStyle: "none" }, children: shipments.map((shipment) => /* @__PURE__ */ jsxs4("li", { style: { padding: 16, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
+    /* @__PURE__ */ jsx4("strong", { children: text5(shipment, "label", "Shipment") }),
+    shipment.status ? /* @__PURE__ */ jsx4("p", { style: { margin: "8px 0 0", color: "var(--pb-color-muted)" }, children: shipment.status }) : null,
+    shipment.trackingNumber ? /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 8, color: "var(--pb-color-muted)" }, children: shipment.trackingNumber }) : null
+  ] }, shipment.id)) }) : runtime.phase === "success" ? /* @__PURE__ */ jsx4(Status, { children: text5(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx4(Status, { children: runtime.phase === "loading" ? "Loading other shipments\u2026" : "Other tracking numbers appear with your order result." }) });
 }
 function SalesServiceCardsBlock(props) {
   const title = text5(props, "heading", "Shop with confidence");
   return /* @__PURE__ */ jsx4(Section, { title, children: /* @__PURE__ */ jsxs4("div", { style: gridStyle, children: [
-    /* @__PURE__ */ jsxs4("article", { children: [
+    /* @__PURE__ */ jsxs4("article", { style: { padding: 20, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
       /* @__PURE__ */ jsx4("strong", { children: text5(props, "firstTitle", "Easy returns") }),
-      /* @__PURE__ */ jsx4("p", { children: text5(props, "firstDescription", "Simple support when plans change.") })
+      /* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "firstDescription", "Simple support when plans change.") })
     ] }),
-    /* @__PURE__ */ jsxs4("article", { children: [
+    /* @__PURE__ */ jsxs4("article", { style: { padding: 20, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
       /* @__PURE__ */ jsx4("strong", { children: text5(props, "secondTitle", "Secure delivery") }),
-      /* @__PURE__ */ jsx4("p", { children: text5(props, "secondDescription", "Follow every milestone in one place.") })
+      /* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "secondDescription", "Follow every milestone in one place.") })
     ] })
   ] }) });
 }
 function SalesProductCategoriesBlock(props) {
   const title = text5(props, "heading", "Shop by category");
-  const collectionId = text5(props, "collectionId", "");
-  const state = resourceState(collectionId);
-  return /* @__PURE__ */ jsx4(Section, { title, children: state === "invalid" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Collection reference is invalid." }) : state === "empty" ? /* @__PURE__ */ jsx4("p", { children: "No collection selected. Choose a collection through the authorized resource BFF." }) : /* @__PURE__ */ jsxs4("div", { style: gridStyle, children: [
-    /* @__PURE__ */ jsx4("a", { href: safeHref3(props.collectionHref), style: { color: "var(--pb-color-primary)" }, children: text5(props, "collectionLabel", "Featured collection") }),
-    /* @__PURE__ */ jsxs4("small", { children: [
-      "Collection reference: ",
-      collectionId
-    ] })
-  ] }) });
+  const state = resourceState(props.collectionId);
+  const href = safeHref3(props.collectionHref);
+  return /* @__PURE__ */ jsx4(Section, { title, children: state === "invalid" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Collection reference is invalid." }) : state === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No collection selected. Choose a collection through an authorized resource integration." }) : href ? /* @__PURE__ */ jsxs4("a", { href, style: { display: "flex", alignItems: "center", justifyContent: "space-between", minHeight: 74, boxSizing: "border-box", padding: "14px 18px", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "var(--pb-color-text)", fontWeight: 700, textDecoration: "none" }, children: [
+    /* @__PURE__ */ jsx4("span", { children: text5(props, "collectionLabel", "Featured collection") }),
+    /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u2192" })
+  ] }) : /* @__PURE__ */ jsx4(Status, { alert: true, children: "Collection link is unavailable." }) });
 }
 function SalesRecommendationsBlock(props) {
   const runtime = useSalesRuntime();
   const title = text5(props, "heading", "Complete your order");
   const recommendations = runtime.result?.recommendations ?? [];
-  return /* @__PURE__ */ jsx4(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Recommendations are temporarily unavailable." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx4("div", { style: gridStyle, children: recommendations.map((item) => /* @__PURE__ */ jsxs4("article", { style: { borderTop: "3px solid var(--pb-color-primary)", paddingTop: 8 }, children: [
-    /* @__PURE__ */ jsx4("strong", { children: item.title }),
-    /* @__PURE__ */ jsx4("p", { children: item.description })
-  ] }, item.id)) }) : /* @__PURE__ */ jsx4("p", { children: runtime.phase === "success" ? "No recommendations are available for this order." : "Recommended products appear with your order result." }) });
+  return /* @__PURE__ */ jsx4(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Recommendations are temporarily unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No recommendations are available for that number." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx4("div", { style: gridStyle, children: recommendations.map((item) => {
+    const href = safeHref3(item.href);
+    const itemTitle = text5(item, "title", "Recommended product");
+    return /* @__PURE__ */ jsxs4("article", { style: { display: "grid", gap: 14, minWidth: 0, padding: 18, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
+      /* @__PURE__ */ jsx4(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx4("strong", { children: href ? /* @__PURE__ */ jsx4("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle }),
+        item.price ? /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 5, color: "var(--pb-color-muted)" }, children: item.price }) : null,
+        item.description ? /* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: item.description }) : null
+      ] })
+    ] }, item.id);
+  }) }) : /* @__PURE__ */ jsx4(Status, { children: runtime.phase === "success" ? "No recommendations are available for this order." : runtime.phase === "loading" ? "Loading recommendations\u2026" : "Recommended products appear with your order result." }) });
 }
 
 // src/sales-definition.ts
-var text6 = (label, options = {}) => ({ field: "besttrack.sales.text", label, control: "text", ...options });
+var trackingNumberPattern2 = /^[A-Za-z0-9-]{4,64}$/;
+var text6 = (label, options = {}) => ({ field: "besttrack.sales.text", label, control: "text", required: true, ...options });
+var shortText = (label, description) => text6(label, { description, group: "Content" });
+var longText = (label, description) => text6(label, { control: "textarea", description, group: "Content" });
+var link = (label, description) => text6(label, { control: "url", description: description ?? "Use a site-relative path or HTTPS URL.", group: "Links" });
+function safeLink(value) {
+  if (typeof value !== "string") return false;
+  if (value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\") && !value.includes("\\") && !hasControlCharacter2(value)) return true;
+  try {
+    return new URL(value).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function hasControlCharacter2(value) {
+  return [...value].some((character) => character.charCodeAt(0) < 32);
+}
+function requiredString(props, key, issues, maxLength = 160) {
+  const value = props[key];
+  if (typeof value !== "string" || !value.trim()) issues.push({ path: `props.${key}`, message: "A non-empty value is required." });
+  else if (value.length > maxLength) issues.push({ path: `props.${key}`, message: `Must be at most ${maxLength} characters.` });
+}
+function textProps(keys) {
+  return (props) => {
+    const issues = [];
+    keys.forEach(([key, maxLength]) => requiredString(props, key, issues, maxLength));
+    return issues;
+  };
+}
+function validateQuery(props) {
+  const issues = textProps([["heading", 120], ["submitLabel", 80]])(props);
+  const trackingNumber = props.defaultTrackingNumber;
+  if (typeof trackingNumber !== "string" || !trackingNumberPattern2.test(trackingNumber)) issues.push({ path: "props.defaultTrackingNumber", message: "Use 4\u201364 letters, numbers, or hyphens. Use a non-sensitive preview placeholder only." });
+  if (props.heroImageUrl !== void 0 && !safeImage(props.heroImageUrl)) issues.push({ path: "props.heroImageUrl", message: "Use an HTTPS URL for the merchant-configured hero image." });
+  return issues;
+}
+function safeImage(value) {
+  if (typeof value !== "string") return false;
+  try {
+    return new URL(value).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function validateCategories(props) {
+  const issues = textProps([["heading", 120], ["collectionId", 256], ["collectionLabel", 120]])(props);
+  if (!safeLink(props.collectionHref)) issues.push({ path: "props.collectionHref", message: "Use a site-relative path or HTTPS URL." });
+  return issues;
+}
 var salesBlocks = [
-  { type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: text6("Announcement", { control: "textarea" }) }, render: { web: SalesAnnouncementBlock } },
-  { type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track an order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text6("Heading"), submitLabel: text6("Button label"), defaultTrackingNumber: text6("Default tracking number") }, render: { web: SalesQueryBlock } },
-  { type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text6("Heading") }, render: { web: SalesOrderItemsBlock } },
-  { type: "besttrack.sales.other-tracking", version: 1, label: "Other tracking", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Other shipments", emptyMessage: "No other shipments are linked to this order." }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text6("Heading"), emptyMessage: text6("Empty message", { control: "textarea" }) }, render: { web: SalesOtherTrackingBlock } },
-  { type: "besttrack.sales.service-cards", version: 1, label: "Service cards", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop with confidence", firstTitle: "Easy returns", firstDescription: "Simple support when plans change.", secondTitle: "Secure delivery", secondDescription: "Follow every milestone in one place." }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text6("Heading"), firstTitle: text6("First card title"), firstDescription: text6("First card description", { control: "textarea" }), secondTitle: text6("Second card title"), secondDescription: text6("Second card description", { control: "textarea" }) }, render: { web: SalesServiceCardsBlock } },
-  { type: "besttrack.sales.product-categories", version: 1, label: "Product categories", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop by category", collectionId: "gid://shopify/Collection/featured", collectionLabel: "Featured collection", collectionHref: "/collections/featured" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text6("Heading"), collectionId: text6("Collection ID"), collectionLabel: text6("Collection label"), collectionHref: text6("Collection URL", { control: "url" }) }, render: { web: SalesProductCategoriesBlock } },
-  { type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text6("Heading") }, render: { web: SalesRecommendationsBlock } }
+  { type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: longText("Announcement", "Short, customer-facing promotion copy.") }, validate: textProps([["message", 280]]), render: { web: SalesAnnouncementBlock, editor: SalesAnnouncementEditor } },
+  { type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO", heroImageUrl: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1800&q=85" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: shortText("Heading"), submitLabel: shortText("Button label"), defaultTrackingNumber: text6("Default tracking number", { group: "Tracking settings", description: "Preview-only placeholder; never save a customer's tracking number." }), heroImageUrl: text6("Hero image URL", { control: "url", group: "Hero asset", description: "Merchant-configured HTTPS image. It is rendered as an image element, never as CSS." }) }, validate: validateQuery, render: { web: SalesQueryBlock, editor: SalesQueryEditor } },
+  { type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }], fields: { heading: shortText("Heading") }, validate: textProps([["heading", 120]]), render: { web: SalesOrderItemsBlock, editor: SalesOrderItemsEditor } },
+  { type: "besttrack.sales.other-tracking", version: 1, label: "Other tracking", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Other shipments", emptyMessage: "No other shipments are linked to this order." }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }], fields: { heading: shortText("Heading"), emptyMessage: longText("Empty message") }, validate: textProps([["heading", 120], ["emptyMessage", 280]]), render: { web: SalesOtherTrackingBlock, editor: SalesOtherTrackingEditor } },
+  { type: "besttrack.sales.service-cards", version: 1, label: "Service cards", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop with confidence", firstTitle: "Easy returns", firstDescription: "Simple support when plans change.", secondTitle: "Secure delivery", secondDescription: "Follow every milestone in one place." }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }], fields: { heading: shortText("Heading"), firstTitle: shortText("First card title"), firstDescription: longText("First card description"), secondTitle: shortText("Second card title"), secondDescription: longText("Second card description") }, validate: textProps([["heading", 120], ["firstTitle", 120], ["firstDescription", 280], ["secondTitle", 120], ["secondDescription", 280]]), render: { web: SalesServiceCardsBlock, editor: SalesServiceCardsEditor } },
+  { type: "besttrack.sales.product-categories", version: 1, label: "Product categories", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop by category", collectionId: "gid://shopify/Collection/featured", collectionLabel: "Featured collection", collectionHref: "/collections/featured" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: shortText("Heading"), collectionId: text6("Collection ID", { group: "Resource", description: "JSON-only reference selected by an authorized integration." }), collectionLabel: shortText("Collection label"), collectionHref: link("Collection URL") }, validate: validateCategories, render: { web: SalesProductCategoriesBlock, editor: SalesProductCategoriesEditor } },
+  { type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: shortText("Heading") }, validate: textProps([["heading", 120]]), render: { web: SalesRecommendationsBlock, editor: SalesRecommendationsEditor } }
 ];
 function createSalesTemplate() {
-  return { id: "besttrack.sales", version: 1, name: "Sales", target: "web", source: "built-in", requiredBlocks: salesBlocks.map((block) => block.type), theme: { "color.primary": "#dc2626", "color.background": "#fffaf5", "color.surface": "#ffffff", "color.text": "#1c1917", "color.border": "#fed7aa", "font.family": "system-ui, sans-serif", radius: "10px", spacing: "20px" }, create: () => createPageDocument3({ pageId: "besttrack-sales", target: "web", templateId: "besttrack.sales", templateVersion: 1, settings: { locale: "en", seoTitle: "Shop and track your order" }, blocks: salesBlocks.map((block, index) => ({ id: "sales-" + (index + 1), type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
+  return { id: "besttrack.sales", version: 1, name: "Sales", target: "web", source: "built-in", requiredBlocks: salesBlocks.map((block) => block.type), theme: { "color.primary": "#000000", "color.background": "#f7f5f0", "color.surface": "#ffffff", "color.text": "#0a0a0a", "color.muted": "#6b6b6b", "color.border": "#dfddd7", "font.family": "Arial, Helvetica, sans-serif", radius: "10px", spacing: "24px" }, create: () => createPageDocument3({ pageId: "besttrack-sales", target: "web", templateId: "besttrack.sales", templateVersion: 1, settings: { locale: "en", seoTitle: "Shop and track your order" }, blocks: salesBlocks.map((block, index) => ({ id: "sales-" + (index + 1), type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
 }
 var bestTrackSalesExtension = Object.freeze({ name: "besttrack.sales", version: "0.7.2", fields: [{ type: "besttrack.sales.text", component: SalesTextField }], blocks: salesBlocks, templates: [createSalesTemplate()] });
 export {
@@ -1081,5 +1304,6 @@ export {
   bestTrackSalesExtension,
   createBrandedTemplate,
   createReadyToGoTemplate,
-  createSalesTemplate
+  createSalesTemplate,
+  isEmptyTrackingPageResult
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@standhigher/puck-page-builder": "0.8.1"
+    "@standhigher/puck-page-builder": "0.9.0"
   },
   "devDependencies": {
     "tsup": "^8.5.1",