@rehover/icons 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/index.js

@@ -450,7 +450,7 @@ function compileSpec(spec, paths) {
 }
 
 // lib/generators/runtime-template.generated.ts
-var FLUX_RUNTIME_TS = '/**\r\n * Rehover animation runtime \u2014 framework-agnostic, dependency-free, and safe to\r\n * copy into your project. Every generated icon (Vue/Svelte/Angular/Astro) ships\r\n * its SVG markup with `data-flux` targets plus a compiled `plan`, then calls\r\n * `animateIcon(root, plan, props)` from here. All trigger behavior lives in this\r\n * one file, so it is identical across frameworks.\r\n *\r\n * This file has no imports on purpose: it is emitted verbatim next to your icons\r\n * (as `flux-runtime.ts`) so nothing has to be installed. Tweak it freely.\r\n */\r\n\r\n/** What event starts an icon\'s animation. */\r\nexport type AnimationTrigger =\r\n  | "hover"\r\n  | "hoverHold"\r\n  | "click"\r\n  | "inView"\r\n  | "autoplay"\r\n  | "none";\r\n\r\n/** One element\'s compiled animation, keyed by its `data-flux` target. */\r\nexport interface StepAnimation {\r\n  /** Matches the `data-flux` attribute on the element this animates. */\r\n  key: string;\r\n  /** Full keyframes (round-trip or destination) for hover/click/inView/autoplay. */\r\n  active: Keyframe[];\r\n  /** Rest \u2192 peak keyframes for `hoverHold` (the return is the reverse of this). */\r\n  hold: Keyframe[];\r\n  /** Base duration in seconds (before the `speed` prop divides it). */\r\n  duration: number;\r\n  /** Base delay in seconds (before `speed`; the `delay` prop is added at runtime). */\r\n  delay: number;\r\n  /** CSS timing-function string. */\r\n  easing: string;\r\n  /** Loops regardless of the `loop` prop (continuous/`repeat` steps). */\r\n  alwaysLoop: boolean;\r\n}\r\n\r\n/** What the runtime needs from a compiled plan. */\r\nexport interface RuntimePlan {\r\n  /** Per-element animations. */\r\n  animations: StepAnimation[];\r\n  /** Whether the icon autostarts (continuous specs). */\r\n  continuous: boolean;\r\n}\r\n\r\n/** The runtime-tunable props that map to the icon\'s public API. */\r\nexport interface IconRuntimeProps {\r\n  trigger: AnimationTrigger;\r\n  speed: number;\r\n  loop: boolean;\r\n  delay: number;\r\n}\r\n\r\n/** Handle returned by {@link animateIcon} for prop updates and teardown. */\r\nexport interface IconController {\r\n  /** Re-wire for new props (e.g. the playground changing `trigger`). */\r\n  update(props: IconRuntimeProps): void;\r\n  /** Remove all listeners/observers and cancel running animations. */\r\n  destroy(): void;\r\n}\r\n\r\ntype Variant = "active" | "hold";\r\n\r\ninterface Bound {\r\n  anim: StepAnimation;\r\n  el: Element;\r\n}\r\n\r\n/** Attach the animation runtime to an already-rendered icon root. */\r\nexport function animateIcon(\r\n  root: SVGSVGElement,\r\n  plan: RuntimePlan,\r\n  initialProps: IconRuntimeProps,\r\n): IconController {\r\n  let props = initialProps;\r\n\r\n  // Resolve each animation\'s DOM target once.\r\n  const bound: Bound[] = [];\r\n  for (const anim of plan.animations) {\r\n    const el = root.querySelector(`[data-flux="${anim.key}"]`);\r\n    if (el) bound.push({ anim, el });\r\n  }\r\n\r\n  // The currently-playing Animation per target (for restart/reverse).\r\n  const current = new Map<string, Animation>();\r\n  const cleanups: Array<() => void> = [];\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function makeAnimation(b: Bound, variant: Variant): Animation {\r\n    const { anim } = b;\r\n    const keyframes = variant === "hold" ? anim.hold : anim.active;\r\n    const loops = variant === "active" && (anim.alwaysLoop || props.loop);\r\n    return b.el.animate(keyframes, {\r\n      duration: (anim.duration / props.speed) * 1000,\r\n      delay: ((anim.delay + props.delay) / props.speed) * 1000,\r\n      easing: anim.easing,\r\n      fill: "forwards",\r\n      iterations: loops ? Infinity : 1,\r\n    });\r\n  }\r\n\r\n  /** (Re)start a variant on every target, cancelling any in-flight run. */\r\n  function play(variant: Variant): void {\r\n    for (const b of bound) {\r\n      current.get(b.anim.key)?.cancel();\r\n      current.set(b.anim.key, makeAnimation(b, variant));\r\n    }\r\n  }\r\n\r\n  /** Reverse the held pose back to rest (smooth, from the current position). */\r\n  function reverseToRest(): void {\r\n    for (const b of bound) {\r\n      const running = current.get(b.anim.key);\r\n      if (running) running.reverse();\r\n    }\r\n  }\r\n\r\n  function on(type: string, handler: EventListener): void {\r\n    root.addEventListener(type, handler);\r\n    cleanups.push(() => root.removeEventListener(type, handler));\r\n  }\r\n\r\n  /** Tear down listeners/observers and stop animations (keeps final pose). */\r\n  function teardown(): void {\r\n    for (const c of cleanups) c();\r\n    cleanups.length = 0;\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  function setup(): void {\r\n    teardown();\r\n\r\n    // Accessibility reflects interactivity and stays in sync with `trigger`.\r\n    if (props.trigger === "click") {\r\n      root.setAttribute("role", "button");\r\n      root.setAttribute("tabindex", "0");\r\n    } else {\r\n      root.setAttribute("role", "img");\r\n      root.removeAttribute("tabindex");\r\n    }\r\n\r\n    // Continuous specs and autoplay start immediately.\r\n    if (plan.continuous || props.trigger === "autoplay") play("active");\r\n\r\n    switch (props.trigger) {\r\n      case "hover":\r\n        on("mouseenter", () => play("active"));\r\n        on("focus", () => play("active"));\r\n        break;\r\n      case "hoverHold":\r\n        on("mouseenter", () => play("hold"));\r\n        on("mouseleave", () => reverseToRest());\r\n        on("focus", () => play("hold"));\r\n        on("blur", () => reverseToRest());\r\n        break;\r\n      case "click":\r\n        on("click", () => play("active"));\r\n        on("keydown", (e) => {\r\n          const key = (e as KeyboardEvent).key;\r\n          if (key === "Enter" || key === " ") {\r\n            e.preventDefault();\r\n            play("active");\r\n          }\r\n        });\r\n        break;\r\n      case "inView":\r\n        observer = new IntersectionObserver(\r\n          (entries) => {\r\n            if (entries.some((entry) => entry.isIntersecting)) {\r\n              play("active");\r\n              observer?.disconnect();\r\n              observer = null;\r\n            }\r\n          },\r\n          { threshold: 0.5 },\r\n        );\r\n        observer.observe(root);\r\n        break;\r\n    }\r\n  }\r\n\r\n  setup();\r\n\r\n  return {\r\n    update(next: IconRuntimeProps) {\r\n      props = next;\r\n      // Reset every target to rest before re-wiring for the new props.\r\n      for (const a of current.values()) a.cancel();\r\n      current.clear();\r\n      setup();\r\n    },\r\n    destroy() {\r\n      teardown();\r\n      for (const a of current.values()) a.cancel();\r\n      current.clear();\r\n    },\r\n  };\r\n}\r\n';
+var REHOVER_RUNTIME_TS = '/**\r\n * Rehover animation runtime \u2014 framework-agnostic, dependency-free, and safe to\r\n * copy into your project. Every generated icon (Vue/Svelte/Angular/Astro) ships\r\n * its SVG markup with `data-rehover` targets plus a compiled `plan`, then calls\r\n * `animateIcon(root, plan, props)` from here. All trigger behavior lives in this\r\n * one file, so it is identical across frameworks.\r\n *\r\n * This file has no imports on purpose: it is emitted verbatim next to your icons\r\n * (as `rehover-runtime.ts`) so nothing has to be installed. Tweak it freely.\r\n */\r\n\r\n/** What event starts an icon\'s animation. */\r\nexport type AnimationTrigger =\r\n  | "hover"\r\n  | "hoverHold"\r\n  | "click"\r\n  | "inView"\r\n  | "autoplay"\r\n  | "none";\r\n\r\n/** One element\'s compiled animation, keyed by its `data-rehover` target. */\r\nexport interface StepAnimation {\r\n  /** Matches the `data-rehover` attribute on the element this animates. */\r\n  key: string;\r\n  /** Full keyframes (round-trip or destination) for hover/click/inView/autoplay. */\r\n  active: Keyframe[];\r\n  /** Rest \u2192 peak keyframes for `hoverHold` (the return is the reverse of this). */\r\n  hold: Keyframe[];\r\n  /** Base duration in seconds (before the `speed` prop divides it). */\r\n  duration: number;\r\n  /** Base delay in seconds (before `speed`; the `delay` prop is added at runtime). */\r\n  delay: number;\r\n  /** CSS timing-function string. */\r\n  easing: string;\r\n  /** Loops regardless of the `loop` prop (continuous/`repeat` steps). */\r\n  alwaysLoop: boolean;\r\n}\r\n\r\n/** What the runtime needs from a compiled plan. */\r\nexport interface RuntimePlan {\r\n  /** Per-element animations. */\r\n  animations: StepAnimation[];\r\n  /** Whether the icon autostarts (continuous specs). */\r\n  continuous: boolean;\r\n}\r\n\r\n/** The runtime-tunable props that map to the icon\'s public API. */\r\nexport interface IconRuntimeProps {\r\n  trigger: AnimationTrigger;\r\n  speed: number;\r\n  loop: boolean;\r\n  delay: number;\r\n}\r\n\r\n/** Handle returned by {@link animateIcon} for prop updates and teardown. */\r\nexport interface IconController {\r\n  /** Re-wire for new props (e.g. the playground changing `trigger`). */\r\n  update(props: IconRuntimeProps): void;\r\n  /** Remove all listeners/observers and cancel running animations. */\r\n  destroy(): void;\r\n}\r\n\r\ntype Variant = "active" | "hold";\r\n\r\ninterface Bound {\r\n  anim: StepAnimation;\r\n  el: Element;\r\n}\r\n\r\n/** Attach the animation runtime to an already-rendered icon root. */\r\nexport function animateIcon(\r\n  root: SVGSVGElement,\r\n  plan: RuntimePlan,\r\n  initialProps: IconRuntimeProps,\r\n): IconController {\r\n  let props = initialProps;\r\n\r\n  // Resolve each animation\'s DOM target once.\r\n  const bound: Bound[] = [];\r\n  for (const anim of plan.animations) {\r\n    const el = root.querySelector(`[data-rehover="${anim.key}"]`);\r\n    if (el) bound.push({ anim, el });\r\n  }\r\n\r\n  // The currently-playing Animation per target (for restart/reverse).\r\n  const current = new Map<string, Animation>();\r\n  const cleanups: Array<() => void> = [];\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function makeAnimation(b: Bound, variant: Variant): Animation {\r\n    const { anim } = b;\r\n    const keyframes = variant === "hold" ? anim.hold : anim.active;\r\n    const loops = variant === "active" && (anim.alwaysLoop || props.loop);\r\n    return b.el.animate(keyframes, {\r\n      duration: (anim.duration / props.speed) * 1000,\r\n      delay: ((anim.delay + props.delay) / props.speed) * 1000,\r\n      easing: anim.easing,\r\n      fill: "forwards",\r\n      iterations: loops ? Infinity : 1,\r\n    });\r\n  }\r\n\r\n  /** (Re)start a variant on every target, cancelling any in-flight run. */\r\n  function play(variant: Variant): void {\r\n    for (const b of bound) {\r\n      current.get(b.anim.key)?.cancel();\r\n      current.set(b.anim.key, makeAnimation(b, variant));\r\n    }\r\n  }\r\n\r\n  /** Reverse the held pose back to rest (smooth, from the current position). */\r\n  function reverseToRest(): void {\r\n    for (const b of bound) {\r\n      const running = current.get(b.anim.key);\r\n      if (running) running.reverse();\r\n    }\r\n  }\r\n\r\n  function on(type: string, handler: EventListener): void {\r\n    root.addEventListener(type, handler);\r\n    cleanups.push(() => root.removeEventListener(type, handler));\r\n  }\r\n\r\n  /** Tear down listeners/observers and stop animations (keeps final pose). */\r\n  function teardown(): void {\r\n    for (const c of cleanups) c();\r\n    cleanups.length = 0;\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  function setup(): void {\r\n    teardown();\r\n\r\n    // Accessibility reflects interactivity and stays in sync with `trigger`.\r\n    if (props.trigger === "click") {\r\n      root.setAttribute("role", "button");\r\n      root.setAttribute("tabindex", "0");\r\n    } else {\r\n      root.setAttribute("role", "img");\r\n      root.removeAttribute("tabindex");\r\n    }\r\n\r\n    // Continuous specs and autoplay start immediately.\r\n    if (plan.continuous || props.trigger === "autoplay") play("active");\r\n\r\n    switch (props.trigger) {\r\n      case "hover":\r\n        on("mouseenter", () => play("active"));\r\n        on("focus", () => play("active"));\r\n        break;\r\n      case "hoverHold":\r\n        on("mouseenter", () => play("hold"));\r\n        on("mouseleave", () => reverseToRest());\r\n        on("focus", () => play("hold"));\r\n        on("blur", () => reverseToRest());\r\n        break;\r\n      case "click":\r\n        on("click", () => play("active"));\r\n        on("keydown", (e) => {\r\n          const key = (e as KeyboardEvent).key;\r\n          if (key === "Enter" || key === " ") {\r\n            e.preventDefault();\r\n            play("active");\r\n          }\r\n        });\r\n        break;\r\n      case "inView":\r\n        observer = new IntersectionObserver(\r\n          (entries) => {\r\n            if (entries.some((entry) => entry.isIntersecting)) {\r\n              play("active");\r\n              observer?.disconnect();\r\n              observer = null;\r\n            }\r\n          },\r\n          { threshold: 0.5 },\r\n        );\r\n        observer.observe(root);\r\n        break;\r\n    }\r\n  }\r\n\r\n  setup();\r\n\r\n  return {\r\n    update(next: IconRuntimeProps) {\r\n      props = next;\r\n      // Reset every target to rest before re-wiring for the new props.\r\n      for (const a of current.values()) a.cancel();\r\n      current.clear();\r\n      setup();\r\n    },\r\n    destroy() {\r\n      teardown();\r\n      for (const a of current.values()) a.cancel();\r\n      current.clear();\r\n    },\r\n  };\r\n}\r\n';
 
 // lib/generators/vue.ts
 var DEFAULT_VUE_IMPORT_PATH = "@/components/icons";
