WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/ChatBubble.wrn
+18 -18
View File
@@ -89,30 +89,30 @@ component ChatBubble {
role="log"
aria-label="{ariaLabel}"
aria-live="polite"
>
data-wrn-owner="ChatBubble" data-wrn-part="root" data-wrn-component="ChatBubble" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title || description}
<header class="wrn-next__chat-header">
{#if title}<h3>{title}</h3>{/if}
<header class="wrn-next__chat-header" data-wrn-owner="ChatBubble" data-wrn-part="chatHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<h3 data-wrn-owner="ChatBubble" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>{/if}
{#if description}<p>{description}</p>{/if}
</header>
{/if}
{#if items.length}
<div class="wrn-next__chat-thread">
<div class="wrn-next__chat-thread" data-wrn-owner="ChatBubble" data-wrn-part="chatThread" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<article
class="wrn-next__chat-message"
data-direction="{messageDirection(item)}"
aria-label="{messageDirection(item) === 'outgoing' ? 'Sent message' : 'Received message'}"
>
<div class="wrn-next__chat-row">
data-wrn-owner="ChatBubble" data-wrn-part="chatMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__chat-row" data-wrn-owner="ChatBubble" data-wrn-part="chatRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if showAvatars && (item.avatarSrc || item.avatarFallback)}
<button
class="wrn-next__chat-avatar"
type="button"
aria-label="{item.avatarLabel || item.author || 'Message author'}"
@click="selectAvatar(event, item, index)"
>
data-wrn-owner="ChatBubble" data-wrn-part="chatAvatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.avatarSrc}
<img src="{item.avatarSrc}" alt="{item.avatarAlt || ''}" />
{:else}
@@ -127,8 +127,8 @@ component ChatBubble {
tabindex="0"
@click="selectMessage(item, index)"
@keydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); selectMessage(item, index) }"
>
{#if item.title}<h4>{item.title}</h4>{/if}
data-wrn-owner="ChatBubble" data-wrn-part="chatContent" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.title}<h4 data-wrn-owner="ChatBubble" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title}</h4>{/if}
{#if item.text}<p>{item.text}</p>{/if}
{#if item.bullets && item.bullets.length}
<ul>
@@ -141,7 +141,7 @@ component ChatBubble {
<a
href="{link.href || '#'}"
@click="selectLink(event, link, item, index)"
>{link.label}</a>
data-wrn-owner="ChatBubble" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{link.label}</a>
{/each}
</nav>
{/if}
@@ -149,25 +149,25 @@ component ChatBubble {
</div>
{#if showMetadata && (item.timestamp || item.status || item.receipt || item.actionLabel)}
<footer class="wrn-next__chat-meta" data-tone="{item.statusTone || (receipt(item) === 'failed' || receipt(item) === 'error' ? 'danger' : 'muted')}" data-receipt="{receipt(item)}">
<footer class="wrn-next__chat-meta" data-tone="{item.statusTone || (receipt(item) === 'failed' || receipt(item) === 'error' ? 'danger' : 'muted')}" data-receipt="{receipt(item)}" data-wrn-owner="ChatBubble" data-wrn-part="chatMeta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.statusIcon}<span class="{item.statusIcon}" aria-hidden="true"></span>{/if}
{#if item.status && (!receipt(item) || receipt(item) === "failed" || receipt(item) === "error")}<span class="wrn-next__chat-status">{item.status}</span>{/if}
{#if item.status && (!receipt(item) || receipt(item) === "failed" || receipt(item) === "error")}<span class="wrn-next__chat-status" data-wrn-owner="ChatBubble" data-wrn-part="chatStatus" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.status}</span>{/if}
{#if item.timestamp}<time datetime="{item.datetime || ''}">{item.timestamp}</time>{/if}
{#if receipt(item)}
<span class="wrn-next__chat-receipt" data-receipt="{receipt(item)}" role="img" aria-label="{receiptLabel(item)}" title="{receiptLabel(item)}">
<span class="wrn-next__chat-receipt" data-receipt="{receipt(item)}" role="img" aria-label="{receiptLabel(item)}" title="{receiptLabel(item)}" data-wrn-owner="ChatBubble" data-wrn-part="chatReceipt" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if receipt(item) === "sending"}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75V8l2 1.5"></path></svg>
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75V8l2 1.5"></path></svg>
{:else if receipt(item) === "sent"}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"></path></svg>
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M3.5 8.5l3 3 6-7"></path></svg>
{:else if receipt(item) === "delivered" || receipt(item) === "read"}
<svg viewBox="0 0 20 16" width="17" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 8.5l3 3 6-7"></path><path d="M8.5 11.5l.5.5 6-7.5"></path></svg>
<svg viewBox="0 0 20 16" width="17" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M1.5 8.5l3 3 6-7"></path><path d="M8.5 11.5l.5.5 6-7.5"></path></svg>
{:else}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75v3.75"></path><path d="M8 11h.01"></path></svg>
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75v3.75"></path><path d="M8 11h.01"></path></svg>
{/if}
</span>
{/if}
{#if item.actionLabel}
<button type="button" @click="selectAction(event, item, index)">
<button type="button" @click="selectAction(event, item, index)" data-wrn-owner="ChatBubble" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{item.actionLabel}
</button>
{/if}