migrate to TimelineSegment

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@aitube/broadway": "0.0.22",
     "@aitube/clap": "0.0.30",
-    "@aitube/clapper-services": "0.0.5",
+    "@aitube/clapper-services": "0.0.14",
     "@aitube/engine": "0.0.26",
-    "@aitube/timeline": "0.0.34",
+    "@aitube/timeline": "0.0.37",
     "@fal-ai/serverless-client": "^0.11.0",
     "@gradio/client": "^1.1.1",
     "@huggingface/hub": "^0.15.1",
@@ -62,7 +62,9 @@
     "cmdk": "^0.2.1",
     "fflate": "^0.8.2",
     "fluent-ffmpeg": "^2.1.3",
+    "framer-motion": "11.1.7",
     "fs-extra": "^11.2.0",
+    "is-hotkey": "^0.2.0",
     "lucide-react": "^0.396.0",
     "mlt-xml": "^2.0.2",
     "monaco-editor": "^0.50.0",
@@ -98,6 +100,7 @@
   },
   "devDependencies": {
     "@types/fluent-ffmpeg": "^2.1.24",
+    "@types/is-hotkey": "^0.1.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -105,6 +108,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "postcss": "^8",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5"
   }

src/app/api/resolve/providers/comfy-comfyicu/index.ts

@@ -1,8 +1,9 @@
 
 import { ResolveRequest } from "@aitube/clapper-services"
-import { ClapSegment, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { TimelineSegment } from "@aitube/timeline"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.comfyIcuApiKey) {
     throw new Error(`Missing API key for "Comfy.icu"`)
   }
@@ -10,7 +11,7 @@ export async function resolveSegment(request: ResolveRequest): Promise<ClapSegme
     throw new Error(`Clapper doesn't support ${request.segment.category} generation for provider "Comfy.icu". Please open a pull request with (working code) to solve this!`)
   }
   
-  const segment: ClapSegment = { ...request.segment }
+  const segment: TimelineSegment = { ...request.segment }
 
 
   try {

src/app/api/resolve/providers/comfy-huggingface/index.ts

@@ -1,7 +1,8 @@
 import { ResolveRequest } from "@aitube/clapper-services"
-import { ClapSegment, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { TimelineSegment } from "@aitube/timeline"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.huggingFaceApiKey) {
     throw new Error(`Missing API key for "Hugging Face"`)
   }
@@ -9,7 +10,7 @@ export async function resolveSegment(request: ResolveRequest): Promise<ClapSegme
     throw new Error(`Clapper doesn't support ${request.segment.category} generation for provider "Comfy Hugging Face". Please open a pull request with (working code) to solve this!`)
   }
   
