@strands.gg/accui 2.8.0 → 2.9.0

package/dist/vue/composables/useFloatingPosition.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+export type FloatingPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface UseFloatingPositionOptions {
+    trigger: Ref<HTMLElement | undefined>;
+    floating: Ref<HTMLElement | undefined>;
+    placement?: FloatingPlacement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    sameWidth?: boolean;
+    autoUpdate?: boolean;
+    boundary?: 'viewport' | 'scrollParent';
+    clickOutside?: {
+        enabled: boolean;
+        handler: () => void;
+    };
+}
+export declare function useFloatingPosition(options: UseFloatingPositionOptions): {
+    floatingStyle: Ref<Record<string, string>, Record<string, string>>;
+    updatePosition: () => void;
+    cleanup: () => void;
+};

package/dist/vue/composables/useModalStack.d.ts

@@ -0,0 +1,86 @@
+import { type ModalInstance } from '../utils/modalStack';
+export interface UseModalOptions {
+    closeOnEscape?: boolean;
+    priority?: 'low' | 'normal' | 'high' | 'critical';
+    component?: string;
+}
+export declare function useModalStack(options?: UseModalOptions): {
+    isOpen: import("vue").Ref<boolean, boolean>;
+    modalId: import("vue").Ref<symbol, symbol>;
+    modalInstance: import("vue").Ref<{
+        id: symbol;
+        closeModal: () => void;
+        closeOnEscape: boolean;
+        zIndex: number;
+        component?: string;
+        priority?: "low" | "normal" | "high" | "critical";
+    }, ModalInstance | {
+        id: symbol;
+        closeModal: () => void;
+        closeOnEscape: boolean;
+        zIndex: number;
+        component?: string;
+        priority?: "low" | "normal" | "high" | "critical";
+    }>;
+    openModal: (customCloseHandler?: () => void) => Promise<ModalInstance>;
+    closeModal: () => void;
+    getModalContainer: () => Element | null;
+    getModalBackdrop: () => Element | null;
+    zIndex: () => number;
+    isTopModal: () => boolean;
+};
+export declare function useModalTeleport(modalId: symbol): {
+    target: string;
+    isAvailable: () => boolean;
+};
+export declare function useGlobalModalStack(): {
+    state: import("vue").Ref<{
+        modals: {
+            id: symbol;
+            closeModal: () => void;
+            closeOnEscape: boolean;
+            zIndex: number;
+            component?: string;
+            priority?: "low" | "normal" | "high" | "critical";
+        }[];
+        topModal: {
+            id: symbol;
+            closeModal: () => void;
+            closeOnEscape: boolean;
+            zIndex: number;
+            component?: string;
+            priority?: "low" | "normal" | "high" | "critical";
+        };
+        hasModals: boolean;
+        highestZIndex: number;
+    }, import("../utils/modalStack").ModalStackState | {
+        modals: {
+            id: symbol;
+            closeModal: () => void;
+            closeOnEscape: boolean;
+            zIndex: number;
+            component?: string;
+            priority?: "low" | "normal" | "high" | "critical";
+        }[];
+        topModal: {
+            id: symbol;
+            closeModal: () => void;
+            closeOnEscape: boolean;
+            zIndex: number;
+            component?: string;
+            priority?: "low" | "normal" | "high" | "critical";
+        };
+        hasModals: boolean;
+        highestZIndex: number;
+    }>;
+    closeAll: () => void;
+    closeTop: () => void;
+    getModalByComponent: (componentName: string) => {
+        id: symbol;
+        closeModal: () => void;
+        closeOnEscape: boolean;
+        zIndex: number;
+        component?: string;
+        priority?: "low" | "normal" | "high" | "critical";
+    };
+};

package/dist/vue/composables/useOAuthProviders.d.ts

