@symbiote-native/brightness 1.0.0 → 3.0.0

package/README.md

@@ -20,6 +20,10 @@ depended on directly and never the `expo` meta-package, why the upstream JS is h
 npm install @symbiote-native/brightness
 ```
 
+Scaffolding or extending a SymbioteNative app? `npx @symbiote-native/cli new --brightness` (or
+`add --brightness` in an existing app) installs and wires this for you — see
+[`@symbiote-native/cli`](../cli).
+
 `expo-brightness` and `expo-modules-core` come along as regular, pinned dependencies — never
 install either yourself, and never add the `expo` meta-package to this project (it bundles its own
 Metro/Babel pipeline that conflicts with this project's own).
@@ -72,7 +76,6 @@ verbatim by every adapter.
 ```tsx
 // React — trimmed from examples/expo-react/screens/BrightnessScreen.tsx
 import { useEffect, useState } from 'react';
-import { Pressable, Text, View } from '@symbiote-native/react';
 import {
   addBrightnessListener,
   getBrightnessAsync,
@@ -94,18 +97,18 @@ function BrightnessScreen() {
   }, []);
 
   return (
-    <View>
-      <Text>
+    <view>
+      <text>
         {brightness === null ? 'checking…' : `${Math.round(brightness * 100)}%`}
-      </Text>
-      <Pressable onPress={() => setBrightnessAsync(0.5)}>
-        <Text>Set to 50%</Text>
-      </Pressable>
-      <Text>{permissionStatus?.status ?? 'checking…'}</Text>
-      <Pressable onPress={() => requestPermission()}>
-        <Text>Request permission</Text>
-      </Pressable>
-    </View>
+      </text>
+      <pressable onPress={() => setBrightnessAsync(0.5)}>
+        <text>Set to 50%</text>
+      </pressable>
+      <text>{permissionStatus?.status ?? 'checking…'}</text>
+      <pressable onPress={() => requestPermission()}>
+        <text>Request permission</text>
+      </pressable>
+    </view>
   );
 }
 ```
@@ -114,7 +117,6 @@ function BrightnessScreen() {
 <!-- Vue — trimmed from examples/expo-vue-sfc/screens/BrightnessScreen.vue -->
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
-import { Pressable, Text, View } from '@symbiote-native/vue';
 import {
   addBrightnessListener,
   getBrightnessAsync,
@@ -139,25 +141,24 @@ onUnmounted(() => subscription?.remove());
 </script>
 
 <template>
-  <View>
-    <Text>{{
+  <view>
+    <text>{{
       brightness === null ? 'checking…' : `${Math.round(brightness * 100)}%`
-    }}</Text>
-    <Pressable @press="setBrightnessAsync(0.5)">
-      <Text>Set to 50%</Text>
-    </Pressable>
-    <Text>{{ permissionStatus?.status ?? 'checking…' }}</Text>
-    <Pressable @press="requestPermission()">
-      <Text>Request permission</Text>
-    </Pressable>
-  </View>
+    }}</text>
+    <pressable @press="setBrightnessAsync(0.5)">
+      <text>Set to 50%</text>
+    </pressable>
+    <text>{{ permissionStatus?.status ?? 'checking…' }}</text>
+    <pressable @press="requestPermission()">
+      <text>Request permission</text>
+    </pressable>
+  </view>
 </template>
 ```
 
 ```svelte
 <!-- Svelte — trimmed from examples/expo-svelte/screens/BrightnessScreen.svelte -->
 <script lang="ts">
-  import { Pressable, Text, View } from '@symbiote-native/svelte';
   import {
     addBrightnessListener,
     getBrightnessAsync,
@@ -173,27 +174,32 @@ onUnmounted(() => subscription?.remove());
 
   $effect(() => {
     void getBrightnessAsync().then(value => (brightness = value));
-    subscription = addBrightnessListener(event => (brightness = event.brightness));
+    subscription = addBrightnessListener(
+      event => (brightness = event.brightness),
+    );
     return () => subscription?.remove();
   });
 </script>
 
-<View>
-  <Text>{brightness === null ? 'checking…' : `${Math.round(brightness * 100)}%`}</Text>
-  <Pressable onPress={() => setBrightnessAsync(0.5)}>
-    <Text>Set to 50%</Text>
-  </Pressable>
-  <Text>{permissions.status?.status ?? 'checking…'}</Text>
-  <Pressable onPress={() => permissions.request()}>
-    <Text>Request permission</Text>
-  </Pressable>
-</View>
+<view>
+  <text
+    >{brightness === null
+      ? 'checking…'
+      : `${Math.round(brightness * 100)}%`}</text
+  >
+  <pressable onPress={() => setBrightnessAsync(0.5)}>
+    <text>Set to 50%</text>
+  </pressable>
+  <text>{permissions.status?.status ?? 'checking…'}</text>
+  <pressable onPress={() => permissions.request()}>
+    <text>Request permission</text>
+  </pressable>
+</view>
 ```
 
 ```tsx
 // Solid — trimmed from examples/expo-solid/screens/BrightnessScreen.tsx
 import { createSignal, onCleanup } from 'solid-js';
-import { Pressable, Text, View } from '@symbiote-native/solid';
 import {
   addBrightnessListener,
   getBrightnessAsync,
@@ -203,25 +209,30 @@ import { createPermissions } from '@symbiote-native/brightness/solid';
 
 function BrightnessScreen() {
   const [brightness, setBrightness] = createSignal<number | null>(null);
-  const { status: permissionStatus, request: requestPermission } = createPermissions();
+  const { status: permissionStatus, request: requestPermission } =
+    createPermissions();
 
   getBrightnessAsync().then(setBrightness);
-  const subscription = addBrightnessListener(event => setBrightness(event.brightness));
+  const subscription = addBrightnessListener(event =>
+    setBrightness(event.brightness),
+  );
   onCleanup(() => subscription.remove());
 
   return (
-    <View>
-      <Text>
-        {brightness() === null ? 'checking…' : `${Math.round(brightness()! * 100)}%`}
-      </Text>
-      <Pressable onPress={() => setBrightnessAsync(0.5)}>
-        <Text>Set to 50%</Text>
-      </Pressable>
-      <Text>{permissionStatus()?.status ?? 'checking…'}</Text>
-      <Pressable onPress={() => requestPermission()}>
-        <Text>Request permission</Text>
-      </Pressable>
-    </View>
+    <view>
+      <text>
+        {brightness() === null
+          ? 'checking…'
+          : `${Math.round(brightness()! * 100)}%`}
+      </text>
+      <pressable onPress={() => setBrightnessAsync(0.5)}>
+        <text>Set to 50%</text>
+      </pressable>
+      <text>{permissionStatus()?.status ?? 'checking…'}</text>
+      <pressable onPress={() => requestPermission()}>
+        <text>Request permission</text>
+      </pressable>
+    </view>
   );
 }
 ```
