novahiz 0.2.2 → 0.2.5

package/bundled-skills/expo-native-ui/references/gradients.md

@@ -1,106 +0,0 @@
-# CSS Gradients
-
-> **New Architecture Only**: CSS gradients require React Native's New Architecture (Fabric). They are not available in the old architecture or Expo Go.
-
-Use CSS gradients with the `experimental_backgroundImage` style property.
-
-## Linear Gradients
-
-```tsx
-// Top to bottom
-<View style={{
-  experimental_backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)'
-}} />
-
-// Left to right
-<View style={{
-  experimental_backgroundImage: 'linear-gradient(to right, #ff0000 0%, #0000ff 100%)'
-}} />
-
-// Diagonal
-<View style={{
-  experimental_backgroundImage: 'linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)'
-}} />
-
-// Using degrees
-<View style={{
-  experimental_backgroundImage: 'linear-gradient(135deg, transparent 0%, black 100%)'
-}} />
-```
-
-## Radial Gradients
-
-```tsx
-// Circle at center
-<View style={{
-  experimental_backgroundImage: 'radial-gradient(circle at center, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%)'
-}} />
-
-// Ellipse
-<View style={{
-  experimental_backgroundImage: 'radial-gradient(ellipse at center, #fff 0%, #000 100%)'
-}} />
-
-// Positioned
-<View style={{
-  experimental_backgroundImage: 'radial-gradient(circle at top left, #ff0000 0%, transparent 70%)'
-}} />
-```
-
-## Multiple Gradients
-
-Stack multiple gradients by comma-separating them:
-
-```tsx
-<View style={{
-  experimental_backgroundImage: `
-    linear-gradient(to bottom, transparent 0%, black 100%),
-    radial-gradient(circle at top right, rgba(255, 0, 0, 0.5) 0%, transparent 50%)
-  `
-}} />
-```
-
-## Common Patterns
-
-### Overlay on Image
-
-```tsx
-<View style={{ position: 'relative' }}>
-  <Image source={{ uri: '...' }} style={{ width: '100%', height: 200 }} />
-  <View style={{
-    position: 'absolute',
-    inset: 0,
-    experimental_backgroundImage: 'linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%)'
-  }} />
-</View>
-```
-
-### Frosted Glass Effect
-
-```tsx
-<View style={{
-  experimental_backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)',
-  backdropFilter: 'blur(10px)',
-}} />
-```
-
-### Button Gradient
-
-```tsx
-<Pressable style={{
-  experimental_backgroundImage: 'linear-gradient(to bottom, #4CAF50 0%, #388E3C 100%)',
-  padding: 16,
-  borderRadius: 8,
-}}>
-  <Text style={{ color: 'white', textAlign: 'center' }}>Submit</Text>
-</Pressable>
-```
-
-## Important Notes
-
-- Do NOT use `expo-linear-gradient` — use CSS gradients instead
-- Gradients are strings, not objects
-- Use `rgba()` for transparency, or `transparent` keyword
-- Color stops use percentages (0%, 50%, 100%)
-- Direction keywords: `to top`, `to bottom`, `to left`, `to right`, `to top left`, etc.
-- Degree values: `45deg`, `90deg`, `135deg`, etc.

package/bundled-skills/expo-native-ui/references/icons.md

