@urbicon-ui/blocks 6.39.0 → 6.40.1

package/dist/components/Chat/A2UIView/A2UINode.svelte

@@ -13,7 +13,10 @@
   } from '../../../primitives';
   import { resolveIcon } from '../../../icons';
   import DangerCircleIconDefault from '../../../icons/DangerCircleIcon.svelte';
+  import { fromDateInputValue, toDateInputValue } from '../../../utils/date';
   import type { Snippet } from 'svelte';
+  import DatePicker from '../../DatePicker/DatePicker.svelte';
+  import TimeInput from '../../TimeInput/TimeInput.svelte';
   import StreamingMarkdown from '../StreamingMarkdown/StreamingMarkdown.svelte';
   import { checkImageUrl, checkLinkUrl } from '../markdown/url-policy.js';
   import type { A2uiActionEvent } from './a2ui.types';
@@ -340,6 +343,71 @@
   }
 
   const buttonStyle = $derived(BUTTON_STYLE[enumOr('variant', 'default')] ?? BUTTON_STYLE.default);
+
+  // ── DateTimeInput ────────────────────────────────────────────────────────
+  // The spec's value is one ISO 8601 STRING covering date, time, or both. The
+  // renderer treats it as a timezone-NAIVE literal: a trailing offset/Z is
+  // stripped for display and never re-attached on write — timezone semantics
+  // belong to the agent, not to a UI renderer without timezone context.
+  const dtMode = $derived.by<'date' | 'time' | 'datetime'>(() => {
+    const enableDate = raw('enableDate') === true;
+    const enableTime = raw('enableTime') === true;
+    if (enableDate && enableTime) return 'datetime';
+    if (enableTime) return 'time';
+    // Includes the neither-flag payload: read tolerantly as a date input (the
+    // validator already reported DATETIME_NO_MODE).
+    return 'date';
+  });
+
+  function normalizeTimePart(value: string): string {
+    const match = /^(\d{2}:\d{2}(?::\d{2})?)/.exec(value);
+    return match ? match[1] : '';
+  }
+  function splitDateTime(value: string): { date: string; time: string } {
+    const trimmed = value.trim();
+    if (trimmed === '') return { date: '', time: '' };
+    const tIndex = trimmed.indexOf('T');
+    if (tIndex !== -1) {
+      return {
+        date: trimmed.slice(0, tIndex),
+        time: normalizeTimePart(trimmed.slice(tIndex + 1))
+      };
+    }
+    if (trimmed.includes(':')) return { date: '', time: normalizeTimePart(trimmed) };
+    return { date: trimmed, time: '' };
+  }
+
+  const dtParts = $derived(splitDateTime(textValue));
+  const dtMinParts = $derived(splitDateTime(text(resolved('min'))));
+  const dtMaxParts = $derived(splitDateTime(text(resolved('max'))));
+  const dtMinDate = $derived(
+    dtMinParts.date ? (fromDateInputValue(dtMinParts.date) ?? undefined) : undefined
+  );
+  const dtMaxDate = $derived(
+    dtMaxParts.date ? (fromDateInputValue(dtMaxParts.date) ?? undefined) : undefined
+  );
+  // Time bounds apply only when the bound itself is time-only: on a date-time
+  // bound the time limit would depend on the picked date — deliberately out of
+  // scope for this renderer (the date part is still enforced above).
+  const dtMinTime = $derived(dtMinParts.time && !dtMinParts.date ? dtMinParts.time : undefined);
+  const dtMaxTime = $derived(dtMaxParts.time && !dtMaxParts.date ? dtMaxParts.time : undefined);
+
+  function writeDateTime(nextDate: string, nextTime: string): void {
+    // Partial fills stay valid partial ISO: date-only / time-only / "".
+    const next = nextDate && nextTime ? `${nextDate}T${nextTime}` : nextDate || nextTime || '';
+    const pointer = valuePointer();
+    if (pointer) context.write(pointer, next);
+    else localText = next;
+  }
+  function onDtDateChange(picked: Date | undefined): void {
+    writeDateTime(
+      picked ? toDateInputValue(picked) : '',
+      dtMode === 'datetime' ? dtParts.time : ''
+    );
+  }
+  function onDtTimeChange(nextTime: string | null): void {
+    writeDateTime(dtMode === 'datetime' ? dtParts.date : '', nextTime ?? '');
+  }
 </script>
 
 {#snippet faultChip(label: string)}
@@ -579,4 +647,57 @@
     style={weightStyle}
     aria-label={ariaLabel}
   />
+{:else if component === 'DateTimeInput'}
+  {@const label = text(resolved('label'))}
+  {#if dtMode === 'datetime'}
+    <!-- The visible label sits on the date field; the group name gives the
+         time segments their context (TimeInput's segments are self-labelled). -->
+    <div
+      class={[context.classes.row, 'flex-wrap']}
+      style={weightStyle}
+      role="group"
+      aria-label={ariaLabel || label || undefined}
+    >
+      <DatePicker
+        label={label || undefined}
+        value={dtParts.date || null}
+        onValueChange={onDtDateChange}
+        minDate={dtMinDate}
+        maxDate={dtMaxDate}
+      />
+      <TimeInput
+        value={dtParts.time || null}
+        onValueChange={onDtTimeChange}
+        withSeconds={dtParts.time.length > 5}
+        min={dtMinTime}
+        max={dtMaxTime}
+      />
+    </div>
+  {:else if dtMode === 'time'}
+    <!-- TimeInput has no style/aria passthrough — weight + accessibility label
+         live on a wrapper (role=group only when it actually carries a name). -->
+    <div style={weightStyle} role={ariaLabel ? 'group' : undefined} aria-label={ariaLabel}>
+      <TimeInput
+        label={label || undefined}
+        value={dtParts.time || null}
+        onValueChange={onDtTimeChange}
+        withSeconds={dtParts.time.length > 5}
+        min={dtMinTime}
+        max={dtMaxTime}
+      />
+    </div>
+  {:else}
+    <!-- The accessibility label becomes the field label when no visible label
+         is given: DatePicker spreads an aria-label onto its role-less root div
+         (AT-ignored, axe aria-prohibited-attr), so the name must travel
+         through `label` to reach the actual input. -->
+    <DatePicker
+      label={label || ariaLabel || undefined}
+      value={dtParts.date || null}
+      onValueChange={onDtDateChange}
+      minDate={dtMinDate}
+      maxDate={dtMaxDate}
+      style={weightStyle}
+    />
+  {/if}
 {/if}

package/dist/components/Chat/A2UIView/A2UIView.svelte

@@ -249,6 +249,20 @@
   <A2UINode {node} {context} renderChild={renderNode} />
 {/snippet}
 
+<!--
+  Streaming skeleton: while the model is still emitting the (often large)
+  updateComponents envelope, the surface exists without a root — show a quiet
+  pulse instead of nothing so the wait is visible.
+-->
+{#snippet pendingSkeleton()}
+  <div class={classes.pendingSurface} role="status">
+    <span class="sr-only">{pendingLabel}</span>
+    <div class={[classes.pendingBar, 'w-1/3']} aria-hidden="true"></div>
+    <div class={[classes.pendingBar, 'w-full']} aria-hidden="true"></div>
+    <div class={[classes.pendingBar, 'w-2/3']} aria-hidden="true"></div>
+  </div>
+{/snippet}
+
 <div class={rootClass} {...restProps}>
   {#if view.summaryIssues.length}
     <Alert intent="danger" title={errorTitle}>
@@ -264,9 +278,16 @@
     <div class={classes.surface}>
       {#if surface.root}
         {@render renderNode(surface.root, surface.context)}
-      {:else if !streamingProp}
+      {:else if streamingProp}
+        {@render pendingSkeleton()}
+      {:else}
         <span class={classes.errorChip}>{errorTitle}</span>
       {/if}
     </div>
   {/each}
+
+  {#if streamingProp && view.surfaces.length === 0 && !view.summaryIssues.length}
+    <!-- Fence opened but no envelope has completed yet — same quiet pulse. -->
+    {@render pendingSkeleton()}
+  {/if}
 </div>

package/dist/components/Chat/A2UIView/a2ui-prompt.js

@@ -75,7 +75,9 @@ export function a2uiSystemPrompt(options) {
     sections.push([
         '## Envelopes',
         '',
-        'Emit one JSON envelope per line (JSONL). Every envelope is an object with a',
+        'Emit one JSON envelope per line (JSONL), as COMPACT single-line JSON — never',
+        'pretty-print or wrap one envelope across multiple lines, even a large',
+        'updateComponents. Every envelope is an object with a',
         '"version" of "v0.9.1" and EXACTLY ONE of these operations:',
         '',
         `- createSurface: { surfaceId, catalogId: "${catalogId}" } — send this FIRST.`,
@@ -91,7 +93,11 @@ export function a2uiSystemPrompt(options) {
         '- A multi-child container (Row, Column, List) uses "children": either an',
         '  array of ids, or a template { componentId, path } that repeats one',
         '  component over a data-model array.',
-        '- You may stream components incrementally; buffer until "root" exists.'
+        '- Stream components incrementally: send SEVERAL updateComponents envelopes',
+        '  ("root" and its top-level containers in the FIRST one, then a few',
+        '  components per envelope) so the UI renders progressively while you write.',
+        '  The client buffers until "root" exists and shows placeholders for',
+        '  children that have not arrived yet.'
     ].join('\n'));
     sections.push([
         '## Data bindings',

package/dist/components/Chat/A2UIView/a2ui-registry.d.ts

@@ -4,9 +4,9 @@
  * (`a2ui-prompt.ts`). No Svelte imports: this module must be importable
  * standalone (a server building the system prompt has no DOM).
  *
- * The subset is 12 of the 18 v0.9.1 `basic` components. The six excluded
- * (Modal, Tabs, Video, AudioPlayer, DateTimeInput — plus any future addition)
- * validate to a visible error chip; see `UNSUPPORTED_A2UI_COMPONENTS`.
+ * The subset covers the v0.9.1 `basic` components except the deliberately
+ * excluded ones (Modal, Tabs, Video, AudioPlayer), which validate to a visible
+ * error chip; see `UNSUPPORTED_A2UI_COMPONENTS`.
  *
  * Prop names, kinds, `required`, defaults and enum sets mirror
  * `catalogs/basic/catalog.json` **case-sensitively**. Every `description` here

package/dist/components/Chat/A2UIView/a2ui-registry.js

@@ -4,9 +4,9 @@
  * (`a2ui-prompt.ts`). No Svelte imports: this module must be importable
  * standalone (a server building the system prompt has no DOM).
  *
- * The subset is 12 of the 18 v0.9.1 `basic` components. The six excluded
- * (Modal, Tabs, Video, AudioPlayer, DateTimeInput — plus any future addition)
- * validate to a visible error chip; see `UNSUPPORTED_A2UI_COMPONENTS`.
+ * The subset covers the v0.9.1 `basic` components except the deliberately
+ * excluded ones (Modal, Tabs, Video, AudioPlayer), which validate to a visible
+ * error chip; see `UNSUPPORTED_A2UI_COMPONENTS`.
  *
  * Prop names, kinds, `required`, defaults and enum sets mirror
  * `catalogs/basic/catalog.json` **case-sensitively**. Every `description` here
@@ -25,8 +25,7 @@ export const UNSUPPORTED_A2UI_COMPONENTS = new Set([
     'Modal',
     'Tabs',
     'Video',
-    'AudioPlayer',
-    'DateTimeInput'
+    'AudioPlayer'
 ]);
 /**
  * Mapped `Icon.name` values. A name outside this set degrades to a fallback
@@ -342,6 +341,49 @@ export const A2UI_REGISTRY = Object.freeze({
                 description: 'An optional label for the slider.'
             }
         })
+    },
+    DateTimeInput: {
+        description: 'A date and/or time input. `value` is an ISO 8601 STRING ("" when unset) — date ' +
+            '(YYYY-MM-DD), time (HH:MM), or both (YYYY-MM-DDTHH:MM). ALWAYS set enableDate and/or ' +
+            'enableTime explicitly (both default to false). Bind `value` to a data-model path for ' +
+            'two-way binding and initialize that path with "".',
+        props: withCommon({
+            value: {
+                kind: 'string',
+                required: true,
+                dynamic: true,
+                description: 'The ISO 8601 date/time string ("" when unset). Bind with { path } for two-way binding.'
+            },
+            enableDate: {
+                kind: 'boolean',
+                default: false,
+                description: 'Allow picking a calendar date (the YYYY-MM-DD part).'
+            },
+            enableTime: {
+                kind: 'boolean',
+                default: false,
+                description: 'Allow picking a time of day (the HH:MM part).'
+            },
+            label: {
+                kind: 'string',
+                dynamic: true,
+                description: 'The field label.'
+            },
+            min: {
+                kind: 'string',
+                dynamic: true,
+                description: 'Minimum allowed value, ISO 8601. The DATE part is enforced; a TIME bound is ' +
+                    'enforced only when the bound is time-only (the time part of a date-time bound ' +
+                    'is not enforced).'
+            },
+            max: {
+                kind: 'string',
+                dynamic: true,
+                description: 'Maximum allowed value, ISO 8601. The DATE part is enforced; a TIME bound is ' +
+                    'enforced only when the bound is time-only (the time part of a date-time bound ' +
+                    'is not enforced).'
+            }
+        })
     }
 });
 /** Props recognized anywhere but intentionally ignored (validation only, dropped before render). */

package/dist/components/Chat/A2UIView/a2ui-validate.js

@@ -390,6 +390,17 @@ function validateComponent(surface, raw, envelopeIndex, compIndex, idsSeen) {
             }));
         }
     }
+    if (componentName === 'DateTimeInput') {
+        // Both flags default to false in the spec — a DateTimeInput without either
+        // would have no input UI at all. We read tolerantly (render a date input)
+        // and report loudly so the agent fixes the payload.
+        if (props.get('enableDate') !== true && props.get('enableTime') !== true) {
+            surface.issues.push(issue('warning', A2UI_ISSUE_CODES.DATETIME_NO_MODE, `DateTimeInput "${id}" sets neither enableDate nor enableTime; rendering a date input`, {
+                surfaceId,
+                path: base
+            }));
+        }
+    }
     surface.components.set(id, { id, component: componentName, props, sourceIndex: envelopeIndex });
 }
 // ── Envelope handlers ────────────────────────────────────────────────────────

package/dist/components/Chat/A2UIView/a2ui-view.variants.d.ts

@@ -27,6 +27,12 @@ export declare const a2uiViewVariants: ((props?: {} | undefined) => {
     pending: (props?: ({} & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    pendingSurface: (props?: ({} & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    pendingBar: (props?: ({} & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     column: (props?: ({} & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;

package/dist/components/Chat/A2UIView/a2ui-view.variants.js

@@ -25,6 +25,10 @@ export const a2uiViewVariants = tv({
         errorIcon: 'shrink-0',
         /** Streaming placeholder wrapper for a not-yet-defined reference. */
         pending: 'inline-flex items-center gap-1.5',
+        /** Skeleton shown while streaming before a surface has received its root. */
+        pendingSurface: 'flex min-w-0 flex-col gap-2 rounded-contain border border-border-subtle p-4',
+        /** One shimmering placeholder bar inside the streaming skeleton. */
+        pendingBar: 'h-4 animate-pulse rounded-modify bg-neutral-subtle motion-reduce:animate-none',
         /** Column layout container (flex-col); justify/align appended per instance. */
         column: 'flex min-w-0 flex-col gap-2',
         /** Row layout container (flex-row); justify/align appended per instance. */

package/dist/components/Chat/A2UIView/a2ui.types.d.ts

@@ -79,6 +79,8 @@ export declare const A2UI_ISSUE_CODES: {
     readonly DUPLICATE_ID: "DUPLICATE_ID";
     /** Two `ChoicePicker` options share a `value` — the second is dropped (values must be unique). */
     readonly DUPLICATE_OPTION: "DUPLICATE_OPTION";
+    /** `DateTimeInput` with neither `enableDate` nor `enableTime` — rendered as a date input. */
+    readonly DATETIME_NO_MODE: "DATETIME_NO_MODE";
     /** More surfaces than the engine renders at once — the extra `createSurface` is refused. */
     readonly MAX_SURFACES: "MAX_SURFACES";
     /** A single `updateComponents` exceeds the per-message component cap — the surplus is dropped. */

package/dist/components/Chat/A2UIView/a2ui.types.js

@@ -46,6 +46,8 @@ export const A2UI_ISSUE_CODES = {
     DUPLICATE_ID: 'DUPLICATE_ID',
     /** Two `ChoicePicker` options share a `value` — the second is dropped (values must be unique). */
     DUPLICATE_OPTION: 'DUPLICATE_OPTION',
+    /** `DateTimeInput` with neither `enableDate` nor `enableTime` — rendered as a date input. */
+    DATETIME_NO_MODE: 'DATETIME_NO_MODE',
     /** More surfaces than the engine renders at once — the extra `createSurface` is refused. */
     MAX_SURFACES: 'MAX_SURFACES',
     /** A single `updateComponents` exceeds the per-message component cap — the surplus is dropped. */

package/dist/components/Chat/A2UIView/index.d.ts

@@ -5,8 +5,8 @@ import type { A2UIViewSlots } from './a2ui-view.variants.js';
 /**
  * @description Renders a trusted-catalog A2UI (Agent-to-UI, v0.9.1 `basic`
  * subset) payload into live, interactive Urbicon components. Fail-loud and
- * whitelist-only: only the 12 mapped components and their declared props ever
- * reach the DOM — unknown components/props, prototype-pollution keys and
+ * whitelist-only: only the mapped catalog components and their declared props
+ * ever reach the DOM — unknown components/props, prototype-pollution keys and
  * function-call bindings are rejected, never rendered, and surfaced through
  * `onValidationError` (spec-compatible issues a consumer can relay to the agent
  * as a `VALIDATION_FAILED` error). Inputs are two-way (typing writes into the

package/dist/components/CopyButton/copy-button.variants.d.ts

@@ -1,23 +1,23 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const copyButtonVariants: ((props?: {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-    state?: "error" | "idle" | "copied" | undefined;
+    state?: "copied" | "error" | "idle" | undefined;
 } | undefined) => {
     base: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     icon: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     label: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;