craft-native 0.0.209 → 0.0.210

package/dist/android/templates/CraftNativeShell.kt.template

@@ -389,6 +389,10 @@ internal object CraftNativePrelude {
         routePrelude: String,
     ): String = """
         $routePrelude
+        // JavaScriptSandbox has no DOM window, but browser-safe SDK bridges
+        // address the host through `window.craft`. Keep native screens
+        // compatible without pretending a document exists.
+        if (typeof globalThis.window === 'undefined') globalThis.window = globalThis;
         (function() {
           var forward = null;
           var queued = [];
@@ -567,7 +571,7 @@ internal object CraftNativePrelude {
  * The bar above a screen (back, title, the screen's buttons) and the tab bar
  * below it, in plain Android views. A screen sets its bar with
  * `craft.navigation.setOptions` (title, largeTitle, hidden, rightButtons,
- * tabBarHidden); the tabs come from the app's `tabs`.
+ * tabAccessory, tabBarHidden); the tabs come from the app's `tabs`.
  */
 internal class CraftNativeChrome(context: Context, private val tabs: List<CraftNativeTab>) : LinearLayout(context) {
     val content = FrameLayout(context)

package/dist/android/templates/MainActivityNative.kt.template

@@ -718,12 +718,15 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         val explicitRegion = region(pendingProps.optJSONObject("region"))
         val initialRegion = region(pendingProps.optJSONObject("initialRegion"))
         if (explicitRegion != null) {
-            moveCamera(explicitRegion)
+            // A controlled region is an exact camera request. The padding
+            // used for fitToBounds is framing chrome, not part of the region
+            // contract, and would otherwise zoom every Android screen out.
+            moveCamera(explicitRegion, padding = 0)
             initialCameraKey = null
         } else if (initialRegion != null) {
             val key = "region:${pendingProps.optJSONObject("initialRegion")}"
             if (initialCameraKey != key) {
-                moveCamera(initialRegion)
+                moveCamera(initialRegion, padding = 0)
                 initialCameraKey = key
             }
         } else if (craftNativeBoolean(pendingProps.opt("fitToBounds"))) {
@@ -745,9 +748,9 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         }
     }
 
-    private fun moveCamera(bounds: LatLngBounds) {
+    private fun moveCamera(bounds: LatLngBounds, padding: Int = 24) {
         post {
-            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 24))
+            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, padding))
         }
     }
 
@@ -6275,7 +6278,7 @@ class MainActivity : AppCompatActivity() {
     private fun configureTextStyle(view: TextView, style: JSONObject) {
         view.setTextColor(color(craftNativeOptionalString(style.opt("color")).orEmpty(), defaultTextColor))
         view.setTextSize(TypedValue.COMPLEX_UNIT_SP, craftNativeFiniteFloat(style, "fontSize", 16f))
-        val fontWeight = style.opt("fontWeight") as? String
+        val fontWeight = craftNativeFontWeight(style.opt("fontWeight"))
         val weight = when (fontWeight) {
             "bold" -> 700
             "100", "200", "300", "400", "500", "600", "700", "800", "900" -> style.optInt("fontWeight")

package/dist/cli.js

@@ -3424,7 +3424,7 @@ function pinCraftNativeDependency(packagePath, craftVersion) {
 `);
 }
 // package.json
-var version = "0.0.209";
+var version = "0.0.210";
 
 // bin/cli.ts
 var spawnedFrom = process6.env[CRAFT_CLI_SPAWN_MARKER];

package/dist/components/index.d.ts

@@ -245,7 +245,7 @@ export interface TextStyleProps {
     /** Font style */
     fontStyle?: 'normal' | 'italic';
     /** Font weight */
-    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontWeight?: number | 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
     /** Letter spacing */
     letterSpacing?: number;
     /** Line height */
@@ -287,6 +287,8 @@ export interface ImageStyleProps {
  * Combined Image style type.
  */
 export type ImageStyle = ViewStyle & ImageStyleProps;
+/** A native style may be nested or conditionally omitted in any component's `style` prop. */
+export type StyleValue<T> = T | StyleValue<T>[] | null | false | undefined;
 /**
  * Base props for all components.
  */
@@ -320,7 +322,7 @@ export interface AccessibilityState {
  */
 export interface ViewProps extends BaseProps {
     /** Style object or array */
-    style?: ViewStyle | ViewStyle[];
+    style?: StyleValue<ViewStyle>;
     /** Press handler */
     onPress?: () => void;
     /** DOM-compatible press alias accepted by native hosts. */
@@ -356,19 +358,23 @@ export interface RefreshControlProps extends BaseProps {
  */
 export interface TextProps extends BaseProps {
     /** Style object or array */
-    style?: TextStyle | TextStyle[];
+    style?: StyleValue<TextStyle>;
     /** Number of lines before truncation */
     numberOfLines?: number;
     /** Ellipsize mode */
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     /** Press handler */
     onPress?: () => void;
+    /** DOM-compatible press alias accepted by native hosts. */
+    onClick?: () => void;
     /** Long press handler */
     onLongPress?: () => void;
 }
 /** Native button/link action props. */
 export interface ButtonProps extends BaseProps {
     title?: string;
+    /** Text and layout styling applied by the native button hosts. */
+    style?: StyleValue<TextStyle>;
     onPress?: () => void;
     onClick?: () => void;
     disabled?: boolean;
@@ -393,10 +399,17 @@ export interface TouchableHighlightProps extends ViewProps {
 /**
  * Image source type.
  */
-export type ImageSource = {
+export type ImageSource = string | {
     uri: string;
     headers?: Record<string, string>;
 };
+export interface ImageErrorEvent {
+    nativeEvent: {
+        error: {
+            message: string;
+        };
+    };
+}
 /**
  * Image component props.
  */
@@ -404,7 +417,7 @@ export interface ImageProps extends BaseProps {
     /** Image source */
     source: ImageSource;
     /** Style object or array */
-    style?: ImageStyle | ImageStyle[];
+    style?: StyleValue<ImageStyle>;
     /** Resize mode */
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
     /** Load start handler */
@@ -413,19 +426,21 @@ export interface ImageProps extends BaseProps {
     onLoad?: () => void;
     /** Load end handler */
     onLoadEnd?: () => void;
-    /** Error handler */
-    onError?: (error: Error) => void;
+    /** Error handler; native failures are exposed as nativeEvent.error.message. */
+    onError?: (event: ImageErrorEvent) => void;
     /** Default source while loading */
     defaultSource?: ImageSource;
     /** Alt text for accessibility */
     alt?: string;
 }
 export interface IconProps extends BaseProps {
+    style?: StyleValue<TextStyle>;
     name?: string;
     symbol?: string;
     color?: string;
 }
 export interface VideoProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     source?: string | {
         uri: string;
     };
@@ -472,6 +487,7 @@ export interface MapRegion {
     };
 }
 export interface MapProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     region?: MapRegion;
     /** Initial camera region; applied once, then controlled by subsequent props. */
     initialRegion?: MapRegion;
@@ -512,7 +528,7 @@ export interface ImageBackgroundProps extends ImageProps {
 }
 /** Shared paint and accessibility props for DOM-free native SVG nodes. */
 export interface SvgPaintProps extends BaseProps {
-    style?: ViewStyle | ViewStyle[];
+    style?: StyleValue<ViewStyle>;
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
@@ -629,7 +645,7 @@ export interface PressableProps extends ViewProps {
  */
 export interface TextInputProps extends BaseProps {
     /** Style object or array */
-    style?: TextStyle | TextStyle[];
+    style?: StyleValue<TextStyle>;
     /** Current value */
     value?: string;
     /** Default value */
@@ -680,6 +696,7 @@ export interface TextInputProps extends BaseProps {
 export type KeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'number-pad' | 'decimal-pad' | 'url' | 'web-search' | 'visible-password';
 export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'join' | 'route' | 'continue' | 'emergency-call' | 'default';
 export interface SwitchProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     /** Controlled boolean state; malformed native bridge values stay off. */
     value?: boolean;
     onValueChange?: (value: boolean) => void;
@@ -693,6 +710,7 @@ export interface SwitchProps extends BaseProps {
     ios_backgroundColor?: string;
 }
 export interface CheckboxProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     /** Controlled boolean state; malformed native bridge values stay off. */
     value?: boolean;
     checked?: boolean;
@@ -704,6 +722,7 @@ export interface CheckboxProps extends BaseProps {
     color?: string;
 }
 export interface SliderProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     value?: number;
     minimumValue?: number;
     maximumValue?: number;
@@ -722,6 +741,7 @@ export interface PickerOption {
     value: string | number;
 }
 export interface PickerProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     /** Typed options; child options remain supported when omitted. */
     items?: PickerOption[];
     selectedValue?: string | number;
@@ -735,7 +755,8 @@ export interface DatePickerChange {
     timestamp: number;
 }
 export interface DatePickerProps extends BaseProps {
-    mode?: 'date' | 'time' | 'datetime' | 'countdown';
+    style?: StyleValue<ViewStyle>;
+    mode?: 'date' | 'time' | 'datetime' | 'datetime-local' | 'countdown';
     value?: string | number;
     minimumDate?: string | number;
     maximumDate?: string | number;
@@ -745,6 +766,7 @@ export interface DatePickerProps extends BaseProps {
     disabled?: boolean;
 }
 export interface ActivityIndicatorProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     color?: string;
     animating?: boolean;
     hidesWhenStopped?: boolean;
@@ -782,6 +804,7 @@ export interface SectionListSection<T> {
 export interface SectionListProps<T> extends ScrollViewProps {
 }
 export interface ModalProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     visible?: boolean;
     transparent?: boolean;
     animationType?: 'none' | 'fade' | 'slide';
@@ -893,9 +916,9 @@ export declare const StyleSheet: {
      */
     create<T extends Record<string, ViewStyle | TextStyle | ImageStyle>>(styles: T): T;
     /**
-     * Flatten an array of styles into a single object.
+     * Flatten nested style arrays and ignore falsy conditional entries.
      */
-    flatten<T>(style: T | T[] | undefined): T | undefined;
+    flatten<T>(style: StyleValue<T>): T | undefined;
     /**
      * Get the absolute fill style (full parent).
      */

package/dist/index.cjs

@@ -309,7 +309,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.209";
+var version = "0.0.210";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;
@@ -8625,10 +8625,19 @@ var StyleSheet = {
   flatten(style) {
     if (!style)
       return;
-    if (Array.isArray(style)) {
-      return Object.assign({}, ...style);
-    }
-    return style;
+    const flattened = {};
+    const merge = (value) => {
+      if (!value)
+        return;
+      if (Array.isArray(value)) {
+        value.forEach(merge);
+        return;
+      }
+      if (typeof value === "object")
+        Object.assign(flattened, value);
+    };
+    merge(style);
+    return flattened;
   },
   absoluteFill: {
     position: "absolute",

package/dist/index.js

@@ -57,7 +57,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.209";
+var version = "0.0.210";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;
@@ -8384,10 +8384,19 @@ var StyleSheet = {
   flatten(style) {
     if (!style)
       return;
-    if (Array.isArray(style)) {
-      return Object.assign({}, ...style);
-    }
-    return style;
+    const flattened = {};
+    const merge = (value) => {
+      if (!value)
+        return;
+      if (Array.isArray(value)) {
+        value.forEach(merge);
+        return;
+      }
+      if (typeof value === "object")
+        Object.assign(flattened, value);
+    };
+    merge(style);
+    return flattened;
   },
   absoluteFill: {
     position: "absolute",

package/dist/ios/templates/CraftApp.swift

@@ -928,10 +928,12 @@ struct CraftTabBarView: View {
                 bar
                 if let accessory = chrome.tabAccessory {
                     Button { CraftHybrid.shared.open(accessory.id) } label: {
-                        Image(systemName: accessory.symbol)
-                            .font(.system(size: iconSize))
-                            .frame(width: 62, height: 62)
-                            .background(.ultraThinMaterial, in: Circle())
+                        surface {
+                            Image(systemName: accessory.symbol)
+                                .font(.system(size: iconSize))
+                                .foregroundStyle(Color.primary)
+                                .frame(width: 62, height: 62)
+                        }
                             .overlay(alignment: .topTrailing) {
                                 if let badge = accessory.badge {
                                     Text(badge)
@@ -967,24 +969,27 @@ struct CraftTabBarView: View {
         chrome.layoutChanged(max(0, screen - proxy.frame(in: .global).minY))
     }
 
-    @ViewBuilder private var bar: some View {
+    private var bar: some View {
+        surface { items.padding(4) }
+    }
+
+    /// Both the tab capsule and its circular accessory use the same material,
+    /// outline and shadow. A square capsule forms the accessory's circle.
+    @ViewBuilder private func surface<Content: View>(@ViewBuilder content: () -> Content) -> some View {
 #if compiler(>=6.2)
         if #available(iOS 26.0, *) {
             GlassEffectContainer {
-                items
-                    .padding(4)
+                content()
                     .glassEffect(.regular.interactive(), in: .capsule)
             }
         } else {
-            items
-                .padding(4)
+            content()
                 .background(.ultraThinMaterial, in: Capsule())
                 .overlay(Capsule().strokeBorder(Color.white.opacity(0.35), lineWidth: 0.5))
                 .shadow(color: .black.opacity(0.12), radius: 18, y: 6)
         }
 #else
-        items
-            .padding(4)
+        content()
             .background(.ultraThinMaterial, in: Capsule())
             .overlay(Capsule().strokeBorder(Color.white.opacity(0.35), lineWidth: 0.5))
             .shadow(color: .black.opacity(0.12), radius: 18, y: 6)

package/dist/ios/templates/CraftNativeScreen.swift

@@ -4151,6 +4151,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let appVersion = Self.jsonString(info?["CFBundleShortVersionString"] as? String ?? "")
         let appBuild = Self.jsonString(info?["CFBundleVersion"] as? String ?? "")
         jsContext.evaluateScript("""
