@redseed/redseed-ui-vue3 8.52.0 → 8.53.0

package/index.js

@@ -25,6 +25,7 @@ export * from './src/components/GridContainer'
 export * from './src/components/HTML'
 export * from './src/components/Icon'
 export * from './src/components/Image'
+export * from './src/components/InlineEditableText'
 export * from './src/components/Layout'
 export * from './src/components/Link'
 export * from './src/components/LinkedList'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.52.0",
+    "version": "8.53.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/CardGroup/CardGroup.vue

@@ -80,7 +80,11 @@ const emit = defineEmits([
     'reorder'
 ])
 
-// Drag and drop
+// Drag and drop.
+// Two engines cooperate by input type and share the state + classes below:
+//   mouse     -> native HTML5 DnD (draggable attr + drag* handlers on the container)
+//   touch/pen -> Pointer Events engine (see onHandlePointerDown and friends)
+// A single gesture is only ever handled by one engine, so they never collide.
 const dragFromIndex = ref(null)
 let dragOverChild = null
 let childObserver = null
@@ -125,7 +129,18 @@ function getChildIndex(el) {
     return Array.from(cardsContainerElement.value.children).indexOf(child)
 }
 
+// True while a touch/pen pointer drag owns the shared drag state (dragFromIndex /
+// dragOverChild). The native mouse engine must bail out of EVERY handler when this
+// holds: returning from a dragstart listener does not cancel the browser's native
+// drag (only preventDefault would), so dragover/dragleave/drop/dragend still fire on
+// a hybrid device (finger on one handle, mouse on another) and would otherwise emit a
+// reorder mixing the touch source with the mouse target.
+function pointerDragOwnsState() {
+    return activePointerId !== null
+}
+
 function onHandleMouseDown(e) {
+    if (pointerDragOwnsState()) return
     const child = getCardChild(e.target)
     if (child) {
         child.setAttribute('draggable', 'true')
@@ -142,7 +157,7 @@ function onHandleMouseUp(e) {
 }
 
 function onDragStart(e) {
-    if (!props.reorderable) return
+    if (!props.reorderable || pointerDragOwnsState()) return
     const index = getChildIndex(e.target)
     if (index === -1) return
     dragFromIndex.value = index
@@ -152,7 +167,7 @@ function onDragStart(e) {
 }
 
 function onDragOver(e) {
-    if (!props.reorderable || dragFromIndex.value === null) return
+    if (!props.reorderable || pointerDragOwnsState() || dragFromIndex.value === null) return
     e.preventDefault()
     e.dataTransfer.dropEffect = 'move'
     const child = getCardChild(e.target)
@@ -167,7 +182,7 @@ function onDragOver(e) {
 }
 
 function onDragLeave(e) {
-    if (!props.reorderable) return
+    if (!props.reorderable || pointerDragOwnsState()) return
     const child = getCardChild(e.target)
     if (child && !child.contains(e.relatedTarget)) {
         child.classList.remove('rsui-card-group__card--drag-over')
@@ -175,7 +190,7 @@ function onDragLeave(e) {
 }
 
 function onDrop(e) {
-    if (!props.reorderable) return
+    if (!props.reorderable || pointerDragOwnsState()) return
     e.preventDefault()
     const toIndex = getChildIndex(e.target)
     if (toIndex !== -1 && dragFromIndex.value !== null && dragFromIndex.value !== toIndex) {
@@ -185,12 +200,237 @@ function onDrop(e) {
 }
 
 function onDragEnd() {
+    if (pointerDragOwnsState()) return
     cleanupDragState()
 }
 
+// Pointer-driven drag engine — TOUCH and PEN only. Mouse is deliberately left to
+// the native HTML5 DnD path above: browsers give mouse users a real drag image and
+// drop semantics for free, but they never START native DnD from a touch gesture, so
+// the handle was inert on touch (#238). onHandlePointerDown early-returns for mouse
+// before any preventDefault/setPointerCapture — either would cancel the browser's
+// native dragstart — so a single gesture is only ever handled by one engine. On a
+// touch/pen press we setPointerCapture, which routes every later move/up for that
+// pointer back to the handle; because capture makes e.target always the handle,
+// elementFromPoint (not e.target) resolves the card under the pointer.
+const DRAG_THRESHOLD_PX = 4
+
+// Native DnD auto-scrolls a long list for mouse users near the viewport edge for
+// free; the pointer engine has to do it by hand, or a touch user can only reorder
+// within the cards already on screen (e.g. can't move item 1 to item 12 in a long
+// meeting agenda). While a touch/pen drag is near an edge we scroll the nearest
+// scrollable ancestor (or the window) each frame and re-run the hit-test, since the
+// finger is stationary while content moves under it.
+const AUTO_SCROLL_ZONE_PX = 64
+const AUTO_SCROLL_MAX_SPEED_PX = 14
+
+let activePointerId = null
+let capturedHandle = null
+let dragStartX = 0
+let dragStartY = 0
+let hasDragMoved = false
+let lastPointerX = 0
+let lastPointerY = 0
+let scrollContainer = null
+let autoScrollVelocity = 0
+let autoScrollFrame = null
+
+function getChildFromPoint(x, y) {
+    return getCardChild(document.elementFromPoint(x, y))
+}
+
+// Resolve and highlight the drop target under a viewport point. Shared by
+// pointermove and the auto-scroll frame. Moving off any droppable card (or back
+// onto the source) clears the highlight, mirroring native dragleave.
+function updateDropTarget(x, y) {
+    const child = getChildFromPoint(x, y)
+    const index = child ? Array.from(cardsContainerElement.value.children).indexOf(child) : -1
+    if (index === -1 || index === dragFromIndex.value) {
+        if (dragOverChild) {
+            dragOverChild.classList.remove('rsui-card-group__card--drag-over')
+            dragOverChild = null
+        }
+        return
+    }
+    if (dragOverChild && dragOverChild !== child) {
+        dragOverChild.classList.remove('rsui-card-group__card--drag-over')
+    }
+    child.classList.add('rsui-card-group__card--drag-over')
+    dragOverChild = child
+}
+
+// Nearest scrollable ancestor of the cards, or null to scroll the window.
+function findScrollContainer(el) {
+    let node = el?.parentElement
+    while (node && node !== document.body && node !== document.documentElement) {
+        const { overflowY } = window.getComputedStyle(node)
+        // Only a genuinely scrollable box qualifies as the scroll target.
+        if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+            return node
+        }
+        node = node.parentElement
+    }
+    return null
+}
+
+function updateAutoScroll(clientY) {
+    // Edges come from the scroll container's box, or the viewport when scrolling
+    // the window.
+    const top = scrollContainer ? scrollContainer.getBoundingClientRect().top : 0
+    const bottom = scrollContainer ? scrollContainer.getBoundingClientRect().bottom : window.innerHeight
+
+    let velocity = 0
+    if (clientY < top + AUTO_SCROLL_ZONE_PX) {
+        const depth = Math.min(1, (top + AUTO_SCROLL_ZONE_PX - clientY) / AUTO_SCROLL_ZONE_PX)
+        velocity = -Math.ceil(depth * AUTO_SCROLL_MAX_SPEED_PX)
+    } else if (clientY > bottom - AUTO_SCROLL_ZONE_PX) {
+        const depth = Math.min(1, (clientY - (bottom - AUTO_SCROLL_ZONE_PX)) / AUTO_SCROLL_ZONE_PX)
+        velocity = Math.ceil(depth * AUTO_SCROLL_MAX_SPEED_PX)
+    }
+
+    autoScrollVelocity = velocity
+    if (velocity !== 0) {
+        startAutoScroll()
+    } else {
+        stopAutoScroll()
+    }
+}
+
+function startAutoScroll() {
+    if (autoScrollFrame !== null) return
+    const step = () => {
+        if (autoScrollVelocity === 0 || dragFromIndex.value === null) {
+            autoScrollFrame = null
+            return
+        }
+        if (scrollContainer) {
+            scrollContainer.scrollTop += autoScrollVelocity
+        } else {
+            window.scrollBy(0, autoScrollVelocity)
+        }
+        // Content moved under the stationary finger — re-resolve the drop target.
+        updateDropTarget(lastPointerX, lastPointerY)
+        autoScrollFrame = requestAnimationFrame(step)
+    }
+    autoScrollFrame = requestAnimationFrame(step)
+}
+
+function stopAutoScroll() {
+    if (autoScrollFrame !== null) {
+        cancelAnimationFrame(autoScrollFrame)
+        autoScrollFrame = null
+    }
+    autoScrollVelocity = 0
+}
+
+function onHandlePointerDown(e) {
+    if (!props.reorderable) return
+    // Mouse is served by the native DnD engine. Return BEFORE preventDefault or
+    // setPointerCapture — either would suppress the browser's native dragstart and
+    // break desktop reordering.
+    if (e.pointerType === 'mouse') return
+    // A drag is already in flight — a second finger on another handle
+    // (activePointerId set), or a native mouse drag that already owns dragFromIndex
+    // (hybrid device). Ignore the new pointer so the first gesture keeps its state
+    // and nothing is left stuck in a grabbed/dragging class.
+    if (activePointerId !== null || dragFromIndex.value !== null) return
+    const index = getChildIndex(e.target)
+    if (index === -1) return
+    const child = getCardChild(e.target)
+
+    activePointerId = e.pointerId
+    capturedHandle = e.currentTarget
+    dragStartX = e.clientX
+    dragStartY = e.clientY
+    hasDragMoved = false
+    lastPointerX = e.clientX
+    lastPointerY = e.clientY
+    scrollContainer = findScrollContainer(cardsContainerElement.value)
+    dragFromIndex.value = index
+    child.classList.add('rsui-card-group__card--grabbed')
+
+    // Stop the press starting a text selection / page scroll, then keep the handle
+    // focused so the keyboard arrow-key path still works after a pointer grab.
+    e.preventDefault()
+    capturedHandle.focus()
+
+    // Route all further events for this pointer to the handle so touch and pen
+    // behave identically. Guarded for environments without the API.
+    if (typeof capturedHandle.setPointerCapture === 'function') {
+        capturedHandle.setPointerCapture(e.pointerId)
+    }
+}
+
+function onHandlePointerMove(e) {
+    if (dragFromIndex.value === null || e.pointerId !== activePointerId) return
+
+    // Wait until the pointer clears a small threshold before treating it as a
+    // drag — mirrors native DnD, which only starts after a few px of movement.
+    if (!hasDragMoved) {
+        const movedX = Math.abs(e.clientX - dragStartX)
+        const movedY = Math.abs(e.clientY - dragStartY)
+        if (movedX < DRAG_THRESHOLD_PX && movedY < DRAG_THRESHOLD_PX) return
+        hasDragMoved = true
+        const draggedChild = cardsContainerElement.value?.children[dragFromIndex.value]
+        if (draggedChild) draggedChild.classList.add('rsui-card-group__card--dragging')
+    }
+
+    e.preventDefault()
+
+    lastPointerX = e.clientX
+    lastPointerY = e.clientY
+    updateDropTarget(e.clientX, e.clientY)
+    updateAutoScroll(e.clientY)
+}
+
+function onHandlePointerUp(e) {
+    if (dragFromIndex.value === null || e.pointerId !== activePointerId) return
+    // Drop onto the currently highlighted target — what the user sees. Releasing
+    // off any card leaves dragOverChild null, so no reorder fires, matching a
+    // native drop outside the list.
+    const toIndex = dragOverChild
+        ? Array.from(cardsContainerElement.value.children).indexOf(dragOverChild)
+        : -1
+    if (toIndex !== -1 && toIndex !== dragFromIndex.value) {
+        emit('reorder', { fromIndex: dragFromIndex.value, toIndex })
+    }
+    releasePointerCapture()
+    cleanupDragState()
+}
+
+function onHandlePointerCancel(e) {
+    if (e.pointerId !== activePointerId) return
+    releasePointerCapture()
+    cleanupDragState()
+}
+
+function onHandleLostPointerCapture(e) {
+    // Capture can be taken away without a pointerup/pointercancel — an OS-level
+    // gesture, or the captured handle being detached mid-drag. Reset so the drag
+    // does not strand activePointerId (which would dead-lock every future touch
+    // drag on the guard at the top of onHandlePointerDown). No-op once a normal
+    // pointerup/cancel has already cleaned up, since activePointerId is then null.
+    if (e.pointerId !== activePointerId) return
+    cleanupDragState()
+}
+
+function releasePointerCapture() {
+    if (
+        capturedHandle &&
+        activePointerId !== null &&
+        typeof capturedHandle.hasPointerCapture === 'function' &&
+        capturedHandle.hasPointerCapture(activePointerId)
+    ) {
+        capturedHandle.releasePointerCapture(activePointerId)
+    }
+}
+
 function cleanupDragState() {
     const container = cardsContainerElement.value
     if (container) {
+        // Clear every drag-state class and the native draggable flag in one pass.
+        // Only the native mouse path sets draggable, so removeAttribute is a
+        // harmless no-op after a touch/pen drag.
         Array.from(container.children).forEach(child => {
             child.classList.remove('rsui-card-group__card--drag-over', 'rsui-card-group__card--dragging', 'rsui-card-group__card--grabbed')
             child.removeAttribute('draggable')
@@ -198,6 +438,13 @@ function cleanupDragState() {
     }
     dragFromIndex.value = null
     dragOverChild = null
+    // Pointer-engine state. The native mouse path never sets these, so resetting
+    // them here is a no-op for a mouse drag.
+    stopAutoScroll()
+    scrollContainer = null
+    activePointerId = null
+    capturedHandle = null
+    hasDragMoved = false
 }
 
 function onHandleKeyDown(e) {
@@ -237,6 +484,27 @@ function onHandleKeyDown(e) {
     }
 }
 
+// Every listener a drag handle carries, so add and remove stay in lockstep — the
+// native mouse engine, the touch/pen pointer engine, and the shared keyboard path.
+const handleListeners = [
+    ['mousedown', onHandleMouseDown],
+    ['mouseup', onHandleMouseUp],
+    ['pointerdown', onHandlePointerDown],
+    ['pointermove', onHandlePointerMove],
+    ['pointerup', onHandlePointerUp],
+    ['pointercancel', onHandlePointerCancel],
+    ['lostpointercapture', onHandleLostPointerCapture],
+    ['keydown', onHandleKeyDown],
+]
+
+function addHandleListeners(handle) {
+    handleListeners.forEach(([type, listener]) => handle.addEventListener(type, listener))
+}
+
+function removeHandleListeners(handle) {
+    handleListeners.forEach(([type, listener]) => handle.removeEventListener(type, listener))
+}
+
 function syncHandles() {
     const container = cardsContainerElement.value
     if (!container) return
@@ -249,30 +517,32 @@ function syncHandles() {
             handle.setAttribute('role', 'button')
             handle.setAttribute('tabindex', '0')
             handle.setAttribute('aria-label', 'Reorder')
-            handle.addEventListener('mousedown', onHandleMouseDown)
-            handle.addEventListener('mouseup', onHandleMouseUp)
-            handle.addEventListener('keydown', onHandleKeyDown)
+            addHandleListeners(handle)
             handle.appendChild(createHandleSvg())
             child.style.position = 'relative'
             child.prepend(handle)
         } else if (!props.reorderable && hasHandle) {
-            hasHandle.removeEventListener('mousedown', onHandleMouseDown)
-            hasHandle.removeEventListener('mouseup', onHandleMouseUp)
-            hasHandle.removeEventListener('keydown', onHandleKeyDown)
+            removeHandleListeners(hasHandle)
             hasHandle.remove()
         }
     })
 }
 
 function cleanupHandles() {
+    // A touch/pen drag may still be in flight when handles are torn down — e.g.
+    // reorderable toggled off mid-gesture, or an unmount. Once the handle is
+    // removed it can no longer receive pointerup/pointercancel, so release capture
+    // and reset drag state here. Otherwise activePointerId stays non-null and the
+    // guard at the top of onHandlePointerDown makes every future touch/pen drag
+    // early-return, silently killing touch reordering after a re-enable.
+    releasePointerCapture()
+    cleanupDragState()
     const container = cardsContainerElement.value
     if (!container) return
     Array.from(container.children).forEach(child => {
         const handle = child.querySelector('.rsui-card-group__drag-handle')
         if (handle) {
-            handle.removeEventListener('mousedown', onHandleMouseDown)
-            handle.removeEventListener('mouseup', onHandleMouseUp)
-            handle.removeEventListener('keydown', onHandleKeyDown)
+            removeHandleListeners(handle)
             handle.remove()
         }
         child.removeAttribute('draggable')

package/src/components/InlineEditableText/InlineEditableText.vue

@@ -0,0 +1,295 @@
+<script setup>
+/**
+ * InlineEditableText — click-to-edit text that edits in place.
+ *
+ *   - Persistence is delegated to the parent via `@save` — the component owns
+ *     the interaction + save-state, the parent owns the request.
+ *   - ALL typography is inherited from context (`font`/`color`/`line-height`),
+ *     so it renders as a page heading in one place and a card title in another
+ *     with zero per-consumer config.
+ *   - Icons come in through slots, so the component has no icon dependency.
+ *
+ * SAVE CONTRACT — `@save` is called as
+ * `save(value, { onSuccess, onError, onFinish })` and the parent MUST call
+ * `onFinish` when the request settles: it is the ONLY thing that clears the
+ * saving state and makes the field editable again, so a parent that forgets it
+ * wedges the field (permanent spinner, no re-edit). In development a
+ * `console.warn` fires if `onFinish` hasn't run a few seconds after a save
+ * begins. `onSuccess` confirms the write — the component only then emits
+ * `update:modelValue`, so the bound value never holds an unsaved edit. `onError`
+ * reopens the editor with the typed value preserved for retry, and the parent
+ * can surface a failure message through the optional `#error` slot (rendered in
+ * an assertive live region).
+ *
+ * Structural styles live in `@redseed/redseed-ui-tailwindcss`
+ * (`components/inline_editable_text.css`, `rsui-inline-editable-text` BEM). The
+ * component deliberately sets no typography/colour — those are inherited.
+ *
+ * @example
+ *   <InlineEditableText
+ *       v-model="title"
+ *       :editable="canEdit"
+ *       placeholder="Untitled"
+ *       ariaLabel="Edit title"
+ *       @save="(value, callbacks) =>
+ *           router.put(url, { title: value }, { preserveScroll: true, ...callbacks })"
+ *   >
+ *       <template #edit-affordance><PencilSquareIcon /></template>
+ *       <template #saving><SpinnerIcon /></template>
+ *       <template #saved><CheckIcon /></template>
+ *       <template #error>{{ form.errors.title }}</template>
+ *   </InlineEditableText>
+ */
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    // When false the text is read-only: no click-to-edit, no affordance.
+    editable: {
+        type: Boolean,
+        default: true,
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
+    ariaLabel: {
+        type: String,
+        default: 'Edit',
+    },
+    // Display-only decoration (e.g. a completed item) — never affects editing.
+    strikethrough: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const isEditing = ref(false)
+
+const isSaving = ref(false)
+
+const isSaved = ref(false)
+
+// Local buffer while editing, so Escape can revert and an onError reopen keeps
+// the typed value on screen. The bound value only changes on a confirmed save
+// (see commit's onSuccess), so it stays untouched while editing, saving, or
+// after a failure — which is what lets a same-value retry re-fire the save.
+const draft = ref(props.modelValue)
+
+const inputRef = ref(null)
+
+// Id of the 1500ms "saved tick" timer and the dev-only save watchdog, tracked
+// so they can be cleared before a re-arm and on unmount (RSUI cleanup idiom —
+// see Tooltip / CardGroup).
+let savedTimeoutId = null
+
+let saveWatchdogId = null
+
+// Idle-and-editable — the only state a click opens the editor from. While a save
+// is settling (spinner/tick) the text isn't re-openable, so rapid clicks can't
+// stack saves.
+const canEnterEdit = computed(() => props.editable && !isSaving.value && !isSaved.value)
+
+// Show the optimistic draft while saving so the typed value stays on screen
+// through the round-trip; otherwise the committed value.
+const displayValue = computed(() => (isSaving.value ? draft.value : props.modelValue))
+
+// Collapse whitespace runs + trim — a sensible default for a title-like field so
+// stored values stay clean. Parents can normalise further in their save handler.
+function normalise(value) {
+    return value.replace(/\s+/g, ' ').trim()
+}
+
+function startEditing() {
+    if (!canEnterEdit.value) {
+        return
+    }
+
+    draft.value = props.modelValue
+    isEditing.value = true
+}
+
+// Focus + select-all whenever the editor opens (first open and onError reopen)
+// so a single click lets the user type over the value immediately.
+watch(isEditing, (editing) => {
+    if (editing) {
+        nextTick(() => inputRef.value?.select())
+    }
+})
+
+// A permission revocation mid-edit (editable flips to false) must not be
+// ignored: close the open editor and revert to the bound value.
+watch(() => props.editable, (editable) => {
+    if (!editable && isEditing.value) {
+        cancel()
+    }
+})
+
+// Dev-only backstop for the mandatory onFinish contract. The saving state is
+// cleared solely by the parent's onFinish, so a forgetful parent wedges the
+// field. Rather than a production watchdog that would fight legitimately slow
+// saves, mirror ButtonSlot's dev-mode warning idiom and surface the contract
+// violation in development only.
+function startSaveWatchdog() {
+    if (process.env.NODE_ENV === 'production') {
+        return
+    }
+
+    clearSaveWatchdog()
+    saveWatchdogId = window.setTimeout(() => {
+        console.warn('[RSUI] InlineEditableText: a save has not called onFinish. The @save(value, { onSuccess, onError, onFinish }) contract requires onFinish to clear the saving state.')
+    }, 5000)
+}
+
+function clearSaveWatchdog() {
+    clearTimeout(saveWatchdogId)
+    saveWatchdogId = null
+}
+
+function commit() {
+    // Re-entrancy guard: pressing Enter commits and closes the editor, and the
+    // browser then fires `blur` as the focused textarea unmounts — which would
+    // re-invoke commit() and emit a second `save` (a duplicate PUT). Once the
+    // editor is closed, a commit is a no-op.
+    if (!isEditing.value) {
+        return
+    }
+
+    const value = normalise(draft.value)
+
+    // No-op when nothing changed — opening then leaving must not fire a save.
+    if (value === props.modelValue) {
+        isEditing.value = false
+        return
+    }
+
+    // Close immediately so the display (showing the draft) carries the spinner
+    // then tick; the parent drives these via the callbacks below.
+    isEditing.value = false
+    isSaving.value = true
+    startSaveWatchdog()
+    emit('save', value, {
+        onSuccess: () => {
+            // Emit the new bound value ONLY on a confirmed write. Emitting
+            // optimistically at commit would leave the parent bound to an
+            // unsaved value after a failure, so a same-value retry would hit the
+            // no-op guard above and silently drop the edit. `value` is captured
+            // in this closure, so no separate optimistic emit is needed.
+            emit('update:modelValue', value)
+            isSaved.value = true
+            clearTimeout(savedTimeoutId)
+            savedTimeoutId = window.setTimeout(() => { isSaved.value = false }, 1500)
+        },
+        onError: () => {
+            // Reopen so the typed value survives (rather than silently
+            // reverting) and the user can retry. The bound value was never
+            // updated, so re-committing the same text fires a fresh save. The
+            // parent can surface the reason via the #error slot.
+            draft.value = value
+            isEditing.value = true
+        },
+        onFinish: () => {
+            clearSaveWatchdog()
+            isSaving.value = false
+        },
+    })
+}
+
+function cancel() {
+    draft.value = props.modelValue
+    isEditing.value = false
+}
+
+onBeforeUnmount(() => {
+    clearTimeout(savedTimeoutId)
+    clearSaveWatchdog()
+})
+</script>
+
+<template>
+    <!-- Collapsed control. When editable it is exposed as a real interactive
+         control for keyboard + screen-reader users: role="button" + tabindex +
+         Enter/Space + aria-label. A span (not a native <button>) is used
+         deliberately — the component MUST keep flowing inline and inheriting
+         typography, which a <button> would reset/box; this is the documented
+         RSUI fallback for that constraint. Attributes are gated on canEnterEdit
+         so a read-only or mid-save field is inert (no focus, no role). -->
+    <span
+        v-if="!isEditing"
+        class="rsui-inline-editable-text"
+        :class="{ 'rsui-inline-editable-text--editable': canEnterEdit }"
+        :role="canEnterEdit ? 'button' : undefined"
+        :tabindex="canEnterEdit ? 0 : undefined"
+        :aria-label="canEnterEdit ? ariaLabel : undefined"
+        @click="startEditing"
+        @keydown.enter.prevent="startEditing"
+        @keydown.space.prevent="startEditing"
+    >
+        <span
+            class="rsui-inline-editable-text__value"
+            :class="{ 'rsui-inline-editable-text__value--placeholder': !displayValue }"
+        ><s v-if="strikethrough">{{ displayValue || placeholder }}</s><template v-if="!strikethrough">{{ displayValue || placeholder }}</template></span>
+
+        <!-- Reserved-width adornment (min-width floor) so the affordance/spinner/
+             tick swapping never shifts the text. The three states are mutually
+             exclusive; each branch carries its own explicit condition (no
+             v-else) per house style. -->
+        <span
+            class="rsui-inline-editable-text__adornment"
+            aria-hidden="true"
+        >
+            <span v-if="isSaving">
+                <slot name="saving" />
+            </span>
+
+            <span v-if="!isSaving && isSaved">
+                <slot name="saved" />
+            </span>
+
+            <span
+                v-if="!isSaving && !isSaved && canEnterEdit"
+                class="rsui-inline-editable-text__affordance"
+            >
+                <slot name="edit-affordance" />
+            </span>
+        </span>
+    </span>
+
+    <!-- Auto-grow: an inline-grid sizer whose hidden ::after mirror carries the
+         value drives the width; the textarea fills the same cell. -->
+    <span
+        v-if="isEditing"
+        class="rsui-inline-editable-text__sizer"
+        :data-value="draft || placeholder"
+    >
+        <textarea
+            ref="inputRef"
+            v-model="draft"
+            rows="1"
+            :placeholder="placeholder"
+            :aria-label="ariaLabel"
+            class="rsui-inline-editable-text__input"
+            @blur="commit"
+            @keydown.enter.prevent="commit"
+            @keydown.esc.prevent="cancel"
+        ></textarea>
+    </span>
+
+    <!-- Optional parent-surfaced failure message (e.g. set in @save's onError,
+         cleared on success). Rendered only when the parent populates the slot,
+         in an assertive live region so screen-reader users get the failure that
+         the aria-hidden adornment can't convey. Mirrors the RSUI form-field
+         error pattern (FormFieldSlot). -->
+    <span
+        v-if="$slots.error"
+        class="rsui-inline-editable-text__error"
+        role="alert"
+    >
+        <slot name="error" />
+    </span>
+</template>

package/src/components/InlineEditableText/index.js

@@ -0,0 +1,5 @@
+import InlineEditableText from './InlineEditableText.vue'
+
+export {
+    InlineEditableText,
+}