@twentyfirstmedia/elements 0.7.0 → 0.8.0

package/dist/elements.d.ts

@@ -3138,6 +3138,10 @@ export interface ConsentScope {
   granted: boolean;
   /** Needed for the connection to work at all: shown, not switchable. */
   required?: boolean;
+  /** What the permission allows: reading, acting (sending, booking, switching) or moving money. */
+  level?: "read" | "act" | "money";
+  /** The assistant asks you before it uses this permission. */
+  asksFirst?: boolean;
 }
 export interface ConsentConnector {
   id: string;
@@ -3304,6 +3308,282 @@ export interface DocumentListProps extends BaseProps {
   label?: string;
 }
 
+/* ── Connectors: services an assistant reads from and acts in ── */
+/** The state of a connected service. */
+export type ServiceState = "connected" | "syncing" | "error" | "paused" | "off";
+export interface ServiceMarkProps extends BaseProps {
+  /** The service's name: the accessible name, and the monogram when there is no icon or logo. */
+  name: string;
+  /** A brand logo (`brandGmail` …) or a line icon. */
+  icon?: IconName;
+  /** Your own logo (an `<img>` or `<svg>`) instead of the icon. */
+  logo?: ReactNode;
+  /** Letters for the monogram (default: the initials of `name`). */
+  monogram?: string;
+  /** 24, 36 (default) or 48 px. */
+  size?: "sm" | "md" | "lg";
+  tint?: Tint | "plain";
+  /** A dot in the corner with the state in words for screen readers. */
+  status?: ServiceState;
+  /** Hidden from screen readers when the name is written next to it. */
+  decorative?: boolean;
+}
+export interface Connector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+  /** Letters shown when there is neither icon nor logo (default: the initials of `name`). */
+  monogram?: string;
+  tint?: Tint | "plain";
+  /** The group it is listed under ("Health & fitness", "Money" …). */
+  category: string;
+  description?: ReactNode;
+  /** `available` (default), `connected`, `error` (needs a reconnect) or `soon`. */
+  state?: "available" | "connected" | "error" | "soon";
+  /** A hint under the description: "Needs the iPhone app", "Import an export file". */
+  note?: ReactNode;
+  /** The connected account ("mara@gmail.com"). */
+  account?: string;
+}
+export interface ConnectorGalleryProps extends BaseProps {
+  connectors: Connector[];
+  /** Order of the groups; categories not listed follow in the order they appear. */
+  categories?: string[];
+  onConnect?: (id: string) => void;
+  /** Opens a connected (or failing) connector. */
+  onOpen?: (id: string) => void;
+  /** A search field and category chips above the grid (default true). */
+  filters?: boolean;
+  /** Accessible name (default "Connectors"). */
+  label?: string;
+}
+export interface SyncStatusProps extends BaseProps {
+  state: "synced" | "syncing" | "error" | "paused" | "never";
+  /** The last successful sync. */
+  last?: Date | string | number;
+  /** The next planned sync. */
+  next?: Date | string | number;
+  /** "Now" for the relative times; pass it so server and client render the same. */
+  now?: Date | string | number;
+  /** What the last sync brought: `{ label: "emails", value: 1204 }`. */
+  counts?: { label: string; value: number }[];
+  /** Why the sync failed. */
+  error?: ReactNode;
+  onSync?: () => void;
+  /** One line: state and time only. */
+  compact?: boolean;
+}
+export interface AgentAction {
+  id: string;
+  /** The service the action used. */
+  service?: { name: string; icon?: IconName; logo?: ReactNode };
+  /** Which agent did it ("Assistant", "Money agent"). */
+  agent?: string;
+  /** What happened, in a sentence: "Moved the dentist to Friday, 10:00". */
+  text: ReactNode;
+  at: Date | string | number;
+  /** `read` (looked something up), `act` (changed something) or `money`. */
+  kind?: "read" | "act" | "money";
+  /** `done` (default), `waiting` for your approval, `declined`, `undone` or `failed`. */
+  state?: "done" | "waiting" | "declined" | "undone" | "failed";
+  detail?: ReactNode;
+}
+export interface AgentActivityProps extends BaseProps {
+  items: AgentAction[];
+  /** "Now" for the day headings; pass it so server and client render the same. */
+  now?: Date | string | number;
+  /** Offers "Undo" on finished actions that changed something. */
+  onUndo?: (id: string) => void;
+  /** Opens an action that waits for your approval. */
+  onReview?: (id: string) => void;
+  /** Accessible name (default "Agent activity"). */
+  label?: string;
+}
+export interface ConnectionItem {
+  id: string;
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+  monogram?: string;
+  tint?: Tint | "plain";
+  /** The connected account ("mara@gmail.com", "Giro ••• 4410"). */
+  account?: ReactNode;
+  state: ServiceState;
+  /** How fresh the data is, shown as a compact `SyncStatus`. */
+  sync?: { state: SyncStatusProps["state"]; last?: Date | string | number };
+}
+export interface ConnectionListProps extends BaseProps {
+  items: ConnectionItem[];
+  /** "Now" for the relative times; pass it so server and client render the same. */
+  now?: Date | string | number;
+  onManage?: (id: string) => void;
+  /** Shown instead of "Manage" on connections in the `error` state. */
+  onReconnect?: (id: string) => void;
+  /** Accessible name (default "Connections"). */
+  label?: string;
+}
+
+/* ── Connected data: home, car, media, workouts, calls, bookings, golf, investments ── */
+/** The service a value comes from, shown as a small mark. */
+export interface ServiceRef {
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+}
+export interface DeviceTileProps extends BaseProps {
+  name: string;
+  room?: string;
+  icon?: IconName;
+  /** The kind sets the default icon and which controls appear. */
+  kind?: "switch" | "light" | "thermostat" | "vacuum" | "purifier" | "camera" | "lock" | "sensor";
+  /** On or off; with `onToggle` a switch. */
+  on?: boolean;
+  onToggle?: (on: boolean) => void;
+  /** The main reading: "21.5 °C", "Cleaning", "AQI 12". */
+  value?: ReactNode;
+  /** A line under the value: "Heating to 22 °C", "Kitchen · 18 m² left". */
+  status?: ReactNode;
+  /** Thermostat target in °C; with `onTarget` a − / + stepper (steps of `step`, default 0.5). */
+  target?: number;
+  onTarget?: (value: number) => void;
+  step?: number;
+  /** Battery in percent (vacuums, sensors, locks). */
+  battery?: number;
+  /** Quick actions: "Start", "Dock", "Boost". */
+  actions?: { label: string; icon?: IconName; onClick?: () => void }[];
+  /** The device does not answer. */
+  offline?: boolean;
+  service?: ServiceRef;
+}
+export interface VehicleCardProps extends BaseProps {
+  name: string;
+  model?: string;
+  /** Battery (or tank) in percent. */
+  battery: number;
+  /** Range in km. */
+  range?: number;
+  /** The charge limit in percent, marked on the bar. */
+  limit?: number;
+  charging?: "charging" | "complete" | "plugged" | "unplugged";
+  /** Charging power in kW while charging. */
+  power?: number;
+  /** When charging reaches the limit. */
+  until?: Date | string | number;
+  locked?: boolean;
+  /** Inside temperature in °C. */
+  inside?: number;
+  climateOn?: boolean;
+  location?: ReactNode;
+  onLock?: (locked: boolean) => void;
+  onClimate?: (on: boolean) => void;
+  service?: ServiceRef;
+}
+export interface NowPlayingProps extends BaseProps {
+  title: string;
+  artist?: string;
+  album?: string;
+  /** Cover art: an `<img>`. */
+  art?: ReactNode;
+  /** Position and length in seconds. */
+  position?: number;
+  duration?: number;
+  playing?: boolean;
+  /** Where it plays: "Living room speaker". */
+  device?: string;
+  onPlayPause?: () => void;
+  onNext?: () => void;
+  onPrevious?: () => void;
+  service?: ServiceRef;
+}
+export interface WorkoutCardProps extends BaseProps {
+  /** "Run", "Ride", "Strength", "Golf" … */
+  type: string;
+  icon?: IconName;
+  date: Date | string | number;
+  /** Minutes. */
+  duration: number;
+  /** Kilometres. */
+  distance?: number;
+  calories?: number;
+  /** Average heart rate in bpm. */
+  heartRate?: number;
+  /** Minutes in heart-rate zones 1–5. */
+  zones?: number[];
+  service?: ServiceRef;
+}
+export interface CallItem {
+  id: string;
+  name: string;
+  number?: string;
+  direction: "incoming" | "outgoing" | "missed";
+  at: Date | string | number;
+  /** Seconds. */
+  duration?: number;
+  /** What the call was about (an assistant's summary). */
+  summary?: ReactNode;
+}
+export interface CallLogProps extends BaseProps {
+  calls: CallItem[];
+  /** "Now" for the day headings. */
+  now?: Date | string | number;
+  onCall?: (id: string) => void;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Calls"). */
+  label?: string;
+}
+export interface ReservationCardProps extends BaseProps {
+  kind: "stay" | "flight" | "train" | "ride" | "order" | "event";
+  title: string;
+  /** "Hotel Atlantic · 2 nights", "LH 2024 · Seat 14A". */
+  subtitle?: ReactNode;
+  start: Date | string | number;
+  end?: Date | string | number;
+  /** Where: an address, airport codes, a restaurant. */
+  place?: ReactNode;
+  /** Booking or order number. */
+  code?: string;
+  status?: "confirmed" | "pending" | "cancelled" | "delayed" | "onTheWay" | "delivered";
+  /** Extra words for the status: "+25 min", "Arrives 19:40". */
+  statusText?: string;
+  service?: ServiceRef;
+  actions?: ReactNode;
+}
+export interface GolfHole {
+  par: number;
+  strokes?: number;
+  putts?: number;
+}
+export interface ScorecardProps extends BaseProps {
+  course: string;
+  date?: Date | string | number;
+  /** 9 or 18 holes. */
+  holes: GolfHole[];
+  /** Tee and course rating: "Yellow · CR 71.2 / SR 128". */
+  tee?: string;
+  service?: ServiceRef;
+}
+export interface Holding {
+  id: string;
+  name: string;
+  /** Ticker or ISIN. */
+  symbol?: string;
+  value: number;
+  /** Change in percent over `period`. */
+  change?: number;
+  /** Share of the portfolio in percent. */
+  weight?: number;
+}
+export interface HoldingsListProps extends BaseProps {
+  holdings: Holding[];
+  currency?: string;
+  /** The period of `change` ("today", "1 year"). */
+  period?: string;
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Holdings"). */
+  label?: string;
+}
+
 export interface IconProps {
   name: IconName;
   /** Pixel size (default 16; 14 in chips and badges, 20 in navigation). */
@@ -3403,6 +3683,32 @@ export type TfCoverageMatrixElement = TfElement<CoverageMatrixProps>;
 export type TfClaimTimelineElement = TfElement<ClaimTimelineProps>;
 /** `<tf-document-list>`: Important papers (IDs, contracts, policies, certificates) with category, holder and expiry: "Expired", "Expires in 19 days" or "Valid until May 2031". */
 export type TfDocumentListElement = TfElement<DocumentListProps>;
+/** `<tf-service-mark>`: A connected service's mark: its brand logo from the icon library (brandGmail, brandTesla …), your own logo, or a monogram for a service without a logo ("KS" for a local nursery). */
+export type TfServiceMarkElement = TfElement<ServiceMarkProps>;
+/** `<tf-connector-gallery>`: Every service an assistant can connect to, grouped by category, with a search field and category chips. */
+export type TfConnectorGalleryElement = TfElement<ConnectorGalleryProps>;
+/** `<tf-connection-list>`: The services you are connected to: mark with state dot, the connected account, how fresh the data is (a compact SyncStatus) and Manage, or Reconnect for a connection that needs attention. */
+export type TfConnectionListElement = TfElement<ConnectionListProps>;
+/** `<tf-sync-status>`: When a connected service last synced, in words ("Synced 6 minutes ago"), when it syncs next, what the last sync brought ("1,204 emails") and why a sync failed, with "Sync now". */
+export type TfSyncStatusElement = TfElement<SyncStatusProps>;
+/** `<tf-agent-activity>`: What agents did with your connected services, newest first and grouped by day: each action with its service, agent and time, whether it read something, changed something or touched money, and its state (waiting for you, declined, undone, fa */
+export type TfAgentActivityElement = TfElement<AgentActivityProps>;
+/** `<tf-device-tile>`: A smart-home device (from Google Home, Apple Home, SmartThings, tado°, Dyson, eufy, Dreame …): its reading, its state and the controls its kind needs. */
+export type TfDeviceTileElement = TfElement<DeviceTileProps>;
+/** `<tf-vehicle-card>`: An electric car: charge in percent with the limit marked on the bar, range, charging state with power and when it is done, lock and climate as buttons, the inside temperature and where it is. */
+export type TfVehicleCardElement = TfElement<VehicleCardProps>;
+/** `<tf-now-playing>`: What is playing (Spotify, a speaker, a podcast app): cover, title and artist, the device, progress with times and previous / play-pause / next. */
+export type TfNowPlayingElement = TfElement<NowPlayingProps>;
+/** `<tf-workout-card>`: One workout from Apple Fitness, Strava, Garmin or a golf app: type, time, duration, distance, calories, average heart rate and minutes in each heart-rate zone as a bar with a legend in words. */
+export type TfWorkoutCardElement = TfElement<WorkoutCardProps>;
+/** `<tf-call-log>`: Your calls grouped by day: incoming, outgoing and missed with time and length, and what the call was about when an assistant summarised it. */
+export type TfCallLogElement = TfElement<CallLogProps>;
+/** `<tf-reservation-card>`: A booking or order: a stay, flight, train, ride, delivery or ticket with its dates, place, booking number and status (confirmed, pending, delayed, on the way, delivered, cancelled) plus a note like "+25 min". */
+export type TfReservationCardElement = TfElement<ReservationCardProps>;
+/** `<tf-scorecard>`: A round of golf: par and strokes for each hole in the usual marks (circle for a birdie, double circle for an eagle, square for a bogey, double square for worse), putts, Out, In and the total against par. */
+export type TfScorecardElement = TfElement<ScorecardProps>;
+/** `<tf-holdings-list>`: Positions in a portfolio: name and ISIN or ticker, value, change over a period (arrow, sign and colour) and the share of the portfolio as a bar. */
+export type TfHoldingsListElement = TfElement<HoldingsListProps>;
 /** `<tf-agent-card>`: One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails). */
 export type TfAgentCardElement = TfElement<AgentCardProps>;
 /** `<tf-agent-details>`: The AgentDetails component as a custom element. */
@@ -3835,6 +4141,19 @@ declare global {
     "tf-coverage-matrix": TfCoverageMatrixElement;
     "tf-claim-timeline": TfClaimTimelineElement;
     "tf-document-list": TfDocumentListElement;
+    "tf-service-mark": TfServiceMarkElement;
+    "tf-connector-gallery": TfConnectorGalleryElement;
+    "tf-connection-list": TfConnectionListElement;
+    "tf-sync-status": TfSyncStatusElement;
+    "tf-agent-activity": TfAgentActivityElement;
+    "tf-device-tile": TfDeviceTileElement;
+    "tf-vehicle-card": TfVehicleCardElement;
+    "tf-now-playing": TfNowPlayingElement;
+    "tf-workout-card": TfWorkoutCardElement;
+    "tf-call-log": TfCallLogElement;
+    "tf-reservation-card": TfReservationCardElement;
+    "tf-scorecard": TfScorecardElement;
+    "tf-holdings-list": TfHoldingsListElement;
     "tf-agent-card": TfAgentCardElement;
     "tf-agent-details": TfAgentDetailsElement;
     "tf-chat-list": TfChatListElement;