@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/composables/use-resize-observer.js

@@ -0,0 +1,157 @@
+function isResizeObserverSupported() {
+  return typeof window < "u" && "ResizeObserver" in window;
+}
+function extractSize(sizes) {
+  if (!sizes || sizes.length === 0)
+    return null;
+  const size = sizes[0];
+  return {
+    width: size.inlineSize,
+    height: size.blockSize,
+    inlineSize: size.inlineSize,
+    blockSize: size.blockSize
+  };
+}
+export function useResizeObserver(target, callback, options = {}) {
+  const supported = isResizeObserverSupported();
+  let state = {
+    contentRect: null,
+    contentBoxSize: null,
+    borderBoxSize: null,
+    devicePixelContentBoxSize: null
+  }, listeners = [], observer = null;
+  const getElement = () => {
+    if (typeof target === "function")
+      return target();
+    return target;
+  }, notify = (entries) => {
+    if (entries.length > 0) {
+      const entry = entries[0];
+      state = {
+        contentRect: entry.contentRect,
+        contentBoxSize: extractSize(entry.contentBoxSize),
+        borderBoxSize: extractSize(entry.borderBoxSize),
+        devicePixelContentBoxSize: extractSize(entry.devicePixelContentBoxSize)
+      };
+    }
+    if (callback)
+      callback(entries);
+    listeners.forEach((fn) => fn(entries));
+  }, observe = () => {
+    if (!supported)
+      return;
+    const element = getElement();
+    if (!element)
+      return;
+    if (!observer)
+      observer = new ResizeObserver(notify);
+    observer.observe(element, { box: options.box });
+  }, disconnect = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      if (listeners.length === 0)
+        observe();
+      listeners.push(fn);
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0 && !callback)
+          disconnect();
+      };
+    },
+    observe,
+    disconnect,
+    isSupported: () => supported
+  };
+}
+export function useResizeObserverMultiple(targets, callback, options = {}) {
+  const supported = isResizeObserverSupported(), statesMap = new Map;
+  let listeners = [], observer = null;
+  const getElements = () => {
+    if (typeof targets === "function")
+      return targets();
+    return targets;
+  }, notify = (entries) => {
+    for (const entry of entries)
+      statesMap.set(entry.target, {
+        contentRect: entry.contentRect,
+        contentBoxSize: extractSize(entry.contentBoxSize),
+        borderBoxSize: extractSize(entry.borderBoxSize),
+        devicePixelContentBoxSize: extractSize(entry.devicePixelContentBoxSize)
+      });
+    if (callback)
+      callback(entries);
+    listeners.forEach((fn) => fn(entries));
+  }, observe = () => {
+    if (!supported)
+      return;
+    const elements = getElements();
+    if (elements.length === 0)
+      return;
+    if (!observer)
+      observer = new ResizeObserver(notify);
+    for (const element of elements)
+      observer.observe(element, { box: options.box });
+  }, disconnect = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    statesMap.clear();
+  };
+  return {
+    get: () => statesMap.values().next().value || {
+      contentRect: null,
+      contentBoxSize: null,
+      borderBoxSize: null,
+      devicePixelContentBoxSize: null
+    },
+    states: () => statesMap,
+    subscribe: (fn) => {
+      if (listeners.length === 0)
+        observe();
+      listeners.push(fn);
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0 && !callback)
+          disconnect();
+      };
+    },
+    observe,
+    disconnect,
+    isSupported: () => supported
+  };
+}
+export function useElementSize(target) {
+  let size = { width: 0, height: 0 }, listeners = [];
+  const observer = useResizeObserver(target, (entries) => {
+    if (entries.length > 0) {
+      const rect = entries[0].contentRect;
+      size = { width: rect.width, height: rect.height };
+      listeners.forEach((fn) => fn(size));
+    }
+  });
+  return {
+    get: () => size,
+    subscribe: (fn) => {
+      listeners.push(fn);
+      fn(size);
+      if (listeners.length === 1)
+        observer.observe();
+      return () => {
+        listeners = listeners.filter((l) => l !== fn);
+        if (listeners.length === 0)
+          observer.disconnect();
+      };
+    },
+    isSupported: observer.isSupported
+  };
+}
+export function hasResizeObserver() {
+  return isResizeObserverSupported();
+}

