@pgcorp/ui-kit 0.8.0 → 0.9.0

package/src/components/shared/controls/STextarea.vue

@@ -21,6 +21,8 @@
         :data-monospace="monospace || undefined"
         :data-auto-resize="resizeContract.mode === 'content' || undefined"
         :data-max-rows="validatedMaxRows"
+        :data-min-height="validatedMinHeight"
+        :data-max-height="validatedMaxHeight"
         :data-invalid="field.invalid || undefined"
         :value="modelValue"
         :placeholder="placeholder"
@@ -31,25 +33,36 @@
         :aria-required="field.required || undefined"
         :aria-readonly="field.readonly || undefined"
         :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+        :aria-controls="validatedSuggestions?.controls"
+        :aria-activedescendant="validatedSuggestions?.activeDescendant"
+        :aria-autocomplete="validatedSuggestions?.autocomplete"
+        :aria-haspopup="validatedSuggestions?.popupRole"
         :rows="validatedRows"
         @input="handleInput"
-        @keydown="emit('keydown', $event)"
+        @keydown="handleKeydown"
         @keyup="handleKeyup"
         @click="handleClick"
+        @select="handleSelectionChange"
+        @paste="emit('paste', $event)"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
       />
     </template>
   </SField>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import { resolveFieldSurfaceBindings, type FieldSurfaceBindings } from '../../../internal/fieldSurface'
 import {
   resolveOptionalDomId,
   validateBoolean,
+  validateBoundedNumber,
   validateBoundedInteger,
+  validateDomId,
   validateExactString,
 } from '../../../internal/runtimeContract'
 import SField from './SField.vue'
