@vantageos/mosaic 0.2.1 → 0.3.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +181 -0
- package/dist/Alert.schema-BQsZGG6P.d.cts +41 -0
- package/dist/Alert.schema-BQsZGG6P.d.ts +41 -0
- package/dist/ConfirmDialog-B3CQQGmJ.d.cts +34 -0
- package/dist/ConfirmDialog-B3CQQGmJ.d.ts +34 -0
- package/dist/Skeleton.schema-BO0ca2UX.d.cts +135 -0
- package/dist/Skeleton.schema-BO0ca2UX.d.ts +135 -0
- package/dist/Tabs.schema-BzcEyeq8.d.cts +79 -0
- package/dist/Tabs.schema-BzcEyeq8.d.ts +79 -0
- package/dist/artifacts.cjs +20 -2
- package/dist/artifacts.cjs.map +1 -1
- package/dist/artifacts.js +20 -2
- package/dist/artifacts.js.map +1 -1
- package/dist/confirmation.cjs +44 -2
- package/dist/confirmation.cjs.map +1 -1
- package/dist/confirmation.d.cts +34 -1
- package/dist/confirmation.d.ts +34 -1
- package/dist/confirmation.js +41 -3
- package/dist/confirmation.js.map +1 -1
- package/dist/display.cjs +145 -2
- package/dist/display.cjs.map +1 -1
- package/dist/display.d.cts +1 -0
- package/dist/display.d.ts +1 -0
- package/dist/display.js +140 -3
- package/dist/display.js.map +1 -1
- package/dist/forms.cjs +1412 -0
- package/dist/forms.cjs.map +1 -0
- package/dist/forms.d.cts +159 -0
- package/dist/forms.d.ts +159 -0
- package/dist/forms.js +1331 -0
- package/dist/forms.js.map +1 -0
- package/dist/index-CwXVgtGb.d.cts +917 -0
- package/dist/index-CwXVgtGb.d.ts +917 -0
- package/dist/index.cjs +188 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +177 -3
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +19 -0
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +4 -34
- package/dist/input.d.ts +4 -34
- package/dist/input.js +18 -1
- package/dist/input.js.map +1 -1
- package/dist/media.cjs +20 -2
- package/dist/media.cjs.map +1 -1
- package/dist/media.js +20 -2
- package/dist/media.js.map +1 -1
- package/dist/preact/artifacts.d.ts +2 -0
- package/dist/preact/confirmation.d.ts +86 -0
- package/dist/preact/confirmation.js +263 -0
- package/dist/preact/confirmation.js.map +1 -1
- package/dist/preact/display.d.ts +241 -0
- package/dist/preact/display.js +366 -0
- package/dist/preact/display.js.map +1 -1
- package/dist/preact/forms.d.ts +875 -0
- package/dist/preact/forms.js +1323 -0
- package/dist/preact/forms.js.map +1 -0
- package/dist/preact/index.d.ts +2 -0
- package/dist/preact/input.d.ts +89 -0
- package/dist/preact/input.js +194 -0
- package/dist/preact/input.js.map +1 -1
- package/dist/preact/media.d.ts +2 -0
- package/dist/preact/progress.d.ts +2 -0
- package/dist/progress.cjs +20 -2
- package/dist/progress.cjs.map +1 -1
- package/dist/progress.js +20 -2
- package/dist/progress.js.map +1 -1
- package/dist/react/confirmation.cjs +267 -0
- package/dist/react/confirmation.cjs.map +1 -1
- package/dist/react/confirmation.d.cts +21 -1
- package/dist/react/confirmation.d.ts +21 -1
- package/dist/react/confirmation.js +263 -0
- package/dist/react/confirmation.js.map +1 -1
- package/dist/react/display.cjs +372 -0
- package/dist/react/display.cjs.map +1 -1
- package/dist/react/display.d.cts +112 -1
- package/dist/react/display.d.ts +112 -1
- package/dist/react/display.js +362 -0
- package/dist/react/display.js.map +1 -1
- package/dist/react/forms.cjs +1384 -0
- package/dist/react/forms.cjs.map +1 -0
- package/dist/react/forms.d.cts +5 -0
- package/dist/react/forms.d.ts +5 -0
- package/dist/react/forms.js +1323 -0
- package/dist/react/forms.js.map +1 -0
- package/dist/react/input.cjs +197 -0
- package/dist/react/input.cjs.map +1 -1
- package/dist/react/input.d.cts +13 -1
- package/dist/react/input.d.ts +13 -1
- package/dist/react/input.js +194 -0
- package/dist/react/input.js.map +1 -1
- package/dist/tokens.d.cts +35 -0
- package/dist/tokens.d.ts +35 -0
- package/package.json +74 -49
- package/registry.yaml +154 -1
package/dist/react/display.d.ts
CHANGED
|
@@ -1,2 +1,113 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { E as EmptyStateProps } from '../Skeleton.schema-BO0ca2UX.js';
|
|
4
|
+
export { a as EmptyStatePropsSchema, S as Skeleton, d as SkeletonProps, e as SkeletonPropsSchema, r as resolveSkeletonDimensions, v as validateEmptyStateProps, f as validateSkeletonProps } from '../Skeleton.schema-BO0ca2UX.js';
|
|
5
|
+
import { z } from 'zod';
|
|
1
6
|
|
|
2
|
-
|
|
7
|
+
/**
|
|
8
|
+
* EmptyState — cross-runtime empty-set display primitive (React 19 implementation).
|
|
9
|
+
*
|
|
10
|
+
* Accepts `Record<string, unknown>` for MCP postMessage injection safety.
|
|
11
|
+
* Zod validation narrows before render. Invalid props → accessible error span.
|
|
12
|
+
*
|
|
13
|
+
* WCAG-AA:
|
|
14
|
+
* - <section aria-label={title}> → role="region" landmark (no Biome lint, correct semantics)
|
|
15
|
+
* - heading hierarchy: h2 (title) — caller manages the h1 context
|
|
16
|
+
* - action button is keyboard-accessible (tab + enter/space)
|
|
17
|
+
*/
|
|
18
|
+
declare function EmptyState(raw: Omit<EmptyStateProps, "locale"> & Partial<Pick<EmptyStateProps, "locale">> & {
|
|
19
|
+
icon?: ReactNode;
|
|
20
|
+
}): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* VirtualList Zod props schema.
|
|
24
|
+
*
|
|
25
|
+
* Runtime functions (renderItem, estimateSize, onRowClick) are excluded from
|
|
26
|
+
* Zod per §18.5 (runtime functions not serialisable). They are typed separately
|
|
27
|
+
* in VirtualListProps<T> below.
|
|
28
|
+
*
|
|
29
|
+
* Serialisable fields validated at render time for safe MCP postMessage injection.
|
|
30
|
+
*/
|
|
31
|
+
declare const VirtualListPropsSchema: z.ZodObject<{
|
|
32
|
+
/** Array of items to render — required, can be empty */
|
|
33
|
+
items: z.ZodArray<z.ZodUnknown, "many">;
|
|
34
|
+
/** Fixed row height in px — mutually exclusive with estimateSize */
|
|
35
|
+
itemHeight: z.ZodOptional<z.ZodNumber>;
|
|
36
|
+
/** Variable row height estimator — mutually exclusive with itemHeight */
|
|
37
|
+
estimateSize: z.ZodOptional<z.ZodFunction<z.ZodTuple<[z.ZodNumber], z.ZodUnknown>, z.ZodNumber>>;
|
|
38
|
+
/** Row renderer — required (runtime function, excluded from strict Zod parse but validated for presence) */
|
|
39
|
+
renderItem: z.ZodOptional<z.ZodFunction<z.ZodTuple<[z.ZodUnknown, z.ZodNumber], z.ZodUnknown>, z.ZodUnknown>>;
|
|
40
|
+
/** Rows to render outside visible area (default: 5) */
|
|
41
|
+
overscan: z.ZodOptional<z.ZodNumber>;
|
|
42
|
+
/** CSS class applied to the scroll container */
|
|
43
|
+
className: z.ZodOptional<z.ZodString>;
|
|
44
|
+
/** Locale for built-in empty state + error messages */
|
|
45
|
+
locale: z.ZodOptional<z.ZodEnum<["en", "fr"]>>;
|
|
46
|
+
/** a11y: when provided, rows become keyboard-activable (role=button + tabIndex=0 + Enter/Space) */
|
|
47
|
+
onRowClick: z.ZodOptional<z.ZodFunction<z.ZodTuple<[z.ZodUnknown, z.ZodNumber], z.ZodUnknown>, z.ZodVoid>>;
|
|
48
|
+
}, "strip", z.ZodTypeAny, {
|
|
49
|
+
items: unknown[];
|
|
50
|
+
locale?: "en" | "fr" | undefined;
|
|
51
|
+
className?: string | undefined;
|
|
52
|
+
itemHeight?: number | undefined;
|
|
53
|
+
estimateSize?: ((args_0: number, ...args: unknown[]) => number) | undefined;
|
|
54
|
+
renderItem?: ((args_0: unknown, args_1: number, ...args: unknown[]) => unknown) | undefined;
|
|
55
|
+
overscan?: number | undefined;
|
|
56
|
+
onRowClick?: ((args_0: unknown, args_1: number, ...args: unknown[]) => void) | undefined;
|
|
57
|
+
}, {
|
|
58
|
+
items: unknown[];
|
|
59
|
+
locale?: "en" | "fr" | undefined;
|
|
60
|
+
className?: string | undefined;
|
|
61
|
+
itemHeight?: number | undefined;
|
|
62
|
+
estimateSize?: ((args_0: number, ...args: unknown[]) => number) | undefined;
|
|
63
|
+
renderItem?: ((args_0: unknown, args_1: number, ...args: unknown[]) => unknown) | undefined;
|
|
64
|
+
overscan?: number | undefined;
|
|
65
|
+
onRowClick?: ((args_0: unknown, args_1: number, ...args: unknown[]) => void) | undefined;
|
|
66
|
+
}>;
|
|
67
|
+
type VirtualListPropsSchemaOutput = z.output<typeof VirtualListPropsSchema>;
|
|
68
|
+
/**
|
|
69
|
+
* Full typed VirtualList props for JSX consumers.
|
|
70
|
+
* Generic over item type T.
|
|
71
|
+
*/
|
|
72
|
+
type VirtualListProps<T = unknown> = {
|
|
73
|
+
/** Array of items to render */
|
|
74
|
+
items: T[];
|
|
75
|
+
/** Fixed row height in px — use when all rows are the same height */
|
|
76
|
+
itemHeight?: number;
|
|
77
|
+
/** Variable height estimator — use when rows have different heights */
|
|
78
|
+
estimateSize?: (index: number) => number;
|
|
79
|
+
/** Required: renders one item */
|
|
80
|
+
renderItem: (item: T, index: number) => ReactNode;
|
|
81
|
+
/** Called when a row is clicked/activated — triggers a11y role=button + keyboard */
|
|
82
|
+
onRowClick?: (item: T, index: number) => void;
|
|
83
|
+
/** Rows rendered outside viewport (default: 5) */
|
|
84
|
+
overscan?: number;
|
|
85
|
+
/** CSS class applied to the scroll container */
|
|
86
|
+
className?: string;
|
|
87
|
+
/** Locale for built-in strings (default: "en") */
|
|
88
|
+
locale?: "en" | "fr";
|
|
89
|
+
};
|
|
90
|
+
/** Validates serialisable portion of VirtualList props — throws on failure */
|
|
91
|
+
declare function validateVirtualListProps(raw: unknown): VirtualListPropsSchemaOutput;
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* VirtualList — generic virtualized list component.
|
|
95
|
+
*
|
|
96
|
+
* Cross-runtime: same file used by React 19 and Preact 10 (via preact/compat alias in tsup).
|
|
97
|
+
* Virtualization: @tanstack/react-virtual v3 (already in mosaic deps via TableView).
|
|
98
|
+
* a11y: WCAG-AA — when onRowClick provided, rows get role=button + tabIndex=0 + Enter/Space.
|
|
99
|
+
* Zod-validated serialisable props; renders role="alert" fallback on failure.
|
|
100
|
+
*
|
|
101
|
+
* API:
|
|
102
|
+
* items: T[] — generic item array
|
|
103
|
+
* itemHeight?: number — fixed px height (mutually exclusive with estimateSize)
|
|
104
|
+
* estimateSize?: (index) => number — variable height estimator
|
|
105
|
+
* renderItem: (item, index) => ReactNode — required row renderer
|
|
106
|
+
* onRowClick?: (item, index) => void — a11y click handler
|
|
107
|
+
* overscan?: number — rows outside viewport (default: 5)
|
|
108
|
+
* className?: string — scroll container class
|
|
109
|
+
* locale?: "en" | "fr" — built-in string locale
|
|
110
|
+
*/
|
|
111
|
+
declare function VirtualList<T = unknown>(props: VirtualListProps<T>): react_jsx_runtime.JSX.Element;
|
|
112
|
+
|
|
113
|
+
export { EmptyState, EmptyStateProps, VirtualList, type VirtualListProps, VirtualListPropsSchema, validateVirtualListProps };
|
package/dist/react/display.js
CHANGED
|
@@ -1,3 +1,365 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
4
|
+
import { useRef, useCallback } from 'react';
|
|
1
5
|
|
|
6
|
+
// src/components/display/EmptyState.logic.ts
|
|
7
|
+
var ACTION_VARIANT_CLASSES = {
|
|
8
|
+
primary: "inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 disabled:pointer-events-none disabled:opacity-50",
|
|
9
|
+
secondary: "inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 disabled:pointer-events-none disabled:opacity-50"
|
|
10
|
+
};
|
|
11
|
+
var EmptyStatePropsSchema = z.object({
|
|
12
|
+
title: z.string().min(1),
|
|
13
|
+
description: z.string().optional(),
|
|
14
|
+
action: z.object({
|
|
15
|
+
label: z.string().min(1),
|
|
16
|
+
variant: z.enum(["primary", "secondary"]).default("primary")
|
|
17
|
+
}).optional(),
|
|
18
|
+
locale: z.enum(["en", "fr"]).default("en")
|
|
19
|
+
});
|
|
20
|
+
function validateEmptyStateProps(raw) {
|
|
21
|
+
return EmptyStatePropsSchema.parse(raw);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// src/i18n/strings.ts
|
|
25
|
+
var EN = {
|
|
26
|
+
"ProgressBar.aria.label": "Progress",
|
|
27
|
+
"ProgressBar.error.invalidProps": "ProgressBar: invalid props",
|
|
28
|
+
"ConfirmDialog.button.confirm": "Confirm",
|
|
29
|
+
"ConfirmDialog.button.cancel": "Cancel",
|
|
30
|
+
"ConfirmDialog.aria.dialog": "Confirmation dialog",
|
|
31
|
+
"TableView.aria.table": "Data table",
|
|
32
|
+
"TableView.pagination.next": "Next page",
|
|
33
|
+
"TableView.pagination.prev": "Previous page",
|
|
34
|
+
"TableView.empty.message": "No data to display",
|
|
35
|
+
"TableView.error.invalidProps": "TableView: invalid props",
|
|
36
|
+
"MarkdownRenderer.aria.content": "Rendered Markdown content",
|
|
37
|
+
"MarkdownRenderer.error.invalidProps": "MarkdownRenderer: invalid props",
|
|
38
|
+
"MarkdownRenderer.error.tooLong": "Content exceeds maximum length",
|
|
39
|
+
"TokenDisplayOnceModal.button.copy": "Copy token",
|
|
40
|
+
"TokenDisplayOnceModal.button.close": "Close",
|
|
41
|
+
"TokenDisplayOnceModal.warning.once": "This token will only be shown once. Copy it now.",
|
|
42
|
+
"TokenDisplayOnceModal.copied": "Copied",
|
|
43
|
+
"StatusBadge.aria.status": "Status",
|
|
44
|
+
"StatusBadge.error.invalidProps": "StatusBadge: invalid props",
|
|
45
|
+
"EmptyState.error.invalidProps": "EmptyState: invalid props",
|
|
46
|
+
"Toast.aria.close": "Close notification",
|
|
47
|
+
"Toast.error.invalidProps": "Toast: invalid props",
|
|
48
|
+
"Alert.aria.dismiss": "Dismiss alert",
|
|
49
|
+
"Alert.error.invalidProps": "Alert: invalid props",
|
|
50
|
+
"VirtualList.empty.message": "No items to display",
|
|
51
|
+
"VirtualList.error.invalidProps": "VirtualList: invalid props",
|
|
52
|
+
"Skeleton.aria.label": "Loading",
|
|
53
|
+
"Skeleton.error.invalidProps": "Skeleton: invalid props"
|
|
54
|
+
};
|
|
55
|
+
var FR = {
|
|
56
|
+
"ProgressBar.aria.label": "Progression",
|
|
57
|
+
"ProgressBar.error.invalidProps": "ProgressBar : propri\xE9t\xE9s invalides",
|
|
58
|
+
"ConfirmDialog.button.confirm": "Confirmer",
|
|
59
|
+
"ConfirmDialog.button.cancel": "Annuler",
|
|
60
|
+
"ConfirmDialog.aria.dialog": "Bo\xEEte de dialogue de confirmation",
|
|
61
|
+
"TableView.aria.table": "Tableau de donn\xE9es",
|
|
62
|
+
"TableView.pagination.next": "Page suivante",
|
|
63
|
+
"TableView.pagination.prev": "Page pr\xE9c\xE9dente",
|
|
64
|
+
"TableView.empty.message": "Aucune donn\xE9e \xE0 afficher",
|
|
65
|
+
"TableView.error.invalidProps": "TableView : propri\xE9t\xE9s invalides",
|
|
66
|
+
"MarkdownRenderer.aria.content": "Contenu Markdown rendu",
|
|
67
|
+
"MarkdownRenderer.error.invalidProps": "MarkdownRenderer : propri\xE9t\xE9s invalides",
|
|
68
|
+
"MarkdownRenderer.error.tooLong": "Le contenu d\xE9passe la longueur maximale",
|
|
69
|
+
"TokenDisplayOnceModal.button.copy": "Copier le jeton",
|
|
70
|
+
"TokenDisplayOnceModal.button.close": "Fermer",
|
|
71
|
+
"TokenDisplayOnceModal.warning.once": "Ce jeton ne sera affich\xE9 qu'une seule fois. Copiez-le maintenant.",
|
|
72
|
+
"TokenDisplayOnceModal.copied": "Copi\xE9",
|
|
73
|
+
"StatusBadge.aria.status": "Statut",
|
|
74
|
+
"StatusBadge.error.invalidProps": "StatusBadge : propri\xE9t\xE9s invalides",
|
|
75
|
+
"EmptyState.error.invalidProps": "EmptyState : propri\xE9t\xE9s invalides",
|
|
76
|
+
"Toast.aria.close": "Fermer la notification",
|
|
77
|
+
"Toast.error.invalidProps": "Toast : propri\xE9t\xE9s invalides",
|
|
78
|
+
"Alert.aria.dismiss": "Fermer l'alerte",
|
|
79
|
+
"Alert.error.invalidProps": "Alert : propri\xE9t\xE9s invalides",
|
|
80
|
+
"VirtualList.empty.message": "Aucun \xE9l\xE9ment \xE0 afficher",
|
|
81
|
+
"VirtualList.error.invalidProps": "VirtualList : propri\xE9t\xE9s invalides",
|
|
82
|
+
"Skeleton.aria.label": "Chargement",
|
|
83
|
+
"Skeleton.error.invalidProps": "Skeleton : propri\xE9t\xE9s invalides"
|
|
84
|
+
};
|
|
85
|
+
var TABLE = {
|
|
86
|
+
en: EN,
|
|
87
|
+
fr: FR
|
|
88
|
+
};
|
|
89
|
+
function t(key, locale = "en") {
|
|
90
|
+
return TABLE[locale]?.[key] ?? TABLE.en[key];
|
|
91
|
+
}
|
|
92
|
+
function EmptyStateInner({
|
|
93
|
+
icon,
|
|
94
|
+
title,
|
|
95
|
+
description,
|
|
96
|
+
action,
|
|
97
|
+
locale: _locale
|
|
98
|
+
}) {
|
|
99
|
+
const variant = action?.variant ?? "primary";
|
|
100
|
+
return /* @__PURE__ */ jsxs(
|
|
101
|
+
"section",
|
|
102
|
+
{
|
|
103
|
+
"aria-label": title,
|
|
104
|
+
className: "flex flex-col items-center justify-center gap-4 px-6 py-12 text-center",
|
|
105
|
+
children: [
|
|
106
|
+
icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-slate-400", children: icon }),
|
|
107
|
+
/* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-slate-900", children: title }),
|
|
108
|
+
description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm leading-relaxed text-slate-500", children: description }),
|
|
109
|
+
action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onClick, className: ACTION_VARIANT_CLASSES[variant], children: action.label })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
function EmptyState(raw) {
|
|
115
|
+
try {
|
|
116
|
+
const parsed = validateEmptyStateProps(raw);
|
|
117
|
+
return /* @__PURE__ */ jsx(
|
|
118
|
+
EmptyStateInner,
|
|
119
|
+
{
|
|
120
|
+
...parsed,
|
|
121
|
+
icon: raw.icon,
|
|
122
|
+
action: parsed.action && raw.action?.onClick ? { ...parsed.action, onClick: raw.action.onClick } : void 0
|
|
123
|
+
}
|
|
124
|
+
);
|
|
125
|
+
} catch (err) {
|
|
126
|
+
console.error("[EmptyState] Invalid props \u2014 component will not render.", err);
|
|
127
|
+
const locale = raw.locale === "fr" ? "fr" : "en";
|
|
128
|
+
return /* @__PURE__ */ jsx("span", { role: "alert", children: t("EmptyState.error.invalidProps", locale) });
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// src/components/display/Skeleton.logic.ts
|
|
133
|
+
function getAnimationClass(animation) {
|
|
134
|
+
switch (animation) {
|
|
135
|
+
case "pulse":
|
|
136
|
+
return "animate-pulse";
|
|
137
|
+
case "wave":
|
|
138
|
+
return "skeleton-wave";
|
|
139
|
+
case "none":
|
|
140
|
+
return "";
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
function getVariantClass(variant) {
|
|
144
|
+
switch (variant) {
|
|
145
|
+
case "rect":
|
|
146
|
+
return "rounded-md";
|
|
147
|
+
case "circle":
|
|
148
|
+
return "rounded-full";
|
|
149
|
+
case "text":
|
|
150
|
+
return "rounded";
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
var SKELETON_BG_CLASS = "bg-gray-200 dark:bg-gray-700";
|
|
154
|
+
function textLineKey(index) {
|
|
155
|
+
return `skeleton-line-${index}`;
|
|
156
|
+
}
|
|
157
|
+
function lastLineWidth(index, total, baseWidth) {
|
|
158
|
+
if (total > 1 && index === total - 1) {
|
|
159
|
+
return "75%";
|
|
160
|
+
}
|
|
161
|
+
return baseWidth;
|
|
162
|
+
}
|
|
163
|
+
var SkeletonPropsSchema = z.object({
|
|
164
|
+
variant: z.enum(["rect", "circle", "text"]).default("rect"),
|
|
165
|
+
width: z.union([z.string().min(1), z.number().positive()]).optional(),
|
|
166
|
+
height: z.union([z.string().min(1), z.number().positive()]).optional(),
|
|
167
|
+
count: z.number().int().min(1).max(20).default(1),
|
|
168
|
+
animation: z.enum(["pulse", "wave", "none"]).default("pulse"),
|
|
169
|
+
locale: z.enum(["en", "fr"]).default("en")
|
|
170
|
+
});
|
|
171
|
+
function validateSkeletonProps(raw) {
|
|
172
|
+
return SkeletonPropsSchema.parse(raw);
|
|
173
|
+
}
|
|
174
|
+
function resolveSkeletonDimensions(variant, width, height) {
|
|
175
|
+
const toCss = (v, fallback) => {
|
|
176
|
+
if (v === void 0) return fallback;
|
|
177
|
+
if (typeof v === "number") return `${v}px`;
|
|
178
|
+
return v;
|
|
179
|
+
};
|
|
180
|
+
if (variant === "circle") {
|
|
181
|
+
const size = width !== void 0 ? toCss(width, "40px") : height !== void 0 ? toCss(height, "40px") : "40px";
|
|
182
|
+
return { widthCss: size, heightCss: size };
|
|
183
|
+
}
|
|
184
|
+
if (variant === "text") {
|
|
185
|
+
return {
|
|
186
|
+
widthCss: toCss(width, "100%"),
|
|
187
|
+
heightCss: toCss(height, "16px")
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
return {
|
|
191
|
+
widthCss: toCss(width, "100%"),
|
|
192
|
+
heightCss: toCss(height, "100px")
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
function SkeletonInner({ variant, width, height, count, animation, locale }) {
|
|
196
|
+
const { widthCss, heightCss } = resolveSkeletonDimensions(variant, width, height);
|
|
197
|
+
const animClass = getAnimationClass(animation);
|
|
198
|
+
const variantClass = getVariantClass(variant);
|
|
199
|
+
const ariaLabel = t("Skeleton.aria.label", locale);
|
|
200
|
+
const baseClass = `${SKELETON_BG_CLASS} ${variantClass} ${animClass}`.trim();
|
|
201
|
+
if (variant === "text") {
|
|
202
|
+
return (
|
|
203
|
+
// biome-ignore lint/a11y/useSemanticElements: role="status" is the correct ARIA pattern for loading indicators; <output> conveys form output semantics which is incorrect here
|
|
204
|
+
/* @__PURE__ */ jsx("div", { role: "status", "aria-label": ariaLabel, "aria-busy": "true", className: "flex flex-col gap-2", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
|
|
205
|
+
"span",
|
|
206
|
+
{
|
|
207
|
+
className: `block ${baseClass}`,
|
|
208
|
+
style: {
|
|
209
|
+
width: lastLineWidth(i, count, widthCss),
|
|
210
|
+
height: heightCss
|
|
211
|
+
},
|
|
212
|
+
"aria-hidden": "true"
|
|
213
|
+
},
|
|
214
|
+
textLineKey(i)
|
|
215
|
+
)) })
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
return /* @__PURE__ */ jsx(
|
|
219
|
+
"div",
|
|
220
|
+
{
|
|
221
|
+
role: "status",
|
|
222
|
+
"aria-label": ariaLabel,
|
|
223
|
+
"aria-busy": "true",
|
|
224
|
+
className: `block ${baseClass}`,
|
|
225
|
+
style: { width: widthCss, height: heightCss }
|
|
226
|
+
}
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
function Skeleton(raw) {
|
|
230
|
+
try {
|
|
231
|
+
const props = validateSkeletonProps(raw);
|
|
232
|
+
return /* @__PURE__ */ jsx(SkeletonInner, { ...props });
|
|
233
|
+
} catch {
|
|
234
|
+
const locale = raw.locale === "fr" ? "fr" : "en";
|
|
235
|
+
return /* @__PURE__ */ jsx("span", { role: "alert", className: "text-red-600 text-sm", children: t("Skeleton.error.invalidProps", locale) });
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
var VirtualListPropsSchema = z.object({
|
|
239
|
+
/** Array of items to render — required, can be empty */
|
|
240
|
+
items: z.array(z.unknown()),
|
|
241
|
+
/** Fixed row height in px — mutually exclusive with estimateSize */
|
|
242
|
+
itemHeight: z.number().positive().optional(),
|
|
243
|
+
/** Variable row height estimator — mutually exclusive with itemHeight */
|
|
244
|
+
estimateSize: z.function().args(z.number()).returns(z.number()).optional(),
|
|
245
|
+
/** Row renderer — required (runtime function, excluded from strict Zod parse but validated for presence) */
|
|
246
|
+
renderItem: z.function().args(z.unknown(), z.number()).returns(z.unknown()).optional(),
|
|
247
|
+
/** Rows to render outside visible area (default: 5) */
|
|
248
|
+
overscan: z.number().int().min(0).optional(),
|
|
249
|
+
/** CSS class applied to the scroll container */
|
|
250
|
+
className: z.string().optional(),
|
|
251
|
+
/** Locale for built-in empty state + error messages */
|
|
252
|
+
locale: z.enum(["en", "fr"]).optional(),
|
|
253
|
+
/** a11y: when provided, rows become keyboard-activable (role=button + tabIndex=0 + Enter/Space) */
|
|
254
|
+
onRowClick: z.function().args(z.unknown(), z.number()).returns(z.void()).optional()
|
|
255
|
+
});
|
|
256
|
+
function validateVirtualListProps(raw) {
|
|
257
|
+
return VirtualListPropsSchema.parse(raw);
|
|
258
|
+
}
|
|
259
|
+
var DEFAULT_OVERSCAN = 5;
|
|
260
|
+
var DEFAULT_ITEM_HEIGHT = 40;
|
|
261
|
+
function VirtualList(props) {
|
|
262
|
+
try {
|
|
263
|
+
validateVirtualListProps({
|
|
264
|
+
items: props.items,
|
|
265
|
+
itemHeight: props.itemHeight,
|
|
266
|
+
overscan: props.overscan,
|
|
267
|
+
className: props.className,
|
|
268
|
+
locale: props.locale
|
|
269
|
+
});
|
|
270
|
+
} catch {
|
|
271
|
+
const locale2 = props.locale === "fr" ? "fr" : "en";
|
|
272
|
+
return /* @__PURE__ */ jsx("div", { role: "alert", children: t("VirtualList.error.invalidProps", locale2) });
|
|
273
|
+
}
|
|
274
|
+
const locale = props.locale === "fr" ? "fr" : "en";
|
|
275
|
+
if (props.items.length === 0) {
|
|
276
|
+
return /* @__PURE__ */ jsx("output", { "aria-live": "polite", children: t("VirtualList.empty.message", locale) });
|
|
277
|
+
}
|
|
278
|
+
return /* @__PURE__ */ jsx(
|
|
279
|
+
VirtualListInner,
|
|
280
|
+
{
|
|
281
|
+
items: props.items,
|
|
282
|
+
itemHeight: props.itemHeight,
|
|
283
|
+
estimateSize: props.estimateSize,
|
|
284
|
+
renderItem: props.renderItem,
|
|
285
|
+
onRowClick: props.onRowClick,
|
|
286
|
+
overscan: props.overscan ?? DEFAULT_OVERSCAN,
|
|
287
|
+
className: props.className,
|
|
288
|
+
locale
|
|
289
|
+
}
|
|
290
|
+
);
|
|
291
|
+
}
|
|
292
|
+
function VirtualListInner({
|
|
293
|
+
items,
|
|
294
|
+
itemHeight,
|
|
295
|
+
estimateSize,
|
|
296
|
+
renderItem,
|
|
297
|
+
onRowClick,
|
|
298
|
+
overscan,
|
|
299
|
+
className
|
|
300
|
+
}) {
|
|
301
|
+
const scrollRef = useRef(null);
|
|
302
|
+
const resolvedEstimateSize = useCallback(
|
|
303
|
+
(index) => {
|
|
304
|
+
if (estimateSize) return estimateSize(index);
|
|
305
|
+
return itemHeight ?? DEFAULT_ITEM_HEIGHT;
|
|
306
|
+
},
|
|
307
|
+
[estimateSize, itemHeight]
|
|
308
|
+
);
|
|
309
|
+
const rowVirtualizer = useVirtualizer({
|
|
310
|
+
count: items.length,
|
|
311
|
+
/* v8 ignore next 1 */
|
|
312
|
+
getScrollElement: () => scrollRef.current,
|
|
313
|
+
estimateSize: resolvedEstimateSize,
|
|
314
|
+
overscan
|
|
315
|
+
});
|
|
316
|
+
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
317
|
+
const totalSize = rowVirtualizer.getTotalSize();
|
|
318
|
+
return /* @__PURE__ */ jsx(
|
|
319
|
+
"div",
|
|
320
|
+
{
|
|
321
|
+
"data-virtual": "true",
|
|
322
|
+
ref: scrollRef,
|
|
323
|
+
className,
|
|
324
|
+
style: { height: 400, overflow: "auto", position: "relative" },
|
|
325
|
+
children: /* @__PURE__ */ jsx("div", { style: { height: `${totalSize}px`, position: "relative" }, children: virtualItems.map((virtualRow) => {
|
|
326
|
+
const item = items[virtualRow.index];
|
|
327
|
+
const index = virtualRow.index;
|
|
328
|
+
const rowProps = onRowClick ? {
|
|
329
|
+
role: "button",
|
|
330
|
+
tabIndex: 0,
|
|
331
|
+
"data-list-row": true,
|
|
332
|
+
style: {
|
|
333
|
+
position: "absolute",
|
|
334
|
+
top: 0,
|
|
335
|
+
left: 0,
|
|
336
|
+
width: "100%",
|
|
337
|
+
transform: `translateY(${virtualRow.start}px)`,
|
|
338
|
+
cursor: "pointer"
|
|
339
|
+
},
|
|
340
|
+
onClick: () => onRowClick(item, index),
|
|
341
|
+
onKeyDown: (e) => {
|
|
342
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
343
|
+
e.preventDefault();
|
|
344
|
+
onRowClick(item, index);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
} : {
|
|
348
|
+
"data-list-row": true,
|
|
349
|
+
style: {
|
|
350
|
+
position: "absolute",
|
|
351
|
+
top: 0,
|
|
352
|
+
left: 0,
|
|
353
|
+
width: "100%",
|
|
354
|
+
transform: `translateY(${virtualRow.start}px)`
|
|
355
|
+
}
|
|
356
|
+
};
|
|
357
|
+
return /* @__PURE__ */ jsx("div", { ...rowProps, children: renderItem(item, index) }, virtualRow.key);
|
|
358
|
+
}) })
|
|
359
|
+
}
|
|
360
|
+
);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
export { EmptyState, EmptyStatePropsSchema, Skeleton, SkeletonPropsSchema, VirtualList, VirtualListPropsSchema, resolveSkeletonDimensions, validateEmptyStateProps, validateSkeletonProps, validateVirtualListProps };
|
|
2
364
|
//# sourceMappingURL=display.js.map
|
|
3
365
|
//# sourceMappingURL=display.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"display.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/display/EmptyState.logic.ts","../../src/components/display/EmptyState.schema.ts","../../src/i18n/strings.ts","../../src/runtimes/react/components/display/EmptyState.tsx","../../src/components/display/Skeleton.logic.ts","../../src/components/display/Skeleton.schema.ts","../../src/runtimes/react/components/display/Skeleton.tsx","../../src/components/display/VirtualList.schema.ts","../../src/components/display/VirtualList.tsx"],"names":["z","jsx","locale"],"mappings":"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","file":"display.js","sourcesContent":["/**\n * EmptyState.logic.ts — pure, framework-agnostic helpers.\n * No JSX here — shared between React 19 and Preact 10 runtimes.\n */\n\nexport type EmptyStateActionVariant = \"primary\" | \"secondary\";\n\n/**\n * Tailwind class maps for CTA button variants.\n * Using slate neutrals (OKLCH-tinted, never pure gray).\n */\nexport const ACTION_VARIANT_CLASSES: Record<EmptyStateActionVariant, string> = {\n primary:\n \"inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 disabled:pointer-events-none disabled:opacity-50\",\n secondary:\n \"inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 disabled:pointer-events-none disabled:opacity-50\",\n};\n","import { z } from \"zod\";\n\n// i18nKeys: EmptyState.error.invalidProps\n\n/**\n * EmptyState component props schema.\n *\n * Empty-set illustration + title + description + optional CTA.\n * Consumer-driven i18n: caller passes already-localized strings.\n *\n * icon — optional ReactNode / PreactNode passed by the caller\n * title — required heading (h2, consumer-driven i18n)\n * description — optional supporting text\n * action — optional CTA: { label, onClick, variant? }\n */\nexport const EmptyStatePropsSchema = z.object({\n title: z.string().min(1),\n description: z.string().optional(),\n action: z\n .object({\n label: z.string().min(1),\n variant: z.enum([\"primary\", \"secondary\"]).default(\"primary\"),\n })\n .optional(),\n locale: z.enum([\"en\", \"fr\"]).default(\"en\"),\n});\n\nexport type EmptyStatePropsSchemaInput = z.input<typeof EmptyStatePropsSchema>;\nexport type EmptyStatePropsSchemaOutput = z.output<typeof EmptyStatePropsSchema>;\n\n/**\n * Full EmptyState props including framework-specific node types and callback.\n * `icon` and `action.onClick` are excluded from Zod (functions/nodes are not serializable).\n *\n * Note: action.variant is optional for callers — Zod applies \"primary\" default at parse time.\n */\nexport type EmptyStateProps = Omit<EmptyStatePropsSchemaOutput, \"action\"> & {\n // biome-ignore lint/suspicious/noExplicitAny: cross-runtime ReactNode | VNode\n icon?: any;\n action?: {\n label: string;\n variant?: \"primary\" | \"secondary\";\n onClick: () => void;\n };\n};\n\nexport function validateEmptyStateProps(raw: unknown): EmptyStatePropsSchemaOutput {\n return EmptyStatePropsSchema.parse(raw);\n}\n","/**\n * Compile-time mirror of `@vantageos/mosaic-i18n` EN/FR locales for the 6\n * v0.1.0 components. Inlined here so that `<Comp>` renderers can resolve\n * `t(key, locale)` without dragging react-i18next into the component runtime\n * (keeps bundle small and tests provider-free). Drift is gated by\n * `mosaic-registry-drift-check.mjs` which validates the canonical\n * `packages/mosaic-i18n/src/locales/{en,fr}.json` against `registry.yaml`.\n *\n * Mosaic standard §8: production JSX MUST resolve user-facing strings via\n * `t()` — no hardcoded English literals.\n */\nexport type MosaicLocale = \"en\" | \"fr\";\n\nconst EN = {\n \"ProgressBar.aria.label\": \"Progress\",\n \"ProgressBar.error.invalidProps\": \"ProgressBar: invalid props\",\n \"ConfirmDialog.button.confirm\": \"Confirm\",\n \"ConfirmDialog.button.cancel\": \"Cancel\",\n \"ConfirmDialog.aria.dialog\": \"Confirmation dialog\",\n \"TableView.aria.table\": \"Data table\",\n \"TableView.pagination.next\": \"Next page\",\n \"TableView.pagination.prev\": \"Previous page\",\n \"TableView.empty.message\": \"No data to display\",\n \"TableView.error.invalidProps\": \"TableView: invalid props\",\n \"MarkdownRenderer.aria.content\": \"Rendered Markdown content\",\n \"MarkdownRenderer.error.invalidProps\": \"MarkdownRenderer: invalid props\",\n \"MarkdownRenderer.error.tooLong\": \"Content exceeds maximum length\",\n \"TokenDisplayOnceModal.button.copy\": \"Copy token\",\n \"TokenDisplayOnceModal.button.close\": \"Close\",\n \"TokenDisplayOnceModal.warning.once\": \"This token will only be shown once. Copy it now.\",\n \"TokenDisplayOnceModal.copied\": \"Copied\",\n \"StatusBadge.aria.status\": \"Status\",\n \"StatusBadge.error.invalidProps\": \"StatusBadge: invalid props\",\n \"EmptyState.error.invalidProps\": \"EmptyState: invalid props\",\n \"Toast.aria.close\": \"Close notification\",\n \"Toast.error.invalidProps\": \"Toast: invalid props\",\n \"Alert.aria.dismiss\": \"Dismiss alert\",\n \"Alert.error.invalidProps\": \"Alert: invalid props\",\n \"VirtualList.empty.message\": \"No items to display\",\n \"VirtualList.error.invalidProps\": \"VirtualList: invalid props\",\n \"Skeleton.aria.label\": \"Loading\",\n \"Skeleton.error.invalidProps\": \"Skeleton: invalid props\",\n} as const;\n\nconst FR: Record<keyof typeof EN, string> = {\n \"ProgressBar.aria.label\": \"Progression\",\n \"ProgressBar.error.invalidProps\": \"ProgressBar : propriétés invalides\",\n \"ConfirmDialog.button.confirm\": \"Confirmer\",\n \"ConfirmDialog.button.cancel\": \"Annuler\",\n \"ConfirmDialog.aria.dialog\": \"Boîte de dialogue de confirmation\",\n \"TableView.aria.table\": \"Tableau de données\",\n \"TableView.pagination.next\": \"Page suivante\",\n \"TableView.pagination.prev\": \"Page précédente\",\n \"TableView.empty.message\": \"Aucune donnée à afficher\",\n \"TableView.error.invalidProps\": \"TableView : propriétés invalides\",\n \"MarkdownRenderer.aria.content\": \"Contenu Markdown rendu\",\n \"MarkdownRenderer.error.invalidProps\": \"MarkdownRenderer : propriétés invalides\",\n \"MarkdownRenderer.error.tooLong\": \"Le contenu dépasse la longueur maximale\",\n \"TokenDisplayOnceModal.button.copy\": \"Copier le jeton\",\n \"TokenDisplayOnceModal.button.close\": \"Fermer\",\n \"TokenDisplayOnceModal.warning.once\":\n \"Ce jeton ne sera affiché qu'une seule fois. Copiez-le maintenant.\",\n \"TokenDisplayOnceModal.copied\": \"Copié\",\n \"StatusBadge.aria.status\": \"Statut\",\n \"StatusBadge.error.invalidProps\": \"StatusBadge : propriétés invalides\",\n \"EmptyState.error.invalidProps\": \"EmptyState : propriétés invalides\",\n \"Toast.aria.close\": \"Fermer la notification\",\n \"Toast.error.invalidProps\": \"Toast : propriétés invalides\",\n \"Alert.aria.dismiss\": \"Fermer l'alerte\",\n \"Alert.error.invalidProps\": \"Alert : propriétés invalides\",\n \"VirtualList.empty.message\": \"Aucun élément à afficher\",\n \"VirtualList.error.invalidProps\": \"VirtualList : propriétés invalides\",\n \"Skeleton.aria.label\": \"Chargement\",\n \"Skeleton.error.invalidProps\": \"Skeleton : propriétés invalides\",\n};\n\nexport type MosaicI18nKey = keyof typeof EN;\n\nconst TABLE: Record<MosaicLocale, Record<MosaicI18nKey, string>> = {\n en: EN,\n fr: FR,\n};\n\n/** Resolves a Mosaic i18n key for the given locale, falling back to EN. */\nexport function t(key: MosaicI18nKey, locale: MosaicLocale = \"en\"): string {\n return TABLE[locale]?.[key] ?? TABLE.en[key];\n}\n","\"use client\";\n\n// i18nKeys: EmptyState.error.invalidProps\n\nimport type { ReactNode } from \"react\";\nimport { ACTION_VARIANT_CLASSES } from \"../../../../components/display/EmptyState.logic.js\";\nimport {\n type EmptyStateProps,\n validateEmptyStateProps,\n} from \"../../../../components/display/EmptyState.schema.js\";\nimport { t } from \"../../../../i18n/strings.js\";\n\n// ─── Inner (validated props) ──────────────────────────────────────────────────\n\nfunction EmptyStateInner({\n icon,\n title,\n description,\n action,\n locale: _locale,\n}: EmptyStateProps & { icon?: ReactNode }) {\n const variant = action?.variant ?? \"primary\";\n\n return (\n <section\n aria-label={title}\n className=\"flex flex-col items-center justify-center gap-4 px-6 py-12 text-center\"\n >\n {icon && (\n <span aria-hidden=\"true\" className=\"text-slate-400\">\n {icon}\n </span>\n )}\n <h2 className=\"text-base font-semibold text-slate-900\">{title}</h2>\n {description && (\n <p className=\"max-w-sm text-sm leading-relaxed text-slate-500\">{description}</p>\n )}\n {action && (\n <button type=\"button\" onClick={action.onClick} className={ACTION_VARIANT_CLASSES[variant]}>\n {action.label}\n </button>\n )}\n </section>\n );\n}\n\n/**\n * EmptyState — cross-runtime empty-set display primitive (React 19 implementation).\n *\n * Accepts `Record<string, unknown>` for MCP postMessage injection safety.\n * Zod validation narrows before render. Invalid props → accessible error span.\n *\n * WCAG-AA:\n * - <section aria-label={title}> → role=\"region\" landmark (no Biome lint, correct semantics)\n * - heading hierarchy: h2 (title) — caller manages the h1 context\n * - action button is keyboard-accessible (tab + enter/space)\n */\nexport function EmptyState(\n raw: Omit<EmptyStateProps, \"locale\"> &\n Partial<Pick<EmptyStateProps, \"locale\">> & { icon?: ReactNode },\n) {\n try {\n const parsed = validateEmptyStateProps(raw);\n return (\n <EmptyStateInner\n {...parsed}\n icon={raw.icon}\n action={\n parsed.action && raw.action?.onClick\n ? { ...parsed.action, onClick: raw.action.onClick }\n : undefined\n }\n />\n );\n } catch (err) {\n console.error(\"[EmptyState] Invalid props — component will not render.\", err);\n const locale = (raw as Record<string, unknown>).locale === \"fr\" ? \"fr\" : \"en\";\n return <span role=\"alert\">{t(\"EmptyState.error.invalidProps\", locale)}</span>;\n }\n}\n","/**\n * Skeleton.logic.ts — shared pure logic (no JSX, no runtime dependency).\n *\n * Used by both React 19 and Preact 10 runtime implementations.\n * Tests live in __tests__/Skeleton.logic.test.ts (co-located schema/logic layer).\n */\n\nimport type { SkeletonProps } from \"./Skeleton.schema.js\";\n\nexport type SkeletonAnimation = SkeletonProps[\"animation\"];\nexport type SkeletonVariant = SkeletonProps[\"variant\"];\n\n/**\n * Returns the CSS class name(s) for the shimmer animation.\n *\n * \"pulse\" — Tailwind `animate-pulse` (opacity oscillation, reduced-motion safe via Tailwind)\n * \"wave\" — custom keyframe class `skeleton-wave` (left-to-right gradient sweep)\n * \"none\" — no animation class\n *\n * Note: \"pulse\" uses Tailwind's built-in `animate-pulse` which already respects\n * `prefers-reduced-motion: reduce` via the `motion-safe:` variant — no extra CSS needed.\n * For \"wave\" consumers must include the `.skeleton-wave` keyframe in their CSS.\n */\nexport function getAnimationClass(animation: SkeletonAnimation): string {\n switch (animation) {\n case \"pulse\":\n return \"animate-pulse\";\n case \"wave\":\n return \"skeleton-wave\";\n case \"none\":\n return \"\";\n }\n}\n\n/**\n * Returns the base layout class for the skeleton variant.\n *\n * \"rect\" → rounded rectangle block\n * \"circle\" → rounded-full (perfect circle when width === height)\n * \"text\" → rounded bar, slightly shorter height for text-line appearance\n */\nexport function getVariantClass(variant: SkeletonVariant): string {\n switch (variant) {\n case \"rect\":\n return \"rounded-md\";\n case \"circle\":\n return \"rounded-full\";\n case \"text\":\n return \"rounded\";\n }\n}\n\n/**\n * Base background class applied to all skeleton shapes.\n * Uses a neutral gray that works on light and dark surfaces.\n */\nexport const SKELETON_BG_CLASS = \"bg-gray-200 dark:bg-gray-700\";\n\n/**\n * Generate a stable key for each text-line span using the line index.\n * Using `line-<index>` string is stable (not array index as key directly).\n */\nexport function textLineKey(index: number): string {\n return `skeleton-line-${index}`;\n}\n\n/**\n * For multi-line text skeletons, optionally narrow the last line to ~75%\n * to mimic a natural paragraph end. Returns width override CSS string or undefined.\n */\nexport function lastLineWidth(index: number, total: number, baseWidth: string): string {\n if (total > 1 && index === total - 1) {\n // Last line narrowed to 75% of the container (natural paragraph look)\n return \"75%\";\n }\n return baseWidth;\n}\n","import { z } from \"zod\";\n\n// i18nKeys: Skeleton.error.invalidProps\n\n/**\n * Skeleton component props schema.\n *\n * variant — shape of the placeholder:\n * \"rect\" → rectangular block (default)\n * \"circle\" → circular avatar / icon placeholder\n * \"text\" → single or multi-line text placeholder\n *\n * width / height — CSS values (string) or pixels (number).\n * \"rect\" defaults: width=\"100%\", height=100\n * \"circle\" defaults: width=height (equal, square rendered as circle)\n * \"text\" defaults: width=\"100%\", height=16\n *\n * count — number of text line spans (only meaningful for variant=\"text\").\n * Default 1. Ignored for rect/circle.\n *\n * animation — shimmer style:\n * \"pulse\" → opacity pulse (default)\n * \"wave\" → left-to-right gradient sweep\n * \"none\" → static placeholder (auto-selected when prefers-reduced-motion)\n */\nexport const SkeletonPropsSchema = z.object({\n variant: z.enum([\"rect\", \"circle\", \"text\"]).default(\"rect\"),\n width: z.union([z.string().min(1), z.number().positive()]).optional(),\n height: z.union([z.string().min(1), z.number().positive()]).optional(),\n count: z.number().int().min(1).max(20).default(1),\n animation: z.enum([\"pulse\", \"wave\", \"none\"]).default(\"pulse\"),\n locale: z.enum([\"en\", \"fr\"]).default(\"en\"),\n});\n\nexport type SkeletonProps = z.infer<typeof SkeletonPropsSchema>;\n\nexport function validateSkeletonProps(raw: unknown): SkeletonProps {\n return SkeletonPropsSchema.parse(raw);\n}\n\n/**\n * Resolve final width/height CSS values given the variant and raw props.\n * Centralised here so React + Preact runtimes share identical defaults.\n */\nexport function resolveSkeletonDimensions(\n variant: SkeletonProps[\"variant\"],\n width: SkeletonProps[\"width\"],\n height: SkeletonProps[\"height\"],\n): { widthCss: string; heightCss: string } {\n const toCss = (v: string | number | undefined, fallback: string): string => {\n if (v === undefined) return fallback;\n if (typeof v === \"number\") return `${v}px`;\n return v;\n };\n\n if (variant === \"circle\") {\n const size =\n width !== undefined\n ? toCss(width, \"40px\")\n : height !== undefined\n ? toCss(height, \"40px\")\n : \"40px\";\n return { widthCss: size, heightCss: size };\n }\n\n if (variant === \"text\") {\n return {\n widthCss: toCss(width, \"100%\"),\n heightCss: toCss(height, \"16px\"),\n };\n }\n\n // rect (default)\n return {\n widthCss: toCss(width, \"100%\"),\n heightCss: toCss(height, \"100px\"),\n };\n}\n","// i18nKeys: Skeleton.aria.label, Skeleton.error.invalidProps\n\nimport React from \"react\";\nimport {\n SKELETON_BG_CLASS,\n getAnimationClass,\n getVariantClass,\n lastLineWidth,\n textLineKey,\n} from \"../../../../components/display/Skeleton.logic.js\";\nimport {\n type SkeletonProps,\n resolveSkeletonDimensions,\n validateSkeletonProps,\n} from \"../../../../components/display/Skeleton.schema.js\";\nimport { t } from \"../../../../i18n/strings.js\";\n\nfunction SkeletonInner({ variant, width, height, count, animation, locale }: SkeletonProps) {\n const { widthCss, heightCss } = resolveSkeletonDimensions(variant, width, height);\n const animClass = getAnimationClass(animation);\n const variantClass = getVariantClass(variant);\n const ariaLabel = t(\"Skeleton.aria.label\", locale);\n const baseClass = `${SKELETON_BG_CLASS} ${variantClass} ${animClass}`.trim();\n\n if (variant === \"text\") {\n return (\n // biome-ignore lint/a11y/useSemanticElements: role=\"status\" is the correct ARIA pattern for loading indicators; <output> conveys form output semantics which is incorrect here\n <div role=\"status\" aria-label={ariaLabel} aria-busy=\"true\" className=\"flex flex-col gap-2\">\n {Array.from({ length: count }, (_, i) => (\n <span\n key={textLineKey(i)}\n className={`block ${baseClass}`}\n style={{\n width: lastLineWidth(i, count, widthCss),\n height: heightCss,\n }}\n aria-hidden=\"true\"\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n className={`block ${baseClass}`}\n style={{ width: widthCss, height: heightCss }}\n />\n );\n}\n\n/**\n * Skeleton — cross-runtime loading placeholder (React 19 implementation).\n *\n * Accepts `Record<string, unknown>` for MCP postMessage injection safety.\n * Zod validation narrows before render. Invalid props → accessible error span.\n *\n * Animation \"none\" is auto-applied when prefers-reduced-motion is set (via\n * Tailwind's animate-pulse which respects the media query natively), or by\n * passing animation=\"none\" explicitly.\n *\n * WCAG-AA:\n * - role=\"status\" + aria-busy=\"true\" on the container\n * - aria-label resolves via t() in EN/FR\n * - aria-hidden=\"true\" on individual line spans (status role covers the group)\n */\nexport function Skeleton(raw: Record<string, unknown>) {\n try {\n const props = validateSkeletonProps(raw);\n return <SkeletonInner {...props} />;\n } catch {\n const locale = (raw as Record<string, unknown>).locale === \"fr\" ? \"fr\" : \"en\";\n return (\n <span role=\"alert\" className=\"text-red-600 text-sm\">\n {t(\"Skeleton.error.invalidProps\", locale)}\n </span>\n );\n }\n}\n","// i18nKeys: VirtualList.empty.message, VirtualList.error.invalidProps\n\nimport type { ReactNode } from \"react\";\nimport { z } from \"zod\";\n\n/**\n * VirtualList Zod props schema.\n *\n * Runtime functions (renderItem, estimateSize, onRowClick) are excluded from\n * Zod per §18.5 (runtime functions not serialisable). They are typed separately\n * in VirtualListProps<T> below.\n *\n * Serialisable fields validated at render time for safe MCP postMessage injection.\n */\nexport const VirtualListPropsSchema = z.object({\n /** Array of items to render — required, can be empty */\n items: z.array(z.unknown()),\n /** Fixed row height in px — mutually exclusive with estimateSize */\n itemHeight: z.number().positive().optional(),\n /** Variable row height estimator — mutually exclusive with itemHeight */\n estimateSize: z.function().args(z.number()).returns(z.number()).optional(),\n /** Row renderer — required (runtime function, excluded from strict Zod parse but validated for presence) */\n renderItem: z.function().args(z.unknown(), z.number()).returns(z.unknown()).optional(),\n /** Rows to render outside visible area (default: 5) */\n overscan: z.number().int().min(0).optional(),\n /** CSS class applied to the scroll container */\n className: z.string().optional(),\n /** Locale for built-in empty state + error messages */\n locale: z.enum([\"en\", \"fr\"]).optional(),\n /** a11y: when provided, rows become keyboard-activable (role=button + tabIndex=0 + Enter/Space) */\n onRowClick: z.function().args(z.unknown(), z.number()).returns(z.void()).optional(),\n});\n\nexport type VirtualListPropsSchemaInput = z.input<typeof VirtualListPropsSchema>;\nexport type VirtualListPropsSchemaOutput = z.output<typeof VirtualListPropsSchema>;\n\n/**\n * Full typed VirtualList props for JSX consumers.\n * Generic over item type T.\n */\nexport type VirtualListProps<T = unknown> = {\n /** Array of items to render */\n items: T[];\n /** Fixed row height in px — use when all rows are the same height */\n itemHeight?: number;\n /** Variable height estimator — use when rows have different heights */\n estimateSize?: (index: number) => number;\n /** Required: renders one item */\n renderItem: (item: T, index: number) => ReactNode;\n /** Called when a row is clicked/activated — triggers a11y role=button + keyboard */\n onRowClick?: (item: T, index: number) => void;\n /** Rows rendered outside viewport (default: 5) */\n overscan?: number;\n /** CSS class applied to the scroll container */\n className?: string;\n /** Locale for built-in strings (default: \"en\") */\n locale?: \"en\" | \"fr\";\n};\n\n/** Validates serialisable portion of VirtualList props — throws on failure */\nexport function validateVirtualListProps(raw: unknown): VirtualListPropsSchemaOutput {\n return VirtualListPropsSchema.parse(raw);\n}\n","// i18nKeys: VirtualList.empty.message, VirtualList.error.invalidProps\n\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport type React from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { type MosaicLocale, t } from \"../../i18n/strings.js\";\nimport { type VirtualListProps, validateVirtualListProps } from \"./VirtualList.schema.js\";\n\nconst DEFAULT_OVERSCAN = 5;\nconst DEFAULT_ITEM_HEIGHT = 40;\n\n/**\n * VirtualList — generic virtualized list component.\n *\n * Cross-runtime: same file used by React 19 and Preact 10 (via preact/compat alias in tsup).\n * Virtualization: @tanstack/react-virtual v3 (already in mosaic deps via TableView).\n * a11y: WCAG-AA — when onRowClick provided, rows get role=button + tabIndex=0 + Enter/Space.\n * Zod-validated serialisable props; renders role=\"alert\" fallback on failure.\n *\n * API:\n * items: T[] — generic item array\n * itemHeight?: number — fixed px height (mutually exclusive with estimateSize)\n * estimateSize?: (index) => number — variable height estimator\n * renderItem: (item, index) => ReactNode — required row renderer\n * onRowClick?: (item, index) => void — a11y click handler\n * overscan?: number — rows outside viewport (default: 5)\n * className?: string — scroll container class\n * locale?: \"en\" | \"fr\" — built-in string locale\n */\nexport function VirtualList<T = unknown>(props: VirtualListProps<T>) {\n // Validate serialisable props — functions excluded per §18.5\n try {\n validateVirtualListProps({\n items: props.items,\n itemHeight: props.itemHeight,\n overscan: props.overscan,\n className: props.className,\n locale: props.locale,\n });\n } catch {\n const locale: MosaicLocale = props.locale === \"fr\" ? \"fr\" : \"en\";\n return <div role=\"alert\">{t(\"VirtualList.error.invalidProps\", locale)}</div>;\n }\n\n const locale: MosaicLocale = props.locale === \"fr\" ? \"fr\" : \"en\";\n\n if (props.items.length === 0) {\n return <output aria-live=\"polite\">{t(\"VirtualList.empty.message\", locale)}</output>;\n }\n\n return (\n <VirtualListInner<T>\n items={props.items}\n itemHeight={props.itemHeight}\n estimateSize={props.estimateSize}\n renderItem={props.renderItem}\n onRowClick={props.onRowClick}\n overscan={props.overscan ?? DEFAULT_OVERSCAN}\n className={props.className}\n locale={locale}\n />\n );\n}\n\n// ── Inner implementation — rendered after validation passes ───────────────────\n\ntype VirtualListInnerProps<T> = Required<\n Pick<VirtualListProps<T>, \"items\" | \"renderItem\" | \"overscan\">\n> &\n Pick<VirtualListProps<T>, \"itemHeight\" | \"estimateSize\" | \"onRowClick\" | \"className\"> & {\n locale: MosaicLocale;\n };\n\nfunction VirtualListInner<T>({\n items,\n itemHeight,\n estimateSize,\n renderItem,\n onRowClick,\n overscan,\n className,\n}: VirtualListInnerProps<T>) {\n const scrollRef = useRef<HTMLDivElement>(null);\n\n const resolvedEstimateSize = useCallback(\n (index: number): number => {\n if (estimateSize) return estimateSize(index);\n return itemHeight ?? DEFAULT_ITEM_HEIGHT;\n },\n [estimateSize, itemHeight],\n );\n\n const rowVirtualizer = useVirtualizer({\n count: items.length,\n /* v8 ignore next 1 */\n getScrollElement: () => scrollRef.current,\n estimateSize: resolvedEstimateSize,\n overscan,\n });\n\n const virtualItems = rowVirtualizer.getVirtualItems();\n const totalSize = rowVirtualizer.getTotalSize();\n\n return (\n <div\n data-virtual=\"true\"\n ref={scrollRef}\n className={className}\n style={{ height: 400, overflow: \"auto\", position: \"relative\" }}\n >\n <div style={{ height: `${totalSize}px`, position: \"relative\" }}>\n {virtualItems.map((virtualRow) => {\n /* v8 ignore next */\n const item = items[virtualRow.index] as T;\n const index = virtualRow.index;\n\n const rowProps = onRowClick\n ? {\n role: \"button\" as const,\n tabIndex: 0,\n \"data-list-row\": true,\n style: {\n position: \"absolute\" as const,\n top: 0,\n left: 0,\n width: \"100%\",\n transform: `translateY(${virtualRow.start}px)`,\n cursor: \"pointer\",\n },\n onClick: () => onRowClick(item, index),\n onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onRowClick(item, index);\n }\n },\n }\n : {\n \"data-list-row\": true,\n style: {\n position: \"absolute\" as const,\n top: 0,\n left: 0,\n width: \"100%\",\n transform: `translateY(${virtualRow.start}px)`,\n },\n };\n\n return (\n <div key={virtualRow.key} {...rowProps}>\n {renderItem(item, index)}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n"]}
|