@@ -518,7 +518,7 @@ function styleAttr(style) {
   return s ? ` style="${s}"` : "";
 }
 function shapeMarkup(node) {
-  const draw = node.drawKey ? ` data-flux="${node.drawKey}" pathLength="1" style="stroke-dasharray: 1"` : "";
+  const draw = node.drawKey ? ` data-rehover="${node.drawKey}" pathLength="1" style="stroke-dasharray: 1"` : "";
   const d = node.data;
   switch (d.type) {
     case "path":
@@ -534,7 +534,7 @@ function shapeMarkup(node) {
 function nodeMarkup(node, indent) {
   if (node.kind === "shape") return shapeMarkup(node);
   const child = nodeMarkup(node.child, `${indent}  `);
-  return `<g data-flux="${node.key}"${styleAttr(node.style)}>
+  return `<g data-rehover="${node.key}"${styleAttr(node.style)}>
 ${indent}  ${child}
 ${indent}</g>`;
 }
@@ -639,7 +639,7 @@ onUnmounted(() => controller?.destroy())
       importStatement: `import ${name} from '@/components/icons/${name}.vue';`,
       usageSnippet: `<${name} />`,
       dependencies: "none \u2014 self-contained (no npm install)",
-      runtime: { filename: `${RUNTIME_FILENAME}.ts`, code: FLUX_RUNTIME_TS }
+      runtime: { filename: `${RUNTIME_FILENAME}.ts`, code: REHOVER_RUNTIME_TS }
     };
   }
 };
@@ -807,6 +807,200 @@ var metadata3 = {
   animationDescription: "The bell rocks back and forth around its top mount, settling to center."
 };
 
+// icons/brain/paths.ts
+var brainPaths = {
+  leftHalf: {
+    type: "path",
+    d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"
+  },
+  rightHalf: {
+    type: "path",
+    d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"
+  },
+  veinCenter: { type: "path", d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" },
+  veinTopRight: { type: "path", d: "M17.599 6.5A3 3 0 0 0 13.6 3.4" },
+  veinTopLeft: { type: "path", d: "M6.4 6.5A3 3 0 0 1 10.4 3.4" },
+  veinMiddleRight: { type: "path", d: "M18.5 10.5A2.5 2.5 0 0 0 15 9" },
+  veinMiddleLeft: { type: "path", d: "M5.5 10.5A2.5 2.5 0 0 1 9 9" },
+  veinBottomRight: { type: "path", d: "M16.5 15.5A2.5 2.5 0 0 0 13 16" },
+  veinBottomLeft: { type: "path", d: "M7.5 15.5A2.5 2.5 0 0 1 11 16" }
+};
+
+// icons/brain/animation.spec.ts
+var brainSpec = {
+  elements: {
+    leftHalf: { id: "brain-left-half", description: "Left hemisphere outline" },
+    rightHalf: {
+      id: "brain-right-half",
+      description: "Right hemisphere outline"
+    },
+    veinCenter: {
+      id: "brain-vein-center",
+      description: "Central neural pathway"
+    },
+    veinTopLeft: {
+      id: "brain-vein-top-left",
+      description: "Top left neural pathway"
+    },
+    veinTopRight: {
+      id: "brain-vein-top-right",
+      description: "Top right neural pathway"
+    },
+    veinMiddleLeft: {
+      id: "brain-vein-middle-left",
+      description: "Middle left neural pathway"
+    },
+    veinMiddleRight: {
+      id: "brain-vein-middle-right",
+      description: "Middle right neural pathway"
+    },
+    veinBottomLeft: {
+      id: "brain-vein-bottom-left",
+      description: "Bottom left neural pathway"
+    },
+    veinBottomRight: {
+      id: "brain-vein-bottom-right",
+      description: "Bottom right neural pathway"
+    }
+  },
+  sequences: {
+    trigger: [
+      {
+        element: "veinCenter",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinCenter",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinTopRight",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        delay: 0.3,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinTopRight",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        delay: 0.3,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinTopLeft",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        delay: 0.3,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinTopLeft",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        delay: 0.3,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinMiddleRight",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        delay: 0.6,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinMiddleRight",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        delay: 0.6,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinMiddleLeft",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        delay: 0.6,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinMiddleLeft",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        delay: 0.6,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinBottomRight",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        delay: 0.9,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinBottomRight",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        delay: 0.9,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinBottomLeft",
+        property: "pathLength",
+        values: [1, 0, 1],
+        duration: 1.5,
+        delay: 0.9,
+        ease: "easeInOut"
+      },
+      {
+        element: "veinBottomLeft",
+        property: "opacity",
+        values: [1, 0.2, 1],
+        duration: 1.5,
+        delay: 0.9,
+        ease: "easeInOut"
+      }
+    ]
+  },
+  defaultTrigger: "inView",
+  defaultLoop: true
+};
+var animation_spec_default4 = brainSpec;
+
+// icons/brain/metadata.ts
+var metadata4 = {
+  name: "Brain",
+  slug: "brain",
+  category: "Technology",
+  tags: [
+    "brain",
+    "ai",
+    "artificial intelligence",
+    "mind",
+    "neural",
+    "thinking",
+    "machine learning"
+  ],
+  featured: false,
+  description: "A brain symbolizing artificial intelligence and neural networks.",
+  animationDescription: "The internal neural pathways sequentially pulse and redraw, representing active thinking and data processing."
+};
+
 // icons/card-flip/paths.ts
 var cardFlipPaths = {
   // Rounded card outline spanning x:4–20, y:6–18.
@@ -850,10 +1044,10 @@ var cardFlipSpec = {
   defaultTrigger: "hoverHold",
   perspective: 500
 };
-var animation_spec_default4 = cardFlipSpec;
+var animation_spec_default5 = cardFlipSpec;
 
 // icons/card-flip/metadata.ts
-var metadata4 = {
+var metadata5 = {
   name: "CardFlip",
   slug: "card-flip",
   category: "Objects",
@@ -897,10 +1091,10 @@ var checkSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default5 = checkSpec;
+var animation_spec_default6 = checkSpec;
 
 // icons/check/metadata.ts
-var metadata5 = {
+var metadata6 = {
   name: "Check",
   slug: "check",
   category: "Status",
@@ -945,10 +1139,10 @@ var clockSpec = {
   },
   defaultTrigger: "hoverHold"
 };
-var animation_spec_default6 = clockSpec;
+var animation_spec_default7 = clockSpec;
 
 // icons/clock/metadata.ts
-var metadata6 = {
+var metadata7 = {
   name: "Clock",
   slug: "clock",
   category: "Time",
@@ -960,75 +1154,48 @@ var metadata6 = {
 
 // icons/creating-file/paths.ts
 var creatingFilePaths = {
-  file: {
-    type: "path",
-    d: "M8 3h6l5 5v13H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
-  },
-  fold: {
-    type: "path",
-    d: "M10 11l1-.8 1.2 1.4 1-.9 1.2 1"
-  },
-  lineTop: {
-    type: "path",
-    d: "M10 11l1-.7 1.1 1.2 1-.8 1.2.9H16"
-  },
-  lineMiddle: {
-    type: "path",
-    d: "M10 14l.9-.5 1.2 1.5 1-.9 1.1.6H15"
-  },
-  lineBottom: {
-    type: "path",
-    d: "M10 17l1-.6 1 1 1.1-.7 1.1.8H16"
-  }
+  outline: { type: "path", d: "M6 4L14 4L18 8L18 20L6 20L6 4" },
+  fold: { type: "path", d: "M14 4L14 8L18 8" },
+  line1: { type: "path", d: "M9 10L15 10" },
+  line2: { type: "path", d: "M9 13L15 13" },
+  line3: { type: "path", d: "M9 16L12 16" }
 };
 
 // icons/creating-file/animation.spec.ts
 var creatingFileSpec = {
   elements: {
-    file: {
-      id: "creating-file-file",
-      description: "Document outline"
-    },
-    fold: {
-      id: "creating-file-fold",
-      description: "Folded page corner"
+    outline: {
+      id: "creating-file-outline",
+      description: "File outline with folded corner"
     },
-    lineTop: {
-      id: "creating-file-lineTop",
-      description: "Top content line"
-    },
-    lineMiddle: {
-      id: "creating-file-lineMiddle",
-      description: "Middle content line"
-    },
-    lineBottom: {
-      id: "creating-file-lineBottom",
-      description: "Bottom content line"
-    }
+    fold: { id: "creating-file-fold", description: "Folded corner detail" },
+    line1: { id: "creating-file-line1", description: "First text line" },
+    line2: { id: "creating-file-line2", description: "Second text line" },
+    line3: { id: "creating-file-line3", description: "Third text line" }
   },
   sequences: {
     trigger: [
       {
-        element: "lineTop",
+        element: "line1",
         property: "opacity",
-        values: [0.3, 1, 0.3],
-        duration: 0.35,
+        values: [1, 0.3, 1],
+        duration: 0.6,
         ease: "easeInOut"
       },
       {
-        element: "lineMiddle",
+        element: "line2",
         property: "opacity",
-        values: [0.3, 1, 0.3],
-        duration: 0.35,
-        delay: 0.12,
+        values: [1, 0.3, 1],
+        duration: 0.6,
+        delay: 0.2,
         ease: "easeInOut"
       },
       {
-        element: "lineBottom",
+        element: "line3",
         property: "opacity",
-        values: [0.3, 1, 0.3],
-        duration: 0.35,
-        delay: 0.24,
+        values: [1, 0.3, 1],
+        duration: 0.6,
+        delay: 0.4,
         ease: "easeInOut"
       }
     ]
@@ -1036,10 +1203,10 @@ var creatingFileSpec = {
   defaultTrigger: "inView",
   defaultLoop: true
 };
-var animation_spec_default7 = creatingFileSpec;
+var animation_spec_default8 = creatingFileSpec;
 
 // icons/creating-file/metadata.ts
-var metadata7 = {
+var metadata8 = {
   name: "CreatingFile",
   slug: "creating-file",
   category: "AI",
@@ -1100,10 +1267,10 @@ var doorSpec = {
   defaultTrigger: "hoverHold",
   perspective: 500
 };
-var animation_spec_default8 = doorSpec;
+var animation_spec_default9 = doorSpec;
 
 // icons/door/metadata.ts
-var metadata8 = {
+var metadata9 = {
   name: "Door",
   slug: "door",
   category: "Objects",
@@ -1154,10 +1321,10 @@ var downloadSpec = {
   },
   defaultTrigger: "hoverHold"
 };
-var animation_spec_default9 = downloadSpec;
+var animation_spec_default10 = downloadSpec;
 
 // icons/download/metadata.ts
-var metadata9 = {
+var metadata10 = {
   name: "Download",
   slug: "download",
   category: "Actions",
@@ -1235,10 +1402,10 @@ var externalLinkSpec = {
   },
   defaultTrigger: "hoverHold"
 };
-var animation_spec_default10 = externalLinkSpec;
+var animation_spec_default11 = externalLinkSpec;
 
 // icons/external-link/metadata.ts
-var metadata10 = {
+var metadata11 = {
   name: "ExternalLink",
   slug: "external-link",
   category: "Uncategorized",
@@ -1282,10 +1449,10 @@ var eyeSpec = {
   },
   defaultTrigger: "hoverHold"
 };
-var animation_spec_default11 = eyeSpec;
+var animation_spec_default12 = eyeSpec;
 
 // icons/eye/metadata.ts
-var metadata11 = {
+var metadata12 = {
   name: "Eye",
   slug: "eye",
   category: "Visibility",
@@ -1322,10 +1489,10 @@ var heartSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default12 = heartSpec;
+var animation_spec_default13 = heartSpec;
 
 // icons/heart/metadata.ts
-var metadata12 = {
+var metadata13 = {
   name: "Heart",
   slug: "heart",
   category: "Social",
@@ -1373,10 +1540,10 @@ var helpSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default13 = helpSpec;
+var animation_spec_default14 = helpSpec;
 
 // icons/help/metadata.ts
-var metadata13 = {
+var metadata14 = {
   name: "Help",
   slug: "help",
   category: "Interface",
@@ -1450,10 +1617,10 @@ var layersSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default14 = layersSpec;
+var animation_spec_default15 = layersSpec;
 
 // icons/layers/metadata.ts
-var metadata14 = {
+var metadata15 = {
   name: "Layers",
   slug: "layers",
   category: "Interface",
@@ -1490,10 +1657,10 @@ var refreshSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default15 = refreshSpec;
+var animation_spec_default16 = refreshSpec;
 
 // icons/refresh/metadata.ts
-var metadata15 = {
+var metadata16 = {
   name: "Refresh",
   slug: "refresh",
   category: "Interface",
@@ -1549,10 +1716,10 @@ var searchSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default16 = searchSpec;
+var animation_spec_default17 = searchSpec;
 
 // icons/search/metadata.ts
-var metadata16 = {
+var metadata17 = {
   name: "Search",
   slug: "search",
   category: "Interface",
@@ -1616,10 +1783,10 @@ var signalSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default17 = signalSpec;
+var animation_spec_default18 = signalSpec;
 
 // icons/signal/metadata.ts
-var metadata17 = {
+var metadata18 = {
   name: "Signal",
   slug: "signal",
   category: "Communication",
@@ -1629,6 +1796,75 @@ var metadata17 = {
   animationDescription: "The bars compress and spring back in a staggered cascade, like a pulse sweeping across the signal."
 };
 
+// icons/syncing/paths.ts
+var syncingPaths = {
+  arrowOuter: {
+    type: "path",
+    d: "M 21 12 A 9 9 0 1 1 12 3 C 14.52 3 16.93 4 18.74 5.74 L 21 8 M 21 3 v 5 h -5"
+  },
+  arrowInner: {
+    type: "path",
+    d: "M 7 12 A 5 5 0 1 0 12 17 C 10.6 17 9.26 16.44 8.26 15.47 L 7 14 M 12 14 h -5 v 5"
+  }
+};
+
+// icons/syncing/animation.spec.ts
+var syncingSpec = {
+  elements: {
+    arrowOuter: {
+      id: "syncing-arrow-outer",
+      description: "Outer clockwise arrow"
+    },
+    arrowInner: {
+      id: "syncing-arrow-inner",
+      description: "Inner counter-clockwise arrow"
+    }
+  },
+  sequences: {
+    trigger: [
+      {
+        element: "arrowOuter",
+        property: "rotate",
+        values: [0, 360, 360],
+        duration: 2.2,
+        ease: "easeInOut",
+        origin: { x: 12, y: 12 }
+      },
+      {
+        element: "arrowInner",
+        property: "rotate",
+        values: [0, -360, -360],
+        duration: 2.2,
+        ease: "easeInOut",
+        origin: { x: 12, y: 12 }
+      }
+    ]
+  },
+  defaultTrigger: "inView",
+  defaultLoop: true
+};
+var animation_spec_default19 = syncingSpec;
+
+// icons/syncing/metadata.ts
+var metadata19 = {
+  name: "Syncing",
+  slug: "syncing",
+  category: "System",
+  tags: [
+    "sync",
+    "syncing",
+    "refresh",
+    "update",
+    "loading",
+    "process",
+    "arrows",
+    "cycle"
+  ],
+  featured: false,
+  description: "Two concentric arrows indicating synchronization or background processing.",
+  animationDescription: "The two circular arrows rotate around a shared center in opposite directions, then align briefly before continuing."
+};
+
 // icons/user/paths.ts
 var userPaths = {
   shape: {
@@ -1666,10 +1902,10 @@ var userSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default18 = userSpec;
+var animation_spec_default20 = userSpec;
 
 // icons/user/metadata.ts
-var metadata18 = {
+var metadata20 = {
   name: "User",
   slug: "user",
   category: "Uncategorized",
@@ -1720,10 +1956,10 @@ var wifiSpec = {
   },
   defaultTrigger: "hover"
 };
-var animation_spec_default19 = wifiSpec;
+var animation_spec_default21 = wifiSpec;
 
 // icons/wifi/metadata.ts
-var metadata19 = {
+var metadata21 = {
   name: "Wifi",
   slug: "wifi",
   category: "Connectivity",
@@ -1738,22 +1974,24 @@ var ICON_SOURCES = {
   "badge-check": { paths: badgeCheckPaths, spec: animation_spec_default, metadata },
   "ball": { paths: ballPaths, spec: animation_spec_default2, metadata: metadata2 },
   "bell": { paths: bellPaths, spec: animation_spec_default3, metadata: metadata3 },
-  "card-flip": { paths: cardFlipPaths, spec: animation_spec_default4, metadata: metadata4 },
-  "check": { paths: checkPaths, spec: animation_spec_default5, metadata: metadata5 },
-  "clock": { paths: clockPaths, spec: animation_spec_default6, metadata: metadata6 },
-  "creating-file": { paths: creatingFilePaths, spec: animation_spec_default7, metadata: metadata7 },
-  "door": { paths: doorPaths, spec: animation_spec_default8, metadata: metadata8 },
-  "download": { paths: downloadPaths, spec: animation_spec_default9, metadata: metadata9 },
-  "external-link": { paths: externalLinkPaths, spec: animation_spec_default10, metadata: metadata10 },
-  "eye": { paths: eyePaths, spec: animation_spec_default11, metadata: metadata11 },
-  "heart": { paths: heartPaths, spec: animation_spec_default12, metadata: metadata12 },
-  "help": { paths: helpPaths, spec: animation_spec_default13, metadata: metadata13 },
-  "layers": { paths: layersPaths, spec: animation_spec_default14, metadata: metadata14 },
-  "refresh": { paths: refreshPaths, spec: animation_spec_default15, metadata: metadata15 },
-  "search": { paths: searchPaths, spec: animation_spec_default16, metadata: metadata16 },
-  "signal": { paths: signalPaths, spec: animation_spec_default17, metadata: metadata17 },
-  "user": { paths: userPaths, spec: animation_spec_default18, metadata: metadata18 },
-  "wifi": { paths: wifiPaths, spec: animation_spec_default19, metadata: metadata19 }
+  "brain": { paths: brainPaths, spec: animation_spec_default4, metadata: metadata4 },
+  "card-flip": { paths: cardFlipPaths, spec: animation_spec_default5, metadata: metadata5 },
+  "check": { paths: checkPaths, spec: animation_spec_default6, metadata: metadata6 },
+  "clock": { paths: clockPaths, spec: animation_spec_default7, metadata: metadata7 },
+  "creating-file": { paths: creatingFilePaths, spec: animation_spec_default8, metadata: metadata8 },
+  "door": { paths: doorPaths, spec: animation_spec_default9, metadata: metadata9 },
+  "download": { paths: downloadPaths, spec: animation_spec_default10, metadata: metadata10 },
+  "external-link": { paths: externalLinkPaths, spec: animation_spec_default11, metadata: metadata11 },
+  "eye": { paths: eyePaths, spec: animation_spec_default12, metadata: metadata12 },
+  "heart": { paths: heartPaths, spec: animation_spec_default13, metadata: metadata13 },
+  "help": { paths: helpPaths, spec: animation_spec_default14, metadata: metadata14 },
+  "layers": { paths: layersPaths, spec: animation_spec_default15, metadata: metadata15 },
+  "refresh": { paths: refreshPaths, spec: animation_spec_default16, metadata: metadata16 },
+  "search": { paths: searchPaths, spec: animation_spec_default17, metadata: metadata17 },
+  "signal": { paths: signalPaths, spec: animation_spec_default18, metadata: metadata18 },
+  "syncing": { paths: syncingPaths, spec: animation_spec_default19, metadata: metadata19 },
+  "user": { paths: userPaths, spec: animation_spec_default20, metadata: metadata20 },
+  "wifi": { paths: wifiPaths, spec: animation_spec_default21, metadata: metadata21 }
 };
 
 // lib/icon-sources.ts