@cubis/foundry 0.3.64 → 0.3.65

package/workflows/workflows/agent-environment-setup/platforms/claude/skills/javascript-pro/references/browser-apis.md

@@ -0,0 +1,398 @@
+# Browser APIs
+
+## Fetch API
+
+```javascript
+// Basic GET request
+const response = await fetch('/api/users');
+const data = await response.json();
+
+// POST with JSON
+const response = await fetch('/api/users', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
+});
+
+// Error handling
+const fetchWithErrorHandling = async (url) => {
+  try {
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    if (error.name === 'TypeError') {
+      console.error('Network error or CORS issue');
+    }
+    throw error;
+  }
+};
+
+// Abort requests
+const controller = new AbortController();
+setTimeout(() => controller.abort(), 5000);
+
+const response = await fetch('/api/data', {
+  signal: controller.signal
+});
+
+// File upload with progress
+const uploadFile = async (file) => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  return fetch('/api/upload', {
+    method: 'POST',
+    body: formData,
+  });
+};
+```
+
+## Web Workers
+
+```javascript
+// main.js - Create and communicate with worker
+const worker = new Worker('/worker.js');
+
+worker.postMessage({ command: 'process', data: largeArray });
+
+worker.onmessage = (event) => {
+  console.log('Result from worker:', event.data);
+};
+
+worker.onerror = (error) => {
+  console.error('Worker error:', error.message);
+};
+
+// Terminate when done
+worker.terminate();
+
+// worker.js - Worker code
+self.onmessage = (event) => {
+  const { command, data } = event.data;
+
+  if (command === 'process') {
+    const result = processLargeData(data);
+    self.postMessage(result);
+  }
+};
+
+function processLargeData(data) {
+  // CPU-intensive work
+  return data.map(x => x * 2).reduce((a, b) => a + b, 0);
+}
+
+// Shared Worker (shared between tabs)
+const sharedWorker = new SharedWorker('/shared-worker.js');
+
+sharedWorker.port.onmessage = (event) => {
+  console.log('Shared worker message:', event.data);
+};
+
+sharedWorker.port.postMessage({ type: 'init' });
+```
+
+## Service Workers & PWA
+
+```javascript
+// Register Service Worker
+if ('serviceWorker' in navigator) {
+  const registration = await navigator.serviceWorker.register('/sw.js');
+  console.log('SW registered:', registration);
+
+  // Update service worker
+  registration.addEventListener('updatefound', () => {
+    const newWorker = registration.installing;
+    newWorker.addEventListener('statechange', () => {
+      if (newWorker.state === 'activated') {
+        window.location.reload();
+      }
+    });
+  });
+}
+
+// sw.js - Service Worker
+const CACHE_NAME = 'v1';
+const urlsToCache = ['/index.html', '/styles.css', '/app.js'];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      // Cache hit - return response
+      if (response) {
+        return response;
+      }
+
+      // Clone request
+      const fetchRequest = event.request.clone();
+
+      return fetch(fetchRequest).then((response) => {
+        if (!response || response.status !== 200 || response.type !== 'basic') {
+          return response;
+        }
+
+        const responseToCache = response.clone();
+
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+
+        return response;
+      });
+    })
+  );
+});
+
+// Background sync
+self.addEventListener('sync', (event) => {
+  if (event.tag === 'sync-messages') {
+    event.waitUntil(syncMessages());
+  }
+});
+```
+
+## Local Storage & IndexedDB
+
+```javascript
+// LocalStorage (synchronous, max 5-10MB)
+localStorage.setItem('theme', 'dark');
+const theme = localStorage.getItem('theme');
+localStorage.removeItem('theme');
+localStorage.clear();
+
+// SessionStorage (per-tab)
+sessionStorage.setItem('token', 'abc123');
+
+// IndexedDB (asynchronous, larger storage)
+const openDB = () => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('myDatabase', 1);
+
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      const objectStore = db.createObjectStore('users', { keyPath: 'id' });
+      objectStore.createIndex('email', 'email', { unique: true });
+    };
+  });
+};
+
+const addUser = async (user) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(['users'], 'readwrite');
+    const objectStore = transaction.objectStore('users');
+    const request = objectStore.add(user);
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+};
+
+const getUser = async (id) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(['users']);
+    const objectStore = transaction.objectStore('users');
+    const request = objectStore.get(id);
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+};
+```
+
+## Intersection Observer
+
+```javascript
+// Lazy loading images
+const imageObserver = new IntersectionObserver(
+  (entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const img = entry.target;
+        img.src = img.dataset.src;
+        img.classList.add('loaded');
+        observer.unobserve(img);
+      }
+    });
+  },
+  {
+    root: null, // viewport
+    rootMargin: '50px',
+    threshold: 0.1
+  }
+);
+
+document.querySelectorAll('img[data-src]').forEach((img) => {
+  imageObserver.observe(img);
+});
+
+// Infinite scroll
+const loadMoreObserver = new IntersectionObserver(
+  (entries) => {
+    const lastEntry = entries[0];
+    if (lastEntry.isIntersecting) {
+      loadMoreItems();
+    }
+  },
+  { threshold: 1.0 }
+);
+
+const sentinel = document.querySelector('#load-more-sentinel');
+loadMoreObserver.observe(sentinel);
+```
+
+## Mutation Observer
+
+```javascript
+// Watch DOM changes
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'childList') {
+      console.log('Nodes added/removed:', mutation.addedNodes, mutation.removedNodes);
+    } else if (mutation.type === 'attributes') {
+      console.log('Attribute changed:', mutation.attributeName);
+    }
+  });
+});
+
+observer.observe(document.body, {
+  childList: true,
+  attributes: true,
+  subtree: true,
+  attributeOldValue: true
+});
+
+// Disconnect when done
+observer.disconnect();
+```
+
+## Web Notifications
+
+```javascript
+// Request permission
+const permission = await Notification.requestPermission();
+
+if (permission === 'granted') {
+  new Notification('Hello!', {
+    body: 'This is a notification',
+    icon: '/icon.png',
+    tag: 'unique-tag',
+    requireInteraction: false
+  });
+}
+
+// Service Worker notifications
+// sw.js
+self.addEventListener('push', (event) => {
+  const data = event.data.json();
+
+  event.waitUntil(
+    self.registration.showNotification(data.title, {
+      body: data.body,
+      icon: data.icon,
+      badge: '/badge.png',
+      data: data.url
+    })
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  event.waitUntil(
+    clients.openWindow(event.notification.data)
+  );
+});
+```
+
+## Canvas & WebGL
+
+```javascript
+// Canvas 2D
+const canvas = document.getElementById('myCanvas');
+const ctx = canvas.getContext('2d');
+
+// Draw rectangle
+ctx.fillStyle = '#FF0000';
+ctx.fillRect(10, 10, 100, 100);
+
+// Draw text
+ctx.font = '30px Arial';
+ctx.fillText('Hello Canvas', 10, 50);
+
+// Draw image
+const img = new Image();
+img.onload = () => {
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+};
+img.src = '/image.png';
+
+// WebGL basic setup
+const gl = canvas.getContext('webgl2');
+
+if (!gl) {
+  console.error('WebGL2 not supported');
+}
+
+// Clear canvas
+gl.clearColor(0.0, 0.0, 0.0, 1.0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+```
+
+## Performance APIs
+
+```javascript
+// Performance timing
+const timing = performance.timing;
+const loadTime = timing.loadEventEnd - timing.navigationStart;
+console.log('Page load time:', loadTime);
+
+// Performance Observer
+const observer = new PerformanceObserver((list) => {
+  for (const entry of list.getEntries()) {
+    console.log(`${entry.name}: ${entry.duration}ms`);
+  }
+});
+
+observer.observe({ entryTypes: ['measure', 'navigation', 'resource'] });
+
+// Custom marks and measures
+performance.mark('start-fetch');
+await fetch('/api/data');
+performance.mark('end-fetch');
+performance.measure('fetch-duration', 'start-fetch', 'end-fetch');
+
+const measures = performance.getEntriesByType('measure');
+console.log(measures);
+```
+
+## Quick Reference
+
+| API | Use Case | Browser Support |
+|-----|----------|----------------|
+| Fetch | HTTP requests | Modern browsers |
+| Web Workers | CPU-intensive tasks | Modern browsers |
+| Service Workers | Offline, caching | Modern browsers |
+| IndexedDB | Large client storage | Modern browsers |
+| IntersectionObserver | Lazy loading, infinite scroll | Modern browsers |
+| MutationObserver | DOM change detection | Modern browsers |
+| Notifications | User alerts | Modern browsers (permission) |
+| Canvas | 2D graphics | All browsers |
+| WebGL | 3D graphics | Modern browsers |

