@symbiote-native/system-ui 0.0.1 → 0.2.0

package/README.md

@@ -90,9 +90,9 @@ export class RootComponent {
 
 There's no per-instance service to `inject()` in the Angular case — both functions are plain
 exports off the core package, called straight in the constructor or wherever the app's root is
-set up. These snippets are not yet demoed in a real canary screen — no `SystemUiScreen.*` exists
-yet in `examples/expo-*` — so treat them as realistic reference code, not a trimmed-down copy of
-a running demo.
+set up. These snippets mirror the real canary demo screens —
+`examples/expo-react/screens/SystemUiScreen.tsx`, `examples/expo-vue-sfc/screens/SystemUiScreen.vue`,
+`examples/expo-vue-tsx/screens/SystemUiScreen.tsx`, `examples/expo-angular/src/screens/SystemUiScreen.ts`.
 
 ## API
 

package/build/angular/index.js

@@ -1,4 +1,4 @@
 // @symbiote-native/system-ui/angular: the Angular entry over the framework-agnostic core.
 // Same reasoning as the React/Vue entries — no per-instance state or event stream to wrap in a
 // service, so this is a plain re-export.
-export * from '../core';
+export * from '../core/index.js';

package/build/core/index.js

@@ -1 +1 @@
-export { getBackgroundColorAsync, setBackgroundColorAsync } from './system-ui';
+export { getBackgroundColorAsync, setBackgroundColorAsync } from './system-ui.js';

package/build/core/system-ui.js

@@ -1,5 +1,5 @@
 import { Platform, processColor } from 'react-native';
-import { expoSystemUI } from './native-module';
+import { expoSystemUI } from './native-module.js';
 /**
  * Changes the root view background color. Call this outside of your component tree, e.g. in
  * the root file, since it affects the whole app.

package/build/react/index.js

@@ -3,4 +3,4 @@
 // @symbiote-native/sensors) — there is nothing for a hook to wrap, so this is a plain
 // re-export, mirroring how @symbiote-native/device's React entry passes its own free
 // functions through untouched.
-export * from '../core';
+export * from '../core/index.js';

package/build/svelte/index.d.ts

@@ -0,0 +1 @@
+export * from '../core';

package/build/svelte/index.js

@@ -0,0 +1,6 @@
+// @symbiote-native/system-ui/svelte: the Svelte entry over the framework-agnostic core. Both
+// exports are plain async functions with no per-instance state and no event stream (unlike
+// @symbiote-native/sensors) — there is nothing for a rune to wrap, so this is a plain re-export.
+// Svelte's lifecycle bucket is `runes/` (adapters/svelte/src/runes — never React's `hooks` or
+// Vue's `composables`), and this package has none to fill.
+export * from '../core/index.js';

package/build/vue/index.js

@@ -1,4 +1,4 @@
 // @symbiote-native/system-ui/vue: the Vue entry over the framework-agnostic core. Same
 // reasoning as the React entry — no per-instance state or event stream to wire onto Vue's
 // reactivity, so this is a plain re-export.
-export * from '../core';
+export * from '../core/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/system-ui",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "expo-system-ui wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, and Angular adapters. Sets and reads the root view's background color.",
   "license": "MIT",
   "repository": {
@@ -30,6 +30,10 @@
       "types": "./build/react/index.d.ts",
       "default": "./build/react/index.js"
     },
+    "./svelte": {
+      "types": "./build/svelte/index.d.ts",
+      "default": "./build/svelte/index.js"
+    },
     "./angular": {
       "types": "./build-ngc/angular/index.d.ts",
       "react-native": "./build-ngc/angular/index.js",
@@ -40,7 +44,10 @@
     "src",
     "build",
     "build-ngc",
-    "native-link.json"
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
   ],
   "publishConfig": {
     "access": "public"
@@ -50,15 +57,17 @@
     "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/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",
-    "vue": ">=3.5.0",
-    "@symbiote-native/angular": "0.6.1",
-    "@symbiote-native/react": "0.2.8",
-    "@symbiote-native/vue": "0.3.8"
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "@symbiote-native/angular": {
@@ -67,6 +76,9 @@
     "@symbiote-native/react": {
       "optional": true
     },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
     "@symbiote-native/vue": {
       "optional": true
     },
@@ -79,24 +91,29 @@
     "react": {
       "optional": true
     },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@angular/compiler": "^22",
-    "@angular/compiler-cli": "^22",
-    "@angular/core": "^22",
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
     "@types/node": "^26.0.0",
     "@types/react": "^19.2.0",
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
+    "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/angular": "0.6.1",
-    "@symbiote-native/react": "0.2.8",
-    "@symbiote-native/vue": "0.3.8",
+    "@symbiote-native/angular": "0.7.0",
+    "@symbiote-native/engine": "0.2.0",
+    "@symbiote-native/react": "0.3.0",
+    "@symbiote-native/svelte": "0.2.0",
     "@symbiote-native/test-utils": "0.1.6",
-    "@symbiote-native/engine": "0.1.7"
+    "@symbiote-native/vue": "0.4.0"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/src/svelte/index.ts

@@ -0,0 +1,6 @@
+// @symbiote-native/system-ui/svelte: the Svelte entry over the framework-agnostic core. Both
+// exports are plain async functions with no per-instance state and no event stream (unlike
+// @symbiote-native/sensors) — there is nothing for a rune to wrap, so this is a plain re-export.
+// Svelte's lifecycle bucket is `runes/` (adapters/svelte/src/runes — never React's `hooks` or
+// Vue's `composables`), and this package has none to fill.
+export * from '../core';

package/src/core/system-ui.test.ts

@@ -1,62 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-const FAKE_NATIVE_SYSTEM_UI = {
-  setBackgroundColorAsync: vi.fn(async () => undefined),
-  getBackgroundColorAsync: vi.fn(async () => '#000000'),
-};
-
-// The real ExpoSystemUI native module only exists on device — resolving it via
-// requireNativeModule() at import time would throw in this headless test run, so the
-// module-lookup file is faked in place of expo-modules-core's runtime resolution, the same
-// pattern packages/device/src/core/device.test.ts uses.
-vi.mock('./native-module', () => ({
-  expoSystemUI: FAKE_NATIVE_SYSTEM_UI,
-}));
-
-// react-native's real Platform module reads native constants that don't exist in this headless
-// run; processColor is stubbed to a simple, observable transform so the two branches
-// (color == null / Platform.OS === 'web' / native processColor) are each independently provable.
-vi.mock('react-native', () => ({
-  Platform: { OS: 'ios' },
-  processColor: vi.fn((color: string) => `processed(${color})`),
-}));
-
-const { getBackgroundColorAsync, setBackgroundColorAsync } = await import('./system-ui');
-const { Platform, processColor } = await import('react-native');
-
-afterEach(() => {
-  vi.clearAllMocks();
-  Platform.OS = 'ios';
-});
-
-describe('setBackgroundColorAsync', () => {
-  it('passes null straight through when color is null', async () => {
-    await setBackgroundColorAsync(null);
-
-    expect(processColor).not.toHaveBeenCalled();
-    expect(FAKE_NATIVE_SYSTEM_UI.setBackgroundColorAsync).toHaveBeenCalledWith(null);
-  });
-
-  it('runs a non-null color through processColor on native platforms', async () => {
-    await setBackgroundColorAsync('tomato');
-
-    expect(processColor).toHaveBeenCalledWith('tomato');
-    expect(FAKE_NATIVE_SYSTEM_UI.setBackgroundColorAsync).toHaveBeenCalledWith('processed(tomato)');
-  });
-
-  it('passes the raw color straight through on web, skipping processColor', async () => {
-    Platform.OS = 'web';
-
-    await setBackgroundColorAsync('tomato');
-
-    expect(processColor).not.toHaveBeenCalled();
-    expect(FAKE_NATIVE_SYSTEM_UI.setBackgroundColorAsync).toHaveBeenCalledWith('tomato');
-  });
-});
-
-describe('getBackgroundColorAsync', () => {
-  it('delegates to the native module', async () => {
-    await expect(getBackgroundColorAsync()).resolves.toBe('#000000');
-    expect(FAKE_NATIVE_SYSTEM_UI.getBackgroundColorAsync).toHaveBeenCalled();
-  });
-});