@peteai/presentation-editor 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/components/presentation-editor/app.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/dist/components/presentation-editor/cognition-slides.d.ts

@@ -0,0 +1,56 @@
+export declare const cognitionImages: {
+    id: string;
+    src: string;
+    width: number;
+    height: number;
+}[];
+export declare const cognitionSlides: ({
+    slide_layout_plan: string;
+    type: string;
+    headline: string;
+    subheadline: string;
+    image: string;
+    caption: string;
+    text: string;
+    bullets: never[];
+    left_type: string;
+    right_type: string;
+    left_image: string;
+    right_image: {
+        id: string;
+        src: string;
+        width: number;
+        height: number;
+    };
+    left_caption: string;
+    right_caption: string;
+    left_text: string;
+    right_text: string;
+    left_quote: string;
+    right_quote: string;
+    left_bullets: string[];
+    right_bullets: never[];
+    slide_script: string;
+} | {
+    slide_layout_plan: string;
+    type: string;
+    headline: string;
+    subheadline: string;
+    image: string;
+    caption: string;
+    text: string;
+    bullets: string[];
+    left_type: string;
+    right_type: string;
+    left_image: string;
+    right_image: string;
+    left_caption: string;
+    right_caption: string;
+    left_text: string;
+    right_text: string;
+    left_quote: string;
+    right_quote: string;
+    left_bullets: never[];
+    right_bullets: never[];
+    slide_script: string;
+})[];

package/dist/components/presentation-editor/cognition-slides.js

@@ -0,0 +1,182 @@
+import uniqid from 'uniqid';
+export const cognitionImages = [
+    {
+        id: uniqid(),
+        src: 'https://upload.wikimedia.org/wikipedia/commons/4/42/Baby.gnu-800x800.png',
+        width: 800,
+        height: 800,
+    },
+    {
+        id: uniqid(),
+        src: 'https://i.imgflip.com/2cpncg.jpg',
+        width: 800,
+        height: 800,
+    },
+    {
+        id: uniqid(),
+        src: 'https://ae01.alicdn.com/kf/S542f9243753249af8cacfca42bb400d2f/Custom-3D-Photo-Wallpaper-Kids-Bedroom-Modern-Hand-Painted-Cartoon-Universe-Star-Sky-Planet-Children-Room.jpg',
+        width: 800,
+        height: 800,
+    },
+    {
+        id: uniqid(),
+        src: 'https://www.aestheticroomcore.com/cdn/shop/files/82_b6a22607-136b-4bed-aa76-02bee6b85522.jpg?v=1687803719',
+        width: 800,
+        height: 800,
+    },
+];
+export const cognitionSlides = [
+    {
+        slide_layout_plan: "For the first slide, I want to introduce the topic and provide a brief overview of what's to come. A title slide is appropriate here, with a headline that clearly indicates the subject matter and a subheadline that gives some additional context. The image should reflect the high-level topic of AI in acquiring banks. This slide sets the stage for the deeper dive into the statistics and insights that will be covered in subsequent slides.",
+        type: 'title',
+        headline: 'Acquirer AI Statistics',
+        subheadline: 'Understanding the Role of AI in Merchant Profitability',
+        image: 'Overview image showing AI technology and acquiring banks',
+        caption: '',
+        text: '',
+        bullets: [],
+        left_type: '',
+        right_type: '',
+        left_image: '',
+        right_image: '',
+        left_caption: '',
+        right_caption: '',
+        left_text: '',
+        right_text: '',
+        left_quote: '',
+        right_quote: '',
+        left_bullets: [],
+        right_bullets: [],
+        slide_script: "Acquiring banks in the United States face numerous challenges in maintaining the profitability of their merchant accounts. Almost half of the merchants on their platforms are unprofitable. This session will delve into the statistics and insights on how AI technology helps mitigate these challenges. We'll explore the timeframe required for acquirers to turn a profit, the impact of annual revenue categories, and the role of AI in reducing fraud and enhancing operational efficiency. Our research findings indicate that AI use is widespread among acquirers, with 69% employing it to monitor merchants effectively. This session will also cover the trend of outsourcing AI technology and the key criteria acquirers consider when selecting third-party providers. By investing in AI, acquirers aim to onboard more merchants swiftly and improve overall service quality. The conclusive insights emphasize the market-wide drive toward AI adoption to boost profitability and competitive positioning. These statistics highlight the transformative potential of AI in the acquirer space, making it an indispensable tool for modern merchant monitoring. Understanding these dynamics is crucial for anyone involved in the acquirer or payments industry.",
+    },
+    {
+        slide_layout_plan: "For the second slide, we want to dive into some key statistics that set the stage for the importance of AI in the acquirer industry. A column slide layout would work well here to present a balance of text and visual elements. On the left side, we'll have a list of bullet points summarizing the key statistics about profitability and fraud. On the right side, we'll place an image depicting a statistical graph or infographic related to merchant profitability challenges. This will make the slide visually engaging while providing a concise summary of important data points.",
+        type: 'columns',
+        headline: 'Key Statistics',
+        subheadline: '',
+        image: 'Statistical graph or infographic depicting merchant profitability challenges',
+        caption: '',
+        text: '',
+        bullets: [],
+        left_type: 'bullets',
+        right_type: 'image',
+        left_image: '',
+        right_image: cognitionImages[0],
+        left_caption: '',
+        right_caption: '',
+        left_text: '',
+        right_text: '',
+        left_quote: '',
+        right_quote: '',
+        left_bullets: [
+            '19% of merchants onboarded leave too quickly to turn a profit.',
+            '12% are unprofitable due to fraudulent activity.',
+            '9.3% are unprofitable due to low transaction volumes.',
+            '69% of acquirers use AI to monitor merchants.',
+        ],
+        right_bullets: [],
+        slide_script: "Let's take a look at some key statistics that highlight the challenges acquirers face in making their merchant accounts profitable. According to our research, 19% of merchants onboarded each month leave too quickly to be profitable. Additionally, fraudulent activity and low transaction volumes make 12% and 9.3% of merchants unprofitable, respectively. It's also key to note that 69% of acquirers have turned to AI to monitor their merchants, aiming to combat these challenges.",
+    },
+    {
+        slide_layout_plan: "For our next slide, we'll focus on the specific influence of AI on profitability and churn rates among acquirers. Given the detailed nature of this topic, we'll opt for a column slide layout to present a combination of textual data and visual cues.  On the left side, we'll feature a paragraph that discusses the average time it takes for acquirers to turn a profit and how these metrics vary based on the usage of AI and annual revenue. On the right side, we'll include an image illustrating the 8.8-month average profitability timeline. This visual aid will emphasize the timeframe required for profitability and make the presented data easier to digest.",
+        type: 'columns',
+        headline: "AI's Impact on Profitability",
+        subheadline: '',
+        image: '',
+        caption: '',
+        text: '',
+        bullets: [],
+        left_type: 'paragraph',
+        right_type: 'image',
+        left_image: '',
+        right_image: cognitionImages[1],
+        left_caption: '',
+        right_caption: '',
+        left_text: "On average, acquirers need 8.8 months to turn a profit from a merchant. However, this duration varies based on the acquirer's revenue and AI usage. For example, larger acquirers generating more than $500 million in annual revenue require around 12.1 months due to higher levels of churn. AI usage often extends the time to profitability owing to the substantial initial costs and setup complexities.",
+        right_text: '',
+        left_quote: '',
+        right_quote: '',
+        left_bullets: [],
+        right_bullets: [],
+        slide_script: "Now, let's delve into how AI impacts the profitability and churn rates among acquirers. Generally, acquirers need about 8.8 months to start making a profit from a merchant. This timeframe, however, can vary. Acquirers with over $500 million in annual revenue, for instance, take around 12.1 months to become profitable, highlighting the significant churn rate they face. The use of AI can further extend this timeframe due to the substantial initial costs and complex setups involved in implementing AI systems. We'll illustrate this with a visual representation of the average profitability timeline to help you grasp these findings better.",
+    },
+    {
+        slide_layout_plan: "Our next slide will review the key statistics around the use of AI among acquirers. We will use a column layout again, which aligns well with splitting quantitative data and visual representation for better clarity. On the left side, we'll display bullets highlighting crucial numbers regarding merchants' profitability, fraud prevention, and onboarding challenges. On the right side, we will include an informative image that represents the AI utilization rates among acquirers. This combination will ensure a well-rounded understanding of AI's statistical impact in the acquiring industry.",
+        type: 'columns',
+        headline: 'Key Statistics on AI Usage',
+        subheadline: '',
+        image: '',
+        caption: '',
+        text: '',
+        bullets: [],
+        left_type: 'bullets',
+        right_type: 'image',
+        left_image: '',
+        right_image: cognitionImages[2],
+        left_caption: '',
+        right_caption: '',
+        left_text: '',
+        right_text: '',
+        left_quote: '',
+        right_quote: '',
+        left_bullets: [
+            '19% of merchants leave too quickly to be profitable',
+            'Fraudulent activity prevents 12% from being profitable',
+            'Low transaction volumes limit profitability for 9.3%',
+            '69% of acquirers use AI to monitor their merchants',
+        ],
+        right_bullets: [],
+        slide_script: "Let's take a closer look at some compelling statistics surrounding the use of AI among acquiring banks. Our research indicates that 19% of merchants onboarded monthly leave before turning a profit. Fraudulent activities impact 12% of merchants' profitability, while low transaction volumes affect 9.3%. Significantly, 69% of acquirers leverage AI to monitor their merchants, emphasizing AI's crucial role in this industry. On the right side, you'll see a visual representation showcasing how extensively AI is employed for merchant monitoring.",
+    },
+    {
+        slide_layout_plan: "For the next slide, we'll focus on the profitability timeframe and its variation based on revenue and AI usage. We'll again use a column layout to effectively split the textual explanation and a visual representation designed to enhance understanding. The left side will feature a paragraph outlining the duration and variation in profitability of the merchants. The right side will present a graphical image highlighting different timeframes acquirers require to achieve profitability, particularly differentiating between those with AI and without AI.",
+        type: 'columns',
+        headline: 'Profitability Timeframe and AI Impact',
+        subheadline: '',
+        image: '',
+        caption: '',
+        text: '',
+        bullets: [],
+        left_type: 'paragraph',
+        right_type: 'image',
+        left_image: '',
+        right_image: cognitionImages[3],
+        left_caption: '',
+        right_caption: '',
+        left_text: "On average, acquirers need 8.8 months to turn a profit from a merchant. This duration varies based on the acquirer's revenue and AI usage. For example, acquirers generating more than $500 million in annual revenue need 12.1 months to be profitable. This issue is more pronounced for acquirers using AI, where profitability can take longer due to high initial costs and complex setups.",
+        right_text: '',
+        left_quote: '',
+        right_quote: '',
+        left_bullets: [],
+        right_bullets: [],
+        slide_script: 'In this slide, we will discuss the timeframe required for acquirers to turn a profit from their merchants, and how it varies across different revenue categories and AI usage. On average, acquirers need 8.8 months to break even. However, those generating more than $500 million annually may need up to 12.1 months due to higher churn rates. Interestingly, acquirers utilizing AI might also take longer to achieve profitability due to initial setup costs and complexities, though AI eventually offers significant benefits in fraud detection and operational efficiency. A graph on the right will visually depict these variations.',
+    },
+    {
+        slide_layout_plan: 'Shifting focus to the duration it takes for acquirers to become profitable with their merchant accounts. A bullet layout for key statistics along with brief explanatory bullet points provides a quick, effective way for audiences to grasp the essential figures. This layout will avoid clutter and ensure clarity. Key statistics such as the average number of months to profitability and the impact of AI implementation on profitability duration will be prominently featured. No images will be needed for this slide, focusing purely on the textual data.',
+        type: 'bullets',
+        headline: 'Profitability Duration of Merchant Accounts',
+        subheadline: '',
+        image: '',
+        caption: '',
+        text: '',
+        bullets: [
+            'Acquirers need 8.8 months on average to turn a profit from a merchant.',
+            'Acquirers earning more than $500 million annually take 12.1 months to become profitable.',
+            'High churn rates and complexities with AI setups can delay profitability.',
+            'AI usage can lengthen the time due to initial costs and complex setups.',
+        ],
+        left_type: '',
+        right_type: '',
+        left_image: '',
+        right_image: '',
+        left_caption: '',
+        right_caption: '',
+        left_text: '',
+        right_text: '',
+        left_quote: '',
+        right_quote: '',
+        left_bullets: [],
+        right_bullets: [],
+        slide_script: 'This slide highlights key statistics on the duration required for acquirers to turn a profit from their merchant accounts. It takes an average of 8.8 months for acquirers to become profitable. Notably, those with over $500 million in annual revenue take around 12.1 months due to higher churn rates. The use of AI can also extend this period because of the initial costs and complex setups involved. These statistics underline the time and financial investment necessary for profitability in the acquiring business.',
+    },
+];

package/dist/components/presentation-editor/cursor-tooltip.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Tooltip from '../ui/tooltip/index.js';
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+</script>
+
+{#if editor.activeAction?.tooltip}
+	{@const tooltip = editor.activeAction.tooltip}
+	<div
+		class="pointer-events-none fixed left-0 top-0 z-10"
+		style:transform="translate({tooltip.x}px, {tooltip.y}px)"
+	>
+		<Tooltip.Provider>
+			<Tooltip.Root controlledOpen open={true}>
+				<Tooltip.Trigger class="absolute"></Tooltip.Trigger>
+				<Tooltip.Content
+					side="bottom"
+					align="start"
+					sideOffset={20}
+					alignOffset={20}
+					avoidCollisions={false}
+				>
+					{tooltip.text}
+				</Tooltip.Content>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	</div>
+{/if}

package/dist/components/presentation-editor/cursor-tooltip.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CursorTooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CursorTooltip = InstanceType<typeof CursorTooltip>;
+export default CursorTooltip;

package/dist/components/presentation-editor/dragged.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+</script>
+
+{#if editor.dragged}
+	{@const dragged = editor.dragged}
+	{@const translateX = dragged.x - dragged.offsetX}
+	{@const translateY = dragged.y - dragged.offsetY}
+	<div
+		class="pointer-events-none fixed left-0 top-0 z-10"
+		style:opacity={dragged.hidden ? 0 : null}
+		style:transform="translate({translateX}px, {translateY}px)"
+	>
+		<div
+			class="origin-top-left opacity-50 transition-transform"
+			style:transform="scale({dragged.scale || dragged.initialScale})"
+		>
+			<img
+				crossorigin="anonymous"
+				src={dragged.image.src}
+				alt=""
+				class="pointer-events-none max-w-max bg-contain bg-center bg-no-repeat"
+				draggable="false"
+				style:width="{dragged.image.width}px"
+				style:height="{dragged.image.height}px"
+			/>
+		</div>
+	</div>
+{/if}

package/dist/components/presentation-editor/dragged.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Dragged: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Dragged = InstanceType<typeof Dragged>;
+export default Dragged;

package/dist/components/presentation-editor/header.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import UndoIcon from 'lucide-svelte/icons/undo-2';
+	import RedoIcon from 'lucide-svelte/icons/redo-2';
+	import { Button } from '../ui/button/index.js';
+	import type { ActiveSidebar } from './types.js';
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import { BackgroundLayerButtons, HtmlLayerButtons, ImageLayerButtons } from './layers/index.js';
+
+	interface Props {
+		activeSidebarTab: ActiveSidebar;
+		onChange: (tab: ActiveSidebar) => void;
+	}
+	let { activeSidebarTab, onChange }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+</script>
+
+<div class="bg-background h-12 w-full border-b border-gray-200 px-2">
+	<div class="flex h-full items-center justify-between">
+		<div class="grid grid-flow-col items-center gap-2">
+			<Button
+				variant="ghost"
+				size="xs"
+				active={activeSidebarTab === 'layers'}
+				onclick={() => onChange('layers')}
+			>
+				Layers
+			</Button>
+			<Button
+				variant="ghost"
+				size="xs"
+				active={activeSidebarTab === 'images'}
+				onclick={() => onChange('images')}
+			>
+				Images
+			</Button>
+			<Button
+				variant="ghost"
+				size="icon-xs"
+				disabled={editor.historyIndex === -1}
+				onclick={() => editor.historyUndo()}
+			>
+				<UndoIcon class="h-6 w-6" />
+			</Button>
+			<Button
+				variant="ghost"
+				size="icon-xs"
+				disabled={editor.historyIndex === editor.historyActions.length - 1}
+				onclick={() => editor.historyRedo()}
+			>
+				<RedoIcon class="h-6 w-6" />
+			</Button>
+			{#if editor.activeBackground}
+				<BackgroundLayerButtons />
+			{:else if editor.activeLayer}
+				{#if editor.activeLayer.type === 'html'}
+					{#if editor.htmlEditor}
+						<HtmlLayerButtons bind:layer={editor.activeLayer} htmlEditor={editor.htmlEditor} />
+					{/if}
+				{:else if editor.activeLayer.type === 'image'}
+					<ImageLayerButtons bind:layer={editor.activeLayer} />
+				{/if}
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/presentation-editor/header.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ActiveSidebar } from './types.js';
+interface Props {
+    activeSidebarTab: ActiveSidebar;
+    onChange: (tab: ActiveSidebar) => void;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/presentation-editor/index.d.ts

@@ -0,0 +1,2 @@
+import PresentationEditor from './presentation-editor.svelte';
+export { PresentationEditor };

package/dist/components/presentation-editor/index.js

@@ -0,0 +1,2 @@
+import PresentationEditor from './presentation-editor.svelte';
+export { PresentationEditor };

package/dist/components/presentation-editor/layers/active-background-border.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+</script>
+
+<div
+	class="pointer-events-none absolute left-0 top-0 h-full w-full"
+	style:width={`${editor.width * editor.zoom}px`}
+	style:height={`${editor.height * editor.zoom}px`}
+>
+	<div
+		class="absolute -inset-px border-2 border-purple-500"
+		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
+	></div>
+</div>

package/dist/components/presentation-editor/layers/active-background-border.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ActiveBackgroundBorder: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ActiveBackgroundBorder = InstanceType<typeof ActiveBackgroundBorder>;
+export default ActiveBackgroundBorder;

package/dist/components/presentation-editor/layers/active-layer-border.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import type { Layer } from '../types.js';
+
+	interface Props {
+		layer: Layer;
+		children?: import('svelte').Snippet;
+	}
+
+	let { layer, children }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let scale = $derived(layer.scale ?? 1);
+	let rotate = $derived(layer.rotate ?? 0);
+</script>
+
+<div
+	class="pointer-events-none absolute left-0 top-0 h-full w-full"
+	style:width={`${layer.width * scale * editor.zoom}px`}
+	style:height={`${layer.height * scale * editor.zoom}px`}
+	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${rotate}deg)`}
+>
+	<div
+		class="absolute -inset-px border-2 border-purple-500"
+		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
+	></div>
+</div>
+
+{@render children?.()}

package/dist/components/presentation-editor/layers/active-layer-border.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Layer } from '../types.js';
+interface Props {
+    layer: Layer;
+    children?: import('svelte').Snippet;
+}
+declare const ActiveLayerBorder: import("svelte").Component<Props, {}, "">;
+type ActiveLayerBorder = ReturnType<typeof ActiveLayerBorder>;
+export default ActiveLayerBorder;