@object-ui/components 5.0.2 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,206 @@
 # @object-ui/components
 
+## 5.2.1
+
+### Patch Changes
+
+- @object-ui/types@5.2.1
+- @object-ui/core@5.2.1
+- @object-ui/i18n@5.2.1
+- @object-ui/react@5.2.1
+
+## 5.2.0
+
+### Minor Changes
+
+- 87bc8ff: `DataEmptyState` (re-exported as `EmptyState`) is now the canonical
+  platform primitive for "no records / no data" states. Two new props
+  keep it flexible enough to absorb the hand-rolled variants that lived
+  in `plugin-list`, `plugin-kanban`, and `plugin-dashboard`:
+  - `showIcon?: boolean` — drops the icon container entirely. Used by the
+    kanban board-level empty banner, which is a status banner rather than
+    a true empty-state.
+  - `iconWrapperClassName?: string` — overrides the default muted rounded
+    square. Pass `""` to render the icon raw (used by `ListView`'s grid
+    empty state, which uses a large standalone glyph).
+
+  Adopters:
+  - `plugin-list` (`ListView` grid empty-state) — preserves the existing
+    large icon, title, message, add-record button and `data-testid`s,
+    but delegates the structural markup to `DataEmptyState`.
+  - `plugin-kanban` (board-level "all columns empty" banner) — keeps the
+    dashed border + `role="status"` / `aria-live="polite"` semantics.
+  - `plugin-dashboard` (`PivotTable` zero-rows branch) — keeps the
+    custom 4-quad SVG icon and `pivot-empty-state` test id.
+
+  No public-API change for consumers; the older inline markup is gone
+  but the rendered output, translation keys, and test hooks are
+  preserved.
+
+- a8d12ec: `page:header` subtitle and title-format interpolation now translates
+  enum field values through the i18n option-label dictionary.
+
+  A schema like `subtitle: "{industry} · {type}"` previously rendered the
+  raw enum values (`"technology · customer"`) regardless of locale or
+  authored option labels. The interpolator now looks up the current
+  record's `objectSchema.fields` and routes each token through
+  `useSafeFieldLabel().fieldOptionLabel(...)`, so the same template
+  renders as `"科技 · 正式客户"` in zh-CN and `"Technology · Customer"`
+  in en — without authors having to write per-locale subtitle templates.
+
+  The change is transparent for tokens that resolve to non-enum field
+  values; only fields with an `options` array are remapped.
+
+### Patch Changes
+
+- Updated dependencies [de0c5e6]
+- Updated dependencies [9997cae]
+- Updated dependencies [321294c]
+- Updated dependencies [b2d1704]
+- Updated dependencies [0a644f0]
+- Updated dependencies [a3cb88f]
+- Updated dependencies [5425608]
+- Updated dependencies [3ebba63]
+- Updated dependencies [e919433]
+- Updated dependencies [70b5570]
+- Updated dependencies [aa063db]
+- Updated dependencies [d9c3bae]
+- Updated dependencies [d1442e3]
+- Updated dependencies [7c7400a]
+  - @object-ui/types@5.2.0
+  - @object-ui/core@5.2.0
+  - @object-ui/i18n@5.2.0
+  - @object-ui/react@5.2.0
+
+## 5.1.1
+
+### Patch Changes
+
+- 8955b9c: fix(empty): render `action` schema via `SchemaRenderer` instead of leaking the raw object
+
+  The `empty` renderer was spreading the schema's `action` prop straight onto
+  `DataEmptyState`, which renders `{action}` as a child. That worked for React
+  nodes but blew up on production builds when the docs site fed it a schema
+  shape like `action: { type: 'button', label: 'Create', variant: 'default' }`
+  (error: "Objects are not valid as a React child").
+
+  The renderer now passes `schema.action` through `SchemaRenderer` to turn it
+  into a real React element, and explicitly strips `action`/`icon` from the
+  spread so schema-shaped objects don't reach DOM attributes.
+  - @object-ui/types@5.1.1
+  - @object-ui/core@5.1.1
+  - @object-ui/i18n@5.1.1
+  - @object-ui/react@5.1.1
+
+## 5.1.0
+
+### Minor Changes
+
+- cf30cc2: Polish Lightning record detail page layout.
+  - `record:details` sections now render with Card chrome by default when a `title` is present, restoring visual grouping that was missing on pages like the opportunity detail page.
+  - Section labels can be translated via the `{ns}.objects.{objectName}._sections.{name}.label` convention. Author each section with a stable `name` (e.g. `info`, `forecast`) and the renderer picks up the locale-specific label automatically. Falls back to the literal `label` when no translation exists.
+  - The `page:header` action toolbar now collapses into a `⋯` overflow menu when more than two actions are present. The first business action stays inline; secondary system actions (Edit / Share / Delete) move into the menu, with destructive styling applied to Delete.
+  - Header action labels resolve via the `{ns}.objects.{objectName}._actions.{name}.label` convention.
+  - Removed the meaningless field-count Badge from collapsible section headers (the `2` chip next to "Description"). Field-count metadata wasn't useful in the header and added visual noise.
+  - Synth-path `sys_delete` now carries `variant: 'destructive'` so the overflow menu can color it appropriately.
+
+### Patch Changes
+
+- bd8447d: Three platform-wide detail polish items.
+
+  **Tighter page rhythm**
+  - Outer `PageRenderer` padding `p-4 md:p-6 lg:p-8` → `p-3 md:p-4 lg:p-6`
+    and outer body wrap `space-y-8` → `space-y-6` so list / detail / home
+    pages share the same edge rhythm. Cuts ~16px of edge slack on lg.
+
+  **Highlights KPI treatment**
+  - `HeaderHighlight` now renders numeric / currency / percent / decimal
+    values as KPI numbers (`text-xl md:text-2xl font-semibold tabular-nums`)
+    instead of the uniform `text-sm font-semibold`, so amount / probability
+    / count fields read as headline stats — Salesforce-style key facts.
+
+  **Discussion footer upgrade**
+  - `RecordActivityTimeline` now uses `RichTextCommentInput` (bold / italic /
+    list / code, `@`-mention autocomplete, preview toggle, Send) instead of
+    a bare `<textarea>`.
+  - `DiscussionContext` gains an optional `mentionSuggestions` array that
+    hosts can wire (e.g. team member directory). Falls back to free-text
+    `@mention` when omitted.
+  - `RecordChatterPanel` threads `mentionSuggestions` through both inline
+    and sidebar positions.
+
+- fbd5052: Tighten record-detail visual rhythm. Section card titles were rendering at
+  Shadcn's default `text-2xl` which dominated the page; the related-list
+  accordion in flush mode dropped all per-item borders so the collapsed
+  "Quotes / Products / Open Tasks" triggers stacked with zero visual
+  separation.
+  - `@object-ui/plugin-detail` `DetailSection`: override the `CardTitle`
+    className to `text-base font-semibold tracking-tight`, slim down
+    `CardHeader` padding (`py-3 px-4 sm:py-4 sm:px-6`) and `CardContent`
+    vertical padding so titles + content read as a single tight block
+    rather than a billboard. Demoted the section description from `text-sm
+mt-1.5` to `text-xs mt-1` for the same reason.
+  - `@object-ui/components` `PageAccordionRenderer`: in the default
+    `flush` variant restore a subtle `border-b last:border-b-0` divider
+    between accordion items so collapsed siblings get a separator, and
+    style the trigger as `text-sm font-semibold tracking-tight
+hover:no-underline` (Shadcn's hover-underline default looks busy on
+    CRM-style related-list lists).
+
+- d51a577: feat(platform): Discussion attachments + @mention directory + Reference Rail aside
+  - **Discussion attachments** — `RichTextCommentInput` now accepts an `extraSlot`
+    and a `canSubmitEmpty` flag so hosts can mount the existing
+    `CommentAttachment` composer beneath the editor without forking the toolbar.
+    `RecordActivityTimeline` plumbs the attachments through
+    `DiscussionContext.onUploadAttachments` and submits attachment-only comments.
+  - **@mention directory** — `DiscussionContext` gains a `mentionSuggestions`
+    field; `RecordDetailView` populates it from the host `sys_user` collection so
+    `@` autocomplete in the composer now resolves against real users.
+  - **Reference Rail** — New `record:reference_rail` renderer + a dedicated
+    `aside` region emitted by `buildDefaultPageSchema` whenever a record has
+    ≥ 2 related lists. The rail surfaces a Salesforce/HubSpot-style snapshot
+    of related collections (count badge + top 3 records) on `xl+` viewports.
+  - **Layout** — `PageRenderer`'s structured-layout `<aside>` wrappers now honor
+    `aside.className`, letting schemas attach responsive utilities like
+    `hidden xl:flex` to the rail region.
+
+- d1ec6a2: Fold inline-edit into the page-header overflow menu (HubSpot/Lightning
+  pattern) and remove the orphan "Edit fields" toolbar row that previously
+  floated between the tab strip and the first detail section.
+  - `@object-ui/app-shell` `RecordDetailView`: injects a new `sys_inline_edit`
+    system action that appears in the ⋯ overflow menu and dispatches a
+    `objectui:record:inline-edit-toggle` window CustomEvent (filtered by
+    recordId + objectName).
+  - `@object-ui/plugin-detail` `DetailView`: listens for that event to
+    toggle inline-edit mode; the in-page toolbar now renders only during
+    active editing / save error / locked states, so the idle layout flows
+    tabs → first section card with no orphan row.
+  - `@object-ui/components` layout containers: extended `KNOWN_LABEL_DICT`
+    with zh-CN + zh-TW translations for common CRM related-list labels
+    (Quotes / Products / Contacts / Accounts / Leads / Opportunities /
+    Cases / Campaigns / Approvals / Documents / Emails / Calls / Meetings
+    / Open Tasks / Closed Tasks), so authored English labels auto-translate
+    in `page:accordion` / `page:tabs` items.
+
+- d548d6b: Unify empty-state visuals across timeline + registered `empty` renderer.
+  - `RecordActivityTimeline` and `ActivityTimeline` now use `DataEmptyState`
+    instead of a bare `<p>` so empty timelines match list/related-list visuals
+    (muted icon badge + centered copy).
+  - The `ui:empty` schema renderer now delegates to `DataEmptyState`, giving
+    schema-driven empty regions the same chrome as ad-hoc consumers.
+
+- Updated dependencies [bd8447d]
+- Updated dependencies [d51a577]
+- Updated dependencies [1976691]
+- Updated dependencies [cf30cc2]
+- Updated dependencies [5b80cfd]
+- Updated dependencies [49b1760]
+- Updated dependencies [c0b236f]
+  - @object-ui/react@5.1.0
+  - @object-ui/i18n@5.1.0
+  - @object-ui/types@5.1.0
+  - @object-ui/core@5.1.0
+
 ## 5.0.2
 
 ### Patch Changes

