@sc4rfurryx/proteusjs 1.0.0 → 1.1.1

package/package.json

@@ -1,11 +1,67 @@
 {
   "name": "@sc4rfurryx/proteusjs",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "type": "module",
   "description": "The Modern Web Development Framework for Accessible, Responsive, and High-Performance Applications. Intelligent container queries, fluid typography, WCAG compliance, and performance optimization.",
   "main": "dist/proteus.js",
   "module": "dist/proteus.esm.js",
   "types": "dist/proteus.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/proteus.d.ts",
+      "import": "./dist/proteus.esm.js",
+      "require": "./dist/proteus.cjs.js"
+    },
+    "./transitions": {
+      "types": "./dist/modules/transitions.d.ts",
+      "import": "./dist/modules/transitions.esm.js"
+    },
+    "./scroll": {
+      "types": "./dist/modules/scroll.d.ts",
+      "import": "./dist/modules/scroll.esm.js"
+    },
+    "./anchor": {
+      "types": "./dist/modules/anchor.d.ts",
+      "import": "./dist/modules/anchor.esm.js"
+    },
+    "./popover": {
+      "types": "./dist/modules/popover.d.ts",
+      "import": "./dist/modules/popover.esm.js"
+    },
+    "./container": {
+      "types": "./dist/modules/container.d.ts",
+      "import": "./dist/modules/container.esm.js"
+    },
+    "./typography": {
+      "types": "./dist/modules/typography.d.ts",
+      "import": "./dist/modules/typography.esm.js"
+    },
+    "./a11y-audit": {
+      "types": "./dist/modules/a11y-audit.d.ts",
+      "import": "./dist/modules/a11y-audit.esm.js"
+    },
+    "./a11y-primitives": {
+      "types": "./dist/modules/a11y-primitives.d.ts",
+      "import": "./dist/modules/a11y-primitives.esm.js"
+    },
+    "./perf": {
+      "types": "./dist/modules/perf.d.ts",
+      "import": "./dist/modules/perf.esm.js"
+    },
+    "./adapters/react": {
+      "types": "./dist/adapters/react.d.ts",
+      "import": "./dist/adapters/react.esm.js"
+    },
+    "./adapters/vue": {
+      "types": "./dist/adapters/vue.d.ts",
+      "import": "./dist/adapters/vue.esm.js"
+    },
+    "./adapters/svelte": {
+      "types": "./dist/adapters/svelte.d.ts",
+      "import": "./dist/adapters/svelte.esm.js"
+    }
+  },
+  "sideEffects": false,
   "files": [
     "dist",
     "src",
@@ -27,13 +83,19 @@
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
+    "typecheck:adapters": "tsc --noEmit -p tsconfig.adapters.json",
     "validate": "npm run typecheck && npm run lint",
     "size-check": "echo 'Bundle size: ~50KB gzipped'",
     "benchmark": "vitest run tests/benchmarks/performance-benchmark.ts",
     "accessibility": "vitest run tests/validation/accessibility-validation.test.ts",
     "docs:build": "typedoc src/index.ts",
-    "prepublishOnly": "npm run validate && npm run build:prod",
-    "release": "npm run validate && npm run build:prod && npm publish"
+    "prepublishOnly": "npm run build:prod",
+    "release": "npm run validate && npm run build:prod && npm publish",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major",
+    "release:dry": "node scripts/release.js patch --dry-run",
+    "publish:dev": "node scripts/publish-dev.js"
   },
   "keywords": [
     "responsive",
@@ -71,8 +133,8 @@
     "@types/node": "^22.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vitest/coverage-v8": "^2.0.0",
-    "@vitest/ui": "^2.0.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "cross-env": "^7.0.3",
     "eslint": "^9.0.0",
     "globals": "^16.3.0",
@@ -81,7 +143,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-dts": "^6.1.1",
     "typescript": "^5.5.0",
-    "vitest": "^2.0.0"
+    "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=16.0.0"
@@ -95,4 +157,4 @@
   "dependencies": {
     "tslib": "^2.8.1"
   }
-}
+}

package/src/adapters/react.ts

