@symbiote-native/brightness 0.3.0 → 2.0.0

package/README.md

@@ -72,7 +72,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 +93,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 +113,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 +137,106 @@ 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 {
+    addBrightnessListener,
+    getBrightnessAsync,
+    setBrightnessAsync,
+    usePermissions,
+    type EventSubscription,
+  } from '@symbiote-native/brightness/svelte';
+
+  let brightness = $state<number | null>(null);
+  const permissions = usePermissions(); // boxed getter: permissions.status / .request()
+
+  let subscription: EventSubscription | undefined;
+
+  $effect(() => {
+    void getBrightnessAsync().then(value => (brightness = value));
+    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>
+```
+
+```tsx
+// Solid — trimmed from examples/expo-solid/screens/BrightnessScreen.tsx
+import { createSignal, onCleanup } from 'solid-js';
+import {
+  addBrightnessListener,
+  getBrightnessAsync,
+  setBrightnessAsync,
+} from '@symbiote-native/brightness';
+import { createPermissions } from '@symbiote-native/brightness/solid';
+
+function BrightnessScreen() {
+  const [brightness, setBrightness] = createSignal<number | null>(null);
+  const { status: permissionStatus, request: requestPermission } =
+    createPermissions();
+
+  getBrightnessAsync().then(setBrightness);
+  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>
+  );
+}
+```
+
 ```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,
@@ -168,18 +247,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 {
@@ -205,8 +284,9 @@ export class BrightnessScreen {
 }
 ```
 
-The real demo screens (`examples/expo-react/screens/BrightnessScreen.tsx` and its Vue/Angular
-twins in `examples/expo-vue-sfc`, `examples/expo-vue-tsx`, `examples/expo-angular`) additionally
+The real demo screens (`examples/expo-react/screens/BrightnessScreen.tsx` and its Vue/Svelte/
+Solid/Angular twins in `examples/expo-vue-sfc`, `examples/expo-vue-tsx`, `examples/expo-svelte`,
+`examples/expo-solid`, `examples/expo-angular`) additionally
 gate an Android-only system-brightness-mode card behind `Platform.OS === 'android'` — see
 [API](#api) below for that surface's full signatures.
 
@@ -315,8 +395,9 @@ ViewConfig. Native rendering itself is verified on-device (see the parent
 ## Known gaps
 
 - Not yet wired into the public, non-Expo `examples/react` canary — only in `examples/expo-react`
-  (and its Vue/Angular Expo twins, `examples/expo-vue-sfc`/`examples/expo-vue-tsx`/
-  `examples/expo-angular`, all of which already have full three-layer native wiring: Android
-  `MainApplication.kt` registration + `WRITE_SETTINGS`, plus the iOS Podfile/pod install).
+  (and its Vue/Svelte/Solid/Angular Expo twins, `examples/expo-vue-sfc`/`examples/expo-vue-tsx`/
+  `examples/expo-svelte`/`examples/expo-solid`/`examples/expo-angular`, all of which already have
+  full three-layer native wiring: Android `MainApplication.kt` registration + `WRITE_SETTINGS`,
+  plus the iOS Podfile/pod install).
 - Tests exercise the JS layer only (fake native module, `vitest`) — no on-device/simulator
   automated smoke test yet, only manual verification.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/brightness",
-  "version": "0.3.0",
+  "version": "2.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": {
@@ -13,6 +13,18 @@
     "url": "https://github.com/OneEyed1366/symbiote-native/issues"
   },
   "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-brightness",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "screen-brightness",
+    "brightness-mode"
+  ],
   "type": "module",
   "main": "./build/core/index.js",
   "module": "./build/core/index.js",
@@ -61,19 +73,19 @@
     "expo-modules-core": "57.0.5"
   },
   "peerDependencies": {
-    "@symbiote-native/angular": ">=0.6.2",
-    "@symbiote-native/engine": ">=0.1.7",
-    "@symbiote-native/react": ">=0.2.8",
-    "@symbiote-native/solid": ">=0.0.1",
-    "@symbiote-native/svelte": ">=0.1.0",
-    "@symbiote-native/vue": ">=0.3.8",
     "@angular/core": ">=20",
     "@vue/runtime-core": "^3.5.13",
     "react": ">=19.0.0",
     "react-native": ">=0.86",
     "solid-js": ">=1.9.0",
     "svelte": ">=5.56.0",
-    "vue": ">=3.5.0"
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^2.0.0",
+    "@symbiote-native/react": "^2.0.0",
+    "@symbiote-native/engine": "^0.5.0",
+    "@symbiote-native/svelte": "^2.0.0",
+    "@symbiote-native/solid": "^2.0.0",
+    "@symbiote-native/vue": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "@symbiote-native/angular": {
@@ -121,13 +133,13 @@
     "solid-js": "^1.9.14",
     "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/angular": "0.8.0",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/react": "0.4.0",
-    "@symbiote-native/solid": "0.1.0",
-    "@symbiote-native/svelte": "0.3.0",
-    "@symbiote-native/test-utils": "0.2.0",
-    "@symbiote-native/vue": "0.5.0"
+    "@symbiote-native/angular": "2.0.0",
+    "@symbiote-native/engine": "0.5.0",
+    "@symbiote-native/react": "2.0.0",
+    "@symbiote-native/solid": "2.0.0",
+    "@symbiote-native/svelte": "2.0.0",
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/vue": "2.0.0"
   },
   "scripts": {
     "typecheck": "tsc --build",