package/dist/index.css

@@ -982,6 +982,9 @@
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -1654,10 +1657,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .border-\(--color-border\) {
     border-color: var(--color-border);
   }
@@ -3170,6 +3169,12 @@
       border-bottom-right-radius: var(--radius-md);
     }
   }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .focus-within\:ring-2 {
     &:focus-within {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3425,6 +3430,13 @@
       }
     }
   }
+  .hover\:no-underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: none;
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -3536,6 +3548,14 @@
       background-color: var(--color-accent);
     }
   }
+  .focus\:bg-destructive\/10 {
+    &:focus {
+      background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+    }
+  }
   .focus\:text-accent-foreground {
     &:focus {
       color: var(--color-accent-foreground);
@@ -4429,6 +4449,48 @@
       }
     }
   }
+  .motion-safe\:bg-\[linear-gradient\(90deg\,hsl\(var\(--muted\)\)_0\%\,hsl\(var\(--muted-foreground\)\/0\.12\)_50\%\,hsl\(var\(--muted\)\)_100\%\)\] {
+    @media (prefers-reduced-motion: no-preference) {
+      background-image: linear-gradient(90deg,hsl(var(--muted)) 0%,hsl(var(--muted-foreground)/0.12) 50%,hsl(var(--muted)) 100%);
+    }
+  }
+  .motion-safe\:bg-\[length\:200\%_100\%\] {
+    @media (prefers-reduced-motion: no-preference) {
+      background-size: 200% 100%;
+    }
+  }
+  .motion-safe\:duration-300 {
+    @media (prefers-reduced-motion: no-preference) {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .motion-safe\:animate-in {
+    @media (prefers-reduced-motion: no-preference) {
+      animation-name: enter;
+      animation-duration: 150ms;
+      --tw-enter-opacity: initial;
+      --tw-enter-scale: initial;
+      --tw-enter-rotate: initial;
+      --tw-enter-translate-x: initial;
+      --tw-enter-translate-y: initial;
+    }
+  }
+  .motion-safe\:duration-300 {
+    @media (prefers-reduced-motion: no-preference) {
+      animation-duration: 300ms;
+    }
+  }
+  .motion-safe\:fade-in-0 {
+    @media (prefers-reduced-motion: no-preference) {
+      --tw-enter-opacity: 0;
+    }
+  }
+  .motion-safe\:zoom-in-95 {
+    @media (prefers-reduced-motion: no-preference) {
+      --tw-enter-scale: .95;
+    }
+  }
   .sm\:relative {
     @media (width >= 40rem) {
       position: relative;
@@ -4826,11 +4888,21 @@
       padding-inline: calc(var(--spacing) * 4);
     }
   }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:py-1 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 1);
     }
   }
+  .sm\:py-4 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;
@@ -5086,6 +5158,12 @@
       padding-block: calc(var(--spacing) * 0);
     }
   }
+  .md\:text-2xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
   .md\:text-sm {
     @media (width >= 48rem) {
       font-size: var(--text-sm);
@@ -5235,6 +5313,11 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
   }
+  .lg\:p-6 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
   .lg\:p-8 {
     @media (width >= 64rem) {
       padding: calc(var(--spacing) * 8);
@@ -5261,6 +5344,11 @@
       grid-column: span 4 / span 4;
     }
   }
+  .xl\:flex {
+    @media (width >= 80rem) {
+      display: flex;
+    }
+  }
   .xl\:grid-cols-1 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -5635,6 +5723,16 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\]\:max-h-40 {
+    & svg {
+      max-height: calc(var(--spacing) * 40);
+    }
+  }
+  .\[\&_svg\]\:w-auto {
+    & svg {
+      width: auto;
+    }
+  }
   .\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;