feat(user-apps): appearance settings (dark mode + reduced motion), product morph, filter sheet

Applies to both user-app and user-app-v2. Logic and structure are shared;
each app keeps its own look.

Appearance settings
- New "تنظیمات ظاهری" page (/settings/appearance), opened from the
  dashboard and available without login. It offers a light/dark/system
  theme and a "fast & light" motion switch.
- appearanceStore saves the choice to localStorage. A small inline boot
  script in index.html applies it before first paint so there is no
  white flash. The "system" option follows OS changes live.
- New ToggleSwitch component.

Dark mode
- Theme LESS tokens now compile to CSS custom properties. Light/dark
  values come from a generated virtual:palette.css (themeConfig/
  appearance.ts, with colors.json + new colors.dark.json).
- New LESS alpha() plugin replaces fade() on theme tokens.
- New semantic tokens: page, onInk, heroSurface, hairlineStrong,
  photoMat, photoStage.
- The dark palette is layered (page < card < panel < border) so
  surfaces separate without shadows.
- Hard-coded colors were replaced by tokens according to their role.
- antd inputs/text get dark overrides; vant uses its own
  .van-theme-dark.
- Light mode looks the same as before.

Reduced motion
- With html.motion-reduced, transitions are capped at 120ms, keyframe
  loops stop, and backdrop blurs and permanent will-change are dropped.
- Spinners and the toast progress bar (which closes the toast) are
  exempt via .keep-motion.
- Carousel autoplay, the v1 Lottie and the product morph honor the
  setting.

Product detail
- Opening a product is now a container-transform morph from the tapped
  card (ProductMorph). It replaces the bottom Drawer and uses composited
  transform/opacity only.
- The detail view is seeded with the card's data, so it no longer
  opens blank and jumps.

Filters and sheets
- Filters are now a full-width bottom sheet. Selections stay a draft
  until applied, so the result list no longer re-renders while
  dragging the slider.
- DropDown collapse animates grid-template-rows instead of a capped
  max-height.
- v2 IslandSheet is restyled to the v2 design language (API unchanged).

Fixes
- filtersStore.reset() shallow-copied shared arrays, so clearing the
  filters never cleared the selected brands.

apps/user-app-v2/src/composables/useProductDetail.ts

@@ -4,22 +4,40 @@
 // so this fetches the full list and finds the matching product client-side.
 // Wasteful for a large catalog, but honest: no fabricated endpoint, no silent
 // behavior change.
+//
+// `initial` seeds the page with the ProductSummary the tapped card already
+// holds — the same shape, from the same endpoint — so the detail view renders
+// complete on its first frame instead of mounting blank and jumping when the
+// fetch lands. The fetch still runs, silently, and only replaces the product
+// if the server's copy actually differs (stock moved since the list loaded).
+//
+// The silent refresh waits until the opening morph (ProductMorph.vue, ≤420ms)
+// is over: the response is the whole catalogue, and parsing it — or swapping
+// the product and re-rendering — mid-animation drops frames.
 import { ref } from 'vue'
 import { api, type ProductSummary } from '../api/client'
 
-export function useProductDetail(id: string) {
+const SEEDED_REFRESH_DELAY_MS = 600
+
+export function useProductDetail(id: string, initial?: ProductSummary | null) {
   const loading = ref(false)
-  const flag = ref(false)
+  const flag = ref(Boolean(initial))
   const notFound = ref(false)
-  const productRef = ref<ProductSummary | null>(null)
+  const productRef = ref<ProductSummary | null>(initial ?? null)
 
   const load = async () => {
-    loading.value = true
+    const seeded = productRef.value !== null
+    if (seeded) await new Promise((resolve) => setTimeout(resolve, SEEDED_REFRESH_DELAY_MS))
+    else loading.value = true
     try {
       const products = await api.listProducts()
       const found = products.find((p) => p.id === id) ?? null
-      productRef.value = found
-      notFound.value = !found
+      if (seeded) {
+        if (found && JSON.stringify(found) !== JSON.stringify(productRef.value)) productRef.value = found
+      } else {
+        productRef.value = found
+        notFound.value = !found
+      }
       flag.value = true
     } catch (e) {
       console.log(e)

apps/user-app-v2/src/composables/useProductMorph.ts

@@ -0,0 +1,43 @@
+// Opens the product detail as a morph out of the card that was tapped, in
+// place of the old full-height bottom Drawer (which slid up from off-screen and
+// then jumped once the detail fetch landed). One overlay for the whole app —
+// components/product/ProductMorph.vue, mounted once in App.vue — instead of a
+// Drawer per card: ProductCard used to carry its own, so every catalogue grid
+// rendered one per product.
+//
+// Callers only say WHICH product. The card it came from is found from the tap
+// itself: every card root is marked `data-product-origin`, and the last
+// pointerdown is remembered here, so the tap's own target leads back to its
+// card without each emit chain (ProductPanel → ProductCarousel → HomeView) having
+// to thread an element through. A caller that does hold the element can pass
+// it; with neither (keyboard activation), the overlay falls back to a plain
+// rise-and-fade instead of a morph.
+import { shallowRef } from 'vue'
+import type { ProductSummary } from '../api/client'
+
+export interface ProductMorphRequest {
+  product: ProductSummary
+  origin: HTMLElement | null
+}
+
+export const productMorph = shallowRef<ProductMorphRequest | null>(null)
+
+let lastPointerTarget: Element | null = null
+if (typeof document !== 'undefined') {
+  document.addEventListener(
+    'pointerdown',
+    (e) => {
+      lastPointerTarget = e.target instanceof Element ? e.target : null
+    },
+    { capture: true, passive: true },
+  )
+}
+
+export function openProduct(product: ProductSummary, origin?: HTMLElement | null) {
+  const fromTap = lastPointerTarget?.closest<HTMLElement>('[data-product-origin]') ?? null
+  productMorph.value = { product, origin: origin ?? fromTap }
+}
+
+export function closeProduct() {
+  productMorph.value = null
+}