1/* ARCHITECTURE §6 dan DESIGN-SYSTEM §10.3: data murni untuk hias strip.
2 Berkas ini TIDAK mengimpor Konva supaya bisa dipakai lapisan UI, store, dan
3 uji tanpa memuat pustaka kanvas. Nilai warna ditulis sebagai nama variabel
4 token, bukan heks: kanvas memakai `resolveTokenColor` untuk membacanya
5 (DESIGN-SYSTEM §14: tidak ada nilai mentah di luar globals.css). */
6
7export interface FramePreset {
8 id: string
9 label: string
10 /** Nama variabel token untuk latar strip. */
11 bg: string
12 /** Garis tepi tiap slot foto. */
13 slotBorder: string
14 /** Warna wordmark "snapme" di kaki strip. */
15 wordmark: string
16}
17
18/* Urutan tetap. Setiap pasangan teks dan latar sudah ada di tabel kontras
19 DESIGN-SYSTEM §2 (ink di paper/lime/pink/violet-soft, lime di ink,
20 paper di violet). */
21export const FRAMES: FramePreset[] = [
22 {
23 id: "klasik",
24 label: "Klasik",
25 bg: "--color-paper",
26 slotBorder: "--color-ink",
27 wordmark: "--color-ink",
28 },
29 {
30 id: "malam",
31 label: "Malam",
32 bg: "--color-ink",
33 slotBorder: "--color-paper",
34 wordmark: "--color-lime",
35 },
36 {
37 id: "limau",
38 label: "Limau",
39 bg: "--color-lime",
40 slotBorder: "--color-ink",
41 wordmark: "--color-ink",
42 },
43 {
44 id: "gulali",
45 label: "Gulali",
46 bg: "--color-pink",
47 slotBorder: "--color-ink",
48 wordmark: "--color-ink",
49 },
50 {
51 id: "ungu",
52 label: "Ungu",
53 bg: "--color-violet",
54 slotBorder: "--color-paper",
55 wordmark: "--color-paper",
56 },
57 {
58 id: "permen",
59 label: "Permen",
60 bg: "--color-violet-soft",
61 slotBorder: "--color-ink",
62 wordmark: "--color-ink",
63 },
64]
65
66/** Id yang tidak dikenal jatuh ke preset pertama, jadi kanvas tidak pernah
67 * kehabisan warna. */
68export function getFrame(id: string): FramePreset {
69 return FRAMES.find((frame) => frame.id === id) ?? FRAMES[0]
70}
71
72/* Efek foto memakai filter bawaan Konva supaya hasilnya seragam antar browser
73 (ARCHITECTURE §3). `cssPreview` hanya untuk swatch di panel pilihan. */
74export type EffectParams =
75 | { kind: "none" }
76 | { kind: "grayscale" }
77 | { kind: "sepia" }
78 | { kind: "pop" }
79 | { kind: "pixelate"; size: number }
80 | { kind: "invert" }
81 | { kind: "soften" }
82
83export interface EffectPreset {
84 id: string
85 label: string
86 /** Filter CSS untuk pratinjau swatch. Kosong bila tidak ada padanannya. */
87 cssPreview: string
88 params: EffectParams
89}
90
91export const EFFECTS: EffectPreset[] = [
92 { id: "asli", label: "Asli", cssPreview: "", params: { kind: "none" } },
93 {
94 id: "hitam-putih",
95 label: "Hitam Putih",
96 cssPreview: "grayscale(1)",
97 params: { kind: "grayscale" },
98 },
99 {
100 id: "retro",
101 label: "Retro",
102 cssPreview: "sepia(0.85)",
103 params: { kind: "sepia" },
104 },
105 {
106 id: "pop",
107 label: "Pop",
108 cssPreview: "saturate(1.6) contrast(1.15)",
109 params: { kind: "pop" },
110 },
111 {
112 id: "piksel",
113 label: "Piksel",
114 cssPreview: "",
115 params: { kind: "pixelate", size: 12 },
116 },
117 {
118 id: "negatif",
119 label: "Negatif",
120 cssPreview: "invert(1)",
121 params: { kind: "invert" },
122 },
123 {
124 id: "lembut",
125 label: "Lembut",
126 cssPreview: "blur(1px) brightness(1.08)",
127 params: { kind: "soften" },
128 },
129]
130
131export function getEffect(id: string): EffectPreset {
132 return EFFECTS.find((effect) => effect.id === id) ?? EFFECTS[0]
133}
134
135interface StickerAsset {
136 id: string
137 /** Berkas di `public/stickers/`. */
138 file: string
139 label: string
140}
141
142/* DESIGN-SYSTEM §8: stiker berkas SVG, warna datar dari palet §2, garis tepi
143 ink, tanpa gradasi. Dua belas motif Y2K. */
144export const STICKERS: StickerAsset[] = [
145 { id: "star", file: "star.svg", label: "Bintang" },
146 { id: "heart", file: "heart.svg", label: "Hati" },
147 { id: "flower", file: "flower.svg", label: "Bunga" },
148 { id: "bolt", file: "bolt.svg", label: "Kilat" },
149 { id: "smiley", file: "smiley.svg", label: "Senyum" },
150 { id: "cloud", file: "cloud.svg", label: "Awan" },
151 { id: "rainbow", file: "rainbow.svg", label: "Pelangi" },
152 { id: "cassette", file: "cassette.svg", label: "Kaset" },
153 { id: "crown", file: "crown.svg", label: "Mahkota" },
154 { id: "bubble", file: "bubble.svg", label: "Gelembung" },
155 { id: "glasses", file: "glasses.svg", label: "Kacamata" },
156 { id: "candy", file: "candy.svg", label: "Permen" },
157]
158