package/dist/composables/use-router.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Navigate to a URL. Uses stxRouter if available, otherwise falls back to a
+ * full document load.
+ *
+ * Kept in step with the client runtime's `navigate` (#1807), which used to take
+ * a bare `forceReload` boolean while the shipped declaration promised
+ * `{ replace }` — so `navigate(url, { replace: true })` type-checked and then
+ * did a full load that PUSHED a history entry.
+ *
+ * @example
+ * ```ts
+ * navigate('/about')
+ * navigate('/dashboard', { replace: true })
+ * navigate('/legacy', { reload: true })
+ * ```
+ */
+export declare function navigate(url: string, options?: NavigateOptions | boolean): void;
+/**
+ * Go back in browser history.
+ */
+export declare function goBack(): void;
+/**
+ * Go forward in browser history.
+ */
+export declare function goForward(): void;
+/**
+ * Get reactive route information.
+ *
+ * @example
+ * ```ts
+ * const route = useRoute()
+ * console.log(route.path)   // '/about'
+ * console.log(route.query)  // { page: '2' }
+ * ```
+ */
+export declare function useRoute(): RouteInfo;
+/**
+ * Set route params (called by server injection or page scripts).
+ */
+export declare function setRouteParams(params: Record<string, string>): void;
+/**
+ * Reactive URL search parameters with get/set/setAll methods.
+ *
+ * @example
+ * ```ts
+ * const search = useSearchParams()
+ * search.set('page', '2')
+ * console.log(search.get('page')) // '2'
+ * ```
+ */
+export declare function useSearchParams(): SearchParamsRef;
+export declare interface RouteInfo {
+  path: string
+  fullPath: string
+  hash: string
+  query: Record<string, string>
+  params: Record<string, string>
+}
+/**
+ * How a search-param mutation is written to session history.
+ *
+ * Spelled `{ replace }` to match `navigate()`, which already takes it — before
+ * this the two halves of the routing API disagreed on whether replacing was
+ * expressible at all.
+ */
+export declare interface SearchParamsCommitOptions {
+  replace?: boolean
+}
+export declare interface SearchParamsRef {
+  data: { (): Record<string, string>, set: (v: Record<string, string>) => void }
+  get: (key: string) => string | undefined
+  has: (key: string) => boolean
+  set: (key: string, value: string, options?: SearchParamsCommitOptions) => void
+  delete: (key: string, options?: SearchParamsCommitOptions) => void
+  setAll: (obj: Record<string, string>, options?: SearchParamsCommitOptions) => void
+}
+export declare interface NavigateOptions {
+  replace?: boolean
+  reload?: boolean
+}

package/dist/composables/use-router.js

@@ -0,0 +1,105 @@
+import { state } from "../signals-api.js";
+export function navigate(url, options) {
+  if (typeof window > "u")
+    return;
+  const opts = options && typeof options === "object" ? options : { reload: !!options }, router = window.stxRouter;
+  if (!opts.reload && router?.navigate) {
+    router.navigate(url, { replace: !!opts.replace });
+    return;
+  }
+  if (opts.replace)
+    window.location.replace(url);
+  else
+    window.location.href = url;
+}
+export function goBack() {
+  if (typeof window < "u")
+    window.history.back();
+}
+export function goForward() {
+  if (typeof window < "u")
+    window.history.forward();
+}
+export function useRoute() {
+  if (typeof window > "u")
+    return { path: "/", fullPath: "/", hash: "", query: {}, params: {} };
+  if (window.stx?.useRoute)
+    return window.stx.useRoute();
+  return {
+    get path() {
+      return window.location.pathname;
+    },
+    get fullPath() {
+      return window.location.pathname + window.location.search + window.location.hash;
+    },
+    get hash() {
+      return window.location.hash;
+    },
+    get query() {
+      const params = {};
+      new URLSearchParams(window.location.search).forEach((v, k) => {
+        params[k] = v;
+      });
+      return params;
+    },
+    get params() {
+      return window.stx?._rp ?? {};
+    }
+  };
+}
+export function setRouteParams(params) {
+  if (typeof window < "u" && window.stx?.setRouteParams)
+    window.stx.setRouteParams(params);
+}
+export function useSearchParams() {
+  if (typeof window < "u" && window.stx?.useSearchParams)
+    return window.stx.useSearchParams();
+  if (typeof window > "u")
+    return {
+      data: Object.assign(() => ({}), { set: () => {} }),
+      get: () => {
+        return;
+      },
+      has: () => !1,
+      set: () => {},
+      delete: () => {},
+      setAll: () => {}
+    };
+  const read = () => {
+    const out = {};
+    new URLSearchParams(window.location.search).forEach((v, k) => {
+      out[k] = v;
+    });
+    return out;
+  }, data = state(read()), sync = () => data.set(read());
+  window.addEventListener("popstate", sync);
+  window.addEventListener("stx:navigate", sync);
+  const commit = (url, options) => {
+    if (!!(options && typeof options === "object" && options.replace))
+      window.history.replaceState({}, "", url);
+    else
+      window.history.pushState({}, "", url);
+    sync();
+  }, has = (key) => Object.prototype.hasOwnProperty.call(data(), key);
+  return {
+    data,
+    get: (key) => has(key) ? data()[key] : void 0,
+    has,
+    set: (key, value, options) => {
+      const url = new URL(window.location.href);
+      url.searchParams.set(key, value);
+      commit(url, options);
+    },
+    delete: (key, options) => {
+      const url = new URL(window.location.href);
+      url.searchParams.delete(key);
+      commit(url, options);
+    },
+    setAll: (obj, options) => {
+      const url = new URL(window.location.href);
+      for (const [k, v] of Object.entries(obj))
+        url.searchParams.set(k, v);
+      commit(url, options);
+    }
+  };
+}

