@kitnai/chat 0.3.1 → 0.5.0

package/src/elements/markdown.tsx

@@ -0,0 +1,38 @@
+import { defineKitnElement } from './define';
+import { Markdown } from '../components/markdown';
+import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
+
+interface Props extends Record<string, unknown> {
+  /** The markdown source to render. */
+  content: string;
+  /** Text/markdown sizing. */
+  proseSize?: ProseSize;
+  /** Shiki theme for fenced code blocks. */
+  codeTheme?: string;
+  /** Disable syntax highlighting (no Shiki loads). */
+  codeHighlight?: boolean;
+}
+
+/**
+ * `<kitn-markdown>` — renders markdown (with fenced-code syntax highlighting) as
+ * a standalone element. Content via the `content` property; sizing/highlighting
+ * via attributes.
+ */
+defineKitnElement<Props>('kitn-markdown', {
+  content: '',
+  proseSize: 'sm',
+  codeTheme: 'github-dark-dimmed',
+  codeHighlight: true,
+}, (props, { flag }) => {
+  const outer = useChatConfig();
+  return (
+    <ChatConfig
+      proseSize={props.proseSize}
+      codeTheme={props.codeTheme}
+      codeHighlight={flag('codeHighlight')}
+      portalMount={outer.portalMount()}
+    >
+      <Markdown content={props.content} />
+    </ChatConfig>
+  );
+});

package/src/elements/message-skills.tsx

@@ -0,0 +1,22 @@
+import { defineKitnElement } from './define';
+import { MessageSkills } from '../components/message-skills';
+
+interface Skill {
+  /** Stable identifier for the skill. */
+  id: string;
+  /** Human-readable skill name shown on the badge. */
+  name: string;
+}
+
+interface Props extends Record<string, unknown> {
+  /** The active skills to badge. Set as a JS property. */
+  skills: Skill[];
+}
+
+/**
+ * `<kitn-message-skills>` — badges showing which skills were active for a
+ * message. Data via the `skills` property.
+ */
+defineKitnElement<Props>('kitn-message-skills', {
+  skills: [],
+}, (props) => <MessageSkills skills={props.skills} />);

package/src/elements/message.tsx

