create-skybridge 0.0.0-dev.06d207f → 0.0.0-dev.06f809c

package/templates/ecom/node_modules/.bin/tsc

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/templates/ecom/node_modules/.bin/tsserver

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/templates/ecom/node_modules/.bin/tsx

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../tsx/dist/cli.mjs" "$@"
+fi

package/templates/ecom/node_modules/.bin/vite

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/templates/ecom/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "skybridge-ecom",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Skybridge MCP ecommerce template",
+  "type": "module",
+  "scripts": {
+    "dev": "skybridge dev",
+    "dev:tunnel": "skybridge dev --tunnel",
+    "build": "skybridge build",
+    "start": "skybridge start",
+    "deploy": "alpic deploy",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "skybridge": "^0.0.0-dev.06f809c",
+    "vite": "^8.1.3",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@ladle/react": "^5.1.1",
+    "@skybridge/devtools": "^1.2.4",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "alpic": "^1.147.1",
+    "tsx": "^4.23.0",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">=24.18.0"
+  }
+}

package/templates/ecom/src/components/chip.css.ts

@@ -0,0 +1,56 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// A selectable pill used for option values (sizes, colors…). `selected` and
+// `disabled` are driven by the variant picker from the sparse variant list.
+// @todo: tune the chip to your brand (radius, borders, selected treatment).
+export const chip = recipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: primitives.space["4xs"],
+    minHeight: "44px", // touch target
+    padding: `${primitives.space["4xs"]} ${primitives.space["3xs"]}`,
+    borderRadius: primitives.radius.m,
+    border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+    backgroundColor: colors.surface.extraLight,
+    color: colors.content.intense,
+    fontFamily: primitives.font.family.primary,
+    fontSize: primitives.font.size.s,
+    cursor: "pointer",
+    transition: "border-color 150ms ease",
+    "@media": {
+      "(prefers-reduced-motion: reduce)": { transition: "none" },
+    },
+  },
+  variants: {
+    selected: {
+      true: {
+        borderColor: colors.common.accent,
+        borderWidth: primitives.stroke.medium,
+      },
+      false: {},
+    },
+    disabled: {
+      // Unreachable value given the other choices: greyed and struck, but kept
+      // visible so the client sees the axis exists (never silently hidden).
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.4,
+        textDecoration: "line-through",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { selected: false, disabled: false },
+});
+
+// Small color/material swatch shown before the label on image chips.
+export const swatch = style({
+  width: "20px",
+  height: "20px",
+  borderRadius: primitives.radius.full,
+  objectFit: "cover",
+  display: "block",
+});

package/templates/ecom/src/components/chip.stories.tsx

@@ -0,0 +1,26 @@
+import { Chip } from "./chip";
+
+const SWATCH =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%233b6cf0'/%3E%3C/svg%3E";
+
+const row = {
+  display: "flex",
+  gap: 8,
+  flexWrap: "wrap" as const,
+  maxWidth: 320,
+};
+
+export const States = () => (
+  <div style={row}>
+    <Chip label="M" />
+    <Chip label="L" selected />
+    <Chip label="XL" disabled />
+  </div>
+);
+
+export const WithSwatch = () => (
+  <div style={row}>
+    <Chip label="Blue" media={SWATCH} selected />
+    <Chip label="Black" media={SWATCH} />
+  </div>
+);

package/templates/ecom/src/components/chip.tsx

@@ -0,0 +1,41 @@
+import * as styles from "./chip.css";
+
+type ChipProps = {
+  label: string;
+  selected?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+  // Optional swatch image (e.g. one per color); omit for a plain text chip.
+  media?: string;
+};
+
+/**
+ * One option value as a selectable pill. Rendered as a `radio` inside the
+ * variant picker's `radiogroup`; the picker owns selection state and passes
+ * `selected`/`disabled` computed from the sparse variant list.
+ */
+export function Chip({
+  label,
+  selected,
+  disabled,
+  onSelect,
+  media,
+}: ChipProps) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: custom radio; a styled button carries the swatch and disabled state a native radio cannot, inside the picker radiogroup.
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected ?? false}
+      aria-disabled={disabled ?? false}
+      disabled={disabled}
+      className={styles.chip({ selected, disabled })}
+      onClick={disabled ? undefined : onSelect}
+    >
+      {media ? (
+        <img className={styles.swatch} src={media} alt="" draggable={false} />
+      ) : null}
+      {label}
+    </button>
+  );
+}

package/templates/ecom/src/components/empty-state.stories.tsx

@@ -0,0 +1,3 @@
+import { EmptyState } from "./empty-state";
+
+export const NoResults = () => <EmptyState message="No products to show." />;

package/templates/ecom/src/components/empty-state.tsx