@@ -0,0 +1,73 @@
+export interface OAuthProvider {
+    id: string;
+    name: string;
+    displayName?: string;
+    icon?: string;
+    iconUrl?: string;
+    auth_url: string;
+    scopes: string[];
+    enabled: boolean;
+    metadata?: Record<string, string>;
+}
+export interface OAuthProvidersResponse {
+    providers: OAuthProvider[];
+    redirect_url: string;
+}
+export interface OAuthProviderDetailsResponse {
+    success: boolean;
+    data: {
+        provider: OAuthProvider;
+        authUrl: string;
+        state?: string;
+    };
+    error?: {
+        code: string;
+        message: string;
+        details?: any;
+    };
+}
+export interface UseOAuthProvidersOptions {
+    redirectUrl?: string;
+    scopes?: string[];
+}
+export declare function useOAuthProviders(options?: UseOAuthProvidersOptions): {
+    providers: import("vue").ComputedRef<{
+        id: string;
+        name: string;
+        displayName?: string;
+        icon?: string;
+        iconUrl?: string;
+        auth_url: string;
+        scopes: string[];
+        enabled: boolean;
+        metadata?: Record<string, string>;
+    }[]>;
+    enabledProviders: import("vue").ComputedRef<{
+        id: string;
+        name: string;
+        displayName?: string;
+        icon?: string;
+        iconUrl?: string;
+        auth_url: string;
+        scopes: string[];
+        enabled: boolean;
+        metadata?: Record<string, string>;
+    }[]>;
+    loading: import("vue").ComputedRef<boolean>;
+    error: import("vue").ComputedRef<string>;
+    fetchProviders: () => Promise<OAuthProvider[]>;
+    getProviderAuthUrl: (providerId: string, customOptions?: Partial<UseOAuthProvidersOptions>) => Promise<string>;
+    redirectToProvider: (providerId: string, customOptions?: Partial<UseOAuthProvidersOptions>) => Promise<void>;
+    getProviderById: (providerId: string) => {
+        id: string;
+        name: string;
+        displayName?: string;
+        icon?: string;
+        iconUrl?: string;
+        auth_url: string;
+        scopes: string[];
+        enabled: boolean;
+        metadata?: Record<string, string>;
+    };
+    getProviderIcon: (provider: OAuthProvider) => string;
+};

package/dist/vue/composables/useStrandsAuth.d.ts

@@ -0,0 +1,2 @@
+import type { UseStrandsAuthReturn } from '../../types';
+export declare function useStrandsAuth(): UseStrandsAuthReturn;

package/dist/vue/composables/useStrandsConfig.d.ts

@@ -0,0 +1,5 @@
+export type { StrandsAuthConfig, StrandsAuthEndpoints } from '../../types';
+import type { StrandsAuthConfig, UseStrandsConfigReturn } from '../../types';
+export declare function provideStrandsConfig(config: StrandsAuthConfig): void;
+export declare function useStrandsConfig(fallbackConfig?: Partial<StrandsAuthConfig>): UseStrandsConfigReturn;
+export declare function setStrandsConfig(config: StrandsAuthConfig): void;

package/dist/vue/composables/useStrandsMfa.d.ts

@@ -0,0 +1,36 @@
+import type { MfaDevicesResponse, TotpSetupResponse, BackupCodesResponse } from '../../types';
+export declare function useStrandsMfa(): {
+    mfaDevices: import("vue").ComputedRef<{
+        id: string;
+        device_type: import("../..").MfaDeviceType;
+        device_name: string;
+        is_active: boolean;
+        last_used_at?: string | Date;
+        created_at: string | Date;
+    }[]>;
+    mfaEnabled: import("vue").ComputedRef<boolean>;
+    loading: import("vue").ComputedRef<boolean>;
+    hasMfaDevices: import("vue").ComputedRef<boolean>;
+    activeMfaDevices: import("vue").ComputedRef<{
+        id: string;
+        device_type: import("../..").MfaDeviceType;
+        device_name: string;
+        is_active: boolean;
+        last_used_at?: string | Date;
+        created_at: string | Date;
+    }[]>;
+    fetchMfaDevices: () => Promise<MfaDevicesResponse>;
+    setupTotp: (deviceName: string) => Promise<TotpSetupResponse>;
+    verifyTotpSetup: (deviceId: string, totpCode: string) => Promise<void>;
+    setupEmailMfa: (deviceName: string) => Promise<{
+        device_id: string;
+        email: string;
+    }>;
+    sendEmailMfaCode: (deviceId: string) => Promise<void>;
+    verifyEmailMfaCode: (deviceId: string, code: string) => Promise<boolean>;
+    disableMfaDevice: (deviceId: string) => Promise<void>;
+    regenerateBackupCodes: (deviceId: string) => Promise<BackupCodesResponse>;
+    getDeviceTypeIcon: (deviceType: string) => string;
+    getDeviceTypeName: (deviceType: string) => string;
+    formatLastUsed: (lastUsedAt?: string | Date) => string;
+};

