create-quicklook 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,23 @@
+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.markdown

@@ -0,0 +1,19 @@
+# create-quicklook
+
+![License](https://img.shields.io/npm/l/quicklook-kit?style=for-the-badge)
+[![Version](https://img.shields.io/npm/v/quicklook-kit?style=for-the-badge)](https://www.npmjs.org/package/quicklook-kit)
+[![Build](https://img.shields.io/github/actions/workflow/status/idleberg/quicklook-kit/ci.yml?style=for-the-badge)](https://github.com/idleberg/quicklook-kit/actions)
+
+> Create a macOS QuickLook preview with any Vite-based web framework
+
+```sh
+pnpm create quicklook my-preview
+```
+
+Asks for a template (SvelteKit, Astro, SolidStart, Nuxt or Analog) and whether to add a GitHub release workflow. Skip the questions with `--template <name>` and `--release` or `--no-release`.
+
+The project uses [quicklook-kit](https://www.npmjs.com/package/quicklook-kit); see its readme for what to do next.
+
+## License
+
+This work is licensed under [The MIT License](https://opensource.org/licenses/MIT).

package/dist/index.mjs

@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+import { execFileSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { cp, readFile, readdir, writeFile } from "node:fs/promises";
+import { basename, relative, resolve } from "node:path";
+import process from "node:process";
+import { fileURLToPath } from "node:url";
+import { parseArgs } from "node:util";
+import { cancel, confirm, intro, isCancel, note, outro, select, text } from "@clack/prompts";
+//#region src/index.ts
+const pkgRoot = fileURLToPath(new URL("..", import.meta.url));
+const templates = (await readdir(`${pkgRoot}/templates`)).toSorted();
+const { values, positionals } = parseArgs({
+	allowPositionals: true,
+	allowNegative: true,
+	options: {
+		template: {
+			type: "string",
+			short: "t"
+		},
+		release: { type: "boolean" }
+	}
+});
+/** Exits quietly when a prompt is cancelled with Ctrl+C or Esc. */
+function answer(value) {
+	if (isCancel(value)) {
+		cancel("Cancelled, nothing created.");
+		process.exit(1);
+	}
+	return value;
+}
+intro("create-quicklook");
+const dir = resolve(positionals[0] ?? answer(await text({
+	message: "Project folder",
+	placeholder: "quicklook-preview",
+	defaultValue: "quicklook-preview"
+})));
+if (existsSync(dir) && (await readdir(dir)).length > 0) {
+	cancel(`${dir} is not empty.`);
+	process.exit(1);
+}
+const template = values.template && templates.includes(values.template) ? values.template : answer(await select({
+	message: "Template",
+	options: templates.map((value) => ({ value }))
+}));
+const release = values.release ?? answer(await confirm({
+	message: "Add a GitHub release workflow?",
+	initialValue: false
+}));
+await cp(`${pkgRoot}/templates/${template}`, dir, { recursive: true });
+for (const file of ["mise.toml", "hk.pkl"]) await cp(`${pkgRoot}/files/${file}`, `${dir}/${file}`);
+await cp(`${pkgRoot}/files/biome.template.jsonc`, `${dir}/biome.jsonc`);
+await cp(`${pkgRoot}/files/ci.yml`, `${dir}/.github/workflows/ci.yml`);
+await cp(`${pkgRoot}/files/gitignore`, `${dir}/.gitignore`);
+if (release) await cp(`${pkgRoot}/files/release.yml`, `${dir}/.github/workflows/release.yml`);
+const pkg = JSON.parse(await readFile(`${dir}/package.json`, "utf8"));
+pkg.name = basename(dir);
+const pnpm = process.env.npm_config_user_agent?.match(/^pnpm\/(\S+)/)?.[1];
+if (pnpm) pkg.packageManager = `pnpm@${pnpm}`;
+await writeFile(`${dir}/package.json`, `${JSON.stringify(pkg, null, "	")}\n`);
+function git(...args) {
+	execFileSync("git", args, {
+		cwd: dir,
+		stdio: "ignore"
+	});
+}
+try {
+	git("rev-parse", "--is-inside-work-tree");
+} catch {
+	try {
+		git("init", "--quiet");
+	} catch {}
+}
+note([
+	`cd ${relative(process.cwd(), dir)}`,
+	"mise install    # or: pnpm install, with Xcode and XcodeGen installed",
+	"pnpm dev        # drop a file on the page to preview it",
+	"pnpm register   # build the app and register it with QuickLook"
+].join("\n"), "Next steps");
+outro(`Created from the ${template} template.`);
+//#endregion
+export {};

package/files/biome.template.jsonc

@@ -0,0 +1,28 @@
+{
+	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"formatter": {
+		"indentStyle": "tab",
+		"lineWidth": 100
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"trailingCommas": "all"
+		}
+	},
+	"html": {
+		"experimentalFullSupportEnabled": true
+	},
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

package/files/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  check:
+    # Same runner as the release workflow, XcodeGen from mise.toml needs macOS.
+    runs-on: macos-15
+    steps:
+      - uses: actions/checkout@v4
+
+      # pnpm's default store on macOS.
+      - uses: actions/cache@v6
+        with:
+          path: ~/Library/pnpm/store
+          key: pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: pnpm-
+
+      - uses: jdx/mise-action@v2
+
+      - run: pnpm run lint
+
+      - run: pnpm run check

package/files/gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.quicklook/
+.DS_Store
+
+# Framework output and caches
+.svelte-kit/
+build/
+.astro/
+dist
+.output/
+.nitro/
+.vinxi/
+.nuxt/
+.angular/

package/files/hk.pkl

@@ -0,0 +1,27 @@
+amends "package://github.com/jdx/hk/releases/download/v2.5.0/hk@2.5.0#/Config.pkl"
+import "package://github.com/jdx/hk/releases/download/v2.5.0/hk@2.5.0#/Builtins.pkl"
+
+local linters = new Mapping<String, Step> {
+    // pnpm exec runs the project's own Biome, whatever else is on PATH.
+    ["biome"] = (Builtins.biome) {
+        // The builtin only matches JS, TS and JSON.
+        glob = List("**/*.{js,jsx,ts,tsx,json,jsonc,css,html,svelte,astro,vue}")
+        check = "pnpm exec biome check --no-errors-on-unmatched --files-ignore-unknown=true {{ files }}"
+        fix = "pnpm exec biome check --write --no-errors-on-unmatched --files-ignore-unknown=true {{ files }}"
+    }
+}
+
+hooks {
+    ["pre-commit"] {
+        fix = true
+        stash = "git"
+        steps = linters
+    }
+    ["fix"] {
+        fix = true
+        steps = linters
+    }
+    ["check"] {
+        steps = linters
+    }
+}

package/files/mise.toml

@@ -0,0 +1,21 @@
+[tools]
+node = "24"
+xcodegen = "latest"
+hk = "latest"
+pkl = "latest"
+
+[settings]
+# Node ships pnpm through corepack, pinned by packageManager in package.json
+node.corepack = true
+
+[env]
+HK_MISE = 1
+COREPACK_ENABLE_DOWNLOAD_PROMPT = 0
+_.path = ["{{config_root}}/node_modules/.bin"]
+
+# The pre-commit hook needs a git repository; run `hk install --mise` after `git init`.
+[hooks]
+postinstall = """
+  pnpm install
+  if git rev-parse --git-dir >/dev/null 2>&1; then hk install --mise; fi
+"""

package/files/release.yml

@@ -0,0 +1,52 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+env:
+  # The folder holding quicklook.config.*, relative to the repository root.
+  PROJECT: .
+
+jobs:
+  build:
+    runs-on: macos-15
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/cache@v6
+        with:
+          path: ~/Library/pnpm/store
+          key: pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: pnpm-
+
+      - uses: jdx/mise-action@v2
+
+      # Release builds are universal (arm64 + x86_64) by default.
+      - run: pnpm install --frozen-lockfile && pnpm run build
+        working-directory: ${{ env.PROJECT }}
+        env:
+          VERSION: ${{ github.ref_name }}
+
+      - name: Package app
+        id: package
+        run: |
+          cd "$PROJECT/.quicklook/build"
+          app=$(ls -d *.app)
+          zip="${app%.app}"
+          zip="${zip// /-}-${GITHUB_REF_NAME}.zip"
+          zip -r -9 -y "$GITHUB_WORKSPACE/$zip" "$app"
+          cd "$GITHUB_WORKSPACE"
+          shasum -a 256 "$zip" > SHA256SUMS
+          echo "zip=$zip" >> "$GITHUB_OUTPUT"
+
+      - uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            ${{ steps.package.outputs.zip }}
+            SHA256SUMS
+          generate_release_notes: true

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "create-quicklook",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Create a macOS QuickLook preview with any Vite-based web framework",
+  "license": "MIT",
+  "keywords": [
+    "quicklook",
+    "quicklook-plugin",
+    "create",
+    "template"
+  ],
+  "type": "module",
+  "bin": {
+    "create-quicklook": "./dist/index.mjs"
+  },
+  "files": [
+    "dist",
+    "files",
+    "templates",
+    "!templates/*/node_modules",
+    "!templates/*/.quicklook",
+    "!templates/*/.DS_Store",
+    "!templates/*/.svelte-kit",
+    "!templates/*/build",
+    "!templates/*/.astro",
+    "!templates/*/dist",
+    "!templates/*/.output",
+    "!templates/*/.nitro",
+    "!templates/*/.vinxi",
+    "!templates/*/.nuxt",
+    "!templates/*/.angular"
+  ],
+  "engines": {
+    "node": ">=22.17"
+  },
+  "devDependencies": {
+    "@types/node": "24.19.2",
+    "tsdown": "0.23.0",
+    "typescript": "6.0.3"
+  },
+  "dependencies": {
+    "@clack/prompts": "1.8.1"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check": "tsc --noEmit"
+  }
 }

package/templates/analog/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		<title>Preview</title>
+		<style>
+			body {
+				margin: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<app-root></app-root>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

package/templates/analog/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "quicklook-analog",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "quicklook dev",
+		"build": "quicklook build",
+		"register": "quicklook build && quicklook register",
+		"unregister": "quicklook unregister",
+		"check": "ngc -p tsconfig.json --noEmit",
+		"lint": "biome check",
+		"format": "biome check --write"
+	},
+	"devDependencies": {
+		"@analogjs/vite-plugin-angular": "2.7.5",
+		"@angular/build": "22.2.0",
+		"@angular/common": "22.2.0",
+		"@angular/compiler": "22.2.0",
+		"@angular/compiler-cli": "22.2.0",
+		"@angular/core": "22.2.0",
+		"@angular/platform-browser": "22.2.0",
+		"@biomejs/biome": "2.5.14",
+		"quicklook-kit": "^0.3.0",
+		"rxjs": "7.8.2",
+		"tslib": "2.8.1",
+		"typescript": "6.0.3",
+		"vite": "8.3.0"
+	}
+}

package/templates/analog/quicklook.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'quicklook-kit';
+
+export default defineConfig({
+	name: 'QuickLook Example',
+	bundleId: 'com.example.QuickLookExample',
+	types: [
+		{
+			id: 'com.example.QuickLookExample.example',
+			description: 'Example File',
+			extensions: ['example'],
+			conformsTo: ['public.plain-text'],
+		},
+	],
+	framework: 'analog',
+});

package/templates/analog/src/app/app.ts

@@ -0,0 +1,45 @@
+import { browserFile, nativeFile, type QuickLookFile } from 'virtual:quicklook';
+import { Component, signal } from '@angular/core';
+import { FileViewer } from './file-viewer';
+
+@Component({
+	selector: 'app-root',
+	imports: [FileViewer],
+	host: { '(window:dragover)': '$event.preventDefault()', '(window:drop)': 'drop($event)' },
+	template: `
+		@if (file(); as file) {
+			<app-file-viewer [file]="file" />
+		} @else {
+			<!-- Only reachable in the browser: QuickLook always injects a file. -->
+			<label class="drop">
+				Drop a file here, or click to pick one
+				<input type="file" hidden (change)="open($any($event.target).files)" />
+			</label>
+		}
+	`,
+	styles: `
+		.drop {
+			display: grid;
+			place-items: center;
+			height: 100vh;
+			font: 14px system-ui;
+			color: GrayText;
+			cursor: pointer;
+		}
+	`,
+})
+export class App {
+	protected readonly file = signal<QuickLookFile | undefined>(nativeFile());
+
+	protected async open(files: FileList | null | undefined) {
+		const picked = files?.[0];
+		if (picked) {
+			this.file.set(await browserFile(picked));
+		}
+	}
+
+	protected drop(event: DragEvent) {
+		event.preventDefault();
+		this.open(event.dataTransfer?.files);
+	}
+}

package/templates/analog/src/app/file-viewer.ts

@@ -0,0 +1,24 @@
+// Your preview goes here. `file.bytes` holds the raw file; decode it however
+// the format needs. This example shows it as UTF-8 text.
+
+import type { QuickLookFile } from 'virtual:quicklook';
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-file-viewer',
+	template: '<pre>{{ text() }}</pre>',
+	styles: `
+		pre {
+			margin: 0;
+			padding: 1rem;
+			font:
+				12px ui-monospace,
+				monospace;
+			white-space: pre-wrap;
+		}
+	`,
+})
+export class FileViewer {
+	readonly file = input.required<QuickLookFile>();
+	protected readonly text = computed(() => new TextDecoder().decode(this.file().bytes));
+}

package/templates/analog/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+
+bootstrapApplication(App);

package/templates/analog/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "es2023",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"lib": ["es2023", "dom"],
+		"types": ["vite/client", "quicklook-kit/virtual"],
+		"strict": true,
+		"allowImportingTsExtensions": true,
+		"skipLibCheck": true,
+		"isolatedModules": true,
+		"useDefineForClassFields": false
+	},
+	"angularCompilerOptions": { "strictTemplates": true },
+	"include": ["src"]
+}

package/templates/analog/vite.config.ts

@@ -0,0 +1,15 @@
+import angular from '@analogjs/vite-plugin-angular';
+import { quicklook } from 'quicklook-kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		angular({
+			tsconfig: 'tsconfig.json',
+			// Only this app's components go through the Angular compiler; it would
+			// empty out a linked package's TypeScript, which isn't in the tsconfig.
+			transformFilter: (_code, id) => id.startsWith(`${import.meta.dirname}/src/`),
+		}),
+		quicklook(),
+	],
+});