@@ -1,232 +0,0 @@
-# Icons (SF Symbols)
-
-Use SF Symbols on iOS for native feel. SF Symbols are an Apple asset and never render on Android - every icon needs a Material counterpart (see "Android: Material Icons" below). Never use FontAwesome or Ionicons on either platform, and never emoji as icons.
-
-## Basic Usage
-
-```tsx
-import { SymbolView } from "expo-symbols";
-import { colors } from "@/theme/colors";
-
-<SymbolView
-  tintColor={colors.label}
-  resizeMode="scaleAspectFit"
-  name="square.and.arrow.down"
-  style={{ width: 16, height: 16 }}
-/>;
-```
-
-## Props
-
-```tsx
-<SymbolView
-  name="star.fill"                    // SF Symbol name (required)
-  tintColor={colors.label}            // Icon color
-  size={24}                           // Shorthand for width/height
-  resizeMode="scaleAspectFit"         // How to scale
-  weight="regular"                    // thin | ultraLight | light | regular | medium | semibold | bold | heavy | black
-  scale="medium"                      // small | medium | large
-  style={{ width: 16, height: 16 }}   // Standard style props
-/>
-```
-
-## Common Icons
-
-### Navigation & Actions
-- `house.fill` - home
-- `gear` - settings
-- `magnifyingglass` - search
-- `plus` - add
-- `xmark` - close
-- `chevron.left` - back
-- `chevron.right` - forward
-- `arrow.left` - back arrow
-- `arrow.right` - forward arrow
-
-### Media
-- `play.fill` - play
-- `pause.fill` - pause
-- `stop.fill` - stop
-- `backward.fill` - rewind
-- `forward.fill` - fast forward
-- `speaker.wave.2.fill` - volume
-- `speaker.slash.fill` - mute
-
-### Camera
-- `camera` - camera
-- `camera.fill` - camera filled
-- `arrow.triangle.2.circlepath` - flip camera
-- `photo` - gallery/photos
-- `bolt` - flash
-- `bolt.slash` - flash off
-
-### Communication
-- `message` - message
-- `message.fill` - message filled
-- `envelope` - email
-- `envelope.fill` - email filled
-- `phone` - phone
-- `phone.fill` - phone filled
-- `video` - video call
-- `video.fill` - video call filled
-
-### Social
-- `heart` - like
-- `heart.fill` - liked
-- `star` - favorite
-- `star.fill` - favorited
-- `hand.thumbsup` - thumbs up
-- `hand.thumbsdown` - thumbs down
-- `person` - profile
-- `person.fill` - profile filled
-- `person.2` - people
-- `person.2.fill` - people filled
-
-### Content Actions
-- `square.and.arrow.up` - share
-- `square.and.arrow.down` - download
-- `doc.on.doc` - copy
-- `trash` - delete
-- `pencil` - edit
-- `folder` - folder
-- `folder.fill` - folder filled
-- `bookmark` - bookmark
-- `bookmark.fill` - bookmarked
-
-### Status & Feedback
-- `checkmark` - success/done
-- `checkmark.circle.fill` - completed
-- `xmark.circle.fill` - error/failed
-- `exclamationmark.triangle` - warning
-- `info.circle` - info
-- `questionmark.circle` - help
-- `bell` - notification
-- `bell.fill` - notification filled
-
-### Misc
-- `ellipsis` - more options
-- `ellipsis.circle` - more in circle
-- `line.3.horizontal` - menu/hamburger
-- `slider.horizontal.3` - filters
-- `arrow.clockwise` - refresh
-- `location` - location
-- `location.fill` - location filled
-- `map` - map
-- `mappin` - pin
-- `clock` - time
-- `calendar` - calendar
-- `link` - link
-- `nosign` - block/prohibited
-
-## Animated Symbols
-
-```tsx
-<SymbolView
-  name="checkmark.circle"
-  animationSpec={{
-    effect: {
-      type: "bounce",
-      direction: "up",
-    },
-  }}
-/>
-```
-
-### Animation Effects
-
-- `bounce` - Bouncy animation
-- `pulse` - Pulsing effect
-- `variableColor` - Color cycling
-- `scale` - Scale animation
-
-```tsx
-// Bounce with direction
-animationSpec={{
-  effect: { type: "bounce", direction: "up" }  // up | down
-}}
-
-// Pulse
-animationSpec={{
-  effect: { type: "pulse" }
-}}
-
-// Variable color (multicolor symbols)
-animationSpec={{
-  effect: {
-    type: "variableColor",
-    cumulative: true,
-    reversing: true
-  }
-}}
-```
-
-## Symbol Weights
-
-```tsx
-// Lighter weights
-<SymbolView name="star" weight="ultraLight" />
-<SymbolView name="star" weight="thin" />
-<SymbolView name="star" weight="light" />
-
-// Default
-<SymbolView name="star" weight="regular" />
-
-// Heavier weights
-<SymbolView name="star" weight="medium" />
-<SymbolView name="star" weight="semibold" />
-<SymbolView name="star" weight="bold" />
-<SymbolView name="star" weight="heavy" />
-<SymbolView name="star" weight="black" />
-```
-
-## Symbol Scales
-
-```tsx
-<SymbolView name="star" scale="small" />
-<SymbolView name="star" scale="medium" />  // default
-<SymbolView name="star" scale="large" />
-```
-
-## Multicolor Symbols
-
-Some symbols support multiple colors:
-
-```tsx
-<SymbolView
-  name="cloud.sun.rain.fill"
-  type="multicolor"
-/>
-```
-
-## Android: Material Icons
-
-On Android an SF Symbol source renders nothing - an app that ships SF-only iconography ships blank icons. Give every icon a Material source:
-
-- **Tab bars**: pass `md` (Material Symbol name) beside `sf` on NativeTabs triggers - `<NativeTabs.Trigger.Icon sf="gear" md="settings" />` (SDK 55+, see the `expo-router` skill).
-- **In screens**: `@expo/vector-icons` Material families, gated by platform:
-
-```tsx
-import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-
-process.env.EXPO_OS === "ios" ? (
-  <SymbolView name="gear" tintColor={colors.label} style={{ width: 24, height: 24 }} />
-) : (
-  <MaterialIcons name="settings" size={24} color={colors.label} />
-);
-```
-
-One icon family per platform - never a mixed set, never SF names on Android or Material glyphs on iOS.
-
-## Finding Symbol Names
-
-1. Use the SF Symbols app on macOS (free from Apple)
-2. Search at https://developer.apple.com/sf-symbols/
-3. Symbol names use dot notation: `square.and.arrow.up`
-
-## Best Practices
-
-- On iOS, always use SF Symbols over vector icon libraries; on Android, use Material icons (see above)
-- Match symbol weight to nearby text weight
-- Use `.fill` variants for selected/active states
-- Use the cross-platform `colors` helper (see SKILL.md "Colors") for tint to support dark mode
-- Keep icons at consistent sizes (16, 20, 24, 32)