@@ -229,7 +240,7 @@ function BrightnessScreen() {
 ```ts
 // Angular — trimmed from examples/expo-angular/src/screens/BrightnessScreen.ts
 import { Component, inject, signal } from '@angular/core';
-import { Pressable, Text, View } from '@symbiote-native/angular';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
 import {
   PermissionsService,
   addBrightnessListener,
@@ -240,18 +251,18 @@ import {
 @Component({
   selector: 'BrightnessScreen',
   standalone: true,
-  imports: [Pressable, Text, View],
+  imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <View>
-      <Text>{{ brightnessLabel() }}</Text>
-      <Pressable (press)="setBrightnessAsync(0.5)"
-        ><Text>Set to 50%</Text></Pressable
+    <view>
+      <text>{{ brightnessLabel() }}</text>
+      <pressable (press)="setBrightnessAsync(0.5)"
+        ><text>Set to 50%</text></pressable
       >
-      <Text>{{ permissionStatus()?.status ?? 'checking…' }}</Text>
-      <Pressable (press)="permissionsService.request()"
-        ><Text>Request permission</Text></Pressable
+      <text>{{ permissionStatus()?.status ?? 'checking…' }}</text>
+      <pressable (press)="permissionsService.request()"
+        ><text>Request permission</text></pressable
       >
-    </View>
+    </view>
   `,
 })
 export class BrightnessScreen {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/brightness",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "expo-brightness wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Screen brightness get/set, Android-only system-brightness-mode control, an iOS-only brightness-change listener, and permission get/request.",
   "license": "MIT",
   "repository": {
@@ -80,12 +80,12 @@
     "solid-js": ">=1.9.0",
     "svelte": ">=5.56.0",
     "vue": ">=3.5.0",
-    "@symbiote-native/angular": "^1.0.0",
-    "@symbiote-native/engine": "^0.4.0",
-    "@symbiote-native/react": "^1.0.0",
-    "@symbiote-native/solid": "^1.0.0",
-    "@symbiote-native/svelte": "^1.0.0",
-    "@symbiote-native/vue": "^1.0.0"
+    "@symbiote-native/angular": "^3.0.0",
+    "@symbiote-native/engine": "^1.0.0",
+    "@symbiote-native/react": "^3.0.0",
+    "@symbiote-native/solid": "^3.0.0",
+    "@symbiote-native/svelte": "^3.0.0",
+    "@symbiote-native/vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "@symbiote-native/angular": {
@@ -133,13 +133,13 @@
     "solid-js": "^1.9.14",
     "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/angular": "1.0.0",
-    "@symbiote-native/engine": "0.4.0",
-    "@symbiote-native/react": "1.0.0",
-    "@symbiote-native/solid": "1.0.0",
-    "@symbiote-native/svelte": "1.0.0",
-    "@symbiote-native/test-utils": "0.3.0",
-    "@symbiote-native/vue": "1.0.0"
+    "@symbiote-native/angular": "3.0.0",
+    "@symbiote-native/engine": "1.0.0",
+    "@symbiote-native/react": "3.0.0",
+    "@symbiote-native/solid": "3.0.0",
+    "@symbiote-native/svelte": "3.0.0",
+    "@symbiote-native/test-utils": "0.3.1",
+    "@symbiote-native/vue": "3.0.0"
   },
   "scripts": {
     "typecheck": "tsc --build",