@wildo-ai/presets-components 1.1.4 → 1.1.6

package/dist/esm/config/resources/organizations.resource-presets.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { resourceUIBehavior, resourceUIBehaviorFrom, StandardIconReference, ActionVisibility, } from '@wildo-ai/saas-frontend-lib';
-import { DisplayField, DisplayLayout, FormField, FormLayout, ObjectScope, RelatedResourceSections, Section, SummaryLayout, SummaryFlow, SummaryMeta, SummaryTitle, } from '@wildo-ai/saas-frontend-lib';
+import { resourceUIBehavior, resourceUIBehaviorFrom, StandardIconReference, ActionVisibility, useApplication, ResourceLayoutInlineEditDefault, CollectionDisplayMode, } from '@wildo-ai/saas-frontend-lib';
+import { DisplayField, DisplayLayout, FormField, FormLayout, ObjectScope, RelatedResourceSections, ResourceHeaderTitle, Section, SummaryLayout, SummaryFlow, SummaryMeta, SummaryTitle, } from '@wildo-ai/saas-frontend-lib';
 import { BadgeSemanticVariant, DisplayChromeMode, EditChromeMode, EnumDisplayMode, SectionMode } from '@wildo-ai/zod-decorators';
-import { Archive, ArchiveRestore, Ban, CirclePause, GitBranch, Move, Paintbrush, Power, RotateCcw, Send, ToggleLeft, ToggleRight, Trash2, UserPlus, } from 'lucide-react';
-import { CoreResourceType as R, CoreResourceOperation as Op, OrganizationStatus, OrganizationMemberStatus, OrganizationUnit_Operations, OrganizationMembers_Operations, OrganizationProfile_Operations, Organization_Lifecycle_Operations, OrganizationFeatures_Operations, organizationResourceConfiguration_InitializationFactory as orgFactory, organizationUnitResourceConfiguration_InitializationFactory as orgUnitFactory, organizationMembersResourceConfiguration_InitializationFactory as orgMembersFactory, organizationProfileResourceConfiguration_InitializationFactory as orgProfileFactory, organizationNotificationsResourceConfiguration_InitializationFactory as orgNotificationsFactory, organizationPreferencesResourceConfiguration_InitializationFactory as orgPreferencesFactory, organizationFeaturesResourceConfiguration_InitializationFactory as orgFeaturesFactory, OrganizationSchema, OrganizationUnitSchema, OrganizationMemberSchema, OrganizationProfileSchema, OrganizationNotificationsSchema, OrganizationPreferencesSchema, ScopeFeaturesWithOverridesSchema, } from '@wildo-ai/saas-models';
+import { Archive, ArchiveRestore, BadgeCheck, Ban, CirclePause, GitBranch, Landmark, Move, Paintbrush, Power, RotateCcw, Send, ToggleLeft, ToggleRight, Trash2, UserPlus, } from 'lucide-react';
+import { CoreResourceType as R, CoreResourceOperation as Op, ExternalIdentitySource, OrganizationStatus, OrganizationMemberStatus, OrganizationUnitStatus, OrganizationUnit_Operations, OrganizationMembers_Operations, OrganizationProfile_Operations, Organization_Lifecycle_Operations, OrganizationFeatures_Operations, organizationResourceConfiguration_InitializationFactory as orgFactory, organizationUnitResourceConfiguration_InitializationFactory as orgUnitFactory, organizationMembersResourceConfiguration_InitializationFactory as orgMembersFactory, organizationProfileResourceConfiguration_InitializationFactory as orgProfileFactory, organizationNotificationsResourceConfiguration_InitializationFactory as orgNotificationsFactory, organizationPreferencesResourceConfiguration_InitializationFactory as orgPreferencesFactory, organizationFeaturesResourceConfiguration_InitializationFactory as orgFeaturesFactory, OrganizationSchema, OrganizationUnitSchema, OrganizationMemberSchema, OrganizationProfileSchema, OrganizationNotificationsSchema, OrganizationPreferencesSchema, ScopeFeaturesWithOverridesSchema, } from '@wildo-ai/saas-models';
 import { addressable, notAddressable, apiOnly } from './resource.config.utils.js';
 /**
  * Organizations — Resource frontend presets
@@ -15,6 +15,22 @@ import { addressable, notAddressable, apiOnly } from './resource.config.utils.js
  * Enum badges use inline `values` and `showDescription: true` like `billing.resource-presets.tsx`.
  * Layout templates are implemented inline in each resource config.
  */