package/templates/astro/astro.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+import { quicklook } from 'quicklook-kit/vite';
+
+export default defineConfig({
+	vite: { plugins: [quicklook()] },
+});

package/templates/astro/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "quicklook-astro",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "quicklook dev",
+		"build": "quicklook build",
+		"register": "quicklook build && quicklook register",
+		"unregister": "quicklook unregister",
+		"check": "astro check",
+		"lint": "biome check",
+		"format": "biome check --write"
+	},
+	"devDependencies": {
+		"@astrojs/check": "0.9.10",
+		"@biomejs/biome": "2.5.14",
+		"astro": "7.3.5",
+		"quicklook-kit": "^0.3.0",
+		"typescript": "6.0.3"
+	}
+}

package/templates/astro/quicklook.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'quicklook-kit';
+
+export default defineConfig({
+	name: 'QuickLook Example',
+	bundleId: 'com.example.QuickLookExample',
+	types: [
+		{
+			id: 'com.example.QuickLookExample.example',
+			description: 'Example File',
+			extensions: ['example'],
+			conformsTo: ['public.plain-text'],
+		},
+	],
+	framework: 'astro',
+});

package/templates/astro/src/components/FileViewer.astro

@@ -0,0 +1,39 @@
+<!--
+	Your preview goes here. `file.bytes` holds the raw file; decode it however
+	the format needs. This example shows it as UTF-8 text. Astro components only
+	render on the server, so the viewer is a custom element the page calls.
+-->
+<file-viewer hidden><pre></pre></file-viewer>
+
+<script>
+	import type { QuickLookFile } from 'virtual:quicklook';
+
+	class FileViewer extends HTMLElement {
+		show(file: QuickLookFile) {
+			const pre = this.querySelector('pre');
+			if (pre) {
+				pre.textContent = new TextDecoder().decode(file.bytes);
+			}
+			this.hidden = false;
+		}
+	}
+
+	declare global {
+		interface HTMLElementTagNameMap {
+			'file-viewer': FileViewer;
+		}
+	}
+
+	customElements.define('file-viewer', FileViewer);
+</script>
+
+<style>
+	pre {
+		margin: 0;
+		padding: 1rem;
+		font:
+			12px ui-monospace,
+			monospace;
+		white-space: pre-wrap;
+	}
+</style>

