@lockerverse/react 0.2.100 → 0.2.102

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,116 @@
+/* Reference: lockerverse-web-app-next auction pages at 8ead019. */
+.lockerverse-auctions {
+  --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-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

@@ -0,0 +1,355 @@
+.lockerverse-auctions--catalog {
+  max-width: 1600px;
+  padding: 48px 24px;
+  margin-inline: auto;
+  container-type: inline-size;
+  background: var(--lockerverse-bg, #050505);
+  border-radius: 0;
+}
+.lockerverse-auctions__catalog-header {
+  margin-bottom: 32px;
+}
+.lockerverse-auctions__catalog-header h2 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.04em;
+}
+.lockerverse-auctions__catalog-header > div {
+  max-width: 672px;
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--lockerverse-muted, #b5b1bc);
+}
+.lockerverse-auctions button.lockerverse-auctions__catalog-back {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 38px;
+  padding: 8px 12px;
+  margin-bottom: 28px;
+  font-size: 14px;
+  font-weight: 500;
+  background: rgb(255 255 255 / 4%);
+  border-radius: 999px;
+}
+.lockerverse-auctions__catalog-lineup {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.lockerverse-auctions__catalog-lineup h3 {
+  font-size: 24px;
+  font-weight: 600;
+}
+.lockerverse-auctions__catalog-lineup p {
+  margin: 4px 0 0;
+  font-size: 14px;
+  line-height: 24px;
+}
+.lockerverse-auctions__catalog-lineup > span {
+  font-size: 14px;
+  color: var(--lockerverse-muted);
+  white-space: nowrap;
+}
+.lockerverse-auctions__catalog-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  border: 0;
+}
+.lockerverse-auctions__catalog-filters button {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  background: rgb(255 255 255 / 4%);
+  border-radius: 999px;
+}
+.lockerverse-auctions__catalog-filters button[aria-pressed="true"] {
+  color: var(--lockerverse-bg);
+  background: var(--lockerverse-text);
+}
+.lockerverse-auctions__catalog-filters button span {
+  padding: 2px 8px;
+  font-size: 12px;
+  background: rgb(127 127 127 / 16%);
+  border-radius: 999px;
+}
+.lockerverse-auctions__catalog-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 24px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.lockerverse-auctions__catalog-grid > li {
+  min-width: 0;
+}
+.lockerverse-auctions__catalog-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--lockerverse-control, #0a0a0c);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 30px;
+  box-shadow: 0 28px 80px rgb(0 0 0 / 42%);
+  transition:
+    transform 0.3s,
+    border-color 0.3s;
+}
+.lockerverse-auctions__catalog-card:hover {
+  border-color: rgb(255 255 255 / 20%);
+  transform: translateY(-4px);
+}
+.lockerverse-auctions button.lockerverse-auctions__catalog-select {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 30px;
+}
+.lockerverse-auctions
+  button.lockerverse-auctions__catalog-select:focus-visible {
+  outline-offset: -3px;
+}
+.lockerverse-auctions__catalog-media {
+  position: relative;
+  aspect-ratio: 1.28;
+  overflow: hidden;
+  color: #fff;
+  background: #131316;
+}
+.lockerverse-auctions__catalog-media::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(to top, #000, rgb(0 0 0 / 35%), transparent),
+    linear-gradient(to bottom, rgb(0 0 0 / 60%), transparent 50%);
+}
+.lockerverse-auctions__catalog-images {
+  position: absolute;
+  inset: 0;
+}
+.lockerverse-auctions__catalog-photo {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition:
+    opacity 0.5s,
+    transform 0.5s;
+}
+.lockerverse-auctions__catalog-photo[data-visible="true"] {
+  opacity: 1;
+}
+.lockerverse-auctions__catalog-card:hover .lockerverse-auctions__catalog-photo {
+  transform: scale(1.03);
+}
+.lockerverse-auctions__catalog-chips {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  left: 16px;
+  z-index: 1;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.lockerverse-auctions__catalog-chip,
+.lockerverse-auctions__catalog-timing {
+  padding: 6px 12px;
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.24em;
+  background: rgb(0 0 0 / 55%);
+  border: 1px solid rgb(255 255 255 / 15%);
+  border-radius: 999px;
+  backdrop-filter: blur(8px);
+}
+.lockerverse-auctions__catalog-timing {
+  color: rgb(255 255 255 / 72%);
+  text-align: right;
+  background: rgb(255 255 255 / 8%);
+}
+.lockerverse-auctions__catalog-chip[data-live="true"] {
+  color: #d1fae5;
+  background: rgb(52 211 153 / 12%);
+  border-color: rgb(110 231 183 / 20%);
+}
+.lockerverse-auctions__catalog-metrics {
+  position: absolute;
+  inset: auto 16px 16px;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+.lockerverse-auctions__catalog-metric {
+  min-width: 0;
+  padding: 12px 16px;
+  background: rgb(0 0 0 / 55%);
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 20px;
+  backdrop-filter: blur(8px);
+}
+.lockerverse-auctions__catalog-metric dt {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 11px;
+  color: rgb(255 255 255 / 55%);
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+}
+.lockerverse-auctions__catalog-metric dt svg {
+  flex-shrink: 0;
+}
+.lockerverse-auctions__catalog-metric dd {
+  margin: 8px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
+.lockerverse-auctions__catalog-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px 20px 20px;
+}
+.lockerverse-auctions__catalog-body h3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.03em;
+}
+.lockerverse-auctions__catalog-description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--lockerverse-muted, #b5b1bc);
+}
+.lockerverse-auctions__catalog-description p {
+  margin: 0;
+}
+.lockerverse-auctions__catalog-footer {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 6px;
+  margin-top: auto;
+}
+.lockerverse-auctions__catalog-footer--item {
+  justify-content: flex-end;
+}
+.lockerverse-auctions__catalog-cta {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  background: rgb(255 255 255 / 6%);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+.lockerverse-auctions__catalog-card:hover .lockerverse-auctions__catalog-cta {
+  color: var(--lockerverse-bg);
+  background: var(--lockerverse-text);
+}
+.lockerverse-auctions__catalog-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+}
+.lockerverse-auctions__catalog-empty {
+  padding: 32px;
+  text-align: center;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 8px;
+}
+@container (min-width: 720px) {
+  .lockerverse-auctions__catalog-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@container (min-width: 1232px) {
+  .lockerverse-auctions__catalog-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@container (max-width: 500px) {
+  .lockerverse-auctions__catalog-header h2 {
+    font-size: 30px;
+  }
+  .lockerverse-auctions__catalog-lineup {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+@media (max-width: 639px) {
+  .lockerverse-auctions--catalog {
+    padding: 48px 16px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lockerverse-auctions__catalog-card,
+  .lockerverse-auctions__catalog-photo,
+  .lockerverse-auctions__catalog-cta {
+    transition: none;
+  }
+  .lockerverse-auctions__catalog-card:hover {
+    transform: none;
+  }
+}
+
+.lockerverse-auctions.lockerverse-auctions--card {
+  width: 100%;
+  max-width: none;
+  padding: 0;
+  background: transparent;
+}