feat(web_common): make simpler including common package directly within repo

web/common/src/components/Badge/Badge.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-badge-background: var(--color-neutral-100);
   --color-badge-foreground: var(--color-prose);
 }

web/common/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import type { Shape, Size } from '@/types'
+import type { Shape, Size } from '@sqlmesh-common/types'
 import { Badge } from './Badge'
 
 const meta: Meta<typeof Badge> = {

web/common/src/components/Badge/Badge.tsx

@@ -1,8 +1,8 @@
 import { Slot } from '@radix-ui/react-slot'
 import React from 'react'
 
-import type { Shape, Size } from '@/types'
-import { cn } from '@/utils'
+import type { Shape, Size } from '@sqlmesh-common/types'
+import { cn } from '@sqlmesh-common/utils'
 import { cva } from 'class-variance-authority'
 
 import './Badge.css'

web/common/src/components/Button/Button.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-button-primary-background: var(--color-action);
   --color-button-primary-foreground: var(--color-light);
   --color-button-primary-hover: var(--color-action-hover);

web/common/src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { Size } from '@/types'
+import type { Size } from '@sqlmesh-common/types'
 import { Button, type ButtonVariant } from './Button'
 import { fn, expect, userEvent, within } from 'storybook/test'
 

web/common/src/components/Button/Button.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils'
-import type { Shape, Size } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { Shape, Size } from '@sqlmesh-common/types'
 
 import './Button.css'
 

web/common/src/components/CopyButton/CopyButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 
-import { Button, type ButtonProps } from '@/components/Button/Button'
-import { useCopyClipboard } from '@/hooks/useCopyClipboard'
+import {
+  Button,
+  type ButtonProps,
+} from '@sqlmesh-common/components/Button/Button'
+import { useCopyClipboard } from '@sqlmesh-common/hooks/useCopyClipboard'
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
   text: string

web/common/src/components/HorizontalContainer/HorizontalContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer'
 
 export interface HorizontalContainerProps

web/common/src/components/Input/Input.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-input-background: var(--color-light);
   --color-input-background-translucid: var(--color-neutral-5);
   --color-input-foreground: var(--color-prose);

web/common/src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { cn } from '@/utils'
-import type { Size } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { Size } from '@sqlmesh-common/types'
 import { cva } from 'class-variance-authority'
 
 import './Input.css'

web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-lineage-model-column-badge-background: var(
     --color-lineage-node-badge-background
   );

web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx

@@ -7,19 +7,19 @@ import {
 } from 'lucide-react'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { NodeBadge } from '../node/NodeBadge'
 import { NodePort } from '../node/NodePort'
 import { type NodeId, type PortHandleId, type PortId } from '../utils'
 import {
   type ColumnLevelLineageAdjacencyList,
   type ColumnLevelLineageContextHook,
 } from './ColumnLevelLineageContext'
-import { Tooltip } from '@/components/Tooltip/Tooltip'
-import { Metadata } from '@/components/Metadata/Metadata'
-import { HorizontalContainer } from '@/components/HorizontalContainer/HorizontalContainer'
-import { Information } from '@/components/Typography/Information'
-import { LoadingContainer } from '@/components/LoadingContainer/LoadingContainer'
+import { Tooltip } from '@sqlmesh-common/components/Tooltip/Tooltip'
+import { Metadata } from '@sqlmesh-common/components/Metadata/Metadata'
+import { HorizontalContainer } from '@sqlmesh-common/components/HorizontalContainer/HorizontalContainer'
+import { Information } from '@sqlmesh-common/components/Typography/Information'
+import { LoadingContainer } from '@sqlmesh-common/components/LoadingContainer/LoadingContainer'
 
 import './FactoryColumn.css'
 

web/common/src/components/Lineage/LineageContext.ts

@@ -59,7 +59,11 @@ export interface LineageContextValue<
   >
   nodes: LineageNode<TNodeData, TNodeID>[]
   nodesMap: LineageNodesMap<TNodeData, TNodeID>
-  setNodesMap: React.Dispatch<React.SetStateAction<LineageNodesMap<TNodeData>>>
+  setNodesMap: React.Dispatch<
+    React.SetStateAction<LineageNodesMap<TNodeData, TNodeID>>
+  >
+  currentNodeId: TNodeID | null
+  selectedNode: LineageNode<TNodeData, TNodeID> | null
   currentNode: LineageNode<TNodeData, TNodeID> | null
 }
 
@@ -74,7 +78,6 @@ export function getInitial<
     setSelectedNodes: () => {},
     selectedEdges: new Set<TEdgeID>(),
     setSelectedEdges: () => {},
-    selectedNodeId: null,
     setSelectedNodeId: () => {},
     zoom: ZOOM_THRESHOLD,
     setZoom: () => {},
@@ -83,6 +86,9 @@ export function getInitial<
     nodes: [],
     nodesMap: {},
     setNodesMap: () => {},
+    selectedNodeId: null,
+    selectedNode: null,
+    currentNodeId: null,
     currentNode: null,
   }
 }

web/common/src/components/Lineage/LineageControlButton.tsx

@@ -1,6 +1,6 @@
 import { ControlButton } from '@xyflow/react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { Tooltip } from '../Tooltip/Tooltip'
 
 export function LineageControlButton({

web/common/src/components/Lineage/LineageControlIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface LineageControlIconProps extends React.SVGProps<SVGSVGElement> {
   Icon: React.ElementType

web/common/src/components/Lineage/LineageLayout.tsx

@@ -41,6 +41,9 @@ export function LineageLayout<
   useLineage,
   onNodeClick,
   onNodeDoubleClick,
+  showControlOnlySelectedNodes,
+  showControlZoomToCurrentNode,
+  showControlZoomToSelectedNode,
 }: {
   useLineage: LineageContextHook<
     TNodeData,
@@ -58,6 +61,9 @@ export function LineageLayout<
   className?: string
   nodesDraggable?: boolean
   nodesConnectable?: boolean
+  showControlOnlySelectedNodes?: boolean
+  showControlZoomToCurrentNode?: boolean
+  showControlZoomToSelectedNode?: boolean
   controls?:
     | React.ReactNode
     | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
@@ -85,6 +91,9 @@ export function LineageLayout<
           useLineage={useLineage}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
+          showControlOnlySelectedNodes={showControlOnlySelectedNodes}
+          showControlZoomToCurrentNode={showControlZoomToCurrentNode}
+          showControlZoomToSelectedNode={showControlZoomToSelectedNode}
         />
       </LineageLayoutContainer>
     </ReactFlowProvider>