@@ -0,0 +1,264 @@
+/**
+ * @sc4rfurryx/proteusjs/adapters/react
+ * React hooks and components for ProteusJS
+ * 
+ * @version 1.1.0
+ * @author sc4rfurry
+ * @license MIT
+ */
+
+import React, { useEffect, useRef, useCallback, RefObject, createElement } from 'react';
+import { transition, TransitionOptions } from '../modules/transitions';
+import { scrollAnimate, ScrollAnimateOptions } from '../modules/scroll';
+import { attach as attachPopover, PopoverOptions, PopoverController } from '../modules/popover';
+import { tether, TetherOptions, TetherController } from '../modules/anchor';
+import { defineContainer, ContainerOptions } from '../modules/container';
+
+/**
+ * Hook for view transitions
+ */
+export function useTransition() {
+  return useCallback(async (
+    run: () => Promise<any> | any,
+    opts?: TransitionOptions
+  ) => {
+    return transition(run, opts);
+  }, []);
+}
+
+/**
+ * Hook for scroll-driven animations
+ */
+export function useScrollAnimate(
+  ref: RefObject<HTMLElement>,
+  opts: ScrollAnimateOptions
+) {
+  useEffect(() => {
+    if (!ref.current) return;
+
+    scrollAnimate(ref.current, opts);
+
+    return () => {
+      // Cleanup would be handled by the scroll module
+    };
+  }, [ref, opts]);
+}
+
+/**
+ * Hook for popover functionality
+ */
+export function usePopover(
+  triggerRef: RefObject<HTMLElement>,
+  panelRef: RefObject<HTMLElement>,
+  opts?: PopoverOptions
+): PopoverController | null {
+  const controllerRef = useRef<PopoverController | null>(null);
+
+  useEffect(() => {
+    if (!triggerRef.current || !panelRef.current) return;
+
+    controllerRef.current = attachPopover(triggerRef.current, panelRef.current, opts);
+
+    return () => {
+      if (controllerRef.current) {
+        controllerRef.current.destroy();
+        controllerRef.current = null;
+      }
+    };
+  }, [triggerRef, panelRef, opts]);
+
+  return controllerRef.current;
+}
+
+/**
+ * Hook for anchor positioning
+ */
+export function useAnchor(
+  floatingRef: RefObject<HTMLElement>,
+  anchorRef: RefObject<HTMLElement>,
+  opts?: Omit<TetherOptions, 'anchor'>
+): TetherController | null {
+  const controllerRef = useRef<TetherController | null>(null);
+
+  useEffect(() => {
+    if (!floatingRef.current || !anchorRef.current) return;
+
+    controllerRef.current = tether(floatingRef.current, {
+      anchor: anchorRef.current,
+      ...opts
+    });
+
+    return () => {
+      if (controllerRef.current) {
+        controllerRef.current.destroy();
+        controllerRef.current = null;
+      }
+    };
+  }, [floatingRef, anchorRef, opts]);
+
+  return controllerRef.current;
+}
+
+/**
+ * Hook for container queries
+ */
+export function useContainer(
+  ref: RefObject<HTMLElement>,
+  name?: string,
+  opts?: ContainerOptions
+) {
+  useEffect(() => {
+    if (!ref.current) return;
+
+    defineContainer(ref.current, name, opts);
+  }, [ref, name, opts]);
+}
+
+/**
+ * Hook for performance optimizations
+ */
+export function usePerformance(ref: RefObject<HTMLElement>) {
+  useEffect(() => {
+    if (!ref.current) return;
+
+    // Apply basic performance optimizations
+    const element = ref.current;
+    
+    // Content visibility for off-screen content
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            element.style.contentVisibility = 'visible';
+          } else {
+            element.style.contentVisibility = 'auto';
+          }
+        });
+      },
+      { rootMargin: '50px' }
+    );
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+}
+
+/**
+ * Hook for accessibility features
+ */
+export function useA11y(ref: RefObject<HTMLElement>, options: {
+  announceChanges?: boolean;
+  focusManagement?: boolean;
+} = {}): void {
+  const { announceChanges = false, focusManagement = true } = options;
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const element = ref.current;
+
+    // Basic accessibility enhancements
+    if (focusManagement) {
+      // Ensure focusable elements have visible focus indicators
+      const focusableElements = element.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+
+      focusableElements.forEach((el: Element) => {
+        const htmlEl = el as HTMLElement;
+        if (!htmlEl.style.outline && !getComputedStyle(htmlEl).outline) {
+          htmlEl.style.outline = '2px solid transparent';
+          htmlEl.style.outlineOffset = '2px';
+          
+          htmlEl.addEventListener('focus', () => {
+            htmlEl.style.outline = '2px solid #0066cc';
+          });
+          
+          htmlEl.addEventListener('blur', () => {
+            htmlEl.style.outline = '2px solid transparent';
+          });
+        }
+      });
+    }
+
+    if (announceChanges) {
+      // Set up mutation observer for announcing changes
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach(mutation => {
+          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+            // Announce significant changes to screen readers
+            const announcement = document.createElement('div');
+            announcement.setAttribute('aria-live', 'polite');
+            announcement.setAttribute('aria-atomic', 'true');
+            announcement.style.position = 'absolute';
+            announcement.style.left = '-10000px';
+            announcement.textContent = 'Content updated';
+            document.body.appendChild(announcement);
+            
+            setTimeout(() => {
+              document.body.removeChild(announcement);
+            }, 1000);
+          }
+        });
+      });
+
+      observer.observe(element, {
+        childList: true,
+        subtree: true
+      });
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref, announceChanges, focusManagement]);
+}
+
+/**
+ * Higher-order component for adding ProteusJS features
+ */
+export function withProteus<P extends object>(
+  Component: React.ComponentType<P>,
+  features: {
+    container?: { name?: string; options?: ContainerOptions };
+    performance?: boolean;
+    accessibility?: boolean;
+  } = {}
+) {
+  return function ProteusEnhanced(props: P) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    if (features.container) {
+      useContainer(ref, features.container.name, features.container.options);
+    }
+
+    if (features.performance) {
+      usePerformance(ref);
+    }
+
+    if (features.accessibility) {
+      useA11y(ref);
+    }
+
+    return createElement(
+      'div',
+      { ref },
+      createElement(Component, props)
+    );
+  };
+}
+
+// Export all hooks and utilities
+export default {
+  useTransition,
+  useScrollAnimate,
+  usePopover,
+  useAnchor,
+  useContainer,
+  usePerformance,
+  useA11y,
+  withProteus
+};

