@globalbrain/sefirot 4.58.0 → 4.59.0

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

@@ -63,9 +63,6 @@ export interface Props {
   // Whether to show advanced filters.
   canFilter?: boolean
 
-  // Whether to show advanced sorting options.
-  canSort?: boolean
-
   // Whether to hide the condition blocks.
   hideConditions?: boolean
 
@@ -129,12 +126,16 @@ export interface Props {
   // setup, so toggling it afterwards has no effect.
   urlSync?: boolean
 
-  // Enable CRUD editing for the catalog. When set, fields the backend
-  // marks `showOnUpdate` become inline-editable, clicking a row's id cell
-  // opens the record sheet (view + per-field edit + delete), and the
-  // `openCreate()` method / sheet create mode become available. The CRUD
-  // endpoints are derived from `endpoint` by replacing the trailing
-  // `/search` with `/update`, `/create`, and `/delete`.
+  // Enable CRUD editing for the catalog.
+  //
+  // Every catalog already renders a **read-only detail sheet**: clicking a
+  // row's index-field cell opens the record for viewing (each `showOnDetail`
+  // field, read-only). `editable` builds on that same sheet. When set, fields
+  // the backend marks `showOnUpdate` become inline-editable in the table, the
+  // sheet gains per-field editing and a delete button, and the `openCreate()`
+  // method / sheet create mode become available. The CRUD endpoints are derived
+  // from `endpoint` by replacing the trailing `/search` with `/update`,
+  // `/create`, and `/delete`.
   //
   // The row identifier (`indexField`, defaulting to `id`) is never
   // inline- or sheet-editable on an existing row: optimistically changing
@@ -142,27 +143,28 @@ export interface Props {
   // follow-up save/delete would address the not-yet-synced new id. It can
   // still be set on creation (via a `showOnCreate` field).
   //
-  // An editable catalog must keep its index field among the rendered columns,
-  // because the row's sheet opener — and therefore the only way to view or
-  // delete a record — is the index-field cell. The default `id` identifier is
-  // kept when `select` is empty (server defaults), so that case works as-is; a
-  // *custom* `indexField`, however, must be listed in `select` explicitly (an
-  // empty/default `select` drops it from the rendered columns, leaving the rows
-  // with no opener).
+  // The sheet opener — and therefore the only way to view, edit, or delete a
+  // record — is the index-field cell, so that field must be a rendered column.
+  // The default `id` identifier is kept when `select` is empty (server
+  // defaults), so that case works as-is; a *custom* `indexField`, or `id`
+  // alongside an explicit `select`, must be listed in `select` explicitly (an
+  // empty/default `select` otherwise drops it, leaving the rows with no opener).
   //
   // Turning this on also enables `creatable`, `deletable`, and `inlineEditable`
   // by default; pass `false` to any of them to opt out.
   //
   // Pass a predicate `(record) => boolean` instead of `true` to allow editing
   // only some rows (e.g. from a per-record policy): the inline affordance and
-  // the sheet's per-field edit are hidden for the rows it rejects.
+  // the sheet's per-field edit are hidden for the rows it rejects (the sheet
+  // still opens read-only).
   editable?: boolean | ((record: Record<string, any>) => boolean)
 
   // Whether records can be deleted from the sheet. Defaults to enabled for an
   // editable catalog. Pass `false` to hide the delete button entirely, or a
   // predicate `(record) => boolean` to allow deleting only some rows (e.g. from
-  // a per-record policy). Delete is reachable only through the sheet, so this
-  // has no effect unless the catalog is `editable`.
+  // a per-record policy). The delete button lives in the record sheet — which
+  // opens for read-only viewing on any catalog — but stays gated behind edit
+  // permission, so this has no effect unless the catalog is `editable`.
   deletable?: boolean | ((record: Record<string, any>) => boolean)
 
   // Whether new records can be created (enables create mode in the sheet and
@@ -182,7 +184,6 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   canFilter: true,
-  canSort: true,
   // Default these on so an editable catalog gets create / delete / inline edit
   // without opting in to each. A boolean prop can't tell "omitted" from `false`
   // (Vue casts an absent boolean to `false`), so they default on here and the
@@ -623,7 +624,8 @@ const tableIndexField = computed(() => {
 // address each row; when no `indexField` is configured the identifier
 // defaults to `id`. When the caller has no concrete select list, nothing
 // is added either — leaving the request empty lets the server use its own
-// defaults. See `indexField` prop docs above.
+// defaults (which include `id`, so the read-only sheet still opens). See
+// `indexField` prop docs above.
 function withIndexField(fields: string[]): string[] {
   if (fields.length === 0) { return [] }
   const field = props.indexField ?? (props.editable ? 'id' : null)
@@ -1029,6 +1031,19 @@ async function refreshCatalog(): Promise<void> {
   await forceRefresh()
 }
 
+// Close an open *view* sheet when the effective identifier itself changes (an
+// async `indexField` resolving from the `id` default to `slug`, say): the open
+// record was keyed under the old field and can't be re-matched to the new one
+// (its row lacks the new key, so `resolveId` would be `undefined`), which would
+// let a delete/save act on the wrong — or no — id. Watched on `idField` alone,
+// not the editable-gated source below: that source can't tell an identifier
+// change from `editable` merely switching on when both happen in the same flush,
+// and `editable` flipping on with the identifier unchanged must leave an open
+// read-only sheet alone (viewing is the default; its record is still valid).
+watch(idField, () => {
+  if (sheet.state.value && sheetMode.value === 'view') { sheet.off() }
+})
+
 // When the effective row identifier appears or changes while editing is enabled,
 // the loaded rows won't carry it until a refetch runs — so refetch here. Two
 // cases: `editable` resolving true after mount (async permissions), so
@@ -1037,16 +1052,10 @@ async function refreshCatalog(): Promise<void> {
 // identifier, `rowsCarryIndexField` keeps editing gated off, and selection keys
 // go `undefined` until an unrelated query change. A no-op when the identifier was
 // already present (same request input → cached result reused).
-//
-// Close an open record sheet first: it was identified under the old field and
-// can't be reliably re-matched to the new one (its row lacks the new key, so
-// `resolveId` would be `undefined`), which would let a delete/save act on the
-// wrong — or no — id during and after the refetch.
 watch(
   () => (props.editable ? idField.value : null),
   (field, prev) => {
     if (!field || field === prev) { return }
-    if (sheet.state.value && sheetMode.value === 'view') { sheet.off() }
     // Supersede any search still in flight under the previous identifier state: it
     // was issued before the new id/index field, so its rows won't carry the new
     // key. If it resolved after this refetch it would assign those id-less rows
@@ -1468,14 +1477,24 @@ function editEnabled(): boolean {
   return !!props.editable && rowsCarryIndexField.value
 }
 
+// Catalog-level sheet gate: the read-only detail sheet is reachable on any
+// catalog — viewing is the default — as soon as the rows carry the index field
+// the opener resolves an id from. Editing, create, and delete stay gated on
+// `editable` (via `canEdit` / `canDelete` / the `creatable` getter), so a
+// non-editable catalog opens the same sheet read-only.
+function viewEnabled(): boolean {
+  return rowsCarryIndexField.value
+}
+
 // Per-record refinement: a predicate `editable`/`deletable` decides each row, a
 // boolean applies to all.
 function canEdit(record: Record<string, any>): boolean {
   return editEnabled() && (typeof props.editable === 'function' ? props.editable(record) : true)
 }
 
-// Delete is a stronger action than edit and rides the same editable sheet, so a
-// row must be editable before it can be deleted — building on `canEdit` makes a
+// Delete is a stronger action than edit and lives in the record sheet (whose
+// delete button only renders when editable), so a row must be editable before it
+// can be deleted — building on `canEdit` makes a
 // per-record `editable` predicate gate delete too (a row it rejects is never
 // deletable). `deletable` then refines further: on unless explicitly `false`, or
 // its own per-record predicate.
@@ -1486,13 +1505,18 @@ function canDelete(record: Record<string, any>): boolean {
 provideLensEdit({
   // Getters so the injected context tracks prop changes after mount (e.g.
   // permissions resolving async, or a flag toggling `editable` off): LensTable
-  // gates inline editing and the id-cell sheet on `edit.editable`.
+  // gates inline editing on `edit.editable` and the id-cell sheet opener on the
+  // broader `edit.viewable`.
   //
   // Also gated on `rowsCarryIndexField`: when `editable` flips true after mount we
   // trigger a refetch to pull in the identifier, but it lands asynchronously —
   // keep editing off until the rows actually carry it, so a save in that window
   // can't `resolveId()` to `undefined`.
   get editable() { return editEnabled() },
+  // `LensTable` gates the id-cell sheet opener on this: the read-only sheet is
+  // reachable on any catalog once the rows carry the index field, independent of
+  // `editable`.
+  get viewable() { return viewEnabled() },
   get creatable() { return !!props.editable && props.creatable },
   // Use the same `__no_entity__` fallback as the search / CRUD requests so slot
   // side-channel saves (which read this) target the same entity, not an empty one.
@@ -1575,7 +1599,6 @@ defineExpose({
         :selected
         :show-query="!!(queryKeys && queryKeys.length > 0)"
         :show-filters="canFilter"
-        :show-sort="canSort"
         :is-condition-active="!hideConditions"
         :is-condition-disabled="!hasConditions"
         @search="onQuery"
@@ -1696,7 +1719,7 @@ defineExpose({
     </SModal>
 
     <LensSheet
-      v-if="editable && result?.fields"
+      v-if="(editable || rowsCarryIndexField) && result?.fields"
       :open="sheet.state.value"
       :mode="sheetMode"
       :entity="entityName"

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

@@ -117,11 +117,14 @@ const columns = computedAsync(async () => {
 
     const column = field.tableColumn()
 
-    // When editing is enabled, clicking the row-identifier cell opens the record
-    // sheet (view + per-field edit + delete) instead of following a link. Keyed
-    // off the configured index field for any field type — a slug/code identifier
-    // opens the sheet just like an `id` — so other id-type columns (e.g. a
-    // `company_id` reference link) keep their own navigation.
+    // The detail sheet is reachable on any catalog once the rows carry the index
+    // field (`edit.viewable`) — viewing is the default; `editable` only adds the
+    // per-field edit / delete affordances inside it. So clicking the row-identifier
+    // cell opens the record sheet (read-only, or editable when the catalog is)
+    // instead of following a link. Keyed off the configured index field for any
+    // field type — a slug/code identifier opens the sheet just like an `id` — so
+    // other id-type columns (e.g. a `company_id` reference link) keep their own
+    // navigation.
     //
     // Exception: an `id` field whose server value carries a `path` renders that
     // path as a link; respect it so those rows navigate to the details page instead
@@ -130,7 +133,7 @@ const columns = computedAsync(async () => {
     // a `link` / `slack_message` identifier) is still turned into the sheet opener,
     // as is a column whose `cell` is undefined (falls straight through to the opener).
     if (
-      edit?.editable
+      edit?.viewable
       && key === edit.indexField
     ) {
       const original = column.cell

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

@@ -424,9 +424,9 @@ function onEditorKeydown(event: KeyboardEvent) {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid var(--c-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: var(--c-bg-1);
   box-shadow: var(--shadow-depth-3);
 }

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

@@ -147,7 +147,7 @@ const { validation, validate, reset } = useValidation(
 
 const editorStyle = computed(() => ({
   ...inset.value,
-  width: `${Math.max(bounds.width.value, 240)}px`
+  width: `${Math.max(bounds.width.value, 224)}px`
 }))
 
 function start() {
@@ -352,9 +352,9 @@ function onEditorKeydown(event: KeyboardEvent) {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid var(--c-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: var(--c-bg-1);
   box-shadow: var(--shadow-depth-3);
 }

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

@@ -10,6 +10,15 @@ export interface LensEditContext {
   /** Whether the catalog has editing enabled at all. */
   editable: boolean
 
+  /**
+   * Whether the detail sheet is reachable. Viewing is the default: true on any
+   * catalog once the rows carry the index field the opener resolves an id from,
+   * independent of `editable`. The index-field cell opens the sheet on this gate,
+   * while the mutation affordances inside stay gated on `canEdit` / `canDelete` /
+   * `creatable`, so a non-editable catalog opens a read-only sheet.
+   */
+  viewable: boolean
+
   /** Whether new records may be created. */
   creatable: boolean
 

package/lib/components/SInputRadios.vue

@@ -94,3 +94,9 @@ function onChange(value: T) {
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
+
+<style scoped>
+.container {
+  padding-left: 2px;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.58.0",
+  "version": "4.59.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",