@globalbrain/sefirot 4.39.0 → 4.40.1

package/README.md

@@ -45,7 +45,7 @@ $ pnpm run lint
 Lint files using a rule of Standard JS.
 
 ```bash
-$ pnpm test
+$ pnpm run test
 ```
 
 Run the tests.

package/config/vite.js

@@ -84,6 +84,7 @@ export const baseConfig = {
       'file-saver',
       'markdown-it > argparse',
       'markdown-it > entities',
+      'pinia',
       'qs'
     ],
     // @keep-sorted

package/lib/blocks/lens/components/LensCatalog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
+import SDivider from '../../../components/SDivider.vue'
 import { useQuery } from '../../../composables/Api'
 import { usePower } from '../../../composables/Power'
 import { type FieldData } from '../FieldData'
@@ -67,7 +68,7 @@ export interface Props {
   clickableFields?: string[]
 
   // Whether to show border around the catalog.
-  border?: boolean
+  showBorder?: boolean
 
   // Padding to add around various blocks in the catalog. This padding only
   // applies to the X axis (left and right). The default is `16px`.
@@ -180,14 +181,17 @@ const hasConditions = computed(() => {
   return _filters.value.length > 0 || _sort.value.length > 0
 })
 
-const borderWidth = computed(() => {
-  return props.border ? 'var(--lens-catalog-border-width, 1px)' : '0'
+const containerClasses = computed(() => {
+  return {
+    'show-empty-state': _showEmptyState.value,
+    'has-border': props.showBorder
+  }
 })
 
 const paddings = computed(() => ({
   '--lens-catalog-control-padding': `0 ${props.padding ?? '16px'}`,
-  '--lens-catalog-filters-block-padding': `12px ${props.padding ?? '16px'}`,
-  '--lens-catalog-sorts-block-padding': `12px ${props.padding ?? '16px'}`,
+  '--lens-catalog-filters-block-padding': `8px ${props.padding ?? '16px'}`,
+  '--lens-catalog-sorts-block-padding': `8px ${props.padding ?? '16px'}`,
   '--lens-catalog-footer-padding': `0 ${props.padding ?? '16px'}`,
   '--table-padding-left': `calc(${props.padding ?? '16px'} - 16px)`
 }))
@@ -195,7 +199,7 @@ const paddings = computed(() => ({
 const conditionBlocksSize = useElementSize(conditionBlocksEl)
 
 const headerHeight = 'var(--lens-catalog-global-height-offset)'
-const controlHeight = '48px - 1px'
+const controlHeight = '56px - 1px'
 const conditionBlocksHeight = computed(() => conditionBlocksSize.height.value > 0 ? `${conditionBlocksSize.height.value}px - 1px` : '0px')
 const columnsHeight = '40px - 1px'
 const footerHeight = '56px - 1px'
@@ -212,7 +216,6 @@ const containerMinHeight = computed(() => {
 
 const containerStyles = computed(() => {
   return {
-    borderWidth: borderWidth.value,
     ...paddings.value,
     ...(containerMinHeight.value ?? {})
   }
@@ -364,7 +367,7 @@ defineExpose({
 </script>
 
 <template>
-  <SCard class="LensCatalog" :class="{ 'show-empty-state': _showEmptyState }" :style="containerStyles">
+  <div class="LensCatalog" :class="containerClasses" :style="containerStyles">
     <template v-if="_showEmptyState">
       <slot name="empty-state" />
     </template>
@@ -397,20 +400,25 @@ defineExpose({
       </LensCatalogControl>
       <div v-else class="control-skeleton" />
       <div v-if="!hideConditions && result && (_filters.length > 0 || _sort.length > 0)" ref="conditionBlocksEl" class="condition-blocks">
-        <LensCatalogStateFilter
-          v-if="_filters.length > 0"
-          :filters="_filters"
-          :fields="result.fields"
-          @reset="onResetFilters"
-        />
-        <LensCatalogStateSort
-          v-if="_sort.length > 0"
-          :fields="result.fields"
-          :sorts="_sort"
-          @reset="onResetSorts"
-        />
+        <template v-if="_filters.length > 0">
+          <SDivider />
+          <LensCatalogStateFilter
+            :filters="_filters"
+            :fields="result.fields"
+            @reset="onResetFilters"
+          />
+        </template>
+        <template v-if="_sort.length > 0">
+          <SDivider />
+          <LensCatalogStateSort
+            :fields="result.fields"
+            :sorts="_sort"
+            @reset="onResetSorts"
+          />
+        </template>
       </div>
-      <SCardBlock class="list" :style="tableMaxHeight">
+      <SDivider />
+      <div class="list" :style="tableMaxHeight">
         <LensTable
           :result
           :loading
@@ -430,7 +438,7 @@ defineExpose({
           @prev="onPrev"
           @next="onNext"
         />
-      </SCardBlock>
+      </div>
     </div>
 
     <SModal :open="filterDialog.state.value" @close="filterDialog.off">
@@ -455,16 +463,15 @@ defineExpose({
         @apply="onViewUpdated"
       />
     </SModal>
-  </SCard>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalog {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-  --c-bg-elv-4: var(--c-bg-2);
-
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  background-color: var(--c-bg-1);
 }
 
 .LensCatalog.show-empty-state {
@@ -472,10 +479,25 @@ defineExpose({
   background-color: var(--c-bg-1);
 }
 
+.LensCatalog.has-border {
+  .container {
+    border: 1px solid var(--c-border);
+    border-radius: 12px;
+  }
+
+  :deep(.LensCatalogControl) {
+    border-radius: 11px 11px 0 0;
+  }
+
+  :deep(.LensCatalogFooter) {
+    border-radius: 0 0 11px 11px;
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  flex-grow: 1;
   min-height: 100%;
 }
 
@@ -483,18 +505,10 @@ defineExpose({
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  border-radius: 0 0 5px 5px;
 }
 
 .control-skeleton {
-  height: 48px;
+  height: 56px;
   background-color: var(--c-bg-1);
 }
-
-.condition-blocks {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  background-color: var(--c-gutter);
-}
 </style>

package/lib/blocks/lens/components/LensCatalogControl.vue

@@ -81,7 +81,7 @@ function createFilterPresetOptions(): ActionList {
 </script>
 
 <template>
-  <SCardBlock class="LensCatalogControl">
+  <div class="LensCatalogControl">
     <template v-if="!selected || selected.length === 0">
       <div class="main">
         <SInputText
@@ -95,7 +95,6 @@ function createFilterPresetOptions(): ActionList {
         />
         <SActionMenu
           v-if="filterPresets?.length"
-          type="outline"
           size="sm"
           :icon="IconLightning"
           :label="t.a_filter_preset"
@@ -103,14 +102,12 @@ function createFilterPresetOptions(): ActionList {
         />
         <SButton
           v-if="showFilters"
-          type="outline"
           size="sm"
           :icon="IconFunnelSimple"
           :label="t.a_filter"
           @click="$emit('filter')"
         />
         <SButton
-          type="outline"
           size="sm"
           :icon="IconSlidersHorizontal"
           :label="t.a_view"
@@ -120,7 +117,6 @@ function createFilterPresetOptions(): ActionList {
       <div class="sub">
         <slot name="sub-left" />
         <SButton
-          type="outline"
           size="sm"
           :icon="isConditionActive ? IconBookOpenText : IconBook"
           :disabled="isConditionDisabled"
@@ -142,16 +138,16 @@ function createFilterPresetOptions(): ActionList {
         </div>
       </div>
     </template>
-  </SCardBlock>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogControl {
   display: flex;
   align-items: center;
-  border-radius: 5px 5px 0 0;
   padding: var(--lens-catalog-control-padding, 0 12px);
-  height: 48px;
+  height: 56px;
+  background-color: var(--c-bg-1);
 }
 
 .main {

package/lib/blocks/lens/components/LensCatalogFooter.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import SPagination from '../../../components/SPagination.vue'
 import { type LensResult } from '../LensResult'
 
 defineProps<{
@@ -14,28 +15,27 @@ defineEmits<{
 
 <template>
   <div class="LensCatalogFooter">
-    <SControl>
-      <SControlRight>
-        <SControlPagination
-          :total="result.pagination.total"
-          :page="result.pagination.page"
-          :per-page="result.pagination.perPage"
-          :disabled="loading"
-          @prev="$emit('prev')"
-          @next="$emit('next')"
-        />
-      </SControlRight>
-    </SControl>
+    <SPagination
+      size="small"
+      align="right"
+      :total="result.pagination.total"
+      :page="result.pagination.page"
+      :per-page="result.pagination.perPage"
+      :disabled="loading"
+      @prev="$emit('prev')"
+      @next="$emit('next')"
+    />
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogFooter {
   position: relative;
   z-index: 10;
   display: flex;
-  flex-shrink: 0;
+  justify-content: flex-end;
   align-items: center;
+  flex-shrink: 0;
   margin-top: -1px;
   border-top: 1px solid var(--c-gutter);
   border-radius: 0 0 5px 5px;

package/lib/blocks/lens/components/LensCatalogStateFilter.vue

@@ -88,7 +88,7 @@ function isConnector(value: any): value is '$and' | '$or' {
 </script>
 
 <template>
-  <SCardBlock class="LensCatalogStateFilter">
+  <div class="LensCatalogStateFilter">
     <div v-if="!isOpen" class="closed">
       <span class="filter-count">{{ t.filter_count(group.count) }}</span>
     </div>
@@ -111,10 +111,10 @@ function isConnector(value: any): value is '$and' | '$or' {
         </span>
       </button>
     </div>
-  </SCardBlock>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateFilter {
   display: flex;
   gap: 16px;

package/lib/blocks/lens/components/LensCatalogStateFilterCondition.vue

@@ -54,7 +54,7 @@ const valueText = computedAsync(async () => {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateFilterCondition {
   display: flex;
   gap: 1px;

package/lib/blocks/lens/components/LensCatalogStateFilterGroup.vue

@@ -49,7 +49,7 @@ const connectorTextDict = {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateFilterGroup {
   display: flex;
   flex-direction: column;

package/lib/blocks/lens/components/LensCatalogStateSort.vue

@@ -50,7 +50,7 @@ function getOrderText(sort: LensQuerySort): string {
 </script>
 
 <template>
-  <SCardBlock class="LensCatalogStateSort">
+  <div class="LensCatalogStateSort">
     <div v-if="!isOpen" class="closed">
       <span class="sort-count">{{ t.sort_count(sorts.length) }}</span>
     </div>
@@ -72,10 +72,10 @@ function getOrderText(sort: LensQuerySort): string {
         </span>
       </button>
     </div>
-  </SCardBlock>
+  </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensCatalogStateSort {
   display: flex;
   gap: 16px;

package/lib/blocks/lens/components/LensFormFilter.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SButton from '../../../components/SButton.vue'
+import SCard from '../../../components/SCard.vue'
+import SCardBlock from '../../../components/SCardBlock.vue'
+import SCardClose from '../../../components/SCardClose.vue'
+import SCardFooter from '../../../components/SCardFooter.vue'
+import SContent from '../../../components/SContent.vue'
+import SDoc from '../../../components/SDoc.vue'
 import { useData } from '../../../composables/Data'
 import { useLang, useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
@@ -129,6 +136,7 @@ async function onApply() {
 
 <template>
   <SCard class="LensFormFilters" size="xlarge">
+    <SCardClose @click="$emit('cancel')" />
     <SCardBlock class="s-p-32">
       <SDoc>
         <SContent>
@@ -143,27 +151,18 @@ async function onApply() {
         />
       </SDoc>
     </SCardBlock>
-    <SCardBlock class="s-py-16 s-px-32">
-      <SControl size="md">
-        <SControlRight>
-          <SControlButton
-            :label="t.a_cancel"
-            @click="$emit('cancel')"
-          />
-          <SControlButton
-            mode="info"
-            :label="t.a_apply"
-            @click="onApply"
-          />
-        </SControlRight>
-      </SControl>
-    </SCardBlock>
+    <SCardFooter class="s-py-16 s-px-32">
+      <SButton
+        size="md"
+        :label="t.a_cancel"
+        @click="$emit('cancel')"
+      />
+      <SButton
+        size="md"
+        mode="info"
+        :label="t.a_apply"
+        @click="onApply"
+      />
+    </SCardFooter>
   </SCard>
 </template>
-
-<style scoped lang="postcss">
-.LensFormFilters {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-}
-</style>

package/lib/blocks/lens/components/LensFormFilterCondition.vue

@@ -175,7 +175,7 @@ async function resolveInput() {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensFormSearchCondition {
   display: grid;
   grid-template-columns: 256px 160px minmax(0, 1fr) 32px;

package/lib/blocks/lens/components/LensFormFilterGroup.vue

@@ -129,7 +129,7 @@ function onAddGroup() {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensFormFilterGroup {
   display: flex;
   flex-direction: column;

package/lib/blocks/lens/components/LensFormOverrideBase.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+import SButton from '../../../components/SButton.vue'
+import SCard from '../../../components/SCard.vue'
+import SCardBlock from '../../../components/SCardBlock.vue'
+import SCardClose from '../../../components/SCardClose.vue'
+import SCardFooter from '../../../components/SCardFooter.vue'
+import SContent from '../../../components/SContent.vue'
+import SDoc from '../../../components/SDoc.vue'
 import SInputCheckbox from '../../../components/SInputCheckbox.vue'
 import SInputNumber from '../../../components/SInputNumber.vue'
 import SInputText from '../../../components/SInputText.vue'
@@ -91,6 +98,7 @@ async function onSave() {
 
 <template>
   <SCard class="LensFormOverrideBase" size="large">
+    <SCardClose @click="$emit('cancel')" />
     <SCardBlock class="s-p-32">
       <SDoc>
         <SContent>
@@ -147,30 +155,23 @@ async function onSave() {
         </div>
       </SDoc>
     </SCardBlock>
-    <SCardBlock class="s-py-16 s-px-32">
-      <SControl size="md">
-        <SControlRight>
-          <SControlButton
-            :label="t.a_cancel"
-            @click="$emit('cancel')"
-          />
-          <SControlButton
-            mode="info"
-            :label="t.a_apply"
-            @click="onSave"
-          />
-        </SControlRight>
-      </SControl>
-    </SCardBlock>
+    <SCardFooter class="s-py-16 s-px-32">
+      <SButton
+        size="md"
+        :label="t.a_cancel"
+        @click="$emit('cancel')"
+      />
+      <SButton
+        size="md"
+        mode="info"
+        :label="t.a_apply"
+        @click="onSave"
+      />
+    </SCardFooter>
   </SCard>
 </template>
 
-<style scoped lang="postcss">
-.LensFormOverrideBase {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-}
-
+<style scoped>
 .fieldset {
   display: flex;
   flex-direction: column;

package/lib/blocks/lens/components/LensFormView.vue

@@ -8,7 +8,14 @@ import { cloneDeep } from 'lodash-es'
 import { computed, ref } from 'vue'
 import { useDraggable } from 'vue-draggable-plus'
 import SButton from '../../../components/SButton.vue'
+import SCard from '../../../components/SCard.vue'
+import SCardBlock from '../../../components/SCardBlock.vue'
+import SCardClose from '../../../components/SCardClose.vue'
+import SCardFooter from '../../../components/SCardFooter.vue'
+import SContent from '../../../components/SContent.vue'
+import SDoc from '../../../components/SDoc.vue'
 import SInputCheckbox from '../../../components/SInputCheckbox.vue'
+import SModal from '../../../components/SModal.vue'
 import { useLang, useTrans } from '../../../composables/Lang'
 import { usePower } from '../../../composables/Power'
 import { type FieldData } from '../FieldData'
@@ -149,6 +156,7 @@ async function onApply() {
 
 <template>
   <SCard class="LensFormView" size="medium">
+    <SCardClose @click="$emit('cancel')" />
     <SCardBlock class="s-p-32">
       <SDoc>
         <SContent>
@@ -217,21 +225,19 @@ async function onApply() {
         </div>
       </SDoc>
     </SCardBlock>
-    <SCardBlock class="s-py-16 s-px-32">
-      <SControl size="md">
-        <SControlRight>
-          <SControlButton
-            :label="t.a_cancel"
-            @click="$emit('cancel')"
-          />
-          <SControlButton
-            mode="info"
-            :label="t.a_apply"
-            @click="onApply"
-          />
-        </SControlRight>
-      </SControl>
-    </SCardBlock>
+    <SCardFooter class="s-py-16 s-px-32">
+      <SButton
+        size="md"
+        :label="t.a_cancel"
+        @click="$emit('cancel')"
+      />
+      <SButton
+        size="md"
+        mode="info"
+        :label="t.a_apply"
+        @click="onApply"
+      />
+    </SCardFooter>
 
     <SModal :open="editDialog.state.value" @close="editDialog.off()">
       <LensFormOverride
@@ -246,12 +252,7 @@ async function onApply() {
   </SCard>
 </template>
 
-<style scoped lang="postcss">
-.LensFormView {
-  --c-bg-elv-2: var(--c-bg-1);
-  --c-bg-elv-3: var(--c-bg-1);
-}
-
+<style scoped>
 .main {
   display: flex;
   flex-direction: column;
@@ -286,15 +287,13 @@ async function onApply() {
 .input {
   display: flex;
   flex-grow: 1;
-  gap: 1px;
-  border: 1px dashed var(--c-divider);
+  border: 1px dashed var(--input-border-color);
   border-radius: 6px;
-  background-color: var(--c-gutter);
   overflow: hidden;
   transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--c-border-mute-2);
+    border-color: var(--input-hover-border-color);
   }
 }
 
@@ -318,7 +317,7 @@ async function onApply() {
   display: flex;
   align-items: center;
   flex-grow: 1;
-  padding: 0 8px;
+  padding: 0 8px 0 0;
   background-color: var(--c-bg-1);
 }
 

package/lib/blocks/lens/components/LensTable.vue

@@ -117,7 +117,7 @@ function onSortUpdated(sort: LensQuerySort) {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .LensTable {
   display: flex;
   flex-direction: column;
@@ -132,8 +132,6 @@ function onSortUpdated(sort: LensQuerySort) {
    * but it is quite tricky to scope the desired field in CSS at the moment.
    */
   font-feature-settings: "tnum";
-
-  --c-bg-elv-3: var(--c-bg-1);
 }
 
 .LensTable.is-loading,

package/lib/components/SCardBlock.vue

@@ -51,9 +51,9 @@ provideCardBlockSize(computed(() => props.size ?? null))
   width: 100%;
 }
 
-.SCardBlock.xsmall { height: 40px; }
-.SCardBlock.small  { height: 48px; }
-.SCardBlock.medium { height: 56px; }
-.SCardBlock.large  { height: 64px; }
-.SCardBlock.xlarge { height: 80px; }
+.SCardBlock.xsmall { height: 40px; min-height: 40px; }
+.SCardBlock.small  { height: 48px; min-height: 48px; }
+.SCardBlock.medium { height: 56px; min-height: 56px; }
+.SCardBlock.large  { height: 64px; min-height: 64px; }
+.SCardBlock.xlarge { height: 80px; min-height: 80px; }
 </style>

package/lib/components/SInputTextarea.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import SDivider from './SDivider.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputSegments from './SInputSegments.vue'
 
 export type { Color, Size } from './SInputBase.vue'
+
 export interface Props extends BaseProps {
   placeholder?: string
   disabled?: boolean
@@ -29,10 +31,10 @@ const emit = defineEmits<{
 }>()
 
 const sizePaddingYDict = {
-  sm: 12,
-  md: 14,
-  mini: 12,
-  small: 14,
+  sm: 6,
+  md: 10,
+  mini: 6,
+  small: 10,
   medium: 22
 }
 
@@ -67,6 +69,8 @@ const style = computed(() => {
   return `field-sizing:content;${minHeight}${maxHeight}`
 })
 
+const isPreview = ref(false)
+
 function emitInput(e: Event): void {
   const v = (e.target as HTMLInputElement).value || null
   emit('update:model-value', v)
@@ -80,8 +84,6 @@ function emitBlur(e: FocusEvent): void {
   emit('update:model-value', v)
   emit('blur', v)
 }
-
-const isPreview = ref(false)
 </script>
 
 <template>
@@ -115,11 +117,11 @@ const isPreview = ref(false)
             size="mini"
           />
         </div>
-
         <div v-if="$slots.actions && !isPreview" class="actions">
           <slot name="actions" />
         </div>
       </div>
+      <SDivider v-if="preview !== undefined || $slots.actions" />
       <textarea
         v-show="!isPreview"
         :id="name"
@@ -145,71 +147,6 @@ const isPreview = ref(false)
 </template>
 
 <style scoped lang="postcss">
-.box {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  flex-grow: 1;
-  border: 1px solid var(--input-border-color);
-  border-radius: 8px;
-  width: 100%;
-  background-color: var(--c-gutter);
-  box-shadow: var(--input-box-shadow);
-  overflow: hidden;
-  transition: border-color 0.25s;
-
-  &:has(.input:hover) {
-    border-color: var(--input-hover-border-color);
-  }
-
-  &:has(.input:focus) {
-    border-color: var(--input-focus-border-color);
-  }
-}
-
-.control {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding: 0 8px;
-  height: 48px;
-  background-color: var(--c-bg-1);
-}
-
-.preview {
-  flex-grow: 1;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.input,
-.prose {
-  display: block;
-  flex-grow: 1;
-  width: 100%;
-  font-family: var(--input-value-font-family);
-  font-weight: 400;
-  background-color: var(--input-bg-color);
-}
-
-.input {
-  &::placeholder {
-    color: var(--input-placeholder-color);
-  }
-}
-
-.prose {
-  background-color: var(--c-bg-elv-3);
-
-  &.empty {
-    color: var(--input-placeholder-color);
-  }
-}
-
 .SInputTextarea.sm,
 .SInputTextarea.mini {
   .input,
@@ -261,7 +198,8 @@ const isPreview = ref(false)
   flex-grow: 1;
 }
 
-.SInputTextarea.disabled {
+.SInputTextarea.disabled,
+.SInputTextarea.disabled:hover {
   .box {
     border-color: var(--input-disabled-border-color);
   }
@@ -273,15 +211,69 @@ const isPreview = ref(false)
   }
 }
 
-.SInputTextarea.has-error {
-  .box {
-    border-color: var(--input-error-border-color);
-  }
+.SInputTextarea.has-error .box {
+  border-color: var(--input-error-border-color);
 }
 
-.SInputTextarea.has-warning {
-  .box {
-    border-color: var(--input-warning-border-color);
+.SInputTextarea.has-warning .box {
+  border-color: var(--input-warning-border-color);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  border: 1px solid var(--input-border-color);
+  border-radius: 8px;
+  width: 100%;
+  box-shadow: var(--input-box-shadow);
+  background-color: var(--input-bg-color);
+  overflow: hidden;
+  transition: border-color 0.25s;
+
+  &:has(.input:hover) {
+    border-color: var(--input-hover-border-color);
   }
+
+  &:has(.input:focus) {
+    border-color: var(--input-focus-border-color);
+  }
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0 8px;
+  height: 48px;
+  background-color: var(--c-bg-1);
+}
+
+.preview {
+  flex-grow: 1;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.input,
+.prose {
+  display: block;
+  flex-grow: 1;
+  width: 100%;
+  font-family: var(--input-value-font-family);
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.input::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.prose.empty {
+  color: var(--input-placeholder-color);
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.39.0",
+  "version": "4.40.1",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",
@@ -37,11 +37,11 @@
     "./*": "./*"
   },
   "scripts": {
-    "docs": "pnpm docs:dev",
+    "docs": "pnpm run docs:dev",
     "docs:dev": "vitepress dev docs --port 4011",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress serve docs --port 4011",
-    "story": "pnpm story:dev",
+    "story": "pnpm run story:dev",
     "story:dev": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire dev --port 4010",
     "story:build": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire build",
     "story:preview": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire preview --port 4010",
@@ -59,8 +59,8 @@
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.10",
     "@popperjs/core": "^2.11.8",
-    "@sentry/browser": "^10.44.0",
-    "@sentry/vue": "^10.44.0",
+    "@sentry/browser": "^10.47.0",
+    "@sentry/vue": "^10.47.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.4",
     "@tinyhttp/cookie": "^2.1.1",
@@ -72,7 +72,7 @@
     "@types/markdown-it": "^14.1.2",
     "@types/qs": "^6.15.0",
     "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/reactivity": "^3.5.30",
+    "@vue/reactivity": "^3.5.32",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^14.2.1",
@@ -81,10 +81,10 @@
     "dayjs": "^1.11.20",
     "dompurify": "^3.3.3",
     "file-saver": "^2.0.5",
-    "fuse.js": "^7.1.0",
+    "fuse.js": "^7.2.0",
     "html2canvas": "^1.4.1",
-    "jsdom": "^29.0.0",
-    "lodash-es": "^4.17.23",
+    "jsdom": "^29.0.1",
+    "lodash-es": "^4.18.1",
     "magic-string": "^0.30.21",
     "markdown-it": "^14.1.1",
     "normalize.css": "^8.0.1",
@@ -97,27 +97,27 @@
     "unplugin-icons": "^23.0.1",
     "v-calendar": "3.0.1",
     "vite": "^7.3.1",
-    "vue": "^3.5.30",
+    "vue": "^3.5.32",
     "vue-draggable-plus": "^0.6.1",
-    "vue-router": "^4.6.4"
+    "vue-router": "^5.0.4"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^3.0.1",
     "@histoire/plugin-vue": "1.0.0-beta.1",
     "@release-it/conventional-changelog": "^10.0.6",
-    "@types/jsdom": "^28.0.0",
-    "@types/node": "^25.5.0",
-    "@typescript-eslint/rule-tester": "^8.57.1",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@types/jsdom": "^28.0.1",
+    "@types/node": "^25.5.1",
+    "@typescript-eslint/rule-tester": "^8.58.0",
+    "@vitest/coverage-v8": "^4.1.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.39.4",
-    "happy-dom": "^20.8.4",
+    "happy-dom": "^20.8.9",
     "histoire": "1.0.0-beta.1",
     "release-it": "^19.2.4",
     "typescript": "~5.9.3",
-    "vitepress": "^2.0.0-alpha.16",
-    "vitest": "^4.1.0",
+    "vitepress": "^2.0.0-alpha.17",
+    "vitest": "^4.1.2",
     "vue-tsc": "^3.2.6"
   },
-  "packageManager": "pnpm@10.32.1"
+  "packageManager": "pnpm@10.33.0"
 }