add example sources stars

bump to v1.5.2 for modal resize
add resize to BrowserModal
2023-12-20 12:42:01 +08:00 · 2023-12-20 11:05:03 +08:00 · 2023-12-20 11:03:24 +08:00 · 2023-12-20 09:13:10 +08:00 · 2023-12-20 08:57:01 +08:00 · 2023-12-20 08:47:09 +08:00
34 changed files with 699 additions and 200 deletions
@@ -0,0 +1,11 @@
+---
+name: New workflow repository
+about: new workflow repository
+title: 'New workflow repo:'
+labels: workflow-repo
+assignees: tzwm
+
+---
+
+My workflow repository link:
+Description:
@@ -1,3 +1,4 @@
 config.json
+__pycache__/
 collections/
 sources/
@@ -1,5 +1,20 @@
 # ChangeLog

+## v1.5.2 - 2023-12-20
+
+- Support resize the modal
+- Remember the last Tab select
+
+## v1.5.1 - 2023-12-20
+
+- Add Side/Center toggle
+- Update styles for responsive
+
+## v1.5.0 - 2023-12-15
+
+- Update styles
+- Add recommend sources
+
 ## v1.4.0 - 2023-12-13

 - Add 'Sources' tab to subscribe external workflow git repository
@@ -1,26 +1,28 @@
 # ComfyUI Browser

+[中文说明](README_CN.md)
+
 This is an image/video/workflow browser and manager for ComfyUI.
 You can sync your workflows to a remote Git repository and use them everywhere.

