@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/tokens.ts

@@ -0,0 +1,297 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+/*
+ * social.io v7 tokens — Apple-native design system.
+ *
+ * Light = iOS systemGray6 canvas (#F2F2F7) with white surfaces;
+ * dark = true black with elevated #1C1C1E surfaces.
+ * System-blue tint (brightened to #409CFF in dark), SF type ramp,
+ * 0.5px hairlines, liquid-glass surfaces (blur 28px saturate 180%).
+ *
+ * Components take every PALETTE color (tint, channels, lanes, buckets,
+ * surfaces, labels) from these custom props; genuinely local material
+ * values (scrims, paper textures, control knobs) may live in the component.
+ * Tints derive via color-mix(in oklab, var(--sio-...) N%, transparent).
+ *
+ * Palettes:
+ *   channels  mail #0A84FF · chats #30D158 · calls #FF9F0A · letters #A2845E
+ *   lanes     feed #0A84FF · paper #FF9F0A · people #30D158
+ *   buckets   now #FF453A · today #FF9F0A · later #8E8E93 · done #30D158
+ */
+
+// ---------------------------------------------------------------------------
+// base custom props (light/dark via cssManager.bdTheme)
+// ---------------------------------------------------------------------------
+export const sioBaseStyles = css`
+  :host {
+    /* semantic surfaces */
+    --sio-bg: ${cssManager.bdTheme('#F2F2F7', '#000000')};
+    --sio-bg-grouped: ${cssManager.bdTheme('#F2F2F7', '#000000')};
+    --sio-surface: ${cssManager.bdTheme('#FFFFFF', '#1C1C1E')};
+    --sio-surface-2: ${cssManager.bdTheme('rgba(118,118,128,0.08)', 'rgba(118,118,128,0.24)')};
+
+    /* labels — 4 levels per iOS HIG */
+    --sio-label: ${cssManager.bdTheme('#000000', '#FFFFFF')};
+    --sio-label-2: ${cssManager.bdTheme('rgba(60,60,67,0.85)', 'rgba(235,235,245,0.85)')};
+    --sio-label-3: ${cssManager.bdTheme('rgba(60,60,67,0.60)', 'rgba(235,235,245,0.60)')};
+    --sio-label-4: ${cssManager.bdTheme('rgba(60,60,67,0.30)', 'rgba(235,235,245,0.30)')};
+
+    /* separators */
+    --sio-separator: ${cssManager.bdTheme('rgba(60,60,67,0.12)', 'rgba(84,84,88,0.65)')};
+    --sio-separator-opaque: ${cssManager.bdTheme('#C6C6C8', '#38383A')};
+
+    /* tint — system blue, brightened in dark */
+    --sio-tint: ${cssManager.bdTheme('#0A84FF', '#409CFF')};
+    --sio-tint-hover: ${cssManager.bdTheme('#0071E3', '#64B2FF')};
+    --sio-tint-soft: ${cssManager.bdTheme('rgba(10,132,255,0.10)', 'rgba(10,132,255,0.18)')};
+    /* foreground on solid tint/channel fills — white in both themes */
+    --sio-on-accent: #ffffff;
+
+    /* channel palette (stable across themes) */
+    --sio-ch-mail: #0A84FF;
+    --sio-ch-chats: #30D158;
+    --sio-ch-calls: #FF9F0A;
+    --sio-ch-letters: #A2845E;
+
+    /* lane palette — split inbox */
+    --sio-lane-feed: #0A84FF;
+    --sio-lane-paper: #FF9F0A;
+    --sio-lane-people: #30D158;
+
+    /* bucket palette — unified feed triage */
+    --sio-bucket-now: #FF453A;
+    --sio-bucket-today: #FF9F0A;
+    --sio-bucket-later: #8E8E93;
+    --sio-bucket-done: #30D158;
+
+    /* system accents */
+    --sio-green: #30D158;
+    --sio-red: #FF453A;
+    --sio-yellow: #FFD60A;
+    --sio-orange: #FF9F0A;
+    --sio-blue: #0A84FF;
+
+    /* density — list row heights */
+    --sio-row-comfortable: 78px;
+    --sio-row-cozy: 62px;
+    --sio-row-compact: 48px;
+
+    /* radii ramp */
+    --sio-radius-xs: 4px;
+    --sio-radius-sm: 6px;
+    --sio-radius: 10px;
+    --sio-radius-md: 12px;
+    --sio-radius-lg: 14px;
+    --sio-radius-pill: 980px;
+
+    /* hairline convention */
+    --sio-hairline: 0.5px;
+
+    /* liquid glass */
+    --sio-glass-bg: ${cssManager.bdTheme('rgba(255,255,255,0.55)', 'rgba(40,40,42,0.6)')};
+    --sio-glass-border: ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(255,255,255,0.08)')};
+    --sio-toolbar-glass-bg: ${cssManager.bdTheme('rgba(255,255,255,0.78)', 'rgba(28,28,30,0.78)')};
+
+    /* SF font stacks */
+    --sio-font-sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
+    --sio-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+    --sio-font-rounded: -apple-system-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
+
+    font-family: var(--sio-font-sf);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([theme='dark']),
+  :host([dark]) {
+    --sio-bg: #000000;
+    --sio-bg-grouped: #000000;
+    --sio-surface: #1C1C1E;
+    --sio-surface-2: rgba(118,118,128,0.24);
+    --sio-label: #FFFFFF;
+    --sio-label-2: rgba(235,235,245,0.85);
+    --sio-label-3: rgba(235,235,245,0.60);
+    --sio-label-4: rgba(235,235,245,0.30);
+    --sio-separator: rgba(84,84,88,0.65);
+    --sio-separator-opaque: #38383A;
+    --sio-tint: #409CFF;
+    --sio-tint-hover: #64B2FF;
+    --sio-tint-soft: rgba(10,132,255,0.18);
+    --sio-glass-bg: rgba(40,40,42,0.6);
+    --sio-glass-border: rgba(255,255,255,0.08);
+    --sio-toolbar-glass-bg: rgba(28,28,30,0.78);
+  }
+`;
+
+export const sioElementStyles = [cssManager.defaultStyles, sioBaseStyles];
+
+// ---------------------------------------------------------------------------
+// glass recipes — interpolate inside a selector block:
+//   .toolbar { ${sioToolbarGlass} }
+// ---------------------------------------------------------------------------
+
+/** Free-floating liquid-glass surface (system.css `.glass`). */
+export const sioGlass = css`
+  background: var(--sio-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border: var(--sio-hairline) solid var(--sio-glass-border);
+`;
+
+/** Toolbar / header glass with hairline bottom edge (socialio.css `.sio-toolbar-glass`). */
+export const sioToolbarGlass = css`
+  background: var(--sio-toolbar-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border-bottom: var(--sio-hairline) solid var(--sio-separator);
+`;
+
+/** Pill-shaped glass (segmented controls, floating pills, tab bars). */
+export const sioPillGlass = css`
+  background: var(--sio-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border: var(--sio-hairline) solid var(--sio-glass-border);
+  border-radius: var(--sio-radius-pill);
+`;
+
+// ---------------------------------------------------------------------------
+// SF type ramp — iOS HIG text styles as reusable fragments
+// ---------------------------------------------------------------------------
+export const sioTypeLargeTitle = css`
+  font-size: 34px;
+  line-height: 41px;
+  font-weight: 700;
+  letter-spacing: 0.37px;
+`;
+
+export const sioTypeTitle1 = css`
+  font-size: 28px;
+  line-height: 34px;
+  font-weight: 700;
+  letter-spacing: 0.36px;
+`;
+
+export const sioTypeTitle2 = css`
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 700;
+  letter-spacing: 0.35px;
+`;
+
+export const sioTypeTitle3 = css`
+  font-size: 20px;
+  line-height: 25px;
+  font-weight: 600;
+  letter-spacing: 0.38px;
+`;
+
+export const sioTypeHeadline = css`
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 600;
+  letter-spacing: -0.43px;
+`;
+
+export const sioTypeBody = css`
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 400;
+  letter-spacing: -0.43px;
+`;
+
+export const sioTypeCallout = css`
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: -0.32px;
+`;
+
+export const sioTypeSubheadline = css`
+  font-size: 15px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: -0.24px;
+`;
+
+export const sioTypeFootnote = css`
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+`;
+
+export const sioTypeCaption1 = css`
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0;
+`;
+
+export const sioTypeCaption2 = css`
+  font-size: 11px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 0.07px;
+`;
+
+/** Monospaced type (message-ids, kbd hints, code). */
+export const sioTypeMono = css`
+  font-family: var(--sio-font-mono);
+`;
+
+/** Apply to any run of digits (counts, times, sizes) per the v7 spec. */
+export const sioTabularNums = css`
+  font-variant-numeric: tabular-nums;
+`;
+
+// ---------------------------------------------------------------------------
+// sioTheme — var() references for inline styles / style maps
+// ---------------------------------------------------------------------------
+export const sioTheme = {
+  bg: 'var(--sio-bg)',
+  bgGrouped: 'var(--sio-bg-grouped)',
+  surface: 'var(--sio-surface)',
+  surface2: 'var(--sio-surface-2)',
+  label: 'var(--sio-label)',
+  label2: 'var(--sio-label-2)',
+  label3: 'var(--sio-label-3)',
+  label4: 'var(--sio-label-4)',
+  separator: 'var(--sio-separator)',
+  separatorOpaque: 'var(--sio-separator-opaque)',
+  tint: 'var(--sio-tint)',
+  tintHover: 'var(--sio-tint-hover)',
+  tintSoft: 'var(--sio-tint-soft)',
+  chMail: 'var(--sio-ch-mail)',
+  chChats: 'var(--sio-ch-chats)',
+  chCalls: 'var(--sio-ch-calls)',
+  chLetters: 'var(--sio-ch-letters)',
+  laneFeed: 'var(--sio-lane-feed)',
+  lanePaper: 'var(--sio-lane-paper)',
+  lanePeople: 'var(--sio-lane-people)',
+  bucketNow: 'var(--sio-bucket-now)',
+  bucketToday: 'var(--sio-bucket-today)',
+  bucketLater: 'var(--sio-bucket-later)',
+  bucketDone: 'var(--sio-bucket-done)',
+  green: 'var(--sio-green)',
+  red: 'var(--sio-red)',
+  yellow: 'var(--sio-yellow)',
+  orange: 'var(--sio-orange)',
+  blue: 'var(--sio-blue)',
+  rowComfortable: 'var(--sio-row-comfortable)',
+  rowCozy: 'var(--sio-row-cozy)',
+  rowCompact: 'var(--sio-row-compact)',
+  radiusXs: 'var(--sio-radius-xs)',
+  radiusSm: 'var(--sio-radius-sm)',
+  radius: 'var(--sio-radius)',
+  radiusMd: 'var(--sio-radius-md)',
+  radiusLg: 'var(--sio-radius-lg)',
+  radiusPill: 'var(--sio-radius-pill)',
+  hairline: 'var(--sio-hairline)',
+  glassBg: 'var(--sio-glass-bg)',
+  glassBorder: 'var(--sio-glass-border)',
+  toolbarGlassBg: 'var(--sio-toolbar-glass-bg)',
+  fontSf: 'var(--sio-font-sf)',
+  fontMono: 'var(--sio-font-mono)',
+  fontRounded: 'var(--sio-font-rounded)',
+};

