Agent + Utility
34 components.
Agent
ActionAgent-native wrapper that exposes a control (button) as an action discoverable and invocable by AI agents. Agent HintVisually hidden hint that adds context readable by screen readers and AI agents to a nearby control. AsyncDeclarative async-state container that renders only the slot matching the current phase (idle, loading, error, empty, or ready). Command RegistryInvisible registry of page capabilities that exposes actions enumerable and invocable by AI agents and command palettes. Copy RegionWraps any region and makes it copyable with a single click, exposing itself as content extractable by agents. ExplainAttaches a plain-language explanation to a piece of content, visible to humans in a popover and always readable by screen readers and agents. HotkeyDeclarative, invisible binder for global keyboard shortcuts, with a machine-readable layer. IdleInvisible inactivity detector that switches between the "active" and "idle" states after a period without user interaction. IntentInvisible wrapper that annotates a region of the page with a machine-readable goal for autonomous agents. Live RegionManaged ARIA live region that announces dynamic updates to screen readers and autonomous agents. OptimisticWraps an action with optimistic UI and built-in rollback, exposing a global registry that agents can enumerate and trigger. PortalTeleports your content elsewhere in the DOM (the body by default) while keeping logical ownership, and restores it to its original place when removed. RedactHides sensitive content with blur until it's explicitly revealed, keeping the value out of the accessibility tree.
Utility
Auto AnimateDrop-in layout animation: direct children animate on add, remove, and reorder via FLIP, zero per-item wiring, reduced-motion aware. DiffShows the word-by-word difference between two texts inline, with removals struck through and additions highlighted. Diff MotionWatches its children and on every mutation computes a keyed semantic diff, emitting { added, removed, moved, changed } and colour-coding each: added glow green and scale in, moved FLIP-slide blue, changed flash amber. EmphasisAttention-seeking animations (bounce, heartbeat, wiggle, tada, shake, pulse, flash) as a wrapper, CSS-only and reduced-motion aware. Infinite ScrollFires a load event when the user nears the bottom of the content using an IntersectionObserver on a sentinel element, with optional loading and done states. InspectorA floating developer tool that enters inspect mode on click, highlighting pura elements on hover and opening a panel to edit component attributes live with localStorage persistence. Media QueryConditionally renders content based on a CSS media query, with agent-readable responsive state. MotionGeneric enter/exit motion wrapper: toggle the show attribute to animate any content in and out, CSS-only and reduced-motion aware. Motion BudgetAn invisible page-level governor that drives the global --pura-motion token to calm or stop all token-driven motion library-wide, with system reduced-motion awareness. No render, no shadow paint. Narrated TransitionRuns a state change inside the native View Transitions API and narrates it: captures before/after named state, diffs it, and emits a structured { from, to, reason, changed } account plus a screen-reader announcement. Qr CodeZero-dependency QR code encoder (byte mode, versions 1–10) that renders an SVG matrix using theme foreground and background colors. RevealAnimates content into view when it enters the viewport, respecting prefers-reduced-motion. RippleMaterial-style touch ripple wrapper: a ripple expands from the pointer on press, CSS-only motion, reduced-motion aware. Scroll RevealScrubs a reveal to the element's progress through the viewport using the native scroll-driven CSS timeline (animation-timeline: view()), no IntersectionObserver and no per-frame JS. Scroll TimelineA section-scoped scroll progress that pauses on intent. Tracks how far this element has travelled through the viewport and freezes its advance the moment the reader hovers or focuses inside it, exposing the engaged state so an agent can tell a section is being attended to. Stream CascadeStaggered entrance for streamed content. A parse-time CSS nth-child cascade (served as Declarative Shadow DOM) fades each child up a step after the last, with zero JS coordination, plus a cascadeitem event per live-appended child. SwipeSwipeable container that detects pointer and touch drag gestures past a threshold and dispatches a swipe event with direction and distance. Theme DesignerA slide-in panel to pick a brand preset or craft a custom theme, applying --pura-* token overrides live and persisting the choice. Time ScrubA scrubbable master timeline over a sequence of steps. Each slotted child is a keyframe; an accessible slider seeks a continuous playhead across them (undo/redo by position), exposing a continuous fraction for interpolation and a snapped index as the discrete state, with a scrub event per change. TruncateLimits text to N lines with an ellipsis and a "more"/"less" button to expand it. View TransitionMorph between UI states with the native View Transitions API: wrap a region, call transition(updateFn) to cross-fade or magic-move, degrades gracefully.