feat: Windows 11-like snap behavior for Window component

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
   "stories": [
@@ -12,6 +13,12 @@ const config: StorybookConfig = {
     "@storybook/addon-docs",
     "@storybook/addon-onboarding"
   ],
-  "framework": "@storybook/react-vite"
+  "framework": "@storybook/react-vite",
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      build: {
+        cssMinify: false,
+      },
+    }),
 };
-export default config;
+export default config;

src/components/window/TitleBar.test.tsx

@@ -32,6 +32,11 @@ describe('TitleBar', () => {
     expect(screen.queryByRole('button', { name: 'Maximize' })).toBeNull();
   });
 
+  it('renders the Restore control as a button when maximized', () => {
+    render(<TitleBar title="Test" isMaximized={true} onRestore={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Restore' }).tagName).toBe('BUTTON');
+  });
+
   it('calls onMinimize when Minimize button is clicked', async () => {
     const onMinimize = vi.fn();
     render(<TitleBar title="Test" onMinimize={onMinimize} />);

src/components/window/Window.module.css

@@ -41,10 +41,18 @@
       transparent calc(100% - 12px),
       #ffffff calc(100% - 12px), #ffffff calc(100% - 11px),
       #808080 calc(100% - 11px), #808080 calc(100% - 10px),
-      transparent calc(100% - 10px)
+    transparent calc(100% - 10px)
     );
 }
 
+.snapPreview {
+  position: fixed;
+  background: rgba(0, 120, 212, 0.28);
+  border: 2px solid rgba(0, 120, 212, 0.65);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+  pointer-events: none;
+}
+
 /* Mobile/touch: increase hit area for resize handles */
 @media (pointer: coarse) {
   .n, .s { height: 12px; }

src/components/window/Window.stories.tsx

@@ -7,42 +7,79 @@ const meta: Meta<typeof Window> = {
   component: Window,
   parameters: {
     layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Documented snap zones: left, right, top, bottom, top-left, top-right, bottom-left, and bottom-right. Snap Assist, Snap Groups, and keyboard shortcuts are not included.',
+      },
+    },
+  },
+  argTypes: {
+    snapEnabled: {
+      control: 'boolean',
+    },
+    snapThreshold: {
+      control: { type: 'number', min: 0, step: 1 },
+    },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof Window>;
+type WindowProps = React.ComponentProps<typeof Window>;
+
+const windowArgs = {
+  onMinimize: () => {},
+  onMaximize: () => {},
+  onClose: () => {},
+  snapEnabled: true,
+  snapThreshold: 20,
+};
+
+const renderWindow = (args: Story['args']) => {
+  const windowProps = args as WindowProps;
+
+  return (
+    <Window {...windowProps}>
+      <p>This is the window body content.</p>
+      <p>Windows 98 style window!</p>
+    </Window>
+  );
+};
 
 export const Default: Story = {
   args: {
+    ...windowArgs,
     title: 'My Documents',
     width: 480,
     height: 320,
     initialX: 40,
     initialY: 40,
-    onMinimize: () => {},
-    onMaximize: () => {},
-    onClose: () => {},
   },
-  render: (args) => (
-    <Window {...args}>
-      <p>This is the window body content.</p>
-      <p>Windows 98 style window!</p>
-    </Window>
-  ),
+  render: renderWindow,
+};
+
+export const SnapPlayground: Story = {
+  args: {
+    ...windowArgs,
+    title: 'Snap Playground',
+    width: 480,
+    height: 320,
+    initialX: 40,
+    initialY: 40,
+  },
+  render: renderWindow,
 };
 
 export const Inactive: Story = {
   args: {
+    ...windowArgs,
     title: 'Inactive Window',
     inactive: true,
     width: 400,
     height: 280,
     initialX: 80,
     initialY: 80,
-    onMinimize: () => {},
-    onMaximize: () => {},
-    onClose: () => {},
   },
   render: (args) => (
     <Window {...args}>
@@ -53,11 +90,10 @@ export const Inactive: Story = {
 
 export const Maximized: Story = {
   args: {
+    ...windowArgs,
     title: 'Maximized Window',
     maximized: true,
-    onMinimize: () => {},
     onRestore: () => {},
-    onClose: () => {},
   },
   render: (args) => (
     <Window {...args}>
@@ -68,15 +104,13 @@ export const Maximized: Story = {
 
 export const Minimized: Story = {
   args: {
+    ...windowArgs,
     title: 'Minimized Window',
     minimized: true,
     width: 400,
     height: 280,
     initialX: 80,
     initialY: 80,
-    onMinimize: () => {},
-    onMaximize: () => {},
-    onClose: () => {},
   },
   render: (args) => (
     <Window {...args}>
@@ -87,14 +121,12 @@ export const Minimized: Story = {
 
 export const WithStatusBar: Story = {
   args: {
+    ...windowArgs,
     title: 'My Computer',
     width: 560,
     height: 380,
     initialX: 60,
     initialY: 60,
-    onMinimize: () => {},
-    onMaximize: () => {},
-    onClose: () => {},
   },
   render: (args) => (
     <Window
@@ -110,3 +142,65 @@ export const WithStatusBar: Story = {
     </Window>
   ),
 };
+
+export const MultipleSnappingWindows: Story = {
+  args: {
+    ...windowArgs,
+    title: 'Primary Window',
+    width: 420,
+    height: 280,
+    initialX: 32,
+    initialY: 48,
+  },
+  render: (args) => (
+    <>
+      <Window {...args} title="Primary Window" initialX={32} initialY={48}>
+        <p>Drag me to any edge or corner to snap independently.</p>
+      </Window>
+      <Window
+        {...args}
+        title="Secondary Window"
+        width={360}
+        height={240}
+        initialX={240}
+        initialY={160}
+      >
+        <p>This second window snaps on its own too.</p>
+      </Window>
+    </>
+  ),
+};
+
+export const SnapDisabled: Story = {
+  args: {
+    ...windowArgs,
+    title: 'Snap Disabled',
+    snapEnabled: false,
+    width: 440,
+    height: 300,
+    initialX: 72,
+    initialY: 72,
+  },
+  render: (args) => (
+    <Window {...args}>
+      <p>Snapping is turned off for this window.</p>
+    </Window>
+  ),
+};
+
+export const CustomSnapThreshold: Story = {
+  args: {
+    ...windowArgs,
+    title: 'Custom Threshold',
+    snapThreshold: 40,
+    width: 440,
+    height: 300,
+    initialX: 72,
+    initialY: 72,
+  },
+  render: (args) => (
+    <Window {...args}>
+      <p>This window uses a wider snap threshold.</p>
+    </Window>
+  ),
+};