API reference

One public contract, three ways to use it.

Every published entrypoint and non-component export is listed here. Component props, variants, states, and live examples remain on the component pages.

CSS is always explicit

React and Svelte never inject styles. Import the full stylesheet or the granular CSS entrypoints once at your application boundary.

CSS and vanilla

@cofob/design-system-css · Semantic CSS, browser-safe theme utilities, and framework-independent interaction controllers.

Published entrypoints

@cofob/design-system-cssJavaScript

All controllers, theme helpers, and shared types.

@cofob/design-system-css/typesTypeScript

Shared model and primitive types without runtime exports.

@cofob/design-system-css/index.cssCSS

Compiled full stylesheet: tokens, fonts, base, and components.

@cofob/design-system-css/tokens.cssCSS

Semantic tokens and light, dark, and system theme values.

@cofob/design-system-css/fonts.cssCSS

Bundled Manrope font-face declarations.

@cofob/design-system-css/base.cssCSS

Baseline document, focus, motion, and forced-colors rules.

@cofob/design-system-css/components.cssCSS

Public cf-* component class contract.

@cofob/design-system-css/postcssPostCSS

Authoring entry with imports for a consumer PostCSS pipeline.

@cofob/design-system-css/postcss.cssPostCSS

Explicit-file alias of the PostCSS authoring entry.

@cofob/design-system-css/font/manrope.woff2Font

Bundled Manrope variable WOFF2 asset.

Import pattern

import "@cofob/design-system-css/index.css";
import {
  getThemeScript,
  initDesignSystem,
  createDialogController,
} from "@cofob/design-system-css";

// Render getThemeScript() synchronously in <head> during SSR.
const designSystem = initDesignSystem(document);
const dialog = createDialogController(document.querySelector("dialog"));

// Dispose listeners when the application boundary is removed.
dialog.destroy();
designSystem.destroy();

Initialization

Initialize every matching controller below a document, element, or shadow root in one pass.

Export	Contract	Available from	Purpose
`initDesignSystem`function	`initDesignSystem(root?: DesignSystemRoot \| null): DesignSystemController`	`@cofob/design-system-css`	Initializes theme, interaction controllers, and theme toggles and returns one cleanup handle.
`DesignSystemController`interface	`interface DesignSystemController extends Controller { theme: ThemeController }`	`@cofob/design-system-css`	Combined controller returned by initDesignSystem.

Theme runtime

Resolve, apply, persist, and bootstrap the light, dark, or system preference without import-time browser access.

Export	Contract	Available from	Purpose
`THEME_STORAGE_KEY`constant	`const THEME_STORAGE_KEY = "cf-theme"`	`@cofob/design-system-css`	Default localStorage key used by every theme implementation.
`resolveThemePreference`function	`resolveThemePreference(preference, systemDark): ResolvedTheme`	`@cofob/design-system-css`	Purely resolves a preference against the system dark-mode state.
`applyThemePreference`function	`applyThemePreference(root, preference, systemDark): ThemeState`	`@cofob/design-system-css`	Writes resolved data attributes and color-scheme to an HTML root.
`createThemeController`function	`createThemeController(options?: ThemeControllerOptions): ThemeController`	`@cofob/design-system-css`	Creates a persistent theme controller and subscribes to system preference changes.
`getThemeScript`function	`getThemeScript(storageKey?: string): string`	`@cofob/design-system-css`	Returns the synchronous anti-flash script for server-rendered head markup.
`ThemeStorage`interface	`interface ThemeStorage { getItem; setItem }`	`@cofob/design-system-css`	Minimal storage contract accepted by the theme controller.
`ThemeControllerOptions`interface	`interface ThemeControllerOptions`	`@cofob/design-system-css`	Root, initial preference, storage, and storage-key options.
`ThemeController`interface	`interface ThemeController extends Controller`	`@cofob/design-system-css`	Reads, updates, subscribes to, and cleans up theme state.

Imperative overlay primitives with synchronized state, focus return, Escape, and light-dismiss behavior.

Export	Contract	Available from	Purpose
`createDialogController`function	`createDialogController(dialog, options?): DialogController`	`@cofob/design-system-css`	Enhances a modal dialog and its triggers while retaining native dialog behavior.
`DialogController`interface	`interface DialogController extends Controller`	`@cofob/design-system-css`	Open, close, toggle, inspect, and destroy operations for a dialog.
`DialogControllerOptions`interface	`interface DialogControllerOptions`	`@cofob/design-system-css`	Trigger, backdrop, initial-open, and change callback options.
`createPopoverController`function	`createPopoverController(popover, options?): PopoverController`	`@cofob/design-system-css`	Enhances a Popover API element and supplies a data-state fallback for older browsers.
`PopoverController`interface	`interface PopoverController extends Controller`	`@cofob/design-system-css`	Open, close, toggle, inspect, and destroy operations for a popover.
`PopoverControllerOptions`interface	`interface PopoverControllerOptions`	`@cofob/design-system-css`	Trigger, placement, dismissal, focus-return, initial-open, and callback options.

Keyboard-complete controllers for menus, tabs, and details-based accordions.