+/**
+ * An organization's `type`, offered as a choice among the application's DECLARED organization types (#1032).
+ *
+ * The type is required and must name a declared type — creation refuses anything else, and a member of an
+ * organization whose type names nothing cannot sign in. The declaration is the application's, so the schema cannot
+ * carry it as an enum; this reads it from the running application's configuration and hands it to the field. As free
+ * text the same field accepted a typo and refused it only after submit.
+ *
+ * Rendered as a component (layout templates are), so reading the application context here is legal. The field still
+ * hides itself on edit forms, where `type` is creation-time identity.
+ */
+function DeclaredOrganizationTypeFormField() {
+    const { appConfig } = useApplication();
+    const declaredOrganizationTypes = Object.keys(appConfig.organizationTypes ?? {});
+    return _jsx(FormField, { name: "type", allowedValues: declaredOrganizationTypes });
+}
 /**
  * Org lifecycle-transition action config, shared by the main and admin org
  * presets (the same super-admin transitions surface in the main-app settings
@@ -38,23 +54,63 @@ const organizationLifecycleOpViews = [
     // Only ever available on a marked tenant, and only to a platform super-admin — the role gate on
     // the action bar hides it from everyone else, and `WHEN_AVAILABLE` hides it on a live tenant.
     [Organization_Lifecycle_Operations.RESTORE, notAddressable({ iconOverride: RotateCcw, actionVisibility: ActionVisibility.WHEN_AVAILABLE, hasDescription: true })],
+    // #1054 — name this organization as the one that OPERATES the application. Surfaced for the same
+    // reason `restore` is: it is an operator door with no other in-product route, and the role gate on
+    // the action bar plus `WHEN_AVAILABLE` (the operation is enabled only from ACTIVE) already hide it
+    // from everyone it does not concern. `hasDescription` because the confirmation copy must carry what
+    // a generic dialog cannot: this is IRREVERSIBLE — there is no demotion door — and it requires a
+    // justification that is recorded on the audit trail.
+    [Organization_Lifecycle_Operations.PROMOTE_TO_OWNER_ORGANIZATION, notAddressable({ iconOverride: Landmark, actionVisibility: ActionVisibility.WHEN_AVAILABLE, hasDescription: true })],
 ];
 export function buildOrganizationsMainPresets() {
     return {
         [R.ORGANIZATIONS]: resourceUIBehavior(orgFactory, OrganizationSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
             icon: StandardIconReference.ORGANIZATION,
             layout: {
-                refs: { sections: ['overview', 'lifecycle'] },
+                // NO section refs, on either surface. A `<Section>` is a THREE-PLACE obligation — the JSX
+                // name, this manifest, and a documented slot in the resource specification — and what it
+                // buys is a heading. The read pane is one flat list of rows, and the edit form holds two
+                // writable fields (`name`, `slug`: `status` and `type` are `excludeFromUpdate`), so an
+                // "Overview" card over either was a heading over the only group on the page.
+                refs: { sections: [] },
                 // Settings-page chrome: shown in the Settings Hub (General). Read + edit render as
-                // label-left / value-right rows; the list/summary stays compact.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "name" }), _jsx(DisplayField, { name: "slug" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "type" })] }), _jsx(Section, { name: "lifecycle", children: _jsx(DisplayField, { name: "createdAt" }) }), _jsx(RelatedResourceSections, { config: { mode: SectionMode.TABS }, targets: [R.ORGANIZATION_UNITS, R.ORGANIZATION_MEMBERS, R.ORGANIZATION_FEATURES] })] })),
-                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "slug" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "type" }), _jsx(DisplayField, { name: "createdAt" })] })] })),
-                edit: () => (_jsx(FormLayout, { children: _jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "name" }), _jsx(FormField, { name: "slug" }), _jsx(FormField, { name: "status" }), _jsx(FormField, { name: "type" })] }) })),
+                // label-left / value-right rows. A card (the admin directory, a reference popover) shows
+                // bare values: the status badge and the type say what they are without a label.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.SETTINGS_ROW },
+                // Organization general settings. A settings pane is a list of decisions an operator came to TAKE, so its
+                // writable fields are offered in place rather than behind a whole-pane edit mode. The set is
+                // DERIVED (not primary key, not excludeFromUpdate, not hidden, not opted out), so a field
+                // added to this schema tomorrow is covered without anyone remembering to decorate it.
+                defaultInlineEdit: ResourceLayoutInlineEditDefault.WRITABLE_FIELDS,
+                // And its empty rows say WHICH emptiness they are — "None yet" for a list with no members,
+                // "Not available" for a computed value, "No value" for a field awaiting input — instead of one
+                // em dash standing for all three. The surface policy's dash is right where a reader is scanning;
+                // on a settings row, which is read one at a time to decide something, it is an answer that
+                // refuses to answer.
+                defaultEmptyValue: 'placeholder',
+                // The identity line: the organization's name, and its status beside it — the one fact about
+                // a tenant a reader needs before anything else (a suspended or marked tenant reads
+                // differently from a live one). Neither is repeated in the body.
+                header: () => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-field", children: [_jsx(ResourceHeaderTitle, {}), _jsx(DisplayField, { name: "status", hideLabel: true, hideDescription: true, className: "w-auto" })] })),
+                display: () => (_jsxs(DisplayLayout, { children: [_jsx(DisplayField, { name: "slug" }), _jsx(DisplayField, { name: "type" }), _jsx(DisplayField, { name: "createdAt" }), _jsx(RelatedResourceSections, { config: { mode: SectionMode.TABS }, targets: [] })] })),
+                // The card names the organization and says what state it is in and what kind it is — the two
+                // facts that tell one tenant from another in a directory. The slug restates the name in URL
+                // form, and the creation date answers a question nobody scanning a directory is asking; both
+                // stay on the read pane.
+                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "type" })] })] })),
+                // No section: see `refs`. `name` first and focused — it is the field an administrator opens
+                // this form to change. `status` and the declared type are creation-time inputs (the admin
+                // CREATE form); both are `excludeFromUpdate`, so the edit form skips them and asks for the
+                // name and slug alone.
+                edit: () => (_jsxs(FormLayout, { children: [_jsx(FormField, { name: "name", autoFocus: true }), _jsx(FormField, { name: "slug" }), _jsx(FormField, { name: "status" }), _jsx(DeclaredOrganizationTypeFormField, {})] })),
             },
             fields: {
                 status: schemaShape.status.enumUI({
-                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: true },
+                    // No description on the READ surface: the badge already IS the answer, and the per-value
+                    // sentence under it is a paragraph explaining a word the reader has just read — the
+                    // tallest thing on a settings row for the least it says. EDIT keeps it, because there the
+                    // reader is CHOOSING between values and the sentence is what distinguishes them.
+                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: false },
                     edit: { showDescription: true },
                     values: {
                         [OrganizationStatus.ACTIVE]: { color: BadgeSemanticVariant.SUCCESS },
@@ -85,10 +141,62 @@ export function buildOrganizationsMainPresets() {
             icon: GitBranch,
             getFrontendResourceLabel: ({ currentObject }) => currentObject.name,
             layout: {
-                refs: { sections: ['identity', 'hierarchy'] },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "identity", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "name" }), _jsx(DisplayField, { name: "code" }), _jsx(DisplayField, { name: "type" }), _jsx(DisplayField, { name: "status" })] }), _jsxs(Section, { name: "hierarchy", children: [_jsx(DisplayField, { name: "parentUnitId" }), _jsx(DisplayField, { name: "path" }), _jsx(DisplayField, { name: "inheritanceType" })] }), _jsx(RelatedResourceSections, { config: { mode: SectionMode.TABS }, targets: [R.ORGANIZATION_UNITS] })] })),
-                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "type" }), _jsx(DisplayField, { name: "status" })] })] })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "identity", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "name" }), _jsx(FormField, { name: "code" }), _jsx(FormField, { name: "type" }), _jsx(FormField, { name: "status" })] }), _jsxs(Section, { name: "hierarchy", children: [_jsx(FormField, { name: "parentUnitId" }), _jsx(FormField, { name: "inheritanceType" })] })] })),
+                // NO section refs, on either surface. The read pane holds at most five rows once the name and
+                // the two state badges moved to the header, and the form at most six fields: an "Identity"
+                // heading over the unit's own facts named the page, and a "Hierarchy" heading over two rows
+                // (one of which a root unit does not have, and one the edit form cannot write) was a heading
+                // over a single row as often as not.
+                refs: { sections: [] },
+                // Read rows are SETTINGS_ROW (label start, value end); cards show bare values; the form stacks
+                // label over control, because a unit is AUTHORED — named and placed — not toggled.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.STACKED },
+                // The identity line: the unit's name, its status, and — for a unit a SCIM directory created —
+                // that directory's badge (#1392). A directory-owned unit is reconciled by the directory, so a
+                // rename made here is reverted without an error; the badge beside the name is where a reader
+                // learns that before trying. It hides itself on a hand-authored unit.
+                header: () => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-field", children: [_jsx(ResourceHeaderTitle, {}), _jsx(DisplayField, { name: "status", hideLabel: true, hideDescription: true, className: "w-auto" }), _jsx(DisplayField, { name: "externalSource", hideLabel: true, hideDescription: true, className: "w-auto" })] })),
+                /*
+                 * One column of facts, each once. `name`, `status` and `externalSource` are the header's.
+                 * `path` is not shown: it is the materialized chain of ancestor ids the tree is queried by — the
+                 * same fact `parentUnitId` states by name, spelled as identifiers. Every optional row hides when
+                 * empty, so a root unit with no code or type reads as its parent-less, inheritance-only self.
+                 */
+                display: () => (_jsxs(DisplayLayout, { children: [_jsx(DisplayField, { name: "code" }), _jsx(DisplayField, { name: "type" }), _jsx(DisplayField, { name: "parentUnitId" }), _jsx(DisplayField, { name: "inheritanceType" }), _jsx(DisplayField, { name: "externalId" }), _jsx(RelatedResourceSections, { config: { mode: SectionMode.TABS }, targets: [R.ORGANIZATION_UNITS] })] })),
+                // A card: the unit's name, then its state and kind as bare values. The directory badge says
+                // "SCIM", which needs no label; "Active" and "Team" read as what they are.
+                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "type" }), _jsx(DisplayField, { name: "externalSource" })] })] })),
+                /*
+                 * The name first and focused; the two short identifying fields share a row where the form is
+                 * wide enough. `parentUnitId` is `excludeFromUpdate` — re-parenting is the MOVE operation's — so
+                 * it appears on the create form only, and the edit form skips it.
+                 */
+                edit: () => (_jsxs(FormLayout, { children: [_jsx(FormField, { name: "name", autoFocus: true }), _jsx("div", { className: "@container", children: _jsxs("div", { className: "grid grid-cols-1 gap-group @md:grid-cols-2", children: [_jsx(FormField, { name: "code" }), _jsx(FormField, { name: "type" })] }) }), _jsx(FormField, { name: "status" }), _jsx(FormField, { name: "parentUnitId" }), _jsx(FormField, { name: "inheritanceType" })] })),
+            },
+            fields: {
+                // A badge, because it is the unit's STATE — read at a glance beside its name. The per-value
+                // sentence stays on the form, where it distinguishes the choices.
+                status: schemaShape.status.enumUI({
+                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: false },
+                    edit: { showDescription: true },
+                    values: {
+                        [OrganizationUnitStatus.ACTIVE]: { color: BadgeSemanticVariant.SUCCESS },
+                        [OrganizationUnitStatus.INACTIVE]: { color: BadgeSemanticVariant.SECONDARY },
+                        [OrganizationUnitStatus.ARCHIVED]: { color: BadgeSemanticVariant.OUTLINE },
+                        [OrganizationUnitStatus.SUSPENDED]: { color: BadgeSemanticVariant.DESTRUCTIVE },
+                    },
+                }),
+                // A badge, because it is a STATE of the row the reader needs at a glance in a list — the
+                // one fact that explains why a rename does not stick. Empty for a hand-authored unit.
+                externalSource: schemaShape.externalSource.enumUI({
+                    display: { displayMode: EnumDisplayMode.BADGE, hideWhenEmpty: true },
+                    values: { [ExternalIdentitySource.SCIM]: { color: BadgeSemanticVariant.INFO } },
+                }),
+                // Optional facts: a dash under each said nothing, and on most units most of them are unset.
+                code: schemaShape.code.stringUI({ display: { hideWhenEmpty: true } }),
+                type: schemaShape.type.enumUI({ display: { hideWhenEmpty: true } }),
+                // A root unit hangs directly under the organization; "no parent" is what the absence means.
+                parentUnitId: schemaShape.parentUnitId.foreignKeyUI({ display: { hideWhenEmpty: true } }),
+                externalId: schemaShape.externalId.stringUI({ display: { hideWhenEmpty: true } }),
             },
             views: [
                 [Op.CREATE, notAddressable()],
@@ -105,16 +213,49 @@ export function buildOrganizationsMainPresets() {
         [R.ORGANIZATION_MEMBERS]: resourceUIBehavior(orgMembersFactory, OrganizationMemberSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
             icon: StandardIconReference.TEAM,
             layout: {
-                refs: { sections: ['overview', 'membership'] },
-                // Settings-page chrome (Settings Hub → Members): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "userTitle" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "roles" })] }), _jsx(Section, { name: "membership", children: _jsx(DisplayField, { name: "createdAt" }) })] })),
-                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "userTitle" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "roles" }), _jsx(DisplayField, { name: "status" })] })] })),
-                edit: () => (_jsx(FormLayout, { children: _jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "userEmail" }), _jsx(FormField, { name: "userTitle" }), _jsx(FormField, { name: "status" }), _jsx(FormField, { name: "roles" })] }) })),
+                // NO section refs, on either surface. The read pane was an "Overview" card of three rows and a
+                // "Membership" section holding `createdAt` alone — a heading over the page and a heading over
+                // one row. The invite form is one group of at most four fields. Neither heading distinguished
+                // anything.
+                refs: { sections: [] },
+                // Settings-page chrome (Settings Hub → Members): label-left / value-right rows on read and on
+                // the invite/edit form; bare values on a card, where the badge and the role speak for themselves.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.SETTINGS_ROW },
+                // The identity line: the member's name, and their status beside it — invited, active,
+                // suspended is the first thing an administrator opening a member needs. Neither is a body row.
+                header: () => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-field", children: [_jsx(ResourceHeaderTitle, {}), _jsx(DisplayField, { name: "status", hideLabel: true, hideDescription: true, className: "w-auto" })] })),
+                /*
+                 * The membership's own facts, once each: the roles it confers, the member's job title when one
+                 * was given, the firm a service provider's expert came through (#1597, "via {Firm}"), and when
+                 * the membership began. Unit assignments are not a field here (D-B5): they are
+                 * ORGANIZATION_UNIT_MEMBERS rows, composed below the rows as that resource's own tab.
+                 */
+                display: () => (_jsxs(DisplayLayout, { children: [_jsx(DisplayField, { name: "roles" }), _jsx(DisplayField, { name: "userTitle" }), _jsx(DisplayField, { name: "providerOrganizationName" }), _jsx(DisplayField, { name: "createdAt" })] })),
+                // A card (the member list in card mode, a reference popover): the member's name — the resolved
+                // label, forwarded from their profile — then status, roles and the firm, bare. It used to title
+                // the card with `userTitle`, a job title most members never set, so most cards had no title.
+                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, {}), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "roles" }), _jsx(DisplayField, { name: "providerOrganizationName" })] })] })),
+                edit: () => (_jsxs(FormLayout, { children: [_jsx(FormField, { name: "userEmail", autoFocus: true }), _jsx(FormField, { name: "roles" }), _jsx(FormField, { name: "userTitle" }), _jsx(FormField, { name: "status" })] })),
             },
             fields: {
+                providerOrganizationName: schemaShape.providerOrganizationName.stringUI({ display: { hideWhenEmpty: true } }),
+                // Most members have no job title; a row of "—" under every one of them said nothing.
+                userTitle: schemaShape.userTitle.stringUI({ display: { hideWhenEmpty: true } }),
+                /*
+                 * Two raw identifiers, hidden from DISPLAY so they stop being table columns. Both are summary
+                 * fields for the backend's sake (the provider membership's live filter reads them), and the
+                 * member TABLE derives its columns from summary fields — so every tenant's directory carried
+                 * two always-empty columns — one of them headed "Provider organization", like the name column
+                 * beside it — holding ids nobody can read. `providerOrganizationName` is the readable form of the same fact and stays.
+                 */
+                serviceProviderRelationshipId: schemaShape.serviceProviderRelationshipId.isHidden({ display: true }),
+                providerOrganizationId: schemaShape.providerOrganizationId.isHidden({ display: true }),
                 status: schemaShape.status.enumUI({
-                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: true },
+                    // No description on the READ surface: the badge already IS the answer, and the per-value
+                    // sentence under it is a paragraph explaining a word the reader has just read — the
+                    // tallest thing on a settings row for the least it says. EDIT keeps it, because there the
+                    // reader is CHOOSING between values and the sentence is what distinguishes them.
+                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: false },
                     edit: { showDescription: true },
                     values: {
                         [OrganizationMemberStatus.INVITED]: { color: BadgeSemanticVariant.INFO },
@@ -124,13 +265,19 @@ export function buildOrganizationsMainPresets() {
                     },
                 }),
             },
