@streamsai/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Streams
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,58 @@
-# Temporary Holding Version
+# @streamsai/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Streams design system: shadcn/ui components built on [Base UI](https://base-ui.com), design
+tokens for light and dark themes, a theme provider and the Streams icon set. React 19 and Tailwind CSS v4.
+
+## Install
+
+```sh
+pnpm add @streamsai/ui react react-dom tailwindcss
+```
+
+`react`, `react-dom` and `tailwindcss` are peer dependencies.
+
+## Set up styles
+
+In your Tailwind v4 CSS entry, import the package styles after Tailwind is available:
+
+```css
+@import '@streamsai/ui/styles/globals.css';
+```
+
+This brings in Tailwind, the design tokens, the Figtree and Poppins fonts and a `@source` for the
+package's compiled components, so the utility classes they use are generated in your build. Use
+`@streamsai/ui/styles/base.css` instead if you load your own fonts.
+
+## Use
+
+```tsx
+import { Button, ThemeProvider } from '@streamsai/ui'
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <Button>Save</Button>
+    </ThemeProvider>
+  )
+}
+```
+
+Every component is also available as a subpath, for example
+`import { Button } from '@streamsai/ui/components/button'`.
+
+`ThemeProvider` toggles the `dark` class on `<html>`. To avoid a flash of the wrong theme, inline
+`THEME_INIT_SCRIPT` (exported from the package) in your HTML before your app script.
+
+## Other entry points
+
+| Import                                             | What it is                                                    |
+| -------------------------------------------------- | ------------------------------------------------------------- |
+| `@streamsai/ui/tokens`                             | Design token palette as JavaScript (`colors`, ...) with types |
+| `@streamsai/ui/styles/tokens.css`                  | Token custom properties only                                  |
+| `@streamsai/ui/styles/mcp-host.css`                | Maps the tokens to the MCP Apps host CSS variables            |
+| `@streamsai/ui/hooks/*`, `@streamsai/ui/lib/utils` | Shared hooks and the `cn` class merger                        |
+
+## License
+
+MIT. The bundled Figtree and Poppins fonts are licensed under the SIL Open Font License (see
+`dist/styles/fonts/OFL.txt` in the package).

