@flamingo-stack/openframe-frontend-core 0.0.852 → 0.0.853

package/dist/{knowledge-5TJIXVMD.cjs → knowledge-UTWKB6XG.cjs}

@@ -8,7 +8,7 @@ var _chunkLHV2R6QUcjs = require('./chunk-LHV2R6QU.cjs');
 var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
-var _chunkD3H6AI7Ocjs = require('./chunk-D3H6AI7O.cjs');
+var _chunkGI6ECCWBcjs = require('./chunk-GI6ECCWB.cjs');
 require('./chunk-USPUZO53.cjs');
 require('./chunk-COJG2ATY.cjs');
 require('./chunk-P63CRPWI.cjs');
@@ -1908,7 +1908,7 @@ function KnowledgeScreen(_props) {
   const cast = _chunkLHV2R6QUcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkD3H6AI7Ocjs.KnowledgeBaseArticleView,
+    _chunkGI6ECCWBcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
       content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLFEURIZNcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })

package/dist/{logs-HGQOTRKZ.cjs → logs-PMXIWMBQ.cjs}

@@ -15,7 +15,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkD3H6AI7Ocjs = require('./chunk-D3H6AI7O.cjs');
+var _chunkGI6ECCWBcjs = require('./chunk-GI6ECCWB.cjs');
 require('./chunk-USPUZO53.cjs');
 require('./chunk-COJG2ATY.cjs');
 require('./chunk-P63CRPWI.cjs');
@@ -1890,7 +1890,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkFDZOE5TLcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkD3H6AI7Ocjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkGI6ECCWBcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1962,13 +1962,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD3H6AI7Ocjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGI6ECCWBcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkD3H6AI7Ocjs.LogsPageView,
+      _chunkGI6ECCWBcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1976,7 +1976,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkD3H6AI7Ocjs.LogsTableView,
+          _chunkGI6ECCWBcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1991,7 +1991,7 @@ function LogsScreen({ compact = false }) {
       }
     ) }),
     !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOT6P57ZScjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkD3H6AI7Ocjs.LogDrawer,
