@021.is/brand-studio 0.3.0

package/AGENTS.md

@@ -0,0 +1,63 @@
+# AGENTS.md — @021.is/brand-studio
+
+> Read this BEFORE you touch anything. Update it when scope or contracts change.
+
+## What this is
+
+A **generic, publishable** brand-kit toolkit (npm/GitHub Packages, `@021.is/brand-studio`, used by delvix, zeropost.de, startinaachen.de, and anyone in the org incl. Nikita). It provides:
+
+1. **A Material Design 3 color engine** (`src/color/`) — `generateScheme({ seed, secondary?, tertiary?, neutral?, contrastLevel?, variant?, overrides? })` returns a complete `{ light, dark }` MD3 role set (primary/onPrimary/primaryContainer/.../surface/onSurface/outline/...). Built on Google's `@material/material-color-utilities` (HCT). `schemeToCssText` emits `--md-*` vars for light + `.dark`.
+2. **`<BrandStudio>`** — a mountable `/brand` page (overview/logo/colors/type/icons/motion/download). It injects `--md-*` vars and themes itself from them, so it renders contrast-correct in both modes.
+3. **Composable primitives** — shapes (`Squircle`, `Ring`, `Disc`), generic loading marks (`Spinner`/`Ring`/`Pulse`), motion helpers (`Sweep`, `Drift`, `PulseLoop`, `RingDraw`, `Wobble`, `AppearGrow`, `Sequence`, `Strikethrough`).
+4. **`defineBrand()`** — config helper; resolves `config.scheme` from `config.color`.
+
+## THE CARDINAL RULE — nothing brand-specific lives here
+
+**No logos. No icon catalog. No hardcoded palette. No brand copy.** The lib is the toolkit; brand IP lives in each host app (`<app>/src/brand/`). If you find a brand glyph, mark, or color creeping into `src/`, it's a bug — pull it out into the consuming app and pass it via props (`staticLogo`, `animatedLogo`, `icons`). This is enforceable by `grep`: a brand name / postal glyph / forest-green hex in `src/` is a regression. (History: v0.2.x had zeropost's mailbox baked in; v0.3.0 ripped it out.)
+
+## Doctrine
+
+- **Color comes from a seed, not hand-picked hex.** Brands give a seed (+ optional key colors / overrides); the engine derives everything, contrast-guaranteed.
+- **Each project owns its logo + icons.** Pass them as `ReactNode` props.
+- **Zero commercial runtime dep.** Framer Motion (MIT, peer) for animation; material-color-utilities (Apache-2.0) bundled. No SaaS, no editor lock-in.
+- **SSR-safe SVG render path. Tailwind-agnostic** (inline styles / CSS vars, never framework class names).
+
+## Stack
+
+TypeScript strict + `noUncheckedIndexedAccess` · React 19 + Framer Motion 12 (peers) · `@material/material-color-utilities` (bundled) · tsup ESM-only · Biome · Vitest.
+
+## Layout
+
+```
+src/
+├── index.ts          Top-level re-exports
+├── color/            MD3 engine: roles, generateScheme, cssVars, contrast
+├── shapes/           Ring, Squircle, Disc (generic geometric primitives)
+├── motion/           Generic animation helpers
+├── loading/          Spinner/Ring/Pulse loading marks + LoadingMark dispatch
+├── app/              <BrandStudio> + sections (themed via --md-* vars)
+├── define/           defineBrand() + BrandConfig
+└── types.ts          Shared const-as-object enums + BrandConfig
+```
+
+## Hard rules
+
+- **No `any`** (use `unknown` + narrowing). **Const-as-object enums**, never string-literal unions in signatures.
+- **Named exports only.** **No CSS framework lock-in** — inline `style` / `var(--md-*)`, accept `className`.
+- Sections theme from `var(--md-<role>)`, never from a hand-authored palette.
+
+## Build + publish
+
+- `bun run build` (tsup + `scripts/add-use-client.mjs`) → `dist/`. `bun run typecheck` + `bun run lint` green before commit.
+- `npm pack` → tgz (consumers currently vendor the tgz under `<app>/vendor/`). To publish: `npm publish` to GitHub Packages needs `NODE_AUTH_TOKEN` with `write:packages` (same as `@021is/spine-*`). **Only publish on Edvard's explicit OK.**
+- Bump `version` on any change; consumers re-vendor the new tgz + `bun install`.
+
+## Active threads
+
+- **v0.3.0 (current) — generic + MD3.** ✅ Ripped out all zeropost/postal content (icons, mailbox marks, FlagDroop/Stamp motions, forest/cream defaults). Added the MD3 color engine + seed-based `defineBrand`. Sections render consumer content (Icons/Motion) + the full MD3 role set (Colors). `private:false`, publishable.
+- **v0.4.0 — export CLI.** `npx brand-studio export ./brand.config.ts` → icon.svg / apple-icon.png / og.png (satori/resvg).
+- **v1.0.0 — visual editor + plugin API.**
+
+## See
+
+- `../axon/knowledge/spine-rules.md` · `../axon/knowledge/code.md`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 edvone (Edvard Grei)
+
+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

