fix: add dark class to ReactFlow and fix editor routing for procedural flows

ReactFlow v12 requires a 'dark' CSS class on the component to activate
dark theme variables. Without it, controls SVGs are invisible (dark on
dark) and the minimap mask uses white (light theme default).

Also fix library views (table, grid, list) to use getTreeEditorPath()
instead of hardcoding /trees/:id/edit, which sent procedural/maintenance
flows to the wrong editor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/library/TreeGridView.tsx

@@ -4,6 +4,7 @@ import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
+import { getTreeEditorPath } from '@/lib/routing'
 
 interface TreeGridViewProps {
   trees: TreeListItem[]
@@ -95,7 +96,7 @@ export function TreeGridView({
               )}
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                 <Link
-                  to={`/trees/${tree.id}/edit`}
+                  to={getTreeEditorPath(tree.id, tree.tree_type)}
                   className={cn(
                     'rounded-md border border-border p-2 text-muted-foreground',
                     'hover:bg-accent hover:text-foreground'

frontend/src/components/library/TreeListView.tsx

@@ -4,6 +4,7 @@ import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
+import { getTreeEditorPath } from '@/lib/routing'
 
 interface TreeListViewProps {
   trees: TreeListItem[]
@@ -100,7 +101,7 @@ export function TreeListView({
               {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                 <>
                   <Link
-                    to={`/trees/${tree.id}/edit`}
+                    to={getTreeEditorPath(tree.id, tree.tree_type)}
                     className={cn(
                       'rounded-md border border-border p-1.5 text-muted-foreground',
                       'hover:bg-accent hover:text-foreground'

frontend/src/components/library/TreeTableView.tsx

@@ -5,6 +5,7 @@ import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
+import { getTreeEditorPath } from '@/lib/routing'
 
 interface TreeTableViewProps {
   trees: TreeListItem[]
@@ -204,7 +205,7 @@ export function TreeTableView({
                   {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                     <>
                       <Link
-                        to={`/trees/${tree.id}/edit`}
+                        to={getTreeEditorPath(tree.id, tree.tree_type)}
                         className={cn(
                           'rounded-md border border-border p-1.5 text-muted-foreground',
                           'hover:bg-accent hover:text-foreground'

frontend/src/components/tree-editor/FlowCanvas.tsx

@@ -136,7 +136,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
         nodesDraggable={false}
         nodesConnectable={false}
         proOptions={{ hideAttribution: true }}
-        className="bg-accent/30"
+        className="dark bg-accent/30"
       >
         <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
         <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />