mechanica 1.0.25 → 2.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 den59k
+
+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.md

@@ -0,0 +1,123 @@
+# mechanica
+
+Build Vue 3 websites with a visual block editor. Authors write Vue SFC **blocks**, a visual editor arranges them into pages, and the result renders server-side and ships statically or via a backend.
+
+Built for **Vite 8 / Vue 3.5 / Bun**.
+
+## Install
+
+Works with plain Node ≥ 20.19 (npm/pnpm/yarn) or [Bun](https://bun.sh) — Bun installs run the TypeScript source directly, Node uses the compiled build. The fastest start is the scaffolder:
+
+```bash
+npm create mechanica-app@latest my-site
+# or: bun create mechanica-app my-site
+```
+
+Or add it to an existing Vite + Vue project:
+
+```bash
+npm install mechanica
+```
+
+## Quick start
+
+**`vite.config.ts`**
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { mechanica } from 'mechanica/plugin'
+
+export default defineConfig({
+  plugins: [mechanica(), vue()],
+})
+```
+
+**`index.html`** — just a mount point; the plugin injects the entry and editor:
+```html
+<body><div id="app"></div></body>
+```
+
+**`src/main.ts`** — export an app definition (no `createApp`/`mount` yourself):
+```ts
+import { defineMechanicaApp } from 'mechanica'
+import App from './App.vue'
+
+export default defineMechanicaApp({ root: App })
+```
+
+**`src/App.vue`** — render the page content somewhere:
+```vue
+<template>
+  <Content />
+</template>
+<script setup lang="ts">
+import { Content } from 'mechanica'
+</script>
+```
+
+**`src/blocks/Hero.vue`** — a block. `defineBlock` is a global macro (no import):
+```vue
+<template>
+  <section>
+    <h1>{{ props.title }}</h1>
+    <p>{{ props.subtitle }}</p>
+  </section>
+</template>
+<script setup lang="ts">
+const props = defineBlock({
+  name: 'Hero',
+  category: 'Content',
+  props: {
+    title: { type: 'string', default: 'Hello' },
+    subtitle: 'text',
+  },
+})
+</script>
+```
+
+Run `vite` and open the page — the editor overlay lets you add Hero blocks and edit their props live.
+
+## Authoring API
+
+### `defineBlock(descriptor)` — the one macro
+No import; used inside a block's `<script setup>`. Fields use [compact-json-schema](https://www.npmjs.com/package/compact-json-schema). Built-in field types: `string`, `text`, `number`, `boolean`, `color`, `image`, `file`, `smartLink`, `multiselect`, `richText`, plus `array`/`object`. Object-form fields take editor metadata (`label`, `description`, `default`, `placeholder`).
+
+```ts
+defineBlock({
+  name, category, icon, description, order, hidden,
+  props: { /* schema */ },
+  slots: ['default'],   // auto-detected from <slot> if omitted
+})
+```
+
+### `defineData({ id, scope, props })` — shared data
+An **imported function** (not a macro), used in a standalone module; returns a hook:
+```ts
+// data/header.ts
+import { defineData } from 'mechanica'
+export const useHeader = defineData({ id: 'header', scope: 'site', props: { logo: 'image' } })
+// in a component: const header = useHeader()
+```
+
+### Components & composables
+`<Content>`, `<Link :to="..." />` (string path or `smartLink` object), `useRouter`, `useRoute`, `usePages`, `useFetch`, `usePageData`.
+
+### Custom field types
+```ts
+import { defineFieldType, registerFields } from 'mechanica/editor'
+registerFields([
+  defineFieldType({ name: 'video', schema: { type: 'object', properties: { src: 'string' } }, editor: VideoField }),
+])
+```
+
+## CLI
+
+```bash
+mechanica build     # client + SSR bundles → dist/
+mechanica export    # statically render every .mech page → export/
+mechanica shot <blockId | /page/path>   # headless screenshot of a block or page
+mechanica thumbs [--blocks]             # regenerate page / block thumbnails
+mechanica push --key <apiKey> --host <url>   # upload dist/ to a backend
+```
+
+Page content lives in `.mech/pages/**.page.md` — a human-readable, Markdown-centric format equally editable by the visual editor, by hand, and by AI tools (rich text persists as plain Markdown).

package/bin/mechanica.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+// Under Bun, run the TS source directly (monorepo dev, Bun-native installs —
+// always live, no build needed). Under Node, use the compiled CLI from dist/.
+const entry = process.versions.bun ? '../src/cli/cli.ts' : '../dist/cli.js'
+
+const { run } = await import(entry)
+
+run(process.argv.slice(2)).catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

package/dist/chunks/ImagePickerDialog-DZyxrbfv.js

@@ -0,0 +1,468 @@
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, shallowReactive, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region \0svg-glob:C:\Users\Den\Desktop\CURVES\mechanica\packages\mechanica\src\editor\icons
+var contents = {
+	"arrow-down": `<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>`,
+	"arrow-up": `<path d="M12 19V5"/><path d="m5 12 7-7 7 7"/>`,
+	"bold": `<path d="M6 4h7a4 4 0 0 1 0 8H6z"/><path d="M6 12h8a4 4 0 0 1 0 8H6z"/>`,
+	"book": `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`,
+	"check": `<polyline points="20 6 9 17 4 12"/>`,
+	"chevron-down": `<path d="m6 9 6 6 6-6"/>`,
+	"close": `<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`,
+	"code": `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`,
+	"copy": `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`,
+	"ellipsis": `<circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>`,
+	"folder": `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>`,
+	"grip": `<circle cx="9" cy="5" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="9" cy="19" r="1.6"/><circle cx="15" cy="5" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="15" cy="19" r="1.6"/>`,
+	"image": `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>`,
+	"info": `<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12.01" y2="8"/>`,
+	"italic": `<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>`,
+	"menu": `<path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/>`,
+	"named-slots": `<rect x="4" y="4" width="16" height="16" rx="2.5" stroke-dasharray="3.5 3"/><path d="M12 4.5v15"/>`,
+	"pencil": `<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/>`,
+	"plus": `<path d="M12 5v14"/><path d="M5 12h14"/>`,
+	"redo": `<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/>`,
+	"search": `<circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/>`,
+	"sliders": `<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>`,
+	"slot": `<rect x="4" y="4" width="16" height="16" rx="2.5" stroke-dasharray="3.5 3"/>`,
+	"strikethrough": `<path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" y1="12" x2="20" y2="12"/>`,
+	"table": `<rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
+<path d="M3 9.5H21M9.5 9.5V20M15.5 9.5V20" stroke="currentColor" stroke-width="2"/>`,
+	"trash": `<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/>`,
+	"underline": `<path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="21" x2="20" y2="21"/>`,
+	"undo": `<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>`,
+	"upload": `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>`
+};
+var attrs = {
+	"arrow-down": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"arrow-up": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"bold": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2.25",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"book": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"check": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2.5",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"chevron-down": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"close": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"code": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"copy": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"ellipsis": {
+		"viewBox": "0 0 24 24",
+		"fill": "currentColor"
+	},
+	"folder": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"grip": {
+		"viewBox": "0 0 24 24",
+		"fill": "currentColor",
+		"stroke": "none"
+	},
+	"image": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"info": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"italic": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"menu": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"named-slots": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"pencil": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"plus": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"redo": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"search": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"sliders": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"slot": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"strikethrough": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"table": {
+		"viewBox": "0 0 24 24",
+		"fill": "none"
+	},
+	"trash": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"underline": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"undo": {
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"upload": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}
+};
+//#endregion
+//#region src/editor/components/VIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["innerHTML"];
+//#endregion
+//#region src/editor/components/VIcon.vue
+var VIcon_default = /* @__PURE__ */ defineComponent({
+	__name: "VIcon",
+	props: { name: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", mergeProps({ class: "vicon" }, unref(attrs)[__props.name], {
+				"aria-hidden": "true",
+				innerHTML: unref(contents)[__props.name]
+			}), null, 16, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/editor/ui/dialog.ts
+var dialogKey = Symbol("mech-dialog");
+/** Create the reactive dialog store (provided once by the editor shell). */
+function createDialogStore() {
+	const stack = shallowReactive([]);
+	let nextId = 0;
+	return {
+		stack,
+		open(component, props) {
+			stack.push({
+				id: ++nextId,
+				component,
+				props
+			});
+		},
+		back() {
+			stack.pop();
+		},
+		close() {
+			stack.length = 0;
+		}
+	};
+}
+/** Access the dialog store from any component inside the editor. */
+function useDialog() {
+	const store = inject(dialogKey);
+	if (!store) throw new Error("[mechanica] useDialog used outside the editor");
+	return store;
+}
+//#endregion
+//#region src/editor/ui/VDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "mech-modal__header" };
+var _hoisted_2$1 = { class: "mech-modal__title" };
+var _hoisted_3$1 = { class: "mech-modal__body" };
+var _hoisted_4$1 = {
+	key: 0,
+	class: "mech-modal__actions"
+};
+//#endregion
+//#region src/editor/ui/VDialog.vue
+var VDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "VDialog",
+	props: {
+		title: {},
+		size: { default: "standard" }
+	},
+	setup(__props) {
+		const dialog = useDialog();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["mech-modal", `mech-modal--${__props.size}`]),
+				role: "dialog",
+				"aria-modal": "true",
+				"data-mech-ui": ""
+			}, [
+				createElementVNode("header", _hoisted_1$1, [createElementVNode("h2", _hoisted_2$1, [renderSlot(_ctx.$slots, "header", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)]), createElementVNode("button", {
+					type: "button",
+					class: "mech-modal__close",
+					"aria-label": "Close",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(dialog).back())
+				}, [createVNode(VIcon_default, { name: "close" })])]),
+				createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_ctx.$slots.actions ? (openBlock(), createElementBlock("footer", _hoisted_4$1, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+}), [["__scopeId", "data-v-04d89005"]]);
+//#endregion
+//#region src/editor/dialogs/ImagePickerDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "mech-image-picker" };
+var _hoisted_2 = { class: "mech-image-picker__upload-text" };
+var _hoisted_3 = {
+	key: 0,
+	class: "mech-image-picker__grid"
+};
+var _hoisted_4 = ["title", "onClick"];
+var _hoisted_5 = ["src", "alt"];
+var _hoisted_6 = {
+	key: 1,
+	class: "mech-image-picker__empty"
+};
+//#endregion
+//#region src/editor/dialogs/ImagePickerDialog.vue
+var ImagePickerDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "ImagePickerDialog",
+	props: { onSelect: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		const dialog = useDialog();
+		const uploader = inject("mechFileUploader", null);
+		const library = inject("mechImageLibrary", null);
+		const images = ref([]);
+		const loaded = ref(false);
+		const busy = ref(false);
+		const dragover = ref(false);
+		onMounted(load);
+		async function load() {
+			try {
+				if (library) images.value = await library();
+			} catch {} finally {
+				loaded.value = true;
+			}
+		}
+		function select(value) {
+			props.onSelect(value);
+			dialog.back();
+		}
+		async function upload(file) {
+			if (!uploader || busy.value) return;
+			busy.value = true;
+			try {
+				const result = await uploader(file);
+				select({
+					src: result.src,
+					previewSrc: result.previewSrc ?? result.src
+				});
+			} finally {
+				busy.value = false;
+			}
+		}
+		const onPick = (event) => {
+			const file = event.target.files?.[0];
+			if (file) upload(file);
+		};
+		const onDrop = (event) => {
+			dragover.value = false;
+			const file = event.dataTransfer?.files?.[0];
+			if (file) upload(file);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(VDialog_default, {
+				title: "Choose image",
+				size: "wide"
+			}, {
+				actions: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: "mech-button",
+					onClick: _cache[2] || (_cache[2] = ($event) => unref(dialog).back())
+				}, "Back")]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					createElementVNode("label", {
+						class: normalizeClass(["mech-image-picker__upload", { "is-dragover": dragover.value }]),
+						onDragover: _cache[0] || (_cache[0] = withModifiers(($event) => dragover.value = true, ["prevent"])),
+						onDragleave: _cache[1] || (_cache[1] = ($event) => dragover.value = false),
+						onDrop: withModifiers(onDrop, ["prevent"])
+					}, [
+						createElementVNode("input", {
+							class: "mech-image-picker__file",
+							type: "file",
+							accept: "image/*",
+							onChange: onPick
+						}, null, 32),
+						createVNode(VIcon_default, {
+							name: "upload",
+							class: "mech-image-picker__upload-glyph"
+						}),
+						createElementVNode("span", _hoisted_2, toDisplayString(busy.value ? "Uploading…" : "Drop an image here, or click to upload"), 1)
+					], 34),
+					_cache[3] || (_cache[3] = createElementVNode("div", { class: "mech-image-picker__lib-head" }, "Project images", -1)),
+					images.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(images.value, (img) => {
+						return openBlock(), createElementBlock("button", {
+							key: img.id,
+							type: "button",
+							class: "mech-image-picker__item",
+							title: img.name,
+							onClick: ($event) => select({ src: img.src })
+						}, [createElementVNode("img", {
+							src: img.src,
+							alt: img.name,
+							loading: "lazy"
+						}, null, 8, _hoisted_5)], 8, _hoisted_4);
+					}), 128))])) : (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(loaded.value ? "No images uploaded yet — upload one above." : "Loading…"), 1))
+				])]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-ce3974a0"]]);
+//#endregion
+export { useDialog as a, dialogKey as i, VDialog_default as n, _plugin_vue_export_helper_default as o, createDialogStore as r, VIcon_default as s, ImagePickerDialog_default as t };