package/ts_web/pages/firstpage.ts

@@ -1,5 +1,24 @@
 import { html } from '@design.estate/dees-element';
 
+/**
+ * firstpage — the embeddable widget moment: a host page with the
+ * sio-fab launcher (unread pill) anchored bottom-right. Clicking the
+ * fab opens the sio-combox singleton it owns.
+ */
 export const firstpage = () => html`
-  <sio-fab></sio-fab>
+  <div
+    style="position: relative; min-height: 100vh; font-family: var(--sio-font-sf); background: var(--sio-bg);"
+  >
+    <div style="max-width: 560px; margin: 0 auto; padding: 64px 24px;">
+      <div style="font-size: 28px; font-weight: 700; letter-spacing: 0.36px; color: var(--sio-label);">
+        Orbit — customer page
+      </div>
+      <div style="margin-top: 10px; font-size: 15px; line-height: 20px; letter-spacing: -0.24px; color: var(--sio-label-3);">
+        A stand-in host website. The launcher bubble bottom-right is the
+        social.io widget entry point — click it (or press Ctrl+S) to open
+        the combox.
+      </div>
+    </div>
+    <sio-fab .unread=${2}></sio-fab>
+  </div>
 `;

package/ts_web/pages/mainpage.ts

@@ -1,45 +1,117 @@
 import { html } from '@design.estate/dees-element';
 
