UI Color Palette /one 5.1.1 Syrah

package.json

@@ -1,6 +1,6 @@
 {
   "name": "penpot-ui-color-palette",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "private": true,
   "description": "UI Color Palette is a Penpot plugin that creates, manages, exports, and publishes consistent and accessible color palettes.",
   "author": "Aurélien Grimaud",
@@ -63,9 +63,10 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
-    "@a_ng_d/figmug-ui": "^1.19.24",
+    "@a_ng_d/figmug-ui": "^1.19.35",
     "@a_ng_d/figmug-utils": "^0.7.3",
     "@a_ng_d/utils-ui-color-palette": "^1.7.6",
+    "@mistralai/mistralai": "^1.10.0",
     "@nanostores/preact": "^0.5.2",
     "@sentry/react": "^9.27.0",
     "@supabase/supabase-js": "^2.44.2",

src/bridges/checks/checkUserPreferences.ts

@@ -1,5 +1,6 @@
 import { Language } from '@ui-lib/types/translations'
 import { locales } from '@ui-lib/content/locales'
+import globalConfig from '../../global.config'
 
 const checkUserPreferences = async () => {
   let isWCAGDisplayed = penpot.localStorage.getItem('is_wcag_displayed')
@@ -39,11 +40,11 @@ const checkUserPreferences = async () => {
   }
 
   if (!userLanguage) {
-    penpot.localStorage.setItem('user_language', 'en-US')
-    userLanguage = 'en-US'
+    penpot.localStorage.setItem('user_language', globalConfig.lang)
+    userLanguage = globalConfig.lang
   }
 
-  locales.set((userLanguage as Language) ?? 'en-US')
+  locales.set((userLanguage as Language) ?? globalConfig.lang)
 
   return penpot.ui.sendMessage({
     type: 'CHECK_USER_PREFERENCES',

src/bridges/loadUI.ts

@@ -41,61 +41,59 @@ const loadUI = async () => {
   }
 
   penpot.ui.open(
-    `${locales.get().name} /One${locales.get().separator}${locales.get().tagline}${globalConfig.env.isDev ? `${locales.get().separator}${locales.get().plan.dev}` : ''}`,
+    `${locales.get().name} /one${locales.get().separator}${locales.get().tagline}${globalConfig.env.isDev ? `${locales.get().separator}${locales.get().plan.dev}` : ''}`,
     globalConfig.urls.uiUrl,
     {
       width: windowSize.width,
       height: windowSize.height,
     }
   )
 
-  const accessToken = penpot.localStorage.getItem('supabase_access_token')
-  const refreshToken = penpot.localStorage.getItem('supabase_refresh_token')
-
-  setTimeout(() => {
-    // Canvas > UI
-    penpot.ui.sendMessage({
-      type: 'CHECK_USER_AUTHENTICATION',
-      data: {
-        id: penpot.currentUser.id,
-        fullName: penpot.currentUser.name,
-        avatar: penpot.currentUser.avatarUrl,
-        accessToken: accessToken ? accessToken : undefined,
-        refreshToken: refreshToken ? refreshToken : undefined,
-      },
-    })
-    penpot.ui.sendMessage({
-      type: 'SET_THEME',
-      data: {
-        theme: penpot.theme === 'light' ? 'penpot-light' : 'penpot-dark',
-      },
-    })
-    penpot.ui.sendMessage({
-      type: 'CHECK_ANNOUNCEMENTS_VERSION',
-    })
-    penpot.ui.sendMessage({
-      type: 'CHECK_EDITOR',
-      data: {
-        id: penpot.currentUser.id,
-        editor: globalConfig.env.editor,
-      },
-    })
-
-    // Checks
-    checkUserConsent()
-      .then(() => checkTrialStatus())
-      .then(() => checkCredits())
-      .then(() => checkUserLicense())
-      .then(() => checkUserPreferences())
-      .then(() => processSelection())
-  }, 1000)
-
-  // UI > Canvas
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   penpot.ui.onMessage(async (msg: any) => {
     const path = msg.pluginMessage
 
     const actions: { [key: string]: () => void } = {
+      LOAD_DATA: () => {
+        const accessToken = penpot.localStorage.getItem('supabase_access_token')
+        const refreshToken = penpot.localStorage.getItem(
+          'supabase_refresh_token'
+        )
+
+        penpot.ui.sendMessage({
+          type: 'CHECK_USER_AUTHENTICATION',
+          data: {
+            id: penpot.currentUser.id,
+            fullName: penpot.currentUser.name,
+            avatar: penpot.currentUser.avatarUrl,
+            accessToken: accessToken ? accessToken : undefined,
+            refreshToken: refreshToken ? refreshToken : undefined,
+          },
+        })
+        penpot.ui.sendMessage({
+          type: 'SET_THEME',
+          data: {
+            theme: penpot.theme === 'light' ? 'penpot-light' : 'penpot-dark',
+          },
+        })
+        penpot.ui.sendMessage({
+          type: 'CHECK_ANNOUNCEMENTS_VERSION',
+        })
+        penpot.ui.sendMessage({
+          type: 'CHECK_EDITOR',
+          data: {
+            id: penpot.currentUser.id,
+            editor: globalConfig.env.editor,
+          },
+        })
+
+        checkUserConsent()
+          .then(() => checkTrialStatus())
+          .then(() => checkCredits())
+          .then(() => checkUserLicense())
+          .then(() => checkUserPreferences())
+          .then(() => processSelection())
+      },
       CHECK_USER_CONSENT: () => checkUserConsent(),
       CHECK_ANNOUNCEMENTS_STATUS: () =>
         checkAnnouncementsStatus(path.data.version),

src/bridges/updates/updateDocument.ts

@@ -70,6 +70,16 @@ const updateDocument = async (view: ViewConfiguration) => {
   document.setPluginData('updatedAt', palette.meta.dates.updatedAt.toString())
   document.setPluginData('backup', JSON.stringify(palette))
 
+  penpot.ui.sendMessage({
+    type: 'DOCUMENT_SELECTED',
+    data: {
+      view: view,
+      id: id,
+      updatedAt: palette.meta.dates.updatedAt.toString(),
+      isLinkedToPalette: true,
+    },
+  })
+
   await new Promise((r) => setTimeout(r, 1000))
   await penpot.currentFile?.saveVersion(
     `${palette.base.name} - ${locales.get().events.documentUpdated}`

src/bridges/updates/updatePalette.ts

@@ -17,18 +17,16 @@ const updatePalette = async ({
   )
 
   msg.items.forEach((item) => {
-    const flatPalette = flattenObject(palette)
+    const pathParts = item.key.split('.')
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let current: Record<string, any> = palette
 
-    if (Object.keys(flatPalette).includes(item.key)) {
-      const pathParts = item.key.split('.')
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let current: Record<string, any> = palette
-
-      for (let i = 0; i < pathParts.length - 1; i++)
-        current = current[pathParts[i]]
-
-      current[pathParts[pathParts.length - 1]] = item.value
+    for (let i = 0; i < pathParts.length - 1; i++) {
+      if (current[pathParts[i]] === undefined) current[pathParts[i]] = {}
+      current = current[pathParts[i]]
     }
+
+    current[pathParts[pathParts.length - 1]] = item.value
   })
 
   palette.libraryData = new Data(palette).makeLibraryData(
@@ -63,26 +61,4 @@ const updatePalette = async ({
   return palette
 }
 
-const flattenObject = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  obj: Record<string, any>,
-  prefix = ''
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-): Record<string, any> => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return Object.keys(obj).reduce((acc: Record<string, any>, key: string) => {
-    const pre = prefix.length ? `${prefix}.` : ''
-
-    if (
-      typeof obj[key] === 'object' &&
-      obj[key] !== null &&
-      !Array.isArray(obj[key])
-    )
-      Object.assign(acc, flattenObject(obj[key], pre + key))
-    else acc[pre + key] = obj[key]
-
-    return acc
-  }, {})
-}
-
 export default updatePalette

src/canvas/Title.ts

@@ -201,12 +201,17 @@ export default class Title {
     this.nodeProps.appendChild(
       new Tag({
         name: '_updated_at',
-        content: locales
-          .get()
-          .paletteProperties.updatedAt.replace(
-            '{date}',
-            new Date(this.meta.dates.updatedAt).toDateString()
-          ),
+        content: locales.get().paletteProperties.updatedAt.replace(
+          '{date}',
+          new Date(this.meta.dates.updatedAt).toLocaleDateString(
+            locales.lang(),
+            {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            }
+          )
+        ),
         fontSize: 12,
       }).makeNodeTag()
     )

src/global.config.ts

@@ -50,7 +50,6 @@ const globalConfig: Config = {
       ? 'http://localhost:3000'
       : (import.meta.env.VITE_AUTH_URL as string),
     storeApiUrl: import.meta.env.VITE_LEMONSQUEEZY_URL as string,
-    aiApiUrl: import.meta.env.VITE_MISTRAL_AI_API_URL as string,
     platformUrl: '*',
     uiUrl: isDev
       ? 'http://localhost:4400'
@@ -88,6 +87,8 @@ const globalConfig: Config = {
       'USER_PREFERENCES_SYNC_DEEP_VARIABLES',
       'RESIZE_UI',
       'HELP_CHAT',
+      'USER_LANGUAGE_ZH_CN',
+      'USER_LANGUAGE_PT_BR',
     ],
     [
       'LOCAL_PALETTES',
@@ -148,6 +149,9 @@ const globalConfig: Config = {
       'REMOTE_PALETTES_STARRED',
       'REMOTE_PALETTES_ORG',
       'INVOLVE_COMMUNITY',
+      'USER_PREFERENCES',
+      'USER_LANGUAGE',
+      'USER_LANGUAGE_FR_FR',
     ]
   ),
   locales: locales.get(),
@@ -157,7 +161,7 @@ const globalConfig: Config = {
     coolorsImport: 50,
     realtimeColorsImport: 50,
     imageColorsExtract: 100,
-    harmonyCreate: 50,
+    harmonyCreate: 100,
     aiColorsGenerate: 100,
   },
 }

src/ui/index.tsx

@@ -7,9 +7,9 @@ import {
   setEditor,
   setMixpanelEnv,
 } from '@ui-lib/external/tracking/client'
-import { initSentry } from '@ui-lib/external/monitoring/client'
+import { initSentry } from '@ui-lib/external/monitoring'
 import { initMistral } from '@ui-lib/external/mistral'
-import { initSupabase } from '@ui-lib/external/auth/client'
+import { initSupabase } from '@ui-lib/external/auth'
 import { ThemeProvider } from '@ui-lib/config/ThemeContext'
 import { ConfigProvider } from '@ui-lib/config/ConfigContext'
 import * as Sentry from '@sentry/react'
@@ -101,8 +101,7 @@ if (globalConfig.env.isSupabaseEnabled && supabaseAnonKey !== undefined)
   initSupabase(globalConfig.urls.databaseUrl, supabaseAnonKey)
 
 // Mistral AI
-if (globalConfig.env.isMistralAiEnabled)
-  initMistral(globalConfig.urls.aiApiUrl, mistralApiKey)
+if (globalConfig.env.isMistralAiEnabled) initMistral(mistralApiKey)
 
 // Bridge Canvas <> UI
 window.addEventListener('message', (event) => {