package/templates/astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="quicklook-kit/virtual" />

package/templates/astro/src/pages/index.astro

@@ -0,0 +1,73 @@
+---
+import FileViewer from '../components/FileViewer.astro';
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		<title>Preview</title>
+	</head>
+	<body>
+		<FileViewer />
+		<!-- Only reachable in the browser: QuickLook always injects a file. -->
+		<label id="drop">
+			Drop a file here, or click to pick one
+			<input type="file" hidden />
+		</label>
+
+		<script>
+			import { browserFile, nativeFile, type QuickLookFile } from 'virtual:quicklook';
+
+			const drop = document.querySelector<HTMLLabelElement>('#drop');
+
+			async function show(file: QuickLookFile) {
+				await customElements.whenDefined('file-viewer');
+				document.querySelector('file-viewer')?.show(file);
+				if (drop) {
+					drop.hidden = true;
+				}
+			}
+
+			async function open(files: FileList | null | undefined) {
+				const picked = files?.[0];
+				if (picked) {
+					await show(await browserFile(picked));
+				}
+			}
+
+			const injected = nativeFile();
+			if (injected) {
+				show(injected);
+			}
+			window.addEventListener('dragover', (event) => event.preventDefault());
+			window.addEventListener('drop', (event) => {
+				event.preventDefault();
+				open(event.dataTransfer?.files);
+			});
+			drop?.querySelector('input')?.addEventListener('change', (event) => {
+				open((event.currentTarget as HTMLInputElement).files);
+			});
+		</script>
+	</body>
+</html>
+
+<style is:global>
+	body {
+		margin: 0;
+	}
+
+	#drop {
+		display: grid;
+		place-items: center;
+		height: 100vh;
+		font: 14px system-ui;
+		color: GrayText;
+		cursor: pointer;
+	}
+
+	#drop[hidden] {
+		display: none;
+	}
+</style>

