@neko-os/ui 0.5.3 → 0.6.0

package/src/helpers/compress.js

@@ -0,0 +1,61 @@
+const IMAGE_DEFAULTS = { maxWidth: 1920, maxHeight: 1920, quality: 0.8 }
+
+function isImage(asset) {
+  return asset?.type?.startsWith('image/')
+}
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.src = src
+  })
+}
+
+const ALPHA_TYPES = new Set(['image/png', 'image/webp', 'image/gif'])
+
+function compressWithCanvas(img, { maxWidth, maxHeight, quality, mimeType }) {
+  let { width, height } = img
+  if (width > maxWidth || height > maxHeight) {
+    const ratio = Math.min(maxWidth / width, maxHeight / height)
+    width = Math.round(width * ratio)
+    height = Math.round(height * ratio)
+  }
+
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(img, 0, 0, width, height)
+
+  const outputType = ALPHA_TYPES.has(mimeType) ? mimeType : 'image/jpeg'
+
+  return new Promise((resolve) => {
+    canvas.toBlob(
+      (blob) => resolve(blob ? { uri: URL.createObjectURL(blob), width, height } : null),
+      outputType,
+      quality
+    )
+  })
+}
+
+export async function compressAsset(asset, options = {}) {
+  if (!asset?.uri || !isImage(asset)) return asset
+
+  try {
+    const opts = { ...IMAGE_DEFAULTS, ...options.image }
+    const img = await loadImage(asset.uri)
+    const result = await compressWithCanvas(img, { ...opts, mimeType: asset.type })
+    if (!result) return asset
+    return { ...asset, uri: result.uri, width: result.width, height: result.height }
+  } catch (e) {
+    console.warn('[neko-ui compress] web image compression failed:', e?.message)
+    return asset
+  }
+}
+
+export function compressAssets(assets, options = {}) {
+  if (!assets?.length) return Promise.resolve(assets || [])
+  return Promise.all(assets.map((a) => compressAsset(a, options)))
+}

package/src/helpers/compress.native.js

@@ -0,0 +1,49 @@
+let ImageCompressor
+let VideoCompressor
+try {
+  const RNC = require('react-native-compressor')
+  ImageCompressor = RNC.Image
+  VideoCompressor = RNC.Video
+} catch {}
+
+const IMAGE_DEFAULTS = { maxWidth: 1920, maxHeight: 1920, quality: 0.8 }
+const VIDEO_DEFAULTS = { maxSize: 720 }
+
+function isImage(asset) {
+  return asset?.type?.startsWith('image/')
+}
+
+function isVideo(asset) {
+  return asset?.type?.startsWith('video/')
+}
+
+export async function compressAsset(asset, options = {}) {
+  if (!asset?.uri) return asset
+
+  if (isImage(asset) && ImageCompressor) {
+    try {
+      const uri = await ImageCompressor.compress(asset.uri, { ...IMAGE_DEFAULTS, ...options.image })
+      return { ...asset, uri }
+    } catch (e) {
+      console.warn('[neko-ui compress] image failed, keeping original:', e?.message)
+      return asset
+    }
+  }
+
+  if (isVideo(asset) && VideoCompressor) {
+    try {
+      const uri = await VideoCompressor.compress(asset.uri, { ...VIDEO_DEFAULTS, ...options.video })
+      return { ...asset, uri }
+    } catch (e) {
+      console.warn('[neko-ui compress] video failed, keeping original:', e?.message)
+      return asset
+    }
+  }
+
+  return asset
+}
+
+export function compressAssets(assets, options = {}) {
+  if (!assets?.length) return Promise.resolve(assets || [])
+  return Promise.all(assets.map((a) => compressAsset(a, options)))
+}

package/src/helpers/files.js

@@ -0,0 +1,7 @@
+// Web / non-native: no filesystem persistence. The uri (blob/object URL or
+// remote) is used as-is. Mirrors the native API surface.
+export function persistFile(uri) {
+  return uri
+}
+
+export function removeFile() {}

package/src/helpers/files.native.js

