create-skybridge 0.0.0-dev.7914624 → 0.0.0-dev.793efe5

package/templates/ecom/src/views/carousel/detail/detail.css.ts

@@ -7,11 +7,21 @@ const TWO_COLUMN_MIN_WIDTH = "560px";
 
 export const detail = style({
   containerType: "inline-size",
+  maxHeight: "100dvh",
+  overflowY: "auto",
   padding: primitives.space.s,
   // Clear the notch / home indicator when the page bleeds to the screen edge.
   paddingBottom: `calc(${primitives.space.s} + env(safe-area-inset-bottom))`,
 });
 
+// Product / variant id, idiomatically top-right. @todo: reposition (drop the
+// right align, or move it in the JSX) or remove it.
+export const reference = style({
+  textAlign: "right",
+  color: colors.content.subtle,
+  marginBottom: primitives.space["3xs"],
+});
+
 // Single column by default; two columns (gallery | info) once the pane is wide.
 export const grid = style({
   display: "flex",
@@ -55,26 +65,31 @@ export const title = style({ color: colors.content.intense });
 
 export const price = style({ color: colors.content.intense });
 
-export const oos = style({ color: colors.common.error });
-
-export const specs = style({
+// Product facts as a simple list: one line per fact, "label: value" (or just
+// the value when unlabeled). marginTop separates it from the section heading.
+// @todo: reshape freely (a table, grouped sections, inline chips…)
+export const specList = style({
   display: "flex",
   flexDirection: "column",
-  gap: primitives.space["4xs"],
+  gap: primitives.space["3xs"],
+  marginTop: primitives.space["3xs"],
+  marginBottom: 0,
 });
 
+// One fact on a line: "label:" then value.
 export const specRow = style({
   display: "flex",
-  justifyContent: "space-between",
-  gap: primitives.space.s,
-  borderBottom: `${primitives.stroke.thin} solid ${colors.border.thin}`,
-  paddingBottom: primitives.space["4xs"],
+  gap: primitives.space["4xs"],
+});
+
+export const specLabel = style({
+  margin: 0,
+  color: colors.content.subtle,
 });
 
-export const specName = style({ color: colors.content.subtle });
 export const specValue = style({
+  margin: 0,
   color: colors.content.intense,
-  textAlign: "right",
 });
 
 // Primary CTA. @todo: tune to your brand; add a secondary action beside it

package/templates/ecom/src/views/carousel/detail/detail.stories.tsx

@@ -1,4 +1,4 @@
-import type { Product } from "../../../tools/render-carousel.js";
+import type { Product } from "../../../types.js";
 import { DetailView } from "./index";
 
 function shot(fill: string) {
@@ -29,25 +29,42 @@ function galleryMedia(primaryFill: string): string[] {
 const DESCRIPTION =
   "A relaxed-fit jacket in water-repellent cotton.\n\nDropped shoulders, a two-way zip, and ribbed cuffs. Fully lined, with two zip pockets at the front and one inside.";
 
-// Two axes with a sparse variant set: {black,M}, {black,L}, {sand,M} exist —
-// so choosing "Sand" disables "L".
+// One story, every picker behavior:
+// - Hole in the matrix: {sand,L} does not exist, so under Sand, L is
+//   hard-disabled; switching to Sand while L is selected snaps Size to M.
+// - Sold out: {black,L} renders struck but selectable; the CTA locks as
+//   "Out of stock".
+// - Axis not applicable: the indigo colorway is one-size (no `size` key), so
+//   choosing "Indigo" hides the Size row; indigo resolves and stays buyable.
 function jacket(
   id: string,
   color: string,
   colorLabel: string,
-  size: string,
+  size: string | null,
+  outOfStock = false,
 ): Product["variants"][number] {
+  const fill =
+    color === "sand" ? "d8c7a8" : color === "indigo" ? "3f4a8a" : "2b2b2b";
   return {
     id,
-    selection: { color, size },
+    selection: size == null ? { color } : { color, size },
     title: `Field jacket — ${colorLabel}`,
     description: DESCRIPTION,
-    price: { amount: color === "sand" ? 249 : 229, currency: "EUR" },
-    media: galleryMedia(color === "sand" ? "d8c7a8" : "2b2b2b"),
+    price: { amount: color === "black" ? 229 : 249, currency: "EUR" },
+    media: galleryMedia(fill),
     url: "https://example.com/jacket",
-    attributes: [
-      { name: "Material", value: "Water-repellent cotton" },
-      { name: "Fit", value: "Relaxed" },
+    outOfStock,
+    specs: [
+      { label: "Material", value: "Water-repellent cotton" },
+      { label: "Lining", value: "Recycled polyester" },
+      { label: "Fit", value: "Relaxed" },
+      { label: "Closure", value: "Two-way zip" },
+      { label: "Pockets", value: "Two zip front, one inside" },
+      { label: "Collar", value: "Stand-up" },
+      { label: "Cuffs", value: "Ribbed" },
+      { label: "Weight", value: "780 g" },
+      { label: "Origin", value: "Made in Portugal" },
+      { value: "Machine washable" }, // label-less fact (renders value only)
     ],
   };
 }
@@ -61,6 +78,7 @@ const PRODUCT: Product = {
       values: [
         { id: "black", label: "Black", media: shot("2b2b2b") },
         { id: "sand", label: "Sand", media: shot("d8c7a8") },
+        { id: "indigo", label: "Indigo", media: shot("3f4a8a") },
       ],
     },
     {
@@ -74,14 +92,15 @@ const PRODUCT: Product = {
   ],
   variants: [
     jacket("fj-black-m", "black", "Black", "m"),
-    jacket("fj-black-l", "black", "Black", "l"),
+    jacket("fj-black-l", "black", "Black", "l", true),
     jacket("fj-sand-m", "sand", "Sand", "m"),
+    jacket("fj-indigo", "indigo", "Indigo", null),
   ],
   card: {
     title: "Field jacket",
     price: { amount: 229, currency: "EUR" },
     media: [shot("2b2b2b")],
-    attributes: [],
+    specs: [],
   },
 };
 
@@ -100,14 +119,14 @@ const SIMPLE: Product = {
       price: { amount: 39, currency: "EUR" },
       media: [shot("e1e1e1")],
       url: "https://example.com/tote",
-      attributes: [{ name: "Material", value: "Canvas" }],
+      specs: [{ label: "Material", value: "Canvas" }],
     },
   ],
   card: {
     title: "Canvas tote",
     price: { amount: 39, currency: "EUR" },
     media: [shot("e1e1e1")],
-    attributes: [],
+    specs: [],
   },
 };
 

package/templates/ecom/src/views/carousel/detail/index.tsx

@@ -12,7 +12,7 @@ import {
   resolveVariant,
   type Selection,
 } from "../../../lib/variants.js";
-import type { Product } from "../../../tools/render-carousel.js";
+import type { Product, Variant } from "../../../types.js";
 import * as styles from "./detail.css";
 
 // Price to show: the resolved variant's price, else the range across variants
@@ -54,31 +54,42 @@ function priceText(
 // scoped to the visible selection.
 function grounding(
   product: Product,
+  variant: Variant | undefined,
   title: string,
   price: string,
   selection: Selection,
-  outOfStock: boolean,
+  unpurchasable: boolean,
   labels: Labels,
 ): string {
   const parts = [`The user is viewing "${title}" (product id: ${product.id}).`];
   const chosen: string[] = [];
   for (const option of product.options) {
-    let label = "not selected";
     const valueId = selection[option.id];
+    let label: string | undefined;
     for (const value of option.values) {
       if (value.id === valueId) {
         label = value.label;
         break;
       }
     }
+    if (label === undefined) {
+      // Axis skipped by the shown variant vs simply not picked yet.
+      label =
+        variant != null && variant.selection[option.id] == null
+          ? "not applicable"
+          : "not selected";
+    }
     chosen.push(`${option.label}: ${label}`);
   }
   if (chosen.length > 0) {
     parts.push(`Selected — ${chosen.join(", ")}.`);
   }
   parts.push(`Price: ${price}.`);
-  if (outOfStock) {
-    parts.push(labels.outOfStock);
+  if (unpurchasable) {
+    // Sold-out real variant vs a combination that does not exist.
+    parts.push(
+      variant != null ? labels.outOfStock : labels.combinationUnavailable,
+    );
   }
   return parts.join(" ");
 }
@@ -98,19 +109,27 @@ export function DetailView({ product }: { product: Product }) {
     initialSelection(product),
   );
 
-  const variant = resolveVariant(product, selection);
-  // Fall back to the card for display fields until a variant resolves.
-  const displayTitle = variant?.title ?? product.card.title;
-  const description = variant?.description ?? product.card.description;
-  const media = variant?.media.length ? variant.media : product.card.media;
-  const attributes = variant?.attributes ?? product.card.attributes;
-  const outOfStock = variant?.outOfStock ?? product.card.outOfStock ?? false;
-  const url = variant?.url ?? product.card.url;
+  // The exact variant for the selection; card fields fill in when none
+  // resolves (the applyChoice edge case, or a product with no variants).
+  const shown = resolveVariant(product, selection);
+  const displayTitle = shown?.title ?? product.card.title;
+  const description = shown?.description ?? product.card.description;
+  const media = shown?.media.length ? shown.media : product.card.media;
+  const specs = shown?.specs ?? product.card.specs;
+  // Sold out, or no variant resolved.
+  const unpurchasable = shown ? (shown.outOfStock ?? false) : true;
+  const url = shown?.url ?? product.card.url;
+  // The shown item's id: the resolved variant's SKU, else the product id.
+  const reference = shown?.id ?? product.id;
+  // @todo: read any custom Meta fields you added the same way (shown first,
+  // then card), e.g. `const rating = shown?.rating ?? product.card.rating;`,
+  // then render them in the agreed spot (rating by the title, discount by the
+  // price, badges as chips…).
 
-  const price = priceText(product, variant?.price, locale, labels);
-  // Buy CTA is enabled only once a variant resolves and carries a real link
+  const price = priceText(product, shown?.price, locale, labels);
+  // Buy CTA is enabled only for an exact, in-stock variant with a real link
   // (an empty url would leave the button enabled but dead).
-  const canBuy = variant != null && Boolean(url);
+  const canBuy = shown != null && Boolean(url) && !unpurchasable;
 
   // Point the host's fullscreen "Open in app" affordance at the selected
   // variant's page. Apps-SDK only; MCP Apps hosts reject, so ignore that.
@@ -125,13 +144,21 @@ export function DetailView({ product }: { product: Product }) {
       className={styles.detail}
       data-llm={grounding(
         product,
+        shown,
         displayTitle,
         price,
         selection,
-        outOfStock,
+        unpurchasable,
         labels,
       )}
     >
+      {/* Product / variant reference, idiomatically top-right. @todo: move it
+          (e.g. into the info column under the title) or drop it; restyle in
+          detail.css.ts (`reference`). */}
+      <p className={cx(text({ style: "bodyS" }), styles.reference)}>
+        {labels.reference} {reference}
+      </p>
+
       <div className={styles.grid}>
         <div className={styles.galleryCell}>
           {media.length > 0 ? (
@@ -159,12 +186,6 @@ export function DetailView({ product }: { product: Product }) {
             {price}
           </p>
 
-          {outOfStock ? (
-            <p className={cx(text({ style: "bodyS" }), styles.oos)}>
-              {labels.outOfStock}
-            </p>
-          ) : null}
-
           <VariantPicker
             product={product}
             selection={selection}
@@ -173,39 +194,57 @@ export function DetailView({ product }: { product: Product }) {
 
           {description ? <ExpandableText>{description}</ExpandableText> : null}
 
+          {/* Sold-out and unresolved selections stay composable; the CTA locks
+              and its label names the cause. */}
           <button
             type="button"
             className={cx(styles.cta, sprinkles({ mt: "3xs" }))}
             disabled={!canBuy}
             onClick={canBuy && url ? () => openExternal(url) : undefined}
           >
-            {variant ? labels.viewOnSite : labels.selectOptions}
+            {shown
+              ? unpurchasable
+                ? labels.outOfStock
+                : labels.viewOnSite
+              : labels.combinationUnavailable}
           </button>
 
-          {/* Specs rendered as a simple table, after the CTA. This is the visual
-              treatment only — the full spec is already in view state for the
-              model (see the carousel orchestrator), so hiding the table never
-              hides specs from the assistant. @todo: group/collapse, restyle, or
-              drop the table entirely. */}
-          {attributes.length > 0 ? (
-            <section className={styles.specs}>
+          {/* Product facts as a simple list, after the CTA: one "label: value"
+              line per fact (label-less facts show the value alone). This is the
+              visual treatment only; the full spec is already in view state for
+              the model (see the carousel orchestrator), so restyling or dropping
+              it never hides facts from the assistant. @todo: pick the shape that
+              best presents your specs: this list (default), a two-column table,
+              grouped sections, inline chips, etc. */}
+          {specs.length > 0 ? (
+            <section>
               <h2 className={text({ style: "labelM", weight: "medium" })}>
                 {labels.specifications}
               </h2>
-              {attributes.map((attribute) => (
-                <div key={attribute.name} className={styles.specRow}>
-                  <span
-                    className={cx(text({ style: "bodyS" }), styles.specName)}
-                  >
-                    {attribute.name}
-                  </span>
-                  <span
-                    className={cx(text({ style: "bodyS" }), styles.specValue)}
+              <dl className={styles.specList}>
+                {specs.map((spec) => (
+                  <div
+                    key={`${spec.label ?? ""}:${spec.value}`}
+                    className={styles.specRow}
                   >
-                    {attribute.value}
-                  </span>
-                </div>
-              ))}
+                    {spec.label ? (
+                      <dt
+                        className={cx(
+                          text({ style: "bodyS" }),
+                          styles.specLabel,
+                        )}
+                      >
+                        {spec.label}:
+                      </dt>
+                    ) : null}
+                    <dd
+                      className={cx(text({ style: "bodyS" }), styles.specValue)}
+                    >
+                      {spec.value}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
             </section>
           ) : null}
         </div>

package/templates/ecom/src/views/carousel/index.tsx

@@ -20,8 +20,7 @@ import { sprinkles } from "../../design/tokens";
 import { useToolInfo } from "../../helpers.js";
 import { useLabels } from "../../i18n";
 import { formatPrice } from "../../lib/format";
-import type { Product } from "../../tools/render-carousel.js";
-import type { Attribute, Price } from "../../types.js";
+import type { Price, Product, Spec } from "../../types.js";
 import { DetailView } from "./detail";
 
 const SKELETON_COUNT = 4;
@@ -43,7 +42,7 @@ type VariantSpec = {
   selection: Record<string, string>; // option label -> chosen value label
   price?: Price;
   available: boolean;
-  attributes: Attribute[];
+  specs: Spec[];
 };
 type ProductSpec = { id: string; title: string; variants: VariantSpec[] };
 type ViewState = {
@@ -78,7 +77,7 @@ function buildProductSpec(product: Product): ProductSpec {
       selection,
       price: variant.price,
       available: !variant.outOfStock,
-      attributes: variant.attributes,
+      specs: variant.specs,
     });
   }
   return { id: product.id, title: product.card.title, variants };

package/templates/ecom/vite.config.ts

@@ -1,6 +1,6 @@
+import { skybridge } from "@skybridge/vite-plugin";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/vite";
 import { defineConfig, type PluginOption } from "vite";
 
 export default defineConfig({