chore: initial DSMMG v0.2 — refonte architecturale complète

Mise en place du Design System ManageMate Group v0.2 — refonte du
système de tokens (préfixe --mmg-color-*), 9 presets accent
user-themable validés WCAG AA, overlays Radix UI + Floating UI,
Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight,
DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/
TS/Figma/Tailwind v3 et v4.

- 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons}
- 62 composants React headless-first (Sheet, HoverCard, ContextMenu,
  Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader,
  MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…)
- Lint contraste WCAG : 37/37 paires AA, branché CI
- Toast pile Sonner-style avec ResizeObserver
- Theming user (9 presets) sans casser sémantique fixe
- Identité Synapse (rose #D12B6A) préservée

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

storybook/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  staticDirs: ["../public"],
+};
+export default config;

storybook/.storybook/preview.css

@@ -0,0 +1,3 @@
+/* Override le fond Storybook pour utiliser nos tokens */
+body { font-family: var(--mmg-font-sans); }
+.docs-story { background: var(--mmg-color-bg-page); }

storybook/.storybook/preview.ts

@@ -0,0 +1,126 @@
+import type { Preview } from "@storybook/react";
+import "@managemate/css";
+import "@managemate/icons";
+import "./preview.css";
+
+const preview: Preview = {
+  parameters: {
+    layout: "padded",
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "page",
+      values: [
+        { name: "page", value: "var(--mmg-color-bg-page)" },
+        { name: "surface", value: "var(--mmg-color-bg-surface)" },
+        { name: "white", value: "#FFFFFF" },
+        { name: "dark", value: "#0B0D14" },
+      ],
+    },
+    a11y: {
+      // axe-core configuration. WCAG 2.1 AA + RGAA tags.
+      config: {
+        rules: [
+          { id: "color-contrast", enabled: true },
+          { id: "label", enabled: true },
+          { id: "button-name", enabled: true },
+        ],
+      },
+      options: {
+        runOnly: {
+          type: "tag",
+          values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "best-practice"],
+        },
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          "Intro",
+          "Tokens",
+          ["Colors", "Spacing", "Typography", "Shadows", "Motion"],
+          "Layout",
+          "Forms",
+          ["Button", "Input", "Select", "Checkbox", "Radio", "Switch"],
+          "Feedback",
+          "Overlays",
+          "Navigation",
+          "Data display",
+          "Advanced",
+          "Theming",
+        ],
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: "Thème global",
+      defaultValue: "light",
+      toolbar: {
+        title: "Thème",
+        icon: "circlehollow",
+        items: [
+          { value: "light", title: "Light" },
+          { value: "dark", title: "Dark" },
+          { value: "system", title: "Système" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    accent: {
+      description: "Couleur d'accent (preset DSMMG)",
+      defaultValue: "synapse",
+      toolbar: {
+        title: "Accent",
+        icon: "paintbrush",
+        items: [
+          { value: "synapse", title: "Synapse (rose)" },
+          { value: "rose", title: "Rose vif" },
+          { value: "blue", title: "Bleu" },
+          { value: "violet", title: "Violet" },
+          { value: "green", title: "Vert" },
+          { value: "amber", title: "Ambre" },
+          { value: "red", title: "Rouge" },
+          { value: "cyan", title: "Cyan" },
+          { value: "slate", title: "Ardoise" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    density: {
+      description: "Densité",
+      defaultValue: "comfortable",
+      toolbar: {
+        title: "Densité",
+        icon: "component",
+        items: [
+          { value: "comfortable", title: "Comfortable" },
+          { value: "cozy", title: "Cozy" },
+          { value: "compact", title: "Compact" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, ctx) => {
+      const root = document.documentElement;
+      // Theme
+      if (ctx.globals.theme === "system") root.removeAttribute("data-mmg-theme");
+      else root.setAttribute("data-mmg-theme", ctx.globals.theme);
+      // Accent
+      if (ctx.globals.accent === "synapse") root.removeAttribute("data-mmg-accent");
+      else root.setAttribute("data-mmg-accent", ctx.globals.accent);
+      // Density
+      if (ctx.globals.density === "comfortable") root.removeAttribute("data-mmg-density");
+      else root.setAttribute("data-mmg-density", ctx.globals.density);
+      return Story();
+    },
+  ],
+};
+
+export default preview;