@@ -0,0 +1,55 @@
+let FS
+try {
+  FS = require('expo-file-system')
+} catch {}
+
+// `target="<base>/<subdir>"`, base is 'document' | 'cache'. Resolves to a
+// permanent Directory (created if missing) via the modern sync expo-file-system API.
+function resolveDir(target) {
+  const [base, ...rest] = (target || '').split('/').filter(Boolean)
+  if (base !== 'cache' && base !== 'document') {
+    console.warn(`[neko-ui files] target base "${base}" unknown — using document dir. Use "document" or "cache".`)
+  }
+  const root = base === 'cache' ? FS.Paths.cache : FS.Paths.document
+  const dir = new FS.Directory(root, ...rest)
+  try {
+    dir.create({ intermediates: true, idempotent: true })
+  } catch (e) {
+    console.warn('[neko-ui files] dir create failed:', e?.message)
+  }
+  return dir
+}
+
+let seq = 0
+
+// Copy a file at `uri` into a permanent app directory (`target`, default
+// 'document/files'). Returns the durable uri string. Never throws — on failure
+// or when expo-file-system is unavailable, returns the original uri.
+// `opts.name` is used only to derive the file extension (falls back to the uri,
+// then 'jpg'); the stored filename is always unique (timestamp + counter), so
+// rapid multi-select can't collide. Expects a `file://` source (e.g.
+// expo-image-picker output); `content://` sources can't be copied and fall back
+// to the original uri.
+export function persistFile(uri, target = 'document/files', { name } = {}) {
+  if (!FS || !uri) return uri
+  try {
+    const ext = name?.split('.').pop() || uri.split('?')[0].split('.').pop() || 'jpg'
+    const filename = `${Date.now()}_${seq++}_${Math.round(Math.random() * 1e6)}.${ext}`
+    const dest = new FS.File(resolveDir(target), filename)
+    new FS.File(uri).copy(dest)
+    return dest.uri
+  } catch (e) {
+    console.warn('[neko-ui files] persistFile failed, keeping uri:', e?.message)
+    return uri
+  }
+}
+
+// Delete a persisted file. No-op if missing / unavailable.
+export function removeFile(uri) {
+  if (!FS || !uri) return
+  try {
+    new FS.File(uri).delete()
+  } catch (e) {
+    console.warn('[neko-ui files] removeFile failed:', e?.message)
+  }
+}

package/src/helpers/index.js

@@ -1,7 +1,12 @@
+export * from './compress'
 export * from './debounce'
-export * from './string'
+export * from './files'
+export * from './media'
+export * from './numbers'
+export * from './pickAssets'
 export * from './random'
 export * from './storage'
+export * from './string'
 export * from './weekStart'
 export * from './weekStartSetup'
 export * from './../abstractions/helpers/useSafeAreaInsets'

package/src/helpers/media.js

@@ -0,0 +1,4 @@
+// Web / non-native: native camera & library pickers aren't available here.
+// (Upload's web implementation uses its own file-input flow.)
+export const openCamera = async () => []
+export const openLibrary = async () => []

package/src/helpers/media.native.js

@@ -0,0 +1,41 @@
+let ImagePicker
+try {
+  ImagePicker = require('expo-image-picker')
+} catch {}
+
+// Normalize an expo-image-picker asset into the shape neko-ui works with.
+// Internal — callers consume the already-normalized assets from openCamera/openLibrary.
+function normalizeImageResult(asset) {
+  return {
+    uri: asset.uri,
+    name: asset.fileName || asset.uri.split('/').pop(),
+    type: asset.mimeType || asset.type || 'image/jpeg',
+    size: asset.fileSize || asset.filesize,
+    width: asset.width,
+    height: asset.height,
+  }
+}
+
+// Request camera permission, launch the camera, return normalized assets.
+// Returns [] when expo-image-picker is missing, permission is denied, or the user
+// cancels. The caller owns post-processing (persist, save-to-library, closing any
+// drawer) — and any drawer should stay open until this resolves (iOS present/
+// dismiss collision otherwise).
+export async function openCamera(options = {}) {
+  if (!ImagePicker) return []
+  const permission = await ImagePicker.requestCameraPermissionsAsync()
+  if (!permission.granted) return []
+  const result = await ImagePicker.launchCameraAsync(options)
+  if (result.canceled) return []
+  return result.assets.map(normalizeImageResult)
+}
+
+// Same as openCamera but for the photo library.
+export async function openLibrary(options = {}) {
+  if (!ImagePicker) return []
+  const permission = await ImagePicker.requestMediaLibraryPermissionsAsync()
+  if (!permission.granted) return []
+  const result = await ImagePicker.launchImageLibraryAsync(options)
+  if (result.canceled) return []
+  return result.assets.map(normalizeImageResult)
+}