-            // A membership has no inherent name — its identity is the related user.
-            // `instanceLabel` is a server-resolved virtual field that forwards the
-            // user's name live from `USER_PROFILES` (see `forwardedLabel` on
-            // `OrganizationMemberSchema`), so the label is a plain, synchronous field
-            // ref — never stale, tenant-safe, no async frontend resolver. `userTitle`
-            // is the distinct authored job title and stays its own FIELD.
-            getFrontendResourceLabel: ['instanceLabel'],
+            /*
+             * A membership has no inherent name — its identity is the related user. `instanceLabel` is a
+             * server-resolved virtual field that forwards the user's name live from `USER_PROFILES` (see
+             * `forwardedLabel` on `OrganizationMemberSchema`); `userTitle` is the distinct authored job title
+             * and stays its own FIELD.
+             *
+             * `userEmail` is the second choice because the virtual label is projected on the SUMMARY DTO
+             * only: the READ that the page header and a foreign-key reference fetch carries no
+             * `instanceLabel`, and the header then fell back to "<userId> ORG_MEMBER INACTIVE" — the raw
+             * summary fields. The email is on the row itself, and it is the same fallback `forwardedLabel`
+             * applies server-side when a profile has no name.
+             */
+            getFrontendResourceLabel: ({ currentObject }) => currentObject.instanceLabel || currentObject.userEmail || '',
             views: [
                 [Op.COUNT, notAddressable()],
                 // CREATE is the org-admin INVITE entry point (it mints the invitee's pending
@@ -141,7 +288,18 @@ export function buildOrganizationsMainPresets() {
                 // way to invite from the UI.
                 [Op.CREATE, notAddressable({ iconOverride: UserPlus })],
                 [Op.READ, notAddressable()],
-                [Op.LIST, addressable()],
+                // A people directory. Identity, role, status and last activity are COMPARABLE across rows, which is what a table is for — and what every B2B product renders here.
+                // CARDS is the framework default and nothing had ever declared otherwise, so every
+                // collection in the product rendered as stacked cards — ~150px per row, four people to a
+                // viewport, with each field's help text and label repeated on every card. TABLE writes the
+                // headers once. `userSwitchableDisplayMode` keeps cards one click away rather than removing
+                // a rendering somebody may prefer on a narrow screen.
+                [Op.LIST, addressable({
+                        collectionDisplayConfig: {
+                            displayMode: CollectionDisplayMode.TABLE,
+                            userSwitchableDisplayMode: true,
+                        },
+                    })],
                 [Op.SEARCH, notAddressable()],
                 [Op.UPDATE, notAddressable()],
                 [Op.DELETE, notAddressable()],
@@ -164,9 +322,12 @@ export function buildOrganizationsMainPresets() {
             getFrontendResourceLabel: ({ currentObject }) => currentObject.displayName || `Organization ${currentObject.organizationId}`,
             layout: {
                 refs: { sections: ['company', 'classification', 'location', 'branding', 'social'] },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "company", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "displayName" }), _jsx(DisplayField, { name: "domain" }), _jsx(DisplayField, { name: "website" }), _jsx(DisplayField, { name: "phone" }), _jsx(DisplayField, { name: "description" })] }), _jsxs(Section, { name: "classification", children: [_jsx(DisplayField, { name: "industry" }), _jsx(DisplayField, { name: "size" }), _jsx(DisplayField, { name: "founded" }), _jsx(DisplayField, { name: "timezone" })] }), _jsx(Section, { name: "location", children: _jsx(DisplayField, { name: "address" }) }), _jsx(Section, { name: "branding", children: _jsxs(ObjectScope, { name: "branding", children: [_jsx(DisplayField, { name: "logo" }), _jsx(DisplayField, { name: "favicon" }), _jsx(DisplayField, { name: "primaryColor" }), _jsx(DisplayField, { name: "secondaryColor" }), _jsx(DisplayField, { name: "customDomain" })] }) }), _jsx(Section, { name: "social", children: _jsxs(ObjectScope, { name: "socialLinks", children: [_jsx(DisplayField, { name: "linkedin" }), _jsx(DisplayField, { name: "twitter" }), _jsx(DisplayField, { name: "facebook" }), _jsx(DisplayField, { name: "github" })] }) })] })),
