@cavulsqa/create 2.9.2 → 2.10.0

package/templates/m3e-app/src/modules/home/composables/useHomeFeatures.ts

@@ -0,0 +1,128 @@
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import type { Component } from "vue";
+import BackIcon from "~icons/material-symbols/arrow-back-rounded";
+import BoltIcon from "~icons/material-symbols/bolt-rounded";
+import DatabaseIcon from "~icons/material-symbols/database-outline-rounded";
+import KeyboardIcon from "~icons/material-symbols/keyboard-outline-rounded";
+import MonitoringIcon from "~icons/material-symbols/monitoring-rounded";
+import PaletteIcon from "~icons/material-symbols/palette-outline-rounded";
+import ShapesIcon from "~icons/material-symbols/shapes-outline-rounded";
+import WidgetsIcon from "~icons/material-symbols/widgets-outline-rounded";
+import type { Tone } from "@/shared/utils/tone";
+
+/**
+ * Framework7's own page transitions, one per feature so each push looks different. They ship in
+ * Framework7's core stylesheet, and Framework7 replays the one a page opened with when it goes back.
+ */
+export type PageTransition =
+  | "f7-circle"
+  | "f7-cover"
+  | "f7-cover-v"
+  | "f7-dive"
+  | "f7-fade"
+  | "f7-flip"
+  | "f7-parallax"
+  | "f7-push";
+
+export interface HomeFeature {
+  id: string;
+  icon: Component;
+  shape: MaterialShapeName;
+  tone: Tone;
+  titleKey: string;
+  subtitleKey: string;
+  textKey: string;
+  transition: PageTransition;
+}
+
+/**
+ * The template's capabilities as data, so removing a layer means removing an entry and the screen
+ * never advertises something the generator left out. Each one opens inside the Home tab's own
+ * view, which is the nesting being demonstrated: the push stays in this tab's history.
+ */
+export const features: readonly HomeFeature[] = [
+  {
+    id: "expressive",
+    icon: ShapesIcon,
+    shape: "cookie9Sided",
+    tone: "primary",
+    titleKey: "features.expressive.title",
+    subtitleKey: "features.expressive.subtitle",
+    textKey: "features.expressive.text",
+    transition: "f7-cover",
+  },
+  {
+    id: "color",
+    icon: PaletteIcon,
+    shape: "clover4Leaf",
+    tone: "tertiary",
+    titleKey: "features.color.title",
+    subtitleKey: "features.color.subtitle",
+    textKey: "features.color.text",
+    transition: "f7-circle",
+  },
+  {
+    id: "shell",
+    icon: WidgetsIcon,
+    shape: "pentagon",
+    tone: "secondary",
+    titleKey: "features.shell.title",
+    subtitleKey: "features.shell.subtitle",
+    textKey: "features.shell.text",
+    transition: "f7-parallax",
+  },
+  {
+    id: "sqlite",
+    icon: DatabaseIcon,
+    shape: "cookie4Sided",
+    tone: "primary",
+    titleKey: "features.sqlite.title",
+    subtitleKey: "features.sqlite.subtitle",
+    textKey: "features.sqlite.text",
+    transition: "f7-push",
+  },
+  {
+    id: "reactive",
+    icon: BoltIcon,
+    shape: "sunny",
+    tone: "tertiary",
+    titleKey: "features.reactive.title",
+    subtitleKey: "features.reactive.subtitle",
+    textKey: "features.reactive.text",
+    transition: "f7-dive",
+  },
+  {
+    id: "back",
+    icon: BackIcon,
+    shape: "pill",
+    tone: "secondary",
+    titleKey: "features.back.title",
+    subtitleKey: "features.back.subtitle",
+    textKey: "features.back.text",
+    transition: "f7-flip",
+  },
+  {
+    id: "keyboard",
+    icon: KeyboardIcon,
+    shape: "gem",
+    tone: "primary",
+    titleKey: "features.keyboard.title",
+    subtitleKey: "features.keyboard.subtitle",
+    textKey: "features.keyboard.text",
+    transition: "f7-fade",
+  },
+  {
+    id: "metrics",
+    icon: MonitoringIcon,
+    shape: "flower",
+    tone: "tertiary",
+    titleKey: "features.metrics.title",
+    subtitleKey: "features.metrics.subtitle",
+    textKey: "features.metrics.text",
+    transition: "f7-cover-v",
+  },
+];
+
+export function findFeature(id: string): HomeFeature | undefined {
+  return features.find((feature) => feature.id === id);
+}