package/src/adapters/svelte.ts

@@ -0,0 +1,321 @@
+/**
+ * @sc4rfurryx/proteusjs/adapters/svelte
+ * Svelte actions and stores for ProteusJS
+ * 
+ * @version 1.1.0
+ * @author sc4rfurry
+ * @license MIT
+ */
+
+import { writable } from 'svelte/store';
+import { transition, TransitionOptions } from '../modules/transitions';
+import { scrollAnimate, ScrollAnimateOptions } from '../modules/scroll';
+import { attach as attachPopover, PopoverOptions, PopoverController } from '../modules/popover';
+import { tether, TetherOptions, TetherController } from '../modules/anchor';
+import { defineContainer, ContainerOptions } from '../modules/container';
+
+/**
+ * Svelte action for scroll animations
+ */
+export function proteusScroll(node: HTMLElement, options: ScrollAnimateOptions) {
+  scrollAnimate(node, options);
+
+  return {
+    update(newOptions: ScrollAnimateOptions) {
+      // Re-apply with new options
+      scrollAnimate(node, newOptions);
+    },
+    destroy() {
+      // Cleanup handled by scroll module
+    }
+  };
+}
+
+/**
+ * Svelte action for container queries
+ */
+export function proteusContainer(
+  node: HTMLElement, 
+  options: { name?: string; containerOptions?: ContainerOptions } = {}
+) {
+  const { name, containerOptions } = options;
+  defineContainer(node, name, containerOptions);
+
+  return {
+    update(newOptions: { name?: string; containerOptions?: ContainerOptions }) {
+      const { name: newName, containerOptions: newContainerOptions } = newOptions;
+      defineContainer(node, newName, newContainerOptions);
+    }
+  };
+}
+
+/**
+ * Svelte action for popover functionality
+ */
+export function proteusPopover(
+  node: HTMLElement,
+  options: { panel: HTMLElement | string; popoverOptions?: PopoverOptions }
+) {
+  let controller: PopoverController | null = null;
+  const { panel, popoverOptions } = options;
+
+  controller = attachPopover(node, panel, popoverOptions);
+
+  return {
+    update(newOptions: { panel: HTMLElement | string; popoverOptions?: PopoverOptions }) {
+      if (controller) {
+        controller.destroy();
+      }
+      controller = attachPopover(node, newOptions.panel, newOptions.popoverOptions);
+    },
+    destroy() {
+      if (controller) {
+        controller.destroy();
+      }
+    }
+  };
+}
+
+/**
+ * Svelte action for anchor positioning
+ */
+export function proteusAnchor(
+  node: HTMLElement,
+  options: TetherOptions
+) {
+  let controller: TetherController | null = null;
+
+  controller = tether(node, options);
+
+  return {
+    update(newOptions: TetherOptions) {
+      if (controller) {
+        controller.destroy();
+      }
+      controller = tether(node, newOptions);
+    },
+    destroy() {
+      if (controller) {
+        controller.destroy();
+      }
+    }
+  };
+}
+
+/**
+ * Svelte action for performance optimizations
+ */
+export function proteusPerf(node: HTMLElement) {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          node.style.contentVisibility = 'visible';
+        } else {
+          node.style.contentVisibility = 'auto';
+        }
+      });
+    },
+    { rootMargin: '50px' }
+  );
+
+  observer.observe(node);
+
+  return {
+    destroy() {
+      observer.disconnect();
+    }
+  };
+}
+
+/**
+ * Svelte action for accessibility enhancements
+ */
+export function proteusA11y(
+  node: HTMLElement,
+  options: { announceChanges?: boolean } = {}
+) {
+  const { announceChanges = false } = options;
+
+  // Enhance focus indicators
+  const focusableElements = node.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+
+  const focusHandlers = new Map();
+
+  focusableElements.forEach(element => {
+    const htmlEl = element as HTMLElement;
+    
+    const focusHandler = () => {
+      htmlEl.style.outline = '2px solid #0066cc';
+      htmlEl.style.outlineOffset = '2px';
+    };
+    
+    const blurHandler = () => {
+      htmlEl.style.outline = 'none';
+    };
+
+    htmlEl.addEventListener('focus', focusHandler);
+    htmlEl.addEventListener('blur', blurHandler);
+    
+    focusHandlers.set(htmlEl, { focusHandler, blurHandler });
+  });
+
+  let mutationObserver: MutationObserver | null = null;
+
+  if (announceChanges) {
+    mutationObserver = new MutationObserver(() => {
+      const announcement = document.createElement('div');
+      announcement.setAttribute('aria-live', 'polite');
+      announcement.style.position = 'absolute';
+      announcement.style.left = '-10000px';
+      announcement.textContent = 'Content updated';
+      document.body.appendChild(announcement);
+      
+      setTimeout(() => {
+        document.body.removeChild(announcement);
+      }, 1000);
+    });
+
+    mutationObserver.observe(node, { childList: true, subtree: true });
+  }
+
+  return {
+    destroy() {
+      // Clean up focus handlers
+      focusHandlers.forEach(({ focusHandler, blurHandler }, element) => {
+        element.removeEventListener('focus', focusHandler);
+        element.removeEventListener('blur', blurHandler);
+      });
+      
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+    }
+  };
+}
+
+/**
+ * Store for managing popover state
+ */
+export function createPopover(
+  triggerSelector: string,
+  panelSelector: string,
+  options?: PopoverOptions
+) {
+  const isOpen = writable(false);
+  let controller: PopoverController | null = null;
+
+  const initialize = () => {
+    const trigger = document.querySelector(triggerSelector);
+    const panel = document.querySelector(panelSelector);
+
+    if (trigger && panel) {
+      controller = attachPopover(trigger, panel, {
+        ...options,
+        onOpen: () => {
+          isOpen.set(true);
+          options?.onOpen?.();
+        },
+        onClose: () => {
+          isOpen.set(false);
+          options?.onClose?.();
+        }
+      });
+    }
+  };
+
+  const open = () => controller?.open();
+  const close = () => controller?.close();
+  const toggle = () => controller?.toggle();
+  const destroy = () => {
+    if (controller) {
+      controller.destroy();
+      controller = null;
+    }
+  };
+
+  return {
+    isOpen,
+    initialize,
+    open,
+    close,
+    toggle,
+    destroy
+  };
+}
+
+/**
+ * Store for managing transition state
+ */
+export function createTransition() {
+  const isTransitioning = writable(false);
+
+  const runTransition = async (
+    run: () => Promise<any> | any,
+    opts?: TransitionOptions
+  ) => {
+    isTransitioning.set(true);
+    try {
+      await transition(run, opts);
+    } finally {
+      isTransitioning.set(false);
+    }
+  };
+
+  return {
+    isTransitioning,
+    runTransition
+  };
+}
+
+/**
+ * Utility function to create reactive container size store
+ */
+export function createContainerSize(element: HTMLElement) {
+  const size = writable({ width: 0, height: 0 });
+
+  if ('ResizeObserver' in window) {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        size.set({ width, height });
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    return {
+      size,
+      destroy: () => resizeObserver.disconnect()
+    };
+  }
+
+  // Fallback for browsers without ResizeObserver
+  const updateSize = () => {
+    const rect = element.getBoundingClientRect();
+    size.set({ width: rect.width, height: rect.height });
+  };
+
+  updateSize();
+  (window as any).addEventListener('resize', updateSize);
+
+  return {
+    size,
+    destroy: () => (window as any).removeEventListener('resize', updateSize)
+  };
+}
+
+// Export all actions and utilities
+export default {
+  proteusScroll,
+  proteusContainer,
+  proteusPopover,
+  proteusAnchor,
+  proteusPerf,
+  proteusA11y,
+  createPopover,
+  createTransition,
+  createContainerSize
+};