-                summary: () => (_jsx(SummaryLayout, { children: _jsx(DisplayField, { name: "displayName" }) })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "company", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "displayName" }), _jsx(FormField, { name: "domain" }), _jsx(FormField, { name: "website" }), _jsx(FormField, { name: "phone" }), _jsx(FormField, { name: "description" })] }), _jsxs(Section, { name: "classification", children: [_jsx(FormField, { name: "industry" }), _jsx(FormField, { name: "size" }), _jsx(FormField, { name: "founded" }), _jsx(FormField, { name: "timezone" })] }), _jsx(Section, { name: "location", children: _jsx(FormField, { name: "address" }) }), _jsx(Section, { name: "branding", children: _jsxs(ObjectScope, { name: "branding", children: [_jsx(FormField, { name: "logo" }), _jsx(FormField, { name: "favicon" }), _jsx(FormField, { name: "primaryColor" }), _jsx(FormField, { name: "secondaryColor" }), _jsx(FormField, { name: "customDomain" })] }) }), _jsx(Section, { name: "social", children: _jsxs(ObjectScope, { name: "socialLinks", children: [_jsx(FormField, { name: "linkedin" }), _jsx(FormField, { name: "twitter" }), _jsx(FormField, { name: "facebook" }), _jsx(FormField, { name: "github" })] }) })] })),
+                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "company", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "displayName" }), _jsx(DisplayField, { name: "domain" }), _jsx(DisplayField, { name: "website" }), _jsx(DisplayField, { name: "phone" }), _jsx(DisplayField, { name: "description" })] }), _jsxs(Section, { name: "classification", children: [_jsx(DisplayField, { name: "industry" }), _jsx(DisplayField, { name: "size" }), _jsx(DisplayField, { name: "founded" }), _jsx(DisplayField, { name: "timezone" })] }), _jsx(Section, { name: "location", children: _jsx(DisplayField, { name: "address" }) }), _jsx(Section, { name: "branding", children: _jsxs(ObjectScope, { name: "branding", children: [_jsx(DisplayField, { name: "logo" }), _jsx(DisplayField, { name: "favicon" }), _jsx(DisplayField, { name: "primaryColor" }), _jsx(DisplayField, { name: "secondaryColor" })] }) }), _jsx(Section, { name: "social", children: _jsxs(ObjectScope, { name: "socialLinks", children: [_jsx(DisplayField, { name: "linkedin" }), _jsx(DisplayField, { name: "twitter" }), _jsx(DisplayField, { name: "facebook" }), _jsx(DisplayField, { name: "github" })] }) })] })),
+                summary: () => (
+                // The card's LABEL already opens with `displayName`, so rendering it again as the only
+                // field said one thing twice. It is the TITLE of this card, not a row beneath one.
+                _jsx(SummaryLayout, { children: _jsx(SummaryTitle, { name: "displayName" }) })),
+                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "company", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "displayName" }), _jsx(FormField, { name: "domain" }), _jsx(FormField, { name: "website" }), _jsx(FormField, { name: "phone" }), _jsx(FormField, { name: "description" })] }), _jsxs(Section, { name: "classification", children: [_jsx(FormField, { name: "industry" }), _jsx(FormField, { name: "size" }), _jsx(FormField, { name: "founded" }), _jsx(FormField, { name: "timezone" })] }), _jsx(Section, { name: "location", children: _jsx(FormField, { name: "address" }) }), _jsx(Section, { name: "branding", children: _jsxs(ObjectScope, { name: "branding", children: [_jsx(FormField, { name: "logo" }), _jsx(FormField, { name: "favicon" }), _jsx(FormField, { name: "primaryColor" }), _jsx(FormField, { name: "secondaryColor" })] }) }), _jsx(Section, { name: "social", children: _jsxs(ObjectScope, { name: "socialLinks", children: [_jsx(FormField, { name: "linkedin" }), _jsx(FormField, { name: "twitter" }), _jsx(FormField, { name: "facebook" }), _jsx(FormField, { name: "github" })] }) })] })),
             },
             views: [
                 [Op.READ, notAddressable()],
@@ -201,11 +362,20 @@ export function buildOrganizationsMainPresets() {
             ],
         })),
         [R.ORGANIZATION_FEATURES]: resourceUIBehavior(orgFeaturesFactory, ScopeFeaturesWithOverridesSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
+            // The header showed the registry's missing-icon placeholder: nothing had ever named one.
+            icon: BadgeCheck,
             layout: {
                 refs: { sections: ['overview', 'overrides'] },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "features" }), _jsx(DisplayField, { name: "limits" })] }), _jsx(Section, { name: "overrides", children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(DisplayField, { name: "addedFeatures" }), _jsx(DisplayField, { name: "removedFeatures" }), _jsx(DisplayField, { name: "limitOverrides" })] }) })] })),
