@zooid/web 0.6.0 → 0.8.0

package/src/lib/components/message-bar.svelte

@@ -1,290 +0,0 @@
-<script lang="ts">
-  import type { Content, JSONContent } from 'svelte-jsoneditor';
-  import type { ChannelInfo } from '../api';
-
-  let {
-    channel,
-    replyTo = $bindable(null),
-    onPublish,
-  }: {
-    channel: ChannelInfo;
-    replyTo?: string | null;
-    onPublish: (payload: { type?: string; reply_to?: string; data: unknown }) => void;
-  } = $props();
-
-  let textInput = $state('');
-  let editorContent = $state<Content>({ json: {} });
-  let selectedType = $state<string>('message');
-  let customType = $state('');
-  let sending = $state(false);
-  let typeDropdownOpen = $state(false);
-  let JsonEditor = $state<typeof import('./json-editor.svelte').default | null>(null);
-
-  // Lazy-load the JSON editor component
-  async function loadEditor() {
-    if (!JsonEditor) {
-      const mod = await import('./json-editor.svelte');
-      JsonEditor = mod.default;
-    }
-  }
-
-  // Extract types from channel config
-  let eventTypes = $derived.by(() => {
-    const config = channel.config as { strict?: boolean; types?: Record<string, { schema?: Record<string, unknown> }> } | null;
-    if (!config?.types) return [];
-    const types = Object.keys(config.types);
-    // Non-strict channels: ensure "message" is available for replies
-    if (!config.strict && types.length > 0 && !types.includes('message')) {
-      return [...types, 'message'];
-    }
-    return types;
-  });
-
-  // The active type name (from dropdown or custom input)
-  let activeType = $derived(eventTypes.length > 0 ? selectedType : (customType.trim() || 'message'));
-
-  // Get schema for selected type
-  let selectedSchema = $derived.by(() => {
-    if (!activeType) return null;
-    const config = channel.config as { types?: Record<string, { schema?: Record<string, unknown> }> } | null;
-    return config?.types?.[activeType]?.schema ?? null;
-  });
-
-  // Check if we should use the JSON editor
-  let useJsonEditor = $derived.by(() => {
-    if (!selectedSchema) return false;
-    const props = (selectedSchema as { properties?: Record<string, { type?: string }> }).properties;
-    if (!props) return false;
-    const keys = Object.keys(props);
-    // Single-key string schema = free text
-    if (keys.length === 1 && props[keys[0]]?.type === 'string') return false;
-    return true;
-  });
-
-  let freeTextKey = $derived.by(() => {
-    if (useJsonEditor || !selectedSchema) return null;
-    const props = (selectedSchema as { properties?: Record<string, unknown> }).properties;
-    return props ? Object.keys(props)[0] : null;
-  });
-
-  // Generate a template object from schema properties
-  function templateFromSchema(schema: Record<string, unknown> | null): Record<string, unknown> {
-    if (!schema) return {};
-    const props = (schema as { properties?: Record<string, { type?: string; enum?: unknown[]; default?: unknown }> }).properties;
-    if (!props) return {};
-    const obj: Record<string, unknown> = {};
-    for (const [key, def] of Object.entries(props)) {
-      if (def.default !== undefined) {
-        obj[key] = def.default;
-      } else if (def.enum && def.enum.length > 0) {
-        obj[key] = def.enum[0];
-      } else {
-        const defaults: Record<string, unknown> = {
-          string: '',
-          number: 0,
-          boolean: false,
-          array: [],
-          object: {},
-        };
-        obj[key] = defaults[def.type ?? 'string'] ?? '';
-      }
-    }
-    return obj;
-  }
-
-  function getSchemaForType(typeName: string): Record<string, unknown> | null {
-    const config = channel.config as { types?: Record<string, { schema?: Record<string, unknown> }> } | null;
-    return config?.types?.[typeName]?.schema ?? null;
-  }
-
-  // When replying, switch type to "message"
-  let lastReplyTo: string | null = null;
-  $effect(() => {
-    if (replyTo && replyTo !== lastReplyTo) {
-      selectedType = 'message';
-    }
-    lastReplyTo = replyTo;
-  });
-
-  // Reset state when channel or type changes
-  let lastChannelId = '';
-  let lastType = '';
-  $effect(() => {
-    const channelChanged = channel.id !== lastChannelId;
-    const typeChanged = activeType !== lastType;
-
-    if (channelChanged) {
-      lastChannelId = channel.id;
-      textInput = '';
-      customType = '';
-      const config = channel.config as { types?: Record<string, unknown> } | null;
-      const types = config?.types ? Object.keys(config.types) : [];
-      selectedType = types[0] ?? 'message';
-    }
-
-    if (channelChanged || typeChanged) {
-      lastType = activeType;
-      const schema = getSchemaForType(activeType);
-      editorContent = { json: templateFromSchema(schema) };
-      if (useJsonEditor) loadEditor();
-    }
-  });
-
-  async function handleSubmit(e?: Event) {
-    e?.preventDefault();
-    if (sending) return;
-
-    sending = true;
-    try {
-      if (!useJsonEditor) {
-        const trimmed = textInput.trim();
-        if (!trimmed) return;
-
-        let data: unknown;
-        if (freeTextKey) {
-          data = { [freeTextKey]: trimmed };
-        } else {
-          // Try to parse as JSON, fall back to { body: ... }
-          try {
-            data = JSON.parse(trimmed);
-          } catch {
-            data = { body: trimmed };
-          }
-        }
-
-        onPublish({ type: activeType, reply_to: replyTo ?? undefined, data });
-        textInput = '';
-        replyTo = null;
-      } else {
-        // JSON editor mode
-        let data: unknown;
-        if ('json' in editorContent) {
-          data = (editorContent as JSONContent).json;
-        } else if ('text' in editorContent) {
-          data = JSON.parse((editorContent as { text: string }).text);
-        }
-
-        onPublish({ type: activeType, data });
-        editorContent = { json: templateFromSchema(selectedSchema) };
-      }
-    } catch {
-      // Invalid JSON — don't clear
-    } finally {
-      sending = false;
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  }
-
-  function selectType(t: string) {
-    selectedType = t;
-    typeDropdownOpen = false;
-  }
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div class="border-t border-border mx-4 mb-3 mt-1 mb-[calc(0.75rem+env(safe-area-inset-bottom))] rounded-lg border bg-secondary/30 max-h-[250px] flex flex-col">
-  <!-- Top row: type selector -->
-  <div class="flex items-center gap-2 px-3 py-1.5 border-b border-border/50">
-    {#if eventTypes.length > 0}
-      <!-- Dropdown for configured types -->
-      <div class="relative">
-        <button
-          class="flex items-center gap-1 px-2 py-0.5 rounded text-[11px] bg-secondary text-muted-foreground hover:text-foreground transition-colors"
-          onclick={() => typeDropdownOpen = !typeDropdownOpen}
-        >
-          <span class="font-mono">{activeType}</span>
-          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
-        </button>
-        {#if typeDropdownOpen}
-          <div class="absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-md shadow-lg py-1 z-10 min-w-[120px]">
-            {#each eventTypes as t (t)}
-              <button
-                class="w-full text-left px-3 py-1 text-[11px] font-mono transition-colors
-                  {activeType === t ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}"
-                onclick={() => selectType(t)}
-              >
-                {t}
-              </button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {:else}
-      <!-- Free text type input -->
-      <div class="flex items-center gap-1">
-        <span class="text-[10px] text-muted-foreground/50">type:</span>
-        <input
-          type="text"
-          class="bg-transparent border-none outline-none text-[11px] font-mono text-muted-foreground w-20 placeholder:text-muted-foreground/30"
-          placeholder="message"
-          bind:value={customType}
-        />
-      </div>
-    {/if}
-  </div>
-
-  <!-- Reply indicator -->
-  {#if replyTo}
-    <div class="flex items-center gap-2 px-3 py-1 border-b border-border/50 text-[11px] text-muted-foreground">
-      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
-      <span class="font-mono truncate">Replying to {replyTo.slice(0, 12)}...</span>
-      <button
-        class="ml-auto text-muted-foreground/60 hover:text-foreground transition-colors"
-        onclick={() => replyTo = null}
-        aria-label="Cancel reply"
-      >
-        <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-      </button>
-    </div>
-  {/if}
-
-  <!-- Middle: input area -->
-  <div class="px-3 py-2 flex-1 overflow-auto min-h-0">
-    {#if !useJsonEditor}
-      <input
-        type="text"
-        class="w-full bg-transparent outline-none text-sm text-foreground placeholder:text-muted-foreground/40"
-        placeholder="Message #{channel.id}"
-        bind:value={textInput}
-        onkeydown={handleKeydown}
-        autocomplete="off"
-      />
-    {:else if JsonEditor}
-      <JsonEditor
-        bind:content={editorContent}
-        schema={selectedSchema}
-      />
-    {:else}
-      <div class="text-sm text-muted-foreground/40 py-1">Loading editor...</div>
-    {/if}
-  </div>
-
-  <!-- Bottom row: toolbar + send -->
-  <div class="flex items-center justify-between px-3 py-1.5 border-t border-border/50">
-    <div class="flex items-center gap-1">
-      <!-- Placeholder slots for future toolbar buttons (markdown, emoji, etc.) -->
-    </div>
-    <button
-      class="flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors
-        {(useJsonEditor || textInput.trim()) && !sending
-          ? 'text-foreground hover:bg-secondary'
-          : 'text-muted-foreground/30 cursor-default'}"
-      disabled={!useJsonEditor && !textInput.trim() || sending}
-      onclick={() => handleSubmit()}
-      aria-label="Send"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
-    </button>
-  </div>
-</div>
-
-{#if typeDropdownOpen}
-  <!-- Backdrop to close dropdown -->
-  <button type="button" class="fixed inset-0 z-5" onclick={() => typeDropdownOpen = false} aria-label="Close dropdown"></button>
-{/if}

package/src/lib/components/mint-token-modal.svelte

@@ -1,141 +0,0 @@
-<script lang="ts">
-  import { Button } from '@ui/components/button/index';
-  import { Input } from '@ui/components/input/index';
-  import type { ZooidClient } from '@zooid/sdk';
-
-  let {
-    open,
-    client,
-    onClose,
-  }: {
-    open: boolean;
-    client: ZooidClient;
-    onClose: () => void;
-  } = $props();
-
-  let scopes = $state('pub:*, sub:*');
-  let sub = $state('');
-  let name = $state('');
-  let expiresIn = $state('');
-  let minting = $state(false);
-  let error = $state('');
-  let mintedToken = $state('');
-  let copied = $state(false);
-
-  $effect(() => {
-    if (open) {
-      error = '';
-      mintedToken = '';
-      copied = false;
-    }
-  });
-
-  async function handleMint(e: Event) {
-    e.preventDefault();
-    minting = true;
-    error = '';
-    mintedToken = '';
-    copied = false;
-
-    const scopeList = scopes.split(',').map((s) => s.trim()).filter(Boolean);
-    if (scopeList.length === 0) {
-      error = 'At least one scope is required';
-      minting = false;
-      return;
-    }
-
-    try {
-      const result = await client.mintToken({
-        scopes: scopeList,
-        sub: sub || undefined,
-        name: name || undefined,
-        expires_in: expiresIn || undefined,
-      });
-      mintedToken = result.token;
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to mint token';
-    } finally {
-      minting = false;
-    }
-  }
-
-  async function copyToken() {
-    await navigator.clipboard.writeText(mintedToken);
-    copied = true;
-    setTimeout(() => { copied = false; }, 2000);
-  }
-
-  function handleBackdrop(e: MouseEvent) {
-    if (e.target === e.currentTarget) onClose();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') onClose();
-  }
-</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="Mint token"
-    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">Mint Token</h2>
-      <p class="text-xs text-muted-foreground mb-4">
-        Create a new JWT with custom scopes.
-      </p>
-
-      {#if mintedToken}
-        <div class="flex flex-col gap-3">
-          <div class="bg-secondary rounded-md p-3">
-            <div class="text-[10px] text-muted-foreground mb-1 uppercase tracking-wider">Token (shown once)</div>
-            <div class="text-xs font-mono break-all select-all max-h-24 overflow-y-auto">{mintedToken}</div>
-          </div>
-          <div class="flex gap-2">
-            <Button size="sm" class="flex-1" onclick={copyToken}>
-              {copied ? 'Copied!' : 'Copy'}
-            </Button>
-            <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Done</Button>
-          </div>
-        </div>
-      {:else}
-        <form onsubmit={handleMint} class="flex flex-col gap-3">
-          <label class="flex flex-col gap-1">
-            <span class="text-xs text-muted-foreground">Scopes (comma-separated)</span>
-            <Input bind:value={scopes} placeholder="admin, pub:my-channel, sub:*" />
-            <span class="text-[10px] text-muted-foreground/60">admin, pub:channel, sub:channel, pub:*, sub:*</span>
-          </label>
-          <label class="flex flex-col gap-1">
-            <span class="text-xs text-muted-foreground">Subject (optional)</span>
-            <Input bind:value={sub} placeholder="my-bot" />
-          </label>
-          <label class="flex flex-col gap-1">
-            <span class="text-xs text-muted-foreground">Display name (optional)</span>
-            <Input bind:value={name} placeholder="My Bot" />
-          </label>
-          <label class="flex flex-col gap-1">
-            <span class="text-xs text-muted-foreground">Expires in (optional)</span>
-            <Input bind:value={expiresIn} placeholder="7d, 1h, 30m" />
-            <span class="text-[10px] text-muted-foreground/60">Leave empty for no expiry</span>
-          </label>
-
-          {#if error}
-            <p class="text-xs text-destructive">{error}</p>
-          {/if}
-
-          <div class="flex gap-2 mt-1">
-            <Button type="submit" size="sm" class="flex-1" disabled={minting || !scopes.trim()}>
-              {minting ? 'Minting...' : 'Mint'}
-            </Button>
-            <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Cancel</Button>
-          </div>
-        </form>
-      {/if}
-    </div>
-  </div>
-{/if}

package/src/lib/components/ref-link.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { resolveRef } from '../zooid-uri';
-
-  let {
-    ref,
-    serverUrl = '',
-    onOpenRef,
-  }: {
-    ref: string;
-    serverUrl?: string;
-    onOpenRef?: (detail: { channel: string; eventId: string }) => void;
-  } = $props();
-
-  let resolved = $derived(resolveRef(ref, serverUrl));
-
-  function handleClick() {
-    if (resolved.type === 'zooid') {
-      onOpenRef?.({ channel: resolved.channel, eventId: resolved.eventId });
-    }
-  }
-</script>
-
-{#if resolved.type === 'zooid'}
-  <button class="text-xs font-mono text-primary/70 hover:text-primary bg-primary/10 hover:bg-primary/20 px-1.5 py-0 rounded cursor-pointer transition-colors" onclick={handleClick}>
-    {resolved.label}
-  </button>
-{:else if resolved.type === 'zooid-external' || resolved.type === 'external'}
-  <a href={resolved.href} target="_blank" rel="noopener" class="text-xs font-mono text-primary/70 hover:text-primary bg-primary/10 hover:bg-primary/20 px-1.5 py-0 rounded transition-colors">
-    {resolved.label}
-  </a>
-{:else}
-  <span class="text-xs font-mono text-muted-foreground">{resolved.label}</span>
-{/if}

package/src/lib/components/ref-side-sheet.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-  import type { ZooidEvent } from '../api';
-  import EventCard from './event-card.svelte';
-
-  let {
-    channel,
-    eventId,
-    client,
-    onClose,
-  }: {
-    channel: string;
-    eventId: string;
-    client: { poll: (channelId: string, options?: { cursor?: string; limit?: number }) => Promise<{ events: ZooidEvent[] }> };
-    onClose?: () => void;
-  } = $props();
-
-  let event = $state<ZooidEvent | null>(null);
-  let thread = $state<ZooidEvent[] | null>(null);
-  let loading = $state(true);
-  let threadExpanded = $state(false);
-
-  async function fetchEvent() {
-    loading = true;
-    try {
-      const res = await fetch(`/api/v1/channels/${channel}/events/${eventId}`);
-      if (res.ok) {
-        event = await res.json();
-      }
-    } catch {
-      // fetch failed
-    }
-    loading = false;
-  }
-
-  async function expandThread() {
-    try {
-      const res = await fetch(`/api/v1/channels/${channel}/events/${eventId}/thread`);
-      if (res.ok) {
-        const body = await res.json();
-        thread = body.events ?? [];
-      }
-    } catch {
-      // fetch failed
-    }
-    threadExpanded = true;
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') onClose?.();
-  }
-
-  $effect(() => {
-    if (channel && eventId) fetchEvent();
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<button
-  type="button"
-  class="fixed inset-0 bg-background/40 z-40"
-  onclick={() => onClose?.()}
-  aria-label="Close ref panel"
-></button>
-
-<div class="fixed inset-y-0 right-0 w-80 max-w-[85vw] bg-card border-l border-border shadow-lg z-50 p-4 flex flex-col gap-3 animate-slide-in-right overflow-y-auto">
-  <div class="flex items-center justify-between">
-    <h3 class="text-sm font-semibold">#{channel} / {eventId.slice(0, 8)}&hellip;</h3>
-    <button class="text-muted-foreground hover:text-foreground transition-colors" onclick={() => onClose?.()} aria-label="Close">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-    </button>
-  </div>
-
-  {#if loading}
-    <div class="text-sm text-muted-foreground">Loading&hellip;</div>
-  {:else if event}
-    <EventCard {event} />
-
-    {#if !threadExpanded}
-      <button class="text-xs text-primary hover:text-primary/80 transition-colors" onclick={expandThread}>
-        Expand thread
-      </button>
-    {:else if thread && thread.length > 0}
-      <div class="flex flex-col gap-1 border-t border-border pt-2">
-        {#each thread as threadEvent}
-          <EventCard event={threadEvent} />
-        {/each}
-      </div>
-    {:else if thread}
-      <div class="text-xs text-muted-foreground">No replies</div>
-    {/if}
-  {:else}
-    <div class="text-sm text-muted-foreground">Event not found</div>
-  {/if}
-</div>
-
-<style>
-  @keyframes slide-in-right {
-    from { transform: translateX(100%); }
-    to { transform: translateX(0); }
-  }
-  .animate-slide-in-right {
-    animation: slide-in-right 0.15s ease-out;
-  }
-</style>