@talex-touch/utils 1.0.42 → 1.0.44

package/animation/auto-resize.ts

@@ -0,0 +1,322 @@
+import type { Ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+/**
+ * Resize dimensions in pixels.
+ */
+export interface AutoResizeSize {
+  width: number
+  height: number
+}
+
+/**
+ * Resize event payload passed to callbacks.
+ */
+export interface AutoResizeEvent {
+  /** Previous measured size (null on first run) */
+  prev: AutoResizeSize | null
+  /** Current measured size */
+  next: AutoResizeSize
+  /** Whether the change was triggered by manual refresh() */
+  isManual: boolean
+}
+
+/**
+ * How to round measured values.
+ */
+export type AutoResizeRounding = 'none' | 'round' | 'floor' | 'ceil'
+
+/**
+ * Options for {@link useAutoResize}.
+ */
+export interface UseAutoResizeOptions {
+  /**
+   * Sync width from inner -> outer.
+   * @default true
+   */
+  width?: boolean
+
+  /**
+   * Sync height from inner -> outer.
+   * @default false
+   */
+  height?: boolean
+
+  /**
+   * Apply measured values as `px` inline styles on the outer element.
+   * If false, no inline width/height will be written (callbacks still fire).
+   * @default true
+   */
+  applyStyle?: boolean
+
+  /**
+   * Which element receives the styles.
+   * - "outer": write width/height to outer (common for wrapper animation)
+   * - "inner": write width/height to inner (rare but sometimes useful)
+   * @default "outer"
+   */
+  styleTarget?: 'outer' | 'inner'
+
+  /**
+   * Rounding strategy for measured sizes.
+   * Useful to avoid sub-pixel jitter when animating.
+   * @default "ceil"
+   */
+  rounding?: AutoResizeRounding
+
+  /**
+   * Run an initial measurement on mount.
+   * @default true
+   */
+  immediate?: boolean
+
+  /**
+   * If true, batches multiple observer triggers into a single DOM write via rAF.
+   * Helps avoid layout thrash when content changes rapidly.
+   * @default true
+   */
+  rafBatch?: boolean
+
+  /**
+   * Called whenever a resize is detected (after measurement, before applying styles).
+   */
+  onResize?: (e: AutoResizeEvent) => void
+
+  /**
+   * Called right before applying inline styles (if applyStyle = true).
+   * You can mutate/override the target style here if you want.
+   */
+  onBeforeApply?: (e: AutoResizeEvent) => void
+
+  /**
+   * Called after applying inline styles (if applyStyle = true).
+   */
+  onAfterApply?: (e: AutoResizeEvent) => void
+}
+
+/**
+ * Result returned by {@link useAutoResize}.
+ */
+export interface UseAutoResizeReturn {
+  /**
+   * Manually re-measure and (optionally) apply size.
+   * Useful after state toggles (e.g. loading -> show spinner),
+   * or when content changes but you suspect observer didn't fire (rare).
+   */
+  refresh: () => Promise<void>
+
+  /**
+   * Start observing (automatically called onMounted if enabled = true).
+   */
+  start: () => void
+
+  /**
+   * Stop observing and cancel pending rAF.
+   */
+  stop: () => void
+
+  /**
+   * Enable/disable without unmounting.
+   * When disabled, observer is disconnected and no styles are applied.
+   */
+  setEnabled: (enabled: boolean) => void
+
+  /**
+   * Latest measured size (null until first measure).
+   */
+  size: Ref<AutoResizeSize | null>
+}
+
+/**
+ * Observe the size of `innerRef` using `ResizeObserver` and synchronize it to `outerRef`.
+ *
+ * Typical usage:
+ * - Buttons: animate width changes when toggling loading spinners.
+ * - Tabs/Accordions: animate height changes when switching content.
+ *
+ * @example Button width animation
+ * ```vue
+ * <template>
+ *   <button ref="outer" class="transition-[width] duration-200 overflow-hidden">
+ *     <span ref="inner" class="inline-flex items-center gap-2 whitespace-nowrap">
+ *       <Spinner v-if="loading" />
+ *       <span>{{ label }}</span>
+ *     </span>
+ *   </button>
+ * </template>
+ * <script setup lang="ts">
+ * import { ref, watch } from 'vue'
+ * import { useAutoResize } from './useAutoResize'
+ *
+ * const outer = ref<HTMLElement|null>(null)
+ * const inner = ref<HTMLElement|null>(null)
+ * const loading = ref(false)
+ *
+ * const { refresh } = useAutoResize(outer, inner, { width: true, height: false })
+ * watch(loading, () => void refresh())
+ * </script>
+ * ```
+ *
+ * @example Tabs height animation
+ * ```vue
+ * <template>
+ *   <div ref="outer" class="transition-[height] duration-250 overflow-hidden">
+ *     <div ref="inner">
+ *       <component :is="activeComp" />
+ *     </div>
+ *   </div>
+ * </template>
+ * <script setup lang="ts">
+ * import { ref, watch } from 'vue'
+ * import { useAutoResize } from './useAutoResize'
+ *
+ * const outer = ref<HTMLElement|null>(null)
+ * const inner = ref<HTMLElement|null>(null)
+ * const activeKey = ref('a')
+ *
+ * const { refresh } = useAutoResize(outer, inner, { width: false, height: true })
+ * watch(activeKey, () => void refresh())
+ * </script>
+ * ```
+ */
+export function useAutoResize(
+  outerRef: Ref<HTMLElement | null>,
+  innerRef: Ref<HTMLElement | null>,
+  options: UseAutoResizeOptions = {},
+): UseAutoResizeReturn {
+  const opt: Required<UseAutoResizeOptions> = {
+    width: options.width ?? true,
+    height: options.height ?? false,
+    applyStyle: options.applyStyle ?? true,
+    styleTarget: options.styleTarget ?? 'outer',
+    rounding: options.rounding ?? 'ceil',
+    immediate: options.immediate ?? true,
+    rafBatch: options.rafBatch ?? true,
+    onResize: options.onResize ?? (() => {}),
+    onBeforeApply: options.onBeforeApply ?? (() => {}),
+    onAfterApply: options.onAfterApply ?? (() => {}),
+  }
+
+  const size = ref<AutoResizeSize | null>(null)
+  const enabled = ref(true)
+  const ro = ref<ResizeObserver | null>(null)
+  let rafId: number | null = null
+  let pendingManual = false
+
+  const round = (v: number) => {
+    switch (opt.rounding) {
+      case 'none':
+        return v
+      case 'round':
+        return Math.round(v)
+      case 'floor':
+        return Math.floor(v)
+      case 'ceil':
+      default:
+        return Math.ceil(v)
+    }
+  }
+
+  const getTargets = () => {
+    const outer = outerRef.value
+    const inner = innerRef.value
+    const styleEl = opt.styleTarget === 'outer' ? outer : inner
+    return { outer, inner, styleEl }
+  }
+
+  const apply = (e: AutoResizeEvent, styleEl: HTMLElement) => {
+    if (!opt.applyStyle)
+      return
+    if (opt.width)
+      styleEl.style.width = `${e.next.width}px`
+    if (opt.height)
+      styleEl.style.height = `${e.next.height}px`
+  }
+
+  const measureAndSync = async (isManual: boolean) => {
+    await nextTick()
+    const { inner, styleEl } = getTargets()
+    if (!inner || !styleEl)
+      return
+    if (!enabled.value)
+      return
+
+    const rect = inner.getBoundingClientRect()
+    const next: AutoResizeSize = {
+      width: round(rect.width),
+      height: round(rect.height),
+    }
+
+    const prev = size.value
+    const event: AutoResizeEvent = { prev, next, isManual }
+
+    // always update size ref (even if applyStyle = false)
+    size.value = next
+
+    opt.onResize(event)
+    opt.onBeforeApply(event)
+    apply(event, styleEl)
+    opt.onAfterApply(event)
+  }
+
+  const schedule = (isManual: boolean) => {
+    if (!opt.rafBatch) {
+      void measureAndSync(isManual)
+      return
+    }
+    if (rafId != null)
+      return
+    rafId = requestAnimationFrame(() => {
+      rafId = null
+      const manual = pendingManual
+      pendingManual = false
+      void measureAndSync(manual)
+    })
+  }
+
+  const start = () => {
+    if (ro.value)
+      return
+    const { inner } = getTargets()
+    if (!inner)
+      return
+    ro.value = new ResizeObserver(() => schedule(false))
+    ro.value.observe(inner)
+  }
+
+  const stop = () => {
+    ro.value?.disconnect()
+    ro.value = null
+    if (rafId != null)
+      cancelAnimationFrame(rafId)
+    rafId = null
+    pendingManual = false
+  }
+
+  const setEnabled = (v: boolean) => {
+    enabled.value = v
+    if (!v)
+      stop()
+    else start()
+  }
+
+  const refresh = async () => {
+    pendingManual = true
+    schedule(true)
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve())
+    })
+  }
+
+  onMounted(async () => {
+    if (!enabled.value)
+      return
+    start()
+    if (opt.immediate)
+      await measureAndSync(false)
+  })
+
+  onBeforeUnmount(() => stop())
+
+  return { refresh, start, stop, setEnabled, size }
+}

