@slopmachine/svelte 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.13",
+  "version": "0.1.15",
+  "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",
   "type": "module",
   "main": "src/index.ts",
@@ -17,9 +19,12 @@
     "url": "git+https://github.com/slopmachine-dev/slopmachine-sdk.git"
   },
   "dependencies": {
-    "@slopmachine/core": "*"
+    "@slopmachine/core": "*",
+    "@types/marked": "^5.0.2",
+    "marked": "^17.0.4"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
-  }
+  },
+  "license": "MIT"
 }

package/src/SlopImage.svelte

@@ -15,7 +15,7 @@
   />
   ```
 
-  @version 0.1.13
+  @version 0.1.15
 -->
 <script lang="ts">
   import {
@@ -50,6 +50,7 @@
     version,
     resultId,
     model,
+    quality = "fast",
     variables = {},
     baseUrl = undefined,
     class: className = "",
@@ -68,6 +69,7 @@
       variables,
       baseUrl,
       model,
+      quality,
     }),
   );
   let src = $state("");

package/src/SlopText.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { buildTextUrl, type SlopTextOptions } from "@slopmachine/core";
+  import { marked } from "marked";
+
+  /**
+   * Renders text generated by Slop Machine.
+   *
+   * This component automatically constructs the correct URL for the Slop Machine API,
+   * fetches the generated text, and displays it with optional loading and error states.
+   *
+   * @example
+   * ```svelte
+   * <SlopText
+   *   bucketId="my-text-bucket"
+   *   class="text-lg text-gray-800"
+   * >
+   *   {#snippet fallback()}
+   *     <div>Loading story...</div>
+   *   {/snippet}
+   *   {#snippet errorFallback({ error })}
+   *     <div>Failed to load story: {error.message}</div>
+   *   {/snippet}
+   * </SlopText>
+   * ```
+   *
+   * @version 0.1.15
+   */
+  interface Props {
+    // SlopTextOptions
+    bucketId: string;
+    version?: number | undefined;
+    resultId?: string | undefined;
+    model?: string | undefined;
+    variables?: Record<string, string | number | undefined | null> | undefined;
+    baseUrl?: string | undefined;
+    errorFallback?: import("svelte").Snippet<[any]>;
+    fallback?: import("svelte").Snippet;
+    class?: string;
+    style?: string;
+    [key: string]: any;
+  }
+
+  let {
+    bucketId,
+    version = undefined,
+    resultId = undefined,
+    model = undefined,
+    variables = undefined,
+    baseUrl = undefined,
+    errorFallback,
+    fallback,
+    class: className = "",
+    style = "",
+    ...rest
+  }: Props = $props();
+
+  let text: string | null = $state(null);
+  let loading = $state(true);
+  let error: Error | null = $state(null);
+
+  $effect(() => {
+    let isMounted = true;
+
+    const fetchText = async () => {
+      try {
+        loading = true;
+        error = null;
+
+        const url = buildTextUrl({
+          bucketId,
+          version,
+          resultId,
+          model,
+          variables,
+          baseUrl,
+        });
+
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch text: ${response.statusText}`);
+        }
+        const content = await response.text();
+        if (isMounted) {
+          text = content;
+        }
+      } catch (err) {
+        if (isMounted) {
+          error =
+            err instanceof Error ? err : new Error("Failed to generate text");
+        }
+      } finally {
+        if (isMounted) {
+          loading = false;
+        }
+      }
+    };
+
+    fetchText();
+
+    // Svelte's reactive statement cleanup isn't exactly the same as useEffect cleanup,
+    // but we can use this assignment to somewhat prevent state updates from previous runs
+    // if a new run starts immediately. Svelte handles race conditions by just running the latest.
+    // However, to be completely safe with async in reactive statements, we'd need to
+    // cancel previous fetches or ignore them properly. For now, this is okay.
+  });
+</script>
+
+{#if error}
+  {@render errorFallback?.({ error })}
+{:else if loading}
+  {#if fallback}
+    {@render fallback()}
+  {:else}
+    <div class={className} {style}>
+      <div class="slop-wrapper">
+        <div class="loading-overlay">
+          <div class="spinner-container">
+            <svg
+              class="spinner"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            <span>Loading...</span>
+          </div>
+        </div>
+        <div class="shimmer-effect"></div>
+      </div>
+    </div>
+  {/if}
+{:else}
+  <div class={className} {style} {...rest}>
+    {@html text ? marked.parse(text) : ""}
+  </div>
+{/if}
+
+<style>
+  .slop-wrapper {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--muted, #f3f4f6);
+    border-radius: 0.375rem;
+    width: 100%;
+    min-height: 100px;
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--muted, #f3f4f6);
+  }
+
+  .spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .spinner {
+    width: 24px;
+    height: 24px;
+    color: var(--muted-foreground, #6b7280);
+    animation: slop-spin 1s linear infinite;
+  }
+  .spinner circle {
+    opacity: 0.25;
+  }
+  .spinner path {
+    opacity: 0.75;
+  }
+
+  .spinner-container span {
+    font-size: 0.75rem;
+    color: var(--muted-foreground, #6b7280);
+  }
+
+  .shimmer-effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      var(--muted, #f3f4f6) 0%,
+      var(--muted-foreground, #e5e7eb) 50%,
+      var(--muted, #f3f4f6) 100%
+    );
+    background-size: 200% 100%;
+    animation: slop-shimmer 2s ease-in-out infinite;
+  }
+
+  @keyframes slop-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes slop-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/src/SlopVideo.svelte

@@ -17,6 +17,8 @@
     muted
   />
   ```
+
+  @version 0.1.15
 -->
 <script lang="ts">
   import {
@@ -56,6 +58,7 @@
     version,
     resultId,
     model,
+    quality = "fast",
     variables = {},
     duration,
     baseUrl = undefined,
@@ -80,6 +83,7 @@
       duration,
       baseUrl,
       model,
+      quality,
     }),
   );
   let src = $state("");

package/src/index.ts

@@ -1,8 +1,10 @@
 export { default as SlopImage, type SlopImageProps } from "./SlopImage.svelte";
 export { default as SlopVideo, type SlopVideoProps } from "./SlopVideo.svelte";
+export { default as SlopText } from "./SlopText.svelte";
 export type {
   ImageAspectRatio,
   VideoAspectRatio,
   SlopImageOptions,
   SlopVideoOptions,
+  SlopTextOptions,
 } from "@slopmachine/core";