package/templates/astro/tsconfig.json

@@ -0,0 +1,5 @@
+{
+	"extends": "astro/tsconfigs/strict",
+	"include": [".astro/types.d.ts", "**/*"],
+	"exclude": ["dist", ".quicklook"]
+}

package/templates/nuxt/app/app.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { browserFile, nativeFile, type QuickLookFile } from 'virtual:quicklook';
+import { onMounted, shallowRef } from 'vue';
+import FileViewer from '~/components/FileViewer.vue';
+
+const file = shallowRef<QuickLookFile | undefined>(nativeFile());
+
+async function open(files: FileList | null | undefined) {
+	const picked = files?.[0];
+	if (picked) {
+		file.value = await browserFile(picked);
+	}
+}
+
+onMounted(() => {
+	window.addEventListener('dragover', (event) => event.preventDefault());
+	window.addEventListener('drop', (event) => {
+		event.preventDefault();
+		open(event.dataTransfer?.files);
+	});
+});
+</script>
+
+<template>
+	<FileViewer v-if="file" :file="file" />
+	<!-- Only reachable in the browser: QuickLook always injects a file. -->
+	<label v-else class="drop">
+		Drop a file here, or click to pick one
+		<input type="file" hidden @change="open(($event.target as HTMLInputElement).files)" />
+	</label>
+</template>
+
+<style>
+body {
+	margin: 0;
+}
+
+.drop {
+	display: grid;
+	place-items: center;
+	height: 100vh;
+	font: 14px system-ui;
+	color: GrayText;
+	cursor: pointer;
+}
+</style>

