Morph Surface

A dock that opens a dialog is two objects: the thing you pressed and the thing that appeared somewhere else, leaving the eye to re-find the content. A surface that grows out of the dock removes that step - the pill widens into the panel, the orb slides into the header, and the editor is exactly where the trigger was.

The morph is a layout animation rather than a width and height tween. Motion measures both states and interpolates the box, so the radius, the padding and the children all move as one object instead of three properties racing each other.

The root reserves the open panel's 360 × 200 footprint, which means opening grows upward instead of pushing the rest of the page down. A composer that shoves the conversation down as you focus it is worse than a modal that covers it.

Usage

submit carries the trimmed text and the surface closes itself, so the parent only has to decide what to do with the value.

<template>
  <div class="flex w-full flex-col items-center gap-3">
    <MMorphSurface @submit="onSubmit" />

    <p class="h-4 text-xs text-muted">
      {{ last === '' ? 'Click the dock, then press ⌘↵ or Ctrl↵.' : `Sent: ${last}` }}
    </p>
  </div>
</template>

<script setup lang="ts">
const last = ref('')

function onSubmit(value: string) {
  last.value = value
}
</script>

Customize

Props

Events

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.morphSurface in app.config.ts.

Accessibility

• The collapsed dock is a real <button type="button">, so the surface is reachable by Tab and announced as a button rather than as a decorated <div>.
• The panel is a <form>, so the submit control is a real submit button and Enter in the textarea inserts a newline instead of firing a half-written message.
• Opening moves focus into the textarea on the next tick. Escape closes and returns focus to the dock, so a keyboard user is never left on an element that no longer exists.
• ⌘↵ and Ctrl↵ submit. The shortcut is printed in the header so it is discoverable, and the hint is aria-hidden because two key glyphs read poorly; assistive technology users still get the working shortcut and the submit button.
• The textarea takes its accessible name from placeholder. Pass a label-shaped string, or override the textarea slot with a labelled element.
• The submit button is disabled until the draft has non-whitespace content, so the disabled state always means "nothing to send" rather than "not allowed".
• An outside click closes the surface, listened for in the capture phase, so it still collapses when the click lands on an element that stops propagation. Focus is not pulled back to the dock in that case: the user clicked something else on purpose.
• Under prefers-reduced-motion: reduce layout is switched off and the radius transition drops to zero duration, so the surface swaps between the two sizes instantly.

Performance

• One layout animation per open and close, measured once per state. There is no width/height keyframe pair to keep in sync with the theme.
• The panel is v-if-ed, so the closed dock does not keep a form, a textarea and an actions row in the DOM.
• The document pointerdown listener is registered once on mount and removed on unmount. No listener churn per open.
• The footprint is fixed by the theme instead of measured from the panel, so opening never forces a layout read of the page.
• The radius is animated alongside layout because both are read from the same measurement pass; nothing else animates during the morph.