@picloom/create-theme 0.0.0-stage → 0.1.1

package/LICENSE

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

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# @picloom/create-theme
 
-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.
+Create a standalone Vue 3 Picloom theme with Bun 1.4.3+, simulated preview,
+component/style HMR and ZIP packaging. No application checkout, Node/npm CLI or
+system `zip` is required.
+
+Create a project:
+
+```sh
+bun create @picloom/theme@0.1.1 ./my-theme
+cd my-theme
+bun install
+bun run dev
+bun run build
+bun run preview
+```
+
+The target must not exist; its parent must exist. The creator copies files only;
+it does not install dependencies, initialize Git or publish. Both home and login
+pages start from the template maintained in this package.
+`--help` prints usage.
+
+To test local packages, use the `.tgz` workflow in
+[theme tooling](https://llleixx.github.io/picloom/development/theme-tooling.html).
+Maintainers run `bun run build:create-theme` before `bun pm pack --ignore-scripts`.
+The build copies `template/` into `dist/template/` without reading the host repository. Preview and ZIP builds are provided
+by `@picloom/theme-tools`; generated projects do not contain a copy of the preview host.
+Do not edit `dist/template/`. Use exact npm version 0.1.1.
+
+## 中文
+
+基于工具链仓库独立维护的模板创建 Vue 3 主题。提供模拟预览、热更新、生产产物预览与 ZIP 打包。
+创建工具只复制文件，不覆盖已有目录、不安装依赖、不初始化 Git、不发布。
+模拟预览不连接真实服务；上传、登录与权限必须在隔离测试实例安装后验证。
+通过 npm 创建项目，也可按文档使用本地 `.tgz` 验证开发版本。编辑 `template/` 维护模板，构建时复制到 `dist/template/`，不依赖主仓库默认主题源码。
+
+协议类型来自 `@picloom/theme-sdk`，预览与构建调用 `@picloom/theme-tools`；生成项目不复制通用工具代码。

package/dist/template/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 lllei
+
+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/dist/template/README.md

@@ -0,0 +1,60 @@
+# Picloom theme / 主题开发
+
+Requires Bun 1.4.3+. This project starts from Picloom's built-in default theme,
+uses only the public Theme SDK, and bundles its own Vue runtime.
+
+```sh
+bun install
+bun run dev
+bun run typecheck
+bun run build
+bun run preview
+```
+
+`dev` listens on http://127.0.0.1:5173; use `bun run dev --port 5174` if occupied.
+The collapsible preview panel switches pages, languages, appearance, identity and
+simulated states. Uploads and login are **simulations**, never real API calls.
+Do not use preview success as evidence that a storage service or authentication works.
+
+Edit `src/Page.vue`, `src/style.css` and `theme.json`. All pages use `src/entry.ts`
+(`entry.js` in the package). Put static package resources in `public/assets/` and
+resolve them with `context.asset("assets/...")`. Imported image/CSS resources are
+also processed by Vite. Keep `style.css` in the manifest's global `styles`: it
+contains all CSS imported by the source entry. Additional page-only styles belong
+in `public/assets/` and the corresponding page's `styles`; preview loads and
+unloads them when changing pages. Arbitrary files outside these inputs are not packaged.
+
+Vue components and CSS support HMR. Entry changes reload the preview. Manifest
+and `dev/config.json` changes reload and remount the theme. Invalid JSON shows a
+development error and is never overwritten. The first preview initializes a
+missing config from schema defaults; later edits never restore removed values.
+There is initially no custom config schema, so the generated config is `{}`.
+
+`preview` loads the existing `dist/package/` JavaScript and styles through the
+same simulated host, without theme source HMR. Build first; source edits are not
+visible until you rebuild. The preview toolbar itself is still a local tool.
+
+The distributable is `dist/<theme-id>-<version>.zip`. Upload it to Picloom's Themes
+page, confirm trust, preview and apply. Test real uploads, login and permissions
+there. Increase `theme.json.version` before distributing changed content; package
+versions are immutable on the host. The package builder checks structure and
+resources; full configuration/manifest validation still runs on installation.
+
+SDK and tool dependencies use exact versions after publication. During local validation, install the matching local tarballs; the current development versions are not yet published.
+Commit your generated `bun.lock` to your own repository after installation.
+
+## 中文
+
+- 使用 Bun 1.4.3+，无需 Node/npm CLI、主仓库或系统 `zip`。
+- `bun run dev` 提供模拟首页、登录页、上传状态、语言和明暗模式；只用于界面开发。
+- 修改 Vue 组件及样式会热更新；入口、清单和本地配置修改后刷新预览。
+- 首次启动时按 Schema 默认值创建 `dev/config.json`，之后清空或删除值不会自动补回。
+- `bun run typecheck` 单独检查类型；`bun run build` 构建并生成可安装 ZIP；`bun run preview` 检查已有构建产物。
+- 修改主题 ID、显示名称和版本均以 `theme.json` 为准，静态资源放入 `public/assets/`。
+- 入口导入的样式合并为 `style.css`，须保留清单全局样式声明；页面专属样式通过各页面的 `styles` 引用，切页时分别加载和卸载。
+- 主题包不包含开发面板、本地配置、凭据或源码映射。所有主题配置可能公开，不要保存密钥。
+- 在隔离 Picloom 测试实例安装 ZIP 后验证真实上传和登录；模拟成功不代表真实服务已验证。
+- SDK 和开发工具在发布后使用 npm 精确版本；当前未发布版本使用本地包验证，安装时同步更新锁文件。
+
+Local preview and ZIP builds are provided by `@picloom/theme-tools` using this theme’s Vite configuration.
+本地预览和 ZIP 构建由 `@picloom/theme-tools` 统一提供，使用本主题的 Vite 配置，不复制预览宿主源码。

package/dist/template/gitignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+.env
+.env.*
+
+# Local preview configuration
+**/dev/config.json

package/dist/template/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-theme",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "bun": ">=1.4.3"
+  },
+  "scripts": {
+    "dev": "bun --bun picloom-theme dev",
+    "typecheck": "bun --bun vue-tsc --noEmit",
+    "build": "bun --bun picloom-theme build",
+    "preview": "bun --bun picloom-theme preview"
+  },
+  "devDependencies": {
+    "@picloom/theme-sdk": "0.1.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@types/bun": "1.3.10",
+    "@vitejs/plugin-vue": "6.0.10",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.4",
+    "vue": "3.5.44",
+    "vue-tsc": "3.3.13",
+    "@picloom/theme-tools": "0.1.0"
+  }
+}

