create-skybridge 0.0.0-dev.a635b86 → 0.0.0-dev.a63fad2

package/templates/ecom/src/components/view-frame.css.ts

@@ -0,0 +1,22 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+import { colors, primitives } from "../design/tokens";
+
+/**
+ * Base frame for every view. Transparent so the widget blends into the host
+ * surface; it pins the design system's font + content color so descendants
+ * inherit from the DS, not from the host page (whose text color could be white
+ * on a dark host and make card text vanish).
+ */
+export const viewFrame = style({
+  color: colors.content.intense,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.m,
+  lineHeight: primitives.font.lineHeight.normal,
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+});
+
+// Box-sizing reset scoped to the frame subtree.
+globalStyle(`${viewFrame} *, ${viewFrame} *::before, ${viewFrame} *::after`, {
+  boxSizing: "border-box",
+});

package/templates/ecom/src/components/view-frame.tsx

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "react";
+import { useLayout } from "skybridge/web";
+import { darkTheme, lightTheme } from "../design/tokens";
+import { cx } from "../lib/cx";
+import { viewFrame } from "./view-frame.css";
+
+/**
+ * ViewFrame: the top-level wrapper every view mounts inside. It activates the
+ * design system by applying the active theme class (which sets the CSS
+ * variables the color contract declares) and paints the base surface + font +
+ * content color so descendants inherit from the DS instead of the host page.
+ *
+ * It follows the host theme via useLayout(). To lock the widget to one palette
+ * (e.g. always light), drop useLayout and hardcode the theme class.
+ *
+ * Keep view entry files thin: render <ViewFrame> at the root and let this carry
+ * the theme + base-style boilerplate.
+ */
+type ViewFrameProps = HTMLAttributes<HTMLDivElement>;
+
+export function ViewFrame({ className, ...rest }: ViewFrameProps) {
+  const { theme } = useLayout();
+  const themeClass = theme === "dark" ? darkTheme : lightTheme;
+
+  return <div {...rest} className={cx(themeClass, viewFrame, className)} />;
+}
+ViewFrame.displayName = "ViewFrame";

package/templates/ecom/src/config.ts

@@ -0,0 +1,12 @@
+// App-wide tuning knobs, shared by the server prompt and the tools.
+
+// @todo: minimum number of searches the model runs before rendering. Feeds the
+// prompts to enforce multi-call exploration; raise for deeper results.
+export const MIN_SEARCH_ITERATIONS = 2;
+
+// @todo: the maximum number of products the carousel shows.
+export const CAROUSEL_MAX_SIZE = 6;
+
+// A "min-max" string (e.g. "3-6") derived from CAROUSEL_MAX_SIZE, interpolated
+// into the prompts to tell the model how many products to curate toward.
+export const CAROUSEL_RANGE = `${Math.ceil(CAROUSEL_MAX_SIZE / 2)}-${CAROUSEL_MAX_SIZE}`;

package/templates/ecom/src/design/contract.css.ts

@@ -0,0 +1,39 @@
+import { createThemeContract } from "@vanilla-extract/css";
+
+/**
+ * Semantic color contract. Every field must be satisfied by both
+ * themes/light.css.ts and themes/dark.css.ts: TypeScript errors on drift.
+ *
+ * Adding a field here forces both themes to set a value. The compiler is the
+ * enforcement mechanism that keeps light and dark coherent.
+ *
+ * @todo: add or remove semantic slots to fit your UI. Keep names intent-based
+ * (surface.subtle, content.intense), not literal (grey100): the point is that
+ * components reference meaning, and the theme decides the hex.
+ */
+export const colors = createThemeContract({
+  surface: {
+    extraLight: null,
+    light: null,
+    subtle: null,
+    intense: null,
+  },
+  content: {
+    intense: null,
+    subtle: null,
+    invertIntense: null,
+    invertSubtle: null,
+  },
+  border: {
+    thin: null,
+    subtle: null,
+    intense: null,
+  },
+  common: {
+    accent: null,
+    invertAccent: null,
+    highlight: null,
+    error: null,
+    success: null,
+  },
+});

