fix rebuild thumbs

.gitignore

@@ -6,4 +6,3 @@ front/node_modules
 front/npm-debug.log
 /.idea
 /.vscode
-/.claude

.phpactor.json

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

composer.json

@@ -1,39 +1,44 @@
 {
-  "name": "lexx27/lucent",
+    "name": "lexx27/lucent",
-  "type": "library",
+    "type": "library",
-  "description": "Lucent cms",
+    "description": "Lucent cms",
-  "license": "MIT",
+    "license": "MIT",
-  "require": {
+    "require": {
-    "ext-xml": "*",
+        "ext-xml": "*",
-    "ext-zip": "*",
+        "ext-zip": "*",
-    "ext-imagick": "*",
+        "ext-sqlite3": "*",
-    "ext-pdo": "*",
+        "ext-imagick": "*",
-    "php": "^8.4",
+        "ext-pdo": "*",
-    "intervention/image": "^2.7",
+        "php": "^8.3",
-    "phpoption/phpoption": "^1.9",
+        "guzzlehttp/guzzle": "^7.2",
-    "spatie/image-optimizer": "^1.6",
+        "intervention/image": "^2.7",
-    "staudenmeir/laravel-cte": "^1.0"
+        "phpoption/phpoption": "^1.9",
-  },
+        "spatie/image-optimizer": "^1.6",
-  "require-dev": {
+        "staudenmeir/laravel-cte": "^1.0",
-    "phpstan/phpstan": "^1.8",
+        "mustache/mustache": "^2.14"
-    "laravel/framework": "^10.10"
+
-  },
-  "autoload": {
-    "psr-4": {
-      "Lucent\\": "src/"
     },
-    "files": [
+    "require-dev": {
-      "src/Response.php",
+        "phpstan/phpstan": "^1.8",
-      "src/macros.php"
+        "laravel/framework": "^10.10"
-    ]
+    },
-  },
+    "autoload": {
-  "extra": {
+        "psr-4": {
-    "laravel": {
+            "Lucent\\": "src/"
-      "providers": [
+        },
-        "Lucent\\LucentServiceProvider"
+        "files": [
-      ]
+            "src/Response.php",
-    }
+            "src/macros.php"
-  },
+        ]
-  "minimum-stability": "stable",
+    },
-  "prefer-stable": true
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Lucent\\LucentServiceProvider"
+            ]
+        }
+    },
+    "minimum-stability": "stable",
+    "prefer-stable": true
+    
 }

docs/Fields.md

@@ -5,221 +5,374 @@ include_toc: true
 
 # Fields
 
-Fields define the columns of a schema. Each field has a `ui` type that controls both storage and the admin UI component rendered.
+Fields are similar to a table's columns in a relational databases. 
 
-## Common Optional Properties
+## Available fields for Collections and Files
-
-Most fields share these optional properties:
-
-| Property | Description |
-|---|---|
-| `required` | Whether the field must have a value to save as `published` |
-| `nullable` | Allow saving as `null` |
-| `help` | Help text shown below the input |
-| `default` | Default value when creating a new record |
-| `readonly` | Prevent editing from the UI |
-| `group` | Tab group this field belongs to |
-
-
-## Field Types
 
 ### text
+One-line text input
 
-One-line text input.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field 
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional 
-|---|---|
-| `min` | Minimum character count |
-| `max` | Maximum character count |
-| `selectOptions` | Array of options. Strings or `[{value, label}]` objects |
-| `optionsFrom` | Schema name to load options from |
-| `optionsField` | Field from `optionsFrom` to use as the value |
-| `optionsSuggest` | Allow typing new values not in the options list |
 
----
+- **required**: Is the field required to save the record 
+- **nullable**: Can the field be saved as null
+- **min**: Minimum characters 
+- **max**: Maximum characters 
+- **help**: Help text 
+- **default**: Default value when creating new record 
+- **readonly**: Cannot edit this value from the UI  
+- **optionsFrom**: Schema to choose options from  
+- **optionsField**: Field's value to insert  
+- **optionsSuggest**: Allow to insert new values  
+- **selectOptions**: Array of options to select from. Or array of objects `[{value,label}]` 
+- **group**: The group that this field belongs to
 
 ### textarea
+textarea input
 
-Multi-line text input.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional
-|---|---|
-| `min` | Minimum character count |
-| `max` | Maximum character count |
 
----
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **min**: Minimum characters
+- **max**: Maximum characters
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **group**: The group that this field belongs to
 
 ### slug
+Slug input. Generates automatically if left empty 
 
-Slug input. Auto-generates from a source field if left empty.
+required
 
-**Required:** `name`, `label`, `source`
+- **name**: The id of the field
+- **label**: The friendly name of the field
+- **source**: The source field from which it generates
 
-| Property | Description |
+optional 
-|---|---|
-| `source` | Field name to generate the slug from |
-| `min` | Minimum character count |
-| `max` | Maximum character count |
 
----
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **min**: Minimum characters
+- **max**: Maximum characters
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **group**: The group that this field belongs to
 
 ### rich
+WYSIWYG editor
 
-WYSIWYG rich text editor.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional
-|---|---|
-| `min` | Minimum character count |
-| `max` | Maximum character count |
 
----
+- **required**: Is the field required to save the record
-
+- **nullable**: Can the field be saved as null
-### markdown
+- **min**: Minimum characters
-
+- **max**: Maximum characters
-Markdown editor.
+- **help**: Help text
-
+- **default**: Default value when creating new record
-**Required:** `name`, `label`
+- **readonly**: Cannot edit this value from the UI
-
+- **group**: The group that this field belongs to
-| Property | Description |
-|---|---|
-| `min` | Minimum character count |
-| `max` | Maximum character count |
-
----
 
 ### number
+Any numeric value
 
-Numeric input.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional
-|---|---|
-| `decimals` | Number of decimal places. Default: `0` |
-| `min` | Minimum value |
-| `max` | Maximum value |
-| `optionsFrom` | Schema name to load options from |
-| `optionsField` | Field from `optionsFrom` to use as the value |
-| `optionsSuggest` | Allow typing new values not in the options list |
 
----
+- **decimals**: default is 0
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **min**: Minimum characters
+- **max**: Maximum characters
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **optionsFrom**: Schema to choose options from
+- **optionsField**: Field's value to insert
+- **optionsSuggest**: Allow to insert new values
+- **group**: The group that this field belongs to
 
 ### checkbox
+True or false
 
-Boolean true/false toggle.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
----
+optional
+
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **group**: The group that this field belongs to
 
 ### color
+Color picker
 
-Color picker.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional
-|---|---|
-| `selectOptions` | Restrict to a predefined palette |
-| `optionsFrom` | Schema name to load options from |
-| `optionsField` | Field from `optionsFrom` to use as the value |
-| `optionsSuggest` | Allow typing new values not in the options list |
 
----
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **optionsFrom**: Schema to choose options from
+- **optionsField**: Field's value to insert
+- **optionsSuggest**: Allow to insert new values
+- **selectOptions**: Array of options to select from. Or array of objects `[{value,label}]`
+- **group**: The group that this field belongs to
 
 ### date
+Date select
 
-Date selector. Stores as a date string.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional
-|---|---|
-| `min` | Minimum date |
-| `max` | Maximum date |
-| `selectOptions` | Predefined date options |
-| `optionsFrom` | Schema name to load options from |
-| `optionsField` | Field from `optionsFrom` to use as the value |
 
----
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **min**: Minimum date
+- **max**: Maximum date
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **optionsFrom**: Schema to choose options from
+- **optionsField**: Field's value to insert
+- **optionsSuggest**: Allow to insert new values
+- **selectOptions**: Array of options to select from. Or array of objects `[{value,label}]`
+- **group**: The group that this field belongs to
 
 ### datetime
+Date and time selector
 
-Date and time selector. Stores as an ISO 8601 string.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
-| Property | Description |
+optional
-|---|---|
-| `min` | Minimum datetime |
-| `max` | Maximum datetime |
-| `selectOptions` | Predefined datetime options |
-| `optionsFrom` | Schema name to load options from |
-| `optionsField` | Field from `optionsFrom` to use as the value |
 
----
+- **required**: Is the field required to save the record
-
+- **nullable**: Can the field be saved as null
-### uuid
+- **min**: Minimum date
-
+- **max**: Maximum date
-UUID text field. Stores an arbitrary UUID string. Typically used as a read-only external reference ID.
+- **help**: Help text
-
+- **default**: Default value when creating new record
-**Required:** `name`, `label`
+- **readonly**: Cannot edit this value from the UI
-
+- **optionsFrom**: Schema to choose options from
----
+- **optionsField**: Field's value to insert
+- **optionsSuggest**: Allow to insert new values
+- **selectOptions**: Array of options to select from. Or array of objects `[{value,label}]`
+- **group**: The group that this field belongs to
 
 ### json
+Json data
 
-Raw JSON data field. Accepts either a JSON string or a plain array — both are stored as JSON.
+required
 
-**Required:** `name`, `label`
+- **name**: The id of the field
+- **label**: The friendly name of the field
 
----
+optional
+
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **group**: The group that this field belongs to
+
+### markdown
+Markdown editor
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+
+optional
+
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **min**: Minimum characters
+- **max**: Maximum characters
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **group**: The group that this field belongs to
 
 ### file
+Upload or select files
 
-Upload or select files from a files schema. Files can be uploaded directly or browsed from previously uploaded files. Image files (jpeg, png, webp, gif, tiff) automatically get a 300×300 thumbnail generated on upload.
+required
 
-**Required:** `name`, `label`, `collections`
+- **name**: The id of the field
+- **label**: The friendly name of the field
+- **collections**: File collections to choose from
 
-| Property | Description |
+optional
-|---|---|
+
-| `collections` | Array of file schema names to choose from |
+- **mime**: The mime types allowed to select
-| `mime` | Allowed MIME types e.g. `["image/*"]` |
+- **nullable**: Can the field be saved as null
-| `min` | Minimum number of files |
+- **min**: Minimum files
-| `max` | Maximum number of files |
+- **max**: Maximum files
+- **help**: Help text
+- **group**: The group that this field belongs to
 
----
 
 ### reference
+Reference other records
 
-Reference records from another collection.
+required
 
-**Required:** `name`, `label`, `collections`
+- **name**: The id of the field
+- **label**: The friendly name of the field
+- **collections**: Collections to choose from
 
-| Property | Description |
+optional
-|---|---|
-| `collections` | Array of collection schema names to reference |
-| `min` | Minimum number of references |
-| `max` | Maximum number of references |
 
----
+- **nullable**: Can the field be saved as null
+- **min**: Minimum files
+- **max**: Maximum files
+- **help**: Help text
+- **group**: The group that this field belongs to
 
-## Example Field
 
-```json
+### block
-{
+The block editor
-  "ui": "text",
+
-  "name": "title",
+required
-  "label": "Title",
+
-  "required": true,
+- **name**: The id of the field
-  "min": 3,
+- **label**: The friendly name of the field
-  "max": 200,
+- **schema**: The block schema name 
-  "help": "The main title of the post"
+
-}
+optional
-```
+
+- **required**: Is the field required to save the record
+- **nullable**: Can the field be saved as null
+- **help**: Help text
+- **default**: Default value when creating new record
+- **readonly**: Cannot edit this value from the UI
+- **group**: The group that this field belongs to
+
+  )
+## Available fields for the Block Editor
+
+### heading
+Single-line text
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+
+optional
+
+- **min**: Minimum date
+- **max**: Maximum date
+- **default**: Default value when creating new record
+
+### textarea
+Multiline text
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+
+optional
+
+- **min**: Minimum date
+- **max**: Maximum date
+- **default**: Default value when creating new record
+
+### rich
+WYSIWYG editor
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+
+optional
+
+- **min**: Minimum date
+- **max**: Maximum date
+- **default**: Default value when creating new record
+
+
+### markdown
+Markdown editor
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+
+optional
+
+- **min**: Minimum date
+- **max**: Maximum date
+- **default**: Default value when creating new record
+
+### file
+Choose files
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+- **collections**: File collections to choose from
+
+optional
+- **mime**: The mime types allowed to select
+- **min**: Minimum date
+- **max**: Maximum date
+- **default**: Default value when creating new record
+
+### reference
+Choose files
+
+required
+
+- **name**: The id of the field
+- **label**: The friendly name of the field
+- **collections**: Collections to choose from
+
+optional
+- **min**: Minimum date
+- **max**: Maximum date
+- **default**: Default value when creating new record

docs/Queries.md

@@ -5,169 +5,88 @@ include_toc: true
 
 # Queries
 
-The `Query` class is the main way to fetch records. Inject it via the Laravel container.
+## Graph or Tree
+
+Queries can return results in 2 formats. A graph or a tree.
+
+Graphs results are a collection of records  (nodes) and a collection of edges. This format is more useful for network visualization.
+
+The tree format is more straightforward as it returns a collection of records. Each record has a **_children** and a **_parents** field and the tree can continue upwards or downwards according to the depth you have requested.
+
+For example to request records with their children and their children's children:
 
 ```php
-public function __construct(private Query $query) {}
+$query->childrenDepth(2);
 ```
+Maybe you only want to get a specific type of relationship:
 
-## Return Formats
+```php
-
+$query->childrenDepth(2)->childrenFields(["categories"]);
-Queries return results in two formats:
+```
-
-**Graph** — via `->run()`. Returns a `Graph` object with `records` and `edges` collections. Useful for network-style data.
-
-**Tree** — via `->tree()`. Returns a flat `Collection` of records where each record has `_children` and `_parents` arrays populated based on the requested depth. This is the most common format.
-
-## Chaining Methods
-
-All methods return `$this` and can be chained:
-
-| Method | Description |
-|---|---|
-| `->filter(array)` | Add an AND filter |
-| `->orFilter(array)` | Add an OR filter (grouped) |
-| `->limit(int)` | Max number of root records to return |
-| `->skip(int)` | Offset for pagination |
-| `->sort(string)` | Sort by field. Prefix with `-` for descending e.g. `"-_sys.updatedAt"` |
-| `->status(array)` | Filter by status array e.g. `["published", "draft"]` |
-| `->onlyPublished()` | Shorthand for `->status(["published"])` |
-| `->childrenDepth(int)` | How many levels of children to load |
-| `->childrenLimit(int)` | Max children per record |
-| `->childrenFields(array)` | Only follow specific relationship fields |
-| `->parentsDepth(int)` | How many levels of parents to load |
-| `->parentsLimit(int)` | Max parents per record |
-| `->parentFields(array)` | Only follow specific relationship fields |
-| `->notLinked(string)` | Return only records with no parents |
-| `->run()` | Execute and return a `Graph` |
-| `->tree()` | Execute and return a `Collection` (tree format) |
-| `->runWithCount()` | Execute and return a `Graph` with a `total` count |
-
 
 ## Filters
 
-Filter keys use the format `field_operator`. When no operator suffix is given, `eq` is assumed.
+You can filter your query with the following format:
 
 ```php
 $query->filter(["field_operator" => "value"]);
 
-// No operator = eq
+// example:
-$query->filter(["schema" => "blogPosts"]);
 
-// With operator
+$query->filter(["date_lt" => "2020-09-15"]);
-$query->filter(["_sys.updatedAt_gte" => "2024-01-01"]);
 ```
 
-### Operator Reference
+Or filters are also available:
-
-| Operator | Description |
-|---|---|
-| _(none)_ or `eq` | Equals (string) |
-| `ne` | Not equals (string) |
-| `eqnum` | Equals (numeric) |
-| `neqnum` | Not equals (numeric) |
-| `eqtrue` | Equals `true` |
-| `eqfalse` | Equals `false` |
-| `netrue` | Not equals `true` |
-| `nefalse` | Not equals `false` |
-| `regex` | Regular expression match |
-| `in` | Value is in array (strings) |
-| `nin` | Value is not in array (strings) |
-| `innum` | Value is in array (numeric) |
-| `ninnum` | Value is not in array (numeric) |
-| `lt` | Less than |
-| `lte` | Less than or equal |
-| `gt` | Greater than |
-| `gte` | Greater than or equal |
-| `null` | Field is null |
-| `nnull` | Field is not null |
-| `exists` | Field key exists |
-| `nexists` | Field key does not exist |
-| `filter` | Raw filter passthrough |
-
-### OR Filters
 
 ```php
 $query
-    ->filter(["schema" => "blogPosts"])
+    ->filter(["price_eqn" => 10])
-    ->orFilter(["title_regex" => "search", "slug_regex" => "search"]);
+    ->orFilter(["title_regex" => "search", "slug_regex" => "search"])
+    ;
 ```
+## Operator List
 
-Each `orFilter` call groups its arguments with OR between them. Multiple `orFilter` / `filter` calls are AND-ed together.
+- regex
+- eq
+- ne
+- eqnum
+- neqnum
+- filter
+- eqtrue
+- eqfalse
+- netrue
+- nefalse
+- in: 
+- innum
+- nin
+- ninnum
+- lt
+- lte
+- gt
+- gte
+- null
+- nnull
+- exists
+- nexists
 
-### Cross-Schema (Children) Filters
+## Example
 
-You can filter records by properties of their related records using the `children.` prefix:
+Get 10 posts from the sports category as a tree
 
-```php
-$query->filter([
-    "schema" => "blogPosts",
-    "children.categories.data.slug" => "sports",
-]);
-```
-
-This returns `blogPosts` that have a child in `categories` where `slug` equals `sports`.
-
-
-## Nested Data Fields
-
-Use dot notation to filter on JSON data fields and system fields:
-
-```php
-// Filter on a data field
-$query->filter(["data.status_eq" => "draft"]);
-
-// Filter on a system field
-$query->filter(["_sys.updatedAt_gte" => "2024-01-01"]);
-```
-
-
-## Examples
-
-**Get published blog posts, newest first:**
-
-```php
-$posts = $query
-    ->filter(["schema" => "blogPosts"])
-    ->onlyPublished()
-    ->sort("-_sys.updatedAt")
-    ->limit(10)
-    ->tree();
-```
-
-**Get posts from a specific category with children loaded:**
 
 ```php
 $posts = $query
     ->filter([
-        "schema" => "blogPosts",
+        "schema" => "posts",
         "children.categories.data.slug" => "sports",
-    ])
+       ]
+    )
     ->childrenDepth(1)
-    ->childrenFields(["categories"])
     ->limit(10)
     ->tree();
+
+$posts->map(...)->toArray();
+
 ```
 
-**Paginate records:**
 
-```php
-$graph = $query
-    ->filter(["schema" => "blogPosts"])
-    ->limit(20)
-    ->skip(40)
-    ->runWithCount();
-
-$posts = $graph->tree();
-$total = $graph->total;
-```
-
-**Search across fields:**
-
-```php
-$results = $query
-    ->filter(["schema" => "blogPosts"])
-    ->orFilter(["title_regex" => $term, "slug_regex" => $term])
-    ->limit(10)
-    ->tree();
-```

docs/Schemas.md

@@ -5,119 +5,80 @@ include_toc: true
 
 # Schemas
 
-Schemas define both the shape of your data and how the admin UI behaves.
+Schemas define both the shape of your data and how the UI on the admin will behave.
 
-There are 2 types of schemas:
+There are 3 types of schemas
 
-- **collection** — Regular data records
+- Collections: Normal data
-- **files** — Images and file uploads
+- Files: Images and files 
+- Block: Used in the block editor
 
 
 ## Collection Reference
 
-| Field | Required | Description |
+- **name**: The ID of the collection. Camelcase and plural is the recommended format ex. blogPosts
-|---|---|---|
+- **label**: The friendly name of the schema
-| `name` | yes | Unique ID. Use camelCase plural e.g. `blogPosts` |
+- **type**: The type of the collection. Should be "collection" 
-| `label` | yes | Friendly display name |
+- **visible**: An array of field id to show on the content browser _optional_
-| `type` | yes | Must be `"collection"` |
+- **groups**: A list if group ids to separate your field in different tabs _optional_
-| `fields` | yes | Array of field definitions. See [Fields](Fields.md) |
+- **fields**: The list of your fields. Look the field reference for more
-| `visible` | no | Field IDs to show in the content browser list |
+- **isEntry**: If this schema is important, it will show be visible on the main the sidebar. Default: false _optional_
-| `groups` | no | Group IDs to split fields into tabs |
+- **sortBy**: The default sorting in the content browser _optional_
-| `isEntry` | no | Show in sidebar. Default: `false` |
+- **cardTitle**: Mustache code to customize the preview field _optional_
-| `sortBy` | no | Default sort in browser. Prefix with `-` for descending e.g. `-_sys.updatedAt` |
+- **cardImage**: Field name of image you want to use as a preview image _optional_
-| `cardTitle` | no | Mustache template for the record preview title e.g. `{{name}} - {{slug}}` |
+- **revisions**: How many revisions are going to be kept for each record _optional_
-| `cardImage` | no | Field name to use as the preview image |
+- **read**: Array of user groups that have read permissions _optional_
-| `revisions` | no | Number of revisions to keep per record. Default: `0` (disabled) |
+- **write**: Array of user groups that have write permissions _optional_
-| `read` | no | Roles with read access. Empty means all roles can read |
-| `write` | no | Roles with write access. Empty means all roles can write |
 
 
 ## Files Reference
 
