FE-518: Add Storybook and update build/lint setup for refractive

Replace the playground/ dev server with Storybook for component
development and visual testing.

- Remove playground/ folder and its Vite dev server setup
- Add Storybook 9 with @storybook/react-vite framework
- Create playground story showing refractive glass effect over
  scrollable article content
- Simplify vite.config.ts for lib-only builds (Storybook handles dev)

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

Author: kube

libs/@hashintel/refractive/.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  framework: "@storybook/react-vite",
+  stories: ["../stories/**/*.stories.@(ts|tsx)"],
+};
+
+export default config;

libs/@hashintel/refractive/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default preview;

libs/@hashintel/refractive/package.json

@@ -23,21 +23,25 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "storybook dev -p 6006",
     "dev:lib": "vite build --watch",
     "fix:eslint": "eslint --fix .",
     "lint:eslint": "eslint --report-unused-disable-directives .",
     "lint:tsc": "tsc --noEmit",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@local/eslint": "workspace:*",
     "@local/tsconfig": "workspace:*",
+    "@storybook/react": "9.1.13",
+    "@storybook/react-vite": "9.1.13",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.0.4",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.3",
+    "storybook": "9.1.19",
     "typescript": "5.9.3",
     "vite": "7.1.11",
     "vite-plugin-dts": "4.5.4"

libs/@hashintel/refractive/playground/index.html

@@ -63,7 +63,7 @@ export const ExampleArticle: React.FC = () => {
 
       <img
         src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2728&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt="Something"
+        alt="Abstract colorful shapes"
         style={{
           width: "100%",
           height: "400px",
@@ -137,7 +137,7 @@ export const ExampleArticle: React.FC = () => {
 
       <img
         src="https://images.unsplash.com/photo-1496096265110-f83ad7f96608?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt="Something"
+        alt="Light refraction through prism"
         style={{
           width: "100%",
           height: "400px",
@@ -180,7 +180,7 @@ export const ExampleArticle: React.FC = () => {
 
       <img
         src="https://images.unsplash.com/photo-1579547621113-e4bb2a19bdd6?q=80&w=1239&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt="Something"
+        alt="Scientific equipment"
         style={{
           width: "100%",
           height: "400px",
@@ -230,7 +230,7 @@ export const ExampleArticle: React.FC = () => {
 
       <img
         src="https://images.unsplash.com/photo-1637789594401-5a0dac0d3e36?q=80&w=1294&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt="Something"
+        alt="Natural light patterns"
         style={{
           width: "100%",
           height: "400px",

libs/@hashintel/refractive/playground/main.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { CONVEX } from "../src/helpers/surface-equations";
+import { refractive } from "../src/hoc/refractive";
+import { ExampleArticle } from "./example-article";
+
+const refraction = {
+  blur: 2,
+  radius: 20,
+  specularOpacity: 0.9,
+  bezelWidth: 30,
+  glassThickness: 70,
+  refractiveIndex: 1.5,
+  bezelHeightFn: CONVEX,
+  specularAngle: 2,
+};
+
+const GlassOverArticle = () => (
+  <div style={{ position: "relative" }}>
+    <refractive.div
+      style={{
+        position: "sticky",
+        top: 100,
+        marginLeft: 50,
+        width: 300,
+        height: 200,
+        resize: "both",
+        overflow: "auto",
+        backgroundColor: "rgba(255, 255, 255, 0.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1,
+      }}
+      refraction={refraction}
+    >
+      Refractive Glass
+    </refractive.div>
+
+    <ExampleArticle />
+  </div>
+);
+
+const meta = {
+  title: "Playground",
+  component: GlassOverArticle,
+} satisfies Meta<typeof GlassOverArticle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

libs/@hashintel/refractive/playground/playground.tsx

@@ -9,7 +9,7 @@
     "noEmit": true,
     "isolatedModules": true
   },
-  "include": ["src/**/*", "playground/**/*"],
+  "include": ["src/**/*", "stories/**/*"],
   "exclude": [
     "node_modules",
     "dist",