create-skybridge 0.0.0-dev.08be486 → 0.0.0-dev.09043e8

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

@@ -0,0 +1,115 @@
+import { style } from "@vanilla-extract/css";
+import { colors, primitives } from "../../../design/tokens";
+
+// Two-column breakpoint. Layout is driven by the pane's own width (container
+// query), never the viewport, so a phone and a resized desktop pane agree.
+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",
+  flexDirection: "column",
+  gap: primitives.space.s,
+  maxWidth: "1099px",
+  marginInline: "auto",
+  "@container": {
+    [`(min-width: ${TWO_COLUMN_MIN_WIDTH})`]: {
+      display: "grid",
+      // `minmax(0, 1fr)` (not `1fr`) lets a column shrink below its content's
+      // intrinsic width, so a chip row scrolls/wraps instead of blowing out.
+      gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+      gridTemplateAreas: '"gallery info"',
+      alignItems: "start",
+    },
+  },
+});
+
+export const galleryCell = style({
+  "@container": {
+    [`(min-width: ${TWO_COLUMN_MIN_WIDTH})`]: {
+      gridArea: "gallery",
+      position: "sticky",
+      top: primitives.space.s,
+    },
+  },
+});
+
+// The info column owns all inter-section spacing; sections set no outer margin.
+export const info = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: primitives.space.xs,
+  "@container": {
+    [`(min-width: ${TWO_COLUMN_MIN_WIDTH})`]: { gridArea: "info" },
+  },
+});
+
+export const title = style({ color: colors.content.intense });
+
+export const price = style({ color: colors.content.intense });
+
+// 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["3xs"],
+  marginTop: primitives.space["3xs"],
+  marginBottom: 0,
+});
+
+// One fact on a line: "label:" then value.
+export const specRow = style({
+  display: "flex",
+  gap: primitives.space["4xs"],
+});
+
+export const specLabel = style({
+  margin: 0,
+  color: colors.content.subtle,
+});
+
+export const specValue = style({
+  margin: 0,
+  color: colors.content.intense,
+});
+
+// Primary CTA. @todo: tune to your brand; add a secondary action beside it
+// (ask-the-assistant, contact) as a per-catalog extension.
+export const cta = style({
+  minHeight: "44px",
+  padding: `${primitives.space["3xs"]} ${primitives.space.s}`,
+  borderRadius: primitives.radius.m,
+  border: "none",
+  backgroundColor: colors.common.accent,
+  color: colors.content.invertIntense,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.m,
+  fontWeight: primitives.font.weight.medium,
+  cursor: "pointer",
+  selectors: {
+    "&:disabled": {
+      backgroundColor: colors.surface.intense,
+      color: colors.content.subtle,
+      cursor: "not-allowed",
+    },
+  },
+});

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

@@ -0,0 +1,133 @@
+import type { Product } from "../../../types.js";
+import { DetailView } from "./index";
+
+function shot(fill: string) {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23${fill}'/%3E%3Ccircle cx='200' cy='200' r='110' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E`;
+}
+
+// A long media set (primary shot + several accents) so the desktop thumbnail
+// rail is taller than the image and overflows past its bottom.
+const ACCENT_FILLS = [
+  "c9d4f5",
+  "f5d4c9",
+  "d4f5c9",
+  "f5f0c9",
+  "e0c9f5",
+  "c9f5f0",
+  "f5c9e0",
+  "d9d9d9",
+];
+
+function galleryMedia(primaryFill: string): string[] {
+  const media = [shot(primaryFill)];
+  for (const fill of ACCENT_FILLS) {
+    media.push(shot(fill));
+  }
+  return media;
+}
+
+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.";
+
+// 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 | null,
+  outOfStock = false,
+): Product["variants"][number] {
+  const fill =
+    color === "sand" ? "d8c7a8" : color === "indigo" ? "3f4a8a" : "2b2b2b";
+  return {
+    id,
+    selection: size == null ? { color } : { color, size },
+    title: `Field jacket — ${colorLabel}`,
+    description: DESCRIPTION,
+    price: { amount: color === "black" ? 229 : 249, currency: "EUR" },
+    media: galleryMedia(fill),
+    url: "https://example.com/jacket",
+    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)
+    ],
+  };
+}
+
+const PRODUCT: Product = {
+  id: "field-jacket",
+  options: [
+    {
+      id: "color",
+      label: "Color",
+      values: [
+        { id: "black", label: "Black", media: shot("2b2b2b") },
+        { id: "sand", label: "Sand", media: shot("d8c7a8") },
+        { id: "indigo", label: "Indigo", media: shot("3f4a8a") },
+      ],
+    },
+    {
+      id: "size",
+      label: "Size",
+      values: [
+        { id: "m", label: "M" },
+        { id: "l", label: "L" },
+      ],
+    },
+  ],
+  variants: [
+    jacket("fj-black-m", "black", "Black", "m"),
+    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")],
+    specs: [],
+  },
+};
+
+export const Default = () => <DetailView product={PRODUCT} />;
+
+// Single-variant product: no picker, buyable immediately.
+const SIMPLE: Product = {
+  id: "tote",
+  options: [],
+  variants: [
+    {
+      id: "tote",
+      selection: {},
+      title: "Canvas tote",
+      description: "A sturdy everyday canvas tote.",
+      price: { amount: 39, currency: "EUR" },
+      media: [shot("e1e1e1")],
+      url: "https://example.com/tote",
+      specs: [{ label: "Material", value: "Canvas" }],
+    },
+  ],
+  card: {
+    title: "Canvas tote",
+    price: { amount: 39, currency: "EUR" },
+    media: [shot("e1e1e1")],
+    specs: [],
+  },
+};
+
+export const SingleVariant = () => <DetailView product={SIMPLE} />;

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