package/dist/vue/composables/useTheme.d.ts

@@ -0,0 +1,18 @@
+import { type ComputedRef } from 'vue';
+/**
+ * Composable for theme management
+ *
+ * Checks for UiApp theme provider and returns the appropriate theme
+ * If UiApp forces a theme (not 'auto'), all components must use that theme
+ */
+export declare function useTheme(fallbackTheme?: 'light' | 'dark' | 'auto'): {
+    theme: ComputedRef<"light" | "dark" | "auto">;
+    isDark: ComputedRef<boolean>;
+    isLight: ComputedRef<boolean>;
+    isForced: ComputedRef<boolean>;
+    themeClass: ComputedRef<{
+        'ui-theme--light': boolean;
+        'ui-theme--dark': boolean;
+        'ui-theme--forced': boolean;
+    }>;
+};

package/dist/vue/index.d.ts

@@ -0,0 +1,16 @@
+export * from './components/index';
+export * from './ui/index';
+export { default as StrandsUIPlugin, injectSquircleStyles } from './plugins/StrandsUIPlugin';
+export * from './composables/useStrandsAuth';
+export * from './composables/useStrandsConfig';
+export * from './composables/useOAuthProviders';
+export * from './composables/useAuthenticatedFetch';
+export * from './composables/useDarkMode';
+export * from './composables/useTheme';
+export * from './composables/useFloatingPosition';
+export * from './composables/useModalStack';
+export * from './utils/requestCache';
+export * from './utils/debounce';
+export * from './utils/fontPreloader';
+export * from './utils/lazyComponents';
+export * from './utils/performanceInit';

package/dist/vue/plugins/StrandsUIPlugin.d.ts

@@ -0,0 +1,20 @@
+import type { App } from 'vue';
+import '../../styles/base.css';
+import StrandsUiAlert from '../ui/UiAlert.vue';
+import StrandsUiButton from '../ui/UiButton.vue';
+import StrandsUiCard from '../ui/UiCard.vue';
+import StrandsUiInput from '../ui/UiInput.vue';
+import StrandsUiLink from '../ui/UiLink.vue';
+import StrandsUiTabs from '../ui/UiTabs.vue';
+import StrandsUiLoader from '../ui/UiLoader.vue';
+declare function injectSquircleStyles(): void;
+export interface StrandsUIOptions {
+    prefix?: string;
+}
+declare const _default: {
+    install(app: App, options?: StrandsUIOptions): void;
+};
+export default _default;
+export { StrandsUiAlert, StrandsUiButton, StrandsUiCard, StrandsUiInput, StrandsUiLink, StrandsUiTabs, StrandsUiLoader, };
+export { injectSquircleStyles };
+export type { ButtonVariant, ButtonSize, InputType, CardVariant, LinkVariant, AlertVariant, } from '../ui/index';

package/dist/vue/ui/UiButton/index.d.ts

