@mesgflow/ui-kit 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesgflow/ui-kit",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Independent Angular component kit (button, select, dialog, table, sidebar, and more) built on a Tailwind v4 design token system. See README.md for setup and prerequisites.",
   "license": "MIT",
   "author": "Hurdeniz YENER",
@@ -52,9 +52,18 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
+  "ng-update": {
+    "migrations": "./schematics/migration.json",
+    "packageGroup": [
+      "@mesgflow/ui-kit"
+    ]
+  },
   "publishConfig": {
-    "access": "public",
-    "provenance": true
+    "access": "public"
   },
   "engines": {
     "node": ">=22"
@@ -72,6 +81,9 @@
       "style": "./tokens/*",
       "default": "./tokens/*"
     },
+    "./tokens.json": {
+      "default": "./tokens.json"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -83,10 +95,18 @@
       "types": "./types/mesgflow-ui-kit-accordion.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-accordion.mjs"
     },
+    "./agenda": {
+      "types": "./types/mesgflow-ui-kit-agenda.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-agenda.mjs"
+    },
     "./alert": {
       "types": "./types/mesgflow-ui-kit-alert.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-alert.mjs"
     },
+    "./aspect-ratio": {
+      "types": "./types/mesgflow-ui-kit-aspect-ratio.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-aspect-ratio.mjs"
+    },
     "./avatar": {
       "types": "./types/mesgflow-ui-kit-avatar.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-avatar.mjs"
@@ -103,6 +123,10 @@
       "types": "./types/mesgflow-ui-kit-banner.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-banner.mjs"
     },
+    "./blocks": {
+      "types": "./types/mesgflow-ui-kit-blocks.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-blocks.mjs"
+    },
     "./box-input": {
       "types": "./types/mesgflow-ui-kit-box-input.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-box-input.mjs"
@@ -127,6 +151,10 @@
       "types": "./types/mesgflow-ui-kit-card.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-card.mjs"
     },
+    "./carousel": {
+      "types": "./types/mesgflow-ui-kit-carousel.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-carousel.mjs"
+    },
     "./chart": {
       "types": "./types/mesgflow-ui-kit-chart.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-chart.mjs"
@@ -171,6 +199,10 @@
       "types": "./types/mesgflow-ui-kit-core.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-core.mjs"
     },
+    "./countdown": {
+      "types": "./types/mesgflow-ui-kit-countdown.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-countdown.mjs"
+    },
     "./date-picker": {
       "types": "./types/mesgflow-ui-kit-date-picker.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-date-picker.mjs"
@@ -187,6 +219,10 @@
       "types": "./types/mesgflow-ui-kit-divider.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-divider.mjs"
     },
+    "./drawer": {
+      "types": "./types/mesgflow-ui-kit-drawer.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-drawer.mjs"
+    },
     "./dropzone": {
       "types": "./types/mesgflow-ui-kit-dropzone.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-dropzone.mjs"
@@ -199,6 +235,10 @@
       "types": "./types/mesgflow-ui-kit-field.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-field.mjs"
     },
+    "./file-upload": {
+      "types": "./types/mesgflow-ui-kit-file-upload.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-file-upload.mjs"
+    },
     "./hover-card": {
       "types": "./types/mesgflow-ui-kit-hover-card.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-hover-card.mjs"
@@ -211,6 +251,14 @@
       "types": "./types/mesgflow-ui-kit-icon.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-icon.mjs"
     },
+    "./icons-lucide": {
+      "types": "./types/mesgflow-ui-kit-icons-lucide.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-icons-lucide.mjs"
+    },
+    "./inline-edit": {
+      "types": "./types/mesgflow-ui-kit-inline-edit.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-inline-edit.mjs"
+    },
     "./input": {
       "types": "./types/mesgflow-ui-kit-input.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-input.mjs"
@@ -219,14 +267,34 @@
       "types": "./types/mesgflow-ui-kit-kbd.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-kbd.mjs"
     },
+    "./lightbox": {
+      "types": "./types/mesgflow-ui-kit-lightbox.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-lightbox.mjs"
+    },
     "./link": {
       "types": "./types/mesgflow-ui-kit-link.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-link.mjs"
     },
+    "./listbox": {
+      "types": "./types/mesgflow-ui-kit-listbox.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-listbox.mjs"
+    },
+    "./mention": {
+      "types": "./types/mesgflow-ui-kit-mention.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-mention.mjs"
+    },
     "./menu": {
       "types": "./types/mesgflow-ui-kit-menu.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-menu.mjs"
     },