@@ -0,0 +1,117 @@
+<h1 align="center">@021.is/brand-studio</h1>
+
+<p align="center">
+  <strong>Generic MD3 brand toolkit for React.</strong><br/>
+  Seed colour to a full light + dark Material Design 3 role set, composable SVG primitives, a mountable <code>/brand</code> page. Ships no brand content.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@021.is/brand-studio"><img src="https://img.shields.io/npm/v/@021.is/brand-studio.svg?color=2d2d2d" alt="npm" /></a>
+  <a href="https://www.npmjs.com/package/@021.is/brand-studio"><img src="https://img.shields.io/npm/dm/@021.is/brand-studio.svg?color=666" alt="downloads" /></a>
+  <a href="https://github.com/021is/brand-studio/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-black.svg" alt="MIT" /></a>
+  <a href="https://bundlephobia.com/package/@021.is/brand-studio"><img src="https://img.shields.io/bundlephobia/minzip/@021.is/brand-studio?label=min%2Bgzip&color=black" alt="bundle size" /></a>
+</p>
+
+---
+
+## Why
+
+Brand work in a React app usually splits between hand-authored hex palettes that drift across light + dark, hand-drawn marks that get pasted into every product, and a `/brand` page that nobody maintains. brand-studio replaces all three with one toolkit:
+
+- **Seed in, full scheme out.** One hex seed produces a contrast-correct MD3 role set for both light and dark via Google's `@material/material-color-utilities` (HCT).
+- **Composable SVG primitives.** `Squircle`, `Ring`, `Disc`, plus generic loading marks and motion helpers. Everything paints from `currentColor` or the MD3 vars the toolkit installs, so consumer-side theming is one line.
+- **A mountable `/brand` page.** Drop `<BrandStudio>` on a catch-all route and you get a live brand kit (overview · logo · colors · type · icons · motion · download) themed from your seed.
+- **Brand-content free.** No logos, no icon catalog, no hardcoded palette. Pass your own marks via `staticLogo` / `animatedLogo` / `icons`.
+
+## Install
+
+```bash
+bun add @021.is/brand-studio
+# or
+npm install @021.is/brand-studio
+```
+
+Peers: `react ^19`, `react-dom ^19`, `framer-motion ^11 || ^12`.
+
+## Declare your brand
+
+```ts
+// brand.config.ts
+import { defineBrand } from "@021.is/brand-studio/define";
+
+export default defineBrand({
+  name: "Acme",
+  tagline: "We make things.",
+  color: {
+    seed: "#3B82F6",      // required — the MD3 scheme derives from this
+    tertiary: "#22D3EE",  // optional accent
+    // secondary, neutral, contrastLevel (-1..1), variant, overrides also supported
+  },
+  type: { sans: "Inter", mono: "JetBrains Mono" },
+  voice: ["Plain. Not corporate.", "Flat price. No surprises."],
+});
+```
+
+`defineBrand` eagerly resolves `config.scheme` (the full `{ light, dark }` role set) so downstream consumers never wait on a derivation.
+
+## Mount the brand page
+
+```tsx
+// app/brand/[[...path]]/page.tsx
+import config from "@/../brand.config";
+import { BrandStudio } from "@021.is/brand-studio";
+import { MyLogo, MyAnimatedMark } from "@/brand/Logo";
+
+export default async function BrandPage({ params }: { params: Promise<{ path?: string[] }> }) {
+  const { path = [] } = await params;
+  return (
+    <BrandStudio
+      config={config}
+      route={path}
+      basePath="/brand"
+      staticLogo={<MyLogo />}
+      animatedLogo={<MyAnimatedMark />}
+      icons={[{ node: <MyGlyph />, label: "glyph" }]}
+    />
+  );
+}
+```
+
+`<BrandStudio>` injects the MD3 role set as `--md-*` CSS vars (light by default, dark under an ancestor `.dark`) and themes itself from them — contrast guaranteed in both modes without writing CSS.
+
+## Use the colour engine directly
+
+```ts
+import { generateScheme, schemeToCssText } from "@021.is/brand-studio/color";
+
+const scheme = generateScheme({ seed: "#2EE5A8", tertiary: "#94B5F7" });
+// scheme.light.primary, scheme.dark.onSurface, ...
+
+const css = schemeToCssText(scheme);
+// ":root { --md-primary: ... } .dark { --md-primary: ... }"
+```
+
+The engine supports `secondary`, `tertiary`, `neutral`, `neutralVariant`, `error`, `contrastLevel` (`-1.0..1.0`), `variant` (`tonalSpot` / `vibrant` / `expressive` / `neutral` / `monochrome` / `fidelity` / `content`), and an `overrides` map for any role you want to pin literally.
+
+## Exports
+
+| Subpath | What's in it |
+| --- | --- |
+| `.` | Everything — `BrandStudio`, `defineBrand`, shapes, motion, loading marks |
+| `/color` | `generateScheme`, `schemeToCssText`, role types, contrast helpers |
+| `/shapes` | `Squircle`, `Ring`, `Disc` |
+| `/motion` | `Sweep`, `Drift`, `PulseLoop`, `RingDraw`, `Wobble`, `AppearGrow`, `Sequence`, `Strikethrough` |
+| `/loading` | `SpinnerLoadingMark`, `RingLoadingMark`, `PulseLoadingMark`, `LoadingMark` dispatcher |
+| `/app` | `<BrandStudio>` + sections (when you want them standalone) |
+| `/define` | `defineBrand`, `BrandConfig` type |
+
+## Philosophy
+
+- **Colour from a seed, not hand-picked hex.** Hex defaults invite drift. The MD3 engine derives the entire palette, and contrast is part of the contract.
+- **Each project owns its logo and icons.** Passed as `ReactNode` props.
+- **Zero commercial runtime deps.** Framer Motion (MIT) as peer; `@material/material-color-utilities` (Apache-2.0) bundled. No SaaS, no editor lock-in.
+- **SSR-safe and Tailwind-agnostic.** Inline styles + CSS vars; never a framework class name.
+
+## License
+
+MIT © [edvone](https://edvone.dev)

package/dist/BrandStudio-D2DcT8Fu.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { B as BrandConfig } from './types-PWNYyaBF.js';
+
+type BrandIcon = {
+    node: ReactNode;
+    label?: string;
+};
+type BrandStudioProps = {
+    config: BrandConfig;
+    /** URL-segments past the mount point, e.g. `["logo"]` for `/brand/logo`. */
+    route?: string[];
+    /** Mount path (no trailing slash). Default `/brand`. */
+    basePath?: string;
+    /** Host app's static brand mark (Logo + Icons + Download sections). */
+    staticLogo?: ReactNode;
+    /** Optional dark-surface variant of the static mark (Download). */
+    staticLogoDark?: ReactNode;
+    /** Host app's animated brand mark (Logo + Motion loading demo). */
+    animatedLogo?: ReactNode;
+    /** Host app's own glyphs for the Icons section. The lib ships none. */
+    icons?: BrandIcon[];
+};
+declare function BrandStudio({ config, route, basePath, staticLogo, staticLogoDark, animatedLogo, icons, }: BrandStudioProps): react_jsx_runtime.JSX.Element;
+
+export { type BrandIcon as B, BrandStudio as a, type BrandStudioProps as b };

package/dist/app/index.d.ts

@@ -0,0 +1,25 @@
+export { B as BrandIcon, a as BrandStudio, b as BrandStudioProps } from '../BrandStudio-D2DcT8Fu.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { a as BrandStudioSection } from '../types-PWNYyaBF.js';
+export { c as contrastBadge, a as contrastRatio, r as relativeLuminance } from '../contrast-TVW3pzdd.js';
+import '../generateScheme-BDDcIzA3.js';
+
+type NavItem = {
+    section: BrandStudioSection;
+    label: string;
+    href: string;
+};
+declare function buildNavigation(basePath: string): NavItem[];
+type NavigationProps = {
+    current: BrandStudioSection;
+    basePath: string;
+    renderLink: (props: {
+        href: string;
+        children: ReactNode;
+        isActive: boolean;
+    }) => ReactNode;
+};
+declare function Navigation({ current, basePath, renderLink }: NavigationProps): react_jsx_runtime.JSX.Element;
+
+export { type NavItem, Navigation, type NavigationProps, buildNavigation };

package/dist/app/index.js

@@ -0,0 +1,4 @@
+"use client";
+export { BrandStudio, Navigation, buildNavigation } from '../chunk-Z2DJJJDC.js';
+import '../chunk-55AYEWNQ.js';
+export { contrastBadge, contrastRatio, relativeLuminance } from '../chunk-JQV3ASME.js';

package/dist/chunk-55AYEWNQ.js

@@ -0,0 +1,84 @@
+"use client";
+import { motion } from 'framer-motion';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/types.ts
+var LoadingVariant = {
+  Spinner: "spinner",
+  Ring: "ring",
+  Pulse: "pulse"
+};
+var BrandStudioSection = {
+  Overview: "overview",
+  Logo: "logo",
+  Colors: "colors",
+  Typography: "typography",
+  Icons: "icons",
+  Motion: "motion",
+  Download: "download"
+};
+var MotionState = {
+  Idle: "idle",
+  Loading: "loading",
+  Success: "success",
+  Empty: "empty"
+};
+function SpinnerLoadingMark({
+  size = 200,
+  background = "transparent",
+  defs,
+  foreground = "currentColor",
+  weight = 18,
+  cycleMs = 900,
+  className,
+  style,
+  ariaLabel = "Loading"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: size,
+      height: size,
+      role: "img",
+      "aria-label": ariaLabel,
+      className,
+      style,
+      children: [
+        defs ? /* @__PURE__ */ jsx("defs", { children: defs }) : null,
+        background !== "transparent" ? /* @__PURE__ */ jsx("rect", { width: "256", height: "256", rx: "56", fill: background }) : null,
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: 128,
+            cy: 128,
+            r: 74,
+            fill: "none",
+            stroke: foreground,
+            strokeWidth: weight,
+            opacity: 0.2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: 128,
+            cy: 128,
+            r: 74,
+            fill: "none",
+            stroke: foreground,
+            strokeWidth: weight,
+            strokeLinecap: "round",
+            strokeDasharray: `${(74 * 2 * Math.PI * 0.25).toFixed(1)} ${(74 * 2 * Math.PI).toFixed(1)}`,
+            style: { transformOrigin: "128px 128px", transformBox: "view-box" },
+            animate: { rotate: 360 },
+            transition: { duration: cycleMs / 1e3, ease: "linear", repeat: Number.POSITIVE_INFINITY }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { BrandStudioSection, LoadingVariant, MotionState, SpinnerLoadingMark };

package/dist/chunk-7325RQRP.js

@@ -0,0 +1,275 @@
+"use client";
+import { motion } from 'framer-motion';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Children, isValidElement, useId } from 'react';
+
+function AppearGrow({
+  children,
+  delay = 0,
+  duration = 600,
+  from = 0,
+  to = 1,
+  origin = "50% 50%",
+  loop = false
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.g,
+    {
+      style: { transformOrigin: origin, transformBox: "fill-box" },
+      initial: { opacity: 0, scale: from },
+      animate: { opacity: 1, scale: to },
+      transition: {
+        delay: delay / 1e3,
+        duration: duration / 1e3,
+        ease: [0.16, 1, 0.3, 1],
+        repeat: loop ? Number.POSITIVE_INFINITY : 0,
+        repeatType: "loop",
+        repeatDelay: 0.6
+      },
+      children
+    }
+  );
+}
+function RingDraw({
+  cx = 128,
+  cy = 128,
+  r = 74,
+  strokeWidth = 40,
+  color = "currentColor",
+  duration = 700,
+  delay = 0,
+  loop = false,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.circle,
+    {
+      cx,
+      cy,
+      r,
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      className,
+      style,
+      initial: { pathLength: 0, opacity: 0 },
+      animate: { pathLength: 1, opacity: 1 },
+      transition: {
+        delay: delay / 1e3,
+        duration: duration / 1e3,
+        ease: "easeInOut",
+        opacity: { duration: 0.15, delay: delay / 1e3 },
+        repeat: loop ? Number.POSITIVE_INFINITY : 0,
+        repeatType: "loop",
+        repeatDelay: 1.5
+      }
+    }
+  );
+}
+function PulseLoop({
+  children,
+  from = 0.92,
+  to = 1.06,
+  duration = 1600,
+  origin = "50% 50%",
+  fadeWithScale = false
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.g,
+    {
+      style: { transformOrigin: origin, transformBox: "fill-box" },
+      animate: fadeWithScale ? { scale: [from, to, from], opacity: [0.85, 1, 0.85] } : { scale: [from, to, from] },
+      transition: {
+        duration: duration / 1e3,
+        ease: "easeInOut",
+        repeat: Number.POSITIVE_INFINITY,
+        repeatType: "loop"
+      },
+      children
+    }
+  );
+}
+function SequenceStep(_) {
+  return null;
+}
+function Sequence({ children, loop = false, delay = 0, loopGap = 600 }) {
+  const steps = [];
+  let cursor = delay;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const stepProps = child.props;
+    const duration = stepProps.duration ?? 600;
+    const gap = stepProps.gap ?? 0;
+    const startMs = cursor + gap;
+    const endMs = startMs + duration;
+    steps.push({
+      startMs,
+      endMs,
+      ease: stepProps.ease ?? [0.16, 1, 0.3, 1],
+      persist: stepProps.persist ?? false,
+      child: stepProps.children
+    });
+    cursor = endMs;
+  });
+  const totalMs = cursor + loopGap;
+  const totalSec = totalMs / 1e3;
+  return /* @__PURE__ */ jsx(Fragment, { children: steps.map((step, i) => {
+    const t0 = step.startMs / totalMs;
+    const t1 = Math.min(1, (step.startMs + 120) / totalMs);
+    const t2 = step.persist ? 1 : step.endMs / totalMs;
+    const t3 = step.persist ? 1 : Math.min(1, (step.endMs + 200) / totalMs);
+    const values = step.persist ? [0, 0, 1, 1] : [0, 0, 1, 1, 0];
+    const times = step.persist ? [0, t0, t1, 1] : [0, t0, t1, t2, t3];
+    return /* @__PURE__ */ jsx(
+      motion.g,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: values },
+        transition: {
+          duration: totalSec,
+          times,
+          ease: "linear",
+          repeat: loop ? Number.POSITIVE_INFINITY : 0,
+          repeatType: "loop"
+        },
+        children: step.child
+      },
+      i
+    );
+  }) });
+}
+Sequence.Step = SequenceStep;
+function Strikethrough({
+  x1,
+  y1,
+  x2,
+  y2,
+  color = "currentColor",
+  strokeWidth = 6,
+  duration = 360,
+  delay = 0,
+  loop = false,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.line,
+    {
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      className,
+      style,
+      initial: { pathLength: 0, opacity: 0 },
+      animate: { pathLength: 1, opacity: 1 },
+      transition: {
+        duration: duration / 1e3,
+        delay: delay / 1e3,
+        ease: [0.65, 0, 0.35, 1],
+        opacity: { duration: 0.1, delay: delay / 1e3 },
+        repeat: loop ? Number.POSITIVE_INFINITY : 0,
+        repeatType: "loop",
+        repeatDelay: 1.2
+      }
+    }
+  );
+}
+function Sweep({
+  children,
+  width = 256,
+  height = 256,
+  direction = "left-to-right",
+  delay = 0,
+  duration = 700,
+  loop = false
+}) {
+  const id = useId().replace(/:/g, "");
+  const clipId = `bs-sweep-${id}`;
+  const isHorizontal = direction === "left-to-right" || direction === "right-to-left";
+  const from = direction === "left-to-right" || direction === "top-to-bottom" ? 0 : isHorizontal ? width : height;
+  const to = direction === "left-to-right" || direction === "top-to-bottom" ? isHorizontal ? width : height : 0;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: isHorizontal ? /* @__PURE__ */ jsx(
+      motion.rect,
+      {
+        x: direction === "left-to-right" ? 0 : void 0,
+        y: 0,
+        height,
+        initial: { width: from },
+        animate: { width: to },
+        transition: {
+          duration: duration / 1e3,
+          delay: delay / 1e3,
+          ease: [0.16, 1, 0.3, 1],
+          repeat: loop ? Number.POSITIVE_INFINITY : 0,
+          repeatType: "loop",
+          repeatDelay: 1.2
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      motion.rect,
+      {
+        x: 0,
+        y: direction === "top-to-bottom" ? 0 : void 0,
+        width,
+        initial: { height: from },
+        animate: { height: to },
+        transition: {
+          duration: duration / 1e3,
+          delay: delay / 1e3,
+          ease: [0.16, 1, 0.3, 1],
+          repeat: loop ? Number.POSITIVE_INFINITY : 0,
+          repeatType: "loop",
+          repeatDelay: 1.2
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children })
+  ] });
+}
+function Wobble({
+  children,
+  amplitude = 6,
+  duration = 1400,
+  origin = "50% 100%",
+  delay = 0
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.g,
+    {
+      style: { transformOrigin: origin, transformBox: "fill-box" },
+      animate: { rotate: [-amplitude, amplitude, -amplitude] },
+      transition: {
+        duration: duration / 1e3,
+        delay: delay / 1e3,
+        ease: "easeInOut",
+        repeat: Number.POSITIVE_INFINITY,
+        repeatType: "loop"
+      },
+      children
+    }
+  );
+}
+function Drift({ children, dx = 0, dy = 4, duration = 3e3 }) {
+  return /* @__PURE__ */ jsx(
+    motion.g,
+    {
+      animate: { x: [0, dx, 0], y: [0, dy, 0] },
+      transition: {
+        duration: duration / 1e3,
+        ease: "easeInOut",
+        repeat: Number.POSITIVE_INFINITY,
+        repeatType: "loop"
+      },
+      children
+    }
+  );
+}
+
+export { AppearGrow, Drift, PulseLoop, RingDraw, Sequence, SequenceStep, Strikethrough, Sweep, Wobble };