@llmnative/react 1.43.0 → 1.45.0

package/dist/types/src/I18n.d.ts

@@ -113,6 +113,10 @@ export interface I18nDict {
     gallery: {
         selectItem: string;
     };
+    sortableList: {
+        handle: string;
+        moved: string;
+    };
     crop: {
         enableCrop: string;
         variants: string;

package/dist/types/src/components/blocks/SortableList.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type ListCardProps } from './ListCard';
+/** What a card of the list shows: the content of a compact ListCard. */
+export type SortableListCard = Pick<ListCardProps, 'title' | 'description' | 'meta' | 'badge' | 'icon' | 'trailing' | 'active' | 'disabled'>;
+export type SortableListReorderMeta<TItem> = {
+    fromIndex: number;
+    toIndex: number;
+    item: TItem;
+};
+export interface SortableListProps<TItem> {
+    /** The items, in their order. */
+    items: TItem[];
+    /** A stable key of an item. */
+    getKey: (item: TItem) => string;
+    /** The card of an item. */
+    renderItem: (item: TItem, index: number) => SortableListCard;
+    /** The items in their new order, after a drag or a key press on a handle. */
+    onReorder?: (items: TItem[], meta: SortableListReorderMeta<TItem>) => void;
+    /** The name of the list, for assistive technologies. */
+    label?: string;
+    /** Shows the position of each item (1, 2, 3…) before its card. */
+    numbered?: boolean;
+    /** No reordering: the handles are left out. */
+    disabled?: boolean;
+    /** What the list shows without items. */
+    emptyState?: React.ReactNode;
+    className?: string;
+    itemClassName?: string;
+    cardClassName?: string;
+}
+/** `items` with the one at `from` moved to `to`. */
+export declare function moveItem<TItem>(items: readonly TItem[], from: number, to: number): TItem[];
+/**
+ * A list of compact cards in an order the person chooses (CR-120): each card is dragged by its handle, or
+ * moved with the arrow keys on it; `onReorder` gets the new order. A screen reader hears where it went.
+ */
+export default function SortableList<TItem>({ items, getKey, renderItem, onReorder, label, numbered, disabled, emptyState, className, itemClassName, cardClassName, }: SortableListProps<TItem>): React.JSX.Element | null;

package/dist/types/src/components/index.d.ts

@@ -61,6 +61,8 @@ export * from './ui/fields/ContextMenu';
 export { default as Menu } from './blocks/Menu';
 export { default as ListCard } from './blocks/ListCard';
 export type { ListCardProps } from './blocks/ListCard';
+export { default as SortableList, moveItem } from './blocks/SortableList';
+export type { SortableListProps, SortableListCard, SortableListReorderMeta } from './blocks/SortableList';
 export { default as SideNav } from './blocks/SideNav';
 export type { SideNavProps, SideNavItemDef } from './blocks/SideNav';
 export { default as Form, useFormContext } from './widgets/Form';

package/dist/types/src/components/widgets/Chatbot.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { AIModelPricing } from '../../providers/ai/AIProvider';
+import { type BadgeType } from '../ui/Badge';
 import { type EditorCommand } from '../ui/fields/ContextMenu';
 /**
  * Chatbot — l'input/composer AI condiviso, estratto da `Prompt` (CR-071): textarea,
@@ -46,11 +47,18 @@ export interface ChatbotModelOption {
     /** Section the option is listed under (e.g. its provider). When any option has one, the
      * picker renders one sticky header per group, in order of first appearance. */
     group?: string;
+    /** A badge on the right of the header of its group (CR-121), e.g. how the group is paid; the
+     * first option of a group that has one gives it. */
+    groupBadge?: {
+        label: string;
+        variant?: BadgeType;
+    };
 }
 /** Consecutive-or-not options sharing a `group` end up in one section, keeping the order in
  * which each group first appears; options without a group form an unnamed leading section. */
 export declare const groupModelOptions: (options: ChatbotModelOption[]) => Array<{
     group?: string;
+    badge?: ChatbotModelOption["groupBadge"];
     options: ChatbotModelOption[];
 }>;
 export declare const isFreeModelOption: (option: ChatbotModelOption) => boolean;

package/llms-full.txt

@@ -1022,6 +1022,28 @@ e lasciano il menu aperto salvo `closeOnClick`.
 | `onClick` | `(e) => void` |
 | Classi CSS: `titleClassName`, `descriptionClassName`, `metaClassName`, `badgeClassName`, `leadingClassName`, `bodyClassName`, `headerClassName`, `trailingClassName`, `footerClassName` | `string` |
 
+**SortableList (CR-120):** card compatte (ListCard) in un ordine che la persona sceglie: le trascina per la
+maniglia, o con le frecce su/giù sulla maniglia; l'annuncio della nuova posizione va agli screen reader.
+```tsx
+<SortableList
+  items={accounts}
+  getKey={(a) => a.id}
+  label="Account"
+  numbered
+  onReorder={(next, { fromIndex, toIndex, item }) => setAccounts(next)}
+  renderItem={(a) => ({ title: a.email, meta: a.added, badge: <Badge variant="success">Disponibile</Badge>, trailing: <ActionButton icon="trash-2" … /> })}
+  emptyState={<p>Nessun account</p>}
+/>
+moveItem(['a', 'b', 'c'], 0, 2)   // ['b', 'c', 'a']
+```
+| Prop | Tipo |
+|---|---|
+| `items` / `getKey` | `TItem[]` / `(item) => string` |
+| `renderItem` | `(item, index) => SortableListCard` (`title`, `description`, `meta`, `badge`, `icon`, `trailing`, `active`, `disabled` di ListCard) |
+| `onReorder` | `(items, { fromIndex, toIndex, item }) => void`; senza, nessuna maniglia |
+| `label` / `numbered` / `disabled` / `emptyState` | `string` / `boolean` / `boolean` / `ReactNode` |
+| Classi CSS: `className`, `itemClassName`, `cardClassName` | `string` |
+
 **Dropdown:**
 | Prop | Tipo |
 |---|---|
@@ -1128,6 +1150,8 @@ const catalog   = getAIModelCatalog()       // modelli disponibili
 // non trovato (il modello resta in lista). isFreeAIModel(m) → input e output a 0.
 // Il model picker di Prompt/Chatbot mostra "$in / $out", evidenzia i free, segnala i mancanti,
 // e raggruppa per provider (ChatbotModelOption.group = providerLabel) con header sticky.
+// CR-121: il pulsante mostra la `label` del modello scelto (non il suo valore); `groupBadge: { label, variant? }`
+// su un'opzione mette un Badge a destra nell'header del suo gruppo (es. Abbonamento / A consumo).
 
 // Provider adapter restituito da useAIProvider()
 const text  = await provider.fetch("Scrivi un titolo per: {keyword}", { keyword: "React" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",