package/dist/composables/use-scroll-lock.d.ts

@@ -0,0 +1,13 @@
+import type { Signal } from '../signals-api';
+/**
+ * Reactively lock scrolling on an element, defaulting to the document body.
+ *
+ * Multiple locks on the same element are reference counted, so releasing one
+ * overlay cannot restore scrolling while another overlay is still open.
+ */
+export declare function useScrollLock(target?: ScrollLockTarget): Signal<boolean>;
+declare type ScrollLockTarget = | HTMLElement
+  | null
+  | undefined
+  | { current?: HTMLElement | null, value?: HTMLElement | null }
+  | (() => HTMLElement | null | undefined);

package/dist/composables/use-scroll-lock.js

@@ -0,0 +1,55 @@
+import { onDestroy, state } from "../signals-api.js";
+const scrollLockStates = new WeakMap;
+function resolveTarget(target) {
+  let value = target;
+  if (typeof value === "function")
+    value = value();
+  if (value && typeof value === "object" && "current" in value)
+    value = value.current;
+  if (value && typeof value === "object" && !("nodeType" in value) && "value" in value)
+    value = value.value;
+  return value || document.body || document.documentElement;
+}
+function acquire(element) {
+  const existing = scrollLockStates.get(element);
+  if (existing) {
+    existing.count += 1;
+    return;
+  }
+  scrollLockStates.set(element, { count: 1, overflow: element.style.overflow });
+  element.style.overflow = "hidden";
+}
+function release(element) {
+  const existing = scrollLockStates.get(element);
+  if (!existing)
+    return;
+  existing.count -= 1;
+  if (existing.count > 0)
+    return;
+  element.style.overflow = existing.overflow;
+  scrollLockStates.delete(element);
+}
+export function useScrollLock(target) {
+  const locked = state(!1);
+  let lockedElement = null;
+  const unsubscribe = locked.subscribe((value) => {
+    if (value) {
+      if (lockedElement)
+        return;
+      lockedElement = resolveTarget(target);
+      if (lockedElement)
+        acquire(lockedElement);
+    } else if (lockedElement) {
+      release(lockedElement);
+      lockedElement = null;
+    }
+  });
+  onDestroy(() => {
+    unsubscribe();
+    if (lockedElement) {
+      release(lockedElement);
+      lockedElement = null;
+    }
+  });
+  return locked;
+}