@@ -0,0 +1,125 @@
+import { For, Show, type Component } from 'solid-js';
+import { defineKitnElement } from './define';
+import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
+import { Message, MessageContent, MessageActions } from '../components/message';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
+import { Tool } from '../components/tool';
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo } from '../components/attachments';
+import { Button } from '../ui/button';
+import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil } from 'lucide-solid';
+import type { ChatMessage, ChatMessageAction } from './chat-types';
+
+interface Props extends Record<string, unknown> {
+  /** The full message object. Set as a JS property. */
+  message?: ChatMessage;
+  /** Convenience for simple cases when not passing a `message` object. */
+  role?: 'user' | 'assistant';
+  /** Convenience content (used when `message` is not set). */
+  content?: string;
+  /** Force markdown on/off. Defaults to on for assistant, off for user. */
+  markdown?: boolean;
+  /** Text/markdown sizing for the message body. */
+  proseSize?: ProseSize;
+  /** Shiki theme name used for fenced code blocks in the content. */
+  codeTheme?: string;
+  /** Disable syntax highlighting for code blocks (no Shiki loads). */
+  codeHighlight?: boolean;
+}
+
+/** Events fired by `<kitn-message>`. */
+interface Events {
+  /** An action button was clicked. */
+  messageaction: { messageId: string; action: ChatMessageAction };
+}
+
+const ACTION_LABEL: Record<ChatMessageAction, string> = {
+  copy: 'Copy', like: 'Like', dislike: 'Dislike', regenerate: 'Regenerate', edit: 'Edit',
+};
+const ACTION_ICON: Record<ChatMessageAction, Component<{ class?: string }>> = {
+  copy: Copy, like: ThumbsUp, dislike: ThumbsDown, regenerate: RefreshCw, edit: Pencil,
+};
+
+/**
+ * `<kitn-message>` — a single message row: markdown/plain content, reasoning,
+ * tool calls, attachments, and action buttons, rendered from one `message`
+ * object (the same shape `<kitn-chat>` uses per message). The keystone of the
+ * "compose your own message list" pattern. Emits `messageaction`.
+ */
+defineKitnElement<Props, Events>('kitn-message', {
+  message: undefined,
+  role: 'assistant',
+  content: undefined,
+  markdown: undefined,
+  proseSize: 'sm',
+  codeTheme: 'github-dark-dimmed',
+  codeHighlight: true,
+}, (props, { dispatch, flag, element }) => {
+  const outer = useChatConfig();
+  const msg = (): ChatMessage =>
+    props.message ?? { id: 'message', role: props.role ?? 'assistant', content: props.content ?? '' };
+  const isUser = () => msg().role === 'user';
+  // markdown: explicit prop/attribute wins; otherwise default by role.
+  const markdownExplicit = () =>
+    element.hasAttribute('markdown') || props.markdown === true || props.markdown === false;
+  const useMarkdown = () => (markdownExplicit() ? flag('markdown') : !isUser());
+
+  return (
+    <ChatConfig
+      proseSize={props.proseSize}
+      codeTheme={props.codeTheme}
+      codeHighlight={flag('codeHighlight')}
+      portalMount={outer.portalMount()}
+    >
+      <Message class={isUser() ? 'flex-col items-end' : 'flex-col items-start'}>
+        <Show when={msg().reasoning}>
+          <Reasoning class="mb-2 w-full">
+            <ReasoningTrigger>{msg().reasoning!.label ?? 'Reasoning'}</ReasoningTrigger>
+            <ReasoningContent markdown>{msg().reasoning!.text}</ReasoningContent>
+          </Reasoning>
+        </Show>
+        <For each={msg().tools ?? []}>
+          {(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}
+        </For>
+        <Show when={msg().attachments?.length}>
+          <Attachments variant="inline" class={isUser() ? 'mb-2 justify-end' : 'mb-2'}>
+            <For each={msg().attachments!}>
+              {(att) => (
+                <Attachment data={att}>
+                  <AttachmentPreview />
+                  <AttachmentInfo />
+                </Attachment>
+              )}
+            </For>
+          </Attachments>
+        </Show>
+        <MessageContent
+          markdown={useMarkdown()}
+          class={isUser()
+            ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
+            : 'bg-transparent p-0'}
+        >
+          {msg().content}
+        </MessageContent>
+        <Show when={msg().actions?.length}>
+          <MessageActions class="mt-1 flex gap-0">
+            <For each={msg().actions!}>
+              {(a) => (
+                <Button
+                  variant="ghost" size="icon-sm" class="rounded-full"
+                  data-action={a}
+                  aria-label={ACTION_LABEL[a]}
+                  onClick={() => dispatch('messageaction', { messageId: msg().id, action: a })}
+                >
+                  {(() => {
+                    const Icon = ACTION_ICON[a];
+                    return <Icon class="size-3.5" />;
+                  })()}
+                </Button>
+              )}
+            </For>
+          </MessageActions>
+        </Show>
+      </Message>
+    </ChatConfig>
+  );
+});

package/src/elements/model-switcher.tsx

@@ -0,0 +1,35 @@
+import { defineKitnElement } from './define';
+import { ModelSwitcher } from '../components/model-switcher';
+import type { ModelOption } from '../types';
+
+interface Props extends Record<string, unknown> {
+  /** The selectable models. Set as a JS property (array). */
+  models: ModelOption[];
+  /** The currently-selected model id. Defaults to the first model. */
+  currentModel?: string;
+}
+
+/** Events fired by `<kitn-model-switcher>`. */
+interface Events {
+  /** A model was selected. */
+  modelchange: { modelId: string };
+}
+
+/**
+ * `<kitn-model-switcher>` — an event-emitting leaf element. Data in via the
+ * `models` property, selection out via a `modelchange` event. Mirrors the
+ * header switcher inside `<kitn-chat>` as a standalone, composable piece.
+ *
+ * Note: like the underlying primitive, this only renders when more than one
+ * model is provided.
+ */
+defineKitnElement<Props, Events>('kitn-model-switcher', {
+  models: [],
+  currentModel: undefined,
+}, (props, { dispatch }) => (
+  <ModelSwitcher
+    models={props.models}
+    currentModelId={props.currentModel ?? props.models[0]?.id ?? ''}
+    onModelChange={(modelId) => dispatch('modelchange', { modelId })}
+  />
+));

package/src/elements/prompt-input.tsx

@@ -1,25 +1,84 @@
-import { createSignal } from 'solid-js';
+import { createEffect, createSignal } from 'solid-js';
 import { defineKitnElement } from './define';
 import { DefaultPromptInput } from './default-input';
 import type { AttachmentData } from '../components/attachments';
+import type { SlashCommandItem } from '../components/slash-command';
 
 interface Props extends Record<string, unknown> {
+  /** Controlled value of the input. When set, the host owns the text and must
+   *  update it on `valuechange`; leave unset for uncontrolled behavior. */
   value?: string;
+  /** Placeholder text shown in the empty input. */
   placeholder?: string;
+  /** Disable the input and submit button entirely (non-interactive). */
   disabled?: boolean;
+  /** Show the loading/streaming state and block submit (use while awaiting a
+   *  reply). */
   loading?: boolean;
+  /** Starter prompts shown above the input. Clicking one follows
+   *  `suggestionMode`. Set as a JS property. */
   suggestions?: string[];
+  /** What clicking a suggestion does: `'submit'` (default) sends it immediately
+   *  as if typed and submitted; `'fill'` just places it in the input. */
+  suggestionMode?: 'submit' | 'fill';
+  /** Slash commands — when set, typing `/` opens the command palette. Set as a
+   *  JS property. */
+  slashCommands?: SlashCommandItem[];
+  /** Command ids to highlight as active. */
+  slashActiveIds?: string[];
+  /** Single-line palette rows. */
+  slashCompact?: boolean;
+  /** Show a Search (Globe) button in the left toolbar; clicking it fires a
+   *  `search` event. */
+  search?: boolean;
+  /** Show a Voice (Mic) button in the left toolbar; clicking it fires a `voice`
+   *  event. */
+  voice?: boolean;
+  /** Attachments to seed the input with (so a consumer can pre-populate staged
+   *  files without an upload). Set as a JS property; the element then manages its
+   *  own attachment state from there (add via the paperclip, remove per chip). */
+  attachments?: AttachmentData[];
 }
 
-defineKitnElement<Props>('kitn-prompt-input', {
+/** Events fired by `<kitn-prompt-input>`. */
+interface Events {
+  /** The user submitted the prompt (Enter or send button) with its attachments. */
+  submit: { value: string; attachments: AttachmentData[] };
+  /** The input text changed (fires on every keystroke). */
+  valuechange: { value: string };
+  /** A suggestion was clicked while `suggestion-mode="fill"`. */
+  suggestionclick: { value: string };
+  /** A slash command was chosen from the palette. */
+  slashselect: { command: SlashCommandItem };
+  /** The Search (Globe) toolbar button was clicked. */
+  search: undefined;
+  /** The Voice (Mic) toolbar button was clicked. */
+  voice: undefined;
+}
+
+defineKitnElement<Props, Events>('kitn-prompt-input', {
   value: undefined,
   placeholder: 'Send a message...',
   disabled: false,
   loading: false,
   suggestions: undefined,
-}, (props, { dispatch }) => {
+  suggestionMode: 'submit',
+  slashCommands: undefined,
+  slashActiveIds: undefined,
+  slashCompact: false,
+  search: false,
+  voice: false,
+  attachments: undefined,
+}, (props, { dispatch, flag }) => {
   const [internal, setInternal] = createSignal(props.value ?? '');
-  const [attachments, setAttachments] = createSignal<AttachmentData[]>([]);
+  // Seed staged attachments from the `attachments` property; the element manages
+  // its own state from there (paperclip adds, per-chip remove deletes).
+  const [attachments, setAttachments] = createSignal<AttachmentData[]>(props.attachments ?? []);
+  // Re-seed when the `attachments` property is (re)assigned by the consumer
+  // (e.g. set via a `ref` after mount). Subsequent in-element edits stay local.
+  createEffect(() => {
+    if (props.attachments) setAttachments(props.attachments);
+  });
   const current = () => props.value ?? internal();
 
   const handleChange = (v: string) => { setInternal(v); dispatch('valuechange', { value: v }); };
@@ -27,20 +86,37 @@ defineKitnElement<Props>('kitn-prompt-input', {
     dispatch('submit', { value: current(), attachments: attachments() });
     setAttachments([]);
   };
-  const handleSuggestionClick = (v: string) => { handleChange(v); dispatch('suggestionclick', { value: v }); };
+  const handleSuggestionClick = (v: string) => {
+    if ((props.suggestionMode ?? 'submit') === 'fill') {
+      handleChange(v);
+      dispatch('suggestionclick', { value: v });
+    } else {
+      // Default: behave as if the user typed the suggestion and pressed submit.
+      dispatch('submit', { value: v, attachments: attachments() });
+      setAttachments([]);
+    }
+  };
 
   return (
     <DefaultPromptInput
       value={current()}
       placeholder={props.placeholder}
-      disabled={props.disabled}
-      loading={props.loading}
+      disabled={flag('disabled')}
+      loading={flag('loading')}
       suggestions={props.suggestions}
       attachments={attachments()}
+      slashCommands={props.slashCommands}
+      slashActiveIds={props.slashActiveIds}
+      slashCompact={flag('slashCompact')}
+      search={flag('search')}
+      voice={flag('voice')}
       onValueChange={handleChange}
       onSubmit={handleSubmit}
       onSuggestionClick={handleSuggestionClick}
       onAttachmentsChange={setAttachments}
+      onSearch={() => dispatch('search')}
+      onVoice={() => dispatch('voice')}
+      onSlashSelect={(command) => dispatch('slashselect', { command })}
     />
   );
 });

package/src/elements/prompt-suggestions.tsx

@@ -0,0 +1,58 @@
+import { For } from 'solid-js';
+import { defineKitnElement } from './define';
+import { PromptSuggestion } from '../components/prompt-suggestion';
+
+type Item = string | { label: string; value?: string };
+
+interface Props extends Record<string, unknown> {
+  /** The suggestions. Strings, or `{ label, value }` when the displayed text
+   *  and the emitted value differ. Set as a JS property. */
+  suggestions: Item[];
+  /** Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled). */
+  variant?: 'outline' | 'ghost' | 'default';
+  /** Size preset for each chip. Defaults to the pill default (`'lg'`); pass
+   *  `'sm'` for smaller pills (or `'md'`). */
+  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  /** Full-width left-aligned rows instead of pills. */
+  block?: boolean;
+  /** Substring to highlight within each suggestion. */
+  highlight?: string;
+}
+
+/** Events fired by `<kitn-prompt-suggestions>`. */
+interface Events {
+  /** A suggestion was clicked. */
+  select: { value: string };
+}
+
+const labelOf = (s: Item) => (typeof s === 'string' ? s : s.label);
+const valueOf = (s: Item) => (typeof s === 'string' ? s : s.value ?? s.label);
+
+/**
+ * `<kitn-prompt-suggestions>` — a row/list of suggestion chips. Data via the
+ * `suggestions` property; `variant`/`block`/`highlight` attributes; emits
+ * `select`.
+ */
+defineKitnElement<Props, Events>('kitn-prompt-suggestions', {
+  suggestions: [],
+  variant: 'outline',
+  size: undefined,
+  block: false,
+  highlight: undefined,
+}, (props, { dispatch, flag }) => (
+  <div class={flag('block') ? 'flex flex-col gap-2' : 'flex flex-wrap gap-2'}>
+    <For each={props.suggestions}>
+      {(s) => (
+        <PromptSuggestion
+          variant={props.variant}
+          size={props.size}
+          block={flag('block')}
+          highlight={props.highlight}
+          onClick={() => dispatch('select', { value: valueOf(s) })}
+        >
+          {labelOf(s)}
+        </PromptSuggestion>
+      )}
+    </For>
+  </div>
+));

package/src/elements/reasoning.tsx

@@ -0,0 +1,50 @@
+import { defineKitnElement } from './define';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
+import { ChatConfig, useChatConfig } from '../primitives/chat-config';
+
+interface Props extends Record<string, unknown> {
+  /** The reasoning text to display. */
+  text: string;
+  /** Trigger label. */
+  label?: string;
+  /** Controlled open state — set as a property (`el.open = true`). Omit for
+   *  uncontrolled (the trigger toggles it). */
+  open?: boolean;
+  /** While true, auto-expands (and re-collapses when it flips false). */
+  streaming?: boolean;
+  /** Render `text` as markdown. */
+  markdown?: boolean;
+}
+
+/** Events fired by `<kitn-reasoning>`. */
+interface Events {
+  /** Open state changed (via the trigger or streaming auto-open). */
+  openchange: { open: boolean };
+}
+
+/**
+ * `<kitn-reasoning>` — a collapsible reasoning/thinking block that auto-expands
+ * while `streaming`. Text via the `text` property; `markdown`/`streaming` flags;
+ * `open` is a controlled property; emits `openchange`.
+ */
+defineKitnElement<Props, Events>('kitn-reasoning', {
+  text: '',
+  label: 'Reasoning',
+  open: undefined,
+  streaming: false,
+  markdown: true,
+}, (props, { dispatch, flag }) => {
+  const outer = useChatConfig();
+  return (
+    <ChatConfig portalMount={outer.portalMount()}>
+      <Reasoning
+        open={props.open}
+        isStreaming={flag('streaming')}
+        onOpenChange={(open) => dispatch('openchange', { open })}
+      >
+        <ReasoningTrigger>{props.label}</ReasoningTrigger>
+        <ReasoningContent markdown={flag('markdown')}>{props.text}</ReasoningContent>
+      </Reasoning>
+    </ChatConfig>
+  );
+});

package/src/elements/register.ts

@@ -3,6 +3,38 @@
 import './conversation-list';
 import './prompt-input';
 import './chat';
+import './chat-workspace';
+// Composable leaf elements (spike — see docs/handoff + examples/composable)
+import './thinking-bar';
+import './model-switcher';
+import './attachments';
+// Phase 1 — message-rendering core
+import './message';
+import './markdown';
+import './code-block';
+import './reasoning';
+import './tool';
+// Phase 2 — header / meta
+import './context-meter';
+import './feedback-bar';
+import './chat-scope-picker';
+// Phase 3 — input ecosystem
+// (NB: SlashCommand is context-bound to PromptInput — it observes the input
+//  value via usePromptInput() — so it is NOT a standalone element. It will fold
+//  into <kitn-prompt-input> as a `slash-commands` property in a later pass.)
+import './prompt-suggestions';
+import './file-upload';
+import './voice-input';
+// Phase 4 — indicators & leaves
+import './loader';
+import './text-shimmer';
+import './image';
+import './checkpoint';
+import './message-skills';
+import './source';
+import './response-stream';
+import './empty';
+import './chain-of-thought';
 
 export type { ChatMessage, ChatMessageAction } from './chat-types';
 export { configureCodeHighlighting, isCodeHighlightingEnabled } from '../primitives/highlighter';

package/src/elements/response-stream.tsx

@@ -0,0 +1,40 @@
+import { defineKitnElement } from './define';
+import { ResponseStream, type Mode } from '../components/response-stream';
+
+interface Props extends Record<string, unknown> {
+  /** Text to stream. A string, or an `AsyncIterable<string>` (set as a JS
+   *  property — async iterables can't be HTML attributes). */
+  text?: string | AsyncIterable<string>;
+  /** Reveal animation. */
+  mode?: Mode;
+  /** Characters/segments per tick. */
+  speed?: number;
+  /** Element tag to render as. */
+  as?: string;
+}
+
+/** Events fired by `<kitn-response-stream>`. */
+interface Events {
+  /** Streaming finished. */
+  complete: void;
+}
+
+/**
+ * `<kitn-response-stream>` — reveals text with a typewriter or fade animation.
+ * Text via the `text` property; `mode`/`speed` attributes; emits `complete`.
+ */
+defineKitnElement<Props, Events>('kitn-response-stream', {
+  text: '',
+  mode: 'typewriter',
+  speed: 20,
+  as: undefined,
+}, (props, { dispatch }) => (
+  <ResponseStream
+    textStream={props.text ?? ''}
+    mode={props.mode}
+    speed={props.speed}
+    as={props.as}
+    class="text-body"
+    onComplete={() => dispatch('complete')}
+  />
+));

package/src/elements/source.tsx

@@ -0,0 +1,67 @@
+import { For, Show } from 'solid-js';
+import { defineKitnElement } from './define';
+import { Source, SourceTrigger, SourceContent, SourceList } from '../components/source';
+
+// --- <kitn-source> — a single citation link with hover preview ---
+
+interface SourceProps extends Record<string, unknown> {
+  /** The URL this citation links to (the domain also seeds the default label/favicon). */
+  href?: string;
+  /** Trigger label (defaults to the domain). */
+  label?: string;
+  /** Hover-card headline. Attribute: `headline` (`title` is avoided — it's a
+   *  global HTML attribute that reflects in a CE constructor and breaks it). */
+  headline?: string;
+  /** Hover-card body text describing the source. */
+  description?: string;
+  /** Show the source's favicon next to the trigger label. */
+  showFavicon?: boolean;
+}
+
+defineKitnElement<SourceProps>('kitn-source', {
+  href: '',
+  label: undefined,
+  headline: '',
+  description: '',
+  showFavicon: false,
+}, (props, { flag }) => (
+  <Show when={props.href}>
+    <Source href={props.href!}>
+      <SourceTrigger label={props.label} showFavicon={flag('showFavicon')} />
+      <SourceContent title={props.headline ?? ''} description={props.description ?? ''} />
+    </Source>
+  </Show>
+));
+
+// --- <kitn-source-list> — a wrapped list of citation links ---
+
+interface SourceItem {
+  href: string;
+  title?: string;
+  description?: string;
+  label?: string;
+  showFavicon?: boolean;
+}
+
+interface SourceListProps extends Record<string, unknown> {
+  /** The sources to render. Set as a JS property. */
+  sources: SourceItem[];
+  /** Show favicons on all items (per-item `showFavicon` overrides). */
+  showFavicon?: boolean;
+}
+
+defineKitnElement<SourceListProps>('kitn-source-list', {
+  sources: [],
+  showFavicon: false,
+}, (props, { flag }) => (
+  <SourceList>
+    <For each={props.sources}>
+      {(s) => (
+        <Source href={s.href}>
+          <SourceTrigger label={s.label} showFavicon={s.showFavicon ?? flag('showFavicon')} />
+          <SourceContent title={s.title ?? ''} description={s.description ?? ''} />
+        </Source>
+      )}
+    </For>
+  </SourceList>
+));

package/src/elements/styles.css

@@ -9,4 +9,18 @@
 @layer base {
   :host { display: block; }
   * { border-color: var(--color-border); }
+
+  /* One token-driven focus ring for EVERY focusable element in the shadow root.
+     Blue by default (via --color-ring), consistent in light + dark, and
+     overridable through --kitn-color-ring. Uses `outline` (not a box-shadow
+     ring) so it never clips on overflow and follows the element's radius;
+     `:focus-visible` so it only appears for keyboard navigation, never on a
+     mouse click. Components that render their own ring set
+     `focus-visible:outline-none` (a utility in a later cascade layer) and win
+     over this — so there's no double ring, just a guaranteed blue fallback for
+     the many controls that have no explicit focus style. */
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
 }

package/src/elements/text-shimmer.tsx

@@ -0,0 +1,28 @@
+import { defineKitnElement } from './define';
+import { TextShimmer } from '../components/text-shimmer';
+
+interface Props extends Record<string, unknown> {
+  /** The text to shimmer. */
+  text?: string;
+  /** Element tag to render as (default `span`). */
+  as?: string;
+  /** Animation duration in seconds. */
+  duration?: number;
+  /** Gradient spread (5–45). */
+  spread?: number;
+}
+
+/**
+ * `<kitn-text-shimmer>` — animated shimmering text. Text via the `text`
+ * attribute; `duration`/`spread` tune the effect.
+ */
+defineKitnElement<Props>('kitn-text-shimmer', {
+  text: '',
+  as: 'span',
+  duration: 4,
+  spread: 20,
+}, (props) => (
+  <TextShimmer as={props.as} duration={props.duration} spread={props.spread} class="text-body">
+    {props.text}
+  </TextShimmer>
+));