package/dist/template/public/README.txt

@@ -0,0 +1,3 @@
+Put explicit theme assets under assets/ (for example assets/background.webp).
+Only assets/ is packaged; this README is not included in the ZIP.
+主题静态文件请放入 assets/，例如 assets/background.webp。此说明不进入 ZIP。

package/dist/template/src/Page.vue

@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { ref, onUnmounted, computed } from "vue";
+import type { ThemeContext } from "@picloom/theme-sdk";
+const props = defineProps<{ context: ThemeContext }>();
+const ctx = props.context,
+  s = ref(ctx.getSnapshot());
+const stop = ctx.subscribe((value) => {
+  s.value = value;
+});
+onUnmounted(stop);
+const t = (key: string, params?: Record<string, string | number>) =>
+  ctx.t(key, params);
+function size(value: number) {
+  const unit = value < 1024 ? 1 : value < 1024 ** 2 ? 1024 : 1024 ** 2;
+  const digits = unit === 1 ? 0 : 1;
+  return (
+    new Intl.NumberFormat(s.value.locale, {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+    }).format(value / unit) +
+    (unit === 1 ? " B" : unit === 1024 ? " KB" : " MB")
+  );
+}
+const input = ref<HTMLInputElement>(),
+  username = ref(""),
+  password = ref(""),
+  dragging = ref(false);
+const profile = computed(() =>
+  s.value.profiles.find(
+    (p) => p.id === s.value.selectedProfileId && p.available,
+  ),
+);
+function files(list: FileList | null) {
+  if (list) ctx.uploads.add(Array.from(list));
+}
+function paste(e: ClipboardEvent) {
+  if (
+    s.value.page !== "home" ||
+    (e.target as HTMLElement)?.closest("input,textarea,[contenteditable]")
+  )
+    return;
+  if (e.clipboardData?.files.length) {
+    e.preventDefault();
+    files(e.clipboardData.files);
+    return;
+  }
+  const urls = e.clipboardData?.getData("text/plain").trim().split(/\s+/);
+  if (
+    urls?.length &&
+    urls.every((u) => {
+      try {
+        return ["http:", "https:"].includes(new URL(u).protocol);
+      } catch {
+        return false;
+      }
+    })
+  ) {
+    e.preventDefault();
+    ctx.uploads.addUrls(urls);
+  }
+}
+window.addEventListener("paste", paste);
+onUnmounted(() => window.removeEventListener("paste", paste));
+async function login() {
+  const value = password.value;
+  password.value = "";
+  await ctx.login(username.value, value);
+}
+</script>
+<template>
+  <div
+    class="min-h-screen bg-background text-foreground"
+    :class="{ dark: s.dark }"
+  >
+    <header
+      class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-5 py-6"
+    >
+      <a
+        href="/"
+        class="flex items-center gap-2 text-lg font-semibold"
+        @click.prevent="ctx.navigate('home')"
+        ><img
+          v-if="s.site.logoUrl"
+          :src="s.site.logoUrl"
+          alt=""
+          class="size-8"
+        />{{ s.site.name }}</a
+      >
+      <div class="flex items-center gap-4">
+        <select
+          v-if="s.locales.length > 1"
+          :value="s.locale"
+          :aria-label="t('themes.language')"
+          @change="ctx.setLocale(($event.target as HTMLSelectElement).value)"
+          class="native-select"
+        >
+          <option
+            v-for="language in s.languages"
+            :key="language.tag"
+            :value="language.tag"
+          >
+            {{ language.name }}
+          </option>
+        </select>
+        <select
+          :value="s.mode"
+          :aria-label="t('themes.mode')"
+          @change="
+            ctx.setMode(
+              ($event.target as HTMLSelectElement).value as
+                | 'light'
+                | 'dark'
+                | 'auto',
+            )
+          "
+          class="native-select"
+        >
+          <option value="auto">{{ t("themes.auto") }}</option>
+          <option value="light">{{ t("ui.lightMode") }}</option>
+          <option value="dark">{{ t("ui.darkMode") }}</option>
+        </select>
+        <a
+          v-if="s.page === 'home'"
+          :href="s.user ? '/app/images' : '/login?return=/app/images'"
+          @click.prevent="ctx.navigate(s.user ? 'app' : 'login')"
+          >{{ s.user ? t("ui.app") : t("ui.signIn") }}
+          <span aria-hidden="true">→</span></a
+        >
+      </div>
+    </header>
+    <main
+      v-if="s.page === 'home'"
+      class="mx-auto max-w-3xl px-5 py-12 sm:py-20"
+    >
+      <div
+        v-if="s.site.homeTitle || s.site.description"
+        class="mb-10 text-center"
+      >
+        <h1
+          v-if="s.site.homeTitle"
+          class="text-3xl font-semibold tracking-tight sm:text-4xl"
+        >
+          {{ s.site.homeTitle }}
+        </h1>
+        <p v-if="s.site.description" class="mt-4 text-muted-foreground">
+          {{ s.site.description }}
+        </p>
+      </div>
+      <p v-if="s.loading" class="subtle">{{ t("ui.loading") }}</p>
+      <p v-if="s.error" class="error-box">
+        {{ s.error }}
+        <button @click="ctx.refresh()">{{ t("ui.retry") }}</button>
+      </p>
+      <div class="space-y-6">
+        <div
+          class="cursor-pointer rounded-2xl border-2 border-dashed px-6 py-16 text-center"
+          :class="dragging ? 'border-primary bg-primary/5' : 'border-border'"
+          role="button"
+          tabindex="0"
+          :aria-label="t('ui.dropImagesHere')"
+          :aria-disabled="!profile"
+          @click="profile && input?.click()"
+          @keydown.enter.self.prevent="profile && input?.click()"
+          @keydown.space.self.prevent="profile && input?.click()"
+          @dragover.prevent="dragging = true"
+          @dragleave.prevent="dragging = false"
+          @drop.prevent="
+            dragging = false;
+            files($event.dataTransfer?.files ?? null);
+          "
+        >
+          <p class="mb-2 font-medium">{{ t("ui.dropImagesHere") }}</p>
+          <p class="mb-5 text-sm text-muted-foreground">
+            {{ t("ui.orPasteFromYourClipboard") }}
+          </p>
+          <button
+            class="rounded-lg bg-primary px-5 py-2 text-primary-foreground disabled:opacity-50"
+            :disabled="!profile"
+            @click.stop="input?.click()"
+          >
+            {{ t("ui.chooseFiles") }}
+          </button>
+          <input
+            ref="input"
+            type="file"
+            data-testid="upload-input"
+            accept="image/*"
+            multiple
+            hidden
+            @click.stop
+            @change="
+              files(input?.files ?? null);
+              if (input) input.value = '';
+            "
+          />
+          <p v-if="profile" class="mt-4 text-xs text-muted-foreground">
+            {{ t("uploads.limit", { size: size(profile.maxUploadBytes) }) }} ·
+            {{ profile.allowedMimeTypes.join(" / ") }}
+          </p>
+        </div>
+        <label class="field"
+          >{{ t("ui.uploadProfile")
+          }}<select
+            class="native-select"
+            :aria-label="t('ui.uploadProfile')"
+            :value="s.selectedProfileId"
+            @change="
+              ctx.selectProfile(($event.target as HTMLSelectElement).value)
+            "
+          >
+            <option value="" disabled>{{ t("ui.selectAProfile") }}</option>
+            <option
+              v-for="p in s.profiles"
+              :key="p.id"
+              :value="p.id"
+              :disabled="!p.available"
+            >
+              {{ p.name }}{{ p.reason ? " · " + p.reason : "" }}
+            </option>
+          </select></label
+        >
+        <p v-if="!s.loading && !profile" class="error-box">
+          {{
+            s.profiles.some((p) => p.available)
+              ? t("profiles.required")
+              : !s.user
+                ? t("users.guestUnavailable")
+                : t("users.noProfiles")
+          }}
+        </p>
+        <div class="flex flex-wrap items-center gap-4 border-b pb-6">
+          <label class="field flex-1"
+            >{{ t("uploads.copyFormat")
+            }}<select
+              class="native-select"
+              :aria-label="t('uploads.copyFormat')"
+              :value="s.copy.format"
+              @change="
+                ctx.links.setPreferences(
+                  ($event.target as HTMLSelectElement).value,
+                  s.copy.auto,
+                )
+              "
+            >
+              <option v-for="f in s.copy.formats" :key="f">{{ f }}</option>
+            </select></label
+          >
+          <label
+            ><input
+              type="checkbox"
+              :checked="s.copy.auto"
+              @change="
+                ctx.links.setPreferences(
+                  s.copy.format,
+                  ($event.target as HTMLInputElement).checked,
+                )
+              "
+            />
+            {{ t("uploads.autoCopy") }}</label
+          >
+        </div>
+        <div v-if="s.uploads.length" class="space-y-3">
+          <h2>
+            {{ t("ui.uploadQueue") }} ·
+            {{ s.uploads.filter((u) => u.status === "success").length }} /
+            {{ s.uploads.length }}
+          </h2>
+          <button @click="ctx.links.copyAll()">
+            {{ t("uploads.copyAll") }}
+          </button>
+          <div
+            v-for="u in s.uploads"
+            :key="u.id"
+            class="rounded-lg border p-3"
+            data-testid="upload-row"
+          >
+            <p class="truncate">{{ u.name }}</p>
+            <p class="text-xs text-muted-foreground">
+              {{ u.sourceUrl ? t("uploads.fromUrl") : size(u.size) }} ·
+              {{ u.profileName }}
+            </p>
+            <p class="mt-2 text-xs" aria-live="polite">
+              {{
+                u.error ||
+                {
+                  queued: t("ui.queued"),
+                  uploading: t("uploads.progress", { progress: u.progress }),
+                  processing: t("ui.processingOnServer"),
+                  success: t("ui.uploaded"),
+                  cancelled: t("uploads.cancelled"),
+                  failed: "",
+                }[u.status]
+              }}
+            </p>
+            <progress
+              v-if="u.status === 'uploading'"
+              :value="u.progress"
+              max="100"
+              :aria-label="t('ui.uploadProgress')"
+              class="w-full"
+            />
+            <div class="mt-2 flex gap-3">
+              <button
+                v-if="u.status === 'failed' && u.resumable"
+                @click="ctx.uploads.resume(u.id)"
+              >
+                {{ t("uploads.continue") }}</button
+              ><button
+                v-if="['queued', 'uploading'].includes(u.status)"
+                @click="ctx.uploads.cancel(u.id)"
+              >
+                {{ t("ui.cancel") }}</button
+              ><button
+                v-if="['failed', 'cancelled'].includes(u.status)"
+                @click="ctx.uploads.dismiss(u.id)"
+              >
+                {{ t("uploads.dismiss") }}
+              </button>
+            </div>
+            <div
+              v-if="u.result"
+              role="group"
+              :aria-label="t('ui.copy')"
+              class="mt-3 flex flex-wrap gap-2"
+            >
+              <select
+                class="native-select"
+                :aria-label="t('uploads.copyFormat')"
+                :value="s.copy.format"
+                @change="
+                  ctx.links.setPreferences(
+                    ($event.target as HTMLSelectElement).value,
+                    s.copy.auto,
+                  )
+                "
+              >
+                <option v-for="format in s.copy.formats" :key="format">
+                  {{ format }}
+                </option></select
+              ><input
+                class="native-select min-w-0 flex-1"
+                readonly
+                :value="ctx.links.format(u.result.url)"
+                :aria-label="t('uploads.result')"
+              /><button @click="ctx.links.copy(u.result!.url)">
+                {{ t("ui.copy") }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <main v-else class="mx-auto max-w-sm px-5 py-12">
+      <p
+        v-if="s.site.description"
+        class="mb-5 text-center text-muted-foreground"
+      >
+        {{ s.site.description }}
+      </p>
+      <form class="panel space-y-6 p-7" @submit.prevent="login">
+        <h1 class="text-xl font-semibold">{{ t("ui.signIn") }}</h1>
+        <p v-if="s.login.expired" class="subtle">
+          {{ t("ui.sessionExpiredSignInAgain") }}
+        </p>
+        <p v-if="s.login.unavailable" class="error-box">
+          {{ t("ui.cannotReachTheServerTryAgain") }}
+        </p>
+        <label class="field"
+          >{{ t("ui.username")
+          }}<input
+            v-model="username"
+            class="native-select"
+            autocomplete="username"
+            required
+        /></label>
+        <label class="field"
+          >{{ t("ui.password")
+          }}<input
+            v-model="password"
+            class="native-select"
+            type="password"
+            autocomplete="current-password"
+            required
+        /></label>
+        <p v-if="s.login.error" role="alert" class="error-box">
+          {{ s.login.error }}
+        </p>
+        <button
+          class="w-full rounded-lg bg-primary px-5 py-2 text-primary-foreground"
+          type="submit"
+          :disabled="s.login.busy"
+        >
+          {{ s.login.busy ? t("ui.signingIn") : t("ui.signIn") }}
+        </button>
+      </form>
+    </main>
+    <div
+      v-if="s.notice"
+      role="status"
+      class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl border bg-card px-5 py-3"
+    >
+      {{ s.notice }}
+    </div>
+  </div>
+</template>

package/dist/template/src/entry.ts

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import Page from "./Page.vue";
+import type { ThemeContext } from "@picloom/theme-sdk";
+import "./style.css";
+export function mount(container: HTMLElement, context: ThemeContext) {
+  const app = createApp(Page, { context });
+  app.mount(container);
+  return {
+    dispose() {
+      app.unmount();
+    },
+  };
+}

package/dist/template/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent;
+  export default component;
+}

