@sia-ui/react-web 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @sia-ui/react-web
 
+## 0.7.1
+
+### Patch Changes
+
+- `Select` : la liste des options défile de nouveau.
+
+  Le panneau était une grille ; la liste y gardait la hauteur de tout son
+  contenu, débordait au lieu de défiler, et l'overlay la coupait. Au-delà d'une
+  dizaine d'options, les dernières étaient inatteignables — y compris dans
+  `PhoneInput`, la taille de page de `Pagination` et les filtres
+  d'`ActivityLog`. L'option active suit aussi le clavier, et le défilement de la
+  liste ne se propage plus à la page.
+
+- Updated dependencies
+  - @sia-ui/headless@0.7.1
+  - @sia-ui/react@0.7.1
+  - @sia-ui/tokens@0.7.1
+  - @sia-ui/utils@0.7.1
+
+## 0.7.0
+
+### Minor Changes
+
+- Adaptateur TanStack Router, mises à jour en `PATCH`, et `secretChanges`.
+  - **`useDataTableQuery({ router })`** — adaptateur TanStack Router livré et
+    testé (`createTanStackRouterStorage`). La recette de la documentation mettait
+    `page=2` entre guillemets (`page=%222%22`) et la page retombait à 1 ; les
+    nombres passent désormais comme nombres, sans perte pour les filtres.
+  - **Un tableau n'écrit plus que ses propres clés** (`mergeTableQuery` dans
+    `@sia-ui/headless`) : deux tableaux préfixés sur une page, ou un onglet dans
+    l'URL, ne s'effacent plus l'un l'autre — avec l'URL du navigateur comme avec
+    un routeur.
+  - **`createQueryResource(service, { updateMethod: "PATCH" })`** — pour une API
+    qui n'accepte que des mises à jour partielles.
+  - **`secretChanges(entries, storedKeys)`** — ce qu'il faut envoyer après une
+    saisie dans `SecretFields` : `{ set, remove, missing }`.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sia-ui/react@0.7.0
+  - @sia-ui/tokens@0.7.0
+  - @sia-ui/utils@0.7.0
+  - @sia-ui/headless@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -70,6 +70,51 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 <!-- sia:changelog:start -->
 # @sia-ui/react-web
 
+## 0.7.1
+
+### Patch Changes
+
+- `Select` : la liste des options défile de nouveau.
+
+  Le panneau était une grille ; la liste y gardait la hauteur de tout son
+  contenu, débordait au lieu de défiler, et l'overlay la coupait. Au-delà d'une
+  dizaine d'options, les dernières étaient inatteignables — y compris dans
+  `PhoneInput`, la taille de page de `Pagination` et les filtres
+  d'`ActivityLog`. L'option active suit aussi le clavier, et le défilement de la
+  liste ne se propage plus à la page.
+
+- Updated dependencies
+  - @sia-ui/headless@0.7.1
+  - @sia-ui/react@0.7.1
+  - @sia-ui/tokens@0.7.1
+  - @sia-ui/utils@0.7.1
+
+## 0.7.0
+
+### Minor Changes
+
+- Adaptateur TanStack Router, mises à jour en `PATCH`, et `secretChanges`.
+  - **`useDataTableQuery({ router })`** — adaptateur TanStack Router livré et
+    testé (`createTanStackRouterStorage`). La recette de la documentation mettait
+    `page=2` entre guillemets (`page=%222%22`) et la page retombait à 1 ; les
+    nombres passent désormais comme nombres, sans perte pour les filtres.
+  - **Un tableau n'écrit plus que ses propres clés** (`mergeTableQuery` dans
+    `@sia-ui/headless`) : deux tableaux préfixés sur une page, ou un onglet dans
+    l'URL, ne s'effacent plus l'un l'autre — avec l'URL du navigateur comme avec
+    un routeur.
+  - **`createQueryResource(service, { updateMethod: "PATCH" })`** — pour une API
+    qui n'accepte que des mises à jour partielles.
+  - **`secretChanges(entries, storedKeys)`** — ce qu'il faut envoyer après une
+    saisie dans `SecretFields` : `{ set, remove, missing }`.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sia-ui/react@0.7.0
+  - @sia-ui/tokens@0.7.0
+  - @sia-ui/utils@0.7.0
+  - @sia-ui/headless@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1268,6 +1268,34 @@ function createUrlTableStorage(mode = "replace") {
     }
   };
 }
