playing with extensible fields

UPGRADE.md

@@ -1,32 +0,0 @@
-# Upgrade from 1.1.* to 1.2.0
-
-## lucent.php config file
-
-There is now an array of commands, accepting more than one.
-
-from
-```php
-"generateCommand" => env("LUCENT_GENERATE_COMMAND",  "generate:static"),
-```
-
-to
-```php
-"commands" => [
-    "generate:static" => "Build Website",
-],
-```
-## config/filesystems.php
-
-Lucent has its own filesystem. 
-
-You should now add:
-
-```
-'lucent' => [
-    'driver' => 'local',
-    'root' => storage_path('app/public'),
-    'url' => env('APP_URL').'/storage',
-    'visibility' => 'public',
-    'throw' => false,
-],
-```

composer.json

@@ -10,16 +10,15 @@
         "ext-imagick": "*",
         "ext-pdo": "*",
         "php": "^8.3",
-        "guzzlehttp/guzzle": "^7.2",
-        "intervention/image": "^2.7",
         "phpoption/phpoption": "^1.9",
         "spatie/image-optimizer": "^1.6",
-        "staudenmeir/laravel-cte": "^1.0"
-
+        "staudenmeir/laravel-cte": "^1.10",
+        "intervention/image": "^3.8",
+        "guzzlehttp/guzzle": "^7.9"
     },
     "require-dev": {
-        "phpstan/phpstan": "^1.8",
-        "laravel/framework": "^10.10"
+        "laravel/framework": "^10.48",
+        "phpstan/phpstan": "^1.12"
     },
     "autoload": {
         "psr-4": {

config/lucent.php

@@ -0,0 +1,24 @@
+<?php
+
+return [
+    "env" => env("LUCENT_ENV", "production"),
+    "schemas_path" => env("LUCENT_SCHEMAS_PATH", "resources/lucent/schemas"),
+    "image_filters_path" => "app/Filters",
+    "database" => env('LUCENT_DB_CONNECTION', env('DB_CONNECTION', "sqlite")),
+    "name" => env("LUCENT_NAME", "Stoic"),
+    "url" => env("LUCENT_URL", env('APP_URL')),
+    "preview_target" => env("LUCENT_PREVIEW_TARGET", "previewTarget"),
+    /*
+     * Make available laravel artisan commands for admin users
+     * example:
+     * [
+     *   "command1:signature" => "Description 1"
+     *   "command2:signature" => "Description 2"
+     * ]
+     *
+     * */
+    "commands" => [],
+    "can_invite" => ["admin"],
+    "can_run_commands" => ["admin"],
+    "system_user_id" => ""
+];

front/dist/manifest.json

@@ -1,11 +1,11 @@
 {
   "main.js": {
-    "file": "assets/main-BJyanQ7P.js",
+    "file": "assets/main-C4XTQmaY.js",
     "name": "main",
     "src": "main.js",
     "isEntry": true,
     "css": [
-      "assets/main-Dk7njt4m.css"
+      "assets/main-BJijircB.css"
     ]
   }
 }

front/js/debounce.js

@@ -0,0 +1,11 @@
+export function  debounce(callback, wait) {
+    let timeoutId = null;
+
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}

front/js/helpers.js

@@ -1,4 +1,4 @@
-import {formatDistanceToNow, parseJSON, format, parse} from "date-fns";
+import {format, formatDistanceToNow, parseJSON} from "date-fns";
 
 export function friendlyDate(date) {
     return formatDistanceToNow(parseJSON(date), {addSuffix: true});
@@ -50,3 +50,19 @@ export function clickOutside(node) {
     }
 }
 
+export function uniqueBy(list, callback) {
+    const itemMap = list.reduce((c, item) => {
+        c[callback(item)] = item;
+        return c;
+    }, {});
+
+    return Object.values(itemMap);
+}
+
+export function range(start, end) {
+    var ans = [];
+    for (let i = start; i <= end; i++) {
+        ans.push(i);
+    }
+    return ans;
+}

front/js/main.js

@@ -1,5 +1,4 @@
 import {axiosInstance} from "./bootstrap";
-import "../sass/app.scss";
 import Account from "./svelte/Account.svelte";
 import Channel from "./svelte/Channel.svelte";
 import Mustache from "mustache";

front/js/svelte/Account.svelte

@@ -3,7 +3,6 @@
     import Login from "./account/Login.svelte";
     import Verify from "./account/Verify.svelte";
     import Profile from "./account/Profile.svelte";
-    import SetupIndex from "./setup/Index.svelte";
     import {setContext} from "svelte";
 
     const components = {
@@ -11,7 +10,6 @@
         login: Login,
         verify: Verify,
         profile: Profile,
-        setup: SetupIndex,
     };
 
     export let title;

front/js/svelte/account/Login.svelte

@@ -1,6 +1,7 @@
 <script>
     import {getContext} from "svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
+    import axios from "axios";
 
     const channel = getContext("channel");
     let email = "";
@@ -14,7 +15,6 @@
                 email: email,
             })
             .then((response) => {
-                console.log(response)
                 message = "You will receive an email with a login link"
             })
             .catch((error) => {

front/js/svelte/account/Profile.svelte

@@ -4,6 +4,7 @@
     import Avatar from "./Avatar.svelte";
     import {getContext} from "svelte";
     import SuccessAlert from "../common/SuccessAlert.svelte";
+    import axios from "axios";
 
     const user = getContext("user");
     const channel = getContext("channel");
@@ -25,7 +26,6 @@
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({errorMessage});
             });
     }
 
@@ -42,7 +42,6 @@
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({errorMessage});
             });
     }
 </script>

front/js/svelte/build/Report.svelte

@@ -22,7 +22,6 @@
             anchorEl.scrollIntoView()
         }
         eventSource.onerror = (e) => {
-            console.log(e)
             eventSource.close();
             inProgress = false;
         }

front/js/svelte/common/Icon.svelte

@@ -124,10 +124,17 @@
         "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",
+        },
+        "undo": {
+            path: '<path fill-rule="evenodd" clip-rule="evenodd" d="M7.53033 3.46967C7.82322 3.76256 7.82322 4.23744 7.53033 4.53033L5.81066 6.25H15C18.1756 6.25 20.75 8.82436 20.75 12C20.75 15.1756 18.1756 17.75 15 17.75H8.00001C7.58579 17.75 7.25001 17.4142 7.25001 17C7.25001 16.5858 7.58579 16.25 8.00001 16.25H15C17.3472 16.25 19.25 14.3472 19.25 12C19.25 9.65279 17.3472 7.75 15 7.75H5.81066L7.53033 9.46967C7.82322 9.76256 7.82322 10.2374 7.53033 10.5303C7.23744 10.8232 6.76256 10.8232 6.46967 10.5303L3.46967 7.53033C3.17678 7.23744 3.17678 6.76256 3.46967 6.46967L6.46967 3.46967C6.76256 3.17678 7.23744 3.17678 7.53033 3.46967Z" fill="#1C274C"/>',
+            viewBox: "0 0 24 24",
+        },
+        "destroy": {
+            path: '<path d="M17 7L15 9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/><path d="M19.5 7.5L20.5 8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/><path d="M16 3.5L16.5 4.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/><path d="M19 5L20 4" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/><path\n'+'        d="M5.75 8.00337C6.85315 7.36523 8.13392 7 9.5 7C13.6421 7 17 10.3579 17 14.5C17 18.6421 13.6421 22 9.5 22C5.35786 22 2 18.6421 2 14.5C2 13.1339 2.36523 11.8532 3.00337 10.75" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>',
+            viewBox: "0 0 24 24",
         }
     };
 
-
     export let width = 16;
     export let height = 16;
     export let icon = "";

front/js/svelte/content/ActionsOnSelected.svelte

@@ -1,5 +1,6 @@
 <script>
     import {getContext} from "svelte";
+    import axios from "axios";
 
     const channel = getContext("channel");
     export let selected;
@@ -16,7 +17,7 @@
                 window.location.reload();
             })
             .catch((error) => {
-                console.log(error);
+                console.error(error);
             });
     }
 
@@ -24,13 +25,13 @@
         axios
             .post(channel.lucentUrl + "/records/status/" + status, {
                 schemaName: schema.name,
-                records: selected
+                records:  selected.map((s) => s.id),
             })
             .then((response) => {
                 window.location.reload();
             })
             .catch((error) => {
-                console.log(error);
+                console.error(error);
             });
     }
 </script>
@@ -50,20 +51,6 @@
     </button
     >
     {#if filter["status_in"] === "trashed"}
-        <button
-                on:click|preventDefault={(e) => changeStatus(e, "published")}
-                type="button"
-                class="button">Publish
-        </button
-        >
-        {#if schema.hasDrafts}
-            <button
-                    on:click|preventDefault={(e) => changeStatus(e, "draft")}
-                    type="button"
-                    class="button">Make Draft
-            </button
-            >
-        {/if}
         <button
                 on:click|preventDefault={deleteRecords}
                 type="button"

front/js/svelte/content/RenderField.svelte

@@ -6,11 +6,9 @@
     import Number from "./elements/Number.svelte";
 
     import Text from "./elements/Text.svelte";
-    import Url from "./elements/Url.svelte";
     import Date from "./elements/Date.svelte";
     import Datetime from "./elements/Datetime.svelte";
     import File from "./elements/File.svelte";
-    import Uuid from "./elements/UUID.svelte";
     import Rich from "./elements/Rich.svelte";
 
     const renderElements = {
@@ -22,10 +20,8 @@
         checkbox: Checkbox,
         reference: Reference,
         number: Number,
-        url: Url,
         date: Date,
         datetime: Datetime,
-        uuid: Uuid,
         file: File,
     };
     export let field;

front/js/svelte/content/elements/UUID.svelte

@@ -1,10 +0,0 @@
-<script>
-    export let value;
-</script>
-<span
-class="badge rounded-pill bg-primary bg-opacity-75"
-style="max-width:64px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;"
-title={value}
-data-bs-toggle="tooltip"
->{value}</span
->

front/js/svelte/content/elements/Url.svelte

@@ -1,5 +0,0 @@
-<script>
-    export let value;
-</script>
-
-<a href={value} target="_blank">{value}</a>

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

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

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

@@ -1,8 +1,8 @@
 <script>
     import {createEventDispatcher, getContext} from "svelte";
-    import {debounce} from "lodash";
+    import {debounce} from "../../../debounce.js";
     import {previewTitle} from "../../records/Preview";
-
+    import axios from "axios";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();

front/js/svelte/edges/sortEdges.js

@@ -5,7 +5,7 @@ export function sortByField(from, to, edges, fieldName, references) {
     if (from === to) {
         return edges;
     }
-    let referenceIds = references.map(r => r.id);
+    let referenceIds = references.map(r => r.record.id);
     let edgesTosort = edges?.filter((ed) => ed.field === fieldName && ed.depth === 1 && referenceIds.includes(ed.target)) ?? [];
     let remainingEdge = edges?.filter((ed) => !(ed.field === fieldName && ed.depth === 1)) ?? [];
 

front/js/svelte/files/imageserver.js

@@ -2,7 +2,8 @@ export function imgurl(channel, record) {
     if (record._file.mime === "image/svg+xml") {
         return fileurl(channel, record);
     }
-    return channel.disks[record._file.disk] + `/thumbs/${record._file.path}`;
+    const pathAr = record._file.path.split("/");
+    return channel.disks[record._file.disk] + `/${pathAr[0]}/thumbs/${pathAr[1]}`;
 }
 
 export function fileurl(channel, record) {
@@ -17,7 +18,8 @@ export function htmlurl(channel, record, preset) {
     if (record._file.width > 0) {
         let presetUrl = url;
         if (preset) {
-            presetUrl = channel.disks[record._file.disk] + `/templates/${preset}/${record._file.path}`;
+            const pathAr = record._file.path.split("/");
+            presetUrl = channel.disks[record._file.disk] + `/${pathAr[0]}/templates/${preset}/${pathAr[1]}`;
         }
         html = `<img src="${presetUrl}" alt="${record._file.path}" />`
     } else if (record._file.mime === "image/svg+xml") {

front/js/svelte/layout/Folder.svelte

@@ -0,0 +1,39 @@
+<script>
+    import {getContext} from "svelte";
+    import Icon from "../common/Icon.svelte";
+    import Folder from "./Folder.svelte";
+
+    const channel = getContext("channel");
+    export let folder;
+    export let schema;
+    export let expanded = folder.shouldExpand;
+
+    function toggleExpand() {
+        expanded = !expanded;
+    }
+</script>
+<div class="sidebar-folder">
+    {#if folder.name !== ""}
+        <button class="sidebar-header" tabindex="0" on:click={toggleExpand}>
+            {folder.name.replaceAll("_", " ") ?? "Main"}
+            {#if expanded}
+                <Icon icon="circle-chevron-up"></Icon>
+            {:else}
+                <Icon icon="circle-chevron-down"></Icon>
+            {/if}
+        </button>
+    {/if}
+    {#if expanded}
+        {#each folder.folders as aFolder}
+            <Folder folder={aFolder} schema={schema}></Folder>
+        {/each}
+
+        {#each folder.files as aSchema}
+            <a class="sidebar-item" class:active={aSchema.name === schema?.name}
+               aria-current="page"
+               href="{channel.lucentUrl}/content/{aSchema.name}">{aSchema.label}</a>
+        {/each}
+
+
+    {/if}
+</div>

front/js/svelte/layout/Header.svelte

@@ -5,7 +5,6 @@
 
     const channel = getContext("channel");
     const user = getContext("user");
-    console.log( channel.commands)
 </script>
 
 
@@ -21,12 +20,7 @@
         </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>

front/js/svelte/layout/Navbar.svelte

@@ -1,14 +1,39 @@
 <script>
-    import NavbarMenu from "./NavbarMenu.svelte";
     import {getContext} from "svelte";
+    import Folder from "./Folder.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");
+    function addToFolder(tree, folderPath, aSchema) {
+        let shouldExpand = aSchema.name === schema?.name;
+        if (folderPath === "") {
+            tree.files.push(aSchema)
+            return tree
+        }
+        const folderNames = folderPath.split(".");
+        folderNames.forEach(folderName => {
+            let queriedFolder = tree.folders.find(folder => folder.name === folderName)
+            if (!queriedFolder) {
+                queriedFolder = {name: folderName, files: [], folders: [], shouldExpand: shouldExpand};
+            }
+            folderNames.shift()
+            let remainingFolderPath = folderNames.join(".");
+            queriedFolder =  addToFolder(queriedFolder, remainingFolderPath, aSchema)
 
+            tree.folders = tree.folders.filter(f => f.name !== queriedFolder.name)
+            tree.folders.push(queriedFolder);
+
+        })
+
+        return tree;
+    }
+
+    const schemaTree = readableSchemas.reduce((carry, schema) => {
+        carry = addToFolder(carry, schema.folder,schema)
+        return carry;
+    }, {name: "", files: [], folders: [], shouldExpand:true});
 </script>
 <div class="sidebar-top">
     <a class="logo" href="{channel.lucentUrl}">{channel.name}</a>
@@ -16,24 +41,5 @@
     </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}
-    />
+    <Folder folder={schemaTree} {schema}  ></Folder>
 </div>

front/js/svelte/layout/NavbarMenu.svelte

@@ -1,34 +0,0 @@
-<script>
-    import {getContext} from "svelte";
-    import Icon from "../common/Icon.svelte";
-
-    const channel = getContext("channel");
-    export let schemas;
-    export let title;
-    export let schema;
-    export let expanded = false;
-
-    if(schemas.find(s => s.name === schema?.name)){
-        expanded = true;
-    }
-
-    function toggleExpand(){
-        expanded = !expanded;
-    }
-</script>
-
-<button class="sidebar-header"  tabindex="0" on:click={toggleExpand}>
-    {title}
-    {#if expanded}
-        <Icon icon="circle-chevron-up"></Icon>
-    {:else}
-        <Icon icon="circle-chevron-down"></Icon>
-    {/if}
-</button>
-{#if expanded}
-    {#each schemas as aschema}
-        <a class="sidebar-item" class:active={aschema.name === schema?.name}
-           aria-current="page"
-           href="{channel.lucentUrl}/content/{aschema.name}">{aschema.label}</a>
-    {/each}
-{/if}

front/js/svelte/libs/TipTap.svelte

@@ -1,174 +0,0 @@
-<script>
-    import {onDestroy, onMount} from 'svelte';
-    import {Editor} from '@tiptap/core'
-    import Document from '@tiptap/extension-document'
-    import Paragraph from '@tiptap/extension-paragraph'
-    import Dropcursor from '@tiptap/extension-dropcursor'
-    import Text from '@tiptap/extension-text'
-    import Heading from '@tiptap/extension-heading'
-    import HardBreak from '@tiptap/extension-hard-break'
-    import Blockquote from '@tiptap/extension-blockquote';
-    import CodeBlock from '@tiptap/extension-code-block';
-    import Bold from '@tiptap/extension-bold';
-    import BulletList from '@tiptap/extension-bullet-list';
-    import Code from '@tiptap/extension-code';
-    import History from '@tiptap/extension-history';
-    import Italic from '@tiptap/extension-italic';
-    import ListItem from '@tiptap/extension-list-item';
-    import OrderedList from '@tiptap/extension-ordered-list';
-    import Strike from '@tiptap/extension-strike';
-    import Table from '@tiptap/extension-table';
-    import TableRow from '@tiptap/extension-table-row';
-    import TableCell from '@tiptap/extension-table-cell';
-    import TableHeader from '@tiptap/extension-table-header';
-    import Underline from '@tiptap/extension-underline';
-    import Image from '@tiptap/extension-image';
-    import Icon from "../common/Icon.svelte";
-
-    let element;
-    let editor;
-    export let value = "";
-
-    onMount(() => {
-        editor = new Editor({
-            element: element,
-            extensions: [
-                Document,
-                Paragraph,
-                Text,
-                Bold,
-                ListItem,
-                BulletList,
-                Code,
-                CodeBlock,
-                History,
-                Italic,
-                HardBreak,
-                OrderedList,
-                Strike,
-                Table,
-                TableRow,
-                TableCell,
-                TableHeader,
-                Underline,
-                Dropcursor,
-                Image,
-                Heading.configure({
-                    levels: [1, 2, 3],
-                }),
-                Blockquote
-            ],
-            content: value,
-            editable: true,
-            onTransaction: () => {
-                // force re-render so `editor.isActive` works as expected
-                editor = editor;
-            },
-            onUpdate: ({editor}) => {
-                value = editor.getHTML()
-            },
-        });
-
-    });
-
-    onDestroy(() => {
-        if (editor) {
-            editor.destroy();
-        }
-    });
-
-    export function insertMedia(info){
-        editor.chain().focus().setImage({ src: info.url }).run()
-    }
-</script>
-
-{#if editor}
-    <div class="editor-toolbar">
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-                class:active={editor.isActive('heading', { level: 1 })}
-        >
-            H1
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-                class:active={editor.isActive('heading', { level: 2 })}
-        >
-            H2
-        </button>
-
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleBold().run()}
-                class:active={editor.isActive('bold')}
-        >
-            B
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleItalic().run()}
-                class:active={editor.isActive('italic')}
-        >
-            <em>IT</em>
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleUnderline().run()}
-                class:active={editor.isActive('underline')}
-        >
-            <u>U</u>
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleStrike().run()}
-                class:active={editor.isActive('strike')}
-        >
-            <s>S</s>
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.commands.unsetAllMarks()}
-        >
-            Clear
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleCode().run()}
-                class:active={editor.isActive('code')}
-        >
-            Code
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleBulletList().run()}
-                class:active={editor.isActive('bulletList')}
-        >
-            <Icon icon="list"></Icon>
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleOrderedList().run()}
-                class:active={editor.isActive('orderedList')}
-        >
-            <Icon icon="ordered-list"></Icon>
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleBlockquote().run()}
-                class:active={editor.isActive('blockquote')}
-        >
-            ""
-        </button>
-        <button
-                class="button"
-                on:click={() => editor.chain().focus().toggleCodeBlock().run()}
-                class:active={editor.isActive('codeBlock')}
-        >
-            cb
-        </button>
-    </div>
-{/if}
-
-<div bind:this={element} class="content"/>

front/js/svelte/libs/Trix.svelte

@@ -1,7 +1,6 @@
 <script>
     import {onDestroy, onMount} from "svelte";
     import Trix from "trix"
-    import "trix/dist/trix.css"
 
     export let value = "";
     export let field;

front/js/svelte/members/MemberSettingsCard.svelte

@@ -22,9 +22,6 @@
         e.preventDefault();
 
         let newRoles = [...member.roles, aRole];
-        console.log(member.roles)
-        console.log(aRole)
-        console.log(newRoles)
         dispatch("update", {
             user: member.id,
             roles: newRoles,

front/js/svelte/records/Edit.svelte

@@ -1,6 +1,5 @@
 <script>
     import {afterUpdate, getContext, onMount} from "svelte";
-    import {isEqual} from "lodash";
     import axios from "axios";
     import EditHeader from "./header/EditHeader.svelte"
     import FilePreview from "./FilePreview.svelte"
@@ -10,6 +9,7 @@
     import Info from "./Info.svelte"
     import ErrorAlert from "../common/ErrorAlert.svelte"
     import Title from "./header/Title.svelte";
+    import {hasDataChanged} from "./editor.js";
 
     const channel = getContext("channel");
 
@@ -74,10 +74,7 @@
     }
 
     function checkUnsavedData() {
-        if (isCreateMode) {
-            return false;
-        }
-        return !isEqual(originalContent, {
+        return hasDataChanged(isCreateMode,originalContent,{
             data: record.data,
             schema: record.schema,
             status: record.status,

front/js/svelte/records/FormField.svelte

@@ -5,9 +5,7 @@
     import Color from "./elements/Color.svelte";
     import Checkbox from "./elements/Checkbox.svelte";
     import Number from "./elements/Number.svelte";
-    import Url from "./elements/Url.svelte";
     import Date from "./elements/Date.svelte";
-    import UUID from "./elements/UUID.svelte";
     import File from "./elements/File.svelte";
     import Textarea from "./elements/Textarea.svelte";
     import Datetime from "./elements/Datetime.svelte";
@@ -25,10 +23,8 @@
         color: Color,
         checkbox: Checkbox,
         number: Number,
-        url: Url,
         date: Date,
         datetime: Datetime,
-        uuid: UUID,
         json: Json,
         markdown: Markdown,
     };

front/js/svelte/records/Graph.svelte

@@ -13,14 +13,16 @@
     }
 
     let backlinks = graph.parentEdges.map(edge => {
-        let schema = channel.schemas.find((s) => s.name === edge.sourceSchema);
+        const parentRecord = graph.records.find( record => record.id === edge.source);
+
+        let schema = channel.schemas.find((s) => s.name === parentRecord.schema);
         let edgeField =  findEdgeField(schema,edge.field);
         if(!edgeField){
             return null;
         }
         return {
             field: edgeField.label,
-            record: graph.records.find( record => record.id === edge.source)
+            record: parentRecord
         }
     }).filter( edgeOrNull => !!edgeOrNull)
 </script>

front/js/svelte/records/Info.svelte

@@ -2,11 +2,12 @@
     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 RevisionCell from "./revisions/RevisionCell.svelte";
     import {getContext} from "svelte";
     import RevisionEdgeRow from "./revisions/RevisionEdgeRow.svelte";
+    import axios from "axios";
+    import {hasDataChanged} from "./editor.js";
 
     const channel = getContext("channel");
     export let record;
@@ -60,7 +61,7 @@
         selectedRevision = revision;
 
         fieldsWithDiff = schema.fields.filter((f) => {
-            return !isEqual(selectedRevision.data[f.name], record.data[f.name]);
+            return hasDataChanged(false,selectedRevision.data[f.name], record.data[f.name]);
         });
         getEdgesByField(fieldsWithDiff, revision)
         revisionSection.scrollIntoView();

front/js/svelte/records/InlineEdit.svelte

@@ -1,7 +1,6 @@
 <script>
     import {afterUpdate, createEventDispatcher, getContext, onMount} from "svelte";
-
-    import {isEqual} from "lodash";
+    import {hasDataChanged} from "./editor.js";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
     import ContentTabs from "./header/ContentTabs.svelte";
@@ -80,10 +79,7 @@
     }
 
     function checkUnsavedData() {
-        if (isCreateMode) {
-            return false;
-        }
-        return !isEqual(originalContent, {
+        return hasDataChanged(isCreateMode, originalContent, {
             data: record.data,
             schema: record.schema,
             status: record.status,

front/js/svelte/records/editor.js

@@ -0,0 +1,6 @@
+export function hasDataChanged(isCreateMode, originalContent, newContent){
+    if (isCreateMode) {
+        return false;
+    }
+    return JSON.stringify(originalContent) !== JSON.stringify(newContent);
+}

front/js/svelte/records/elements/Date.svelte

@@ -1,8 +1,6 @@
 <script>
     import {onMount} from "svelte";
     import flatpickr from "flatpickr";
-    import "flatpickr/dist/flatpickr.css";
-    import "flatpickr/dist/themes/light.css";
     import {getErrorMessage} from "./errorMessage";
 
     export let field;

front/js/svelte/records/elements/Datetime.svelte

@@ -1,8 +1,6 @@
 <script>
     import {onMount} from "svelte";
     import flatpickr from "flatpickr";
-    import "flatpickr/dist/flatpickr.css";
-    import "flatpickr/dist/themes/light.css";
     import {getErrorMessage} from "./errorMessage";
 
     export let field;

front/js/svelte/records/elements/File.svelte

@@ -4,7 +4,13 @@
     import PreviewFile from "../previews/PreviewFile.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
-    import {insertEdges} from "./reference.js";
+    import {
+        fullDeleteRecord,
+        graphToReferences,
+        insertEdges,
+        removeReferenceFromGraph,
+        restoreReferenceToGraph
+    } from "./reference.js";
     import {getContext} from "svelte";
 
     const channel = getContext("channel");
@@ -12,11 +18,7 @@
     export let record;
     export let graph
     let browseModal;
-    $: 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)) ?? [];
+    $: references = graphToReferences(graph, record, field)
 
     let collections = channel.schemas.filter((aschema) =>
         field.collections.includes(aschema.name)
@@ -24,9 +26,17 @@
 
     function removeReference(e) {
         e.preventDefault();
-        graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name)
-        );
+        graph.edges = removeReferenceFromGraph(graph, field, e.detail)
+    }
+
+    function restoreReference(e) {
+        e.preventDefault();
+        graph.edges = restoreReferenceToGraph(graph, field, e.detail)
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        graph.edges = fullDeleteRecord(channel,graph, field, e.detail)
     }
 
     function openBrowseModal(e, schema) {
@@ -73,10 +83,17 @@
 </div>
 {#if references.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>
-        {#each references as reference (reference.id)}
+        {#each references as reference (reference.record.id)}
             <!--This div helps the sorting thing-->
             <div>
-                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+                <PreviewFile
+                        record={reference.record}
+                        edge={reference.edge}
+                        hasDelete={true}
+                        on:remove={removeReference}
+                        on:restore={restoreReference}
+                        on:fulldelete={fullDelete}
+                ></PreviewFile>
             </div>
         {/each}
     </Sortable>

front/js/svelte/records/elements/Reference.svelte

@@ -1,12 +1,17 @@
 <script>
     import {getContext} from "svelte";
-    import {insertEdges} from "./reference";
+    import {
+        fullDeleteRecord,
+        graphToReferences,
+        insertEdges,
+        removeReferenceFromGraph,
+        restoreReferenceToGraph
+    } from "./reference";
     import {getErrorMessage} from "./errorMessage";
     import {sortByField} from "../../edges/sortEdges";
     import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte";
     import Sortable from "../../libs/Sortable.svelte";
     import PreviewReference from "../previews/PreviewReference.svelte";
-    import axios from "axios";
 
     const channel = getContext("channel");
     export let record;
@@ -16,11 +21,7 @@
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
 
-    $: 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)) ?? [];
+    $: references = graphToReferences(graph,record,field)
 
     let collections = channel.schemas.filter((aschema) =>
         field.collections.includes(aschema.name)
@@ -28,27 +29,25 @@
 
     function removeReference(e) {
         e.preventDefault();
-        graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name)
-        );
+        graph.edges = removeReferenceFromGraph(graph,field,e.detail)
+    }
+
+    function restoreReference(e) {
+        e.preventDefault();
+        graph.edges = restoreReferenceToGraph(graph,field,e.detail)
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        graph.edges = fullDeleteRecord(channel,graph, field, e.detail)
     }
 
     function reorder(e) {
-
         graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, field.name, references);
     }
 
     function insert(e) {
         e.preventDefault();
-        // axios.post(channel.lucentUrl + "/edges/insert-many", {
-        //     source: record.id,
-        //     sourceSchema: record.schema,
-        //     targetSchema: e.detail.schema,
-        //     field: field.name,
-        //     targets: e.detail.records.map(r => r.id),
-        // }).then(function (response) {
-        //     graph = response.data.graph;
-        // })
         graph = insertEdges(graph, record, e.detail.records, field.name, e.detail.action);
     }
 
@@ -69,13 +68,16 @@
 </div>
 {#if references.length > 0}
     <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
-        {#each references as reference (reference.id)}
+        {#each references as reference (reference.record.id)}
             <div>
                 <PreviewReference
                         {graph}
-                        record={reference}
+                        record={reference.record}
+                        edge={reference.edge}
                         hasDelete={true}
                         on:remove={removeReference}
+                        on:restore={restoreReference}
+                        on:fulldelete={fullDelete}
                 />
             </div>
         {/each}

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

@@ -1,10 +1,11 @@
 <script>
     import {getContext} from "svelte";
-    import {debounce} from "lodash";
+    import {debounce} from "../../../debounce.js";
     import {previewTitle} from "../Preview";
     import {getErrorMessage} from "./errorMessage";
     import {insertEdges} from "./reference.js";
     import Icon from "../../common/Icon.svelte";
+    import axios from "axios";
 
     const channel = getContext("channel");
     export let field;
@@ -18,7 +19,7 @@
     $: references = graph.edges
         .filter((edge) => edge.field === field.name)
         .map((edge) => {
-            return graph.records.find((increc) => increc.id == edge.target && record.id == edge.source);
+            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
         }).filter((rec) => (rec?.id ? true : false)) ?? [];
 
     let search = ""
@@ -48,11 +49,9 @@
             .then((response) => {
                 searchOptions = [];
                 insert(e, response.data.records[0]);
-                console.log(response)
             })
             .catch((error) => {
                 searchOptions = [];
-                console.log(error);
             });
     }
 
@@ -79,7 +78,6 @@
             })
             .catch((error) => {
                 searchOptions = [];
-                console.log(error);
             });
     }, 500);
 

front/js/svelte/records/elements/RichEditor.svelte

@@ -1,5 +1,4 @@
 <script>
-    import Tinymce from "../../libs/Tinymce.svelte";
     import RichEditorFiles from "./RichEditorFiles.svelte";
     import {getErrorMessage} from "./errorMessage";
     import Trix from "../../libs/Trix.svelte";
@@ -26,7 +25,6 @@
 <div class="mb-0">
 
     <Trix {field} bind:this={editor} bind:value></Trix>
-<!--    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>-->
     {#if field.collections.length > 0}
         <RichEditorFiles
                 bind:graph

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

@@ -1,49 +0,0 @@
-<script>
-    import { v4 as uuidv4 } from "uuid";
-    import { getContext } from "svelte";
-    import Icon from "../../common/Icon.svelte";
-    import { getErrorMessage } from "./errorMessage";
-    const channelurl = getContext("channelurl");
-    export let validationErrors;
-    $: errorMessage = getErrorMessage(validationErrors, field.name);
-    export let field;
-    export let value;
-    export let id;
-    export let isCreateMode;
-    let readonly = field.readonly && !isCreateMode;
-
-    function generateId(e) {
-        e.preventDefault();
-        value = uuidv4();
-    }
-</script>
-
-<div class="mb-0">
-
-    <div class="d-flex justify-content-between">
-        <input
-            type="text"
-            {id}
-            class="form-control"
-            class:is-invalid={errorMessage}
-            bind:value
-            autocomplete="off"
-            {readonly}
-        />
-        {#if !readonly}
-        <button
-            class="btn btn-primary ms-2"
-            title="Generate a new UUIDv4"
-            on:click={generateId}
-        >
-            <Icon icon="dice" />
-        </button>
-        {/if}
-    </div>
-
-    {#if errorMessage}
-        <div class="invalid-feedback d-block">
-            {errorMessage}
-        </div>
-    {/if}
-</div>

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

@@ -1,30 +0,0 @@
-<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();
-</script>
-
-<div class="mb-0">
-    <div class="d-flex justify-content-between">
-        <label for={id} class="form-label">{field.label}</label>
-        <a
-            class="text-decoration-none"
-            href="{channelurl}/schemas/{schema.name}/fields/edit/{field.name}"
-            ><code class="text-primary opacity-50">{field.name}</code></a
-        >
-    </div>
-    <input
-        type="url"
-        {id}
-        class="form-control"
-        bind:value
-        placeholder="https://www.example.com"
-    />
-    {#if field.help}
-        <small class=" text-primary  opacity-50">{field.help}</small>
-    {/if}
-</div>

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

@@ -1,12 +1,11 @@
-import {uniqBy} from "lodash";
+import {uniqueBy} from "../../../helpers.js";
+import axios from "axios";
 
 export function insertEdges(graph, sourceRecord, targetRecords, fieldName, action = "") {
     let newEdges = targetRecords.map((r) => {
         return {
             target: r.id,
             source: sourceRecord.id,
-            sourceSchema: sourceRecord.schema,
-            targetSchema: r.schema,
             field: fieldName,
             depth: 1,
             rank: ""
@@ -18,7 +17,53 @@ export function insertEdges(graph, sourceRecord, targetRecords, fieldName, actio
         replacedEdges = replacedEdges.filter((edge) => edge.field !== field.name);
     }
 
-    graph.records = uniqBy([...graph.records, ...targetRecords], (r) => r.id);
-    graph.edges = uniqBy([...replacedEdges, ...newEdges], (edge) =>  edge.source +  edge.target + edge.field + edge.depth);
+    graph.records = uniqueBy([...graph.records, ...targetRecords], (r) => r.id);
+    graph.edges = uniqueBy([...replacedEdges, ...newEdges], (edge) =>  edge.source +  edge.target + edge.field + edge.depth);
     return graph;
 }
+
+
+export function graphToReferences(graph,record,field){
+    return graph.edges
+        .filter((edge) => edge.field === field.name)
+        .map((edge) => {
+            return {
+                record: graph.records.find((increc) => increc.id === edge.target && record.id === edge.source),
+                edge: edge
+            };
+        }).filter((rec) => (rec.record?.id ? true : false)) ?? [];
+}
+
+export function removeReferenceFromGraph(graph,field,id){
+    return graph.edges.map(
+        (edge) => {
+            if(edge.target === id && edge.field === field.name){
+                edge._isTrashed = true;
+            }
+            return edge;
+        }
+    );
+}
+
+export function restoreReferenceToGraph(graph,field,id){
+    return graph.edges.map(
+        (edge) => {
+            if(edge.target === id && edge.field === field.name){
+                edge._isTrashed = false;
+            }
+            return edge;
+        }
+    );
+}
+
+
+export function fullDeleteRecord(channel,graph,field,id){
+    axios
+        .post(channel.lucentUrl + "/records/status/trashed" , {
+            records: [id]
+        });
+
+    return graph.edges.filter(
+        (edge) => !(edge.target === id && edge.field === field.name)
+    );
+}

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

@@ -11,6 +11,7 @@
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     export let record;
+    export let edge;
     export let hasDelete = false;
     export let hasInsert = false;
 
@@ -23,6 +24,16 @@
         dispatch("remove", record.id);
     }
 
+    function restore(e) {
+        e.preventDefault();
+        dispatch("restore", record.id);
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        dispatch("fulldelete", record.id);
+    }
+
     function insert(e, preset) {
         e.preventDefault();
         let html = htmlurl(channel, record, preset)
@@ -37,7 +48,7 @@
 
 </script>
 
-<div class="preview-file">
+<div class="preview-file" class:is-trashed={edge?._isTrashed}>
     <div style="display: flex;align-items: center;gap: 10px;">
         <div class="image">
             <Preview {record} size="small"/>
@@ -49,6 +60,9 @@
                         href="{channel.lucentUrl}/records/{record.id}"
                 >
                     {cardTitle}
+                    {#if edge?._isTrashed}
+                        <span class="trashed-text">will remove on save</span>
+                    {/if}
                 </a>
                 <small class="d-block">
                     from {schema.label}
@@ -78,12 +92,30 @@
         {/if}
         {#if hasDelete}
             <div class="reference-action">
+                {#if edge?._isTrashed}
                     <button
+                            title="Restore"
+                            class="button"
+                            on:click={restore}
+                    >
+                        <Icon icon="undo"/>
+                    </button>
+                    <button
+                            title="Delete from everywhere"
+                            class="button"
+                            on:click={fullDelete}
+                    >
+                        <Icon icon="destroy"/>
+                    </button>
+                {:else}
+                    <button
+                            title="Remove"
                             class="button"
                             on:click={remove}
                     >
                         <Icon icon="trash-can"/>
                     </button>
+                {/if}
             </div>
         {/if}
     </div>

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

@@ -10,6 +10,7 @@
     const channel = getContext("channel");
     export let graph;
     export let record;
+    export let edge;
     export let hasDelete = false;
 
     let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
@@ -21,10 +22,20 @@
         e.preventDefault();
         dispatch("remove", record.id);
     }
+
+    function restore(e) {
+        e.preventDefault();
+        dispatch("restore", record.id);
+    }
+
+    function fullDelete(e) {
+        e.preventDefault();
+        dispatch("fulldelete", record.id);
+    }
 </script>
 
 
-<div class="preview-reference">
+<div class="preview-reference" class:is-trashed={edge?._isTrashed}>
     <div style="display: flex;align-items: center;gap: 10px;">
 
         {#if cardImageRecord}
@@ -38,7 +49,12 @@
                         class="record-title"
                         href="{channel.lucentUrl}/records/{record.id}"
                 >
+
                     {cardTitle}
+                    {#if edge?._isTrashed}
+                        <span class="trashed-text">will remove on save</span>
+                    {/if}
+
                 </a>
                 <small class="d-block">
                     from {schema.label}
@@ -53,12 +69,30 @@
     </div>
     {#if hasDelete}
         <div class="reference-action">
+            {#if edge?._isTrashed}
                 <button
+                        title="Restore"
+                        class="button"
+                        on:click={restore}
+                >
+                    <Icon icon="undo"/>
+                </button>
+                <button
+                        title="Delete from everywhere"
+                        class="button"
+                        on:click={fullDelete}
+                >
+                    <Icon icon="destroy"/>
+                </button>
+            {:else}
+                <button
+                        title="Remove"
                         class="button"
                         on:click={remove}
                 >
                     <Icon icon="trash-can"/>
                 </button>
+            {/if}
         </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/js/svelte/setup/Step.svelte

@@ -1,67 +0,0 @@
-<script>
-    import Icon from "../common/Icon.svelte"
-
-    export let step;
-
-</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>
-            <code class="instructions">{step.instructions}</code>
-        </details>
-    </div>
-
-
-</div>
-
-<style>
-    .step-success .step-icon{
-        background: var(--suc10);
-        color: var(--suc100);
-    }
-
-    .step-fail  .step-icon{
-        background: var(--err10);
-        color: var(--err100);
-    }
-
-    .step-icon{
-        padding: 12px;
-        border-radius: 12px;
-    }
-
-    .step {
-        width: 100%;
-        display: flex;
-        align-items: start;
-        gap: 10px;
-        justify-content: space-between;
-
-        padding: 12px;
-        border-radius: 12px;
-    }
-
-    details {
-        width: 100%;
-    }
-
-    .instructions {
-        margin-top: 20px;
-        padding: 12px;
-        border-radius: 12px;
-        background: var(--p10);
-        white-space: break-spaces;
-        display: block;
-    }
-</style>

front/package.json

@@ -19,16 +19,12 @@
         "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",
         "tinymce": "^6.8.4",
         "trix": "^2.1.5",
-        "uuid": "^10.0.0",
-        "vite": "5.2.6"
+        "vite": "5.4.6"
     }
 }

front/public/css/auth.css

@@ -0,0 +1,22 @@
+.scope-login {
+  display: flex;
+  height: 100vh;
+
+  .bg-image {
+    width: 50%;
+    background: url("/vendor/lucent/public/art.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  .login-form{
+    width: 50%;
+    height: 100vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

front/public/css/autocomplete.css

@@ -0,0 +1,51 @@
+.autocomplete {
+  position: relative;
+  z-index: 1000;
+  overflow: visible;
+  .autocomplete-option {
+    cursor: pointer;
+    font-size: 14px;
+    padding: 3px 10px;
+    &:hover {
+      background: var(--p40);
+      border-radius: 12px;
+    }
+  }
+  &:focus-within {
+    .autocomplete-results{
+      display: flex;
+    }
+  }
+
+
+}
+.autocomplete-selected-value {
+  font-size: 13px;
+  margin-top: 10px;
+  border-radius: 12px;
+  background: var(--p30);
+  padding: 3px 10px;
+  display: inline-flex;
+  justify-content: center;
+  gap: 4px;
+  line-height: 22px;
+  &:hover {
+    background: var(--p40);
+  }
+}
+
+.autocomplete-results {
+  display: none;
+  flex-direction: column;
+  padding: 10px;
+  overflow: visible;
+  position: absolute;
+  border-radius: 12px;
+  z-index: 20;
+  background: var(--p30);
+  //border: 1px solid var(--p40);
+  transition: 600ms;
+  flex-grow: 1;
+  top: 45px;
+  width: 100%;
+}

front/public/css/avatar.css

@@ -0,0 +1,23 @@
+.avatar {
+    /* Center the content */
+    display: inline-block;
+    vertical-align: middle;
+
+    /* Used to position the content */
+    position: relative;
+
+    /* Colors */
+
+    color: #fff;
+
+    /* Rounded border */
+    border-radius: 50%;
+}
+
+.avatar__letters {
+    /* Center the content */
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}

front/public/css/button.css

@@ -0,0 +1,94 @@
+.button {
+    border-radius: 12px;
+    background: var(--p20);
+    padding: 3px 10px;
+    cursor: pointer;
+    border: 0px solid var(--p30);
+    font-size: 14px;
+    min-height: 27px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--text);
+
+    &:focus {
+    }
+
+    &:hover {
+        background: var(--p30);
+    }
+
+    &:active {
+        background: var(--p50) !important;
+        box-shadow: none;
+    }
+
+    &.active {
+        background: var(--p30);
+    }
+
+    &.secondary {
+        background: var(--p30);
+
+        &:hover {
+            background: var(--p40);
+        }
+    }
+
+    &.primary {
+        background: var(--p70);
+        color: var(--p10);
+
+        &:hover {
+            background: var(--p90);
+        }
+    }
+
+
+    &[disabled] {
+        pointer-events: none;
+        opacity: .7;
+        color: var(--text);
+    }
+}
+
+.upload-button {
+    padding: 0;
+    border: none;
+
+    label {
+        font-size: 14px;
+        line-height: 14px;
+        font-weight: normal;
+        background: var(--p80) !important;
+        color: var(--p10);
+    }
+}
+
+.button-text {
+    border: none;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+
+.spinner-border {
+    width: 12px;
+    height: 12px;
+    border: 2px solid var(--p10);
+    border-bottom-color: var(--p30);
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

front/public/css/checkbox.css

@@ -0,0 +1,104 @@
+
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    .checkbox-wrapper input[type=checkbox] {
+        --active-inner: var(--p10);
+        --focus: 2px var(--p30);
+        --border-hover: var(--p30);
+        --disabled: #F6F8FF;
+        --disabled-inner: #E1E6F9;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        height: 21px;
+        outline: none;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        margin: 0;
+        cursor: pointer;
+        border: 1px solid var(--bc, var(--p30));
+        background: var(--b, var(--p10));
+        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+    }
+    .checkbox-wrapper input[type=checkbox]:after {
+        content: "";
+        display: block;
+        left: 0;
+        top: 0;
+        position: absolute;
+        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
+    }
+    .checkbox-wrapper input[type=checkbox]:checked {
+        --b: var(--p40);
+        --bc: var(--p40);
+        --d-o: .3s;
+        --d-t: .6s;
+        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
+    }
+    .checkbox-wrapper input[type=checkbox]:disabled {
+        --b: var(--disabled);
+        cursor: not-allowed;
+        opacity: 0.9;
+    }
+    .checkbox-wrapper input[type=checkbox]:disabled:checked {
+        --b: var(--disabled-inner);
+        --bc: var(--p40);
+    }
+    .checkbox-wrapper input[type=checkbox]:disabled + label {
+        cursor: not-allowed;
+    }
+    .checkbox-wrapper input[type=checkbox]:hover:not(:checked):not(:disabled) {
+        --bc: var(--border-hover);
+    }
+    .checkbox-wrapper input[type=checkbox]:focus {
+        box-shadow: 0 0 0 var(--focus);
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch) {
+        width: 21px;
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):after {
+        opacity: var(--o, 0);
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):checked {
+        --o: 1;
+    }
+    .checkbox-wrapper input[type=checkbox] + label {
+        display: inline-block;
+        vertical-align: middle;
+        cursor: pointer;
+        margin-left: 4px;
+    }
+
+    .checkbox-wrapper input[type=checkbox]:not(.switch) {
+        border-radius: 7px;
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):after {
+        width: 5px;
+        height: 9px;
+        border: 2px solid var(--active-inner);
+        border-top: 0;
+        border-left: 0;
+        left: 7px;
+        top: 4px;
+        transform: rotate(var(--r, 20deg));
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):checked {
+        --r: 43deg;
+    }
+}
+
+.checkbox-wrapper * {
+    box-sizing: inherit;
+}
+.checkbox-wrapper *:before,
+.checkbox-wrapper *:after {
+    box-sizing: inherit;
+}
+
+.checkbox-wrapper input[type=checkbox]:indeterminate {
+    --b: var(--p40);
+    --bc: var(--p40);
+    --d-o: .3s;
+    --d-t: .6s;
+    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
+}
+

front/public/css/codemirror.css

@@ -0,0 +1,24 @@
+.is-editable-false{
+    .cm-content{
+        background-color: var(--p10);
+    }
+}
+.cm-focused{
+
+    .cm-content{
+        background-color: var(--p10);
+        color: var(--p100);
+    }
+}
+
+.cm-content{
+    background-color: var(--p20);
+
+}
+.ͼ4 .cm-line ::selection, .ͼ4 .cm-line::selection{
+    background: var(--p40) !important;
+}
+
+.cm-activeLine{
+    background-color: var(--p20)!important;
+}

front/public/css/datepicker.css

@@ -0,0 +1,43 @@
+
+.flatpickr-wrapper {
+  display: block !important;
+}
+
+.editor-field {
+  .flatpickr-calendar {
+    border-radius: 12px !important;
+  }
+
+  .flatpickr-months .flatpickr-month {
+    background: var(--p30);
+      color: var(--text);
+      font-size: 12px;
+  }
+
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+      background: var(--p30);
+  }
+
+    .flatpickr-weekdays{
+        background: var(--p30);
+        color: var(--text);
+
+    }
+
+    .flatpickr-weekdaycontainer .flatpickr-weekday{
+        background: var(--p30);
+        color: var(--text);
+    }
+
+    .flatpickr-days{
+        background: var(--p10);
+        color: var(--text);
+    }
+
+    .flatpickr-time{
+        background: var(--p10);
+        color: var(--text);
+    }
+
+}
+

front/public/css/dialog.css

@@ -0,0 +1,54 @@
+//
+//:modal {
+//  background-color: beige;
+//  border: 2px solid burlywood;
+//  border-radius: 5px;
+//}
+
+html {
+  //scrollbar-gutter: stable;
+}
+
+body:has(dialog[open]) {
+  overflow: hidden;
+}
+
+dialog {
+  margin: 2vh auto;
+  background-color: var(--p10);
+  padding: 34px;
+  border: none;
+  border-radius: 12px;
+  overflow: auto;
+  max-height: 96vh;
+  box-shadow: none!important;
+  //position: relative;
+
+  .close {
+    position: absolute;
+    top: 10px;
+    right: 0px;
+  }
+
+  .dialog-body {
+    width: fit-content;
+  }
+}
+
+
+dialog::backdrop {
+
+  backdrop-filter: blur(3px);
+}
+
+.dialog-header {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: sticky;
+  top: -34px;
+  z-index: 999;
+  background-color: var(--p10);
+  padding: 10px 0;
+}

front/public/css/dropdown.css

@@ -0,0 +1,73 @@
+.dropdown {
+  position: relative;
+  overflow: visible;
+}
+
+.dropdown-button > div {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  overflow: visible;
+  position: absolute;
+  border-radius: 12px;
+  z-index: 22;
+  background: var(--p20);
+  transition: 600ms;
+  flex-grow: 1;
+  top: 35px;
+  min-width: max-content;
+  border: 1px solid var(--p30);
+
+
+  &.orientation-right {
+    right: 0;
+  }
+
+  &.orientation-left {
+    left: 0;
+  }
+
+
+}
+
+.dropdown-header, .dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  text-wrap: nowrap;
+}
+
+.dropdown-header {
+  padding: 10px;
+}
+
+.dropdown-item {
+  font-size: 14px;
+  padding: 3px 10px;
+
+  &:hover {
+    background: var(--p30);
+    border-radius: 12px;
+
+    button {
+      background: var(--p30);
+    }
+  }
+
+  .button-icon {
+    flex-shrink: 0;
+
+  }
+}
+
+.editor-field{
+  .dropdown-menu {
+    background: var(--p30);
+  }
+}

front/public/css/form.css

@@ -0,0 +1,95 @@
+
+label {
+  display: block;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+input[type=text],input[type=number],input[type=search],input[type=email],textarea{
+  width: 100%;
+  background: var(--p20);
+  border: 1px solid var(--p50);
+  border-radius: 5px;
+  padding: 5px 7px;
+  font-size: 16px;
+  &:focus{
+    background: var(--p10);
+
+  }
+}
+
+textarea{
+  resize: none;
+}
+
+select{
+  width: 100%;
+  background: var(--p20);
+  border: 1px solid var(--p50);
+  border-radius: 5px;
+  padding: 5px 7px;
+  font-size: 16px;
+  &:focus{
+    background: var(--p10);
+
+  }
+}
+
+
+.htmx-indicator {
+  display: none;
+}
+
+.htmx-request .htmx-indicator {
+  display: inline;
+}
+
+.htmx-request.htmx-indicator {
+  display: inline;
+}
+
+
+.bt {
+  appearance: none;
+  background-color: #000;
+  background-image: none;
+  border: 1px solid #000;
+  border-radius: 4px;
+  box-shadow: #fff 4px 4px 0 0, #000 4px 4px 0 1px;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: ITCAvantGardeStd-Bk, Arial, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin: 0 5px 10px 0;
+  overflow: visible;
+  padding: 8px 40px;
+  text-align: center;
+  text-transform: none;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.bt:focus {
+  text-decoration: none;
+}
+
+.bt:hover {
+  text-decoration: none;
+}
+
+.bt:active {
+  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
+  outline: 0;
+}
+
+.bt:not([disabled]):active {
+  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
+  transform: translate(2px, 2px);
+}

front/public/css/helpers.css

@@ -0,0 +1,52 @@
+.mt-1{margin-top: 4px}
+.mt-2{margin-top: 8px}
+.mt-3{margin-top: 12px}
+.mt-4{margin-top: 16px}
+.mt-5{margin-top: 20px}
+
+.mb-1{margin-bottom: 4px}
+.mb-2{margin-bottom: 8px}
+.mb-3{margin-bottom: 12px}
+.mb-4{margin-bottom: 16px}
+.mb-5{margin-bottom: 20px}
+
+.pt-1{padding-top: 4px}
+.pt-2{padding-top: 8px}
+.pt-3{padding-top: 12px}
+.pt-4{padding-top: 16px}
+.pt-5{padding-top: 20px}
+
+.pb-1{padding-bottom: 4px}
+.pb-2{padding-bottom: 8px}
+.pb-3{padding-bottom: 12px}
+.pb-4{padding-bottom: 16px}
+.pb-5{padding-bottom: 20px}
+
+.gap-1{gap: 4px}
+.gap-2{gap: 8px}
+.gap-3{gap: 12px}
+.gap-4{gap: 16px}
+.gap-5{gap: 20px}
+
+.hide{
+  display: none!important;
+}
+.hidden{
+  visibility: hidden;
+}
+
+.d-block{
+  display: block;
+}
+
+.d-inline-block{
+  display: inline-block;
+}
+
+.is-bold{
+  font-weight: 700;
+}
+
+.in-place{
+  padding: 36px;
+}

front/public/css/layout.css

@@ -0,0 +1,19 @@
+.sidebar-content{
+  min-width: 300px;
+  max-width: 400px;
+  position: relative;
+}
+
+.main-content {
+  position: relative;
+  width: fit-content;
+  min-width: 900px;
+}
+
+.main-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  padding: 20px;
+  position: relative;
+}

front/public/css/members.css

@@ -0,0 +1,19 @@
+.member-list{
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.member-item{
+  background: var(--p30);
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .member-name{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}

front/public/css/notice.css

@@ -0,0 +1,26 @@
+.notice {
+    background-color: var(--p20);
+    padding:  14px;
+    margin: 2rem 0;
+    position: relative;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 12px;
+    //border: 3px solid var(--border-base);
+}
+
+.notice .title {
+    content: "NOTE";
+    //position: absolute;
+    border-radius: 12px;
+    display: block;
+    font-weight: bold;
+}
+
+.notice.notice-success{
+    background: var(--suc20);
+}
+
+.notice.notice-error{
+    background: var(--err10);
+}

front/public/css/pagination.css

@@ -0,0 +1,38 @@
+.pagination {
+  margin: 20px auto 10px ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  list-style: none;
+  padding: 0;
+
+  li {
+
+
+    a,span{
+      font-size: 14px;
+      border-radius: 12px;
+      padding: 4px 18px;
+      background: var(--p20);
+
+      &:hover{
+        background: var(--p30);
+      }
+    }
+
+
+    &.disabled {
+      pointer-events: none;
+      opacity: .7;
+    }
+
+    &.active {
+      span{
+        background: var(--p30);
+      }
+
+
+    }
+  }
+}

front/public/css/preview.css

@@ -0,0 +1,68 @@
+.preview-file,.preview-reference{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  background: var(--p10);
+  border-radius: 12px;
+
+ &.is-trashed{
+   border: 2px solid var(--err10);
+   background: var(--p20);
+  }
+.trashed-text{
+  background: var(--err10);
+  font-size: 12px;
+  padding:2px 10px;
+}
+
+  .image{
+
+
+    display: flex;
+
+  }
+
+  .reference-action{
+    display: none;
+
+  }
+
+  &:hover{
+    background: var(--p30);
+    .reference-action{
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+  }
+}
+
+.file-preview-small{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  border-radius: 12px;
+  padding: 4px;
+  //background: var(--p10);
+}
+
+
+.preview-reference{
+  background: var(--p10);
+  padding: 10px 20px;
+}
+
+.sortable-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.sortable-ghost{
+  border: 2px dashed var(--p60);
+}
+
+.sortable-drag { opacity: 0 !important; } .sortable-ghost { opacity: 1 !important; }

front/public/css/record-edit.css

@@ -0,0 +1,147 @@
+.record-edit {
+  position: relative;
+  max-width: 900px;
+  .invalid-feedback {
+    color: var(--text-error);
+    font-size: 15px;
+    line-height: 20px;
+    margin-top: 10px;
+  }
+}
+
+.record-header {
+  margin: 10px 0 0;
+
+  .schema-name {
+    font-size: 14px;
+  }
+
+  .record-title {
+    font-size: 18px;
+    display: block;
+  }
+}
+
+.tools-header {
+  margin: 30px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 14px;
+  position: relative;
+  z-index: 20;
+  padding: 10px;
+  border-radius: 12px;
+  background: var(--p20);
+}
+
+.editor-field {
+  background: var(--p20);
+  padding: 18px;
+  position: relative;
+  border-radius: 12px;
+  margin: 6px 0;
+  border-color: transparent;
+
+  .button:not(.primary) {
+    background: var(--p30);
+
+    &:hover {
+      background: var(--p40);
+    }
+  }
+
+  dialog {
+    .button:not(.primary) {
+      background: var(--p20);
+
+
+      &:hover {
+        background: var(--p30);
+      }
+    }
+  }
+
+
+}
+
+.field-header {
+  margin-bottom: 4px;
+  position: relative;
+
+  .labels {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .label-and-help {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  label {
+    font-size: 14px;
+    line-height: 14px;
+    margin: 0;
+    font-weight: 700;
+  }
+
+  .help-text {
+    font-size: 14px;
+    line-height: 14px
+  }
+
+  code {
+  }
+
+
+}
+
+.system-help-text {
+  font-size: 14px;
+  line-height: 14px;
+  margin-top: 10px;
+}
+
+
+.field-checkbox {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+
+  .form-check-inline {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .form-check-label {
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+}
+
+.record-edit-file-preview {
+  display: flex;
+  gap: 20px;
+
+  .file-details {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+  }
+
+  .file-details-item {
+    .text-muted {
+      color: var(--grey-dark);
+    }
+
+  }
+}
+

front/public/css/reference-tags.css

@@ -0,0 +1,60 @@
+.reference-tags {
+  position: relative;
+  z-index: 20;
+
+  .reference-tags-option {
+    cursor: pointer;
+    font-size: 14px;
+    padding: 3px 10px;
+
+    &:hover {
+      background: var(--p40);
+      border-radius: 12px;
+    }
+  }
+
+  &:focus-within {
+    .reference-tags-results {
+      display: flex;
+    }
+  }
+
+}
+
+.reference-tags-selected-value {
+  font-size: 13px;
+  margin-top: 10px;
+  border-radius: 12px;
+  background: var(--p30);
+  padding: 3px 10px;
+  display: inline-flex;
+  justify-content: center;
+  gap: 4px;
+  line-height: 22px;
+
+  &:hover {
+    background: var(--p40);
+  }
+}
+
+.reference-tags-results {
+  display: none;
+  flex-direction: column;
+  padding: 10px;
+  overflow: visible;
+  position: absolute;
+  border-radius: 12px;
+  z-index: 20;
+  background: var(--p30);
+  //border: 2px solid var(--background-2);
+  transition: 600ms;
+  flex-grow: 1;
+  top: 45px;
+  width: 100%;
+
+  .start-typing {
+    font-style: italic;
+    font-size: 13px;
+  }
+
+}

front/public/css/reset.css

@@ -0,0 +1,46 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+/*
+  8. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}

front/public/css/revisions.css

@@ -0,0 +1,87 @@
+.revisions{
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  .revision{
+    justify-content: space-between;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    background: var(--p20);
+    padding: 12px;
+    border-radius: 12px;
+
+    .version{
+      display: flex;
+      gap: 10px;
+    }
+
+    &.active{
+      background: var(--p30);
+    }
+  }
+}
+
+.selected-revision{
+  margin-top: 30px;
+  align-items: center;
+  background: var(--p20);
+  padding: 12px;
+  border-radius: 12px;
+
+  .button{
+    background: var(--p30);
+  }
+
+  .revision-field{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--p30);
+    flex: 1;
+    .compare-left{
+      width: 45%;
+      border-radius: 12px;
+      padding: 20px;
+      background: var(--p30);
+    }
+    .compare-right{
+      width: 45%;
+      border-radius: 12px;
+      padding: 20px;
+      background: var(--p30);
+    }
+    .compare-center{
+
+      width: 10%;
+      height: 100%;
+      display: flex;
+      gap: 20px;
+      align-items: center;
+
+
+    }
+  }
+
+
+}
+.reference-field{
+  width: 100px;
+}
+
+.revision-references{
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--p30);
+}
+
+.reference-compare{
+
+  width: 45%;
+  border-radius: 12px;
+  padding: 20px;
+  background: var(--p30);
+}

front/public/css/rich.css

@@ -0,0 +1,150 @@
+.tiptap {
+  width: 100%;
+  background: var(--p20);
+  border: 1px solid var(--p50);
+  border-radius: 0 0 5px 5px;
+  padding: 15px 15px;
+  font-size: 16px;
+
+  :first-child {
+    margin-top: 0;
+  }
+
+
+  &:focus {
+    background: var(--p10);
+
+  }
+
+  img {
+    &.ProseMirror-selectednode {
+      box-shadow: 0 0 1px 2px var(--p70);
+    }
+  }
+
+}
+
+.editor-field {
+  .editor-toolbar {
+    display: flex;
+    gap: 4px;
+    background: var(--p30);
+    border-radius: 5px 5px 0 0;
+    padding: 5px 7px;
+
+    .button:not(.primary) {
+      font-weight: 700;
+
+      &.active {
+        background: var(--p40);
+      }
+    }
+  }
+}
+
+.content {
+  .tiptap {
+    li > p {
+      display: inline;
+    }
+  }
+
+}
+
+trix-editor {
+  background: var(--p20)!important;
+  border: 1px solid var(--p50)!important;
+  border-radius: 0 0 5px 5px!important;
+  padding: 15px 15px!important;
+  & > div {
+    margin-bottom: 14px;
+    font-size: 16px;
+    line-height: 23px;
+  }
+
+  &:focus {
+    background: var(--p10)!important;
+
+  }
+  figure.attachment{
+    display: flex!important;
+    flex-direction: column!important;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+  .attachment {
+    background: var(--p20);
+    padding: 12px 0;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+
+    img {
+      margin-bottom: 0;
+    }
+
+
+  }
+
+  [data-trix-mutable].attachment img {
+    box-shadow: 0 0 1px 2px var(--p70) !important;
+
+  }
+
+  .trix-button--remove {
+    box-shadow: none !important;
+    border: 2px solid var(--p40) !important;
+  }
+
+  .trix-button--remove:hover {
+    border: 2px solid var(--p40);
+  }
+
+  a {
+    color: var(--p80);
+  }
+}
+
+trix-toolbar {
+  .trix-button-row {
+    display: flex;
+  }
+
+  .trix-button-group {
+    background: transparent !important;
+    border: none !important;
+    display: flex !important;
+    gap: 4px;
+  }
+  .trix-button-group--history-tools,.trix-button-group--file-tools
+  {
+    display: none !important;
+  }
+
+  .trix-button {
+    border-radius: 6px !important;
+    background: var(--p30) !important;
+    padding: 14px 22px !important;
+    margin: 0 !important;
+    cursor: pointer;
+    border: 0px solid var(--p30) !important;
+    font-size: 14px !important;
+    min-height: 27px !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 4px;
+    color: var(--text) !important;
+
+    &:before{
+      background-size: 22px!important;
+    }
+
+    &:hover{
+      background: var(--p40) !important;
+    }
+    &.trix-active{
+      background: var(--p50) !important;
+    }
+  }
+}

front/public/css/sidebar.css

@@ -0,0 +1,98 @@
+.sidebar-top{
+  border: 0px solid var(--p30);
+  font-size: 18px;
+  padding: 20px 20px ;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--p20);
+  margin-bottom: 15px;
+  border-radius: 12px;
+}
+
+.sidebar {
+  //border: 1px solid var(--border-context);
+  border-radius: 12px;
+  font-size: 15px;
+  line-height: 28px;
+  padding: 20px;
+  background: var(--p20);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.sidebar-folder{
+  width: 100%;
+  margin: 3px 12px 3px;
+  .sidebar-folder{
+    margin-left: 5px;
+
+  }
+}
+.sidebar-header {
+  width: 100%;
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--p30);
+  font-size: 16px;
+  padding: 3px 12px 3px;
+
+  color: var(--text);
+  border: none;
+  border-radius: 12px;
+  &:focus{
+    box-shadow: none;
+  }
+
+
+  &:hover {
+    background: var(--p40);
+  }
+
+  &:first-child {
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.sidebar-item {
+
+  color: var(--text);
+  display: block;
+  font-size: 14px;
+  padding: 3px 12px;
+  text-decoration: none;
+  transition: 600ms;
+  border-radius: 12px;
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--p30);
+  }
+
+  &.active {
+    background: var(--p40);
+  }
+}
+
+.top-nav{
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 10px;
+}
+.top-nav-item{
+  border-radius: 12px;
+  font-size: 14px;
+  background: var(--p20);
+  padding: 3px 10px ;
+  &:hover {
+    background: var(--p30);
+  }
+}

front/public/css/switch.css

@@ -0,0 +1,34 @@
+input.switch {
+  -webkit-appearance: none;
+  width: 34px;
+  height: 18px;
+  border: 1px solid var(--p40);
+  position: relative;
+  border-radius: 50px;
+  box-sizing: content-box;
+  cursor: pointer;
+  transition: background 150ms ease-in-out;
+  background: white;
+}
+
+input.switch::after {
+  top: 2px;
+  left: 2px;
+  transition: left 150ms ease-in-out;
+  content: " ";
+  width: 14px;
+  height: 14px;
+  background: var(--p40);
+  box-shadow: inset 0 0 0px 1px var(--p40);
+  position: absolute;
+  border-radius: 50px;
+}
+
+input.switch:checked {
+  background: var(--p50);
+}
+
+input.switch:checked::after {
+  left: calc(100% - 17px);
+  background: var(--p10);
+}

front/public/css/table.css

@@ -0,0 +1,140 @@
+.table {
+  min-width: 600px;
+  overflow: auto;
+  background: var(--p20);
+  padding: 1px;
+  font-size: 14px;
+  border-radius: 12px;
+
+  table {
+    background: var(--p20);
+    width: 100%;
+    border-collapse: separate;
+    border: none;
+    border-spacing: 0;
+  }
+
+  thead {
+    border-radius: 12px;
+
+    tr {
+      border-radius: 12px;
+    }
+
+  }
+
+  th {
+    font-size: 14px;
+    font-weight: normal;
+    white-space: nowrap;
+    max-width: 400px;
+    border: none;
+    background: var(--p20);
+    text-align: left;
+    padding: 8px 16px;
+
+    &.is-sort {
+      font-weight: 700;
+    }
+
+    &:first-child {
+      border-radius: 12px 0 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 12px 0 0;
+    }
+  }
+
+  td {
+    font-weight: normal;
+    white-space: nowrap;
+    max-width: 400px;
+    height: 48px;
+    padding: 4px 16px;
+    border: none;
+    overflow: hidden;
+
+
+    //img{
+    //    width: 48px;
+    //}
+
+    .status {
+      color: var(--text);
+      font-size: 80%;
+    }
+
+    .row-name {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .title-td-contents {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 14px;
+      line-height: 14px;
+    }
+  }
+
+  tbody {
+    tr {
+      border-radius: 12px;
+      background: var(--p10);
+      border: none;
+
+      &:has(input:checked) {
+        background: var(--p30);
+      }
+
+      &:hover {
+        background: var(--p20);
+      }
+    }
+  }
+
+
+  tr:nth-child(odd) {
+    //background-color: #f9f9f9;
+  }
+
+  td:nth-child(odd) {
+    // border-left: 1px solid #e4e4e4;
+    // border-right: 1px solid #e4e4e4;
+  }
+
+  th:nth-child(odd) {
+
+  }
+
+  .field-ui-number {
+    text-align: right;
+  }
+
+  .references{
+    display: flex;
+    gap: 4px;
+
+    .reference{
+      font-size: 13px;
+      border-radius: 12px;
+      background: var(--p30);
+      padding: 1px 5px;
+    }
+  }
+}
+
+.file-table-row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  & > div {
+    display: flex;
+    flex-flow: column;
+    gap: 5px;
+  }
+}

front/public/css/tabs.css

@@ -0,0 +1,11 @@
+.tabs{
+  padding: 0;
+  margin: 20px 0 20px;
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  .tab{
+    list-style: none;
+
+  }
+}

front/public/css/toolbar.css

@@ -0,0 +1,64 @@
+.toolbar{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    justify-content: space-between;
+
+
+    input.search{
+        border-radius: 12px;
+        background: var(--p20);
+        padding: 4px 10px;
+        cursor: pointer;
+        border: none;
+        font-size: 14px;
+    }
+
+
+    .selected-filter{
+        font-size: 13px;
+        border-radius: 12px;
+        margin: 2px 0;
+        background: var(--p30);
+        padding: 3px 10px;
+        display: flex;
+        gap: 4px;
+        line-height: 22px;
+    }
+
+    .filter-input{
+
+        margin: 10px 0 ;
+        input{
+            font-size: 13px;
+        }
+    }
+
+    .applied-filter{
+        background: var(--p30);
+    }
+}
+.toolbar-filters{ display: flex;
+    align-items: center;
+    gap: 5px;}
+
+.applied-filters{
+    display: flex;
+    gap: 4px;
+    margin-top: 10px;
+
+    .applied-filter {
+        font-size: 13px;
+        border-radius: 12px;
+        background: var(--p20);
+        padding: 3px 10px;
+        display: flex;
+        justify-content: center;
+        gap: 4px;
+        line-height: 22px;
+    }
+
+    .applied-filter:hover {
+        background-color: var(--p30);
+    }
+}

front/public/css/typography.css

@@ -0,0 +1,106 @@
+
+
+.content {
+    font-size: 16px;
+    line-height: 20px;
+    font-family: var(--main-font);
+    color: var(--text);
+    p{
+
+        margin-bottom: 14px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+    h1{
+        font-size: 24px;
+        line-height: 34px;
+    }
+
+    h2{
+        font-size: 20px;
+        line-height: 30px;
+    }
+
+    h3{
+        font-size: 18px;
+        line-height: 28px;
+    }
+
+    ul {
+        padding: 0 0 0 16px;
+        list-style: none outside none;
+
+        li::before {
+            content: "—";
+            opacity: .5;
+            font-size: 12px;
+            padding-right: 6px;
+            vertical-align: 10%;
+        }
+
+        li {
+            list-style: none;
+            padding: 0;
+        }
+
+    }
+
+    code{
+        background: var(--p30);
+        padding: 0 6px;
+        border-radius: 12px;
+    }
+
+    img{
+        margin-bottom: 14px;
+    }
+
+    blockquote{
+        border:1px solid var(--p30);
+        border-radius: 12px;
+        padding: 12px 40px;
+        position: relative;
+
+        &::before{
+            content: "\201C";
+            color: var(--p60);
+            font-size:4em;
+            position: absolute;
+            left: 10px;
+            top: 20px;
+        }
+
+        &::after{
+            content: '';
+        }
+
+    }
+
+    pre {
+        background: var(--grey-light);
+        border-radius: 0.5rem;
+        color: var(--white);
+        font-family: 'JetBrainsMono', monospace;
+        margin: 1.5rem 0;
+        padding: 0.75rem 1rem;
+
+        code {
+            background: none;
+            color: inherit;
+            font-size: 0.8rem;
+            padding: 0;
+        }
+    }
+
+}
+
+.lx-small-text {
+    font-size: 12px;
+    line-height: 15px;
+
+}
+
+.light-text{
+    color: var(--text-light);
+}

front/public/css/wrappers.css

@@ -0,0 +1,114 @@
+.wrapper-tiny {
+    background-color: var(--p20);
+    border-radius: 12px;
+    margin: 44px auto;
+    width: 600px;
+    padding: 44px;
+
+}
+
+
+
+.common-wrapper {
+    background-color: var(--p20);
+    margin: 20px 0;
+    padding: 20px;
+    border-radius: 12px;
+}
+
+
+.wrapper-normal {
+    background-color: #fff;
+    border-radius: 32px;
+    margin: 44px auto;
+    width: 1000px;
+    padding: 44px;
+
+    &.transparent {
+
+        margin: 0px auto;
+        padding: 0px;
+        background-color: transparent;
+    }
+}
+
+.wrapper-large {
+    background-color: #fff;
+    border-radius: 32px;
+    margin: 44px auto;
+    max-width: 1920px;
+    min-width: 1000px;
+    padding: 44px;
+    width: fit-content;
+    &.transparent {
+        padding: 0px;
+        margin: 0px auto;
+        background-color: transparent;
+    }
+}
+
+
+@media only screen and (max-width: 1800px) {
+    .wrapper-normal {
+        margin: 0px 0px 0px auto;
+        padding: 20px;
+
+        &.transparent {
+
+            margin: 0px 0px 0px auto;
+            padding: 40px;
+        }
+    }
+
+    .wrapper-large {
+        margin: 44px 0px 0px auto;
+        padding: 44px;
+        &.transparent {
+            margin: 0px 0px 0px auto;
+            padding: 40px;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1390px) {
+
+    .wrapper-normal {
+        margin: 0px auto;
+        padding: 20px;
+
+        &.transparent {
+
+            margin: 0px auto;
+            padding: 40px;
+        }
+    }
+
+    .wrapper-large {
+        margin: 44px 0px 0px auto;
+        padding: 44px;
+        &.transparent {
+            margin: 0px 0px 0px auto;
+            padding: 40px;
+        }
+    }
+}
+
+
+
+.section-actions {
+    text-align: center;
+    padding: 32px 0;
+}
+
+.header-normal {
+    text-align: left;
+    font-weight: 400;
+    font-size: 20px;
+}
+
+.header-small {
+    text-align: left;
+    font-weight: 400;
+    font-size: 20px;
+}

front/public/js/editor.js

@@ -0,0 +1,5 @@
+document.addEventListener("DOMContentLoaded", onReady);
+
+function onReady(){
+    console.log("ready yo")
+}

front/public/main.css

@@ -0,0 +1,108 @@
+@import "./css/reset.css";
+@import "./css/helpers.css";
+@import "./css/notice.css";
+@import "./css/auth.css";
+@import "./css/typography.css";
+@import "./css/sidebar.css";
+@import "./css/form.css";
+@import "./css/table.css";
+@import "./css/avatar.css";
+@import "./css/codemirror.css";
+@import "./css/rich.css";
+@import "./css/layout.css";
+@import "./css/wrappers.css";
+@import "./css/toolbar.css";
+@import "./css/dropdown.css";
+@import "./css/button.css";
+@import "./css/checkbox.css";
+@import "./css/pagination.css";
+@import "./css/record-edit.css";
+@import "./css/tabs.css";
+@import "./css/switch.css";
+@import "./css/preview.css";
+@import "./css/dialog.css";
+@import "./css/autocomplete.css";
+@import "./css/reference-tags.css";
+@import "./css/members.css";
+@import "./css/revisions.css";
+@import "./css/datepicker.css";
+
+
+:root {
+
+    --p10: #f4f9ff;
+    --p20: #eaf1f9;
+    --p30: #b3ceff;
+    --p40: #8db5ff;
+    --p50: #70a2ff;
+    --p60: #679cff;
+    --p70: #4284ff;
+    --p80: #1c6bff;
+    --p90: #002b7a;
+    --p100: #000C23;
+
+
+    --suc10: #d1ffb8;
+    --suc20: #d1ffb8;
+    --suc30: #b5ff8d;
+    --suc40: #a2ff70;
+    --suc50: #82cc5a;
+    --suc80: #71b34e;
+    --suc90: #314c22;
+
+
+
+    --err10: #ffb9d0;
+    --err20: #ff9bb3;
+    --err30: #fe7e97;
+    --err40: #de617b;
+    --err50: #be4461;
+    --err80: #61001a;
+    --err90: #560012;
+
+    --grey-dark: #424656;
+    --grey-light: #a6abbd;
+
+    --text: var(--p100);
+    --text-light: var(--grey-dark);
+    --text-error: var(--err50);
+
+    --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
+}
+
+
+
+
+body {
+    background-color: var(--p10);
+    font-family: var(--main-font), sans-serif;
+    color: var(--text);
+
+    :focus {
+        outline: none;
+        box-shadow: 0 0 1px 2px var(--p70);
+    }
+}
+
+.btn-spinner .spinner-border {
+    display: none;
+}
+
+.btn-spinner.spinner-on .spinner-border {
+    display: inline-block;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+
+a {
+    color: var(--text);
+    text-decoration: none;
+}
+
+
+.lucent-component {
+    position: relative;
+}

front/sass/_preview.scss

@@ -5,6 +5,17 @@
   gap: 10px;
   background: var(--p10);
   border-radius: 12px;
+
+ &.is-trashed{
+   border: 2px solid var(--err10);
+   background: var(--p20);
+  }
+.trashed-text{
+  background: var(--err10);
+  font-size: 12px;
+  padding:2px 10px;
+}
+
   .image{
 
 
@@ -20,7 +31,9 @@
   &:hover{
     background: var(--p30);
     .reference-action{
-      display: block;
+      display: flex;
+      align-items: center;
+      gap: 3px;
     }
   }
 }

front/sass/_sidebar.scss

@@ -21,8 +21,16 @@
   flex-direction: column;
   gap: 3px;
 }
+.sidebar-folder{
+  width: 100%;
+  margin: 3px 12px 3px;
+  .sidebar-folder{
+    margin-left: 5px;
 
+  }
+}
 .sidebar-header {
+  width: 100%;
   display: flex;
   cursor: pointer;
   justify-content: space-between;
@@ -30,6 +38,7 @@
   background: var(--p30);
   font-size: 16px;
   padding: 3px 12px 3px;
+
   color: var(--text);
   border: none;
   border-radius: 12px;

front/views/auth/login.blade.php

@@ -1,5 +1,8 @@
 @extends("lucent::layouts.account")
 
+@section("title")
+    Log in
+@endsection
 @section("content")
     <div class="scope-login">
         <div class="bg-image">

front/views/auth/verify.blade.php

@@ -1,5 +1,7 @@
 @extends("lucent::layouts.account")
-
+@section("title")
+    Enter
+@endsection
 @section("content")
     <div class="scope-login">
         <div class="bg-image">

front/views/components/avatar.blade.php

@@ -1,43 +0,0 @@
-@php
-    $side = $side ?? 48;
-
-        $colors = [
-            "#00AA55",
-            "#009FD4",
-            "#B381B3",
-            "#939393",
-            "#E3BC00",
-            "#D47500",
-            "#DC2A2A",
-            "#3ede91",
-            "#377dd4",
-            "#0256b0",
-            "#053d82",
-            "#3d026e",
-            "#b378e3",
-            "#c4065c",
-            "#543208",
-            "#d97811",
-            "#0c6b40",
-        ];
-        $initials = function($name){
-            $segs = explode(" ",$name);
-            if(count($segs) > 1){
-                return strtoupper($segs[0][0]).strtoupper($segs[1][0]);
-            }
-            return strtoupper($segs[0][0]).strtoupper($segs[0][1]);
-        };
-
-        $name = $user["name"];
-        $charIndex = ord($name[1]) + strlen($name);
-        $colorIndex = $charIndex % 19;
-        $bgColor = $colors[$colorIndex];
-@endphp
-
-<div
-        class="avatar"
-        title="{{$name}}"
-        style="background-color:{{$bgColor}};height: {{$side}}px;width: {{$side}}px; font-size:{{$side / 2}}px"
->
-    <div class="avatar__letters">{{$initials($user["name"])}}</div>
-</div>

front/views/home.blade.php

@@ -1,23 +0,0 @@
-@extends("lucent::layouts.channel")
-
-@section("content")
-    <h3 class="header-small mb-4">Latest Content changes</h3>
-
-
-    @if($records->isNotEmpty())
-        <div class="lx-card  mb-4">
-            <div class="lx-table p-0">
-                <table class="">
-                    <tbody>
-                    @foreach($records as $record)
-                        <tr>
-                            @include("lucent::records.card-row")
-                        </tr>
-                    @endforeach
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    @endif
-
-@endsection

front/views/includes/assets.blade.php

@@ -0,0 +1,15 @@
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.1.6/dist/trix.css">
+<link rel="stylesheet" href="/vendor/lucent/public/main.css"/>
+
+@if(config("lucent.env") == "production")
+    <!-- if production -->
+    <script type="module" src="/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

front/views/includes/header.blade.php

@@ -1,21 +0,0 @@
-<div class="d-flex  align-items-center ">
-
-    <a class="nav-item" href="{channel.lucentUrl}/members">Members</a>
-
-    @if($channel->generateCommand)
-        <a href="{channel.lucentUrl}/build-report" class="btn btn-outline-primary btn-sm d-">Build website</a>
-    @endif
-
-    <!--        <div>-->
-    <!--            <form method="GET">-->
-    <!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
-    <!--                       class="form-control" required/>-->
-    <!--            </form>-->
-    <!--        </div>-->
-</div>
-<div>
-    <a class="nav-item" href="/lucent/profile">
-        <x-lucent::avatar side="28" :user="$user"></x-lucent::avatar>
-
-    </a>
-</div>

front/views/layouts/account.blade.php

@@ -1,34 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <title>@yield('title') - Lucent Data Platform</title>
-
-    @if(config("lucent.env") === "production")
-        <!-- if production -->
-        <link rel="stylesheet" href="/vendor/lucent/dist/{{ $manifest['main.js']["css"][0] }}"/>
-        <script type="module" src="/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="/favicon.ico"/>--}}
-
+    <title>@yield('title') - {{ config("lucent.name") }}</title>
+    @include("lucent::includes.assets")
+    <link rel="icon" type="image/x-icon" href="/favicon.ico"/>
 </head>
 
 <body>
-    <div>
     @yield('content')
-    </div>
-
 </body>
-
 </html>

front/views/layouts/channel.blade.php

@@ -1,33 +1,16 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <title>@yield('title') - Lucent Data Platform</title>
-    @if(config("lucent.env") == "production")
-        <!-- if production -->
-        <link rel="stylesheet" href="/vendor/lucent/dist/{{ $manifest['main.js']["css"][0] }}"/>
-        <script type="module" src="/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
-
+    <title>@yield('title') - {{ config("lucent.name") }}</title>
+    @include("lucent::includes.assets")
+    @stack("scripts")
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
-
 </head>
 
 <body>
-
-
     @yield('content')
-
-
 </body>
-
 </html>

front/views/new/edit/edit.blade.php

@@ -0,0 +1,25 @@
+@extends("lucent::layouts.channel")
+@pushonce("scripts")
+    <script type="module" src="/vendor/lucent/public/js/editor.js"></script>
+@endpushonce
+@section("title")
+    Edit Record
+@endsection
+@section("content")
+
+    <script type="application/json" id="edit-data">{!! json_encode($record)!!}</script>
+
+    @foreach($schema->groups as $group)
+        <div>{{$group}}</div>
+        @foreach($schema->fields as $field)
+            @php
+                $fieldId = "field-".$field->data->name."-".$record->id;
+            @endphp
+            <div class="editor-field">
+                @include("lucent::new.edit.field-header" ,["id" => $fieldId])
+                {!!  $field->renderForm($record, $fieldId) !!}
+            </div>
+        @endforeach
+
+    @endforeach
+@endsection

front/views/new/edit/field-header.blade.php

@@ -0,0 +1,11 @@
+<div class="field-header">
+    <div class="labels">
+        <div class="label-and-help">
+            <label for={{$id}}>{{$field->data->label}}</label>
+            @if($field->data->help)
+                <small class="help-text light-text">{{$field->data->help}}</small>
+            @endif
+        </div>
+        <span tabindex="-1"><code class="field-id">{{$field->data->name}}</code></span>
+    </div>
+</div>

front/views/new/edit/fields/file.blade.php

@@ -0,0 +1,8 @@
+@pushonce("scripts")
+    <script>
+        console.log("cool");
+    </script>
+@endpushonce
+
+
+yo

front/views/new/edit/fields/reference.blade.php

@@ -0,0 +1,8 @@
+@pushonce("scripts")
+    <script>
+        console.log("cool");
+    </script>
+@endpushonce
+
+
+yo

front/views/new/edit/fields/rich.blade.php

@@ -0,0 +1,8 @@
+@pushonce("scripts")
+    <script>
+        console.log("cool");
+    </script>
+@endpushonce
+
+
+yo

front/views/new/edit/fields/slug.blade.php

@@ -0,0 +1,8 @@
+@pushonce("scripts")
+    <script>
+        console.log("cool");
+    </script>
+@endpushonce
+
+
+yo

front/views/new/edit/fields/text.blade.php

@@ -0,0 +1,15 @@
+@pushonce("scripts")
+    <script>
+        console.log("cool");
+    </script>
+@endpushonce
+
+
+<input
+        id="{{$fieldId}}"
+        name="{{$data->name}}"
+        type="text"
+        class="form-control"
+        autocomplete="off"
+        value="{{$record->data[$data->name]}}"
+/>