Export	Contract	Available from	Purpose
`createMenuController`function	`createMenuController(menu, options?): MenuController`	`@cofob/design-system-css`	Adds popover state, roving focus, arrows, Home, End, typeahead, and focus return to a menu.
`MenuController`interface	`interface MenuController extends Controller`	`@cofob/design-system-css`	Open with first or last focus, close, toggle, inspect, and destroy a menu.
`MenuControllerOptions`interface	`interface MenuControllerOptions`	`@cofob/design-system-css`	Trigger, initial-open, and open-state callback options.
`createNavbarController`function	`createNavbarController(navbar, options?): NavbarController`	`@cofob/design-system-css`	Enhances a responsive details-based Navbar with synchronized state, dismissal, and breakpoint reset.
`NavbarController`interface	`interface NavbarController extends Controller`	`@cofob/design-system-css`	Open, close, toggle, inspect, and destroy operations for a responsive Navbar.
`NavbarControllerOptions`interface	`interface NavbarControllerOptions`	`@cofob/design-system-css`	Initial state, dismissal behavior, navigation closing, and open-state callback options.
`NavbarCollapseAt`type	`type NavbarCollapseAt = "mobile" \| "tablet" \| "never"`	`@cofob/design-system-css`	Responsive breakpoint mode for collapsing Navbar navigation.
`NavbarMenuVariant`type	`type NavbarMenuVariant = "floating" \| "flush"`	`@cofob/design-system-css`	Floating card or edge-aligned presentation for collapsed navigation.
`NavbarSurface`type	`type NavbarSurface = "solid" \| "translucent"`	`@cofob/design-system-css`	Solid or backdrop-blurred surface for collapsed navigation.
`createTabsController`function	`createTabsController(root, options?): TabsController`	`@cofob/design-system-css`	Connects tabs to panels with ARIA, orientation-aware keyboard movement, and manual or automatic activation.
`TabsController`interface	`interface TabsController extends Controller`	`@cofob/design-system-css`	Reads, changes, focuses, and cleans up the selected tab value.
`TabsControllerOptions`interface	`interface TabsControllerOptions`	`@cofob/design-system-css`	Controlled/default value, orientation, activation, and change callback options.
`createAccordionController`function	`createAccordionController(root, options?): AccordionController`	`@cofob/design-system-css`	Coordinates details elements, single or multiple expansion, and summary keyboard navigation.
`AccordionController`interface	`interface AccordionController extends Controller`	`@cofob/design-system-css`	Reads, updates, and cleans up expanded accordion values.
`AccordionControllerOptions`interface	`interface AccordionControllerOptions`	`@cofob/design-system-css`	Multiple-expansion and value-change callback options.
`createComboboxController`function	`createComboboxController(root, options?): ComboboxController`	`@cofob/design-system-css`	Adds filtering, selection, active-descendant state, and keyboard navigation to a combobox listbox.
`ComboboxController`interface	`interface ComboboxController extends Controller`	`@cofob/design-system-css`	Open, close, select, inspect, and destroy operations for a native combobox.
`ComboboxControllerOptions`interface	`interface ComboboxControllerOptions`	`@cofob/design-system-css`	Focus-opening and value-change callback options for a native combobox.
`createAudioPlayerController`function	`createAudioPlayerController(root, options?): AudioPlayerController`	`@cofob/design-system-css`	Connects playback, seek, time, mute, and volume controls to a native audio element.
`AudioPlayerController`interface	`interface AudioPlayerController extends Controller`	`@cofob/design-system-css`	Playback, seek, volume, mute, and lifecycle operations for an audio player.
`AudioPlayerControllerOptions`interface	`interface AudioPlayerControllerOptions { durationHint?: number }`	`@cofob/design-system-css`	Known duration fallback used until audio metadata becomes available.
`createVideoPlayerController`function	`createVideoPlayerController(root, options?): VideoPlayerController`	`@cofob/design-system-css`	Connects themed playback, seek, time, mute, volume, and fullscreen controls to a native video element.
`VideoPlayerController`interface	`interface VideoPlayerController extends Controller`	`@cofob/design-system-css`	Playback, seek, volume, mute, fullscreen, and lifecycle operations for a video player.
`VideoPlayerControllerOptions`interface	`interface VideoPlayerControllerOptions { durationHint?: number }`	`@cofob/design-system-css`	Known duration fallback used until video metadata becomes available.

Supplementary descriptions and live-region notifications with explicit lifecycle cleanup.

Export	Contract	Available from	Purpose
`createTooltipController`function	`createTooltipController(tooltip, options?): TooltipController`	`@cofob/design-system-css`	Connects triggers through aria-describedby and coordinates hover, focus, delay, and Escape.
`TooltipController`interface	`interface TooltipController extends Controller`	`@cofob/design-system-css`	Show, hide, inspect, and destroy operations for a tooltip.
`TooltipControllerOptions`interface	`interface TooltipControllerOptions`	`@cofob/design-system-css`	Trigger and display-delay options.
`TooltipPlacement`type	`type TooltipPlacement = top \| right \| bottom \| left`	`@cofob/design-system-css`	Preferred side used when positioning a tooltip beside its trigger.
`createToastController`function	`createToastController(viewport): ToastController`	`@cofob/design-system-css`	Creates and manages accessible notification DOM inside a viewport.
`ToastController`interface	`interface ToastController extends Controller`	`@cofob/design-system-css`	Creates, dismisses, clears, and destroys vanilla toasts.

Clipboard controller

Framework-independent clipboard behavior for code and terminal command controls.

Export	Contract	Available from	Purpose
`copyText`function	`copyText(value: string): Promise<void>`	`@cofob/design-system-css`	Copies text through the Clipboard API without import-time browser access.
`createCopyController`function	`createCopyController(root?, options?): CopyController`	`@cofob/design-system-css`	Enhances delegated native copy buttons and restores their feedback state after a delay.
`CopyControllerOptions`interface	`interface CopyControllerOptions { copiedDuration?; writeText? }`	`@cofob/design-system-css`	Copy feedback duration and injectable clipboard writer.
`CopyController`interface	`interface CopyController extends Controller { copy(value): Promise<boolean> }`	`@cofob/design-system-css`	Copies text programmatically and removes delegated listeners on destroy.

Shared contracts

Portable primitives and content models reused by native, React, and Svelte implementations.

