@flamingo-stack/openframe-frontend-core 0.0.592 → 0.0.593-snapshot.20260905112237

package/dist/utils/source-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CpD,CAAC;AAEF;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiDzD,CAAC;AAEF;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF"}
+{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmDpD,CAAC;AAEF;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyDzD,CAAC;AAEF;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmDpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.592",
+  "version": "0.0.593-snapshot.20260905112237",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/data-table-row-height.test.tsx

@@ -48,6 +48,21 @@ function Table({
   );
 }
 
+/** The same table, but every row carries a sub-row beneath its cells. */
+function TableWithSubRows({ data, rowHeightClassName }: { data: Row[]; rowHeightClassName?: string }) {
+  const table = useDataTable({ data, columns });
+  return (
+    <DataTable table={table}>
+      <DataTable.Body<Row>
+        minRows={4}
+        skeletonRows={4}
+        rowHeightClassName={rowHeightClassName}
+        renderSubRow={() => <div style={{ height: 96 }}>sub</div>}
+      />
+    </DataTable>
+  );
+}
+
 const rows = (n: number): Row[] => Array.from({ length: n }, (_, i) => ({ id: String(i), name: `Row ${i}` }));
 
 /**
@@ -108,6 +123,22 @@ describe('DataTable row height', () => {
     expect(slots.every(cls => cls.split(/\s+/).includes('border'))).toBe(true);
   });
 
+  it('sizes the ROW SLOT, so a sub-row does not make real rows outgrow pad rows', () => {
+    // The trap: a row with a sub-row is taller than its cells. Sizing the cells
+    // left every pad row short by exactly the sub-row — 96px each on a phone
+    // board — which is the same jump `minRows` exists to prevent, reintroduced
+    // one level down.
+    const { container } = render(<TableWithSubRows data={rows(2)} rowHeightClassName={ROW_H} />);
+    const slots = slotClasses(container);
+
+    expect(slots.length).toBeGreaterThanOrEqual(4);
+    // Every card — the two real rows and the two pad rows — carries the height.
+    expect(slots.every(cls => cls.split(/\s+/).includes(ROW_H))).toBe(true);
+    // And the cells inside a real row FILL it rather than restating it, or the
+    // card would be the cells plus the sub-row.
+    expect(container.innerHTML).toContain('flex-1');
+  });
+
   it('keeps the design height when a table does not state one', () => {
     const { container } = render(<Table data={rows(1)} />);
     expect(container.innerHTML).toContain('md:h-[78px]');

package/src/components/chat/entity-cards/dispatch.tsx

@@ -45,6 +45,7 @@ import { MingoIcon } from '../../icons';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
 import { ClickupLogoIcon } from '../../icons-v2-generated/brand-logos/clickup-logo-icon';
 import { SlackLogoGreyIcon } from '../../icons-v2-generated/brand-logos/slack-logo-grey-icon';
+import { BuildingsIcon } from '../../icons-v2-generated/buildings/buildings-icon';
 import { ChartBar01VerIcon } from '../../icons-v2-generated/charts/chart-bar-01-ver-icon';
 import { ChartPieIcon } from '../../icons-v2-generated/charts/chart-pie-icon';
 import { PresentationBarIcon } from '../../icons-v2-generated/charts/presentation-bar-icon';
@@ -53,6 +54,7 @@ import { CodeIcon } from '../../icons-v2-generated/coding/code-icon';
 import { CodingCommitIcon } from '../../icons-v2-generated/coding/coding-commit-icon';
 import { CodingPullRequestIcon } from '../../icons-v2-generated/coding/coding-pull-request-icon';
 import { CalendarIcon } from '../../icons-v2-generated/date-and-time/calendar-icon';
+import { ClipboardListIcon } from '../../icons-v2-generated/documents/clipboard-list-icon';
 import { FileContentIcon } from '../../icons-v2-generated/documents/file-content-icon';
 import { NewspaperIcon } from '../../icons-v2-generated/documents/newspaper-icon';
 import { BankIcon } from '../../icons-v2-generated/finance/bank-icon';
@@ -616,6 +618,35 @@ function SlackChatCard({
   );
 }
 
+/**
+ * Generic REF-ONLY card — for types with no `?ids=` list endpoint whose
+ * ChatRef already carries everything the card shows (title / preview /
+ * url). Same posture as `video`: nothing to fetch, so no skeleton and no
+ * `contentRefType`. The per-type glyph is the only thing that varies.
+ */
+function RefOnlyChatCard({
+  chatRef,
+  icon,
+  isNewTab,
+  discuss,
+}: {
+  chatRef: ChatRef;
+  icon: React.ReactNode;
+  isNewTab: boolean;
+  discuss?: CardDiscussAction;
+}) {
+  return (
+    <MingoInfoCard
+      title={chatRef.title}
+      description={chatRef.preview ?? undefined}
+      icon={icon}
+      anchorProps={buildAnchorProps(chatRef.url, isNewTab)}
+      menuGroups={cardMenuGroups(chatRef.url, discuss)}
+      menuAriaLabel="Card actions"
+    />
+  );
+}
+
 function DataRoomDocChatCard({
   chatRef,
   isNewTab,
@@ -1312,6 +1343,30 @@ const GITHUB_CARD_CONFIGS: Record<string, GitHubCardConfig> = {
   github_pr_review: { label: 'GitHub review', kind: 'pr_review' },
   github_pr_review_public: { label: 'GitHub review (public)', kind: 'pr_review' },
 };
+interface RefOnlyCardConfig {
+  label: string;
+  icon: () => React.ReactNode;
+}
+/** Hub-internal row types whose mapper declares `listApi: () => null` —
+ *  design docs + the tenant roster (product-hub), the two people-hub
+ *  employee feeds. Adding one = one line here + the `source-icons.ts`
+ *  label / icon / documentType entries. */
+const REF_ONLY_CARD_CONFIGS: Record<string, RefOnlyCardConfig> = {
+  design_doc: { label: 'Design doc', icon: () => <FileContentIcon size={24} /> },
+  openframe_tenant: { label: 'OpenFrame tenant', icon: () => <BuildingsIcon size={24} /> },
+  what_i_shipped: { label: 'What I Shipped', icon: () => <Rocket02Icon size={24} /> },
+  how_i_work: { label: 'How I Work', icon: () => <ClipboardListIcon size={24} /> },
+};
+function refOnlyRegistryEntries(): Record<string, ChatCardRegistryEntry> {
+  return registryEntries(REF_ONLY_CARD_CONFIGS, cfg => ({
+    label: cfg.label,
+    bareInline: true,
+    render: (_item, chatRef, opts) => (
+      <RefOnlyChatCard chatRef={chatRef} icon={cfg.icon()} isNewTab={opts.isNewTab} discuss={opts.discuss} />
+    ),
+  }));
+}
+
 function githubRegistryEntries(): Record<string, ChatCardRegistryEntry> {
   return registryEntries(GITHUB_CARD_CONFIGS, (cfg, docType) =>
     refHydratedEntry(docType, cfg.label, (displayRef, opts) => (
@@ -1423,6 +1478,8 @@ const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
       />
     ),
   },
+  // ───────── ref-only types (no list endpoint; the ChatRef IS the card) ─────────
+  ...refOnlyRegistryEntries(),
   slack_message: refHydratedEntry('slack_message', 'Slack message', (displayRef, opts) => (
     <SlackChatCard chatRef={displayRef} isNewTab={opts.isNewTab} discuss={opts.discuss} />
   )),

package/src/components/ui/data-table/data-table-body.tsx

@@ -172,15 +172,24 @@ function PlaceholderRows({ count, rowHeightClassName }: { count: number; rowHeig
           // A pad row without one is 2px shorter than the row it stands in for
           // — invisible per row, 54px over a 27-row remainder, which is the
           // same shift `minRows` exists to prevent.
-          className="pointer-events-none relative overflow-hidden rounded-md border border-transparent"
+          className={cn(
+            'pointer-events-none relative overflow-hidden rounded-md border border-transparent',
+            // The stated slot height belongs on the CARD, exactly as a real
+            // row carries it — a real row with a sub-row is taller than its
+            // cells, so reserving the cells' height here left every pad row
+            // short by the sub-row.
+            rowHeightClassName,
+          )}
           aria-hidden="true"
         >
-          <div className={cn('hidden py-0 md:flex', ROW_SHELL_CLASSES, rowHeightClassName ?? ROW_HEIGHT_DESKTOP)} />
+          <div
+            className={cn('hidden py-0 md:flex', ROW_SHELL_CLASSES, rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP)}
+          />
           <div
             className={cn(
               'flex justify-start py-0 md:hidden',
               ROW_SHELL_CLASSES,
-              rowHeightClassName ?? ROW_HEIGHT_MOBILE,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE,
             )}
           />
         </div>

package/src/components/ui/data-table/data-table-row.tsx

@@ -25,6 +25,11 @@ export interface DataTableRowProps<T> {
    * or the design default). The one place a table states how tall a row is, so
    * the pad rows and the skeleton can reserve the SAME number — see
    * `DataTableBodyProps.rowHeightClassName`.
+   *
+   * It sizes the row SLOT — the whole card — not the cells inside it. A row
+   * with a `subRow` is taller than its cells, so sizing the cells would leave
+   * the pad rows (which have no sub-row) short by exactly the sub-row: on a
+   * phone board that was 96px per missing row.
    */
   rowHeightClassName?: string;
   className?: string;
@@ -106,7 +111,11 @@ function DataTableRowImpl<T>({
   );
 
   const containerClassName = cn(
-    'block overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline',
+    'overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline',
+    // A stated slot height goes HERE, on the card, with the cells flexing to
+    // fill whatever the sub-row leaves. `border-box` sizing means the number a
+    // caller writes is the number the row occupies, borders included.
+    rowHeightClassName ? `flex flex-col ${rowHeightClassName}` : 'block',
     // With a sub-row the link wraps only the cells, so keep the clickable affordance off the whole card.
     (onClick || isWholeCardLink) && 'cursor-pointer transition-colors hover:bg-ods-bg-active',
     className,
@@ -118,7 +127,7 @@ function DataTableRowImpl<T>({
         'flex',
         ROW_SHELL_CLASSES,
         rowHeightClassName
-          ? `py-0 ${rowHeightClassName}`
+          ? 'min-h-0 flex-1 py-0'
           : compact
             ? 'py-[var(--spacing-system-xsf)]'
             : autoHeight
@@ -171,7 +180,10 @@ function DataTableRowImpl<T>({
         <Link
           href={href}
           prefetch={false}
-          className="block cursor-pointer text-inherit no-underline transition-colors hover:bg-ods-bg-active"
+          className={cn(
+            'cursor-pointer text-inherit no-underline transition-colors hover:bg-ods-bg-active',
+            rowHeightClassName ? 'flex min-h-0 flex-1 flex-col' : 'block',
+          )}
           onClick={handleClick}
         >
           {cells}

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -31,6 +31,7 @@ export interface DataTableSkeletonProps {
   rowClassName?: string;
   /**
    * REPLACES the design row height, for a table whose rows are not that tall.
+   * Sizes the CARD, as a real row does.
    * Appending a height through `rowClassName` cannot do this: tailwind-merge
    * drops the plain `h-[66px]` but keeps `md:h-[78px]`, so the override held
    * on a phone and lost on a desktop. See `DataTableBodyProps.rowHeightClassName`.
@@ -50,6 +51,8 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
           key={index}
           className={cn(
             'relative animate-pulse overflow-hidden rounded-md border border-ods-border bg-ods-card',
+            // The slot height sits on the card, matching a real row.
+            rowHeightClassName,
             className,
           )}
         >
@@ -57,7 +60,7 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
             className={cn(
               'hidden py-0 md:flex',
               ROW_SHELL_CLASSES,
-              rowHeightClassName ?? ROW_HEIGHT_DESKTOP,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP,
               rowClassName,
             )}
           >
@@ -89,7 +92,7 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
             className={cn(
               'flex justify-start py-0 md:hidden',
               ROW_SHELL_CLASSES,
-              rowHeightClassName ?? ROW_HEIGHT_MOBILE,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE,
               rowClassName,
             )}
           >

package/src/utils/source-icons.ts

@@ -68,6 +68,14 @@ export const SOURCE_ICON_NAMES: Record<string, string> = {
 
   // Communications
   'slack-messages': 'slack',
+
+  // People-hub employee content
+  'what-i-shipped': 'package',
+  'how-i-work': 'book-open',
+
+  // Product-hub internal
+  'design-docs': 'file-text',
+  'openframe-tenants': 'globe',
 };
 
 /** Lookup an icon name by RagTableConfig.id. Returns undefined when
@@ -139,6 +147,14 @@ export const SOURCE_LABELS_BY_TABLE: Record<string, string> = {
 
   // Communications
   'slack-messages': 'OpenMSP Community',
+
+  // People-hub employee content
+  'what-i-shipped': 'What I Shipped',
+  'how-i-work': 'How I Work',
+
+  // Product-hub internal
+  'design-docs': 'Design Docs',
+  'openframe-tenants': 'OpenFrame Tenants',
 };
 
 /** Lookup a human-readable label by RagTableConfig.id. Falls back
@@ -212,6 +228,14 @@ export const DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID: Record<string, string> = {
 
   // Communications
   slack_message: 'slack-messages',
+
+  // People-hub employee content
+  what_i_shipped: 'what-i-shipped',
+  how_i_work: 'how-i-work',
+
+  // Product-hub internal
+  design_doc: 'design-docs',
+  openframe_tenant: 'openframe-tenants',
 };
 
 /**