create-skybridge 0.0.0-dev.d5f8d0a → 0.0.0-dev.d60c856

package/template/src/views/onboarding.tsx

@@ -0,0 +1,63 @@
+import "@/index.css";
+
+import { useState } from "react";
+import { useLayout } from "skybridge/web";
+import Nav from "./components/nav.js";
+import Progress from "./components/progress.js";
+import Outro from "./components/steps/outro.js";
+import State from "./components/steps/state.js";
+import ToolCall from "./components/steps/tool-call.js";
+import ToolOutput from "./components/steps/tool-output.js";
+import { useMascot } from "./use-mascot.js";
+
+const STEPS = [
+  { label: "Reading tool output", Component: ToolOutput },
+  { label: "Sharing view state", Component: State },
+  { label: "Calling tools", Component: ToolCall },
+  { label: "Examples & docs", Component: Outro },
+] as const;
+
+export default function Onboarding() {
+  // useLayout: read host layout info (theme, display mode, locale, ...).
+  const { theme } = useLayout();
+
+  const [step, setStep] = useState(0);
+  const { img } = useMascot();
+
+  return (
+    <div
+      className={`${theme === "dark" ? "dark" : ""} mx-auto w-full max-w-4xl border border-border overflow-hidden bg-background text-foreground`}
+    >
+      <div className="min-h-136 md:min-h-95 flex flex-col items-center gap-6 p-6 bg-linear-to-br from-purple-50 via-white to-cyan-50 dark:from-purple-950/30 dark:via-zinc-950 dark:to-cyan-900/30 bg-size-[200%_200%] animate-aurora md:flex-row md:items-stretch">
+        <div className="shrink-0 self-center animate-float">
+          <img
+            src={img}
+            alt="Skybridge mascot"
+            className="h-32 w-32 md:h-50 md:w-50 object-contain animate-twirl"
+          />
+        </div>
+        <div className="flex w-full flex-1 flex-col gap-6">
+          <Progress
+            steps={STEPS.map(({ label }) => label)}
+            current={step}
+            onSelect={setStep}
+          />
+          <div className="grid flex-1">
+            {STEPS.map(({ label, Component }, i) => (
+              <div
+                key={label}
+                className={`col-start-1 row-start-1 flex flex-col gap-6 ${
+                  step === i ? "" : "invisible pointer-events-none"
+                }`}
+                aria-hidden={step !== i}
+              >
+                <Component />
+              </div>
+            ))}
+          </div>
+          <Nav current={step} total={STEPS.length} onChange={setStep} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/views/use-mascot.ts

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useViewState } from "skybridge/web";
+import beret from "./images/mascot/beret.png";
+import chapka from "./images/mascot/chapka.png";
+import cowboyHat from "./images/mascot/cowboy-hat.png";
+import fez from "./images/mascot/fez.png";
+import jesterHat from "./images/mascot/jester-hat.png";
+import mitre from "./images/mascot/mitre.png";
+import nonLa from "./images/mascot/non-la.png";
+import original from "./images/mascot/original.png";
+import propellerBeanie from "./images/mascot/propeller-beanie.png";
+import skiMask from "./images/mascot/ski-mask.png";
+import sombrero from "./images/mascot/sombrero.png";
+import topHat from "./images/mascot/top-hat.png";
+import vikingHelmet from "./images/mascot/viking-helmet.png";
+
+const Hats = {
+  beret,
+  chapka,
+  "cowboy hat": cowboyHat,
+  fez,
+  "jester hat": jesterHat,
+  mitre,
+  "nón lá": nonLa,
+  "propeller beanie": propellerBeanie,
+  "ski mask": skiMask,
+  sombrero,
+  "top hat": topHat,
+  "viking helmet": vikingHelmet,
+} as const;
+
+type HatLabel = keyof typeof Hats;
+
+const LABELS = Object.keys(Hats) as HatLabel[];
+
+export function useMascot() {
+  // useViewState: persist UI state on the host and surface it to the model.
+  const [state, setState] = useViewState<{ hat?: HatLabel }>({});
+  const { hat } = state;
+  const img = hat ? Hats[hat] : original;
+
+  // Preload all hats once so swaps are instant.
+  useEffect(() => {
+    for (const src of Object.values(Hats)) {
+      new Image().src = src;
+    }
+  }, []);
+
+  return {
+    img,
+    hat,
+    changeHat: () => {
+      setState((prev) => {
+        const currentIndex = prev.hat ? LABELS.indexOf(prev.hat) : -1;
+        const next = LABELS[(currentIndex + 1) % LABELS.length];
+        return { ...prev, hat: next };
+      });
+    },
+  };
+}

package/template/src/vite-manifest.d.ts

@@ -0,0 +1,4 @@
+// Typed shim for the Vite manifest emitted by `skybridge build`. The actual
+// `vite-manifest.js` is generated alongside this file and gitignored.
+declare const manifest: Record<string, { file: string }>;
+export default manifest;

package/template/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "skybridge/tsconfig",
+
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "include": ["src", ".skybridge/**/*.d.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,14 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { skybridge } from "skybridge/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [skybridge(), react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});