+    "./nav-menu": {
+      "types": "./types/mesgflow-ui-kit-nav-menu.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-nav-menu.mjs"
+    },
+    "./notification-center": {
+      "types": "./types/mesgflow-ui-kit-notification-center.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-notification-center.mjs"
+    },
     "./number-input": {
       "types": "./types/mesgflow-ui-kit-number-input.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-number-input.mjs"
@@ -255,6 +323,10 @@
       "types": "./types/mesgflow-ui-kit-progress.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-progress.mjs"
     },
+    "./qr-code": {
+      "types": "./types/mesgflow-ui-kit-qr-code.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-qr-code.mjs"
+    },
     "./radio": {
       "types": "./types/mesgflow-ui-kit-radio.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-radio.mjs"
@@ -291,10 +363,18 @@
       "types": "./types/mesgflow-ui-kit-slider.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-slider.mjs"
     },
+    "./sortable": {
+      "types": "./types/mesgflow-ui-kit-sortable.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-sortable.mjs"
+    },
     "./spinner": {
       "types": "./types/mesgflow-ui-kit-spinner.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-spinner.mjs"
     },
+    "./split-button": {
+      "types": "./types/mesgflow-ui-kit-split-button.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-split-button.mjs"
+    },
     "./splitter": {
       "types": "./types/mesgflow-ui-kit-splitter.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-splitter.mjs"
@@ -359,6 +439,10 @@
       "types": "./types/mesgflow-ui-kit-tour.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-tour.mjs"
     },
+    "./transfer-list": {
+      "types": "./types/mesgflow-ui-kit-transfer-list.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-transfer-list.mjs"
+    },
     "./tree": {
       "types": "./types/mesgflow-ui-kit-tree.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-tree.mjs"
@@ -366,6 +450,10 @@
     "./tree-select": {
       "types": "./types/mesgflow-ui-kit-tree-select.d.ts",
       "default": "./fesm2022/mesgflow-ui-kit-tree-select.mjs"
+    },
+    "./virtual-list": {
+      "types": "./types/mesgflow-ui-kit-virtual-list.d.ts",
+      "default": "./fesm2022/mesgflow-ui-kit-virtual-list.mjs"
     }
   },
   "module": "fesm2022/mesgflow-ui-kit.mjs",

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds @mesgflow/ui-kit to an Angular project: peer dependencies, Tailwind v4 + preset, provideMesgflowUi() and the flash-free dark mode script.",
+      "factory": "./ng-add/index.cjs#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/migration.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "migration-v0-7": {
+      "version": "0.7.0",
+      "description": "Rewrites the old @mesgflow/ui package name and pre-0.7 input names/classes to their current form.",
+      "factory": "./migrations/v0-7.cjs#migrateV07"
+    }
+  }
+}

package/schematics/migrations/v0-7.cjs