package/templates/m3e-app/src/modules/home/composables/useOpenFeature.ts

@@ -0,0 +1,22 @@
+import type { Router } from "framework7/types";
+import type { HomeFeature } from "@/modules/home/composables/useHomeFeatures";
+
+/** The transition's name without Framework7's prefix, as the rows and the detail page show it. */
+export function transitionName(feature: HomeFeature): string {
+  return feature.transition.replace(/^f7-/, "");
+}
+
+/**
+ * Opens a feature's page inside the Home tab with that feature's own transition. Under reduced
+ * motion it falls back to the app's default, which is a cross-fade there: a flip or a circle reveal
+ * is exactly the movement reduced motion asks to remove.
+ */
+export function useOpenFeature() {
+  const reduced = useReducedMotion();
+
+  return (router: Router.Router, feature: HomeFeature) =>
+    router.navigate(
+      `/home/feature/${feature.id}/`,
+      reduced.value ? {} : { transition: feature.transition },
+    );
+}

package/templates/m3e-app/src/modules/home/router/routes/home.routes.ts

@@ -0,0 +1,21 @@
+import type { Router } from "framework7/types";
+import { lazyRoute } from "@/shared/utils/lazyRoute";
+
+/**
+ * The detail route is a child of the tab's own view, which is what keeps the tab bar in place and
+ * the back gesture scoped to this tab's history.
+ */
+const homeRoutes: Router.RouteParameters[] = [
+  {
+    name: "home",
+    path: "/home/",
+    async: lazyRoute(() => import("@/modules/home/views/HomeView.vue")),
+  },
+  {
+    name: "home-feature",
+    path: "/home/feature/:id/",
+    async: lazyRoute(() => import("@/modules/home/views/FeatureDetailView.vue")),
+  },
+];
+
+export default homeRoutes;

package/templates/m3e-app/src/modules/home/views/FeatureDetailView.vue

@@ -0,0 +1,66 @@
+<template>
+  <AppPage :title="feature ? t(feature.titleKey) : t('errors.notFoundTitle')" variant="medium" back>
+    <template v-if="feature">
+      <section class="flex flex-col items-center gap-4 px-6 pt-4 pb-2 text-center">
+        <M3Shape :shape="feature.shape" class="size-32" :class="TONE_CLASSES[feature.tone]">
+          <component :is="feature.icon" class="size-12" />
+        </M3Shape>
+        <p class="type-title-medium m-0 text-on-surface-variant">{{ t(feature.subtitleKey) }}</p>
+        <p class="type-body-large m-0 max-w-[36rem] text-on-surface">{{ t(feature.textKey) }}</p>
+      </section>
+
+      <SectionHeader :title="t('detail.thisScreen')" />
+      <M3List variant="segmented" inset>
+        <M3ListItem
+          :headline="t('detail.transition')"
+          :supporting="t('detail.transitionNote', { name: transitionName(feature) })"
+          :trailing-text="transitionName(feature)"
+          multiline
+        >
+          <template #leading><i-ms-swipe-rounded /></template>
+        </M3ListItem>
+        <M3ListItem :headline="t('detail.appBar')" :supporting="t('detail.appBarNote')" multiline>
+          <template #leading><i-ms-web-rounded /></template>
+        </M3ListItem>
+        <M3ListItem :headline="t('detail.nesting')" :supporting="t('detail.nestingNote')" multiline>
+          <template #leading><i-ms-widgets-outline-rounded /></template>
+        </M3ListItem>
+      </M3List>
+
+      <div class="flex justify-end px-4 pt-6">
+        <M3Button variant="tonal" size="m" @click="openNext">
+          {{ t("detail.next") }}
+          <template #trailing><i-ms-chevron-right-rounded class="rtl:-scale-x-100" /></template>
+        </M3Button>
+      </div>
+    </template>
+
+    <EmptyState
+      v-else
+      shape="ghostish"
+      :headline="t('errors.notFoundTitle')"
+      :text="t('errors.notFound')"
+    />
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import { features, findFeature } from "@/modules/home/composables/useHomeFeatures";
+import { transitionName, useOpenFeature } from "@/modules/home/composables/useOpenFeature";
+import { TONE_CLASSES } from "@/shared/utils/tone";
+
+const { t } = useI18n();
+const props = defineProps<{ f7route: Router.Route; f7router: Router.Router }>();
+
+const openFeature = useOpenFeature();
+
+const feature = computed(() => findFeature(String(props.f7route.params.id ?? "")));
+
+/** Pushes the next feature onto this tab's own history, so the stack grows inside the tab. */
+function openNext() {
+  const index = features.findIndex((entry) => entry.id === feature.value?.id);
+  const next = features[(index + 1) % features.length];
+  if (next) openFeature(props.f7router, next);
+}
+</script>

