@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/dist/esm/components/data-display/DisplayValueDispatcher.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * DisplayValueDispatcher — stateless rendering component for field values.
  *
@@ -23,15 +23,16 @@ import { useUI } from '../../core/ui/useUI.js';
 import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
 import { ResourceRegistryContext } from '../../core/resources/ResourceRegistryContext.js';
 import { Text, Code } from '../../components/typography/text.js';
+import { EmptyValueMark, emptyValueTypographyFor } from './empty-value-mark.js';
 import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
 import { ButtonSize } from '@wildo-ai/presets-components-models';
 import { FrontendComponentType, UIBehavior, IndicatorVariant, TypographyVariant, resolveVocabularyWordKey } from '@wildo-ai/presets-components-models';
 import { cn } from '../../core/ui/cn.js';
 import { Skeleton } from '../../components/feedback/skeleton.js';
+import { Badge } from '../../components/data-display/badge.js';
 import { resolveContextualDisplayParams, useDisplayContextKind } from './DisplayContextKindContext.js';
-import { ArrayListStyle, ArrayObjectItemLayout, DisplayChromeMode, FieldSchemaType, getFieldUIDisplayConfig, getObjectKeys, getObjectShape, getRecordValueSchema, getRecordKeySchema, getSystemEnumName, getSetValueSchema, getTupleItemSchemas, getMapSchemas, resolveDiscriminatedUnionVariant, getSchemaType, inferFieldSchemaTypeFromValue, getArrayUI, getObjectUI, isForeignKey, resolveDisplayEmptyReason, resolveForeignKeyLabelFallback, DISPLAY_EMPTY_REASON_LABEL_KEYS, getForeignKeyUIDisplay, getDiscriminatedPolymorphicForeignKey, unwrapSchema, } from '@wildo-ai/zod-decorators';
+import { ArrayListStyle, ArrayObjectItemLayout, DisplayChromeMode, FieldSchemaType, getFieldUIDisplayConfig, getObjectKeys, getObjectShape, getRecordValueSchema, getRecordKeySchema, getSystemEnumName, getSetValueSchema, getTupleItemSchemas, getMapSchemas, resolveDiscriminatedUnionVariant, getSchemaType, inferFieldSchemaTypeFromValue, getArrayUI, getObjectUI, isForeignKey, resolveDisplayEmptyReason, resolveForeignKeyLabelFallback, DISPLAY_EMPTY_REASON_LABEL_KEYS, getForeignKeyUIDisplay, unwrapSchema, } from '@wildo-ai/zod-decorators';
 import { ResourcesConfigNamingUtils } from '@wildo-ai/saas-models';
-import { resolveResourceRelativeFieldName, } from './display-resource-link-trail.js';
 import { AutomatedLayoutFrontendUtils } from '../../core/automated-layout/automated-layout.frontend.utils.js';
 import { DisplayFieldBoolean } from './formatters/display-field-boolean.js';
 import { ResourceFieldDisplay_ResourceReference } from '../../components/resources-fields/resource-reference/ResourceFieldDisplay_ResourceReference.js';
@@ -58,7 +59,7 @@ import { DisplayFieldRangeTime } from './formatters/display-field-range-time.js'
 import { DisplayField } from './DisplayField.js';
 import { useResourceDisplayContext } from './automatic-displayer.utils.js';
 import { LoggerFrontendService } from '../../core/monitoring/logger.frontend.service.js';
-import { resolveRelationshipSurfaceRuntime } from '../../core/resources/relationship-surface-runtime.frontend.utils.js';
+import { extractRelationshipDisplayValue, getLeafFieldName, resolveDiscriminatedPolymorphicFkResourceType, resolveRelationshipObjectReadSurface, } from './reference-display-target.js';
 import { RelationshipNature, Resources_SharedUtils } from '@wildo-ai/saas-models';
 const logger = LoggerFrontendService.getLogger();
 const logDebug = logger.debugByType('DisplayValueDispatcher');
@@ -66,12 +67,6 @@ logger.setDebugTypeLogging('DisplayValueDispatcher', false);
 // =============================================================================
 // HELPERS
 // =============================================================================
