@meistrari/tela-build 1.70.4 → 1.71.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+Latest updates and announcements.
+
+## 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/card/card.vue

@@ -19,7 +19,7 @@ const sizeStyles = computed(() => (({
     md: { padding: 'p-32px' },
 }) as Record<string, { padding: string }>)[props.size ?? 'sm'] ?? { padding: '' })
 
-const paddingClass = computed(() => props.contentPadding ?? sizeStyles.value.padding)
+const paddingClass = computed(() => (props.contentPadding === false ? undefined : props.contentPadding) ?? sizeStyles.value.padding)
 const rootEl = ref<HTMLElement | null>(null)
 
 defineExpose({

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.mdx

@@ -136,6 +136,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 +908,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 +921,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>
@@ -1026,7 +1035,7 @@ 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`). |
@@ -1265,8 +1274,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 }[]

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-20px', 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/package.json

@@ -1,9 +1,10 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.70.4",
+    "version": "1.71.0",
     "type": "module",
     "files": [
         "app.config.ts",
+        "CHANGELOG.md",
         "components",
         "components.json",
         "composables",