@social.io/catalog 2.0.0 → 2.1.1

package/ts_web/elements/sio-logo.ts

@@ -0,0 +1,527 @@
+import {
+  DeesElement,
+  css,
+  customElement,
+  directives,
+  html,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+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;
+  }
+}
+
+/**
+ * The social.io faceted S brand mark from the v8 design prototype.
+ *
+ * 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 {
+  public static demo = () => html`
+    <div style="display:flex;align-items:center;gap:32px;padding:24px;background:#101012;">
+      <sio-logo size="120" theme="dark"></sio-logo>
+      <sio-logo size="120" square background="#556270" radius="22" theme="dark"></sio-logo>
+      <sio-logo size="120" loading theme="dark"></sio-logo>
+      <sio-logo size="120" mono="#ffffff" no-entrance theme="dark"></sio-logo>
+    </div>
+  `;
+
+  /** rendered height in CSS pixels; tight-crop width follows the brand aspect */
+  @property({ type: Number })
+  public accessor size = 40;
+
+  @property({ type: String })
+  public accessor background = 'transparent';
+
+  /** inward inset per facet, in 500px design-grid units */
+  @property({ type: Number })
+  public accessor gap = 2;
+
+  /** facet corner radius, in 500px design-grid units */
+  @property({ type: Number })
+  public accessor radius = 16;
+
+  /** render on a square tile instead of the tight S crop */
+  @property({ type: Boolean })
+  public accessor square = false;
+
+  /** collapse the palette to one color while retaining facet depth */
+  @property({ type: String })
+  public accessor mono = '';
+
+  /** backdrop palette; auto follows the nearest opaque surface */
+  @property({ type: String })
+  public accessor theme: TSioLogoTheme = 'auto';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor loading = false;
+
+  @property({ type: Boolean, attribute: 'no-entrance' })
+  public accessor noEntrance = false;
+
+  @property({ type: Boolean, attribute: 'no-hover' })
+  public accessor noHover = false;
+
+  @state()
+  private accessor canvasGeneration = 0;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+        flex: none;
+        line-height: 0;
+      }
+      canvas {
+        display: block;
+      }
+    `,
+  ];
+
+  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 reducedMotionMedia: MediaQueryList | null = null;
+  private lastDevicePixelRatio = 0;
+  private lastLight: boolean | null = null;
+
+  private readonly handlePointerEnter = (): void => {
+    if (!this.noHover && !this.loading && !this.prefersReducedMotion()) this.wave();
+  };
+
+  private readonly handleAmbientChange = (): void => {
+    if (this.theme !== 'auto') return;
+    const light = this.isLightBackdrop();
+    if (light === this.lastLight) return;
+    this.lastLight = light;
+    this.syncRendererOptions();
+  };
+
+  private readonly handleReducedMotionChange = (): void => {
+    if (this.prefersReducedMotion()) this.sendPhase('stop');
+    else if (this.loading) this.sendPhase('loading');
+  };
+
+  private readonly handleResize = (): void => {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    if (devicePixelRatio === this.lastDevicePixelRatio) return;
+    this.syncRendererOptions();
+  };
+
+  public async connectedCallback(): Promise<void> {
+    const generation = ++this.lifecycleGeneration;
+    const connection = super.connectedCallback();
+    this.ensureAccessibleHost();
+    this.addEventListener('mouseenter', this.handlePointerEnter);
+    window.addEventListener('resize', this.handleResize);
+    this.observeReducedMotion();
+    await connection;
+    await this.updateComplete;
+    if (!this.isConnected || generation !== this.lifecycleGeneration) return;
+    this.observeAmbientTheme();
+    if (this.hasUpdated && this.backendState === 'idle') this.initializeCanvas();
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    const generation = ++this.lifecycleGeneration;
+    this.cleanupOwnedResources(true);
+    await super.disconnectedCallback();
+    if (!this.isConnected && generation === this.lifecycleGeneration) {
+      this.cleanupOwnedResources(true);
+    }
+  }
+
+  private cleanupOwnedResources(replaceTransferredCanvas: boolean): void {
+    this.removeEventListener('mouseenter', this.handlePointerEnter);
+    window.removeEventListener('resize', this.handleResize);
+    this.stopAmbientThemeObservation();
+    this.stopReducedMotionObservation();
+    this.destroyBackend(replaceTransferredCanvas);
+  }
+
+  public render(): TemplateResult {
+    const height = this.normalizedSize;
+    const width = this.square ? height : Math.round(height * sioLogoAspect);
+    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);
+    this.observeAmbientTheme();
+    this.initializeCanvas();
+  }
+
+  public updated(changedProperties: Map<PropertyKey, unknown>): void {
+    if (!this.initialUpdateHandled) {
+      this.initialUpdateHandled = true;
+      return;
+    }
+    if (!this.isConnected) return;
+    if (changedProperties.has('canvasGeneration')) {
+      this.initializeCanvas();
+      return;
+    }
+
+    const shapeProperties: PropertyKey[] = [
+      'size',
+      'gap',
+      'radius',
+      'square',
+      'background',
+      'mono',
+    ];
+    if (shapeProperties.some((propertyName) => changedProperties.has(propertyName))) {
+      this.syncRendererOptions();
+    }
+    if (changedProperties.has('theme')) {
+      this.stopAmbientThemeObservation();
+      this.observeAmbientTheme();
+      this.syncRendererOptions();
+    }
+    if (changedProperties.has('loading')) {
+      this.sendPhase(
+        this.loading && !this.prefersReducedMotion() ? 'loading' : 'stop',
+      );
+    }
+  }
+
+  protected themeChanged(): void {
+    this.handleAmbientChange();
+  }
+
+  public play(): void {
+    if (!this.isConnected) return;
+    this.sendPhase(this.prefersReducedMotion() ? 'stop' : 'in');
+  }
+
+  public wave(): void {
+    if (!this.isConnected) return;
+    this.sendPhase(this.prefersReducedMotion() ? 'stop' : 'wave');
+  }
+
+  public dismiss(): void {
+    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(): ISioLogoRenderOptions {
+    this.lastDevicePixelRatio = window.devicePixelRatio || 1;
+    return {
+      size: this.normalizedSize,
+      dpr: this.lastDevicePixelRatio,
+      gap: Number.isFinite(this.gap) ? Math.max(0, this.gap) : 2,
+      radius: Number.isFinite(this.radius) ? Math.max(0, this.radius) : 16,
+      square: this.square,
+      background: this.background,
+      mono: this.mono,
+      light: this.isLightBackdrop(),
+    };
+  }
+
+  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;
+    }
+  }
+
+  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 {
+    return this.reducedMotionMedia?.matches ??
+      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??
+      false;
+  }
+
+  private isLightBackdrop(): boolean {
+    if (this.theme === 'light') return true;
+    if (this.theme === 'dark') return false;
+
+    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*\)/,
+      );
+      if (match) {
+        const alpha = match[4] === undefined ? 1 : Number.parseFloat(match[4]);
+        if (alpha > 0.2) {
+          const luminance =
+            (0.2126 * Number(match[1]) +
+              0.7152 * Number(match[2]) +
+              0.0722 * Number(match[3])) /
+            255;
+          return luminance > 0.55;
+        }
+      }
+      const root = element.getRootNode();
+      element = element.parentElement || (root instanceof ShadowRoot ? root.host : null);
+    }
+
+    return false;
+  }
+
+  private observeAmbientTheme(): void {
+    if (this.theme !== 'auto' || this.themeObserver) return;
+    this.themeObserver = new MutationObserver(this.handleAmbientChange);
+    this.themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-sio-theme', 'data-theme', 'class', 'style'],
+    });
+  }
+
+  private stopAmbientThemeObservation(): void {
+    this.themeObserver?.disconnect();
+    this.themeObserver = null;
+  }
+
+  private observeReducedMotion(): void {
+    if (this.reducedMotionMedia) return;
+    this.reducedMotionMedia = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? null;
+    this.reducedMotionMedia?.addEventListener('change', this.handleReducedMotionChange);
+  }
+
+  private stopReducedMotionObservation(): void {
+    this.reducedMotionMedia?.removeEventListener('change', this.handleReducedMotionChange);
+    this.reducedMotionMedia = null;
+  }
+
+  private ensureAccessibleHost(): void {
+    if (this.hasAttribute('aria-hidden')) return;
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'img');
+    if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'social.io');
+  }
+}

package/ts_web/elements/sio-tab-bar.ts

@@ -52,8 +52,8 @@ const calendarChannel: ISioTabBarChannel = {
  *
  * A liquid-glass bar (blur 28px saturate 180%, 0.5px top hairline) with one
  * flex-equal tab per channel: 22px icon over a 10.5px label. The active tab
- * lights up in its channel color; 30px bottom padding clears the iOS home
- * indicator. Selecting a tab dispatches `tab-change` with `{ id, channel }`
+ * lights up in its channel color; safe-area-aware bottom padding clears the
+ * iOS home indicator. Selecting a tab dispatches `tab-change` with `{ id, channel }`
  * (bubbles, composed).
  */
 @customElement('sio-tab-bar')
@@ -107,7 +107,7 @@ export class SioTabBar extends DeesElement {
       /* toolbar glass, hairline on the top edge (the bar sits at the bottom) */
       .bar {
         display: flex;
-        padding: 8px 0 30px; /* 30px clears the iOS home indicator */
+        padding: 8px 0 max(30px, var(--sio-safe-area-bottom, env(safe-area-inset-bottom, 0px)));
         background: var(--sio-toolbar-glass-bg);
         backdrop-filter: blur(28px) saturate(180%);
         -webkit-backdrop-filter: blur(28px) saturate(180%);