package/templates/nuxt/app/components/FileViewer.vue

@@ -0,0 +1,24 @@
+<!-- Your preview goes here. `file.bytes` holds the raw file; decode it however
+the format needs. This example shows it as UTF-8 text. -->
+<script setup lang="ts">
+import type { QuickLookFile } from 'virtual:quicklook';
+import { computed } from 'vue';
+
+const props = defineProps<{ file: QuickLookFile }>();
+const text = computed(() => new TextDecoder().decode(props.file.bytes));
+</script>
+
+<template>
+	<pre v-text="text" />
+</template>
+
+<style scoped>
+pre {
+	margin: 0;
+	padding: 1rem;
+	font:
+		12px ui-monospace,
+		monospace;
+	white-space: pre-wrap;
+}
+</style>

package/templates/nuxt/nuxt.config.ts

@@ -0,0 +1,16 @@
+import { defineNuxtConfig } from 'nuxt/config';
+import { quicklook } from 'quicklook-kit/vite';
+
+export default defineNuxtConfig({
+	compatibilityDate: '2026-07-01',
+	ssr: false,
+	app: { head: { meta: [{ name: 'color-scheme', content: 'light dark' }] } },
+	// The build manifest is fetched at runtime, which the extension's CSP blocks.
+	experimental: { appManifest: false },
+	vite: { plugins: [quicklook()] },
+	typescript: {
+		tsConfig: {
+			compilerOptions: { allowImportingTsExtensions: true, types: ['quicklook-kit/virtual'] },
+		},
+	},
+});

