Add Context Menu to Preview

package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"build": "pnpm -r build",
-		"build:packages": "pnpm -F \"./packages/**\" --parallel build",
+		"build:packages": "pnpm -F \"./packages/**\" -r build",
 		"build:preview": "pnpm build:packages && pnpm -F preview build",
 		"check": "pnpm --parallel check",
 		"format": "pnpm --parallel format",
@@ -28,4 +28,4 @@
 		]
 	},
 	"packageManager": "[email protected]+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
-}
+}

packages/svelte-file-tree-styled/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+
+# Generated Files
+/.svelte-kit
+
+# Build
+/dist
+
+# OS Files
+.DS_Store

packages/svelte-file-tree-styled/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

packages/svelte-file-tree-styled/.prettierrc.json

@@ -0,0 +1,14 @@
+{
+	"useTabs": true,
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/app.css"
+}

packages/svelte-file-tree-styled/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
+```

packages/svelte-file-tree-styled/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "svelte-file-tree-styled",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "svelte-kit sync && svelte-package --watch",
+		"build": "svelte-kit sync && svelte-package && publint",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "pnpm run build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"format:check": "prettier --check ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"types": "./dist/index.d.ts",
+	"svelte": "./dist/index.js",
+	"peerDependencies": {
+		"svelte": "^5.20.0"
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "^2.20.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.14",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.9",
+		"svelte": "^5.23.1",
+		"svelte-check": "^4.1.5",
+		"tailwindcss": "^4.0.14",
+		"typescript": "^5.0.0",
+		"vite": "^6.2.2"
+	},
+	"dependencies": {
+		"@lucide/svelte": "^0.482.0",
+		"bits-ui": "^1.3.13",
+		"svelte-file-tree": "workspace:^"
+	}
+}

packages/svelte-file-tree-styled/src/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

packages/svelte-file-tree-styled/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

packages/svelte-file-tree-styled/src/lib/components/AddItemDialog.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	import type { EventHandler } from "svelte/elements";
+	import { fade, scale } from "svelte/transition";
+
+	const id = $props.id();
+	const typeId = `${id}:type`;
+	const nameId = `${id}:name`;
+
+	type SubmitResult = {
+		type: "file" | "folder";
+		name: string;
+	};
+
+	let isOpen = $state.raw(false);
+	let type: "file" | "folder" = $state.raw("file");
+	let name = $state.raw("");
+	let onSubmit: ((result: SubmitResult) => Promise<boolean>) | undefined;
+	let onCancel: (() => void) | undefined;
+
+	type OpenArgs = {
+		onSubmit?: (result: SubmitResult) => Promise<boolean>;
+		onCancel?: () => void;
+	};
+
+	export function open(args: OpenArgs = {}) {
+		if (isOpen) {
+			throw new Error("The dialog is already open");
+		}
+
+		isOpen = true;
+		onSubmit = args.onSubmit;
+		onCancel = args.onCancel;
+	}
+
+	function reset(): void {
+		onCancel = undefined;
+		onSubmit = undefined;
+		name = "";
+		type = "file";
+		isOpen = false;
+	}
+
+	const handleSubmit: EventHandler<SubmitEvent, HTMLFormElement> = async (event) => {
+		event.preventDefault();
+
+		if (onSubmit !== undefined) {
+			const didSubmit = await onSubmit({ type, name });
+			if (!didSubmit) {
+				return;
+			}
+		}
+
+		reset();
+	};
+
+	function onOpenChange(isOpen: boolean): void {
+		if (!isOpen) {
+			onCancel?.();
+			reset();
+		}
+	}
+</script>
+
+<Dialog.Root bind:open={isOpen} {onOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay forceMount class="fixed inset-0 z-50 bg-black/50">
+			{#snippet child({ props })}
+				{#if isOpen}
+					<div {...props} transition:fade={{ duration: 200 }}></div>
+				{/if}
+			{/snippet}
+		</Dialog.Overlay>
+
+		<Dialog.Content
+			forceMount
+			class="fixed top-1/2 left-1/2 z-50 w-xs -translate-x-1/2 -translate-y-1/2 rounded-lg bg-neutral-100 p-4 md:w-md"
+		>
+			{#snippet child({ props })}
+				{#if isOpen}
+					<div {...props} transition:scale={{ duration: 200, start: 0.9 }}>
+						<Dialog.Title class="text-center text-2xl font-semibold tracking-tight">
+							Add a New Item
+						</Dialog.Title>
+
+						<form onsubmit={handleSubmit} class="mt-4">
+							<div>
+								<label for={typeId} class="text-sm font-medium">Type</label>
+								<select
+									id={typeId}
+									bind:value={type}
+									class="mt-1 block h-9 rounded border border-slate-400 bg-white ps-1 focus-visible:border-slate-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600"
+								>
+									<option>file</option>
+									<option>folder</option>
+								</select>
+							</div>
+
+							<div class="mt-3">
+								<label for={nameId} class="text-sm font-medium">Name</label>
+								<input
+									id={nameId}
+									bind:value={name}
+									required
+									class="mt-1 block h-9 w-full rounded border border-slate-400 bg-white px-3 focus-visible:border-slate-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600"
+								/>
+							</div>
+
+							<div class="mt-5 ml-auto w-fit">
+								<button
+									type="submit"
+									class="flex h-10 items-center justify-center rounded-lg border border-current px-6 text-sm font-semibold hover:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current active:bg-neutral-300"
+								>
+									Add
+								</button>
+							</div>
+						</form>
+					</div>
+				{/if}
+			{/snippet}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

packages/svelte-file-tree-styled/src/lib/components/NameConflictDialog.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	import type { NameConflictResolution } from "svelte-file-tree";
+	import { fade, fly } from "svelte/transition";
+
+	let isOpen = $state.raw(false);
+	let title = $state.raw("");
+	let description = $state.raw("");
+	let onClose: ((result: NameConflictResolution) => void) | undefined;
+
+	type OpenArgs = {
+		title: string;
+		description: string;
+		onClose?: (result: NameConflictResolution) => void;
+	};
+
+	export function open(args: OpenArgs): void {
+		if (isOpen) {
+			throw new Error("The dialog is already open");
+		}
+
+		isOpen = true;
+		title = args.title;
+		description = args.description;
+		onClose = args.onClose;
+	}
+
+	function close(result: NameConflictResolution): void {
+		onClose?.(result);
+		onClose = undefined;
+		description = "";
+		title = "";
+		isOpen = false;
+	}
+
+	function onOpenChange(isOpen: boolean): void {
+		if (!isOpen) {
+			close("cancel");
+		}
+	}
+</script>
+
+<Dialog.Root bind:open={isOpen} {onOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay forceMount class="fixed inset-0 z-50 bg-black/50">
+			{#snippet child({ props })}
+				{#if isOpen}
+					<div {...props} transition:fade={{ duration: 200 }}></div>
+				{/if}
+			{/snippet}
+		</Dialog.Overlay>
+
+		<Dialog.Content
+			forceMount
+			class="fixed top-0 left-1/2 z-50 w-xs -translate-x-1/2 rounded-b-lg bg-neutral-100 p-4 md:w-md"
+		>
+			{#snippet child({ props })}
+				{#if isOpen}
+					<div {...props} transition:fly={{ y: "-100%" }}>
+						<Dialog.Title class="text-center text-lg font-semibold tracking-tight">
+							{title}
+						</Dialog.Title>
+
+						<Dialog.Description class="mt-2 text-sm text-gray-700">
+							{description}
+						</Dialog.Description>
+
+						<div class="mt-5 flex justify-end gap-3">
+							<button
+								onclick={() => close("skip")}
+								class="flex h-10 items-center justify-center rounded-lg border border-current px-6 text-sm font-semibold hover:bg-current/8 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current active:bg-current/12"
+							>
+								Skip
+							</button>
+
+							<button
+								onclick={() => close("cancel")}
+								class="flex h-10 items-center justify-center rounded-lg border border-current px-6 text-sm font-semibold text-red-700 hover:bg-current/8 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current active:bg-current/12"
+							>
+								Cancel
+							</button>
+						</div>
+					</div>
+				{/if}
+			{/snippet}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>