+function nombreCanonique(valeur) {
+  const nombre = Number(valeur);
+  return valeur !== "" && Number.isFinite(nombre) && String(nombre) === valeur ? nombre : valeur;
+}
+function createTanStackRouterStorage(router, mode = "replace") {
+  return {
+    read: () => {
+      const params = new URLSearchParams();
+      for (const [cle, valeur] of Object.entries(router.state.location.search)) {
+        if (valeur === void 0 || valeur === null) continue;
+        for (const v of Array.isArray(valeur) ? valeur : [valeur]) {
+          params.append(cle, typeof v === "object" ? JSON.stringify(v) : String(v));
+        }
+      }
+      return params.toString();
+    },
+    write: (value) => {
+      const search = {};
+      for (const [cle, brut] of new URLSearchParams(value)) {
+        const valeur = nombreCanonique(brut);
+        const deja = search[cle];
+        search[cle] = deja === void 0 ? valeur : [...Array.isArray(deja) ? deja : [deja], valeur];
+      }
+      router.navigate({ to: ".", search, replace: mode === "replace" });
+    },
+    subscribe: (listener) => router.subscribe("onResolved", listener)
+  };
+}
 function useDataTableQuery(options = {}) {
   const {
     defaultState,
@@ -1275,11 +1303,12 @@ function useDataTableQuery(options = {}) {
     history = "replace",
     prefix,
     storage: fourni,
+    router,
     serverParams
   } = options;
   const storage = React.useMemo(
-    () => fourni ?? (syncUrl ? createUrlTableStorage(history) : void 0),
-    [fourni, history, syncUrl]
+    () => fourni ?? (router ? createTanStackRouterStorage(router, history) : syncUrl ? createUrlTableStorage(history) : void 0),
+    [fourni, history, router, syncUrl]
   );
   return headless.useTableQuery({
     ...defaultState ? { defaultState } : {},
@@ -1835,6 +1864,10 @@ var Select = React.forwardRef(function Select2({
     setActiveIndex(selected >= 0 ? selected : visibleOptions.findIndex((option) => !option.disabled));
     if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
   }, [currentValue, fetcher, open, searchable, visibleOptions]);
+  React.useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    document.getElementById(`${listboxId}-${activeIndex}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, listboxId, open]);
   const setTriggerRef = (node) => {
     triggerRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -7029,6 +7062,24 @@ function SecretFields({
     ] })
   ] });
 }
+function secretChanges(entries, storedKeys = []) {
+  const enregistres = new Set(storedKeys);
+  const presents = /* @__PURE__ */ new Set();
+  const set = {};
+  const missing = [];
+  for (const { key, value } of entries) {
+    const nom = key.trim();
+    if (!nom) continue;
+    presents.add(nom);
+    if (value !== "") set[nom] = value;
+    else if (!enregistres.has(nom) && !missing.includes(nom)) missing.push(nom);
+  }
+  return {
+    set,
+    remove: storedKeys.filter((nom) => !presents.has(nom)),
+    missing: missing.filter((nom) => !(nom in set))
+  };
+}
 function Statistic({ value, label, format = "number", locale = "fr-FR", currency = "XAF", precision, prefix, suffix, trend, className }) {
   const formatted = format === "currency" ? utils.formatCurrency(value, { locale, currency, ...precision !== void 0 ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {} }) : new Intl.NumberFormat(locale, format === "percent" ? { style: "percent", ...precision !== void 0 ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {} } : { ...precision !== void 0 ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {} }).format(value);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("sia-statistic", className), children: [
@@ -7854,6 +7905,7 @@ exports.YearPicker = YearPicker;
 exports.activityColumns = activityColumns;
 exports.clearSecretValues = clearSecretValues;
 exports.confirmUnsavedNavigation = confirmUnsavedNavigation;
+exports.createTanStackRouterStorage = createTanStackRouterStorage;
 exports.createUrlTableStorage = createUrlTableStorage;
 exports.defineResource = defineResource;
 exports.formFieldNames = formFieldNames;
@@ -7869,6 +7921,7 @@ exports.resourcePermissions = resourcePermissions;
 exports.resourceRowKey = resourceRowKey;
 exports.resourceSearchKeys = resourceSearchKeys;
 exports.resourceValidator = resourceValidator;
+exports.secretChanges = secretChanges;
 exports.tintForName = tintForName;
 exports.toneOf = toneOf;
 exports.useDataTableQuery = useDataTableQuery;

package/dist/index.css

@@ -2380,11 +2380,13 @@
   box-shadow: 0 14px 36px rgb(15 23 42 / .16);
 }
 .sia-select__panel {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   min-width: 12rem;
   max-height: min(22rem, calc(100vh - 1rem));
 }
 .sia-select__search-wrap {
+  flex: none;
   display: flex;
   align-items: center;
   gap: .5rem;
@@ -2403,7 +2405,10 @@
   font: inherit;
 }
 .sia-select__options {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: .35rem;
 }
 .sia-select__option {

package/dist/index.d.cts

@@ -2346,6 +2346,41 @@ declare function CrudPage<T>({ resource, title, description, eyebrow, headingLev
  * d'où l'on vient.
  */
 declare function createUrlTableStorage(mode?: "replace" | "push"): TableQueryStorage;
+/**
+ * Ce que l'adaptateur demande d'un routeur : la forme du `router` de
+ * TanStack Router, sans en dépendre. Méthodes écrites en syntaxe de méthode :
+ * leurs paramètres se comparent alors de façon bivariante, et le routeur typé
+ * de l'application s'y passe sans transtypage.
+ */
+interface TanStackRouterLike {
+    state: {
+        location: {
+            search: object;
+        };
+    };
+    navigate(options: {
+        to: string;
+        search: Record<string, unknown>;
+        replace: boolean;
+    }): unknown;
+    subscribe(event: "onResolved", listener: () => void): () => void;
+}
+/**
+ * L'état du tableau dans les paramètres de TanStack Router.
+ *
+ * Deux pièges de la recette qu'on écrivait à la main :
+ *
+ * - TanStack Router sérialise les paramètres en JSON. Une chaîne qui a l'air
+ *   d'un nombre y est mise entre guillemets — `page=2` devenait
+ *   `page=%222%22`. L'adaptateur passe donc de vrais nombres ; les autres
+ *   valeurs restent des chaînes, que le routeur relit à l'identique.
+ * - La lecture part de l'objet déjà décodé par le routeur, jamais de la chaîne
+ *   brute, qui porte ces guillemets.
+ *
+ * Les paramètres étrangers au tableau sont gardés par `useTableQuery`, qui
+ * n'écrit que ses propres clés.
+ */
+declare function createTanStackRouterStorage(router: TanStackRouterLike, mode?: "replace" | "push"): TableQueryStorage;
 interface UseDataTableQueryOptions {
     defaultState?: Partial<TableQueryState>;
     /** `false` garde l'état en mémoire — utile dans une modale. */
@@ -2363,6 +2398,11 @@ interface UseDataTableQueryOptions {
      * remplace celui de l'URL, et `syncUrl` / `history` sont ignorés.
      */
     storage?: TableQueryStorage;
+    /**
+     * Le routeur TanStack Router de l'application. Raccourci de
+     * `storage: createTanStackRouterStorage(router)` ; `history` s'applique.
+     */
+    router?: TanStackRouterLike;
     /** Les noms des paramètres serveur — `limit`, `sort` + `order`… */
     serverParams?: TableParamsMapping;
 }
@@ -3296,6 +3336,34 @@ declare function clearSecretValues(entries: SecretEntry[]): SecretEntry[];
  * affiché dans un formulaire ouvert.
  */
 declare function SecretFields({ value, defaultValue, onValueChange, storedKeys, templates, keyPattern, keyPatternMessage, keyLabel, valueLabel, addLabel, disabled, className, }: SecretFieldsProps): react_jsx_runtime.JSX.Element;
+/** Ce qu'il faut envoyer au serveur après une saisie dans `SecretFields`. */
+interface SecretChanges {
+    /** À créer ou à remplacer (rotation) : nom → nouvelle valeur. */
+    set: Record<string, string>;
+    /** Noms enregistrés retirés de la liste : à supprimer. */
+    remove: string[];
+    /**
+     * Noms nouveaux restés sans valeur. Rien à envoyer pour eux — mais les
+     * ignorer sans le dire perdrait une saisie : à signaler avant l'envoi.
+     */
+    missing: string[];
+}
+/**
+ * Ce qui change, calculé une fois pour tous les projets.
+ *
+ * Un nom enregistré laissé vide est inchangé ; saisi, il est remplacé. Un nom
+ * enregistré absent de la liste est à supprimer — y compris quand il a été
+ * renommé : l'ancien part, le nouveau arrive avec sa valeur. Les lignes sans
+ * nom sont ignorées ; un nom en double garde sa dernière valeur saisie.
+ *
+ * ```ts
+ * const { set, remove, missing } = secretChanges(secrets, enregistres);
+ * if (missing.length) return; // à compléter
+ * await api.patch(`/projets/${id}/secrets`, { body: { set, remove } });
+ * setSecrets(clearSecretValues(secrets));
+ * ```
+ */
+declare function secretChanges(entries: SecretEntry[], storedKeys?: string[]): SecretChanges;
 
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     width?: CSSProperties["width"];
@@ -3707,4 +3775,4 @@ interface YearPickerProps {
  */
 declare function YearPicker({ value, defaultValue, min, max, onValueChange, className }: YearPickerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActivityEntry, ActivityIcon, ActivityLog, type ActivityLogFilter, type ActivityLogProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, FolderIcon, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HomeIcon, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KeyIcon, KpiGrid, type KpiGridProps, Label, type LabelProps, LockIcon, LogOutIcon, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, type PageSizeContext, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PencilIcon, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, type ResourceFormMode, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, type SecretEntry, SecretFields, type SecretFieldsProps, Select, type SelectOption, type SelectProps, ServerIcon, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, StatusBadge, type StatusBadgeProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, UserIcon, UsersIcon, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, activityColumns, clearSecretValues, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, toneOf, useDataTableQuery, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, type ActivityEntry, ActivityIcon, ActivityLog, type ActivityLogFilter, type ActivityLogProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, FolderIcon, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HomeIcon, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KeyIcon, KpiGrid, type KpiGridProps, Label, type LabelProps, LockIcon, LogOutIcon, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, type PageSizeContext, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PencilIcon, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, type ResourceFormMode, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, type SecretChanges, type SecretEntry, SecretFields, type SecretFieldsProps, Select, type SelectOption, type SelectProps, ServerIcon, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, StatusBadge, type StatusBadgeProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, type TanStackRouterLike, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, UserIcon, UsersIcon, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, activityColumns, clearSecretValues, confirmUnsavedNavigation, createTanStackRouterStorage, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, secretChanges, tintForName, toneOf, useDataTableQuery, useToast };

package/dist/index.d.ts

@@ -2346,6 +2346,41 @@ declare function CrudPage<T>({ resource, title, description, eyebrow, headingLev
  * d'où l'on vient.
  */
 declare function createUrlTableStorage(mode?: "replace" | "push"): TableQueryStorage;
+/**
+ * Ce que l'adaptateur demande d'un routeur : la forme du `router` de
+ * TanStack Router, sans en dépendre. Méthodes écrites en syntaxe de méthode :
+ * leurs paramètres se comparent alors de façon bivariante, et le routeur typé
+ * de l'application s'y passe sans transtypage.
+ */
+interface TanStackRouterLike {
+    state: {
+        location: {
+            search: object;
+        };
+    };
+    navigate(options: {
+        to: string;
+        search: Record<string, unknown>;
+        replace: boolean;
+    }): unknown;
+    subscribe(event: "onResolved", listener: () => void): () => void;
+}
+/**
+ * L'état du tableau dans les paramètres de TanStack Router.
+ *
+ * Deux pièges de la recette qu'on écrivait à la main :
+ *
+ * - TanStack Router sérialise les paramètres en JSON. Une chaîne qui a l'air
+ *   d'un nombre y est mise entre guillemets — `page=2` devenait
+ *   `page=%222%22`. L'adaptateur passe donc de vrais nombres ; les autres
+ *   valeurs restent des chaînes, que le routeur relit à l'identique.
+ * - La lecture part de l'objet déjà décodé par le routeur, jamais de la chaîne
+ *   brute, qui porte ces guillemets.
+ *
+ * Les paramètres étrangers au tableau sont gardés par `useTableQuery`, qui
+ * n'écrit que ses propres clés.
+ */
+declare function createTanStackRouterStorage(router: TanStackRouterLike, mode?: "replace" | "push"): TableQueryStorage;
 interface UseDataTableQueryOptions {
     defaultState?: Partial<TableQueryState>;
     /** `false` garde l'état en mémoire — utile dans une modale. */
@@ -2363,6 +2398,11 @@ interface UseDataTableQueryOptions {
      * remplace celui de l'URL, et `syncUrl` / `history` sont ignorés.
      */
     storage?: TableQueryStorage;
+    /**
+     * Le routeur TanStack Router de l'application. Raccourci de
+     * `storage: createTanStackRouterStorage(router)` ; `history` s'applique.
+     */
+    router?: TanStackRouterLike;
     /** Les noms des paramètres serveur — `limit`, `sort` + `order`… */
     serverParams?: TableParamsMapping;
 }
@@ -3296,6 +3336,34 @@ declare function clearSecretValues(entries: SecretEntry[]): SecretEntry[];
  * affiché dans un formulaire ouvert.
  */
 declare function SecretFields({ value, defaultValue, onValueChange, storedKeys, templates, keyPattern, keyPatternMessage, keyLabel, valueLabel, addLabel, disabled, className, }: SecretFieldsProps): react_jsx_runtime.JSX.Element;
+/** Ce qu'il faut envoyer au serveur après une saisie dans `SecretFields`. */
+interface SecretChanges {
+    /** À créer ou à remplacer (rotation) : nom → nouvelle valeur. */
+    set: Record<string, string>;
+    /** Noms enregistrés retirés de la liste : à supprimer. */
+    remove: string[];
+    /**
+     * Noms nouveaux restés sans valeur. Rien à envoyer pour eux — mais les
+     * ignorer sans le dire perdrait une saisie : à signaler avant l'envoi.
+     */
+    missing: string[];
+}
+/**
+ * Ce qui change, calculé une fois pour tous les projets.
+ *
+ * Un nom enregistré laissé vide est inchangé ; saisi, il est remplacé. Un nom
+ * enregistré absent de la liste est à supprimer — y compris quand il a été
+ * renommé : l'ancien part, le nouveau arrive avec sa valeur. Les lignes sans
+ * nom sont ignorées ; un nom en double garde sa dernière valeur saisie.
+ *
+ * ```ts
+ * const { set, remove, missing } = secretChanges(secrets, enregistres);
+ * if (missing.length) return; // à compléter
+ * await api.patch(`/projets/${id}/secrets`, { body: { set, remove } });
+ * setSecrets(clearSecretValues(secrets));
+ * ```
+ */
+declare function secretChanges(entries: SecretEntry[], storedKeys?: string[]): SecretChanges;
 
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     width?: CSSProperties["width"];
@@ -3707,4 +3775,4 @@ interface YearPickerProps {
  */
 declare function YearPicker({ value, defaultValue, min, max, onValueChange, className }: YearPickerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActivityEntry, ActivityIcon, ActivityLog, type ActivityLogFilter, type ActivityLogProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, FolderIcon, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HomeIcon, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KeyIcon, KpiGrid, type KpiGridProps, Label, type LabelProps, LockIcon, LogOutIcon, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, type PageSizeContext, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PencilIcon, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, type ResourceFormMode, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, type SecretEntry, SecretFields, type SecretFieldsProps, Select, type SelectOption, type SelectProps, ServerIcon, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, StatusBadge, type StatusBadgeProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, UserIcon, UsersIcon, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, activityColumns, clearSecretValues, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, toneOf, useDataTableQuery, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, type ActivityEntry, ActivityIcon, ActivityLog, type ActivityLogFilter, type ActivityLogProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, FolderIcon, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HomeIcon, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KeyIcon, KpiGrid, type KpiGridProps, Label, type LabelProps, LockIcon, LogOutIcon, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, type PageSizeContext, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PencilIcon, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, type ResourceFormMode, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, type SecretChanges, type SecretEntry, SecretFields, type SecretFieldsProps, Select, type SelectOption, type SelectProps, ServerIcon, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, StatusBadge, type StatusBadgeProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, type TanStackRouterLike, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, UserIcon, UsersIcon, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, activityColumns, clearSecretValues, confirmUnsavedNavigation, createTanStackRouterStorage, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, secretChanges, tintForName, toneOf, useDataTableQuery, useToast };

package/dist/index.js

@@ -1248,6 +1248,34 @@ function createUrlTableStorage(mode = "replace") {
     }
   };
 }
+function nombreCanonique(valeur) {
+  const nombre = Number(valeur);
+  return valeur !== "" && Number.isFinite(nombre) && String(nombre) === valeur ? nombre : valeur;
+}
+function createTanStackRouterStorage(router, mode = "replace") {
+  return {
+    read: () => {
+      const params = new URLSearchParams();
+      for (const [cle, valeur] of Object.entries(router.state.location.search)) {
+        if (valeur === void 0 || valeur === null) continue;
+        for (const v of Array.isArray(valeur) ? valeur : [valeur]) {
+          params.append(cle, typeof v === "object" ? JSON.stringify(v) : String(v));
+        }
+      }
+      return params.toString();
+    },
+    write: (value) => {
+      const search = {};
+      for (const [cle, brut] of new URLSearchParams(value)) {
+        const valeur = nombreCanonique(brut);
+        const deja = search[cle];
+        search[cle] = deja === void 0 ? valeur : [...Array.isArray(deja) ? deja : [deja], valeur];
+      }
+      router.navigate({ to: ".", search, replace: mode === "replace" });
+    },
+    subscribe: (listener) => router.subscribe("onResolved", listener)
+  };
+}
 function useDataTableQuery(options = {}) {
   const {
     defaultState,
@@ -1255,11 +1283,12 @@ function useDataTableQuery(options = {}) {
     history = "replace",
     prefix,
     storage: fourni,
+    router,
     serverParams
   } = options;
   const storage = useMemo(
-    () => fourni ?? (syncUrl ? createUrlTableStorage(history) : void 0),
-    [fourni, history, syncUrl]
+    () => fourni ?? (router ? createTanStackRouterStorage(router, history) : syncUrl ? createUrlTableStorage(history) : void 0),
+    [fourni, history, router, syncUrl]
   );
   return useTableQuery({
     ...defaultState ? { defaultState } : {},
@@ -1815,6 +1844,10 @@ var Select = forwardRef(function Select2({
     setActiveIndex(selected >= 0 ? selected : visibleOptions.findIndex((option) => !option.disabled));
     if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
   }, [currentValue, fetcher, open, searchable, visibleOptions]);
+  useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    document.getElementById(`${listboxId}-${activeIndex}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, listboxId, open]);
   const setTriggerRef = (node) => {
     triggerRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -7009,6 +7042,24 @@ function SecretFields({
     ] })
   ] });
 }