package/templates/ecom/src/design/fonts.css

@@ -0,0 +1,15 @@
+/* @todo: add your brand's @font-face rules here, then point
+   primitives.font.family.primary at the family name. Drop the font files in
+   public/fonts/ so they are served under /assets/fonts/.
+
+   The template ships with the system font stack, which needs no @font-face,
+   so this file is empty by default. Example:
+
+   @font-face {
+     font-family: "My Brand";
+     font-style: normal;
+     font-weight: 400;
+     font-display: block;
+     src: url("/assets/fonts/MyBrand-Regular.woff2") format("woff2");
+   }
+*/

package/templates/ecom/src/design/primitives.css.ts

@@ -0,0 +1,101 @@
+import { createGlobalTheme } from "@vanilla-extract/css";
+
+/**
+ * Non-mode-aware design primitives: the raw scales every theme and recipe
+ * draws from. Values here are brand-neutral placeholders.
+ *
+ * @todo: replace these with your brand's real tokens (ideally extracted from
+ * a Figma design file). Change values, not the shape: the space/radius/font
+ * keys are referenced by sprinkles.css.ts and the recipes. Nothing outside
+ * this file should hard-code a hex, size, or spacing value.
+ */
+export const primitives = createGlobalTheme(":root", {
+  // Spacing scale (4px based). Used for padding, margin, and gap via sprinkles.
+  space: {
+    none: "0",
+    "5xs": "2px",
+    "4xs": "4px",
+    "3xs": "8px",
+    "2xs": "12px",
+    xs: "16px",
+    s: "24px",
+    m: "32px",
+    l: "40px",
+    xl: "48px",
+    "2xl": "56px",
+    "3xl": "64px",
+  },
+  radius: {
+    none: "0",
+    xs: "2px",
+    s: "4px",
+    m: "8px",
+    l: "16px",
+    xl: "32px",
+    full: "999px",
+  },
+  font: {
+    family: {
+      // @todo: swap in your brand font (add its @font-face to fonts.css). The
+      // system stack is the zero-asset default.
+      primary:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    },
+    weight: {
+      regular: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    },
+    size: {
+      xs: "12px",
+      s: "14px",
+      m: "16px",
+      l: "20px",
+      xl: "24px",
+      "2xl": "32px",
+      "3xl": "40px",
+    },
+    lineHeight: {
+      tight: "1.25",
+      normal: "1.5",
+    },
+    letterSpacing: {
+      default: "0",
+      wide: "0.5px",
+    },
+  },
+  stroke: {
+    thin: "1px",
+    medium: "1.5px",
+    thick: "2px",
+  },
+  // Raw greyscale ramp. Themes pick from these for surface/content/border.
+  grey: {
+    white: "#ffffff",
+    "50": "#f8f8f8",
+    "100": "#f2f2f2",
+    "200": "#e1e1e1",
+    "300": "#b4b4b4",
+    "400": "#929292",
+    "500": "#727272",
+    "600": "#636363",
+    "700": "#4c4c4c",
+    "800": "#333333",
+    "900": "#1a1a1a",
+    black: "#000000",
+  },
+  // @todo: your brand accent ramp (call-to-action, links, highlights). Steps
+  // named by lightness, like the grey ramp; each theme picks the shade that
+  // reads well on its surface (light mode the darker step, dark mode the
+  // lighter one). Add more steps as needed.
+  accent: {
+    "400": "#7ba0f5",
+    "600": "#3b6cf0",
+  },
+  // Status colors, shared across themes.
+  status: {
+    error: "#c53929",
+    success: "#5c7d0b",
+  },
+});

package/templates/ecom/src/design/recipes/typography.css.ts

