@phosart/common 0.4.49 → 0.4.50

package/dist/GalleryPreview.svelte

@@ -19,21 +19,29 @@
 	{@const both = 'calc(var(--preview-size) / 2)'}
 	<div class="preview" style="--preview-size: {cssSize}">
 		<div style="height: {toph}; width: {topw}" class="imgcontainer" class:square={topw === toph}>
-			<div><Image alt={pieces[0].alt} picture={pieces[0].image.thumbnail} /></div>
+			<div>
+				<Image alt={pieces[0].alt} picture={pieces[0].image.thumbnail} nsfw={pieces[0].nsfw} />
+			</div>
 		</div>
 		{#if pieces[1]}
 			<div style="height: {toph}; width: {topw}" class="imgcontainer" class:square={topw === toph}>
-				<div><Image alt={pieces[1].alt} picture={pieces[1].image.thumbnail} /></div>
+				<div>
+					<Image alt={pieces[1].alt} picture={pieces[1].image.thumbnail} nsfw={pieces[0].nsfw} />
+				</div>
 			</div>
 		{/if}
 		{#if pieces[2]}
 			<div style="height: {both}; width: {botw}" class="imgcontainer" class:square={botw === both}>
-				<div><Image alt={pieces[2].alt} picture={pieces[2].image.thumbnail} /></div>
+				<div>
+					<Image alt={pieces[2].alt} picture={pieces[2].image.thumbnail} nsfw={pieces[0].nsfw} />
+				</div>
 			</div>
 		{/if}
 		{#if pieces[3]}
 			<div style="height: {both}; width: {botw}" class="imgcontainer" class:square={botw === both}>
-				<div><Image alt={pieces[3].alt} picture={pieces[3].image.thumbnail} /></div>
+				<div>
+					<Image alt={pieces[3].alt} picture={pieces[3].image.thumbnail} nsfw={pieces[0].nsfw} />
+				</div>
 			</div>
 		{/if}
 	</div>

package/dist/GalleryPreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPreview.svelte.d.ts","sourceRoot":"","sources":["../src/lib/GalleryPreview.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAI5C,UAAU,KAAK;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CAChB;AA0CF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"GalleryPreview.svelte.d.ts","sourceRoot":"","sources":["../src/lib/GalleryPreview.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAI5C,UAAU,KAAK;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CAChB;AAkDF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Image.svelte

@@ -3,6 +3,7 @@
 	import { untrack } from 'svelte';
 	import { isHighRes } from './HighResContext.svelte';
 	import { useLibraryConfig } from './util/phosart_config.svelte.js';
+	import { nsfwBlur } from './util/nsfw_helper.svelte.js';
 
 	interface Props {
 		picture: ImageModel;
@@ -13,11 +14,13 @@
 		onloaded?: () => void;
 		loading?: boolean;
 		transformSrc?: (src: string) => string;
+		nsfw?: boolean;
 	}
 
 	let {
 		picture,
 		alt,
+		nsfw,
 		onloaded = undefined,
 		video = undefined,
 		controls = false,
@@ -102,10 +105,12 @@
 	}
 </script>
 
-{#each [{ src, video }] as pic (JSON.stringify(pic))}
+{#key JSON.stringify({ src, video })}
 	{#if video}
 		<video
-			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};"
+			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h}; {nsfwBlur(
+				nsfw
+			)}"
 			muted
 			autoplay
 			{controls}
@@ -118,7 +123,11 @@
 			<source src={transformSrc(video)} type="video/mp4" />
 		</video>
 	{:else}
-		<picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
+		<picture
+			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h}; {nsfwBlur(
+				nsfw
+			)}"
+		>
 			{#each Object.entries(src.sources) as [format, images] (format)}
 				<source
 					srcset={images.map((img) => `${transformSrc(img.src)} ${img.w}w`).join(', ')}
@@ -140,7 +149,7 @@
 			/>
 		</picture>
 	{/if}
-{/each}
+{/key}
 
 <style>
 	picture,

package/dist/Image.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     onloaded?: () => void;
     loading?: boolean;
     transformSrc?: (src: string) => string;
+    nsfw?: boolean;
 }
 declare const Image: import("svelte").Component<Props, {}, "loading">;
 type Image = ReturnType<typeof Image>;

package/dist/Image.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAM3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC;AAmHF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAO3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAyHF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/ModalGallery/Carousel.svelte

@@ -50,7 +50,7 @@
 					role="button"
 					tabindex={-1}
 				>
-					<Image picture={piece.image.thumbnail} alt={piece.alt} />
+					<Image picture={piece.image.thumbnail} alt={piece.alt} nsfw={piece.nsfw} />
 				</div>
 			{/each}
 		</div>

package/dist/ModalGallery/ImageSection.svelte

@@ -169,6 +169,7 @@
 									controls
 									picture={image.image.full}
 									alt={image.alt}
+									nsfw={image.nsfw}
 									{onloaded}
 								/>
 							</div>

package/dist/Postcard/Description.svelte

@@ -8,6 +8,7 @@
 	import Chip from './Chip.svelte';
 	import { useCharacters } from '../util/charactercontext.svelte.js';
 	import { useArtists } from '../util/artistcontext.svelte.js';
+	import { nsfwRedact } from '../util/nsfw_helper.svelte.js';
 
 	interface Props {
 		piece: ArtPiece;
@@ -37,7 +38,7 @@
 			{#if showName}
 				<div style="margin-bottom: 0.5rem;">
 					<span style="border-bottom: 1px dashed #8886; font-style: italic;">
-						{piece.name}
+						{nsfwRedact(piece.name, piece.nsfw)}
 					</span>
 				</div>
 			{/if}
@@ -49,7 +50,10 @@
 		>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			{@html markdown(
-				(selectedAlt && piece.alts?.[selectedAlt]?.description) || piece.description || ''
+				nsfwRedact(
+					(selectedAlt && piece.alts?.[selectedAlt]?.description) || piece.description || '',
+					piece.nsfw
+				)
 			)}
 		</div>
 

package/dist/Postcard/Description.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Description.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/Postcard/Description.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,+CAA+C,CAAC;AAGvD,OAAO,EAAE,KAAK,QAAQ,EAAuC,MAAM,gBAAgB,CAAC;AAQnF,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA2GF,QAAA,MAAM,WAAW,kDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Description.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/Postcard/Description.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,+CAA+C,CAAC;AAGvD,OAAO,EAAE,KAAK,QAAQ,EAAuC,MAAM,gBAAgB,CAAC;AASnF,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA+GF,QAAA,MAAM,WAAW,kDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Postcard/Headline.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { nsfwRedact } from '../util/nsfw_helper.svelte.js';
 	import { normalizeArtist, type ArtPiece } from '../util/art.js';
 	import { useArtists } from '../util/artistcontext.svelte.js';
 	import ArtistLink from './ArtistLink.svelte';
@@ -25,7 +26,7 @@
 	<div style="display: flex">
 		{#if showName}
 			<div style="padding-right: 2rem" class="piece-name">
-				{piece.name}
+				{nsfwRedact(piece.name, piece.nsfw)}
 			</div>
 		{/if}
 		<div

package/dist/Postcard/Headline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Headline.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/Postcard/Headline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/D,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB,EAAE,OAAO,CAAC;CAC5B;AAkCF,QAAA,MAAM,QAAQ,6DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Headline.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/Postcard/Headline.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/D,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB,EAAE,OAAO,CAAC;CAC5B;AAmCF,QAAA,MAAM,QAAQ,6DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/util/index.d.ts

@@ -10,4 +10,5 @@ export { setLibraryConfig, type LibraryConfig } from './phosart_config.svelte.ts
 export { asRecord, multiRecordBy, deduplicateBy, sveltekitAbsolutePath, sveltekitAnchoredPath } from './util.ts';
 export { asTree, pathView } from './tree.ts';
 export type { FolderElement, GalleryElement, GalleryTree, TreeElement } from './tree.ts';
+export { nsfwBlur, nsfwBlurStyle, nsfwConsented, nsfwRedact } from './nsfw_helper.svelte.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClF,YAAY,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,UAAU,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EACN,QAAQ,EACR,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClF,YAAY,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,UAAU,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EACN,QAAQ,EACR,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEzF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/util/index.js

@@ -8,3 +8,4 @@ export { smoothScroll } from "./smoothscroll.js";
 export { setLibraryConfig } from "./phosart_config.svelte.js";
 export { asRecord, multiRecordBy, deduplicateBy, sveltekitAbsolutePath, sveltekitAnchoredPath } from "./util.js";
 export { asTree, pathView } from "./tree.js";
+export { nsfwBlur, nsfwBlurStyle, nsfwConsented, nsfwRedact } from "./nsfw_helper.svelte.js";

package/dist/util/nsfw_helper.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare const nsfwConsented: {
+    consented: boolean;
+};
+export declare const nsfwBlurStyle = "filter: blur(200px); overflow: hidden;";
+export declare function nsfwBlur(nsfw?: boolean): string;
+export declare function nsfwRedact(s: string, nsfw?: boolean): string;
+//# sourceMappingURL=nsfw_helper.svelte.d.ts.map

package/dist/util/nsfw_helper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nsfw_helper.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/util/nsfw_helper.svelte.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;CAA+B,CAAC;AAE1D,eAAO,MAAM,aAAa,2CAA2C,CAAC;AAEtE,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAK/C;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAK5D"}

package/dist/util/nsfw_helper.svelte.js

@@ -0,0 +1,14 @@
+export const nsfwConsented = $state({ consented: false });
+export const nsfwBlurStyle = 'filter: blur(200px); overflow: hidden;';
+export function nsfwBlur(nsfw) {
+    if (nsfw && !nsfwConsented.consented) {
+        return nsfwBlurStyle;
+    }
+    return '';
+}
+export function nsfwRedact(s, nsfw) {
+    if (nsfw && !nsfwConsented.consented) {
+        return '[redacted: nsfw]';
+    }
+    return s;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosart/common",
-  "version": "0.4.49",
+  "version": "0.4.50",
   "files": [
     "dist",
     "!dist/**/*.test.*",

package/src/lib/GalleryPreview.svelte

@@ -19,21 +19,29 @@
 	{@const both = 'calc(var(--preview-size) / 2)'}
 	<div class="preview" style="--preview-size: {cssSize}">
 		<div style="height: {toph}; width: {topw}" class="imgcontainer" class:square={topw === toph}>
-			<div><Image alt={pieces[0].alt} picture={pieces[0].image.thumbnail} /></div>
+			<div>
+				<Image alt={pieces[0].alt} picture={pieces[0].image.thumbnail} nsfw={pieces[0].nsfw} />
+			</div>
 		</div>
 		{#if pieces[1]}
 			<div style="height: {toph}; width: {topw}" class="imgcontainer" class:square={topw === toph}>
-				<div><Image alt={pieces[1].alt} picture={pieces[1].image.thumbnail} /></div>
+				<div>
+					<Image alt={pieces[1].alt} picture={pieces[1].image.thumbnail} nsfw={pieces[0].nsfw} />
+				</div>
 			</div>
 		{/if}
 		{#if pieces[2]}
 			<div style="height: {both}; width: {botw}" class="imgcontainer" class:square={botw === both}>
-				<div><Image alt={pieces[2].alt} picture={pieces[2].image.thumbnail} /></div>
+				<div>
+					<Image alt={pieces[2].alt} picture={pieces[2].image.thumbnail} nsfw={pieces[0].nsfw} />
+				</div>
 			</div>
 		{/if}
 		{#if pieces[3]}
 			<div style="height: {both}; width: {botw}" class="imgcontainer" class:square={botw === both}>
-				<div><Image alt={pieces[3].alt} picture={pieces[3].image.thumbnail} /></div>
+				<div>
+					<Image alt={pieces[3].alt} picture={pieces[3].image.thumbnail} nsfw={pieces[0].nsfw} />
+				</div>
 			</div>
 		{/if}
 	</div>

package/src/lib/Image.svelte

@@ -3,6 +3,7 @@
 	import { untrack } from 'svelte';
 	import { isHighRes } from './HighResContext.svelte';
 	import { useLibraryConfig } from './util/phosart_config.svelte.ts';
+	import { nsfwBlur } from './util/nsfw_helper.svelte.ts';
 
 	interface Props {
 		picture: ImageModel;
@@ -13,11 +14,13 @@
 		onloaded?: () => void;
 		loading?: boolean;
 		transformSrc?: (src: string) => string;
+		nsfw?: boolean;
 	}
 
 	let {
 		picture,
 		alt,
+		nsfw,
 		onloaded = undefined,
 		video = undefined,
 		controls = false,
@@ -102,10 +105,12 @@
 	}
 </script>
 
-{#each [{ src, video }] as pic (JSON.stringify(pic))}
+{#key JSON.stringify({ src, video })}
 	{#if video}
 		<video
-			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};"
+			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h}; {nsfwBlur(
+				nsfw
+			)}"
 			muted
 			autoplay
 			{controls}
@@ -118,7 +123,11 @@
 			<source src={transformSrc(video)} type="video/mp4" />
 		</video>
 	{:else}
-		<picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
+		<picture
+			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h}; {nsfwBlur(
+				nsfw
+			)}"
+		>
 			{#each Object.entries(src.sources) as [format, images] (format)}
 				<source
 					srcset={images.map((img) => `${transformSrc(img.src)} ${img.w}w`).join(', ')}
@@ -140,7 +149,7 @@
 			/>
 		</picture>
 	{/if}
-{/each}
+{/key}
 
 <style>
 	picture,

package/src/lib/ModalGallery/Carousel.svelte

@@ -50,7 +50,7 @@
 					role="button"
 					tabindex={-1}
 				>
-					<Image picture={piece.image.thumbnail} alt={piece.alt} />
+					<Image picture={piece.image.thumbnail} alt={piece.alt} nsfw={piece.nsfw} />
 				</div>
 			{/each}
 		</div>

package/src/lib/ModalGallery/ImageSection.svelte

@@ -169,6 +169,7 @@
 									controls
 									picture={image.image.full}
 									alt={image.alt}
+									nsfw={image.nsfw}
 									{onloaded}
 								/>
 							</div>

package/src/lib/Postcard/Description.svelte

@@ -8,6 +8,7 @@
 	import Chip from './Chip.svelte';
 	import { useCharacters } from '../util/charactercontext.svelte.ts';
 	import { useArtists } from '../util/artistcontext.svelte.ts';
+	import { nsfwRedact } from '../util/nsfw_helper.svelte.ts';
 
 	interface Props {
 		piece: ArtPiece;
@@ -37,7 +38,7 @@
 			{#if showName}
 				<div style="margin-bottom: 0.5rem;">
 					<span style="border-bottom: 1px dashed #8886; font-style: italic;">
-						{piece.name}
+						{nsfwRedact(piece.name, piece.nsfw)}
 					</span>
 				</div>
 			{/if}
@@ -49,7 +50,10 @@
 		>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			{@html markdown(
-				(selectedAlt && piece.alts?.[selectedAlt]?.description) || piece.description || ''
+				nsfwRedact(
+					(selectedAlt && piece.alts?.[selectedAlt]?.description) || piece.description || '',
+					piece.nsfw
+				)
 			)}
 		</div>
 

package/src/lib/Postcard/Headline.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { nsfwRedact } from '../util/nsfw_helper.svelte.ts';
 	import { normalizeArtist, type ArtPiece } from '../util/art.ts';
 	import { useArtists } from '../util/artistcontext.svelte.ts';
 	import ArtistLink from './ArtistLink.svelte';
@@ -25,7 +26,7 @@
 	<div style="display: flex">
 		{#if showName}
 			<div style="padding-right: 2rem" class="piece-name">
-				{piece.name}
+				{nsfwRedact(piece.name, piece.nsfw)}
 			</div>
 		{/if}
 		<div

package/src/lib/util/index.ts

@@ -34,3 +34,5 @@ export {
 } from './util.ts';
 export { asTree, pathView } from './tree.ts';
 export type { FolderElement, GalleryElement, GalleryTree, TreeElement } from './tree.ts';
+
+export { nsfwBlur, nsfwBlurStyle, nsfwConsented, nsfwRedact } from './nsfw_helper.svelte.ts';

package/src/lib/util/nsfw_helper.svelte.ts

@@ -0,0 +1,17 @@
+export const nsfwConsented = $state({ consented: false });
+
+export const nsfwBlurStyle = 'filter: blur(200px); overflow: hidden;';
+
+export function nsfwBlur(nsfw?: boolean): string {
+	if (nsfw && !nsfwConsented.consented) {
+		return nsfwBlurStyle;
+	}
+	return '';
+}
+
+export function nsfwRedact(s: string, nsfw?: boolean): string {
+	if (nsfw && !nsfwConsented.consented) {
+		return '[redacted: nsfw]';
+	}
+	return s;
+}