@globalbrain/sefirot 4.46.0 → 4.48.0

package/lib/blocks/lens/composables/ResourceFetcher.ts

@@ -6,8 +6,11 @@ export function useResourceFetcher(): ResourceFetcher {
   const data = ref<Record<string, any>>({})
   const pendingList: Record<string, Promise<any> | undefined> = {}
 
-  const { execute: resourceFetcher } = useGet<any, [method: ResourceFetchMethod, url: string]>(async (http, method, url) => {
-    const key = `${method}:${url}`
+  const { execute: resourceFetcher } = useGet<
+    any,
+    [method: ResourceFetchMethod, url: string, body?: Record<string, any> | null]
+  >(async (http, method, url, body) => {
+    const key = `${method}:${url}:${body ? JSON.stringify(body) : ''}`
 
     if (data.value[key]) {
       return data.value[key]
@@ -17,11 +20,21 @@ export function useResourceFetcher(): ResourceFetcher {
       return pendingList[key]
     }
 
-    pendingList[key] = http[method](url).then((response) => {
-      data.value[key] = response
-      delete pendingList[key]
-      return response
-    })
+    // `post` carries a request body (e.g. a lens search payload); `get` ignores
+    // it. Send no body at all when none is configured — `http.post(url, {})`
+    // would serialize and POST an empty JSON object, which endpoints that
+    // branch on an absent payload could reject.
+    pendingList[key] = (
+      method === 'post'
+        ? (body != null ? http.post(url, body) : http.post(url))
+        : http.get(url)
+    ).then(
+      (response) => {
+        data.value[key] = response
+        delete pendingList[key]
+        return response
+      }
+    )
 
     return pendingList[key]
   })

package/lib/blocks/lens/composables/SetupLens.ts

@@ -1,6 +1,7 @@
 import { type FieldDataType } from '../FieldData'
 import { type FieldDataFor, type FieldProvider, FieldRegistry } from '../FieldRegistry'
 import { provideFieldRegistry } from '../composables/FieldRegistry'
+import { AvatarField } from '../fields/AvatarField'
 import { BooleanField } from '../fields/BooleanField'
 import { ContentField } from '../fields/ContentField'
 import { DateField } from '../fields/DateField'
@@ -34,6 +35,7 @@ export function useSetupLens(): SetupLens {
   registerDefaultFields()
 
   function registerDefaultFields(): void {
+    fieldRegistry.register('avatar', (ctx, field) => new AvatarField(ctx, field))
     fieldRegistry.register('boolean', (ctx, field) => new BooleanField(ctx, field))
     fieldRegistry.register('content', (ctx, field) => new ContentField(ctx, field))
     fieldRegistry.register('date', (ctx, field) => new DateField(ctx, field))

package/lib/blocks/lens/fields/AvatarField.ts

@@ -0,0 +1,43 @@
+import { h } from 'vue'
+import SAvatar from '../../../components/SAvatar.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type AvatarFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { Field } from './Field'
+
+export class AvatarField extends Field<AvatarFieldData> {
+  override tableCell(v: any, r: any): TableCell {
+    // The display name lives on a sibling key of the record (resolved by the
+    // active language), not on the field value, which is the image URL.
+    const nameKey = this.ctx.lang === 'ja' ? this.data.nameJa : this.data.nameEn
+    return {
+      type: 'avatar',
+      // The field value is the image URL itself. A missing value renders an
+      // empty cell (both `image` and `name` falsy), unless a name companion
+      // is configured, in which case the avatar falls back to its initials.
+      image: v ?? null,
+      // Empty string (not null) when unset: a null name makes the cell
+      // renderer fall back to the raw row value, which here is the image URL
+      // and would break SAvatar.
+      name: nameKey ? (r?.[nameKey] ?? '') : ''
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    return {}
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      // Render nothing for a missing image so SDataListItem shows its empty
+      // placeholder ("—"), matching the empty table cell and the other
+      // data-list fields, instead of an empty bordered avatar.
+      return value ? h(SAvatar, { size: 'small', avatar: value }) : null
+    })
+  }
+
+  override formInputComponent(): any {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/ContentField.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue'
+import { defineComponent, h } from 'vue'
 import SContent from '../../../components/SContent.vue'
 import SMarkdown from '../../../components/SMarkdown.vue'
 import { type TableCell } from '../../../composables/Table'
@@ -8,6 +8,13 @@ import { type FilterInput } from '../filter-inputs/FilterInput'
 import { Field } from './Field'
 
 export class ContentField extends Field<ContentFieldData> {
+  // `content` is a display-only field: `formInputComponent()` renders static
+  // Markdown (instructions) rather than an editable input, so it must never be
+  // seeded / validated / submitted as a value, nor made inline-editable.
+  override isSubmittable(): boolean {
+    return false
+  }
+
   override tableCell(_v: any, _r: any): TableCell {
     return { type: 'empty' }
   }
@@ -17,18 +24,22 @@ export class ContentField extends Field<ContentFieldData> {
   }
 
   override dataListItemComponent(): any {
-    return null
+    // `content` is display-only: render its Markdown body (the same static
+    // block as the create form) so a detail-visible content field shows its
+    // configured instructions instead of an empty value row.
+    return defineComponent(() => () => this.renderBody(), { props: ['value'] })
   }
 
   override formInputComponent(): any {
-    return this.defineFormInputComponent((_props, _ctx) => {
-      return () => h(SMarkdown, {
-        content: this.ctx.lang === 'ja' ? this.data.bodyJa : this.data.bodyEn
-      }, {
-        default: (slot: any) => {
-          return h(SContent, { innerHTML: slot.rendered })
-        }
-      })
+    return this.defineFormInputComponent((_props, _ctx) => () => this.renderBody())
+  }
+
+  /** Render the field's localized Markdown body. */
+  private renderBody(): any {
+    return h(SMarkdown, {
+      content: this.ctx.lang === 'ja' ? this.data.bodyJa : this.data.bodyEn
+    }, {
+      default: (slot: any) => h(SContent, { innerHTML: slot.rendered })
     })
   }
 }

package/lib/blocks/lens/fields/Field.ts

@@ -110,7 +110,10 @@ export abstract class Field<T extends FieldData> {
    * Renders the table filter menu for the field. The filter maybe null when
    * the field has no available filters.
    */
-  async tableFilterMenu(_filters: any[], _onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+  async tableFilterMenu(
+    _filters: any[],
+    _onFilterUpdated: (filters: any[]) => void
+  ): Promise<DropdownSection | null> {
     return null
   }
 
@@ -212,6 +215,28 @@ export abstract class Field<T extends FieldData> {
     })
   }
 
+  /**
+   * Whether this field contributes a value to create / update payloads. Most
+   * fields do. Display-only fields (e.g. `content`, which renders static
+   * instructions in the form) return false so the sheet renders them but
+   * never seeds, validates, submits, or makes them inline-editable.
+   */
+  isSubmittable(): boolean {
+    return true
+  }
+
+  /**
+   * Whether this field can be edited in place (inline cell / record sheet) with
+   * an optimistic display. False for fields whose input value isn't the
+   * displayed value and needs a server round-trip first (e.g. a file upload,
+   * which holds raw `File` objects before upload) — patching the row with that
+   * raw value would render incorrectly or crash. Such fields remain editable in
+   * the create form, which is blocking.
+   */
+  supportsOptimisticUpdate(): boolean {
+    return true
+  }
+
   /**
    * Returns the value should be used when the input is empty.
    */

package/lib/blocks/lens/fields/FileUploadField.ts

@@ -16,6 +16,14 @@ export class FileUploadField extends Field<FileUploadFieldData> {
     this.downloader = downloader
   }
 
+  // The form input holds raw `File` objects until they're uploaded, which only
+  // happens server-side; an optimistic patch would store those `File`s on the
+  // row and crash the persisted-path renderer. So file uploads aren't editable
+  // inline / in the sheet (only on create, which is blocking).
+  override supportsOptimisticUpdate(): boolean {
+    return false
+  }
+
   override tableCell(v: any, _r: any): TableCell {
     return {
       type: 'text',

package/lib/blocks/lens/fields/RelatedManyField.ts

@@ -1,4 +1,7 @@
 import { xor } from 'lodash-es'
+import { h } from 'vue'
+import SDescAvatar from '../../../components/SDescAvatar.vue'
+import SDescPill from '../../../components/SDescPill.vue'
 import { type DropdownSection } from '../../../composables/Dropdown'
 import { type TableCell } from '../../../composables/Table'
 import { type RelatedManyFieldData } from '../FieldData'
@@ -16,7 +19,10 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
     this.fetcher = fetcher
   }
 
-  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+  override async tableFilterMenu(
+    filters: any[],
+    onFilterUpdated: (filters: any[]) => void
+  ): Promise<DropdownSection | null> {
     const method = this.data.resourceEndpointMethod
     const url = this.data.resourceEndpointPath
     const key = this.data.resourceEndpointDataKey
@@ -27,7 +33,7 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
 
     const selected = this.inFilterValueFor(this.data.key, filters)
 
-    const res = await this.fetcher(method, url)
+    const res = await this.fetcher(method, url, this.data.resourceEndpointBody)
     const data = key ? res[key] : res
 
     const isAvatar = this.data.displayAs === 'avatars'
@@ -37,11 +43,11 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
           type: 'avatar' as const,
           label: item[this.data.resourceTitle],
           image: this.data.resourceImage ? item[this.data.resourceImage] : null,
-          value: item[this.data.filterKey]
+          value: this.resolveValue(item[this.data.filterKey])
         }
       : {
           label: item[this.data.resourceTitle],
-          value: item[this.data.filterKey]
+          value: this.resolveValue(item[this.data.filterKey])
         })
 
     return {
@@ -88,10 +94,10 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
     }
 
     const optionsResolver = async () => {
-      const res = await this.fetcher(method, url)
+      const res = await this.fetcher(method, url, this.data.resourceEndpointBody)
       const data = key ? res[key] : res
       return data.map((item: any) => ({
-        value: item[this.data.filterKey],
+        value: this.resolveValue(item[this.data.filterKey]),
         label: item[this.data.resourceTitle]
       }))
     }
@@ -106,8 +112,39 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
     }
   }
 
+  // Lens id fields serialize as `{ value, display, path? }`; filters need the
+  // raw scalar. Unwrap that shape, passing plain scalars through untouched.
+  private resolveValue(raw: any): any {
+    return raw !== null && typeof raw === 'object' && 'value' in raw ? raw.value : raw
+  }
+
   override dataListItemComponent(): any {
-    throw new Error('Not implemented.')
+    return this.defineDataListItemComponent((value) => {
+      // related_many serializes as an array of relation objects (or null).
+      // Read the display name / image from the same keys `tableCell()` uses,
+      // instead of letting the generic fallback render `[object Object]`.
+      const items = (value ?? []) as any[]
+
+      if (items.length === 0) {
+        return null
+      }
+
+      if (this.data.displayAs === 'avatars') {
+        return h(SDescAvatar, {
+          avatar: items.map((item) => ({
+            avatar: this.data.image ? (item[this.data.image] ?? null) : null,
+            name: item[this.data.title] ?? null
+          }))
+        })
+      }
+
+      // 'pills' (and the null default): render one pill per related item.
+      return h(SDescPill, {
+        pill: items.map((item) => ({
+          label: item[this.data.title] ?? ''
+        }))
+      })
+    })
   }
 
   override formInputComponent() {

package/lib/blocks/lens/fields/RelatedOneField.ts

@@ -1,4 +1,6 @@
 import { xor } from 'lodash-es'
+import { h } from 'vue'
+import SDescAvatar from '../../../components/SDescAvatar.vue'
 import { type DropdownSection } from '../../../composables/Dropdown'
 import { type TableCell } from '../../../composables/Table'
 import { type RelatedOneFieldData } from '../FieldData'
@@ -16,7 +18,10 @@ export class RelatedOneField extends Field<RelatedOneFieldData> {
     this.fetcher = fetcher
   }
 
-  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+  override async tableFilterMenu(
+    filters: any[],
+    onFilterUpdated: (filters: any[]) => void
+  ): Promise<DropdownSection | null> {
     const method = this.data.resourceEndpointMethod
     const url = this.data.resourceEndpointPath
     const key = this.data.resourceEndpointDataKey
@@ -27,7 +32,7 @@ export class RelatedOneField extends Field<RelatedOneFieldData> {
 
     const selected = this.inFilterValueFor(this.data.key, filters)
 
-    const res = await this.fetcher(method, url)
+    const res = await this.fetcher(method, url, this.data.resourceEndpointBody)
     const data = key ? res[key] : res
 
     const isAvatar = this.data.displayAs === 'avatar'
@@ -37,11 +42,11 @@ export class RelatedOneField extends Field<RelatedOneFieldData> {
           type: 'avatar' as const,
           label: item[this.data.resourceTitle],
           image: this.data.resourceImage ? item[this.data.resourceImage] : null,
-          value: item[this.data.filterKey]
+          value: this.resolveValue(item[this.data.filterKey])
         }
       : {
           label: item[this.data.resourceTitle],
-          value: item[this.data.filterKey]
+          value: this.resolveValue(item[this.data.filterKey])
         })
 
     return {
@@ -91,10 +96,10 @@ export class RelatedOneField extends Field<RelatedOneFieldData> {
     }
 
     const optionsResolver = async () => {
-      const res = await this.fetcher(method, url)
+      const res = await this.fetcher(method, url, this.data.resourceEndpointBody)
       const data = key ? res[key] : res
       return data.map((item: any) => ({
-        value: item[this.data.filterKey],
+        value: this.resolveValue(item[this.data.filterKey]),
         label: item[this.data.resourceTitle]
       }))
     }
@@ -109,8 +114,38 @@ export class RelatedOneField extends Field<RelatedOneFieldData> {
     }
   }
 
+  // Lens id fields serialize as `{ value, display, path? }`; filters need the
+  // raw scalar. Unwrap that shape, passing plain scalars through untouched.
+  // (Mirrors `RelatedManyField` — relevant when a related-one resource reuses
+  // a Lens search endpoint whose `filterKey` is an id field.)
+  private resolveValue(raw: any): any {
+    return raw !== null && typeof raw === 'object' && 'value' in raw ? raw.value : raw
+  }
+
   override dataListItemComponent(): any {
-    throw new Error('Not implemented.')
+    return this.defineDataListItemComponent((value) => {
+      // related_one serializes as a single relation object (or null). Read the
+      // display name / image from the same keys `tableCell()` uses, instead of
+      // letting the generic fallback render the raw object as JSON.
+      if (value === null || value === undefined) {
+        return null
+      }
+
+      const name = value[this.data.title] ?? null
+
+      if (this.data.displayAs === 'avatar') {
+        return h(SDescAvatar, {
+          avatar: {
+            avatar: this.data.image ? (value[this.data.image] ?? null) : null,
+            name
+          }
+        })
+      }
+
+      // 'text' (and the null default): render the title as plain text, falling
+      // back to the empty placeholder when the title key is missing.
+      return name
+    })
   }
 
   override formInputComponent() {

package/lib/blocks/lens/validation/RuleMapper.ts

@@ -1,6 +1,15 @@
 import { type ValidationArgs, type ValidationRuleWithParams } from '@vuelidate/core'
 import { type Day, day } from '../../../support/Day'
-import { after, afterOrEqual, before, beforeOrEqual, maxLength, required, slackChannelName } from '../../../validation/rules'
+import {
+  after,
+  afterOrEqual,
+  before,
+  beforeOrEqual,
+  maxLength,
+  required,
+  slackChannelLink,
+  slackChannelName
+} from '../../../validation/rules'
 import { type Rule } from '../Rule'
 
 /**
@@ -8,17 +17,27 @@ import { type Rule } from '../Rule'
  */
 export function map(rules: Rule[]): ValidationArgs {
   return rules.reduce((carry: ValidationArgs<any>, rule: Rule) => {
-    carry[rule.type] = mapRule(rule)
+    const mapped = mapRule(rule)
+    if (mapped) {
+      carry[rule.type] = mapped
+    }
     return carry
   }, {})
 }
 
-function mapRule(rule: Rule): ValidationRuleWithParams {
+function mapRule(rule: Rule): ValidationRuleWithParams | null {
   switch (rule.type) {
     case 'max_length':
       return maxLength(rule.length)
     case 'required':
       return required()
+    case 'unique':
+      // Uniqueness can only be verified server-side (it queries the
+      // database). The backend enforces it and returns a 422 with field
+      // errors, so there is no client-side equivalent to apply here.
+      return null
+    case 'slack_channel_link':
+      return slackChannelLink()
     case 'slack_channel_name':
       return slackChannelName({ offset: rule.offset })
     case 'before':

package/lib/blocks/lens/validation/ServerErrors.ts

@@ -0,0 +1,25 @@
+import { isFetchError } from '../../../http/Http'
+
+/**
+ * Extract Laravel-style validation errors from a failed request. The backend
+ * enforces rules that can't run client-side (e.g. `unique`) and rejects with a
+ * 422 whose body is `{ message, errors: { <fieldKey>: string[] } }`, keyed by
+ * the bare field key.
+ *
+ * Returns the `errors` map so a form can feed it into Vuelidate's
+ * `$externalResults` and surface a fixable per-field message, or `null` when
+ * the error isn't a usable 422 (so the caller can rethrow it).
+ */
+export function extractServerErrors(error: unknown): Record<string, string[]> | null {
+  if (!isFetchError(error) || error.status !== 422) {
+    return null
+  }
+
+  const errors = (error.data as any)?.errors
+
+  if (!errors || typeof errors !== 'object') {
+    return null
+  }
+
+  return errors
+}

package/lib/components/SInputSwitches.vue

@@ -29,7 +29,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: any[]]
+  'update:model-value': [value: any[]]
 }>()
 
 const classes = computed(() => [
@@ -45,7 +45,7 @@ function onChange(value: any): void {
     .filter((v) => v !== value)
     .concat(props.modelValue.includes(value) ? [] : [value])
 
-  emit('update:modelValue', difference)
+  emit('update:model-value', difference)
 }
 </script>
 

package/lib/components/SSheet.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+import { ref } from 'vue'
+
+export interface Props {
+  open: boolean
+  closable?: boolean
+  position?: 'right' | 'left'
+  width?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  closable: true,
+  position: 'right',
+  width: '480px'
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const el = ref<any>(null)
+
+function onClick(e: MouseEvent) {
+  if (!props.closable) {
+    return
+  }
+
+  if (e.button === 0 && e.target === el.value) {
+    emit('close')
+  }
+}
+
+onKeyStroke('Escape', () => {
+  if (props.open && props.closable) {
+    emit('close')
+  }
+})
+</script>
+
+<template>
+  <Teleport to="#sefirot-modals">
+    <Transition name="s-sheet">
+      <div
+        v-if="open"
+        ref="el"
+        class="SSheet"
+        :class="[`pos-${position}`]"
+        @mousedown="onClick"
+      >
+        <div class="panel" :style="{ width }">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.SSheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--z-index-sheet);
+  display: flex;
+  padding: 8px;
+  transition: opacity 0.25s;
+}
+
+.SSheet.pos-right { justify-content: flex-end; }
+.SSheet.pos-left { justify-content: flex-start; }
+
+.SSheet.s-sheet-enter-from,
+.SSheet.s-sheet-leave-to {
+  opacity: 0;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 16px);
+  height: 100%;
+  border: 1px solid var(--c-divider);
+  border-radius: 12px;
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-3);
+  transition: transform 0.25s, opacity 0.25s;
+  overflow: hidden;
+}
+
+.SSheet.pos-right.s-sheet-enter-from .panel,
+.SSheet.pos-right.s-sheet-leave-to .panel {
+  opacity: 0;
+  transform: translateX(16px);
+}
+
+.SSheet.pos-left.s-sheet-enter-from .panel,
+.SSheet.pos-left.s-sheet-leave-to .panel {
+  opacity: 0;
+  transform: translateX(-16px);
+}
+</style>

package/lib/composables/Api.ts

@@ -59,11 +59,15 @@ export function useQuery<Data = any>(
   async function execute({ assign = true, silent = false } = {}): Promise<Data> {
     if (!silent) { loading.value = true }
 
-    const res: Data = await req(new Http(httpConfig))
-    if (assign) { data.value = res }
-
-    loading.value = false
-    return res
+    try {
+      const res: Data = await req(new Http(httpConfig))
+      if (assign) { data.value = res }
+      return res
+    } finally {
+      // Always clear loading, even when the request rejects — otherwise a failed
+      // fetch leaves the consumer stuck in its loading/skeleton state.
+      loading.value = false
+    }
   }
 
   return { loading, data, execute }
@@ -79,11 +83,15 @@ export function useMutation<Data = any, Args extends any[] = any[]>(
   async function execute(...args: Args): Promise<Data> {
     loading.value = true
 
-    const res: Data = await req(new Http(httpConfig), ...args)
-    data.value = res
-
-    loading.value = false
-    return res
+    try {
+      const res: Data = await req(new Http(httpConfig), ...args)
+      data.value = res
+      return res
+    } finally {
+      // Always clear loading, even when the request rejects, so a failed
+      // mutation doesn't leave the caller wedged in its loading state.
+      loading.value = false
+    }
   }
 
   return { loading, data, execute }