@zooid/web 0.6.0 → 0.8.0

package/src/app.css

@@ -1,178 +0,0 @@
-@import 'tailwindcss';
-@import '@zooid/ui/styles/reef.css';
-@source '../../ui/src';
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --color-background: var(--reef-bg);
-  --color-foreground: var(--reef-fg);
-  --color-card: var(--reef-gray-600);
-  --color-card-foreground: var(--reef-fg);
-  --color-popover: var(--reef-gray-600);
-  --color-popover-foreground: var(--reef-fg);
-  --color-primary: var(--reef-blue);
-  --color-primary-foreground: var(--reef-bg);
-  --color-secondary: var(--reef-gray-500);
-  --color-secondary-foreground: var(--reef-fg);
-  --color-muted: var(--reef-gray-500);
-  --color-muted-foreground: var(--reef-gray-300);
-  --color-accent: var(--reef-gray-500);
-  --color-accent-foreground: var(--reef-fg);
-  --color-destructive: var(--reef-red);
-  --color-destructive-foreground: var(--reef-fg);
-  --color-border: var(--reef-gray-500);
-  --color-input: var(--reef-gray-500);
-  --color-ring: var(--reef-blue);
-
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-}
-
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--reef-font-mono);
-}
-
-.overflow-wrap-anywhere {
-  overflow-wrap: anywhere;
-}
-
-.prose-inline {
-  display: inline;
-}
-.prose-inline > :first-child {
-  display: inline;
-}
-.prose-inline p {
-  display: inline;
-}
-.prose-inline ul,
-.prose-inline ol {
-  margin: 0.25rem 0;
-  padding-left: 1.25rem;
-}
-.prose-inline li {
-  margin: 0.125rem 0;
-}
-.prose-inline strong {
-  font-weight: 700;
-  color: var(--color-foreground);
-}
-.prose-inline em {
-  font-style: italic;
-}
-.prose-inline a {
-  color: var(--color-primary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.prose-inline a:hover {
-  opacity: 0.8;
-}
-.prose-inline code {
-  background: var(--color-secondary);
-  border-radius: 0.25rem;
-  padding: 0.1rem 0.3rem;
-  font-size: 0.85em;
-}
-.prose-inline pre {
-  background: var(--color-secondary);
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  margin: 0.25rem 0;
-  overflow-x: auto;
-}
-.prose-inline blockquote {
-  border-left: 2px solid var(--color-border);
-  padding-left: 0.75rem;
-  margin: 0.25rem 0;
-  opacity: 0.8;
-}
-.prose-inline h1,
-.prose-inline h2,
-.prose-inline h3,
-.prose-inline h4,
-.prose-inline h5,
-.prose-inline h6 {
-  font-weight: 700;
-  color: var(--color-foreground);
-  margin: 0.25rem 0;
-}
-
-/* Block-level markdown for message bodies */
-.prose-block p {
-  margin: 0.375rem 0;
-}
-.prose-block p:first-child {
-  margin-top: 0;
-}
-.prose-block p:last-child {
-  margin-bottom: 0;
-}
-.prose-block strong {
-  font-weight: 700;
-  color: var(--color-foreground);
-}
-.prose-block em {
-  font-style: italic;
-}
-.prose-block a {
-  color: var(--color-primary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.prose-block a:hover {
-  opacity: 0.8;
-}
-.prose-block code {
-  background: var(--color-secondary);
-  border-radius: 0.25rem;
-  padding: 0.1rem 0.3rem;
-  font-size: 0.85em;
-}
-.prose-block pre {
-  background: var(--color-secondary);
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  margin: 0.375rem 0;
-  overflow-x: auto;
-}
-.prose-block pre code {
-  background: none;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-}
-.prose-block ul,
-.prose-block ol {
-  margin: 0.375rem 0;
-  padding-left: 1.25rem;
-}
-.prose-block li {
-  margin: 0.125rem 0;
-}
-.prose-block blockquote {
-  border-left: 2px solid var(--color-border);
-  padding-left: 0.75rem;
-  margin: 0.375rem 0;
-  opacity: 0.8;
-}
-.prose-block h1,
-.prose-block h2,
-.prose-block h3,
-.prose-block h4,
-.prose-block h5,
-.prose-block h6 {
-  font-weight: 700;
-  color: var(--color-foreground);
-  margin: 0.5rem 0 0.25rem;
-}
-.prose-block h1:first-child,
-.prose-block h2:first-child,
-.prose-block h3:first-child {
-  margin-top: 0;
-}

package/src/lib/api.ts

@@ -1,78 +0,0 @@
-import { ZooidClient } from '@zooid/sdk';
-
-export type {
-  ChannelInfo,
-  ServerIdentity,
-  TrustedKey,
-  TokenClaims,
-  ZooidEvent,
-  PollResult,
-} from '@zooid/sdk';
-
-export interface ServerMeta {
-  server_name: string;
-  server_description: string | null;
-  poll_interval: number;
-  delivery: string[];
-  auth_url?: string;
-}
-
-const defaultMeta: ServerMeta = {
-  server_name: 'Zooid',
-  server_description: null,
-  poll_interval: 5,
-  delivery: ['poll'],
-};
-
-export async function fetchServerMeta(baseUrl: string): Promise<ServerMeta> {
-  try {
-    const res = await fetch(`${baseUrl}/.well-known/zooid.json`);
-    if (!res.ok) return defaultMeta;
-    const data = await res.json();
-    return {
-      server_name: data.server_name ?? 'Zooid',
-      server_description: data.server_description ?? null,
-      poll_interval: data.poll_interval ?? 5,
-      delivery: Array.isArray(data.delivery) ? data.delivery : ['poll'],
-      auth_url: data.auth_url ?? undefined,
-    };
-  } catch {
-    return defaultMeta;
-  }
-}
-
-/** Create a ZooidClient bound to the current origin. */
-export function createClient(token?: string): ZooidClient {
-  return new ZooidClient({
-    server: window.location.origin,
-    token,
-  });
-}
-
-// BFF auth endpoints (not in SDK — they use cookies/credentials)
-
-export async function refreshAuth(
-  baseUrl: string,
-): Promise<{ token: string } | null> {
-  try {
-    const res = await fetch(`${baseUrl}/api/v1/auth/refresh`, {
-      method: 'POST',
-      credentials: 'include',
-    });
-    if (!res.ok) return null;
-    return res.json();
-  } catch {
-    return null;
-  }
-}
-
-export async function authLogout(baseUrl: string): Promise<void> {
-  try {
-    await fetch(`${baseUrl}/api/v1/auth/logout`, {
-      method: 'POST',
-      credentials: 'include',
-    });
-  } catch {
-    // Best effort
-  }
-}

package/src/lib/components/admin-dropdown.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  import type { Component } from 'svelte';
-
-  interface SettingsPageExtension {
-    slug: string;
-    label: string;
-    icon?: Component;
-  }
-
-  let {
-    serverName,
-    onServerConfig,
-    onKeysAndTokens,
-    extensionSettingsPages = [],
-    onExtensionSettings,
-  }: {
-    serverName: string;
-    onServerConfig: () => void;
-    onKeysAndTokens: () => void;
-    extensionSettingsPages?: SettingsPageExtension[];
-    onExtensionSettings?: (slug: string) => void;
-  } = $props();
-
-  let open = $state(false);
-
-  function toggle() {
-    open = !open;
-  }
-
-  function select(fn: () => void) {
-    open = false;
-    fn();
-  }
-
-  function handleBackdrop() {
-    open = false;
-  }
-</script>
-
-<div class="relative">
-  <button
-    onclick={toggle}
-    class="flex items-center gap-1.5 font-semibold text-sm truncate hover:text-primary transition-colors"
-    title="Server settings"
-  >
-    <span class="truncate">{serverName}</span>
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="m6 9 6 6 6-6"/></svg>
-  </button>
-
-  {#if open}
-    <!-- Backdrop -->
-    <button
-      type="button"
-      class="fixed inset-0 z-40"
-      onclick={handleBackdrop}
-      aria-label="Close menu"
-      tabindex="-1"
-    ></button>
-
-    <!-- Dropdown -->
-    <div class="absolute top-full left-0 mt-1 w-48 bg-card border border-border rounded-md shadow-lg z-50 py-1">
-      <button
-        class="w-full text-left px-3 py-1.5 text-xs hover:bg-secondary transition-colors flex items-center gap-2"
-        onclick={() => select(onServerConfig)}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
-        Server config
-      </button>
-      <button
-        class="w-full text-left px-3 py-1.5 text-xs hover:bg-secondary transition-colors flex items-center gap-2"
-        onclick={() => select(onKeysAndTokens)}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
-        Keys & tokens
-      </button>
-      {#each extensionSettingsPages as page}
-        <button
-          class="w-full text-left px-3 py-1.5 text-xs hover:bg-secondary transition-colors flex items-center gap-2"
-          onclick={() => { if (onExtensionSettings) select(() => onExtensionSettings(page.slug)); }}
-        >
-          {#if page.icon}
-            <svelte:component this={page.icon} size={14} />
-          {/if}
-          {page.label}
-        </button>
-      {/each}
-    </div>
-  {/if}
-</div>

package/src/lib/components/auth-modal.svelte

@@ -1,114 +0,0 @@
-<script lang="ts">
-  import { Button } from '@ui/components/button/index';
-  import { Input } from '@ui/components/input/index';
-
-  import type { TokenClaims } from '../api';
-
-  let {
-    open,
-    currentToken,
-    claims,
-    onSave,
-    onLogout,
-    onClose,
-  }: {
-    open: boolean;
-    currentToken: string | null;
-    claims: TokenClaims | null;
-    onSave: (token: string) => Promise<boolean>;
-    onLogout: () => void;
-    onClose: () => void;
-  } = $props();
-
-  let tokenInput = $state('');
-  let error = $state('');
-  let loading = $state(false);
-
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    const trimmed = tokenInput.trim();
-    if (!trimmed || loading) return;
-
-    error = '';
-    loading = true;
-    try {
-      const ok = await onSave(trimmed);
-      if (!ok) {
-        error = 'Invalid token. Check that it is correct and not expired.';
-      } else {
-        tokenInput = '';
-      }
-    } catch {
-      error = 'Failed to validate token. Is the server reachable?';
-    } finally {
-      loading = false;
-    }
-  }
-
-  function handleBackdrop(e: MouseEvent) {
-    if (e.target === e.currentTarget) onClose();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') onClose();
-  }
-
-  // Clear error when modal reopens or input changes
-  $effect(() => {
-    if (open) error = '';
-  });
-</script>
-
-{#if open}
-  <div
-    class="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
-    role="dialog"
-    aria-modal="true"
-    aria-label="Authentication"
-    tabindex="-1"
-    onclick={handleBackdrop}
-    onkeydown={handleKeydown}
-  >
-    <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-sm p-6">
-      <h2 class="font-semibold text-sm mb-1">Authentication</h2>
-      <p class="text-xs text-muted-foreground mb-4">
-        Paste an admin or publish token to unlock channels and publishing.
-      </p>
-
-      {#if currentToken && claims}
-        <div class="bg-secondary rounded-md px-3 py-2 mb-4">
-          <div class="text-sm font-medium text-foreground">
-            Signed in as {claims.name || claims.sub || 'Unknown'}
-          </div>
-          <div class="text-xs text-muted-foreground mt-1 font-mono">
-            {claims.scopes.join(', ')}
-          </div>
-        </div>
-        <div class="flex gap-2">
-          <Button variant="destructive" size="sm" class="flex-1" onclick={onLogout}>Sign out</Button>
-          <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Close</Button>
-        </div>
-      {:else}
-        <form onsubmit={handleSubmit} class="flex flex-col gap-3">
-          <Input
-            type="text"
-            placeholder="eyJhbGci..."
-            bind:value={tokenInput}
-            oninput={() => error = ''}
-            autocomplete="off"
-            spellcheck="false"
-          />
-          {#if error}
-            <p class="text-xs text-destructive">{error}</p>
-          {/if}
-          <div class="flex gap-2">
-            <Button type="submit" size="sm" class="flex-1" disabled={!tokenInput.trim() || loading}>
-              {loading ? 'Verifying...' : 'Sign in'}
-            </Button>
-            <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Cancel</Button>
-          </div>
-        </form>
-      {/if}
-    </div>
-  </div>
-{/if}

package/src/lib/components/avatar.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { createAvatar } from '@dicebear/core';
-  import { glass } from '@dicebear/collection';
-  import type { ZooidEvent } from '../api';
-
-  let { event, size = 24 }: { event: ZooidEvent; size?: number } = $props();
-
-  let seed = $derived(avatarSeed(event));
-  let svg = $derived(createAvatar(glass, { seed, size }).toString());
-
-  function avatarSeed(e: ZooidEvent): string {
-    const id = e.publisher_id;
-    const name = e.publisher_name;
-
-    if (!id) return name ?? 'anonymous';
-
-    const colonIdx = id.indexOf(':');
-    const issuer = colonIdx > 0 ? id.slice(0, colonIdx) : id;
-    const sub = colonIdx > 0 ? id.slice(colonIdx + 1) : null;
-
-    if (sub) return `${sub}+${issuer}`;
-    if (name) return `${name}+${issuer}`;
-    return issuer;
-  }
-</script>
-
-<span class="inline-flex shrink-0 rounded-full overflow-hidden" style="width: {size}px; height: {size}px">
-  {@html svg}
-</span>

package/src/lib/components/channel-header.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import { Badge } from '@ui/components/badge/index';
-  import { Separator } from '@ui/components/separator/index';
-  import type { ChannelInfo } from '../api';
-  import { formatRelative } from '../time';
-
-  let {
-    channel,
-    viewMode = $bindable('pretty'),
-    isAdmin = false,
-    onMenuClick,
-    onEditChannel,
-  }: {
-    channel: ChannelInfo;
-    viewMode?: 'pretty' | 'raw';
-    isAdmin?: boolean;
-    onMenuClick?: () => void;
-    onEditChannel?: () => void;
-  } = $props();
-</script>
-
-<div class="flex items-center gap-3 px-4 h-12 border-b border-border shrink-0">
-  {#if onMenuClick}
-    <button
-      onclick={onMenuClick}
-      class="p-1 rounded hover:bg-secondary transition-colors md:hidden shrink-0"
-      aria-label="Open channels"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
-    </button>
-  {/if}
-
-  <span class="text-muted-foreground/60">#</span>
-  <span class="font-semibold text-sm">{channel.name}</span>
-
-  {#if !channel.is_public}
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground/40"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-  {/if}
-
-  {#if channel.description}
-    <Separator orientation="vertical" class="h-4" />
-    <span class="text-xs text-muted-foreground truncate hidden sm:block">{channel.description}</span>
-  {/if}
-
-  <div class="ml-auto flex items-center gap-2">
-    {#if isAdmin && onEditChannel}
-      <button
-        onclick={onEditChannel}
-        class="p-1 rounded hover:bg-secondary transition-colors text-muted-foreground hover:text-foreground"
-        title="Edit channel"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
-      </button>
-    {/if}
-    <span class="text-[10px] text-muted-foreground hidden sm:block">
-      {channel.event_count} events
-    </span>
-    <div class="flex items-center bg-muted/50 rounded-md p-0.5 text-[11px]">
-      <button
-        class="px-2 py-0.5 rounded transition-colors {viewMode === 'pretty' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
-        onclick={() => viewMode = 'pretty'}
-      >
-        Pretty
-      </button>
-      <button
-        class="px-2 py-0.5 rounded transition-colors font-mono {viewMode === 'raw' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
-        onclick={() => viewMode = 'raw'}
-      >
-        {'{ }'}
-      </button>
-    </div>
-  </div>
-</div>