@colletdev/svelte 0.1.3

package/src/text.svelte

@@ -0,0 +1,63 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-text> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
+  align?: 'start' | 'center' | 'end';
+  color?: 'primary' | 'inverse' | 'muted';
+  muted?: boolean;
+  strong?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  underlineStrong?: boolean;
+  truncate?: boolean;
+  lineClamp?: number;
+  balance?: boolean;
+  prose?: boolean;
+  elementAs?: string;
+  children?: import('svelte').Snippet;
+  }
+
+  let { id, role, align, color, muted, strong, italic, underline, underlineStrong, truncate, lineClamp, balance, prose, elementAs, children }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (role != null) el.setAttribute('role', String(role));
+    else el.removeAttribute('role');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (align != null) el.setAttribute('align', String(align));
+    else el.removeAttribute('align');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (color != null) el.setAttribute('color', String(color));
+    else el.removeAttribute('color');
+  });
+
+</script>
+
+<cx-text
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  muted={muted || undefined}
+  strong={strong || undefined}
+  italic={italic || undefined}
+  underline={underline || undefined}
+  underline-strong={underlineStrong || undefined}
+  truncate={truncate || undefined}
+  line-clamp={typeof lineClamp === 'object' && lineClamp != null ? JSON.stringify(lineClamp) : lineClamp}
+  balance={balance || undefined}
+  prose={prose || undefined}
+  element-as={typeof elementAs === 'object' && elementAs != null ? JSON.stringify(elementAs) : elementAs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-text>

package/src/text.svelte.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface TextProps {
+  id?: string;
+  role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
+  align?: 'start' | 'center' | 'end';
+  color?: 'primary' | 'inverse' | 'muted';
+  muted?: boolean;
+  strong?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  underlineStrong?: boolean;
+  truncate?: boolean;
+  lineClamp?: number;
+  balance?: boolean;
+  prose?: boolean;
+  elementAs?: string;
+  children?: import('svelte').Snippet;
+}
+
+declare const Text: Component<TextProps, {}>;
+export default Text;

package/src/thinking.svelte

@@ -0,0 +1,30 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-thinking> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  variant?: 'ghost' | 'filled';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  speed?: string;
+  }
+
+  let { id, variant, shape, label, size, speed }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-thinking
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  speed={typeof speed === 'object' && speed != null ? JSON.stringify(speed) : speed}
+/>

package/src/thinking.svelte.d.ts

@@ -0,0 +1,14 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface ThinkingProps {
+  id?: string;
+  variant?: 'ghost' | 'filled';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  speed?: string;
+}
+
+declare const Thinking: Component<ThinkingProps, {}>;
+export default Thinking;

package/src/toast.svelte

@@ -0,0 +1,58 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-toast> -->
+<script lang="ts">
+  import type { DismissDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  title?: string;
+  description?: string;
+  variant?: 'subtle' | 'filled' | 'outline';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showIcon?: boolean;
+  icon?: string;
+  dismissible?: boolean;
+  dismissLabel?: string;
+  duration?: number;
+  onDismiss?: (event: CustomEvent<DismissDetail>) => void;
+  action?: import('svelte').Snippet;
+  }
+
+  let { id, title, description, variant, intent, size, showIcon, icon, dismissible, dismissLabel, duration, onDismiss, action }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (title != null) el.setAttribute('title', String(title));
+    else el.removeAttribute('title');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onDismiss?.(e as CustomEvent);
+    el.addEventListener('cx-dismiss', handler);
+    return () => el.removeEventListener('cx-dismiss', handler);
+  });
+  /** Dismisses the toast with exit animation. */
+  export function dismiss() { (el as any)?.dismiss(); }
+</script>
+
+<cx-toast
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  description={typeof description === 'object' && description != null ? JSON.stringify(description) : description}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  intent={typeof intent === 'object' && intent != null ? JSON.stringify(intent) : intent}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  show-icon={showIcon || undefined}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  dismissible={dismissible || undefined}
+  dismiss-label={typeof dismissLabel === 'object' && dismissLabel != null ? JSON.stringify(dismissLabel) : dismissLabel}
+  duration={typeof duration === 'object' && duration != null ? JSON.stringify(duration) : duration}
+>
+  {#if action}
+    <div slot="action" style="display:contents">{@render action()}</div>
+  {/if}
+</cx-toast>

package/src/toast.svelte.d.ts

@@ -0,0 +1,25 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { DismissDetail } from './types.js';
+
+interface ToastProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  variant?: 'subtle' | 'filled' | 'outline';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showIcon?: boolean;
+  icon?: string;
+  dismissible?: boolean;
+  dismissLabel?: string;
+  duration?: number;
+  onDismiss?: (event: CustomEvent<DismissDetail>) => void;
+  action?: import('svelte').Snippet;
+}
+
+declare const Toast: Component<ToastProps, {
+  /** Dismisses the toast with exit animation. */
+  dismiss(): void;
+}>;
+export default Toast;

