create-skybridge 2.0.0-alpha.ea364cb → 2.0.0-alpha.ff0caf0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "2.0.0-alpha.ea364cb",
+  "version": "2.0.0-alpha.ff0caf0",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",

package/templates/blank/package.json

@@ -12,7 +12,7 @@
     "deploy": "alpic deploy"
   },
   "dependencies": {
-    "skybridge": "^2.0.0-alpha.ea364cb",
+    "skybridge": "^2.0.0-alpha.ff0caf0",
     "vite": "^8.1.5"
   },
   "devDependencies": {

package/templates/demo/package.json

@@ -16,7 +16,7 @@
     "lucide-react": "^1.25.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "skybridge": "^2.0.0-alpha.ea364cb",
+    "skybridge": "^2.0.0-alpha.ff0caf0",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vite": "^8.1.5",

package/templates/demo/src/views/onboarding.tsx

@@ -1,7 +1,7 @@
 import "@/index.css";
 
 import { useState } from "react";
-import { useLayout } from "skybridge/web";
+import { useUser } from "skybridge/web";
 import Nav from "./components/nav.js";
 import Progress from "./components/progress.js";
 import Outro from "./components/steps/outro.js";
@@ -18,8 +18,8 @@ const STEPS = [
 ] as const;
 
 export default function Onboarding() {
-  // useLayout: read host layout info (theme, display mode, locale, ...).
-  const { theme } = useLayout();
+  // useUser: read user environment info (theme, locale, user agent).
+  const { theme } = useUser();
 
   const [step, setStep] = useState(0);
   const { img } = useMascot();

package/templates/ecom/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "skybridge": "^2.0.0-alpha.ea364cb",
+    "skybridge": "^2.0.0-alpha.ff0caf0",
     "vite": "^8.1.3",
     "zod": "^4.4.3"
   },

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "react";
-import { useLayout } from "skybridge/web";
+import { useUser } from "skybridge/web";
 import { darkTheme, lightTheme } from "../design/tokens";
 import { cx } from "../lib/cx";
 import { viewFrame } from "./view-frame.css";
@@ -10,8 +10,8 @@ import { viewFrame } from "./view-frame.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.
+ * It follows the host theme via useUser(). To lock the widget to one palette
+ * (e.g. always light), drop useUser and hardcode the theme class.
  *
  * Keep view entry files thin: render <ViewFrame> at the root and let this carry
  * the theme + base-style boilerplate.
@@ -19,7 +19,7 @@ import { viewFrame } from "./view-frame.css";
 type ViewFrameProps = HTMLAttributes<HTMLDivElement>;
 
 export function ViewFrame({ className, ...rest }: ViewFrameProps) {
-  const { theme } = useLayout();
+  const { theme } = useUser();
   const themeClass = theme === "dark" ? darkTheme : lightTheme;
 
   return <div {...rest} className={cx(themeClass, viewFrame, className)} />;