-| Field | Required | Description |
+- **name**: The ID of the collection. Camelcase and plural is the recommended format ex. blogPosts
-|---|---|---|
+- **label**: The friendly name of the schema
-| `name` | yes | Unique ID. Use camelCase plural e.g. `heroImages` |
+- **type**: The type of the collection. Should be "files"
-| `label` | yes | Friendly display name |
+- **path**: The relative directory that these files will be stored.
-| `type` | yes | Must be `"files"` |
+- **groups**: A list if group ids to separate your field in different tabs _optional_
-| `fields` | yes | Array of field definitions. See [Fields](Fields.md) |
+- **fields**: The list of your fields. Look the field reference for more
-| `groups` | no | Group IDs to split fields into tabs |
+- **isEntry**: If this schema is important, it will show be visible on the main the sidebar _optional_
-| `isEntry` | no | Show in sidebar. Default: `false` |
+- **sortBy**: The default sorting in the content browser _optional_
-| `sortBy` | no | Default sort in browser |
+- **cardTitle**: Mustache code to customize the preview field _optional_
-| `cardTitle` | no | Mustache template for the record preview title |
+- **revisions**: How many revisions are going to be kept for each record _optional_
-| `cardImage` | no | Field name to use as the preview image |
+- **read**: Array of user groups that have read permissions _optional_
-| `revisions` | no | Number of revisions to keep per record |
+- **write**: Array of user groups that have write permissions _optional_
-| `read` | no | Roles with read access |
-| `write` | no | Roles with write access |
-
-### File Metadata
-
-Every uploaded file is automatically stored with the following metadata (stored in `lucent_files`):
-
-| Field | Description |
-|---|---|
-| `id` | Unique file ID |
-| `recordId` | ID of the record this file belongs to |
-| `originalName` | Original filename as uploaded |
-| `mime` | MIME type e.g. `image/webp` |
-| `path` | Storage path e.g. `files/{recordId}/{filename}` |
-| `size` | File size in bytes |
-| `width` | Image width in pixels (0 for non-images) |
-| `height` | Image height in pixels (0 for non-images) |
-| `checksum` | SHA-1 hash of the file contents |
-
-Image files (jpeg, png, webp, gif, tiff) also get a 300×300 thumbnail generated automatically at `thumbs/{path}`, plus any image filter presets configured in `lucent.imageFilters`.
 
 
-## System Fields
+A full Collection example without the fields: 
-
-Every record automatically has these read-only system fields available in queries:
-
-| Field | Description |
-|---|---|
-| `_sys.createdAt` | ISO 8601 creation timestamp |
-| `_sys.updatedAt` | ISO 8601 last update timestamp |
-| `_sys.createdBy` | User ID who created the record |
-| `_sys.updatedBy` | User ID who last updated the record |
-| `_sys.version` | Revision version number |
-| `status` | `draft` or `published` |
-
-
-## Example
 
 ```json
 {
-  "schemas": [
+  "label": "Departments",
-    {
+  "name": "departments",
-      "label": "Blog Posts",
+  "isEntry": true,
-      "name": "blogPosts",
+  "type": "collection",
-      "isEntry": true,
+  "visible": [
-      "type": "collection",
+    "slug",
-      "visible": [
+    "cover",
-        "title",
+    "_sys.updatedAt",
-        "slug",
+    "status"
-        "_sys.updatedAt",
-        "status"
-      ],
-      "groups": [
-        "Content",
-        "SEO"
-      ],
-      "sortBy": "-_sys.createdAt",
-      "cardTitle": "{{title}}",
-      "cardImage": "cover",
-      "revisions": 15,
-      "read": [
-        "admin",
-        "editors",
-        "reviewers"
-      ],
-      "write": [
-        "admin",
-        "editors"
-      ],
-      "fields": []
-    }
   ],
-  "roles": ["admin", "editors", "reviewers"]
+  "groups": [
+    "Extra Info",
+    "Metadata",
+    "SEO"
+  ],
+  "sortBy": "-_sys.createdAt",
+  "schemaTitle": "{{name}} {{slug}}",
+  "schemaImage": "cover",
+  "revisions": 15,
+  "read": [
+    "admin",
+    "editors",
+    "reviewers"
+  ],
+  "write": [
+    "admin",
+    "editors"
+  ],
+  "fields": []
 }
-```
+```

docs/Static Generator.md

@@ -5,94 +5,51 @@ To generate the static content of the website, lucent provides a helper class.
 
 ## Laravel Command
 
-Create an Artisan command and inject `StaticGenerator`:
+Just create a command and name it as you like. Make sure to inject the StaticGenerator class.
 
 ```php