Export	Contract	Available from	Purpose
`Size`type	`type Size = "sm" \| "md" \| "lg"`	`@cofob/design-system-css@cofob/design-system-css/types`	Shared component size scale.
`Tone`type	`type Tone = neutral \| accent \| info \| success \| warning \| danger`	`@cofob/design-system-css@cofob/design-system-css/types`	Semantic visual and feedback tone scale.
`CaptchaState`type	`type CaptchaState = idle \| verifying \| success \| error`	`@cofob/design-system-css@cofob/design-system-css/types`	Controlled visual state for the presentation-only Captcha surface.
`CaptchaLabels`interface	`interface CaptchaLabels { idle; verifying; success; error }`	`@cofob/design-system-css@cofob/design-system-css/types`	Localized copy for every Captcha visual state.
`TerminalCodeEntry`interface	`interface TerminalCodeEntry { command: string; output?: string }`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable terminal command and optional plain or ANSI-styled captured output.
`TerminalColor`type	`type TerminalColor = { mode: indexed; index } \| { mode: rgb; red; green; blue }`	`@cofob/design-system-css@cofob/design-system-css/types`	ANSI indexed or exact RGB terminal color.
`TerminalUnderlineStyle`type	`type TerminalUnderlineStyle = single \| double \| curly \| dotted \| dashed`	`@cofob/design-system-css@cofob/design-system-css/types`	Modern terminal underline variants mapped to CSS decoration styles.
`TerminalTextStyle`interface	`interface TerminalTextStyle { foreground?; background?; underlineColor?; bold?; dim?; italic?; underline?; inverse?; concealed?; strikethrough?; overline? }`	`@cofob/design-system-css@cofob/design-system-css/types`	Active SGR presentation state for terminal output text.
`TerminalOutputToken`interface	`interface TerminalOutputToken { value: string; style: TerminalTextStyle; href?: string }`	`@cofob/design-system-css@cofob/design-system-css/types`	Printable terminal text carrying safe style and optional OSC 8 hyperlink metadata.
`BashTokenKind`type	`type BashTokenKind = plain \| command \| option \| string \| variable \| operator \| comment \| number`	`@cofob/design-system-css@cofob/design-system-css/types`	Semantic token categories used to color Bash command text.
`BashToken`interface	`interface BashToken { kind: BashTokenKind; value: string }`	`@cofob/design-system-css@cofob/design-system-css/types`	An exact source segment emitted by the Bash presentation tokenizer.
`tokenizeBashCommand`function	`tokenizeBashCommand(source: string): BashToken[]`	`@cofob/design-system-css`	Classifies Bash command text for syntax presentation without changing its content.
`tokenizeTerminalOutput`function	`tokenizeTerminalOutput(source: string): TerminalOutputToken[]`	`@cofob/design-system-css`	Converts ANSI SGR and safe OSC 8 output into portable tokens without emulating a terminal screen.
`terminalColorToCss`function	`terminalColorToCss(color: TerminalColor, usage?: foreground \| background): string`	`@cofob/design-system-css`	Resolves theme-aware ANSI, xterm indexed, and RGB colors to safe CSS values.
`CAPTCHA_LABELS`constant	`const CAPTCHA_LABELS: Readonly<CaptchaLabels>`	`@cofob/design-system-css`	Default English copy shared by the native and framework Captcha examples.
`ThemePreference`type	`type ThemePreference = "light" \| "dark" \| "system"`	`@cofob/design-system-css@cofob/design-system-css/types`	Persisted user-facing theme preference.
`ResolvedTheme`type	`type ResolvedTheme = "light" \| "dark"`	`@cofob/design-system-css@cofob/design-system-css/types`	Theme after resolving system preference.
`ThemeState`interface	`interface ThemeState { preference; resolvedTheme }`	`@cofob/design-system-css@cofob/design-system-css/types`	Snapshot emitted by the theme controller.
`LinkModel`interface	`interface LinkModel`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable link label, URL, external, and current-page state.
`ResponsiveImageModel`interface	`interface ResponsiveImageModel`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable responsive image source and intrinsic dimensions.
`AnimatedStickerModel`interface	`type AnimatedStickerModel = { src; width; height } & ({ skeletonSvg } \| { firstFrameSrc })`	`@cofob/design-system-css@cofob/design-system-css/types`	Converted animation URL, intrinsic dimensions, and an inline SVG or WebP first frame.
`PostModel`interface	`interface PostModel`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable post-card content model with display and machine-readable published/updated dates.
`ChatMessageModel`interface	`interface ChatMessageModel`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable chat message content model with body/text fallback and optional safe links.
`ChatModel`interface	`interface ChatModel`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable chat thread model.
`Controller`interface	`interface Controller { destroy(): void }`	`@cofob/design-system-css@cofob/design-system-css/types`	Common cleanup contract for every vanilla controller.
`AnimatedStickerState`type	`type AnimatedStickerState = loading \| playing \| paused \| static \| disabled \| reduced-motion \| fallback`	`@cofob/design-system-css`	Playback and inline-fallback states reflected on the animated sticker root.
`AnimatedStickerController`type	`type AnimatedStickerController = Controller`	`@cofob/design-system-css`	Cleanup contract for animated sticker playback and motion-preference listeners.
`AnimatedStickerToggleController`type	`type AnimatedStickerToggleController = Controller`	`@cofob/design-system-css`	Cleanup contract for a native switch bound to the global animated sticker flag.
`AnimatedStickersEnabledListener`type	`type AnimatedStickersEnabledListener = (enabled: boolean) => void`	`@cofob/design-system-css`	Subscriber notified whenever the global animated sticker flag changes.
`ANIMATED_STICKERS_ATTRIBUTE`constant	`const ANIMATED_STICKERS_ATTRIBUTE = data-cf-animated-stickers`	`@cofob/design-system-css`	HTML attribute used as the document-wide animation opt-out flag.
`ANIMATED_STICKERS_STORAGE_KEY`constant	`const ANIMATED_STICKERS_STORAGE_KEY = cf-animated-stickers`	`@cofob/design-system-css`	localStorage key used to preserve the global animated sticker preference across reloads.
`createAnimatedStickerController`function	`createAnimatedStickerController(root: HTMLElement): AnimatedStickerController`	`@cofob/design-system-css`	Lazily assigns WebM in the viewport, pauses it outside, removes SVG after playing, and restores SVG for global or motion fallbacks.
`createAnimatedStickerToggleController`function	`createAnimatedStickerToggleController(toggle: HTMLInputElement): AnimatedStickerToggleController`	`@cofob/design-system-css`	Connects a native checkbox switch to the document-wide animated sticker flag.
`getAnimatedStickersEnabled`function	`getAnimatedStickersEnabled(root?: HTMLElement \| null): boolean`	`@cofob/design-system-css`	Restores and reads whether animated WebM stickers are globally enabled; missing storage and markup default to true.
`setAnimatedStickersEnabled`function	`setAnimatedStickersEnabled(enabled: boolean, root?: HTMLElement \| null): void`	`@cofob/design-system-css`	Persists the preference and updates the global HTML flag, mounted stickers, and controls.
`subscribeAnimatedStickersEnabled`function	`subscribeAnimatedStickersEnabled(listener, root?): () => void`	`@cofob/design-system-css`	Observes API updates and direct mutations of the global HTML flag.
`DesignSystemRoot`type	`type DesignSystemRoot = Document \| Element \| ShadowRoot`	`@cofob/design-system-css@cofob/design-system-css/types`	Supported initialization boundary.
`ToastAction`interface	`interface ToastAction { label; onClick }`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable action attached to a vanilla or React toast.
`ToastInput`interface	`interface ToastInput`	`@cofob/design-system-css@cofob/design-system-css/types`	Portable notification title, description, tone, duration, ID, and action.

React

@cofob/design-system-react · React 18.3 and 19 adapters with separate server-safe and client entrypoints.

Published entrypoints

@cofob/design-system-reactReact

Convenience entrypoint containing static and client components, helpers, and types.

@cofob/design-system-react/staticReact

SSR and RSC-friendly static components; no use client directive.

@cofob/design-system-react/clientReact

Interactive components and hooks with an intentional use client boundary.

@cofob/design-system-react/typesTypeScript

Portable models and React composition types.

Import pattern

// Server-safe or React Server Component modules
import { Button, Card, ThemeScript } from "@cofob/design-system-react/static";

// Files already behind a client boundary
import {
  ToastProvider,
  ToastViewport,
  toast,
  useToast,
} from "@cofob/design-system-react/client";

// CSS stays an explicit application-level import.
import "@cofob/design-system-css/index.css";

Client helpers

