@tristan2828/ui-foundation 4.30.1 → 4.31.0

package/conventions/docs/add-an-entity.md

@@ -390,8 +390,11 @@ is a filled-in example while the Widgets demo is still here).
    - **A source credit** (`footer`), only when the record's data comes
      from an outside service whose terms ask for one (many free APIs
      do: a film database, a games catalogue): `<SourceCredit sources={[{
-     name, href, note }]} />`, with `note` the sentence the terms ask for,
-     word for word. Logos and their rules are the app's own.
+     name, href, note, icon }]} />`, with `note` the sentence the terms ask
+     for, word for word, and `icon` the service's mark when the app has
+     one (the same component it shows for that service elsewhere; drawn
+     before the name, which stays the link's text). Logos and their rules
+     are the app's own.
    - **Every value renders the way its table cell does**: badges, names
      of linked records, a done-count, from the shared lookups in
      `<entity>-format.ts`. Never re-derive one for the view.

package/conventions/docs/design-language.md

@@ -104,7 +104,8 @@ lower; say so in a comment.
 ## Logos and brand marks
 
 An app's own logo (`AppShell`'s `logo`) and the marks of the services it
-links to (a video site's mark on "Open on …", on a `WidgetCard` about it)
+links to (a video site's mark on "Open on …", on a `WidgetCard` about it,
+beside its name in a `SourceCredit`)
 are **icon components** (`IconComponent`): sized by a `size-*` class,
 `aria-hidden` passed through to the `<svg>`, with the same props as a
 Lucide icon, so they go wherever an icon goes. Lucide has no brand logos,
@@ -143,7 +144,8 @@ Colour them in one of two ways:
   one-colour mark there.
 
 The package's own stories show the slots with made-up marks in
-`currentColor` (`app/AppShell` With logo, `app/WidgetCard` Brand mark).
+`currentColor` (`app/AppShell` With logo, `app/WidgetCard` Brand mark,
+`app/EntityView` Notice and footer).
 
 ## Categorical colour
 

package/dist/components/app/source-credit.d.ts

@@ -1,3 +1,4 @@
+import type { IconComponent } from './icon-component.js';
 export type Source = {
     /** The service's name, the link's text: "TMDB". */
     name: string;
@@ -5,6 +6,12 @@ export type Source = {
     href: string;
     /** A sentence the service's terms ask for, shown after the list as written. */
     note?: string;
+    /**
+     * The service's mark, drawn before its name inside the link and hidden
+     * from screen readers: the name stays the link's text. The app's own
+     * component, the one it shows for this service elsewhere.
+     */
+    icon?: IconComponent;
 };
 export type SourceCreditProps = {
     sources: Source[];

package/dist/components/app/source-credit.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Credits the outside services a record's data comes from, as many free
 // APIs require on every screen showing their data ("This product uses the
 // TMDB API but is not endorsed or certified by TMDB"). EntityView's
-// `footer` is its usual home. Text and links only: a service's logo and
-// its usage rules are the app's.
+// `footer` is its usual home. A source's mark is the app's own icon
+// component (`icon`), drawn before its name; its usage rules are the app's.
 import { Fragment } from 'react';
 import { ExternalLinkIcon } from 'lucide-react';
 function joined(index, count) {
@@ -17,5 +17,5 @@ export function SourceCredit({ sources, lead = 'Data from' }) {
     if (sources.length === 0)
         return null;
     const notes = sources.flatMap((source) => (source.note ? [source.note] : []));
-    return (_jsxs("p", { "data-slot": "source-credit", className: "type-caption text-muted-foreground", children: [lead, ' ', sources.map((source, index) => (_jsxs(Fragment, { children: [joined(index, sources.length), _jsxs("a", { href: source.href, target: "_blank", rel: "noreferrer", className: "rounded-sm underline underline-offset-2 outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", children: [source.name, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "ml-0.5 inline size-3 align-baseline" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })] }, source.name))), ".", notes.map((note) => ` ${note}`).join('')] }));
+    return (_jsxs("p", { "data-slot": "source-credit", className: "type-caption text-muted-foreground", children: [lead, ' ', sources.map(({ icon: Icon, ...source }, index) => (_jsxs(Fragment, { children: [joined(index, sources.length), _jsxs("a", { href: source.href, target: "_blank", rel: "noreferrer", className: "rounded-sm underline underline-offset-2 outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "mr-1 inline size-3.5 align-text-bottom" }), source.name, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "ml-0.5 inline size-3 align-baseline" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })] }, source.name))), ".", notes.map((note) => ` ${note}`).join('')] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.30.1",
+  "version": "4.31.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {