supaslidev 0.3.1 → 0.3.2

package/app/app.config.ts

@@ -1,9 +1,9 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: 'blue',
+      primary: 'teal',
       secondary: 'violet',
-      neutral: 'slate',
+      neutral: 'stone',
     },
   },
 });

package/app/assets/css/main.css

@@ -6,17 +6,40 @@
 }
 
 :root {
+  --ui-primary: var(--color-teal-700);
+  --ui-success: var(--color-green-700);
   --supaslidev-border: #d1d5db;
   --supaslidev-header-bg: rgba(0, 0, 0, 0.02);
   --supaslidev-text-muted: #6b7280;
 }
 
 .dark {
+  --ui-primary: var(--color-teal-500);
+  --ui-success: var(--color-green-500);
   --supaslidev-border: #4b5563;
   --supaslidev-header-bg: rgba(255, 255, 255, 0.03);
   --supaslidev-text-muted: #9ca3af;
 }
 
+a,
+button,
+[role='button'],
+select,
+summary {
+  cursor: pointer;
+}
+
+.settings-icon {
+  transition:
+    transform 0.3s ease,
+    color 0.3s ease;
+}
+
+.settings-btn:hover .settings-icon {
+  transform: rotate(45deg);
+  color: var(--ui-primary);
+}
+
 *,
 *::before,
 *::after {

package/app/components/AppHeader.vue

@@ -16,13 +16,7 @@ const emit = defineEmits<{
   'execute-command': [command: string];
 }>();
 
-const colorMode = useColorMode();
-const isDark = computed({
-  get: () => colorMode.value === 'dark',
-  set: (value: boolean) => {
-    colorMode.preference = value ? 'dark' : 'light';
-  },
-});
+const router = useRouter();
 
 const isMac = computed(() => {
   if (typeof navigator === 'undefined') return true;
@@ -152,13 +146,15 @@ defineExpose({ focusInput, inputRef });
           </div>
 
           <UButton
-            :icon="isDark ? 'i-lucide-sun' : 'i-lucide-moon'"
+            icon="i-lucide-settings"
             color="neutral"
             variant="ghost"
             size="md"
-            class="theme-toggle"
-            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-            @click="isDark = !isDark"
+            class="settings-btn"
+            aria-label="Open settings"
+            title="Settings"
+            :ui="{ leadingIcon: 'settings-icon' }"
+            @click="router.push('/settings')"
           />
         </div>
       </div>
@@ -375,14 +371,6 @@ defineExpose({ focusInput, inputRef });
   opacity: 0.85;
 }
 
-.theme-toggle {
-  transition: all 0.2s ease;
-}
-
-.theme-toggle:hover {
-  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
-}
-
 .dropdown {
   border-top: 1px solid var(--supaslidev-border);
   max-height: 240px;

package/app/components/PresentationCard.vue

@@ -215,7 +215,7 @@ function handleCardClick() {
           <template v-if="!loading.dev" #leading>
             <span class="terminal-prompt-symbol">$</span>
           </template>
-          {{ running ? 'stop' : 'dev' }}
+          {{ running ? 'stop' : 'present' }}
         </UButton>
 
         <UButton

package/app/components/SettingsColorPicker.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  colors: readonly { name: string; value: string }[];
+  modelValue: string | undefined;
+  name: string;
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+</script>
+
+<template>
+  <fieldset
+    class="flex items-center gap-4 rounded-xl w-fit p-2 -m-2 has-[input:focus-visible]:outline-[0.375rem] has-[input:focus-visible]:outline-double has-[input:focus-visible]:outline-primary has-[input:focus-visible]:shadow-[0_0_0_0.25rem_white]"
+  >
+    <legend class="sr-only">{{ label }}</legend>
+    <label
+      v-for="color in colors"
+      :key="color.name"
+      class="size-6 rounded-full cursor-pointer transition-transform duration-150 hover:scale-110 has-checked:outline-2 has-checked:outline-black dark:has-checked:outline-white has-checked:outline-offset-2"
+      :style="{ backgroundColor: color.value }"
+      :title="color.name"
+    >
+      <input
+        type="radio"
+        :name="name"
+        class="sr-only"
+        :checked="modelValue === color.name"
+        :aria-label="color.name"
+        :value="color.name"
+        @change="emit('update:modelValue', color.name)"
+      />
+    </label>
+  </fieldset>
+</template>

package/app/composables/useSettings.ts

@@ -0,0 +1,78 @@
+const ACCENT_COLORS = ['blue', 'green', 'red', 'orange', 'teal', 'indigo', 'violet'] as const;
+const NEUTRAL_COLORS = ['slate', 'gray', 'zinc', 'neutral', 'stone'] as const;
+
+type AccentColor = (typeof ACCENT_COLORS)[number];
+type NeutralColor = (typeof NEUTRAL_COLORS)[number];
+
+interface AppSettings {
+  accentColor: AccentColor;
+  neutralColor: NeutralColor;
+}
+
+const STORAGE_KEY = 'supaslidev-settings';
+
+const DEFAULT_SETTINGS: AppSettings = {
+  accentColor: 'teal',
+  neutralColor: 'stone',
+};
+
+function loadSettings(): AppSettings {
+  if (import.meta.server) return { ...DEFAULT_SETTINGS };
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as Partial<AppSettings>;
+      return {
+        accentColor:
+          parsed.accentColor && ACCENT_COLORS.includes(parsed.accentColor as AccentColor)
+            ? (parsed.accentColor as AccentColor)
+            : DEFAULT_SETTINGS.accentColor,
+        neutralColor:
+          parsed.neutralColor && NEUTRAL_COLORS.includes(parsed.neutralColor as NeutralColor)
+            ? (parsed.neutralColor as NeutralColor)
+            : DEFAULT_SETTINGS.neutralColor,
+      };
+    }
+  } catch {
+    // Ignore localStorage errors
+  }
+  return { ...DEFAULT_SETTINGS };
+}
+
+const _settings = ref<AppSettings>(loadSettings());
+let watcherInitialized = false;
+
+function useSettings() {
+  if (!watcherInitialized) {
+    watcherInitialized = true;
+    watch(
+      _settings,
+      (value) => {
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+        } catch (error) {
+          console.error(`Failed to persist settings to "${STORAGE_KEY}":`, error, value);
+        }
+        updateAppConfig({
+          ui: { colors: { primary: value.accentColor, neutral: value.neutralColor } },
+        });
+      },
+      { deep: true },
+    );
+  }
+
+  // Apply on first use
+  updateAppConfig({
+    ui: {
+      colors: {
+        primary: _settings.value.accentColor,
+        neutral: _settings.value.neutralColor,
+      },
+    },
+  });
+
+  return { settings: _settings };
+}
+
+export { ACCENT_COLORS, DEFAULT_SETTINGS, NEUTRAL_COLORS, useSettings };
+export type { AccentColor, NeutralColor, AppSettings };

package/app/layouts/default.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useSettings } from '../composables/useSettings';
+
+useSettings();
+</script>
+
 <template>
   <UApp>
     <div class="min-h-screen bg-default flex flex-col">