Hooks and imperative notifications live behind the client boundary and require the corresponding provider where noted.

Export	Contract	Available from	Purpose
`useTheme`hook	`useTheme(): ThemeContextValue`	`@cofob/design-system-react@cofob/design-system-react/client`	Reads the nearest ThemeProvider preference, resolved theme, and setter.
`toast`function	`toast(input: ToastInput): string`	`@cofob/design-system-react@cofob/design-system-react/client`	Queues a notification for the active ToastProvider and returns its ID.
`useToast`hook	`useToast(): { toast; dismiss }`	`@cofob/design-system-react@cofob/design-system-react/client`	Returns provider-scoped methods to create or dismiss notifications.

Portable and composition types

Import these contracts from the root or the type-only entrypoint. React-specific models replace portable text fields with ReactNode where composition is expected.

Export	Contract	Available from	Purpose
`ThemePreference`type	`type ThemePreference = "light" \| "dark" \| "system"`	`@cofob/design-system-react@cofob/design-system-react/types`	Persisted user theme preference, re-exported from the CSS package.
`ResolvedTheme`type	`type ResolvedTheme = "light" \| "dark"`	`@cofob/design-system-react@cofob/design-system-react/types`	Resolved theme, re-exported from the CSS package.
`Size`type	`type Size = "sm" \| "md" \| "lg"`	`@cofob/design-system-react@cofob/design-system-react/types`	Shared component size scale.
`Tone`type	`type Tone = neutral \| accent \| info \| success \| warning \| danger`	`@cofob/design-system-react@cofob/design-system-react/types`	Shared semantic tone scale.
`CaptchaState`type	`type CaptchaState = idle \| verifying \| success \| error`	`@cofob/design-system-react@cofob/design-system-react/types`	Controlled visual state re-exported from the CSS package.
`CaptchaLabels`interface	`interface CaptchaLabels`	`@cofob/design-system-react@cofob/design-system-react/types`	Localized copy for each Captcha state.
`TerminalCodeEntry`type	`type TerminalCodeEntry = CssTerminalCodeEntry`	`@cofob/design-system-react@cofob/design-system-react/types`	Portable terminal command and output entry.
`ButtonVariant`type	`type ButtonVariant = primary \| secondary \| ghost \| danger`	`@cofob/design-system-react@cofob/design-system-react/types`	Visual variants accepted by Button and IconButton.
`SurfaceVariant`type	`type SurfaceVariant = default \| elevated \| outlined \| interactive`	`@cofob/design-system-react@cofob/design-system-react/types`	Card surface variants; legacy plain, raised, and muted aliases are deprecated.
`LucideIcon`type	`type LucideIcon = ComponentType<SVGProps<SVGSVGElement>>`	`@cofob/design-system-react@cofob/design-system-react/types`	React icon component shape used by optional icon props.
`LinkModel`interface	`interface LinkModel`	`@cofob/design-system-react@cofob/design-system-react/types`	Portable navigation link model.
`LinkItem`type	`type LinkItem = LinkModel`	`@cofob/design-system-react@cofob/design-system-react/types`	React-facing alias for the portable link model.
`ResponsiveImageModel`interface	`interface ResponsiveImageModel`	`@cofob/design-system-react@cofob/design-system-react/types`	Portable responsive image model.
`AnimatedStickerModel`type	`type AnimatedStickerModel = CssAnimatedStickerModel`	`@cofob/design-system-react@cofob/design-system-react/types`	React-facing alias for a converted animated sticker with an inline SVG or WebP first frame.
`ImageSource`type	`type ImageSource = ResponsiveImageModel`	`@cofob/design-system-react@cofob/design-system-react/types`	React-facing alias for a responsive image source.
`PostModel`interface	`interface PostModel`	`@cofob/design-system-react@cofob/design-system-react/types`	Portable post-card content model with display and machine-readable published/updated dates.
`PostSummary`type	`type PostSummary = PostModel`	`@cofob/design-system-react@cofob/design-system-react/types`	React-facing alias for portable post summaries.
`ChatMessageModel`interface	`interface ChatMessageModel`	`@cofob/design-system-react@cofob/design-system-react/types`	Portable chat message model with body/text fallback and optional safe links.
`ChatModel`interface	`interface ChatModel`	`@cofob/design-system-react@cofob/design-system-react/types`	Portable chat thread model.
`ChatMessage`interface	`interface ChatMessage`	`@cofob/design-system-react@cofob/design-system-react/types`	React chat message with a ReactNode body for idiomatic composition.
`MenuItem`interface	`interface MenuItem`	`@cofob/design-system-react@cofob/design-system-react/types`	Dropdown menu item label, target, and state.
`TabItem`interface	`interface TabItem`	`@cofob/design-system-react@cofob/design-system-react/types`	Base tab identifier, label, and disabled state.
`AccordionItem`interface	`interface AccordionItem`	`@cofob/design-system-react@cofob/design-system-react/types`	Base accordion identifier, heading, and disabled state.
`PaginationItem`interface	`interface PaginationItem`	`@cofob/design-system-react@cofob/design-system-react/types`	Page number, optional URL, and accessible label.
`FooterGroup`interface	`interface FooterGroup`	`@cofob/design-system-react@cofob/design-system-react/types`	Footer section title and its portable links.
`IconContent`interface	`interface IconContent`	`@cofob/design-system-react@cofob/design-system-react/types`	Accepts either a Lucide component or arbitrary React icon node.
`ToastInput`interface	`interface ToastInput`	`@cofob/design-system-react@cofob/design-system-react/types`	React notification input with a ReactNode description.
`ToastRecord`interface	`interface ToastRecord`	`@cofob/design-system-react@cofob/design-system-react/types`	Normalized notification record stored by ToastProvider.

Static component prop types

These prop contracts are exported from the root and static entrypoints; the linked component pages describe their visual states and live behavior.

