⭐🎨 Colors v15

config.ts

@@ -112,6 +112,7 @@ export const COLORSTATS_COMPUTE_METHODS: Array<IComputeImageColorStats<string>>
         > }),
     */
     createColorfulComputeImageColorStats15({
+        // !!! Remove this
         colorBits: 16,
         size: IMAGE_NATURAL_SIZE.scale(0.2),
     }),

public/handwritten/script.js

@@ -1,4 +1,5 @@
-// ⚠ Warning: This is just a javascript copy of /src/components/HandwrittenText/utils/handwriteText.ts
+// ⚠ Warning: This is just a javascript copy of
+// /src/components/HandwrittenText/utils/handwriteText.ts
 
 function handwriteText(options) {
     function getElement(elementId) {
@@ -593,21 +594,20 @@ function handwriteText(options) {
     var canvasElement = getElement('canvas');
 
     /*
-    var styleSelectElement = getElement('select-style');
-    var biasSliderElement = getElement('bias-slider');
-    var speedSliderElement = getElement('speed-slider');
-    var widthSliderElement = getElement('width-slider');
+var styleSelectElement = getElement('select-style');
+var biasSliderElement = getElement('bias-slider');
+var speedSliderElement = getElement('speed-slider');
+var widthSliderElement = getElement('width-slider');
 
-    widthSliderElement.oninput = () =>
-        ((r) => {
-            for (; canvasElement.lastChild; ) canvasElement.removeChild(canvasElement.lastChild);
-            if (K(r) != 0) {
-                const e = options.width; /*parseFloat(widthSliderElement.value)* /
-                const a = z(r);
-                for (let l = 0; l < K(a); l++) (r = a[l]), K(r) < 2 || q(r, t, e);
-            }
-        })(tr);
-    */
+widthSliderElement.oninput = () =>
+((r) => {
+  for (; canvasElement.lastChild; )
+canvasElement.removeChild(canvasElement.lastChild); if (K(r) != 0) { const e =
+options.width; /*parseFloat(widthSliderElement.value)* / const a = z(r); for
+(let l = 0; l < K(a); l++) (r = a[l]), K(r) < 2 || q(r, t, e);
+  }
+})(tr);
+*/
 
     let ur;
     let fr;
@@ -624,7 +624,8 @@ function handwriteText(options) {
         }, 200);
     })();
 
-    // --------------------------------------- Press [Write!] button ---------------------------------------
+    // --------------------------------------- Press [Write!] button
+    // ---------------------------------------
 
     fetch(ur)
         .then((res) => {
@@ -689,12 +690,13 @@ function handwriteText(options) {
                         handleWriteClick();
 
                         /*
-                        getElement('draw-button').addEventListener('mousedown', handleWriteClick);
-                        getElement('text-input').addEventListener('keydown', (event) => {
-                            return event.keyCode === 13 ? handleWriteClick() : 1;
-                        });
-                        getElement('loading-indicator').remove();
-                        */
+getElement('draw-button').addEventListener('mousedown',
+handleWriteClick);
+getElement('text-input').addEventListener('keydown', (event) => {
+return event.keyCode === 13 ? handleWriteClick() : 1;
+});
+getElement('loading-indicator').remove();
+*/
                     }
                 };
                 return init(), at;
@@ -703,27 +705,29 @@ function handwriteText(options) {
         });
 
     /*
-    // --------------------------------------- Saving ---------------------------------------
+// --------------------------------------- Saving
+---------------------------------------
 
-    getElement('save-button').addEventListener('click', () => {
-        const r = getElement('canvas').getBBox();
-        const width = [hr(r.x - 3), hr(r.y - 3), hr(r.width + 6), hr(r.height + 6)].join(' ');
-        const svgElement = getElement('canvas');
-        svgElement.setAttribute('viewBox', width);
-        const extremeSvg = new XMLSerializer().serializeToString(svgElement);
-        svgElement.removeAttribute('viewBox');
-        const popOutActionElement = window.document.createElement('a');
-        popOutActionElement.setAttribute('href', `data:image/svg+xml;base64,${window.btoa(extremeSvg)}`);
-        popOutActionElement.setAttribute(
-            'download',
-            `${Z.toString()
-                .toLowerCase()
-                .replace(/\s+/g, '-')
-                .replace(/[^\w\-]+/g, '')
-                .replace(/\-\-+/g, '-')
-                .trim()}.svg`,
-        );
-        popOutActionElement.click();
-    });
-    */
+getElement('save-button').addEventListener('click', () => {
+const r = getElement('canvas').getBBox();
+const width = [hr(r.x - 3), hr(r.y - 3), hr(r.width + 6), hr(r.height +
+6)].join(' '); const svgElement = getElement('canvas');
+svgElement.setAttribute('viewBox', width);
+const extremeSvg = new XMLSerializer().serializeToString(svgElement);
+svgElement.removeAttribute('viewBox');
+const popOutActionElement = window.document.createElement('a');
+popOutActionElement.setAttribute('href',
+`data:image/svg+xml;base64,${window.btoa(extremeSvg)}`);
+popOutActionElement.setAttribute(
+  'download',
+  `${Z.toString()
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^\w\-]+/g, '')
+      .replace(/\-\-+/g, '-')
+      .trim()}.svg`,
+);
+popOutActionElement.click();
+});
+*/
 }

public/visual-testing/common.js

@@ -1,10 +1,11 @@
-// TODO: Do not show the Next.js errors in the iframes (they are not relevant in this case)
+// TODO: Do not show the Next.js errors in the iframes (they are not relevant in
+// this case)
 window.document.querySelectorAll('iframe').forEach((iframeElement) => {
     function hideNextjsErrors() {
         const iframeDocument = iframeElement.contentDocument;
         iframeDocument.body.innerHTML =
             iframeDocument.body.innerHTML +
-            `   
+            `
             <style>
                 body{
                     overflow: auto !important;

src/components/AiComponents/AiComponentsRoot.tsx

@@ -80,7 +80,7 @@ export function AiComponentsRoot(props: AiComponentsRootProps) {
                             if (componentElement.getAttribute('data-ai-activated')) {
                                 continue;
                             }
-    
+
                             const componentType = componentElement.getAttribute('data-ai-component');
 
 
@@ -91,7 +91,7 @@ export function AiComponentsRoot(props: AiComponentsRootProps) {
                                             case '${componentType}':
                                                 console.info(\`🌟 Activating \${componentType} component\`, componentElement);
                                                 (${
-                                                    activate.toString() /* <- TODO: Is there some option to: 
+                                                    activate.toString() /* <- TODO: Is there some option to:
                                                                                   - Use non-minified code (disable/bypass minification in just one file/function)
                                                                                   - OR just Put a real name on the function
                                                                         */

src/components/ColorsPanel/ColorsPanel.tsx

@@ -98,4 +98,5 @@ export function ColorsPanel(props: ColorsPanelProps) {
 
 /**
  * TODO: Maybe allow to close the colors
+ * TODO: !!!! [🧠] Semantic color palette - plan where each color should be used (and do not duplicate bg and ui items)
  */

src/components/ExportPreviewModal/ExportPreviewModal.tsx

@@ -110,7 +110,7 @@ export function ExportPreviewModal(props: ExportPreviewModalProps) {
                             if(isLinked){
                                 continue;
                             }
-                        
+
                             const href = linkElement.getAttribute('href');
 
                             if(href.startsWith('blob:')){

src/components/Hint/Hint.tsx

@@ -71,7 +71,7 @@ export function Hint(props: HintProps) {
         };
         hintTarget.addEventListener('click', hintTargetClickHandler);
 
-        /* 
+        /*
             element.addEventListener('mouseenter', () => {
                 hintContainer.style.opacity = '1';
             });

src/utils/IWallpaper.ts

@@ -23,7 +23,7 @@ export interface IWallpaper {
     isPublic: boolean;
     src: string_url /* <- Note: Not using URL objects because of serialization */;
     prompt: string_midjourney_prompt | null;
-    colorStats: IWallpaperColorStats;
+    colorStats: IWallpaperColorStats /* <- !!! Put here all available versions */;
     // TODO: shapeStats> IWallpaperShapeStats;
 
     title: string /* <- Note: This is just derrived */;