sveltekit-ui 1.0.44 → 1.0.46

package/dist/Components/ImageEditor/Panels/AI/index.svelte

@@ -13,7 +13,12 @@
   {#if manager?.ai_tab_dropdown_manager?.val == "image_generator"}
     <div style="padding-top: .5rem;">
       <TextInput manager={manager?.ai_generate_image_from_text_text_input_manager} />
-      <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
+      <div style="display: flex; gap: 1rem;">
+        <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
+        {#if manager?.selected_image_source}
+          <Checkbox manager={manager?.ai_generate_image_include_workspace_in_images_prompt_checkbox_manager} />
+        {/if}
+      </div>
       <Button manager={manager?.ai_generate_image_from_text_button_manager} />
     </div>
   {:else if manager?.ai_tab_dropdown_manager?.val == "remove_background"}

package/dist/Components/ImageEditor/index.svelte

@@ -35,7 +35,9 @@
           <Button manager={manager?.undo_button_manager} />
           <Button manager={manager?.redo_button_manager} />
           <Button manager={manager?.clear_button_manager} />
-          <Button manager={manager?.finish_button_manager} />
+          {#if manager?.is_popover}
+            <Button manager={manager?.finish_button_manager} />
+          {/if}
         </HorizScrollBox>
       </div>
     </div>

package/dist/Components/ImageEditor/index.svelte.js

@@ -11,6 +11,7 @@ import { create_text_input_manager } from "../TextInput/index.svelte.js"
 import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
 import { create_slider_manager } from "../Slider/index.svelte.js"
 import { create_file_input_manager } from "../FileInput/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
 import "context-filter-polyfill" // ctx.filter doesnt work on safari and this should fix
 
 export function create_image_editor_manager(config) {
@@ -49,12 +50,7 @@ export function create_image_editor_manager(config) {
   let start_y = $state(null)
   let last_known_x = $state(null)
   let last_known_y = $state(null)
-  let is_loading = $state(false)
   let is_disabled = $state(false)
-  let error_message = $state(null)
-  let success_message = $state(null)
-  let is_show_finish_button = $state(true)
-  let is_show_img_slider = $state(true)
   let ai_error_message = $state(null)
   let file_size_kb = $state(null)
 
@@ -69,6 +65,7 @@ export function create_image_editor_manager(config) {
   let redo_button_manager = $state(null)
   let clear_button_manager = $state(null)
   let finish_button_manager = $state(null)
+  let is_show_img_slider = $state(false) // idk if using this really
 
   let filter_brightness_slider_manager = $state(null)
   let filter_contrast_slider_manager = $state(null)
@@ -109,6 +106,7 @@ export function create_image_editor_manager(config) {
   let ai_image_generator_is_loading = $state(null)
   let ai_generate_image_from_text_text_input_manager = $state(null)
   let ai_generate_image_images_prompt_file_input_manager = $state(null)
+  let ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = $state(null)
   let ai_generate_image_from_text_button_manager = $state(null)
   let ai_remove_background_is_loading = $state(false)
   let ai_restore_resolution_is_loading = $state(false)
@@ -1517,17 +1515,47 @@ export function create_image_editor_manager(config) {
       is_drop_zone: false,
       accept: ["image/png", "image/jpeg", "image/webp"],
     })
+    ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = create_checkbox_manager({
+      label: "Include Workspace Image in Images Prompt",
+      val: true,
+    })
     ai_generate_image_from_text_button_manager = create_button_manager({
       text: "Generate Image",
       is_compressed: true,
       mt: 1,
       is_loading: () => ai_image_generator_is_loading,
       is_disabled: () => is_disabled,
-      on_click: () =>
-        ai_image_generator({
+      on_click: async () => {
+        const files = Array.isArray(ai_generate_image_images_prompt_file_input_manager?.val)
+          ? [...ai_generate_image_images_prompt_file_input_manager.val]
+          : []
+        if (selected_image_source && ai_generate_image_include_workspace_in_images_prompt_checkbox_manager?.val) {
+          try {
+            const target_mime = mime_type_input ?? "image/webp"
+            const quality = file_quality_slider_manager?.val ?? 75
+            const data_url = await get_image_data_url(selected_image_source, target_mime, quality)
+            const m = data_url.match(/^data:(.*?);base64,(.*)$/)
+            if (m) {
+              const mime = m[1] || target_mime
+              const bin = atob(m[2])
+              const bytes = new Uint8Array(bin.length)
+              for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
+              const ext = mime_type_extensions?.[mime] || "bin"
+              const base =
+                file_name_text_input_manager?.val ||
+                (typeof create_unique_id === "function" ? create_unique_id("image", 6) : "workspace-image")
+              const file = new File([bytes], `${base}.${ext}`, { type: mime })
+              files.push(file)
+            }
+          } catch (e) {
+            console.error("failed to include workspace image", e)
+          }
+        }
+        await ai_image_generator({
           text_prompt: ai_generate_image_from_text_text_input_manager?.val,
-          images_prompt: ai_generate_image_images_prompt_file_input_manager?.val,
-        }),
+          images_prompt: files,
+        })
+      },
     })
     ai_remove_bg_button_manager = create_button_manager({
       text: "Remove Background",
@@ -1750,6 +1778,9 @@ export function create_image_editor_manager(config) {
     get finish_button_manager() {
       return finish_button_manager
     },
+    get is_show_img_slider() {
+      return is_show_img_slider
+    },
     get filter_brightness_slider_manager() {
       return filter_brightness_slider_manager
     },
@@ -1861,6 +1892,9 @@ export function create_image_editor_manager(config) {
     get ai_generate_image_images_prompt_file_input_manager() {
       return ai_generate_image_images_prompt_file_input_manager
     },
+    get ai_generate_image_include_workspace_in_images_prompt_checkbox_manager() {
+      return ai_generate_image_include_workspace_in_images_prompt_checkbox_manager
+    },
     get ai_generate_image_from_text_button_manager() {
       return ai_generate_image_from_text_button_manager
     },

package/dist/client/docs/index.js

@@ -4537,7 +4537,12 @@ export const definitions = {
       },
       ai_generate_image_images_prompt_file_input_manager: {
         type: "object",
-        description: "text input manager containing the user’s image prompt for AI image generation",
+        description: "file input manager containing the user’s image prompt for AI image generation",
+      },
+      ai_generate_image_include_workspace_in_images_prompt_checkbox_manager: {
+        type: "object",
+        description:
+          "checkbox input manager containing if include workspace image in image prompt for AI image generation",
       },
       ai_generate_image_from_text_button_manager: {
         type: "object",

package/dist/style.css

@@ -430,7 +430,7 @@ code,
   font-weight: 600;
   font-size: 1.2rem;
   line-height: 1.2;
-  color: var(--g12-t);
+  color: var(--g10-t);
 }
 ::placeholder {
   color: var(--g14-t);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,7 @@
     "@sveltejs/adapter-vercel": "^5.10.2",
     "@sveltejs/kit": "^2.37.0",
     "@sveltejs/package": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.3",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.9.2",
     "vite": "^7.1.4"

package/src/lib/Components/ImageEditor/Panels/AI/index.svelte

@@ -13,7 +13,12 @@
   {#if manager?.ai_tab_dropdown_manager?.val == "image_generator"}
     <div style="padding-top: .5rem;">
       <TextInput manager={manager?.ai_generate_image_from_text_text_input_manager} />
-      <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
+      <div style="display: flex; gap: 1rem;">
+        <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
+        {#if manager?.selected_image_source}
+          <Checkbox manager={manager?.ai_generate_image_include_workspace_in_images_prompt_checkbox_manager} />
+        {/if}
+      </div>
       <Button manager={manager?.ai_generate_image_from_text_button_manager} />
     </div>
   {:else if manager?.ai_tab_dropdown_manager?.val == "remove_background"}

package/src/lib/Components/ImageEditor/index.svelte

@@ -35,7 +35,9 @@
           <Button manager={manager?.undo_button_manager} />
           <Button manager={manager?.redo_button_manager} />
           <Button manager={manager?.clear_button_manager} />
-          <Button manager={manager?.finish_button_manager} />
+          {#if manager?.is_popover}
+            <Button manager={manager?.finish_button_manager} />
+          {/if}
         </HorizScrollBox>
       </div>
     </div>

package/src/lib/Components/ImageEditor/index.svelte.js

@@ -11,6 +11,7 @@ import { create_text_input_manager } from "$lib/Components/TextInput/index.svelt
 import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
 import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
 import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
 import "context-filter-polyfill" // ctx.filter doesnt work on safari and this should fix
 
 export function create_image_editor_manager(config) {
@@ -49,12 +50,7 @@ export function create_image_editor_manager(config) {
   let start_y = $state(null)
   let last_known_x = $state(null)
   let last_known_y = $state(null)
-  let is_loading = $state(false)
   let is_disabled = $state(false)
-  let error_message = $state(null)
-  let success_message = $state(null)
-  let is_show_finish_button = $state(true)
-  let is_show_img_slider = $state(true)
   let ai_error_message = $state(null)
   let file_size_kb = $state(null)
 
@@ -69,6 +65,7 @@ export function create_image_editor_manager(config) {
   let redo_button_manager = $state(null)
   let clear_button_manager = $state(null)
   let finish_button_manager = $state(null)
+  let is_show_img_slider = $state(false) // idk if using this really
 
   let filter_brightness_slider_manager = $state(null)
   let filter_contrast_slider_manager = $state(null)
@@ -109,6 +106,7 @@ export function create_image_editor_manager(config) {
   let ai_image_generator_is_loading = $state(null)
   let ai_generate_image_from_text_text_input_manager = $state(null)
   let ai_generate_image_images_prompt_file_input_manager = $state(null)
+  let ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = $state(null)
   let ai_generate_image_from_text_button_manager = $state(null)
   let ai_remove_background_is_loading = $state(false)
   let ai_restore_resolution_is_loading = $state(false)
@@ -1517,17 +1515,47 @@ export function create_image_editor_manager(config) {
       is_drop_zone: false,
       accept: ["image/png", "image/jpeg", "image/webp"],
     })
+    ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = create_checkbox_manager({
+      label: "Include Workspace Image in Images Prompt",
+      val: true,
+    })
     ai_generate_image_from_text_button_manager = create_button_manager({
       text: "Generate Image",
       is_compressed: true,
       mt: 1,
       is_loading: () => ai_image_generator_is_loading,
       is_disabled: () => is_disabled,
-      on_click: () =>
-        ai_image_generator({
+      on_click: async () => {
+        const files = Array.isArray(ai_generate_image_images_prompt_file_input_manager?.val)
+          ? [...ai_generate_image_images_prompt_file_input_manager.val]
+          : []
+        if (selected_image_source && ai_generate_image_include_workspace_in_images_prompt_checkbox_manager?.val) {
+          try {
+            const target_mime = mime_type_input ?? "image/webp"
+            const quality = file_quality_slider_manager?.val ?? 75
+            const data_url = await get_image_data_url(selected_image_source, target_mime, quality)
+            const m = data_url.match(/^data:(.*?);base64,(.*)$/)
+            if (m) {
+              const mime = m[1] || target_mime
+              const bin = atob(m[2])
+              const bytes = new Uint8Array(bin.length)
+              for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
+              const ext = mime_type_extensions?.[mime] || "bin"
+              const base =
+                file_name_text_input_manager?.val ||
+                (typeof create_unique_id === "function" ? create_unique_id("image", 6) : "workspace-image")
+              const file = new File([bytes], `${base}.${ext}`, { type: mime })
+              files.push(file)
+            }
+          } catch (e) {
+            console.error("failed to include workspace image", e)
+          }
+        }
+        await ai_image_generator({
           text_prompt: ai_generate_image_from_text_text_input_manager?.val,
-          images_prompt: ai_generate_image_images_prompt_file_input_manager?.val,
-        }),
+          images_prompt: files,
+        })
+      },
     })
     ai_remove_bg_button_manager = create_button_manager({
       text: "Remove Background",
@@ -1750,6 +1778,9 @@ export function create_image_editor_manager(config) {
     get finish_button_manager() {
       return finish_button_manager
     },
+    get is_show_img_slider() {
+      return is_show_img_slider
+    },
     get filter_brightness_slider_manager() {
       return filter_brightness_slider_manager
     },
@@ -1861,6 +1892,9 @@ export function create_image_editor_manager(config) {
     get ai_generate_image_images_prompt_file_input_manager() {
       return ai_generate_image_images_prompt_file_input_manager
     },
+    get ai_generate_image_include_workspace_in_images_prompt_checkbox_manager() {
+      return ai_generate_image_include_workspace_in_images_prompt_checkbox_manager
+    },
     get ai_generate_image_from_text_button_manager() {
       return ai_generate_image_from_text_button_manager
     },

package/src/lib/client/docs/index.js

@@ -4537,7 +4537,12 @@ export const definitions = {
       },
       ai_generate_image_images_prompt_file_input_manager: {
         type: "object",
-        description: "text input manager containing the user’s image prompt for AI image generation",
+        description: "file input manager containing the user’s image prompt for AI image generation",
+      },
+      ai_generate_image_include_workspace_in_images_prompt_checkbox_manager: {
+        type: "object",
+        description:
+          "checkbox input manager containing if include workspace image in image prompt for AI image generation",
       },
       ai_generate_image_from_text_button_manager: {
         type: "object",

package/src/lib/style.css

@@ -430,7 +430,7 @@ code,
   font-weight: 600;
   font-size: 1.2rem;
   line-height: 1.2;
-  color: var(--g12-t);
+  color: var(--g10-t);
 }
 ::placeholder {
   color: var(--g14-t);