Export	Contract	Available from	Purpose
`ThemeScriptProps`interface	`interface ThemeScriptProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Storage key and CSP nonce for ThemeScript.
`SkipLinkProps`interface	`interface SkipLinkProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Native anchor props plus the default main-content target.
`HeadingProps`interface	`interface HeadingProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Heading level, display size, and native heading attributes.
`TextProps`interface	`interface TextProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Polymorphic text element, size, tone, and native attributes.
`LinkProps`interface	`interface LinkProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Anchor attributes and external-link presentation.
`ProseProps`interface	`interface ProseProps extends HTMLAttributes<HTMLElement>`	`@cofob/design-system-react@cofob/design-system-react/static`	Narrow, default, or full prose measure and native article attributes.
`ContainerProps`interface	`interface ContainerProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Container width and native div attributes.
`SectionProps`interface	`interface SectionProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Section spacing, semantic surface, and native attributes.
`StackProps`interface	`interface StackProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Vertical gap and alignment contract.
`InlineProps`interface	`interface InlineProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Horizontal gap, alignment, justification, and wrapping contract.
`ButtonProps`interface	`interface ButtonProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Button variant, size, loading state, icons, and native attributes.
`IconButtonProps`interface	`interface IconButtonProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Accessible icon-only Button contract.
`FieldProps`interface	`interface FieldProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Label, hint, error, required state, and composed field control.
`TextFieldProps`interface	`interface TextFieldProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Input attributes plus integrated field presentation.
`TextareaProps`interface	`interface TextareaProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Textarea attributes plus integrated field presentation.
`SelectProps`interface	`interface SelectProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Select attributes, options, and integrated field presentation.
`CheckboxProps`interface	`interface CheckboxProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Checkbox label, description, size, error, and native attributes.
`SwitchProps`type	`type SwitchProps = CheckboxProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Checkbox-compatible props rendered as a switch.
`CaptchaProps`interface	`interface CaptchaProps extends ButtonHTMLAttributes<HTMLButtonElement>`	`@cofob/design-system-react@cofob/design-system-react/static`	Controlled visual state, labels, and native button attributes without verification logic.
`BadgeProps`interface	`interface BadgeProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Badge tone, size, variant, and span attributes.
`TagProps`interface	`interface TagProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Tag tone, size, optional remove action, and span attributes.
`AlertProps`interface	`interface AlertProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Alert tone, title, icon, actions, and region attributes.
`CardPadding`type	`type CardPadding = none \| sm \| md \| lg`	`@cofob/design-system-react@cofob/design-system-react/static`	Card internal spacing scale.
`CardProps`type	`type CardProps = CardDivProps \| CardAnchorProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Card surface/padding contract as a div or link.
`EmptyStateProps`interface	`interface EmptyStateProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Empty-state title, description, icon, action, and container attributes.
`TableProps`interface	`interface TableProps extends TableHTMLAttributes<HTMLTableElement>`	`@cofob/design-system-react@cofob/design-system-react/static`	Accessible scroll container, caption, density, striping, minimum width, and native table attributes.
`PaginationProps`interface	`interface PaginationProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Page items, current value, adjacent labels, and nav attributes.
`BlueLineProps`interface	`interface BlueLineProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Brand underline animation and rainbow options.
`NavbarProps`interface	`interface NavbarProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Brand, links, actions, responsive collapse, menu presentation, state, and native navigation attributes.
`FooterProps`interface	`interface FooterProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Footer brand, grouped links, legal content, and native attributes.
`ResponsiveImageProps`interface	`interface ResponsiveImageProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Portable source plus loading behavior and native image attributes.
`AvatarProps`interface	`interface AvatarProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Responsive avatar source, accessible name or decorative alt, initials fallback, size, loading, and referrer policy.
`InlineEmojiProps`interface	`interface InlineEmojiProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Semantic inline image metadata and native image attributes.
`MediaGridProps`interface	`interface MediaGridProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Semantic list or div container for responsive image, video, and audio media.
`PostCardProps`interface	`interface PostCardProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Linked post model, heading level, and anchor attributes.
`LatestPostCardProps`interface	`interface LatestPostCardProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Linked latest-post card data, heading level, label, and anchor attributes.
`SearchResultCardProps`interface	`interface SearchResultCardProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Linked search result data, highlighting, heading level, and anchor attributes.
`ChatThreadProps`interface	`interface ChatThreadProps`	`@cofob/design-system-react@cofob/design-system-react/static`	React chat messages, accessible label, and list attributes.
`StickerProps`interface	`interface StickerProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Sticker tone, rotation, custom style, and span attributes.
`BreadcrumbItem`interface	`interface BreadcrumbItem { label; href?; current? }`	`@cofob/design-system-react@cofob/design-system-react/static`	One hierarchical navigation ancestor or current-page endpoint.
`BreadcrumbsProps`interface	`interface BreadcrumbsProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Ordered breadcrumb items, accessible label, and navigation attributes.
`RadioProps`interface	`interface RadioProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Native radio attributes plus visible label, description, and size.
`RadioOption`interface	`interface RadioOption { value; label; description?; disabled? }`	`@cofob/design-system-react@cofob/design-system-react/static`	Portable option record rendered by RadioGroup.
`RadioGroupProps`interface	`interface RadioGroupProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Labelled options, controlled/default value, validation, orientation, and fieldset attributes.
`ProgressProps`interface	`interface ProgressProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Determinate or indeterminate value, labels, maximum, and native progress attributes.
`SpinnerProps`interface	`interface SpinnerProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Accessible status label, size, and span attributes for a loading spinner.
`CircularProgressProps`interface	`interface CircularProgressProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Determinate circular value, maximum, accessible label, size, formatting, and span attributes.
`SkeletonProps`interface	`interface SkeletonProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Placeholder variant, dimensions, style, and span attributes.
`SeparatorProps`interface	`interface SeparatorProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Horizontal or vertical orientation, decorative semantics, and native attributes.
`StepperItem`interface	`interface StepperItem { id; label; description?; href?; disabled?; state? }`	`@cofob/design-system-react@cofob/design-system-react/static`	One complete, current, or upcoming step with optional navigation.
`StepperProps`interface	`interface StepperProps`	`@cofob/design-system-react@cofob/design-system-react/static`	Ordered steps, current ID, orientation, activation callback, and navigation attributes.

Client component prop types

Interactive prop contracts are exported from the root and client entrypoints.