package/src/helpers/numbers.js

@@ -0,0 +1,13 @@
+import { is } from 'ramda'
+
+export function fixedDecimals(num, count = 2) {
+  if (!num) return num
+  if (Number.isInteger(num)) return num
+  if (is(String, num)) num = parseFloat(num)
+
+  const decimalPart = num.toString().split('.')[1]
+  if (decimalPart && decimalPart.length > count) {
+    return parseFloat(num.toFixed(count))
+  }
+  return num
+}

package/src/helpers/pickAssets.js

@@ -0,0 +1,7 @@
+export async function pickFromCamera({ multiple = false } = {}) {
+  return multiple ? [] : null
+}
+
+export async function pickFromLibrary({ multiple = false } = {}) {
+  return multiple ? [] : null
+}

package/src/helpers/pickAssets.native.js

@@ -0,0 +1,66 @@
+import { openCamera, openLibrary } from './media'
+import { compressAsset, compressAssets } from './compress'
+import { persistFile } from './files'
+
+let MediaLibrary
+try {
+  MediaLibrary = require('expo-media-library')
+} catch {}
+
+async function saveAssetsToLibrary(assets) {
+  if (!MediaLibrary || !assets?.length) return
+  try {
+    const perm = await MediaLibrary.requestPermissionsAsync(true)
+    if (!perm.granted) return
+    for (const a of assets) {
+      try {
+        await MediaLibrary.saveToLibraryAsync(a.uri)
+      } catch (e) {
+        console.warn('[neko-ui pick] saveToLibrary failed:', e?.message)
+      }
+    }
+  } catch (e) {
+    console.warn('[neko-ui pick] saveToLibrary permission error:', e?.message)
+  }
+}
+
+function persistAsset(asset, persistTo) {
+  if (!persistTo) return asset
+  return { ...asset, uri: persistFile(asset.uri, persistTo, { name: asset.name }) }
+}
+
+async function processAssets(assets, { compress = true, persistTo } = {}) {
+  let result = assets
+  if (compress !== false) {
+    const compressOpts = typeof compress === 'object' ? compress : {}
+    result = await compressAssets(result, compressOpts)
+  }
+  if (persistTo) {
+    result = result.map((a) => persistAsset(a, persistTo))
+  }
+  return result
+}
+
+export async function pickFromCamera({ multiple = false, maxCount, mediaTypes, persistTo, compress, saveToLibrary } = {}) {
+  const assets = await openCamera({
+    allowsMultipleSelection: multiple,
+    selectionLimit: maxCount || 0,
+    mediaTypes,
+  })
+  if (!assets.length) return multiple ? [] : null
+  // Save original (pre-compression) captures to device Photos
+  if (saveToLibrary) await saveAssetsToLibrary(assets)
+  const result = await processAssets(assets, { compress, persistTo })
+  return multiple ? result : result[0]
+}
+
+export async function pickFromLibrary({ multiple = false, maxCount, mediaTypes, persistTo, compress } = {}) {
+  const assets = await openLibrary({
+    allowsMultipleSelection: multiple,
+    selectionLimit: maxCount || 0,
+    mediaTypes,
+  })
+  if (!assets.length) return multiple ? [] : null
+  const result = await processAssets(assets, { compress, persistTo })
+  return multiple ? result : result[0]
+}

package/src/helpers/storage.js

@@ -41,6 +41,21 @@ function getAsync(key, defaultValue) {
   })
 }
 
