create-skybridge 0.0.0-dev.1fc2094 → 0.0.0-dev.1fd0170

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

@@ -1,21 +0,0 @@
-#!/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

@@ -1,21 +0,0 @@
-#!/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

@@ -1,21 +0,0 @@
-#!/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

@@ -1,21 +0,0 @@
-#!/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

@@ -1,41 +0,0 @@
-{
-  "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.1fc2094",
-    "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

@@ -1,56 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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>
-);