package/dist/composables/use-share.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Check if file sharing is supported
+ */
+declare function isFileShareSupported(): boolean;
+/**
+ * Reactive share composable
+ */
+export declare function useShare(): ShareRef;
+/**
+ * Simple share helper
+ */
+export declare function share(data: ShareData): Promise<ShareResult>;
+/**
+ * Share a URL with optional title and text
+ */
+export declare function shareURL(url: string, title?: string, text?: string): Promise<ShareResult>;
+/**
+ * Share text content
+ */
+export declare function shareText(text: string, title?: string): Promise<ShareResult>;
+/**
+ * Share files
+ */
+export declare function shareFiles(files: File[], title?: string, text?: string): Promise<ShareResult>;
+/**
+ * Create a shareable file from a blob
+ */
+export declare function createShareableFile(blob: Blob, filename: string, mimeType?: string): File;
+/**
+ * Share current page
+ */
+export declare function shareCurrentPage(text?: string): Promise<ShareResult>;
+/**
+ * Copy to clipboard as fallback when share is not supported
+ */
+export declare function shareWithFallback(data: ShareData, fallbackMessage?: string): Promise<ShareResult & { usedFallback?: boolean }>;
+/**
+ * useShare - Web Share API wrapper
+ *
+ * Share content using the native share dialog on supported devices.
+ *
+ * @example
+ * ```ts
+ * const { isSupported, share, canShare } = useShare()
+ *
+ * // Share text
+ * await share({ title: 'Check this out!', text: 'Amazing content', url: 'https://example.com' })
+ *
+ * // Share files
+ * await share({ files: [imageFile] })
+ *
+ * // Check if specific content can be shared
+ * if (canShare({ files: [pdfFile] })) {
+ *   await share({ files: [pdfFile] })
+ * }
+ * ```
+ */
+export declare interface ShareData {
+  title?: string
+  text?: string
+  url?: string
+  files?: File[]
+}
+export declare interface ShareResult {
+  success: boolean
+  error?: Error
+  cancelled?: boolean
+}
+export declare interface ShareRef {
+  isSupported: () => boolean
+  isFileShareSupported: () => boolean
+  canShare: (data?: ShareData) => boolean
+  share: (data: ShareData) => Promise<ShareResult>
+}

package/dist/composables/use-share.js

@@ -0,0 +1,104 @@
+function isShareSupported() {
+  return typeof navigator < "u" && "share" in navigator;
+}
+function isFileShareSupported() {
+  return typeof navigator < "u" && "canShare" in navigator;
+}
+export function useShare() {
+  const supported = isShareSupported(), fileSupported = isFileShareSupported(), canShare = (data) => {
+    if (!supported)
+      return !1;
+    if (!data)
+      return !0;
+    if (data.files && data.files.length > 0) {
+      if (!fileSupported)
+        return !1;
+      try {
+        return navigator.canShare(data);
+      } catch {
+        return !1;
+      }
+    }
+    return !!(data.title || data.text || data.url);
+  };
+  return {
+    isSupported: () => supported,
+    isFileShareSupported: () => fileSupported,
+    canShare,
+    share: async (data) => {
+      if (!supported)
+        return {
+          success: !1,
+          error: Error("Web Share API is not supported")
+        };
+      if (!data.title && !data.text && !data.url && (!data.files || data.files.length === 0))
+        return {
+          success: !1,
+          error: Error("Share data must include at least one of: title, text, url, or files")
+        };
+      if (!canShare(data))
+        return {
+          success: !1,
+          error: Error("This content cannot be shared on this device")
+        };
+      try {
+        await navigator.share(data);
+        return { success: !0 };
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError")
+          return { success: !1, cancelled: !0 };
+        return {
+          success: !1,
+          error: err instanceof Error ? err : Error(String(err))
+        };
+      }
+    }
+  };
+}
+export async function share(data) {
+  return useShare().share(data);
+}
+export async function shareURL(url, title, text) {
+  return share({ url, title, text });
+}
+export async function shareText(text, title) {
+  return share({ text, title });
+}
+export async function shareFiles(files, title, text) {
+  return share({ files, title, text });
+}
+export function createShareableFile(blob, filename, mimeType) {
+  return new File([blob], filename, { type: mimeType || blob.type });
+}
+export async function shareCurrentPage(text) {
+  if (typeof document > "u" || typeof location > "u")
+    return { success: !1, error: Error("Not in browser environment") };
+  return share({
+    title: document.title,
+    url: location.href,
+    text
+  });
+}
+export async function shareWithFallback(data, fallbackMessage) {
+  const sharer = useShare();
+  if (sharer.isSupported() && sharer.canShare(data)) {
+    const result = await sharer.share(data);
+    if (result.success || result.cancelled)
+      return result;
+  }
+  const textToCopy = data.url || data.text || data.title || "";
+  if (!textToCopy)
+    return { success: !1, error: Error("Nothing to copy") };
+  try {
+    await navigator.clipboard.writeText(textToCopy);
+    if (fallbackMessage)
+      alert(fallbackMessage);
+    return { success: !0, usedFallback: !0 };
+  } catch (err) {
+    return {
+      success: !1,
+      error: err instanceof Error ? err : Error(String(err)),
+      usedFallback: !0
+    };
+  }
+}

