@social.io/catalog 2.1.0 → 2.1.2

package/ts_web/elements/sio-logo-render.ts

@@ -11,6 +11,10 @@ export interface ISioLogoRenderOptions {
   light: boolean;
 }
 
+export type TSioLogoRenderContext =
+  | CanvasRenderingContext2D
+  | OffscreenCanvasRenderingContext2D;
+
 interface ISioLogoPoint {
   x: number;
   y: number;
@@ -159,9 +163,26 @@ const easeInBack = (progress: number): number => {
   return (coefficient + 1) * progress * progress * progress - coefficient * progress * progress;
 };
 
+type TSioLogoFrameHandle = number | ReturnType<typeof setTimeout>;
+
+const requestFrame = (callback: FrameRequestCallback): TSioLogoFrameHandle => {
+  if (typeof globalThis.requestAnimationFrame === 'function') {
+    return globalThis.requestAnimationFrame(callback);
+  }
+  return setTimeout(() => callback(performance.now()), 1000 / 60);
+};
+
+const cancelFrame = (handle: TSioLogoFrameHandle): void => {
+  if (typeof globalThis.cancelAnimationFrame === 'function' && typeof handle === 'number') {
+    globalThis.cancelAnimationFrame(handle);
+    return;
+  }
+  clearTimeout(handle);
+};
+
 export class SioLogoRenderer {
   private options: ISioLogoRenderOptions;
-  private frameHandle: number | null = null;
+  private frameHandle: TSioLogoFrameHandle | null = null;
   private phase: TSioLogoAnimationPhase | null = null;
   private startedAt = 0;
   private stagger = 70;
@@ -178,7 +199,7 @@ export class SioLogoRenderer {
   private opacities: number[] = [];
 
   constructor(
-    private readonly context: CanvasRenderingContext2D,
+    private readonly context: TSioLogoRenderContext,
     options: ISioLogoRenderOptions,
   ) {
     this.options = normalizeOptions(options);
@@ -220,14 +241,14 @@ export class SioLogoRenderer {
         this.settle();
         return;
       }
-      this.frameHandle = requestAnimationFrame(drawFrame);
+      this.frameHandle = requestFrame(drawFrame);
     };
-    this.frameHandle = requestAnimationFrame(drawFrame);
+    this.frameHandle = requestFrame(drawFrame);
   }
 
   public stop(): void {
     if (this.frameHandle !== null) {
-      cancelAnimationFrame(this.frameHandle);
+      cancelFrame(this.frameHandle);
       this.frameHandle = null;
     }
     this.phase = null;

package/ts_web/elements/sio-logo-worker.ts

@@ -0,0 +1,67 @@
+import {
+  SioLogoRenderer,
+  type ISioLogoRenderOptions,
+  type TSioLogoAnimationPhase,
+} from './sio-logo-render.js';
+
+interface ISioLogoWorkerInitMessage {
+  type: 'init';
+  canvas: OffscreenCanvas;
+  options: ISioLogoRenderOptions;
+  phase: TSioLogoAnimationPhase | null;
+}
+
+interface ISioLogoWorkerOptionsMessage {
+  type: 'options';
+  options: ISioLogoRenderOptions;
+}
+
+interface ISioLogoWorkerPhaseMessage {
+  type: 'phase';
+  phase: TSioLogoAnimationPhase | 'stop' | 'clear';
+}
+
+type TSioLogoWorkerMessage =
+  | ISioLogoWorkerInitMessage
+  | ISioLogoWorkerOptionsMessage
+  | ISioLogoWorkerPhaseMessage;
+
+interface ISioLogoWorkerScope {
+  onmessage: ((event: MessageEvent<TSioLogoWorkerMessage>) => void) | null;
+  postMessage: (message: { type: 'ready' | 'initialized' }) => void;
+}
+
+const workerScope = globalThis as unknown as ISioLogoWorkerScope;
+let renderer: SioLogoRenderer | null = null;
+
+workerScope.onmessage = (event): void => {
+  const message = event.data;
+  if (message.type === 'init') {
+    const context = message.canvas.getContext('2d');
+    if (!context) throw new Error('Unable to create the sio-logo worker canvas context.');
+    renderer = new SioLogoRenderer(context, message.options);
+    if (message.phase) renderer.start(message.phase);
+    else renderer.drawStatic();
+    workerScope.postMessage({ type: 'initialized' });
+    return;
+  }
+
+  if (!renderer) return;
+  if (message.type === 'options') {
+    renderer.setOptions(message.options);
+    return;
+  }
+
+  if (message.phase === 'stop') {
+    renderer.stop();
+    renderer.drawStatic();
+  } else if (message.phase === 'clear') {
+    renderer.clear();
+  } else {
+    renderer.start(message.phase);
+  }
+};
+
+// The canvas is transferred only after the module and its renderer dependency
+// have loaded, leaving the HTMLCanvasElement intact for pre-transfer fallback.
+workerScope.postMessage({ type: 'ready' });

package/ts_web/elements/sio-logo.ts

@@ -2,15 +2,31 @@ import {
   DeesElement,
   css,
   customElement,
+  directives,
   html,
   property,
+  state,
   type TemplateResult,
 } from '@design.estate/dees-element';
-import { SioLogoRenderer, sioLogoAspect } from './sio-logo-render.js';
+import {
+  SioLogoRenderer,
+  sioLogoAspect,
+  type ISioLogoRenderOptions,
+  type TSioLogoAnimationPhase,
+} from './sio-logo-render.js';
 import { sioElementStyles } from './tokens.js';
 
 export type TSioLogoTheme = 'auto' | 'light' | 'dark';
 
+type TSioLogoBackendState =
+  | 'idle'
+  | 'worker-loading'
+  | 'worker-transferred'
+  | 'worker'
+  | 'main';
+
+type TSioLogoPhaseCommand = TSioLogoAnimationPhase | 'stop' | 'clear';
+
 declare global {
   interface HTMLElementTagNameMap {
     'sio-logo': SioLogo;
@@ -20,9 +36,9 @@ declare global {
 /**
  * The social.io faceted S brand mark from the v8 design prototype.
  *
- * The canvas renderer preserves the exact eight-facet geometry and supports
- * entrance, hover-wave, dismiss, and loading animations. Motion is disabled
- * when the visitor requests reduced motion.
+ * Geometry and animation run on an OffscreenCanvas in a module worker when the
+ * browser and consumer bundle support it. The same renderer is used on the
+ * main thread as a safe fallback.
  */
 @customElement('sio-logo')
 export class SioLogo extends DeesElement {
@@ -71,6 +87,9 @@ export class SioLogo extends DeesElement {
   @property({ type: Boolean, attribute: 'no-hover' })
   public accessor noHover = false;
 
+  @state()
+  private accessor canvasGeneration = 0;
+
   public static styles = [
     ...sioElementStyles,
     css`
@@ -85,29 +104,43 @@ export class SioLogo extends DeesElement {
     `,
   ];
 
+  private backendState: TSioLogoBackendState = 'idle';
+  private worker: Worker | null = null;
   private renderer: SioLogoRenderer | null = null;
+  private canvasTransferred = false;
+  private forceMainThread = false;
+  private initializationTimeout: ReturnType<typeof setTimeout> | null = null;
+  private initializationGeneration = 0;
+  private lifecycleGeneration = 0;
+  private initialUpdateHandled = false;
+  private queuedOptions = false;
+  private queuedPhase: TSioLogoPhaseCommand | null = null;
   private themeObserver: MutationObserver | null = null;
-  private colorSchemeMedia: MediaQueryList | null = null;
   private reducedMotionMedia: MediaQueryList | null = null;
   private lastDevicePixelRatio = 0;
-  private lifecycleGeneration = 0;
+  private lastLight: boolean | null = null;
 
   private readonly handlePointerEnter = (): void => {
     if (!this.noHover && !this.loading && !this.prefersReducedMotion()) this.wave();
   };
 
   private readonly handleAmbientChange = (): void => {
-    this.syncRenderer(this.loading ? 'loading' : null);
+    if (this.theme !== 'auto') return;
+    const light = this.isLightBackdrop();
+    if (light === this.lastLight) return;
+    this.lastLight = light;
+    this.syncRendererOptions();
   };
 
   private readonly handleReducedMotionChange = (): void => {
-    this.syncRenderer(this.loading ? 'loading' : null);
+    if (this.prefersReducedMotion()) this.sendPhase('stop');
+    else if (this.loading) this.sendPhase('loading');
   };
 
   private readonly handleResize = (): void => {
-    const currentDevicePixelRatio = window.devicePixelRatio || 1;
-    if (currentDevicePixelRatio === this.lastDevicePixelRatio) return;
-    this.syncRenderer(this.loading ? 'loading' : null);
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    if (devicePixelRatio === this.lastDevicePixelRatio) return;
+    this.syncRendererOptions();
   };
 
   public async connectedCallback(): Promise<void> {
@@ -118,106 +151,258 @@ export class SioLogo extends DeesElement {
     window.addEventListener('resize', this.handleResize);
     this.observeReducedMotion();
     await connection;
+    await this.updateComplete;
     if (!this.isConnected || generation !== this.lifecycleGeneration) return;
-    if (this.hasUpdated) {
-      this.observeAmbientTheme();
-      this.syncRenderer(this.loading ? 'loading' : null);
-    }
+    this.observeAmbientTheme();
+    if (this.hasUpdated && this.backendState === 'idle') this.initializeCanvas();
   }
 
   public async disconnectedCallback(): Promise<void> {
     const generation = ++this.lifecycleGeneration;
-    this.cleanupOwnedResources();
+    this.cleanupOwnedResources(true);
     await super.disconnectedCallback();
     if (!this.isConnected && generation === this.lifecycleGeneration) {
-      this.cleanupOwnedResources();
+      this.cleanupOwnedResources(true);
     }
   }
 
-  private cleanupOwnedResources(): void {
+  private cleanupOwnedResources(replaceTransferredCanvas: boolean): void {
     this.removeEventListener('mouseenter', this.handlePointerEnter);
     window.removeEventListener('resize', this.handleResize);
     this.stopAmbientThemeObservation();
     this.stopReducedMotionObservation();
-    this.renderer?.stop();
+    this.destroyBackend(replaceTransferredCanvas);
   }
 
   public render(): TemplateResult {
     const height = this.normalizedSize;
     const width = this.square ? height : Math.round(height * sioLogoAspect);
-    return html`<canvas aria-hidden="true" style="width:${width}px;height:${height}px"></canvas>`;
+    return html`${directives.keyed(
+      this.canvasGeneration,
+      html`<canvas aria-hidden="true" style="width:${width}px;height:${height}px"></canvas>`,
+    )}`;
   }
 
   public firstUpdated(changedProperties: Map<PropertyKey, unknown>): void {
     super.firstUpdated(changedProperties);
-    const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>('canvas');
-    const context = canvas?.getContext('2d');
-    if (!context) return;
-    this.renderer = new SioLogoRenderer(context, this.getRendererOptions());
-    if (!this.isConnected) {
-      this.renderer.drawStatic();
-      return;
-    }
     this.observeAmbientTheme();
-    if (this.loading && !this.prefersReducedMotion()) this.renderer.start('loading');
-    else if (!this.noEntrance && !this.prefersReducedMotion()) this.renderer.start('in');
-    else this.renderer.drawStatic();
+    this.initializeCanvas();
   }
 
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
-    if (!this.isConnected) {
-      this.stopAmbientThemeObservation();
-      this.renderer?.stop();
+    if (!this.initialUpdateHandled) {
+      this.initialUpdateHandled = true;
       return;
     }
-    const redrawProperties: PropertyKey[] = [
+    if (!this.isConnected) return;
+    if (changedProperties.has('canvasGeneration')) {
+      this.initializeCanvas();
+      return;
+    }
+
+    const shapeProperties: PropertyKey[] = [
       'size',
       'gap',
       'radius',
       'square',
       'background',
       'mono',
-      'theme',
     ];
-    if (redrawProperties.some((propertyName) => changedProperties.has(propertyName))) {
-      this.syncRenderer(this.loading ? 'loading' : null);
+    if (shapeProperties.some((propertyName) => changedProperties.has(propertyName))) {
+      this.syncRendererOptions();
     }
     if (changedProperties.has('theme')) {
       this.stopAmbientThemeObservation();
       this.observeAmbientTheme();
+      this.syncRendererOptions();
     }
     if (changedProperties.has('loading')) {
-      this.syncRenderer(this.loading ? 'loading' : null);
+      this.sendPhase(
+        this.loading && !this.prefersReducedMotion() ? 'loading' : 'stop',
+      );
     }
   }
 
   protected themeChanged(): void {
-    this.syncRenderer(this.loading ? 'loading' : null);
+    this.handleAmbientChange();
   }
 
   public play(): void {
-    if (!this.renderer || !this.isConnected) return;
-    if (this.prefersReducedMotion()) this.renderer.drawStatic();
-    else this.renderer.start('in');
+    if (!this.isConnected) return;
+    this.sendPhase(this.prefersReducedMotion() ? 'stop' : 'in');
   }
 
   public wave(): void {
-    if (!this.renderer || !this.isConnected) return;
-    if (this.prefersReducedMotion()) this.renderer.drawStatic();
-    else this.renderer.start('wave');
+    if (!this.isConnected) return;
+    this.sendPhase(this.prefersReducedMotion() ? 'stop' : 'wave');
   }
 
   public dismiss(): void {
-    if (!this.renderer || !this.isConnected) return;
-    if (this.prefersReducedMotion()) this.renderer.clear();
-    else this.renderer.start('out');
+    if (!this.isConnected) return;
+    this.sendPhase(this.prefersReducedMotion() ? 'clear' : 'out');
+  }
+
+  private initializeCanvas(): void {
+    if (!this.isConnected || this.backendState !== 'idle') return;
+    const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>('canvas');
+    if (!canvas) return;
+    const generation = ++this.initializationGeneration;
+    const supportsWorker =
+      !this.forceMainThread &&
+      typeof Worker === 'function' &&
+      typeof canvas.transferControlToOffscreen === 'function';
+
+    if (!supportsWorker) {
+      this.initializeMainThread(canvas, generation);
+      return;
+    }
+
+    try {
+      const worker = new Worker(new URL('./sio-logo-worker.js', import.meta.url), {
+        type: 'module',
+        name: 'sio-logo',
+      });
+      this.worker = worker;
+      this.backendState = 'worker-loading';
+      worker.onmessage = (event: MessageEvent<{ type?: string }>): void => {
+        if (event.data?.type === 'ready') {
+          this.handleWorkerReady(worker, canvas, generation);
+        } else if (event.data?.type === 'initialized') {
+          this.handleWorkerInitialized(worker, generation);
+        }
+      };
+      worker.onerror = (): void => this.handleWorkerFailure(worker, canvas, generation);
+      worker.onmessageerror = (): void => this.handleWorkerFailure(worker, canvas, generation);
+      this.armInitializationTimeout(worker, canvas, generation);
+    } catch {
+      this.forceMainThread = true;
+      this.initializeMainThread(canvas, generation);
+    }
+  }
+
+  private handleWorkerReady(
+    worker: Worker,
+    canvas: HTMLCanvasElement,
+    generation: number,
+  ): void {
+    if (!this.isCurrentWorker(worker, generation) || this.backendState !== 'worker-loading') return;
+    this.clearInitializationTimeout();
+    try {
+      const offscreenCanvas = canvas.transferControlToOffscreen();
+      this.canvasTransferred = true;
+      this.backendState = 'worker-transferred';
+      this.lastLight = this.isLightBackdrop();
+      worker.postMessage(
+        {
+          type: 'init',
+          canvas: offscreenCanvas,
+          options: this.getRendererOptions(),
+          phase: this.getInitialPhase(),
+        },
+        [offscreenCanvas],
+      );
+      this.queuedOptions = false;
+      this.armInitializationTimeout(worker, canvas, generation);
+    } catch {
+      this.handleWorkerFailure(worker, canvas, generation);
+    }
+  }
+
+  private handleWorkerInitialized(worker: Worker, generation: number): void {
+    if (!this.isCurrentWorker(worker, generation) || this.backendState !== 'worker-transferred') return;
+    this.clearInitializationTimeout();
+    this.backendState = 'worker';
+    if (this.queuedOptions) {
+      this.queuedOptions = false;
+      this.syncRendererOptions();
+    }
+    if (this.queuedPhase) {
+      const phase = this.queuedPhase;
+      this.queuedPhase = null;
+      this.sendPhase(phase);
+    }
+  }
+
+  private handleWorkerFailure(
+    worker: Worker,
+    canvas: HTMLCanvasElement,
+    generation: number,
+  ): void {
+    if (!this.isCurrentWorker(worker, generation)) return;
+    const requiresNewCanvas = this.canvasTransferred;
+    this.forceMainThread = true;
+    this.destroyBackend(requiresNewCanvas);
+    if (!requiresNewCanvas && this.isConnected) {
+      this.initializeMainThread(canvas, generation);
+    }
+  }
+
+  private initializeMainThread(canvas: HTMLCanvasElement, generation: number): void {
+    if (!this.isConnected || generation !== this.initializationGeneration) return;
+    const context = canvas.getContext('2d');
+    if (!context) return;
+    this.backendState = 'main';
+    const options = this.getRendererOptions();
+    this.lastLight = options.light;
+    this.renderer = new SioLogoRenderer(context, options);
+    const phase = this.getInitialPhase();
+    if (phase) this.renderer.start(phase);
+    else this.renderer.drawStatic();
+    this.queuedOptions = false;
+    if (this.queuedPhase) {
+      const queuedPhase = this.queuedPhase;
+      this.queuedPhase = null;
+      this.sendPhase(queuedPhase);
+    }
+  }
+
+  private armInitializationTimeout(
+    worker: Worker,
+    canvas: HTMLCanvasElement,
+    generation: number,
+  ): void {
+    this.clearInitializationTimeout();
+    this.initializationTimeout = setTimeout(() => {
+      this.handleWorkerFailure(worker, canvas, generation);
+    }, 2000);
+  }
+
+  private clearInitializationTimeout(): void {
+    if (this.initializationTimeout === null) return;
+    clearTimeout(this.initializationTimeout);
+    this.initializationTimeout = null;
+  }
+
+  private isCurrentWorker(worker: Worker, generation: number): boolean {
+    return this.isConnected &&
+      this.worker === worker &&
+      generation === this.initializationGeneration;
+  }
+
+  private destroyBackend(replaceTransferredCanvas: boolean): void {
+    const transferred = this.canvasTransferred;
+    this.clearInitializationTimeout();
+    if (this.worker) {
+      this.worker.onmessage = null;
+      this.worker.onerror = null;
+      this.worker.onmessageerror = null;
+      this.worker.terminate();
+    }
+    this.worker = null;
+    this.renderer?.stop();
+    this.renderer = null;
+    this.backendState = 'idle';
+    this.canvasTransferred = false;
+    this.queuedOptions = false;
+    this.queuedPhase = null;
+    if (replaceTransferredCanvas && transferred) this.canvasGeneration += 1;
   }
 
   private get normalizedSize(): number {
     return Number.isFinite(this.size) ? Math.max(1, this.size) : 40;
   }
 
-  private getRendererOptions() {
+  private getRendererOptions(): ISioLogoRenderOptions {
     this.lastDevicePixelRatio = window.devicePixelRatio || 1;
     return {
       size: this.normalizedSize,
@@ -231,14 +416,41 @@ export class SioLogo extends DeesElement {
     };
   }
 
-  private syncRenderer(animation: 'loading' | null = null): void {
-    if (!this.renderer) return;
-    this.renderer.stop();
-    this.renderer.setOptions(this.getRendererOptions());
-    if (animation && this.isConnected && !this.prefersReducedMotion()) {
-      this.renderer.start(animation);
+  private getInitialPhase(): TSioLogoAnimationPhase | null {
+    if (!this.isConnected || this.prefersReducedMotion()) return null;
+    if (this.loading) return 'loading';
+    return this.noEntrance ? null : 'in';
+  }
+
+  private syncRendererOptions(): void {
+    const options = this.getRendererOptions();
+    this.lastLight = options.light;
+    if (this.backendState === 'worker') {
+      this.worker?.postMessage({ type: 'options', options });
+    } else if (this.backendState === 'main') {
+      this.renderer?.setOptions(options);
+    } else {
+      this.queuedOptions = true;
     }
-    else this.renderer.drawStatic();
+  }
+
+  private sendPhase(phase: TSioLogoPhaseCommand): void {
+    if (this.backendState === 'worker') {
+      this.worker?.postMessage({ type: 'phase', phase });
+      return;
+    }
+    if (this.backendState === 'main' && this.renderer) {
+      if (phase === 'stop') {
+        this.renderer.stop();
+        this.renderer.drawStatic();
+      } else if (phase === 'clear') {
+        this.renderer.clear();
+      } else {
+        this.renderer.start(phase);
+      }
+      return;
+    }
+    this.queuedPhase = phase;
   }
 
   private prefersReducedMotion(): boolean {
@@ -253,6 +465,13 @@ export class SioLogo extends DeesElement {
 
     let element: Element | null = this;
     while (element) {
+      if (element === document.body || element === document.documentElement) {
+        const pageTheme =
+          document.documentElement.getAttribute('data-sio-theme') ||
+          document.documentElement.getAttribute('data-theme');
+        if (pageTheme === 'light') return true;
+        if (pageTheme === 'dark') return false;
+      }
       const color = getComputedStyle(element).backgroundColor;
       const match = color.match(
         /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.]+))?\s*\)/,
@@ -271,7 +490,8 @@ export class SioLogo extends DeesElement {
       const root = element.getRootNode();
       element = element.parentElement || (root instanceof ShadowRoot ? root.host : null);
     }
-    return window.matchMedia?.('(prefers-color-scheme: light)').matches ?? false;
+
+    return false;
   }
 
   private observeAmbientTheme(): void {
@@ -281,15 +501,11 @@ export class SioLogo extends DeesElement {
       attributes: true,
       attributeFilter: ['data-sio-theme', 'data-theme', 'class', 'style'],
     });
-    this.colorSchemeMedia = window.matchMedia?.('(prefers-color-scheme: light)') ?? null;
-    this.colorSchemeMedia?.addEventListener('change', this.handleAmbientChange);
   }
 
   private stopAmbientThemeObservation(): void {
     this.themeObserver?.disconnect();
     this.themeObserver = null;
-    this.colorSchemeMedia?.removeEventListener('change', this.handleAmbientChange);
-    this.colorSchemeMedia = null;
   }
 
   private observeReducedMotion(): void {