@@ -61,6 +74,47 @@ defineOptions({
 /** Визуальная интеграция native textarea с SField. / Native textarea visual integration with SField. */
 export type STextareaAppearance = 'default' | 'ghost'
 export type STextareaSize = 'sm' | 'md' | 'lg'
+export type STextareaSelectionDirection = 'forward' | 'backward' | 'none'
+export type STextareaAutocomplete = 'list' | 'both' | 'inline' | 'none'
+export type STextareaSuggestionPopupRole = 'listbox' | 'grid' | 'tree' | 'dialog'
+
+/** Полный native selection contract без сведения диапазона к одному cursor. */
+export interface STextareaSelection {
+  start: number
+  end: number
+  direction: STextareaSelectionDirection
+}
+
+/** Связь multiline textbox с consumer-owned suggestion popup без недопустимого role="combobox" на textarea. */
+export interface STextareaSuggestions {
+  controls: string
+  activeDescendant?: string
+  autocomplete?: STextareaAutocomplete
+  popupRole?: STextareaSuggestionPopupRole
+}
+
+export interface STextareaState {
+  text: string
+  cursor: number
+  selection: STextareaSelection
+  composing: boolean
+}
+
+export interface STextareaReplaceOptions {
+  selection?: STextareaSelection
+  selectionMode?: SelectionMode
+  focus?: boolean
+}
+
+interface STextareaHistorySnapshot {
+  text: string
+  selection: STextareaSelection
+}
+
+interface STextareaReplacementHistoryEntry {
+  before: STextareaHistorySnapshot
+  after: STextareaHistorySnapshot
+}
 
 /**
  * Дискриминированный resize contract: fixed не имеет maxRows, content может быть bounded или unbounded.
@@ -68,11 +122,23 @@ export type STextareaSize = 'sm' | 'md' | 'lg'
  */
 export type STextareaResizeContract =
   | { mode: 'fixed'; autoResize: false }
-  | { mode: 'content'; autoResize: true; maxRows?: number }
+  | {
+    mode: 'content'
+    autoResize: true
+    maxRows?: number
+    minHeight?: number
+    maxHeight?: number
+  }
 
 const TEXTAREA_APPEARANCES = ['default', 'ghost'] as const satisfies readonly STextareaAppearance[]
 const TEXTAREA_SIZES = ['sm', 'md', 'lg'] as const satisfies readonly STextareaSize[]
 const TEXTAREA_ROWS_DOMAIN = { minimum: 1, maximum: 100 } as const
+const TEXTAREA_HEIGHT_DOMAIN = { minimum: 1, maximum: 4096 } as const
+const TEXTAREA_AUTOCOMPLETE = ['list', 'both', 'inline', 'none'] as const satisfies readonly STextareaAutocomplete[]
+const TEXTAREA_SUGGESTION_POPUP_ROLES = ['listbox', 'grid', 'tree', 'dialog'] as const satisfies readonly STextareaSuggestionPopupRole[]
+const TEXTAREA_SELECTION_DIRECTIONS = ['forward', 'backward', 'none'] as const satisfies readonly STextareaSelectionDirection[]
+const TEXTAREA_SELECTION_MODES = ['select', 'start', 'end', 'preserve'] as const satisfies readonly SelectionMode[]
+const PROGRAMMATIC_HISTORY_LIMIT = 100
 
 export interface Props {
   modelValue: string | null
@@ -89,6 +155,9 @@ export interface Props {
   size?: STextareaSize
   autoResize?: boolean
   maxRows?: number
+  minHeight?: number
+  maxHeight?: number
+  suggestions?: STextareaSuggestions
   appearance?: STextareaAppearance
   monospace?: boolean
 }
@@ -108,6 +177,9 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   autoResize: false,
   maxRows: undefined,
+  minHeight: undefined,
+  maxHeight: undefined,
+  suggestions: undefined,
   appearance: 'default',
   monospace: false,
 })
@@ -117,7 +189,12 @@ const emit = defineEmits<{
   (event: 'keydown', keyboardEvent: KeyboardEvent): void
   (event: 'keyup', keyboardEvent: KeyboardEvent): void
   (event: 'click', mouseEvent: MouseEvent): void
-  (event: 'state-change', state: { text: string; cursor: number }): void
+  (event: 'paste', clipboardEvent: ClipboardEvent): void
+  (event: 'compositionstart', compositionEvent: CompositionEvent): void
+  (event: 'compositionupdate', compositionEvent: CompositionEvent): void
+  (event: 'compositionend', compositionEvent: CompositionEvent): void
+  (event: 'selection-change', selection: STextareaSelection): void
+  (event: 'state-change', state: STextareaState): void
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'STextarea', owner: 'native textarea' })
@@ -130,6 +207,14 @@ const textareaId = computed(() => resolveOptionalDomId(
   `s-textarea-${generatedTextareaId}`,
 ))
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const composing = ref(false)
+let resizeObserver: ResizeObserver | null = null
+let observedResizeOwner: HTMLElement | null = null
+let observedWidth: number | null = null
+let resizeFrame: number | null = null
+let applyingProgrammaticReplacement = false
+const replacementUndoStack: STextareaReplacementHistoryEntry[] = []
+const replacementRedoStack: STextareaReplacementHistoryEntry[] = []
 const validatedAppearance = computed<STextareaAppearance>(() => validateExactString(
   'STextarea',
   'appearance',
@@ -151,15 +236,66 @@ const validatedRows = computed(() => validateBoundedInteger(
 const validatedMaxRows = computed(() => props.maxRows === undefined
   ? undefined
   : validateBoundedInteger('STextarea', 'maxRows', props.maxRows, TEXTAREA_ROWS_DOMAIN))
+const validatedMinHeight = computed(() => props.minHeight === undefined
+  ? undefined
+  : validateBoundedNumber('STextarea', 'minHeight', props.minHeight, TEXTAREA_HEIGHT_DOMAIN))
+const validatedMaxHeight = computed(() => props.maxHeight === undefined
+  ? undefined
+  : validateBoundedNumber('STextarea', 'maxHeight', props.maxHeight, TEXTAREA_HEIGHT_DOMAIN))
+const validatedSuggestions = computed<STextareaSuggestions | undefined>(() => {
+  if (props.suggestions === undefined) return undefined
+  if (props.suggestions === null || typeof props.suggestions !== 'object' || Array.isArray(props.suggestions)) {
+    throw new TypeError('STextarea: suggestions должен быть объектом. / STextarea: suggestions must be an object.')
+  }
+  const activeDescendant = props.suggestions.activeDescendant === undefined
+    ? undefined
+    : validateDomId('STextarea', 'suggestions.activeDescendant', props.suggestions.activeDescendant)
+  return {
+    controls: validateDomId('STextarea', 'suggestions.controls', props.suggestions.controls),
+    activeDescendant,
+    autocomplete: validateExactString(
+      'STextarea',
+      'suggestions.autocomplete',
+      props.suggestions.autocomplete ?? 'list',
+      TEXTAREA_AUTOCOMPLETE,
+    ),
+    popupRole: validateExactString(
+      'STextarea',
+      'suggestions.popupRole',
+      props.suggestions.popupRole ?? 'listbox',
+      TEXTAREA_SUGGESTION_POPUP_ROLES,
+    ),
+  }
+})
 const resizeContract = computed<STextareaResizeContract>(() => {
   const autoResize = validateBoolean('STextarea', 'autoResize', props.autoResize)
   const maxRows = validatedMaxRows.value
-  if (!autoResize && maxRows !== undefined) {
+  const minHeight = validatedMinHeight.value
+  const maxHeight = validatedMaxHeight.value
+  if (!autoResize && maxRows !== undefined && minHeight === undefined && maxHeight === undefined) {
     throw new TypeError(
       `STextarea: maxRows применяется только при autoResize=true; получено autoResize=false, maxRows=${maxRows}. `
       + `/ STextarea: maxRows applies only when autoResize=true; received autoResize=false, maxRows=${maxRows}.`,
     )
   }
+  if (!autoResize && (minHeight !== undefined || maxHeight !== undefined)) {
+    throw new TypeError(
+      'STextarea: maxRows/minHeight/maxHeight применяются только при autoResize=true. '
+      + '/ STextarea: maxRows/minHeight/maxHeight apply only when autoResize=true.',
+    )
+  }
+  if (maxRows !== undefined && maxHeight !== undefined) {
+    throw new TypeError(
+      'STextarea: maxRows и maxHeight являются альтернативными ограничителями; укажите один. '
+      + '/ STextarea: maxRows and maxHeight are alternative bounds; provide one.',
+    )
+  }
+  if (minHeight !== undefined && maxHeight !== undefined && maxHeight < minHeight) {
+    throw new TypeError(
+      `STextarea: maxHeight не может быть меньше minHeight; получено minHeight=${minHeight}, maxHeight=${maxHeight}. `
+      + `/ STextarea: maxHeight cannot be below minHeight; received minHeight=${minHeight}, maxHeight=${maxHeight}.`,
+    )
+  }
   if (maxRows !== undefined && maxRows < validatedRows.value) {
     throw new TypeError(
       `STextarea: maxRows не может быть меньше rows; получено rows=${validatedRows.value}, maxRows=${maxRows}. `
@@ -167,8 +303,13 @@ const resizeContract = computed<STextareaResizeContract>(() => {
     )
   }
   if (!autoResize) return { mode: 'fixed', autoResize: false }
-  if (maxRows === undefined) return { mode: 'content', autoResize: true }
-  return { mode: 'content', autoResize: true, maxRows }
+  return {
+    mode: 'content',
+    autoResize: true,
+    ...(maxRows === undefined ? {} : { maxRows }),
+    ...(minHeight === undefined ? {} : { minHeight }),
+    ...(maxHeight === undefined ? {} : { maxHeight }),
+  }
 })
 
 function resolveFieldBindings(field: {
@@ -185,18 +326,98 @@ function resolveFieldBindings(field: {
   })
 }
 
+function readSelection(target: HTMLTextAreaElement, coordinate: string): STextareaSelection {
+  const start = validateSelectionOffset(target.selectionStart, target.value.length, `${coordinate} selectionStart`)
+  const end = validateSelectionOffset(target.selectionEnd, target.value.length, `${coordinate} selectionEnd`)
+  if (end < start) {
+    throw new RangeError(`STextarea: ${coordinate} selectionEnd=${end} is below selectionStart=${start}.`)
+  }
+  return {
+    start,
+    end,
+    direction: validateExactString(
+      'STextarea',
+      `${coordinate} selectionDirection`,
+      target.selectionDirection ?? 'none',
+      TEXTAREA_SELECTION_DIRECTIONS,
+    ),
+  }
+}
+
 function emitState(target: HTMLTextAreaElement): void {
+  const selection = readSelection(target, 'state-change')
   emit('state-change', {
     text: target.value,
-    cursor: validateSelectionOffset(target.selectionStart, target.value.length, 'state-change cursor'),
+    cursor: selection.start,
+    selection,
+    composing: composing.value,
   })
 }
 
 function handleInput(event: Event): void {
   const target = event.target as HTMLTextAreaElement
+  const inputType = event instanceof InputEvent ? event.inputType : ''
+  if (!applyingProgrammaticReplacement && inputType !== 'historyUndo' && inputType !== 'historyRedo') {
+    replacementRedoStack.splice(0)
+  }
   emit('update:modelValue', target.value)
   emitState(target)
-  nextTick(resize)
+  void nextTick(scheduleResize)
+}
+
+function snapshotTextarea(target: HTMLTextAreaElement, coordinate: string): STextareaHistorySnapshot {
+  return {
+    text: target.value,
+    selection: readSelection(target, coordinate),
+  }
+}
+
+function restoreHistorySnapshot(target: HTMLTextAreaElement, snapshot: STextareaHistorySnapshot): void {
+  target.value = snapshot.text
+  target.focus()
+  target.setSelectionRange(
+    snapshot.selection.start,
+    snapshot.selection.end,
+    snapshot.selection.direction,
+  )
+  emit('update:modelValue', snapshot.text)
+  emit('selection-change', snapshot.selection)
+  emitState(target)
+  void nextTick(scheduleResize)
+}
+
+function matchesHistorySnapshot(target: HTMLTextAreaElement, snapshot: STextareaHistorySnapshot): boolean {
+  return target.value === snapshot.text
+}
+
+function handleProgrammaticHistory(event: KeyboardEvent, target: HTMLTextAreaElement): boolean {
+  if (event.altKey || !(event.metaKey || event.ctrlKey)) return false
+  const key = event.key.toLowerCase()
+  const undoRequested = key === 'z' && !event.shiftKey
+  const redoRequested = (key === 'z' && event.shiftKey) || (key === 'y' && !event.shiftKey)
+  if (!undoRequested && !redoRequested) return false
+
+  const source = undoRequested ? replacementUndoStack : replacementRedoStack
+  const entry = source[source.length - 1]
+  const expected = undoRequested ? entry?.after : entry?.before
+  if (!entry || !expected || !matchesHistorySnapshot(target, expected)) return false
+
+  event.preventDefault()
+  source.pop()
+  if (undoRequested) {
+    replacementRedoStack.push(entry)
+    restoreHistorySnapshot(target, entry.before)
+  } else {
+    replacementUndoStack.push(entry)
+    restoreHistorySnapshot(target, entry.after)
+  }
+  return true
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  emit('keydown', event)
+  if (event.defaultPrevented || composing.value || props.disabled || props.readonly) return
+  handleProgrammaticHistory(event, event.currentTarget as HTMLTextAreaElement)
 }
 
 function handleKeyup(event: KeyboardEvent): void {
@@ -209,6 +430,31 @@ function handleClick(event: MouseEvent): void {
   emitState(event.currentTarget as HTMLTextAreaElement)
 }
 
+function handleSelectionChange(event: Event): void {
+  const target = event.currentTarget as HTMLTextAreaElement
+  const selection = readSelection(target, 'selection-change')
+  emit('selection-change', selection)
+  emitState(target)
+}
+
+function handleCompositionStart(event: CompositionEvent): void {
+  composing.value = true
+  emit('compositionstart', event)
+  emitState(event.currentTarget as HTMLTextAreaElement)
+}
+
+function handleCompositionUpdate(event: CompositionEvent): void {
+  emit('compositionupdate', event)
+  emitState(event.currentTarget as HTMLTextAreaElement)
+}
+
+function handleCompositionEnd(event: CompositionEvent): void {
+  composing.value = false
+  emit('compositionend', event)
+  emitState(event.currentTarget as HTMLTextAreaElement)
+  scheduleResize()
+}
+
 function resize(): void {
   const textarea = textareaRef.value
   const contract = resizeContract.value
@@ -218,10 +464,17 @@ function resize(): void {
   const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.5
   const paddingTop = Number.parseFloat(style.paddingTop) || 0
   const paddingBottom = Number.parseFloat(style.paddingBottom) || 0
-  const minimumHeight = validatedRows.value * lineHeight + paddingTop + paddingBottom
-  const maximumHeight = contract.maxRows !== undefined
+  const rowMinimumHeight = validatedRows.value * lineHeight + paddingTop + paddingBottom
+  const minimumHeight = contract.minHeight ?? rowMinimumHeight
+  const maximumHeight = contract.maxHeight ?? (contract.maxRows !== undefined
     ? contract.maxRows * lineHeight + paddingTop + paddingBottom
-    : 0
+    : 0)
+  if (maximumHeight > 0 && maximumHeight < minimumHeight) {
+    throw new RangeError(
+      `STextarea: вычисленный maxHeight=${maximumHeight} меньше minimumHeight=${minimumHeight}. `
+      + `/ STextarea: resolved maxHeight=${maximumHeight} is below minimumHeight=${minimumHeight}.`,
+    )
+  }
 
   if (props.disabled || props.modelValue === null || props.modelValue.length === 0) {
     textarea.style.height = `${minimumHeight}px`
@@ -241,6 +494,14 @@ function resize(): void {
   textarea.style.overflowY = 'hidden'
 }
 
+function scheduleResize(): void {
+  if (resizeFrame !== null || resizeContract.value.mode === 'fixed') return
+  resizeFrame = window.requestAnimationFrame(() => {
+    resizeFrame = null
+    resize()
+  })
+}
+
 function focus(): void {
   textareaRef.value?.focus()
 }
@@ -265,6 +526,40 @@ function getSelectionOffset(): number {
   return validateSelectionOffset(textarea.selectionStart, textarea.value.length, 'getSelectionOffset')
 }
 
+function getSelection(): STextareaSelection {
+  return readSelection(requireTextarea('getSelection'), 'getSelection')
+}
+
+function validateSelection(selection: STextareaSelection, textLength: number, coordinate: string): STextareaSelection {
+  if (selection === null || typeof selection !== 'object' || Array.isArray(selection)) {
+    throw new TypeError(`STextarea: ${coordinate} должен быть selection object. / STextarea: ${coordinate} must be a selection object.`)
+  }
+  const start = validateSelectionOffset(selection.start, textLength, `${coordinate}.start`)
+  const end = validateSelectionOffset(selection.end, textLength, `${coordinate}.end`)
+  if (end < start) {
+    throw new RangeError(`STextarea: ${coordinate}.end=${end} меньше ${coordinate}.start=${start}.`)
+  }
+  return {
+    start,
+    end,
+    direction: validateExactString(
+      'STextarea',
+      `${coordinate}.direction`,
+      selection.direction,
+      TEXTAREA_SELECTION_DIRECTIONS,
+    ),
+  }
+}
+
+function setSelection(selection: STextareaSelection, focusOwner = true): void {
+  const textarea = requireTextarea('setSelection')
+  const validated = validateSelection(selection, textarea.value.length, 'setSelection')
+  if (focusOwner) textarea.focus()
+  textarea.setSelectionRange(validated.start, validated.end, validated.direction)
+  emit('selection-change', validated)
+  emitState(textarea)
+}
+
 function setSelectionOffset(offset: number): void {
   const textarea = requireTextarea('setSelectionOffset')
   const nextOffset = validateSelectionOffset(offset, textarea.value.length, 'setSelectionOffset')
@@ -272,45 +567,104 @@ function setSelectionOffset(offset: number): void {
   textarea.setSelectionRange(nextOffset, nextOffset)
 }
 
+function replaceSelection(text: string, options: STextareaReplaceOptions = {}): STextareaState {
+  const textarea = requireTextarea('replaceSelection')
+  if (props.disabled || props.readonly) {
+    throw new Error('STextarea: replaceSelection недоступен для disabled/readonly поля. / STextarea: replaceSelection is unavailable for a disabled/readonly field.')
+  }
+  if (composing.value) {
+    throw new Error('STextarea: replaceSelection недоступен во время IME composition. / STextarea: replaceSelection is unavailable during IME composition.')
+  }
+  if (typeof text !== 'string') {
+    throw new TypeError('STextarea: replaceSelection text должен быть строкой. / STextarea: replaceSelection text must be a string.')
+  }
+  const selection = options.selection === undefined
+    ? readSelection(textarea, 'replaceSelection')
+    : validateSelection(options.selection, textarea.value.length, 'replaceSelection.selection')
+  const selectionMode = validateExactString(
+    'STextarea',
+    'replaceSelection.selectionMode',
+    options.selectionMode ?? 'end',
+    TEXTAREA_SELECTION_MODES,
+  )
+  if (options.focus ?? true) textarea.focus()
+  const before = snapshotTextarea(textarea, 'replaceSelection before')
+  textarea.setRangeText(text, selection.start, selection.end, selectionMode)
+  const after = snapshotTextarea(textarea, 'replaceSelection after')
+  replacementUndoStack.push({ before, after })
+  if (replacementUndoStack.length > PROGRAMMATIC_HISTORY_LIMIT) replacementUndoStack.shift()
+  replacementRedoStack.splice(0)
+  applyingProgrammaticReplacement = true
+  try {
+    textarea.dispatchEvent(new InputEvent('input', {
+      bubbles: true,
+      composed: true,
+      data: text,
+      inputType: 'insertReplacementText',
+    }))
+  } finally {
+    applyingProgrammaticReplacement = false
+  }
+  emit('selection-change', after.selection)
+  const nextSelection = after.selection
+  return {
+    text: textarea.value,
+    cursor: nextSelection.start,
+    selection: nextSelection,
+    composing: composing.value,
+  }
+}
+
 function insertSoftLineBreak(): void {
-  const textarea = requireTextarea('insertSoftLineBreak')
   if (props.disabled || props.readonly) return
-
-  const start = validateSelectionOffset(textarea.selectionStart, textarea.value.length, 'insertSoftLineBreak selectionStart')
-  const end = validateSelectionOffset(textarea.selectionEnd, textarea.value.length, 'insertSoftLineBreak selectionEnd')
-  if (end < start) {
-    throw new RangeError(
-      `STextarea: insertSoftLineBreak selectionEnd=${end} меньше selectionStart=${start}. `
-      + `/ STextarea: insertSoftLineBreak selectionEnd=${end} is below selectionStart=${start}.`,
-    )
-  }
-  const nextValue = `${textarea.value.slice(0, start)}\n${textarea.value.slice(end)}`
-  const nextCursor = start + 1
-
-  emit('update:modelValue', nextValue)
-  nextTick(() => {
-    const currentTextarea = textareaRef.value
-    if (!currentTextarea) return
-    currentTextarea.focus()
-    currentTextarea.setSelectionRange(nextCursor, nextCursor)
-    emitState(currentTextarea)
-    resize()
-  })
+  replaceSelection('\n')
 }
 
 defineExpose({
   focus,
+  getSelection,
   getSelectionOffset,
   insertSoftLineBreak,
+  replaceSelection,
   resize,
+  setSelection,
   setSelectionOffset,
 })
 
-onMounted(resize)
+onMounted(() => {
+  resize()
+  const textarea = textareaRef.value
+  observedResizeOwner = textarea?.parentElement ?? null
+  if (typeof ResizeObserver === 'undefined' || !observedResizeOwner) return
+  resizeObserver = new ResizeObserver((entries) => {
+    const ownerEntry = entries.find((entry) => entry.target === observedResizeOwner)
+    if (!ownerEntry) return
+    const width = ownerEntry.contentRect.width
+    if (width === observedWidth) return
+    observedWidth = width
+    scheduleResize()
+  })
+  resizeObserver.observe(observedResizeOwner)
+})
 watch(
-  () => [props.modelValue, props.disabled, props.rows, props.maxRows] as const,
-  () => nextTick(resize),
+  () => [props.modelValue, props.disabled, props.rows, props.maxRows, props.minHeight, props.maxHeight] as const,
+  () => { void nextTick(scheduleResize) },
 )
+watch(() => props.modelValue, (modelValue) => {
+  const textarea = textareaRef.value
+  if (textarea && textarea.value !== (modelValue ?? '')) {
+    replacementUndoStack.splice(0)
+    replacementRedoStack.splice(0)
+  }
+})
+onBeforeUnmount(() => {
+  if (resizeFrame !== null) window.cancelAnimationFrame(resizeFrame)
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  observedResizeOwner = null
+  replacementUndoStack.splice(0)
+  replacementRedoStack.splice(0)
+})
 </script>
 
 <style lang="postcss" src="./STextarea.css"></style>

package/src/components/shared/data-display/SActionCard.css

@@ -1,6 +1,10 @@
 @reference "../../../styles/reference.css";
 
-.s-action-card { @apply grid min-h-0 min-w-0 items-start gap-2; grid-template-columns: minmax(0, 1fr) auto; }
+.s-action-card { @apply min-h-0 min-w-0; }
 .s-action-card[data-fill='container'] { @apply h-full w-full; }
 .s-action-card__content { @apply flex min-h-0 min-w-0 w-full flex-1 flex-col; }
-.s-action-card__actions { @apply flex shrink-0 items-center gap-1; }
+.s-action-card__actions { @apply flex min-w-0 max-w-full shrink-0 items-center gap-1; }
+.s-action-card[data-actions-layout='responsive'] .s-action-card__actions,
+.s-action-card[data-actions-layout='stacked'] .s-action-card__actions {
+  @apply w-full;
+}

package/src/components/shared/data-display/SActionCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
+import type { VNodeChild } from 'vue'
+import type { InteractiveSurfaceActionsLayout, InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import SInteractiveSurface from '../controls/SInteractiveSurface.vue'
 
@@ -13,6 +14,7 @@ export interface Props {
   padding?: InteractiveSurfacePadding
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
+  actionsLayout?: InteractiveSurfaceActionsLayout
 }
 
 withDefaults(defineProps<Props>(), {
@@ -22,14 +24,19 @@ withDefaults(defineProps<Props>(), {
   padding: 'md',
   radius: 'lg',
   fill: 'content',
+  actionsLayout: 'inline',
 })
 
 const emit = defineEmits<{ activate: [event: MouseEvent] }>()
+defineSlots<{
+  default?: () => VNodeChild
+  actions?: () => VNodeChild
+}>()
 const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card root' })
 </script>
 
 <template>
-  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode">
+  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode" :data-actions-layout="actionsLayout">
     <SInteractiveSurface
       :surface="surface"
       :selected="selected"
@@ -38,11 +45,14 @@ const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card
       :padding="padding"
       :radius="radius"
       :fill="fill"
+      :actions-layout="actionsLayout"
       @activate="emit('activate', $event)"
     >
       <div class="s-action-card__content"><slot /></div>
+      <template v-if="$slots.actions" #actions>
+        <div class="s-action-card__actions"><slot name="actions" /></div>
+      </template>
     </SInteractiveSurface>
-    <div v-if="$slots.actions" class="s-action-card__actions"><slot name="actions" /></div>
   </div>
 </template>