package/dist/components/ui/agent-avatar.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { type AgentAvatarSize } from './avatar-frame.js';
+/** A Pingo: static artwork in two widths and two formats, WebP preferred, JPEG as the fallback. */
+export type AgentPingoPicture = {
+    kind: 'pingo';
+    /** The character's name. */
+    alt: string;
+    /** Fallback image (the small JPEG). Also the key the fade-in remembers. */
+    src: string;
+    /** JPEG candidates, e.g. `"/a-128.jpg 128w, /a-320.jpg 320w"`. */
+    srcSet: string;
+    /** WebP candidates, same widths. */
+    webpSrcSet: string;
+    /** The same character drawn for the dark theme; the light set above is hidden under `.dark`. */
+    dark?: {
+        src: string;
+        srcSet: string;
+        webpSrcSet: string;
+    };
+};
+/** Any other picture: an uploaded image (already resolved to a loadable URL) or an external one. */
+export type AgentImagePicture = {
+    kind: 'image';
+    src: string;
+};
+export type AgentPicture = AgentPingoPicture | AgentImagePicture;
+/**
+ * An agent's picture in the rounded-square agent frame, with an optional provider badge hanging
+ * off its bottom-right corner. Purely presentational: callers resolve which picture to draw.
+ *
+ * - The picture is clipped to the frame; the badge is a sibling of that clip so it can overhang.
+ * - No picture, or one that failed to load, shows `placeholder`: stable and static, never
+ *   re-rolled to another character.
+ * - Nothing here moves except the one-time fade-in of an image the first time it is shown.
+ */
+declare function AgentAvatar({ size, picture, imageFit, placeholder, placeholderClassName, badge, plain, className, }: {
+    size?: AgentAvatarSize;
+    picture: AgentPicture | null;
+    /** How an image fills the frame. `contain` keeps logos whole on a themed plate. */
+    imageFit?: 'cover' | 'contain';
+    /** Drawn when there is no picture or it failed to load. */
+    placeholder?: React.ReactNode;
+    placeholderClassName?: string;
+    /** Rendered over the bottom-right corner, outside the clip (a `ProviderBadge`). */
+    badge?: React.ReactNode;
+    /** Skips the hairline outline (the message row's avatar has none). */
+    plain?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export { AgentAvatar };

package/dist/components/ui/agent-avatar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import { FadeImage } from './avatar.js';
+import { AGENT_AVATAR_PX, AGENT_AVATAR_RADIUS, AGENT_AVATAR_SIZE, } from './avatar-frame.js';
+/**
+ * An agent's picture in the rounded-square agent frame, with an optional provider badge hanging
+ * off its bottom-right corner. Purely presentational: callers resolve which picture to draw.
+ *
+ * - The picture is clipped to the frame; the badge is a sibling of that clip so it can overhang.
+ * - No picture, or one that failed to load, shows `placeholder`: stable and static, never
+ *   re-rolled to another character.
+ * - Nothing here moves except the one-time fade-in of an image the first time it is shown.
+ */
+function AgentAvatar({ size = 'default', picture, imageFit = 'cover', placeholder, placeholderClassName, badge, plain = false, className, }) {
+    // The source that failed, so a new source gets a fresh try but the same one never retries.
+    const key = picture ? picture.src : null;
+    const [failedKey, setFailedKey] = React.useState(null);
+    const failed = key !== null && failedKey === key;
+    const shown = picture && !failed ? picture : null;
+    const contain = imageFit === 'contain' && shown?.kind === 'image';
+    const px = AGENT_AVATAR_PX[size];
+    const onError = () => setFailedKey(key);
+    return (_jsxs("span", { "data-slot": "avatar", "data-size": size, "data-picture": shown ? shown.kind : 'placeholder', "data-image-fit": contain ? 'contain' : undefined, className: cn('group/avatar relative flex shrink-0 select-none', AGENT_AVATAR_SIZE, className), style: { borderRadius: AGENT_AVATAR_RADIUS[size] }, children: [_jsx("span", { "data-slot": "avatar-clip", className: cn('relative flex size-full items-center justify-center overflow-hidden bg-muted', !plain &&
+                    'after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten', 
+                // Tight hairline inset: the SVG already pads for corners. Mobile gets a slightly larger
+                // inset via the platform attribute (corner clip + thumb).
+                contain && 'bg-background p-0.5 in-data-[platform=mobile]:p-1'), style: { borderRadius: 'inherit' }, children: shown?.kind === 'pingo' ? (
+                // The theme is the `.dark` class on <html>, not `prefers-color-scheme`, so a <picture>
+                // media query cannot pick the artwork: the dark set is a sibling shown by `dark:block`.
+                _jsxs(_Fragment, { children: [_jsx(PingoImage, { set: shown, alt: shown.alt, px: px, onError: onError, className: shown.dark ? 'dark:hidden' : undefined }), shown.dark ? (_jsx(PingoImage, { set: shown.dark, alt: shown.alt, px: px, onError: onError, className: "hidden dark:contents", dark: true })) : null] })) : shown?.kind === 'image' ? (_jsx(FadeImage, { "data-slot": "avatar-image", src: shown.src, alt: "", draggable: false, className: cn('size-full', contain ? 'object-contain object-center' : 'aspect-square object-cover'), onError: onError })) : (_jsx("span", { "data-slot": "avatar-fallback", className: cn('flex size-full items-center justify-center bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-4xl group-data-[size=xl]/avatar:[&>svg]:size-12', placeholderClassName), children: placeholder })) }), badge] }));
+}
+// `contents` on the <picture> so the image sizes against the frame, not an inline <picture> that
+// shrinks to the nominal size and ignores a call site's own frame size (56px, 144px).
+function PingoImage({ set, alt, px, onError, className, dark = false, }) {
+    return (_jsxs("picture", { className: cn('contents', className), "data-variant": dark ? 'dark' : undefined, children: [_jsx("source", { type: "image/webp", srcSet: set.webpSrcSet, sizes: `${px}px` }), _jsx(FadeImage, { "data-slot": "avatar-image", src: set.src, srcSet: set.srcSet, sizes: `${px}px`, alt: alt, width: 128, height: 128, draggable: false, className: "aspect-square size-full object-cover", onError: onError })] }));
+}
+export { AgentAvatar };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+declare function AlertDialog({ actionsRef, onOpenChange, ...props }: AlertDialogPrimitive.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: AlertDialogPrimitive.Close.Props): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.Close.Props): React.JSX.Element;
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, renderBackdrop, useModalRender, usePopupExit } from '../../motion/popup.js';
+import { presets } from '../../motion/config.js';
+import { buttonVariants } from './button.js';
+function AlertDialog({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogContent({ className, children, ...props }) {
+    const renderPopup = useModalRender(presets.dialog);
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Backdrop, { render: renderBackdrop, "data-slot": "alert-dialog-overlay", className: "fixed inset-y-0 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] z-(--z-modal) bg-black/10" }), _jsx(AlertDialogPrimitive.Popup, { render: renderPopup, "data-slot": "alert-dialog-content", className: cn('fixed top-1/2 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] mx-auto z-(--z-modal) grid w-[calc(100%-var(--overlay-inset-left,0px)-var(--overlay-inset-right,0px)-var(--modal-gutter,2rem))]! -translate-y-1/2 gap-4 rounded-xl bg-popover p-6 shadow-lg ring-1 ring-foreground/10 outline-none sm:max-w-lg', className), ...props, children: children })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-lg font-semibold', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-sm text-muted-foreground', className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-action", className: cn(buttonVariants(), className), ...props }));
+}
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", className: cn(buttonVariants({ variant: 'outline' }), className), ...props }));
+}
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/components/ui/alert.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-card text-card-foreground',
+            destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn('font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn('text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4', className), ...props }));
+}
+function AlertAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-action", className: cn('absolute top-2 right-2', className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/components/ui/assets/loader.json.js