@@ -0,0 +1,254 @@
+import { useEffect, useState } from "react";
+import { useOpenExternal, useSetOpenInAppUrl, useUser } from "skybridge/web";
+import { ExpandableText } from "../../../components/expandable-text";
+import { ImageGallery } from "../../../components/image-gallery";
+import { VariantPicker } from "../../../components/variant-picker";
+import { sprinkles, text } from "../../../design/tokens";
+import { type Labels, useLabels } from "../../../i18n";
+import { cx } from "../../../lib/cx";
+import { formatPrice } from "../../../lib/format";
+import {
+  initialSelection,
+  resolveVariant,
+  type Selection,
+} from "../../../lib/variants.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
+// (or a single price when they agree), else the card price, else a fallback.
+function priceText(
+  product: Product,
+  variantPrice: Product["card"]["price"],
+  locale: string,
+  labels: Labels,
+): string {
+  if (variantPrice) {
+    return formatPrice(variantPrice, locale);
+  }
+  const amounts: number[] = [];
+  let currency = "";
+  for (const variant of product.variants) {
+    if (variant.price) {
+      amounts.push(variant.price.amount);
+      currency = variant.price.currency;
+    }
+  }
+  if (amounts.length > 0) {
+    const min = Math.min(...amounts);
+    const max = Math.max(...amounts);
+    if (min === max) {
+      return formatPrice({ amount: min, currency }, locale);
+    }
+    return `${formatPrice({ amount: min, currency }, locale)} – ${formatPrice({ amount: max, currency }, locale)}`;
+  }
+  if (product.card.price) {
+    return formatPrice(product.card.price, locale);
+  }
+  return labels.priceOnRequest;
+}
+
+// data-llm narrates the variant the user is currently looking at. The full
+// product spec (every variant) is pushed to view state by the carousel
+// orchestrator, so the model can answer beyond what is on screen; this stays
+// scoped to the visible selection.
+function grounding(
+  product: Product,
+  variant: Variant | undefined,
+  title: string,
+  price: string,
+  selection: Selection,
+  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) {
+    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 (unpurchasable) {
+    // Sold-out real variant vs a combination that does not exist.
+    parts.push(
+      variant != null ? labels.outOfStock : labels.combinationUnavailable,
+    );
+  }
+  return parts.join(" ");
+}
+
+/**
+ * Product detail view, rendered fullscreen over the carousel (see the carousel
+ * orchestrator). Reads a single product from the payload already in `_meta`;
+ * does no fetch. Option choices resolve against the product's sparse variant
+ * list in-place (no remount).
+ */
+export function DetailView({ product }: { product: Product }) {
+  const { locale } = useUser();
+  const labels = useLabels();
+  const openExternal = useOpenExternal();
+  const setOpenInAppUrl = useSetOpenInAppUrl();
+  const [selection, setSelection] = useState<Selection>(() =>
+    initialSelection(product),
+  );
+
+  // 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, 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 = 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.
+  useEffect(() => {
+    if (url) {
+      setOpenInAppUrl(url).catch(() => {});
+    }
+  }, [url, setOpenInAppUrl]);
+
+  return (
+    <div
+      className={styles.detail}
+      data-llm={grounding(
+        product,
+        shown,
+        displayTitle,
+        price,
+        selection,
+        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 ? (
+            // Key on the media set so switching to a variant with different
+            // images remounts the gallery fresh (index reset to the first image).
+            <ImageGallery
+              key={media.join("|")}
+              media={media}
+              alt={displayTitle}
+            />
+          ) : null}
+        </div>
+
+        <div className={styles.info}>
+          <h1
+            className={cx(
+              text({ style: "headingS", weight: "medium" }),
+              styles.title,
+            )}
+          >
+            {displayTitle}
+          </h1>
+
+          <p className={cx(text({ style: "headingS" }), styles.price)}>
+            {price}
+          </p>
+
+          <VariantPicker
+            product={product}
+            selection={selection}
+            onChange={setSelection}
+          />
+
+          {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}
+          >
+            {shown
+              ? unpurchasable
+                ? labels.outOfStock
+                : labels.viewOnSite
+              : labels.combinationUnavailable}
+          </button>
+
+          {/* 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>
+              <dl className={styles.specList}>
+                {specs.map((spec) => (
+                  <div
+                    key={`${spec.label ?? ""}:${spec.value}`}
+                    className={styles.specRow}
+                  >
+                    {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>
+      </div>
+    </div>
+  );
+}