-  const segment: ClapSegment = { ...request.segment }
+  const segment: TimelineSegment = { ...request.segment }
 
 
   try {

src/app/api/resolve/providers/comfy-replicate/index.ts

@@ -1,16 +1,17 @@
-import { ClapSegment, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
 
 import { ResolveRequest } from "@aitube/clapper-services"
 import { getComfyWorkflow } from "../comfy/getComfyWorkflow"
 import { runWorkflow } from "./runWorkflow"
+import { TimelineSegment } from "@aitube/timeline"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.replicateApiKey) {
     throw new Error(`Missing API key for "Replicate.com"`)
   }
   const workflow = getComfyWorkflow(request)
 
-  const segment: ClapSegment = { ...request.segment }
+  const segment: TimelineSegment = request.segment
 
   try {
     segment.assetUrl = await runWorkflow({

src/app/api/resolve/providers/falai/index.ts

@@ -1,10 +1,11 @@
 import * as fal from '@fal-ai/serverless-client'
-
+import { TimelineSegment } from '@aitube/timeline'
 import { FalAiImageSize, ResolveRequest } from "@aitube/clapper-services"
-import { ClapMediaOrientation, ClapSegment, ClapSegmentCategory } from "@aitube/clap"
+import { ClapMediaOrientation, ClapSegmentCategory } from "@aitube/clap"
 import { FalAiAudioResponse, FalAiImageResponse, FalAiSpeechResponse, FalAiVideoResponse } from './types'
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.falAiApiKey) {
     throw new Error(`Missing API key for "Fal.ai"`)
   }
@@ -13,7 +14,7 @@ export async function resolveSegment(request: ResolveRequest): Promise<ClapSegme
     credentials: request.settings.falAiApiKey
   })
 
-  const segment = request.segment
+  const segment: TimelineSegment = request.segment
 
 
   // for doc see: 

src/app/api/resolve/providers/gradio/index.ts

@@ -1,9 +1,10 @@
-import { ClapSegment, ClapSegmentCategory } from "@aitube/clap"
-
+import { ClapSegmentCategory } from "@aitube/clap"
 import { ResolveRequest } from "@aitube/clapper-services"
+import { TimelineSegment } from "@aitube/timeline"
+
 import { callGradioApi } from "@/lib/hf/callGradioApi"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
 
   const segment = request.segment
 

src/app/api/resolve/providers/huggingface/index.ts

@@ -1,13 +1,14 @@
 import { HfInference, HfInferenceEndpoint } from "@huggingface/inference"
 
 import { ResolveRequest } from "@aitube/clapper-services"
-import { ClapSegment, ClapSegmentCategory } from "@aitube/clap"
+import { ClapSegmentCategory } from "@aitube/clap"
 
 import { generateImage } from "./generateImage"
 import { generateVoice } from "./generateVoice"
 import { generateVideo } from "./generateVideo"
+import { TimelineSegment } from "@aitube/timeline"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
 
   if (!request.settings.huggingFaceApiKey) {
     throw new Error(`Missing API key for "Hugging Face"`)

src/app/api/resolve/providers/modelslab/index.ts

@@ -1,7 +1,8 @@
 import { ResolveRequest } from "@aitube/clapper-services"
-import { ClapSegment, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { TimelineSegment } from "@aitube/timeline"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.modelsLabApiKey) {
     throw new Error(`Missing API key for "ModelsLab.com"`)
   }
@@ -9,7 +10,7 @@ export async function resolveSegment(request: ResolveRequest): Promise<ClapSegme
     throw new Error(`Clapper doesn't support ${request.segment.category} generation for provider "ModelsLab". Please open a pull request with (working code) to solve this!`)
   }
   
-  const segment: ClapSegment = { ...request.segment }
+  const segment: TimelineSegment = request.segment
 
 
   try {

src/app/api/resolve/providers/replicate/index.ts

@@ -1,10 +1,10 @@
 import Replicate from 'replicate'
 
-import { ClapSegment, ClapSegmentCategory } from "@aitube/clap"
-
+import { ClapSegmentCategory } from "@aitube/clap"
 import { ResolveRequest } from "@aitube/clapper-services"
+import { TimelineSegment } from '@aitube/timeline'
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.replicateApiKey) {
     throw new Error(`Missing API key for "Replicate.com"`)
   }

src/app/api/resolve/providers/stabilityai/index.ts

@@ -1,9 +1,10 @@
-import { ClapSegment, ClapSegmentCategory } from "@aitube/clap"
-
+import { ClapSegmentCategory } from "@aitube/clap"
+import { TimelineSegment } from "@aitube/timeline"
 import { ResolveRequest } from "@aitube/clapper-services"
 import { generateImage } from "./generateImage"
 
-export async function resolveSegment(request: ResolveRequest): Promise<ClapSegment> {
+
+export async function resolveSegment(request: ResolveRequest): Promise<TimelineSegment> {
   if (!request.settings.stabilityAiApiKey) {
     throw new Error(`Missing API key for "Stability.ai"`)
   }

src/app/api/resolve/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse, NextRequest } from "next/server"
-import { ClapOutputType, ClapSegment, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
+import { ClapOutputType, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType } from "@aitube/clap"
 
 import {
   resolveSegmentUsingHuggingFace,

src/app/main.tsx

@@ -6,6 +6,7 @@ import {
   ReflexSplitter,
   ReflexElement
 } from "react-reflex"
+import { useSearchParams } from "next/navigation"
 import { DndProvider, useDrop } from "react-dnd"
 import { HTML5Backend, NativeTypes } from "react-dnd-html5-backend"
 import { useTimeline } from "@aitube/timeline"
@@ -22,19 +23,15 @@ import { TopBar } from "@/components/toolbars/top-bar"
 import { Timeline } from "@/components/core/timeline"
 import { useIO } from "@/services/io/useIO"
 import { ChatView } from "@/components/assistant/ChatView"
-import { ScriptEditor } from "@/components/editor/ScriptEditor"
-import { useSearchParams } from "next/navigation"
-import EditorMenu from "@/components/toolbars/editor-menu/EditorSideMenu"
-import EditorSideMenu from "@/components/toolbars/editor-menu/EditorSideMenu"
-import { Editor } from "@/components/editor/Editor"
+import { Editors } from "@/components/editors/Editors"
 
 type DroppableThing = { files: File[] }
 
 function MainContent() {
   const ref = useRef<HTMLDivElement>(null)
   const isEmpty = useTimeline(s => s.isEmpty)
-  const showTimeline = useUI((s) => s.showTimeline)
-  const showAssistant = useUI((s) => s.showAssistant)
+  const showTimeline = useUI(s => s.showTimeline)
+  const showAssistant = useUI(s => s.showAssistant)
   
   const openFiles = useIO(s => s.openFiles)
   
@@ -98,7 +95,7 @@ function MainContent() {
                       minSize={showTimeline ? 100 : 1}
                       maxSize={showTimeline ? 1600 : 1}
                       >
-                      <Editor />
+                      <Editors />
                     </ReflexElement>
                     <ReflexSplitter />
                     <ReflexElement

src/components/core/tree/README.md

@@ -0,0 +1,7 @@
+This component is adapted from:
+
+https://www.joshuawootonn.com/react-treeview-component
+
+See the code here for example usage:
+
+https://github.com/joshuawootonn/react-components-from-scratch/blob/main/components/treeview/examples/apple-sidebar.tsx

src/components/core/tree/chainable-map.ts

@@ -0,0 +1,28 @@
+export class ChainableMap<K, V> {
+  map: Map<K, V>
+  constructor(map?: ChainableMap<K, V> | null)
+  constructor(entries?: readonly (readonly [K, V])[] | null)
+  constructor(mapOrEntries?: ChainableMap<K, V> | readonly (readonly [K, V])[] | null) {
+    this.map = mapOrEntries instanceof ChainableMap ? new Map(mapOrEntries.map) : new Map(mapOrEntries)
+  }
+  toMap = (): Map<K, V> => {
+    return new Map(Array.from(this.map.entries()))
+  }
+  get = (key: K): V | undefined => {
+    return this.map.get(key)
+  }
+  set = (key: K, value: V): this => {
+    this.map.set(key, value)
+    return this
+  }
+  delete = (key: K): this => {
+    this.map.delete(key)
+    return this
+  }
+  toString = (): Record<any, V> => {
+    return Object.fromEntries(this.map)
+  }
+  size = (): number => {
+    return this.map.size
+  }
+}

src/components/core/tree/icons.tsx

@@ -0,0 +1,129 @@
+import { motion } from "framer-motion"
+
+import { cn } from "@/lib/utils"
+
+export function Folder({
+  open,
+  className
+}: {
+  open?: boolean;
+  className?: string
+}) {
+  if (open) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth="1.6"
+        stroke="currentColor"
+        className={className}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"
+        />
+      </svg>
+    )
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.6"
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+      />
+    </svg>
+  )
+}
+
+export function File({
+  open,
+  className
+}: {
+  open?: boolean;
+  className?: string
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.6"
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+      />
+    </svg>
+  )
+}
+
+export function Arrow({
+  open,
+  className
+}: {
+  open?: boolean;
+  className?: string
+}) {
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={cn('origin-center', className)}
+      initial={false}
+      animate={{ rotate: open ? 90 : 0 }}
+      style={{ originX: '8px', originY: '8px' }}
+      transition={{
+        duration: 0.25,
+        ease: [0.164, 0.84, 0.43, 1],
+      }}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.25 4.5l7.5 7.5-7.5 7.5"
+      />
+    </motion.svg>
+  )
+}
+
+export function Ellipse({
+  open,
+  className
+}: {
+  open?: boolean;
+  className?: string
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={cn('origin-center', className)}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+      />
+    </svg>
+  )
+}

src/components/core/tree/index.tsx

@@ -0,0 +1,185 @@
+// adapted from joshuawootonn/react-components-from-scratch
+import React from "react"
+import { AnimatePresence, motion, MotionConfig } from "framer-motion"
+
+import { cn } from "@/lib/utils"
+
+import { Folder, File, Arrow } from "./icons"
+import { useTreeNode } from "./useTreeNode"
+import { Root } from "./root"
+import { TreeNodeType } from "./types"
+
+export function Node<S,T>({ node, showArrows, indentLeaves }: {
+  node: TreeNodeType<S,T>
+
+  // show the little arrows on the left
+  showArrows?: boolean
+
+  // indent leaves (but it takes more space)
+  indentLeaves?: boolean
+}) {
+  const {
+    isOpen,
+    isFocusable,
+    isSelected,
+    isExpanded,
+    getTreeNodeProps,
+    treeGroupProps,
+  } = useTreeNode(node.id, {
+    selectionType: 'distinct',
+    isFolder: Boolean(node.children?.length),
+    isExpanded: Boolean(node.isExpanded),
+    data: node,
+  })
+
+  const IconComponent = node.icon!
+
+  return (
+    <li
+      {...getTreeNodeProps({
+        className: cn(
+          'relative cursor-pointer select-none flex flex-col focus:outline-none group',
+        )
+      })}
+    >
+      <MotionConfig
+        transition={{
+          ease: [0.164, 0.84, 0.43, 1],
+          duration: 0.25,
+        }}
+      >
+        <div
+          className={cn(
+            'group flex flex-row items-center border-[1.5px] border-transparent space-x-2',
+            isFocusable &&
+              'group-focus:border-gray-900/0 focus-within:border-transparent',
+            /*
+              isSelected 
+              ? 'bg-gray-700/100 text-gray-200'
+              : 'bg-transparent text-gray-400 hover:text-gray-200',
+            */
+           
+             "hover:bg-gray-700/20 text-gray-300 hover:text-gray-200 fill-gray-300 hover:fill-gray-200",
+            
+            node.className,
+          )}
+        >
+          {node.children?.length ? (
+            <>
+              {showArrows ? <Arrow
+                className="h-4 w-4 flex-shrink-0"
+                open={isOpen}
+              /> : null}
+              <div className="flex flex-col items-center justify-center h-5 w-5 flex-shrink-0">
+                {node.icon
+                  ? <div className="flex flex-col items-center justify-center w-full h-full scale-125">
+                      <IconComponent />
+                    </div>
+                  : <Folder
+                  open={isOpen}
+                  className="w-full h-full"
+                />}
+              </div>
+            </>
+          ) : (
+            <div
+              className={cn(
+                `flex flex-col items-center justify-center h-5 w-5 flex-shrink-0`,
+                showArrows ? "ml-6" : ""
+                )}>
+              {node.icon
+                ? <div className="flex flex-col items-center justify-center w-full h-full scale-110 mt-0.5">
+                    <IconComponent />
+                  </div>
+                : <File className="w-full h-full" />}
+            </div>
+          )}
+          <span
+            className={cn(
+              `font-sans font-light text-base`,
+              `text-ellipsis whitespace-nowrap overflow-hidden`,
+              `flex-grow`,
+              node.className,
+            )}>
+            {node.label}{
+              // Array.isArray(node.children) ? `(${node.children.length ? node.children.length : "empty"})` : ""
+            }
+          </span>
+        </div>
+
+        <AnimatePresence initial={false}>
+          {node.children?.length && isOpen && (
+            <motion.ul
+              key={node.id + 'ul'}
+              initial={{
+                height: 0,
+                opacity: 0,
+              }}
+              animate={{
+                height: 'auto',
+                opacity: 1,
+                transition: {
+                  height: {
+                    duration: 0.25,
+                  },
+                  opacity: {
+                    duration: 0.2,
+                    delay: 0.05,
+                  },
+                },
+              }}
+              exit={{
+                height: 0,
+                opacity: 0,
+                transition: {
+                  height: {
+                    duration: 0.25,
+                  },
+                  opacity: {
+                    duration: 0.2,
+                  },
+                },
+              }}
+              {...treeGroupProps}
+              className={cn(
+                'pl-3'
+              )}
+            >
+              <motion.svg
+                viewBox="0 0 3 60"
+                fill="none"
+                preserveAspectRatio="none"
+                width={2}
+                xmlns="http://www.w3.org/2000/svg"
+
+                // if you want to display vertical lines, tweak the stroke-gray-900/100 
+                className="absolute top-[31px] h-[calc(100%-30px)] bottom-0 left-3.5 transform -translate-x-1/2 stroke-gray-900/100 z-[-1]"
+                key={node.id + 'line'}
+                stroke="currentColor"
+              >
+                <motion.line
+                  strokeLinecap="round"
+                  x1="1"
+                  x2="1"
+                  y1="1"
+                  y2="59"
+                  strokeWidth={2}
+                />
+              </motion.svg>
+              {node.children.map(node => (
+                <Node
+                  key={node.id}
+                  node={node}
+                  showArrows={showArrows}
+                  indentLeaves={indentLeaves}
+                />
+              ))}
+            </motion.ul>
+          )}
+        </AnimatePresence>
+      </MotionConfig>
+    </li>
+  )
+}
+
+export const Tree = { Root, Node }

src/components/core/tree/root.tsx

@@ -0,0 +1,45 @@
+// adapted from joshuawootonn/react-components-from-scratch
+import React, { ReactNode, useReducer, useMemo, useCallback } from "react"
+
+import { cn } from "@/lib/utils"
+import { RovingTabindexRoot } from "./roving"
+import { treeviewReducer, TreeViewContext } from "./tree-state"
+import { ChainableMap } from "./chainable-map"
+
+export function Root<S,T>({ children, onChange, value, label, className }: {
+  children: ReactNode | ReactNode[]
+  label: string
+  className?: string
+  value: string | null
+  onChange: (id: string | null, nodeType?: S, data?: T) => void
+}) {
+
+  const [open, dispatch] = useReducer(treeviewReducer, new ChainableMap<string, boolean>())
+
+  const select = useCallback(
+    (selectedId: string | null, nodeType?: any, data?: any) => {
+      onChange(selectedId, nodeType as S, data as T)
+    },
+    [onChange],
+  )
+
+  const providerValue = useMemo(
+    () => ({ dispatch, open, select, selectedId: value }),
+    [open, select, value],
+  )
+
+  return (
+    <TreeViewContext.Provider value={providerValue}>
+      <RovingTabindexRoot
+        className={cn(`flex flex-col overflow-auto`, className)}
+        active={providerValue.selectedId ?? null}
+        as="ul"
+        aria-label={label}
+        aria-multiselectable="false"
+        role="tree"
+      >
+        {children}
+      </RovingTabindexRoot>
+    </TreeViewContext.Provider>
+  )
+}

src/components/core/tree/roving.tsx

@@ -0,0 +1,254 @@
+// adapted from joshuawootonn/react-components-from-scratch
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+  FocusEvent,
+  MouseEvent,
+  KeyboardEvent,
+  ComponentPropsWithoutRef,
+  ElementType,
+  MutableRefObject,
+} from "react"
+import isHotkey from "is-hotkey"
+import { RovingTabindexItem } from "./types"
+
+
+function focusFirst(candidates: HTMLElement[]) {
+  const previousFocus = document.activeElement
+  while (document.activeElement === previousFocus && candidates.length > 0) {
+    candidates.shift()?.focus()
+  }
+}
+
+const RovingTabindexContext = createContext<{
+  currentRovingTabindexValue: string | null
+  setFocusableId: (id: string) => void
+  onShiftTab: () => void
+  getOrderedItems: () => RovingTabindexItem[]
+  elements: MutableRefObject<Map<string, HTMLElement>>
+}
+>({
+  currentRovingTabindexValue: null,
+  setFocusableId: () => {},
+  onShiftTab: () => {},
+  getOrderedItems: () => [],
+  elements: { current: new Map<string, HTMLElement>() },
+})
+
+const NODE_SELECTOR = 'data-roving-tabindex-node'
+const ROOT_SELECTOR = 'data-roving-tabindex-root'
+export const NOT_FOCUSABLE_SELECTOR = 'data-roving-tabindex-not-focusable'
+
+type RovingTabindexRootBaseProps<T> = {
+  children: ReactNode | ReactNode[]
+  active: string | null
+  as?: T
+}
+
+type RovingTabindexRootProps<T extends ElementType> =
+  RovingTabindexRootBaseProps<T> &
+    Omit<ComponentPropsWithoutRef<T>, keyof RovingTabindexRootBaseProps<T>>
+
+export function RovingTabindexRoot<T extends ElementType>({
+  children,
+  active,
+  as,
+  ...props
+}: RovingTabindexRootProps<T>) {
+  const Component = as || 'div'
+  const [isShiftTabbing, setIsShiftTabbing] = useState(false)
+  const [currentRovingTabindexValue, setCurrentRovingTabindexValue] =
+    useState<string | null>(null)
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const elements = useRef<Map<string, HTMLElement>>(new Map())
+
+  const getOrderedItems = useCallback(() => {
+    if (!rootRef.current) return []
+    const domElements = Array.from(
+      rootRef.current.querySelectorAll(
+        `:where([${NODE_SELECTOR}=true]):not(:where([${NOT_FOCUSABLE_SELECTOR}=true] *))`,
+      ),
+    )
+
+    return Array.from(elements.current)
+      .sort(
+        (a, b) => domElements.indexOf(a[1]) - domElements.indexOf(b[1]),
+      )
+      .map(([id, element]) => ({ id, element }))
+  }, [])
+
+  return (
+    <RovingTabindexContext.Provider
+      value={{
+        setFocusableId: function (id: string) {
+          setCurrentRovingTabindexValue(id)
+        },
+        onShiftTab: function () {
+          setIsShiftTabbing(true)
+        },
+        currentRovingTabindexValue,
+        getOrderedItems,
+        elements,
+      }}
+    >
+      <Component
+        {...{ [ROOT_SELECTOR]: true }}
+        tabIndex={isShiftTabbing ? -1 : 0}
+        onFocus={e => {
+          if (e.target !== e.currentTarget) return
+          if (isShiftTabbing) return
+          const orderedItems = getOrderedItems()
+          if (orderedItems.length === 0) return
+
+          const candidates = [
+            elements.current.get(currentRovingTabindexValue ?? ''),
+            elements.current.get(active ?? ''),
+            ...orderedItems.map(i => i.element),
+          ].filter(
+            (element): element is HTMLElement => element != null,
+          )
+
+          focusFirst(candidates)
+        }}
+        onBlur={() => setIsShiftTabbing(false)}
+        ref={rootRef}
+        {...props}
+      >
+        {children}
+      </Component>
+    </RovingTabindexContext.Provider>
+  )
+}
+
+export function getNextFocusableId(
+  orderedItems: RovingTabindexItem[],
+  id: string,
+): RovingTabindexItem | undefined {
+  const currIndex = orderedItems.findIndex(item => item.id === id)
+  return orderedItems.at(
+    currIndex === orderedItems.length ? 0 : currIndex + 1,
+  )
+}
+
+export function getParentFocusableId(
+  orderedItems: RovingTabindexItem[],
+  id: string,
+): RovingTabindexItem | undefined {
+  const currentElement = orderedItems.find(item => item.id === id)?.element
+
+  if (currentElement == null) return
+
+  let possibleParent = currentElement.parentElement
+
+  while (
+    possibleParent != null &&
+    possibleParent.getAttribute(NODE_SELECTOR) == null &&
+    possibleParent.getAttribute(ROOT_SELECTOR) == null
+  ) {
+    possibleParent = possibleParent?.parentElement ?? null
+  }
+
+  return orderedItems.find(item => item.element === possibleParent)
+}
+
+export function getPrevFocusableId(
+  orderedItems: RovingTabindexItem[],
+  id: string,
+): RovingTabindexItem | undefined {
+  const currIndex = orderedItems.findIndex(item => item.id === id)
+  return orderedItems.at(currIndex === 0 ? -1 : currIndex - 1)
+}
+
+export function getFirstFocusableId(
+  orderedItems: RovingTabindexItem[],
+): RovingTabindexItem | undefined {
+  return orderedItems.at(0)
+}
+
+export function getLastFocusableId(
+  orderedItems: RovingTabindexItem[],
+): RovingTabindexItem | undefined {
+  return orderedItems.at(-1)
+}
+
+function wrapArray<T>(array: T[], startIndex: number) {
+  return array.map((_, index) => array[(startIndex + index) % array.length])
+}
+
+export function getNextFocusableIdByTypeahead(
+  items: RovingTabindexItem[],
+  originalId: string,
+  keyPressed: string,
+) {
+  const index = items.findIndex(({ id }) => id === originalId)
+  const wrappedItems = wrapArray(items, index)
+  let typeaheadMatchIndex: RovingTabindexItem | undefined
+
+  for (
+    let index = 0;
+    index < wrappedItems.length - 1 && typeaheadMatchIndex == null;
+    index++
+  ) {
+    const nextItem = wrappedItems.at(index + 1)
+
+    if (
+      nextItem?.element?.textContent?.charAt(0).toLowerCase() ===
+      keyPressed.charAt(0).toLowerCase()
+    ) {
+      typeaheadMatchIndex = nextItem
+    }
+  }
+
+  return typeaheadMatchIndex
+}
+
+export function useRovingTabindex(id: string) {
+  const {
+    currentRovingTabindexValue,
+    setFocusableId,
+    onShiftTab,
+    getOrderedItems,
+    elements,
+  } = useContext(RovingTabindexContext)
+
+  return {
+    getOrderedItems,
+    isFocusable: currentRovingTabindexValue === id,
+    getRovingProps: <T extends ElementType>(
+      props?: ComponentPropsWithoutRef<T>,
+    ) => ({
+      ...props,
+      ref: (element: HTMLElement | null) => {
+        if (element) {
+          elements.current.set(id, element)
+        } else {
+          elements.current.delete(id)
+        }
+      },
+      onMouseDown: (e: MouseEvent) => {
+        props?.onMouseDown?.(e)
+        if (e.target !== e.currentTarget) return
+        setFocusableId(id)
+      },
+      onKeyDown: (e: KeyboardEvent) => {
+        props?.onKeyDown?.(e)
+        if (e.target !== e.currentTarget) return
+        if (isHotkey('shift+tab', e)) {
+          onShiftTab()
+          return
+        }
+      },
+      onFocus: (e: FocusEvent) => {
+        props?.onFocus?.(e)
+        if (e.target !== e.currentTarget) return
+        setFocusableId(id)
+      },
+      [NODE_SELECTOR]: true,
+      tabIndex: currentRovingTabindexValue === id ? 0 : -1,
+    }),
+  }
+}

src/components/core/tree/tree-state.ts

@@ -0,0 +1,34 @@
+// adapted from joshuawootonn/react-components-from-scratch
+import { createContext, Dispatch } from "react"
+
+import { ChainableMap } from "./chainable-map"
+import { OpenState, TreeViewActions, TreeViewActionTypes } from "./types"
+
+export const TREE_VIEW_ROOT_ID = 'TREE_VIEW_ROOT_ID'
+
+export function treeviewReducer(state: OpenState, action: TreeViewActions): OpenState {
+  switch (action.type) {
+    case TreeViewActionTypes.OPEN:
+      return new ChainableMap(state).set(action.id, true)
+
+    case TreeViewActionTypes.CLOSE:
+      return new ChainableMap(state).set(action.id, false)
+
+    default:
+      throw new Error('Tree Reducer received an unknown action')
+  }
+}
+
+export type TreeViewContextType= {
+  open: OpenState
+  dispatch: Dispatch<TreeViewActions>
+  selectedId: string | null
+  select: (id: string | null, nodeType?: any, data?: any) => void
+}
+
+export const TreeViewContext = createContext<TreeViewContextType>({
+  open: new ChainableMap<string, boolean>(),
+  dispatch: () => {},
+  selectedId: null,
+  select: () => {},
+})

src/components/core/tree/types.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react"
+
+import { ChainableMap } from "./chainable-map"
+import { IconType } from "react-icons/lib"
+
+export type OpenState = ChainableMap<string, boolean>
+
+export enum TreeViewActionTypes {
+  OPEN = 'OPEN',
+  CLOSE = 'CLOSE',
+}
+
+export type TreeViewActions =
+  | {
+      type: TreeViewActionTypes.OPEN
+      id: string
+    }
+  | {
+      type: TreeViewActionTypes.CLOSE
+      id: string
+    }
+
+export type RovingTabindexItem = {
+  id: string
+  element: HTMLElement
+}
+
+export type TreeNodeType<S,T> = {
+  id: string
+  nodeType?: S
+  label: ReactNode
+  children?: TreeNodeType<S,T>[]
+  isFolder?: boolean
+  isExpanded?: boolean
+  icon?: IconType
+  className?: string
+  data?: T
+}

src/components/core/tree/useTreeNode.ts

@@ -0,0 +1,196 @@
+import {
+  useContext,
+  FocusEvent,
+  MouseEvent,
+  KeyboardEvent,
+  ComponentPropsWithoutRef,
+  ElementType,
+  useMemo,
+  useEffect,
+  useRef,
+} from "react"
+import isHotkey from "is-hotkey"
+
+import {
+  getFirstFocusableId,
+  getLastFocusableId,
+  getNextFocusableId,
+  getNextFocusableIdByTypeahead,
+  getParentFocusableId,
+  getPrevFocusableId,
+  NOT_FOCUSABLE_SELECTOR,
+  useRovingTabindex,
+} from "./roving"
+
+import {
+  TreeViewContextType,
+  TreeViewContext,
+} from "./tree-state"
+import { RovingTabindexItem, TreeViewActionTypes } from "./types"
+
+export function useTreeNode<T extends ElementType>(
+  id: string,
+  options: {
+    selectionType: 'followFocus' | 'distinct'
+    isFolder: boolean
+    isExpanded?: boolean // Add this field to the options
+    data?: any
+  } = {
+    selectionType: 'followFocus',
+    isFolder: false,
+    isExpanded: false,
+    data: undefined,
+  },
+): {
+  isOpen: boolean
+  open: () => void
+  close: () => void
+  isFocusable: boolean
+  isSelected: boolean
+  isExpanded: boolean
+  getTreeNodeProps: (props: ComponentPropsWithoutRef<T>) => {
+    ref: (current: HTMLElement | null) => void
+    tabIndex: number
+    ['aria-expanded']: boolean
+    ['aria-selected']: boolean
+    role: 'treeitem'
+    onMouseDown: (event: MouseEvent) => void
+    onKeyDown: (event: KeyboardEvent) => void
+    onFocus: (event: FocusEvent) => void
+  }
+  treeGroupProps: {
+    role: 'group'
+  }
+} {
+  const { open, selectedId, select, dispatch } =
+    useContext<TreeViewContextType>(TreeViewContext)
+
+  const { isFocusable, getOrderedItems, getRovingProps } =
+    useRovingTabindex(id)
+
+  const dispatchOnce = useRef(false) // Add a ref to track initial dispatch of the default expander
+
+  useEffect(() => {
+    if (options.isExpanded && !open.get(id) && !dispatchOnce.current) {
+      dispatch({ type: TreeViewActionTypes.OPEN, id })
+
+      // Ensure the action is dispatched only once, otherwise we wouldn't be able to collapse the node
+      dispatchOnce.current = true
+    }
+  }, [id, options.isExpanded, open, dispatch])
+
+  return useMemo(() => {
+    const isOpen = open.get(id) ?? false
+
+    return {
+      isOpen,
+      isFocusable,
+      isSelected: selectedId === id,
+      isExpanded: Boolean(options.isExpanded),
+      open: function () {
+        dispatch({ type: TreeViewActionTypes.OPEN, id })
+      },
+      close: function () {
+        dispatch({ type: TreeViewActionTypes.CLOSE, id })
+      },
+      getTreeNodeProps: (props: ComponentPropsWithoutRef<T>) => ({
+        ['aria-expanded']: isOpen,
+        ['aria-selected']: selectedId === id,
+        role: 'treeitem',
+        ...getRovingProps<T>({
+          ...props,
+          [NOT_FOCUSABLE_SELECTOR]: !isOpen,
+          onMouseDown: function (e: MouseEvent) {
+            e.stopPropagation()
+            props?.onMouseDown?.(e)
+            if (e.button === 0) {
+              if (options.isFolder) {
+                isOpen
+                  ? dispatch({
+                      type: TreeViewActionTypes.CLOSE,
+                      id,
+                    })
+                  : dispatch({
+                      type: TreeViewActionTypes.OPEN,
+                      id,
+                    })
+              } else {
+                // openOpen?.()
+              }
+              select(id, options?.data?.nodeType, options?.data?.data)
+            }
+          },
+          onKeyDown: function (e: KeyboardEvent) {
+            e.stopPropagation()
+            props.onKeyDown?.(e)
+
+            let nextItemToFocus: RovingTabindexItem | undefined
+            const items = getOrderedItems()
+
+            if (isHotkey('up', e)) {
+              e.preventDefault()
+              nextItemToFocus = getPrevFocusableId(items, id)
+            } else if (isHotkey('down', e)) {
+              e.preventDefault()
+              nextItemToFocus = getNextFocusableId(items, id)
+            } else if (isHotkey('left', e)) {
+              if (isOpen && options.isFolder) {
+                dispatch({
+                  type: TreeViewActionTypes.CLOSE,
+                  id,
+                })
+              } else {
+                nextItemToFocus = getParentFocusableId(
+                  items,
+                  id,
+                )
+              }
+            } else if (isHotkey('right', e)) {
+              if (isOpen && options.isFolder) {
+                nextItemToFocus = getNextFocusableId(items, id)
+              } else {
+                dispatch({ type: TreeViewActionTypes.OPEN, id })
+              }
+            } else if (isHotkey('home', e)) {
+              e.preventDefault()
+              nextItemToFocus = getFirstFocusableId(items)
+            } else if (isHotkey('end', e)) {
+              e.preventDefault()
+              nextItemToFocus = getLastFocusableId(items)
+            } else if (isHotkey('space', e)) {
+              e.preventDefault()
+              select(id, options?.data?.nodeType, options?.data?.data)
+            } else if (/^[a-z]$/i.test(e.key)) {
+              nextItemToFocus = getNextFocusableIdByTypeahead(
+                items,
+                id,
+                e.key,
+              )
+            }
+
+            if (nextItemToFocus != null) {
+              nextItemToFocus.element.focus()
+              options.selectionType === 'followFocus' &&
+                select(nextItemToFocus.id)
+            }
+          },
+        }),
+      }),
+      treeGroupProps: {
+        role: 'group',
+      },
+    }
+  }, [
+    dispatch,
+    getOrderedItems,
+    getRovingProps,
+    id,
+    isFocusable,
+    open,
+    options.isFolder,
+    options.selectionType,
+    options.isExpanded,
+    select,
+    selectedId,
+  ])
+}

src/components/editor/Editor.tsx

@@ -1,28 +0,0 @@
-import { EditorView } from "@aitube/clapper-services"
-
-import { useEditor } from "@/services"
-
-import EditorSideMenu from "../toolbars/editor-menu/EditorSideMenu"
-
-import { ScriptEditor } from "./ScriptEditor"
-
-export function Editor() {
-const view = useEditor(s => s.view)
-
-return <ScriptEditor />
-/*
-this doesn't work yet:
-return (
-  <div className="flex flex-row flex-grow w-full overflow-hidden">
-    <EditorSideMenu />
-    <div className="flex flex-row flex-grow w-full overflow-hidden">
-      {view === EditorView.SCRIPT 
-        ? <ScriptEditor />
-        : view === EditorView.PROJECT
-        ? <div>TODO</div>
-        : <div>TODO</div>}
-    </div>
-  </div>
-  )
-  */
-}

src/components/editors/Editors.tsx

@@ -0,0 +1,36 @@
+import { EditorView } from "@aitube/clapper-services"
+
+import { useEditors } from "@/services"
+
+import { EditorsSideMenu } from "../toolbars/editors-menu/EditorsSideMenu"
+
+import { ScriptEditor } from "./ScriptEditor"
+import { useTheme } from "@/services/ui/useTheme"
+import { EntityEditor } from "./EntityEditor"
+import { ProjectEditor } from "./ProjectEditor"
+import { SegmentEditor } from "./SegmentEditor"
+
+export function Editors() {
+  const theme = useTheme()
+  const view = useEditors(s => s.view)
+
+  return (
+    <div className="flex flex-row h-full w-full overflow-hidden">
+      <EditorsSideMenu />
+      <div className="flex flex-row h-full w-full overflow-hidden"
+        style={{
+          background: theme.editorBgColor || theme.defaultBgColor || '#000000'
+        }}>
+        {view === EditorView.SCRIPT 
+          ? <ScriptEditor />
+          : view === EditorView.PROJECT
+          ? <ProjectEditor />
+          : view === EditorView.ENTITY
+          ? <EntityEditor />
+          : view === EditorView.SEGMENT
+          ? <SegmentEditor />
+          : <div>TODO</div>}
+      </div>
+    </div>
+  )
+}

src/components/editors/EntityEditor/index.tsx

@@ -0,0 +1,63 @@
+import { FormFile } from "@/components/forms/FormFile"
+import { FormInput } from "@/components/forms/FormInput"
+import { FormSection } from "@/components/forms/FormSection"
+import { useEntityEditor } from "@/services"
+
+export function EntityEditor() {
+  const current = useEntityEditor(s => s.current)
+  const setCurrent = useEntityEditor(s => s.setCurrent)
+  const history = useEntityEditor(s => s.history)
+  const undo = useEntityEditor(s => s.undo)
+  const redo = useEntityEditor(s => s.redo)
+
+  if (!current) {
+    return <div>
+      No Entity selected
+    </div>
+  }
+
+  // TODO: adapt the editor based on the kind of
+  // entity (character, location..)
+  //
+  // I think we can use UI elements of our legacy character editor
+  // that I did in a Hugging Face space
+  return (
+    <FormSection
+      label={"Entity editor"}
+      className="p-4">
+        <label>Visual identity</label>
+        {current?.imageId
+          ? <img src={current?.imageId}></img>
+          : null}
+        <FormFile
+          label={"Visual identity file"}
+        />
+        {/*
+        <FormInput<string>
+          label={"Audio identity"}
+          value={current?.audioId.slice(0, 20)}
+        />
+        */}
+        <FormInput<string>
+          label={"Label"}
+          value={current.label}
+        />
+        <FormInput<string>
+          label={"Description"}
+          value={current.description}
+        />
+        <FormInput<number>
+          label={"Age"}
+          value={current.age}
+        />
+        <FormInput<string>
+          label={"Gender"}
+          value={current.gender}
+        />
+        <FormInput<string>
+          label={"Appearance"}
+          value={current.appearance}
+        />
+      </FormSection>
+  )
+}

src/components/editors/ProjectEditor/index.tsx

@@ -0,0 +1,113 @@
+import { FormFile } from "@/components/forms/FormFile"
+import { FormInput } from "@/components/forms/FormInput"
+import { FormSection } from "@/components/forms/FormSection"
+import { FormSwitch } from "@/components/forms/FormSwitch"
+import { useProjectEditor } from "@/services"
+import { ClapProject } from "@aitube/clap"
+import { useTimeline } from "@aitube/timeline"
+import { useEffect } from "react"
+
+export function ProjectEditor() {
+  const clap: ClapProject | undefined = useTimeline(s => s.clap)
+
+  const current = useProjectEditor(s => s.current)
+  const setCurrent = useProjectEditor(s => s.setCurrent)
+  const history = useProjectEditor(s => s.history)
+  const undo = useProjectEditor(s => s.undo)
+  const redo = useProjectEditor(s => s.redo)
+
+  useEffect(() => {
+    setCurrent(clap?.meta)
+  }, [clap?.meta])
+  
+  if (!current) {
+    return <div>
+      Loading..
+    </div>
+  }
+
+  // TODO: adapt the editor based on the kind of
+  // entity (character, location..)
+  //
+  // I think we can use UI elements of our legacy character editor
+  // that I did in a Hugging Face space
+  return (
+    <FormSection
+      label={"Project Settings"}
+      className="p-4">
+      <FormInput<string>
+        label={"title"}
+        value={current.title || ""}
+        defaultValue=""
+        onChange={title => {
+          setCurrent({ ...current, title })
+        }}
+      />
+      <FormInput<string>
+        label={"Description"}
+        value={current.description || ""}
+        defaultValue=""
+        onChange={description => {
+          setCurrent({ ...current, description })
+        }}
+      />
+      <FormInput<string>
+        label={"Synopsis"}
+        value={current.synopsis || ""}
+        defaultValue=""
+        onChange={synopsis => {
+          setCurrent({ ...current, synopsis })
+        }}
+      />
+      <FormInput<number>
+        label={"Default media width"}
+        value={current.width || 1024}
+        defaultValue={1024}
+        // 4k is 3840×2160
+        // but we can't do that yet obviously
+        minValue={256}
+        maxValue={1024}
+      />
+      <FormInput<number>
+        label={"Default media height"}
+        value={current.height || 576}
+        defaultValue={576}
+        // 4k is 3840×2160
+        // but we can't do that yet obviously
+        minValue={256}
+        maxValue={1024}
+      />
+      {/*
+      for this one we will need some kind of draft mode
+      */}
+      <FormInput<string>
+        label={"Global prompt keywords (\"3D render, comical\"..)"}
+        value={Array.isArray(current.extraPositivePrompt) ? (current.extraPositivePrompt.join(", ")) : ""}
+        onChange={newKeywords => {
+          // const keywords = newKeywords.split(",").map(x => x.trim())
+        }}
+      />
+      <FormInput<string>
+        label={"Licence (commercial, public domain...)"}
+        value={current.licence || ""}
+        onChange={licence => {
+          setCurrent({ ...current, licence })
+        }}
+      />
+      <FormSwitch
+        label={"Is interactive? (WIP feature)"}
+        checked={typeof current.isInteractive === "boolean" ? current.isInteractive : false}
+        onCheckedChange={(isInteractive) => {
+          setCurrent({ ...current, isInteractive: !isInteractive })
+        }}
+      />
+      <FormSwitch
+        label={"Is a loop? (WIP feature)"}
+        checked={typeof current.isLoop === "boolean" ? current.isLoop : false}
+        onCheckedChange={(isLoop) => {
+          setCurrent({ ...current, isLoop: !isLoop })
+        }}
+      />
+    </FormSection>
+  )
+}

src/components/{editor → editors}/ScriptEditor/index.tsx

@@ -1,35 +1,35 @@
 import React, { useEffect, useState } from "react"
 import MonacoEditor from "monaco-editor"
 import Editor, { Monaco } from "@monaco-editor/react"
+import { ClapSegmentCategory } from "@aitube/clap"
 import { DEFAULT_DURATION_IN_MS_PER_STEP, leftBarTrackScaleWidth, TimelineStore, useTimeline } from "@aitube/timeline"
 
-import { useEditor } from "@/services/editor/useEditor"
+import { useScriptEditor } from "@/services/editors/script-editor/useScriptEditor"
 import { useRenderer } from "@/services/renderer"
 import { useUI } from "@/services/ui"
 import { useTheme } from "@/services/ui/useTheme"
 import { themes } from "@/services/ui/theme"
 
 import "./styles.css"
-import { ClapSegmentCategory } from "@aitube/clap"
 
 export function ScriptEditor() {
 
-  const standaloneCodeEditor = useEditor(s => s.standaloneCodeEditor)
-  const setStandaloneCodeEditor = useEditor(s => s.setStandaloneCodeEditor)
-  const draft = useEditor(s => s.draft)
-  const setDraft = useEditor(s => s.setDraft)
-  const loadDraftFromClap = useEditor(s => s.loadDraftFromClap)
-  const onDidScrollChange = useEditor(s => s.onDidScrollChange)
-  const jumpCursorOnLineClick = useEditor(s => s.jumpCursorOnLineClick)
+  const standaloneCodeEditor = useScriptEditor(s => s.standaloneCodeEditor)
+  const setStandaloneCodeEditor = useScriptEditor(s => s.setStandaloneCodeEditor)
+  const draft = useScriptEditor(s => s.draft)
+  const setDraft = useScriptEditor(s => s.setDraft)
+  const loadDraftFromClap = useScriptEditor(s => s.loadDraftFromClap)
+  const onDidScrollChange = useScriptEditor(s => s.onDidScrollChange)
+  const jumpCursorOnLineClick = useScriptEditor(s => s.jumpCursorOnLineClick)
   
   // this is an expensive function, we should only call it on blur or on click on a "save button maybe"
-  const publishDraftToTimeline = useEditor(s => s.publishDraftToTimeline)
+  const publishDraftToTimeline = useScriptEditor(s => s.publishDraftToTimeline)
 
   const clap = useTimeline((s: TimelineStore) => s.clap)
 
   useEffect(() => { loadDraftFromClap(clap) }, [clap])
 
-  const scrollHeight = useEditor(s => s.scrollHeight)
+  const scrollHeight = useScriptEditor(s => s.scrollHeight)
 
   const scrollX = useTimeline(s => s.scrollX)
   const contentWidth = useTimeline(s => s.contentWidth)
@@ -43,7 +43,7 @@ export function ScriptEditor() {
     // let's do something basic for now: we disable the
     // timeline-to-editor scroll sync when the user is
     // hovering the editor
-    if (useEditor.getState().mouseIsInside) { return }
+    if (useScriptEditor.getState().mouseIsInside) { return }
 
      if (horizontalTimelineRatio !== standaloneCodeEditor.getScrollTop()) {
       standaloneCodeEditor.setScrollPosition({ scrollTop: horizontalTimelineRatio })
@@ -67,7 +67,7 @@ export function ScriptEditor() {
   }, [standaloneCodeEditor, horizontalTimelineRatio])
 
   const onMount = (codeEditor: MonacoEditor.editor.IStandaloneCodeEditor) => {
-    const { textModel } = useEditor.getState()
+    const { textModel } = useScriptEditor.getState()
     if (!textModel) { return }
 
     codeEditor.setModel(textModel)
@@ -97,9 +97,9 @@ export function ScriptEditor() {
    // setDraft(plainText || "")
   }
 
-  const setMonaco = useEditor(s => s.setMonaco)
-  const setTextModel = useEditor(s => s.setTextModel)
-  const setMouseIsInside = useEditor(s => s.setMouseIsInside)
+  const setMonaco = useScriptEditor(s => s.setMonaco)
+  const setTextModel = useScriptEditor(s => s.setTextModel)
+  const setMouseIsInside = useScriptEditor(s => s.setMouseIsInside)
   const themeName = useUI(s => s.themeName)
   const editorFontSize = useUI(s => s.editorFontSize)
 
@@ -143,7 +143,7 @@ export function ScriptEditor() {
 
   return (
     <div
-      className="h-full"
+      className="h-full w-full"
       onMouseEnter={() => setMouseIsInside(true)}
       onMouseLeave={() => setMouseIsInside(false)}
     >

src/components/editors/SegmentEditor/index.tsx

@@ -0,0 +1,46 @@
+import { FormInput } from "@/components/forms/FormInput"
+import { FormSection } from "@/components/forms/FormSection"
+import { useSegmentEditor } from "@/services"
+
+export function SegmentEditor() {
+  const current = useSegmentEditor(s => s.current)
+  const setCurrent = useSegmentEditor(s => s.setCurrent)
+  const history = useSegmentEditor(s => s.history)
+  const undo = useSegmentEditor(s => s.undo)
+  const redo = useSegmentEditor(s => s.redo)
+
+  if (!current) {
+    return <div>
+      No segment selected
+    </div>
+  }
+
+  return (
+    <FormSection
+      label={"Project Settings"}
+      className="p-4">
+        <FormInput<string>
+          label={"Label"}
+          value={current.label}
+        />
+        <FormInput<string>
+          label={"Prompt"}
+          value={current.prompt}
+          onChange={(newValue: string) => {
+            setCurrent({
+              ...current,
+              prompt: newValue
+            })
+          }}
+        />
+        <div>
+          <div>Generation status</div>
+          <div>{current.status || "N.A."}</div>
+        </div>
+        <div>
+          <div>Created at</div>
+          <div>{current.createdAt || "N.A."}</div>
+        </div>
+    </FormSection>
+  )
+}

src/components/forms/FormDir.tsx

@@ -14,6 +14,7 @@ export function FormDir({
   onChange,
   horizontal,
   accept,
+  centered,
  }: {
   label?: string
   className?: string
@@ -22,6 +23,7 @@ export function FormDir({
   onChange?: (files: File[]) => void
   horizontal?: boolean
   accept?: string
+  centered?: boolean
   }) {
 
   const handleChange = useMemo(() => (event: ChangeEvent<HTMLInputElement>) => {
@@ -42,6 +44,7 @@ export function FormDir({
       `${label}:`
       }
       horizontal={horizontal}
+      centered={centered}
        >
       <Input
         placeholder={`${placeholder || ""}`}

src/components/forms/FormField.tsx

@@ -4,11 +4,12 @@ import { cn } from "@/lib/utils"
 
 import { FormLabel } from "./FormLabel"
 
-export function FormField({ label, children, className, horizontal = false }: {
+export function FormField({ label, children, className, horizontal = false, centered = false }: {
   label?: ReactNode
   children?: ReactNode
   className?: string
   horizontal?: boolean
+  centered?: boolean
 }) {
   return (
     <div className={cn(
@@ -20,6 +21,9 @@ export function FormField({ label, children, className, horizontal = false }: {
       <div className={cn(
         `flex`,
         horizontal ? '' : 'w-full',
+        centered ? (
+          horizontal ? 'items-center' : 'justify-center'
+        ) : '',
         className
         )}>
         {children}

src/components/forms/FormFile.tsx

@@ -13,7 +13,8 @@ export function FormFile({
   disabled,
   onChange,
   horizontal,
-  accept
+  accept,
+  centered,
  }: {
   label?: string
   className?: string
@@ -22,6 +23,7 @@ export function FormFile({
   onChange?: (files: File[]) => void
   horizontal?: boolean
   accept?: string
+  centered?: boolean
   }) {
   const ref = useRef<HTMLInputElement>(null)
 
@@ -43,6 +45,7 @@ export function FormFile({
       `${label}:`
       }
       horizontal={horizontal}
+      centered={centered}
        >
       <Input
         ref={ref}

src/components/forms/FormInput.tsx

@@ -18,6 +18,7 @@ export function FormInput<T>({
   onChange,
   horizontal,
   type,
+  centered,
   // ...props
  }: {
   label?: ReactNode
@@ -31,6 +32,7 @@ export function FormInput<T>({
   onChange?: (newValue: T) => void
   horizontal?: boolean
   type?: HTMLInputTypeAttribute
+  centered?: boolean
  }
  //  & Omit<ComponentProps<typeof Input>, "value" | "defaultValue" | "placeholder" | "type" | "className" | "disabled" | "onChange">
  // & ComponentProps<typeof Input>
@@ -87,11 +89,15 @@ export function FormInput<T>({
     <FormField
       label={<>{label}:</>}
       horizontal={horizontal}
+      centered={centered}
        >
       <Input
         ref={ref}
         placeholder={`${placeholder || defaultValue || ""}`}
-        className={cn(`w-full md:w-60 lg:w-64 xl:w-80 font-light text-base`, className)}
+        className={cn(
+          `w-full`,
+          `md:w-60 lg:w-64 xl:w-80`,
+          `font-light text-base`, className)}
         disabled={disabled}
         onChange={handleChange}
         // {...props}

src/components/forms/FormRadio.tsx

@@ -4,18 +4,20 @@ import { cn } from "@/lib/utils"
 
 import { FormField } from "./FormField"
 
-export function FormRadio({ label, className, selected, items, horizontal }: {
+export function FormRadio({ label, className, selected, items, horizontal, centered }: {
   label?: string
   className?: string
   selected?: string
   items?: { name: string; label: string; disabled?: boolean }[]
   horizontal?: boolean
+  centered?: boolean
 }) {
   return (
     <FormField
       label={label}
       className={cn(`flex-row space-x-5`, className)}
-      horizontal={horizontal}>
+      horizontal={horizontal}
+      centered={centered}>
       {items?.map(item => (
         <div key={item.name} className={cn(
           `flex flex-row items-center space-x-2`,

src/components/forms/FormSection.tsx

@@ -9,10 +9,15 @@ export function FormSection({ label, children, className, horizontal }: {
   horizontal?: boolean
 }) {
   return (
-    <div className={cn(`flex flex-col space-y-4`)}>
+    <div className={cn(`
+    flex flex-col space-y-4
+    h-full w-full
+    scrollbar-corner-stone-500 scrollbar scrollbar-thumb-stone-700 scrollbar-track-stone-300
+    overflow-y-scroll
+    `, className)}>
       <h2 className="text-4xl font-thin pb-2 text-stone-400">{label}</h2>
       <div className={cn(
-        "flex",
+        "flex w-full",
         horizontal
         ? "flex-row space-x-3 justify-start"
         : "flex-col space-y-6"

src/components/forms/FormSelect.tsx

@@ -14,6 +14,7 @@ export function FormSelect<T>({
   items = [],
   onSelect,
   horizontal,
+  centered,
 }: {
   label?: string
   className?: string
@@ -29,6 +30,7 @@ export function FormSelect<T>({
    }[]
   onSelect?: (value?: T) => void
   horizontal?: boolean
+  centered?: boolean
 }) {
   
   return (
@@ -39,7 +41,8 @@ export function FormSelect<T>({
         : `${label}:`
       }
       className={cn(``, className)}
-      horizontal={horizontal}>
+      horizontal={horizontal}
+      centered={centered}>
       <Select
         onValueChange={(newSelectedItemId: string) => {
           if (!onSelect) {

src/components/forms/FormSwitch.tsx

@@ -5,18 +5,20 @@ import { cn } from "@/lib/utils"
 import { FormField } from "./FormField"
 import { Switch } from "../ui/switch"
 
-export function FormSwitch({ label, className, checked, onCheckedChange, horizontal }: {
+export function FormSwitch({ label, className, checked, onCheckedChange, horizontal, centered }: {
   label?: string
   className?: string
   checked?: boolean
   onCheckedChange: (checked: boolean) => void
   horizontal?: boolean
+  centered?: boolean
 }) {
   return (
     <FormField
       label={label}
       className={cn(`flex-row space-x-5`, className)}
-      horizontal={horizontal}>
+      horizontal={horizontal}
+      centered={centered}>
       <Switch
         checked={checked}
         onCheckedChange={(checked) => {

src/components/icons/getAppropriateIcon.ts

@@ -0,0 +1,97 @@
+import { IconType } from "react-icons/lib"
+
+import { icons } from "."
+
+export const getAppropriateIcon = (rawText: string, defaultIcon?: IconType): IconType => {
+  const text = `${rawText || ""}`.trim().toLowerCase()
+
+  if (text.includes("downloads")) {
+    return icons.downloads
+  }
+
+  if (text.includes("demo scripts") || text.includes("screenplay")) {
+    return icons.screenplay
+  }
+
+  if (text.includes("folder") || text.includes("directory")) {
+    return defaultIcon || icons.misc
+  }
+
+
+  if (text.includes(".clap") || text.includes("clapper")) {
+    return icons.project
+  }
+
+  if (text.includes(".jpg") || text.includes("jpeg") || text.includes(".webp") || text.includes(".png")) {
+    return icons.imagefile
+  }
+
+  if (text.includes(".mp3")) {
+    return icons.soundfile
+  }
+
+  if (text.includes(".mp4")) {
+    return icons.videofile
+  }
+
+  if (text.includes(".txt") || text.includes(".md")) {
+    return icons.textfile
+  }
+
+  if (
+    text.includes("transfer") ||
+    text.includes("transform")
+    ) {
+    return  icons.transfer
+  }
+
+  if (
+    text.includes("interpolator") ||
+    text.includes("interpolate") ||
+    text.includes("interpolation")
+    ) {
+    return icons.interpolate
+  }
+
+  if (
+    text.includes("superresolution") ||
+    text.includes("resolution") ||
+    text.includes("upscaling") ||
+    text.includes("upscaler") ||
+    text.includes("upscale")
+    ) {
+    return icons.upscale
+  }
+
+  if (
+    text.includes("tts") ||
+    text.includes("speech") ||
+    text.includes("voice")
+  ) {
+    return icons.speech
+  }
+
+  if (
+    text.includes("video") ||
+    text.includes("movie")
+  ) {
+    return icons.film
+  }
+
+  if (
+    text.includes("audio") ||
+    text.includes("sound") ||
+    text.includes("music")
+  ) {
+    return icons.sound
+  }
+
+  if (
+    text.includes("image") ||
+    text.includes("photo")
+  ) {
+    return icons.image
+  }
+
+  return defaultIcon || icons.misc
+}

src/components/icons/index.tsx

@@ -0,0 +1,64 @@
+
+import { IconType } from "react-icons/lib"
+
+import { CgClapperBoard } from "react-icons/cg"
+import { LuFileAudio2, LuFileImage, LuFileText, LuFileVideo2, LuScrollText, LuTextCursorInput } from "react-icons/lu"
+import { IoIosColorFilter, IoMdCloudOutline } from "react-icons/io"
+import { MdOutlineVideoSettings } from "react-icons/md"
+import { MdOutlineCorporateFare } from "react-icons/md"
+import { MdQueueMusic } from "react-icons/md"
+import { BsPersonVideo2 } from "react-icons/bs"
+import { RiComputerLine, RiFileVideoLine, RiScissors2Line } from "react-icons/ri"
+import { PiFileVideo } from "react-icons/pi"
+import { RiFolderVideoLine } from "react-icons/ri"
+import { MdGroup } from "react-icons/md"
+import { HiOutlineGlobeAlt } from "react-icons/hi2"
+import { HiOutlineShoppingCart } from "react-icons/hi"
+import { MdOutlineLocationOn } from "react-icons/md"
+import { FaPersonFallingBurst } from "react-icons/fa6"
+import { FaPeoplePulling } from "react-icons/fa6"
+import { MdNaturePeople } from "react-icons/md"
+import { BsSoundwave } from "react-icons/bs"
+import { HiOutlineFilm } from "react-icons/hi"
+import { BiUserVoice } from "react-icons/bi"
+import { BiImage } from "react-icons/bi"
+import { MdOutlineHighQuality } from "react-icons/md"
+import { MdOutlineAutoAwesomeMotion } from "react-icons/md"
+import { BiTransfer } from "react-icons/bi"
+import { LiaFileDownloadSolid } from "react-icons/lia"
+
+
+// icons used for our various model types
+export const icons: Record<string, IconType> = {
+  project: CgClapperBoard,
+  team: MdGroup,
+  computer: RiComputerLine,
+  cloud: IoMdCloudOutline,
+  downloads: LiaFileDownloadSolid,
+  soundfile: LuFileAudio2,
+  imagefile: LuFileImage,
+  videofile: LuFileVideo2,
+  textfile: LuFileText,
+  screenplay: LuScrollText,
+  community: HiOutlineGlobeAlt,
+  vendor: HiOutlineShoppingCart,
+  prompt: LuTextCursorInput,
+  characters: FaPersonFallingBurst,
+  character: BsPersonVideo2,
+  transition: RiScissors2Line,
+  location: MdOutlineLocationOn,
+  misc: MdNaturePeople,
+  lora: BsPersonVideo2,
+  sound: BsSoundwave,
+  film: HiOutlineFilm,
+  speech: BiUserVoice,
+  image: BiImage,
+  transfer: BiTransfer,
+  interpolate: MdOutlineAutoAwesomeMotion,
+  upscale: MdOutlineHighQuality,
+  textToVideo: MdOutlineVideoSettings,
+  videoToVideo: IoIosColorFilter,
+  textToMusic: MdQueueMusic,
+  referenceVideoFolder: RiFolderVideoLine,
+  referenceVideoFile: PiFileVideo,
+}

src/components/settings/constants.ts

@@ -222,6 +222,7 @@ export const availableModelsForImageGeneration: Partial<Record<ComputeProvider,
 
 export const availableModelsForImageUpscaling: Partial<Record<ComputeProvider, string[]>> = {
   [ComputeProvider.FALAI]: [
+    "fal-ai/aura-sr", // "input": { "image_url": "<url>" }
     "fal-ai/ccsr",
   ],
   [ComputeProvider.STABILITYAI]: [

src/components/toolbars/{editor-menu/EditorSideMenu.tsx → editors-menu/EditorsSideMenu.tsx}

@@ -1,27 +1,30 @@
 "use client"
 
 import { LiaCogSolid, LiaTheaterMasksSolid } from "react-icons/lia"
-import { MdAccountCircle, MdOutlineAccountTree, MdOutlineHistoryEdu } from "react-icons/md"
+import { MdAccountCircle, MdLocalMovies, MdOutlineAccountTree, MdOutlineHistoryEdu } from "react-icons/md"
 import { LuClapperboard } from "react-icons/lu"
-
-import { useEditor } from "@/services/editor/useEditor"
-import { EditorSideMenuItem } from "./EditorSideMenuItem"
+import { IoFilmOutline } from "react-icons/io5"
 import { EditorView } from "@aitube/clapper-services"
+
 import { useTheme } from "@/services/ui/useTheme"
+import { EditorsSideMenuItem } from "./EditorsSideMenuItem"
 
-export default function EditorSideMenu() {
+export function EditorsSideMenu() {
   const theme = useTheme()
   return (
 
     <div className="flex flex-col w-14 h-full items-center justify-between border-r"
     style={{
-      borderRightColor: theme.defaultTextColor || "#eeeeee"
+      backgroundColor: theme.editorMenuBgColor || theme.defaultBgColor || "#eeeeee",
+      borderRightColor: theme.editorBorderColor || theme.defaultBorderColor || "#eeeeee"
     }}
     >
       <div className="flex flex-col h-full w-full items-center">
 
-        <EditorSideMenuItem view={EditorView.PROJECT}><LuClapperboard /></EditorSideMenuItem>
-        <EditorSideMenuItem view={EditorView.SCRIPT} label="Script editor"><MdOutlineHistoryEdu /></EditorSideMenuItem>
+        <EditorsSideMenuItem view={EditorView.PROJECT}><MdLocalMovies /></EditorsSideMenuItem>
+        <EditorsSideMenuItem view={EditorView.SCRIPT} label="Script editor"><MdOutlineHistoryEdu /></EditorsSideMenuItem>
+        <EditorsSideMenuItem view={EditorView.ENTITY} label="Entity editor"><LiaTheaterMasksSolid /></EditorsSideMenuItem>
+        <EditorsSideMenuItem view={EditorView.SEGMENT} label="Segment editor"><IoFilmOutline /></EditorsSideMenuItem>
 
         {/*<EditorSideMenuItem name="Characters"><LiaTheaterMasksSolid /></EditorSideMenuItem>*/}
         {/*<EditorSideMenuItem name="Project"><MdLocalMovies /></EditorSideMenuItem>*/}

src/components/toolbars/{editor-menu/EditorSideMenuItem.tsx → editors-menu/EditorsSideMenuItem.tsx}

@@ -4,10 +4,10 @@ import { EditorView } from "@aitube/clapper-services"
 import { cn } from "@/lib/utils"
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { useEditor } from "@/services/editor/useEditor"
+import { useEditors } from "@/services/editors/useEditors"
 import { useTheme } from "@/services/ui/useTheme"
 
-export function EditorSideMenuItem({
+export function EditorsSideMenuItem({
   children,
   view: expectedView,
   label,
@@ -31,8 +31,8 @@ export function EditorSideMenuItem({
   unmanaged?: boolean
 }) {
   const theme = useTheme()
-  const view = useEditor(s => s.view)
-  const setView = useEditor(s => s.setView)
+  const view = useEditors(s => s.view)
+  const setView = useEditors(s => s.setView)
 
   const isActive = !unmanaged && view === expectedView
 
@@ -66,7 +66,7 @@ export function EditorSideMenuItem({
           `group`
         )}
         style={{
-          background: theme.editorBgColor || "#eeeeee",
+          // background: theme.editorMenuBgColor || theme.defaultBgColor || "#eeeeee",
           borderColor: isActive ? theme.defaultPrimaryColor || "#ffffff" : "#111827"
         }}
         onClick={handleClick}>
@@ -74,6 +74,7 @@ export function EditorSideMenuItem({
             `flex-col items-center justify-center`,
             `text-center text-[28px]`,
             `transition-all duration-200 ease-out`,
+            `stroke-1`,
             isActive ? `scale-110` : `group-hover:scale-110`
           )}>
             {children}

src/components/tree-browsers/model-tree-browser/index.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { cn } from "@/lib/utils"
+import { useEntityLibrary } from "../stores/useEntityLibrary"
+import { LibraryNodeItem, LibraryNodeType } from "../types"
+import { Tree } from "@/components/core/tree"
+
+import { isClapEntity, isReplicateCollection } from "../utils/isSomething"
+import { useCivitaiCollections } from "../stores/useCivitaiCollections"
+import { useReplicateCollections } from "../stores/useReplicateCollections"
+
+export function ModelTreeBrowser() {
+  const libraryTreeRoot = useEntityLibrary(s => s.libraryTreeRoot)
+  const selectTreeNode = useEntityLibrary(s => s.selectTreeNode)
+  const selectedTreeNodeId = useEntityLibrary(s => s.selectedTreeNodeId)
+  const setReplicateCollections = useEntityLibrary(s => s.setReplicateCollections)
+  const setCivitaiCollections = useEntityLibrary(s => s.setCivitaiCollections)
+ 
+  // TODO: we are forced to do this because the api "endpoint" is a server action
+  // however we could rewrite it so that we can pull the collections directly
+  // from the Zustand store
+
+  const newReplicateCollections = useReplicateCollections()
+  useEffect(() => {
+    setReplicateCollections(newReplicateCollections)
+  }, [
+    JSON.stringify(newReplicateCollections) // ... yeah, I know, I know..
+  ])
+  
+  const newCivitaiCollections = useCivitaiCollections()
+  useEffect(() => {
+    setCivitaiCollections(newCivitaiCollections)
+  }, [
+    JSON.stringify(newCivitaiCollections) // ... yeah, I know, I know..
+  ])
+  
+
+  /**
+   * handle click on tree node
+   * yes, this is where the magic happens!
+   * 
+   * @param id 
+   * @param nodeType 
+   * @param node 
+   * @returns 
+   */
+  const handleOnChange = async (id: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => {
+    console.log(`calling selectTreeNodeById(id)`)
+    selectTreeNode(id, nodeType, nodeItem)
+
+    if (!nodeType || !nodeItem) {
+      console.log("tree-browser: clicked on an undefined node")
+      return
+    }
+
+    if (isReplicateCollection(nodeType, nodeItem)) {
+      // ReplicateCollection
+    } else if (isClapEntity(nodeType, nodeItem)) {
+      // ClapEntity
+    } else {
+      console.log(`tree-browser: no action attached to ${nodeType}, so skipping`)
+      return
+    }
+    console.log(`tree-browser: clicked on a ${nodeType}`, nodeItem)
+  }
+
+  return (
+
+    <div className={cn(
+    )}>
+      <Tree.Root<LibraryNodeType, LibraryNodeItem>
+        value={selectedTreeNodeId}
+        onChange={handleOnChange}
+
+        className="w-full h-full not-prose px-2 pt-8"
+        label="Model Library"
+      >
+      {libraryTreeRoot.map(node => (
+        <Tree.Node node={node} key={node.id} />
+      ))}
+      </Tree.Root>
+    </div>
+  )
+}

src/components/tree-browsers/model-tree-browser/tree-item-viewer.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { useEntityLibrary } from "../stores/useEntityLibrary"
+
+export function TreeItemViewer() {
+  const selectedNodeItem = useEntityLibrary(s => s.selectedNodeItem)
+  const selectedNodeType = useEntityLibrary(s => s.selectedNodeType)
+
+  const nodeType = selectedNodeType
+  const data = selectedNodeItem
+
+  if (!nodeType || !data) { return null }
+
+  return (
+    <div className="pt-8">
+      The selected item cannot be preview. 
+    </div>
+  )
+}

src/components/tree-browsers/project-tree-browser/index.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { isClapEntity } from "../utils/isSomething"
+import { useProjectLibrary } from "../stores/useProjectLibrary"
+import { LibraryNodeItem, LibraryNodeType } from "../types"
+import { Tree } from "@/components/core/tree"
+
+export function ProjectTreeBrowser() {
+  const libraryTreeRoot = useProjectLibrary(s => s.libraryTreeRoot)
+  const selectTreeNode = useProjectLibrary(s => s.selectTreeNode)
+  const selectedTreeNodeId = useProjectLibrary(s => s.selectedTreeNodeId)
+
+  /**
+   * handle click on tree node
+   * yes, this is where the magic happens!
+   * 
+   * @param id 
+   * @param nodeType 
+   * @param node 
+   * @returns 
+   */
+  const handleOnChange = async (id: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => {
+    console.log(`calling selectTreeNodeById(id)`)
+    selectTreeNode(id, nodeType, nodeItem)
+
+    if (!nodeType || !nodeItem) {
+      console.log("tree-browser: clicked on an undefined node")
+      return
+    }
+    if (isClapEntity(nodeType, nodeItem)) {
+      // ClapEntity
+    } else {
+      console.log(`tree-browser: no action attached to ${nodeType}, so skipping`)
+      return
+    }
+    console.log(`tree-browser: clicked on a ${nodeType}`, nodeItem)
+  }
+
+  return (
+
+    <div className={cn(
+    )}>
+      <Tree.Root<LibraryNodeType, LibraryNodeItem>
+        value={selectedTreeNodeId}
+        onChange={handleOnChange}
+
+        className="w-full h-full not-prose px-2 pt-8"
+        label="Project Library"
+      >
+      {libraryTreeRoot.map(node => (
+        <Tree.Node node={node} key={node.id} />
+      ))}
+      </Tree.Root>
+    </div>
+  )
+}

src/components/tree-browsers/project-tree-browser/tree-item-viewer.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { useEntityLibrary } from "../stores/useEntityLibrary"
+
+export function TreeItemViewer() {
+  const selectedNodeItem = useEntityLibrary(s => s.selectedNodeItem)
+  const selectedNodeType = useEntityLibrary(s => s.selectedNodeType)
+
+  const nodeType = selectedNodeType
+  const data = selectedNodeItem
+
+  if (!nodeType || !data) { return null }
+
+  return (
+    <div>TODO</div>
+  )
+}

src/components/tree-browsers/stores/useCivitaiCollections.ts

@@ -0,0 +1,25 @@
+"use client"
+
+import { useEffect, useState, useTransition } from "react"
+import { CivitaiCollection } from "../types"
+
+
+export function useCivitaiCollections(): CivitaiCollection[] {
+  const [_pending, startTransition] = useTransition()
+  const [collections, setCollections] = useState<CivitaiCollection[]>([])
+  // const [models, setModels] = useState<CivitaiModel[]>([])
+
+  useEffect(() => {
+    startTransition(async () => {
+      // TODO @Julian: this was something we did in the ligacy
+      // Clapper, but I'm not sure we want to support Civitai
+      // again just yet, we probably require other arch changes
+      // const collections = await listCollections()
+      const collections: CivitaiCollection[] = []
+      setCollections(collections)
+     //  setModels(models)
+    })
+  }, [])
+
+  return collections
+}

src/components/tree-browsers/stores/useEntityLibrary.ts

@@ -0,0 +1,322 @@
+"use client"
+
+import { create } from "zustand"
+import { ClapEntity, UUID } from "@aitube/clap"
+import { CivitaiCollection, LibraryNodeItem, LibraryNodeType, LibraryTreeNode, ReplicateCollection } from "../types"
+import { icons } from "@/components/icons"
+import { getAppropriateIcon } from "@/components/icons/getAppropriateIcon"
+
+
+// TODO: this isn't the best place for this as this is style,
+// and we are in a state manager
+const libraryClassName = "text-base font-semibold"
+
+const collectionClassName = `text-base font-normal`
+
+const itemClassName = "text-sm font-light text-gray-200/60 hover:text-gray-200/100"
+
+export const useEntityLibrary = create<{
+  teamLibraryTreeNodeId: string
+  communityLibraryTreeNodeId: string
+  civitaiLibraryTreeNodeId: string
+  huggingfaceLibraryTreeNodeId: string
+  replicateLibraryTreeNodeId: string
+  libraryTreeRoot: LibraryTreeNode[]
+  init: () => void
+
+  /**
+   * Load Replicate collections (API models) into the tree
+   * 
+   * @param collections
+   * @returns 
+   */
+  setReplicateCollections: (collections: ReplicateCollection[]) => void
+  
+  /**
+   * Load Replicate collections (LoRA models) into the tree
+   * 
+   * @param collections
+   * @returns 
+   */
+  setCivitaiCollections: (collections: CivitaiCollection[]) => void
+  
+  // we support those all selection modes for convenience - please keep them!
+  selectedNodeItem?: LibraryNodeItem
+  selectedNodeType?: LibraryNodeType
+  selectTreeNode: (treeNodeId?: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => void
+  selectedTreeNodeId: string | null
+}>((set, get) => ({
+  localUserLibraryTreeNodeId: "",
+  huggingfaceUserLibraryTreeNodeId: "",
+  teamLibraryTreeNodeId: "",
+  communityLibraryTreeNodeId: "",
+  civitaiLibraryTreeNodeId: "",
+  huggingfaceLibraryTreeNodeId: "",
+  replicateLibraryTreeNodeId: "",
+  libraryTreeRoot: [],
+  init: () => {
+    const teamLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_TEAM_COLLECTION",
+      label: 'Team models',
+      icon: icons.team,
+      className: libraryClassName,
+      isExpanded: true,
+      children: [
+        {
+          id: UUID(),
+          nodeType: "LIB_NODE_GENERIC_EMPTY",
+          label: 'A - 2',
+          icon: icons.team,
+          className: collectionClassName,
+        }
+      ]
+    }
+
+
+    const civitaiLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_CIVITAI_COLLECTION",
+      label: 'Civitai models',
+      icon: icons.community,
+      className: libraryClassName,
+      children: []
+    }
+  
+    const communityLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_COMMUNITY_COLLECTION",
+      label: 'Community models',
+      icon: icons.community,
+      className: libraryClassName,
+      children: [
+        {
+          id: UUID(),
+          nodeType: "LIB_NODE_GENERIC_EMPTY",
+          label: 'A - 2',
+          icon: icons.community,
+          className: collectionClassName,
+        }
+      ]
+    }
+
+    const huggingfaceLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_HUGGINGFACE_COLLECTION",
+      label: 'Hugging Face',
+      icon: icons.vendor,
+      className: libraryClassName,
+      children: []
+    }
+
+    const replicateLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_REPLICATE_COLLECTION",
+      label: 'Replicate',
+      icon: icons.vendor,
+      isExpanded: false, // This node is expanded by default
+      className: libraryClassName,
+      children: []
+    }
+  
+    const libraryTreeRoot = [
+      // teamLibrary,
+      // communityLibrary,
+      civitaiLibrary,
+      // huggingfaceLibrary,
+      replicateLibrary,
+    ]
+    
+    set({
+      teamLibraryTreeNodeId: teamLibrary.id,
+      civitaiLibraryTreeNodeId: civitaiLibrary.id,
+      communityLibraryTreeNodeId: communityLibrary.id,
+      huggingfaceLibraryTreeNodeId: huggingfaceLibrary.id,
+      replicateLibraryTreeNodeId: replicateLibrary.id,
+      libraryTreeRoot,
+      selectedNodeItem: undefined,
+      selectedTreeNodeId: null,
+    })
+  },
+
+  setProjectEntities: async (entities: ClapEntity[]) => {
+
+    const characters: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_GENERIC_COLLECTION",
+      data: undefined,
+      label: 'Characters',
+      icon: icons.characters,
+      className: collectionClassName,
+      isExpanded: true, // This node is expanded by default
+      children: []
+    }
+
+    const locations: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_GENERIC_COLLECTION",
+      data: undefined,
+      label: 'Locations',
+      icon: icons.location,
+      className: collectionClassName,
+      isExpanded: false, // This node is expanded by default
+      children: []
+    }
+
+    const misc: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_GENERIC_COLLECTION",
+      data: undefined,
+      label: 'Misc',
+      icon: icons.misc,
+      className: collectionClassName,
+      isExpanded: false, // This node is expanded by default
+      children: []
+    }
+
+    entities.forEach(entity => {
+      const node: LibraryTreeNode = {
+        nodeType: "LIB_NODE_REPLICATE_MODEL",
+        id: entity.id,
+        data: entity,
+        label: entity.label,
+        icon: icons.misc,
+        className: itemClassName,
+      }
+      if (entity.category === "character") {
+        node.icon = icons.character 
+        characters.children!.push(node)
+      } else if (entity.category === "location") {
+        node.icon = icons.location
+        locations.children!.push(node)
+      } else {
+        misc.children!.push(node)
+      }
+    })
+  },
+
+  setReplicateCollections: (collections: ReplicateCollection[]) => {
+    const { replicateLibraryTreeNodeId, libraryTreeRoot } = get()
+
+    set({
+      libraryTreeRoot: libraryTreeRoot.map(node => {
+        if (node.id !== replicateLibraryTreeNodeId) { return node }
+
+        return {
+          ...node,
+
+          children:
+
+            // only keep non-empty models
+            collections.filter(c => c.models.length)
+
+            // only visual or sound oriented models
+            .filter(c => {
+              const name = c.name.toLowerCase()
+
+              // ignore captioning models, we don't need this right now
+              if (name.includes("to text") || name.includes("to-text")) {
+                return false
+              }
+
+              if (
+                name.includes("image") ||
+                name.includes("video") ||
+                name.includes("style") ||
+                name.includes("audio") ||
+                name.includes("sound") ||
+                name.includes("music") ||
+                name.includes("speech") ||
+                name.includes("voice") ||
+                name.includes("resolution") ||
+                name.includes("upscale") ||
+                name.includes("upscaling") ||
+                name.includes("interpolate") ||
+                name.includes("interpolation")
+              ) {
+                return true
+              }
+              return false
+            })
+            .map<LibraryTreeNode>(c => ({
+            id: UUID(),
+            data: c,
+            nodeType: "LIB_NODE_REPLICATE_COLLECTION",
+            label: c.name,
+            icon: getAppropriateIcon(c.name),
+            className: collectionClassName, // `${collectionClassName} ${getCollectionColor(c.name)}`,
+            isExpanded: false, // This node is expanded by default
+            children: c.models.map<LibraryTreeNode>(m => ({
+              nodeType: "LIB_NODE_REPLICATE_MODEL",
+              id: m.id,
+              data: m,
+              label: m.label,
+              icon: getAppropriateIcon(m.label, getAppropriateIcon(c.name)),
+              className: itemClassName, // `${itemClassName} ${getItemColor(m.label, getItemColor(c.name))}`,
+            })),
+          }))
+        }
+      })
+    })
+  },
+
+  setCivitaiCollections: (collections: CivitaiCollection[]) => {
+    const { civitaiLibraryTreeNodeId, libraryTreeRoot } = get()
+
+    set({
+      libraryTreeRoot: libraryTreeRoot.map(node => {
+        if (node.id !== civitaiLibraryTreeNodeId) { return node }
+
+        return {
+          ...node,
+
+          children: collections.map<LibraryTreeNode>(c => ({
+            id: UUID(),
+            data: c,
+            nodeType: "LIB_NODE_CIVITAI_COLLECTION",
+            label: c.name,
+            icon: getAppropriateIcon(c.name),
+            className: collectionClassName, // `${collectionClassName} ${getCollectionColor(c.name)}`,
+            isExpanded: false, // This node is expanded by default
+            children: c.models.map<LibraryTreeNode>(m => ({
+              nodeType: "LIB_NODE_CIVITAI_MODEL",
+              id: m.id,
+              data: m,
+              label: m.label,
+              icon: getAppropriateIcon(m.label, getAppropriateIcon(c.name)),
+              className: itemClassName, // `${itemClassName} ${getItemColor(m.label, getItemColor(c.name))}`,
+            })),
+          }))
+        }
+      })
+    })
+  },
+
+  selectedNodeItem: undefined,
+  selectEntity: (entity?: ClapEntity) => {
+    if (entity) {
+      console.log("TODO julian: change this code to search in the entity collections")
+      const selectedTreeNode =
+        get().libraryTreeRoot
+        .find(node => node.data?.id === entity.id)
+
+      // set({ selectedTreeNode })
+      set({ selectedTreeNodeId: selectedTreeNode?.id || null })
+      set({ selectedNodeItem: entity })
+    } else {
+      // set({ selectedTreeNode: undefined })
+      set({ selectedTreeNodeId:  null })
+      set({ selectedNodeItem: undefined })
+    }
+  },
+
+  // selectedTreeNode: undefined,
+  selectedTreeNodeId: null,
+  selectTreeNode: (treeNodeId?: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => {
+    set({ selectedTreeNodeId: treeNodeId ? treeNodeId : undefined })
+    set({ selectedNodeType: nodeType ? nodeType : undefined })
+    set({ selectedNodeItem: nodeItem ? nodeItem : undefined })
+  },
+}))
+
+useEntityLibrary.getState().init()

src/components/tree-browsers/stores/useFileLibrary.txt

@@ -0,0 +1,211 @@
+"use client"
+
+import { create } from "zustand"
+
+import { ClapEntity, UUID } from "@aitube/clap"
+import { HuggingFaceUserCollection, LibraryNodeItem, LibraryNodeType, LibraryTreeNode, LocalUserCollection } from "../types"
+import { icons } from "@/components/icons"
+import { getAppropriateIcon } from "@/components/icons/getAppropriateIcon"
+import { className } from "@/app/fonts"
+import { getCollectionItemTextColor } from "../utils/getCollectionItemTextColor"
+
+// TODO: this isn't the best place for this as this is style,
+// and we are in a state manager
+const libraryClassName = "text-base font-semibold"
+
+const collectionClassName = `text-base font-normal`
+
+const itemClassName = "text-sm font-light text-gray-200/60 hover:text-gray-200/100"
+
+export const useFileLibrary = create<{
+  localUserLibraryTreeNodeId: string
+  huggingfaceUserLibraryTreeNodeId: string
+  libraryTreeRoot: LibraryTreeNode[]
+  init: () => void
+
+  /**
+   * Load local user collections (projects, assets) into the tree
+   * 
+   * @param collections
+   * @returns 
+   */
+  setLocalUserCollections: (collections: LocalUserCollection[]) => void
+  
+  /**
+   * Load Hugging Face user collections (projects, assets) into the tree
+   * 
+   * @param collections
+   * @returns 
+   */
+  setHuggingFaceUserCollections: (collections: HuggingFaceUserCollection[]) => void
+
+  // we support those all selection modes for convenience - please keep them!
+  selectedNodeItem?: LibraryNodeItem
+  selectedNodeType?: LibraryNodeType
+  selectTreeNode: (treeNodeId?: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => void
+  selectedTreeNodeId: string | null
+}>((set, get) => ({
+  localUserLibraryTreeNodeId: "",
+  huggingfaceUserLibraryTreeNodeId: "",
+  libraryTreeRoot: [],
+  init: () => {
+
+    const localUserLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_LOCAL_USER_COLLECTION",
+      label: "My Computer",
+      icon: icons.computer,
+      className: libraryClassName,
+      isExpanded: true, // This node is expanded by default
+      children: [
+        {
+          id: UUID(),
+          nodeType: "LIB_NODE_GENERIC_EMPTY",
+          label: "(No files to display)",
+          icon: icons.misc,
+          className: `${collectionClassName} text-gray-100/30`,
+          isExpanded: false, // This node is expanded by default
+          children: []
+        }
+      ]
+    }
+
+    const huggingfaceUserLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_HUGGINGFACE_USER_COLLECTION",
+      label: "My HF Cloud",
+      icon: icons.cloud,
+      className: libraryClassName,
+      isExpanded: true, // This node is expanded by default
+      children: [
+        {
+          id: UUID(),
+          nodeType: "LIB_NODE_GENERIC_EMPTY",
+          label: "(No files to display)",
+          icon: icons.misc,
+          className: `${collectionClassName} text-gray-100/30`,
+          isExpanded: false, // This node is expanded by default
+          children: []
+        }
+      ]
+    }
+
+    const libraryTreeRoot = [
+      localUserLibrary,
+      huggingfaceUserLibrary,
+    ]
+    
+    set({
+      localUserLibraryTreeNodeId: localUserLibrary.id,
+      huggingfaceUserLibraryTreeNodeId: huggingfaceUserLibrary.id,
+      libraryTreeRoot,
+      selectedNodeItem: undefined,
+      selectedTreeNodeId: null,
+    })
+  },
+
+  setLocalUserCollections: (collections: LocalUserCollection[]) => {
+    const { localUserLibraryTreeNodeId, libraryTreeRoot } = get()
+
+    console.log("setLocalUserCollections:", collections)
+
+    set({
+      libraryTreeRoot: libraryTreeRoot.map(node => {
+        if (node.id !== localUserLibraryTreeNodeId) { return node }
+
+        return {
+          ...node,
+
+          children: collections.map<LibraryTreeNode>(c => ({
+            id: UUID(),
+            nodeType: "LIB_NODE_LOCAL_USER_FOLDER",
+            data: c,
+            label: c.name, // file directory name
+            icon: getAppropriateIcon(c.name),
+            className: collectionClassName, // `${collectionClassName} ${getCollectionColor(c.name)}`,
+            isExpanded: false, // This node is expanded by default
+            children: c.items.map<LibraryTreeNode>(m => ({
+              nodeType: "LIB_NODE_LOCAL_USER_FILE",
+              id: m.id,
+              data: m,
+              label: <><span>{
+                m.fileName.split(".").slice(0, -1)
+              }</span><span className="opacity-50">{
+                `.${m.fileName.split(".").pop()}`
+              }</span></>,
+              icon: getAppropriateIcon(m.fileName, getAppropriateIcon(c.name)),
+              className: `${itemClassName} ${
+                getCollectionItemTextColor(m.fileName)
+              }`, // `${itemClassName} ${getItemColor(m.label, getItemColor(c.name))}`,
+            }))
+          }))
+        }
+      })
+    })
+  },
+
+  setHuggingFaceUserCollections: (collections: HuggingFaceUserCollection[]) => {
+    const { huggingfaceUserLibraryTreeNodeId, libraryTreeRoot } = get()
+
+    set({
+      libraryTreeRoot: libraryTreeRoot.map(node => {
+        if (node.id !== huggingfaceUserLibraryTreeNodeId) { return node }
+
+        return {
+          ...node,
+
+          children: collections.map<LibraryTreeNode>(c => ({
+            id: c.id,
+            nodeType: "LIB_NODE_HUGGINGFACE_USER_DATASET",
+            data: c,
+            label: c.name, // file directory name
+            icon: getAppropriateIcon(c.name),
+            className: collectionClassName, // `${collectionClassName} ${getCollectionColor(c.name)}`,
+            isExpanded: false, // This node is expanded by default
+            children: c.items.map<LibraryTreeNode>(m => ({
+              nodeType: "LIB_NODE_HUGGINGFACE_USER_FILE",
+              id: m.id,
+              data: m,
+              label: <><span>{
+                m.fileName.split(".").slice(0, -1)
+              }</span><span className="opacity-50">{
+                `.${m.fileName.split(".").pop()}`
+              }</span></>,
+              icon: getAppropriateIcon(m.fileName, getAppropriateIcon(c.name)),
+              className: `${itemClassName} ${
+                getCollectionItemTextColor(m.fileName)
+              }`, // `${itemClassName} ${getItemColor(m.label, getItemColor(c.name))}`,
+            }))
+          }))
+        }
+      })
+    })
+  },
+    
+  selectedNodeItem: undefined,
+  selectEntity: (entity?: ClapEntity) => {
+    if (entity) {
+      console.log("TODO julian: change this code to search in the entity collections")
+      const selectedTreeNode =
+        get().libraryTreeRoot
+        .find(node => node.data?.id === entity.id)
+
+      // set({ selectedTreeNode })
+      set({ selectedTreeNodeId: selectedTreeNode?.id || null })
+      set({ selectedNodeItem: entity })
+    } else {
+      // set({ selectedTreeNode: undefined })
+      set({ selectedTreeNodeId:  null })
+      set({ selectedNodeItem: undefined })
+    }
+  },
+  // selectedTreeNode: undefined,
+  selectedTreeNodeId: null,
+  selectTreeNode: (treeNodeId?: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => {
+    set({ selectedTreeNodeId: treeNodeId ? treeNodeId : undefined })
+    set({ selectedNodeType: nodeType ? nodeType : undefined })
+    set({ selectedNodeItem: nodeItem ? nodeItem : undefined })
+  }
+}))
+
+useFileLibrary.getState().init()

src/components/tree-browsers/stores/useProjectLibrary.ts

@@ -0,0 +1,135 @@
+"use client"
+
+import { create } from "zustand"
+import { ClapEntity, UUID } from "@aitube/clap"
+
+import { icons } from "@/components/icons"
+
+import { LibraryNodeItem, LibraryNodeType, LibraryTreeNode } from "../types"
+
+// TODO: this isn't the best place for this as this is style,
+// and we are in a state manager
+const libraryClassName = "text-base font-semibold"
+
+const collectionClassName = `text-base font-normal`
+
+const itemClassName = "text-sm font-light text-gray-200/60 hover:text-gray-200/100"
+
+export const useProjectLibrary = create<{
+  libraryTreeRoot: LibraryTreeNode[]
+  init: () => void
+  setProjectEntities: (entities: ClapEntity[]) => Promise<void>
+  selectedNodeItem?: LibraryNodeItem
+  selectedNodeType?: LibraryNodeType
+  selectEntity: (entity?: ClapEntity) => void
+  selectTreeNode: (treeNodeId?: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => void
+  selectedTreeNodeId: string | null
+}>((set, get) => ({
+  libraryTreeRoot: [],
+  init: () => {
+
+    set({
+      libraryTreeRoot: [],
+      selectedNodeItem: undefined,
+      selectedTreeNodeId: null,
+      // selectedTreeNode: undefined,
+    })
+  },
+
+  setProjectEntities: async (entities: ClapEntity[]) => {
+    const { libraryTreeRoot } = get()
+
+    const characters: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_GENERIC_COLLECTION",
+      data: undefined,
+      label: 'Characters',
+      icon: icons.characters,
+      className: libraryClassName,
+      isExpanded: true, // This node is expanded by default
+      children: []
+    }
+
+    const locations: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_GENERIC_COLLECTION",
+      data: undefined,
+      label: 'Locations',
+      icon: icons.location,
+      className: libraryClassName,
+      isExpanded: true, // This node is expanded by default
+      children: []
+    }
+
+    const misc: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: "LIB_NODE_GENERIC_COLLECTION",
+      data: undefined,
+      label: 'Misc',
+      icon: icons.misc,
+      className: libraryClassName,
+      isExpanded: true, // This node is expanded by default
+      children: []
+    }
+
+
+    entities.forEach(entity => {
+      const node: LibraryTreeNode = {
+        nodeType: "LIB_NODE_PROJECT_ENTITY_GENERIC",
+        id: entity.id,
+        data: entity,
+        label: entity.label,
+        icon: icons.misc,
+        className: collectionClassName,
+      }
+      if (entity.category === "character") {
+        node.icon = icons.character 
+        node.nodeType = "LIB_NODE_PROJECT_ENTITY_CHARACTER"
+        characters.children!.push(node)
+      } else if (entity.category === "location") {
+        node.icon = icons.location
+        node.nodeType = "LIB_NODE_PROJECT_ENTITY_LOCATION"
+        locations.children!.push(node)
+      } else {
+        misc.children!.push(node)
+      }
+    })
+
+    set({
+      libraryTreeRoot: [
+        characters,
+        locations,
+        misc
+      // displaying an empty collection isn't very useful,
+      // so let's just clean them out
+      ].filter(node => node.children?.length) 
+    })
+  },
+
+  selectedNodeItem: undefined,
+  selectEntity: (entity?: ClapEntity) => {
+    if (entity) {
+      console.log("TODO julian: change this code to search in the model collections")
+      const selectedTreeNode =
+        get().libraryTreeRoot
+        .find(node => node.data?.id === entity.id)
+
+      // set({ selectedTreeNode })
+      set({ selectedTreeNodeId: selectedTreeNode?.id || null })
+      set({ selectedNodeItem: entity })
+    } else {
+      // set({ selectedTreeNode: undefined })
+      set({ selectedTreeNodeId:  null })
+      set({ selectedNodeItem: undefined })
+    }
+  },
+  // selectedTreeNode: undefined,
+  selectedTreeNodeId: null,
+  selectTreeNode: (treeNodeId?: string | null, nodeType?: LibraryNodeType, nodeItem?: LibraryNodeItem) => {
+    set({ selectedTreeNodeId: treeNodeId ? treeNodeId : undefined })
+    set({ selectedNodeType: nodeType ? nodeType : undefined })
+    set({ selectedNodeItem: nodeItem ? nodeItem : undefined })
+  }
+}))
+
+useProjectLibrary.getState().init()