-class GenerateStatic extends Command
+public function __construct(
-{
+    public StaticGenerator $staticGenerator,
-    protected $signature = 'generate:static';
+) {
-
+    parent::__construct();
-    public function __construct(
-        public StaticGenerator $staticGenerator,
-        public Context $ctx,
-    ) {
-        parent::__construct();
-    }
-
-    public function handle(): void
-    {
-        $this->staticGenerator->run('generate:static', function ($writer) {
-            $writer->save("/", $this->ctx->render("homepage"));
-            $writer->save("/about", $this->ctx->render("about"));
-        });
-    }
 }
 ```
 
-`run(string $signature, callable $callback)` — the first argument must match the command's artisan signature. This is used to stream live build logs in the Lucent UI. The callback receives a `Writer` instance.
+## Redirect command
 
-
+There are cases which is useful to create a redirect like when you have a multilingual website:
-## Writer: save
-
-Writes an HTML file at the given path:
 
 ```php
-$writer->save("/blog/my-post", $html);
+$this->staticGenerator->run(function ($writer) {
-// writes to: storage/lucent/build/blog/my-post/index.html
+    $writer->createRedirect("/", "/el");
+});
 ```
 
-An optional third argument changes the file extension (default `"html"`).
+## The Writer save command
 
+In order to create an html file, you have to use the writer's save command
 
-## Writer: createRedirect
+The first argument is the url and the second is the rendered HTML. That's where the page classes do come handy.
-
-Generates an HTML meta-refresh redirect. Useful for root-level locale redirects:
 
 ```php
-$writer->createRedirect("/", "/el");
+$this->staticGenerator->run(function ($writer) {
-$writer->createRedirect("/", "/el", "Redirecting", "Please wait...");
+    $writer->save("/", $this->ctx->render("homepage"));
+    $writer->save("/about", $this->ctx->render("about"));
+});
 ```
 
-Arguments: `from`, `to`, `title` (default `"Redirecting"`), `message` (default `"Redirecting Soon..."`).
-
-
-## Writer: recordIterator
-
-Iterates over all records in paginated batches — useful when there are too many records to load at once:
-
-```php
-$writer->recordIterator(
-    query: fn(int $limit, int $skip) => $query
-        ->filter(["schema" => "blogPosts"])
-        ->onlyPublished()
-        ->limit($limit)
-        ->skip($skip)
-        ->tree(),
-    parser: function ($records) use ($writer) {
-        foreach ($records as $record) {
-            $writer->save(
-                "/blog/" . $record->data->slug,
-                $this->ctx->render("blogPost", $record),
-            );
-        }
-    },
-);
-```
-
-Signature: `recordIterator(callable $query, callable $parser, int $skip = 0, int $limit = 100): int`
-
-The `$query` callable receives `($limit, $skip)` and must return a collection. Iteration stops automatically when a batch returns zero records.
-
-
 ## Storage and Permissions
 
-All generated HTML is written to `storage/lucent/build` during the run, then atomically swapped to `storage/lucent/live` on completion. Create the public symlink with:
+All the generated html is stored on `storage/lucent/live`
+In order to make it accessible you have to create symlink:
 
 ```bash
 php artisan lucent:livelink
 ```
 
-The static site is then accessible at `http://localhost:8000/live`. To serve it without the `/live` prefix, add this to your nginx vhost:
+Now your static website is accessible in http://localhost:8000/live
+
+But it would not be nice to have the **live** prefix everywhere. That's why you need to make the following tweak in the nginx vhost
 
 ```nginxconf
 location / {
@@ -100,30 +57,14 @@ location / {
 }
 ```
 
-
-## Artisan Commands
-
-| Command | Description |
-|---|---|
-| `lucent:setup-db` | Create all Lucent database tables |
-| `lucent:schemas` | Compile schema JSON files |
-| `lucent:livelink` | Create the `public/live` symlink |
-| `lucent:rebuild:thumbnails` | Regenerate thumbnails for all uploaded images |
-| `lucent:removeOrphanEdges` | Remove edges pointing to deleted records |
-| `lucent:generate:collection {name}` | Scaffold a new collection schema JSON file |
-
-
 ## Build from the Lucent UI
 
-Register your generate command in `config/lucent.php` so admin users can trigger it from the UI:
+In your lucent.php config file you can define your command that is used to generate the static files:
 
 ```php
-"commands" => [
+"generateCommand" => "generate:static"
-    "generate:static" => "Generate Static Site",
-],
 ```
-
+That way, the users will be able to initiate the build command through the user interface.
-Only roles listed in `canBuild` can trigger commands from the UI.
 
 
 

docs/Website Setup.md

@@ -98,114 +98,4 @@ class Context
 }
 ```
 
-Add the middleware inside the HTTP Kernel file.
+Add the middleware inside the HTTP Kernel file.
-
-## Configuration
-
-After publishing the config (`php artisan vendor:publish --tag=lucent-config`), configure `config/lucent.php` via `.env`:
-
-| Key | Env var | Default | Description |
-|---|---|---|---|
-| `env` | `LUCENT_ENV` | `production` | `production` or `development` |
-| `auth` | `LUCENT_AUTH` | `lucent` | Auth driver: `lucent` or `lunar` |
-| `disk` | `LUCENT_DISK` | `public` | Laravel filesystem disk for uploads |
-| `schemas_path` | `LUCENT_SCHEMAS_PATH` | `resources/lucent/schemas` | Where schema JSON files live |
-| `database` | `LUCENT_DB_CONNECTION` | `DB_CONNECTION` | Database connection name |
-| `name` | `LUCENT_NAME` | `Lucent` | CMS display name |
-| `url` | `LUCENT_URL` | `APP_URL` | Base URL of the CMS |
-| `previewTarget` | `LUCENT_PREVIEW_TARGET` | `previewTarget` | Preview route parameter |
-| `commands` | — | `[]` | Artisan commands exposed to admin users (see [Static Generator](Static%20Generator.md)) |
-| `imageFilters` | — | `[]` | Image filter presets applied to uploads (see below) |
-| `canInvite` | — | `["admin"]` | Roles that can invite new users |
-| `canBuild` | — | `["admin"]` | Roles that can trigger static builds |
-| `systemUserId` | — | `""` | User ID used for console-initiated record writes |
-
-
-## Image Filters
-
-Image filters are Intervention Image filter classes applied to every uploaded image, producing additional versions (e.g. a cropped or watermarked variant). Each preset is stored at `templates/{name}/{original-path}` on the configured disk.
-
-Define filters in `config/lucent.php`:
-
-```php
-"imageFilters" => [
-    "hero" => \App\ImageFilters\HeroFilter::class,
-    "thumb" => \App\ImageFilters\ThumbFilter::class,
-],
-```
-
-A filter class must implement `Intervention\Image\Filters\FilterInterface`:
-
-```php
-namespace App\ImageFilters;
-
-use Intervention\Image\Filters\FilterInterface;
-use Intervention\Image\Image;
-
-class HeroFilter implements FilterInterface
-{
-    public function applyFilter(Image $image): Image
-    {
-        return $image->fit(1200, 600)->encode('webp', 80);
-    }
-}
-```
-
-Every uploaded image automatically gets a 300×300 WebP thumbnail at `thumbs/{path}` in addition to any configured presets.
-
-
-## Authentication
-
-Lucent uses **email-link (magic link) login** — no passwords. Users receive a time-limited link by email.
-
-### Auth modes
-
-Set `LUCENT_AUTH` to choose how users are stored:
-
-| Value | Description |
-|---|---|
-| `lucent` | Users stored in the `lucent_users` table. Supports roles. |
-| `lunar` | Delegates to Lunar's `lunar_staff` table. Roles not supported. |
-
-### Login flow
-
-1. User submits their email at `/lucent/login`
-2. A 32-character token is stored against the user with a timestamp
-3. Lucent emails a login link containing the token
-4. User clicks the link → token is validated (must be used within **1 hour**)
-5. Session is established; token is cleared
-
-### First-time setup
-
-The `/lucent/register` route is only available when **no users exist** in the system. Once the first admin registers, the route returns a redirect to `/lucent/login`. Registration automatically assigns the `admin` role and sends a login link.
-
-### Middleware
-
-Two middleware aliases are available for your routes:
-
-| Alias | Description |
-|---|---|
-| `lucent.auth` | Requires an active Lucent session |
-| `lucent.guest` | Redirects authenticated users away |
-
-### Roles
-
-Roles are defined in your channel config. Only roles listed there are valid — anything else is silently stripped on assignment. The `canInvite` and `canBuild` config keys control which roles can invite users and trigger builds respectively.
-
-On console commands and non-`/lucent` routes, `currentUserId()` returns `config("lucent.systemUserId")` instead of the session user.
-
-
-## Database Tables
-
-All Lucent-managed tables use the `lucent_` prefix:
-
-| Table | Description |
-|---|---|
-| `lucent_records` | All collection and file schema records |
-| `lucent_files` | Uploaded file metadata |
-| `lucent_edges` | Relationships between records |
-| `lucent_revisions` | Record revision history |
-| `lucent_users` | Users (when using `lucent` auth mode) |
-| `lucent_command_logs` | Background command execution logs |
-
-These are created automatically by running `php artisan lucent:setup`.

front/dist/manifest.json

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

front/js/bootstrap.js

@@ -0,0 +1,51 @@
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from "axios";
+import {loadHtmxFormsBehaviour} from "./htmx-form.js";
+
+loadHtmxFormsBehaviour();
+window.axios = axios;
+export const axiosInstance = axios;
+
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+window.axios.interceptors.request.use(
+    function (config) {
+        let list;
+        list = document.querySelectorAll(".btn-spinner");
+        for (let i = 0; i < list.length; ++i) {
+            list[i].classList.add("spinner-on");
+            list[i].disabled = true;
+        }
+
+        return config;
+    },
+    function (error) {
+        return Promise.reject(error);
+    }
+);
+
+window.axios.interceptors.response.use(
+    function (response) {
+        let list;
+        list = document.querySelectorAll(".btn-spinner");
+        for (let i = 0; i < list.length; ++i) {
+            list[i].classList.remove("spinner-on");
+            list[i].disabled = false;
+        }
+        return response;
+    },
+    function (error) {
+        let list;
+        list = document.querySelectorAll(".btn-spinner");
+        for (let i = 0; i < list.length; ++i) {
+            list[i].classList.remove("spinner-on");
+            list[i].disabled = false;
+        }
+        return Promise.reject(error);
+    }
+);
+

front/js/helpers.js

@@ -1,156 +1,52 @@
-import { formatDistanceToNow, parseJSON, format, parse } from "date-fns";
+import {formatDistanceToNow, parseJSON, format, parse} from "date-fns";
 
 export function friendlyDate(date) {
-  return formatDistanceToNow(parseJSON(date), { addSuffix: true });
+    return formatDistanceToNow(parseJSON(date), {addSuffix: true});
 }
 
 export function readableDate(date) {
-  if (!date) {
+    if(!date){
-    return "";
+        return "";
-  }
+    }
-  return format(parseJSON(date), "dd MMM yyyy");
+    return format(parseJSON(date), "dd MMM yyyy");
 }
 
 export function readableDatetime(date) {
-  if (!date) {
+    if(!date){
-    return "";
+        return "";
-  }
+    }
 
-  return format(parseJSON(date), "dd MMM yyyy HH:mm");
+    return format(parseJSON(date), "dd MMM yyyy HH:mm");
 }
 
+
 export function stripHtml(html = "") {
-  let tmp = document.createElement("div");
+    let tmp = document.createElement("div");
-  tmp.innerHTML = html;
+    tmp.innerHTML = html;
-  return tmp.textContent || tmp.innerText || "";
+    return tmp.textContent || tmp.innerText || "";
 }
 
+
 export function randomId(length = 10) {
-  return Math.random()
+    return Math.random().toString(36).substring(2, length + 2);
-    .toString(36)
-    .substring(2, length + 2);
 }
 
 export function clickOutside(node) {
-  const handleClick = (event) => {
+
-    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+    const handleClick = event => {
-      node.dispatchEvent(new CustomEvent("click_outside", node));
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(
+                new CustomEvent('click_outside', node)
+            )
+        }
     }
-  };
 
-  document.addEventListener("click", handleClick, true);
+    document.addEventListener('click', handleClick, true);
 
-  return {
+    return {
-    destroy() {
+        destroy() {
-      document.removeEventListener("click", handleClick, true);
+            document.removeEventListener('click', handleClick, true);
-    },
+        }
-  };
+    }
 }
 
-export function apiFetch(url, options = {}) {
-  return fetch(url, {
-    ...options,
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
-      ...options.headers,
-    },
-  });
-}
-
-export function apiPost(url, body, options = {}) {
-  return fetch(url, {
-    ...options,
-    method: "POST",
-    body: JSON.stringify(body),
-    headers: {
-      "Content-Type": "application/json",
-      "X-Requested-With": "XMLHttpRequest",
-      "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
-      ...options.headers,
-    },
-  }).then((r) => r.json());
-}
-
-export function apiGet(url, options = {}) {
-  return fetch(url, {
-    ...options,
-    method: "GET",
-    headers: {
-      "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
-      "X-Requested-With": "XMLHttpRequest",
-      ...options.headers,
-    },
-  }).then((r) => r.json());
-}
-
-export function isEqual(db, ed) {
-  let isObject = (x) =>
-    typeof x === "object" && !Array.isArray(x) && x !== null;
-  let isArray = (x) => x?.constructor === Array;
-  let isEmpty = (x) => x === null || x === undefined || x == [];
-  const db_value = db ?? null;
-  const ed_value = ed ?? null;
-
-  if (isObject(db_value)) {
-    let keys = Object.keys(db_value);
-    return keys.reduce((acc, k) => {
-      if (acc === false) {
-        return false;
-      }
-      return isEqual(db_value?.[k], ed_value?.[k]);
-    }, true);
-  }
-  if (isArray(db_value)) {
-    return db_value.reduce((c, v, i) => {
-      if (c === false) {
-        return false;
-      }
-      return isEqual(v, ed_value?.[i]);
-    }, true);
-  }
-
-  if (isEmpty(db_value) && isEmpty(ed_value)) {
-    return true;
-  }
-
-  if (db_value == ed_value) {
-    return true;
-  }
-
-  return false;
-
-  // const ok = Object.keys,
-  //     tx = typeof x,
-  //     ty = typeof y;
-  // return x && y && tx === "object" && tx === ty
-  //     ? ok(x).length === ok(y).length &&
-  //           ok(x).every((key) => isEqual(x[key], y[key]))
-  //     : x === y;
-}
-
-export function debounce(fn, delay) {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => fn(...args), delay);
-  };
-}
-
-export function arrayUnique(array) {
-  return array.filter((value, index) => array.indexOf(value) === index);
-}
-
-export function arrayUniqueBy(items, uniqueBy) {
-  const ids = new Set(items.map((item) => item[uniqueBy]));
-  return [...ids].map((id) => items.find((i) => i[uniqueBy] === id));
-}
-export function arrayUniqueCb(items, aFilter) {
-  const cache = new Set();
-  return items.filter((item) => {
-    const cacheValue = aFilter(item);
-    if (cache.has(cacheValue)) return false;
-    cache.add(cacheValue);
-    return true;
-  });
-}

front/js/htmx-form.js

@@ -0,0 +1,24 @@
+export function loadHtmxFormsBehaviour(){
+    document.querySelectorAll(".form").forEach(el => {
+        initHtmxForm(el);
+    })
+
+}
+
+function initHtmxForm(el){
+    el.addEventListener("htmx:responseError", (e) => {
+        el.querySelector(".form-errors").innerHTML = e.detail.xhr.response;
+    });
+
+    const formEl = el.querySelector("form");
+
+    if(!formEl.getAttribute("hx-redirect")){
+        return;
+    }
+    el.addEventListener("htmx:afterOnLoad", (e) => {
+        if(e.detail.successful){
+            return window.location.href = formEl.getAttribute("hx-redirect");
+        }
+    });
+
+}

front/js/main.js

@@ -1,47 +1,53 @@
+import {axiosInstance} from "./bootstrap";
 import "../sass/app.scss";
 import Account from "./svelte/Account.svelte";
 import Channel from "./svelte/Channel.svelte";
-// import Mustache from "mustache";
+import Mustache from "mustache";
+import 'htmx.org';
+
+Mustache.escape = function (value) {
+    return value;
+};
 
-// Mustache.escape = function (value) {
-//   return value;
-// };
 
 // Define all components
 const entryComponents = {
-  account: Account,
+    account: Account,
-  channel: Channel,
+    channel: Channel,
 };
 
 let loadedComponents = [];
 
 let loadSvelte = function () {
-  loadedComponents.map((comp) => comp.$destroy());
+    loadedComponents.map((comp) => comp.$destroy());
-  loadedComponents = [];
+    loadedComponents = [];
 
-  const elements = document.body.querySelectorAll(".lucent-component");
+    const elements = document.body.querySelectorAll(".lucent-component");
-  if (elements.length === 0) {
+    if (elements.length === 0) {
-    return;
+        return;
-  }
-  const loadElement = function (element) {
-    const componentId = element.attributes["data-layout"].value;
-    const [_, component] = Object.entries(entryComponents).find(
-      ([key, _]) => componentId === key,
-    );
-    if (!component) {
-      return [];
     }
+    const loadElement = function (element) {
+        const componentId = element.attributes["data-layout"].value;
+        const [_, component] = Object.entries(entryComponents).find(
+            ([key, _]) => componentId === key
+        );
+        if (!component) {
+            return [];
+        }
 
-    const jsonData = document.getElementById("json-" + componentId).innerHTML;
+        const jsonData = document.getElementById(
-    const props = JSON.parse(jsonData);
+            "json-" + componentId
-    const compOptions = {
+        ).innerHTML;
-      target: element,
+        const props = JSON.parse(jsonData);
-      props: props,
+        props.axios = axiosInstance;
+        const compOptions = {
+            target: element,
+            props: props,
+        };
+
+        loadedComponents = [...loadedComponents, new component(compOptions)];
     };
-
+    Array.from(elements).map(loadElement);
-    loadedComponents = [...loadedComponents, new component(compOptions)];
-  };
-  Array.from(elements).map(loadElement);
 };
 
 // document.addEventListener("turbo:load", loadSvelte);

front/js/svelte/Account.svelte

@@ -3,13 +3,15 @@
     import Login from "./account/Login.svelte";
     import Verify from "./account/Verify.svelte";
     import Profile from "./account/Profile.svelte";
-    import { setContext } from "svelte";
+    import SetupIndex from "./setup/Index.svelte";
+    import {setContext} from "svelte";
 
     const components = {
         register: Register,
         login: Login,
         verify: Verify,
         profile: Profile,
+        setup: SetupIndex,
     };
 
     export let title;
@@ -21,7 +23,10 @@
     setContext("channel", channel);
     setContext("user", user);
 </script>
-
+<div style="text-align: center;background: var(--p20);padding: 20px;color: var(--p90)">
-<div>
+    <h1><a class="text-decoration-none" href="{channel.lucentUrl}">{channel.name ?? "Lucent Setup"}</a></h1>
-    <svelte:component this={components[view]} {channel} {title} {...data} />
 </div>
+<div>
+    <svelte:component this={components[view]} {title} {...data}/>
+</div>
+

front/js/svelte/Channel.svelte

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

front/js/svelte/account/Login.svelte

@@ -1,68 +1,54 @@
 <script>
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
-    import { apiPost } from "../../helpers";
+    import SpinnerButton from "../common/SpinnerButton.svelte";
 
     const channel = getContext("channel");
     let email = "";
-    let submitted = false;
+    let message = "";
 
     function login(e) {
         e.preventDefault();
 
-        apiPost(channel.lucentUrl + "/login", { email: email })
+        axios
-            .then(() => {
+            .post(channel.lucentUrl + "/login", {
-                submitted = true;
+                email: email,
             })
-            .catch(() => {});
+            .then((response) => {
+                console.log(response)
+                message = "You will receive an email with a login link"
+            })
+            .catch((error) => {
+            });
     }
+
 </script>
 
-<div class="scope-login">
+<div class="wrapper-tiny">
-    <div class="bg-image"></div>
+    {#if message}
-    <div class="login-form">
+        <div class="alert alert-info" role="alert">
-        {#if submitted}
+            {message}
-            <div class="alert alert-info" role="alert">
+        </div>
-                <p>
-                    You will receive an email with a login link at <b>{email}</b
-                    >.
-                </p>
-                <p>Check your spam folder</p>
-            </div>
-        {:else}
-            <div class="form">
-                <h2 class="mb-5">Enter Lucent</h2>
 
-                <form on:submit={login}>
+    {:else}
-                    <p>
-                        Submit your email address and you will receive a <b
-                            >login link</b
-                        > to your email
-                    </p>
-                    <p>Don't forget to check your spam folder</p>
-                    <div class="mt-5 mb-3">
-                        <label for="emailaddress" class="form-label"
-                            >Email address</label
-                        >
-                        <input
-                            type="email"
-                            bind:value={email}
-                            class="form-control"
-                            id="emailaddress"
-                            required
-                        />
-                    </div>
 
-                    <button class="bt bt-primary">
+        <form on:submit={login}>
-                        Send email
+            <div class="mb-3">
-                        <img
+                <label for="emailaddress" class="form-label">Email address</label>
-                            alt="indicator"
+                <input
-                            id="indicator"
+                        type="email"
-                            class="htmx-indicator"
+                        bind:value={email}
-                            src="/img/spinner.svg"
+                        class="form-control"
-                        />
+                        id="emailaddress"
-                    </button>
+                        required
-                </form>
+                />
             </div>
-        {/if}
+
-    </div>
+
+            <div class="text-center mt-5 d-block">
+                <SpinnerButton label="Login"/>
+            </div>
+
+
+        </form>
+    {/if}
 </div>

front/js/svelte/account/Profile.svelte

@@ -2,9 +2,8 @@
     import ErrorAlert from "../common/ErrorAlert.svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
     import Avatar from "./Avatar.svelte";
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
     import SuccessAlert from "../common/SuccessAlert.svelte";
-    import { apiPost } from "../../helpers";
 
     const user = getContext("user");
     const channel = getContext("channel");
@@ -17,15 +16,16 @@
         e.preventDefault();
         errorMessage = "";
 
-        apiPost(channel.lucentUrl + "/account/update-name", {
+        axios
-            name: name,
+            .post(channel.lucentUrl + "/account/update-name", {
-        })
+                name: name,
+            })
             .then((response) => {
                 successAlert.show();
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({ errorMessage });
+                console.log({errorMessage});
             });
     }
 
@@ -33,55 +33,55 @@
         e.preventDefault();
         errorMessage = "";
 
-        apiPost(channel.lucentUrl + "/account/update-email", {
+        axios
-            email: email,
+            .post(channel.lucentUrl + "/account/update-email", {
-        })
+                email: email,
+            })
             .then((response) => {
                 successAlert.show();
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({ errorMessage });
+                console.log({errorMessage});
             });
     }
 </script>
 
+
 <div class="wrapper-tiny">
-    <ErrorAlert message={errorMessage} />
+    <ErrorAlert message={errorMessage}/>
     <SuccessAlert bind:this={successAlert} />
     <h3 class="header-small mb-5">
-        <Avatar name={user.name} />
+        <Avatar name={user.name}/>
     </h3>
     <form on:submit={saveName}>
         <div class="input-group mb-5">
             <input
-                type="text"
+                    type="text"
-                bind:value={name}
+                    bind:value={name}
-                class="form-control mb-3"
+                    class="form-control mb-3"
-                placeholder="Name"
+                    placeholder="Name"
-                required
+                    required
             />
-            <SpinnerButton label="Update Name" />
+            <SpinnerButton label="Update Name"/>
         </div>
     </form>
 
     <form on:submit={saveEmail}>
         <div class="input-group mb-5">
             <input
-                type="email"
+                    type="email"
-                bind:value={email}
+                    bind:value={email}
-                class="form-control mb-3"
+                    class="form-control mb-3"
-                placeholder="Email"
+                    placeholder="Email"
-                required
+                    required
             />
-            <SpinnerButton label="Update Email" />
+            <SpinnerButton label="Update Email"/>
         </div>
     </form>
 
     <div class="list-group">
-        <a
+        <a class="list-group-item list-group-item-action" href="{ channel.lucentUrl }/logout">Logout from this
-            class="list-group-item list-group-item-action"
+            device</a>
-            href="{channel.lucentUrl}/logout">Logout from this device</a
-        >
     </div>
 </div>

front/js/svelte/account/Register.svelte

@@ -1,8 +1,7 @@
 <script>
-    import { apiPost } from "../../helpers";
     import ErrorAlert from "../common/ErrorAlert.svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
 
     const channel = getContext("channel");
     let name = "";
@@ -13,45 +12,48 @@
         e.preventDefault();
         errorMessage = "";
 
-        apiPost(channel.lucentUrl + "/register", {
+        axios
-            name: name,
+            .post(channel.lucentUrl + "/register", {
-            email: email,
+                name: name,
-        })
+                email: email,
+            })
             .then(() => {
                 window.location = channel.lucentUrl + "/login";
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
-                console.log({ errorMessage });
+                console.log({errorMessage});
             });
     }
 </script>
 
 <div class="wrapper-tiny">
-    <ErrorAlert message={errorMessage} />
+    <ErrorAlert message={errorMessage}/>
 
     <form on:submit={register}>
         <div class="mb-3">
             <label for="name" class="form-label">Name</label>
             <input
-                type="text"
+                    type="text"
-                bind:value={name}
+                    bind:value={name}
-                class="form-control"
+                    class="form-control"
-                id="name"
+                    id="name"
             />
         </div>
         <div class="mb-3">
             <label for="email" class="form-label">Email address</label>
             <input
-                type="email"
+                    type="email"
-                bind:value={email}
+                    bind:value={email}
-                class="form-control"
+                    class="form-control"
-                id="email"
+                    id="email"
             />
         </div>
 
+
         <div class="text-center mt-5 d-block">
-            <SpinnerButton label="Register" />
+            <SpinnerButton label="Register"/>
         </div>
     </form>
+
 </div>

front/js/svelte/account/Verify.svelte

@@ -1,42 +1,43 @@
 <script>
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
-    import { apiPost } from "../../helpers";
+    import SpinnerButton from "../common/SpinnerButton.svelte";
+    import SuccessAlert from "../common/SuccessAlert.svelte";
 
     const channel = getContext("channel");
     export let email;
     export let token;
+    let successAlert;
 
     function login(e) {
         e.preventDefault();
 
-        apiPost(channel.lucentUrl + "/verify", {
+        axios
-            email: email,
+            .post(channel.lucentUrl + "/verify", {
-            token: token,
+                email: email,
-        })
+                token: token,
+            })
             .then((response) => {
                 window.location = channel.lucentUrl;
             })
-            .catch((error) => {});
+            .catch((error) => {
+            });
     }
+
 </script>
 
-<div class="scope-login">
+<SuccessAlert bind:this={successAlert}/>
-    <div class="bg-image"></div>
+<div class="wrapper-tiny">
-    <div class="login-form">
+
-        <div class="form">
+    <form on:submit={login}>
-            <h2 class="mb-5">Welcome to Lucent</h2>
+        <div class="mb-3 text-center">
-            <form on:submit={login}>
+            <h3>Login as {email}</h3>
-                <button class="bt bt-primary">
+
-                    Enter as {email}
-                    <img
-                        alt="indicator"
-                        id="indicator"
-                        class="htmx-indicator"
-                        src="/img/spinner.svg"
-                    />
-                </button>
-            </form>
-            <div class="form-errors"></div>
         </div>
-    </div>
+
+
+        <div class="text-center mt-5 d-block">
+            <SpinnerButton label="Enter"/>
+        </div>
+    </form>
+
 </div>

front/js/svelte/actions/debounce.svelte.js

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

front/js/svelte/build/Report.svelte

@@ -1,6 +1,7 @@
 <script>
-    import { getContext, onMount } from "svelte";
+    import {getContext, onMount} from "svelte";
-    import { apiPost } from "../../helpers";
+    import axios from "axios";
+
     const channel = getContext("channel");
     export let title;
     export let command;
@@ -11,57 +12,59 @@
     let inProgress = false;
 
     function connect() {
-        const eventSource = new EventSource(
+        const eventSource = new EventSource(channel.lucentUrl + "/command-report-source/" + command.signature );
-            channel.lucentUrl + "/command-report-source/" + command.signature,
-        );
 
         eventSource.onmessage = function (event) {
             inProgress = true;
             const data = JSON.parse(event.data);
             date = data.date;
             logs = data.logs;
-            anchorEl.scrollIntoView();
+            anchorEl.scrollIntoView()
-        };
+        }
         eventSource.onerror = (e) => {
-            console.log(e);
+            console.log(e)
             eventSource.close();
             inProgress = false;
-        };
+        }
     }
 
     function buildWebsite(e) {
         e.preventDefault();
         inProgress = true;
-        apiPost(channel.lucentUrl + "/command/" + command.signature).then(
+        axios.post(channel.lucentUrl + "/command/" + command.signature).then(response => {
-            (response) => {
+            connect()
-                connect();
+        })
-            },
+
-        );
     }
 
     onMount(() => {
-        connect();
+        connect()
-    });
+    })
+
 </script>
 
 <div class="common-wrapper">
     <div class="lx-card mt-5">
+
         <h3 class="header-small mb-5">{title}</h3>
 
-        <button
+        <button on:click={buildWebsite} class="button primary mb-3" disabled={inProgress}>Start
-            on:click={buildWebsite}
-            class="button primary mb-3"
-            disabled={inProgress}
-            >Start
         </button>
 
+
         <div class="mb-3">
             {#if inProgress}
-                <span class="badge text-bg-warning"> Action in progress </span>
+                <span class="badge text-bg-warning">
+                Action in progress
+                    </span>
             {/if}
             {#if !inProgress && logs}
-                <span class="badge text-bg-info"> Action completed </span>
+                <span class="badge text-bg-info">
+               Action completed
+                    </span>
             {/if}
+
+
         </div>
 
         <pre class="logs">{logs}
@@ -69,13 +72,12 @@
         </pre>
     </div>
 </div>
-
 <style>
-    .logs {
+    .logs{
         max-height: 70vh;
         overflow: scroll;
         background: var(--p90);
         color: var(--p10);
         padding: 10px;
     }
-</style>
+</style>

front/js/svelte/common/SpinnerButton.svelte

@@ -3,11 +3,11 @@
     export let disabled = false;
 </script>
 
-<button type="submit" class="button secondary btn-spinner" {disabled}>
+    <button type="submit" class="button secondary btn-spinner" {disabled}>
-    <span
+        <span
-        class="spinner-border spinner-border-sm"
+            class="spinner-border spinner-border-sm"
-        role="status"
+            role="status"
-        aria-hidden="true"
+            aria-hidden="true"
-    />
+        />
-    {label}
+        {label}
-</button>
+    </button>

front/js/svelte/content/ActionsOnSelected.svelte

@@ -1,6 +1,5 @@
 <script>
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
-    import { apiPost } from "../../helpers";
 
     const channel = getContext("channel");
     export let selected;
@@ -9,9 +8,10 @@
 
     function deleteRecords(e) {
         e.preventDefault();
-        apiPost(channel.lucentUrl + "/records/delete", {
+        axios
-            ids: selected.map((s) => s.id),
+            .post(channel.lucentUrl + "/records/delete", {
-        })
+                ids: selected.map((s) => s.id),
+            })
             .then((response) => {
                 window.location.reload();
             })
@@ -21,10 +21,11 @@
     }
 
     function changeStatus(e, status) {
-        apiPost(channel.lucentUrl + "/records/status/" + status, {
+        axios
-            schemaName: schema.name,
+            .post(channel.lucentUrl + "/records/status/" + status, {
-            records: selected,
+                schemaName: schema.name,
-        })
+                records: selected
+            })
             .then((response) => {
                 window.location.reload();
             })
@@ -37,44 +38,44 @@
 <div style="display: flex;align-items: center; gap: 8px">
     <span class="me-2">{selected.length} records selected</span>
     <button
-        on:click|preventDefault={(e) => changeStatus(e, "published")}
-        type="button"
-        class="button"
-        >Publish
-    </button>
-    <button
-        on:click|preventDefault={(e) => changeStatus(e, "draft")}
-        type="button"
-        class="button"
-        >Make Draft
-    </button>
-    {#if filter["status_in"] === "trashed"}
-        <button
             on:click|preventDefault={(e) => changeStatus(e, "published")}
             type="button"
-            class="button"
+            class="button">Publish
-            >Publish
+    </button
-        </button>
+    >
+    <button
+            on:click|preventDefault={(e) => changeStatus(e, "draft")}
+            type="button"
+            class="button">Make Draft
+    </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")}
+                    on:click|preventDefault={(e) => changeStatus(e, "draft")}
-                type="button"
+                    type="button"
-                class="button"
+                    class="button">Make Draft
-                >Make Draft
+            </button
-            </button>
+            >
         {/if}
         <button
-            on:click|preventDefault={deleteRecords}
+                on:click|preventDefault={deleteRecords}
-            type="button"
+                type="button"
-            class="button"
+                class="button">Delete forever
-            >Delete forever
+        </button
-        </button>
+        >
     {:else}
         <button
-            type="button"
+                type="button"
-            on:click|preventDefault={(e) => changeStatus(e, "trashed")}
+                on:click|preventDefault={(e) => changeStatus(e, "trashed")}
-            class="button"
+                class="button">Move to trash
-            >Move to trash
+        </button
-        </button>
+        >
     {/if}
 </div>

front/js/svelte/content/Grid.svelte

@@ -0,0 +1,68 @@
+<script>
+    import {getContext} from "svelte";
+    import Preview from "../files/Preview.svelte";
+    import {selectRecord} from "./functions/recordSelect.js";
+
+    const channel = getContext("channel");
+
+    export let schema;
+    export let records;
+    export let isWritable;
+    export let selected = [];
+
+    function select(record) {
+        selected = selectRecord(record, selected)
+    }
+
+
+</script>
+<div class="row" style="max-width:1000px">
+    {#each records as record (record.id)}
+        <div class="col-6 col-md-4">
+            <div
+                    class="file-wrapper rounded p-2 mb-4 bg-light"
+                    class:selected={selected.includes(record)}
+            >
+                {#if isWritable}
+                    <div class="form-check">
+                        <input
+                                on:change={() => select(record)}
+                                class="form-check-input "
+                                type="checkbox"
+                                checked={selected.find(
+                                        (r) => r.id === record.id
+                                    )}
+                                value={record}
+                        />
+                    </div>
+                {/if}
+                <div class="d-flex justify-content-center">
+                    <Preview {record} size="medium"/>
+                </div>
+
+                <a
+                        href="{channel.lucentUrl}/records/{record.id}"
+                        title={record._file.path}
+                        class="d-block text-center overflow-hidden text-nowrap my-2 "
+                        style="
+                                        text-overflow: ellipsis;
+                                        font-size: 13px;
+                                        color: #333;
+                                    ">{record._file.path}</a
+                >
+                <span
+                        class="lx-small-text text-muted d-block text-center"
+                >{record._file.mime}</span
+                >
+            </div>
+        </div>
+    {/each}
+</div>
+
+
+<style>
+    .form-check {
+        display: inline-block;
+        margin-bottom: 0;
+    }
+</style>

front/js/svelte/content/Index.svelte

@@ -3,9 +3,9 @@
     import Pagination from "./pagination/Pagination.svelte";
     import ActionsOnSelected from "./ActionsOnSelected.svelte";
     import Table from "./Table.svelte";
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
-    import { apiGet } from "../../helpers";
 
+    const axios = getContext("axios");
     export let schema;
     export let users;
     export let records;
@@ -26,17 +26,18 @@
 
     function refresh(e) {
         const newUrl = e.detail;
-        apiGet(newUrl)
+        axios
+            .get(newUrl)
             .then((response) => {
-                records = response.records;
+                records = response.data.records;
-                sortParam = response.sortParam;
+                sortParam = response.data.sortParam;
-                sortField = response.sortField;
+                sortField = response.data.sortField;
-                operators = response.operators;
+                operators = response.data.operators;
-                filter = response.filter;
+                filter = response.data.filter;
-                skip = response.skip;
+                skip = response.data.skip;
-                limit = response.limit;
+                limit = response.data.limit;
-                total = response.total;
+                total = response.data.total;
-                modalUrl = response.modalUrl;
+                modalUrl = response.data.modalUrl;
                 document.querySelector("dialog h3").scrollIntoView();
             })
             .catch((error) => {
@@ -46,49 +47,51 @@
 </script>
 
 <div class="">
-    <div class={inModal ? "mt-0" : "mt-5"}>
+    <div class="{inModal ? 'mt-0' : 'mt-5'}">
-        <h3 class="header-normal mb-5">
+        <h3 class="header-normal mb-5 ">
             {schema.label}
         </h3>
         {#if selected.length > 0 && !inModal && isWritable}
-            <ActionsOnSelected {schema} {selected} {filter} />
+            <ActionsOnSelected {schema} {selected} {filter}/>
         {:else}
             <Tools
-                bind:schema
+                    bind:schema
-                bind:records
+                    bind:records
-                {systemFields}
+                    {systemFields}
-                {sortParam}
+                    {sortParam}
-                {sortField}
+                    {sortField}
-                {operators}
+                    {operators}
-                {filter}
+                    {filter}
-                {graph}
+                    {graph}
-                {inModal}
+                    {inModal}
-                {modalUrl}
+                    {modalUrl}
-                {isWritable}
+                    {isWritable}
-                on:refresh={refresh}
+                    on:refresh={refresh}
             />
         {/if}
 
         <Table
-            {records}
+                {records}
-            {graph}
+                {graph}
-            {schema}
+                {schema}
-            {sortParam}
+                {sortParam}
-            {sortField}
+                {sortField}
-            {systemFields}
+                {systemFields}
-            {inModal}
+                {inModal}
-            {users}
+                {users}
-            {isWritable}
+                {isWritable}
-            bind:selected
+                bind:selected
         />
+
     </div>
 
     <Pagination
-        {limit}
+            {limit}
-        {skip}
+            {skip}
-        {total}
+            {total}
-        on:refresh={refresh}
+            on:refresh={refresh}
-        {inModal}
+            {inModal}
-        {modalUrl}
+            {modalUrl}
     />
 </div>
+

front/js/svelte/content/RecordRow.svelte

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

front/js/svelte/content/Table.svelte

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

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

@@ -1,7 +1,7 @@
 <script>
     import { createEventDispatcher } from "svelte";
     const dispatch = createEventDispatcher();
-
+    import { range } from "lodash";
     import NavItem from "./NavItem.svelte";
     export let inModal;
     export let modalUrl;
@@ -11,11 +11,7 @@
 
     $: totalPages = Math.ceil(total / limit);
     $: currentPage = Math.ceil((skip - 1) / limit) + 1;
-    const range = (start, end, step = 1) =>
+
-        Array.from(
-            { length: Math.ceil((end - start) / step) },
-            (_, i) => start + i * step,
-        );
     $: pageRange = range(currentPage - 3, currentPage + 4).filter((i) => {
         return i > 0 && i <= totalPages;
     });

front/js/svelte/content/tools/AppliedFilter.svelte

@@ -1,7 +1,9 @@
 <script>
-    import { createEventDispatcher, getContext } from "svelte";
+    import {createEventDispatcher, getContext} from "svelte";
+    import {previewTitle} from "../../records/Preview";
     import Icon from "../../common/Icon.svelte";
 
+    const channel = getContext("channel");
     const dispatch = createEventDispatcher();
     export let schema;
     export let operators;
@@ -17,10 +19,13 @@
         isReference: key.startsWith("children"),
     };
 
-    filter = [extractOperator(key), extractLabel(schema, key)].reduce(
+    filter = [
-        (mem, fn) => fn(mem),
+        extractOperator(key),
-        filter,
+        extractLabel(schema, key),
-    );
+    ].reduce((mem, fn) => fn(mem), filter);
+
+
+
 
     function extractOperator(key) {
         return (filter) => {
@@ -45,16 +50,18 @@
             const filterField = schema.fields.find((f) => f.name === fieldName);
             filter.label = filterField?.label ?? fieldName;
             return filter;
-        };
+        }
+
     }
 
     const filterRecord = extractFilterRecord(graph, value);
 
     function extractFilterRecord(graph, value) {
+
         if (!filter.isReference) {
             return null;
         }
-        return graph.records.find((r) => r.id === value);
+        return graph.records.find(r => r.id === value);
     }
 
     function removeFilter(k) {
@@ -71,21 +78,19 @@
 </script>
 
 <span class="applied-filter">
-    {#if filter.isReference && filterRecord}
-        {filter.label} is {filterRecord.data.name}
-    {:else}
-        {filter.label}
-        {operators.find((o) => o.name === filter.operator)?.symbol ?? ""}
-        {operators.find((o) => o.name === filter.operator)?.hasValue
-            ? value
-            : ""}
-    {/if}
 
-    <button
+        {#if filter.isReference && filterRecord}
-        on:click|preventDefault={() => removeFilter(key)}
+              {filter.label} is {previewTitle(channel.schemas, filterRecord)}
-        type="button"
+        {:else}
-        class="button-text"
+              {filter.label} {operators.find((o) => o.name === filter.operator)?.symbol ?? ""} {operators.find((o) => o.name === filter.operator)?.hasValue ? value : ""}
-        aria-label="Close"
+        {/if}
-        ><Icon width={12} height={12} icon="close"></Icon></button
+
-    >
+        <button
+                on:click|preventDefault={() => removeFilter(key)}
+                type="button"
+                class="button-text"
+                aria-label="Close"
+        ><Icon width={12} height={12}  icon="close"></Icon></button>
 </span>
+
+

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

@@ -1,6 +1,8 @@
 <script>
-    import { createEventDispatcher, getContext } from "svelte";
+    import {createEventDispatcher, getContext} from "svelte";
-    import { apiGet, debounce } from "../../../helpers";
+    import {debounce} from "lodash";
+    import {previewTitle} from "../../records/Preview";
+
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -8,20 +10,22 @@
     export let value = "";
     export let field;
 
-    let search = "";
+    let search = ""
-    $: searchOptions = [];
+    $: searchOptions = []
+
 
     const updateResults = debounce((e) => {
-        apiGet(channel.lucentUrl + "/records/suggestions", {
+        axios
-            params: {
+            .get(channel.lucentUrl + "/records/suggestions", {
-                schema: field.collections[0],
+                params: {
-                field: "search",
+                    schema: field.collections[0],
-                value: search,
+                    field: "search",
-                ui: "search",
+                    value: search,
-            },
+                    ui: "search",
-        })
+                },
+            })
             .then((response) => {
-                searchOptions = response;
+                searchOptions = response.data;
             })
             .catch((error) => {
                 searchOptions = [];
@@ -31,36 +35,46 @@
 
     function apply(e, newOption) {
         e.preventDefault();
-        value = newOption.id;
+        value = newOption.id
         dispatch("addFilter");
-        value = "";
+        value = ""
-    }
-</script>
 
+    }
+
+</script>
 <div class="reference-tags">
     <input
-        type="search"
+            type="search"
-        on:keyup={updateResults}
+            on:keyup={updateResults}
-        bind:value={search}
+            bind:value={search}
-        placeholder={"Search for " + field.label}
+            placeholder={"Search for "+field.label}
-        autocomplete="off"
+            autocomplete="off"
     />
 
     <div class="reference-tags-results">
+
         {#if searchOptions}
             {#each searchOptions as option (option.id)}
                 <div
-                    class="reference-tags-option"
+                        class="reference-tags-option"
-                    role="button"
+                        role="button"
-                    tabindex="0"
+                        tabindex="0"
-                    on:click={(e) => apply(e, option)}
+                        on:click={(e) => apply(e, option)}
-                    on:keypress={(e) => apply(e, option)}
+                        on:keypress={(e) => apply(e, option)}
                 >
-                    {option.data.name}
+                    {previewTitle(channel.schemas, option)}
                 </div>
+
             {:else}
-                <div class="start-typing">Start typing...</div>
+                <div
+                        class="start-typing">
+                    Start typing...
+                </div>
             {/each}
         {/if}
     </div>
 </div>
+
+
+
+

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

@@ -1,9 +1,10 @@
 <script>
     import FilterFields from "./FilterFields.svelte";
+    import Uploader from "../../files/Uploader.svelte";
     import Icon from "../../common/Icon.svelte";
     import SortFields from "./SortFields.svelte";
     import AppliedFilter from "./AppliedFilter.svelte";
-    import { createEventDispatcher, getContext } from "svelte";
+    import {createEventDispatcher, getContext} from "svelte";
     import Dropdown from "../../common/Dropdown.svelte";
     import AppliedFilterNotLinked from "./AppliedFilterNotLinked.svelte";
 
@@ -40,99 +41,120 @@
         } else {
             window.location = url;
         }
+
+    }
+
+    function uploadComplete(e) {
+        records = e.detail;
     }
 </script>
 
 <div class="toolbar">
     <div class="toolbar-filters">
+
         <SortFields
-            {schema}
+                {schema}
-            {sortParam}
+                {sortParam}
-            {sortField}
+                {sortField}
-            {systemFields}
+                {systemFields}
-            {inModal}
+                {inModal}
-            {modalUrl}
+                {modalUrl}
-            on:refresh
+                on:refresh
         />
 
+
         <FilterFields
-            bind:schema
+                bind:schema
-            {systemFields}
+                {systemFields}
-            {operators}
+                {operators}
-            {filter}
+                {filter}
-            {inModal}
+                {inModal}
-            {modalUrl}
+                {modalUrl}
-            on:refresh
+                on:refresh
         />
 
         <form method="GET" on:submit={search}>
-            <input
+            <input type="search" name="filter[search_regex]" placeholder="Search"
-                type="search"
+                   class="search" required>
-                name="filter[search_regex]"
-                placeholder="Search"
-                class="search"
-                required
-            />
         </form>
+
+
     </div>
 
     <div style="display:flex;align-items: center;gap:4px">
-        {#if !inModal && isWritable}
+        {#if schema.type === "collection"}
-            <a
+            {#if !inModal && isWritable}
-                href="{channel.lucentUrl}/records/new?schema={schema.name}"
+                <a
-                class="button"
+                        href="{channel.lucentUrl}/records/new?schema={schema.name}"
-            >
+                        class="button"
-                New Record
+                >
-            </a>
+                    New Record
+                </a>
+            {/if}
+        {:else }
+            <div>
+                <Uploader {schema} on:uploadComplete={uploadComplete}/>
+            </div>
         {/if}
-
         {#if !inModal}
             <Dropdown orientation="right">
                 <div slot="button">
-                    <Icon icon="ellipsis-vertical" />
+                    <Icon icon="ellipsis-vertical"/>
                 </div>
                 {#if filter["status_in"] === "trashed"}
                     {#if isWritable}
                         <a
-                            class="dropdown-item"
+                                class="dropdown-item"
-                            href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
+                                href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
                         >
                             Empty trash
                         </a>
                     {/if}
                 {:else}
-                    <a class="dropdown-item" href={csvUrl}>Export to CSV</a>
+
                     <a
-                        class="dropdown-item"
+                            class="dropdown-item"
-                        href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
+                            href={csvUrl}
-                        >View trashed records</a
+                    >Export to CSV</a
                     >
                     <a
-                        class="dropdown-item"
+                            class="dropdown-item"
-                        href="{channel.lucentUrl}/content/{schema.name}?notlinked=*"
+                            href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
-                        >View unlinked records</a
+                    >View trashed records</a
+                    >
+                    <a
+                            class="dropdown-item"
+                            href="{channel.lucentUrl}/content/{schema.name}?notlinked=*"
+                    >View unlinked records</a
                     >
                 {/if}
             </Dropdown>
+
         {/if}
     </div>
 </div>
 
+
 <div class="applied-filters">
-    <AppliedFilterNotLinked {inModal} {modalUrl} on:refresh
+    <AppliedFilterNotLinked
+            {inModal}
+            {modalUrl}
+            on:refresh
     ></AppliedFilterNotLinked>
     {#if Object.entries(filter).length > 0}
         {#each Object.entries(filter) as [k, v]}
             <AppliedFilter
-                {schema}
+                    {schema}
-                {operators}
+                    {operators}
-                key={k}
+                    key={k}
-                value={v}
+                    value={v}
-                {inModal}
+                    {inModal}
-                {modalUrl}
+                    {modalUrl}
-                {graph}
+                    {graph}
-                on:refresh
+                    on:refresh
             />
         {/each}
     {/if}
 </div>
+
+

front/js/svelte/dialog/Dialog.svelte

@@ -1,8 +1,9 @@
 <script>
-    import { createEventDispatcher, getContext } from "svelte";
+
+    import {createEventDispatcher, getContext} from "svelte";
     import Icon from "../common/Icon.svelte";
     import Index from "../content/Index.svelte";
-    import { apiGet } from "../../helpers";
+    import axios from "axios";
 
     let dialogEl;
 
@@ -14,19 +15,21 @@
     //     load();
     // });
 
+
     export function close(e) {
-        if (e) {
+        if(e){
             e.preventDefault();
         }
 
-        dialogEl.close();
+        dialogEl.close()
         selectedRecords = [];
     }
 
     function load(schema) {
-        apiGet(channel.lucentUrl + "/content/" + schema)
+        axios
+            .get(channel.lucentUrl + "/content/" + schema)
             .then((response) => {
-                data = response;
+                data = response.data;
             })
             .catch((error) => console.log(error));
     }
@@ -49,41 +52,42 @@
     }
 
     export function open(schema) {
-        dialogEl.showModal();
+        dialogEl.showModal()
         load(schema);
     }
-</script>
 
+
+</script>
 <dialog bind:this={dialogEl}>
     {#if data.schema}
         <div class="dialog-header">
             <button
-                type="button"
+                    type="button"
-                class="button"
+                    class="button"
-                on:click={insert}
+                    on:click={insert}
-                disabled={selectedRecords.length === 0}
+                    disabled={selectedRecords.length === 0}
             >
                 Insert
             </button>
             <button
-                type="button"
+                    type="button"
-                class="button"
+                    class="button"
-                on:click={replace}
+                    on:click={replace}
-                disabled={selectedRecords.length === 0}
+                    disabled={selectedRecords.length === 0}
             >
                 Replace
             </button>
             {#if selectedRecords.length > 0}
-                <span class="">
+                            <span class="">
-                    {selectedRecords.length} records selected
+                                {selectedRecords.length} records selected
-                </span>
+                            </span>
             {/if}
 
             <button
-                on:click|preventDefault={close}
+                    on:click|preventDefault={close}
-                type="button"
+                    type="button"
-                class="button close"
+                    class="button close"
-                aria-label="Close"
+                    aria-label="Close"
             >
                 <Icon icon="close"></Icon>
             </button>
@@ -92,5 +96,6 @@
         <div class="dialog-body">
             <Index {...data} bind:selected={selectedRecords}></Index>
         </div>
+
     {/if}
-</dialog>
+</dialog>

front/js/svelte/dialog/FileDialog.svelte

@@ -1,87 +0,0 @@
-<script>
-    import { createEventDispatcher, getContext } from "svelte";
-    import Icon from "../common/Icon.svelte";
-    import FileIndex from "./FileIndex.svelte";
-
-    let dialogEl;
-
-    const dispatch = createEventDispatcher();
-    const channel = getContext("channel");
-    $: files = [];
-    $: selectedRecords = [];
-    // onMount(() => {
-    //     load();
-    // });
-
-    export function close(e) {
-        if (e) {
-            e.preventDefault();
-        }
-
-        dialogEl.close();
-        selectedRecords = [];
-    }
-
-    function load(recordId) {
-        fetch(channel.lucentUrl + "/records/files/?recordId=" + recordId)
-            .then((response) => response.json())
-            .then((json) => {
-                files = json;
-            })
-            .catch((error) => console.log(error));
-    }
-
-    function insert(e) {
-        e.preventDefault();
-        dispatch("insert_files", selectedRecords);
-    }
-
-    function replace(e) {
-        e.preventDefault();
-        dispatch("replace_files", selectedRecords);
-    }
-
-    export function open(recordId) {
-        dialogEl.showModal();
-        load(recordId);
-    }
-</script>
-
-<dialog bind:this={dialogEl}>
-    <div class="dialog-header">
-        <button
-            type="button"
-            class="button"
-            on:click={insert}
-            disabled={selectedRecords.length === 0}
-        >
-            Insert
-        </button>
-        <button
-            type="button"
-            class="button"
-            on:click={replace}
-            disabled={selectedRecords.length === 0}
-        >
-            Replace
-        </button>
-        {#if selectedRecords.length > 0}
-            <span class="">
-                {selectedRecords.length} records selected
-            </span>
-        {/if}
-
-        <button
-            on:click|preventDefault={close}
-            type="button"
-            class="button close"
-            aria-label="Close"
-        >
-            <Icon icon="close"></Icon>
-        </button>
-    </div>
-
-    <div class="dialog-body">
-        <FileIndex {files} bind:selected={selectedRecords}></FileIndex>
-    </div>
-</dialog>

front/js/svelte/dialog/FileIndex.svelte

@@ -1,104 +0,0 @@
-<script>
-    import { getContext } from "svelte";
-    import Icon from "../common/Icon.svelte";
-    import Checkbox from "../common/Checkbox.svelte";
-    import Preview from "../files/Preview.svelte";
-    import { fileurl } from "../files/imageserver";
-
-    const channel = getContext("channel");
-
-    export let files = [];
-    export let selected = [];
-    export let isWritable = true;
-
-    function eventToggleAll(e) {
-        selected = toggleAll(e, files, selected);
-    }
-
-    function select(file) {
-        selected = selectFile(file, selected);
-    }
-
-    export const toggleAll = (e, files, selected) => {
-        if (selected.length === files.length) {
-            return [];
-        }
-        e.currentTarget.checked = selected.length > 0;
-        return files;
-    };
-
-    export const selectFile = (file, selected) => {
-        let fileExists = selected.find((r) => r.id === file.id);
-        if (fileExists) {
-            return selected.filter((r) => r.id !== file.id);
-        }
-        return [...selected, file];
-    };
-</script>
-
-<div class="table mt-5">
-    <table>
-        <thead>
-            <tr>
-                {#if isWritable}
-                    <th>
-                        <Checkbox
-                            value=""
-                            on:change={eventToggleAll}
-                            indeterminate={selected.length > 0 &&
-                                selected.length < files.length}
-                            checked={selected.length === files.length}
-                        ></Checkbox>
-                    </th>
-                {/if}
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            {#each files as file (file.id)}
-                <tr>
-                    <td class="title-td">
-                        <div class="title-td-contents">
-                            {#if isWritable}
-                                <Checkbox
-                                    on:change={() => select(file)}
-                                    checked={selected.find(
-                                        (s) => s.id === file.id,
-                                    )}
-                                    value={file}
-                                ></Checkbox>
-                            {/if}
-                            <div class="file-table-row">
-                                <Preview
-                                    {file}
-                                    size={file.width > 0 ? "medium" : "small"}
-                                />
-
-                                <div>
-                                    {file.filename}
-                                    <span
-                                        >{(file.size / 1024).toFixed(1)}kB</span
-                                    >
-
-                                    {#if file.width > 0}
-                                        <span
-                                            >{file.width +
-                                                "x" +
-                                                file.height}</span
-                                        >
-                                    {/if}
-                                    <a
-                                        href={fileurl(channel, file)}
-                                        target="_blank"
-                                    >
-                                        Download
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-            {/each}
-        </tbody>
-    </table>
-</div>

front/js/svelte/edges/sortEdges.js

@@ -1,29 +1,25 @@
+
+
+
 export function sortByField(from, to, edges, fieldName, references) {
-  if (from === to) {
+    if (from === to) {
-    return edges;
+        return edges;
-  }
-  let referenceIds = references.map((r) => r.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)) ?? [];
-
-  edgesTosort = array_move(edgesTosort, from, to);
-  return [...remainingEdge, ...edgesTosort];
-}
-
-export function array_move(arr, old_index, new_index) {
-  if (new_index >= arr.length) {
-    var k = new_index - arr.length + 1;
-    while (k--) {
-      arr.push(undefined);
     }
-  }
+    let referenceIds = references.map(r => r.id);
-  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+    let edgesTosort = edges?.filter((ed) => ed.field === fieldName && ed.depth === 1 && referenceIds.includes(ed.target)) ?? [];
-  return arr; // for testing
+    let remainingEdge = edges?.filter((ed) => !(ed.field === fieldName && ed.depth === 1)) ?? [];
+
+    edgesTosort = array_move(edgesTosort,from, to);
+    return [...remainingEdge, ...edgesTosort];
 }
+
+function array_move(arr, old_index, new_index) {
+    if (new_index >= arr.length) {
+        var k = new_index - arr.length + 1;
+        while (k--) {
+            arr.push(undefined);
+        }
+    }
+    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+    return arr; // for testing
+};

front/js/svelte/files/Preview.svelte

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

front/js/svelte/files/Uploader.svelte

@@ -1,10 +1,10 @@
 <script>
-    import { createEventDispatcher, getContext } from "svelte";
+    import {createEventDispatcher, getContext} from "svelte";
 
     const dispatch = createEventDispatcher();
 
     const channel = getContext("channel");
-    export let recordId;
+    export let schema;
     let mimeTypes = "";
     let files = [];
     let isLoading = false;
@@ -17,39 +17,39 @@
         files = e.target.files ? [...e.target.files] : [];
         let formData = new FormData();
 
-        formData.append("recordId", recordId);
+        formData.append("schema", schema.name);
         Array.from(files).forEach(function (file) {
             formData.append("files[]", file);
         });
         dispatch("beforeUpload", files);
-        fetch(channel.lucentUrl + "/files/upload", {
+        axios
-            method: "POST",
+            .post(channel.lucentUrl + "/files/upload", formData, {
-            body: formData,
+                headers: {
-            headers: {
+                    "Content-Type": "multipart/form-data",
-                "X-CSRF-TOKEN": document.querySelector(
+                },
-                    'meta[name="csrf-token"]',
+            })
-                ).content,
+            .then((response) => {
-            },
+                if (response.data.error) {
-        })
+                    dispatch("uploadError", response.data.error);
-            .then((response) => response.json())
-            .then((data) => {
-                if (data.error) {
-                    dispatch("uploadError", data.error);
                 } else {
-                    dispatch("uploadComplete", data);
+                    dispatch("uploadComplete", response.data);
                 }
                 isLoading = false;
+            })
+            .catch((error) => {
+                isLoading = false;
+                console.log(error.response.data);
             });
     }
 </script>
 
-<fieldset class="upload-button" disabled={isLoading}>
+<fieldset  class="upload-button" disabled={isLoading}>
-    <label class="button primary btn-spinner">
+    <label class="button primary btn-spinner ">
-        <span
+          <span
-            class="spinner-border spinner-border-sm"
+                  class="spinner-border spinner-border-sm"
-            role="status"
+                  role="status"
-            aria-hidden="true"
+                  aria-hidden="true"
-        />
+          />
         Upload file
 
         <input

front/js/svelte/files/imageserver.js

@@ -1,29 +1,30 @@
-export function imgurl(channel, file) {
+export function imgurl(channel, record) {
-  if (file.mime === "image/svg+xml") {
+    if (record._file.mime === "image/svg+xml") {
-    return fileurl(channel, file);
+        return fileurl(channel, record);
-  }
-  return channel.filesUrl + `/thumbs/${file.path}`;
-}
-
-export function fileurl(channel, file) {
-  return channel.filesUrl + `/${file.path}`;
-}
-
-export function htmlurl(channel, file, preset) {
-  let html = "";
-  let url = fileurl(channel, file);
-
-  if (file.width > 0) {
-    let presetUrl = url;
-    if (preset) {
-      presetUrl = channel.filesUrl + `/templates/${preset}/${file.path}`;
     }
-    html = `<img src="${presetUrl}" alt="${file.path}" />`;
+    return channel.disks[record._file.disk] + `/thumbs/${record._file.path}`;
-  } else if (file.mime === "image/svg+xml") {
+}
-    html = `<img src="${url}" alt="${file.path}"/>`;
+
-  } else {
+export function fileurl(channel, record) {
-    html = `<a href="${url}">${file.originalName}</a>`;
+    return channel.disks[record._file.disk] + `/${record._file.path}`;
-  }
+}
-
+
-  return html;
+export function htmlurl(channel, record, preset) {
+
+    let html = "";
+    let url = fileurl(channel, record)
+
+    if (record._file.width > 0) {
+        let presetUrl = url;
+        if (preset) {
+            presetUrl = channel.disks[record._file.disk] + `/templates/${preset}/${record._file.path}`;
+        }
+        html = `<img src="${presetUrl}" alt="${record._file.path}" />`
+    } else if (record._file.mime === "image/svg+xml") {
+        html = `<img src="${url}" alt="${record._file.path}"/>`
+    } else {
+        html = `<a href="${url}">${record._file.originalName}</a>`
+    }
+
+    return html;
 }

front/js/svelte/home/Index.svelte

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

front/js/svelte/home/RecordRow.svelte

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

front/js/svelte/layout/Header.svelte

@@ -1,26 +1,25 @@
 <script>
     import Avatar from "../account/Avatar.svelte";
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
     import Dropdown from "../common/Dropdown.svelte";
 
     const channel = getContext("channel");
     const user = getContext("user");
+    console.log( channel.commands)
 </script>
 
-<div class="top-nav">
+
-    {#if channel.auth == "lucent"}
+<div class="top-nav ">
-        <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>
+    <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>
-    {/if}
+
     {#if channel.commands.length > 0}
         <Dropdown>
             <div slot="button">Actions</div>
             {#each channel.commands as command}
-                <a
+                <a href="{channel.lucentUrl}/command-report/{command.signature}" class="top-nav-item">{command.name}</a>
-                    href="{channel.lucentUrl}/command-report/{command.signature}"
-                    class="top-nav-item">{command.name}</a
-                >
             {/each}
         </Dropdown>
+
     {/if}
     <!--        <div>-->
     <!--            <form method="GET">-->
@@ -28,11 +27,8 @@
     <!--                       class="form-control" required/>-->
     <!--            </form>-->
     <!--        </div>-->
-    {#if channel.auth == "lucent"}
+    <a href="{channel.lucentUrl}/profile">
-        <a href="{channel.lucentUrl}/profile">
+        <Avatar side="28" name={user.name}/>
-            <Avatar side="28" name={user.name} />
+    </a>
-        </a>
-    {:else}
-        <Avatar side="28" name={user.name} />
-    {/if}
 </div>
+

front/js/svelte/layout/Navbar.svelte

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

front/js/svelte/layout/NavbarMenu.svelte

@@ -0,0 +1,34 @@
+<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/CodemirrorMarkdown.svelte

@@ -1,13 +1,14 @@
 <script>
+
     // https://codesandbox.io/s/codemirror-remark-editor-4m4z9?file=/src/CodeEditor.js:374-387
-    import { onDestroy, onMount } from "svelte";
+    import {onDestroy, onMount} from "svelte";
-    import { basicSetup, EditorView } from "codemirror";
+    import {basicSetup, EditorView} from "codemirror";
-    import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+    import {autocompletion, completionKeymap} from "@codemirror/autocomplete";
-    import { Compartment, EditorState } from "@codemirror/state";
+    import {Compartment, EditorState} from "@codemirror/state";
-    import { keymap } from "@codemirror/view";
+    import {keymap} from "@codemirror/view";
-    import { indentWithTab } from "@codemirror/commands";
+    import {indentWithTab} from "@codemirror/commands";
-    import { markdown } from "@codemirror/lang-markdown";
+    import {markdown} from "@codemirror/lang-markdown";
-    import { lintKeymap } from "@codemirror/lint";
+    import {lintKeymap} from "@codemirror/lint";
 
     let parentElement;
     let codeMirrorView;
@@ -16,10 +17,10 @@
 
     export function insertMedia(info) {
         let insertText = "";
-        if (info.file.width > 0) {
+        if (info.record._file.width > 0) {
-            insertText = `![${info.file.filename}](${info.url})`;
+            insertText = `![${info.record._file.originalName}](${info.url})`;
         } else {
-            insertText = `[${info.file.filename}](${info.originalUrl})`;
+            insertText = `[${info.record._file.originalName}](${info.originalUrl})`;
         }
         const cursor = codeMirrorView.state.selection.main.head;
         const transaction = codeMirrorView.state.update({
@@ -28,7 +29,7 @@
                 insert: insertText,
             },
             // the next 2 lines will set the appropriate cursor position after inserting the new text.
-            selection: { anchor: cursor + 1 },
+            selection: {anchor: cursor + 1},
             scrollIntoView: true,
         });
 
@@ -45,7 +46,11 @@
             doc: value,
             extensions: [
                 basicSetup,
-                keymap.of([indentWithTab, ...lintKeymap, ...completionKeymap]),
+                keymap.of([
+                    indentWithTab,
+                    ...lintKeymap,
+                    ...completionKeymap
+                ]),
                 language.of(markdown()),
                 markdown(),
                 autocompletion(),
@@ -58,14 +63,17 @@
                     }
                 }),
                 EditorView.lineWrapping,
-                EditorView.contentAttributes.of({ spellcheck: "true" }),
+                EditorView.contentAttributes.of({spellcheck: "true"})
             ],
         });
 
+
         codeMirrorView = new EditorView({
             state,
             parent: parentElement,
         });
+
+
     });
 
     onDestroy(() => {
@@ -75,4 +83,4 @@
     });
 </script>
 
-<div class="is-editable-{editable}" bind:this={parentElement} />
+<div class="is-editable-{editable}" bind:this={parentElement}/>

front/js/svelte/libs/Tinymce.svelte

@@ -0,0 +1,129 @@
+<script>
+    import {onDestroy, onMount} from "svelte";
+
+    import tinymce from "tinymce/tinymce";
+    import "tinymce/models/dom";
+    import "tinymce/icons/default";
+    import "tinymce/themes/silver";
+    import "tinymce/skins/ui/oxide/skin.css";
+    import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css?inline";
+    import customcss from "./tinymce.css?inline";
+
+    import "tinymce/plugins/link";
+    import "tinymce/plugins/code";
+    import "tinymce/plugins/image";
+    import "tinymce/plugins/table";
+    import "tinymce/plugins/codesample";
+    import "tinymce/plugins/media";
+
+    import "tinymce/plugins/lists";
+    import "tinymce/plugins/autoresize";
+    import "tinymce/plugins/wordcount";
+
+    export let value = "";
+    export let additionalConfig = {};
+    let lastVal = "";
+    let textareaEl;
+    let activeEditor;
+    let editorWrapper;
+    const plugins = [
+        "autoresize",
+        "code",
+        "image",
+        "table",
+        "codesample",
+        "link",
+        "lists",
+        "media",
+        "wordcount",
+    ];
+    const toolbar =
+        "bold italic underline strikethrough removeformat  | link | subscript superscript bullist numlist  media image codesample table code wordcount  blockquote indent outdent blocks";
+
+    onDestroy(() => {
+        if (activeEditor) {
+            activeEditor.destroy();
+        }
+    });
+
+    onMount(() => {
+        const config = {
+            target: textareaEl,
+            toolbar_mode: "sliding",
+            toolbar_sticky: true,
+            skin: false,
+            content_css: false,
+            content_style: contentUiSkinCss.toString() + customcss.toString(),
+            branding: false,
+            inline: false,
+            plugins: plugins,
+            contextmenu: false,
+            menubar: false,
+            statusbar: false,
+            entity_encoding: "raw",
+            convert_urls: false,
+            toolbar: toolbar,
+            image_caption: true,
+            relative_urls: false,
+            browser_spellcheck: true,
+            max_height: 600,
+            // media_poster: false,
+
+            setup: function (editor) {
+                activeEditor = editor;
+
+                editor.on("init", function (e) {
+                    editor.setContent(value ?? "");
+                });
+
+                // editor.on("blur", function (e) {
+                //     let content = setImageDimensions(editor.getContent());
+                //     dispatch("editorBlur", content);
+                //     editorWrapper.classList.remove("editorFocus");
+                //     // return false;
+                // });
+
+                // editor.on("focus", function (e) {
+                //     editorWrapper.classList.add("editorFocus");
+                //     // return false;
+                // });
+
+                editor.on("change input undo redo", function (e) {
+                    lastVal = editor.getContent();
+                    if (lastVal !== value) {
+                        value = lastVal;
+                    }
+                });
+            },
+        };
+
+        tinymce.init({...config, ...additionalConfig});
+    });
+
+    export function insertMedia(info){
+        activeEditor.execCommand('InsertHTML', false, info.html);
+    }
+
+</script>
+
+<div bind:this={editorWrapper} class="tox-wrapper">
+    <div class="form-control" bind:this={textareaEl}>
+        {@html value}
+    </div>
+</div>
+
+<style>
+    :global(.tox:not(.tox-tinymce-inline) .tox-editor-header) {
+        background-color: #fff;
+        border-bottom: 1px solid #ced4da;
+        box-shadow: none;
+        padding: 4px 0;
+        transition: box-shadow 0.5s;
+    }
+
+    :global(.tox-tinymce) {
+        border: 1px solid #ced4da;
+    }
+
+
+</style>

front/js/svelte/libs/Trix.svelte

@@ -1,66 +1,68 @@
 <script>
-    import { onDestroy, onMount } from "svelte";
+    import {onDestroy, onMount} from "svelte";
-    import Trix from "trix";
+    import Trix from "trix"
-    import "trix/dist/trix.css";
+    import "trix/dist/trix.css"
 
     export let value = "";
     export let field;
     let editor;
 
+
     function updateValue(e) {
         value = e.target.value;
     }
 
-    export function insertMedia(info) {
+    export function insertMedia(info){
-        if (info.file.width > 0) {
+        if(info.record._file.width > 0){
-            var attachment = new Trix.Attachment({ content: info.html });
+            var attachment = new Trix.Attachment({ content: info.html })
-            editor.editor.insertAttachment(attachment);
+            editor.editor.insertAttachment(attachment)
-        } else {
+        }else{
-            editor.editor.insertHTML(
+            editor.editor.insertHTML(`<a href="${info.originalUrl}">${info.record._file.originalName}</a>`)
-                `<a href="${info.originalUrl}">${info.file.filename}</a>`,
+
-            );
         }
+
+
     }
 
     onMount(() => {
         editor.addEventListener("trix-file-accept", (e) => {
             e.preventDefault();
-        });
+        })
 
         editor.addEventListener("trix-before-initialize", (e) => {
-            Trix.config.blockAttributes.heading1.tagName = "h2";
+            Trix.config.blockAttributes.heading1.tagName = 'h2';
-            const { toolbarElement } = e.target;
+            const { toolbarElement } = e.target
-            const h1Button = toolbarElement.querySelector(
+            const h1Button = toolbarElement.querySelector("[data-trix-attribute=heading1]")
-                "[data-trix-attribute=heading1]",
+            h1Button.insertAdjacentHTML("afterend", `<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`)
-            );
+        })
-            h1Button.insertAdjacentHTML(
+
-                "afterend",
+
-                `<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`,
+    })
-            );
-        });
-    });
     // onDestroy(() => {
     //     editor.removeEventListener("trix-before-initialize")
     // })
 
-    Trix.config.blockAttributes.default.breakOnReturn = false;
+
+    Trix.config.blockAttributes.default.breakOnReturn = false
     Trix.config.blockAttributes.heading3 = {
-        tagName: "h3",
+        tagName: 'h3',
         terminal: true,
         breakOnReturn: true,
-        group: false,
+        group: false
-    };
+    }
     // console.log(Trix.config)
+
 </script>
 
 <div class="tox-wrapper">
-    <input id="x-{field.name}" {value} type="hidden" />
+    <input id="x-{field.name}" {value} type="hidden">
     <trix-editor
-        bind:this={editor}
+            bind:this={editor}
-        class=" content"
+            class=" content"
-        input="x-{field.name}"
+            input="x-{field.name}"
-        role="textbox"
+            role="textbox"
-        tabindex="0"
+            tabindex="0"
-        on:trix-change={updateValue}
+            on:trix-change={updateValue}
+
     ></trix-editor>
 </div>

front/js/svelte/libs/tinymce.css

@@ -0,0 +1,37 @@
+.mce-content-body .img {
+    max-width: 100%;
+    height: auto;
+}
+
+.mce-content-body{
+    font-size: 16px;
+    line-height: 20px;
+}
+.mce-content-body p{
+
+    margin-bottom: 14px;
+    &:last-child{
+        margin-bottom: 0;
+    }
+}
+
+.mce-content-body ul {
+    padding: 0 0 0 16px;
+    list-style: none outside none;
+
+
+
+}
+
+.mce-content-body li::before {
+    content: "—";
+    opacity: .5;
+    font-size: 12px;
+    padding-right: 6px;
+    vertical-align: 10%;
+}
+
+.mce-content-body li {
+    list-style: none;
+    padding: 0;
+}

front/js/svelte/members/Members.svelte

@@ -3,8 +3,9 @@
     import SuccessAlert from "../common/SuccessAlert.svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
     import MemberSettingsCard from "./MemberSettingsCard.svelte";
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
-    import { apiPost } from "../../helpers";
+    import axios from "axios";
+
 
     const channel = getContext("channel");
     export let users;
@@ -22,14 +23,15 @@
     function invite(newName, newEmail, newRole) {
         errorMessage = "";
 
-        apiPost(channel.lucentUrl + "/members/invite", {
+        axios
-            name: newName,
+            .post(channel.lucentUrl + "/members/invite", {
-            email: newEmail,
+                name: newName,
-            roles: [newRole],
+                email: newEmail,
-        })
+                roles: [newRole],
+            })
             .then((response) => {
                 successAlert.show("User was invited");
-                users = [...users, response.user];
+                users = [...users, response.data.user];
                 name = null;
                 email = null;
                 role = null;
@@ -43,13 +45,14 @@
         e.preventDefault();
         errorMessage = "";
 
-        apiPost(channel.lucentUrl + "/members/update", {
+        axios
-            id: e.detail.user,
+            .post(channel.lucentUrl + "/members/update", {
-            roles: e.detail.roles,
+                id: e.detail.user,
-        })
+                roles: e.detail.roles,
+            })
             .then((response) => {
                 successAlert.show("Users updated");
-                users = response.users;
+                users = response.data.users;
             })
             .catch((error) => {
                 errorMessage = error.response?.data?.error ?? "";
@@ -60,45 +63,50 @@
 <div class="common-wrapper">
     <div class="lx-card mt-5">
         <h3 class="header-small mb-5">Invite people</h3>
-        <ErrorAlert message={errorMessage} />
+        <ErrorAlert message={errorMessage}/>
-        <SuccessAlert bind:this={successAlert} />
+        <SuccessAlert bind:this={successAlert}/>
 
         <form on:submit={submitInvite}>
             <div class="mb-3">
-                <label for="inviteeName" class="form-label">Invitee Name</label>
+                <label for="inviteeName" class="form-label"
+                >Invitee Name</label
+                >
                 <input
-                    type="text"
+                        type="text"
-                    bind:value={name}
+                        bind:value={name}
-                    class="form-control"
+                        class="form-control"
-                    id="inviteeName"
+                        id="inviteeName"
-                    placeholder="Member name"
+                        placeholder="Member name"
-                    required
+                        required
                 />
             </div>
             <div class="mb-3">
                 <label for="inviteeEmail" class="form-label"
-                    >Invitee Email Address</label
+                >Invitee Email Address</label
                 >
                 <input
-                    type="email"
+                        type="email"
-                    bind:value={email}
+                        bind:value={email}
-                    class="form-control"
+                        class="form-control"
-                    id="inviteeEmail"
+                        id="inviteeEmail"
-                    placeholder="Member email"
+                        placeholder="Member email"
-                    required
+                        required
                 />
             </div>
 
             <div class="me-3">
                 <select bind:value={role}>
                     {#each channel.roles.filter((r) => r !== "removed") as arole}
-                        <option value={arole}>{arole}</option>
+                        <option
+                                value={arole}
+
+                        >{arole}</option>
                     {/each}
                 </select>
             </div>
 
             <div class="mt-5 d-block text-center">
-                <SpinnerButton label="Invite" />
+                <SpinnerButton label="Invite"/>
             </div>
         </form>
     </div>
@@ -107,10 +115,10 @@
         <h3 class="header-small mb-5 mt-5">Members</h3>
         {#each users as user}
             <MemberSettingsCard
-                member={user}
+                    member={user}
-                roles={channel.roles}
+                    roles={channel.roles}
-                on:update={update}
+                    on:update={update}
-                on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
+                    on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
             />
         {/each}
     </div>

front/js/svelte/records/Edit.svelte

@@ -1,13 +1,15 @@
 <script>
-    import { afterUpdate, getContext, onMount } from "svelte";
+    import {afterUpdate, getContext, onMount} from "svelte";
-    import EditHeader from "./header/EditHeader.svelte";
+    import {isEqual} from "lodash";
-    import ContentTabs from "./header/ContentTabs.svelte";
+    import axios from "axios";
-    import FormField from "./FormField.svelte";
+    import EditHeader from "./header/EditHeader.svelte"
-    import Graph from "./Graph.svelte";
+    import FilePreview from "./FilePreview.svelte"
-    import Info from "./Info.svelte";
+    import ContentTabs from "./header/ContentTabs.svelte"
-    import ErrorAlert from "../common/ErrorAlert.svelte";
+    import FormField from "./FormField.svelte"
+    import Graph from "./Graph.svelte"
+    import Info from "./Info.svelte"
+    import ErrorAlert from "../common/ErrorAlert.svelte"
     import Title from "./header/Title.svelte";
-    import { apiPost, isEqual } from "../../helpers";
 
     const channel = getContext("channel");
 
@@ -15,7 +17,7 @@
     export let record;
     export let graph = {
         records: [],
-        edges: [],
+        edges: []
     };
     // export let recordHistory;
     export let isCreateMode;
@@ -27,11 +29,14 @@
     $: validationErrors = null;
     $: errorMessage = validationErrors
         ? `Record submission failed. ${
-              Object.entries(validationErrors).length
+            Object.entries(validationErrors).length
-          } error(s)`
+        } error(s)`
         : null;
 