package/templates/nuxt/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "quicklook-nuxt",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"postinstall": "nuxt prepare",
+		"dev": "quicklook dev",
+		"build": "quicklook build",
+		"register": "quicklook build && quicklook register",
+		"unregister": "quicklook unregister",
+		"check": "nuxt typecheck",
+		"lint": "biome check",
+		"format": "biome check --write"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.5.14",
+		"nuxt": "4.5.2",
+		"quicklook-kit": "^0.3.0",
+		"typescript": "6.0.3",
+		"vue": "3.5.43",
+		"vue-tsc": "3.3.11"
+	}
+}

package/templates/nuxt/quicklook.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'quicklook-kit';
+
+export default defineConfig({
+	name: 'QuickLook Example',
+	bundleId: 'com.example.QuickLookExample',
+	types: [
+		{
+			id: 'com.example.QuickLookExample.example',
+			description: 'Example File',
+			extensions: ['example'],
+			conformsTo: ['public.plain-text'],
+		},
+	],
+	framework: 'nuxt',
+});

package/templates/nuxt/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./.nuxt/tsconfig.app.json" },
+		{ "path": "./.nuxt/tsconfig.server.json" },
+		{ "path": "./.nuxt/tsconfig.shared.json" },
+		{ "path": "./.nuxt/tsconfig.node.json" }
+	]
+}

package/templates/solid-start/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "quicklook-solid-start",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "quicklook dev",
+		"build": "quicklook build",
+		"register": "quicklook build && quicklook register",
+		"unregister": "quicklook unregister",
+		"check": "tsc --noEmit",
+		"lint": "biome check",
+		"format": "biome check --write"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.5.14",
+		"@solidjs/router": "1.0.0",
+		"@solidjs/start": "2.0.6",
+		"nitro": "3.0.260903-beta",
+		"quicklook-kit": "^0.3.0",
+		"solid-js": "1.9.17",
+		"typescript": "6.0.3",
+		"vite": "8.3.0"
+	}
+}

package/templates/solid-start/quicklook.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'quicklook-kit';
+
+export default defineConfig({
+	name: 'QuickLook Example',
+	bundleId: 'com.example.QuickLookExample',
+	types: [
+		{
+			id: 'com.example.QuickLookExample.example',
+			description: 'Example File',
+			extensions: ['example'],
+			conformsTo: ['public.plain-text'],
+		},
+	],
+	framework: 'solid-start',
+});

package/templates/solid-start/src/app.css

@@ -0,0 +1,12 @@
+body {
+	margin: 0;
+}
+
+.drop {
+	display: grid;
+	place-items: center;
+	height: 100vh;
+	font: 14px system-ui;
+	color: GrayText;
+	cursor: pointer;
+}

