@lockerverse/react 0.2.101 → 0.2.103

package/README.md

@@ -328,6 +328,14 @@ Malformed host selections and invalid custom tips render customer-safe validatio
 
 ## Auctions
 
+For a page containing one auction, use `LockerverseAuction` from
+`@lockerverse/react/auction` and `@lockerverse/react/auction.css`. Its header,
+filters, and lineup can be hidden independently; `renderItem` can keep the
+built-in card or supply a custom card. See the [auction composition reference](https://sdk.lockerverse.com/react/auctions)
+and [complete example](https://sdk.lockerverse.com/examples/auctions).
+The [State Lab](https://sdk.lockerverse.com/examples/state-lab) provides visibly
+labelled local simulations of bid uncertainty and purchase recovery.
+
 Browse auctions and open the built-in item checkout. The catalog entry does not
 load Stripe. The checkout entry uses the optional Stripe peers listed above.
 Import `auctions.css` for both components. Built-in auction checkout accepts
@@ -347,27 +355,33 @@ export function AuctionPage() {
     auction: LockerverseAuction;
     itemId: string;
   } | null>(null);
-
-  return selected ? (
-    <LockerverseAuctionItem
+  const [locked, setLocked] = useState(false);
+  const [message, setMessage] = useState("");
+
+  return <>
+    <div hidden={Boolean(selected)}>
+      <LockerverseAuctions
+        auctions={auctions}
+        onSelectItem={(auction, item) => {
+          if (!locked) setSelected({ auction, itemId: item.id });
+        }}
+        theme="light"
+      />
+    </div>
+    {selected && <LockerverseAuctionItem
+      key={`${selected.auction.id}:${selected.itemId}`}
       auction={selected.auction}
       client={auctions.client}
       itemId={selected.itemId}
-      onBidSubmitted={() => auctions.refresh()}
-      onPurchaseComplete={() => auctions.refresh()}
-      onUncertain={(kind) => {
-        // Show an unresolved-result message. Do not retry a bid.
-        console.info(`${kind} result is unknown`);
-      }}
-      theme="light"
-    />
-  ) : (
-    <LockerverseAuctions
-      auctions={auctions}
-      onSelectItem={(auction, item) => setSelected({ auction, itemId: item.id })}
+      onBack={locked ? undefined : () => setSelected(null)}
+      onInteractionLockChange={setLocked}
+      onBidSubmitted={() => { setMessage("Bid submitted; this is not a winning bid."); auctions.refresh(); }}
+      onPurchaseComplete={() => { setMessage("Payment complete."); auctions.refresh(); }}
+      onUncertain={(kind) => setMessage(`The ${kind} result is unknown. Keep this page open; do not submit another bid.`)}
       theme="light"
-    />
-  );
+    />}
+    <p role="status">{message}</p>
+  </>;
 }
 ```
 
@@ -389,7 +403,12 @@ the backend can reconcile Stripe status and send the purchase notification.
 A `null` status lookup is not proof that an original in-flight request ended.
 Any retry must keep the original `clientRequestId` and purchase details.
 If a bid result is unknown, block a new bid and keep the support message visible.
-Do not navigate away or unmount checkout while submission is in progress.
+Connect `onInteractionLockChange` to all host navigation, resource selectors, and
+reset controls. A true lock covers submission and unresolved outcomes. Keep host
+callback state above checkout. If checkout is unexpectedly removed after send,
+known completion or uncertainty is still reported once for that operation;
+no new Stripe action starts after unmount. Full page reload or browser shutdown
+cannot guarantee callback delivery.
 Never automatically retry a bid: the backend has no public bid recovery API.
 
 For a host that needs recovery after navigation, connect
@@ -414,3 +433,21 @@ recovery in memory only and asks the customer to keep the page open.
 
 The raw receipt endpoint returns amounts, not payment status. Do not use a
 receipt response alone to show a payment as complete.
+
+### Direct auction pages
+
+Import `useLockerverseAuction` from `@lockerverse/react/auction-data` and call
+`useLockerverseAuction({ communitySlug }, auctionSlug)` to load one auction.
+This uses the detail endpoint; it never fetches the full community list.
+Render `LockerverseAuction` from `@lockerverse/react/auction` with the result,
+and import `@lockerverse/react/auction.css`. Use `auction-item` and its stylesheet
+when opening built-in item details and checkout.
+
+The singular hook returns `client`, `auction`, `loading`, `error`, and `refresh`.
+Refresh retains the last good data. Keep checkout mounted across refresh and
+errors. The item component applies new same-ID data while idle and preserves
+its payment snapshot while payment is open. Connect `onInteractionLockChange`
+to host navigation. Resource identity changes require a new React key.
+
+[Complete direct-auction example](https://sdk.lockerverse.com/examples/auctions?community=lckrvrs-internal&auction=auction).
+Built-in styled UI is the default for Lovable. There is no automatic headless switch.

package/dist/auction-base.css

@@ -0,0 +1,128 @@
+/* Reference: lockerverse-web-app-next auction pages at 8ead019. */
+.lockerverse-auctions {
+  --lockerverse-auction-stat-bg: rgb(0 0 0 / 18%);
+  --lockerverse-auction-amount-bg: rgb(0 0 0 / 25%);
+  --lockerverse-auction-card-shadow: 0 28px 80px rgb(0 0 0 / 42%);
+  --lockerverse-auction-selection-shadow: 0 30px 90px rgb(0 0 0 / 20%);
+  --lockerverse-auction-checkout-shadow: 0 30px 90px rgb(0 0 0 / 45%);
+  --lockerverse-auction-action-shadow: 0 18px 40px rgb(0 0 0 / 32%);
+  --lockerverse-accent: #6f8f6d;
+  --lockerverse-bg: #050505;
+  --lockerverse-border: rgb(255 255 255 / 10%);
+  --lockerverse-control: #111216;
+  --lockerverse-muted: #bbb7c2;
+  --lockerverse-radius: 24px;
+  --lockerverse-text: #fff;
+  --lockerverse-font-family: ui-sans-serif, system-ui, sans-serif;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1520px;
+  padding: 40px 32px;
+  margin-inline: auto;
+  container-type: inline-size;
+  font: 14px / 1.5 var(--lockerverse-font-family);
+  color: var(--lockerverse-text);
+  background: var(--lockerverse-bg);
+  border-radius: 0;
+}
+
+.lockerverse-auctions[data-lockerverse-theme="light"] {
+  --lockerverse-auction-stat-bg: var(--lockerverse-bg);
+  --lockerverse-auction-amount-bg: var(--lockerverse-bg);
+  --lockerverse-auction-card-shadow: 0 8px 24px rgb(0 0 0 / 6%);
+  --lockerverse-auction-selection-shadow: 0 8px 24px rgb(0 0 0 / 6%);
+  --lockerverse-auction-checkout-shadow: 0 8px 24px rgb(0 0 0 / 6%);
+  --lockerverse-auction-action-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+  --lockerverse-bg: #fff;
+  --lockerverse-border: rgb(18 20 22 / 14%);
+  --lockerverse-control: #f5f6f7;
+  --lockerverse-muted: rgb(18 20 22 / 64%);
+  --lockerverse-text: #121416;
+}
+
+.lockerverse-auctions * {
+  box-sizing: border-box;
+}
+.lockerverse-auctions h2 {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.25;
+  text-wrap: balance;
+}
+.lockerverse-auctions h3 {
+  margin: 0;
+  font-size: 19px;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+.lockerverse-auctions p {
+  margin: 8px 0;
+  color: var(--lockerverse-muted);
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+}
+.lockerverse-auctions button {
+  font-family: inherit;
+  touch-action: manipulation;
+  cursor: pointer;
+}
+.lockerverse-auctions button:hover {
+  border-color: var(--lockerverse-text);
+}
+.lockerverse-auctions button:focus-visible,
+.lockerverse-auctions h2:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 3px;
+}
+.lockerverse-auctions__description {
+  line-height: 2;
+  overflow-wrap: anywhere;
+}
+.lockerverse-auctions__description p {
+  color: inherit;
+}
+.lockerverse-auctions__description ul {
+  padding-left: 20px;
+  list-style: disc;
+}
+.lockerverse-auctions__description ol {
+  padding-left: 20px;
+  list-style: decimal;
+}
+.lockerverse-auctions__description li {
+  margin-block: 4px;
+}
+.lockerverse-auctions__description a {
+  color: inherit;
+  text-decoration: underline;
+}
+.lockerverse-auctions__description blockquote {
+  padding-left: 16px;
+  margin-inline: 0;
+  border-left: 2px solid currentColor;
+}
+.lockerverse-auctions__description pre {
+  overflow-x: auto;
+}
+.lockerverse-auctions__description-clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 4;
+}
+.lockerverse-auctions .lockerverse-auctions__description-toggle {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 32px;
+  padding: 6px 12px;
+  margin-top: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--lockerverse-text);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+}

package/dist/auction-catalog.css

@@ -104,7 +104,7 @@
   background: var(--lockerverse-control, #0a0a0c);
   border: 1px solid var(--lockerverse-border);
   border-radius: 30px;
-  box-shadow: 0 28px 80px rgb(0 0 0 / 42%);
+  box-shadow: var(--lockerverse-auction-card-shadow);
   transition:
     transform 0.3s,
     border-color 0.3s;
@@ -346,3 +346,10 @@
     transform: none;
   }
 }
+
+.lockerverse-auctions.lockerverse-auctions--card {
+  width: 100%;
+  max-width: none;
+  padding: 0;
+  background: transparent;
+}

package/dist/auction-checkout.css

@@ -6,7 +6,7 @@
   background: var(--lockerverse-control, #111216);
   border: 1px solid var(--lockerverse-border);
   border-radius: 32px;
-  box-shadow: 0 30px 90px rgb(0 0 0 / 45%);
+  box-shadow: var(--lockerverse-auction-checkout-shadow);
 }
 .lockerverse-auctions__checkout-header,
 .lockerverse-auctions__checkout-body {
@@ -197,7 +197,7 @@
   text-transform: uppercase;
   letter-spacing: 0.14em;
   border-radius: 999px;
-  box-shadow: 0 18px 40px rgb(0 0 0 / 32%);
+  box-shadow: var(--lockerverse-auction-action-shadow);
 }
 @media (max-width: 639px) {
   .lockerverse-auctions__checkout-header,

package/dist/auction-data.d.ts

@@ -0,0 +1,16 @@
+import { n as useLockerverseAuctions, t as UseLockerverseAuctionsResult } from "./use-lockerverse-auctions.js";
+import { CreateLockerverseAuctionOptions, LockerverseAuction, LockerverseAuctionClient, LockerverseSdkError } from "@lockerverse/sdk/auctions";
+//#region src/use-lockerverse-auction.d.ts
+type UseLockerverseAuctionResult = {
+  client: LockerverseAuctionClient;
+  /** Last successful snapshot, retained during refresh and refresh errors. */
+  auction: LockerverseAuction | null;
+  loading: boolean;
+  error: LockerverseSdkError | null;
+  refresh: () => void;
+};
+/** Load one auction by slug without requesting the community auction list. */
+declare function useLockerverseAuction(options: CreateLockerverseAuctionOptions, auctionSlug: string): UseLockerverseAuctionResult;
+//#endregion
+export { type UseLockerverseAuctionResult, type UseLockerverseAuctionsResult, useLockerverseAuction, useLockerverseAuctions };
+//# sourceMappingURL=auction-data.d.ts.map

package/dist/auction-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auction-data.d.ts","names":[],"sources":["../src/use-lockerverse-auction.ts"],"mappings":";;;KAUY;EACV,QAAQ;;EAER,SAAS;EACT;EACA,OAAO;EACP;;;iBAIc,sBACd,SAAS,iCACT,sBACC"}

package/dist/auction-data.js

@@ -0,0 +1,2 @@
+import{t as e}from"./immutable-resource-identity.js";import{t}from"./use-lockerverse-auctions.js";import{useCallback as n,useEffect as r,useRef as i,useState as a}from"react";import{createLockerverseAuctionClient as o}from"@lockerverse/sdk/auctions";function s(t,s){e(`auction`,{apiBaseUrl:t.apiBaseUrl,communitySlug:t.communitySlug,environment:t.environment,slug:s});let c=i(t.onError);c.current=t.onError;let[l]=a(()=>o({...t,onError:e=>c.current?.(e)})),u=i(0),[d,f]=a(0),[p,m]=a({auction:null,error:null,loading:!0});r(()=>{let e=!0,t=u.current;return l.load(s).then(n=>{e&&t===u.current&&m({auction:n,error:null,loading:!1})},n=>{e&&t===u.current&&m(e=>({...e,error:n,loading:!1}))}),()=>{e=!1}},[l,s,d]);let h=n(()=>{u.current+=1,m(e=>({...e,error:null,loading:!0})),f(e=>e+1)},[]);return{...p,client:l,refresh:h}}export{s as useLockerverseAuction,t as useLockerverseAuctions};
+//# sourceMappingURL=auction-data.js.map

package/dist/auction-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auction-data.js","names":[],"sources":["../src/use-lockerverse-auction.ts"],"sourcesContent":["import {\n  type CreateLockerverseAuctionOptions,\n  createLockerverseAuctionClient,\n  type LockerverseAuction,\n  type LockerverseAuctionClient,\n  type LockerverseSdkError,\n} from \"@lockerverse/sdk/auctions\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useImmutableResourceIdentity } from \"./immutable-resource-identity.ts\";\n\nexport type UseLockerverseAuctionResult = {\n  client: LockerverseAuctionClient;\n  /** Last successful snapshot, retained during refresh and refresh errors. */\n  auction: LockerverseAuction | null;\n  loading: boolean;\n  error: LockerverseSdkError | null;\n  refresh: () => void;\n};\n\n/** Load one auction by slug without requesting the community auction list. */\nexport function useLockerverseAuction(\n  options: CreateLockerverseAuctionOptions,\n  auctionSlug: string\n): UseLockerverseAuctionResult {\n  useImmutableResourceIdentity(\"auction\", {\n    apiBaseUrl: options.apiBaseUrl,\n    communitySlug: options.communitySlug,\n    environment: options.environment,\n    slug: auctionSlug,\n  });\n  const onErrorRef = useRef(options.onError);\n  onErrorRef.current = options.onError;\n  const [client] = useState(() =>\n    createLockerverseAuctionClient({\n      ...options,\n      onError: (error) => onErrorRef.current?.(error),\n    })\n  );\n  const generation = useRef(0);\n  const [revision, setRevision] = useState(0);\n  const [state, setState] = useState<\n    Pick<UseLockerverseAuctionResult, \"auction\" | \"loading\" | \"error\">\n  >({ auction: null, error: null, loading: true });\n\n  useEffect(() => {\n    let active = true;\n    const requestGeneration = generation.current;\n    client.load(auctionSlug).then(\n      (auction) => {\n        if (active && requestGeneration === generation.current) {\n          setState({ auction, error: null, loading: false });\n        }\n      },\n      (error: LockerverseSdkError) => {\n        if (active && requestGeneration === generation.current) {\n          setState((current) => ({ ...current, error, loading: false }));\n        }\n      }\n    );\n    return () => {\n      active = false;\n    };\n  }, [client, auctionSlug, revision]);\n\n  const refresh = useCallback(() => {\n    generation.current += 1;\n    setState((current) => ({ ...current, error: null, loading: true }));\n    setRevision((current) => current + 1);\n  }, []);\n\n  return { ...state, client, refresh };\n}\n"],"mappings":"0PAoBA,SAAgB,EACd,EACA,EAC6B,CAC7B,EAA6B,UAAW,CACtC,WAAY,EAAQ,WACpB,cAAe,EAAQ,cACvB,YAAa,EAAQ,YACrB,KAAM,CACR,CAAC,EACD,IAAM,EAAa,EAAO,EAAQ,OAAO,EACzC,EAAW,QAAU,EAAQ,QAC7B,GAAM,CAAC,GAAU,MACf,EAA+B,CAC7B,GAAG,EACH,QAAU,GAAU,EAAW,UAAU,CAAK,CAChD,CAAC,CACH,EACM,EAAa,EAAO,CAAC,EACrB,CAAC,EAAU,GAAe,EAAS,CAAC,EACpC,CAAC,EAAO,GAAY,EAExB,CAAE,QAAS,KAAM,MAAO,KAAM,QAAS,EAAK,CAAC,EAE/C,MAAgB,CACd,IAAI,EAAS,GACP,EAAoB,EAAW,QAarC,OAZA,EAAO,KAAK,CAAW,CAAC,CAAC,KACtB,GAAY,CACP,GAAU,IAAsB,EAAW,SAC7C,EAAS,CAAE,UAAS,MAAO,KAAM,QAAS,EAAM,CAAC,CAErD,EACC,GAA+B,CAC1B,GAAU,IAAsB,EAAW,SAC7C,EAAU,IAAa,CAAE,GAAG,EAAS,QAAO,QAAS,EAAM,EAAE,CAEjE,CACF,MACa,CACX,EAAS,EACX,CACF,EAAG,CAAC,EAAQ,EAAa,CAAQ,CAAC,EAElC,IAAM,EAAU,MAAkB,CAChC,EAAW,SAAW,EACtB,EAAU,IAAa,CAAE,GAAG,EAAS,MAAO,KAAM,QAAS,EAAK,EAAE,EAClE,EAAa,GAAY,EAAU,CAAC,CACtC,EAAG,CAAC,CAAC,EAEL,MAAO,CAAE,GAAG,EAAO,SAAQ,SAAQ,CACrC"}

package/dist/auction-item-layout.css

@@ -0,0 +1,302 @@
+.lockerverse-auctions__field {
+  display: grid;
+  gap: 8px;
+}
+.lockerverse-auctions__field input {
+  width: 100%;
+  min-width: 0;
+  min-height: 48px;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 16px;
+  color: var(--lockerverse-text);
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+.lockerverse-auctions__notice {
+  padding: 12px;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+.lockerverse-auctions input:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 3px;
+}
+.lockerverse-auctions__detail {
+  display: grid;
+  grid-template-columns: minmax(360px, 0.9fr) minmax(540px, 1.1fr);
+  gap: 32px;
+  align-items: start;
+}
+.lockerverse-auctions__item-summary {
+  min-width: 0;
+  overflow: hidden;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 12px;
+}
+.lockerverse-auctions__item-copy {
+  padding: 20px 24px;
+  border-top: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__item-copy h2 {
+  margin-top: 16px;
+  font-size: 36px;
+  font-weight: 600;
+  line-height: 1.12;
+}
+.lockerverse-auctions .lockerverse-auctions__eyebrow {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.7;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+}
+.lockerverse-auctions__item-description {
+  margin-top: 16px;
+}
+.lockerverse-auctions__stat-panel {
+  margin: 20px 0 0;
+  overflow: hidden;
+  background: var(--lockerverse-auction-stat-bg);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 24px;
+}
+.lockerverse-auctions__stat-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__stat-row:last-child {
+  border-bottom: 0;
+}
+.lockerverse-auctions__stat-panel dt {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--lockerverse-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.lockerverse-auctions__stat-panel dd {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.lockerverse-auctions__stat-panel .lockerverse-auctions__stat-date {
+  font-size: 15px;
+}
+.lockerverse-auctions__stat-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.lockerverse-auctions__stat-footer > div {
+  padding: 12px 24px;
+}
+.lockerverse-auctions__stat-footer > div + div {
+  border-left: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__stat-footer dd {
+  margin-top: 4px;
+  font-size: 14px;
+  text-align: left;
+}
+.lockerverse-auctions__transaction {
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+}
+.lockerverse-auctions__progress {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 24px;
+  background: rgb(128 128 128 / 4%);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 28px;
+}
+.lockerverse-auctions__progress span {
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+}
+.lockerverse-auctions__selection {
+  overflow: hidden;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 32px;
+  box-shadow: var(--lockerverse-auction-selection-shadow);
+}
+.lockerverse-auctions__selection-header,
+.lockerverse-auctions__selection-body {
+  padding: 28px;
+}
+.lockerverse-auctions__selection-header {
+  border-bottom: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__selection h3 {
+  margin-top: 12px;
+  font-size: 30px;
+  font-weight: 600;
+  letter-spacing: -0.04em;
+}
+.lockerverse-auctions__selection p {
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 2;
+}
+.lockerverse-auctions__selection strong {
+  color: var(--lockerverse-text);
+}
+.lockerverse-auctions__amount-control {
+  position: relative;
+  display: block;
+}
+.lockerverse-auctions__amount-control > span {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  font-size: 24px;
+  color: var(--lockerverse-muted);
+  transform: translateY(-50%);
+}
+.lockerverse-auctions__amount-control input {
+  height: 78px;
+  padding-left: 24px;
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.05em;
+  background: var(--lockerverse-auction-amount-bg);
+  border-radius: 24px;
+}
+.lockerverse-auctions__amount-control > span + input {
+  padding-left: 48px;
+}
+.lockerverse-auctions__selection-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 20px;
+  margin-top: 24px;
+  border-top: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__selection-footer > p {
+  flex: 1 1 220px;
+  margin: 0;
+}
+.lockerverse-auctions .lockerverse-auctions__button {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  background: var(--lockerverse-accent);
+  border: 0;
+  border-radius: 999px;
+}
+.lockerverse-auctions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.lockerverse-auctions .lockerverse-auctions__back {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 12px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--lockerverse-text);
+  background: rgb(128 128 128 / 6%);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+}
+.lockerverse-auctions .lockerverse-auctions__footer-back {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-self: end;
+  min-height: 44px;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--lockerverse-muted);
+  background: transparent;
+  border: 0;
+}
+.lockerverse-auctions__read-only {
+  padding: 24px;
+}
+.lockerverse-auctions__read-only > p {
+  line-height: 2;
+}
+.lockerverse-auctions__read-only .lockerverse-auctions__button {
+  margin-top: 20px;
+}
+@media (max-width: 1279px) {
+  .lockerverse-auctions__detail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 720px) {
+  .lockerverse-auctions__detail {
+    gap: 24px;
+  }
+}
+@media (max-width: 639px) {
+  .lockerverse-auctions {
+    padding: 32px 16px;
+  }
+  .lockerverse-auctions__item-copy {
+    padding: 20px;
+  }
+  .lockerverse-auctions__item-copy h2 {
+    font-size: 30px;
+  }
+  .lockerverse-auctions__selection-header,
+  .lockerverse-auctions__selection-body {
+    padding: 24px;
+  }
+  .lockerverse-auctions__selection-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .lockerverse-auctions__selection-footer > p {
+    flex-basis: auto;
+  }
+}
+
+@container (max-width: 1150px) {
+  .lockerverse-auctions__detail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.lockerverse-auctions__stat-row dt,
+.lockerverse-auctions__progress span {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.lockerverse-auctions__progress svg,
+.lockerverse-auctions__stat-row dt svg {
+  flex-shrink: 0;
+  opacity: 0.65;
+}

package/dist/auction-item.css

@@ -0,0 +1,4 @@
+@import "./auction-gallery.css";
+@import "./auction-checkout.css";
+@import "./auction-base.css";
+@import "./auction-item-layout.css";

package/dist/auction-item.d.ts

@@ -17,6 +17,9 @@ type LockerverseAuctionItemProps = {
   itemId: string;
   /** Host navigation; the SDK does not depend on a router. */
   onBack?: (() => void) | undefined;
+  /** Disable host navigation/reset while submitting or resolving an uncertain operation.
+   * This callback can run after unmount when a sent request resolves. */
+  onInteractionLockChange?: (locked: boolean) => void;
   communityName?: string | undefined;
   className?: string;
   theme?: LockerverseTheme;

package/dist/auction-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auction-item.d.ts","names":[],"sources":["../src/auction-item-types.ts","../src/lockerverse-auction-item.tsx"],"mappings":";;;;;KAaY;EACV;EACA;EACA,MAAM;EACN,SAAS,YAAY;EACrB,SAAS;EACT,YAAY;;KAGF;EACV,SAAS;EACT,QAAQ;EACR;;EAEA;EACA;EACA;EACA,QAAQ;EACR,QAAQ;EACR,eAAe;;EAEf,kBAAkB,QAAQ;;EAE1B,sBAAsB,QAAQ;EAC9B,4BACE,UAAU;EAEZ,eAAe;;EAEf,iBAAiB;;;;iBCgRH,uBAAuB,OAAO,8CAA2B,IAAA"}
+{"version":3,"file":"auction-item.d.ts","names":[],"sources":["../src/auction-item-types.ts","../src/lockerverse-auction-item.tsx"],"mappings":";;;;;KAaY;EACV;EACA;EACA,MAAM;EACN,SAAS,YAAY;EACrB,SAAS;EACT,YAAY;;KAGF;EACV,SAAS;EACT,QAAQ;EACR;;EAEA;;;EAGA,2BAA2B;EAC3B;EACA;EACA,QAAQ;EACR,QAAQ;EACR,eAAe;;EAEf,kBAAkB,QAAQ;;EAE1B,sBAAsB,QAAQ;EAC9B,4BACE,UAAU;EAEZ,eAAe;;EAEf,iBAAiB;;;;iBC4TH,uBAAuB,OAAO,8CAA2B,IAAA"}