Export	Contract	Available from	Purpose
`AnimatedStickerProps`interface	`interface AnimatedStickerProps { sticker; alt; playback?; preload? }`	`@cofob/design-system-react@cofob/design-system-react/client`	Converted sticker model, accessible name, auto/static playback mode, video preload hint, and span attributes.
`AnimatedStickerToggleProps`interface	`interface AnimatedStickerToggleProps { enabled?; defaultEnabled?; label?; description?; onEnabledChange? }`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled or default global animation state, visible copy, callback, and native input attributes.
`CodeBlockProps`interface	`interface CodeBlockProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Code text, optional language display, copy labels, feedback duration, and div attributes.
`TerminalCodeBlockProps`interface	`interface TerminalCodeBlockProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Terminal entries, prompt, per-command copy behavior, output label, and div attributes.
`ThemeProviderProps`interface	`interface ThemeProviderProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled or default theme preference, storage key, callback, and children.
`ThemeToggleProps`interface	`interface ThemeToggleProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Theme cycle, format callback, size, and button attributes.
`DialogProps`interface	`interface DialogProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled/default open state, trigger, title, actions, and dialog attributes.
`PopoverProps`interface	`interface PopoverProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled/default open state, trigger, placement, and popover attributes.
`DropdownMenuProps`interface	`interface DropdownMenuProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Menu items, selection callback, trigger, and controlled/default open state.
`ReactTabItem`interface	`interface ReactTabItem extends TabItem`	`@cofob/design-system-react@cofob/design-system-react/client`	Tab model with ReactNode panel content.
`TabsProps`interface	`interface TabsProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Tab items, controlled/default value, orientation, activation, and callback.
`ReactAccordionItem`interface	`interface ReactAccordionItem extends AccordionItem`	`@cofob/design-system-react@cofob/design-system-react/client`	Accordion model with ReactNode content.
`AccordionProps`interface	`interface AccordionProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Accordion items, controlled/default values, multiple mode, and callback.
`TooltipProps`interface	`interface TooltipProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Trigger, tooltip content, delay, placement, and wrapper attributes.
`ToastProviderProps`interface	`interface ToastProviderProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Notification limit, default duration, and provider children.
`ToastViewportProps`interface	`interface ToastViewportProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Viewport position, label, and ordered-list attributes.
`ComboboxOption`interface	`interface ComboboxOption { value; label; description?; disabled? }`	`@cofob/design-system-react@cofob/design-system-react/client`	Filterable listbox option rendered by Combobox.
`ComboboxProps`interface	`interface ComboboxProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Options, controlled selection/query, accessible copy, callbacks, and root/input attributes.
`DrawerProps`interface	`interface DrawerProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled/default open state, edge, trigger, title, actions, and dialog attributes.
`FileUploadProps`interface	`interface FileUploadProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled files, native filters, count/size limits, drop zone copy, and callbacks.
`SliderProps`interface	`interface SliderProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Controlled/default range value, output formatting, callback, and input attributes.
`AudioPlayerLabels`interface	`interface AudioPlayerLabels`	`@cofob/design-system-react@cofob/design-system-react/client`	Localized playback, timeline, mute, and volume control labels.
`AudioPlayerProps`interface	`interface AudioPlayerProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Audio source, duration fallback, localized labels, disabled state, and media/root attributes.
`VideoPlayerLabels`interface	`interface VideoPlayerLabels`	`@cofob/design-system-react@cofob/design-system-react/client`	Localized playback, timeline, mute, volume, and fullscreen control labels.
`VideoPlayerProps`interface	`interface VideoPlayerProps`	`@cofob/design-system-react@cofob/design-system-react/client`	Video source, caption, aspect ratio, duration fallback, themed controls, media, and figure attributes.

Svelte

@cofob/design-system-svelte · Svelte 5 components, stores, theme helpers, and portable types for SvelteKit or plain Svelte.

Published entrypoints

@cofob/design-system-svelteSvelte

All Svelte components, helpers, stores, and public types.

Import pattern

<script lang="ts">
  import "@cofob/design-system-css/index.css";
  import {
    ToastProvider,
    ToastViewport,
    toast,
    dismissToast,
    clearToasts,
    toasts,
  } from "@cofob/design-system-svelte";

  const notificationId = toast("Saved", { tone: "success" });
</script>

Toast store and helpers

A framework-native writable store and imperative helpers drive ToastViewport without touching browser globals during module evaluation.

Export	Contract	Available from	Purpose
`toasts`store	`const toasts: Writable<ToastRecord[]>`	`@cofob/design-system-svelte`	Readable and writable notification store consumed by ToastViewport.
`toast`function	`toast(input: ToastInput): string; toast(message, options?): string`	`@cofob/design-system-svelte`	Adds or replaces a notification and returns its stable ID.
`dismissToast`function	`dismissToast(id: string): void`	`@cofob/design-system-svelte`	Dismisses one notification and clears its timer.
`clearToasts`function	`clearToasts(): void`	`@cofob/design-system-svelte`	Clears every notification and pending dismissal timer.

Theme helpers

SSR-safe helpers used by the Svelte provider and available for custom integrations.

Export	Contract	Available from	Purpose
`resolvedTheme`function	`resolvedTheme(preference: ThemePreference): "light" \| "dark"`	`@cofob/design-system-svelte`	Resolves a preference, returning light during SSR for the system value.
`applyTheme`function	`applyTheme(preference: ThemePreference, root?: HTMLElement): void`	`@cofob/design-system-svelte`	Writes theme preference, resolved theme, and color-scheme to a root in the browser.

Portable and composition types

Shared contracts mirror the CSS and React adapters while using Svelte snippets for composable content.

Export	Contract	Available from	Purpose
`ThemePreference`type	`type ThemePreference = "light" \| "dark" \| "system"`	`@cofob/design-system-svelte`	Persisted user theme preference.
`Size`type	`type Size = "sm" \| "md" \| "lg"`	`@cofob/design-system-svelte`	Shared component size scale.
`Tone`type	`type Tone = neutral \| accent \| info \| success \| warning \| danger`	`@cofob/design-system-svelte`	Shared semantic tone scale.
`CaptchaState`type	`type CaptchaState = idle \| verifying \| success \| error`	`@cofob/design-system-svelte`	Controlled visual state re-exported from the CSS package.
`CaptchaLabels`interface	`interface CaptchaLabels`	`@cofob/design-system-svelte`	Localized copy for each Captcha state.
`TerminalCodeEntry`interface	`interface TerminalCodeEntry { command: string; output?: string }`	`@cofob/design-system-svelte`	Portable terminal command and optional captured output.
`ButtonVariant`type	`type ButtonVariant = primary \| secondary \| ghost \| danger`	`@cofob/design-system-svelte`	Visual variants accepted by Button and IconButton.
`LinkModel`interface	`interface LinkModel`	`@cofob/design-system-svelte`	Portable navigation link model.
`LinkItem`type	`type LinkItem = LinkModel`	`@cofob/design-system-svelte`	Svelte-facing alias for the portable link model.
`ResponsiveImageModel`interface	`interface ResponsiveImageModel`	`@cofob/design-system-svelte`	Portable responsive image source model.
`AnimatedStickerModel`type	`type AnimatedStickerModel = CssAnimatedStickerModel`	`@cofob/design-system-svelte`	Svelte-facing alias for a converted animated sticker with an inline SVG or WebP first frame.
`ImageSource`type	`type ImageSource = ResponsiveImageModel`	`@cofob/design-system-svelte`	Svelte-facing alias for a responsive image source.
`PostModel`interface	`interface PostModel`	`@cofob/design-system-svelte`	Portable post-card content model with display and machine-readable published/updated dates.
`PostSummary`type	`type PostSummary = PostModel`	`@cofob/design-system-svelte`	Svelte-facing alias for a portable post summary.
`ChatMessageModel`interface	`interface ChatMessageModel`	`@cofob/design-system-svelte`	Portable chat message model with body/text fallback and optional safe links.
`ChatModel`interface	`interface ChatModel`	`@cofob/design-system-svelte`	Portable chat thread model.
`ChatMessage`interface	`interface ChatMessage`	`@cofob/design-system-svelte`	Svelte chat message with a string or Snippet body.
`MenuItem`interface	`interface MenuItem`	`@cofob/design-system-svelte`	Dropdown menu item label, target, and state.
`TabItem`interface	`interface TabItem`	`@cofob/design-system-svelte`	Tab model with optional string or Snippet content.
`AccordionItem`interface	`interface AccordionItem`	`@cofob/design-system-svelte`	Accordion model with optional string or Snippet content.
`PaginationItem`interface	`interface PaginationItem`	`@cofob/design-system-svelte`	Page number, optional URL, and accessible label.
`SelectOption`interface	`interface SelectOption`	`@cofob/design-system-svelte`	Select value, label, and disabled state.
`FooterGroup`interface	`interface FooterGroup`	`@cofob/design-system-svelte`	Footer section title and portable links.
`ToastOptions`interface	`interface ToastOptions`	`@cofob/design-system-svelte`	Options for the string overload of toast, including an optional action.
`ToastInput`interface	`interface ToastInput`	`@cofob/design-system-svelte`	Notification input with a string or Snippet description.
`ToastRecord`interface	`interface ToastRecord`	`@cofob/design-system-svelte`	Normalized notification record stored in toasts.

Asciinema player

@cofob/design-system-asciinema-player · SSR-safe Native, React, and Svelte terminal-recording player adapters with design-system presentation.

Published entrypoints

@cofob/design-system-asciinema-playerJavaScript

Framework-neutral controller, lifecycle contracts, labels, and upstream player types.

@cofob/design-system-asciinema-player/reactReact

Client-lifecycle React component with an SSR-rendered design-system fallback.

@cofob/design-system-asciinema-player/svelteSvelte

Svelte 5 component with bindable player state and SSR-rendered fallback.

@cofob/design-system-asciinema-player/styles.cssCSS

Upstream player CSS plus token-driven cofob theme and accessibility overrides.

Import pattern

import "@cofob/design-system-css/index.css";
import "@cofob/design-system-asciinema-player/styles.css";
import {
  createAsciinemaPlayerController,
} from "@cofob/design-system-asciinema-player";

const controller = createAsciinemaPlayerController(figure, {
  source: "/recordings/example.cast",
  label: "Build demonstration",
  fallbackHref: "/recordings/example",
});

await controller.ready;
controller.destroy();

Controller and shell

Mount the browser-only upstream player into a portable, server-rendered data-attribute shell.

Export	Contract	Available from	Purpose
`createAsciinemaPlayerController`function	`createAsciinemaPlayerController(root, config): AsciinemaPlayerController`	`@cofob/design-system-asciinema-player`	Dynamically imports and mounts the player, updates fallback state, and returns deterministic cleanup.
`AsciinemaPlayerController`interface	`interface AsciinemaPlayerController { ready; player; destroy() }`	`@cofob/design-system-asciinema-player`	Current upstream handle, mount promise, and idempotent disposal contract.
`AsciinemaPlayerConfig`interface	`interface AsciinemaPlayerConfig`	`@cofob/design-system-asciinema-player`	Source, upstream options, fallback, labels, and lifecycle callbacks used by the controller.
`AsciinemaPlayerLabels`interface	`interface AsciinemaPlayerLabels`	`@cofob/design-system-asciinema-player`	Portable loading, error, and fallback-link copy shared by every adapter.
`DEFAULT_ASCIINEMA_PLAYER_LABELS`constant	`const DEFAULT_ASCIINEMA_PLAYER_LABELS: Readonly<AsciinemaPlayerLabels>`	`@cofob/design-system-asciinema-player`	English default copy for the player fallback shell.
`resolveAsciinemaPlayerLabels`function	`resolveAsciinemaPlayerLabels(labels?): AsciinemaPlayerLabels`	`@cofob/design-system-asciinema-player`	Merges partial consumer copy with the immutable English defaults.

Upstream player contracts

The supported asciinema-player 3.17.0 source, option, control, parser, and event types.

Export	Contract	Available from	Purpose
`Source`type	`type Source = string \| UrlSource \| DataSource`	`@cofob/design-system-asciinema-player`	Recording URL, URL configuration, or in-memory recording source.
`UrlSource`interface	`interface UrlSource`	`@cofob/design-system-asciinema-player`	URL-backed source with fetch, parser, encoding, and timing controls.
`DataSource`interface	`interface DataSource`	`@cofob/design-system-asciinema-player`	Immediate or lazily produced recording data with parser controls.
`Options`interface	`interface Options`	`@cofob/design-system-asciinema-player`	Complete upstream playback, sizing, controls, terminal, theme, audio, and logging options.
`Player`interface	`interface Player`	`@cofob/design-system-asciinema-player`	Imperative playback, seeking, timing, event, element, and disposal handle.
`SeekLocation`type	`type SeekLocation = number \| percentage \| marker location`	`@cofob/design-system-asciinema-player`	Absolute, percentage, or marker-relative destination accepted by Player.seek.
`Marker`type	`type Marker = number \| [time, label]`	`@cofob/design-system-asciinema-player`	Unlabelled or labelled timeline marker supplied through options.
`InputEvent`interface	`interface InputEvent { data: string }`	`@cofob/design-system-asciinema-player`	Recorded terminal input payload emitted by the player.
`MarkerEvent`interface	`interface MarkerEvent { index; time; label }`	`@cofob/design-system-asciinema-player`	Marker index, timestamp, and label emitted during playback.
`Logger`interface	`interface Logger`	`@cofob/design-system-asciinema-player`	Console-compatible logging sink accepted by upstream options.
`BuiltInParser`type	`type BuiltInParser = asciicast \| typescript \| ttyrec`	`@cofob/design-system-asciinema-player`	Names of the recording parsers included by asciinema-player.
`Parser`type	`type Parser = (data, options) => Recording \| Promise<Recording>`	`@cofob/design-system-asciinema-player`	Custom recording parser callback contract.
`ParserOptions`interface	`interface ParserOptions { encoding: string }`	`@cofob/design-system-asciinema-player`	Encoding context supplied to a custom parser.
`Recording`interface	`interface Recording`	`@cofob/design-system-asciinema-player`	Normalized terminal dimensions, events, theme, and idle limit returned by parsers.
`RecordingData`type	`type RecordingData`	`@cofob/design-system-asciinema-player`	Text, buffer, response, array, or object input accepted by recording parsers.
`RecordingEvent`type	`type RecordingEvent = [time, code, data]`	`@cofob/design-system-asciinema-player`	Normalized timestamped event consumed by the terminal driver.
`RecordingEventCode`type	`type RecordingEventCode = o \| i \| r \| m`	`@cofob/design-system-asciinema-player`	Output, input, resize, and marker recording-event discriminator.

Sticker assets

@cofob/design-system-stickers · Optimized Telegram sticker media, sharded metadata, and generated React and Svelte components.

Published entrypoints

@cofob/design-system-stickersJavaScript

Eight lightweight pack descriptors, URL helpers, and shared metadata types. Sticker catalogs and SVG manifests are opt-in subpaths.

@cofob/design-system-stickers/reactReact

Named React components for all stickers; isolated per-sticker subpaths are also available.

@cofob/design-system-stickers/svelteSvelte

Named Svelte components for all stickers; isolated per-sticker subpaths are also available.

Import pattern

import AnimatedChris001 from "@cofob/design-system-stickers/react/AnimatedChris001";
import animatedChris from "@cofob/design-system-stickers/catalogs/animated-chris" with { type: "json" };

// Copy published media to /stickers during the application build.
// cf-stickers copy --out-dir public/stickers
const firstSticker = animatedChris.stickers[0];

Catalog and resolution

The root stays small; consumers explicitly import one pack catalog, one sticker manifest, or one generated component.

Export	Contract	Available from	Purpose
`packs`constant	`const packs: readonly StickerPack[]`	`@cofob/design-system-stickers`	Metadata for the eight attributed packs, including each opt-in catalog path.
`DEFAULT_STICKER_ASSET_BASE`constant	`const DEFAULT_STICKER_ASSET_BASE = "/stickers"`	`@cofob/design-system-stickers`	Default public base used by generated sticker components.
`resolveStickerAsset`function	`resolveStickerAsset(sticker, baseUrl?): string`	`@cofob/design-system-stickers`	Resolves a content-hashed asset path against a consumer's public base URL.
`resolveAnimatedSticker`function	`resolveAnimatedSticker(sticker, baseUrl?): AnimatedStickerModel`	`@cofob/design-system-stickers`	Adapts a full animated manifest to the shared runtime component model.

Metadata types

Serializable contracts shared by generated modules and pack catalogs.

Export	Contract	Available from	Purpose
`StickerPack`interface	`interface StickerPack`	`@cofob/design-system-stickers`	Attributed pack metadata and the path of its sharded catalog.
`StickerAssetKind`type	`type StickerAssetKind = "static" \| "animated"`	`@cofob/design-system-stickers`	Discriminator for static and animated sticker records.
`AnimatedStickerSourceFormat`type	`type AnimatedStickerSourceFormat = "tgs" \| "video"`	`@cofob/design-system-stickers`	Original Telegram format of an optimized animation.
`StaticStickerAsset`interface	`interface StaticStickerAsset`	`@cofob/design-system-stickers`	Metadata for an optimized transparent WebP sticker.
`AnimatedStickerAsset`type	`type AnimatedStickerAsset = VectorAnimatedStickerAsset \| VideoAnimatedStickerAsset`	`@cofob/design-system-stickers`	Full animated metadata with optimized WebM and an inline SVG or WebP first frame.
`VectorAnimatedStickerAsset`interface	`interface VectorAnimatedStickerAsset { sourceFormat: "tgs"; skeletonSvg; ... }`	`@cofob/design-system-stickers`	TGS-derived WebM metadata with a trusted inline SVG first frame.
`VideoAnimatedStickerAsset`interface	`interface VideoAnimatedStickerAsset { sourceFormat: "video"; firstFrameAssetPath; firstFrameSrc; ... }`	`@cofob/design-system-stickers`	Video-derived WebM metadata with an optimized content-hashed WebP first frame.
`StickerAsset`type	`type StickerAsset = StaticStickerAsset \| AnimatedStickerAsset`	`@cofob/design-system-stickers`	Union of full static and animated sticker metadata.
`StickerAssetIndexEntry`type	`type StickerAssetIndexEntry`	`@cofob/design-system-stickers`	Lightweight catalog record that points to a separate full manifest.

Build-time assets

@cofob/design-system-assets · Node-only conversion of validated Telegram TGS animations into transparent WebM and trusted inline SVG manifests.

Published entrypoints

@cofob/design-system-assetsJavaScript

TGS conversion API and manifest types. The cf-tgs executable provides the matching CLI.

Import pattern

import { convertTgs } from "@cofob/design-system-assets";

const manifest = await convertTgs({
  input: "stickers/chris.tgs",
  outputDir: "public/stickers/chris",
  publicBase: "/stickers/chris",
});

// TGS manifests keep a trusted skeletonSvg inline. Video sticker manifests use firstFrameSrc.

TGS conversion

Validate Telegram Lottie constraints, render frame zero, sanitize its SVG, and encode transparent VP9 WebM.

Export	Contract	Available from	Purpose
`convertTgs`function	`convertTgs(options: ConvertTgsOptions): Promise<TgsConversionManifest>`	`@cofob/design-system-assets`	Writes a content-hashed WebM and stable JSON manifest with an inline SVG skeleton.
`ConvertTgsOptions`interface	`interface ConvertTgsOptions`	`@cofob/design-system-assets`	Input, output, public URL, FFmpeg, name, output size, compatibility, and VP9 CRF options.
`TgsConversionManifest`interface	`interface TgsConversionManifest`	`@cofob/design-system-assets`	Versioned sticker model, media metadata, and SHA-256 hashes for source, WebM, and SVG.
`AnimatedStickerModel`interface	`interface AnimatedStickerModel { src; skeletonSvg; width; height }`	`@cofob/design-system-assets`	Serializable runtime model embedded into SSR output by framework adapters.

One public contract, three ways to use it.

CSS and vanilla

Published entrypoints

Import pattern

Initialization

Theme runtime

Dialog and popover controllers

Menu and selection controllers

Tooltip and toast controllers

Clipboard controller

Shared contracts

React

Published entrypoints

Import pattern

Client helpers

Portable and composition types

Static component prop types

Client component prop types

Svelte

Published entrypoints

Import pattern

Toast store and helpers

Theme helpers

Portable and composition types

Asciinema player

Published entrypoints

Import pattern

Controller and shell

Upstream player contracts

Sticker assets

Published entrypoints

Import pattern

Catalog and resolution

Metadata types

Build-time assets

Published entrypoints

Import pattern

TGS conversion