@moises.ai/design-system 3.9.9 → 3.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.9",
+  "version": "3.9.10",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DataTable/DataTable.jsx

@@ -289,7 +289,7 @@ export const DataTable = ({
     return (
       <Flex align="center" gap="3">
         <ProductsBrandPattern
-          id={row.id}
+          title={row.title}
           size={48}
           className={styles.thumb}
           type={row.type}

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -1,37 +1,108 @@
+import { useState } from 'react'
 import classNames from 'classnames'
-import lyrics from './Patterns/thumb-song-lyrics.jpg'
-import mastering from './Patterns/thumb-song-master.jpg'
-import stems from './Patterns/thumb-song-stems.jpg'
-import studio from './Patterns/thumb-song-studio.jpg'
-import voice from './Patterns/thumb-song-voice.jpg'
+
+const palettes = {
+  lyrics: ['#0f2a4f', '#1a3a6b', '#2a5a8b', '#1a4a7b', '#3a6a9b', '#152e55'],
+  stems: ['#083a48', '#0a4a5a', '#1a5a6a', '#0f3a4a', '#2a6a7a', '#1a6070'],
+  voice: ['#3a1a0a', '#5a2a10', '#7a3a1a', '#4a2010', '#8a4a2a', '#6a3018'],
+  studio: ['#083838', '#0a4a4a', '#1a5a5a', '#0a3a3a', '#2a6a6a', '#0f5050'],
+  master: ['#1a1030', '#2a1a4a', '#3a2a5a', '#4a3a6a', '#2a1848', '#352060'],
+}
+
+function hashSeed(str) {
+  let h = 0
+  for (let i = 0; i < str.length; i++) {
+    h = (Math.imul(31, h) + str.charCodeAt(i)) | 0
+  }
+  return h >>> 0
+}
+
+function createRng(seed) {
+  let s = hashSeed(String(seed))
+  return () => {
+    s = (s + 0x6d2b79f5) | 0
+    let t = Math.imul(s ^ (s >>> 15), 1 | s)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+function generatePattern(type, seed) {
+  const rng = createRng(seed)
+  const colors = palettes[type] || palettes.lyrics
+  const pick = () => colors[Math.floor(rng() * colors.length)]
+  const uid = hashSeed(String(seed) + type)
+
+  const bg = pick()
+
+  const blobCount = 4 + Math.floor(rng() * 2)
+  const blobs = Array.from({ length: blobCount }, () => ({
+    cx: -10 + rng() * 120,
+    cy: -10 + rng() * 120,
+    r: 30 + rng() * 35,
+    fill: pick(),
+  }))
+
+  const blur = 18 + rng() * 10
+
+  return { uid, bg, blobs, blur }
+}
 
 export const ProductsBrandPattern = ({
   className,
   size = '40px',
   type = 'lyrics',
   cover,
+  title,
   ...props
 }) => {
-  const patterns = {
-    'stems': stems,
-    'voice': voice,
-    'studio': studio,
-    'master': mastering,
-    'lyrics': lyrics,
+  const [randomSeed] = useState(() => String(Math.random()))
+
+  if (cover) {
+    return (
+      <img
+        src={cover}
+        alt={`${type} pattern`}
+        width={size}
+        height={size}
+        draggable={false}
+        className={classNames(className)}
+        {...props}
+      />
+    )
   }
 
+  const effectiveSeed = title != null ? title : randomSeed
+  const { uid, bg, blobs, blur } = generatePattern(type, effectiveSeed)
+  const filterId = `bl-${uid}`
 
-  const pattern = cover || patterns[type]
   return (
-    <img
-      src={pattern}
-      alt={`${type} pattern`}
+    <svg
+      viewBox="0 0 100 100"
       width={size}
       height={size}
-      draggable={false}
       className={classNames(className)}
+      aria-label={`${type} pattern`}
+      role="img"
       {...props}
-    />
+    >
+      <defs>
+        <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation={blur} />
+        </filter>
+        <clipPath id={`c-${uid}`}>
+          <rect width="100" height="100" />
+        </clipPath>
+      </defs>
+
+      <rect width="100" height="100" fill={bg} />
+
+      <g clipPath={`url(#c-${uid})`} filter={`url(#${filterId})`}>
+        {blobs.map((b, i) => (
+          <circle key={i} cx={b.cx} cy={b.cy} r={b.r} fill={b.fill} />
+        ))}
+      </g>
+    </svg>
   )
 }
 

package/src/components/ProductsBrandPattern/ProductsBrandPattern.stories.jsx

@@ -26,6 +26,10 @@ export default {
       control: 'text',
       description: 'Width/height of the pattern image. Accepts px, rem, or number.',
     },
+    title: {
+      control: 'text',
+      description: 'Optional title used as seed for deterministic pattern generation. Random if omitted.',
+    },
   },
   args: {
     type: 'lyrics',
@@ -81,7 +85,7 @@ export const AllPatterns = {
     <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
       {patternTypes.map((type) => (
         <div key={type} style={{ textAlign: 'center' }}>
-          <ProductsBrandPattern type={type} {...args} />
+          <ProductsBrandPattern type={type} title={type} {...args} />
           <div style={{ fontSize: 12, marginTop: 4, textTransform: 'capitalize' }}>{type}</div>
         </div>
       ))}
@@ -91,3 +95,46 @@ export const AllPatterns = {
     size: '48px',
   },
 }
+
+export const TitleVariations = {
+  render: ({ type, ...args }) => {
+    const titles = ['My First Song', 'Late Night Jam', 'Acoustic Demo', 'Final Mix', 'Live Take', 'Rehearsal']
+    return (
+      <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
+        {titles.map((title) => (
+          <div key={title} style={{ textAlign: 'center' }}>
+            <ProductsBrandPattern type={type} title={title} {...args} />
+            <div style={{ fontSize: 11, marginTop: 4, color: '#888' }}>{title}</div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+  args: {
+    type: 'lyrics',
+    size: '64px',
+  },
+}
+
+export const AllTypesWithTitles = {
+  render: () => {
+    const titles = ['Song A', 'Song B', 'Song C']
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+        {patternTypes.map((type) => (
+          <div key={type}>
+            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8, textTransform: 'capitalize' }}>{type}</div>
+            <div style={{ display: 'flex', gap: 12 }}>
+              {titles.map((title) => (
+                <div key={title} style={{ textAlign: 'center' }}>
+                  <ProductsBrandPattern type={type} title={title} size="56px" />
+                  <div style={{ fontSize: 10, marginTop: 4, color: '#888' }}>{title}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}

package/src/components/ProjectsList/ProjectItem/ProjectItem.jsx

@@ -66,7 +66,7 @@ const ProjectItem = ({
     >
       <Flex direction="row" gap="3">
         <Flex className={styles.projectCover}>
-          <ProductsBrandPattern type={type} cover={cover} size="48px" />
+          <ProductsBrandPattern type={type} cover={cover} title={title} size="48px" />
         </Flex>
 
         <Flex