@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-message-input.ts

@@ -1,19 +1,16 @@
 import {
   DeesElement,
-  property,
   html,
+  property,
+  state,
   customElement,
-  type TemplateResult,
-  cssManager,
   css,
-  unsafeCSS,
-  state,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions } from './00tokens.js';
-import { fontFamilies, typography } from './00fonts.js';
+import { sioElementStyles } from './tokens.js';
+import { SioComposer, type TSioComposerVariant, type TSioComposerAccent } from './sio-composer.js';
+SioComposer;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,259 +18,183 @@ declare global {
   }
 }
 
+/**
+ * sio-message-input — the widget's composer row, a thin shell around
+ * sio-composer (v7 SocialIOWidget.jsx composer).
+ *
+ * Adds the widget-level concerns on top of the composer primitive:
+ * a hidden file input behind the composer's attach button, the
+ * email-capture variant for the away state, and the keyboard-visibility
+ * focus events the combox uses on phablet.
+ *
+ * Events (bubbles, composed):
+ *   send-message   { text, attachments: File[] }
+ *   files-selected { files: File[] }
+ *   input-focus / input-blur — phablet keyboard handling
+ */
 @customElement('sio-message-input')
 export class SioMessageInput extends DeesElement {
   public static demo = () => html`
-    <sio-message-input style="width: 600px;"></sio-message-input>
+    <div
+      style="display: grid; gap: 18px; max-width: 380px; padding: 24px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Widget composer
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-message-input placeholder="Write a message…"></sio-message-input>
+      </div>
+
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Email capture — team is away
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-message-input variant="email"></sio-message-input>
+      </div>
+    </div>
   `;
 
+  /** field placeholder; message variant defaults to "Write a message…", email to "you@email.com" */
   @property({ type: String })
-  public accessor placeholder: string = 'Type a message...';
+  public accessor placeholder = '';
 
-  @property({ type: Boolean })
-  public accessor disabled: boolean = false;
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
 
-  @state()
-  private accessor messageText: string = '';
+  /** 'message' (default) or 'email' — the away-state email capture */
+  @property({ type: String })
+  public accessor variant: TSioComposerVariant = 'message';
+
+  /** send-button accent, forwarded to sio-composer */
+  @property({ type: String })
+  public accessor accent: TSioComposerAccent = 'tint';
+
+  /** show the composer's attach "+" button (opens the file picker) */
+  @property({ type: Boolean })
+  public accessor attach = false;
 
   @state()
   private accessor pendingAttachments: File[] = [];
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         display: block;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
-      }
-
-      .input-container {
-        display: flex;
-        align-items: flex-end;
-        background: ${bdTheme('secondary')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: 24px;
-        padding: 2px;
-        transition: all 200ms ease;
-        overflow: hidden;
-      }
-
-      .input-container:focus-within {
-        border-color: ${bdTheme('ring')};
-        background: ${bdTheme('background')};
-      }
-
-      .message-input {
-        flex: 1;
-        min-height: 44px;
-        max-height: 120px;
-        padding: 12px 16px;
-        background: transparent;
-        border: none;
-        font-size: 15px;
-        color: ${bdTheme('foreground')};
-        outline: none;
-        resize: none;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
-        line-height: 1.5;
-      }
-
-      .message-input::placeholder {
-        color: ${bdTheme('mutedForeground')};
-      }
-
-      .action-buttons {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        padding-right: 2px;
-      }
-
-      .action-button {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        border: none;
-        background: transparent;
-        color: ${bdTheme('mutedForeground')};
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 120ms ease;
-        position: relative;
-        outline: none;
-      }
-
-      .action-button:hover {
-        color: ${bdTheme('foreground')};
-        background: ${bdTheme('hsl(0 0% 0% / 0.05)', 'hsl(0 0% 100% / 0.05)')};
-      }
-
-      .action-button:active {
-        transform: scale(0.95);
-      }
-
-      .action-button.attachment {
-        opacity: 0.7;
+        font-family: var(--sio-font-sf);
       }
 
-      .action-button.attachment:hover {
-        opacity: 1;
-      }
-
-      .action-button.send {
-        background: ${bdTheme('primary')};
-        color: white;
-        margin-left: 2px;
-      }
-
-      .action-button.send:hover {
-        background: ${bdTheme('hsl(221 83% 49%)', 'hsl(217 91% 65%)')};
-      }
-
-      .action-button.send:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-
-      .action-button.send:disabled:hover {
-        background: ${bdTheme('primary')};
-        transform: none;
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.5;
       }
 
       .file-input {
         display: none;
       }
-
-      /* Icon styles */
-      sio-icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .action-button.send sio-icon {
-        width: 18px;
-        height: 18px;
-      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="input-container">
-        <textarea
-          class="message-input"
-          placeholder="${this.placeholder}"
-          .value=${this.messageText}
-          @input=${this.handleInput}
-          @keydown=${this.handleKeyDown}
-          ?disabled=${this.disabled}
-          rows="1"
-        ></textarea>
-        
-        <div class="action-buttons">
-          <input
-            type="file"
-            class="file-input"
-            id="fileInput"
-            multiple
-            accept="image/*,.pdf,.doc,.docx,.txt"
-            @change=${this.handleFileSelect}
-          />
-          <button 
-            class="action-button attachment"
-            @click=${this.openFileSelector}
-            ?disabled=${this.disabled}
-          >
-            <sio-icon icon="paperclip"></sio-icon>
-          </button>
-          <button
-            class="action-button send"
-            ?disabled=${!this.messageText.trim() || this.disabled}
-            @click=${this.sendMessage}
-          >
-            <sio-icon icon="send"></sio-icon>
-          </button>
-        </div>
-      </div>
+      <sio-composer
+        variant=${this.variant}
+        accent=${this.accent}
+        ?attach=${this.attach}
+        ?auto-expand=${this.variant === 'message'}
+        placeholder=${this.variant === 'message' ? this.placeholder || 'Write a message…' : this.placeholder}
+        @composer-send=${this.handleComposerSend}
+        @composer-attach=${this.openFileSelector}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
+      ></sio-composer>
+      <input
+        type="file"
+        class="file-input"
+        id="fileInput"
+        multiple
+        accept="image/*,.pdf,.doc,.docx,.txt"
+        @change=${this.handleFileSelect}
+      />
     `;
   }
 
-  private handleInput(event: Event) {
-    const textarea = event.target as HTMLTextAreaElement;
-    this.messageText = textarea.value;
-    
-    // Auto-resize textarea
-    textarea.style.height = 'auto';
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      this.sendMessage();
-    }
-  }
-
-  private sendMessage() {
-    if (!this.messageText.trim() && this.pendingAttachments.length === 0) {
-      return;
-    }
-
-    this.dispatchEvent(new CustomEvent('send-message', {
-      detail: {
-        text: this.messageText,
-        attachments: this.pendingAttachments
-      },
-      bubbles: true,
-      composed: true
-    }));
-
-    // Clear input
-    this.messageText = '';
+  private handleComposerSend = (event: CustomEvent<{ text: string }>) => {
+    // re-dispatch under the widget's send-message contract
+    event.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent('send-message', {
+        detail: {
+          text: event.detail.text,
+          attachments: this.pendingAttachments,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
     this.pendingAttachments = [];
-    
-    // Reset textarea height
-    const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
-    if (textarea) {
-      textarea.style.height = 'auto';
-    }
-  }
-
-  private openFileSelector() {
+  };
+
+  private handleFocus = () => {
+    this.dispatchEvent(
+      new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private handleBlur = () => {
+    this.dispatchEvent(
+      new CustomEvent('input-blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private openFileSelector = (event: Event) => {
+    event.stopPropagation();
     const fileInput = this.shadowRoot?.querySelector('#fileInput') as HTMLInputElement;
-    if (fileInput) {
-      fileInput.click();
-    }
-  }
+    fileInput?.click();
+  };
 
-  private handleFileSelect(event: Event) {
+  private handleFileSelect = (event: Event) => {
     const input = event.target as HTMLInputElement;
     const files = Array.from(input.files || []);
-    
+    if (files.length === 0) {
+      return;
+    }
+
     this.pendingAttachments = [...this.pendingAttachments, ...files];
-    
-    this.dispatchEvent(new CustomEvent('files-selected', {
-      detail: { files },
-      bubbles: true,
-      composed: true
-    }));
-    
-    input.value = ''; // Clear input for re-selection
-  }
+
+    this.dispatchEvent(
+      new CustomEvent('files-selected', {
+        detail: { files },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    input.value = ''; // allow re-selection of the same file
+  };
 
   public focus() {
-    const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
-    textarea?.focus();
+    const field = this.shadowRoot
+      ?.querySelector('sio-composer')
+      ?.shadowRoot?.querySelector('.field') as HTMLElement | null;
+    field?.focus();
   }
 
   public clear() {
-    this.messageText = '';
-    this.pendingAttachments = [];
-    const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
-    if (textarea) {
-      textarea.style.height = 'auto';
+    const composer = this.shadowRoot?.querySelector('sio-composer');
+    if (composer) {
+      composer.value = '';
     }
+    this.pendingAttachments = [];
   }
-}
+}

package/ts_web/elements/sio-paper-thumb.ts

@@ -0,0 +1,244 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+
+export type TSioPaperDirection = 'in' | 'out';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-paper-thumb': SioPaperThumb;
+  }
+}
+
+/**
+ * sio-paper-thumb — v7 physical-letter thumbnail (48×62, compact 38×50).
+ *
+ * Incoming letters render as cream scanned paper with a torn top edge;
+ * outgoing letters as lilac composed paper with a red-striped stamp square.
+ * An 18px direction badge (green ↓ in / letters-brown ↑ out) overhangs the
+ * bottom-right corner with a 2px surface ring.
+ */
+@customElement('sio-paper-thumb')
+export class SioPaperThumb extends DeesElement {
+  public static demo = () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 20px; max-width: 420px; padding: 20px; background: var(--sio-bg); border-radius: 18px; font-family: var(--sio-font-sf);"
+    >
+      <div
+        style="background: var(--sio-surface); border: 0.5px solid var(--sio-separator); border-radius: 18px; overflow: hidden;"
+      >
+        <div style="display: flex; gap: 12px; padding: 14px; border-bottom: 0.5px solid var(--sio-separator);">
+          <sio-paper-thumb direction="in"></sio-paper-thumb>
+          <div style="flex: 1; min-width: 0;">
+            <div style="display: flex; align-items: baseline; gap: 6px;">
+              <span
+                style="flex: 1; font-size: 15px; font-weight: 600; color: var(--sio-label); letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+                >Finanzamt Berlin-Mitte</span
+              >
+              <span style="font-size: 12.5px; color: var(--sio-label-3); font-variant-numeric: tabular-nums;">Yesterday</span>
+            </div>
+            <div
+              style="font-size: 14px; font-weight: 500; color: var(--sio-label); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+            >
+              Steuerbescheid 2024 — Festsetzung
+            </div>
+            <div style="font-size: 11px; color: var(--sio-label-3); margin-top: 6px;">Scanned · 3 pp</div>
+          </div>
+        </div>
+        <div style="display: flex; gap: 12px; padding: 14px;">
+          <sio-paper-thumb direction="out"></sio-paper-thumb>
+          <div style="flex: 1; min-width: 0;">
+            <div style="display: flex; align-items: baseline; gap: 6px;">
+              <span
+                style="flex: 1; font-size: 15px; font-weight: 500; color: var(--sio-label); letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+                >To: Deutsche Rentenversicherung Bund</span
+              >
+              <span style="font-size: 12.5px; color: var(--sio-label-3); font-variant-numeric: tabular-nums;">Today</span>
+            </div>
+            <div
+              style="font-size: 14px; color: var(--sio-label-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+            >
+              Widerspruch — Bescheid vom 14.03.2026
+            </div>
+            <div style="font-size: 11px; color: var(--sio-label-3); margin-top: 6px;">Mailed · Einschreiben · 2 pp</div>
+          </div>
+        </div>
+      </div>
+      <div style="display: flex; gap: 20px; align-items: flex-end;">
+        <div style="text-align: center;">
+          <sio-paper-thumb direction="in"></sio-paper-thumb>
+          <div style="font-size: 11px; color: var(--sio-label-3); margin-top: 8px;">in</div>
+        </div>
+        <div style="text-align: center;">
+          <sio-paper-thumb direction="out"></sio-paper-thumb>
+          <div style="font-size: 11px; color: var(--sio-label-3); margin-top: 8px;">out</div>
+        </div>
+        <div style="text-align: center;">
+          <sio-paper-thumb direction="in" compact></sio-paper-thumb>
+          <div style="font-size: 11px; color: var(--sio-label-3); margin-top: 8px;">in · compact</div>
+        </div>
+        <div style="text-align: center;">
+          <sio-paper-thumb direction="out" compact></sio-paper-thumb>
+          <div style="font-size: 11px; color: var(--sio-label-3); margin-top: 8px;">out · compact</div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  /** 'in' = physically arrived + scanned (cream, torn edge); 'out' = composed + mailed (lilac, stamp). */
+  @property({ type: String, reflect: true })
+  public accessor direction: TSioPaperDirection = 'in';
+
+  /** 38×50 instead of 48×62, for cozy/compact list densities. */
+  @property({ type: Boolean, reflect: true })
+  public accessor compact = false;
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: inline-block;
+        width: 48px;
+        height: 62px;
+        flex-shrink: 0;
+
+        /*
+         * Letter-paper artwork — theme-stable content colors transcribed from
+         * the v7 prototype. Scanned paper stays cream and stamps stay red in
+         * dark mode; these are illustration constants, not UI theme tokens.
+         */
+        --sio-paper-cream-top: #faf8f3;
+        --sio-paper-cream-bottom: #ede8de;
+        --sio-paper-lilac-top: #efebff;
+        --sio-paper-lilac-bottom: #d6ceff;
+        --sio-paper-ink-strong: rgba(0, 0, 0, 0.5);
+        --sio-paper-ink-faint: rgba(0, 0, 0, 0.18);
+        --sio-paper-edge: rgba(0, 0, 0, 0.12);
+        --sio-paper-stamp-a: #c94a3a;
+        --sio-paper-stamp-b: #e9664f;
+        --sio-paper-stamp-edge: #8a2e22;
+        --sio-paper-badge-fg: #ffffff;
+      }
+      :host([compact]) {
+        width: 38px;
+        height: 50px;
+      }
+
+      .thumb {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      .paper {
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        overflow: hidden;
+        background: linear-gradient(180deg, var(--sio-paper-cream-top) 0%, var(--sio-paper-cream-bottom) 100%);
+        box-shadow: inset 0 0 0 0.5px var(--sio-paper-edge);
+        /* torn top edge — the letter was physically opened */
+        clip-path: polygon(
+          0 4%, 5% 0, 13% 5%, 21% 1%, 29% 6%, 37% 2%, 45% 6%, 53% 1%,
+          61% 5%, 69% 2%, 77% 6%, 85% 1%, 93% 5%, 100% 3%, 100% 100%, 0 100%
+        );
+      }
+      :host([direction='out']) .paper {
+        background: linear-gradient(180deg, var(--sio-paper-lilac-top) 0%, var(--sio-paper-lilac-bottom) 100%);
+        clip-path: none;
+      }
+
+      .addressBar {
+        position: absolute;
+        top: 7px;
+        left: 6px;
+        right: 14px;
+        height: 2px;
+        background: var(--sio-paper-ink-strong);
+      }
+      :host([compact]) .addressBar {
+        top: 5px;
+        left: 5px;
+        right: 11px;
+      }
+
+      .line {
+        position: absolute;
+        left: 6px;
+        right: 6px;
+        height: 1px;
+        background: var(--sio-paper-ink-faint);
+      }
+      :host([compact]) .line {
+        left: 5px;
+        right: 5px;
+      }
+
+      .stamp {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 12px;
+        height: 9px;
+        border-radius: 1px;
+        background: repeating-linear-gradient(
+          45deg,
+          var(--sio-paper-stamp-a) 0 2px,
+          var(--sio-paper-stamp-b) 2px 4px
+        );
+        border: 0.5px solid var(--sio-paper-stamp-edge);
+      }
+      :host([compact]) .stamp {
+        width: 10px;
+        height: 7px;
+      }
+
+      .badge {
+        position: absolute;
+        bottom: -4px;
+        right: -4px;
+        width: 18px;
+        height: 18px;
+        border-radius: 9px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 1;
+        color: var(--sio-paper-badge-fg);
+        background: var(--sio-green);
+        box-shadow: 0 0 0 2px var(--sio-surface);
+      }
+      :host([direction='out']) .badge {
+        background: var(--sio-ch-letters);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const lineCount = this.compact ? 5 : 6;
+    const lineTopStart = this.compact ? 12 : 15;
+    const lineGap = this.compact ? 5.5 : 6.5;
+    const lineTemplates: TemplateResult[] = [];
+    for (let k = 0; k < lineCount; k++) {
+      lineTemplates.push(html`<div class="line" style="top: ${lineTopStart + k * lineGap}px;"></div>`);
+    }
+    return html`
+      <div class="thumb" part="thumb">
+        <div class="paper">
+          <div class="addressBar"></div>
+          ${lineTemplates}
+          ${this.direction === 'out' ? html`<div class="stamp"></div>` : html``}
+        </div>
+        <div class="badge" aria-hidden="true">${this.direction === 'in' ? '↓' : '↑'}</div>
+      </div>
+    `;
+  }
+}