+      _chunkGI6ECCWBcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -2003,12 +2003,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD3H6AI7Ocjs.ToolBadge, { toolType: _chunkIC4IJJB2cjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGI6ECCWBcjs.ToolBadge, { toolType: _chunkIC4IJJB2cjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkD3H6AI7Ocjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkGI6ECCWBcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkD3H6AI7Ocjs.DeviceCard,
+          _chunkGI6ECCWBcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-GWFSLVSM.cjs → policies-6DCMFDL7.cjs}

@@ -10,7 +10,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkD3H6AI7Ocjs = require('./chunk-D3H6AI7O.cjs');
+var _chunkGI6ECCWBcjs = require('./chunk-GI6ECCWB.cjs');
 require('./chunk-USPUZO53.cjs');
 require('./chunk-COJG2ATY.cjs');
 require('./chunk-P63CRPWI.cjs');
@@ -1894,14 +1894,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkD3H6AI7Ocjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkGI6ECCWBcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkD3H6AI7Ocjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkGI6ECCWBcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1915,16 +1915,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkD3H6AI7Ocjs.PoliciesTable,
+    _chunkGI6ECCWBcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD3H6AI7Ocjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGI6ECCWBcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD3H6AI7Ocjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGI6ECCWBcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{scripts-PGJNAZF4.cjs → scripts-2G7LXW7Z.cjs}

@@ -13,7 +13,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkD3H6AI7Ocjs = require('./chunk-D3H6AI7O.cjs');
+var _chunkGI6ECCWBcjs = require('./chunk-GI6ECCWB.cjs');
 require('./chunk-USPUZO53.cjs');
 
 
@@ -1998,8 +1998,8 @@ function buildScriptsFixture(cast) {
 var _jsxruntime = require('react/jsx-runtime');
 var WIDE_HIDDEN_COLUMNS = ["result", "open"];
 var COMPACT_COLUMNS = [
-  { ..._chunkD3H6AI7Ocjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
-  _chunkD3H6AI7Ocjs.EXECUTION_COLUMNS.status
+  { ..._chunkGI6ECCWBcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
+  _chunkGI6ECCWBcjs.EXECUTION_COLUMNS.status
 ];
 var COMPACT_ROWS = 4;
 var TOKEN_CLASS = {
@@ -2058,7 +2058,7 @@ function ScriptCodePicture({ script }) {
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCOJG2ATYcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkD3H6AI7Ocjs.ScriptShellBadge,
+              _chunkGI6ECCWBcjs.ScriptShellBadge,
               {
                 value: script.shellType,
                 className: "shrink-0 text-ods-text-secondary text-h6",
@@ -2082,7 +2082,7 @@ function ScriptsScreen({ compact = false }) {
     return (
       // Four runs of the card's row height fill the frame; the padding is what is left round them.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full overflow-hidden bg-ods-bg p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkD3H6AI7Ocjs.ScriptExecutionsTable,
+        _chunkGI6ECCWBcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions.slice(0, COMPACT_ROWS),
           columns: COMPACT_COLUMNS,
@@ -2092,13 +2092,13 @@ function ScriptsScreen({ compact = false }) {
       ) })
     );
   }
-  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD3H6AI7Ocjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
+  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGI6ECCWBcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
   return (
     // The frame's tighter padding and no header row: the output opened under a run needs the height.
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full gap-[var(--spacing-system-m)] overflow-hidden bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-[39%] shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScriptCodePicture, { script: fixture.script }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkD3H6AI7Ocjs.ScriptExecutionsTable,
+        _chunkGI6ECCWBcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions,
           hideColumns: WIDE_HIDDEN_COLUMNS,

package/dist/{software-update-KKLSYHDI.cjs → software-update-MYLKHDHC.cjs}

@@ -15,7 +15,7 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkD3H6AI7Ocjs = require('./chunk-D3H6AI7O.cjs');
+var _chunkGI6ECCWBcjs = require('./chunk-GI6ECCWB.cjs');
 require('./chunk-USPUZO53.cjs');
 
 
@@ -1925,12 +1925,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkCOJG2ATYcjs.Autocomplete,
     {
-      label: _chunkD3H6AI7Ocjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkGI6ECCWBcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkD3H6AI7Ocjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkGI6ECCWBcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1944,7 +1944,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkD3H6AI7Ocjs.SoftwareActionForm,
+    _chunkGI6ECCWBcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1956,7 +1956,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkD3H6AI7Ocjs.DeviceSelector,
+        _chunkGI6ECCWBcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/dist/types/data-sync.d.ts

@@ -1,11 +1,14 @@
 /**
  * Every system a shared page's records are mirrored from, with the name a page shows for it. THE list: `DataSync`,
- * `DataSyncLine`'s marks, the docs hook and every host that answers a `sync` read it.
+ * `DataSyncLine`'s and `DataSyncIcon`'s marks, the docs hook and every host that answers a `sync` read it.
  */
 export declare const DATA_SYNC_SOURCES: {
     readonly clickup: "ClickUp";
     readonly hubspot: "HubSpot";
     readonly github: "GitHub";
+    readonly openframe: "OpenFrame";
+    readonly stripe: "Stripe";
+    readonly quickbooks: "QuickBooks";
 };
 export type DataSyncSource = keyof typeof DATA_SYNC_SOURCES;
 export declare function isDataSyncSource(value: unknown): value is DataSyncSource;

package/dist/types/data-sync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-sync.d.ts","sourceRoot":"","sources":["../../src/types/data-sync.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAExE;AAED;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,MAAM,EAAE,cAAc,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB"}
+{"version":3,"file":"data-sync.d.ts","sourceRoot":"","sources":["../../src/types/data-sync.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;CAOpB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAExE;AAED;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,MAAM,EAAE,cAAc,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB"}

package/dist/types/data-sync.js

@@ -1,7 +1,10 @@
 const DATA_SYNC_SOURCES = {
   clickup: "ClickUp",
   hubspot: "HubSpot",
-  github: "GitHub"
+  github: "GitHub",
+  openframe: "OpenFrame",
+  stripe: "Stripe",
+  quickbooks: "QuickBooks"
 };
 function isDataSyncSource(value) {
   return typeof value === "string" && Object.prototype.hasOwnProperty.call(DATA_SYNC_SOURCES, value);

package/dist/types/index.cjs

@@ -28,7 +28,10 @@ var AVAILABLE_SVG_ICONS = [
 var DATA_SYNC_SOURCES = {
   clickup: "ClickUp",
   hubspot: "HubSpot",
-  github: "GitHub"
+  github: "GitHub",
+  openframe: "OpenFrame",
+  stripe: "Stripe",
+  quickbooks: "QuickBooks"
 };
 function isDataSyncSource(value) {
   return typeof value === "string" && Object.prototype.hasOwnProperty.call(DATA_SYNC_SOURCES, value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.852",
+  "version": "0.0.853",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/help-center-pages/trust-center-page.tsx

@@ -103,7 +103,7 @@ export interface TrustCenterPageProps {
    */
   beforeFaq?: ReactNode;
   /**
-   * The "Data synced from <source>" line and its PDF download in the status row. Default true. Pass false when the
+   * The "Data from <source>" line and its PDF download in the status row. Default true. Pass false when the
    * host's own header states both (the hub's admin preview draws them in its page header), so the page never says
    * them twice; the monitoring status stays.
    */

package/src/components/platform/tool-badge-mark.ts

@@ -1,6 +1,6 @@
 import { ICON_SIZE } from '../../styles/component-sizes';
 /**
- * A tool or source mark's 16px box (`ToolBadge`'s mark, the "Data synced from" line's source glyph): read by the marks
+ * A tool or source mark's 16px box (`ToolBadge`'s mark, the "Data from" line's source glyph): read by the marks
  * and by every skeleton that stands for one. A leaf, so a `ui` component can read it without loading the badge.
  */
 export const TOOL_MARK_CLASS = `flex ${ICON_SIZE.sm} shrink-0 items-center justify-center`;

package/src/components/ui/data-attribution.tsx

@@ -7,6 +7,9 @@ import { formatDate } from '../../utils/format';
 import { ClickupIcon } from '../icons-v2-generated/brand-logos/clickup-icon';
 import { GithubClassicIcon } from '../icons-v2-generated/brand-logos/github-classic-icon';
 import { HubspotIcon } from '../icons-v2-generated/brand-logos/hubspot-icon';
+import { OpenframeLogoGreyIcon } from '../icons-v2-generated/brand-logos/openframe-logo-grey-icon';
+import { QuickbooksIcon } from '../icons-v2-generated/brand-logos/quickbooks-icon';
+import { StripeIcon } from '../icons-v2-generated/brand-logos/stripe-icon';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { TOOL_MARK_CLASS } from '../platform/tool-badge-mark';
 import { useLoadingScope } from './loading-scope';
@@ -39,8 +42,8 @@ function Separator() {
 }
 
 /**
- * THE "Data synced from <source> · Last updated: <date>" line every synced
- * surface shows (the cap table, the financials, the Trust Center). The date is
+ * THE "Data from <source> · Last updated: <date>" line every surface showing another system's data
+ * draws (the cap table, the financials, the Trust Center). The date is
  * UTC (`formatDate`), so a server-rendered page and its hydrated copy print the
  * same text.
  */
@@ -50,7 +53,7 @@ export function DataAttribution({ icon, source, lastUpdated, action }: DataAttri
     <div className={LINE_CLASS}>
       <div className={ITEM_CLASS}>
         {icon}
-        <span>Data synced from {source}</span>
+        <span>Data from {source}</span>
       </div>
       <Separator />
       <span className={UPDATED_CLASS}>Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>
@@ -70,7 +73,7 @@ function DataAttributionSkeleton({ icon, action }: Pick<DataAttributionProps, 'i
       <div className={ITEM_CLASS}>
         {icon ?? <UnifiedSkeleton className={cn(TOOL_MARK_CLASS, 'rounded')} />}
         <span>
-          Data synced from <TextLineSkeleton type="inherit" as="span" className={`${WORD_BAR_CLASS} w-20`} />
+          Data from <TextLineSkeleton type="inherit" as="span" className={`${WORD_BAR_CLASS} w-20`} />
         </span>
       </div>
       <Separator />
@@ -88,12 +91,22 @@ function DataAttributionSkeleton({ icon, action }: Pick<DataAttributionProps, 'i
 }
 
 /** The mark each sync source is drawn with (the app's standard brand marks); its name is `DATA_SYNC_SOURCES`'. */
-const DATA_SYNC_ICONS: Record<DataSyncSource, typeof ClickupIcon> = {
+const DATA_SYNC_ICONS: Record<DataSyncSource, (props: { size?: number }) => ReactNode> = {
   clickup: ClickupIcon,
   hubspot: HubspotIcon,
   github: GithubClassicIcon,
+  // The OpenFrame mark drawn in `currentColor`, so it reads as the text beside it in both themes.
+  openframe: OpenframeLogoGreyIcon,
+  stripe: StripeIcon,
+  quickbooks: QuickbooksIcon,
 };
 
+/** A sync source's mark, the one `DataSyncLine` draws: for a page that names the source in its own words. */
+export function DataSyncIcon({ source, size = 16 }: { source: DataSyncSource; size?: number }) {
+  const Icon = DATA_SYNC_ICONS[source];
+  return <Icon size={size} />;
+}
+
 /**
  * THE sync line of a shared page whose records an API reads from a mirror (the roadmap and the delivery board:
  * ClickUp; the ticket center: HubSpot; the docs and the legal documents: GitHub). The page draws whatever `sync`
@@ -121,13 +134,12 @@ export function DataSyncLine({
   const inScope = useLoadingScope();
   const loading = (loadingProp || inScope) && stated;
   if (!loading && !(sync && sync.source in DATA_SYNC_ICONS)) return null;
-  const Icon = sync ? DATA_SYNC_ICONS[sync.source] : null;
   const line =
-    loading || !sync || !Icon ? (
+    loading || !sync ? (
       <DataAttributionSkeleton action={action} />
     ) : (
       <DataAttribution
-        icon={<Icon size={16} />}
+        icon={<DataSyncIcon source={sync.source} />}
         source={DATA_SYNC_SOURCES[sync.source]}
         lastUpdated={sync.syncedAt}
         action={action}

package/src/components/ui/index.ts

@@ -112,6 +112,8 @@ export * from './device-card';
 export * from './device-card-compact';
 export * from './entity-image';
 export * from './data-attribution';
+// The sources `DataSyncLine` / `DataSyncIcon` take, beside them, so a page draws a source's name and mark from one import.
+export * from '../../types/data-sync';
 export * from './download-button';
 export * from './compliance-badge';
 export * from './feature-card';

package/src/types/data-sync.ts

@@ -1,11 +1,14 @@
 /**
  * Every system a shared page's records are mirrored from, with the name a page shows for it. THE list: `DataSync`,
- * `DataSyncLine`'s marks, the docs hook and every host that answers a `sync` read it.
+ * `DataSyncLine`'s and `DataSyncIcon`'s marks, the docs hook and every host that answers a `sync` read it.
  */
 export const DATA_SYNC_SOURCES = {
   clickup: 'ClickUp',
   hubspot: 'HubSpot',
   github: 'GitHub',
+  openframe: 'OpenFrame',
+  stripe: 'Stripe',
+  quickbooks: 'QuickBooks',
 } as const;
 
 export type DataSyncSource = keyof typeof DATA_SYNC_SOURCES;