@@ -0,0 +1,13 @@
+import UiButton from '../UiButton.vue';
+import UiButtonContent from './UiButton.Content.vue';
+import UiButtonAnchor from './UiButton.Anchor.vue';
+import UiButtonNuxt from './UiButton.Nuxt.vue';
+import UiButtonVue from './UiButton.Vue.vue';
+declare const CompoundUiButton: typeof UiButton & {
+    Content: typeof UiButtonContent;
+    Anchor: typeof UiButtonAnchor;
+    Nuxt: typeof UiButtonNuxt;
+    Vue: typeof UiButtonVue;
+};
+export default CompoundUiButton;
+export { UiButtonContent, UiButtonAnchor, UiButtonNuxt, UiButtonVue };

package/dist/vue/ui/index.d.ts

@@ -0,0 +1,54 @@
+export { default as StrandsUiApp } from './UiApp.vue';
+export { default as StrandsUiAlert } from './UiAlert.vue';
+export { default as StrandsUiButton } from './UiButton';
+export { default as StrandsUiCard } from './UiCard.vue';
+export { default as StrandsUiInput } from './UiInput.vue';
+export { default as StrandsUiLink } from './UiLink.vue';
+export { default as StrandsUiTabs } from './UiTabs.vue';
+export { default as StrandsUiLoader } from './UiLoader.vue';
+export { default as StrandsUiToggle } from './UiToggle.vue';
+export { default as StrandsUiAvatarEditor } from './UiAvatarEditor.vue';
+export { default as StrandsUiLevelProgress } from './UiLevelProgress.vue';
+export { default as StrandsUiModal } from './UiModal.vue';
+export { default as StrandsUiColorPicker } from './UiColorPicker.vue';
+export { default as StrandsUiTooltip } from './UiTooltip.vue';
+export { default as StrandsUiDivider } from './UiDivider.vue';
+export { default as StrandsUiTable } from './UiTable.vue';
+export { default as StrandsUiHero } from './UiHero.vue';
+export { default as StrandsUiThemeToggle } from './UiThemeToggle.vue';
+export { default as StrandsUiSlider } from './UiSlider.vue';
+export { default as StrandsUiRadioGroup } from './UiRadioGroup.vue';
+export { default as StrandsUiCheckboxGroup } from './UiCheckboxGroup.vue';
+export { default as StrandsUiPill } from './UiPill.vue';
+export { default as UiApp } from './UiApp.vue';
+export { default as UiAlert } from './UiAlert.vue';
+export { default as UiButton } from './UiButton';
+export { default as UiCard } from './UiCard.vue';
+export { default as UiInput } from './UiInput.vue';
+export { default as UiLink } from './UiLink.vue';
+export { default as UiTabs } from './UiTabs.vue';
+export { default as UiLoader } from './UiLoader.vue';
+export { default as UiToggle } from './UiToggle.vue';
+export { default as UiAvatarEditor } from './UiAvatarEditor.vue';
+export { default as UiAvatarEditorSimple } from './UiAvatarEditor.vue';
+export { default as UiLevelProgress } from './UiLevelProgress.vue';
+export { default as UiModal } from './UiModal.vue';
+export { default as UiColorPicker } from './UiColorPicker.vue';
+export { default as UiTooltip } from './UiTooltip.vue';
+export { default as UiDivider } from './UiDivider.vue';
+export { default as UiTable } from './UiTable.vue';
+export { default as UiHero } from './UiHero.vue';
+export { default as UiThemeToggle } from './UiThemeToggle.vue';
+export { default as UiSlider } from './UiSlider.vue';
+export { default as UiRadioGroup } from './UiRadioGroup.vue';
+export { default as UiCheckboxGroup } from './UiCheckboxGroup.vue';
+export { default as UiPill } from './UiPill.vue';
+export type ButtonVariant = 'primary' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+export type CardVariant = 'default' | 'modern' | 'minimal';
+export type LinkVariant = 'primary' | 'ghost' | 'underline';
+export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+export type PillVariant = 'filled' | 'outline' | 'ghost' | 'dot' | 'dot-only';
+export type PillSize = 'xs' | 'sm' | 'md' | 'lg';
+export type PillColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';