+                // Settings-page chrome (Settings Hub → Entitlements): label-left / value-right rows on read,
+                // bare values on a card. The form STACKS, because every field it edits is a list or a map
+                // of entries, which needs the full width a settings row gives to its label.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.STACKED },
+                // An override list with nothing in it IS the answer on this pane — "no feature was granted or
+                // withdrawn by hand" — so it says "None yet" rather than an em dash that reads as missing data.
+                defaultEmptyValue: 'placeholder',
+                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: [_jsx(DisplayField, { name: "features" }), _jsx(DisplayField, { name: "limits" })] }), _jsx(Section, { name: "overrides", hideDescription: true, children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(DisplayField, { name: "addedFeatures" }), _jsx(DisplayField, { name: "removedFeatures" }), _jsx(DisplayField, { name: "limitOverrides" })] }) })] })),
                 summary: () => (_jsxs(SummaryLayout, { children: [_jsx(DisplayField, { name: "features" }), _jsx(DisplayField, { name: "limits" })] })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "features" }), _jsx(FormField, { name: "limits" })] }), _jsx(Section, { name: "overrides", children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(FormField, { name: "addedFeatures" }), _jsx(FormField, { name: "removedFeatures" }), _jsx(FormField, { name: "limitOverrides" })] }) })] })),
