@meistrari/tela-build 1.71.0 → 1.72.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 Latest updates and announcements.
 
+## September 16, 2026
+
+### Square Loader
+
+- **New `TelaLoadersSquare`.** The animated square from the splash screen is now its own component, with `size="md"` (32×32) and `size="sm"` (12×12). `TelaLoadersSplashScreen` and `TelaChatWorkingIndicator` render it. See [Square Loader](/components/square).
+
+### Button
+
+- **`size="sm"` icons are now 10px.** The icon size lookup compared against the size's class string instead of the size name, so every size rendered the 13px default. `md` and `lg` are unchanged. See [Button](/components/button).
+- **`size="lg"` is slightly tighter.** Vertical padding goes from 10px to 8px and the radius from 13px to 12px.
+- **Icon gap is now 4px.** Icons get a 2px padded wrapper, so the gap between icon and label drops from 6px to 4px.
+- **Icons sit on the cap line.** Leading and trailing icons (and the loading spinner) are lifted half a pixel so they center on the capital letters instead of rendering a device pixel low on 2x screens.
+
+### Chat: Working indicator
+
+- **New `TelaChatWorkingIndicator`.** Running-turn row for the conversation: `TelaLoadersSquare` (`sm`), a `label` (`Working` by default), and an elapsed counter driven by `startedAt` or `elapsed`. Render it whenever a turn is running; the host composes anything else (such as `TelaChatTextShimmer`) around it. See [Chat → Working Indicator](/templates/chat#working-indicator).
+- **New `TelaChatStopRunButton`.** While a turn runs, render it in place of `TelaChatPromptInput`: a centered secondary pill with a stop icon that emits `stop`. Wrap it and `TelaChatPromptInput` in the new `TelaChatAnimateEnter` inside an `<AnimatePresence mode="popLayout">` to cross-fade them.
+- **New `TelaChatAnimateEnter`.** Enter/exit preset (fade, slide, slight scale) for the prompt input and stop button; `TelaChatBody` docks the wrapper when it holds a docked surface. Props: `offset`, `scale`, `duration`. It reuses the prompt input's dock, so the conversation padding and scrollbar inset stay correct. See [Chat → Stop Run](/templates/chat#stop-run).
+- **`TelaChatMessage` stacks its children with an 8px gap.** A running turn can hold the indicator plus a `TelaChatTextShimmer` or reasoning trace in one message; single-child messages are unaffected.
+
 ## September 15, 2026
 
 ### Chat: Floating window

package/components/tela/button/button.mdx

@@ -67,6 +67,24 @@ A versatile button component with multiple variants, sizes, and states. Supports
 </TelaButton>
 ```
 
+### Sizes
+
+Three sizes, `md` by default. Each one sets its own text, padding, radius and icon size, so a leading or trailing icon scales with the button.
+
+```vue
+<div class="flex items-center gap-12px">
+  <TelaButton size="sm" icon="i-ph-plus" leading>Small</TelaButton>
+  <TelaButton size="md" icon="i-ph-plus" leading>Medium</TelaButton>
+  <TelaButton size="lg" icon="i-ph-plus" leading>Large</TelaButton>
+</div>
+```
+
+| size | text | padding | radius | icon |
+|---|---|---|---|---|
+| `sm` | 12px / 16px | 4px × 10px | 9px | 10px |
+| `md` | 14px / 18px | 7px × 12px | 11px | 13px |
+| `lg` | 16px / 20px | 8px × 16px | 12px | 13px |
+
 ### With Icon Code
 
 ```vue

package/components/tela/button/button.vue

@@ -37,7 +37,7 @@ const hasTrailingIcon = computed(() => !!((props.loading && !props.leading) || s
 const sizeStyle = computed(() => (({
     sm: '[--padding-x:10px] text-[12px] leading-[16px] tracking-normal py-[4px] rounded-[9px]',
     md: '[--padding-x:12px] text-[14px] leading-[18px] -tracking-[0.15px] py-[7px] rounded-[11px]',
-    lg: '[--padding-x:16px] text-[16px] leading-[20px] -tracking-[0.15px] py-[10px] rounded-[13px]',
+    lg: '[--padding-x:16px] text-[16px] leading-[20px] -tracking-[0.15px] py-[8px] rounded-[12px]',
 }) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
 
 const paddingStyle = computed(() => [
@@ -64,20 +64,11 @@ const resolvedStyle = computed(() => [
 
 const tag = computed(() => props.to ? NuxtLink : 'button')
 
-const iconSize = computed(() => {
-    switch (sizeStyle.value) {
-        case 'xs':
-            return '11px'
-        case 'sm':
-            return '11px'
-        case 'md':
-            return '13px'
-        case 'lg':
-            return '13px'
-        default:
-            return '13px'
-    }
-})
+const iconSize = computed(() => (({
+    sm: '10px',
+    md: '13px',
+    lg: '13px',
+}) as Record<ButtonSize, string>)[resolvedSize.value] ?? '13px')
 </script>
 
 <template>
@@ -85,19 +76,42 @@ const iconSize = computed(() => {
         :is="tag"
         :to="to"
         :class="cn(
-            'box-border font-540 select-none flex items-center justify-center gap-6px ease-out duration-40',
+            'box-border font-540 select-none flex items-center justify-center gap-4px ease-out duration-40',
             disabled ? 'cursor-not-allowed' : 'cursor-pointer',
             resolvedStyle,
         )"
         :disabled="disabled"
         :target="target"
     >
-        <TelaIconSpinner v-if="loading && leading" class="animate-spin" />
+        <div v-if="loading && leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIconSpinner class="animate-spin" />
+        </div>
+
         <slot v-else-if="$slots.leading" name="leading" />
-        <TelaIcon v-else-if="icon && leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
+
+        <div v-else-if="icon && leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIcon :name="icon" :size="iconSize" :color="iconColorStyle" />
+        </div>
+
         <slot />
-        <TelaIconSpinner v-if="loading && !leading" class="animate-spin min-h-14px min-w-14px" />
+
+        <div v-if="loading && !leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIconSpinner class="animate-spin" />
+        </div>
+
         <slot v-else-if="$slots.trailing" name="trailing" />
-        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
+
+        <div v-else-if="icon && !leading" data-button-icon class="p-2px flex items-center justify-center">
+            <TelaIcon :name="icon" :size="iconSize" :color="iconColorStyle" />
+        </div>
     </component>
 </template>
+
+<style scoped>
+/* Optical alignment */
+@media (min-resolution: 1.5dppx) {
+    [data-button-icon] {
+        transform: translateY(-0.5px);
+    }
+}
+</style>

package/components/tela/chat/chat-animate-enter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+    /** Slide distance on enter/exit, as a CSS length or percentage of the element. */
+    offset?: string | number
+    scale?: number
+    duration?: number
+}>(), {
+    offset: '100%',
+    scale: 0.97,
+    duration: 0.16,
+})
+</script>
+
+<template>
+    <Motion
+        data-chat-animate-enter
+        :initial="{ opacity: 0, y: offset, scale }"
+        :animate="{ opacity: 1, y: 0, scale: 1 }"
+        :exit="{ opacity: 0, y: offset, scale }"
+        :transition="{ duration, ease: 'easeOut' }"
+    >
+        <slot />
+    </Motion>
+</template>

package/components/tela/chat/chat-body.vue

@@ -7,12 +7,16 @@ withDefaults(defineProps<{
 })
 
 const rootRef = ref<HTMLElement | null>(null)
+
+// The docked element is the prompt-input surface, or the TelaChatAnimateEnter
+// wrapping it (document order puts the wrapper first).
+const DOCK_SELECTOR = '[data-chat-animate-enter]:has([data-chat-prompt-input]), [data-chat-prompt-input]'
 let inputObserver: ResizeObserver | null = null
 let slotObserver: MutationObserver | null = null
 let observedInput: HTMLElement | null = null
 
 function bindInputObserver() {
-    const input = rootRef.value?.querySelector<HTMLElement>('[data-chat-prompt-input]') ?? null
+    const input = rootRef.value?.querySelector<HTMLElement>(DOCK_SELECTOR) ?? null
 
     if (input === observedInput)
         return
@@ -68,10 +72,24 @@ onBeforeUnmount(() => {
     padding-bottom: calc(var(--chat-input-height, 64px) + 24px);
 }
 
-[data-chat-body] [data-chat-prompt-input] {
+/*
+ * The dock: the prompt-input surface itself, or the TelaChatAnimateEnter that
+ * wraps it. A surface inside the wrapper stays in flow so only one box is
+ * positioned, faded and (with popLayout) pinned.
+ */
+[data-chat-body] :is([data-chat-prompt-input]:not([data-chat-animate-enter] *), [data-chat-animate-enter]:has([data-chat-prompt-input])) {
     --at-apply: 'absolute bottom-0 left-0 right-0 z-2 mx-12px mb-12px';
 }
 
+/*
+ * While AnimatePresence (popLayout) holds an exiting dock element it pins it
+ * with `left`/`top` measured from the offsets, which already include the side
+ * margin; keeping the margin on top of that shifts it sideways mid-fade.
+ */
+[data-chat-body] :is([data-chat-prompt-input], [data-chat-animate-enter])[data-motion-pop-id] {
+    margin: 0 !important;
+}
+
 [data-chat-body]:has([data-chat-prompt-input]) .chat-conversation-scrollbar {
     top: 8px !important;
     bottom: calc(var(--chat-input-height, 64px) + 16px) !important;
@@ -86,7 +104,7 @@ onBeforeUnmount(() => {
     padding-bottom: calc(var(--chat-input-height, 64px) + 32px);
 }
 
-[data-chat-body][data-variant='page'] [data-chat-prompt-input] {
+[data-chat-body][data-variant='page'] :is([data-chat-prompt-input]:not([data-chat-animate-enter] *), [data-chat-animate-enter]:has([data-chat-prompt-input])) {
     --at-apply: 'mx-24px mb-16px';
 }
 </style>

package/components/tela/chat/chat-stop-run-button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    label?: string
+    disabled?: boolean
+}>(), {
+    label: 'Stop Run',
+})
+
+const emit = defineEmits<{
+    (e: 'stop'): void
+}>()
+</script>
+
+<template>
+    <div data-chat-prompt-input :class="cn('flex justify-center', props.class)">
+        <TelaButton
+            type="button"
+            variant="secondary"
+            size="sm"
+            leading
+            icon="i-ph-square-bold"
+            :disabled="props.disabled"
+            @click="emit('stop')"
+        >
+            {{ props.label }}
+        </TelaButton>
+    </div>
+</template>

package/components/tela/chat/chat-working-indicator.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    /** Row label next to the loader. */
+    label?: string
+    /** Epoch ms of when work started; the elapsed counter ticks from it every second. */
+    startedAt?: number
+    /** Elapsed seconds controlled by the host. Takes precedence over `startedAt`. */
+    elapsed?: number
+}>(), {
+    label: 'Working',
+})
+
+const now = ref(Date.now())
+let timer: ReturnType<typeof setInterval> | null = null
+
+function stopTicking() {
+    if (timer)
+        clearInterval(timer)
+    timer = null
+}
+
+function syncTicking() {
+    stopTicking()
+
+    if (props.elapsed !== undefined || props.startedAt === undefined)
+        return
+
+    now.value = Date.now()
+
+    timer = setInterval(() => {
+        now.value = Date.now()
+    }, 1000)
+}
+
+onMounted(() => {
+    syncTicking()
+    watch(() => [props.startedAt, props.elapsed], syncTicking)
+})
+
+onUnmounted(stopTicking)
+
+const elapsedSeconds = computed(() => {
+    if (props.elapsed !== undefined)
+        return Math.max(0, Math.floor(props.elapsed))
+
+    if (props.startedAt === undefined)
+        return undefined
+
+    return Math.max(0, Math.floor((now.value - props.startedAt) / 1000))
+})
+
+const elapsedLabel = computed(() => {
+    const seconds = elapsedSeconds.value
+
+    if (seconds === undefined)
+        return undefined
+
+    if (seconds < 60)
+        return `${seconds}s`
+
+    const minutes = Math.floor(seconds / 60)
+
+    return `${minutes}m ${seconds % 60}s`
+})
+</script>
+
+<template>
+    <div
+        :class="cn('flex items-center gap-10px text-start', props.class)"
+        role="status"
+        aria-live="polite"
+    >
+        <TelaLoadersSquare size="sm" class="shrink-0" />
+        <div class="flex items-center gap-6px">
+            <h5 class="heading-h5-semibold text-primary">
+                {{ props.label }}
+            </h5>
+            <span v-if="elapsedLabel" aria-hidden="true" class="body-14-regular text-tertiary tabular-nums">{{ elapsedLabel }}</span>
+        </div>
+    </div>
+</template>

package/components/tela/chat/chat.mdx

@@ -24,6 +24,7 @@ const messages = ref<ChatMessage[]>([
     { id: '2', role: 'assistant', text: 'The chat primitives landed: a conversation viewport, a prompt input, and three shells you can compose freely.' },
 ])
 const status = ref<'ready' | 'uploading' | 'streaming'>('ready')
+const startedAt = ref(Date.now())
 const draft = ref('')
 const recentFiles = [
     { id: 'f1', label: 'release-notes.pdf', type: 'application/pdf' },
@@ -48,6 +49,8 @@ function onInput(event: Event) {
 
 function send() {
     // append the user message, call your backend, stream the reply...
+    draft.value = ''
+    startedAt.value = Date.now()
     conversationRef.value?.scrollToBottom()
 }
 </script>
@@ -63,70 +66,76 @@ function send() {
                         </TelaChatMessageContent>
                     </TelaChatMessage>
 
-                    <TelaChatTextShimmer v-if="status === 'streaming'">
-                        Thinking...
-                    </TelaChatTextShimmer>
+                    <TelaChatWorkingIndicator v-if="status === 'streaming'" :started-at="startedAt" />
                 </TelaChatConversationContent>
             </TelaChatConversation>
 
-            <TelaChatPromptInput>
-                <TelaChatPromptInputTextarea
-                    placeholder="How can I help?"
-                    :empty="!draft"
-                    @input="onInput"
-                    @keydown.enter.exact.prevent="send"
-                />
-                <TelaChatPromptInputToolbar>
-                    <TelaChatPromptInputTools>
-                        <TelaChatPromptInputActionMenu>
-                            <TelaChatPromptInputActionMenuTrigger />
-                            <TelaChatPromptInputActionMenuContent>
-                                <TelaChatPromptInputActionMenuItem icon="i-ph-paperclip">
-                                    Add files or photos
-                                </TelaChatPromptInputActionMenuItem>
-                                <TelaChatPromptInputActionMenuSub>
-                                    <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-clock-counter-clockwise">
-                                        Recent files
-                                    </TelaChatPromptInputActionMenuSubTrigger>
-                                    <TelaChatPromptInputActionMenuSubContent>
-                                        <TelaChatPromptInputActionMenuItem
-                                            v-for="file in recentFiles"
-                                            :key="file.id"
-                                        >
-                                            <img :src="getMimeTypeIcon(file.type)" class="w-16px h-16px mr-8px shrink-0" alt="">
-                                            <span class="min-w-0 max-w-200px truncate">{{ file.label }}</span>
-                                        </TelaChatPromptInputActionMenuItem>
-                                    </TelaChatPromptInputActionMenuSubContent>
-                                </TelaChatPromptInputActionMenuSub>
-                                <TelaMenubarSeparator />
-                                <TelaChatPromptInputActionMenuSub>
-                                    <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-notepad" icon-size="16px">
-                                        Skills
-                                    </TelaChatPromptInputActionMenuSubTrigger>
-                                    <TelaChatPromptInputActionMenuSubContent>
-                                        <TelaChatPromptInputActionMenuItem
-                                            v-for="skill in skills"
-                                            :key="skill.id"
-                                            @click="draft = skill.label"
-                                        >
-                                            <span class="min-w-0 max-w-200px truncate">{{ skill.label }}</span>
-                                        </TelaChatPromptInputActionMenuItem>
-                                    </TelaChatPromptInputActionMenuSubContent>
-                                </TelaChatPromptInputActionMenuSub>
-                            </TelaChatPromptInputActionMenuContent>
-                        </TelaChatPromptInputActionMenu>
-                    </TelaChatPromptInputTools>
-                    <TelaChatPromptInputActions>
-                        <TelaChatModelSelector v-model="selectedModel" :options="modelOptions" />
-                        <TelaChatPromptSubmitButton
-                            :status="status"
-                            :disabled="!draft.trim()"
-                            @send="send"
-                            @stop="status = 'ready'"
+            <AnimatePresence mode="popLayout" :initial="false">
+                <TelaChatAnimateEnter v-if="status === 'streaming'" key="stop">
+                    <TelaChatStopRunButton @stop="status = 'ready'" />
+                </TelaChatAnimateEnter>
+
+                <TelaChatAnimateEnter v-else key="input" :scale="0.9">
+                    <TelaChatPromptInput>
+                        <TelaChatPromptInputTextarea
+                            placeholder="How can I help?"
+                            :empty="!draft"
+                            @input="onInput"
+                            @keydown.enter.exact.prevent="send"
                         />
-                    </TelaChatPromptInputActions>
-                </TelaChatPromptInputToolbar>
-            </TelaChatPromptInput>
+                        <TelaChatPromptInputToolbar>
+                            <TelaChatPromptInputTools>
+                                <TelaChatPromptInputActionMenu>
+                                    <TelaChatPromptInputActionMenuTrigger />
+                                    <TelaChatPromptInputActionMenuContent>
+                                        <TelaChatPromptInputActionMenuItem icon="i-ph-paperclip">
+                                            Add files or photos
+                                        </TelaChatPromptInputActionMenuItem>
+                                        <TelaChatPromptInputActionMenuSub>
+                                            <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-clock-counter-clockwise">
+                                                Recent files
+                                            </TelaChatPromptInputActionMenuSubTrigger>
+                                            <TelaChatPromptInputActionMenuSubContent>
+                                                <TelaChatPromptInputActionMenuItem
+                                                    v-for="file in recentFiles"
+                                                    :key="file.id"
+                                                >
+                                                    <img :src="getMimeTypeIcon(file.type)" class="w-16px h-16px mr-8px shrink-0" alt="">
+                                                    <span class="min-w-0 max-w-200px truncate">{{ file.label }}</span>
+                                                </TelaChatPromptInputActionMenuItem>
+                                            </TelaChatPromptInputActionMenuSubContent>
+                                        </TelaChatPromptInputActionMenuSub>
+                                        <TelaMenubarSeparator />
+                                        <TelaChatPromptInputActionMenuSub>
+                                            <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-notepad" icon-size="16px">
+                                                Skills
+                                            </TelaChatPromptInputActionMenuSubTrigger>
+                                            <TelaChatPromptInputActionMenuSubContent>
+                                                <TelaChatPromptInputActionMenuItem
+                                                    v-for="skill in skills"
+                                                    :key="skill.id"
+                                                    @click="draft = skill.label"
+                                                >
+                                                    <span class="min-w-0 max-w-200px truncate">{{ skill.label }}</span>
+                                                </TelaChatPromptInputActionMenuItem>
+                                            </TelaChatPromptInputActionMenuSubContent>
+                                        </TelaChatPromptInputActionMenuSub>
+                                    </TelaChatPromptInputActionMenuContent>
+                                </TelaChatPromptInputActionMenu>
+                            </TelaChatPromptInputTools>
+                            <TelaChatPromptInputActions>
+                                <TelaChatModelSelector v-model="selectedModel" :options="modelOptions" />
+                                <TelaChatPromptSubmitButton
+                                    :status="status"
+                                    :disabled="!draft.trim()"
+                                    @send="send"
+                                    @stop="status = 'ready'"
+                                />
+                            </TelaChatPromptInputActions>
+                        </TelaChatPromptInputToolbar>
+                    </TelaChatPromptInput>
+                </TelaChatAnimateEnter>
+            </AnimatePresence>
         </TelaChatBody>
     </div>
 </template>
@@ -972,6 +981,91 @@ const suggestions = [
 </template>
 ```
 
+### Working Indicator
+
+The running state of an assistant turn: a small `TelaLoadersSquare`, a label (`Working` by default) and an elapsed counter. Show it whenever something is running. A running turn is one `TelaChatMessage`: put the indicator and anything else the wait needs (a shimmering activity line, a reasoning trace) inside it, and the message stacks them 8px apart while the conversation keeps its 16px between turns. Pass `started-at` (epoch ms) and it ticks by itself; pass `elapsed` (seconds) to drive it from the host, for example from a server-reported duration.
+
+```vue
+<script setup lang="ts">
+const startedAt = Date.now()
+</script>
+
+<template>
+    <TelaChatConversationContent>
+        <TelaChatMessage from="assistant">
+            <TelaChatWorkingIndicator :started-at="startedAt" />
+            <TelaChatTextShimmer>Processing information...</TelaChatTextShimmer>
+        </TelaChatMessage>
+    </TelaChatConversationContent>
+</template>
+```
+
+### Stop Run
+
+While a turn is running the prompt input goes away and this button takes its place, centered where the input was. Neither it nor `TelaChatPromptInput` animates on its own: wrap each in `TelaChatAnimateEnter` and swap them with `v-if` / `v-else` (keyed) inside an `<AnimatePresence mode="popLayout">` to cross-fade them in place. It carries the same `data-chat-prompt-input` marker, so `TelaChatBody` docks it at the bottom and keeps the conversation padded for it. Emits `stop`.
+
+```vue
+<script setup lang="ts">
+const running = ref(true)
+const startedAt = Date.now()
+const draft = ref('')
+
+function onInput(event: Event) {
+    draft.value = (event.target as HTMLElement).innerText
+}
+
+function send() {
+    // the editor unmounts with the input, so clear the draft it was showing
+    draft.value = ''
+    running.value = true
+}
+</script>
+
+<template>
+    <div class="flex flex-col w-full h-260px">
+        <TelaChatBody variant="page">
+            <TelaChatConversation>
+                <TelaChatConversationContent>
+                    <TelaChatMessage from="user">
+                        <TelaChatMessageContent>Consolidate these exams into a table.</TelaChatMessageContent>
+                    </TelaChatMessage>
+                    <TelaChatMessage v-if="running" from="assistant">
+                        <TelaChatWorkingIndicator :started-at="startedAt" />
+                        <TelaChatTextShimmer>Processing information...</TelaChatTextShimmer>
+                    </TelaChatMessage>
+                </TelaChatConversationContent>
+            </TelaChatConversation>
+
+            <AnimatePresence mode="popLayout" :initial="false">
+                <TelaChatAnimateEnter v-if="running" key="stop">
+                    <TelaChatStopRunButton @stop="running = false" />
+                </TelaChatAnimateEnter>
+                <TelaChatAnimateEnter v-else key="input" :scale="0.9">
+                    <TelaChatPromptInput>
+                    <TelaChatPromptInputTextarea placeholder="How can I help?" :empty="!draft" @input="onInput" @keydown.enter.exact.prevent="send" />
+                    <TelaChatPromptInputToolbar>
+                        <TelaChatPromptInputTools>
+                            <TelaChatPromptInputActionMenu>
+                                <TelaChatPromptInputActionMenuTrigger />
+                                <TelaChatPromptInputActionMenuContent>
+                                    <TelaChatPromptInputActionMenuItem icon="i-ph-paperclip">
+                                        Add files or photos
+                                    </TelaChatPromptInputActionMenuItem>
+                                </TelaChatPromptInputActionMenuContent>
+                            </TelaChatPromptInputActionMenu>
+                        </TelaChatPromptInputTools>
+                        <TelaChatPromptInputActions>
+                            <TelaChatPromptSubmitButton status="ready" :disabled="!draft.trim()" @send="send" />
+                        </TelaChatPromptInputActions>
+                    </TelaChatPromptInputToolbar>
+                    </TelaChatPromptInput>
+                </TelaChatAnimateEnter>
+            </AnimatePresence>
+        </TelaChatBody>
+    </div>
+</template>
+```
+
 ### Text Shimmer
 
 The shimmering thinking indicator. Render it while the model is generating: inside the conversation, under a reasoning trace, wherever the wait happens.
@@ -1040,6 +1134,9 @@ import { TelaChatIconsAnthropic, TelaChatIconsGemini, TelaChatIconsOpenai } from
 | `TelaChatFloatingWindowTrigger` | Pill button that opens the floating widget. |
 | `TelaChatFloatingWindow` | Anchored popover shell for the floating variant (`open` / `@update:open`). |
 | `TelaChatSidepanelWindow` | Always-open, in-flow docked column for the sidepanel variant. |
+| `TelaChatWorkingIndicator` | Running-turn row: square loader, label, elapsed time. |
+| `TelaChatStopRunButton` | Replaces the prompt input while a turn runs; centered pill that emits `stop`. |
+| `TelaChatAnimateEnter` | Enter/exit preset (fade, slide, slight scale) for a surface that comes and goes; when it wraps the prompt input or stop button the body docks the wrapper. Pair with `AnimatePresence`. |
 | `TelaChatTextShimmer` | Shimmering text, used for thinking/loading indicators. |
 | `TelaChatIconsAnthropic` / `TelaChatIconsOpenai` / `TelaChatIconsGemini` | Provider icons for model options. |
 | `TelaChatPoweredByTela` | "Powered by" + Tela wordmark footer. |
@@ -1055,8 +1152,8 @@ Shell (page container | TelaChatFloatingWindow | TelaChatSidepanelWindow)
     ├── TelaChatConversation
     │   └── TelaChatConversationContent
     │       ├── TelaChatMessage → TelaChatMessageContent
-    │       └── TelaChatTextShimmer     (while generating)
-    └── TelaChatPromptInput
+    │       └── TelaChatWorkingIndicator (while generating)
+    └── TelaChatPromptInput           (TelaChatStopRunButton while a turn runs)
         ├── TelaChatPromptInputAttachments
         ├── TelaChatPromptInputTextarea
         └── TelaChatPromptInputToolbar
@@ -1309,6 +1406,37 @@ type FloatingWindowProps = {
 // TelaChatSidepanelWindow takes no props.
 ```
 
+### Working Indicator
+
+```typescript
+type WorkingIndicatorProps = {
+  class?: HTMLAttributes['class']
+  label?: string     // default: 'Working'
+  startedAt?: number // epoch ms; the counter ticks every second from it
+  elapsed?: number   // seconds; host-controlled, wins over startedAt
+}
+```
+
+### Animate Enter
+
+```typescript
+type AnimateEnterProps = {
+  offset?: string | number // default: '100%' (slide distance)
+  scale?: number           // default: 0.97; the input reads better at 0.9, the pill at the default
+  duration?: number        // default: 0.16 (seconds)
+}
+```
+
+### Stop Run
+
+```typescript
+type StopRunButtonProps = {
+  class?: HTMLAttributes['class']
+  label?: string    // default: 'Stop Run'
+  disabled?: boolean
+}
+```
+
 ### Text Shimmer
 
 ```typescript
@@ -1325,7 +1453,7 @@ type TextShimmerProps = {
 - `TelaChatSidepanelWindow`: `default`.
 - `TelaChatWidgetHeader`: `history` (rendered only while the history panel is open).
 - `TelaChatWidgetCard`: `subtitle`, `default` (tool output).
-- `TelaChatBody` / `TelaChatConversation` / `TelaChatConversationContent` / `TelaChatMessage` / `TelaChatMessageContent` / `TelaChatPromptInput` / `TelaChatPromptInputToolbar` / `TelaChatPromptInputTools` / `TelaChatPromptInputActions` / `TelaChatPromptInputAttachments` / `TelaChatReasoningStep` / `TelaChatWidgetSources`: `default`.
+- `TelaChatBody` / `TelaChatConversation` / `TelaChatConversationContent` / `TelaChatMessage` / `TelaChatMessageContent` / `TelaChatPromptInput` / `TelaChatPromptInputToolbar` / `TelaChatPromptInputTools` / `TelaChatPromptInputActions` / `TelaChatPromptInputAttachments` / `TelaChatReasoningStep` / `TelaChatWidgetSources` / `TelaChatAnimateEnter`: `default`.
 
 ```vue
 <TelaChatConversation scroll-area>

package/components/tela/chat/floating/floating-window.vue

@@ -200,7 +200,7 @@ function focusEditor(event: Event) {
 
 <template>
     <TelaPopover :open="open" @update:open="emit('update:open', $event)">
-        <div ref="launcher" :class="cn('bottom-20px', contained ? 'absolute right-16px' : 'fixed right-[calc(16px+var(--scrollbar-width,0px))]')">
+        <div ref="launcher" :class="cn('bottom-16px', contained ? 'absolute right-16px' : 'fixed right-[calc(16px+var(--scrollbar-width,0px))]')">
             <div :class="cn('transition-opacity', open ? 'opacity-0 duration-100' : 'duration-160 delay-160')">
                 <TelaPopoverTrigger as-child>
                     <slot name="launcher">

package/components/tela/chat/message/message.vue

@@ -9,7 +9,7 @@ const resolvedAlign = computed(() => props.align ?? (props.from === 'user' ? 'en
 </script>
 
 <template>
-    <div flex="~ col" :class="resolvedAlign === 'end' ? 'items-end' : 'items-start'">
+    <div flex="~ col" gap-8px :class="resolvedAlign === 'end' ? 'items-end' : 'items-start'">
         <slot />
     </div>
 </template>

package/components/tela/chat/prompt-input/prompt-input.vue

@@ -41,15 +41,10 @@ function focusEditor(event: MouseEvent) {
     <div
         ref="rootRef"
         data-chat-prompt-input
-        flex="~ col"
-        gap-8px
-        pl-16px pb-8px pr-8px
-        rounded-12px
-        bg border-0.5px border-strong
-        overflow-hidden
-        relative
-        transition
-        :class="locked ? 'bg-muted cursor-not-allowed' : 'cursor-text'"
+        :class="cn(
+            'flex flex-col gap-8px pl-16px pb-8px pr-8px rounded-12px bg border-[0.5px] border-strong overflow-hidden relative transition',
+            locked ? 'bg-muted cursor-not-allowed' : 'cursor-text',
+        )"
         @mousedown="focusEditor"
     >
         <div class="contents" :inert="locked">

package/components/tela/loaders/splash-screen/splash-screen.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Loaders/Splash Screen" />
+
+# TelaLoadersSplashScreen
+
+Full-viewport white overlay shown while the app boots. It centers a `TelaLoadersSquare` and, when `modelValue` turns false, wipes the loader with a diagonal mask and fades the overlay out before emitting `hidden`. Mount it once at the app root and flip the flag when the first page is ready.
+
+## Props
+
+```typescript
+type SplashScreenProps = {
+  modelValue: boolean // true while the app is loading
+}
+```
+
+## Emits
+
+| event | payload | when |
+|---|---|---|
+| `update:modelValue` | `false` | the exit animation has finished |
+| `hidden` | — | same moment, for side effects such as starting a welcome screen |
+
+## Basic Usage
+
+The overlay keeps rendering during the exit animation, so it is safe to set `modelValue` to `false` as soon as data is ready.
+
+```vue
+<script setup lang="ts">
+const isLoading = ref(true)
+
+onMounted(() => {
+  isLoading.value = false
+})
+</script>
+
+<template>
+  <TelaLoadersSplashScreen v-model="isLoading" />
+</template>
+```
+
+## Rules
+
+1. **One per app.** The overlay is `fixed`, full-viewport and `z-9999`; render it from the root layout, not from pages.
+2. **Do not restyle the loader.** The wipe targets the loader's `#square` id; wrap or replace the whole component instead of overriding it.

package/components/tela/loaders/{splash-screen.vue → splash-screen/splash-screen.vue}

@@ -48,27 +48,6 @@ watch(() => props.modelValue, (visible) => {
         id="square-screen"
         fixed w-100dvw h-100dvh inset-0 z-9999 flex items-center justify-center bg-white
     >
-        <div id="square" relative border-4 border="#9CA1A9" bg-white w-8 h-8>
-            <div
-                absolute border-4 border-transparent inset="-1"
-                class="[mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]"
-            >
-                <Motion
-                    absolute aspect-square bg-black h-4
-                    :animate="{
-                        offsetDistance: ['0%', '100%'],
-                    }"
-                    :style="{
-                        width: 40,
-                        offsetPath: 'rect(0 auto auto 0)',
-                    }"
-                    :transition="{
-                        repeat: Number.POSITIVE_INFINITY,
-                        duration: 0.8,
-                        ease: 'easeInOut',
-                    }"
-                />
-            </div>
-        </div>
+        <TelaLoadersSquare id="square" size="md" />
     </div>
 </template>

package/components/tela/loaders/square/square.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Loaders/Square" tags={['new']} />
+
+# TelaLoadersSquare
+
+The Tela square loader: a bar orbiting inside a bordered square. It is the animation behind `TelaLoadersSplashScreen` and the chat working indicator.
+
+## Props
+
+```typescript
+type SquareLoaderProps = {
+  size?: 'sm' | 'md' // default: 'md'
+}
+```
+
+## Basic Usage
+
+Renders the 32×32 loader.
+
+```vue
+<TelaLoadersSquare />
+```
+
+## Variants
+
+### Sizes
+
+`md` is 32×32 with a 4px border; `sm` is 12×12 with a 2px border, for inline states next to text.
+
+```vue
+<div class="flex items-center gap-4">
+  <TelaLoadersSquare size="sm" />
+  <TelaLoadersSquare size="md" />
+</div>
+```
+
+### Section loading
+
+Center it in the area that is loading, with an optional label below.
+
+```vue
+<div class="flex flex-col items-center justify-center gap-4 py-12">
+  <TelaLoadersSquare />
+  <p class="body-14-regular text-secondary">Loading…</p>
+</div>
+```

package/components/tela/loaders/square/square.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+    size?: 'sm' | 'md'
+}>(), { size: 'md' })
+
+const sizes = {
+    sm: { box: 'w-3 h-3 border-2', mask: 'border-2 -inset-0.5' },
+    md: { box: 'w-8 h-8 border-4', mask: 'border-4 -inset-1' },
+} as const
+
+const current = computed(() => sizes[props.size])
+const barColor = DT.colors.icon.DEFAULT
+</script>
+
+<template>
+    <div class="relative border-icon-subtle bg-white" :class="current.box">
+        <div
+            :class="cn(
+                'absolute border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]',
+                current.mask,
+            )"
+        >
+            <div
+                data-square-loader-bar
+                class="absolute -inset-1/2"
+                :style="{ '--bar-color': barColor }"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+[data-square-loader-bar] {
+    background: conic-gradient(from 0deg, var(--bar-color) 0 90deg, transparent 90deg 360deg);
+    animation: square-loader-bar 0.8s ease-in-out infinite;
+    will-change: transform;
+}
+
+@keyframes square-loader-bar {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    [data-square-loader-bar] {
+        animation-duration: 2.4s;
+        animation-timing-function: linear;
+    }
+}
+</style>

package/components/tela/loaders/welcome-screen/welcome-screen.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Loaders/Welcome Screen" />
+
+# TelaLoadersWelcomeScreen
+
+Full-viewport greeting shown once after the splash screen. It waits `delayAfterTrigger` after `trigger` turns true, reveals `text` with `TelaTextMaskAnimation` (optionally highlighting one word), then wipes the text and fades out before emitting `hidden`.
+
+## Props
+
+```typescript
+type WelcomeScreenProps = {
+  modelValue: boolean       // true while the screen should be shown
+  text: string              // greeting to animate
+  highlightWord?: string    // word inside `text` to emphasize
+  trigger: boolean          // starts the text animation when true
+  delayAfterTrigger?: number // ms to wait after `trigger`, default: 2700
+}
+```
+
+## Emits
+
+| event | payload | when |
+|---|---|---|
+| `update:modelValue` | `false` | the exit animation has finished |
+| `hidden` | — | same moment |
+
+## Basic Usage
+
+Chain it after the splash screen by using the inverse of the splash flag as `trigger`, so the greeting starts once the loader is gone.
+
+```vue
+<script setup lang="ts">
+const isLoading = ref(true)
+const showWelcome = ref(true)
+const firstName = 'Ana'
+</script>
+
+<template>
+  <TelaLoadersSplashScreen v-model="isLoading" />
+  <TelaLoadersWelcomeScreen
+    v-model="showWelcome"
+    :text="`Welcome to Tela, ${firstName}.`"
+    :highlight-word="firstName"
+    :trigger="!isLoading"
+  />
+</template>
+```
+
+## Rules
+
+1. **Show it once.** Persist that the user has seen it; do not replay on every navigation.
+2. **Keep `text` short.** It renders as a single centered line; long greetings wrap awkwardly on narrow viewports.
+3. **`highlightWord` must appear in `text`.** Otherwise nothing is emphasized.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.71.0",
+    "version": "1.72.0",
     "type": "module",
     "files": [
         "app.config.ts",