initial

.storybook/main.ts

@@ -0,0 +1,47 @@
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+/* Dev-only playground. Never shipped — package `files` is ["dist"]. */
+const config: StorybookConfig = {
+  rsbuildFinal: (config) => {
+    config.tools ??= {};
+    // Append our rule without clobbering storybook-react-rsbuild's own
+    // tools.rspack hook (it injects the storybook-config-entry virtual module
+    // in build mode). Mutate in place and return nothing so its config stays.
+    const prev = config.tools.rspack;
+    config.tools.rspack = [
+      ...(Array.isArray(prev) ? prev : prev ? [prev] : []),
+      (rspackConfig) => {
+        rspackConfig.module ??= {};
+        rspackConfig.module.rules ??= [];
+        (rspackConfig.module.rules as unknown[]).push({
+          test: /\.mjs$/,
+          type: 'javascript/auto',
+          resolve: { fullySpecified: false },
+        });
+      },
+    ];
+    return config;
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  staticDirs: ['../src/assets'],
+  framework: {
+    name: 'storybook-react-rsbuild',
+    options: {},
+  },
+  typescript: {
+    // Prop tables in autodocs come from the components' TS types.
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      // Keep our own props + Radix primitives; drop other node_modules noise.
+      propFilter: (prop) =>
+        prop.parent
+          ? !/node_modules/.test(prop.parent.fileName) ||
+            /node_modules\/radix-ui/.test(prop.parent.fileName)
+          : true,
+    },
+  },
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,4 @@
+import { addons } from 'storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({ theme });

.storybook/preview-head.html

@@ -0,0 +1,51 @@
+<style>
+@font-face {
+  font-family: 'Plus Jakarta Sans';
+  src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Plus Jakarta Sans';
+  src: url('/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
+  font-weight: 200 800;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/FiraCode-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/FiraCode-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/FiraCode-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/FiraCode-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/FiraCode-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+</style>

.storybook/preview.css

@@ -0,0 +1,11 @@
+/* Calm canvas matching the MtAir page background. Reacts to the
+   data-theme toggle automatically via --color-bg-page. */
+.sb-show-main {
+  background-color: var(--color-bg-page);
+}
+
+/* Autodocs preview blocks: same surface as the canvas. */
+.docs-story,
+.sbdocs-preview {
+  background-color: var(--color-bg-page) !important;
+}

.storybook/preview.tsx

@@ -0,0 +1,62 @@
+import { useEffect, type ReactNode } from 'react';
+import type { Preview, Decorator } from 'storybook-react-rsbuild';
+import { Tooltip } from 'radix-ui';
+
+/* The shipped library surface, exactly as a consumer would load it.
+   Fonts are self-hosted via fonts.css and inlined at build time; for the
+   dev/storybook build they're loaded through preview-head.html instead,
+   to avoid bundler inlining the @import url() mid-stylesheet. */
+import '../src/styles/index.css';
+/* Storybook-only canvas styling (background, docs blocks). */
+import './preview.css';
+import theme from './theme';
+
+/* Toolbar theme switch → drives `data-theme` on <html>, same lever as the
+   library's ThemeProvider. The frame stays content-sized; the canvas
+   background comes from preview.css, so stories never balloon to full-viewport. */
+function ThemeFrame({ theme, children }: { theme: string; children: ReactNode }) {
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return <Tooltip.Provider delayDuration={200}>{children}</Tooltip.Provider>;
+}
+
+const withMtAir: Decorator = (Story, context) => (
+  <ThemeFrame theme={(context.globals.theme as string) ?? 'light'}>
+    <Story />
+  </ThemeFrame>
+);
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  decorators: [withMtAir],
+  parameters: {
+    layout: 'centered',
+    backgrounds: { disable: true },
+    docs: { theme },
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i },
+    },
+    options: {
+      storySort: { order: ['Getting Started', 'Inputs', 'Selection', 'Feedback', 'Overlays', 'Data Display', 'Layout'] },
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'MtAir theme',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'contrast',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,39 @@
+import { create } from 'storybook/theming';
+
+/* Light, green-accented chrome so the Storybook UI + autodocs match the
+   "Simplicity, air, lightness" MtAir surface instead of stock white/dark. */
+export default create({
+  base: 'light',
+
+  brandTitle: 'MtAir',
+  colorPrimary: '#1E6E48',
+  colorSecondary: '#1E6E48',
+
+  // App
+  appBg: '#F3F0EB',
+  appContentBg: '#FFFFFF',
+  appPreviewBg: '#FFFFFF',
+  appBorderColor: '#E9E5DD',
+  appBorderRadius: 10,
+
+  // Typography
+  fontBase: "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  fontCode: "'Fira Code', 'SF Mono', 'Cascadia Code', ui-monospace, monospace",
+
+  // Text
+  textColor: '#181610',
+  textInverseColor: '#FFFFFF',
+  textMutedColor: '#6B6760',
+
+  // Toolbar / sidebar bars
+  barBg: '#FAF9F7',
+  barTextColor: '#6B6760',
+  barSelectedColor: '#1E6E48',
+  barHoverColor: '#1E6E48',
+
+  // Inputs
+  inputBg: '#FFFFFF',
+  inputBorder: '#D4CFC9',
+  inputTextColor: '#181610',
+  inputBorderRadius: 8,
+});