@@ -0,0 +1 @@
+export default {"v":"5.9.0","fr":60,"ip":0,"op":196,"w":160,"h":80,"nm":"Streams_Loader_Op_19_Export","ddd":0,"assets":[{"id":"comp_0","nm":"Pre-comp 10","fr":60,"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 4","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,539,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[40,40,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":231,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":1},"t":31,"s":[-27.25,-27,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[-27.25,-27,0],"to":[0,0,0],"ti":[0,0,0]},{"t":71,"s":[62.75,-27,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-81.75,27.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[54,54],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-81.75,27.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.539,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":11,"op":57,"st":-2,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":1},"t":31,"s":[27,27.25,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[27,27.25,0],"to":[0,0,0],"ti":[0,0,0]},{"t":71,"s":[-69,27.25,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-81.75,27.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[54,54],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-81.75,27.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.539,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":21,"op":57,"st":-2,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 9","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.387,"y":0.387},"t":31,"s":[-81.75,28,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[-81.75,28,0],"to":[0,0,0],"ti":[0,0,0]},{"t":71,"s":[-171.75,28,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-81.75,27.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[54,54],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-81.75,27.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.539,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":57,"st":-2,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 4","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.717,"y":1},"o":{"x":0.387,"y":0},"t":1,"s":[-81.75,28,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.756,"y":0.894},"o":{"x":0.433,"y":0},"t":11,"s":[-27,-26.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.678,"y":1},"o":{"x":0.797,"y":0.34},"t":21,"s":[27.274,27.348,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":1},"t":31,"s":[82,-27.75,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[82,-27.75,0],"to":[0,0,0],"ti":[0,0,0]},{"t":71,"s":[172,-27.75,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-81.75,27.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[54,54],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-81.75,27.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.539,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":57,"st":-2,"bm":0},{"ddd":0,"ind":6,"ty":3,"nm":"Null 7","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":201,"s":[960,539,0],"to":[0,0,0],"ti":[38.043,-0.056,0]},{"t":231,"s":[926.5,550.167,0]}],"ix":2,"l":2},"a":{"a":0,"k":[50,50,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0,0,0],"y":[1,1,1]},"o":{"x":[1,1,1],"y":[0,0,0]},"t":201,"s":[80,80,100]},{"t":231,"s":[30,30,100]}],"ix":6,"l":2}},"ao":0,"ip":0,"op":231,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path 2","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[0.067,19.173,0],"ix":2,"l":2},"a":{"a":0,"k":[0,-38.591,0],"ix":1,"l":2},"s":{"a":0,"k":[49.75,49.75,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,42.626],[0,0],[42.626,0]],"o":[[0,0],[0,42.626],[-42.626,0]],"v":[[-77.181,-38.591],[77.181,-38.591],[0,38.591]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.168609619141,0.168609619141,0.168609619141,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":191,"op":231,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","parent":9,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-0.027,-18.827,0],"ix":2,"l":2},"a":{"a":0,"k":[0,-38.591,0],"ix":1,"l":2},"s":{"a":0,"k":[49.75,49.75,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,42.626],[0,0],[42.626,0]],"o":[[0,0],[0,42.626],[-42.626,0]],"v":[[-77.181,-38.591],[77.181,-38.591],[0,38.591]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.168609619141,0.168609619141,0.168609619141,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":191,"op":231,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":3,"nm":"Subtract 1","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":191,"s":[19.558,68.975,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.05,"y":0},"t":201,"s":[19.558,68.975,0],"to":[0,0,0],"ti":[0,0,0]},{"t":221,"s":[52.982,68.642,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":191,"op":231,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":3,"nm":"Subtract","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":191,"s":[85.558,30.975,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.05,"y":0},"t":201,"s":[85.558,30.975,0],"to":[0,0,0],"ti":[0,0,0]},{"t":221,"s":[52.851,32.642,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":191,"op":231,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Shape Layer 7","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[-160.845,-34.321,0],"to":[0,0,0],"ti":[0,0,0]},{"t":71,"s":[34.155,-34.321,0]}],"ix":2,"l":2},"a":{"a":0,"k":[34.155,-34.321,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[135.958,69.089],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[34.155,-34.321],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gs","o":{"a":0,"k":100,"ix":11},"w":{"a":0,"k":4,"ix":12},"g":{"p":3,"k":{"a":0,"k":[0,0.115,0.115,0.115,0.5,0.058,0.058,0.058,1,0,0,0],"ix":10}},"s":{"a":0,"k":[-334.908,-6.044],"ix":4},"e":{"a":0,"k":[343.059,-12.185],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":15},"bm":0,"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.539,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":57,"op":72,"st":41,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Shape Layer 6","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[151.822,34.49,0],"to":[0,0,0],"ti":[0,0,0]},{"t":71,"s":[-34.178,34.49,0]}],"ix":2,"l":2},"a":{"a":0,"k":[34.155,-34.321,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[135.958,69.089],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[34.155,-34.321],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gs","o":{"a":0,"k":100,"ix":11},"w":{"a":0,"k":4,"ix":12},"g":{"p":3,"k":{"a":0,"k":[0,0.115,0.115,0.115,0.5,0.058,0.058,0.058,1,0,0,0],"ix":10}},"s":{"a":0,"k":[-334.908,-6.044],"ix":4},"e":{"a":0,"k":[343.059,-12.185],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":15},"bm":0,"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.539,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":57,"op":72,"st":41,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Shape Layer 1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0,0,0],"y":[1,1,1]},"o":{"x":[1,1,1],"y":[0,0,0]},"t":81,"s":[100,100,100]},{"i":{"x":[0.664,0.664,0.664],"y":[1,1,1]},"o":{"x":[0.328,0.328,0.328],"y":[0,0,0]},"t":111,"s":[90,90,100]},{"i":{"x":[0.73,0.73,0.73],"y":[1,1,1]},"o":{"x":[0.365,0.365,0.365],"y":[0,0,0]},"t":121,"s":[90,90,100]},{"i":{"x":[0.771,0.771,0.771],"y":[1,1,1]},"o":{"x":[0.424,0.424,0.424],"y":[0,0,0]},"t":151,"s":[100,100,100]},{"i":{"x":[0,0,0],"y":[1,1,1]},"o":{"x":[1,1,1],"y":[0,0,0]},"t":161,"s":[100,100,100]},{"t":191,"s":[80,80,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":41,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-33.883,-68.877],[-34.164,0.972],[-34.087,1.087],[-34.09,0.987],[-34.001,19.844],[-33.905,46.827],[-34.1,69.934],[11.415,70.107],[23.899,69.99],[33.574,69.617],[32.889,1.022],[33.032,1.227],[33.111,0.82],[33.022,-68.895],[15.31,-68.932],[0.227,-69.274],[-17.248,-68.92]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":1,"y":0},"t":71,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-33.883,-68.877],[-34.164,0.972],[-67.657,1.02],[-101.997,0.969],[-101.907,19.762],[-102.123,46.676],[-102.006,69.935],[-67.87,70.022],[2.361,69.963],[33.574,69.617],[32.889,1.022],[66.997,1.089],[102.037,0.886],[101.948,-68.932],[69.312,-68.901],[33.003,-69.123],[-0.392,-68.944]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":81,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-33.883,-68.877],[-34.164,0.972],[-67.657,1.02],[-101.997,0.969],[-101.907,19.762],[-102.123,46.676],[-102.006,69.935],[-67.87,70.022],[2.361,69.963],[33.574,69.617],[32.889,1.022],[66.997,1.089],[102.037,0.886],[101.948,-68.932],[69.312,-68.901],[33.003,-69.123],[-0.392,-68.944]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":111,"s":[{"i":[[7.506,2.765],[36.346,-13.037],[6.92,-10.375],[1.089,-1.591],[-1.185,-7.506],[-9.877,-3.556],[-4.346,3.951],[-24.198,7.592],[-8.296,-5.531],[-15.407,-3.951],[-26.233,8.867],[-5.531,10.272],[3.161,5.531],[11.457,5.926],[2.765,-2.765],[16.593,-5.531],[20.148,15.407]],"o":[[-7.506,-2.765],[-28.643,10.274],[-1.861,2.79],[-5.136,7.506],[1.185,7.506],[9.877,3.556],[4.346,-3.951],[20.148,-6.321],[8.296,5.531],[15.407,3.951],[28.049,-9.481],[5.531,-10.272],[-3.161,-5.531],[-11.457,-5.926],[-2.765,2.765],[-16.593,5.531],[-20.148,-15.407]],"v":[[-17.383,-48.938],[-86.914,-45.778],[-135.907,-8.23],[-140.247,-1.531],[-143.407,19.012],[-118.123,41.926],[-103.506,37.185],[-66.37,14.272],[-24.889,22.963],[26.074,50.617],[88.889,46.272],[140.247,0.839],[141.037,-22.864],[120.099,-41.432],[101.531,-35.901],[73.877,-18.123],[25.679,-24.444]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":121,"s":[{"i":[[7.506,2.765],[36.346,-13.037],[6.92,-10.375],[1.089,-1.591],[-1.185,-7.506],[-9.877,-3.556],[-4.346,3.951],[-24.198,7.592],[-8.296,-5.531],[-15.407,-3.951],[-26.233,8.867],[-5.531,10.272],[3.161,5.531],[11.457,5.926],[2.765,-2.765],[16.593,-5.531],[20.148,15.407]],"o":[[-7.506,-2.765],[-28.643,10.274],[-1.861,2.79],[-5.136,7.506],[1.185,7.506],[9.877,3.556],[4.346,-3.951],[20.148,-6.321],[8.296,5.531],[15.407,3.951],[28.049,-9.481],[5.531,-10.272],[-3.161,-5.531],[-11.457,-5.926],[-2.765,2.765],[-16.593,5.531],[-20.148,-15.407]],"v":[[-17.383,-48.938],[-86.914,-45.778],[-135.907,-8.23],[-140.247,-1.531],[-143.407,19.012],[-118.123,41.926],[-103.506,37.185],[-66.37,14.272],[-24.889,22.963],[26.074,50.617],[88.889,46.272],[140.247,0.839],[141.037,-22.864],[120.099,-41.432],[101.531,-35.901],[73.877,-18.123],[25.679,-24.444]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":151,"s":[{"i":[[12.388,4.658],[24.304,-16.586],[3.112,-16.598],[-0.106,-1.885],[-3.092,-1.617],[-1.627,5.574],[-3.844,6.026],[-27.589,-17.256],[-7.815,-6.481],[-26.401,0.893],[-14.685,20.531],[-1.747,12.805],[2.55,4.609],[4.667,-4.068],[1.785,-6.236],[9.777,-8.417],[16.03,14.222]],"o":[[-7.356,-2.766],[-25.821,17.62],[-0.837,4.464],[0.594,10.597],[3.157,1.651],[3.373,-12.426],[6.292,-9.864],[13.212,8.264],[8.874,7.358],[15.897,-0.538],[9.81,-13.716],[1.284,-9.411],[-1.079,-1.951],[-3.083,4.432],[-1.076,3.76],[-10.64,9.161],[-29.449,-26.127]],"v":[[-29.138,-49.158],[-77.485,-44.109],[-117.071,20.864],[-118.094,30.653],[-112.157,45.599],[-103.623,38.926],[-87.292,-0.636],[-34.911,-8.494],[2.126,25.142],[53.482,54.546],[99.94,25.716],[116.966,-17.589],[116.2,-42.609],[106.833,-44.432],[99.465,-23.013],[82.973,9.167],[36.449,6.377]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":161,"s":[{"i":[[12.388,4.658],[24.304,-16.586],[3.112,-16.598],[-0.106,-1.885],[-3.092,-1.617],[-1.627,5.574],[-3.844,6.026],[-27.589,-17.256],[-7.815,-6.481],[-26.401,0.893],[-14.685,20.531],[-1.747,12.805],[2.55,4.609],[4.667,-4.068],[1.785,-6.236],[9.777,-8.417],[16.03,14.222]],"o":[[-7.356,-2.766],[-25.821,17.62],[-0.837,4.464],[0.594,10.597],[3.157,1.651],[3.373,-12.426],[6.292,-9.864],[13.212,8.264],[8.874,7.358],[15.897,-0.538],[9.81,-13.716],[1.284,-9.411],[-1.079,-1.951],[-3.083,4.432],[-1.076,3.76],[-10.64,9.161],[-29.449,-26.127]],"v":[[-29.138,-49.158],[-77.485,-44.109],[-117.071,20.864],[-118.094,30.653],[-112.157,45.599],[-103.623,38.926],[-87.292,-0.636],[-34.911,-8.494],[2.126,25.142],[53.482,54.546],[99.94,25.716],[116.966,-17.589],[116.2,-42.609],[106.833,-44.432],[99.465,-23.013],[82.973,9.167],[36.449,6.377]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0},"t":191,"s":[{"i":[[0,0],[13.819,0],[-3.609,-7.895],[-5.98,-7.053],[-7.236,-1.914],[-5.118,-0.192],[-9.242,4.93],[-12.076,14.441],[-1.258,22.739],[0,0],[-19.953,0.156],[7.559,14.487],[7.889,3.572],[22.906,0],[9.656,-6.761],[6.014,-12.868],[0,-13.329]],"o":[[0,0],[0.292,22.628],[3.609,7.895],[5.98,7.053],[9.111,2.41],[8.943,0.335],[7.239,-3.862],[9.099,-10.881],[9.124,-0.142],[0,0],[0,-21.136],[-6.783,-13],[-5.135,-2.326],[-22.906,0],[-8.006,5.606],[-5.499,11.766],[-10.949,0.373]],"v":[[-84.871,0.166],[-171.906,0.044],[-163.777,40.179],[-144.992,67.033],[-107.196,90.752],[-72.345,94.908],[-31.269,84.417],[-1.035,59.299],[19.361,0.016],[82.492,-0.145],[184.419,-0.156],[166.618,-54.855],[130.565,-86.055],[82.629,-94.624],[29.257,-75.92],[2.099,-42.769],[-6.373,0.014]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0},"t":201,"s":[{"i":[[0,0],[13.819,0],[-3.609,-7.895],[-5.98,-7.053],[-7.236,-1.914],[-5.118,-0.192],[-9.242,4.93],[-12.076,14.441],[-1.258,22.739],[0,0],[-19.953,0.156],[7.559,14.487],[7.889,3.572],[22.906,0],[9.656,-6.761],[6.014,-12.868],[0,-13.329]],"o":[[0,0],[0.292,22.628],[3.609,7.895],[5.98,7.053],[9.111,2.41],[8.943,0.335],[7.239,-3.862],[9.099,-10.881],[9.124,-0.142],[0,0],[0,-21.136],[-6.783,-13],[-5.135,-2.326],[-22.906,0],[-8.006,5.606],[-5.499,11.766],[-10.949,0.373]],"v":[[-84.871,0.166],[-171.906,0.044],[-163.777,40.179],[-144.992,67.033],[-107.196,90.752],[-72.345,94.908],[-31.269,84.417],[-1.035,59.299],[19.361,0.016],[82.492,-0.145],[184.419,-0.156],[166.618,-54.855],[130.565,-86.055],[82.629,-94.624],[29.257,-75.92],[2.099,-42.769],[-6.373,0.014]],"c":true}]},{"t":231,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-70.398,1.772],[-95.235,1.391],[-102.527,10.907],[-103.782,11.646],[-108.358,22.167],[-107.471,37.418],[-100.504,47.258],[-94.399,53.075],[-85.778,54.442],[-72.458,53.836],[-64.87,49.486],[-59.654,45.641],[-56.02,40.441],[-55.269,36.074],[-55.598,23.778],[-56.79,16.083],[-61.981,8.487]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.16862745098,0.16862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":71,"op":191,"st":71,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 10","refId":"comp_0","sr":0.85,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[80,40,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":196,"st":0,"bm":0}],"markers":[]}

package/dist/components/ui/avatar-frame.d.ts

@@ -0,0 +1,11 @@
+export type AgentAvatarSize = 'sm' | 'default' | 'lg' | 'xl';
+/**
+ * The avatar frame, the same for people and agents: 28/40/48px squares (`xl` 128px). The size
+ * classes live on the frame so call-site overrides (`size-[50px]`, `data-[size=sm]:size-5`, group
+ * rings) still apply.
+ */
+export declare const AGENT_AVATAR_SIZE = "size-10 data-[size=lg]:size-12 data-[size=sm]:size-7 data-[size=xl]:size-32";
+/** Corner radius of the rounded-square frame per size. */
+export declare const AGENT_AVATAR_RADIUS: Record<AgentAvatarSize, number>;
+/** Pixel width of the frame per size, for the `sizes` hint of a responsive picture. */
+export declare const AGENT_AVATAR_PX: Record<AgentAvatarSize, number>;

package/dist/components/ui/avatar-frame.js

@@ -0,0 +1,20 @@
+/**
+ * The avatar frame, the same for people and agents: 28/40/48px squares (`xl` 128px). The size
+ * classes live on the frame so call-site overrides (`size-[50px]`, `data-[size=sm]:size-5`, group
+ * rings) still apply.
+ */
+export const AGENT_AVATAR_SIZE = 'size-10 data-[size=lg]:size-12 data-[size=sm]:size-7 data-[size=xl]:size-32';
+/** Corner radius of the rounded-square frame per size. */
+export const AGENT_AVATAR_RADIUS = {
+    sm: 7,
+    default: 10,
+    lg: 13,
+    xl: 36,
+};
+/** Pixel width of the frame per size, for the `sizes` hint of a responsive picture. */
+export const AGENT_AVATAR_PX = {
+    sm: 28,
+    default: 40,
+    lg: 48,
+    xl: 128,
+};

package/dist/components/ui/avatar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import type { HTMLMotionProps } from '../../motion/index.js';
+/**
+ * A person's picture. It draws the same frame as `AgentAvatar` (28/40/48px rounded squares, `xl`
+ * 128px, the corner radius per size from `AGENT_AVATAR_RADIUS`), so people and agents read as one family.
+ * The radius is inline and inherited by the image, fallback and hairline.
+ */
+declare function Avatar({ className, size, style, ...props }: AvatarPrimitive.Root.Props & {
+    size?: 'default' | 'sm' | 'lg' | 'xl';
+}): React.JSX.Element;
+/**
+ * Fades in the first time its image is shown, not on every remount. Shared with `AgentAvatar`,
+ * which draws agent pictures (also keyed by `src`) outside Base UI's loading state.
+ */
+declare function FadeImage(props: HTMLMotionProps<'img'>): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/** The "+N" tile of a group; its size and corners follow `AGENT_AVATAR_SIZE` / `AGENT_AVATAR_RADIUS` for the group's avatars. */
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Avatar, FadeImage, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/ui/avatar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { motion } from '../../motion/index.js';
+import { presets } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { AGENT_AVATAR_RADIUS, AGENT_AVATAR_SIZE } from './avatar-frame.js';
+/**
+ * A person's picture. It draws the same frame as `AgentAvatar` (28/40/48px rounded squares, `xl`
+ * 128px, the corner radius per size from `AGENT_AVATAR_RADIUS`), so people and agents read as one family.
+ * The radius is inline and inherited by the image, fallback and hairline.
+ */
+function Avatar({ className, size = 'default', style, ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten', AGENT_AVATAR_SIZE, className), style: typeof style === 'function'
+            ? (state) => ({ borderRadius: AGENT_AVATAR_RADIUS[size], ...style(state) })
+            : { borderRadius: AGENT_AVATAR_RADIUS[size], ...style }, ...props }));
+}
+/** Sources that have faded in once: an avatar that remounts (back from a session) must not fade again. */
+const shownSources = new Set();
+/**
+ * Fades in the first time its image is shown, not on every remount. Shared with `AgentAvatar`,
+ * which draws agent pictures (also keyed by `src`) outside Base UI's loading state.
+ */
+function FadeImage(props) {
+    const src = typeof props.src === 'string' ? props.src : undefined;
+    // Read at mount only (`initial` is ignored later); recorded in an effect so a StrictMode or
+    // discarded render never marks a source as shown.
+    const [seen] = React.useState(() => src !== undefined && shownSources.has(src));
+    React.useEffect(() => {
+        if (src !== undefined)
+            shownSources.add(src);
+    }, [src]);
+    return (_jsx(motion.img, { ...props, initial: seen ? false : presets.fade.initial, animate: presets.fade.animate }));
+}
+function renderAvatarImage(props) {
+    return _jsx(FadeImage, { ...props });
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { render: renderAvatarImage, "data-slot": "avatar-image", className: cn('aspect-square size-full rounded-[inherit] object-cover', className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('flex size-full items-center justify-center rounded-[inherit] bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-4xl group-data-[size=xl]/avatar:[&>svg]:size-12', className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn('group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background', className), ...props }));
+}
+/** The "+N" tile of a group; its size and corners follow `AGENT_AVATAR_SIZE` / `AGENT_AVATAR_RADIUS` for the group's avatars. */
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('relative flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-12 group-has-data-[size=lg]/avatar-group:rounded-[13px] group-has-data-[size=sm]/avatar-group:size-7 group-has-data-[size=sm]/avatar-group:rounded-[7px] [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', className), ...props }));
+}
+export { Avatar, FadeImage, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "link" | "outline" | "done" | "default" | "destructive" | "secondary" | "ghost" | "working" | "stuck" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,36 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const badgeVariants = cva('group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+            secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+            destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+            outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+            ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+            working: 'bg-status-working/15 text-status-working',
+            done: 'bg-status-done/15 text-status-done',
+            stuck: 'bg-status-stuck/15 text-status-stuck',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Badge({ className, variant = 'default', render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        props: mergeProps({
+            className: cn(badgeVariants({ variant }), className),
+        }, props),
+        render,
+        state: {
+            slot: 'badge',
+            variant,
+        },
+    });
+}
+export { Badge, badgeVariants };

package/dist/components/ui/bar-list.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+export interface BarListItem {
+    label: string;
+    value: number;
+    /** Avatar, icon or rank in front of the label. */
+    leading?: ReactNode;
+    /** Makes the whole row a button. Pair it with `selectLabel`; rows without it stay plain text. */
+    onSelect?: () => void;
+    /** Accessible name of the row button (the visible text is only the label and the value). */
+    selectLabel?: string;
+}
+export interface BarListProps extends Omit<React.ComponentProps<'ol'>, 'children'> {
+    items: readonly BarListItem[];
+    /** Names the list for assistive tech. Required. */
+    'aria-label': string;
+    formatValue?: (value: number) => string;
+    /**
+     * Optional hover/focus tip for the value cell. Return a string to wrap that row’s value in a
+     * Tooltip; return `undefined` to leave the value as plain text.
+     */
+    formatValueTooltip?: (value: number) => string | undefined;
+}
+/**
+ * Ranked horizontal bars. The widest bar is the largest value; every other bar is a share of it
+ * so the eye compares lengths, not labels. Plain list semantics — an `<ol>` with one row per
+ * item — so it reads top to bottom without any extra roles.
+ */
+declare function BarList({ items, formatValue, formatValueTooltip, className, ...props }: BarListProps): import("react").JSX.Element;
+export interface BarListSkeletonProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** How many rows to draw. Use the usual count, not the largest one. */
+    rows?: number;
+    /** Draw a round 28 px avatar (the `sm` size) in front of each label, as `BarList` does with `leading`. */
+    avatar?: boolean;
+}
+/**
+ * The loading shape of `BarList`: the same list, row grid and bar track, with a label stub, a
+ * value stub and a still track in each row. Rows are `aria-hidden`; the host names the busy region.
+ */
+declare function BarListSkeleton({ rows, avatar, className, ...props }: BarListSkeletonProps): import("react").JSX.Element;
+export { BarList, BarListSkeleton };