@meistrari/tela-build 1.70.5 → 1.72.0

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+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
+
+- **Morph open/close.** `TelaChatFloatingWindow` now opens over its own launcher instead of above it. The surface springs out of the launcher's box and shrinks back into it on close, while the conversation is revealed in place. The launcher fades out while the window is open. See [Chat → Floating](/templates/chat#floating).
+- **Expand.** The widget header shows an expand toggle inside the floating window. It grows the window until 8px from the top of the viewport; toggling again restores the default height.
+- **Minimize.** The widget header shows a minus button inside the floating window that closes it. `TelaChatWidgetHeader` also emits `close`.
+- **No layout shift on close.** The page scroll lock is released only after the exit animation has finished, so the returning scrollbar no longer shifts the window mid-animation.
+- **Expanded input fix.** The conversation body is sized from the popover's rendered height, so the prompt input is no longer clipped when the window is expanded.
+
+### Chat: Widget header
+
+- New props on `TelaChatWidgetHeader`: `expandable`, `expanded`, and `closable` render the expand and minimize actions outside a floating window; `expandLabel`, `collapseLabel`, and `closeLabel` set their accessible names.
+- New emits: `toggleExpanded` and `close`. Inside `TelaChatFloatingWindow` the header drives the window directly and the emits still fire. See [Chat → Widget Header & History](/templates/chat#widget-header--history).

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-widget-header.vue

@@ -1,21 +1,53 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
+import { floatingWindowContextKey } from './floating/floating-window-context'
+
+const props = withDefaults(defineProps<{
     title?: string
+    /** Show the expand toggle outside a floating window (inside one it is always shown). */
+    expandable?: boolean
+    /** Expanded state for the standalone toggle; ignored inside a floating window. */
+    expanded?: boolean
+    /** Show the minimize button outside a floating window (inside one it is always shown). */
+    closable?: boolean
     newConversationLabel?: string
     historyLabel?: string
+    expandLabel?: string
+    collapseLabel?: string
+    closeLabel?: string
 }>(), {
     newConversationLabel: 'New conversation',
     historyLabel: 'Conversation history',
+    expandLabel: 'Expand',
+    collapseLabel: 'Collapse',
+    closeLabel: 'Close',
 })
 
 const emit = defineEmits<{
     (e: 'newConversation'): void
     (e: 'selectConversation', id: string): void
+    (e: 'close'): void
+    (e: 'toggleExpanded'): void
 }>()
 
+const floatingWindow = inject(floatingWindowContextKey, null)
+
+const showExpand = computed(() => Boolean(floatingWindow) || props.expandable)
+const showClose = computed(() => Boolean(floatingWindow) || props.closable)
+const isExpanded = computed(() => floatingWindow ? floatingWindow.expanded.value : props.expanded)
+
 const historyOpen = ref(false)
 const historySelection = ref('')
 
+function close() {
+    emit('close')
+    floatingWindow?.close()
+}
+
+function toggleExpanded() {
+    emit('toggleExpanded')
+    floatingWindow?.toggleExpanded()
+}
+
 function selectConversation(id: unknown) {
     if (typeof id !== 'string' || !id)
         return
@@ -77,6 +109,22 @@ function selectConversation(id: unknown) {
                     <slot v-if="historyOpen" name="history" />
                 </TelaComboboxList>
             </TelaComboboxRoot>
+            <TelaIconButton
+                v-if="showExpand"
+                :icon="isExpanded ? 'i-ph-arrows-in-simple' : 'i-ph-arrows-out-simple'"
+                size="sm"
+                color="secondary"
+                :aria-label="isExpanded ? collapseLabel : expandLabel"
+                @click.stop.prevent="toggleExpanded"
+            />
+            <TelaIconButton
+                v-if="showClose"
+                icon="i-ph-minus"
+                size="sm"
+                color="secondary"
+                :aria-label="closeLabel"
+                @click.stop.prevent="close"
+            />
         </div>
     </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>
@@ -136,6 +145,10 @@ function send() {
 
 A launcher pill fixed to the bottom-right corner opens the chat in an anchored popover. The host controls `open`. While the window is open, page scroll is blocked.
 
+The window opens over its own launcher: the surface springs out of the launcher's box (and shrinks back into it on close) while the conversation is revealed in place, pinned to the shared bottom-right corner. The launcher fades out while the window is open and returns as the surface settles. The scroll lock is released only after the exit finishes, so the scrollbar coming back never shifts the window mid-animation.
+
+The widget header inside the window gets two extra actions automatically: **expand** grows the window until 8px from the top of the viewport (and back), and **minimize** closes it. See [Widget Header & History](#widget-header--history).
+
 ```vue
 <script setup lang="ts">
 import { getMimeTypeIcon } from '@meistrari/tela-build/utils/files'
@@ -904,7 +917,7 @@ const statusLabel = computed(() => {
 
 ### Widget Header & History
 
-`TelaChatWidgetHeader` is the widget top bar: optional title, new-conversation and history actions, close. `TelaChatWidgetHistoryList` fills its `#history` slot with a searchable conversation list. It must stay inside that slot, since the header owns the surrounding `TelaComboboxRoot` that emits the selection.
+`TelaChatWidgetHeader` is the widget top bar: optional title, new-conversation and history actions, plus expand and minimize. Inside `TelaChatFloatingWindow` the expand and minimize buttons render automatically and drive the window; elsewhere opt in with `expandable` / `closable` and handle `toggleExpanded` / `close` yourself. `TelaChatWidgetHistoryList` fills its `#history` slot with a searchable conversation list. It must stay inside that slot, since the header owns the surrounding `TelaComboboxRoot` that emits the selection.
 
 Click the clock icon to open the history panel.
 
@@ -917,12 +930,17 @@ const conversations = [
     { id: 'c4', title: 'Reasoning trace rendering' },
 ]
 const selected = ref('c1')
+const expanded = ref(false)
 </script>
 
 <template>
     <TelaChatWidgetHeader
         title="Release notes review"
-        class="w-300px"
+        class="w-360px"
+        expandable
+        closable
+        :expanded="expanded"
+        @toggle-expanded="expanded = !expanded"
         @select-conversation="selected = $event"
     >
         <template #history>
@@ -963,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.
@@ -1026,11 +1129,14 @@ import { TelaChatIconsAnthropic, TelaChatIconsGemini, TelaChatIconsOpenai } from
 | `TelaChatReasoningStep` | Collapsible reasoning/tool step row with status icon. |
 | `TelaChatWidgetCard` | Card shell for tool-call widgets (title, icon, `TelaStatus`). |
 | `TelaChatWidgetSources` / `TelaChatWidgetSource` | Reference rows cited by a tool widget (icon, title, domain, optional link). |
-| `TelaChatWidgetHeader` | Widget top bar: optional title, new-conversation and history actions, close. Marked with `data-widget-header`. |
+| `TelaChatWidgetHeader` | Widget top bar: optional title, new-conversation and history actions, plus expand and minimize (floating shell only). Marked with `data-widget-header`. |
 | `TelaChatWidgetHistoryList` | Searchable conversation list for the header's `#history` slot. |
 | `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. |
@@ -1046,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
@@ -1265,8 +1371,17 @@ type WidgetSourceProps = {
 ```typescript
 type WidgetHeaderProps = {
   title?: string
+  expandable?: boolean          // show the expand toggle outside a floating window
+  expanded?: boolean            // standalone toggle state; ignored inside a floating window
+  closable?: boolean            // show the minimize button outside a floating window
+  newConversationLabel?: string // default: 'New conversation'
+  historyLabel?: string         // default: 'Conversation history'
+  expandLabel?: string          // default: 'Expand'
+  collapseLabel?: string        // default: 'Collapse'
+  closeLabel?: string           // default: 'Close'
 }
-// emits: newConversation, selectConversation(id: string), close
+// Inside TelaChatFloatingWindow the header also renders an expand toggle that grows the window up to 8px from the top of the viewport, and a minus button that closes the window (emits `close` and sets `open` to false).
+// emits: newConversation, selectConversation(id: string), toggleExpanded, close
 
 type WidgetHistoryListProps = {
   items: { id: string, title: string }[]
@@ -1291,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
@@ -1307,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-context.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type FloatingWindowContext = {
+    expanded: Ref<boolean>
+    toggleExpanded: () => void
+    close: () => void
+}
+
+export const floatingWindowContextKey: InjectionKey<FloatingWindowContext> = Symbol('tela-chat-floating-window')

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { floatingWindowContextKey } from './floating-window-context'
+
 const props = defineProps<{
     open: boolean
     /** Anchors the launcher to the nearest positioned ancestor instead of the viewport (docs/embedded previews). */
@@ -11,6 +13,88 @@ const emit = defineEmits<{
     (e: 'update:open', value: boolean): void
 }>()
 
+const expanded = ref(false)
+const launcher = ref<HTMLElement | null>(null)
+const launcherWidth = ref(0)
+const launcherHeight = ref(0)
+const sideOffset = computed(() => -launcherHeight.value)
+
+const morphTransition = { type: 'spring', stiffness: 420, damping: 42, mass: 1 } as const
+
+const exitTransition = { type: 'spring', stiffness: 360, damping: 36, mass: 1 } as const
+
+const launcherBox = computed(() => launcherWidth.value && launcherHeight.value
+    ? { width: launcherWidth.value, height: launcherHeight.value, borderRadius: 8 }
+    : { width: '100%', height: '100%', borderRadius: 12 })
+
+const shellProbe = ref<HTMLElement | null>(null)
+
+const shellEl = computed(() => shellProbe.value?.parentElement ?? null)
+
+const shellHeight = ref(0)
+
+let shellObserver: ResizeObserver | undefined
+
+watch(shellEl, (el) => {
+    shellObserver?.disconnect()
+    shellObserver = undefined
+
+    if (!el)
+        return
+
+    shellHeight.value = el.offsetHeight
+    shellObserver = new ResizeObserver(() => {
+        shellHeight.value = el.offsetHeight
+    })
+    shellObserver.observe(el)
+}, { flush: 'post' })
+
+onBeforeUnmount(() => {
+    shellObserver?.disconnect()
+})
+
+const contentEnterScale = 1
+const contentExitScale = 0.94
+
+const surfaceAnimate = computed(() => props.open
+    ? { width: '100%', height: '100%', borderRadius: 12, opacity: 1 }
+    : { ...launcherBox.value, opacity: 0 })
+const surfaceTransition = computed(() => props.open
+    ? morphTransition
+    : { ...exitTransition, opacity: { duration: 0.16, delay: 0.16 } })
+const contentInitial = { scale: contentEnterScale, opacity: 0 }
+const contentAnimate = computed(() => props.open
+    ? { scale: 1, opacity: 1 }
+    : { scale: contentExitScale, opacity: 0 })
+const contentTransition = computed(() => props.open
+    ? { ...morphTransition, opacity: { duration: 0.16 } }
+    : { ...exitTransition, opacity: { duration: 0.14, delay: 0.08 } })
+
+function measureLauncher() {
+    launcherWidth.value = launcher.value?.offsetWidth ?? 0
+    launcherHeight.value = launcher.value?.offsetHeight ?? 0
+}
+
+watch(() => props.open, (open) => {
+    if (open)
+        measureLauncher()
+})
+
+onMounted(() => {
+    if (props.open)
+        measureLauncher()
+})
+
+provide(floatingWindowContextKey, {
+    expanded,
+    toggleExpanded: () => {
+        expanded.value = !expanded.value
+    },
+    close: () => {
+        emit('update:open', false)
+    },
+})
+
 let previousOverflow = ''
 let previousPaddingRight = ''
 let hasScrollLock = false
@@ -42,17 +126,27 @@ function unlockScroll() {
     hasScrollLock = false
 }
 
+const exitHoldMs = 380
+
+let unlockTimer: ReturnType<typeof setTimeout> | undefined
+
 watch(() => props.open, (open) => {
     if (typeof document === 'undefined')
         return
 
-    if (open)
+    clearTimeout(unlockTimer)
+
+    if (open) {
         lockScroll()
-    else
-        unlockScroll()
+
+        return
+    }
+
+    unlockTimer = setTimeout(unlockScroll, exitHoldMs)
 }, { immediate: true })
 
 onBeforeUnmount(() => {
+    clearTimeout(unlockTimer)
     unlockScroll()
 })
 
@@ -106,33 +200,62 @@ function focusEditor(event: Event) {
 
 <template>
     <TelaPopover :open="open" @update:open="emit('update:open', $event)">
-        <div :class="cn('bottom-20px', contained ? 'absolute right-20px' : 'fixed right-[calc(20px+var(--scrollbar-width,0px))]')">
-            <TelaPopoverTrigger as-child>
-                <!-- A custom launcher must be exactly one element/component. -->
-                <slot name="launcher">
-                    <TelaChatFloatingWindowTrigger :open="open" :label="triggerLabel" />
-                </slot>
-            </TelaPopoverTrigger>
+        <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">
+                        <TelaChatFloatingWindowTrigger :open="open" :label="triggerLabel" />
+                    </slot>
+                </TelaPopoverTrigger>
+            </div>
         </div>
         <TelaPopoverContent
             side="top"
             align="end"
-            :side-offset="8"
+            :side-offset="sideOffset"
             :class="cn(
-                'widget-popover bg flex-1 min-h-0 w-[min(480px,calc(100vw-32px))] h-[min(512px,calc(100dvh-120px))] p-0 z-40! popover-enter-exit',
-                'overflow-hidden rounded-12px! border-black/12! flex flex-col [box-shadow:-24px_-24px_249px_0_rgba(0,0,0,0.08),-12px_-8px_48px_0_rgba(0,0,0,0.03)]!',
+                'widget-popover relative w-[min(480px,calc(100vw-32px))] p-0 z-40! transition-[height] duration-200 ease-out',
+                expanded
+                    ? 'h-[calc(var(--reka-popover-content-available-height)-16px)]'
+                    : 'h-[min(512px,calc(100dvh-120px))]',
+                'bg-transparent! border-0! shadow-none! rounded-none! overflow-visible!',
             )"
             @open-auto-focus="focusEditor"
             @interact-outside="handleInteractOutside"
             @focus-outside.prevent
         >
-            <slot />
+            <div ref="shellProbe" hidden />
+            <Motion
+                :initial="launcherBox"
+                :animate="surfaceAnimate"
+                :transition="surfaceTransition"
+                class="absolute bottom-0 right-0 w-full h-full overflow-hidden bg rounded-12px border-0.5px border-black/12 [box-shadow:-24px_-24px_249px_0_rgba(0,0,0,0.08),-12px_-8px_48px_0_rgba(0,0,0,0.03)]"
+            >
+                <Motion
+                    :initial="contentInitial"
+                    :animate="contentAnimate"
+                    :transition="contentTransition"
+                    :style="{ originX: 1, originY: 1, height: shellHeight ? `${shellHeight}px` : '100%' }"
+                    class="absolute bottom-0 right-0 w-[min(480px,calc(100vw-32px))] flex flex-col"
+                >
+                    <slot />
+                </Motion>
+            </Motion>
         </TelaPopoverContent>
     </TelaPopover>
 </template>
 
 <style>
-.widget-popover {
-  transform-origin: var(--reka-popover-content-transform-origin);
+.widget-popover.widget-popover[data-state='open'] {
+  animation: none;
+}
+
+.widget-popover.widget-popover[data-state='closed'] {
+  animation: widgetShellHoldOut 0.38s linear both;
+}
+
+@keyframes widgetShellHoldOut {
+  from { opacity: 1; }
+  to { opacity: 1; }
 }
 </style>

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

@@ -13,13 +13,13 @@ withDefaults(defineProps<{
         max-w-prose
         flex="~ col"
         gap-8px
-        px-12px py-10px
+        px-12px py-10px text-start
         bg-muted text-primary
         rounded-12px
     >
         <slot />
     </div>
-    <div v-else max-w-prose py-4px text-primary>
+    <div v-else max-w-prose py-4px text-primary text-start>
         <slot />
     </div>
 </template>

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,9 +1,10 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.70.5",
+    "version": "1.72.0",
     "type": "module",
     "files": [
         "app.config.ts",
+        "CHANGELOG.md",
         "components",
         "components.json",
         "composables",