package/bundled-skills/expo-native-ui/references/media.md

@@ -1,193 +0,0 @@
-# Media
-
-## Camera
-
-- Hide navigation headers when there's a full screen camera
-- Ensure to flip the camera with `mirror` to emulate social apps
-- Use liquid glass buttons on cameras
-- Icons: `arrow.triangle.2.circlepath` (flip), `photo` (gallery), `bolt` (flash)
-- Gate the camera behind an explanation screen with a Grant button (as below) — never fire the permission prompt on mount
-- Lazily request media library permission (at first save/pick)
-
-The example uses the `GlassButton` helper defined in `visual-effects.md` (Glass Buttons section).
-
-```tsx
-import React, { useRef, useState } from "react";
-import { View, Pressable, Text } from "react-native";
-import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
-import * as ImagePicker from "expo-image-picker";
-import * as Haptics from "expo-haptics";
-import { colors } from "@/theme/colors";
-import { GlassView } from "expo-glass-effect";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-function Camera({ onPicture }: { onPicture: (uri: string) => Promise<void> }) {
-  const [permission, requestPermission] = useCameraPermissions();
-  const cameraRef = useRef<CameraView>(null);
-  const [type, setType] = useState<CameraType>("back");
-  const { bottom } = useSafeAreaInsets();
-
-  if (!permission?.granted) {
-    return (
-      <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: colors.systemBackground }}>
-        <Text style={{ color: colors.label, padding: 16 }}>Camera access is required</Text>
-        <GlassView isInteractive tintColor={colors.systemBlue} style={{ borderRadius: 12 }}>
-          <Pressable onPress={requestPermission} style={{ padding: 12, borderRadius: 12 }}>
-            <Text style={{ color: "white" }}>Grant Permission</Text>
-          </Pressable>
-        </GlassView>
-      </View>
-    );
-  }
-
-  const takePhoto = async () => {
-    await Haptics.selectionAsync();
-    if (!cameraRef.current) return;
-    const photo = await cameraRef.current.takePictureAsync({ quality: 0.8 });
-    await onPicture(photo.uri);
-  };
-
-  const selectPhoto = async () => {
-    await Haptics.selectionAsync();
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: "images",
-      allowsEditing: false,
-      quality: 0.8,
-    });
-    if (!result.canceled && result.assets?.[0]) {
-      await onPicture(result.assets[0].uri);
-    }
-  };
-
-  return (
-    <View style={{ flex: 1, backgroundColor: "black" }}>
-      <CameraView ref={cameraRef} mirror style={{ flex: 1 }} facing={type} />
-      <View style={{ position: "absolute", left: 0, right: 0, bottom: bottom, gap: 16, alignItems: "center" }}>
-        <GlassView isInteractive style={{ padding: 8, borderRadius: 99 }}>
-          <Pressable onPress={takePhoto} style={{ width: 64, height: 64, borderRadius: 99, backgroundColor: "white" }} />
-        </GlassView>
-        <View style={{ flexDirection: "row", justifyContent: "space-around", paddingHorizontal: 8 }}>
-          <GlassButton onPress={selectPhoto} icon="photo" />
-          <GlassButton onPress={() => setType(t => t === "back" ? "front" : "back")} icon="arrow.triangle.2.circlepath" />
-        </View>
-      </View>
-    </View>
-  );
-}
-```
-
-## Audio Playback
-
-Use `expo-audio` not `expo-av`:
-
-```tsx
-import { useAudioPlayer } from 'expo-audio';
-
-const player = useAudioPlayer({ uri: 'https://stream.nightride.fm/rektory.mp3' });
-
-<Button title="Play" onPress={() => player.play()} />
-```
-
-## Audio Recording (Microphone)
-
-```tsx
-import {
-  useAudioRecorder,
-  AudioModule,
-  RecordingPresets,
-  setAudioModeAsync,
-  useAudioRecorderState,
-} from 'expo-audio';
-import { Alert, Button } from 'react-native';
-
-function App() {
-  const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
-  const recorderState = useAudioRecorderState(audioRecorder);
-
-  // Request the microphone on first record, not on mount — no prompt before user intent
-  const record = async () => {
-    const status = await AudioModule.requestRecordingPermissionsAsync();
-    if (!status.granted) {
-      Alert.alert('Permission to access microphone was denied');
-      return;
-    }
-    await setAudioModeAsync({ playsInSilentMode: true, allowsRecording: true });
-    await audioRecorder.prepareToRecordAsync();
-    audioRecorder.record();
-  };
-
-  const stop = () => audioRecorder.stop();
-
-  return (
-    <Button
-      title={recorderState.isRecording ? 'Stop' : 'Start'}
-      onPress={recorderState.isRecording ? stop : record}
-    />
-  );
-}
-```
-
-## Video Playback
-
-Use `expo-video` not `expo-av`:
-
-```tsx
-import { useVideoPlayer, VideoView } from 'expo-video';
-import { useEvent } from 'expo';
-
-const videoSource = 'https://example.com/video.mp4';
-
-const player = useVideoPlayer(videoSource, player => {
-  player.loop = true;
-  player.play();
-});
-
-const { isPlaying } = useEvent(player, 'playingChange', { isPlaying: player.playing });
-
-<VideoView player={player} fullscreenOptions={{}} allowsPictureInPicture />
-```
-
-VideoView options:
-- `allowsPictureInPicture`: boolean
-- `contentFit`: 'contain' | 'cover' | 'fill'
-- `nativeControls`: boolean
-- `playsInline`: boolean
-- `startsPictureInPictureAutomatically`: boolean
-
-## Saving Media
-
-```tsx
-import * as MediaLibrary from "expo-media-library";
-
-const { granted } = await MediaLibrary.requestPermissionsAsync();
-if (granted) {
-  await MediaLibrary.saveToLibraryAsync(uri);
-}
-```
-
-### Saving Base64 Images
-
-`MediaLibrary.saveToLibraryAsync` only accepts local file paths. Save base64 strings to disk first:
-
-```tsx
-import { File, Paths } from "expo-file-system/next";
-
-function base64ToLocalUri(base64: string, filename?: string) {
-  if (!filename) {
-    const match = base64.match(/^data:(image\/[a-zA-Z]+);base64,/);
-    const ext = match ? match[1].split("/")[1] : "jpg";
-    filename = `generated-${Date.now()}.${ext}`;
-  }
-
-  if (base64.startsWith("data:")) base64 = base64.split(",")[1];
-  const binaryString = atob(base64);
-  const len = binaryString.length;
-  const bytes = new Uint8Array(new ArrayBuffer(len));
-  for (let i = 0; i < len; i++) bytes[i] = binaryString.charCodeAt(i);
-
-  const f = new File(Paths.cache, filename);
-  f.create({ overwrite: true });
-  f.write(bytes);
-  return f.uri;
-}
-```

