@social.io/catalog 2.0.0 → 2.1.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@social.io/catalog",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "private": false,
-  "description": "v7 Apple-native design system and web components for social.io",
+  "description": "Apple-native v8 design system and web components for social.io",
   "exports": {
     ".": "./dist_ts_web/index.js"
   },
@@ -16,11 +16,11 @@
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^4.4.2",
-    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tsbundle": "^2.11.2",
     "@git.zone/tsrun": "^2.0.5",
     "@git.zone/tstest": "^3.6.6",
-    "@git.zone/tswatch": "^3.3.2",
-    "@types/node": "^26.1.0",
+    "@git.zone/tswatch": "^3.3.5",
+    "@types/node": "^26.1.1",
     "@design.estate/dees-wcctools": "^3.9.0"
   },
   "files": [

package/readme.hints.md

@@ -1,6 +1,6 @@
 # @social.io/catalog — hints
 
-## v2 architecture (v7 design program)
+## v2 architecture (v8 design program)
 
 - Pure web-component catalog: Lit via `@design.estate/dees-element` with
   standard TC39 decorators (`@property({ ... }) public accessor x`,
@@ -8,7 +8,7 @@
   media-recorder stack was removed.
 - Every element: `@customElement('sio-...')`, a
   `declare global { interface HTMLElementTagNameMap }` entry, a
-  `public static demo = () => html\`...\`` with realistic v7 content, and
+  `public static demo = () => html\`...\`` with realistic v8 content, and
   `static styles = [...sioElementStyles, css\`...\`]`.
 - Entry points:
   - `ts_web/index.ts` → re-exports `ts_web/elements/index.ts` (the barrel:
@@ -54,9 +54,10 @@
 - Icons: `sio-icon` is a thin wrapper over the `lucide` npm package
   (never a CDN), with a small alias map (e.g. `envelope` → `mail`).
 
-## Component inventory (27 files / 28 elements)
+## Component inventory (28 files / 29 elements)
 
-Foundation: `sio-icon`, `sio-button`, `sio-kbd`, `sio-chip`
+Foundation: `sio-logo` (faceted canvas mark, theme/DPR/reduced-motion aware),
+`sio-icon`, `sio-button`, `sio-kbd`, `sio-chip`
 (channel/lane/status palettes), `sio-avatar` + `sio-avatar-stack`,
 `sio-unread-badge`.
 

package/readme.md

@@ -1,6 +1,6 @@
 # @social.io/catalog
 
-The social.io v7 design system and web component library: Apple-native Lit components for the unified-inbox product family — feed rows, channel navigation, command palette, media primitives, and the embeddable chat-widget suite. Built on [@design.estate/dees-element](https://www.npmjs.com/package/@design.estate/dees-element) (Lit 3, standard TC39 decorators) with a CSS-custom-property token system and full light/dark theming.
+The social.io v8 design system and web component library: Apple-native Lit components for the unified-inbox product family — the faceted social.io brand mark, feed rows, channel navigation, command palette, media primitives, and the embeddable chat-widget suite. Built on [@design.estate/dees-element](https://www.npmjs.com/package/@design.estate/dees-element) (Lit 3, standard TC39 decorators) with a CSS-custom-property token system and full light/dark theming.
 
 ## Issue Reporting and Security
 
@@ -14,7 +14,8 @@ pnpm add @social.io/catalog
 
 ## Design System
 
-Every component draws exclusively from the token layer in `tokens.ts`:
+Product UI components draw from the token layer in `tokens.ts`; `sio-logo`
+preserves the canonical v8 facet palette as brand artwork:
 
 - **Semantic surfaces** — `--sio-bg`, `--sio-surface`, `--sio-surface-2`, four label levels, and 0.5px hairline separators, switching between iOS-style light (`#F2F2F7`/`#FFFFFF`) and true-black dark (`#000`/`#1C1C1E`).
 - **Tint** — `--sio-tint` `#0A84FF`, deliberately brightened to `#409CFF` in dark mode, with hover and soft (translucent) variants.
@@ -42,10 +43,19 @@ public static styles = [
 
 Components auto-register as custom elements on import.
 
+```typescript
+import '@social.io/catalog';
+```
+
+```html
+<sio-logo size="30" theme="auto" no-entrance></sio-logo>
+```
+
 ### Foundation
 
 | Element | Purpose |
 | --- | --- |
+| `sio-logo` | Faceted social.io S mark with tight/square layouts, palette modes, and reduced-motion-aware animations |
 | `sio-icon` | Lucide icon renderer (`icon`, `size`, `color`, `strokeWidth`) |
 | `sio-button` | Primary / secondary / destructive / outline / ghost variants, sm–lg sizes, status spinner |
 | `sio-avatar` / `sio-avatar-stack` | Initials-on-tint circles with presence dot, channel badge, overlapping stacks |
@@ -53,6 +63,24 @@ Components auto-register as custom elements on import.
 | `sio-unread-badge` | Count pills in channel colors, rail-sized variant |
 | `sio-kbd` | Keyboard-shortcut hint chip (mono, hairline border) |
 
+#### `sio-logo`
+
+| Property | Default | Purpose |
+| --- | --- | --- |
+| `size` | `40` | Mark height in CSS pixels; tight-crop width follows the brand aspect ratio |
+| `background` | `transparent` | Canvas background color |
+| `gap` | `2` | Inset between facets in the 500px design grid |
+| `radius` | `16` | Facet corner radius in the 500px design grid |
+| `square` | `false` | Render on a square tile instead of the tight S crop |
+| `mono` | empty | Use one color while retaining facet depth |
+| `theme` | `auto` | Select `auto`, `light`, or `dark` backdrop palette behavior |
+| `loading` | `false` | Run the looping loading treatment |
+| `no-entrance` | `false` | Disable the entrance animation |
+| `no-hover` | `false` | Disable the pointer wave animation |
+
+The public `play()`, `wave()`, and `dismiss()` methods trigger the entrance,
+wave, and exit treatments. All motion respects `prefers-reduced-motion`.
+
 ### Chrome and navigation
 
 | Element | Purpose |
@@ -60,9 +88,14 @@ Components auto-register as custom elements on import.
 | `sio-glass-toolbar` | 44px glass bar with start/center/end slots |
 | `sio-segmented` | iOS-style segmented control with counts |
 | `sio-tab-bar` | Mobile bottom glass bar, channel tabs + optional calendar |
-| `sio-channel-rail` | 64px desktop rail with per-channel unread badges |
+| `sio-channel-rail` | 64px desktop rail with the built-in v8 brand mark and per-channel unread badges |
 | `sio-dropdown-menu` | Slot-triggered menu with destructive/disabled items |
 
+`sio-tab-bar` uses `max(30px, var(--sio-safe-area-bottom,
+env(safe-area-inset-bottom, 0px)))` for its bottom padding. Set
+`--sio-safe-area-bottom` when a screenshot or native shell supplies a known
+system-reserved area.
+
 ### Lists and feed
 
 | Element | Purpose |
@@ -118,7 +151,7 @@ Every component ships a `static demo` rendered in the wcctools dashboard, groupe
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license.md](./license.md) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the repository license file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 
@@ -130,7 +163,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
 
 ### Company Information
 
-Task Venture Capital GmbH
+Task Venture Capital GmbH<br>
 Registered at District Court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or further information, please contact us via email at hello@task.vc.

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '2.0.0',
-  description: 'v7 Apple-native design system and web components for social.io'
+  version: '2.1.1',
+  description: 'Apple-native v8 design system and web components for social.io'
 }

package/ts_web/elements/index.ts

@@ -2,6 +2,7 @@
 export * from './tokens.js';
 
 // foundation
+export * from './sio-logo.js';
 export * from './sio-icon.js';
 export * from './sio-button.js';
 export * from './sio-kbd.js';

package/ts_web/elements/sio-channel-rail.ts

@@ -8,6 +8,7 @@ import {
 } from '@design.estate/dees-element';
 import { sioElementStyles } from './tokens.js';
 import './sio-icon.js';
+import './sio-logo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -123,6 +124,15 @@ export class SioChannelRail extends DeesElement {
         border-right: var(--sio-hairline) solid var(--sio-separator);
       }
 
+      .brand {
+        height: 35px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 2px 0 9px;
+      }
+
       .item {
         appearance: none;
         border: none;
@@ -204,6 +214,9 @@ export class SioChannelRail extends DeesElement {
   public render(): TemplateResult {
     return html`
       <nav class="rail" part="rail">
+        <div class="brand" part="brand">
+          <sio-logo size="24" no-entrance no-hover aria-hidden="true"></sio-logo>
+        </div>
         ${this.channels.map(
           (channel) => html`
             <button

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

@@ -0,0 +1,388 @@
+export type TSioLogoAnimationPhase = 'in' | 'out' | 'wave' | 'loading';
+
+export interface ISioLogoRenderOptions {
+  size: number;
+  dpr: number;
+  gap: number;
+  radius: number;
+  square: boolean;
+  background: string;
+  mono: string;
+  light: boolean;
+}
+
+export type TSioLogoRenderContext =
+  | CanvasRenderingContext2D
+  | OffscreenCanvasRenderingContext2D;
+
+interface ISioLogoPoint {
+  x: number;
+  y: number;
+}
+
+interface ISioLogoFacet {
+  fill: string;
+  points: [[number, number], [number, number], [number, number]];
+}
+
+const facets: ISioLogoFacet[] = [
+  { fill: '#4AA0F5', points: [[250, 75], [150, 133.333], [250, 191.667]] },
+  { fill: '#0A5AC0', points: [[250, 75], [350, 133.333], [250, 191.667]] },
+  { fill: '#DBEBFF', points: [[150, 133.333], [250, 191.667], [150, 250]] },
+  { fill: '#A9CDF7', points: [[250, 191.667], [150, 250], [250, 308.333]] },
+  { fill: '#1E80E6', points: [[250, 191.667], [350, 250], [250, 308.333]] },
+  { fill: '#1466C6', points: [[350, 250], [250, 308.333], [350, 366.667]] },
+  { fill: '#74B4F7', points: [[250, 308.333], [350, 366.667], [250, 425]] },
+  { fill: '#1E80E6', points: [[250, 308.333], [150, 366.667], [250, 425]] },
+];
+
+const lightFills = [
+  '#4AA0F5', '#0A5AC0', '#8FBEF5', '#77ACEE',
+  '#1E80E6', '#1466C6', '#5FA6F2', '#1E80E6',
+];
+const monoOpacities = [0.78, 0.64, 0.96, 0.86, 0.72, 0.66, 0.82, 0.72];
+const tightBounds = { x: 146, y: 72, width: 208, height: 356 };
+const centerX = 250;
+const centerY = 250;
+
+export const sioLogoAspect = tightBounds.width / tightBounds.height;
+
+const centroids = facets.map((facet) => [
+  (facet.points[0][0] + facet.points[1][0] + facet.points[2][0]) / 3,
+  (facet.points[0][1] + facet.points[1][1] + facet.points[2][1]) / 3,
+]);
+
+const clamp = (value: number, minimum: number, maximum: number): number =>
+  Math.max(minimum, Math.min(maximum, value));
+
+const finiteAtLeast = (value: number, minimum: number, fallback: number): number =>
+  Number.isFinite(value) ? Math.max(minimum, value) : fallback;
+
+const normalizeOptions = (options: ISioLogoRenderOptions): ISioLogoRenderOptions => ({
+  ...options,
+  size: finiteAtLeast(options.size, 1, 40),
+  dpr: clamp(finiteAtLeast(options.dpr, 0.5, 1), 0.5, 4),
+  gap: finiteAtLeast(options.gap, 0, 2),
+  radius: finiteAtLeast(options.radius, 0, 16),
+});
+
+const inset = (
+  points: ISioLogoFacet['points'],
+  gap: number,
+): ISioLogoPoint[] => {
+  if (gap <= 0) return points.map(([x, y]) => ({ x, y }));
+  const centroidX = (points[0][0] + points[1][0] + points[2][0]) / 3;
+  const centroidY = (points[0][1] + points[1][1] + points[2][1]) / 3;
+  const lines: Array<ISioLogoPoint & { dx: number; dy: number }> = [];
+
+  for (let index = 0; index < points.length; index += 1) {
+    const start = points[index];
+    const end = points[(index + 1) % points.length];
+    let deltaX = end[0] - start[0];
+    let deltaY = end[1] - start[1];
+    const length = Math.hypot(deltaX, deltaY);
+    deltaX /= length;
+    deltaY /= length;
+    let normalX = -deltaY;
+    let normalY = deltaX;
+    const middleX = (start[0] + end[0]) / 2;
+    const middleY = (start[1] + end[1]) / 2;
+    if ((centroidX - middleX) * normalX + (centroidY - middleY) * normalY < 0) {
+      normalX = -normalX;
+      normalY = -normalY;
+    }
+    lines.push({
+      x: start[0] + normalX * gap,
+      y: start[1] + normalY * gap,
+      dx: deltaX,
+      dy: deltaY,
+    });
+  }
+
+  return lines.map((line, index) => {
+    const previous = lines[(index - 1 + lines.length) % lines.length];
+    const denominator = previous.dx * line.dy - previous.dy * line.dx;
+    const distance =
+      ((line.x - previous.x) * line.dy - (line.y - previous.y) * line.dx) /
+      denominator;
+    return {
+      x: previous.x + previous.dx * distance,
+      y: previous.y + previous.dy * distance,
+    };
+  });
+};
+
+const createFacetPath = (
+  points: ISioLogoFacet['points'],
+  gap: number,
+  radius: number,
+): Path2D => {
+  const insetPoints = inset(points, gap);
+  const path = new Path2D();
+  if (radius <= 0) {
+    path.moveTo(insetPoints[0].x, insetPoints[0].y);
+    for (let index = 1; index < insetPoints.length; index += 1) {
+      path.lineTo(insetPoints[index].x, insetPoints[index].y);
+    }
+    path.closePath();
+    return path;
+  }
+
+  for (let index = 0; index < insetPoints.length; index += 1) {
+    const vertex = insetPoints[index];
+    const previous = insetPoints[(index - 1 + insetPoints.length) % insetPoints.length];
+    const next = insetPoints[(index + 1) % insetPoints.length];
+    const previousDistance = Math.hypot(previous.x - vertex.x, previous.y - vertex.y);
+    const nextDistance = Math.hypot(next.x - vertex.x, next.y - vertex.y);
+    const previousRadius = Math.min(radius, previousDistance * 0.5);
+    const nextRadius = Math.min(radius, nextDistance * 0.5);
+    const entry = {
+      x: vertex.x + ((previous.x - vertex.x) / previousDistance) * previousRadius,
+      y: vertex.y + ((previous.y - vertex.y) / previousDistance) * previousRadius,
+    };
+    const exit = {
+      x: vertex.x + ((next.x - vertex.x) / nextDistance) * nextRadius,
+      y: vertex.y + ((next.y - vertex.y) / nextDistance) * nextRadius,
+    };
+    if (index === 0) path.moveTo(entry.x, entry.y);
+    else path.lineTo(entry.x, entry.y);
+    path.quadraticCurveTo(vertex.x, vertex.y, exit.x, exit.y);
+  }
+  path.closePath();
+  return path;
+};
+
+const easeOutCubic = (progress: number): number => 1 - Math.pow(1 - progress, 3);
+const easeOutBack = (progress: number): number => {
+  const coefficient = 1.70158;
+  return 1 + (coefficient + 1) * Math.pow(progress - 1, 3) + coefficient * Math.pow(progress - 1, 2);
+};
+const easeInCubic = (progress: number): number => progress * progress * progress;
+const easeInBack = (progress: number): number => {
+  const coefficient = 1.70158;
+  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: TSioLogoFrameHandle | null = null;
+  private phase: TSioLogoAnimationPhase | null = null;
+  private startedAt = 0;
+  private stagger = 70;
+  private duration = 560;
+  private totalDuration = 0;
+  private backingWidth = 0;
+  private backingHeight = 0;
+  private scale = 1;
+  private offsetX = 0;
+  private offsetY = 0;
+  private paths: Path2D[] = [];
+  private loadingPaths: Path2D[] = [];
+  private fills: string[] = [];
+  private opacities: number[] = [];
+
+  constructor(
+    private readonly context: TSioLogoRenderContext,
+    options: ISioLogoRenderOptions,
+  ) {
+    this.options = normalizeOptions(options);
+    this.rebuild();
+  }
+
+  public setOptions(options: ISioLogoRenderOptions): void {
+    this.options = normalizeOptions(options);
+    this.rebuild();
+    if (!this.phase) this.drawStatic();
+  }
+
+  public drawStatic(): void {
+    this.clearCanvas();
+    for (let index = 0; index < facets.length; index += 1) {
+      this.paint(index, 0, 0, 0, 1, this.opacities[index], this.paths[index]);
+    }
+    this.context.globalAlpha = 1;
+  }
+
+  public clear(): void {
+    this.stop();
+    this.clearCanvas();
+  }
+
+  public start(phase: TSioLogoAnimationPhase): void {
+    this.stop();
+    this.phase = phase;
+    this.startedAt = performance.now();
+    this.stagger = phase === 'wave' ? 55 : 70;
+    this.duration = phase === 'wave' ? 420 : 560;
+    this.totalDuration = this.stagger * (facets.length - 1) + this.duration;
+
+    const drawFrame = (time: number): void => {
+      if (!this.phase) return;
+      const elapsed = time - this.startedAt;
+      this.drawAnimationFrame(elapsed);
+      if (this.phase !== 'loading' && elapsed >= this.totalDuration) {
+        this.settle();
+        return;
+      }
+      this.frameHandle = requestFrame(drawFrame);
+    };
+    this.frameHandle = requestFrame(drawFrame);
+  }
+
+  public stop(): void {
+    if (this.frameHandle !== null) {
+      cancelFrame(this.frameHandle);
+      this.frameHandle = null;
+    }
+    this.phase = null;
+  }
+
+  private rebuild(): void {
+    const { size, dpr, square, light, mono, gap, radius } = this.options;
+    this.backingWidth = Math.round((square ? size : size * sioLogoAspect) * dpr);
+    this.backingHeight = Math.round(size * dpr);
+    this.context.canvas.width = this.backingWidth;
+    this.context.canvas.height = this.backingHeight;
+    if (square) {
+      this.scale = this.backingWidth / 500;
+      this.offsetX = 0;
+      this.offsetY = 0;
+    } else {
+      this.scale = this.backingHeight / tightBounds.height;
+      this.offsetX =
+        -tightBounds.x * this.scale +
+        (this.backingWidth - tightBounds.width * this.scale) / 2;
+      this.offsetY = -tightBounds.y * this.scale;
+    }
+    this.paths = facets.map((facet) => createFacetPath(facet.points, gap, radius));
+    this.loadingPaths = facets.map((facet) => createFacetPath(facet.points, gap + 3, 90));
+    this.fills = facets.map((facet, index) => mono || (light ? lightFills[index] : facet.fill));
+    this.opacities = facets.map((_, index) => (mono ? monoOpacities[index] : 1));
+  }
+
+  private clearCanvas(): void {
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
+    this.context.clearRect(0, 0, this.backingWidth, this.backingHeight);
+    const { background } = this.options;
+    if (background && background !== 'transparent' && background !== 'none') {
+      this.context.fillStyle = background;
+      this.context.fillRect(0, 0, this.backingWidth, this.backingHeight);
+    }
+  }
+
+  private paint(
+    index: number,
+    translateX: number,
+    translateY: number,
+    rotation: number,
+    scale: number,
+    opacity: number,
+    path: Path2D,
+  ): void {
+    const [centroidX, centroidY] = centroids[index];
+    this.context.setTransform(this.scale, 0, 0, this.scale, this.offsetX, this.offsetY);
+    this.context.translate(translateX, translateY);
+    this.context.translate(centroidX, centroidY);
+    this.context.rotate((rotation * Math.PI) / 180);
+    this.context.scale(scale, scale);
+    this.context.translate(-centroidX, -centroidY);
+    this.context.globalAlpha = opacity;
+    this.context.fillStyle = this.fills[index];
+    this.context.fill(path);
+  }
+
+  private drawAnimationFrame(elapsed: number): void {
+    this.clearCanvas();
+    const activePhase = this.phase;
+    for (let index = 0; index < facets.length; index += 1) {
+      const [centroidX, centroidY] = centroids[index];
+      let translateX = 0;
+      let translateY = 0;
+      let rotation = 0;
+      let scale = 1;
+      let opacity = this.opacities[index];
+      let path = this.paths[index];
+
+      if (activePhase === 'in') {
+        const progress = clamp((elapsed - index * this.stagger) / this.duration, 0, 1);
+        const eased = easeOutCubic(progress);
+        translateX = (centerX - centroidX) * (1 - eased);
+        translateY = (centerY - centroidY) * (1 - eased);
+        rotation = (1 - eased) * -16;
+        scale = easeOutBack(progress);
+        opacity = clamp(progress * 1.6, 0, 1) * this.opacities[index];
+      } else if (activePhase === 'out') {
+        const reverseIndex = facets.length - 1 - index;
+        const progress = clamp((elapsed - reverseIndex * this.stagger) / this.duration, 0, 1);
+        const eased = easeInCubic(progress);
+        translateX = (centerX - centroidX) * eased;
+        translateY = (centerY - centroidY) * eased;
+        rotation = progress * 16;
+        scale = Math.max(0, 1 - easeInBack(progress));
+        opacity = clamp(1 - progress * 1.3, 0, 1) * this.opacities[index];
+      } else if (activePhase === 'wave') {
+        const progress = clamp((elapsed - index * this.stagger) / this.duration, 0, 1);
+        const pulse = Math.sin(progress * Math.PI);
+        const radialX = centroidX - centerX;
+        const radialY = centroidY - centerY;
+        const radialLength = Math.hypot(radialX, radialY) || 1;
+        translateX = (radialX / radialLength) * 16 * pulse;
+        translateY = (radialY / radialLength) * 16 * pulse;
+        scale = 1 - 0.08 * pulse;
+      } else if (activePhase === 'loading') {
+        const growth = clamp(elapsed / 650, 0, 1);
+        const easedGrowth = growth < 0.5
+          ? 2 * growth * growth
+          : 1 - Math.pow(-2 * growth + 2, 2) / 2;
+        const looping = elapsed >= 650;
+        const spin = (elapsed / 1500) * 2 * Math.PI;
+        const angle = -Math.PI / 2 + index * Math.PI / 4 + spin;
+        const destinationX = centerX + 120 * Math.cos(angle);
+        const destinationY = centerY + 120 * Math.sin(angle);
+        const brightness = 1 - index / facets.length;
+        translateX = (destinationX - centroidX) * easedGrowth;
+        translateY = (destinationY - centroidY) * easedGrowth;
+        scale =
+          (1 + (0.62 - 1) * easedGrowth) *
+          (looping ? 0.72 + 0.28 * brightness : 1);
+        opacity = (looping ? 0.28 + 0.72 * brightness : 1) * this.opacities[index];
+        path = looping
+          ? this.loadingPaths[index]
+          : createFacetPath(
+            facets[index].points,
+            this.options.gap + 3 * easedGrowth,
+            this.options.radius + (90 - this.options.radius) * easedGrowth,
+          );
+      }
+
+      this.paint(index, translateX, translateY, rotation, scale, opacity, path);
+    }
+    this.context.globalAlpha = 1;
+  }
+
+  private settle(): void {
+    const finishedPhase = this.phase;
+    this.frameHandle = null;
+    this.phase = null;
+    if (finishedPhase === 'out') this.clearCanvas();
+    else this.drawStatic();
+    this.context.globalAlpha = 1;
+  }
+}

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' });