+/**
+ * mainpage — a composed v7 showcase: the unified feed, built from the
+ * catalog primitives (sio-segmented, sio-ai-card, sio-inset-list,
+ * sio-list-row, sio-avatar, sio-chip). Everything color-related comes
+ * from the --sio-* tokens; light/dark follows the theme manager.
+ */
 export const mainpage = () => html`
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-    }
-    .demo-container {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-    }
-    .demo-section {
-      background: white;
-      border-radius: 8px;
-      padding: 40px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-      max-width: 1200px;
-      width: 100%;
-    }
-    h2 {
-      margin-bottom: 20px;
-      font-family: sans-serif;
-    }
-    .component-demo {
-      margin: 20px 0;
-      position: relative;
-      min-height: 700px;
-    }
-  </style>
-  <div class="demo-container">
-    <div class="demo-section">
-      <h2>Social.io Catalog Components</h2>
-      
-      <div class="component-demo">
-        <h3>FAB with Combox Demo</h3>
-        <sio-fab .showCombox=${true}></sio-fab>
+  <div
+    style="min-height: 100vh; padding: 40px 0 64px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+  >
+    <div style="max-width: 440px; margin: 0 auto;">
+      <div
+        style="padding: 0 16px 14px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.37px; color: var(--sio-label);"
+      >
+        Feed
       </div>
+
+      <div style="padding: 0 16px 18px;">
+        <sio-segmented
+          .segments=${[
+            { id: 'priority', label: 'Priority' },
+            { id: 'time', label: 'Timeline' },
+            { id: 'person', label: 'By person' },
+          ]}
+          selected="priority"
+        ></sio-segmented>
+      </div>
+
+      <div style="padding: 0 16px 18px;">
+        <sio-ai-card label="Morning digest · 3 items">
+          <div>Maya needs your revenue split for the Q3 deck before Thursday's board call.</div>
+          <div>Finanzamt letter: objection deadline detected — Jul 24 (13 days left).</div>
+          <div>Jonas resolved the launch-copy thread; one pricing question stays open.</div>
+        </sio-ai-card>
+      </div>
+
+      <sio-inset-list header="Now">
+        <sio-list-row
+          unread
+          title="Maya Lindqvist"
+          time="09:41"
+          subject="Q3 numbers ahead of the board call"
+          preview="Attached the deck — the growth slide still needs your revenue split before Thursday. Can you take a pass today?"
+          density="comfortable"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="ML"
+            tint="#FF6B8A"
+            size="30"
+            channelBadge="mail"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="mail" icon="envelope">Mail</sio-chip>
+          <sio-chip slot="meta" variant="status" value="now">Now</sio-chip>
+        </sio-list-row>
+        <sio-list-row
+          unread
+          title="Deutsche Post"
+          time="08:55"
+          subject="Letter scanned: Finanzamt München"
+          preview="2 pages · OCR ready · deadline detected: Jul 24"
+          density="comfortable"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="DP"
+            tint="var(--sio-ch-letters)"
+            size="30"
+            channelBadge="letters"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="letters" icon="file-text">Letter</sio-chip>
+          <sio-chip slot="meta" variant="lane" value="paper">Paper trail</sio-chip>
+        </sio-list-row>
+      </sio-inset-list>
+
+      <div style="height: 22px;"></div>
+
+      <sio-inset-list header="Today">
+        <sio-list-row
+          title="Jonas Weber"
+          time="08:12"
+          subject="Launch copy — final review"
+          preview="I folded your edits in. One open question on the pricing line."
+          density="cozy"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="JW"
+            tint="var(--sio-ch-chats)"
+            size="30"
+            presence="online"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="chats" icon="message-circle">Chat</sio-chip>
+          <sio-chip slot="meta" variant="status" value="today">Today</sio-chip>
+        </sio-list-row>
+        <sio-list-row
+          title="Ana Ferreira"
+          time="Tue"
+          subject="Missed call · voicemail (0:42)"
+          density="cozy"
+        >
+          <sio-avatar
+            slot="avatar"
+            initials="AF"
+            tint="var(--sio-ch-calls)"
+            size="30"
+            channelBadge="calls"
+          ></sio-avatar>
+          <sio-chip slot="meta" variant="channel" value="calls" icon="phone">Call</sio-chip>
+          <sio-chip slot="meta" variant="status" value="done">Done</sio-chip>
+        </sio-list-row>
+      </sio-inset-list>
     </div>
   </div>
-`;
+`;