+function notifyAll(value) {
+  Object.keys(listeners).forEach((key) => notify(key, value))
+}
+
+function clear() {
+  AbsStorage.clear()
+  notifyAll(undefined)
+}
+
+function clearAsync() {
+  return AbsStorage.clearAsync().then(() => {
+    notifyAll(undefined)
+  })
+}
+
 function formatStoragedValue(value) {
   try {
     if (!value) return value
@@ -73,5 +88,7 @@ export const Storage = {
   setAsync,
   get,
   getAsync,
+  clear,
+  clearAsync,
   useState,
 }

package/src/i18n/I18n.js

@@ -26,7 +26,7 @@ export class I18n {
   }
 
   t(key, opts = {}) {
-    let { ns = 'common', context, ...vars } = opts
+    let { ns = 'common', context, default: defaultVal, ...vars } = opts
     const count = vars?.count
     if (key.includes(':')) {
       const splittedKey = key.split(':')
@@ -39,7 +39,7 @@ export class I18n {
 
     if (!value) {
       const fallbackData = this.resources[this.fallback]?.[ns]
-      value = this._resolveKey(fallbackData, key, count, context) || key
+      value = this._resolveKey(fallbackData, key, count, context) ?? defaultVal ?? key
     }
 
     return this._interpolate(value, vars)

package/src/index.js

@@ -6,4 +6,4 @@ export * from './i18n'
 export * from './NekoUI'
 export * from './abstractions'
 
-export const version = 41
+export const version = 44

package/src/modifiers/flex.js

@@ -1,11 +1,16 @@
 import { clearProps, flattenStyle } from './_helpers'
 
 export function useFlexModifier([values, props]) {
-  let { flex, ...restProps } = props
+  let { flex, alignSelf, selfStretch, selfCenter, selfStart, selfEnd, ...restProps } = props
 
   if (flex === true) flex = 1
 
-  const style = clearProps({ flex, minWidth: 0 })
+  if (selfStretch) alignSelf = 'stretch'
+  if (selfCenter) alignSelf = 'center'
+  if (selfStart) alignSelf = 'flex-start'
+  if (selfEnd) alignSelf = 'flex-end'
+
+  const style = clearProps({ flex, minWidth: 0, alignSelf })
 
   return [
     values,

package/src/responsive/responsiveHooks.js

@@ -27,6 +27,20 @@ export function useGetResponsiveValue() {
 
       if (!isObj) return value
 
+      // Only treat the object as a responsive descriptor when it actually
+      // carries breakpoint / platform / df keys. Otherwise it is a plain
+      // object prop (e.g. titleProps) and must pass through untouched.
+      const bpNames = breakpoints.map((b) => b.name)
+      const isResponsiveKey = (k) =>
+        k === 'df' ||
+        k === 'native' ||
+        k === 'web' ||
+        k === 'ios' ||
+        k === 'android' ||
+        bpNames.includes(k) ||
+        (/^(\w+)[du]$/.test(k) && bpNames.includes(k.slice(0, -1)))
+      if (!Object.keys(value).some(isResponsiveKey)) return value
+
       if (value[screen]) return value[screen]
 
       const keys = Object.keys(value)

package/src/theme/default/blackTheme.js

@@ -33,6 +33,8 @@ export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8B5E3C',
     lylac: '#C77DFF',
     pink: '#FF6FAE',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 
   // components: {

package/src/theme/default/cyberpunkTheme.js

@@ -32,5 +32,7 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8B5CF6',
     lylac: '#C77DFF',
     pink: '#FF4FD8',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })

package/src/theme/default/darkTheme.js

@@ -31,5 +31,7 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8D6E63',
     lylac: '#B39DDB',
     pink: '#F48FB1',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })

package/src/theme/default/hackerTheme.js

@@ -39,6 +39,8 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#5C4033',
     lylac: '#C084FC',
     pink: '#FF4FD8',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 
   radius: {

package/src/theme/default/lightTheme.js

@@ -31,5 +31,7 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8D6E63',
     lylac: '#B39DDB',
     pink: '#F48FB1',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })

package/src/theme/default/paperTheme.js

@@ -32,5 +32,7 @@ export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8B7355',
     lylac: '#C7B7D4',
     pink: '#E4A1B2',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })