@social.io/catalog 2.0.0 → 2.1.0

package/dist_ts_web/elements/sio-logo.js

@@ -0,0 +1,393 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, css, customElement, html, property, } from '@design.estate/dees-element';
+import { SioLogoRenderer, sioLogoAspect } from './sio-logo-render.js';
+import { sioElementStyles } from './tokens.js';
+/**
+ * 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.
+ */
+let SioLogo = (() => {
+    let _classDecorators = [customElement('sio-logo')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _background_decorators;
+    let _background_initializers = [];
+    let _background_extraInitializers = [];
+    let _gap_decorators;
+    let _gap_initializers = [];
+    let _gap_extraInitializers = [];
+    let _radius_decorators;
+    let _radius_initializers = [];
+    let _radius_extraInitializers = [];
+    let _square_decorators;
+    let _square_initializers = [];
+    let _square_extraInitializers = [];
+    let _mono_decorators;
+    let _mono_initializers = [];
+    let _mono_extraInitializers = [];
+    let _theme_decorators;
+    let _theme_initializers = [];
+    let _theme_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _noEntrance_decorators;
+    let _noEntrance_initializers = [];
+    let _noEntrance_extraInitializers = [];
+    let _noHover_decorators;
+    let _noHover_initializers = [];
+    let _noHover_extraInitializers = [];
+    var SioLogo = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [property({ type: Number })];
+            _background_decorators = [property({ type: String })];
+            _gap_decorators = [property({ type: Number })];
+            _radius_decorators = [property({ type: Number })];
+            _square_decorators = [property({ type: Boolean })];
+            _mono_decorators = [property({ type: String })];
+            _theme_decorators = [property({ type: String })];
+            _loading_decorators = [property({ type: Boolean, reflect: true })];
+            _noEntrance_decorators = [property({ type: Boolean, attribute: 'no-entrance' })];
+            _noHover_decorators = [property({ type: Boolean, attribute: 'no-hover' })];
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, null, _background_decorators, { kind: "accessor", name: "background", static: false, private: false, access: { has: obj => "background" in obj, get: obj => obj.background, set: (obj, value) => { obj.background = value; } }, metadata: _metadata }, _background_initializers, _background_extraInitializers);
+            __esDecorate(this, null, _gap_decorators, { kind: "accessor", name: "gap", static: false, private: false, access: { has: obj => "gap" in obj, get: obj => obj.gap, set: (obj, value) => { obj.gap = value; } }, metadata: _metadata }, _gap_initializers, _gap_extraInitializers);
+            __esDecorate(this, null, _radius_decorators, { kind: "accessor", name: "radius", static: false, private: false, access: { has: obj => "radius" in obj, get: obj => obj.radius, set: (obj, value) => { obj.radius = value; } }, metadata: _metadata }, _radius_initializers, _radius_extraInitializers);
+            __esDecorate(this, null, _square_decorators, { kind: "accessor", name: "square", static: false, private: false, access: { has: obj => "square" in obj, get: obj => obj.square, set: (obj, value) => { obj.square = value; } }, metadata: _metadata }, _square_initializers, _square_extraInitializers);
+            __esDecorate(this, null, _mono_decorators, { kind: "accessor", name: "mono", static: false, private: false, access: { has: obj => "mono" in obj, get: obj => obj.mono, set: (obj, value) => { obj.mono = value; } }, metadata: _metadata }, _mono_initializers, _mono_extraInitializers);
+            __esDecorate(this, null, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
+            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+            __esDecorate(this, null, _noEntrance_decorators, { kind: "accessor", name: "noEntrance", static: false, private: false, access: { has: obj => "noEntrance" in obj, get: obj => obj.noEntrance, set: (obj, value) => { obj.noEntrance = value; } }, metadata: _metadata }, _noEntrance_initializers, _noEntrance_extraInitializers);
+            __esDecorate(this, null, _noHover_decorators, { kind: "accessor", name: "noHover", static: false, private: false, access: { has: obj => "noHover" in obj, get: obj => obj.noHover, set: (obj, value) => { obj.noHover = value; } }, metadata: _metadata }, _noHover_initializers, _noHover_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioLogo = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        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>
+  `;
+        #size_accessor_storage = __runInitializers(this, _size_initializers, 40);
+        /** rendered height in CSS pixels; tight-crop width follows the brand aspect */
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #background_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _background_initializers, 'transparent'));
+        get background() { return this.#background_accessor_storage; }
+        set background(value) { this.#background_accessor_storage = value; }
+        #gap_accessor_storage = (__runInitializers(this, _background_extraInitializers), __runInitializers(this, _gap_initializers, 2));
+        /** inward inset per facet, in 500px design-grid units */
+        get gap() { return this.#gap_accessor_storage; }
+        set gap(value) { this.#gap_accessor_storage = value; }
+        #radius_accessor_storage = (__runInitializers(this, _gap_extraInitializers), __runInitializers(this, _radius_initializers, 16));
+        /** facet corner radius, in 500px design-grid units */
+        get radius() { return this.#radius_accessor_storage; }
+        set radius(value) { this.#radius_accessor_storage = value; }
+        #square_accessor_storage = (__runInitializers(this, _radius_extraInitializers), __runInitializers(this, _square_initializers, false));
+        /** render on a square tile instead of the tight S crop */
+        get square() { return this.#square_accessor_storage; }
+        set square(value) { this.#square_accessor_storage = value; }
+        #mono_accessor_storage = (__runInitializers(this, _square_extraInitializers), __runInitializers(this, _mono_initializers, ''));
+        /** collapse the palette to one color while retaining facet depth */
+        get mono() { return this.#mono_accessor_storage; }
+        set mono(value) { this.#mono_accessor_storage = value; }
+        #theme_accessor_storage = (__runInitializers(this, _mono_extraInitializers), __runInitializers(this, _theme_initializers, 'auto'));
+        /** backdrop palette; auto follows the nearest opaque surface */
+        get theme() { return this.#theme_accessor_storage; }
+        set theme(value) { this.#theme_accessor_storage = value; }
+        #loading_accessor_storage = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _loading_initializers, false));
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        #noEntrance_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _noEntrance_initializers, false));
+        get noEntrance() { return this.#noEntrance_accessor_storage; }
+        set noEntrance(value) { this.#noEntrance_accessor_storage = value; }
+        #noHover_accessor_storage = (__runInitializers(this, _noEntrance_extraInitializers), __runInitializers(this, _noHover_initializers, false));
+        get noHover() { return this.#noHover_accessor_storage; }
+        set noHover(value) { this.#noHover_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+        flex: none;
+        line-height: 0;
+      }
+      canvas {
+        display: block;
+      }
+    `,
+        ];
+        renderer = (__runInitializers(this, _noHover_extraInitializers), null);
+        themeObserver = null;
+        colorSchemeMedia = null;
+        reducedMotionMedia = null;
+        lastDevicePixelRatio = 0;
+        lifecycleGeneration = 0;
+        handlePointerEnter = () => {
+            if (!this.noHover && !this.loading && !this.prefersReducedMotion())
+                this.wave();
+        };
+        handleAmbientChange = () => {
+            this.syncRenderer(this.loading ? 'loading' : null);
+        };
+        handleReducedMotionChange = () => {
+            this.syncRenderer(this.loading ? 'loading' : null);
+        };
+        handleResize = () => {
+            const currentDevicePixelRatio = window.devicePixelRatio || 1;
+            if (currentDevicePixelRatio === this.lastDevicePixelRatio)
+                return;
+            this.syncRenderer(this.loading ? 'loading' : null);
+        };
+        async connectedCallback() {
+            const generation = ++this.lifecycleGeneration;
+            const connection = super.connectedCallback();
+            this.ensureAccessibleHost();
+            this.addEventListener('mouseenter', this.handlePointerEnter);
+            window.addEventListener('resize', this.handleResize);
+            this.observeReducedMotion();
+            await connection;
+            if (!this.isConnected || generation !== this.lifecycleGeneration)
+                return;
+            if (this.hasUpdated) {
+                this.observeAmbientTheme();
+                this.syncRenderer(this.loading ? 'loading' : null);
+            }
+        }
+        async disconnectedCallback() {
+            const generation = ++this.lifecycleGeneration;
+            this.cleanupOwnedResources();
+            await super.disconnectedCallback();
+            if (!this.isConnected && generation === this.lifecycleGeneration) {
+                this.cleanupOwnedResources();
+            }
+        }
+        cleanupOwnedResources() {
+            this.removeEventListener('mouseenter', this.handlePointerEnter);
+            window.removeEventListener('resize', this.handleResize);
+            this.stopAmbientThemeObservation();
+            this.stopReducedMotionObservation();
+            this.renderer?.stop();
+        }
+        render() {
+            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>`;
+        }
+        firstUpdated(changedProperties) {
+            super.firstUpdated(changedProperties);
+            const canvas = this.shadowRoot?.querySelector('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();
+        }
+        updated(changedProperties) {
+            if (!this.isConnected) {
+                this.stopAmbientThemeObservation();
+                this.renderer?.stop();
+                return;
+            }
+            const redrawProperties = [
+                'size',
+                'gap',
+                'radius',
+                'square',
+                'background',
+                'mono',
+                'theme',
+            ];
+            if (redrawProperties.some((propertyName) => changedProperties.has(propertyName))) {
+                this.syncRenderer(this.loading ? 'loading' : null);
+            }
+            if (changedProperties.has('theme')) {
+                this.stopAmbientThemeObservation();
+                this.observeAmbientTheme();
+            }
+            if (changedProperties.has('loading')) {
+                this.syncRenderer(this.loading ? 'loading' : null);
+            }
+        }
+        themeChanged() {
+            this.syncRenderer(this.loading ? 'loading' : null);
+        }
+        play() {
+            if (!this.renderer || !this.isConnected)
+                return;
+            if (this.prefersReducedMotion())
+                this.renderer.drawStatic();
+            else
+                this.renderer.start('in');
+        }
+        wave() {
+            if (!this.renderer || !this.isConnected)
+                return;
+            if (this.prefersReducedMotion())
+                this.renderer.drawStatic();
+            else
+                this.renderer.start('wave');
+        }
+        dismiss() {
+            if (!this.renderer || !this.isConnected)
+                return;
+            if (this.prefersReducedMotion())
+                this.renderer.clear();
+            else
+                this.renderer.start('out');
+        }
+        get normalizedSize() {
+            return Number.isFinite(this.size) ? Math.max(1, this.size) : 40;
+        }
+        getRendererOptions() {
+            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(),
+            };
+        }
+        syncRenderer(animation = null) {
+            if (!this.renderer)
+                return;
+            this.renderer.stop();
+            this.renderer.setOptions(this.getRendererOptions());
+            if (animation && this.isConnected && !this.prefersReducedMotion()) {
+                this.renderer.start(animation);
+            }
+            else
+                this.renderer.drawStatic();
+        }
+        prefersReducedMotion() {
+            return this.reducedMotionMedia?.matches ??
+                window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ??
+                false;
+        }
+        isLightBackdrop() {
+            if (this.theme === 'light')
+                return true;
+            if (this.theme === 'dark')
+                return false;
+            let element = this;
+            while (element) {
+                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 window.matchMedia?.('(prefers-color-scheme: light)').matches ?? false;
+        }
+        observeAmbientTheme() {
+            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'],
+            });
+            this.colorSchemeMedia = window.matchMedia?.('(prefers-color-scheme: light)') ?? null;
+            this.colorSchemeMedia?.addEventListener('change', this.handleAmbientChange);
+        }
+        stopAmbientThemeObservation() {
+            this.themeObserver?.disconnect();
+            this.themeObserver = null;
+            this.colorSchemeMedia?.removeEventListener('change', this.handleAmbientChange);
+            this.colorSchemeMedia = null;
+        }
+        observeReducedMotion() {
+            if (this.reducedMotionMedia)
+                return;
+            this.reducedMotionMedia = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? null;
+            this.reducedMotionMedia?.addEventListener('change', this.handleReducedMotionChange);
+        }
+        stopReducedMotionObservation() {
+            this.reducedMotionMedia?.removeEventListener('change', this.handleReducedMotionChange);
+            this.reducedMotionMedia = null;
+        }
+        ensureAccessibleHost() {
+            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');
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioLogo = _classThis;
+})();
+export { SioLogo };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWxvZ28uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWxvZ28udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsR0FBRyxFQUNILGFBQWEsRUFDYixJQUFJLEVBQ0osUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLGVBQWUsRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN0RSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFVL0M7Ozs7OztHQU1HO0lBRVUsT0FBTzs0QkFEbkIsYUFBYSxDQUFDLFVBQVUsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3VCQUFuQixTQUFRLFdBQVc7Ozs7Z0NBV3JDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztzQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOytCQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7a0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztrQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO2dDQUkzQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7aUNBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7c0NBRzFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFB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

package/dist_ts_web/elements/sio-tab-bar.d.ts

@@ -21,8 +21,8 @@ export interface ISioTabChangeDetail {
  *
  * 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).
  */
 export declare class SioTabBar extends DeesElement {

package/dist_ts_web/elements/sio-tab-bar.js

@@ -58,8 +58,8 @@ const calendarChannel = {
  *
  * 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).
  */
 let SioTabBar = (() => {
@@ -139,7 +139,7 @@ let SioTabBar = (() => {
       /* 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%);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@social.io/catalog",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "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.0',
+  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