database schema

Reviewed-on: #24

.phpactor.json

@@ -0,0 +1,4 @@
+{
+    "$schema": "/phpactor.schema.json",
+    "language_server_phpstan.enabled": false
+}

.zed/settings.json

@@ -0,0 +1,8 @@
+{
+  "project_name": "Lucent Package",
+  "languages": {
+    "PHP": {
+      "language_servers": ["phpactor"],
+    },
+  },
+}

composer.json

@@ -15,7 +15,8 @@
         "phpoption/phpoption": "^1.9",
         "spatie/image-optimizer": "^1.6",
         "staudenmeir/laravel-cte": "^1.0",
-        "mustache/mustache": "^2.14"
+        "mustache/mustache": "^2.14",
+        "yosymfony/toml": "^1.0"
 
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e8fb1bee28ad339453d50110f7fea2f5",
+    "content-hash": "93994bb8d362147341e2fed15f80b93f",
     "packages": [
         {
             "name": "brick/math",
@@ -5657,6 +5657,116 @@
                 "source": "https://github.com/webmozarts/assert/tree/1.11.0"
             },
             "time": "2022-06-03T18:03:27+00:00"
+        },
+        {
+            "name": "yosymfony/parser-utils",
+            "version": "v2.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/yosymfony/parser-utils.git",
+                "reference": "00bec9a12722b21f2baf7f9db35f127e90c162c9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/yosymfony/parser-utils/zipball/00bec9a12722b21f2baf7f9db35f127e90c162c9",
+                "reference": "00bec9a12722b21f2baf7f9db35f127e90c162c9",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^6"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Yosymfony\\ParserUtils\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Victor Puertas",
+                    "email": "vpgugr@gmail.com",
+                    "homepage": "http://yosymfony.com"
+                }
+            ],
+            "description": "Parser utilities",
+            "homepage": "http://github.com/yosymfony/toml",
+            "keywords": [
+                "lexer",
+                "parser"
+            ],
+            "support": {
+                "issues": "https://github.com/yosymfony/parser-utils/issues",
+                "source": "https://github.com/yosymfony/parser-utils/tree/master"
+            },
+            "time": "2018-06-29T15:31:11+00:00"
+        },
+        {
+            "name": "yosymfony/toml",
+            "version": "v1.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/yosymfony/toml.git",
+                "reference": "bdab92ad920d0e36810a3a3e4a998d23f3498f8e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/yosymfony/toml/zipball/bdab92ad920d0e36810a3a3e4a998d23f3498f8e",
+                "reference": "bdab92ad920d0e36810a3a3e4a998d23f3498f8e",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1",
+                "yosymfony/parser-utils": "^2.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.1"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Yosymfony\\Toml\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Victor Puertas",
+                    "email": "vpgugr@gmail.com",
+                    "homepage": "http://yosymfony.com"
+                }
+            ],
+            "description": "A PHP parser for TOML compatible with specification 0.4.0",
+            "homepage": "http://github.com/yosymfony/toml",
+            "keywords": [
+                "mojombo",
+                "parser",
+                "toml"
+            ],
+            "support": {
+                "issues": "https://github.com/yosymfony/toml/issues",
+                "source": "https://github.com/yosymfony/toml/tree/master"
+            },
+            "time": "2018-08-08T15:08:14+00:00"
         }
     ],
     "packages-dev": [

database/setup.sql

@@ -0,0 +1,111 @@
+CREATE TABLE "channels" (
+	"id"	TEXT NOT NULL,
+	"name"	TEXT NOT NULL,
+	"locales"	TEXT NOT NULL,
+	PRIMARY KEY("id")
+)
+
+CREATE TABLE "edges" (
+	"id"	TEXT,
+	"from"	TEXT NOT NULL,
+	"to"	TEXT NOT NULL,
+	"field_id"	TEXT NOT NULL,
+	"rank"	INTEGER NOT NULL,
+	"locale"	TEXT NOT NULL,
+	"mode"	TEXT NOT NULL,
+	""	INTEGER,
+	UNIQUE("from","to","field_id","locale","mode"),
+	PRIMARY KEY("id")
+)
+
+CREATE TABLE "fields" (
+	"id"	TEXT NOT NULL,
+	"name"	TEXT NOT NULL,
+	"type"	TEXT NOT NULL,
+	"props"	TEXT NOT NULL,
+	"schema_id"	TEXT NOT NULL,
+	"alias"	TEXT NOT NULL,
+	"rank"	INTEGER NOT NULL DEFAULT 0,
+	"translatable"	INTEGER NOT NULL DEFAULT 0,
+	"help"	TEXT NOT NULL DEFAULT "",
+	"required"	INTEGER NOT NULL DEFAULT 0,
+	"readonly"	INTEGER NOT NULL DEFAULT 0,
+	"hidden"	INTEGER NOT NULL DEFAULT 0,
+	PRIMARY KEY("id")
+)
+
+CREATE TABLE "files" (
+	"id"	TEXT NOT NULL,
+	"name"	TEXT NOT NULL,
+	"size"	INTEGER NOT NULL,
+	"width"	INTEGER NOT NULL DEFAULT 0,
+	"height"	INTEGER NOT NULL DEFAULT 0,
+	"mime"	TEXT NOT NULL,
+	"checksum"	TEXT NOT NULL,
+	"record_id"	TEXT,
+	"is_shared"	INTEGER NOT NULL DEFAULT 0,
+	PRIMARY KEY("id")
+)
+
+CREATE TABLE "records" (
+	"id"	TEXT NOT NULL,
+	"schema_id"	TEXT NOT NULL,
+	"created_at"	TEXT NOT NULL,
+	"created_by"	TEXT NOT NULL,
+	"published_at"	TEXT,
+	"published_by"	TEXT,
+	"trashed_at"	TEXT,
+	"trashed_by"	INTEGER,
+	"scheduled_at"	TEXT,
+	"scheduled_by"	TEXT,
+	"title_field_id"	TEXT NOT NULL DEFAULT 'as',
+	PRIMARY KEY("id")
+)
+
+CREATE TABLE "records_data" (
+	"id"	TEXT NOT NULL,
+	"locale"	TEXT NOT NULL,
+	"value"	TEXT NOT NULL,
+	"updated_at"	TEXT NOT NULL,
+	"updated_by"	TEXT NOT NULL,
+	"mode"	TEXT NOT NULL,
+	"record_id"	TEXT NOT NULL,
+	"field_id"	TEXT NOT NULL,
+	PRIMARY KEY("id"),
+	UNIQUE("locale","mode","record_id","field_id")
+)
+
+CREATE TABLE "records_files" (
+	"id"	TEXT NOT NULL,
+	"record_id"	TEXT NOT NULL,
+	"file_id"	TEXT NOT NULL,
+	"mode"	TEXT NOT NULL,
+	"locale"	TEXT NOT NULL,
+	"rank"	INTEGER NOT NULL,
+	"field_id"	TEXT NOT NULL,
+	PRIMARY KEY("id"),
+	UNIQUE("record_id","file_id","mode","locale")
+)
+
+CREATE TABLE "schemas" (
+	"id"	TEXT NOT NULL,
+	"name"	TEXT NOT NULL,
+	"revisions"	INTEGER NOT NULL,
+	"alias"	TEXT NOT NULL,
+	"title_id"	TEXT NOT NULL,
+	PRIMARY KEY("id")
+)
+
+CREATE TABLE "users" (
+	"id"	varchar NOT NULL,
+	"name"	varchar,
+	"email"	varchar NOT NULL,
+	"password"	varchar,
+	"status"	varchar NOT NULL,
+	"roles"	TEXT NOT NULL,
+	"createdAt"	varchar NOT NULL,
+	"updatedAt"	varchar NOT NULL,
+	"loggedInAt"	varchar,
+	"mailToken"	varchar,
+	PRIMARY KEY("id")
+)

front/css/app.css

@@ -0,0 +1,16 @@
+@import "./pico.min.css";
+
+main {
+    display: flex;
+    gap: 40px;
+    aside {
+        width: 250px;
+        padding: 20px;
+    }
+}
+
+button.danger {
+    background-color: #d93526;
+    border-color: #d93526;
+    color: white;
+}

front/js/actions/debounce.svelte.js

@@ -0,0 +1,139 @@
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+export function throttle(delay, callback, options) {
+  const {
+    noTrailing = false,
+    noLeading = false,
+    debounceMode = undefined,
+  } = options || {};
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+  let timeoutID;
+  let cancelled = false;
+
+  // Keep track of the last time `callback` was executed.
+  let lastExec = 0;
+
+  // Function to clear existing timeout
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+
+  // Function to cancel next exec
+  function cancel(options) {
+    const { upcomingOnly = false } = options || {};
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+  function wrapper(...arguments_) {
+    let self = this;
+    let elapsed = Date.now() - lastExec;
+
+    if (cancelled) {
+      return;
+    }
+
+    // Execute `callback` and update the `lastExec` timestamp.
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+    function clear() {
+      timeoutID = undefined;
+    }
+
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+
+    clearExistingTimeout();
+
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(
+        debounceMode ? clear : exec,
+        debounceMode === undefined ? delay - elapsed : delay,
+      );
+    }
+  }
+
+  wrapper.cancel = cancel;
+
+  // Return the wrapper function.
+  return wrapper;
+}
+
+export function debounce(delay, callback, options) {
+  const { atBegin = false } = options || {};
+  return throttle(delay, callback, { debounceMode: atBegin !== false });
+}

front/js/app.js

@@ -0,0 +1,17 @@
+let app;
+let channel;
+
+export function createApp(channelData) {
+  channel = channelData;
+
+  app = {
+    url: (path) => {
+      return channel.lucentUrl + "/" + path;
+    },
+  };
+  return app;
+}
+
+export function getApp() {
+  return app;
+}

front/js/common/DeleteButton.svelte

@@ -0,0 +1,36 @@
+<script>
+    let { onDelete, text } = $props();
+    let isClicked = $state(false);
+
+    function handleTryDelete(e) {
+        e.preventDefault();
+        isClicked = true;
+    }
+
+    function handleCancel(e) {
+        e.preventDefault();
+        isClicked = false;
+    }
+
+    function handleRealDelete(e) {
+        e.preventDefault();
+        onDelete();
+    }
+</script>
+
+{#if !isClicked}
+    <form onsubmit={handleTryDelete}>
+        <button class="danger" type="submit">
+            {@render text()}
+        </button>
+    </form>
+{/if}
+{#if isClicked}
+    Are you sure?
+    <form onsubmit={handleCancel}>
+        <button class="secondary" type="submit">No</button>
+    </form>
+    <form onsubmit={handleRealDelete}>
+        <button class="danger" type="submit">Yes</button>
+    </form>
+{/if}

front/js/common/Icon.svelte

@@ -0,0 +1,159 @@
+<script>
+    const icons = {
+        "trash-can": {
+            path: '<path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM31.1 128H416V448C416 483.3 387.3 512 352 512H95.1C60.65 512 31.1 483.3 31.1 448V128zM111.1 208V432C111.1 440.8 119.2 448 127.1 448C136.8 448 143.1 440.8 143.1 432V208C143.1 199.2 136.8 192 127.1 192C119.2 192 111.1 199.2 111.1 208zM207.1 208V432C207.1 440.8 215.2 448 223.1 448C232.8 448 240 440.8 240 432V208C240 199.2 232.8 192 223.1 192C215.2 192 207.1 199.2 207.1 208zM304 208V432C304 440.8 311.2 448 320 448C328.8 448 336 440.8 336 432V208C336 199.2 328.8 192 320 192C311.2 192 304 199.2 304 208z"/>',
+            viewBox: "0 0 448 512",
+        },
+        "circle-chevron-down": {
+            path: '<path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM390.6 246.6l-112 112C272.4 364.9 264.2 368 256 368s-16.38-3.125-22.62-9.375l-112-112c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L256 290.8l89.38-89.38c12.5-12.5 32.75-12.5 45.25 0S403.1 234.1 390.6 246.6z"/>',
+            viewBox: "0 0 512 512",
+        },
+        "circle-chevron-up": {
+            path: '<path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM390.6 310.6c-12.5 12.5-32.75 12.5-45.25 0L256 221.3L166.6 310.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l112-112C239.6 147.1 247.8 144 256 144s16.38 3.125 22.62 9.375l112 112C403.1 277.9 403.1 298.1 390.6 310.6z"/>',
+            viewBox: "0 0 512 512",
+        },
+        ellipsis: {
+            path: '<path d="M120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200C94.93 200 120 225.1 120 256zM280 256C280 286.9 254.9 312 224 312C193.1 312 168 286.9 168 256C168 225.1 193.1 200 224 200C254.9 200 280 225.1 280 256zM328 256C328 225.1 353.1 200 384 200C414.9 200 440 225.1 440 256C440 286.9 414.9 312 384 312C353.1 312 328 286.9 328 256z"/>',
+            viewBox: "0 0 448 512",
+        },
+        "ellipsis-vertical": {
+            path: '<path d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"/>',
+            viewBox: "0 0 128 512",
+        },
+        "angles-down": {
+            path: '<path d="M169.4 278.6C175.6 284.9 183.8 288 192 288s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L192 210.8L54.63 73.38c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L169.4 278.6zM329.4 265.4L192 402.8L54.63 265.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l160 160C175.6 476.9 183.8 480 192 480s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25S341.9 252.9 329.4 265.4z"/>',
+            viewBox: "0 0 384 512",
+        },
+        "angle-right": {
+            path: '<path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>',
+            viewBox: "0 0 256 512",
+        },
+        "photo-film": {
+            path: '<path d="M352 432c0 8.836-7.164 16-16 16H176c-8.838 0-16-7.164-16-16L160 128H48C21.49 128 .0003 149.5 .0003 176v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48L512 384h-160L352 432zM104 439c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9v-30c0-4.969 4.031-9 9-9h30c4.969 0 9 4.031 9 9V439zM104 335c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9v-30c0-4.969 4.031-9 9-9h30c4.969 0 9 4.031 9 9V335zM104 231c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9v-30C56 196 60.03 192 65 192h30c4.969 0 9 4.031 9 9V231zM408 409c0-4.969 4.031-9 9-9h30c4.969 0 9 4.031 9 9v30c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9V409zM591.1 0H239.1C213.5 0 191.1 21.49 191.1 48v256c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48v-256C640 21.49 618.5 0 591.1 0zM303.1 64c17.68 0 32 14.33 32 32s-14.32 32-32 32C286.3 128 271.1 113.7 271.1 96S286.3 64 303.1 64zM574.1 279.6C571.3 284.8 565.9 288 560 288H271.1C265.1 288 260.5 284.6 257.7 279.3C255 273.9 255.5 267.4 259.1 262.6l70-96C332.1 162.4 336.9 160 341.1 160c5.11 0 9.914 2.441 12.93 6.574l22.35 30.66l62.74-94.11C442.1 98.67 447.1 96 453.3 96c5.348 0 10.34 2.672 13.31 7.125l106.7 160C576.6 268 576.9 274.3 574.1 279.6z"/>',
+            viewBox: "0 0 640 512",
+        },
+        file: {
+            path: '<path d="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z"/>',
+            viewBox: "0 0 384 512",
+        },
+        "circle-info": {
+            path: '<path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/>',
+            viewBox: "0 0 512 512",
+        },
+        "table-columns": {
+            path: '<path d="M0 96C0 60.65 28.65 32 64 32H448C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96zM64 416H224V160H64V416zM448 160H288V416H448V160z"/>',
+            viewBox: "0 0 512 512",
+        },
+        "arrow-down-a-z": {
+            path: '<path d="M239.6 373.1c11.94-13.05 11.06-33.31-1.969-45.27c-13.55-12.42-33.76-10.52-45.22 1.973L160 366.1V64.03c0-17.7-14.33-32.03-32-32.03S96 46.33 96 64.03v302l-32.4-35.39C51.64 317.7 31.39 316.7 18.38 328.7c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0L239.6 373.1zM448 416h-50.75l73.38-73.38c9.156-9.156 11.89-22.91 6.938-34.88S460.9 288 447.1 288H319.1C302.3 288 288 302.3 288 320s14.33 32 32 32h50.75l-73.38 73.38c-9.156 9.156-11.89 22.91-6.938 34.88S307.1 480 319.1 480h127.1C465.7 480 480 465.7 480 448S465.7 416 448 416zM492.6 209.3l-79.99-160.1c-10.84-21.81-46.4-21.81-57.24 0L275.4 209.3c-7.906 15.91-1.5 35.24 14.31 43.19c15.87 7.922 35.04 1.477 42.93-14.4l7.154-14.39h88.43l7.154 14.39c6.174 12.43 23.97 23.87 42.93 14.4C494.1 244.6 500.5 225.2 492.6 209.3zM367.8 167.4L384 134.7l16.22 32.63H367.8z"/>',
+            viewBox: "0 0 512 512",
+        },
+        "arrow-up-short-wide": {
+            path: '<path d="M544 416h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 416 544 416zM320 96h32c17.67 0 31.1-14.33 31.1-32s-14.33-32-31.1-32h-32c-17.67 0-32 14.33-32 32S302.3 96 320 96zM320 224H416c17.67 0 32-14.33 32-32s-14.33-32-32-32h-95.1c-17.67 0-32 14.33-32 32S302.3 224 320 224zM320 352H480c17.67 0 32-14.33 32-32s-14.33-32-32-32h-159.1c-17.67 0-32 14.33-32 32S302.3 352 320 352zM151.6 41.95c-12.12-13.26-35.06-13.26-47.19 0l-87.1 96.09C4.475 151.1 5.35 171.4 18.38 183.3c6.141 5.629 13.89 8.414 21.61 8.414c8.672 0 17.3-3.504 23.61-10.39L96 145.9v302C96 465.7 110.3 480 128 480s32-14.33 32-32.03V145.9L192.4 181.3C204.4 194.3 224.6 195.3 237.6 183.3c13.03-11.95 13.9-32.22 1.969-45.27L151.6 41.95z"/>',
+            viewBox: "0 0 576 512",
+        },
+        "arrow-down-wide-short": {
+            path: '<path d="M416 288h-95.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H416c17.67 0 32-14.33 32-32S433.7 288 416 288zM544 32h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 32 544 32zM352 416h-32c-17.67 0-32 14.33-32 32s14.33 32 32 32h32c17.67 0 31.1-14.33 31.1-32S369.7 416 352 416zM480 160h-159.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H480c17.67 0 32-14.33 32-32S497.7 160 480 160zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z"/>',
+            viewBox: "0 0 576 512",
+        },
+        filter: {
+            path: '<path d="M3.853 54.87C10.47 40.9 24.54 32 40 32H472C487.5 32 501.5 40.9 508.1 54.87C514.8 68.84 512.7 85.37 502.1 97.33L320 320.9V448C320 460.1 313.2 471.2 302.3 476.6C291.5 482 278.5 480.9 268.8 473.6L204.8 425.6C196.7 419.6 192 410.1 192 400V320.9L9.042 97.33C-.745 85.37-2.765 68.84 3.854 54.87L3.853 54.87z"/>',
+            viewBox: "0 0 512 512",
+        },
+        calendar: {
+            path: '<path d="M96 32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32zM448 464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192H448V464z"/>',
+            viewBox: "0 0 448 512",
+        },
+        pencil: {
+            path: '<path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"/>',
+            viewBox: "0 0 512 512",
+        },
+        database: {
+            path: '<path d="M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"/>',
+            viewBox: "0 0 448 512",
+        },
+        dice: {
+            path: '<path d="M447.1 224c0-12.56-4.781-25.13-14.35-34.76l-174.9-174.9C249.1 4.786 236.5 0 223.1 0C211.4 0 198.9 4.786 189.2 14.35L14.35 189.2C4.783 198.9-.0011 211.4-.0011 223.1c0 12.56 4.785 25.17 14.35 34.8l174.9 174.9c9.625 9.562 22.19 14.35 34.75 14.35s25.13-4.783 34.75-14.35l174.9-174.9C443.2 249.1 447.1 236.6 447.1 224zM96 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S120 210.8 120 224S109.3 248 96 248zM224 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 376 224 376zM224 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S248 210.8 248 224S237.3 248 224 248zM224 120c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 120 224 120zM352 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S365.3 248 352 248zM591.1 192l-118.7 0c4.418 10.27 6.604 21.25 6.604 32.23c0 20.7-7.865 41.38-23.63 57.14l-136.2 136.2v46.37C320 490.5 341.5 512 368 512h223.1c26.5 0 47.1-21.5 47.1-47.1V240C639.1 213.5 618.5 192 591.1 192zM479.1 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S493.2 376 479.1 376z"/>',
+            viewBox: "0 0 640 512",
+        },
+
+        "triangle-exclamation": {
+            path: '<path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/>',
+            viewBox: "0 0 512 512",
+        },
+        eye: {
+            path: '<path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"/>',
+            viewBox: "0 0 576 512",
+        },
+        "circle-plus": {
+            path: '<path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 368C269.3 368 280 357.3 280 344V280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H280V168C280 154.7 269.3 144 256 144C242.7 144 232 154.7 232 168V232H168C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H232V344C232 357.3 242.7 368 256 368z"/>',
+            viewBox: "0 0 512 512",
+        },
+        "magnifying-glass": {
+            path: '<path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>',
+            viewBox: "0 0 512 512",
+        },
+        expand: {
+            path: '<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z"/>',
+            viewBox: "0 0 448 512",
+        },
+        compress: {
+            path: '<path d="M128 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32v-96C160 334.3 145.7 320 128 320zM416 320h-96c-17.69 0-32 14.31-32 32v96c0 17.69 14.31 32 32 32s32-14.31 32-32v-64h64c17.69 0 32-14.31 32-32S433.7 320 416 320zM320 192h96c17.69 0 32-14.31 32-32s-14.31-32-32-32h-64V64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96C288 177.7 302.3 192 320 192zM128 32C110.3 32 96 46.31 96 64v64H32C14.31 128 0 142.3 0 160s14.31 32 32 32h96c17.69 0 32-14.31 32-32V64C160 46.31 145.7 32 128 32z"/>',
+            viewBox: "0 0 448 512",
+        },
+        check: {
+            path: '<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/>',
+            viewBox: "0 0 448 512",
+        },
+        close: {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
+            viewBox: "0 0 24 24",
+        },
+        "arrow-left": {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
+            viewBox: "0 0 24 24",
+        },
+        list: {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
+            viewBox: "0 0 24 24",
+        },
+        "ordered-list": {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
+            viewBox: "0 0 24 24",
+        },
+        italic: {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
+            viewBox: "0 0 24 24",
+        },
+    };
+
+    let {
+        width = 16,
+        height = 16,
+        icon,
+        fill = "currentColor",
+        stroke = "currentColor",
+    } = $props();
+
+    let selectedIcon = icons[icon];
+</script>
+
+<svg
+    class="bi"
+    xmlns="http://www.w3.org/2000/svg"
+    {width}
+    {height}
+    viewBox={selectedIcon.viewBox}
+    aria-labelledby={icon}
+    role="presentation"
+    {stroke}
+    {fill}
+>
+    {@html selectedIcon.path}
+</svg>
+
+<style>
+    svg {
+        vertical-align: text-top;
+    }
+</style>

front/js/common/Sortable.svelte

@@ -0,0 +1,150 @@
+<script>
+    import { arrayMoveElement } from "../helpers";
+    import { flip } from "svelte/animate";
+
+    let {
+        sortableClass,
+        onUpdate,
+        items,
+        itemView,
+        itemCssClass,
+        itemKey = "id",
+        type = "list",
+        handleClass = null,
+        disabled = false,
+    } = $props();
+    // let sortableInstance = $state();
+    let sortableContainer = $state();
+    let draggedItem = $state();
+
+    function handleDragStart(event, item) {
+        if (disabled) {
+            return false;
+        }
+        draggedItem = item;
+        // Set data required for drag operation
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", item.id);
+        // Set a ghost drag image
+        event.currentTarget.classList.add("dragging");
+    }
+
+    // Handle drag over another item
+    function handleDragOver(event) {
+        event.preventDefault();
+        event.target.closest(".draggable-item").classList.add("dragover");
+        event.dataTransfer.dropEffect = "move";
+    }
+
+    // Handle dropping the item
+    function handleDrop(event, targetItem) {
+        event.preventDefault();
+
+        if (draggedItem === targetItem) return;
+        // Find positions of dragged and target items
+        const draggedIndex = items.findIndex(
+            (item) => getItem(item, itemKey) === getItem(draggedItem, itemKey),
+        );
+        const targetIndex = items.findIndex(
+            (item) => getItem(item, itemKey) === getItem(targetItem, itemKey),
+        );
+
+        onUpdate(
+            arrayMoveElement([...items], draggedIndex, targetIndex),
+            draggedIndex,
+            targetIndex,
+        );
+    }
+
+    function getItem(item, key) {
+        if (key === null) {
+            return item;
+        }
+        if (key.includes(".")) {
+            return key.split(".").reduce((a, b) => a[b] ?? null, item);
+        }
+        return item[key];
+    }
+
+    function handleDragEnd(event) {
+        event.target.classList.remove("dragging");
+        sortableContainer
+            .querySelector(".dragover")
+            ?.classList.remove("dragover");
+        draggedItem = null;
+        const draggableItem = event.target.closest(".draggable-item");
+        draggableItem.draggable = false;
+    }
+
+    function handleDragLeave(event) {
+        // event.target.classList.remove("dragover");
+        const draggableItem = event.target.closest(".draggable-item");
+        draggableItem.classList.remove("dragover");
+        draggableItem.draggable = false;
+    }
+
+    function handleMouseDown(e) {
+        const handleEl = e.target.closest("." + handleClass);
+        if (!handleEl) {
+            return true;
+        }
+        const draggableItem = e.target.closest(".draggable-item");
+        draggableItem.draggable = true;
+    }
+
+    function handleMouseUp(e) {
+        const handleEl = e.target.closest("." + handleClass);
+        if (!handleEl) {
+            return true;
+        }
+        const draggableItem = e.target.closest(".draggable-item");
+        draggableItem.draggable = false;
+    }
+</script>
+
+{#if type === "table"}
+    <tbody
+        class="sortable-container {sortableClass}"
+        bind:this={sortableContainer}
+    >
+        {#each items as item (getItem(item, itemKey))}
+            <tr
+                animate:flip={{ duration: 100 }}
+                class="draggable-item {itemCssClass}"
+                draggable="false"
+                onmousedown={handleMouseDown}
+                onmouseup={handleMouseUp}
+                ondragstart={(e) => handleDragStart(e, item)}
+                ondragover={handleDragOver}
+                ondragleave={handleDragLeave}
+                ondrop={(e) => handleDrop(e, item)}
+                ondragend={handleDragEnd}
+            >
+                {@render itemView(item)}
+            </tr>
+        {/each}
+    </tbody>
+{:else}
+    <div
+        class="sortable-container {sortableClass}"
+        bind:this={sortableContainer}
+    >
+        {#each items as item (getItem(item, itemKey))}
+            <div
+                animate:flip={{ duration: 100 }}
+                role="listitem"
+                class="draggable-item {itemCssClass}"
+                draggable="false"
+                onmousedown={handleMouseDown}
+                onmouseup={handleMouseUp}
+                ondragstart={(e) => handleDragStart(e, item)}
+                ondragover={handleDragOver}
+                ondragleave={handleDragLeave}
+                ondrop={(e) => handleDrop(e, item)}
+                ondragend={handleDragEnd}
+            >
+                {@render itemView(item)}
+            </div>
+        {/each}
+    </div>
+{/if}

front/js/entry/ContentEntry/ContentEntry.svelte

@@ -0,0 +1,124 @@
+<script>
+    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
+    import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
+    import Table from "./Table.svelte";
+    import Tools from "./Tools.svelte";
+
+    // import Tools from "./tools/Tools.svelte";
+    // import Pagination from "./pagination/Pagination.svelte";
+    // import ActionsOnSelected from "./ActionsOnSelected.svelte";
+    // import Table from "./Table.svelte";
+    let { channel, user, data } = $props();
+    let newRecordName = $state("");
+    const app = getApp();
+    // export let schema;
+    // export let users;
+    // export let records;
+    // export let graph;
+    // // export let visibleFields;
+    // export let systemFields;
+    // export let sortParam;
+    // export let sortField;
+    // export let operators;
+    // export let filter;
+    // export let limit;
+    // export let skip;
+    // export let total;
+    let inModal = false;
+    // export let modalUrl;
+    // export let selected = [];
+    // export let isWritable = false;
+
+    // function refresh(e) {
+    //     const newUrl = e.detail;
+    //     axios
+    //         .get(newUrl)
+    //         .then((response) => {
+    //             records = response.data.records;
+    //             sortParam = response.data.sortParam;
+    //             sortField = response.data.sortField;
+    //             operators = response.data.operators;
+    //             filter = response.data.filter;
+    //             skip = response.data.skip;
+    //             limit = response.data.limit;
+    //             total = response.data.total;
+    //             modalUrl = response.data.modalUrl;
+    //             document.querySelector("dialog h3").scrollIntoView();
+    //         })
+    //         .catch((error) => {
+    //             console.log(error);
+    //         });
+    // }
+    //
+
+    function handleRecordCreate(e) {
+        e.preventDefault();
+        post(
+            channel.lucentUrl + "/records",
+            {
+                schemaId: data.schema.id,
+                title: newRecordName,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(app.url("records/" + data.id));
+                }
+            },
+        );
+    }
+</script>
+
+<ChannelLayout {body} {channel} schemas={data.schemas} {user}></ChannelLayout>
+{#snippet body()}
+    <div class="">
+        <div class={inModal ? "mt-0" : "mt-5"}>
+            <h3 class="header-normal mb-5">
+                {data.schema.name}
+            </h3>
+            <details style="max-width: 400px;">
+                <summary>New Record</summary>
+                <form onsubmit={handleRecordCreate}>
+                    <fieldset>
+                        <input
+                            bind:value={newRecordName}
+                            placeholder="Record title"
+                            required
+                        />
+                    </fieldset>
+                    <button type="submit">Create</button>
+                </form>
+            </details>
+            <!-- {#if selected.length > 0 && !inModal && isWritable}
+            <ActionsOnSelected {schema} {selected} {filter}/>
+        {:else}
+            <Tools
+                    bind:schema
+                    bind:records
+                    {systemFields}
+                    {sortParam}
+                    {sortField}
+                    {operators}
+                    {filter}
+                    {graph}
+                    {inModal}
+                    {modalUrl}
+                    {isWritable}
+                    on:refresh={refresh}
+            />
+        {/if}
+-->
+            <Tools fields={data.fields}></Tools>
+            <Table records={data.records} fields={data.fields}></Table>
+        </div>
+        <!--
+    <Pagination
+            {limit}
+            {skip}
+            {total}
+            on:refresh={refresh}
+            {inModal}
+            {modalUrl}
+    /> -->
+    </div>
+{/snippet}

front/js/entry/ContentEntry/Table.svelte

@@ -0,0 +1,126 @@
+<script>
+    // import RecordRow from "./RecordRow.svelte";
+    // import { previewTitle } from "../records/Preview";
+    // import { usernameById } from "../account/users";
+    // import Avatar from "../../common/Avatar.svelte";
+    // import { selectRecord, toggleAll } from "./functions/recordSelect.js";
+    // import Checkbox from "../common/Checkbox.svelte";
+    // import Preview from "../files/Preview.svelte";
+    // import { fileurl } from "../files/imageserver.js";
+    import { getApp } from "../../app";
+
+    let { channel, records = [], fields = [], inModal = false } = $props();
+    let params = new URLSearchParams(document.location.search);
+    let columns = $state(params.get("columns")?.split(",") || []);
+    let visibleFields = $derived(fields.filter((f) => columns.includes(f.id)));
+    // export let schema;
+    // export let users;
+    // export let records;
+    // export let graph;
+    // export let systemFields;
+    // export let sortParam;
+    // export let sortField;
+    // export let inModal;
+    // export let isWritable;
+    // export let selected = [];
+    const app = getApp();
+
+    // function eventToggleAll(e) {
+    //     selected = toggleAll(e, records, selected);
+    // }
+
+    // function select(record) {
+    //     selected = selectRecord(record, selected);
+    // }
+
+    // $: visibleColumns = schema.fields.filter(
+    //     (c) => schema.visible?.includes(c.name) ?? [],
+    // );
+</script>
+
+<div class="table mt-5">
+    <table>
+        <thead>
+            <tr>
+                <!-- <th>
+                    <Checkbox
+                        value=""
+                        on:change={eventToggleAll}
+                        indeterminate={selected.length > 0 &&
+                            selected.length < records.length}
+                        checked={selected.length === records.length}
+                    ></Checkbox>
+                </th> -->
+                <th>Title</th>
+
+                {#each visibleFields as field}
+                    <th scope="col" title={field.help}>{field.name}</th>
+                {/each}
+                <!-- {#each systemFields.filter( (c) => schema.visible?.includes(c.name), ) as sysField}
+                    <th class:is-sort={sysField.name === sortField.name}
+                        >{sysField.label}</th
+                    >
+                {/each} -->
+                <!-- <th></th> -->
+            </tr>
+        </thead>
+        <tbody>
+            {#each records as qRecord (qRecord.record.id)}
+                <tr>
+                    <td class="title-td">
+                        <div class="title-td-contents">
+                            <!-- <Checkbox
+                                on:change={() => select(record)}
+                                checked={selected.find(
+                                    (r) => r.id === record.id,
+                                )}
+                                value={record}
+                            ></Checkbox> -->
+
+                            <a
+                                href="{app.url('records/')}{qRecord.record.id}"
+                                target={inModal ? "_blank" : "_self"}
+                            >
+                                <!-- {#if record.status === "draft"}
+                                    <span
+                                        style="text-transform: uppercase;font-size:10px"
+                                        >{record.status}</span
+                                    >
+                                {/if} -->
+                                <!-- {previewTitle(channel.schemas, record, graph)} -->
+                                {qRecord.recordPreview.title}
+                            </a>
+                        </div>
+                    </td>
+                    {#each visibleFields as field}
+                        <td>
+                            {qRecord.data.find((f) => f.fieldId === field.id)
+                                ?.value}
+
+                            <ul>
+                                {#each qRecord.children.filter((e) => e.edge.fieldId === field.id) as child}
+                                    <li>{child.recordPreview.title}</li>
+                                {/each}
+                            </ul>
+                        </td>
+                    {/each}
+                    <!-- <RecordRow
+                        {record}
+                        {graph}
+                        {schema}
+                        {visibleColumns}
+                        {sortParam}
+                        {sortField}
+                        {users}
+                    /> -->
+                    <!-- <td>
+                        <Avatar
+                            name={usernameById(users, record._sys.updatedBy)}
+                            side={24}
+                        />
+                    </td> -->
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>

front/js/entry/ContentEntry/Tools.svelte

@@ -0,0 +1,76 @@
+<script>
+    let { fields } = $props();
+
+    let params = new URLSearchParams(document.location.search);
+
+    let sortBy = $state(params.get("sortBy") + "_" + params.get("sortDir"));
+    let columns = $state(params.get("columns")?.split(",") || []);
+
+    function handleSortAsc() {
+        params.set("sortBy", sortBy.replace("_asc", ""));
+        params.set("sortDir", "asc");
+        Turbo.visit(window.location.pathname + `?` + params.toString());
+    }
+
+    function handleSortDesc() {
+        params.set("sortBy", sortBy.replace("_desc", ""));
+        params.set("sortDir", "desc");
+        Turbo.visit(window.location.pathname + `?` + params.toString());
+    }
+
+    function handleToggleColumn() {
+        params.set("columns", columns.join(","));
+        Turbo.visit(window.location.pathname + `?` + params.toString());
+    }
+</script>
+
+<!-- Radios -->
+<details class="dropdown">
+    <summary> Sort by </summary>
+    <ul>
+        {#each fields as field}
+            <li>
+                <label>
+                    <input
+                        bind:group={sortBy}
+                        type="radio"
+                        value={field.id + "_asc"}
+                        onchange={handleSortAsc}
+                    />
+                    {field.name}
+                </label>
+            </li>
+            <li>
+                <label>
+                    <input
+                        bind:group={sortBy}
+                        type="radio"
+                        value={field.id + "_desc"}
+                        onchange={handleSortDesc}
+                    />
+                    {field.name} desc
+                </label>
+            </li>
+        {/each}
+    </ul>
+</details>
+
+<!-- Checkboxes -->
+<details class="dropdown">
+    <summary> Show/Hide columns </summary>
+    <ul>
+        {#each fields as field}
+            <li>
+                <label>
+                    <input
+                        bind:group={columns}
+                        type="checkbox"
+                        value={field.id}
+                        onchange={handleToggleColumn}
+                    />
+                    {field.name}
+                </label>
+            </li>
+        {/each}
+    </ul>
+</details>

front/js/entry/FieldCreateEntry/FieldCreateEntry.svelte

@@ -0,0 +1,65 @@
+<script>
+    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
+    import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
+    let { channel, user, data, newRank } = $props();
+    let name = $state("");
+    let alias = $state("");
+    const app = getApp();
+
+    function handleCreate(e) {
+        e.preventDefault();
+        post(
+            app.url("fields"),
+            {
+                schemaId: data.schema.id,
+                name: name,
+                alias: alias,
+                fieldType: data.type,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(app.url("fields/edit/" + data.field.id));
+                } else {
+                    console.log(err);
+                }
+            },
+        );
+    }
+</script>
+
+<SchemaLayout {body} {channel} {user}></SchemaLayout>
+{#snippet body()}
+    <h3 class="header-small mb-4 mt-5">Create a <em>{data.type}</em> field</h3>
+
+    <form onsubmit={handleCreate}>
+        <fieldset>
+            <label>
+                Name
+                <input
+                    bind:value={name}
+                    placeholder="ex. Description"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                />
+            </label>
+            <label>
+                Alias
+                <input
+                    bind:value={alias}
+                    placeholder="ex. description"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                    aria-describedby="alias-helper"
+                />
+                <small id="alias-helper">
+                    Developers will use this to reference the field
+                </small>
+            </label>
+        </fieldset>
+
+        <button type="submit">Create</button>
+    </form>
+{/snippet}

front/js/entry/FieldEditEntry/FieldEditEntry.svelte

@@ -0,0 +1,160 @@
+<script>
+    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
+    import TextFieldProps from "./TextFieldProps.svelte";
+    import RelationFieldProps from "./RelationFieldProps.svelte";
+    import FileFieldProps from "./FileFieldProps.svelte";
+    import DeleteButton from "../../common/DeleteButton.svelte";
+    import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
+    let { channel, user, data } = $props();
+
+    const app = getApp();
+
+    function handleUpdate(e) {
+        e.preventDefault();
+        post(
+            app.url("fields/update"),
+            {
+                field: data.field,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(app.url("schemas"));
+                } else {
+                    console.log(err);
+                }
+            },
+        );
+    }
+
+    function handleDelete() {
+        post(
+            app.url("fields/delete"),
+            {
+                fieldId: data.field.id,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(app.url("schemas"));
+                } else {
+                    console.log(err);
+                }
+            },
+        );
+    }
+</script>
+
+<SchemaLayout {body} {channel} {user}></SchemaLayout>
+{#snippet body()}
+    <h3 class="header-small mb-4 mt-5">
+        Edit <em>{data.field.type}</em> field {data.field.name}
+    </h3>
+
+    {#if data.field.alias == "_title"}
+        {@render titleField()}
+    {:else}
+        {@render normalfield()}
+    {/if}
+{/snippet}
+
+{#snippet normalfield()}
+    <form onsubmit={handleUpdate}>
+        <fieldset>
+            <label>
+                Name
+                <input
+                    bind:value={data.field.name}
+                    placeholder="ex. Description"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                />
+            </label>
+            <label>
+                Alias
+                <input
+                    bind:value={data.field.alias}
+                    placeholder="ex. description"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                    aria-describedby="alias-helper"
+                />
+                <small id="alias-helper">
+                    Developers will use this to reference the field
+                </small>
+            </label>
+            <label>
+                Help text
+                <input bind:value={data.field.help} />
+            </label>
+            <label>
+                <input
+                    bind:checked={data.field.translatable}
+                    type="checkbox"
+                    role="switch"
+                />
+                Is Translatable
+            </label>
+            <fieldset>
+                <label>
+                    <input
+                        bind:checked={data.field.required}
+                        type="checkbox"
+                        role="switch"
+                    />
+                    Required
+                </label>
+                <label>
+                    <input
+                        bind:checked={data.field.readonly}
+                        type="checkbox"
+                        role="switch"
+                    />
+                    Readonly
+                </label>
+                <label>
+                    <input
+                        bind:checked={data.field.hidden}
+                        type="checkbox"
+                        role="switch"
+                    />
+                    Hidden
+                </label>
+            </fieldset>
+        </fieldset>
+
+        {#if data.field.type === "text"}
+            <TextFieldProps field={data.field}></TextFieldProps>
+        {:else if data.field.type === "relation"}
+            <RelationFieldProps field={data.field} schemas={data.schemas}
+            ></RelationFieldProps>
+        {:else if data.field.type === "file"}
+            <FileFieldProps field={data.field}></FileFieldProps>
+        {/if}
+
+        <button type="submit">Update</button>
+    </form>
+    <DeleteButton onDelete={handleDelete}>
+        {#snippet text()}
+            Delete field
+        {/snippet}
+    </DeleteButton>
+{/snippet}
+
+{#snippet titleField()}
+    <form onsubmit={handleUpdate}>
+        <fieldset>
+            <label>
+                <input
+                    bind:checked={data.field.translatable}
+                    type="checkbox"
+                    role="switch"
+                />
+                Is Translatable
+            </label>
+        </fieldset>
+
+        <button type="submit">Update</button>
+    </form>
+{/snippet}

front/js/entry/FieldEditEntry/FileFieldProps.svelte

@@ -0,0 +1,15 @@
+<script>
+    let { field } = $props();
+</script>
+
+<fieldset>
+    <label>
+        Min items
+        <input type="number" bind:value={field.props.min} />
+    </label>
+
+    <label>
+        Max items
+        <input type="number" bind:value={field.props.max} />
+    </label>
+</fieldset>

front/js/entry/FieldEditEntry/RelationFieldProps.svelte

@@ -0,0 +1,29 @@
+<script>
+    let { field, schemas } = $props();
+</script>
+
+<fieldset>
+    <label>
+        Schemas
+        <select
+            bind:value={field.props.schemas}
+            aria-label="Select allowed schemas"
+            multiple
+            size="6"
+        >
+            <option disabled>Select allowed schemas </option>
+            {#each schemas as schema}
+                <option value={schema.id}>{schema.name}</option>
+            {/each}
+        </select>
+    </label>
+    <label>
+        Min items
+        <input type="number" bind:value={field.props.min} />
+    </label>
+
+    <label>
+        Max items
+        <input type="number" bind:value={field.props.max} />
+    </label>
+</fieldset>

front/js/entry/FieldEditEntry/TextFieldProps.svelte

@@ -0,0 +1,20 @@
+<script>
+    let { field } = $props();
+</script>
+
+<fieldset>
+    <label>
+        Default
+        <input bind:value={field.props.default} />
+    </label>
+
+    <label>
+        Min characters
+        <input type="number" bind:value={field.props.min} />
+    </label>
+
+    <label>
+        Max characters
+        <input type="number" bind:value={field.props.max} />
+    </label>
+</fieldset>

front/js/entry/HomeEntry/HomeEntry.svelte

@@ -0,0 +1,36 @@
+<script>
+    import { getContext, onMount } from "svelte";
+    import RecordRow from "./RecordRow.svelte";
+    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
+    import { get } from "../../modules/remote";
+    let { channel, user, data } = $props();
+    let records = $state([]);
+    let graph = $state(null);
+    let users = $state([]);
+    onMount(() => {
+        get(channel.lucentUrl + "/home/records", {}, (data) => {
+            records = data.records;
+            graph = data.graph;
+            users = data.users;
+        });
+    });
+</script>
+
+<ChannelLayout {body} {channel} schemas={data.schemas} {user}></ChannelLayout>
+{#snippet body()}
+    <h3 class="header-small mb-4 mt-5">Latest Content changes</h3>
+    {#if records.length > 0}
+        <div class="table">
+            <table class="">
+                <tbody>
+                    {#each records as record (record.id)}
+                        <tr>
+                            <RecordRow {channel} {graph} {record} {users}
+                            ></RecordRow>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    {/if}
+{/snippet}

front/js/entry/HomeEntry/RecordRow.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { formatDistanceToNow, parseJSON } from "date-fns";
+    import Avatar from "../../common/Avatar.svelte";
+    import { previewTitle } from "../../svelte/records/Preview";
+    import Preview from "../../svelte/files/Preview.svelte";
+    import { usernameById } from "../../svelte/account/users";
+
+    let { channel, users, record, graph } = $props();
+    let schema = $derived(
+        channel.schemas.find((s) => s.name === record.schema),
+    );
+    let frieldlyUpdatedAt = formatDistanceToNow(
+        parseJSON(record._sys.updatedAt),
+        { addSuffix: true },
+    );
+</script>
+
+<td>
+    <div class="row-name">
+        {#if record.status === "draft"}
+            <span class="status">DRAFT</span>
+        {/if}
+        {#if schema.type === "files"}
+            <!-- <Preview {record} size="tiny" showFilename={true} /> -->
+        {:else}
+            <a href="{channel.lucentUrl}/records/{record.id}">
+                <!-- {previewTitle(channel.schemas, record, graph)} -->
+            </a>
+        {/if}
+    </div>
+</td>
+<td><a href="{channel.lucentUrl}/content/{schema.name}">{schema.label}</a> </td>
+
+<td>
+    <div style="display: flex;gap: 14px">
+        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24} />
+        <div class="ms-2">
+            {frieldlyUpdatedAt}
+        </div>
+    </div>
+</td>

front/js/entry/LoginEntry/LoginEntry.svelte

@@ -0,0 +1,53 @@
+<script>
+    import AccountLayout from "../../layouts/AccountLayout.svelte";
+    import { post } from "../../modules/remote";
+    let { channel } = $props();
+    let email = $state("");
+    let message = $state("");
+    let isLoading = $state(false);
+    $inspect(channel);
+    function login(e) {
+        e.preventDefault();
+        isLoading = true;
+        post(
+            channel.lucentUrl + "/login",
+            {
+                email: email,
+            },
+            (data, err) => {
+                isLoading = false;
+                message = "You will receive an email with a login link";
+            },
+        );
+    }
+</script>
+
+<AccountLayout {body} {channel}></AccountLayout>
+{#snippet body()}
+    <div class="wrapper-tiny">
+        {#if message}
+            <div class="alert alert-info" role="alert">
+                {message}
+            </div>
+        {:else}
+            <form onsubmit={login}>
+                <div class="mb-3">
+                    <label for="emailaddress" class="form-label"
+                        >Email address</label
+                    >
+                    <input
+                        type="email"
+                        bind:value={email}
+                        class="form-control"
+                        id="emailaddress"
+                        required
+                    />
+                </div>
+
+                <div class="text-center mt-5 d-block">
+                    <button aria-busy={isLoading}>Login</button>
+                </div>
+            </form>
+        {/if}
+    </div>
+{/snippet}

front/js/entry/RecordEditEntry/LocaleChooser.svelte

@@ -0,0 +1,32 @@
+<script>
+    import { getSelectedLocales, getLocaleName } from "./locale.svelte.js";
+    let { channel, onLocaleChange } = $props();
+    let selectedLocales = $state(getSelectedLocales());
+
+    let selectedLocaleNames = $derived(
+        selectedLocales.map((id) => getLocaleName(channel, id)),
+    );
+    function handleChange() {
+        localStorage.setItem("selectedLocales", selectedLocales);
+        onLocaleChange();
+    }
+</script>
+
+<details class="dropdown">
+    <summary>Locales: {selectedLocaleNames.join(", ")}</summary>
+    <ul>
+        {#each channel.locales as locale}
+            <li>
+                <label>
+                    <input
+                        type="checkbox"
+                        bind:group={selectedLocales}
+                        onchange={handleChange}
+                        value={locale.id}
+                    />
+                    {locale.name}
+                </label>
+            </li>
+        {/each}
+    </ul>
+</details>

front/js/entry/RecordEditEntry/PublishingOptions.svelte

@@ -0,0 +1,60 @@
+<script>
+    import { getApp } from "../../app";
+    import { post } from "../../modules/remote";
+    import Icon from "./../../common/Icon.svelte";
+    let { record, status } = $props();
+    let date = $state(null);
+    const app = getApp();
+    function handlePublish() {
+        post(app.url("records/publish"), { id: record.id }, (data, err) => {
+            Turbo.visit(window.location.href);
+        });
+    }
+
+    function handleTrash() {
+        post(app.url("records/trash"), { id: record.id }, (data, err) => {
+            Turbo.visit(window.location.href);
+        });
+    }
+    function handleSchedule() {
+        post(
+            app.url("records/schedule"),
+            { id: record.id, date: date },
+            (data, err) => {
+                Turbo.visit(window.location.href);
+            },
+        );
+    }
+</script>
+
+<div style="display: flex; gap:20px">
+    {#if status != "trashed"}
+        <button onclick={handlePublish}>Publish Now</button>
+    {/if}
+    <details class="dropdown">
+        <summary role="button" class="secondary"
+            ><Icon icon="ellipsis-vertical"></Icon></summary
+        >
+        <ul>
+            <li>
+                <form onsubmit={handleSchedule}>
+                    <fieldset role="group">
+                        <input
+                            bind:value={date}
+                            type="datetime-local"
+                            aria-label="Datetime local"
+                            required
+                        />
+                        <button>Schedule</button>
+                    </fieldset>
+                </form>
+            </li>
+            <li><a href="#">View Revisions</a></li>
+            {#if status != "trashed"}
+                <li>
+                    <button onclick={handleTrash}>Move to trash</button>
+                </li>
+            {/if}
+        </ul>
+    </details>
+</div>

front/js/entry/RecordEditEntry/RecordEditEntry.svelte

@@ -0,0 +1,74 @@
+<script>
+    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
+    import { onMount } from "svelte";
+
+    import LocaleChooser from "./LocaleChooser.svelte";
+    import RecordForm from "./RecordForm.svelte";
+    import RecordStatus from "./RecordStatus.svelte";
+    import PublishingOptions from "./PublishingOptions.svelte";
+    import { getSelectedLocales } from "./locale.svelte.js";
+    let { channel, user, data } = $props();
+    let selectedLocales = $state(getSelectedLocales());
+    let record = $state(data.record);
+    let showPublished = $state(false);
+
+    function handleLocaleChange() {
+        selectedLocales = getSelectedLocales();
+    }
+    function toggleLiveData() {
+        if (!showPublished) {
+            // to avoid state sync
+            Turbo.visit(window.location.href);
+        }
+    }
+</script>
+
+<!-- <svelte:window on:beforeunload={beforeUnload} /> -->
+<ChannelLayout {body} {channel} schemas={data.schemas} {user}></ChannelLayout>
+{#snippet body()}
+    <RecordStatus {channel} {record} status={data.recordStatus}></RecordStatus>
+    <div style="display:flex;gap:20px;justify-content: space-between;">
+        <LocaleChooser {channel} onLocaleChange={handleLocaleChange}
+        ></LocaleChooser>
+        {#if record.publishedBy}
+            <label>
+                <input
+                    bind:checked={showPublished}
+                    onchange={toggleLiveData}
+                    type="checkbox"
+                    role="switch"
+                />
+                Show Live Data
+            </label>
+        {/if}
+        <PublishingOptions {record} status={data.recordStatus}
+        ></PublishingOptions>
+    </div>
+    {#if !showPublished}
+        <fieldset disabled={data.recordStatus === "trashed"}>
+            <RecordForm
+                {channel}
+                fields={data.fields}
+                edgeRecordPreviews={data.edgeRecordPreviewsDraft}
+                filesPreviews={data.filesPreviewsDraft}
+                {record}
+                {selectedLocales}
+                validationErrors={data.validationErrors}
+                fieldData={data.draftData}
+            ></RecordForm>
+        </fieldset>
+    {:else}
+        <fieldset disabled={true}>
+            <RecordForm
+                {channel}
+                fields={data.fields}
+                edgeRecordPreviews={data.edgeRecordPreviewsLive}
+                filesPreviews={data.filesPreviewsLive}
+                {record}
+                {selectedLocales}
+                validationErrors={data.validationErrors}
+                fieldData={data.liveData}
+            ></RecordForm>
+        </fieldset>
+    {/if}
+{/snippet}

front/js/entry/RecordEditEntry/RecordForm.svelte

@@ -0,0 +1,101 @@
+<script>
+    import TextField from "./fields/TextField.svelte";
+    import RelationField from "./fields/RelationField.svelte";
+    import FileField from "./fields/FileField.svelte";
+    let {
+        fields,
+        record,
+        channel,
+        validationErrors,
+        fieldData,
+        edgeRecordPreviews,
+        filesPreviews,
+        selectedLocales,
+    } = $props();
+    const findFieldValidationError = (field, locale) => {
+        return validationErrors.find(
+            (f) => f.fieldId === field.id && f.locale === locale,
+        );
+    };
+    const findDataField = (field, locale) => {
+        return fieldData.find(
+            (f) => f.fieldId === field.id && f.locale === locale,
+        );
+    };
+    const findFieldEdges = (field, locale) => {
+        return edgeRecordPreviews.filter(
+            (e) => e.edge.fieldId === field.id && e.edge.locale === locale,
+        );
+    };
+    const findFieldFiles = (field, locale) => {
+        return filesPreviews.filter(
+            (f) =>
+                f.recordFile.fieldId === field.id &&
+                f.recordFile.locale === locale,
+        );
+    };
+</script>
+
+{#each fields as field}
+    <div style="display:flex;gap:20px;">
+        {#if field.type === "text"}
+            {@render textField(field, "main")}
+            {#if field.translatable}
+                {#each selectedLocales as locale (locale)}
+                    {@render textField(field, locale)}
+                {/each}
+            {/if}
+        {/if}
+        {#if field.type === "relation"}
+            {@render relationField(field, "main")}
+            {#if field.translatable}
+                {#each selectedLocales as locale (locale)}
+                    {@render relationField(field, locale)}
+                {/each}
+            {/if}
+        {/if}
+        {#if field.type === "file"}
+            {@render fileField(field, "main")}
+            {#if field.translatable}
+                {#each selectedLocales as locale (locale)}
+                    {@render fileField(field, locale)}
+                {/each}
+            {/if}
+        {/if}
+    </div>
+{/each}
+
+{#snippet textField(field, locale)}
+    <TextField
+        {channel}
+        {record}
+        validationError={findFieldValidationError(field, locale)}
+        schemaField={field}
+        {locale}
+        dataField={findDataField(field, locale)}
+    ></TextField>
+{/snippet}
+
+{#snippet relationField(field, locale)}
+    <RelationField
+        {channel}
+        {record}
+        validationError={findFieldValidationError(field, locale)}
+        schemaField={field}
+        {locale}
+        dataField={findDataField(field, locale)}
+        edgeRecordPreviews={findFieldEdges(field, locale)}
+    ></RelationField>
+{/snippet}
+
+{#snippet fileField(field, locale)}
+    <FileField
+        {channel}
+        {record}
+        validationError={findFieldValidationError(field, locale)}
+        schemaField={field}
+        {locale}
+        dataField={findDataField(field, locale)}
+        filesPreviews={findFieldFiles(field, locale)}
+    ></FileField>
+{/snippet}

front/js/entry/RecordEditEntry/RecordStatus.svelte

@@ -0,0 +1,84 @@
+<script>
+    import { getApp } from "../../app";
+    import { post } from "../../modules/remote";
+    let { record, status } = $props();
+    const app = getApp();
+
+    function handleUntrash() {
+        post(app.url("records/untrash"), { id: record.id }, (data, err) => {
+            Turbo.visit(window.location.href);
+        });
+    }
+    function handleUnschedule() {
+        post(app.url("records/unschedule"), { id: record.id }, (data, err) => {
+            Turbo.visit(window.location.href);
+        });
+    }
+    function handleUnpublish() {
+        post(app.url("records/unpublish"), { id: record.id }, (data, err) => {
+            Turbo.visit(window.location.href);
+        });
+    }
+</script>
+
+<div
+    class="record-status record-status-{status}"
+    style="display: flex; gap:20px"
+>
+    {#if status === "trashed"}
+        <span>This record is Trashed</span>
+        <button onclick={handleUntrash}>Restore</button>
+    {:else if status === "scheduled_and_published"}
+        <div>
+            <div>
+                <span>
+                    This record was published at {record.publishedAt}
+                </span>
+                <button onclick={handleUnpublish}>Unpublish</button>
+            </div>
+            <div>
+                <span>
+                    It is scheduled to be republished at {record.scheduledAt}
+                </span>
+                <button onclick={handleUnschedule}>Unschedule</button>
+            </div>
+        </div>
+    {:else if status === "published"}
+        <span>
+            This record was published at {record.publishedAt}
+        </span>
+        <button onclick={handleUnpublish}>Cancel</button>
+    {:else if status === "scheduled"}
+        <span>
+            This record is scheduled to be published at {record.scheduledAt}
+        </span>
+        <button onclick={handleUnschedule}>Cancel</button>
+    {:else}
+        <span>This record is a draft. Not yet published</span>
+    {/if}
+</div>
+
+<style>
+    .record-status {
+        border: 1px solid;
+        border-radius: 7px;
+        padding: 10px 20px;
+        margin: 0 0 30px;
+        font-size: 20px;
+    }
+    .record-status-trashed {
+        border-color: red;
+    }
+    .record-status-scheduled_and_published {
+        border-color: blue;
+    }
+    .record-status-published {
+        border-color: green;
+    }
+    .record-status-scheduled {
+        border-color: orange;
+    }
+    .record-status-draft {
+        border-color: gray;
+    }
+</style>

front/js/entry/RecordEditEntry/fields/FieldError.svelte

@@ -0,0 +1,10 @@
+<script>
+    let { schemaField, validationError } = $props();
+    let hasError = $derived(!!validationError);
+</script>
+
+{#if hasError}
+    <small id={schemaField.id + "-help"}>{validationError.message}</small>
+{:else if schemaField.help != ""}
+    <small id={schemaField.id + "-help"}>{schemaField.help}</small>
+{/if}

front/js/entry/RecordEditEntry/fields/FieldLabel.svelte

@@ -0,0 +1,9 @@
+<script>
+    import { getLocaleName } from "../locale.svelte.js";
+    let { channel, schemaField, locale } = $props();
+</script>
+
+{#if locale !== "main"}
+    {getLocaleName(channel, locale)} >
+{/if}
+{schemaField.name} <br />

front/js/entry/RecordEditEntry/fields/FileField.svelte

@@ -0,0 +1,222 @@
+<script>
+    import { get, post } from "../../../modules/remote";
+    import { uploadFile } from "../../../modules/upload";
+    import { getApp } from "../../../app";
+    import FieldLabel from "./FieldLabel.svelte";
+    import FieldError from "./FieldError.svelte";
+    import Sortable from "../../../common/Sortable.svelte";
+    let {
+        channel,
+        record,
+        schemaField,
+        dataField,
+        locale,
+        validationError,
+        edgeRecordPreviews,
+        filesPreviews,
+    } = $props();
+    let originalValue = dataField?.value ?? schemaField.props.default;
+    let newValue = $state(originalValue);
+    let valuesChanged = $derived(newValue !== originalValue);
+    let errorMessage = $state("");
+
+    let filesInProgress = $state([]);
+    let uploadInProgress = $derived(filesInProgress.length > 0);
+    // let validationErrorState = $state(validationError);
+    const app = getApp();
+
+    let suggestionsLoaded = $state(false);
+    let suggestions = $state([]);
+    let selectedFilesIds = $state([]);
+    let dialog = $state();
+
+    function handleModalOpen(e) {
+        // Add logic to handle adding a record
+        dialog.showModal();
+        if (suggestionsLoaded) {
+            return;
+        }
+        get(app.url("records/files"), { recordId: record.id }, (data, err) => {
+            suggestionsLoaded = true;
+            suggestions = data;
+        });
+    }
+
+    function handleModalClose(e) {
+        dialog.close();
+    }
+
+    function handleInsertSelected() {
+        suggestionsLoaded = false;
+        post(
+            app.url("records/files"),
+            {
+                toIds: selectedFilesIds,
+                from: record.id,
+                fieldId: schemaField.id,
+                locale: locale,
+            },
+            (data, err) => {
+                suggestionsLoaded = true;
+                dialog.close();
+                edgeRecordPreviews = data.edgeRecordPreviews;
+                validationError = data.validationError;
+            },
+        );
+    }
+
+    function handleSortUpdate(updatedEdges) {
+        // let updatedFieldIds = updatedFields.map((f) => f.id);
+        // fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
+        // fields = [...fields, ...updatedFields];
+        post(
+            app.url("records/sort-edges"),
+            {
+                ids: updatedEdges.map((e) => e.edge.id),
+            },
+            (data, err) => {
+                edgeRecordPreviews = updatedEdges;
+            },
+        );
+    }
+
+    function handleRemoveEdge(edgeId) {
+        post(
+            app.url("edges/delete"),
+            {
+                id: edgeId,
+                from: record.id,
+                fieldId: schemaField.id,
+                locale: locale,
+            },
+            (data, err) => {
+                edgeRecordPreviews = edgeRecordPreviews.filter(
+                    (e) => e.edge.id !== edgeId,
+                );
+                validationError = data.validationError;
+            },
+        );
+    }
+
+    function handleFilesUpload(e) {
+        let files = e.target.files ? [...e.target.files] : [];
+
+        let filesUploaded = files.map((file) => {
+            let fileInProgress = {
+                pct: 0,
+                hasFailed: false,
+                name: file.name,
+            };
+            filesInProgress.push(fileInProgress);
+
+            const progress = ({ pct, isComplete }) => {
+                filesInProgress.find((f) => f.name === file.name).pct = pct;
+                if (isComplete) {
+                    filesInProgress = filesInProgress.filter(
+                        (f) => f.name !== file.name,
+                    );
+                }
+            };
+            const error = (errorMessage) => {
+                filesInProgress.find((f) => f.name === file.name).hasFailed =
+                    true;
+            };
+
+            uploadFile(
+                file,
+                record.id,
+                schemaField.id,
+                locale,
+                progress,
+                error,
+            );
+        });
+    }
+</script>
+
+<div style="min-width: 400px;">
+    <label>
+        <FieldLabel {locale} {channel} {schemaField}></FieldLabel>
+    </label>
+    <FieldError {schemaField} {validationError}></FieldError>
+    <button onclick={handleModalOpen}>Choose files</button>
+
+    <dialog bind:this={dialog}>
+        <article>
+            <header>
+                <button onclick={handleModalClose} aria-label="Close" rel="prev"
+                ></button>
+                <p>
+                    <strong>Records</strong>
+                </p>
+            </header>
+            {#if suggestionsLoaded}
+                <form>
+                    <button onclick={handleInsertSelected}>
+                        Insert selected
+                    </button>
+
+                    <input
+                        oninput={handleFilesUpload}
+                        type="file"
+                        multiple
+                        disabled={uploadInProgress}
+                    />
+                    {#each filesInProgress as fileInProgress}
+                        <div>
+                            <span>{fileInProgress.name}</span>
+                            <progress value={fileInProgress.pct} max="100" />
+                            {#if fileInProgress.hasFailed}
+                                <span>Error</span>
+                            {/if}
+                        </div>
+                    {/each}
+
+                    <table>
+                        <tbody>
+                            {#each suggestions as suggestion}
+                                <tr>
+                                    <td>
+                                        <input
+                                            type="checkbox"
+                                            value={suggestion.id}
+                                            bind:group={selectedFilesIds}
+                                        />
+                                    </td>
+                                    <td>
+                                        <a href="#">{suggestion.name}</a>
+                                    </td>
+                                    <td> </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </form>
+            {:else}
+                <progress />
+            {/if}
+        </article>
+    </dialog>
+    <div>
+        {#if filesPreviews.length == 0}
+            No files exist
+        {:else}
+            <Sortable
+                onUpdate={handleSortUpdate}
+                items={filesPreviews}
+                itemKey="recordFile.id"
+            >
+                {#snippet itemView(filesPreview)}
+                    <div>
+                        <a href="#">{filesPreview.file.name}</a>
+                        <button
+                            onclick={(e) =>
+                                handleRemoveEdge(filesPreview.recordFile.id)}
+                            >remove</button
+                        >
+                    </div>
+                {/snippet}
+            </Sortable>
+        {/if}
+    </div>
+</div>

front/js/entry/RecordEditEntry/fields/RelationField.svelte

@@ -0,0 +1,174 @@
+<script>
+    import { get, post } from "../../../modules/remote";
+    import { getApp } from "../../../app";
+    import FieldLabel from "./FieldLabel.svelte";
+    import FieldError from "./FieldError.svelte";
+    import Sortable from "../../../common/Sortable.svelte";
+    let {
+        channel,
+        record,
+        schemaField,
+        dataField,
+        locale,
+        validationError,
+        edgeRecordPreviews,
+    } = $props();
+    let originalValue = dataField?.value ?? schemaField.props.default;
+    let newValue = $state(originalValue);
+    let valuesChanged = $derived(newValue !== originalValue);
+    let errorMessage = $state("");
+    // let validationErrorState = $state(validationError);
+    const app = getApp();
+
+    let suggestionsLoaded = $state(false);
+    let suggestions = $state([]);
+    let selectedRecordIds = $state([]);
+    let dialog = $state();
+
+    function handleModalOpen(e) {
+        // Add logic to handle adding a record
+        dialog.showModal();
+        if (suggestionsLoaded) {
+            return;
+        }
+        get(
+            app.url("records/suggest"),
+            { schemas: schemaField.props.schemas },
+            (data, err) => {
+                suggestionsLoaded = true;
+                suggestions = data;
+            },
+        );
+    }
+
+    function handleModalClose(e) {
+        dialog.close();
+    }
+
+    function handleInsertSelected() {
+        suggestionsLoaded = false;
+        post(
+            app.url("edges/many"),
+            {
+                toIds: selectedRecordIds,
+                from: record.id,
+                fieldId: schemaField.id,
+                locale: locale,
+            },
+            (data, err) => {
+                suggestionsLoaded = true;
+                dialog.close();
+                edgeRecordPreviews = data.edgeRecordPreviews;
+                validationError = data.validationError;
+            },
+        );
+    }
+
+    function handleSortUpdate(updatedEdges) {
+        // let updatedFieldIds = updatedFields.map((f) => f.id);
+        // fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
+        // fields = [...fields, ...updatedFields];
+        post(
+            app.url("records/sort-edges"),
+            {
+                ids: updatedEdges.map((e) => e.edge.id),
+            },
+            (data, err) => {
+                edgeRecordPreviews = updatedEdges;
+            },
+        );
+    }
+
+    function handleRemoveEdge(edgeId) {
+        post(
+            app.url("edges/delete"),
+            {
+                id: edgeId,
+                from: record.id,
+                fieldId: schemaField.id,
+                locale: locale,
+            },
+            (data, err) => {
+                edgeRecordPreviews = edgeRecordPreviews.filter(
+                    (e) => e.edge.id !== edgeId,
+                );
+                validationError = data.validationError;
+            },
+        );
+    }
+</script>
+
+<div style="min-width: 400px;">
+    <label>
+        <FieldLabel {locale} {channel} {schemaField}></FieldLabel>
+    </label>
+    <FieldError {schemaField} {validationError}></FieldError>
+    <button onclick={handleModalOpen}>Choose record</button>
+
+    <dialog bind:this={dialog}>
+        <article>
+            <header>
+                <button onclick={handleModalClose} aria-label="Close" rel="prev"
+                ></button>
+                <p>
+                    <strong>Records</strong>
+                </p>
+            </header>
+            {#if suggestionsLoaded}
+                <form>
+                    <button onclick={handleInsertSelected}>
+                        Insert selected
+                    </button>
+                    <table>
+                        <tbody>
+                            {#each suggestions as suggestion}
+                                <tr>
+                                    <td>
+                                        <input
+                                            type="checkbox"
+                                            value={suggestion.id}
+                                            bind:group={selectedRecordIds}
+                                        />
+                                    </td>
+                                    <td>
+                                        <a href="#">{suggestion.title}</a>
+                                    </td>
+                                    <td>
+                                        <a href="#">
+                                            {suggestion.schemaName}
+                                        </a>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </form>
+            {:else}
+                <progress />
+            {/if}
+        </article>
+    </dialog>
+    <div>
+        {#if edgeRecordPreviews.length == 0}
+            No relations exist
+        {:else}
+            <Sortable
+                onUpdate={handleSortUpdate}
+                items={edgeRecordPreviews}
+                itemKey="edge.id"
+            >
+                {#snippet itemView(edgeRecordPreview)}
+                    <div>
+                        <a href="#">{edgeRecordPreview.recordPreview.title}</a>
+                        {edgeRecordPreview.recordPreview.schemaName}
+                        <button
+                            onclick={(e) =>
+                                handleRemoveEdge(edgeRecordPreview.edge.id)}
+                            >remove</button
+                        >
+                    </div>
+                {/snippet}
+            </Sortable>
+        {/if}
+    </div>
+</div>

front/js/entry/RecordEditEntry/fields/TextField.svelte

@@ -0,0 +1,102 @@
+<script>
+    import { post } from "../../../modules/remote";
+    import { getApp } from "../../../app";
+    import FieldLabel from "./FieldLabel.svelte";
+    import FieldError from "./FieldError.svelte";
+    let { channel, record, schemaField, dataField, locale, validationError } =
+        $props();
+    let originalValue = dataField?.value ?? schemaField.props.default;
+    let newValue = $state(originalValue);
+    let valuesChanged = $derived(newValue !== originalValue);
+    // let validationErrorState = $state(validationError);
+    const app = getApp();
+
+    function save() {
+        if (!valuesChanged) {
+            return;
+        }
+
+        post(
+            app.url("records/fields"),
+            {
+                recordId: record.id,
+                id: schemaField.id,
+                locale: locale,
+                value: newValue,
+            },
+            (data, err) => {
+                if (err.isNotEmpty()) {
+                    errorMessage = err.first();
+                } else {
+                    validationError = data.validationError;
+                    originalValue = newValue;
+                }
+            },
+        );
+    }
+    let delayMs = 1000;
+    let timer = $state(undefined);
+    let isComposing = $state(false);
+
+    const schedule = () => {
+        if (isComposing) {
+            return;
+        }
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(flush, delayMs);
+    };
+
+    const flush = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+        // value = inputValue;
+        save();
+    };
+
+    const handleInput = () => {
+        schedule();
+    };
+
+    const handleKeydown = (event) => {
+        if (event.key === "Enter") {
+            flush();
+        }
+    };
+
+    const handleBlur = () => {
+        flush();
+    };
+
+    const handleCompositionStart = () => {
+        isComposing = true;
+    };
+
+    const handleCompositionEnd = () => {
+        isComposing = false;
+    };
+</script>
+
+<div style="min-width: 400px;">
+    <label>
+        <FieldLabel {locale} {channel} {schemaField}></FieldLabel>
+
+        <input
+            type="text"
+            bind:value={newValue}
+            autocomplete="off"
+            readonly={schemaField.readonly}
+            aria-describedby={schemaField.id + "-help"}
+            oninput={handleInput}
+            onkeydown={handleKeydown}
+            onblur={handleBlur}
+            oncompositionstart={handleCompositionStart}
+            oncompositionend={handleCompositionEnd}
+        />
+        <!-- aria-invalid={hasError ? "true" : ""} -->
+        <FieldError {schemaField} {validationError}></FieldError>
+    </label>
+</div>

front/js/entry/RecordEditEntry/locale.svelte.js

@@ -0,0 +1,11 @@
+export function getSelectedLocales() {
+  let value = $state(localStorage.getItem("selectedLocales"));
+  if (value == "" || !value) {
+    return [];
+  }
+  return value.split(",");
+}
+
+export function getLocaleName(channel, id) {
+  return channel.locales.find((locale) => locale.id === id).name;
+}

front/js/entry/SchemaEditEntry/SchemaEditEntry.svelte

@@ -0,0 +1,98 @@
+<script>
+    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
+    import Sortable from "../../common/Sortable.svelte";
+    import DeleteButton from "../../common/DeleteButton.svelte";
+    import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
+    let { channel, user, data } = $props();
+    const app = getApp();
+
+    function handleSchemaCreate(e) {
+        e.preventDefault();
+        post(
+            channel.lucentUrl + "/schemas/update",
+            {
+                id: data.schema.id,
+                name: data.schema.name,
+                alias: data.schema.alias,
+                revisions: data.schema.revisions,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(channel.lucentUrl + "/schemas");
+                }
+            },
+        );
+    }
+
+    function handleDelete() {
+        post(
+            app.url("schemas/delete"),
+            {
+                schemaId: data.schema.id,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(app.url("schemas"));
+                } else {
+                    console.log(err);
+                }
+            },
+        );
+    }
+</script>
+
+<SchemaLayout {body} {channel} {user}></SchemaLayout>
+{#snippet body()}
+    <h3>Edit Schema</h3>
+
+    <form onsubmit={handleSchemaCreate}>
+        <fieldset>
+            <label>
+                Name
+                <input
+                    bind:value={data.schema.name}
+                    placeholder="ex. Blog Posts"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                />
+                <small id="alias-helper">Plural is recommended</small>
+            </label>
+            <label>
+                Alias
+                <input
+                    bind:value={data.schema.alias}
+                    placeholder="ex. blog_posts"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                    aria-describedby="alias-helper"
+                />
+                <small id="alias-helper">
+                    Developers will use this to reference the field
+                </small>
+            </label>
+            <label>
+                Revision number
+                <input
+                    bind:value={data.schema.revisions}
+                    type="number"
+                    required
+                    aria-describedby="revision-helper"
+                />
+                <small id="revision-helper">
+                    How many revisions per document will be kept
+                </small>
+            </label>
+        </fieldset>
+
+        <button type="submit">Update</button>
+    </form>
+
+    <DeleteButton onDelete={handleDelete}>
+        {#snippet text()}
+            Delete schema
+        {/snippet}
+    </DeleteButton>
+{/snippet}

front/js/entry/SchemaEntry/SchemaEntry.svelte

@@ -0,0 +1,138 @@
+<script>
+    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
+    import Sortable from "../../common/Sortable.svelte";
+    import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
+    let { channel, user, data } = $props();
+    let newSchemaName = $state("");
+    let newSchemaAlias = $state("");
+    let fields = $state(data.fields);
+    const app = getApp();
+    const createFieldUrl = (schema, type) =>
+        app.url(`fields/create?schema=${schema.id}&type=${type}`);
+    function handleSchemaCreate(e) {
+        e.preventDefault();
+        post(
+            channel.lucentUrl + "/schemas",
+            {
+                name: newSchemaName,
+                alias: newSchemaAlias,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(window.location.href);
+                }
+            },
+        );
+    }
+
+    function handleSortUpdate(updatedFields) {
+        let updatedFieldIds = updatedFields.map((f) => f.id);
+        fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
+        fields = [...fields, ...updatedFields];
+
+        post(
+            channel.lucentUrl + "/fields/reorder",
+            {
+                ids: updatedFieldIds,
+            },
+            (data, err) => {},
+        );
+    }
+</script>
+
+<SchemaLayout {body} {channel} {user}></SchemaLayout>
+{#snippet body()}
+    <h3 class="header-small mb-4 mt-5">Schemas</h3>
+
+    <details style="max-width: 400px;">
+        <summary>Create Schema</summary>
+        <form onsubmit={handleSchemaCreate}>
+            <fieldset>
+                <label>
+                    Name
+                    <input
+                        bind:value={newSchemaName}
+                        placeholder="ex. Blog Posts"
+                        minlength="2"
+                        maxlength="30"
+                        required
+                    />
+                    <small id="alias-helper">Plural is recommended</small>
+                </label>
+                <label>
+                    Alias
+                    <input
+                        bind:value={newSchemaAlias}
+                        placeholder="ex. blog_posts"
+                        minlength="2"
+                        maxlength="30"
+                        required
+                        aria-describedby="alias-helper"
+                    />
+                    <small id="alias-helper">
+                        Developers will use this to reference the field
+                    </small>
+                </label>
+            </fieldset>
+
+            <button type="submit">Create</button>
+        </form>
+    </details>
+    <div style="display: flex;gap:20px">
+        {#each data.schemas as schema}
+            <article style="min-width: 300px;">
+                <header>
+                    <a href={app.url("schemas/edit/" + schema.id)}
+                        >{schema.name}</a
+                    >
+                </header>
+                <details>
+                    <summary>Fields</summary>
+                    <table>
+                        <Sortable
+                            type="table"
+                            onUpdate={handleSortUpdate}
+                            items={fields.filter(
+                                (field) => field.schemaId === schema.id,
+                            )}
+                        >
+                            {#snippet itemView(field)}
+                                <td
+                                    ><a
+                                        href={app.url(
+                                            "fields/edit/" + field.id,
+                                        )}>{field.name}</a
+                                    ></td
+                                >
+                                <td>{field.type}</td>
+                            {/snippet}
+                        </Sortable>
+                    </table>
+                </details>
+                <details>
+                    <summary>Add field</summary>
+                    <ul>
+                        <li>
+                            <a href={createFieldUrl(schema, "text")}>Text</a>
+                        </li>
+
+                        <li>
+                            <a href={createFieldUrl(schema, "file")}>File</a>
+                        </li>
+                        <li>
+                            <a href={createFieldUrl(schema, "relation")}>
+                                Relation
+                            </a>
+                        </li>
+                    </ul>
+                </details>
+                <footer>
+                    <small> Id: {schema.id}</small><br />
+                    <small> Alias: {schema.alias}</small><br />
+                    <small> Revisions: {schema.revisions}</small><br />
+                </footer>
+            </article>
+        {/each}
+    </div>
+{/snippet}

front/js/entry/SetupEntry/SetupEntry.svelte

@@ -0,0 +1,20 @@
+<script>
+    import AccountLayout from "../../layouts/AccountLayout.svelte";
+    import Step from "./Step.svelte";
+    let { channel, data } = $props();
+</script>
+
+<AccountLayout {body} {channel}></AccountLayout>
+{#snippet body()}
+    <div class="wrapper-tiny">
+        {#each data.steps as step}
+            <Step {step}></Step>
+        {/each}
+
+        <div style="text-align: center;margin-top: 30px;">
+            {#if data.allSuccess}
+                <a href="/lucent/register" class="bt">Create the first user</a>
+            {/if}
+        </div>
+    </div>
+{/snippet}

front/js/entry/SetupEntry/Step.svelte

@@ -1,42 +1,36 @@
 <script>
-    import Icon from "../common/Icon.svelte"
-
-    export let step;
+    import Icon from "../../common/Icon.svelte";
 
+    let { step } = $props();
 </script>
 
-
 <div class="step step-{step.status}">
-    <div class="step-icon">
-        {#if step.status === "success"}
-            <Icon icon="check"></Icon>
-        {:else}
-            <Icon icon="close"></Icon>
-        {/if}
-    </div>
     <div style="width:100%">
-        <h4>{step.name}</h4>
         <details>
-            <summary>Instuctions</summary>
+            <summary>
+                {#if step.status === "success"}
+                    <Icon icon="check"></Icon> {step.name}
+                {:else}
+                    <Icon icon="close"></Icon> {step.name}
+                {/if}
+            </summary>
             <code class="instructions">{step.instructions}</code>
         </details>
     </div>
-
-
 </div>
 
 <style>
-    .step-success .step-icon{
+    .step-success .step-icon {
         background: var(--suc10);
         color: var(--suc100);
     }
 
-    .step-fail  .step-icon{
+    .step-fail .step-icon {
         background: var(--err10);
         color: var(--err100);
     }
 
-    .step-icon{
+    .step-icon {
         padding: 12px;
         border-radius: 12px;
     }

front/js/entry/VerifyEntry/VerifyEntry.svelte

@@ -0,0 +1,35 @@
+<script>
+    import AccountLayout from "../../layouts/AccountLayout.svelte";
+    import { post } from "../../modules/remote";
+    let { channel, data } = $props();
+    let isLoading = $state(false);
+    function login(e) {
+        e.preventDefault();
+        isLoading = true;
+        post(
+            channel.lucentUrl + "/verify",
+            {
+                email: data.email,
+                token: data.token,
+            },
+            (data, err) => {
+                window.location = channel.lucentUrl;
+            },
+        );
+    }
+</script>
+
+<AccountLayout {body} {channel}></AccountLayout>
+{#snippet body()}
+    <div class="wrapper-tiny">
+        <form onsubmit={login}>
+            <div class="mb-3 text-center">
+                <h3>Login as {data.email}</h3>
+            </div>
+
+            <div class="text-center mt-5 d-block">
+                <button aria-busy={isLoading}>Enter</button>
+            </div>
+        </form>
+    </div>
+{/snippet}

front/js/helpers.js

@@ -1,52 +1,126 @@
-import {formatDistanceToNow, parseJSON, format, parse} from "date-fns";
+import { formatDistanceToNow, parseJSON, format, parse } from "date-fns";
 
 export function friendlyDate(date) {
-    return formatDistanceToNow(parseJSON(date), {addSuffix: true});
+  return formatDistanceToNow(parseJSON(date), { addSuffix: true });
 }
 
 export function readableDate(date) {
-    if(!date){
+  if (!date) {
     return "";
   }
   return format(parseJSON(date), "dd MMM yyyy");
 }
 
 export function readableDatetime(date) {
-    if(!date){
+  if (!date) {
     return "";
   }
 
   return format(parseJSON(date), "dd MMM yyyy HH:mm");
 }
 
-
 export function stripHtml(html = "") {
   let tmp = document.createElement("div");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
 }
 
-
 export function randomId(length = 10) {
-    return Math.random().toString(36).substring(2, length + 2);
+  return Math.random()
+    .toString(36)
+    .substring(2, length + 2);
 }
 
 export function clickOutside(node) {
-
-    const handleClick = event => {
+  const handleClick = (event) => {
     if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            node.dispatchEvent(
-                new CustomEvent('click_outside', node)
-            )
-        }
+      node.dispatchEvent(new CustomEvent("click_outside", node));
     }
+  };
 
-    document.addEventListener('click', handleClick, true);
+  document.addEventListener("click", handleClick, true);
 
   return {
     destroy() {
-            document.removeEventListener('click', handleClick, true);
-        }
-    }
+      document.removeEventListener("click", handleClick, true);
+    },
+  };
 }
 
+export function arrayUnique(array) {
+  return array.filter((value, index) => array.indexOf(value) === index);
+}
+
+export function arrayUniqueBy(items, uniqueBy) {
+  const ids = new Set(items.map((item) => item[uniqueBy]));
+  return [...ids].map((id) => items.find((i) => i[uniqueBy] === id));
+}
+
+export function arrayMoveElement(array, from, to) {
+  if (from === to) {
+    return array;
+  }
+
+  const item = array.find((v, i) => i === from);
+  const arrayWithout = array.filter((v, i) => i !== from);
+  if (from > to) {
+    return arrayWithout.reduce((c, v, i) => {
+      if (i === to) {
+        return [...c, item, v];
+      }
+      return [...c, v];
+    }, []);
+  }
+
+  return arrayWithout.reduce((c, v, i) => {
+    if (i + 1 === to) {
+      return [...c, v, item];
+    }
+    return [...c, v];
+  }, []);
+}
+
+export function isEqual(db, ed) {
+  let isObject = (x) =>
+    typeof x === "object" && !Array.isArray(x) && x !== null;
+  let isArray = (x) => x?.constructor === Array;
+  let isEmpty = (x) => x === null || x === undefined || x == [];
+  const db_value = db ?? null;
+  const ed_value = ed ?? null;
+
+  if (isObject(db_value)) {
+    let keys = Object.keys(db_value);
+    return keys.reduce((acc, k) => {
+      if (acc === false) {
+        return false;
+      }
+      return isEqual(db_value?.[k], ed_value?.[k]);
+    }, true);
+  }
+  if (isArray(db_value)) {
+    return db_value.reduce((c, v, i) => {
+      if (c === false) {
+        return false;
+      }
+      return isEqual(v, ed_value?.[i]);
+    }, true);
+  }
+
+  if (isEmpty(db_value) && isEmpty(ed_value)) {
+    return true;
+  }
+
+  if (db_value == ed_value) {
+    return true;
+  }
+
+  return false;
+
+  // const ok = Object.keys,
+  //     tx = typeof x,
+  //     ty = typeof y;
+  // return x && y && tx === "object" && tx === ty
+  //     ? ok(x).length === ok(y).length &&
+  //           ok(x).every((key) => isEqual(x[key], y[key]))
+  //     : x === y;
+}

front/js/layouts/AccountLayout.svelte

@@ -0,0 +1,16 @@
+<script>
+    let { body, channel, user } = $props();
+</script>
+
+<div
+    style="text-align: center;background: var(--p20);padding: 20px;color: var(--p90)"
+>
+    <h1>
+        <a class="text-decoration-none" href={channel.url}
+            >{channel.name ?? "Lucent Setup"}</a
+        >
+    </h1>
+</div>
+<div>
+    {@render body()}
+</div>

front/js/layouts/ChannelLayout.svelte

@@ -0,0 +1,15 @@
+<script>
+    import Header from "./Header.svelte";
+    import Navbar from "./Navbar.svelte";
+    let { body, channel, user, schemas } = $props();
+</script>
+
+<Header {channel} {user}></Header>
+<main>
+    <aside class="sidebar-content">
+        <Navbar {channel} {schemas}></Navbar>
+    </aside>
+    <div class="main-content">
+        {@render body()}
+    </div>
+</main>

front/js/layouts/Header.svelte

@@ -0,0 +1,32 @@
+<script>
+    import Avatar from "../common/Avatar.svelte";
+    // import Dropdown from "../svelte/common/Dropdown.svelte";
+    let { channel, user } = $props();
+</script>
+
+<div class="top-nav">
+    <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>
+    <a class="top-nav-item" href="{channel.lucentUrl}/">Content</a>
+    <a class="top-nav-item" href="{channel.lucentUrl}/schemas">Schemas</a>
+
+    <!-- {#if channel.commands.length > 0}
+        <Dropdown>
+            <div slot="button">Actions</div>
+            {#each channel.commands as command}
+                <a
+                    href="{channel.lucentUrl}/command-report/{command.signature}"
+                    class="top-nav-item">{command.name}</a
+                >
+            {/each}
+        </Dropdown>
+    {/if} -->
+    <!--        <div>-->
+    <!--            <form method="GET">-->
+    <!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
+    <!--                       class="form-control" required/>-->
+    <!--            </form>-->
+    <!--        </div>-->
+    <a href="{channel.lucentUrl}/profile">
+        <Avatar side="28" name={user.name} />
+    </a>
+</div>

front/js/layouts/Navbar.svelte

@@ -0,0 +1,12 @@
+<script>
+    import { getApp } from "../app";
+    let { channel, schemas } = $props();
+    const app = getApp();
+</script>
+
+<details name="example" open>
+    <summary>Content</summary>
+    {#each schemas as schema}
+        <div><a href={app.url("content/" + schema.id)}>{schema.name}</a></div>
+    {/each}
+</details>

front/js/layouts/SchemaLayout.svelte

@@ -0,0 +1,11 @@
+<script>
+    import Header from "./Header.svelte";
+    let { body, channel, user } = $props();
+</script>
+
+<Header {channel} {user}></Header>
+<main>
+    <div class="main-content">
+        {@render body()}
+    </div>
+</main>

front/js/main.js

@@ -1,25 +1,48 @@
-import {axiosInstance} from "./bootstrap";
-import "../sass/app.scss";
-import Account from "./svelte/Account.svelte";
-import Channel from "./svelte/Channel.svelte";
-import Mustache from "mustache";
-import 'htmx.org';
+import * as Turbo from "@hotwired/turbo";
+// import "../sass/app.scss";
+import { mount, unmount } from "svelte";
+import "../css/app.css";
+import Register from "./svelte/account/Register.svelte";
+import LoginEntry from "./entry/LoginEntry/LoginEntry.svelte";
+import VerifyEntry from "./entry/VerifyEntry/VerifyEntry.svelte";
+import Profile from "./svelte/account/Profile.svelte";
+import SetupEntry from "./entry/SetupEntry/SetupEntry.svelte";
+import Members from "./svelte/members/Members.svelte";
+import RecordNotFound from "./svelte/records/NotFound.svelte";
+import RecordEditEntry from "./entry/RecordEditEntry/RecordEditEntry.svelte";
+import ContentEntry from "./entry/ContentEntry/ContentEntry.svelte";
+import HomeEntry from "./entry/HomeEntry/HomeEntry.svelte";
+import SchemaEntry from "./entry/SchemaEntry/SchemaEntry.svelte";
+import FieldCreateEntry from "./entry/FieldCreateEntry/FieldCreateEntry.svelte";
+import FieldEditEntry from "./entry/FieldEditEntry/FieldEditEntry.svelte";
+import SchemaEditEntry from "./entry/SchemaEditEntry/SchemaEditEntry.svelte";
+import BuildReport from "./svelte/build/Report.svelte";
+import { createApp } from "./app";
 
-Mustache.escape = function (value) {
-    return value;
-};
-
-
-// Define all components
 const entryComponents = {
-    account: Account,
-    channel: Channel,
+  members: Members,
+  recordEdit: RecordEditEntry,
+  recordNotFound: RecordNotFound,
+  contentIndex: ContentEntry,
+  homeIndex: HomeEntry,
+  buildReport: BuildReport,
+  register: Register,
+  login: LoginEntry,
+  verify: VerifyEntry,
+  profile: Profile,
+  setup: SetupEntry,
+  schemas: SchemaEntry,
+  fieldCreate: FieldCreateEntry,
+  fieldEdit: FieldEditEntry,
+  schemaEdit: SchemaEditEntry,
 };
+Turbo.start();
 
 let loadedComponents = [];
 
 let loadSvelte = function () {
-    loadedComponents.map((comp) => comp.$destroy());
+  Turbo.cache.clear();
+  loadedComponents.map((comp) => unmount(comp));
   loadedComponents = [];
 
   const elements = document.body.querySelectorAll(".lucent-component");
@@ -27,28 +50,24 @@ let loadSvelte = function () {
     return;
   }
   const loadElement = function (element) {
-        const componentId = element.attributes["data-layout"].value;
-        const [_, component] = Object.entries(entryComponents).find(
-            ([key, _]) => componentId === key
+    const jsonData = document.getElementById("json-data").innerHTML;
+
+    const props = JSON.parse(jsonData);
+    const [__, view] = Object.entries(entryComponents).find(
+      ([key, _]) => props.view === key,
     );
-        if (!component) {
+
+    if (!view) {
       return [];
     }
-
-        const jsonData = document.getElementById(
-            "json-" + componentId
-        ).innerHTML;
-        const props = JSON.parse(jsonData);
-        props.axios = axiosInstance;
+    // props.axios = axiosInstance;
+    createApp(props.channel);
     const compOptions = {
       target: element,
       props: props,
     };
-
-        loadedComponents = [...loadedComponents, new component(compOptions)];
+    loadedComponents = [...loadedComponents, mount(view, compOptions)];
   };
   Array.from(elements).map(loadElement);
 };
-
-// document.addEventListener("turbo:load", loadSvelte);
-document.addEventListener("DOMContentLoaded", loadSvelte);
+document.addEventListener("turbo:load", loadSvelte);

front/js/modules/remote.js

@@ -0,0 +1,111 @@
+import axios from "axios";
+
+class Errors {
+  constructor(data) {
+    this.data = data ?? [];
+  }
+
+  first() {
+    return this.data[0] ?? null;
+  }
+
+  all() {
+    return this.data;
+  }
+
+  isEmpty() {
+    return this.data.length === 0;
+  }
+
+  isNotEmpty() {
+    return !this.isEmpty();
+  }
+}
+
+function makeErrors(errs) {
+  return new Errors(errs);
+}
+
+export function post(url, postData, callback) {
+  axios
+    .post(url, postData)
+    .then((res) => {
+      if (res.data.redirect !== undefined) {
+        // Turbo.visit(link(res.data.redirect));
+        return;
+      }
+      const errors = makeErrors(res.data?.errors ?? []);
+      if (errors.isNotEmpty()) {
+        callback?.(null, errors);
+      } else {
+        callback?.(res.data, errors);
+      }
+    })
+    .catch((err) => {
+      const errors = makeErrors(["something went wrong"]);
+      callback?.(null, errors);
+    });
+}
+
+export function get(url, urlParams, callback) {
+  let params = url.endsWith("query")
+    ? {
+        params: { query: JSON.stringify(urlParams) },
+        paramsSerializer: (params) => serializeParams(params),
+      }
+    : {
+        params: urlParams,
+      };
+
+  return axios
+    .get(url, params)
+    .then((res) => {
+      callback(res.data);
+    })
+    .catch((err) => {
+      console.log(err);
+      let errors = makeErrors(["something went wrong"]);
+      if (!err) {
+        errors = makeErrors([]);
+      }
+      callback(null, errors);
+    });
+}
+
+function serializeParams(obj, prefix = "") {
+  const params = [];
+
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const value = obj[key];
+      const paramKey = prefix ? `${prefix}[${key}]` : key;
+
+      if (
+        typeof value === "object" &&
+        value !== null &&
+        !Array.isArray(value)
+      ) {
+        // Nested object
+        params.push(serializeParams(value, paramKey));
+      } else if (Array.isArray(value)) {
+        // Array
+        value.forEach((item, index) => {
+          if (typeof item === "object" && item !== null) {
+            params.push(serializeParams(item, `${paramKey}[${index}]`));
+          } else {
+            params.push(
+              `${encodeURIComponent(`${paramKey}[${index}]`)}=${encodeURIComponent(item)}`,
+            );
+          }
+        });
+      } else {
+        // Simple value
+        params.push(
+          `${encodeURIComponent(paramKey)}=${encodeURIComponent(value)}`,
+        );
+      }
+    }
+  }
+
+  return params.flat().join("&");
+}

front/js/modules/upload.js

@@ -0,0 +1,58 @@
+import { getApp } from "../app";
+
+export function uploadFile(file, recordId, fieldId, locale, progress, error) {
+  const app = getApp();
+  const csrf = document.querySelector('meta[name="csrf-token"]').content;
+  const chunkSize = 2 * 1024 * 1024; // 2MB
+  const totalChunks = Math.ceil(file.size / chunkSize);
+
+  // Start the recursive process
+  sendChunk(0, null);
+
+  function sendChunk(currentChunk, fileId) {
+    const start = currentChunk * chunkSize;
+    const end = Math.min(start + chunkSize, file.size);
+    const chunk = file.slice(start, end);
+
+    const formData = new FormData();
+    formData.append("file", chunk);
+    if (fileId) {
+      formData.append("fileId", fileId);
+    }
+
+    formData.append("recordId", recordId);
+    formData.append("fieldId", fieldId);
+    formData.append("isLast", currentChunk === totalChunks - 1);
+    formData.append("filename", file.name);
+    formData.append("locale", locale);
+    formData.append("_token", csrf);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", app.url("upload"), true);
+
+    // Success Callback
+    xhr.onload = function () {
+      if (xhr.status === 200) {
+        const response = JSON.parse(xhr.responseText);
+        let fileId = response.fileId;
+        const nextChunk = currentChunk + 1;
+        if (nextChunk < totalChunks) {
+          progress({
+            pct: Math.round((nextChunk / totalChunks) * 100),
+            isComplete: false,
+          });
+          sendChunk(nextChunk, fileId);
+        } else {
+          progress({
+            pct: 100,
+            isComplete: true,
+          });
+        }
+      } else {
+        error("Upload failed at chunk " + currentChunk);
+      }
+    };
+
+    xhr.send(formData);
+  }
+}

front/js/svelte/Channel.svelte

@@ -3,7 +3,7 @@
     import RecordNotFound from "./records/NotFound.svelte";
     import RecordEdit from "./records/Edit.svelte";
     import ContentIndex from "./content/Index.svelte";
-    import {setContext} from "svelte";
+    import { setContext } from "svelte";
     import Navbar from "./layout/Navbar.svelte";
     import HomeIndex from "./home/Index.svelte";
     import BuildReport from "./build/Report.svelte";
@@ -28,24 +28,21 @@
     export let axios;
     export let readableSchemas;
 
-
     setContext("axios", axios);
     setContext("channel", channel);
-    setContext("readableSchemas", channel.schemas.filter((s) => readableSchemas.includes(s.name)));
+    setContext(
+        "readableSchemas",
+        channel.schemas.filter((s) => readableSchemas.includes(s.name)),
+    );
     setContext("user", user);
-
 </script>
 
-
 <div class="main-wrapper">
-<div class="sidebar-content">
-    <Navbar schema={data.schema}/>
-</div>
-<div class="main-content">
+    <div class="sidebar-content">
+        <Navbar schema={data.schema} />
+    </div>
+    <div class="main-content">
         <Header />
-    <svelte:component this={components[view]} {title} {...data}/>
+        <svelte:component this={components[view]} {title} {...data} />
+    </div>
 </div>
-</div>
-
-
-

front/js/svelte/account/Profile.svelte

@@ -1,8 +1,8 @@
 <script>
     import ErrorAlert from "../common/ErrorAlert.svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
-    import Avatar from "./Avatar.svelte";
-    import {getContext} from "svelte";
+    import Avatar from "./../../common/Avatar.svelte";
+    import { getContext } from "svelte";
     import SuccessAlert from "../common/SuccessAlert.svelte";
 
     const user = getContext("user");
@@ -25,7 +25,7 @@
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({errorMessage});
+                console.log({ errorMessage });
             });
     }
 
@@ -42,17 +42,16 @@
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({errorMessage});
+                console.log({ errorMessage });
             });
     }
 </script>
 
-
 <div class="wrapper-tiny">
-    <ErrorAlert message={errorMessage}/>
+    <ErrorAlert message={errorMessage} />
     <SuccessAlert bind:this={successAlert} />
     <h3 class="header-small mb-5">
-        <Avatar name={user.name}/>
+        <Avatar name={user.name} />
     </h3>
     <form on:submit={saveName}>
         <div class="input-group mb-5">
@@ -63,7 +62,7 @@
                 placeholder="Name"
                 required
             />
-            <SpinnerButton label="Update Name"/>
+            <SpinnerButton label="Update Name" />
         </div>
     </form>
 
@@ -76,12 +75,14 @@
                 placeholder="Email"
                 required
             />
-            <SpinnerButton label="Update Email"/>
+            <SpinnerButton label="Update Email" />
         </div>
     </form>
 
     <div class="list-group">
-        <a class="list-group-item list-group-item-action" href="{ channel.lucentUrl }/logout">Logout from this
-            device</a>
+        <a
+            class="list-group-item list-group-item-action"
+            href="{channel.lucentUrl}/logout">Logout from this device</a
+        >
     </div>
 </div>

front/js/svelte/autocomplete/Autocomplete.svelte

@@ -1,20 +1,18 @@
 <script>
-
     import Selectlist from "./Selectlist.svelte";
-    import Icon from "../common/Icon.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     let searchEl;
     let search;
     export let value;
     export let field;
 
-    function handleSelect(){
+    function handleSelect() {
         searchEl.focus();
-        searchEl.blur()
+        searchEl.blur();
     }
 </script>
 
-
 <div class="autocomplete">
     <input
         type="search"
@@ -24,12 +22,7 @@
         autocomplete="off"
     />
     <div class="autocomplete-results">
-        <Selectlist
-                {field}
-                bind:value
-                bind:search
-                on:selected={handleSelect}
-        />
+        <Selectlist {field} bind:value bind:search on:selected={handleSelect} />
     </div>
 </div>
 {#if value}
@@ -47,6 +40,5 @@
         >
             <Icon width={12} height={12} icon="close"></Icon>
         </button>
-
     </div>
 {/if}

front/js/svelte/common/Icon.svelte

@@ -56,23 +56,23 @@
             path: '<path d="M416 288h-95.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H416c17.67 0 32-14.33 32-32S433.7 288 416 288zM544 32h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 32 544 32zM352 416h-32c-17.67 0-32 14.33-32 32s14.33 32 32 32h32c17.67 0 31.1-14.33 31.1-32S369.7 416 352 416zM480 160h-159.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H480c17.67 0 32-14.33 32-32S497.7 160 480 160zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z"/>',
             viewBox: "0 0 576 512",
         },
-        "filter": {
+        filter: {
             path: '<path d="M3.853 54.87C10.47 40.9 24.54 32 40 32H472C487.5 32 501.5 40.9 508.1 54.87C514.8 68.84 512.7 85.37 502.1 97.33L320 320.9V448C320 460.1 313.2 471.2 302.3 476.6C291.5 482 278.5 480.9 268.8 473.6L204.8 425.6C196.7 419.6 192 410.1 192 400V320.9L9.042 97.33C-.745 85.37-2.765 68.84 3.854 54.87L3.853 54.87z"/>',
             viewBox: "0 0 512 512",
         },
-        "calendar": {
+        calendar: {
             path: '<path d="M96 32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32zM448 464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192H448V464z"/>',
             viewBox: "0 0 448 512",
         },
-        "pencil": {
+        pencil: {
             path: '<path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"/>',
             viewBox: "0 0 512 512",
         },
-        "database": {
+        database: {
             path: '<path d="M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"/>',
             viewBox: "0 0 448 512",
         },
-        "dice": {
+        dice: {
             path: '<path d="M447.1 224c0-12.56-4.781-25.13-14.35-34.76l-174.9-174.9C249.1 4.786 236.5 0 223.1 0C211.4 0 198.9 4.786 189.2 14.35L14.35 189.2C4.783 198.9-.0011 211.4-.0011 223.1c0 12.56 4.785 25.17 14.35 34.8l174.9 174.9c9.625 9.562 22.19 14.35 34.75 14.35s25.13-4.783 34.75-14.35l174.9-174.9C443.2 249.1 447.1 236.6 447.1 224zM96 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S120 210.8 120 224S109.3 248 96 248zM224 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 376 224 376zM224 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S248 210.8 248 224S237.3 248 224 248zM224 120c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 120 224 120zM352 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S365.3 248 352 248zM591.1 192l-118.7 0c4.418 10.27 6.604 21.25 6.604 32.23c0 20.7-7.865 41.38-23.63 57.14l-136.2 136.2v46.37C320 490.5 341.5 512 368 512h223.1c26.5 0 47.1-21.5 47.1-47.1V240C639.1 213.5 618.5 192 591.1 192zM479.1 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S493.2 376 479.1 376z"/>',
             viewBox: "0 0 640 512",
         },
@@ -81,7 +81,7 @@
             path: '<path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/>',
             viewBox: "0 0 512 512",
         },
-        "eye": {
+        eye: {
             path: '<path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"/>',
             viewBox: "0 0 576 512",
         },
@@ -93,19 +93,19 @@
             path: '<path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>',
             viewBox: "0 0 512 512",
         },
-        "expand": {
+        expand: {
             path: '<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z"/>',
             viewBox: "0 0 448 512",
         },
-        "compress": {
+        compress: {
             path: '<path d="M128 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32v-96C160 334.3 145.7 320 128 320zM416 320h-96c-17.69 0-32 14.31-32 32v96c0 17.69 14.31 32 32 32s32-14.31 32-32v-64h64c17.69 0 32-14.31 32-32S433.7 320 416 320zM320 192h96c17.69 0 32-14.31 32-32s-14.31-32-32-32h-64V64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96C288 177.7 302.3 192 320 192zM128 32C110.3 32 96 46.31 96 64v64H32C14.31 128 0 142.3 0 160s14.31 32 32 32h96c17.69 0 32-14.31 32-32V64C160 46.31 145.7 32 128 32z"/>',
             viewBox: "0 0 448 512",
         },
-        "check": {
+        check: {
             path: '<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/>',
             viewBox: "0 0 448 512",
         },
-        "close": {
+        close: {
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
             viewBox: "0 0 24 24",
         },
@@ -113,7 +113,7 @@
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
             viewBox: "0 0 24 24",
         },
-        "list": {
+        list: {
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
             viewBox: "0 0 24 24",
         },
@@ -121,13 +121,12 @@
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
             viewBox: "0 0 24 24",
         },
-        "italic": {
+        italic: {
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
             viewBox: "0 0 24 24",
-        }
+        },
     };
 
-
     export let width = 16;
     export let height = 16;
     export let icon = "";
@@ -147,7 +146,6 @@
     role="presentation"
     {stroke}
     {fill}
-
 >
     {@html selectedIcon.path}
 </svg>
@@ -155,6 +153,5 @@
 <style>
     svg {
         vertical-align: text-top;
-
     }
 </style>

front/js/svelte/content/RecordRow.svelte

@@ -1,9 +1,9 @@
 <script>
     import RenderField from "./RenderField.svelte";
-    import Avatar from "../account/Avatar.svelte";
+    import Avatar from "../../common/Avatar.svelte";
     import Status from "../records/Status.svelte";
-    import {usernameById} from "../account/users";
-    import {friendlyDate} from "../../helpers";
+    import { usernameById } from "../account/users";
+    import { friendlyDate } from "../../helpers";
 
     export let schema;
     export let users;
@@ -12,7 +12,6 @@
     export let sortParam;
     export let sortField;
     export let visibleColumns;
-
 </script>
 
 {#each visibleColumns as field, index}
@@ -20,7 +19,7 @@
         class="field-ui-{field.info.name}"
         class:is-sort={field.name === sortField.name}
     >
-        <RenderField {record} {schema} {graph} {field}/>
+        <RenderField {record} {schema} {graph} {field} />
     </td>
 {/each}
 {#if schema.visible?.includes("status")}
@@ -28,32 +27,40 @@
         class="text-center"
         class:is-sort={"-status" == sortParam || "status" == sortParam}
     >
-        <Status status={record.status}/>
+        <Status status={record.status} />
     </td>
 {/if}
 {#if schema.visible?.includes("_sys.createdBy")}
     <td
         class="text-center"
-        class:is-sort={"-_sys.createdBy" == sortParam || "_sys.createdBy" == sortParam}
+        class:is-sort={"-_sys.createdBy" == sortParam ||
+            "_sys.createdBy" == sortParam}
     >
-        <Avatar name={usernameById(users, record._sys.createdBy)} side={24}/>
+        <Avatar name={usernameById(users, record._sys.createdBy)} side={24} />
     </td>
 {/if}
 {#if schema.visible?.includes("_sys.updatedBy")}
     <td
         class="text-center"
-        class:is-sort={"-_sys.updatedBy" == sortParam || "_sys.updatedBy" == sortParam}
+        class:is-sort={"-_sys.updatedBy" == sortParam ||
+            "_sys.updatedBy" == sortParam}
     >
-        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24}/>
+        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24} />
     </td>
 {/if}
 {#if schema.visible?.includes("_sys.createdAt")}
-    <td class:is-sort={"-_sys.createdAt" == sortParam || "_sys.createdAt" == sortParam}>
+    <td
+        class:is-sort={"-_sys.createdAt" == sortParam ||
+            "_sys.createdAt" == sortParam}
+    >
         {friendlyDate(record._sys.createdAt)}
     </td>
 {/if}
 {#if schema.visible?.includes("_sys.updatedAt")}
-    <td class:is-sort={"-_sys.updatedAt" == sortParam || "_sys.updatedAt" == sortParam}>
+    <td
+        class:is-sort={"-_sys.updatedAt" == sortParam ||
+            "_sys.updatedAt" == sortParam}
+    >
         {friendlyDate(record._sys.updatedAt)}
     </td>
 {/if}

front/js/svelte/content/Table.svelte

@@ -1,13 +1,13 @@
 <script>
     import RecordRow from "./RecordRow.svelte";
-    import {previewTitle} from "../records/Preview";
-    import {usernameById} from "../account/users";
-    import {getContext} from "svelte";
-    import Avatar from "../account/Avatar.svelte";
-    import {selectRecord, toggleAll} from "./functions/recordSelect.js";
+    import { previewTitle } from "../records/Preview";
+    import { usernameById } from "../account/users";
+    import { getContext } from "svelte";
+    import Avatar from "../../common/Avatar.svelte";
+    import { selectRecord, toggleAll } from "./functions/recordSelect.js";
     import Checkbox from "../common/Checkbox.svelte";
     import Preview from "../files/Preview.svelte";
-    import {fileurl} from "../files/imageserver.js";
+    import { fileurl } from "../files/imageserver.js";
 
     const channel = getContext("channel");
 
@@ -23,17 +23,19 @@
     export let selected = [];
 
     function eventToggleAll(e) {
-        selected = toggleAll(e, records, selected)
+        selected = toggleAll(e, records, selected);
     }
 
     function select(record) {
-        selected = selectRecord(record, selected)
+        selected = selectRecord(record, selected);
     }
 
-    $: visibleColumns = schema.fields.filter(c => schema.visible?.includes(c.name) ?? [])
+    $: visibleColumns = schema.fields.filter(
+        (c) => schema.visible?.includes(c.name) ?? [],
+    );
 </script>
 
-<div class="table mt-5 ">
+<div class="table mt-5">
     <table>
         <thead>
             <tr>
@@ -42,10 +44,10 @@
                         <Checkbox
                             value=""
                             on:change={eventToggleAll}
-                            indeterminate={selected.length > 0 && selected.length < records.length}
+                            indeterminate={selected.length > 0 &&
+                                selected.length < records.length}
                             checked={selected.length === records.length}
-                    >
-                    </Checkbox>
+                        ></Checkbox>
                     </th>
                 {/if}
 
@@ -54,12 +56,13 @@
                         class="field-ui-{field.info.name ?? field.ui}"
                         class:is-sort={field.name === sortField.name}
                         scope="col"
-                        title={field.help}
-                >{field.label}</th
+                        title={field.help}>{field.label}</th
                     >
                 {/each}
-            {#each systemFields.filter(c => schema.visible?.includes(c.name)) as sysField}
-                <th class:is-sort={sysField.name === sortField.name}>{sysField.label}</th>
+                {#each systemFields.filter( (c) => schema.visible?.includes(c.name), ) as sysField}
+                    <th class:is-sort={sysField.name === sortField.name}
+                        >{sysField.label}</th
+                    >
                 {/each}
                 <th></th>
             </tr>
@@ -68,45 +71,64 @@
             {#each records as record (record.id)}
                 <tr>
                     <td class="title-td">
-                    <div
-                            class="title-td-contents"
-                    >
+                        <div class="title-td-contents">
                             {#if isWritable}
                                 <Checkbox
                                     on:change={() => select(record)}
-                                    checked={selected.find((r) => r.id === record.id)}
+                                    checked={selected.find(
+                                        (r) => r.id === record.id,
+                                    )}
                                     value={record}
-                            >
-                            </Checkbox>
-
+                                ></Checkbox>
                             {/if}
                             {#if record._file?.path}
                                 <div class="file-table-row">
-                                <Preview record={record} size={record._file?.width > 0 ? "medium" : "small"}/>
+                                    <Preview
+                                        {record}
+                                        size={record._file?.width > 0
+                                            ? "medium"
+                                            : "small"}
+                                    />
 
                                     <div>
                                         {#if record.status === "draft"}
-                                        <span style="text-transform: uppercase;font-size:10px">{record.status}</span>
+                                            <span
+                                                style="text-transform: uppercase;font-size:10px"
+                                                >{record.status}</span
+                                            >
                                         {/if}
                                         <a
                                             href="{channel.lucentUrl}/records/{record.id}"
-                                            target={inModal ? "_blank" : "_self"}
+                                            target={inModal
+                                                ? "_blank"
+                                                : "_self"}
                                         >
-                                        {previewTitle(channel.schemas, record, graph)}
+                                            {previewTitle(
+                                                channel.schemas,
+                                                record,
+                                                graph,
+                                            )}
                                         </a>
-                                    <span>{(record._file.size / 1024).toFixed(1)}kB</span>
+                                        <span
+                                            >{(
+                                                record._file.size / 1024
+                                            ).toFixed(1)}kB</span
+                                        >
 
                                         {#if record._file.width > 0}
-                                        <span>{record._file.width + "x" + record._file.height}</span>
+                                            <span
+                                                >{record._file.width +
+                                                    "x" +
+                                                    record._file.height}</span
+                                            >
                                         {/if}
                                         <a
-                                            href="{fileurl(channel,record)}"
+                                            href={fileurl(channel, record)}
                                             target="_blank"
                                         >
                                             Download
                                         </a>
                                     </div>
-
                                 </div>
                             {:else}
                                 <a
@@ -114,13 +136,18 @@
                                     target={inModal ? "_blank" : "_self"}
                                 >
                                     {#if record.status === "draft"}
-                                    <span style="text-transform: uppercase;font-size:10px">{record.status}</span>
+                                        <span
+                                            style="text-transform: uppercase;font-size:10px"
+                                            >{record.status}</span
+                                        >
                                     {/if}
-                                {previewTitle(channel.schemas, record, graph)}
+                                    {previewTitle(
+                                        channel.schemas,
+                                        record,
+                                        graph,
+                                    )}
                                 </a>
                             {/if}
-
-
                         </div>
                     </td>
                     <RecordRow
@@ -134,10 +161,7 @@
                     />
                     <td>
                         <Avatar
-                            name={usernameById(
-                                        users,
-                                        record._sys.updatedBy
-                                    )}
+                            name={usernameById(users, record._sys.updatedBy)}
                             side={24}
                         />
                     </td>
@@ -146,4 +170,3 @@
         </tbody>
     </table>
 </div>
-

front/js/svelte/content/pagination/Pagination.svelte

@@ -1,7 +1,6 @@
 <script>
     import { createEventDispatcher } from "svelte";
     const dispatch = createEventDispatcher();
-    import { range } from "lodash";
     import NavItem from "./NavItem.svelte";
     export let inModal;
     export let modalUrl;

front/js/svelte/content/tools/AppliedFilterNotLinked.svelte

@@ -1,6 +1,6 @@
 <script>
-        import {createEventDispatcher, getContext} from "svelte";
-        import Icon from "../../common/Icon.svelte";
+    import { createEventDispatcher, getContext } from "svelte";
+    import Icon from "../../../common/Icon.svelte";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -9,7 +9,6 @@
     const url = new URL(modalUrl ?? window.location.href);
 
     function removeFilter(k) {
-
         const url = new URL(modalUrl ?? window.location.href);
         url.searchParams.set("skip", "0");
         url.searchParams.delete("notlinked");
@@ -20,9 +19,9 @@
         }
     }
 </script>
-{#if url.searchParams.get("notlinked")}
-<span class="applied-filter">
 
+{#if url.searchParams.get("notlinked")}
+    <span class="applied-filter">
         Not linked
 
         <button
@@ -30,6 +29,7 @@
             type="button"
             class="button-text"
             aria-label="Close"
-        ><Icon width={12} height={12} icon="close"></Icon></button>
-</span>
+            ><Icon width={12} height={12} icon="close"></Icon></button
+        >
+    </span>
 {/if}

front/js/svelte/content/tools/FilterReferenceInput.svelte

@@ -1,8 +1,6 @@
 <script>
-    import {createEventDispatcher, getContext} from "svelte";
-    import {debounce} from "lodash";
-    import {previewTitle} from "../../records/Preview";
-
+    import { createEventDispatcher, getContext } from "svelte";
+    import { previewTitle } from "../../records/Preview";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -10,9 +8,8 @@
     export let value = "";
     export let field;
 
-    let search = ""
-    $: searchOptions = []
-
+    let search = "";
+    $: searchOptions = [];
 
     const updateResults = debounce((e) => {
         axios
@@ -35,24 +32,22 @@
 
     function apply(e, newOption) {
         e.preventDefault();
-        value = newOption.id
+        value = newOption.id;
         dispatch("addFilter");
-        value = ""
-
+        value = "";
     }
-
 </script>
+
 <div class="reference-tags">
     <input
         type="search"
         on:keyup={updateResults}
         bind:value={search}
-            placeholder={"Search for "+field.label}
+        placeholder={"Search for " + field.label}
         autocomplete="off"
     />
 
     <div class="reference-tags-results">
-
         {#if searchOptions}
             {#each searchOptions as option (option.id)}
                 <div
@@ -64,17 +59,9 @@
                 >
                     {previewTitle(channel.schemas, option)}
                 </div>
-
             {:else}
-                <div
-                        class="start-typing">
-                    Start typing...
-                </div>
+                <div class="start-typing">Start typing...</div>
             {/each}
         {/if}
     </div>
 </div>
-
-
-
-

front/js/svelte/content/tools/SortFields.svelte

@@ -1,6 +1,6 @@
 <script>
-    import Icon from "../../common/Icon.svelte";
-    import {createEventDispatcher} from "svelte";
+    import Icon from "../../../common/Icon.svelte";
+    import { createEventDispatcher } from "svelte";
     import Dropdown from "../../common/Dropdown.svelte";
 
     const dispatch = createEventDispatcher();
@@ -12,14 +12,22 @@
     export let systemFields = [];
 
     $: sortableFields = schema.fields.filter(
-        (f) => !["reference", "file", "json", "id", "rich", "markdown", "block"].includes(f.info.name)
+        (f) =>
+            ![
+                "reference",
+                "file",
+                "json",
+                "id",
+                "rich",
+                "markdown",
+                "block",
+            ].includes(f.info.name),
     );
     $: systemFieldsFiltered = systemFields;
     $: if (schema.type === "collection") {
         systemFieldsFiltered = systemFields.filter((f) => f.files === false);
     }
 
-
     function triggerSortField(fieldSort) {
         const url = new URL(modalUrl ?? window.location.href);
         url.searchParams.set("sort", fieldSort);
@@ -32,24 +40,27 @@
 
     function sortAsc(e, field) {
         e.preventDefault();
-        let prefix = systemFields.map((el) => el.name).includes(field.name) ? "" : "data.";
+        let prefix = systemFields.map((el) => el.name).includes(field.name)
+            ? ""
+            : "data.";
         return triggerSortField(prefix + field.name);
     }
 
     function sortDesc(e, field) {
         e.preventDefault();
-        let prefix = systemFields.map((el) => el.name).includes(field.name) ? "" : "data.";
+        let prefix = systemFields.map((el) => el.name).includes(field.name)
+            ? ""
+            : "data.";
         return triggerSortField("-" + prefix + field.name);
     }
 </script>
 
-
 <Dropdown>
     <div slot="button">
         {#if sortParam.startsWith("-")}
-            <Icon icon="arrow-down-wide-short"/>
+            <Icon icon="arrow-down-wide-short" />
         {:else}
-            <Icon icon="arrow-up-short-wide"/>
+            <Icon icon="arrow-up-short-wide" />
         {/if}
         <span class="ms-1">{sortField.label}</span>
     </div>
@@ -59,24 +70,22 @@
                 <button
                     on:click={(e) => sortAsc(e, field)}
                     title="Sort Ascending"
-                    class="button button-icon {field.name == sortField.name   && !sortParam.startsWith("-")
+                    class="button button-icon {field.name == sortField.name &&
+                    !sortParam.startsWith('-')
                         ? 'active'
                         : ''} "
                 >
-
-
-            <Icon icon="arrow-up-short-wide"/>
+                    <Icon icon="arrow-up-short-wide" />
                 </button>
                 <button
                     on:click={(e) => sortDesc(e, field)}
                     title="Sort Descending"
-                    class="button button-icon  {field.name == sortField.name && sortParam.startsWith("-")
+                    class="button button-icon {field.name == sortField.name &&
+                    sortParam.startsWith('-')
                         ? 'active'
                         : ''} "
                 >
-
-
-            <Icon icon="arrow-down-wide-short"/>
+                    <Icon icon="arrow-down-wide-short" />
                 </button>
                 <button
                     title="Sort Ascending"
@@ -90,7 +99,6 @@
         <h6 class="dropdown-header">System</h6>
         {#each systemFieldsFiltered as field}
             <div class="dropdown-item">
-
                 <button
                     on:click={(e) => sortAsc(e, field)}
                     title="Sort Ascending"
@@ -98,7 +106,7 @@
                         ? 'active'
                         : ''} "
                 >
-                <Icon icon="arrow-up-short-wide"/>
+                    <Icon icon="arrow-up-short-wide" />
                 </button>
                 <button
                     on:click={(e) => sortDesc(e, field)}
@@ -107,7 +115,7 @@
                         ? 'active'
                         : ''} "
                 >
-                <Icon icon="arrow-down-wide-short"/>
+                    <Icon icon="arrow-down-wide-short" />
                 </button>
                 <button
                     title="Sort Ascending"

front/js/svelte/content/tools/Tools.svelte

@@ -1,10 +1,10 @@
 <script>
     import FilterFields from "./FilterFields.svelte";
     import Uploader from "../../files/Uploader.svelte";
-    import Icon from "../../common/Icon.svelte";
+    import Icon from "../../../common/Icon.svelte";
     import SortFields from "./SortFields.svelte";
     import AppliedFilter from "./AppliedFilter.svelte";
-    import {createEventDispatcher, getContext} from "svelte";
+    import { createEventDispatcher, getContext } from "svelte";
     import Dropdown from "../../common/Dropdown.svelte";
     import AppliedFilterNotLinked from "./AppliedFilterNotLinked.svelte";
 
@@ -41,7 +41,6 @@
         } else {
             window.location = url;
         }
-
     }
 
     function uploadComplete(e) {
@@ -51,7 +50,6 @@
 
 <div class="toolbar">
     <div class="toolbar-filters">
-
         <SortFields
             {schema}
             {sortParam}
@@ -62,7 +60,6 @@
             on:refresh
         />
 
-
         <FilterFields
             bind:schema
             {systemFields}
@@ -74,11 +71,14 @@
         />
 
         <form method="GET" on:submit={search}>
-            <input type="search" name="filter[search_regex]" placeholder="Search"
-                   class="search" required>
+            <input
+                type="search"
+                name="filter[search_regex]"
+                placeholder="Search"
+                class="search"
+                required
+            />
         </form>
-
-
     </div>
 
     <div style="display:flex;align-items: center;gap:4px">
@@ -91,15 +91,15 @@
                     New Record
                 </a>
             {/if}
-        {:else }
+        {:else}
             <div>
-                <Uploader {schema} on:uploadComplete={uploadComplete}/>
+                <Uploader {schema} on:uploadComplete={uploadComplete} />
             </div>
         {/if}
         {#if !inModal}
             <Dropdown orientation="right">
                 <div slot="button">
-                    <Icon icon="ellipsis-vertical"/>
+                    <Icon icon="ellipsis-vertical" />
                 </div>
                 {#if filter["status_in"] === "trashed"}
                     {#if isWritable}
@@ -111,12 +111,7 @@
                         </a>
                     {/if}
                 {:else}
-
-                    <a
-                            class="dropdown-item"
-                            href={csvUrl}
-                    >Export to CSV</a
-                    >
+                    <a class="dropdown-item" href={csvUrl}>Export to CSV</a>
                     <a
                         class="dropdown-item"
                         href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
@@ -129,17 +124,12 @@
                     >
                 {/if}
             </Dropdown>
-
         {/if}
     </div>
 </div>
 
-
 <div class="applied-filters">
-    <AppliedFilterNotLinked
-            {inModal}
-            {modalUrl}
-            on:refresh
+    <AppliedFilterNotLinked {inModal} {modalUrl} on:refresh
     ></AppliedFilterNotLinked>
     {#if Object.entries(filter).length > 0}
         {#each Object.entries(filter) as [k, v]}
@@ -156,5 +146,3 @@
         {/each}
     {/if}
 </div>
-
-

front/js/svelte/dialog/Dialog.svelte

@@ -1,7 +1,6 @@
 <script>
-
-    import {createEventDispatcher, getContext} from "svelte";
-    import Icon from "../common/Icon.svelte";
+    import { createEventDispatcher, getContext } from "svelte";
+    import Icon from "../../common/Icon.svelte";
     import Index from "../content/Index.svelte";
     import axios from "axios";
 
@@ -15,13 +14,12 @@
     //     load();
     // });
 
-
     export function close(e) {
-        if(e){
+        if (e) {
             e.preventDefault();
         }
 
-        dialogEl.close()
+        dialogEl.close();
         selectedRecords = [];
     }
 
@@ -52,12 +50,11 @@
     }
 
     export function open(schema) {
-        dialogEl.showModal()
+        dialogEl.showModal();
         load(schema);
     }
-
-
 </script>
+
 <dialog bind:this={dialogEl}>
     {#if data.schema}
         <div class="dialog-header">
@@ -96,6 +93,5 @@
         <div class="dialog-body">
             <Index {...data} bind:selected={selectedRecords}></Index>
         </div>
-
     {/if}
 </dialog>

front/js/svelte/dialog/DialogRecord.svelte

@@ -1,6 +1,5 @@
 <script>
-
-    import Icon from "../common/Icon.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     let dialogEl;
 
@@ -10,15 +9,14 @@
         if (e) {
             e.preventDefault();
         }
-        dialogEl.close()
+        dialogEl.close();
     }
 
     export function open() {
-        dialogEl.showModal()
+        dialogEl.showModal();
     }
-
-
 </script>
+
 <dialog bind:this={dialogEl}>
     <div class="dialog-header">
         <button
@@ -32,7 +30,6 @@
     </div>
 
     <div class="dialog-body" style="min-width: 900px">
-        <slot/>
+        <slot />
     </div>
-
 </dialog>

front/js/svelte/files/Preview.svelte

@@ -1,7 +1,7 @@
 <script>
-    import Icon from "../common/Icon.svelte";
-    import {imgurl} from "./imageserver.js";
-    import {getContext} from "svelte";
+    import Icon from "../../common/Icon.svelte";
+    import { imgurl } from "./imageserver.js";
+    import { getContext } from "svelte";
 
     export let record;
     const channel = getContext("channel");
@@ -28,9 +28,9 @@
         fontSize = "13";
     }
 </script>
+
 <div style="display: flex;align-items: center;gap: 5px;">
     {#if record}
-
         {#if record._file.mime.startsWith("image")}
             <!-- href={imgurl(record)} -->
             <a
@@ -40,7 +40,7 @@
             >
                 <img
                     class="rounded w-100"
-                        src={imgurl(channel,record)}
+                    src={imgurl(channel, record)}
                     alt={record._file.path}
                 />
             </a>
@@ -51,7 +51,7 @@
                 class="file-preview-small"
                 style="width:{imageSide}px;height:{imageSide}px"
             >
-                <Icon icon="file" width={fileSide} height={fileSide}/>
+                <Icon icon="file" width={fileSide} height={fileSide} />
                 <span class="ms-2"
                     >.{record._file.path.split(".").pop().toLowerCase()}</span
                 >
@@ -63,15 +63,14 @@
             href="{channel.lucentUrl}/records/{record.id}"
             title={record._file.path}
             class="preview-file-filename lx-small-text text-decoration-none"
-        >{record._file.path}  </a
-        >
+            >{record._file.path}
+        </a>
     {/if}
 </div>
 
 <style>
-    img{
+    img {
         border-radius: 12px;
         padding: 4px;
     }
-
 </style>

front/js/svelte/home/Index.svelte

@@ -1,41 +0,0 @@
-<script>
-
-    import {getContext, onMount} from "svelte";
-    import RecordRow from "./RecordRow.svelte"
-
-    const channel = getContext("channel");
-    let records = [];
-    let graph = null;
-    let users = [];
-    onMount(() => {
-        axios
-            .get(channel.lucentUrl + "/home/records")
-            .then((response) => {
-                records = response.data.records;
-                graph = response.data.graph;
-                users = response.data.users;
-            })
-            .catch((error) => {
-                console.log(error);
-            });
-    });
-</script>
-
-
-<h3 class="header-small mb-4 mt-5">Latest Content changes</h3>
-{#if records.length > 0}
-
-    <div class="table">
-        <table class="">
-            <tbody>
-            {#each records as record (record.id)}
-                <tr>
-                    <RecordRow {graph} {record} {users}/>
-                </tr>
-            {/each}
-            </tbody>
-        </table>
-    </div>
-
-{/if}
-

front/js/svelte/home/RecordRow.svelte

@@ -1,50 +0,0 @@
-<script>
-    import {formatDistanceToNow, parseJSON} from "date-fns";
-    import Avatar from "../account/Avatar.svelte";
-    import {previewTitle} from "../records/Preview";
-    import Preview from "../files/Preview.svelte";
-    import {usernameById} from "../account/users";
-    import {getContext} from "svelte";
-
-    const channel = getContext("channel");
-    export let users;
-    export let graph;
-    export let record;
-    let schema = channel.schemas.find((s) => s.name === record.schema);
-    let frieldlyUpdatedAt = formatDistanceToNow(
-        parseJSON(record._sys.updatedAt),
-        {addSuffix: true}
-    );
-</script>
-
-<td>
-    <div class="row-name">
-    {#if record.status === "draft"}
-        <span class="status">DRAFT</span>
-    {/if}
-    {#if schema.type === "files"}
-        <Preview {record} size="tiny" showFilename={true}/>
-    {:else}
-        <a
-                href="{channel.lucentUrl}/records/{record.id}"
-
-        >
-            {previewTitle(channel.schemas, record, graph)}
-        </a>
-    {/if}
-    </div>
-</td>
-<td><a
-        href="{channel.lucentUrl}/content/{schema.name}">{schema.label}</a
->
-</td>
-
-
-<td>
-    <div style="display: flex;gap: 14px">
-        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24}/>
-        <div class="ms-2">
-            {frieldlyUpdatedAt}
-        </div>
-    </div>
-</td>

front/js/svelte/layout/Header.svelte

@@ -1,34 +0,0 @@
-<script>
-    import Avatar from "../account/Avatar.svelte";
-    import {getContext} from "svelte";
-    import Dropdown from "../common/Dropdown.svelte";
-
-    const channel = getContext("channel");
-    const user = getContext("user");
-    console.log( channel.commands)
-</script>
-
-
-<div class="top-nav ">
-    <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>
-
-    {#if channel.commands.length > 0}
-        <Dropdown>
-            <div slot="button">Actions</div>
-            {#each channel.commands as command}
-                <a href="{channel.lucentUrl}/command-report/{command.signature}" class="top-nav-item">{command.name}</a>
-            {/each}
-        </Dropdown>
-
-    {/if}
-    <!--        <div>-->
-    <!--            <form method="GET">-->
-    <!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
-    <!--                       class="form-control" required/>-->
-    <!--            </form>-->
-    <!--        </div>-->
-    <a href="{channel.lucentUrl}/profile">
-        <Avatar side="28" name={user.name}/>
-    </a>
-</div>
-

front/js/svelte/layout/Navbar.svelte

@@ -1,39 +0,0 @@
-<script>
-    import NavbarMenu from "./NavbarMenu.svelte";
-    import {getContext} from "svelte";
-
-    export let schema;
-    const channel = getContext("channel");
-    const readableSchemas = getContext("readableSchemas");
-
-    const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
-    const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
-
-</script>
-<div class="sidebar-top">
-    <a class="logo" href="{channel.lucentUrl}">{channel.name}</a>
-    <a class="nav-item" href="{channel.lucentUrl}/profile">
-    </a>
-</div>
-<div class="sidebar">
-
-
-    <NavbarMenu
-            title="Content"
-            schemas={ readableSchemas.filter((sc) => sc.isEntry)}
-            schema={schema}
-            expanded={true}
-    />
-
-    <NavbarMenu
-            title="Files"
-            schemas={ fileSchemas}
-            schema={schema}
-    />
-
-    <NavbarMenu
-            title="Other"
-            schemas={ otherSchemas}
-            schema={schema}
-    />
-</div>

front/js/svelte/members/MemberSettingsCard.svelte

@@ -1,14 +1,13 @@
 <script>
-    import Avatar from "../account/Avatar.svelte";
-    import {fly} from "svelte/transition";
-    import {createEventDispatcher} from "svelte";
+    import Avatar from "../../common/Avatar.svelte";
+    import { fly } from "svelte/transition";
+    import { createEventDispatcher } from "svelte";
     import Dropdown from "../common/Dropdown.svelte";
 
     const dispatch = createEventDispatcher();
     export let member;
     export let roles;
 
-
     function removeFrom(e, aRole) {
         e.preventDefault();
         let newRoles = member.roles.filter((r) => r !== aRole);
@@ -22,24 +21,23 @@
         e.preventDefault();
 
         let newRoles = [...member.roles, aRole];
-        console.log(member.roles)
-        console.log(aRole)
-        console.log(newRoles)
+        console.log(member.roles);
+        console.log(aRole);
+        console.log(newRoles);
         dispatch("update", {
             user: member.id,
             roles: newRoles,
         });
     }
-
-
 </script>
 
-<div
-        transition:fly={{ duration: 200 }}
-        class="member-item"
->
-    <div class="member-name status-{member.roles.includes('removed')  ? 'removed' : 'active'}">
-        <Avatar name={member.name ?? "" } side={32}/>
+<div transition:fly={{ duration: 200 }} class="member-item">
+    <div
+        class="member-name status-{member.roles.includes('removed')
+            ? 'removed'
+            : 'active'}"
+    >
+        <Avatar name={member.name ?? ""} side={32} />
         <div>
             <div>
                 {member.name}
@@ -50,41 +48,35 @@
         </div>
     </div>
     <Dropdown orientation="right">
-        <div slot="button">
-            Roles
-        </div>
+        <div slot="button">Roles</div>
         <h6 class="dropdown-header">Remove role</h6>
         {#each roles as role}
             {#if member.roles.includes(role)}
                 <button
                     class="dropdown-item button"
-                        on:click={(e) => removeFrom(e,role)}
+                    on:click={(e) => removeFrom(e, role)}
                 >
                     {role}
                 </button>
             {/if}
         {/each}
 
-
         <h6 class="dropdown-header">Add role</h6>
         {#each roles as role}
             {#if !member.roles.includes(role)}
                 <button
                     class="dropdown-item button"
-                        on:click={(e) => addTo(e,role)}
+                    on:click={(e) => addTo(e, role)}
                 >
                     {role}
                 </button>
             {/if}
         {/each}
-
     </Dropdown>
-
 </div>
+
 <style>
     .status-removed {
-        opacity: .5;
+        opacity: 0.5;
     }
-
-
 </style>

front/js/svelte/records/Edit.svelte

@@ -1,14 +1,13 @@
 <script>
-    import {afterUpdate, getContext, onMount} from "svelte";
-    import {isEqual} from "lodash";
+    import { afterUpdate, getContext, onMount } from "svelte";
     import axios from "axios";
-    import EditHeader from "./header/EditHeader.svelte"
-    import FilePreview from "./FilePreview.svelte"
-    import ContentTabs from "./header/ContentTabs.svelte"
-    import FormField from "./FormField.svelte"
-    import Graph from "./Graph.svelte"
-    import Info from "./Info.svelte"
-    import ErrorAlert from "../common/ErrorAlert.svelte"
+    import EditHeader from "./header/EditHeader.svelte";
+    import FilePreview from "./FilePreview.svelte";
+    import ContentTabs from "./header/ContentTabs.svelte";
+    import FormField from "./FormField.svelte";
+    import Graph from "./Graph.svelte";
+    import Info from "./Info.svelte";
+    import ErrorAlert from "../common/ErrorAlert.svelte";
     import Title from "./header/Title.svelte";
 
     const channel = getContext("channel");
@@ -17,7 +16,7 @@
     export let record;
     export let graph = {
         records: [],
-        edges: []
+        edges: [],
     };
     // export let recordHistory;
     export let isCreateMode;
@@ -33,10 +32,7 @@
           } error(s)`
         : null;
 
-    let activeFields = schema.fields.filter(
-        (f) => f.name !== "id"
-    );
-
+    let activeFields = schema.fields.filter((f) => f.name !== "id");
 
     onMount(() => {
         setOriginalContent();
@@ -104,7 +100,9 @@
             }
 
             // remove trashed edges
-            graph.edges = graph.edges?.filter((edge) => !edge._isTrashed && edge.source === record.id);
+            graph.edges = graph.edges?.filter(
+                (edge) => !edge._isTrashed && edge.source === record.id,
+            );
             axios
                 .post(channel.lucentUrl + "/records", {
                     record: record,
@@ -115,7 +113,8 @@
                     console.log("SAVE: SAVED");
 
                     if (isCreateMode) {
-                        window.location = channel.lucentUrl + "/records/" + record.id;
+                        window.location =
+                            channel.lucentUrl + "/records/" + record.id;
                     } else {
                         record = response.data.records[0] ?? null;
                         if (!record) {
@@ -137,7 +136,7 @@
                             errorMessage = error.response.data.error;
                         } else {
                             validationErrors = error.response.data.error;
-                            console.log(validationErrors)
+                            console.log(validationErrors);
                         }
                     }
                     resolve(null);
@@ -149,17 +148,14 @@
     }
 </script>
 
-<svelte:window on:beforeunload={beforeUnload}/>
+<svelte:window on:beforeunload={beforeUnload} />
 
 <div class="record-edit">
     <div class="tools-header">
         <!--    <Manager managerRecords={recordHistory} {graph}/>-->
-        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab />
         {#if isCreateMode}
-            <button
-                    class="button primary btn-spinner"
-                    on:click={save}
-            >
+            <button class="button primary btn-spinner" on:click={save}>
                 <span
                     class="spinner-border spinner-border-sm"
                     role="status"
@@ -181,26 +177,20 @@
                 Save
             </button>
         {/if}
-
     </div>
-    <Title {schema} {record} {isCreateMode}/>
+    <Title {schema} {record} {isCreateMode} />
 
-
-    <ErrorAlert message={errorMessage}/>
+    <ErrorAlert message={errorMessage} />
 
     <div class=" mt-4" style="margin-bottom:150px;position:relative;">
-        <ContentTabs
-                {schema}
-                {isCreateMode}
-                bind:active={activeContentTab}
-        />
+        <ContentTabs {schema} {isCreateMode} bind:active={activeContentTab} />
         {#if !["_graph", "_info"].includes(activeContentTab)}
-            <FilePreview {record} {schema}/>
+            <FilePreview {record} {schema} />
             {#each activeFields as field (field.name)}
                 {#if activeContentTab === field.group}
                     <FormField
                         bind:data={record.data}
-                            bind:graph={graph}
+                        bind:graph
                         {field}
                         {schema}
                         {record}
@@ -210,9 +200,9 @@
                 {/if}
             {/each}
         {:else if activeContentTab === "_graph"}
-            <Graph {graph} {record}/>
+            <Graph {graph} {record} />
         {:else if activeContentTab === "_info"}
-            <Info {record} {graph} {users} {schema}/>
+            <Info {record} {graph} {users} {schema} />
         {/if}
     </div>
 </div>

front/js/svelte/records/Info.svelte

@@ -1,11 +1,10 @@
 <script>
-    import {friendlyDate} from "../../helpers";
-    import Avatar from "../account/Avatar.svelte";
-    import {usernameById} from "../account/users";
-    import {isEqual} from "lodash";
-    import Icon from "../common/Icon.svelte";
+    import { friendlyDate } from "../../helpers";
+    import Avatar from "../../common/Avatar.svelte";
+    import { usernameById } from "../account/users";
+    import Icon from "../../common/Icon.svelte";
     import RevisionCell from "./revisions/RevisionCell.svelte";
-    import {getContext} from "svelte";
+    import { getContext } from "svelte";
     import RevisionEdgeRow from "./revisions/RevisionEdgeRow.svelte";
 
     const channel = getContext("channel");
@@ -30,27 +29,27 @@
         });
 
     function getEdgesByField(fieldsWithDiff, revision) {
-
-        edgeFieldsDiff = graph.edges.filter((e) => e.depth === 1).reduce((c, e) => {
+        edgeFieldsDiff = graph.edges
+            .filter((e) => e.depth === 1)
+            .reduce((c, e) => {
                 if (!c[e.field]) {
                     c[e.field] = {
                         record: [],
                         revision: [],
+                    };
                 }
-            }
-            c[e.field]["record"].push(e)
+                c[e.field]["record"].push(e);
                 return c;
             }, {});
 
-
         edgeFieldsDiff = revision._edges.reduce((c, e) => {
             if (!c[e.field]) {
                 c[e.field] = {
                     record: [],
                     revision: [],
+                };
             }
-            }
-            c[e.field]["revision"].push(e)
+            c[e.field]["revision"].push(e);
             return c;
         }, edgeFieldsDiff);
     }
@@ -62,7 +61,7 @@
         fieldsWithDiff = schema.fields.filter((f) => {
             return !isEqual(selectedRevision.data[f.name], record.data[f.name]);
         });
-        getEdgesByField(fieldsWithDiff, revision)
+        getEdgesByField(fieldsWithDiff, revision);
         revisionSection.scrollIntoView();
     }
 
@@ -71,7 +70,7 @@
         rollbackError = "";
         axios
             .post(
-                `${channel.lucentUrl}/records/${record.id}/rollback/${selectedRevision._sys.version}`
+                `${channel.lucentUrl}/records/${record.id}/rollback/${selectedRevision._sys.version}`,
             )
             .then((response) => {
                 window.location.reload();
@@ -84,7 +83,7 @@
     }
 </script>
 
-<div class="lx-card ">
+<div class="lx-card">
     <div class="row">
         <div class="col-8">
             <div>
@@ -113,9 +112,7 @@
             </div>
         </div>
         <div class="col-4">
-            <span class="label d-block text-muted "
-            >Rules for this schema
-            </span>
+            <span class="label d-block text-muted">Rules for this schema </span>
             <small>
                 Each record maintains the last {schema.revisions}
                 versions
@@ -133,7 +130,6 @@
                     class:active={revision._sys.version ===
                         selectedRevision?._sys.version}
                 >
-
                     <div class="version">
                         <span>version {revision._sys.version}</span>
                         <Avatar
@@ -150,8 +146,7 @@
                             class="button"
                             on:click={(e) => compare(e, revision)}
                             >Compare
-                        </button
-                        >
+                        </button>
                     </div>
                 </div>
             {/if}
@@ -169,15 +164,13 @@
                 <p class="text-center fw-bold mb-3 mt-5">
                     If you choose to rollback to this revision
                 </p>
-                <button
-                        on:click={rollback}
-                        class="button"
-                >
+                <button on:click={rollback} class="button">
                     Rollback to version {selectedRevision._sys.version}
                 </button>
 
                 {#if rollbackError}
-                    <span class="d-block text-danger mt-3">{rollbackError}</span>
+                    <span class="d-block text-danger mt-3">{rollbackError}</span
+                    >
                 {/if}
                 <div class="mt-3">
                     {#each fieldsWithDiff as field}
@@ -188,10 +181,7 @@
                         <!-- <div class="d-block" style="width:200px;">
                                 {field.label}
                             </div> -->
-                        <div
-                                class="revision-field"
-                                style="overflow:hidden"
-                        >
+                        <div class="revision-field" style="overflow:hidden">
                             <div class="compare-left">
                                 <RevisionCell
                                     {field}
@@ -226,22 +216,16 @@
             {/if}
 
             <div class="mt-3">
-                <p class="text-center fw-bold mb-3 mt-5">
-                    Record References
-                </p>
+                <p class="text-center fw-bold mb-3 mt-5">Record References</p>
                 {#each Object.entries(edgeFieldsDiff) as [field, edges]}
-                    <div
-                            class="revision-references"
-                            style="overflow:hidden"
-                    >
+                    <div class="revision-references" style="overflow:hidden">
                         <div class="reference-field">
                             {field}:
                         </div>
                         <div class="reference-compare">
-
                             <p class="">Record</p>
                             {#each edges.record as edge}
-                                <RevisionEdgeRow {edge}/>
+                                <RevisionEdgeRow {edge} />
                             {:else}
                                 <p>No references</p>
                             {/each}
@@ -249,7 +233,7 @@
                         <div class="reference-compare">
                             <p class="text-success">Revision</p>
                             {#each edges.revision as edge}
-                                <RevisionEdgeRow {edge}/>
+                                <RevisionEdgeRow {edge} />
                             {:else}
                                 <p>No references</p>
                             {/each}
@@ -258,7 +242,5 @@
                 {/each}
             </div>
         </div>
-
     {/if}
 </div>
-

front/js/svelte/records/InlineEdit.svelte

@@ -1,7 +1,11 @@
 <script>
-    import {afterUpdate, createEventDispatcher, getContext, onMount} from "svelte";
+    import {
+        afterUpdate,
+        createEventDispatcher,
+        getContext,
+        onMount,
+    } from "svelte";
 
-    import {isEqual} from "lodash";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
     import ContentTabs from "./header/ContentTabs.svelte";
@@ -16,7 +20,7 @@
     export let record;
     export let graph = {
         records: [],
-        edges: []
+        edges: [],
     };
     export let isCreateMode;
     let originalContent;
@@ -29,9 +33,7 @@
           } error(s)`
         : null;
 
-    let activeFields = schema.fields.filter(
-        (f) => f.name !== "id"
-    );
+    let activeFields = schema.fields.filter((f) => f.name !== "id");
 
     let tabname = "_default";
     let fieldToTabs = schema.fields.reduce((c, f) => {
@@ -114,8 +116,10 @@
                 return;
             }
             // remove trashed edges
-            graph.edges = graph.edges?.filter((edge) => !edge._isTrashed && edge.source === record.id) ?? [];
-
+            graph.edges =
+                graph.edges?.filter(
+                    (edge) => !edge._isTrashed && edge.source === record.id,
+                ) ?? [];
 
             axios
                 .post(channel.lucentUrl + "/records", {
@@ -150,16 +154,13 @@
     }
 </script>
 
-<svelte:window on:beforeunload={beforeUnload}/>
+<svelte:window on:beforeunload={beforeUnload} />
 
 <div class="inline-edit record-edit">
     <div class="tools-header">
-        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab />
         {#if isCreateMode}
-            <button
-                    class="button primary btn-spinner"
-                    on:click={save}
-            >
+            <button class="button primary btn-spinner" on:click={save}>
                 <span
                     class="spinner-border spinner-border-sm"
                     role="status"
@@ -181,24 +182,19 @@
                 Save
             </button>
         {/if}
-
     </div>
-    <Title {schema} {record} {isCreateMode}/>
-    <ErrorAlert message={errorMessage}/>
+    <Title {schema} {record} {isCreateMode} />
+    <ErrorAlert message={errorMessage} />
 
     <div class=" mt-4" style="margin-bottom:150px;position:relative;">
-        <ContentTabs
-                {schema}
-                {isCreateMode}
-                bind:active={activeContentTab}
-        />
-        <FilePreview {record} {schema}/>
+        <ContentTabs {schema} {isCreateMode} bind:active={activeContentTab} />
+        <FilePreview {record} {schema} />
         <!-- <fieldset disabled="disabled"> -->
         {#each activeFields as field (field.name)}
             {#if activeContentTab === field.group}
                 <FormField
                     bind:data={record.data}
-                        bind:graph={graph}
+                    bind:graph
                     {field}
                     {schema}
                     {record}
@@ -210,4 +206,3 @@
         <!-- </fieldset> -->
     </div>
 </div>
-

front/js/svelte/records/elements/ReferenceInlineButtons.svelte

@@ -1,6 +1,6 @@
 <script>
-    import {createEventDispatcher, getContext} from "svelte";
-    import Icon from "../../common/Icon.svelte";
+    import { createEventDispatcher, getContext } from "svelte";
+    import Icon from "../../../common/Icon.svelte";
     import InlineEdit from "../InlineEdit.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
     import DialogRecord from "../../dialog/DialogRecord.svelte";
@@ -24,7 +24,7 @@
         e.preventDefault();
         console.log("Save inline");
         inLineCreateRecord = null;
-        dialogRecord.close()
+        dialogRecord.close();
         dispatch("save", {
             records: e.detail.records,
             after: recordId,
@@ -48,7 +48,7 @@
             .get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
             .then((response) => {
                 inLineCreateRecord = response.data;
-                dialogRecord.open()
+                dialogRecord.open();
             })
             .catch((error) => {
                 console.log(error);
@@ -57,23 +57,19 @@
 </script>
 
 {#if schemas.length > 1}
-    <div
-            style="display: flex;align-items: center;gap:4px"
-    >
+    <div style="display: flex;align-items: center;gap:4px">
         <Dropdown>
             <div slot="button">New</div>
             {#each schemas as schema}
                 <button
                     class=" button"
-                        on:click={(e) =>
-                                createInlineReference(e, schema.name)}
+                    on:click={(e) => createInlineReference(e, schema.name)}
                     >{schema.label}
                 </button>
             {/each}
-
         </Dropdown>
         <Dropdown>
-            <div slot="button"> <Icon icon="magnifying-glass"/></div>
+            <div slot="button"><Icon icon="magnifying-glass" /></div>
             {#each schemas as schema}
                 <button
                     class="button"
@@ -81,7 +77,6 @@
                     >{schema.label}
                 </button>
             {/each}
-
         </Dropdown>
     </div>
 {:else}
@@ -95,9 +90,8 @@
             class="button"
             on:click={(e) => openBrowseModal(e, schemas[0].name)}
         >
-            <Icon icon="magnifying-glass"/>
-        </button
-        >
+            <Icon icon="magnifying-glass" />
+        </button>
     </div>
 {/if}
 
@@ -109,8 +103,7 @@
             on:cancel={(e) => (inLineCreateRecord = null)}
             on:inlinesaved={save}
         />
-
     {/if}
 </DialogRecord>
 
-<Dialog bind:this={browseModal} on:insert={insert}/>
+<Dialog bind:this={browseModal} on:insert={insert} />

front/js/svelte/records/elements/ReferenceTags.svelte

@@ -1,10 +1,9 @@
 <script>
-    import {getContext} from "svelte";
-    import {debounce} from "lodash";
-    import {previewTitle} from "../Preview";
-    import {getErrorMessage} from "./errorMessage";
-    import {insertEdges} from "./reference.js";
-    import Icon from "../../common/Icon.svelte";
+    import { getContext } from "svelte";
+    import { previewTitle } from "../Preview";
+    import { getErrorMessage } from "./errorMessage";
+    import { insertEdges } from "./reference.js";
+    import Icon from "../../../common/Icon.svelte";
 
     const channel = getContext("channel");
     export let field;
@@ -15,20 +14,24 @@
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
-    $: references = graph.edges
+    $: references =
+        graph.edges
             .filter((edge) => edge.field === field.name)
             .map((edge) => {
-            return graph.records.find((increc) => increc.id == edge.target && record.id == edge.source);
-        }).filter((rec) => (rec?.id ? true : false)) ?? [];
-
-    let search = ""
-    $: searchOptions = []
+                return graph.records.find(
+                    (increc) =>
+                        increc.id == edge.target && record.id == edge.source,
+                );
+            })
+            .filter((rec) => (rec?.id ? true : false)) ?? [];
 
+    let search = "";
+    $: searchOptions = [];
 
     function removeReference(e, recordId) {
         e.preventDefault();
         graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === recordId && edge.field === field.name)
+            (edge) => !(edge.target === recordId && edge.field === field.name),
         );
     }
 
@@ -41,14 +44,14 @@
                     schema: field.collections[0],
                     status: "published",
                     data: {
-                        [field.searchField]: newValue
-                    }
+                        [field.searchField]: newValue,
+                    },
                 },
             })
             .then((response) => {
                 searchOptions = [];
                 insert(e, response.data.records[0]);
-                console.log(response)
+                console.log(response);
             })
             .catch((error) => {
                 searchOptions = [];
@@ -58,10 +61,16 @@
 
     function insert(e, insertRecord) {
         e.preventDefault();
-        graph = insertEdges(graph, record, [insertRecord], field.name, e.detail.action);
-        search = ""
-        searchEl.focus()
-        searchEl.blur()
+        graph = insertEdges(
+            graph,
+            record,
+            [insertRecord],
+            field.name,
+            e.detail.action,
+        );
+        search = "";
+        searchEl.focus();
+        searchEl.blur();
     }
 
     const updateResults = debounce((e) => {
@@ -82,9 +91,8 @@
                 console.log(error);
             });
     }, 500);
-
-
 </script>
+
 <div class="reference-tags">
     {#if errorMessage}
         <div class="invalid-feedback d-block mb-3">
@@ -99,12 +107,11 @@
         on:keyup={updateResults}
         class:is-invalid={errorMessage}
         bind:value={search}
-            placeholder={"Search for "+field.label}
+        placeholder={"Search for " + field.label}
         autocomplete="off"
     />
 
     <div class="reference-tags-results">
-
         {#if searchOptions}
             {#each searchOptions as option (option.id)}
                 <div
@@ -114,23 +121,19 @@
                     on:click={(e) => insert(e, option)}
                     on:keypress={(e) => insert(e, option)}
                 >
-                    {previewTitle(channel.schemas, option ,graph)}
+                    {previewTitle(channel.schemas, option, graph)}
                 </div>
-
             {:else}
-                <div
-                        class="start-typing">
-                    Start typing...
-                </div>
+                <div class="start-typing">Start typing...</div>
             {/each}
         {/if}
-        {#if search }
+        {#if search}
             <div
                 class="reference-tags-option"
                 role="button"
                 tabindex="0"
-                    on:click={(e) => saveNew(e,search)}
-                    on:keypress={(e) => saveNew(e,search)}
+                on:click={(e) => saveNew(e, search)}
+                on:keypress={(e) => saveNew(e, search)}
             >
                 Add "{search}"
             </div>
@@ -150,18 +153,15 @@
                 </a>
 
                 <button
-                        on:click|preventDefault={(e) => removeReference(e, record.id)}
+                    on:click|preventDefault={(e) =>
+                        removeReference(e, record.id)}
                     type="button"
                     class="button-text"
                     aria-label="Close"
                 >
                     <Icon width={12} height={12} icon="close"></Icon>
                 </button>
-
             </span>
         {/each}
     </div>
 {/if}
-
-
-

front/js/svelte/records/elements/UUID.svelte

@@ -1,7 +1,6 @@
 <script>
-    import { v4 as uuidv4 } from "uuid";
     import { getContext } from "svelte";
-    import Icon from "../../common/Icon.svelte";
+    import Icon from "../../../common/Icon.svelte";
     import { getErrorMessage } from "./errorMessage";
     const channelurl = getContext("channelurl");
     export let validationErrors;
@@ -14,12 +13,11 @@
 
     function generateId(e) {
         e.preventDefault();
-        value = uuidv4();
+        value = randomUUID();
     }
 </script>
 
 <div class="mb-0">
-
     <div class="d-flex justify-content-between">
         <input
             type="text"

front/js/svelte/records/elements/Url.svelte

@@ -1,11 +1,10 @@
 <script>
-    import { uniqueId } from "lodash";
     import { getContext } from "svelte";
     const channelurl = getContext("channelurl");
     export let field;
     export let value;
     export let schema;
-    let id = uniqueId();
+    let id = randomUUID();
 </script>
 
 <div class="mb-0">

front/js/svelte/records/elements/reference.js

@@ -1,6 +1,10 @@
-import {uniqBy} from "lodash";
-
-export function insertEdges(graph, sourceRecord, targetRecords, fieldName, action = "") {
+export function insertEdges(
+  graph,
+  sourceRecord,
+  targetRecords,
+  fieldName,
+  action = "",
+) {
   let newEdges = targetRecords.map((r) => {
     return {
       target: r.id,
@@ -9,7 +13,7 @@ export function insertEdges(graph, sourceRecord, targetRecords, fieldName, actio
       targetSchema: r.schema,
       field: fieldName,
       depth: 1,
-            rank: ""
+      rank: "",
     };
   });
 
@@ -19,6 +23,9 @@ export function insertEdges(graph, sourceRecord, targetRecords, fieldName, actio
   }
 
   graph.records = uniqBy([...graph.records, ...targetRecords], (r) => r.id);
-    graph.edges = uniqBy([...replacedEdges, ...newEdges], (edge) =>  edge.source +  edge.target + edge.field + edge.depth);
+  graph.edges = uniqBy(
+    [...replacedEdges, ...newEdges],
+    (edge) => edge.source + edge.target + edge.field + edge.depth,
+  );
   return graph;
 }

front/js/svelte/records/header/EditHeader.svelte

@@ -1,6 +1,6 @@
 <script>
-    import {getContext} from "svelte";
-    import Icon from "../../common/Icon.svelte";
+    import { getContext } from "svelte";
+    import Icon from "../../../common/Icon.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
     import StatusSelect from "./StatusSelect.svelte";
 
@@ -12,21 +12,21 @@
 
     function clone(e) {
         e.preventDefault();
-        axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
-            window.location = channel.lucentUrl + "/records/" + response.data.id;
-        }).catch(error => {
-
-        });
+        axios
+            .post(channel.lucentUrl + "/records/clone/" + record.id)
+            .then((response) => {
+                window.location =
+                    channel.lucentUrl + "/records/" + response.data.id;
+            })
+            .catch((error) => {});
     }
 </script>
 
-
-
 <div style="display: flex;align-items: center; gap:10px;">
     {#if !isCreateMode}
-        <Dropdown >
+        <Dropdown>
             <div slot="button">
-                <Icon icon="ellipsis"/>
+                <Icon icon="ellipsis" />
             </div>
             <h6 class="dropdown-header">Record Actions</h6>
             <a
@@ -44,13 +44,12 @@
                 </a>
             {/if}
             <a
-                    on:click|preventDefault={(e) =>
-                        (activeContentTab = "_info")}
+                on:click|preventDefault={(e) => (activeContentTab = "_info")}
                 class="dropdown-item"
-                    href="{channel.lucentUrl}">Revisions</a
+                href={channel.lucentUrl}>Revisions</a
             >
         </Dropdown>
     {/if}
 
-<StatusSelect bind:status={record.status} {record}></StatusSelect>
+    <StatusSelect bind:status={record.status} {record}></StatusSelect>
 </div>

front/js/svelte/records/previews/PreviewFile.svelte

@@ -1,10 +1,10 @@
 <script>
-    import Icon from "../../common/Icon.svelte";
+    import Icon from "../../../common/Icon.svelte";
 
-    import {createEventDispatcher, getContext} from "svelte";
+    import { createEventDispatcher, getContext } from "svelte";
     import Preview from "../../files/Preview.svelte";
-    import {previewTitle} from "./../Preview";
-    import {fileurl, htmlurl} from "../../files/imageserver.js"
+    import { previewTitle } from "./../Preview";
+    import { fileurl, htmlurl } from "../../files/imageserver.js";
     import Status from "./../Status.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
 
@@ -14,7 +14,9 @@
     export let hasDelete = false;
     export let hasInsert = false;
 
-    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    let schema = channel.schemas.find(
+        (aschema) => aschema.name === record.schema,
+    );
     let cardTitle = previewTitle(channel.schemas, record);
     let imagePresets = Object.keys(channel.imageFilters);
 
@@ -25,22 +27,23 @@
 
     function insert(e, preset) {
         e.preventDefault();
-        let html = htmlurl(channel, record, preset)
-        let url = !preset ?  `/${record._file.path}` : `/templates/${preset}/${record._file.path}`;
+        let html = htmlurl(channel, record, preset);
+        let url = !preset
+            ? `/${record._file.path}`
+            : `/templates/${preset}/${record._file.path}`;
         dispatch("editor-insert", {
             html: html,
             url: channel.filesUrl + url,
             originalUrl: channel.filesUrl + "/" + record._file.path,
-            record: record
+            record: record,
         });
     }
-
 </script>
 
 <div class="preview-file">
     <div style="display: flex;align-items: center;gap: 10px;">
         <div class="image">
-            <Preview {record} size="small"/>
+            <Preview {record} size="small" />
         </div>
         <div class="title">
             <div>
@@ -53,39 +56,40 @@
                 <small class="d-block">
                     from {schema.label}
                     {#if record.status === "draft"}
-                        <Status status={record.status}/>
+                        <Status status={record.status} />
                     {/if}
                 </small>
-
-            </div>
-
             </div>
         </div>
-    <div style="display: flex;gap:4px; align-items: center;  margin-right: 10px;">
+    </div>
+    <div
+        style="display: flex;gap:4px; align-items: center;  margin-right: 10px;"
+    >
         {#if hasInsert}
             <div class="reference-action">
                 <Dropdown>
                     <div slot="button">
-                        <Icon icon="photo-film"/>
+                        <Icon icon="photo-film" />
                     </div>
-                    <button class="dropdown-item button" on:click={e => insert(e,null)}>original</button>
+                    <button
+                        class="dropdown-item button"
+                        on:click={(e) => insert(e, null)}>original</button
+                    >
                     {#each imagePresets as preset}
-                        <button class="dropdown-item button" on:click={e => insert(e,preset)}>{preset}</button>
+                        <button
+                            class="dropdown-item button"
+                            on:click={(e) => insert(e, preset)}>{preset}</button
+                        >
                     {/each}
                 </Dropdown>
-
             </div>
         {/if}
         {#if hasDelete}
             <div class="reference-action">
-                <button
-                        class="button"
-                        on:click={remove}
-                >
-                    <Icon icon="trash-can"/>
+                <button class="button" on:click={remove}>
+                    <Icon icon="trash-can" />
                 </button>
             </div>
         {/if}
     </div>
 </div>
-

front/js/svelte/records/previews/PreviewReference.svelte

@@ -1,8 +1,8 @@
 <script>
-    import Icon from "../../common/Icon.svelte";
+    import Icon from "../../../common/Icon.svelte";
 
-    import {createEventDispatcher, getContext} from "svelte";
-    import {previewTitle} from "./../Preview";
+    import { createEventDispatcher, getContext } from "svelte";
+    import { previewTitle } from "./../Preview";
     import Status from "./../Status.svelte";
     import Preview from "../../files/Preview.svelte";
 
@@ -12,10 +12,16 @@
     export let record;
     export let hasDelete = false;
 
-    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    let schema = channel.schemas.find(
+        (aschema) => aschema.name === record.schema,
+    );
     let cardTitle = previewTitle(channel.schemas, record, graph);
-    const cardImageEdge = graph.edges.find(e => e.source === record.id  && e.field === schema.cardImage);
-    let cardImageRecord = graph.records.find(r => r.id === cardImageEdge?.target);
+    const cardImageEdge = graph.edges.find(
+        (e) => e.source === record.id && e.field === schema.cardImage,
+    );
+    let cardImageRecord = graph.records.find(
+        (r) => r.id === cardImageEdge?.target,
+    );
 
     function remove(e) {
         e.preventDefault();
@@ -23,13 +29,11 @@
     }
 </script>
 
-
 <div class="preview-reference">
     <div style="display: flex;align-items: center;gap: 10px;">
-
         {#if cardImageRecord}
             <div class="image">
-                <Preview record={cardImageRecord} size="small"/>
+                <Preview record={cardImageRecord} size="small" />
             </div>
         {/if}
         <div class="title">
@@ -43,23 +47,17 @@
                 <small class="d-block">
                     from {schema.label}
                     {#if record.status === "draft"}
-                        <Status status={record.status}/>
+                        <Status status={record.status} />
                     {/if}
                 </small>
-
             </div>
-
         </div>
     </div>
     {#if hasDelete}
         <div class="reference-action">
-            <button
-                    class="button"
-                    on:click={remove}
-            >
-                <Icon icon="trash-can"/>
+            <button class="button" on:click={remove}>
+                <Icon icon="trash-can" />
             </button>
         </div>
     {/if}
 </div>
-

front/js/svelte/setup/Index.svelte

@@ -1,20 +0,0 @@
-<script>
-    import Step from "./Step.svelte"
-
-    export let steps;
-    export let allSuccess = false;
-
-    console.log(steps);
-</script>
-<div class="wrapper-tiny">
-
-    {#each steps as step}
-        <Step {step}></Step>
-    {/each}
-
-    <div style="text-align: center;margin-top: 30px;">
-    {#if allSuccess}
-        <a href="/lucent/register" class="bt">Create the first user</a>
-    {/if}
-    </div>
-</div>

front/package.json

@@ -10,25 +10,24 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/state": "^6.4.1",
-        "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.3",
     "axios": "^1.7.4",
     "codemirror": "^6.0.1",
     "date-fns": "^3.6.0",
     "flatpickr": "^4.6.13",
     "fuse.js": "^7.0.0",
-        "htmx.org": "^2.0.1",
     "install": "^0.13.0",
-        "laravel-vite-plugin": "^1.0.5",
-        "lodash": "^4.17.21",
     "mustache": "^4.2.0",
     "npm": "^10.8.2",
     "postcss": "8.4.31",
     "sass": "^1.77.8",
     "sortablejs": "^1.15.2",
-        "svelte": "^4.2.18",
+    "svelte": "^5.46.1",
     "tinymce": "^6.8.4",
     "trix": "^2.1.5",
-        "uuid": "^10.0.0",
-        "vite": "5.2.6"
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "@hotwired/turbo": "^8.0.20"
   }
 }

front/views/auth/login.blade.php

@@ -9,7 +9,7 @@
             <div class="form">
                 <h2 class="mb-5">Enter Lucent</h2>
 
-                <form hx-post="/lucent/login" >
+                <form hx-post="{{config("lucent.url")}}/lucent/login" >
                     @csrf
                     <p>Submit your email address and you will receive a <b>login link</b> to your email</p>
                     <p>Don't forget to check your spam folder</p>

front/views/auth/verify.blade.php

@@ -9,7 +9,7 @@
             <div class="form">
                 <h2 class="mb-5">Welcome to Lucent</h2>
 
-                <form hx-post="/lucent/verify" hx-redirect="/lucent" hx-target-error=".form-errors" >
+                <form hx-post="{{config("lucent.url")}}/lucent/verify" hx-redirect="{{config("lucent.url")}}/lucent" hx-target-error=".form-errors" >
                     <input type="hidden" value="{{$email}}" name="email" />
                     <input type="hidden" value="{{$token}}" name="token" />
                     @csrf

front/views/layouts/account.blade.php

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>@yield('title') - Lucent Data Platform</title>
-
+    <meta name="htmx-config" content='{"selfRequestsOnly": false}' />
     @if(config("lucent.env") === "production")
         <!-- if production -->
         <link rel="stylesheet" href="{{url('vendor/lucent/dist/'.$manifest['main.js']["css"][0])}}"/>
@@ -20,7 +20,7 @@
     @endif
 
 
-    <link rel="icon" type="image/x-icon" href="{{url('favicon.ico'}}">
+    <link rel="icon" type="image/x-icon" href="{{url('favicon.ico')}}">
 
 </head>
 

front/views/layouts/channel.blade.php

@@ -18,7 +18,9 @@
         <script type="module" crossorigin src="http://127.0.0.1:5173/main.js"></script>
     @endif
 
-    <link rel="icon" type="image/x-icon" href="{{url('favicon.ico'}}">
+
+    <link rel="icon" type="image/x-icon" href="{{url('favicon.ico')}}">
+
 
 </head>
 

front/views/svelte.blade.php

@@ -1,7 +1,31 @@
-@extends('lucent::layouts.'.$layout)
-@section('title')
-    {{ $title }}
-@endsection
-@section('content')
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title> {{ $title }} - Lucent Data Platform</title>
+    @if(config("lucent.env") == "production")
+        <!-- if production -->
+        <link rel="stylesheet" href="{{url('vendor/lucent/dist/'.$manifest['main.js']["css"][0])}}"/>
+        <script type="module" src="{{url('vendor/lucent/dist/'.$manifest['main.js']["file"])}}"></script>
+    @else
+        <!-- if development -->
+        @php
+            echo '<script type="module" crossorigin src="http://127.0.0.1:5173/@vite/client"></script>';
+        @endphp
+        <script type="module" crossorigin src="http://127.0.0.1:5173/main.js"></script>
+    @endif
+
+
+    <link rel="icon" type="image/x-icon" href="{{url('favicon.ico')}}">
+
+
+</head>
+
+<body>
     {!! $svelte !!}
-@endsection
+</body>
+
+</html>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "lucent-package",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

src/ArrayContainer.php

@@ -10,9 +10,7 @@ use JsonSerializable;
  */
 class ArrayContainer implements ArrayAccess, JsonSerializable
 {
-    public function __construct(public array $data)
-    {
-    }
+    public function __construct(public array $data) {}
 
     public function get(string $key, mixed $default = null): mixed
     {

src/Commands/CompileSchemas.php

@@ -4,64 +4,53 @@ namespace Lucent\Commands;
 
 use DirectoryIterator;
 use Illuminate\Console\Command;
-use Lucent\Schema\Schema;
+use Lucent\Core\Schema\SchemaModule;
 use Lucent\Schema\SchemaService;
-use Lucent\Schema\Type;
+use Yosymfony\Toml\Toml;
 
 class CompileSchemas extends Command
 {
+    protected $signature = "lucent:schemas";
 
-    protected $signature = 'lucent:schemas';
-
-    protected $description = 'Compiles schemas';
-
+    protected $description = "Compiles schemas";
 
     public function handle(SchemaService $schemaService)
     {
-
-        $configDir = base_path(config('lucent.schemas_path'));
+        $configDir = base_path(config("lucent.schemas_path"));
         $schemasDirIterator = new DirectoryIterator($configDir);
         $schemas = [];
 
         foreach ($schemasDirIterator as $file) {
-            if ($file->getExtension() !== "json") {
+            if ($file->getExtension() !== "toml") {
                 continue;
             }
+            $schemaData = Toml::ParseFile(
+                $configDir . "/" . $file->getFilename(),
+            );
 
-            $schemaJson = file_get_contents($configDir . "/" . $file->getFilename());
-            $schema = json_decode($schemaJson, true);
-            if (empty($schema)) {
-                $this->error("Invalid JSON " . $file->getFilename());
-                return 0;
-            }
-            $schemas[] = $schema;
-
+            $schemas[] = $schemaData;
         }
 
-        $schemas = collect($schemas)->sortBy("label")->values();
-        $roles = $schemas
-            ->map([$schemaService, 'fromArray'])
-            ->whereIn("type", [Type::COLLECTION, Type::FILES])
-            ->reduce(fn($carry, Schema $schema) => array_merge(
-                    $carry,
-                    $schema->read,
-                    $schema->write,
-                    config("lucent.canInvite") ?? [],
-                    config("lucent.canBuild") ?? [],
-            ), []);
-
-        $json = [
-            "schemas" => $schemas->toArray(),
-            "roles" => collect($roles)->push("admin")->push("removed")->unique()->values()->toArray()
-        ];
-
+        $schemas = collect($schemas)
+            ->sortBy("label")
+            ->values()
+            ->map(function ($schemaData) {
+                $fields = [];
+                foreach ($schemaData["fields"] as $fieldId => $fieldData) {
+                    $fieldData["id"] = $fieldId;
+                    $fields[] = $fieldData;
+                }
+                $schemaData["fields"] = $fields;
+                return $schemaData;
+            })
+            ->map(SchemaModule::fromArray(...));
+        dd($schemas);
         if (!file_exists(storage_path("lucent"))) {
             mkdir(storage_path("lucent"));
         }
 
-        file_put_contents(schemas_path(), json_encode($json));
+        file_put_contents(schemas_path(), json_encode($schemas));
 
         $this->info("Lucent Schemas were updated");
     }
-
 }

src/Commands/DeveloperMode.php

@@ -0,0 +1,84 @@
+<?php
+
+namespace Lucent\Commands;
+
+use Illuminate\Console\Command;
+
+class DeveloperMode extends Command
+{
+    protected $signature = "lucent:developer {enable} {path}";
+    protected $description = "Change composer.json to enable or disable the developer repository";
+
+    public function handle(): void
+    {
+        $enable = $this->argument("enable") === "enable";
+        $path = $this->argument("path");
+
+        if ($enable) {
+            $this->enable($path);
+        } else {
+            $this->disable($path);
+        }
+    }
+
+    private function getComposerJson(): array
+    {
+        return json_decode(file_get_contents(base_path("composer.json")), true);
+    }
+
+    private function replaceComposerJson(array $composerJson): void
+    {
+        file_put_contents(
+            base_path("composer.json"),
+            json_encode(
+                $composerJson,
+                JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES,
+            ),
+        );
+    }
+
+    private function enable(string $path): void
+    {
+        $productionRepo = $this->productionRepository();
+        $composerJson = $this->getComposerJson();
+        $composerJson["repositories"] = array_filter(
+            $composerJson["repositories"],
+            fn($repo) => $repo["url"] !== $productionRepo["url"],
+        );
+
+        $composerJson["repositories"][] = $this->devRepository($path);
+        $this->replaceComposerJson($composerJson);
+    }
+
+    private function disable(string $path): void
+    {
+        $devRepo = $this->devRepository($path);
+        $composerJson = $this->getComposerJson();
+        $composerJson["repositories"] = array_filter(
+            $composerJson["repositories"],
+            fn($repo) => $repo["url"] !== $devRepo["url"],
+        );
+        $composerJson["repositories"][] = $this->productionRepository();
+        $this->replaceComposerJson($composerJson);
+    }
+
+    private function productionRepository(): array
+    {
+        return [
+            "type" => "vcs",
+            "url" =>
+                "ssh://git@code.radical-elements.com:2727/lucent/lucent-laravel.git",
+        ];
+    }
+
+    private function devRepository(string $localPath): array
+    {
+        return [
+            "type" => "path",
+            "url" => $localPath,
+            "options" => [
+                "symlink" => true,
+            ],
+        ];
+    }
+}

src/Commands/RebuildThumbnails.php

@@ -41,11 +41,17 @@ class RebuildThumbnails extends Command
 
     public function rebuildThumbnails(FilesSchema $schema): void
     {
+
         $this->info("Rebuilding thumbnails for ". $schema->name);
-        $records = $this->query->filter(["schema" => $schema->name])->run()->records;
+        $records = $this->query->limit(0)->filter(["schema" => $schema->name])->run()->records;
         $disk = $this->fileService->loadDisk($schema->disk);
         foreach ($records as $record) {
+            try{
+
                 $this->fileService->createTemplates($disk, $record->_file->path);
+            } catch (Exception $e) {
+                echo "File ". $record->_file->originalName . " could not be rebuilt \n" ;
+            }
         }
     }
 

src/Core/Auth/AuthModule.php

@@ -0,0 +1,40 @@
+<?php namespace Lucent\Core\Auth;
+
+use Illuminate\Support\Facades\Session;
+use Lucent\Core\Repository\UserRepo;
+use Lucent\LucentException;
+
+class AuthModule
+{
+    public static function getCurrentUserId(): ?string
+    {
+        if (app()->runningInConsole()) {
+            return config("lucent.systemUserId");
+        } elseif (request()->segment(1) !== "lucent") {
+            return config("lucent.systemUserId");
+        } else {
+            return Session::get("user.id");
+        }
+    }
+
+    public static function isLoggedIn(): bool
+    {
+        return !empty(static::getCurrentUserId());
+    }
+
+    public static function refreshSession()
+    {
+        $user = UserRepo::findById(static::getCurrentUserId());
+
+        if (empty($user)) {
+            throw new LucentException("Your account was not found");
+        }
+
+        // @todo
+        // if ($user->get()->isRemoved()) {
+        //     throw new LucentException("Your account is not active");
+        // }
+
+        Session::put(["user" => toArray($user)]);
+    }
+}

src/Core/Channel/ChannelModule.php

@@ -0,0 +1,17 @@
+<?php namespace Lucent\Core\Channel;
+
+use Lucent\Core\Data\Channel;
+
+class ChannelModule
+{
+    public static function get(): Channel
+    {
+        $appUrl = rtrim(config("lucent.url") ?? "", "/");
+        return new Channel(
+            name: config("lucent.name"),
+            locales: config("lucent.locales") ?? [],
+            url: $appUrl,
+            lucentUrl: $appUrl . "/lucent",
+        );
+    }
+}

src/Core/Data/Channel.php

@@ -0,0 +1,11 @@
+<?php namespace Lucent\Core\Data;
+
+class Channel
+{
+    public function __construct(
+        public string $name,
+        public array $locales,
+        public string $url,
+        public string $lucentUrl,
+    ) {}
+}

src/Core/Data/Edge.php

@@ -0,0 +1,14 @@
+<?php namespace Lucent\Core\Data;
+use Lucent\Core\Data\RecordMode;
+class Edge
+{
+    public function __construct(
+        public string $id,
+        public string $locale,
+        public RecordMode $mode,
+        public string $from,
+        public string $to,
+        public string $fieldId,
+        public int $rank,
+    ) {}
+}

src/Core/Data/EdgeRecordPreview.php

@@ -0,0 +1,9 @@
+<?php namespace Lucent\Core\Data;
+
+class EdgeRecordPreview
+{
+    public function __construct(
+        public Edge $edge,
+        public RecordPreview $recordPreview,
+    ) {}
+}

src/Core/Data/File.php

@@ -0,0 +1,16 @@
+<?php namespace Lucent\Core\Data;
+
+class File
+{
+    public function __construct(
+        public string $id,
+        public string $name,
+        public int $size,
+        public int $width,
+        public int $height,
+        public string $mime,
+        public string $checksum,
+        public ?string $recordId,
+        public bool $isShared,
+    ) {}
+}