package/dist/vue/utils/contrast.d.ts

@@ -0,0 +1,75 @@
+/**
+ * WCAG 3.0 APCA-based contrast calculation utilities
+ * Provides perceptually accurate text contrast determination for accessibility
+ */
+/**
+ * Convert hex color to RGB values
+ */
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * APCA sRGB to Y (luminance) conversion - WCAG 3.0 method
+ */
+export declare const sRGBtoY: (r: number, g: number, b: number) => number;
+/**
+ * APCA contrast calculation
+ * Returns contrast value between -108 and 105
+ */
+export declare const calcAPCA: (txtY: number, bgY: number) => number;
+/**
+ * Get RGB color for semantic color names
+ */
+export declare const getSemanticRgb: (colorName: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Calculate APCA contrast score between two colors
+ * @param textColor RGB object or hex string for text color
+ * @param backgroundColor RGB object or hex string for background color
+ * @returns APCA contrast score (-108 to 105)
+ */
+export declare const getAPCAContrast: (textColor: {
+    r: number;
+    g: number;
+    b: number;
+} | string, backgroundColor: {
+    r: number;
+    g: number;
+    b: number;
+} | string) => number;
+/**
+ * Get APCA contrast threshold based on font weight and size
+ * WCAG 3.0 APCA thresholds vary based on font characteristics
+ */
+export declare const getAPCAThreshold: (fontWeight?: number, fontSize?: number) => number;
+/**
+ * Determine optimal text color (black or white) for a given background
+ * Uses WCAG 3.0 APCA algorithm for accurate contrast assessment
+ * @param colorProp Color property string (e.g., 'red-500', 'blue/50')
+ * @param fontWeight Font weight (300-900, default 400)
+ * @param fontSize Font size in pixels (default 16)
+ * @returns '#000000' for black text or '#ffffff' for white text
+ */
+export declare const getContrastTextColor: (colorProp: string, fontWeight?: number, fontSize?: number) => string;
+/**
+ * Check if a color combination meets WCAG 3.0 APCA standards
+ * @param textColor Text color (RGB object or hex string)
+ * @param backgroundColor Background color (RGB object or hex string)
+ * @param fontWeight Font weight (300-900, default 400)
+ * @param fontSize Font size in pixels (default 16)
+ * @returns boolean indicating if contrast is sufficient
+ */
+export declare const meetsAPCAStandard: (textColor: {
+    r: number;
+    g: number;
+    b: number;
+} | string, backgroundColor: {
+    r: number;
+    g: number;
+    b: number;
+} | string, fontWeight?: number, fontSize?: number) => boolean;

package/dist/vue/utils/debounce.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Debounce utility for optimizing frequent operations
+ */
+export declare function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Debounced localStorage setter
+ */
+export declare const debouncedSetItem: (key: string, value: string) => void;
+/**
+ * Throttle utility for limiting function execution frequency
+ */
+export declare function throttle<T extends (...args: any[]) => void>(func: T, limit: number): (...args: Parameters<T>) => void;

package/dist/vue/utils/fontPreloader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Font preloading utility for better performance
+ */
+/**
+ * Preload critical fonts
+ */
+export declare function preloadFonts(): void;
+/**
+ * Optimize font loading with font-display: swap
+ */
+export declare function optimizeFontLoading(): void;

package/dist/vue/utils/iconProps.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Standard props for icon components
+ */
+export declare const iconProps: {
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+};

package/dist/vue/utils/lazyComponents.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Lazy loading configuration for heavy components
+ */
+export declare const preloadCriticalComponents: () => void;

package/dist/vue/utils/levels.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Level and XP calculation utilities for the Strands leveling system
+ */
+/**
+ * Calculate XP required for a specific level using the provided formula
+ */
+export declare const getXpForLevel: (level: number) => number;
+/**
+ * Calculate the current level from total XP
+ */
+export declare const getLevelFromXp: (totalXp: number) => number;
+/**
+ * Calculate the current level from total XP (alias for consistency)
+ */
+export declare const calculateLevel: (totalXp: number) => number;
+/**
+ * Calculate XP progress percentage toward the next level
+ */
+export declare const calculateXpProgress: (totalXp: number) => number;
+/**
+ * Get the current XP within the current level
+ */
+export declare const getCurrentLevelExp: (totalXp: number) => number;
+/**
+ * Get the XP needed to reach the next level
+ */
+export declare const getExpToNextLevel: (totalXp: number) => number;

package/dist/vue/utils/modalStack.d.ts

@@ -0,0 +1,31 @@
+export interface ModalInstance {
+    id: symbol;
+    closeModal: () => void;
+    closeOnEscape: boolean;
+    zIndex: number;
+    component?: string;
+    priority?: 'low' | 'normal' | 'high' | 'critical';
+}
+export interface ModalStackState {
+    modals: ModalInstance[];
+    topModal: ModalInstance | null;
+    hasModals: boolean;
+    highestZIndex: number;
+}
+declare class ModalStack {
+    private stack;
+    private escapeHandlerRegistered;
+    private baseZIndex;
+    private subscribers;
+    private handleEscape;
+    private calculateZIndex;
+    private notifySubscribers;
+    add(modal: Omit<ModalInstance, 'zIndex'>): ModalInstance;
+    remove(modalId: symbol): void;
+    subscribe(callback: (state: ModalStackState) => void): () => void;
+    get length(): number;
+    get state(): ModalStackState;
+    cleanup(): void;
+}
+export declare const modalStack: ModalStack;
+export {};

package/dist/vue/utils/performanceInit.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Performance initialization utility
+ * Optimizes loading and runtime performance
+ */
+/**
+ * Initialize all performance optimizations
+ */
+export declare function initializePerformanceOptimizations(): void;
+/**
+ * Optimize runtime performance
+ */
+export declare function optimizeRuntimePerformance(): void;
+/**
+ * Cleanup performance optimizations
+ */
+export declare function cleanupPerformanceOptimizations(): void;
+/**
+ * Get performance metrics
+ */
+export declare function getPerformanceMetrics(): {
+    domContentLoaded?: undefined;
+    loadComplete?: undefined;
+    dns?: undefined;
+    tcp?: undefined;
+    ttfb?: undefined;
+    domInteractive?: undefined;
+    memoryUsage?: undefined;
+} | {
+    domContentLoaded: number;
+    loadComplete: number;
+    dns: number;
+    tcp: number;
+    ttfb: number;
+    domInteractive: number;
+    memoryUsage: {
+        used: any;
+        total: any;
+        limit: any;
+    };
+};

package/dist/vue/utils/requestCache.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Request deduplication and caching utility
+ * Prevents duplicate API calls and provides simple caching
+ */
+declare class RequestCache {
+    private cache;
+    private readonly DEFAULT_TTL;
+    /**
+     * Memoized fetch - prevents duplicate requests and caches results
+     */
+    fetch<T>(key: string, fetcher: () => Promise<T>, ttl?: number): Promise<T>;
+    /**
+     * Clear all cached entries
+     */
+    clear(): void;
+    /**
+     * Remove a specific cache entry
+     */
+    invalidate(key: string): void;
+    /**
+     * Clean expired cache entries
+     */
+    private cleanExpired;
+    /**
+     * Get cache statistics (for debugging)
+     */
+    getStats(): {
+        size: number;
+        entries: string[];
+    };
+}
+export declare const requestCache: RequestCache;
+/**
+ * Composable for request deduplication
+ */
+export declare function useRequestCache(): {
+    fetch: <T>(key: string, fetcher: () => Promise<T>, ttl?: number) => Promise<T>;
+    clear: () => void;
+    invalidate: (key: string) => void;
+    getStats: () => {
+        size: number;
+        entries: string[];
+    };
+};
+/**
+ * Generate cache key from URL and options
+ */
+export declare function getCacheKey(url: string, options?: RequestInit): string;
+export {};