package/dist/template/src/style.css

@@ -0,0 +1,121 @@
+@import "tailwindcss" source(none);
+@source "./";
+@custom-variant dark (&:is(.dark *));
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--foreground);
+  --color-popover: var(--card);
+  --color-popover-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--muted);
+  --color-secondary-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--muted);
+  --color-accent-foreground: var(--foreground);
+  --color-destructive: #d44e55;
+  --color-destructive-foreground: #fff;
+  --color-border: var(--border);
+  --color-input: var(--border);
+  --color-ring: var(--primary);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+}
+:root {
+  --background: #fff;
+  --foreground: #213547;
+  --card: #f9f9f9;
+  --primary: #287f59;
+  --primary-foreground: #fff;
+  color-scheme: light;
+  accent-color: var(--primary);
+  --muted: #f1f1f1;
+  --muted-foreground: #666;
+  --border: #e5e5e5;
+  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
+}
+.dark {
+  color-scheme: dark;
+  accent-color: var(--primary);
+  --background: #1a1a1a;
+  --foreground: #ffffffde;
+  --card: #242424;
+  --primary: #42b883;
+  --primary-foreground: #13261e;
+  --muted: #2f2f2f;
+  --muted-foreground: #ebebeb99;
+  --border: #5454547a;
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    margin: 0;
+  }
+  button,
+  a,
+  input,
+  select {
+    -webkit-tap-highlight-color: transparent;
+  }
+  /* Native popup menus may not inherit the select's transparent background. */
+  select {
+    color-scheme: inherit;
+  }
+  select option,
+  select optgroup {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+  button:not(:disabled),
+  a {
+    cursor: pointer;
+  }
+  :focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 3px;
+  }
+}
+@layer components {
+  .panel {
+    @apply rounded-xl border bg-card dark:bg-transparent;
+  }
+  .field {
+    @apply grid gap-2 text-sm;
+  }
+  .native-select {
+    @apply h-9 min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
+  }
+  input[type="checkbox"] {
+    @apply size-4 shrink-0 accent-primary;
+  }
+  label.field:has(> :required),
+  .required-label {
+    position: relative;
+  }
+  label.field:has(> :required)::after,
+  .required-label::after {
+    content: "*";
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: var(--primary);
+  }
+  [aria-invalid="true"] {
+    border-color: var(--color-destructive);
+  }
+
+  .subtle {
+    @apply text-sm text-muted-foreground;
+  }
+  .error-box {
+    @apply rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive;
+  }
+}

