feat: add brand strip customization to BackgroundPanel

- Implemented a new section in BackgroundPanel for configuring a brand strip.
- Added options for enabling/disabling the brand strip, setting its position, height, color, text, text color, font family, and font size.
- Integrated FONT_FAMILIES for font selection in the brand strip.
- Updated canvasStore to include default values for the brand strip.
- Enhanced TextInspector and CodeInspector to allow font loading and selection with previews.
- Created a FontLoader component to manage font loading from Google Fonts.
- Added LayersPanel for managing canvas elements with improved UI and functionality.
- Introduced fontLoader utility to handle dynamic font loading.

src/utils/fontLoader.ts

@@ -0,0 +1,28 @@
+import { GOOGLE_FONTS } from '../types';
+
+// Track loaded fonts to avoid duplicate loading
+const loadedFonts = new Set<string>();
+
+export const loadFont = (fontName: string) => {
+  if (loadedFonts.has(fontName)) return;
+  
+  const fontConfig = GOOGLE_FONTS.find(f => f.name === fontName);
+  if (!fontConfig) return;
+  
+  // Check if link already exists
+  const existingLink = document.querySelector(`link[href="${fontConfig.url}"]`);
+  if (existingLink) {
+    loadedFonts.add(fontName);
+    return;
+  }
+  
+  const link = document.createElement('link');
+  link.href = fontConfig.url;
+  link.rel = 'stylesheet';
+  document.head.appendChild(link);
+  loadedFonts.add(fontName);
+};
+
+export const loadAllFonts = () => {
+  GOOGLE_FONTS.forEach(font => loadFont(font.name));
+};