package/templates/m3e-app/src/modules/home/views/HomeView.vue

@@ -0,0 +1,47 @@
+<template>
+  <AppPage :title="t('home.title')" name="home">
+    <template #actions>
+      <M3IconButton :label="t('home.studio')" @click="openStudio">
+        <i-ms-palette-outline-rounded />
+      </M3IconButton>
+    </template>
+
+    <HomeHero @explore="tabs.show('gallery')" @personalise="openStudio" />
+
+    <SectionHeader :title="t('home.included')" />
+    <M3List variant="segmented" inset :label="t('home.included')">
+      <M3ListItem
+        v-for="feature in features"
+        :key="feature.id"
+        clickable
+        :headline="t(feature.titleKey)"
+        :supporting="t(feature.subtitleKey)"
+        :trailing-text="transitionName(feature)"
+        @click="openFeature(f7router, feature)"
+      >
+        <template #leading>
+          <M3Shape :shape="feature.shape" class="size-10" :class="TONE_CLASSES[feature.tone]">
+            <component :is="feature.icon" class="size-5" />
+          </M3Shape>
+        </template>
+        <template #trailing><i-ms-chevron-right-rounded class="rtl:-scale-x-100" /></template>
+      </M3ListItem>
+    </M3List>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import HomeHero from "@/modules/home/components/HomeHero.vue";
+import { features } from "@/modules/home/composables/useHomeFeatures";
+import { transitionName, useOpenFeature } from "@/modules/home/composables/useOpenFeature";
+import { TONE_CLASSES } from "@/shared/utils/tone";
+
+const { t } = useI18n();
+defineProps<{ f7router: Router.Router }>();
+const tabs = useActiveTab();
+const openFeature = useOpenFeature();
+function openStudio() {
+  tabs.open("settings", "/settings/studio/");
+}
+</script>