@@ -0,0 +1,12 @@
+import { sprinkles, text } from "../design/tokens";
+
+/** Centered message shown when there is nothing to render (e.g. no results). */
+export function EmptyState({ message }: { message: string }) {
+  return (
+    <div
+      className={sprinkles({ p: "l", textAlign: "center", color: "subtle" })}
+    >
+      <p className={text({ style: "bodyM" })}>{message}</p>
+    </div>
+  );
+}

package/templates/ecom/src/components/expandable-text.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// @todo: collapsed height before "read more" appears. Tune to your type scale.
+const COLLAPSED_MAX_HEIGHT = "6em";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: primitives.space["4xs"],
+});
+
+// `clamp` caps the height (applied whenever collapsed, so overflow can be
+// measured); `fade` masks the last line to a soft cutoff instead of an ellipsis
+// and is applied only when the text actually overflows (never on short copy).
+export const body = recipe({
+  base: {
+    color: colors.content.intense,
+    whiteSpace: "pre-line", // preserve paragraph breaks from the source
+  },
+  variants: {
+    clamp: {
+      true: { maxHeight: COLLAPSED_MAX_HEIGHT, overflow: "hidden" },
+      false: {},
+    },
+    fade: {
+      true: {
+        maskImage:
+          "linear-gradient(to bottom, black 0%, black 55%, transparent 100%)",
+        WebkitMaskImage:
+          "linear-gradient(to bottom, black 0%, black 55%, transparent 100%)",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { clamp: false, fade: false },
+});
+
+export const toggle = style({
+  padding: 0,
+  border: "none",
+  background: "none",
+  color: colors.common.accent,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.s,
+  cursor: "pointer",
+});

package/templates/ecom/src/components/expandable-text.stories.tsx

@@ -0,0 +1,20 @@
+import { ExpandableText } from "./expandable-text";
+
+const frame = { maxWidth: 360 };
+
+const LONG =
+  "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. Designed to layer over a knit through the cooler months, and cut long enough to sit past the hip.";
+
+export const Long = () => (
+  <div style={frame}>
+    <ExpandableText>{LONG}</ExpandableText>
+  </div>
+);
+
+export const Short = () => (
+  <div style={frame}>
+    <ExpandableText>
+      A short description that never needs a toggle.
+    </ExpandableText>
+  </div>
+);

package/templates/ecom/src/components/expandable-text.tsx

@@ -0,0 +1,53 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { text } from "../design/tokens";
+import { useLabels } from "../i18n";
+import { cx } from "../lib/cx";
+import * as styles from "./expandable-text.css";
+
+/**
+ * Clamps long copy to a few lines with a "read more" toggle. Truncation is
+ * measured, not assumed: the toggle only appears when the text actually
+ * overflows the collapsed height, so short copy shows no button.
+ */
+export function ExpandableText({ children }: { children: string }) {
+  const labels = useLabels();
+  const bodyRef = useRef<HTMLParagraphElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+
+  const collapsed = !expanded;
+
+  // Measure against the collapsed height (the clamp is applied whenever
+  // collapsed, so scrollHeight vs clientHeight is meaningful). Re-run when the
+  // text changes (e.g. the client switches variant) so the toggle tracks it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: children re-triggers the measure, it is not read in the body.
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (el && collapsed) {
+      setOverflows(el.scrollHeight > el.clientHeight + 1);
+    }
+  }, [children, collapsed]);
+
+  return (
+    <div className={styles.container}>
+      <p
+        ref={bodyRef}
+        className={cx(
+          text({ style: "bodyS" }),
+          styles.body({ clamp: collapsed, fade: collapsed && overflows }),
+        )}
+      >
+        {children}
+      </p>
+      {overflows ? (
+        <button
+          type="button"
+          className={styles.toggle}
+          onClick={() => setExpanded((v) => !v)}
+        >
+          {expanded ? labels.readLess : labels.readMore}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/templates/ecom/src/components/image-gallery.css.ts

@@ -0,0 +1,172 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+import { colors, primitives } from "../design/tokens";
+
+export const gallery = style({
+  position: "relative",
+});
+
+// Rail mode only (THUMBNAIL_RAIL): lay the rail beside the image on desktop. The
+// breakpoint matches the PDP's two-column grid and resolves against the same
+// `.detail` container, so the rail appears exactly when the page goes two-column.
+export const galleryRail = style({
+  "@container": {
+    "(min-width: 560px)": {
+      display: "flex",
+      flexDirection: "row",
+      gap: primitives.space["2xs"],
+      // Top-align so the rail sits beside the image; the rail's own max-height
+      // (set from the measured image height) caps it and scrolls the excess.
+      alignItems: "flex-start",
+    },
+  },
+});
+
+// Image column: the positioning context for the overlaid chevrons, and the flex
+// child that takes the width left of the rail on desktop.
+export const mainCol = style({
+  position: "relative",
+  minWidth: 0,
+  "@container": {
+    "(min-width: 560px)": { flex: 1 },
+  },
+});
+
+// Scroll-snap track: one image per view. Native swipe on touch; the chevrons
+// are the pointer affordance. Scrollbar hidden.
+export const track = style({
+  display: "flex",
+  overflowX: "auto",
+  scrollSnapType: "x mandatory",
+  scrollBehavior: "smooth",
+  scrollbarWidth: "none",
+  borderRadius: primitives.radius.m,
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { scrollBehavior: "auto" },
+  },
+});
+
+globalStyle(`${track}::-webkit-scrollbar`, { display: "none" });
+
+export const slide = style({
+  flex: "0 0 100%",
+  scrollSnapAlign: "start",
+  // Reserve the box so images load without shifting the page. @todo: use the
+  // same aspect ratio / fit you chose for the card from the real image sample.
+  aspectRatio: "1",
+  backgroundColor: colors.surface.subtle,
+});
+
+export const image = style({
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  display: "block",
+  pointerEvents: "none",
+  userSelect: "none",
+});
+
+// Prev/next chevrons, vertically centered, disabled at the ends.
+export const nav = style({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  display: "grid",
+  placeItems: "center",
+  width: "36px",
+  height: "36px",
+  padding: 0,
+  borderRadius: primitives.radius.full,
+  border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+  backgroundColor: colors.surface.extraLight,
+  color: colors.content.intense,
+  cursor: "pointer",
+  transition: "opacity 150ms ease",
+  selectors: {
+    "&:disabled": { opacity: 0, pointerEvents: "none" },
+  },
+});
+
+export const navPrev = style({ left: primitives.space["3xs"] });
+export const navNext = style({ right: primitives.space["3xs"] });
+
+// Position indicator: a thin track with a fill sized to (index + 1) / count.
+// @todo: style to your brand — height, track/fill colors, radius, width, and placement.
+export const progress = style({
+  height: "3px",
+  marginTop: primitives.space["3xs"],
+  borderRadius: primitives.radius.full,
+  backgroundColor: colors.border.thin,
+  overflow: "hidden",
+});
+
+export const progressFill = style({
+  height: "100%",
+  borderRadius: primitives.radius.full,
+  backgroundColor: colors.content.intense,
+  transition: "width 200ms ease",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { transition: "none" },
+  },
+});
+
+// In rail mode the rail conveys position on desktop, so the progress bar is
+// mobile-only there.
+export const progressMobileOnly = style({
+  "@container": {
+    "(min-width: 560px)": { display: "none" },
+  },
+});
+
+// Desktop thumbnail rail (THUMBNAIL_RAIL). Hidden on mobile, where the swipe
+// track + progress bar own navigation. Capped to the image height via an inline
+// max-height and scrolls the excess. @todo: tune the rail width / thumb size.
+export const rail = style({
+  display: "none",
+  "@container": {
+    "(min-width: 560px)": {
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 0,
+      gap: primitives.space["2xs"],
+      width: "64px",
+      minHeight: 0,
+      overflowY: "auto",
+      scrollbarWidth: "none",
+    },
+  },
+});
+
+globalStyle(`${rail}::-webkit-scrollbar`, { display: "none" });
+
+export const thumb = style({
+  boxSizing: "border-box",
+  flexShrink: 0,
+  width: "100%",
+  aspectRatio: "1",
+  minHeight: 0, // let aspect-ratio win over the flex-item default min-height
+  padding: primitives.space["4xs"],
+  borderRadius: primitives.radius.m,
+  border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+  backgroundColor: colors.surface.extraLight,
+  cursor: "pointer",
+  transition: "border-color 150ms ease",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": { transition: "none" },
+  },
+});
+
+// Selected thumb: thicker, accented border. border-box keeps the width swap from
+// shifting the rail layout.
+export const thumbActive = style({
+  borderColor: colors.common.accent,
+  borderWidth: primitives.stroke.medium,
+});
+
+export const thumbImage = style({
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  display: "block",
+  pointerEvents: "none",
+  userSelect: "none",
+});

package/templates/ecom/src/components/image-gallery.stories.tsx

@@ -0,0 +1,30 @@
+import { ImageGallery } from "./image-gallery";
+
+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`;
+}
+
+// The gallery's desktop layout (and the optional THUMBNAIL_RAIL) query a
+// `container-type` host, which the PDP's `.detail` provides in the app. The
+// story supplies its own so it previews at a realistic width and renders
+// correctly whichever way THUMBNAIL_RAIL is set — swipe when off, rail when on.
+const frame = {
+  containerType: "inline-size" as const,
+  width: 600,
+  maxWidth: "100%",
+};
+
+export const Multiple = () => (
+  <div style={frame}>
+    <ImageGallery
+      media={[shot("e1e1e1"), shot("c9d4f5"), shot("f5d4c9")]}
+      alt="Product"
+    />
+  </div>
+);
+
+export const Single = () => (
+  <div style={frame}>
+    <ImageGallery media={[shot("e1e1e1")]} alt="Product" />
+  </div>
+);