package/templates/solid-start/src/app.tsx

@@ -0,0 +1,12 @@
+import { Router } from '@solidjs/router';
+import { FileRoutes } from '@solidjs/start/router';
+import { Suspense } from 'solid-js';
+import './app.css';
+
+export default function App() {
+	return (
+		<Router root={(props) => <Suspense>{props.children}</Suspense>}>
+			<FileRoutes />
+		</Router>
+	);
+}

package/templates/solid-start/src/components/FileViewer.css

@@ -0,0 +1,8 @@
+pre {
+	margin: 0;
+	padding: 1rem;
+	font:
+		12px ui-monospace,
+		monospace;
+	white-space: pre-wrap;
+}

package/templates/solid-start/src/components/FileViewer.tsx

@@ -0,0 +1,8 @@
+// Your preview goes here. `file.bytes` holds the raw file; decode it however
+// the format needs. This example shows it as UTF-8 text.
+import type { QuickLookFile } from 'virtual:quicklook';
+import './FileViewer.css';
+
+export default function FileViewer(props: { file: QuickLookFile }) {
+	return <pre>{new TextDecoder().decode(props.file.bytes)}</pre>;
+}

package/templates/solid-start/src/entry-client.tsx

@@ -0,0 +1,7 @@
+// @refresh reload
+import { mount, StartClient } from '@solidjs/start/client';
+
+const app = document.getElementById('app');
+if (app) {
+	mount(() => <StartClient />, app);
+}

package/templates/solid-start/src/entry-server.tsx

@@ -0,0 +1,22 @@
+// @refresh reload
+import { createHandler, StartServer } from '@solidjs/start/server';
+
+export default createHandler(() => (
+	<StartServer
+		document={({ assets, children, scripts }) => (
+			<html lang="en">
+				<head>
+					<meta charset="utf-8" />
+					<meta name="viewport" content="width=device-width, initial-scale=1" />
+					<meta name="color-scheme" content="light dark" />
+					<title>Preview</title>
+					{assets}
+				</head>
+				<body>
+					<div id="app">{children}</div>
+					{scripts}
+				</body>
+			</html>
+		)}
+	/>
+));

package/templates/solid-start/src/routes/index.tsx

@@ -0,0 +1,35 @@
+import { browserFile, nativeFile, type QuickLookFile } from 'virtual:quicklook';
+import { createSignal, Show } from 'solid-js';
+import FileViewer from '~/components/FileViewer';
+
+export default function Home() {
+	const [file, setFile] = createSignal<QuickLookFile | undefined>(nativeFile());
+
+	async function open(files: FileList | null | undefined) {
+		const picked = files?.[0];
+		if (picked) {
+			setFile(await browserFile(picked));
+		}
+	}
+
+	window.addEventListener('dragover', (event) => event.preventDefault());
+	window.addEventListener('drop', (event) => {
+		event.preventDefault();
+		open(event.dataTransfer?.files);
+	});
+
+	return (
+		<Show
+			when={file()}
+			fallback={
+				// Only reachable in the browser: QuickLook always injects a file.
+				<label class="drop">
+					Drop a file here, or click to pick one
+					<input type="file" hidden={true} onChange={(event) => open(event.currentTarget.files)} />
+				</label>
+			}
+		>
+			{(current) => <FileViewer file={current()} />}
+		</Show>
+	);
+}

package/templates/solid-start/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "es2023",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js",
+		"types": ["vite/client", "quicklook-kit/virtual"],
+		"strict": true,
+		"noEmit": true,
+		"allowImportingTsExtensions": true,
+		"skipLibCheck": true,
+		"isolatedModules": true,
+		"paths": { "~/*": ["./src/*"] }
+	}
+}

package/templates/solid-start/vite.config.ts

@@ -0,0 +1,13 @@
+import { solidStart } from '@solidjs/start/config';
+import { nitro } from 'nitro/vite';
+import { quicklook } from 'quicklook-kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		// Client-only, prerendered to a static index.html in .output/public.
+		solidStart({ ssr: false }),
+		nitro({ preset: 'static', prerender: { routes: ['/'] } }),
+		quicklook(),
+	],
+});

