@prismicio/svelte 2.1.0 → 2.1.1-canary.0fd90e0

package/dist/PrismicImage.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import {
-		type ImageFieldImage,
 		asImagePixelDensitySrcSet,
 		asImageWidthSrcSet,
 		isFilled,
 	} from "@prismicio/client";
+	import type { ImageFieldImage } from "@prismicio/client";
 	import type { ImgixURLParams } from "imgix-url-builder";
 	import type { HTMLImgAttributes } from "svelte/elements";
 

package/dist/PrismicImage.svelte.d.ts

@@ -1,4 +1,5 @@
-import { type ImageFieldImage, asImagePixelDensitySrcSet, asImageWidthSrcSet } from "@prismicio/client";
+import { asImagePixelDensitySrcSet, asImageWidthSrcSet } from "@prismicio/client";
+import type { ImageFieldImage } from "@prismicio/client";
 import type { ImgixURLParams } from "imgix-url-builder";
 import type { HTMLImgAttributes } from "svelte/elements";
 type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {

package/dist/PrismicLink.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import {
-		type AsLinkAttrsConfig,
-		type LinkField,
-		type PrismicDocument,
-		asLinkAttrs,
+	import { asLinkAttrs } from "@prismicio/client";
+	import type {
+		AsLinkAttrsConfig,
+		LinkField,
+		PrismicDocument,
 	} from "@prismicio/client";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 

package/dist/PrismicLink.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type AsLinkAttrsConfig, type LinkField, type PrismicDocument } from "@prismicio/client";
+import type { AsLinkAttrsConfig, LinkField, PrismicDocument } from "@prismicio/client";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 type Props = Omit<HTMLAnchorAttributes, "rel" | "href"> & {
     /**

package/dist/PrismicTable.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import {
-		type TableField,
+	import type {
+		TableField,
 		TableFieldBody,
 		TableFieldBodyRow,
 		TableFieldDataCell,
 		TableFieldHead,
 		TableFieldHeadRow,
 		TableFieldHeaderCell,
-		isFilled,
 	} from "@prismicio/client";
-	import { type Component } from "svelte";
+	import { isFilled } from "@prismicio/client";
+	import type { Component } from "svelte";
 
-	import { type RichTextComponents, type TableComponents } from "./types";
+	import type { RichTextComponents, TableComponents } from "./types";
 
 	import PrismicRichText from "./PrismicRichText/PrismicRichText.svelte";
 

package/dist/PrismicTable.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type TableField } from "@prismicio/client";
-import { type Component } from "svelte";
-import { type RichTextComponents, type TableComponents } from "./types";
+import type { TableField } from "@prismicio/client";
+import type { Component } from "svelte";
+import type { RichTextComponents, TableComponents } from "./types";
 type Props = {
     /**
      * The Prismic table field to render.

package/dist/SliceSimulator.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import {
+		SimulatorManager,
+		StateEventType,
+		disableEventHandler,
+		getDefaultMessage,
+		getDefaultProps,
+		getDefaultSlices,
+		onClickHandler,
+		simulatorClass,
+		simulatorRootClass,
+	} from "@prismicio/simulator/kit";
+
+	const defaultProps = getDefaultProps();
+
+	export let zIndex = defaultProps.zIndex;
+	export let background = defaultProps.background;
+
+	let slices = getDefaultSlices();
+	let message = getDefaultMessage();
+
+	if (typeof window !== "undefined") {
+		const simulatorManager = new SimulatorManager();
+
+		simulatorManager.state.on(
+			StateEventType.Slices,
+			(newSlices) => {
+				slices = newSlices;
+			},
+			"simulator-slices",
+		);
+		simulatorManager.state.on(
+			StateEventType.Message,
+			(newMessage) => {
+				message = newMessage;
+			},
+			"simulator-message",
+		);
+
+		simulatorManager.init();
+	}
+</script>
+
+<div
+	class="{simulatorClass} {$$props.class}"
+	style="z-index: {zIndex}; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: auto; background: {background}"
+>
+	{#if message}
+		<article>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html message}
+		</article>
+	{:else if slices.length}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			id="root"
+			class={simulatorRootClass}
+			on:click={onClickHandler}
+			on:submit={disableEventHandler}
+			on:keypress={disableEventHandler}
+		>
+			<slot {slices} />
+		</div>
+	{/if}
+</div>

package/dist/SliceSimulator.svelte.d.ts

@@ -0,0 +1,35 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const SliceSimulator: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    zIndex?: number | undefined;
+    background?: string | undefined;
+}, {
+    default: {
+        slices: import("@prismicio/client/*").SliceZone;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        slices: import("@prismicio/client/*").SliceZone;
+    };
+}, {}, string>;
+type SliceSimulator = InstanceType<typeof SliceSimulator>;
+export default SliceSimulator;

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.sv
 export { default as PrismicTable } from "./PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
+export { default as SliceSimulator } from "./SliceSimulator.svelte";
 /**
  * @deprecated Replaced with `RichTextComponents`
  */

package/dist/index.js

@@ -5,3 +5,4 @@ export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.sv
 export { default as PrismicTable } from "./PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
+export { default as SliceSimulator } from "./SliceSimulator.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "2.1.0",
+	"version": "2.1.1-canary.0fd90e0",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
@@ -55,28 +55,29 @@
 		"test": "npm run lint && npm run types && npm run unit && npm run build"
 	},
 	"dependencies": {
+		"@prismicio/simulator": "^0.2.0",
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
 		"@prismicio/client": "^7.21.0",
 		"@prismicio/mock": "^0.7.1",
-		"@sveltejs/kit": "^2.49.2",
+		"@sveltejs/kit": "^2.49.4",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@testing-library/svelte": "^5.2.9",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
-		"@types/node": "^25.0.3",
-		"@vitest/coverage-v8": "^4.0.16",
-		"globals": "^16.5.0",
-		"happy-dom": "^20.0.11",
-		"oxlint": "^1.33.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@testing-library/svelte": "^5.3.1",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
+		"@types/node": "^25.0.8",
+		"@vitest/coverage-v8": "^4.0.17",
+		"globals": "^17.0.0",
+		"happy-dom": "^20.1.0",
+		"oxlint": "^1.39.0",
 		"prettier": "^3.7.4",
 		"prettier-plugin-jsdoc": "^1.8.0",
 		"prettier-plugin-svelte": "^3.4.1",
 		"standard-version": "^9.5.0",
-		"svelte": "^5.46.0",
+		"svelte": "^5.46.3",
 		"typescript": "^5.9.3",
-		"vitest": "^4.0.16"
+		"vitest": "^4.0.17"
 	},
 	"peerDependencies": {
 		"@prismicio/client": ">=7",

package/src/PrismicImage.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import {
-		type ImageFieldImage,
 		asImagePixelDensitySrcSet,
 		asImageWidthSrcSet,
 		isFilled,
 	} from "@prismicio/client";
+	import type { ImageFieldImage } from "@prismicio/client";
 	import type { ImgixURLParams } from "imgix-url-builder";
 	import type { HTMLImgAttributes } from "svelte/elements";
 

package/src/PrismicLink.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import {
-		type AsLinkAttrsConfig,
-		type LinkField,
-		type PrismicDocument,
-		asLinkAttrs,
+	import { asLinkAttrs } from "@prismicio/client";
+	import type {
+		AsLinkAttrsConfig,
+		LinkField,
+		PrismicDocument,
 	} from "@prismicio/client";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 

package/src/PrismicTable.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import {
-		type TableField,
+	import type {
+		TableField,
 		TableFieldBody,
 		TableFieldBodyRow,
 		TableFieldDataCell,
 		TableFieldHead,
 		TableFieldHeadRow,
 		TableFieldHeaderCell,
-		isFilled,
 	} from "@prismicio/client";
-	import { type Component } from "svelte";
+	import { isFilled } from "@prismicio/client";
+	import type { Component } from "svelte";
 
-	import { type RichTextComponents, type TableComponents } from "./types";
+	import type { RichTextComponents, TableComponents } from "./types";
 
 	import PrismicRichText from "./PrismicRichText/PrismicRichText.svelte";
 

package/src/SliceSimulator.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import {
+		SimulatorManager,
+		StateEventType,
+		disableEventHandler,
+		getDefaultMessage,
+		getDefaultProps,
+		getDefaultSlices,
+		onClickHandler,
+		simulatorClass,
+		simulatorRootClass,
+	} from "@prismicio/simulator/kit";
+
+	const defaultProps = getDefaultProps();
+
+	export let zIndex = defaultProps.zIndex;
+	export let background = defaultProps.background;
+
+	let slices = getDefaultSlices();
+	let message = getDefaultMessage();
+
+	if (typeof window !== "undefined") {
+		const simulatorManager = new SimulatorManager();
+
+		simulatorManager.state.on(
+			StateEventType.Slices,
+			(newSlices) => {
+				slices = newSlices;
+			},
+			"simulator-slices",
+		);
+		simulatorManager.state.on(
+			StateEventType.Message,
+			(newMessage) => {
+				message = newMessage;
+			},
+			"simulator-message",
+		);
+
+		simulatorManager.init();
+	}
+</script>
+
+<div
+	class="{simulatorClass} {$$props.class}"
+	style="z-index: {zIndex}; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: auto; background: {background}"
+>
+	{#if message}
+		<article>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html message}
+		</article>
+	{:else if slices.length}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			id="root"
+			class={simulatorRootClass}
+			on:click={onClickHandler}
+			on:submit={disableEventHandler}
+			on:keypress={disableEventHandler}
+		>
+			<slot {slices} />
+		</div>
+	{/if}
+</div>

package/src/index.ts

@@ -7,6 +7,7 @@ export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.sv
 export { default as PrismicTable } from "./PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
+export { default as SliceSimulator } from "./SliceSimulator.svelte";
 
 /**
  * @deprecated Replaced with `RichTextComponents`