package/app/pages/index.vue

@@ -13,7 +13,6 @@ const {
 } = useServers();
 const { deployMode, showDeployDemoToast } = useDeployMode();
 const toast = useToast();
-const colorMode = useColorMode();
 const deployBasePath = computed(() => (import.meta.env.BASE_URL || '/').replace(/\/$/, ''));
 
 function handleExportError(message: string) {
@@ -203,9 +202,11 @@ function handleImportCommand() {
   isImportDialogOpen.value = true;
 }
 
-function handleToggleThemeCommand() {
+const router = useRouter();
+
+function handleSettingsCommand() {
   isCommandPaletteOpen.value = false;
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+  router.push('/settings');
 }
 
 function handleToggleViewModeCommand() {
@@ -330,10 +331,10 @@ const commandPaletteGroups = computed<CommandPaletteGroup[]>(() => {
       onSelect: handleImportCommand,
     },
     {
-      label: 'Toggle theme',
-      suffix: colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode',
-      icon: colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon',
-      onSelect: handleToggleThemeCommand,
+      label: 'Settings',
+      suffix: 'Customize appearance',
+      icon: 'i-lucide-settings',
+      onSelect: handleSettingsCommand,
     },
     {
       label: 'Toggle view',
@@ -401,9 +402,9 @@ const commandOptions = computed(() => {
       onSelect: handleImportCommand,
     },
     {
-      label: 'Toggle theme',
-      description: colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode',
-      onSelect: handleToggleThemeCommand,
+      label: 'Settings',
+      description: 'Customize appearance',
+      onSelect: handleSettingsCommand,
     },
     {
       label: 'Toggle view',

package/app/pages/settings.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { AccentColor, NeutralColor } from '../composables/useSettings';
+import {
+  ACCENT_COLORS,
+  DEFAULT_SETTINGS,
+  NEUTRAL_COLORS,
+  useSettings,
+} from '../composables/useSettings';
+
+const router = useRouter();
+const colorMode = useColorMode();
+const { settings } = useSettings();
+
+const ACCENT_HEX: Record<string, string> = {
+  blue: '#3b82f6',
+  green: '#22c55e',
+  red: '#ef4444',
+  orange: '#f97316',
+  teal: '#14b8a6',
+  indigo: '#6366f1',
+  violet: '#8b5cf6',
+};
+
+const NEUTRAL_HEX: Record<string, string> = {
+  slate: '#64748b',
+  gray: '#6b7280',
+  zinc: '#71717a',
+  neutral: '#737373',
+  stone: '#78716c',
+};
+
+const accentColorSwatches = ACCENT_COLORS.map((name: string) => ({
+  name,
+  value: ACCENT_HEX[name] ?? '#000000',
+}));
+
+const neutralColorSwatches = NEUTRAL_COLORS.map((name: string) => ({
+  name,
+  value: NEUTRAL_HEX[name] ?? '#000000',
+}));
+
+const themeOptions = [
+  { label: 'System', value: 'system' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+];
+</script>
+
+<template>
+  <div>
+    <header class="mb-10">
+      <div class="flex items-center justify-between gap-4 mb-4">
+        <h1 class="text-2xl sm:text-3xl font-semibold font-mono">$ settings</h1>
+        <UButton
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-arrow-left"
+          class="cursor-pointer"
+          @click="router.push('/')"
+        >
+          Back
+        </UButton>
+      </div>
+      <p class="text-sm font-mono" style="color: var(--supaslidev-text-muted)">
+        Customize the dashboard appearance.
+      </p>
+    </header>
+
+    <div class="max-w-2xl space-y-8">
+      <section>
+        <h2
+          class="text-xs uppercase tracking-wider mb-4 font-mono"
+          style="color: var(--supaslidev-text-muted)"
+        >
+          Appearance
+        </h2>
+        <div class="settings-card space-y-6">
+          <div class="space-y-2">
+            <label for="theme-select" class="block text-sm font-medium font-mono"> Theme </label>
+            <USelect
+              id="theme-select"
+              v-model="colorMode.preference"
+              :items="themeOptions"
+              value-key="value"
+              class="max-w-48 cursor-pointer"
+            />
+          </div>
+
+          <div class="space-y-3">
+            <span class="block text-sm font-medium font-mono"> Accent color </span>
+            <SettingsColorPicker
+              :colors="accentColorSwatches"
+              :model-value="settings.accentColor"
+              label="Accent color"
+              name="accent-color"
+              @update:model-value="
+                settings.accentColor = ($event ?? DEFAULT_SETTINGS.accentColor) as AccentColor
+              "
+            />
+          </div>
+
+          <div class="space-y-3">
+            <span class="block text-sm font-medium font-mono"> Background shade </span>
+            <SettingsColorPicker
+              :colors="neutralColorSwatches"
+              :model-value="settings.neutralColor"
+              label="Background shade"
+              name="background-shade"
+              @update:model-value="
+                settings.neutralColor = ($event ?? DEFAULT_SETTINGS.neutralColor) as NeutralColor
+              "
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.settings-card {
+  background: var(--ui-bg-elevated);
+  border: 1px solid var(--supaslidev-border);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+}
+</style>

package/dist/cli/index.js

@@ -9028,7 +9028,7 @@ var require_dist$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 	exports.visitAsync = visit.visitAsync;
 }));
 //#endregion
-//#region ../../node_modules/.pnpm/tsdown@0.21.6_typescript@6.0.2_vue-tsc@3.2.6_typescript@6.0.2_/node_modules/tsdown/esm-shims.js
+//#region ../../node_modules/.pnpm/tsdown@0.21.6_oxc-resolver@11.19.1_typescript@6.0.2_vue-tsc@3.2.6_typescript@6.0.2_/node_modules/tsdown/esm-shims.js
 var getFilename, getDirname, __dirname, __filename;
 var init_esm_shims = __esmMin((() => {
 	getFilename = () => fileURLToPath(import.meta.url);
@@ -186210,7 +186210,7 @@ var require_ts_morph = /* @__PURE__ */ __commonJSMin(((exports) => {
 var import_picocolors = /* @__PURE__ */ __toESM(require_picocolors(), 1);
 require_dist$2();
 require_ts_morph();
-const CLI_VERSION = "0.3.1";
+const CLI_VERSION = "0.3.2";
 const PACKAGE_NAME = "@supaslidev/cli";
 const CACHE_DIR = join(tmpdir(), "supaslidev-cli");
 const CACHE_FILE = join(CACHE_DIR, "version-cache.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supaslidev",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "CLI toolkit for managing Supaslidev presentations",
   "keywords": [
     "slidev",
@@ -64,7 +64,7 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "vue-tsc": "^3.0.0",
-    "create-supaslidev": "^0.3.1"
+    "create-supaslidev": "^0.3.2"
   },
   "scripts": {
     "dev": "nuxt dev",

package/src/cli/commands/dev.ts

@@ -4,7 +4,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { findProjectRoot } from '../utils.js';
 
-export function findSupaslidevPackageRoot(): string {
+function findSupaslidevPackageRoot(): string {
   let dir = dirname(fileURLToPath(import.meta.url));
 
   while (dir !== dirname(dir)) {