dither-image-demo-upload

1"use client"
2 
3import {
4  useCallback,
5  useEffect,
6  useId,
7  useRef,
8  useState,
9  type ChangeEvent,
10  type DragEvent,
11  type ReactNode,
12} from "react"
13 
14import { cn } from "@/lib/utils"
15import { Button } from "@/components/ui/button"
16import { Input } from "@/components/ui/input"
17import { Label } from "@/components/ui/label"
18import { Switch } from "@/components/ui/switch"
19import {
20  DitherImage,
21  DitherImageContent,
22  DitherImageFrame,
23  DitherImageOverlay,
24  DitherImageReveal,
25  type DitherRevealDirection,
26  type DitherSize,
27} from "@/registry/default/ui/dither-image"
28 
29/** Layered edge + lift (SKILL-DESIGN) — replaces flat card borders. */
30const PANEL_SURFACE = cn(
31  "rounded-2xl bg-card/65 p-4 md:p-5",
32  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]",
33  "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(255,255,255,0.03),0px_2px_4px_0px_rgba(0,0,0,0.2)]",
34  "transition-shadow duration-200",
35  "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.06)]",
36  "dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.05),0px_2px_4px_0px_rgba(0,0,0,0.25)]"
37)
38 
39const BTN_PRESS =
40  "active:scale-[0.96] transition-transform duration-150 ease-[cubic-bezier(0.2,0,0,1)]"
41 
42const SELECT_SURFACE = cn(
43  "h-10 w-full rounded-[calc(var(--radius)-2px)] border border-input/80 bg-input/15 px-2.5 text-sm outline-none",
44  "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30"
45)
46 
47const FALLBACK_SRC = "/images/gibli/gibli-1.jpg"
48const FALLBACK_ALT = "Sample wallpaper — upload or paste a URL to preview"
49 
50const REMOTE_HTTP_RE = /^https?:\/\//i
51 
52function labelFromRemoteUrl(href: string): string {
53  if (href.startsWith("/")) {
54    const file = href.split("/").pop()
55    return file ?? href
56  }
57  try {
58    const u = new URL(href)
59    const path =
60      u.pathname.length > 48 ? `${u.pathname.slice(0, 48)}…` : u.pathname
61    return `${u.hostname}${path}`
62  } catch {
63    return "Remote image"
64  }
65}
66 
67/** Use with `next/image` when the optimizer cannot fetch the host (arbitrary URLs, blobs, data). */
68function needsUnoptimizedImage(src: string): boolean {
69  return (
70    src.startsWith("blob:") ||
71    src.startsWith("data:") ||
72    REMOTE_HTTP_RE.test(src)
73  )
74}
75 
76const SIZE_OPTIONS: { value: DitherSize; label: string }[] = [
77  { value: "xs", label: "xs (8px)" },
78// … truncated