+                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(FormField, { name: "features" }), _jsx(FormField, { name: "limits" })] }), _jsx(Section, { name: "overrides", children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(FormField, { name: "addedFeatures" }), _jsx(FormField, { name: "removedFeatures" }), _jsx(FormField, { name: "limitOverrides" })] }) })] })),
             },
             views: [
                 [Op.READ, notAddressable()],
@@ -224,6 +394,10 @@ export function buildOrganizationsAdminPresets(main) {
             layout: base.layout,
             fields: base.fields,
             views: [
+                // The tenant's own views first, so the operator entries below override where they share a key. In an
+                // application composing both lanes this entry replaces the main one, and the organization's own General pane
+                // runs the DEFAULT READ — which only an `admin`-keyed READ left without a view (#1812).
+                ...(base.views ?? []),
                 [opsVariantResolver(Op.READ, 'admin'), notAddressable()],
                 [Op.LIST, notAddressable()],
                 [Op.SEARCH, notAddressable()],
@@ -237,6 +411,13 @@ export function buildOrganizationsAdminPresets(main) {
             icon: base.icon,
             layout: base.layout,
             views: [
+                // READ is restated because `resourceUIBehaviorFrom` REPLACES `views` wholesale rather than
+                // merging them — it is "the primary differentiator between main/admin", per its own contract.
+                // Omitting it left the operator able to enable, disable and reset an organization's
+                // entitlements while unable to SEE them: the three mutations below act on a record the same
+                // preset refused to render. Found when this application composed both scopes and the
+                // `Entitlements` rail entry went headless (ADMIN replaces MAIN per resource type).
+                [Op.READ, notAddressable()],
                 [Op.UPDATE, notAddressable()],
                 [OrganizationFeatures_Operations.ENABLE_FEATURE, notAddressable({ iconOverride: ToggleRight })],
                 [OrganizationFeatures_Operations.DISABLE_FEATURE, notAddressable({ iconOverride: ToggleLeft })],