-    let activeFields = schema.fields.filter((f) => f.name !== "id");
+    let activeFields = schema.fields.filter(
+        (f) => f.name !== "id"
+    );
+
 
     onMount(() => {
         setOriginalContent();
@@ -40,7 +45,10 @@
     function setOriginalContent() {
         originalContent = {
             data: JSON.parse(JSON.stringify(record.data)),
+            schema: record.schema,
             status: record.status,
+            _sys: JSON.parse(JSON.stringify(record._sys)),
+            _file: JSON.parse(JSON.stringify(record._file)),
             edges: JSON.parse(JSON.stringify(graph.edges)),
         };
     }
@@ -71,7 +79,10 @@
         }
         return !isEqual(originalContent, {
             data: record.data,
+            schema: record.schema,
             status: record.status,
+            _sys: record._sys,
+            _file: record._file,
             edges: graph.edges,
         });
     }
@@ -93,29 +104,27 @@
             }
 
             // remove trashed edges
-            graph.edges = graph.edges?.filter(
+            graph.edges = graph.edges?.filter((edge) => !edge._isTrashed && edge.source === record.id);
-                (edge) => !edge._isTrashed && edge.source === record.id,
+            axios
-            );
+                .post(channel.lucentUrl + "/records", {
-            apiPost(channel.lucentUrl + "/records", {
+                    record: record,
-                record: record,
+                    edges: graph.edges,
-                edges: graph.edges,
+                    isCreateMode: isCreateMode,
-                isCreateMode: isCreateMode,
+                })
-            })
                 .then(function (response) {
                     console.log("SAVE: SAVED");
 
                     if (isCreateMode) {
-                        window.location =
+                        window.location = channel.lucentUrl + "/records/" + record.id;
-                            channel.lucentUrl + "/records/" + record.id;
                     } else {
-                        record = response.records[0] ?? null;
+                        record = response.data.records[0] ?? null;
                         if (!record) {
                             // means trashed
                             hasUnsavedData = false;
                             window.location = channel.lucentUrl;
                             return;
                         }
-                        graph = response;
+                        graph = response.data;
                         setOriginalContent();
                     }
 
@@ -128,7 +137,7 @@
                             errorMessage = error.response.data.error;
                         } else {
                             validationErrors = error.response.data.error;
-                            console.log(validationErrors);
+                            console.log(validationErrors)
                         }
                     }
                     resolve(null);