package/src/toggle-group.svelte

@@ -0,0 +1,64 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-toggle-group> -->
+<script lang="ts">
+  import type { ToggleDetail, ToggleItem } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  items?: ToggleItem[] | string;
+  variant?: 'outline' | 'ghost' | 'filled';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  mode?: 'single' | 'multiple';
+  orientation?: 'horizontal' | 'vertical';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  /** Controlled pressed item IDs. Pass a single ID or an array. */
+  value?: string | string[];
+  onInput?: (event: CustomEvent) => void;
+  onChange?: (event: CustomEvent<ToggleDetail>) => void;
+  }
+
+  let { id, label, items, variant, shape, mode, orientation, intent, size, disabled, value, onInput, onChange }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (value != null) el.setAttribute('value', String(value));
+    else el.removeAttribute('value');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (items != null) el.setAttribute('items', typeof items === 'object' ? JSON.stringify(items) : String(items));
+    else el.removeAttribute('items');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onInput?.(e as CustomEvent);
+    el.addEventListener('cx-input', handler);
+    return () => el.removeEventListener('cx-input', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+
+</script>
+
+<cx-toggle-group
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  mode={typeof mode === 'object' && mode != null ? JSON.stringify(mode) : mode}
+  orientation={typeof orientation === 'object' && orientation != null ? JSON.stringify(orientation) : orientation}
+  intent={typeof intent === 'object' && intent != null ? JSON.stringify(intent) : intent}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  disabled={disabled || undefined}
+/>

package/src/toggle-group.svelte.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { ToggleDetail, ToggleItem } from './types.js';
+
+interface ToggleGroupProps {
+  id?: string;
+  label?: string;
+  items?: ToggleItem[] | string;
+  variant?: 'outline' | 'ghost' | 'filled';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  mode?: 'single' | 'multiple';
+  orientation?: 'horizontal' | 'vertical';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  /** Controlled pressed item IDs. Pass a single ID or an array. */
+  value?: string | string[];
+  onInput?: (event: CustomEvent) => void;
+  onChange?: (event: CustomEvent<ToggleDetail>) => void;
+}
+
+declare const ToggleGroup: Component<ToggleGroupProps, {}>;
+export default ToggleGroup;

package/src/tooltip.svelte

@@ -0,0 +1,38 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-tooltip> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+  content?: string;
+  triggerHtml?: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  arrow?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  children?: import('svelte').Snippet;
+  }
+
+  let { id, content, triggerHtml, position, arrow, openDelay, closeDelay, children }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-tooltip
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  content={typeof content === 'object' && content != null ? JSON.stringify(content) : content}
+  trigger-html={typeof triggerHtml === 'object' && triggerHtml != null ? JSON.stringify(triggerHtml) : triggerHtml}
+  position={typeof position === 'object' && position != null ? JSON.stringify(position) : position}
+  arrow={arrow || undefined}
+  open-delay={typeof openDelay === 'object' && openDelay != null ? JSON.stringify(openDelay) : openDelay}
+  close-delay={typeof closeDelay === 'object' && closeDelay != null ? JSON.stringify(closeDelay) : closeDelay}
+>
+  {#if trigger || children}
+    <div slot="trigger" style="display:contents">{@render (trigger || children)?.()}</div>
+  {/if}
+</cx-tooltip>

package/src/tooltip.svelte.d.ts

@@ -0,0 +1,17 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface TooltipProps {
+  id?: string;
+  /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+  content?: string;
+  triggerHtml?: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  arrow?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  children?: import('svelte').Snippet;
+}
+
+declare const Tooltip: Component<TooltipProps, {}>;
+export default Tooltip;

package/src/types.ts

@@ -0,0 +1,334 @@
+// Shared TypeScript interfaces for structured component props.
+// These mirror the Rust config structs in crates/wasm-api/src/*.rs.
+// Auto-generated by the framework wrapper generator — DO NOT EDIT.
+
+// ─── Shared Option Types (Select, Listbox, Autocomplete) ───
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  icon?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface OptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+// ─── Tabs ───
+
+export interface TabItem {
+  value: string;
+  label: string;
+  content?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+// ─── Table ───
+
+export interface TableColumn {
+  id: string;
+  header: string;
+  sortable?: boolean;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+  visible?: boolean;
+  pinned?: 'left' | 'right';
+  resizable?: boolean;
+  sr_only?: boolean;
+  min_width?: string;
+  max_width?: string;
+}
+
+export interface TableCell {
+  text?: string;
+  html?: string;
+  number?: number;
+}
+
+export interface TableRow {
+  id: string;
+  cells: TableCell[] | Record<string, string | TableCell>;
+  disabled?: boolean;
+  detail?: string;
+  expanded?: boolean;
+}
+
+export interface SortState {
+  column_id: string;
+  direction: 'asc' | 'desc' | 'ascending' | 'descending';
+}
+
+export interface PaginationConfig {
+  current_page: number;
+  page_size: number;
+  total_items: number;
+  page_size_options?: number[];
+}
+
+export interface FooterRow {
+  cells: Record<string, string | TableCell>;
+}
+
+export interface EmptyStateConfig {
+  title?: string;
+  icon?: string;
+  description?: string;
+}
+
+// ─── Accordion ───
+
+export interface AccordionItem {
+  id: string;
+  trigger_label: string;
+  panel_content: string;
+  icon?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+// ─── Menu ───
+
+export interface MenuRadioItem {
+  value: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface MenuEntry {
+  type: 'item' | 'checkbox' | 'radio-group' | 'separator' | 'label';
+  id?: string;
+  label?: string;
+  icon?: string;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  intent?: string;
+  checked?: boolean;
+  value?: string;
+  items?: MenuRadioItem[];
+}
+
+// ─── Sidebar ───
+
+export interface SidebarNavItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: string;
+  badge?: string;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export interface SidebarGroup {
+  label?: string;
+  icon?: string;
+  items: SidebarNavItem[];
+  collapsible?: boolean;
+  expanded?: boolean;
+}
+
+// ─── Breadcrumb ───
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: string;
+  current?: boolean;
+  ellipsis?: boolean;
+}
+
+// ─── Radio Group ───
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  icon?: string;
+}
+
+// ─── Toggle Group ───
+
+export interface ToggleItem {
+  id: string;
+  label: string;
+  icon?: string;
+  icon_only?: boolean;
+  pressed?: boolean;
+  disabled?: boolean;
+}
+
+// ─── Split Button ───
+
+export interface SplitMenuEntry {
+  type: 'item' | 'separator';
+  id?: string;
+  label?: string;
+  icon?: string;
+  shortcut?: string;
+  intent?: string;
+  disabled?: boolean;
+}
+
+// ─── Carousel ───
+
+export interface CarouselSlide {
+  image_url?: string;
+  title: string;
+  badge?: string;
+  badge_color?: string;
+  subtitle?: string;
+  href?: string;
+}
+
+export interface CarouselDetail {
+  index: number;
+  total: number;
+}
+
+// ─── Speed Dial ───
+
+export interface SpeedDialAction {
+  id: string;
+  icon: string;
+  label: string;
+  intent?: string;
+  disabled?: boolean;
+  handler?: string;
+}
+
+// ─── Message Group ───
+
+export interface MessageGroupPart {
+  id?: string;
+  kind: 'text' | 'tool-call' | 'tool-result' | 'thinking' | 'code-block' | 'error';
+  connection?: 'standalone' | 'first' | 'middle' | 'last';
+  content?: string;
+  html_content?: string;
+  tool_name?: string;
+  tool_arguments?: string;
+  tool_status?: 'pending' | 'success' | 'error';
+  collapsible?: boolean;
+  thinking_label?: string;
+  language?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+// ─── Stepper ───
+
+export interface StepperStep {
+  id: string;
+  label: string;
+  description?: string;
+  status?: 'pending' | 'active' | 'completed' | 'error' | 'loading';
+  disabled?: boolean;
+  optional?: boolean;
+}
+
+// ─── Event Detail Interfaces ───
+
+export interface InputDetail {
+  value: string;
+}
+
+export interface SelectDetail {
+  value: string;
+}
+
+export interface CheckedDetail {
+  checked: boolean;
+}
+
+export interface SliderDetail {
+  value: number;
+}
+
+export interface ToggleDetail {
+  pressed: string[];
+}
+
+export interface AccordionDetail {
+  expanded: string[];
+}
+
+export interface CollapsibleDetail {
+  open: boolean;
+}
+
+export interface MenuActionDetail {
+  id: string;
+  label?: string;
+}
+
+export interface MenuChangeDetail {
+  id: string;
+  checked?: boolean;
+  value?: string;
+}
+
+export interface SortDetail {
+  column_id: string;
+  direction: 'asc' | 'desc' | 'none';
+}
+
+export interface TableSelectDetail {
+  selected: string[];
+  row_id?: string;
+}
+
+export interface TableExpandDetail {
+  row_id: string;
+  expanded: boolean;
+}
+
+export interface PageDetail {
+  page: number;
+  page_size?: number;
+}
+
+export interface NavigateDetail {
+  href: string;
+  label: string;
+}
+
+export interface ClickDetail {
+  x?: number;
+  y?: number;
+}
+
+export interface FileChangeDetail {
+  files: FileInfo[];
+}
+
+export interface FileInfo {
+  name: string;
+  size: number;
+  type: string;
+}
+
+export interface CloseDetail {
+  reason?: 'escape' | 'backdrop' | 'close-button';
+}
+
+export interface DismissDetail {
+  reason?: 'user' | 'timeout';
+}
+
+export interface FocusDetail {
+  relatedTarget: EventTarget | null;
+}
+
+export interface KeyboardDetail {
+  key: string;
+  code: string;
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  metaKey: boolean;
+}