@@ -0,0 +1,70 @@
+// `ng update @mesgflow/ui-kit` → 0.7.0 göçü.
+//
+// Allowlist tabanlı, yalnızca kitin KENDİ eski adlarını hedefler (tüketicinin
+// kendi `severity` prop'u ya da `app-*` bileşenleri gibi ilgisiz metinlere
+// dokunmaz — bkz. scripts/codemod-prefix.mjs'teki aynı doktrin):
+//
+// - Eski paket adı: `'@mesgflow/ui'` / `'@mesgflow/ui/<entry>'` import'ları
+//   → `'@mesgflow/ui-kit'` (0.6.0'da yeniden adlandırıldı).
+// - Button `severity="…"` / `[severity]` → `tone` (0.2.0'da taşındı).
+// - Onay dialoğu `tone: 'question'` → `'neutral'`.
+// - Tonal dolgu için eski düz rampa çiftleri → tint rol token'ları;
+//   `text-fg-on-success|warning` → `text-success|warning-fill-fg`.
+// - `hover:bg-surface-alt` → `hover:bg-state-hover` (renkli/cam yüzeylerde
+//   doğru görünen durum katmanı; kitin kendisi 0.7.0'da aynı geçişi yaptı).
+
+'use strict';
+
+const RULES = [
+  {
+    pattern: /(['"])@mesgflow\/ui(\/[\w-]+)?\1/g,
+    replacement: (_m, q, sub) => `${q}@mesgflow/ui-kit${sub ?? ''}${q}`,
+  },
+  { pattern: /\bseverity="/g, replacement: 'tone="' },
+  { pattern: /\[severity\]="/g, replacement: '[tone]="' },
+  { pattern: /\btone="question"/g, replacement: 'tone="neutral"' },
+  { pattern: /\btone:\s*'question'/g, replacement: "tone: 'neutral'" },
+  { pattern: /\btone:\s*"question"/g, replacement: 'tone: "neutral"' },
+  { pattern: /\btext-fg-on-success\b/g, replacement: 'text-success-fill-fg' },
+  { pattern: /\btext-fg-on-warning\b/g, replacement: 'text-warning-fill-fg' },
+  {
+    pattern:
+      /\bbg-(primary|success|warning|danger|info)-50 text-\1-700 dark:bg-\1-900 dark:text-\1-300\b/g,
+    replacement: 'bg-$1-tint text-$1-tint-fg',
+  },
+  {
+    pattern: /\bbg-(primary|success|warning|danger|info)-50 dark:bg-\1-900\b/g,
+    replacement: 'bg-$1-tint',
+  },
+  { pattern: /\bhover:bg-surface-alt\b/g, replacement: 'hover:bg-state-hover' },
+];
+
+const EXTENSIONS = /\.(ts|html|css|scss)$/;
+const SKIP = /(^|\/)(node_modules|dist|\.angular|out-tsc|coverage)\//;
+
+/** Saf dönüşüm — test edilebilir olsun diye ayrı. */
+function migrateSource(source) {
+  let next = source;
+  for (const rule of RULES) next = next.replace(rule.pattern, rule.replacement);
+  return next;
+}
+
+function migrateV07() {
+  return (tree, context) => {
+    let changed = 0;
+    tree.visit((path) => {
+      if (!EXTENSIONS.test(path) || SKIP.test(path)) return;
+      const buffer = tree.read(path);
+      if (!buffer) return;
+      const source = buffer.toString('utf-8');
+      const next = migrateSource(source);
+      if (next !== source) {
+        tree.overwrite(path, next);
+        changed++;
+      }
+    });
+    context.logger.info(`@mesgflow/ui-kit 0.7.0 migration: updated ${changed} file(s).`);
+  };
+}
+
+module.exports = { migrateV07, migrateSource };

package/schematics/ng-add/index.cjs

@@ -0,0 +1,234 @@
+// `ng add @mesgflow/ui-kit` — bir Angular uygulamasını kite hazırlar:
+//
+// 1. Eksik peer bağımlılıkları (sürümler paketin kendi package.json'undan)
+//    + Tailwind v4/PostCSS + isteğe bağlı font yığını package.json'a eklenir.
+// 2. Global stil dosyasına `@import 'tailwindcss';` (yoksa) ve
+//    `@import '@mesgflow/ui-kit/preset.css';` (+ fontlar) eklenir;
+//    `.postcssrc.json` yoksa oluşturulur.
+// 3. `app.config.ts` providers'ına `provideMesgflowUi()` (Türkçe seçildiyse
+//    `mfLabelsTr` + date-fns `tr` yereliyle) eklenir.
+// 4. `index.html` <head>'ine koyu mod flaşını önleyen satır içi betik
+//    (`colorModeInitScript()` çıktısının aynısı) eklenir.
+//
+// Her adım idempotent: ikinci kez çalıştırmak hiçbir şeyi çoğaltmaz.
+// Düz CommonJS — derleme adımı gerekmez, ng-packagr olduğu gibi kopyalar.
+
+'use strict';
+
+const { chain, SchematicsException } = require('@angular-devkit/schematics');
+const { NodePackageInstallTask } = require('@angular-devkit/schematics/tasks');
+
+const KIT_PACKAGE = '@mesgflow/ui-kit';
+const FONT_PACKAGES = [
+  '@fontsource-variable/inter',
+  '@fontsource-variable/space-grotesk',
+  '@fontsource-variable/jetbrains-mono',
+];
+const TAILWIND_PACKAGES = {
+  tailwindcss: '^4.1.12',
+  '@tailwindcss/postcss': '^4.1.12',
+  postcss: '^8.5.3',
+};
+/** `theming/color-mode.ts` `colorModeInitScript()` varsayılanlarıyla AYNI çıktı. */
+const DARK_MODE_SCRIPT =
+  '(function(){try{var m=localStorage.getItem("mf-color-mode")||"system";' +
+  "var d=m==='dark'||(m==='system'&&matchMedia('(prefers-color-scheme: dark)').matches);" +
+  "var r=document.documentElement;r.classList.toggle('dark',d);r.style.colorScheme=d?'dark':'light';}catch(e){}})();";
+
+function kitManifest() {
+  try {
+    return require('../../package.json');
+  } catch {
+    return { version: 'latest', peerDependencies: {} };
+  }
+}
+
+function readJson(tree, path) {
+  const buffer = tree.read(path);
+  if (!buffer) throw new SchematicsException(`${path} not found.`);
+  return JSON.parse(buffer.toString('utf-8'));
+}
+
+function writeJson(tree, path, value) {
+  tree.overwrite(path, JSON.stringify(value, null, 2) + '\n');
+}
+
+function resolveProject(tree, name) {
+  const workspace = readJson(tree, 'angular.json');
+  const projects = workspace.projects || {};
+  const projectName =
+    name && projects[name]
+      ? name
+      : Object.keys(projects).find((key) => projects[key].projectType === 'application');
+  if (!projectName) throw new SchematicsException('No application project found in angular.json.');
+  const project = projects[projectName];
+  const root = project.root ? `${project.root.replace(/\/$/, '')}/` : '';
+  const sourceRoot = project.sourceRoot || `${root}src`;
+  const buildOptions = (project.architect || project.targets || {}).build?.options || {};
+  return { projectName, root, sourceRoot, buildOptions };
+}
+
+function addDependencies(options) {
+  return (tree, context) => {
+    const pkg = readJson(tree, 'package.json');
+    pkg.dependencies = pkg.dependencies || {};
+    const all = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+    const manifest = kitManifest();
+    const wanted = { [KIT_PACKAGE]: `^${manifest.version}` };
+    for (const [name, range] of Object.entries(manifest.peerDependencies || {})) {
+      if (FONT_PACKAGES.includes(name) && !options.fonts) continue;
+      wanted[name] = range;
+    }
+    Object.assign(wanted, TAILWIND_PACKAGES);
+    let added = 0;
+    for (const [name, range] of Object.entries(wanted)) {
+      if (all[name]) continue;
+      pkg.dependencies[name] = range;
+      added++;
+    }
+    pkg.dependencies = Object.fromEntries(
+      Object.entries(pkg.dependencies).sort(([a], [b]) => a.localeCompare(b)),
+    );
+    writeJson(tree, 'package.json', pkg);
+    if (added && !options.skipInstall) context.addTask(new NodePackageInstallTask());
+    context.logger.info(`✔ package.json: added ${added} dependencies.`);
+  };
+}
+
+function stylesFile(tree, project) {
+  const styles = project.buildOptions.styles || [];
+  const first = styles
+    .map((s) => (typeof s === 'string' ? s : s.input))
+    .find((s) => /\.css$/.test(s));
+  if (first) return first;
+  const guess = `${project.sourceRoot}/styles.css`;
+  return tree.exists(guess) ? guess : null;
+}
+
+function addStyles(options, projectRef) {
+  return (tree, context) => {
+    const project = projectRef();
+    const path = stylesFile(tree, project);
+    if (!path) {
+      context.logger.warn(
+        "⚠ No global .css stylesheet found — add `@import '@mesgflow/ui-kit/preset.css';` yourself (Tailwind v4 needs a CSS entry, not Sass).",
+      );
+      return;
+    }
+    const source = tree.exists(path) ? tree.read(path).toString('utf-8') : '';
+    if (source.includes('@mesgflow/ui-kit/preset.css')) {
+      context.logger.info(`✔ ${path}: preset already imported.`);
+      return;
+    }
+    const lines = source.split('\n');
+    const kitLines = ["@import '@mesgflow/ui-kit/preset.css';"];
+    if (options.fonts) kitLines.push(...FONT_PACKAGES.map((p) => `@import '${p}';`));
+    const lastTailwind = lines.reduce(
+      (last, line, index) => (/^@import\s+['"]tailwindcss/.test(line.trim()) ? index : last),
+      -1,
+    );
+    if (lastTailwind >= 0) lines.splice(lastTailwind + 1, 0, ...kitLines);
+    else lines.unshift("@import 'tailwindcss';", ...kitLines, '');
+    tree.exists(path)
+      ? tree.overwrite(path, lines.join('\n'))
+      : tree.create(path, lines.join('\n'));
+    context.logger.info(`✔ ${path}: imported Tailwind + the kit preset.`);
+
+    if (
+      !tree.exists('.postcssrc.json') &&
+      !tree.exists('postcss.config.js') &&
+      !tree.exists('postcss.config.mjs')
+    ) {
+      writeJsonNew(tree, '.postcssrc.json', { plugins: { '@tailwindcss/postcss': {} } });
+      context.logger.info('✔ Created .postcssrc.json (@tailwindcss/postcss).');
+    }
+  };
+}
+
+function writeJsonNew(tree, path, value) {
+  tree.create(path, JSON.stringify(value, null, 2) + '\n');
+}
+
+function addProvider(options, projectRef) {
+  return (tree, context) => {
+    const project = projectRef();
+    const path = `${project.sourceRoot}/app/app.config.ts`;
+    if (!tree.exists(path)) {
+      context.logger.warn(
+        `⚠ ${path} not found — add \`provideMesgflowUi()\` to your providers (import from '${KIT_PACKAGE}').`,
+      );
+      return;
+    }
+    let source = tree.read(path).toString('utf-8');
+    if (source.includes('provideMesgflowUi')) {
+      context.logger.info(`✔ ${path}: provideMesgflowUi already present.`);
+      return;
+    }
+    const providersAt = source.search(/providers\s*:\s*\[/);
+    if (providersAt < 0) {
+      context.logger.warn(
+        `⚠ ${path}: no providers array found — add provideMesgflowUi() manually.`,
+      );
+      return;
+    }
+    const call =
+      options.locale === 'tr'
+        ? 'provideMesgflowUi({ labels: mfLabelsTr, dateLocale: tr })'
+        : 'provideMesgflowUi()';
+    const bracket = source.indexOf('[', providersAt) + 1;
+    source = `${source.slice(0, bracket)}\n    ${call},${source.slice(bracket)}`;
+    const imports = [`import { provideMesgflowUi } from '${KIT_PACKAGE}';`];
+    if (options.locale === 'tr') {
+      imports.push(`import { mfLabelsTr } from '${KIT_PACKAGE}/i18n/tr';`);
+      imports.push(`import { tr } from 'date-fns/locale';`);
+    }
+    const lastImport = [...source.matchAll(/^import[\s\S]*?;\s*$/gm)].pop();
+    const insertAt = lastImport ? lastImport.index + lastImport[0].length : 0;
+    source = `${source.slice(0, insertAt)}\n${imports.join('\n')}${source.slice(insertAt)}`;
+    tree.overwrite(path, source);
+    context.logger.info(`✔ ${path}: added ${call}.`);
+  };
+}
+
+function addDarkModeScript(options, projectRef) {
+  return (tree, context) => {
+    if (!options.darkModeScript) return;
+    const project = projectRef();
+    const index = project.buildOptions.index;
+    const path =
+      (typeof index === 'string' ? index : index?.input) || `${project.sourceRoot}/index.html`;
+    if (!tree.exists(path)) {
+      context.logger.warn(`⚠ ${path} not found — dark mode script not added.`);
+      return;
+    }
+    const html = tree.read(path).toString('utf-8');
+    if (html.includes('mf-color-mode')) return;
+    if (!html.includes('</head>')) return;
+    tree.overwrite(
+      path,
+      html.replace('</head>', `  <script>${DARK_MODE_SCRIPT}</script>\n  </head>`),
+    );
+    context.logger.info(`✔ ${path}: added the dark mode boot script (same key as MfColorMode).`);
+  };
+}
+
+function ngAdd(options) {
+  let cached = null;
+  const projectRef = () => cached;
+  return chain([
+    (tree) => {
+      cached = resolveProject(tree, options.project);
+    },
+    addDependencies(options),
+    addStyles(options, projectRef),
+    addProvider(options, projectRef),
+    addDarkModeScript(options, projectRef),
+    (_tree, context) => {
+      context.logger.info(
+        `\n@mesgflow/ui-kit is ready. Try: import { Button } from '${KIT_PACKAGE}/button'; → <button mfButton>Save</button>`,
+      );
+    },
+  ]);
+}
+
+module.exports = { ngAdd, DARK_MODE_SCRIPT };

package/schematics/ng-add/schema.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "MesgflowUiKitNgAdd",
+  "title": "@mesgflow/ui-kit ng-add",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The application project to set up (defaults to the first application).",
+      "$default": { "$source": "projectName" }
+    },
+    "locale": {
+      "type": "string",
+      "enum": ["en", "tr"],
+      "default": "en",
+      "description": "Language of the kit's built-in texts.",
+      "x-prompt": {
+        "message": "Which language should the kit's built-in texts use?",
+        "type": "list",
+        "items": [
+          { "value": "en", "label": "English" },
+          { "value": "tr", "label": "Türkçe" }
+        ]
+      }
+    },
+    "fonts": {
+      "type": "boolean",
+      "default": true,
+      "description": "Install and import the kit's font stack (Inter, Space Grotesk, JetBrains Mono).",
+      "x-prompt": "Use the kit's font stack (Inter, Space Grotesk, JetBrains Mono)?"
+    },
+    "darkModeScript": {
+      "type": "boolean",
+      "default": true,
+      "description": "Add the inline script that applies dark mode before Angular boots (no white flash)."
+    },
+    "skipInstall": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not run the package manager after updating package.json."
+    }
+  }
+}

package/tokens/color.css

@@ -691,3 +691,99 @@
     }
   }
 }