@@ -140,60 +149,70 @@
     }
 </script>
 
-<svelte:window on:beforeunload={beforeUnload} />
+<svelte:window on:beforeunload={beforeUnload}/>
 
 <div class="record-edit">
     <div class="tools-header">
         <!--    <Manager managerRecords={recordHistory} {graph}/>-->
-        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab />
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
         {#if isCreateMode}
-            <button class="button primary btn-spinner" on:click={save}>
+            <button
-                <span
+                    class="button primary btn-spinner"
-                    class="spinner-border spinner-border-sm"
+                    on:click={save}
-                    role="status"
+            >
-                    aria-hidden="true"
+                            <span
-                />
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                            />
                 Create
             </button>
         {:else if hasUnsavedData}
             <button
-                type="button"
+                    type="button"
-                class="button primary ms-2 btn btn-primary btn-spinner"
+                    class="button primary ms-2 btn btn-primary btn-spinner"
-                on:click={save}
+                    on:click={save}
             >
-                <span
+                            <span
-                    class="spinner-border spinner-border-sm"
+                                    class="spinner-border spinner-border-sm"
-                    role="status"
+                                    role="status"
-                    aria-hidden="true"
+                                    aria-hidden="true"
-                />
+                            />
                 Save
             </button>
         {/if}
-    </div>
-    <Title {schema} {record} {isCreateMode} />
 
-    <ErrorAlert message={errorMessage} />
+    </div>
+    <Title {schema} {record} {isCreateMode}/>
+
+
+    <ErrorAlert message={errorMessage}/>
 
     <div class=" mt-4" style="margin-bottom:150px;position:relative;">
-        <ContentTabs {schema} {isCreateMode} bind:active={activeContentTab} />
+        <ContentTabs
+                {schema}
+                {isCreateMode}
+                bind:active={activeContentTab}
+        />
         {#if !["_graph", "_info"].includes(activeContentTab)}
+            <FilePreview {record} {schema}/>
             {#each activeFields as field (field.name)}
                 {#if activeContentTab === field.group}
                     <FormField
-                        bind:data={record.data}
+                            bind:data={record.data}
-                        bind:graph
+                            bind:graph={graph}
-                        {field}
+                            {field}
-                        {schema}
+                            {schema}
-                        {record}
+                            {record}
-                        {validationErrors}
+                            {validationErrors}
-                        {isCreateMode}
+                            {isCreateMode}
                     />
                 {/if}
             {/each}
         {:else if activeContentTab === "_graph"}
-            <Graph {graph} {record} />
+            <Graph {graph} {record}/>
         {:else if activeContentTab === "_info"}
-            <Info {record} {graph} {users} {schema} />
+            <Info {record} {graph} {users} {schema}/>
         {/if}
     </div>
 </div>

front/js/svelte/records/FilePreview.svelte

@@ -1,7 +1,7 @@
 <script>
     import Preview from "../files/Preview.svelte";
-    import { fileurl } from "../files/imageserver";
+    import {fileurl} from "../files/imageserver"
-    import { getContext } from "svelte";
+    import {getContext} from "svelte"
 
     const channel = getContext("channel");
     export let record;
@@ -11,9 +11,10 @@
 {#if schema.type === "files"}
     <div class="record-edit-file-preview">
         <div>
-            <Preview {record} size="large" />
+            <Preview {record} size="large"/>
         </div>
         <div class="file-details">
+
             <div class="file-details-item">
                 <span class="text-muted">Filename</span>
                 <span>{record._file.path}</span>
@@ -41,13 +42,9 @@
                 <span>{record._file.checksum}</span>
             </div>
             <div class="file-details-item">
-                <a
+                <a class="button primary" target="_blank" style="display: inline-flex" href="{fileurl(channel,record)}">Download</a>
-                    class="button primary"
-                    target="_blank"
-                    style="display: inline-flex"
-                    href={fileurl(channel, record)}>Download</a
-                >
             </div>
         </div>
     </div>
 {/if}
+

front/js/svelte/records/FormField.svelte

@@ -45,20 +45,25 @@
 </script>
 
 <div class="editor-field">
-    <FieldHeader {field} {id} />
+    <FieldHeader {field} {id}/>
     {#if field.info.name === "reference" && field.layout === "tags"}
-        <ReferenceTags bind:graph {id} {record} {field} {validationErrors} />
+        <ReferenceTags
+                bind:graph
+                {id}
+                {record}
+                {field}
+                {validationErrors}
+        />
     {:else if field.info.name === "reference"}
-        <Reference bind:graph {id} {record} {field} {validationErrors} />
+        <Reference
-    {:else if field.info.name === "file"}
+            bind:graph
-        <!-- <File bind:graph {record} {field} {validationErrors} /> -->
-        <File
-            bind:value={data[field.name]}
-            {record}
             {id}
+            {record}
             {field}
             {validationErrors}
         />
+    {:else if field.info.name === "file"}
+        <File bind:graph {record} {field} {validationErrors}/>
     {:else if field.info.name === "text"}
         <Text
             bind:value={data[field.name]}
@@ -69,11 +74,11 @@
         />
     {:else if field.info.name === "slug"}
         <Slug
-            bind:value={data[field.name]}
+                bind:value={data[field.name]}
-            {field}
+                {field}
-            {id}
+                {id}
-            {validationErrors}
+                {validationErrors}
-            {isCreateMode}
+                {isCreateMode}
         />
     {:else if field.info.name === "textarea"}
         <Textarea
@@ -85,23 +90,23 @@
         />
     {:else if field.info.name === "rich"}
         <RichEditor
-            bind:value={data[field.name]}
+                bind:value={data[field.name]}
-            {schema}
+                {schema}
-            {field}
+                {field}
-            {validationErrors}
+                {validationErrors}
-            {isCreateMode}
+                {isCreateMode}
-            bind:graph
+                bind:graph
-            {record}
+                {record}
         />
     {:else if field.info.name === "markdown"}
         <Markdown
-            bind:value={data[field.name]}
+                bind:value={data[field.name]}
-            {schema}
+                {schema}
-            {field}
+                {field}
-            {validationErrors}
+                {validationErrors}
-            {isCreateMode}
+                {isCreateMode}
-            bind:graph
+                bind:graph
-            {record}
+                {record}
         />
     {:else}
         <svelte:component

front/js/svelte/records/Info.svelte

@@ -1,11 +1,11 @@
 <script>
-    import { friendlyDate, isEqual } from "../../helpers";
+    import {friendlyDate} from "../../helpers";
     import Avatar from "../account/Avatar.svelte";
-    import { usernameById } from "../account/users";
+    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 {getContext} from "svelte";
     import RevisionEdgeRow from "./revisions/RevisionEdgeRow.svelte";
 
     const channel = getContext("channel");
@@ -30,27 +30,27 @@
         });
 
     function getEdgesByField(fieldsWithDiff, revision) {
-        edgeFieldsDiff = graph.edges
+
-            .filter((e) => e.depth === 1)
+        edgeFieldsDiff = graph.edges.filter((e) => e.depth === 1).reduce((c, e) => {
-            .reduce((c, e) => {
+            if (!c[e.field]) {
-                if (!c[e.field]) {
+                c[e.field] = {
-                    c[e.field] = {
+                    record: [],
-                        record: [],
+                    revision: [],
-                        revision: [],
-                    };
                 }
-                c[e.field]["record"].push(e);
+            }
-                return c;
+            c[e.field]["record"].push(e)
-            }, {});
+            return c;
+        }, {});
+
 
         edgeFieldsDiff = revision._edges.reduce((c, e) => {
             if (!c[e.field]) {
                 c[e.field] = {
                     record: [],
                     revision: [],
-                };
+                }
             }
-            c[e.field]["revision"].push(e);
+            c[e.field]["revision"].push(e)
             return c;
         }, edgeFieldsDiff);
     }
@@ -62,7 +62,7 @@
         fieldsWithDiff = schema.fields.filter((f) => {
             return !isEqual(selectedRevision.data[f.name], record.data[f.name]);
         });
-        getEdgesByField(fieldsWithDiff, revision);
+        getEdgesByField(fieldsWithDiff, revision)
         revisionSection.scrollIntoView();
     }
 
@@ -71,7 +71,7 @@
         rollbackError = "";
         axios
             .post(
-                `${channel.lucentUrl}/records/${record.id}/rollback/${selectedRevision.version}`,
+                `${channel.lucentUrl}/records/${record.id}/rollback/${selectedRevision._sys.version}`
             )
             .then((response) => {
                 window.location.reload();
@@ -84,7 +84,7 @@
     }
 </script>
 
-<div class="lx-card">
+<div class="lx-card ">
     <div class="row">
         <div class="col-8">
             <div>
@@ -93,27 +93,29 @@
             </div>
             <div>
                 <span class="label text-end text-muted">current version </span>
-                {record.version}
+                {record._sys.version}
             </div>
             <div>
                 <span class="label text-end text-muted"> created </span>
                 <Avatar
-                    name={usernameById(users, record.createdBy)}
+                        name={usernameById(users, record._sys.createdBy)}
-                    side={24}
+                        side={24}
                 />
-                {friendlyDate(record.createdAt)}
+                {friendlyDate(record._sys.createdAt)}
             </div>
             <div>
-                <span class="label text-end text-muted">updated </span>
+                <span class="label  text-end text-muted">updated </span>
                 <Avatar
-                    name={usernameById(users, record.updatedBy)}
+                        name={usernameById(users, record._sys.updatedBy)}
-                    side={24}
+                        side={24}
                 />
-                {friendlyDate(record.updatedAt)}
+                {friendlyDate(record._sys.updatedAt)}
             </div>
         </div>
         <div class="col-4">
-            <span class="label d-block text-muted">Rules for this schema </span>
+            <span class="label d-block text-muted "
+            >Rules for this schema
+            </span>
             <small>
                 Each record maintains the last {schema.revisions}
                 versions
@@ -123,31 +125,33 @@
 </div>
 <div class="revisions">
     {#if schema.revisions > 0}
-        <div class="header-small mb-3">Revisions</div>
+        <div class="header-small  mb-3">Revisions</div>
         {#each revisions as revision}
-            {#if revision.version !== record.version}
+            {#if revision._sys.version !== record._sys.version}
                 <div
-                    class="revision"
+                        class="revision"
-                    class:active={revision.version ===
+                        class:active={revision._sys.version ===
-                        selectedRevision?.version}
+                        selectedRevision?._sys.version}
                 >
+
                     <div class="version">
-                        <span>version {revision.version}</span>
+                        <span>version {revision._sys.version}</span>
                         <Avatar
-                            name={usernameById(users, revision.updatedBy)}
+                                name={usernameById(users, revision._sys.updatedBy)}
-                            side={24}
+                                side={24}
                         />
-                        {friendlyDate(revision.updatedAt)}
+                        {friendlyDate(revision._sys.updatedAt)}
                     </div>
 
                     <div class="col-3 text-center">
                         <button
-                            disabled={revision.version ===
+                                disabled={revision._sys.version ===
-                                selectedRevision?.version}
+                                selectedRevision?._sys.version}
-                            class="button"
+                                class="button"
-                            on:click={(e) => compare(e, revision)}
+                                on:click={(e) => compare(e, revision)}
-                            >Compare
+                        >Compare
-                        </button>
+                        </button
+                        >
                     </div>
                 </div>
             {/if}
@@ -165,13 +169,15 @@
                 <p class="text-center fw-bold mb-3 mt-5">
                     If you choose to rollback to this revision
                 </p>
-                <button on:click={rollback} class="button">
+                <button
-                    Rollback to version {selectedRevision.version}
+                        on:click={rollback}
+                        class="button"
+                >
+                    Rollback to version {selectedRevision._sys.version}
                 </button>
 
                 {#if rollbackError}
-                    <span class="d-block text-danger mt-3">{rollbackError}</span
+                    <span class="d-block text-danger mt-3">{rollbackError}</span>
-                    >
                 {/if}
                 <div class="mt-3">
                     {#each fieldsWithDiff as field}
@@ -182,28 +188,31 @@
                         <!-- <div class="d-block" style="width:200px;">
                                 {field.label}
                             </div> -->
-                        <div class="revision-field" style="overflow:hidden">
+                        <div
+                                class="revision-field"
+                                style="overflow:hidden"
+                        >
                             <div class="compare-left">
                                 <RevisionCell
-                                    {field}
+                                        {field}
-                                    side={record.data[field.name]}
+                                        side={record.data[field.name]}
-                                    colorClass="text-danger"
+                                        colorClass="text-danger"
                                 />
                             </div>
                             <div class="compare-center">
                                 <span class="me-1">{field.label}</span>
                                 <Icon
-                                    icon="angle-right"
+                                        icon="angle-right"
-                                    width="12"
+                                        width="12"
-                                    height="12"
+                                        height="12"
                                 />
                             </div>
                             <div class="compare-right">
                                 <RevisionCell
-                                    edges={selectedRevision._edges}
+                                        edges={selectedRevision._edges}
-                                    {field}
+                                        {field}
-                                    side={selectedRevision.data[field.name]}
+                                        side={selectedRevision.data[field.name]}
-                                    colorClass="text-success"
+                                        colorClass="text-success"
                                 />
                             </div>
                         </div>
@@ -217,16 +226,22 @@
             {/if}
 
             <div class="mt-3">
-                <p class="text-center fw-bold mb-3 mt-5">Record References</p>
+                <p class="text-center fw-bold mb-3 mt-5">
+                    Record References
+                </p>
                 {#each Object.entries(edgeFieldsDiff) as [field, edges]}
-                    <div class="revision-references" style="overflow:hidden">
+                    <div
+                            class="revision-references"
+                            style="overflow:hidden"
+                    >
                         <div class="reference-field">
                             {field}:
                         </div>
                         <div class="reference-compare">
+
                             <p class="">Record</p>
                             {#each edges.record as edge}
-                                <RevisionEdgeRow {edge} />
+                                <RevisionEdgeRow {edge}/>
                             {:else}
                                 <p>No references</p>
                             {/each}
@@ -234,7 +249,7 @@
                         <div class="reference-compare">
                             <p class="text-success">Revision</p>
                             {#each edges.revision as edge}
-                                <RevisionEdgeRow {edge} />
+                                <RevisionEdgeRow {edge}/>
                             {:else}
                                 <p>No references</p>
                             {/each}
@@ -243,5 +258,7 @@
                 {/each}
             </div>
         </div>
+
     {/if}
 </div>
+

front/js/svelte/records/InlineEdit.svelte

@@ -1,18 +1,14 @@
 <script>
-    import {
+    import {afterUpdate, createEventDispatcher, getContext, onMount} from "svelte";
-        afterUpdate,
-        createEventDispatcher,
-        getContext,
-        onMount,
-    } from "svelte";
 
+    import {isEqual} from "lodash";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
     import ContentTabs from "./header/ContentTabs.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
     import EditHeader from "./header/EditHeader.svelte";
+    import axios from "axios";
     import Title from "./header/Title.svelte";
-    import { apiPost, isEqual } from "../../helpers";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -20,7 +16,7 @@
     export let record;
     export let graph = {
         records: [],
-        edges: [],
+        edges: []
     };
     export let isCreateMode;
     let originalContent;
@@ -29,11 +25,13 @@
     $: validationErrors = null;
     $: errorMessage = validationErrors
         ? `Record submission failed. ${
-              Object.entries(validationErrors).length
+            Object.entries(validationErrors).length
-          } error(s)`
+        } error(s)`
         : null;
 
-    let activeFields = schema.fields.filter((f) => f.name !== "id");
+    let activeFields = schema.fields.filter(
+        (f) => f.name !== "id"
+    );
 
     let tabname = "_default";
     let fieldToTabs = schema.fields.reduce((c, f) => {
@@ -55,6 +53,8 @@
             data: JSON.parse(JSON.stringify(record.data)),
             schema: record.schema,
             status: record.status,
+            _sys: JSON.parse(JSON.stringify(record._sys)),
+            _file: JSON.parse(JSON.stringify(record._file)),
             edges: JSON.parse(JSON.stringify(graph.edges)),
         };
     }
@@ -87,6 +87,8 @@
             data: record.data,
             schema: record.schema,
             status: record.status,
+            _sys: record._sys,
+            _file: record._file,
             edges: graph.edges,
         });
     }
@@ -112,21 +114,20 @@
                 return;
             }
             // remove trashed edges
-            graph.edges =
+            graph.edges = graph.edges?.filter((edge) => !edge._isTrashed && edge.source === record.id) ?? [];
-                graph.edges?.filter(
-                    (edge) => !edge._isTrashed && edge.source === record.id,
-                ) ?? [];
 
-            apiPost(channel.lucentUrl + "/records", {
+
-                record: record,
+            axios
-                edges: graph.edges,
+                .post(channel.lucentUrl + "/records", {
-                isCreateMode: isCreateMode,
+                    record: record,
-            })
+                    edges: graph.edges,
+                    isCreateMode: isCreateMode,
+                })
                 .then(function (response) {
                     console.log("SAVE: SAVED INLINE");
 
-                    record = response.records[0];
+                    record = response.data.records[0];
-                    graph = response;
+                    graph = response.data;
                     if (!isCreateMode) {
                         setOriginalContent();
                     }
@@ -149,55 +150,64 @@
     }
 </script>
 
-<svelte:window on:beforeunload={beforeUnload} />
+<svelte:window on:beforeunload={beforeUnload}/>
 
 <div class="inline-edit record-edit">
     <div class="tools-header">
-        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab />
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
         {#if isCreateMode}
-            <button class="button primary btn-spinner" on:click={save}>
+            <button
-                <span
+                    class="button primary btn-spinner"
-                    class="spinner-border spinner-border-sm"
+                    on:click={save}
-                    role="status"
+            >
-                    aria-hidden="true"
+                            <span
-                />
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                            />
                 Create
             </button>
         {:else if hasUnsavedData}
             <button
-                type="button"
+                    type="button"
-                class="button primary ms-2 btn btn-primary btn-spinner"
+                    class="button primary ms-2 btn btn-primary btn-spinner"
-                on:click={save}
+                    on:click={save}
             >
-                <span
+                            <span
-                    class="spinner-border spinner-border-sm"
+                                    class="spinner-border spinner-border-sm"
-                    role="status"
+                                    role="status"
-                    aria-hidden="true"
+                                    aria-hidden="true"
-                />
+                            />
                 Save
             </button>
         {/if}
+
     </div>
-    <Title {schema} {record} {isCreateMode} />
+    <Title {schema} {record} {isCreateMode}/>
-    <ErrorAlert message={errorMessage} />
+    <ErrorAlert message={errorMessage}/>
 
     <div class=" mt-4" style="margin-bottom:150px;position:relative;">
-        <ContentTabs {schema} {isCreateMode} bind:active={activeContentTab} />
+        <ContentTabs
-        <FilePreview {record} {schema} />
+                {schema}
+                {isCreateMode}
+                bind:active={activeContentTab}
+        />
+        <FilePreview {record} {schema}/>
         <!-- <fieldset disabled="disabled"> -->
         {#each activeFields as field (field.name)}
             {#if activeContentTab === field.group}
                 <FormField
-                    bind:data={record.data}
+                        bind:data={record.data}
-                    bind:graph
+                        bind:graph={graph}
-                    {field}
+                        {field}
-                    {schema}
+                        {schema}
-                    {record}
+                        {record}
-                    {validationErrors}
+                        {validationErrors}
-                    {isCreateMode}
+                        {isCreateMode}
                 />
             {/if}
         {/each}
         <!-- </fieldset> -->
     </div>
 </div>
+

front/js/svelte/records/Preview.js

@@ -0,0 +1,33 @@
+import Mustache from "mustache";
+import {stripHtml} from "../../helpers";
+
+export function previewTitle(schemas, record, graph) {
+    let schema = schemas.find((aSchema) => aSchema.name === record?.schema);
+    if (!schema?.cardTitle) {
+        return noTemplate(schema, record);
+    }
+
+    let recordData = record.data;
+    let render = Mustache.render(schema.cardTitle, recordData);
+    if (!render || render === "") {
+        return noTemplate(schema, record);
+    }
+
+    return stripHtml(render.slice(0, 300));
+}
+
+function noTemplate(schema, record) {
+    if (schema?.type === "files") {
+        return record._file.path;
+    }
+
+    let title =  stripHtml(
+        record?.data[schema.fields.filter((f) => f.info.name === "text")[0]?.name]
+    ).slice(0, 300);
+
+    if(title.trim() === ""){
+        return "~Untitled~";
+    }
+
+    return title;
+}

front/js/svelte/records/PreviewCardSmall.svelte

@@ -1,13 +1,21 @@
 <script>
-    import { getContext } from "svelte";
+    import {previewTitle} from "./Preview";
+    import {getContext} from "svelte";
 
     const channel = getContext("channel");
     export let record;
-    $: title = record.data.name;
+    export let graph;
+    $: schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+
+    $: title = previewTitle(channel.schemas, record, graph);
 </script>
 
 {#if record?.data}
-    <a href="{channel.lucentUrl}/records/{record.id}" {title} class="reference">
+    <a
+        href="{channel.lucentUrl}/records/{record.id}"
+        {title}
+        class="reference"
+    >
         {title}
     </a>
 {/if}

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

@@ -1,69 +1,84 @@
 <script>
-    import { array_move } from "../../edges/sortEdges";
+    import {sortByField} from "../../edges/sortEdges";
     import Sortable from "../../libs/Sortable.svelte";
     import PreviewFile from "../previews/PreviewFile.svelte";
-    import FileDialog from "../../dialog/FileDialog.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
-    import Uploader from "../../files/Uploader.svelte";
+    import Dialog from "../../dialog/Dialog.svelte";
+    import {insertEdges} from "./reference.js";
+    import {getContext} from "svelte";
 
+    const channel = getContext("channel");
     export let field;
     export let record;
-    export let value = [];
+    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)) ?? [];
 
-    function removeFile(e) {
+    let collections = channel.schemas.filter((aschema) =>
+        field.collections.includes(aschema.name)
+    );
+
+    function removeReference(e) {
         e.preventDefault();
-        value = value.filter((f) => !(f.id === e.detail));
+        graph.edges = graph.edges.filter(
+            (edge) => !(edge.target === e.detail && edge.field === field.name)
+        );
+    }
+
+    function openBrowseModal(e, schema) {
+        e.preventDefault();
+        browseModal.open(schema);
     }
 
     async function reorder(e) {
-        value = await array_move(value, e.detail.source, e.detail.target);
+
+        graph.edges = await sortByField(e.detail.source, e.detail.target, graph.edges, field.name, references);
+
     }
 
-    function insertFiles(e) {
+    function insert(e) {
         e.preventDefault();
         browseModal.close();
-        value = [...(value ?? []), ...(e.detail ?? [])];
+        graph = insertEdges(graph, record, e.detail.records, field.name, e.detail.action);
-    }
-
-    function replaceFiles(e) {
-        e.preventDefault();
-        browseModal.close();
-        value = e.detail ?? [];
-    }
-
-    function uploadComplete(e) {
-        // value = [...value, e.detail];
-    }
-
-    function openBrowseModal(e) {
-        e.preventDefault();
-        browseModal.open(record.id);
     }
 </script>
 
 <div class="mb-0">
-    <button class="button" on:click={openBrowseModal}> Browse </button>
+    {#if field.collections.length === 1}
-
+        <button
-    <div>
+                class="button"
-        <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
+                on:click={(e) => openBrowseModal(e, collections[0].name)}
-    </div>
+        >
+            Browse
+        </button>
+    {:else}
+        <Dropdown>
+            <div slot="button">
+                Browse
+            </div>
+            {#each collections as collection}
+                <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
+                <a
+                        class="dropdown-item"
+                        on:click={(e) => openBrowseModal(e, collection.name)}
+                        href="/">{collection.label}</a
+                >
+            {/each}
+        </Dropdown>
+    {/if}
 </div>
-{#if value.length > 0}
+{#if references.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>
-        {#each value ?? [] as aFile (aFile.id)}
+        {#each references as reference (reference.id)}
             <!--This div helps the sorting thing-->
             <div>
-                <PreviewFile
+                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
-                    file={aFile}
-                    hasDelete={true}
-                    on:remove_file={removeFile}
-                ></PreviewFile>
             </div>
         {/each}
     </Sortable>
 {/if}
-<FileDialog
+<Dialog bind:this={browseModal} on:insert={insert}></Dialog>
-    bind:this={browseModal}
-    on:insert_files={insertFiles}
-    on:replace_files={replaceFiles}
-></FileDialog>

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

@@ -1,11 +1,12 @@
 <script>
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
-    import { insertEdges } from "./reference";
+    import {insertEdges} from "./reference";
-    import { getErrorMessage } from "./errorMessage";
+    import {getErrorMessage} from "./errorMessage";
-    import { sortByField } from "../../edges/sortEdges";
+    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;
@@ -14,36 +15,27 @@
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
-    $: references =
+
-        graph.edges
+    $: references = graph.edges
-            .filter((edge) => edge.field === field.name)
+        .filter((edge) => edge.field === field.name)
-            .map((edge) => {
+        .map((edge) => {
-                return graph.records.find(
+            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
-                    (increc) =>
+        }).filter((rec) => (rec?.id ? true : false)) ?? [];
-                        increc.id === edge.target && record.id === edge.source,
-                );
-            })
-            .filter((rec) => (rec?.id ? true : false)) ?? [];
 
     let collections = channel.schemas.filter((aschema) =>
-        field.collections.includes(aschema.name),
+        field.collections.includes(aschema.name)
     );
 
     function removeReference(e) {
         e.preventDefault();
         graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name),
+            (edge) => !(edge.target === e.detail && edge.field === field.name)
         );
     }
 
     function reorder(e) {
-        graph.edges = sortByField(
+
-            e.detail.source,
+        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, field.name, references);
-            e.detail.target,
-            graph.edges,
-            field.name,
-            references,
-        );
     }
 
     function insert(e) {
@@ -57,14 +49,9 @@
         // }).then(function (response) {
         //     graph = response.data.graph;
         // })
-        graph = insertEdges(
+        graph = insertEdges(graph, record, e.detail.records, field.name, e.detail.action);
-            graph,
-            record,
-            e.detail.records,
-            field.name,
-            e.detail.action,
-        );
     }
+
 </script>
 
 {#if errorMessage}
@@ -74,10 +61,10 @@
 {/if}
 <div class="inline-card-wrapper">
     <ReferenceInlineButtons
-        recordId={null}
+            recordId={null}
-        schemas={collections}
+            schemas={collections}
-        on:insert={insert}
+            on:insert={insert}
-        on:save={insert}
+            on:save={insert}
     />
 </div>
 {#if references.length > 0}
@@ -85,10 +72,10 @@
         {#each references as reference (reference.id)}
             <div>
                 <PreviewReference
-                    {graph}
+                        {graph}
-                    record={reference}
+                        record={reference}
-                    hasDelete={true}
+                        hasDelete={true}
-                    on:remove={removeReference}
+                        on:remove={removeReference}
                 />
             </div>
         {/each}

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

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

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

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

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

@@ -1,6 +1,7 @@
 <script>
+    import Tinymce from "../../libs/Tinymce.svelte";
     import RichEditorFiles from "./RichEditorFiles.svelte";
-    import { getErrorMessage } from "./errorMessage";
+    import {getErrorMessage} from "./errorMessage";
     import Trix from "../../libs/Trix.svelte";
 
     export let value;
@@ -17,24 +18,29 @@
         readonly: field.readonly && !isCreateMode,
     };
 
-    function insertMedia(e) {
+    function insertMedia(e){
-        editor.insertMedia(e.detail);
+        editor.insertMedia(e.detail)
     }
 </script>
 
 <div class="mb-0">
+
     <Trix {field} bind:this={editor} bind:value></Trix>
-    <!--    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>-->
+<!--    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>-->
     {#if field.collections.length > 0}
         <RichEditorFiles
-            bind:graph
+                bind:graph
-            {record}
+                {record}
-            {field}
+                {field}
-            {validationErrors}
+                {validationErrors}
-            on:editor-insert={insertMedia}
+                on:editor-insert={insertMedia}
-        ></RichEditorFiles>
+        >
+
+
+        </RichEditorFiles>
     {/if}
 
+
     {#if errorMessage}
         <div class="invalid-feedback d-block">
             {errorMessage}

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

@@ -1,4 +1,5 @@
 <script>
+    import { v4 as uuidv4 } from "uuid";
     import { getContext } from "svelte";
     import Icon from "../../common/Icon.svelte";
     import { getErrorMessage } from "./errorMessage";
@@ -13,11 +14,12 @@
 
     function generateId(e) {
         e.preventDefault();
-        value = self.crypto.randomUUID();
+        value = uuidv4();
     }
 </script>
 
 <div class="mb-0">
+
     <div class="d-flex justify-content-between">
         <input
             type="text"
@@ -29,13 +31,13 @@
             {readonly}
         />
         {#if !readonly}
-            <button
+        <button
-                class="btn btn-primary ms-2"
+            class="btn btn-primary ms-2"
-                title="Generate a new UUIDv4"
+            title="Generate a new UUIDv4"
-                on:click={generateId}
+            on:click={generateId}
-            >
+        >
-                <Icon icon="dice" />
+            <Icon icon="dice" />
-            </button>
+        </button>
         {/if}
     </div>
 

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

@@ -1,10 +1,11 @@
 <script>
+    import { uniqueId } from "lodash";
     import { getContext } from "svelte";
     const channelurl = getContext("channelurl");
     export let field;
     export let value;
     export let schema;
-    let id = self.crypto.randomUUID();
+    let id = uniqueId();
 </script>
 
 <div class="mb-0">
@@ -24,6 +25,6 @@
         placeholder="https://www.example.com"
     />
     {#if field.help}
-        <small class=" text-primary opacity-50">{field.help}</small>
+        <small class=" text-primary  opacity-50">{field.help}</small>
     {/if}
 </div>

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

@@ -1,36 +1,24 @@
-import { arrayUniqueCb } from "../../../helpers";
+import {uniqBy} from "lodash";
 
-export function insertEdges(
+export function insertEdges(graph, sourceRecord, targetRecords, fieldName, action = "") {
-  graph,
+    let newEdges = targetRecords.map((r) => {
-  sourceRecord,
+        return {
-  targetRecords,
+            target: r.id,
-  fieldName,
+            source: sourceRecord.id,
-  action = "",
+            sourceSchema: sourceRecord.schema,
-) {
+            targetSchema: r.schema,
-  let newEdges = targetRecords.map((r) => {
+            field: fieldName,
-    return {
+            depth: 1,
-      target: r.id,
+            rank: ""
-      source: sourceRecord.id,
+        };
-      sourceSchema: sourceRecord.schema,
+    });
-      targetSchema: r.schema,
-      field: fieldName,
-      depth: 1,
-      rank: "",
-    };
-  });
 
-  let replacedEdges = graph.edges;
+    let replacedEdges = graph.edges;
-  if (action === "replace") {
+    if (action === "replace") {
-    replacedEdges = replacedEdges.filter((edge) => edge.field !== field.name);
+        replacedEdges = replacedEdges.filter((edge) => edge.field !== field.name);
-  }
+    }
 
-  graph.records = arrayUniqueCb(
+    graph.records = uniqBy([...graph.records, ...targetRecords], (r) => r.id);
-    [...graph.records, ...targetRecords],
+    graph.edges = uniqBy([...replacedEdges, ...newEdges], (edge) =>  edge.source +  edge.target + edge.field + edge.depth);
-    (r) => r.id,
+    return graph;
-  );
-  graph.edges = arrayUniqueCb(
-    [...replacedEdges, ...newEdges],
-    (edge) => edge.source + edge.target + edge.field + edge.depth,
-  );
-  return graph;
 }

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

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

front/js/svelte/records/header/Title.svelte

@@ -1,21 +1,27 @@
 <script>
-    import { getContext } from "svelte";
+    import {getContext} from "svelte";
+    import {previewTitle} from "./../Preview";
 
     const channel = getContext("channel");
     export let schema;
     export let record;
     export let isCreateMode;
+
 </script>
 
 <div class="record-header">
-    <a class="schema-name" href="{channel.lucentUrl}/content/{schema.name}"
+
-        >{schema.label.toUpperCase()}</a
+    <a
+            class="schema-name"
+            href="{channel.lucentUrl}/content/{schema.name}"
+    >{schema.label.toUpperCase()}</a
     >
     <span class="record-title">
         {#if !isCreateMode}
-            {record.data.name}
+            {previewTitle(channel.schemas, record)}
         {:else}
             New Record
         {/if}
     </span>
-</div>
+
+</div>

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

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

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

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

front/js/svelte/records/revisions/RevisionCell.svelte

@@ -1,6 +1,6 @@
 <script>
+    import Preview from "../../files/Preview.svelte";
     import PreviewCardSmall from "../PreviewCardSmall.svelte";
-    import PreviewFile from "../previews/PreviewFile.svelte";
 
     export let field;
     export let side;
@@ -8,23 +8,26 @@
     export let colorClass;
 </script>
 
-{#if ["reference"].includes(field.info.name)}
+{#if ["reference", "file"].includes(field.info.name)}
     <div class="{colorClass}  field-content">
         <div class="d-flex align-items-center text-center flex-wrap">
             {#each edges[field.name] as edgeRecord}
-                <div class="ms-2">
+                {#if edgeRecord._file?.path}
-                    <PreviewCardSmall record={edgeRecord} />
+                    <div
-                </div>
+                        class="ms-2 "
-            {/each}
+                        style="max-width:64px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
-        </div>
+                    >
-    </div>
+                        <Preview
-{:else if ["file"].includes(field.info.name)}
+                            record={edgeRecord}
-    <div class="{colorClass}  field-content">
+                            size="small"
-        <div class="d-flex align-items-center text-center flex-wrap">
+                            showFilename={true}
-            {#each side as aFile}
+                        />
-                <div class="ms-2">
+                    </div>
-                    <PreviewFile file={aFile} />
+                {:else}
-                </div>
+                    <div class="ms-2 ">
+                        <PreviewCardSmall record={edgeRecord}/>
+                    </div>
+                {/if}
             {/each}
         </div>
     </div>
@@ -40,6 +43,7 @@
 
 <!-- {/if} -->
 <style>
+
     .field-content {
         max-height: 200px;
         overflow-y: scroll;

front/js/svelte/setup/Index.svelte

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,67 @@
+<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

@@ -1,25 +1,34 @@
 {
-  "private": true,
+    "private": true,
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "dev": "vite",
+        "dev": "vite",
-    "build": "vite build"
+        "build": "vite build"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "@codemirror/commands": "^6.6.0",
+        "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.2.5",
+        "@codemirror/lang-markdown": "^6.2.5",
-    "@codemirror/state": "^6.4.1",
+        "@codemirror/state": "^6.4.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+        "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "codemirror": "^6.0.1",
+        "axios": "^1.7.4",
-    "date-fns": "^3.6.0",
+        "codemirror": "^6.0.1",
-    "flatpickr": "^4.6.13",
+        "date-fns": "^3.6.0",
-    "fuse.js": "^7.0.0",
+        "flatpickr": "^4.6.13",
-    "laravel-vite-plugin": "^1.0.5",
+        "fuse.js": "^7.0.0",
-    "sass": "^1.77.8",
+        "htmx.org": "^2.0.1",
-    "sortablejs": "^1.15.2",
+        "install": "^0.13.0",
-    "svelte": "^4.2.18",
+        "laravel-vite-plugin": "^1.0.5",
-    "trix": "^2.1.5",
+        "lodash": "^4.17.21",
-    "vite": "5.2.6"
+        "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"
+    }
 }

front/views/auth/login-success.blade.php

@@ -0,0 +1,9 @@
+
+
+<x-lucent::notice type="success" title="Success">
+    <p>
+        If you have provided a valid email you should receive in the following seconds a login email
+    </p>
+
+    <p>You can safely close this tab</p>
+</x-lucent::notice>

front/views/auth/login.blade.php

@@ -0,0 +1,37 @@
+@extends("lucent::layouts.account")
+
+@section("content")
+    <div class="scope-login">
+        <div class="bg-image">
+
+        </div>
+        <div class="login-form">
+            <div class="form">
+                <h2 class="mb-5">Enter Lucent</h2>
+
+                <form hx-post="/lucent/login" >
+                    @csrf
+                    <p>Submit your email address and you will receive a <b>login link</b> to your email</p>
+                    <p>Don't forget to check your spam folder</p>
+                    <div class="mt-5 mb-3">
+                        <label for="emailaddress" class="form-label">Email address</label>
+                        <input
+                                type="email"
+                                name="email"
+                                class="form-control"
+                                id="emailaddress"
+                                required
+                        />
+                    </div>
+
+
+
+                    <x-lucent::button-indicator>
+                        Send email
+                    </x-lucent::button-indicator>
+
+                </form>
+            </div>
+        </div>
+    </div>
+@endsection

front/views/auth/verify.blade.php

@@ -0,0 +1,24 @@
+@extends("lucent::layouts.account")
+
+@section("content")
+    <div class="scope-login">
+        <div class="bg-image">
+
+        </div>
+        <div class="login-form">
+            <div class="form">
+                <h2 class="mb-5">Welcome to Lucent</h2>
+
+                <form hx-post="/lucent/verify" hx-redirect="/lucent" hx-target-error=".form-errors" >
+                    <input type="hidden" value="{{$email}}" name="email" />
+                    <input type="hidden" value="{{$token}}" name="token" />
+                    @csrf
+                        <x-lucent::button-indicator>
+                            Enter as {{$email}}
+                        </x-lucent::button-indicator>
+                </form>
+                <div class="form-errors"></div>
+            </div>
+        </div>
+    </div>
+@endsection

front/views/components/avatar.blade.php

@@ -0,0 +1,43 @@
+@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/components/button-indicator.blade.php

@@ -0,0 +1,4 @@
+<button class="bt bt-primary">
+    {{$slot}}
+    <img alt="indicator" id="indicator" class="htmx-indicator" src="/img/spinner.svg"/>
+</button>

front/views/components/notice.blade.php

@@ -0,0 +1,4 @@
+<div class="notice {{$type ?? "info"}}">
+    <div class="title">{{$title}}</div>
+    <div class="content">{{ $slot }}</div>
+</div>

front/views/forms/errors.blade.php

@@ -0,0 +1,9 @@
+@if (count($errors) > 0)
+    <x-lucent::notice type="error" title="🛑 Submission failed">
+        <ul>
+            @foreach ($errors as $error)
+                <li>{{ $error }}</li>
+            @endforeach
+        </ul>
+    </x-lucent::notice>
+@endif

front/views/home.blade.php

@@ -0,0 +1,23 @@
+@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/header.blade.php

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,34 @@
+<!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"/>--}}
+
+</head>
+
+<body>
+    <div>
+        @yield('content')
+    </div>
+
+</body>
+
+</html>

front/views/layouts/channel.blade.php

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>@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">
+
+</head>
+
+<body>
+
+
+    @yield('content')
+
+
+</body>
+
+</html>

front/views/records/card-row.blade.php

@@ -0,0 +1,33 @@
+@php
+    $schema = $schemas->where("name",$record->schema)->first();
+@endphp
+<td>
+    @if($schema->type === "files")
+    <Preview {record} size="tiny"/>
+    @else
+    <a
+            href="/lucent/records/{{$record->id}}"
+            class="text-decoration-none text-dark d-block"
+    >
+        {{$viewModel->getRecordName($record, $schemas)}}
+    </a>
+
+    {{$record->status->value === "draft" ? "Draft" : ""}}
+    @endif
+
+</td>
+<td><a
+            class="text-decoration-none lx-small-text"
+            href="/lucent/content/{{$schema->name}}">{{$schema->label}}</a
+    >
+</td>
+
+
+<td>
+{{--    <div class="d-flex">--}}
+{{--        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24}/>--}}
+{{--            <div class="ms-2">--}}
+{{--                {frieldlyUpdatedAt}--}}
+{{--            </div>--}}
+{{--    </div>--}}
+</td>

front/views/sidebar/sidebar-item.blade.php

@@ -0,0 +1,7 @@
+@php
+$currentSchema = $currentSchema ?? null;
+$activeClass = $schema->name === $currentSchema?->name ? "active" : "";
+@endphp
+
+<a class="sidebar-item {{$activeClass}}" aria-current="page"
+href="/lucent/content/{{$schema->name}}">{{$schema->label}}</a>

front/views/sidebar/sidebar.blade.php

@@ -0,0 +1,22 @@
+<a class="nav-item" href="/lucent">{{$channel->name}}</a>
+<div class="sidebar">
+
+    <div class="sidebar-header">
+        Content
+    </div>
+    @foreach($schemas->where("type.value", "collection")->where("isEntry",true) as $schema)
+        @include("lucent::sidebar.sidebar-item", ["schema" => $schema])
+    @endforeach
+    <div class="sidebar-header">
+        Files
+    </div>
+    @foreach($schemas->where("type.value", "files") as $schema)
+        @include("lucent::sidebar.sidebar-item", ["schema" => $schema])
+    @endforeach
+    <div class="sidebar-header">
+        Other
+    </div>
+    @foreach($schemas->where("type.value", "collection")->where("isEntry",false) as $schema)
+        @include("lucent::sidebar.sidebar-item", ["schema" => $schema])
+    @endforeach
+</div>

front/views/svelte.blade.php

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

src/Account/AccountService.php

@@ -7,11 +7,15 @@ use Lucent\Primitive\Collection;
 
 readonly class AccountService
 {
+
     public function __construct(
-        private AuthService $authService,
+        private AuthService    $authService,
         private ChannelService $channelService,
-        private UserRepo $userRepo,
+        private UserRepo       $userRepo,
-    ) {}
+    )
+    {
+
+    }
 
     /**
      * @return Collection<User>
@@ -21,11 +25,13 @@ readonly class AccountService
         return $this->userRepo->all();
     }
 
+
     public function countUsers(): int
     {
         return $this->userRepo->count();
     }
 
+
     /**
      * @return Collection<UserProfile>
      */
@@ -48,4 +54,6 @@ readonly class AccountService
         $roles = $this->authService->currentUserRoles();
         return $this->channelService->schemasWritableByRoles($roles);
     }
+
+
 }

src/Account/AuthService.php

@@ -2,52 +2,235 @@
 
 namespace Lucent\Account;
 
+use Carbon\Carbon;
+use Illuminate\Contracts\Session\Session;
+use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Str;
+use Lucent\Channel\ChannelService;
 use Lucent\LucentException;
+use Lucent\Mail\LoginMail;
 
-interface AuthService
+readonly class AuthService
 {
-    public function currentUserId(): ?string;
 
-    public function currentUserRoles(): array;
+    public function __construct(
-    public function getCurrentUser(): User;
+        private ChannelService $channelService,
+        private UserRepo       $userRepo,
+        public Session         $session,
+    )
+    {
 
-    public function isLoggedIn(): bool;
+    }
+
+
+    public function currentUserId(): ?string
+    {
+
+        if (app()->runningInConsole()) {
+            return config("lucent.systemUserId");
+        } elseif(request()->segment(1) !== "lucent") {
+            return config("lucent.systemUserId");
+        } else {
+            return $this->session->get("user.id");
+        }
+
+    }
+
+    public
+    function currentUserRoles(): array
+    {
+        return $this->session->get("user.roles") ?? [];
+    }
+
+    public
+    function isLoggedIn(): bool
+    {
+        return !empty($this->currentUserId());
+    }
 
     /**
      * @throws LucentException
      */
-    public function login(string $email, string $token): void;
+    public
+    function login(string $email, string $token): void
+    {
 
-    public function refreshSession();
+        $user = $this->userRepo->findByEmail(new Email($email));
 
-    public function create(string $name, string $email, array $roles): User;
+        if ($user->isEmpty()) {
+            throw new LucentException("Your account was not found");
+        }
+
+        if ($user->get()->isRemoved()) {
+            throw new LucentException("Your account is not active");
+        }
+
+        if ($user->get()->mailToken !== $token) {
+            throw new LucentException("Token has expired or is invalid");
+        }
+
+        if (Carbon::parse($user->get()->loggedInAt)->lte(Carbon::now()->subHours(1))) {
+            throw new LucentException("Token has expired.");
+        }
+
+        $newUser = $user->get();
+        $newUser->updatedAt = Carbon::now()->toJson();
+        $newUser->mailToken = null;
+        $this->userRepo->update($newUser);
+        $this->session->put(["user" => $user->get()->safe()]);
+    }
+
+    public
+    function refreshSession()
+    {
+
+
+        $user = $this->userRepo->findById($this->currentUserId());
+
+        if ($user->isEmpty()) {
+            throw new LucentException("Your account was not found");
+        }
+
+        if ($user->get()->isRemoved()) {
+            throw new LucentException("Your account is not active");
+        }
+
+        $newUser = $user->get();
+        $this->session->put(["user" => $user->get()->safe()]);
+    }
+
+
+    public
+    function create(string $name, string $email, array $roles): User
+    {
+        $user = new User(
+            id: (string)Str::uuid(),
+            name: new Name($name),
+            email: new Email($email),
+            roles: $this->validateRoles($roles),
+            createdAt: Carbon::now()->toJson(),
+            updatedAt: Carbon::now()->toJson(),
+            loggedInAt: Carbon::now()->toJson(),
+            mailToken: Token::new(32),
+        );
+
+        $this->userRepo->insert($user);
+        return $user;
+    }
+
+
+
+    public function sendLoginEmail(string $email): void
+    {
+        $emailAddress = (new Email($email));
+        $user = $this->userRepo->findByEmail($emailAddress);
+
+        if ($user->isEmpty()) {
+            return;
+        }
+
+        if ($user->get()->isRemoved()) {
+            return;
+        }
+
+        $newToken = $this->userRepo->updateLoginToken($user->get()->id);
+
+        Mail::to($email)->send(
+            new LoginMail(
+                $email,
+                $newToken,
+                $this->channelService->channel->lucentUrl
+            )
+        );
+    }
 
-    public function sendLoginEmail(string $email): void;
 
     /**
      * @throws LucentException
      */
-    public function changeRoles(string $userId, array $roles): void;
+    public
+    function changeRoles(string $userId, array $roles): void
+    {
+        $user = $this->userRepo->findById($userId);
+
+        if ($user->isEmpty()) {
+            throw new LucentException("User not found");
+        }
+
+        $newUser = $user->get();
+        $newUser->roles = $this->validateRoles($roles);
+        $newUser->updatedAt = Carbon::now()->toJson();
+        $this->userRepo->update($newUser);
+    }
 
     /**
      * @throws LucentException
      */
-    public function updateName(string $name): void;
+    public
+    function updateName(string $name): void
+    {
+        $name = (new Name($name));
+        $this->userRepo->updateName($this->currentUserId(), $name);
+        $user = $this->userRepo->findById($this->currentUserId());
+        $this->session->put(["user" => $user->get()->safe()]);
+    }
 
     /**
      * @throws LucentException
      */
-    public function updateEmail(string $email): void;
+    public
+    function updateEmail(string $email): void
+    {
+        $email = (new Email($email));
+        $user = $this->userRepo->findByEmail($email);
+        if ($user->isDefined()) {
+            throw new LucentException("Email already assigned to user");
+        }
+
+        $this->userRepo->updateEmail($this->currentUserId(), $email);
+        $user = $this->userRepo->findById($this->currentUserId());
+        $this->session->put(["user" => $user->get()->safe()]);
+    }
+
 
     /**
      * @throws LucentException
      */
-    public function invite(string $name, string $email, array $roles): User;
+    public
+    function invite(
+        string $name,
+        string $email,
+        array  $roles
+    ): User
+    {
+        $user = $this->create($name, $email, $roles);
+        $this->sendLoginEmail($user->email);
+        return $user;
+    }
 
     /**
      * @throws LucentException
      */
-    public function registerAdmin(string $name, string $email): User;
+    public
+    function registerAdmin(
+        string $name,
+        string $email
+    ): User
+    {
+        $user = $this->invite($name, $email, ["admin"]);
+        $this->sendLoginEmail($user->email);
+        return $user;
+    }
+
+    public
+    function validateRoles(array $roles): array
+    {
+        return collect($roles)
+            ->filter(fn(string $role) => in_array($role, $this->channelService->channel->roles))
+            ->unique()
+            ->values()
+            ->toArray();
+    }
+
 
-    public function validateRoles(array $roles): array;
 }

src/Account/AuthServiceLucent.php

@@ -1,223 +0,0 @@
-<?php
-
-namespace Lucent\Account;
-
-use Carbon\Carbon;
-use Illuminate\Contracts\Session\Session;
-use Illuminate\Support\Facades\Mail;
-use Illuminate\Support\Str;
-use Lucent\Channel\ChannelService;
-use Lucent\LucentException;
-use Lucent\Mail\LoginMail;
-
-readonly class AuthServiceLucent implements AuthService
-{
-    public function __construct(
-        private ChannelService $channelService,
-        private UserRepo $userRepo,
-        public Session $session,
-    ) {}
-
-    public function currentUserId(): ?string
-    {
-        if (app()->runningInConsole()) {
-            return config("lucent.systemUserId");
-        } elseif (request()->segment(1) !== "lucent") {
-            return config("lucent.systemUserId");
-        }
-        return $this->session->get("user.id");
-    }
-
-    public function currentUserRoles(): array
-    {
-        return $this->session->get("user.roles") ?? [];
-    }
-
-    public function getCurrentUser(): User
-    {
-        return new User(
-            id: $this->session->get("user.id"),
-            name: new Name($this->session->get("user.name")),
-            email: new Email($this->session->get("user.email")),
-            roles: $this->session->get("user.roles"),
-            createdAt: Carbon::parse($this->session->get("user.createdAt")),
-            updatedAt: Carbon::parse($this->session->get("user.updatedAt")),
-            loggedInAt: null,
-            mailToken: null,
-        );
-    }
-
-    public function isLoggedIn(): bool
-    {
-        return !empty($this->currentUserId());
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function login(string $email, string $token): void
-    {
-        $user = $this->userRepo->findByEmail(new Email($email));
-
-        if ($user->isEmpty()) {
-            throw new LucentException("Your account was not found");
-        }
-
-        if ($user->get()->isRemoved()) {
-            throw new LucentException("Your account is not active");
-        }
-
-        if ($user->get()->mailToken !== $token) {
-            throw new LucentException("Token has expired or is invalid");
-        }
-
-        if (
-            Carbon::parse($user->get()->loggedInAt)->lte(
-                Carbon::now()->subHours(1),
-            )
-        ) {
-            throw new LucentException("Token has expired.");
-        }
-
-        $newUser = $user->get();
-        $newUser->updatedAt = Carbon::now();
-        $newUser->mailToken = null;
-        $this->userRepo->update($newUser);
-        $this->session->put(["user" => $user->get()->safe()]);
-    }
-
-    public function refreshSession()
-    {
-        $user = $this->userRepo->findById($this->currentUserId());
-
-        if ($user->isEmpty()) {
-            throw new LucentException("Your account was not found");
-        }
-
-        if ($user->get()->isRemoved()) {
-            throw new LucentException("Your account is not active");
-        }
-
-        $newUser = $user->get();
-        $this->session->put(["user" => $user->get()->safe()]);
-    }
-
-    public function create(string $name, string $email, array $roles): User
-    {
-        $user = new User(
-            id: (string) Str::uuid(),
-            name: new Name($name),
-            email: new Email($email),
-            roles: $this->validateRoles($roles),
-            createdAt: Carbon::now(),
-            updatedAt: Carbon::now(),
-            loggedInAt: Carbon::now(),
-            mailToken: Token::new(32),
-        );
-
-        $this->userRepo->insert($user);
-        return $user;
-    }
-
-    public function sendLoginEmail(string $email): void
-    {
-        $emailAddress = new Email($email);
-        $user = $this->userRepo->findByEmail($emailAddress);
-
-        if ($user->isEmpty()) {
-            return;
-        }
-
-        if ($user->get()->isRemoved()) {
-            return;
-        }
-
-        $newToken = $this->userRepo->updateLoginToken($user->get()->id);
-
-        Mail::to($email)->send(
-            new LoginMail(
-                $email,
-                $newToken,
-                $this->channelService->channel->lucentUrl,
-            ),
-        );
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function changeRoles(string $userId, array $roles): void
-    {
-        $user = $this->userRepo->findById($userId);
-
-        if ($user->isEmpty()) {
-            throw new LucentException("User not found");
-        }
-
-        $newUser = $user->get();
-        $newUser->roles = $this->validateRoles($roles);
-        $newUser->updatedAt = Carbon::now()->toJson();
-        $this->userRepo->update($newUser);
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function updateName(string $name): void
-    {
-        $name = new Name($name);
-        $this->userRepo->updateName($this->currentUserId(), $name);
-        $user = $this->userRepo->findById($this->currentUserId());
-        $this->session->put(["user" => $user->get()->safe()]);
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function updateEmail(string $email): void
-    {
-        $email = new Email($email);
-        $user = $this->userRepo->findByEmail($email);
-        if ($user->isDefined()) {
-            throw new LucentException("Email already assigned to user");
-        }
-
-        $this->userRepo->updateEmail($this->currentUserId(), $email);
-        $user = $this->userRepo->findById($this->currentUserId());
-        $this->session->put(["user" => $user->get()->safe()]);
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function invite(string $name, string $email, array $roles): User
-    {
-        $user = $this->create($name, $email, $roles);
-        $this->sendLoginEmail($user->email);
-        return $user;
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function registerAdmin(string $name, string $email): User
-    {
-        $user = $this->invite($name, $email, ["admin"]);
-        $this->sendLoginEmail($user->email);
-        return $user;
-    }
-
-    public function validateRoles(array $roles): array
-    {
-        return collect($roles)
-            ->filter(
-                fn(string $role) => in_array(
-                    $role,
-                    $this->channelService->channel->roles,
-                ),
-            )
-            ->unique()
-            ->values()
-            ->toArray();
-    }
-}

src/Account/AuthServiceLunar.php

@@ -1,105 +0,0 @@
-<?php
-
-namespace Lucent\Account;
-
-use Illuminate\Contracts\Session\Session;
-use Lucent\Channel\ChannelService;
-use Lucent\LucentException;
-use Filament\Facades\Filament;
-
-readonly class AuthServiceLunar implements AuthService
-{
-    public function __construct(
-        private ChannelService $channelService,
-        private UserRepo $userRepo,
-        public Session $session,
-    ) {}
-
-    public function currentUserId(): ?string
-    {
-        if (app()->runningInConsole()) {
-            return config("lucent.systemUserId");
-        } elseif (request()->segment(1) !== "lucent") {
-            return config("lucent.systemUserId");
-        }
-
-        return Filament::auth()->user()->id ?? null;
-    }
-    public function getCurrentUser(): User
-    {
-        return new User(
-            id: Filament::auth()->user()->id,
-            name: new Name(
-                Filament::auth()->user()->first_name .
-                    " " .
-                    Filament::auth()->user()->last_name,
-            ),
-            email: new Email(Filament::auth()->user()->email),
-            roles: [],
-            createdAt: Filament::auth()->user()->created_at,
-            updatedAt: Filament::auth()->user()->updated_at,
-            loggedInAt: null,
-            mailToken: null,
-        );
-    }
-
-    public function currentUserRoles(): array
-    {
-        return [];
-    }
-
-    public function isLoggedIn(): bool
-    {
-        return !empty($this->currentUserId());
-    }
-
-    /**
-     * @throws LucentException
-     */
-    public function login(string $email, string $token): void {}
-
-    public function refreshSession() {}
-
-    public function create(string $name, string $email, array $roles): User {}
-
-    public function sendLoginEmail(string $email): void {}
-
-    /**
-     * @throws LucentException
-     */
-    public function changeRoles(string $userId, array $roles): void {}
-
-    /**
-     * @throws LucentException
-     */
-    public function updateName(string $name): void {}
-
-    /**
-     * @throws LucentException
-     */
-    public function updateEmail(string $email): void {}
-
-    /**
-     * @throws LucentException
-     */
-    public function invite(string $name, string $email, array $roles): User {}
-
-    /**
-     * @throws LucentException
-     */
-    public function registerAdmin(string $name, string $email): User {}
-
-    public function validateRoles(array $roles): array
-    {
-        return collect($roles)
-            ->filter(
-                fn(string $role) => in_array(
-                    $role,
-                    $this->channelService->channel->roles,
-                ),
-            )
-            ->unique()
-            ->values()
-            ->toArray();
-    }
-}

src/Account/UserRepo.php

@@ -2,37 +2,111 @@
 
 namespace Lucent\Account;
 
+use Carbon\Carbon;
+use Lucent\Database\Database;
 use Lucent\Primitive\Collection;
 use PhpOption\Option;
 
-interface UserRepo
+class UserRepo
 {
-    public function count(): int;
+
+    public function count(): int
+    {
+        return Database::make()->table("users")->count();
+    }
 
     /**
      * @return Collection<User>
      */
-    public function all(): Collection;
+    public function all(): Collection
+    {
+        $usersData = Database::make()->table("users")->get();
 
-    public function insert(User $user): void;
+        $users = array_map(fn($userData) => $this->fromArray((array)$userData), $usersData->toArray());
+        return new Collection($users);
+    }
 
-    public function update(User $user): void;
 
-    public function updateLoginToken(string $id): string;
+    public static function insert(User $user): void
+    {
+        $userData = toArray($user);
+        $userData["roles"] = json_encode($userData["roles"]);
+        Database::make()->table("users")->insert($userData);
+    }
+
+    public function update(User $user): void
+    {
+        $userData = toArray($user);
+        $userData["roles"] = json_encode($userData["roles"]);
+        Database::make()->table("users")->where("id", $user->id)->update($userData);
+    }
+
+
+    public function updateLoginToken(string $id): string
+    {
+        $newToken = Token::new(32);
+
+        Database::make()->table("users")
+            ->where("id", $id)
+            ->update([
+                'loggedInAt' => Carbon::now()->toJson(),
+                'mailToken' => $newToken,
+            ]);
+
+        return $newToken;
+    }
+
 
     /**
      * @return Option<User>
      */
-    public function findByEmail(Email $email): Option;
+    public function findByEmail(Email $email): Option
+    {
+        $user = Database::make()->table("users")->where("email", $email->value())->first();
+
+        if (empty($user)) {
+            return none();
+        }
+
+        return some($this->fromArray((array)$user));
+    }
 
     /**
      * @return Option<User>
      */
-    public function findById(string $id): Option;
+    public function findById(string $id): Option
+    {
+        $user = Database::make()->table("users")->where("id", $id)->first();
 
-    public function updateName(string $userId, Name $name): void;
+        if (empty($user)) {
+            return none();
+        }
 
-    public function updateEmail(string $userId, Email $email): void;
+        return some($this->fromArray((array)$user));
+    }
 
-    public function fromArray(array $data): User;
+
+    public function updateName(string $userId, Name $name): void
+    {
+        Database::make()->table("users")->where("id", $userId)->update(["name" => $name->value]);
+    }
+
+    public function updateEmail(string $userId, Email $email): void
+    {
+        Database::make()->table("users")->where("id", $userId)->update(["email" => $email->value()]);
+    }
+
+    public function fromArray(array $data): User
+    {
+        return new User(
+            id: $data["id"],
+            name: new Name($data["name"] ?? ""),
+            email: new Email($data["email"]),
+            roles: json_decode($data["roles"] ?? "[]", true),
+            createdAt: $data["createdAt"],
+            updatedAt: $data["updatedAt"],
+            loggedInAt: $data["loggedInAt"] ?? null,
+            mailToken: $data["mailToken"] ?? null,
+        );
+    }
 }

src/Account/UserRepoLucent.php

@@ -1,128 +0,0 @@
-<?php
-
-namespace Lucent\Account;
-
-use Carbon\Carbon;
-use Lucent\Database\Database;
-use Lucent\Primitive\Collection;
-use PhpOption\Option;
-
-class UserRepoLucent implements UserRepo
-{
-    private $tableName = "lucent_users";
-
-    public function count(): int
-    {
-        return Database::make()->table($this->tableName)->count();
-    }
-
-    /**
-     * @return Collection<User>
-     */
-    public function all(): Collection
-    {
-        $usersData = Database::make()->table($this->tableName)->get();
-
-        $users = array_map(
-            fn($userData) => $this->fromArray((array) $userData),
-            $usersData->toArray(),
-        );
-        return new Collection($users);
-    }
-
-    public function insert(User $user): void
-    {
-        $userData = toArray($user);
-        $userData["roles"] = json_encode($userData["roles"]);
-        Database::make()->table($this->tableName)->insert($userData);
-    }
-
-    public function update(User $user): void
-    {
-        $userData = toArray($user);
-        $userData["roles"] = json_encode($userData["roles"]);
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $user->id)
-            ->update($userData);
-    }
-
-    public function updateLoginToken(string $id): string
-    {
-        $newToken = Token::new(32);
-
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $id)
-            ->update([
-                "loggedInAt" => Carbon::now()->toJson(),
-                "mailToken" => $newToken,
-            ]);
-
-        return $newToken;
-    }
-
-    /**
-     * @return Option<User>
-     */
-    public function findByEmail(Email $email): Option
-    {
-        $user = Database::make()
-            ->table($this->tableName)
-            ->where("email", $email->value())
-            ->first();
-
-        if (empty($user)) {
-            return none();
-        }
-
-        return some($this->fromArray((array) $user));
-    }
-
-    /**
-     * @return Option<User>
-     */
-    public function findById(string $id): Option
-    {
-        $user = Database::make()
-            ->table($this->tableName)
-            ->where("id", $id)
-            ->first();
-
-        if (empty($user)) {
-            return none();
-        }
-
-        return some($this->fromArray((array) $user));
-    }
-
-    public function updateName(string $userId, Name $name): void
-    {
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $userId)
-            ->update(["name" => $name->value]);
-    }
-
-    public function updateEmail(string $userId, Email $email): void
-    {
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $userId)
-            ->update(["email" => $email->value()]);
-    }
-
-    public function fromArray(array $data): User
-    {
-        return new User(
-            id: $data["id"],
-            name: new Name($data["name"] ?? ""),
-            email: new Email($data["email"]),
-            roles: json_decode($data["roles"] ?? "[]", true),
-            createdAt: $data["createdAt"],
-            updatedAt: $data["updatedAt"],
-            loggedInAt: $data["loggedInAt"] ?? null,
-            mailToken: $data["mailToken"] ?? null,
-        );
-    }
-}

src/Account/UserRepoLunar.php

@@ -1,130 +0,0 @@
-<?php
-
-namespace Lucent\Account;
-
-use Carbon\Carbon;
-use Lucent\Database\Database;
-use Lucent\Primitive\Collection;
-use PhpOption\Option;
-
-class UserRepoLunar implements UserRepo
-{
-    private $tableName = "lunar_staff";
-
-    public function count(): int
-    {
-        return Database::make()->table($this->tableName)->count();
-    }
-
-    /**
-     * @return Collection<User>
-     */
-    public function all(): Collection
-    {
-        $usersData = Database::make()->table($this->tableName)->get();
-
-        $users = array_map(
-            fn($userData) => $this->fromArray((array) $userData),
-            $usersData->toArray(),
-        );
-        return new Collection($users);
-    }
-
-    public function insert(User $user): void
-    {
-        $userData = toArray($user);
-        $userData["roles"] = json_encode($userData["roles"]);
-        Database::make()->table($this->tableName)->insert($userData);
-    }
-
-    public function update(User $user): void
-    {
-        $userData = toArray($user);
-        $userData["roles"] = json_encode($userData["roles"]);
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $user->id)
-            ->update($userData);
-    }
-
-    public function updateLoginToken(string $id): string
-    {
-        $newToken = Token::new(32);
-
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $id)
-            ->update([
-                "loggedInAt" => Carbon::now()->toJson(),
-                "mailToken" => $newToken,
-            ]);
-
-        return $newToken;
-    }
-
-    /**
-     * @return Option<User>
-     */
-    public function findByEmail(Email $email): Option
-    {
-        $user = Database::make()
-            ->table($this->tableName)
-            ->where("email", $email->value())
-            ->first();
-
-        if (empty($user)) {
-            return none();
-        }
-
-        return some($this->fromArray((array) $user));
-    }
-
-    /**
-     * @return Option<User>
-     */
-    public function findById(string $id): Option
-    {
-        $user = Database::make()
-            ->table($this->tableName)
-            ->where("id", $id)
-            ->first();
-
-        if (empty($user)) {
-            return none();
-        }
-
-        return some($this->fromArray((array) $user));
-    }
-
-    public function updateName(string $userId, Name $name): void
-    {
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $userId)
-            ->update(["name" => $name->value]);
-    }
-
-    public function updateEmail(string $userId, Email $email): void
-    {
-        Database::make()
-            ->table($this->tableName)
-            ->where("id", $userId)
-            ->update(["email" => $email->value()]);
-    }
-
-    public function fromArray(array $data): User
-    {
-        return new User(
-            id: $data["id"],
-            name: new Name(
-                $data["first_name"] . " " . $data["last_name"] ?? "",
-            ),
-            email: new Email($data["email"]),
-            roles: [],
-            createdAt: $data["created_at"],
-            updatedAt: $data["updated_at"],
-            loggedInAt: null,
-            mailToken: null,
-        );
-    }
-}