package/dist/template/theme.json

@@ -0,0 +1,108 @@
+{
+  "id": "example.default",
+  "version": "0.1.0",
+  "apiVersion": 1,
+  "defaultLocale": "en-US",
+  "supportedLocales": [
+    "zh-CN",
+    "en-US"
+  ],
+  "nameKey": "package.name",
+  "messages": {
+    "en-US": {
+      "package.name": "Default theme",
+      "profiles.required": "No usable default upload profile. Please select a profile.",
+      "themes.auto": "System",
+      "themes.language": "Language",
+      "themes.mode": "Appearance",
+      "ui.app": "App",
+      "ui.cancel": "Cancel",
+      "ui.cannotReachTheServerTryAgain": "Cannot reach the server. Try again.",
+      "ui.chooseFiles": "Choose files",
+      "ui.copy": "Copy",
+      "ui.darkMode": "Dark mode",
+      "ui.dropImagesHere": "Drop images here",
+      "ui.lightMode": "Light mode",
+      "ui.loading": "Loading…",
+      "ui.orPasteFromYourClipboard": "or paste images or image URLs",
+      "ui.password": "Password",
+      "ui.processingOnServer": "Processing on server…",
+      "ui.queued": "Queued",
+      "ui.retry": "Retry",
+      "ui.selectAProfile": "Select a profile",
+      "ui.sessionExpiredSignInAgain": "Session expired. Sign in again.",
+      "ui.signIn": "Sign in",
+      "ui.signingIn": "Signing in…",
+      "ui.uploadProfile": "Upload profile",
+      "ui.uploadProgress": "Upload progress",
+      "ui.uploadQueue": "Upload queue",
+      "ui.uploaded": "Uploaded",
+      "ui.username": "Username",
+      "uploads.autoCopy": "Auto-copy after upload",
+      "uploads.cancelled": "Cancelled",
+      "uploads.continue": "Continue upload",
+      "uploads.copyAll": "Copy all",
+      "uploads.copyFormat": "Copy format",
+      "uploads.dismiss": "Dismiss",
+      "uploads.fromUrl": "From URL",
+      "uploads.limit": "Up to {size} per file",
+      "uploads.progress": "Uploading {progress}%",
+      "uploads.result": "Upload result",
+      "users.guestUnavailable": "Guest uploads are unavailable. Sign in to upload.",
+      "users.noProfiles": "No upload profiles available. Contact an administrator."
+    },
+    "zh-CN": {
+      "package.name": "默认主题",
+      "profiles.required": "没有可用的默认上传配置，请选择上传配置。",
+      "themes.auto": "跟随系统",
+      "themes.language": "语言",
+      "themes.mode": "显示模式",
+      "ui.app": "管理后台",
+      "ui.cancel": "取消",
+      "ui.cannotReachTheServerTryAgain": "无法连接服务器，请重试。",
+      "ui.chooseFiles": "选择文件",
+      "ui.copy": "复制",
+      "ui.darkMode": "深色模式",
+      "ui.dropImagesHere": "将图片拖到这里",
+      "ui.lightMode": "浅色模式",
+      "ui.loading": "正在加载…",
+      "ui.orPasteFromYourClipboard": "或粘贴图片、图片链接",
+      "ui.password": "密码",
+      "ui.processingOnServer": "服务器处理中…",
+      "ui.queued": "排队中",
+      "ui.retry": "重试",
+      "ui.selectAProfile": "选择上传配置",
+      "ui.sessionExpiredSignInAgain": "登录已过期，请重新登录。",
+      "ui.signIn": "登录",
+      "ui.signingIn": "正在登录…",
+      "ui.uploadProfile": "上传配置",
+      "ui.uploadProgress": "上传进度",
+      "ui.uploadQueue": "上传队列",
+      "ui.uploaded": "已上传",
+      "ui.username": "用户名",
+      "uploads.autoCopy": "上传后自动复制",
+      "uploads.cancelled": "已取消",
+      "uploads.continue": "继续上传",
+      "uploads.copyAll": "复制全部",
+      "uploads.copyFormat": "复制格式",
+      "uploads.dismiss": "关闭",
+      "uploads.fromUrl": "通过链接上传",
+      "uploads.limit": "单文件最大 {size}",
+      "uploads.progress": "正在上传 {progress}%",
+      "uploads.result": "上传结果",
+      "users.guestUnavailable": "访客上传不可用，请登录后上传。",
+      "users.noProfiles": "没有可用的上传配置，请联系管理员。"
+    }
+  },
+  "pages": {
+    "home": {
+      "entry": "entry.js"
+    },
+    "login": {
+      "entry": "entry.js"
+    }
+  },
+  "styles": [
+    "style.css"
+  ]
+}

