feat(web): set up Storybook (preview + MSW + stories for real components)

web/src/objects/visibility-badge.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { VisibilityBadge } from './visibility-badge'
+
+const meta = {
+  component: VisibilityBadge,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof VisibilityBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Public: Story = {
+  args: { visibility: 'public' },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Public')).toBeVisible()
+  },
+}
+
+export const Internal: Story = {
+  args: { visibility: 'internal' },
+}
+
+export const Draft: Story = {
+  args: { visibility: 'draft' },
+}
+
+// The single project-wide CssCheck. VisibilityBadge applies `bg-green-100` for
+// the `public` visibility (see STYLES in visibility-badge.tsx). A concrete
+// resolved background colour proves the shared preview actually loaded the app's
+// Tailwind stylesheet — an unstyled badge would report a transparent background.
+export const CssCheck: Story = {
+  args: { visibility: 'public' },
+  play: async ({ canvas }) => {
+    const badge = canvas.getByText('Public')
+    await expect(getComputedStyle(badge).backgroundColor).toBe(
+      'oklch(0.962 0.044 156.743)',
+    )
+  },
+}