package/templates/sveltekit/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "quicklook-sveltekit",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "quicklook dev",
+		"build": "quicklook build",
+		"register": "quicklook build && quicklook register",
+		"unregister": "quicklook unregister",
+		"check": "svelte-kit sync && svelte-check",
+		"lint": "biome check",
+		"format": "biome check --write"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.5.14",
+		"@sveltejs/adapter-static": "3.0.10",
+		"@sveltejs/kit": "2.70.3",
+		"@sveltejs/vite-plugin-svelte": "7.3.1",
+		"quicklook-kit": "^0.3.0",
+		"svelte": "5.57.1",
+		"svelte-check": "4.7.6",
+		"typescript": "6.0.3",
+		"vite": "8.3.0"
+	}
+}

package/templates/sveltekit/quicklook.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'quicklook-kit';
+
+export default defineConfig({
+	name: 'QuickLook Example',
+	bundleId: 'com.example.QuickLookExample',
+	types: [
+		{
+			id: 'com.example.QuickLookExample.example',
+			description: 'Example File',
+			extensions: ['example'],
+			conformsTo: ['public.plain-text'],
+		},
+	],
+	framework: 'sveltekit',
+});

package/templates/sveltekit/src/app.d.ts

@@ -0,0 +1 @@
+/// <reference types="quicklook-kit/virtual" />

package/templates/sveltekit/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/templates/sveltekit/src/lib/FileViewer.svelte

@@ -0,0 +1,28 @@
+<!--
+	Your preview goes here. `file.bytes` holds the raw file; decode it however
+	the format needs. This example shows it as UTF-8 text.
+-->
+<script lang="ts">
+	import type { QuickLookFile } from 'virtual:quicklook';
+
+	let { file }: { file: QuickLookFile } = $props();
+
+	const text = $derived(new TextDecoder().decode(file.bytes));
+</script>
+
+<pre>{text}</pre>
+
+<style>
+	:global(body) {
+		margin: 0;
+	}
+
+	pre {
+		margin: 0;
+		padding: 1rem;
+		font:
+			12px ui-monospace,
+			monospace;
+		white-space: pre-wrap;
+	}
+</style>

package/templates/sveltekit/src/routes/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { browserFile, nativeFile, type QuickLookFile } from 'virtual:quicklook';
+	import FileViewer from '$lib/FileViewer.svelte';
+
+	let file = $state<QuickLookFile | undefined>(nativeFile());
+
+	async function open(files: FileList | null | undefined) {
+		const picked = files?.[0];
+		if (picked) {
+			file = await browserFile(picked);
+		}
+	}
+</script>
+
+<!-- Only reachable in the browser: QuickLook always injects a file. -->
+<svelte:window
+	ondragover={(e) => e.preventDefault()}
+	ondrop={(e) => {
+		e.preventDefault();
+		open(e.dataTransfer?.files);
+	}}
+/>
+
+{#if file}
+	<FileViewer {file} />
+{:else}
+	<label class="drop">
+		Drop a file here, or click to pick one
+		<input type="file" hidden onchange={(e) => open(e.currentTarget.files)} />
+	</label>
+{/if}
+
+<style>
+	.drop {
+		display: grid;
+		place-items: center;
+		height: 100vh;
+		font: 14px system-ui;
+		color: GrayText;
+		cursor: pointer;
+	}
+</style>

package/templates/sveltekit/svelte.config.js

@@ -0,0 +1,11 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+export default {
+	kit: {
+		// A static build; the extension serves it and sets the CSP from quicklook.config.ts.
+		adapter: adapter(),
+		// Builds a client-only app shell, which is all the preview needs.
+		router: { type: 'hash' },
+	},
+};

package/templates/sveltekit/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"strict": true,
+		"allowImportingTsExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"skipLibCheck": true,
+		"moduleResolution": "bundler"
+	}
+}

package/templates/sveltekit/vite.config.ts

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { quicklook } from 'quicklook-kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit(), quicklook()],
+});

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.