@slopmachine/svelte 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "llms": "https://slopmachine-dev.github.io/slopmachine-sdk/llms.txt",
   "llmsFull": "https://slopmachine-dev.github.io/slopmachine-sdk/llms-full.txt",
   "description": "The official Svelte SDK for Slop Machine",

package/src/SlopImage.svelte

@@ -15,7 +15,7 @@
   />
   ```
 
-  @version 0.1.15
+  @version 0.1.17
 -->
 <script lang="ts">
   import {
@@ -42,6 +42,14 @@
      * If not provided, a default spinner and shimmer effect will be shown.
      */
     loader?: Snippet;
+    /**
+     * How the image should be resized to fit its container. Defaults to "cover".
+     */
+    objectFit?: "fill" | "contain" | "cover" | "none" | "scale-down";
+    /**
+     * Additional CSS classes to apply directly to the `<img />` element.
+     */
+    imageClass?: string;
   }
 
   let {
@@ -54,6 +62,8 @@
     variables = {},
     baseUrl = undefined,
     class: className = "",
+    objectFit = "cover",
+    imageClass = "",
     loader,
     ...restProps
   }: SlopImageProps = $props();
@@ -74,7 +84,7 @@
   );
   let src = $state("");
   let prevSrc = $state("");
-  let alt = "Generated image";
+  const alt = "Image produced by Slop Machine (slopmachine.dev)";
 
   $effect(() => {
     const currentComputedSrc = computedSrc;
@@ -176,9 +186,10 @@
     <img
       {src}
       {alt}
+      style="object-fit: {objectFit};"
       onload={handleLoad}
       onerror={handleError}
-      class:loaded={!isLoading}
+      class="slop-image {imageClass} {isLoading ? '' : 'loaded'}"
       {...restProps}
     />
   </div>
@@ -252,15 +263,14 @@
     animation: slop-shimmer 2s ease-in-out infinite;
   }
 
-  img {
+  .slop-image {
     height: 100%;
     width: 100%;
-    object-fit: cover;
     transition: opacity 500ms;
     opacity: 0;
   }
 
-  img.loaded {
+  .slop-image.loaded {
     opacity: 1;
   }
 

package/src/SlopText.svelte

@@ -23,7 +23,7 @@
    * </SlopText>
    * ```
    *
-   * @version 0.1.15
+   * @version 0.1.17
    */
   interface Props {
     // SlopTextOptions

package/src/SlopVideo.svelte

@@ -18,7 +18,7 @@
   />
   ```
 
-  @version 0.1.15
+  @version 0.1.17
 -->
 <script lang="ts">
   import {

package/src/index.ts

@@ -8,3 +8,5 @@ export type {
   SlopVideoOptions,
   SlopTextOptions,
 } from "@slopmachine/core";
+
+export { preloadImage } from "@slopmachine/core";