@lostgradient/cinder 0.2.0 → 0.3.0

package/src/components/chat/container/use-chat-virtualizer.svelte.ts

@@ -0,0 +1,328 @@
+import type { Attachment } from 'svelte/attachments';
+import type { VirtualItem } from '../../../_internal/virtual-item.ts';
+
+type ChatScrollBehavior = ScrollBehavior | 'instant';
+
+type ChatScrollToOptions = {
+  align?: 'auto' | 'start' | 'center' | 'end';
+  behavior?: ChatScrollBehavior;
+};
+
+export type ChatVirtualizerOptions = {
+  getScrollElement: () => HTMLElement | null;
+  getCount: () => number;
+  getItemKey: (index: number) => string | number;
+  getEstimatedSize: () => number;
+  getOverscan: () => number;
+  getInitialHeight: () => number;
+  getScrollPaddingStart?: () => number;
+};
+
+export type ChatVirtualWindowInput = {
+  scrollTop: number;
+  containerHeight: number;
+  itemCount: number;
+  itemSize: number;
+  overscan: number;
+};
+
+export type ChatVirtualWindow = {
+  startIndex: number;
+  endIndex: number;
+};
+
+export function calculateChatVirtualWindow(input: ChatVirtualWindowInput): ChatVirtualWindow {
+  const itemCount = Math.max(0, Math.trunc(input.itemCount));
+  if (itemCount === 0) return { startIndex: 0, endIndex: 0 };
+
+  const itemSize = Math.max(1, input.itemSize);
+  const overscan = Math.max(0, Math.trunc(input.overscan));
+  const scrollTop = Math.max(0, input.scrollTop);
+  const containerHeight = Math.max(0, input.containerHeight);
+  const visibleCount = Math.max(1, Math.ceil(containerHeight / itemSize));
+  const maxStartIndex = Math.max(0, itemCount - visibleCount);
+  const startIndex = Math.min(
+    maxStartIndex,
+    Math.max(0, Math.floor(scrollTop / itemSize) - overscan),
+  );
+  const endIndex = Math.min(itemCount, startIndex + visibleCount + overscan * 2);
+
+  return { startIndex, endIndex };
+}
+
+export class ChatVirtualizer {
+  #scrollElement: HTMLElement | null = null;
+  #scrollOffset = $state(0);
+  #measurementVersion = $state(0);
+  #offsetsCache: number[] | null = null;
+  #offsetsCacheCount = -1;
+  #offsetsCacheMeasurementVersion = -1;
+  #measuredSizes = new Map<string | number, number>();
+
+  constructor(readonly options: ChatVirtualizerOptions) {}
+
+  get virtualItems(): VirtualItem[] {
+    return this.#virtualItems();
+  }
+
+  get totalSize(): number {
+    const offsets = this.#offsets();
+    return offsets[offsets.length - 1] ?? 0;
+  }
+
+  get scrollPaddingStart(): number {
+    return this.#scrollPaddingStart();
+  }
+
+  get scrollSize(): number {
+    return this.scrollPaddingStart + this.totalSize;
+  }
+
+  get scrollOffset(): number {
+    return this.#scrollOffset;
+  }
+
+  setScrollElement(element: HTMLElement | null): void {
+    if (this.#scrollElement === element) return;
+
+    this.#scrollElement?.removeEventListener('scroll', this.#handleScroll);
+    this.#scrollElement = element;
+    this.#scrollOffset = element?.scrollTop ?? 0;
+    this.#scrollElement?.addEventListener('scroll', this.#handleScroll, { passive: true });
+  }
+
+  scrollElement: Attachment<HTMLElement> = (node) => {
+    this.setScrollElement(node);
+
+    return () => {
+      if (this.#scrollElement === node) {
+        this.setScrollElement(null);
+      }
+    };
+  };
+
+  measureElement: Attachment<HTMLElement> = (node) => {
+    this.measureElementNode(node);
+    if (typeof ResizeObserver !== 'function') return undefined;
+
+    const resizeObserver = new ResizeObserver(() => {
+      this.measureElementNode(node);
+    });
+    resizeObserver.observe(node);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  };
+
+  measureElementNode(node: HTMLElement | null): void {
+    if (!node) return;
+
+    this.#measureNode(node);
+  }
+
+  syncOptions(): void {
+    const count = this.options.getCount();
+    const currentKeys = new Set<string | number>();
+    for (let index = 0; index < count; index += 1) {
+      currentKeys.add(this.options.getItemKey(index));
+    }
+
+    let changed = false;
+    for (const key of this.#measuredSizes.keys()) {
+      if (!currentKeys.has(key)) {
+        this.#measuredSizes.delete(key);
+        changed = true;
+      }
+    }
+    if (changed) this.#measurementVersion += 1;
+  }
+
+  scrollToIndex(index: number, options: ChatScrollToOptions = { align: 'auto' }): void {
+    const count = this.options.getCount();
+    if (count === 0) return;
+
+    const clampedIndex = Math.max(0, Math.min(Math.trunc(index), count - 1));
+    const offsets = this.#offsets();
+    const itemStart = offsets[clampedIndex] ?? 0;
+    const itemEnd = offsets[clampedIndex + 1] ?? itemStart + this.#estimatedSize();
+    const itemSize = itemEnd - itemStart;
+    const viewportHeight = this.#containerHeight();
+    const paddingStart = this.#scrollPaddingStart();
+    const viewportStart = Math.max(0, this.scrollOffset - paddingStart);
+    const viewportEnd = viewportStart + viewportHeight;
+    let offset = itemStart + paddingStart;
+
+    if (options.align === 'end') {
+      offset = itemEnd + paddingStart - viewportHeight;
+    } else if (options.align === 'center') {
+      offset = itemStart + paddingStart - (viewportHeight - itemSize) / 2;
+    } else if (options.align === 'auto') {
+      if (itemStart >= viewportStart && itemEnd <= viewportEnd) return;
+      offset =
+        itemStart < viewportStart
+          ? itemStart + paddingStart
+          : itemEnd + paddingStart - viewportHeight;
+    }
+
+    this.scrollToOffset(offset, options);
+  }
+
+  getVirtualItem(index: number): VirtualItem | null {
+    const count = this.options.getCount();
+    if (count === 0) return null;
+
+    const clampedIndex = Math.max(0, Math.min(Math.trunc(index), count - 1));
+    return this.#virtualItemAt(clampedIndex, this.#offsets());
+  }
+
+  scrollToOffset(offset: number, options?: ChatScrollToOptions): void {
+    const element = this.#getScrollElement();
+    const maximumOffset = Math.max(0, this.scrollSize - this.#containerHeight());
+    const top = Math.min(maximumOffset, Math.max(0, offset));
+    this.#scrollOffset = top;
+
+    if (element) {
+      const behavior = options?.behavior === 'instant' ? 'auto' : options?.behavior;
+      if (typeof element.scrollTo === 'function' && behavior && behavior !== 'auto') {
+        element.scrollTo({ top, behavior });
+        return;
+      }
+      element.scrollTop = top;
+      return;
+    }
+  }
+
+  #handleScroll = (): void => {
+    this.#scrollOffset = this.#scrollElement?.scrollTop ?? 0;
+  };
+
+  #getScrollElement(): HTMLElement | null {
+    return this.#scrollElement ?? this.options.getScrollElement();
+  }
+
+  #containerHeight(): number {
+    const element = this.#getScrollElement();
+    return element?.clientHeight || this.options.getInitialHeight();
+  }
+
+  #scrollPaddingStart(): number {
+    return Math.max(0, this.options.getScrollPaddingStart?.() ?? 0);
+  }
+
+  #estimatedSize(): number {
+    return Math.max(1, this.options.getEstimatedSize());
+  }
+
+  #itemSize(index: number): number {
+    const key = this.options.getItemKey(index);
+    return this.#measuredSizes.get(key) ?? this.#estimatedSize();
+  }
+
+  #offsets(): number[] {
+    const count = this.options.getCount();
+    const measurementVersion = this.#measurementVersion;
+    if (
+      this.#offsetsCache &&
+      this.#offsetsCacheCount === count &&
+      this.#offsetsCacheMeasurementVersion === measurementVersion
+    ) {
+      return this.#offsetsCache;
+    }
+
+    const offsets = Array.from<number>({ length: count + 1 });
+    let offset = 0;
+    offsets[0] = 0;
+
+    for (let index = 0; index < count; index += 1) {
+      offset += this.#itemSize(index);
+      offsets[index + 1] = offset;
+    }
+
+    this.#offsetsCache = offsets;
+    this.#offsetsCacheCount = count;
+    this.#offsetsCacheMeasurementVersion = measurementVersion;
+    return offsets;
+  }
+
+  #readElementSize(node: HTMLElement): number {
+    const rectHeight = node.getBoundingClientRect().height;
+    return Math.ceil(rectHeight || node.scrollHeight || node.offsetHeight || 0);
+  }
+
+  #measureNode(node: HTMLElement): void {
+    const index = Number(node.dataset['cinderVirtualIndex']);
+    if (!Number.isInteger(index) || index < 0 || index >= this.options.getCount()) return;
+
+    const measuredSize = this.#readElementSize(node);
+    if (measuredSize <= 0) return;
+
+    const key = this.options.getItemKey(index);
+    if (this.#measuredSizes.get(key) === measuredSize) return;
+
+    this.#measuredSizes.set(key, measuredSize);
+    this.#measurementVersion += 1;
+  }
+
+  #startIndex(offsets: readonly number[], scrollTop: number): number {
+    const count = Math.max(0, offsets.length - 1);
+    let low = 0;
+    let high = count;
+    while (low < high) {
+      const mid = Math.floor((low + high) / 2);
+      if ((offsets[mid + 1] ?? 0) <= scrollTop) {
+        low = mid + 1;
+      } else {
+        high = mid;
+      }
+    }
+    return low;
+  }
+
+  #endIndex(offsets: readonly number[], viewportEnd: number): number {
+    const count = Math.max(0, offsets.length - 1);
+    let low = 0;
+    let high = count;
+    while (low < high) {
+      const mid = Math.floor((low + high) / 2);
+      if ((offsets[mid] ?? 0) < viewportEnd) {
+        low = mid + 1;
+      } else {
+        high = mid;
+      }
+    }
+    return low;
+  }
+
+  #virtualItemAt(index: number, offsets: readonly number[]): VirtualItem {
+    const start = offsets[index] ?? 0;
+    const end = offsets[index + 1] ?? start + this.#estimatedSize();
+    return {
+      key: this.options.getItemKey(index),
+      index,
+      start,
+      end,
+      size: end - start,
+      lane: 0,
+    };
+  }
+
+  #virtualItems(): VirtualItem[] {
+    const count = this.options.getCount();
+    if (count === 0) return [];
+
+    const offsets = this.#offsets();
+    const overscan = Math.max(0, Math.trunc(this.options.getOverscan()));
+    const scrollTop = Math.max(0, this.scrollOffset - this.#scrollPaddingStart());
+    const viewportEnd = scrollTop + Math.max(0, this.#containerHeight());
+    const visibleStartIndex = this.#startIndex(offsets, scrollTop);
+    const visibleEndIndex = Math.max(visibleStartIndex + 1, this.#endIndex(offsets, viewportEnd));
+    const startIndex = Math.max(0, visibleStartIndex - overscan);
+    const endIndex = Math.min(count, visibleEndIndex + overscan);
+
+    return Array.from({ length: endIndex - startIndex }, (_, offset) => {
+      const index = startIndex + offset;
+      return this.#virtualItemAt(index, offsets);
+    });
+  }
+}

package/src/components/chat/index.ts

@@ -12,9 +12,18 @@
 import Chat from './chat.svelte';
 
 export default Chat;
-export type { ChatProps } from './chat.types.ts';
+export type { ChatProps, ReadReceipt, TypingParticipant } from './chat.types.ts';
 export { Chat };
 
+// Adapter seam — the optional event/transport boundary around <Chat>. Type-only.
+export type {
+  ChatAdapter,
+  ChatAdapterErrorEvent,
+  ChatCommand,
+  ChatPushHandlers,
+  ChatReadReceiptEvent,
+} from './adapter';
+
 // Conversation builders — an ergonomic, immutable way to construct the
 // ConversationHistory Chat renders, for apps without their own conversation state.
 export {

package/src/components/chat/message/chat-message-parts-renderer.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import {
+    toRenderUnits,
+    type BodyMessagePart,
+    type ChatMessagePartsRendererProps,
+  } from './chat-message-parts.ts';
+  import MarkdownPart from './parts/markdown-part.svelte';
+  import ToolCallPart from './parts/tool-call-part.svelte';
+  import ToolResultPart from './parts/tool-result-part.svelte';
+  import ToolApprovalPart from './parts/tool-approval-part.svelte';
+  import ReasoningPart from './parts/reasoning-part.svelte';
+  import StepPart from './parts/step-part.svelte';
+  import SuggestionPart from './parts/suggestion-part.svelte';
+  import ImagePart from './parts/image-part.svelte';
+
+  let {
+    parts,
+    messagePart,
+    expanded = false,
+    ontoggle,
+    onapprove,
+    ondeny,
+    reasoningExpanded = false,
+    onreasoning,
+    onsuggestionselect,
+  }: ChatMessagePartsRendererProps = $props();
+
+  const units = $derived(toRenderUnits(parts));
+
+  // APG toolbar roving-tabindex for suggestion chips. `activeIndex` tracks the
+  // chip that holds tabindex=0. ArrowRight/ArrowLeft move focus (wrapping);
+  // Home/End jump to first/last. Tab and all other keys pass through.
+  let activeIndex = $state(0);
+
+  // The chip count can shrink between renders (a new assistant turn with fewer
+  // suggestions, or streaming). A raw `activeIndex` left beyond a toolbar's range
+  // would leave NO chip with tabindex=0, making that toolbar unreachable by Tab.
+  // Clamp against EACH toolbar's own length (not the total across units) so every
+  // rendered toolbar always has exactly one tabindex=0 entry point — floored at 0
+  // for the empty case.
+  function activeChipIndex(count: number): number {
+    return count === 0 ? 0 : Math.min(activeIndex, count - 1);
+  }
+
+  function handleToolbarKeydown(event: KeyboardEvent, toolbar: HTMLElement, count: number): void {
+    if (count === 0) return;
+    const current = Math.min(activeIndex, count - 1);
+    let next = current;
+    if (event.key === 'ArrowRight') {
+      next = (current + 1) % count;
+    } else if (event.key === 'ArrowLeft') {
+      next = (current - 1 + count) % count;
+    } else if (event.key === 'Home') {
+      next = 0;
+    } else if (event.key === 'End') {
+      next = count - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    activeIndex = next;
+    const chips = toolbar.querySelectorAll<HTMLElement>('[data-cinder-suggestion]');
+    chips[next]?.focus();
+  }
+</script>
+
+<!--
+  Built-in renderer for a single body part. A static `{#if part.type === ...}`
+  switch (not a dynamic component map) so the bundler can tree-shake unused part
+  components and TypeScript narrows each branch. Image parts and step parts never
+  reach here — they render through the grouped `{#each}` path below. The trailing
+  `{:else}` is the exhaustiveness sentinel: `part.type` narrows to `never` there,
+  so a later Chat task that widens ChatMessagePart without adding a branch surfaces
+  a visible dev marker in the DOM rather than silently rendering nothing.
+-->
+{#snippet renderDefault(part: BodyMessagePart)}
+  {#if part.type === 'markdown'}
+    <MarkdownPart {part} />
+  {:else if part.type === 'tool-call'}
+    <ToolCallPart {part} {expanded} {ontoggle} />
+  {:else if part.type === 'tool-result'}
+    <ToolResultPart {part} />
+  {:else if part.type === 'tool-approval'}
+    <ToolApprovalPart {part} {onapprove} {ondeny} />
+  {:else if part.type === 'reasoning'}
+    <ReasoningPart {part} expanded={reasoningExpanded} ontoggle={onreasoning} />
+  {:else}
+    <!-- Unhandled part type — a new ChatMessagePart variant was added without a
+         renderer branch. `part` narrows to `never` here, so svelte-check flags
+         the unreachable branch when the union widens, and this sentinel makes
+         the omission visible in the DOM. -->
+    <span data-cinder-unhandled-part aria-hidden="true"></span>
+  {/if}
+{/snippet}
+
+{#each units as unit (unit.key)}
+  {#if unit.kind === 'images'}
+    <ImagePart parts={unit.images} />
+  {:else if unit.kind === 'steps'}
+    <!-- Step parts are grouped and wrapped in a single <ol> stepper. -->
+    <ol class="chat-step-list" aria-label="Steps">
+      {#each unit.steps as step (step.key)}
+        <StepPart part={step} />
+      {/each}
+    </ol>
+  {:else if unit.kind === 'suggestions'}
+    <!-- Suggestion chips are grouped into a single toolbar. APG toolbar pattern:
+         Tab enters → active chip (tabindex=0); Left/Right arrows move focus
+         within (roving tabindex); Tab exits. Home/End jump to first/last.
+         [data-cinder-suggested-replies] is the selector used by useChatKeyboardNav
+         to suppress message ArrowUp/ArrowDown while focus is inside here. -->
+    <div
+      class="chat-suggestions"
+      role="toolbar"
+      aria-label="Suggested replies"
+      data-cinder-suggested-replies
+      onkeydown={(event) => {
+        handleToolbarKeydown(event, event.currentTarget as HTMLElement, unit.suggestions.length);
+      }}
+    >
+      {#each unit.suggestions as suggestion, index (suggestion.key)}
+        <SuggestionPart
+          part={suggestion}
+          {onsuggestionselect}
+          tabindex={index === activeChipIndex(unit.suggestions.length) ? 0 : -1}
+        />
+      {/each}
+    </div>
+  {:else if messagePart}
+    {@render messagePart(unit.part, renderDefault)}
+  {:else}
+    {@render renderDefault(unit.part)}
+  {/if}
+{/each}
+
+<style>
+  .chat-step-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .chat-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+    padding-block-start: var(--cinder-space-2);
+  }
+</style>

package/src/components/chat/message/chat-message-parts.ts

@@ -0,0 +1,163 @@
+/**
+ * Plain-TS support module for the message parts renderer.
+ *
+ * Types and the pure `toRenderUnits` grouping live here (not in the `.svelte`
+ * file) so they are importable under plain `tsc`/`svelte-check` — symbols
+ * exported from a `.svelte` `<script module>` are not reliably resolvable
+ * outside the Svelte language service.
+ */
+
+import type { Snippet } from 'svelte';
+
+import type {
+  ChatMessagePart,
+  ImageMessagePart,
+  StepMessagePart,
+  SuggestionMessagePart,
+} from '../utilities/types.ts';
+
+/**
+ * A body part — every renderable part EXCEPT image, step, and suggestion.
+ * Image parts render through the grouped attachment path (the grid lays out
+ * by total count). Step parts are grouped into the stepper render unit and
+ * bypass the per-part override entirely — they never reach `messagePart` or
+ * `renderDefault`. Suggestion parts render through the grouped `suggestions`
+ * toolbar path so all chips appear inside a single `role="toolbar"` wrapper.
+ * None of these flow through the per-part override; the override's type
+ * excludes them so a consumer can't write dead branches for them.
+ */
+export type BodyMessagePart = Exclude<
+  ChatMessagePart,
+  ImageMessagePart | StepMessagePart | SuggestionMessagePart
+>;
+
+/**
+ * Per-part override snippet. Inversion of control: the consumer receives the
+ * part AND a `renderDefault` snippet, and decides whether to render its own
+ * markup or delegate to the built-in renderer by calling
+ * `{@render renderDefault(part)}`. There is no "render empty to fall through"
+ * magic — Svelte snippets render DOM and have no inspectable return value, so
+ * the fallback is always explicit and SSR-safe.
+ *
+ * The part is a {@link BodyMessagePart} (image parts are excluded — see above),
+ * so the type matches what the override can actually intercept.
+ */
+export type MessagePartOverride = Snippet<
+  [part: BodyMessagePart, renderDefault: Snippet<[BodyMessagePart]>]
+>;
+
+/** Props for {@link ChatMessagePartsRenderer}. */
+export type ChatMessagePartsRendererProps = {
+  /** The ordered render parts for one message. */
+  parts: ChatMessagePart[];
+  /**
+   * Optional per-part override. Applies to body parts (markdown, tool-call,
+   * tool-result, tool-approval, reasoning). Image parts, step parts, and
+   * suggestion parts always render through the grouped default paths; they are
+   * excluded from this override's type and never flow through it. In
+   * particular, step parts are accumulated into the stepper render unit and
+   * bypass this override entirely — a consumer cannot intercept individual
+   * step parts via `messagePart`.
+   */
+  messagePart?: MessagePartOverride | undefined;
+  /** Disclosure state for tool-call parts. Owned by the message. */
+  expanded?: boolean;
+  /** Called when a tool-call part's disclosure toggle is activated. */
+  ontoggle?: (() => void) | undefined;
+  /** Called when the user approves an action-required tool call. */
+  onapprove?: ((toolCallId: string) => void) | undefined;
+  /** Called when the user denies an action-required tool call. */
+  ondeny?: ((toolCallId: string) => void) | undefined;
+  /** Whether the reasoning block for this message is expanded. */
+  reasoningExpanded?: boolean | undefined;
+  /** Called when the reasoning disclosure toggle is activated. */
+  onreasoning?: (() => void) | undefined;
+  /** Called when the user selects a suggestion chip. */
+  onsuggestionselect?: ((label: string) => void) | undefined;
+};
+
+/** A renderable unit: a single body part, a contiguous run of image parts, a group of step parts, or a group of suggestion chips. */
+export type RenderUnit =
+  | {
+      kind: 'part';
+      part: Exclude<ChatMessagePart, ImageMessagePart | StepMessagePart | SuggestionMessagePart>;
+      key: string;
+    }
+  | { kind: 'images'; images: ImageMessagePart[]; key: string }
+  | { kind: 'steps'; steps: StepMessagePart[]; key: string }
+  | { kind: 'suggestions'; suggestions: SuggestionMessagePart[]; key: string };
+
+/**
+ * Collapses a parts array into render units, grouping each maximal run of
+ * adjacent image parts into one unit, each maximal run of adjacent step parts
+ * into one stepper unit, and each maximal run of adjacent suggestion parts into
+ * one toolbar unit. Keeps non-image, non-step, non-suggestion parts individual
+ * so the per-part override applies to them; groups images so the attachment
+ * grid lays out by total count; groups steps so they render inside a single
+ * `<ol>`; groups suggestions so they render inside a single `role="toolbar"`.
+ *
+ * @param parts - The ordered render parts for one message
+ * @returns Render units in order, with image, step, and suggestion runs collapsed
+ */
+export function toRenderUnits(parts: ChatMessagePart[]): RenderUnit[] {
+  const units: RenderUnit[] = [];
+  let imageRun: ImageMessagePart[] = [];
+  let stepRun: StepMessagePart[] = [];
+  let suggestionRun: SuggestionMessagePart[] = [];
+
+  const flushImages = (): void => {
+    if (imageRun.length > 0) {
+      // The run's key is its first image key — stable as long as the run's
+      // leading image keeps identity, which it does (index-based keys).
+      units.push({ kind: 'images', images: imageRun, key: `images:${imageRun[0]!.key}` });
+      imageRun = [];
+    }
+  };
+
+  const flushSteps = (): void => {
+    if (stepRun.length > 0) {
+      units.push({ kind: 'steps', steps: stepRun, key: `steps:${stepRun[0]!.key}` });
+      stepRun = [];
+    }
+  };
+
+  const flushSuggestions = (): void => {
+    if (suggestionRun.length > 0) {
+      units.push({
+        kind: 'suggestions',
+        suggestions: suggestionRun,
+        key: `suggestions:${suggestionRun[0]!.key}`,
+      });
+      suggestionRun = [];
+    }
+  };
+
+  for (const part of parts) {
+    if (part.type === 'image') {
+      flushSteps();
+      flushSuggestions();
+      imageRun.push(part);
+      continue;
+    }
+    if (part.type === 'step') {
+      flushImages();
+      flushSuggestions();
+      stepRun.push(part);
+      continue;
+    }
+    if (part.type === 'suggestion') {
+      flushImages();
+      flushSteps();
+      suggestionRun.push(part);
+      continue;
+    }
+    flushImages();
+    flushSteps();
+    flushSuggestions();
+    units.push({ kind: 'part', part, key: part.key });
+  }
+  flushImages();
+  flushSteps();
+  flushSuggestions();
+  return units;
+}