@@ -0,0 +1,75 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { primitives } from "../primitives.css";
+
+/**
+ * The one text style, driven by variants. Call it as:
+ *   text({ style: "headingM", weight: "medium" })
+ *
+ * `style` picks the size/line-height pair; `weight` picks the font weight.
+ * This is the workhorse recipe: use it for all typography rather than setting
+ * fontSize/fontWeight by hand.
+ *
+ * @todo: adjust the styles to your type scale. Add a component recipe (button,
+ * tag, card) only when a component has real variants; otherwise style with
+ * sprinkles or a `style()` block.
+ */
+export const text = recipe({
+  base: {
+    fontFamily: primitives.font.family.primary,
+    letterSpacing: primitives.font.letterSpacing.default,
+    fontWeight: primitives.font.weight.regular,
+    margin: 0,
+  },
+  variants: {
+    style: {
+      display: {
+        fontSize: primitives.font.size["3xl"],
+        lineHeight: primitives.font.lineHeight.tight,
+      },
+      headingL: {
+        fontSize: primitives.font.size["2xl"],
+        lineHeight: primitives.font.lineHeight.tight,
+      },
+      headingM: {
+        fontSize: primitives.font.size.xl,
+        lineHeight: primitives.font.lineHeight.tight,
+      },
+      headingS: {
+        fontSize: primitives.font.size.l,
+        lineHeight: primitives.font.lineHeight.tight,
+      },
+      bodyM: {
+        fontSize: primitives.font.size.m,
+        lineHeight: primitives.font.lineHeight.normal,
+      },
+      bodyS: {
+        fontSize: primitives.font.size.s,
+        lineHeight: primitives.font.lineHeight.normal,
+      },
+      labelM: {
+        fontSize: primitives.font.size.m,
+        lineHeight: primitives.font.lineHeight.tight,
+      },
+      labelS: {
+        fontSize: primitives.font.size.s,
+        lineHeight: primitives.font.lineHeight.tight,
+      },
+      overline: {
+        fontSize: primitives.font.size.xs,
+        lineHeight: primitives.font.lineHeight.normal,
+        letterSpacing: primitives.font.letterSpacing.wide,
+        textTransform: "uppercase",
+      },
+    },
+    weight: {
+      regular: { fontWeight: primitives.font.weight.regular },
+      medium: { fontWeight: primitives.font.weight.medium },
+      semibold: { fontWeight: primitives.font.weight.semibold },
+      bold: { fontWeight: primitives.font.weight.bold },
+    },
+  },
+  defaultVariants: {
+    style: "bodyM",
+    weight: "regular",
+  },
+});

package/templates/ecom/src/design/sprinkles.css.ts

