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

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/i18n.ts

@@ -0,0 +1,35 @@
+import { useUser } from "skybridge/web";
+
+// Centralized UI labels. The active locale comes from the host via useUser();
+// useLabels matches on the language subtag ("en-US" -> "en") and falls back to
+// English for anything unlisted.
+// @todo: adapt the English copy to your brand voice, and add a locale key (e.g.
+// `fr`) with the same shape for each language you want to support.
+const LABELS = {
+  en: {
+    outOfStock: "Out of stock",
+    combinationUnavailable: "Combination unavailable",
+    noProducts: "No products to show.",
+    carousel: "carousel",
+    products: "Products",
+    previous: "Previous",
+    next: "Next",
+    // Detail view.
+    reference: "Ref.",
+    viewOnSite: "View on site",
+    priceOnRequest: "Price on request",
+    specifications: "Specifications",
+    readMore: "Read more",
+    readLess: "Read less",
+  },
+} as const;
+
+const DEFAULT_LOCALE = "en";
+
+export type Labels = (typeof LABELS)[typeof DEFAULT_LOCALE];
+
+export function useLabels(): Labels {
+  const { locale } = useUser();
+  const lang = locale.split("-")[0] ?? DEFAULT_LOCALE;
+  return lang in LABELS ? LABELS[lang as keyof typeof LABELS] : LABELS.en;
+}

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);
+}