From 58ac7bec73ccd6949f2c45d25d5e6469199ec300 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Wed, 17 Dec 2025 14:48:32 +0100
Subject: [PATCH] fix(houdini-utils): generate non-clashing IDs

---
 ...ils-4e6eb0e8-cb04-4972-84ca-bbd91a76aa68.json |  7 +++++++
 .../src/paint/fallback/fallbackPaintAnimation.ts |  9 +++++----
 .../fallback/util/generateFallbackId.test.ts     | 16 ++++++++++++++++
 .../paint/fallback/util/generateFallbackId.ts    |  9 +++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 change/@fluentui-contrib-houdini-utils-4e6eb0e8-cb04-4972-84ca-bbd91a76aa68.json
 create mode 100644 packages/houdini-utils/src/paint/fallback/util/generateFallbackId.test.ts
 create mode 100644 packages/houdini-utils/src/paint/fallback/util/generateFallbackId.ts

diff --git a/change/@fluentui-contrib-houdini-utils-4e6eb0e8-cb04-4972-84ca-bbd91a76aa68.json b/change/@fluentui-contrib-houdini-utils-4e6eb0e8-cb04-4972-84ca-bbd91a76aa68.json
new file mode 100644
index 00000000..2a261f98
--- /dev/null
+++ b/change/@fluentui-contrib-houdini-utils-4e6eb0e8-cb04-4972-84ca-bbd91a76aa68.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(houdini-utils): generate non-clashing IDs",
+  "packageName": "@fluentui-contrib/houdini-utils",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/houdini-utils/src/paint/fallback/fallbackPaintAnimation.ts b/packages/houdini-utils/src/paint/fallback/fallbackPaintAnimation.ts
index 6e4e1074..0b598438 100644
--- a/packages/houdini-utils/src/paint/fallback/fallbackPaintAnimation.ts
+++ b/packages/houdini-utils/src/paint/fallback/fallbackPaintAnimation.ts
@@ -12,6 +12,7 @@ import type {
   FallbackAnimationState,
   PaintWorklet,
 } from '../../types';
+import { generateFallbackId } from './util/generateFallbackId';
 
 const cannotDraw = {
   id: '',
@@ -24,8 +25,6 @@ const cannotDraw = {
   stop: () => {},
 };
 
-let flairFallbackId = 0;
-
 export const fallbackPaintAnimation = (
   targetEl: HTMLElement,
   paintWorklet: PaintWorklet,
@@ -36,13 +35,14 @@ export const fallbackPaintAnimation = (
     // eslint-disable-next-line no-restricted-globals
     targetDocument.defaultView ?? (window as Window & typeof globalThis);
 
+  const id = generateFallbackId();
   const state: FallbackAnimationState = {
     targetEl,
     targetWindow,
 
     ctx: null,
     mode: 'to-data-url',
-    id: `houdini-fallback-${++flairFallbackId}`,
+    id: `${id}-houdini-fallback`,
     wrapper: null,
     running: false,
     resizeObserver: null,
@@ -52,7 +52,8 @@ export const fallbackPaintAnimation = (
   // Create a wrapper for us to store these elements in so we avoid
   // thrashing the DOM with appends.
   if (!state.wrapper) {
-    const wrapperId = `houdini-fallback-wrapper-${flairFallbackId}`;
+    const wrapperId = `${id}-houdini-fallback-wrapper`;
+
     state.wrapper = appendWrapper(wrapperId, targetDocument.body);
   }
 
diff --git a/packages/houdini-utils/src/paint/fallback/util/generateFallbackId.test.ts b/packages/houdini-utils/src/paint/fallback/util/generateFallbackId.test.ts
new file mode 100644
index 00000000..38e5c9db
--- /dev/null
+++ b/packages/houdini-utils/src/paint/fallback/util/generateFallbackId.test.ts
@@ -0,0 +1,16 @@
+import { generateFallbackId } from './generateFallbackId';
+
+describe('generateFallbackId', () => {
+  it('should generate IDs with correct prefix', () => {
+    const id = generateFallbackId();
+    expect(id).toMatch(/^f-/);
+  });
+
+  it('should generate unique IDs', () => {
+    const ids = new Set<string>();
+    for (let i = 0; i < 1000; i++) {
+      ids.add(generateFallbackId());
+    }
+    expect(ids.size).toBe(1000);
+  });
+});
diff --git a/packages/houdini-utils/src/paint/fallback/util/generateFallbackId.ts b/packages/houdini-utils/src/paint/fallback/util/generateFallbackId.ts
new file mode 100644
index 00000000..b8f8616a
--- /dev/null
+++ b/packages/houdini-utils/src/paint/fallback/util/generateFallbackId.ts
@@ -0,0 +1,9 @@
+/**
+ * Generates a unique DOM ID for fallback animations.
+ * Fast and simple implementation using timestamp + random suffix.
+ */
+export function generateFallbackId(): string {
+  return `f-${Date.now().toString(36)}-${Math.random()
+    .toString(36)
+    .slice(2, 9)}`;
+}