@@ -0,0 +1,128 @@
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+import { colors } from "./contract.css";
+import { primitives } from "./primitives.css";
+
+/**
+ * Atomic style props built on the primitives + color contract. Use sprinkles
+ * for one-off layout/spacing/color on an element, e.g.
+ *   sprinkles({ display: "flex", gap: "s", color: "intense" })
+ *
+ * Structural component styling belongs in a co-located `.css.ts` `style()`
+ * block; sprinkles is the thin glue layer on top.
+ */
+
+const spaceProperties = defineProperties({
+  properties: {
+    padding: primitives.space,
+    paddingTop: primitives.space,
+    paddingRight: primitives.space,
+    paddingBottom: primitives.space,
+    paddingLeft: primitives.space,
+    margin: primitives.space,
+    marginTop: primitives.space,
+    marginRight: primitives.space,
+    marginBottom: primitives.space,
+    marginLeft: primitives.space,
+    gap: primitives.space,
+    rowGap: primitives.space,
+    columnGap: primitives.space,
+  },
+  shorthands: {
+    p: ["padding"],
+    pt: ["paddingTop"],
+    pr: ["paddingRight"],
+    pb: ["paddingBottom"],
+    pl: ["paddingLeft"],
+    px: ["paddingLeft", "paddingRight"],
+    py: ["paddingTop", "paddingBottom"],
+    m: ["margin"],
+    mt: ["marginTop"],
+    mr: ["marginRight"],
+    mb: ["marginBottom"],
+    ml: ["marginLeft"],
+    mx: ["marginLeft", "marginRight"],
+    my: ["marginTop", "marginBottom"],
+  },
+});
+
+const colorProperties = defineProperties({
+  properties: {
+    backgroundColor: {
+      ...colors.surface,
+      accent: colors.common.accent,
+      invertAccent: colors.common.invertAccent,
+      highlight: colors.common.highlight,
+      transparent: "transparent",
+    },
+    color: {
+      ...colors.content,
+      accent: colors.common.accent,
+      invertAccent: colors.common.invertAccent,
+      highlight: colors.common.highlight,
+      error: colors.common.error,
+      success: colors.common.success,
+    },
+    borderColor: {
+      ...colors.border,
+      accent: colors.common.accent,
+      invertAccent: colors.common.invertAccent,
+      highlight: colors.common.highlight,
+      transparent: "transparent",
+    },
+  },
+});
+
+const radiusProperties = defineProperties({
+  properties: {
+    borderRadius: primitives.radius,
+    borderTopLeftRadius: primitives.radius,
+    borderTopRightRadius: primitives.radius,
+    borderBottomLeftRadius: primitives.radius,
+    borderBottomRightRadius: primitives.radius,
+  },
+});
+
+const typographyProperties = defineProperties({
+  properties: {
+    fontFamily: primitives.font.family,
+    fontWeight: primitives.font.weight,
+    fontSize: primitives.font.size,
+    lineHeight: primitives.font.lineHeight,
+    letterSpacing: primitives.font.letterSpacing,
+  },
+});
+
+const strokeProperties = defineProperties({
+  properties: {
+    borderWidth: primitives.stroke,
+  },
+});
+
+const layoutProperties = defineProperties({
+  properties: {
+    display: ["none", "flex", "inline-flex", "block", "inline-block", "grid"],
+    flexDirection: ["row", "column", "row-reverse", "column-reverse"],
+    alignItems: ["flex-start", "center", "flex-end", "stretch", "baseline"],
+    justifyContent: [
+      "flex-start",
+      "center",
+      "flex-end",
+      "space-between",
+      "space-around",
+      "space-evenly",
+    ],
+    flexWrap: ["wrap", "nowrap", "wrap-reverse"],
+    textAlign: ["left", "center", "right"],
+  },
+});
+
+export const sprinkles = createSprinkles(
+  spaceProperties,
+  colorProperties,
+  radiusProperties,
+  typographyProperties,
+  strokeProperties,
+  layoutProperties,
+);
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];

package/templates/ecom/src/design/themes/dark.css.ts

@@ -0,0 +1,36 @@
+import { createTheme } from "@vanilla-extract/css";
+import { colors } from "../contract.css";
+import { primitives } from "../primitives.css";
+
+/**
+ * Dark palette. Fills the same contract slots as light.css.ts (surface and
+ * content swap ends of the grey ramp).
+ *
+ * @todo: tune these mappings to your brand.
+ */
+export const darkTheme = createTheme(colors, {
+  surface: {
+    extraLight: primitives.grey.black,
+    light: primitives.grey["900"],
+    subtle: primitives.grey["700"],
+    intense: primitives.grey["400"],
+  },
+  content: {
+    intense: primitives.grey["50"],
+    subtle: primitives.grey["300"],
+    invertIntense: primitives.grey["900"],
+    invertSubtle: primitives.grey["500"],
+  },
+  border: {
+    thin: primitives.grey["700"],
+    subtle: primitives.grey["600"],
+    intense: primitives.grey["400"],
+  },
+  common: {
+    accent: primitives.accent["400"],
+    invertAccent: primitives.grey.black,
+    highlight: primitives.accent["400"],
+    error: primitives.status.error,
+    success: primitives.status.success,
+  },
+});

package/templates/ecom/src/design/themes/light.css.ts

@@ -0,0 +1,36 @@
+import { createTheme } from "@vanilla-extract/css";
+import { colors } from "../contract.css";
+import { primitives } from "../primitives.css";
+
+/**
+ * Light palette: maps each semantic slot to a primitive.
+ *
+ * @todo: tune these mappings to your brand. dark.css.ts must fill the same
+ * slots (the contract enforces it).
+ */
+export const lightTheme = createTheme(colors, {
+  surface: {
+    extraLight: primitives.grey.white,
+    light: primitives.grey["50"],
+    subtle: primitives.grey["200"],
+    intense: primitives.grey["400"],
+  },
+  content: {
+    intense: primitives.grey["900"],
+    subtle: primitives.grey["500"],
+    invertIntense: primitives.grey["50"],
+    invertSubtle: primitives.grey["300"],
+  },
+  border: {
+    thin: primitives.grey["200"],
+    subtle: primitives.grey["300"],
+    intense: primitives.grey["400"],
+  },
+  common: {
+    accent: primitives.accent["600"],
+    invertAccent: primitives.grey.white,
+    highlight: primitives.accent["600"],
+    error: primitives.status.error,
+    success: primitives.status.success,
+  },
+});