package/animation/window-node.ts

@@ -1,4 +1,5 @@
 import type { TalexTouch } from '../types'
+import { PollingService } from '../common/utils/polling'
 
 /**
  * Window animation controller return type
@@ -36,7 +37,7 @@ export interface WindowAnimationController {
  * Tracks the state of an animation
  */
 interface AnimationState {
-  intervalId: NodeJS.Timeout | null
+  taskId: string | null
   completed: boolean
 }
 
@@ -55,9 +56,11 @@ function easeInOutCubic(t: number): number {
 export function useWindowAnimation(window?: TalexTouch.ITouchWindow): WindowAnimationController {
   // Store current window reference inside the function scope
   let currentWindow: TalexTouch.ITouchWindow | null = window || null
+  const pollingService = PollingService.getInstance()
+  let animationTaskCounter = 0
 
   const animationState: AnimationState = {
-    intervalId: null,
+    taskId: null,
     completed: false,
   }
 
@@ -89,9 +92,9 @@ export function useWindowAnimation(window?: TalexTouch.ITouchWindow): WindowAnim
       const window = getCurrentWindow()
 
       // Cancel any existing animation
-      if (animationState.intervalId) {
-        clearInterval(animationState.intervalId)
-        animationState.intervalId = null
+      if (animationState.taskId) {
+        pollingService.unregister(animationState.taskId)
+        animationState.taskId = null
       }
 
       // Reset state for new animation
@@ -107,12 +110,15 @@ export function useWindowAnimation(window?: TalexTouch.ITouchWindow): WindowAnim
       const durationMs = duration * 1000
 
       return new Promise<boolean>((resolve) => {
-        animationState.intervalId = setInterval(() => {
+        const taskId = `window-animation.${animationTaskCounter++}`
+        animationState.taskId = taskId
+
+        pollingService.register(taskId, () => {
           // Check if window is still valid
           if (!isWindowValid()) {
-            if (animationState.intervalId) {
-              clearInterval(animationState.intervalId)
-              animationState.intervalId = null
+            if (animationState.taskId) {
+              pollingService.unregister(animationState.taskId)
+              animationState.taskId = null
             }
             resolve(false)
             return
@@ -127,14 +133,15 @@ export function useWindowAnimation(window?: TalexTouch.ITouchWindow): WindowAnim
           browserWindow.setPosition(x, y)
 
           if (progress >= 1) {
-            if (animationState.intervalId) {
-              clearInterval(animationState.intervalId)
-              animationState.intervalId = null
+            if (animationState.taskId) {
+              pollingService.unregister(animationState.taskId)
+              animationState.taskId = null
             }
             animationState.completed = true
             resolve(true)
           }
-        }, 16) // ~60fps
+        }, { interval: 16, unit: 'milliseconds' }) // ~60fps
+        pollingService.start()
       })
     }
     catch (error) {
@@ -144,9 +151,9 @@ export function useWindowAnimation(window?: TalexTouch.ITouchWindow): WindowAnim
   }
 
   const cancel = async (): Promise<boolean> => {
-    if (animationState.intervalId) {
-      clearInterval(animationState.intervalId)
-      animationState.intervalId = null
+    if (animationState.taskId) {
+      pollingService.unregister(animationState.taskId)
+      animationState.taskId = null
       return Promise.resolve(true)
     }
     return Promise.resolve(false)
@@ -187,9 +194,9 @@ export function useWindowAnimation(window?: TalexTouch.ITouchWindow): WindowAnim
 
   const changeWindow = (newWindow: TalexTouch.ITouchWindow): void => {
     // Cancel any ongoing animation
-    if (animationState.intervalId) {
-      clearInterval(animationState.intervalId)
-      animationState.intervalId = null
+    if (animationState.taskId) {
+      pollingService.unregister(animationState.taskId)
+      animationState.taskId = null
     }
 
     // Set new window

package/auth/clerk-types.ts

@@ -1,21 +1,20 @@
-export interface ClerkUser {
+export interface AuthUser {
   id: string
-  emailAddresses: Array<{
-    emailAddress: string
-    id: string
-  }>
-  firstName?: string
-  lastName?: string
-  username?: string
-  imageUrl?: string
-  createdAt: string
-  updatedAt: string
+  email: string
+  name?: string | null
+  avatar?: string | null
+  role?: string | null
+  locale?: string | null
+  emailVerified?: boolean
+  bio?: string | null
+  createdAt?: string | null
+  updatedAt?: string | null
 }
 
-export interface ClerkAuthState {
+export interface AuthState {
   isLoaded: boolean
   isSignedIn: boolean
-  user: ClerkUser | null
+  user: AuthUser | null
   sessionId: string | null
 }
 
@@ -37,20 +36,3 @@ export interface CurrentUser {
   avatar?: string
   provider: string
 }
-
-/**
- * Clerk Auth Config
- */
-export interface ClerkConfig {
-  publishableKey: string
-  domain?: string
-  signInUrl?: string
-  signUpUrl?: string
-  afterSignInUrl?: string
-  afterSignUpUrl?: string
-}
-
-export interface ClerkResourceSnapshot {
-  user?: any | null
-  session?: { id?: string | null } | null
-}

package/auth/index.ts

@@ -1,4 +1,2 @@
 export * from './clerk-types'
 export * from './useAuthState'
-export * from './useClerkConfig'
-export * from './useClerkProvider'

package/auth/useAuthState.ts

@@ -1,9 +1,9 @@
-import type { ClerkAuthState, CurrentUser } from './clerk-types'
+import type { AuthState, CurrentUser } from './clerk-types'
 import { createGlobalState } from '@vueuse/core'
 import { computed, shallowReactive } from 'vue'
 
 export const useAuthState = createGlobalState(() => {
-  const authState = shallowReactive<ClerkAuthState>({
+  const authState = shallowReactive<AuthState>({
     isLoaded: false,
     isSignedIn: false,
     user: null,
@@ -21,23 +21,15 @@ export function useCurrentUser() {
       return null
     }
 
-    const { firstName, lastName, username, imageUrl } = authState.user
-    let name = ''
-    if (firstName || lastName) {
-      name = [firstName, lastName].filter(Boolean).join(' ')
-    }
-    else {
-      name = username || ''
-    }
-
-    const email = authState.user.emailAddresses?.[0]?.emailAddress || ''
+    const name = authState.user.name || authState.user.email || ''
+    const email = authState.user.email
 
     return {
       id: authState.user.id,
       name,
       email,
-      avatar: imageUrl,
-      provider: 'clerk',
+      avatar: authState.user.avatar || undefined,
+      provider: 'nexus',
     }
   })
 

package/base/index.ts

@@ -1,3 +1,5 @@
+export * from './log-level'
+
 export type Arch = 'x64' | 'x86' | 'arm' | 'arm64'
 
 export type OS = 'Win' | 'Darwin' | 'Linux' | 'Android' | 'iOS' | 'ipadOS' | 'web' | 'watchOS' | 'tvOS' | 'wearOS' | 'visionOS'

package/base/log-level.ts

@@ -0,0 +1,105 @@
+/**
+ * Unified Log Level Definition
+ *
+ * Single source of truth for log levels across the entire application.
+ * Used by both module logger and plugin logger systems.
+ */
+
+/**
+ * Log level enumeration with numeric values for comparison
+ */
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+  NONE = 4,
+}
+
+/**
+ * Log level string type (uppercase)
+ */
+export type LogLevelString = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR' | 'NONE'
+
+/**
+ * Log level string type (lowercase)
+ */
+export type LogLevelStringLower = 'debug' | 'info' | 'warn' | 'error' | 'none'
+
+/**
+ * Convert LogLevel enum to uppercase string
+ */
+export function logLevelToString(level: LogLevel): LogLevelString {
+  switch (level) {
+    case LogLevel.DEBUG:
+      return 'DEBUG'
+    case LogLevel.INFO:
+      return 'INFO'
+    case LogLevel.WARN:
+      return 'WARN'
+    case LogLevel.ERROR:
+      return 'ERROR'
+    case LogLevel.NONE:
+      return 'NONE'
+    default:
+      return 'INFO'
+  }
+}
+
+/**
+ * Convert LogLevel enum to lowercase string
+ */
+export function logLevelToLowerString(level: LogLevel): LogLevelStringLower {
+  return logLevelToString(level).toLowerCase() as LogLevelStringLower
+}
+
+/**
+ * Convert string to LogLevel enum
+ */
+export function stringToLogLevel(str: string): LogLevel {
+  const upper = str.toUpperCase()
+  switch (upper) {
+    case 'DEBUG':
+      return LogLevel.DEBUG
+    case 'INFO':
+      return LogLevel.INFO
+    case 'WARN':
+    case 'WARNING':
+      return LogLevel.WARN
+    case 'ERROR':
+      return LogLevel.ERROR
+    case 'NONE':
+    case 'OFF':
+      return LogLevel.NONE
+    default:
+      return LogLevel.INFO
+  }
+}
+
+/**
+ * Check if a level should be logged given a minimum level
+ */
+export function shouldLog(level: LogLevel, minLevel: LogLevel): boolean {
+  return level >= minLevel
+}
+
+/**
+ * Get all log levels as array (excluding NONE)
+ */
+export function getLogLevels(): LogLevel[] {
+  return [LogLevel.DEBUG, LogLevel.INFO, LogLevel.WARN, LogLevel.ERROR]
+}
+
+/**
+ * Get log level display name
+ */
+export function getLogLevelName(level: LogLevel): string {
+  const names: Record<LogLevel, string> = {
+    [LogLevel.DEBUG]: 'Debug',
+    [LogLevel.INFO]: 'Info',
+    [LogLevel.WARN]: 'Warning',
+    [LogLevel.ERROR]: 'Error',
+    [LogLevel.NONE]: 'None',
+  }
+  return names[level] ?? 'Unknown'
+}