+            // JavaScriptCore has no DOM window, but browser-safe SDK bridges
+            // address the host through `window.craft`. Keep native screens
+            // compatible without pretending a document exists.
+            if (typeof globalThis.window === "undefined") { globalThis.window = globalThis; }
             globalThis.__stxNativeCallback = null;
             globalThis.__stxNativeBridge = {
                 platform: "ios",
@@ -4279,7 +4283,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     ///   `craft.secureStorage.set` wrote.
     /// - `craft.navigation.setOptions({ title, largeTitle, hidden, backTitle,
     ///   tabBarHidden, swipeBack, contentSwipeBack, tabSwipeEnabled,
-    ///   backgroundColor, navigationBarSolid, rightButtons })`;
+    ///   backgroundColor, navigationBarSolid, rightButtons, tabAccessory })`;
     ///   a right button's tap is the event `navButton`.
     ///
     /// A runtime that assigns `craft.storage` (or the others) afterwards keeps
@@ -5731,7 +5735,6 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 ? nil : number(props["activeOpacity"]) ?? 0.5
             pressable.pressBaseOpacity = number(style["opacity"]) ?? 1
             pressable.pressUnderlayColor = type == "TouchableHighlight" && !disabled ? color(props["underlayColor"]) : nil
-            pressable.pressBaseBackgroundColor = pressable.backgroundColor
         case "Switch":
             let toggle = result as! UISwitch
             toggle.isOn = props["value"] as? Bool ?? props["checked"] as? Bool ?? false
@@ -6689,6 +6692,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         updateDimension(width, constraint: &node.widthConstraint, anchor: view.widthAnchor)
         updateDimension(height, constraint: &node.heightConstraint, anchor: view.heightAnchor)
         view.backgroundColor = color(style["backgroundColor"]) ?? .clear
+        // Every flow container can receive press feedback, including ordinary
+        // Views. Capture its current authored fill before feedback cleanup or
+        // release restores it; otherwise avatars and button wrappers go clear.
+        (view as? CraftNativeFlowView)?.pressBaseBackgroundColor = view.backgroundColor
         // A field the style dresses itself (`border-0`, a border or a
         // background, as a search field inside its own pill is) draws no
         // system box of its own; a bare one keeps the rounded rectangle.
@@ -6940,7 +6947,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private func textFont(_ style: [String: Any], default fallback: UIFont) -> UIFont {
         let size = number(style["fontSize"]) ?? fallback.pointSize
         let weight: UIFont.Weight
-        switch style["fontWeight"] as? String {
+        switch craftNativeFontWeight(style["fontWeight"]) {
         case "100": weight = .ultraLight
         case "200": weight = .thin
         case "300": weight = .light
@@ -6962,7 +6969,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             ?? .systemFont(ofSize: scaledSize, weight: weight)
         if style["fontStyle"] as? String == "italic",
            let descriptor = font.fontDescriptor.withSymbolicTraits(.traitItalic) {
-            font = UIFont(descriptor: descriptor, size: size)
+            font = UIFont(descriptor: descriptor, size: scaledSize)
         }
         return font
     }
@@ -7162,7 +7169,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             || controlledVideo
         view.isAccessibilityElement = !container && role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Link", "Checkbox", "Image", "ImageBackground", "Video", "TextInput", "Picker", "DatePicker", "Switch", "Slider"].contains(type))
         view.accessibilityContainerType = container && (view.accessibilityLabel != nil || controlledVideo) ? .semanticGroup : .none
+        // Keep the interaction trait native controls expose. Rebuilding this
+        // set from the STX role alone otherwise turns a Slider, Picker,
+        // DatePicker, or Switch into a static VoiceOver item whenever the
+        // screen omits redundant accessibility metadata.
         var traits: UIAccessibilityTraits = []
+        switch type {
+        case "Slider", "Picker", "DatePicker": traits.insert(.adjustable)
+        case "Switch": traits.insert(.button)
+        default: break
+        }
         switch role ?? type.lowercased() {
         case "tablist": traits.insert(.tabBar)
         case "button", "checkbox": traits.insert(.button)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "craft-native",
-  "version": "0.0.209",
+  "version": "0.0.210",
   "type": "module",
   "description": "Build desktop apps with web languages - TypeScript SDK for Craft",
   "author": "Chris Breuer <chris@stacksjs.org>",