package/templates/ecom/src/design/tokens.ts

@@ -0,0 +1,8 @@
+// Barrel for the design system. Import tokens from here rather than reaching
+// into individual files.
+export { colors } from "./contract.css";
+export { primitives } from "./primitives.css";
+export { text } from "./recipes/typography.css";
+export { type Sprinkles, sprinkles } from "./sprinkles.css";
+export { darkTheme } from "./themes/dark.css";
+export { lightTheme } from "./themes/light.css";

package/templates/ecom/src/helpers.ts

@@ -0,0 +1,4 @@
+import { generateHelpers } from "skybridge/web";
+import type { AppType } from "./server.js";
+
+export const { useToolInfo, useCallTool } = generateHelpers<AppType>();

package/templates/ecom/src/index.css

@@ -0,0 +1,9 @@
+@import "./design/fonts.css";
+
+/* The view mounts in a host iframe whose <body> keeps the user-agent default
+   margin (~8px). Zero it out so the surface paints edge to edge. */
+html,
+body {
+  margin: 0;
+  padding: 0;
+}

package/templates/ecom/src/lib/cx.ts

@@ -0,0 +1,9 @@
+/**
+ * Zero-dep class-name joiner. vanilla-extract's `recipe`/`style` return plain
+ * strings, so merging a recipe class with an optional consumer `className`
+ * just needs string concatenation that tolerates `undefined`/`false`/`null`.
+ *
+ *   className={cx(text({ style: "bodyM" }), sprinkles({ color: "accent" }))}
+ */
+export const cx = (...classes: (string | false | null | undefined)[]) =>
+  classes.filter(Boolean).join(" ");

package/templates/ecom/src/lib/format.ts

@@ -0,0 +1,9 @@
+import type { Price } from "../types.js";
+
+// Pass useUser().locale from the view; omit for the runtime default.
+export function formatPrice(price: Price, locale?: string): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: price.currency,
+  }).format(price.amount);
+}

package/templates/ecom/src/server.ts

@@ -0,0 +1,43 @@
+import { existsSync } from "node:fs";
+import { McpServer } from "skybridge/server";
+import { CAROUSEL_RANGE, MIN_SEARCH_ITERATIONS } from "./config.js";
+import {
+  renderCarouselDefinition,
+  renderCarouselHandler,
+} from "./tools/render-carousel.js";
+import {
+  searchProductsDefinition,
+  searchProductsHandler,
+} from "./tools/search-products.js";
+
+// Load .env into process.env when present (native to Node, no dependency).
+if (existsSync(".env")) {
+  process.loadEnvFile();
+}
+
+const server = new McpServer(
+  {
+    // @todo: name and version your app.
+    name: "skybridge-ecom",
+    version: "0.0.1",
+  },
+  {
+    // @todo: adapt this server-wide prompt to your catalog.
+    instructions: `\
+Two phases:
+
+SEARCH: Call search-products ${MIN_SEARCH_ITERATIONS}+ times before presenting—never off one call. \
+Vary the keyword, apply filters from a prior response, or page deeper. \
+Stay silent while searching: emit NO text between calls. Speak only \
+once the carousel renders. Never call a category unavailable before searching.
+
+RENDER: After curating, call render-carousel with the chosen product IDs (aim for ${CAROUSEL_RANGE}). \
+Speak only once it renders, then recommend in carousel order.`,
+  },
+)
+  .registerTool(searchProductsDefinition, searchProductsHandler)
+  .registerTool(renderCarouselDefinition, renderCarouselHandler);
+
+export default await server.run();
+
+export type AppType = typeof server;