@inlaylab/opaline-svelte 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Inlaylab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,22 @@
-# Temporary Holding Version
+# @inlaylab/opaline-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Seeded avatars for Svelte 5 and SvelteKit. Built with runes, SSR-safe.
+
+```sh
+npm i @inlaylab/opaline-svelte
+```
+
+```svelte
+<script>
+  import { Avatar } from '@inlaylab/opaline-svelte'
+  import { clay } from '@inlaylab/opaline/clay'
+</script>
+
+<Avatar seed={user.email} look={clay} src={user.photo} alt={user.name} />
+```
+
+Props: `seed`, `look`, `size`, `src`, `alt`, and every core option.
+
+Same seed, same avatar: from 1.0, the same seed and options give a byte-identical SVG in every 1.x release.
+
+[Playground and docs](https://inlaylab.github.io/Opaline/) · [GitHub](https://github.com/Inlaylab/Opaline) · MIT for code and art.

package/dist/Avatar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { createAvatar } from '@inlaylab/opaline'
+  import Photo from './Photo.svelte'
+  import type { AvatarProps } from './types.js'
+
+  let { look, size = 64, src, alt, ...options }: AvatarProps = $props()
+  // $props.id() matches on server and client, so hydration keeps the same gradient IDs.
+  const instance = $props.id()
+  // Safe to inject: the core escapes every input that reaches the SVG.
+  const svg = $derived(createAvatar(look, { ...options, size, instance }).svg)
+</script>
+
+<span
+  data-opaline=""
+  style="display:inline-block;width:{size}px;height:{size}px;position:relative"
+  role={alt ? 'img' : undefined}
+  aria-label={alt || undefined}
+  aria-hidden={alt ? undefined : 'true'}
+>
+  <span style="display:contents">{@html svg}</span>
+  {#if src}
+    {#key src}
+      <Photo {src} />
+    {/key}
+  {/if}
+</span>

package/dist/Avatar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from './types.js';
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/Photo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  let { src }: { src: string } = $props()
+  let status = $state<'loading' | 'loaded' | 'error'>('loading')
+  let img = $state<HTMLImageElement>()
+
+  onMount(() => {
+    // With SSR the image can finish before hydration, so its load event is missed.
+    if (img?.complete) status = img.naturalWidth > 0 ? 'loaded' : 'error'
+  })
+</script>
+
+<!-- The photo stays hidden until it loads; a failed load leaves the generated avatar. -->
+{#if status !== 'error'}
+  <img
+    bind:this={img}
+    {src}
+    alt=""
+    style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit"
+    hidden={status !== 'loaded'}
+    onload={() => (status = 'loaded')}
+    onerror={() => (status = 'error')}
+  />
+{/if}

package/dist/Photo.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    src: string;
+};
+declare const Photo: import("svelte").Component<$$ComponentProps, {}, "">;
+type Photo = ReturnType<typeof Photo>;
+export default Photo;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarProps } from './types.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import type { AuraOptions, ClayOptions, InitialsOptions, Style } from '@inlaylab/opaline';
+export type AvatarProps = {
+    seed: string | number | null | undefined;
+    /** The style object, e.g. `morph` from `@inlaylab/opaline/morph`. */
+    look: Style<any>;
+    size?: number;
+    /** Photo to show over the generated avatar once it loads. */
+    src?: string;
+    /** Accessible name. Without it the avatar is decorative and hidden from assistive tech. */
+    alt?: string;
+} & ClayOptions & AuraOptions & InitialsOptions;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@inlaylab/opaline-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.0",
+  "description": "Seeded avatars for Svelte 5: an SSR-safe Avatar component.",
+  "keywords": [
+    "avatar",
+    "avatars",
+    "svg",
+    "seed",
+    "deterministic",
+    "identicon",
+    "profile-picture",
+    "placeholder",
+    "svelte",
+    "svelte5",
+    "sveltekit",
+    "ssr"
+  ],
+  "homepage": "https://inlaylab.github.io/Opaline/",
+  "bugs": {
+    "url": "https://github.com/Inlaylab/Opaline/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Inlaylab/Opaline.git",
+    "directory": "packages/svelte"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": ">=5.20"
+  },
+  "dependencies": {
+    "@inlaylab/opaline": "1.1.0"
+  },
+  "devDependencies": {
+    "@inlaylab/opaline-contract": "0.0.0",
+    "@sveltejs/package": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@vitest/browser-playwright": "^5.1.0",
+    "playwright": "^1.64.1",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8"
+  },
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist",
+    "test": "vitest run",
+    "lint": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings && prettier --check . --ignore-path ../../.prettierignore"
+  }
 }