package/dist/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [
+      "bun",
+      "vite/client"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ]
+}

package/dist/template/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "node:path";
+export default defineConfig(({ command }) => ({
+  plugins: [vue(), tailwindcss()],
+  publicDir: false,
+  define:
+    command === "build"
+      ? { "process.env.NODE_ENV": JSON.stringify("production") }
+      : {},
+  build: {
+    outDir: "dist/package",
+    emptyOutDir: true,
+    sourcemap: false,
+    lib: {
+      entry: resolve("src/entry.ts"),
+      formats: ["es"],
+      fileName: () => "entry.js",
+      cssFileName: "style",
+    },
+  },
+}));

package/index.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env bun
+import {
+  cp,
+  mkdir,
+  readFile,
+  readdir,
+  rename,
+  writeFile,
+} from "node:fs/promises";
+import { basename, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const args = process.argv.slice(2);
+if (args.length === 1 && ["--help", "-h"].includes(args[0])) {
+  console.log("Usage: bun create @picloom/theme <new-directory>");
+} else if (args.length !== 1 || args[0].startsWith("-")) {
+  console.error("Usage: bun create @picloom/theme <new-directory>");
+  process.exitCode = 1;
+} else {
+  try {
+    const target = resolve(args[0]);
+    // Refuse even empty existing directories: never merge into a user's project.
+    await mkdir(target);
+    const template = fileURLToPath(
+      new URL("./dist/template/", import.meta.url),
+    );
+    for (const entry of await readdir(template)) {
+      await cp(resolve(template, entry), resolve(target, entry), {
+        recursive: true,
+        force: false,
+        errorOnExist: true,
+      });
+    }
+    // Package managers may rename/omit .gitignore when packing, so ship it under a plain name.
+    await rename(resolve(target, "gitignore"), resolve(target, ".gitignore"));
+    const name =
+      basename(target)
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]/g, "-")
+        .replace(/^[^a-z]+/, "")
+        .slice(0, 80)
+        .replace(/\.+$/, "") || "my-theme";
+    const manifestPath = resolve(target, "theme.json");
+    const manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+    manifest.id = `example.${name}`;
+    await writeFile(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
+    const packagePath = resolve(target, "package.json");
+    const pkg = JSON.parse(await readFile(packagePath, "utf8"));
+    pkg.name = name;
+    await writeFile(packagePath, JSON.stringify(pkg, null, 2) + "\n");
+    const quotedDirectory = "'" + args[0].replaceAll("'", "'\\''") + "'";
+    console.log(
+      `Created ${target}\n\nNext:\n  cd ${quotedDirectory}\n  bun install\n  bun run typecheck\n  bun run dev\n  bun run build\n\nUpload dist/${manifest.id}-${manifest.version}.zip to Picloom.`,
+    );
+  } catch (error) {
+    console.error(
+      error.code === "EEXIST"
+        ? "Target already exists. Choose a new directory; no existing files were changed."
+        : `Could not create theme: ${error.message}`,
+    );
+    process.exitCode = 1;
+  }
+}

package/package.json

@@ -1,6 +1,31 @@
 {
   "name": "@picloom/create-theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Create a standalone Picloom Vue theme with local preview and ZIP packaging",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "create-theme": "./index.js"
+  },
+  "engines": {
+    "bun": ">=1.4.3"
+  },
+  "scripts": {
+    "build": "bun prepare.ts",
+    "prepack": "bun run build"
+  },
+  "files": [
+    "index.js",
+    "dist/template",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/llleixx/picloom-tooling.git",
+    "directory": "tools/create-theme"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}