package/templates/m3e-app/src/modules/settings/components/RolePalette.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2 px-4">
+    <div
+      v-for="role in ROLES"
+      :key="role.name"
+      class="flex min-h-18 flex-col justify-between rounded-md p-3"
+      :style="{
+        background: `var(--md-sys-color-${role.name})`,
+        color: `var(--md-sys-color-${role.on})`,
+      }"
+    >
+      <span class="type-label-large">{{ role.name }}</span>
+      <span class="type-label-small opacity-80">{{ role.on }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * The generated roles in pairs - each container with the content colour that must stay legible on
+ * it. A pair that reads poorly here reads poorly everywhere; raise the contrast level, not the
+ * individual colour.
+ */
+const ROLES = [
+  { name: "primary", on: "on-primary" },
+  { name: "primary-container", on: "on-primary-container" },
+  { name: "secondary", on: "on-secondary" },
+  { name: "secondary-container", on: "on-secondary-container" },
+  { name: "tertiary", on: "on-tertiary" },
+  { name: "tertiary-container", on: "on-tertiary-container" },
+  { name: "error-container", on: "on-error-container" },
+  { name: "success-container", on: "on-success-container" },
+  { name: "surface-container-low", on: "on-surface" },
+  { name: "surface-container-highest", on: "on-surface-variant" },
+  { name: "inverse-surface", on: "inverse-on-surface" },
+  { name: "primary-fixed", on: "on-primary-fixed" },
+] as const;
+</script>

package/templates/m3e-app/src/modules/settings/components/SeedSwatches.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="grid grid-cols-5 gap-3 px-4" role="radiogroup" :aria-label="t('studio.seed')">
+    <button
+      v-for="preset in SEED_PRESETS"
+      :key="preset.id"
+      type="button"
+      role="radio"
+      class="m3-focus-ring grid aspect-square place-items-center rounded-full"
+      :aria-checked="isSelected(preset.seed)"
+      :aria-label="t(preset.labelKey)"
+      :style="{ color: preset.seed }"
+      @click="emit('select', preset.seed)"
+    >
+      <M3ShapeMorph
+        :shape="isSelected(preset.seed) ? 'cookie9Sided' : 'circle'"
+        :rotate="isSelected(preset.seed) ? 30 : 0"
+        class="size-full max-w-14"
+      >
+        <i-ms-check-rounded
+          class="size-6 text-white transition-opacity duration-spring-fast ease-fast-effects"
+          :class="isSelected(preset.seed) ? 'opacity-100' : 'opacity-0'"
+        />
+      </M3ShapeMorph>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SEED_PRESETS } from "@/app/theme.config";
+
+/**
+ * The preset seeds as shapes that morph from a circle into a cookie when chosen. The swatch is the
+ * raw seed, the one place a hex value reaches the screen, because the point is to show the input
+ * before Material turns it into a scheme.
+ */
+const props = defineProps<{ selected: string }>();
+const emit = defineEmits<{ select: [seed: string] }>();
+const { t } = useI18n();
+
+const isSelected = (seed: string) => seed.toLowerCase() === props.selected.toLowerCase();
+</script>

package/templates/m3e-app/src/modules/settings/components/SettingsChoice.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="flex flex-col gap-3 rounded-xs bg-surface-container-low px-4 py-4 first:rounded-t-lg last:rounded-b-lg"
+  >
+    <div class="flex items-center gap-3">
+      <span class="text-on-surface-variant [&>svg]:size-6"><slot name="icon" /></span>
+      <div class="flex min-w-0 flex-col">
+        <span class="type-body-large text-on-surface">{{ props.label }}</span>
+        <span v-if="props.supporting" class="type-body-medium text-on-surface-variant">{{
+          props.supporting
+        }}</span>
+      </div>
+    </div>
+    <M3ButtonGroup variant="connected" size="s" :label="props.label">
+      <M3Button
+        v-for="option in props.options"
+        :key="option.value"
+        variant="tonal"
+        toggle
+        :selected="model === option.value"
+        @update:selected="model = option.value"
+      >
+        <template v-if="option.icon" #icon><component :is="option.icon" /></template>
+        {{ option.label }}
+      </M3Button>
+    </M3ButtonGroup>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends string">
+import type { ChoiceOption } from "@/modules/settings/types";
+
+/**
+ * One setting with a few exclusive choices: a label and a connected button group, the M3
+ * Expressive replacement for segmented buttons. Sits in a segmented stack with its siblings.
+ */
+const props = defineProps<{
+  label: string;
+  supporting?: string;
+  options: readonly ChoiceOption<T>[];
+}>();
+const model = defineModel<T>({ required: true });
+</script>

package/templates/m3e-app/src/modules/settings/components/StudioPreview.vue

