feat(web): add Diffs Playground route and integrate @pierre/diffs

apps/web/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@base-ui/react": "catalog:web",
     "@fontsource-variable/inter": "catalog:web",
+    "@pierre/diffs": "catalog:web",
     "@tanstack/react-devtools": "catalog:web",
     "@tanstack/react-form": "catalog:web",
     "@tanstack/react-query": "catalog:web",

apps/web/src/components/layout/sidebar/app-sidebar.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react";
 import { Link, useLoaderData, useMatches } from "@tanstack/react-router";
-import { BookOpen, ExternalLink, Grid3X3, Lightbulb, Search, Type } from "lucide-react";
+import { BookOpen, ExternalLink, FlaskConical, Grid3X3, Lightbulb, Search, Type } from "lucide-react";
 import {
   Sidebar,
   SidebarContent,
@@ -33,6 +33,7 @@ const VERSION_ITEMS = [
 
 const TOOLS_ITEMS = [
   { to: "/file-explorer/$", params: { _splat: "" }, icon: BookOpen, label: "File Explorer" },
+  { to: "/diffs-playground", icon: FlaskConical, label: "Diffs Playground" },
 ] as const;
 
 export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {

apps/web/src/routeTree.gen.ts

@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SearchRouteImport } from './routes/search'
+import { Route as DiffsPlaygroundRouteImport } from './routes/diffs-playground'
 import { Route as CodepointInspectorRouteImport } from './routes/codepoint-inspector'
 import { Route as FileExplorerRouteRouteImport } from './routes/file-explorer/route'
 import { Route as IndexRouteImport } from './routes/index'
@@ -34,6 +35,11 @@ const SearchRoute = SearchRouteImport.update({
   path: '/search',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DiffsPlaygroundRoute = DiffsPlaygroundRouteImport.update({
+  id: '/diffs-playground',
+  path: '/diffs-playground',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CodepointInspectorRoute = CodepointInspectorRouteImport.update({
   id: '/codepoint-inspector',
   path: '/codepoint-inspector',
@@ -131,6 +137,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/file-explorer': typeof FileExplorerRouteRouteWithChildren
   '/codepoint-inspector': typeof CodepointInspectorRoute
+  '/diffs-playground': typeof DiffsPlaygroundRoute
   '/search': typeof SearchRoute
   '/v/$version': typeof VVersionRouteRouteWithChildren
   '/file-explorer/$': typeof FileExplorerSplatRoute
@@ -152,6 +159,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/file-explorer': typeof FileExplorerRouteRouteWithChildren
   '/codepoint-inspector': typeof CodepointInspectorRoute
+  '/diffs-playground': typeof DiffsPlaygroundRoute
   '/search': typeof SearchRoute
   '/file-explorer/$': typeof FileExplorerSplatRoute
   '/v': typeof VIndexRoute
@@ -173,6 +181,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/file-explorer': typeof FileExplorerRouteRouteWithChildren
   '/codepoint-inspector': typeof CodepointInspectorRoute
+  '/diffs-playground': typeof DiffsPlaygroundRoute
   '/search': typeof SearchRoute
   '/v/$version': typeof VVersionRouteRouteWithChildren
   '/file-explorer/$': typeof FileExplorerSplatRoute
@@ -196,6 +205,7 @@ export interface FileRouteTypes {
     | '/'
     | '/file-explorer'
     | '/codepoint-inspector'
+    | '/diffs-playground'
     | '/search'
     | '/v/$version'
     | '/file-explorer/$'
@@ -217,6 +227,7 @@ export interface FileRouteTypes {
     | '/'
     | '/file-explorer'
     | '/codepoint-inspector'
+    | '/diffs-playground'
     | '/search'
     | '/file-explorer/$'
     | '/v'
@@ -237,6 +248,7 @@ export interface FileRouteTypes {
     | '/'
     | '/file-explorer'
     | '/codepoint-inspector'
+    | '/diffs-playground'
     | '/search'
     | '/v/$version'
     | '/file-explorer/$'
@@ -259,6 +271,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   FileExplorerRouteRoute: typeof FileExplorerRouteRouteWithChildren
   CodepointInspectorRoute: typeof CodepointInspectorRoute
+  DiffsPlaygroundRoute: typeof DiffsPlaygroundRoute
   SearchRoute: typeof SearchRoute
   VVersionRouteRoute: typeof VVersionRouteRouteWithChildren
   VIndexRoute: typeof VIndexRoute
@@ -276,6 +289,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SearchRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/diffs-playground': {
+      id: '/diffs-playground'
+      path: '/diffs-playground'
+      fullPath: '/diffs-playground'
+      preLoaderRoute: typeof DiffsPlaygroundRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/codepoint-inspector': {
       id: '/codepoint-inspector'
       path: '/codepoint-inspector'
@@ -448,6 +468,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   FileExplorerRouteRoute: FileExplorerRouteRouteWithChildren,
   CodepointInspectorRoute: CodepointInspectorRoute,
+  DiffsPlaygroundRoute: DiffsPlaygroundRoute,
   SearchRoute: SearchRoute,
   VVersionRouteRoute: VVersionRouteRouteWithChildren,
   VIndexRoute: VIndexRoute,