@startsimpli/ui 0.4.49 → 0.4.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.49",
+  "version": "0.4.50",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -40,8 +40,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "0.5.44",
-    "@startsimpli/auth": "0.4.29"
+    "@startsimpli/auth": "0.4.29",
+    "@startsimpli/api": "0.5.44"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/record-detail/RecordDetail.tsx

@@ -15,10 +15,21 @@ export interface RecordDetailProps {
   fields: RecordField[]
   emptyMessage?: string
   className?: string
+  /**
+   * Show declared fields even when they have no value — the header stays with a
+   * muted placeholder — instead of hiding them. Lets a reader tell that a field
+   * (e.g. `content`) exists on the record but simply wasn't captured, rather than
+   * wondering whether it's missing from the schema. Default false (hide empties).
+   */
+  showEmpty?: boolean
 }
 
 const URL_RE = /^https?:\/\//i
 
+function hasValue(f: RecordField): boolean {
+  return f.value != null && String(f.value).trim() !== ''
+}
+
 /**
  * Read-optimized view of a record's fields (startsim-768w.17.4). Renders short
  * fields as a compact label/value list (auto-linking urls), long-text fields as
@@ -27,13 +38,13 @@ const URL_RE = /^https?:\/\//i
  * `fields` and this owns the layout, so every Foundry tenant's detail drawer reads
  * the same without duplicating the view.
  */
-export function RecordDetail({ fields, emptyMessage = 'No details.', className }: RecordDetailProps) {
-  const present = fields.filter((f) => f.value != null && String(f.value).trim() !== '')
-  const shorts = present.filter((f) => f.kind !== 'longtext' && f.kind !== 'json')
-  const longs = present.filter((f) => f.kind === 'longtext')
-  const jsons = present.filter((f) => f.kind === 'json')
+export function RecordDetail({ fields, emptyMessage = 'No details.', className, showEmpty = false }: RecordDetailProps) {
+  const visible = showEmpty ? fields : fields.filter(hasValue)
+  const shorts = visible.filter((f) => f.kind !== 'longtext' && f.kind !== 'json')
+  const longs = visible.filter((f) => f.kind === 'longtext')
+  const jsons = visible.filter((f) => f.kind === 'json')
 
-  if (present.length === 0) {
+  if (visible.length === 0) {
     return <p className={cn('text-sm text-muted-foreground', className)}>{emptyMessage}</p>
   }
 
@@ -42,12 +53,15 @@ export function RecordDetail({ fields, emptyMessage = 'No details.', className }
       {shorts.length > 0 && (
         <dl className="space-y-1.5">
           {shorts.map((f, i) => {
-            const isUrl = f.kind === 'url' || URL_RE.test(f.value)
+            const empty = !hasValue(f)
+            const isUrl = !empty && (f.kind === 'url' || URL_RE.test(f.value))
             return (
               <div key={i} className="flex gap-2 text-sm">
                 <dt className="w-28 shrink-0 capitalize text-muted-foreground">{f.label}</dt>
                 <dd className="min-w-0 flex-1 break-words">
-                  {isUrl ? (
+                  {empty ? (
+                    <span className="text-muted-foreground">—</span>
+                  ) : isUrl ? (
                     <a
                       href={f.value}
                       target="_blank"
@@ -71,9 +85,13 @@ export function RecordDetail({ fields, emptyMessage = 'No details.', className }
           <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
             {f.label}
           </h4>
-          <div className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">
-            {f.value}
-          </div>
+          {hasValue(f) ? (
+            <div className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">
+              {f.value}
+            </div>
+          ) : (
+            <p className="text-sm italic text-muted-foreground">Not captured.</p>
+          )}
         </section>
       ))}
 
@@ -82,9 +100,13 @@ export function RecordDetail({ fields, emptyMessage = 'No details.', className }
           <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
             {f.label}
           </h4>
-          <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs leading-relaxed">
-            {f.value}
-          </pre>
+          {hasValue(f) ? (
+            <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs leading-relaxed">
+              {f.value}
+            </pre>
+          ) : (
+            <p className="text-sm italic text-muted-foreground">Not captured.</p>
+          )}
         </section>
       ))}
     </div>