package/workflows/workflows/agent-environment-setup/platforms/claude/skills/javascript-pro/references/modern-syntax.md

@@ -0,0 +1,272 @@
+# Modern JavaScript Syntax (ES2023+)
+
+## Optional Chaining and Nullish Coalescing
+
+```javascript
+// Optional chaining - safe property access
+const userName = user?.profile?.name;
+const firstItem = items?.[0];
+const result = api?.fetchData?.();
+
+// Nullish coalescing - default only for null/undefined
+const port = config.port ?? 3000;
+const name = user.name ?? 'Anonymous';
+
+// Combining both patterns
+const displayName = user?.profile?.name ?? user?.email ?? 'Guest';
+
+// Optional chaining with delete
+delete user?.temporaryData?.cache;
+```
+
+## Private Class Fields
+
+```javascript
+class BankAccount {
+  // Private fields
+  #balance = 0;
+  #accountNumber;
+
+  // Private method
+  #validateAmount(amount) {
+    if (amount <= 0) throw new Error('Invalid amount');
+  }
+
+  constructor(accountNumber, initialBalance = 0) {
+    this.#accountNumber = accountNumber;
+    this.#balance = initialBalance;
+  }
+
+  deposit(amount) {
+    this.#validateAmount(amount);
+    this.#balance += amount;
+    return this.#balance;
+  }
+
+  getBalance() {
+    return this.#balance;
+  }
+}
+
+// Static private fields
+class Config {
+  static #apiKey = process.env.API_KEY;
+
+  static getApiKey() {
+    return this.#apiKey;
+  }
+}
+```
+
+## Top-Level Await
+
+```javascript
+// No need for async IIFE wrapper
+const data = await fetch('/api/config').then(r => r.json());
+const db = await connectDatabase(data.dbUrl);
+
+// Dynamic imports with await
+const module = await import(`./modules/${moduleName}.js`);
+
+// Error handling at top level
+try {
+  const config = await loadConfig();
+  startServer(config);
+} catch (error) {
+  console.error('Failed to start:', error);
+  process.exit(1);
+}
+```
+
+## Array Methods (Modern)
+
+```javascript
+// at() - negative indexing
+const last = items.at(-1);
+const secondLast = items.at(-2);
+
+// findLast() and findLastIndex()
+const lastEven = numbers.findLast(n => n % 2 === 0);
+const lastIndex = numbers.findLastIndex(n => n > 10);
+
+// toSorted(), toReversed(), toSpliced() - non-mutating
+const sorted = items.toSorted((a, b) => a - b);
+const reversed = items.toReversed();
+const spliced = items.toSpliced(1, 2, 'new');
+
+// with() - replace at index
+const updated = items.with(2, 'newValue');
+
+// flatMap() for transform and flatten
+const nestedResults = users.flatMap(user => user.posts);
+```
+
+## Object and String Enhancements
+
+```javascript
+// Object.groupBy() - group array elements
+const groupedByAge = Object.groupBy(users, user => user.age);
+const groupedByStatus = Object.groupBy(orders, o => o.status);
+
+// Object.hasOwn() - safer hasOwnProperty
+if (Object.hasOwn(obj, 'key')) {
+  // safer than obj.hasOwnProperty('key')
+}
+
+// String.prototype.at()
+const firstChar = str.at(0);
+const lastChar = str.at(-1);
+
+// replaceAll()
+const cleaned = text.replaceAll('old', 'new');
+const sanitized = input.replaceAll(/[<>]/g, '');
+```
+
+## WeakRef and FinalizationRegistry
+
+```javascript
+// WeakRef - hold weak references to objects
+class Cache {
+  #cache = new Map();
+
+  set(key, value) {
+    this.#cache.set(key, new WeakRef(value));
+  }
+
+  get(key) {
+    const ref = this.#cache.get(key);
+    return ref?.deref(); // undefined if GC'd
+  }
+}
+
+// FinalizationRegistry - cleanup callbacks
+const registry = new FinalizationRegistry((heldValue) => {
+  console.log(`Cleanup: ${heldValue}`);
+  // Release resources
+});
+
+class Resource {
+  constructor(id) {
+    this.id = id;
+    registry.register(this, id, this);
+  }
+
+  dispose() {
+    registry.unregister(this);
+  }
+}
+```
+
+## Logical Assignment Operators
+
+```javascript
+// ||= - assign if falsy
+config.timeout ||= 5000;
+user.name ||= 'Anonymous';
+
+// &&= - assign if truthy
+user.profile &&= sanitize(user.profile);
+
+// ??= - assign if nullish
+options.port ??= 3000;
+settings.theme ??= 'dark';
+```
+
+## Numeric Separators and BigInt
+
+```javascript
+// Numeric separators for readability
+const billion = 1_000_000_000;
+const bytes = 0xFF_EC_DE_5E;
+const trillion = 1_000_000_000_000n;
+
+// BigInt for large integers
+const hugeNumber = 9007199254740991n;
+const result = hugeNumber + 1n;
+const mixed = BigInt(123) + 456n;
+
+// BigInt operations
+const divided = 10n / 3n; // 3n (truncates)
+const power = 2n ** 64n;
+```
+
+## Pattern Matching (Stage 3 Proposal)
+
+```javascript
+// Using switch with enhanced patterns (when available)
+function processValue(value) {
+  switch (true) {
+    case typeof value === 'string':
+      return value.toUpperCase();
+    case typeof value === 'number':
+      return value * 2;
+    case Array.isArray(value):
+      return value.length;
+    default:
+      return null;
+  }
+}
+
+// Object destructuring patterns
+function handleResponse({ status, data, error }) {
+  if (error) throw error;
+  if (status === 200) return data;
+  return null;
+}
+```
+
+## Iterator Helpers (Stage 3)
+
+```javascript
+// When available - chaining iterator operations
+const result = [1, 2, 3, 4, 5]
+  .values()
+  .map(x => x * 2)
+  .filter(x => x > 5)
+  .toArray();
+
+// Custom iterators
+const range = {
+  *[Symbol.iterator]() {
+    for (let i = 0; i < 10; i++) {
+      yield i;
+    }
+  }
+};
+
+for (const num of range) {
+  console.log(num);
+}
+```
+
+## Temporal API (Stage 3)
+
+```javascript
+// Modern date/time handling (when available)
+import { Temporal } from '@js-temporal/polyfill';
+
+const now = Temporal.Now.instant();
+const date = Temporal.PlainDate.from('2024-01-15');
+const time = Temporal.PlainTime.from('14:30:00');
+
+// Duration calculations
+const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
+const later = now.add(duration);
+
+// Timezone handling
+const zonedTime = now.toZonedDateTimeISO('America/New_York');
+```
+
+## Quick Reference
+
+| Feature | ES Version | Syntax |
+|---------|-----------|--------|
+| Optional chaining | ES2020 | `obj?.prop` |
+| Nullish coalescing | ES2020 | `value ?? default` |
+| Private fields | ES2022 | `#fieldName` |
+| Top-level await | ES2022 | `await import()` |
+| Logical assignment | ES2021 | `x ??= y` |
+| Array.at() | ES2022 | `arr.at(-1)` |
+| Object.hasOwn() | ES2022 | `Object.hasOwn(obj, 'key')` |
+| Array.findLast() | ES2023 | `arr.findLast(fn)` |
+| toSorted() | ES2023 | `arr.toSorted()` |