+function secretChanges(entries, storedKeys = []) {
+  const enregistres = new Set(storedKeys);
+  const presents = /* @__PURE__ */ new Set();
+  const set = {};
+  const missing = [];
+  for (const { key, value } of entries) {
+    const nom = key.trim();
+    if (!nom) continue;
+    presents.add(nom);
+    if (value !== "") set[nom] = value;
+    else if (!enregistres.has(nom) && !missing.includes(nom)) missing.push(nom);
+  }
+  return {
+    set,
+    remove: storedKeys.filter((nom) => !presents.has(nom)),
+    missing: missing.filter((nom) => !(nom in set))
+  };
+}
 function Statistic({ value, label, format = "number", locale = "fr-FR", currency = "XAF", precision, prefix, suffix, trend, className }) {
   const formatted = format === "currency" ? formatCurrency(value, { locale, currency, ...precision !== void 0 ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {} }) : new Intl.NumberFormat(locale, format === "percent" ? { style: "percent", ...precision !== void 0 ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {} } : { ...precision !== void 0 ? { minimumFractionDigits: precision, maximumFractionDigits: precision } : {} }).format(value);
   return /* @__PURE__ */ jsxs("div", { className: cn("sia-statistic", className), children: [
@@ -7656,4 +7707,4 @@ function YearPicker({ value, defaultValue = (/* @__PURE__ */ new Date()).getFull
   return /* @__PURE__ */ jsx("select", { className: cn("sia-year-picker", className), value, defaultValue: value === void 0 ? defaultValue : void 0, onChange: (event) => onValueChange?.(Number(event.target.value)), children: years.map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year)) });
 }
 
-export { Accordion, ActivityIcon, ActivityLog, Alert, AlertCircleIcon, AmountDisplay, AppShell, AppShellBrand, AppShellRailItem, ArrowRightIcon, AspectRatio, AsyncState, AuditMeta, AuthLayout, Autocomplete, Avatar, AvatarGroup, Badge, BottomTabs, Breadcrumb, Button, Calendar, CalendarIcon, Can, Card, CardBody, CardFooter, CardHeader, Chart, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, ColorPicker, CommandPalette, ConfirmDialog, Container, ContextMenu, Countdown, CrudDialogs, CrudPage, CurrencyInput, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangeFilter, DateRangePicker, DateTimePicker, Descriptions, Divider, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DurationDisplay, EmptyState, EntityMeta, ErrorState, EventCalendar, EyeIcon, EyeOffIcon, Field, FileUpload, FiltersBar, FolderIcon, Form, Field as FormField, Heading, HomeIcon, HoverCard, IconButton, ImageUpload, InfoIcon, InlineCode, Input, InputNumber, JsonEditor, KeyIcon, KpiGrid, Label, LockIcon, LogOutIcon, MarkdownEditor, MenuList, MiniCalendar, MinusIcon, Modal, MonthPicker, MoreHorizontalIcon, MultiSelect, OtpInput, Overlay, PageHeader, Pagination, PasswordInput, PencilIcon, PermissionGate, PhoneInput, PlusIcon, Popover, Progress, QRCode, Radio, RadioButton, RadioGroup, Rating, ReferenceSelect, RelativeTime, RequireSession, ResizablePanel, RichTextEditor, ScrollArea, SearchIcon, SearchInput, SecretFields, Select, ServerIcon, SettingsIcon, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, StarIcon, StatCard, Statistic, StatusBadge, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Text, Textarea, TimePicker, TimeRangePicker, Timeline, Timer, ToastProvider, Toaster, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TrashIcon, Tree, TreeSelect, UnsavedChangesGuard, UploadIcon, UserIcon, UsersIcon, WeekPicker, XIcon, YearPicker, activityColumns, clearSecretValues, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, toneOf, useDataTableQuery, useToast };
+export { Accordion, ActivityIcon, ActivityLog, Alert, AlertCircleIcon, AmountDisplay, AppShell, AppShellBrand, AppShellRailItem, ArrowRightIcon, AspectRatio, AsyncState, AuditMeta, AuthLayout, Autocomplete, Avatar, AvatarGroup, Badge, BottomTabs, Breadcrumb, Button, Calendar, CalendarIcon, Can, Card, CardBody, CardFooter, CardHeader, Chart, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, ColorPicker, CommandPalette, ConfirmDialog, Container, ContextMenu, Countdown, CrudDialogs, CrudPage, CurrencyInput, DEFAULT_COUNTRIES, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangeFilter, DateRangePicker, DateTimePicker, Descriptions, Divider, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DurationDisplay, EmptyState, EntityMeta, ErrorState, EventCalendar, EyeIcon, EyeOffIcon, Field, FileUpload, FiltersBar, FolderIcon, Form, Field as FormField, Heading, HomeIcon, HoverCard, IconButton, ImageUpload, InfoIcon, InlineCode, Input, InputNumber, JsonEditor, KeyIcon, KpiGrid, Label, LockIcon, LogOutIcon, MarkdownEditor, MenuList, MiniCalendar, MinusIcon, Modal, MonthPicker, MoreHorizontalIcon, MultiSelect, OtpInput, Overlay, PageHeader, Pagination, PasswordInput, PencilIcon, PermissionGate, PhoneInput, PlusIcon, Popover, Progress, QRCode, Radio, RadioButton, RadioGroup, Rating, ReferenceSelect, RelativeTime, RequireSession, ResizablePanel, RichTextEditor, ScrollArea, SearchIcon, SearchInput, SecretFields, Select, ServerIcon, SettingsIcon, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, StarIcon, StatCard, Statistic, StatusBadge, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Text, Textarea, TimePicker, TimeRangePicker, Timeline, Timer, ToastProvider, Toaster, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TrashIcon, Tree, TreeSelect, UnsavedChangesGuard, UploadIcon, UserIcon, UsersIcon, WeekPicker, XIcon, YearPicker, activityColumns, clearSecretValues, confirmUnsavedNavigation, createTanStackRouterStorage, createUrlTableStorage, defineResource, formFieldNames, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, secretChanges, tintForName, toneOf, useDataTableQuery, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/react-web",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "DOM implementation of the SIA UI component contracts.",
   "keywords": [
     "sia-ui",
@@ -45,10 +45,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sia-ui/headless": "0.6.0",
-    "@sia-ui/react": "0.6.0",
-    "@sia-ui/tokens": "0.6.0",
-    "@sia-ui/utils": "0.6.0"
+    "@sia-ui/tokens": "0.7.1",
+    "@sia-ui/utils": "0.7.1",
+    "@sia-ui/react": "0.7.1",
+    "@sia-ui/headless": "0.7.1"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
@@ -67,7 +67,7 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@sia-ui/api": "0.6.0"
+    "@sia-ui/api": "0.7.1"
   },
   "scripts": {
     "build": "node scripts/build-theme.mjs --check && tsup",