@@ -0,0 +1,52 @@
+<template>
+  <section
+    class="mx-4 flex flex-col gap-4 rounded-xl bg-surface-container-low p-5 text-on-surface shadow-1"
+    :aria-label="t('studio.preview')"
+  >
+    <header class="flex items-center gap-3">
+      <M3Shape shape="clover4Leaf" class="size-12 bg-tertiary-container text-on-tertiary-container">
+        <i-ms-auto-awesome-outline-rounded class="size-6" />
+      </M3Shape>
+      <div class="flex min-w-0 flex-1 flex-col">
+        <span class="type-title-medium-emphasized">{{ t("studio.previewTitle") }}</span>
+        <span class="type-body-medium text-on-surface-variant">{{ t("studio.previewText") }}</span>
+      </div>
+      <M3Switch v-model="on" :label="t('studio.previewSwitch')" />
+    </header>
+
+    <M3LinearProgress :value="0.62" :label="t('studio.previewProgress')" />
+
+    <div class="flex flex-wrap items-center gap-2">
+      <M3Chip
+        kind="filter"
+        :label="t('studio.previewChip')"
+        :selected="on"
+        @update:selected="on = $event"
+      />
+      <M3Chip :label="t('studio.previewAssist')">
+        <template #icon><i-ms-bolt-rounded /></template>
+      </M3Chip>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <M3ButtonGroup size="s" :label="t('studio.preview')">
+        <M3Button>{{ t("studio.previewPrimary") }}</M3Button>
+        <M3Button variant="tonal">{{ t("studio.previewTonal") }}</M3Button>
+      </M3ButtonGroup>
+      <span class="flex-1" />
+      <M3LoadingIndicator contained :size="40" :label="t('studio.previewLoading')" />
+      <M3Fab size="small" :label="t('studio.previewFab')" color="tertiary-container">
+        <i-ms-add-rounded />
+      </M3Fab>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/**
+ * A handful of live components in the generated scheme, so a seed or variant change is judged on
+ * real surfaces - containers, an active wave, a selected chip - rather than on swatches alone.
+ */
+const { t } = useI18n();
+const on = ref(true);
+</script>

package/templates/m3e-app/src/modules/settings/router/routes/settings.routes.ts

@@ -0,0 +1,17 @@
+import type { Router } from "framework7/types";
+import { lazyRoute } from "@/shared/utils/lazyRoute";
+
+const settingsRoutes: Router.RouteParameters[] = [
+  {
+    name: "settings",
+    path: "/settings/",
+    async: lazyRoute(() => import("@/modules/settings/views/SettingsView.vue")),
+  },
+  {
+    name: "settings-studio",
+    path: "/settings/studio/",
+    async: lazyRoute(() => import("@/modules/settings/views/ColorStudioView.vue")),
+  },
+];
+
+export default settingsRoutes;

package/templates/m3e-app/src/modules/settings/types.ts

@@ -0,0 +1,7 @@
+import type { Component } from "vue";
+
+export interface ChoiceOption<V extends string> {
+  value: V;
+  label: string;
+  icon?: Component;
+}

package/templates/m3e-app/src/modules/settings/views/ColorStudioView.vue