+Welcome to submit your workflow source by submitting [an issue](https://github.com/talesofai/comfyui-browser/issues/new?assignees=tzwm&labels=workflow-repo&projects=&template=new-workflow-repository.md&title=New+workflow+repo%3A). Let's build the workflows together.
+
+https://github.com/talesofai/comfyui-browser/assets/828837/803ce57a-1cf2-4e1c-be17-0efab401ef54

 ## Features

 - Browse and manage your images/videos/workflows in the output folder.
- Add your workflows to the collection so that you can switch and manage them more easily.
- Sync your collection anywhere by Git.
- [DOING] Clone public workflow by Git and load them more easily.
-
+- Add your workflows to the 'Saves' so that you can switch and manage them more easily.
+- Sync your 'Saves' anywhere by Git.
+- Subscribe workflow sources by Git and load them more easily.
+- Search your workflow by keywords.

 ## Preview

-![e08f52dacabad159519d0d0efb87de9d7118e17dd08f8064cb90b2d59a9278da](https://github.com/tzwm/comfyui-browser/assets/828837/46c03aec-1047-4890-8d28-509448a14e02)
-
-![6362bea4c745d845728f4885fd3fe5092f15dcc00e0f01790fe843e1cdf4777e](https://github.com/tzwm/comfyui-browser/assets/828837/41b793c3-05eb-447e-8f14-993187a2c906)
-
-[comfyui_browser_demo_simple_231210.webm](https://github.com/tzwm/comfyui-browser/assets/828837/1eb67a5c-a40d-4b34-af78-687c05478639)
-
-
+![b359de5f6556649512e7ed8f812ba67d444be9914173e2467018450ce1a3ce1d](https://github.com/talesofai/comfyui-browser/assets/828837/4b0b0f4c-28a8-49ef-98c2-d293df5b7747)
+![c91157bf819ef5b9a129976d9e45588106dd6c7ea39ecb0a22519acd72afc7ce](https://github.com/talesofai/comfyui-browser/assets/828837/ee3df970-017c-4825-ab5d-9465cdb77ed6)
+![53053f43847da9597efebab207140eed703b8c7bbe8eb1e63ce5630b5d8c9a3f](https://github.com/talesofai/comfyui-browser/assets/828837/4acb522a-f21c-47ad-9a23-56b08c6e73a5)
+![c7b93b2ec0891eb7cac1385505e855fb28934ec958f7b21cac53c9bf18e6136c](https://github.com/talesofai/comfyui-browser/assets/828837/ef0d5cd2-9238-4e80-9f65-0f7db05ffbf3)

 ## Installation

@@ -38,13 +40,13 @@ cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git

 ## Notes

- Your collections are stored in the `ComfyUI/custom_nodes/comfyui-browser/collections`.
+- Your 'Saves' are stored in the `ComfyUI/custom_nodes/comfyui-browser/collections`.

 ## TODO

 - [x] Sync collections to remote git repository
- [ ] Add external git repository to local collections
- [ ] Add more information to collections
+- [x] Add external git repository to local collections
+- [ ] Search workflow by node name and model name


 ## ChangeLog
@@ -0,0 +1,48 @@
+# ComfyUI 浏览器
+
+查看和管理 ComfyUI 的所有输出文件，并且添加收藏方便随时调用。
+
+远程同步工作流到你的 Git 仓库，方便团队共享和版本管理。
+
+还能订阅社区开放的工作流仓库，方便抄作业！
+
+https://github.com/talesofai/comfyui-browser/assets/828837/803ce57a-1cf2-4e1c-be17-0efab401ef54
+
+
+## 功能
+
+- 浏览和管理你的 ComfyUI 输出文件
+- 添加工作流到收藏夹，方便管理和调用
+- 可以通过 Git 来远程同步收藏夹
+- 订阅工作流仓库，方便抄作业
+- 通过关键词搜索工作流
+
+
+## 预览
+
+![b359de5f6556649512e7ed8f812ba67d444be9914173e2467018450ce1a3ce1d](https://github.com/talesofai/comfyui-browser/assets/828837/4b0b0f4c-28a8-49ef-98c2-d293df5b7747)
+![c91157bf819ef5b9a129976d9e45588106dd6c7ea39ecb0a22519acd72afc7ce](https://github.com/talesofai/comfyui-browser/assets/828837/ee3df970-017c-4825-ab5d-9465cdb77ed6)
+![53053f43847da9597efebab207140eed703b8c7bbe8eb1e63ce5630b5d8c9a3f](https://github.com/talesofai/comfyui-browser/assets/828837/4acb522a-f21c-47ad-9a23-56b08c6e73a5)
+![c7b93b2ec0891eb7cac1385505e855fb28934ec958f7b21cac53c9bf18e6136c](https://github.com/talesofai/comfyui-browser/assets/828837/ef0d5cd2-9238-4e80-9f65-0f7db05ffbf3)
+
+## 安装方式
+
+### Comfy Manager
+
+搜索 `comfyui-browser` 来安装。
+
+### 手动
+
+下载这个仓库的代码放到 `ComfyUI/custom_nodes` 目录下，并重启 ComfyUI。
+
+```bash
+cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git
+```
+
+## 更新记录
+
+详见：[ChangeLog](CHANGELOG.md)
+
+## 感谢
+
+- [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
@@ -1,7 +1,7 @@
 import json
-import os
+import os, stat, errno
 from os import path
-from aiohttp import request, web
+from aiohttp import web, ClientSession, ClientTimeout
 from typing import TypedDict, List
 import shutil
 import time
@@ -33,6 +33,14 @@ video_extensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv']

 info_file_suffix = '.info'

+
+def init_path():
+    if not path.exists(collections_path):
+        os.mkdir(collections_path)
+
+    if not path.exists(sources_path):
+        os.mkdir(sources_path)
+
 # folder_type = 'outputs', 'collections', 'sources'
 def get_parent_path(folder_type: str):
    if folder_type == 'collections':
@@ -53,7 +61,7 @@ def get_target_folder_files(folder_path: str, folder_type: str = 'outputs'):
    target_path = path.join(parent_path, folder_path)

    if not path.exists(target_path):
-        return None
+        return []

    folder_listing = os.scandir(target_path)
    folder_listing = sorted(folder_listing, key=lambda f: (f.is_file(), -f.stat().st_ctime))
@@ -147,6 +155,22 @@ def git_init(run_path = collections_path):
    if not path.exists(path.join(run_path, '.git')):
        run_cmd('git init', collections_path)

+    ret = run_cmd('git config user.name', collections_path,
+                  log_cmd=False, log_code=False, log_message=False)
+    if len(ret.stdout) == 0:
+        ret = run_cmd('whoami', collections_path,
+                      log_cmd=False, log_code=False, log_message=False)
+        username = ret.stdout.rstrip("\n")
+        run_cmd(f'git config user.name "{username}"', collections_path)
+
+    ret = run_cmd('git config user.email', collections_path,
+                  log_cmd=False, log_code=False, log_message=False)
+    if len(ret.stdout) == 0:
+        ret = run_cmd('hostname', collections_path,
+                      log_cmd=False, log_code=False, log_message=False)
+        hostname = ret.stdout.rstrip("\n")
+        run_cmd(f'git config user.email "{hostname}"', collections_path)
+
 def log(message):
    print('[comfyui-browser] ' + message)

@@ -154,6 +178,14 @@ def add_uuid_to_filename(filename):
    name, ext = path.splitext(filename)
    return f'{name}_{int(time.time())}{ext}'

+def handle_remove_readonly(func, path, exc):
+    excvalue = exc[1]
+    if excvalue.errno == errno.EACCES:
+        os.chmod(path, stat.S_IRWXU | stat.S_IRWXG | stat.S_IRWXO)  # 0777
+        func(path)
+    else:
+        raise
+
 # folder_path, folder_type
@routes.get("/browser/files")
 async def api_get_files(request):
@@ -448,6 +480,9 @@ async def api_create_source(request):
    if not repo_url:
        return web.Response(status=400)

+    if not path.exists(sources_path):
+        os.mkdir(sources_path)
+
    pattern = r'[\:\/]([a-zA-Z0-9-_]+)\/([a-zA-Z0-9-_]+)(\.git)?'
    ret = re.search(pattern, repo_url)
    author = ret.group(1)
@@ -470,16 +505,13 @@ async def api_delete_source(request):

    if not name:
        return web.Response(status=401)
-    if not path.exists(path.join(sources_path, name)):
+
+    target_path = path.join(sources_path, name)
+    if not path.exists(target_path):
        return web.Response(status=404)

-    cmd = f'rm -rf {name}'
-    ret = run_cmd(cmd, sources_path)
-
-    if ret.returncode == 0:
-        return web.Response(status=200)
-    else:
-        return web.Response(status=400, text=ret.stdout + ret.stderr)
+    shutil.rmtree(target_path, onerror=handle_remove_readonly)
+    return web.Response(status=200)

 # name
@routes.post("/browser/sources/sync/{name}")
@@ -499,6 +531,27 @@ async def api_sync_source(request):
    else:
        return web.Response(status=400, text=ret.stdout + ret.stderr)

+@routes.get("/browser/sources/all")
+async def api_get_all_sources(_):
+    source_url = 'https://github.com/talesofai/comfyui-browser/raw/main/data/sources.json'
+    file_path = path.join(browser_path, 'data/sources.json')
+    timeout = ClientTimeout(connect=2, total=4)
+
+    sources = {
+        "sources": []
+    }
+    try:
+        async with ClientSession(timeout=timeout) as session:
+            async with session.get(source_url) as resp:
+                if resp.ok:
+                    ret = await resp.text()
+                    sources = json.loads(ret)
+    except:
+        with open(file_path, 'r') as f:
+            sources = json.load(f)
+
+    return web.json_response(sources)
+

 routes.static(
    '/browser/web',
@@ -507,3 +560,5 @@ routes.static(

 WEB_DIRECTORY = "web"
 NODE_CLASS_MAPPINGS = {}
+
+init_path()
@@ -0,0 +1,18 @@
+{
+  "sources": [
+    {
+      "title": "ComfyUI_examples",
+      "author": "comfyanonymous",
+      "url": "https://github.com/comfyanonymous/ComfyUI_examples",
+      "type": "git",
+      "description": "Examples of ComfyUI workflows"
+    },
+    {
+      "title": "comfyui-workflow",
+      "author": "hylarucoder",
+      "url": "https://github.com/hylarucoder/comfyui-workflow",
+      "type": "git",
+      "description": "Some workflows that I have authored myself as well as some workflows that I have modified from online sources."
+    }
+  ]
+}
@@ -15,7 +15,7 @@
 				"@sveltejs/adapter-static": "^2.0.3",
 				"@sveltejs/kit": "^1.27.4",
 				"autoprefixer": "^10.4.16",
-				"daisyui": "^4.4.17",
+				"daisyui": "^4.4.19",
 				"postcss": "^8.4.32",
 				"svelte": "^4.2.7",
 				"svelte-check": "^3.6.0",
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="halloween">
+<html lang="en" data-theme="forest">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -1,22 +1,31 @@
 <script lang="ts">
-  import Tabs from './Tabs.svelte';
+  import Navbar from './Navbar.svelte';
  import FilesTab from "./FilesTab.svelte";
  import CollectionsTab from './CollectionsTab.svelte';
  import SourcesTab from './SourcesTab.svelte';
+  import { getLocalConfig } from './utils';
+  import { onMount } from 'svelte';

  // @type {import('./$types').PageData}
  export let data: any;
  const { comfyUrl } = data;

  let activeTab = 'outputs';
+
+  onMount(() => {
+    const config = getLocalConfig();
+    if (config.lastTab) {
+      activeTab = config.lastTab;
+    }
+  });
 </script>

-<Tabs bind:activeTab={activeTab} />
+<Navbar bind:activeTab={activeTab} />

 {#if activeTab === 'collections'}
  <CollectionsTab {comfyUrl} />
-{:else if activeTab === 'outputs'}
-  <FilesTab {comfyUrl} />
-{:else}
+{:else if activeTab === 'sources'}
  <SourcesTab {comfyUrl} />
+{:else}
+  <FilesTab {comfyUrl} />
 {/if}
@@ -15,14 +15,26 @@
  let showCursor = 20;
  let toast: Toast;
  let folderPath: string;
+  let loaded: boolean = false;
+  let searchQuery = '';
+  let searchRegex = new RegExp('');
+
  $: if (folderPath != undefined) {
    fetchFiles(folderType, comfyUrl, folderPath)
    .then(res => {
      files = res;
+      loaded = true;
    });
  }


+  $: try {
+    searchRegex = new RegExp(searchQuery.toLowerCase());
+  } catch {
+    searchRegex =  new RegExp('');
+  }
+
+
  onMount(async () => {
    //@ts-ignore
    comfyApp = window.top.app;
@@ -126,7 +138,7 @@

    toast.show(
      ret,
-      'Updated',
+      'Memos Updated',
      'Failed to update. Please check the ComfyUI server.'
    );
  }
@@ -165,7 +177,14 @@
  }
 </script>

-<div>
+<div class="flex border-b border-base-content pb-2">
+  <a class="btn pr-2"
+    target="_blank"
+    href="https://github.com/talesofai/comfyui-browser/wiki/How-to-use-'Sync'-in-the-'Saves'">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+    </svg>
+  </a>
  <input
    type="text"
    placeholder="Input your git repository address"
@@ -188,36 +207,44 @@
  </button>
 </div>

-<div class="max-w-full text-sm breadcrumbs">
-  <ul>
+<div class="max-w-full text-sm breadcrumbs flex flex-row ml-4">
+  <ul class="basis-2/3">
    <li><button on:click={() => onClickPath(-1)}>Root</button></li>
    {#each (folderPath || '').split('/') as path, index}
      <li><button on:click={() => onClickPath(index)}>{path}</button></li>
    {/each}
  </ul>
+
+  <input
+    type="text"
+    placeholder="Filter by filename or memos"
+    bind:value={searchQuery}
+    class="input input-bordered border-slate-600 w-full h-full rounded-none text-sm basis-1/3"
+  />
 </div>

-<ul class="space-y-2 bg-base-300">
-  {#each files.slice(0, showCursor) as file}
-    <li class="flex h-36 border-0 space-x-4 bg-base-100">
+<ul class="space-y-2">
+  {#each files.filter(f => searchRegex.test(f.name.toLowerCase()) || searchRegex.test(f.notes.toLowerCase()))
+    .slice(0, showCursor) as file}
+    <li class="flex h-16 sm:h-28 border-0 space-x-4 p-2 bg-info-content">
      <MediaShow
        file={file}
-        styleClass="w-36"
+        styleClass="w-16 sm:w-28"
        onClickDir={onClickDir}
      />
-      <div class="space-y-2 w-72">
+      <div class="space-y-2 w-96 relative">
        <input
          type="text"
          class="input-bordered font-bold w-full bg-base-100"
          on:blur={(e) => updateFilename(e, file)}
          value={file.name}
        />
-        <p class="text-gray-500">
+        <p class="text-gray-500 text-xs hidden sm:block">
          {file.formattedDatetime} | {file.formattedSize}
        </p>

-        <div>
-          {#if comfyApp}
+        <div class="bottom-0 absolute">
+          {#if comfyApp && file.type != 'dir'}
            <button
              class="btn btn-link btn-sm p-0 no-underline text-accent"
              on:click={async () => await onLoadWorkflow(file, comfyApp, toast)}
@@ -233,11 +260,9 @@
      <div>
        <textarea
          name="notes"
-          cols="40"
-          rows="4"
          placeholder="write some memos..."
          on:blur={(e) => updateFileNotes(e, file)}
-          class="resize-none textarea"
+          class="resize-none textarea hidden md:block md:w-72 max-w-72 h-14 sm:h-24"
          value={file.notes}
        />
      </div>
@@ -248,7 +273,11 @@
 {#if files.length === 0}
  <div class="w-full h-full flex items-center justify-center">
    <span class="font-bold text-4xl">
-      It's empty here.
+      {#if loaded}
+        It's empty here.
+      {:else}
+        Loading ...
+      {/if}
    </span>
  </div>
 {/if}
@@ -10,15 +10,27 @@
  export let toast: Toast;
  export let folderPath: string;
  $: if (folderPath != undefined) {
-    fetchFiles(folderType, comfyUrl, folderPath)
-    .then(res => {
-      files = res;
-    });
+    refresh();
+  }
+
+  $: try {
+    searchRegex = new RegExp(searchQuery.toLowerCase());
+  } catch {
+    searchRegex =  new RegExp('');
  }

  let comfyApp: any;
  let files: Array<any> = [];
+  let loaded: boolean = true;
  let showCursor = 20;
+  let searchQuery = '';
+  let searchRegex = new RegExp('');
+
+  export async function refresh() {
+    loaded = true;
+    files = await fetchFiles(folderType, comfyUrl, folderPath);
+    loaded = true;
+  }

  onMount(async () => {
    //@ts-ignore
@@ -40,8 +52,8 @@

    toast.show(
      res.ok,
-      'Added to collections',
-      'Failed to add to collections. Please check the ComfyUI server.'
+      'Added to Saves',
+      'Failed to add to Saves. Please check the ComfyUI server.'
    );
  }

@@ -82,33 +94,40 @@
  }
 </script>

-<div class="max-w-full text-sm breadcrumbs">
-  <ul>
+<div class="max-w-full text-sm breadcrumbs flex flex-row ml-4">
+  <ul class="basis-3/4">
    <li><button on:click={() => onClickPath(-1)}>Root</button></li>
    {#each (folderPath || '').split('/') as path, index}
      <li><button on:click={() => onClickPath(index)}>{path}</button></li>
    {/each}
  </ul>
+
+  <input
+    type="text"
+    placeholder="Filter by filename"
+    bind:value={searchQuery}
+    class="input input-bordered w-full h-full rounded-none border-slate-600 text-sm basis-1/4"
+  />
 </div>

-<div class="grid grid-cols-4 lg:grid-cols-6 gap-2 bg-base-300">
-  {#each files.slice(0, showCursor) as file}
+<div class="grid grid-cols-4 lg:grid-cols-6 gap-2">
+  {#each files.filter(f => searchRegex.test(f.name.toLowerCase())).slice(0, showCursor) as file}
    {#if ['dir', 'image', 'video', 'json'].includes(file.fileType)}
-      <div class="bg-base-100">
+      <div class="p-2 bg-info-content">
        <div class="flex items-center">
          <MediaShow
            file={file}
-            styleClass="w-full h-36"
+            styleClass="w-full h-16 sm:h-36"
            onClickDir={onClickDir}
          />
        </div>

-        <p class="font-bold max-h-12 leading-6 overflow-auto">{file.name}</p>
-        <p class="text-gray-500">{file.formattedDatetime}</p>
-        <p class="text-gray-500">{file.formattedSize}</p>
+        <p class="font-bold max-h-12 leading-6 overflow-auto mt-1">{file.name}</p>
+        <p class="hidden sm:block text-gray-500 text-xs">{file.formattedDatetime}</p>
+        <p class="hidden sm:block text-gray-500 text-xs">{file.formattedSize}</p>

        <div class="">
-          {#if comfyApp}
+          {#if comfyApp && file.type != 'dir'}
            <button
              class="btn btn-link btn-sm p-0 no-underline text-accent"
              on:click={async () => await onLoadWorkflow(file, comfyApp, toast)}
@@ -117,7 +136,7 @@
          <button
            class="btn btn-link btn-sm p-0 no-underline text-accent"
            on:click={async () => await onCollect(file)}
-          >Collect</button>
+          >Save</button>
          <button
            class="btn btn-link btn-sm p-0 no-underline text-error"
            on:click={async () => await onDelete(file)}
@@ -131,7 +150,11 @@
 {#if files.length === 0}
  <div class="w-full h-full flex items-center justify-center">
    <span class="font-bold text-4xl">
-      It's empty here.
+      {#if loaded }
+        It's empty here.
+      {:else }
+        Loading ...
+      {/if}
    </span>
  </div>
 {/if}
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { setLocalConfig } from "./utils";
+
+  export let activeTab = 'outputs';
+
+  $: activeTabClass = function(tab: string) {
+    return tab === activeTab ? 'active' : '';
+  }
+
+  async function onClickTab(tab: string) {
+    activeTab = tab;
+
+    setLocalConfig('lastTab', tab);
+  }
+</script>
+
+<div class="flex">
+  <ul class="menu menu-horizontal bg-base-200 rounded-box flex-1">
+    <li>
+      <button
+        class="{activeTabClass('outputs')}"
+        on:click={() => onClickTab('outputs')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+        </svg>
+        Outputs
+      </button>
+    </li>
+
+    <li>
+      <button
+        class="{activeTabClass('collections')}"
+        on:click={() => onClickTab('collections')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+        </svg>
+        Saves
+      </button>
+    </li>
+    <li>
+      <button
+        class="{activeTabClass('sources')}"
+        on:click={() => onClickTab('sources')}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+        </svg>
+        Sources
+      </button>
+    </li>
+  </ul>
+
+  <div class="hidden sm:flex flex-0 items-center justify-center p-2">
+    <a href="https://github.com/talesofai/comfyui-browser" target="_blank">
+      <img src="https://img.shields.io/github/stars/talesofai/comfyui-browser?style=social" alt="stars - comfyui-browser">
+      </a>
+  </div>
+</div>
@@ -7,32 +7,38 @@

  let sources: Array<any> = [];
  let toast: Toast;
-  let selectedSource: any;
  let sourceEditModal: any;
  let inputRepoUrl: string;
-  let addWaiting = false;
+  let waitingForUrl: string = '';
+  let folderPath = '';
+  let allSources: Array<any> = [];
+  let fileList: FilesList;
+  let syncingSouce: any;

-  async function refreshSources(selectGitUrl: string | null = null) {
+  async function refreshSources() {
    const res = await fetch(comfyUrl + '/browser/sources');
    const ret = await res.json();
-    sources = ret.sources;
+    sources = ret.sources.map((s: any) => {
+      s.homepage = '';
+      if (s.url.startsWith('https://')) {
+        s.homepage = s.url;
+        if (s.homepage.endsWith('.git')) {
+          s.homepage = s.homepage.slice(0, -4);
+        }
+      }

-    if (selectGitUrl) {
-      selectGitUrl = selectGitUrl.trim();
-      selectedSource = sources.find(s => s.url == selectGitUrl);
-    }
-
-    if (! selectedSource) {
-      selectedSource = sources[0];
-    }
+      return s;
+    });
  }

  onMount(async () => {
-    await refreshSources();
+    refreshSources();
+    getAllSources();
  });

-  function onClickAddSource(source: any) {
-    selectedSource = source;
+  function onClickSource(source: any) {
+    console.log(folderPath);
+    folderPath = source.name;
  }

  async function onClickDeleteSource(source: any) {
@@ -46,7 +52,8 @@
    });

    if (res.ok) {
-      await refreshSources();
+      refreshSources();
+      fileList.refresh();
    }
    toast.show(
      res.ok,
@@ -55,27 +62,46 @@
    );
  }

+  async function onClickSyncSource(source: any) {
+    syncingSouce = source;
+    const res = await fetch(comfyUrl + `/browser/sources/sync/${source.name}`, {
+      method: 'POST',
+    });
+    syncingSouce = null;
+
+    if (res.ok) {
+      refreshSources();
+      fileList.refresh();
+    }
+    toast.show(
+      res.ok,
+      'Synced ' + [source.author, source.name].join('/'),
+      'Failed to sync this source. Please check the ComfyUI server.',
+    );
+  }
+
  function openEditModal() {
    sourceEditModal.showModal();
  }

-  async function addSource() {
-    if (! inputRepoUrl) {
-      toast.show(false, '', 'missing Git URL', 1000);
+  async function addSource(url: string) {
+    if (! url) {
+      toast.show(false, '', 'missing Git URL');
      return;
    }

-    addWaiting = true;
+    waitingForUrl = url;
    const res = await fetch(comfyUrl + '/browser/sources', {
      method: 'POST',
      body: JSON.stringify({
-        repo_url: inputRepoUrl,
+        repo_url: url,
      }),
    });
-    addWaiting = false;
+    waitingForUrl = '';

    if (res.ok) {
-      await refreshSources(inputRepoUrl);
+      refreshSources();
+      fileList.refresh();
    }
    toast.show(
      res.ok,
@@ -84,46 +110,70 @@
    );
    sourceEditModal.close();
  }
+
+  async function getAllSources() {
+    const res = await fetch(comfyUrl + '/browser/sources/all');
+    const ret = await res.json();
+    allSources = ret.sources;
+  }
 </script>

 <div class="drawer md:drawer-open">
  <input type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
+  <div class="drawer-content flex flex-col pl-2">
    <FilesList
      folderType="sources"
-      folderPath={selectedSource?.name}
+      bind:folderPath={folderPath}
      comfyUrl={comfyUrl}
      toast={toast}
+      bind:this={fileList}
    />
  </div>

-  <div class="drawer-side">
+  <div class="drawer-side border-r border-base-content pr-2">
    <ul class="menu bg-base-200 w-56 p-0 [&_li>*]:rounded-none">
-      <li class="w-full">
-        <div class="w-full flex items-center justify-between">
-          <button
-            class="btn btn-outline btn-primary w-3/4 pl-0 justify-start text-left"
-            on:click={openEditModal}
-          >Add new source</button>
-        </div>
+      <li  class="h-10">
+        <button class="pl-2 btn-outline btn-accent" on:click={openEditModal}>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+          Add new source
+        </button>
      </li>

      {#each sources as source}
-        <li class="w-full">
-          <div class="w-full {source == selectedSource ? 'bg-success' : ''} flex items-center justify-between">
-            <button
-              class="btn w-3/4 pl-0 justify-start text-left"
-              on:click={() => onClickAddSource(source)}
-            >{source.name}</button>
-            <button
-              class="btn w-1/4"
-              on:click={() => onClickDeleteSource(source)}
+        <li class="h-14">
+          {#if source.homepage }
+            <a
+              class="h-14 px-0.5 flex items-center justify-center"
+              href={source.homepage}
+              target="_blank"
            >
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+              <!--TODO: using more general icon instead of GitHub-->
+              <svg class="w-6 h-6 fill-accent" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
+                <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
              </svg>
-            </button>
-          </div>
+            </a>
+          {:else}
+            <div class="h-14 px-0.5 flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6 text-accent">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
+              </svg>
+            </div>
+          {/if}
+          <button
+            class="pl-2 h-14 line-clamp-2 overflow-hidden {source.name == folderPath.split('/')[0] ? 'active' : ''}"
+            on:click={() => onClickSource(source)}
+          ><p class="w-40 truncate whitespace-normal">{source.name}</p></button>
+          <button
+            class="h-14 right-0 fixed flex items-center justify-center"
+            on:click={() => onClickSyncSource(source)}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+              class="{syncingSouce == source ? 'text-accent' : ''} w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            </svg>
+          </button>
        </li>
      {/each}
    </ul>
@@ -134,18 +184,71 @@

 <!-- Open the modal using ID.showModal() method -->
 <dialog class="modal" bind:this={sourceEditModal}>
-  <div class="modal-box">
-    <input
-      type="text"
-      bind:value={inputRepoUrl}
-      placeholder="Input Git remote address of the source"
-      class="input input-bordered w-full max-w-xs"
-    />
-    <button
-      class="btn"
-      on:click={addSource}
-      disabled={addWaiting}
-    >{addWaiting ? 'Adding...' : 'Add'}</button>
+  <div class="modal-box w-5/6 max-w-5xl">
+    <div class="mb-2 flex space-x-2">
+      <input
+        type="text"
+        bind:value={inputRepoUrl}
+        placeholder="https://github.com/comfyanonymous/ComfyUI_examples"
+        class="grow input input-bordered"
+      />
+      <button
+        class="btn btn-outline btn-primary"
+        on:click={() => addSource(inputRepoUrl)}
+        disabled={waitingForUrl.length > 0 || !inputRepoUrl}
+      >{waitingForUrl === inputRepoUrl && inputRepoUrl ? 'Subscribing...' : 'Subscribe'}</button>
+    </div>
+
+    <div>
+      {#if allSources.length === 0}
+        <div class="w-full h-full flex items-center justify-center">
+          <span class="font-bold text-4xl">
+            Loading ...
+          </span>
+        </div>
+      {/if}
+      <ul class="space-y-1">
+        {#each allSources as s}
+          <li class="flex flex-nowrap space-x-2 h-20 border-b border-b-base-content">
+            <img
+              src={`https://github.com/${s.author}.png`}
+              alt={s.author} />
+            <div class="w-80">
+              <a class="link link-warning text-lg no-underline" href={s.url} target="_blank">
+                <p>{s.author}/{s.title}</p>
+              </a>
+              <a href={s.url} target="_blank">
+                <img src={`https://img.shields.io/github/stars${(new URL(s.url)).pathname}?style=flat-square`} alt="stars">
+              </a>
+            </div>
+            <div class="w-72 grow">
+              <p>{s.description}</p>
+            </div>
+            <div class="flex items-center justify-center">
+              <button
+                class="btn btn-outline btn-primary no-underline text-accent"
+                on:click={() => addSource(s.url)}
+                disabled={waitingForUrl.length > 0}
+              >
+                {waitingForUrl === s.url ? 'Subscribing...' : 'Subscribe'}
+              </button>
+            </div>
+          </li>
+        {/each}
+      </ul>
+    </div>
+    <p class="mt-1 text-xs text-gray-500">
+      You could open
+      <a class="text-accent" target="_blank" href="https://github.com/talesofai/comfyui-browser/edit/main/data/sources.json">
+        a pull request
+      </a>
+      or submit
+      <a class="text-accent" target="_blank" href="https://github.com/talesofai/comfyui-browser/issues/new?assignees=tzwm&labels=workflow-repo&projects=&template=new-workflow-repository.md&title=New+workflow+repo%3A">
+        an issue
+      </a>
+      to add your workflow repository here.<br />
+      Thank you to everyone who contributes to the open community!
+    </p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
@@ -1,35 +0,0 @@
-<script lang="ts">
-  export let activeTab = 'outputs';
-
-  $: activeTabClass = function(tab: string) {
-    return tab === activeTab ? 'tab-active' : '';
-  }
-
-  async function onClickTab(tab: string) {
-    activeTab = tab;
-  }
-</script>
-
-<div role="tablist" class="tabs tabs-boxed sticky top-0">
-  <button
-    role="tab"
-    class="tab {activeTabClass('outputs')}"
-    on:click={() => onClickTab('outputs')}
-  >
-    Outputs
-  </button>
-  <button
-    role="tab"
-    class="tab {activeTabClass('collections')}"
-    on:click={() => onClickTab('collections')}
-  >
-    Collections
-  </button>
-  <button
-    role="tab"
-    class="tab {activeTabClass('sources')}"
-    on:click={() => onClickTab('sources')}
-  >
-    Sources
-  </button>
-</div>
@@ -3,6 +3,8 @@ import type Toast from './Toast.svelte';

 export type FOLDER_TYPES = 'outputs' | 'collections' | 'sources';

+const localStorageKey = 'comfyui-browser';
+
 function processFile(
  file: any,
  folderType: FOLDER_TYPES,
@@ -98,5 +100,23 @@ export async function onLoadWorkflow(file: any, comfyApp: any, toast: Toast) {
  }
  await comfyApp.handleFile(fileObj);

-  toast.show(false, 'Loaded', 'No workflow found here', 1000);
+  toast.show(false, 'Loaded', 'No workflow found here');
+}
+
+
+export function getLocalConfig() {
+  let localConfigStr = localStorage.getItem(localStorageKey);
+  let localConfig: any = {};
+
+  if (localConfigStr) {
+    localConfig = JSON.parse(localConfigStr);
+  }
+
+  return localConfig;
+}
+
+export function setLocalConfig(key: string, value: any) {
+  let localConfig = getLocalConfig();
+  localConfig[key] = value;
+  localStorage.setItem(localStorageKey, JSON.stringify(localConfig));
 }
@@ -6,7 +6,7 @@ export default {
  },
  plugins: [require("daisyui")],
  daisyui: {
-    themes: ["halloween"],
+    themes: ["forest"],
  },
 }

@@ -0,0 +1 @@
+import{n as d,s as E}from"./scheduler.89bf212d.js";const u=[];function p(e,t=d){let n;const o=new Set;function r(s){if(E(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){r(s(e))}function a(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(r,i)||d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:r,update:i,subscribe:a}}var g;const w=((g=globalThis.__sveltekit_1n5kjen)==null?void 0:g.base)??"";var k;const A=((k=globalThis.__sveltekit_1n5kjen)==null?void 0:k.assets)??w,R="1703046965654",I="sveltekit:snapshot",x="sveltekit:scroll",O="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1},v=location.origin;function U(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function L(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function m(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function N(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=m(e)}}function j(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,r=!n||!!o||T(n,t)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===v&&e.hasAttribute("download");return{url:n,external:r,target:o,download:i}}function P(e){let t=null,n=null,o=null,r=null,i=null,a=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),r===null&&(r=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),a===null&&(a=f(s,"replacestate")),s=m(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[r??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(a)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(a=>a)}function r(a){n=!1,t.set(a)}function i(a){let s;return t.subscribe(c=>{(s===void 0||n&&c!==s)&&a(s=c)})}return{notify:o,set:r,subscribe:i}}function S(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const r=await fetch(`${A}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!r.ok)return!1;const a=(await r.json()).version!==R;return a&&(e(!0),clearTimeout(n)),a}catch{return!1}}return{subscribe:t,check:o}}function T(e,t){return e.origin!==v||!e.pathname.startsWith(t)}function V(e){e.client}const Y={url:h({}),page:h({}),navigating:p(null),updated:S()};export{O as I,_ as P,x as S,I as a,j as b,P as c,Y as d,w as e,N as f,U as g,V as h,T as i,v as o,L as s};
@@ -1 +0,0 @@
-import{n as d,s as E}from"./scheduler.89bf212d.js";const u=[];function p(e,t=d){let n;const o=new Set;function a(s){if(E(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){a(s(e))}function r(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(a,i)||d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:a,update:i,subscribe:r}}var g;const w=((g=globalThis.__sveltekit_1npfnva)==null?void 0:g.base)??"";var k;const A=((k=globalThis.__sveltekit_1npfnva)==null?void 0:k.assets)??w,R="1702473899953",I="sveltekit:snapshot",x="sveltekit:scroll",O="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1},v=location.origin;function U(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function L(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function m(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function N(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=m(e)}}function P(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,a=!n||!!o||T(n,t)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===v&&e.hasAttribute("download");return{url:n,external:a,target:o,download:i}}function V(e){let t=null,n=null,o=null,a=null,i=null,r=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),a===null&&(a=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),r===null&&(r=f(s,"replacestate")),s=m(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[a??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(r)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(r=>r)}function a(r){n=!1,t.set(r)}function i(r){let s;return t.subscribe(c=>{(s===void 0||n&&c!==s)&&r(s=c)})}return{notify:o,set:a,subscribe:i}}function S(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const a=await fetch(`${A}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!a.ok)return!1;const r=(await a.json()).version!==R;return r&&(e(!0),clearTimeout(n)),r}catch{return!1}}return{subscribe:t,check:o}}function T(e,t){return e.origin!==v||!e.pathname.startsWith(t)}function Y(e){e.client}const q={url:h({}),page:h({}),navigating:p(null),updated:S()};export{O as I,_ as P,x as S,I as a,P as b,V as c,q as d,w as e,N as f,U as g,Y as h,T as i,v as o,L as s};
@@ -1 +1 @@
-import{s as r,c as l,u as i,g as u,d as f}from"../chunks/scheduler.89bf212d.js";import{S as c,i as _,d as p,t as d}from"../chunks/index.911dd7e6.js";const m=!0;async function g({url:o}){let s="";return typeof process>"u"&&(s=o.searchParams.get("comfyUrl")||""),{comfyUrl:s}}const h=Object.freeze(Object.defineProperty({__proto__:null,load:g,prerender:m},Symbol.toStringTag,{value:"Module"}));function y(o){let s;const a=o[1].default,t=l(a,o,o[0],null);return{c(){t&&t.c()},l(e){t&&t.l(e)},m(e,n){t&&t.m(e,n),s=!0},p(e,[n]){t&&t.p&&(!s||n&1)&&i(t,a,e,e[0],s?f(a,e[0],n,null):u(e[0]),null)},i(e){s||(p(t,e),s=!0)},o(e){d(t,e),s=!1},d(e){t&&t.d(e)}}}function $(o,s,a){let{$$slots:t={},$$scope:e}=s;return o.$$set=n=>{"$$scope"in n&&a(0,e=n.$$scope)},[e,t]}class v extends c{constructor(s){super(),_(this,s,$,y,r,{})}}export{v as component,h as universal};
+import{s as r,c as l,u as i,g as u,d as f}from"../chunks/scheduler.89bf212d.js";import{S as c,i as _,d as p,t as d}from"../chunks/index.6b8f49fb.js";const m=!0;async function g({url:o}){let s="";return typeof process>"u"&&(s=o.searchParams.get("comfyUrl")||""),{comfyUrl:s}}const h=Object.freeze(Object.defineProperty({__proto__:null,load:g,prerender:m},Symbol.toStringTag,{value:"Module"}));function y(o){let s;const a=o[1].default,t=l(a,o,o[0],null);return{c(){t&&t.c()},l(e){t&&t.l(e)},m(e,n){t&&t.m(e,n),s=!0},p(e,[n]){t&&t.p&&(!s||n&1)&&i(t,a,e,e[0],s?f(a,e[0],n,null):u(e[0]),null)},i(e){s||(p(t,e),s=!0)},o(e){d(t,e),s=!1},d(e){t&&t.d(e)}}}function $(o,s,a){let{$$slots:t={},$$scope:e}=s;return o.$$set=n=>{"$$scope"in n&&a(0,e=n.$$scope)},[e,t]}class v extends c{constructor(s){super(),_(this,s,$,y,r,{})}}export{v as component,h as universal};
@@ -1 +1 @@
-import{s as x,n as _,e as S}from"../chunks/scheduler.89bf212d.js";import{S as j,i as q,g as f,m as d,s as y,h as g,j as h,n as v,f as u,c as C,a as m,x as $,o as E}from"../chunks/index.911dd7e6.js";import{d as H}from"../chunks/singletons.dcbe77e9.js";const P=()=>{const s=H;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},k={subscribe(s){return P().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",l;return{c(){t=f("h1"),o=d(r),n=y(),i=f("p"),l=d(c)},l(e){t=g(e,"H1",{});var a=h(t);o=v(a,r),a.forEach(u),n=C(e),i=g(e,"P",{});var p=h(i);l=v(p,c),p.forEach(u)},m(e,a){m(e,t,a),$(t,o),m(e,n,a),m(e,i,a),$(i,l)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&E(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&E(l,c)},i:_,o:_,d(e){e&&(u(t),u(n),u(i))}}}function z(s,t,r){let o;return S(s,k,n=>r(0,o=n)),[o]}let F=class extends j{constructor(t){super(),q(this,t,z,w,x,{})}};export{F as component};
+import{s as x,n as _,e as S}from"../chunks/scheduler.89bf212d.js";import{S as j,i as q,g as f,m as d,s as y,h as g,j as h,n as v,f as u,c as C,a as m,x as $,o as E}from"../chunks/index.6b8f49fb.js";import{d as H}from"../chunks/singletons.21e9392d.js";const P=()=>{const s=H;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},k={subscribe(s){return P().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",l;return{c(){t=f("h1"),o=d(r),n=y(),i=f("p"),l=d(c)},l(e){t=g(e,"H1",{});var a=h(t);o=v(a,r),a.forEach(u),n=C(e),i=g(e,"P",{});var p=h(i);l=v(p,c),p.forEach(u)},m(e,a){m(e,t,a),$(t,o),m(e,n,a),m(e,i,a),$(i,l)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&E(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&E(l,c)},i:_,o:_,d(e){e&&(u(t),u(n),u(i))}}}function z(s,t,r){let o;return S(s,k,n=>r(0,o=n)),[o]}let F=class extends j{constructor(t){super(),q(this,t,z,w,x,{})}};export{F as component};
@@ -1 +1 @@
-{"version":"1702473899953"}
+{"version":"1703046965654"}
@@ -1,25 +1,28 @@
 <!doctype html>
-<html lang="en" data-theme="halloween">
+<html lang="en" data-theme="forest">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="./favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
-		<link href="./_app/immutable/assets/0.33c58f17.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.c3c3ec90.js">
+		<link href="./_app/immutable/assets/0.19c04787.css" rel="stylesheet">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.c15ed8cd.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.89bf212d.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/singletons.dcbe77e9.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.d0761c79.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.911dd7e6.js">
-		<link rel="modulepreload" href="./_app/immutable/nodes/0.dcc65c06.js">
-		<link rel="modulepreload" href="./_app/immutable/nodes/2.06e828b3.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/singletons.21e9392d.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.77fad1e7.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.6b8f49fb.js">
+		<link rel="modulepreload" href="./_app/immutable/nodes/0.0ab3ee41.js">
+		<link rel="modulepreload" href="./_app/immutable/nodes/2.8c526e09.js">
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">  <div role="tablist" class="tabs tabs-boxed sticky top-0"><button role="tab" class="tab tab-active">Outputs</button> <button role="tab" class="tab ">Collections</button> <button role="tab" class="tab ">Sources</button></div> <div class="max-w-full text-sm breadcrumbs"><ul><li><button data-svelte-h="svelte-1paj67z">Root</button></li> <li><button></button></li></ul></div> <div class="grid grid-cols-4 lg:grid-cols-6 gap-2 bg-base-300"></div> <div class="w-full h-full flex items-center justify-center" data-svelte-h="svelte-kth4bi"><span class="font-bold text-4xl">It&#39;s empty here.</span></div>  
+		<div style="display: contents">  <div class="flex"><ul class="menu menu-horizontal bg-base-200 rounded-box flex-1"><li><button class="active"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path></svg>
+        Outputs</button></li> <li><button class=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"></path></svg>
+        Saves</button></li> <li><button class=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path></svg>
+        Sources</button></li></ul> <div class="hidden sm:flex flex-0 items-center justify-center p-2" data-svelte-h="svelte-1ihc90r"><a href="https://github.com/talesofai/comfyui-browser" target="_blank"><img src="https://img.shields.io/github/stars/talesofai/comfyui-browser?style=social" alt="stars - comfyui-browser"></a></div></div> <div class="max-w-full text-sm breadcrumbs flex flex-row ml-4"><ul class="basis-3/4"><li><button data-svelte-h="svelte-1paj67z">Root</button></li> <li><button></button></li></ul> <input type="text" placeholder="Filter by filename" class="input input-bordered w-full h-full rounded-none border-slate-600 text-sm basis-1/4" value=""></div> <div class="grid grid-cols-4 lg:grid-cols-6 gap-2"></div> <div class="w-full h-full flex items-center justify-center"><span class="font-bold text-4xl">It&#39;s empty here.</span></div>  
 			
 			<script>
 				{
-					__sveltekit_1npfnva = {
+					__sveltekit_1n5kjen = {
 						base: new URL(".", location).pathname.slice(0, -1),
 						env: {}
 					};
@@ -29,8 +32,8 @@
 					const data = [null,null];

 					Promise.all([
-						import("./_app/immutable/entry/start.c3c3ec90.js"),
-						import("./_app/immutable/entry/app.d0761c79.js")
+						import("./_app/immutable/entry/start.c15ed8cd.js"),
+						import("./_app/immutable/entry/app.77fad1e7.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element, {
 							node_ids: [0, 2],
@@ -4,23 +4,59 @@ import { api } from "../../scripts/api.js";

 const browserUrl = "./browser/web/index.html";

+const localStorageKey = 'comfyui-browser';
+
+function getLocalConfig() {
+  let localConfig = localStorage.getItem(localStorageKey);
+  if (localConfig) {
+    localConfig = JSON.parse(localConfig);
+  } else {
+    localConfig = {};
+  }
+
+  return localConfig;
+}
+
+function setLocalConfig(key, value) {
+  let localConfig = getLocalConfig();
+  localConfig[key] = value;
+  localStorage.setItem(localStorageKey, JSON.stringify(localConfig));
+}
+
 class BrowserDialog extends ComfyDialog {
  constructor() {
    super();

+    const localConfig = getLocalConfig();
+    let modalStyle = {
+      width: "70%",
+      height: "80%",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      minWidth: "24%",
+      minHeight: "24%",
+      padding: "6px",
+      zIndex: 1000,
+      resize: 'auto',
+    };
+    const cs = localConfig.modalStyles;
+    if (cs) {
+      modalStyle.left = cs.left;
+      modalStyle.top = cs.top;
+      modalStyle.transform = cs.transform;
+      modalStyle.height = cs.height;
+      modalStyle.width = cs.width;
+    }
+
    this.element = $el("div.comfy-modal", {
      id: "comfy-browser-dialog",
      parent: document.body,
-      style: {
-        width: "100%",
-        height: "100%",
-        padding: "10px",
-      },
+      style: modalStyle,
    }, [
      $el("div.comfy-modal-content", {
        style: {
-          width: "inherit",
-          height: "inherit",
+          width: "100%",
+          height: "100%",
        },
      }, [
        $el("div", {
@@ -30,6 +66,10 @@ class BrowserDialog extends ComfyDialog {
        ...this.createButtons(),
      ]),
 		]);
+
+    new ResizeObserver(
+      this.onResize.bind(this)
+    ).observe(this.element);
  }

  createButtons() {
@@ -47,14 +87,60 @@ class BrowserDialog extends ComfyDialog {
        textContent: "Browse in new tab",
      }),
    ]);
+    const toggleSidePanelBtn = $el("button", {
+      type: "button",
+      textContent: "Side/Center",
+      onclick: () => this.toggleSidePanel(),
+    });
    return [
-      $el("div", {}, [
+      $el("div", {
+        style: {
+          marginTop: '10px'
+        }
+      }, [
        closeBtn,
        browseBtn,
+        toggleSidePanelBtn,
      ]),
    ];
  }

+  onResize() {
+    const e = this.element;
+    setLocalConfig('modalStyles', {
+      left: e.style.left,
+      top: e.style.top,
+      transform: e.style.transform,
+      height: e.style.height,
+      width: e.style.width,
+    });
+  }
+
+  toggleSidePanel() {
+    const e = this.element;
+    if (e.style.left === '0px') {
+      e.style.left = '';
+      e.style.top = '';
+      e.style.transform = '';
+      e.style.height = '85%';
+      e.style.width = '80%';
+    } else {
+      e.style.left = '0px';
+      e.style.top = '0px';
+      e.style.transform = 'translate(-10px, -10px)';
+      e.style.height = '100%';
+      e.style.width = '32%';
+    }
+
+    setLocalConfig('modalStyles', {
+      left: e.style.left,
+      top: e.style.top,
+      transform: e.style.transform,
+      height: e.style.height,
+      width: e.style.width,
+    });
+  }
+
  close() {
    this.element.style.display = "none";
  }
@@ -69,6 +155,49 @@ class BrowserDialog extends ComfyDialog {
  }
 }

+function showToast(text, onClick) {
+  const toastId = 'comfy-browser-toast';
+  let toast = document.getElementById(toastId);
+  if (! toast) {
+    toast = $el("p", {
+      id: toastId,
+      textContent: '',
+      onclick: onClick,
+      style: {
+        position: 'fixed',
+        top: '70%',
+        left: '34%',
+        zIndex: 999,
+        backgroundColor: 'var(--comfy-menu-bg)',
+        fontSize: '42px',
+        color: 'green',
+        padding: '8px',
+        border: 'green',
+        borderStyle: 'solid',
+        borderRadius: '0.5rem',
+        display: 'none',
+      }
+    });
+    document.body.appendChild(toast);
+  }
+
+  toast.textContent = text;
+  toast.style.display = 'block';
+
+  setTimeout(() => {
+    toast.style.display = 'none';
+  }, 2000);
+}
+
+function showBrowserDialog(browserDialog) {
+  browserDialog.show($el("iframe", {
+    src: browserUrl + "?timestamp=" + Date.now(),
+    style: {
+      width: "100%",
+      height: "100%",
+    },
+  }));
+}

 app.registerExtension({
  name: "ComfyUI.Browser",
@@ -95,15 +224,7 @@ app.registerExtension({
            //color: "var(--descrip-text) !important",
            width: "80%",
          },
-          onclick: () => {
-            browserDialog.show($el("iframe", {
-              src: browserUrl + "?timestamp=" + Date.now(),
-              style: {
-                width: "100%",
-                height: "inherit",
-              },
-            }));
-          },
+          onclick: () => { showBrowserDialog(browserDialog); },
        }),
        $el("button", {
          id: "comfyui-browser-collect-button",
@@ -140,6 +261,10 @@ app.registerExtension({
              });
              if (res.ok) {
                saveBtn.style = originBtnStyle + "border-color: green;";
+                showToast(
+                  'Saved. Click me to open.',
+                  () => { showBrowserDialog(browserDialog); },
+                );
              } else {
                saveBtn.style = originBtnStyle + "border-color: red;";
              }
Author	SHA1	Message	Date
Xiuhan Hu	d130b653f1	add example sources stars	2023-12-20 12:42:01 +08:00
tzwm	dac9a38c8b	bump to v1.5.2 for modal resize	2023-12-20 11:05:03 +08:00
tzwm	89bab86546	add resize to BrowserModal	2023-12-20 11:03:24 +08:00
tzwm	6334648568	remember last tab in the localStorage	2023-12-20 09:13:10 +08:00
tzwm	7ce23cd0af	update styles for responsive	2023-12-20 08:57:01 +08:00
tzwm	f34fed59ad	save Modal styles to localStorage	2023-12-20 08:47:09 +08:00
tzwm	cd3a7b66e3	bump to v1.5.1 for side/center toggle	2023-12-20 08:25:15 +08:00
tzwm	9be53334d7	add side/center toggle	2023-12-20 08:24:05 +08:00
tzwm	56dcccfe0d	add help icon to Saves tab	2023-12-19 18:46:16 +08:00
tzwm	92199c3840	init git user.name and email in git_init function	2023-12-19 17:11:09 +08:00
tzwm	e209fbb4fd	Add the link for sources	2023-12-19 16:00:57 +08:00
tzwm	4aabb6b751	add total timeout for sources data	2023-12-16 16:21:42 +08:00
tzwm	63a7d85690	fix: wrong collections init	2023-12-16 14:38:57 +08:00
Samwise Wang	0d97fcfa4d	Update README_CN.md	2023-12-15 21:25:36 +08:00
Samwise Wang	ff626f7c29	Update README.md	2023-12-15 21:25:07 +08:00
tzwm	d201c143ef	Add README_CN	2023-12-15 20:49:43 +08:00
Samwise Wang	f26fd693dd	Update README.md	2023-12-15 20:37:40 +08:00
tzwm	8b13c75c3c	add Toast for saving current workflow	2023-12-15 17:16:30 +08:00
tzwm	24bb88389d	bump to v1.5.0 for styles update	2023-12-15 15:30:19 +08:00
tzwm	4106441fe8	add GitHub badge to navbar	2023-12-15 15:29:10 +08:00
tzwm	6c37b54410	add sync button to Sources#index	2023-12-15 14:46:19 +08:00
tzwm	b02229c693	add recommend sources	2023-12-15 14:34:54 +08:00
Samwise Wang	c1236c82f7	Update issue templates	2023-12-15 13:58:51 +08:00
tzwm	74f325bb4d	feat(api): add sources#all	2023-12-14 21:49:56 +08:00
tzwm	6382bcb894	add sources data	2023-12-14 18:08:49 +08:00
tzwm	81e1cd2a91	bump to v1.4.0 for styles updates	2023-12-14 17:49:14 +08:00
tzwm	e0c2c4bc44	update styles for Tab	2023-12-14 17:48:45 +08:00
tzwm	710ddaed10	update SourcesTab and rename Collections to Saves	2023-12-14 16:13:34 +08:00
Samwise Wang	43d4a5c2ef	Merge pull request #3 from talesofai/feat/style-and-search Add styling and a search filter	2023-12-14 10:46:11 +08:00
Xiuhan Hu	481946c1ae	Add styling and a search filter	2023-12-14 00:57:37 +08:00
tzwm	f366bdd465	fix sources#delete by hacking rmtree for Windows	2023-12-13 23:35:43 +08:00
tzwm	7dfe298048	fix sources#delete for Windows	2023-12-13 22:06:36 +08:00
tzwm	6c5c177c5b	hide load action for directory	2023-12-13 21:51:36 +08:00
tzwm	e6c6b8f0c4	fix: forgot to init souces_path	2023-12-13 21:36:12 +08:00
				`@@ -0,0 +1 @@`
				import{n as d,s as E}from"./scheduler.89bf212d.js";const u=[];function p(e,t=d){let n;const o=new Set;function r(s){if(E(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){r(s(e))}function a(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(r,i)\|\|d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:r,update:i,subscribe:a}}var g;const w=((g=globalThis.__sveltekit_1n5kjen)==null?void 0:g.base)??"";var k;const A=((k=globalThis.__sveltekit_1n5kjen)==null?void 0:k.assets)??w,R="1703046965654",I="sveltekit:snapshot",x="sveltekit:scroll",O="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1},v=location.origin;function U(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function L(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function m(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function N(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=m(e)}}function j(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,r=!n\|\|!!o\|\|T(n,t)\|\|(e.getAttribute("rel")\|\|"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===v&&e.hasAttribute("download");return{url:n,external:r,target:o,download:i}}function P(e){let t=null,n=null,o=null,r=null,i=null,a=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),r===null&&(r=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),a===null&&(a=f(s,"replacestate")),s=m(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[r??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(a)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(a=>a)}function r(a){n=!1,t.set(a)}function i(a){let s;return t.subscribe(c=>{(s===void 0\|\|n&&c!==s)&&a(s=c)})}return{notify:o,set:r,subscribe:i}}function S(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const r=await fetch(`${A}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!r.ok)return!1;const a=(await r.json()).version!==R;return a&&(e(!0),clearTimeout(n)),a}catch{return!1}}return{subscribe:t,check:o}}function T(e,t){return e.origin!==v\|\|!e.pathname.startsWith(t)}function V(e){e.client}const Y={url:h({}),page:h({}),navigating:p(null),updated:S()};export{O as I,_ as P,x as S,I as a,j as b,P as c,Y as d,w as e,N as f,U as g,V as h,T as i,v as o,L as s};
				`@@ -1 +0,0 @@`
				import{n as d,s as E}from"./scheduler.89bf212d.js";const u=[];function p(e,t=d){let n;const o=new Set;function a(s){if(E(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){a(s(e))}function r(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(a,i)\|\|d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:a,update:i,subscribe:r}}var g;const w=((g=globalThis.__sveltekit_1npfnva)==null?void 0:g.base)??"";var k;const A=((k=globalThis.__sveltekit_1npfnva)==null?void 0:k.assets)??w,R="1702473899953",I="sveltekit:snapshot",x="sveltekit:scroll",O="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1},v=location.origin;function U(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function L(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function m(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function N(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=m(e)}}function P(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,a=!n\|\|!!o\|\|T(n,t)\|\|(e.getAttribute("rel")\|\|"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===v&&e.hasAttribute("download");return{url:n,external:a,target:o,download:i}}function V(e){let t=null,n=null,o=null,a=null,i=null,r=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),a===null&&(a=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),r===null&&(r=f(s,"replacestate")),s=m(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[a??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(r)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(r=>r)}function a(r){n=!1,t.set(r)}function i(r){let s;return t.subscribe(c=>{(s===void 0\|\|n&&c!==s)&&r(s=c)})}return{notify:o,set:a,subscribe:i}}function S(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const a=await fetch(`${A}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!a.ok)return!1;const r=(await a.json()).version!==R;return r&&(e(!0),clearTimeout(n)),r}catch{return!1}}return{subscribe:t,check:o}}function T(e,t){return e.origin!==v\|\|!e.pathname.startsWith(t)}function Y(e){e.client}const q={url:h({}),page:h({}),navigating:p(null),updated:S()};export{O as I,_ as P,x as S,I as a,P as b,V as c,q as d,w as e,N as f,U as g,Y as h,T as i,v as o,L as s};