bleam 0.0.5 → 0.0.6

package/dist/ui.cjs

@@ -0,0 +1,113 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_native_runtime = require('./native-runtime-CsXnXkQn.cjs');
+let react_native = require("react-native");
+react_native = require_chunk.__toESM(react_native);
+
+//#region src/ui.tsx
+function textFromChildren(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children);
+	if (Array.isArray(children)) return children.filter((child) => typeof child === "string" || typeof child === "number").join("");
+}
+function styleFromProps(style) {
+	return react_native.StyleSheet.flatten(style);
+}
+function colorFromHex(hex) {
+	const value = hex.trim().replace(/^#/, "");
+	const normalized = value.length === 3 ? value.split("").map((part) => `${part}${part}`).join("") : value;
+	if (!/^[\da-f]{6}$/i.test(normalized)) return;
+	const number = Number.parseInt(normalized, 16);
+	const red = (number >> 16 & 255) / 255;
+	const green = (number >> 8 & 255) / 255;
+	const blue = (number & 255) / 255;
+	return UIColor.colorWithRedGreenBlueAlpha(red, green, blue, 1);
+}
+function colorFromStyle(value) {
+	return typeof value === "string" ? colorFromHex(value) : void 0;
+}
+function labelText(props) {
+	return props.text ?? textFromChildren(props.children) ?? "";
+}
+function buttonTitle(props) {
+	return props.title ?? textFromChildren(props.children) ?? "";
+}
+function defaultLabelColor(tone) {
+	if (tone === "secondary") return UIColor.secondaryLabelColor;
+	if (tone === "tertiary") return UIColor.tertiaryLabelColor;
+	return UIColor.labelColor;
+}
+function buttonConfiguration(variant) {
+	if (variant === "secondary") return UIButtonConfiguration.borderedButtonConfiguration();
+	if (variant === "plain") return UIButtonConfiguration.plainButtonConfiguration();
+	return UIButtonConfiguration.borderedProminentButtonConfiguration();
+}
+function buttonSize(size) {
+	if (size === "small") return UIButtonConfigurationSize.Small;
+	if (size === "large") return UIButtonConfigurationSize.Large;
+	return UIButtonConfigurationSize.Medium;
+}
+function fontFromStyle(style) {
+	if (typeof style?.fontSize !== "number") return;
+	if (style.fontWeight === "700" || style.fontWeight === "bold") return UIFont.boldSystemFontOfSize(style.fontSize);
+	return UIFont.systemFontOfSize(style.fontSize);
+}
+const Label = require_native_runtime.ensureNativeScript().defineUIKitView({
+	name: "Label",
+	layout: {
+		sizing: "intrinsic",
+		defaultSize: {
+			width: 1,
+			height: 24
+		}
+	},
+	create() {
+		const label = UILabel.new();
+		label.adjustsFontForContentSizeCategory = true;
+		return label;
+	},
+	update(label, props, _previousProps, ctx) {
+		const style = styleFromProps(props.style);
+		label.text = labelText(props);
+		label.textColor = colorFromStyle(style?.color) ?? defaultLabelColor(props.tone);
+		label.font = fontFromStyle(style) ?? UIFont.preferredFontForTextStyle(UIFontTextStyleBody);
+		label.numberOfLines = props.numberOfLines ?? 0;
+		if (style?.textAlign === "center") label.textAlignment = NSTextAlignment.Center;
+		else if (style?.textAlign === "right") label.textAlignment = NSTextAlignment.Right;
+		else label.textAlignment = NSTextAlignment.Left;
+		ctx?.invalidateLayout();
+	}
+});
+const Button = require_native_runtime.ensureNativeScript().defineUIKitView({
+	name: "Button",
+	layout: {
+		sizing: "intrinsic",
+		defaultSize: {
+			width: 1,
+			height: 34
+		}
+	},
+	create(ctx) {
+		const button = UIButton.buttonWithType(UIButtonType.System);
+		ctx.targetAction(button, UIControlEvents.TouchUpInside, () => {
+			ctx.emit("onPress");
+		});
+		return button;
+	},
+	update(button, props, _previousProps, ctx) {
+		const style = styleFromProps(props.style);
+		const configuration = buttonConfiguration(props.variant);
+		configuration.title = buttonTitle(props);
+		configuration.buttonSize = buttonSize(props.size);
+		configuration.showsActivityIndicator = props.loading ?? false;
+		const foregroundColor = colorFromStyle(style?.color);
+		if (foregroundColor) configuration.baseForegroundColor = foregroundColor;
+		const backgroundColor = colorFromStyle(style?.backgroundColor);
+		if (backgroundColor) configuration.baseBackgroundColor = backgroundColor;
+		button.configuration = configuration;
+		button.enabled = !(props.disabled || props.loading);
+		ctx?.invalidateLayout();
+	}
+});
+
+//#endregion
+exports.Button = Button;
+exports.Label = Label;

package/dist/ui.d.cts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import * as _nativescript_react_native0 from "@nativescript/react-native";
+
+//#region src/ui.d.ts
+type NativeStyle = ViewStyle & TextStyle;
+type ButtonVariant = 'primary' | 'secondary' | 'plain';
+type ButtonSize = 'regular' | 'small' | 'large';
+type ButtonProps = {
+  children?: ReactNode;
+  title?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<NativeStyle>;
+};
+type LabelTone = 'primary' | 'secondary' | 'tertiary';
+type LabelProps = {
+  children?: ReactNode;
+  text?: string;
+  tone?: LabelTone;
+  numberOfLines?: number;
+  style?: StyleProp<NativeStyle>;
+};
+declare const Label: _nativescript_react_native0.UIKitViewComponent<LabelProps, UILabel>;
+declare const Button: _nativescript_react_native0.UIKitViewComponent<ButtonProps, UIButton>;
+//#endregion
+export { Button, ButtonProps, ButtonSize, ButtonVariant, Label, LabelProps, LabelTone };

package/dist/ui.d.ts

@@ -0,0 +1,30 @@
+import * as _nativescript_react_native0 from "@nativescript/react-native";
+import { ReactNode } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+//#region src/ui.d.ts
+type NativeStyle = ViewStyle & TextStyle;
+type ButtonVariant = 'primary' | 'secondary' | 'plain';
+type ButtonSize = 'regular' | 'small' | 'large';
+type ButtonProps = {
+  children?: ReactNode;
+  title?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<NativeStyle>;
+};
+type LabelTone = 'primary' | 'secondary' | 'tertiary';
+type LabelProps = {
+  children?: ReactNode;
+  text?: string;
+  tone?: LabelTone;
+  numberOfLines?: number;
+  style?: StyleProp<NativeStyle>;
+};
+declare const Label: _nativescript_react_native0.UIKitViewComponent<LabelProps, UILabel>;
+declare const Button: _nativescript_react_native0.UIKitViewComponent<ButtonProps, UIButton>;
+//#endregion
+export { Button, ButtonProps, ButtonSize, ButtonVariant, Label, LabelProps, LabelTone };

package/dist/ui.js

@@ -0,0 +1,110 @@
+import { t as ensureNativeScript } from "./native-runtime-C85Nuc4F.js";
+import { StyleSheet } from "react-native";
+
+//#region src/ui.tsx
+function textFromChildren(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children);
+	if (Array.isArray(children)) return children.filter((child) => typeof child === "string" || typeof child === "number").join("");
+}
+function styleFromProps(style) {
+	return StyleSheet.flatten(style);
+}
+function colorFromHex(hex) {
+	const value = hex.trim().replace(/^#/, "");
+	const normalized = value.length === 3 ? value.split("").map((part) => `${part}${part}`).join("") : value;
+	if (!/^[\da-f]{6}$/i.test(normalized)) return;
+	const number = Number.parseInt(normalized, 16);
+	const red = (number >> 16 & 255) / 255;
+	const green = (number >> 8 & 255) / 255;
+	const blue = (number & 255) / 255;
+	return UIColor.colorWithRedGreenBlueAlpha(red, green, blue, 1);
+}
+function colorFromStyle(value) {
+	return typeof value === "string" ? colorFromHex(value) : void 0;
+}
+function labelText(props) {
+	return props.text ?? textFromChildren(props.children) ?? "";
+}
+function buttonTitle(props) {
+	return props.title ?? textFromChildren(props.children) ?? "";
+}
+function defaultLabelColor(tone) {
+	if (tone === "secondary") return UIColor.secondaryLabelColor;
+	if (tone === "tertiary") return UIColor.tertiaryLabelColor;
+	return UIColor.labelColor;
+}
+function buttonConfiguration(variant) {
+	if (variant === "secondary") return UIButtonConfiguration.borderedButtonConfiguration();
+	if (variant === "plain") return UIButtonConfiguration.plainButtonConfiguration();
+	return UIButtonConfiguration.borderedProminentButtonConfiguration();
+}
+function buttonSize(size) {
+	if (size === "small") return UIButtonConfigurationSize.Small;
+	if (size === "large") return UIButtonConfigurationSize.Large;
+	return UIButtonConfigurationSize.Medium;
+}
+function fontFromStyle(style) {
+	if (typeof style?.fontSize !== "number") return;
+	if (style.fontWeight === "700" || style.fontWeight === "bold") return UIFont.boldSystemFontOfSize(style.fontSize);
+	return UIFont.systemFontOfSize(style.fontSize);
+}
+const Label = ensureNativeScript().defineUIKitView({
+	name: "Label",
+	layout: {
+		sizing: "intrinsic",
+		defaultSize: {
+			width: 1,
+			height: 24
+		}
+	},
+	create() {
+		const label = UILabel.new();
+		label.adjustsFontForContentSizeCategory = true;
+		return label;
+	},
+	update(label, props, _previousProps, ctx) {
+		const style = styleFromProps(props.style);
+		label.text = labelText(props);
+		label.textColor = colorFromStyle(style?.color) ?? defaultLabelColor(props.tone);
+		label.font = fontFromStyle(style) ?? UIFont.preferredFontForTextStyle(UIFontTextStyleBody);
+		label.numberOfLines = props.numberOfLines ?? 0;
+		if (style?.textAlign === "center") label.textAlignment = NSTextAlignment.Center;
+		else if (style?.textAlign === "right") label.textAlignment = NSTextAlignment.Right;
+		else label.textAlignment = NSTextAlignment.Left;
+		ctx?.invalidateLayout();
+	}
+});
+const Button = ensureNativeScript().defineUIKitView({
+	name: "Button",
+	layout: {
+		sizing: "intrinsic",
+		defaultSize: {
+			width: 1,
+			height: 34
+		}
+	},
+	create(ctx) {
+		const button = UIButton.buttonWithType(UIButtonType.System);
+		ctx.targetAction(button, UIControlEvents.TouchUpInside, () => {
+			ctx.emit("onPress");
+		});
+		return button;
+	},
+	update(button, props, _previousProps, ctx) {
+		const style = styleFromProps(props.style);
+		const configuration = buttonConfiguration(props.variant);
+		configuration.title = buttonTitle(props);
+		configuration.buttonSize = buttonSize(props.size);
+		configuration.showsActivityIndicator = props.loading ?? false;
+		const foregroundColor = colorFromStyle(style?.color);
+		if (foregroundColor) configuration.baseForegroundColor = foregroundColor;
+		const backgroundColor = colorFromStyle(style?.backgroundColor);
+		if (backgroundColor) configuration.baseBackgroundColor = backgroundColor;
+		button.configuration = configuration;
+		button.enabled = !(props.disabled || props.loading);
+		ctx?.invalidateLayout();
+	}
+});
+
+//#endregion
+export { Button, Label };

package/metro-config.cjs

@@ -14,23 +14,28 @@ function getDefaultConfig(projectRoot) {
   const appRoot = process.env.BLEAM_PROJECT_ROOT ?? projectRoot
   const port = Number(process.env.BLEAM_DEV_PORT ?? 8081)
   const origin = process.env.BLEAM_DEV_ORIGIN ?? `http://localhost:${port}`
+  const platform = process.env.BLEAM_DEV_PLATFORM === 'ios' ? 'ios' : 'macos'
   const config = getExpoDefaultConfig(projectRoot)
   const upstreamEnhanceMiddleware = config.server.enhanceMiddleware
   const projectNodeModules = path.join(appRoot, 'node_modules')
   const runtimeNodeModules = path.dirname(packageRoot('react'))
-  const nodeModulesPaths = Array.from(new Set([
-    projectNodeModules,
-    bleamNodeModules,
-    runtimeNodeModules,
-    ...(config.resolver.nodeModulesPaths ?? []),
-  ]))
+  const nodeModulesPaths = Array.from(
+    new Set([
+      projectNodeModules,
+      bleamNodeModules,
+      runtimeNodeModules,
+      ...(config.resolver.nodeModulesPaths ?? []),
+    ]),
+  )
 
-  config.watchFolders = Array.from(new Set([
-    appRoot,
-    __dirname,
-    ...nodeModulesPaths,
-    ...(config.watchFolders ?? []),
-  ])).filter((directory) => fs.existsSync(directory))
+  config.watchFolders = Array.from(
+    new Set([
+      appRoot,
+      __dirname,
+      ...nodeModulesPaths,
+      ...(config.watchFolders ?? []),
+    ]),
+  ).filter((directory) => fs.existsSync(directory))
 
   config.resolver.nodeModulesPaths = nodeModulesPaths
 
@@ -55,7 +60,7 @@ function getDefaultConfig(projectRoot) {
         name: process.env.BLEAM_DEV_NAME ?? 'bleam-app',
         sdkVersion: process.env.BLEAM_DEV_SDK_VERSION ?? bleamVersion,
         runtimeVersion: process.env.BLEAM_DEV_RUNTIME_VERSION ?? bleamVersion,
-        platform: 'macos',
+        platform,
         bundleUrl: `${origin}/.expo/.virtual-metro-entry.bundle?platform=ios&dev=true&minify=false&runModule=true`,
         dev: true,
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bleam",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "packageManager": "yarn@1.22.22",
   "type": "module",
   "files": [
@@ -17,27 +17,26 @@
     "build": "tsdown",
     "typecheck": "tsc --noEmit -p tsconfig.build.json"
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "all",
-    "printWidth": 80,
-    "tabWidth": 2
-  },
   "devDependencies": {
+    "@nativescript/types-ios": "9.0.0",
     "@types/node": "^25.5.0",
-    "prettier": "^3.8.2",
+    "@types/ws": "^8.18.1",
     "tsdown": "^0.15.6"
   },
   "dependencies": {
+    "@biomejs/biome": "^2.2.0",
     "@expo/metro": "56.0.0",
+    "@nativescript-community/sqlite": "^3.5.9",
     "@nativescript/react-native": "9.0.0-preview.4",
-    "@types/react": "~19.2.14",
-    "expo": "56",
+    "@types/react": "~19.2.17",
+    "expo": "57",
     "react": "19.2.3",
-    "react-native": "0.85.3",
+    "react-native": "0.86.0",
     "tsx": "^4.21.0",
-    "typescript": "~6.0.3"
+    "typescript": "~6.0.3",
+    "ws": "^8.21.0",
+    "yocto-spinner": "^1.2.1",
+    "yoctocolors": "^2.1.2"
   },
   "expo": {
     "install": {
@@ -55,6 +54,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./ai": {
+      "types": "./dist/ai.d.ts",
+      "import": "./dist/ai.js",
+      "require": "./dist/ai.cjs"
+    },
+    "./animated": {
+      "types": "./dist/animated.d.ts",
+      "import": "./dist/animated.js",
+      "require": "./dist/animated.cjs"
+    },
     "./app": {
       "types": "./dist/app.d.ts",
       "import": "./dist/app.js",
@@ -65,6 +74,11 @@
       "import": "./dist/bundler.js",
       "require": "./dist/bundler.cjs"
     },
+    "./chrome": {
+      "types": "./dist/chrome.d.ts",
+      "import": "./dist/chrome.js",
+      "require": "./dist/chrome.cjs"
+    },
     "./config": {
       "types": "./dist/config.d.ts",
       "import": "./dist/config.js",
@@ -95,6 +109,26 @@
       "import": "./dist/runtime.js",
       "require": "./dist/runtime.cjs"
     },
+    "./schema": {
+      "types": "./dist/schema.d.ts",
+      "import": "./dist/schema.js",
+      "require": "./dist/schema.cjs"
+    },
+    "./state": {
+      "types": "./dist/state.d.ts",
+      "import": "./dist/state.js",
+      "require": "./dist/state.cjs"
+    },
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "import": "./dist/styles.js",
+      "require": "./dist/styles.cjs"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js",
+      "require": "./dist/ui.cjs"
+    },
     "./package.json": "./package.json",
     "./metro-config": {
       "require": "./metro-config.cjs"

package/templates/basic/app/index.tsx

@@ -1,18 +1,136 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { Toolbar, Window } from 'bleam/chrome'
+import { sx } from 'bleam/styles'
+import { Button } from 'bleam/ui'
+import { useState } from 'react'
+import { Text, View } from 'react-native'
 
 export default function App() {
+  const [count, setCount] = useState(0)
+
   return (
-    <View style={styles.container}>
-      <Text>Open up app/index.tsx to start working on your app!</Text>
+    <View style={sx('flex-1', 'bg-system')}>
+      <Window title="Bleam" titleVisibility="visible" />
+      <Toolbar toolbarStyle="unified" />
+
+      <View style={sx('flex-1', 'items-center', 'justify-center', 'p-6')}>
+        <View style={sx('flex-1', 'w-full', 'max-w-5xl', 'max-h-3xl')}>
+          <View style={sx('flex-1', 'items-center', 'justify-center', 'px-6')}>
+            <View style={sx('items-center', 'gap-8')}>
+              <View
+                style={sx('h-44', 'w-44', 'items-center', 'justify-center')}
+              >
+                <View
+                  style={sx(
+                    'absolute',
+                    'top-0',
+                    'h-24',
+                    'w-32',
+                    'rounded-2xl',
+                    'border',
+                    'border-tertiary-label',
+                    'bg-system',
+                    'items-center',
+                    'justify-center',
+                    'rotate-30',
+                  )}
+                >
+                  <Text
+                    style={sx(
+                      'text-3xl',
+                      'font-semibold',
+                      'text-system-cyan',
+                      '-rotate-30',
+                    )}
+                  >
+                    B
+                  </Text>
+                </View>
+
+                <View
+                  style={sx(
+                    'absolute',
+                    'bottom-2',
+                    'h-24',
+                    'w-32',
+                    'rounded-2xl',
+                    'border-2',
+                    'border-system-purple',
+                    'bg-secondary-system',
+                    'items-center',
+                    'justify-center',
+                    'rotate-30',
+                  )}
+                >
+                  <Text
+                    style={sx(
+                      'text-3xl',
+                      'font-bold',
+                      'text-system-purple',
+                      '-rotate-30',
+                    )}
+                  >
+                    JS
+                  </Text>
+                </View>
+              </View>
+
+              <View style={sx('items-center')}>
+                <Text
+                  style={sx(
+                    'text-5xl',
+                    'font-semibold',
+                    'tracking-tighter',
+                    'text-label',
+                    'text-center',
+                  )}
+                >
+                  Get started
+                </Text>
+                <Text
+                  style={sx(
+                    'mt-6',
+                    'text-lg',
+                    'text-secondary-label',
+                    'text-center',
+                  )}
+                >
+                  Edit{' '}
+                  <Text
+                    style={sx(
+                      'rounded-md',
+                      'italic',
+                      'px-2',
+                      'py-1',
+                      'text-label',
+                    )}
+                  >
+                    app/index.tsx
+                  </Text>{' '}
+                  and save to test{' '}
+                  <Text
+                    style={sx(
+                      'rounded-md',
+                      'italic',
+                      'px-2',
+                      'py-1',
+                      'text-label',
+                    )}
+                  >
+                    live reload
+                  </Text>
+                </Text>
+              </View>
+
+              <Button
+                title={`Count is ${count}`}
+                variant="secondary"
+                size="regular"
+                onPress={() => setCount((value) => value + 1)}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})

package/templates/basic/app.config.ts

@@ -1,3 +1,5 @@
-export default {
+import { appConfig } from 'bleam'
+
+export default appConfig({
   name: 'Bleam Basic',
-}
+})

package/dist/app.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app.d.cts","names":[],"sources":["../src/app.ts"],"sourcesContent":[],"mappings":";;;iBAGgB,WAAA,YAAuB"}

package/dist/app.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app.d.ts","names":[],"sources":["../src/app.ts"],"sourcesContent":[],"mappings":";;;iBAGgB,WAAA,YAAuB"}

package/dist/app.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app.js","names":[],"sources":["../src/app.ts"],"sourcesContent":["import { registerRootComponent } from 'expo'\nimport type { ComponentType } from 'react'\n\nexport function registerApp(component: ComponentType) {\n  registerRootComponent(component)\n}\n"],"mappings":";;;AAGA,SAAgB,YAAY,WAA0B;AACpD,uBAAsB,UAAU"}

package/dist/bundler.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundler.d.cts","names":[],"sources":["../src/bundler.ts"],"sourcesContent":[],"mappings":";UAAiB,gBAAA;EAAA,WAAA,EAAA,MAAgB;EAKhB,IAAA,CAAA,EAAA,MAAA;AAKjB;AAOiB,UAZA,eAAA,CAYY;EAKZ,GAAA,EAAA,MAAA;EACA,KAAA,EAAA,EAhBN,OAgBM,CAAA,IAAA,CAAA;;AAAmB,UAbnB,aAAA,CAamB;EAAO,WAAA,EAAA,MAAA;EAG1B,KAAA,EAAA,MAAO;EACN,QAAA,EAAA,OAAA;EAAwB,GAAA,EAAA,OAAA;;AAAD,UAVxB,YAAA,CAUwB;;;;UALxB,SAAA;iBACA,mBAAmB,QAAQ;;UAG3B,OAAA;kBACC,gBAAgB,QAAQ"}

package/dist/bundler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundler.d.ts","names":[],"sources":["../src/bundler.ts"],"sourcesContent":[],"mappings":";UAAiB,gBAAA;EAAA,WAAA,EAAA,MAAgB;EAKhB,IAAA,CAAA,EAAA,MAAA;AAKjB;AAOiB,UAZA,eAAA,CAYY;EAKZ,GAAA,EAAA,MAAA;EACA,KAAA,EAAA,EAhBN,OAgBM,CAAA,IAAA,CAAA;;AAAmB,UAbnB,aAAA,CAamB;EAAO,WAAA,EAAA,MAAA;EAG1B,KAAA,EAAA,MAAO;EACN,QAAA,EAAA,OAAA;EAAwB,GAAA,EAAA,OAAA;;AAAD,UAVxB,YAAA,CAUwB;;;;UALxB,SAAA;iBACA,mBAAmB,QAAQ;;UAG3B,OAAA;kBACC,gBAAgB,QAAQ"}