@tristan2828/ui-foundation 4.36.0 → 4.37.0

package/conventions/docs/design-language.md

@@ -12,11 +12,11 @@
 - [Typography](#typography) · lines 242–324
   - [Written text (notes)](#written-text-notes) · lines 273–324
 - [Density](#density) · lines 326–383
-- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 385–460
-- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 462–520
-- [Notices](#notices) · lines 522–550
-- [A value over time](#a-value-over-time) · lines 552–585
-- [A list as a board](#a-list-as-a-board) · lines 587–638
+- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 385–463
+- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 465–523
+- [Notices](#notices) · lines 525–553
+- [A value over time](#a-value-over-time) · lines 555–588
+- [A list as a board](#a-list-as-a-board) · lines 590–641
 
 <!-- /index -->
 
@@ -424,7 +424,10 @@ const { data, isLoading, error, refetch } = useReadyTasksQuery() // one page of
 - **Three to six rows.** A widget is a sample, not the list: ask the API
   for that many (the query's page size) and put the rest behind the
   header `link` ("All", "All doing"), which goes to the full list
-  filtered the same way. Set `skeletonRows` to the number it usually holds, so the card
+  filtered the same way. A widget about a service outside the app links
+  its header there instead: `link={{ href: 'https://…', label: 'Open
+  <service>' }}` opens it in a new tab, with the external-link mark and
+  "(opens in a new tab)" for a screen reader. Set `skeletonRows` to the number it usually holds, so the card
   keeps its height when the data arrives.
 - **Each widget owns its four states.** Loading is a skeleton of rows,
   empty is one quiet line the app writes ("Nothing waiting", not "No

package/conventions/docs/reminders.md

@@ -68,6 +68,18 @@ Scope it to the signed-in user, as Widgets are.
   sends a reminder when today is one of its days in its time zone and the
   time has come, once a day at most. More than 15 minutes late (the
   backend was down) and it's skipped for the day rather than sent late.
+- **Reminders in a table of the app's own** (another schema, another
+  name, as an app with a schema per module keeps them): define its table
+  model with the same columns (`id`, `user_id`, `title`, `body`, `url`,
+  `time_of_day`, `days`, `time_zone`, `enabled`, `last_sent_on`) and hand
+  it to the job, `reminders.register(model=MyReminder)` in place of
+  `reminders.register()`. Left out, the job reads the package's
+  `reminders` table. Neither table is on `SQLModel.metadata` until the
+  app uses it: `push_subscriptions` arrives with `foundation_backend.push`
+  (and `foundation_backend.reminders`, which sends through it), the
+  package's `reminders` only with its `Reminder` model (imported, or the
+  job run without a model). So an app without push, or with its own
+  table, gets neither from `create_all` or autogenerate.
 - **Something else to send?** Call `send_push` from the app's own code or
   job: a message when a long task finishes, a daily summary. The `url` is
   always the app's own path.

package/dist/components/app/widget-card.d.ts

@@ -14,14 +14,12 @@ export interface WidgetCardProps {
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     /**
      * A link on the right of the header to everything the widget samples:
-     * `{ to: '/tasks?status=doing', label: 'All doing' }`. Its accessible
-     * name is `label`, described by the title, so several "All" links on one
-     * page stay distinct.
+     * `{ to: '/tasks?status=doing', label: 'All doing' }`, or an outside
+     * address, opened in a new tab: `{ href: 'https://example.com', label:
+     * 'Open Example' }`. Its accessible name is `label`, described by the
+     * title, so several "All" links on one page stay distinct.
      */
-    link?: {
-        to: To;
-        label: string;
-    };
+    link?: WidgetCardLink;
     isLoading: boolean;
     error?: AppError | null;
     onRetry?: () => void;
@@ -44,6 +42,15 @@ export interface WidgetCardProps {
     children?: ReactNode;
     className?: string;
 }
+export type WidgetCardLink = {
+    to: To;
+    label: string;
+    href?: never;
+} | {
+    href: string;
+    label: string;
+    to?: never;
+};
 export declare function WidgetCard({ title, icon: Icon, headingLevel, link, isLoading, error, onRetry, isEmpty, emptyMessage, skeletonRows, collapsible, defaultCollapsed, storageKey, children, className, }: WidgetCardProps): import("react").JSX.Element;
 /** The rows of a WidgetCard: a list with a divider between rows. */
 export declare function WidgetList({ children, className }: {

package/dist/components/app/widget-card.js

@@ -24,6 +24,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // where that's blocked). The body is hidden, not unmounted, so whatever
 // the app keeps in it stays put.
 //
+// The header's link is an app route (`to`) or, for a widget about a
+// service outside the app, its address (`href`, #248): that one opens in a
+// new tab, with the outside-link mark and a screen reader's "(opens in a
+// new tab)", as WidgetListItem's `href` does.
+//
 // WidgetList and WidgetListItem are the common body: rows with dividers,
 // each a primary link (or plain text) truncated to one line, an optional
 // muted note ("2 h ago") and an optional trailing element (a badge, a
@@ -52,7 +57,7 @@ export function WidgetCard({ title, icon: Icon, headingLevel = 2, link, isLoadin
     const state = error ? 'error' : isLoading ? 'loading' : isEmpty ? 'empty' : 'success';
     const [folded, setFolded] = useRememberedFlag(collapsible && storageKey !== undefined ? `${storageKey}:collapsed` : undefined, defaultCollapsed);
     const collapsed = collapsible && folded;
-    return (_jsx("section", { "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || collapsible) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label })), collapsible && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: () => setFolded(!collapsed), 
+    return (_jsx("section", { "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || collapsible) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [link?.href !== undefined ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", "aria-describedby": headingId, className: cn(HEADER_LINK_CLASS, 'inline-flex items-center gap-1'), children: [link.label, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))), collapsible && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: () => setFolded(!collapsed), 
                                     // The button's own open look (a filled background) would
                                     // read as pressed: the chevron says it.
                                     className: "-my-1 -mr-1.5 aria-expanded:not-hover:bg-transparent", children: _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('transition-transform', collapsed && '-rotate-90') }) }))] }))] }), _jsx(CardContent, { id: contentId, hidden: collapsed, "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export { DEFAULT_IMAGE_TYPES, type ImageUpload, type ImageUploadResult } from '.
 export { formatPlainDate, type PlainDate } from './lib/plain-date.js';
 export { ChoiceCell, LinkCell, NameCell, type ChoiceCellProps, type LinkCellProps, type NameCellProps, } from './components/app/row-edit-cells.js';
 export { ModuleCard, ModuleStrip, type CategorySlot, type ModuleCardLink, type ModuleCardPlace, type ModuleCardProps, type ModuleStripProps, } from './components/app/module-card.js';
-export { WidgetCard, WidgetList, WidgetListItem, type WidgetCardProps, type WidgetListItemProps, } from './components/app/widget-card.js';
+export { WidgetCard, WidgetList, WidgetListItem, type WidgetCardLink, type WidgetCardProps, type WidgetListItemProps, } from './components/app/widget-card.js';
 export { ThemeProvider } from './components/theme-provider.js';
 export { LoginRoute, type LoginRouteProps } from './routes/login.js';
 export { RegisterRoute } from './routes/register.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.36.0",
+  "version": "4.37.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": {