@appaflytech/zeyrek-ai-mcp 0.0.7 → 0.0.9

package/dist/knowledge/themeResolve.js

@@ -0,0 +1,936 @@
+/**
+ * ÖZET — Bir TEMA kaydının ekrandaki karşılığı: gateway tarafında `Theme.svelte`'nin yaptığının
+ * yeniden kurulması. `theme_get(view: 'resolved')` bir projenin temasını bu modülle çözer ve
+ * "accent'i ezmedim, ekranda hangi mavi çiziliyor" sorusu çağrı başına yanıtlanabilir olur;
+ * `theme_update` de değişikliğin hangi `--ng-*` değişkenini nereden nereye taşıdığını buradan
+ * çıkarır.
+ *
+ * ZİNCİR (`packages/ng-apps-ui/src/shared/theme/`):
+ *   mod seçimi (`Theme.svelte`) → palet birleşimi (`white.ts` | `dark.ts` + override)
+ *   → token birleşimi (`tokens.ts`) → form token'ları (`form.ts`) → `buildThemeStyle` (`utils.ts`)
+ *
+ * KOPYA: gateway frontend workspace'ine dahil DEĞİLDİR (AGENTS §4), paket import edilemez —
+ * `styleResolve.ts` ile aynı gerekçe ve aynı risk: kaynak değişir, gateway eski temayı çözer ve
+ * ajan yanlış rengi doğru sanır. `test/theme-resolve.test.ts` üç kilitle izler:
+ *
+ *   1. DAVRANIŞ — varsayılan/koyu/override senaryoları (frontend olmadan da koşar).
+ *   2. PARİTE — frontend modülleri dinamik `import()` ile yüklenir; palet/token nesneleri
+ *      deep-equal, `buildThemeStyle` çıktısı ise METİN OLARAK karşılaştırılır. Şablonun içindeki
+ *      SEKMELER veridir (style attribute'una öyle basılır), bu yüzden kod 2 boşlukla girintili
+ *      olsa da şablonun kendi girintisine dokunulmaz.
+ *   3. SABİTLER — panelin kuralları (Google Fonts listesi, preset ad kuralı, versiyon sınırı,
+ *      boşluk anahtarları, `ProjectTheme` üst anahtarları) kaynak metinden okunup karşılaştırılır.
+ *
+ * Frontend'e yeni bir tema alanı eklendiğinde buraya da eklenir; eklenmezse parite kırmızı yanar.
+ */
+/**
+ * `ProjectTheme`'in TANIDIĞI üst anahtarlar. Panel tanımadığı anahtarı körce taşır
+ * (`themeDataToProjectTheme` `...base`), yani yazım hatası kayıtta sessizce yaşar —
+ * `theme_get` bunları `unknownKeys` olarak gösterir, `theme_update` şeması reddeder.
+ */
+export const THEME_TOP_LEVEL_KEYS = [
+    'mode', 'palette', 'paletteDark', 'fontFamily', 'headingFontFamily', 'typeScale',
+    'fontSize', 'fontWeight', 'borderRadius', 'radiusScale', 'spacing', 'spacingScale',
+    'shadow', 'defaultInputSize', 'colors', 'actions', 'presets', 'componentStyles',
+    'componentPresets'
+];
+const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/* ---- Palet ve token tabanları (`white.ts` · `dark.ts` · `tokens.ts` kopyası) ---- */
+export const WHITE_PALETTE = {
+    text: {
+        primary: '#262626',
+        secondary: '#4d4d4d',
+        disabled: '#979797',
+    },
+    background: {
+        canvas: '#fff',
+        surface: '#fff',
+        surfaceAlt: '#F6F6F6',
+        readonly: '#F8F8F8',
+        disabled: '#F5F5F5',
+        overlay: '#364b764d',
+        /** Zıt zemin: aydınlık temada koyu yüzey (tooltip, ters vurgular). */
+        inverse: '#262626',
+    },
+    border: {
+        primary: '#dfe1e6',
+        secondary: '#9E9E9E',
+    },
+    accent: {
+        primary: '#0052CC',
+        hover: '#4688EC',
+        muted: '#E6F0FF',
+        subtle: '#F2F7FF',
+    },
+    status: {
+        info: '#F8F8F8',
+        success: '#00875A',
+        warning: '#FFAB00',
+        error: '#DE350B',
+    },
+};
+export const DARK_PALETTE = {
+    text: {
+        primary: '#E4E4E4',
+        secondary: '#A0A0A0',
+        disabled: '#606060',
+    },
+    background: {
+        canvas: '#111111',
+        surface: '#262626',
+        surfaceAlt: '#1A1A1A',
+        readonly: '#1E1E1E',
+        disabled: '#2A2A2A',
+        overlay: '#364b764d',
+        /** Zıt zemin: karanlık temada aydınlık yüzey. */
+        inverse: '#F6F6F6',
+    },
+    border: {
+        primary: '#3A3A3A',
+        secondary: '#5A5A5A',
+    },
+    accent: {
+        // Karanlıkta accent'in kendisi yeterince okunur; hover bir tık açılır.
+        primary: '#4C8DFF',
+        hover: '#7AABFF',
+        // `muted` ve `subtle` DOLGU rolündedir (seçili satır, çip zemini). Aydınlık
+        // paletten kopyalandıkları sürece karanlık zeminde beyaz blok gibi
+        // duruyorlardı; artık accent'in koyu tonlarıdır.
+        muted: '#16283F',
+        subtle: '#111B2B',
+    },
+    status: {
+        // `info` bir renk değil, nötr durum YÜZEYİDİR — aydınlıkta #F8F8F8, yani
+        // zeminden bir tık ayrık bir gri. Karanlıkta karşılığı da öyle olmalı.
+        info: '#2E2E2E',
+        // Uyarı/başarı/hata dolgu olarak kullanılıyor ve üstlerine kontrast metin
+        // yazılıyor; hue korunur, karanlık zeminde seçilebilmeleri için açılır.
+        success: '#2FA37A',
+        warning: '#E5A93C',
+        error: '#F2634B',
+    },
+};
+const BASE_TOKENS = {
+    fontFamily: '"Inter", sans-serif',
+    fontSource: 'Inter',
+    fontSize: '14px',
+    fontWeight: '400',
+    borderRadius: '4px',
+    spacing: '10px',
+    defaultInputSize: 'md',
+    shadow: {
+        offsetX: 0,
+        offsetY: 4,
+        blur: 6,
+        spread: -1,
+        color: '#000000',
+        opacity: 10,
+    },
+    colors: {
+        blue: {
+            b50: '#F5F9FF',
+            b100: '#E5F1FF',
+            b150: '#DCE8FE',
+            b200: '#BFDBFE',
+            b300: '#92C5FD',
+            b400: '#60A5FA',
+            b500: '#3C82F6',
+            b600: '#3170F9',
+            b700: '#1C4ED8',
+            b800: '#1D40AE',
+            b900: '#1F3A8A',
+        },
+        red: {
+            r50: '#FFF6F6',
+            r100: '#FEEAEA',
+            r150: '#FEDCDC',
+            r200: '#FECACA',
+            r500: '#EF4444',
+            r600: '#DC2625',
+            r700: '#B91C1B',
+            r800: '#991B1B',
+            r900: '#7F1C1D',
+        },
+        grey: {
+            r100: '#F6F6F6',
+            r150: '#EBEBEB',
+            r200: '#DFDFDF',
+            r300: '#C4C4C4',
+            r400: '#A0A0A0',
+            r500: '#808080',
+            r600: '#808080',
+            r700: '#555555',
+            r800: '#222222',
+            r900: '#0D0D0D',
+        },
+        yellow: {
+            r50: '#FFFDF5',
+            r100: '#FFF9E0',
+            r150: '#FEF3C7',
+            r200: '#FDE68A',
+            r300: '#FCD34D',
+            r400: '#FBBF24',
+            r500: '#F59E0B',
+            r600: '#CD6F00',
+            r700: '#B45309',
+            r800: '#92400E',
+            r900: '#78350F',
+        },
+        green: {
+            r50: '#F4FCF8',
+            r100: '#ECFDF5',
+            r150: '#D1FAE5',
+            r200: '#A7F3D0',
+            r500: '#10B981',
+            r900: '#064E3B',
+        },
+        purple: {
+            r50: '#F5F7FF',
+            r100: '#EBEFFF',
+            r150: '#E0E7FF',
+            r200: '#C7D2FE',
+            r900: '#302E81',
+        },
+        plump: {
+            r50: '#FFF8FF',
+            r100: '#FDECFF',
+            r150: '#F4DCF8',
+            r200: '#EECFF3',
+            r300: '#E1B6E8',
+            r400: '#CF95D8',
+            r500: '#BD75C7',
+            r600: '#AE57BB',
+            r700: '#9846A4',
+            r800: '#893F94',
+            r900: '#6E3275',
+        },
+        teal: {
+            r50: '#F0FDFA',
+            r100: '#CCFBF1',
+            r150: '#99F6E4',
+            r200: '#5EEAD4',
+            r500: '#14B8A6',
+            r600: '#0D9488',
+            r700: '#0F766E',
+            r800: '#115E59',
+            r900: '#134E4A',
+        },
+        pink: {
+            r50: '#FDF2F8',
+            r100: '#FCE7F3',
+            r150: '#FBCFE8',
+            r200: '#F9A8D4',
+            r500: '#EC4899',
+            r600: '#DB2777',
+            r700: '#BE185D',
+            r800: '#9D174D',
+            r900: '#831843',
+        },
+        cyan: {
+            r50: '#ECFEFF',
+            r100: '#CFFAFE',
+            r150: '#A5F3FC',
+            r200: '#67E8F9',
+            r500: '#06B6D4',
+            r600: '#0891B2',
+            r700: '#0E7490',
+            r800: '#155E75',
+            r900: '#164E63',
+        },
+        orange: {
+            r50: '#FFF7ED',
+            r100: '#FFEDD5',
+            r150: '#FED7AA',
+            r200: '#FDBA74',
+            r500: '#F97316',
+            r600: '#EA580C',
+            r700: '#C2410C',
+            r800: '#9A3412',
+            r900: '#7C2D12',
+        },
+    },
+};
+export const TOKENS = BASE_TOKENS;
+/** Palet gruplarının anahtarları — paletin KENDİSİNDEN türer ki listeyi ikinci kez yazmayalım. */
+export const PALETTE_GROUPS = Object.fromEntries(Object.entries(WHITE_PALETTE).map(([group, values]) => [group, Object.keys(values)]));
+/* ---- Birleştiriciler ve ölçekler (`utils.ts` kopyası) ---- */
+export function mergePalette(base, overrides) {
+    const result = { ...base };
+    for (const [group, values] of Object.entries(overrides)) {
+        if (values === undefined)
+            continue;
+        const baseValue = result[group];
+        result[group] = isPlainObject(baseValue) && isPlainObject(values) ? { ...baseValue, ...values } : values;
+    }
+    return result;
+}
+/**
+ * Renk rampalarını aile aile birleştirir: bir ailenin yalnız verilen tonları değişir. Temanın
+ * `colors` alanının panelde UI'ı YOKTUR, yalnız veri yoluyla (bu tool'la ya da şablonla) kurulur.
+ */
+export function mergeColorRamps(base, overrides) {
+    const result = { ...base };
+    for (const [family, tones] of Object.entries(overrides)) {
+        if (!tones)
+            continue;
+        const baseFamily = result[family];
+        result[family] = isPlainObject(baseFamily) ? { ...baseFamily, ...tones } : tones;
+    }
+    return result;
+}
+/** Metin seviyelerinin taban puntoya oranı; `text.style.ts`'in eski gömülü çarpanları. */
+export const TYPE_SCALE_DEFAULTS = {
+    h1: 2.25,
+    h2: 2,
+    h3: 1.7,
+    h4: 1.15,
+    label: 1,
+    p: 0.925,
+    small: 0.715
+};
+/** Köşe kademelerinin `--ng-rounded`'a oranı; 4px tabanda sm=2px, lg=12px. */
+export const RADIUS_SCALE_DEFAULTS = { sm: 0.5, lg: 3 };
+/** Hap biçimi orana bağlanmaz; her tabanda tam yuvarlak kalmalıdır. */
+export const RADIUS_PILL_DEFAULT = '999px';
+/** Boşluk kademelerinin `--ng-spacing`'e oranı; sm/md/lg builder'ın gap preset'leriyle aynı. */
+export const SPACING_SCALE_DEFAULTS = { xs: 0.4, sm: 0.8, md: 1.6, lg: 3.2, xl: 4.8 };
+/**
+ * Oranın kabul aralığı (panelin `readScaleRatio`'su). Dışarıda kalan değer panelde ESKİ değeri
+ * korur, temada ise `mergeRatioScale` tarafından sessizce yok sayılır — THEME-007 bunu yakalar.
+ */
+export const SCALE_RATIO_MAX = 20;
+/** Oran override'ları tabana bindirilir; 0/negatif/geçersiz değer tabanı korur. */
+function mergeRatioScale(defaults, overrides) {
+    const result = { ...defaults };
+    for (const [level, value] of Object.entries(overrides ?? {})) {
+        if (typeof value === 'number' && value > 0)
+            result[level] = value;
+    }
+    return result;
+}
+/**
+ * `--ng-radius-*` kademeleri. `md`, `--ng-rounded`'ın takma adıdır: kademeli adları komponentler
+ * ve builder kullanır, eski tüketiciler `--ng-rounded`'ı görmeye devam eder.
+ */
+export function buildRadiusScaleVars(scale) {
+    const ratios = mergeRatioScale(RADIUS_SCALE_DEFAULTS, scale);
+    const pill = scale?.pill || RADIUS_PILL_DEFAULT;
+    return [
+        `--ng-radius-sm: calc(var(--ng-rounded) * ${ratios.sm});`,
+        '--ng-radius-md: var(--ng-rounded);',
+        `--ng-radius-lg: calc(var(--ng-rounded) * ${ratios.lg});`,
+        `--ng-radius-pill: ${pill};`
+    ].join('\n\t');
+}
+/** `--ng-spacing-xs..xl`; eski `--ng-spacing-small/large` tüketicileri bozulmasın diye onlar kalır. */
+export function buildSpacingScaleVars(scale) {
+    const ratios = mergeRatioScale(SPACING_SCALE_DEFAULTS, scale);
+    return Object.entries(ratios)
+        .map(([level, ratio]) => `--ng-spacing-${level}: calc(var(--ng-spacing) * ${ratio});`)
+        .join('\n\t');
+}
+/**
+ * Bir seviyenin mobil karşılığının masaüstüne oranı — bugünkü breakpoint değerlerinden türer.
+ * Kullanıcı tek çarpan ayarlar, mobil ona orantılı hareket eder.
+ */
+const TYPE_SCALE_MOBILE_RATIO = {
+    h1: 1.7 / 2.25,
+    h2: 1.5 / 2,
+    h3: 1.3 / 1.7,
+    h4: 1 / 1.15
+};
+/**
+ * Köşe kademelerinin BİRLEŞİK hâli. Frontend bunu ayrı bir fonksiyonla vermez, doğrudan
+ * `buildRadiusScaleVars` içinde üretir; gateway'in `theme_get(view:'resolved')` yanıtında
+ * kademeleri SAYI olarak göstermesi gerektiği için burada ayrıca dışa verilir — kural aynı
+ * `mergeRatioScale`'den gelir, ikinci bir kopya yoktur.
+ */
+export function mergeRadiusScale(scale) {
+    return { ...mergeRatioScale(RADIUS_SCALE_DEFAULTS, scale), pill: scale?.pill || RADIUS_PILL_DEFAULT };
+}
+/** Boşluk kademelerinin birleşik hâli; `mergeRadiusScale` ile aynı gerekçe. */
+export function mergeSpacingScale(scale) {
+    return mergeRatioScale(SPACING_SCALE_DEFAULTS, scale);
+}
+/** Ölçek override'ları taban değerlere bindirilir; eksik seviye tabanı korur. */
+export function mergeTypeScale(overrides) {
+    const result = { ...TYPE_SCALE_DEFAULTS };
+    for (const [level, value] of Object.entries(overrides ?? {})) {
+        if (typeof value === 'number' && value > 0)
+            result[level] = value;
+    }
+    return result;
+}
+/** Ölçekten `--ng-font-size-*` değişkenlerini üretir (masaüstü + mobil). */
+export function buildTypeScaleVars(scale) {
+    const lines = [];
+    for (const [level, factor] of Object.entries(scale)) {
+        lines.push(`--ng-font-size-${level}: calc(var(--ng-font-size) * ${factor});`);
+        const ratio = TYPE_SCALE_MOBILE_RATIO[level];
+        if (ratio) {
+            const mobile = Math.round(factor * ratio * 1000) / 1000;
+            lines.push(`--ng-font-size-${level}-mobile: calc(var(--ng-font-size) * ${mobile});`);
+        }
+    }
+    return lines.join('\n\t');
+}
+export function mergeTokens(base, overrides) {
+    return {
+        ...base,
+        ...(overrides.fontFamily !== undefined && {
+            fontFamily: `"${overrides.fontFamily}", sans-serif`,
+            fontSource: overrides.fontFamily
+        }),
+        ...(overrides.fontSize !== undefined && { fontSize: overrides.fontSize }),
+        ...(overrides.fontWeight !== undefined && { fontWeight: overrides.fontWeight }),
+        ...(overrides.spacing !== undefined && { spacing: overrides.spacing }),
+        ...(overrides.borderRadius !== undefined && { borderRadius: overrides.borderRadius }),
+        ...(overrides.defaultInputSize !== undefined && { defaultInputSize: overrides.defaultInputSize }),
+        ...(overrides.shadow !== undefined && { shadow: { ...base.shadow, ...overrides.shadow } }),
+        ...(overrides.colors !== undefined && { colors: mergeColorRamps(base.colors, overrides.colors) }),
+        ...(overrides.actions !== undefined && { actions: overrides.actions }),
+        ...(overrides.headingFontFamily !== undefined && {
+            headingFontFamily: `"${overrides.headingFontFamily}", sans-serif`,
+            headingFontSource: overrides.headingFontFamily
+        }),
+        ...(overrides.typeScale !== undefined && { typeScale: overrides.typeScale }),
+        ...(overrides.radiusScale !== undefined && { radiusScale: overrides.radiusScale }),
+        ...(overrides.spacingScale !== undefined && { spacingScale: overrides.spacingScale })
+    };
+}
+/* ---- Form token'ları (`form.ts` kopyası) ---- */
+export function formTokens(palette, t) {
+    return {
+        color: {
+            default: palette.text.primary,
+            disabled: palette.text.disabled,
+            placeholder: palette.text.disabled,
+            invalid: palette.status.error
+        },
+        background: {
+            default: palette.background.surface,
+            disabled: palette.background.disabled,
+            readonly: palette.background.readonly
+        },
+        border: {
+            // Odak halkası temayı izler: accent'i turuncu yapan projede mavi halka kalmamalı.
+            default: palette.border.primary,
+            focus: palette.accent.hover,
+            disabled: palette.border.primary,
+            invalid: palette.status.error
+        },
+        fontFamily: t.fontFamily,
+        defaultSize: t.defaultInputSize,
+        fontSize: {
+            sm: `calc(${t.fontSize} * 0.9)`,
+            md: t.fontSize,
+            lg: `calc(${t.fontSize} * 1.125)`
+        },
+        radius: {
+            sm: t.borderRadius,
+            md: t.borderRadius,
+            lg: t.borderRadius
+        },
+        height: {
+            sm: `calc(${t.fontSize} * 2.25)`,
+            md: `calc(${t.fontSize} * 2.57)`,
+            lg: `calc(${t.fontSize} * 3.25)`
+        },
+        paddingX: {
+            sm: `calc(${t.spacing} * 0.8)`,
+            md: t.spacing,
+            lg: `calc(${t.spacing} * 1.2)`
+        },
+        label: {
+            color: palette.text.primary,
+            fontWeight: '600',
+            marginBottom: {
+                sm: `calc(${t.spacing} * 0.50)`,
+                md: `calc(${t.spacing} * 0.70)`,
+                lg: t.spacing
+            },
+            viewmodeMarginBottom: {
+                sm: `calc(${t.spacing} * 0.5)`,
+                md: `calc(${t.spacing} * 0.7)`,
+                lg: t.spacing
+            },
+            fontSize: {
+                sm: `calc(${t.fontSize} * 0.875)`,
+                md: t.fontSize,
+                lg: `calc(${t.fontSize} * 1.125)`
+            }
+        }
+    };
+}
+/**
+ * Gölge üçlüsü tek bir gölge tarifinden türer. `color` 7 karakterlik hex DEĞİLSE üçü de
+ * GÖRÜNMEZ bir gölgeye düşer ('red' yazmak gölgeyi kapatır) — THEME-004 bunu yakalar.
+ */
+export function shadowTokens(t) {
+    const { offsetX, offsetY, blur, spread, color, opacity } = t.shadow;
+    if (!color || color.length < 7) {
+        const fallback = '0px 0px 0px 0px rgba(0, 0, 0, 0)';
+        return { none: 'none', sm: fallback, md: fallback, lg: fallback };
+    }
+    const r = parseInt(color.slice(1, 3), 16) || 0;
+    const g = parseInt(color.slice(3, 5), 16) || 0;
+    const b = parseInt(color.slice(5, 7), 16) || 0;
+    const a = opacity / 100;
+    const smOffsetY = offsetY === 0 ? 0 : (offsetY > 0 ? Math.max(1, Math.round(offsetY * 0.25)) : Math.min(-1, Math.round(offsetY * 0.25)));
+    const smBlur = blur === 0 ? 0 : Math.max(1, Math.round(blur * 0.5));
+    const lgSpread = Math.max(-20, Math.min(20, Math.round(spread * 3)));
+    return {
+        none: 'none',
+        sm: `${offsetX}px ${smOffsetY}px ${smBlur}px 0px rgba(${r}, ${g}, ${b}, ${a})`,
+        md: `${offsetX}px ${offsetY}px ${blur}px ${spread}px rgba(${r}, ${g}, ${b}, ${a})`,
+        lg: `${offsetX}px ${Math.round(offsetY * 2.5)}px ${Math.round(blur * 2.5)}px ${lgSpread}px rgba(${r}, ${g}, ${b}, ${a})`
+    };
+}
+export function getContrastColor(hex) {
+    if (!hex || hex.length < 7)
+        return '#ffffff';
+    const r = parseInt(hex.slice(1, 3), 16) || 0;
+    const g = parseInt(hex.slice(3, 5), 16) || 0;
+    const b = parseInt(hex.slice(5, 7), 16) || 0;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+}
+/**
+ * Temanın yaydığı TÜM CSS değişkenlerini üreten saf şablon; `Theme.svelte`'nin tek görevi bunu
+ * satır içi style olarak basmaktır.
+ *
+ * Şablonun içindeki SEKMELER veridir (frontend'in çıktısıyla metin eşitliği parite testinin
+ * kilididir); kodun 2 boşluklu girintisine bakıp düzeltmeye çalışmayın.
+ */
+export function buildThemeStyle(palette, form, t, shadow, formDefaultSize) {
+    const colors = t.colors;
+    const actions = t.actions || {};
+    return `
+	--ng-font: ${t.fontFamily};
+	--ng-font-heading: ${t.headingFontFamily || t.fontFamily};
+	--ng-font-size: ${t.fontSize};
+	--ng-font-weight: ${t.fontWeight};
+	${buildTypeScaleVars(mergeTypeScale(t.typeScale))}
+	--ng-text-primary: ${palette.text.primary};
+	--ng-text-secondary: ${palette.text.secondary};
+	--ng-text-disabled: ${palette.text.disabled};
+	--ng-background-canvas: ${palette.background.canvas};
+	--ng-background-surface-alt: ${palette.background.surfaceAlt};
+	--ng-background-surface: ${palette.background.surface};
+	--ng-background-readonly: ${palette.background.readonly};
+	--ng-background-disabled: ${palette.background.disabled};
+	--ng-background-overlay: ${palette.background.overlay};
+	--ng-background-inverse: ${palette.background.inverse};
+	--ng-border-primary: ${palette.border.primary};
+	--ng-border-secondary: ${palette.border.secondary};
+
+	--ng-accent-primary: ${palette.accent.primary};
+	--ng-accent-hover: ${palette.accent.hover};
+	--ng-accent-muted: ${palette.accent.muted};
+	--ng-accent-subtle: ${palette.accent.subtle};
+	--ng-status-info: ${palette.status.info};
+	--ng-status-success: ${palette.status.success};
+	--ng-status-warning: ${palette.status.warning};
+	--ng-status-error: ${palette.status.error};
+
+	--ng-spacing: ${t.spacing};
+	--ng-spacing-small: calc(var(--ng-spacing) / 2);
+	--ng-spacing-large: calc(var(--ng-spacing) * 1.5);
+	${buildSpacingScaleVars(t.spacingScale)}
+	--ng-rounded: ${t.borderRadius};
+	${buildRadiusScaleVars(t.radiusScale)}
+
+	--ng-shadow-none: ${shadow.none};
+	--ng-shadow-sm: ${shadow.sm};
+	--ng-shadow-md: ${shadow.md};
+	--ng-shadow-lg: ${shadow.lg};
+
+	--ng-form-default-size: ${formDefaultSize};
+
+	--ng-form-color: ${form.color.default};
+	--ng-form-color-disabled: ${form.color.disabled};
+	--ng-form-color-placeholder: ${form.color.placeholder};
+	--ng-form-color-invalid: ${form.color.invalid};
+	--ng-form-background: color-mix(in srgb, ${form.background.default} 92%, white);
+	--ng-form-background-disabled: ${form.background.disabled};
+	--ng-form-background-readonly: ${form.background.readonly};
+	--ng-form-border: ${form.border.default};
+	--ng-form-border-focus: ${form.border.focus};
+	--ng-form-border-disabled: ${form.border.disabled};
+	--ng-form-border-invalid: ${form.border.invalid};
+	--ng-form-font-family: ${form.fontFamily};
+	--ng-form-font-size-sm: ${form.fontSize.sm};
+	--ng-form-font-size-md: ${form.fontSize.md};
+	--ng-form-font-size-lg: ${form.fontSize.lg};
+	--ng-form-radius-sm: ${form.radius.sm};
+	--ng-form-radius-md: ${form.radius.md};
+	--ng-form-radius-lg: ${form.radius.lg};
+	--ng-form-height-sm: ${form.height.sm};
+	--ng-form-height-md: ${form.height.md};
+	--ng-form-height-lg: ${form.height.lg};
+	--ng-form-padding-x-sm: ${form.paddingX.sm};
+	--ng-form-padding-x-md: ${form.paddingX.md};
+	--ng-form-padding-x-lg: ${form.paddingX.lg};
+	--ng-form-label-color: ${form.label.color};
+	--ng-form-label-font-weight: ${form.label.fontWeight};
+	--ng-form-label-font-size-sm: ${form.label.fontSize.sm};
+	--ng-form-label-font-size-md: ${form.label.fontSize.md};
+	--ng-form-label-font-size-lg: ${form.label.fontSize.lg};
+	--ng-form-label-margin-bottom-sm: ${form.label.marginBottom.sm};
+	--ng-form-label-margin-bottom-md: ${form.label.marginBottom.md};
+	--ng-form-label-margin-bottom-lg: ${form.label.marginBottom.lg};
+	--ng-form-label-viewmode-margin-bottom-sm: ${form.label.viewmodeMarginBottom.sm};
+	--ng-form-label-viewmode-margin-bottom-md: ${form.label.viewmodeMarginBottom.md};
+	--ng-form-label-viewmode-margin-bottom-lg: ${form.label.viewmodeMarginBottom.lg};
+
+	--ng-blue-50: ${colors.blue.b50};
+	--ng-blue-100: ${colors.blue.b100};
+	--ng-blue-150: ${colors.blue.b150};
+	--ng-blue-200: ${colors.blue.b200};
+	--ng-blue-300: ${colors.blue.b300};
+	--ng-blue-400: ${colors.blue.b400};
+	--ng-blue-500: ${colors.blue.b500};
+	--ng-blue-600: ${colors.blue.b600};
+	--ng-blue-700: ${colors.blue.b700};
+	--ng-blue-800: ${colors.blue.b800};
+	--ng-blue-900: ${colors.blue.b900};
+	--ng-red-50: ${colors.red.r50};
+	--ng-red-100: ${colors.red.r100};
+	--ng-red-150: ${colors.red.r150};
+	--ng-red-200: ${colors.red.r200};
+	--ng-red-500: ${colors.red.r500};
+	--ng-red-600: ${colors.red.r600};
+	--ng-red-700: ${colors.red.r700};
+	--ng-red-800: ${colors.red.r800};
+	--ng-red-900: ${colors.red.r900};
+	--ng-grey-100: ${colors.grey.r100};
+	--ng-grey-150: ${colors.grey.r150};
+	--ng-grey-200: ${colors.grey.r200};
+	--ng-grey-300: ${colors.grey.r300};
+	--ng-grey-400: ${colors.grey.r400};
+	--ng-grey-500: ${colors.grey.r500};
+	--ng-grey-600: ${colors.grey.r600};
+	--ng-grey-700: ${colors.grey.r700};
+	--ng-grey-800: ${colors.grey.r800};
+	--ng-grey-900: ${colors.grey.r900};
+	--ng-yellow-50: ${colors.yellow.r50};
+	--ng-yellow-100: ${colors.yellow.r100};
+	--ng-yellow-150: ${colors.yellow.r150};
+	--ng-yellow-200: ${colors.yellow.r200};
+	--ng-yellow-400: ${colors.yellow.r400};
+	--ng-yellow-500: ${colors.yellow.r500};
+	--ng-yellow-900: ${colors.yellow.r900};
+	--ng-green-50: ${colors.green.r50};
+	--ng-green-100: ${colors.green.r100};
+	--ng-green-150: ${colors.green.r150};
+	--ng-green-200: ${colors.green.r200};
+	--ng-green-500: ${colors.green.r500};
+	--ng-green-900: ${colors.green.r900};
+	--ng-purple-50: ${colors.purple.r50};
+	--ng-purple-100: ${colors.purple.r100};
+	--ng-purple-150: ${colors.purple.r150};
+	--ng-purple-200: ${colors.purple.r200};
+	--ng-purple-900: ${colors.purple.r900};
+	--ng-plump-50: ${colors.plump.r50};
+	--ng-plump-100: ${colors.plump.r100};
+	--ng-plump-150: ${colors.plump.r150};
+	--ng-plump-200: ${colors.plump.r200};
+	--ng-plump-900: ${colors.plump.r900};
+	--ng-teal-50: ${colors.teal.r50};
+	--ng-teal-100: ${colors.teal.r100};
+	--ng-teal-150: ${colors.teal.r150};
+	--ng-teal-200: ${colors.teal.r200};
+	--ng-teal-500: ${colors.teal.r500};
+	--ng-teal-600: ${colors.teal.r600};
+	--ng-teal-700: ${colors.teal.r700};
+	--ng-teal-800: ${colors.teal.r800};
+	--ng-teal-900: ${colors.teal.r900};
+	--ng-pink-50: ${colors.pink.r50};
+	--ng-pink-100: ${colors.pink.r100};
+	--ng-pink-150: ${colors.pink.r150};
+	--ng-pink-200: ${colors.pink.r200};
+	--ng-pink-500: ${colors.pink.r500};
+	--ng-pink-600: ${colors.pink.r600};
+	--ng-pink-700: ${colors.pink.r700};
+	--ng-pink-800: ${colors.pink.r800};
+	--ng-pink-900: ${colors.pink.r900};
+	--ng-cyan-50: ${colors.cyan.r50};
+	--ng-cyan-100: ${colors.cyan.r100};
+	--ng-cyan-150: ${colors.cyan.r150};
+	--ng-cyan-200: ${colors.cyan.r200};
+	--ng-cyan-500: ${colors.cyan.r500};
+	--ng-cyan-600: ${colors.cyan.r600};
+	--ng-cyan-700: ${colors.cyan.r700};
+	--ng-cyan-800: ${colors.cyan.r800};
+	--ng-cyan-900: ${colors.cyan.r900};
+	--ng-orange-50: ${colors.orange.r50};
+	--ng-orange-100: ${colors.orange.r100};
+	--ng-orange-150: ${colors.orange.r150};
+	--ng-orange-200: ${colors.orange.r200};
+	--ng-orange-500: ${colors.orange.r500};
+	--ng-orange-600: ${colors.orange.r600};
+	--ng-orange-700: ${colors.orange.r700};
+	--ng-orange-800: ${colors.orange.r800};
+	--ng-orange-900: ${colors.orange.r900};
+
+	--ng-action-gray: ${actions.gray || colors.grey.r900};
+	--ng-action-red: ${actions.red || colors.red.r600};
+	--ng-action-green: ${actions.green || colors.green.r500};
+	--ng-action-blue: ${actions.blue || palette.accent.primary};
+	--ng-action-teal: ${actions.teal || colors.teal.r600};
+	--ng-action-pink: ${actions.pink || colors.pink.r600};
+	--ng-action-purple: ${actions.purple || colors.purple.r900};
+	--ng-action-cyan: ${actions.cyan || colors.cyan.r600};
+	--ng-action-orange: ${actions.orange || colors.orange.r600};
+	--ng-action-yellow: ${actions.yellow || colors.yellow.r600};
+	--ng-action-white: ${actions.white || palette.background.surface};
+	--ng-action-black: ${actions.black || colors.grey.r900};
+	--ng-text-on-accent: ${getContrastColor(palette.accent.primary)};
+`;
+}
+/** Temanın yaydığı değişken adlarının tam listesi — elle tutulmaz, gerçek şablondan türer. */
+export function listThemeVarNames() {
+    const style = buildThemeStyle(WHITE_PALETTE, formTokens(WHITE_PALETTE, TOKENS), TOKENS, shadowTokens(TOKENS), TOKENS.defaultInputSize);
+    return [...new Set(style.match(/--ng-[\w-]+(?=:)/g) || [])];
+}
+/** `--ad: değer;` satırlarını sözlüğe çözer. */
+export function parseThemeStyle(style) {
+    const vars = {};
+    for (const match of style.matchAll(/(--ng-[\w-]+):\s*([^;]+);/g)) {
+        const [, name, value] = match;
+        if (name && value)
+            vars[name] = value.trim();
+    }
+    return vars;
+}
+/**
+ * Temanın belirli bir MODDAKİ karşılığı.
+ *
+ * Palet override'ları mod başına tutulur (`palette` / `paletteDark`): kayıtlı her tema TAM bir
+ * aydınlık palet taşıdığı için ortak bir küme karanlık modu aydınlık gösterirdi
+ * (`Theme.svelte`). Ziyaretçinin kendi tercihi (`theme-toggle` → localStorage) runtime'da
+ * projenin modunun önüne geçer; burada o kanal yoktur, `mode` parametresi onun yerini tutar.
+ */
+export function resolveTheme(theme, mode) {
+    const overrides = theme ?? {};
+    const effectiveMode = mode ?? (overrides.mode === 'dark' ? 'dark' : 'light');
+    const modePalette = effectiveMode === 'dark' ? DARK_PALETTE : WHITE_PALETTE;
+    const modeOverrides = effectiveMode === 'dark' ? overrides.paletteDark : overrides.palette;
+    const palette = modeOverrides ? mergePalette(modePalette, modeOverrides) : modePalette;
+    const tokens = mergeTokens(TOKENS, overrides);
+    const form = formTokens(palette, tokens);
+    const shadow = shadowTokens(tokens);
+    const style = buildThemeStyle(palette, form, tokens, shadow, tokens.defaultInputSize);
+    return { mode: effectiveMode, palette, tokens, form, shadow, cssVars: parseThemeStyle(style) };
+}
+/** İki çözüm arasındaki değişken farkı; eklenen/silinen değişken `null` ucuyla görünür. */
+export function diffCssVars(before, after) {
+    const changes = {};
+    for (const name of new Set([...Object.keys(before), ...Object.keys(after)])) {
+        const from = before[name] ?? null;
+        const to = after[name] ?? null;
+        if (from !== to)
+            changes[name] = { from, to };
+    }
+    return changes;
+}
+/* ---- Panel sabitleri (studio `theme-settings/` kopyası) ---- */
+/**
+ * `Theme.svelte` yazı tipi adını olduğu gibi Google Fonts'a gönderir: listede olmayan bir ad
+ * sessizce sans-serif'e düşer (THEME-008 uyarısı bu listeye bakar).
+ */
+export const GOOGLE_FONTS = [
+    'ABeeZee',
+    'Abel',
+    'Abril Fatface',
+    'Acme',
+    'Alata',
+    'Albert Sans',
+    'Alegreya',
+    'Alegreya Sans',
+    'Alfa Slab One',
+    'Alice',
+    'Amatic SC',
+    'Amiri',
+    'Antic Slab',
+    'Anton',
+    'Archivo',
+    'Archivo Black',
+    'Archivo Narrow',
+    'Arimo',
+    'Arsenal',
+    'Asap',
+    'Asap Condensed',
+    'Assistant',
+    'Barlow',
+    'Barlow Condensed',
+    'Barlow Semi Condensed',
+    'Be Vietnam Pro',
+    'Bebas Neue',
+    'Bitter',
+    'Black Ops One',
+    'Bodoni Moda',
+    'Bree Serif',
+    'Cabin',
+    'Cairo',
+    'Cantarell',
+    'Cardo',
+    'Catamaran',
+    'Caveat',
+    'Chakra Petch',
+    'Chivo',
+    'Cinzel',
+    'Comfortaa',
+    'Commissioner',
+    'Concert One',
+    'Cormorant',
+    'Cormorant Garamond',
+    'Crimson Pro',
+    'Crimson Text',
+    'DM Mono',
+    'DM Sans',
+    'DM Serif Display',
+    'DM Serif Text',
+    'Dancing Script',
+    'Domine',
+    'Dosis',
+    'EB Garamond',
+    'Encode Sans',
+    'Exo 2',
+    'Figtree',
+    'Fira Code',
+    'Fira Sans',
+    'Fira Sans Condensed',
+    'Fjalla One',
+    'Francois One',
+    'Frank Ruhl Libre',
+    'Gelasio',
+    'Gloria Hallelujah',
+    'Gothic A1',
+    'Great Vibes',
+    'Heebo',
+    'Hind',
+    'Hind Siliguri',
+    'IBM Plex Mono',
+    'IBM Plex Sans',
+    'IBM Plex Serif',
+    'Inconsolata',
+    'Inter',
+    'Inter Tight',
+    'JetBrains Mono',
+    'Josefin Sans',
+    'Josefin Slab',
+    'Jost',
+    'Kalam',
+    'Kanit',
+    'Karla',
+    'Khand',
+    'Lato',
+    'League Spartan',
+    'Lexend',
+    'Libre Baskerville',
+    'Libre Franklin',
+    'Lilita One',
+    'Lora',
+    'M PLUS Rounded 1c',
+    'Manrope',
+    'Marcellus',
+    'Maven Pro',
+    'Merriweather',
+    'Merriweather Sans',
+    'Montserrat',
+    'Montserrat Alternates',
+    'Mukta',
+    'Mulish',
+    'Nanum Gothic',
+    'Nanum Myeongjo',
+    'Neuton',
+    'Noticia Text',
+    'Noto Sans',
+    'Noto Sans JP',
+    'Noto Sans KR',
+    'Noto Serif',
+    'Nunito',
+    'Nunito Sans',
+    'Old Standard TT',
+    'Onest',
+    'Open Sans',
+    'Oswald',
+    'Outfit',
+    'Overpass',
+    'Oxygen',
+    'PT Sans',
+    'PT Serif',
+    'Pacifico',
+    'Pathway Gothic One',
+    'Philosopher',
+    'Play',
+    'Playfair Display',
+    'Plus Jakarta Sans',
+    'Poppins',
+    'Prompt',
+    'Public Sans',
+    'Quicksand',
+    'Rajdhani',
+    'Raleway',
+    'Readex Pro',
+    'Red Hat Display',
+    'Roboto',
+    'Roboto Condensed',
+    'Roboto Flex',
+    'Roboto Mono',
+    'Roboto Slab',
+    'Rubik',
+    'Russo One',
+    'Saira',
+    'Satisfy',
+    'Sawarabi Gothic',
+    'Secular One',
+    'Shadows Into Light',
+    'Signika',
+    'Signika Negative',
+    'Silkscreen',
+    'Slabo 27px',
+    'Sora',
+    'Source Code Pro',
+    'Source Sans 3',
+    'Source Serif 4',
+    'Space Grotesk',
+    'Space Mono',
+    'Spectral',
+    'Teko',
+    'Titillium Web',
+    'Ubuntu',
+    'Ubuntu Condensed',
+    'Ubuntu Mono',
+    'Urbanist',
+    'Varela Round',
+    'Vollkorn',
+    'Work Sans',
+    'Yanone Kaffeesatz',
+    'Yellowtail',
+    'Zen Kaku Gothic New',
+    'Zilla Slab',
+];
+/**
+ * Preset adı `$preset` içinde ham metin olarak taşınır ve doğrudan bir nesne anahtarı olur.
+ * Boş ad, kırpılmamış ad ve `$` ile başlayan ad yasak: sonuncusu çözümleyicinin sihirli
+ * anahtarıyla karışırdı.
+ */
+export function isValidPresetName(name) {
+    return name.length > 0 && name === name.trim() && !name.startsWith('$') && name.length <= 40;
+}
+/** Bir tipin taşıyabileceği en fazla versiyon sayısı; panel dolduğunda düğmeyi hiç çizmez. */
+export const MAX_PRESET_VERSIONS = 5;
+/** Yeni eklenen bir bileşen preset'inin ilk versiyonunun adı. */
+export const FIRST_VERSION_NAME = 'V1';
+/** Eski `componentStyles` kayıtları sarılırken kullanılan versiyon adı. */
+export const DEFAULT_VERSION_NAME = 'Default';
+/**
+ * Versiyonun `appearance` zarfının TANIDIĞI alanlar. Kanal ölçü, hizalama ve z-index de taşır;
+ * onlar bir TİPİN varsayılanı değil o ÖRNEĞİN ızgaradaki geometrisidir ve temada saklanmaları
+ * yanlış olurdu.
+ */
+export const SPACING_KEYS = [
+    'marginType', 'marginValue', 'marginValues', 'paddingType', 'paddingValue', 'paddingValues'
+];