@@ -0,0 +1,166 @@
+<template>
+  <AppPage :title="t('studio.title')" variant="medium" back>
+    <template #actions>
+      <M3IconButton :label="t('studio.reset')" @click="reset">
+        <i-ms-restart-alt-rounded />
+      </M3IconButton>
+    </template>
+
+    <StudioPreview />
+
+    <SectionHeader :title="t('studio.seed')" />
+    <SeedSwatches :selected="settings.seed" @select="(seed) => theme.update({ seed })" />
+
+    <div class="flex items-start gap-2 px-4 pt-4">
+      <M3TextField
+        v-model="hex"
+        class="flex-1"
+        :label="t('studio.custom')"
+        :error="hexError"
+        :supporting="t('studio.customHint')"
+        autocapitalize="off"
+        autocomplete="off"
+        spellcheck="false"
+      >
+        <template #leading>
+          <span
+            class="block size-6 rounded-full"
+            :style="{ background: hexValid ? normalizedHex : 'transparent' }"
+          />
+        </template>
+      </M3TextField>
+      <M3IconButton
+        variant="tonal"
+        size="m"
+        class="mt-2"
+        :label="t('studio.pick')"
+        @click="openPicker"
+      >
+        <i-ms-tune-rounded />
+      </M3IconButton>
+    </div>
+
+    <template #fixed>
+      <M3BottomSheet v-model:open="pickerOpen" :title="t('studio.pick')">
+        <div class="flex flex-col gap-6 px-6 pb-6">
+          <M3ColorPicker
+            v-model="draftSeed"
+            :label="t('studio.pick')"
+            :hue-label="t('studio.hue')"
+            :chroma-label="t('studio.chroma')"
+            :tone-label="t('studio.tone')"
+            :hex-label="t('studio.hex')"
+            :invalid-text="t('studio.customInvalid')"
+          />
+          <p class="type-body-small m-0 text-on-surface-variant">{{ t("studio.pickNote") }}</p>
+          <div class="flex justify-end gap-2">
+            <M3Button variant="text" @click="pickerOpen = false">{{ t("studio.cancel") }}</M3Button>
+            <M3Button @click="applyPicked">{{ t("studio.apply") }}</M3Button>
+          </div>
+        </div>
+      </M3BottomSheet>
+    </template>
+
+    <SectionHeader :title="t('studio.variant')" />
+    <div class="flex flex-wrap gap-2 px-4" role="radiogroup" :aria-label="t('studio.variant')">
+      <M3Chip
+        v-for="variant in STUDIO_VARIANTS"
+        :key="variant"
+        kind="filter"
+        :label="t(`studio.variants.${variant}`)"
+        :selected="settings.variant === variant"
+        @update:selected="theme.update({ variant })"
+      />
+    </div>
+    <p class="type-body-small m-0 px-6 pt-2 text-on-surface-variant">
+      {{ effectiveSpec(settings.variant) === "2025" ? t("studio.spec2025") : t("studio.spec2021") }}
+    </p>
+
+    <div class="mx-4 mt-6">
+      <SettingsChoice
+        :model-value="settings.contrast"
+        :label="t('studio.contrast')"
+        :supporting="t('studio.contrastNote')"
+        :options="contrastOptions"
+        @update:model-value="(contrast) => theme.update({ contrast })"
+      >
+        <template #icon><i-ms-contrast-rounded /></template>
+      </SettingsChoice>
+    </div>
+
+    <SectionHeader :title="t('studio.roles')" />
+    <RolePalette />
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import { effectiveSpec, isHexColor } from "@cavulsqa/m3e";
+import { STUDIO_VARIANTS } from "@/app/theme.config";
+import RolePalette from "@/modules/settings/components/RolePalette.vue";
+import SeedSwatches from "@/modules/settings/components/SeedSwatches.vue";
+import SettingsChoice from "@/modules/settings/components/SettingsChoice.vue";
+import StudioPreview from "@/modules/settings/components/StudioPreview.vue";
+import type { ChoiceOption } from "@/modules/settings/types";
+import type { ContrastChoice } from "@/shared/utils/theme/themeSettings";
+
+/**
+ * The colour studio: one seed, a scheme variant and a contrast level, and Material's 2025 colour
+ * system generates every role from them in both modes. Changes apply live and persist.
+ *
+ * @see https://m3.material.io/styles/color/choosing-a-scheme
+ */
+const { t } = useI18n();
+const theme = useThemeSettings();
+const settings = computed(() => theme.settings.value);
+const snackbar = useSnackbar();
+
+const hex = ref(settings.value.seed);
+const normalizedHex = computed(() => (hex.value.startsWith("#") ? hex.value : `#${hex.value}`));
+const hexValid = computed(() => isHexColor(hex.value));
+const hexError = computed(() =>
+  hex.value.length >= 4 && !hexValid.value ? t("studio.customInvalid") : undefined,
+);
+
+watch(normalizedHex, (value) => {
+  if (hexValid.value && value.toLowerCase() !== settings.value.seed.toLowerCase()) {
+    theme.update({ seed: value });
+  }
+});
+
+watch(
+  () => settings.value.seed,
+  (seed) => {
+    if (seed.toLowerCase() !== normalizedHex.value.toLowerCase()) hex.value = seed;
+  },
+);
+
+const contrastOptions = computed<ChoiceOption<ContrastChoice>[]>(() => [
+  { value: "standard", label: t("studio.contrastStandard") },
+  { value: "medium", label: t("studio.contrastMedium") },
+  { value: "high", label: t("studio.contrastHigh") },
+]);
+
+const pickerOpen = ref(false);
+const draftSeed = ref(settings.value.seed);
+
+function openPicker() {
+  draftSeed.value = settings.value.seed;
+  pickerOpen.value = true;
+}
+
+function applyPicked() {
+  hex.value = draftSeed.value;
+  pickerOpen.value = false;
+}
+
+async function reset() {
+  const previous = { ...settings.value };
+  theme.reset();
+  const result = await snackbar.show({
+    message: t("studio.resetDone"),
+    action: t("studio.undo"),
+    duration: "long",
+  });
+  if (result === "action") theme.update(previous);
+}
+</script>