+
+/*
+ * Marka yüzeyleri (v0.7) — hero/pazarlama/boş-durum alanları için. Rampa
+ * basamaklarına `var()` ile bağlı: `applyMfTheme({ accent })` markayı
+ * değiştirince gradyanlar da otomatik takip eder.
+ * - `bg-brand-gradient`  dolu marka yüzeyi (CTA bandı, avatar, logo zemini)
+ * - `bg-brand-glow`      sayfa tepesinde yumuşak marka ışıması (hero arka planı)
+ * - `text-brand-gradient` gradyan metin (başlık vurgusu) — `bg-clip-text`
+ * - `bg-grid`            ince ızgara dokusu (hero/landing zemini), maske ile söner
+ */
+@layer base {
+  :root,
+  .light {
+    --mf-gradient-brand: linear-gradient(
+      135deg,
+      var(--color-primary-500) 0%,
+      var(--color-primary-700) 55%,
+      var(--color-primary-900) 100%
+    );
+    --mf-gradient-text: linear-gradient(
+      120deg,
+      var(--color-primary-700) 0%,
+      var(--color-primary-500) 50%,
+      var(--color-info-600, var(--color-primary-600)) 100%
+    );
+    --mf-glow-brand: radial-gradient(
+      60% 55% at 50% 0%,
+      color-mix(in srgb, var(--color-primary-300) 45%, transparent) 0%,
+      transparent 100%
+    );
+    --mf-grid-line: color-mix(in srgb, var(--color-primary-900) 6%, transparent);
+  }
+
+  .dark {
+    --mf-gradient-brand: linear-gradient(
+      135deg,
+      var(--color-primary-300) 0%,
+      var(--color-primary-500) 50%,
+      var(--color-primary-700) 100%
+    );
+    --mf-gradient-text: linear-gradient(
+      120deg,
+      var(--color-primary-200) 0%,
+      var(--color-primary-400) 50%,
+      var(--color-info-400, var(--color-primary-300)) 100%
+    );
+    --mf-glow-brand: radial-gradient(
+      60% 55% at 50% 0%,
+      color-mix(in srgb, var(--color-primary-500) 22%, transparent) 0%,
+      transparent 100%
+    );
+    --mf-grid-line: color-mix(in srgb, var(--color-primary-100) 6%, transparent);
+  }
+}
+
+@utility bg-brand-gradient {
+  background-image: var(--mf-gradient-brand);
+}
+
+@utility bg-brand-glow {
+  background-image: var(--mf-glow-brand);
+}
+
+@utility text-brand-gradient {
+  background-image: var(--mf-gradient-text);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  @media (forced-colors: active) {
+    color: CanvasText;
+    background-image: none;
+  }
+}
+
+@utility bg-grid {
+  background-image:
+    linear-gradient(to right, var(--mf-grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--mf-grid-line) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
+}
+
+/*
+ * `bg-brand-deep` — üzerinde BEYAZ metin taşıyan marka yüzeyi (CTA bandı,
+ * giriş ekranı marka paneli). `bg-brand-gradient` koyu modda açık basamaklara
+ * kayar (üstünde koyu metin için); bu ise iki modda da derin kalır —
+ * beyaz metin her iki temada AA sağlar.
+ */
+@utility bg-brand-deep {
+  background-image: linear-gradient(
+    135deg,
+    var(--color-primary-700) 0%,
+    var(--color-primary-900) 60%,
+    var(--color-primary-950) 100%
+  );
+}