release: WRNexusJS 0.8.0

packages/realtime/components/MessageBubble.wrn

@@ -0,0 +1,27 @@
+component RealtimeMessageBubble {
+  props {
+    id: string = ""
+    text: string = ""
+    author: string = ""
+    avatarSrc: string = ""
+    avatarFallback: string = ""
+    timestamp: string = ""
+    status: string = ""
+    direction: string = "incoming"
+    color: string = "primary"
+    size: string = "default"
+    class: string = ""
+  }
+
+  view {
+    <ChatBubble
+      {...attrs}
+      items='{[{ id: id, text: text, author: author, avatarSrc: avatarSrc, avatarFallback: avatarFallback, timestamp: timestamp, status: status, direction: direction }]}'
+      showAvatars='{avatarSrc != "" || avatarFallback != ""}'
+      showMetadata='{timestamp != "" || status != ""}'
+      color='{color}'
+      size='{size}'
+      class='{class}'
+    />
+  }
+}

packages/realtime/components/MessageComposer.wrn

@@ -0,0 +1,29 @@
+component MessageComposer {
+  props {
+    name: string = "text"
+    type: string = "message"
+    placeholder: string = "Write a message…"
+    sendLabel: string = "Send"
+    disabled: boolean = false
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+
+  view {
+    <form data-room-send class='flex items-end gap-2 {class}'>
+      <input type="hidden" name="type" value='{type}' />
+      <Textarea
+        name='{name}'
+        placeholder='{placeholder}'
+        rows="2"
+        disabled='{disabled}'
+        color='{color}'
+        size='{size}'
+        data-room-reset
+        class="min-w-0 flex-1"
+      />
+      <Button type="submit" label='{sendLabel}' icon="icon-[lucide--send]" color='{color}' size='{size}' disabled='{disabled}' />
+    </form>
+  }
+}

packages/realtime/components/PresenceList.wrn

@@ -0,0 +1,27 @@
+component PresenceList {
+  props {
+    members: unknown[] = []
+    title: string = "People"
+    emptyLabel: string = "No one is online."
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+
+  view {
+    <Card title='{title}' color='{color}' size='{size}' empty='{members.length == 0}' emptyTitle='{emptyLabel}' class='{class}'>
+      <div class="space-y-3">
+        {#each members as member}
+          <div class="flex items-center gap-3">
+            <Avatar src='{member.avatar || ""}' fallback='{member.name || member.userId || "?"}' size="sm" color='{color}' />
+            <div class="min-w-0 flex-1">
+              <p class="m-0 truncate text-sm font-semibold">{member.name || member.userId}</p>
+              <p class="m-0 text-xs text-[var(--wire-color-muted)]">{member.status || "online"}</p>
+            </div>
+            <Badge label='{member.status || "online"}' color='{member.status == "busy" ? "danger" : member.status == "away" ? "warning" : "success"}' size="sm" variant="soft" />
+          </div>
+        {/each}
+      </div>
+    </Card>
+  }
+}

packages/realtime/components/RealtimeRoom.wrn

@@ -0,0 +1,33 @@
+component RealtimeRoom {
+  props {
+    room: string = ""
+    user: string = ""
+    title: string = "Conversation"
+    description: string = ""
+    statusLabel: string = "Connecting…"
+    emptyLabel: string = "No messages yet."
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+
+  view {
+    <Card
+      {...attrs}
+      title='{title}'
+      description='{description}'
+      color='{color}'
+      size='{size}'
+      class='{class}'
+    >
+      <section data-room='{room}' data-room-user='{user}' class="flex min-h-72 flex-col gap-4">
+        <RoomStatus label='{statusLabel}' color='{color}' size='{size}' />
+        <div data-room-log role="log" aria-live="polite" class="flex min-h-40 flex-1 flex-col gap-3 overflow-y-auto rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-surface-2)] p-3">
+          <p data-room-empty class="m-auto text-sm text-[var(--wire-color-muted)]">{emptyLabel}</p>
+          <slot></slot>
+        </div>
+        <slot name="composer"></slot>
+      </section>
+    </Card>
+  }
+}

packages/realtime/components/RoomMeta.wrn

@@ -0,0 +1,23 @@
+component RoomMeta {
+  props {
+    name: string = "Room"
+    description: string = ""
+    memberCount: number = 0
+    onlineCount: number = 0
+    private: boolean = false
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+
+  view {
+    <Card title='{name}' description='{description}' color='{color}' size='{size}' class='{class}'>
+      <div class="flex flex-wrap items-center gap-2">
+        <Badge label='{onlineCount + " online"}' color="success" variant="soft" size="sm" />
+        <Badge label='{memberCount + " members"}' color='{color}' variant="soft" size="sm" />
+        {#if private}<Badge label="Private" icon="icon-[lucide--lock]" color="warning" variant="soft" size="sm" />{/if}
+      </div>
+      <slot></slot>
+    </Card>
+  }
+}

packages/realtime/components/RoomStatus.wrn

@@ -0,0 +1,23 @@
+component RoomStatus {
+  props {
+    label: string = "Connecting…"
+    connectedLabel: string = "Connected"
+    disconnectedLabel: string = "Disconnected"
+    errorLabel: string = "Connection error"
+    color: string = "primary"
+    size: string = "sm"
+    class: string = ""
+  }
+
+  view {
+    <div class='flex items-center justify-between gap-3 {class}'>
+      <Badge label="Live" color='{color}' size='{size}' variant="soft" />
+      <span
+        data-room-status
+        data-room-status-class="inline-flex items-center gap-2 text-xs font-medium text-[var(--wire-color-muted)]"
+        class="inline-flex items-center gap-2 text-xs font-medium text-[var(--wire-color-muted)]"
+        aria-live="polite"
+      >{label}</span>
+    </div>
+  }
+}

packages/realtime/components/TypingIndicator.wrn

@@ -0,0 +1,23 @@
+component TypingIndicator {
+  props {
+    names: unknown[] = []
+    label: string = "Typing…"
+    color: string = "primary"
+    size: string = "sm"
+    class: string = ""
+  }
+
+  view {
+    {#if names.length > 0}
+      <Alert
+        title='{names.length == 1 ? names[0] + " is typing" : names.length + " people are typing"}'
+        description='{label}'
+        icon="icon-[lucide--message-circle-more]"
+        color='{color}'
+        size='{size}'
+        variant="soft"
+        class='{class}'
+      />
+    {/if}
+  }
+}