package/dist/composables/use-speech.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Check if Speech Recognition is supported
+ */
+export declare function isSpeechRecognitionSupported(): boolean;
+/**
+ * Create a speech recognition composable
+ */
+export declare function useSpeechRecognition(options?: SpeechRecognitionOptions): SpeechRecognitionRef;
+/**
+ * Check if Speech Synthesis is supported
+ */
+export declare function isSpeechSynthesisSupported(): boolean;
+/**
+ * Create a speech synthesis composable
+ */
+export declare function useSpeechSynthesis(defaultOptions?: SpeechSynthesisOptions): SpeechSynthesisRef;
+/**
+ * Simple speak function
+ */
+export declare function speak(text: string, options?: SpeechSynthesisOptions): void;
+/**
+ * Stop all speech
+ */
+export declare function stopSpeaking(): void;
+/**
+ * Get available voices
+ */
+export declare function getVoices(): SpeechSynthesisVoice[];
+/**
+ * useSpeech - Web Speech API wrappers
+ *
+ * Speech recognition and synthesis for voice-enabled applications.
+ *
+ * @example
+ * ```ts
+ * // Speech Recognition
+ * const recognition = useSpeechRecognition({
+ *   continuous: false,
+ *   interimResults: true,
+ *   lang: 'en-US'
+ * })
+ *
+ * recognition.subscribe(state => {
+ *   console.log('Transcript:', state.transcript)
+ *   console.log('Is listening:', state.isListening)
+ * })
+ *
+ * recognition.start()
+ *
+ * // Speech Synthesis
+ * const speech = useSpeechSynthesis()
+ * speech.speak('Hello, world!')
+ * ```
+ */
+// ============================================================================
+// Speech Recognition
+// ============================================================================
+export declare interface SpeechRecognitionOptions {
+  continuous?: boolean
+  interimResults?: boolean
+  lang?: string
+  maxAlternatives?: number
+  grammars?: SpeechGrammarList
+}
+export declare interface SpeechRecognitionState {
+  isListening: boolean
+  transcript: string
+  finalTranscript: string
+  interimTranscript: string
+  confidence: number
+  isSupported: boolean
+  error: string | null
+}
+export declare interface SpeechRecognitionResult {
+  transcript: string
+  confidence: number
+  isFinal: boolean
+}
+export declare interface SpeechRecognitionRef {
+  get: () => SpeechRecognitionState
+  subscribe: (fn: (state: SpeechRecognitionState) => void) => () => void
+  start: () => void
+  stop: () => void
+  abort: () => void
+  toggle: () => void
+  isSupported: () => boolean
+  on: (event: 'result' | 'error' | 'start' | 'end', callback: (data?: any) => void) => () => void
+}
+// ============================================================================
+// Speech Synthesis
+// ============================================================================
+export declare interface SpeechSynthesisOptions {
+  voice?: string | number
+  rate?: number
+  pitch?: number
+  volume?: number
+  lang?: string
+}
+export declare interface SpeechSynthesisState {
+  isSpeaking: boolean
+  isPaused: boolean
+  isSupported: boolean
+  voices: SpeechSynthesisVoice[]
+  currentText: string
+}
+export declare interface SpeechSynthesisRef {
+  get: () => SpeechSynthesisState
+  subscribe: (fn: (state: SpeechSynthesisState) => void) => () => void
+  speak: (text: string, options?: SpeechSynthesisOptions) => void
+  stop: () => void
+  pause: () => void
+  resume: () => void
+  toggle: () => void
+  getVoices: () => SpeechSynthesisVoice[]
+  isSupported: () => boolean
+  on: (event: 'start' | 'end' | 'pause' | 'resume' | 'error', callback: (data?: any) => void) => () => void
+}