-function getLeafFieldName(fieldName) {
-    if (!fieldName) {
-        return undefined;
-    }
-    return fieldName.includes('.') ? fieldName.split('.').pop() : fieldName;
-}
 function flattenRelationshipBuckets(resourceRelationships) {
     if (!resourceRelationships) {
         return [];
@@ -155,36 +150,6 @@ function extractPopulatedSibling(fieldName, parentData, currentResourceType, reg
     }
     return null;
 }
-/**
- * Resolve the concrete branch a per-record DISCRIMINATED polymorphic FK points
- * at (e.g. a referral's `referrerBillingAccountId` → `userBillingAccounts` vs
- * `organizationBillingAccounts`, chosen by `referrerScopeType`).
- *
- * Returns `undefined` for plain / rename-only FKs (the reference component then
- * falls back to the field-name → type map) and when the holder record or
- * discriminator value is unavailable. When defined, the value is passed as the
- * explicit `resourceType` so display label, link, and FK fetch all target the
- * correct branch.
- */
-function resolveDiscriminatedPolymorphicFkResourceType(params) {
-    const discriminated = getDiscriminatedPolymorphicForeignKey(params.schema);
-    if (!discriminated || !params.parentData || !params.currentResourceType || !params.registry) {
-        return undefined;
-    }
-    const leafFieldName = getLeafFieldName(params.fieldName);
-    if (!leafFieldName)
-        return undefined;
-    const candidateReferencedTypes = Resources_SharedUtils.getForeignKeyCandidateReferencedTypes(leafFieldName, params.currentResourceType, params.registry.resourceRelationships);
-    if (candidateReferencedTypes.length === 0)
-        return undefined;
-    return Resources_SharedUtils.resolveDiscriminatedPolymorphicForeignKeyTarget({
-        record: params.parentData,
-        discriminatorField: discriminated.discriminatorField,
-        variants: discriminated.variants,
-        candidateReferencedTypes,
-        getResourcePrimaryScope: (resourceType) => params.registry?.resourceConfigurations[resourceType]?.resourcePrimaryScope,
-    });
-}
 function renderNeutralFileFallback(params) {
     const fileValue = params.value;
     const count = fileValue?.fileIds?.length ?? (fileValue?.fileId ? 1 : 0);
@@ -196,33 +161,6 @@ function renderNeutralFileFallback(params) {
 function hasRenderableFileMetadataEndpoint(endpoints) {
     return typeof endpoints?.getMetadata === 'string' && endpoints.getMetadata.trim() !== '';
 }
-function extractRelationshipDisplayValue(value, relationshipIdentifierField) {
-    if (Array.isArray(value)) {
-        const ids = value.flatMap((entry) => {
-            if (typeof entry === 'string' && entry !== '') {
-                return [entry];
-            }
-            if (!entry || typeof entry !== 'object') {
-                return [];
-            }
-            const rawId = entry[relationshipIdentifierField]
-                ?? entry._id
-                ?? entry.id;
-            return typeof rawId === 'string' && rawId !== '' ? [rawId] : [];
-        });
-        return ids.length > 0 ? ids : undefined;
-    }
-    if (typeof value === 'string' && value !== '') {
-        return value;
-    }
-    if (!value || typeof value !== 'object') {
-        return undefined;
-    }
-    const rawId = value[relationshipIdentifierField]
-        ?? value._id
-        ?? value.id;
-    return typeof rawId === 'string' && rawId !== '' ? rawId : undefined;
-}
 // =============================================================================
 // CONSTANTS
 // =============================================================================
@@ -237,7 +175,7 @@ function extractRelationshipDisplayValue(value, relationshipIdentifierField) {
  * See `display-resource-link-trail.ts` for the full argument.
  */
 const MAX_RESOURCE_LINK_DEPTH = 5;
-function renderEmptyDisplayValue(strategy, noValueLabel) {
+function renderEmptyDisplayValue(strategy, noValueLabel, schemaType) {
     switch (strategy) {
         case 'hidden':
             return null;
@@ -247,7 +185,8 @@ function renderEmptyDisplayValue(strategy, noValueLabel) {
             return _jsx(Skeleton, { className: "h-5 w-full" });
         case 'em-dash':
         default:
-            return (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground italic", "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: noValueLabel })] }));
+            // The dash takes the voice of the value it stands in for (DATA for a figure or a date).
+            return _jsx(EmptyValueMark, { noValueLabel: noValueLabel, typography: emptyValueTypographyFor(schemaType) });
     }
 }
 // =============================================================================
@@ -275,15 +214,6 @@ export function DisplayValueDispatcher({ schema, schemaType: declaredSchemaType,
         forceHideLabel: true,
         forceHideDescription: true,
     };
-    /*
-     * The resource this field belongs to, and the name that resource would spell it by.
-     *
-     * Both come from the TRAIL once a resource link has been followed, because
-     * `useResourceDisplayContext()` keeps reporting the resource at the display ROOT no matter how
-     * deep the recursion is. Resolving against the root with a nested name is why the registry saw
-     * `subtasks[0].subtasks` — root segment `subtasks[0]`, matching no relationship — and reported
-     * "not a relationship" for the very recursion the depth guard exists to bound.
-     */
     /*
      * Read ONCE here, with the component's other top-level hooks, and deliberately NOT beside the
      * array branch that consumes it: this component has six early returns before that point, so a
@@ -292,18 +222,17 @@ export function DisplayValueDispatcher({ schema, schemaType: declaredSchemaType,
      * itself is the pure `resolveContextualDisplayParams`, so the branch needs no hook at all.
      */
     const displayContextKind = useDisplayContextKind();
-    const owningResourceType = resourceLinkTrail?.resourceType ?? currentResourceType;
-    const resourceRelativeFieldName = resolveResourceRelativeFieldName(fieldName, resourceLinkTrail);
-    const relationshipObjectSemantics = React.useMemo(() => {
-        if (!owningResourceType || !resourceRelativeFieldName || !registry) {
-            return undefined;
-        }
-        return resolveRelationshipSurfaceRuntime({
-            resourceType: owningResourceType,
-            fieldName: resourceRelativeFieldName,
-            registry,
-        }).readSurface;
-    }, [owningResourceType, resourceRelativeFieldName, registry]);
+    // Keyed by the trail's VALUES: inside an expanded relationship the trail object is rebuilt on every render.
+    const trailResourceType = resourceLinkTrail?.resourceType;
+    const trailPathPrefix = resourceLinkTrail?.pathPrefix;
+    const relationshipObjectSemantics = React.useMemo(() => resolveRelationshipObjectReadSurface({
+        fieldName,
+        resourceLinkTrail,
+        currentResourceType: currentResourceType,
+        registry,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `resolveRelationshipObjectReadSurface` reads only the trail's resourceType and pathPrefix
+    [fieldName, trailResourceType, trailPathPrefix, currentResourceType, registry]);
     const relationshipObjectIdentity = relationshipObjectSemantics?.objectIdentity;
     const relationshipObjectDisplayValue = React.useMemo(() => {
         if (!relationshipObjectIdentity) {
@@ -356,7 +285,7 @@ export function DisplayValueDispatcher({ schema, schemaType: declaredSchemaType,
     if (value === null ||
         value === undefined ||
         (schemaType === FieldSchemaType.STRING && value === '')) {
-        return renderEmptyDisplayValue(emptyValue, emptyLabelFor(false));
+        return renderEmptyDisplayValue(emptyValue, emptyLabelFor(false), schemaType);
     }
     // ── DISPLAY COMPONENT OVERRIDE ──
     if (displayComponent) {
@@ -465,12 +394,31 @@ export function DisplayValueDispatcher({ schema, schemaType: declaredSchemaType,
         // row of its fields — booleans lead, the primary field fills — instead of
         // the default indented `ps-card` object block. Mirrors the edit-side ROW
         // (AutomatedArrayField) so `objectItemLayout: ROW` is coherent across display + edit.
+        /*
+         * CHIPS (string entries only — see `ArrayListStyle.CHIPS`): a wrapping row of neutral chips, each
+         * the entry's own text. Decided before the generic list below because a chip is the entry's whole
+         * rendering: routing each tag through a `DisplayField` would put a paragraph at body size inside a
+         * 12px chip. An authored `renderItem` still wins — a template chooses what an entry says.
+         */
+        if (arrayDisplayParams?.listStyle === ArrayListStyle.CHIPS && elementSchemaType === FieldSchemaType.STRING && !renderItem) {
+            return (_jsxs("div", { role: "list", "aria-label": label || fieldName || tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'list'), "data-list-style": "chips", className: cn('flex flex-row flex-wrap gap-item', className), children: [visibleItems.map((item, index) => (_jsx(Badge, { role: "listitem", variant: "secondary", children: String(item) }, index))), hiddenCount > 0 && !showAllArrayItems && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'showMore', { count: hiddenCount }), onClick: onExpandArrayItems, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'showMore', { count: hiddenCount }) }))] }));
+        }
         const objectItemLayout = arrayUI?.objectItemLayout ?? ArrayObjectItemLayout.CARD;
         const itemShape = elementSchemaType === FieldSchemaType.OBJECT && elementType ? getObjectShape(elementType) : null;
         const isRowObjectArray = objectItemLayout === ArrayObjectItemLayout.ROW && !!itemShape;
-        return (_jsxs("div", { role: "list", "aria-label": label || fieldName || tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'list'), className: cn(isRowObjectArray
+        /*
+         * A PLAIN primitive list — bare values, no markers, no rules, no per-item template, vertical flow.
+         * Marked so a host that lays values out in a row (the settings-row value column) can flow it inline;
+         * the list itself stays the vertical default everywhere else.
+         */
+        const isPlainPrimitiveList = elementSchemaType !== FieldSchemaType.OBJECT
+            && !renderItem
+            && displayMode !== 'horizontal'
+            && (arrayDisplayParams?.listStyle === undefined || arrayDisplayParams.listStyle === ArrayListStyle.PLAIN);
+        return (_jsxs("div", { role: "list", "aria-label": label || fieldName || tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'list'), "data-list-shape": isPlainPrimitiveList ? 'primitive' : undefined, className: cn(isRowObjectArray
                 ? 'flex flex-col gap-element'
-                : displayMode === 'horizontal' ? 'flex flex-row gap-element flex-wrap'
+                // CHIPS on a non-string entry type falls back to the horizontal flow (see the branch above).
+                : displayMode === 'horizontal' || arrayDisplayParams?.listStyle === ArrayListStyle.CHIPS ? 'flex flex-row gap-element flex-wrap'
                     /*
                      * OBJECT entries breathe on the FIELD scale (1rem): with the card shell retired (the
                      * section owns the frame, the item owns its accent line), the GAP is what says where
@@ -847,7 +795,10 @@ export function DisplayValueDispatcher({ schema, schemaType: declaredSchemaType,
         return _jsx(DisplayFieldJson, { ...commonProps, value: value });
     }
     // ── UNSUPPORTED TYPE ──
-    return (_jsxs("div", { className: cn("flex items-center gap-element px-card-sm py-item-xs rounded-md", bodyTypographyRecipe.base, bodyTypographyRecipe.sizes?.sm || bodyTypographyRecipe.sizes?.md, errorIndicatorRecipe.base, className), children: [_jsx(Text, { className: labelTypographyRecipe.base, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'unsupportedDisplayType') }), _jsx(Code, { className: cn("px-item-xs rounded", errorIndicatorRecipe.states.hover), children: schemaType })] }));
+    return (_jsxs("div", { className: cn(bodyTypographyRecipe.base, bodyTypographyRecipe.sizes?.sm || bodyTypographyRecipe.sizes?.md, errorIndicatorRecipe.base, 
+        // The box's geometry goes AFTER the indicator recipe, which is drawn as a short pill (`rounded-full
+        // px-2 py-0.5`): when the recipe won, a box holding a sentence read as one long pill (audit A-L12).
+        "flex items-center gap-element px-card-sm py-item-xs rounded-md", className), children: [_jsx(Text, { className: labelTypographyRecipe.base, children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'unsupportedDisplayType') }), _jsx(Code, { className: cn("px-item-xs rounded", errorIndicatorRecipe.states.hover), children: schemaType })] }));
 }
 DisplayValueDispatcher.displayName = 'DisplayValueDispatcher';
 //# sourceMappingURL=DisplayValueDispatcher.js.map