@social.io/catalog

The Apple-native design system and web components for social.io: Lit components for the unified-inbox product family — the faceted social.io brand mark, the desktop and iPhone app shell (channel rail, top bar with workspace tabs, sidebar, inspector, status bar, floating tab bar), feed rows, command palette, media primitives, and the embeddable chat-widget suite. Built on @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

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Install

pnpm add @social.io/catalog

Design System

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).
• App chrome surfaces — --sio-rail (rail, top bar, status bar), --sio-side (sidebar, inspector) and --sio-panel (inset fields and filter chips), each with its own light and dark value.
• Interaction fills — --sio-hover, --sio-fill-selected, --sio-field (search pill), --sio-kbd-bg (the search pill shortcut chip) and --sio-fill-track (status bar job progress).
• Tint — --sio-tint #0A84FF, deliberately brightened to #409CFF in dark mode, with hover and soft (translucent) variants.
• Channel palette — mail #0A84FF, chats #30D158, calls #FF9F0A, letters #A2845E, tasks #5E5CE6, contacts #30B0C7, calendar #AF52DE; lane palette (feed/paper/people) and triage-bucket palette (now/today/later/done) alongside.
• Elevation — --sio-shadow-raised, --sio-shadow-floating, --sio-shadow-overlay (inspector over content) and --sio-shadow-knob (switch knobs); --sio-floating-glass-bg backs the floating iPhone tab bar.
• Density — --sio-row-comfortable 78px, --sio-row-cozy 62px, --sio-row-compact 48px.
• Glass recipes — sioGlass, sioToolbarGlass, sioPillGlass (backdrop blur + saturate) as reusable CSS fragments.
• SF type ramp — sioTypeLargeTitle (34/700) through sioTypeCaption2 (11/400), tabular numerals for counts and times.

Theming follows the ambient theme via cssManager.bdTheme() pairs, with explicit :host([theme='dark']) / :host([dark]) attribute overrides. Every token also has a sioTheme reference (for example sioTheme.rail is var(--sio-rail)).

import { css } from '@design.estate/dees-element';
import { sioElementStyles } from '@social.io/catalog';

// in your own component:
public static styles = [
  ...sioElementStyles,
  css`
    .bar { background: var(--sio-surface); color: var(--sio-tint); }
  `,
];

Components

Components auto-register as custom elements on import.

import '@social.io/catalog';

<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 default 1.75, filled for solid glyphs)
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
sio-chip	Channel / lane / status chips (uppercase 11px on soft color-mix background)
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
sio-glass-toolbar	44px glass bar with start/center/end slots
sio-segmented	iOS-style segmented control with counts
sio-tab-bar	Mobile tab bar: the default bar variant (glass bar, channel tabs, optional calendar) or variant="floating" (v10 iPhone capsule with channel-coloured badges, sioPhoneTabs, and a round accessory such as sioPhoneAskAccessory); tab-change, accessory-click
sio-channel-rail	64px desktop rail on --sio-rail with the brand mark, the eight v10 channels by default (sioRailChannels), counts as badges or labels (countDisplay), footerActions and an account button; channel-select, rail-action, account-click
sio-dropdown-menu	Slot-triggered menu with destructive/disabled items

The bar variant of 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. The floating capsule keeps a fixed 22px bottom inset, as in the v10 iPhone frames.

Desktop app shell

Element	Purpose
sio-top-bar	38px app bar on --sio-rail: the default slot takes the workspace tabs, the end slot the search pill and Assistant button; no window chrome on the web
sio-workspace-tabs	Workspace strip: SuperView button, one tab per workspace (tabs, active, superView), dashed ephemeral tabs with a pin button, "+" at the end, arrow-key focus, drag to reorder; workspace-select, superview-select, workspace-pin, workspace-unpin, workspace-context, workspace-new, workspace-move
sio-search-pill	⌘K pill (placeholder, shortcut, wide); search-open
sio-assistant-button	Assistant toggle with filled sparkle (open, busy, label, wide); assistant-toggle
sio-sidebar	Sidebar pane on --sio-side with a 44px header (heading, subtitle) and an optional resize handle (resizable, width, minWidth, maxWidth); pane-resize, pane-resize-end
sio-sidebar-section	Group of sidebar items under an uppercase heading
sio-sidebar-item	Sidebar row with an icon, lane swatch or initials avatar and a count; solid or soft selection in an accent colour, dimmed; sidebar-select
sio-inspector	Inspector pane with a 44px header (heading, closable), optional resize handle on its left edge (resizable) and overlay mode over the content; inspector-close
sio-inspector-section	Inspector section by kind: subject, summary, kv, list, media, steps, toggles, note or custom (slotted, optionally in a card); section-action, inspector-row, inspector-row-action, inspector-subject-action, inspector-toggle
sio-pane-splitter	Keyboard-accessible pane resize handle (separator role; arrow keys, Shift, Home, End, pointer drag) on a pane's start or end edge (value, min, max, step); pane-resize, pane-resize-end
sio-status-bar	22px status bar: server, entity and workspace crumbs (context), leftItems, background jobs with progress and rightItems; status-crumb, status-item, status-job

All events bubble and are composed, so a host can listen at any ancestor.

Lists and feed

Element	Purpose
sio-list-row	Universal row: three densities, unread-dot gutter, selection tint, hover action slot
sio-inset-list	iOS grouped card list with inset hairlines and section headers
sio-bucket-header	Triage-bucket header (colored dot + uppercase label + count)

Content and input

Element	Purpose
sio-ai-card	AI summary/translation surface (soft tint, uppercase eyebrow, bullets)
sio-composer	Pill input + circular send button, attach slot, email-capture variant
sio-cmdk	Command palette: search, grouped results, keyboard navigation, kbd chords
sio-waveform	Voicemail player bar chart with progress coloring and counters
sio-step-timeline	Vertical tracking timeline (done/pending steps)
sio-paper-thumb	Physical-letter thumbnail (torn-edge inbound / stamped outbound)

Embeddable chat-widget suite

Element	Purpose
sio-fab	56px tinted launcher with unread badge and open/close crossfade
sio-combox	The widget shell (380×620, singleton createOnBody()), welcome → conversation → away states, "Powered by social.io" footer
sio-conversation-selector	Gradient-header welcome pane: team avatar stack, recent conversation, CTA, FAQ list
sio-conversation-view	Message thread: glass header with presence, bubbles, typing indicator, away→email notice
sio-message-input	Composer wrapper with attachments and email-capture mode
sio-image-lightbox / sio-pdf-viewer	Attachment viewers (zoom/pan images, paginated PDFs)

<!-- Drop-in chat widget -->
<sio-fab></sio-fab>

import { SioCombox } from '@social.io/catalog';

const combox = SioCombox.createOnBody();
combox.open();

Development

pnpm install
pnpm watch    # wcctools component dashboard on http://localhost:3002
pnpm test     # Chromium component tests via tsrepo test
pnpm build    # tsrepo build + tsrepo bundle

Every component ships a static demo rendered in the wcctools dashboard, grouped into Primitives, Chat Widget, and Pages sections, with light/dark and viewport switching.

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 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.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

Company Information

Task Venture Capital GmbH
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.

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.