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

web/src/search/highlight.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Highlight } from './highlight'
+
+const PRE = '\x02'
+const POST = '\x03'
+
+const meta = {
+  component: Highlight,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Highlight>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PlainText: Story = {
+  args: { text: 'cast bronze with green patina' },
+}
+
+export const Marked: Story = {
+  args: { text: `cast ${PRE}bronze${POST} with green patina` },
+  play: async ({ canvas }) => {
+    const mark = canvas.getByText('bronze')
+    await expect(mark.tagName).toBe('MARK')
+  },
+}
+
+export const MultipleMarks: Story = {
+  args: { text: `${PRE}cast${POST} bronze with ${PRE}green${POST} patina` },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('cast').tagName).toBe('MARK')
+    await expect(canvas.getByText('green').tagName).toBe('MARK')
+  },
+}