package/bundled-skills/expo-native-ui/references/storage.md

@@ -1,121 +0,0 @@
-# Storage
-
-## Key-Value Storage
-
-Use the localStorage polyfill for key-value storage. **Never use AsyncStorage**
-
-```tsx
-import "expo-sqlite/localStorage/install";
-
-// Simple get/set
-localStorage.setItem("key", "value");
-localStorage.getItem("key");
-
-// Store objects as JSON
-localStorage.setItem("user", JSON.stringify({ name: "John", id: 1 }));
-const user = JSON.parse(localStorage.getItem("user") ?? "{}");
-```
-
-## When to Use What
-
-| Use Case                                             | Solution                |
-| ---------------------------------------------------- | ----------------------- |
-| Simple key-value (settings, preferences, small data) | `localStorage` polyfill |
-| Large datasets, complex queries, relational data     | Full `expo-sqlite`      |
-| Sensitive data (tokens, passwords)                   | `expo-secure-store`     |
-
-## Storage with React State
-
-Create a storage utility with subscriptions for reactive updates:
-
-```tsx
-// utils/storage.ts
-import "expo-sqlite/localStorage/install";
-
-type Listener = () => void;
-const listeners = new Map<string, Set<Listener>>();
-
-export const storage = {
-  get<T>(key: string, defaultValue: T): T {
-    const value = localStorage.getItem(key);
-    return value ? JSON.parse(value) : defaultValue;
-  },
-
-  set<T>(key: string, value: T): void {
-    localStorage.setItem(key, JSON.stringify(value));
-    listeners.get(key)?.forEach((fn) => fn());
-  },
-
-  subscribe(key: string, listener: Listener): () => void {
-    if (!listeners.has(key)) listeners.set(key, new Set());
-    listeners.get(key)!.add(listener);
-    return () => listeners.get(key)?.delete(listener);
-  },
-};
-```
-
-## React Hook for Storage
-
-```tsx
-// hooks/use-storage.ts
-import { useSyncExternalStore } from "react";
-import { storage } from "@/utils/storage";
-
-export function useStorage<T>(
-  key: string,
-  defaultValue: T
-): [T, (value: T) => void] {
-  const value = useSyncExternalStore(
-    (cb) => storage.subscribe(key, cb),
-    () => storage.get(key, defaultValue)
-  );
-
-  return [value, (newValue: T) => storage.set(key, newValue)];
-}
-```
-
-Usage:
-
-```tsx
-function Settings() {
-  const [theme, setTheme] = useStorage("theme", "light");
-
-  return (
-    <Switch
-      value={theme === "dark"}
-      onValueChange={(dark) => setTheme(dark ? "dark" : "light")}
-    />
-  );
-}
-```
-
-## Full SQLite for Complex Data
-
-For larger datasets or complex queries, use expo-sqlite directly:
-
-```tsx
-import * as SQLite from "expo-sqlite";
-
-const db = await SQLite.openDatabaseAsync("app.db");
-
-// Create table
-await db.execAsync(`
-  CREATE TABLE IF NOT EXISTS events (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    title TEXT NOT NULL,
-    date TEXT NOT NULL,
-    location TEXT
-  )
-`);
-
-// Insert
-await db.runAsync("INSERT INTO events (title, date) VALUES (?, ?)", [
-  "Meeting",
-  "2024-01-15",
-]);
-
-// Query
-const events = await db.getAllAsync("SELECT * FROM events WHERE date > ?", [
-  "2024-01-01",
-]);
-```